@1agh/maude 0.24.0 → 0.26.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/sync/index.ts

@@ -246,6 +246,19 @@ export function createSyncRuntime(
       return;
     }
 
+    // DDR-072 — loud boot banner when the project-level TSX opt-in is on against
+    // a NON-loopback hub. Broadening from hand-picked canvases to "all .tsx"
+    // also broadens the WebRTC/self-nav exfil residual (the sandbox contains
+    // execution but not that lane) to every synced canvas, so this must never be
+    // silent: a sneaky PR that flips `linkedHub.syncTsx` surfaces here on the
+    // next `serve`. Loopback hubs (local dev) skip it — no remote exfil concern.
+    if (linkedHub.syncTsx === true && !isLoopbackHubUrl(linkedHub.url)) {
+      const tsxCount = canvases.filter((c) => c.html.toLowerCase().endsWith('.tsx')).length;
+      console.warn(
+        `[sync] syncTsx=true — ${tsxCount} TSX canvas BODIES will sync to ${linkedHub.url} (project-level opt-in, DDR-072). The sandbox contains execution, but the WebRTC/self-nav exfil residual now applies to ALL synced canvases — only for hubs you operate or fully trust. Set a canvas .meta.json "syncable": false to exclude it.`
+      );
+    }
+
     statusStore =
       opts.statusStore ??
       createSyncStatusStore({
@@ -599,6 +612,12 @@ export async function scanCanvases(ctx: Context): Promise<CanvasScan> {
   // `.tsx` syncs — the per-canvas opt-in is inert without the sandbox, and
   // decoupling them would re-open the CRITICAL F1 RCE (DDR-060, DDR-054 §F1).
   const splitActive = !!ctx.canvasOrigin;
+  // DDR-072 — project-level TSX opt-in. When `linkedHub.syncTsx` is true, a
+  // `.tsx` with no explicit sidecar verdict defaults to syncable (the per-canvas
+  // sidecar still wins either way — see resolveSyncable). Coupled with the
+  // sandbox via `splitActive` exactly like the per-canvas opt-in, so the flag is
+  // inert without the F1 containment (DDR-060 Lock-2 invariant).
+  const projectSyncTsx = ctx.cfg.linkedHub?.syncTsx === true;
   for (const group of ctx.cfg.canvasGroups) {
     const groupAbs = path.join(ctx.paths.designRoot, group.path);
     if (!existsSync(groupAbs)) continue;
@@ -609,27 +628,37 @@ export async function scanCanvases(ctx: Context): Promise<CanvasScan> {
       ctx.paths.designRel,
       out,
       counter,
-      splitActive
+      splitActive,
+      projectSyncTsx
     );
   }
   return { canvases: out, tsxCount: counter.tsx };
 }
 
 /**
- * T3 (9.1-B) — per-canvas sync opt-in. A `.tsx` canvas is syncable only if its
- * sibling `<name>.meta.json` declares `"syncable": true`. The flag is set by a
- * human editing the sidecar; it is deliberately NOT in the untrusted
- * `/_api/canvas-meta` PATCH whitelist (api.ts), so a hostile canvas/hub cannot
- * flip its own body into the sync set. Missing sidecar / parse error → false.
+ * T3 (9.1-B) + DDR-072 — resolve whether a `.tsx` body is syncable.
+ *
+ * Tri-state precedence:
+ *  1. The sibling `<name>.meta.json` `"syncable"` boolean ALWAYS wins when
+ *     present (`true` opts in, `false` opts out) — set by a human editing the
+ *     sidecar; deliberately NOT in the untrusted `/_api/canvas-meta` PATCH
+ *     whitelist (api.ts), so a hostile canvas/hub cannot flip its own body into
+ *     or out of the sync set.
+ *  2. Otherwise fall back to the project-level `linkedHub.syncTsx` default.
+ *
+ * Missing sidecar / parse error → no explicit verdict → the project default.
  */
-function readSyncableFlag(bodyAbs: string): boolean {
+function resolveSyncable(bodyAbs: string, projectSyncTsx: boolean): boolean {
   const metaAbs = bodyAbs.replace(/\.(tsx|html)$/i, '.meta.json');
   try {
     const obj = JSON.parse(readFileSync(metaAbs, 'utf8'));
-    return obj && typeof obj === 'object' && obj.syncable === true;
+    if (obj && typeof obj === 'object' && typeof obj.syncable === 'boolean') {
+      return obj.syncable; // per-canvas verdict wins (true OR explicit false)
+    }
   } catch {
-    return false;
+    /* missing / unparseable sidecar → defer to the project default below */
   }
+  return projectSyncTsx;
 }
 
 async function walk(
@@ -639,7 +668,8 @@ async function walk(
   designRel: string,
   acc: CanvasDescriptor[],
   counter: { tsx: number },
-  splitActive: boolean
+  splitActive: boolean,
+  projectSyncTsx: boolean
 ): Promise<void> {
   let entries: import('node:fs').Dirent[];
   try {
@@ -652,16 +682,26 @@ async function walk(
     if (entry.isDirectory()) {
       // Skip plugin runtime dirs.
       if (entry.name.startsWith('_')) continue;
-      await walk(abs, designRoot, commentsDir, designRel, acc, counter, splitActive);
+      await walk(
+        abs,
+        designRoot,
+        commentsDir,
+        designRel,
+        acc,
+        counter,
+        splitActive,
+        projectSyncTsx
+      );
       continue;
     }
     const ext = path.extname(entry.name).toLowerCase();
-    // T3 (9.1-B) — a `.tsx` syncs ONLY when the sandbox is active AND the
-    // sidecar opts in (see readSyncableFlag + the splitActive coupling above).
-    // Otherwise tally it for 9.1-D's loud zero-syncable surface so the message
-    // can explain *why* it isn't syncing.
+    // T3 (9.1-B) + DDR-072 — a `.tsx` syncs ONLY when the sandbox is active AND
+    // it resolves to syncable (per-canvas sidecar verdict, else the project-level
+    // `linkedHub.syncTsx` default — see resolveSyncable + the splitActive
+    // coupling above). Otherwise tally it for 9.1-D's loud zero-syncable surface
+    // so the message can explain *why* it isn't syncing.
     if (ext === '.tsx') {
-      if (!(splitActive && readSyncableFlag(abs))) {
+      if (!(splitActive && resolveSyncable(abs, projectSyncTsx))) {
         counter.tsx += 1;
         continue;
       }
@@ -712,7 +752,7 @@ export function buildNoSyncablePayload(
 ): NoSyncablePayload {
   const reason =
     tsxCount > 0
-      ? `${tsxCount} TSX canvas(es) found but none are syncable — a TSX body syncs only when the canvas opts in (.meta.json "syncable": true). The canvas sandbox is on by default; MAUDE_CANVAS_ORIGIN_SPLIT=0 disables it (and TSX sync with it). See DDR-060.`
+      ? `${tsxCount} TSX canvas(es) found but none are syncable — a TSX body syncs when the canvas opts in (.meta.json "syncable": true) OR the project opts in all of them (.design/config.json linkedHub.syncTsx: true, DDR-072). The canvas sandbox is on by default; MAUDE_CANVAS_ORIGIN_SPLIT=0 disables it (and TSX sync with it). See DDR-060.`
       : `no canvases found under ${designRoot}.`;
   return {
     linked: true,
@@ -916,3 +956,19 @@ export function checkUrlScheme(url: string): string | null {
   }
   return null;
 }
+
+/**
+ * DDR-072 — true when the hub URL points at a loopback host (localhost,
+ * 127.0.0.1, ::1). Used to suppress the `syncTsx` boot banner for local dev
+ * hubs (no remote exfil concern). Unparseable URL → treated as non-loopback
+ * (fail loud / show the banner). Mirrors checkUrlScheme's loopback host set.
+ */
+export function isLoopbackHubUrl(url: string): boolean {
+  let host: string;
+  try {
+    host = new URL(url).hostname.toLowerCase();
+  } catch {
+    return false;
+  }
+  return host === 'localhost' || host === '127.0.0.1' || host === '::1' || host === '[::1]';
+}

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);
+  });
+});