@1agh/maude 0.43.0 → 0.44.0

package/apps/studio/annotations-layer.tsx

@@ -158,6 +158,7 @@ import { useViewportControllerContext, useWorldRefContext } from './canvas-lib.t
 import { buildAnnotationStrokesRecord } from './commands/annotation-strokes-command.ts';
 import { ensureMenuStyles as ensureCtxMenuStyles } from './context-menu.tsx';
 import { crossedDragThreshold, type Tool } from './input-router.tsx';
+import { createMediaCommitChain, type MediaCommitResult } from './media-commit-chain.ts';
 import { mountCaret, placeCaretAt } from './text-caret.ts';
 import {
   AnnotationResizeOverlay,
@@ -170,6 +171,7 @@ import {
 import { useAnnotationSelectionOptional } from './use-annotation-selection.tsx';
 import { useAnnotationsVisibility } from './use-annotations-visibility.tsx';
 import {
+  BATCH_DROP_CASCADE_PX,
   isHttpUrl,
   linkDomain,
   prettifyUrl,
@@ -396,6 +398,123 @@ function resolveAssetHref(href: string): string {
   return /^assets\//.test(href) ? `/${canvasDesignRel()}/${href}` : href;
 }
 
+/**
+ * An optimistic ImageStroke's `blob:`/`data:` href must never be PUT to the
+ * server. `sanitizeAnnotationSvg` (api.ts) strips an href it doesn't
+ * recognize — keeping the `<image>` element, dropping only the attribute —
+ * so the server's STORED + broadcast SVG silently diverges from whatever the
+ * client just sent. That divergence defeats the collab-echo self-suppression
+ * guard (the `recentSelfSvgsRef` history, near `putStrokes` below): the
+ * echo's content no longer matches anything we recorded as "already
+ * applied", so a real `setStrokesState` fires from the (href-stripped)
+ * server copy — which can wipe out a SIBLING stroke's still-in-flight
+ * optimistic insert that was never itself part of that PUT. This is the
+ * concrete failure a 3-file concurrent drop hit: one
+ * image ended up href-stripped (a blank frame) and another was dropped
+ * entirely once an unrelated commit's echo round-tripped while both were
+ * still uploading. See media-commit-chain.ts for the sibling accumulator fix
+ * — this closes the other half, at the persistence layer.
+ */
+function isEphemeralHref(s: Stroke): boolean {
+  return s.tool === 'image' && /^(?:blob|data):/i.test(s.href);
+}
+
+/**
+ * Fold a local mutation's `next` against the live-rendered `prev`, restoring
+ * only strokes that are genuinely concurrent additions from ANOTHER
+ * in-flight commit — never reverting THIS mutation's own deletions.
+ * Disambiguated via `opBefore`, the baseline this mutation's `next` was
+ * itself computed from: an id present in `prev` but absent from BOTH
+ * `opBefore` and `next` was added by someone else after `opBefore` was
+ * captured (fold it in — this is the sibling-insert race this helper was
+ * originally written for). An id present in `opBefore` but absent from
+ * `next` was deliberately removed BY THIS MUTATION and must stay removed
+ * even though `prev` (React's rendered state) hasn't caught up to that
+ * removal yet.
+ *
+ * The prior version of this helper compared only `prev` against `next` —
+ * exactly the shape of every delete (an id in `prev`, absent from `next`) —
+ * so it silently folded every erased stroke straight back in locally, while
+ * the smaller, correct set still went out over PUT. Backspace looked like a
+ * no-op until a reload picked up the server's already-correct copy.
+ */
+export function reconcileCommit(
+  prev: readonly Stroke[],
+  opBefore: readonly Stroke[],
+  next: readonly Stroke[]
+): Stroke[] {
+  const beforeIds = new Set(opBefore.map((s) => s.id));
+  const nextIds = new Set(next.map((s) => s.id));
+  const extra = prev.filter((s) => !beforeIds.has(s.id) && !nextIds.has(s.id));
+  return extra.length ? [...next, ...extra] : (next as Stroke[]);
+}
+
+/**
+ * Fold a FOREIGN collab-echo snapshot against local state. A foreign
+ * broadcast legitimately omits an id that was deleted (by us or a peer) —
+ * reviving it just because local `prev` hasn't caught up would make deletes
+ * unsyncable across tabs/peers. The only strokes worth resurrecting here are
+ * ones that are still purely local, not-yet-synced optimistic previews (an
+ * ephemeral blob:/data: href image mid-upload) that a foreign broadcast could
+ * never have known about in the first place.
+ */
+export function reconcileForeignEcho(
+  prev: readonly Stroke[],
+  incoming: readonly Stroke[]
+): Stroke[] {
+  const incomingIds = new Set(incoming.map((s) => s.id));
+  const extra = prev.filter((s) => !incomingIds.has(s.id) && isEphemeralHref(s));
+  return extra.length ? [...incoming, ...extra] : (incoming as Stroke[]);
+}
+
+/**
+ * Decide what `createImageFromFile`'s post-upload swap should do with a
+ * given `before` chain link. Extracted as a pure function (no React) so the
+ * delete-during-upload race is unit-testable: `wasDeleted` reflects whether
+ * `deleteStrokes` recorded this id (via `deletedStrokeIdsRef`) before the
+ * upload resolved — checking that FIRST, rather than inferring intent from
+ * `before`'s membership alone, is what stops a Backspace-then-still-
+ * uploading image from resurrecting once the upload lands (and syncing the
+ * resurrection to every collab peer). When not deleted, an id absent from
+ * `before` is assumed to be render lag (this same file's optimistic insert
+ * hasn't rendered yet) rather than a delete, and gets folded back in.
+ */
+export function resolveImageUploadSwap(
+  before: readonly Stroke[],
+  id: string,
+  optimistic: Stroke,
+  realHref: string,
+  wasDeleted: boolean
+): MediaCommitResult<Stroke> | null {
+  if (wasDeleted) {
+    if (!before.some((s) => s.id === id)) return null;
+    return { after: before.filter((s) => s.id !== id), label: 'add image' };
+  }
+  const base = before.some((s) => s.id === id) ? before : [...before, optimistic];
+  const after = base.map((s) => (s.id === id ? ({ ...s, href: realHref } as Stroke) : s));
+  // The optimistic blob: entry was never itself committed, so the undo
+  // "before" excludes it — undo should remove the image outright, not
+  // restore a revoked blob:.
+  const commitBefore = base.filter((s) => s.id !== id);
+  return { after, commitBefore, label: 'add image' };
+}
+
+// feature-bulk-media-insert Task 11 — classify an already-uploaded
+// `assets/<sha8>.<ext>` path client-side, mirroring the same extension sets
+// `listAssets` uses server-side (api.ts). The picker only ever surfaces paths
+// it already listed via /_api/assets, so every path resolves to one of these;
+// `null` (unrecognized) is treated as "skip" by the caller.
+const ANNOTATION_IMAGE_EXT = new Set(['png', 'jpg', 'jpeg', 'gif', 'webp', 'avif', 'svg']);
+const ANNOTATION_VIDEO_EXT = new Set(['mp4', 'webm', 'mov', 'm4v', 'ogg']);
+const ANNOTATION_AUDIO_EXT = new Set(['mp3', 'wav', 'm4a', 'aac', 'flac', 'oga', 'opus']);
+function classifyAssetPathKind(path: string): 'image' | 'video' | 'audio' | null {
+  const ext = (path.split('.').pop() || '').toLowerCase();
+  if (ANNOTATION_IMAGE_EXT.has(ext)) return 'image';
+  if (ANNOTATION_VIDEO_EXT.has(ext)) return 'video';
+  if (ANNOTATION_AUDIO_EXT.has(ext)) return 'audio';
+  return null;
+}
+
 /**
  * DDR-150 dogfood #8 — true when a pointer/click event targets the inline
  * media player inside a mediaref chip. Every document-capture annotation
@@ -935,6 +1054,43 @@ export function AnnotationsLayer() {
    */
   const strokesRef = useRef<Stroke[]>(strokes);
   strokesRef.current = strokes;
+  // Phase 23 batch-drop fix — see media-commit-chain.ts. Every async media
+  // completion (image upload swap, video/audio upload commit) that can be
+  // triggered concurrently (N Finder files dropped at once) enqueues onto
+  // this instead of calling commitStrokes directly off a `strokesRef.current`
+  // read, so two completions landing before a render commit don't clobber
+  // each other.
+  const mediaCommitChainRef = useRef(
+    createMediaCommitChain<Stroke>(
+      () => strokesRef.current,
+      (s) => s.id
+    )
+  );
+  // Live-security-review finding (feature-bulk-media-insert follow-up) —
+  // `createImageFromFile`'s upload-completion swap folds its optimistic
+  // stroke back in whenever the chain's `before` doesn't have it yet,
+  // reasoning "render lag, not a delete" (see the comment there). That
+  // reasoning has no way to tell a genuine delete apart from render lag by
+  // array membership alone — if the user drops an image then hits
+  // Backspace before the upload resolves, the id is legitimately gone, and
+  // the old code resurrected it anyway once the upload landed (and synced
+  // the resurrection to every collab peer). Tracked explicitly here instead
+  // of inferred: `deleteStrokes` records every id it removes; the swap
+  // checks (and consumes) this before assuming absence means lag. Bounded
+  // like `recentSelfSvgsRef` below — only ever holds ids a delete has
+  // touched, which is small in practice, but capped for safety.
+  const DELETED_STROKE_IDS_CAP = 128;
+  const deletedStrokeIdsRef = useRef<Set<string>>(new Set());
+  const rememberDeletedIds = useCallback((ids: readonly string[]) => {
+    const set = deletedStrokeIdsRef.current;
+    for (const id of ids) {
+      set.add(id);
+      if (set.size > DELETED_STROKE_IDS_CAP) {
+        const oldest = set.values().next().value;
+        if (oldest !== undefined) set.delete(oldest);
+      }
+    }
+  }, []);
 
   const isDraw =
     tool === 'pen' ||
@@ -961,10 +1117,28 @@ export function AnnotationsLayer() {
   }, [ghostCapable, visible]);
 
   // Load existing annotations on mount.
-  // Phase 8 Task 5 — seed lastAppliedSvgRef so the first Y.Map observe (when
-  // collab connects shortly after this fetch lands) doesn't re-apply the
-  // same content we just hydrated from REST.
-  const lastAppliedSvgRef = useRef<string>('');
+  // Self-echo suppression (Phase 8 Task 5, hardened — feature-bulk-media-
+  // insert follow-up). A single "last applied" string only catches the MOST
+  // RECENT self-write: when the chain fires several rapid commits (a batch
+  // drop), the server's broadcast of an EARLIER commit can arrive after a
+  // LATER local commit has already moved "last applied" on — so the earlier
+  // echo no longer matches, gets misread as a foreign change, and rolls
+  // local state BACK to that stale snapshot. This is the confirmed cause of
+  // images silently vanishing after a multi-file drop (live-tested: 12
+  // mismatched/misapplied echoes correlated exactly with lost strokes across
+  // a 30-batch stress run). Track a bounded HISTORY of our own recent writes
+  // instead of just the latest one, so an out-of-order echo of any recent
+  // self-write is still recognized and suppressed.
+  const RECENT_SELF_SVG_CAP = 64;
+  const recentSelfSvgsRef = useRef<Set<string>>(new Set());
+  const rememberSelfSvg = useCallback((svg: string) => {
+    const set = recentSelfSvgsRef.current;
+    set.add(svg);
+    if (set.size > RECENT_SELF_SVG_CAP) {
+      const oldest = set.values().next().value;
+      if (oldest !== undefined) set.delete(oldest);
+    }
+  }, []);
   useEffect(() => {
     const file = deriveFile();
     fileRef.current = file;
@@ -979,7 +1153,7 @@ export function AnnotationsLayer() {
         const loaded = svgToStrokes(text);
         if (loaded.length) {
           setStrokesState(loaded);
-          lastAppliedSvgRef.current = text;
+          rememberSelfSvg(text);
         }
       })
       .catch(() => {
@@ -988,14 +1162,15 @@ export function AnnotationsLayer() {
     return () => {
       cancelled = true;
     };
-  }, []);
+  }, [rememberSelfSvg]);
 
   // Phase 8 Task 5 — observe the Y.Map.annotations for live updates from
-  // other tabs. Bail when the incoming SVG STRING is identical to the one
-  // we last applied (covers the local echo round-trip without missing real
-  // foreign changes). The prior length+first/last-id check was wrong: a
-  // resize / move keeps the same id list, so all three predicates matched
-  // even though geometry changed — foreign edits silently disappeared.
+  // other tabs. Bail when the incoming SVG STRING matches any RECENT
+  // self-write (covers the local echo round-trip, including an
+  // out-of-order one, without missing real foreign changes). The prior
+  // length+first/last-id check was wrong: a resize / move keeps the same id
+  // list, so all three predicates matched even though geometry changed —
+  // foreign edits silently disappeared.
   const collab = useCollab();
   useEffect(() => {
     if (!collab) return;
@@ -1003,9 +1178,10 @@ export function AnnotationsLayer() {
     const apply = () => {
       const svg = map.get('svg');
       if (typeof svg !== 'string' || !svg) return;
-      if (svg === lastAppliedSvgRef.current) return;
-      lastAppliedSvgRef.current = svg;
-      setStrokesState(svgToStrokes(svg));
+      if (recentSelfSvgsRef.current.has(svg)) return;
+      rememberSelfSvg(svg);
+      const incoming = svgToStrokes(svg);
+      setStrokesState((prev) => reconcileForeignEcho(prev, incoming));
     };
     apply();
     map.observe(apply);
@@ -1016,13 +1192,29 @@ export function AnnotationsLayer() {
         /* doc destroyed before unmount */
       }
     };
-  }, [collab]);
+  }, [collab, rememberSelfSvg]);
 
   const undoStack = useUndoStackOptional();
   const undoSinks = useUndoSinks();
   const undoStackRef = useRef(undoStack);
   undoStackRef.current = undoStack;
 
