@1agh/maude 0.45.1 → 0.46.0

package/apps/studio/test/artboard-guides-overlay.test.tsx

@@ -0,0 +1,152 @@
+// artboard-guides-overlay — feature-1-artboard-kinds-foundation, T4.
+// Registry contract + generic guides rendering. Pure renderToStaticMarkup —
+// this component has no hooks/context, so (unlike DCArtboard's own overlays)
+// it renders fully outside a live DesignCanvas.
+
+import { afterEach, describe, expect, test } from 'bun:test';
+
+import { renderToStaticMarkup } from 'react-dom/server';
+
+import {
+  __resetKindOverlayRegistryForTests,
+  ArtboardGuidesOverlay,
+  registerKindOverlay,
+} from '../artboard-guides-overlay.tsx';
+
+const RECT = { x: 10, y: 20, w: 400, h: 200 };
+
+afterEach(() => {
+  __resetKindOverlayRegistryForTests();
+});
+
+describe('ArtboardGuidesOverlay — generic guides', () => {
+  test('renders nothing with no guides and no registered kind content', () => {
+    const html = renderToStaticMarkup(
+      <ArtboardGuidesOverlay rect={RECT} kind="digital" visibility={{}} />
+    );
+    expect(html).toBe('');
+  });
+
+  test('positions the overlay at the artboard world rect', () => {
+    const html = renderToStaticMarkup(
+      <ArtboardGuidesOverlay
+        rect={RECT}
+        kind="print"
+        guides={{ grid: { size: 40 } }}
+        visibility={{ guides: true }}
+      />
+    );
+    expect(html).toMatch(/left:\s*10px/);
+    expect(html).toMatch(/top:\s*20px/);
+    expect(html).toMatch(/width:\s*400px/);
+    expect(html).toMatch(/height:\s*200px/);
+    expect(html).toContain('aria-hidden="true"');
+    expect(html).toContain('pointer-events:none');
+  });
+
+  test('visibility.guides === false suppresses the generic guides', () => {
+    const html = renderToStaticMarkup(
+      <ArtboardGuidesOverlay
+        rect={RECT}
+        kind="print"
+        guides={{ grid: { size: 40 } }}
+        visibility={{ guides: false }}
+      />
+    );
+    expect(html).toBe('');
+  });
+
+  test('columns render as one band per column, respecting margin/gutter', () => {
+    const html = renderToStaticMarkup(
+      <ArtboardGuidesOverlay
+        rect={RECT}
+        kind="web"
+        guides={{ columns: { count: 4, gutter: 10, margin: 20 } }}
+        visibility={{ guides: true }}
+      />
+    );
+    // usable = 400 - 2*20 = 360; (360 - 3*10) / 4 = 82.5px per column, 4 bands.
+    const bandCount = (html.match(/width:82\.5px/g) || []).length;
+    expect(bandCount).toBe(4);
+  });
+
+  // Security review (defender + adversarial pass, /flow:done on 0e001da7) —
+  // columns/rows `count` had no cap, unlike the grid path: a malicious/
+  // poisoned canvas (guides is an authored JSX prop, part of the DDR-054
+  // untrusted-canvas surface) could set `columns.count` to a huge number and
+  // mount one <div> per band, freezing the viewer's tab. Regression-tests the
+  // MAX_BANDS_PER_AXIS clamp both independent reviews confirmed as the fix.
+  test('a pathologically large column count is clamped, never a runaway render', () => {
+    const html = renderToStaticMarkup(
+      <ArtboardGuidesOverlay
+        rect={RECT}
+        kind="web"
+        guides={{ columns: { count: 1_000_000_000, gutter: 0, margin: 0 } }}
+        visibility={{ guides: true }}
+      />
+    );
+    const bandCount = (html.match(/position:absolute/g) || []).length - 1; // minus the wrapper div
+    expect(bandCount).toBeLessThanOrEqual(64);
+    expect(bandCount).toBeGreaterThan(0);
+  });
+
+  test('a pathologically large row count is clamped the same way', () => {
+    const html = renderToStaticMarkup(
+      <ArtboardGuidesOverlay
+        rect={RECT}
+        kind="web"
+        guides={{ rows: { count: 999_999_999, gutter: 0, margin: 0 } }}
+        visibility={{ guides: true }}
+      />
+    );
+    const bandCount = (html.match(/position:absolute/g) || []).length - 1;
+    expect(bandCount).toBeLessThanOrEqual(64);
+    expect(bandCount).toBeGreaterThan(0);
+  });
+
+  test('grid lines are capped, never runaway for a degenerate small size', () => {
+    const html = renderToStaticMarkup(
+      <ArtboardGuidesOverlay
+        rect={{ x: 0, y: 0, w: 5000, h: 5000 }}
+        kind="digital"
+        guides={{ grid: { size: 2 } }}
+        visibility={{ guides: true }}
+      />
+    );
+    const lineCount = (html.match(/width:1px/g) || []).length;
+    expect(lineCount).toBeLessThanOrEqual(400);
+  });
+});
+
+describe('ArtboardGuidesOverlay — per-kind registry', () => {
+  test('registered kind renderer is invoked with rect/kind/guides/visibility', () => {
+    let seen: unknown;
+    registerKindOverlay('print', (props) => {
+      seen = props;
+      return <div data-testid="print-bleed" />;
+    });
+    const html = renderToStaticMarkup(
+      <ArtboardGuidesOverlay rect={RECT} kind="print" visibility={{ bleed: true }} />
+    );
+    expect(html).toContain('data-testid="print-bleed"');
+    expect(seen).toMatchObject({ rect: RECT, kind: 'print', visibility: { bleed: true } });
+  });
+
+  test('a renderer registered for one kind does not fire for another', () => {
+    registerKindOverlay('web', () => <div data-testid="breakpoint-band" />);
+    const html = renderToStaticMarkup(
+      <ArtboardGuidesOverlay rect={RECT} kind="print" visibility={{}} />
+    );
+    expect(html).not.toContain('breakpoint-band');
+  });
+
+  test('re-registering the same kind replaces the previous renderer (HMR-safe)', () => {
+    registerKindOverlay('print', () => <div data-testid="v1" />);
+    registerKindOverlay('print', () => <div data-testid="v2" />);
+    const html = renderToStaticMarkup(
+      <ArtboardGuidesOverlay rect={RECT} kind="print" visibility={{}} />
+    );
+    expect(html).not.toContain('v1');
+    expect(html).toContain('v2');
+  });
+});

