@1agh/maude 0.23.0 → 0.24.0

package/plugins/design/dev-server/bin/smoke.sh

@@ -10,6 +10,9 @@
 #            [--include-system 0|1]   (default 1)
 #            [--timeout <secs>]       (default 8)
 #            [--engine auto|agent-browser|playwright]
+#            [--changed-only]         (default off — screenshot only canvases changed
+#                                      since the last smoke run; escalates to the full
+#                                      set when dev-server / canvas-lib / templates changed)
 #
 # Reads:
 #   $DESIGN_ROOT/_server.json   (must exist — caller runs server-up.sh first)
@@ -31,6 +34,7 @@ OUT_DIR=""
 INCLUDE_SYSTEM=1
 TIMEOUT=8
 ENGINE="auto"
+CHANGED_ONLY=0
 
 while [ $# -gt 0 ]; do
   case "$1" in
@@ -39,8 +43,9 @@ while [ $# -gt 0 ]; do
     --include-system) INCLUDE_SYSTEM="$2"; shift 2 ;;
     --timeout)        TIMEOUT="$2"; shift 2 ;;
     --engine)         ENGINE="$2"; shift 2 ;;
+    --changed-only)   CHANGED_ONLY=1; shift ;;
     --help|-h)
-      sed -n '2,28p' "$0" | sed 's/^# \?//'
+      sed -n '2,30p' "$0" | sed 's/^# \?//'
       exit 0
       ;;
     *)
@@ -73,6 +78,10 @@ if [ -z "$OUT_DIR" ]; then
   OUT_DIR="$DESIGN_ROOT/_history/_smoke/$TS"
 fi
 mkdir -p "$OUT_DIR"
+# agent-browser ignores RELATIVE screenshot paths (writes to ~/.agent-browser/tmp
+# instead), which silently strands every PNG. Canonicalize to absolute so the
+# captured evidence actually lands in OUT_DIR. See DDR-021.
+OUT_DIR="$(cd "$OUT_DIR" && pwd)"
 
 # ---------- engine resolution ----------
 if [ "$ENGINE" = "auto" ]; then
@@ -107,6 +116,57 @@ COUNT=$(printf '%s' "$CANVASES" | grep -c .)
 [ "$COUNT" -gt 0 ] || { echo "smoke.sh: no canvases found (ui/*.tsx or system/*/preview/*.tsx)" >&2; exit 1; }
 echo "→ found $COUNT canvases" >&2
 
+# ---------- --changed-only incremental filter (Phase C / DDR-061) ----------
+# Default smoke screenshots every canvas. --changed-only narrows to the canvases
+# touched since the last recorded smoke run, UNLESS the diff touches an
+# "everything could break" shape (dev-server, canvas-lib, canvas templates) — then
+# it escalates back to the full set. Correctness > speed: no baseline, no git, or
+# an escalation trigger all fall back to the full set.
+MARKER="$DESIGN_ROOT/_history/_smoke/.last-smoke.json"
+if [ "$CHANGED_ONLY" = "1" ]; then
+  LAST_SHA=""
+  if [ -f "$MARKER" ] && command -v jq >/dev/null 2>&1; then
+    LAST_SHA=$(jq -r '.sha // empty' "$MARKER" 2>/dev/null)
+  fi
+  if ! command -v git >/dev/null 2>&1 || ! git -C "$REPO" rev-parse HEAD >/dev/null 2>&1; then
+    echo "→ --changed-only: no git in $REPO — running full set" >&2
+  elif [ -z "$LAST_SHA" ]; then
+    echo "→ --changed-only: no prior smoke baseline ($MARKER) — running full set" >&2
+  else
+    # All paths changed between the last smoke and the current working tree
+    # (committed + uncommitted), plus untracked canvases.
+    CHANGED=$(
+      { git -C "$REPO" diff --name-only "$LAST_SHA" -- 2>/dev/null
+        git -C "$REPO" ls-files --others --exclude-standard -- .design/ui .design/system 2>/dev/null
+      } | sort -u
+    )
+    if printf '%s\n' "$CHANGED" | grep -qE 'dev-server/|canvas-lib\.tsx|canvas[^/]*\.tsx\.template'; then
+      echo "→ --changed-only: dev-server / canvas-lib / template changed — escalating to FULL set" >&2
+    else
+      # Keep only canvases whose repo-relative path is in the changed set.
+      FILTERED=""
+      while IFS= read -r CANVAS; do
+        [ -z "$CANVAS" ] && continue
+        REL_REPO="${CANVAS#$REPO/}"
+        if printf '%s\n' "$CHANGED" | grep -qxF "$REL_REPO"; then
+          FILTERED="$FILTERED$CANVAS"$'\n'
+        fi
+      done <<< "$CANVASES"
+      CANVASES=$(printf '%s' "$FILTERED" | sed '/^$/d')
+      COUNT=$(printf '%s' "$CANVASES" | grep -c .)
+      if [ "$COUNT" -eq 0 ]; then
+        echo "→ --changed-only: no canvas .tsx changed since last smoke ($LAST_SHA) — nothing to screenshot" >&2
+        # Refresh the marker so the next run diffs from here, then exit clean.
+        mkdir -p "$(dirname "$MARKER")"
+        printf '{"sha":"%s","ts":"%s","mode":"changed-only-noop"}' \
+          "$(git -C "$REPO" rev-parse HEAD 2>/dev/null)" "$(date -u +%Y-%m-%dT%H:%M:%SZ)" > "$MARKER"
+        exit 0
+      fi
+      echo "→ --changed-only: $COUNT changed canvas(es) since $LAST_SHA" >&2
+    fi
+  fi
+fi
+
 # ---------- helpers ----------
 SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
 SLUG_HELPER="$SCRIPT_DIR/slug.sh"
