@1agh/maude 0.46.0 → 0.47.0

package/apps/studio/test/grid-track-handles.test.ts

@@ -0,0 +1,160 @@
+// grid-track-handles.ts — feature-3-web-artboards T5 (absorbed
+// feature-grid-track-editor stub). Pure geometry for the on-canvas grid
+// gutter drag-resize overlay: track list parse/serialize (fr round-trip),
+// gutter placement, and per-unit drag math.
+
+import { describe, expect, test } from 'bun:test';
+
+import {
+  computeGutterLines,
+  computeTrackDrag,
+  type GridTrack,
+  gutterTrackIndices,
+  parseTrackList,
+  serializeTrackList,
+} from '../grid-track-handles.ts';
+
+describe('grid-track-handles / parseTrackList', () => {
+  test('parses numeric tracks with mixed units', () => {
+    expect(parseTrackList('200px 1fr 50%')).toEqual([
+      { value: 200, unit: 'px' },
+      { value: 1, unit: 'fr' },
+      { value: 50, unit: '%' },
+    ]);
+  });
+
+  test('parses keyword tracks', () => {
+    expect(parseTrackList('auto min-content max-content')).toEqual([
+      { value: 0, unit: 'auto' },
+      { value: 0, unit: 'min-content' },
+      { value: 0, unit: 'max-content' },
+    ]);
+  });
+
+  test('mixed numeric + keyword tracks', () => {
+    expect(parseTrackList('120px auto 2fr')).toEqual([
+      { value: 120, unit: 'px' },
+      { value: 0, unit: 'auto' },
+      { value: 2, unit: 'fr' },
+    ]);
+  });
+
+  test('empty/whitespace-only string parses to []', () => {
+    expect(parseTrackList('')).toEqual([]);
+    expect(parseTrackList('   ')).toEqual([]);
+    expect(parseTrackList(null)).toEqual([]);
+    expect(parseTrackList(undefined)).toEqual([]);
+  });
+
+  test('unparseable tokens (repeat()/minmax()) bail to []', () => {
+    expect(parseTrackList('repeat(3, 1fr)')).toEqual([]);
+    expect(parseTrackList('minmax(100px, 1fr) 1fr')).toEqual([]);
+  });
+
+  test('a malformed multi-dot number (security-auditor correctness finding) bails to [] rather than NaN', () => {
+    expect(parseTrackList('1.2.3px')).toEqual([]);
+    expect(parseTrackList('200px 1.2.3fr')).toEqual([]);
+  });
+});
+
+describe('grid-track-handles / serializeTrackList', () => {
+  test('round-trips a mixed track list, including fr', () => {
+    const tracks: GridTrack[] = [
+      { value: 200, unit: 'px' },
+      { value: 1, unit: 'fr' },
+      { value: 2.5, unit: 'fr' },
+    ];
+    expect(serializeTrackList(tracks)).toBe('200px 1fr 2.5fr');
+    expect(parseTrackList(serializeTrackList(tracks))).toEqual(tracks);
+  });
+
+  test('keyword tracks serialize without a unit suffix', () => {
+    expect(
+      serializeTrackList([
+        { value: 0, unit: 'auto' },
+        { value: 100, unit: 'px' },
+      ])
+    ).toBe('auto 100px');
+  });
+});
+
+describe('grid-track-handles / computeGutterLines', () => {
+  const RECT = { x: 100, y: 200, w: 300, h: 150 };
+
+  test('fewer than 2 tracks → no gutters', () => {
+    expect(computeGutterLines(RECT, [], 0, 'col')).toEqual([]);
+    expect(computeGutterLines(RECT, [300], 0, 'col')).toEqual([]);
+  });
+
+  test('places gutters at cumulative track boundaries, column axis, no gap', () => {
+    const lines = computeGutterLines(RECT, [100, 100, 100], 0, 'col');
+    expect(lines).toEqual([
+      { index: 0, axis: 'x', x: 200, y: 275 }, // rect.x + 100
+      { index: 1, axis: 'x', x: 300, y: 275 }, // rect.x + 200
+    ]);
+  });
+
+  test('accounts for gap when placing the gutter at the gap midpoint', () => {
+    const lines = computeGutterLines(RECT, [100, 100], 20, 'col');
+    // First track ends at x=200; gutter sits at the 20px gap's midpoint (210).
+    expect(lines[0]).toEqual({ index: 0, axis: 'x', x: 210, y: 275 });
+  });
+
+  test('row axis places gutters vertically', () => {
+    const lines = computeGutterLines(RECT, [50, 50], 0, 'row');
+    expect(lines).toEqual([{ index: 0, axis: 'y', x: 250, y: 250 }]); // rect.y + 50
+  });
+});
+
+describe('grid-track-handles / computeTrackDrag', () => {
+  test('px is additive (1 world px = 1 unit), like padding drag', () => {
+    expect(computeTrackDrag({ value: 100, unit: 'px' }, 100, 20, 0, 1, 'x')).toBe(120);
+    expect(computeTrackDrag({ value: 100, unit: 'px' }, 100, -30, 0, 1, 'x')).toBe(70);
+  });
+
+  test('px clamps at 0', () => {
+    expect(computeTrackDrag({ value: 10, unit: 'px' }, 10, -100, 0, 1, 'x')).toBe(0);
+  });
+
+  test('em uses the same additive math as px', () => {
+    expect(computeTrackDrag({ value: 5, unit: 'em' }, 80, 16, 0, 1, 'x')).toBe(21);
+  });
+
+  test('fr scales proportionally from the resolved-px ratio', () => {
+    // Track authored as 1fr currently resolves to 100px; dragging +50 screen
+    // px targets 150px → ratio 1.5 → new fr = 1.5.
+    expect(computeTrackDrag({ value: 1, unit: 'fr' }, 100, 50, 0, 1, 'x')).toBe(1.5);
+  });
+
+  test('fr floor prevents collapsing to zero share', () => {
+    expect(computeTrackDrag({ value: 1, unit: 'fr' }, 100, -1000, 0, 1, 'x')).toBe(0.1);
+  });
+
+  test('percent scales proportionally with a 1% floor', () => {
+    expect(computeTrackDrag({ value: 50, unit: '%' }, 150, 30, 0, 1, 'x')).toBe(60);
+    expect(computeTrackDrag({ value: 50, unit: '%' }, 150, -1000, 0, 1, 'x')).toBe(1);
+  });
+
+  test('keyword units are returned unchanged (not draggable)', () => {
+    expect(computeTrackDrag({ value: 0, unit: 'auto' }, 100, 50, 0, 1, 'x')).toBe(0);
+  });
+
+  test('divides screen delta by zoom (world units)', () => {
+    expect(computeTrackDrag({ value: 100, unit: 'px' }, 100, 40, 0, 2, 'x')).toBe(120); // 40/2=20
+  });
+
+  test('row axis reads dyScreen instead of dxScreen', () => {
+    expect(computeTrackDrag({ value: 100, unit: 'px' }, 100, 999, 20, 1, 'y')).toBe(120);
+  });
+});
+
+describe('grid-track-handles / gutterTrackIndices', () => {
+  test('plain drag touches only the track before the gutter', () => {
+    expect(gutterTrackIndices(0, false)).toEqual([0]);
+    expect(gutterTrackIndices(2, false)).toEqual([2]);
+  });
+  test('shift touches both neighboring tracks', () => {
+    expect(gutterTrackIndices(0, true)).toEqual([0, 1]);
+    expect(gutterTrackIndices(2, true)).toEqual([2, 3]);
+  });
+});

