@1agh/maude 0.39.1 → 0.41.0

package/apps/studio/test/equal-spacing-detector.test.ts

@@ -2,10 +2,24 @@
 
 import { describe, expect, test } from 'bun:test';
 
-import { detectEqualSpacing } from '../equal-spacing-detector.ts';
+import {
+  computeAlign,
+  computeDistribute,
+  computePairGap,
+  computeTidyGrid,
+  detectEqualSpacing,
+  type KeyedRect,
+} from '../equal-spacing-detector.ts';
 import type { Rect } from '../use-snap-guides.tsx';
 
 const r = (x: number, y: number, w = 100, h = 60): Rect => ({ x, y, w, h });
+const kr = (key: string, x: number, y: number, w = 100, h = 60): KeyedRect => ({
+  key,
+  x,
+  y,
+  w,
+  h,
+});
 
 describe('detectEqualSpacing / preconditions', () => {
   test('fewer than 3 rects → null', () => {
@@ -91,3 +105,153 @@ describe('detectEqualSpacing / 4+ rects', () => {
     expect(out).toBeNull();
   });
 });
+
+// Task L7 — Alt-hover measurement pairwise gap.
+
+describe('computePairGap', () => {
+  test('measures the x-axis gap regardless of argument order', () => {
+    const a = r(0, 0, 100, 50);
+    const b = r(150, 20, 80, 50);
+    const fwd = computePairGap(a, b, 'x');
+    const rev = computePairGap(b, a, 'x');
+    expect(fwd).toEqual({ axis: 'x', gap: 50, from: 100, cross: 35 });
+    expect(rev).toEqual(fwd);
+  });
+
+  test('measures the y-axis gap', () => {
+    const a = r(0, 0, 50, 60);
+    const b = r(10, 150, 50, 60);
+    const out = computePairGap(a, b, 'y');
+    expect(out).toEqual({ axis: 'y', gap: 90, from: 60, cross: 30 });
+  });
+
+  test('overlapping on the axis → null (no gap to show)', () => {
+    const a = r(0, 0, 100, 50);
+    const b = r(50, 0, 100, 50); // overlaps a on x
+    expect(computePairGap(a, b, 'x')).toBeNull();
+  });
+
+  test('touching (gap === 0) → null', () => {
+    const a = r(0, 0, 100, 50);
+    const b = r(100, 0, 100, 50);
+    expect(computePairGap(a, b, 'x')).toBeNull();
+  });
+});
+
+// Task L5 — distribute / align / tidy-up pure math.
+
+describe('computeAlign', () => {
+  test('fewer than 2 rects → []', () => {
+    expect(computeAlign([], 'left')).toEqual([]);
+    expect(computeAlign([kr('a', 0, 0)], 'left')).toEqual([]);
+  });
+
+  test('left/right/top/bottom hold the union-bbox edge', () => {
+    const rects = [kr('a', 0, 0, 100, 50), kr('b', 40, 100, 60, 50), kr('c', 200, 30, 100, 50)];
+    const left = computeAlign(rects, 'left');
+    // union xMin = 0 → 'a' already at x=0 is a no-op (skipped); b/c move.
+    expect(left).toEqual(
+      expect.arrayContaining([
+        { key: 'b', x: 0, y: 100 },
+        { key: 'c', x: 0, y: 30 },
+      ])
+    );
+    expect(left.find((m) => m.key === 'a')).toBeUndefined();
+
+    const right = computeAlign(rects, 'right');
+    // union xMax = 300 (c: 200+100)
+    expect(right.find((m) => m.key === 'a')).toEqual({ key: 'a', x: 200, y: 0 });
+    expect(right.find((m) => m.key === 'b')).toEqual({ key: 'b', x: 240, y: 100 });
+    expect(right.find((m) => m.key === 'c')).toBeUndefined(); // already at right edge
+
+    const top = computeAlign(rects, 'top');
+    expect(top.find((m) => m.key === 'a')).toBeUndefined(); // already yMin=0
+    expect(top.find((m) => m.key === 'b')).toEqual({ key: 'b', x: 40, y: 0 });
+    expect(top.find((m) => m.key === 'c')).toEqual({ key: 'c', x: 200, y: 0 });
+  });
+
+  test('center-x / center-y align to the union-bbox midpoint', () => {
+    const rects = [kr('a', 0, 0, 100, 100), kr('b', 300, 0, 100, 100)];
+    // union bbox x: 0..400, cx=200
+    const centerX = computeAlign(rects, 'center-x');
+    expect(centerX).toEqual(
+      expect.arrayContaining([
+        { key: 'a', x: 150, y: 0 },
+        { key: 'b', x: 150, y: 0 },
+      ])
+    );
+  });
+
+  test('no-op rects (already aligned) are omitted from the result', () => {
+    const rects = [kr('a', 0, 0), kr('b', 0, 50)];
+    expect(computeAlign(rects, 'left')).toEqual([]);
+  });
+});
+
+describe('computeDistribute', () => {
+  test('fewer than 3 rects → []', () => {
+    expect(computeDistribute([kr('a', 0, 0), kr('b', 200, 0)], 'x')).toEqual([]);
+  });
+
+  test('holds first + last, spaces the middle evenly on x', () => {
+    // 0..100, then a bunched pair at 110/130, then 300..400 — total span
+    // first.x(0) to last.x+w(400) = 400, minus side-lengths(100+80+90+100=370) = 30 → gap 10
+    const rects = [
+      kr('a', 0, 0, 100, 50),
+      kr('b', 110, 0, 80, 50),
+      kr('c', 130, 0, 90, 50),
+      kr('d', 300, 0, 100, 50),
+    ];
+    const out = computeDistribute(rects, 'x');
+    expect(out).toHaveLength(2); // only the 2 middle rects move
+    expect(out.find((m) => m.key === 'b')).toEqual({ key: 'b', x: 110, y: 0 });
+    expect(out.find((m) => m.key === 'c')).toEqual({ key: 'c', x: 200, y: 0 });
+  });
+
+  test('already-equal gaps still returns the (unchanged) middle positions', () => {
+    const rects = [kr('a', 0, 0), kr('b', 120, 0), kr('c', 240, 0)];
+    const out = computeDistribute(rects, 'x');
+    expect(out).toEqual([{ key: 'b', x: 120, y: 0 }]);
+  });
+
+  test('distributes on y', () => {
+    // y: 0..60, 90..150, 300..360 — total sides 180, span 360-180=180, gap 90
+    const rects = [kr('a', 0, 0, 50, 60), kr('b', 0, 90, 50, 60), kr('c', 0, 300, 50, 60)];
+    const out = computeDistribute(rects, 'y');
+    expect(out).toHaveLength(1);
+    expect(out[0]).toEqual({ key: 'b', x: 0, y: 150 });
+  });
+});
+
+describe('computeTidyGrid', () => {
+  test('fewer than 2 rects → []', () => {
+    expect(computeTidyGrid([kr('a', 5, 5)])).toEqual([]);
+  });
+
+  test('4 rects → 2×2 grid, reading-order sorted, from the union-bbox origin', () => {
+    // scattered, deliberately out of reading order
+    const rects = [
+      kr('br', 500, 500, 50, 50),
+      kr('tl', 0, 0, 50, 50),
+      kr('tr', 400, 10, 50, 50),
+      kr('bl', 20, 490, 50, 50),
+    ];
+    const out = computeTidyGrid(rects, { gap: 10 });
+    expect(out).toHaveLength(4);
+    const byKey = Object.fromEntries(out.map((m) => [m.key, m]));
+    // reading order (y then x): tl(0,0) → tr(400,10) → bl(20,490) → br(500,500)
+    // columns = round(sqrt(4)) = 2 → row0: tl,tr · row1: bl,br
+    expect(byKey.tl).toEqual({ key: 'tl', x: 0, y: 0 });
+    expect(byKey.tr).toEqual({ key: 'tr', x: 60, y: 0 }); // col0 width 50 + gap 10
+    expect(byKey.bl).toEqual({ key: 'bl', x: 0, y: 60 });
+    expect(byKey.br).toEqual({ key: 'br', x: 60, y: 60 });
+  });
+
+  test('honors an explicit column count', () => {
+    const rects = [kr('a', 0, 0, 40, 20), kr('b', 0, 0, 40, 20), kr('c', 0, 0, 40, 20)];
+    const out = computeTidyGrid(rects, { gap: 5, columns: 1 });
+    // 1 column → stacked vertically
+    expect(out.map((m) => m.x)).toEqual([0, 0, 0]);
+    expect(out.map((m) => m.y)).toEqual([0, 25, 50]);
+  });
+});

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

@@ -0,0 +1,59 @@
+// Regression tests for exporters/_runtime.ts — the shared shim-path + runtime
+// resolver behind the desktop-export fix (RCA issue-desktop-export-failures).
+//
+// Guards the two defects the render exporters shipped with:
+//   1. shim paths must derive from DEV_SERVER_ROOT (paths.ts), NEVER a virtual
+//      `/$bunfs/root` (DDR-045).
+//   2. the JS runtime must be resolved (not a hardcoded `'node'`), with an
+//      actionable throw when none is on PATH.
+
+import { afterEach, describe, expect, test } from 'bun:test';
+import { EXPORT_SHIM_DIR, exportShimPath, resolveExportRuntime } from '../../exporters/_runtime.ts';
+import { DEV_SERVER_ROOT } from '../../paths.ts';
+
+const ORIGINAL_PATH = process.env.PATH;
+const ORIGINAL_RUNTIME = process.env.MAUDE_EXPORT_RUNTIME;
+
+afterEach(() => {
+  // Restore any env mutated by a test (each bun:test file is its own process,
+  // but tests within it share env — keep them isolated).
+  if (ORIGINAL_PATH === undefined) delete process.env.PATH;
+  else process.env.PATH = ORIGINAL_PATH;
+  if (ORIGINAL_RUNTIME === undefined) delete process.env.MAUDE_EXPORT_RUNTIME;
+  else process.env.MAUDE_EXPORT_RUNTIME = ORIGINAL_RUNTIME;
+});
+
+describe('exporters/_runtime — shim paths (DDR-045)', () => {
+  test('EXPORT_SHIM_DIR is <DEV_SERVER_ROOT>/bin and never virtual /$bunfs', () => {
+    expect(EXPORT_SHIM_DIR).toBe(`${DEV_SERVER_ROOT}/bin`);
+    expect(EXPORT_SHIM_DIR).not.toContain('$bunfs');
+    expect(EXPORT_SHIM_DIR).not.toContain('~BUN');
+  });
+
+  test('exportShimPath resolves a real disk path under the shim dir', () => {
+    const p = exportShimPath('_png-playwright.mjs');
+    expect(p).toBe(`${DEV_SERVER_ROOT}/bin/_png-playwright.mjs`);
+    expect(p).not.toContain('$bunfs');
+  });
+});
+
+describe('exporters/_runtime — runtime ladder', () => {
+  test('honors the MAUDE_EXPORT_RUNTIME override', () => {
+    process.env.MAUDE_EXPORT_RUNTIME = '/opt/custom/bin/node';
+    expect(resolveExportRuntime()).toBe('/opt/custom/bin/node');
+  });
+
+  test('resolves an on-PATH runtime when no override is set', () => {
+    delete process.env.MAUDE_EXPORT_RUNTIME;
+    // The test host has bun (and usually node) on PATH → a truthy absolute path.
+    const runtime = resolveExportRuntime();
+    expect(runtime).toBeTruthy();
+    expect(runtime).not.toBe('node'); // resolved to an absolute path, not the bare name
+  });
+
+  test('throws an actionable error when no node/bun runtime is reachable', () => {
+    delete process.env.MAUDE_EXPORT_RUNTIME;
+    process.env.PATH = '/nonexistent-maude-export-runtime-probe';
+    expect(() => resolveExportRuntime()).toThrow(/render export needs a JS runtime/i);
+  });
+});

package/apps/studio/test/file-lock.test.ts

@@ -0,0 +1,84 @@
+// file-lock.test.ts — DDR-150 P2. The cross-process advisory lock that closes
+// the race the in-process mutex couldn't see: the HTTP server, the /design:edit
+// CLI, and the HMR watcher all editing the same comp file. Verifies mutual
+// exclusion across "processes" (concurrent acquirers), stale-lock stealing (a
+// crashed holder), and that an edit through the integrated withLock cleans up.
+
+import { describe, expect, test } from 'bun:test';
+import { utimes } from 'node:fs/promises';
+
+import { acquireFileLock, editAttribute, lockPathFor } from '../canvas-edit.ts';
+import { transpileCanvasSource } from '../canvas-pipeline.ts';
+
+const tmp = (tag: string) => `/tmp/maude-lock-${tag}-${Math.random().toString(36).slice(2)}.tsx`;
+
+describe('acquireFileLock', () => {
+  test('acquires + releases; release is idempotent', async () => {
+    const f = tmp('basic');
+    const rel = await acquireFileLock(f);
+    expect(await Bun.file(lockPathFor(f)).exists()).toBe(true);
+    await rel();
+    expect(await Bun.file(lockPathFor(f)).exists()).toBe(false);
+    await rel(); // second release is a no-op, never throws
+  });
+
+  test('serialises a second (cross-process) contender until the first releases', async () => {
+    const f = tmp('contend');
+    const relA = await acquireFileLock(f);
+    let bAcquired = false;
+    const bPromise = acquireFileLock(f).then((rel) => {
+      bAcquired = true;
+      return rel;
+    });
+    // While A holds the lock, B must be blocked (it's polling the lockfile).
+    await new Promise((r) => setTimeout(r, 80));
+    expect(bAcquired).toBe(false);
+    await relA();
+    const relB = await bPromise; // B now wins the lock
+    expect(bAcquired).toBe(true);
+    await relB();
+    expect(await Bun.file(lockPathFor(f)).exists()).toBe(false);
+  });
+
+  test('steals a STALE lock (holder crashed) instead of waiting forever', async () => {
+    const f = tmp('stale');
+    const lp = lockPathFor(f);
+    await Bun.write(lp, '99999 0'); // a "held" lock from a dead pid
+    const old = new Date(Date.now() - 60_000); // mtime 60s ago (> LOCK_STALE_MS)
+    await utimes(lp, old, old);
+    const start = Date.now();
+    const rel = await acquireFileLock(f); // must steal it, not block
+    expect(Date.now() - start).toBeLessThan(2000);
+    await rel();
+  });
+});
+
+describe('withLock integration', () => {
+  test('an edit acquires + cleans up the cross-process lock', async () => {
+    const f = tmp('edit');
+    const src = 'function Demo() { return <div className="x">y</div>; }';
+    await Bun.write(f, src);
+    const { withIds } = transpileCanvasSource(f, src);
+    const id = withIds.match(/data-cd-id="([0-9a-f]{8})"/)?.[1] as string;
+    const r = await editAttribute(f, id, 'className', 'edited');
+    expect(r.changed).toBe(true);
+    expect(await Bun.file(f).text()).toContain('className="edited"');
+    // The lockfile must be released after the edit — not left dangling.
+    expect(await Bun.file(lockPathFor(f)).exists()).toBe(false);
+  });
+
+  test('concurrent edits to the same file both land (serialised, no lost write)', async () => {
+    const f = tmp('concurrent');
+    const src = 'function Demo() { return <div className="x" title="t">y</div>; }';
+    await Bun.write(f, src);
+    const { withIds } = transpileCanvasSource(f, src);
+    const id = withIds.match(/data-cd-id="([0-9a-f]{8})"/)?.[1] as string;
+    await Promise.all([
+      editAttribute(f, id, 'className', 'cls-A'),
+      editAttribute(f, id, 'title', 'title-B'),
+    ]);
+    const out = await Bun.file(f).text();
+    expect(out).toContain('cls-A');
+    expect(out).toContain('title-B'); // neither edit clobbered the other
+  });
+});

package/apps/studio/test/fixtures/video-comp-fixture.tsx

@@ -0,0 +1,82 @@
+// video-comp-fixture.tsx — DDR-148 canonical video-comp fixture.
+//
+// A reusable comp exercising the full authoring vocabulary: a frame-driven
+// animated title, two "clips" joined by a crossfade in a <TransitionSeries>,
+// and a music-bed <Audio> with a volume envelope. Used by:
+//   • video-comp-fixture.test.ts — builds it through the real canvas pipeline
+//     (buildCanvasModule) and asserts remotion / @remotion/transitions stay
+//     external + <VideoComp> is present (CI-safe, no browser).
+//   • the live E2E sweep (drop → scrub → export) as a stable target.
+//
+// Deterministic BY CONSTRUCTION — every value is a pure function of the frame.
+
+import { DCArtboard, DCSection, DesignCanvas, VideoComp } from '@maude/canvas-lib';
+import { linearTiming, TransitionSeries } from '@remotion/transitions';
+import { fade } from '@remotion/transitions/fade';
+import { AbsoluteFill, Audio, interpolate, useCurrentFrame } from 'remotion';
+
+const CLIP = 45;
+const XF = 15;
+const TOTAL = 2 * CLIP - XF; // two clips + one crossfade
+
+const Beat = ({ label, bg }: { label: string; bg: string }) => {
+  const frame = useCurrentFrame();
+  const y = interpolate(frame, [0, 14], [24, 0], { extrapolateRight: 'clamp' });
+  const opacity = interpolate(frame, [0, 14], [0, 1], { extrapolateRight: 'clamp' });
+  return (
+    <AbsoluteFill
+      style={{
+        background: bg,
+        color: '#fff',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontFamily: 'system-ui, sans-serif',
+        fontSize: 72,
+        fontWeight: 800,
+      }}
+    >
+      <div style={{ transform: `translateY(${y}px)`, opacity }}>{label}</div>
+    </AbsoluteFill>
+  );
+};
+
+function Fixture() {
+  return (
+    <AbsoluteFill>
+      <TransitionSeries>
+        <TransitionSeries.Sequence durationInFrames={CLIP}>
+          <Beat label="MAUDE" bg="#0f172a" />
+        </TransitionSeries.Sequence>
+        <TransitionSeries.Transition
+          presentation={fade()}
+          timing={linearTiming({ durationInFrames: XF })}
+        />
+        <TransitionSeries.Sequence durationInFrames={CLIP}>
+          <Beat label="VIDEO" bg="#7c2d12" />
+        </TransitionSeries.Sequence>
+      </TransitionSeries>
+      <Audio
+        src="assets/music.mp3"
+        volume={(f) => interpolate(f, [TOTAL - 15, TOTAL], [0.7, 0], { extrapolateLeft: 'clamp' })}
+      />
+    </AbsoluteFill>
+  );
+}
+
+export default function Canvas() {
+  return (
+    <DesignCanvas>
+      <DCSection title="Video-comp fixture">
+        <DCArtboard id="fixture" label="Fixture" width={640} height={360}>
+          <VideoComp
+            component={Fixture}
+            durationInFrames={TOTAL}
+            fps={30}
+            width={640}
+            height={360}
+          />
+        </DCArtboard>
+      </DCSection>
+    </DesignCanvas>
+  );
+}

package/apps/studio/test/history-rollback.test.ts

@@ -45,6 +45,32 @@ describe('history.ts', () => {
     });
   });
 
