@1agh/maude 0.24.0 → 0.25.0

package/plugins/design/dev-server/exporters/scope.ts

@@ -33,6 +33,17 @@ export type Target =
       file: string;
       /** True when `cssPath` is expected to match many elements; the adapter iterates. */
       multi?: boolean;
+      /**
+       * True when the adapter should widen `cssPath` to its closest
+       * `[data-dc-screen]` ancestor before capture — i.e. "export the artboard
+       * containing this element". `selection` scope sets this `false` so the
+       * raster/vector captures the element EXACTLY (the item-3 bug was every
+       * single-target export hard-widening). `artboard` scope sets it `true`
+       * only in the fallback where we have a descendant selector but no
+       * artboard id; when the id IS known we target `[data-dc-screen="<id>"]`
+       * directly and leave this `false`.
+       */
+      widen?: boolean;
     }
   | {
       kind: 'file-tree';
@@ -49,6 +60,21 @@ export interface ActiveJsonShape {
     | null;
 }
 
+/**
+ * Submit-time hints captured from the LIVE iframe (the export dialog snapshots
+ * the canvas selection + the artboard under the viewport centre and rides them
+ * on the export `options` bag). The resolver prefers these over `activeJson`
+ * because opening the dialog / clicking Export can drop the persisted
+ * `_active.json.selected`, and they survive the cross-origin bridge unchanged.
+ * See the export-pipeline-fixes plan Task 1 + the selection-passthrough DDR.
+ */
+export interface ExportScopeHints {
+  /** Live selection at submit time. `selector` wins over `activeJson.selected`. */
+  selection?: { selector?: string; file?: string } | null;
+  /** `data-dc-screen` id of the artboard to export for `scope=artboard`. */
+  artboardId?: string | null;
+}
+
 export interface ResolveScopeArgs {
   scope: Scope;
   activeJson: ActiveJsonShape;
@@ -56,6 +82,33 @@ export interface ResolveScopeArgs {
   designRoot: string;
   /** Absolute path to repo root. Required for `project-raw` to bound the walk. */
   repoRoot?: string;
+  /**
+   * The export `options` bag, threaded from `runExport`. Read additively so
+   * existing callers (and the pure unit tests) that omit it stay green.
+   */
+  options?: Record<string, unknown>;
+}
+
+/** Narrow the free-form options bag to the selection/artboard hints we read. */
+function readHints(options: Record<string, unknown> | undefined): ExportScopeHints {
+  if (!options || typeof options !== 'object') return {};
+  const sel = options.selection;
+  const selection =
+    sel && typeof sel === 'object'
+      ? {
+          selector:
+            typeof (sel as Record<string, unknown>).selector === 'string'
+              ? ((sel as Record<string, unknown>).selector as string)
+              : undefined,
+          file:
+            typeof (sel as Record<string, unknown>).file === 'string'
+              ? ((sel as Record<string, unknown>).file as string)
+              : undefined,
+        }
+      : null;
+  const artboardId =
+    typeof options.artboardId === 'string' && options.artboardId ? options.artboardId : null;
+  return { selection, artboardId };
 }
 
 const RAW_EXCLUDES = new Set([
@@ -88,6 +141,16 @@ function slugify(file: string, designRel: string): string {
     .toLowerCase();
 }
 
+/**
+ * Escape a value for use inside a double-quoted CSS attribute selector
+ * (`[data-dc-screen="<here>"]`). Artboard ids are normally plain slugs, but a
+ * stray `"` or `\` would break out of the selector — escape defensively so the
+ * id is matched literally.
+ */
+function cssAttrEscape(value: string): string {
+  return value.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+}
+
 interface SelectionShape {
   file?: string;
   selector?: string;
@@ -147,37 +210,70 @@ export async function resolveScope(args: ResolveScopeArgs): Promise<Target[]> {
   if (!activeFile) return [];
   const slug = slugify(activeFile, designRel);
   const sel = firstSelection(activeJson.selected);
+  const hints = readHints(args.options);
 
   if (scope === 'selection') {
-    const selector = sel?.selector ?? sel?.cssPath;
-    if (!sel || !selector) {
-      // Plan: "Falls back to artboard if no selection." Recurse with the
-      // artboard scope so the fallback semantics live in one place.
+    // Prefer the live submit-time snapshot over the persisted `_active.json`
+    // selection — the dialog can clear the canvas selection before the bridged
+    // export runs, leaving `activeJson.selected` null (item 3 root cause #1).
+    const selector = hints.selection?.selector ?? sel?.selector ?? sel?.cssPath;
+    if (!selector) {
+      // No selection anywhere → fall back to artboard scope so the export
+      // still produces something useful. Single fallback site.
       return resolveScope({ ...args, scope: 'artboard' });
     }
-    const file = sel.file ?? activeFile;
+    const file = hints.selection?.file ?? sel?.file ?? activeFile;
     return [
       {
         kind: 'element',
         cssPath: selector,
         canvasSlug: slugify(file, designRel),
         file,
+        // Capture the element EXACTLY — do NOT widen to the enclosing artboard
+        // (item 3 root cause #2: every single-target export hard-widened).
+        widen: false,
       },
     ];
   }
 
   if (scope === 'artboard') {
-    // The adapter handles "closest [data-dc-screen] ancestor" at render time
-    // via Playwright. Server-side we only know the selection's selector — we
-    // pass it through with a marker and the adapter widens to the artboard.
-    // If no selection, fall back to "first artboard on the active canvas".
-    const baseSelector = sel?.selector ?? sel?.cssPath ?? '[data-dc-screen]:first-of-type';
+    // Preferred path: the dialog captured which artboard is active (the
+    // selection's host, or the artboard under the viewport centre). Target it
+    // by id so EVERY format (PDF included — its shim doesn't widen) renders
+    // the right artboard, not `:first-of-type` (item 5 root cause).
+    if (hints.artboardId) {
+      return [
+        {
+          kind: 'element',
+          cssPath: `[data-dc-screen="${cssAttrEscape(hints.artboardId)}"]`,
+          canvasSlug: slug,
+          file: activeFile,
+          widen: false,
+        },
+      ];
+    }
+    // Fallback: we only have a descendant selector → pass it through and let
+    // the adapter widen to the closest `[data-dc-screen]` ancestor.
+    const descendant = hints.selection?.selector ?? sel?.selector ?? sel?.cssPath;
+    if (descendant) {
+      return [
+        {
+          kind: 'element',
+          cssPath: descendant,
+          canvasSlug: slug,
+          file: activeFile,
+          widen: true,
+        },
+      ];
+    }
+    // Last resort — first artboard on the active canvas.
     return [
       {
         kind: 'element',
-        cssPath: baseSelector,
+        cssPath: '[data-dc-screen]:first-of-type',
         canvasSlug: slug,
         file: activeFile,
+        widen: false,
       },
     ];
   }

package/plugins/design/dev-server/exporters/svg.ts

@@ -44,7 +44,10 @@ async function captureSvg(
   if (target.multi) {
     args.push('--multi', '1', '--out-dir', outDir);
   } else {
-    args.push('--widen-to-artboard', '1', '--out', path.join(outDir, `${target.canvasSlug}.svg`));
+    // Widen to the enclosing artboard only when scope.ts requested it; a
+    // `selection` target captures the element exactly.
+    if (target.widen) args.push('--widen-to-artboard', '1');
+    args.push('--out', path.join(outDir, `${target.canvasSlug}.svg`));
   }
 
   // Run via `node` so the shim's `import 'playwright'` resolves against

package/plugins/design/dev-server/http.ts

@@ -153,6 +153,26 @@ interface CanvasCacheEntry {
 }
 const canvasCache = new Map<string, CanvasCacheEntry>();
 
+// Per-process boot id, folded into every canvas ETag. The canvas transpile
+// BUNDLES the shared chrome (canvas-lib → tool-palette / annotations-layer /
+// use-tool-mode / canvas-cursors / …), but the freshness sig + base etag only
+// track the canvas file + its inlined CSS — NOT those chrome sources. So a
+// chrome edit left the etag unchanged → the browser's `If-None-Match` matched →
+// 304 → the user kept getting the STALE transpile even after a server restart
+// (the recurring "my cursor / chrome change didn't show up" bug). Folding the
+// boot id in means a restart — the expected workflow after a dev-server source
+// edit (see CLAUDE.md) — changes every canvas etag, so a normal reload re-fetches
+// fresh chrome. (DDR-067.)
+const RUNTIME_BOOT_ID = `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 8)}`;
+
+// Bumped by the chrome source watchers (below) on every canvas-lib / dev-server
+// `.tsx`/`.ts` edit. Folded into the canvas ETag so a LIVE chrome edit (no
+// restart) also changes the etag — otherwise clearing `canvasCache` re-transpiles
+// fresh on the server, but the unchanged canvas SOURCE yields the same
+// `result.etag`, the browser's `If-None-Match` matches → 304 → the user still
+// gets the stale bundle even after the HMR hard-reload. (DDR-067.)
+let CHROME_EPOCH = 0;
+
 /** Relative `.css` import specifiers in a canvas source → absolute paths (the
  *  files Bun.build inlines). Bare / virtual specifiers (`@maude/…`, npm) are
  *  skipped — only on-disk relative CSS affects the inlined output. Resolved
@@ -228,7 +248,10 @@ async function serveCanvasTsx(
     // may have added or removed a `.css` import.
     cached = {
       sig: canvasFreshnessSig(absPath, cssDeps),
-      etag: result.etag,
+      // Fold in the boot id (restart) + chrome epoch (live edit) so a chrome
+      // change busts the browser's cached transpile even when the canvas source
+      // (hence result.etag) is unchanged. See RUNTIME_BOOT_ID / CHROME_EPOCH.
+      etag: `${result.etag}-${RUNTIME_BOOT_ID}-${CHROME_EPOCH}`,
       js: result.js,
       cssDeps,
     };
@@ -309,6 +332,7 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
   ctx.bus.on('fs:any', (rel: string) => {
     if (rel.startsWith('_lib/')) {
       canvasCache.clear();
+      CHROME_EPOCH++;
     }
   });
 
@@ -316,6 +340,7 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
   try {
     libWatcher = watch(canvasLibPath(), () => {
       canvasCache.clear();
+      CHROME_EPOCH++;
       ctx.bus.emit('fs:any', '_lib/canvas-lib.tsx');
     });
   } catch (err) {
@@ -327,21 +352,27 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
   void libWatcher;
 
   // G7v2 — canvas-lib.tsx transitively imports many dev-server siblings
-  // (canvas-shell, contextual-toolbar, equal-spacing-handles, ...). Editing
-  // any of them invalidates the bundled canvas output. Without watching them
-  // the mtime-keyed `canvasCache` keeps serving the stale bundle and the
-  // user sees pre-edit behaviour even after a hard iframe reload.
+  // (canvas-shell, contextual-toolbar, equal-spacing-handles, tool-palette,
+  // use-tool-mode, ...). Editing any of them invalidates the bundled canvas
+  // output. Without watching them the mtime-keyed `canvasCache` keeps serving
+  // the stale bundle and the user sees pre-edit behaviour even after a hard
+  // iframe reload.
   //
-  // Recursive watch over DEV_SERVER_ROOT, filtered to .tsx — server-only .ts
-  // (api / http / context / etc.) doesn't reach the canvas. Test files
-  // (`test/`) and built output (`dist/`, `client/`) also skipped.
+  // Recursive watch over DEV_SERVER_ROOT, filtered to .tsx AND .ts: the chrome
+  // graph includes plain `.ts` modules that DO reach the canvas
+  // (`canvas-cursors.ts`, `canvas-arrowheads.ts`) — the prior `.tsx`-only filter
+  // skipped them, so cursor edits never busted the cache (the recurring stale-
+  // cursor bug, DDR-067). Server-only `.ts` (api / http / context) also clears
+  // here, which is harmless (a needless rebuild, not a stale serve). Test files
+  // (`test/`), built output (`dist/`, `client/`), and node_modules are skipped.
   let devSrcWatcher: ReturnType<typeof watch> | null = null;
   try {
     devSrcWatcher = watch(DEV_SERVER_ROOT, { recursive: true }, (_evt, filename) => {
       if (!filename) return;
-      if (!filename.endsWith('.tsx')) return;
+      if (!filename.endsWith('.tsx') && !filename.endsWith('.ts')) return;
       if (filename.startsWith('test/') || filename.startsWith('test\\')) return;
       if (filename.startsWith('dist/') || filename.startsWith('client/')) return;
+      if (filename.includes('node_modules')) return;
       canvasCache.clear();
       ctx.bus.emit('fs:any', `_lib/${filename}`);
     });

package/plugins/design/dev-server/input-router.tsx

@@ -68,6 +68,11 @@ export type Tool =
   | 'hand'
   | 'comment'
   | 'pen'
+  // Phase 24 — `shape` is the single active draw tool that produces rect /
+  // ellipse / polygon strokes (the kind is chosen via the palette popover).
+  // `rect` / `ellipse` stay in the union as the stroke discriminants they
+  // always were, but are no longer directly selectable active tools.
+  | 'shape'
   | 'rect'
   | 'ellipse'
   | 'arrow'
@@ -77,6 +82,7 @@ export type Tool =
 
 const ANNOTATION_TOOLS = new Set<Tool>([
   'pen',
+  'shape',
   'rect',
   'ellipse',
   'arrow',
@@ -161,8 +167,9 @@ export function classify(input: ClassifyInput): RouterAction {
     if (k === 'h') return { kind: 'tool', tool: 'hand' };
     if (k === 'c') return { kind: 'tool', tool: 'comment' };
     if (k === 'b') return { kind: 'tool', tool: 'pen' };
-    if (k === 'r') return { kind: 'tool', tool: 'rect' };
-    if (k === 'o') return { kind: 'tool', tool: 'ellipse' };
+    // Phase 24 — R (and legacy O) both arm the single Shape tool; the specific
+    // primitive is picked from the palette's shape-kind popover.
+    if (k === 'r' || k === 'o') return { kind: 'tool', tool: 'shape' };
     if (k === 'a') return { kind: 'tool', tool: 'arrow' };
     // Phase 21 — N = sticky Note ('S' is taken by the shell Design-system view
     // + Shift-marquee); T = standalone Text. Both are bare letters the shell

package/plugins/design/dev-server/test/annotations-draw-modifiers.test.ts

@@ -0,0 +1,206 @@
+// annotations-layer — draw-time resize modifiers (constrainDrawBox +
+// applyDrawModifiers). FigJam parity: Shift = 1:1, Alt = from-center, applied
+// while CREATING a shape (not just resizing an existing one). Pure functions.
+
+import { describe, expect, test } from 'bun:test';
+
+import {
+  type ArrowStroke,
+  type EllipseStroke,
+  type PenStroke,
+  type PolygonStroke,
+  type RectStroke,
+  type StickyStroke,
+  applyDrawModifiers,
+  constrainDrawBox,
+} from '../annotations-layer.tsx';
+
+const NONE = { shift: false, alt: false };
+
+describe('constrainDrawBox', () => {
+  test('no modifiers — corner drag from the anchor (back-compat)', () => {
+    expect(constrainDrawBox(10, 20, 110, 70, NONE)).toEqual({ x: 10, y: 20, w: 100, h: 50 });
+  });
+
+  test('Shift — locks to a square via the dominant axis, keeps sign', () => {
+    expect(constrainDrawBox(0, 0, 120, 200, { shift: true, alt: false })).toEqual({
+      x: 0,
+      y: 0,
+      w: 200,
+      h: 200,
+    });
+    expect(constrainDrawBox(0, 0, -120, -200, { shift: true, alt: false })).toEqual({
+      x: 0,
+      y: 0,
+      w: -200,
+      h: -200,
+    });
+  });
+
+  test('Alt — grows from the anchor as center', () => {
+    const b = constrainDrawBox(50, 50, 120, 80, { shift: false, alt: true });
+    expect(b).toEqual({ x: -20, y: 20, w: 140, h: 60 });
+    expect(b.x + b.w / 2).toBe(50); // center invariant
+    expect(b.y + b.h / 2).toBe(50);
+  });
+
+  test('Shift+Alt — centered square', () => {
+    expect(constrainDrawBox(0, 0, 120, 200, { shift: true, alt: true })).toEqual({
+      x: -200,
+      y: -200,
+      w: 400,
+      h: 400,
+    });
+  });
+});
+
+describe('applyDrawModifiers / rect + polygon', () => {
+  const rect: RectStroke = {
+    id: 'r',
+    tool: 'rect',
+    color: '#000',
+    width: 2,
+    x: 0,
+    y: 0,
+    w: 0,
+    h: 0,
+  };
+  const poly: PolygonStroke = {
+    id: 'p',
+    tool: 'polygon',
+    shape: 'triangle',
+    color: '#000',
+    width: 2,
+    x: 0,
+    y: 0,
+    w: 0,
+    h: 0,
+  };
+  test('rect no-mod corner drag', () => {
+    expect(applyDrawModifiers(rect, { x: 0, y: 0 }, 100, 50, NONE)).toMatchObject({
+      x: 0,
+      y: 0,
+      w: 100,
+      h: 50,
+    });
+  });
+  test('rect Shift → square', () => {
+    expect(
+      applyDrawModifiers(rect, { x: 0, y: 0 }, 100, 50, { shift: true, alt: false })
+    ).toMatchObject({ w: 100, h: 100 });
+  });
+  test('polygon Alt → centered, preserves shape discriminant', () => {
+    const out = applyDrawModifiers(poly, { x: 50, y: 50 }, 120, 80, {
+      shift: false,
+      alt: true,
+    }) as PolygonStroke;
+    expect(out).toMatchObject({ x: -20, y: 20, w: 140, h: 60, shape: 'triangle' });
+  });
+});
+
+describe('applyDrawModifiers / ellipse', () => {
+  const ell: EllipseStroke = {
+    id: 'e',
+    tool: 'ellipse',
+    color: '#000',
+    width: 2,
+    cx: 0,
+    cy: 0,
+    rx: 0,
+    ry: 0,
+  };
+  test('no-mod — corner drag (bbox 0..100 × 0..50)', () => {
+    expect(applyDrawModifiers(ell, { x: 0, y: 0 }, 100, 50, NONE)).toMatchObject({
+      cx: 50,
+      cy: 25,
+      rx: 50,
+      ry: 25,
+    });
+  });
+  test('Alt — centered on the anchor', () => {
+    expect(
+      applyDrawModifiers(ell, { x: 50, y: 50 }, 120, 80, { shift: false, alt: true })
+    ).toMatchObject({ cx: 50, cy: 50, rx: 70, ry: 30 });
+  });
+  test('Shift — circle (rx === ry)', () => {
+    const out = applyDrawModifiers(ell, { x: 0, y: 0 }, 100, 40, {
+      shift: true,
+      alt: false,
+    }) as EllipseStroke;
+    expect(out.rx).toBe(out.ry);
+  });
+});
+
+describe('applyDrawModifiers / sticky — always square', () => {
+  const sticky: StickyStroke = {
+    id: 's',
+    tool: 'sticky',
+    color: '#fce8a6',
+    x: 0,
+    y: 0,
+    w: 0,
+    h: 0,
+    text: '',
+    fontSize: 16,
+  };
+  test('no-mod still square (larger axis)', () => {
+    expect(applyDrawModifiers(sticky, { x: 0, y: 0 }, 150, 120, NONE)).toMatchObject({
+      w: 150,
+      h: 150,
+    });
+  });
+  test('Alt — centered square', () => {
+    expect(
+      applyDrawModifiers(sticky, { x: 0, y: 0 }, 150, 120, { shift: false, alt: true })
+    ).toMatchObject({ x: -150, y: -150, w: 300, h: 300 });
+  });
+});
+
+describe('applyDrawModifiers / arrow', () => {
+  const arrow: ArrowStroke = {
+    id: 'a',
+    tool: 'arrow',
+    color: '#000',
+    width: 2,
+    x1: 0,
+    y1: 0,
+    x2: 0,
+    y2: 0,
+  };
+  test('no-mod — start fixed at anchor, end follows cursor', () => {
+    expect(applyDrawModifiers(arrow, { x: 0, y: 0 }, 100, 40, NONE)).toMatchObject({
+      x1: 0,
+      y1: 0,
+      x2: 100,
+      y2: 40,
+    });
+  });
+  test('Alt — anchor is the midpoint, start mirrors the end', () => {
+    expect(
+      applyDrawModifiers(arrow, { x: 0, y: 0 }, 100, 40, { shift: false, alt: true })
+    ).toMatchObject({ x1: -100, y1: -40, x2: 100, y2: 40 });
+  });
+  test('Shift — end snaps to a 45° shaft', () => {
+    const out = applyDrawModifiers(arrow, { x: 0, y: 0 }, 50, 60, {
+      shift: true,
+      alt: false,
+    }) as ArrowStroke;
+    expect(out.x2).toBeCloseTo(out.y2, 6);
+  });
+});
+
+describe('applyDrawModifiers / pen — pass-through', () => {
+  const pen: PenStroke = {
+    id: 'pen',
+    tool: 'pen',
+    color: '#000',
+    width: 2,
+    points: [
+      [0, 0],
+      [5, 5],
+    ],
+  };
+  test('pen is returned unchanged (no box constraint)', () => {
+    expect(applyDrawModifiers(pen, { x: 0, y: 0 }, 99, 99, { shift: true, alt: true })).toBe(pen);
+  });
+});

package/plugins/design/dev-server/test/annotations-layer.test.ts

@@ -13,6 +13,7 @@ import {
   type ArrowStroke,
   type EllipseStroke,
   type PenStroke,
+  type PolygonStroke,
   type RectStroke,
   STICKY_PALETTE,
   type StickyStroke,
@@ -20,6 +21,8 @@ import {
   type TextStroke,
   arrowHeadPoints,
   penPathD,
+  polygonPoints,
+  polygonVertices,
   rid,
   strokeBBox,
   strokeHitTest,
@@ -498,9 +501,9 @@ describe('annotations-layer / Phase 21 sticky serialization', () => {
     expect(svg).toContain('>approve copy?</text>');
   });
 
-  test('sticky default color is the yellow paper tint (slot 0)', () => {
-    expect(STICKY_PALETTE[0]).toBe('#ffe27a');
-    expect(STICKY_PALETTE).toHaveLength(6);
+  test('sticky default color is the muted yellow paper tint (slot 0); 10 muted tints (Phase 24)', () => {
+    expect(STICKY_PALETTE[0]).toBe('#fce8a6');
+    expect(STICKY_PALETTE).toHaveLength(10);
   });
 
   test('sticky body text is HTML-escaped (no tag injection)', () => {
@@ -692,3 +695,80 @@ describe('annotations-layer / Phase 21 sticky + standalone-text geometry', () =>
     expect(strokeHitTest(anchored, 2, 2, 4)).toBe(false);
   });
 });
+
+describe('annotations-layer / Phase 24 polygon geometry', () => {
+  test('polygonVertices span the full bbox for every shape', () => {
+    for (const shape of ['diamond', 'triangle', 'triangle-down'] as const) {
+      const pts = polygonVertices(shape, 10, 20, 80, 60);
+      const xs = pts.map((p) => p[0]);
+      const ys = pts.map((p) => p[1]);
+      expect(Math.min(...xs)).toBeCloseTo(10, 4);
+      expect(Math.max(...xs)).toBeCloseTo(90, 4);
+      expect(Math.min(...ys)).toBeCloseTo(20, 4);
+      expect(Math.max(...ys)).toBeCloseTo(80, 4);
+    }
+  });
+
+  test('diamond has 4 vertices; triangles have 3', () => {
+    expect(polygonVertices('diamond', 0, 0, 10, 10)).toHaveLength(4);
+    expect(polygonVertices('triangle', 0, 0, 10, 10)).toHaveLength(3);
+    expect(polygonVertices('triangle-down', 0, 0, 10, 10)).toHaveLength(3);
+  });
+
+  test('polygonPoints serializes vertices as an SVG points string', () => {
+    expect(polygonPoints('diamond', 0, 0, 10, 10)).toBe('5,0 10,5 5,10 0,5');
+  });
+
+  test('polygon serializes as <polygon data-tool="polygon" data-shape=...>', () => {
+    const p: PolygonStroke = {
+      id: 'pg',
+      tool: 'polygon',
+      shape: 'triangle',
+      color: '#e5484d',
+      width: 2,
+      x: 0,
+      y: 0,
+      w: 40,
+      h: 40,
+    };
+    const svg = strokesToSvg([p]);
+    expect(svg).toContain('data-tool="polygon"');
+    expect(svg).toContain('data-shape="triangle"');
+    expect(svg).toContain('points="20,0 40,40 0,40"');
+  });
+
+  test('polygon bbox is its normalized extent', () => {
+    const p: PolygonStroke = {
+      id: 'pg',
+      tool: 'polygon',
+      shape: 'diamond',
+      color: '#000',
+      width: 2,
+      x: 100,
+      y: 100,
+      w: -40,
+      h: -30,
+    };
+    expect(strokeBBox(p)).toEqual({ x: 60, y: 70, w: 40, h: 30 });
+  });
+
+  test('filled diamond hit-tests inside; stroke-only hits the edge not the centre', () => {
+    const filled: PolygonStroke = {
+      id: 'd',
+      tool: 'polygon',
+      shape: 'diamond',
+      color: '#000',
+      width: 2,
+      x: 0,
+      y: 0,
+      w: 100,
+      h: 100,
+      fill: '#eee',
+    };
+    expect(strokeHitTest(filled, 50, 50, 4)).toBe(true); // centre, filled
+    expect(strokeHitTest(filled, 5, 5, 4)).toBe(false); // outside the diamond (in a bbox corner)
+    const outline: PolygonStroke = { ...filled, fill: null };
+    expect(strokeHitTest(outline, 50, 50, 4)).toBe(false); // centre, not filled
+    expect(strokeHitTest(outline, 25, 25, 4)).toBe(true); // on the NW edge midpoint line
+  });
+});