@1agh/maude 0.24.0 → 0.25.0

package/plugins/design/dev-server/test/sanitize-annotation-svg.test.ts

@@ -97,4 +97,36 @@ describe('sanitizeAnnotationSvg — A3', () => {
     expect(out.toLowerCase()).not.toContain('<set');
     expect(out.toLowerCase()).not.toContain('<animate');
   });
+
+  // Phase 24 (DDR-067 security review) — a handler glued onto the previous
+  // attribute's closing quote with NO separating whitespace is a distinct
+  // attribute to HTML/SVG parsers; the old `\s`-anchored denylist missed it.
+  test('strips a quote-glued on*= handler (no separating whitespace)', () => {
+    const out = sanitizeAnnotationSvg(
+      '<svg xmlns="http://www.w3.org/2000/svg" data-mdcc-annotations="1">' +
+        '<circle cx="1" cy="1" r="2"onload="alert(document.cookie)"/>' +
+        '<rect x="0" y="0" width="9" height="9"onclick=\'evil()\'/></svg>'
+    );
+    // (a bare /on\w+=/ would false-match `data-mdcc-annotations="1"` — target
+    // the actual handler names instead)
+    expect(out).not.toMatch(/\bon(?:load|click|error|mouse\w+|focus)\s*=/i);
+    expect(out).not.toContain('alert(document.cookie)');
+    expect(out).not.toContain('evil()');
+    // The legit element + its real attributes survive intact.
+    expect(out).toContain('<circle');
+    expect(out).toContain('r="2"');
+    expect(out).toContain('<rect');
+    expect(out).toContain('width="9"');
+  });
+
+  // Phase 24 — the new shape/arrowhead vocabulary survives byte-intact.
+  test('keeps Phase 24 <polygon>/<circle> + data-* attrs byte-intact', () => {
+    const phase24 =
+      '<svg xmlns="http://www.w3.org/2000/svg" data-mdcc-annotations="1">' +
+      '<polygon data-id="pg" data-tool="polygon" stroke="#222" stroke-width="2" fill="none" data-shape="diamond" points="20,0 40,20 20,40 0,20"/>' +
+      '<g data-id="a" data-tool="arrow" stroke="#111" stroke-width="2" fill="none" data-start-head="circle" data-line-type="curved"><path d="M0 0 Q10 10 20 0"/><circle cx="20" cy="0" r="6" fill="#111"/></g>' +
+      '<g data-id="st" data-tool="sticky" data-r="8" data-fs="16" fill="#fce8a6" data-bold="1" data-align="center"><rect x="0" y="0" width="200" height="200" rx="8" ry="8"/><text data-sticky-body="1" x="12" y="12" font-size="16" fill="#1a1a1a" dominant-baseline="hanging">x</text></g>' +
+      '</svg>';
+    expect(sanitizeAnnotationSvg(phase24)).toBe(phase24);
+  });
 });

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,14 +12,13 @@ import {
 } from '../use-tool-mode.tsx';
 
 describe('use-tool-mode / static', () => {
-  test('DEFAULT_TOOLS exposes V/H/C + draw set B/R/O/N/A/T/E (Phase 21 sticky+text)', () => {
+  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',
@@ -31,7 +30,6 @@ describe('use-tool-mode / static', () => {
       'C',
       'B',
       'R',
-      'O',
       'N',
       'A',
       'T',
@@ -43,17 +41,16 @@ describe('use-tool-mode / static', () => {
     expect(Object.isFrozen(DEFAULT_TOOLS)).toBe(true);
   });
 
-  test('default cursors per tool (Phase 21 — custom SVG cursors + native fallback)', () => {
+  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]));
-    // Move keeps the system arrow; every other tool ships a data-URI SVG cursor
-    // that falls back to the right native cursor if the image is rejected.
-    expect(byId.move).toBe('default');
+    // 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',
-      'rect',
-      'ellipse',
+      'shape',
       'sticky',
       'arrow',
       'text',
@@ -63,11 +60,12 @@ describe('use-tool-mode / static', () => {
       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.rect).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,
@@ -177,6 +182,39 @@ const PALETTE_CSS = `
   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,31 +227,59 @@ function ensurePaletteStyles(): void {
 }
 
 const NAV_TOOLS = ['move', 'hand', 'comment'] as const;
-// Phase 21 — sticky clusters with the paper primitives (after ellipse); text
-// sits at the constructive end before the destructive eraser, which stays last.
-const DRAW_TOOLS = ['pen', 'rect', 'ellipse', 'sticky', 'arrow', 'text', '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;
 
@@ -248,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">
@@ -255,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">