@@ -160,6 +220,8 @@ probe_agent_browser() {
     for (const s of sel) { const el = document.querySelector(s); if (el && el.innerText) return el.innerText.slice(0, 120); }
     const body = document.body && document.body.innerText || '';
     if (body.startsWith('Error:') || body.startsWith('SyntaxError:') || body.startsWith('ReferenceError:')) return body.slice(0, 120);
+    const t = body.trim();
+    if (t === 'Not found' || t.startsWith('Forbidden (canvas origin)')) return 'route-error: ' + t.slice(0, 80);
     return '';
   })()" 2>/dev/null)
   # Strip wrapping quotes that agent-browser eval adds for strings.
@@ -172,16 +234,24 @@ probe_agent_browser() {
     return
   fi
 
+  # The PNG IS the evidence (DDR-021). A missing/empty file means agent-browser
+  # never wrote it (relative path, capture crash, …) — that is a FAILURE, not an
+  # OK. The old code fell straight through to "OK" here, which is exactly how a
+  # broken canvas route ("Not found" 404 + no PNG) masqueraded as 43/43 green.
+  if [ ! -s "$out_png" ]; then
+    echo "ERROR"
+    echo "screenshot-not-written"
+    echo "$out_png"
+    return
+  fi
   # PNG size sanity — < 2 KB usually means blank background only.
-  if [ -s "$out_png" ]; then
-    local size
-    size=$(wc -c < "$out_png" 2>/dev/null | tr -d ' ')
-    if [ -n "$size" ] && [ "$size" -lt 2048 ]; then
-      echo "BLANK"
-      echo "png-${size}B"
-      echo "$out_png"
-      return
-    fi
+  local size
+  size=$(wc -c < "$out_png" 2>/dev/null | tr -d ' ')
+  if [ -n "$size" ] && [ "$size" -lt 2048 ]; then
+    echo "BLANK"
+    echo "png-${size}B"
+    echo "$out_png"
+    return
   fi
 
   echo "OK"
@@ -211,7 +281,11 @@ while IFS= read -r CANVAS; do
   N=$((N + 1))
   REL="${CANVAS#$DESIGN_ROOT/}"
   REL_ENC=$(urlencode_path "$REL")
-  URL="http://localhost:$PORT/$REL_ENC"
+  # Canvases render through the canvas shell, not the bare path. The bare
+  # `/<rel>` route 404s when the canvas-origin sandbox is on (default since
+  # phase-9.1) — only `/_canvas-shell.html?canvas=<rel>` mounts the canvas
+  # (works in both split-on and legacy same-origin modes).
+  URL="http://localhost:$PORT/_canvas-shell.html?canvas=$REL_ENC"
   SLUG=$(bash "$SLUG_HELPER" "$REL" 2>/dev/null || printf '%s' "$REL" | tr '/ ' '__' | tr '[:upper:]' '[:lower:]')
   OUT_PNG="$OUT_DIR/$SLUG.png"
 
@@ -264,6 +338,15 @@ done <<< "$CANVASES"
 echo "→ report: $MD" >&2
 echo "→ tsv:    $TSV" >&2
 
+# Record this run as the baseline for the next --changed-only diff (Phase C / DDR-061).
+if command -v git >/dev/null 2>&1 && git -C "$REPO" rev-parse HEAD >/dev/null 2>&1; then
+  mkdir -p "$DESIGN_ROOT/_history/_smoke"
+  printf '{"sha":"%s","ts":"%s","mode":"%s","count":%d,"failed":%d}' \
+    "$(git -C "$REPO" rev-parse HEAD 2>/dev/null)" "$(date -u +%Y-%m-%dT%H:%M:%SZ)" \
+    "$([ "$CHANGED_ONLY" = "1" ] && echo changed-only || echo full)" "$COUNT" "$FAILED" \
+    > "$DESIGN_ROOT/_history/_smoke/.last-smoke.json"
+fi
+
 if [ $FAILED -gt 0 ]; then
   echo "✗ smoke: $FAILED / $COUNT canvases failed" >&2
   exit 3

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

@@ -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;
@@ -1718,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 = `
@@ -1728,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};
@@ -1741,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;
@@ -1753,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
@@ -1777,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};
 }
@@ -1791,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;
@@ -1801,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();

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"],