@1agh/maude 0.23.0 → 0.25.0

package/plugins/design/dev-server/test/sync-untrusted.test.ts

@@ -0,0 +1,104 @@
+// T4.5 (DDR-054 §3 F3) — untrusted-marker for sync-written files. Verifies the
+// `_untrusted/INDEX.json` marker + the managed `.claudeignore` block: written
+// for the syncable set, cleared when empty, stale entries dropped on re-write,
+// and user-authored `.claudeignore` content outside the block preserved.
+
+import { existsSync, mkdirSync, mkdtempSync, readFileSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+
+import { afterEach, beforeEach, describe, expect, test } from 'bun:test';
+
+import type { Context } from '../context.ts';
+import type { CanvasDescriptor } from '../sync/index.ts';
+import { clearUntrustedMarkers, writeUntrustedMarkers } from '../sync/untrusted.ts';
+
+let repoRoot: string;
+let designRoot: string;
+
+beforeEach(() => {
+  repoRoot = mkdtempSync(join(tmpdir(), 'untrusted-'));
+  designRoot = join(repoRoot, '.design');
+  mkdirSync(designRoot, { recursive: true });
+});
+afterEach(() => {
+  /* tmpdir — left for the OS to reap */
+});
+
+function ctxOf(): Context {
+  return { paths: { repoRoot, designRoot } } as unknown as Context;
+}
+
+function desc(slug: string, body: string): CanvasDescriptor {
+  return {
+    slug,
+    html: join(designRoot, body),
+    comments: join(designRoot, '_comments', `${slug}.json`),
+    annotations: join(designRoot, `${slug}.annotations.svg`),
+    meta: join(designRoot, body.replace(/\.(tsx|html)$/i, '.meta.json')),
+    css: join(designRoot, body.replace(/\.(tsx|html)$/i, '.css')),
+  };
+}
+
+const HUB = 'https://hub.example.com';
+
+describe('writeUntrustedMarkers — T4.5', () => {
+  test('writes INDEX.json + a managed .claudeignore block for the synced set', () => {
+    const ctx = ctxOf();
+    writeUntrustedMarkers(ctx, [desc('ui-a', 'ui/a.tsx')], HUB);
+
+    const indexAbs = join(designRoot, '_untrusted', 'INDEX.json');
+    expect(existsSync(indexAbs)).toBe(true);
+    const index = JSON.parse(readFileSync(indexAbs, 'utf8'));
+    expect(index.hubUrl).toBe(HUB);
+    expect(index.canvases[0].slug).toBe('ui-a');
+    expect(index.canvases[0].body).toBe('.design/ui/a.tsx');
+    expect(index.canvases[0].meta).toBe('.design/ui/a.meta.json'); // Gap 2: meta is untrusted too
+    expect(index.canvases[0].css).toBe('.design/ui/a.css'); // Gap 3: css too
+    expect(index.note.toLowerCase()).toContain('untrusted');
+
+    const ci = readFileSync(join(repoRoot, '.claudeignore'), 'utf8');
+    expect(ci).toContain('maude:sync-untrusted begin');
+    expect(ci).toContain('.design/ui/a.tsx');
+    expect(ci).toContain('.design/ui-a.annotations.svg');
+    expect(ci).toContain('.design/ui/a.meta.json');
+    expect(ci).toContain('.design/ui/a.css');
+    expect(ci).toContain('maude:sync-untrusted end');
+  });
+
+  test('re-write with a smaller set drops the stale entry', () => {
+    const ctx = ctxOf();
+    writeUntrustedMarkers(ctx, [desc('ui-a', 'ui/a.tsx'), desc('ui-b', 'ui/b.tsx')], HUB);
+    writeUntrustedMarkers(ctx, [desc('ui-a', 'ui/a.tsx')], HUB);
+    const ci = readFileSync(join(repoRoot, '.claudeignore'), 'utf8');
+    expect(ci).toContain('.design/ui/a.tsx');
+    expect(ci).not.toContain('.design/ui/b.tsx');
+    // Only one managed block (no accumulation).
+    expect(ci.match(/maude:sync-untrusted begin/g)?.length).toBe(1);
+  });
+
+  test('empty set clears INDEX.json + the .claudeignore block', () => {
+    const ctx = ctxOf();
+    writeUntrustedMarkers(ctx, [desc('ui-a', 'ui/a.tsx')], HUB);
+    writeUntrustedMarkers(ctx, [], HUB);
+    expect(existsSync(join(designRoot, '_untrusted', 'INDEX.json'))).toBe(false);
+    // .claudeignore had only our block → removed entirely.
+    expect(existsSync(join(repoRoot, '.claudeignore'))).toBe(false);
+  });
+
+  test('preserves user-authored .claudeignore content outside the block', () => {
+    writeFileSync(join(repoRoot, '.claudeignore'), 'secrets/\n*.key\n');
+    const ctx = ctxOf();
+    writeUntrustedMarkers(ctx, [desc('ui-a', 'ui/a.tsx')], HUB);
+    let ci = readFileSync(join(repoRoot, '.claudeignore'), 'utf8');
+    expect(ci).toContain('secrets/');
+    expect(ci).toContain('*.key');
+    expect(ci).toContain('.design/ui/a.tsx');
+    // Clearing leaves the user content intact.
+    clearUntrustedMarkers(ctx);
+    ci = readFileSync(join(repoRoot, '.claudeignore'), 'utf8');
+    expect(ci).toContain('secrets/');
+    expect(ci).not.toContain('.design/ui/a.tsx');
+    expect(ci).not.toContain('maude:sync-untrusted');
+  });
+});

package/plugins/design/dev-server/test/use-annotation-resize.test.ts

@@ -0,0 +1,200 @@
+// use-annotation-resize — FigJam resize-modifier math (pure `resizeStroke`).
+//
+// Covers the no-modifier baseline (must stay algebraically identical to the
+// pre-modifier corner math) plus Shift (aspect-lock / 45° snap), Alt
+// (scale-from-center / mirror-from-midpoint), and Shift+Alt combined, across
+// every resizable stroke kind. Pure function — no DOM render needed.
+
+import { describe, expect, test } from 'bun:test';
+
+import type {
+  ArrowStroke,
+  EllipseStroke,
+  PenStroke,
+  PolygonStroke,
+  RectStroke,
+  StickyStroke,
+} from '../annotations-layer.tsx';
+import { resizeStroke } from '../use-annotation-resize.tsx';
+
+const rect: RectStroke = {
+  id: 'r1',
+  tool: 'rect',
+  color: '#000',
+  width: 2,
+  x: 0,
+  y: 0,
+  w: 100,
+  h: 50,
+};
+
+describe('resizeStroke / rect — no modifiers (baseline)', () => {
+  test('se corner anchors the nw corner (back-compat)', () => {
+    expect(resizeStroke(rect, 'se', 120, 80)).toEqual({ x: 0, y: 0, w: 120, h: 80 });
+  });
+
+  test('nw corner anchors the se corner', () => {
+    expect(resizeStroke(rect, 'nw', -20, -10)).toEqual({ x: -20, y: -10, w: 120, h: 60 });
+  });
+
+  test('dragging past the anchor flips the box (min/max parity)', () => {
+    // se dragged to the left of x=0 → box lives to the left of the anchor.
+    expect(resizeStroke(rect, 'se', -40, 80)).toEqual({ x: -40, y: 0, w: 40, h: 80 });
+  });
+});
+
+describe('resizeStroke / rect — Shift (aspect lock)', () => {
+  test('keeps the 2:1 start ratio, dominant axis drives scale', () => {
+    // raw 120×200 → scale = max(1.2, 4) = 4 → 400×200 (ratio preserved).
+    expect(resizeStroke(rect, 'se', 120, 200, { shift: true, alt: false })).toEqual({
+      x: 0,
+      y: 0,
+      w: 400,
+      h: 200,
+    });
+  });
+});
+
+describe('resizeStroke / rect — Alt (scale from center)', () => {
+  test('center stays fixed; both sides grow symmetrically', () => {
+    const out = resizeStroke(rect, 'se', 120, 80, { shift: false, alt: true });
+    expect(out).toEqual({ x: -20, y: -30, w: 140, h: 110 });
+    // center invariant: (-20 + 140/2, -30 + 110/2) === (50, 25) === start center.
+    expect((out as RectStroke).x + (out as RectStroke).w / 2).toBe(50);
+    expect((out as RectStroke).y + (out as RectStroke).h / 2).toBe(25);
+  });
+});
+
+describe('resizeStroke / rect — Shift+Alt (ratio + center)', () => {
+  test('center-anchored and ratio-locked at once', () => {
+    expect(resizeStroke(rect, 'se', 120, 200, { shift: true, alt: true })).toEqual({
+      x: -300,
+      y: -150,
+      w: 700,
+      h: 350,
+    });
+  });
+});
+
+describe('resizeStroke / polygon — routes through the shared bbox math', () => {
+  const poly: PolygonStroke = {
+    id: 'p1',
+    tool: 'polygon',
+    shape: 'diamond',
+    color: '#000',
+    width: 2,
+    x: 0,
+    y: 0,
+    w: 100,
+    h: 50,
+  };
+  test('Shift aspect-locks the polygon like a rect', () => {
+    expect(resizeStroke(poly, 'se', 120, 200, { shift: true, alt: false })).toEqual({
+      x: 0,
+      y: 0,
+      w: 400,
+      h: 200,
+    });
+  });
+});
+
+describe('resizeStroke / sticky — always 1:1 square', () => {
+  const sticky: StickyStroke = {
+    id: 's1',
+    tool: 'sticky',
+    color: '#fce8a6',
+    x: 0,
+    y: 0,
+    w: 100,
+    h: 100,
+    text: '',
+    fontSize: 16,
+  };
+  test('no modifiers — larger axis becomes the side', () => {
+    expect(resizeStroke(sticky, 'se', 150, 120)).toEqual({ x: 0, y: 0, w: 150, h: 150 });
+  });
+  test('Alt — square grows from the center', () => {
+    expect(resizeStroke(sticky, 'se', 150, 120, { shift: false, alt: true })).toEqual({
+      x: -50,
+      y: -50,
+      w: 200,
+      h: 200,
+    });
+  });
+});
+
+describe('resizeStroke / ellipse — Alt keeps the center fixed', () => {
+  const ell: EllipseStroke = {
+    id: 'e1',
+    tool: 'ellipse',
+    color: '#000',
+    width: 2,
+    cx: 50,
+    cy: 50,
+    rx: 40,
+    ry: 20,
+  };
+  test('center invariant under symmetric scale', () => {
+    expect(resizeStroke(ell, 'se', 120, 90, { shift: false, alt: true })).toEqual({
+      cx: 50,
+      cy: 50,
+      rx: 70,
+      ry: 40,
+    });
+  });
+});
+
+describe('resizeStroke / arrow', () => {
+  const arrow: ArrowStroke = {
+    id: 'a1',
+    tool: 'arrow',
+    color: '#000',
+    width: 2,
+    x1: 0,
+    y1: 0,
+    x2: 100,
+    y2: 0,
+  };
+  test('no modifiers — only the dragged endpoint moves', () => {
+    expect(resizeStroke(arrow, 'ep2', 100, 40)).toEqual({ x2: 100, y2: 40 });
+  });
+  test('Alt — the midpoint is pinned; the far end mirrors', () => {
+    expect(resizeStroke(arrow, 'ep2', 100, 40, { shift: false, alt: true })).toEqual({
+      x2: 100,
+      y2: 40,
+      x1: 0,
+      y1: -40,
+    });
+  });
+  test('Shift — shaft angle snaps to the nearest 45°', () => {
+    const out = resizeStroke(arrow, 'ep2', 50, 60, { shift: true, alt: false }) as ArrowStroke;
+    // Pointer at atan2(60,50)≈49° snaps to 45° → dx === dy along the shaft.
+    expect(out.x2).toBeCloseTo(out.y2 ?? Number.NaN, 6);
+    expect(out.x2).toBeGreaterThan(0);
+  });
+});
+
+describe('resizeStroke / pen — point scaling', () => {
+  const pen: PenStroke = {
+    id: 'pen1',
+    tool: 'pen',
+    color: '#000',
+    width: 2,
+    points: [
+      [0, 0],
+      [100, 0],
+      [100, 100],
+      [0, 100],
+    ],
+  };
+  test('no modifiers — scales around the opposite corner', () => {
+    const out = resizeStroke(pen, 'se', 200, 200) as PenStroke;
+    expect(out.points[0]).toEqual([0, 0]);
+    expect(out.points[2]).toEqual([200, 200]);
+  });
+  test('Alt — scales around the bbox center', () => {
+    const out = resizeStroke(pen, 'se', 150, 150, { shift: false, alt: true }) as PenStroke;
+    expect(out.points[0]).toEqual([-50, -50]);
+    expect(out.points[2]).toEqual([150, 150]);
+  });
+});

package/plugins/design/dev-server/test/use-tool-mode.test.tsx

@@ -12,34 +12,60 @@ import {
 } from '../use-tool-mode.tsx';
 
 describe('use-tool-mode / static', () => {
-  test('DEFAULT_TOOLS exposes V/H/C + Phase 5.1 draw set B/R/O/A/E', () => {
+  test('DEFAULT_TOOLS exposes V/H/C + draw set B/R/N/A/T/E (Phase 24 single Shape tool)', () => {
     expect(DEFAULT_TOOLS.map((t) => t.id)).toEqual([
       'move',
       'hand',
       'comment',
       'pen',
-      'rect',
-      'ellipse',
+      'shape',
+      'sticky',
       'arrow',
+      'text',
       'eraser',
     ]);
-    expect(DEFAULT_TOOLS.map((t) => t.shortcut)).toEqual(['V', 'H', 'C', 'B', 'R', 'O', 'A', 'E']);
+    expect(DEFAULT_TOOLS.map((t) => t.shortcut)).toEqual([
+      'V',
+      'H',
+      'C',
+      'B',
+      'R',
+      'N',
+      'A',
+      'T',
+      'E',
+    ]);
   });
 
   test('DEFAULT_TOOLS is immutable (Object.freeze applied)', () => {
     expect(Object.isFrozen(DEFAULT_TOOLS)).toBe(true);
   });
 
-  test('default cursors per tool', () => {
+  test('cursors per tool (Phase 24 — ONE Kenney library for every tool + native fallback)', () => {
     const byId = Object.fromEntries(DEFAULT_TOOLS.map((t) => [t.id, t.cursor]));
-    expect(byId.move).toBe('default');
-    expect(byId.hand).toBe('grab');
-    expect(byId.comment).toBe('crosshair');
-    expect(byId.pen).toBe('crosshair');
-    expect(byId.rect).toBe('crosshair');
-    expect(byId.ellipse).toBe('crosshair');
-    expect(byId.arrow).toBe('crosshair');
-    expect(byId.eraser).toBe('cell');
+    // Phase 24 — EVERY tool (incl. move) ships a Kenney data-URI SVG cursor that
+    // falls back to the right native cursor if the image is rejected.
+    for (const id of [
+      'move',
+      'hand',
+      'comment',
+      'pen',
+      'shape',
+      'sticky',
+      'arrow',
+      'text',
+      'eraser',
+    ]) {
+      expect(byId[id]).toContain('url("data:image/svg+xml,');
+      expect(byId[id]).toContain('32'); // 32×32 cursor
+    }
+    // Native fallbacks are preserved after the custom URL.
+    expect(byId.move).toMatch(/, default$/);
+    expect(byId.hand).toMatch(/, grab$/);
+    expect(byId.text).toMatch(/, text$/);
+    expect(byId.eraser).toMatch(/, cell$/);
+    expect(byId.pen).toMatch(/, crosshair$/);
+    expect(byId.shape).toMatch(/, crosshair$/);
   });
 });
 

package/plugins/design/dev-server/tool-palette.tsx

@@ -14,10 +14,15 @@
 
 import { useEffect, useRef, useState } from 'react';
 
-import { IconChevronDown, IconPresentation, TOOL_ICONS } from './canvas-icons.tsx';
+import {
+  IconChevronDown,
+  IconPresentation,
+  SHAPE_KIND_ICONS,
+  TOOL_ICONS,
+} from './canvas-icons.tsx';
 import { useViewportControllerContext } from './canvas-lib.tsx';
 import { useAnnotationsVisibility } from './use-annotations-visibility.tsx';
-import { useToolMode } from './use-tool-mode.tsx';
+import { type ShapeKind, useToolMode } from './use-tool-mode.tsx';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Styles — pulled from menubar tokens (`.mb` family). Centered bottom toolbar,
@@ -35,13 +40,13 @@ const PALETTE_CSS = `
   transform: translateX(-50%);
   display: flex;
   align-items: stretch;
-  background: var(--u-bg-0, var(--bg-0, #ffffff));
-  border: 1px solid var(--u-fg-0, #1c1917);
+  background: var(--maude-chrome-bg-0, #ffffff);
+  border: 1px solid var(--maude-chrome-fg-0, #1c1917);
   border-radius: 8px;
-  box-shadow: 0 6px 24px color-mix(in oklab, var(--u-fg-0, #1c1917) 10%, transparent);
-  font-family: var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  box-shadow: 0 6px 24px var(--maude-chrome-shadow, color-mix(in oklab, #1c1917 10%, transparent));
+  font-family: var(--maude-chrome-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
   font-size: 12px;
-  color: var(--u-fg-0, var(--fg-0, #1a1a1a));
+  color: var(--maude-chrome-fg-0, #1a1a1a);
   z-index: 6;
   user-select: none;
   /* Intentionally NO overflow:hidden — the zoom popover (.dc-tp-popover) is
@@ -56,7 +61,7 @@ const PALETTE_CSS = `
 }
 .dc-tool-palette .dc-tp-sep {
   width: 1px;
-  background: var(--u-border-subtle, rgba(0,0,0,0.08));
+  background: var(--maude-chrome-border, rgba(0,0,0,0.08));
   margin: 6px 0;
 }
 .dc-tool-palette button {
@@ -70,14 +75,14 @@ const PALETTE_CSS = `
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: var(--fg-1, rgba(40,30,20,0.75));
+  color: var(--maude-chrome-fg-1, rgba(40,30,20,0.75));
   cursor: pointer;
   position: relative;
   transition: background-color 80ms linear, color 80ms linear;
 }
 .dc-tool-palette button:hover {
   background: color-mix(in oklab, var(--maude-hud-accent, #d63b1f) 8%, transparent);
-  color: var(--fg-0, #1a1a1a);
+  color: var(--maude-chrome-fg-0, #1a1a1a);
 }
 .dc-tool-palette button:focus-visible {
   outline: 2px solid var(--maude-hud-accent, #d63b1f);
@@ -117,7 +122,7 @@ const PALETTE_CSS = `
   height: 6px;
   background: var(--maude-hud-accent, #d63b1f);
   border-radius: 1px;
-  box-shadow: 0 0 0 1px var(--bg-0, #ffffff);
+  box-shadow: 0 0 0 1px var(--maude-chrome-bg-0, #ffffff);
   opacity: 0;
   transition: opacity 50ms linear 50ms;
   pointer-events: none;
@@ -132,7 +137,7 @@ const PALETTE_CSS = `
   min-width: 56px;
   padding: 0 8px;
   font-variant-numeric: tabular-nums;
-  font-family: var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-family: var(--maude-chrome-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
   font-size: 11px;
   letter-spacing: 0.04em;
   border-radius: 6px;
@@ -145,16 +150,16 @@ const PALETTE_CSS = `
   position: absolute;
   right: 4px;
   bottom: 44px;
-  background: var(--u-bg-0, var(--bg-0, #ffffff));
-  border: 1px solid var(--u-fg-0, #1c1917);
+  background: var(--maude-chrome-bg-0, #ffffff);
+  border: 1px solid var(--maude-chrome-fg-0, #1c1917);
   border-radius: 8px;
-  box-shadow: 0 6px 24px color-mix(in oklab, var(--u-fg-0, #1c1917) 10%, transparent);
+  box-shadow: 0 6px 24px var(--maude-chrome-shadow, color-mix(in oklab, #1c1917 10%, transparent));
   display: flex;
   flex-direction: column;
   padding: 4px;
   min-width: 160px;
   z-index: 7;
-  font-family: var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-family: var(--maude-chrome-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
 }
 .dc-tp-popover button {
   appearance: none;
@@ -171,12 +176,45 @@ const PALETTE_CSS = `
   gap: 16px;
   width: 100%;
 }
-.dc-tp-popover button:hover { background: rgba(0,0,0,0.04); }
+.dc-tp-popover button:hover { background: color-mix(in oklab, var(--maude-chrome-fg-0, #1c1917) 5%, transparent); }
 .dc-tp-popover .dc-tp-kbd {
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 11px;
   opacity: 0.55;
 }
+/* Phase 24 — Shape tool button + its kind popover. The wrapper is the popover's
+   positioning context so it anchors directly above the button. */
+.dc-tool-palette .dc-tp-shape {
+  position: relative;
+  display: inline-flex;
+}
+.dc-tool-palette .dc-tp-shape > button { position: relative; }
+.dc-tool-palette .dc-tp-shape-caret {
+  position: absolute;
+  right: 2px;
+  bottom: 1px;
+  display: inline-flex;
+  opacity: 0.5;
+  pointer-events: none;
+}
+.dc-tp-shape-popover {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 2px;
+  padding: 4px;
+  background: var(--maude-chrome-bg-0, #ffffff);
+  border: 1px solid var(--maude-chrome-fg-0, #1c1917);
+  border-radius: 8px;
+  box-shadow: 0 6px 24px var(--maude-chrome-shadow, color-mix(in oklab, #1c1917 10%, transparent));
+  z-index: 8;
+}
+.dc-tp-shape-popover button[aria-checked="true"] {
+  background: color-mix(in oklab, var(--maude-hud-accent, #d63b1f) 14%, transparent);
+  color: var(--maude-hud-accent, #d63b1f);
+}
 `.trim();
 
 function ensurePaletteStyles(): void {
@@ -189,29 +227,59 @@ function ensurePaletteStyles(): void {
 }
 
 const NAV_TOOLS = ['move', 'hand', 'comment'] as const;
-const DRAW_TOOLS = ['pen', 'rect', 'ellipse', 'arrow', 'eraser'] as const;
+// Phase 24 — the two rect/ellipse buttons collapse into one Shape tool (with a
+// kind popover); sticky/arrow/text/eraser keep their order.
+const DRAW_TOOLS = ['pen', 'shape', 'sticky', 'arrow', 'text', 'eraser'] as const;
+
+// Phase 24 — the Shape tool's primitive picker (popover order matches FigJam).
+const SHAPE_KINDS: ReadonlyArray<{ kind: ShapeKind; label: string }> = [
+  { kind: 'square', label: 'Square' },
+  { kind: 'rounded', label: 'Rounded square' },
+  { kind: 'circle', label: 'Circle' },
+  { kind: 'diamond', label: 'Diamond' },
+  { kind: 'triangle', label: 'Triangle' },
+  { kind: 'triangle-down', label: 'Triangle down' },
+];
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Component
 
 export function ToolPalette() {
   ensurePaletteStyles();
-  const { tool, setTool, tools, sticky, toggleSticky } = useToolMode();
+  const { tool, setTool, tools, sticky, toggleSticky, shapeKind, setShapeKind } = useToolMode();
   const controller = useViewportControllerContext();
   const visibilityCtx = useAnnotationsVisibility();
   const [mounted, setMounted] = useState(false);
   const [zoomOpen, setZoomOpen] = useState(false);
+  const [shapeOpen, setShapeOpen] = useState(false);
   const containerRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => setMounted(true), []);
   useEffect(() => {
-    if (!zoomOpen) return;
+    if (!zoomOpen && !shapeOpen) return;
     const onDown = (e: PointerEvent) => {
-      if (!containerRef.current?.contains(e.target as Node)) setZoomOpen(false);
+      if (!containerRef.current?.contains(e.target as Node)) {
+        setZoomOpen(false);
+        setShapeOpen(false);
+      }
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setZoomOpen(false);
+        setShapeOpen(false);
+      }
     };
     document.addEventListener('pointerdown', onDown, true);
-    return () => document.removeEventListener('pointerdown', onDown, true);
-  }, [zoomOpen]);
+    document.addEventListener('keydown', onKey, true);
+    return () => {
+      document.removeEventListener('pointerdown', onDown, true);
+      document.removeEventListener('keydown', onKey, true);
+    };
+  }, [zoomOpen, shapeOpen]);
+  // Close the shape popover whenever the tool changes away from Shape.
+  useEffect(() => {
+    if (tool !== 'shape') setShapeOpen(false);
+  }, [tool]);
 
   if (!mounted) return null;
 
@@ -246,6 +314,63 @@ export function ToolPalette() {
     );
   };
 
+  // Phase 24 — the single Shape tool. The button shows the CURRENT shape-kind
+  // glyph (so the toolbar reflects what you'll draw); first click arms the tool,
+  // clicking it again (or the caret) opens the 6-kind popover.
+  const renderShapeButton = () => {
+    const isShape = tool === 'shape';
+    const isSticky = sticky.locked && sticky.tool === 'shape';
+    const KindIcon = SHAPE_KIND_ICONS[shapeKind] ?? TOOL_ICONS.shape;
+    return (
+      <span key="shape" className="dc-tp-shape">
+        <button
+          type="button"
+          aria-label={`Shape (R) — ${shapeKind}, click again for shape types`}
+          aria-pressed={isShape}
+          aria-haspopup="menu"
+          aria-expanded={shapeOpen}
+          data-sticky={isSticky ? 'true' : undefined}
+          title="Shape (R) · double-click to lock"
+          onClick={() => {
+            if (!isShape) setTool('shape');
+            else setShapeOpen((o) => !o);
+          }}
+          onDoubleClick={() => toggleSticky('shape')}
+        >
+          {KindIcon ? <KindIcon /> : null}
+          <span className="dc-tp-shape-caret" aria-hidden="true">
+            <IconChevronDown size={9} />
+          </span>
+          {isSticky ? <span className="dc-tp-sticky-badge" aria-hidden="true" /> : null}
+        </button>
+        {shapeOpen ? (
+          <div className="dc-tp-shape-popover" role="menu" aria-label="Shape type">
+            {SHAPE_KINDS.map(({ kind, label }) => {
+              const Icon = SHAPE_KIND_ICONS[kind];
+              return (
+                <button
+                  key={kind}
+                  type="button"
+                  role="menuitemradio"
+                  aria-checked={shapeKind === kind}
+                  aria-label={label}
+                  title={label}
+                  onClick={() => {
+                    setShapeKind(kind);
+                    setTool('shape');
+                    setShapeOpen(false);
+                  }}
+                >
+                  {Icon ? <Icon /> : null}
+                </button>
+              );
+            })}
+          </div>
+        ) : null}
+      </span>
+    );
+  };
+
   return (
     <div ref={containerRef} className="dc-tool-palette" role="toolbar" aria-label="Canvas tools">
       <div className="dc-tp-group">
@@ -253,7 +378,13 @@ export function ToolPalette() {
       </div>
       <div className="dc-tp-sep" />
       <div className="dc-tp-group">
-        {drawList.map((t) => (t ? renderToolButton(t.id, t.label, t.shortcut) : null))}
+        {drawList.map((t) =>
+          t
+            ? t.id === 'shape'
+              ? renderShapeButton()
+              : renderToolButton(t.id, t.label, t.shortcut)
+            : null
+        )}
       </div>
       <div className="dc-tp-sep" />
       <div className="dc-tp-group">

package/plugins/design/dev-server/undo-hud.tsx

@@ -23,11 +23,11 @@ const HUD_CSS = `
   z-index: 7;
   pointer-events: none;
   padding: 6px 10px;
-  background: var(--bg-2, rgba(20, 20, 20, 0.85));
-  color: var(--fg-1, rgba(255, 255, 255, 0.85));
-  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
+  background: var(--maude-chrome-bg-2, rgba(20, 20, 20, 0.85));
+  color: var(--maude-chrome-fg-1, rgba(255, 255, 255, 0.85));
+  border: 1px solid var(--maude-chrome-border, rgba(255, 255, 255, 0.08));
   border-radius: 6px;
-  font: 11px var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font: 11px var(--maude-chrome-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
   letter-spacing: 0.02em;
   user-select: none;
   opacity: 0;