@1agh/maude 0.42.0 → 0.43.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,7 +158,15 @@ 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 { 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 {
@@ -168,7 +178,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';
@@ -399,6 +409,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 +647,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 +725,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 +750,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 +912,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);
@@ -1068,6 +1229,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,6 +1263,39 @@ 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]);
       }
     };
     window.addEventListener('message', onMessage);
@@ -1387,6 +1582,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 +1596,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 +1612,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 +1812,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 +1940,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 +2011,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 +2292,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 +2421,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 +2577,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 +2597,7 @@ export function AnnotationsLayer() {
   const cancelEditing = useCallback(() => {
     setEditingId(null);
     setPendingText(null);
+    setEditCaretPoint(null);
   }, []);
 
   /**
@@ -2780,6 +3167,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 +3199,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 +3264,7 @@ export function AnnotationsLayer() {
           addTextHintId={editingTarget ? null : addTextHintId}
           ghost={ghostPreview}
           editingTarget={editingTarget}
+          editCaretPoint={editCaretPoint}
           inkColor={color}
           onCommitEdit={commitEditing}
           onCancelEdit={cancelEditing}
@@ -2863,6 +3294,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 +3424,7 @@ function AnnotationsSvg({
   addTextHintId,
   ghost,
   editingTarget,
+  editCaretPoint,
   inkColor,
   onCommitEdit,
   onCancelEdit,
@@ -3020,6 +3457,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 +3475,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 +3715,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 +3731,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 +3830,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 +3935,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 +3959,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 +3973,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 +4015,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 +4026,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 +4093,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 +4128,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 +4145,7 @@ function StickyEditor({
             doesn't flicker; stripped back to raw text on commit. */}
         {stickyBodyText(sticky)}
       </div>
-    </foreignObject>
+    </div>
   );
 }
 
@@ -3574,6 +4163,9 @@ function StandaloneTextEditor({
   underline,
   align,
   listType,
+  singleLine,
+  boxStyle,
+  caretPoint,
   onCommit,
   onCancel,
 }: {
@@ -3588,6 +4180,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 +4217,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 +4235,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 +4260,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 +4276,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 +4291,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 +4302,7 @@ function StandaloneTextEditor({
       >
         {listPrefixedBody(initialText, listType)}
       </div>
-    </foreignObject>
+    </div>
   );
 }
 
@@ -3798,6 +4404,7 @@ function AnnotationContextMenu({
   selCount,
   canUngroup,
   canReplace,
+  canEditPhoto,
   onAction,
   onClose,
 }: {
@@ -3806,6 +4413,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 +4482,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 +4614,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 +4644,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 +4808,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 +4936,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 +4960,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 +4993,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 +5048,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 +5281,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 +5316,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>
     );
   }