+  // feature-bulk-media-insert follow-up — dedicated PUT dispatch queue.
+  // The undo-stack's own `inFlightRef` serializes its PUSH TASKS (each
+  // awaits `cmd.do()` before the next task starts), but live network
+  // capture during a rapid-fire batch drop showed the actual PUT REQUESTS
+  // still overlapping (request N+1 starting before request N's response
+  // arrived) — some other async hop between "task starts" and "fetch
+  // fires" lets them interleave. Since every PUT body here is a strictly
+  // growing superset (the media-commit-chain guarantees each commit is at
+  // least as complete as the last), overlap is dangerous: if an EARLIER
+  // (smaller) request's write lands on disk AFTER a LATER (larger) one's,
+  // the smaller snapshot wins and silently erases the larger one's extra
+  // strokes. A dedicated chain — mirroring `editApplyChainRef` in
+  // client/app.jsx — makes the fetch DISPATCH itself wait for the
+  // previous one's response, independent of whatever the undo-stack does.
+  const putChainRef = useRef<Promise<void>>(Promise.resolve());
+
   /**
    * Apply a `Stroke[]` snapshot: update local React state AND fire-and-forget
    * PUT to the server. Used as the `putFn` injected into the
@@ -1036,25 +1228,40 @@ export function AnnotationsLayer() {
    * we push a command, so the server only sees one PUT per edit instead
    * of two-step racing.
    */
