@1agh/maude 0.19.1 → 0.20.0

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

@@ -35,11 +35,14 @@ 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 { useSelectionSetOptional } from './use-selection-set.tsx';
 import { useToolMode } from './use-tool-mode.tsx';
+import { useUndoSinks, useUndoStackOptional } from './use-undo-stack.tsx';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Types
@@ -115,7 +118,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;
 
@@ -609,6 +612,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 +670,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';
@@ -684,56 +711,100 @@ export function AnnotationsLayer() {
     };
   }, []);
 
-  const scheduleSave = useCallback((next: readonly Stroke[]) => {
+  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);
+    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 +813,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 +865,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 +1004,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 +1022,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 +1067,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 +1091,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 +1115,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 +1123,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 +1149,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 +1202,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 +1219,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 +1284,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.
@@ -1816,7 +1925,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/artboard-marquee.tsx

@@ -18,11 +18,10 @@
 import { useEffect, useRef } from 'react';
 
 import { useArtboardsContext } from './canvas-lib.tsx';
+import { DRAG_THRESHOLD_PX } from './input-router.tsx';
 import { type Selection, useSelectionSet } from './use-selection-set.tsx';
 import { useToolMode } from './use-tool-mode.tsx';
 
-const DRAG_THRESHOLD_PX = 4;
-
 const MARQUEE_CSS = `
 .dc-cv-marquee {
   position: fixed;
@@ -52,7 +51,7 @@ function shouldIgnoreTarget(t: EventTarget | null): boolean {
   // Skip floating chrome and existing overlays (their click handlers run).
   if (
     el.closest(
-      '.dc-mm, .dc-zoom-tb, .dc-tool-palette, .dc-context-menu, .dc-cv-halo, .dc-cv-group-bbox, .cm-composer, .cm-thread, .cm-mention-popup, .cm-pin, .dc-annot-svg, .dc-annot-ctx, .dc-tp-popover, .dc-annot-resize-handle'
+      '.dc-mm, .dc-zoom-tb, .dc-tool-palette, .dc-context-menu, .dc-cv-halo, .dc-cv-group-bbox, .cm-composer, .cm-thread, .cm-mention-popup, .cm-pin, .dc-annot-svg, .dc-annot-ctx, .dc-tp-popover, .dc-annot-resize-handle, .dc-multi-artboard-tb, .dc-elem-ctx-tb, .dc-cv-eq-spacing-layer'
     )
   ) {
     return true;
@@ -125,7 +124,12 @@ export function ArtboardMarqueeOverlay() {
       stateRef.current = null;
       const div = overlayRef.current;
       if (div) div.style.display = 'none';
-      if (!s.crossed) return;
+      if (!s.crossed) {
+        // Bare click on empty world without drag → clear selection
+        // (post-Wave-3 user feedback). Shift-click preserves it.
+        if (!s.shift) selSet.clear();
+        return;
+      }
       if (!artboardsCtx) return;
 
       // Intersect the marquee AABB with each artboard's screen-coord bbox.