stylegallery 0.1.0 → 0.1.2

package/scripts/page-evidence-fixture.mjs

@@ -1,271 +0,0 @@
-import fs from "node:fs";
-import os from "node:os";
-import path from "node:path";
-import { execFileSync, spawnSync } from "node:child_process";
-import { fileURLToPath } from "node:url";
-import { canonicalSourceManifest, digest, metadata } from "./page-evidence-contract.mjs";
-
-const repositoryRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
-export const creator = path.join(repositoryRoot, "scripts/create-page-evidence-session.mjs");
-export const finalizer = path.join(repositoryRoot, "scripts/finalize-page-evidence.mjs");
-export const validator = path.join(repositoryRoot, "scripts/validate-page-evidence.mjs");
-export const semanticEnvironment = Object.freeze({
-  browser: "Chromium 140.0.0",
-  browser_revision: "chromium-1400",
-  color_scheme: "light",
-  locale: "en-US",
-  page_scale_factor: 1,
-  platform: "linux/amd64",
-  reduced_motion: "no-preference",
-  viewport: { height: 720, width: 320 },
-});
-const png = Buffer.from("iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=", "base64");
-const crcTable = Uint32Array.from({ length: 256 }, (_, index) => {
-  let value = index;
-  for (let bit = 0; bit < 8; bit += 1) value = (value >>> 1) ^ (0xedb88320 & -(value & 1));
-  return value >>> 0;
-});
-
-function pngChunk(type, data) {
-  const name = Buffer.from(type, "ascii");
-  const chunk = Buffer.alloc(12 + data.length);
-  chunk.writeUInt32BE(data.length, 0);
-  name.copy(chunk, 4);
-  data.copy(chunk, 8);
-  let crc = 0xffffffff;
-  for (const byte of chunk.subarray(4, 8 + data.length)) crc = crcTable[(crc ^ byte) & 0xff] ^ (crc >>> 8);
-  chunk.writeUInt32BE((crc ^ 0xffffffff) >>> 0, 8 + data.length);
-  return chunk;
-}
-
-export function truncatedPng() {
-  return Buffer.from(png.subarray(0, 24));
-}
-
-export function corruptPngCrc() {
-  const bytes = Buffer.from(png);
-  bytes[bytes.length - 1] ^= 0xff;
-  return bytes;
-}
-
-export function pngWithTrailingBytes() {
-  return Buffer.concat([png, Buffer.from("trailing bytes")]);
-}
-
-export function pngWithInvalidImageData() {
-  return Buffer.concat([png.subarray(0, 33), pngChunk("IDAT", Buffer.alloc(0)), png.subarray(png.length - 12)]);
-}
-
-export function pngWithTrailingImageData() {
-  const length = png.readUInt32BE(33);
-  const data = png.subarray(41, 41 + length);
-  return Buffer.concat([png.subarray(0, 33), pngChunk("IDAT", Buffer.concat([data, Buffer.from("trailing")])), png.subarray(45 + length)]);
-}
-
-function git(root, ...args) {
-  return execFileSync("git", ["-c", `safe.directory=${root}`, ...args], { cwd: root, encoding: "utf8" }).trim();
-}
-
-export function writeJson(file, value) {
-  fs.mkdirSync(path.dirname(file), { recursive: true });
-  fs.writeFileSync(file, `${JSON.stringify(value, null, 2)}\n`);
-}
-
-export function runCli(file, args, root, env = {}) {
-  const fixtureEnv = Object.fromEntries(Object.entries(process.env).filter(([name]) => !name.startsWith("GITHUB_")));
-  const child = spawnSync(process.execPath, [file, ...args, "--json"], { cwd: repositoryRoot, encoding: "utf8", env: { ...fixtureEnv, ...env } });
-  let report = { failures: [{ code: "child_output_invalid", message: child.stdout || child.stderr, path: file }], ok: false };
-  try { report = JSON.parse(child.stdout); } catch (error) { if (!(error instanceof SyntaxError)) throw error; }
-  return { report, root, status: child.status };
-}
-
-export function initializeConsumer() {
-  const root = fs.realpathSync(fs.mkdtempSync(path.join(os.tmpdir(), "stylegallery-page-evidence-")));
-  execFileSync("git", ["init", "-b", "main"], { cwd: root, stdio: "ignore" });
-  git(root, "config", "user.email", "fixture@example.com");
-  git(root, "config", "user.name", "StyleGallery fixture");
-  git(root, "remote", "add", "origin", "https://github.com/example/consumer.git");
-  fs.mkdirSync(path.join(root, "src"), { recursive: true });
-  fs.mkdirSync(path.join(root, "tests"), { recursive: true });
-  fs.writeFileSync(path.join(root, "src/page.js"), "export const page = 'ready';\n");
-  fs.writeFileSync(path.join(root, "tests/page.spec.js"), "const scenario = 'responsive-layout';\nvoid scenario;\n");
-  git(root, "add", "src/page.js", "tests/page.spec.js");
-  git(root, "commit", "-m", "fixture sources");
-  return {
-    relevantSources: ["src/page.js", "tests/page.spec.js"],
-    repository: "example/consumer",
-    revision: git(root, "rev-parse", "HEAD"),
-    root,
-  };
-}
-
-export function createConformance(fixture, { artifactName = "session-a", recordName = artifactName, runId = `run-${artifactName}`, scenarioId = "responsive-layout", sessionId = `session-${artifactName}` } = {}) {
-  const sourceFailures = [];
-  const source = canonicalSourceManifest(fixture.root, fixture.relevantSources, sourceFailures);
-  if (!source || sourceFailures.length > 0) throw new Error(`fixture source manifest failed: ${JSON.stringify(sourceFailures)}`);
-  const artifactRoot = path.join(fixture.root, "evidence", artifactName);
-  const recordFile = path.join(fixture.root, "records", `${recordName}.json`);
-  writeJson(recordFile, {
-    claim_boundary: "Synthetic conformance fixture; not product certification.",
-    consumer: { relevant_sources: fixture.relevantSources, repository: fixture.repository, revision: fixture.revision },
-    id: `${recordName}-conformance`,
-    page_evidence: { manifest: path.relative(fixture.root, path.join(artifactRoot, "page-evidence-manifest.json")), status: "applicable" },
-    record_kind: "consumer_migration_conformance",
-    scenarios: [{
-      assertions: ["No document overflow."],
-      argv: ["node", "tests/page.spec.js"],
-      evidence_method: "browser",
-      exit_code: 0,
-      id: scenarioId,
-      observable_actions: ["Render the page."],
-      result_artifact: path.relative(fixture.root, path.join(artifactRoot, "runner", `${scenarioId}.json`)),
-      run_id: runId,
-      session_id: sessionId,
-      source_digest: source.sha256,
-    }],
-    schema_version: "1.0",
-  });
-  return { artifactRoot, recordFile, runId, scenarioId, sessionId, source };
-}
-
-export function startSession(fixture, session, env = {}) {
-  return runCli(creator, ["--root", fixture.root, "--record", session.recordFile, "--artifact-root", session.artifactRoot], fixture.root, env);
-}
-
-export function receiptFor(session) {
-  const file = path.join(session.artifactRoot, "page-evidence-session.json");
-  const bytes = fs.readFileSync(file);
-  return { bytes, file, sha256: digest(bytes), value: JSON.parse(bytes) };
-}
-
-export function writeRunner(fixture, session, overrides = {}) {
-  const receipt = receiptFor(session);
-  const scenarioId = overrides.scenarioId ?? session.scenarioId;
-  const runnerReference = `runner/${scenarioId}.json`;
-  const artifactReference = overrides.artifactPath ?? `captures/${scenarioId}-320.png`;
-  if (overrides.writeArtifact !== false) {
-    const artifactFile = path.join(session.artifactRoot, artifactReference);
-    fs.mkdirSync(path.dirname(artifactFile), { recursive: true });
-    fs.writeFileSync(artifactFile, overrides.artifactBytes ?? png);
-  }
-  const evidence = overrides.evidence ?? (overrides.status === "failed"
-    ? { kind: "failed", reason: "synthetic runner failure" }
-    : { artifacts: [{ media_type: "image/png", path: artifactReference }], kind: "captured" });
-  const runner = {
-    evidence,
-    nonce: overrides.nonce ?? receipt.value.nonce,
-    receipt_sha256: overrides.receiptSha256 ?? receipt.sha256,
-    recorded_at: overrides.recordedAt ?? receipt.value.started_at,
-    record_kind: "page_evidence_runner_result",
-    repository: overrides.repository ?? fixture.repository,
-    revision: overrides.revision ?? fixture.revision,
-    run: {
-      attempt: receipt.value.attempt,
-      id: overrides.runId ?? session.runId,
-      repository: overrides.runRepository ?? fixture.repository,
-      revision: overrides.runRevision ?? fixture.revision,
-      source: "local",
-    },
-    scenario_id: scenarioId,
-    schema_version: "1.0",
-    semantic_environment: overrides.semanticEnvironment ?? semanticEnvironment,
-    session_id: overrides.sessionId ?? session.sessionId,
-    source_sha256: overrides.sourceSha256 ?? receipt.value.source.sha256,
-    status: overrides.status ?? "passed",
-  };
-  const runnerFile = path.join(session.artifactRoot, runnerReference);
-  writeJson(runnerFile, runner);
-  return { artifactReference, runner, runnerFile, runnerReference };
-}
-
-export function declareCapturedArtifact(session, runnerRecord, artifactReference) {
-  if (runnerRecord.artifactReference !== artifactReference) {
-    fs.rmSync(path.join(session.artifactRoot, runnerRecord.artifactReference), { force: true });
-  }
-  const runner = {
-    ...runnerRecord.runner,
-    evidence: { artifacts: [{ media_type: "application/json", path: artifactReference }], kind: "captured" },
-  };
-  writeJson(runnerRecord.runnerFile, runner);
-  return { ...runnerRecord, artifactReference, runner };
-}
-
-export function rewriteCompletedCapture(session, runnerRecord, artifactReference) {
-  const declared = declareCapturedArtifact(session, runnerRecord, artifactReference);
-  const manifestFile = path.join(session.artifactRoot, "page-evidence-manifest.json");
-  const manifest = JSON.parse(fs.readFileSync(manifestFile));
-  const runnerResult = metadata(fs.readFileSync(declared.runnerFile), "application/json", declared.runnerReference);
-  const artifact = metadata(fs.readFileSync(path.join(session.artifactRoot, artifactReference)), "application/json", artifactReference);
-  const [scenario, ...remaining] = manifest.scenarios;
-  writeJson(manifestFile, {
-    ...manifest,
-    scenarios: [{ ...scenario, evidence: { artifacts: [artifact], kind: "captured" }, runner_result: runnerResult }, ...remaining],
-  });
-}
-
-export function rewriteCompletedArtifact(session, runnerRecord, bytes) {
-  const artifactFile = path.join(session.artifactRoot, runnerRecord.artifactReference);
-  fs.writeFileSync(artifactFile, bytes);
-  const artifact = { ...metadata(bytes, "image/png", runnerRecord.artifactReference), height: 1, width: 1 };
-  const manifestFile = path.join(session.artifactRoot, "page-evidence-manifest.json");
-  const manifest = JSON.parse(fs.readFileSync(manifestFile));
-  const runnerResult = metadata(fs.readFileSync(runnerRecord.runnerFile), "application/json", runnerRecord.runnerReference);
-  const [scenario, ...remaining] = manifest.scenarios;
-  writeJson(manifestFile, {
-    ...manifest,
-    scenarios: [{ ...scenario, evidence: { artifacts: [artifact], kind: "captured" }, runner_result: runnerResult }, ...remaining],
-  });
-}
-
-export function finalizeSession(fixture, session, runner, priorManifest) {
-  const args = ["--root", fixture.root, "--artifact-root", session.artifactRoot, "--runner-result", runner.runnerReference, "--review-by", "2030-01-01T00:00:00Z"];
-  if (priorManifest) args.push("--prior-manifest", priorManifest);
-  return runCli(finalizer, args, fixture.root);
-}
-
-export function validateSession(fixture, session, priorManifest) {
-  const args = ["--root", fixture.root, "--artifact-root", session.artifactRoot];
-  if (priorManifest) args.push("--prior-manifest", priorManifest);
-  return runCli(validator, args, fixture.root);
-}
-
-export function completeSession(fixture, session = createConformance(fixture)) {
-  const start = startSession(fixture, session);
-  if (start.status !== 0) return { fixture, session, start };
-  const runner = writeRunner(fixture, session);
-  const finalize = finalizeSession(fixture, session, runner);
-  const validate = finalize.status === 0 ? validateSession(fixture, session) : undefined;
-  return { finalize, fixture, runner, session, start, validate };
-}
-
-export function isolated(run) {
-  const fixture = initializeConsumer();
-  try { return run(fixture); }
-  finally { cleanupFixture(fixture); }
-}
-
-export function started(fixture, options) {
-  const session = createConformance(fixture, options);
-  const start = startSession(fixture, session);
-  if (start.status !== 0) throw new Error(`fixture start failed: ${JSON.stringify(start.report)}`);
-  return session;
-}
-
-export function reuseSetup(fixture, { beforeCurrent, currentOptions } = {}) {
-  const prior = completeSession(fixture, createConformance(fixture, { artifactName: "prior" }));
-  beforeCurrent?.(fixture);
-  const current = started(fixture, { artifactName: "current", ...currentOptions });
-  const priorManifest = path.join(prior.session.artifactRoot, "page-evidence-manifest.json");
-  const evidence = {
-    kind: "reused",
-    prior_manifest_sha256: digest(fs.readFileSync(priorManifest)),
-    prior_run_id: prior.session.runId,
-    prior_scenario_id: prior.session.scenarioId,
-    prior_session_id: prior.session.sessionId,
-  };
-  return { current, evidence, prior, priorManifest };
-}
-
-export function cleanupFixture(fixture) {
-  fs.rmSync(fixture.root, { force: true, recursive: true });
-}