package/apps/studio/test/handoff.test.ts

@@ -15,6 +15,7 @@ import {
   filterComponentsCss,
   filterTokensCss,
   type RegistryItem,
+  resolveCanvasKind,
   stripDataCdId,
   writeRegistryItem,
 } from '../handoff.ts';
@@ -186,6 +187,34 @@ describe('handoff / filterTokensCss', () => {
   });
 });
 
+describe('handoff / resolveCanvasKind', () => {
+  test('no explicit kind resolves to digital', () => {
+    const src = `<DesignCanvas><DCArtboard id="a" label="A" width={1440} height={900}>x</DCArtboard></DesignCanvas>`;
+    expect(resolveCanvasKind(src)).toBe('digital');
+  });
+
+  test('single explicit kind resolves to that kind', () => {
+    const src = `<DCArtboard id="a" label="A" width={1280} height={800} kind="web">x</DCArtboard>`;
+    expect(resolveCanvasKind(src)).toBe('web');
+  });
+
+  test('multiple distinct kinds resolve to mixed', () => {
+    const src = `
+      <DCArtboard id="a" label="A" width={1280} height={800} kind="web">x</DCArtboard>
+      <DCArtboard id="b" label="B" width={2480} height={3508} kind="print">y</DCArtboard>
+    `;
+    expect(resolveCanvasKind(src)).toBe('mixed');
+  });
+
+  test('repeated identical kind across artboards is not mixed', () => {
+    const src = `
+      <DCArtboard id="a" label="A" width={1440} height={900} kind="web">x</DCArtboard>
+      <DCArtboard id="b" label="B" width={390} height={844} kind="web">y</DCArtboard>
+    `;
+    expect(resolveCanvasKind(src)).toBe('web');
+  });
+});
+
 describe('handoff / emitRegistryItem end-to-end', () => {
   let tmpDir = '';
   beforeAll(() => {
@@ -278,4 +307,23 @@ describe('handoff / emitRegistryItem end-to-end', () => {
     expect(item.files[0]?.type).toBe('registry:component');
     expect(item.cssVars).toBeUndefined();
   });
+
+  test('emit resolves meta.kind from the canvas source (feature-3-web-artboards T6)', async () => {
+    const canvasAbs = path.join(tmpDir, 'WebCanvas.tsx');
+    await Bun.write(
+      canvasAbs,
+      `export default function WebCanvas() {
+         return <DCArtboard id="a" label="A" width={1280} height={800} kind="web"><div>x</div></DCArtboard>;
+       }`
+    );
+    const item = await emitRegistryItem({ canvasAbsPath: canvasAbs });
+    expect(item.meta?.kind).toBe('web');
+  });
+
+  test('emit defaults meta.kind to digital when no artboard declares one', async () => {
+    const canvasAbs = path.join(tmpDir, 'DigitalCanvas.tsx');
+    await Bun.write(canvasAbs, 'export default function DigitalCanvas() { return <div>x</div>; }');
+    const item = await emitRegistryItem({ canvasAbsPath: canvasAbs });
+    expect(item.meta?.kind).toBe('digital');
+  });
 });

package/apps/studio/test/input-router.test.ts

@@ -17,10 +17,13 @@ const base = (over: Partial<ClassifyInput>): ClassifyInput => ({
   ...over,
 });
 
-describe('input-router / pointermove — move tool', () => {
-  test('bare hover → no-op (native interactions pass through)', () => {
+describe('input-router / pointermove — move (select) tool', () => {
+  // feature-4 (browse/move split, DDR-187) — the Move tool is now a SELECT
+  // tool: a bare hover paints a TOP-level preview halo (Figma's hover outline),
+  // Cmd-hover previews the deepest element.
+  test('bare hover → hover preview with deep=false (top-level outline)', () => {
     const action = classify(base({ type: 'pointermove', clientX: 10, clientY: 20 }));
-    expect(action.kind).toBe('no-op');
+    expect(action).toMatchObject({ kind: 'hover', deep: false });
   });
 
   test('cmd-hover → hover preview with deep=true', () => {
@@ -46,15 +49,22 @@ describe('input-router / pointermove — move tool', () => {
   });
 });
 
-describe('input-router / pointerdown — move tool select', () => {
-  test('bare left-click → no-op (native interactions pass through)', () => {
+describe('input-router / pointerdown — move (select) tool ladder', () => {
+  // feature-4 (browse/move split, DDR-187) — the full Figma select ladder.
+  test('bare left-click → select replace, deep=false (TOP-level object)', () => {
     const action = classify(base({ type: 'pointerdown', button: 0, clientX: 100, clientY: 200 }));
-    expect(action.kind).toBe('no-op');
+    expect(action).toEqual({
+      kind: 'select',
+      mode: 'replace',
+      deep: false,
+      clientX: 100,
+      clientY: 200,
+    });
   });
 
-  test('shift+left-click (no cmd) → no-op (no select without Cmd)', () => {
+  test('shift+left-click (no cmd) → select add, deep=false (add TOP-level)', () => {
     const action = classify(base({ type: 'pointerdown', button: 0, shiftKey: true }));
-    expect(action.kind).toBe('no-op');
+    expect(action).toMatchObject({ kind: 'select', mode: 'add', deep: false });
   });
 
   test('cmd+left-click → select replace, deep=true (nested single)', () => {
@@ -128,6 +138,70 @@ describe('input-router / pointerdown — tool-aware', () => {
   });
 });
 
+// ─────────────────────────────────────────────────────────────────────────────
+// feature-4 (browse/move split, DDR-187) — POSTURE INVARIANTS. The browse tool
+// is the boot default and must be a PURE native pass-through: it claims NOTHING,
+// so a freshly-opened mock stays alive (buttons click, links follow). This
+// promotes the old `input-router.tsx` comment-invariant ("bare clicks pass
+// through") into an enforced gate. If any of these flip to a claim, an existing
+// canvas silently loses its native interactivity on boot.
+describe('input-router / browse tool — pure pass-through (boot default)', () => {
+  const browse = (over: Partial<ClassifyInput>): ClassifyInput =>
+    base({ activeTool: 'browse', ...over });
+
+  test('bare left-click → no-op (native button/link/input fires)', () => {
+    expect(classify(browse({ type: 'pointerdown', button: 0, clientX: 5, clientY: 6 })).kind).toBe(
+      'no-op'
+    );
+  });
+
+  test('cmd+left-click → select deep (the escape hatch; consumer flips tool to move)', () => {
+    // User steer 2026-07-19 — "I clicked to edit" shouldn't require V first.
+    expect(classify(browse({ type: 'pointerdown', button: 0, metaKey: true }))).toMatchObject({
+      kind: 'select',
+      mode: 'replace',
+      deep: true,
+    });
+  });
+
+  test('shift+left-click → no-op (Shift alone is NOT the escape hatch)', () => {
+    expect(classify(browse({ type: 'pointerdown', button: 0, shiftKey: true })).kind).toBe('no-op');
+  });
+
+  test('bare hover → no-op; Cmd-hover previews deep (escape-hatch affordance)', () => {
+    expect(classify(browse({ type: 'pointermove', clientX: 1, clientY: 2 })).kind).toBe('no-op');
+    expect(classify(browse({ type: 'pointermove', metaKey: true }))).toMatchObject({
+      kind: 'hover',
+      deep: true,
+    });
+  });
+
+  test('right-click → still context-menu (chrome, not canvas content)', () => {
+    expect(classify(browse({ type: 'pointerdown', button: 2, clientX: 3, clientY: 4 })).kind).toBe(
+      'context-menu'
+    );
+  });
+
+  test('V keydown → tool move (the router stays live in browse so V switches)', () => {
+    expect(classify(browse({ type: 'keydown', key: 'v' }))).toEqual({
+      kind: 'tool',
+      tool: 'move',
+    });
+  });
+});
+
+// The select action must NEVER be produced from a non-select tool on a bare
+// gesture. Guards the "select leaked into comment/draw/hand/browse" regression.
+describe('input-router / select never leaks into non-select tools', () => {
+  const nonSelectBare: Tool[] = ['browse', 'hand', 'comment', 'pen', 'shape', 'sticky', 'eraser'];
+  for (const activeTool of nonSelectBare) {
+    test(`bare left-click in ${activeTool} → not a select`, () => {
+      const action = classify(base({ type: 'pointerdown', button: 0, activeTool }));
+      expect(action.kind).not.toBe('select');
+    });
+  }
+});
+
 describe('input-router / contextmenu event', () => {
   test('always opens menu + carries cursor coords', () => {
     const action = classify(base({ type: 'contextmenu', clientX: 77, clientY: 88 }));

package/apps/studio/test/layers-synthetic-groups.test.ts

@@ -0,0 +1,96 @@
+// layers-synthetic-groups — feature-4 T7. The serializer that feeds the shell's
+// Layers panel must emit SYNTHETIC group rows for unstamped wrappers that hold
+// stamped descendants (so the tree mirrors real nesting), while still omitting
+// purely-decorative wrappers with no addressable content. This is the fix for
+// the "some layers don't show up / the tree is flat" report.
+//
+// Needs a live DOM (children / querySelector / closest) — register happy-dom.
+
+import { afterAll, beforeAll, describe, expect, test } from 'bun:test';
+import { GlobalRegistrator } from '@happy-dom/global-registrator';
+
+beforeAll(() => {
+  GlobalRegistrator.register();
+});
+afterAll(() => {
+  GlobalRegistrator.unregister();
+});
+
+import { serializeArtboardTree } from '../canvas-shell.tsx';
+
+function root(html: string): Element {
+  const el = document.createElement('div');
+  el.className = 'dc-artboard-body';
+  el.innerHTML = html;
+  return el;
+}
+
+describe('serializeArtboardTree — synthetic group rows for unstamped wrappers', () => {
+  test('unstamped wrapper WITH a stamped descendant → synthetic group parent (nesting preserved)', () => {
+    const tree = serializeArtboardTree(
+      root('<div class="hero-wrap"><button data-cd-id="aabbccdd">Go</button></div>')
+    );
+    expect(tree).toHaveLength(1);
+    const group = tree[0]!;
+    expect(group.synthetic).toBe(true);
+    expect(group.type).toBe('group');
+    expect(group.id.startsWith('__grp:')).toBe(true);
+    expect(group.tag).toBe('div');
+    // The stamped button is now a CHILD of the group (not hoisted to the root).
+    expect(group.children).toHaveLength(1);
+    expect(group.children[0]!.id).toBe('aabbccdd');
+    expect(group.children[0]!.synthetic).toBeUndefined();
+  });
+
+  test('unstamped wrapper with NO stamped descendant → omitted (no decorative noise)', () => {
+    const tree = serializeArtboardTree(root('<div class="deco"><span>just text</span></div>'));
+    expect(tree).toHaveLength(0);
+  });
+
+  test('stamped child directly → a normal (non-synthetic) row, no group wrapper', () => {
+    const tree = serializeArtboardTree(root('<section data-cd-id="11112222">Hi</section>'));
+    expect(tree).toHaveLength(1);
+    expect(tree[0]!.synthetic).toBeUndefined();
+    expect(tree[0]!.id).toBe('11112222');
+  });
+
+  test('nested unstamped wrappers → nested synthetic groups (each rung shown)', () => {
+    const tree = serializeArtboardTree(
+      root('<div class="outer"><div class="inner"><a data-cd-id="deadbeef">L</a></div></div>')
+    );
+    expect(tree).toHaveLength(1);
+    const outer = tree[0]!;
+    expect(outer.synthetic).toBe(true);
+    expect(outer.children).toHaveLength(1);
+    const inner = outer.children[0]!;
+    expect(inner.synthetic).toBe(true);
+    expect(inner.children[0]!.id).toBe('deadbeef');
+  });
+
+  test('synthetic group ids are unique across same-signature siblings (stable keys)', () => {
+    const tree = serializeArtboardTree(
+      root(
+        '<div class="col"><span data-cd-id="aaaa1111">a</span></div>' +
+          '<div class="col"><span data-cd-id="bbbb2222">b</span></div>'
+      )
+    );
+    expect(tree).toHaveLength(2);
+    expect(tree[0]!.id).not.toBe(tree[1]!.id);
+    expect(tree[0]!.synthetic).toBe(true);
+    expect(tree[1]!.synthetic).toBe(true);
+  });
+
+  test('mixed: a stamped element AND a sibling unstamped-wrapper-with-content both surface', () => {
+    const tree = serializeArtboardTree(
+      root(
+        '<h1 data-cd-id="head0001">Title</h1>' +
+          '<div class="body"><p data-cd-id="para0001">copy</p></div>'
+      )
+    );
+    expect(tree).toHaveLength(2);
+    expect(tree[0]!.id).toBe('head0001');
+    expect(tree[0]!.synthetic).toBeUndefined();
+    expect(tree[1]!.synthetic).toBe(true);
+    expect(tree[1]!.children[0]!.id).toBe('para0001');
+  });
+});

package/apps/studio/test/pdf-print-boxes.test.ts

@@ -8,6 +8,7 @@
 import { describe, expect, test } from 'bun:test';
 import { PDFDocument } from 'pdf-lib';
 
+import { readArtboardPrintProp } from '../canvas-edit.ts';
 import {
   applyPageFit,
   applyPrintBoxesAndMarks,
@@ -238,6 +239,59 @@ describe('pdf-print-boxes — includeBleed:false crops the bleed strip out', ()
   });
 });
 
+// RCA issue-pdf-print-export-marks-missing — the shape that shipped broken:
+// two `kind="print"` artboards sharing one `print` spec via a top-level const
+// (AlligatorsAcko.tsx's actual authoring pattern), not a repeated inline
+// literal per artboard. The multi-page loop in exporters/pdf.ts `run()`
+// re-resolves readArtboardPrintProp independently per written page (keyed by
+// the artboard's own data-dc-screen id — see safeArtboardFilename), so
+// asserting it resolves per-artboard-id here is the load-bearing regression
+// guard: both pages must get the SAME resolved geometry, not just page 1.
+describe('readArtboardPrintProp — shared const print spec resolves for every page (multi-page correlation)', () => {
+  const canvas = [
+    'const A1_PRINT = { paper: "a1", orientation: "portrait", bleedMm: 3 } as const;',
+    'export default function Demo() {',
+    '  return (',
+    '    <DesignCanvas>',
+    '      <DCArtboard id="acko-front" label="A" kind="print" width={816} height={1146} print={A1_PRINT as any}>',
+    '        <div>front</div>',
+    '      </DCArtboard>',
+    '      <DCArtboard id="acko-back" label="B" kind="print" width={816} height={1146} print={A1_PRINT as any}>',
+    '        <div>back</div>',
+    '      </DCArtboard>',
+    '    </DesignCanvas>',
+    '  );',
+    '}',
+  ].join('\n');
+
+  test('both artboard ids resolve to the same non-null print geometry, driving non-degenerate boxes+marks on each page', async () => {
+    const front = readArtboardPrintProp('/abs/AlligatorsAcko.tsx', canvas, 'acko-front');
+    const back = readArtboardPrintProp('/abs/AlligatorsAcko.tsx', canvas, 'acko-back');
+    expect(front).toEqual({ paper: 'a1', orientation: 'portrait', bleedMm: 3 });
+    expect(back).toEqual(front);
+
+    const printOpts: PdfPrintOptions = {
+      marks: { crop: true, registration: true, colorBars: false, pageInfo: false },
+    };
+    for (const printProp of [front, back]) {
+      if (!printProp) throw new Error('expected a resolved print prop');
+      const bleedMm = typeof printProp.bleedMm === 'number' ? printProp.bleedMm : 0;
+      const resolved = resolvePrintArtboard({ paper: printProp.paper as string, bleedMm });
+      const pageWidthPt = pxToPt(resolved.widthPx);
+      const pageHeightPt = pxToPt(resolved.heightPx);
+      const doc = await PDFDocument.create();
+      const page = doc.addPage([pageWidthPt, pageHeightPt]);
+      applyPrintBoxesAndMarks(page, bleedMm, printOpts);
+      const media = page.getMediaBox();
+      const trim = page.getTrimBox();
+      // Non-degenerate: TrimBox strictly inside MediaBox on every side — the
+      // exact thing that silently failed to happen when printProp was null.
+      expect(media.width).toBeGreaterThan(trim.width);
+      expect(media.height).toBeGreaterThan(trim.height);
+    }
+  });
+});
+
 describe('pdf-print-boxes — applyPageFit (non-print artboard scale-to-paper)', () => {
   test('the resulting page is sized to the target paper, content preserved', async () => {
     const doc = await PDFDocument.create();

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).