From 23a80cb700b9f7855c3da59cdcb4f749eebd732a Mon Sep 17 00:00:00 2001
From: Robin Munn <robin_munn@sil.org>
Date: Thu, 25 Jun 2026 10:39:28 +0700
Subject: [PATCH 01/32] Add Pictures field to sense editor with image carousel

Display a sense's pictures in the FwLite viewer, below Semantic Domains.

- Register a new `pictures` sense field (entity-config + FW Lite view) so it
  shows for every sense.
- PictureImage loads each picture via MiniLcmJsInvokable.GetFileStream
  (MediaUri -> stream -> blob URL), shows its caption (best analysis
  alternative), and handles not-found/offline/error states. Object URLs are
  revoked on teardown. No try/catch around async, per viewer conventions.
- PictureCarousel wraps the images in an embla carousel (embla-carousel-svelte)
  that auto-advances every 10s when there is more than one picture, with
  prev/next + dot navigation. Single-picture senses just show the image.
- PicturesEditor shows the carousel when pictures exist, otherwise a disabled
  "+ Picture" button styled like "+ Component" (adding pictures is not yet
  possible: MiniLcmJsInvokable exposes no create-picture API to the frontend).
- Export IPicture from the dotnet-types barrel (was omitted when generated).
- Demo: give the first "nyumba" sense two pictures and serve them as inline
  SVG blobs from the demo getFileStream, so the carousel is demonstrable in the
  in-browser demo project.
- Add a viewer Playwright test covering the populated (image + caption) and
  empty (disabled add button) states.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/viewer/src/lib/dotnet-types/index.ts |   1 +
 .../field-editors/PictureCarousel.svelte      | 104 ++++++++++++++++++
 .../field-editors/PictureImage.svelte         |  84 ++++++++++++++
 .../field-editors/PicturesEditor.svelte       |  27 +++++
 .../SenseEditorPrimitive.svelte               |   8 ++
 .../viewer/src/lib/views/entity-config.ts     |   4 +
 frontend/viewer/src/lib/views/view-data.ts    |   1 +
 .../src/project/demo/demo-entry-data.ts       |  45 +++++++-
 .../src/project/demo/in-memory-demo-api.ts    |  16 ++-
 frontend/viewer/tests/sense-pictures.test.ts  |  45 ++++++++
 10 files changed, 331 insertions(+), 4 deletions(-)
 create mode 100644 frontend/viewer/src/lib/entry-editor/field-editors/PictureCarousel.svelte
 create mode 100644 frontend/viewer/src/lib/entry-editor/field-editors/PictureImage.svelte
 create mode 100644 frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte
 create mode 100644 frontend/viewer/tests/sense-pictures.test.ts

diff --git a/frontend/viewer/src/lib/dotnet-types/index.ts b/frontend/viewer/src/lib/dotnet-types/index.ts
index 811b6979d1..1e5c6cfbe3 100644
--- a/frontend/viewer/src/lib/dotnet-types/index.ts
+++ b/frontend/viewer/src/lib/dotnet-types/index.ts
@@ -16,6 +16,7 @@ export * from './generated-types/MiniLcm/Models/ITranslation';
 export * from './generated-types/MiniLcm/Models/IMorphType';
 export * from './generated-types/MiniLcm/Models/IObjectWithId';
 export * from './generated-types/MiniLcm/Models/IPartOfSpeech';
+export * from './generated-types/MiniLcm/Models/IPicture';
 export * from './generated-types/MiniLcm/Models/IProjectIdentifier';
 export * from './generated-types/MiniLcm/Models/IPublication';
 export * from './generated-types/MiniLcm/Models/IRichSpan';
diff --git a/frontend/viewer/src/lib/entry-editor/field-editors/PictureCarousel.svelte b/frontend/viewer/src/lib/entry-editor/field-editors/PictureCarousel.svelte
new file mode 100644
index 0000000000..de1f816529
--- /dev/null
+++ b/frontend/viewer/src/lib/entry-editor/field-editors/PictureCarousel.svelte
@@ -0,0 +1,104 @@
+<script lang="ts">
+  import emblaCarouselSvelte from 'embla-carousel-svelte';
+  import type {IPicture} from '$lib/dotnet-types';
+  import PictureImage from './PictureImage.svelte';
+  import {Button} from '$lib/components/ui/button';
+  import {cn} from '$lib/utils';
+  import {t} from 'svelte-i18n-lingui';
+
+  /** Each picture is shown for 10 seconds before the carousel advances. */
+  const AUTOPLAY_DELAY_MS = 10_000;
+
+  // Minimal structural type for the bits of the Embla api we use. Declared locally rather
+  // than imported from `embla-carousel` (a transitive dep that pnpm does not hoist), so the
+  // only carousel import is the directly-declared `embla-carousel-svelte` action.
+  type EmblaApi = {
+    scrollNext: () => void;
+    scrollPrev: () => void;
+    scrollTo: (index: number) => void;
+    selectedScrollSnap: () => number;
+    on: (event: string, callback: () => void) => void;
+    off: (event: string, callback: () => void) => void;
+  };
+
+  type Props = {
+    pictures: IPicture[];
+  };
+  const {pictures}: Props = $props();
+
+  let emblaApi = $state<EmblaApi>();
+  let selectedIndex = $state(0);
+
+  const hasMultiple = $derived(pictures.length > 1);
+
+  // embla-carousel-svelte dispatches an `emblaInit` CustomEvent carrying the api in `detail`.
+  // It fires synchronously while the `use:` action sets up (during mount), which is *before*
+  // $effects run — so the listener must be bound in the template (the `on:` directive form,
+  // as documented by embla-carousel-svelte) to avoid missing it.
+  function onEmblaInit(event: Event) {
+    emblaApi = (event as CustomEvent<EmblaApi>).detail;
+  }
+
+  // Keep the active-dot indicator in sync with the carousel.
+  $effect(() => {
+    const api = emblaApi;
+    if (!api) return;
+    const onSelect = () => (selectedIndex = api.selectedScrollSnap());
+    onSelect();
+    api.on('select', onSelect);
+    api.on('reInit', onSelect);
+    return () => {
+      api.off('select', onSelect);
+      api.off('reInit', onSelect);
+    };
+  });
+
+  // Auto-advance every 10 seconds when there is more than one picture.
+  $effect(() => {
+    const api = emblaApi;
+    if (!api || !hasMultiple) return;
+    const interval = setInterval(() => api.scrollNext(), AUTOPLAY_DELAY_MS);
+    return () => clearInterval(interval);
+  });
+</script>
+
+<div class="flex flex-col gap-2">
+  <div class="overflow-hidden" use:emblaCarouselSvelte={{options: {loop: true}}} on:emblaInit={onEmblaInit}>
+    <div class="flex">
+      {#each pictures as picture (picture.id)}
+        <div class="min-w-0 flex-[0_0_100%] px-2">
+          <PictureImage {picture} />
+        </div>
+      {/each}
+    </div>
+  </div>
+
+  {#if hasMultiple}
+    <div class="flex items-center justify-center gap-2">
+      <Button
+        variant="ghost"
+        size="icon-xs"
+        icon="i-mdi-chevron-left"
+        aria-label={$t`Previous picture`}
+        onclick={() => emblaApi?.scrollPrev()}
+      />
+      <div class="flex items-center gap-1.5">
+        {#each pictures as picture, i (picture.id)}
+          <button
+            type="button"
+            aria-label={$t`Go to picture ${i + 1}`}
+            class={cn('size-2 rounded-full transition-colors', i === selectedIndex ? 'bg-primary' : 'bg-muted-foreground/40')}
+            onclick={() => emblaApi?.scrollTo(i)}
+          ></button>
+        {/each}
+      </div>
+      <Button
+        variant="ghost"
+        size="icon-xs"
+        icon="i-mdi-chevron-right"
+        aria-label={$t`Next picture`}
+        onclick={() => emblaApi?.scrollNext()}
+      />
+    </div>
+  {/if}
+</div>
diff --git a/frontend/viewer/src/lib/entry-editor/field-editors/PictureImage.svelte b/frontend/viewer/src/lib/entry-editor/field-editors/PictureImage.svelte
new file mode 100644
index 0000000000..79831ec3f5
--- /dev/null
+++ b/frontend/viewer/src/lib/entry-editor/field-editors/PictureImage.svelte
@@ -0,0 +1,84 @@
+<script lang="ts">
+  import type {IPicture} from '$lib/dotnet-types';
+  import {ReadFileResult} from '$lib/dotnet-types/generated-types/MiniLcm/Media/ReadFileResult';
+  import {useProjectContext} from '$project/project-context.svelte';
+  import {useWritingSystemService} from '$project/data';
+  import {t} from 'svelte-i18n-lingui';
+
+  type Props = {
+    picture: IPicture;
+  };
+  const {picture}: Props = $props();
+
+  const projectContext = useProjectContext();
+  const api = $derived(projectContext?.maybeApi);
+  const writingSystemService = useWritingSystemService();
+
+  const caption = $derived(writingSystemService.first(picture.caption, writingSystemService.analysis) ?? '');
+
+  type LoadState =
+    | {status: 'loading'}
+    | {status: 'loaded'; url: string}
+    | {status: 'error'; message: string};
+
+  // getFileStream signals failures via the `result` enum (not exceptions), so we
+  // branch on it rather than wrapping in try/catch (the global handler covers throws).
+  async function loadImage(mediaUri: string): Promise<Exclude<LoadState, {status: 'loading'}>> {
+    if (!api) return {status: 'error', message: $t`Unable to load image`};
+    const file = await api.getFileStream(mediaUri);
+    if (!file.stream) {
+      switch (file.result) {
+        case ReadFileResult.NotFound:
+          return {status: 'error', message: $t`Image not found`};
+        case ReadFileResult.Offline:
+          return {status: 'error', message: $t`Offline, unable to download image`};
+        default:
+          return {status: 'error', message: file.errorMessage ?? $t`Unable to load image`};
+      }
+    }
+    const blob = await new Response(await file.stream.stream()).blob();
+    return {status: 'loaded', url: URL.createObjectURL(blob)};
+  }
+
+  let state = $state<LoadState>({status: 'loading'});
+
+  $effect(() => {
+    const mediaUri = picture.mediaUri;
+    state = {status: 'loading'};
+    let revoked = false;
+    let createdUrl: string | undefined;
+    void loadImage(mediaUri).then((result) => {
+      if (revoked) {
+        // Component/effect was torn down before the image finished loading.
+        if (result.status === 'loaded') URL.revokeObjectURL(result.url);
+        return;
+      }
+      if (result.status === 'loaded') createdUrl = result.url;
+      state = result;
+    });
+    return () => {
+      revoked = true;
+      if (createdUrl) URL.revokeObjectURL(createdUrl);
+    };
+  });
+</script>
+
+<figure class="flex flex-col items-center gap-1">
+  {#if state.status === 'loaded'}
+    <img src={state.url} alt={caption || $t`Picture`} class="max-h-64 max-w-full rounded-md object-contain" />
+  {:else if state.status === 'loading'}
+    <div class="bg-muted text-muted-foreground flex h-32 w-full items-center justify-center rounded-md">
+      <span class="i-mdi-loading size-6 animate-spin"></span>
+    </div>
+  {:else}
+    <div
+      class="bg-muted text-muted-foreground flex h-32 w-full flex-col items-center justify-center gap-1 rounded-md"
+    >
+      <span class="i-mdi-image-broken-variant size-6"></span>
+      <span class="text-sm">{state.message}</span>
+    </div>
+  {/if}
+  {#if caption}
+    <figcaption class="text-muted-foreground text-center text-sm">{caption}</figcaption>
+  {/if}
+</figure>
diff --git a/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte b/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte
new file mode 100644
index 0000000000..86e79fd67e
--- /dev/null
+++ b/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type {IPicture} from '$lib/dotnet-types';
+  import {Button} from '$lib/components/ui/button';
+  import PictureCarousel from './PictureCarousel.svelte';
+  import {t} from 'svelte-i18n-lingui';
+
+  type Props = {
+    value: IPicture[];
+    readonly?: boolean;
+  };
+  const {value, readonly = false}: Props = $props();
+</script>
+
+{#if value.length > 0}
+  <PictureCarousel pictures={value} />
+{:else if !readonly}
+  <!-- TODO: wire this up to actually add a picture once a create-picture API is exposed
+       to the frontend. MiniLcmJsInvokable currently has no create/update picture method,
+       so the button mirrors "+ Component" but is disabled for now. -->
+  <Button icon="i-mdi-plus" size="xs" disabled>
+    {$t`Picture`}
+  </Button>
+{:else}
+  <div class="text-muted-foreground p-1">
+    {$t`No pictures`}
+  </div>
+{/if}
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 10e1fdc0b8..328b2da15e 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 type {Snippet} from 'svelte';
   import {entityConfig, type SenseFieldId} from '../../views/entity-config';
   import {tvt} from '$lib/views/view-text';
+  import PicturesEditor from '../field-editors/PicturesEditor.svelte';
 
   interface Props extends Omit<EditorSubGridProps, 'onchange'> {
     sense: ISense;
@@ -97,4 +98,11 @@
       {@render semanticDomainsDescription?.()}
     </Editor.Field.Body>
   </Editor.Field.Root>
+
+  <Editor.Field.Root fieldId="pictures" class={cn(fields.pictures?.show || 'hidden')}>
+    <Editor.Field.Title name={$tvt(entityConfig.sense.pictures.label)} helpId={entityConfig.sense.pictures.helpId} />
+    <Editor.Field.Body>
+      <PicturesEditor value={sense.pictures} {readonly} />
+    </Editor.Field.Body>
+  </Editor.Field.Root>
 </Editor.SubGrid>
diff --git a/frontend/viewer/src/lib/views/entity-config.ts b/frontend/viewer/src/lib/views/entity-config.ts
index 311dfc8635..16254a14b1 100644
--- a/frontend/viewer/src/lib/views/entity-config.ts
+++ b/frontend/viewer/src/lib/views/entity-config.ts
@@ -65,6 +65,10 @@ export const entityConfig = {
       label: msg`Semantic domains`,
       helpId: 'User_Interface/Field_Descriptions/Lexicon/Lexicon_Edit_fields/Sense_level_fields/semantic_domains_field.htm',
     },
+    pictures: {
+      label: msg`Pictures`,
+      helpId: 'User_Interface/Field_Descriptions/Lexicon/Lexicon_Edit_fields/Sense_level_fields/Pictures_field.htm',
+    },
   },
   example: {
     $label: msg`Example`,
diff --git a/frontend/viewer/src/lib/views/view-data.ts b/frontend/viewer/src/lib/views/view-data.ts
index 094571043f..12be458a82 100644
--- a/frontend/viewer/src/lib/views/view-data.ts
+++ b/frontend/viewer/src/lib/views/view-data.ts
@@ -61,6 +61,7 @@ export const FW_LITE_VIEW: RootView = {
       definition: {show: true, order: 2},
       partOfSpeechId: {show: true, order: 3},
       semanticDomains: {show: true, order: 4},
+      pictures: {show: true, order: 5},
     },
     example: {
       sentence: {show: true, order: 1},
diff --git a/frontend/viewer/src/project/demo/demo-entry-data.ts b/frontend/viewer/src/project/demo/demo-entry-data.ts
index 787da7cb05..65d4b9ddeb 100644
--- a/frontend/viewer/src/project/demo/demo-entry-data.ts
+++ b/frontend/viewer/src/project/demo/demo-entry-data.ts
@@ -2,6 +2,36 @@ import {type IEntry, type IMorphType, type IWritingSystems, MorphTypeKind, Writi
 
 export const projectName = 'Sena 3';
 
+/** Media URIs for the demo pictures, mapped to inline SVG markup in {@link demoPictureSvgs}. */
+export const demoPictureMediaUris = {
+  house1: 'demo://picture/house-1',
+  house2: 'demo://picture/house-2',
+} as const;
+
+/**
+ * Inline SVG bodies served by the demo api's getFileStream, so the picture carousel has
+ * something to display in the in-browser demo project (real projects load actual media files).
+ */
+export const demoPictureSvgs: Record<string, string> = {
+  [demoPictureMediaUris.house1]:
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 200" width="320" height="200">' +
+    '<rect width="320" height="200" fill="#cdeccd"/>' +
+    '<polygon points="160,40 250,120 70,120" fill="#8b5a2b"/>' +
+    '<rect x="100" y="120" width="120" height="60" fill="#d9a066"/>' +
+    '<rect x="140" y="142" width="40" height="38" fill="#5b3a1a"/>' +
+    '<text x="160" y="196" text-anchor="middle" font-family="sans-serif" font-size="13" fill="#333">Demo picture 1</text>' +
+    '</svg>',
+  [demoPictureMediaUris.house2]:
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 200" width="320" height="200">' +
+    '<rect width="320" height="200" fill="#cdddec"/>' +
+    '<rect x="90" y="70" width="140" height="110" fill="#9aa7b0"/>' +
+    '<rect x="110" y="90" width="40" height="40" fill="#dfe8ef"/>' +
+    '<rect x="170" y="90" width="40" height="40" fill="#dfe8ef"/>' +
+    '<rect x="140" y="140" width="40" height="40" fill="#46505a"/>' +
+    '<text x="160" y="196" text-anchor="middle" font-family="sans-serif" font-size="13" fill="#333">Demo picture 2</text>' +
+    '</svg>',
+};
+
 export const partsOfSpeech = [
   {id: '86ff66f6-0774-407a-a0dc-3eeaf873daf7', name: {en: 'Verb'}, predefined: true},
   {id: 'a8e41fd3-e343-4c7c-aa05-01ea3dd5cfb5', name: {en: 'Noun'}, predefined: true},
@@ -153,7 +183,20 @@ export const _entries: IEntry[] = [
         'partOfSpeech': partsOfSpeech[1], // noun
         'partOfSpeechId': partsOfSpeech[1].id,
         'semanticDomains': [],
-        'pictures': [],
+        'pictures': [
+          {
+            'id': 'ce4a3b1e-6d2f-4f1a-8c0d-1f2e3a4b5c6d',
+            'order': 1,
+            'mediaUri': demoPictureMediaUris.house1,
+            'caption': {'en': {spans: [{text: 'A traditional house', ws: 'en'}]}, 'pt': {spans: [{text: 'Uma casa tradicional', ws: 'pt'}]}},
+          },
+          {
+            'id': 'a1b2c3d4-7e8f-4a0b-9c1d-2e3f4a5b6c7d',
+            'order': 2,
+            'mediaUri': demoPictureMediaUris.house2,
+            'caption': {'en': {spans: [{text: 'A modern house', ws: 'en'}]}, 'pt': {spans: [{text: 'Uma casa moderna', ws: 'pt'}]}},
+          },
+        ],
         'exampleSentences': [
           {
             'id': 'ex-001',
diff --git a/frontend/viewer/src/project/demo/in-memory-demo-api.ts b/frontend/viewer/src/project/demo/in-memory-demo-api.ts
index 68f85cce75..bbaa214cb0 100644
--- a/frontend/viewer/src/project/demo/in-memory-demo-api.ts
+++ b/frontend/viewer/src/project/demo/in-memory-demo-api.ts
@@ -26,7 +26,7 @@ import {
   ViewBase,
   MorphTypeKind,
 } from '$lib/dotnet-types';
-import {entries, morphTypes, partsOfSpeech, projectName, writingSystems} from './demo-entry-data';
+import {demoPictureSvgs, entries, morphTypes, partsOfSpeech, projectName, writingSystems} from './demo-entry-data';
 
 import {WritingSystemService} from '../data/writing-system-service.svelte';
 import {FwLitePlatform} from '$lib/dotnet-types/generated-types/FwLiteShared/FwLitePlatform';
@@ -520,8 +520,18 @@ export class InMemoryDemoApi implements IMiniLcmJsInvokable {
     throw new Error('Method not implemented.');
   }
 
-  getFileStream(_mediaUri: string): Promise<IReadFileResponseJs> {
-    return Promise.resolve({result: ReadFileResult.NotSupported});
+  getFileStream(mediaUri: string): Promise<IReadFileResponseJs> {
+    const svg = demoPictureSvgs[mediaUri];
+    if (!svg) return Promise.resolve({result: ReadFileResult.NotFound});
+    const blob = new Blob([svg], {type: 'image/svg+xml'});
+    return Promise.resolve({
+      result: ReadFileResult.Success,
+      fileName: 'demo-picture.svg',
+      stream: {
+        stream: () => Promise.resolve(blob.stream()),
+        arrayBuffer: () => blob.arrayBuffer(),
+      },
+    });
   }
 
   saveFile(_streamReference: Blob | ArrayBuffer | Uint8Array, _metadata: ILcmFileMetadata): Promise<IUploadFileResponse> {
diff --git a/frontend/viewer/tests/sense-pictures.test.ts b/frontend/viewer/tests/sense-pictures.test.ts
new file mode 100644
index 0000000000..c4edbd633f
--- /dev/null
+++ b/frontend/viewer/tests/sense-pictures.test.ts
@@ -0,0 +1,45 @@
+import {expect, test} from '@playwright/test';
+import {BrowsePage} from './browse-page';
+
+/**
+ * Verifies the Sense "Pictures" field:
+ * - a sense with pictures renders the image (loaded via getFileStream into a blob url) + caption
+ * - a sense without pictures shows the disabled "+ Picture" add button
+ *
+ * The demo "nyumba" entry's first sense has two demo pictures; its other senses have none.
+ */
+test.describe('Sense pictures', () => {
+  test('displays a picture (and its caption) for a sense that has pictures', async ({page}) => {
+    const browsePage = new BrowsePage(page);
+    await browsePage.goto();
+
+    await browsePage.selectEntryByFilter('nyumba');
+
+    const picturesField = page.locator('[style*="grid-area: pictures"]').first();
+    await expect(picturesField).toBeVisible({timeout: 5000});
+
+    const image = picturesField.locator('img').first();
+    await expect(image).toBeVisible({timeout: 5000});
+    // A blob: src proves the full pipeline ran: getFileStream returned a stream that we
+    // turned into a Blob and an object url. A broken/missing image would not have this.
+    await expect(image).toHaveAttribute('src', /^blob:/);
+
+    // Caption is rendered from the best analysis alternative.
+    await expect(picturesField.getByText(/A traditional house|Uma casa tradicional/)).toBeVisible();
+  });
+
+  test('shows a disabled "+ Picture" button for a sense with no pictures', async ({page}) => {
+    const browsePage = new BrowsePage(page);
+    await browsePage.goto();
+
+    await browsePage.selectEntryByFilter('nyumba');
+
+    // First sense has pictures; later senses do not, so their Pictures field shows the add button.
+    const emptyPicturesField = page.locator('[style*="grid-area: pictures"]').nth(1);
+    await expect(emptyPicturesField).toBeVisible({timeout: 5000});
+
+    const addButton = emptyPicturesField.getByRole('button', {name: 'Picture'});
+    await expect(addButton).toBeVisible();
+    await expect(addButton).toBeDisabled();
+  });
+});

From 15214f1e86a392a003ee76d70a83c10182ec6b80 Mon Sep 17 00:00:00 2001
From: Robin Munn <robin_munn@sil.org>
Date: Thu, 25 Jun 2026 10:59:17 +0700
Subject: [PATCH 02/32] Fix picture carousel event/typing and extract i18n
 strings

Follow-up after running svelte-check, eslint and the i18n extractor:

- PictureCarousel: use the `onemblaInit` event attribute (Svelte 5 forbids
  mixing the legacy `on:` directive with `on*` handlers, and the embla
  package types this attribute) and pass the required `plugins: []` to the
  action. Convert the dot-sync arrow to a function declaration (func-style).
- Extract the new picture UI strings into the locale catalogs and add
  translator-context comments in en.po per the i18n context guide.

svelte-check: 0 errors / 0 warnings. eslint: clean.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../field-editors/PictureCarousel.svelte      | 12 ++---
 frontend/viewer/src/locales/en.po             | 48 +++++++++++++++++++
 frontend/viewer/src/locales/es.po             | 39 +++++++++++++++
 frontend/viewer/src/locales/fr.po             | 39 +++++++++++++++
 frontend/viewer/src/locales/id.po             | 39 +++++++++++++++
 frontend/viewer/src/locales/ko.po             | 39 +++++++++++++++
 frontend/viewer/src/locales/ms.po             | 39 +++++++++++++++
 frontend/viewer/src/locales/sw.po             | 39 +++++++++++++++
 frontend/viewer/src/locales/vi.po             | 39 +++++++++++++++
 9 files changed, 327 insertions(+), 6 deletions(-)

diff --git a/frontend/viewer/src/lib/entry-editor/field-editors/PictureCarousel.svelte b/frontend/viewer/src/lib/entry-editor/field-editors/PictureCarousel.svelte
index de1f816529..a87c6c7e49 100644
--- a/frontend/viewer/src/lib/entry-editor/field-editors/PictureCarousel.svelte
+++ b/frontend/viewer/src/lib/entry-editor/field-editors/PictureCarousel.svelte
@@ -31,10 +31,8 @@
 
   const hasMultiple = $derived(pictures.length > 1);
 
-  // embla-carousel-svelte dispatches an `emblaInit` CustomEvent carrying the api in `detail`.
-  // It fires synchronously while the `use:` action sets up (during mount), which is *before*
-  // $effects run — so the listener must be bound in the template (the `on:` directive form,
-  // as documented by embla-carousel-svelte) to avoid missing it.
+  // embla-carousel-svelte dispatches an `emblaInit` CustomEvent (typed by the package as the
+  // `onemblaInit` attribute) carrying the api in `detail` once the carousel has initialised.
   function onEmblaInit(event: Event) {
     emblaApi = (event as CustomEvent<EmblaApi>).detail;
   }
@@ -43,7 +41,9 @@
   $effect(() => {
     const api = emblaApi;
     if (!api) return;
-    const onSelect = () => (selectedIndex = api.selectedScrollSnap());
+    function onSelect() {
+      selectedIndex = api!.selectedScrollSnap();
+    }
     onSelect();
     api.on('select', onSelect);
     api.on('reInit', onSelect);
@@ -63,7 +63,7 @@
 </script>
 
 <div class="flex flex-col gap-2">
-  <div class="overflow-hidden" use:emblaCarouselSvelte={{options: {loop: true}}} on:emblaInit={onEmblaInit}>
+  <div class="overflow-hidden" use:emblaCarouselSvelte={{options: {loop: true}, plugins: []}} onemblaInit={onEmblaInit}>
     <div class="flex">
       {#each pictures as picture (picture.id)}
         <div class="min-w-0 flex-[0_0_100%] px-2">
diff --git a/frontend/viewer/src/locales/en.po b/frontend/viewer/src/locales/en.po
index c31ad2ee21..5406c7c86b 100644
--- a/frontend/viewer/src/locales/en.po
+++ b/frontend/viewer/src/locales/en.po
@@ -985,6 +985,12 @@ msgstr "Gloss"
 msgid "Go to {0}"
 msgstr "Go to {0}"
 
+#. Aria-label on a carousel dot button below the picture; navigates to a specific picture
+#. {0} = 1-based picture number (e.g., "Go to picture 2")
+#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
+msgid "Go to picture {0}"
+msgstr "Go to picture {0}"
+
 #. Filter option label
 #. Relevant view: Classic
 #. Lite view equivalent: "Part of speech"
@@ -1034,6 +1040,11 @@ msgstr "I don't see my project"
 msgid "I understand that this can't be undone"
 msgstr "I understand that this can't be undone"
 
+#. Error displayed in place of a picture when the media file is missing from local storage
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+msgid "Image not found"
+msgstr "Image not found"
+
 #. Dev-mode only icon button tooltip on a Classic FieldWorks project list item. Imports the fwdata project into FwLite.
 #: src/home/HomeView.svelte
 msgid "Import"
@@ -1315,6 +1326,11 @@ msgstr "Newest first"
 msgid "Next"
 msgstr "Next"
 
+#. Aria-label on the right-arrow button in the picture carousel; advances to the next image
+#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
+msgid "Next picture"
+msgstr "Next picture"
+
 #. Empty state when activity list filters exclude every commit.
 #: src/lib/activity/ActivityView.svelte
 msgid "No activity matches these filters"
@@ -1369,6 +1385,11 @@ msgstr "No items found"
 msgid "No new data"
 msgstr "No new data"
 
+#. Empty state shown read-only in the Pictures field when a sense has no pictures
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "No pictures"
+msgstr "No pictures"
+
 #. Sync status label shown in the sync panel when no server is associated with this project.
 #: src/project/sync/SyncStatusPrimitive.svelte
 msgid "No server"
@@ -1448,6 +1469,11 @@ msgstr "Offline"
 msgid "Offline, unable to download"
 msgstr "Offline, unable to download"
 
+#. Error when offline and trying to download image
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+msgid "Offline, unable to download image"
+msgstr "Offline, unable to download image"
+
 #. Sort option in activity view — earliest commit first.
 #: src/lib/activity/ActivityFilter.svelte
 msgid "Oldest first"
@@ -1540,6 +1566,17 @@ msgstr "Pending"
 msgid "Pick a Part of Speech"
 msgstr "Pick a Part of Speech"
 
+#. Two uses: (1) alt text for a picture image when no caption is available; (2) label on a currently-disabled "+ Picture" add button in the sense editor
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Picture"
+msgstr "Picture"
+
+#. Sense-level field label in the entry editor for the FieldWorks Pictures field (attached images)
+#: src/lib/views/entity-config.ts
+msgid "Pictures"
+msgstr "Pictures"
+
 #. View option
 #. Pin the dictionary preview panel above the entry editor form
 #. Allows quick reference while editing without scrolling
@@ -1564,6 +1601,11 @@ msgstr "Preview"
 msgid "Preview not available"
 msgstr "Preview not available"
 
+#. Aria-label on the left-arrow button in the picture carousel; goes back to the previous image
+#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
+msgid "Previous picture"
+msgstr "Previous picture"
+
 #. Label in project card
 #: src/home/HomeView.svelte
 msgid "Project"
@@ -2053,6 +2095,12 @@ msgstr "Type an example sentence"
 msgid "Type:"
 msgstr "Type:"
 
+#. Generic error displayed in place of a picture when loading fails for an unspecified reason
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+msgid "Unable to load image"
+msgstr "Unable to load image"
+
 #. Error message
 #: src/lib/components/OpenInFieldWorksButton.svelte
 msgid "Unable to open in FieldWorks"
diff --git a/frontend/viewer/src/locales/es.po b/frontend/viewer/src/locales/es.po
index 20bb46208c..d171116fa6 100644
--- a/frontend/viewer/src/locales/es.po
+++ b/frontend/viewer/src/locales/es.po
@@ -990,6 +990,10 @@ msgstr "Glosa"
 msgid "Go to {0}"
 msgstr "Visite {0}"
 
+#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
+msgid "Go to picture {0}"
+msgstr ""
+
 #. Filter option label
 #. Relevant view: Classic
 #. Lite view equivalent: "Part of speech"
@@ -1039,6 +1043,10 @@ msgstr "No veo mi proyecto"
 msgid "I understand that this can't be undone"
 msgstr "Entiendo que esto no se puede deshacer"
 
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+msgid "Image not found"
+msgstr ""
+
 #. Dev-mode only icon button tooltip on a Classic FieldWorks project list item. Imports the fwdata project into FwLite.
 #: src/home/HomeView.svelte
 msgid "Import"
@@ -1320,6 +1328,10 @@ msgstr ""
 msgid "Next"
 msgstr "Siguiente"
 
+#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
+msgid "Next picture"
+msgstr ""
+
 #. Empty state when activity list filters exclude every commit.
 #: src/lib/activity/ActivityView.svelte
 msgid "No activity matches these filters"
@@ -1374,6 +1386,10 @@ msgstr "No se han encontrado artículos"
 msgid "No new data"
 msgstr "No hay nuevos datos"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "No pictures"
+msgstr ""
+
 #. Sync status label shown in the sync panel when no server is associated with this project.
 #: src/project/sync/SyncStatusPrimitive.svelte
 msgid "No server"
@@ -1453,6 +1469,11 @@ msgstr "Fuera de línea"
 msgid "Offline, unable to download"
 msgstr "Desconectado, no se puede descargar"
 
+#. Error when offline and trying to download image
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+msgid "Offline, unable to download image"
+msgstr ""
+
 #. Sort option in activity view — earliest commit first.
 #: src/lib/activity/ActivityFilter.svelte
 msgid "Oldest first"
@@ -1545,6 +1566,15 @@ msgstr "Pendiente"
 msgid "Pick a Part of Speech"
 msgstr "Escoge una parte de la voz"
 
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Picture"
+msgstr ""
+
+#: src/lib/views/entity-config.ts
+msgid "Pictures"
+msgstr ""
+
 #. View option
 #. Pin the dictionary preview panel above the entry editor form
 #. Allows quick reference while editing without scrolling
@@ -1569,6 +1599,10 @@ msgstr "Vista previa"
 msgid "Preview not available"
 msgstr "Vista previa no disponible"
 
+#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
+msgid "Previous picture"
+msgstr ""
+
 #. Label in project card
 #: src/home/HomeView.svelte
 msgid "Project"
@@ -2058,6 +2092,11 @@ msgstr "Escriba una frase de ejemplo"
 msgid "Type:"
 msgstr "Tipo:"
 
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+msgid "Unable to load image"
+msgstr ""
+
 #. Error message
 #: src/lib/components/OpenInFieldWorksButton.svelte
 msgid "Unable to open in FieldWorks"
diff --git a/frontend/viewer/src/locales/fr.po b/frontend/viewer/src/locales/fr.po
index 205ebf064e..5a5e00e691 100644
--- a/frontend/viewer/src/locales/fr.po
+++ b/frontend/viewer/src/locales/fr.po
@@ -990,6 +990,10 @@ msgstr "Glose"
 msgid "Go to {0}"
 msgstr "Naviguer à {0}"
 
+#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
+msgid "Go to picture {0}"
+msgstr ""
+
 #. Filter option label
 #. Relevant view: Classic
 #. Lite view equivalent: "Part of speech"
@@ -1039,6 +1043,10 @@ msgstr "Je ne vois pas mon projet"
 msgid "I understand that this can't be undone"
 msgstr "Je comprends que cela ne peut pas être annulé"
 
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+msgid "Image not found"
+msgstr ""
+
 #. Dev-mode only icon button tooltip on a Classic FieldWorks project list item. Imports the fwdata project into FwLite.
 #: src/home/HomeView.svelte
 msgid "Import"
@@ -1320,6 +1328,10 @@ msgstr ""
 msgid "Next"
 msgstr "Suivant"
 
+#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
+msgid "Next picture"
+msgstr ""
+
 #. Empty state when activity list filters exclude every commit.
 #: src/lib/activity/ActivityView.svelte
 msgid "No activity matches these filters"
@@ -1374,6 +1386,10 @@ msgstr "Aucun élément trouvé"
 msgid "No new data"
 msgstr "Aucune nouvelle donnée"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "No pictures"
+msgstr ""
+
 #. Sync status label shown in the sync panel when no server is associated with this project.
 #: src/project/sync/SyncStatusPrimitive.svelte
 msgid "No server"
@@ -1453,6 +1469,11 @@ msgstr "Déconnecté"
 msgid "Offline, unable to download"
 msgstr "Déconnecté, impossible de télécharger"
 
+#. Error when offline and trying to download image
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+msgid "Offline, unable to download image"
+msgstr "Déconnecté, impossible de télécharger l'image"
+
 #. Sort option in activity view — earliest commit first.
 #: src/lib/activity/ActivityFilter.svelte
 msgid "Oldest first"
@@ -1545,6 +1566,15 @@ msgstr "En attente"
 msgid "Pick a Part of Speech"
 msgstr "Choisir une partie du discours"
 
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Picture"
+msgstr ""
+
+#: src/lib/views/entity-config.ts
+msgid "Pictures"
+msgstr ""
+
 #. View option
 #. Pin the dictionary preview panel above the entry editor form
 #. Allows quick reference while editing without scrolling
@@ -1569,6 +1599,10 @@ msgstr "Avant-première"
 msgid "Preview not available"
 msgstr "Aperçu non disponible"
 
+#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
+msgid "Previous picture"
+msgstr ""
+
 #. Label in project card
 #: src/home/HomeView.svelte
 msgid "Project"
@@ -2058,6 +2092,11 @@ msgstr "Saisir une phrase exemplaire"
 msgid "Type:"
 msgstr "Type :"
 
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+msgid "Unable to load image"
+msgstr ""
+
 #. Error message
 #: src/lib/components/OpenInFieldWorksButton.svelte
 msgid "Unable to open in FieldWorks"
diff --git a/frontend/viewer/src/locales/id.po b/frontend/viewer/src/locales/id.po
index 7e3085eb37..530f8daede 100644
--- a/frontend/viewer/src/locales/id.po
+++ b/frontend/viewer/src/locales/id.po
@@ -990,6 +990,10 @@ msgstr "Arti Singkat"
 msgid "Go to {0}"
 msgstr "Buka {0}"
 
+#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
+msgid "Go to picture {0}"
+msgstr ""
+
 #. Filter option label
 #. Relevant view: Classic
 #. Lite view equivalent: "Part of speech"
@@ -1039,6 +1043,10 @@ msgstr "Saya tidak melihat proyek saya"
 msgid "I understand that this can't be undone"
 msgstr "Saya memahami bahwa hal ini tidak dapat dibatalkan"
 
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+msgid "Image not found"
+msgstr ""
+
 #. Dev-mode only icon button tooltip on a Classic FieldWorks project list item. Imports the fwdata project into FwLite.
 #: src/home/HomeView.svelte
 msgid "Import"
@@ -1320,6 +1328,10 @@ msgstr ""
 msgid "Next"
 msgstr "Berikutnya"
 
+#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
+msgid "Next picture"
+msgstr ""
+
 #. Empty state when activity list filters exclude every commit.
 #: src/lib/activity/ActivityView.svelte
 msgid "No activity matches these filters"
@@ -1374,6 +1386,10 @@ msgstr "Tidak ada barang yang ditemukan"
 msgid "No new data"
 msgstr "Tidak ada data baru"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "No pictures"
+msgstr ""
+
 #. Sync status label shown in the sync panel when no server is associated with this project.
 #: src/project/sync/SyncStatusPrimitive.svelte
 msgid "No server"
@@ -1453,6 +1469,11 @@ msgstr "Offline"
 msgid "Offline, unable to download"
 msgstr "Offline, tidak dapat mengunduh"
 
+#. Error when offline and trying to download image
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+msgid "Offline, unable to download image"
+msgstr ""
+
 #. Sort option in activity view — earliest commit first.
 #: src/lib/activity/ActivityFilter.svelte
 msgid "Oldest first"
@@ -1545,6 +1566,15 @@ msgstr "Tertunda"
 msgid "Pick a Part of Speech"
 msgstr "Pilih Bagian dari Pidato"
 
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Picture"
+msgstr ""
+
+#: src/lib/views/entity-config.ts
+msgid "Pictures"
+msgstr ""
+
 #. View option
 #. Pin the dictionary preview panel above the entry editor form
 #. Allows quick reference while editing without scrolling
@@ -1569,6 +1599,10 @@ msgstr "Pratinjau"
 msgid "Preview not available"
 msgstr "Pratinjau tidak tersedia"
 
+#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
+msgid "Previous picture"
+msgstr ""
+
 #. Label in project card
 #: src/home/HomeView.svelte
 msgid "Project"
@@ -2058,6 +2092,11 @@ msgstr "Ketik contoh kalimat"
 msgid "Type:"
 msgstr "Ketik:"
 
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+msgid "Unable to load image"
+msgstr ""
+
 #. Error message
 #: src/lib/components/OpenInFieldWorksButton.svelte
 msgid "Unable to open in FieldWorks"
diff --git a/frontend/viewer/src/locales/ko.po b/frontend/viewer/src/locales/ko.po
index 6b92e1006a..312c2e5ebe 100644
--- a/frontend/viewer/src/locales/ko.po
+++ b/frontend/viewer/src/locales/ko.po
@@ -990,6 +990,10 @@ msgstr "광택"
 msgid "Go to {0}"
 msgstr "{0}으로 이동"
 
+#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
+msgid "Go to picture {0}"
+msgstr ""
+
 #. Filter option label
 #. Relevant view: Classic
 #. Lite view equivalent: "Part of speech"
@@ -1039,6 +1043,10 @@ msgstr "내 프로젝트가 보이지 않습니다."
 msgid "I understand that this can't be undone"
 msgstr "이 작업은 되돌릴 수 없다는 것을 이해합니다."
 
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+msgid "Image not found"
+msgstr ""
+
 #. Dev-mode only icon button tooltip on a Classic FieldWorks project list item. Imports the fwdata project into FwLite.
 #: src/home/HomeView.svelte
 msgid "Import"
@@ -1320,6 +1328,10 @@ msgstr ""
 msgid "Next"
 msgstr "다음"
 
+#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
+msgid "Next picture"
+msgstr ""
+
 #. Empty state when activity list filters exclude every commit.
 #: src/lib/activity/ActivityView.svelte
 msgid "No activity matches these filters"
@@ -1374,6 +1386,10 @@ msgstr "항목을 찾을 수 없습니다."
 msgid "No new data"
 msgstr "새 데이터 없음"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "No pictures"
+msgstr ""
+
 #. Sync status label shown in the sync panel when no server is associated with this project.
 #: src/project/sync/SyncStatusPrimitive.svelte
 msgid "No server"
@@ -1453,6 +1469,11 @@ msgstr "오프라인"
 msgid "Offline, unable to download"
 msgstr "오프라인 상태, 다운로드할 수 없음"
 
+#. Error when offline and trying to download image
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+msgid "Offline, unable to download image"
+msgstr ""
+
 #. Sort option in activity view — earliest commit first.
 #: src/lib/activity/ActivityFilter.svelte
 msgid "Oldest first"
@@ -1545,6 +1566,15 @@ msgstr "보류 중"
 msgid "Pick a Part of Speech"
 msgstr "품사 선택"
 
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Picture"
+msgstr ""
+
+#: src/lib/views/entity-config.ts
+msgid "Pictures"
+msgstr ""
+
 #. View option
 #. Pin the dictionary preview panel above the entry editor form
 #. Allows quick reference while editing without scrolling
@@ -1569,6 +1599,10 @@ msgstr "미리 보기"
 msgid "Preview not available"
 msgstr "미리 보기를 사용할 수 없습니다."
 
+#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
+msgid "Previous picture"
+msgstr ""
+
 #. Label in project card
 #: src/home/HomeView.svelte
 msgid "Project"
@@ -2058,6 +2092,11 @@ msgstr "예제 문장을 입력합니다."
 msgid "Type:"
 msgstr "유형:"
 
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+msgid "Unable to load image"
+msgstr ""
+
 #. Error message
 #: src/lib/components/OpenInFieldWorksButton.svelte
 msgid "Unable to open in FieldWorks"
diff --git a/frontend/viewer/src/locales/ms.po b/frontend/viewer/src/locales/ms.po
index 41e2547ffd..97d9ba4344 100644
--- a/frontend/viewer/src/locales/ms.po
+++ b/frontend/viewer/src/locales/ms.po
@@ -990,6 +990,10 @@ msgstr "Glos"
 msgid "Go to {0}"
 msgstr "Pergi ke {0}"
 
+#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
+msgid "Go to picture {0}"
+msgstr ""
+
 #. Filter option label
 #. Relevant view: Classic
 #. Lite view equivalent: "Part of speech"
@@ -1039,6 +1043,10 @@ msgstr "Saya tidak nampak projek saya"
 msgid "I understand that this can't be undone"
 msgstr "Saya faham bahawa ini tidak boleh dibuat asal"
 
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+msgid "Image not found"
+msgstr ""
+
 #. Dev-mode only icon button tooltip on a Classic FieldWorks project list item. Imports the fwdata project into FwLite.
 #: src/home/HomeView.svelte
 msgid "Import"
@@ -1320,6 +1328,10 @@ msgstr ""
 msgid "Next"
 msgstr "Seterusnya"
 
+#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
+msgid "Next picture"
+msgstr ""
+
 #. Empty state when activity list filters exclude every commit.
 #: src/lib/activity/ActivityView.svelte
 msgid "No activity matches these filters"
@@ -1374,6 +1386,10 @@ msgstr "Tiada item ditemui"
 msgid "No new data"
 msgstr "Tiada data baru"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "No pictures"
+msgstr ""
+
 #. Sync status label shown in the sync panel when no server is associated with this project.
 #: src/project/sync/SyncStatusPrimitive.svelte
 msgid "No server"
@@ -1453,6 +1469,11 @@ msgstr "Luar talian"
 msgid "Offline, unable to download"
 msgstr "Luar talian, tidak dapat memuat turun"
 
+#. Error when offline and trying to download image
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+msgid "Offline, unable to download image"
+msgstr ""
+
 #. Sort option in activity view — earliest commit first.
 #: src/lib/activity/ActivityFilter.svelte
 msgid "Oldest first"
@@ -1545,6 +1566,15 @@ msgstr "Tertunda"
 msgid "Pick a Part of Speech"
 msgstr "Pilih Bahagian Pertuturan"
 
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Picture"
+msgstr ""
+
+#: src/lib/views/entity-config.ts
+msgid "Pictures"
+msgstr ""
+
 #. View option
 #. Pin the dictionary preview panel above the entry editor form
 #. Allows quick reference while editing without scrolling
@@ -1569,6 +1599,10 @@ msgstr "Pratonton"
 msgid "Preview not available"
 msgstr "Pratonton tidak tersedia"
 
+#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
+msgid "Previous picture"
+msgstr ""
+
 #. Label in project card
 #: src/home/HomeView.svelte
 msgid "Project"
@@ -2058,6 +2092,11 @@ msgstr "Taip ayat contoh"
 msgid "Type:"
 msgstr "Jenis:"
 
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+msgid "Unable to load image"
+msgstr ""
+
 #. Error message
 #: src/lib/components/OpenInFieldWorksButton.svelte
 msgid "Unable to open in FieldWorks"
diff --git a/frontend/viewer/src/locales/sw.po b/frontend/viewer/src/locales/sw.po
index 2bf6258491..b8dc19aa1c 100644
--- a/frontend/viewer/src/locales/sw.po
+++ b/frontend/viewer/src/locales/sw.po
@@ -990,6 +990,10 @@ msgstr "Glosi"
 msgid "Go to {0}"
 msgstr "Nenda kwa {0}"
 
+#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
+msgid "Go to picture {0}"
+msgstr ""
+
 #. Filter option label
 #. Relevant view: Classic
 #. Lite view equivalent: "Part of speech"
@@ -1039,6 +1043,10 @@ msgstr "Siioni mradi wangu"
 msgid "I understand that this can't be undone"
 msgstr "Ninaelewa kuwa hii haiwezi kurudishwa nyuma"
 
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+msgid "Image not found"
+msgstr ""
+
 #. Dev-mode only icon button tooltip on a Classic FieldWorks project list item. Imports the fwdata project into FwLite.
 #: src/home/HomeView.svelte
 msgid "Import"
@@ -1320,6 +1328,10 @@ msgstr ""
 msgid "Next"
 msgstr "Inayofuata"
 
+#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
+msgid "Next picture"
+msgstr ""
+
 #. Empty state when activity list filters exclude every commit.
 #: src/lib/activity/ActivityView.svelte
 msgid "No activity matches these filters"
@@ -1374,6 +1386,10 @@ msgstr "Hakuna kitu kilichopatikana"
 msgid "No new data"
 msgstr "Hakuna data mpya"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "No pictures"
+msgstr ""
+
 #. Sync status label shown in the sync panel when no server is associated with this project.
 #: src/project/sync/SyncStatusPrimitive.svelte
 msgid "No server"
@@ -1453,6 +1469,11 @@ msgstr "Nyuma ya mtandao"
 msgid "Offline, unable to download"
 msgstr "Nyuma ya mtandao, haiwezi kupakua"
 
+#. Error when offline and trying to download image
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+msgid "Offline, unable to download image"
+msgstr ""
+
 #. Sort option in activity view — earliest commit first.
 #: src/lib/activity/ActivityFilter.svelte
 msgid "Oldest first"
@@ -1545,6 +1566,15 @@ msgstr "Inasubiri"
 msgid "Pick a Part of Speech"
 msgstr "Chagua Sehemu ya Mazungumzo"
 
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Picture"
+msgstr ""
+
+#: src/lib/views/entity-config.ts
+msgid "Pictures"
+msgstr ""
+
 #. View option
 #. Pin the dictionary preview panel above the entry editor form
 #. Allows quick reference while editing without scrolling
@@ -1569,6 +1599,10 @@ msgstr "Hakiki"
 msgid "Preview not available"
 msgstr "Muonekano awali haupatikani"
 
+#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
+msgid "Previous picture"
+msgstr ""
+
 #. Label in project card
 #: src/home/HomeView.svelte
 msgid "Project"
@@ -2058,6 +2092,11 @@ msgstr "Andika sentensi ya mfano"
 msgid "Type:"
 msgstr "Aina:"
 
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+msgid "Unable to load image"
+msgstr ""
+
 #. Error message
 #: src/lib/components/OpenInFieldWorksButton.svelte
 msgid "Unable to open in FieldWorks"
diff --git a/frontend/viewer/src/locales/vi.po b/frontend/viewer/src/locales/vi.po
index fe3b137341..f9c690cefe 100644
--- a/frontend/viewer/src/locales/vi.po
+++ b/frontend/viewer/src/locales/vi.po
@@ -990,6 +990,10 @@ msgstr "Ghi chú"
 msgid "Go to {0}"
 msgstr "Đi tới {0}"
 
+#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
+msgid "Go to picture {0}"
+msgstr ""
+
 #. Filter option label
 #. Relevant view: Classic
 #. Lite view equivalent: "Part of speech"
@@ -1039,6 +1043,10 @@ msgstr "Tôi không thấy dự án của mình"
 msgid "I understand that this can't be undone"
 msgstr "Tôi hiểu rằng điều này không thể hoàn tác"
 
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+msgid "Image not found"
+msgstr ""
+
 #. Dev-mode only icon button tooltip on a Classic FieldWorks project list item. Imports the fwdata project into FwLite.
 #: src/home/HomeView.svelte
 msgid "Import"
@@ -1320,6 +1328,10 @@ msgstr ""
 msgid "Next"
 msgstr "Tiếp theo"
 
+#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
+msgid "Next picture"
+msgstr ""
+
 #. Empty state when activity list filters exclude every commit.
 #: src/lib/activity/ActivityView.svelte
 msgid "No activity matches these filters"
@@ -1374,6 +1386,10 @@ msgstr "Không tìm thấy mục nào"
 msgid "No new data"
 msgstr "Không có dữ liệu mới"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "No pictures"
+msgstr ""
+
 #. Sync status label shown in the sync panel when no server is associated with this project.
 #: src/project/sync/SyncStatusPrimitive.svelte
 msgid "No server"
@@ -1453,6 +1469,11 @@ msgstr "Ngoại tuyến"
 msgid "Offline, unable to download"
 msgstr "Ngoại tuyến, không thể tải xuống"
 
+#. Error when offline and trying to download image
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+msgid "Offline, unable to download image"
+msgstr ""
+
 #. Sort option in activity view — earliest commit first.
 #: src/lib/activity/ActivityFilter.svelte
 msgid "Oldest first"
@@ -1545,6 +1566,15 @@ msgstr "Đang chờ xử lý"
 msgid "Pick a Part of Speech"
 msgstr "Chọn một Loại từ"
 
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Picture"
+msgstr ""
+
+#: src/lib/views/entity-config.ts
+msgid "Pictures"
+msgstr ""
+
 #. View option
 #. Pin the dictionary preview panel above the entry editor form
 #. Allows quick reference while editing without scrolling
@@ -1569,6 +1599,10 @@ msgstr "Xem trước"
 msgid "Preview not available"
 msgstr "Xem trước không khả dụng"
 
+#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
+msgid "Previous picture"
+msgstr ""
+
 #. Label in project card
 #: src/home/HomeView.svelte
 msgid "Project"
@@ -2058,6 +2092,11 @@ msgstr "Gõ một câu ví dụ"
 msgid "Type:"
 msgstr "Loại:"
 
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+msgid "Unable to load image"
+msgstr ""
+
 #. Error message
 #: src/lib/components/OpenInFieldWorksButton.svelte
 msgid "Unable to open in FieldWorks"

From da91533106b3d8672b6144c75c0e40a2061e7c3f Mon Sep 17 00:00:00 2001
From: Robin Munn <robin_munn@sil.org>
Date: Thu, 25 Jun 2026 11:18:01 +0700
Subject: [PATCH 03/32] Guard against undefined sense.pictures; fix demo data +
 Playwright test
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Running the new Playwright test against the real demo data surfaced two issues:

- The demo pictures were added to `_entries`, which is dead code; the served
  data is `entries`, whose first item is replaced by `allWsEntry`. Move the two
  demo pictures onto `allWsEntry`'s sense (the live "nyumba" entry) and revert
  the `_entries` change.
- PicturesEditor crashed ("Cannot read properties of undefined (reading
  'length')") on senses whose `pictures` is absent at runtime — the bulk demo
  data (and legacy data) omit the field even though the type marks it required.
  Default it to an empty array before use.
- Update the test's empty-state case to use a single-sense entry ("ambuka")
  since the picture-bearing entry now has only one sense.

Both Playwright tests pass; svelte-check and eslint are clean.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../field-editors/PicturesEditor.svelte       | 10 ++++--
 .../src/project/demo/demo-entry-data.ts       | 36 +++++++++++--------
 frontend/viewer/tests/sense-pictures.test.ts  | 15 ++++----
 3 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte b/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte
index 86e79fd67e..6d946363ec 100644
--- a/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte
+++ b/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte
@@ -5,14 +5,18 @@
   import {t} from 'svelte-i18n-lingui';
 
   type Props = {
-    value: IPicture[];
+    value: IPicture[] | undefined;
     readonly?: boolean;
   };
   const {value, readonly = false}: Props = $props();
+
+  // `pictures` is typed as required, but older/legacy sense data may omit it entirely,
+  // so guard against undefined rather than trusting the type at runtime.
+  const pictures = $derived(value ?? []);
 </script>
 
-{#if value.length > 0}
-  <PictureCarousel pictures={value} />
+{#if pictures.length > 0}
+  <PictureCarousel {pictures} />
 {:else if !readonly}
   <!-- TODO: wire this up to actually add a picture once a create-picture API is exposed
        to the frontend. MiniLcmJsInvokable currently has no create/update picture method,
diff --git a/frontend/viewer/src/project/demo/demo-entry-data.ts b/frontend/viewer/src/project/demo/demo-entry-data.ts
index 65d4b9ddeb..f64c9c9907 100644
--- a/frontend/viewer/src/project/demo/demo-entry-data.ts
+++ b/frontend/viewer/src/project/demo/demo-entry-data.ts
@@ -183,20 +183,7 @@ export const _entries: IEntry[] = [
         'partOfSpeech': partsOfSpeech[1], // noun
         'partOfSpeechId': partsOfSpeech[1].id,
         'semanticDomains': [],
-        'pictures': [
-          {
-            'id': 'ce4a3b1e-6d2f-4f1a-8c0d-1f2e3a4b5c6d',
-            'order': 1,
-            'mediaUri': demoPictureMediaUris.house1,
-            'caption': {'en': {spans: [{text: 'A traditional house', ws: 'en'}]}, 'pt': {spans: [{text: 'Uma casa tradicional', ws: 'pt'}]}},
-          },
-          {
-            'id': 'a1b2c3d4-7e8f-4a0b-9c1d-2e3f4a5b6c7d',
-            'order': 2,
-            'mediaUri': demoPictureMediaUris.house2,
-            'caption': {'en': {spans: [{text: 'A modern house', ws: 'en'}]}, 'pt': {spans: [{text: 'Uma casa moderna', ws: 'pt'}]}},
-          },
-        ],
+        'pictures': [],
         'exampleSentences': [
           {
             'id': 'ex-001',
@@ -344,7 +331,26 @@ export const allWsEntry: IEntry = {
     partOfSpeech: partsOfSpeech[1],
     partOfSpeechId: partsOfSpeech[1].id,
     semanticDomains: [],
-    pictures: [],
+    pictures: [
+      {
+        id: 'ce4a3b1e-6d2f-4f1a-8c0d-1f2e3a4b5c6d',
+        order: 1,
+        mediaUri: demoPictureMediaUris.house1,
+        caption: {
+          en: { spans: [{ text: 'A traditional house', ws: 'en' }] },
+          pt: { spans: [{ text: 'Uma casa tradicional', ws: 'pt' }] },
+        },
+      },
+      {
+        id: 'a1b2c3d4-7e8f-4a0b-9c1d-2e3f4a5b6c7d',
+        order: 2,
+        mediaUri: demoPictureMediaUris.house2,
+        caption: {
+          en: { spans: [{ text: 'A modern house', ws: 'en' }] },
+          pt: { spans: [{ text: 'Uma casa moderna', ws: 'pt' }] },
+        },
+      },
+    ],
     exampleSentences: [{
       id: '00000000-0000-0000-0000-000000000003',
       senseId: '00000000-0000-0000-0000-000000000002',
diff --git a/frontend/viewer/tests/sense-pictures.test.ts b/frontend/viewer/tests/sense-pictures.test.ts
index c4edbd633f..018c2477d9 100644
--- a/frontend/viewer/tests/sense-pictures.test.ts
+++ b/frontend/viewer/tests/sense-pictures.test.ts
@@ -6,7 +6,8 @@ import {BrowsePage} from './browse-page';
  * - a sense with pictures renders the image (loaded via getFileStream into a blob url) + caption
  * - a sense without pictures shows the disabled "+ Picture" add button
  *
- * The demo "nyumba" entry's first sense has two demo pictures; its other senses have none.
+ * The demo "nyumba" entry (allWsEntry) has two demo pictures on its sense; other demo
+ * entries (e.g. "ambuka") have none.
  */
 test.describe('Sense pictures', () => {
   test('displays a picture (and its caption) for a sense that has pictures', async ({page}) => {
@@ -32,14 +33,16 @@ test.describe('Sense pictures', () => {
     const browsePage = new BrowsePage(page);
     await browsePage.goto();
 
-    await browsePage.selectEntryByFilter('nyumba');
+    // "ambuka" has no pictures, so its Pictures field shows the add button.
+    await browsePage.selectEntryByFilter('ambuka');
 
-    // First sense has pictures; later senses do not, so their Pictures field shows the add button.
-    const emptyPicturesField = page.locator('[style*="grid-area: pictures"]').nth(1);
-    await expect(emptyPicturesField).toBeVisible({timeout: 5000});
+    const picturesField = page.locator('[style*="grid-area: pictures"]').first();
+    await expect(picturesField).toBeVisible({timeout: 5000});
 
-    const addButton = emptyPicturesField.getByRole('button', {name: 'Picture'});
+    const addButton = picturesField.getByRole('button', {name: 'Picture'});
     await expect(addButton).toBeVisible();
     await expect(addButton).toBeDisabled();
+    // The add button is the empty state, so no image should be present.
+    await expect(picturesField.locator('img')).toHaveCount(0);
   });
 });

From d89cb632f5aebc50997e3f781a164153658ad770 Mon Sep 17 00:00:00 2001
From: Robin Munn <rmunn@pobox.com>
Date: Fri, 3 Jul 2026 10:43:11 +0700
Subject: [PATCH 04/32] Add Picture CRUD API to MiniLcmJsInvokable

It's time to implement picture manipulation in the frontend, at least
basic stuff (uploading pictures, etc). No editing planned yet.
---
 .../Services/MiniLcmJsInvokable.cs            | 23 +++++++++++++++++++
 .../Services/IMiniLcmJsInvokable.ts           |  4 ++++
 .../MiniLcm/Models/IPicture.ts                |  1 -
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/backend/FwLite/FwLiteShared/Services/MiniLcmJsInvokable.cs b/backend/FwLite/FwLiteShared/Services/MiniLcmJsInvokable.cs
index a56aa4817e..20d97a56c8 100644
--- a/backend/FwLite/FwLiteShared/Services/MiniLcmJsInvokable.cs
+++ b/backend/FwLite/FwLiteShared/Services/MiniLcmJsInvokable.cs
@@ -382,6 +382,29 @@ public async Task DeleteExampleSentence(Guid entryId, Guid senseId, Guid example
         OnDataChanged();
     }
 
+    [JSInvokable]
+    public async Task<Picture> CreatePicture(Guid entryId, Guid senseId, Picture picture)
+    {
+        var createdPicture = await _wrappedApi.CreatePicture(entryId, senseId, picture);
+        OnDataChanged();
+        return createdPicture;
+    }
+
+    [JSInvokable]
+    public async Task<Picture> UpdatePicture(Guid entryId, Guid senseId, Picture before, Picture after)
+    {
+        var updatedPicture = await _wrappedApi.UpdatePicture(entryId, senseId, before, after);
+        OnDataChanged();
+        return updatedPicture;
+    }
+
+    [JSInvokable]
+    public async Task DeletePicture(Guid entryId, Guid senseId, Guid pictureId)
+    {
+        await _wrappedApi.DeletePicture(entryId, senseId, pictureId);
+        OnDataChanged();
+    }
+
     [JSInvokable]
     public async Task<ReadFileResponseJs?> GetFileStream(string mediaUri)
     {
diff --git a/frontend/viewer/src/lib/dotnet-types/generated-types/FwLiteShared/Services/IMiniLcmJsInvokable.ts b/frontend/viewer/src/lib/dotnet-types/generated-types/FwLiteShared/Services/IMiniLcmJsInvokable.ts
index 5fedeb1bfc..353eb390da 100644
--- a/frontend/viewer/src/lib/dotnet-types/generated-types/FwLiteShared/Services/IMiniLcmJsInvokable.ts
+++ b/frontend/viewer/src/lib/dotnet-types/generated-types/FwLiteShared/Services/IMiniLcmJsInvokable.ts
@@ -21,6 +21,7 @@ import type {ICreateEntryOptions} from '../../MiniLcm/ICreateEntryOptions';
 import type {IComplexFormComponent} from '../../MiniLcm/Models/IComplexFormComponent';
 import type {ISense} from '../../MiniLcm/Models/ISense';
 import type {IExampleSentence} from '../../MiniLcm/Models/IExampleSentence';
+import type {IPicture} from '../../MiniLcm/Models/IPicture';
 import type {IReadFileResponseJs} from './IReadFileResponseJs';
 import type {IUploadFileResponse} from '../../MiniLcm/Media/IUploadFileResponse';
 import type {ILcmFileMetadata} from '../../MiniLcm/Media/ILcmFileMetadata';
@@ -75,6 +76,9 @@ export interface IMiniLcmJsInvokable
 	createExampleSentence(entryId: string, senseId: string, exampleSentence: IExampleSentence) : Promise<IExampleSentence>;
 	updateExampleSentence(entryId: string, senseId: string, before: IExampleSentence, after: IExampleSentence) : Promise<IExampleSentence>;
 	deleteExampleSentence(entryId: string, senseId: string, exampleSentenceId: string) : Promise<void>;
+	createPicture(entryId: string, senseId: string, picture: IPicture) : Promise<IPicture>;
+	updatePicture(entryId: string, senseId: string, before: IPicture, after: IPicture) : Promise<IPicture>;
+	deletePicture(entryId: string, senseId: string, pictureId: string) : Promise<void>;
 	getFileStream(mediaUri: string) : Promise<IReadFileResponseJs>;
 	saveFile(streamReference: Blob | ArrayBuffer | Uint8Array, metadata: ILcmFileMetadata) : Promise<IUploadFileResponse>;
 }
diff --git a/frontend/viewer/src/lib/dotnet-types/generated-types/MiniLcm/Models/IPicture.ts b/frontend/viewer/src/lib/dotnet-types/generated-types/MiniLcm/Models/IPicture.ts
index ec6024469b..2e9069b827 100644
--- a/frontend/viewer/src/lib/dotnet-types/generated-types/MiniLcm/Models/IPicture.ts
+++ b/frontend/viewer/src/lib/dotnet-types/generated-types/MiniLcm/Models/IPicture.ts
@@ -11,6 +11,5 @@ export interface IPicture
 	order: number;
 	mediaUri: string;
 	caption: IRichMultiString;
-	deletedAt?: string;
 }
 /* eslint-enable */

From 5e707d3064eee76dbd65047b48dd6afa499ef5bb Mon Sep 17 00:00:00 2001
From: Robin Munn <rmunn@pobox.com>
Date: Fri, 3 Jul 2026 11:30:28 +0700
Subject: [PATCH 05/32] Correct URL for Pictures helpId

---
 frontend/viewer/src/lib/views/entity-config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/viewer/src/lib/views/entity-config.ts b/frontend/viewer/src/lib/views/entity-config.ts
index 16254a14b1..d3e8ec4cba 100644
--- a/frontend/viewer/src/lib/views/entity-config.ts
+++ b/frontend/viewer/src/lib/views/entity-config.ts
@@ -67,7 +67,7 @@ export const entityConfig = {
     },
     pictures: {
       label: msg`Pictures`,
-      helpId: 'User_Interface/Field_Descriptions/Lexicon/Lexicon_Edit_fields/Sense_level_fields/Pictures_field.htm',
+      helpId: 'User_Interface/Field_Descriptions/Lexicon/Lexicon_Edit_fields/Sense_level_fields/Picture_field.htm',
     },
   },
   example: {

From 1fd212f4820c9bc39a95d3d013042a340aaa6084 Mon Sep 17 00:00:00 2001
From: Robin Munn <robin_munn@sil.org>
Date: Fri, 3 Jul 2026 12:14:20 +0700
Subject: [PATCH 06/32] Implement the "+ Picture" button to upload and create
 pictures
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wire up the previously-disabled "+ Picture" button in the sense editor so
users can add a picture to a sense.

- PicturesEditor: clicking the button opens a file picker limited to JPG/PNG,
  uploads the chosen file via saveFile, then calls createPicture with the
  returned mediaUri. Upload results are handled by branching on the result enum
  (no try/catch), matching PictureImage.
- Too-large files: the client does not hardcode the size limit (it may change
  server-side); it handles the server's TooBig result and shows a helpful
  message — suggest lowering JPEG quality for a JPG, or reducing resolution for
  a PNG.
- MiniLcmApiNotifyWrapper: notify on Create/Update/Move/DeletePicture (this was
  missing), so the entry reloads and the new picture renders, like every other
  write op.
- Demo API: implement saveFile (stores the blob, enforces the same 10 MB server
  limit) plus create/update/deletePicture, so the flow round-trips offline.
- Playwright: the empty-state button is now enabled; add coverage for uploading
  a picture through it and seeing it render.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../Services/MiniLcmApiNotifyWrapper.cs       | 36 ++++++++
 .../field-editors/PicturesEditor.svelte       | 89 +++++++++++++++++--
 .../SenseEditorPrimitive.svelte               |  2 +-
 frontend/viewer/src/locales/en.po             | 20 +++++
 frontend/viewer/src/locales/es.po             | 29 ++++++
 frontend/viewer/src/locales/fr.po             | 29 ++++++
 frontend/viewer/src/locales/id.po             | 29 ++++++
 frontend/viewer/src/locales/ko.po             | 29 ++++++
 frontend/viewer/src/locales/ms.po             | 29 ++++++
 frontend/viewer/src/locales/sw.po             | 29 ++++++
 frontend/viewer/src/locales/vi.po             | 29 ++++++
 .../src/project/demo/in-memory-demo-api.ts    | 67 +++++++++++++-
 frontend/viewer/tests/sense-pictures.test.ts  | 38 +++++++-
 13 files changed, 443 insertions(+), 12 deletions(-)

diff --git a/backend/FwLite/FwLiteShared/Services/MiniLcmApiNotifyWrapper.cs b/backend/FwLite/FwLiteShared/Services/MiniLcmApiNotifyWrapper.cs
index ebf9048bd3..ba9de7cd68 100644
--- a/backend/FwLite/FwLiteShared/Services/MiniLcmApiNotifyWrapper.cs
+++ b/backend/FwLite/FwLiteShared/Services/MiniLcmApiNotifyWrapper.cs
@@ -123,6 +123,42 @@ async Task<ExampleSentence> IMiniLcmWriteApi.UpdateExampleSentence(Guid entryId,
         return result;
     }
 
+    async Task<Picture> IMiniLcmWriteApi.CreatePicture(Guid entryId, Guid senseId, Picture picture, BetweenPosition? position)
+    {
+        await using var _ = BeginTrackingChanges();
+        var result = await _api.CreatePicture(entryId, senseId, picture, position);
+        NotifyEntryChanged(entryId);
+        return result;
+    }
+
+    async Task<Picture> IMiniLcmWriteApi.UpdatePicture(Guid entryId, Guid senseId, Guid pictureId, UpdateObjectInput<Picture> update)
+    {
+        await using var _ = BeginTrackingChanges();
+        var result = await _api.UpdatePicture(entryId, senseId, pictureId, update);
+        NotifyEntryChanged(entryId);
+        return result;
+    }
+
+    async Task<Picture> IMiniLcmWriteApi.UpdatePicture(Guid entryId, Guid senseId, Picture before, Picture after, IMiniLcmApi? api)
+    {
+        await using var _ = BeginTrackingChanges();
+        var result = await _api.UpdatePicture(entryId, senseId, before, after, api ?? this);
+        NotifyEntryChanged(entryId);
+        return result;
+    }
+
+    async Task IMiniLcmWriteApi.MovePicture(Guid entryId, Guid senseId, Guid pictureId, BetweenPosition position)
+    {
+        await _api.MovePicture(entryId, senseId, pictureId, position);
+        NotifyEntryChanged(entryId);
+    }
+
+    async Task IMiniLcmWriteApi.DeletePicture(Guid entryId, Guid senseId, Guid pictureId)
+    {
+        await _api.DeletePicture(entryId, senseId, pictureId);
+        NotifyEntryChanged(entryId);
+    }
+
     async Task<ComplexFormComponent> IMiniLcmWriteApi.CreateComplexFormComponent(ComplexFormComponent complexFormComponent, BetweenPosition<ComplexFormComponent>? position)
     {
         var result = await _api.CreateComplexFormComponent(complexFormComponent, position);
diff --git a/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte b/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte
index 6d946363ec..b37a4bb980 100644
--- a/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte
+++ b/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte
@@ -1,29 +1,108 @@
 <script lang="ts">
   import type {IPicture} from '$lib/dotnet-types';
+  import {UploadFileResult} from '$lib/dotnet-types/generated-types/MiniLcm/Media/UploadFileResult';
   import {Button} from '$lib/components/ui/button';
   import PictureCarousel from './PictureCarousel.svelte';
   import {t} from 'svelte-i18n-lingui';
+  import {useLexboxApi} from '$lib/services/service-provider';
+  import {AppNotification} from '$lib/notifications/notifications';
+  import {randomId} from '$lib/utils';
 
   type Props = {
     value: IPicture[] | undefined;
+    entryId: string;
+    senseId: string;
     readonly?: boolean;
   };
-  const {value, readonly = false}: Props = $props();
+  const {value, entryId, senseId, readonly = false}: Props = $props();
+
+  const api = useLexboxApi();
 
   // `pictures` is typed as required, but older/legacy sense data may omit it entirely,
   // so guard against undefined rather than trusting the type at runtime.
   const pictures = $derived(value ?? []);
+
+  // Formats the browser accepts and that the server supports for pictures.
+  const ACCEPTED_TYPES = 'image/jpeg,image/png';
+
+  let fileInputElement = $state<HTMLInputElement>();
+  let uploading = $state(false);
+
+  function selectFile() {
+    fileInputElement?.click();
+  }
+
+  function onFileSelected(event: Event) {
+    const target = event.target as HTMLInputElement;
+    const file = target.files?.[0];
+    // Reset the input so selecting the same file again re-triggers `change`.
+    target.value = '';
+    if (file) void uploadPicture(file);
+  }
+
+  async function uploadPicture(file: File): Promise<void> {
+    uploading = true;
+    try {
+      // saveFile reports the outcome via `result` (not exceptions), so we branch on it.
+      // We intentionally do NOT pre-check the file size: the size limit lives on the
+      // server and may change, so we let the server decide and handle a `TooBig` result.
+      const response = await api.saveFile(file, {filename: file.name, mimeType: file.type});
+      switch (response.result) {
+        case UploadFileResult.SavedLocally:
+        case UploadFileResult.SavedToLexbox:
+          break;
+        case UploadFileResult.TooBig:
+          AppNotification.display(tooBigMessage(file), {type: 'error', timeout: 'long'});
+          return;
+        case UploadFileResult.NotSupported:
+          AppNotification.display($t`Uploading pictures is not supported here`, {type: 'error'});
+          return;
+        case UploadFileResult.AlreadyExists:
+          AppNotification.display($t`That picture has already been uploaded`, {type: 'error'});
+          return;
+        case UploadFileResult.Error:
+          AppNotification.display(response.errorMessage ?? $t`Unable to upload the picture`, {type: 'error'});
+          return;
+      }
+      if (!response.mediaUri) throw new Error('saveFile succeeded but returned no mediaUri');
+
+      const picture: IPicture = {
+        id: randomId(),
+        order: pictures.length,
+        mediaUri: response.mediaUri,
+        caption: {},
+      };
+      await api.createPicture(entryId, senseId, picture);
+      // The created picture surfaces via the entry-changed event, which reloads the entry.
+    } finally {
+      uploading = false;
+    }
+  }
+
+  // The server rejects files above its size limit. JPEGs can usually be shrunk by lowering
+  // the export quality, whereas PNGs (lossless) need a smaller resolution instead.
+  function tooBigMessage(file: File): string {
+    const isPng = file.type === 'image/png' || /\.png$/i.test(file.name);
+    return isPng
+      ? $t`This picture is too large to upload. Try reducing the image resolution and uploading again.`
+      : $t`This picture is too large to upload. Try saving it at a lower JPEG quality and uploading again.`;
+  }
 </script>
 
 {#if pictures.length > 0}
   <PictureCarousel {pictures} />
 {:else if !readonly}
-  <!-- TODO: wire this up to actually add a picture once a create-picture API is exposed
-       to the frontend. MiniLcmJsInvokable currently has no create/update picture method,
-       so the button mirrors "+ Component" but is disabled for now. -->
-  <Button icon="i-mdi-plus" size="xs" disabled>
+  <Button icon="i-mdi-plus" size="xs" loading={uploading} onclick={selectFile}>
     {$t`Picture`}
   </Button>
+  <!-- Hidden input drives the OS file picker; only JPG/PNG are offered. -->
+  <input
+    bind:this={fileInputElement}
+    type="file"
+    accept={ACCEPTED_TYPES}
+    onchange={onFileSelected}
+    class="hidden"
+  />
 {:else}
   <div class="text-muted-foreground p-1">
     {$t`No pictures`}
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 328b2da15e..0eee7bb04a 100644
--- a/frontend/viewer/src/lib/entry-editor/object-editors/SenseEditorPrimitive.svelte
+++ b/frontend/viewer/src/lib/entry-editor/object-editors/SenseEditorPrimitive.svelte
@@ -102,7 +102,7 @@
   <Editor.Field.Root fieldId="pictures" class={cn(fields.pictures?.show || 'hidden')}>
     <Editor.Field.Title name={$tvt(entityConfig.sense.pictures.label)} helpId={entityConfig.sense.pictures.helpId} />
     <Editor.Field.Body>
-      <PicturesEditor value={sense.pictures} {readonly} />
+      <PicturesEditor value={sense.pictures} entryId={sense.entryId} senseId={sense.id} {readonly} />
     </Editor.Field.Body>
   </Editor.Field.Root>
 </Editor.SubGrid>
diff --git a/frontend/viewer/src/locales/en.po b/frontend/viewer/src/locales/en.po
index 5406c7c86b..f7b4d8b829 100644
--- a/frontend/viewer/src/locales/en.po
+++ b/frontend/viewer/src/locales/en.po
@@ -1981,6 +1981,10 @@ msgstr "Tasks"
 msgid "Tell us about a bug or issue you’ve encountered."
 msgstr "Tell us about a bug or issue you’ve encountered."
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "That picture has already been uploaded"
+msgstr "That picture has already been uploaded"
+
 #. View description
 #: src/project/browse/ViewPicker.svelte
 msgid "The *FieldWorks Classic* view, on the other hand, is designed for users who are familiar with *[FieldWorks Language Explorer](https://software.sil.org/fieldworks/)*."
@@ -2027,6 +2031,14 @@ msgstr "This {0} was deleted"
 msgid "This date # and this emoji # are snippets"
 msgstr "This date # and this emoji # are snippets"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "This picture is too large to upload. Try reducing the image resolution and uploading again."
+msgstr "This picture is too large to upload. Try reducing the image resolution and uploading again."
+
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "This picture is too large to upload. Try saving it at a lower JPEG quality and uploading again."
+msgstr "This picture is too large to upload. Try saving it at a lower JPEG quality and uploading again."
+
 #. Help message
 #: src/lib/components/OpenInFieldWorksButton.svelte
 msgid "This project is now open in FieldWorks. To continue working in FieldWorks Lite, close the project in FieldWorks and click Reopen."
@@ -2106,6 +2118,10 @@ msgstr "Unable to load image"
 msgid "Unable to open in FieldWorks"
 msgstr "Unable to open in FieldWorks"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Unable to upload the picture"
+msgstr "Unable to upload the picture"
+
 #. Fallback value shown when author name or last-change date is unavailable (e.g., in activity history or the sync panel).
 #: src/lib/activity/ActivityFilter.svelte
 #: src/lib/activity/ActivityFilter.svelte
@@ -2201,6 +2217,10 @@ msgstr "Update was disallowed by permission settings."
 msgid "Updates"
 msgstr "Updates"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Uploading pictures is not supported here"
+msgstr "Uploading pictures is not supported here"
+
 #. Field label
 #: src/lib/views/entity-config.ts
 msgid "Uses components as"
diff --git a/frontend/viewer/src/locales/es.po b/frontend/viewer/src/locales/es.po
index d171116fa6..b4d574285c 100644
--- a/frontend/viewer/src/locales/es.po
+++ b/frontend/viewer/src/locales/es.po
@@ -990,6 +990,8 @@ msgstr "Glosa"
 msgid "Go to {0}"
 msgstr "Visite {0}"
 
+#. Aria-label on a carousel dot button below the picture; navigates to a specific picture
+#. {0} = 1-based picture number (e.g., "Go to picture 2")
 #: src/lib/entry-editor/field-editors/PictureCarousel.svelte
 msgid "Go to picture {0}"
 msgstr ""
@@ -1043,6 +1045,7 @@ msgstr "No veo mi proyecto"
 msgid "I understand that this can't be undone"
 msgstr "Entiendo que esto no se puede deshacer"
 
+#. Error displayed in place of a picture when the media file is missing from local storage
 #: src/lib/entry-editor/field-editors/PictureImage.svelte
 msgid "Image not found"
 msgstr ""
@@ -1328,6 +1331,7 @@ msgstr ""
 msgid "Next"
 msgstr "Siguiente"
 
+#. Aria-label on the right-arrow button in the picture carousel; advances to the next image
 #: src/lib/entry-editor/field-editors/PictureCarousel.svelte
 msgid "Next picture"
 msgstr ""
@@ -1386,6 +1390,7 @@ msgstr "No se han encontrado artículos"
 msgid "No new data"
 msgstr "No hay nuevos datos"
 
+#. Empty state shown read-only in the Pictures field when a sense has no pictures
 #: src/lib/entry-editor/field-editors/PicturesEditor.svelte
 msgid "No pictures"
 msgstr ""
@@ -1566,11 +1571,13 @@ msgstr "Pendiente"
 msgid "Pick a Part of Speech"
 msgstr "Escoge una parte de la voz"
 
+#. Two uses: (1) alt text for a picture image when no caption is available; (2) label on a currently-disabled "+ Picture" add button in the sense editor
 #: src/lib/entry-editor/field-editors/PictureImage.svelte
 #: src/lib/entry-editor/field-editors/PicturesEditor.svelte
 msgid "Picture"
 msgstr ""
 
+#. Sense-level field label in the entry editor for the FieldWorks Pictures field (attached images)
 #: src/lib/views/entity-config.ts
 msgid "Pictures"
 msgstr ""
@@ -1599,6 +1606,7 @@ msgstr "Vista previa"
 msgid "Preview not available"
 msgstr "Vista previa no disponible"
 
+#. Aria-label on the left-arrow button in the picture carousel; goes back to the previous image
 #: src/lib/entry-editor/field-editors/PictureCarousel.svelte
 msgid "Previous picture"
 msgstr ""
@@ -1978,6 +1986,10 @@ msgstr "Tareas"
 msgid "Tell us about a bug or issue you’ve encountered."
 msgstr "Cuéntanos acerca de un error o problema que hayas encontrado."
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "That picture has already been uploaded"
+msgstr ""
+
 #. View description
 #: src/project/browse/ViewPicker.svelte
 msgid "The *FieldWorks Classic* view, on the other hand, is designed for users who are familiar with *[FieldWorks Language Explorer](https://software.sil.org/fieldworks/)*."
@@ -2024,6 +2036,14 @@ msgstr "Este {0} ha sido eliminado"
 msgid "This date # and this emoji # are snippets"
 msgstr "Esta fecha # y este emoji # son fragmentos"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "This picture is too large to upload. Try reducing the image resolution and uploading again."
+msgstr ""
+
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "This picture is too large to upload. Try saving it at a lower JPEG quality and uploading again."
+msgstr ""
+
 #. Help message
 #: src/lib/components/OpenInFieldWorksButton.svelte
 msgid "This project is now open in FieldWorks. To continue working in FieldWorks Lite, close the project in FieldWorks and click Reopen."
@@ -2092,6 +2112,7 @@ msgstr "Escriba una frase de ejemplo"
 msgid "Type:"
 msgstr "Tipo:"
 
+#. Generic error displayed in place of a picture when loading fails for an unspecified reason
 #: src/lib/entry-editor/field-editors/PictureImage.svelte
 #: src/lib/entry-editor/field-editors/PictureImage.svelte
 msgid "Unable to load image"
@@ -2102,6 +2123,10 @@ msgstr ""
 msgid "Unable to open in FieldWorks"
 msgstr "No se puede abrir en FieldWorks"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Unable to upload the picture"
+msgstr ""
+
 #. Fallback value shown when author name or last-change date is unavailable (e.g., in activity history or the sync panel).
 #: src/lib/activity/ActivityFilter.svelte
 #: src/lib/activity/ActivityFilter.svelte
@@ -2197,6 +2222,10 @@ msgstr "La actualización no fue permitida por la configuración de permisos."
 msgid "Updates"
 msgstr "Actualizaciones"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Uploading pictures is not supported here"
+msgstr ""
+
 #. Field label
 #: src/lib/views/entity-config.ts
 msgid "Uses components as"
diff --git a/frontend/viewer/src/locales/fr.po b/frontend/viewer/src/locales/fr.po
index 5a5e00e691..700c5ccfb0 100644
--- a/frontend/viewer/src/locales/fr.po
+++ b/frontend/viewer/src/locales/fr.po
@@ -990,6 +990,8 @@ msgstr "Glose"
 msgid "Go to {0}"
 msgstr "Naviguer à {0}"
 
+#. Aria-label on a carousel dot button below the picture; navigates to a specific picture
+#. {0} = 1-based picture number (e.g., "Go to picture 2")
 #: src/lib/entry-editor/field-editors/PictureCarousel.svelte
 msgid "Go to picture {0}"
 msgstr ""
@@ -1043,6 +1045,7 @@ msgstr "Je ne vois pas mon projet"
 msgid "I understand that this can't be undone"
 msgstr "Je comprends que cela ne peut pas être annulé"
 
+#. Error displayed in place of a picture when the media file is missing from local storage
 #: src/lib/entry-editor/field-editors/PictureImage.svelte
 msgid "Image not found"
 msgstr ""
@@ -1328,6 +1331,7 @@ msgstr ""
 msgid "Next"
 msgstr "Suivant"
 
+#. Aria-label on the right-arrow button in the picture carousel; advances to the next image
 #: src/lib/entry-editor/field-editors/PictureCarousel.svelte
 msgid "Next picture"
 msgstr ""
@@ -1386,6 +1390,7 @@ msgstr "Aucun élément trouvé"
 msgid "No new data"
 msgstr "Aucune nouvelle donnée"
 
+#. Empty state shown read-only in the Pictures field when a sense has no pictures
 #: src/lib/entry-editor/field-editors/PicturesEditor.svelte
 msgid "No pictures"
 msgstr ""
@@ -1566,11 +1571,13 @@ msgstr "En attente"
 msgid "Pick a Part of Speech"
 msgstr "Choisir une partie du discours"
 
+#. Two uses: (1) alt text for a picture image when no caption is available; (2) label on a currently-disabled "+ Picture" add button in the sense editor
 #: src/lib/entry-editor/field-editors/PictureImage.svelte
 #: src/lib/entry-editor/field-editors/PicturesEditor.svelte
 msgid "Picture"
 msgstr ""
 
+#. Sense-level field label in the entry editor for the FieldWorks Pictures field (attached images)
 #: src/lib/views/entity-config.ts
 msgid "Pictures"
 msgstr ""
@@ -1599,6 +1606,7 @@ msgstr "Avant-première"
 msgid "Preview not available"
 msgstr "Aperçu non disponible"
 
+#. Aria-label on the left-arrow button in the picture carousel; goes back to the previous image
 #: src/lib/entry-editor/field-editors/PictureCarousel.svelte
 msgid "Previous picture"
 msgstr ""
@@ -1978,6 +1986,10 @@ msgstr "Tâches"
 msgid "Tell us about a bug or issue you’ve encountered."
 msgstr "Parlez-nous d'un bug ou d'un problème que vous avez rencontré."
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "That picture has already been uploaded"
+msgstr ""
+
 #. View description
 #: src/project/browse/ViewPicker.svelte
 msgid "The *FieldWorks Classic* view, on the other hand, is designed for users who are familiar with *[FieldWorks Language Explorer](https://software.sil.org/fieldworks/)*."
@@ -2024,6 +2036,14 @@ msgstr "Cet {0} a été supprimé"
 msgid "This date # and this emoji # are snippets"
 msgstr "Cette date # et cet emoji # sont des extraits."
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "This picture is too large to upload. Try reducing the image resolution and uploading again."
+msgstr ""
+
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "This picture is too large to upload. Try saving it at a lower JPEG quality and uploading again."
+msgstr ""
+
 #. Help message
 #: src/lib/components/OpenInFieldWorksButton.svelte
 msgid "This project is now open in FieldWorks. To continue working in FieldWorks Lite, close the project in FieldWorks and click Reopen."
@@ -2092,6 +2112,7 @@ msgstr "Saisir une phrase exemplaire"
 msgid "Type:"
 msgstr "Type :"
 
+#. Generic error displayed in place of a picture when loading fails for an unspecified reason
 #: src/lib/entry-editor/field-editors/PictureImage.svelte
 #: src/lib/entry-editor/field-editors/PictureImage.svelte
 msgid "Unable to load image"
@@ -2102,6 +2123,10 @@ msgstr ""
 msgid "Unable to open in FieldWorks"
 msgstr "Impossible d'ouvrir FieldWorks"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Unable to upload the picture"
+msgstr ""
+
 #. Fallback value shown when author name or last-change date is unavailable (e.g., in activity history or the sync panel).
 #: src/lib/activity/ActivityFilter.svelte
 #: src/lib/activity/ActivityFilter.svelte
@@ -2197,6 +2222,10 @@ msgstr "La mise à jour a été désactivée par les paramètres d'autorisation.
 msgid "Updates"
 msgstr "Mises à jour"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Uploading pictures is not supported here"
+msgstr ""
+
 #. Field label
 #: src/lib/views/entity-config.ts
 msgid "Uses components as"
diff --git a/frontend/viewer/src/locales/id.po b/frontend/viewer/src/locales/id.po
index 530f8daede..19c546a124 100644
--- a/frontend/viewer/src/locales/id.po
+++ b/frontend/viewer/src/locales/id.po
@@ -990,6 +990,8 @@ msgstr "Arti Singkat"
 msgid "Go to {0}"
 msgstr "Buka {0}"
 
+#. Aria-label on a carousel dot button below the picture; navigates to a specific picture
+#. {0} = 1-based picture number (e.g., "Go to picture 2")
 #: src/lib/entry-editor/field-editors/PictureCarousel.svelte
 msgid "Go to picture {0}"
 msgstr ""
@@ -1043,6 +1045,7 @@ msgstr "Saya tidak melihat proyek saya"
 msgid "I understand that this can't be undone"
 msgstr "Saya memahami bahwa hal ini tidak dapat dibatalkan"
 
+#. Error displayed in place of a picture when the media file is missing from local storage
 #: src/lib/entry-editor/field-editors/PictureImage.svelte
 msgid "Image not found"
 msgstr ""
@@ -1328,6 +1331,7 @@ msgstr ""
 msgid "Next"
 msgstr "Berikutnya"
 
+#. Aria-label on the right-arrow button in the picture carousel; advances to the next image
 #: src/lib/entry-editor/field-editors/PictureCarousel.svelte
 msgid "Next picture"
 msgstr ""
@@ -1386,6 +1390,7 @@ msgstr "Tidak ada barang yang ditemukan"
 msgid "No new data"
 msgstr "Tidak ada data baru"
 
+#. Empty state shown read-only in the Pictures field when a sense has no pictures
 #: src/lib/entry-editor/field-editors/PicturesEditor.svelte
 msgid "No pictures"
 msgstr ""
@@ -1566,11 +1571,13 @@ msgstr "Tertunda"
 msgid "Pick a Part of Speech"
 msgstr "Pilih Bagian dari Pidato"
 
+#. Two uses: (1) alt text for a picture image when no caption is available; (2) label on a currently-disabled "+ Picture" add button in the sense editor
 #: src/lib/entry-editor/field-editors/PictureImage.svelte
 #: src/lib/entry-editor/field-editors/PicturesEditor.svelte
 msgid "Picture"
 msgstr ""
 
+#. Sense-level field label in the entry editor for the FieldWorks Pictures field (attached images)
 #: src/lib/views/entity-config.ts
 msgid "Pictures"
 msgstr ""
@@ -1599,6 +1606,7 @@ msgstr "Pratinjau"
 msgid "Preview not available"
 msgstr "Pratinjau tidak tersedia"
 
+#. Aria-label on the left-arrow button in the picture carousel; goes back to the previous image
 #: src/lib/entry-editor/field-editors/PictureCarousel.svelte
 msgid "Previous picture"
 msgstr ""
@@ -1978,6 +1986,10 @@ msgstr "Tugas"
 msgid "Tell us about a bug or issue you’ve encountered."
 msgstr "Beritahu kami tentang bug atau masalah yang Anda temui."
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "That picture has already been uploaded"
+msgstr ""
+
 #. View description
 #: src/project/browse/ViewPicker.svelte
 msgid "The *FieldWorks Classic* view, on the other hand, is designed for users who are familiar with *[FieldWorks Language Explorer](https://software.sil.org/fieldworks/)*."
@@ -2024,6 +2036,14 @@ msgstr "{0} ini telah dihapus"
 msgid "This date # and this emoji # are snippets"
 msgstr "Tanggal ini # dan emoji ini # adalah cuplikan"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "This picture is too large to upload. Try reducing the image resolution and uploading again."
+msgstr ""
+
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "This picture is too large to upload. Try saving it at a lower JPEG quality and uploading again."
+msgstr ""
+
 #. Help message
 #: src/lib/components/OpenInFieldWorksButton.svelte
 msgid "This project is now open in FieldWorks. To continue working in FieldWorks Lite, close the project in FieldWorks and click Reopen."
@@ -2092,6 +2112,7 @@ msgstr "Ketik contoh kalimat"
 msgid "Type:"
 msgstr "Ketik:"
 
+#. Generic error displayed in place of a picture when loading fails for an unspecified reason
 #: src/lib/entry-editor/field-editors/PictureImage.svelte
 #: src/lib/entry-editor/field-editors/PictureImage.svelte
 msgid "Unable to load image"
@@ -2102,6 +2123,10 @@ msgstr ""
 msgid "Unable to open in FieldWorks"
 msgstr "Tidak dapat dibuka di FieldWorks"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Unable to upload the picture"
+msgstr ""
+
 #. Fallback value shown when author name or last-change date is unavailable (e.g., in activity history or the sync panel).
 #: src/lib/activity/ActivityFilter.svelte
 #: src/lib/activity/ActivityFilter.svelte
@@ -2197,6 +2222,10 @@ msgstr "Pembaruan ditolak oleh pengaturan izin."
 msgid "Updates"
 msgstr "Pembaruan"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Uploading pictures is not supported here"
+msgstr ""
+
 #. Field label
 #: src/lib/views/entity-config.ts
 msgid "Uses components as"
diff --git a/frontend/viewer/src/locales/ko.po b/frontend/viewer/src/locales/ko.po
index 312c2e5ebe..946b3891bc 100644
--- a/frontend/viewer/src/locales/ko.po
+++ b/frontend/viewer/src/locales/ko.po
@@ -990,6 +990,8 @@ msgstr "광택"
 msgid "Go to {0}"
 msgstr "{0}으로 이동"
 
+#. Aria-label on a carousel dot button below the picture; navigates to a specific picture
+#. {0} = 1-based picture number (e.g., "Go to picture 2")
 #: src/lib/entry-editor/field-editors/PictureCarousel.svelte
 msgid "Go to picture {0}"
 msgstr ""
@@ -1043,6 +1045,7 @@ msgstr "내 프로젝트가 보이지 않습니다."
 msgid "I understand that this can't be undone"
 msgstr "이 작업은 되돌릴 수 없다는 것을 이해합니다."
 
+#. Error displayed in place of a picture when the media file is missing from local storage
 #: src/lib/entry-editor/field-editors/PictureImage.svelte
 msgid "Image not found"
 msgstr ""
@@ -1328,6 +1331,7 @@ msgstr ""
 msgid "Next"
 msgstr "다음"
 
+#. Aria-label on the right-arrow button in the picture carousel; advances to the next image
 #: src/lib/entry-editor/field-editors/PictureCarousel.svelte
 msgid "Next picture"
 msgstr ""
@@ -1386,6 +1390,7 @@ msgstr "항목을 찾을 수 없습니다."
 msgid "No new data"
 msgstr "새 데이터 없음"
 
+#. Empty state shown read-only in the Pictures field when a sense has no pictures
 #: src/lib/entry-editor/field-editors/PicturesEditor.svelte
 msgid "No pictures"
 msgstr ""
@@ -1566,11 +1571,13 @@ msgstr "보류 중"
 msgid "Pick a Part of Speech"
 msgstr "품사 선택"
 
+#. Two uses: (1) alt text for a picture image when no caption is available; (2) label on a currently-disabled "+ Picture" add button in the sense editor
 #: src/lib/entry-editor/field-editors/PictureImage.svelte
 #: src/lib/entry-editor/field-editors/PicturesEditor.svelte
 msgid "Picture"
 msgstr ""
 
+#. Sense-level field label in the entry editor for the FieldWorks Pictures field (attached images)
 #: src/lib/views/entity-config.ts
 msgid "Pictures"
 msgstr ""
@@ -1599,6 +1606,7 @@ msgstr "미리 보기"
 msgid "Preview not available"
 msgstr "미리 보기를 사용할 수 없습니다."
 
+#. Aria-label on the left-arrow button in the picture carousel; goes back to the previous image
 #: src/lib/entry-editor/field-editors/PictureCarousel.svelte
 msgid "Previous picture"
 msgstr ""
@@ -1978,6 +1986,10 @@ msgstr "작업"
 msgid "Tell us about a bug or issue you’ve encountered."
 msgstr "발생한 버그나 문제에 대해 알려주세요."
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "That picture has already been uploaded"
+msgstr ""
+
 #. View description
 #: src/project/browse/ViewPicker.svelte
 msgid "The *FieldWorks Classic* view, on the other hand, is designed for users who are familiar with *[FieldWorks Language Explorer](https://software.sil.org/fieldworks/)*."
@@ -2024,6 +2036,14 @@ msgstr "이 {0} 삭제됨"
 msgid "This date # and this emoji # are snippets"
 msgstr "이 날짜 #와 이 이모티콘 #은 스니펫입니다."
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "This picture is too large to upload. Try reducing the image resolution and uploading again."
+msgstr ""
+
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "This picture is too large to upload. Try saving it at a lower JPEG quality and uploading again."
+msgstr ""
+
 #. Help message
 #: src/lib/components/OpenInFieldWorksButton.svelte
 msgid "This project is now open in FieldWorks. To continue working in FieldWorks Lite, close the project in FieldWorks and click Reopen."
@@ -2092,6 +2112,7 @@ msgstr "예제 문장을 입력합니다."
 msgid "Type:"
 msgstr "유형:"
 
+#. Generic error displayed in place of a picture when loading fails for an unspecified reason
 #: src/lib/entry-editor/field-editors/PictureImage.svelte
 #: src/lib/entry-editor/field-editors/PictureImage.svelte
 msgid "Unable to load image"
@@ -2102,6 +2123,10 @@ msgstr ""
 msgid "Unable to open in FieldWorks"
 msgstr "FieldWorks에서 열 수 없음"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Unable to upload the picture"
+msgstr ""
+
 #. Fallback value shown when author name or last-change date is unavailable (e.g., in activity history or the sync panel).
 #: src/lib/activity/ActivityFilter.svelte
 #: src/lib/activity/ActivityFilter.svelte
@@ -2197,6 +2222,10 @@ msgstr "권한 설정에 의해 업데이트가 허용되지 않았습니다."
 msgid "Updates"
 msgstr "업데이트"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Uploading pictures is not supported here"
+msgstr ""
+
 #. Field label
 #: src/lib/views/entity-config.ts
 msgid "Uses components as"
diff --git a/frontend/viewer/src/locales/ms.po b/frontend/viewer/src/locales/ms.po
index 97d9ba4344..17605d3d58 100644
--- a/frontend/viewer/src/locales/ms.po
+++ b/frontend/viewer/src/locales/ms.po
@@ -990,6 +990,8 @@ msgstr "Glos"
 msgid "Go to {0}"
 msgstr "Pergi ke {0}"
 
+#. Aria-label on a carousel dot button below the picture; navigates to a specific picture
+#. {0} = 1-based picture number (e.g., "Go to picture 2")
 #: src/lib/entry-editor/field-editors/PictureCarousel.svelte
 msgid "Go to picture {0}"
 msgstr ""
@@ -1043,6 +1045,7 @@ msgstr "Saya tidak nampak projek saya"
 msgid "I understand that this can't be undone"
 msgstr "Saya faham bahawa ini tidak boleh dibuat asal"
 
+#. Error displayed in place of a picture when the media file is missing from local storage
 #: src/lib/entry-editor/field-editors/PictureImage.svelte
 msgid "Image not found"
 msgstr ""
@@ -1328,6 +1331,7 @@ msgstr ""
 msgid "Next"
 msgstr "Seterusnya"
 
+#. Aria-label on the right-arrow button in the picture carousel; advances to the next image
 #: src/lib/entry-editor/field-editors/PictureCarousel.svelte
 msgid "Next picture"
 msgstr ""
@@ -1386,6 +1390,7 @@ msgstr "Tiada item ditemui"
 msgid "No new data"
 msgstr "Tiada data baru"
 
+#. Empty state shown read-only in the Pictures field when a sense has no pictures
 #: src/lib/entry-editor/field-editors/PicturesEditor.svelte
 msgid "No pictures"
 msgstr ""
@@ -1566,11 +1571,13 @@ msgstr "Tertunda"
 msgid "Pick a Part of Speech"
 msgstr "Pilih Bahagian Pertuturan"
 
+#. Two uses: (1) alt text for a picture image when no caption is available; (2) label on a currently-disabled "+ Picture" add button in the sense editor
 #: src/lib/entry-editor/field-editors/PictureImage.svelte
 #: src/lib/entry-editor/field-editors/PicturesEditor.svelte
 msgid "Picture"
 msgstr ""
 
+#. Sense-level field label in the entry editor for the FieldWorks Pictures field (attached images)
 #: src/lib/views/entity-config.ts
 msgid "Pictures"
 msgstr ""
@@ -1599,6 +1606,7 @@ msgstr "Pratonton"
 msgid "Preview not available"
 msgstr "Pratonton tidak tersedia"
 
+#. Aria-label on the left-arrow button in the picture carousel; goes back to the previous image
 #: src/lib/entry-editor/field-editors/PictureCarousel.svelte
 msgid "Previous picture"
 msgstr ""
@@ -1978,6 +1986,10 @@ msgstr "Tugasan"
 msgid "Tell us about a bug or issue you’ve encountered."
 msgstr "Beritahu kami mengenai pepijat atau isu yang anda temui."
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "That picture has already been uploaded"
+msgstr ""
+
 #. View description
 #: src/project/browse/ViewPicker.svelte
 msgid "The *FieldWorks Classic* view, on the other hand, is designed for users who are familiar with *[FieldWorks Language Explorer](https://software.sil.org/fieldworks/)*."
@@ -2024,6 +2036,14 @@ msgstr "Item {0} telah dipadam"
 msgid "This date # and this emoji # are snippets"
 msgstr "Tarikh ini # dan emoji ini # adalah coretan"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "This picture is too large to upload. Try reducing the image resolution and uploading again."
+msgstr ""
+
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "This picture is too large to upload. Try saving it at a lower JPEG quality and uploading again."
+msgstr ""
+
 #. Help message
 #: src/lib/components/OpenInFieldWorksButton.svelte
 msgid "This project is now open in FieldWorks. To continue working in FieldWorks Lite, close the project in FieldWorks and click Reopen."
@@ -2092,6 +2112,7 @@ msgstr "Taip ayat contoh"
 msgid "Type:"
 msgstr "Jenis:"
 
+#. Generic error displayed in place of a picture when loading fails for an unspecified reason
 #: src/lib/entry-editor/field-editors/PictureImage.svelte
 #: src/lib/entry-editor/field-editors/PictureImage.svelte
 msgid "Unable to load image"
@@ -2102,6 +2123,10 @@ msgstr ""
 msgid "Unable to open in FieldWorks"
 msgstr "Tidak dapat membuka dalam FieldWorks"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Unable to upload the picture"
+msgstr ""
+
 #. Fallback value shown when author name or last-change date is unavailable (e.g., in activity history or the sync panel).
 #: src/lib/activity/ActivityFilter.svelte
 #: src/lib/activity/ActivityFilter.svelte
@@ -2197,6 +2222,10 @@ msgstr "Kemas kini tidak dibenarkan oleh tetapan kebenaran."
 msgid "Updates"
 msgstr "Kemas kini"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Uploading pictures is not supported here"
+msgstr ""
+
 #. Field label
 #: src/lib/views/entity-config.ts
 msgid "Uses components as"
diff --git a/frontend/viewer/src/locales/sw.po b/frontend/viewer/src/locales/sw.po
index b8dc19aa1c..c5970a19b8 100644
--- a/frontend/viewer/src/locales/sw.po
+++ b/frontend/viewer/src/locales/sw.po
@@ -990,6 +990,8 @@ msgstr "Glosi"
 msgid "Go to {0}"
 msgstr "Nenda kwa {0}"
 
+#. Aria-label on a carousel dot button below the picture; navigates to a specific picture
+#. {0} = 1-based picture number (e.g., "Go to picture 2")
 #: src/lib/entry-editor/field-editors/PictureCarousel.svelte
 msgid "Go to picture {0}"
 msgstr ""
@@ -1043,6 +1045,7 @@ msgstr "Siioni mradi wangu"
 msgid "I understand that this can't be undone"
 msgstr "Ninaelewa kuwa hii haiwezi kurudishwa nyuma"
 
+#. Error displayed in place of a picture when the media file is missing from local storage
 #: src/lib/entry-editor/field-editors/PictureImage.svelte
 msgid "Image not found"
 msgstr ""
@@ -1328,6 +1331,7 @@ msgstr ""
 msgid "Next"
 msgstr "Inayofuata"
 
+#. Aria-label on the right-arrow button in the picture carousel; advances to the next image
 #: src/lib/entry-editor/field-editors/PictureCarousel.svelte
 msgid "Next picture"
 msgstr ""
@@ -1386,6 +1390,7 @@ msgstr "Hakuna kitu kilichopatikana"
 msgid "No new data"
 msgstr "Hakuna data mpya"
 
+#. Empty state shown read-only in the Pictures field when a sense has no pictures
 #: src/lib/entry-editor/field-editors/PicturesEditor.svelte
 msgid "No pictures"
 msgstr ""
@@ -1566,11 +1571,13 @@ msgstr "Inasubiri"
 msgid "Pick a Part of Speech"
 msgstr "Chagua Sehemu ya Mazungumzo"
 
+#. Two uses: (1) alt text for a picture image when no caption is available; (2) label on a currently-disabled "+ Picture" add button in the sense editor
 #: src/lib/entry-editor/field-editors/PictureImage.svelte
 #: src/lib/entry-editor/field-editors/PicturesEditor.svelte
 msgid "Picture"
 msgstr ""
 
+#. Sense-level field label in the entry editor for the FieldWorks Pictures field (attached images)
 #: src/lib/views/entity-config.ts
 msgid "Pictures"
 msgstr ""
@@ -1599,6 +1606,7 @@ msgstr "Hakiki"
 msgid "Preview not available"
 msgstr "Muonekano awali haupatikani"
 
+#. Aria-label on the left-arrow button in the picture carousel; goes back to the previous image
 #: src/lib/entry-editor/field-editors/PictureCarousel.svelte
 msgid "Previous picture"
 msgstr ""
@@ -1978,6 +1986,10 @@ msgstr "Jukumu"
 msgid "Tell us about a bug or issue you’ve encountered."
 msgstr "Tuambie kuhusu kosa au matatizo uliyokabiliwa."
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "That picture has already been uploaded"
+msgstr ""
+
 #. View description
 #: src/project/browse/ViewPicker.svelte
 msgid "The *FieldWorks Classic* view, on the other hand, is designed for users who are familiar with *[FieldWorks Language Explorer](https://software.sil.org/fieldworks/)*."
@@ -2024,6 +2036,14 @@ msgstr "Hili {0} limefutwa"
 msgid "This date # and this emoji # are snippets"
 msgstr "Tarehe hii # na emoji hii # ni vigezo"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "This picture is too large to upload. Try reducing the image resolution and uploading again."
+msgstr ""
+
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "This picture is too large to upload. Try saving it at a lower JPEG quality and uploading again."
+msgstr ""
+
 #. Help message
 #: src/lib/components/OpenInFieldWorksButton.svelte
 msgid "This project is now open in FieldWorks. To continue working in FieldWorks Lite, close the project in FieldWorks and click Reopen."
@@ -2092,6 +2112,7 @@ msgstr "Andika sentensi ya mfano"
 msgid "Type:"
 msgstr "Aina:"
 
+#. Generic error displayed in place of a picture when loading fails for an unspecified reason
 #: src/lib/entry-editor/field-editors/PictureImage.svelte
 #: src/lib/entry-editor/field-editors/PictureImage.svelte
 msgid "Unable to load image"
@@ -2102,6 +2123,10 @@ msgstr ""
 msgid "Unable to open in FieldWorks"
 msgstr "Haiwezi kufungua katika FieldWorks"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Unable to upload the picture"
+msgstr ""
+
 #. Fallback value shown when author name or last-change date is unavailable (e.g., in activity history or the sync panel).
 #: src/lib/activity/ActivityFilter.svelte
 #: src/lib/activity/ActivityFilter.svelte
@@ -2197,6 +2222,10 @@ msgstr "Sasisho halikuruhusiwa na mipangilio ya ruhusa."
 msgid "Updates"
 msgstr "Masasisho"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Uploading pictures is not supported here"
+msgstr ""
+
 #. Field label
 #: src/lib/views/entity-config.ts
 msgid "Uses components as"
diff --git a/frontend/viewer/src/locales/vi.po b/frontend/viewer/src/locales/vi.po
index f9c690cefe..c349661b97 100644
--- a/frontend/viewer/src/locales/vi.po
+++ b/frontend/viewer/src/locales/vi.po
@@ -990,6 +990,8 @@ msgstr "Ghi chú"
 msgid "Go to {0}"
 msgstr "Đi tới {0}"
 
+#. Aria-label on a carousel dot button below the picture; navigates to a specific picture
+#. {0} = 1-based picture number (e.g., "Go to picture 2")
 #: src/lib/entry-editor/field-editors/PictureCarousel.svelte
 msgid "Go to picture {0}"
 msgstr ""
@@ -1043,6 +1045,7 @@ msgstr "Tôi không thấy dự án của mình"
 msgid "I understand that this can't be undone"
 msgstr "Tôi hiểu rằng điều này không thể hoàn tác"
 
+#. Error displayed in place of a picture when the media file is missing from local storage
 #: src/lib/entry-editor/field-editors/PictureImage.svelte
 msgid "Image not found"
 msgstr ""
@@ -1328,6 +1331,7 @@ msgstr ""
 msgid "Next"
 msgstr "Tiếp theo"
 
+#. Aria-label on the right-arrow button in the picture carousel; advances to the next image
 #: src/lib/entry-editor/field-editors/PictureCarousel.svelte
 msgid "Next picture"
 msgstr ""
@@ -1386,6 +1390,7 @@ msgstr "Không tìm thấy mục nào"
 msgid "No new data"
 msgstr "Không có dữ liệu mới"
 
+#. Empty state shown read-only in the Pictures field when a sense has no pictures
 #: src/lib/entry-editor/field-editors/PicturesEditor.svelte
 msgid "No pictures"
 msgstr ""
@@ -1566,11 +1571,13 @@ msgstr "Đang chờ xử lý"
 msgid "Pick a Part of Speech"
 msgstr "Chọn một Loại từ"
 
+#. Two uses: (1) alt text for a picture image when no caption is available; (2) label on a currently-disabled "+ Picture" add button in the sense editor
 #: src/lib/entry-editor/field-editors/PictureImage.svelte
 #: src/lib/entry-editor/field-editors/PicturesEditor.svelte
 msgid "Picture"
 msgstr ""
 
+#. Sense-level field label in the entry editor for the FieldWorks Pictures field (attached images)
 #: src/lib/views/entity-config.ts
 msgid "Pictures"
 msgstr ""
@@ -1599,6 +1606,7 @@ msgstr "Xem trước"
 msgid "Preview not available"
 msgstr "Xem trước không khả dụng"
 
+#. Aria-label on the left-arrow button in the picture carousel; goes back to the previous image
 #: src/lib/entry-editor/field-editors/PictureCarousel.svelte
 msgid "Previous picture"
 msgstr ""
@@ -1978,6 +1986,10 @@ msgstr "Nhiệm vụ"
 msgid "Tell us about a bug or issue you’ve encountered."
 msgstr "Hãy cho chúng tôi biết về lỗi hoặc vấn đề bạn gặp phải."
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "That picture has already been uploaded"
+msgstr ""
+
 #. View description
 #: src/project/browse/ViewPicker.svelte
 msgid "The *FieldWorks Classic* view, on the other hand, is designed for users who are familiar with *[FieldWorks Language Explorer](https://software.sil.org/fieldworks/)*."
@@ -2024,6 +2036,14 @@ msgstr "Đường dẫn này {0} đã bị xóa."
 msgid "This date # and this emoji # are snippets"
 msgstr "Ngày này # và biểu tượng cảm xúc này # là đoạn trích"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "This picture is too large to upload. Try reducing the image resolution and uploading again."
+msgstr ""
+
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "This picture is too large to upload. Try saving it at a lower JPEG quality and uploading again."
+msgstr ""
+
 #. Help message
 #: src/lib/components/OpenInFieldWorksButton.svelte
 msgid "This project is now open in FieldWorks. To continue working in FieldWorks Lite, close the project in FieldWorks and click Reopen."
@@ -2092,6 +2112,7 @@ msgstr "Gõ một câu ví dụ"
 msgid "Type:"
 msgstr "Loại:"
 
+#. Generic error displayed in place of a picture when loading fails for an unspecified reason
 #: src/lib/entry-editor/field-editors/PictureImage.svelte
 #: src/lib/entry-editor/field-editors/PictureImage.svelte
 msgid "Unable to load image"
@@ -2102,6 +2123,10 @@ msgstr ""
 msgid "Unable to open in FieldWorks"
 msgstr "Không thể mở trong FieldWorks"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Unable to upload the picture"
+msgstr ""
+
 #. Fallback value shown when author name or last-change date is unavailable (e.g., in activity history or the sync panel).
 #: src/lib/activity/ActivityFilter.svelte
 #: src/lib/activity/ActivityFilter.svelte
@@ -2197,6 +2222,10 @@ msgstr "Cập nhật đã bị từ chối do cài đặt quyền truy cập."
 msgid "Updates"
 msgstr "Cập nhật"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Uploading pictures is not supported here"
+msgstr ""
+
 #. Field label
 #: src/lib/views/entity-config.ts
 msgid "Uses components as"
diff --git a/frontend/viewer/src/project/demo/in-memory-demo-api.ts b/frontend/viewer/src/project/demo/in-memory-demo-api.ts
index bbaa214cb0..360a571417 100644
--- a/frontend/viewer/src/project/demo/in-memory-demo-api.ts
+++ b/frontend/viewer/src/project/demo/in-memory-demo-api.ts
@@ -13,6 +13,7 @@ import {
   type IMiniLcmJsInvokable,
   type IMorphType,
   type IPartOfSpeech,
+  type IPicture,
   type IProjectModel,
   type IPublication,
   type IQueryOptions,
@@ -29,6 +30,7 @@ import {
 import {demoPictureSvgs, entries, morphTypes, partsOfSpeech, projectName, writingSystems} from './demo-entry-data';
 
 import {WritingSystemService} from '../data/writing-system-service.svelte';
+import {randomId} from '$lib/utils';
 import {FwLitePlatform} from '$lib/dotnet-types/generated-types/FwLiteShared/FwLitePlatform';
 import {delay} from '$lib/utils/time';
 import {initProjectContext, type ProjectContext} from '$project/project-context.svelte';
@@ -50,6 +52,9 @@ function pickWs(ws: string, defaultWs: string): string {
   return ws === 'default' ? defaultWs : ws;
 }
 
+/** The demo plays the role of the server; it mirrors the backend's 10 MB upload limit. */
+const DEMO_FILE_SIZE_LIMIT = 10 * 1024 * 1024;
+
 const complexFormTypes = entries
   .flatMap(entry => entry.complexFormTypes)
   .filter((value, index, all) => all.findIndex(v2 => v2.id === value.id) === index);
@@ -380,6 +385,39 @@ export class InMemoryDemoApi implements IMiniLcmJsInvokable {
     return Promise.resolve();
   }
 
+  createPicture(entryGuid: string, senseGuid: string, picture: IPicture): Promise<IPicture> {
+    const entry = this._entries.find(e => e.id === entryGuid);
+    if (!entry) throw new Error(`Entry ${entryGuid} not found`);
+    const sense = entry.senses.find(s => s.id === senseGuid);
+    if (!sense) throw new Error(`Sense ${senseGuid} not found`);
+    // Generated demo senses may omit `pictures` entirely, so default it rather than spread undefined.
+    sense.pictures = [...(sense.pictures ?? []), picture];
+    this.#projectEventBus.notifyEntryUpdated(entry);
+    return Promise.resolve(picture);
+  }
+
+  updatePicture(entryGuid: string, senseGuid: string, _before: IPicture, after: IPicture): Promise<IPicture> {
+    const entry = this._entries.find(e => e.id === entryGuid);
+    if (!entry) throw new Error(`Entry ${entryGuid} not found`);
+    const sense = entry.senses.find(s => s.id === senseGuid);
+    if (!sense) throw new Error(`Sense ${senseGuid} not found`);
+    const index = (sense.pictures ?? []).findIndex(p => p.id === after.id);
+    if (index === -1) throw new Error(`Picture ${after.id} not found`);
+    sense.pictures.splice(index, 1, after);
+    this.#projectEventBus.notifyEntryUpdated(entry);
+    return Promise.resolve(after);
+  }
+
+  deletePicture(entryGuid: string, senseGuid: string, pictureGuid: string): Promise<void> {
+    const entry = this._entries.find(e => e.id === entryGuid);
+    if (!entry) throw new Error(`Entry ${entryGuid} not found`);
+    const sense = entry.senses.find(s => s.id === senseGuid);
+    if (!sense) throw new Error(`Sense ${senseGuid} not found`);
+    sense.pictures = (sense.pictures ?? []).filter(p => p.id !== pictureGuid);
+    this.#projectEventBus.notifyEntryUpdated(entry);
+    return Promise.resolve();
+  }
+
   createWritingSystem(_type: WritingSystemType, _writingSystem: IWritingSystem): Promise<IWritingSystem> {
     throw new Error('Method not implemented.');
   }
@@ -520,7 +558,22 @@ export class InMemoryDemoApi implements IMiniLcmJsInvokable {
     throw new Error('Method not implemented.');
   }
 
+  // Files uploaded during the demo session (e.g. via the "+ Picture" button), keyed by the
+  // mediaUri handed back from saveFile. Lets the demo round-trip an upload without a backend.
+  #uploadedFiles = new Map<string, Blob>();
+
   getFileStream(mediaUri: string): Promise<IReadFileResponseJs> {
+    const uploaded = this.#uploadedFiles.get(mediaUri);
+    if (uploaded) {
+      return Promise.resolve({
+        result: ReadFileResult.Success,
+        fileName: mediaUri.split('/').pop() ?? 'demo-upload',
+        stream: {
+          stream: () => Promise.resolve(uploaded.stream()),
+          arrayBuffer: () => uploaded.arrayBuffer(),
+        },
+      });
+    }
     const svg = demoPictureSvgs[mediaUri];
     if (!svg) return Promise.resolve({result: ReadFileResult.NotFound});
     const blob = new Blob([svg], {type: 'image/svg+xml'});
@@ -534,7 +587,17 @@ export class InMemoryDemoApi implements IMiniLcmJsInvokable {
     });
   }
 
-  saveFile(_streamReference: Blob | ArrayBuffer | Uint8Array, _metadata: ILcmFileMetadata): Promise<IUploadFileResponse> {
-    return Promise.resolve({result: UploadFileResult.NotSupported});
+  saveFile(streamReference: Blob | ArrayBuffer | Uint8Array, metadata: ILcmFileMetadata): Promise<IUploadFileResponse> {
+    const blob = streamReference instanceof Blob
+      ? streamReference
+      : new Blob([streamReference as BlobPart], {type: metadata.mimeType});
+    // The demo stands in for the server, so it enforces the same 10 MB limit the real
+    // backend does — exercising the client's TooBig handling without a backend.
+    if (blob.size > DEMO_FILE_SIZE_LIMIT) {
+      return Promise.resolve({result: UploadFileResult.TooBig});
+    }
+    const mediaUri = `demo-upload/${randomId()}`;
+    this.#uploadedFiles.set(mediaUri, blob);
+    return Promise.resolve({result: UploadFileResult.SavedLocally, mediaUri});
   }
 }
diff --git a/frontend/viewer/tests/sense-pictures.test.ts b/frontend/viewer/tests/sense-pictures.test.ts
index 018c2477d9..7ab5aaa2e9 100644
--- a/frontend/viewer/tests/sense-pictures.test.ts
+++ b/frontend/viewer/tests/sense-pictures.test.ts
@@ -1,10 +1,17 @@
 import {expect, test} from '@playwright/test';
 import {BrowsePage} from './browse-page';
 
+// A tiny valid 1x1 PNG, used to exercise the upload flow without a real image file.
+const ONE_PX_PNG = Buffer.from(
+  'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M8AAAMBAQDJ/pLvAAAAAElFTkSuQmCC',
+  'base64',
+);
+
 /**
  * Verifies the Sense "Pictures" field:
  * - a sense with pictures renders the image (loaded via getFileStream into a blob url) + caption
- * - a sense without pictures shows the disabled "+ Picture" add button
+ * - a sense without pictures shows the enabled "+ Picture" add button, and uploading a file
+ *   through it adds a picture that then renders
  *
  * The demo "nyumba" entry (allWsEntry) has two demo pictures on its sense; other demo
  * entries (e.g. "ambuka") have none.
@@ -29,7 +36,7 @@ test.describe('Sense pictures', () => {
     await expect(picturesField.getByText(/A traditional house|Uma casa tradicional/)).toBeVisible();
   });
 
-  test('shows a disabled "+ Picture" button for a sense with no pictures', async ({page}) => {
+  test('shows an enabled "+ Picture" button for a sense with no pictures', async ({page}) => {
     const browsePage = new BrowsePage(page);
     await browsePage.goto();
 
@@ -41,8 +48,31 @@ test.describe('Sense pictures', () => {
 
     const addButton = picturesField.getByRole('button', {name: 'Picture'});
     await expect(addButton).toBeVisible();
-    await expect(addButton).toBeDisabled();
-    // The add button is the empty state, so no image should be present.
+    await expect(addButton).toBeEnabled();
+    // The add button is the empty state, so no image should be present yet.
+    await expect(picturesField.locator('img')).toHaveCount(0);
+  });
+
+  test('uploading a picture through the "+ Picture" button adds and renders it', async ({page}) => {
+    const browsePage = new BrowsePage(page);
+    await browsePage.goto();
+
+    await browsePage.selectEntryByFilter('ambuka');
+
+    const picturesField = page.locator('[style*="grid-area: pictures"]').first();
+    await expect(picturesField).toBeVisible({timeout: 5000});
     await expect(picturesField.locator('img')).toHaveCount(0);
+
+    // Clicking the button opens the OS file picker; drive the hidden input directly instead.
+    await picturesField.locator('input[type="file"]').setInputFiles({
+      name: 'photo.png',
+      mimeType: 'image/png',
+      buffer: ONE_PX_PNG,
+    });
+
+    // The uploaded picture is created and re-loaded via getFileStream into a blob url.
+    const image = picturesField.locator('img').first();
+    await expect(image).toBeVisible({timeout: 5000});
+    await expect(image).toHaveAttribute('src', /^blob:/);
   });
 });

From 20b0789fd182f7d8f1397b711ce3736fb57bb04b Mon Sep 17 00:00:00 2001
From: Robin Munn <robin_munn@sil.org>
Date: Fri, 3 Jul 2026 12:16:54 +0700
Subject: [PATCH 07/32] Fix UNIQUE constraint crash when a picture is first
 loaded
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Loading a not-yet-cached media file could crash with
"SQLite Error 19: 'UNIQUE constraint failed: LocalResource.Id'".

LcmMediaService.GetFileStream checks GetLocalResource, and on a miss calls
ResourceService.DownloadResource, which inserts a LocalResource keyed by the
file id. When the UI requests the same file more than once before it is cached
(e.g. on a picture's first render), two calls both see no local resource and
both download and insert, so the second insert violates the primary key.

Coalesce concurrent downloads of the same file into one shared task, kept in a
ConcurrentDictionary keyed by file id: the first caller starts the download and
every concurrent caller awaits that same task, which is removed once it
completes. Two races are handled:

- GetOrAdd's factory overload can run more than once under contention (which
  would start the download twice), so the not-yet-started TaskCompletionSource
  is added via the atomic value overload — only the caller whose task is stored
  starts the download.
- A caller can miss in GetLocalResource just before another caller commits the
  download. The shared task re-checks GetLocalResource before downloading, and
  the entry is removed only after the download commits, so a later fresh task
  finds the committed resource instead of inserting a duplicate key.

Different files still download in parallel.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../LcmCrdt/MediaServer/LcmMediaService.cs    | 61 +++++++++++++++++--
 1 file changed, 56 insertions(+), 5 deletions(-)

diff --git a/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs b/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs
index d4cec3d0e0..063bc5aa1f 100644
--- a/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs
+++ b/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs
@@ -1,3 +1,4 @@
+using System.Collections.Concurrent;
 using Microsoft.Extensions.Options;
 using MiniLcm.Project;
 using Refit;
@@ -48,20 +49,27 @@ public async Task DeleteResource(Guid fileId)
     /// <param name="fileId">media file Id</param>
     /// <returns></returns>
     /// <exception cref="FileNotFoundException"></exception>
+    // Coalesces concurrent downloads of the same file into one shared task. Without this, two
+    // requests for a not-yet-cached file (e.g. the UI loading a picture more than once at first
+    // render) both see no local resource and both call DownloadResource, whose AddLocalResource
+    // inserts a LocalResource keyed by the file id — the second insert then fails with
+    // "UNIQUE constraint failed: LocalResource.Id". The first caller starts the task; others
+    // await the same one. Keyed by file id (a unique Guid), so different files still download in
+    // parallel.
+    private static readonly ConcurrentDictionary<Guid, Task<LocalResource>> DownloadTasks = new();
+
     public async Task<ReadFileResponse> GetFileStream(Guid fileId)
     {
         var localResource = await resourceService.GetLocalResource(fileId);
         if (localResource is null)
         {
             var connectionStatus = await httpClientProvider.ConnectionStatus();
-            if (connectionStatus == ConnectionStatus.Online)
-            {
-                localResource = await resourceService.DownloadResource(fileId, this);
-            }
-            else
+            if (connectionStatus != ConnectionStatus.Online)
             {
                 return new ReadFileResponse(ReadFileResult.Offline);
             }
+
+            localResource = await GetOrStartDownload(fileId);
         }
         //todo, consider trying to download the file again, maybe the cache was cleared
         if (!File.Exists(localResource.LocalPath))
@@ -69,6 +77,49 @@ public async Task<ReadFileResponse> GetFileStream(Guid fileId)
         return new(File.OpenRead(localResource.LocalPath), Path.GetFileName(localResource.LocalPath));
     }
 
+    private Task<LocalResource> GetOrStartDownload(Guid fileId)
+    {
+        // Use the *value* overload of GetOrAdd, not the factory overload: the factory can run more
+        // than once under contention (only one result is kept), which would start the download
+        // twice. Passing a not-yet-started TaskCompletionSource.Task lets exactly one caller — the
+        // one whose task actually got stored — kick off the download.
+        var tcs = new TaskCompletionSource<LocalResource>(TaskCreationOptions.RunContinuationsAsynchronously);
+        var task = DownloadTasks.GetOrAdd(fileId, tcs.Task);
+        if (task != tcs.Task)
+        {
+            // Another caller already owns the in-flight download; await theirs (our tcs is unused).
+            return task;
+        }
+        _ = RunDownloadAsync(fileId, tcs);
+        return task;
+    }
+
+    private async Task RunDownloadAsync(Guid fileId, TaskCompletionSource<LocalResource> tcs)
+    {
+        try
+        {
+            // Re-check before downloading: a previous download may have committed the LocalResource
+            // after our caller's GetLocalResource miss (this closes the race between
+            // GetLocalResource and DownloadResource). The task entry is removed only after this
+            // completes — i.e. after the download has committed — so any later caller that starts a
+            // fresh task will find the committed resource here and skip the download, rather than
+            // inserting a duplicate primary key.
+            var resource = await resourceService.GetLocalResource(fileId)
+                           ?? await resourceService.DownloadResource(fileId, this);
+            tcs.SetResult(resource);
+        }
+        catch (Exception e)
+        {
+            tcs.SetException(e);
+        }
+        finally
+        {
+            // Cached now, so future misses can start fresh; also prevents a failed download from
+            // being cached as a permanently-faulted task.
+            DownloadTasks.TryRemove(fileId, out _);
+        }
+    }
+
     private async Task<(Stream? stream, string? filename)> RequestMediaFile(Guid fileId)
     {
         var mediaClient = await MediaServerClient();

From c6d63ce18e32941895ef01162b955f1fa77b0ef6 Mon Sep 17 00:00:00 2001
From: Robin Munn <robin_munn@sil.org>
Date: Fri, 3 Jul 2026 14:19:05 +0700
Subject: [PATCH 08/32] Handle media download failures gracefully instead of
 throwing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

GetFileStream threw when a download failed (e.g. the media server/gateway
returns 504 Gateway Timeout, or the file is missing on the server). The
exception propagated all the way to the JS caller, so instead of the picture
UI showing an error state, an unhandled exception surfaced after a long wait.

Callers like PictureImage are written to expect failures via the ReadFileResult
enum, not exceptions. Catch download failures, log them, and return
ReadFileResult.Error with the message so the UI can show a graceful error
(and a later navigation can retry) rather than crashing.

Note: this does not make an unreachable/slow media server succeed — it only
makes the client fail gracefully.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../FwLite/LcmCrdt/MediaServer/LcmMediaService.cs  | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs b/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs
index 063bc5aa1f..d3f41477c9 100644
--- a/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs
+++ b/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs
@@ -69,7 +69,19 @@ public async Task<ReadFileResponse> GetFileStream(Guid fileId)
                 return new ReadFileResponse(ReadFileResult.Offline);
             }
 
-            localResource = await GetOrStartDownload(fileId);
+            try
+            {
+                localResource = await GetOrStartDownload(fileId);
+            }
+            catch (Exception e)
+            {
+                // The download can fail for reasons outside our control — the file may be missing
+                // on the server, or the media server/gateway may time out (504). Callers such as
+                // PictureImage expect failures via the result enum, not exceptions, so surface a
+                // graceful Error result (shown in the UI) instead of throwing an unhandled exception.
+                logger.LogError(e, "Failed to download media file {FileId}", fileId);
+                return new ReadFileResponse(ReadFileResult.Error, e.Message);
+            }
         }
         //todo, consider trying to download the file again, maybe the cache was cleared
         if (!File.Exists(localResource.LocalPath))

From 933415d88ac07dee51dbf79b34b5680cae666691 Mon Sep 17 00:00:00 2001
From: Robin Munn <robin_munn@sil.org>
Date: Fri, 3 Jul 2026 15:53:46 +0700
Subject: [PATCH 09/32] Retry transient media download failures
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A cold request to the proxied media endpoint (lexbox -> FwHeadless) can exceed
the proxy's timeout on the first touch — e.g. before the backend's code paths
are JIT-warmed — and come back as 504 (or 502/503) even though the backend then
warms up and serves the file in milliseconds. Previously the concurrent-download
bug masked this: several requests per file meant a later, warm one succeeded.
Now that downloads are coalesced into one, a single cold 504 was terminal.

Retry transient failures (408/502/503/504) up to 3 times with a short delay.
A failed fetch never reaches AddLocalResource, so this cannot reintroduce the
duplicate-key insert; non-transient failures still fail immediately.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../LcmCrdt/MediaServer/LcmMediaService.cs    | 36 ++++++++++++++++---
 1 file changed, 32 insertions(+), 4 deletions(-)

diff --git a/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs b/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs
index d3f41477c9..bc4ef96edc 100644
--- a/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs
+++ b/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs
@@ -1,4 +1,5 @@
 using System.Collections.Concurrent;
+using System.Net;
 using Microsoft.Extensions.Options;
 using MiniLcm.Project;
 using Refit;
@@ -132,15 +133,42 @@ private async Task RunDownloadAsync(Guid fileId, TaskCompletionSource<LocalResou
         }
     }
 
+    // Media files are proxied (lexbox -> FwHeadless). A cold request — e.g. the first one after the
+    // backend starts, before its code paths are JIT-warmed — can exceed the proxy's timeout and come
+    // back as 504 (or 502/503) even though the backend keeps working and warms up. Retrying a
+    // transient failure a few times usually hits the now-warm backend and succeeds. A failed fetch
+    // never reaches AddLocalResource, so retrying cannot reintroduce the duplicate-key insert.
+    private const int MaxDownloadAttempts = 3;
+    private static readonly HashSet<HttpStatusCode> TransientDownloadStatusCodes =
+    [
+        HttpStatusCode.RequestTimeout,      // 408
+        HttpStatusCode.BadGateway,          // 502
+        HttpStatusCode.ServiceUnavailable,  // 503
+        HttpStatusCode.GatewayTimeout,      // 504
+    ];
+
     private async Task<(Stream? stream, string? filename)> RequestMediaFile(Guid fileId)
     {
         var mediaClient = await MediaServerClient();
-        var response = await mediaClient.DownloadFile(fileId);
-        if (!response.IsSuccessStatusCode)
+        for (var attempt = 1; ; attempt++)
         {
-            throw new Exception($"Failed to download file {fileId}: {response.StatusCode} {response.ReasonPhrase}");
+            var response = await mediaClient.DownloadFile(fileId);
+            if (response.IsSuccessStatusCode)
+            {
+                return (await response.Content.ReadAsStreamAsync(), response.Content.Headers.ContentDisposition?.FileName?.Replace("\"", ""));
+            }
+
+            var statusCode = response.StatusCode;
+            var reasonPhrase = response.ReasonPhrase;
+            response.Dispose();
+
+            if (attempt >= MaxDownloadAttempts || !TransientDownloadStatusCodes.Contains(statusCode))
+            {
+                throw new Exception($"Failed to download file {fileId}: {statusCode} {reasonPhrase}");
+            }
+
+            await Task.Delay(TimeSpan.FromMilliseconds(200));
         }
-        return (await response.Content.ReadAsStreamAsync(), response.Content.Headers.ContentDisposition?.FileName?.Replace("\"", ""));
     }
 
     private async Task<IMediaServerClient> MediaServerClient()

From 056d35bb6f43165c6058e3c9d8cef2d2d86a6426 Mon Sep 17 00:00:00 2001
From: Robin Munn <robin_munn@sil.org>
Date: Fri, 3 Jul 2026 16:19:37 +0700
Subject: [PATCH 10/32] Tweak Picture field layout: left-justify image,
 right-align add button

- PictureImage: left-justify the image (and caption) instead of centering it.
- PicturesEditor: size the "+ Picture" button to its (translatable) label and
  right-align it, matching the "+ Component" button, rather than stretching to
  the full grid-column width.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../src/lib/entry-editor/field-editors/PictureImage.svelte   | 2 +-
 .../src/lib/entry-editor/field-editors/PicturesEditor.svelte | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/viewer/src/lib/entry-editor/field-editors/PictureImage.svelte b/frontend/viewer/src/lib/entry-editor/field-editors/PictureImage.svelte
index 79831ec3f5..776586dbac 100644
--- a/frontend/viewer/src/lib/entry-editor/field-editors/PictureImage.svelte
+++ b/frontend/viewer/src/lib/entry-editor/field-editors/PictureImage.svelte
@@ -63,7 +63,7 @@
   });
 </script>
 
-<figure class="flex flex-col items-center gap-1">
+<figure class="flex flex-col items-start gap-1">
   {#if state.status === 'loaded'}
     <img src={state.url} alt={caption || $t`Picture`} class="max-h-64 max-w-full rounded-md object-contain" />
   {:else if state.status === 'loading'}
diff --git a/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte b/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte
index b37a4bb980..377ff92b62 100644
--- a/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte
+++ b/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte
@@ -92,7 +92,10 @@
 {#if pictures.length > 0}
   <PictureCarousel {pictures} />
 {:else if !readonly}
-  <Button icon="i-mdi-plus" size="xs" loading={uploading} onclick={selectFile}>
+  <!-- justify-self-end: the field body is a grid, so this both sizes the button to its
+       (translatable) label instead of the full column width, and right-aligns it to match the
+       "+ Component" button. -->
+  <Button class="justify-self-end" icon="i-mdi-plus" size="xs" loading={uploading} onclick={selectFile}>
     {$t`Picture`}
   </Button>
   <!-- Hidden input drives the OS file picker; only JPG/PNG are offered. -->

From 1db16eae0ce22768ba48f95d4ac4f9e463660d72 Mon Sep 17 00:00:00 2001
From: Robin Munn <robin_munn@sil.org>
Date: Mon, 6 Jul 2026 09:45:17 +0700
Subject: [PATCH 11/32] Left-justify carousel controls under the picture

The picture carousel filled the full field width, so its centered prev/next/dot
controls floated far to the right of the left-justified picture. Shrink the
carousel to the width of its content (the picture) with w-fit, so it stays
left-justified and the centered controls land directly under the picture.
max-w-full keeps a very wide picture from overflowing the field.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../src/lib/entry-editor/field-editors/PictureCarousel.svelte   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/viewer/src/lib/entry-editor/field-editors/PictureCarousel.svelte b/frontend/viewer/src/lib/entry-editor/field-editors/PictureCarousel.svelte
index a87c6c7e49..d0a0e6831b 100644
--- a/frontend/viewer/src/lib/entry-editor/field-editors/PictureCarousel.svelte
+++ b/frontend/viewer/src/lib/entry-editor/field-editors/PictureCarousel.svelte
@@ -62,7 +62,7 @@
   });
 </script>
 
-<div class="flex flex-col gap-2">
+<div class="flex flex-col gap-2 w-fit max-w-full">
   <div class="overflow-hidden" use:emblaCarouselSvelte={{options: {loop: true}, plugins: []}} onemblaInit={onEmblaInit}>
     <div class="flex">
       {#each pictures as picture (picture.id)}

From a87236c35bb24a7b4502cc67800db67f687264c7 Mon Sep 17 00:00:00 2001
From: Robin Munn <rmunn@pobox.com>
Date: Mon, 6 Jul 2026 10:09:52 +0700
Subject: [PATCH 12/32] Left-justify carousel controls under the picture
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The picture carousel filled the full field width, so its centered
prev/next/dot controls floated far to the right of the left-justified picture.

When there are multiple pictures (the only time controls show), bound the
carousel to a fixed width and center each picture within it, so the centered
controls sit directly under the picture. Sizing the carousel to the picture
itself isn't possible here — embla lays its slides out in a flex row, so a
shrink-to-fit width would span the sum of all slides. A single picture is
unchanged (natural size, left-justified) since it has no controls to align.

A bounded box also has a definite width, so the loading placeholder fills it
instead of collapsing — the box stays put while the image loads (which can take
a second or two on slow mobile networks) rather than reflowing once it arrives.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../entry-editor/field-editors/PictureCarousel.svelte    | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/viewer/src/lib/entry-editor/field-editors/PictureCarousel.svelte b/frontend/viewer/src/lib/entry-editor/field-editors/PictureCarousel.svelte
index d0a0e6831b..be774ecff8 100644
--- a/frontend/viewer/src/lib/entry-editor/field-editors/PictureCarousel.svelte
+++ b/frontend/viewer/src/lib/entry-editor/field-editors/PictureCarousel.svelte
@@ -62,11 +62,16 @@
   });
 </script>
 
-<div class="flex flex-col gap-2 w-fit max-w-full">
+<!-- With multiple pictures we bound the carousel to a fixed width and center each picture in
+     it, so the centered controls below sit under the picture. (Sizing the carousel to the
+     picture itself isn't possible here: embla lays slides out in a flex row, so a shrink-to-fit
+     width would span the sum of all slides.) A single picture keeps its natural, left-justified
+     size since it has no controls to align. -->
+<div class={cn('flex flex-col gap-2', hasMultiple && 'max-w-md')}>
   <div class="overflow-hidden" use:emblaCarouselSvelte={{options: {loop: true}, plugins: []}} onemblaInit={onEmblaInit}>
     <div class="flex">
       {#each pictures as picture (picture.id)}
-        <div class="min-w-0 flex-[0_0_100%] px-2">
+        <div class={cn('min-w-0 flex-[0_0_100%] px-2', hasMultiple && 'flex justify-center')}>
           <PictureImage {picture} />
         </div>
       {/each}

From 71181ba69e1094f691c89e853650582a6f1962a6 Mon Sep 17 00:00:00 2001
From: Robin Munn <rmunn@pobox.com>
Date: Mon, 6 Jul 2026 13:06:08 +0700
Subject: [PATCH 13/32] Expose MovePicture to frontend API

For the future, if we decide to allow rearranging the order of pictures
in the FW Lite UI.
---
 .../FwLite/FwLiteShared/Services/MiniLcmJsInvokable.cs    | 8 ++++++++
 .../FwLiteShared/Services/IMiniLcmJsInvokable.ts          | 1 +
 2 files changed, 9 insertions(+)

diff --git a/backend/FwLite/FwLiteShared/Services/MiniLcmJsInvokable.cs b/backend/FwLite/FwLiteShared/Services/MiniLcmJsInvokable.cs
index 20d97a56c8..6ad632950c 100644
--- a/backend/FwLite/FwLiteShared/Services/MiniLcmJsInvokable.cs
+++ b/backend/FwLite/FwLiteShared/Services/MiniLcmJsInvokable.cs
@@ -398,6 +398,14 @@ public async Task<Picture> UpdatePicture(Guid entryId, Guid senseId, Picture bef
         return updatedPicture;
     }
 
+    [JSInvokable]
+    // previousPictureId and nextPictureId represent the target position, where the picture should end up after being moved
+    public async Task MovePicture(Guid entryId, Guid senseId, Guid pictureId, Guid? previousPictureId, Guid? nextPictureId)
+    {
+        await _wrappedApi.MovePicture(entryId, senseId, pictureId, new MiniLcm.SyncHelpers.BetweenPosition(previousPictureId, nextPictureId));
+        OnDataChanged();
+    }
+
     [JSInvokable]
     public async Task DeletePicture(Guid entryId, Guid senseId, Guid pictureId)
     {
diff --git a/frontend/viewer/src/lib/dotnet-types/generated-types/FwLiteShared/Services/IMiniLcmJsInvokable.ts b/frontend/viewer/src/lib/dotnet-types/generated-types/FwLiteShared/Services/IMiniLcmJsInvokable.ts
index 353eb390da..31fc331d67 100644
--- a/frontend/viewer/src/lib/dotnet-types/generated-types/FwLiteShared/Services/IMiniLcmJsInvokable.ts
+++ b/frontend/viewer/src/lib/dotnet-types/generated-types/FwLiteShared/Services/IMiniLcmJsInvokable.ts
@@ -78,6 +78,7 @@ export interface IMiniLcmJsInvokable
 	deleteExampleSentence(entryId: string, senseId: string, exampleSentenceId: string) : Promise<void>;
 	createPicture(entryId: string, senseId: string, picture: IPicture) : Promise<IPicture>;
 	updatePicture(entryId: string, senseId: string, before: IPicture, after: IPicture) : Promise<IPicture>;
+	movePicture(entryId: string, senseId: string, pictureId: string, previousPictureId: string, nextPictureId: string) : Promise<void>;
 	deletePicture(entryId: string, senseId: string, pictureId: string) : Promise<void>;
 	getFileStream(mediaUri: string) : Promise<IReadFileResponseJs>;
 	saveFile(streamReference: Blob | ArrayBuffer | Uint8Array, metadata: ILcmFileMetadata) : Promise<IUploadFileResponse>;

From 4ffd9f953ed7976e422673f6b2af7d9616c375ed Mon Sep 17 00:00:00 2001
From: Robin Munn <robin_munn@sil.org>
Date: Tue, 7 Jul 2026 14:19:24 +0700
Subject: [PATCH 14/32] Add Replace/Delete picture actions; keep "+ Picture"
 always visible

Previously the "+ Picture" button only appeared for a sense with no pictures.
Now the picture editor always offers "+ Picture" (so more can be added), and
when at least one picture exists it also offers "Replace Picture" and
"Delete Picture", both acting on the picture currently shown in the carousel.

- PictureCarousel exposes its current slide via a bindable `selectedIndex`, so
  PicturesEditor knows which picture Replace/Delete target.
- Replace uploads a new file (same saveFile flow as add) and calls
  UpdatePicture with the same picture id/order/caption but the new mediaUri.
- Delete confirms via the standard delete dialog, then calls DeletePicture.
- Both changes surface via the entry-changed event (the notify wrapper fires on
  Update/DeletePicture), which reloads the entry so the carousel updates.
- Demo API already implements update/deletePicture, so this round-trips offline.
- Playwright: cover the always-present add button, delete-with-confirmation, and
  in-place replace.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../field-editors/PictureCarousel.svelte      |   5 +-
 .../field-editors/PicturesEditor.svelte       | 182 ++++++++++++------
 frontend/viewer/src/locales/en.po             |   9 +
 frontend/viewer/src/locales/es.po             |   9 +
 frontend/viewer/src/locales/fr.po             |   9 +
 frontend/viewer/src/locales/id.po             |   9 +
 frontend/viewer/src/locales/ko.po             |   9 +
 frontend/viewer/src/locales/ms.po             |   9 +
 frontend/viewer/src/locales/sw.po             |   9 +
 frontend/viewer/src/locales/vi.po             |   9 +
 frontend/viewer/tests/sense-pictures.test.ts  |  56 +++++-
 11 files changed, 254 insertions(+), 61 deletions(-)

diff --git a/frontend/viewer/src/lib/entry-editor/field-editors/PictureCarousel.svelte b/frontend/viewer/src/lib/entry-editor/field-editors/PictureCarousel.svelte
index be774ecff8..f1fd1eeba3 100644
--- a/frontend/viewer/src/lib/entry-editor/field-editors/PictureCarousel.svelte
+++ b/frontend/viewer/src/lib/entry-editor/field-editors/PictureCarousel.svelte
@@ -23,11 +23,12 @@
 
   type Props = {
     pictures: IPicture[];
+    /** Index of the picture currently shown; bindable so the parent can act on the current picture. */
+    selectedIndex?: number;
   };
-  const {pictures}: Props = $props();
+  let {pictures, selectedIndex = $bindable(0)}: Props = $props();
 
   let emblaApi = $state<EmblaApi>();
-  let selectedIndex = $state(0);
 
   const hasMultiple = $derived(pictures.length > 1);
 
diff --git a/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte b/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte
index 377ff92b62..4d1e7d02cb 100644
--- a/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte
+++ b/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte
@@ -5,6 +5,7 @@
   import PictureCarousel from './PictureCarousel.svelte';
   import {t} from 'svelte-i18n-lingui';
   import {useLexboxApi} from '$lib/services/service-provider';
+  import {useDialogsService} from '$lib/services/dialogs-service';
   import {AppNotification} from '$lib/notifications/notifications';
   import {randomId} from '$lib/utils';
 
@@ -17,18 +18,27 @@
   const {value, entryId, senseId, readonly = false}: Props = $props();
 
   const api = useLexboxApi();
+  const dialogsService = useDialogsService();
 
   // `pictures` is typed as required, but older/legacy sense data may omit it entirely,
   // so guard against undefined rather than trusting the type at runtime.
   const pictures = $derived(value ?? []);
 
+  // The carousel reports which picture is currently shown; Replace/Delete act on it.
+  let selectedIndex = $state(0);
+  const currentPicture = $derived(pictures[selectedIndex]);
+
   // Formats the browser accepts and that the server supports for pictures.
   const ACCEPTED_TYPES = 'image/jpeg,image/png';
 
   let fileInputElement = $state<HTMLInputElement>();
-  let uploading = $state(false);
+  // Which operation is in flight (drives per-button spinners + disabling the whole group).
+  let busyAction = $state<'add' | 'replace' | 'delete' | null>(null);
+  // Whether the file picker that's about to open is for adding or replacing.
+  let pendingFileAction: 'add' | 'replace' = 'add';
 
-  function selectFile() {
+  function pickFile(action: 'add' | 'replace') {
+    pendingFileAction = action;
     fileInputElement?.click();
   }
 
@@ -37,45 +47,75 @@
     const file = target.files?.[0];
     // Reset the input so selecting the same file again re-triggers `change`.
     target.value = '';
-    if (file) void uploadPicture(file);
+    if (!file) return;
+    if (pendingFileAction === 'replace') void replacePicture(file);
+    else void addPicture(file);
   }
 
-  async function uploadPicture(file: File): Promise<void> {
-    uploading = true;
-    try {
-      // saveFile reports the outcome via `result` (not exceptions), so we branch on it.
-      // We intentionally do NOT pre-check the file size: the size limit lives on the
-      // server and may change, so we let the server decide and handle a `TooBig` result.
-      const response = await api.saveFile(file, {filename: file.name, mimeType: file.type});
-      switch (response.result) {
-        case UploadFileResult.SavedLocally:
-        case UploadFileResult.SavedToLexbox:
-          break;
-        case UploadFileResult.TooBig:
-          AppNotification.display(tooBigMessage(file), {type: 'error', timeout: 'long'});
-          return;
-        case UploadFileResult.NotSupported:
-          AppNotification.display($t`Uploading pictures is not supported here`, {type: 'error'});
-          return;
-        case UploadFileResult.AlreadyExists:
-          AppNotification.display($t`That picture has already been uploaded`, {type: 'error'});
-          return;
-        case UploadFileResult.Error:
-          AppNotification.display(response.errorMessage ?? $t`Unable to upload the picture`, {type: 'error'});
-          return;
-      }
-      if (!response.mediaUri) throw new Error('saveFile succeeded but returned no mediaUri');
+  // Uploads the chosen file and returns its mediaUri, or null if the upload was rejected
+  // (a notification is shown for the rejection). saveFile reports outcome via `result`, not
+  // exceptions, so we branch on it. We intentionally do NOT pre-check the file size: the size
+  // limit lives on the server and may change, so we let the server decide and handle `TooBig`.
+  async function uploadFile(file: File): Promise<string | null> {
+    const response = await api.saveFile(file, {filename: file.name, mimeType: file.type});
+    switch (response.result) {
+      case UploadFileResult.SavedLocally:
+      case UploadFileResult.SavedToLexbox:
+        break;
+      case UploadFileResult.TooBig:
+        AppNotification.display(tooBigMessage(file), {type: 'error', timeout: 'long'});
+        return null;
+      case UploadFileResult.NotSupported:
+        AppNotification.display($t`Uploading pictures is not supported here`, {type: 'error'});
+        return null;
+      case UploadFileResult.AlreadyExists:
+        AppNotification.display($t`That picture has already been uploaded`, {type: 'error'});
+        return null;
+      case UploadFileResult.Error:
+        AppNotification.display(response.errorMessage ?? $t`Unable to upload the picture`, {type: 'error'});
+        return null;
+    }
+    if (!response.mediaUri) throw new Error('saveFile succeeded but returned no mediaUri');
+    return response.mediaUri;
+  }
 
-      const picture: IPicture = {
-        id: randomId(),
-        order: pictures.length,
-        mediaUri: response.mediaUri,
-        caption: {},
-      };
+  async function addPicture(file: File): Promise<void> {
+    busyAction = 'add';
+    try {
+      const mediaUri = await uploadFile(file);
+      if (!mediaUri) return;
+      const picture: IPicture = {id: randomId(), order: pictures.length, mediaUri, caption: {}};
       await api.createPicture(entryId, senseId, picture);
-      // The created picture surfaces via the entry-changed event, which reloads the entry.
+      // The change surfaces via the entry-changed event, which reloads the entry.
+    } finally {
+      busyAction = null;
+    }
+  }
+
+  async function replacePicture(file: File): Promise<void> {
+    const before = currentPicture ? $state.snapshot(currentPicture) : undefined;
+    if (!before) return;
+    busyAction = 'replace';
+    try {
+      const mediaUri = await uploadFile(file);
+      if (!mediaUri) return;
+      // Keep the same picture (id, order, caption); only swap the image it points at.
+      const after: IPicture = {...before, mediaUri};
+      await api.updatePicture(entryId, senseId, before, after);
+    } finally {
+      busyAction = null;
+    }
+  }
+
+  async function deletePicture(): Promise<void> {
+    const target = currentPicture ? $state.snapshot(currentPicture) : undefined;
+    if (!target) return;
+    if (!(await dialogsService.promptDelete($t`Picture`))) return;
+    busyAction = 'delete';
+    try {
+      await api.deletePicture(entryId, senseId, target.id);
     } finally {
-      uploading = false;
+      busyAction = null;
     }
   }
 
@@ -89,25 +129,51 @@
   }
 </script>
 
-{#if pictures.length > 0}
-  <PictureCarousel {pictures} />
-{:else if !readonly}
-  <!-- justify-self-end: the field body is a grid, so this both sizes the button to its
-       (translatable) label instead of the full column width, and right-aligns it to match the
-       "+ Component" button. -->
-  <Button class="justify-self-end" icon="i-mdi-plus" size="xs" loading={uploading} onclick={selectFile}>
-    {$t`Picture`}
-  </Button>
-  <!-- Hidden input drives the OS file picker; only JPG/PNG are offered. -->
-  <input
-    bind:this={fileInputElement}
-    type="file"
-    accept={ACCEPTED_TYPES}
-    onchange={onFileSelected}
-    class="hidden"
-  />
-{:else}
-  <div class="text-muted-foreground p-1">
-    {$t`No pictures`}
-  </div>
-{/if}
+<div class="flex flex-col gap-2">
+  {#if pictures.length > 0}
+    <PictureCarousel {pictures} bind:selectedIndex />
+  {:else if readonly}
+    <div class="text-muted-foreground p-1">
+      {$t`No pictures`}
+    </div>
+  {/if}
+
+  {#if !readonly}
+    <!-- Buttons right-aligned to match the "+ Component" button style. -->
+    <div class="flex flex-wrap justify-end gap-2">
+      <Button icon="i-mdi-plus" size="xs" loading={busyAction === 'add'} disabled={busyAction !== null} onclick={() => pickFile('add')}>
+        {$t`Picture`}
+      </Button>
+      {#if pictures.length > 0}
+        <Button
+          icon="i-mdi-image-refresh"
+          size="xs"
+          variant="secondary"
+          loading={busyAction === 'replace'}
+          disabled={busyAction !== null}
+          onclick={() => pickFile('replace')}
+        >
+          {$t`Replace Picture`}
+        </Button>
+        <Button
+          icon="i-mdi-delete"
+          size="xs"
+          variant="destructive"
+          loading={busyAction === 'delete'}
+          disabled={busyAction !== null}
+          onclick={() => deletePicture()}
+        >
+          {$t`Delete Picture`}
+        </Button>
+      {/if}
+    </div>
+    <!-- Hidden input drives the OS file picker (shared by add + replace); only JPG/PNG offered. -->
+    <input
+      bind:this={fileInputElement}
+      type="file"
+      accept={ACCEPTED_TYPES}
+      onchange={onFileSelected}
+      class="hidden"
+    />
+  {/if}
+</div>
diff --git a/frontend/viewer/src/locales/en.po b/frontend/viewer/src/locales/en.po
index f7b4d8b829..0f2f20cf6e 100644
--- a/frontend/viewer/src/locales/en.po
+++ b/frontend/viewer/src/locales/en.po
@@ -567,6 +567,10 @@ msgstr "Delete {0}"
 msgid "Delete Entry"
 msgstr "Delete Entry"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Delete Picture"
+msgstr "Delete Picture"
+
 #. Relevant view: Lite
 #. Classic view equivalent: "Delete Entry"
 #. Menu option: opens confirmation dialog to permanently remove word
@@ -1569,6 +1573,7 @@ msgstr "Pick a Part of Speech"
 #. Two uses: (1) alt text for a picture image when no caption is available; (2) label on a currently-disabled "+ Picture" add button in the sense editor
 #: src/lib/entry-editor/field-editors/PictureImage.svelte
 #: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
 msgid "Picture"
 msgstr "Picture"
 
@@ -1691,6 +1696,10 @@ msgstr "Reopen"
 msgid "Replace audio"
 msgstr "Replace audio"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Replace Picture"
+msgstr "Replace Picture"
+
 #. Button text
 #: src/lib/about/FeedbackDialog.svelte
 msgid "Report a technical problem"
diff --git a/frontend/viewer/src/locales/es.po b/frontend/viewer/src/locales/es.po
index b4d574285c..97415fbef6 100644
--- a/frontend/viewer/src/locales/es.po
+++ b/frontend/viewer/src/locales/es.po
@@ -572,6 +572,10 @@ msgstr "Borrar {0}"
 msgid "Delete Entry"
 msgstr "Borrar entrada"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Delete Picture"
+msgstr ""
+
 #. Relevant view: Lite
 #. Classic view equivalent: "Delete Entry"
 #. Menu option: opens confirmation dialog to permanently remove word
@@ -1574,6 +1578,7 @@ msgstr "Escoge una parte de la voz"
 #. Two uses: (1) alt text for a picture image when no caption is available; (2) label on a currently-disabled "+ Picture" add button in the sense editor
 #: src/lib/entry-editor/field-editors/PictureImage.svelte
 #: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
 msgid "Picture"
 msgstr ""
 
@@ -1696,6 +1701,10 @@ msgstr "Vuelva a abrir"
 msgid "Replace audio"
 msgstr "Sustituir audio"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Replace Picture"
+msgstr ""
+
 #. Button text
 #: src/lib/about/FeedbackDialog.svelte
 msgid "Report a technical problem"
diff --git a/frontend/viewer/src/locales/fr.po b/frontend/viewer/src/locales/fr.po
index 700c5ccfb0..94ddc1752e 100644
--- a/frontend/viewer/src/locales/fr.po
+++ b/frontend/viewer/src/locales/fr.po
@@ -572,6 +572,10 @@ msgstr "Supprimer {0}"
 msgid "Delete Entry"
 msgstr "Supprimer l'entrée"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Delete Picture"
+msgstr ""
+
 #. Relevant view: Lite
 #. Classic view equivalent: "Delete Entry"
 #. Menu option: opens confirmation dialog to permanently remove word
@@ -1574,6 +1578,7 @@ msgstr "Choisir une partie du discours"
 #. Two uses: (1) alt text for a picture image when no caption is available; (2) label on a currently-disabled "+ Picture" add button in the sense editor
 #: src/lib/entry-editor/field-editors/PictureImage.svelte
 #: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
 msgid "Picture"
 msgstr ""
 
@@ -1696,6 +1701,10 @@ msgstr "Rouvrir"
 msgid "Replace audio"
 msgstr "Remplacer l'audio"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Replace Picture"
+msgstr ""
+
 #. Button text
 #: src/lib/about/FeedbackDialog.svelte
 msgid "Report a technical problem"
diff --git a/frontend/viewer/src/locales/id.po b/frontend/viewer/src/locales/id.po
index 19c546a124..24a1c440dd 100644
--- a/frontend/viewer/src/locales/id.po
+++ b/frontend/viewer/src/locales/id.po
@@ -572,6 +572,10 @@ msgstr "Hapus {0}"
 msgid "Delete Entry"
 msgstr "Hapus Entri"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Delete Picture"
+msgstr ""
+
 #. Relevant view: Lite
 #. Classic view equivalent: "Delete Entry"
 #. Menu option: opens confirmation dialog to permanently remove word
@@ -1574,6 +1578,7 @@ msgstr "Pilih Bagian dari Pidato"
 #. Two uses: (1) alt text for a picture image when no caption is available; (2) label on a currently-disabled "+ Picture" add button in the sense editor
 #: src/lib/entry-editor/field-editors/PictureImage.svelte
 #: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
 msgid "Picture"
 msgstr ""
 
@@ -1696,6 +1701,10 @@ msgstr "Buka kembali"
 msgid "Replace audio"
 msgstr "Mengganti audio"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Replace Picture"
+msgstr ""
+
 #. Button text
 #: src/lib/about/FeedbackDialog.svelte
 msgid "Report a technical problem"
diff --git a/frontend/viewer/src/locales/ko.po b/frontend/viewer/src/locales/ko.po
index 946b3891bc..c45db78ad8 100644
--- a/frontend/viewer/src/locales/ko.po
+++ b/frontend/viewer/src/locales/ko.po
@@ -572,6 +572,10 @@ msgstr "삭제 {0}"
 msgid "Delete Entry"
 msgstr "항목 삭제"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Delete Picture"
+msgstr ""
+
 #. Relevant view: Lite
 #. Classic view equivalent: "Delete Entry"
 #. Menu option: opens confirmation dialog to permanently remove word
@@ -1574,6 +1578,7 @@ msgstr "품사 선택"
 #. Two uses: (1) alt text for a picture image when no caption is available; (2) label on a currently-disabled "+ Picture" add button in the sense editor
 #: src/lib/entry-editor/field-editors/PictureImage.svelte
 #: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
 msgid "Picture"
 msgstr ""
 
@@ -1696,6 +1701,10 @@ msgstr "다시 열기"
 msgid "Replace audio"
 msgstr "오디오 교체"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Replace Picture"
+msgstr ""
+
 #. Button text
 #: src/lib/about/FeedbackDialog.svelte
 msgid "Report a technical problem"
diff --git a/frontend/viewer/src/locales/ms.po b/frontend/viewer/src/locales/ms.po
index 17605d3d58..37d70cd5da 100644
--- a/frontend/viewer/src/locales/ms.po
+++ b/frontend/viewer/src/locales/ms.po
@@ -572,6 +572,10 @@ msgstr "Hapus {0}"
 msgid "Delete Entry"
 msgstr "Padam Entri"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Delete Picture"
+msgstr ""
+
 #. Relevant view: Lite
 #. Classic view equivalent: "Delete Entry"
 #. Menu option: opens confirmation dialog to permanently remove word
@@ -1574,6 +1578,7 @@ msgstr "Pilih Bahagian Pertuturan"
 #. Two uses: (1) alt text for a picture image when no caption is available; (2) label on a currently-disabled "+ Picture" add button in the sense editor
 #: src/lib/entry-editor/field-editors/PictureImage.svelte
 #: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
 msgid "Picture"
 msgstr ""
 
@@ -1696,6 +1701,10 @@ msgstr "Buka semula"
 msgid "Replace audio"
 msgstr "Ganti audio"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Replace Picture"
+msgstr ""
+
 #. Button text
 #: src/lib/about/FeedbackDialog.svelte
 msgid "Report a technical problem"
diff --git a/frontend/viewer/src/locales/sw.po b/frontend/viewer/src/locales/sw.po
index c5970a19b8..dc2634c135 100644
--- a/frontend/viewer/src/locales/sw.po
+++ b/frontend/viewer/src/locales/sw.po
@@ -572,6 +572,10 @@ msgstr "Futa {0}"
 msgid "Delete Entry"
 msgstr "Futa ingizo"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Delete Picture"
+msgstr ""
+
 #. Relevant view: Lite
 #. Classic view equivalent: "Delete Entry"
 #. Menu option: opens confirmation dialog to permanently remove word
@@ -1574,6 +1578,7 @@ msgstr "Chagua Sehemu ya Mazungumzo"
 #. Two uses: (1) alt text for a picture image when no caption is available; (2) label on a currently-disabled "+ Picture" add button in the sense editor
 #: src/lib/entry-editor/field-editors/PictureImage.svelte
 #: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
 msgid "Picture"
 msgstr ""
 
@@ -1696,6 +1701,10 @@ msgstr "Fungua Upya"
 msgid "Replace audio"
 msgstr "Badili sauti"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Replace Picture"
+msgstr ""
+
 #. Button text
 #: src/lib/about/FeedbackDialog.svelte
 msgid "Report a technical problem"
diff --git a/frontend/viewer/src/locales/vi.po b/frontend/viewer/src/locales/vi.po
index c349661b97..17bd24e3b8 100644
--- a/frontend/viewer/src/locales/vi.po
+++ b/frontend/viewer/src/locales/vi.po
@@ -572,6 +572,10 @@ msgstr "Xóa {0}"
 msgid "Delete Entry"
 msgstr "Xóa mục"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Delete Picture"
+msgstr ""
+
 #. Relevant view: Lite
 #. Classic view equivalent: "Delete Entry"
 #. Menu option: opens confirmation dialog to permanently remove word
@@ -1574,6 +1578,7 @@ msgstr "Chọn một Loại từ"
 #. Two uses: (1) alt text for a picture image when no caption is available; (2) label on a currently-disabled "+ Picture" add button in the sense editor
 #: src/lib/entry-editor/field-editors/PictureImage.svelte
 #: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
 msgid "Picture"
 msgstr ""
 
@@ -1696,6 +1701,10 @@ msgstr "Mở lại"
 msgid "Replace audio"
 msgstr "Thay thế âm thanh"
 
+#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+msgid "Replace Picture"
+msgstr ""
+
 #. Button text
 #: src/lib/about/FeedbackDialog.svelte
 msgid "Report a technical problem"
diff --git a/frontend/viewer/tests/sense-pictures.test.ts b/frontend/viewer/tests/sense-pictures.test.ts
index 7ab5aaa2e9..92de537eb1 100644
--- a/frontend/viewer/tests/sense-pictures.test.ts
+++ b/frontend/viewer/tests/sense-pictures.test.ts
@@ -1,4 +1,4 @@
-import {expect, test} from '@playwright/test';
+import {expect, test, type Page} from '@playwright/test';
 import {BrowsePage} from './browse-page';
 
 // A tiny valid 1x1 PNG, used to exercise the upload flow without a real image file.
@@ -75,4 +75,58 @@ test.describe('Sense pictures', () => {
     await expect(image).toBeVisible({timeout: 5000});
     await expect(image).toHaveAttribute('src', /^blob:/);
   });
+
+  /** Uploads one picture to "ambuka" (which starts empty) and returns the pictures-field locator. */
+  async function addOnePicture(page: Page) {
+    const browsePage = new BrowsePage(page);
+    await browsePage.goto();
+    await browsePage.selectEntryByFilter('ambuka');
+    const picturesField = page.locator('[style*="grid-area: pictures"]').first();
+    await expect(picturesField).toBeVisible({timeout: 5000});
+    await picturesField.locator('input[type="file"]').setInputFiles({
+      name: 'photo.png', mimeType: 'image/png', buffer: ONE_PX_PNG,
+    });
+    await expect(picturesField.locator('img').first()).toHaveAttribute('src', /^blob:/, {timeout: 5000});
+    return picturesField;
+  }
+
+  test('"+ Picture" stays available alongside Replace/Delete once a picture exists', async ({page}) => {
+    const picturesField = await addOnePicture(page);
+
+    // The add button is still present even though a picture now exists...
+    await expect(picturesField.getByRole('button', {name: 'Picture', exact: true})).toBeVisible();
+    // ...plus the two picture-specific actions.
+    await expect(picturesField.getByRole('button', {name: 'Replace Picture'})).toBeVisible();
+    await expect(picturesField.getByRole('button', {name: 'Delete Picture'})).toBeVisible();
+  });
+
+  test('Delete Picture removes the current picture (after confirmation)', async ({page}) => {
+    const picturesField = await addOnePicture(page);
+
+    await picturesField.getByRole('button', {name: 'Delete Picture'}).click();
+    // Confirm in the delete dialog (its confirm button is also labelled "Delete Picture").
+    await page.getByRole('alertdialog').getByRole('button', {name: 'Delete Picture', exact: true}).click();
+
+    // Picture (and the Replace/Delete actions) are gone; the add button remains.
+    await expect(picturesField.locator('img')).toHaveCount(0, {timeout: 5000});
+    await expect(picturesField.getByRole('button', {name: 'Delete Picture'})).toHaveCount(0);
+    await expect(picturesField.getByRole('button', {name: 'Replace Picture'})).toHaveCount(0);
+    await expect(picturesField.getByRole('button', {name: 'Picture', exact: true})).toBeVisible();
+  });
+
+  test('Replace Picture swaps the current picture in place', async ({page}) => {
+    const picturesField = await addOnePicture(page);
+    const image = picturesField.locator('img').first();
+    const originalSrc = await image.getAttribute('src');
+
+    await picturesField.getByRole('button', {name: 'Replace Picture'}).click();
+    await picturesField.locator('input[type="file"]').setInputFiles({
+      name: 'replacement.png', mimeType: 'image/png', buffer: ONE_PX_PNG,
+    });
+
+    // Still exactly one picture (replaced, not added), re-loaded into a fresh blob url.
+    await expect(picturesField.locator('img')).toHaveCount(1);
+    await expect(image).toHaveAttribute('src', /^blob:/);
+    await expect(image).not.toHaveAttribute('src', originalSrc ?? '', {timeout: 5000});
+  });
 });

From 36b287e229ac26fc74b1c68d9fdad0236e0c45b4 Mon Sep 17 00:00:00 2001
From: Robin Munn <robin_munn@sil.org>
Date: Tue, 7 Jul 2026 14:30:14 +0700
Subject: [PATCH 15/32] Pause carousel autoplay while hovering/focusing Replace
 or Delete

The picture carousel auto-advances every 10s, so the "current" picture could
change between the user reaching for Replace/Delete and clicking it. Suspend
auto-advance while the Replace/Delete button group is hovered or focused.

- PictureCarousel gains a `paused` prop; its auto-advance effect bails (clearing
  the interval) while paused and resumes when unpaused.
- PicturesEditor wraps the Replace/Delete buttons in a role="group" that toggles
  the paused state on mouseenter/leave and focusin/focusout.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../field-editors/PictureCarousel.svelte      |  8 ++-
 .../field-editors/PicturesEditor.svelte       | 55 ++++++++++++-------
 2 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/frontend/viewer/src/lib/entry-editor/field-editors/PictureCarousel.svelte b/frontend/viewer/src/lib/entry-editor/field-editors/PictureCarousel.svelte
index f1fd1eeba3..14d06d8f80 100644
--- a/frontend/viewer/src/lib/entry-editor/field-editors/PictureCarousel.svelte
+++ b/frontend/viewer/src/lib/entry-editor/field-editors/PictureCarousel.svelte
@@ -25,8 +25,10 @@
     pictures: IPicture[];
     /** Index of the picture currently shown; bindable so the parent can act on the current picture. */
     selectedIndex?: number;
+    /** When true, auto-advance is suspended (e.g. while the user is about to act on the current picture). */
+    paused?: boolean;
   };
-  let {pictures, selectedIndex = $bindable(0)}: Props = $props();
+  let {pictures, selectedIndex = $bindable(0), paused = false}: Props = $props();
 
   let emblaApi = $state<EmblaApi>();
 
@@ -54,10 +56,10 @@
     };
   });
 
-  // Auto-advance every 10 seconds when there is more than one picture.
+  // Auto-advance every 10 seconds when there is more than one picture (unless paused).
   $effect(() => {
     const api = emblaApi;
-    if (!api || !hasMultiple) return;
+    if (!api || !hasMultiple || paused) return;
     const interval = setInterval(() => api.scrollNext(), AUTOPLAY_DELAY_MS);
     return () => clearInterval(interval);
   });
diff --git a/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte b/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte
index 4d1e7d02cb..747a18a9b9 100644
--- a/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte
+++ b/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte
@@ -28,6 +28,10 @@
   let selectedIndex = $state(0);
   const currentPicture = $derived(pictures[selectedIndex]);
 
+  // Pause the carousel's auto-advance while the user is hovering/focusing the Replace or Delete
+  // buttons, so the "current" picture can't change out from under them before they click.
+  let pauseAutoplay = $state(false);
+
   // Formats the browser accepts and that the server supports for pictures.
   const ACCEPTED_TYPES = 'image/jpeg,image/png';
 
@@ -131,7 +135,7 @@
 
 <div class="flex flex-col gap-2">
   {#if pictures.length > 0}
-    <PictureCarousel {pictures} bind:selectedIndex />
+    <PictureCarousel {pictures} bind:selectedIndex paused={pauseAutoplay} />
   {:else if readonly}
     <div class="text-muted-foreground p-1">
       {$t`No pictures`}
@@ -145,26 +149,37 @@
         {$t`Picture`}
       </Button>
       {#if pictures.length > 0}
-        <Button
-          icon="i-mdi-image-refresh"
-          size="xs"
-          variant="secondary"
-          loading={busyAction === 'replace'}
-          disabled={busyAction !== null}
-          onclick={() => pickFile('replace')}
-        >
-          {$t`Replace Picture`}
-        </Button>
-        <Button
-          icon="i-mdi-delete"
-          size="xs"
-          variant="destructive"
-          loading={busyAction === 'delete'}
-          disabled={busyAction !== null}
-          onclick={() => deletePicture()}
+        <!-- Hovering or focusing these actions pauses auto-advance (mouseenter/leave fire on this
+             box; focusin/focusout bubble from the buttons) so the current picture stays put. -->
+        <div
+          class="flex gap-2"
+          role="group"
+          onmouseenter={() => (pauseAutoplay = true)}
+          onmouseleave={() => (pauseAutoplay = false)}
+          onfocusin={() => (pauseAutoplay = true)}
+          onfocusout={() => (pauseAutoplay = false)}
         >
-          {$t`Delete Picture`}
-        </Button>
+          <Button
+            icon="i-mdi-image-refresh"
+            size="xs"
+            variant="secondary"
+            loading={busyAction === 'replace'}
+            disabled={busyAction !== null}
+            onclick={() => pickFile('replace')}
+          >
+            {$t`Replace Picture`}
+          </Button>
+          <Button
+            icon="i-mdi-delete"
+            size="xs"
+            variant="destructive"
+            loading={busyAction === 'delete'}
+            disabled={busyAction !== null}
+            onclick={() => deletePicture()}
+          >
+            {$t`Delete Picture`}
+          </Button>
+        </div>
       {/if}
     </div>
     <!-- Hidden input drives the OS file picker (shared by add + replace); only JPG/PNG offered. -->

From ba73cf3183a0956014891d357de34f8f14c42a03 Mon Sep 17 00:00:00 2001
From: Robin Munn <robin_munn@sil.org>
Date: Tue, 7 Jul 2026 16:31:07 +0700
Subject: [PATCH 16/32] Implement movePicture in the demo API

The "Expose MovePicture to frontend API" change added movePicture to the
IMiniLcmJsInvokable interface but not to the in-memory demo API, so the demo
class no longer satisfied the interface (svelte-check failed). Implement it as a
simple reorder of the sense's pictures between the given neighbours.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../src/project/demo/in-memory-demo-api.ts    | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/frontend/viewer/src/project/demo/in-memory-demo-api.ts b/frontend/viewer/src/project/demo/in-memory-demo-api.ts
index 360a571417..80adae60f0 100644
--- a/frontend/viewer/src/project/demo/in-memory-demo-api.ts
+++ b/frontend/viewer/src/project/demo/in-memory-demo-api.ts
@@ -418,6 +418,25 @@ export class InMemoryDemoApi implements IMiniLcmJsInvokable {
     return Promise.resolve();
   }
 
+  movePicture(entryGuid: string, senseGuid: string, pictureGuid: string, previousPictureGuid: string, nextPictureGuid: string): Promise<void> {
+    const entry = this._entries.find(e => e.id === entryGuid);
+    if (!entry) throw new Error(`Entry ${entryGuid} not found`);
+    const sense = entry.senses.find(s => s.id === senseGuid);
+    if (!sense) throw new Error(`Sense ${senseGuid} not found`);
+    const pictures = [...(sense.pictures ?? [])];
+    const from = pictures.findIndex(p => p.id === pictureGuid);
+    if (from === -1) throw new Error(`Picture ${pictureGuid} not found`);
+    const [moved] = pictures.splice(from, 1);
+    // Insert after the previous picture if given, else before the next, else at the end.
+    const prevIdx = previousPictureGuid ? pictures.findIndex(p => p.id === previousPictureGuid) : -1;
+    const nextIdx = nextPictureGuid ? pictures.findIndex(p => p.id === nextPictureGuid) : -1;
+    const insertAt = prevIdx !== -1 ? prevIdx + 1 : nextIdx !== -1 ? nextIdx : pictures.length;
+    pictures.splice(insertAt, 0, moved);
+    sense.pictures = pictures;
+    this.#projectEventBus.notifyEntryUpdated(entry);
+    return Promise.resolve();
+  }
+
   createWritingSystem(_type: WritingSystemType, _writingSystem: IWritingSystem): Promise<IWritingSystem> {
     throw new Error('Method not implemented.');
   }

From 7f875d5eb48a575bb9ea024f947a93ac3dc56ffa Mon Sep 17 00:00:00 2001
From: Robin Munn <robin_munn@sil.org>
Date: Tue, 7 Jul 2026 16:32:56 +0700
Subject: [PATCH 17/32] Reuse the existing media file when an upload reports
 AlreadyExists
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Uploading an image that already exists on the server is not an error in this
app: one image file (mediaUri) can back many Picture objects across different
senses and entries. A Picture object is owned by a single sense and stored as
JSON, but the mediaUri it holds refers to a shared image file.

PicturesEditor no longer rejects an AlreadyExists upload; it treats it like a
success and creates a new Picture pointing at the mediaUri the server returns
for the existing file. No backend change was needed — UploadFileResponse
already carries the existing file's MediaUri on the AlreadyExists result, and
that handling stays media-type-agnostic (mediaUri covers images and audio).

The demo API now mirrors the server's filename-based dedup: a repeat upload of
the same filename returns AlreadyExists with the existing mediaUri. Removes the
now-unused "That picture has already been uploaded" string, and adds a
Playwright test covering the reuse path.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../field-editors/PicturesEditor.svelte       |  7 ++++---
 frontend/viewer/src/locales/en.po             |  4 ----
 frontend/viewer/src/locales/es.po             |  4 ----
 frontend/viewer/src/locales/fr.po             |  4 ----
 frontend/viewer/src/locales/id.po             |  4 ----
 frontend/viewer/src/locales/ko.po             |  4 ----
 frontend/viewer/src/locales/ms.po             |  4 ----
 frontend/viewer/src/locales/sw.po             |  4 ----
 frontend/viewer/src/locales/vi.po             |  4 ----
 .../src/project/demo/in-memory-demo-api.ts    | 10 +++++++++
 frontend/viewer/tests/sense-pictures.test.ts  | 21 +++++++++++++++++++
 11 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte b/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte
index 747a18a9b9..8e6566dbf8 100644
--- a/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte
+++ b/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte
@@ -65,6 +65,10 @@
     switch (response.result) {
       case UploadFileResult.SavedLocally:
       case UploadFileResult.SavedToLexbox:
+      case UploadFileResult.AlreadyExists:
+        // AlreadyExists is not an error here: one image file (mediaUri) can back many Picture
+        // objects across different senses/entries. The server returns the existing file's
+        // mediaUri, which we reuse to create a new Picture pointing at that same image.
         break;
       case UploadFileResult.TooBig:
         AppNotification.display(tooBigMessage(file), {type: 'error', timeout: 'long'});
@@ -72,9 +76,6 @@
       case UploadFileResult.NotSupported:
         AppNotification.display($t`Uploading pictures is not supported here`, {type: 'error'});
         return null;
-      case UploadFileResult.AlreadyExists:
-        AppNotification.display($t`That picture has already been uploaded`, {type: 'error'});
-        return null;
       case UploadFileResult.Error:
         AppNotification.display(response.errorMessage ?? $t`Unable to upload the picture`, {type: 'error'});
         return null;
diff --git a/frontend/viewer/src/locales/en.po b/frontend/viewer/src/locales/en.po
index 0f2f20cf6e..ad6db090dc 100644
--- a/frontend/viewer/src/locales/en.po
+++ b/frontend/viewer/src/locales/en.po
@@ -1990,10 +1990,6 @@ msgstr "Tasks"
 msgid "Tell us about a bug or issue you’ve encountered."
 msgstr "Tell us about a bug or issue you’ve encountered."
 
-#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
-msgid "That picture has already been uploaded"
-msgstr "That picture has already been uploaded"
-
 #. View description
 #: src/project/browse/ViewPicker.svelte
 msgid "The *FieldWorks Classic* view, on the other hand, is designed for users who are familiar with *[FieldWorks Language Explorer](https://software.sil.org/fieldworks/)*."
diff --git a/frontend/viewer/src/locales/es.po b/frontend/viewer/src/locales/es.po
index 97415fbef6..323701ac78 100644
--- a/frontend/viewer/src/locales/es.po
+++ b/frontend/viewer/src/locales/es.po
@@ -1995,10 +1995,6 @@ msgstr "Tareas"
 msgid "Tell us about a bug or issue you’ve encountered."
 msgstr "Cuéntanos acerca de un error o problema que hayas encontrado."
 
-#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
-msgid "That picture has already been uploaded"
-msgstr ""
-
 #. View description
 #: src/project/browse/ViewPicker.svelte
 msgid "The *FieldWorks Classic* view, on the other hand, is designed for users who are familiar with *[FieldWorks Language Explorer](https://software.sil.org/fieldworks/)*."
diff --git a/frontend/viewer/src/locales/fr.po b/frontend/viewer/src/locales/fr.po
index 94ddc1752e..f04b672fb0 100644
--- a/frontend/viewer/src/locales/fr.po
+++ b/frontend/viewer/src/locales/fr.po
@@ -1995,10 +1995,6 @@ msgstr "Tâches"
 msgid "Tell us about a bug or issue you’ve encountered."
 msgstr "Parlez-nous d'un bug ou d'un problème que vous avez rencontré."
 
-#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
-msgid "That picture has already been uploaded"
-msgstr ""
-
 #. View description
 #: src/project/browse/ViewPicker.svelte
 msgid "The *FieldWorks Classic* view, on the other hand, is designed for users who are familiar with *[FieldWorks Language Explorer](https://software.sil.org/fieldworks/)*."
diff --git a/frontend/viewer/src/locales/id.po b/frontend/viewer/src/locales/id.po
index 24a1c440dd..38d52e2ecf 100644
--- a/frontend/viewer/src/locales/id.po
+++ b/frontend/viewer/src/locales/id.po
@@ -1995,10 +1995,6 @@ msgstr "Tugas"
 msgid "Tell us about a bug or issue you’ve encountered."
 msgstr "Beritahu kami tentang bug atau masalah yang Anda temui."
 
-#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
-msgid "That picture has already been uploaded"
-msgstr ""
-
 #. View description
 #: src/project/browse/ViewPicker.svelte
 msgid "The *FieldWorks Classic* view, on the other hand, is designed for users who are familiar with *[FieldWorks Language Explorer](https://software.sil.org/fieldworks/)*."
diff --git a/frontend/viewer/src/locales/ko.po b/frontend/viewer/src/locales/ko.po
index c45db78ad8..09fcf9067c 100644
--- a/frontend/viewer/src/locales/ko.po
+++ b/frontend/viewer/src/locales/ko.po
@@ -1995,10 +1995,6 @@ msgstr "작업"
 msgid "Tell us about a bug or issue you’ve encountered."
 msgstr "발생한 버그나 문제에 대해 알려주세요."
 
-#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
-msgid "That picture has already been uploaded"
-msgstr ""
-
 #. View description
 #: src/project/browse/ViewPicker.svelte
 msgid "The *FieldWorks Classic* view, on the other hand, is designed for users who are familiar with *[FieldWorks Language Explorer](https://software.sil.org/fieldworks/)*."
diff --git a/frontend/viewer/src/locales/ms.po b/frontend/viewer/src/locales/ms.po
index 37d70cd5da..acc92d8f59 100644
--- a/frontend/viewer/src/locales/ms.po
+++ b/frontend/viewer/src/locales/ms.po
@@ -1995,10 +1995,6 @@ msgstr "Tugasan"
 msgid "Tell us about a bug or issue you’ve encountered."
 msgstr "Beritahu kami mengenai pepijat atau isu yang anda temui."
 
-#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
-msgid "That picture has already been uploaded"
-msgstr ""
-
 #. View description
 #: src/project/browse/ViewPicker.svelte
 msgid "The *FieldWorks Classic* view, on the other hand, is designed for users who are familiar with *[FieldWorks Language Explorer](https://software.sil.org/fieldworks/)*."
diff --git a/frontend/viewer/src/locales/sw.po b/frontend/viewer/src/locales/sw.po
index dc2634c135..283d56cef6 100644
--- a/frontend/viewer/src/locales/sw.po
+++ b/frontend/viewer/src/locales/sw.po
@@ -1995,10 +1995,6 @@ msgstr "Jukumu"
 msgid "Tell us about a bug or issue you’ve encountered."
 msgstr "Tuambie kuhusu kosa au matatizo uliyokabiliwa."
 
-#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
-msgid "That picture has already been uploaded"
-msgstr ""
-
 #. View description
 #: src/project/browse/ViewPicker.svelte
 msgid "The *FieldWorks Classic* view, on the other hand, is designed for users who are familiar with *[FieldWorks Language Explorer](https://software.sil.org/fieldworks/)*."
diff --git a/frontend/viewer/src/locales/vi.po b/frontend/viewer/src/locales/vi.po
index 17bd24e3b8..5f70d291e4 100644
--- a/frontend/viewer/src/locales/vi.po
+++ b/frontend/viewer/src/locales/vi.po
@@ -1995,10 +1995,6 @@ msgstr "Nhiệm vụ"
 msgid "Tell us about a bug or issue you’ve encountered."
 msgstr "Hãy cho chúng tôi biết về lỗi hoặc vấn đề bạn gặp phải."
 
-#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
-msgid "That picture has already been uploaded"
-msgstr ""
-
 #. View description
 #: src/project/browse/ViewPicker.svelte
 msgid "The *FieldWorks Classic* view, on the other hand, is designed for users who are familiar with *[FieldWorks Language Explorer](https://software.sil.org/fieldworks/)*."
diff --git a/frontend/viewer/src/project/demo/in-memory-demo-api.ts b/frontend/viewer/src/project/demo/in-memory-demo-api.ts
index 80adae60f0..90bef54b67 100644
--- a/frontend/viewer/src/project/demo/in-memory-demo-api.ts
+++ b/frontend/viewer/src/project/demo/in-memory-demo-api.ts
@@ -580,6 +580,9 @@ export class InMemoryDemoApi implements IMiniLcmJsInvokable {
   // Files uploaded during the demo session (e.g. via the "+ Picture" button), keyed by the
   // mediaUri handed back from saveFile. Lets the demo round-trip an upload without a backend.
   #uploadedFiles = new Map<string, Blob>();
+  // Maps an already-uploaded filename to its mediaUri, mirroring how the real server dedups by
+  // filename (LcmMediaService keys by the file name within the project's resource cache).
+  #uploadedFilenames = new Map<string, string>();
 
   getFileStream(mediaUri: string): Promise<IReadFileResponseJs> {
     const uploaded = this.#uploadedFiles.get(mediaUri);
@@ -615,8 +618,15 @@ export class InMemoryDemoApi implements IMiniLcmJsInvokable {
     if (blob.size > DEMO_FILE_SIZE_LIMIT) {
       return Promise.resolve({result: UploadFileResult.TooBig});
     }
+    // Same filename as an earlier upload: report AlreadyExists and hand back the existing
+    // mediaUri (as the real server does) so the caller can point a new Picture at that file.
+    const existing = this.#uploadedFilenames.get(metadata.filename);
+    if (existing) {
+      return Promise.resolve({result: UploadFileResult.AlreadyExists, mediaUri: existing});
+    }
     const mediaUri = `demo-upload/${randomId()}`;
     this.#uploadedFiles.set(mediaUri, blob);
+    this.#uploadedFilenames.set(metadata.filename, mediaUri);
     return Promise.resolve({result: UploadFileResult.SavedLocally, mediaUri});
   }
 }
diff --git a/frontend/viewer/tests/sense-pictures.test.ts b/frontend/viewer/tests/sense-pictures.test.ts
index 92de537eb1..2e0b63f3ee 100644
--- a/frontend/viewer/tests/sense-pictures.test.ts
+++ b/frontend/viewer/tests/sense-pictures.test.ts
@@ -76,6 +76,27 @@ test.describe('Sense pictures', () => {
     await expect(image).toHaveAttribute('src', /^blob:/);
   });
 
+  test('re-uploading an existing file adds a second picture that reuses it', async ({page}) => {
+    const browsePage = new BrowsePage(page);
+    await browsePage.goto();
+    await browsePage.selectEntryByFilter('ambuka');
+
+    const picturesField = page.locator('[style*="grid-area: pictures"]').first();
+    await expect(picturesField).toBeVisible({timeout: 5000});
+    const fileInput = picturesField.locator('input[type="file"]');
+
+    // First upload creates a picture.
+    await fileInput.setInputFiles({name: 'shared.png', mimeType: 'image/png', buffer: ONE_PX_PNG});
+    await expect(picturesField.locator('img').first()).toHaveAttribute('src', /^blob:/, {timeout: 5000});
+
+    // Uploading the same filename again -> server reports AlreadyExists with the existing
+    // mediaUri; that's not an error here, so a second Picture pointing at the same file is added.
+    await fileInput.setInputFiles({name: 'shared.png', mimeType: 'image/png', buffer: ONE_PX_PNG});
+
+    // Two pictures now exist (the carousel shows a navigation dot per picture).
+    await expect(picturesField.getByRole('button', {name: /^Go to picture/})).toHaveCount(2, {timeout: 5000});
+  });
+
   /** Uploads one picture to "ambuka" (which starts empty) and returns the pictures-field locator. */
   async function addOnePicture(page: Page) {
     const browsePage = new BrowsePage(page);

From ced0680e5c2778fd3225dd44e2ea13abcba2cd3f Mon Sep 17 00:00:00 2001
From: Robin Munn <robin_munn@sil.org>
Date: Wed, 8 Jul 2026 13:31:33 +0700
Subject: [PATCH 18/32] Rebuild PictureCarousel on the shadcn-svelte carousel

Add the shadcn-svelte carousel component and rewrite PictureCarousel to use
its Carousel.Root/Content/Item primitives, capturing the Embla api via setApi.
All existing behavior is preserved: bindable selectedIndex, paused, 10s
auto-advance, loop, the bounded-width/centered layout for multiple pictures,
and the i18n'd dot indicators + prev/next controls.

Keep our own control chrome instead of Carousel.Previous/Next: those sit
outside the frame with hardcoded English labels and offer no dot indicator,
whereas our controls are centered below the image with translated labels.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../ui/carousel/carousel-content.svelte       | 43 +++++++++
 .../ui/carousel/carousel-item.svelte          | 30 ++++++
 .../ui/carousel/carousel-next.svelte          | 39 ++++++++
 .../ui/carousel/carousel-previous.svelte      | 39 ++++++++
 .../components/ui/carousel/carousel.svelte    | 94 +++++++++++++++++++
 .../src/lib/components/ui/carousel/context.ts | 58 ++++++++++++
 .../src/lib/components/ui/carousel/index.ts   | 19 ++++
 .../field-editors/PictureCarousel.svelte      | 69 ++++++--------
 8 files changed, 349 insertions(+), 42 deletions(-)
 create mode 100644 frontend/viewer/src/lib/components/ui/carousel/carousel-content.svelte
 create mode 100644 frontend/viewer/src/lib/components/ui/carousel/carousel-item.svelte
 create mode 100644 frontend/viewer/src/lib/components/ui/carousel/carousel-next.svelte
 create mode 100644 frontend/viewer/src/lib/components/ui/carousel/carousel-previous.svelte
 create mode 100644 frontend/viewer/src/lib/components/ui/carousel/carousel.svelte
 create mode 100644 frontend/viewer/src/lib/components/ui/carousel/context.ts
 create mode 100644 frontend/viewer/src/lib/components/ui/carousel/index.ts

diff --git a/frontend/viewer/src/lib/components/ui/carousel/carousel-content.svelte b/frontend/viewer/src/lib/components/ui/carousel/carousel-content.svelte
new file mode 100644
index 0000000000..f1467db826
--- /dev/null
+++ b/frontend/viewer/src/lib/components/ui/carousel/carousel-content.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import emblaCarouselSvelte from 'embla-carousel-svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getEmblaContext } from './context.js';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+
+	const emblaCtx = getEmblaContext('<Carousel.Content/>');
+</script>
+
+<div
+	data-slot="carousel-content"
+	class="overflow-hidden"
+	use:emblaCarouselSvelte={{
+		options: {
+			container: '[data-embla-container]',
+			slides: '[data-embla-slide]',
+			...emblaCtx.options,
+			axis: emblaCtx.orientation === 'horizontal' ? 'x' : 'y',
+		},
+		plugins: emblaCtx.plugins,
+	}}
+	onemblaInit={emblaCtx.onInit}
+>
+	<div
+		bind:this={ref}
+		class={cn(
+			'flex',
+			emblaCtx.orientation === 'horizontal' ? '-ms-4' : '-mt-4 flex-col',
+			className
+		)}
+		data-embla-container=""
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
+</div>
diff --git a/frontend/viewer/src/lib/components/ui/carousel/carousel-item.svelte b/frontend/viewer/src/lib/components/ui/carousel/carousel-item.svelte
new file mode 100644
index 0000000000..1cf361e90d
--- /dev/null
+++ b/frontend/viewer/src/lib/components/ui/carousel/carousel-item.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getEmblaContext } from './context.js';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+
+	const emblaCtx = getEmblaContext('<Carousel.Item/>');
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="carousel-item"
+	role="group"
+	aria-roledescription="slide"
+	class={cn(
+		'min-w-0 shrink-0 grow-0 basis-full',
+		emblaCtx.orientation === 'horizontal' ? 'ps-4' : 'pt-4',
+		className
+	)}
+	data-embla-slide=""
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/frontend/viewer/src/lib/components/ui/carousel/carousel-next.svelte b/frontend/viewer/src/lib/components/ui/carousel/carousel-next.svelte
new file mode 100644
index 0000000000..aa627d09e0
--- /dev/null
+++ b/frontend/viewer/src/lib/components/ui/carousel/carousel-next.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import type { WithoutChildren } from 'bits-ui';
+	import { getEmblaContext } from './context.js';
+	import { cn } from '$lib/utils.js';
+	import { Button, type Props } from '$lib/components/ui/button/index.js';
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = 'outline',
+		size = 'icon-sm',
+		...restProps
+	}: WithoutChildren<Props> = $props();
+
+	const emblaCtx = getEmblaContext('<Carousel.Next/>');
+</script>
+
+<Button
+	data-slot="carousel-next"
+	{variant}
+	{size}
+	aria-disabled={!emblaCtx.canScrollNext}
+	disabled={!emblaCtx.canScrollNext}
+	class={cn(
+		'rounded-full absolute touch-manipulation',
+		emblaCtx.orientation === 'horizontal'
+			? 'inset-y-0 -end-12 my-auto'
+			: 'start-1/2 -bottom-12 -translate-x-1/2 rotate-90',
+		className
+	)}
+	onclick={emblaCtx.scrollNext}
+	onkeydown={emblaCtx.handleKeyDown}
+	bind:ref
+	{...restProps}
+>
+	<ChevronRightIcon  />
+	<span class="sr-only">Next slide</span>
+</Button>
diff --git a/frontend/viewer/src/lib/components/ui/carousel/carousel-previous.svelte b/frontend/viewer/src/lib/components/ui/carousel/carousel-previous.svelte
new file mode 100644
index 0000000000..07fe3a8169
--- /dev/null
+++ b/frontend/viewer/src/lib/components/ui/carousel/carousel-previous.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import type { WithoutChildren } from 'bits-ui';
+	import { getEmblaContext } from './context.js';
+	import { cn } from '$lib/utils.js';
+	import { Button, type Props } from '$lib/components/ui/button/index.js';
+	import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = 'outline',
+		size = 'icon-sm',
+		...restProps
+	}: WithoutChildren<Props> = $props();
+
+	const emblaCtx = getEmblaContext('<Carousel.Previous/>');
+</script>
+
+<Button
+	data-slot="carousel-previous"
+	{variant}
+	{size}
+	aria-disabled={!emblaCtx.canScrollPrev}
+	disabled={!emblaCtx.canScrollPrev}
+	class={cn(
+		'rounded-full absolute touch-manipulation',
+		emblaCtx.orientation === 'horizontal'
+			? 'inset-y-0 -start-12 my-auto'
+			: 'start-1/2 -top-12 -translate-x-1/2 rotate-90',
+		className
+	)}
+	onclick={emblaCtx.scrollPrev}
+	onkeydown={emblaCtx.handleKeyDown}
+	{...restProps}
+	bind:ref
+>
+	<ChevronLeftIcon  />
+	<span class="sr-only">Previous slide</span>
+</Button>
diff --git a/frontend/viewer/src/lib/components/ui/carousel/carousel.svelte b/frontend/viewer/src/lib/components/ui/carousel/carousel.svelte
new file mode 100644
index 0000000000..cce28cf192
--- /dev/null
+++ b/frontend/viewer/src/lib/components/ui/carousel/carousel.svelte
@@ -0,0 +1,94 @@
+<script lang="ts">
+	import {
+		type CarouselAPI,
+		type CarouselProps,
+		type EmblaContext,
+		setEmblaContext,
+	} from './context.js';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		opts = {},
+		plugins = [],
+		setApi = () => {},
+		orientation = 'horizontal',
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<CarouselProps> = $props();
+
+	// svelte-ignore state_referenced_locally
+	let carouselState = $state<EmblaContext>({
+		api: undefined,
+		scrollPrev,
+		scrollNext,
+		orientation,
+		canScrollNext: false,
+		canScrollPrev: false,
+		handleKeyDown,
+		options: opts,
+		plugins,
+		onInit,
+		scrollSnaps: [],
+		selectedIndex: 0,
+		scrollTo,
+	});
+
+	setEmblaContext(carouselState);
+
+	function scrollPrev() {
+		carouselState.api?.scrollPrev();
+	}
+
+	function scrollNext() {
+		carouselState.api?.scrollNext();
+	}
+
+	function scrollTo(index: number, jump?: boolean) {
+		carouselState.api?.scrollTo(index, jump);
+	}
+
+	function onSelect() {
+		if (!carouselState.api) return;
+		carouselState.selectedIndex = carouselState.api.selectedScrollSnap();
+		carouselState.canScrollNext = carouselState.api.canScrollNext();
+		carouselState.canScrollPrev = carouselState.api.canScrollPrev();
+	}
+
+	function handleKeyDown(e: KeyboardEvent) {
+		if (e.key === 'ArrowLeft') {
+			e.preventDefault();
+			scrollPrev();
+		} else if (e.key === 'ArrowRight') {
+			e.preventDefault();
+			scrollNext();
+		}
+	}
+
+	function onInit(event: CustomEvent<CarouselAPI>) {
+		carouselState.api = event.detail;
+		setApi(carouselState.api);
+
+		carouselState.scrollSnaps = carouselState.api.scrollSnapList();
+		carouselState.api.on('select', onSelect);
+		onSelect();
+	}
+
+	$effect(() => {
+		return () => {
+			carouselState.api?.off('select', onSelect);
+		};
+	});
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="carousel"
+	class={cn('relative', className)}
+	role="region"
+	aria-roledescription="carousel"
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/frontend/viewer/src/lib/components/ui/carousel/context.ts b/frontend/viewer/src/lib/components/ui/carousel/context.ts
new file mode 100644
index 0000000000..138d672965
--- /dev/null
+++ b/frontend/viewer/src/lib/components/ui/carousel/context.ts
@@ -0,0 +1,58 @@
+import type { WithElementRef } from '$lib/utils.js';
+import type {
+	EmblaCarouselSvelteType,
+	default as emblaCarouselSvelte,
+} from 'embla-carousel-svelte';
+import { getContext, hasContext, setContext } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+
+export type CarouselAPI =
+	NonNullable<NonNullable<EmblaCarouselSvelteType['$$_attributes']>['on:emblaInit']> extends (
+		evt: CustomEvent<infer CarouselAPI>
+	) => void
+		? CarouselAPI
+		: never;
+
+type EmblaCarouselConfig = NonNullable<Parameters<typeof emblaCarouselSvelte>[1]>;
+
+export type CarouselOptions = EmblaCarouselConfig['options'];
+export type CarouselPlugins = EmblaCarouselConfig['plugins'];
+
+////
+
+export type CarouselProps = {
+	opts?: CarouselOptions;
+	plugins?: CarouselPlugins;
+	setApi?: (api: CarouselAPI | undefined) => void;
+	orientation?: 'horizontal' | 'vertical';
+} & WithElementRef<HTMLAttributes<HTMLDivElement>>;
+
+const EMBLA_CAROUSEL_CONTEXT = Symbol('EMBLA_CAROUSEL_CONTEXT');
+
+export type EmblaContext = {
+	api: CarouselAPI | undefined;
+	orientation: 'horizontal' | 'vertical';
+	scrollNext: () => void;
+	scrollPrev: () => void;
+	canScrollNext: boolean;
+	canScrollPrev: boolean;
+	handleKeyDown: (e: KeyboardEvent) => void;
+	options: CarouselOptions;
+	plugins: CarouselPlugins;
+	onInit: (e: CustomEvent<CarouselAPI>) => void;
+	scrollTo: (index: number, jump?: boolean) => void;
+	scrollSnaps: number[];
+	selectedIndex: number;
+};
+
+export function setEmblaContext(config: EmblaContext): EmblaContext {
+	setContext(EMBLA_CAROUSEL_CONTEXT, config);
+	return config;
+}
+
+export function getEmblaContext(name = 'This component') {
+	if (!hasContext(EMBLA_CAROUSEL_CONTEXT)) {
+		throw new Error(`${name} must be used within a <Carousel.Root> component`);
+	}
+	return getContext<ReturnType<typeof setEmblaContext>>(EMBLA_CAROUSEL_CONTEXT);
+}
diff --git a/frontend/viewer/src/lib/components/ui/carousel/index.ts b/frontend/viewer/src/lib/components/ui/carousel/index.ts
new file mode 100644
index 0000000000..79d2a288e3
--- /dev/null
+++ b/frontend/viewer/src/lib/components/ui/carousel/index.ts
@@ -0,0 +1,19 @@
+import Root from './carousel.svelte';
+import Content from './carousel-content.svelte';
+import Item from './carousel-item.svelte';
+import Previous from './carousel-previous.svelte';
+import Next from './carousel-next.svelte';
+
+export {
+	Root,
+	Content,
+	Item,
+	Previous,
+	Next,
+	//
+	Root as Carousel,
+	Content as CarouselContent,
+	Item as CarouselItem,
+	Previous as CarouselPrevious,
+	Next as CarouselNext,
+};
diff --git a/frontend/viewer/src/lib/entry-editor/field-editors/PictureCarousel.svelte b/frontend/viewer/src/lib/entry-editor/field-editors/PictureCarousel.svelte
index 14d06d8f80..e9b440e2c9 100644
--- a/frontend/viewer/src/lib/entry-editor/field-editors/PictureCarousel.svelte
+++ b/frontend/viewer/src/lib/entry-editor/field-editors/PictureCarousel.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-  import emblaCarouselSvelte from 'embla-carousel-svelte';
+  import * as Carousel from '$lib/components/ui/carousel';
+  import type {CarouselAPI} from '$lib/components/ui/carousel/context';
   import type {IPicture} from '$lib/dotnet-types';
   import PictureImage from './PictureImage.svelte';
   import {Button} from '$lib/components/ui/button';
@@ -9,18 +10,6 @@
   /** Each picture is shown for 10 seconds before the carousel advances. */
   const AUTOPLAY_DELAY_MS = 10_000;
 
-  // Minimal structural type for the bits of the Embla api we use. Declared locally rather
-  // than imported from `embla-carousel` (a transitive dep that pnpm does not hoist), so the
-  // only carousel import is the directly-declared `embla-carousel-svelte` action.
-  type EmblaApi = {
-    scrollNext: () => void;
-    scrollPrev: () => void;
-    scrollTo: (index: number) => void;
-    selectedScrollSnap: () => number;
-    on: (event: string, callback: () => void) => void;
-    off: (event: string, callback: () => void) => void;
-  };
-
   type Props = {
     pictures: IPicture[];
     /** Index of the picture currently shown; bindable so the parent can act on the current picture. */
@@ -30,56 +19,52 @@
   };
   let {pictures, selectedIndex = $bindable(0), paused = false}: Props = $props();
 
-  let emblaApi = $state<EmblaApi>();
+  // The Embla api, captured from <Carousel.Root setApi>. We drive our own controls (dots +
+  // prev/next) through it rather than using <Carousel.Previous/Next>, which are positioned
+  // outside the frame with English-only labels and offer no dot indicator.
+  let api = $state<CarouselAPI>();
 
   const hasMultiple = $derived(pictures.length > 1);
 
-  // embla-carousel-svelte dispatches an `emblaInit` CustomEvent (typed by the package as the
-  // `onemblaInit` attribute) carrying the api in `detail` once the carousel has initialised.
-  function onEmblaInit(event: Event) {
-    emblaApi = (event as CustomEvent<EmblaApi>).detail;
-  }
-
-  // Keep the active-dot indicator in sync with the carousel.
+  // Keep the active-dot indicator (and the parent's `selectedIndex`) in sync with the carousel.
   $effect(() => {
-    const api = emblaApi;
     if (!api) return;
+    const embla = api;
     function onSelect() {
-      selectedIndex = api!.selectedScrollSnap();
+      selectedIndex = embla.selectedScrollSnap();
     }
     onSelect();
-    api.on('select', onSelect);
-    api.on('reInit', onSelect);
+    embla.on('select', onSelect);
+    embla.on('reInit', onSelect);
     return () => {
-      api.off('select', onSelect);
-      api.off('reInit', onSelect);
+      embla.off('select', onSelect);
+      embla.off('reInit', onSelect);
     };
   });
 
   // Auto-advance every 10 seconds when there is more than one picture (unless paused).
   $effect(() => {
-    const api = emblaApi;
     if (!api || !hasMultiple || paused) return;
-    const interval = setInterval(() => api.scrollNext(), AUTOPLAY_DELAY_MS);
+    const embla = api;
+    const interval = setInterval(() => embla.scrollNext(), AUTOPLAY_DELAY_MS);
     return () => clearInterval(interval);
   });
 </script>
 
 <!-- With multiple pictures we bound the carousel to a fixed width and center each picture in
-     it, so the centered controls below sit under the picture. (Sizing the carousel to the
-     picture itself isn't possible here: embla lays slides out in a flex row, so a shrink-to-fit
-     width would span the sum of all slides.) A single picture keeps its natural, left-justified
-     size since it has no controls to align. -->
+     it, so the centered controls below sit under the picture. (Embla lays slides out in a flex
+     row, so a shrink-to-fit width would span the sum of all slides.) A single picture keeps its
+     natural, left-justified size since it has no controls to align. -->
 <div class={cn('flex flex-col gap-2', hasMultiple && 'max-w-md')}>
-  <div class="overflow-hidden" use:emblaCarouselSvelte={{options: {loop: true}, plugins: []}} onemblaInit={onEmblaInit}>
-    <div class="flex">
+  <Carousel.Root setApi={(a) => (api = a)} opts={{loop: true}}>
+    <Carousel.Content>
       {#each pictures as picture (picture.id)}
-        <div class={cn('min-w-0 flex-[0_0_100%] px-2', hasMultiple && 'flex justify-center')}>
+        <Carousel.Item class={cn(hasMultiple && 'flex justify-center')}>
           <PictureImage {picture} />
-        </div>
+        </Carousel.Item>
       {/each}
-    </div>
-  </div>
+    </Carousel.Content>
+  </Carousel.Root>
 
   {#if hasMultiple}
     <div class="flex items-center justify-center gap-2">
@@ -88,7 +73,7 @@
         size="icon-xs"
         icon="i-mdi-chevron-left"
         aria-label={$t`Previous picture`}
-        onclick={() => emblaApi?.scrollPrev()}
+        onclick={() => api?.scrollPrev()}
       />
       <div class="flex items-center gap-1.5">
         {#each pictures as picture, i (picture.id)}
@@ -96,7 +81,7 @@
             type="button"
             aria-label={$t`Go to picture ${i + 1}`}
             class={cn('size-2 rounded-full transition-colors', i === selectedIndex ? 'bg-primary' : 'bg-muted-foreground/40')}
-            onclick={() => emblaApi?.scrollTo(i)}
+            onclick={() => api?.scrollTo(i)}
           ></button>
         {/each}
       </div>
@@ -105,7 +90,7 @@
         size="icon-xs"
         icon="i-mdi-chevron-right"
         aria-label={$t`Next picture`}
-        onclick={() => emblaApi?.scrollNext()}
+        onclick={() => api?.scrollNext()}
       />
     </div>
   {/if}

From f5e4bb471d33358fcdd46f4ba6c138c5f14f8d8c Mon Sep 17 00:00:00 2001
From: Robin Munn <rmunn@pobox.com>
Date: Wed, 8 Jul 2026 14:20:02 +0700
Subject: [PATCH 19/32] Adjust MovePicture TypeScript API to allow null

This will be needed if we want the frontend to be able to allow people
to move pictures to the front/top or end/bottom (and if users want to
move pictures, nearly every time they're going to be moving one of them
to the top or bottom.)
---
 backend/FwLite/FwLiteShared/Services/MiniLcmJsInvokable.cs      | 2 +-
 .../FwLiteShared/Services/IMiniLcmJsInvokable.ts                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/backend/FwLite/FwLiteShared/Services/MiniLcmJsInvokable.cs b/backend/FwLite/FwLiteShared/Services/MiniLcmJsInvokable.cs
index 6ad632950c..fd23950b7d 100644
--- a/backend/FwLite/FwLiteShared/Services/MiniLcmJsInvokable.cs
+++ b/backend/FwLite/FwLiteShared/Services/MiniLcmJsInvokable.cs
@@ -400,7 +400,7 @@ public async Task<Picture> UpdatePicture(Guid entryId, Guid senseId, Picture bef
 
     [JSInvokable]
     // previousPictureId and nextPictureId represent the target position, where the picture should end up after being moved
-    public async Task MovePicture(Guid entryId, Guid senseId, Guid pictureId, Guid? previousPictureId, Guid? nextPictureId)
+    public async Task MovePicture(Guid entryId, Guid senseId, Guid pictureId, Guid? previousPictureId = null, Guid? nextPictureId = null)
     {
         await _wrappedApi.MovePicture(entryId, senseId, pictureId, new MiniLcm.SyncHelpers.BetweenPosition(previousPictureId, nextPictureId));
         OnDataChanged();
diff --git a/frontend/viewer/src/lib/dotnet-types/generated-types/FwLiteShared/Services/IMiniLcmJsInvokable.ts b/frontend/viewer/src/lib/dotnet-types/generated-types/FwLiteShared/Services/IMiniLcmJsInvokable.ts
index 31fc331d67..7a01a4828f 100644
--- a/frontend/viewer/src/lib/dotnet-types/generated-types/FwLiteShared/Services/IMiniLcmJsInvokable.ts
+++ b/frontend/viewer/src/lib/dotnet-types/generated-types/FwLiteShared/Services/IMiniLcmJsInvokable.ts
@@ -78,7 +78,7 @@ export interface IMiniLcmJsInvokable
 	deleteExampleSentence(entryId: string, senseId: string, exampleSentenceId: string) : Promise<void>;
 	createPicture(entryId: string, senseId: string, picture: IPicture) : Promise<IPicture>;
 	updatePicture(entryId: string, senseId: string, before: IPicture, after: IPicture) : Promise<IPicture>;
-	movePicture(entryId: string, senseId: string, pictureId: string, previousPictureId: string, nextPictureId: string) : Promise<void>;
+	movePicture(entryId: string, senseId: string, pictureId: string, previousPictureId?: string, nextPictureId?: string) : Promise<void>;
 	deletePicture(entryId: string, senseId: string, pictureId: string) : Promise<void>;
 	getFileStream(mediaUri: string) : Promise<IReadFileResponseJs>;
 	saveFile(streamReference: Blob | ArrayBuffer | Uint8Array, metadata: ILcmFileMetadata) : Promise<IUploadFileResponse>;

From 071b5ab58047969e733f0956260f3df19ecf7130 Mon Sep 17 00:00:00 2001
From: Robin Munn <robin_munn@sil.org>
Date: Wed, 8 Jul 2026 14:26:21 +0700
Subject: [PATCH 20/32] Allow TIFF and BMP picture uploads

Add image/tiff and image/bmp to the picture file picker's accepted types.
The server's SaveFile only rejects on size, not format, so the client accept
list is the effective format gate.

Also widen the too-large-file advice: BMP and TIFF are lossless/uncompressed
like PNG, so they get the "reduce resolution" hint rather than the (wrong for
them) "lower JPEG quality" hint.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../lib/entry-editor/field-editors/PicturesEditor.svelte  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte b/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte
index 8e6566dbf8..4f458236cd 100644
--- a/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte
+++ b/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte
@@ -33,7 +33,7 @@
   let pauseAutoplay = $state(false);
 
   // Formats the browser accepts and that the server supports for pictures.
-  const ACCEPTED_TYPES = 'image/jpeg,image/png';
+  const ACCEPTED_TYPES = 'image/jpeg,image/png,image/tiff,image/bmp';
 
   let fileInputElement = $state<HTMLInputElement>();
   // Which operation is in flight (drives per-button spinners + disabling the whole group).
@@ -125,10 +125,10 @@
   }
 
   // The server rejects files above its size limit. JPEGs can usually be shrunk by lowering
-  // the export quality, whereas PNGs (lossless) need a smaller resolution instead.
+  // the export quality, whereas lossless formats (PNG, BMP, TIFF) need a smaller resolution.
   function tooBigMessage(file: File): string {
-    const isPng = file.type === 'image/png' || /\.png$/i.test(file.name);
-    return isPng
+    const isLossless = /^image\/(png|bmp|tiff)$/.test(file.type) || /\.(png|bmp|tiff?)$/i.test(file.name);
+    return isLossless
       ? $t`This picture is too large to upload. Try reducing the image resolution and uploading again.`
       : $t`This picture is too large to upload. Try saving it at a lower JPEG quality and uploading again.`;
   }

From 85f6042eab483600d2bfaec4c9e4ee588c831fdc Mon Sep 17 00:00:00 2001
From: Robin Munn <robin_munn@sil.org>
Date: Wed, 8 Jul 2026 15:25:47 +0700
Subject: [PATCH 21/32] Move picture Delete/Replace onto the image for touch
 support
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the hover-dependent Replace/Delete button group with affordances on
the picture itself, so they work on phones without hover:
- an always-visible red trash-can button in the picture's top-right corner
  deletes that picture
- clicking/tapping the picture triggers a replace

Both act on the specific picture the user targets (rendered per carousel
slide) rather than a tracked "current" picture, so the carousel's autoplay
can no longer cause an action to hit the wrong picture — the auto-advance
pause logic is therefore removed.

The "Replace Picture" / "Delete Picture" strings move to aria-labels on the
new controls (catalog reference comments updated). The test picture is now a
real 96x96 PNG so the trash button anchored to the image corner has a
realistic, clickable footprint.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../field-editors/PictureCarousel.svelte      | 32 +++++--
 .../field-editors/PictureImage.svelte         | 48 +++++++++--
 .../field-editors/PicturesEditor.svelte       | 85 ++++++-------------
 frontend/viewer/src/locales/en.po             |  4 +-
 frontend/viewer/src/locales/es.po             |  4 +-
 frontend/viewer/src/locales/fr.po             |  4 +-
 frontend/viewer/src/locales/id.po             |  4 +-
 frontend/viewer/src/locales/ko.po             |  4 +-
 frontend/viewer/src/locales/ms.po             |  4 +-
 frontend/viewer/src/locales/sw.po             |  4 +-
 frontend/viewer/src/locales/vi.po             |  4 +-
 frontend/viewer/tests/sense-pictures.test.ts  | 18 ++--
 12 files changed, 121 insertions(+), 94 deletions(-)

diff --git a/frontend/viewer/src/lib/entry-editor/field-editors/PictureCarousel.svelte b/frontend/viewer/src/lib/entry-editor/field-editors/PictureCarousel.svelte
index e9b440e2c9..c1a6c185a9 100644
--- a/frontend/viewer/src/lib/entry-editor/field-editors/PictureCarousel.svelte
+++ b/frontend/viewer/src/lib/entry-editor/field-editors/PictureCarousel.svelte
@@ -12,12 +12,24 @@
 
   type Props = {
     pictures: IPicture[];
-    /** Index of the picture currently shown; bindable so the parent can act on the current picture. */
+    /** Index of the picture currently shown; bindable so parents can observe the active picture. */
     selectedIndex?: number;
-    /** When true, auto-advance is suspended (e.g. while the user is about to act on the current picture). */
-    paused?: boolean;
+    readonly?: boolean;
+    /** Disables the per-picture edit affordances while an operation is in flight. */
+    busy?: boolean;
+    /** Called with the picture the user tapped, to replace it. */
+    onReplacePicture?: (picture: IPicture) => void;
+    /** Called with the picture whose trash button was clicked, to delete it. */
+    onDeletePicture?: (picture: IPicture) => void;
   };
-  let {pictures, selectedIndex = $bindable(0), paused = false}: Props = $props();
+  let {
+    pictures,
+    selectedIndex = $bindable(0),
+    readonly = false,
+    busy = false,
+    onReplacePicture,
+    onDeletePicture,
+  }: Props = $props();
 
   // The Embla api, captured from <Carousel.Root setApi>. We drive our own controls (dots +
   // prev/next) through it rather than using <Carousel.Previous/Next>, which are positioned
@@ -42,9 +54,10 @@
     };
   });
 
-  // Auto-advance every 10 seconds when there is more than one picture (unless paused).
+  // Auto-advance every 10 seconds when there is more than one picture. Delete/replace act on
+  // the specific picture the user targets, so autoplay can't cause them to hit the wrong one.
   $effect(() => {
-    if (!api || !hasMultiple || paused) return;
+    if (!api || !hasMultiple) return;
     const embla = api;
     const interval = setInterval(() => embla.scrollNext(), AUTOPLAY_DELAY_MS);
     return () => clearInterval(interval);
@@ -60,7 +73,12 @@
     <Carousel.Content>
       {#each pictures as picture (picture.id)}
         <Carousel.Item class={cn(hasMultiple && 'flex justify-center')}>
-          <PictureImage {picture} />
+          <PictureImage
+            {picture}
+            {busy}
+            onReplace={readonly ? undefined : () => onReplacePicture?.(picture)}
+            onDelete={readonly ? undefined : () => onDeletePicture?.(picture)}
+          />
         </Carousel.Item>
       {/each}
     </Carousel.Content>
diff --git a/frontend/viewer/src/lib/entry-editor/field-editors/PictureImage.svelte b/frontend/viewer/src/lib/entry-editor/field-editors/PictureImage.svelte
index 776586dbac..6dd3adc354 100644
--- a/frontend/viewer/src/lib/entry-editor/field-editors/PictureImage.svelte
+++ b/frontend/viewer/src/lib/entry-editor/field-editors/PictureImage.svelte
@@ -7,8 +7,18 @@
 
   type Props = {
     picture: IPicture;
+    /** When provided, clicking the image triggers a replace. */
+    onReplace?: () => void;
+    /** When provided, a trash button is shown in the image's top-right corner. */
+    onDelete?: () => void;
+    /** Disables the edit affordances while an operation is in flight. */
+    busy?: boolean;
   };
-  const {picture}: Props = $props();
+  const {picture, onReplace, onDelete, busy = false}: Props = $props();
+
+  // The image doubles as edit UI (tap to replace, trash to delete) only when handlers are wired.
+  // Kept media-agnostic and hover-independent so it works on touch screens.
+  const editable = $derived(!!onReplace || !!onDelete);
 
   const projectContext = useProjectContext();
   const api = $derived(projectContext?.maybeApi);
@@ -63,21 +73,47 @@
   });
 </script>
 
-<figure class="flex flex-col items-start gap-1">
+{#snippet imageContent()}
   {#if state.status === 'loaded'}
     <img src={state.url} alt={caption || $t`Picture`} class="max-h-64 max-w-full rounded-md object-contain" />
   {:else if state.status === 'loading'}
-    <div class="bg-muted text-muted-foreground flex h-32 w-full items-center justify-center rounded-md">
+    <div class="bg-muted text-muted-foreground flex h-32 w-64 items-center justify-center rounded-md">
       <span class="i-mdi-loading size-6 animate-spin"></span>
     </div>
   {:else}
-    <div
-      class="bg-muted text-muted-foreground flex h-32 w-full flex-col items-center justify-center gap-1 rounded-md"
-    >
+    <div class="bg-muted text-muted-foreground flex h-32 w-64 flex-col items-center justify-center gap-1 rounded-md">
       <span class="i-mdi-image-broken-variant size-6"></span>
       <span class="text-sm">{state.message}</span>
     </div>
   {/if}
+{/snippet}
+
+<figure class="flex flex-col items-start gap-1">
+  <!-- `w-fit` shrinks the box to the image so the trash button sits on the image's corner. -->
+  <div class="relative w-fit">
+    {#if editable}
+      <button
+        type="button"
+        class="block cursor-pointer appearance-none rounded-md border-0 bg-transparent p-0 focus-visible:outline-2 disabled:cursor-default"
+        aria-label={$t`Replace Picture`}
+        disabled={busy}
+        onclick={() => onReplace?.()}
+      >
+        {@render imageContent()}
+      </button>
+      <button
+        type="button"
+        class="text-destructive bg-background/70 hover:bg-background absolute right-1 top-1 z-10 rounded-full p-1 shadow-sm transition-colors disabled:opacity-50"
+        aria-label={$t`Delete Picture`}
+        disabled={busy}
+        onclick={() => onDelete?.()}
+      >
+        <span class="i-mdi-delete size-5"></span>
+      </button>
+    {:else}
+      {@render imageContent()}
+    {/if}
+  </div>
   {#if caption}
     <figcaption class="text-muted-foreground text-center text-sm">{caption}</figcaption>
   {/if}
diff --git a/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte b/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte
index 4f458236cd..9dc252b21e 100644
--- a/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte
+++ b/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte
@@ -24,25 +24,22 @@
   // so guard against undefined rather than trusting the type at runtime.
   const pictures = $derived(value ?? []);
 
-  // The carousel reports which picture is currently shown; Replace/Delete act on it.
-  let selectedIndex = $state(0);
-  const currentPicture = $derived(pictures[selectedIndex]);
-
-  // Pause the carousel's auto-advance while the user is hovering/focusing the Replace or Delete
-  // buttons, so the "current" picture can't change out from under them before they click.
-  let pauseAutoplay = $state(false);
-
   // Formats the browser accepts and that the server supports for pictures.
   const ACCEPTED_TYPES = 'image/jpeg,image/png,image/tiff,image/bmp';
 
   let fileInputElement = $state<HTMLInputElement>();
-  // Which operation is in flight (drives per-button spinners + disabling the whole group).
+  // Which operation is in flight (drives the add-button spinner + disabling the edit affordances).
   let busyAction = $state<'add' | 'replace' | 'delete' | null>(null);
-  // Whether the file picker that's about to open is for adding or replacing.
-  let pendingFileAction: 'add' | 'replace' = 'add';
+  // The picture to replace once a file is chosen; undefined means the picker is adding a new one.
+  let pendingReplace = $state<IPicture | undefined>(undefined);
+
+  function pickAddFile() {
+    pendingReplace = undefined;
+    fileInputElement?.click();
+  }
 
-  function pickFile(action: 'add' | 'replace') {
-    pendingFileAction = action;
+  function requestReplace(picture: IPicture) {
+    pendingReplace = $state.snapshot(picture);
     fileInputElement?.click();
   }
 
@@ -51,8 +48,10 @@
     const file = target.files?.[0];
     // Reset the input so selecting the same file again re-triggers `change`.
     target.value = '';
+    const replaceTarget = pendingReplace;
+    pendingReplace = undefined;
     if (!file) return;
-    if (pendingFileAction === 'replace') void replacePicture(file);
+    if (replaceTarget) void replacePicture(replaceTarget, file);
     else void addPicture(file);
   }
 
@@ -97,9 +96,7 @@
     }
   }
 
-  async function replacePicture(file: File): Promise<void> {
-    const before = currentPicture ? $state.snapshot(currentPicture) : undefined;
-    if (!before) return;
+  async function replacePicture(before: IPicture, file: File): Promise<void> {
     busyAction = 'replace';
     try {
       const mediaUri = await uploadFile(file);
@@ -112,9 +109,8 @@
     }
   }
 
-  async function deletePicture(): Promise<void> {
-    const target = currentPicture ? $state.snapshot(currentPicture) : undefined;
-    if (!target) return;
+  async function deletePicture(picture: IPicture): Promise<void> {
+    const target = $state.snapshot(picture);
     if (!(await dialogsService.promptDelete($t`Picture`))) return;
     busyAction = 'delete';
     try {
@@ -136,7 +132,15 @@
 
 <div class="flex flex-col gap-2">
   {#if pictures.length > 0}
-    <PictureCarousel {pictures} bind:selectedIndex paused={pauseAutoplay} />
+    <!-- Replace/Delete live on the picture itself (tap the image to replace, trash-can in the
+         corner to delete), so they work on touch screens without hover. -->
+    <PictureCarousel
+      {pictures}
+      {readonly}
+      busy={busyAction !== null}
+      onReplacePicture={requestReplace}
+      onDeletePicture={deletePicture}
+    />
   {:else if readonly}
     <div class="text-muted-foreground p-1">
       {$t`No pictures`}
@@ -144,46 +148,13 @@
   {/if}
 
   {#if !readonly}
-    <!-- Buttons right-aligned to match the "+ Component" button style. -->
+    <!-- Right-aligned to match the "+ Component" button style. -->
     <div class="flex flex-wrap justify-end gap-2">
-      <Button icon="i-mdi-plus" size="xs" loading={busyAction === 'add'} disabled={busyAction !== null} onclick={() => pickFile('add')}>
+      <Button icon="i-mdi-plus" size="xs" loading={busyAction === 'add'} disabled={busyAction !== null} onclick={pickAddFile}>
         {$t`Picture`}
       </Button>
-      {#if pictures.length > 0}
-        <!-- Hovering or focusing these actions pauses auto-advance (mouseenter/leave fire on this
-             box; focusin/focusout bubble from the buttons) so the current picture stays put. -->
-        <div
-          class="flex gap-2"
-          role="group"
-          onmouseenter={() => (pauseAutoplay = true)}
-          onmouseleave={() => (pauseAutoplay = false)}
-          onfocusin={() => (pauseAutoplay = true)}
-          onfocusout={() => (pauseAutoplay = false)}
-        >
-          <Button
-            icon="i-mdi-image-refresh"
-            size="xs"
-            variant="secondary"
-            loading={busyAction === 'replace'}
-            disabled={busyAction !== null}
-            onclick={() => pickFile('replace')}
-          >
-            {$t`Replace Picture`}
-          </Button>
-          <Button
-            icon="i-mdi-delete"
-            size="xs"
-            variant="destructive"
-            loading={busyAction === 'delete'}
-            disabled={busyAction !== null}
-            onclick={() => deletePicture()}
-          >
-            {$t`Delete Picture`}
-          </Button>
-        </div>
-      {/if}
     </div>
-    <!-- Hidden input drives the OS file picker (shared by add + replace); only JPG/PNG offered. -->
+    <!-- Hidden input drives the OS file picker (shared by add + replace); only JPG/PNG/TIFF/BMP offered. -->
     <input
       bind:this={fileInputElement}
       type="file"
diff --git a/frontend/viewer/src/locales/en.po b/frontend/viewer/src/locales/en.po
index ad6db090dc..c36064754d 100644
--- a/frontend/viewer/src/locales/en.po
+++ b/frontend/viewer/src/locales/en.po
@@ -567,7 +567,7 @@ msgstr "Delete {0}"
 msgid "Delete Entry"
 msgstr "Delete Entry"
 
-#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
 msgid "Delete Picture"
 msgstr "Delete Picture"
 
@@ -1696,7 +1696,7 @@ msgstr "Reopen"
 msgid "Replace audio"
 msgstr "Replace audio"
 
-#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
 msgid "Replace Picture"
 msgstr "Replace Picture"
 
diff --git a/frontend/viewer/src/locales/es.po b/frontend/viewer/src/locales/es.po
index 323701ac78..393e2bdd96 100644
--- a/frontend/viewer/src/locales/es.po
+++ b/frontend/viewer/src/locales/es.po
@@ -572,7 +572,7 @@ msgstr "Borrar {0}"
 msgid "Delete Entry"
 msgstr "Borrar entrada"
 
-#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
 msgid "Delete Picture"
 msgstr ""
 
@@ -1701,7 +1701,7 @@ msgstr "Vuelva a abrir"
 msgid "Replace audio"
 msgstr "Sustituir audio"
 
-#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
 msgid "Replace Picture"
 msgstr ""
 
diff --git a/frontend/viewer/src/locales/fr.po b/frontend/viewer/src/locales/fr.po
index f04b672fb0..edfa70216e 100644
--- a/frontend/viewer/src/locales/fr.po
+++ b/frontend/viewer/src/locales/fr.po
@@ -572,7 +572,7 @@ msgstr "Supprimer {0}"
 msgid "Delete Entry"
 msgstr "Supprimer l'entrée"
 
-#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
 msgid "Delete Picture"
 msgstr ""
 
@@ -1701,7 +1701,7 @@ msgstr "Rouvrir"
 msgid "Replace audio"
 msgstr "Remplacer l'audio"
 
-#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
 msgid "Replace Picture"
 msgstr ""
 
diff --git a/frontend/viewer/src/locales/id.po b/frontend/viewer/src/locales/id.po
index 38d52e2ecf..dd462ad145 100644
--- a/frontend/viewer/src/locales/id.po
+++ b/frontend/viewer/src/locales/id.po
@@ -572,7 +572,7 @@ msgstr "Hapus {0}"
 msgid "Delete Entry"
 msgstr "Hapus Entri"
 
-#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
 msgid "Delete Picture"
 msgstr ""
 
@@ -1701,7 +1701,7 @@ msgstr "Buka kembali"
 msgid "Replace audio"
 msgstr "Mengganti audio"
 
-#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
 msgid "Replace Picture"
 msgstr ""
 
diff --git a/frontend/viewer/src/locales/ko.po b/frontend/viewer/src/locales/ko.po
index 09fcf9067c..477f284fed 100644
--- a/frontend/viewer/src/locales/ko.po
+++ b/frontend/viewer/src/locales/ko.po
@@ -572,7 +572,7 @@ msgstr "삭제 {0}"
 msgid "Delete Entry"
 msgstr "항목 삭제"
 
-#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
 msgid "Delete Picture"
 msgstr ""
 
@@ -1701,7 +1701,7 @@ msgstr "다시 열기"
 msgid "Replace audio"
 msgstr "오디오 교체"
 
-#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
 msgid "Replace Picture"
 msgstr ""
 
diff --git a/frontend/viewer/src/locales/ms.po b/frontend/viewer/src/locales/ms.po
index acc92d8f59..224c520430 100644
--- a/frontend/viewer/src/locales/ms.po
+++ b/frontend/viewer/src/locales/ms.po
@@ -572,7 +572,7 @@ msgstr "Hapus {0}"
 msgid "Delete Entry"
 msgstr "Padam Entri"
 
-#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
 msgid "Delete Picture"
 msgstr ""
 
@@ -1701,7 +1701,7 @@ msgstr "Buka semula"
 msgid "Replace audio"
 msgstr "Ganti audio"
 
-#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
 msgid "Replace Picture"
 msgstr ""
 
diff --git a/frontend/viewer/src/locales/sw.po b/frontend/viewer/src/locales/sw.po
index 283d56cef6..a53bb60eda 100644
--- a/frontend/viewer/src/locales/sw.po
+++ b/frontend/viewer/src/locales/sw.po
@@ -572,7 +572,7 @@ msgstr "Futa {0}"
 msgid "Delete Entry"
 msgstr "Futa ingizo"
 
-#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
 msgid "Delete Picture"
 msgstr ""
 
@@ -1701,7 +1701,7 @@ msgstr "Fungua Upya"
 msgid "Replace audio"
 msgstr "Badili sauti"
 
-#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
 msgid "Replace Picture"
 msgstr ""
 
diff --git a/frontend/viewer/src/locales/vi.po b/frontend/viewer/src/locales/vi.po
index 5f70d291e4..bec8d69372 100644
--- a/frontend/viewer/src/locales/vi.po
+++ b/frontend/viewer/src/locales/vi.po
@@ -572,7 +572,7 @@ msgstr "Xóa {0}"
 msgid "Delete Entry"
 msgstr "Xóa mục"
 
-#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
 msgid "Delete Picture"
 msgstr ""
 
@@ -1701,7 +1701,7 @@ msgstr "Mở lại"
 msgid "Replace audio"
 msgstr "Thay thế âm thanh"
 
-#: src/lib/entry-editor/field-editors/PicturesEditor.svelte
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
 msgid "Replace Picture"
 msgstr ""
 
diff --git a/frontend/viewer/tests/sense-pictures.test.ts b/frontend/viewer/tests/sense-pictures.test.ts
index 2e0b63f3ee..dcf21d95f8 100644
--- a/frontend/viewer/tests/sense-pictures.test.ts
+++ b/frontend/viewer/tests/sense-pictures.test.ts
@@ -1,9 +1,11 @@
 import {expect, test, type Page} from '@playwright/test';
 import {BrowsePage} from './browse-page';
 
-// A tiny valid 1x1 PNG, used to exercise the upload flow without a real image file.
-const ONE_PX_PNG = Buffer.from(
-  'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M8AAAMBAQDJ/pLvAAAAAElFTkSuQmCC',
+// A valid 96x96 PNG, used to exercise the upload flow without a real image file. It has real
+// dimensions (not 1x1) so the rendered image — and the trash button anchored to its corner —
+// occupy a realistic, clickable area.
+const TEST_PNG = Buffer.from(
+  'iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAIAAABt+uBvAAAAjklEQVR42u3QMQ0AAAgDsKlDGJoQiANOriZV0FQPhygQJEiQIEGCBAlCkCBBggQJEiQIQYIECRIkSJAgBAkSJEiQIEGCBCFIkCBBggQJEoQgQYIECRIkSBCCBAkSJEiQIEGCECRIkCBBggQJQpAgQYIECRIkCEGCBAkSJEiQIEEIEiRIkCBBggQhSJCgPwuoEXMcuO2DAAAAAABJRU5ErkJggg==',
   'base64',
 );
 
@@ -67,7 +69,7 @@ test.describe('Sense pictures', () => {
     await picturesField.locator('input[type="file"]').setInputFiles({
       name: 'photo.png',
       mimeType: 'image/png',
-      buffer: ONE_PX_PNG,
+      buffer: TEST_PNG,
     });
 
     // The uploaded picture is created and re-loaded via getFileStream into a blob url.
@@ -86,12 +88,12 @@ test.describe('Sense pictures', () => {
     const fileInput = picturesField.locator('input[type="file"]');
 
     // First upload creates a picture.
-    await fileInput.setInputFiles({name: 'shared.png', mimeType: 'image/png', buffer: ONE_PX_PNG});
+    await fileInput.setInputFiles({name: 'shared.png', mimeType: 'image/png', buffer: TEST_PNG});
     await expect(picturesField.locator('img').first()).toHaveAttribute('src', /^blob:/, {timeout: 5000});
 
     // Uploading the same filename again -> server reports AlreadyExists with the existing
     // mediaUri; that's not an error here, so a second Picture pointing at the same file is added.
-    await fileInput.setInputFiles({name: 'shared.png', mimeType: 'image/png', buffer: ONE_PX_PNG});
+    await fileInput.setInputFiles({name: 'shared.png', mimeType: 'image/png', buffer: TEST_PNG});
 
     // Two pictures now exist (the carousel shows a navigation dot per picture).
     await expect(picturesField.getByRole('button', {name: /^Go to picture/})).toHaveCount(2, {timeout: 5000});
@@ -105,7 +107,7 @@ test.describe('Sense pictures', () => {
     const picturesField = page.locator('[style*="grid-area: pictures"]').first();
     await expect(picturesField).toBeVisible({timeout: 5000});
     await picturesField.locator('input[type="file"]').setInputFiles({
-      name: 'photo.png', mimeType: 'image/png', buffer: ONE_PX_PNG,
+      name: 'photo.png', mimeType: 'image/png', buffer: TEST_PNG,
     });
     await expect(picturesField.locator('img').first()).toHaveAttribute('src', /^blob:/, {timeout: 5000});
     return picturesField;
@@ -142,7 +144,7 @@ test.describe('Sense pictures', () => {
 
     await picturesField.getByRole('button', {name: 'Replace Picture'}).click();
     await picturesField.locator('input[type="file"]').setInputFiles({
-      name: 'replacement.png', mimeType: 'image/png', buffer: ONE_PX_PNG,
+      name: 'replacement.png', mimeType: 'image/png', buffer: TEST_PNG,
     });
 
     // Still exactly one picture (replaced, not added), re-loaded into a fresh blob url.

From eca1d1b1d691f7f69fbf41b8d2f7601f273ff76d Mon Sep 17 00:00:00 2001
From: Robin Munn <rmunn@pobox.com>
Date: Wed, 8 Jul 2026 16:00:26 +0700
Subject: [PATCH 22/32] Simplify the multithreaded GetFileStream fix

The elaborate three-method dance with a TaskCompletionSource can be
simplified down to a simple ConcurrentDictionary.GetOrAdd() call.
---
 .../LcmCrdt/MediaServer/LcmMediaService.cs    | 66 ++-----------------
 1 file changed, 5 insertions(+), 61 deletions(-)

diff --git a/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs b/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs
index bc4ef96edc..efd5484cb0 100644
--- a/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs
+++ b/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs
@@ -61,28 +61,15 @@ public async Task DeleteResource(Guid fileId)
 
     public async Task<ReadFileResponse> GetFileStream(Guid fileId)
     {
+        var resource = await resourceService.GetLocalResource(fileId);
         var localResource = await resourceService.GetLocalResource(fileId);
         if (localResource is null)
         {
-            var connectionStatus = await httpClientProvider.ConnectionStatus();
-            if (connectionStatus != ConnectionStatus.Online)
+            localResource = await DownloadTasks.GetOrAdd(fileId, async _ =>
             {
-                return new ReadFileResponse(ReadFileResult.Offline);
-            }
-
-            try
-            {
-                localResource = await GetOrStartDownload(fileId);
-            }
-            catch (Exception e)
-            {
-                // The download can fail for reasons outside our control — the file may be missing
-                // on the server, or the media server/gateway may time out (504). Callers such as
-                // PictureImage expect failures via the result enum, not exceptions, so surface a
-                // graceful Error result (shown in the UI) instead of throwing an unhandled exception.
-                logger.LogError(e, "Failed to download media file {FileId}", fileId);
-                return new ReadFileResponse(ReadFileResult.Error, e.Message);
-            }
+                // Check again if we have it locally in case another thread completed before the GetOrAdd factory ran
+                return await resourceService.GetLocalResource(fileId) ?? await resourceService.DownloadResource(fileId, this);
+            });
         }
         //todo, consider trying to download the file again, maybe the cache was cleared
         if (!File.Exists(localResource.LocalPath))
@@ -90,49 +77,6 @@ public async Task<ReadFileResponse> GetFileStream(Guid fileId)
         return new(File.OpenRead(localResource.LocalPath), Path.GetFileName(localResource.LocalPath));
     }
 
-    private Task<LocalResource> GetOrStartDownload(Guid fileId)
-    {
-        // Use the *value* overload of GetOrAdd, not the factory overload: the factory can run more
-        // than once under contention (only one result is kept), which would start the download
-        // twice. Passing a not-yet-started TaskCompletionSource.Task lets exactly one caller — the
-        // one whose task actually got stored — kick off the download.
-        var tcs = new TaskCompletionSource<LocalResource>(TaskCreationOptions.RunContinuationsAsynchronously);
-        var task = DownloadTasks.GetOrAdd(fileId, tcs.Task);
-        if (task != tcs.Task)
-        {
-            // Another caller already owns the in-flight download; await theirs (our tcs is unused).
-            return task;
-        }
-        _ = RunDownloadAsync(fileId, tcs);
-        return task;
-    }
-
-    private async Task RunDownloadAsync(Guid fileId, TaskCompletionSource<LocalResource> tcs)
-    {
-        try
-        {
-            // Re-check before downloading: a previous download may have committed the LocalResource
-            // after our caller's GetLocalResource miss (this closes the race between
-            // GetLocalResource and DownloadResource). The task entry is removed only after this
-            // completes — i.e. after the download has committed — so any later caller that starts a
-            // fresh task will find the committed resource here and skip the download, rather than
-            // inserting a duplicate primary key.
-            var resource = await resourceService.GetLocalResource(fileId)
-                           ?? await resourceService.DownloadResource(fileId, this);
-            tcs.SetResult(resource);
-        }
-        catch (Exception e)
-        {
-            tcs.SetException(e);
-        }
-        finally
-        {
-            // Cached now, so future misses can start fresh; also prevents a failed download from
-            // being cached as a permanently-faulted task.
-            DownloadTasks.TryRemove(fileId, out _);
-        }
-    }
-
     // Media files are proxied (lexbox -> FwHeadless). A cold request — e.g. the first one after the
     // backend starts, before its code paths are JIT-warmed — can exceed the proxy's timeout and come
     // back as 504 (or 502/503) even though the backend keeps working and warms up. Retrying a

From 2bb8942c7c6988f3d086353a5a9957f4808e9c1a Mon Sep 17 00:00:00 2001
From: Robin Munn <rmunn@pobox.com>
Date: Wed, 8 Jul 2026 16:51:16 +0700
Subject: [PATCH 23/32] Don't dispose manually; use using

---
 backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs b/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs
index efd5484cb0..38591124c8 100644
--- a/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs
+++ b/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs
@@ -96,7 +96,7 @@ public async Task<ReadFileResponse> GetFileStream(Guid fileId)
         var mediaClient = await MediaServerClient();
         for (var attempt = 1; ; attempt++)
         {
-            var response = await mediaClient.DownloadFile(fileId);
+            using var response = await mediaClient.DownloadFile(fileId);
             if (response.IsSuccessStatusCode)
             {
                 return (await response.Content.ReadAsStreamAsync(), response.Content.Headers.ContentDisposition?.FileName?.Replace("\"", ""));
@@ -104,8 +104,6 @@ public async Task<ReadFileResponse> GetFileStream(Guid fileId)
 
             var statusCode = response.StatusCode;
             var reasonPhrase = response.ReasonPhrase;
-            response.Dispose();
-
             if (attempt >= MaxDownloadAttempts || !TransientDownloadStatusCodes.Contains(statusCode))
             {
                 throw new Exception($"Failed to download file {fileId}: {statusCode} {reasonPhrase}");

From d4fb1fa96a256febd08e20cfb0a15bb62e1bbae7 Mon Sep 17 00:00:00 2001
From: Robin Munn <robin_munn@sil.org>
Date: Thu, 9 Jul 2026 10:46:37 +0700
Subject: [PATCH 24/32] Replace picture carousel with a wrapping flex gallery

Lay the sense pictures out in a flexbox that flows left-to-right and wraps, so
on a narrow (mobile) screen they stack vertically with no CSS change. Each flex
item is one picture plus its caption.

- Pictures now have a fixed height and flexible (aspect-preserving) width.
- The caption shows a single writing system: the first non-empty value searching
  vernacular writing systems first, then analysis (writingSystemService.first's
  default order).
- The caption is pinned to the picture's width (w-0 min-w-full) and clamped to
  two lines (line-clamp-2), so it never extends past the image.

The trash-can delete button and tap-to-replace affordance carry over unchanged.
Removes PictureCarousel.svelte, the shadcn carousel component, and the now-unused
embla-carousel-svelte dependency (all only existed for the carousel). The test's
dot-count assertion becomes an image-count assertion.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/pnpm-lock.yaml                       |  28 -----
 frontend/viewer/package.json                  |   1 -
 .../ui/carousel/carousel-content.svelte       |  43 -------
 .../ui/carousel/carousel-item.svelte          |  30 -----
 .../ui/carousel/carousel-next.svelte          |  39 ------
 .../ui/carousel/carousel-previous.svelte      |  39 ------
 .../components/ui/carousel/carousel.svelte    |  94 --------------
 .../src/lib/components/ui/carousel/context.ts |  58 ---------
 .../src/lib/components/ui/carousel/index.ts   |  19 ---
 .../field-editors/PictureCarousel.svelte      | 115 ------------------
 .../field-editors/PictureImage.svelte         |  17 ++-
 .../field-editors/PicturesEditor.svelte       |  25 ++--
 frontend/viewer/tests/sense-pictures.test.ts  |   4 +-
 13 files changed, 29 insertions(+), 483 deletions(-)
 delete mode 100644 frontend/viewer/src/lib/components/ui/carousel/carousel-content.svelte
 delete mode 100644 frontend/viewer/src/lib/components/ui/carousel/carousel-item.svelte
 delete mode 100644 frontend/viewer/src/lib/components/ui/carousel/carousel-next.svelte
 delete mode 100644 frontend/viewer/src/lib/components/ui/carousel/carousel-previous.svelte
 delete mode 100644 frontend/viewer/src/lib/components/ui/carousel/carousel.svelte
 delete mode 100644 frontend/viewer/src/lib/components/ui/carousel/context.ts
 delete mode 100644 frontend/viewer/src/lib/components/ui/carousel/index.ts
 delete mode 100644 frontend/viewer/src/lib/entry-editor/field-editors/PictureCarousel.svelte

diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 160f6180f4..7b3ca922d8 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -516,9 +516,6 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
-      embla-carousel-svelte:
-        specifier: ^8.6.0
-        version: 8.6.0(svelte@5.56.0(@typescript-eslint/types@8.56.1))
       eslint:
         specifier: 'catalog:'
         version: 9.39.3(jiti@2.6.1)
@@ -4513,19 +4510,6 @@ packages:
   electron-to-chromium@1.5.302:
     resolution: {integrity: sha512-sM6HAN2LyK82IyPBpznDRqlTQAtuSaO+ShzFiWTvoMJLHyZ+Y39r8VMfHzwbU8MVBzQ4Wdn85+wlZl2TLGIlwg==}
 
-  embla-carousel-reactive-utils@8.6.0:
-    resolution: {integrity: sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==}
-    peerDependencies:
-      embla-carousel: 8.6.0
-
-  embla-carousel-svelte@8.6.0:
-    resolution: {integrity: sha512-ZDsKk8Sdv+AUTygMYcwZjfRd1DTh+JSUzxkOo8b9iKAkYjg+39mzbY/lwHsE3jXSpKxdKWS69hPSNuzlOGtR2Q==}
-    peerDependencies:
-      svelte: ^3.49.0 || ^4.0.0 || ^5.0.0
-
-  embla-carousel@8.6.0:
-    resolution: {integrity: sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==}
-
   emoji-regex@10.6.0:
     resolution: {integrity: sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==}
 
@@ -12292,18 +12276,6 @@ snapshots:
 
   electron-to-chromium@1.5.302: {}
 
-  embla-carousel-reactive-utils@8.6.0(embla-carousel@8.6.0):
-    dependencies:
-      embla-carousel: 8.6.0
-
-  embla-carousel-svelte@8.6.0(svelte@5.56.0(@typescript-eslint/types@8.56.1)):
-    dependencies:
-      embla-carousel: 8.6.0
-      embla-carousel-reactive-utils: 8.6.0(embla-carousel@8.6.0)
-      svelte: 5.56.0(@typescript-eslint/types@8.56.1)
-
-  embla-carousel@8.6.0: {}
-
   emoji-regex@10.6.0: {}
 
   emoji-regex@8.0.0: {}
diff --git a/frontend/viewer/package.json b/frontend/viewer/package.json
index 645a52abe2..380725d7f7 100644
--- a/frontend/viewer/package.json
+++ b/frontend/viewer/package.json
@@ -67,7 +67,6 @@
     "@vitest/ui": "catalog:",
     "bits-ui": "2.16.4",
     "clsx": "^2.1.1",
-    "embla-carousel-svelte": "^8.6.0",
     "eslint": "catalog:",
     "eslint-config-prettier": "^10.1.8",
     "eslint-output": "catalog:",
diff --git a/frontend/viewer/src/lib/components/ui/carousel/carousel-content.svelte b/frontend/viewer/src/lib/components/ui/carousel/carousel-content.svelte
deleted file mode 100644
index f1467db826..0000000000
--- a/frontend/viewer/src/lib/components/ui/carousel/carousel-content.svelte
+++ /dev/null
@@ -1,43 +0,0 @@
-<script lang="ts">
-	import emblaCarouselSvelte from 'embla-carousel-svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { getEmblaContext } from './context.js';
-	import { cn, type WithElementRef } from '$lib/utils.js';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-
-	const emblaCtx = getEmblaContext('<Carousel.Content/>');
-</script>
-
-<div
-	data-slot="carousel-content"
-	class="overflow-hidden"
-	use:emblaCarouselSvelte={{
-		options: {
-			container: '[data-embla-container]',
-			slides: '[data-embla-slide]',
-			...emblaCtx.options,
-			axis: emblaCtx.orientation === 'horizontal' ? 'x' : 'y',
-		},
-		plugins: emblaCtx.plugins,
-	}}
-	onemblaInit={emblaCtx.onInit}
->
-	<div
-		bind:this={ref}
-		class={cn(
-			'flex',
-			emblaCtx.orientation === 'horizontal' ? '-ms-4' : '-mt-4 flex-col',
-			className
-		)}
-		data-embla-container=""
-		{...restProps}
-	>
-		{@render children?.()}
-	</div>
-</div>
diff --git a/frontend/viewer/src/lib/components/ui/carousel/carousel-item.svelte b/frontend/viewer/src/lib/components/ui/carousel/carousel-item.svelte
deleted file mode 100644
index 1cf361e90d..0000000000
--- a/frontend/viewer/src/lib/components/ui/carousel/carousel-item.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { getEmblaContext } from './context.js';
-	import { cn, type WithElementRef } from '$lib/utils.js';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-
-	const emblaCtx = getEmblaContext('<Carousel.Item/>');
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="carousel-item"
-	role="group"
-	aria-roledescription="slide"
-	class={cn(
-		'min-w-0 shrink-0 grow-0 basis-full',
-		emblaCtx.orientation === 'horizontal' ? 'ps-4' : 'pt-4',
-		className
-	)}
-	data-embla-slide=""
-	{...restProps}
->
-	{@render children?.()}
-</div>
diff --git a/frontend/viewer/src/lib/components/ui/carousel/carousel-next.svelte b/frontend/viewer/src/lib/components/ui/carousel/carousel-next.svelte
deleted file mode 100644
index aa627d09e0..0000000000
--- a/frontend/viewer/src/lib/components/ui/carousel/carousel-next.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-<script lang="ts">
-	import type { WithoutChildren } from 'bits-ui';
-	import { getEmblaContext } from './context.js';
-	import { cn } from '$lib/utils.js';
-	import { Button, type Props } from '$lib/components/ui/button/index.js';
-	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		variant = 'outline',
-		size = 'icon-sm',
-		...restProps
-	}: WithoutChildren<Props> = $props();
-
-	const emblaCtx = getEmblaContext('<Carousel.Next/>');
-</script>
-
-<Button
-	data-slot="carousel-next"
-	{variant}
-	{size}
-	aria-disabled={!emblaCtx.canScrollNext}
-	disabled={!emblaCtx.canScrollNext}
-	class={cn(
-		'rounded-full absolute touch-manipulation',
-		emblaCtx.orientation === 'horizontal'
-			? 'inset-y-0 -end-12 my-auto'
-			: 'start-1/2 -bottom-12 -translate-x-1/2 rotate-90',
-		className
-	)}
-	onclick={emblaCtx.scrollNext}
-	onkeydown={emblaCtx.handleKeyDown}
-	bind:ref
-	{...restProps}
->
-	<ChevronRightIcon  />
-	<span class="sr-only">Next slide</span>
-</Button>
diff --git a/frontend/viewer/src/lib/components/ui/carousel/carousel-previous.svelte b/frontend/viewer/src/lib/components/ui/carousel/carousel-previous.svelte
deleted file mode 100644
index 07fe3a8169..0000000000
--- a/frontend/viewer/src/lib/components/ui/carousel/carousel-previous.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-<script lang="ts">
-	import type { WithoutChildren } from 'bits-ui';
-	import { getEmblaContext } from './context.js';
-	import { cn } from '$lib/utils.js';
-	import { Button, type Props } from '$lib/components/ui/button/index.js';
-	import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		variant = 'outline',
-		size = 'icon-sm',
-		...restProps
-	}: WithoutChildren<Props> = $props();
-
-	const emblaCtx = getEmblaContext('<Carousel.Previous/>');
-</script>
-
-<Button
-	data-slot="carousel-previous"
-	{variant}
-	{size}
-	aria-disabled={!emblaCtx.canScrollPrev}
-	disabled={!emblaCtx.canScrollPrev}
-	class={cn(
-		'rounded-full absolute touch-manipulation',
-		emblaCtx.orientation === 'horizontal'
-			? 'inset-y-0 -start-12 my-auto'
-			: 'start-1/2 -top-12 -translate-x-1/2 rotate-90',
-		className
-	)}
-	onclick={emblaCtx.scrollPrev}
-	onkeydown={emblaCtx.handleKeyDown}
-	{...restProps}
-	bind:ref
->
-	<ChevronLeftIcon  />
-	<span class="sr-only">Previous slide</span>
-</Button>
diff --git a/frontend/viewer/src/lib/components/ui/carousel/carousel.svelte b/frontend/viewer/src/lib/components/ui/carousel/carousel.svelte
deleted file mode 100644
index cce28cf192..0000000000
--- a/frontend/viewer/src/lib/components/ui/carousel/carousel.svelte
+++ /dev/null
@@ -1,94 +0,0 @@
-<script lang="ts">
-	import {
-		type CarouselAPI,
-		type CarouselProps,
-		type EmblaContext,
-		setEmblaContext,
-	} from './context.js';
-	import { cn, type WithElementRef } from '$lib/utils.js';
-
-	let {
-		ref = $bindable(null),
-		opts = {},
-		plugins = [],
-		setApi = () => {},
-		orientation = 'horizontal',
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<CarouselProps> = $props();
-
-	// svelte-ignore state_referenced_locally
-	let carouselState = $state<EmblaContext>({
-		api: undefined,
-		scrollPrev,
-		scrollNext,
-		orientation,
-		canScrollNext: false,
-		canScrollPrev: false,
-		handleKeyDown,
-		options: opts,
-		plugins,
-		onInit,
-		scrollSnaps: [],
-		selectedIndex: 0,
-		scrollTo,
-	});
-
-	setEmblaContext(carouselState);
-
-	function scrollPrev() {
-		carouselState.api?.scrollPrev();
-	}
-
-	function scrollNext() {
-		carouselState.api?.scrollNext();
-	}
-
-	function scrollTo(index: number, jump?: boolean) {
-		carouselState.api?.scrollTo(index, jump);
-	}
-
-	function onSelect() {
-		if (!carouselState.api) return;
-		carouselState.selectedIndex = carouselState.api.selectedScrollSnap();
-		carouselState.canScrollNext = carouselState.api.canScrollNext();
-		carouselState.canScrollPrev = carouselState.api.canScrollPrev();
-	}
-
-	function handleKeyDown(e: KeyboardEvent) {
-		if (e.key === 'ArrowLeft') {
-			e.preventDefault();
-			scrollPrev();
-		} else if (e.key === 'ArrowRight') {
-			e.preventDefault();
-			scrollNext();
-		}
-	}
-
-	function onInit(event: CustomEvent<CarouselAPI>) {
-		carouselState.api = event.detail;
-		setApi(carouselState.api);
-
-		carouselState.scrollSnaps = carouselState.api.scrollSnapList();
-		carouselState.api.on('select', onSelect);
-		onSelect();
-	}
-
-	$effect(() => {
-		return () => {
-			carouselState.api?.off('select', onSelect);
-		};
-	});
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="carousel"
-	class={cn('relative', className)}
-	role="region"
-	aria-roledescription="carousel"
-	{...restProps}
->
-	{@render children?.()}
-</div>
diff --git a/frontend/viewer/src/lib/components/ui/carousel/context.ts b/frontend/viewer/src/lib/components/ui/carousel/context.ts
deleted file mode 100644
index 138d672965..0000000000
--- a/frontend/viewer/src/lib/components/ui/carousel/context.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import type { WithElementRef } from '$lib/utils.js';
-import type {
-	EmblaCarouselSvelteType,
-	default as emblaCarouselSvelte,
-} from 'embla-carousel-svelte';
-import { getContext, hasContext, setContext } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-
-export type CarouselAPI =
-	NonNullable<NonNullable<EmblaCarouselSvelteType['$$_attributes']>['on:emblaInit']> extends (
-		evt: CustomEvent<infer CarouselAPI>
-	) => void
-		? CarouselAPI
-		: never;
-
-type EmblaCarouselConfig = NonNullable<Parameters<typeof emblaCarouselSvelte>[1]>;
-
-export type CarouselOptions = EmblaCarouselConfig['options'];
-export type CarouselPlugins = EmblaCarouselConfig['plugins'];
-
-////
-
-export type CarouselProps = {
-	opts?: CarouselOptions;
-	plugins?: CarouselPlugins;
-	setApi?: (api: CarouselAPI | undefined) => void;
-	orientation?: 'horizontal' | 'vertical';
-} & WithElementRef<HTMLAttributes<HTMLDivElement>>;
-
-const EMBLA_CAROUSEL_CONTEXT = Symbol('EMBLA_CAROUSEL_CONTEXT');
-
-export type EmblaContext = {
-	api: CarouselAPI | undefined;
-	orientation: 'horizontal' | 'vertical';
-	scrollNext: () => void;
-	scrollPrev: () => void;
-	canScrollNext: boolean;
-	canScrollPrev: boolean;
-	handleKeyDown: (e: KeyboardEvent) => void;
-	options: CarouselOptions;
-	plugins: CarouselPlugins;
-	onInit: (e: CustomEvent<CarouselAPI>) => void;
-	scrollTo: (index: number, jump?: boolean) => void;
-	scrollSnaps: number[];
-	selectedIndex: number;
-};
-
-export function setEmblaContext(config: EmblaContext): EmblaContext {
-	setContext(EMBLA_CAROUSEL_CONTEXT, config);
-	return config;
-}
-
-export function getEmblaContext(name = 'This component') {
-	if (!hasContext(EMBLA_CAROUSEL_CONTEXT)) {
-		throw new Error(`${name} must be used within a <Carousel.Root> component`);
-	}
-	return getContext<ReturnType<typeof setEmblaContext>>(EMBLA_CAROUSEL_CONTEXT);
-}
diff --git a/frontend/viewer/src/lib/components/ui/carousel/index.ts b/frontend/viewer/src/lib/components/ui/carousel/index.ts
deleted file mode 100644
index 79d2a288e3..0000000000
--- a/frontend/viewer/src/lib/components/ui/carousel/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import Root from './carousel.svelte';
-import Content from './carousel-content.svelte';
-import Item from './carousel-item.svelte';
-import Previous from './carousel-previous.svelte';
-import Next from './carousel-next.svelte';
-
-export {
-	Root,
-	Content,
-	Item,
-	Previous,
-	Next,
-	//
-	Root as Carousel,
-	Content as CarouselContent,
-	Item as CarouselItem,
-	Previous as CarouselPrevious,
-	Next as CarouselNext,
-};
diff --git a/frontend/viewer/src/lib/entry-editor/field-editors/PictureCarousel.svelte b/frontend/viewer/src/lib/entry-editor/field-editors/PictureCarousel.svelte
deleted file mode 100644
index c1a6c185a9..0000000000
--- a/frontend/viewer/src/lib/entry-editor/field-editors/PictureCarousel.svelte
+++ /dev/null
@@ -1,115 +0,0 @@
-<script lang="ts">
-  import * as Carousel from '$lib/components/ui/carousel';
-  import type {CarouselAPI} from '$lib/components/ui/carousel/context';
-  import type {IPicture} from '$lib/dotnet-types';
-  import PictureImage from './PictureImage.svelte';
-  import {Button} from '$lib/components/ui/button';
-  import {cn} from '$lib/utils';
-  import {t} from 'svelte-i18n-lingui';
-
-  /** Each picture is shown for 10 seconds before the carousel advances. */
-  const AUTOPLAY_DELAY_MS = 10_000;
-
-  type Props = {
-    pictures: IPicture[];
-    /** Index of the picture currently shown; bindable so parents can observe the active picture. */
-    selectedIndex?: number;
-    readonly?: boolean;
-    /** Disables the per-picture edit affordances while an operation is in flight. */
-    busy?: boolean;
-    /** Called with the picture the user tapped, to replace it. */
-    onReplacePicture?: (picture: IPicture) => void;
-    /** Called with the picture whose trash button was clicked, to delete it. */
-    onDeletePicture?: (picture: IPicture) => void;
-  };
-  let {
-    pictures,
-    selectedIndex = $bindable(0),
-    readonly = false,
-    busy = false,
-    onReplacePicture,
-    onDeletePicture,
-  }: Props = $props();
-
-  // The Embla api, captured from <Carousel.Root setApi>. We drive our own controls (dots +
-  // prev/next) through it rather than using <Carousel.Previous/Next>, which are positioned
-  // outside the frame with English-only labels and offer no dot indicator.
-  let api = $state<CarouselAPI>();
-
-  const hasMultiple = $derived(pictures.length > 1);
-
-  // Keep the active-dot indicator (and the parent's `selectedIndex`) in sync with the carousel.
-  $effect(() => {
-    if (!api) return;
-    const embla = api;
-    function onSelect() {
-      selectedIndex = embla.selectedScrollSnap();
-    }
-    onSelect();
-    embla.on('select', onSelect);
-    embla.on('reInit', onSelect);
-    return () => {
-      embla.off('select', onSelect);
-      embla.off('reInit', onSelect);
-    };
-  });
-
-  // Auto-advance every 10 seconds when there is more than one picture. Delete/replace act on
-  // the specific picture the user targets, so autoplay can't cause them to hit the wrong one.
-  $effect(() => {
-    if (!api || !hasMultiple) return;
-    const embla = api;
-    const interval = setInterval(() => embla.scrollNext(), AUTOPLAY_DELAY_MS);
-    return () => clearInterval(interval);
-  });
-</script>
-
-<!-- With multiple pictures we bound the carousel to a fixed width and center each picture in
-     it, so the centered controls below sit under the picture. (Embla lays slides out in a flex
-     row, so a shrink-to-fit width would span the sum of all slides.) A single picture keeps its
-     natural, left-justified size since it has no controls to align. -->
-<div class={cn('flex flex-col gap-2', hasMultiple && 'max-w-md')}>
-  <Carousel.Root setApi={(a) => (api = a)} opts={{loop: true}}>
-    <Carousel.Content>
-      {#each pictures as picture (picture.id)}
-        <Carousel.Item class={cn(hasMultiple && 'flex justify-center')}>
-          <PictureImage
-            {picture}
-            {busy}
-            onReplace={readonly ? undefined : () => onReplacePicture?.(picture)}
-            onDelete={readonly ? undefined : () => onDeletePicture?.(picture)}
-          />
-        </Carousel.Item>
-      {/each}
-    </Carousel.Content>
-  </Carousel.Root>
-
-  {#if hasMultiple}
-    <div class="flex items-center justify-center gap-2">
-      <Button
-        variant="ghost"
-        size="icon-xs"
-        icon="i-mdi-chevron-left"
-        aria-label={$t`Previous picture`}
-        onclick={() => api?.scrollPrev()}
-      />
-      <div class="flex items-center gap-1.5">
-        {#each pictures as picture, i (picture.id)}
-          <button
-            type="button"
-            aria-label={$t`Go to picture ${i + 1}`}
-            class={cn('size-2 rounded-full transition-colors', i === selectedIndex ? 'bg-primary' : 'bg-muted-foreground/40')}
-            onclick={() => api?.scrollTo(i)}
-          ></button>
-        {/each}
-      </div>
-      <Button
-        variant="ghost"
-        size="icon-xs"
-        icon="i-mdi-chevron-right"
-        aria-label={$t`Next picture`}
-        onclick={() => api?.scrollNext()}
-      />
-    </div>
-  {/if}
-</div>
diff --git a/frontend/viewer/src/lib/entry-editor/field-editors/PictureImage.svelte b/frontend/viewer/src/lib/entry-editor/field-editors/PictureImage.svelte
index 6dd3adc354..394fd40962 100644
--- a/frontend/viewer/src/lib/entry-editor/field-editors/PictureImage.svelte
+++ b/frontend/viewer/src/lib/entry-editor/field-editors/PictureImage.svelte
@@ -24,7 +24,9 @@
   const api = $derived(projectContext?.maybeApi);
   const writingSystemService = useWritingSystemService();
 
-  const caption = $derived(writingSystemService.first(picture.caption, writingSystemService.analysis) ?? '');
+  // Show a single writing system: the first non-empty caption searching vernacular writing
+  // systems first, then analysis — which is exactly the default order of allWritingSystems().
+  const caption = $derived(writingSystemService.first(picture.caption) ?? '');
 
   type LoadState =
     | {status: 'loading'}
@@ -75,13 +77,14 @@
 
 {#snippet imageContent()}
   {#if state.status === 'loaded'}
-    <img src={state.url} alt={caption || $t`Picture`} class="max-h-64 max-w-full rounded-md object-contain" />
+    <!-- Fixed height, flexible width: the image keeps its aspect ratio and its width varies. -->
+    <img src={state.url} alt={caption || $t`Picture`} class="h-40 w-auto rounded-md object-contain" />
   {:else if state.status === 'loading'}
-    <div class="bg-muted text-muted-foreground flex h-32 w-64 items-center justify-center rounded-md">
+    <div class="bg-muted text-muted-foreground flex h-40 w-40 items-center justify-center rounded-md">
       <span class="i-mdi-loading size-6 animate-spin"></span>
     </div>
   {:else}
-    <div class="bg-muted text-muted-foreground flex h-32 w-64 flex-col items-center justify-center gap-1 rounded-md">
+    <div class="bg-muted text-muted-foreground flex h-40 w-40 flex-col items-center justify-center gap-1 rounded-md">
       <span class="i-mdi-image-broken-variant size-6"></span>
       <span class="text-sm">{state.message}</span>
     </div>
@@ -115,6 +118,10 @@
     {/if}
   </div>
   {#if caption}
-    <figcaption class="text-muted-foreground text-center text-sm">{caption}</figcaption>
+    <!-- `w-0 min-w-full` pins the caption to the image's width (the box above), so its `max-width`
+         is the picture width; line-clamp-2 caps it at two lines with an ellipsis. -->
+    <figcaption class="text-muted-foreground line-clamp-2 w-0 min-w-full break-words text-sm">
+      {caption}
+    </figcaption>
   {/if}
 </figure>
diff --git a/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte b/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte
index 9dc252b21e..d85f159dd3 100644
--- a/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte
+++ b/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte
@@ -2,7 +2,7 @@
   import type {IPicture} from '$lib/dotnet-types';
   import {UploadFileResult} from '$lib/dotnet-types/generated-types/MiniLcm/Media/UploadFileResult';
   import {Button} from '$lib/components/ui/button';
-  import PictureCarousel from './PictureCarousel.svelte';
+  import PictureImage from './PictureImage.svelte';
   import {t} from 'svelte-i18n-lingui';
   import {useLexboxApi} from '$lib/services/service-provider';
   import {useDialogsService} from '$lib/services/dialogs-service';
@@ -132,15 +132,20 @@
 
 <div class="flex flex-col gap-2">
   {#if pictures.length > 0}
-    <!-- Replace/Delete live on the picture itself (tap the image to replace, trash-can in the
-         corner to delete), so they work on touch screens without hover. -->
-    <PictureCarousel
-      {pictures}
-      {readonly}
-      busy={busyAction !== null}
-      onReplacePicture={requestReplace}
-      onDeletePicture={deletePicture}
-    />
+    <!-- Pictures flow left-to-right and wrap; on a narrow (mobile) screen they stack vertically
+         with no CSS change. Each picture + its caption is one flex item. Replace/Delete live on
+         the picture itself (tap the image to replace, trash-can in the corner to delete), so
+         they work on touch screens without hover. -->
+    <div class="flex flex-wrap gap-4">
+      {#each pictures as picture (picture.id)}
+        <PictureImage
+          {picture}
+          busy={busyAction !== null}
+          onReplace={readonly ? undefined : () => requestReplace(picture)}
+          onDelete={readonly ? undefined : () => void deletePicture(picture)}
+        />
+      {/each}
+    </div>
   {:else if readonly}
     <div class="text-muted-foreground p-1">
       {$t`No pictures`}
diff --git a/frontend/viewer/tests/sense-pictures.test.ts b/frontend/viewer/tests/sense-pictures.test.ts
index dcf21d95f8..a6c2685ccf 100644
--- a/frontend/viewer/tests/sense-pictures.test.ts
+++ b/frontend/viewer/tests/sense-pictures.test.ts
@@ -95,8 +95,8 @@ test.describe('Sense pictures', () => {
     // mediaUri; that's not an error here, so a second Picture pointing at the same file is added.
     await fileInput.setInputFiles({name: 'shared.png', mimeType: 'image/png', buffer: TEST_PNG});
 
-    // Two pictures now exist (the carousel shows a navigation dot per picture).
-    await expect(picturesField.getByRole('button', {name: /^Go to picture/})).toHaveCount(2, {timeout: 5000});
+    // Two pictures now exist (each renders its own image in the flex layout).
+    await expect(picturesField.locator('img')).toHaveCount(2, {timeout: 5000});
   });
 
   /** Uploads one picture to "ambuka" (which starts empty) and returns the pictures-field locator. */

From 42b09ee82f4e76cdc8ec2b900c821e22ba7ea1ef Mon Sep 17 00:00:00 2001
From: Robin Munn <robin_munn@sil.org>
Date: Thu, 9 Jul 2026 12:09:28 +0700
Subject: [PATCH 25/32] Add an edit-picture dialog with caption editing

Clicking a picture (hinted by a pencil icon in its corner, replacing the old
trash-can) now opens an Edit Picture dialog instead of triggering a replace.
The dialog shows the picture centered at the top, a RichMultiWsInput for the
Caption underneath, and Replace Picture / Delete Picture buttons.

- PictureImage: the trash-can + tap-to-replace are replaced by a single
  tap-to-edit affordance (whole picture clickable; pencil is the hint). Adds a
  showCaption prop so the dialog can show the image without the read-only caption.
- PicturesEditor: keeps add-picture; replace/delete/caption now run as edit-dialog
  callbacks against the picture being edited (tracked by id so its image updates
  in the dialog after a replace).
- Extracts the shared upload formats into picture-formats.ts.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../field-editors/EditPictureDialog.svelte    |  87 +++++++++++++++
 .../field-editors/PictureImage.svelte         |  37 +++----
 .../field-editors/PicturesEditor.svelte       | 100 +++++++++++-------
 .../field-editors/picture-formats.ts          |  11 ++
 frontend/viewer/src/locales/en.po             |  29 ++---
 frontend/viewer/src/locales/es.po             |  29 ++---
 frontend/viewer/src/locales/fr.po             |  29 ++---
 frontend/viewer/src/locales/id.po             |  29 ++---
 frontend/viewer/src/locales/ko.po             |  29 ++---
 frontend/viewer/src/locales/ms.po             |  29 ++---
 frontend/viewer/src/locales/sw.po             |  29 ++---
 frontend/viewer/src/locales/vi.po             |  29 ++---
 frontend/viewer/tests/sense-pictures.test.ts  |  68 ++++++++----
 13 files changed, 310 insertions(+), 225 deletions(-)
 create mode 100644 frontend/viewer/src/lib/entry-editor/field-editors/EditPictureDialog.svelte
 create mode 100644 frontend/viewer/src/lib/entry-editor/field-editors/picture-formats.ts

diff --git a/frontend/viewer/src/lib/entry-editor/field-editors/EditPictureDialog.svelte b/frontend/viewer/src/lib/entry-editor/field-editors/EditPictureDialog.svelte
new file mode 100644
index 0000000000..c91ab34ac9
--- /dev/null
+++ b/frontend/viewer/src/lib/entry-editor/field-editors/EditPictureDialog.svelte
@@ -0,0 +1,87 @@
+<script lang="ts">
+  import type {IPicture, IRichMultiString} from '$lib/dotnet-types';
+  import * as Dialog from '$lib/components/ui/dialog';
+  import * as Editor from '$lib/components/editor';
+  import {RichMultiWsInput} from '$lib/components/field-editors';
+  import {Button} from '$lib/components/ui/button';
+  import PictureImage from './PictureImage.svelte';
+  import {ACCEPTED_PICTURE_TYPES} from './picture-formats';
+  import {t} from 'svelte-i18n-lingui';
+  import {useWritingSystemService} from '$project/data';
+  import {useBackHandler} from '$lib/utils/back-handler.svelte';
+  import {watch} from 'runed';
+
+  type Props = {
+    open: boolean;
+    picture: IPicture;
+    /** Disables Replace/Delete while an operation is in flight. */
+    busy?: boolean;
+    onReplace: (file: File) => void;
+    onDelete: () => void;
+    onCaptionChange: (caption: IRichMultiString) => void;
+  };
+  let {open = $bindable(false), picture, busy = false, onReplace, onDelete, onCaptionChange}: Props = $props();
+
+  useBackHandler({addToStack: () => open, onBack: () => (open = false), key: 'edit-picture-dialog'});
+  const writingSystemService = useWritingSystemService();
+
+  // A local, editable copy of the caption. Editing round-trips through the API, which reloads the
+  // entry; keeping the input's value local means that reload can't reset it mid-edit. Re-seeded
+  // each time the dialog opens so it reflects the picture being edited.
+  let caption = $state<IRichMultiString>({});
+  watch(
+    () => open,
+    () => {
+      if (open) caption = structuredClone($state.snapshot(picture.caption ?? {}));
+    },
+  );
+
+  let fileInputElement = $state<HTMLInputElement>();
+  function onFileSelected(event: Event) {
+    const target = event.target as HTMLInputElement;
+    const file = target.files?.[0];
+    // Reset so picking the same file again re-triggers `change`.
+    target.value = '';
+    if (file) onReplace(file);
+  }
+</script>
+
+<Dialog.Root bind:open>
+  <Dialog.DialogContent onOpenAutoFocus={(e) => e.preventDefault()}>
+    <Dialog.DialogHeader>
+      <Dialog.DialogTitle>{$t`Edit Picture`}</Dialog.DialogTitle>
+    </Dialog.DialogHeader>
+
+    <!-- Picture at the top, centered in the dialog. -->
+    <div class="flex justify-center">
+      <PictureImage {picture} showCaption={false} />
+    </div>
+
+    <!-- Caption editor. Wrapped in the editor grid so RichMultiWsInput's subgrid rows lay out. -->
+    <Editor.Root>
+      <Editor.Grid>
+        <Editor.Field.Root>
+          <Editor.Field.Title name={$t`Caption`} />
+          <Editor.Field.Body subGrid>
+            <RichMultiWsInput
+              bind:value={caption}
+              writingSystems={writingSystemService.allWritingSystems()}
+              onchange={() => onCaptionChange($state.snapshot(caption))}
+            />
+          </Editor.Field.Body>
+        </Editor.Field.Root>
+      </Editor.Grid>
+    </Editor.Root>
+
+    <Dialog.DialogFooter>
+      <Button icon="i-mdi-image-refresh" variant="secondary" disabled={busy} onclick={() => fileInputElement?.click()}>
+        {$t`Replace Picture`}
+      </Button>
+      <Button icon="i-mdi-delete" variant="destructive" disabled={busy} onclick={() => onDelete()}>
+        {$t`Delete Picture`}
+      </Button>
+    </Dialog.DialogFooter>
+
+    <input bind:this={fileInputElement} type="file" accept={ACCEPTED_PICTURE_TYPES} onchange={onFileSelected} class="hidden" />
+  </Dialog.DialogContent>
+</Dialog.Root>
diff --git a/frontend/viewer/src/lib/entry-editor/field-editors/PictureImage.svelte b/frontend/viewer/src/lib/entry-editor/field-editors/PictureImage.svelte
index 394fd40962..35f4cdc05f 100644
--- a/frontend/viewer/src/lib/entry-editor/field-editors/PictureImage.svelte
+++ b/frontend/viewer/src/lib/entry-editor/field-editors/PictureImage.svelte
@@ -7,18 +7,18 @@
 
   type Props = {
     picture: IPicture;
-    /** When provided, clicking the image triggers a replace. */
-    onReplace?: () => void;
-    /** When provided, a trash button is shown in the image's top-right corner. */
-    onDelete?: () => void;
-    /** Disables the edit affordances while an operation is in flight. */
+    /** When provided, the whole picture is clickable (with a pencil hint) to open the edit dialog. */
+    onEdit?: () => void;
+    /** Disables the edit affordance while an operation is in flight. */
     busy?: boolean;
+    /** Whether to render the caption beneath the picture (hidden inside the edit dialog). */
+    showCaption?: boolean;
   };
-  const {picture, onReplace, onDelete, busy = false}: Props = $props();
+  const {picture, onEdit, busy = false, showCaption = true}: Props = $props();
 
-  // The image doubles as edit UI (tap to replace, trash to delete) only when handlers are wired.
-  // Kept media-agnostic and hover-independent so it works on touch screens.
-  const editable = $derived(!!onReplace || !!onDelete);
+  // When an edit handler is wired the picture becomes a button that opens the edit dialog. The
+  // whole picture is clickable; the pencil is only a hover-independent hint (works on touch).
+  const editable = $derived(!!onEdit);
 
   const projectContext = useProjectContext();
   const api = $derived(projectContext?.maybeApi);
@@ -98,26 +98,21 @@
       <button
         type="button"
         class="block cursor-pointer appearance-none rounded-md border-0 bg-transparent p-0 focus-visible:outline-2 disabled:cursor-default"
-        aria-label={$t`Replace Picture`}
+        aria-label={$t`Edit Picture`}
         disabled={busy}
-        onclick={() => onReplace?.()}
+        onclick={() => onEdit?.()}
       >
         {@render imageContent()}
-      </button>
-      <button
-        type="button"
-        class="text-destructive bg-background/70 hover:bg-background absolute right-1 top-1 z-10 rounded-full p-1 shadow-sm transition-colors disabled:opacity-50"
-        aria-label={$t`Delete Picture`}
-        disabled={busy}
-        onclick={() => onDelete?.()}
-      >
-        <span class="i-mdi-delete size-5"></span>
+        <!-- Pencil hint that the picture is clickable; the click is handled by the button itself. -->
+        <span class="text-foreground bg-background/70 pointer-events-none absolute right-1 top-1 z-10 rounded-full p-1 shadow-sm">
+          <span class="i-mdi-pencil block size-5"></span>
+        </span>
       </button>
     {:else}
       {@render imageContent()}
     {/if}
   </div>
-  {#if caption}
+  {#if showCaption && caption}
     <!-- `w-0 min-w-full` pins the caption to the image's width (the box above), so its `max-width`
          is the picture width; line-clamp-2 caps it at two lines with an ellipsis. -->
     <figcaption class="text-muted-foreground line-clamp-2 w-0 min-w-full break-words text-sm">
diff --git a/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte b/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte
index d85f159dd3..5c4912b0c5 100644
--- a/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte
+++ b/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
-  import type {IPicture} from '$lib/dotnet-types';
+  import type {IPicture, IRichMultiString} from '$lib/dotnet-types';
   import {UploadFileResult} from '$lib/dotnet-types/generated-types/MiniLcm/Media/UploadFileResult';
   import {Button} from '$lib/components/ui/button';
   import PictureImage from './PictureImage.svelte';
+  import EditPictureDialog from './EditPictureDialog.svelte';
+  import {ACCEPTED_PICTURE_TYPES, isLosslessImage} from './picture-formats';
   import {t} from 'svelte-i18n-lingui';
   import {useLexboxApi} from '$lib/services/service-provider';
   import {useDialogsService} from '$lib/services/dialogs-service';
@@ -24,23 +26,20 @@
   // so guard against undefined rather than trusting the type at runtime.
   const pictures = $derived(value ?? []);
 
-  // Formats the browser accepts and that the server supports for pictures.
-  const ACCEPTED_TYPES = 'image/jpeg,image/png,image/tiff,image/bmp';
-
   let fileInputElement = $state<HTMLInputElement>();
-  // Which operation is in flight (drives the add-button spinner + disabling the edit affordances).
-  let busyAction = $state<'add' | 'replace' | 'delete' | null>(null);
-  // The picture to replace once a file is chosen; undefined means the picker is adding a new one.
-  let pendingReplace = $state<IPicture | undefined>(undefined);
-
-  function pickAddFile() {
-    pendingReplace = undefined;
-    fileInputElement?.click();
-  }
+  // Which operation is in flight: 'add' drives the add-button spinner; 'edit' covers the
+  // replace/delete/caption operations invoked from the edit dialog.
+  let busyAction = $state<'add' | 'edit' | null>(null);
+
+  // The picture currently open in the edit dialog, tracked by id so it stays in sync with the
+  // reloaded entry after each change (e.g. its image updates in the dialog after a replace).
+  let editingPictureId = $state<string>();
+  const editingPicture = $derived(editingPictureId ? pictures.find((p) => p.id === editingPictureId) : undefined);
+  let editDialogOpen = $state(false);
 
-  function requestReplace(picture: IPicture) {
-    pendingReplace = $state.snapshot(picture);
-    fileInputElement?.click();
+  function openEditor(picture: IPicture) {
+    editingPictureId = picture.id;
+    editDialogOpen = true;
   }
 
   function onFileSelected(event: Event) {
@@ -48,11 +47,7 @@
     const file = target.files?.[0];
     // Reset the input so selecting the same file again re-triggers `change`.
     target.value = '';
-    const replaceTarget = pendingReplace;
-    pendingReplace = undefined;
-    if (!file) return;
-    if (replaceTarget) void replacePicture(replaceTarget, file);
-    else void addPicture(file);
+    if (file) void addPicture(file);
   }
 
   // Uploads the chosen file and returns its mediaUri, or null if the upload was rejected
@@ -67,7 +62,7 @@
       case UploadFileResult.AlreadyExists:
         // AlreadyExists is not an error here: one image file (mediaUri) can back many Picture
         // objects across different senses/entries. The server returns the existing file's
-        // mediaUri, which we reuse to create a new Picture pointing at that same image.
+        // mediaUri, which we reuse to point a Picture at that same image.
         break;
       case UploadFileResult.TooBig:
         AppNotification.display(tooBigMessage(file), {type: 'error', timeout: 'long'});
@@ -96,35 +91,49 @@
     }
   }
 
-  async function replacePicture(before: IPicture, file: File): Promise<void> {
-    busyAction = 'replace';
+  // --- Edit dialog operations (act on the picture currently open in the dialog) ---
+
+  async function replaceEditingPicture(file: File): Promise<void> {
+    const before = editingPicture ? $state.snapshot(editingPicture) : undefined;
+    if (!before) return;
+    busyAction = 'edit';
     try {
       const mediaUri = await uploadFile(file);
       if (!mediaUri) return;
       // Keep the same picture (id, order, caption); only swap the image it points at.
-      const after: IPicture = {...before, mediaUri};
-      await api.updatePicture(entryId, senseId, before, after);
+      await api.updatePicture(entryId, senseId, before, {...before, mediaUri});
     } finally {
       busyAction = null;
     }
   }
 
-  async function deletePicture(picture: IPicture): Promise<void> {
-    const target = $state.snapshot(picture);
+  async function changeCaption(caption: IRichMultiString): Promise<void> {
+    const before = editingPicture ? $state.snapshot(editingPicture) : undefined;
+    if (!before) return;
+    busyAction = 'edit';
+    try {
+      await api.updatePicture(entryId, senseId, before, {...before, caption});
+    } finally {
+      busyAction = null;
+    }
+  }
+
+  async function deleteEditingPicture(): Promise<void> {
+    const target = editingPicture ? $state.snapshot(editingPicture) : undefined;
+    if (!target) return;
     if (!(await dialogsService.promptDelete($t`Picture`))) return;
-    busyAction = 'delete';
+    busyAction = 'edit';
     try {
       await api.deletePicture(entryId, senseId, target.id);
+      editDialogOpen = false;
     } finally {
       busyAction = null;
     }
   }
 
-  // The server rejects files above its size limit. JPEGs can usually be shrunk by lowering
-  // the export quality, whereas lossless formats (PNG, BMP, TIFF) need a smaller resolution.
+  // The server rejects files above its size limit; the advice differs by format.
   function tooBigMessage(file: File): string {
-    const isLossless = /^image\/(png|bmp|tiff)$/.test(file.type) || /\.(png|bmp|tiff?)$/i.test(file.name);
-    return isLossless
+    return isLosslessImage(file)
       ? $t`This picture is too large to upload. Try reducing the image resolution and uploading again.`
       : $t`This picture is too large to upload. Try saving it at a lower JPEG quality and uploading again.`;
   }
@@ -133,16 +142,14 @@
 <div class="flex flex-col gap-2">
   {#if pictures.length > 0}
     <!-- Pictures flow left-to-right and wrap; on a narrow (mobile) screen they stack vertically
-         with no CSS change. Each picture + its caption is one flex item. Replace/Delete live on
-         the picture itself (tap the image to replace, trash-can in the corner to delete), so
-         they work on touch screens without hover. -->
+         with no CSS change. Each picture + its caption is one flex item. Clicking a picture (a
+         pencil hints at this) opens the edit dialog. -->
     <div class="flex flex-wrap gap-4">
       {#each pictures as picture (picture.id)}
         <PictureImage
           {picture}
           busy={busyAction !== null}
-          onReplace={readonly ? undefined : () => requestReplace(picture)}
-          onDelete={readonly ? undefined : () => void deletePicture(picture)}
+          onEdit={readonly ? undefined : () => openEditor(picture)}
         />
       {/each}
     </div>
@@ -155,17 +162,28 @@
   {#if !readonly}
     <!-- Right-aligned to match the "+ Component" button style. -->
     <div class="flex flex-wrap justify-end gap-2">
-      <Button icon="i-mdi-plus" size="xs" loading={busyAction === 'add'} disabled={busyAction !== null} onclick={pickAddFile}>
+      <Button icon="i-mdi-plus" size="xs" loading={busyAction === 'add'} disabled={busyAction !== null} onclick={() => fileInputElement?.click()}>
         {$t`Picture`}
       </Button>
     </div>
-    <!-- Hidden input drives the OS file picker (shared by add + replace); only JPG/PNG/TIFF/BMP offered. -->
+    <!-- Hidden input drives the OS file picker for adding a picture; only JPG/PNG/TIFF/BMP offered. -->
     <input
       bind:this={fileInputElement}
       type="file"
-      accept={ACCEPTED_TYPES}
+      accept={ACCEPTED_PICTURE_TYPES}
       onchange={onFileSelected}
       class="hidden"
     />
   {/if}
 </div>
+
+{#if editingPicture}
+  <EditPictureDialog
+    bind:open={editDialogOpen}
+    picture={editingPicture}
+    busy={busyAction === 'edit'}
+    onReplace={(file) => void replaceEditingPicture(file)}
+    onDelete={() => void deleteEditingPicture()}
+    onCaptionChange={(caption) => void changeCaption(caption)}
+  />
+{/if}
diff --git a/frontend/viewer/src/lib/entry-editor/field-editors/picture-formats.ts b/frontend/viewer/src/lib/entry-editor/field-editors/picture-formats.ts
new file mode 100644
index 0000000000..32af991f8a
--- /dev/null
+++ b/frontend/viewer/src/lib/entry-editor/field-editors/picture-formats.ts
@@ -0,0 +1,11 @@
+// Single source of truth for the picture upload formats, shared by the add file picker
+// (PicturesEditor) and the replace file picker (EditPictureDialog).
+
+// Formats the browser accepts and that the server supports for pictures.
+export const ACCEPTED_PICTURE_TYPES = 'image/jpeg,image/png,image/tiff,image/bmp';
+
+// The server rejects files above its size limit. JPEGs can usually be shrunk by lowering the
+// export quality, whereas lossless formats (PNG, BMP, TIFF) need a smaller resolution instead.
+export function isLosslessImage(file: File): boolean {
+  return /^image\/(png|bmp|tiff)$/.test(file.type) || /\.(png|bmp|tiff?)$/i.test(file.name);
+}
diff --git a/frontend/viewer/src/locales/en.po b/frontend/viewer/src/locales/en.po
index c36064754d..a84265ad9b 100644
--- a/frontend/viewer/src/locales/en.po
+++ b/frontend/viewer/src/locales/en.po
@@ -340,6 +340,10 @@ msgstr "Browse view failed"
 msgid "Cancel"
 msgstr "Cancel"
 
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
+msgid "Caption"
+msgstr "Caption"
+
 #. Explanation of sync behavior
 #: src/project/sync/FwLiteToFwMergeDetails.svelte
 msgid "Changes can also be the result of fields being added to new versions of FieldWorks Lite."
@@ -567,7 +571,7 @@ msgstr "Delete {0}"
 msgid "Delete Entry"
 msgstr "Delete Entry"
 
-#: src/lib/entry-editor/field-editors/PictureImage.svelte
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
 msgid "Delete Picture"
 msgstr "Delete Picture"
 
@@ -685,6 +689,11 @@ msgstr "Downloading..."
 msgid "Edit Custom View"
 msgstr "Edit Custom View"
 
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+msgid "Edit Picture"
+msgstr "Edit Picture"
+
 #. Role selector option
 #: src/lib/admin-dialogs/GetProjectByCodeDialog.svelte
 msgid "Editor"
@@ -989,12 +998,6 @@ msgstr "Gloss"
 msgid "Go to {0}"
 msgstr "Go to {0}"
 
-#. Aria-label on a carousel dot button below the picture; navigates to a specific picture
-#. {0} = 1-based picture number (e.g., "Go to picture 2")
-#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
-msgid "Go to picture {0}"
-msgstr "Go to picture {0}"
-
 #. Filter option label
 #. Relevant view: Classic
 #. Lite view equivalent: "Part of speech"
@@ -1330,11 +1333,6 @@ msgstr "Newest first"
 msgid "Next"
 msgstr "Next"
 
-#. Aria-label on the right-arrow button in the picture carousel; advances to the next image
-#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
-msgid "Next picture"
-msgstr "Next picture"
-
 #. Empty state when activity list filters exclude every commit.
 #: src/lib/activity/ActivityView.svelte
 msgid "No activity matches these filters"
@@ -1606,11 +1604,6 @@ msgstr "Preview"
 msgid "Preview not available"
 msgstr "Preview not available"
 
-#. Aria-label on the left-arrow button in the picture carousel; goes back to the previous image
-#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
-msgid "Previous picture"
-msgstr "Previous picture"
-
 #. Label in project card
 #: src/home/HomeView.svelte
 msgid "Project"
@@ -1696,7 +1689,7 @@ msgstr "Reopen"
 msgid "Replace audio"
 msgstr "Replace audio"
 
-#: src/lib/entry-editor/field-editors/PictureImage.svelte
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
 msgid "Replace Picture"
 msgstr "Replace Picture"
 
diff --git a/frontend/viewer/src/locales/es.po b/frontend/viewer/src/locales/es.po
index 393e2bdd96..353a0078e2 100644
--- a/frontend/viewer/src/locales/es.po
+++ b/frontend/viewer/src/locales/es.po
@@ -345,6 +345,10 @@ msgstr ""
 msgid "Cancel"
 msgstr "Cancelar"
 
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
+msgid "Caption"
+msgstr ""
+
 #. Explanation of sync behavior
 #: src/project/sync/FwLiteToFwMergeDetails.svelte
 msgid "Changes can also be the result of fields being added to new versions of FieldWorks Lite."
@@ -572,7 +576,7 @@ msgstr "Borrar {0}"
 msgid "Delete Entry"
 msgstr "Borrar entrada"
 
-#: src/lib/entry-editor/field-editors/PictureImage.svelte
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
 msgid "Delete Picture"
 msgstr ""
 
@@ -690,6 +694,11 @@ msgstr "Descargando..."
 msgid "Edit Custom View"
 msgstr "Editar vista personalizada"
 
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+msgid "Edit Picture"
+msgstr ""
+
 #. Role selector option
 #: src/lib/admin-dialogs/GetProjectByCodeDialog.svelte
 msgid "Editor"
@@ -994,12 +1003,6 @@ msgstr "Glosa"
 msgid "Go to {0}"
 msgstr "Visite {0}"
 
-#. Aria-label on a carousel dot button below the picture; navigates to a specific picture
-#. {0} = 1-based picture number (e.g., "Go to picture 2")
-#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
-msgid "Go to picture {0}"
-msgstr ""
-
 #. Filter option label
 #. Relevant view: Classic
 #. Lite view equivalent: "Part of speech"
@@ -1335,11 +1338,6 @@ msgstr ""
 msgid "Next"
 msgstr "Siguiente"
 
-#. Aria-label on the right-arrow button in the picture carousel; advances to the next image
-#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
-msgid "Next picture"
-msgstr ""
-
 #. Empty state when activity list filters exclude every commit.
 #: src/lib/activity/ActivityView.svelte
 msgid "No activity matches these filters"
@@ -1611,11 +1609,6 @@ msgstr "Vista previa"
 msgid "Preview not available"
 msgstr "Vista previa no disponible"
 
-#. Aria-label on the left-arrow button in the picture carousel; goes back to the previous image
-#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
-msgid "Previous picture"
-msgstr ""
-
 #. Label in project card
 #: src/home/HomeView.svelte
 msgid "Project"
@@ -1701,7 +1694,7 @@ msgstr "Vuelva a abrir"
 msgid "Replace audio"
 msgstr "Sustituir audio"
 
-#: src/lib/entry-editor/field-editors/PictureImage.svelte
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
 msgid "Replace Picture"
 msgstr ""
 
diff --git a/frontend/viewer/src/locales/fr.po b/frontend/viewer/src/locales/fr.po
index edfa70216e..5787bc3db2 100644
--- a/frontend/viewer/src/locales/fr.po
+++ b/frontend/viewer/src/locales/fr.po
@@ -345,6 +345,10 @@ msgstr ""
 msgid "Cancel"
 msgstr "Annuler"
 
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
+msgid "Caption"
+msgstr ""
+
 #. Explanation of sync behavior
 #: src/project/sync/FwLiteToFwMergeDetails.svelte
 msgid "Changes can also be the result of fields being added to new versions of FieldWorks Lite."
@@ -572,7 +576,7 @@ msgstr "Supprimer {0}"
 msgid "Delete Entry"
 msgstr "Supprimer l'entrée"
 
-#: src/lib/entry-editor/field-editors/PictureImage.svelte
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
 msgid "Delete Picture"
 msgstr ""
 
@@ -690,6 +694,11 @@ msgstr "Téléchargement en cours..."
 msgid "Edit Custom View"
 msgstr "Modifier la vue personnalisée"
 
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+msgid "Edit Picture"
+msgstr ""
+
 #. Role selector option
 #: src/lib/admin-dialogs/GetProjectByCodeDialog.svelte
 msgid "Editor"
@@ -994,12 +1003,6 @@ msgstr "Glose"
 msgid "Go to {0}"
 msgstr "Naviguer à {0}"
 
-#. Aria-label on a carousel dot button below the picture; navigates to a specific picture
-#. {0} = 1-based picture number (e.g., "Go to picture 2")
-#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
-msgid "Go to picture {0}"
-msgstr ""
-
 #. Filter option label
 #. Relevant view: Classic
 #. Lite view equivalent: "Part of speech"
@@ -1335,11 +1338,6 @@ msgstr ""
 msgid "Next"
 msgstr "Suivant"
 
-#. Aria-label on the right-arrow button in the picture carousel; advances to the next image
-#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
-msgid "Next picture"
-msgstr ""
-
 #. Empty state when activity list filters exclude every commit.
 #: src/lib/activity/ActivityView.svelte
 msgid "No activity matches these filters"
@@ -1611,11 +1609,6 @@ msgstr "Avant-première"
 msgid "Preview not available"
 msgstr "Aperçu non disponible"
 
-#. Aria-label on the left-arrow button in the picture carousel; goes back to the previous image
-#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
-msgid "Previous picture"
-msgstr ""
-
 #. Label in project card
 #: src/home/HomeView.svelte
 msgid "Project"
@@ -1701,7 +1694,7 @@ msgstr "Rouvrir"
 msgid "Replace audio"
 msgstr "Remplacer l'audio"
 
-#: src/lib/entry-editor/field-editors/PictureImage.svelte
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
 msgid "Replace Picture"
 msgstr ""
 
diff --git a/frontend/viewer/src/locales/id.po b/frontend/viewer/src/locales/id.po
index dd462ad145..04ece127a1 100644
--- a/frontend/viewer/src/locales/id.po
+++ b/frontend/viewer/src/locales/id.po
@@ -345,6 +345,10 @@ msgstr ""
 msgid "Cancel"
 msgstr "Batal"
 
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
+msgid "Caption"
+msgstr ""
+
 #. Explanation of sync behavior
 #: src/project/sync/FwLiteToFwMergeDetails.svelte
 msgid "Changes can also be the result of fields being added to new versions of FieldWorks Lite."
@@ -572,7 +576,7 @@ msgstr "Hapus {0}"
 msgid "Delete Entry"
 msgstr "Hapus Entri"
 
-#: src/lib/entry-editor/field-editors/PictureImage.svelte
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
 msgid "Delete Picture"
 msgstr ""
 
@@ -690,6 +694,11 @@ msgstr "Mengunduh..."
 msgid "Edit Custom View"
 msgstr "Edit Tampilan Khusus"
 
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+msgid "Edit Picture"
+msgstr ""
+
 #. Role selector option
 #: src/lib/admin-dialogs/GetProjectByCodeDialog.svelte
 msgid "Editor"
@@ -994,12 +1003,6 @@ msgstr "Arti Singkat"
 msgid "Go to {0}"
 msgstr "Buka {0}"
 
-#. Aria-label on a carousel dot button below the picture; navigates to a specific picture
-#. {0} = 1-based picture number (e.g., "Go to picture 2")
-#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
-msgid "Go to picture {0}"
-msgstr ""
-
 #. Filter option label
 #. Relevant view: Classic
 #. Lite view equivalent: "Part of speech"
@@ -1335,11 +1338,6 @@ msgstr ""
 msgid "Next"
 msgstr "Berikutnya"
 
-#. Aria-label on the right-arrow button in the picture carousel; advances to the next image
-#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
-msgid "Next picture"
-msgstr ""
-
 #. Empty state when activity list filters exclude every commit.
 #: src/lib/activity/ActivityView.svelte
 msgid "No activity matches these filters"
@@ -1611,11 +1609,6 @@ msgstr "Pratinjau"
 msgid "Preview not available"
 msgstr "Pratinjau tidak tersedia"
 
-#. Aria-label on the left-arrow button in the picture carousel; goes back to the previous image
-#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
-msgid "Previous picture"
-msgstr ""
-
 #. Label in project card
 #: src/home/HomeView.svelte
 msgid "Project"
@@ -1701,7 +1694,7 @@ msgstr "Buka kembali"
 msgid "Replace audio"
 msgstr "Mengganti audio"
 
-#: src/lib/entry-editor/field-editors/PictureImage.svelte
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
 msgid "Replace Picture"
 msgstr ""
 
diff --git a/frontend/viewer/src/locales/ko.po b/frontend/viewer/src/locales/ko.po
index 477f284fed..b07ef150d9 100644
--- a/frontend/viewer/src/locales/ko.po
+++ b/frontend/viewer/src/locales/ko.po
@@ -345,6 +345,10 @@ msgstr ""
 msgid "Cancel"
 msgstr "취소"
 
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
+msgid "Caption"
+msgstr ""
+
 #. Explanation of sync behavior
 #: src/project/sync/FwLiteToFwMergeDetails.svelte
 msgid "Changes can also be the result of fields being added to new versions of FieldWorks Lite."
@@ -572,7 +576,7 @@ msgstr "삭제 {0}"
 msgid "Delete Entry"
 msgstr "항목 삭제"
 
-#: src/lib/entry-editor/field-editors/PictureImage.svelte
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
 msgid "Delete Picture"
 msgstr ""
 
@@ -690,6 +694,11 @@ msgstr "다운로드 중..."
 msgid "Edit Custom View"
 msgstr "사용자 지정 보기 편집"
 
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+msgid "Edit Picture"
+msgstr ""
+
 #. Role selector option
 #: src/lib/admin-dialogs/GetProjectByCodeDialog.svelte
 msgid "Editor"
@@ -994,12 +1003,6 @@ msgstr "광택"
 msgid "Go to {0}"
 msgstr "{0}으로 이동"
 
-#. Aria-label on a carousel dot button below the picture; navigates to a specific picture
-#. {0} = 1-based picture number (e.g., "Go to picture 2")
-#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
-msgid "Go to picture {0}"
-msgstr ""
-
 #. Filter option label
 #. Relevant view: Classic
 #. Lite view equivalent: "Part of speech"
@@ -1335,11 +1338,6 @@ msgstr ""
 msgid "Next"
 msgstr "다음"
 
-#. Aria-label on the right-arrow button in the picture carousel; advances to the next image
-#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
-msgid "Next picture"
-msgstr ""
-
 #. Empty state when activity list filters exclude every commit.
 #: src/lib/activity/ActivityView.svelte
 msgid "No activity matches these filters"
@@ -1611,11 +1609,6 @@ msgstr "미리 보기"
 msgid "Preview not available"
 msgstr "미리 보기를 사용할 수 없습니다."
 
-#. Aria-label on the left-arrow button in the picture carousel; goes back to the previous image
-#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
-msgid "Previous picture"
-msgstr ""
-
 #. Label in project card
 #: src/home/HomeView.svelte
 msgid "Project"
@@ -1701,7 +1694,7 @@ msgstr "다시 열기"
 msgid "Replace audio"
 msgstr "오디오 교체"
 
-#: src/lib/entry-editor/field-editors/PictureImage.svelte
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
 msgid "Replace Picture"
 msgstr ""
 
diff --git a/frontend/viewer/src/locales/ms.po b/frontend/viewer/src/locales/ms.po
index 224c520430..57d255bc50 100644
--- a/frontend/viewer/src/locales/ms.po
+++ b/frontend/viewer/src/locales/ms.po
@@ -345,6 +345,10 @@ msgstr ""
 msgid "Cancel"
 msgstr "Batal"
 
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
+msgid "Caption"
+msgstr ""
+
 #. Explanation of sync behavior
 #: src/project/sync/FwLiteToFwMergeDetails.svelte
 msgid "Changes can also be the result of fields being added to new versions of FieldWorks Lite."
@@ -572,7 +576,7 @@ msgstr "Hapus {0}"
 msgid "Delete Entry"
 msgstr "Padam Entri"
 
-#: src/lib/entry-editor/field-editors/PictureImage.svelte
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
 msgid "Delete Picture"
 msgstr ""
 
@@ -690,6 +694,11 @@ msgstr "Memuat turun..."
 msgid "Edit Custom View"
 msgstr "Sunting Tinjauan Tersuai"
 
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+msgid "Edit Picture"
+msgstr ""
+
 #. Role selector option
 #: src/lib/admin-dialogs/GetProjectByCodeDialog.svelte
 msgid "Editor"
@@ -994,12 +1003,6 @@ msgstr "Glos"
 msgid "Go to {0}"
 msgstr "Pergi ke {0}"
 
-#. Aria-label on a carousel dot button below the picture; navigates to a specific picture
-#. {0} = 1-based picture number (e.g., "Go to picture 2")
-#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
-msgid "Go to picture {0}"
-msgstr ""
-
 #. Filter option label
 #. Relevant view: Classic
 #. Lite view equivalent: "Part of speech"
@@ -1335,11 +1338,6 @@ msgstr ""
 msgid "Next"
 msgstr "Seterusnya"
 
-#. Aria-label on the right-arrow button in the picture carousel; advances to the next image
-#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
-msgid "Next picture"
-msgstr ""
-
 #. Empty state when activity list filters exclude every commit.
 #: src/lib/activity/ActivityView.svelte
 msgid "No activity matches these filters"
@@ -1611,11 +1609,6 @@ msgstr "Pratonton"
 msgid "Preview not available"
 msgstr "Pratonton tidak tersedia"
 
-#. Aria-label on the left-arrow button in the picture carousel; goes back to the previous image
-#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
-msgid "Previous picture"
-msgstr ""
-
 #. Label in project card
 #: src/home/HomeView.svelte
 msgid "Project"
@@ -1701,7 +1694,7 @@ msgstr "Buka semula"
 msgid "Replace audio"
 msgstr "Ganti audio"
 
-#: src/lib/entry-editor/field-editors/PictureImage.svelte
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
 msgid "Replace Picture"
 msgstr ""
 
diff --git a/frontend/viewer/src/locales/sw.po b/frontend/viewer/src/locales/sw.po
index a53bb60eda..d148160c17 100644
--- a/frontend/viewer/src/locales/sw.po
+++ b/frontend/viewer/src/locales/sw.po
@@ -345,6 +345,10 @@ msgstr ""
 msgid "Cancel"
 msgstr "Ghairi"
 
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
+msgid "Caption"
+msgstr ""
+
 #. Explanation of sync behavior
 #: src/project/sync/FwLiteToFwMergeDetails.svelte
 msgid "Changes can also be the result of fields being added to new versions of FieldWorks Lite."
@@ -572,7 +576,7 @@ msgstr "Futa {0}"
 msgid "Delete Entry"
 msgstr "Futa ingizo"
 
-#: src/lib/entry-editor/field-editors/PictureImage.svelte
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
 msgid "Delete Picture"
 msgstr ""
 
@@ -690,6 +694,11 @@ msgstr "Inapakua..."
 msgid "Edit Custom View"
 msgstr "Hariri Muonekano Binafsi"
 
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+msgid "Edit Picture"
+msgstr ""
+
 #. Role selector option
 #: src/lib/admin-dialogs/GetProjectByCodeDialog.svelte
 msgid "Editor"
@@ -994,12 +1003,6 @@ msgstr "Glosi"
 msgid "Go to {0}"
 msgstr "Nenda kwa {0}"
 
-#. Aria-label on a carousel dot button below the picture; navigates to a specific picture
-#. {0} = 1-based picture number (e.g., "Go to picture 2")
-#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
-msgid "Go to picture {0}"
-msgstr ""
-
 #. Filter option label
 #. Relevant view: Classic
 #. Lite view equivalent: "Part of speech"
@@ -1335,11 +1338,6 @@ msgstr ""
 msgid "Next"
 msgstr "Inayofuata"
 
-#. Aria-label on the right-arrow button in the picture carousel; advances to the next image
-#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
-msgid "Next picture"
-msgstr ""
-
 #. Empty state when activity list filters exclude every commit.
 #: src/lib/activity/ActivityView.svelte
 msgid "No activity matches these filters"
@@ -1611,11 +1609,6 @@ msgstr "Hakiki"
 msgid "Preview not available"
 msgstr "Muonekano awali haupatikani"
 
-#. Aria-label on the left-arrow button in the picture carousel; goes back to the previous image
-#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
-msgid "Previous picture"
-msgstr ""
-
 #. Label in project card
 #: src/home/HomeView.svelte
 msgid "Project"
@@ -1701,7 +1694,7 @@ msgstr "Fungua Upya"
 msgid "Replace audio"
 msgstr "Badili sauti"
 
-#: src/lib/entry-editor/field-editors/PictureImage.svelte
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
 msgid "Replace Picture"
 msgstr ""
 
diff --git a/frontend/viewer/src/locales/vi.po b/frontend/viewer/src/locales/vi.po
index bec8d69372..00901b25fd 100644
--- a/frontend/viewer/src/locales/vi.po
+++ b/frontend/viewer/src/locales/vi.po
@@ -345,6 +345,10 @@ msgstr ""
 msgid "Cancel"
 msgstr "Hủy"
 
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
+msgid "Caption"
+msgstr ""
+
 #. Explanation of sync behavior
 #: src/project/sync/FwLiteToFwMergeDetails.svelte
 msgid "Changes can also be the result of fields being added to new versions of FieldWorks Lite."
@@ -572,7 +576,7 @@ msgstr "Xóa {0}"
 msgid "Delete Entry"
 msgstr "Xóa mục"
 
-#: src/lib/entry-editor/field-editors/PictureImage.svelte
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
 msgid "Delete Picture"
 msgstr ""
 
@@ -690,6 +694,11 @@ msgstr "Đang tải xuống..."
 msgid "Edit Custom View"
 msgstr "Chỉnh sửa chế độ xem tùy chỉnh"
 
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
+#: src/lib/entry-editor/field-editors/PictureImage.svelte
+msgid "Edit Picture"
+msgstr ""
+
 #. Role selector option
 #: src/lib/admin-dialogs/GetProjectByCodeDialog.svelte
 msgid "Editor"
@@ -994,12 +1003,6 @@ msgstr "Ghi chú"
 msgid "Go to {0}"
 msgstr "Đi tới {0}"
 
-#. Aria-label on a carousel dot button below the picture; navigates to a specific picture
-#. {0} = 1-based picture number (e.g., "Go to picture 2")
-#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
-msgid "Go to picture {0}"
-msgstr ""
-
 #. Filter option label
 #. Relevant view: Classic
 #. Lite view equivalent: "Part of speech"
@@ -1335,11 +1338,6 @@ msgstr ""
 msgid "Next"
 msgstr "Tiếp theo"
 
-#. Aria-label on the right-arrow button in the picture carousel; advances to the next image
-#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
-msgid "Next picture"
-msgstr ""
-
 #. Empty state when activity list filters exclude every commit.
 #: src/lib/activity/ActivityView.svelte
 msgid "No activity matches these filters"
@@ -1611,11 +1609,6 @@ msgstr "Xem trước"
 msgid "Preview not available"
 msgstr "Xem trước không khả dụng"
 
-#. Aria-label on the left-arrow button in the picture carousel; goes back to the previous image
-#: src/lib/entry-editor/field-editors/PictureCarousel.svelte
-msgid "Previous picture"
-msgstr ""
-
 #. Label in project card
 #: src/home/HomeView.svelte
 msgid "Project"
@@ -1701,7 +1694,7 @@ msgstr "Mở lại"
 msgid "Replace audio"
 msgstr "Thay thế âm thanh"
 
-#: src/lib/entry-editor/field-editors/PictureImage.svelte
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
 msgid "Replace Picture"
 msgstr ""
 
diff --git a/frontend/viewer/tests/sense-pictures.test.ts b/frontend/viewer/tests/sense-pictures.test.ts
index a6c2685ccf..15f6449fab 100644
--- a/frontend/viewer/tests/sense-pictures.test.ts
+++ b/frontend/viewer/tests/sense-pictures.test.ts
@@ -113,43 +113,73 @@ test.describe('Sense pictures', () => {
     return picturesField;
   }
 
-  test('"+ Picture" stays available alongside Replace/Delete once a picture exists', async ({page}) => {
+  /** Adds a picture, clicks it to open the edit dialog, and returns [picturesField, dialog]. */
+  async function openEditor(page: Page) {
+    const picturesField = await addOnePicture(page);
+    await picturesField.getByRole('button', {name: 'Edit Picture'}).click();
+    const dialog = page.getByRole('dialog');
+    await expect(dialog).toBeVisible({timeout: 5000});
+    return {picturesField, dialog};
+  }
+
+  test('"+ Picture" stays available; clicking a picture opens the edit dialog', async ({page}) => {
     const picturesField = await addOnePicture(page);
 
     // The add button is still present even though a picture now exists...
     await expect(picturesField.getByRole('button', {name: 'Picture', exact: true})).toBeVisible();
-    // ...plus the two picture-specific actions.
-    await expect(picturesField.getByRole('button', {name: 'Replace Picture'})).toBeVisible();
-    await expect(picturesField.getByRole('button', {name: 'Delete Picture'})).toBeVisible();
+    // ...and the picture itself is a button that opens the editor (no field-level action buttons).
+    const editButton = picturesField.getByRole('button', {name: 'Edit Picture'});
+    await expect(editButton).toBeVisible();
+    await expect(picturesField.getByRole('button', {name: 'Replace Picture'})).toHaveCount(0);
+    await expect(picturesField.getByRole('button', {name: 'Delete Picture'})).toHaveCount(0);
+
+    // Opening it reveals the caption editor and the Replace/Delete actions inside the dialog.
+    await editButton.click();
+    const dialog = page.getByRole('dialog');
+    await expect(dialog.getByText('Caption')).toBeVisible();
+    await expect(dialog.getByRole('button', {name: 'Replace Picture'})).toBeVisible();
+    await expect(dialog.getByRole('button', {name: 'Delete Picture'})).toBeVisible();
   });
 
-  test('Delete Picture removes the current picture (after confirmation)', async ({page}) => {
-    const picturesField = await addOnePicture(page);
+  test('Delete Picture (in the dialog) removes the picture after confirmation', async ({page}) => {
+    const {picturesField, dialog} = await openEditor(page);
 
-    await picturesField.getByRole('button', {name: 'Delete Picture'}).click();
-    // Confirm in the delete dialog (its confirm button is also labelled "Delete Picture").
+    await dialog.getByRole('button', {name: 'Delete Picture'}).click();
+    // Confirm in the delete alert dialog (its confirm button is also labelled "Delete Picture").
     await page.getByRole('alertdialog').getByRole('button', {name: 'Delete Picture', exact: true}).click();
 
-    // Picture (and the Replace/Delete actions) are gone; the add button remains.
+    // Picture is gone and the edit dialog closes; the add button remains.
     await expect(picturesField.locator('img')).toHaveCount(0, {timeout: 5000});
-    await expect(picturesField.getByRole('button', {name: 'Delete Picture'})).toHaveCount(0);
-    await expect(picturesField.getByRole('button', {name: 'Replace Picture'})).toHaveCount(0);
+    await expect(page.getByRole('dialog')).toHaveCount(0);
     await expect(picturesField.getByRole('button', {name: 'Picture', exact: true})).toBeVisible();
   });
 
-  test('Replace Picture swaps the current picture in place', async ({page}) => {
-    const picturesField = await addOnePicture(page);
-    const image = picturesField.locator('img').first();
-    const originalSrc = await image.getAttribute('src');
+  test('Replace Picture (in the dialog) swaps the current picture in place', async ({page}) => {
+    const {picturesField, dialog} = await openEditor(page);
+    const fieldImage = picturesField.locator('img').first();
+    const originalSrc = await fieldImage.getAttribute('src');
 
-    await picturesField.getByRole('button', {name: 'Replace Picture'}).click();
-    await picturesField.locator('input[type="file"]').setInputFiles({
+    await dialog.getByRole('button', {name: 'Replace Picture'}).click();
+    await dialog.locator('input[type="file"]').setInputFiles({
       name: 'replacement.png', mimeType: 'image/png', buffer: TEST_PNG,
     });
 
     // Still exactly one picture (replaced, not added), re-loaded into a fresh blob url.
     await expect(picturesField.locator('img')).toHaveCount(1);
-    await expect(image).toHaveAttribute('src', /^blob:/);
-    await expect(image).not.toHaveAttribute('src', originalSrc ?? '', {timeout: 5000});
+    await expect(fieldImage).toHaveAttribute('src', /^blob:/);
+    await expect(fieldImage).not.toHaveAttribute('src', originalSrc ?? '', {timeout: 5000});
+  });
+
+  test('editing the caption in the dialog shows it under the picture', async ({page}) => {
+    const {picturesField, dialog} = await openEditor(page);
+
+    // Type into the first writing system's caption editor and commit the change (blur).
+    const captionEditor = dialog.locator('[contenteditable="true"]').first();
+    await captionEditor.click();
+    await captionEditor.pressSequentially('Riverbank');
+    await captionEditor.evaluate((el) => (el as HTMLElement).blur());
+
+    // The caption is saved and rendered beneath the picture in the field.
+    await expect(picturesField.getByText('Riverbank')).toBeVisible({timeout: 5000});
   });
 });

From 42400974645a146f7f55e31e530389db73bd0769 Mon Sep 17 00:00:00 2001
From: Robin Munn <robin_munn@sil.org>
Date: Thu, 9 Jul 2026 12:41:00 +0700
Subject: [PATCH 26/32] Add a Submit button to dismiss the edit-picture dialog

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../lib/entry-editor/field-editors/EditPictureDialog.svelte  | 3 +++
 frontend/viewer/src/locales/en.po                            | 1 +
 frontend/viewer/src/locales/es.po                            | 1 +
 frontend/viewer/src/locales/fr.po                            | 1 +
 frontend/viewer/src/locales/id.po                            | 1 +
 frontend/viewer/src/locales/ko.po                            | 1 +
 frontend/viewer/src/locales/ms.po                            | 1 +
 frontend/viewer/src/locales/sw.po                            | 1 +
 frontend/viewer/src/locales/vi.po                            | 1 +
 frontend/viewer/tests/sense-pictures.test.ts                 | 5 +++++
 10 files changed, 16 insertions(+)

diff --git a/frontend/viewer/src/lib/entry-editor/field-editors/EditPictureDialog.svelte b/frontend/viewer/src/lib/entry-editor/field-editors/EditPictureDialog.svelte
index c91ab34ac9..e7ad4be818 100644
--- a/frontend/viewer/src/lib/entry-editor/field-editors/EditPictureDialog.svelte
+++ b/frontend/viewer/src/lib/entry-editor/field-editors/EditPictureDialog.svelte
@@ -80,6 +80,9 @@
       <Button icon="i-mdi-delete" variant="destructive" disabled={busy} onclick={() => onDelete()}>
         {$t`Delete Picture`}
       </Button>
+      <Button onclick={() => (open = false)}>
+        {$t`Submit`}
+      </Button>
     </Dialog.DialogFooter>
 
     <input bind:this={fileInputElement} type="file" accept={ACCEPTED_PICTURE_TYPES} onchange={onFileSelected} class="hidden" />
diff --git a/frontend/viewer/src/locales/en.po b/frontend/viewer/src/locales/en.po
index a84265ad9b..1379b132cd 100644
--- a/frontend/viewer/src/locales/en.po
+++ b/frontend/viewer/src/locales/en.po
@@ -1886,6 +1886,7 @@ msgstr "Subject does not have suitable object of type: {0}"
 #: src/lib/components/SubmitOrCancel.svelte
 #: src/lib/components/field-editors/multi-select.svelte
 #: src/lib/components/field-editors/multi-select.svelte
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
 msgid "Submit"
 msgstr "Submit"
 
diff --git a/frontend/viewer/src/locales/es.po b/frontend/viewer/src/locales/es.po
index 353a0078e2..4d3e5bf858 100644
--- a/frontend/viewer/src/locales/es.po
+++ b/frontend/viewer/src/locales/es.po
@@ -1891,6 +1891,7 @@ msgstr "El asunto no tiene un objeto de tipo adecuado: {0}"
 #: src/lib/components/SubmitOrCancel.svelte
 #: src/lib/components/field-editors/multi-select.svelte
 #: src/lib/components/field-editors/multi-select.svelte
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
 msgid "Submit"
 msgstr "Enviar"
 
diff --git a/frontend/viewer/src/locales/fr.po b/frontend/viewer/src/locales/fr.po
index 5787bc3db2..2f66b82467 100644
--- a/frontend/viewer/src/locales/fr.po
+++ b/frontend/viewer/src/locales/fr.po
@@ -1891,6 +1891,7 @@ msgstr "Le sujet n'a pas d'objet de type approprié : {0}"
 #: src/lib/components/SubmitOrCancel.svelte
 #: src/lib/components/field-editors/multi-select.svelte
 #: src/lib/components/field-editors/multi-select.svelte
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
 msgid "Submit"
 msgstr "Soumettre"
 
diff --git a/frontend/viewer/src/locales/id.po b/frontend/viewer/src/locales/id.po
index 04ece127a1..da66323076 100644
--- a/frontend/viewer/src/locales/id.po
+++ b/frontend/viewer/src/locales/id.po
@@ -1891,6 +1891,7 @@ msgstr "Subjek tidak memiliki jenis objek yang sesuai: {0}"
 #: src/lib/components/SubmitOrCancel.svelte
 #: src/lib/components/field-editors/multi-select.svelte
 #: src/lib/components/field-editors/multi-select.svelte
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
 msgid "Submit"
 msgstr "Kirim"
 
diff --git a/frontend/viewer/src/locales/ko.po b/frontend/viewer/src/locales/ko.po
index b07ef150d9..2ff13537f8 100644
--- a/frontend/viewer/src/locales/ko.po
+++ b/frontend/viewer/src/locales/ko.po
@@ -1891,6 +1891,7 @@ msgstr "제목에 적합한 객체 유형이 없습니다: {0}"
 #: src/lib/components/SubmitOrCancel.svelte
 #: src/lib/components/field-editors/multi-select.svelte
 #: src/lib/components/field-editors/multi-select.svelte
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
 msgid "Submit"
 msgstr "제출하기"
 
diff --git a/frontend/viewer/src/locales/ms.po b/frontend/viewer/src/locales/ms.po
index 57d255bc50..4eb7de36af 100644
--- a/frontend/viewer/src/locales/ms.po
+++ b/frontend/viewer/src/locales/ms.po
@@ -1891,6 +1891,7 @@ msgstr "Subjek tidak mempunyai objek sesuai jenis: {0}"
 #: src/lib/components/SubmitOrCancel.svelte
 #: src/lib/components/field-editors/multi-select.svelte
 #: src/lib/components/field-editors/multi-select.svelte
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
 msgid "Submit"
 msgstr "Hantar"
 
diff --git a/frontend/viewer/src/locales/sw.po b/frontend/viewer/src/locales/sw.po
index d148160c17..220ff67d71 100644
--- a/frontend/viewer/src/locales/sw.po
+++ b/frontend/viewer/src/locales/sw.po
@@ -1891,6 +1891,7 @@ msgstr "Kigezo hakina kitu kinachofaa cha aina: {0}"
 #: src/lib/components/SubmitOrCancel.svelte
 #: src/lib/components/field-editors/multi-select.svelte
 #: src/lib/components/field-editors/multi-select.svelte
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
 msgid "Submit"
 msgstr "Wasilisha"
 
diff --git a/frontend/viewer/src/locales/vi.po b/frontend/viewer/src/locales/vi.po
index 00901b25fd..046afb3fe5 100644
--- a/frontend/viewer/src/locales/vi.po
+++ b/frontend/viewer/src/locales/vi.po
@@ -1891,6 +1891,7 @@ msgstr "Chủ đề không có đối tượng phù hợp loại: {0}"
 #: src/lib/components/SubmitOrCancel.svelte
 #: src/lib/components/field-editors/multi-select.svelte
 #: src/lib/components/field-editors/multi-select.svelte
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
 msgid "Submit"
 msgstr "Gửi"
 
diff --git a/frontend/viewer/tests/sense-pictures.test.ts b/frontend/viewer/tests/sense-pictures.test.ts
index 15f6449fab..301b7dc990 100644
--- a/frontend/viewer/tests/sense-pictures.test.ts
+++ b/frontend/viewer/tests/sense-pictures.test.ts
@@ -139,6 +139,11 @@ test.describe('Sense pictures', () => {
     await expect(dialog.getByText('Caption')).toBeVisible();
     await expect(dialog.getByRole('button', {name: 'Replace Picture'})).toBeVisible();
     await expect(dialog.getByRole('button', {name: 'Delete Picture'})).toBeVisible();
+
+    // Submit dismisses the dialog (leaving the picture in place).
+    await dialog.getByRole('button', {name: 'Submit'}).click();
+    await expect(dialog).toHaveCount(0);
+    await expect(picturesField.getByRole('button', {name: 'Edit Picture'})).toBeVisible();
   });
 
   test('Delete Picture (in the dialog) removes the picture after confirmation', async ({page}) => {

From cd7380ddbbd882b7db7a903bc25a95703ad246d6 Mon Sep 17 00:00:00 2001
From: Robin Munn <robin_munn@sil.org>
Date: Thu, 9 Jul 2026 13:08:57 +0700
Subject: [PATCH 27/32] Buffer edit-picture changes until Submit; add Cancel

The edit dialog no longer writes to the model as you type/replace. Caption edits
and a replacement image are held in local dialog state and previewed there; only
Submit applies them (as a single updatePicture). A new Cancel button (left of
Submit) closes the dialog and discards the buffered edits.

Replacing still uploads the file immediately (needed to preview it) but leaves the
Picture's mediaUri untouched until Submit. Delete Picture remains an immediate,
separately-confirmed action.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../field-editors/EditPictureDialog.svelte    | 62 ++++++++++++-------
 .../field-editors/PicturesEditor.svelte       | 23 +++----
 frontend/viewer/src/locales/en.po             |  1 +
 frontend/viewer/src/locales/es.po             |  1 +
 frontend/viewer/src/locales/fr.po             |  1 +
 frontend/viewer/src/locales/id.po             |  1 +
 frontend/viewer/src/locales/ko.po             |  1 +
 frontend/viewer/src/locales/ms.po             |  1 +
 frontend/viewer/src/locales/sw.po             |  1 +
 frontend/viewer/src/locales/vi.po             |  1 +
 frontend/viewer/tests/sense-pictures.test.ts  | 36 +++++++++--
 11 files changed, 90 insertions(+), 39 deletions(-)

diff --git a/frontend/viewer/src/lib/entry-editor/field-editors/EditPictureDialog.svelte b/frontend/viewer/src/lib/entry-editor/field-editors/EditPictureDialog.svelte
index e7ad4be818..1583d6bbe9 100644
--- a/frontend/viewer/src/lib/entry-editor/field-editors/EditPictureDialog.svelte
+++ b/frontend/viewer/src/lib/entry-editor/field-editors/EditPictureDialog.svelte
@@ -14,35 +14,56 @@
   type Props = {
     open: boolean;
     picture: IPicture;
-    /** Disables Replace/Delete while an operation is in flight. */
-    busy?: boolean;
-    onReplace: (file: File) => void;
+    /** Uploads a replacement file and returns its mediaUri (or null if rejected). Does NOT touch
+        the model — the new image is only previewed until Submit. */
+    onUploadReplacement: (file: File) => Promise<string | null>;
+    /** Applies the buffered edits (caption + replaced image) to the model. */
+    onSubmit: (after: IPicture) => void;
+    /** Deletes the picture immediately (has its own confirmation); independent of Submit. */
     onDelete: () => void;
-    onCaptionChange: (caption: IRichMultiString) => void;
   };
-  let {open = $bindable(false), picture, busy = false, onReplace, onDelete, onCaptionChange}: Props = $props();
+  let {open = $bindable(false), picture, onUploadReplacement, onSubmit, onDelete}: Props = $props();
 
   useBackHandler({addToStack: () => open, onBack: () => (open = false), key: 'edit-picture-dialog'});
   const writingSystemService = useWritingSystemService();
 
-  // A local, editable copy of the caption. Editing round-trips through the API, which reloads the
-  // entry; keeping the input's value local means that reload can't reset it mid-edit. Re-seeded
-  // each time the dialog opens so it reflects the picture being edited.
+  // Buffered, local edits. Nothing here reaches the model until Submit; Cancel just closes and the
+  // next open re-seeds these from the picture, discarding whatever was typed/replaced.
   let caption = $state<IRichMultiString>({});
+  let mediaUri = $state('');
   watch(
     () => open,
     () => {
-      if (open) caption = structuredClone($state.snapshot(picture.caption ?? {}));
+      if (!open) return;
+      caption = structuredClone($state.snapshot(picture.caption ?? {}));
+      mediaUri = picture.mediaUri;
     },
   );
 
+  // Preview reflects the buffered image (updates when a replacement is chosen, before Submit).
+  const preview = $derived<IPicture>({...picture, caption, mediaUri});
+
+  let uploading = $state(false);
+
   let fileInputElement = $state<HTMLInputElement>();
-  function onFileSelected(event: Event) {
+  async function onFileSelected(event: Event) {
     const target = event.target as HTMLInputElement;
     const file = target.files?.[0];
     // Reset so picking the same file again re-triggers `change`.
     target.value = '';
-    if (file) onReplace(file);
+    if (!file) return;
+    uploading = true;
+    try {
+      const uri = await onUploadReplacement(file);
+      if (uri) mediaUri = uri;
+    } finally {
+      uploading = false;
+    }
+  }
+
+  function submit() {
+    onSubmit({...$state.snapshot(picture), caption: $state.snapshot(caption), mediaUri});
+    open = false;
   }
 </script>
 
@@ -52,9 +73,9 @@
       <Dialog.DialogTitle>{$t`Edit Picture`}</Dialog.DialogTitle>
     </Dialog.DialogHeader>
 
-    <!-- Picture at the top, centered in the dialog. -->
+    <!-- Picture at the top, centered in the dialog (shows the buffered replacement if any). -->
     <div class="flex justify-center">
-      <PictureImage {picture} showCaption={false} />
+      <PictureImage picture={preview} showCaption={false} />
     </div>
 
     <!-- Caption editor. Wrapped in the editor grid so RichMultiWsInput's subgrid rows lay out. -->
@@ -63,24 +84,23 @@
         <Editor.Field.Root>
           <Editor.Field.Title name={$t`Caption`} />
           <Editor.Field.Body subGrid>
-            <RichMultiWsInput
-              bind:value={caption}
-              writingSystems={writingSystemService.allWritingSystems()}
-              onchange={() => onCaptionChange($state.snapshot(caption))}
-            />
+            <RichMultiWsInput bind:value={caption} writingSystems={writingSystemService.allWritingSystems()} />
           </Editor.Field.Body>
         </Editor.Field.Root>
       </Editor.Grid>
     </Editor.Root>
 
     <Dialog.DialogFooter>
-      <Button icon="i-mdi-image-refresh" variant="secondary" disabled={busy} onclick={() => fileInputElement?.click()}>
+      <Button icon="i-mdi-image-refresh" variant="secondary" loading={uploading} disabled={uploading} onclick={() => fileInputElement?.click()}>
         {$t`Replace Picture`}
       </Button>
-      <Button icon="i-mdi-delete" variant="destructive" disabled={busy} onclick={() => onDelete()}>
+      <Button icon="i-mdi-delete" variant="destructive" disabled={uploading} onclick={() => onDelete()}>
         {$t`Delete Picture`}
       </Button>
-      <Button onclick={() => (open = false)}>
+      <Button variant="secondary" onclick={() => (open = false)}>
+        {$t`Cancel`}
+      </Button>
+      <Button disabled={uploading} onclick={() => submit()}>
         {$t`Submit`}
       </Button>
     </Dialog.DialogFooter>
diff --git a/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte b/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte
index 5c4912b0c5..4eb9cd3094 100644
--- a/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte
+++ b/frontend/viewer/src/lib/entry-editor/field-editors/PicturesEditor.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type {IPicture, IRichMultiString} from '$lib/dotnet-types';
+  import type {IPicture} from '$lib/dotnet-types';
   import {UploadFileResult} from '$lib/dotnet-types/generated-types/MiniLcm/Media/UploadFileResult';
   import {Button} from '$lib/components/ui/button';
   import PictureImage from './PictureImage.svelte';
@@ -93,26 +93,24 @@
 
   // --- Edit dialog operations (act on the picture currently open in the dialog) ---
 
-  async function replaceEditingPicture(file: File): Promise<void> {
-    const before = editingPicture ? $state.snapshot(editingPicture) : undefined;
-    if (!before) return;
+  // Uploads a replacement file and returns its mediaUri, WITHOUT touching the model — the dialog
+  // previews it and only commits on Submit (via submitEdits).
+  async function uploadReplacement(file: File): Promise<string | null> {
     busyAction = 'edit';
     try {
-      const mediaUri = await uploadFile(file);
-      if (!mediaUri) return;
-      // Keep the same picture (id, order, caption); only swap the image it points at.
-      await api.updatePicture(entryId, senseId, before, {...before, mediaUri});
+      return await uploadFile(file);
     } finally {
       busyAction = null;
     }
   }
 
-  async function changeCaption(caption: IRichMultiString): Promise<void> {
+  // Applies the dialog's buffered edits (new caption and/or replaced image) in one update.
+  async function submitEdits(after: IPicture): Promise<void> {
     const before = editingPicture ? $state.snapshot(editingPicture) : undefined;
     if (!before) return;
     busyAction = 'edit';
     try {
-      await api.updatePicture(entryId, senseId, before, {...before, caption});
+      await api.updatePicture(entryId, senseId, before, after);
     } finally {
       busyAction = null;
     }
@@ -181,9 +179,8 @@
   <EditPictureDialog
     bind:open={editDialogOpen}
     picture={editingPicture}
-    busy={busyAction === 'edit'}
-    onReplace={(file) => void replaceEditingPicture(file)}
+    onUploadReplacement={(file) => uploadReplacement(file)}
+    onSubmit={(after) => void submitEdits(after)}
     onDelete={() => void deleteEditingPicture()}
-    onCaptionChange={(caption) => void changeCaption(caption)}
   />
 {/if}
diff --git a/frontend/viewer/src/locales/en.po b/frontend/viewer/src/locales/en.po
index 1379b132cd..328274cc5e 100644
--- a/frontend/viewer/src/locales/en.po
+++ b/frontend/viewer/src/locales/en.po
@@ -336,6 +336,7 @@ msgstr "Browse view failed"
 #: src/lib/components/field-editors/select.svelte
 #: src/lib/entry-editor/EditEntryDialog.svelte
 #: src/lib/entry-editor/NewEntryDialog.svelte
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
 #: src/lib/views/custom/CustomViewForm.svelte
 msgid "Cancel"
 msgstr "Cancel"
diff --git a/frontend/viewer/src/locales/es.po b/frontend/viewer/src/locales/es.po
index 4d3e5bf858..1291065ff6 100644
--- a/frontend/viewer/src/locales/es.po
+++ b/frontend/viewer/src/locales/es.po
@@ -341,6 +341,7 @@ msgstr ""
 #: src/lib/components/field-editors/select.svelte
 #: src/lib/entry-editor/EditEntryDialog.svelte
 #: src/lib/entry-editor/NewEntryDialog.svelte
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
 #: src/lib/views/custom/CustomViewForm.svelte
 msgid "Cancel"
 msgstr "Cancelar"
diff --git a/frontend/viewer/src/locales/fr.po b/frontend/viewer/src/locales/fr.po
index 2f66b82467..6920f6a0f2 100644
--- a/frontend/viewer/src/locales/fr.po
+++ b/frontend/viewer/src/locales/fr.po
@@ -341,6 +341,7 @@ msgstr ""
 #: src/lib/components/field-editors/select.svelte
 #: src/lib/entry-editor/EditEntryDialog.svelte
 #: src/lib/entry-editor/NewEntryDialog.svelte
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
 #: src/lib/views/custom/CustomViewForm.svelte
 msgid "Cancel"
 msgstr "Annuler"
diff --git a/frontend/viewer/src/locales/id.po b/frontend/viewer/src/locales/id.po
index da66323076..67fcef2d4b 100644
--- a/frontend/viewer/src/locales/id.po
+++ b/frontend/viewer/src/locales/id.po
@@ -341,6 +341,7 @@ msgstr ""
 #: src/lib/components/field-editors/select.svelte
 #: src/lib/entry-editor/EditEntryDialog.svelte
 #: src/lib/entry-editor/NewEntryDialog.svelte
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
 #: src/lib/views/custom/CustomViewForm.svelte
 msgid "Cancel"
 msgstr "Batal"
diff --git a/frontend/viewer/src/locales/ko.po b/frontend/viewer/src/locales/ko.po
index 2ff13537f8..7528bdc664 100644
--- a/frontend/viewer/src/locales/ko.po
+++ b/frontend/viewer/src/locales/ko.po
@@ -341,6 +341,7 @@ msgstr ""
 #: src/lib/components/field-editors/select.svelte
 #: src/lib/entry-editor/EditEntryDialog.svelte
 #: src/lib/entry-editor/NewEntryDialog.svelte
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
 #: src/lib/views/custom/CustomViewForm.svelte
 msgid "Cancel"
 msgstr "취소"
diff --git a/frontend/viewer/src/locales/ms.po b/frontend/viewer/src/locales/ms.po
index 4eb7de36af..f87682e3e9 100644
--- a/frontend/viewer/src/locales/ms.po
+++ b/frontend/viewer/src/locales/ms.po
@@ -341,6 +341,7 @@ msgstr ""
 #: src/lib/components/field-editors/select.svelte
 #: src/lib/entry-editor/EditEntryDialog.svelte
 #: src/lib/entry-editor/NewEntryDialog.svelte
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
 #: src/lib/views/custom/CustomViewForm.svelte
 msgid "Cancel"
 msgstr "Batal"
diff --git a/frontend/viewer/src/locales/sw.po b/frontend/viewer/src/locales/sw.po
index 220ff67d71..0d53cb65d3 100644
--- a/frontend/viewer/src/locales/sw.po
+++ b/frontend/viewer/src/locales/sw.po
@@ -341,6 +341,7 @@ msgstr ""
 #: src/lib/components/field-editors/select.svelte
 #: src/lib/entry-editor/EditEntryDialog.svelte
 #: src/lib/entry-editor/NewEntryDialog.svelte
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
 #: src/lib/views/custom/CustomViewForm.svelte
 msgid "Cancel"
 msgstr "Ghairi"
diff --git a/frontend/viewer/src/locales/vi.po b/frontend/viewer/src/locales/vi.po
index 046afb3fe5..8eae116ad3 100644
--- a/frontend/viewer/src/locales/vi.po
+++ b/frontend/viewer/src/locales/vi.po
@@ -341,6 +341,7 @@ msgstr ""
 #: src/lib/components/field-editors/select.svelte
 #: src/lib/entry-editor/EditEntryDialog.svelte
 #: src/lib/entry-editor/NewEntryDialog.svelte
+#: src/lib/entry-editor/field-editors/EditPictureDialog.svelte
 #: src/lib/views/custom/CustomViewForm.svelte
 msgid "Cancel"
 msgstr "Hủy"
diff --git a/frontend/viewer/tests/sense-pictures.test.ts b/frontend/viewer/tests/sense-pictures.test.ts
index 301b7dc990..f7689495c5 100644
--- a/frontend/viewer/tests/sense-pictures.test.ts
+++ b/frontend/viewer/tests/sense-pictures.test.ts
@@ -139,6 +139,8 @@ test.describe('Sense pictures', () => {
     await expect(dialog.getByText('Caption')).toBeVisible();
     await expect(dialog.getByRole('button', {name: 'Replace Picture'})).toBeVisible();
     await expect(dialog.getByRole('button', {name: 'Delete Picture'})).toBeVisible();
+    await expect(dialog.getByRole('button', {name: 'Cancel'})).toBeVisible();
+    await expect(dialog.getByRole('button', {name: 'Submit'})).toBeVisible();
 
     // Submit dismisses the dialog (leaving the picture in place).
     await dialog.getByRole('button', {name: 'Submit'}).click();
@@ -159,7 +161,7 @@ test.describe('Sense pictures', () => {
     await expect(picturesField.getByRole('button', {name: 'Picture', exact: true})).toBeVisible();
   });
 
-  test('Replace Picture (in the dialog) swaps the current picture in place', async ({page}) => {
+  test('Replace, buffered until Submit, swaps the picture in place', async ({page}) => {
     const {picturesField, dialog} = await openEditor(page);
     const fieldImage = picturesField.locator('img').first();
     const originalSrc = await fieldImage.getAttribute('src');
@@ -169,22 +171,46 @@ test.describe('Sense pictures', () => {
       name: 'replacement.png', mimeType: 'image/png', buffer: TEST_PNG,
     });
 
-    // Still exactly one picture (replaced, not added), re-loaded into a fresh blob url.
+    // The dialog previews the replacement, but the field picture is unchanged until Submit.
+    await expect(dialog.locator('img')).toHaveAttribute('src', /^blob:/);
+    await expect(fieldImage).toHaveAttribute('src', originalSrc ?? '');
+
+    await dialog.getByRole('button', {name: 'Submit'}).click();
+
+    // Now committed: still one picture (replaced, not added), re-loaded into a fresh blob url.
     await expect(picturesField.locator('img')).toHaveCount(1);
     await expect(fieldImage).toHaveAttribute('src', /^blob:/);
     await expect(fieldImage).not.toHaveAttribute('src', originalSrc ?? '', {timeout: 5000});
   });
 
-  test('editing the caption in the dialog shows it under the picture', async ({page}) => {
+  test('editing the caption and pressing Submit shows it under the picture', async ({page}) => {
     const {picturesField, dialog} = await openEditor(page);
 
-    // Type into the first writing system's caption editor and commit the change (blur).
+    // Type into the first writing system's caption editor and commit the field value (blur).
     const captionEditor = dialog.locator('[contenteditable="true"]').first();
     await captionEditor.click();
     await captionEditor.pressSequentially('Riverbank');
     await captionEditor.evaluate((el) => (el as HTMLElement).blur());
 
-    // The caption is saved and rendered beneath the picture in the field.
+    // Buffered: nothing shows under the field picture until Submit.
+    await expect(picturesField.getByText('Riverbank')).toHaveCount(0);
+
+    await dialog.getByRole('button', {name: 'Submit'}).click();
     await expect(picturesField.getByText('Riverbank')).toBeVisible({timeout: 5000});
   });
+
+  test('Cancel discards caption edits', async ({page}) => {
+    const {picturesField, dialog} = await openEditor(page);
+
+    const captionEditor = dialog.locator('[contenteditable="true"]').first();
+    await captionEditor.click();
+    await captionEditor.pressSequentially('Discarded');
+    await captionEditor.evaluate((el) => (el as HTMLElement).blur());
+
+    await dialog.getByRole('button', {name: 'Cancel'}).click();
+    await expect(dialog).toHaveCount(0);
+
+    // The edit never reached the model, so it isn't shown under the picture.
+    await expect(picturesField.getByText('Discarded')).toHaveCount(0);
+  });
 });

From f04df64e6c1b1f65dd8d7fe5082268f4daed1e83 Mon Sep 17 00:00:00 2001
From: Robin Munn <rmunn@pobox.com>
Date: Thu, 9 Jul 2026 14:24:37 +0700
Subject: [PATCH 28/32] Make sure failed media downloads can be retried

A failed download attempt shouldn't sit in the DownloadTasks dictionary
forever, otherwise that task would be picked up by every subsequent attempt.
---
 .../FwLite/LcmCrdt/MediaServer/LcmMediaService.cs   | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs b/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs
index 38591124c8..65088657d6 100644
--- a/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs
+++ b/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs
@@ -65,11 +65,22 @@ public async Task<ReadFileResponse> GetFileStream(Guid fileId)
         var localResource = await resourceService.GetLocalResource(fileId);
         if (localResource is null)
         {
-            localResource = await DownloadTasks.GetOrAdd(fileId, async _ =>
+            var downloadTask = DownloadTasks.GetOrAdd(fileId, async _ =>
             {
                 // Check again if we have it locally in case another thread completed before the GetOrAdd factory ran
                 return await resourceService.GetLocalResource(fileId) ?? await resourceService.DownloadResource(fileId, this);
             });
+            try
+            {
+                localResource = await downloadTask;
+            }
+            catch
+            {
+                // If the download fails, we need to remove the task from the ConcurrentDictionary so that
+                // a new download can be attempted later by a different thread
+                DownloadTasks.TryRemove(new KeyValuePair<Guid, Task<LocalResource>>(fileId, downloadTask));
+                throw;
+            }
         }
         //todo, consider trying to download the file again, maybe the cache was cleared
         if (!File.Exists(localResource.LocalPath))

From 634fd83e7ccb51257e710b79ff64eafa1a0d5260 Mon Sep 17 00:00:00 2001
From: Robin Munn <rmunn@pobox.com>
Date: Thu, 9 Jul 2026 14:48:34 +0700
Subject: [PATCH 29/32] Remove redundant code

---
 backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs | 1 -
 1 file changed, 1 deletion(-)

diff --git a/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs b/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs
index 65088657d6..16ae3514ea 100644
--- a/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs
+++ b/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs
@@ -61,7 +61,6 @@ public async Task DeleteResource(Guid fileId)
 
     public async Task<ReadFileResponse> GetFileStream(Guid fileId)
     {
-        var resource = await resourceService.GetLocalResource(fileId);
         var localResource = await resourceService.GetLocalResource(fileId);
         if (localResource is null)
         {

From 8c0909758bfc6b2604bd3b888c3a7242bbd459c9 Mon Sep 17 00:00:00 2001
From: Robin Munn <rmunn@pobox.com>
Date: Thu, 9 Jul 2026 15:10:30 +0700
Subject: [PATCH 30/32] Don't dispose of response stream before reading it

By folding the RequestMediaFile method into DownloadResource, we ensure
that the HttpResponseMessage is still in scope when its Content is read.
Only once the Content stream has been copied to a file will the response
go out-of-scope and be disposed.
---
 .../LcmCrdt/MediaServer/LcmMediaService.cs    | 46 ++++++++-----------
 1 file changed, 20 insertions(+), 26 deletions(-)

diff --git a/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs b/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs
index 16ae3514ea..1ccbfccffb 100644
--- a/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs
+++ b/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs
@@ -101,15 +101,33 @@ public async Task<ReadFileResponse> GetFileStream(Guid fileId)
         HttpStatusCode.GatewayTimeout,      // 504
     ];
 
-    private async Task<(Stream? stream, string? filename)> RequestMediaFile(Guid fileId)
+    private async Task<IMediaServerClient> MediaServerClient()
     {
+        var httpClient = await httpClientProvider.GetHttpClient();
+        var mediaClient = refitFactory.Service<IMediaServerClient>(httpClient);
+        return mediaClient;
+    }
+
+    async Task<DownloadResult> IRemoteResourceService.DownloadResource(string remoteId, string localResourceCachePath)
+    {
+        var projectResourceCachePath = ProjectResourceCachePath;
+        Directory.CreateDirectory(projectResourceCachePath);
         var mediaClient = await MediaServerClient();
+        var fileId = new Guid(remoteId);
         for (var attempt = 1; ; attempt++)
         {
             using var response = await mediaClient.DownloadFile(fileId);
             if (response.IsSuccessStatusCode)
             {
-                return (await response.Content.ReadAsStreamAsync(), response.Content.Headers.ContentDisposition?.FileName?.Replace("\"", ""));
+                await using var stream = await response.Content.ReadAsStreamAsync();
+                if (stream is null) throw new FileNotFoundException(remoteId);
+                var filename = response.Content.Headers.ContentDisposition?.FileName?.Replace("\"", "");
+                filename = Path.GetFileName(filename);
+                var localPath = Path.Combine(projectResourceCachePath, filename ?? remoteId);
+                localPath = EnsureUnique(localPath);
+                await using var localFile = File.Create(localPath);
+                await stream.CopyToAsync(localFile);
+                return new DownloadResult(localPath);
             }
 
             var statusCode = response.StatusCode;
@@ -123,30 +141,6 @@ public async Task<ReadFileResponse> GetFileStream(Guid fileId)
         }
     }
 
-    private async Task<IMediaServerClient> MediaServerClient()
-    {
-        var httpClient = await httpClientProvider.GetHttpClient();
-        var mediaClient = refitFactory.Service<IMediaServerClient>(httpClient);
-        return mediaClient;
-    }
-
-    async Task<DownloadResult> IRemoteResourceService.DownloadResource(string remoteId, string localResourceCachePath)
-    {
-        var projectResourceCachePath = ProjectResourceCachePath;
-        Directory.CreateDirectory(projectResourceCachePath);
-        var (stream, filename) = await RequestMediaFile(new Guid(remoteId));
-        if (stream is null) throw new FileNotFoundException(remoteId);
-        await using (stream)
-        {
-            filename = Path.GetFileName(filename);
-            var localPath = Path.Combine(projectResourceCachePath, filename ?? remoteId);
-            localPath = EnsureUnique(localPath);
-            await using var localFile = File.Create(localPath);
-            await stream.CopyToAsync(localFile);
-            return new DownloadResult(localPath);
-        }
-    }
-
     public string ProjectResourceCachePath =>
         Path.Combine(options.Value.LocalResourceCachePath, currentProjectService.Project.Name);
 

From f281bacfab166cf9b9c080e395e2d30fba0814c6 Mon Sep 17 00:00:00 2001
From: Robin Munn <rmunn@pobox.com>
Date: Thu, 9 Jul 2026 15:57:40 +0700
Subject: [PATCH 31/32] Remove download tasks after completion

Even if the download succeeds, we still want to remove the download
task. This allows another thread to start a new download if needed
(which will only happen if the local file gets deleted).
---
 backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs b/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs
index 1ccbfccffb..1ae69b82d0 100644
--- a/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs
+++ b/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs
@@ -73,12 +73,12 @@ public async Task<ReadFileResponse> GetFileStream(Guid fileId)
             {
                 localResource = await downloadTask;
             }
-            catch
+            finally
             {
-                // If the download fails, we need to remove the task from the ConcurrentDictionary so that
-                // a new download can be attempted later by a different thread
+                // Once the download completes, we need to remove the task from the ConcurrentDictionary
+                // so that a new download can be attempted later by a different thread. That way if the local
+                // file is ever deleted (say, by being replaced with a different picture) a new download can start.
                 DownloadTasks.TryRemove(new KeyValuePair<Guid, Task<LocalResource>>(fileId, downloadTask));
-                throw;
             }
         }
         //todo, consider trying to download the file again, maybe the cache was cleared

From de5b5ed2507c0b32a52e8fba4fbcf27720a583e9 Mon Sep 17 00:00:00 2001
From: Robin Munn <rmunn@pobox.com>
Date: Thu, 9 Jul 2026 16:45:50 +0700
Subject: [PATCH 32/32] Handle "can't download while offline" gracefully

---
 backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs b/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs
index 1ae69b82d0..1566db6bc0 100644
--- a/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs
+++ b/backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs
@@ -73,6 +73,17 @@ public async Task<ReadFileResponse> GetFileStream(Guid fileId)
             {
                 localResource = await downloadTask;
             }
+            catch
+            {
+                // Did the download fail because we're offline? Return an explicit "we're offline" result
+                // so that the frontend can display some appropriate UI. If we're online and yet the download
+                // failed, then that's a real error that should be rethrown.
+                if (await httpClientProvider.ConnectionStatus() == ConnectionStatus.Offline)
+                {
+                    return new ReadFileResponse(ReadFileResult.Offline);
+                }
+                throw;
+            }
             finally
             {
                 // Once the download completes, we need to remove the task from the ConcurrentDictionary