@1agh/maude 0.22.2 → 0.24.0

package/plugins/design/dev-server/canvas-cursors.ts

@@ -0,0 +1,125 @@
+/**
+ * @file       canvas-cursors.ts — Phase 21 custom tool cursors
+ * @scope      plugins/design/dev-server/canvas-cursors.ts
+ * @purpose    FigJam/Figma-style custom cursors for the annotation + nav tools.
+ *             The native `crosshair` / `text` / `cell` cursors are tiny, thin,
+ *             and vanish on busy canvases (the "pen is almost invisible"
+ *             complaint). These are 32×32 SVG cursors with a WHITE outline halo
+ *             so the glyph reads on any background, light or dark, and each one
+ *             mirrors its tool-palette icon so the cursor and the tool button
+ *             share one visual identity.
+ *
+ *             Delivered as CSS `cursor: url("data:image/svg+xml,…") hx hy, fb`
+ *             — no runtime dependency, no asset files (Figma ships cursors the
+ *             same way). 32×32 is the cross-browser-safe ceiling; the hotspot
+ *             (hx, hy) is the pixel the click actually registers at.
+ */
+
+import type { Tool } from './input-router.tsx';
+
+/** Build a CSS cursor value from an inline SVG + hotspot + native fallback. */
+function svgCursor(svg: string, hx: number, hy: number, fallback: string): string {
+  // encodeURIComponent is the safest escaping for a data: URI inside url("…").
+  return `url("data:image/svg+xml,${encodeURIComponent(svg.trim())}") ${hx} ${hy}, ${fallback}`;
+}
+
+const W = `width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'`;
+const HALO = "stroke='#ffffff' stroke-linejoin='round' stroke-linecap='round'";
+const INK = '#1f1f1f';
+
+// Precise crosshair with a centre gap — rect / ellipse / arrow. Hotspot 16,16.
+const CROSSHAIR = svgCursor(
+  `<svg ${W}>
+    <path d='M16 4V13M16 19V28M4 16H13M19 16H28' fill='none' ${HALO} stroke-width='4'/>
+    <path d='M16 4V13M16 19V28M4 16H13M19 16H28' fill='none' stroke='${INK}' stroke-width='1.75' stroke-linecap='round'/>
+    <circle cx='16' cy='16' r='1.3' fill='${INK}'/>
+  </svg>`,
+  16,
+  16,
+  'crosshair'
+);
+
+// Marker/pen — nib points at the draw point (bottom-left). Hotspot 6,26.
+const PEN = svgCursor(
+  `<svg ${W}>
+    <path d='M22 4l6 6-15 15-7 1 1-7z' fill='${INK}' ${HALO} stroke-width='2.25'/>
+    <path d='M18.5 7.5l6 6' ${HALO} stroke-width='2'/>
+    <path d='M7 25l-1.5 1.5' ${HALO} stroke-width='2.5'/>
+  </svg>`,
+  6,
+  26,
+  'crosshair'
+);
+
+// Bigger I-beam for text. Hotspot 16,16.
+const TEXT = svgCursor(
+  `<svg ${W}>
+    <path d='M16 5V27M11 5H21M11 27H21' fill='none' ${HALO} stroke-width='4.5'/>
+    <path d='M16 5V27M11 5H21M11 27H21' fill='none' stroke='${INK}' stroke-width='2' stroke-linecap='round'/>
+  </svg>`,
+  16,
+  16,
+  'text'
+);
+
+// Speech bubble — drops a comment at the tail tip (bottom-left). Hotspot 8,27.
+const COMMENT = svgCursor(
+  `<svg ${W}>
+    <path d='M8 5H26a4 4 0 0 1 4 4V18a4 4 0 0 1-4 4H14l-6 6v-6H8a4 4 0 0 1-4-4V9a4 4 0 0 1 4-4Z' fill='${INK}' ${HALO} stroke-width='2.25'/>
+    <circle cx='12' cy='13.5' r='1.4' fill='#fff'/>
+    <circle cx='17' cy='13.5' r='1.4' fill='#fff'/>
+    <circle cx='22' cy='13.5' r='1.4' fill='#fff'/>
+  </svg>`,
+  8,
+  27,
+  'crosshair'
+);
+
+// Open hand for pan/grab. Hotspot 16,17.
+const HAND = svgCursor(
+  `<svg ${W}>
+    <path d='M10 19v-8a1.8 1.8 0 0 1 3.6 0v-1.2a1.8 1.8 0 0 1 3.6 0v.6a1.8 1.8 0 0 1 3.6 0V12a1.8 1.8 0 0 1 3.6 0v6.5a7.5 7.5 0 0 1-7.5 7.5h-1a7.5 7.5 0 0 1-6.4-3.6l-2.4-3.7a1.9 1.9 0 0 1 3-2.3z' fill='${INK}' ${HALO} stroke-width='2'/>
+  </svg>`,
+  16,
+  17,
+  'grab'
+);
+
+// Eraser — working edge at bottom-left. Hotspot 8,24.
+const ERASER = svgCursor(
+  `<svg ${W}>
+    <path d='M19 5l8 8-10 10H9l-4-4z' fill='${INK}' ${HALO} stroke-width='2.25'/>
+    <path d='M13 11l8 8' ${HALO} stroke-width='2'/>
+  </svg>`,
+  8,
+  24,
+  'cell'
+);
+
+// Sticky — a mini yellow note (matches the card). Drag starts at its top-left.
+const STICKY = svgCursor(
+  `<svg ${W}>
+    <path d='M7 6h11l8 8v12H7z' fill='#ffe27a' stroke='${INK}' stroke-width='2' stroke-linejoin='round'/>
+    <path d='M18 6v8h8' fill='none' stroke='${INK}' stroke-width='2' stroke-linejoin='round'/>
+  </svg>`,
+  8,
+  7,
+  'crosshair'
+);
+
+/**
+ * Tool → CSS cursor value. `move` keeps the system arrow (the universal
+ * select/move affordance); everything else gets a crafted cursor.
+ */
+export const TOOL_CURSORS: Record<Tool, string> = {
+  move: 'default',
+  hand: HAND,
+  comment: COMMENT,
+  pen: PEN,
+  rect: CROSSHAIR,
+  ellipse: CROSSHAIR,
+  sticky: STICKY,
+  arrow: CROSSHAIR,
+  text: TEXT,
+  eraser: ERASER,
+};

