@1agh/maude 0.42.0 → 0.44.0

package/apps/studio/annotations-layer.tsx

@@ -26,6 +26,7 @@ import {
   createContext,
   type KeyboardEvent as ReactKeyboardEvent,
   type PointerEvent as ReactPointerEvent,
+  type RefObject,
   useCallback,
   useContext,
   useEffect,
@@ -115,6 +116,7 @@ import {
   SECTION_MIN_SIZE,
   type SectionStroke,
   SHAPE_DEFAULT_SIZE,
+  STICKER_DROP_SIZE,
   STICKY_CORNER_RADIUS,
   STICKY_DEFAULT_H,
   STICKY_DEFAULT_W,
@@ -156,10 +158,20 @@ 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 { AnnotationResizeOverlay } from './use-annotation-resize.tsx';
+import { createMediaCommitChain, type MediaCommitResult } from './media-commit-chain.ts';
+import { mountCaret, placeCaretAt } from './text-caret.ts';
+import {
+  AnnotationResizeOverlay,
+  bboxResize,
+  type Corner,
+  padDX,
+  padDY,
+  type ResizeMods,
+} from './use-annotation-resize.tsx';
 import { useAnnotationSelectionOptional } from './use-annotation-selection.tsx';
 import { useAnnotationsVisibility } from './use-annotations-visibility.tsx';
 import {
+  BATCH_DROP_CASCADE_PX,
   isHttpUrl,
   linkDomain,
   prettifyUrl,
@@ -168,7 +180,7 @@ import {
   useCanvasMediaDrop,
 } from './use-canvas-media-drop.tsx';
 import { useChromeVisibility } from './use-chrome-visibility.tsx';
-import { useCollab } from './use-collab.tsx';
+import { colorForName, useCollab } from './use-collab.tsx';
 import { useSelectionSetOptional } from './use-selection-set.tsx';
 import { type ShapeKind, useToolMode } from './use-tool-mode.tsx';
 import { useUndoSinks, useUndoStackOptional } from './use-undo-stack.tsx';
@@ -386,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
@@ -399,6 +528,70 @@ function isMediaPlayerTarget(e: Event): boolean {
   return !!(t && typeof t.closest === 'function' && t.closest('[data-mediaref-player]'));
 }
 
+/**
+ * Dogfood fix — the Text tool's click-through target for ARTBOARD text. This
+ * layer's own input-capture div sits above the artboard content (z-index), so
+ * `elementsFromPoint` (the full z-stack at that point, topmost first) is
+ * needed to see past it. Mirrors canvas-shell.tsx's own `isLeafText` check
+ * exactly (all children are text nodes) so "would this be a leaf-text edit
+ * target" agrees between the Text-tool click-through and the native
+ * double-click path it delegates to.
+ */
+function findEditableElementAt(clientX: number, clientY: number): HTMLElement | null {
+  if (typeof document === 'undefined' || typeof document.elementsFromPoint !== 'function') {
+    return null;
+  }
+  const stack = document.elementsFromPoint(clientX, clientY);
+  for (const el of stack) {
+    const stamped = el.closest?.('[data-cd-id]') as HTMLElement | null;
+    if (!stamped) continue;
+    const kids = Array.from(stamped.childNodes);
+    const isLeafText = kids.length > 0 && kids.every((n) => n.nodeType === 3);
+    return isLeafText ? stamped : null;
+  }
+  return null;
+}
+
+/**
+ * Phase 4 (unified-text-editing) — the Text tool's click-through target for
+ * ANNOTATION strokes. Deliberately GEOMETRIC (world-coord bbox containment),
+ * not DOM elementsFromPoint: while a draw tool is armed, every stroke node
+ * renders with pointer-events:none (`hitMode`), which makes it invisible to
+ * DOM hit-testing — measured in the WKWebView harness. Walks strokes topmost
+ * (last-rendered) first. An anchored text is skipped — its HOST shape's bbox
+ * already covers it and resolves to the same editor. A section matches only
+ * on its label CHIP (geometry mirrored from SectionLabelChip) so a click
+ * inside the region body still drops a NEW text there.
+ */
+const TEXT_EDITABLE_TOOLS = new Set(['text', 'sticky', 'rect', 'ellipse', 'polygon', 'section']);
+
+function findTextStrokeAt(
+  wx: number,
+  wy: number,
+  strokes: readonly Stroke[],
+  zoom: number
+): string | null {
+  for (let i = strokes.length - 1; i >= 0; i--) {
+    const s = strokes[i];
+    if (!s || !TEXT_EDITABLE_TOOLS.has(s.tool)) continue;
+    if (s.tool === 'section') {
+      const x = Math.min(s.x, s.x + s.w);
+      const y = Math.min(s.y, s.y + s.h);
+      const fontSize = SECTION_LABEL_FONT / zoom;
+      const chipH = SECTION_LABEL_H / zoom;
+      const gap = 4 / zoom;
+      const chipW = Math.max(56 / zoom, s.label.length * fontSize * 0.62 + 18 / zoom);
+      if (wx >= x && wx <= x + chipW && wy >= y - chipH - gap && wy <= y - gap) return s.id;
+      continue;
+    }
+    if (s.tool === 'text' && s.anchorId != null && s.anchorId !== '') continue;
+    const bb = strokeBBox(s);
+    if (!bb) continue;
+    if (wx >= bb.x && wx <= bb.x + bb.w && wy >= bb.y && wy <= bb.y + bb.h) return s.id;
+  }
+  return null;
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Styles
 
@@ -573,6 +766,12 @@ const ANNOT_CSS = `
    See DDR-067. (No backticks in this comment: the whole block is a JS template
    literal, so a backtick here would terminate the string.) */
 .dc-annot-editor, .dc-annot-editor * { cursor: text !important; }
+/* Phase 7 (unified-text-editing) — hover affordance parity with artboard leaf
+   text: a standalone text stroke invites editing with the I-beam in Move mode
+   (double-click / Text-tool click enters its editor in place). Shapes and
+   stickies keep the selection arrow — their whole body is a move/select
+   target first. */
+.dc-annot-svg text[data-tool="text"] { cursor: text; }
 /* FigJam v3 — connection dots on a selected bindable shape. The important flag
    beats use-tool-mode's blanket star-cursor rule (same fight as the editor +
    resize handles — DDR-067). */
@@ -645,7 +844,7 @@ export function useStrokesStore(): StrokesStoreValue | null {
 // the main tool palette, the in-canvas draw chrome, the minimap, and the
 // right-click menu. Clicks on these route to their own handlers.
 const CHROME_SELECTOR =
-  '.dc-annot-conn-dot, .dc-annot-ctx, .dc-tool-palette, .dc-annot-chrome, .dc-mm, .dc-context-menu, .dc-tp-popover, .dc-multi-artboard-tb, .dc-elem-ctx-tb, .dc-cv-eq-spacing-layer, .cm-composer, .cm-thread, .cm-mention-popup, .cm-pin, .dc-annot-resize-handle, .dc-annot-rotate-zone, .dc-annot-editor';
+  '.dc-annot-conn-dot, .dc-annot-ctx, .dc-tool-palette, .dc-annot-chrome, .dc-mm, .dc-context-menu, .dc-tp-popover, .dc-multi-artboard-tb, .dc-elem-ctx-tb, .dc-cv-eq-spacing-layer, .cm-composer, .cm-thread, .cm-mention-popup, .cm-pin, .dc-annot-resize-handle, .dc-annot-rotate-zone, .dc-annot-editor, [data-group-resize-corner]';
 
 const HINTS_KEY = 'maude-annot-hints-v1';
 
@@ -670,6 +869,81 @@ function showOnceHint(key: string, msg: string): void {
 // can read the same state. Re-exported here for back-compat.
 export { useAnnotationsVisibility } from './use-annotations-visibility.tsx';
 
+/**
+ * Phase 2 (whiteboard-improvements) — proportional group resize. Maps one
+ * stroke's geometry from its position inside the group's START bbox (`b0`)
+ * to the equivalent position inside the RESIZED bbox (`b1`) — the same
+ * affine transform applied to every selected member, so the whole selection
+ * scales as one rigid composition anchored at whichever corner `bboxResize`
+ * derived `b1` from (reused verbatim for the group's own outer bbox — see
+ * the pointerdown handler below). Returns null for a stroke with nothing to
+ * scale: anchored text inherits its host's bbox at render time already, so
+ * scaling it too would double-transform it.
+ */
+function scaleStrokeInGroup(
+  s: Stroke,
+  b0: { x: number; y: number; w: number; h: number },
+  b1: { x: number; y: number; w: number; h: number }
+): Partial<Stroke> | null {
+  if (s.tool === 'text' && s.anchorId != null && s.anchorId !== '') return null;
+  const sx = b0.w === 0 ? 1 : b1.w / b0.w;
+  const sy = b0.h === 0 ? 1 : b1.h / b0.h;
+  // Non-uniform group stretches (no Shift held) still need ONE scalar for
+  // things that don't have an independent width/height, like font size.
+  const avgScale = (sx + sy) / 2;
+  const tp = (px: number, py: number): [number, number] => [
+    b1.x + (px - b0.x) * sx,
+    b1.y + (py - b0.y) * sy,
+  ];
+  if (s.tool === 'pen') {
+    return { points: s.points.map(([px, py]) => tp(px, py)) } as Partial<PenStroke>;
+  }
+  if (s.tool === 'arrow') {
+    const [x1, y1] = tp(s.x1, s.y1);
+    const [x2, y2] = tp(s.x2, s.y2);
+    return { x1, y1, x2, y2 } as Partial<ArrowStroke>;
+  }
+  if (s.tool === 'ellipse') {
+    const [cx, cy] = tp(s.cx, s.cy);
+    return {
+      cx,
+      cy,
+      rx: Math.max(1, s.rx * sx),
+      ry: Math.max(1, s.ry * sy),
+    } as Partial<EllipseStroke>;
+  }
+  if (s.tool === 'text') {
+    // Standalone (unanchored) text — its own origin scales with the group;
+    // font size scales by the average factor so a non-uniform stretch keeps
+    // the text legible instead of only stretching its box.
+    const [x, y] = tp(s.x ?? 0, s.y ?? 0);
+    return {
+      x,
+      y,
+      fontSize: Math.max(6, Math.round(s.fontSize * avgScale)),
+    } as Partial<TextStroke>;
+  }
+  if (
+    s.tool === 'rect' ||
+    s.tool === 'polygon' ||
+    s.tool === 'link' ||
+    s.tool === 'mediaref' ||
+    s.tool === 'section' ||
+    s.tool === 'image' ||
+    s.tool === 'sticky'
+  ) {
+    const bb = strokeBBox(s);
+    if (!bb) return null;
+    const [x, y] = tp(bb.x, bb.y);
+    const patch: Partial<Stroke> = { x, y, w: Math.max(1, bb.w * sx), h: Math.max(1, bb.h * sy) };
+    if (s.tool === 'sticky') {
+      (patch as Partial<StickyStroke>).fontSize = Math.max(6, Math.round(s.fontSize * avgScale));
+    }
+    return patch;
+  }
+  return null;
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Component
 
@@ -757,6 +1031,12 @@ export function AnnotationsLayer() {
     [visibilityCtx]
   );
   const [editingId, setEditingId] = useState<string | null>(null);
+  // Phase 3 (unified-text-editing) — the click that OPENED the editor, so the
+  // editor can place a collapsed caret at that exact character on mount
+  // instead of select-all. Set only by pointer entry paths (double-click /
+  // text-tool click-through); keyboard entries (Enter, fresh-create,
+  // ⌘Enter chain) leave it null → select-all, the rename convention.
+  const [editCaretPoint, setEditCaretPoint] = useState<{ x: number; y: number } | null>(null);
 
   const fileRef = useRef<string | undefined>(undefined);
   const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -774,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' ||
@@ -800,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;
@@ -818,7 +1153,7 @@ export function AnnotationsLayer() {
         const loaded = svgToStrokes(text);
         if (loaded.length) {
           setStrokesState(loaded);
-          lastAppliedSvgRef.current = text;
+          rememberSelfSvg(text);
         }
       })
       .catch(() => {
@@ -827,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;
@@ -842,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);
@@ -855,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
@@ -875,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
@@ -952,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)));
@@ -1059,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
@@ -1068,6 +1535,7 @@ export function AnnotationsLayer() {
   useEffect(() => {
     if (typeof window === 'undefined') return;
     const onMessage = (e: MessageEvent) => {
+      if (e.source !== window.parent) return;
       const m = e.data as { dgn?: string; visible?: boolean } | null;
       if (!m || typeof m !== 'object' || !m.dgn) return;
       if (m.dgn === 'view-annotations') {
@@ -1101,11 +1569,63 @@ export function AnnotationsLayer() {
             : ({ ...s, src: path } as MediaRefStroke);
         });
         commitStrokes(before, after, 'replace media');
+        return;
+      }
+      // Phase 4 (whiteboard-improvements) — the shell's StickerPicker (main-
+      // origin) already uploaded the picked bundled sticker to a PROJECT asset
+      // path via /_api/asset (canvas-origin-allowlisted — the round-trip
+      // through the shell exists only because /_stickers/* itself is main-
+      // origin-only, same posture as AssetPicker/replace-annotation-media
+      // above). Drop it at the current viewport center — no cross-origin
+      // cursor position to reuse. Inlines the screenToWorld formula (that
+      // callback isn't declared until below this effect) against vpRef, which
+      // is.
+      if (m.dgn === 'insert-sticker' && typeof (m as { path?: unknown }).path === 'string') {
+        const path = (m as { path: string }).path;
+        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;
+        const size = STICKER_DROP_SIZE;
+        const id = rid();
+        const stroke: ImageStroke = {
+          id,
+          tool: 'image',
+          x: wx - size / 2,
+          y: wy - size / 2,
+          w: size,
+          h: size,
+          href: path,
+        };
+        const before = strokesRef.current;
+        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
@@ -1160,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);
@@ -1238,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(
@@ -1387,6 +1932,9 @@ export function AnnotationsLayer() {
       } else if (tool === 'sticky') {
         // Phase 21 — drag-create a paper card. Default size if the user just
         // taps (no drag) is applied in endStroke.
+        // Phase 3 (whiteboard-improvements) — stamp who drew it from presence
+        // identity (git user.name via useCollab, else its anonymous-* / no-op
+        // fallback); collab is optional (test harnesses without a provider).
         setDrawing({
           id,
           tool: 'sticky',
@@ -1398,6 +1946,7 @@ export function AnnotationsLayer() {
           text: '',
           fontSize: DEFAULT_FONT_SIZE,
           cornerRadius: STICKY_CORNER_RADIUS,
+          ...(collab?.myName ? { authorName: collab.myName, authorId: collab.myConnId } : null),
         });
       } else if (tool === 'section') {
         // FigJam v3 — drag-create a labelled container; a bare tap drops the
@@ -1413,6 +1962,42 @@ export function AnnotationsLayer() {
           color: DEFAULT_SECTION_COLOR,
         });
       } else if (tool === 'text') {
+        // Dogfood fix + Phase 4 (unified-text-editing) — the Text tool
+        // clicking EXISTING editable text edits it in place rather than
+        // dropping a new standalone annotation on top of it. Precedence is
+        // z-order: annotation strokes paint above artboard content, so the
+        // geometric stroke hit-test (findTextStrokeAt — DOM hit-testing can't
+        // see pointer-events:none stroke nodes while a tool is armed) runs
+        // first; then artboard leaf-text (delegated to canvas-shell.tsx,
+        // which owns the DOM/contentEditable side, via maude:enter-text-edit).
+        const strokeId = findTextStrokeAt(wx, wy, strokesRef.current, vpRef.current?.zoom || 1);
+        if (strokeId) {
+          setEditCaretPoint({ x: e.clientX, y: e.clientY });
+          setEditingId(strokeId);
+          if (annotSel) annotSel.replace(strokeId);
+          setTool('move');
+          return true;
+        }
+        const editableTarget = findEditableElementAt(e.clientX, e.clientY);
+        if (editableTarget) {
+          // Phase 6 — leaf-looking text the engine would refuse (mixed /
+          // expression source; no build-time data-cd-editable marker) gets an
+          // honest hint, not a new annotation dropped on top of it.
+          if (!editableTarget.hasAttribute('data-cd-editable')) {
+            showCanvasToast(
+              'This text is filled in from code (a variable) — edit it via chat or /design:edit.'
+            );
+            setTool('move');
+            return true;
+          }
+          document.dispatchEvent(
+            new CustomEvent('maude:enter-text-edit', {
+              detail: { el: editableTarget, clientX: e.clientX, clientY: e.clientY },
+            })
+          );
+          setTool('move');
+          return true;
+        }
         // Phase 21 — single click drops an editable caret at the click point.
         // No stroke is created until the user commits real text (mirrors the
         // anchored double-click flow), so an empty caret leaves nothing behind.
@@ -1577,10 +2162,18 @@ export function AnnotationsLayer() {
       // AnnotationsLayer without the provider), so guard the call.
       if (annotSel) annotSel.replace(committed.id);
       // Phase 21 — a fresh sticky opens in edit mode (FigJam parity: drop a
-      // note, type immediately). Only meaningful deviation from rect/ellipse.
-      if (committed.tool === 'sticky') {
+      // note, type immediately). Phase 1 whiteboard-improvements — shapes get
+      // the same treatment (rect/ellipse/polygon are all AnchorHost, so
+      // setEditingId resolves them via editingTarget's 'anchored' branch same
+      // as a double-click would).
+      if (
+        committed.tool === 'sticky' ||
+        committed.tool === 'rect' ||
+        committed.tool === 'ellipse' ||
+        committed.tool === 'polygon'
+      ) {
         setEditingId(committed.id);
-        showOnceHint('chain', '⌘Enter commits and creates the next sticky beside it.');
+        showOnceHint('chain', '⌘Enter commits and creates the next one beside it.');
       }
     }
     // T18 / T19 — flip the tool back to Move after every commit UNLESS sticky
@@ -1697,6 +2290,20 @@ export function AnnotationsLayer() {
     altDup: boolean;
   } | null>(null);
 
+  // Phase 2 (whiteboard-improvements) — proportional group resize drag state.
+  // See the gesture effect below (registered after strokesStoreRef).
+  const groupResizeRef = useRef<{
+    pointerId: number;
+    corner: Corner;
+    /** The selection's own union bbox at drag start — unpadded (AnnotGroupBbox
+     *  renders it with a screen-constant pad; the resize math works in the raw
+     *  content bbox, same convention single-resize's padDX/padDY correct for). */
+    groupB0: { x: number; y: number; w: number; h: number };
+    ids: string[];
+    /** Full-strokes undo baseline (the drag-start snapshot). */
+    undoBase: Stroke[];
+  } | null>(null);
+
   // Drag-select marquee state. World-coord rectangle (anchor + cursor); the
   // cursor end animates with pointermove. `null` = no marquee active.
   const [marquee, setMarquee] = useState<{
@@ -1754,7 +2361,18 @@ export function AnnotationsLayer() {
       // branch below and DESELECTED them.
       let ids: string[] | null = null;
       if (strokeId) {
-        elementSel?.clear();
+        // feature-photo-editor — an image-stroke hit routes to the Photo-only
+        // Inspector tab (`edit-annotation-photo-request`, the singleSelectedImageId
+        // effect below), which the shell shows via `photoSel` taking priority over
+        // the DOM `selected` channel. `elementSel.clear()` posts a DEBOUNCED
+        // (50ms, use-selection-set.tsx POST_DEBOUNCE_MS) `select-set: null` — that
+        // lands AFTER the (undebounced) photo-request and the shell's `select-set`
+        // handler unconditionally nulls `photoSel` back out, so the Photo tab
+        // flickers open then goes blank. Skip the clear for an image stroke: it
+        // isn't needed (photoSel already takes precedence in tab resolution) and
+        // is the only case that races with a still-in-flight photo-tab request.
+        const strokeTool = target?.closest?.('[data-id][data-tool]')?.getAttribute('data-tool');
+        if (strokeTool !== 'image') elementSel?.clear();
         // FigJam v3 — clicking a group member acts on the WHOLE outermost
         // group. Double-click deep-selects the member (see the dblclick
         // handler); an already-selected stroke keeps the current selection, so
@@ -2024,6 +2642,114 @@ export function AnnotationsLayer() {
   const strokesStoreRef = useRef(strokesStore);
   strokesStoreRef.current = strokesStore;
 
+  // Phase 2 (whiteboard-improvements) — proportional group resize. A grabbed
+  // corner (AnnotGroupBbox's `[data-group-resize-corner]` handles) scales the
+  // SELECTION's own outer bbox via bboxResize — the exact single-shape corner-
+  // anchor / Shift-aspect-lock / Alt-center-scale math, applied here to the
+  // group's union bbox instead of one stroke's — then propagates that affine
+  // transform to every selected stroke via scaleStrokeInGroup. One local
+  // preview per pointermove, one commitStrokes on pointerup: mirrors the
+  // hull-drag gesture above. Registering pointermove/up unconditionally
+  // (no-op via the groupResizeRef null-check) rather than adding them inside
+  // onDown matches AnnotationResizeOverlay's own pattern in
+  // use-annotation-resize.tsx.
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+    if (tool !== 'move') return;
+    if (!annotSel) return;
+
+    const onDown = (e: PointerEvent) => {
+      const target = e.target as Element | null;
+      const cornerEl = target?.closest?.('[data-group-resize-corner]') ?? null;
+      if (!cornerEl) return;
+      const corner = cornerEl.getAttribute('data-group-resize-corner') as Corner | null;
+      if (!corner) return;
+      const ids = annotSel.selectedIds;
+      if (ids.length < 2) return;
+      const idSet = new Set(ids);
+      const strokesNow = strokesStoreRef.current.strokes;
+      let xMin = Number.POSITIVE_INFINITY;
+      let yMin = Number.POSITIVE_INFINITY;
+      let xMax = Number.NEGATIVE_INFINITY;
+      let yMax = Number.NEGATIVE_INFINITY;
+      let any = false;
+      for (const s of strokesNow) {
+        if (!idSet.has(s.id)) continue;
+        const b = strokeBBox(s, anchorsById);
+        if (!b) continue;
+        any = true;
+        if (b.x < xMin) xMin = b.x;
+        if (b.y < yMin) yMin = b.y;
+        if (b.x + b.w > xMax) xMax = b.x + b.w;
+        if (b.y + b.h > yMax) yMax = b.y + b.h;
+      }
+      if (!any) return;
+      e.preventDefault();
+      e.stopPropagation();
+      groupResizeRef.current = {
+        pointerId: e.pointerId,
+        corner,
+        groupB0: { x: xMin, y: yMin, w: xMax - xMin, h: yMax - yMin },
+        ids,
+        undoBase: strokesNow,
+      };
+      try {
+        (cornerEl as Element & { setPointerCapture?: (id: number) => void }).setPointerCapture?.(
+          e.pointerId
+        );
+      } catch {
+        /* some browsers reject capture on synthetic events */
+      }
+    };
+    const onMove = (e: PointerEvent) => {
+      const d = groupResizeRef.current;
+      if (!d || e.pointerId !== d.pointerId) return;
+      const [wxRaw, wyRaw] = screenToWorld(e.clientX, e.clientY);
+      const zoom = vpRef.current?.zoom || 1;
+      // Handles render padded OFF the group bbox (screen-constant, same as
+      // AnnotGroupBbox's `pad`) — shift the cursor back onto the true corner
+      // so the first move doesn't jump-grow by the pad amount (mirrors
+      // single-resize applyResize's padDX/padDY correction).
+      const padWorld = HALO_PAD_PX / zoom;
+      const wx = wxRaw + padDX(d.corner) * padWorld;
+      const wy = wyRaw + padDY(d.corner) * padWorld;
+      const mods: ResizeMods = { shift: e.shiftKey, alt: e.altKey };
+      const groupB1 = bboxResize(d.groupB0, d.corner, wx, wy, mods, false);
+      const idSet = new Set(d.ids);
+      // Local React state only — no commitStrokes, no PUT, matching the
+      // hull-drag / single-resize preview convention (one undo record lands
+      // on pointerup, not one per pixel moved).
+      const next = recomputeBoundArrows(
+        d.undoBase.map((s) => {
+          if (!idSet.has(s.id)) return s;
+          const patch = scaleStrokeInGroup(s, d.groupB0, groupB1);
+          return patch ? ({ ...s, ...patch } as Stroke) : s;
+        })
+      );
+      setStrokesState(next);
+    };
+    const onUp = (e: PointerEvent) => {
+      const d = groupResizeRef.current;
+      if (!d || e.pointerId !== d.pointerId) return;
+      groupResizeRef.current = null;
+      const final = strokesRef.current;
+      // No-op drag (grabbed a handle, released without moving past the
+      // resize's own resolution) skips the undo record.
+      if (strokesShallowEqual(d.undoBase, final)) return;
+      commitStrokes(d.undoBase, final, `resize ${d.ids.length} strokes`);
+    };
+    document.addEventListener('pointerdown', onDown, true);
+    document.addEventListener('pointermove', onMove, true);
+    document.addEventListener('pointerup', onUp, true);
+    document.addEventListener('pointercancel', onUp, true);
+    return () => {
+      document.removeEventListener('pointerdown', onDown, true);
+      document.removeEventListener('pointermove', onMove, true);
+      document.removeEventListener('pointerup', onUp, true);
+      document.removeEventListener('pointercancel', onUp, true);
+    };
+  }, [tool, annotSel, screenToWorld, anchorsById, commitStrokes]);
+
   // Double-click enters text-edit mode: rect/ellipse (anchored text), sticky
   // (its own body), or a standalone text node (re-edit in place). Anchored text
   // nodes are edited via their host, so a data-anchor-id text node is skipped.
@@ -2045,15 +2771,24 @@ export function AnnotationsLayer() {
       const stroke = strokesRef.current.find((s) => s.id === id);
       if (stroke && outermostGroupOf(stroke) && annotSel) {
         e.preventDefault();
+        e.stopPropagation();
         annotSel.replace(id);
       }
       if (t === 'rect' || t === 'ellipse' || t === 'polygon' || t === 'sticky' || t === 'section') {
+        // A double-click we've claimed for editing must not also reach the
+        // canvas-shell dblclick-empty→fit() handler (bubble phase, below us) —
+        // without this it fired right after, so renaming a section or editing
+        // a shape's text jumped the viewport to fit().
         e.preventDefault();
+        e.stopPropagation();
+        setEditCaretPoint({ x: e.clientX, y: e.clientY });
         setEditingId(id);
         return;
       }
       if (t === 'text' && !node.getAttribute('data-anchor-id')) {
         e.preventDefault();
+        e.stopPropagation();
+        setEditCaretPoint({ x: e.clientX, y: e.clientY });
         setEditingId(id);
       }
     };
@@ -2192,6 +2927,7 @@ export function AnnotationsLayer() {
       const target = editingTargetRef.current;
       setEditingId(null);
       setPendingText(null);
+      setEditCaretPoint(null);
       if (!target) return;
       if (target.kind === 'anchored') commitText(target.anchorId, text, fmt);
       else if (target.kind === 'sticky') commitStickyText(target.sticky.id, text, fmt);
@@ -2211,6 +2947,7 @@ export function AnnotationsLayer() {
   const cancelEditing = useCallback(() => {
     setEditingId(null);
     setPendingText(null);
+    setEditCaretPoint(null);
   }, []);
 
   /**
@@ -2780,6 +3517,21 @@ export function AnnotationsLayer() {
         } catch {
           /* detached / cross-origin teardown */
         }
+      } else if (action === 'edit-photo') {
+        // feature-photo-editor (Task 17) — "Edit Photo…" on an ImageStroke. Same
+        // untrusted-origin REQUEST shape as Replace (DDR-054); the shell opens the
+        // Photo-only Inspector tab on this stroke's content-addressed asset.
+        if (sel.length !== 1) return;
+        const target = strokesById.get(sel[0] as string);
+        if (target?.tool !== 'image') return;
+        try {
+          window.parent.postMessage(
+            { dgn: 'edit-annotation-photo-request', id: target.id, asset: target.href },
+            '*'
+          );
+        } catch {
+          /* detached / cross-origin teardown */
+        }
       }
     },
     [annotSel, copySelection, pasteStrokesText, strokesById]
@@ -2797,6 +3549,34 @@ export function AnnotationsLayer() {
     }
   }, [selCount]);
 
+  // feature-photo-editor — auto-open the Inspector's Photo tab whenever the
+  // annotation selection becomes exactly one ImageStroke. Previously this
+  // only fired from the "Edit Photo…" context-menu action; a plain click/
+  // select left the Inspector showing its no-selection placeholder, since an
+  // annotation stroke has no data-cd-id / DOM selection to ride the normal
+  // `select`/`select-set` path. An ImageStroke has no OTHER inspectable
+  // surface (Task 13: Photo is the only tab for this content type), so
+  // requiring a right-click detour to reach it was pure friction. Same
+  // `edit-annotation-photo-request` message + confused-deputy gate (DDR-054)
+  // the context-menu action already used.
+  const singleSelectedImageId =
+    selCount === 1 && strokesById.get(annotSel?.selectedIds[0] as string)?.tool === 'image'
+      ? (annotSel?.selectedIds[0] as string)
+      : null;
+  useEffect(() => {
+    if (!singleSelectedImageId) return;
+    const s = strokesById.get(singleSelectedImageId);
+    if (s?.tool !== 'image') return;
+    try {
+      window.parent.postMessage(
+        { dgn: 'edit-annotation-photo-request', id: s.id, asset: s.href },
+        '*'
+      );
+    } catch {
+      /* detached / cross-origin teardown */
+    }
+  }, [singleSelectedImageId, strokesById]);
+
   // Selected stroke halos — bboxes in world coords, vector-effect non-scaling-stroke.
   const selectedStrokes = useMemo(() => {
     if (!annotSel || annotSel.selectedIds.length === 0) return [] as Stroke[];
@@ -2834,6 +3614,7 @@ export function AnnotationsLayer() {
           addTextHintId={editingTarget ? null : addTextHintId}
           ghost={ghostPreview}
           editingTarget={editingTarget}
+          editCaretPoint={editCaretPoint}
           inkColor={color}
           onCommitEdit={commitEditing}
           onCancelEdit={cancelEditing}
@@ -2863,6 +3644,11 @@ export function AnnotationsLayer() {
             selectedStrokes.length === 1 &&
             (selectedStrokes[0]?.tool === 'image' || selectedStrokes[0]?.tool === 'mediaref')
           }
+          canEditPhoto={
+            selectedStrokes.length === 1 &&
+            selectedStrokes[0]?.tool === 'image' &&
+            /assets\/[0-9a-f]{8}\.[a-z0-9]+/i.test((selectedStrokes[0] as ImageStroke).href || '')
+          }
           onAction={onMenuAction}
           onClose={() => setCtxMenu(null)}
         />
@@ -2988,6 +3774,7 @@ function AnnotationsSvg({
   addTextHintId,
   ghost,
   editingTarget,
+  editCaretPoint,
   inkColor,
   onCommitEdit,
   onCancelEdit,
@@ -3020,6 +3807,8 @@ function AnnotationsSvg({
   addTextHintId: string | null;
   ghost: GhostDescriptor | null;
   editingTarget: EditingTarget;
+  /** The click that opened the editor — caret-at-click on mount (Phase 3). */
+  editCaretPoint: { x: number; y: number } | null;
   /** Live default ink (theme-aware) for a not-yet-born pending text caret. */
   inkColor: string;
   onCommitEdit: (text: string, fmt?: EditorFmt) => void;
@@ -3036,154 +3825,234 @@ function AnnotationsSvg({
   // A sticky whose body is being edited hides its read-only text so the
   // editor textarea (rendered below at the same bbox) isn't double-painted.
   const editingStickyId = editingTarget?.kind === 'sticky' ? editingTarget.sticky.id : null;
+  // Same double-paint issue for a section being renamed — its label chip must
+  // hide while the StandaloneTextEditor sits at the same spot, else the old
+  // label reads through behind the new text.
+  const editingSectionId = editingTarget?.kind === 'section' ? editingTarget.section.id : null;
   const anchoredExisting =
     editingTarget?.kind === 'anchored'
       ? (strokes.find((s) => s.tool === 'text' && s.anchorId === editingTarget.anchorId) as
           | TextStroke
           | undefined)
       : undefined;
-  return createPortal(
-    <svg className="dc-annot-svg" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
-      <defs>
-        {/* Phase 21 — soft "lifted paper" drop shadow for sticky notes. */}
-        <filter id="dc-sticky-shadow" x="-25%" y="-25%" width="150%" height="170%">
-          <feDropShadow dx="0" dy="4" stdDeviation="8" floodColor="#000000" floodOpacity="0.28" />
-        </filter>
-      </defs>
-      {strokes.map((s) => (
-        <StrokeNode
-          key={s.id}
-          stroke={s}
-          anchorsById={anchorsById}
-          interactive={selectMode}
-          editing={s.id === editingStickyId}
-        />
-      ))}
-      {selectedStrokes.map((s) => (
-        <SelectionHalo
-          key={`halo-${s.id}`}
-          stroke={s}
-          anchorsById={anchorsById}
-          multi={selectedStrokes.length > 1}
-        />
-      ))}
-      <AnnotGroupBbox selectedStrokes={selectedStrokes} anchorsById={anchorsById} />
-      {marquee ? (
-        <rect
-          className="dc-annot-marquee"
-          x={Math.min(marquee.ax, marquee.bx)}
-          y={Math.min(marquee.ay, marquee.by)}
-          width={Math.abs(marquee.bx - marquee.ax)}
-          height={Math.abs(marquee.by - marquee.ay)}
-          vectorEffect="non-scaling-stroke"
-        />
-      ) : null}
-      {/* FigJam v3 — smart guides: solid 1px accent lines at the snapped edge/
+  // Same double-paint issue for a shape's anchored text — hide the read-only
+  // <text> stroke while TextEditor sits at the same bbox (Phase 1 jump-fix
+  // companion). Only applies once the TextStroke exists; a not-yet-created
+  // one has nothing to hide.
+  const editingAnchoredTextId = anchoredExisting?.id ?? null;
+  // A standalone text being re-edited hides its read-only <text> too — the
+  // editor paints at the same x/y, so leaving it visible double-paints (the
+  // pre-Phase-2 "ghost" under the editor).
+  const editingStandaloneTextId =
+    editingTarget?.kind === 'standalone' ? editingTarget.text.id : null;
+  return (
+    <>
+      {createPortal(
+        <svg className="dc-annot-svg" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
+          <defs>
+            {/* Phase 21 — soft "lifted paper" drop shadow for sticky notes. */}
+            <filter id="dc-sticky-shadow" x="-25%" y="-25%" width="150%" height="170%">
+              <feDropShadow
+                dx="0"
+                dy="4"
+                stdDeviation="8"
+                floodColor="#000000"
+                floodOpacity="0.28"
+              />
+            </filter>
+          </defs>
+          {strokes.map((s) => (
+            <StrokeNode
+              key={s.id}
+              stroke={s}
+              anchorsById={anchorsById}
+              interactive={selectMode}
+              editing={
+                s.id === editingStickyId ||
+                s.id === editingSectionId ||
+                s.id === editingAnchoredTextId ||
+                s.id === editingStandaloneTextId
+              }
+            />
+          ))}
+          {selectedStrokes.map((s) => (
+            <SelectionHalo
+              key={`halo-${s.id}`}
+              stroke={s}
+              anchorsById={anchorsById}
+              multi={selectedStrokes.length > 1}
+            />
+          ))}
+          <AnnotGroupBbox selectedStrokes={selectedStrokes} anchorsById={anchorsById} />
+          {marquee ? (
+            <rect
+              className="dc-annot-marquee"
+              x={Math.min(marquee.ax, marquee.bx)}
+              y={Math.min(marquee.ay, marquee.by)}
+              width={Math.abs(marquee.bx - marquee.ax)}
+              height={Math.abs(marquee.by - marquee.ay)}
+              vectorEffect="non-scaling-stroke"
+            />
+          ) : null}
+          {/* FigJam v3 — smart guides: solid 1px accent lines at the snapped edge/
           center, painted only while a drag is actively snapping. */}
-      {snapGuides?.map((g, i) => (
-        <line
-          // biome-ignore lint/suspicious/noArrayIndexKey: guides are positional + rebuilt per move tick
-          key={`guide-${i}`}
-          x1={g.axis === 'x' ? g.at : g.from}
-          y1={g.axis === 'x' ? g.from : g.at}
-          x2={g.axis === 'x' ? g.at : g.to}
-          y2={g.axis === 'x' ? g.to : g.at}
-          stroke="var(--maude-hud-accent, #d63b1f)"
-          strokeWidth={1}
-          vectorEffect="non-scaling-stroke"
-          pointerEvents="none"
-        />
-      ))}
-      {/* FigJam v3 — bind hint: halo the host a dragged arrow endpoint would
+          {snapGuides?.map((g, i) => (
+            <line
+              // biome-ignore lint/suspicious/noArrayIndexKey: guides are positional + rebuilt per move tick
+              key={`guide-${i}`}
+              x1={g.axis === 'x' ? g.at : g.from}
+              y1={g.axis === 'x' ? g.from : g.at}
+              x2={g.axis === 'x' ? g.at : g.to}
+              y2={g.axis === 'x' ? g.to : g.at}
+              stroke="var(--maude-hud-accent, #d63b1f)"
+              strokeWidth={1}
+              vectorEffect="non-scaling-stroke"
+              pointerEvents="none"
+            />
+          ))}
+          {/* FigJam v3 — bind hint: halo the host a dragged arrow endpoint would
           magnetically attach to. */}
-      <BindHintHalo strokes={strokes} bindHintId={bindHintId} />
-      {/* FigJam v3 — connection dots on a single selected bindable shape;
+          <BindHintHalo strokes={strokes} bindHintId={bindHintId} />
+          {/* FigJam v3 — connection dots on a single selected bindable shape;
           dragging one draws a bound connector (rendered below as a draft). */}
-      {selectMode && !connDraft && selectedStrokes.length === 1 && selectedStrokes[0] ? (
-        <ConnectorDots stroke={selectedStrokes[0]} />
-      ) : null}
-      {connDraft ? (
-        <g
-          stroke={inkColor}
-          strokeWidth={2.5}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          vectorEffect="non-scaling-stroke"
-          fill="none"
-          pointerEvents="none"
-        >
-          {arrowPrimitives({
-            x1: connDraft.x1,
-            y1: connDraft.y1,
-            x2: connDraft.x2,
-            y2: connDraft.y2,
-            width: 2.5,
-            color: inkColor,
-            lineType: 'curved',
-            startBind: connDraft.startBind,
-            ...(connDraft.endBind ? { endBind: connDraft.endBind } : {}),
-          }).map((prim, i) => renderArrowPrimitive(prim, i))}
-        </g>
-      ) : null}
-      {/* FigJam v3 — hover affordance: an empty shape invites text. */}
-      <AddTextHint strokes={strokes} hintId={addTextHintId} />
-      {/* FigJam v3 — resize chrome: live W × H label at the box corner plus a
+          {selectMode && !connDraft && selectedStrokes.length === 1 && selectedStrokes[0] ? (
+            <ConnectorDots stroke={selectedStrokes[0]} />
+          ) : null}
+          {connDraft ? (
+            <g
+              stroke={inkColor}
+              strokeWidth={2.5}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              vectorEffect="non-scaling-stroke"
+              fill="none"
+              pointerEvents="none"
+            >
+              {arrowPrimitives({
+                x1: connDraft.x1,
+                y1: connDraft.y1,
+                x2: connDraft.x2,
+                y2: connDraft.y2,
+                width: 2.5,
+                color: inkColor,
+                lineType: 'curved',
+                startBind: connDraft.startBind,
+                ...(connDraft.endBind ? { endBind: connDraft.endBind } : {}),
+              }).map((prim, i) => renderArrowPrimitive(prim, i))}
+            </g>
+          ) : null}
+          {/* FigJam v3 — hover affordance: an empty shape invites text. */}
+          <AddTextHint strokes={strokes} hintId={addTextHintId} />
+          {/* FigJam v3 — resize chrome: live W × H label at the box corner plus a
           dashed halo on any neighbour whose dimension the resize just matched
           (the "same size as that one" quota). */}
-      {resizeInfo?.box ? (
-        <g pointerEvents="none">
-          {resizeInfo.matchIds.map((id) => {
-            const m = strokes.find((s) => s.id === id);
-            const bb = m ? strokeBBox(m) : null;
-            if (!bb) return null;
-            return (
-              <rect
-                key={`dim-${id}`}
-                x={bb.x - 2}
-                y={bb.y - 2}
-                width={bb.w + 4}
-                height={bb.h + 4}
-                fill="none"
-                stroke="var(--maude-hud-accent, #d63b1f)"
-                strokeWidth={1.5}
-                strokeDasharray="5 3"
-                vectorEffect="non-scaling-stroke"
-                rx={2}
-              />
-            );
-          })}
-          <text
-            x={resizeInfo.box.x + resizeInfo.box.w / 2}
-            y={resizeInfo.box.y + resizeInfo.box.h + 18}
-            textAnchor="middle"
-            fontSize={11}
-            fill="var(--maude-hud-accent, #d63b1f)"
-            style={{
-              fontFamily: 'var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace)',
-            }}
-          >
-            {`${Math.round(resizeInfo.box.w)} × ${Math.round(resizeInfo.box.h)}`}
-          </text>
-        </g>
-      ) : null}
-      {ghost ? <GhostPreview ghost={ghost} /> : null}
-      {editingTarget?.kind === 'anchored' ? (
+          {resizeInfo?.box ? (
+            <g pointerEvents="none">
+              {resizeInfo.matchIds.map((id) => {
+                const m = strokes.find((s) => s.id === id);
+                const bb = m ? strokeBBox(m) : null;
+                if (!bb) return null;
+                return (
+                  <rect
+                    key={`dim-${id}`}
+                    x={bb.x - 2}
+                    y={bb.y - 2}
+                    width={bb.w + 4}
+                    height={bb.h + 4}
+                    fill="none"
+                    stroke="var(--maude-hud-accent, #d63b1f)"
+                    strokeWidth={1.5}
+                    strokeDasharray="5 3"
+                    vectorEffect="non-scaling-stroke"
+                    rx={2}
+                  />
+                );
+              })}
+              <text
+                x={resizeInfo.box.x + resizeInfo.box.w / 2}
+                y={resizeInfo.box.y + resizeInfo.box.h + 18}
+                textAnchor="middle"
+                fontSize={11}
+                fill="var(--maude-hud-accent, #d63b1f)"
+                style={{
+                  fontFamily: 'var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace)',
+                }}
+              >
+                {`${Math.round(resizeInfo.box.w)} × ${Math.round(resizeInfo.box.h)}`}
+              </text>
+            </g>
+          ) : null}
+          {ghost ? <GhostPreview ghost={ghost} /> : null}
+        </svg>,
+        target
+      )}
+      <AnnotEditors
+        worldRef={worldRef}
+        editingTarget={editingTarget}
+        anchoredExisting={anchoredExisting}
+        caretPoint={editCaretPoint}
+        inkColor={inkColor}
+        onCommitEdit={onCommitEdit}
+        onCancelEdit={onCancelEdit}
+      />
+    </>
+  );
+}
+
+/**
+ * The active annotation text editor, rendered as PLAIN HTML absolutely
+ * positioned in the world div — NOT as SVG foreignObject. Same architectural
+ * move as MediaRefPlayers below (read its docblock): foreignObject content
+ * under the transformed `.dc-world` mis-hit-tests clicks at most zoom levels
+ * (WebKit + Chromium), and the `.dc-annot-svg` root's pointer-events:none
+ * additionally swallowed in-editor clicks — so caret-at-click could never
+ * work. HTML children of the transformed div hit-test correctly by
+ * construction. World coords map 1:1 (the div carries the pan/zoom
+ * transform), so each editor's old foreignObject x/y/w/h becomes left/top/
+ * width/height verbatim. The [data-annot-editor] attr keeps document-capture
+ * annotation handlers out (isAnnotEditorTarget guard, mirroring
+ * [data-mediaref-player]).
+ */
+function AnnotEditors({
+  worldRef,
+  editingTarget,
+  anchoredExisting,
+  caretPoint,
+  inkColor,
+  onCommitEdit,
+  onCancelEdit,
+}: {
+  worldRef: ReturnType<typeof useWorldRefContext>;
+  editingTarget: EditingTarget;
+  anchoredExisting: TextStroke | undefined;
+  caretPoint: { x: number; y: number } | null;
+  inkColor: string;
+  onCommitEdit: (text: string, fmt?: EditorFmt) => void;
+  onCancelEdit: () => void;
+}) {
+  const target = worldRef?.current ?? null;
+  if (!target || !editingTarget) return null;
+  return createPortal(
+    <>
+      {editingTarget.kind === 'anchored' ? (
         <TextEditor
           anchorId={editingTarget.anchorId}
           host={editingTarget.host}
           existing={anchoredExisting}
+          caretPoint={caretPoint}
           onCommit={(_anchorId, text, fmt) => onCommitEdit(text, fmt)}
           onCancel={onCancelEdit}
         />
       ) : null}
-      {editingTarget?.kind === 'sticky' ? (
+      {editingTarget.kind === 'sticky' ? (
         <StickyEditor
           sticky={editingTarget.sticky}
+          caretPoint={caretPoint}
           onCommit={onCommitEdit}
           onCancel={onCancelEdit}
         />
       ) : null}
-      {editingTarget?.kind === 'standalone' ? (
+      {editingTarget.kind === 'standalone' ? (
         <StandaloneTextEditor
           x={editingTarget.text.x ?? 0}
           y={editingTarget.text.y ?? 0}
@@ -3196,11 +4065,12 @@ function AnnotationsSvg({
           underline={editingTarget.text.underline}
           align={editingTarget.text.align ?? 'left'}
           listType={editingTarget.text.listType}
+          caretPoint={caretPoint}
           onCommit={onCommitEdit}
           onCancel={onCancelEdit}
         />
       ) : null}
-      {editingTarget?.kind === 'pending' ? (
+      {editingTarget.kind === 'pending' ? (
         <StandaloneTextEditor
           x={editingTarget.x}
           y={editingTarget.y}
@@ -3211,24 +4081,15 @@ function AnnotationsSvg({
           onCancel={onCancelEdit}
         />
       ) : null}
-      {editingTarget?.kind === 'section' ? (
-        <StandaloneTextEditor
-          x={
-            Math.min(editingTarget.section.x, editingTarget.section.x + editingTarget.section.w) + 2
-          }
-          y={
-            Math.min(editingTarget.section.y, editingTarget.section.y + editingTarget.section.h) -
-            SECTION_LABEL_H -
-            2
-          }
-          fontSize={SECTION_LABEL_FONT}
-          color={editingTarget.section.color}
-          initialText={editingTarget.section.label}
+      {editingTarget.kind === 'section' ? (
+        <SectionTitleEditor
+          section={editingTarget.section}
+          caretPoint={caretPoint}
           onCommit={onCommitEdit}
           onCancel={onCancelEdit}
         />
       ) : null}
-    </svg>,
+    </>,
     target
   );
 }
@@ -3319,16 +4180,89 @@ function MediaRefPlayers({
   );
 }
 
+// An empty flex-centered contentEditable has no line box for `justifyContent:
+// 'center'` to center — WebKit parks the caret at the box's top, then jumps it
+// to the true centered position the instant a real character exists. A
+// zero-width space gives the box real (invisible) content from mount, so the
+// caret starts centered and never jumps. Stripped back off on commit.
+const JUMP_SENTINEL = '\u200B';
+function stripJumpSentinel(text: string): string {
+  return text.startsWith(JUMP_SENTINEL) ? text.slice(JUMP_SENTINEL.length) : text;
+}
+
+// Unified caret style across every contentEditable text surface (annotation
+// editors here + the artboard inline editor's `.dc-text-editing` CSS in
+// canvas-shell.tsx use the SAME `--maude-hud-accent` so the caret reads the
+// same everywhere). An explicit caretColor makes the caret visible against any
+// background. NOTE: deliberately NO `transform: translateZ(0)` / `will-change`
+// here \u2014 promoting a contentEditable onto its own compositing layer is a known
+// WebKit caret-BLINK killer (the compositor caches the layer and never repaints
+// the blink, so the caret shows as a static line). A prior dogfood pass added
+// translateZ(0) to "restore" the caret and instead froze its blink; removing it
+// lets WebKit run the native blink. The editor already lives inside the
+// transformed `.dc-world`, but that ancestor transform alone does not stop the
+// blink \u2014 only a compositing trigger ON the editable does.
+const CARET_FIX_STYLE = {
+  caretColor: 'var(--maude-hud-accent, #4a63e7)',
+} as const;
+
+/**
+ * Phase 3 (unified-text-editing) — shared caret behavior for every annotation
+ * editor. On mount: focus, place a collapsed caret at the entry click point
+ * (`placeCaretAt`, the SAME chain the artboard's enterEditModeAt uses;
+ * keyboard entry has no point → select-all, the rename convention), and mount
+ * the custom blinking caret (text-caret.ts) for the session. Afterwards every
+ * plain in-editor click re-places the caret from its coordinates on pointerup
+ * so repositioning never depends on native hit-testing (synthetic e2e clicks
+ * take the same path — untrusted events get no UA caret action at all).
+ * Shift-clicks and drag-selections keep native behavior; ⌘A stays native.
+ */
+function useEditorCaret(
+  ref: RefObject<HTMLDivElement | null>,
+  caretPoint: { x: number; y: number } | null | undefined
+) {
+  const entryPointRef = useRef(caretPoint ?? null);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.focus();
+    placeCaretAt(el, window, entryPointRef.current ?? undefined);
+    return mountCaret(el, window);
+  }, [ref]);
+  const downRef = useRef<{ x: number; y: number } | null>(null);
+  const onPointerDown = useCallback((e: ReactPointerEvent<HTMLDivElement>) => {
+    downRef.current = e.button === 0 && !e.shiftKey ? { x: e.clientX, y: e.clientY } : null;
+  }, []);
+  const onPointerUp = useCallback(
+    (e: ReactPointerEvent<HTMLDivElement>) => {
+      const d = downRef.current;
+      downRef.current = null;
+      if (!d || e.shiftKey) return;
+      // A real drag is a range-selection gesture — leave it to the engine.
+      if (Math.hypot(e.clientX - d.x, e.clientY - d.y) > 3) return;
+      const el = ref.current;
+      if (!el) return;
+      const sel = window.getSelection();
+      if (sel && !sel.isCollapsed) return; // double-click word-select etc.
+      placeCaretAt(el, window, { x: e.clientX, y: e.clientY }, false);
+    },
+    [ref]
+  );
+  return { onPointerDown, onPointerUp };
+}
+
 function TextEditor({
   anchorId,
   host,
   existing,
+  caretPoint,
   onCommit,
   onCancel,
 }: {
   anchorId: string;
   host: AnchorHost | null;
   existing: TextStroke | undefined;
+  caretPoint?: { x: number; y: number } | null;
   onCommit: (anchorId: string, text: string, fmt?: EditorFmt) => void;
   onCancel: () => void;
 }) {
@@ -3351,24 +4285,18 @@ function TextEditor({
     fontSize: existing?.fontSize ?? DEFAULT_FONT_SIZE,
     align: existing?.align ?? 'center',
   });
+  // Both commit sites below (outside-click + Cmd/Ctrl+Enter) need the same
+  // sentinel-strip + marker-strip pipeline. Memoized so the outside-click
+  // effect below can depend on it directly instead of its own copy of
+  // existing?.listType (lint/correctness/useExhaustiveDependencies).
+  const toCommittedText = useCallback(
+    (raw: string) => stripEditorMarkers(stripJumpSentinel(raw), existing?.listType),
+    [existing?.listType]
+  );
 
-  useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    el.focus();
-    // Select all so a re-edit replaces existing text easily.
-    try {
-      const r = document.createRange();
-      r.selectNodeContents(el);
-      const sel = window.getSelection();
-      if (sel) {
-        sel.removeAllRanges();
-        sel.addRange(r);
-      }
-    } catch {
-      /* selection API blocked */
-    }
-  }, []);
+  // Caret-at-click on entry + custom blinking caret + click re-placement
+  // (select-all only for keyboard entry — see useEditorCaret).
+  const caretHandlers = useEditorCaret(ref, caretPoint);
 
   // Commit on outside click; cancel-on-Esc handled in onKeyDown below.
   useEffect(() => {
@@ -3381,15 +4309,11 @@ function TextEditor({
       // FigJam v3 — the edit-mode text toolbar drives THIS editor; clicking
       // it must not commit-and-close the session.
       if ((e.target as Element | null)?.closest?.('.dc-annot-ctx')) return;
-      onCommit(
-        anchorId,
-        stripEditorMarkers(el.innerText || '', existing?.listType),
-        fmtRef.current
-      );
+      onCommit(anchorId, toCommittedText(el.innerText || ''), fmtRef.current);
     };
     document.addEventListener('pointerdown', onDown, true);
     return () => document.removeEventListener('pointerdown', onDown, true);
-  }, [anchorId, onCommit, existing?.listType, fmtRef]);
+  }, [anchorId, onCommit, fmtRef, toCommittedText]);
 
   if (!host) return null;
   const bbox = strokeBBox(host);