-  const putStrokes = useCallback((next: readonly Stroke[]) => {
-    setStrokesState(next as Stroke[]);
-    const file = fileRef.current;
-    if (!file) return Promise.resolve();
-    const svg = strokesToSvg(next);
-    // Phase 8 Task 5 — record the SVG we just authored locally so the
-    // server-broadcast echo (PUT → onAnnotationsChanged → syncRoom* →
-    // Y.Map.observe) doesn't trigger a redundant setStrokesState.
-    lastAppliedSvgRef.current = svg;
-    return fetch('/_api/annotations', {
-      method: 'PUT',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ file, svg }),
-    })
-      .then(() => undefined)
-      .catch(() => {
-        /* swallow — user sees uncommitted state until the next stroke */
-      });
-  }, []);
+  const putStrokes = useCallback(
+    (next: readonly Stroke[], before: readonly Stroke[]) => {
+      // See reconcileCommit — a direct setStrokesState(next) here can
+      // clobber a sibling file's concurrent optimistic insert; folding
+      // blindly against `prev` (no baseline) can just as easily revert this
+      // very mutation's own delete. `before` (this command's own baseline)
+      // disambiguates the two.
+      setStrokesState((prev) => reconcileCommit(prev, before, next));
+      const file = fileRef.current;
+      if (!file) return Promise.resolve();
+      const persistable = next.some(isEphemeralHref)
+        ? next.filter((s) => !isEphemeralHref(s))
+        : next;
+      const svg = strokesToSvg(persistable);
+      // Phase 8 Task 5 — record the SVG we just authored locally so the
+      // server-broadcast echo (PUT → onAnnotationsChanged → syncRoom* →
+      // Y.Map.observe) doesn't trigger a redundant setStrokesState.
+      rememberSelfSvg(svg);
+      const dispatch = () =>
+        fetch('/_api/annotations', {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ file, svg }),
+        })
+          .then(() => undefined)
+          .catch(() => {
+            /* swallow — user sees uncommitted state until the next stroke */
+          });
+      const chained = putChainRef.current.then(dispatch, dispatch);
+      putChainRef.current = chained;
+      return chained;
+    },
+    [rememberSelfSvg]
+  );
 
   // Register the strokes put sink with the undo provider so the rebuilt
   // AnnotationStrokesCommand (after a canvas switch + return) routes through