package/plugins/design/dev-server/canvas-icons.tsx

@@ -102,6 +102,26 @@ export function IconEraser(props: IconProps) {
   );
 }
 
+// Phase 21 — sticky note: folded-corner square (dog-ear at the top-right).
+export function IconSticky(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M4 5h12l4 4v10H4z" />
+      <path d="M16 5v4h4" />
+    </Svg>
+  );
+}
+
+// Phase 21 — standalone text: capital-T glyph (cap bar + stem).
+export function IconText(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M4 6h16" />
+      <path d="M12 6v12" />
+    </Svg>
+  );
+}
+
 export function IconPresentation(props: IconProps) {
   return (
     <Svg {...props}>
@@ -119,6 +139,114 @@ export function IconChevronDown(props: IconProps) {
   );
 }
 
+// ── Phase 21 context-toolbar icons ──────────────────────────────────────────
+// Corner radius: a square whose corners show the chosen rounding.
+export function IconCornerSquare(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <rect x="5" y="5" width="14" height="14" rx="0.5" />
+    </Svg>
+  );
+}
+export function IconCornerSoft(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <rect x="5" y="5" width="14" height="14" rx="4" />
+    </Svg>
+  );
+}
+export function IconCornerPill(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <rect x="5" y="5" width="14" height="14" rx="7" />
+    </Svg>
+  );
+}
+
+// Arrow direction: a shaft with chevron head(s) on the chosen end(s).
+export function IconArrowNone(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M4 12h16" />
+    </Svg>
+  );
+}
+export function IconArrowStartHead(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M4 12h16" />
+      <path d="M9 7l-5 5 5 5" />
+    </Svg>
+  );
+}
+export function IconArrowEndHead(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M4 12h16" />
+      <path d="M15 7l5 5-5 5" />
+    </Svg>
+  );
+}
+export function IconArrowBothHeads(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M5 12h14" />
+      <path d="M9 7l-5 5 5 5" />
+      <path d="M15 7l5 5-5 5" />
+    </Svg>
+  );
+}
+
+// Dashed line toggle.
+export function IconDash(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M3 12h4" />
+      <path d="M10 12h4" />
+      <path d="M17 12h4" />
+    </Svg>
+  );
+}
+
+// Stroke weight: thin vs thick rule.
+export function IconLineThin(props: IconProps) {
+  return (
+    <Svg {...props} strokeWidth={1.25}>
+      <path d="M4 12h16" />
+    </Svg>
+  );
+}
+export function IconLineThick(props: IconProps) {
+  return (
+    <Svg {...props} strokeWidth={3.75}>
+      <path d="M4 12h16" />
+    </Svg>
+  );
+}
+
+// Letter "A" — font-size chips render it at three sizes (S / M / L).
+export function IconLetterA(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M12 5L6 19" />
+      <path d="M12 5l6 14" />
+      <path d="M8.5 14h7" />
+    </Svg>
+  );
+}
+
+// Trash — delete selected annotations.
+export function IconTrash(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M4 7h16" />
+      <path d="M9 7V5a1 1 0 011-1h4a1 1 0 011 1v2" />
+      <path d="M6 7l1 12a1 1 0 001 1h8a1 1 0 001-1l1-12" />
+      <path d="M10 11v6M14 11v6" />
+    </Svg>
+  );
+}
+
 export const TOOL_ICONS: Record<string, (p: IconProps) => JSX.Element> = {
   move: IconMove,
   hand: IconHand,
@@ -126,6 +254,8 @@ export const TOOL_ICONS: Record<string, (p: IconProps) => JSX.Element> = {
   pen: IconPen,
   rect: IconRect,
   ellipse: IconEllipse,
+  sticky: IconSticky,
   arrow: IconArrow,
+  text: IconText,
   eraser: IconEraser,
 };

package/plugins/design/dev-server/canvas-lib.tsx

@@ -95,7 +95,7 @@ import {
 import { type DragState, useArtboardDrag } from './use-artboard-drag.tsx';
 import { CollabProvider, canvasSlugFromPath } from './use-collab.tsx';
 import { useSelectionSetOptional } from './use-selection-set.tsx';
-import { ToolProvider, useToolModeOptional } from './use-tool-mode.tsx';
+import { MaybeToolProvider, useToolModeOptional } from './use-tool-mode.tsx';
 import { UndoStackProvider, useUndoSinks, useUndoStackOptional } from './use-undo-stack.tsx';
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -125,10 +125,13 @@ const ENGINE_CSS = `
      never visually melts into the selection halo during a drag-snap gesture.
      OKLCH default approximates FigJam magenta in the project's color space. */
   --guide-magenta: oklch(62% 0.28 350);
-  background-color: var(--bg-1, #f4f1ea);
+  /* Canvas-shell chrome — the workspace plane + dotted grid follow the Maude
+     chrome theme (--maude-chrome-*), NOT the DS palette. See canvas-shell.tsx
+     HUD_TOKENS_CSS. Artboards (.dc-artboard) keep the DS theme. */
+  background-color: var(--maude-chrome-bg-1, #f4f1ea);
   background-image:
-    linear-gradient(var(--border-subtle, rgba(0,0,0,0.08)) 1px, transparent 1px),
-    linear-gradient(90deg, var(--border-subtle, rgba(0,0,0,0.08)) 1px, transparent 1px);
+    linear-gradient(var(--maude-chrome-border, rgba(0,0,0,0.08)) 1px, transparent 1px),
+    linear-gradient(90deg, var(--maude-chrome-border, rgba(0,0,0,0.08)) 1px, transparent 1px);
   background-size: 24px 24px;
 }
 /* DDR-046 — Snap guides. Sibling kind = confident magenta + glow + distance
@@ -146,13 +149,13 @@ const ENGINE_CSS = `
   box-shadow: 0 0 4px color-mix(in oklab, var(--guide-magenta, oklch(62% 0.28 350)) 35%, transparent);
 }
 .dc-snap-guide--grid {
-  background: color-mix(in oklab, var(--fg-3, var(--fg-1, #4a3f30)) 40%, transparent);
+  background: color-mix(in oklab, var(--maude-chrome-fg-1, #4a3f30) 40%, transparent);
 }
 .dc-snap-pill {
   position: fixed;
   pointer-events: none;
   z-index: 7;
-  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-family: var(--maude-chrome-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
   font-size: 11px;
   font-weight: 600;
   line-height: 1;
@@ -1161,7 +1164,10 @@ interface DesignCanvasProps {
  *
  * `ToolProvider` lives above `DesignCanvasInner` so the viewport
  * controller's `isPanDragActive` predicate can read the live tool state
- * via `useToolModeOptional` (hand-mode bare-drag pan).
+ * via `useToolModeOptional` (hand-mode bare-drag pan). It's wrapped in
+ * `MaybeToolProvider` so when the shell-owned comment mount layer
+ * (canvas-comment-mount.tsx) already provides a ToolProvider, DesignCanvas
+ * consumes that single instance instead of double-mounting.
  */
 export function DesignCanvas(props: DesignCanvasProps) {
   // Phase 20 — per-canvas undo/redo stack (DDR-050 rev 2). The provider
@@ -1178,9 +1184,9 @@ export function DesignCanvas(props: DesignCanvasProps) {
   // CollabProvider is omitted; useCollab() falls back gracefully to null.
   const collabSlug = canvasSlugFromPath(canvasFile);
   const inner = (
-    <ToolProvider>
+    <MaybeToolProvider>
       <DesignCanvasInner {...props} />
-    </ToolProvider>
+    </MaybeToolProvider>
   );
   return (
     <UndoStackProvider canvasFile={canvasFile}>
@@ -1715,7 +1721,8 @@ export function DCPostIt({ children }: { children: ReactNode }) {
 // favor of a soft ambient. The hard offset stays on app-shell chrome only
 // (menubar, header, tab strip) — that's the project's intentional brutalist
 // identity. Floating layer = soft. App frame = hard.
-const FLOATING_SHADOW = '0 6px 24px color-mix(in oklab, var(--fg-0, #1c1917) 10%, transparent)';
+const FLOATING_SHADOW =
+  '0 6px 24px var(--maude-chrome-shadow, color-mix(in oklab, #1c1917 10%, transparent))';
 const FLOATING_RADIUS = '8px';
 
 const OVERLAY_CSS = `
@@ -1725,12 +1732,12 @@ const OVERLAY_CSS = `
   bottom: 16px;
   width: 196px;
   height: 132px;
-  background: var(--bg-0, #ffffff);
-  border: 1px solid var(--fg-0, #1c1917);
+  background: var(--maude-chrome-bg-0, #ffffff);
+  border: 1px solid var(--maude-chrome-fg-0, #1c1917);
   border-radius: ${FLOATING_RADIUS};
-  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-family: var(--maude-chrome-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
   font-size: 10px;
-  color: var(--fg-1, rgba(40,30,20,0.7));
+  color: var(--maude-chrome-fg-1, rgba(40,30,20,0.7));
   z-index: 6;
   user-select: none;
   box-shadow: ${FLOATING_SHADOW};
@@ -1738,11 +1745,11 @@ const OVERLAY_CSS = `
 }
 .dc-mm-hd {
   padding: 5px 8px 4px;
-  border-bottom: 1px solid rgba(0,0,0,0.08);
+  border-bottom: 1px solid var(--maude-chrome-border, rgba(0,0,0,0.08));
   letter-spacing: 0.05em;
   text-transform: uppercase;
   font-size: 9px;
-  background: var(--bg-1, #f4f1ea);
+  background: var(--maude-chrome-bg-1, #f4f1ea);
 }
 .dc-mm-body {
   position: relative;
@@ -1750,12 +1757,12 @@ const OVERLAY_CSS = `
   height: calc(100% - 22px);
   overflow: hidden;
   cursor: pointer;
-  background: var(--bg-1, #f4f1ea);
+  background: var(--maude-chrome-bg-1, #f4f1ea);
 }
 .dc-mm-rect {
   position: absolute;
-  background: color-mix(in oklab, var(--fg-0, #1c1917) 14%, transparent);
-  border: 1px solid color-mix(in oklab, var(--fg-0, #1c1917) 28%, transparent);
+  background: color-mix(in oklab, var(--maude-chrome-fg-0, #1c1917) 14%, transparent);
+  border: 1px solid color-mix(in oklab, var(--maude-chrome-fg-0, #1c1917) 28%, transparent);
   border-radius: 1px;
 }
 /* Filled viewport indicator — FigJam / Figma both ship a tinted fill, not
@@ -1774,13 +1781,13 @@ const OVERLAY_CSS = `
   transform: translateX(-50%);
   display: flex;
   align-items: stretch;
-  background: var(--bg-0, #ffffff);
-  border: 1px solid var(--fg-0, #1c1917);
+  background: var(--maude-chrome-bg-0, #ffffff);
+  border: 1px solid var(--maude-chrome-fg-0, #1c1917);
   border-radius: ${FLOATING_RADIUS};
   overflow: hidden;
-  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-family: var(--maude-chrome-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
   font-size: 11px;
-  color: var(--fg-1, rgba(40,30,20,0.85));
+  color: var(--maude-chrome-fg-1, rgba(40,30,20,0.85));
   z-index: 6;
   box-shadow: ${FLOATING_SHADOW};
 }
@@ -1788,7 +1795,7 @@ const OVERLAY_CSS = `
   appearance: none;
   background: transparent;
   border: 0;
-  border-right: 1px solid rgba(0,0,0,0.08);
+  border-right: 1px solid var(--maude-chrome-border, rgba(0,0,0,0.08));
   padding: 7px 12px;
   font: inherit;
   color: inherit;
@@ -1798,7 +1805,7 @@ const OVERLAY_CSS = `
   transition: background 80ms linear;
 }
 .dc-zoom-tb button:last-child { border-right: 0; }
-.dc-zoom-tb button:hover { background: color-mix(in oklab, var(--fg-0, #1c1917) 5%, transparent); }
+.dc-zoom-tb button:hover { background: color-mix(in oklab, var(--maude-chrome-fg-0, #1c1917) 5%, transparent); }
 .dc-zoom-tb button:focus-visible { outline: 2px solid var(--maude-hud-accent, #d63b1f); outline-offset: -2px; }
 .dc-zoom-tb-pct { font-variant-numeric: tabular-nums; min-width: 52px; }
 `.trim();
@@ -2300,11 +2307,18 @@ export const MOTION_ROLE_DEFAULTS: Record<MotionRole, RoleConfig> = {
   spring: {
     durationToken: '--dur-panel',
     easingToken: 'spring',
-    keyframes: { y: [0, -16, 0] },
+    // Spring physics animate toward a single target; a 3-point array
+    // (`[0,-16,0]`) makes motion/react's spring no-op (no movement). Use a
+    // 2-point target and let `repeatType: 'reverse'` carry the return leg.
+    keyframes: { y: [0, -16] },
     fallbackMs: 320,
   },
   scroll: {
-    durationToken: '--dur-route',
+    // `--dur-route` is intentionally ~instant (route changes are snap, often
+    // 1ms), which makes a scroll-linked drift imperceptible. Bind to the
+    // longer `--dur-soft` so the demo (and any time-driven scroll fallback)
+    // is actually visible.
+    durationToken: '--dur-soft',
     easingToken: '--ease-in-out',
     keyframes: { x: [0, 24, 0] },
     fallbackMs: 480,
@@ -2425,6 +2439,11 @@ export function MotionDemo({
   const repeat = reduced || loop === 'once' ? 0 : Number.POSITIVE_INFINITY;
   const repeatType: 'reverse' | 'loop' = loop === 'always' ? 'reverse' : 'loop';
   const animate = reduced ? undefined : cfg.keyframes;
+  // DS durations are micro-interaction speeds (often <200ms). Looping them with
+  // no gap strobes ~10×/s. Insert a rest between cycles so each loop replays the
+  // REAL token speed, then pauses — readable cadence, not a flicker. Spring's
+  // own settle is the pause, so it skips the extra delay.
+  const repeatDelay = loop === 'always' && !isSpring ? 0.9 : 0;
 
   return (
     <div
@@ -2441,6 +2460,7 @@ export function MotionDemo({
           type: isSpring ? 'spring' : 'tween',
           repeat,
           repeatType,
+          repeatDelay,
         }}
         className="motion-demo__target"
         aria-label={label}

package/plugins/design/dev-server/canvas-meta.schema.json

@@ -18,6 +18,26 @@
       "type": "string",
       "description": "The full brief that produced this canvas (from /design:new). Preserved for handoff."
     },
+    "brief_sha": {
+      "type": "string",
+      "description": "Hash of the brief that produced this canvas (stamped at /design:new step 11). Used by /design:new to short-circuit regeneration when a byte-identical brief in the same DS already produced a canvas."
+    },
+    "tags": {
+      "type": "array",
+      "uniqueItems": true,
+      "items": { "type": "string" },
+      "description": "Free-form labels for the canvas — feature slugs ('dark-mode'), surfaces ('settings'), or themes. Read by flow's /flow:plan design-canvas detection (Phase 11) to match a feature name against canvases via exact tag match (the canvas slug substring match is the other half of the heuristic). Optional."
+    },
+    "status": {
+      "type": "string",
+      "enum": ["draft", "in-review", "ready-for-handoff", "handed-off"],
+      "default": "draft",
+      "description": "Lifecycle state of the canvas. 'draft' = work in progress; 'in-review' = awaiting feedback; 'ready-for-handoff' = approved, eligible for /design:handoff; 'handed-off' = shipped to production code (see handoffCommit). Hand-set by the user, or flipped to 'handed-off' by flow's /flow:done handoff sweep (Phase 11) after a successful /design:handoff. Optional — absent means 'draft'."
+    },
+    "handoffCommit": {
+      "type": "string",
+      "description": "Git commit SHA (full or short) of the commit that handed this canvas off to production code. Written by /flow:done's handoff sweep when it flips status to 'handed-off'. Optional."
+    },
     "platform": {
       "type": "string",
       "enum": ["desktop", "mobile", "tablet", "responsive", "tv", "watch", "other"],