@1agh/maude 0.19.1 → 0.21.0

package/plugins/design/dev-server/annotations-layer.tsx

@@ -35,11 +35,15 @@ import { createPortal } from 'react-dom';
 
 import { AnnotationContextToolbar } from './annotations-context-toolbar.tsx';
 import { useViewportControllerContext, useWorldRefContext } from './canvas-lib.tsx';
+import { buildAnnotationStrokesRecord } from './commands/annotation-strokes-command.ts';
+import { crossedDragThreshold } from './input-router.tsx';
 import { AnnotationResizeOverlay } from './use-annotation-resize.tsx';
 import { useAnnotationSelectionOptional } from './use-annotation-selection.tsx';
 import { useAnnotationsVisibility } from './use-annotations-visibility.tsx';
+import { useCollab } from './use-collab.tsx';
 import { useSelectionSetOptional } from './use-selection-set.tsx';
 import { useToolMode } from './use-tool-mode.tsx';
+import { useUndoSinks, useUndoStackOptional } from './use-undo-stack.tsx';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Types
@@ -115,7 +119,7 @@ const FILL_PALETTE = [
   '#f4f1ee', // paper
 ] as const;
 
-const STROKE_WIDTH_THIN = 2;
+const STROKE_WIDTH_THIN = 3;
 const STROKE_WIDTH_THICK = 6;
 type Thickness = typeof STROKE_WIDTH_THIN | typeof STROKE_WIDTH_THICK;
 
