@1agh/maude 0.39.1 → 0.41.0

package/apps/studio/test/read-annotations.test.ts

@@ -40,6 +40,16 @@ interface Annotation {
   color: string | null;
   anchorId?: string;
   artboard?: string | null;
+  element?: {
+    cdId: string | null;
+    selector: string;
+    index: number;
+    artboard: string | null;
+    rect: { x: number; y: number; w: number; h: number };
+    tag: string;
+    text: string;
+  } | null;
+  target?: { source: string; selector: { type: string; value: string }; geometry: unknown };
 }
 
 // Mirror api.ts fileSlug for the common (design-root-relative .tsx) case so the
@@ -407,3 +417,147 @@ describe('read-annotations / --canvas-state overlap tagging', () => {
     expect(a && 'artboard' in a).toBe(false);
   });
 });
+
+// feature-whiteboard-ai-toolkit — --rects (a `maude design canvas-rects`
+// geometry manifest) adds element-level context on top of the existing
+// artboard tagging.
+describe('read-annotations / --rects element-level context', () => {
+  const manifest = JSON.stringify({
+    artboards: [{ id: 'hero', x: 0, y: 0, w: 400, h: 300 }],
+    elements: [
+      // A wrapping card AND the button inside it both contain "over-button"'s
+      // center — the button (smaller area) must win (deepest heuristic).
+      {
+        cdId: 'card1',
+        selector: '[data-dc-screen="hero"] [data-cd-id="card1"]',
+        index: 0,
+        artboard: 'hero',
+        x: 40,
+        y: 40,
+        w: 300,
+        h: 200,
+        tag: 'div',
+        text: '',
+      },
+      {
+        cdId: 'btn1',
+        selector: '[data-dc-screen="hero"] [data-cd-id="btn1"]',
+        index: 0,
+        artboard: 'hero',
+        x: 60,
+        y: 60,
+        w: 100,
+        h: 32,
+        tag: 'button',
+        text: 'Continue',
+      },
+    ],
+    elementsTruncated: false,
+  });
+
+  test('a note whose center sits over an element resolves the DEEPEST (smallest) match', () => {
+    const t: TextStroke = {
+      id: 'over-button',
+      tool: 'text',
+      color: '#000',
+      fontSize: 14,
+      text: 'shrink this',
+      x: 80,
+      y: 70, // inside both card1 (40,40,300,200) and btn1 (60,60,100,32)
+    };
+    const { annotations } = read(REL, strokesToSvg([t]), ['--rects', 'rects.json'], {
+      'rects.json': manifest,
+    });
+    const [a] = annotations;
+    expect(a?.element?.cdId).toBe('btn1');
+    expect(a?.element?.tag).toBe('button');
+    expect(a?.element?.text).toBe('Continue');
+    expect(a?.element?.selector).toBe('[data-dc-screen="hero"] [data-cd-id="btn1"]');
+    expect(a?.element?.rect).toEqual({ x: 60, y: 60, w: 100, h: 32 });
+  });
+
+  test('a note over no element resolves element: null', () => {
+    const t: TextStroke = {
+      id: 'floating',
+      tool: 'text',
+      color: '#000',
+      fontSize: 14,
+      text: 'nowhere near an element',
+      x: 5000,
+      y: 5000,
+    };
+    const { annotations } = read(REL, strokesToSvg([t]), ['--rects', 'rects.json'], {
+      'rects.json': manifest,
+    });
+    expect(annotations[0]?.element).toBeNull();
+  });
+
+  test('--rects also supplies artboard tagging when --canvas-state is absent', () => {
+    const t: TextStroke = {
+      id: 'on-hero',
+      tool: 'text',
+      color: '#000',
+      fontSize: 14,
+      text: 'x',
+      x: 80,
+      y: 70,
+    };
+    const { annotations } = read(REL, strokesToSvg([t]), ['--rects', 'rects.json'], {
+      'rects.json': manifest,
+    });
+    expect(annotations[0]?.artboard).toBe('hero');
+  });
+
+  test('an element resolution upgrades the W3C target.selector to a CssSelector', () => {
+    const t: TextStroke = {
+      id: 'over-button-2',
+      tool: 'text',
+      color: '#000',
+      fontSize: 14,
+      text: 'x',
+      x: 80,
+      y: 70,
+    };
+    const { annotations } = read(REL, strokesToSvg([t]), ['--rects', 'rects.json'], {
+      'rects.json': manifest,
+    });
+    expect(annotations[0]?.target?.selector).toEqual({
+      type: 'CssSelector',
+      value: '[data-dc-screen="hero"] [data-cd-id="btn1"]',
+    });
+  });
+
+  test('a floating note (no artboard) keeps AnnotationIdSelector', () => {
+    const t: TextStroke = {
+      id: 'far-away',
+      tool: 'text',
+      color: '#000',
+      fontSize: 14,
+      text: 'x',
+      x: 9000,
+      y: 9000,
+    };
+    const { annotations } = read(REL, strokesToSvg([t]), ['--rects', 'rects.json'], {
+      'rects.json': manifest,
+    });
+    // Outside every artboard — anchorToArtboard returns early, no `target` at all.
+    expect(annotations[0]?.target).toBeUndefined();
+    expect(annotations[0]?.element).toBeNull();
+  });
+
+  test('without --rects, no element field is emitted (byte-for-byte preserved)', () => {
+    const t: TextStroke = {
+      id: 't',
+      tool: 'text',
+      color: '#000',
+      fontSize: 14,
+      text: 'x',
+      x: 80,
+      y: 70,
+    };
+    const [a] = read(REL, strokesToSvg([t]), ['--canvas-state', 'state.json'], {
+      'state.json': JSON.stringify({ artboards: [{ id: 'hero', x: 0, y: 0, w: 400, h: 300 }] }),
+    }).annotations;
+    expect(a && 'element' in a).toBe(false);
+  });
+});

