@1agh/maude 0.40.0 → 0.42.0

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

@@ -0,0 +1,263 @@
+// feature-background-export-notification-center — job queue concurrency,
+// history persistence under concurrency, and byte retrieval/eviction.
+
+import { describe, expect, test } from 'bun:test';
+import { randomBytes } from 'node:crypto';
+import { mkdirSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+import { bootServer, killProc, makeSandbox, nextPort } from '../_helpers.ts';
+
+interface JobShape {
+  id: string;
+  status: 'queued' | 'running' | 'done' | 'failed';
+  createdAt: string;
+}
+
+async function listJobs(port: number): Promise<JobShape[]> {
+  const r = await fetch(`http://localhost:${port}/_api/export-jobs`);
+  const body = (await r.json()) as { jobs: JobShape[] };
+  return body.jobs;
+}
+
+/** A `project-raw` zip export takes real, measurable time when the sandbox is
+ * large enough (DEFLATE-compressing several MB) — no browser/Playwright
+ * needed, so this stays a fast, deterministic-enough integration test. */
+function seedLargeSandbox(designRoot: string, fileCount = 5000): void {
+  const dir = join(designRoot, 'ui', 'big');
+  mkdirSync(dir, { recursive: true });
+  for (let i = 0; i < fileCount; i += 1) {
+    writeFileSync(join(dir, `f${i}.txt`), randomBytes(2000).toString('base64'));
+  }
+}
+
+describe('exporters/jobs — concurrency gate', () => {
+  test('caps concurrent render-heavy jobs at MAUDE_EXPORT_MAX_CONCURRENT', async () => {
+    const { root, designRoot } = makeSandbox();
+    seedLargeSandbox(designRoot);
+    const port = nextPort();
+    const proc = await bootServer(root, port, { MAUDE_EXPORT_MAX_CONCURRENT: '2' });
+    try {
+      const jobIds: string[] = [];
+      for (let i = 0; i < 3; i += 1) {
+        const r = await fetch(`http://localhost:${port}/_api/export-jobs`, {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ format: 'zip', scope: 'project-raw' }),
+        });
+        expect(r.status).toBe(202);
+        const { jobId } = (await r.json()) as { jobId: string };
+        jobIds.push(jobId);
+      }
+
+      let sawThirdQueued = false;
+      let maxRunningObserved = 0;
+      let allDone = false;
+      const deadline = Date.now() + 4000;
+      while (Date.now() < deadline && !allDone) {
+        const jobs = await listJobs(port);
+        const byId = new Map(jobs.map((j) => [j.id, j]));
+        const running = jobs.filter((j) => j.status === 'running').length;
+        maxRunningObserved = Math.max(maxRunningObserved, running);
+        if (byId.get(jobIds[2])?.status === 'queued') sawThirdQueued = true;
+        allDone = jobIds.every((id) => byId.get(id)?.status === 'done');
+        if (!allDone) await Bun.sleep(15);
+      }
+
+      expect(allDone).toBe(true);
+      // Never more than the configured cap ran at once.
+      expect(maxRunningObserved).toBeLessThanOrEqual(2);
+      // The 3rd job was genuinely gated behind the semaphore at some point,
+      // not just "coincidentally" always running — proves the queue, not just
+      // that everything happened to finish fast.
+      expect(sawThirdQueued).toBe(true);
+    } finally {
+      await killProc(proc);
+    }
+  });
+});
+
+describe('exporters/jobs — pending-queue cap (security fan-out, /flow:done)', () => {
+  test('enqueue() 429s past MAUDE_EXPORT_MAX_QUEUED, then accepts more once jobs drain', async () => {
+    const { root, designRoot } = makeSandbox();
+    seedLargeSandbox(designRoot); // keeps jobs 'queued'/'running' long enough to observe
+    const port = nextPort();
+    const proc = await bootServer(root, port, {
+      MAUDE_EXPORT_MAX_CONCURRENT: '1',
+      MAUDE_EXPORT_MAX_QUEUED: '2',
+    });
+    try {
+      const post = () =>
+        fetch(`http://localhost:${port}/_api/export-jobs`, {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ format: 'zip', scope: 'project-raw' }),
+        });
+
+      const r1 = await post();
+      const r2 = await post();
+      expect(r1.status).toBe(202);
+      expect(r2.status).toBe(202);
+
+      // A 3rd job while the first 2 are still queued/running must be rejected
+      // with 429, not silently accepted (the DoS-protection cap).
+      const r3 = await post();
+      expect(r3.status).toBe(429);
+      const text = await r3.text();
+      expect(text.toLowerCase()).toContain('queue');
+
+      // Once jobs drain below the cap, enqueue works again — this is a
+      // capacity limit, not a permanent lockout.
+      let drained = false;
+      const deadline = Date.now() + 5000;
+      while (Date.now() < deadline && !drained) {
+        const jobs = await listJobs(port);
+        drained = jobs.every((j) => j.status === 'done' || j.status === 'failed');
+        if (!drained) await Bun.sleep(15);
+      }
+      expect(drained).toBe(true);
+      const r4 = await post();
+      expect(r4.status).toBe(202);
+    } finally {
+      await killProc(proc);
+    }
+  });
+});
+
+describe('exporters/jobs — list() + history under concurrency', () => {
+  test('list() returns newest-first', async () => {
+    const { root } = makeSandbox();
+    const port = nextPort();
+    const proc = await bootServer(root, port);
+    try {
+      // `canvas-as-separate` against an empty sandbox (`active: null`)
+      // resolves to zero targets → the adapter's empty-input branch, no
+      // Playwright spawn — fast + deterministic (mirrors endpoint.test.ts).
+      for (let i = 0; i < 3; i += 1) {
+        const r = await fetch(`http://localhost:${port}/_api/export-jobs`, {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ format: 'png', scope: 'canvas-as-separate' }),
+        });
+        expect(r.status).toBe(202);
+      }
+      // Give the fire-and-forget jobs a moment to land.
+      await Bun.sleep(200);
+      const jobs = await listJobs(port);
+      expect(jobs.length).toBeGreaterThanOrEqual(3);
+      const createdAts = jobs.map((j) => j.createdAt);
+      const sorted = [...createdAts].sort((a, b) => b.localeCompare(a));
+      expect(createdAts).toEqual(sorted);
+    } finally {
+      await killProc(proc);
+    }
+  });
+
+  test('history ledger caps at 20 without dropping entries under concurrent completions', async () => {
+    const { root } = makeSandbox();
+    const port = nextPort();
+    // MAUDE_EXPORT_MAX_QUEUED override — this test deliberately fires 25 jobs
+    // in one burst (the concurrent-completion race itself), well above the
+    // production default's DoS-protection cap; a real flood is hundreds of
+    // requests, not a legitimate test burst.
+    const proc = await bootServer(root, port, { MAUDE_EXPORT_MAX_QUEUED: '30' });
+    try {
+      // Fire 25 jobs concurrently (not sequentially) — the exact race the old
+      // read-modify-write appendExportHistory had.
+      await Promise.all(
+        Array.from({ length: 25 }, () =>
+          fetch(`http://localhost:${port}/_api/export-jobs`, {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({ format: 'png', scope: 'canvas-as-separate' }),
+          }).then((r) => expect(r.status).toBe(202))
+        )
+      );
+      // Poll until the ledger settles at the cap.
+      let historyLen = 0;
+      const deadline = Date.now() + 4000;
+      while (Date.now() < deadline && historyLen < 20) {
+        const r = await fetch(`http://localhost:${port}/_api/export-history`);
+        const body = (await r.json()) as { history: unknown[] };
+        historyLen = body.history.length;
+        if (historyLen < 20) await Bun.sleep(20);
+      }
+      expect(historyLen).toBe(20);
+    } finally {
+      await killProc(proc);
+    }
+  });
+});
+
+describe('exporters/jobs — byte retrieval + eviction', () => {
+  test("a finished job's bytes are downloadable, then gone once evicted past the cap", async () => {
+    const { root } = makeSandbox();
+    const port = nextPort();
+    // MAUDE_EXPORT_MAX_QUEUED override — this test pushes 26 jobs through in
+    // one burst (deliberately, to force eviction), above the production
+    // default's DoS-protection cap.
+    const proc = await bootServer(root, port, { MAUDE_EXPORT_MAX_QUEUED: '30' });
+    try {
+      const enqueue = async () => {
+        const r = await fetch(`http://localhost:${port}/_api/export-jobs`, {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ format: 'zip', scope: 'project-raw' }),
+        });
+        expect(r.status).toBe(202);
+        const { jobId } = (await r.json()) as { jobId: string };
+        return jobId;
+      };
+
+      const firstId = await enqueue();
+      // Wait for it to finish.
+      let done = false;
+      const deadline = Date.now() + 3000;
+      while (Date.now() < deadline && !done) {
+        const jobs = await listJobs(port);
+        done = jobs.find((j) => j.id === firstId)?.status === 'done';
+        if (!done) await Bun.sleep(15);
+      }
+      expect(done).toBe(true);
+
+      const dl = await fetch(`http://localhost:${port}/_api/export-jobs/download?id=${firstId}`);
+      expect(dl.status).toBe(200);
+      expect(dl.headers.get('Content-Type')).toBe('application/zip');
+      const bytes = await dl.arrayBuffer();
+      expect(bytes.byteLength).toBeGreaterThan(0);
+
+      // 404 for an unknown id.
+      const missing = await fetch(`http://localhost:${port}/_api/export-jobs/download?id=nope`);
+      expect(missing.status).toBe(404);
+
+      // Push 25 more jobs through so the first one rolls past the 20-cap and
+      // gets evicted (bytes removed from disk + dropped from the in-memory
+      // map). Eviction runs on EVERY completion, so the oldest jobs drop out
+      // of list() entirely well before the last of the 25 finishes — poll for
+      // "nothing left pending" rather than tracking specific (possibly
+      // already-evicted) ids.
+      for (let i = 0; i < 25; i += 1) {
+        await enqueue();
+      }
+      let settled = false;
+      const deadline2 = Date.now() + 4000;
+      while (Date.now() < deadline2 && !settled) {
+        const jobs = await listJobs(port);
+        settled = jobs.every((j) => j.status === 'done' || j.status === 'failed');
+        if (!settled) await Bun.sleep(15);
+      }
+      expect(settled).toBe(true);
+
+      const r = await fetch(`http://localhost:${port}/_api/export-history`);
+      const body = (await r.json()) as { history: unknown[] };
+      expect(body.history.length).toBe(20);
+
+      const evicted = await fetch(
+        `http://localhost:${port}/_api/export-jobs/download?id=${firstId}`
+      );
+      expect(evicted.status).toBe(404);
+    } finally {
+      await killProc(proc);
+    }
+  });
+});

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