@1agh/maude 0.19.1 → 0.21.0

package/plugins/design/dev-server/undo-stack.ts

@@ -0,0 +1,240 @@
+/**
+ * @file       undo-stack.ts — per-canvas in-memory command stack
+ * @scope      plugins/design/dev-server/undo-stack.ts
+ * @purpose    Pure state + reducer for canvas Cmd+Z / Cmd+Shift+Z. No React,
+ *             no DOM, no fetch — `EditCommand.do()` / `.undo()` are caller-
+ *             supplied side-effects so this file stays trivially testable
+ *             under `bun:test`.
+ *
+ * Scope (DDR-050 rev 2):
+ *   - **Persistent per-canvas, in-memory, session-scoped.** The stack lives
+ *     in `window.top.__maude_undo_stacks` keyed by canvas file path so it
+ *     survives canvas switches (close Foo.tsx, open Bar.tsx, come back to
+ *     Foo.tsx → history still there). Reload destroys it. The original
+ *     "per-iframe-ephemeral" rule from rev 1 was UX-wrong.
+ *   - Stack stores SERIALIZABLE `CommandRecord`s (kind + label + payload),
+ *     NOT EditCommand closures. Closures captured by patchFn/putFn point
+ *     to the iframe's React state — when that iframe unmounts (canvas
+ *     switch), the closures become invalid. Rebuilding from the record
+ *     using the fresh iframe's sinks side-steps the lifecycle issue.
+ *   - Command-pattern semantics intact: each kind ships its own builder
+ *     that turns a payload + sinks into a runnable EditCommand.
+ *   - Depth cap = 50 per canvas. Future-discarded on push. Viewport +
+ *     selection NOT undoable (Figma convention).
+ *
+ * Async note. `cmd.do()` and `cmd.undo()` may return a Promise (server
+ * PATCH/PUT). The reducer itself is synchronous and never awaits — the
+ * runner inside `use-undo-stack.tsx` awaits the side-effect BEFORE
+ * dispatching the state transition. Reducer-pure keeps reasoning + tests
+ * trivial.
+ */
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Runtime command shape
+
+/**
+ * A single reversible edit, ready to execute. Built on demand from a
+ * `CommandRecord` + `CommandSinks` via the registry below. Holds closures
+ * bound to the CURRENT iframe's React state — never persist this; persist
+ * the `CommandRecord` instead.
+ */
+export interface EditCommand {
+  readonly kind: string;
+  readonly label: string;
+  do(): Promise<void> | void;
+  undo(): Promise<void> | void;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Persistent record shape — what the stack actually stores
+
+/**
+ * Serializable description of a reversible edit. Each `kind` corresponds
+ * to a registered builder (see `registerCommand` below). Payload shape is
+ * the kind's contract — see `commands/*-command.ts` for definitions.
+ */
+export interface CommandRecord<P = unknown> {
+  readonly kind: string;
+  readonly label: string;
+  readonly payload: P;
+}
+
+/**
+ * Per-iframe side-effect surface. Populated by descendants of the
+ * `UndoStackProvider` via `useUndoSinks().setSinks(...)`. Each consumer
+ * provides only the sink it owns; the provider merges. Unbound sinks are
+ * `undefined` — builders fail gracefully (returning `null` makes the
+ * runner skip the entry with a warning rather than crash).
+ */
+export interface CommandSinks {
+  /** Wired by canvas-lib `DesignCanvasInner`. */
+  layoutPatchFn?: unknown;
+  /** Wired by `AnnotationsLayer`. */
+  strokesPutFn?: unknown;
+}
+
+export type CommandBuilder<P = unknown> = (
+  record: CommandRecord<P>,
+  sinks: CommandSinks
+) => EditCommand | null;
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Reducer state + actions
+
+export interface UndoStackState {
+  past: readonly CommandRecord[];
+  future: readonly CommandRecord[];
+}
+
+export type UndoAction =
+  | { type: 'push'; record: CommandRecord }
+  | { type: 'undo' }
+  | { type: 'redo' }
+  | { type: 'clear' }
+  | { type: 'hydrate'; state: UndoStackState };
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Constants
+
+/**
+ * Ring cap per canvas. When `past.length === MAX_DEPTH` and a new record
+ * arrives, the oldest entry is dropped. 50 ≈ 3–5 minutes of intense
+ * iteration before the user can no longer undo to the start.
+ */
+export const MAX_DEPTH = 50;
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Builder registry
+
+const BUILDERS = new Map<string, CommandBuilder>();
+
+/** Register a builder for a command kind. Idempotent. */
+export function registerCommand<P>(kind: string, builder: CommandBuilder<P>): void {
+  BUILDERS.set(kind, builder as CommandBuilder);
+}
+
+/**
+ * Rebuild a runnable `EditCommand` from a persisted record + the iframe's
+ * current sinks. Returns `null` when the kind isn't registered or the
+ * required sink isn't bound — the runner treats `null` as "skip this entry,
+ * something's misconfigured" rather than crashing.
+ */
+export function rebuildCommand(record: CommandRecord, sinks: CommandSinks): EditCommand | null {
+  const builder = BUILDERS.get(record.kind);
+  if (!builder) return null;
+  return builder(record, sinks);
+}
+
+/** Test seam — reset the registry between bun:test cases. */
+export function _clearBuilderRegistry(): void {
+  BUILDERS.clear();
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Factory + reducer
+
+export function createUndoStackState(): UndoStackState {
+  return { past: [], future: [] };
+}
+
+export function undoReducer(state: UndoStackState, action: UndoAction): UndoStackState {
+  switch (action.type) {
+    case 'push': {
+      const next = state.past.length >= MAX_DEPTH ? state.past.slice(1) : state.past;
+      return { past: [...next, action.record], future: [] };
+    }
+    case 'undo': {
+      if (state.past.length === 0) return state;
+      const top = state.past[state.past.length - 1];
+      if (!top) return state;
+      return {
+        past: state.past.slice(0, -1),
+        future: [...state.future, top],
+      };
+    }
+    case 'redo': {
+      if (state.future.length === 0) return state;
+      const top = state.future[state.future.length - 1];
+      if (!top) return state;
+      return {
+        past: [...state.past, top],
+        future: state.future.slice(0, -1),
+      };
+    }
+    case 'clear':
+      return createUndoStackState();
+    case 'hydrate':
+      return action.state;
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Selectors — keep state-shape inspection out of consumers.
+
+export function canUndo(state: UndoStackState): boolean {
+  return state.past.length > 0;
+}
+
+export function canRedo(state: UndoStackState): boolean {
+  return state.future.length > 0;
+}
+
+/** Top of `past` — the record an `undo` will invert. */
+export function peekUndo(state: UndoStackState): CommandRecord | null {
+  return state.past[state.past.length - 1] ?? null;
+}
+
+/** Top of `future` — the record a `redo` will re-apply. */
+export function peekRedo(state: UndoStackState): CommandRecord | null {
+  return state.future[state.future.length - 1] ?? null;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Cross-iframe persistent store (DDR-050 rev 2)
+//
+// Lives on the topmost window of the dev-server (same-origin — all canvas
+// iframes are children of /index.html). The map is keyed by canvas file path,
+// so switching from Foo.tsx → Bar.tsx → Foo.tsx replays the original Foo
+// history into the freshly-mounted iframe.
+
+interface StoreHost {
+  __maude_undo_stacks?: Map<string, UndoStackState>;
+}
+
+/**
+ * Prefer `window.top` so all canvas iframes (children of the dev-server
+ * shell) read + write the same Map. Falls back to `window` (when top is
+ * cross-origin — shouldn't happen in our same-origin setup), then to
+ * `globalThis` (Node / Bun test runtime where window is absent).
+ */
+function getStoreHost(): StoreHost {
+  if (typeof window !== 'undefined') {
+    try {
+      return (window.top ?? window) as unknown as StoreHost;
+    } catch {
+      return window as unknown as StoreHost;
+    }
+  }
+  return globalThis as unknown as StoreHost;
+}
+
+function ensureStoreMap(): Map<string, UndoStackState> {
+  const host = getStoreHost();
+  if (!host.__maude_undo_stacks) host.__maude_undo_stacks = new Map();
+  return host.__maude_undo_stacks;
+}
+
+/** Load saved state for a canvas file. Returns empty state on miss. */
+export function loadStackState(canvasFile: string): UndoStackState {
+  return ensureStoreMap().get(canvasFile) ?? createUndoStackState();
+}
+
+/** Persist state for a canvas file. */
+export function saveStackState(canvasFile: string, state: UndoStackState): void {
+  ensureStoreMap().set(canvasFile, state);
+}
+
+/** Test seam — wipe the cross-iframe store between bun:test cases. */
+export function _clearStackStore(): void {
+  getStoreHost().__maude_undo_stacks = new Map();
+}

package/plugins/design/dev-server/use-annotation-resize.tsx

@@ -34,7 +34,7 @@ const RESIZE_CSS = `
   position: fixed;
   width: 8px;
   height: 8px;
-  background: var(--accent, #d63b1f);
+  background: var(--maude-hud-accent, #d63b1f);
   border: 1px solid var(--bg-0, #ffffff);
   border-radius: 1px;
   box-shadow: 0 0 0 0.5px color-mix(in oklab, var(--fg-0, #1c1917) 30%, transparent);

package/plugins/design/dev-server/use-artboard-drag.tsx

@@ -36,14 +36,17 @@ import {
   useState,
 } from 'react';
 
+import { DRAG_THRESHOLD_PX as INPUT_DRAG_THRESHOLD_PX } from './input-router.tsx';
 import type { Selection } from './use-selection-set.tsx';
 import { type Rect, type SnapResult, computeSnap } from './use-snap-guides.tsx';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Constants
 
-/** Screen-pixel distance the cursor must travel before pending → dragging. */
-export const DRAG_THRESHOLD_PX = 4;
+/** Screen-pixel distance the cursor must travel before pending → dragging.
+ *  Re-export from `input-router` so artboard-drag, marquees, and annotation
+ *  drag-vs-tap share the same canonical value (T25). */
+export const DRAG_THRESHOLD_PX = INPUT_DRAG_THRESHOLD_PX;
 
 /** Default grid + tolerance (world units). Documented in DDR-028. */
 export const DEFAULT_GRID_SIZE = 40;
@@ -136,7 +139,7 @@ export function dragReducer(state: DragState, ev: DragEvent): DragState {
       const dxClient = ev.clientX - state.startClientX;
       const dyClient = ev.clientY - state.startClientY;
       if (state.kind === 'pending') {
-        if (Math.abs(dxClient) < DRAG_THRESHOLD_PX && Math.abs(dyClient) < DRAG_THRESHOLD_PX) {
+        if (Math.hypot(dxClient, dyClient) < DRAG_THRESHOLD_PX) {
           return state;
         }
       }