package/apps/studio/test/artboard-kinds.test.tsx

@@ -0,0 +1,83 @@
+// artboard-kinds — feature-1-artboard-kinds-foundation, T1/T2.
+//
+// DCArtboard rendered OUTSIDE a DesignCanvas (no WorldContext, no rect) takes
+// the specimen/legacy early-return branch — it still computes + emits the
+// resolved `data-dc-kind` attribute (readBackAttrs is built before the
+// `!ctx || !rect` check), so that resolution logic is testable via
+// renderToStaticMarkup without a live DOM/layout pass. The label-strip kind
+// chip (T3) only renders in the full DesignCanvas layout path (like the
+// video corner badge it sits beside) — covered by /design:smoke, not here
+// (see use-canvas-activity.test.tsx's header comment for the same split).
+
+import { describe, expect, test } from 'bun:test';
+
+import { renderToStaticMarkup } from 'react-dom/server';
+
+import { DCArtboard } from '../canvas-lib.tsx';
+
+// Minimal displayName-only stand-in for VideoComp — subtreeHasVideoComp
+// identity-matches OR falls back to `displayName === 'VideoComp'` (the same
+// fallback minified builds rely on), so this exercises the fallback path
+// without pulling in the real VideoComp's rendering/registration machinery.
+function FakeVideoComp() {
+  return null;
+}
+FakeVideoComp.displayName = 'VideoComp';
+
+describe('DCArtboard kind resolution (data-dc-kind readback)', () => {
+  test('absent kind, no video subtree ⇒ digital', () => {
+    const html = renderToStaticMarkup(
+      <DCArtboard id="a" label="A" width={100} height={100}>
+        hi
+      </DCArtboard>
+    );
+    expect(html).toContain('data-dc-kind="digital"');
+  });
+
+  test('explicit kind="print" is emitted verbatim', () => {
+    const html = renderToStaticMarkup(
+      <DCArtboard id="a" label="A" width={100} height={100} kind="print">
+        hi
+      </DCArtboard>
+    );
+    expect(html).toContain('data-dc-kind="print"');
+  });
+
+  test('explicit kind="web" is emitted verbatim', () => {
+    const html = renderToStaticMarkup(
+      <DCArtboard id="a" label="A" width={100} height={100} kind="web">
+        hi
+      </DCArtboard>
+    );
+    expect(html).toContain('data-dc-kind="web"');
+  });
+
+  test('absent kind + VideoComp subtree ⇒ video fallback (Design Decision 1)', () => {
+    const html = renderToStaticMarkup(
+      <DCArtboard id="a" label="A" width={100} height={100}>
+        <FakeVideoComp />
+      </DCArtboard>
+    );
+    expect(html).toContain('data-dc-kind="video"');
+  });
+
+  test('explicit kind="digital" supersedes a VideoComp subtree', () => {
+    const html = renderToStaticMarkup(
+      <DCArtboard id="a" label="A" width={100} height={100} kind="digital">
+        <FakeVideoComp />
+      </DCArtboard>
+    );
+    expect(html).toContain('data-dc-kind="digital"');
+  });
+
+  test('digital kind (default) carries no other resolved-kind attribute value', () => {
+    const html = renderToStaticMarkup(
+      <DCArtboard id="a" label="A" width={100} height={100}>
+        hi
+      </DCArtboard>
+    );
+    expect(html).not.toContain('data-dc-kind="print"');
+    expect(html).not.toContain('data-dc-kind="web"');
+    expect(html).not.toContain('data-dc-kind="video"');
+  });
+});

