@craft-ts/style-testing 0.7.0-beta.15

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@craft-ts/style-testing",
+  "version": "0.7.0-beta.15",
+  "description": "Visual scenario matrix and drivers for @craft-ts/style",
+  "author": "Romain Geffrault",
+  "license": "MIT",
+  "homepage": "https://craft-ts.github.io/craft/",
+  "bugs": {
+    "url": "https://github.com/craft-ts/craft-ts/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/craft-ts/craft-ts.git"
+  },
+  "peerDependencies": {
+    "@craft-ts/style": "^0.7.0-beta.0",
+    "tslib": "^2.3.0"
+  },
+  "engines": {
+    "node": ">=20.19.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "type": "module",
+  "main": "./src/index.js",
+  "types": "./src/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./src/index.d.ts",
+      "default": "./src/index.js"
+    }
+  },
+  "module": "./src/index.js"
+}

package/src/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * `@craft-ts/style-testing` — what a component can look like, enumerated.
+ *
+ * The matrix comes from the metadata the sheets already carry: an axis a class
+ * never crosses contributes nothing, and every point it does cross carries the
+ * driver that reaches it. Nothing here parses CSS or re-derives the design
+ * system; it reads the same registry the emitter reads.
+ */
+export * from './lib/matrix.ts';
+export * from './lib/drivers.ts';
+export * from './lib/exhaustive.ts';
+//# sourceMappingURL=index.d.ts.map

package/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../libs/style-testing/src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC"}

package/src/index.js

@@ -0,0 +1,12 @@
+/**
+ * `@craft-ts/style-testing` — what a component can look like, enumerated.
+ *
+ * The matrix comes from the metadata the sheets already carry: an axis a class
+ * never crosses contributes nothing, and every point it does cross carries the
+ * driver that reaches it. Nothing here parses CSS or re-derives the design
+ * system; it reads the same registry the emitter reads.
+ */
+export * from "./lib/matrix.js";
+export * from "./lib/drivers.js";
+export * from "./lib/exhaustive.js";
+//# sourceMappingURL=index.js.map

package/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../libs/style-testing/src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC","sourcesContent":["/**\n * `@craft-ts/style-testing` — what a component can look like, enumerated.\n *\n * The matrix comes from the metadata the sheets already carry: an axis a class\n * never crosses contributes nothing, and every point it does cross carries the\n * driver that reaches it. Nothing here parses CSS or re-derives the design\n * system; it reads the same registry the emitter reads.\n */\nexport * from './lib/matrix.ts';\nexport * from './lib/drivers.ts';\nexport * from './lib/exhaustive.ts';\n"]}

package/src/lib/drivers.d.ts

@@ -0,0 +1,34 @@
+import type { ScenarioDriver, VisualScenario } from './matrix.ts';
+export interface ScenarioPage {
+    setViewportSize(size: {
+        width: number;
+        height: number;
+    }): Promise<unknown>;
+    emulateMedia(options: Readonly<Record<string, string>>): Promise<unknown>;
+    evaluate<Argument>(body: (argument: Argument) => unknown, argument: Argument): Promise<unknown>;
+}
+export interface ApplyOptions {
+    /** Selector of the element the scenario applies to. Defaults to the root. */
+    readonly target?: string;
+    /** Viewport height to keep while the width follows the breakpoints. */
+    readonly height?: number;
+}
+/** `40rem` → 640. The drivers speak CSS; a viewport is a number of pixels. */
+export declare function toPixels(length: string): number;
+/**
+ * The one place application order is decided.
+ *
+ * `visualMatrix` stores the drivers sorted by axis, which is stable and reads
+ * well; it is deliberately not the order they must be applied in. Anything that
+ * applies a scenario by hand goes through this, so there is a single answer to
+ * "in what order" rather than one per caller.
+ */
+export declare const orderedDrivers: (drivers: readonly ScenarioDriver[]) => readonly ScenarioDriver[];
+/**
+ * Applies every driver of a scenario, in a deterministic order.
+ *
+ * A driver that cannot be honoured throws rather than being skipped: a skipped
+ * driver produces a capture that looks like the base state and passes forever.
+ */
+export declare function applyScenario(page: ScenarioPage, scenario: VisualScenario, options?: ApplyOptions): Promise<void>;
+//# sourceMappingURL=drivers.d.ts.map

package/src/lib/drivers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drivers.d.ts","sourceRoot":"","sources":["../../../../../libs/style-testing/src/lib/drivers.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElE,MAAM,WAAW,YAAY;IAC3B,eAAe,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAC3E,YAAY,CAAC,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAC1E,QAAQ,CAAC,QAAQ,EACf,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,OAAO,EACrC,QAAQ,EAAE,QAAQ,GACjB,OAAO,CAAC,OAAO,CAAC,CAAC;CACrB;AAED,MAAM,WAAW,YAAY;IAC3B,6EAA6E;IAC7E,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,uEAAuE;IACvE,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;CAC1B;AAID,8EAA8E;AAC9E,wBAAgB,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAS/C;AAWD;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,GACzB,SAAS,SAAS,cAAc,EAAE,KACjC,SAAS,cAAc,EAKvB,CAAC;AAEJ;;;;;GAKG;AACH,wBAAsB,aAAa,CACjC,IAAI,EAAE,YAAY,EAClB,QAAQ,EAAE,cAAc,EACxB,OAAO,GAAE,YAAiB,GACzB,OAAO,CAAC,IAAI,CAAC,CAwCf"}

package/src/lib/drivers.js