@@ -480,11 +484,11 @@ const ANNOT_CSS = `
   appearance: none;
 }
 .dc-annot-chrome .dc-annot-sw[aria-pressed="true"] {
-  box-shadow: 0 0 0 2px var(--accent, #d63b1f);
+  box-shadow: 0 0 0 2px var(--maude-hud-accent, #d63b1f);
   border-color: transparent;
 }
 .dc-annot-chrome .dc-annot-sw:focus-visible {
-  outline: 2px solid var(--accent, #d63b1f);
+  outline: 2px solid var(--maude-hud-accent, #d63b1f);
   outline-offset: 2px;
 }
 .dc-annot-chrome .dc-annot-sep {
@@ -513,7 +517,7 @@ const ANNOT_CSS = `
     linear-gradient(135deg, transparent 47%, #d63b1f 47%, #d63b1f 53%, transparent 53%);
 }
 .dc-annot-chrome .dc-annot-fill[aria-pressed="true"] {
-  box-shadow: 0 0 0 2px var(--accent, #d63b1f);
+  box-shadow: 0 0 0 2px var(--maude-hud-accent, #d63b1f);
   border-color: transparent;
 }
 .dc-annot-chrome .dc-annot-btn {
@@ -529,13 +533,13 @@ const ANNOT_CSS = `
   text-transform: uppercase;
 }
 .dc-annot-chrome .dc-annot-btn[aria-pressed="true"] {
-  background: var(--accent, #d63b1f);
-  color: var(--accent-fg, #fff);
+  background: var(--maude-hud-accent, #d63b1f);
+  color: var(--maude-hud-accent-fg, #fff);
   border-color: transparent;
 }
 .dc-annot-chrome .dc-annot-btn:hover { background: rgba(0,0,0,0.04); }
 .dc-annot-chrome .dc-annot-btn:focus-visible {
-  outline: 2px solid var(--accent, #d63b1f);
+  outline: 2px solid var(--maude-hud-accent, #d63b1f);
   outline-offset: 2px;
 }
 .dc-annot-input {
@@ -564,8 +568,8 @@ const ANNOT_CSS = `
 /* Drag-select marquee — rendered while user is dragging to select strokes. */
 .dc-annot-marquee {
   pointer-events: none;
-  fill: color-mix(in oklab, var(--accent, #d63b1f) 8%, transparent);
-  stroke: var(--accent, #d63b1f);
+  fill: color-mix(in oklab, var(--maude-hud-accent, #d63b1f) 8%, transparent);
+  stroke: var(--maude-hud-accent, #d63b1f);
   stroke-width: 1;
   stroke-dasharray: 4 3;
 }
@@ -609,6 +613,23 @@ function translateOne(s: Stroke, dx: number, dy: number): Stroke {
   return s; // text inherits its host's bbox
 }
 
+/**
+ * Reference-equal stroke comparison — true when the two arrays carry the same
+ * stroke object references in the same order. Used by the annotation drag
+ * onPointerUp to skip pushing an undo record when the gesture didn't actually
+ * move anything (zero movement OR snapshot mapped through a no-op translate
+ * back to the original references — `translateOne` short-circuits when dx=dy=0
+ * because new objects are still created, so we compare references defensively).
+ */
+export function strokesShallowEqual(a: readonly Stroke[], b: readonly Stroke[]): boolean {
+  if (a === b) return true;
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) return false;
+  }
+  return true;
+}
+
 // Annotations visibility now lives in use-annotations-visibility.tsx so the
 // ToolPalette (a sibling under CanvasRouter, not a descendant of this layer)
 // can read the same state. Re-exported here for back-compat.
@@ -650,6 +671,13 @@ export function AnnotationsLayer() {
   const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const drawingRef = useRef<Stroke | null>(null);
   drawingRef.current = drawing;
+  /**
+   * Phase 20 — latest strokes mirror so command builders can read the
+   * pre-mutation snapshot synchronously (React state isn't refreshed
+   * between rapid taps in the same tick).
+   */
+  const strokesRef = useRef<Stroke[]>(strokes);
+  strokesRef.current = strokes;
 
   const isDraw = tool === 'pen' || tool === 'rect' || tool === 'arrow' || tool === 'ellipse';
   const isErase = tool === 'eraser';
@@ -662,6 +690,10 @@ export function AnnotationsLayer() {
   const supportsFill = tool === 'rect' || tool === 'ellipse';
 
   // 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>('');
   useEffect(() => {
     const file = deriveFile();
     fileRef.current = file;
@@ -674,7 +706,10 @@ export function AnnotationsLayer() {
       .then((text) => {
         if (cancelled) return;
         const loaded = svgToStrokes(text);
-        if (loaded.length) setStrokesState(loaded);
+        if (loaded.length) {
+          setStrokesState(loaded);
+          lastAppliedSvgRef.current = text;
+        }
       })
       .catch(() => {
         /* network blip — start with an empty annotation set */
@@ -684,56 +719,132 @@ export function AnnotationsLayer() {
     };
   }, []);
 
-  const scheduleSave = useCallback((next: readonly Stroke[]) => {
+  // 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.
+  const collab = useCollab();
+  useEffect(() => {
+    if (!collab) return;
+    const map = collab.doc.getMap<string>('annotations');
+    const apply = () => {
+      const svg = map.get('svg');
+      if (typeof svg !== 'string' || !svg) return;
+      if (svg === lastAppliedSvgRef.current) return;
+      lastAppliedSvgRef.current = svg;
+      setStrokesState(svgToStrokes(svg));
+    };
+    apply();
+    map.observe(apply);
+    return () => {
+      try {
+        map.unobserve(apply);
+      } catch {
+        /* doc destroyed before unmount */
+      }
+    };
+  }, [collab]);
+
+  const undoStack = useUndoStackOptional();
+  const undoSinks = useUndoSinks();
+  const undoStackRef = useRef(undoStack);
+  undoStackRef.current = undoStack;
+
+  /**
+   * Apply a `Stroke[]` snapshot: update local React state AND fire-and-forget
+   * PUT to the server. Used as the `putFn` injected into the
+   * `AnnotationStrokesCommand` — both the initial push AND every undo/redo
+   * replay route through here, so the iframe's `strokes` state always
+   * tracks the server. (Without the setStrokesState here, Cmd+Z would
+   * silently PUT the prior SVG but the canvas would keep painting the
+   * post-edit strokes until the user reloaded.)
+   *
+   * The 200 ms scheduled-save debounce (legacy path) is cleared the moment
+   * 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;
-    if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
-    saveTimerRef.current = setTimeout(() => {
-      saveTimerRef.current = null;
-      const svg = strokesToSvg(next);
-      void fetch('/_api/annotations', {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ file, svg }),
-      }).catch(() => {
-        /* swallow — the user will see uncommitted state until the next stroke */
+    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 */
       });
-    }, 200);
   }, []);
 
+  // Register the strokes put sink with the undo provider so the rebuilt
+  // AnnotationStrokesCommand (after a canvas switch + return) routes through
+  // THIS iframe's React state, not the gone iframe's stale closures.
+  useEffect(() => {
+    undoSinks.setSink('strokesPutFn', putStrokes);
+    return () => undoSinks.setSink('strokesPutFn', undefined);
+  }, [undoSinks, putStrokes]);
+
+  /**
+   * Single entry point for every stroke mutation. Builds an undo record
+   * and pushes onto the stack — `push()` rebuilds the command via the
+   * registered `strokesPutFn` sink and calls `cmd.do() = putStrokes(next)`,
+   * which both updates local state and PUTs. Cancels any pending debounced
+   * save first — DDR-050 gotcha: a queued auto-save flushing AFTER our PUT
+   * would race the stack into a stale state.
+   */
+  const commitStrokes = useCallback(
+    (prev: readonly Stroke[], next: readonly Stroke[], label?: string) => {
+      if (saveTimerRef.current) {
+        clearTimeout(saveTimerRef.current);
+        saveTimerRef.current = null;
+      }
+      const record = buildAnnotationStrokesRecord({
+        before: prev,
+        after: next,
+        ...(label ? { label } : {}),
+      });
+      void undoStackRef.current.push(record);
+    },
+    []
+  );
+
   const setStrokes = useCallback(
     (next: Stroke[]) => {
-      setStrokesState(next);
-      scheduleSave(next);
+      const prev = strokesRef.current;
+      commitStrokes(prev, next);
     },
-    [scheduleSave]
+    [commitStrokes]
   );
 
   const strokesStore = useMemo<StrokesStoreValue>(() => {
     const updateStroke = (id: string, patch: Partial<Stroke>): void => {
-      setStrokesState((prev) => {
-        const next = prev.map((s) => (s.id === id ? ({ ...s, ...patch } as Stroke) : s));
-        scheduleSave(next);
-        return next;
-      });
+      const prev = strokesRef.current;
+      const next = prev.map((s) => (s.id === id ? ({ ...s, ...patch } as Stroke) : s));
+      commitStrokes(prev, next);
     };
     const deleteStrokes = (ids: string[]): void => {
       const set = new Set(ids);
-      setStrokesState((prev) => {
-        const next = prev.filter(
-          (s) => !set.has(s.id) && !(s.tool === 'text' && set.has(s.anchorId))
-        );
-        scheduleSave(next);
-        return next;
-      });
+      const prev = strokesRef.current;
+      const next = prev.filter(
+        (s) => !set.has(s.id) && !(s.tool === 'text' && set.has(s.anchorId))
+      );
+      if (next.length === prev.length) return;
+      commitStrokes(prev, next);
     };
     const translateStrokes = (ids: string[], dx: number, dy: number): void => {
       const set = new Set(ids);
-      setStrokesState((prev) => {
-        const next = prev.map((s) => (set.has(s.id) ? translateOne(s, dx, dy) : s));
-        scheduleSave(next);
-        return next;
-      });
+      const prev = strokesRef.current;
+      const next = prev.map((s) => (set.has(s.id) ? translateOne(s, dx, dy) : s));
+      commitStrokes(prev, next, `move ${ids.length} stroke${ids.length === 1 ? '' : 's'}`);
     };
     return {
       strokes,
@@ -742,7 +853,7 @@ export function AnnotationsLayer() {
       deleteStrokes,
       translateStrokes,
     };
-  }, [strokes, setStrokes, scheduleSave]);
+  }, [strokes, setStrokes, commitStrokes]);
 
   // Menubar bridge (Phase 5.1 Task 10) — listen for postMessages from the
   // dev-server shell. `selection-clear` + `tool-set` live in canvas-shell
@@ -794,23 +905,21 @@ export function AnnotationsLayer() {
     (wx: number, wy: number) => {
       const zoom = vp?.zoom || 1;
       const tol = 8 / zoom;
-      setStrokesState((prev) => {
-        for (let i = prev.length - 1; i >= 0; i--) {
-          const candidate = prev[i];
-          if (candidate && strokeHitTest(candidate, wx, wy, tol)) {
-            const removedId = candidate.id;
-            const next = prev
-              .slice(0, i)
-              .concat(prev.slice(i + 1))
-              .filter((s) => !(s.tool === 'text' && s.anchorId === removedId));
-            scheduleSave(next);
-            return next;
-          }
+      const prev = strokesRef.current;
+      for (let i = prev.length - 1; i >= 0; i--) {
+        const candidate = prev[i];
+        if (candidate && strokeHitTest(candidate, wx, wy, tol)) {
+          const removedId = candidate.id;
+          const next = prev
+            .slice(0, i)
+            .concat(prev.slice(i + 1))
+            .filter((s) => !(s.tool === 'text' && s.anchorId === removedId));
+          commitStrokes(prev, next, 'erase 1 stroke');
+          return;
         }
-        return prev;
-      });
+      }
     },
-    [vp, scheduleSave]
+    [vp, commitStrokes]
   );
 
   const beginStroke = useCallback(
@@ -935,11 +1044,9 @@ export function AnnotationsLayer() {
     if (final && !isStrokeMeaningful(final)) final = null;
     if (final) {
       const committed = final;
-      setStrokesState((prev) => {
-        const next = [...prev, committed];
-        scheduleSave(next);
-        return next;
-      });
+      const prev = strokesRef.current;
+      const next = [...prev, committed];
+      commitStrokes(prev, next, `draw ${committed.tool}`);
       // T18 — auto-select the freshly drawn shape so the user can immediately
       // see + adjust it. annotSel is optional (some test harnesses mount
       // AnnotationsLayer without the provider), so guard the call.
@@ -955,7 +1062,7 @@ export function AnnotationsLayer() {
       if (!stickyOnThis) setTool('move');
     }
     setDrawing(null);
-  }, [isActive, isErase, visible, scheduleSave, annotSel, setTool, sticky]);
+  }, [isActive, isErase, visible, commitStrokes, annotSel, setTool, sticky]);
 
   // T21 — abort a mid-stroke draw without committing. Dispatched by the
   // canvas-shell Esc handler (`maude:cancel-stroke`). Safe to call when
@@ -1000,11 +1107,19 @@ export function AnnotationsLayer() {
   //   - Cmd / Cmd+Shift falls through to element-selection (we bail).
   // Once a stroke is selected, clicking inside its bbox starts a drag.
 
+  /**
+   * Annotation drag state. Snapshot of strokes captured at pointerdown so the
+   * whole gesture (pointermove × N → pointerup) commits as ONE undo record at
+   * release time. Without the snapshot, each pointermove tick became its own
+   * `translateStrokes` call and each call became its own undo record — Cmd+Z
+   * had to be pressed dozens of times to walk back a single drag.
+   */
   const dragStateRef = useRef<{
     pointerId: number;
     startWX: number;
     startWY: number;
     movedIds: string[];
+    snapshot: Stroke[];
   } | null>(null);
 
   // Drag-select marquee state. World-coord rectangle (anchor + cursor); the
@@ -1016,6 +1131,7 @@ export function AnnotationsLayer() {
     by: number;
   } | null>(null);
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: commitStrokes/strokesStore are stable refs from parent context; manual dep list reflects effect-trigger semantics, not internal callbacks
   useEffect(() => {
     if (typeof document === 'undefined') return;
     if (tool !== 'move') return;
@@ -1039,7 +1155,7 @@ export function AnnotationsLayer() {
     // 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-ctx, .dc-tool-palette, .dc-annot-chrome, .dc-mm, .dc-context-menu, .dc-tp-popover';
+      '.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';
 
     const onDown = (e: PointerEvent) => {
       if (e.button !== 0) return;
@@ -1047,6 +1163,11 @@ export function AnnotationsLayer() {
       const target = e.target as Element | null;
       if (target?.closest?.(CHROME_SELECTOR)) return; // chrome owns its clicks
       const strokeId = findStrokeId(target);
+      // When pointerdown lands inside an artboard but not on a stroke, the
+      // gesture belongs to artboard-drag / element-marquee — not the
+      // annotation marquee. Bailing here keeps the annotation marquee from
+      // racing the artboard drag (post-Wave-3 user grievance G5).
+      if (!strokeId && target?.closest?.('[data-dc-screen]')) return;
       const [wx, wy] = screenToWorld(e.clientX, e.clientY);
       const startClientX = e.clientX;
       const startClientY = e.clientY;
@@ -1068,29 +1189,51 @@ export function AnnotationsLayer() {
           annotSel.replace(strokeId);
           ids = [strokeId];
         }
+        // Capture a snapshot of all strokes at drag start. Every pointermove
+        // re-translates FROM the snapshot using the cumulative cursor delta
+        // (NOT a delta-from-last-frame mutation), so dragging back to origin
+        // restores positions exactly. Optimistic state-only updates during
+        // the move; ONE undo record + ONE server PUT fires on pointerup.
+        const dragSnapshot = strokesRef.current.slice();
         dragStateRef.current = {
           pointerId: e.pointerId,
           startWX: wx,
           startWY: wy,
           movedIds: ids,
+          snapshot: dragSnapshot,
         };
+        const movedSet = new Set(ids);
         const onMove = (mv: PointerEvent) => {
           const st = dragStateRef.current;
           if (!st || mv.pointerId !== st.pointerId) return;
           const [cwx, cwy] = screenToWorld(mv.clientX, mv.clientY);
           const dx = cwx - st.startWX;
           const dy = cwy - st.startWY;
-          if (dx === 0 && dy === 0) return;
-          strokesStore.translateStrokes(st.movedIds, dx, dy);
-          st.startWX = cwx;
-          st.startWY = cwy;
+          // Drag-back-to-origin: restore exact references so the pointerup
+          // shallow-equality check skips committing a no-op record.
+          const next =
+            dx === 0 && dy === 0
+              ? st.snapshot
+              : st.snapshot.map((s) => (movedSet.has(s.id) ? translateOne(s, dx, dy) : s));
+          // Local React state only. No commitStrokes — no PUT, no undo push.
+          setStrokesState(next);
         };
         const onUp = (up: PointerEvent) => {
-          if (up.pointerId !== dragStateRef.current?.pointerId) return;
+          const st = dragStateRef.current;
+          if (!st || up.pointerId !== st.pointerId) return;
           dragStateRef.current = null;
           document.removeEventListener('pointermove', onMove, true);
           document.removeEventListener('pointerup', onUp, true);
           document.removeEventListener('pointercancel', onUp, true);
+          // Commit the gesture as ONE record. Skip on zero-movement
+          // (click without drag past threshold or drag back to origin).
+          const final = strokesRef.current;
+          if (strokesShallowEqual(st.snapshot, final)) return;
+          commitStrokes(
+            st.snapshot,
+            final,
+            `move ${st.movedIds.length} stroke${st.movedIds.length === 1 ? '' : 's'}`
+          );
         };
         document.addEventListener('pointermove', onMove, true);
         document.addEventListener('pointerup', onUp, true);
@@ -1099,13 +1242,14 @@ export function AnnotationsLayer() {
       }
 
       // Empty world — start a drag-select gesture. A bare click without
-      // moving is a no-op (post-Wave-2 feedback: click-on-empty-space
-      // does NOT clear selection; Esc is the canonical deselect).
+      // moving clears annotation selection (post-Wave-3 feedback: click-to-
+      // deselect is back; Esc also still works).
       const addToSelection = e.shiftKey;
       let moved = false;
       const onMove = (mv: PointerEvent) => {
-        const distSq = (mv.clientX - startClientX) ** 2 + (mv.clientY - startClientY) ** 2;
-        if (!moved && distSq < 16) return; // 4 px threshold
+        if (!moved && !crossedDragThreshold(startClientX, startClientY, mv.clientX, mv.clientY)) {
+          return;
+        }
         moved = true;
         const [cwx, cwy] = screenToWorld(mv.clientX, mv.clientY);
         setMarquee({ ax: wx, ay: wy, bx: cwx, by: cwy });
@@ -1115,8 +1259,10 @@ export function AnnotationsLayer() {
         document.removeEventListener('pointerup', onUp, true);
         document.removeEventListener('pointercancel', onUp, true);
         if (!moved) {
-          // Click without movement on empty world → no-op. Selection
-          // survives accidental misses; Esc is how the user deselects.
+          // Click without movement on empty world → clear annotation
+          // selection (post-Wave-3 user feedback). Shift-click preserves
+          // existing selection for additive-mode workflows.
+          if (!addToSelection) annotSel.clear();
           return;
         }
         const final = marqueeRef.current;
@@ -1178,33 +1324,36 @@ export function AnnotationsLayer() {
   const commitText = useCallback(
     (anchorId: string, text: string) => {
       const trimmed = text.trim();
-      setStrokesState((prev) => {
-        const existing = prev.find((s) => s.tool === 'text' && s.anchorId === anchorId) as
-          | TextStroke
-          | undefined;
-        let next: Stroke[];
-        if (trimmed.length === 0) {
-          next = existing ? prev.filter((s) => s.id !== existing.id) : prev;
-        } else if (existing) {
-          next = prev.map((s) => (s.id === existing.id ? { ...existing, text: trimmed } : s));
-        } else {
-          next = [
-            ...prev,
-            {
-              id: rid(),
-              tool: 'text',
-              color: '#1a1a1a',
-              fontSize: DEFAULT_FONT_SIZE,
-              text: trimmed,
-              anchorId,
-            } as TextStroke,
-          ];
-        }
-        scheduleSave(next);
-        return next;
-      });
+      const prev = strokesRef.current;
+      const existing = prev.find((s) => s.tool === 'text' && s.anchorId === anchorId) as
+        | TextStroke
+        | undefined;
+      let next: Stroke[];
+      let label = 'edit text';
+      if (trimmed.length === 0) {
+        if (!existing) return; // nothing to do
+        next = prev.filter((s) => s.id !== existing.id);
+        label = 'delete text';
+      } else if (existing) {
+        if (existing.text === trimmed) return; // identity edit
+        next = prev.map((s) => (s.id === existing.id ? { ...existing, text: trimmed } : s));
+      } else {
+        next = [
+          ...prev,
+          {
+            id: rid(),
+            tool: 'text',
+            color: '#1a1a1a',
+            fontSize: DEFAULT_FONT_SIZE,
+            text: trimmed,
+            anchorId,
+          } as TextStroke,
+        ];
+        label = 'add text';
+      }
+      commitStrokes(prev, next, label);
     },
-    [scheduleSave]
+    [commitStrokes]
   );
 
   // Keyboard: arrow nudge + Backspace/Delete remove selected strokes.
@@ -1574,7 +1723,7 @@ function SelectionHalo({
       width={bbox.w + pad * 2}
       height={bbox.h + pad * 2}
       fill="none"
-      stroke="var(--accent, #d63b1f)"
+      stroke="var(--maude-hud-accent, #d63b1f)"
       strokeWidth={multi ? 1.5 : 2}
       vectorEffect="non-scaling-stroke"
       pointerEvents="none"
@@ -1629,7 +1778,7 @@ function AnnotGroupBbox({
         width={w}
         height={h}
         fill="none"
-        stroke="var(--accent, #d63b1f)"
+        stroke="var(--maude-hud-accent, #d63b1f)"
         strokeWidth={1}
         strokeDasharray="4 3"
         vectorEffect="non-scaling-stroke"
@@ -1642,7 +1791,7 @@ function AnnotGroupBbox({
           y={c.y}
           width={handle}
           height={handle}
-          fill="var(--accent, #d63b1f)"
+          fill="var(--maude-hud-accent, #d63b1f)"
           stroke="var(--bg-0, #ffffff)"
           strokeWidth={1}
           vectorEffect="non-scaling-stroke"
@@ -1816,7 +1965,7 @@ function AnnotationsChrome({
             type="button"
             className="dc-annot-btn"
             aria-pressed={thickness === STROKE_WIDTH_THIN}
-            title="Thin (2px)"
+            title="Thin (3px)"
             onClick={() => setThickness(STROKE_WIDTH_THIN)}
           >
             Thin

package/plugins/design/dev-server/api.ts

@@ -140,6 +140,12 @@ export interface Api {
   commentsDelete(id: string): Promise<boolean>;
   commentsAddReply(id: string, payload: { body: string; author?: string }): Promise<Comment | null>;
   gitCommitters(): Promise<GitCommitter[]>;
+  /**
+   * Phase 8 — local `git config user.name`, cached for the process lifetime.
+   * Used by the collab client to derive a stable color hash per peer.
+   * Empty string when git is unset; the client falls back to `anonymous-<pid>`.
+   */
+  gitCurrentUser(): Promise<string>;
   parseMentions(text: string): string[];
   // Canvas state
   loadCanvasState(file: string): Promise<Record<string, unknown> | null>;
@@ -161,7 +167,15 @@ export interface Api {
   appendExportHistory(entry: ExportHistoryEntry): Promise<void>;
 }
 
-export function createApi(ctx: Context, onCommentsChanged: (file: string) => void): Api {
+export interface ApiHooks {
+  onCommentsChanged: (file: string) => void;
+  /** Phase 8 Task 5 — fires after a successful PUT /_api/annotations write. */
+  onAnnotationsChanged?: (file: string, svg: string) => void;
+}
+
+export function createApi(ctx: Context, hooks: ApiHooks): Api {
+  const onCommentsChanged = hooks.onCommentsChanged;
+  const onAnnotationsChanged = hooks.onAnnotationsChanged;
   const { paths, cfg } = ctx;
 
   function fileSlug(file: string): string {
@@ -576,6 +590,7 @@ export function createApi(ctx: Context, onCommentsChanged: (file: string) => voi
     // content fully, so we don't try to sanitize beyond a tag check.
     if (!/^\s*<svg[\s>]/i.test(svg)) return false;
     await Bun.write(annotationsPath(file), svg);
+    onAnnotationsChanged?.(file, svg);
     return true;
   }
 
@@ -936,6 +951,7 @@ export function createApi(ctx: Context, onCommentsChanged: (file: string) => voi
     commentsDelete,
     commentsAddReply,
     gitCommitters,
+    gitCurrentUser,
     parseMentions,
     loadCanvasState,
     saveCanvasState,