@1agh/maude 0.45.2 → 0.47.0

package/apps/studio/test/print-units.test.ts

@@ -0,0 +1,173 @@
+// feature-2-print-artboards T1 — print/units.ts unit tests + the single-source
+// lint guard (no `25.4` outside this module — see the plan's T1 gotcha).
+
+import { describe, expect, test } from 'bun:test';
+import { readdirSync, readFileSync, statSync } from 'node:fs';
+import { join, relative } from 'node:path';
+
+import {
+  CSS_DPI,
+  defaultBleedMm,
+  getPaperPreset,
+  MM_PER_INCH,
+  mmToPt,
+  mmToPx,
+  PAPER_PRESETS,
+  pxToMm,
+  pxToPt,
+  resolvePrintArtboard,
+  trimSizeMm,
+} from '../print/units.ts';
+
+describe('print/units — conversions', () => {
+  test('mmToPx / pxToMm are inverses at 96dpi', () => {
+    expect(mmToPx(MM_PER_INCH)).toBeCloseTo(CSS_DPI, 10);
+    expect(pxToMm(CSS_DPI)).toBeCloseTo(MM_PER_INCH, 10);
+    expect(pxToMm(mmToPx(37))).toBeCloseTo(37, 10);
+  });
+
+  test('mmToPt: 25.4mm === 72pt (1 inch)', () => {
+    expect(mmToPt(MM_PER_INCH)).toBeCloseTo(72, 10);
+  });
+
+  test('pxToPt: 96px @96dpi === 72pt (1 inch)', () => {
+    expect(pxToPt(96)).toBeCloseTo(72, 10);
+  });
+});
+
+describe('print/units — PAPER_PRESETS', () => {
+  test('every ISO A-series preset id resolves', () => {
+    for (const id of ['a6', 'a5', 'a4', 'a3', 'a2', 'a1', 'a0']) {
+      expect(getPaperPreset(id)).toBeDefined();
+    }
+  });
+
+  test('A4 is 210×297mm portrait', () => {
+    const a4 = getPaperPreset('a4');
+    expect(a4?.width).toBe(210);
+    expect(a4?.height).toBe(297);
+    expect(a4?.unit).toBe('mm');
+  });
+
+  test('Letter is a US in-unit preset', () => {
+    const letter = getPaperPreset('letter');
+    expect(letter?.unit).toBe('in');
+    expect(letter?.width).toBe(8.5);
+    expect(letter?.height).toBe(11);
+  });
+
+  test('unknown id is undefined', () => {
+    expect(getPaperPreset('nope')).toBeUndefined();
+  });
+
+  test('no duplicate ids', () => {
+    const ids = PAPER_PRESETS.map((p) => p.id);
+    expect(new Set(ids).size).toBe(ids.length);
+  });
+});
+
+describe('print/units — orientation', () => {
+  test('landscape swaps width/height', () => {
+    const a4 = getPaperPreset('a4');
+    expect(a4).toBeDefined();
+    const portrait = trimSizeMm(a4 as NonNullable<typeof a4>, 'portrait');
+    const landscape = trimSizeMm(a4 as NonNullable<typeof a4>, 'landscape');
+    expect(portrait.widthMm).toBe(210);
+    expect(portrait.heightMm).toBe(297);
+    expect(landscape.widthMm).toBe(297);
+    expect(landscape.heightMm).toBe(210);
+  });
+});
+
+describe('print/units — default bleed', () => {
+  test('mm-unit presets default to 3mm bleed', () => {
+    const a4 = getPaperPreset('a4');
+    expect(a4).toBeDefined();
+    expect(defaultBleedMm(a4 as NonNullable<typeof a4>)).toBe(3);
+  });
+
+  test('in-unit presets default to 0.125in bleed, expressed in mm', () => {
+    const letter = getPaperPreset('letter');
+    expect(letter).toBeDefined();
+    expect(defaultBleedMm(letter as NonNullable<typeof letter>)).toBeCloseTo(
+      0.125 * MM_PER_INCH,
+      10
+    );
+  });
+});
+
+describe('print/units — resolvePrintArtboard', () => {
+  test('throws on unknown paper', () => {
+    expect(() => resolvePrintArtboard({ paper: 'nope' })).toThrow(/unknown paper preset/);
+  });
+
+  test('A4 portrait, default bleed — artboard px = trim + 2×bleed exactly', () => {
+    const r = resolvePrintArtboard({ paper: 'a4' });
+    expect(r.bleedMm).toBe(3);
+    expect(r.widthPx).toBe(r.trimWidthPx + 2 * r.bleedPx);
+    expect(r.heightPx).toBe(r.trimHeightPx + 2 * r.bleedPx);
+    // Sanity band around the nominal A4-at-96dpi size (~794×1123px trim).
+    expect(r.trimWidthPx).toBeGreaterThan(790);
+    expect(r.trimWidthPx).toBeLessThan(798);
+    expect(r.trimHeightPx).toBeGreaterThan(1118);
+    expect(r.trimHeightPx).toBeLessThan(1128);
+  });
+
+  test('landscape orientation swaps the resolved trim dimensions', () => {
+    const portrait = resolvePrintArtboard({ paper: 'a4', orientation: 'portrait' });
+    const landscape = resolvePrintArtboard({ paper: 'a4', orientation: 'landscape' });
+    expect(landscape.trimWidthPx).toBe(portrait.trimHeightPx);
+    expect(landscape.trimHeightPx).toBe(portrait.trimWidthPx);
+  });
+
+  test('explicit bleedMm=0 removes the bleed border entirely', () => {
+    const r = resolvePrintArtboard({ paper: 'a4', bleedMm: 0 });
+    expect(r.bleedPx).toBe(0);
+    expect(r.widthPx).toBe(r.trimWidthPx);
+    expect(r.heightPx).toBe(r.trimHeightPx);
+  });
+
+  test('margins default to 5mm on all sides when unset', () => {
+    const r = resolvePrintArtboard({ paper: 'a4' });
+    expect(r.marginsMm).toEqual({ top: 5, right: 5, bottom: 5, left: 5 });
+  });
+
+  test('partial margin override only replaces the given sides', () => {
+    const r = resolvePrintArtboard({ paper: 'a4', marginsMm: { top: 10 } });
+    expect(r.marginsMm).toEqual({ top: 10, right: 5, bottom: 5, left: 5 });
+  });
+});
+
+describe('print/units — single-source lint guard', () => {
+  const STUDIO_ROOT = join(import.meta.dir, '..');
+  const SKIP_DIRS = new Set(['node_modules', 'dist', '.git', '_history']);
+
+  function walk(dir: string, out: string[]): string[] {
+    for (const entry of readdirSync(dir)) {
+      if (SKIP_DIRS.has(entry)) continue;
+      const full = join(dir, entry);
+      const st = statSync(full);
+      if (st.isDirectory()) walk(full, out);
+      else if (/\.(ts|tsx|mjs|jsx)$/.test(entry)) out.push(full);
+    }
+    return out;
+  }
+
+  test('the mm-per-inch conversion constant (25.4 in arithmetic) appears ONLY in print/units.ts', () => {
+    // Matches `25.4` used as a division/multiplication operand (the shape a
+    // hand-rolled mm↔px conversion would take, e.g. `mm * 96 / 25.4`) — NOT
+    // any bare occurrence of the substring, which also shows up coincidentally
+    // in unrelated numeric data (e.g. SVG path coordinates in canvas-cursors.ts).
+    const CONVERSION_SHAPE = /[*/]\s*25\.4\b|\b25\.4\s*[*/]/;
+    const files = walk(STUDIO_ROOT, []);
+    const offenders: string[] = [];
+    for (const file of files) {
+      const rel = relative(STUDIO_ROOT, file);
+      if (rel === join('print', 'units.ts')) continue;
+      if (rel === join('test', 'print-units.test.ts')) continue;
+      const text = readFileSync(file, 'utf8');
+      if (CONVERSION_SHAPE.test(text)) offenders.push(rel);
+    }
+    expect(offenders).toEqual([]);
+  });
+});