@@ -0,0 +1,137 @@
+const REM = 16;
+/** `40rem` → 640. The drivers speak CSS; a viewport is a number of pixels. */
+export function toPixels(length) {
+    const match = /^(-?[\d.]+)(px|rem|em)$/.exec(length.trim());
+    if (!match) {
+        throw new Error(`applyScenario: '${length}' is not a length this driver can turn into a viewport width. Breakpoints must be built from px, rem or em.`);
+    }
+    const amount = Number(match[1]);
+    return Math.ceil(match[2] === 'px' ? amount : amount * REM);
+}
+const RANK = {
+    emulateMedia: 0,
+    resize: 1,
+    resizeContainer: 2,
+    setAttribute: 3,
+    descendantState: 4,
+    scroll: 5,
+};
+/**
+ * The one place application order is decided.
+ *
+ * `visualMatrix` stores the drivers sorted by axis, which is stable and reads
+ * well; it is deliberately not the order they must be applied in. Anything that
+ * applies a scenario by hand goes through this, so there is a single answer to
+ * "in what order" rather than one per caller.
+ */
+export const orderedDrivers = (drivers) => [...drivers].sort((left, right) => RANK[left.driver.kind] - RANK[right.driver.kind] ||
+    left.axis.localeCompare(right.axis));
+/**
+ * Applies every driver of a scenario, in a deterministic order.
+ *
+ * A driver that cannot be honoured throws rather than being skipped: a skipped
+ * driver produces a capture that looks like the base state and passes forever.
+ */
+export async function applyScenario(page, scenario, options = {}) {
+    const target = options.target ?? ':root';
+    for (const entry of orderedDrivers(scenario.drivers)) {
+        const driver = entry.driver;
+        switch (driver.kind) {
+            case 'emulateMedia':
+                await page.emulateMedia({
+                    [mediaOption(driver.feature)]: driver.value,
+                });
+                break;
+            case 'resize':
+                await page.setViewportSize({
+                    width: toPixels(driver.minInlineSize),
+                    height: options.height ?? 900,
+                });
+                break;
+            case 'resizeContainer':
+                await page.evaluate(applyContainerWidth, {
+                    container: driver.container,
+                    width: toPixels(driver.minInlineSize),
+                });
+                break;
+            case 'setAttribute':
+                await page.evaluate(applyAttribute, {
+                    target,
+                    name: driver.name,
+                    value: driver.value,
+                });
+                break;
+            case 'descendantState':
+                await page.evaluate(applyDescendantState, {
+                    target,
+                    state: driver.state,
+                });
+                break;
+            case 'scroll':
+                await page.evaluate(applyScroll, { target, to: driver.to });
+                break;
+        }
+    }
+}
+const mediaOption = (feature) => ({
+    'prefers-color-scheme': 'colorScheme',
+    'prefers-reduced-motion': 'reducedMotion',
+    'forced-colors': 'forcedColors',
+    'prefers-contrast': 'contrast',
+})[feature];
+// The bodies below run in the page, so they take a single serialisable
+// argument and reach for nothing from this module's scope.
+function applyContainerWidth(input) {
+    const element = document.querySelector(`[data-container='${input.container}']`);
+    if (!element) {
+        throw new Error(`applyScenario: no element carries data-container='${input.container}'. A container axis needs the container it queries to exist on the page.`);
+    }
+    element.style.inlineSize = `${input.width}px`;
+}
+function applyAttribute(input) {
+    const element = document.querySelector(input.target);
+    if (!element) {
+        throw new Error(`applyScenario: no element matches '${input.target}'.`);
+    }
+    element.setAttribute(input.name, input.value);
+}
+function applyDescendantState(input) {
+    const root = document.querySelector(input.target);
+    if (!root) {
+        throw new Error(`applyScenario: no element matches '${input.target}'.`);
+    }
+    if (input.state === 'checked') {
+        const box = root.querySelector('input[type=checkbox], input[type=radio]');
+        if (!box)
+            throw new Error('applyScenario: no checkable descendant.');
+        box.checked = true;
+        box.dispatchEvent(new Event('change', { bubbles: true }));
+        return;
+    }
+    if (input.state === 'focus-visible') {
+        const focusable = root.querySelector('a[href], button, input, select, textarea, [tabindex]');
+        if (!focusable)
+            throw new Error('applyScenario: no focusable descendant.');
+        focusable.focus();
+        return;
+    }
+    const field = root.querySelector('input, select, textarea');
+    if (!field)
+        throw new Error('applyScenario: no field descendant.');
+    // `:user-invalid` needs the user to have interacted, not just an invalid
+    // value — blurring after a change is the shortest honest way there.
+    field.value = field.getAttribute('data-invalid-value') ?? '@';
+    field.dispatchEvent(new Event('input', { bubbles: true }));
+    field.dispatchEvent(new Event('change', { bubbles: true }));
+    field.blur();
+}
+function applyScroll(input) {
+    const element = document.querySelector(input.target);
+    const scroller = element && element.scrollHeight > element.clientHeight
+        ? element
+        : document.scrollingElement;
+    if (!scroller)
+        throw new Error('applyScenario: nothing to scroll.');
+    scroller.scrollTop = input.to === 'start' ? 0 : scroller.scrollHeight;
+}
+//# sourceMappingURL=drivers.js.map