package/apps/studio/test/sizing-mode.test.ts

@@ -0,0 +1,102 @@
+// sizing-mode.ts — Stage M1 (feature-element-editing-robustness). The pure
+// Fixed / Hug / Fill mode classification + the deterministic CSS patch it writes,
+// including the context-aware Fill (flex main axis → flex-grow, cross axis →
+// align-self, block/grid → 100%).
+
+import { describe, expect, test } from 'bun:test';
+
+import { isMainAxis, sizingModeOf, sizingModePatch } from '../sizing-mode.ts';
+
+const flexRow = { display: 'flex', flexDirection: 'row' };
+const flexCol = { display: 'flex', flexDirection: 'column' };
+const block = { display: 'block' };
+
+describe('sizing-mode / isMainAxis', () => {
+  test('row parent → width is main, height is cross', () => {
+    expect(isMainAxis('width', flexRow)).toBe(true);
+    expect(isMainAxis('height', flexRow)).toBe(false);
+  });
+  test('column parent → height is main, width is cross', () => {
+    expect(isMainAxis('height', flexCol)).toBe(true);
+    expect(isMainAxis('width', flexCol)).toBe(false);
+  });
+  test('missing direction defaults to row', () => {
+    expect(isMainAxis('width', { display: 'flex' })).toBe(true);
+  });
+});
+
+describe('sizing-mode / sizingModeOf', () => {
+  test('numeric authored value → fixed', () => {
+    expect(sizingModeOf('width', { width: '200px' })).toBe('fixed');
+  });
+  test('fit-content → hug', () => {
+    expect(sizingModeOf('width', { width: 'fit-content' })).toBe('hug');
+  });
+  test('100% → fill', () => {
+    expect(sizingModeOf('width', { width: '100%' })).toBe('fill');
+  });
+  test('flex-grow ≥ 1 on the main axis → fill', () => {
+    expect(sizingModeOf('width', { 'flex-grow': '1' }, {}, flexRow)).toBe('fill');
+  });
+  test('flex-grow on the cross axis is NOT fill (grow is a main-axis property)', () => {
+    expect(sizingModeOf('height', { 'flex-grow': '1' }, {}, flexRow)).toBe('fixed');
+  });
+  test('align-self stretch on the cross axis → fill', () => {
+    expect(sizingModeOf('height', { 'align-self': 'stretch' }, {}, flexRow)).toBe('fill');
+  });
+  test('nothing authored → fixed default', () => {
+    expect(sizingModeOf('width', {}, { width: '640px' })).toBe('fixed');
+  });
+});
+
+describe('sizing-mode / sizingModePatch', () => {
+  test('fixed writes an explicit px from the current rendered size', () => {
+    const p = sizingModePatch('width', 'fixed', block, 321.6);
+    expect(p.set).toEqual([['width', '322px']]);
+    expect(p.reset).toEqual([]);
+  });
+
+  test('hug writes fit-content', () => {
+    const p = sizingModePatch('height', 'hug', block, 100);
+    expect(p.set).toEqual([['height', 'fit-content']]);
+  });
+
+  test('fill on a block child writes 100%', () => {
+    const p = sizingModePatch('width', 'fill', block, 100);
+    expect(p.set).toEqual([['width', '100%']]);
+  });
+
+  test('fill on a flex MAIN axis uses flex-grow + basis, releases the dimension', () => {
+    const p = sizingModePatch('width', 'fill', flexRow, 100);
+    expect(p.set).toEqual([
+      ['flex-grow', '1'],
+      ['flex-basis', '0%'],
+      ['width', 'auto'],
+    ]);
+  });
+
+  test('fill on a flex CROSS axis uses align-self: stretch', () => {
+    const p = sizingModePatch('height', 'fill', flexRow, 100);
+    expect(p.set).toEqual([
+      ['align-self', 'stretch'],
+      ['height', 'auto'],
+    ]);
+  });
+
+  test('switching a flex-main child back to fixed clears the fill props', () => {
+    const p = sizingModePatch('width', 'fixed', flexRow, 240);
+    expect(p.set).toEqual([['width', '240px']]);
+    expect(p.reset).toEqual(['flex-grow', 'flex-basis']);
+  });
+
+  test('switching a flex-cross child to hug clears align-self', () => {
+    const p = sizingModePatch('height', 'hug', flexRow, 240);
+    expect(p.set).toEqual([['height', 'fit-content']]);
+    expect(p.reset).toEqual(['align-self']);
+  });
+
+  test('non-positive / non-finite currentPx clamps to 0px for fixed', () => {
+    expect(sizingModePatch('width', 'fixed', block, 0).set).toEqual([['width', '0px']]);
+    expect(sizingModePatch('width', 'fixed', block, Number.NaN).set).toEqual([['width', '0px']]);
+  });
+});

