@1agh/maude 0.45.2 → 0.47.0

package/apps/studio/test/element-structural-edit.test.ts

@@ -8,13 +8,18 @@ import { describe, expect, test } from 'bun:test';
 
 import {
   applyDeleteElement,
+  applyDuplicateArtboard,
   applyInsertArtboard,
   applyInsertElement,
   applyInsertElementIntoArtboard,
   applyResizeArtboard,
+  applySetArtboardGuides,
   applySetArtboardHug,
+  applySetArtboardKind,
+  applySetArtboardPrint,
   applySetArtboardStyle,
   CanvasEditError,
+  readArtboardPrintProp,
 } from '../canvas-edit.ts';
 import { transpileCanvasSource } from '../canvas-pipeline.ts';
 
@@ -337,6 +342,309 @@ describe('canvas-edit / applySetArtboardStyle (background/padding/layout/gap)',
       CanvasEditError
     );
   });
+
+  // Dogfood (artboard panel ↔ shared inspector controls) — padding/gap accept
+  // a var(--token) STRING binding alongside raw px numbers.
+  test('padding/gap accept a var(--token) string (space-token binding)', () => {
+    const out = applySetArtboardStyle(CANVAS, canvas, 'home', {
+      padding: 'var(--space-4)',
+      gap: 'var(--space-2)',
+    });
+    expect(out.source).toContain('padding="var(--space-4)"');
+    expect(out.source).toContain('gap="var(--space-2)"');
+    expect(parses(out.source)).toBe(true);
+  });
+
+  test('a token binding round-trips back to a raw number (detach) and vice versa', () => {
+    const bound = applySetArtboardStyle(CANVAS, canvas, 'home', { padding: 'var(--space-4)' });
+    const detached = applySetArtboardStyle(CANVAS, bound.source, 'home', { padding: 24 });
+    expect(detached.source).toContain('padding={24}');
+    expect(detached.source).not.toContain('var(--space-4)');
+    const rebound = applySetArtboardStyle(CANVAS, detached.source, 'home', {
+      padding: 'var(--space-6)',
+    });
+    expect(rebound.source).toContain('padding="var(--space-6)"');
+    expect(rebound.source).not.toContain('padding={24}');
+    expect(parses(rebound.source)).toBe(true);
+  });
+});
+
+// feature-1-artboard-kinds-foundation, T5/T8 — kind-switch write lane.
+describe('canvas-edit / applySetArtboardKind', () => {
+  const canvas = [
+    'export default function Demo() {',
+    '  return (',
+    '    <DesignCanvas>',
+    '      <DCArtboard id="home" label="Home" width={1440} height={1024}>',
+    '        <div>content</div>',
+    '      </DCArtboard>',
+    '    </DesignCanvas>',
+    '  );',
+    '}',
+  ].join('\n');
+
+  test('writes kind as a plain string-literal prop', () => {
+    const out = applySetArtboardKind(CANVAS, canvas, 'home', 'print');
+    expect(out.source).toContain('kind="print"');
+    expect(parses(out.source)).toBe(true);
+  });
+
+  test('switching kind replaces the previous value, no duplicate attr', () => {
+    const printed = applySetArtboardKind(CANVAS, canvas, 'home', 'print');
+    const out = applySetArtboardKind(CANVAS, printed.source, 'home', 'web');
+    expect(out.source).toContain('kind="web"');
+    expect(out.source).not.toContain('kind="print"');
+    expect(out.source.match(/\bkind=/g)?.length).toBe(1);
+  });
+
+  test('kind=null clears back to the implicit default', () => {
+    const printed = applySetArtboardKind(CANVAS, canvas, 'home', 'print');
+    const out = applySetArtboardKind(CANVAS, printed.source, 'home', null);
+    expect(out.source).not.toContain('kind=');
+    expect(parses(out.source)).toBe(true);
+  });
+
+  test('an invalid kind value throws rather than writing garbage', () => {
+    expect(() => applySetArtboardKind(CANVAS, canvas, 'home', 'poster')).toThrow(CanvasEditError);
+  });
+
+  test('unknown artboard id throws', () => {
+    expect(() => applySetArtboardKind(CANVAS, canvas, 'nope', 'print')).toThrow(CanvasEditError);
+  });
+});
+
+// feature-1-artboard-kinds-foundation, T5 — generic layout guides write lane.
+describe('canvas-edit / applySetArtboardGuides (replace-whole-prop)', () => {
+  const canvas = [
+    'export default function Demo() {',
+    '  return (',
+    '    <DesignCanvas>',
+    '      <DCArtboard id="home" label="Home" width={1440} height={1024}>',
+    '        <div>content</div>',
+    '      </DCArtboard>',
+    '    </DesignCanvas>',
+    '  );',
+    '}',
+  ].join('\n');
+
+  test('inserts guides as a {{...}} object-expression prop', () => {
+    const out = applySetArtboardGuides(CANVAS, canvas, 'home', {
+      columns: { count: 12, gutter: 24, margin: 80 },
+    });
+    expect(out.source).toContain('guides={{"columns":{"count":12,"gutter":24,"margin":80}}}');
+    expect(parses(out.source)).toBe(true);
+  });
+
+  test('a second write REPLACES the whole prop rather than merging', () => {
+    const first = applySetArtboardGuides(CANVAS, canvas, 'home', {
+      columns: { count: 12, gutter: 24, margin: 80 },
+    });
+    const out = applySetArtboardGuides(CANVAS, first.source, 'home', { grid: { size: 8 } });
+    expect(out.source).toContain('guides={{"grid":{"size":8}}}');
+    expect(out.source).not.toContain('columns');
+    expect(out.source.match(/\bguides=/g)?.length).toBe(1);
+    expect(parses(out.source)).toBe(true);
+  });
+
+  test('guides=null removes the prop', () => {
+    const written = applySetArtboardGuides(CANVAS, canvas, 'home', { grid: { size: 8 } });
+    const out = applySetArtboardGuides(CANVAS, written.source, 'home', null);
+    expect(out.source).not.toContain('guides=');
+    expect(parses(out.source)).toBe(true);
+  });
+
+  test('unknown artboard id throws', () => {
+    expect(() => applySetArtboardGuides(CANVAS, canvas, 'nope', { grid: { size: 8 } })).toThrow(
+      CanvasEditError
+    );
+  });
+});
+
+// feature-2-print-artboards T2 — print prop write lane (same replace-whole-
+// prop shape as applySetArtboardGuides).
+describe('canvas-edit / applySetArtboardPrint (replace-whole-prop)', () => {
+  const canvas = [
+    'export default function Demo() {',
+    '  return (',
+    '    <DesignCanvas>',
+    '      <DCArtboard id="home" label="Home" width={1440} height={1024}>',
+    '        <div>content</div>',
+    '      </DCArtboard>',
+    '    </DesignCanvas>',
+    '  );',
+    '}',
+  ].join('\n');
+
+  test('inserts print as a {{...}} object-expression prop', () => {
+    const out = applySetArtboardPrint(CANVAS, canvas, 'home', { paper: 'a4', bleedMm: 3 });
+    expect(out.source).toContain('print={{"paper":"a4","bleedMm":3}}');
+    expect(parses(out.source)).toBe(true);
+  });
+
+  test('a second write REPLACES the whole prop rather than merging', () => {
+    const first = applySetArtboardPrint(CANVAS, canvas, 'home', { paper: 'a4', bleedMm: 3 });
+    const out = applySetArtboardPrint(CANVAS, first.source, 'home', {
+      paper: 'letter',
+      orientation: 'landscape',
+    });
+    expect(out.source).toContain('print={{"paper":"letter","orientation":"landscape"}}');
+    expect(out.source).not.toContain('a4');
+    expect(out.source.match(/\bprint=/g)?.length).toBe(1);
+    expect(parses(out.source)).toBe(true);
+  });
+
+  test('print=null removes the prop', () => {
+    const written = applySetArtboardPrint(CANVAS, canvas, 'home', { paper: 'a4' });
+    const out = applySetArtboardPrint(CANVAS, written.source, 'home', null);
+    expect(out.source).not.toContain('print=');
+    expect(parses(out.source)).toBe(true);
+  });
+
+  test('unknown artboard id throws', () => {
+    expect(() => applySetArtboardPrint(CANVAS, canvas, 'nope', { paper: 'a4' })).toThrow(
+      CanvasEditError
+    );
+  });
+});
+
+// feature-2-print-artboards T5 — the AST-only (no-eval) reader the PDF
+// exporter uses to resolve an artboard's print geometry.
+describe('canvas-edit / readArtboardPrintProp (no-eval AST read)', () => {
+  test('reads a JSON-shaped print prop on a kind="print" artboard (the picker\'s own write shape)', () => {
+    const canvas = [
+      'export default function Demo() {',
+      '  return (',
+      '    <DesignCanvas>',
+      '      <DCArtboard id="home" label="Home" kind="print" width={816} height={1146} print={{"paper":"a4","bleedMm":3}}>',
+      '        <div>content</div>',
+      '      </DCArtboard>',
+      '    </DesignCanvas>',
+      '  );',
+      '}',
+    ].join('\n');
+    expect(readArtboardPrintProp(CANVAS, canvas, 'home')).toEqual({ paper: 'a4', bleedMm: 3 });
+  });
+
+  test('reads a hand-authored JS-literal print prop (unquoted keys, nested object)', () => {
+    const canvas = [
+      'export default function Demo() {',
+      '  return (',
+      '    <DesignCanvas>',
+      '      <DCArtboard id="home" label="Home" kind="print" width={816} height={1146} print={{ paper: \'a4\', orientation: \'landscape\', marginsMm: { top: 10, left: 5 } }}>',
+      '        <div>content</div>',
+      '      </DCArtboard>',
+      '    </DesignCanvas>',
+      '  );',
+      '}',
+    ].join('\n');
+    expect(readArtboardPrintProp(CANVAS, canvas, 'home')).toEqual({
+      paper: 'a4',
+      orientation: 'landscape',
+      marginsMm: { top: 10, left: 5 },
+    });
+  });
+
+  test('no print prop → null', () => {
+    const canvas = [
+      'export default function Demo() {',
+      '  return (',
+      '    <DesignCanvas>',
+      '      <DCArtboard id="home" label="Home" kind="print" width={1440} height={1024}>',
+      '        <div>content</div>',
+      '      </DCArtboard>',
+      '    </DesignCanvas>',
+      '  );',
+      '}',
+    ].join('\n');
+    expect(readArtboardPrintProp(CANVAS, canvas, 'home')).toBeNull();
+  });
+
+  test('unknown artboard id → null (not a throw — read-only, best-effort)', () => {
+    const canvas = [
+      'export default function Demo() {',
+      '  return (',
+      '    <DesignCanvas>',
+      '      <DCArtboard id="home" label="Home" kind="print" width={1440} height={1024}>',
+      '        <div>content</div>',
+      '      </DCArtboard>',
+      '    </DesignCanvas>',
+      '  );',
+      '}',
+    ].join('\n');
+    expect(readArtboardPrintProp(CANVAS, canvas, 'nope')).toBeNull();
+  });
+
+  test('dogfood regression — a print prop present but kind NOT "print" → null (a stale prop from a prior kind switch must never leak into export)', () => {
+    const canvas = [
+      'export default function Demo() {',
+      '  return (',
+      '    <DesignCanvas>',
+      '      <DCArtboard id="home" label="Home" width={1440} height={1024} print={{"paper":"a4","bleedMm":3}}>',
+      '        <div>content</div>',
+      '      </DCArtboard>',
+      '    </DesignCanvas>',
+      '  );',
+      '}',
+    ].join('\n');
+    expect(readArtboardPrintProp(CANVAS, canvas, 'home')).toBeNull();
+  });
+
+  test('resolves a print prop shared via a top-level const reference (RCA issue-pdf-print-export-marks-missing)', () => {
+    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}>',
+      '        <div>content</div>',
+      '      </DCArtboard>',
+      '      <DCArtboard id="acko-back" label="B" kind="print" width={816} height={1146} print={A1_PRINT as any}>',
+      '        <div>content</div>',
+      '      </DCArtboard>',
+      '    </DesignCanvas>',
+      '  );',
+      '}',
+    ].join('\n');
+    const expected = { paper: 'a1', orientation: 'portrait', bleedMm: 3 };
+    // Both the bare reference and the `as any`-cast reference (the shape
+    // AlligatorsAcko.tsx actually shipped, since a plain `print={A1_PRINT}`
+    // would fail TSX's own type check against the JSX prop's declared type)
+    // must resolve to the same object as an equivalent inline literal.
+    expect(readArtboardPrintProp(CANVAS, canvas, 'acko-front')).toEqual(expected);
+    expect(readArtboardPrintProp(CANVAS, canvas, 'acko-back')).toEqual(expected);
+  });
+
+  test('an unresolvable print reference (imported, not declared in this file) → null', () => {
+    const canvas = [
+      'import { A1_PRINT } from "./print-specs.ts";',
+      'export default function Demo() {',
+      '  return (',
+      '    <DesignCanvas>',
+      '      <DCArtboard id="home" label="Home" kind="print" width={816} height={1146} print={A1_PRINT}>',
+      '        <div>content</div>',
+      '      </DCArtboard>',
+      '    </DesignCanvas>',
+      '  );',
+      '}',
+    ].join('\n');
+    expect(readArtboardPrintProp(CANVAS, canvas, 'home')).toBeNull();
+  });
+
+  test('a genuinely computed print prop (function call) → null, never guessed', () => {
+    const canvas = [
+      'function computePrint() { return { paper: "a4" }; }',
+      'export default function Demo() {',
+      '  return (',
+      '    <DesignCanvas>',
+      '      <DCArtboard id="home" label="Home" kind="print" width={816} height={1146} print={computePrint()}>',
+      '        <div>content</div>',
+      '      </DCArtboard>',
+      '    </DesignCanvas>',
+      '  );',
+      '}',
+    ].join('\n');
+    expect(readArtboardPrintProp(CANVAS, canvas, 'home')).toBeNull();
+  });
 });
 
 describe('canvas-edit / applyInsertArtboard (I4)', () => {
@@ -385,3 +693,58 @@ describe('canvas-edit / applyInsertArtboard (I4)', () => {
     ).toThrow(CanvasEditError);
   });
 });