package/apps/studio/test/artboard-selection-attrs.test.ts

@@ -0,0 +1,69 @@
+// Dogfood follow-up (print artboards) — whole-ARTBOARD selections must carry
+// the DCArtboard readBack attrs (`data-dc-kind`, `data-dc-print`, `data-dc-
+// fixed`, `data-dc-bg`, …) in `Selection.attrs`, because the Inspector's
+// ArtboardKnobs panel pre-fills its Kind picker / paper preset / Hug toggle /
+// Style fields from exactly these. ATTR_SKIP deliberately hides `data-dc-*`
+// from the generic custom-attributes surface on ORDINARY elements — the bug
+// was that the blanket skip also applied to the artboard element itself, so
+// every readback silently fell back to its default ('digital', screen
+// presets, Hug, empty Bg) no matter what the artboard actually was.
+//
+// Same happy-dom + hoverTargetToSelection harness as knob-props-authored.
+
+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 artboardSelection(attrsHtml: string) {
+  document.body.innerHTML = `<article class="dc-artboard" data-dc-screen="ab-1" ${attrsHtml}><div>content</div></article>`;
+  const el = document.querySelector('[data-dc-screen]') as HTMLElement;
+  const target: HoverTarget = { el, cdId: null, artboardId: 'ab-1' };
+  return hoverTargetToSelection(target);
+}
+
+describe('whole-artboard selection — data-dc-* readback attrs', () => {
+  test('data-dc-kind + data-dc-print reach Selection.attrs (the ArtboardKnobs payload)', () => {
+    const sel = artboardSelection(
+      'data-dc-kind="print" data-dc-print=\'{"paper":"a4","bleedMm":3}\''
+    );
+    expect(sel.attrs?.['data-dc-kind']).toBe('print');
+    expect(sel.attrs?.['data-dc-print']).toBe('{"paper":"a4","bleedMm":3}');
+  });
+
+  test('the other readback attrs come through too (fixed/bg/padding/layout/gap)', () => {
+    const sel = artboardSelection(
+      'data-dc-kind="digital" data-dc-fixed="true" data-dc-bg="var(--bg-1)" data-dc-padding="16" data-dc-layout="flex-col" data-dc-gap="8"'
+    );
+    expect(sel.attrs?.['data-dc-fixed']).toBe('true');
+    expect(sel.attrs?.['data-dc-bg']).toBe('var(--bg-1)');
+    expect(sel.attrs?.['data-dc-padding']).toBe('16');
+    expect(sel.attrs?.['data-dc-layout']).toBe('flex-col');
+    expect(sel.attrs?.['data-dc-gap']).toBe('8');
+  });
+
+  test('an ORDINARY element (no data-dc-screen) keeps the data-dc-* filter', () => {
+    document.body.innerHTML =
+      '<div data-cd-id="bbbbbbbb" data-dc-kind="print" data-custom="yes">x</div>';
+    const el = document.querySelector('[data-cd-id]') as HTMLElement;
+    const target: HoverTarget = { el, cdId: 'bbbbbbbb', artboardId: null };
+    const sel = hoverTargetToSelection(target);
+    // Engine plumbing stays hidden from the generic custom-attributes panel…
+    expect(sel.attrs?.['data-dc-kind']).toBeUndefined();
+    // …while genuinely custom attributes still surface.
+    expect(sel.attrs?.['data-custom']).toBe('yes');
+  });
+
+  test('data-dc-screen itself is included for the artboard (harmless, self-describing)', () => {
+    const sel = artboardSelection('data-dc-kind="print"');
+    expect(sel.attrs?.['data-dc-screen']).toBe('ab-1');
+  });
+});

