@1agh/maude 0.40.0 → 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/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');
+  });
+});

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