package/apps/studio/test/spacing-handles.test.ts

@@ -0,0 +1,138 @@
+// spacing-handles.ts — Stage J (feature-element-editing-robustness). Pure
+// geometry for the on-canvas padding + gap drag overlay: padding-edge handle
+// placement + drag math, and flex gap-midpoint placement + drag math.
+
+import { describe, expect, test } from 'bun:test';
+
+import {
+  computeGapDrag,
+  computeGapMidpoints,
+  computePaddingDrag,
+  computePaddingLines,
+  flexMainAxis,
+  paddingSideSet,
+} from '../spacing-handles.ts';
+
+const RECT = { x: 100, y: 200, w: 300, h: 150 };
+
+describe('spacing-handles / computePaddingLines', () => {
+  test('places all 4 edges at the padding/content boundary, zoom 1', () => {
+    const lines = computePaddingLines(RECT, { top: 10, right: 20, bottom: 30, left: 40 }, 1);
+    const bySide = Object.fromEntries(lines.map((l) => [l.side, l]));
+    expect(bySide.top).toEqual({ side: 'top', axis: 'y', x: 250, y: 210, length: 240 }); // w-40-20
+    expect(bySide.bottom).toEqual({ side: 'bottom', axis: 'y', x: 250, y: 320, length: 240 });
+    expect(bySide.left).toEqual({ side: 'left', axis: 'x', x: 140, y: 275, length: 110 }); // h-10-30
+    expect(bySide.right).toEqual({ side: 'right', axis: 'x', x: 380, y: 275, length: 110 });
+  });
+
+  test('scales the inset by zoom', () => {
+    const lines = computePaddingLines(RECT, { top: 10, right: 0, bottom: 0, left: 0 }, 2);
+    const top = lines.find((l) => l.side === 'top');
+    expect(top?.y).toBe(220); // rect.y + 10*2
+  });
+
+  test('a non-positive zoom falls back to 1x', () => {
+    const lines = computePaddingLines(RECT, { top: 10, right: 0, bottom: 0, left: 0 }, 0);
+    expect(lines.find((l) => l.side === 'top')?.y).toBe(210);
+  });
+});
+
+describe('spacing-handles / computePaddingDrag', () => {
+  test('top grows when dragged DOWN (positive dy)', () => {
+    expect(computePaddingDrag('top', 10, 0, 6, 1)).toBe(16);
+  });
+  test('top shrinks when dragged UP (negative dy)', () => {
+    expect(computePaddingDrag('top', 10, 0, -4, 1)).toBe(6);
+  });
+  test('left grows when dragged RIGHT (positive dx)', () => {
+    expect(computePaddingDrag('left', 8, 5, 0, 1)).toBe(13);
+  });
+  test('bottom grows when dragged UP (sign flips vs top)', () => {
+    expect(computePaddingDrag('bottom', 10, 0, -6, 1)).toBe(16);
+  });
+  test('right grows when dragged LEFT (sign flips vs left)', () => {
+    expect(computePaddingDrag('right', 8, -5, 0, 1)).toBe(13);
+  });
+  test('clamps at 0 — never goes negative', () => {
+    expect(computePaddingDrag('top', 4, 0, -100, 1)).toBe(0);
+  });
+  test('divides the screen delta by zoom (world units)', () => {
+    expect(computePaddingDrag('top', 10, 0, 20, 2)).toBe(20); // 20/2 = +10
+  });
+});
+
+describe('spacing-handles / flexMainAxis', () => {
+  test('row / row-reverse → x', () => {
+    expect(flexMainAxis('row')).toBe('x');
+    expect(flexMainAxis('row-reverse')).toBe('x');
+  });
+  test('column / column-reverse → y', () => {
+    expect(flexMainAxis('column')).toBe('y');
+    expect(flexMainAxis('column-reverse')).toBe('y');
+  });
+  test('missing/empty defaults to row → x', () => {
+    expect(flexMainAxis(null)).toBe('x');
+    expect(flexMainAxis('')).toBe('x');
+  });
+});
+
+describe('spacing-handles / computeGapMidpoints', () => {
+  test('no gaps for < 2 children', () => {
+    expect(computeGapMidpoints([], 'x')).toEqual([]);
+    expect(computeGapMidpoints([RECT], 'x')).toEqual([]);
+  });
+
+  test('one midpoint between 2 children on the X axis, sorted by position', () => {
+    const a = { x: 0, y: 0, w: 100, h: 50 };
+    const b = { x: 120, y: 0, w: 100, h: 50 };
+    // Pass out of order — must sort by x before pairing.
+    expect(computeGapMidpoints([b, a], 'x')).toEqual([{ x: 110, y: 25 }]);
+  });
+
+  test('N-1 midpoints for N children, Y axis (column)', () => {
+    const a = { x: 0, y: 0, w: 80, h: 40 };
+    const b = { x: 0, y: 60, w: 80, h: 40 };
+    const c = { x: 0, y: 120, w: 80, h: 40 };
+    expect(computeGapMidpoints([a, b, c], 'y')).toEqual([
+      { x: 40, y: 50 },
+      { x: 40, y: 110 },
+    ]);
+  });
+});
+
+describe('spacing-handles / paddingSideSet', () => {
+  test('plain drag touches only the dragged side', () => {
+    expect(paddingSideSet('top', false, false)).toEqual(['top']);
+    expect(paddingSideSet('left', false, false)).toEqual(['left']);
+  });
+  test('Alt on top/bottom locks the vertical pair', () => {
+    expect(paddingSideSet('top', true, false)).toEqual(['top', 'bottom']);
+    expect(paddingSideSet('bottom', true, false)).toEqual(['top', 'bottom']);
+  });
+  test('Alt on left/right locks the horizontal pair', () => {
+    expect(paddingSideSet('left', true, false)).toEqual(['left', 'right']);
+    expect(paddingSideSet('right', true, false)).toEqual(['left', 'right']);
+  });
+  test('Alt+Shift locks all 4 sides regardless of which was grabbed', () => {
+    expect(paddingSideSet('top', true, true)).toEqual(['top', 'right', 'bottom', 'left']);
+    expect(paddingSideSet('right', true, true)).toEqual(['top', 'right', 'bottom', 'left']);
+  });
+  test('Shift alone (no Alt) is plain — matches the panel (shift is a step modifier there)', () => {
+    expect(paddingSideSet('top', false, true)).toEqual(['top']);
+  });
+});
+
+describe('spacing-handles / computeGapDrag', () => {
+  test('1:1 with cursor delta on the X axis (no doubling)', () => {
+    expect(computeGapDrag('x', 12, 8, 0, 1)).toBe(20);
+  });
+  test('1:1 with cursor delta on the Y axis', () => {
+    expect(computeGapDrag('y', 12, 0, -8, 1)).toBe(4);
+  });
+  test('clamps at 0', () => {
+    expect(computeGapDrag('x', 4, -100, 0, 1)).toBe(0);
+  });
+  test('divides by zoom', () => {
+    expect(computeGapDrag('x', 10, 20, 0, 2)).toBe(20); // 20/2 = +10
+  });
+});