package/scripts/pattern-data.mjs

@@ -1,325 +0,0 @@
-// allow: SIZE_OK - explicit 46-pattern sample and rule data table; generation logic stays separate.
-export const sources = {
-  carbonGrid: "https://carbondesignsystem.com/elements/2x-grid/overview/",
-  everyLayout: "https://every-layout.dev/layouts/",
-  everySidebar: "https://every-layout.dev/layouts/sidebar/",
-  everyStack: "https://every-layout.dev/layouts/stack/",
-  govukLayout: "https://design-system.service.gov.uk/styles/layout/",
-  materialCanonical: "https://m3.material.io/foundations/adaptive-design/canonical-layouts",
-  mdnCookbook: "https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook",
-  mdnGrid: "https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Grids",
-  mdnOverflow: "https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/overflow",
-  mdnPosition: "https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/position",
-  webOneLine: "https://web.dev/articles/one-line-layouts",
-};
-
-export const samples = {
-  "stack": `
-<section class="stack" aria-labelledby="stack-heading">
-    <h2 id="stack-heading">Release checklist</h2>
-    <p>Review copy, verify forms, and publish the notes in order.</p>
-    <button>Start review</button>
-</section>`,
-  "box": `
-<aside class="box" aria-labelledby="box-heading">
-    <h2 id="box-heading">Support window</h2>
-    <p>Responses resume Monday at 09:00.</p>
-</aside>`,
-  "center": `
-<article class="center" aria-labelledby="center-heading">
-    <h2 id="center-heading">Editorial policy</h2>
-    <p>Long-form guidance stays readable while the page around it remains fluid.</p>
-</article>`,
-  "cluster": `
-<nav class="cluster" aria-label="Project actions">
-    <a href="#">Backlog</a>
-    <a href="#">Milestones</a>
-    <a href="#">Roadmap</a>
-</nav>`,
-  "content-limiter": `
-<article class="content_limiter" aria-labelledby="limiter-heading">
-    <h2 id="limiter-heading">Incident summary</h2>
-    <p>The report keeps a comfortable measure even inside a wide dashboard shell.</p>
-</article>`,
-  "super-center": `
-<section class="super_center" aria-labelledby="centered-dialog-title">
-    <form aria-labelledby="centered-dialog-title">
-        <h2 id="centered-dialog-title">Confirm archive</h2>
-        <button>Archive project</button>
-    </form>
-</section>`,
-  "icon-frame": `
-<span class="icon_frame" aria-label="Calendar">
-    <svg aria-hidden="true" viewBox="0 0 24 24"></svg>
-</span>`,
-  "frame": `
-<figure class="frame">
-    <img alt="Product walkthrough still" class="frame_media">
-</figure>`,
-  "cover": `
-<section class="cover" aria-labelledby="cover-title">
-    <header><p>Step 2 of 4</p></header>
-    <main><h1 id="cover-title">Choose a billing profile</h1></main>
-    <footer><button>Continue</button></footer>
-</section>`,
-  "sidebar": `
-<section class="sidebar" aria-labelledby="sidebar-title">
-    <article class="sidebar_primary">
-        <h2 id="sidebar-title">Quarterly planning notes</h2>
-        <p>The main article keeps priority when the available inline space changes.</p>
-    </article>
-    <aside class="sidebar_secondary">Meeting agenda and owners</aside>
-</section>`,
-  "switcher": `
-<section class="switcher" aria-label="Pricing tiers">
-    <article class="switcher_item">Starter plan</article>
-    <article class="switcher_item">Team plan</article>
-    <article class="switcher_item">Enterprise plan</article>
-</section>`,
-  "media-object": `
-<article class="media_object">
-    <figure class="media_object_media"><img alt="Speaker portrait"></figure>
-    <div class="media_object_content">
-        <h2>Design systems briefing</h2>
-        <p>Speaker details align beside the portrait without squeezing the text.</p>
-    </div>
-</article>`,
-  "split-nav": `
-<nav class="split_nav" aria-label="Documentation">
-    <section class="split_nav_primary"><a href="#">Guides</a><a href="#">API</a></section>
-    <section class="split_nav_secondary"><a href="#">Sign in</a></section>
-</nav>`,
-  "holy-grail": `
-<section class="holy_grail" aria-label="News page">
-    <header class="holy_grail_header">Daily briefing</header>
-    <aside class="holy_grail_left">Topic navigation</aside>
-    <main class="holy_grail_main">Lead story and article stream</main>
-    <aside class="holy_grail_right">Market snapshot</aside>
-    <footer class="holy_grail_footer">Edition links</footer>
-</section>`,
-  "sticky-footer": `
-<section class="sticky_footer" aria-label="Account setup">
-    <header>Account setup</header>
-    <main class="sticky_footer_main">Profile fields and preferences</main>
-    <footer><button>Save profile</button></footer>
-</section>`,
-  "sticky-header": `
-<header class="sticky_header">
-    <nav aria-label="Repository"><a href="#">Code</a><a href="#">Issues</a><a href="#">Pull requests</a></nav>
-</header>`,
-  "scroll-body-shell": `
-<section class="scroll_body_shell" aria-label="Inbox">
-    <header>Inbox filters</header>
-    <main class="scroll_body_shell_body">Message list owns vertical scrolling</main>
-    <footer>Selected message actions</footer>
-</section>`,
-  "fixed-sidenav-shell": `
-<section class="fixed_sidenav_shell" aria-label="Settings">
-    <nav class="fixed_sidenav_shell_list"><a href="#">Profile</a><a href="#">Billing</a></nav>
-    <main class="fixed_sidenav_shell_main">Editable settings form scrolls independently</main>
-</section>`,
-  "sticky-aside": `
-<section class="sticky_aside" aria-label="Long article">
-    <main class="sticky_aside_main">Article sections continue down the page.</main>
-    <aside class="sticky_aside_side">Table of contents</aside>
-</section>`,
-  "ram-grid": `
-<section class="ram_grid" aria-label="Photo albums">
-    <article>Spring launch album</article>
-    <article>Customer meetup album</article>
-    <article>Workshop album</article>
-</section>`,
-  "card-grid": `
-<section class="card_grid" aria-label="Project cards">
-    <article>Design audit</article>
-    <article>Analytics migration</article>
-    <article>Onboarding rewrite</article>
-</section>`,
-  "twelve-span-grid": `
-<section class="twelve_span_grid" aria-label="Dashboard modules">
-    <article class="twelve_span_grid_item">Revenue module</article>
-    <article class="twelve_span_grid_item">Retention module</article>
-    <article class="twelve_span_grid_item">Pipeline module</article>
-</section>`,
-  "page-grid": `
-<section class="page_grid" aria-label="Article page">
-    <main class="page_grid_content">Centered article track with fluid outer gutters</main>
-</section>`,
-  "grid-wrapper": `
-<section class="grid_wrapper" aria-label="Marketing page">
-    <main class="grid_wrapper_main">Centered campaign copy</main>
-</section>`,
-  "columns": `
-<article class="columns" aria-labelledby="columns-heading">
-    <h2 id="columns-heading">Release notes</h2>
-    <p>Several short updates can flow into balanced columns when there is room.</p>
-    <p>When the container narrows, the same content returns to a single column.</p>
-</article>`,
-  "deconstructed-pancake": `
-<section class="deconstructed_pancake" aria-label="Plan comparison">
-    <article class="deconstructed_pancake_item">Solo plan</article>
-    <article class="deconstructed_pancake_item">Studio plan</article>
-    <article class="deconstructed_pancake_item">Agency plan</article>
-</section>`,
-  "line-up": `
-<article class="line_up" aria-labelledby="line-up-title">
-    <section class="line_up_body"><h2 id="line-up-title">Implementation proposal</h2><p>Variable-length summary copy sits above the aligned action row.</p></section>
-    <footer class="line_up_footer"><button>Review proposal</button></footer>
-</article>`,
-  "clamped-card": `
-<article class="clamped_card" aria-labelledby="clamped-title">
-    <h2 id="clamped-title">Invite teammate</h2>
-    <p>The card grows with the viewport but stops at the intended reading width.</p>
-</article>`,
-  "fluid-styles": `
-<section class="fluid_styles" aria-labelledby="fluid-title">
-    <h2 id="fluid-title">Operations overview</h2>
-    <p>The region fills the parent without exceeding the shared page measure.</p>
-</section>`,
-  "split-screen": `
-<section class="split_screen" aria-label="Compare documents">
-    <section class="split_screen_pane">Draft contract</section>
-    <section class="split_screen_pane">Reviewed contract</section>
-</section>`,
-  "list-detail": `
-<section class="list_detail" aria-label="Customer records">
-    <nav class="list_detail_list"><a href="#">Acme Co.</a><a href="#">Northwind</a></nav>
-    <section class="list_detail_detail">Selected customer timeline</section>
-</section>`,
-  "supporting-pane": `
-<section class="supporting_pane" aria-label="Invoice editor">
-    <main class="supporting_pane_main">Invoice line-item editor</main>
-    <aside class="supporting_pane_summary">Payment summary</aside>
-</section>`,
-  "feed": `
-<section class="feed" aria-label="Activity feed">
-    <article>Build completed</article>
-    <article>Review requested</article>
-    <article>Deployment approved</article>
-</section>`,
-  "breadcrumb": `
-<nav class="breadcrumb" aria-label="Breadcrumb">
-    <a href="#">Workspace</a>
-    <a href="#">Projects</a>
-    <span>Layout gallery</span>
-</nav>`,
-  "pagination": `
-<nav class="pagination" aria-label="Search results pages">
-    <a href="#">Previous</a>
-    <a href="#">Page 4</a>
-    <a href="#">Next</a>
-</nav>`,
-  "badge-list": `
-<section class="badge_list" aria-label="Repository counts">
-    <div class="badge_list_item"><span>Open issues</span><span>12</span></div>
-    <div class="badge_list_item"><span>Pull requests</span><span>4</span></div>
-    <div class="badge_list_item"><span>Reviews waiting</span><span>7</span></div>
-</section>`,
-  "step-nav": `
-<nav class="step_nav" aria-label="Checkout steps">
-    <a href="#">Shipping address</a>
-    <a href="#">Payment method</a>
-    <a href="#">Order review</a>
-</nav>`,
-  "tab-strip": `
-<nav class="tab_strip" aria-label="Report views">
-    <a href="#">Summary</a>
-    <a href="#">Cohorts</a>
-    <a href="#">Exports</a>
-</nav>`,
-  "reel": `
-<section class="reel" aria-label="Upcoming events">
-    <article>Design critique</article>
-    <article>Planning workshop</article>
-    <article>Launch review</article>
-</section>`,
-  "imposter": `
-<section class="imposter_anchor" aria-label="Draft editor">
-    <p>Draft body text stays in normal document flow.</p>
-    <section class="imposter" aria-label="Modal placement">
-        <dialog open>Unsaved changes confirmation</dialog>
-    </section>
-</section>`,
-  "panel-layout": `
-<section class="panel_layout" aria-label="Console workspace">
-    <main class="panel_layout_main">Query editor</main>
-    <aside class="panel_layout_side">Execution history</aside>
-</section>`,
-  "overlay-stack": `
-<section class="overlay_stack" aria-label="Map with controls">
-    <figure class="overlay_stack_item">Transit map</figure>
-    <form class="overlay_stack_item">Route search controls</form>
-</section>`,
-  "wrap-row": `
-<form class="wrap_row" aria-label="Filter tickets">
-    <label>Status <select></select></label>
-    <label>Owner <select></select></label>
-    <button>Apply filters</button>
-</form>`,
-  "dense-grid": `
-<section class="dense_grid" aria-label="Keyboard shortcuts">
-    <kbd>Cmd K</kbd>
-    <kbd>Cmd Shift P</kbd>
-    <kbd>Esc</kbd>
-</section>`,
-  "masonry-approx": `
-<section class="masonry_approx" aria-label="Research notes">
-    <article>Interview excerpt with a longer observation.</article>
-    <article>Short survey result.</article>
-    <article>Workshop synthesis note.</article>
-</section>`,
-  "main-with-rail": `
-<section class="main_with_rail" aria-label="Documentation page">
-    <main class="main_with_rail_main">API reference article</main>
-    <aside class="main_with_rail_side">On this page links</aside>
-</section>`,
-};
-
-export const patterns = [
-  ["stack", "Stacking", "Create consistent vertical rhythm between direct children.", "block", "fluid", sources.everyStack, [[".stack", { display: "grid", gap: "1rem" }]]],
-  ["box", "Containment", "Wrap content with predictable internal spacing.", "block", "fixed", sources.everyLayout, [[".box", { "box-sizing": "border-box", display: "block", padding: "1rem" }]]],
-  ["center", "Centering", "Center a block while respecting a maximum measure.", "inline", "fluid", sources.everyLayout, [[".center", { "margin-inline": "auto", "max-inline-size": "64rem", "padding-inline": "1rem" }]]],
-  ["cluster", "In-line grouping", "Keep related items together while allowing wrapping.", "inline", "wrap", sources.everyLayout, [[".cluster", { display: "flex", "flex-wrap": "wrap", gap: "0.75rem", "justify-content": "flex-start" }]]],
-  ["content-limiter", "Containment", "Keep prose width readable inside fluid containers.", "inline", "fluid", sources.govukLayout, [[".content_limiter", { "margin-inline": "auto", "max-inline-size": "70ch", "padding-inline": "1rem" }]]],
-  ["super-center", "Centering", "Center one region along both axes.", "both", "fluid", sources.webOneLine, [[".super_center", { display: "grid", "min-block-size": "100dvh", "place-items": "center" }]]],
-  ["icon-frame", "Media / Fit", "Keep an icon aligned inside a fixed square slot.", "both", "fixed", sources.everyLayout, [[".icon_frame", { "block-size": "2.5rem", display: "grid", "inline-size": "2.5rem", "place-items": "center" }]]],
-  ["frame", "Media / Fit", "Preserve media aspect ratio in a responsive slot.", "both", "fluid", sources.everyLayout, [[".frame", { "aspect-ratio": "16 / 9", display: "grid", "inline-size": "100%", overflow: "clip" }], [".frame_media", { "block-size": "100%", "inline-size": "100%", "min-block-size": "0", "min-inline-size": "0", "object-fit": "cover" }]]],
-  ["cover", "Viewport / Shell", "Keep a central region balanced between optional header and footer.", "block", "fluid", sources.everyLayout, [[".cover", { display: "grid", gap: "1rem", "grid-template-rows": "auto 1fr auto", "min-block-size": "100dvh", padding: "1rem" }]]],
-  ["sidebar", "Split / Sidebar", "Let a narrow sidebar and wider content wrap when space is tight.", "inline", "wrap", sources.everySidebar, [[".sidebar", { display: "flex", "flex-wrap": "wrap", gap: "1rem" }], [".sidebar_primary", { "flex-basis": "0", "flex-grow": "999", "min-inline-size": "16rem" }], [".sidebar_secondary", { "flex-basis": "18rem", "flex-grow": "1" }]]],
-  ["switcher", "Split / Sidebar", "Switch equal regions from row to stack without a viewport breakpoint.", "inline", "wrap", sources.everyLayout, [[".switcher", { display: "flex", "flex-wrap": "wrap", gap: "1rem" }], [".switcher_item", { "flex-basis": "calc((40rem - 100%) * 999)", "flex-grow": "1" }]]],
-  ["media-object", "Split / Sidebar", "Align media and descriptive content as a stable pair.", "inline", "reflow", sources.mdnCookbook, [[".media_object", { "align-items": "start", display: "flex", "flex-wrap": "wrap", gap: "1rem" }], [".media_object_media", { "flex-basis": "6rem", "flex-grow": "0" }], [".media_object_content", { "flex-basis": "min(20rem, 100%)", "flex-grow": "1", "min-inline-size": "0" }]]],
-  ["split-nav", "In-line grouping", "Separate primary and secondary nav actions in one row.", "inline", "wrap", sources.mdnCookbook, [[".split_nav", { "align-items": "center", display: "flex", "flex-wrap": "wrap", gap: "0.75rem" }], [".split_nav_primary", { display: "flex", gap: "0.75rem" }], [".split_nav_secondary", { "margin-inline-start": "auto" }]]],
-  ["holy-grail", "Viewport / Shell", "Place header, footer, sidebars, and main content in a resilient shell.", "both", "breakpointed", sources.webOneLine, [[".holy_grail", { display: "grid", gap: "1rem", "grid-template": '"header header header" auto "left main right" 1fr "footer footer footer" auto / minmax(12rem, auto) 1fr minmax(12rem, auto)', "min-block-size": "100dvh" }], [".holy_grail_header", { "grid-area": "header" }], [".holy_grail_left", { "grid-area": "left" }], [".holy_grail_main", { "grid-area": "main", "min-inline-size": "0" }], [".holy_grail_right", { "grid-area": "right" }], [".holy_grail_footer", { "grid-area": "footer" }]]],
-  ["sticky-footer", "Viewport / Shell", "Keep footer at the bottom when content is short.", "block", "fluid", sources.mdnCookbook, [[".sticky_footer", { display: "grid", "grid-template-rows": "auto 1fr auto", "min-block-size": "100dvh" }], [".sticky_footer_main", { "min-block-size": "0" }]]],
-  ["sticky-header", "Viewport / Shell", "Keep a header visible above a scrolling content region.", "block", "fluid", sources.mdnPosition, [[".sticky_header", { "inset-block-start": "0", position: "sticky", "z-index": "1" }]]],
-  ["scroll-body-shell", "Viewport / Shell", "Keep shell regions fixed while only the body scrolls.", "block", "fluid", sources.mdnOverflow, [[".scroll_body_shell", { display: "grid", "grid-template-rows": "auto minmax(0, 1fr) auto", "max-block-size": "100dvh" }], [".scroll_body_shell_body", { "min-block-size": "0", overflow: "auto" }]], "Pattern owns the named scroll container."],
-  ["fixed-sidenav-shell", "Viewport / Shell", "Keep side navigation stable while main content scrolls.", "both", "fluid", sources.carbonGrid, [[".fixed_sidenav_shell", { display: "grid", "grid-template-columns": "16rem minmax(0, 1fr)", "grid-template-rows": "minmax(0, 1fr)", "max-block-size": "100dvh" }], [".fixed_sidenav_shell_list", { "min-block-size": "0" }], [".fixed_sidenav_shell_main", { "min-block-size": "0", overflow: "auto" }]], "Pattern owns the named scroll container."],
-  ["sticky-aside", "Split / Sidebar", "Keep related aside content visible during long reads.", "block", "fluid", sources.mdnPosition, [[".sticky_aside", { "align-items": "start", display: "grid", gap: "1rem", "grid-template-columns": "minmax(0, 1fr) 16rem" }], [".sticky_aside_main", { "min-inline-size": "0" }], [".sticky_aside_side", { "inset-block-start": "1rem", position: "sticky" }]]],
-  ["ram-grid", "Grid / Repetition", "Repeat items into as many useful columns as space allows.", "both", "fluid", sources.webOneLine, [[".ram_grid", { display: "grid", gap: "1rem", "grid-template-columns": "repeat(auto-fit, minmax(min(16rem, 100%), 1fr))" }]]],
-  ["card-grid", "Grid / Repetition", "Align repeating cards in rows and columns.", "both", "fluid", sources.mdnCookbook, [[".card_grid", { display: "grid", gap: "1rem", "grid-template-columns": "repeat(auto-fit, minmax(min(18rem, 100%), 1fr))" }]]],
-  ["twelve-span-grid", "Grid / Repetition", "Provide a twelve-column placement scaffold.", "both", "fluid", sources.webOneLine, [[".twelve_span_grid", { display: "grid", gap: "1rem", "grid-template-columns": "repeat(12, minmax(0, 1fr))" }], [".twelve_span_grid_item", { "grid-column": "span 4" }]]],
-  ["page-grid", "Grid / Repetition", "Align page content to margins, gutters, and a central track.", "inline", "fluid", sources.carbonGrid, [[".page_grid", { display: "grid", gap: "1rem", "grid-template-columns": "minmax(1rem, 1fr) minmax(0, 72rem) minmax(1rem, 1fr)" }], [".page_grid_content", { "grid-column": "2" }]]],
-  ["grid-wrapper", "Grid / Repetition", "Center grid tracks while allowing full-width breakout tracks.", "inline", "fluid", sources.mdnCookbook, [[".grid_wrapper", { display: "grid", "grid-template-columns": "1fr minmax(0, 64rem) 1fr" }], [".grid_wrapper_main", { "grid-column": "2" }]]],
-  ["columns", "Grid / Repetition", "Flow long content into balanced text columns.", "inline", "fluid", sources.mdnCookbook, [[".columns", { "column-gap": "2rem", columns: "18rem" }]]],
-  ["deconstructed-pancake", "In-line grouping", "Let equal cards stretch in a row and stack naturally when narrow.", "inline", "wrap", sources.webOneLine, [[".deconstructed_pancake", { display: "flex", "flex-wrap": "wrap", gap: "1rem" }], [".deconstructed_pancake_item", { flex: "1 1 16rem" }]]],
-  ["line-up", "Stacking", "Keep card footer actions aligned at the bottom.", "block", "fluid", sources.webOneLine, [[".line_up", { display: "flex", "flex-direction": "column", gap: "1rem" }], [".line_up_body", { "min-block-size": "0" }], [".line_up_footer", { "margin-block-start": "auto" }]]],
-  ["clamped-card", "Containment", "Constrain a card to a readable fluid width.", "inline", "fluid", sources.webOneLine, [[".clamped_card", { "inline-size": "clamp(16rem, 50vw, 28rem)", "margin-inline": "auto" }]]],
-  ["fluid-styles", "Containment", "Let a region fill available width without exceeding a readable max.", "inline", "fluid", sources.carbonGrid, [[".fluid_styles", { "inline-size": "min(100%, 72rem)", "margin-inline": "auto" }]]],
-  ["split-screen", "Split / Sidebar", "Split a viewport or region into two balanced panes.", "inline", "reflow", sources.materialCanonical, [[".split_screen", { display: "grid", gap: "1rem", "grid-template-columns": "repeat(auto-fit, minmax(min(20rem, 100%), 1fr))", "min-block-size": "100dvh" }], [".split_screen_pane", { "min-inline-size": "0" }]]],
-  ["list-detail", "Split / Sidebar", "Place an explorable list beside its detail region.", "inline", "reflow", sources.materialCanonical, [[".list_detail", { display: "grid", gap: "1rem", "grid-template-columns": "repeat(auto-fit, minmax(min(18rem, 100%), 1fr))" }], [".list_detail_list", { "min-inline-size": "0" }], [".list_detail_detail", { "min-inline-size": "0" }]]],
-  ["supporting-pane", "Split / Sidebar", "Keep supplemental information beside a primary task.", "inline", "reflow", sources.materialCanonical, [[".supporting_pane", { display: "grid", gap: "1rem", "grid-template-columns": "repeat(auto-fit, minmax(min(20rem, 100%), 1fr))" }], [".supporting_pane_main", { "min-inline-size": "0" }], [".supporting_pane_summary", { "min-inline-size": "0" }]]],
-  ["feed", "Stacking", "Stack repeated content items with stable rhythm.", "block", "fluid", sources.materialCanonical, [[".feed", { display: "grid", gap: "1rem", "grid-auto-rows": "minmax(min-content, auto)" }]]],
-  ["breadcrumb", "In-line grouping", "Lay out hierarchy links compactly with wrapping.", "inline", "wrap", sources.mdnCookbook, [[".breadcrumb", { "align-items": "center", display: "flex", "flex-wrap": "wrap", gap: "0.5rem" }]]],
-  ["pagination", "In-line grouping", "Lay out page controls as a bounded wrapping row.", "inline", "wrap", sources.mdnCookbook, [[".pagination", { display: "flex", "flex-wrap": "wrap", gap: "0.5rem", "justify-content": "center" }]]],
-  ["badge-list", "In-line grouping", "Align item labels with trailing counts.", "inline", "fluid", sources.mdnCookbook, [[".badge_list", { display: "grid", gap: "0.5rem" }], [".badge_list_item", { "align-items": "center", display: "flex", gap: "0.75rem", "justify-content": "space-between" }]]],
-  ["step-nav", "Stacking", "Present sequential steps with consistent vertical rhythm.", "block", "fluid", sources.govukLayout, [[".step_nav", { display: "grid", gap: "0.75rem", "margin-block": "1rem" }]]],
-  ["tab-strip", "In-line grouping", "Keep peer tabs in one stable row that can wrap.", "inline", "wrap", sources.govukLayout, [[".tab_strip", { display: "flex", "flex-wrap": "wrap", gap: "0.75rem" }]]],
-  ["reel", "In-line grouping", "Let a row scroll horizontally instead of wrapping.", "inline", "scroll", sources.everyLayout, [[".reel", { display: "grid", gap: "1rem", "grid-auto-columns": "minmax(14rem, 35%)", "grid-auto-flow": "column", "overflow-x": "auto" }]], "Pattern owns the named scroll container."],
-  ["imposter", "Overlay / Exception", "Place an overlay region over a parent without changing document order.", "both", "fixed", sources.everyLayout, [[".imposter_anchor", { position: "relative" }], [".imposter", { display: "grid", inset: "0", "place-items": "center", position: "absolute", "z-index": "1" }]]],
-  ["panel-layout", "Viewport / Shell", "Create predictable main and utility panels.", "inline", "reflow", sources.carbonGrid, [[".panel_layout", { display: "grid", gap: "1rem", "grid-template-columns": "repeat(auto-fit, minmax(min(22rem, 100%), 1fr))" }], [".panel_layout_main", { "min-inline-size": "0" }], [".panel_layout_side", { "min-inline-size": "0" }]]],
-  ["overlay-stack", "Overlay / Exception", "Stack several regions into the same grid cell.", "both", "fluid", sources.webOneLine, [[".overlay_stack", { display: "grid" }], [".overlay_stack_item", { "grid-area": "1 / 1" }]]],
-  ["wrap-row", "In-line grouping", "Wrap controls into rows with stable gaps.", "inline", "wrap", sources.mdnCookbook, [[".wrap_row", { "align-items": "center", display: "flex", "flex-wrap": "wrap", gap: "0.75rem" }]]],
-  ["dense-grid", "Grid / Repetition", "Fill a compact grid with repeated small items.", "both", "fluid", sources.mdnGrid, [[".dense_grid", { display: "grid", gap: "0.5rem", "grid-template-columns": "repeat(auto-fill, minmax(8rem, 1fr))" }]]],
-  ["masonry-approx", "Grid / Repetition", "Approximate staggered content with columns when exact row alignment is not needed.", "block", "fluid", sources.mdnCookbook, [[".masonry_approx", { "column-gap": "1rem", "column-width": "14rem" }]]],
-  ["main-with-rail", "Split / Sidebar", "Keep primary content dominant with a narrow secondary rail.", "inline", "reflow", sources.govukLayout, [[".main_with_rail", { display: "grid", gap: "1rem", "grid-template-columns": "repeat(auto-fit, minmax(min(18rem, 100%), 1fr))" }], [".main_with_rail_main", { "min-inline-size": "0" }], [".main_with_rail_side", { "min-inline-size": "0" }]]],
-];