+
+describe('canvas-edit / applyDuplicateArtboard (feature-3-web-artboards T3)', () => {
+  const canvas = [
+    'export default function Demo() {',
+    '  return (',
+    '    <DesignCanvas>',
+    '      <DCArtboard id="home" label="Home" width={1440} height={1024} kind="web">',
+    '        <div>content</div>',
+    '      </DCArtboard>',
+    '      <DCArtboard id="other" label="Other" width={800} height={600}>',
+    '        <div>other</div>',
+    '      </DCArtboard>',
+    '    </DesignCanvas>',
+    '  );',
+    '}',
+  ].join('\n');
+
+  test('clones the artboard with a suffixed id/label + new width, right after the source', () => {
+    const out = applyDuplicateArtboard(CANVAS, canvas, 'home', 390);
+    expect(out.artboardId).toBe('home-390');
+    expect(out.source).toContain('id="home-390"');
+    expect(out.source).toContain('label="Home (390px)"');
+    expect(out.source).toContain('width={390}');
+    // Preserves kind + children verbatim.
+    expect(out.source).toContain('kind="web"');
+    const homeIdx = out.source.indexOf('id="home"');
+    const cloneIdx = out.source.indexOf('id="home-390"');
+    const otherIdx = out.source.indexOf('id="other"');
+    expect(cloneIdx).toBeGreaterThan(homeIdx);
+    // Lands right after the source — BEFORE the sibling that followed it — so
+    // it inherits the "beside the source" default-grid slot (DDR-027).
+    expect(cloneIdx).toBeLessThan(otherIdx);
+    expect((out.source.match(/<div>content<\/div>/g) ?? []).length).toBe(2);
+    expect(parses(out.source)).toBe(true);
+  });
+
+  test('de-dupes the new id when the same breakpoint is duplicated twice', () => {
+    const once = applyDuplicateArtboard(CANVAS, canvas, 'home', 390);
+    const twice = applyDuplicateArtboard(CANVAS, once.source, 'home', 390);
+    expect(twice.artboardId).toBe('home-390-2');
+    expect(twice.source).toContain('id="home-390-2"');
+    expect(parses(twice.source)).toBe(true);
+  });
+
+  test('height/other props are untouched — only id/label/width change', () => {
+    const out = applyDuplicateArtboard(CANVAS, canvas, 'home', 390);
+    // The clone keeps the SOURCE's height (390px is a width-only breakpoint
+    // change — height stays hug-driven per Design Decision 1).
+    expect(out.source).toContain('id="home-390" label="Home (390px)" width={390} height={1024}');
+  });
+
+  test('throws on an unknown artboard id', () => {
+    expect(() => applyDuplicateArtboard(CANVAS, canvas, 'nope', 390)).toThrow(CanvasEditError);
+  });
+});