package/src/lib/drivers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drivers.js","sourceRoot":"","sources":["../../../../../libs/style-testing/src/lib/drivers.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Putting a page into a scenario.\n *\n * The page is described structurally rather than imported from Playwright: the\n * package stays usable from a plain browser harness, and a consumer that does\n * use Playwright passes its `Page` unchanged because the shape matches.\n *\n * Order matters and is fixed here. Emulation and viewport first, because they\n * relayout; then container width; then DOM state; then scrolling, which depends\n * on everything above it. Applying them in registration order instead would\n * make a capture depend on which axis someone declared first.\n */\nimport type { AnyAxisPoint } from '@craft-ts/style';\nimport type { ScenarioDriver, VisualScenario } from './matrix.ts';\n\nexport interface ScenarioPage {\n  setViewportSize(size: { width: number; height: number }): Promise<unknown>;\n  emulateMedia(options: Readonly<Record<string, string>>): Promise<unknown>;\n  evaluate<Argument>(\n    body: (argument: Argument) => unknown,\n    argument: Argument,\n  ): Promise<unknown>;\n}\n\nexport interface ApplyOptions {\n  /** Selector of the element the scenario applies to. Defaults to the root. */\n  readonly target?: string;\n  /** Viewport height to keep while the width follows the breakpoints. */\n  readonly height?: number;\n}\n\nconst REM = 16;\n\n/** `40rem` → 640. The drivers speak CSS; a viewport is a number of pixels. */\nexport function toPixels(length: string): number {\n  const match = /^(-?[\\d.]+)(px|rem|em)$/.exec(length.trim());\n  if (!match) {\n    throw new Error(\n      `applyScenario: '${length}' is not a length this driver can turn into a viewport width. Breakpoints must be built from px, rem or em.`,\n    );\n  }\n  const amount = Number(match[1]);\n  return Math.ceil(match[2] === 'px' ? amount : amount * REM);\n}\n\nconst RANK: Readonly<Record<ScenarioDriver['driver']['kind'], number>> = {\n  emulateMedia: 0,\n  resize: 1,\n  resizeContainer: 2,\n  setAttribute: 3,\n  descendantState: 4,\n  scroll: 5,\n};\n\n/**\n * The one place application order is decided.\n *\n * `visualMatrix` stores the drivers sorted by axis, which is stable and reads\n * well; it is deliberately not the order they must be applied in. Anything that\n * applies a scenario by hand goes through this, so there is a single answer to\n * \"in what order\" rather than one per caller.\n */\nexport const orderedDrivers = (\n  drivers: readonly ScenarioDriver[],\n): readonly ScenarioDriver[] =>\n  [...drivers].sort(\n    (left, right) =>\n      RANK[left.driver.kind] - RANK[right.driver.kind] ||\n      left.axis.localeCompare(right.axis),\n  );\n\n/**\n * Applies every driver of a scenario, in a deterministic order.\n *\n * A driver that cannot be honoured throws rather than being skipped: a skipped\n * driver produces a capture that looks like the base state and passes forever.\n */\nexport async function applyScenario(\n  page: ScenarioPage,\n  scenario: VisualScenario,\n  options: ApplyOptions = {},\n): Promise<void> {\n  const target = options.target ?? ':root';\n  for (const entry of orderedDrivers(scenario.drivers)) {\n    const driver = entry.driver;\n    switch (driver.kind) {\n      case 'emulateMedia':\n        await page.emulateMedia({\n          [mediaOption(driver.feature)]: driver.value,\n        });\n        break;\n      case 'resize':\n        await page.setViewportSize({\n          width: toPixels(driver.minInlineSize),\n          height: options.height ?? 900,\n        });\n        break;\n      case 'resizeContainer':\n        await page.evaluate(applyContainerWidth, {\n          container: driver.container,\n          width: toPixels(driver.minInlineSize),\n        });\n        break;\n      case 'setAttribute':\n        await page.evaluate(applyAttribute, {\n          target,\n          name: driver.name,\n          value: driver.value,\n        });\n        break;\n      case 'descendantState':\n        await page.evaluate(applyDescendantState, {\n          target,\n          state: driver.state,\n        });\n        break;\n      case 'scroll':\n        await page.evaluate(applyScroll, { target, to: driver.to });\n        break;\n    }\n  }\n}\n\nconst mediaOption = (\n  feature: Extract<AnyAxisPoint['driver'], { kind: 'emulateMedia' }>['feature'],\n): string =>\n  ({\n    'prefers-color-scheme': 'colorScheme',\n    'prefers-reduced-motion': 'reducedMotion',\n    'forced-colors': 'forcedColors',\n    'prefers-contrast': 'contrast',\n  })[feature];\n\n// The bodies below run in the page, so they take a single serialisable\n// argument and reach for nothing from this module's scope.\n\nfunction applyContainerWidth(input: {\n  container: string;\n  width: number;\n}): void {\n  const element = document.querySelector<HTMLElement>(\n    `[data-container='${input.container}']`,\n  );\n  if (!element) {\n    throw new Error(\n      `applyScenario: no element carries data-container='${input.container}'. A container axis needs the container it queries to exist on the page.`,\n    );\n  }\n  element.style.inlineSize = `${input.width}px`;\n}\n\nfunction applyAttribute(input: {\n  target: string;\n  name: string;\n  value: string;\n}): void {\n  const element = document.querySelector(input.target);\n  if (!element) {\n    throw new Error(`applyScenario: no element matches '${input.target}'.`);\n  }\n  element.setAttribute(input.name, input.value);\n}\n\nfunction applyDescendantState(input: {\n  target: string;\n  state: 'user-invalid' | 'focus-visible' | 'checked';\n}): void {\n  const root = document.querySelector(input.target);\n  if (!root) {\n    throw new Error(`applyScenario: no element matches '${input.target}'.`);\n  }\n  if (input.state === 'checked') {\n    const box = root.querySelector<HTMLInputElement>(\n      'input[type=checkbox], input[type=radio]',\n    );\n    if (!box) throw new Error('applyScenario: no checkable descendant.');\n    box.checked = true;\n    box.dispatchEvent(new Event('change', { bubbles: true }));\n    return;\n  }\n  if (input.state === 'focus-visible') {\n    const focusable = root.querySelector<HTMLElement>(\n      'a[href], button, input, select, textarea, [tabindex]',\n    );\n    if (!focusable) throw new Error('applyScenario: no focusable descendant.');\n    focusable.focus();\n    return;\n  }\n  const field = root.querySelector<HTMLInputElement>('input, select, textarea');\n  if (!field) throw new Error('applyScenario: no field descendant.');\n  // `:user-invalid` needs the user to have interacted, not just an invalid\n  // value — blurring after a change is the shortest honest way there.\n  field.value = field.getAttribute('data-invalid-value') ?? '@';\n  field.dispatchEvent(new Event('input', { bubbles: true }));\n  field.dispatchEvent(new Event('change', { bubbles: true }));\n  field.blur();\n}\n\nfunction applyScroll(input: {\n  target: string;\n  to: 'start' | 'end' | 'snap';\n}): void {\n  const element = document.querySelector(input.target);\n  const scroller =\n    element && element.scrollHeight > element.clientHeight\n      ? element\n      : document.scrollingElement;\n  if (!scroller) throw new Error('applyScenario: nothing to scroll.');\n  scroller.scrollTop = input.to === 'start' ? 0 : scroller.scrollHeight;\n}\n"]}

package/src/lib/exhaustive.d.ts

@@ -0,0 +1,30 @@
+/**
+ * The assertion that a matrix is actually covered.
+ *
+ * **Post-inference, always.** A self-referential constraint on the component's
+ * own declaration resolves the union to `never` and the check silently passes —
+ * the same shape as `assertExhaustiveRouteExceptions`, and the same reason.
+ * The matrix is computed first, the baselines are read second, and the two are
+ * compared as values.
+ */
+import type { VisualScenario } from './matrix.ts';
+export interface CoverageReport {
+    /** Scenarios the matrix produced and no baseline covers. */
+    readonly missing: readonly string[];
+    /** Baselines that no scenario produces any more. */
+    readonly orphaned: readonly string[];
+    readonly total: number;
+}
+export declare const BASELINE_SUFFIX = ".png";
+/** Turns a directory listing into the baseline names a matrix is compared to. */
+export declare const baselinesIn: (files: readonly string[]) => readonly string[];
+export declare function coverageOf(scenarios: readonly VisualScenario[], baselines: readonly string[]): CoverageReport;
+/**
+ * Fails when the matrix and the baselines disagree, in either direction.
+ *
+ * An orphaned baseline matters as much as a missing one: it is a state the
+ * component used to have, and a reviewer looking at the folder would still
+ * count it as covered.
+ */
+export declare function assertExhaustiveVisualMatrix(scenarios: readonly VisualScenario[], baselines: readonly string[]): void;
+//# sourceMappingURL=exhaustive.d.ts.map