package/apps/studio/test/specimen-select.test.ts

@@ -0,0 +1,88 @@
+// specimen-select — feature-element-editing-robustness Stage E (Task E1 + G2).
+// A DS preview specimen (`system/<ds>/preview/*.tsx`) has no CanvasShell — no
+// `.dc-canvas` host, no artboard-scoped selector. `isBareSpecimen`/
+// `pickSpecimenSelectEl` (canvas-comment-mount.tsx) are the generalized select
+// resolver that lets a specimen element still resolve to a `Selection` the
+// Inspector can edit, with a NULL artboard scope (the selector degrades to a
+// bare `[data-cd-id="…"]`, per dom-selection.ts `scopedCdSelector`).
+//
+// Needs a live DOM (elementFromPoint / closest / querySelector) — register
+// happy-dom for this file only, same convention as canvas-hmr-runtime.test.tsx.
+
+import { afterAll, beforeAll, describe, expect, test } from 'bun:test';
+import { GlobalRegistrator } from '@happy-dom/global-registrator';
+
+beforeAll(() => {
+  GlobalRegistrator.register();
+});
+afterAll(() => {
+  GlobalRegistrator.unregister();
+});
+
+import { isBareSpecimen, pickSpecimenSelectEl } from '../canvas-comment-mount.tsx';
+import { hoverTargetToSelection } from '../dom-selection.ts';
+import type { HoverTarget } from '../input-router.tsx';
+
+describe('isBareSpecimen', () => {
+  test('true when no .dc-canvas host is mounted (a bare specimen)', () => {
+    document.body.innerHTML = '<article data-cd-id="aaaaaaaa"><span>hi</span></article>';
+    expect(isBareSpecimen()).toBe(true);
+  });
+
+  test('false when a .dc-canvas host is present (a UI canvas owns select instead)', () => {
+    document.body.innerHTML =
+      '<div class="dc-canvas"><article data-cd-id="aaaaaaaa">hi</article></div>';
+    expect(isBareSpecimen()).toBe(false);
+  });
+});
+
+describe('pickSpecimenSelectEl', () => {
+  test('climbs from the raw hit to its closest stamped [data-cd-id] ancestor', () => {
+    document.body.innerHTML = '<article data-cd-id="aaaaaaaa"><span id="inner">hi</span></article>';
+    const inner = document.getElementById('inner') as HTMLElement;
+    const article = document.querySelector('[data-cd-id]') as HTMLElement;
+    document.elementFromPoint = () => inner;
+
+    const el = pickSpecimenSelectEl(10, 10);
+    expect(el).toBe(article);
+  });
+
+  test('falls back to the bare hit when nothing is stamped (defensive, no crash)', () => {
+    document.body.innerHTML = '<div id="plain">no cd-id here</div>';
+    const plain = document.getElementById('plain') as HTMLElement;
+    document.elementFromPoint = () => plain;
+
+    expect(pickSpecimenSelectEl(5, 5)).toBe(plain);
+  });
+
+  test('returns null over comment chrome / the resize-handle overlay', () => {
+    document.body.innerHTML =
+      '<article data-cd-id="aaaaaaaa"><div class="cm-composer"><span id="chrome">x</span></div></article>';
+    const chromeEl = document.getElementById('chrome') as HTMLElement;
+    document.elementFromPoint = () => chromeEl;
+
+    expect(pickSpecimenSelectEl(1, 1)).toBeNull();
+  });
+
+  test('returns null when the hit is HTML/BODY (no content under the cursor)', () => {
+    document.elementFromPoint = () => document.body;
+    expect(pickSpecimenSelectEl(0, 0)).toBeNull();
+  });
+});
+
+describe('specimen select → Selection has a NULL artboard scope', () => {
+  test('hoverTargetToSelection({artboardId: null}) degrades to a bare [data-cd-id] selector', () => {
+    document.body.innerHTML = '<article data-cd-id="aaaaaaaa">hi</article>';
+    const el = document.querySelector('[data-cd-id]') as HTMLElement;
+    const target: HoverTarget = { el, cdId: 'aaaaaaaa', artboardId: null };
+
+    const sel = hoverTargetToSelection(target);
+
+    expect(sel.artboardId).toBeNull();
+    expect(sel.id).toBe('aaaaaaaa');
+    // No `[data-dc-screen="…"]` artboard scope prefix — a specimen has no
+    // artboard, so the selector must stay bare (dom-selection.ts scopedCdSelector).
+    expect(sel.selector).not.toContain('data-dc-screen');
+    expect(sel.selector).toContain('data-cd-id="aaaaaaaa"');
+  });
+});