@@ -1113,6 +1320,12 @@ export function AnnotationsLayer() {
         (s) => !set.has(s.id) && !(s.tool === 'text' && s.anchorId != null && set.has(s.anchorId))
       );
       if (filtered.length === prev.length) return;
+      // Record every id actually removed (not just the requested `ids` —
+      // bound text anchors get swept too) so an in-flight image upload's
+      // swap (see deletedStrokeIdsRef above) knows this id is a genuine
+      // delete, not render lag, if it resolves after this point.
+      const filteredIds = new Set(filtered.map((s) => s.id));
+      rememberDeletedIds(prev.filter((s) => !filteredIds.has(s.id)).map((s) => s.id));
       // FigJam v3 — deleting a bind host strips the bind (endpoint frozen,
       // arrow survives); singleton/empty groups dissolve (tldraw lifecycle).
       commitStrokes(prev, recomputeBoundArrows(normalizeGroups(filtered)));
@@ -1220,7 +1433,100 @@ export function AnnotationsLayer() {
       previewStroke,
       commitGesture,
     };
-  }, [strokes, setStrokes, commitStrokes]);
+  }, [strokes, setStrokes, commitStrokes, rememberDeletedIds]);
+
+  // feature-bulk-media-insert Task 11 — the picker's "Add as annotation"
+  // confirm posts N already-uploaded asset paths in ONE message; unlike
+  // createImageFromFile/createMediaReference (which each race an independent
+  // upload), every path here is already on disk, so this resolves every
+  // image's natural size up front (Promise.all) and performs exactly ONE
+  // commitStrokes for the whole batch — correct by construction, no chain
+  // needed since there's no per-item async race once all N are resolved.
+  const createMediaFromAssetPaths = useCallback(
+    (paths: readonly string[], world: [number, number]) => {
+      if (typeof window === 'undefined' || !paths.length) return;
+      const classified = paths
+        .map((path) => ({ path, kind: classifyAssetPathKind(path) }))
+        .filter((it): it is { path: string; kind: 'image' | 'video' | 'audio' } => it.kind != null);
+      if (!classified.length) return;
+
+      type Resolved = { path: string; kind: 'image' | 'video' | 'audio'; w: number; h: number };
+      const probeOne = (path: string, kind: 'image' | 'video' | 'audio'): Promise<Resolved> => {
+        if (kind !== 'image') {
+          const h = kind === 'video' ? MEDIAREF_VIDEO_H : MEDIAREF_DEFAULT_H;
+          return Promise.resolve({ path, kind, w: MEDIAREF_DEFAULT_W, h });
+        }
+        return new Promise<Resolved>((resolve) => {
+          const probe = new Image();
+          probe.onload = () => {
+            const natW = probe.naturalWidth || IMAGE_MAX_DROP_SIDE;
+            const natH = probe.naturalHeight || Math.round(IMAGE_MAX_DROP_SIDE * 0.66);
+            const longest = Math.max(natW, natH) || 1;
+            const scale = longest > IMAGE_MAX_DROP_SIDE ? IMAGE_MAX_DROP_SIDE / longest : 1;
+            resolve({
+              path,
+              kind: 'image',
+              w: Math.max(IMAGE_MIN_SIZE, Math.round(natW * scale)),
+              h: Math.max(IMAGE_MIN_SIZE, Math.round(natH * scale)),
+            });
+          };
+          // Couldn't decode — fall back to a small square rather than
+          // dropping this item from the batch (the file is already on disk).
+          probe.onerror = () => resolve({ path, kind: 'image', w: 64, h: 64 });
+          probe.src = resolveAssetHref(path);
+        });
+      };
+
+      void Promise.all(classified.map(({ path, kind }) => probeOne(path, kind))).then(
+        (resolved) => {
+          // Ids generated up front (stable regardless of chain timing) so
+          // they're available for the selection call below without waiting
+          // on the chain to settle.
+          const withIds = resolved.map((item, i) => ({ ...item, id: rid(), i }));
+          const label = `add ${withIds.length} item${withIds.length === 1 ? '' : 's'}`;
+          // Batch-drop fix (see media-commit-chain.ts) — every path here is
+          // already resolved, so THIS call alone is race-free by
+          // construction, but a SECOND overlapping bulk-insert (or a
+          // concurrent drag-drop via createImageFromFile/createMediaReference)
+          // can still land while this one's Promise.all was in flight (large
+          // photos take real, non-trivial decode time) — both read/write the
+          // same `strokes` state, so this must enqueue onto the shared chain
+          // too, not read `strokesRef.current` + commit directly.
+          void mediaCommitChainRef.current.enqueue((before) => {
+            const added: Stroke[] = withIds.map((item) => {
+              const cx = world[0] + item.i * BATCH_DROP_CASCADE_PX;
+              const cy = world[1] + item.i * BATCH_DROP_CASCADE_PX;
+              if (item.kind === 'image') {
+                return {
+                  id: item.id,
+                  tool: 'image',
+                  x: cx - item.w / 2,
+                  y: cy - item.h / 2,
+                  w: item.w,
+                  h: item.h,
+                  href: item.path,
+                } as ImageStroke;
+              }
+              return {
+                id: item.id,
+                tool: 'mediaref',
+                x: cx - item.w / 2,
+                y: cy - item.h / 2,
+                w: item.w,
+                h: item.h,
+                src: item.path,
+                mediaKind: item.kind,
+                title: item.path.split('/').pop() || item.path,
+              } as MediaRefStroke;
+            });
+            return { after: [...before, ...added], label };
+          }, commitStrokes);
+          annotSel?.replace(withIds.map((item) => item.id));
+        }
+      );
+    },
+    [commitStrokes, annotSel]
+  );
 
   // Menubar bridge (Phase 5.1 Task 10) — listen for postMessages from the
   // dev-server shell. `selection-clear` + `tool-set` live in canvas-shell