package/apps/studio/test/use-snap-guides.test.ts

@@ -188,3 +188,84 @@ describe('computeSnap / no candidates', () => {
     expect(r.guides).toEqual([]);
   });
 });
+
+// feature-1-artboard-kinds-foundation, T7 — generic-layout-guide-line candidates.
+describe('computeSnap / guide lines (T5 guides fed in as snap candidates)', () => {
+  test('left edge snaps to a guide line within tolerance, kind "guide"', () => {
+    const r = computeSnap(rect(503, 200), [], {
+      ...DEFAULTS,
+      guideLines: [{ axis: 'x', pos: 500, from: 0, to: 1000 }],
+    });
+    expect(r.x).toBe(500);
+    expect(r.guides.find((g) => g.axis === 'x')).toMatchObject({ pos: 500, kind: 'guide' });
+  });
+
+  test('right edge and center also test against the same guide line', () => {
+    // proposed right edge (137+100=237) is within tolerance of the guide at 240.
+    const r = computeSnap(rect(137, 200), [], {
+      ...DEFAULTS,
+      guideLines: [{ axis: 'x', pos: 240, from: 0, to: 1000 }],
+    });
+    expect(r.x).toBe(140); // shifted so right edge lands exactly on 240
+    expect(r.guides.find((g) => g.axis === 'x')).toMatchObject({ pos: 240, kind: 'guide' });
+  });
+
+  test('a closer sibling wins over a farther guide line on the same axis', () => {
+    const r = computeSnap(rect(503, 200), [rect(500, 500)], {
+      ...DEFAULTS,
+      guideLines: [{ axis: 'x', pos: 507, from: 0, to: 1000 }],
+    });
+    // sibling delta = -3 (|3|), guide delta = +4 (|4|) — sibling is closer.
+    expect(r.guides.find((g) => g.axis === 'x')).toMatchObject({ kind: 'sibling', pos: 500 });
+  });
+
+  test('outside tolerance, a guide line is ignored', () => {
+    const r = computeSnap(rect(100, 200), [], {
+      ...DEFAULTS,
+      guideLines: [{ axis: 'x', pos: 500, from: 0, to: 1000 }],
+    });
+    expect(r.x).toBe(100);
+  });
+
+  test('y-axis guide lines snap independently of x-axis', () => {
+    const r = computeSnap(rect(200, 303), [], {
+      ...DEFAULTS,
+      guideLines: [{ axis: 'y', pos: 300, from: 0, to: 1000 }],
+    });
+    expect(r.y).toBe(300);
+    expect(r.x).toBe(200);
+  });
+});
+
+describe('computeSnap / intent presets (T7 Design Decision 4)', () => {
+  test('"pixel" intent ignores siblings AND guide lines — grid only', () => {
+    const r = computeSnap(rect(503, 201), [rect(500, 500)], {
+      ...DEFAULTS,
+      intent: 'pixel',
+      guideLines: [{ axis: 'x', pos: 502, from: 0, to: 1000 }],
+    });
+    // Neither the sibling (delta -3) nor the guide (delta -1) fire under
+    // "pixel" — only the grid pass, out of tolerance from both 503 and 201.
+    expect(r.x).toBe(503);
+    expect(r.guides.some((g) => g.kind === 'sibling' || g.kind === 'guide')).toBe(false);
+  });
+
+  test('"pixel" intent still snaps to the grid', () => {
+    const r = computeSnap(rect(37, 200), [], { ...DEFAULTS, intent: 'pixel' });
+    expect(r.x).toBe(40);
+  });
+
+  test('omitting `intent` defaults to "layout" (back-compat with every pre-T7 call site)', () => {
+    const r = computeSnap(rect(503, 200), [rect(500, 500)], DEFAULTS);
+    expect(r.x).toBe(500);
+  });
+
+  test('"layout" intent (explicit) still snaps to siblings + guides', () => {
+    const r = computeSnap(rect(503, 200), [], {
+      ...DEFAULTS,
+      intent: 'layout',
+      guideLines: [{ axis: 'x', pos: 500, from: 0, to: 1000 }],
+    });
+    expect(r.x).toBe(500);
+  });
+});

