From 4b367c9f321ea55abddaf3e40b24dc1a0737c5e6 Mon Sep 17 00:00:00 2001
From: Kevin Hahn <kevin_hahn@sil.org>
Date: Wed, 3 Sep 2025 13:17:29 +0700
Subject: [PATCH 01/12] fix dev tools dialog not working because mini lcm api
 might not be created yet

---
 frontend/viewer/src/lib/layout/DevToolsDialog.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/viewer/src/lib/layout/DevToolsDialog.svelte b/frontend/viewer/src/lib/layout/DevToolsDialog.svelte
index 46906053b5..c21d902be4 100644
--- a/frontend/viewer/src/lib/layout/DevToolsDialog.svelte
+++ b/frontend/viewer/src/lib/layout/DevToolsDialog.svelte
@@ -2,13 +2,13 @@
   import { Button } from '$lib/components/ui/button';
   import * as Dialog from '$lib/components/ui/dialog';
   import { Icon } from '$lib/components/ui/icon';
-  import { useMiniLcmApi } from '$lib/services/service-provider';
   import { defaultEntry } from '$lib/utils';
   import { useWritingSystemService } from '$lib/writing-system-service.svelte';
   import type { Snippet } from 'svelte';
   import DevContent from './DevContent.svelte';
+  import {useProjectContext} from '$lib/project-context.svelte';
 
-  const api = useMiniLcmApi();
+  const projectContext = useProjectContext();
   const writingSystems = useWritingSystemService();
 
   type Props = {
@@ -22,7 +22,7 @@
       const entry = defaultEntry();
       const vWsId = writingSystems.defaultVernacular?.wsId;
       if (vWsId) entry.citationForm[vWsId] = `*Test ${Math.random().toString(36).substring(2, 7)}`;
-      await api.createEntry(entry);
+      await projectContext.api.createEntry(entry);
     }
   }
 </script>

From 00a2e582e37a2b53784a359f91e65116c562fdee Mon Sep 17 00:00:00 2001
From: Kevin Hahn <kevin_hahn@sil.org>
Date: Wed, 3 Sep 2025 13:49:47 +0700
Subject: [PATCH 02/12] don't crash when loading the browse view with an entry
 selected

---
 frontend/viewer/src/project/browse/BrowseView.svelte | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/viewer/src/project/browse/BrowseView.svelte b/frontend/viewer/src/project/browse/BrowseView.svelte
index eda060de17..07aa47a100 100644
--- a/frontend/viewer/src/project/browse/BrowseView.svelte
+++ b/frontend/viewer/src/project/browse/BrowseView.svelte
@@ -18,7 +18,9 @@
   import IfOnce from '$lib/components/if-once/if-once.svelte';
   import {SortField} from '$lib/dotnet-types';
   import SortMenu, {type SortConfig} from './SortMenu.svelte';
+  import {useProjectContext} from '$lib/project-context.svelte';
 
+  const projectContext = useProjectContext();
   const currentView = useCurrentView();
   const dialogsService = useDialogsService();
   const selectedEntryId = new QueryParamState({key: 'entryId', allowBack: true, replaceOnDefaultValue: true});
@@ -101,7 +103,7 @@
             <div class="flex items-center justify-center h-full text-muted-foreground text-center m-2">
               <p>{$t`Select ${pt($t`an entry`, $t`a word`, $currentView)} to view details`}</p>
             </div>
-          {:else}
+          {:else if projectContext.maybeApi}
             <div class="md:p-4 md:pl-4 h-full">
               <EntryView
                 entryId={selectedEntryId.current}

From 60bebc3a8fecb04e97b3658fed9a2ba6e7af7b1e Mon Sep 17 00:00:00 2001
From: Kevin Hahn <kevin_hahn@sil.org>
Date: Wed, 3 Sep 2025 13:55:42 +0700
Subject: [PATCH 03/12] put fieldId and label into `FieldRootState` context,
 use new fieldId prop on primitive editors.

---
 .../components/editor/field/field-root.svelte | 33 +++++++++++++------
 .../editor/field/field-title.svelte           |  3 ++
 .../EntryEditorPrimitive.svelte               | 14 ++++----
 .../ExampleEditorPrimitive.svelte             |  6 ++--
 .../SenseEditorPrimitive.svelte               |  8 ++---
 5 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/frontend/viewer/src/lib/components/editor/field/field-root.svelte b/frontend/viewer/src/lib/components/editor/field/field-root.svelte
index 50bfc06336..c6e32a03a0 100644
--- a/frontend/viewer/src/lib/components/editor/field/field-root.svelte
+++ b/frontend/viewer/src/lib/components/editor/field/field-root.svelte
@@ -1,23 +1,32 @@
 <script lang="ts" module>
   import {Context} from 'runed';
-
-  type FieldRootStateProps = {
+  import type {FieldId} from '$lib/entry-editor/field-data';
+  const fieldIdSymbol = Symbol('fw-lite-field-id');
+  class FieldRootState {
+    //require using the constructor when this type is used
+    private readonly [fieldIdSymbol] = true;
     labelId: string;
-  };
+    fieldId? = $state<FieldId>();
+    label? = $state<string>();
+
+    constructor(labelId: string) {
+      this.labelId = labelId;
+    }
+  }
 
-  const fieldRootContext = new Context<FieldRootStateProps>('Field.Root');
+  const fieldRootContext = new Context<FieldRootState>('Field.Root');
 