@@ -1297,10 +1603,29 @@ export function AnnotationsLayer() {
         commitStrokes(before, [...before, stroke], 'add sticker');
         annotSel?.replace([id]);
       }
+      // feature-bulk-media-insert Task 11 — the shell's AssetPicker (main-
+      // origin) multi-select "Add as annotation" confirm. Every path is
+      // already an uploaded assets/… path (no upload step here); same
+      // viewport-center placement as insert-sticker above (no cross-origin
+      // cursor position to reuse).
+      if (m.dgn === 'insert-annotation-media' && Array.isArray((m as { paths?: unknown }).paths)) {
+        const paths = (m as { paths: unknown[] }).paths.filter(
+          (p): p is string => typeof p === 'string'
+        );
+        if (paths.length) {
+          const v = vpRef.current ?? { x: 0, y: 0, zoom: 1 };
+          const z = v.zoom || 1;
+          const cx = typeof window !== 'undefined' ? window.innerWidth / 2 : 0;
+          const cy = typeof window !== 'undefined' ? window.innerHeight / 2 : 0;
+          const wx = (cx - v.x) / z;
+          const wy = (cy - v.y) / z;
+          createMediaFromAssetPaths(paths, [wx, wy]);
+        }
+      }
     };
     window.addEventListener('message', onMessage);
     return () => window.removeEventListener('message', onMessage);