+  test('prunes to the newest MAX_SNAPSHOTS_PER_SLUG pairs (G3 disk-fill bound)', async () => {
+    const prev = process.env.MAUDE_MAX_SNAPSHOTS;
+    process.env.MAUDE_MAX_SNAPSHOTS = '3';
+    try {
+      await withSandbox(async (ctx) => {
+        const hist = createHistory(ctx);
+        for (let i = 0; i < 6; i++) {
+          // Space the writes so Date.now() advances between them — real
+          // structural edits are seconds apart, so each snapshot gets a distinct
+          // increasing ts (a same-millisecond burst is not a production shape).
+          await hist.writeSnapshot('.design/ui/a.html', `<doc>v${i}</doc>`, `edit-${i}`);
+          await Bun.sleep(2);
+        }
+        const list = await hist.listSnapshots('.design/ui/a.html');
+        // Only the 3 newest survive; the newest content is intact.
+        expect(list.length).toBe(3);
+        const newest = list[list.length - 1];
+        const read = await hist.readSnapshot('.design/ui/a.html', newest?.ts ?? '');
+        expect(new TextDecoder().decode(read?.content)).toBe('<doc>v5</doc>');
+      });
+    } finally {
+      if (prev === undefined) delete process.env.MAUDE_MAX_SNAPSHOTS;
+      else process.env.MAUDE_MAX_SNAPSHOTS = prev;
+    }
+  });
+
   test('rollback overwrites the target file', async () => {
     await withSandbox(async (ctx) => {
       const hist = createHistory(ctx);

package/apps/studio/test/knob-props-authored.test.ts

@@ -0,0 +1,87 @@
+// KNOB_PROPS round-trip — feature-element-editing-robustness Stage B (Task B1
+// + G2 item b). Promoting a property into `KNOB_PROPS` (dom-selection.ts) does
+// two things: `styleMapsFor` captures its authored/computed value into the
+// `Selection` payload (so the new Position/Transform/Typography/Media panel
+// rows have something to render), AND it moves the prop OUT of the Advanced
+// "customStyles" escape hatch — a canvas that had one of these as a raw custom
+// style no longer double-surfaces it there.
+//
+// `hoverTargetToSelection` (the exported, already-tested entry point) spreads
+// `...styleMapsFor(el)` into its return, so this exercises the real promoted
+// list end-to-end without needing to export the private `styleMapsFor`/
+// `KNOB_PROPS` internals.
+
+import { afterAll, beforeAll, describe, expect, test } from 'bun:test';
+import { GlobalRegistrator } from '@happy-dom/global-registrator';
+
+beforeAll(() => {
+  GlobalRegistrator.register();
+});
+afterAll(() => {
+  GlobalRegistrator.unregister();
+});
+
+import { hoverTargetToSelection } from '../dom-selection.ts';
+import type { HoverTarget } from '../input-router.tsx';
+
+function selectionFor(styleText: string) {
+  document.body.innerHTML = `<div data-cd-id="aaaaaaaa" style="${styleText}">x</div>`;
+  const el = document.querySelector('[data-cd-id]') as HTMLElement;
+  const target: HoverTarget = { el, cdId: 'aaaaaaaa', artboardId: null };
+  return hoverTargetToSelection(target);
+}
+
+describe('KNOB_PROPS — the Stage-B promoted (formerly DDR-104 OUT-list) properties', () => {
+  test('position + inset (top/right/bottom/left) + z-index round-trip into authored', () => {
+    const sel = selectionFor(
+      'position: absolute; top: 10px; right: 20px; bottom: 30px; left: 40px; z-index: 5;'
+    );
+    expect(sel.authored?.position).toBe('absolute');
+    expect(sel.authored?.top).toBe('10px');
+    expect(sel.authored?.right).toBe('20px');
+    expect(sel.authored?.bottom).toBe('30px');
+    expect(sel.authored?.left).toBe('40px');
+    expect(sel.authored?.['z-index']).toBe('5');
+  });
+
+  test('transform + transform-origin round-trip', () => {
+    const sel = selectionFor('transform: rotate(12deg); transform-origin: center;');
+    expect(sel.authored?.transform).toBe('rotate(12deg)');
+    expect(sel.authored?.['transform-origin']).toBe('center');
+  });
+
+  test('font-style / text-transform / text-decoration / white-space round-trip', () => {
+    const sel = selectionFor(
+      'font-style: italic; text-transform: uppercase; text-decoration: underline; white-space: nowrap;'
+    );
+    expect(sel.authored?.['font-style']).toBe('italic');
+    expect(sel.authored?.['text-transform']).toBe('uppercase');
+    expect(sel.authored?.['text-decoration']).toBe('underline');
+    expect(sel.authored?.['white-space']).toBe('nowrap');
+  });
+
+  test('overflow + media framing (object-fit/aspect-ratio/object-position) round-trip', () => {
+    const sel = selectionFor(
+      'overflow: hidden; object-fit: cover; aspect-ratio: 16 / 9; object-position: top;'
+    );
+    expect(sel.authored?.overflow).toBe('hidden');
+    expect(sel.authored?.['object-fit']).toBe('cover');
+    expect(sel.authored?.['aspect-ratio']).toBe('16 / 9');
+    expect(sel.authored?.['object-position']).toBe('top');
+  });
+
+  test('a promoted prop never leaks into customStyles (the B1 exclusion gotcha)', () => {
+    const sel = selectionFor('position: absolute; cursor: pointer;');
+    // `position` is curated now → excluded from the Advanced hatch.
+    expect(sel.customStyles?.position).toBeUndefined();
+    // A genuinely uncurated prop (not in KNOB_PROPS) still lands in
+    // customStyles as before — proves the exclusion is targeted, not a
+    // blanket "nothing goes to customStyles anymore" regression.
+    expect(sel.customStyles?.cursor).toBe('pointer');
+  });
+
+  test('computed values are also captured (placeholder-hint source)', () => {
+    const sel = selectionFor('position: relative;');
+    expect(sel.computed?.position).toBe('relative');
+  });
+});