@polyxd/ds-kit 0.2.2 → 0.4.0

package/NOTICE

@@ -135,6 +135,51 @@ Upstream: https://github.com/adobe/spectrum-tokens
 
 Vendored under `packages/ds-spectrum/scripts/sources/`, with the upstream licence file beside it.
 
+## Logos
+
+Twelve packs ship their design system's official logo, unaltered, as `logo.svg`
+(Bootstrap and Radix also ship the owner's white version as `logo-white.svg`),
+downloaded from the owner's own site, repository or brand page. Where a design
+system has no mark of its own (Polaris, Spectrum, Primer), the pack ships its
+company's logo. Each is used only to identify the design system a pack is
+modelled on, beside its name. The logos are trademarks of their owners, not
+Polyxd's, and are not covered by Polyxd's licence:
+
+- Material 3 (`@polyxd/ds-material3`) — Google LLC
+- Carbon (`@polyxd/ds-carbon`) — IBM Corp.
+- Fluent 2 (`@polyxd/ds-fluent`) — Microsoft Corporation
+- Polaris (`@polyxd/ds-polaris`) — the Shopify logo, Shopify Inc.
+- Spectrum 2 (`@polyxd/ds-spectrum`) — the Adobe logo, Adobe Inc.
+- Primer (`@polyxd/ds-primer`) — the GitHub logo, GitHub, Inc.
+- shadcn/ui (`@polyxd/ds-shadcn`) — shadcn
+- Ant Design (`@polyxd/ds-antd`) — Ant Group
+- Bootstrap (`@polyxd/ds-bootstrap`) — the Bootstrap team
+- Chakra UI (`@polyxd/ds-chakra`) — Chakra Systems Inc.
+- Mantine (`@polyxd/ds-mantine`) — Vitaly Rtishchev
+- Radix UI (`@polyxd/ds-radix`) — WorkOS
+
+Google, IBM, Microsoft, Shopify, Adobe and GitHub restrict the use of their
+logos without permission; each pack's manifest (`logo`) and README record the
+source and the owner's guidelines. GOV.UK's crown and logotype are protected and
+may not be used by a service that is not on GOV.UK, so `@polyxd/ds-govuk` ships
+no logo and is named in words only.
+
+The twelve template packs' `logo.svg` files are Polyxd's own marks, drawn from
+each template's tokens.
+
+## Template packs
+
+Twelve packs are original Polyxd templates, not readings of any design system:
+`@polyxd/ds-sketch`, `@polyxd/ds-wireframe`, `@polyxd/ds-editorial`,
+`@polyxd/ds-brutalist`, `@polyxd/ds-glass`, `@polyxd/ds-terminal`,
+`@polyxd/ds-pastel`, `@polyxd/ds-civic`, `@polyxd/ds-finance`,
+`@polyxd/ds-health`, `@polyxd/ds-neon` and `@polyxd/ds-mono`. Every value in
+them was chosen for the template, they vendor nothing, and they are Apache-2.0
+like the rest of Polyxd. The typefaces some of them name (Caveat, Patrick Hand,
+Fraunces, Nunito, JetBrains Mono, Space Grotesk) are under the SIL Open Font
+License and are loaded from Google Fonts by the page that uses them, never
+distributed here.
+
 ## Specification
 
 ### A2UI

package/README.md

@@ -0,0 +1,37 @@
+# @polyxd/ds-kit
+
+The `polyxd` command, and the shared parts of building a Polyxd design-system pack: reading CSS custom properties, converting values to DTCG, writing the tiers and the manifest.
+
+```sh
+npx polyxd pack ./src/tokens.css                  # a pack from your tokens, plus a mapping to correct
+npx polyxd check ./ds-acme/manifest.json          # the pack against the semantic token contract
+npx polyxd studio push ./ --to https://studio.polyxd.com/api/w/acme
+npx polyxd dev ./screens                          # preview the documents in a folder as you edit them
+```
+
+## polyxd dev
+
+A local preview for people who write Polyxd documents in their editor.
+
+```sh
+npx polyxd dev [dir] [--port 4310] [--theme material3] [--data <file.json>] [--pack <manifest.json|theme.css>] [--verify] [--open]
+```
+
+It watches `dir` (default: the current folder) for documents: a JSON file with `specVersion` and `components`, or an intent-shaped file with a `document` inside (the document and its `data` are used). A document without embedded data takes `<name>.data.json` beside it, else the file given with `--data`. Packs, registries, reports and other JSON are ignored.
+
+The page at `http://localhost:4310/` lists the documents with a dot for the static check (green clean, amber warnings, red errors), renders the selected one with the real renderer, and lets you switch between all built-in packs (plus one of yours with `--pack`), light and dark, phone, tablet and desktop widths with a draggable edge, and density. Beside the surface: the static check's issues, run in the page with `@polyxd/spec/browser` against the data (a binding that reads nothing is a warning); the document JSON with a copy button; the data, and the data as edited in the surface; and a log of the actions the surface dispatches, with their context resolved. Save any file and the surface reloads in place, keeping your selection and controls.
+
+`--verify` adds a button that runs the full verifier for the selected document (13 packs × light/dark × 390/1100 with axe and the layout check) and streams its output into the panel. It needs `@polyxd/verifier` installed (`npm install -D @polyxd/verifier playwright && npx playwright install chromium`).
+
+The renderer comes from `@polyxd/react/preview`, a single script and stylesheet with React, the renderer, the validator and every theme, so nothing is built on your side. Everything else is Node: `http`, `fs.watch`, and server-sent events.
+
+## Library
+
+```ts
+import { cssVars, resolveVars, length, duration, bezier, shadowLayers, writePack } from "@polyxd/ds-kit";
+import { inferMapping } from "@polyxd/ds-kit/infer";
+```
+
+`cssVars` reads every custom property under the selectors you choose, `resolveVars` follows `var()` references, the converters turn CSS values into DTCG dimensions, durations, easings and shadows, and `writePack` writes the tiers, the manifest and a package.json. `inferMapping` guesses which of your variables fill which contract tokens, from their names and, failing that, by measuring them; `polyxd pack` is built on it.
+
+[Docs](https://polyxd.com/docs/your-design-system/) · [Polyxd](https://polyxd.com) · [Source](https://github.com/visualfart/polyxd)

package/dist/dev-pack.d.ts

@@ -0,0 +1,9 @@
+export interface PackCss {
+    /** The value the surface's data-pxd-theme attribute takes. */
+    name: string;
+    css: string;
+}
+/** CSS declarations for one resolved token; composite typography expands into its parts. */
+export declare function declarations(name: string, type: string, value: unknown): [string, string][];
+/** A pack as theme CSS: from its manifest (compiled here) or from a stylesheet (served as is). */
+export declare function packCss(path: string): Promise<PackCss>;

package/dist/dev-pack.js

@@ -0,0 +1,100 @@
+/**
+ * `polyxd dev --pack`: a pack of your own in the preview's pack switcher, next to the built-in ones.
+ *
+ * Takes a manifest (what `polyxd pack` writes) and compiles its semantic tier to the CSS variables
+ * the renderer reads, the way @polyxd/react's theme build does; or an already compiled theme
+ * stylesheet, served as it is.
+ */
+import { readFile } from "node:fs/promises";
+import { basename } from "node:path";
+import { loadContract, loadDesignSystem } from "@polyxd/spec";
+const cssVar = (token) => `--pxd-${token.replace(/\./g, "-")}`;
+const dim = (v) => (typeof v === "object" && v && "unit" in v ? `${v.value}${v.unit}` : String(v));
+function color(v) {
+    if (typeof v === "string")
+        return v;
+    const c = v;
+    if (c.alpha !== undefined && c.alpha < 1 && c.colorSpace === "srgb") {
+        const [r, g, b] = c.components.map((x) => Math.round(x * 255));
+        return `rgb(${r} ${g} ${b} / ${c.alpha})`;
+    }
+    return c.hex ?? `color(${c.colorSpace} ${c.components.join(" ")})`;
+}
+const GENERIC = /^(serif|sans-serif|monospace|cursive|fantasy|system-ui|ui-sans-serif|ui-serif|ui-monospace|ui-rounded|math|emoji|fangsong|-apple-system|BlinkMacSystemFont)$/;
+function family(v) {
+    const names = (Array.isArray(v) ? v : String(v).split(",")).map((f) => String(f).trim().replace(/^["']|["']$/g, ""));
+    const css = names.map((f) => (GENERIC.test(f) || /^[A-Za-z_][\w-]*$/.test(f) ? f : `"${f}"`));
+    if (!names.some((f) => /^(serif|sans-serif|monospace|system-ui|ui-sans-serif|ui-serif|ui-monospace)$/.test(f)))
+        css.push("system-ui", "sans-serif");
+    return css.join(", ");
+}
+/** CSS declarations for one resolved token; composite typography expands into its parts. */
+export function declarations(name, type, value) {
+    const v = cssVar(name);
+    switch (type) {
+        case "color":
+            return [[v, color(value)]];
+        case "dimension":
+        case "duration":
+            return [[v, dim(value)]];
+        case "number":
+            return [[v, String(value)]];
+        case "cubicBezier":
+            return [[v, `cubic-bezier(${value.join(", ")})`]];
+        case "shadow": {
+            const one = (s) => `${s.inset ? "inset " : ""}${dim(s.offsetX)} ${dim(s.offsetY)} ${dim(s.blur)} ${dim(s.spread)} ${color(s.color)}`;
+            return [[v, Array.isArray(value) ? value.map(one).join(", ") : one(value)]];
+        }
+        case "fontFamily":
+            return [[v, family(value)]];
+        case "typography": {
+            const t = value;
+            return [
+                [`${v}-family`, family(t.fontFamily)],
+                [`${v}-size`, dim(t.fontSize)],
+                [`${v}-weight`, String(t.fontWeight)],
+                [`${v}-line-height`, dim(t.lineHeight)],
+                [`${v}-letter-spacing`, t.letterSpacing === undefined ? "normal" : dim(t.letterSpacing)],
+            ];
+        }
+        default:
+            return [[v, String(value)]];
+    }
+}
+/** A pack as theme CSS: from its manifest (compiled here) or from a stylesheet (served as is). */
+export async function packCss(path) {
+    if (path.endsWith(".css")) {
+        const css = await readFile(path, "utf8");
+        const named = /data-pxd-theme=["']?([a-z0-9-]+)/i.exec(css);
+        return { name: named?.[1] ?? basename(path, ".css"), css };
+    }
+    const [{ manifest, modes }, contract] = await Promise.all([loadDesignSystem(path), loadContract()]);
+    const blocks = [`/* ${manifest.name}, compiled by polyxd dev from ${basename(path)} */`];
+    const missing = [];
+    for (const [mode, tokens] of modes) {
+        const lines = [];
+        for (const name of Object.keys(contract.tokens)) {
+            const t = tokens.get(name);
+            if (!t) {
+                missing.push(`${mode}: ${name}`);
+                continue;
+            }
+            for (const [k, val] of declarations(name, t.type, t.value))
+                lines.push(`  ${k}: ${val};`);
+        }
+        for (const [k, v] of Object.entries(manifest.layout ?? {}))
+            lines.push(`  --pxd-layout-${k}: ${v};`);
+        lines.push(`  color-scheme: ${mode === "dark" ? "dark" : "light"};`);
+        const selector = modes.size === 1
+            ? `[data-pxd-theme="${manifest.name}"]`
+            : mode === manifest.defaultMode
+                ? `[data-pxd-theme="${manifest.name}"]:not([data-pxd-mode]),\n[data-pxd-theme="${manifest.name}"][data-pxd-mode="${mode}"]`
+                : `[data-pxd-theme="${manifest.name}"][data-pxd-mode="${mode}"]`;
+        blocks.push(`${selector} {\n${lines.join("\n")}\n}`);
+    }
+    // A pack still being drafted renders with what it has; the contract check is `polyxd check`'s job.
+    if (missing.length)
+        blocks.push(`/* ${missing.length} contract token(s) not in this pack: ${missing.slice(0, 8).join(", ")}${missing.length > 8 ? ", …" : ""} */`);
+    return { name: manifest.name, css: blocks.join("\n\n") + "\n" };
+}
+//# sourceMappingURL=dev-pack.js.map

package/dist/dev-pack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev-pack.js","sourceRoot":"","sources":["../src/dev-pack.ts"],"names":[],"mappings":"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"}

package/dist/dev-page.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The `polyxd dev` page: plain HTML, CSS and JS shipped with the package, so a preview needs no
+ * build step on the author's side. Its chrome is in the system font; only the surface is in the
+ * pack's. Everything it knows about the folder comes from /api/documents and the event stream.
+ */
+export interface PageOptions {
+    dir: string;
+    /** The pack selected on first open. */
+    theme: string;
+    /** A pack added with --pack, by name. */
+    pack?: string;
+    verify: boolean;
+    /** Whether the renderer bundle is installed. */
+    bundle: boolean;
+    themes: string[];
+}
+export declare function devPage(options: PageOptions): string;

package/dist/dev-page.js

@@ -0,0 +1,359 @@
+export function devPage(options) {
+    return PAGE.replace("__OPTIONS__", JSON.stringify(options).replace(/</g, "\\u003c"));
+}
+const PAGE = `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>polyxd dev</title>
+<link rel="stylesheet" href="/preview/polyxd.css">
+<link rel="stylesheet" href="/pack.css" id="packcss">
+<style>
+  :root { color-scheme: light; --bg: #f4f4f6; --panel: #ffffff; --line: #dcdce2; --ink: #1c1c22; --muted: #6a6a75; --accent: #3554d1; --ok: #2e9e5b; --warn: #d99a1b; --err: #d0392b; }
+  * { box-sizing: border-box; }
+  html, body { height: 100%; margin: 0; }
+  body { font: 13px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg); display: flex; flex-direction: column; }
+  button, select { font: inherit; color: inherit; }
+  code, pre { font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+  .bar { display: flex; align-items: center; gap: 16px; padding: 8px 14px; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
+  .bar h1 { font-size: 14px; margin: 0; font-weight: 600; }
+  .bar .dir { color: var(--muted); font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
+  .controls { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-wrap: wrap; }
+  .controls label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
+  select { padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
+  .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
+  .seg button { border: 0; background: #fff; padding: 4px 10px; cursor: pointer; border-right: 1px solid var(--line); }
+  .seg button:last-child { border-right: 0; }
+  .seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
+  .status { color: var(--muted); min-width: 120px; }
+  .status.live::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-right: 6px; }
+  .status.off::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--err); margin-right: 6px; }
+  .layout { flex: 1; display: grid; grid-template-columns: 260px 1fr 400px; min-height: 0; }
+  .list { border-right: 1px solid var(--line); background: var(--panel); overflow: auto; padding: 8px 0; }
+  .list h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 8px 14px 4px; font-weight: 600; }
+  .doc { display: grid; grid-template-columns: 12px 1fr; gap: 0 8px; width: 100%; text-align: left; border: 0; background: none; padding: 7px 14px; cursor: pointer; }
+  .doc:hover { background: #f0f0f4; }
+  .doc[aria-current="true"] { background: #e8ecfb; }
+  .doc .dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; background: var(--ok); }
+  .doc .dot.warn { background: var(--warn); }
+  .doc .dot.err { background: var(--err); }
+  .doc .t { font-weight: 500; }
+  .doc .m { color: var(--muted); font-size: 12px; font-family: ui-monospace, Menlo, monospace; }
+  .doc .k { color: var(--muted); font-size: 11px; }
+  .stage { overflow: auto; padding: 20px; display: flex; justify-content: center; align-items: flex-start; }
+  .frame { position: relative; flex: none; min-height: 60%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 1px var(--line); border-radius: 6px; overflow: visible; }
+  .frame .grip { position: absolute; top: 0; right: -14px; width: 10px; height: 100%; cursor: ew-resize; border-radius: 4px; background: transparent; }
+  .frame .grip::after { content: ""; position: absolute; top: 50%; left: 3px; width: 4px; height: 36px; margin-top: -18px; border-radius: 2px; background: #c2c2cc; }
+  .frame .grip:hover::after, .frame .grip.on::after { background: var(--accent); }
+  #surface { min-height: 200px; }
+  .empty { padding: 40px; color: var(--muted); text-align: center; }
+  .panel { border-left: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; min-height: 0; }
+  .tabs { display: flex; border-bottom: 1px solid var(--line); }
+  .tabs button { flex: 1; border: 0; background: none; padding: 9px 4px; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; font-size: 12px; }
+  .tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
+  .tabs button b { font-weight: 600; }
+  .pane { display: none; overflow: auto; flex: 1; padding: 12px 14px; }
+  .pane.on { display: block; }
+  .pane pre { margin: 0; white-space: pre-wrap; word-break: break-word; background: #f6f6f8; border: 1px solid var(--line); border-radius: 6px; padding: 10px; }
+  .pane h3 { font-size: 12px; margin: 14px 0 6px; color: var(--muted); font-weight: 600; }
+  .pane h3:first-child { margin-top: 0; }
+  .note { color: var(--muted); margin: 0 0 10px; }
+  .toolrow { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
+  .btn { border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 4px 10px; cursor: pointer; }
+  .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
+  .btn[disabled] { opacity: .5; cursor: default; }
+  .issue { display: grid; grid-template-columns: 52px 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
+  .issue .sev { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; padding-top: 2px; }
+  .issue .sev.error { color: var(--err); }
+  .issue .sev.warning { color: var(--warn); }
+  .issue .at { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--muted); }
+  .action { padding: 8px 0; border-bottom: 1px solid var(--line); }
+  .action .n { font-weight: 600; }
+  .action .s { color: var(--muted); font-size: 12px; }
+  .action pre { margin-top: 4px; }
+  .verify-out { font-size: 11px; max-height: none; }
+  .verify-out .err { color: var(--err); }
+  .warning-box { background: #fff7e6; border: 1px solid #f0d9a0; padding: 10px; border-radius: 6px; margin-bottom: 10px; }
+  @media (max-width: 1100px) { .layout { grid-template-columns: 220px 1fr; } .panel { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); max-height: 40vh; } }
+</style>
+</head>
+<body>
+<header class="bar">
+  <h1>polyxd dev</h1>
+  <span class="dir" id="dir"></span>
+  <div class="controls">
+    <label>Pack <select id="theme" aria-label="Design-system pack"></select></label>
+    <div class="seg" id="mode" role="group" aria-label="Mode"><button data-v="light">Light</button><button data-v="dark">Dark</button></div>
+    <div class="seg" id="width" role="group" aria-label="Width"><button data-v="390">Phone</button><button data-v="820">Tablet</button><button data-v="1100">Desktop</button></div>
+    <span id="widthpx" class="dir">390px</span>
+    <label>Density <select id="density" aria-label="Density"><option value="comfortable">comfortable</option><option value="compact">compact</option><option value="spacious">spacious</option></select></label>
+    <span class="status" id="status" aria-live="polite"></span>
+  </div>
+</header>
+<main class="layout">
+  <nav class="list" id="list" aria-label="Documents"></nav>
+  <section class="stage" id="stage">
+    <div class="frame" id="frame" style="width:390px">
+      <div id="surface"></div>
+      <div class="grip" id="grip" title="Drag to resize" role="separator" aria-orientation="vertical" aria-label="Resize the surface"></div>
+    </div>
+  </section>
+  <aside class="panel">
+    <div class="tabs" role="tablist" aria-label="Panel">
+      <button role="tab" data-tab="issues" id="tab-issues">Issues</button>
+      <button role="tab" data-tab="document">Document</button>
+      <button role="tab" data-tab="data">Data</button>
+      <button role="tab" data-tab="actions" id="tab-actions">Actions</button>
+      <button role="tab" data-tab="verify">Verify</button>
+    </div>
+    <div class="pane" id="pane-issues" role="tabpanel"></div>
+    <div class="pane" id="pane-document" role="tabpanel">
+      <div class="toolrow"><button class="btn" id="copy-doc">Copy JSON</button><span class="note" id="doc-note"></span></div>
+      <pre id="doc-json"></pre>
+    </div>
+    <div class="pane" id="pane-data" role="tabpanel"></div>
+    <div class="pane" id="pane-actions" role="tabpanel"></div>
+    <div class="pane" id="pane-verify" role="tabpanel"></div>
+  </aside>
+</main>
+<script src="/preview/polyxd.js"></script>
+<script>
+(function () {
+  var O = __OPTIONS__;
+  var P = window.Polyxd;
+  var $ = function (id) { return document.getElementById(id); };
+  var esc = function (s) { return String(s).replace(/[&<>"]/g, function (c) { return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c]; }); };
+  var pretty = function (v) { return JSON.stringify(v, null, 2); };
+  var time = function () { return new Date().toLocaleTimeString("en-GB"); };
+
+  // ---- state, kept across reloads of this page; the event stream never reloads it ----
+  var KEY = "polyxd-dev:" + O.dir;
+  var state = { selected: null, theme: O.theme, mode: "light", width: 390, density: "comfortable", tab: "issues" };
+  try { Object.assign(state, JSON.parse(localStorage.getItem(KEY) || "{}")); } catch (e) {}
+  var save = function () { try { localStorage.setItem(KEY, JSON.stringify(state)); } catch (e) {} };
+
+  var docs = [], broken = [], current = null, handle = null, versions = {}, actions = [], liveData = null, verifyStream = null;
+  var themes = (P && P.themes) || O.themes;
+  if (O.pack && themes.indexOf(O.pack) < 0) themes = [O.pack].concat(themes);
+  if (themes.indexOf(state.theme) < 0) state.theme = O.theme;
+  if (!O.pack) $("packcss").remove();
+
+  // ---- controls ----
+  $("dir").textContent = O.dir;
+  var themeSel = $("theme");
+  themes.forEach(function (t) { var o = document.createElement("option"); o.value = t; o.textContent = t === O.pack ? t + " (--pack)" : t; themeSel.appendChild(o); });
+  themeSel.value = state.theme;
+  themeSel.onchange = function () { state.theme = themeSel.value; save(); render(); };
+  var dens = $("density");
+  dens.value = state.density;
+  dens.onchange = function () { state.density = dens.value; save(); render(); };
+  var seg = function (id, get, set) {
+    var el = $(id);
+    var paint = function () { Array.prototype.forEach.call(el.querySelectorAll("button"), function (b) { b.setAttribute("aria-pressed", String(b.dataset.v === String(get()))); }); };
+    el.onclick = function (e) { var b = e.target.closest("button"); if (!b) return; set(b.dataset.v); paint(); };
+    paint();
+    return paint;
+  };
+  var paintMode = seg("mode", function () { return state.mode; }, function (v) { state.mode = v; save(); render(); });
+  var paintWidth = seg("width", function () { return state.width; }, function (v) { setWidth(Number(v)); });
+  function setWidth(w) {
+    var max = Math.max(320, $("stage").clientWidth - 60);
+    state.width = Math.round(Math.min(max, Math.max(320, w)));
+    $("frame").style.width = state.width + "px";
+    $("widthpx").textContent = state.width + "px";
+    paintWidth();
+    save();
+  }
+  setWidth(state.width);
+  // The grip: drag the surface's edge to any width between phone and the stage.
+  (function () {
+    var grip = $("grip"), startX = 0, startW = 0;
+    var move = function (e) { setWidth(startW + (e.clientX - startX)); };
+    var up = function () { grip.classList.remove("on"); window.removeEventListener("pointermove", move); window.removeEventListener("pointerup", up); };
+    grip.addEventListener("pointerdown", function (e) { startX = e.clientX; startW = state.width; grip.classList.add("on"); window.addEventListener("pointermove", move); window.addEventListener("pointerup", up); e.preventDefault(); });
+    grip.addEventListener("keydown", function (e) { if (e.key === "ArrowLeft") setWidth(state.width - 20); if (e.key === "ArrowRight") setWidth(state.width + 20); });
+    grip.tabIndex = 0;
+  })();
+
+  // ---- tabs ----
+  var tabs = document.querySelectorAll(".tabs button");
+  var showTab = function (name) {
+    state.tab = name; save();
+    Array.prototype.forEach.call(tabs, function (b) { b.setAttribute("aria-selected", String(b.dataset.tab === name)); });
+    Array.prototype.forEach.call(document.querySelectorAll(".pane"), function (p) { p.classList.toggle("on", p.id === "pane-" + name); });
+  };
+  Array.prototype.forEach.call(tabs, function (b) { b.onclick = function () { showTab(b.dataset.tab); }; });
+  showTab(state.tab);
+
+  // ---- the document list ----
+  var dot = function (check) { return check.errors ? "err" : check.warnings ? "warn" : "ok"; };
+  function paintList() {
+    var list = $("list");
+    var html = "<h2>" + docs.length + " document" + (docs.length === 1 ? "" : "s") + "</h2>";
+    if (!docs.length) html += '<p class="note" style="padding:0 14px">No documents here yet. A document is a JSON file with <code>specVersion</code> and <code>components</code>, or an intent file with a <code>document</code> inside.</p>';
+    docs.forEach(function (d) {
+      var kind = [d.kind, d.origin, d.dataFrom === "none" ? "no data" : d.dataFrom === "embedded" ? null : "data: " + d.dataFrom].filter(Boolean).join(" · ");
+      var title = d.check.errors + " error(s), " + d.check.warnings + " warning(s)";
+      html += '<button class="doc" data-file="' + esc(d.file) + '" aria-current="' + (d.file === state.selected) + '" title="' + esc(title) + '">' +
+        '<span class="dot ' + dot(d.check) + '" aria-label="' + esc(title) + '"></span>' +
+        '<span><span class="t">' + esc(d.title) + '</span><br><span class="m">' + esc(d.id || d.file) + '</span><br><span class="k">' + esc(kind) + '</span></span></button>';
+    });
+    if (broken.length) {
+      html += "<h2>Did not parse</h2>";
+      broken.forEach(function (b) { html += '<div class="doc" title="' + esc(b.message) + '"><span class="dot err"></span><span><span class="m">' + esc(b.file) + '</span><br><span class="k">' + esc(b.message) + '</span></span></div>'; });
+    }
+    list.innerHTML = html;
+    Array.prototype.forEach.call(list.querySelectorAll("button.doc"), function (b) { b.onclick = function () { select(b.dataset.file); }; });
+  }
+
+  // ---- the selected document ----
+  function select(file) {
+    if (!docs.some(function (d) { return d.file === file; })) file = docs.length ? docs[0].file : null;
+    var changed = file !== state.selected;
+    state.selected = file; save();
+    paintList();
+    if (!file) { current = null; unmount(); $("surface").innerHTML = '<p class="empty">Nothing to render.</p>'; paintPanels(); return; }
+    if (changed) { actions = []; liveData = null; stopVerify(); }
+    fetch("/api/documents/" + encodeURIComponent(file).replace(/%2F/g, "/")).then(function (r) { return r.json(); }).then(function (d) {
+      if (d.error) return;
+      current = d;
+      versions[file] = (versions[file] || 0) + 1;
+      render();
+      paintPanels();
+    });
+  }
+  function unmount() { if (handle) { handle.unmount(); handle = null; } }
+  function render() {
+    if (!current) return;
+    if (!P) { $("surface").innerHTML = '<p class="empty">The renderer bundle isn\\u2019t installed, so nothing renders here: <code>npm install @polyxd/react</code>, then start again.</p>'; return; }
+    var file = current.file;
+    var props = {
+      key: file + ":" + versions[file],
+      document: current.document,
+      data: current.data,
+      theme: state.theme,
+      mode: state.mode,
+      density: state.density,
+      onAction: function (e) { actions.unshift({ at: time(), name: e.name, source: e.source, context: e.context }); paintActions(); },
+      onDismiss: function () { actions.unshift({ at: time(), name: "ui.dismiss", source: "(surface)", context: {} }); paintActions(); },
+      onDataChange: function (d) { liveData = d; if (state.tab === "data") paintData(); }
+    };
+    if (handle) handle.update(props);
+    else { $("surface").innerHTML = ""; handle = P.mount($("surface"), props); }
+  }
+
+  // ---- panels ----
+  function paintPanels() { paintIssues(); paintDocument(); paintData(); paintActions(); paintVerify(); }
+  function issuesOf(d) {
+    if (P && P.validateDocument) {
+      try {
+        var doc = d.data !== undefined ? Object.assign({}, d.document, { data: d.data }) : d.document;
+        return P.validateDocument(doc, { missingData: "warning" }).issues;
+      } catch (e) { return [{ severity: "error", at: "/", message: "validator failed: " + e.message }]; }
+    }
+    return d.issues || [];
+  }
+  function paintIssues() {
+    var pane = $("pane-issues"), tab = $("tab-issues");
+    if (!current) { pane.innerHTML = '<p class="note">Select a document.</p>'; tab.innerHTML = "Issues"; return; }
+    var issues = issuesOf(current);
+    var errors = issues.filter(function (i) { return i.severity === "error"; }).length;
+    var warnings = issues.length - errors;
+    tab.innerHTML = "Issues" + (issues.length ? " <b>" + issues.length + "</b>" : "");
+    var html = '<p class="note">Static check' + (P ? " (run in this page with @polyxd/spec/browser)" : "") + ": schema, structure and every binding against the data the surface shows. " +
+      (issues.length ? errors + " error" + (errors === 1 ? "" : "s") + ", " + warnings + " warning" + (warnings === 1 ? "" : "s") + "." : "Nothing to report.") + "</p>";
+    issues.forEach(function (i) {
+      html += '<div class="issue"><span class="sev ' + i.severity + '">' + i.severity + "</span><span>" + esc(i.message) + '<br><span class="at">' + esc(i.at) + (i.code ? " · " + esc(i.code) : "") + "</span></span></div>";
+    });
+    pane.innerHTML = html;
+  }
+  function paintDocument() {
+    if (!current) { $("doc-json").textContent = ""; $("doc-note").textContent = ""; return; }
+    $("doc-json").textContent = pretty(current.document);
+    $("doc-note").textContent = current.file + " · " + current.document.components.length + " components" + (current.kind === "intent" ? " · from the intent file's document" : "");
+  }
+  $("copy-doc").onclick = function () {
+    if (!current) return;
+    var b = $("copy-doc");
+    navigator.clipboard.writeText(pretty(current.document)).then(function () { b.textContent = "Copied"; setTimeout(function () { b.textContent = "Copy JSON"; }, 1200); }, function () { b.textContent = "Couldn\\u2019t copy"; });
+  };
+  function paintData() {
+    var pane = $("pane-data");
+    if (!current) { pane.innerHTML = '<p class="note">Select a document.</p>'; return; }
+    var from = { embedded: "the document\\u2019s own data", sibling: "the sibling .data.json file", "default": "--data", none: "nowhere: this document has no data" }[current.dataFrom];
+    var html = "<h3>Data from " + esc(from) + "</h3>";
+    html += current.data === undefined ? '<p class="note">Bindings will render blank. Put a <code>data</code> snapshot in the document, a <code>' + esc(current.file.replace(/\\.json$/, ".data.json")) + "</code> beside it, or pass <code>--data</code>.</p>" : "<pre>" + esc(pretty(current.data)) + "</pre>";
+    if (liveData) html += "<h3>As edited in the surface</h3><pre>" + esc(pretty(liveData)) + "</pre>";
+    pane.innerHTML = html;
+  }
+  function paintActions() {
+    var pane = $("pane-actions"), tab = $("tab-actions");
+    tab.innerHTML = "Actions" + (actions.length ? " <b>" + actions.length + "</b>" : "");
+    if (!actions.length) { pane.innerHTML = '<p class="note">Actions the surface dispatches show here with their context resolved against the data: press a button, choose a row, submit a form.</p>'; return; }
+    pane.innerHTML = '<div class="toolrow"><button class="btn" id="clear-actions">Clear</button></div>' + actions.map(function (a) {
+      return '<div class="action"><span class="n">' + esc(a.name) + '</span> <span class="s">from ' + esc(a.source) + " · " + a.at + "</span><pre>" + esc(pretty(a.context)) + "</pre></div>";
+    }).join("");
+    $("clear-actions").onclick = function () { actions = []; paintActions(); };
+  }
+
+  // ---- verify: the full verifier, streamed ----
+  function stopVerify() { if (verifyStream) { verifyStream.close(); verifyStream = null; } }
+  function paintVerify() {
+    var pane = $("pane-verify");
+    if (!O.verify) { pane.innerHTML = '<p class="note">Start with <code>--verify</code> to run the full verifier from here: every built-in pack, light and dark, phone and desktop, with axe and the layout check. It needs <code>@polyxd/verifier</code> installed.</p>'; return; }
+    pane.innerHTML = '<div class="toolrow"><button class="btn primary" id="run-verify"' + (current ? "" : " disabled") + ">Verify in " + O.themes.length + ' packs</button><span class="note" id="verify-note"></span></div><pre class="verify-out" id="verify-out"></pre>';
+    $("run-verify").onclick = runVerify;
+  }
+  function runVerify() {
+    if (!current) return;
+    stopVerify();
+    var out = $("verify-out"), btn = $("run-verify"), note = $("verify-note");
+    out.textContent = ""; btn.disabled = true; note.textContent = "Running\\u2026 (26 renders; a minute or so)";
+    verifyStream = new EventSource("/api/verify/" + encodeURIComponent(current.file).replace(/%2F/g, "/"));
+    verifyStream.addEventListener("line", function (e) {
+      var d = JSON.parse(e.data);
+      var span = document.createElement("span");
+      span.className = d.stream === "err" ? "err" : "";
+      span.textContent = d.text + "\\n";
+      out.appendChild(span);
+      out.scrollTop = out.scrollHeight;
+    });
+    verifyStream.addEventListener("done", function (e) {
+      var d = JSON.parse(e.data);
+      note.textContent = d.code === 0 ? "Done: no errors." : d.code === 1 ? "Done: errors found." : "Did not run.";
+      btn.disabled = false;
+      stopVerify();
+    });
+    verifyStream.onerror = function () { note.textContent = "Stream ended."; btn.disabled = false; stopVerify(); };
+  }
+
+  // ---- the folder, live ----
+  function apply(listing) {
+    docs = listing.documents; broken = listing.broken || [];
+    paintList();
+  }
+  function setStatus(text, cls) { var s = $("status"); s.textContent = text; s.className = "status " + (cls || ""); }
+  var events = new EventSource("/api/events");
+  events.addEventListener("hello", function (e) {
+    apply(JSON.parse(e.data));
+    setStatus("watching", "live");
+    if (!current || !docs.some(function (d) { return d.file === state.selected; })) select(state.selected);
+  });
+  events.addEventListener("change", function (e) {
+    var d = JSON.parse(e.data);
+    apply(d);
+    if (state.selected && d.removed.indexOf(state.selected) >= 0) { select(null); setStatus("removed " + time(), "live"); return; }
+    if (state.selected && d.changed.indexOf(state.selected) >= 0) { select(state.selected); setStatus("reloaded " + time(), "live"); }
+    else if (!state.selected && docs.length) select(docs[0].file);
+    else setStatus("watching", "live");
+  });
+  events.addEventListener("bye", function () { setStatus("server stopped", "off"); });
+  events.onerror = function () { setStatus("reconnecting\\u2026", "off"); };
+  window.addEventListener("resize", function () { setWidth(state.width); });
+})();
+</script>
+</body>
+</html>
+`;
+//# sourceMappingURL=dev-page.js.map

package/dist/dev-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev-page.js","sourceRoot":"","sources":["../src/dev-page.ts"],"names":[],"mappings":"AAiBA,MAAM,UAAU,OAAO,CAAC,OAAoB;IAC1C,OAAO,IAAI,CAAC,OAAO,CAAC,aAAa,EAAE,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;AACvF,CAAC;AAED,MAAM,IAAI,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkWZ,CAAC"}