-  export function usesFieldRoot(props: FieldRootStateProps): FieldRootStateProps {
+  export function usesFieldRoot(props: FieldRootState): FieldRootState {
     return fieldRootContext.set(props);
   }
 
-  type FieldTitleStateProps = FieldRootStateProps;
+  type FieldTitleStateProps = FieldRootState;
 
   export function useFieldTitle(): FieldTitleStateProps {
     return fieldRootContext.get();
   }
 
-  type FieldBodyStateProps = FieldRootStateProps;
+  type FieldBodyStateProps = FieldRootState;
   export function tryUseFieldBody(): FieldBodyStateProps | undefined {
     return fieldRootContext.getOr(undefined);
   }
@@ -28,19 +37,23 @@
   import type {WithElementRef} from 'bits-ui';
   import type {HTMLAttributes} from 'svelte/elements';
 
-  type FieldRootProps = WithElementRef<HTMLAttributes<HTMLDivElement>>;
+  type FieldRootProps = { fieldId?: FieldId } & WithElementRef<HTMLAttributes<HTMLDivElement>>;
 
   const fieldLabelId = $props.id();
-  usesFieldRoot({labelId: fieldLabelId});
+  const fieldProps = usesFieldRoot(new FieldRootState(fieldLabelId));
+  $effect(() => {
+    fieldProps.fieldId = fieldId;
+  });
 
   const {
     class: className,
     children,
+    fieldId = undefined,
     ref = $bindable(null),
     ...restProps
   }: FieldRootProps = $props();
 </script>
 
-<div class={cn('grid grid-cols-subgrid col-span-full items-baseline', className)} {...restProps}>
+<div style="grid-area: {fieldId}" class={cn('grid grid-cols-subgrid col-span-full items-baseline', className)} {...restProps}>
   {@render children?.()}
 </div>
diff --git a/frontend/viewer/src/lib/components/editor/field/field-title.svelte b/frontend/viewer/src/lib/components/editor/field/field-title.svelte
index 61d2b0e9c3..56e656853f 100644
--- a/frontend/viewer/src/lib/components/editor/field/field-title.svelte
+++ b/frontend/viewer/src/lib/components/editor/field/field-title.svelte
@@ -17,6 +17,9 @@
 
   const view = useCurrentView();
   const label = $derived(pickViewText(name, $view.type));
+  $effect(() => {
+    stateProps.label = label;
+  });
   const title = $derived(typeof name === 'string' ? undefined
     : $view.type === 'fw-classic'
       ? $t`${name.lite} (FieldWorks Lite)`
diff --git a/frontend/viewer/src/lib/entry-editor/object-editors/EntryEditorPrimitive.svelte b/frontend/viewer/src/lib/entry-editor/object-editors/EntryEditorPrimitive.svelte
index 75e91bf653..5fea39c93b 100644
--- a/frontend/viewer/src/lib/entry-editor/object-editors/EntryEditorPrimitive.svelte
+++ b/frontend/viewer/src/lib/entry-editor/object-editors/EntryEditorPrimitive.svelte
@@ -39,7 +39,7 @@
 </script>
 
 <Editor.SubGrid {...mergeProps(rest, { class: 'gap-2', style: { gridTemplateAreas: objectTemplateAreas($currentView, entry) } })}>
-  <Editor.Field.Root style="grid-area: lexemeForm" class={cn($currentView.fields.lexemeForm.show || 'hidden')}>
+  <Editor.Field.Root fieldId="lexemeForm" class={cn($currentView.fields.lexemeForm.show || 'hidden')}>
     <Editor.Field.Title name={vt($t`Lexeme form`, $t`Word`)} helpId={fieldData.lexemeForm.helpId} />
     <Editor.Field.Body subGrid>
       <MultiWsInput
@@ -51,7 +51,7 @@
     </Editor.Field.Body>
   </Editor.Field.Root>
 
-  <Editor.Field.Root style="grid-area: citationForm" class={cn($currentView.fields.citationForm.show || 'hidden')}>
+  <Editor.Field.Root fieldId="citationForm" class={cn($currentView.fields.citationForm.show || 'hidden')}>
     <Editor.Field.Title name={vt($t`Citation form`, $t`Display as`)} helpId={fieldData.citationForm.helpId} />
     <Editor.Field.Body subGrid>
       <MultiWsInput
@@ -63,7 +63,7 @@
   </Editor.Field.Root>
 
   {#if !modalMode}
-    <Editor.Field.Root style="grid-area: complexForms" class={cn($currentView.fields.complexForms.show || 'hidden')}>
+    <Editor.Field.Root fieldId="complexForms" class={cn($currentView.fields.complexForms.show || 'hidden')}>
       <Editor.Field.Title name={vt($t`Complex forms`, $t`Part of`)} helpId={fieldData.complexForms.helpId} />
       <Editor.Field.Body>
         <ComplexForms onchange={() => onFieldChanged('complexForms')}
@@ -73,7 +73,7 @@
       </Editor.Field.Body>
     </Editor.Field.Root>
 
-    <Editor.Field.Root style="grid-area: components" class={cn($currentView.fields.components.show || 'hidden')}>
+    <Editor.Field.Root fieldId="components" class={cn($currentView.fields.components.show || 'hidden')}>
       <Editor.Field.Title name={$t`Components`} helpId={fieldData.components.helpId} />
       <Editor.Field.Body>
         <ComplexFormComponents
@@ -84,7 +84,7 @@
       </Editor.Field.Body>
     </Editor.Field.Root>
 
-    <Editor.Field.Root style="grid-area: complexFormTypes" class={cn($currentView.fields.complexFormTypes.show || 'hidden')}>
+    <Editor.Field.Root fieldId="complexFormTypes" class={cn($currentView.fields.complexFormTypes.show || 'hidden')}>
       <Editor.Field.Title name={vt($t`Complex form types`, $t`Uses components as`)} helpId={fieldData.complexFormTypes.helpId} />
       <Editor.Field.Body>
         <MultiSelect
@@ -99,7 +99,7 @@
     </Editor.Field.Root>
   {/if}
 
-  <Editor.Field.Root style="grid-area: literalMeaning" class={cn($currentView.fields.literalMeaning.show || 'hidden')}>
+  <Editor.Field.Root fieldId="literalMeaning" class={cn($currentView.fields.literalMeaning.show || 'hidden')}>
     <Editor.Field.Title name={vt($t`Literal meaning`)} helpId={fieldData.literalMeaning.helpId} />
     <Editor.Field.Body subGrid>
       <RichMultiWsInput
@@ -110,7 +110,7 @@
     </Editor.Field.Body>
   </Editor.Field.Root>
 
-  <Editor.Field.Root style="grid-area: note" class={cn($currentView.fields.note.show || 'hidden')}>
+  <Editor.Field.Root fieldId="note" class={cn($currentView.fields.note.show || 'hidden')}>
     <Editor.Field.Title name={vt($t`Note`)} helpId={fieldData.note.helpId} />
     <Editor.Field.Body subGrid>
       <RichMultiWsInput
diff --git a/frontend/viewer/src/lib/entry-editor/object-editors/ExampleEditorPrimitive.svelte b/frontend/viewer/src/lib/entry-editor/object-editors/ExampleEditorPrimitive.svelte
index 789dae5e1c..b73357e773 100644
--- a/frontend/viewer/src/lib/entry-editor/object-editors/ExampleEditorPrimitive.svelte
+++ b/frontend/viewer/src/lib/entry-editor/object-editors/ExampleEditorPrimitive.svelte
@@ -33,7 +33,7 @@
 </script>
 
 <Editor.SubGrid {...mergeProps(rest, { class: 'gap-2', style: { gridTemplateAreas: objectTemplateAreas($currentView, example) } })}>
-  <Editor.Field.Root style="grid-area: sentence" class={cn($currentView.fields.sentence.show || 'hidden')}>
+  <Editor.Field.Root fieldId="sentence" class={cn($currentView.fields.sentence.show || 'hidden')}>
     <Editor.Field.Title name={vt($t`Sentence`)} helpId={fieldData.sentence.helpId} />
     <Editor.Field.Body subGrid>
       <RichMultiWsInput
@@ -44,7 +44,7 @@
     </Editor.Field.Body>
   </Editor.Field.Root>
 
-  <Editor.Field.Root style="grid-area: translation" class={cn($currentView.fields.translation.show || 'hidden')}>
+  <Editor.Field.Root fieldId="translation" class={cn($currentView.fields.translation.show || 'hidden')}>
     <Editor.Field.Title name={vt($t`Translation`)} helpId={fieldData.translation.helpId} />
     <Editor.Field.Body subGrid>
       <RichMultiWsInput
@@ -56,7 +56,7 @@
   </Editor.Field.Root>
 
   {#if writingSystemService.defaultAnalysis}
-    <Editor.Field.Root style="grid-area: reference" class={cn($currentView.fields.reference.show || 'hidden')}>
+    <Editor.Field.Root fieldId="reference" class={cn($currentView.fields.reference.show || 'hidden')}>
       <Editor.Field.Title name={vt($t`Reference`)} helpId={fieldData.reference.helpId} />
       <Editor.Field.Body>
         <RichWsInput
diff --git a/frontend/viewer/src/lib/entry-editor/object-editors/SenseEditorPrimitive.svelte b/frontend/viewer/src/lib/entry-editor/object-editors/SenseEditorPrimitive.svelte
index 2c21054bb9..430cf48439 100644
--- a/frontend/viewer/src/lib/entry-editor/object-editors/SenseEditorPrimitive.svelte
+++ b/frontend/viewer/src/lib/entry-editor/object-editors/SenseEditorPrimitive.svelte
@@ -37,7 +37,7 @@
 </script>
 
 <Editor.SubGrid {...mergeProps(rest, { class: 'gap-2', style: { gridTemplateAreas: objectTemplateAreas($currentView, sense) } })}>
-  <Editor.Field.Root style="grid-area: gloss" class={cn($currentView.fields.gloss.show || 'hidden')}>
+  <Editor.Field.Root fieldId="gloss" class={cn($currentView.fields.gloss.show || 'hidden')}>
     <Editor.Field.Title name={$t`Gloss`} helpId={fieldData.gloss.helpId} />
     <Editor.Field.Body subGrid>
       <MultiWsInput
@@ -48,7 +48,7 @@
     </Editor.Field.Body>
   </Editor.Field.Root>
 
-  <Editor.Field.Root style="grid-area: definition" class={cn($currentView.fields.definition.show || 'hidden')}>
+  <Editor.Field.Root fieldId="definition" class={cn($currentView.fields.definition.show || 'hidden')}>
     <Editor.Field.Title name={$t`Definition`} helpId={fieldData.definition.helpId} />
     <Editor.Field.Body subGrid>
       <RichMultiWsInput
@@ -59,7 +59,7 @@
     </Editor.Field.Body>
   </Editor.Field.Root>
 
-  <Editor.Field.Root style="grid-area: partOfSpeechId" class={cn($currentView.fields.partOfSpeechId.show || 'hidden')}>
+  <Editor.Field.Root fieldId="partOfSpeechId" class={cn($currentView.fields.partOfSpeechId.show || 'hidden')}>
     <Editor.Field.Title name={vt($t`Grammatical info.`, $t`Part of speech`)} helpId={fieldData.partOfSpeechId.helpId}/>
     <Editor.Field.Body>
       <Select
@@ -75,7 +75,7 @@
     </Editor.Field.Body>
   </Editor.Field.Root>
 
-  <Editor.Field.Root style="grid-area: semanticDomains" class={cn($currentView.fields.semanticDomains.show || 'hidden')}>
+  <Editor.Field.Root fieldId="semanticDomains" class={cn($currentView.fields.semanticDomains.show || 'hidden')}>
     <Editor.Field.Title name={$t`Semantic domains`} helpId={fieldData.semanticDomains.helpId} />
     <Editor.Field.Body>
       <MultiSelect

From bcb638ca5f3f7905cf42e7bf92273330bb9159f7 Mon Sep 17 00:00:00 2001
From: Kevin Hahn <kevin_hahn@sil.org>
Date: Wed, 3 Sep 2025 13:56:25 +0700
Subject: [PATCH 04/12] create a lexicon editor primitive which takes an object
 of `Entry` `Sense` or `Example` and choses the related editor

---
 .../LexiconEditorPrimitive.svelte             | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 frontend/viewer/src/lib/entry-editor/object-editors/LexiconEditorPrimitive.svelte

diff --git a/frontend/viewer/src/lib/entry-editor/object-editors/LexiconEditorPrimitive.svelte b/frontend/viewer/src/lib/entry-editor/object-editors/LexiconEditorPrimitive.svelte
new file mode 100644
index 0000000000..810fe67ff4
--- /dev/null
+++ b/frontend/viewer/src/lib/entry-editor/object-editors/LexiconEditorPrimitive.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type {IEntry, IExampleSentence, ISense} from '$lib/dotnet-types';
+  import {isEntry, isExample, isSense} from '$lib/utils';
+  import EntryEditorPrimitive from '$lib/entry-editor/object-editors/EntryEditorPrimitive.svelte';
+  import SenseEditorPrimitive from '$lib/entry-editor/object-editors/SenseEditorPrimitive.svelte';
+  import ExampleEditorPrimitive from '$lib/entry-editor/object-editors/ExampleEditorPrimitive.svelte';
+
+  let {
+    object
+  }: {
+    object: IEntry | ISense | IExampleSentence | undefined
+  } = $props();
+</script>
+{#if isEntry(object)}
+  <EntryEditorPrimitive entry={object} readonly />
+{:else if isSense(object)}
+  <SenseEditorPrimitive sense={object} readonly />
+{:else if isExample(object)}
+  <ExampleEditorPrimitive example={object} readonly />
+{/if}

From 416bf55bc2edd61b8ea6f426147893e02b516790 Mon Sep 17 00:00:00 2001
From: Kevin Hahn <kevin_hahn@sil.org>
Date: Wed, 3 Sep 2025 13:57:33 +0700
Subject: [PATCH 05/12] create a subject context which editor primitives set so
 that child editors can get the current object being edited

---
 .../EntryEditorPrimitive.svelte               |  2 ++
 .../ExampleEditorPrimitive.svelte             |  2 ++
 .../SenseEditorPrimitive.svelte               |  3 ++-
 .../object-editors/subject-context.ts         | 21 +++++++++++++++++++
 4 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 frontend/viewer/src/lib/entry-editor/object-editors/subject-context.ts

diff --git a/frontend/viewer/src/lib/entry-editor/object-editors/EntryEditorPrimitive.svelte b/frontend/viewer/src/lib/entry-editor/object-editors/EntryEditorPrimitive.svelte
index 5fea39c93b..5ac1a20ece 100644
--- a/frontend/viewer/src/lib/entry-editor/object-editors/EntryEditorPrimitive.svelte
+++ b/frontend/viewer/src/lib/entry-editor/object-editors/EntryEditorPrimitive.svelte
@@ -13,6 +13,7 @@
   import ComplexForms from '../field-editors/ComplexForms.svelte';
   import type {EditorSubGridProps} from '$lib/components/editor/editor-sub-grid.svelte';
   import {mergeProps} from 'bits-ui';
+  import {initSubjectContext} from '$lib/entry-editor/object-editors/subject-context';
 
   interface Props extends Omit<EditorSubGridProps, 'onchange'> {
     entry: IEntry;
@@ -32,6 +33,7 @@
   const writingSystemService = useWritingSystemService();
   const complexFormTypes = useComplexFormTypes();
   const currentView = useCurrentView();
+  initSubjectContext(() => entry);
 
   function onFieldChanged(field: FieldId) {
     onchange?.(entry, field);
diff --git a/frontend/viewer/src/lib/entry-editor/object-editors/ExampleEditorPrimitive.svelte b/frontend/viewer/src/lib/entry-editor/object-editors/ExampleEditorPrimitive.svelte
index b73357e773..b91ed16d8c 100644
--- a/frontend/viewer/src/lib/entry-editor/object-editors/ExampleEditorPrimitive.svelte
+++ b/frontend/viewer/src/lib/entry-editor/object-editors/ExampleEditorPrimitive.svelte
@@ -10,6 +10,7 @@
   import {RichMultiWsInput, RichWsInput} from '$lib/components/field-editors';
   import type {EditorSubGridProps} from '$lib/components/editor/editor-sub-grid.svelte';
   import {mergeProps} from 'bits-ui';
+  import {initSubjectContext} from '$lib/entry-editor/object-editors/subject-context';
 
   interface Props extends Omit<EditorSubGridProps, 'onchange'> {
     example: IExampleSentence;
@@ -26,6 +27,7 @@
 
   const writingSystemService = useWritingSystemService();
   const currentView = useCurrentView();
+  initSubjectContext(() => example);
 
   function onFieldChanged(field: FieldId) {
     onchange?.(example, field);
diff --git a/frontend/viewer/src/lib/entry-editor/object-editors/SenseEditorPrimitive.svelte b/frontend/viewer/src/lib/entry-editor/object-editors/SenseEditorPrimitive.svelte
index 430cf48439..f1ceb9ddd7 100644
--- a/frontend/viewer/src/lib/entry-editor/object-editors/SenseEditorPrimitive.svelte
+++ b/frontend/viewer/src/lib/entry-editor/object-editors/SenseEditorPrimitive.svelte
@@ -12,6 +12,7 @@
   import {cn} from '$lib/utils';
   import type {EditorSubGridProps} from '$lib/components/editor/editor-sub-grid.svelte';
   import {mergeProps} from 'bits-ui';
+  import {initSubjectContext} from '$lib/entry-editor/object-editors/subject-context';
 
   interface Props extends Omit<EditorSubGridProps, 'onchange'> {
     sense: ISense;
@@ -30,7 +31,7 @@
   const partsOfSpeech = usePartsOfSpeech();
   const semanticDomains = useSemanticDomains();
   const currentView = useCurrentView();
-
+  initSubjectContext(() => sense);
   function onFieldChanged(field: FieldId) {
     onchange?.(sense, field);
   }
diff --git a/frontend/viewer/src/lib/entry-editor/object-editors/subject-context.ts b/frontend/viewer/src/lib/entry-editor/object-editors/subject-context.ts
new file mode 100644
index 0000000000..c4c4910a63
--- /dev/null
+++ b/frontend/viewer/src/lib/entry-editor/object-editors/subject-context.ts
@@ -0,0 +1,21 @@
+import {Context} from 'runed';
+import type {IEntry, IExampleSentence, ISense} from '$lib/dotnet-types';
+
+interface EditorPrimitiveSubject {
+  readonly current: IEntry | ISense | IExampleSentence | undefined
+}
+export const subjectContext = new Context<EditorPrimitiveSubject>('subject-context');
+
+export function initSubjectContext(subject: () => IEntry | ISense | IExampleSentence) {
+  const editorPrimitiveSubject: EditorPrimitiveSubject = {
+    get current() {
+      return subject?.();
+    }
+  };
+  subjectContext.set(editorPrimitiveSubject);
+  return editorPrimitiveSubject;
+}
+
+export function useSubjectContext() {
+  return subjectContext.getOr(undefined);
+}

From 66958406a66808b9823f8d789a4dd5ed9601302e Mon Sep 17 00:00:00 2001
From: Kevin Hahn <kevin_hahn@sil.org>
Date: Wed, 3 Sep 2025 14:01:41 +0700
Subject: [PATCH 06/12] contextually display fields in the audio dialog,
 rewrite AudioDialog to be used inline and not via dialogs-service.ts

---
 .../viewer/src/lib/DialogsProvider.svelte     |  2 -
 .../lib/components/audio/AudioDialog.svelte   | 40 ++++++++-----------
 .../field-editors/audio-input.svelte          | 39 +++++++++++++-----
 .../src/lib/services/dialogs-service.ts       |  8 ----
 4 files changed, 46 insertions(+), 43 deletions(-)

diff --git a/frontend/viewer/src/lib/DialogsProvider.svelte b/frontend/viewer/src/lib/DialogsProvider.svelte
index 0245dbe065..94cf81e3b2 100644
--- a/frontend/viewer/src/lib/DialogsProvider.svelte
+++ b/frontend/viewer/src/lib/DialogsProvider.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import NewEntryDialog from '$lib/entry-editor/NewEntryDialog.svelte';
   import DeleteDialog from '$lib/entry-editor/DeleteDialog.svelte';
-  import AudioDialog from './components/audio/AudioDialog.svelte';
   import {useDialogsService} from '$lib/services/dialogs-service';
   import {useProjectContext} from '$lib/project-context.svelte';
   const projectContext = useProjectContext();
@@ -14,6 +13,5 @@
 
 {#if projectContext.maybeApi}
   <NewEntryDialog/>
-  <AudioDialog/>
 {/if}
 <DeleteDialog bind:this={deleteDialog}/>
diff --git a/frontend/viewer/src/lib/components/audio/AudioDialog.svelte b/frontend/viewer/src/lib/components/audio/AudioDialog.svelte
index af490018a7..2d6ee4df77 100644
--- a/frontend/viewer/src/lib/components/audio/AudioDialog.svelte
+++ b/frontend/viewer/src/lib/components/audio/AudioDialog.svelte
@@ -2,7 +2,6 @@
   import {t} from 'svelte-i18n-lingui';
   import {Button} from '$lib/components/ui/button';
   import * as Dialog from '$lib/components/ui/dialog';
-  import {useDialogsService} from '$lib/services/dialogs-service.js';
   import {useBackHandler} from '$lib/utils/back-handler.svelte';
   import {watch} from 'runed';
   import AudioProvider from './audio-provider.svelte';
@@ -10,11 +9,20 @@
   import {useLexboxApi} from '$lib/services/service-provider';
   import {UploadFileResult} from '$lib/dotnet-types/generated-types/MiniLcm/Media/UploadFileResult';
   import {AppNotification} from '$lib/notifications/notifications';
-
-  let open = $state(false);
+  import type {Snippet} from 'svelte';
+
+  let {
+    open = $bindable(false),
+    title = undefined,
+    onSubmit = () => {},
+    children = undefined
+  } : {
+    open: boolean,
+    title?: string,
+    onSubmit?: (audioId: string) => void,
+    children?: Snippet
+  } = $props();
   useBackHandler({addToStack: () => open, onBack: () => open = false, key: 'audio-dialog'});
-  const dialogsService = useDialogsService();
-  dialogsService.invokeAudioDialog = getAudio;
   const lexboxApi = useLexboxApi();
 
   let submitting = $state(false);
@@ -22,19 +30,6 @@
   let finalAudio = $state<File>();
   const tooBig = $derived((finalAudio?.size ?? 0) > 10 * 1024 * 1024);
 
-  let requester: {
-    resolve: (mediaUri: string | undefined) => void
-  } | undefined;
-
-
-  async function getAudio() {
-    reset();
-    return new Promise<string | undefined>((resolve) => {
-      requester = {resolve};
-      open = true;
-    });
-  }
-
   watch(() => open, () => {
     if (!open) reset();
   });
@@ -49,8 +44,6 @@
   }
 
   function reset() {
-    requester?.resolve(undefined);
-    requester = undefined;
     clearAudio();
   }
 
@@ -61,12 +54,11 @@
 
   async function submitAudio() {
     if (!selectedFile) throw new Error('No audio to upload');
-    if (!requester) throw new Error('No requester');
 
     submitting = true;
     try {
       const audioId = await uploadAudio();
-      requester.resolve(audioId);
+      onSubmit(audioId);
       close();
     } finally {
       submitting = false;
@@ -92,6 +84,7 @@
       case UploadFileResult.Error:
         throw new Error(response.errorMessage ?? $t`Unknown error`);
     }
+    if (!response.mediaUri) throw new Error($t`No mediaUri returned`);
 
     return response.mediaUri;
   }
@@ -140,8 +133,9 @@
 <Dialog.Root bind:open>
   <Dialog.DialogContent class="grid-rows-[auto_1fr_auto] sm:min-h-[min(calc(100%-16px),30rem)]">
     <Dialog.DialogHeader>
-      <Dialog.DialogTitle>{$t`Add audio`}</Dialog.DialogTitle>
+      <Dialog.DialogTitle>{title || $t`Add audio`}</Dialog.DialogTitle>
     </Dialog.DialogHeader>
+    {@render children?.()}
     {#if !selectedFile}
       <AudioProvider {onFileSelected} {onRecordingComplete}/>
     {:else}
diff --git a/frontend/viewer/src/lib/components/field-editors/audio-input.svelte b/frontend/viewer/src/lib/components/field-editors/audio-input.svelte
index 1d77897317..39ec479387 100644
--- a/frontend/viewer/src/lib/components/field-editors/audio-input.svelte
+++ b/frontend/viewer/src/lib/components/field-editors/audio-input.svelte
@@ -50,8 +50,12 @@
   import {formatDuration, normalizeDuration} from '$lib/components/ui/format';
   import {t} from 'svelte-i18n-lingui';
   import {ReadFileResult} from '$lib/dotnet-types/generated-types/MiniLcm/Media/ReadFileResult';
-  import {useDialogsService} from '$lib/services/dialogs-service';
   import * as ResponsiveMenu from '$lib/components/responsive-menu';
+  import AudioDialog from '$lib/components/audio/AudioDialog.svelte';
+  import {tryUseFieldBody} from '$lib/components/editor/field/field-root.svelte';
+  import {useSubjectContext} from '$lib/entry-editor/object-editors/subject-context';
+  import LexiconEditorPrimitive from '$lib/entry-editor/object-editors/LexiconEditorPrimitive.svelte';
+  import OverrideFields from '$lib/OverrideFields.svelte';
 
   const handled = Symbol();
   let {
@@ -59,17 +63,19 @@
     audioId = $bindable(),
     onchange = () => {},
     readonly = false,
+    wsLabel = undefined,
   }: {
     loader?: (audioId: string) => Promise<{stream: ReadableStream, filename: string} | undefined | typeof handled>,
     audioId: string | undefined,
     onchange?: (audioId: string | undefined) => void;
     readonly?: boolean;
+    wsLabel?: string;
   } = $props();
 
   const projectContext = useProjectContext();
   const api = $derived(projectContext?.maybeApi);
   const supportsAudio = $derived(projectContext?.features.audio);
-  const dialogService = useDialogsService();
+  const fieldProps = tryUseFieldBody();
 
   async function defaultLoader(audioId: string) {
     if (!api) throw new Error('No api, unable to load audio');
@@ -217,12 +223,10 @@
   });
   let smallestUnit = $derived(totalLength.minutes > 0 ? 'seconds' as const : 'milliseconds' as const);
 
-  async function onGetAudioClick() {
-    const result = await dialogService.getAudio();
-    if (result) {
-      audioId = result;
-      onchange(audioId)
-    }
+  let audioDialogOpen = $state(false);
+  function onAudioDialogSubmit(newAudioId: string) {
+    audioId = newAudioId;
+    onchange(newAudioId);
   }
 
   function onRemoveAudio() {
@@ -264,11 +268,26 @@
     return audio.error.code === MediaError.MEDIA_ERR_NETWORK &&
       audio.error.message?.includes('demuxer seek failed');
   }
+  let dialogTitle = $derived(fieldProps?.label && wsLabel ? `${fieldProps.label}: ${wsLabel}` : fieldProps?.label || wsLabel);
+  let subject = useSubjectContext();
 </script>
 {#if supportsAudio}
+  {#if !readonly}
+    <AudioDialog title={dialogTitle} bind:open={audioDialogOpen} onSubmit={onAudioDialogSubmit}>
+      {#if subject.current}
+        <OverrideFields shownFields={[fieldProps.fieldId]}>
+          <LexiconEditorPrimitive object={subject.current}/>
+        </OverrideFields>
+      {/if}
+    </AudioDialog>
+  {/if}
   {#if !audioId}
     {#if !readonly}
-      <Button variant="secondary" icon="i-mdi-microphone-plus" size="sm" iconProps={{class: 'size-5'}} onclick={onGetAudioClick}>
+      <Button variant="secondary"
+              icon="i-mdi-microphone-plus"
+              size="sm"
+              iconProps={{class: 'size-5'}}
+              onclick={() => audioDialogOpen = true}>
         {$t`Add audio`}
       </Button>
     {:else}
@@ -322,7 +341,7 @@
           </ResponsiveMenu.Trigger>
           <ResponsiveMenu.Content>
             {#if !readonly}
-              <ResponsiveMenu.Item icon="i-mdi-microphone-plus" onSelect={onGetAudioClick}>
+              <ResponsiveMenu.Item icon="i-mdi-microphone-plus" onSelect={() => audioDialogOpen = true}>
                 {$t`Replace audio`}
               </ResponsiveMenu.Item>
               <ResponsiveMenu.Item icon="i-mdi-delete" onSelect={onRemoveAudio}>
diff --git a/frontend/viewer/src/lib/services/dialogs-service.ts b/frontend/viewer/src/lib/services/dialogs-service.ts
index f69897c12f..670c4f3420 100644
--- a/frontend/viewer/src/lib/services/dialogs-service.ts
+++ b/frontend/viewer/src/lib/services/dialogs-service.ts
@@ -23,10 +23,6 @@ export class DialogsService {
   set invokeNewEntryDialog(dialog: ((newEntry: Partial<IEntry>) => Promise<IEntry | undefined>)) {
     this.#invokeNewEntryDialog = dialog;
   }
-  #invokeAudioDialog: undefined | (() => Promise<string | undefined>);
-  set invokeAudioDialog(dialog: (() => Promise<string | undefined>)) {
-    this.#invokeAudioDialog = dialog;
-  }
 
   async createNewEntry(headword?: string): Promise<IEntry | undefined> {
     if (!this.#invokeNewEntryDialog) throw new Error('No new entry dialog');
@@ -43,8 +39,4 @@ export class DialogsService {
     if (!this.#invokeDeleteDialog) throw new Error('No delete dialog');
     return this.#invokeDeleteDialog(subject, subjectDescription, options);
   }
-  async getAudio(): Promise<string | undefined> {
-    if (!this.#invokeAudioDialog) throw new Error('No audio dialog');
-    return this.#invokeAudioDialog();
-  }
 }

From 00c66bdd9fc29a834ae8e4687622d2bd3a4d0208 Mon Sep 17 00:00:00 2001
From: Kevin Hahn <kevin_hahn@sil.org>
Date: Wed, 3 Sep 2025 14:02:17 +0700
Subject: [PATCH 07/12] pass the writing system abbreviation to the audio input
 for display in the audio dialog

---
 .../src/lib/components/field-editors/multi-ws-input.svelte       | 1 +
 .../src/lib/components/field-editors/rich-multi-ws-input.svelte  | 1 +
 2 files changed, 2 insertions(+)

diff --git a/frontend/viewer/src/lib/components/field-editors/multi-ws-input.svelte b/frontend/viewer/src/lib/components/field-editors/multi-ws-input.svelte
index c8dee3b26f..b88bb3a33c 100644
--- a/frontend/viewer/src/lib/components/field-editors/multi-ws-input.svelte
+++ b/frontend/viewer/src/lib/components/field-editors/multi-ws-input.svelte
@@ -52,6 +52,7 @@
       {:else}
         <AudioInput
           bind:audioId={value[ws.wsId]} onchange={() => onchange?.(ws.wsId, value[ws.wsId], value)}
+          wsLabel={ws.abbreviation}
           {readonly} />
       {/if}
     </div>
diff --git a/frontend/viewer/src/lib/components/field-editors/rich-multi-ws-input.svelte b/frontend/viewer/src/lib/components/field-editors/rich-multi-ws-input.svelte
index ffa5882ba9..51678e15d0 100644
--- a/frontend/viewer/src/lib/components/field-editors/rich-multi-ws-input.svelte
+++ b/frontend/viewer/src/lib/components/field-editors/rich-multi-ws-input.svelte
@@ -77,6 +77,7 @@
       {:else}
         <AudioInput
           bind:audioId={() => getAudioId(value[ws.wsId]), audioId => setAudioId(audioId, ws.wsId)}
+          wsLabel={ws.abbreviation}
           {readonly} />
       {/if}
     </div>

From ee539f1bd0aeae5b9884890ed667ed6333b5f7fb Mon Sep 17 00:00:00 2001
From: Kevin Hahn <kevin_hahn@sil.org>
Date: Wed, 3 Sep 2025 14:18:40 +0700
Subject: [PATCH 08/12] fix some lint errors, don't translate an exception
 message

---
 frontend/viewer/src/lib/components/audio/AudioDialog.svelte   | 2 +-
 .../src/lib/components/field-editors/audio-input.svelte       | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/viewer/src/lib/components/audio/AudioDialog.svelte b/frontend/viewer/src/lib/components/audio/AudioDialog.svelte
index 2d6ee4df77..9c1a749a0b 100644
--- a/frontend/viewer/src/lib/components/audio/AudioDialog.svelte
+++ b/frontend/viewer/src/lib/components/audio/AudioDialog.svelte
@@ -84,7 +84,7 @@
       case UploadFileResult.Error:
         throw new Error(response.errorMessage ?? $t`Unknown error`);
     }
-    if (!response.mediaUri) throw new Error($t`No mediaUri returned`);
+    if (!response.mediaUri) throw new Error(`No mediaUri returned`);
 
     return response.mediaUri;
   }
diff --git a/frontend/viewer/src/lib/components/field-editors/audio-input.svelte b/frontend/viewer/src/lib/components/field-editors/audio-input.svelte
index 39ec479387..218c88da16 100644
--- a/frontend/viewer/src/lib/components/field-editors/audio-input.svelte
+++ b/frontend/viewer/src/lib/components/field-editors/audio-input.svelte
@@ -274,8 +274,8 @@
 {#if supportsAudio}
   {#if !readonly}
     <AudioDialog title={dialogTitle} bind:open={audioDialogOpen} onSubmit={onAudioDialogSubmit}>
-      {#if subject.current}
-        <OverrideFields shownFields={[fieldProps.fieldId]}>
+      {#if subject?.current}
+        <OverrideFields shownFields={fieldProps?.fieldId ? [fieldProps.fieldId] : []}>
           <LexiconEditorPrimitive object={subject.current}/>
         </OverrideFields>
       {/if}

From 3104d0bd688f0a20c80e948620100860a3afaaa0 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Mon, 8 Sep 2025 11:39:57 +0200
Subject: [PATCH 09/12] Prevent waveform from overflowing container on short
 screens

---
 .../viewer/src/lib/components/audio/audio-editor.svelte   | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/frontend/viewer/src/lib/components/audio/audio-editor.svelte b/frontend/viewer/src/lib/components/audio/audio-editor.svelte
index f44c1e79a0..cff10c9d08 100644
--- a/frontend/viewer/src/lib/components/audio/audio-editor.svelte
+++ b/frontend/viewer/src/lib/components/audio/audio-editor.svelte
@@ -96,11 +96,9 @@
       <span class="col-span-4">{$t`${finalAudio.type}`}</span>
     </DevContent>
   </span>
-    <!-- contain-size prevents wavesurfer from freaking out inside a grid
-    contain-inline-size would improve the height reactivity of the waveform, but
-    results in the waveform sometimes change its height unexpectedly -->
-    <!-- pb-8 ensures the timeline is in the bounds of the container -->
-    <div class="w-full grow max-h-32 pb-3 contain-size border-y">
+    <!-- contain-inline-size prevents wavesurfer from freaking out inside a grid -->
+    <!-- pb ensures the waveform timeline is in the bounds of this container -->
+    <div class="w-full h-32 pb-3 contain-inline-size border-y">
       <Waveform audio={finalAudio} bind:playing bind:audioApi bind:duration showTimeline autoplay class="size-full"/>
     </div>
     <div class="flex gap-2">

From 814973bcb9588351180ef541d46ccb1cb0c4161f Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Mon, 8 Sep 2025 15:28:42 +0200
Subject: [PATCH 10/12] Add editor grid and root to editor primitive

---
 .../LexiconEditorPrimitive.svelte             | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/frontend/viewer/src/lib/entry-editor/object-editors/LexiconEditorPrimitive.svelte b/frontend/viewer/src/lib/entry-editor/object-editors/LexiconEditorPrimitive.svelte
index 810fe67ff4..5e62f97101 100644
--- a/frontend/viewer/src/lib/entry-editor/object-editors/LexiconEditorPrimitive.svelte
+++ b/frontend/viewer/src/lib/entry-editor/object-editors/LexiconEditorPrimitive.svelte
@@ -4,6 +4,7 @@
   import EntryEditorPrimitive from '$lib/entry-editor/object-editors/EntryEditorPrimitive.svelte';
   import SenseEditorPrimitive from '$lib/entry-editor/object-editors/SenseEditorPrimitive.svelte';
   import ExampleEditorPrimitive from '$lib/entry-editor/object-editors/ExampleEditorPrimitive.svelte';
+  import * as Editor from '$lib/components/editor';
 
   let {
     object
@@ -11,10 +12,15 @@
     object: IEntry | ISense | IExampleSentence | undefined
   } = $props();
 </script>
-{#if isEntry(object)}
-  <EntryEditorPrimitive entry={object} readonly />
-{:else if isSense(object)}
-  <SenseEditorPrimitive sense={object} readonly />
-{:else if isExample(object)}
-  <ExampleEditorPrimitive example={object} readonly />
-{/if}
+
+<Editor.Root>
+  <Editor.Grid>
+    {#if isEntry(object)}
+      <EntryEditorPrimitive entry={object} readonly />
+    {:else if isSense(object)}
+      <SenseEditorPrimitive sense={object} readonly />
+    {:else if isExample(object)}
+      <ExampleEditorPrimitive example={object} readonly />
+    {/if}
+  </Editor.Grid>
+</Editor.Root>

From f233f5e8b107d6ee868d552536a75a2e79086700 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Mon, 8 Sep 2025 15:39:38 +0200
Subject: [PATCH 11/12] Put autofocus on record button rather than editor field

---
 frontend/viewer/src/lib/components/audio/AudioDialog.svelte    | 2 +-
 frontend/viewer/src/lib/components/audio/audio-provider.svelte | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/viewer/src/lib/components/audio/AudioDialog.svelte b/frontend/viewer/src/lib/components/audio/AudioDialog.svelte
index 9c1a749a0b..9e85551859 100644
--- a/frontend/viewer/src/lib/components/audio/AudioDialog.svelte
+++ b/frontend/viewer/src/lib/components/audio/AudioDialog.svelte
@@ -131,7 +131,7 @@
 
 
 <Dialog.Root bind:open>
-  <Dialog.DialogContent class="grid-rows-[auto_1fr_auto] sm:min-h-[min(calc(100%-16px),30rem)]">
+  <Dialog.DialogContent onOpenAutoFocus={(e) => e.preventDefault()} class="grid-rows-[auto_1fr_auto] sm:min-h-[min(calc(100%-16px),30rem)]">
     <Dialog.DialogHeader>
       <Dialog.DialogTitle>{title || $t`Add audio`}</Dialog.DialogTitle>
     </Dialog.DialogHeader>
diff --git a/frontend/viewer/src/lib/components/audio/audio-provider.svelte b/frontend/viewer/src/lib/components/audio/audio-provider.svelte
index a3b1ad74f3..8c1a278672 100644
--- a/frontend/viewer/src/lib/components/audio/audio-provider.svelte
+++ b/frontend/viewer/src/lib/components/audio/audio-provider.svelte
@@ -85,7 +85,7 @@
             {$t`Hold to record or\npress and release to start recording.`}
           </span>
         {/if}
-        <Recorder.Trigger bind:walkieTalkieMode />
+        <Recorder.Trigger autofocus bind:walkieTalkieMode />
       </div>
     </Recorder.Root>
   </div>

From 0fd4ad1f21901230fa5d6e9dc068d93460d302b2 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Mon, 8 Sep 2025 15:40:03 +0200
Subject: [PATCH 12/12] Fix up audio dialog grid

---
 .../lib/components/audio/AudioDialog.svelte   |  9 ++++++--
 .../components/audio/audio-provider.svelte    | 21 +++++++++++--------
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/frontend/viewer/src/lib/components/audio/AudioDialog.svelte b/frontend/viewer/src/lib/components/audio/AudioDialog.svelte
index 9e85551859..8f5f84e0ec 100644
--- a/frontend/viewer/src/lib/components/audio/AudioDialog.svelte
+++ b/frontend/viewer/src/lib/components/audio/AudioDialog.svelte
@@ -10,6 +10,7 @@
   import {UploadFileResult} from '$lib/dotnet-types/generated-types/MiniLcm/Media/UploadFileResult';
   import {AppNotification} from '$lib/notifications/notifications';
   import type {Snippet} from 'svelte';
+  import {cn} from '$lib/utils';
 
   let {
     open = $bindable(false),
@@ -131,11 +132,15 @@
 
 
 <Dialog.Root bind:open>
-  <Dialog.DialogContent onOpenAutoFocus={(e) => e.preventDefault()} class="grid-rows-[auto_1fr_auto] sm:min-h-[min(calc(100%-16px),30rem)]">
+  <Dialog.DialogContent onOpenAutoFocus={(e) => e.preventDefault()} class={cn('sm:min-h-[min(calc(100%-16px),30rem)]',
+    children ? 'grid-rows-[auto_auto_1fr]' : 'grid-rows-[auto_1fr]')}>
     <Dialog.DialogHeader>
       <Dialog.DialogTitle>{title || $t`Add audio`}</Dialog.DialogTitle>
     </Dialog.DialogHeader>
-    {@render children?.()}
+    {#if children}
+      <!-- Ensure children only occupy 1 grid row -->
+      <div>{@render children?.()}</div>
+    {/if}
     {#if !selectedFile}
       <AudioProvider {onFileSelected} {onRecordingComplete}/>
     {:else}
diff --git a/frontend/viewer/src/lib/components/audio/audio-provider.svelte b/frontend/viewer/src/lib/components/audio/audio-provider.svelte
index 8c1a278672..3a0c1e9567 100644
--- a/frontend/viewer/src/lib/components/audio/audio-provider.svelte
+++ b/frontend/viewer/src/lib/components/audio/audio-provider.svelte
@@ -89,13 +89,16 @@
       </div>
     </Recorder.Root>
   </div>
-</div>
 
-<!-- Hidden file input -->
-<input
-  bind:this={fileInputElement}
-  type="file"
-  accept="audio/*"
-  onchange={handleFileSelection}
-  class="hidden"
-/>
+  <!--
+  Hidden file input.
+  Should not be at root level as it might trigger a margin/gap.
+  -->
+  <input
+    bind:this={fileInputElement}
+    type="file"
+    accept="audio/*"
+    onchange={handleFileSelection}
+    class="hidden"
+  />
+</div>