@1agh/maude 0.23.0 → 0.25.0

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

@@ -0,0 +1,173 @@
+/**
+ * @file       canvas-cursors.ts — Phase 24 custom tool cursors (Kenney CC0)
+ * @scope      plugins/design/dev-server/canvas-cursors.ts
+ * @purpose    FigJam/Figma-style custom cursors for EVERY canvas tool. The
+ *             native crosshair / text / arrow cursors are tiny + thin and
+ *             vanish on busy canvases; these are 32×32 SVG cursors that read on
+ *             any background.
+ *
+ *             Phase 24 — ALL tools draw from ONE library, the **Kenney Cursor
+ *             Pack (1.1)** "Outline" set, which is **CC0 / public domain**
+ *             (https://kenney.nl/assets/cursor-pack — no attribution required,
+ *             redistributable inside this MIT package + marketplace clone). See
+ *             DDR-067 for the licence gate (Bibata GPL-3.0 was rejected as
+ *             copyleft). One library = one visual identity across move / hand /
+ *             comment / pen / shape / sticky / text / eraser. The glyph paths
+ *             are Kenney's; we RECOLOUR them (see `kenney()`) to a dark-glyph +
+ *             white-halo treatment so they read crisply on light AND dark
+ *             canvases. Per-tool glyph map:
+ *               move→pointer_a · hand→hand_open · comment→message_dots_square ·
+ *               pen→drawing_pencil · shape→line_cross · eraser→drawing_eraser.
+ *             text (I-beam) + sticky (folded-corner note) have no clean Kenney
+ *             equivalent, so they are AUTHORED in the identical dark-glyph +
+ *             white-halo treatment to keep one visual identity.
+ *
+ *             Delivered as CSS `cursor: url("data:image/svg+xml,…") hx hy, fb`
+ *             — no runtime dependency, no asset files. 32×32 is the
+ *             cross-browser-safe ceiling; (hx, hy) is the click hotspot.
+ */
+
+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}`;
+}
+
+// Phase 24 — 24px rendered box (down from 32) so cursors aren't oversized; the
+// glyph coords stay in the 32-unit viewBox and scale into 24px. Hotspots are
+// scaled to match (see the generator).
+const W = `width='24' height='24' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'`;
+const INK = '#1f1f1f';
+const HALO = "stroke='#ffffff' stroke-linejoin='round' stroke-linecap='round'";
+
+// Kenney CC0 glyph, recoloured to a FigJam-style **dark glyph + white halo**:
+// Kenney's outline band (`b`) is painted WHITE (the halo) and its inner fill
+// (`w`) is painted dark INK. Reads crisply on a LIGHT canvas (solid dark glyph)
+// AND a dark one (white halo edge).
+function kenney(b: string, w: string): string {
+  return `<svg ${W}><path fill='#ffffff' d='${b}'/><path fill='${INK}' d='${w}'/></svg>`;
+}
+
+const MOVE = svgCursor(
+  kenney(
+    'M16.75 23.9 L20 22.55 20.5 22.15 20.35 21.55 18.4 17.75 21.25 17.25 21.75 17 22 16.45 Q22 16.1 21.6 15.9 L11.45 8.2 11.4 8.2 10.85 8 10.2 8.25 10 8.8 10 20.75 Q10 21.55 10.85 21.55 L11.4 21.35 13.6 19.8 15.6 23.5 16.05 23.95 16.75 23.9 M8 8.8 Q7.95 8.05 8.55 7.15 L8.95 6.75 Q9.8 6 10.85 6 11.55 6 12.2 6.35 L12.65 6.6 22.65 14.15 Q24.15 15 24 16.45 24.05 17.55 23.2 18.45 L23.05 18.55 Q22.1 19.3 21.45 19.3 L22.1 20.55 Q22.5 21.2 22.5 22.15 L22.05 23.4 20.9 24.35 20.8 24.4 17.55 25.75 15.25 25.8 Q14.15 25.4 13.75 24.25 L12.95 22.75 12.65 22.9 12.55 23 Q11.75 23.55 10.85 23.55 7.95 23.55 8 20.75 L8 8.8',
+    'M16.75 23.9 L16.05 23.95 15.6 23.5 13.6 19.8 11.4 21.35 10.85 21.55 Q10 21.55 10 20.75 L10 8.8 10.2 8.25 10.85 8 11.4 8.2 11.45 8.2 21.6 15.9 Q22 16.1 22 16.45 L21.75 17 21.25 17.25 18.4 17.75 20.35 21.55 20.5 22.15 20 22.55 16.75 23.9'
+  ),
+  6,
+  5,
+  'default'
+);
+const HAND = svgCursor(
+  kenney(
+    'M28.55 17.8 Q29.4 20.3 28.75 22.8 L28.7 23 28.15 24.55 28.05 24.75 Q26.4 28.2 22.75 29.4 L22.45 29.5 18 29.9 17.75 29.85 Q15.8 29.25 13.8 28.1 L13.45 27.95 Q12 27.05 10.35 26.8 L10.25 26.75 7.9 26.7 7.8 26.7 Q6.1 26.9 4.8 25.8 L4.75 25.8 4.65 25.7 4.6 25.65 Q3.25 24.5 3.05 22.85 L3 22.75 Q2.8 20.95 4 19.5 5.05 18.15 6.75 17.95 L8.4 17.9 7.5 15.55 7.3 15.2 7.2 15 5 10.95 Q3.9 9.15 4.3 7.75 L4.4 7.5 Q4.75 6.15 6.45 5.2 9 3.65 11 5 11.05 4.1 11.5 3.45 12.15 2.1 14.2 1.6 L14.35 1.6 Q18.05 0.6 19.6 4.4 L19.65 4.55 Q20.75 3.65 22.7 3.75 L22.75 3.75 Q26.75 4 27 8.15 L27 8.25 27 8.35 27 8.45 Q26.9 10.75 27.1 12.6 27.15 14.65 28.2 16.75 L28.55 17.8 M26.65 18.4 L26.1 16.8 26.1 16.85 Q24.8 13.7 25 8.35 L25 8.25 Q24.85 5.9 22.6 5.75 20.7 5.65 20.4 7.35 L20.1 7.95 19.5 8.2 18.85 8.05 18.45 7.5 17.75 5.15 Q16.85 2.95 14.7 3.55 L14.65 3.55 Q12.55 4.05 13.15 6.15 L13.85 8.75 13.75 9.45 13.25 9.95 12.55 9.95 12 9.55 10.9 7.7 Q9.5 5.7 7.45 6.9 6.5 7.45 6.25 8.15 6.1 8.9 6.7 9.85 9.2 13.9 10.8 18.65 L10.8 19.3 10.4 19.8 9.75 19.95 Q8.35 19.8 6.95 19.95 6.1 20.05 5.55 20.75 4.9 21.55 5 22.55 5.15 23.55 6 24.2 L6.05 24.25 Q6.75 24.85 7.65 24.7 L7.7 24.7 10.65 24.8 Q12.7 25.15 14.45 26.2 L14.5 26.2 Q16.4 27.35 18.3 27.9 L22.05 27.5 22.1 27.5 Q24.95 26.55 26.25 23.85 L26.8 22.3 Q27.3 20.35 26.65 18.4',
+    'M26.65 18.4 Q27.3 20.35 26.8 22.3 L26.25 23.85 Q24.95 26.55 22.1 27.5 L22.05 27.5 18.3 27.9 Q16.4 27.35 14.5 26.2 L14.45 26.2 Q12.7 25.15 10.65 24.8 L7.7 24.7 7.65 24.7 Q6.75 24.85 6.05 24.25 L6 24.2 Q5.15 23.55 5 22.55 4.9 21.55 5.55 20.75 6.1 20.05 6.95 19.95 8.35 19.8 9.75 19.95 L10.4 19.8 10.8 19.3 10.8 18.65 Q9.2 13.9 6.7 9.85 6.1 8.9 6.25 8.15 6.5 7.45 7.45 6.9 9.5 5.7 10.9 7.7 L12 9.55 12.55 9.95 13.25 9.95 13.75 9.45 13.85 8.75 13.15 6.15 Q12.55 4.05 14.65 3.55 L14.7 3.55 Q16.85 2.95 17.75 5.15 L18.45 7.5 18.85 8.05 19.5 8.2 20.1 7.95 20.4 7.35 Q20.7 5.65 22.6 5.75 24.85 5.9 25 8.25 L25 8.35 Q24.8 13.7 26.1 16.85 L26.1 16.8 26.65 18.4'
+  ),
+  12,
+  12,
+  'grab'
+);
+const COMMENT = svgCursor(
+  kenney(
+    'M8 4 Q4 4 4 8 L4 20 Q4 24 8 24 L12 24 15.3 27.3 16 27.6 16.7 27.3 20 24 24 24 Q28 24 28 20 L28 8 Q28 4 24 4 L8 4 M24 2 Q30 2 30 8 L30 20 Q30 26 24 26 L20.85 26 18.15 28.75 Q17.2 29.6 16 29.6 14.8 29.6 13.9 28.75 L11.15 26 8 26 Q2 26 2 20 L2 8 Q2 2 8 2 L24 2 M24 14 Q24 14.85 23.4 15.4 22.85 16 22 16 21.15 16 20.55 15.4 20 14.85 20 14 20 13.15 20.55 12.55 21.15 12 22 12 22.85 12 23.4 12.55 24 13.15 24 14 M12 14 Q12 14.85 11.4 15.4 10.85 16 10 16 9.15 16 8.55 15.4 8 14.85 8 14 8 13.15 8.55 12.55 9.15 12 10 12 10.85 12 11.4 12.55 12 13.15 12 14 M18 14 Q18 14.85 17.4 15.4 16.85 16 16 16 15.15 16 14.55 15.4 14 14.85 14 14 14 13.15 14.55 12.55 15.15 12 16 12 16.85 12 17.4 12.55 18 13.15 18 14',
+    'M18 14 Q18 13.15 17.4 12.55 16.85 12 16 12 15.15 12 14.55 12.55 14 13.15 14 14 14 14.85 14.55 15.4 15.15 16 16 16 16.85 16 17.4 15.4 18 14.85 18 14 M8 4 L24 4 Q28 4 28 8 L28 20 Q28 24 24 24 L20 24 16.7 27.3 16 27.6 15.3 27.3 12 24 8 24 Q4 24 4 20 L4 8 Q4 4 8 4 M12 14 Q12 13.15 11.4 12.55 10.85 12 10 12 9.15 12 8.55 12.55 8 13.15 8 14 8 14.85 8.55 15.4 9.15 16 10 16 10.85 16 11.4 15.4 12 14.85 12 14 M24 14 Q24 13.15 23.4 12.55 22.85 12 22 12 21.15 12 20.55 12.55 20 13.15 20 14 20 14.85 20.55 15.4 21.15 16 22 16 22.85 16 23.4 15.4 24 14.85 24 14'
+  ),
+  12,
+  22,
+  'crosshair'
+);
+const PEN = svgCursor(
+  kenney(
+    'M5.15 10.85 Q4 9.65 4 8.1 L4 7.95 4 7.85 Q3.95 6.2 5.1 5.15 6.25 4 7.85 4 L7.95 4 8.1 4 Q9.65 4 10.85 5.15 L11 5.3 14.3 5.25 Q15.15 5.25 15.75 5.85 L29.9 20 Q31 21.15 31 22.75 L31 22.85 31 23 Q31.05 24.5 29.9 25.7 L29.55 25.95 25.65 29.9 25.65 29.95 Q24.45 31.1 22.75 31.1 21.2 31.15 20 29.95 L5.85 15.8 Q5.25 15.2 5.25 14.35 L5.25 10.95 5.15 10.85 M19.95 24.2 L18.55 22.8 22.8 18.55 24.2 19.95 19.95 24.2 M28.45 21.4 L14.3 7.25 10.15 7.3 9.4 6.55 Q8.8 5.95 7.95 6 7.1 5.95 6.5 6.55 5.95 7.1 6 7.95 5.95 8.8 6.55 9.4 L7.25 10.1 7.25 14.35 21.4 28.5 Q22 29.1 22.75 29.1 23.6 29.1 24.2 28.5 L28.45 24.25 Q29.05 23.65 29 22.85 29.05 22 28.45 21.4 M9.25 13.5 L9.25 9.3 13.5 9.25 14.3 10.05 10.05 14.3 9.25 13.5 M17.15 21.4 L11.5 15.75 15.75 11.5 21.4 17.15 17.15 21.4',
+    'M17.15 21.4 L21.4 17.15 15.75 11.5 11.5 15.75 17.15 21.4 M28.45 21.4 Q29.05 22 29 22.85 29.05 23.65 28.45 24.25 L24.2 28.5 Q23.6 29.1 22.75 29.1 22 29.1 21.4 28.5 L7.25 14.35 7.25 10.1 6.55 9.4 Q5.95 8.8 6 7.95 5.95 7.1 6.5 6.55 7.1 5.95 7.95 6 8.8 5.95 9.4 6.55 L10.15 7.3 14.3 7.25 28.45 21.4 M19.95 24.2 L24.2 19.95 22.8 18.55 18.55 22.8 19.95 24.2 M9.25 13.5 L10.05 14.3 14.3 10.05 13.5 9.25 9.25 9.3 9.25 13.5'
+  ),
+  20,
+  20,
+  'crosshair'
+);
+const CROSSHAIR = svgCursor(
+  kenney(
+    'M17 2 Q18.2 2 19.15 2.9 20 3.8 20 5 L20 12 27 12 Q28.2 12 29.15 12.9 30 13.8 30 15 L30 17 Q30 18.2 29.15 19.15 28.2 20 27 20 L20 20 20 27 Q20 28.2 19.15 29.15 18.2 30 17 30 L15 30 Q13.8 30 12.9 29.15 12 28.2 12 27 L12 20 5 20 Q3.8 20 2.9 19.15 2 18.2 2 17 L2 15 Q2 13.8 2.9 12.9 3.8 12 5 12 L12 12 12 5 Q12 3.8 12.9 2.9 13.8 2 15 2 L17 2 M14 27 L14.3 27.7 Q14.6 28 15 28 L17 28 17.7 27.7 18 27 18 18.05 18.05 18 27 18 Q27.4 18 27.7 17.7 L28 17 28 15 27.7 14.3 Q27.4 14 27 14 L18 14 18 5 17.7 4.3 17 4 15 4 Q14.6 4 14.3 4.3 14 4.6 14 5 L14 14 5 14 Q4.6 14 4.3 14.3 4 14.6 4 15 L4 17 Q4 17.4 4.3 17.7 4.6 18 5 18 L14 18 14 27',
+    'M14 27 L14 18 5 18 Q4.6 18 4.3 17.7 4 17.4 4 17 L4 15 Q4 14.6 4.3 14.3 4.6 14 5 14 L14 14 14 5 Q14 4.6 14.3 4.3 14.6 4 15 4 L17 4 17.7 4.3 18 5 18 14 27 14 Q27.4 14 27.7 14.3 L28 15 28 17 27.7 17.7 Q27.4 18 27 18 L18.05 18 18 18.05 18 27 17.7 27.7 17 28 15 28 Q14.6 28 14.3 27.7 L14 27'
+  ),
+  12,
+  12,
+  'crosshair'
+);
+const ERASER = svgCursor(
+  kenney(
+    'M3.9 11.35 Q2.3 12.5 3.7 13.9 L16.4 26.65 Q17.85 28.05 19.45 26.9 L27.65 21.15 Q29.3 20 27.85 18.6 L15.15 5.85 Q13.75 4.45 12.1 5.6 L3.9 11.35 M1.05 12.4 Q1 10.95 2.75 9.75 L10.95 4 10.95 3.95 Q14 1.85 16.6 4.45 L29.3 17.2 Q30.8 18.65 30.55 20.1 30.55 21.55 28.8 22.8 L20.6 28.55 20.65 28.55 Q17.7 30.65 15 28.1 L15 28.05 2.3 15.3 2.3 15.35 Q0.8 13.85 1.05 12.4 M13.5 7 L19.85 13.35 11.65 19.15 5.3 12.75 13.5 7',
+    'M13.5 7 L5.3 12.75 11.65 19.15 19.85 13.35 13.5 7 M3.9 11.35 L12.1 5.6 Q13.75 4.45 15.15 5.85 L27.85 18.6 Q29.3 20 27.65 21.15 L19.45 26.9 Q17.85 28.05 16.4 26.65 L3.7 13.9 Q2.3 12.5 3.9 11.35'
+  ),
+  6,
+  14,
+  'cell'
+);
+
+// Text — a classic I-beam (vertical stem + top/bottom serifs). Authored in the
+// same dark-INK glyph + white-HALO treatment as the Kenney glyphs (Kenney's
+// pointer_i reads as a small bracket, not an I-beam). Hotspot dead-centre.
+const TEXT = svgCursor(
+  `<svg ${W}><path d='M16 4V28M11 4H21M11 28H21' fill='none' ${HALO} stroke-width='5'/><path d='M16 4V28M11 4H21M11 28H21' fill='none' stroke='${INK}' stroke-width='2.25' stroke-linecap='round'/></svg>`,
+  12,
+  12,
+  'text'
+);
+
+// Sticky — a note with a peeled/folded top-right corner (the universal sticky
+// glyph). Authored in the same treatment (Kenney has no sticky-note). Hotspot
+// at the note's top-left, where the note is dropped.
+const STICKY = svgCursor(
+  `<svg ${W}><path d='M6 5H21L26 10V27H6Z' fill='${INK}' ${HALO} stroke-width='2.5'/><path d='M21 5V11H26' fill='none' ${HALO} stroke-width='2.25'/></svg>`,
+  5,
+  5,
+  'crosshair'
+);
+
+/**
+ * Tool → CSS cursor value. Phase 24 — every tool ships a Kenney glyph (no
+ * system fallback for `move` anymore; the brief is ONE unified library). The
+ * single Shape tool uses the crosshair; `rect`/`ellipse` stay keyed (still in
+ * the Tool union) but are no longer directly selectable.
+ */
+// Frozen so the docstring's "frozen map" guarantee is real: `resolveToolCursor`
+// is a pure lookup into this object, and freezing forecloses any same-realm
+// shell-side code ever mutating an entry out from under the lookup (the canvas
+// runs cross-origin and can't reach it regardless — this is belt-and-braces).
+export const TOOL_CURSORS: Record<Tool, string> = Object.freeze({
+  move: MOVE,
+  hand: HAND,
+  comment: COMMENT,
+  pen: PEN,
+  shape: CROSSHAIR,
+  rect: CROSSHAIR,
+  ellipse: CROSSHAIR,
+  sticky: STICKY,
+  arrow: CROSSHAIR,
+  text: TEXT,
+  eraser: ERASER,
+});
+
+/**
+ * Resolve a tool token — received over the **untrusted** canvas→shell
+ * `tool-cursor` postMessage bridge — to a TRUSTED cursor string from
+ * {@link TOOL_CURSORS}, or `null` when the token is not a known tool.
+ *
+ * The app shell applies the value this RETURNS, never the raw message. That is
+ * the security boundary: a malicious *synced* canvas (DDR-054 — canvas content
+ * is untrusted and may be hub-pushed) can call
+ * `window.parent.postMessage({ dgn: 'tool-cursor', tool: … }, '*')` directly,
+ * bypassing the honest `ToolProvider` sender. By echoing only a token and
+ * looking the cursor up here, the worst that canvas can do is pick *which*
+ * known, always-visible glyph the shell shows — it can no longer smuggle an
+ * invisible / displaced / zero-content SVG cursor that would act as a
+ * clickjacking aid over the un-CSP'd shell (phase-24 ethical-hacker Finding 2;
+ * see DDR-067). `hasOwnProperty` (not `in`) keeps `constructor`/`__proto__`
+ * off the allowlist, and the `[a-z-]` shape gate bars anything but a tool id.
+ */
+export function resolveToolCursor(token: unknown): string | null {
+  if (typeof token !== 'string' || !/^[a-z-]+$/.test(token)) return null;
+  if (!Object.prototype.hasOwnProperty.call(TOOL_CURSORS, token)) return null;
+  return TOOL_CURSORS[token as Tool];
+}

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,13 +139,292 @@ 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>
+  );
+}
+
+// ── Phase 24 shape-tool icons ────────────────────────────────────────────────
+// IconShape — the Shape tool button: a square + circle composite (FigJam-style).
+export function IconShape(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <rect x="4" y="4" width="11" height="11" rx="1.5" />
+      <circle cx="15" cy="15" r="5" />
+    </Svg>
+  );
+}
+export function IconSquare(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <rect x="4" y="4" width="16" height="16" rx="0.5" />
+    </Svg>
+  );
+}
+export function IconRoundedSquare(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <rect x="4" y="4" width="16" height="16" rx="4" />
+    </Svg>
+  );
+}
+export function IconCircle(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <circle cx="12" cy="12" r="8" />
+    </Svg>
+  );
+}
+export function IconDiamond(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M12 3l9 9-9 9-9-9z" />
+    </Svg>
+  );
+}
+export function IconTriangle(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M12 4l8 16H4z" />
+    </Svg>
+  );
+}
+export function IconTriangleDown(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M4 4h16l-8 16z" />
+    </Svg>
+  );
+}
+
+// ── Phase 24 arrowhead-picker icons ──────────────────────────────────────────
+// Each shows a short shaft ending in the head style on the right.
+export function IconArrowheadLine(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M3 12h13" />
+      <path d="M12 8l5 4-5 4" />
+    </Svg>
+  );
+}
+export function IconArrowheadTriangle(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M3 12h11" />
+      <path d="M13 8l6 4-6 4z" fill="currentColor" />
+    </Svg>
+  );
+}
+export function IconArrowheadTriangleOutline(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M3 12h11" />
+      <path d="M13 8l6 4-6 4z" />
+    </Svg>
+  );
+}
+export function IconArrowheadCircle(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M3 12h11" />
+      <circle cx="17" cy="12" r="3" fill="currentColor" />
+    </Svg>
+  );
+}
+export function IconArrowheadDiamond(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M3 12h10" />
+      <path d="M17 8l4 4-4 4-4-4z" fill="currentColor" />
+    </Svg>
+  );
+}
+
+// ── Phase 24 line-type icons ─────────────────────────────────────────────────
+export function IconLineStraight(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M4 12h16" />
+    </Svg>
+  );
+}
+export function IconLineCurved(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M4 18C4 9 20 15 20 6" />
+    </Svg>
+  );
+}
+export function IconLineElbow(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M4 6v6a2 2 0 002 2h14" />
+    </Svg>
+  );
+}
+
+// ── Phase 24 text-style icons ────────────────────────────────────────────────
+export function IconBold(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M7 5h6a3.5 3.5 0 010 7H7zM7 12h7a3.5 3.5 0 010 7H7z" />
+    </Svg>
+  );
+}
+export function IconStrike(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M5 12h14" />
+      <path d="M8 7a4 3 0 016-1M16 16a4 3 0 01-7 1" />
+    </Svg>
+  );
+}
+export function IconAlignLeft(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M4 6h16M4 12h10M4 18h13" />
+    </Svg>
+  );
+}
+export function IconAlignCenter(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M4 6h16M7 12h10M5 18h14" />
+    </Svg>
+  );
+}
+export function IconAlignRight(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M4 6h16M10 12h10M7 18h13" />
+    </Svg>
+  );
+}
+
 export const TOOL_ICONS: Record<string, (p: IconProps) => JSX.Element> = {
   move: IconMove,
   hand: IconHand,
   comment: IconComment,
   pen: IconPen,
+  // Phase 24 — single Shape tool. rect/ellipse kept for any legacy lookups.
+  shape: IconShape,
   rect: IconRect,
   ellipse: IconEllipse,
+  sticky: IconSticky,
   arrow: IconArrow,
+  text: IconText,
   eraser: IconEraser,
 };
+
+// Phase 24 — shape-kind → icon, for the palette popover + context toolbar.
+export const SHAPE_KIND_ICONS: Record<string, (p: IconProps) => JSX.Element> = {
+  square: IconSquare,
+  rounded: IconRoundedSquare,
+  circle: IconCircle,
+  diamond: IconDiamond,
+  triangle: IconTriangle,
+  'triangle-down': IconTriangleDown,
+};

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