package/apps/studio/test/timeline-parse.test.ts

@@ -0,0 +1,127 @@
+// timeline-parse — DDR-148 Timeline sequence/keyframe parser.
+// Pure regex parse of a video-comp's sequence structure + interpolate windows.
+
+import { describe, expect, test } from 'bun:test';
+
+import { parseCompTimeline } from '../client/panels/timeline-parse.js';
+
+const COMP = `
+const A = 45;
+const XF = 15;
+const B = 60;
+const Intro = () => {
+  const frame = useCurrentFrame();
+  const o = interpolate(frame, [0, 14], [0, 1]);
+  const y = interpolate(frame, [10, 30], [24, 0]);
+  return <AbsoluteFill style={{ opacity: o }} />;
+};
+const Payoff = () => {
+  const frame = useCurrentFrame();
+  const s = interpolate(frame, [4, 20], [0.8, 1]);
+  return <AbsoluteFill style={{ transform: 's' }} />;
+};
+function Movie() {
+  return (
+    <TransitionSeries>
+      <TransitionSeries.Sequence durationInFrames={A}><Intro /></TransitionSeries.Sequence>
+      <TransitionSeries.Transition presentation={fade()} timing={linearTiming({ durationInFrames: XF })} />
+      <TransitionSeries.Sequence durationInFrames={B}><Payoff /></TransitionSeries.Sequence>
+    </TransitionSeries>
+  );
+}
+`;
+
+describe('parseCompTimeline', () => {
+  test('parses TransitionSeries sequences with const durations + overlap math', () => {
+    const r = parseCompTimeline(COMP, 90);
+    expect(r.total).toBe(90);
+    expect(r.sequences).toHaveLength(2);
+    expect(r.sequences[0]).toMatchObject({ label: 'Intro', from: 0, duration: 45 });
+    // Payoff starts at 45 - 15 (the transition overlaps back) = 30.
+    expect(r.sequences[1]).toMatchObject({ label: 'Payoff', from: 30, duration: 60 });
+  });
+
+  test('attributes interpolate windows to their sequence, offset to absolute frames', () => {
+    const r = parseCompTimeline(COMP, 90);
+    // Intro's [0,14] + [10,30] stay at from=0.
+    expect(r.sequences[0].keyframes).toEqual([
+      { from: 0, to: 14 },
+      { from: 10, to: 30 },
+    ]);
+    // Payoff's [4,20] is offset by its from=30 → [34,50].
+    expect(r.sequences[1].keyframes).toEqual([{ from: 34, to: 50 }]);
+  });
+
+  test('plain <Sequence from={M} durationInFrames={N}> uses absolute from', () => {
+    const src =
+      'function C(){ return <><Sequence from={20} durationInFrames={40}><Foo/></Sequence></>; }';
+    const r = parseCompTimeline(src, 60);
+    expect(r.sequences[0]).toMatchObject({ label: 'Foo', from: 20, duration: 40 });
+  });
+
+  test('a non-comp / unparseable source yields no sequences (scrub-only)', () => {
+    expect(parseCompTimeline('function C(){ return <div/>; }', 30).sequences).toEqual([]);
+    expect(parseCompTimeline('', 0).sequences).toEqual([]);
+  });
+
+  test('the comp meta total wins over the derived span', () => {
+    const r = parseCompTimeline(COMP, 200);
+    expect(r.total).toBe(200);
+  });
+
+  test('an <Audio> bed becomes its own row spanning the comp (DDR-148 music layer)', () => {
+    const src = `${COMP.replace(
+      '</TransitionSeries>',
+      '</TransitionSeries><Audio src="/.design/assets/music.mp3" />'
+    )}`;
+    const r = parseCompTimeline(src, 90);
+    expect(r.audio).toHaveLength(1);
+    expect(r.audio[0]).toMatchObject({ kind: 'audio', label: 'music.mp3', from: 0, duration: 90 });
+  });
+
+  test('a multi-comp canvas scopes the timeline to the media comp + its total', () => {
+    // Two VideoComps on one canvas: a plain intro (no media) + a reel (has
+    // <Audio>). The parser must show the REEL — its sequences, total, audio.
+    const src = `
+const IT = 40; const RT = 120;
+const Intro = () => <AbsoluteFill/>;
+function Movie(){ return <TransitionSeries><TransitionSeries.Sequence durationInFrames={IT}><Intro/></TransitionSeries.Sequence></TransitionSeries>; }
+const Clip = () => <AbsoluteFill/>;
+function Reel(){ return (<AbsoluteFill><TransitionSeries><TransitionSeries.Sequence durationInFrames={RT}><Clip/></TransitionSeries.Sequence></TransitionSeries><Audio src="/x/song.mp3"/></AbsoluteFill>); }
+export default function Canvas(){ return (<DesignCanvas>
+  <VideoComp component={Movie} durationInFrames={IT} fps={30} width={960} height={540} />
+  <VideoComp component={Reel} durationInFrames={RT} fps={30} width={960} height={540} />
+</DesignCanvas>); }
+`;
+    // The app passes the FIRST comp's duration (the intro, 40) — the parser must
+    // still pick the reel (media) and report its total (120) + audio.
+    const r = parseCompTimeline(src, 40);
+    expect(r.total).toBe(120);
+    expect(r.sequences).toEqual([expect.objectContaining({ label: 'Clip', duration: 120 })]);
+    expect(r.audio).toHaveLength(1);
+    expect(r.audio[0].label).toBe('song.mp3');
+  });
+
+  test('the Timeline scopes to the SELECTED artboard (follows the canvas)', () => {
+    const src = `
+const IT = 40; const RT = 120;
+const Intro = () => <AbsoluteFill/>;
+function Movie(){ return <TransitionSeries><TransitionSeries.Sequence durationInFrames={IT}><Intro/></TransitionSeries.Sequence></TransitionSeries>; }
+const Clip = () => <AbsoluteFill/>;
+function Reel(){ return (<AbsoluteFill><TransitionSeries><TransitionSeries.Sequence durationInFrames={RT}><Clip/></TransitionSeries.Sequence></TransitionSeries><Audio src="/x/song.mp3"/></AbsoluteFill>); }
+export default function Canvas(){ return (<DesignCanvas>
+  <DCArtboard id="intro" width={960} height={540}><VideoComp component={Movie} durationInFrames={IT} fps={30} width={960} height={540} /></DCArtboard>
+  <DCArtboard id="reel" width={960} height={540}><VideoComp component={Reel} durationInFrames={RT} fps={30} width={960} height={540} /></DCArtboard>
+</DesignCanvas>); }
+`;
+    // Selecting the intro artboard shows the INTRO — even though the reel has media.
+    const intro = parseCompTimeline(src, 40, 'intro');
+    expect(intro.total).toBe(40);
+    expect(intro.sequences).toEqual([expect.objectContaining({ label: 'Intro', duration: 40 })]);
+    expect(intro.audio).toHaveLength(0);
+    // Selecting the reel shows the reel + its music.
+    const reel = parseCompTimeline(src, 40, 'reel');
+    expect(reel.total).toBe(120);
+    expect(reel.audio).toHaveLength(1);
+  });
+});