package/src/lib/exhaustive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"exhaustive.d.ts","sourceRoot":"","sources":["../../../../../libs/style-testing/src/lib/exhaustive.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,4DAA4D;IAC5D,QAAQ,CAAC,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;IACpC,oDAAoD;IACpD,QAAQ,CAAC,QAAQ,EAAE,SAAS,MAAM,EAAE,CAAC;IACrC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,eAAe,SAAS,CAAC;AAEtC,iFAAiF;AACjF,eAAO,MAAM,WAAW,GAAI,OAAO,SAAS,MAAM,EAAE,KAAG,SAAS,MAAM,EAI3D,CAAC;AAEZ,wBAAgB,UAAU,CACxB,SAAS,EAAE,SAAS,cAAc,EAAE,EACpC,SAAS,EAAE,SAAS,MAAM,EAAE,GAC3B,cAAc,CAQhB;AAED;;;;;;GAMG;AACH,wBAAgB,4BAA4B,CAC1C,SAAS,EAAE,SAAS,cAAc,EAAE,EACpC,SAAS,EAAE,SAAS,MAAM,EAAE,GAC3B,IAAI,CAoBN"}

package/src/lib/exhaustive.js

@@ -0,0 +1,38 @@
+export const BASELINE_SUFFIX = '.png';
+/** Turns a directory listing into the baseline names a matrix is compared to. */
+export const baselinesIn = (files) => files
+    .filter((file) => file.endsWith(BASELINE_SUFFIX))
+    .map((file) => file.slice(0, -BASELINE_SUFFIX.length))
+    .sort();
+export function coverageOf(scenarios, baselines) {
+    const produced = new Set(scenarios.map((scenario) => scenario.id));
+    const covered = new Set(baselines);
+    return {
+        missing: [...produced].filter((id) => !covered.has(id)).sort(),
+        orphaned: [...covered].filter((id) => !produced.has(id)).sort(),
+        total: produced.size,
+    };
+}
+/**
+ * Fails when the matrix and the baselines disagree, in either direction.
+ *
+ * An orphaned baseline matters as much as a missing one: it is a state the
+ * component used to have, and a reviewer looking at the folder would still
+ * count it as covered.
+ */
+export function assertExhaustiveVisualMatrix(scenarios, baselines) {
+    const report = coverageOf(scenarios, baselines);
+    if (report.missing.length === 0 && report.orphaned.length === 0)
+        return;
+    const lines = [
+        `assertExhaustiveVisualMatrix: the matrix has ${report.total} scenarios and the baselines do not match it.`,
+    ];
+    if (report.missing.length) {
+        lines.push(`  Never captured (${report.missing.length}): ${report.missing.join(', ')}.`, '  Each one is a way this component can look that nobody has ever looked at.');
+    }
+    if (report.orphaned.length) {
+        lines.push(`  No longer produced (${report.orphaned.length}): ${report.orphaned.join(', ')}.`, '  A baseline nothing produces still reads as coverage; delete it or restore the state.');
+    }
+    throw new Error(lines.join('\n'));
+}
+//# sourceMappingURL=exhaustive.js.map

package/src/lib/exhaustive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"exhaustive.js","sourceRoot":"","sources":["../../../../../libs/style-testing/src/lib/exhaustive.ts"],"names":[],"mappings":"AAmBA,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC;AAEtC,iFAAiF;AACjF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAwB,EAAqB,EAAE,CACzE,KAAK;KACF,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;KAChD,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;KACrD,IAAI,EAAE,CAAC;AAEZ,MAAM,UAAU,UAAU,CACxB,SAAoC,EACpC,SAA4B;IAE5B,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;IACnE,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,SAAS,CAAC,CAAC;IACnC,OAAO;QACL,OAAO,EAAE,CAAC,GAAG,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE;QAC9D,QAAQ,EAAE,CAAC,GAAG,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE;QAC/D,KAAK,EAAE,QAAQ,CAAC,IAAI;KACrB,CAAC;AACJ,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,4BAA4B,CAC1C,SAAoC,EACpC,SAA4B;IAE5B,MAAM,MAAM,GAAG,UAAU,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAChD,IAAI,MAAM,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,IAAI,MAAM,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO;IAExE,MAAM,KAAK,GAAG;QACZ,gDAAgD,MAAM,CAAC,KAAK,+CAA+C;KAC5G,CAAC;IACF,IAAI,MAAM,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;QAC1B,KAAK,CAAC,IAAI,CACR,qBAAqB,MAAM,CAAC,OAAO,CAAC,MAAM,MAAM,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAC5E,6EAA6E,CAC9E,CAAC;IACJ,CAAC;IACD,IAAI,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;QAC3B,KAAK,CAAC,IAAI,CACR,yBAAyB,MAAM,CAAC,QAAQ,CAAC,MAAM,MAAM,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAClF,wFAAwF,CACzF,CAAC;IACJ,CAAC;IACD,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;AACpC,CAAC","sourcesContent":["/**\n * The assertion that a matrix is actually covered.\n *\n * **Post-inference, always.** A self-referential constraint on the component's\n * own declaration resolves the union to `never` and the check silently passes —\n * the same shape as `assertExhaustiveRouteExceptions`, and the same reason.\n * The matrix is computed first, the baselines are read second, and the two are\n * compared as values.\n */\nimport type { VisualScenario } from './matrix.ts';\n\nexport interface CoverageReport {\n  /** Scenarios the matrix produced and no baseline covers. */\n  readonly missing: readonly string[];\n  /** Baselines that no scenario produces any more. */\n  readonly orphaned: readonly string[];\n  readonly total: number;\n}\n\nexport const BASELINE_SUFFIX = '.png';\n\n/** Turns a directory listing into the baseline names a matrix is compared to. */\nexport const baselinesIn = (files: readonly string[]): readonly string[] =>\n  files\n    .filter((file) => file.endsWith(BASELINE_SUFFIX))\n    .map((file) => file.slice(0, -BASELINE_SUFFIX.length))\n    .sort();\n\nexport function coverageOf(\n  scenarios: readonly VisualScenario[],\n  baselines: readonly string[],\n): CoverageReport {\n  const produced = new Set(scenarios.map((scenario) => scenario.id));\n  const covered = new Set(baselines);\n  return {\n    missing: [...produced].filter((id) => !covered.has(id)).sort(),\n    orphaned: [...covered].filter((id) => !produced.has(id)).sort(),\n    total: produced.size,\n  };\n}\n\n/**\n * Fails when the matrix and the baselines disagree, in either direction.\n *\n * An orphaned baseline matters as much as a missing one: it is a state the\n * component used to have, and a reviewer looking at the folder would still\n * count it as covered.\n */\nexport function assertExhaustiveVisualMatrix(\n  scenarios: readonly VisualScenario[],\n  baselines: readonly string[],\n): void {\n  const report = coverageOf(scenarios, baselines);\n  if (report.missing.length === 0 && report.orphaned.length === 0) return;\n\n  const lines = [\n    `assertExhaustiveVisualMatrix: the matrix has ${report.total} scenarios and the baselines do not match it.`,\n  ];\n  if (report.missing.length) {\n    lines.push(\n      `  Never captured (${report.missing.length}): ${report.missing.join(', ')}.`,\n      '  Each one is a way this component can look that nobody has ever looked at.',\n    );\n  }\n  if (report.orphaned.length) {\n    lines.push(\n      `  No longer produced (${report.orphaned.length}): ${report.orphaned.join(', ')}.`,\n      '  A baseline nothing produces still reads as coverage; delete it or restore the state.',\n    );\n  }\n  throw new Error(lines.join('\\n'));\n}\n"]}