package/apps/studio/test/exporters/png.test.ts

@@ -8,7 +8,7 @@
 
 import { describe, expect, test } from 'bun:test';
 
-import { clampScale, run } from '../../exporters/png.ts';
+import { clampDpi, clampScale, resolveDeviceScale, run } from '../../exporters/png.ts';
 
 const CTX = {
   designRoot: '/tmp/.design',
@@ -53,3 +53,51 @@ describe('png clampScale — size presets (item 1)', () => {
     expect(clampScale(1.2)).toBe(1);
   });
 });
+
+describe('png clampDpi — feature-2-print-artboards T4', () => {
+  test('undefined/null → undefined (falls back to scale)', () => {
+    expect(clampDpi(undefined)).toBeUndefined();
+    expect(clampDpi(null)).toBeUndefined();
+  });
+
+  test('non-numeric → undefined', () => {
+    expect(clampDpi('nonsense')).toBeUndefined();
+  });
+
+  test('exact presets pass through', () => {
+    expect(clampDpi(96)).toBe(96);
+    expect(clampDpi(150)).toBe(150);
+    expect(clampDpi(300)).toBe(300);
+    expect(clampDpi(600)).toBe(600);
+  });
+
+  test('snaps to the nearest preset', () => {
+    expect(clampDpi(200)).toBe(150);
+    expect(clampDpi(250)).toBe(300);
+    expect(clampDpi(1000)).toBe(600);
+    expect(clampDpi(0)).toBe(96);
+  });
+});
+
+describe('png resolveDeviceScale — dpi wins over scale', () => {
+  test('dpi=300 → 3.125× (300/96)', () => {
+    expect(resolveDeviceScale({ dpi: 300 })).toBeCloseTo(300 / 96, 10);
+  });
+
+  test('dpi=600 → 6.25× (300dpi ceiling raise, item T4)', () => {
+    expect(resolveDeviceScale({ dpi: 600 })).toBeCloseTo(600 / 96, 10);
+  });
+
+  test('dpi=96 → 1× (no-op)', () => {
+    expect(resolveDeviceScale({ dpi: 96 })).toBeCloseTo(1, 10);
+  });
+
+  test('no dpi → falls back to the legacy scale preset', () => {
+    expect(resolveDeviceScale({ scale: 3 })).toBe(3);
+    expect(resolveDeviceScale({})).toBe(2); // clampScale default
+  });
+
+  test('dpi present but not a number → falls back to scale', () => {
+    expect(resolveDeviceScale({ dpi: 'nope', scale: 1 })).toBe(1);
+  });
+});

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