package/apps/studio/test/canvas-meta-api.test.ts

@@ -357,3 +357,170 @@ describe('/_api/canvas-meta — GET/PATCH (DDR-115 camera split)', () => {
     }
   });
 });
+
+// feature-1-artboard-kinds-foundation, T6 — per-user overlay-visibility lane.
+// Same camera-split contract as `viewport` above: `overlays` lives ONLY in the
+// gitignored per-machine view file, never the versioned `.meta.json`.
+describe('/_api/canvas-meta — overlays lane (T6)', () => {
+  test('PATCH overlays leaves meta byte-unchanged + writes the view file', async () => {
+    const { root, designRoot } = makeSandbox();
+    const port = nextPort();
+    const proc = await bootServer(root, port);
+    try {
+      mkdirSync(join(designRoot, 'ui'), { recursive: true });
+      const tsxAbs = join(designRoot, 'ui', 'Overlays.tsx');
+      writeFileSync(tsxAbs, 'export default function O(){return <main/>}\n');
+      const metaAbs = tsxAbs.replace(/\.tsx$/, '.meta.json');
+      writeFileSync(metaAbs, JSON.stringify({ title: 'Overlays', sections: [] }));
+      const before = readFileSync(metaAbs, 'utf8');
+      const file = repoRel(designRoot, tsxAbs);
+
+      const r = await fetch(`http://localhost:${port}/_api/canvas-meta`, {
+        method: 'PATCH',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ file, patch: { overlays: { guides: true } } }),
+      });
+      expect(r.status).toBe(200);
+      const merged = (await r.json()) as MetaShape;
+      expect(merged.overlays).toEqual({ guides: true });
+
+      // KEYSTONE — versioned meta is byte-identical; no last_modified bump.
+      expect(readFileSync(metaAbs, 'utf8')).toBe(before);
+
+      const vAbs = viewPath(designRoot, 'ui-overlays');
+      expect(existsSync(vAbs)).toBe(true);
+      const view = JSON.parse(readFileSync(vAbs, 'utf8'));
+      expect(view.overlays).toEqual({ guides: true });
+    } finally {
+      await killProc(proc);
+    }
+  });
+
+  test('absent overlays key resolves to hidden (T6 Gotcha — old view files default off)', async () => {
+    const { root, designRoot } = makeSandbox();
+    const port = nextPort();
+    const proc = await bootServer(root, port);
+    try {
+      mkdirSync(join(designRoot, 'ui'), { recursive: true });
+      const tsxAbs = join(designRoot, 'ui', 'NoOverlays.tsx');
+      writeFileSync(tsxAbs, 'export default function N(){return <main/>}\n');
+      writeFileSync(tsxAbs.replace(/\.tsx$/, '.meta.json'), JSON.stringify({ title: 'N' }));
+      const file = repoRel(designRoot, tsxAbs);
+
+      const r = await fetch(
+        `http://localhost:${port}/_api/canvas-meta?file=${encodeURIComponent(file)}`
+      );
+      const m = (await r.json()) as MetaShape;
+      expect(m.overlays).toBeUndefined();
+    } finally {
+      await killProc(proc);
+    }
+  });
+
+  test('PATCH overlays merges with an existing viewport in the SAME view file', async () => {
+    const { root, designRoot } = makeSandbox();
+    const port = nextPort();
+    const proc = await bootServer(root, port);
+    try {
+      mkdirSync(join(designRoot, 'ui'), { recursive: true });
+      const tsxAbs = join(designRoot, 'ui', 'Both.tsx');
+      writeFileSync(tsxAbs, 'export default function B(){return <main/>}\n');
+      writeFileSync(tsxAbs.replace(/\.tsx$/, '.meta.json'), JSON.stringify({ title: 'B' }));
+      const file = repoRel(designRoot, tsxAbs);
+
+      await fetch(`http://localhost:${port}/_api/canvas-meta`, {
+        method: 'PATCH',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ file, patch: { viewport: { x: 3, y: 4, zoom: 1 } } }),
+      });
+      const r = await fetch(`http://localhost:${port}/_api/canvas-meta`, {
+        method: 'PATCH',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ file, patch: { overlays: { guides: true } } }),
+      });
+      const merged = (await r.json()) as MetaShape;
+      // Both lanes present — writing overlays didn't clobber the viewport.
+      expect(merged.viewport).toEqual({ x: 3, y: 4, zoom: 1 });
+      expect(merged.overlays).toEqual({ guides: true });
+
+      const view = JSON.parse(readFileSync(viewPath(designRoot, 'ui-both'), 'utf8'));
+      expect(view.viewport).toEqual({ x: 3, y: 4, zoom: 1 });
+      expect(view.overlays).toEqual({ guides: true });
+    } finally {
+      await killProc(proc);
+    }
+  });
+
+  test('PATCH overlays shallow-merges keys — a later patch keeps an earlier key', async () => {
+    const { root, designRoot } = makeSandbox();
+    const port = nextPort();
+    const proc = await bootServer(root, port);
+    try {
+      mkdirSync(join(designRoot, 'ui'), { recursive: true });
+      const tsxAbs = join(designRoot, 'ui', 'Merge2.tsx');
+      writeFileSync(tsxAbs, 'export default function M(){return <main/>}\n');
+      writeFileSync(tsxAbs.replace(/\.tsx$/, '.meta.json'), JSON.stringify({ title: 'M' }));
+      const file = repoRel(designRoot, tsxAbs);
+
+      await fetch(`http://localhost:${port}/_api/canvas-meta`, {
+        method: 'PATCH',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ file, patch: { overlays: { guides: true } } }),
+      });
+      const r = await fetch(`http://localhost:${port}/_api/canvas-meta`, {
+        method: 'PATCH',
+        headers: { 'content-type': 'application/json' },
+        // A downstream plan (print) toggling ITS OWN key shouldn't erase `guides`.
+        body: JSON.stringify({ file, patch: { overlays: { bleed: true } } }),
+      });
+      const merged = (await r.json()) as MetaShape;
+      expect(merged.overlays).toEqual({ guides: true, bleed: true });
+    } finally {
+      await killProc(proc);
+    }
+  });
+
+  test('PATCH ignores a malformed overlays bag (non-boolean value) — silent no-op', async () => {
+    const { root, designRoot } = makeSandbox();
+    const port = nextPort();
+    const proc = await bootServer(root, port);
+    try {
+      mkdirSync(join(designRoot, 'ui'), { recursive: true });
+      const tsxAbs = join(designRoot, 'ui', 'Malformed.tsx');
+      writeFileSync(tsxAbs, 'export default function X(){return <main/>}\n');
+      writeFileSync(tsxAbs.replace(/\.tsx$/, '.meta.json'), JSON.stringify({ title: 'X' }));
+      const file = repoRel(designRoot, tsxAbs);
+
+      const r = await fetch(`http://localhost:${port}/_api/canvas-meta`, {
+        method: 'PATCH',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ file, patch: { overlays: { guides: 'yes' } } }),
+      });
+      expect(r.status).toBe(200);
+      const merged = (await r.json()) as MetaShape;
+      expect(merged.overlays).toBeUndefined();
+      expect(existsSync(viewPath(designRoot, 'ui-malformed'))).toBe(false);
+    } finally {
+      await killProc(proc);
+    }
+  });
+
+  test('PATCH overlays on a non-existent canvas is refused (404), mints no file', async () => {
+    const { root, designRoot } = makeSandbox();
+    const port = nextPort();
+    const proc = await bootServer(root, port);
+    try {
+      mkdirSync(join(designRoot, 'ui'), { recursive: true });
+      const file = '.design/ui/GhostOverlays.tsx';
+      const r = await fetch(`http://localhost:${port}/_api/canvas-meta`, {
+        method: 'PATCH',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ file, patch: { overlays: { guides: true } } }),
+      });
+      expect(r.status).toBe(404);
+      expect(existsSync(viewPath(designRoot, 'ui-ghostoverlays'))).toBe(false);
+    } finally {
+      await killProc(proc);
+    }
+  });
+});