package/src/lib/matrix.d.ts

@@ -0,0 +1,106 @@
+/**
+ * The visual matrix: every way a component can look, enumerated.
+ *
+ * It is computed **at runtime**, from the metadata the style values already
+ * carry. Types only check the cardinal and the identifiers (see
+ * `exhaustive.ts`) — materialising the cartesian product in the type system is
+ * how you meet TS2589.
+ *
+ * The product is **complete**. The one reduction already banked happens
+ * upstream, in the sheet: only the points a class actually crosses are in its
+ * contract, so an axis with six breakpoints that a component cuts at one
+ * contributes two cells, not seven. No further reduction is applied here — a
+ * coverage that claims to be complete without being complete is worse than no
+ * coverage at all.
+ */
+import { type AnyAxisPoint } from '@craft-ts/style';
+export interface ScenarioDriver {
+    readonly axis: string;
+    readonly point: string;
+    readonly driver: AnyAxisPoint['driver'];
+}
+export interface VisualScenario {
+    /**
+     * `scheme=dark+viewport=md` — sorted, and stable under the addition of an
+     * unrelated axis.
+     *
+     * Only the axes away from `base` appear. An identifier that listed every axis
+     * would change the moment someone adds one somewhere else in the app, and
+     * every baseline in the suite would be invalidated by a change that affects
+     * none of them.
+     */
+    readonly id: string;
+    readonly axes: Readonly<Record<string, string>>;
+    readonly drivers: readonly ScenarioDriver[];
+    /** Set when a content case was crossed in — see `contentCases`. */
+    readonly content?: string;
+}
+/** What `craftStyles` returns: a record of branded class strings. */
+export type StyleSheetClasses = Readonly<Record<string, string>>;
+export interface MatrixOptions {
+    /**
+     * Container axes resolved by the component itself.
+     *
+     * A container axis answers "how wide is my box", which nobody above the
+     * container can change. Naming the container here closes the axis at this
+     * component instead of handing it to every ancestor.
+     */
+    readonly resolves?: readonly string[];
+    /**
+     * Axis points the component's own structure makes unreachable — a scroll
+     * state under a `scrollPort.none`, for instance. Pruned rather than captured.
+     */
+    readonly unreachable?: readonly string[];
+}
+declare const BRANCH: unique symbol;
+/**
+ * Two sets of sheets that are never on screen at the same time.
+ *
+ * An `ifNode` renders one side or the other, so the states of the two branches
+ * **add up** — they do not multiply. Told nothing, the matrix would cross a
+ * footer's three tones with a header's two breakpoints and ask for six captures
+ * of pages that cannot exist.
+ *
+ * This is the single highest-leverage reduction in the whole system, and the
+ * only one that is exactly true rather than probably true: the branches are
+ * mutually exclusive by construction, not by analysis.
+ *
+ * The plan infers it from the `ifNode` node's own type. It is declared here,
+ * for the same reason the matrix takes sheets rather than components — and the
+ * cost of that choice is stated plainly: a branch nobody declares is counted as
+ * co-present, which over-captures rather than under-captures.
+ */
+export interface Branch {
+    readonly [BRANCH]: true;
+    readonly name: string;
+    readonly whenTrue: MatrixInput;
+    readonly whenFalse: MatrixInput;
+}
+export declare const branch: (name: string, whenTrue: MatrixInput, whenFalse?: MatrixInput) => Branch;
+export type MatrixInput = string | StyleSheetClasses | Branch | readonly MatrixInput[];
+/**
+ * Every visual state of the given sheets.
+ *
+ * Takes what a component actually uses: one sheet, several, or the class
+ * strings themselves. There is deliberately no `visualMatrix(Component)` — a
+ * component's classes are only knowable by rendering it, and a matrix that
+ * silently missed a child's sheet would be the worst possible outcome. Naming
+ * the sheets is explicit and checkable.
+ */
+export declare function visualMatrix(input: MatrixInput, options?: MatrixOptions): readonly VisualScenario[];
+export declare function identify(axes: Readonly<Record<string, string>>, content?: string): string;
+/**
+ * Data cases, crossed into the matrix.
+ *
+ * The matrix covers *conditions*, not *data* — and the eighty-character title,
+ * the empty list and the seven-figure price are what break layouts most often.
+ * No type can derive them, so they are declared.
+ *
+ * The crossing rule: a content case is rendered at **one** point of each axis,
+ * except on the axes that change the space available — viewport and container —
+ * where the crossing is complete. A long title behaves differently at two
+ * widths; it does not behave differently in two colour schemes.
+ */
+export declare function contentCases(scenarios: readonly VisualScenario[], cases: Readonly<Record<string, unknown>>): readonly VisualScenario[];
+export {};
+//# sourceMappingURL=matrix.d.ts.map