@@ -3399,7 +4323,19 @@ function TextEditor({
   // default align = centre).
   const align = existing?.align ?? 'center';
   return (
-    <foreignObject x={bbox.x} y={bbox.y} width={Math.max(20, bbox.w)} height={Math.max(20, bbox.h)}>
+    // Plain HTML host in the world div (NOT foreignObject — see AnnotEditors'
+    // docblock): world coords map 1:1 to left/top, clicks hit-test correctly.
+    <div
+      data-annot-editor="1"
+      style={{
+        position: 'absolute',
+        left: bbox.x,
+        top: bbox.y,
+        width: Math.max(20, bbox.w),
+        height: Math.max(20, bbox.h),
+        zIndex: 5,
+      }}
+    >
       <div
         ref={ref}
         className="dc-annot-editor"
@@ -3429,7 +4365,10 @@ function TextEditor({
           outline: 'none',
           background: 'transparent',
           cursor: 'text',
+          ...CARET_FIX_STYLE,
         }}
+        onPointerDown={caretHandlers.onPointerDown}
+        onPointerUp={caretHandlers.onPointerUp}
         onKeyDown={(e) => {
           if (onFormatKey(e)) return; // Cmd/Ctrl+B/I/U
           if (e.key === 'Escape') {
@@ -3437,44 +4376,46 @@ function TextEditor({
             onCancel();
             return;
           }
-          if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+          // Unified across every text surface: plain Enter commits,
+          // Shift+Enter inserts a newline (falls through untouched). ⌘/Ctrl
+          // +Enter also commits AND chains a connected sibling (quick-create).
+          if (e.key === 'Enter' && !e.shiftKey) {
             e.preventDefault();
             const el = ref.current;
-            onCommit(
-              anchorId,
-              stripEditorMarkers(el?.innerText || '', existing?.listType),
-              fmtRef.current
-            );
-            // FigJam v3 — ⌘Enter chains: commit, then spawn a CONNECTED
-            // sibling shape (quick-create) from the host.
-            document.dispatchEvent(
-              new CustomEvent('maude:chain-create', { detail: { id: anchorId } })
-            );
+            onCommit(anchorId, toCommittedText(el?.innerText || ''), fmtRef.current);
+            if (e.metaKey || e.ctrlKey) {
+              document.dispatchEvent(
+                new CustomEvent('maude:chain-create', { detail: { id: anchorId } })
+              );
+            }
           }
         }}
       >
-        {initial}
+        {initial || JUMP_SENTINEL}
       </div>
-    </foreignObject>
+    </div>
   );
 }
 
-// Phase 21 — sticky body editor. A textarea hosted in a foreignObject at the
-// card's bbox, so it word-wraps + moves with CSS zoom natively. Commit on blur,
-// cancel on Esc; Enter inserts a newline (sticky is multi-line).
+// Phase 21 — sticky body editor, hosted as plain HTML at the card's bbox in
+// the world div (word-wrap + zoom come from the div's own box + the world
+// transform). Commit on blur, cancel on Esc; Enter commits, Shift+Enter
+// inserts a newline.
 function StickyEditor({
   sticky,
+  caretPoint,
   onCommit,
   onCancel,
 }: {
   sticky: StickyStroke;
+  caretPoint?: { x: number; y: number } | null;
   onCommit: (text: string, fmt?: EditorFmt) => void;
   onCancel: () => void;
 }) {
   // A flex-centered contentEditable (NOT a textarea) so the edit view matches
   // the committed `.dc-sticky-body` exactly — text stays centered, no jump on
-  // commit. Multi-line: Enter inserts a line break; Esc cancels; blur / Cmd+Enter
-  // commit; Cmd/Ctrl+B/I/U format (unified with the other editors — item 4d).
+  // commit. Multi-line: Shift+Enter inserts a line break, plain Enter commits;
+  // Esc cancels; blur commits; Cmd/Ctrl+B/I/U format (unified with the others).
   const ref = useRef<HTMLDivElement | null>(null);
   const doneRef = useRef(false);
   const {
@@ -3502,37 +4443,33 @@ function StickyEditor({
     if (to?.closest?.('.dc-annot-ctx')) return;
     commit();
   };
-  useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    el.focus();
-    try {
-      const r = document.createRange();
-      r.selectNodeContents(el);
-      const sel = window.getSelection();
-      if (sel) {
-        sel.removeAllRanges();
-        sel.addRange(r);
-      }
-    } catch {
-      /* selection API blocked */
-    }
-  }, []);
+  // Caret-at-click on entry + custom blinking caret + click re-placement.
+  const caretHandlers = useEditorCaret(ref, caretPoint);
   const x = Math.min(sticky.x, sticky.x + sticky.w);
   const y = Math.min(sticky.y, sticky.y + sticky.h);
   const w = Math.abs(sticky.w);
   const h = Math.abs(sticky.h);
   return (
-    <foreignObject x={x} y={y} width={w} height={h}>
+    <div
+      data-annot-editor="1"
+      style={{ position: 'absolute', left: x, top: y, width: w, height: h, zIndex: 5 }}
+    >
       <div
-        xmlns="http://www.w3.org/1999/xhtml"
         ref={ref}
         className="dc-annot-editor dc-sticky-body"
         contentEditable
         suppressContentEditableWarning
         aria-label="Edit sticky note text"
-        style={{ ...stickyBodyStyle(sticky), ...fmtStyle, outline: 'none', cursor: 'text' }}
+        style={{
+          ...stickyBodyStyle(sticky),
+          ...fmtStyle,
+          outline: 'none',
+          cursor: 'text',
+          ...CARET_FIX_STYLE,
+        }}
         onBlur={onBlur}
+        onPointerDown={caretHandlers.onPointerDown}
+        onPointerUp={caretHandlers.onPointerUp}
         onKeyDown={(e) => {
           if (onFormatKey(e)) return; // Cmd/Ctrl+B/I/U
           if (e.key === 'Escape') {
@@ -3541,14 +4478,16 @@ function StickyEditor({
             onCancel();
             return;
           }
-          if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+          // Unified: plain Enter commits, Shift+Enter inserts a newline.
+          // ⌘/Ctrl+Enter also commits AND chains the next sticky beside it.
+          if (e.key === 'Enter' && !e.shiftKey) {
             e.preventDefault();
             commit();
-            // FigJam v3 — ⌘Enter chains: commit this body, then ask the layer
-            // to spawn + edit the next sticky beside it.
-            document.dispatchEvent(
-              new CustomEvent('maude:chain-create', { detail: { id: sticky.id } })
-            );
+            if (e.metaKey || e.ctrlKey) {
+              document.dispatchEvent(
+                new CustomEvent('maude:chain-create', { detail: { id: sticky.id } })
+              );
+            }
           }
         }}
       >
@@ -3556,7 +4495,7 @@ function StickyEditor({
             doesn't flicker; stripped back to raw text on commit. */}
         {stickyBodyText(sticky)}
       </div>
-    </foreignObject>
+    </div>
   );
 }
 
@@ -3574,6 +4513,9 @@ function StandaloneTextEditor({
   underline,
   align,
   listType,
+  singleLine,
+  boxStyle,
+  caretPoint,
   onCommit,
   onCancel,
 }: {
@@ -3588,6 +4530,14 @@ function StandaloneTextEditor({
   underline?: boolean;
   align?: TextAlign;
   listType?: ListType;
+  /** The click that opened the editor — caret lands there (Phase 3). */
+  caretPoint?: { x: number; y: number } | null;
+  /** A one-line field (e.g. a section title rename) — plain Enter commits
+   * instead of inserting a newline, matching a native text-input's Enter. */
+  singleLine?: boolean;
+  /** Extra style merged onto the editable box — e.g. a section rename wants
+   * the same chip background/padding/radius the read-only label chip has. */
+  boxStyle?: CSSProperties;
   onCommit: (text: string, fmt?: EditorFmt) => void;
   onCancel: () => void;
 }) {
@@ -3617,22 +4567,8 @@ function StandaloneTextEditor({
     },
     [onCommit, listType, fmtRef]
   );
-  useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    el.focus();
-    try {
-      const r = document.createRange();
-      r.selectNodeContents(el);
-      const sel = window.getSelection();
-      if (sel) {
-        sel.removeAllRanges();
-        sel.addRange(r);
-      }
-    } catch {
-      /* selection API blocked */
-    }
-  }, []);
+  // Caret-at-click on entry + custom blinking caret + click re-placement.
+  const caretHandlers = useEditorCaret(ref, caretPoint);
   // Commit on outside click.
   useEffect(() => {
     if (typeof document === 'undefined') return;
@@ -3649,12 +4585,23 @@ function StandaloneTextEditor({
     return () => document.removeEventListener('pointerdown', onDown, true);
   }, [commitOnce]);
   return (
-    // Generous box so multi-line text isn't clipped while typing (item 4a). The
-    // empty area is transparent + pointer-pass-through (the SVG root is
-    // pointer-events:none), so outside-click still commits.
-    <foreignObject x={x} y={y} width={640} height={480}>
+    // Generous box so multi-line text isn't clipped while typing (item 4a).
+    // The host passes pointer events through (empty area is not the editor —
+    // outside-click must still commit); only the editable itself is
+    // interactive, so clicks in it place the caret.
+    <div
+      data-annot-editor="1"
+      style={{
+        position: 'absolute',
+        left: x,
+        top: y,
+        width: 640,
+        height: 480,
+        zIndex: 5,
+        pointerEvents: 'none',
+      }}
+    >
       <div
-        xmlns="http://www.w3.org/1999/xhtml"
         ref={ref}
         className="dc-annot-editor"
         contentEditable
@@ -3663,6 +4610,9 @@ function StandaloneTextEditor({
         style={{
           display: 'inline-block',
           minWidth: '8px',
+          // The pass-through host (above) is inert — re-enable events HERE so
+          // in-editor clicks place the caret instead of falling through.
+          pointerEvents: 'auto',
           // pre-wrap so Enter inserts a real newline (multi-line text), not a
           // commit; long lines also wrap within the box.
           whiteSpace: 'pre-wrap',
@@ -3676,8 +4626,12 @@ function StandaloneTextEditor({
           outline: 'none',
           background: 'transparent',
           cursor: 'text',
+          ...CARET_FIX_STYLE,
+          ...boxStyle,
         }}
         onBlur={() => commitOnce(ref.current?.innerText || '')}
+        onPointerDown={caretHandlers.onPointerDown}
+        onPointerUp={caretHandlers.onPointerUp}
         onKeyDown={(e) => {
           if (onFormatKey(e)) return; // Cmd/Ctrl+B/I/U
           if (e.key === 'Escape') {
@@ -3687,8 +4641,10 @@ function StandaloneTextEditor({
             onCancel();
             return;
           }
-          // Cmd/Ctrl+Enter commits; plain Enter inserts a newline (item 4a).
-          if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+          // Unified: plain Enter commits, Shift+Enter inserts a newline. A
+          // singleLine field (section rename) is a title — Shift+Enter commits
+          // too rather than adding a newline the one-line chip can't show.
+          if (e.key === 'Enter' && (!e.shiftKey || singleLine)) {
             e.preventDefault();
             commitOnce(ref.current?.innerText || '');
           }
@@ -3696,7 +4652,7 @@ function StandaloneTextEditor({
       >
         {listPrefixedBody(initialText, listType)}
       </div>
-    </foreignObject>
+    </div>
   );
 }
 
@@ -3798,6 +4754,7 @@ function AnnotationContextMenu({
   selCount,
   canUngroup,
   canReplace,
+  canEditPhoto,
   onAction,
   onClose,
 }: {
@@ -3806,6 +4763,8 @@ function AnnotationContextMenu({
   canUngroup: boolean;
   /** Stage F3 — exactly one ImageStroke/MediaRefStroke is selected. */
   canReplace: boolean;
+  /** feature-photo-editor (Task 17) — exactly one content-addressed ImageStroke. */
+  canEditPhoto: boolean;
   onAction: (action: string) => void;
   onClose: () => void;
 }) {
@@ -3873,6 +4832,7 @@ function AnnotationContextMenu({
       {item('paste', 'Paste', '⌘V')}
       {item('duplicate', 'Duplicate', '⌘D')}
       {canReplace ? item('replace', 'Replace…') : null}
+      {canEditPhoto ? item('edit-photo', 'Edit Photo…') : null}
       <div className="dc-menu-sep" aria-hidden="true" />
       {item('front', 'Bring to front', ']')}
       {item('forward', 'Bring forward', '⌘]')}
@@ -4004,6 +4964,16 @@ function AnnotGroupBbox({
   const h = yMax - yMin + pad * 2;
   const handle = 6;
   const inset = 3;
+  // Screen-constant hit target — bigger than the visible 6×6 square (matches
+  // the single-resize DOM handles' generous grab area) so the corner stays
+  // easy to grab at any zoom.
+  const hit = 16 / zoom;
+  const cursorFor: Record<string, string> = {
+    nw: 'nwse-resize',
+    se: 'nwse-resize',
+    ne: 'nesw-resize',
+    sw: 'nesw-resize',
+  };
   const handles = [
     { corner: 'nw', x: x - inset, y: y - inset },
     { corner: 'ne', x: x + w - handle + inset, y: y - inset },
@@ -4024,20 +4994,42 @@ function AnnotGroupBbox({
         vectorEffect="non-scaling-stroke"
         rx={2}
       />
-      {handles.map((c) => (
-        <rect
-          key={c.corner}
-          x={c.x}
-          y={c.y}
-          width={handle}
-          height={handle}
-          fill="var(--maude-hud-accent, #d63b1f)"
-          stroke="var(--maude-chrome-bg-0, #ffffff)"
-          strokeWidth={1}
-          vectorEffect="non-scaling-stroke"
-          rx={1}
-        />
-      ))}
+      {/* Phase 2 (whiteboard-improvements) — proportional group resize: these
+          corners used to be decorative (pointerEvents inherited 'none' from
+          the wrapping <g>). Each now sets its OWN pointerEvents, which SVG
+          lets a descendant override independent of an ancestor's value, and
+          carries `data-group-resize-corner` for the drag gesture registered
+          in AnnotationsLayer to identify which corner was grabbed. */}
+      {handles.map((c) => {
+        const cx = c.x + handle / 2;
+        const cy = c.y + handle / 2;
+        return (
+          <g key={c.corner}>
+            <rect
+              x={cx - hit / 2}
+              y={cy - hit / 2}
+              width={hit}
+              height={hit}
+              fill="transparent"
+              pointerEvents="all"
+              data-group-resize-corner={c.corner}
+              style={{ cursor: cursorFor[c.corner] }}
+            />
+            <rect
+              x={c.x}
+              y={c.y}
+              width={handle}
+              height={handle}
+              fill="var(--maude-hud-accent, #d63b1f)"
+              stroke="var(--maude-chrome-bg-0, #ffffff)"
+              strokeWidth={1}
+              vectorEffect="non-scaling-stroke"
+              rx={1}
+              pointerEvents="none"
+            />
+          </g>
+        );
+      })}
     </g>
   );
 }
@@ -4166,6 +5158,106 @@ function GhostPreview({ ghost }: { ghost: GhostDescriptor }) {
  * Pointer events pass through the group, so hit-testing + the ctx-toolbar's
  * getBoundingClientRect positioning keep working on the rotated form.
  */
+/** Section title chip — deliberately screen-size-constant. The body/border
+ * scale with the world like everything else, but a title that shrinks to
+ * unreadable at zoom-out defeats the point of a label (matches the `r={5/zoom}`
+ * counter-scale convention used for halos/connector-dots elsewhere in this file). */
+function SectionLabelChip({
+  stroke,
+  x,
+  y,
+  hitMode,
+}: {
+  stroke: SectionStroke;
+  x: number;
+  y: number;
+  hitMode: 'visiblePainted' | 'none';
+}) {
+  const controller = useViewportControllerContext();
+  const zoom = controller?.viewport?.zoom || 1;
+  const fontSize = SECTION_LABEL_FONT / zoom;
+  const chipH = SECTION_LABEL_H / zoom;
+  const gap = 4 / zoom;
+  const padX = 9 / zoom;
+  const chipW = Math.max(56 / zoom, stroke.label.length * fontSize * 0.62 + 18 / zoom);
+  // NOTE: this chip geometry (chipW/chipH/gap vs the region's y) is mirrored
+  // by findTextStrokeAt's section branch — the Text tool's click-through
+  // renames a section only from its label chip. Keep the two in sync.
+  return (
+    <g pointerEvents={hitMode}>
+      <rect
+        x={x}
+        y={y - chipH - gap}
+        width={chipW}
+        height={chipH}
+        rx={5 / zoom}
+        ry={5 / zoom}
+        fill={stroke.color}
+        fillOpacity={0.16}
+      />
+      <text
+        x={x + padX}
+        y={y - chipH / 2 - gap}
+        dominantBaseline="middle"
+        fontSize={fontSize}
+        fill={stroke.color}
+        style={{
+          fontFamily: 'var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace)',
+        }}
+      >
+        {stroke.label}
+      </text>
+    </g>
+  );
+}
+
+/** Section title RENAME field — same chip visuals + zoom-invariant sizing as
+ * SectionLabelChip (read state), so switching into edit mode doesn't swap
+ * the pill for a bare, ambient-zoomed sliver of text (it used to: the editor
+ * had no background and its font-size wasn't counter-scaled, so at any zoom
+ * below 1× the chip effectively vanished mid-rename). */
+function SectionTitleEditor({
+  section,
+  caretPoint,
+  onCommit,
+  onCancel,
+}: {
+  section: SectionStroke;
+  caretPoint?: { x: number; y: number } | null;
+  onCommit: (text: string, fmt?: EditorFmt) => void;
+  onCancel: () => void;
+}) {
+  const controller = useViewportControllerContext();
+  const zoom = controller?.viewport?.zoom || 1;
+  const fontSize = SECTION_LABEL_FONT / zoom;
+  const chipH = SECTION_LABEL_H / zoom;
+  const gap = 4 / zoom;
+  const padX = 9 / zoom;
+  const x = Math.min(section.x, section.x + section.w);
+  const y = Math.min(section.y, section.y + section.h);
+  return (
+    <StandaloneTextEditor
+      x={x}
+      y={y - chipH - gap}
+      fontSize={fontSize}
+      color={section.color}
+      initialText={section.label}
+      caretPoint={caretPoint}
+      singleLine
+      boxStyle={{
+        background: `color-mix(in oklab, ${section.color} 16%, transparent)`,
+        borderRadius: `${5 / zoom}px`,
+        padding: `0 ${padX}px`,
+        minHeight: `${chipH}px`,
+        lineHeight: `${chipH}px`,
+        whiteSpace: 'nowrap',
+      }}
+      onCommit={onCommit}
+      onCancel={onCancel}
+    />
+  );
+}
+
 function StrokeNode(props: {
   stroke: Stroke;
   anchorsById: Map<string, AnchorHost>;
@@ -4194,7 +5286,8 @@ function StrokeNodeBase({
   stroke: Stroke;
   anchorsById: Map<string, AnchorHost>;
   interactive: boolean;
-  /** Phase 21 — sticky-only: hide the read-only body while its editor is up. */
+  /** Hide the read-only body/text while its editor is up (sticky, section, or
+   *  anchored shape text — whichever this stroke is). */
   editing?: boolean;
 }) {
   // In Move mode, individual stroke nodes claim pointer events so we can
@@ -4217,6 +5310,11 @@ function StrokeNodeBase({
       const host = anchorsById.get(stroke.anchorId);
       const bbox = host ? strokeBBox(host) : null;
       if (!bbox) return null;
+      // Its editor (TextEditor) paints the same bbox while active — skip the
+      // read-only <text> so the two don't double-paint (Phase 1 jump-fix
+      // companion: the editor was already exempt via editingStickyId's
+      // sibling, this stroke type never was).
+      if (editing) return null;
       const cy = bbox.y + bbox.h / 2;
       const align = stroke.align ?? 'center';
       const pad = 8;
@@ -4245,6 +5343,9 @@ function StrokeNodeBase({
         </text>
       );
     }
+    // Its editor (StandaloneTextEditor) paints at the same x/y while active —
+    // skip the read-only <text> so the two don't double-paint (the "ghost").
+    if (editing) return null;
     const align = stroke.align ?? 'left';
     const anchor = align === 'left' ? 'start' : align === 'right' ? 'end' : 'middle';
     const tx = stroke.x ?? 0;
@@ -4297,6 +5398,54 @@ function StrokeNodeBase({
             </div>
           </foreignObject>
         )}
+        {/* Phase 3 (whiteboard-improvements) — author badge, bottom-right
+            corner. A name label (not an avatar — a full name/nickname reads
+            faster than initials and doesn't need a legend to decode). Color
+            re-derives from the (sanitized) name via colorForName — NEVER a
+            stored/wire color — so it matches the author's live presence hue
+            (cursor/avatar use the same function). foreignObject width is a
+            fixed generous box right-anchored via flex, since a name's pixel
+            width isn't known without measuring the DOM. */}
+        {stroke.authorName && (
+          <foreignObject
+            x={x + w - 160}
+            y={y + h - 20}
+            width={160}
+            height={20}
+            pointerEvents="none"
+          >
+            <div
+              xmlns="http://www.w3.org/1999/xhtml"
+              style={{
+                display: 'flex',
+                justifyContent: 'flex-end',
+                alignItems: 'center',
+                height: '100%',
+                paddingRight: 4,
+              }}
+            >
+              <span
+                title={stroke.authorName}
+                style={{
+                  maxWidth: '100%',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                  fontSize: 9,
+                  fontWeight: 600,
+                  fontFamily: 'var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace)',
+                  color: colorForName(stroke.authorName),
+                  background: 'rgba(255,255,255,0.78)',
+                  padding: '1px 5px',
+                  borderRadius: 8,
+                  lineHeight: 1.4,
+                }}
+              >
+                {stroke.authorName}
+              </span>
+            </div>
+          </foreignObject>
+        )}
       </g>
     );
   }
@@ -4482,7 +5631,6 @@ function StrokeNodeBase({
     const y = Math.min(stroke.y, stroke.y + stroke.h);
     const w = Math.abs(stroke.w);
     const h = Math.abs(stroke.h);
-    const chipW = Math.max(56, stroke.label.length * SECTION_LABEL_FONT * 0.62 + 18);
     return (
       <g data-id={stroke.id} data-tool="section">
         {/* Region body — pure backdrop, CLICK-THROUGH (FigJam: content on a
@@ -4518,31 +5666,10 @@ function StrokeNodeBase({
             pointerEvents="stroke"
           />
         ) : null}
-        {/* Label chip above the top-left corner — also a grab handle. */}
-        <g pointerEvents={hitMode}>
-          <rect
-            x={x}
-            y={y - SECTION_LABEL_H - 4}
-            width={chipW}
-            height={SECTION_LABEL_H}
-            rx={5}
-            ry={5}
-            fill={stroke.color}
-            fillOpacity={0.16}
-          />
-          <text
-            x={x + 9}
-            y={y - SECTION_LABEL_H / 2 - 4}
-            dominantBaseline="middle"
-            fontSize={SECTION_LABEL_FONT}
-            fill={stroke.color}
-            style={{
-              fontFamily: 'var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace)',
-            }}
-          >
-            {stroke.label}
-          </text>
-        </g>
+        {/* Label chip above the top-left corner — also a grab handle. Hidden
+            while the rename editor (StandaloneTextEditor) is up at the same
+            spot, else the old label reads through behind the new text. */}
+        {editing ? null : <SectionLabelChip stroke={stroke} x={x} y={y} hitMode={hitMode} />}
       </g>
     );
   }