package/apps/studio/test/use-tool-mode.test.tsx

@@ -12,8 +12,10 @@ import {
 } from '../use-tool-mode.tsx';
 
 describe('use-tool-mode / static', () => {
-  test('DEFAULT_TOOLS exposes V/H/C + draw set B/I/R/N/⇧S/A/T/E (single Shape tool + highlighter + section)', () => {
+  test('DEFAULT_TOOLS exposes browse (boot default, no letter) + V/H/C + draw set B/I/R/N/⇧S/A/T/E', () => {
     expect(DEFAULT_TOOLS.map((t) => t.id)).toEqual([
+      // feature-4 (browse/move split) — browse leads, Move (V) is the select tool.
+      'browse',
       'move',
       'hand',
       'comment',
@@ -27,6 +29,7 @@ describe('use-tool-mode / static', () => {
       'eraser',
     ]);
     expect(DEFAULT_TOOLS.map((t) => t.shortcut)).toEqual([
+      '', // browse — no letter shortcut (palette / Esc-from-draw only)
       'V',
       'H',
       'C',
@@ -72,6 +75,10 @@ describe('use-tool-mode / static', () => {
     expect(byId.eraser).toMatch(/, cell$/);
     expect(byId.pen).toMatch(/, crosshair$/);
     expect(byId.shape).toMatch(/, crosshair$/);
+    // feature-4 — browse is the ONE tool with NO custom glyph: it's a pure
+    // native pass-through, so it shows the system `default` cursor over chrome
+    // and (special-cased in the provider) native element cursors over the mock.
+    expect(byId.browse).toBe('default');
   });
 });
 
@@ -97,7 +104,8 @@ describe('use-tool-mode / SSR render', () => {
         <Consumer />
       </ToolProvider>
     );
-    expect(html).toContain('data-tool="move"');
+    // feature-4 — boot default is browse (the mock is alive until V is pressed).
+    expect(html).toContain('data-tool="browse"');
   });
 
   test('ToolProvider honors initial tool', () => {

package/apps/studio/tool-palette.tsx

@@ -256,7 +256,9 @@ function ensurePaletteStyles(): void {
   document.head.appendChild(s);
 }
 
-const NAV_TOOLS = ['move', 'hand', 'comment'] as const;
+// feature-4 (browse/move split) — Browse leads the nav group (it's the boot
+// default), then Move (the select tool, V), Hand, Comment.
+const NAV_TOOLS = ['browse', 'move', 'hand', 'comment'] 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. Wave H — section
 // joins the row (it was ⇧S-only before; users couldn't discover it).

package/apps/studio/use-canvas-media-drop.tsx

@@ -227,6 +227,38 @@ const TOAST_CSS = `
 @media (prefers-reduced-motion: reduce) {
   .dc-media-toast { transition: none; }
 }
+/* feature-4 (2026-07-19) — sandbox-safe confirm dialog (window.confirm is
+   silently blocked in the allow-modals-less canvas iframe). HUD-token styled. */
+.dc-confirm-backdrop {
+  position: fixed; inset: 0; z-index: 40;
+  background: rgba(0,0,0,0.45);
+  display: flex; align-items: center; justify-content: center;
+}
+.dc-confirm {
+  min-width: 300px; max-width: 420px;
+  background: var(--maude-chrome-bg-1, #1b1e24);
+  color: var(--maude-chrome-fg-0, #e7eaf0);
+  border: 1px solid var(--maude-chrome-border, #333a45);
+  border-radius: 10px;
+  box-shadow: 0 14px 44px rgba(0,0,0,0.5);
+  padding: 16px;
+  font-family: var(--maude-chrome-font-ui, system-ui, sans-serif);
+}
+.dc-confirm-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
+.dc-confirm-body { font-size: 12px; line-height: 1.5; color: var(--maude-chrome-fg-1, #b7bec9); white-space: pre-line; }
+.dc-confirm-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
+.dc-confirm-btn {
+  padding: 5px 12px; border-radius: 7px; font-size: 12px; cursor: pointer;
+  background: var(--maude-chrome-bg-2, #262b33);
+  color: var(--maude-chrome-fg-0, #e7eaf0);
+  border: 1px solid var(--maude-chrome-border, #333a45);
+}
+.dc-confirm-btn--primary {
+  background: var(--maude-hud-accent, #0d99ff);
+  border-color: var(--maude-hud-accent, #0d99ff);
+  color: #fff;
+}
+.dc-confirm-btn:focus-visible { outline: 2px solid var(--maude-hud-accent, #0d99ff); outline-offset: 1px; }
 `.trim();
 
 function ensureMediaStyles(): void {
@@ -238,6 +270,100 @@ function ensureMediaStyles(): void {
   document.head.appendChild(s);
 }
 
+/**
+ * feature-4 (2026-07-19) — sandbox-safe in-canvas CONFIRM. The canvas iframe
+ * runs with sandbox="allow-scripts allow-same-origin" (no allow-modals), so
+ * `window.confirm()` silently returns false — this promise-based overlay is
+ * the replacement (Esc / backdrop / Cancel → false, primary / Enter → true).
+ */
+export function canvasConfirm(
+  message: string,
+  opts?: { title?: string; confirmLabel?: string; cancelLabel?: string }
+): Promise<boolean> {
+  if (typeof document === 'undefined') return Promise.resolve(false);
+  ensureMediaStyles();
+  return new Promise((resolve) => {
+    const backdrop = document.createElement('div');
+    backdrop.className = 'dc-confirm-backdrop';
+    const box = document.createElement('div');
+    box.className = 'dc-confirm';
+    box.setAttribute('role', 'alertdialog');
+    box.setAttribute('aria-modal', 'true');
+    const title = document.createElement('div');
+    title.className = 'dc-confirm-title';
+    title.textContent = opts?.title ?? 'Are you sure?';
+    const body = document.createElement('div');
+    body.className = 'dc-confirm-body';
+    body.textContent = message;
+    const row = document.createElement('div');
+    row.className = 'dc-confirm-row';
+    const cancel = document.createElement('button');
+    cancel.type = 'button';
+    cancel.className = 'dc-confirm-btn';
+    cancel.textContent = opts?.cancelLabel ?? 'Cancel';
+    const ok = document.createElement('button');
+    ok.type = 'button';
+    ok.className = 'dc-confirm-btn dc-confirm-btn--primary';
+    ok.textContent = opts?.confirmLabel ?? 'Continue';
+    // a11y fix (review fan-out, 2026-07-21) — this is a raw DOM overlay, not a
+    // native <dialog>, so it must implement the two APG modal-dialog musts
+    // itself: (1) restore focus to whatever had it before the dialog opened
+    // (a hostile canvas can't spoof this — it's just where focus already was);
+    // (2) trap Tab/Shift+Tab inside the two buttons so it can't escape to
+    // background content (this overlay mounts in the canvas iframe's own
+    // document, so "background" is live, possibly-interactive artboard markup).
+    const previouslyFocused = document.activeElement as HTMLElement | null;
+    const done = (v: boolean) => {
+      document.removeEventListener('keydown', onKey, true);
+      backdrop.remove();
+      try {
+        previouslyFocused?.focus();
+      } catch {
+        /* detached / no-op target — nothing to restore focus to */
+      }
+      resolve(v);
+    };
+    const onKey = (e: KeyboardEvent) => {
+      // SECURITY — ignore script-dispatched events (isTrusted: false). This
+      // dialog mounts in the canvas iframe's own document (untrusted, DDR-054);
+      // without this, hostile canvas JS could synthesize a KeyboardEvent/Event
+      // to auto-confirm itself past the "irreversible convert" prompt.
+      if (!e.isTrusted) return;
+      if (e.key === 'Escape') {
+        e.stopPropagation();
+        done(false);
+      } else if (e.key === 'Enter') {
+        e.stopPropagation();
+        done(true);
+      } else if (e.key === 'Tab') {
+        // 2-element focus trap: Tab/Shift+Tab just toggles between the two
+        // buttons, never leaving the dialog.
+        e.preventDefault();
+        e.stopPropagation();
+        (document.activeElement === ok ? cancel : ok).focus();
+      }
+    };
+    cancel.addEventListener('click', (e) => {
+      if (!e.isTrusted) return;
+      done(false);
+    });
+    ok.addEventListener('click', (e) => {
+      if (!e.isTrusted) return;
+      done(true);
+    });
+    backdrop.addEventListener('click', (e) => {
+      if (!e.isTrusted) return;
+      if (e.target === backdrop) done(false);
+    });
+    document.addEventListener('keydown', onKey, true);
+    row.append(cancel, ok);
+    box.append(title, body, row);
+    backdrop.append(box);
+    document.body.append(backdrop);
+    ok.focus();
+  });
+}
+
 /** Show a brief auto-dismissing toast in the canvas (e.g. an upload failure). */
 export function showCanvasToast(message: string): void {
   if (typeof document === 'undefined') return;

package/apps/studio/use-chrome-visibility.tsx

@@ -26,6 +26,23 @@ export interface ChromeVisibilityState {
   zoom: boolean;
   /** Presentation Mode — hides ALL chrome regardless of the two above. */
   present: boolean;
+  /**
+   * Generic layout guides (feature-1-artboard-kinds-foundation T4–T6) — UNLIKE
+   * minimap/zoom/present, this is per-CANVAS persisted state (view.json
+   * `overlays.guides`), not a global shell preference. DesignCanvasInner
+   * self-seeds it from the canvas's own meta right after mount (see
+   * canvas-lib.tsx); the shell's View-menu toggle then live-updates it through
+   * the SAME `dgn:'view-chrome'` bridge as the other three flags.
+   */
+  guides: boolean;
+  /**
+   * feature-2-print-artboards T3 — "Show print guides" (bleed/trim/margin
+   * overlay for `kind="print"` artboards). Same shape as `guides` above:
+   * per-CANVAS persisted state (view.json `overlays.print`), self-seeded by
+   * DesignCanvasInner, live-updated through the same `dgn:'view-chrome'`
+   * bridge.
+   */
+  print: boolean;
 }
 
 export interface ChromeVisibilityValue extends ChromeVisibilityState {
@@ -52,6 +69,8 @@ export function ChromeVisibilityProvider({
     minimap: initial?.minimap ?? false,
     zoom: initial?.zoom ?? false,
     present: initial?.present ?? false,
+    guides: initial?.guides ?? false,
+    print: initial?.print ?? false,
   });
   const setChrome = useCallback((patch: Partial<ChromeVisibilityState>) => {
     setState((prev) => ({ ...prev, ...patch }));

package/apps/studio/use-element-resize.tsx

@@ -19,7 +19,9 @@
  *             resizes.
  *
  *             In-flow elements resize by writing explicit `width`/`height` only
- *             (NEVER convert-to-absolute — out of scope); an out-of-flow
+ *             (a resize NEVER implicitly converts to absolute; the explicit
+ *             context-menu "Convert children to absolute" — feature-4 T8,
+ *             DDR-188 — is the opt-in flatten path); an out-of-flow
  *             (absolute/fixed) element additionally moves `left`/`top` when the
  *             top/left edge is dragged, so the resize feels origin-correct.
  */
@@ -240,6 +242,26 @@ export function scaleFromMatrix(transform: string | null | undefined): number {
   return s > 0 ? s : 1;
 }
 
+/**
+ * The `.dc-world` camera's effective render zoom for an element. Dogfood fix
+ * (print-artboards round): the camera writes DIFFERENT properties per engine
+ * (writeTransform's IS_WEBKIT split in canvas-lib) — WebKit gets
+ * `transform: scale(z)`, Chromium gets the CSS `zoom` PROPERTY (whose
+ * computed `transform` is a bare translate). Reading only the matrix
+ * therefore returned 1 in every non-WebKit browser and the handle/spacing
+ * overlays drew at world size instead of screen size, visibly scaling with
+ * the camera (the desktop app is WKWebView, which is why dogfooding never
+ * caught it). Multiplying both reads is exact on each engine: the unused
+ * property computes to identity.
+ */
+export function worldZoomFor(el: Element): number {
+  const world = el.closest('.dc-world') as HTMLElement | null;
+  if (!world) return 1;
+  const cs = getComputedStyle(world);
+  const zoomProp = Number.parseFloat((cs as { zoom?: string }).zoom || '1') || 1;
+  return scaleFromMatrix(cs.transform) * zoomProp;
+}
+
 /** Rotate a local offset (dx,dy) by `deg` — screen y is down, positive = CW. */
 export function rotatePointDeg(dx: number, dy: number, deg: number): [number, number] {
   const r = (deg * Math.PI) / 180;
@@ -458,8 +480,7 @@ export function ElementResizeOverlay(): ReactNode {
       const cx = r.left + r.width / 2;
       const cy = r.top + r.height / 2;
       const deg = rotationDegFromMatrix(getComputedStyle(el).transform);
-      const world = el.closest('.dc-world') as HTMLElement | null;
-      const zoom = world ? scaleFromMatrix(getComputedStyle(world).transform) : 1;
+      const zoom = worldZoomFor(el);
       const hw = (el.offsetWidth * zoom) / 2;
       const hh = (el.offsetHeight * zoom) / 2;
       // Rotate zones sit ON each corner (same offset), 20×20, z-index below the