package/src/lib/matrix.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"matrix.d.ts","sourceRoot":"","sources":["../../../../../libs/style-testing/src/lib/matrix.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAGL,KAAK,YAAY,EAElB,MAAM,iBAAiB,CAAC;AAEzB,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,cAAc;IAC7B;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAChD,QAAQ,CAAC,OAAO,EAAE,SAAS,cAAc,EAAE,CAAC;IAC5C,mEAAmE;IACnE,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,qEAAqE;AACrE,MAAM,MAAM,iBAAiB,GAAG,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;AAEjE,MAAM,WAAW,aAAa;IAC5B;;;;;;OAMG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACtC;;;OAGG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CAC1C;AAkBD,OAAO,CAAC,MAAM,MAAM,EAAE,OAAO,MAAM,CAAC;AAEpC;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,MAAM;IACrB,QAAQ,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC;IACxB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,QAAQ,EAAE,WAAW,CAAC;IAC/B,QAAQ,CAAC,SAAS,EAAE,WAAW,CAAC;CACjC;AAED,eAAO,MAAM,MAAM,GACjB,MAAM,MAAM,EACZ,UAAU,WAAW,EACrB,YAAW,WAAgB,KAC1B,MAAmD,CAAC;AAKvD,MAAM,MAAM,WAAW,GACnB,MAAM,GACN,iBAAiB,GACjB,MAAM,GACN,SAAS,WAAW,EAAE,CAAC;AA8B3B;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,WAAW,EAClB,OAAO,GAAE,aAAkB,GAC1B,SAAS,cAAc,EAAE,CAuB3B;AAyED,wBAAgB,QAAQ,CACtB,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EACtC,OAAO,CAAC,EAAE,MAAM,GACf,MAAM,CAOR;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAC1B,SAAS,EAAE,SAAS,cAAc,EAAE,EACpC,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,GACvC,SAAS,cAAc,EAAE,CAyB3B"}

package/src/lib/matrix.js

@@ -0,0 +1,175 @@
+/**
+ * The visual matrix: every way a component can look, enumerated.
+ *
+ * It is computed **at runtime**, from the metadata the style values already
+ * carry. Types only check the cardinal and the identifiers (see
+ * `exhaustive.ts`) — materialising the cartesian product in the type system is
+ * how you meet TS2589.
+ *
+ * The product is **complete**. The one reduction already banked happens
+ * upstream, in the sheet: only the points a class actually crosses are in its
+ * contract, so an axis with six breakpoints that a component cuts at one
+ * contributes two cells, not seven. No further reduction is applied here — a
+ * coverage that claims to be complete without being complete is worse than no
+ * coverage at all.
+ */
+import { classKeyOf, registeredClasses, } from '@craft-ts/style';
+const BASE = 'base';
+const keysOf = (input) => {
+    if (typeof input === 'string')
+        return [classKeyOf(input) ?? input];
+    if (Array.isArray(input))
+        return input.flatMap((entry) => keysOf(entry));
+    if (isBranch(input))
+        return [];
+    return Object.values(input).flatMap((className) => classKeyOf(className) ?? []);
+};
+const branchesOf = (input) => {
+    if (Array.isArray(input))
+        return input.flatMap((entry) => branchesOf(entry));
+    return isBranch(input) ? [input] : [];
+};
+export const branch = (name, whenTrue, whenFalse = []) => ({ name, whenTrue, whenFalse });
+const isBranch = (input) => typeof input === 'object' && input !== null && 'whenTrue' in input;
+const pointsByAxis = (classes) => {
+    const axes = new Map();
+    for (const registered of classes) {
+        for (const [axis, points] of Object.entries(registered.axes)) {
+            const known = axes.get(axis) ?? new Set();
+            points.forEach((point) => known.add(point));
+            axes.set(axis, known);
+        }
+    }
+    return axes;
+};
+const driverIndex = (classes) => {
+    const index = new Map();
+    for (const registered of classes) {
+        for (const rule of registered.rules) {
+            for (const point of rule.conditions) {
+                index.set(`${point.axis}:${point.point}`, point);
+            }
+        }
+    }
+    return index;
+};
+/**
+ * Every visual state of the given sheets.
+ *
+ * Takes what a component actually uses: one sheet, several, or the class
+ * strings themselves. There is deliberately no `visualMatrix(Component)` — a
+ * component's classes are only knowable by rendering it, and a matrix that
+ * silently missed a child's sheet would be the worst possible outcome. Naming
+ * the sheets is explicit and checkable.
+ */
+export function visualMatrix(input, options = {}) {
+    const branches = branchesOf(input);
+    if (branches.length) {
+        // Each branch is a sum, not a factor: the shared sheets are crossed with
+        // *one* side at a time, and the two sides are concatenated. Nesting two
+        // branches therefore gives a sum of sums, which is what keeps an if-node
+        // from doubling the bill of everything above it.
+        const [first, ...rest] = branches;
+        // Every branch is stripped from the shared part, then `rest` is put back
+        // once. Stripping only `first` would leave the others in twice — inside
+        // the shared input and in `rest` — and the count would explode instead of
+        // shrinking.
+        const shared = stripBranches(input);
+        return [
+            ...visualMatrix([shared, first.whenTrue, ...rest], options).map((scenario) => tagBranch(scenario, first.name, true)),
+            ...visualMatrix([shared, first.whenFalse, ...rest], options).map((scenario) => tagBranch(scenario, first.name, false)),
+        ];
+    }
+    return unfold(input, options);
+}
+const stripBranches = (input) => {
+    if (Array.isArray(input))
+        return input.map(stripBranches);
+    return isBranch(input) ? [] : input;
+};
+const tagBranch = (scenario, name, taken) => {
+    const axes = { ...scenario.axes, [name]: taken ? 'true' : 'false' };
+    return { ...scenario, axes, id: identify(axes, scenario.content) };
+};
+function unfold(input, options) {
+    const wanted = new Set(keysOf(input));
+    const classes = registeredClasses().filter((registered) => wanted.has(registered.key));
+    const points = driverIndex(classes);
+    const unreachable = new Set(options.unreachable ?? []);
+    const resolves = new Set(options.resolves ?? []);
+    const axes = [...pointsByAxis(classes)]
+        .filter(([axis]) => !unreachable.has(axis))
+        // A container axis belongs to the component that declares the container,
+        // and to nobody above it: an ancestor cannot change how wide that box is,
+        // so handing it those scenarios would ask for captures it cannot affect.
+        // Naming the container is how a component claims the axis; every other
+        // caller drops it.
+        .filter(([axis]) => !axis.startsWith('container.') ||
+        resolves.has(axis.slice('container.'.length)))
+        .sort(([left], [right]) => left.localeCompare(right));
+    let combinations = [{}];
+    for (const [axis, used] of axes) {
+        const values = [
+            BASE,
+            ...[...used]
+                .filter((point) => !unreachable.has(`${axis}:${point}`))
+                .sort(),
+        ];
+        combinations = combinations.flatMap((combination) => values.map((value) => ({ ...combination, [axis]: value })));
+    }
+    return combinations.map((combination) => ({
+        id: identify(combination),
+        axes: combination,
+        drivers: Object.entries(combination)
+            .filter(([, point]) => point !== BASE)
+            .sort(([left], [right]) => left.localeCompare(right))
+            .flatMap(([axis, point]) => {
+            const known = points.get(`${axis}:${point}`);
+            if (!known) {
+                throw new Error(`visualMatrix: '${axis}: ${point}' has no driver, so nothing can put a page in that state. An axis whose points cannot be reached would add captures that all look the same — false coverage. Give the axis a driver, or do not use it.`);
+            }
+            return [{ axis, point, driver: known.driver }];
+        }),
+    }));
+}
+export function identify(axes, content) {
+    const parts = Object.entries(axes)
+        .filter(([, point]) => point !== BASE)
+        .sort(([left], [right]) => left.localeCompare(right))
+        .map(([axis, point]) => `${axis}=${point}`);
+    const id = parts.length ? parts.join('+') : BASE;
+    return content ? `${id}#${content}` : id;
+}
+/**
+ * Data cases, crossed into the matrix.
+ *
+ * The matrix covers *conditions*, not *data* — and the eighty-character title,
+ * the empty list and the seven-figure price are what break layouts most often.
+ * No type can derive them, so they are declared.
+ *
+ * The crossing rule: a content case is rendered at **one** point of each axis,
+ * except on the axes that change the space available — viewport and container —
+ * where the crossing is complete. A long title behaves differently at two
+ * widths; it does not behave differently in two colour schemes.
+ */
+export function contentCases(scenarios, cases) {
+    const names = Object.keys(cases);
+    if (names.length === 0)
+        return scenarios;
+    const spatial = (scenario) => Object.entries(scenario.axes).some(([axis, point]) => point !== BASE &&
+        (axis === 'viewport' || axis.startsWith('container.')));
+    return scenarios.flatMap((scenario) => {
+        const relevant = spatial(scenario) ||
+            Object.values(scenario.axes).every((point) => point === BASE);
+        const applicable = relevant ? names : [];
+        return [
+            scenario,
+            ...applicable.map((name) => ({
+                ...scenario,
+                id: identify(scenario.axes, name),
+                content: name,
+            })),
+        ];
+    });
+}
+//# sourceMappingURL=matrix.js.map