-  }, [annotSel, strokes, setVisible, commitStrokes]);
+  }, [annotSel, strokes, setVisible, commitStrokes, createMediaFromAssetPaths]);
 
   // Document-level toggle: Shift+P (presentation). Annotation-shortcut help is
   // owned by the dev-server menubar (Help button); we no longer ship an
@@ -1355,17 +1680,35 @@ export function AnnotationsLayer() {
         };
         // Local-only insert — the blob: href must NOT reach the server (it's
         // ephemeral + would be stripped by the sanitizer); we commit only the
-        // assets/… form once the upload lands.
-        setStrokesState([...strokesRef.current, optimistic]);
+        // assets/… form once the upload lands. Functional updater — a batch
+        // drop fires this for every file independently, so two optimistic
+        // inserts landing before a render commit must compose against each
+        // other rather than each overwriting the other's array snapshot.
+        setStrokesState((prev) => [...prev, optimistic]);
         void uploadAsset(file).then((res) => {
-          const cur = strokesRef.current;
           if ('path' in res) {
-            const after = cur.map((s) => (s.id === id ? ({ ...s, href: res.path } as Stroke) : s));
-            const beforeForUndo = cur.filter((s) => s.id !== id);
-            commitStrokes(beforeForUndo, after, 'add image');
-            annotSel?.replace([id]);
+            // Batch-drop fix (see media-commit-chain.ts) — N concurrent
+            // uploads resolve at unpredictable relative speed; enqueue the
+            // swap instead of reading strokesRef.current directly, so this
+            // completion always builds on the latest accumulated state
+            // rather than a stale pre-render snapshot another completion
+            // already moved past.
+            void mediaCommitChainRef.current
+              .enqueue((before) => {
+                const wasDeleted = deletedStrokeIdsRef.current.has(id);
+                if (wasDeleted) deletedStrokeIdsRef.current.delete(id);
+                return resolveImageUploadSwap(before, id, optimistic, res.path, wasDeleted);
+              }, commitStrokes)
+              .then((after) => {
+                if (after.some((s) => s.id === id)) annotSel?.replace([id]);
+              });
           } else {
-            setStrokesState(cur.filter((s) => s.id !== id));
+            // Failure cleanup — no undo record (the optimistic stroke was
+            // never committed), so a plain functional updater (not the
+            // chain) is enough: it still composes correctly against any
+            // chain-driven setStrokesState queued in the same batch.
+            setStrokesState((prev) => prev.filter((s) => s.id !== id));
+            deletedStrokeIdsRef.current.delete(id); // never reached the chain — nothing to consume there
             showCanvasToast(`Image upload failed — ${res.error}`);
           }
           URL.revokeObjectURL(blobUrl);
@@ -1433,8 +1776,15 @@ export function AnnotationsLayer() {
           mediaKind,
           title: (file.name || res.path).slice(0, 300),
         };
-        const before = strokesRef.current;
-        commitStrokes(before, [...before, ref], `add ${mediaKind} reference`);
+        // Batch-drop fix (see media-commit-chain.ts) — same accumulator
+        // chain as createImageFromFile's swap, so a video/audio upload
+        // resolving interleaved with concurrent image uploads (or other
+        // media uploads) in the same batch never commits against a stale
+        // pre-render snapshot.
+        void mediaCommitChainRef.current.enqueue(
+          (before) => ({ after: [...before, ref], label: `add ${mediaKind} reference` }),
+          commitStrokes
+        );
         annotSel?.replace([id]);
         const sizeMb = file.size / (1024 * 1024);
         showCanvasToast(