package/src/lib/matrix.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"matrix.js","sourceRoot":"","sources":["../../../../../libs/style-testing/src/lib/matrix.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * The visual matrix: every way a component can look, enumerated.\n *\n * It is computed **at runtime**, from the metadata the style values already\n * carry. Types only check the cardinal and the identifiers (see\n * `exhaustive.ts`) — materialising the cartesian product in the type system is\n * how you meet TS2589.\n *\n * The product is **complete**. The one reduction already banked happens\n * upstream, in the sheet: only the points a class actually crosses are in its\n * contract, so an axis with six breakpoints that a component cuts at one\n * contributes two cells, not seven. No further reduction is applied here — a\n * coverage that claims to be complete without being complete is worse than no\n * coverage at all.\n */\nimport {\n  classKeyOf,\n  registeredClasses,\n  type AnyAxisPoint,\n  type RegisteredClass,\n} from '@craft-ts/style';\n\nexport interface ScenarioDriver {\n  readonly axis: string;\n  readonly point: string;\n  readonly driver: AnyAxisPoint['driver'];\n}\n\nexport interface VisualScenario {\n  /**\n   * `scheme=dark+viewport=md` — sorted, and stable under the addition of an\n   * unrelated axis.\n   *\n   * Only the axes away from `base` appear. An identifier that listed every axis\n   * would change the moment someone adds one somewhere else in the app, and\n   * every baseline in the suite would be invalidated by a change that affects\n   * none of them.\n   */\n  readonly id: string;\n  readonly axes: Readonly<Record<string, string>>;\n  readonly drivers: readonly ScenarioDriver[];\n  /** Set when a content case was crossed in — see `contentCases`. */\n  readonly content?: string;\n}\n\n/** What `craftStyles` returns: a record of branded class strings. */\nexport type StyleSheetClasses = Readonly<Record<string, string>>;\n\nexport interface MatrixOptions {\n  /**\n   * Container axes resolved by the component itself.\n   *\n   * A container axis answers \"how wide is my box\", which nobody above the\n   * container can change. Naming the container here closes the axis at this\n   * component instead of handing it to every ancestor.\n   */\n  readonly resolves?: readonly string[];\n  /**\n   * Axis points the component's own structure makes unreachable — a scroll\n   * state under a `scrollPort.none`, for instance. Pruned rather than captured.\n   */\n  readonly unreachable?: readonly string[];\n}\n\nconst BASE = 'base';\n\nconst keysOf = (input: MatrixInput): readonly string[] => {\n  if (typeof input === 'string') return [classKeyOf(input) ?? input];\n  if (Array.isArray(input)) return input.flatMap((entry) => keysOf(entry));\n  if (isBranch(input)) return [];\n  return Object.values(input as StyleSheetClasses).flatMap(\n    (className) => classKeyOf(className) ?? [],\n  );\n};\n\nconst branchesOf = (input: MatrixInput): readonly Branch[] => {\n  if (Array.isArray(input)) return input.flatMap((entry) => branchesOf(entry));\n  return isBranch(input) ? [input] : [];\n};\n\ndeclare const BRANCH: unique symbol;\n\n/**\n * Two sets of sheets that are never on screen at the same time.\n *\n * An `ifNode` renders one side or the other, so the states of the two branches\n * **add up** — they do not multiply. Told nothing, the matrix would cross a\n * footer's three tones with a header's two breakpoints and ask for six captures\n * of pages that cannot exist.\n *\n * This is the single highest-leverage reduction in the whole system, and the\n * only one that is exactly true rather than probably true: the branches are\n * mutually exclusive by construction, not by analysis.\n *\n * The plan infers it from the `ifNode` node's own type. It is declared here,\n * for the same reason the matrix takes sheets rather than components — and the\n * cost of that choice is stated plainly: a branch nobody declares is counted as\n * co-present, which over-captures rather than under-captures.\n */\nexport interface Branch {\n  readonly [BRANCH]: true;\n  readonly name: string;\n  readonly whenTrue: MatrixInput;\n  readonly whenFalse: MatrixInput;\n}\n\nexport const branch = (\n  name: string,\n  whenTrue: MatrixInput,\n  whenFalse: MatrixInput = [],\n): Branch => ({ name, whenTrue, whenFalse }) as Branch;\n\nconst isBranch = (input: MatrixInput | Branch): input is Branch =>\n  typeof input === 'object' && input !== null && 'whenTrue' in input;\n\nexport type MatrixInput =\n  | string\n  | StyleSheetClasses\n  | Branch\n  | readonly MatrixInput[];\n\nconst pointsByAxis = (\n  classes: readonly RegisteredClass[],\n): Map<string, Set<string>> => {\n  const axes = new Map<string, Set<string>>();\n  for (const registered of classes) {\n    for (const [axis, points] of Object.entries(registered.axes)) {\n      const known = axes.get(axis) ?? new Set<string>();\n      points.forEach((point) => known.add(point));\n      axes.set(axis, known);\n    }\n  }\n  return axes;\n};\n\nconst driverIndex = (\n  classes: readonly RegisteredClass[],\n): Map<string, AnyAxisPoint> => {\n  const index = new Map<string, AnyAxisPoint>();\n  for (const registered of classes) {\n    for (const rule of registered.rules) {\n      for (const point of rule.conditions) {\n        index.set(`${point.axis}:${point.point}`, point);\n      }\n    }\n  }\n  return index;\n};\n\n/**\n * Every visual state of the given sheets.\n *\n * Takes what a component actually uses: one sheet, several, or the class\n * strings themselves. There is deliberately no `visualMatrix(Component)` — a\n * component's classes are only knowable by rendering it, and a matrix that\n * silently missed a child's sheet would be the worst possible outcome. Naming\n * the sheets is explicit and checkable.\n */\nexport function visualMatrix(\n  input: MatrixInput,\n  options: MatrixOptions = {},\n): readonly VisualScenario[] {\n  const branches = branchesOf(input);\n  if (branches.length) {\n    // Each branch is a sum, not a factor: the shared sheets are crossed with\n    // *one* side at a time, and the two sides are concatenated. Nesting two\n    // branches therefore gives a sum of sums, which is what keeps an if-node\n    // from doubling the bill of everything above it.\n    const [first, ...rest] = branches;\n    // Every branch is stripped from the shared part, then `rest` is put back\n    // once. Stripping only `first` would leave the others in twice — inside\n    // the shared input and in `rest` — and the count would explode instead of\n    // shrinking.\n    const shared = stripBranches(input);\n    return [\n      ...visualMatrix([shared, first.whenTrue, ...rest], options).map(\n        (scenario) => tagBranch(scenario, first.name, true),\n      ),\n      ...visualMatrix([shared, first.whenFalse, ...rest], options).map(\n        (scenario) => tagBranch(scenario, first.name, false),\n      ),\n    ];\n  }\n  return unfold(input, options);\n}\n\nconst stripBranches = (input: MatrixInput): MatrixInput => {\n  if (Array.isArray(input)) return input.map(stripBranches);\n  return isBranch(input) ? [] : input;\n};\n\nconst tagBranch = (\n  scenario: VisualScenario,\n  name: string,\n  taken: boolean,\n): VisualScenario => {\n  const axes = { ...scenario.axes, [name]: taken ? 'true' : 'false' };\n  return { ...scenario, axes, id: identify(axes, scenario.content) };\n};\n\nfunction unfold(\n  input: MatrixInput,\n  options: MatrixOptions,\n): readonly VisualScenario[] {\n  const wanted = new Set(keysOf(input));\n  const classes = registeredClasses().filter((registered) =>\n    wanted.has(registered.key),\n  );\n  const points = driverIndex(classes);\n  const unreachable = new Set(options.unreachable ?? []);\n\n  const resolves = new Set(options.resolves ?? []);\n  const axes = [...pointsByAxis(classes)]\n    .filter(([axis]) => !unreachable.has(axis))\n    // A container axis belongs to the component that declares the container,\n    // and to nobody above it: an ancestor cannot change how wide that box is,\n    // so handing it those scenarios would ask for captures it cannot affect.\n    // Naming the container is how a component claims the axis; every other\n    // caller drops it.\n    .filter(\n      ([axis]) =>\n        !axis.startsWith('container.') ||\n        resolves.has(axis.slice('container.'.length)),\n    )\n    .sort(([left], [right]) => left.localeCompare(right));\n\n  let combinations: Record<string, string>[] = [{}];\n  for (const [axis, used] of axes) {\n    const values = [\n      BASE,\n      ...[...used]\n        .filter((point) => !unreachable.has(`${axis}:${point}`))\n        .sort(),\n    ];\n    combinations = combinations.flatMap((combination) =>\n      values.map((value) => ({ ...combination, [axis]: value })),\n    );\n  }\n\n  return combinations.map((combination) => ({\n    id: identify(combination),\n    axes: combination,\n    drivers: Object.entries(combination)\n      .filter(([, point]) => point !== BASE)\n      .sort(([left], [right]) => left.localeCompare(right))\n      .flatMap(([axis, point]) => {\n        const known = points.get(`${axis}:${point}`);\n        if (!known) {\n          throw new Error(\n            `visualMatrix: '${axis}: ${point}' has no driver, so nothing can put a page in that state. An axis whose points cannot be reached would add captures that all look the same — false coverage. Give the axis a driver, or do not use it.`,\n          );\n        }\n        return [{ axis, point, driver: known.driver }];\n      }),\n  }));\n}\n\nexport function identify(\n  axes: Readonly<Record<string, string>>,\n  content?: string,\n): string {\n  const parts = Object.entries(axes)\n    .filter(([, point]) => point !== BASE)\n    .sort(([left], [right]) => left.localeCompare(right))\n    .map(([axis, point]) => `${axis}=${point}`);\n  const id = parts.length ? parts.join('+') : BASE;\n  return content ? `${id}#${content}` : id;\n}\n\n/**\n * Data cases, crossed into the matrix.\n *\n * The matrix covers *conditions*, not *data* — and the eighty-character title,\n * the empty list and the seven-figure price are what break layouts most often.\n * No type can derive them, so they are declared.\n *\n * The crossing rule: a content case is rendered at **one** point of each axis,\n * except on the axes that change the space available — viewport and container —\n * where the crossing is complete. A long title behaves differently at two\n * widths; it does not behave differently in two colour schemes.\n */\nexport function contentCases(\n  scenarios: readonly VisualScenario[],\n  cases: Readonly<Record<string, unknown>>,\n): readonly VisualScenario[] {\n  const names = Object.keys(cases);\n  if (names.length === 0) return scenarios;\n\n  const spatial = (scenario: VisualScenario) =>\n    Object.entries(scenario.axes).some(\n      ([axis, point]) =>\n        point !== BASE &&\n        (axis === 'viewport' || axis.startsWith('container.')),\n    );\n\n  return scenarios.flatMap((scenario) => {\n    const relevant =\n      spatial(scenario) ||\n      Object.values(scenario.axes).every((point) => point === BASE);\n    const applicable = relevant ? names : [];\n    return [\n      scenario,\n      ...applicable.map((name) => ({\n        ...scenario,\n        id: identify(scenario.axes, name),\n        content: name,\n      })),\n    ];\n  });\n}\n"]}