@widgentic/designer 0.1.0 → 0.3.0

package/dist/chrome-defaults.d.ts

@@ -0,0 +1,67 @@
+/**
+ * The chrome tokens and the palettes painted through them.
+ *
+ * `CHROME_DEFAULTS` is not a description of the defaults — it IS them: the
+ * injected stylesheet's token blocks are generated from this object, so a host
+ * that paints its own surfaces from the export cannot drift from the
+ * designers. There is deliberately no second palette to fall back to: a host
+ * that wants a different look passes its own values through `chrome`, and
+ * `chromeCss` renders whatever palette it hands back.
+ *
+ * Colours and shape carry the product's identity. Typography does not: a
+ * library must never default to a webfont it cannot serve, so `font`,
+ * `font-mono` and the three sizes stay system values in both palettes and a
+ * host with its own typeface passes it through `chrome`.
+ */
+/**
+ * The chrome tokens — every `--wgd-<token>` the stylesheet paints with.
+ * Colours (18) differ between the schemes; typography, shape and shadow are
+ * declared per scheme too so each palette stands alone. Public API: a rename
+ * is a spec change.
+ */
+export declare const CHROME_TOKENS: readonly ["bg", "panel", "border", "line", "text", "muted", "accent", "accent-bg", "accent-line", "danger", "danger-bg", "danger-line", "hover", "hl-key", "hl-str", "hl-num", "hl-bool", "hl-punct", "font", "font-mono", "font-size", "font-size-sm", "font-size-xs", "radius-sm", "radius", "radius-lg", "gap", "shadow"];
+export type ChromeToken = (typeof CHROME_TOKENS)[number];
+/** A host's partial chrome: token → CSS value (`var()` references welcome). */
+export type ChromeOptions = Partial<Record<ChromeToken, string>>;
+/** Every token valued — what a palette is. */
+export type ChromeScheme = Record<ChromeToken, string>;
+/** A complete palette: both schemes, every token. */
+export interface ChromePalette {
+    light: ChromeScheme;
+    dark: ChromeScheme;
+}
+/**
+ * The widgentic palette — what the designers render with when a host passes
+ * no `chrome`, and what a host paints its own page with to match them.
+ *
+ * Every colour sits on the logo mark's own hue (197.6deg, from `#40a0c8`).
+ * Surfaces, text and accents come from the product's existing palette;
+ * `border`, `accent-line` and `danger-line` are DERIVED, not chosen: each is
+ * the lightest value on that hue which still clears 3:1 against the surface
+ * it sits on, because those edges are what identifies a control, a focused tag
+ * and a banner. Minimum weight that complies, so nothing is heavier than
+ * accessibility requires. See chrome-contrast.test.ts for the gate.
+ */
+export declare const CHROME_DEFAULTS: ChromePalette;
+export interface ChromeCssOptions {
+    /** Custom-property prefix, dashes included. Default `--wgd`. */
+    prefix?: string;
+    /** Selector the light block is written under. Default `:root`. */
+    selector?: string;
+    /** Selector for the dark block inside `prefers-color-scheme: dark`; defaults to `selector`. */
+    darkMediaSelector?: string;
+    /** Optional selector for an unconditional dark block — an explicit host toggle. */
+    darkSelector?: string;
+}
+/**
+ * Render a palette as CSS declaration blocks — the light values under
+ * `selector`, the dark values under `prefers-color-scheme: dark`, and
+ * optionally under an explicit selector a host toggles. Every token is
+ * declared in every block, so nothing falls back to a browser value.
+ *
+ * A string builder, deliberately: no injection, no runtime, no dependency.
+ * The designers' own stylesheet is built with it, and so is a host page that
+ * wants its surfaces to match them.
+ */
+export declare function chromeCss(palette: ChromePalette, options?: ChromeCssOptions): string;
+//# sourceMappingURL=chrome-defaults.d.ts.map

package/dist/chrome-defaults.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chrome-defaults.d.ts","sourceRoot":"","sources":["../src/chrome-defaults.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH;;;;;GAKG;AACH,eAAO,MAAM,aAAa,YACxB,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAChD,QAAQ,EAAE,WAAW,EAAE,aAAa,EACpC,QAAQ,EAAE,WAAW,EAAE,aAAa,EAAE,OAAO,EAC7C,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EACnD,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,cAAc,EAChE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,CAC3C,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAEzD,+EAA+E;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;AAEjE,8CAA8C;AAC9C,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;AAEvD,qDAAqD;AACrD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,YAAY,CAAC;IACpB,IAAI,EAAE,YAAY,CAAC;CACpB;AAWD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,eAAe,EAAE,aAyB7B,CAAC;AAEF,MAAM,WAAW,gBAAgB;IAC/B,gEAAgE;IAChE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+FAA+F;IAC/F,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mFAAmF;IACnF,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAMD;;;;;;;;;GASG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,aAAa,EAAE,OAAO,GAAE,gBAAqB,GAAG,MAAM,CAYxF"}

package/dist/chrome-defaults.js

@@ -0,0 +1,102 @@
+/**
+ * The chrome tokens and the palettes painted through them.
+ *
+ * `CHROME_DEFAULTS` is not a description of the defaults — it IS them: the
+ * injected stylesheet's token blocks are generated from this object, so a host
+ * that paints its own surfaces from the export cannot drift from the
+ * designers. There is deliberately no second palette to fall back to: a host
+ * that wants a different look passes its own values through `chrome`, and
+ * `chromeCss` renders whatever palette it hands back.
+ *
+ * Colours and shape carry the product's identity. Typography does not: a
+ * library must never default to a webfont it cannot serve, so `font`,
+ * `font-mono` and the three sizes stay system values in both palettes and a
+ * host with its own typeface passes it through `chrome`.
+ */
+/**
+ * The chrome tokens — every `--wgd-<token>` the stylesheet paints with.
+ * Colours (18) differ between the schemes; typography, shape and shadow are
+ * declared per scheme too so each palette stands alone. Public API: a rename
+ * is a spec change.
+ */
+export const CHROME_TOKENS = [
+    "bg", "panel", "border", "line", "text", "muted",
+    "accent", "accent-bg", "accent-line",
+    "danger", "danger-bg", "danger-line", "hover",
+    "hl-key", "hl-str", "hl-num", "hl-bool", "hl-punct",
+    "font", "font-mono", "font-size", "font-size-sm", "font-size-xs",
+    "radius-sm", "radius", "radius-lg", "gap", "shadow"
+];
+/** Shared by both palettes: see the module header on why typography is not branded. */
+const TYPOGRAPHY = {
+    font: "system-ui, sans-serif",
+    "font-mono": "ui-monospace, monospace",
+    "font-size": "13px",
+    "font-size-sm": "12px",
+    "font-size-xs": "11px"
+};
+/**
+ * The widgentic palette — what the designers render with when a host passes
+ * no `chrome`, and what a host paints its own page with to match them.
+ *
+ * Every colour sits on the logo mark's own hue (197.6deg, from `#40a0c8`).
+ * Surfaces, text and accents come from the product's existing palette;
+ * `border`, `accent-line` and `danger-line` are DERIVED, not chosen: each is
+ * the lightest value on that hue which still clears 3:1 against the surface
+ * it sits on, because those edges are what identifies a control, a focused tag
+ * and a banner. Minimum weight that complies, so nothing is heavier than
+ * accessibility requires. See chrome-contrast.test.ts for the gate.
+ */
+export const CHROME_DEFAULTS = {
+    light: {
+        bg: "#f6fafc", panel: "#ffffff", border: "#6e95a6",
+        line: "#e4ecf2", text: "#0b1b26", muted: "#56707f",
+        accent: "#1e6f92", "accent-bg": "#e3f1f7", "accent-line": "#4b91ae",
+        danger: "#b42318", "danger-bg": "#fdf2f2", "danger-line": "#c97572",
+        hover: "#eef5f9",
+        "hl-key": "#1e6f92", "hl-str": "#2e7d5b", "hl-num": "#96620f",
+        "hl-bool": "#7a4fbf", "hl-punct": "#56707f",
+        ...TYPOGRAPHY,
+        "radius-sm": "4px", radius: "6px", "radius-lg": "8px", gap: "16px",
+        shadow: "0 8px 24px -12px rgba(11, 27, 38, 0.35)"
+    },
+    dark: {
+        bg: "#0b141b", panel: "#10202a", border: "#437082",
+        line: "#1b2f3d", text: "#e6f0f5", muted: "#93a9b6",
+        accent: "#8acbe6", "accent-bg": "#14303d", "accent-line": "#3e7e98",
+        danger: "#f0a3a3", "danger-bg": "#2a1a1c", "danger-line": "#a3524f",
+        hover: "#152a36",
+        "hl-key": "#8acbe6", "hl-str": "#6cc79a", "hl-num": "#e0b25a",
+        "hl-bool": "#bb9af7", "hl-punct": "#93a9b6",
+        ...TYPOGRAPHY,
+        "radius-sm": "4px", radius: "6px", "radius-lg": "8px", gap: "16px",
+        shadow: "0 8px 24px -12px rgba(0, 0, 0, 0.7)"
+    }
+};
+function declarations(scheme, prefix, indent) {
+    return CHROME_TOKENS.map((token) => `${indent}${prefix}-${token}: ${scheme[token]};`).join("\n");
+}
+/**
+ * Render a palette as CSS declaration blocks — the light values under
+ * `selector`, the dark values under `prefers-color-scheme: dark`, and
+ * optionally under an explicit selector a host toggles. Every token is
+ * declared in every block, so nothing falls back to a browser value.
+ *
+ * A string builder, deliberately: no injection, no runtime, no dependency.
+ * The designers' own stylesheet is built with it, and so is a host page that
+ * wants its surfaces to match them.
+ */
+export function chromeCss(palette, options = {}) {
+    const prefix = options.prefix ?? "--wgd";
+    const selector = options.selector ?? ":root";
+    const darkMediaSelector = options.darkMediaSelector ?? selector;
+    const blocks = [
+        `${selector} {\n${declarations(palette.light, prefix, "  ")}\n}`,
+        `@media (prefers-color-scheme: dark) {\n  ${darkMediaSelector} {\n${declarations(palette.dark, prefix, "    ")}\n  }\n}`
+    ];
+    if (options.darkSelector !== undefined) {
+        blocks.push(`${options.darkSelector} {\n${declarations(palette.dark, prefix, "  ")}\n}`);
+    }
+    return blocks.join("\n");
+}
+//# sourceMappingURL=chrome-defaults.js.map

package/dist/chrome-defaults.js.map

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

package/dist/dom.d.ts

@@ -1,9 +1,4 @@
-/**
- * Tiny DOM helpers for the designer chrome — the same hand-rolled
- * discipline as the rest of the project, sized for form-heavy panels.
- * Designer chrome classes are prefixed `wgd-` (widget content inside the
- * preview keeps the normal `wg-` classes).
- */
+import type { ChromeOptions } from "./chrome-defaults.js";
 export type Child = Node | string;
 /** The first `<selector>` under `parent`, which the caller's own markup guarantees exists. */
 export declare function requireChild<K extends keyof HTMLElementTagNameMap>(parent: ParentNode, selector: K): HTMLElementTagNameMap[K];
@@ -32,6 +27,17 @@ export declare function fitSelect(select: HTMLSelectElement): void;
 export declare function menuButton(label: string, title: string, options: string[], onPick: (option: string) => void): HTMLElement;
 /** Inline diagnostic line (empty text removes it from the flow). */
 export declare function diagnosticLine(text: string | undefined): HTMLElement;
+export { CHROME_TOKENS } from "./chrome-defaults.js";
+export type { ChromeOptions, ChromeToken } from "./chrome-defaults.js";
+/**
+ * Apply a host's chrome on a designer root as inline custom properties —
+ * the style attribute outranks every rule in the injected stylesheet, so
+ * the host's values win over the light/dark defaults. Unknown tokens,
+ * non-string values and CSS-wide keywords are ignored at the door.
+ */
+export declare function applyChrome(root: HTMLElement, chrome: ChromeOptions | undefined): void;
+/** The element form of the option: a `chrome` attribute holding JSON; anything else → nothing. */
+export declare function parseChromeAttribute(value: string | null): ChromeOptions | undefined;
 /** Designer chrome stylesheet — injected once per document. */
 export declare function injectDesignerStyles(doc: Document): void;
 //# sourceMappingURL=dom.d.ts.map

package/dist/dom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../src/dom.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,MAAM,MAAM,KAAK,GAAG,IAAI,GAAG,MAAM,CAAC;AAElC,8FAA8F;AAC9F,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,qBAAqB,EAChE,MAAM,EAAE,UAAU,EAClB,QAAQ,EAAE,CAAC,GACV,qBAAqB,CAAC,CAAC,CAAC,CAI1B;AAED,wBAAgB,CAAC,CAAC,CAAC,SAAS,MAAM,qBAAqB,EACrD,GAAG,EAAE,CAAC,EACN,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC9B,QAAQ,CAAC,EAAE,KAAK,EAAE,GACjB,qBAAqB,CAAC,CAAC,CAAC,CAAC;AAC5B,wBAAgB,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,QAAQ,CAAC,EAAE,KAAK,EAAE,GAAG,WAAW,CAAC;AAgBhG,0DAA0D;AAC1D,wBAAgB,SAAS,CACvB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAC/B,WAAW,CAQb;AAED,4DAA4D;AAC5D,wBAAgB,QAAQ,CACtB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,EAChC,IAAI,SAAI,GACP,WAAW,CAcb;AAED,oDAAoD;AACpD,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,IAAI,UAAO,GAAG,WAAW,CAOlF;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAOzD;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CACxB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,MAAM,EAAE,EACjB,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,GAC/B,WAAW,CA6Cb;AAED,oEAAoE;AACpE,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,WAAW,CAIpE;AAID,+DAA+D;AAC/D,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,QAAQ,GAAG,IAAI,CA6PxD"}
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../src/dom.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE1D,MAAM,MAAM,KAAK,GAAG,IAAI,GAAG,MAAM,CAAC;AAElC,8FAA8F;AAC9F,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,qBAAqB,EAChE,MAAM,EAAE,UAAU,EAClB,QAAQ,EAAE,CAAC,GACV,qBAAqB,CAAC,CAAC,CAAC,CAI1B;AAED,wBAAgB,CAAC,CAAC,CAAC,SAAS,MAAM,qBAAqB,EACrD,GAAG,EAAE,CAAC,EACN,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC9B,QAAQ,CAAC,EAAE,KAAK,EAAE,GACjB,qBAAqB,CAAC,CAAC,CAAC,CAAC;AAC5B,wBAAgB,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,QAAQ,CAAC,EAAE,KAAK,EAAE,GAAG,WAAW,CAAC;AAgBhG,0DAA0D;AAC1D,wBAAgB,SAAS,CACvB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAC/B,WAAW,CAQb;AAED,4DAA4D;AAC5D,wBAAgB,QAAQ,CACtB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,EAChC,IAAI,SAAI,GACP,WAAW,CAcb;AAED,oDAAoD;AACpD,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,IAAI,UAAO,GAAG,WAAW,CAOlF;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAOzD;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CACxB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,MAAM,EAAE,EACjB,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,GAC/B,WAAW,CA6Cb;AAED,oEAAoE;AACpE,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,WAAW,CAIpE;AAKD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AASvE;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,GAAG,SAAS,GAAG,IAAI,CAOtF;AAED,kGAAkG;AAClG,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,aAAa,GAAG,SAAS,CASpF;AAID,+DAA+D;AAC/D,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,QAAQ,GAAG,IAAI,CAuOxD"}

package/dist/dom.js

@@ -4,6 +4,7 @@
  * Designer chrome classes are prefixed `wgd-` (widget content inside the
  * preview keeps the normal `wg-` classes).
  */
+import { CHROME_DEFAULTS, CHROME_TOKENS, chromeCss } from "./chrome-defaults.js";
 /** The first `<selector>` under `parent`, which the caller's own markup guarantees exists. */
 export function requireChild(parent, selector) {
     const found = parent.querySelector(selector);
@@ -127,6 +128,46 @@ export function diagnosticLine(text) {
         el.setAttribute("hidden", "");
     return el;
 }
+// The token list and the palettes live in chrome-defaults.ts, which the
+// stylesheet below is generated from; re-exported here so the modules that
+// already import chrome types from this one keep working.
+export { CHROME_TOKENS } from "./chrome-defaults.js";
+const CHROME_TOKEN_SET = new Set(CHROME_TOKENS);
+// On a custom property a CSS-wide keyword acts on the property itself (it
+// inherits/resets the TOKEN, not the consumer), so it never expresses what
+// a host means by it; hosts pass `var(--their-token, fallback)` instead.
+const CSS_WIDE_KEYWORD = /^(inherit|initial|unset|revert|revert-layer)$/i;
+/**
+ * Apply a host's chrome on a designer root as inline custom properties —
+ * the style attribute outranks every rule in the injected stylesheet, so
+ * the host's values win over the light/dark defaults. Unknown tokens,
+ * non-string values and CSS-wide keywords are ignored at the door.
+ */
+export function applyChrome(root, chrome) {
+    if (chrome === undefined)
+        return;
+    for (const [token, value] of Object.entries(chrome)) {
+        if (!CHROME_TOKEN_SET.has(token))
+            continue;
+        if (typeof value !== "string" || CSS_WIDE_KEYWORD.test(value.trim()))
+            continue;
+        root.style.setProperty(`--wgd-${token}`, value);
+    }
+}
+/** The element form of the option: a `chrome` attribute holding JSON; anything else → nothing. */
+export function parseChromeAttribute(value) {
+    if (value === null)
+        return undefined;
+    try {
+        const parsed = JSON.parse(value);
+        if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed))
+            return undefined;
+        return parsed;
+    }
+    catch {
+        return undefined;
+    }
+}
 const STYLE_MARKER = "data-widgentic-designer";
 /** Designer chrome stylesheet — injected once per document. */
 export function injectDesignerStyles(doc) {
@@ -135,38 +176,16 @@ export function injectDesignerStyles(doc) {
     const style = doc.createElement("style");
     style.setAttribute(STYLE_MARKER, "chrome");
     style.textContent = `
-/* Chrome palette — light values, overridden for dark below. Widget
+/* Chrome tokens (CHROME_TOKENS), generated from CHROME_DEFAULTS so the
+   exported palette IS the applied one. A host overrides any of them through
+   options.chrome (inline on the root, which outranks these rules). Widget
    content inside the preview keeps its own --wg-* theme tokens. */
-.wgd-root {
-  --wgd-bg: #ffffff; --wgd-panel: #fbfcfe; --wgd-border: #d5dbe3;
-  --wgd-line: #e2e8f0; --wgd-text: #1f2430; --wgd-muted: #5b6472;
-  --wgd-accent: #2563eb; --wgd-accent-bg: #e8eef9; --wgd-accent-line: #b9c9e8;
-  --wgd-danger: #b91c1c; --wgd-danger-bg: #fdf2f2; --wgd-danger-line: #f0b4b4;
-  --wgd-hover: #eef2f7;
-  --wgd-hl-key: #0b5fa5; --wgd-hl-str: #0a7a3d; --wgd-hl-num: #b45309;
-  --wgd-hl-bool: #7c3aed; --wgd-hl-punct: #7a8494;
-}
-@media (prefers-color-scheme: dark) {
-  .wgd-root:not([data-wgd-theme="light"]) {
-    --wgd-bg: #0f131c; --wgd-panel: #161b26; --wgd-border: #2a3140;
-    --wgd-line: #232a37; --wgd-text: #e5e9f0; --wgd-muted: #96a0b5;
-    --wgd-accent: #7aa2f7; --wgd-accent-bg: #1c2740; --wgd-accent-line: #35507f;
-    --wgd-danger: #f0a3a3; --wgd-danger-bg: #2a1a1c; --wgd-danger-line: #5c2b2b;
-    --wgd-hover: #1e2532;
-    --wgd-hl-key: #7aa2f7; --wgd-hl-str: #9ece6a; --wgd-hl-num: #ff9e64;
-    --wgd-hl-bool: #bb9af7; --wgd-hl-punct: #8b94a7;
-  }
-}
-.wgd-root[data-wgd-theme="dark"] {
-  --wgd-bg: #0f131c; --wgd-panel: #161b26; --wgd-border: #2a3140;
-  --wgd-line: #232a37; --wgd-text: #e5e9f0; --wgd-muted: #96a0b5;
-  --wgd-accent: #7aa2f7; --wgd-accent-bg: #1c2740; --wgd-accent-line: #35507f;
-  --wgd-danger: #f0a3a3; --wgd-danger-bg: #2a1a1c; --wgd-danger-line: #5c2b2b;
-  --wgd-hover: #1e2532;
-  --wgd-hl-key: #7aa2f7; --wgd-hl-str: #9ece6a; --wgd-hl-num: #ff9e64;
-  --wgd-hl-bool: #bb9af7; --wgd-hl-punct: #8b94a7;
-}
-.wgd-root { display: flex; gap: 16px; font-family: system-ui, sans-serif; font-size: 13px; align-items: flex-start; color: var(--wgd-text); background: var(--wgd-bg); }
+${chromeCss(CHROME_DEFAULTS, {
+        selector: ".wgd-root",
+        darkMediaSelector: '.wgd-root:not([data-wgd-theme="light"])',
+        darkSelector: '.wgd-root[data-wgd-theme="dark"]'
+    })}
+.wgd-root { display: flex; gap: var(--wgd-gap); font-family: var(--wgd-font); font-size: var(--wgd-font-size); align-items: flex-start; color: var(--wgd-text); background: var(--wgd-bg); }
 /* Any chrome class that sets display would silently defeat the hidden
    attribute (learned live twice: the add menu, then the styles tree as a
    tab pane). hidden always wins — scoped to the designer's own tree. */
@@ -178,7 +197,7 @@ export function injectDesignerStyles(doc) {
 .wgd-readonly .wgd-section-body[inert] { opacity: 0.75; }
 /* Empty preview state — shown only when there has never been a valid
    render to freeze on; a blank pane is the one state the contract bans. */
-.wgd-preview-empty { color: var(--wgd-muted); font-style: italic; font-size: 12px; }
+.wgd-preview-empty { color: var(--wgd-muted); font-style: italic; font-size: var(--wgd-font-size-sm); }
 .wgd-readonly [inert] .wgd-input,
 .wgd-readonly [inert] .wgd-select,
 .wgd-readonly [inert] .wgd-textarea,
@@ -194,62 +213,62 @@ export function injectDesignerStyles(doc) {
 .wgd-panels { flex: 1 1 460px; min-width: 340px; display: flex; flex-direction: column; gap: 8px; }
 .wgd-side { flex: 1 1 420px; min-width: 320px; display: flex; flex-direction: column; gap: 8px; position: sticky; top: 8px; }
 .wgd-preview-pane { display: flex; flex-direction: column; gap: 8px; }
-.wgd-section { border: 1px solid var(--wgd-border); border-radius: 6px; padding: 6px 10px; background: var(--wgd-panel); }
+.wgd-section { border: 1px solid var(--wgd-border); border-radius: var(--wgd-radius-lg); padding: 6px 10px; background: var(--wgd-panel); }
 .wgd-section-title { cursor: pointer; font-weight: 600; }
 .wgd-section-body { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
 .wgd-field { display: flex; flex-direction: column; gap: 2px; }
-.wgd-field-label { color: var(--wgd-muted); font-size: 12px; }
-.wgd-input, .wgd-textarea, .wgd-select { font: inherit; padding: 4px 6px; border: 1px solid var(--wgd-border); border-radius: 4px; background: var(--wgd-bg); color: var(--wgd-text); }
+.wgd-field-label { color: var(--wgd-muted); font-size: var(--wgd-font-size-sm); }
+.wgd-input, .wgd-textarea, .wgd-select { font: inherit; padding: 4px 6px; border: 1px solid var(--wgd-border); border-radius: var(--wgd-radius); background: var(--wgd-bg); color: var(--wgd-text); }
 /* Textareas fill their panel regardless of the intrinsic cols width. */
-.wgd-textarea { font-family: ui-monospace, monospace; white-space: pre; width: 100%; box-sizing: border-box; min-width: 0; resize: vertical; }
-.wgd-preview .wg-designer-action { position: relative; outline: 1px dashed var(--wgd-muted, #6b7280); outline-offset: 2px; }
-.wgd-preview .wg-designer-action::after { content: "⚡ action"; position: absolute; top: -0.9em; right: 0; font: 10px system-ui, sans-serif; color: var(--wgd-muted, #6b7280); background: var(--wgd-panel, #fbfcfe); padding: 0 4px; border-radius: 3px; pointer-events: none; }
-.wgd-binding { display: flex; flex-direction: column; gap: 6px; padding: 6px 8px; border: 1px dashed var(--wgd-border, #d5dbe3); border-radius: 4px; margin: 4px 0; }
-.wgd-binding-field { min-width: 8ch; font-family: ui-monospace, monospace; font-size: 12px; }
+.wgd-textarea { font-family: var(--wgd-font-mono); white-space: pre; width: 100%; box-sizing: border-box; min-width: 0; resize: vertical; }
+.wgd-preview .wg-designer-action { position: relative; outline: 1px dashed var(--wgd-muted); outline-offset: 2px; }
+.wgd-preview .wg-designer-action::after { content: "⚡ action"; position: absolute; top: -0.9em; right: 0; font: calc(var(--wgd-font-size-xs) - 1px) var(--wgd-font); color: var(--wgd-muted); background: var(--wgd-panel); padding: 0 4px; border-radius: var(--wgd-radius-sm); pointer-events: none; }
+.wgd-binding { display: flex; flex-direction: column; gap: 6px; padding: 6px 8px; border: 1px dashed var(--wgd-border); border-radius: var(--wgd-radius); margin: 4px 0; }
+.wgd-binding-field { min-width: 8ch; font-family: var(--wgd-font-mono); font-size: var(--wgd-font-size-sm); }
 .wgd-action-definition { display: flex; flex-direction: column; gap: 6px; }
 .wgd-action-schema { display: flex; flex-direction: column; gap: 4px; padding: 4px 0; }
-.wgd-test-output { font: 12px ui-monospace, monospace; white-space: pre-wrap; word-break: break-all; max-height: 240px; overflow: auto; margin: 6px 0 0; }
-.wgd-diagnostic { color: var(--wgd-danger); font-size: 12px; white-space: pre-wrap; }
-.wgd-banner { border: 1px solid var(--wgd-danger-line); background: var(--wgd-danger-bg); color: var(--wgd-danger); border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; }
+.wgd-test-output { font: var(--wgd-font-size-sm) var(--wgd-font-mono); white-space: pre-wrap; word-break: break-all; max-height: 240px; overflow: auto; margin: 6px 0 0; }
+.wgd-diagnostic { color: var(--wgd-danger); font-size: var(--wgd-font-size-sm); white-space: pre-wrap; }
+.wgd-banner { border: 1px solid var(--wgd-danger-line); background: var(--wgd-danger-bg); color: var(--wgd-danger); border-radius: var(--wgd-radius-lg); padding: 8px 10px; margin-bottom: 8px; }
 /* The preview is the WIDGET's surface, not chrome: it establishes the
    --wg-* context (like composePage does for page output) so widget content
    — including custom kinds the base stylesheet doesn't color — never
    inherits the designer's own text/background. */
-.wgd-preview { border: 1px dashed var(--wgd-border); border-radius: 6px; padding: 16px; background: var(--wg-bg, #ffffff); color: var(--wg-fg, #1f2430); }
+.wgd-preview { border: 1px dashed var(--wgd-border); border-radius: var(--wgd-radius-lg); padding: 16px; background: var(--wg-bg); color: var(--wg-fg); }
 .wgd-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
-.wgd-button { font: inherit; padding: 4px 10px; border: 1px solid var(--wgd-border); border-radius: 4px; background: var(--wgd-bg); color: var(--wgd-text); cursor: pointer; }
+.wgd-button { font: inherit; padding: 4px 10px; border: 1px solid var(--wgd-border); border-radius: var(--wgd-radius); background: var(--wgd-bg); color: var(--wgd-text); cursor: pointer; }
 .wgd-button:hover { background: var(--wgd-hover); }
 .wgd-tab-active { background: var(--wgd-accent-bg); border-color: var(--wgd-accent); }
 /* Shared tree/editor chrome (JSON tree, schema builder/form, template tree) */
 .wgd-jt-children, .wgd-children { margin-left: 10px; padding-left: 10px; border-left: 2px solid var(--wgd-line); display: flex; flex-direction: column; gap: 4px; }
 .wgd-jt-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
 .wgd-jt-entry { padding: 2px 0; }
-.wgd-jt-key { font-family: ui-monospace, monospace; color: var(--wgd-muted); min-width: 2ch; }
+.wgd-jt-key { font-family: var(--wgd-font-mono); color: var(--wgd-muted); min-width: 2ch; }
 .wgd-jt-keyinput, .wgd-jt-type { max-width: 12ch; }
-.wgd-jt-summary { cursor: pointer; color: var(--wgd-muted); font-size: 12px; }
-.wgd-sf-object { border: 1px solid var(--wgd-line); border-radius: 6px; padding: 6px 10px; margin: 4px 0; }
+.wgd-jt-summary { cursor: pointer; color: var(--wgd-muted); font-size: var(--wgd-font-size-sm); }
+.wgd-sf-object { border: 1px solid var(--wgd-line); border-radius: var(--wgd-radius-lg); padding: 6px 10px; margin: 4px 0; }
 /* Schema builder: property name + type + required on one row. */
 .wgd-sb-node { margin-left: 8px; padding: 1px 0 1px 8px; border-left: 2px solid var(--wgd-line); }
 .wgd-sb-row { display: flex; gap: 4px; align-items: center; flex-wrap: nowrap; padding: 1px 0; }
 .wgd-sb-constraints { padding-left: 12px; }
-.wgd-sb-label { color: var(--wgd-muted); font-size: 11px; flex: 0 0 auto; }
-.wgd-sb-prop { flex: 1 1 auto; min-width: 6ch; font-family: ui-monospace, monospace; }
-.wgd-sb-type { flex: 0 0 auto; max-width: 11ch; font-size: 12px; }
-.wgd-sb-req { display: flex; gap: 2px; align-items: center; color: var(--wgd-muted); font-size: 11px; flex: 0 0 auto; }
-.wgd-sb-constraint { flex: 1 1 auto; min-width: 6ch; font-size: 12px; }
+.wgd-sb-label { color: var(--wgd-muted); font-size: var(--wgd-font-size-xs); flex: 0 0 auto; }
+.wgd-sb-prop { flex: 1 1 auto; min-width: 6ch; font-family: var(--wgd-font-mono); }
+.wgd-sb-type { flex: 0 0 auto; max-width: 11ch; font-size: var(--wgd-font-size-sm); }
+.wgd-sb-req { display: flex; gap: 2px; align-items: center; color: var(--wgd-muted); font-size: var(--wgd-font-size-xs); flex: 0 0 auto; }
+.wgd-sb-constraint { flex: 1 1 auto; min-width: 6ch; font-size: var(--wgd-font-size-sm); }
 .wgd-sb-root { padding: 2px 0 2px 8px; border-left: 2px solid transparent; }
 /* Schema builder: the template tree's flat discipline — chrome on
    hover/focus only, removal revealed by the row, fitted type selects. */
-.wgd-schemabuilder .wgd-input, .wgd-schemabuilder .wgd-select { padding: 1px 4px; font-size: 12px; border-color: transparent; background: transparent; }
+.wgd-schemabuilder .wgd-input, .wgd-schemabuilder .wgd-select { padding: 1px 4px; font-size: var(--wgd-font-size-sm); border-color: transparent; background: transparent; }
 .wgd-schemabuilder .wgd-input:hover, .wgd-schemabuilder .wgd-select:hover,
 .wgd-schemabuilder .wgd-input:focus, .wgd-schemabuilder .wgd-select:focus { border-color: var(--wgd-border); background: var(--wgd-bg); }
 .wgd-schemabuilder .wgd-sb-type { flex: 0 0 auto; box-sizing: border-box; max-width: none; color: var(--wgd-accent); }
-.wgd-schemabuilder .wgd-sb-prop { font-size: 12px; color: var(--wgd-hl-key); }
-.wgd-sb-row { border-radius: 3px; }
+.wgd-schemabuilder .wgd-sb-prop { font-size: var(--wgd-font-size-sm); color: var(--wgd-hl-key); }
+.wgd-sb-row { border-radius: var(--wgd-radius-sm); }
 .wgd-sb-row:hover { background: var(--wgd-hover); }
 .wgd-sb-row > .wgd-icon { visibility: hidden; }
 .wgd-sb-row:hover > .wgd-icon, .wgd-sb-row:focus-within > .wgd-icon { visibility: visible; }
-.wgd-schemabuilder .wgd-button { font-size: 11px; padding: 0 6px; border-color: transparent; color: var(--wgd-accent); background: none; }
+.wgd-schemabuilder .wgd-button { font-size: var(--wgd-font-size-xs); padding: 0 6px; border-color: transparent; color: var(--wgd-accent); background: none; }
 .wgd-schemabuilder .wgd-button:hover { border-color: var(--wgd-border); background: var(--wgd-hover); }
 .wgd-remove { color: var(--wgd-danger); }
 /* Breathing room between a tab strip and its active pane. */
@@ -258,18 +277,18 @@ export function injectDesignerStyles(doc) {
    Controls stay flat (chrome appears on hover/focus) so a deep template
    reads like the JSON it projects, not like a form. */
 .wgd-node { padding: 0 0 0 4px; }
-.wgd-node-row { display: flex; gap: 4px; align-items: center; flex-wrap: nowrap; padding: 1px 0; border-radius: 3px; }
+.wgd-node-row { display: flex; gap: 4px; align-items: center; flex-wrap: nowrap; padding: 1px 0; border-radius: var(--wgd-radius-sm); }
 .wgd-node-row:hover { background: var(--wgd-hover); }
-.wgd-node-badge { font-family: ui-monospace, monospace; font-size: 11px; color: var(--wgd-accent); background: var(--wgd-accent-bg); border-radius: 3px; padding: 0 5px; flex: 0 0 auto; }
+.wgd-node-badge { font-family: var(--wgd-font-mono); font-size: var(--wgd-font-size-xs); color: var(--wgd-accent); background: var(--wgd-accent-bg); border-radius: var(--wgd-radius-sm); padding: 0 5px; flex: 0 0 auto; }
 .wgd-node-icons { display: flex; gap: 2px; margin-left: auto; flex: 0 0 auto; visibility: hidden; }
 .wgd-node-row:hover > .wgd-node-icons, .wgd-node-row:focus-within > .wgd-node-icons { visibility: visible; }
 .wgd-node-value { flex: 1 1 auto; min-width: 4ch; }
-.wgd-icon { font: inherit; font-size: 11px; line-height: 1.4; padding: 0 5px; border: 1px solid var(--wgd-border); border-radius: 3px; background: var(--wgd-bg); cursor: pointer; color: var(--wgd-muted); }
+.wgd-icon { font: inherit; font-size: var(--wgd-font-size-xs); line-height: 1.4; padding: 0 5px; border: 1px solid var(--wgd-border); border-radius: var(--wgd-radius-sm); background: var(--wgd-bg); cursor: pointer; color: var(--wgd-muted); }
 .wgd-icon:hover { background: var(--wgd-hover); }
 /* Compact controls: inside tree nodes, and wherever a section opts in with
    .wgd-compact (the Load action editor mirrors an element's binding editor). */
 .wgd-node .wgd-input, .wgd-node .wgd-select,
-.wgd-compact .wgd-input, .wgd-compact .wgd-select { padding: 1px 4px; font-size: 12px; border-color: transparent; background: transparent; }
+.wgd-compact .wgd-input, .wgd-compact .wgd-select { padding: 1px 4px; font-size: var(--wgd-font-size-sm); border-color: transparent; background: transparent; }
 .wgd-node .wgd-input:hover, .wgd-node .wgd-select:hover, .wgd-compact .wgd-input:hover, .wgd-compact .wgd-select:hover,
 .wgd-node .wgd-input:focus, .wgd-node .wgd-select:focus, .wgd-compact .wgd-input:focus, .wgd-compact .wgd-select:focus { border-color: var(--wgd-border); background: var(--wgd-bg); }
 .wgd-compact .wgd-binding { border: none; padding: 0; }
@@ -279,82 +298,82 @@ export function injectDesignerStyles(doc) {
 @keyframes wgd-spin { to { transform: rotate(360deg); } }
 .wgd-tagwrap, .wgd-pathwrap { display: contents; }
 /* Collapse chevron: every tree row reserves the column so values align. */
-.wgd-chevron { flex: 0 0 auto; width: 16px; padding: 0; border: none; background: none; color: var(--wgd-muted); font-size: 10px; cursor: pointer; }
+.wgd-chevron { flex: 0 0 auto; width: 16px; padding: 0; border: none; background: none; color: var(--wgd-muted); font-size: calc(var(--wgd-font-size-xs) - 1px); cursor: pointer; }
 .wgd-chevron-none { visibility: hidden; }
-.wgd-node-summary { color: var(--wgd-muted); font-size: 11px; flex: 0 0 auto; }
+.wgd-node-summary { color: var(--wgd-muted); font-size: var(--wgd-font-size-xs); flex: 0 0 auto; }
 /* Attrs vs children: attributes group under a dotted muted rail with
    key-colored names; children keep the solid accent rail. */
 .wgd-attrs { margin-left: 14px; padding-left: 8px; border-left: 2px dotted var(--wgd-border); display: flex; flex-direction: column; gap: 1px; }
 .wgd-attr-row { display: flex; gap: 4px; align-items: center; flex-wrap: nowrap; padding: 0; }
 .wgd-attr-row > .wgd-icon { visibility: hidden; }
 .wgd-attr-row:hover > .wgd-icon, .wgd-attr-row:focus-within > .wgd-icon { visibility: visible; }
-.wgd-attr-name { font-family: ui-monospace, monospace; color: var(--wgd-hl-key); flex: 0 1 auto; min-width: 5ch; }
-.wgd-attr-prefix { flex: 0 1 auto; min-width: 6ch; max-width: 10ch; font-family: ui-monospace, monospace; color: var(--wgd-hl-str); }
+.wgd-attr-name { font-family: var(--wgd-font-mono); color: var(--wgd-hl-key); flex: 0 1 auto; min-width: 5ch; }
+.wgd-attr-prefix { flex: 0 1 auto; min-width: 6ch; max-width: 10ch; font-family: var(--wgd-font-mono); color: var(--wgd-hl-str); }
 .wgd-attr { display: flex; flex-direction: column; gap: 1px; }
 /* Transform block under a bind attr: one more dotted level in. */
 .wgd-attr-map { margin-left: 24px; padding-left: 8px; border-left: 2px dotted var(--wgd-border); display: flex; flex-direction: column; gap: 1px; }
 .wgd-attr-map-default { flex: 1 1 auto; min-width: 8ch; }
-.wgd-attr-mode { flex: 0 0 auto; color: var(--wgd-muted); font-size: 11px; }
+.wgd-attr-mode { flex: 0 0 auto; color: var(--wgd-muted); font-size: var(--wgd-font-size-xs); }
 .wgd-children { margin-left: 14px; padding-left: 8px; border-left: 2px solid var(--wgd-accent-line); gap: 1px; }
 .wgd-slot { display: flex; flex-direction: column; gap: 1px; }
-.wgd-slot-label { color: var(--wgd-muted); font-size: 11px; font-style: italic; padding-left: 4px; }
+.wgd-slot-label { color: var(--wgd-muted); font-size: var(--wgd-font-size-xs); font-style: italic; padding-left: 4px; }
 /* Add menu: one toggle, options in a popover. */
 .wgd-menuwrap { position: relative; display: inline-flex; }
 .wgd-menu-toggle { color: var(--wgd-accent); }
-.wgd-menu { position: absolute; top: 100%; left: 0; z-index: 10; min-width: 9ch; display: flex; flex-direction: column; background: var(--wgd-panel); border: 1px solid var(--wgd-border); border-radius: 4px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); padding: 2px; }
+.wgd-menu { position: absolute; top: 100%; left: 0; z-index: 10; min-width: 9ch; display: flex; flex-direction: column; background: var(--wgd-panel); border: 1px solid var(--wgd-border); border-radius: var(--wgd-radius); box-shadow: var(--wgd-shadow); padding: 2px; }
 /* An OPEN menu must not inherit the icons' hover-gated visibility:
    visibility (unlike display) lets a child re-assert visible. */
 .wgd-menu:not([hidden]) { visibility: visible; }
 .wgd-menuwrap:has(> .wgd-menu:not([hidden])) { visibility: visible; }
 /* Menus in the right-aligned icons area hang leftward, not off-panel. */
 .wgd-node-icons .wgd-menu { left: auto; right: 0; }
-.wgd-menu-item { font: inherit; font-size: 12px; text-align: left; padding: 3px 8px; border: none; border-radius: 3px; background: none; color: var(--wgd-text); cursor: pointer; white-space: nowrap; }
+.wgd-menu-item { font: inherit; font-size: var(--wgd-font-size-sm); text-align: left; padding: 3px 8px; border: none; border-radius: var(--wgd-radius-sm); background: none; color: var(--wgd-text); cursor: pointer; white-space: nowrap; }
 .wgd-menu-item:hover { background: var(--wgd-accent-bg); color: var(--wgd-accent); }
 /* Styles tree: selector rows with declaration rows — the same flat
    template-tree discipline (flat inputs, hover-revealed icons). */
 .wgd-styles { display: flex; flex-direction: column; gap: 2px; }
-.wgd-st-row { display: flex; gap: 4px; align-items: center; border-radius: 3px; }
+.wgd-st-row { display: flex; gap: 4px; align-items: center; border-radius: var(--wgd-radius-sm); }
 .wgd-st-row:hover { background: var(--wgd-hover); }
 .wgd-st-row:hover > .wgd-node-icons, .wgd-st-row:focus-within > .wgd-node-icons { visibility: visible; }
-.wgd-styles .wgd-input { padding: 1px 4px; font-size: 12px; font-family: ui-monospace, monospace; border-color: transparent; background: transparent; }
+.wgd-styles .wgd-input { padding: 1px 4px; font-size: var(--wgd-font-size-sm); font-family: var(--wgd-font-mono); border-color: transparent; background: transparent; }
 .wgd-styles .wgd-input:hover, .wgd-styles .wgd-input:focus { border-color: var(--wgd-border); background: var(--wgd-bg); }
 .wgd-st-selector { flex: 1 1 auto; min-width: 8ch; color: var(--wgd-accent); }
 .wgd-st-decls { margin-left: 14px; padding-left: 8px; border-left: 2px dotted var(--wgd-border); display: flex; flex-direction: column; gap: 1px; }
-.wgd-st-decl { display: flex; gap: 2px; align-items: center; border-radius: 3px; }
+.wgd-st-decl { display: flex; gap: 2px; align-items: center; border-radius: var(--wgd-radius-sm); }
 .wgd-st-decl:hover { background: var(--wgd-hover); }
 .wgd-st-decl > .wgd-icon { visibility: hidden; }
 .wgd-st-decl:hover > .wgd-icon, .wgd-st-decl:focus-within > .wgd-icon { visibility: visible; }
 .wgd-st-prop { flex: 0 1 auto; min-width: 8ch; color: var(--wgd-hl-key); }
 .wgd-st-value { flex: 1 1 auto; min-width: 8ch; }
 .wgd-st-colon { color: var(--wgd-muted); flex: 0 0 auto; }
-.wgd-st-add { font-size: 11px; padding: 0 6px; border-color: transparent; color: var(--wgd-accent); background: none; }
+.wgd-st-add { font-size: var(--wgd-font-size-xs); padding: 0 6px; border-color: transparent; color: var(--wgd-accent); background: none; }
 .wgd-st-add:hover { border-color: var(--wgd-border); background: var(--wgd-hover); }
 /* Import and export stack as sibling sections with the column's rhythm. */
 .wgd-io { display: flex; flex-direction: column; gap: 8px; }
 /* Flat string→string record rows (hints): mono keys, prose values. */
 .wgd-record { display: flex; flex-direction: column; gap: 1px; }
-.wgd-rec-row { display: flex; gap: 2px; align-items: center; border-radius: 3px; }
+.wgd-rec-row { display: flex; gap: 2px; align-items: center; border-radius: var(--wgd-radius-sm); }
 .wgd-rec-row:hover { background: var(--wgd-hover); }
 .wgd-rec-row > .wgd-icon { visibility: hidden; }
 .wgd-rec-row:hover > .wgd-icon, .wgd-rec-row:focus-within > .wgd-icon { visibility: visible; }
-.wgd-record .wgd-input { padding: 1px 4px; font-size: 12px; border-color: transparent; background: transparent; }
+.wgd-record .wgd-input { padding: 1px 4px; font-size: var(--wgd-font-size-sm); border-color: transparent; background: transparent; }
 .wgd-record .wgd-input:hover, .wgd-record .wgd-input:focus { border-color: var(--wgd-border); background: var(--wgd-bg); }
-.wgd-rec-key { flex: 0 1 auto; min-width: 8ch; font-family: ui-monospace, monospace; color: var(--wgd-hl-key); }
+.wgd-rec-key { flex: 0 1 auto; min-width: 8ch; font-family: var(--wgd-font-mono); color: var(--wgd-hl-key); }
 .wgd-rec-value { flex: 1 1 auto; min-width: 8ch; }
 /* The tag select IS the element node's label: flat, accent, monospace.
    Tag and path selects are width-fitted to their SELECTED value by the
    panel (fitSelect), so carets hug the text — no flex stretching here. */
-.wgd-node .wgd-tag { flex: 0 0 auto; font-family: ui-monospace, monospace; font-size: 11px; color: var(--wgd-accent); background: var(--wgd-accent-bg); border: 1px solid transparent; border-radius: 3px; padding: 0 4px; }
+.wgd-node .wgd-tag { flex: 0 0 auto; font-family: var(--wgd-font-mono); font-size: var(--wgd-font-size-xs); color: var(--wgd-accent); background: var(--wgd-accent-bg); border: 1px solid transparent; border-radius: var(--wgd-radius-sm); padding: 0 4px; }
 .wgd-node .wgd-tag:hover, .wgd-node .wgd-tag:focus { border-color: var(--wgd-accent-line); }
-.wgd-node .wgd-path { flex: 0 1 auto; min-width: 6ch; max-width: 100%; font-family: ui-monospace, monospace; }
+.wgd-node .wgd-path { flex: 0 1 auto; min-width: 6ch; max-width: 100%; font-family: var(--wgd-font-mono); }
 .wgd-node .wgd-select { box-sizing: border-box; }
 /* Theme panel: swatch beside each color token. */
 /* Syntax coloring: <pre> layer behind a transparent-text textarea. Every
    metric here must mirror .wgd-textarea or the glyphs drift apart. */
 .wgd-hlwrap { position: relative; }
 .wgd-hl, .wgd-hl-input {
-  font-family: ui-monospace, monospace; font-size: 13px; line-height: 1.45;
-  padding: 4px 6px; border: 1px solid transparent; border-radius: 4px;
+  font-family: var(--wgd-font-mono); font-size: var(--wgd-font-size); line-height: 1.45;
+  padding: 4px 6px; border: 1px solid transparent; border-radius: var(--wgd-radius);
   box-sizing: border-box; white-space: pre; tab-size: 2; letter-spacing: normal;
 }
 .wgd-hl {
@@ -371,14 +390,14 @@ textarea.wgd-hl-input {
 .wgd-hl-n { color: var(--wgd-hl-num); }
 .wgd-hl-b { color: var(--wgd-hl-bool); }
 .wgd-hl-p { color: var(--wgd-hl-punct); }
-.wgd-swatch { flex: 0 0 auto; width: 26px; height: 22px; padding: 0; border: 1px solid var(--wgd-border); border-radius: 4px; background: none; cursor: pointer; }
+.wgd-swatch { flex: 0 0 auto; width: 26px; height: 22px; padding: 0; border: 1px solid var(--wgd-border); border-radius: var(--wgd-radius); background: none; cursor: pointer; }
 .wgd-token-row { display: flex; gap: 6px; align-items: center; }
-.wgd-token-row .wgd-input { flex: 1 1 auto; min-width: 6ch; font-family: ui-monospace, monospace; font-size: 12px; }
+.wgd-token-row .wgd-input { flex: 1 1 auto; min-width: 6ch; font-family: var(--wgd-font-mono); font-size: var(--wgd-font-size-sm); }
 .wgd-token-ref { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; margin-top: 4px; }
-.wgd-token-ref-row { display: flex; gap: 6px; align-items: center; font-size: 11px; }
-.wgd-token-ref-swatch { flex: 0 0 auto; width: 14px; height: 14px; border: 1px solid var(--wgd-border); border-radius: 3px; }
+.wgd-token-ref-row { display: flex; gap: 6px; align-items: center; font-size: var(--wgd-font-size-xs); }
+.wgd-token-ref-swatch { flex: 0 0 auto; width: 14px; height: 14px; border: 1px solid var(--wgd-border); border-radius: var(--wgd-radius-sm); }
 .wgd-token-ref-noswatch { border-style: dashed; opacity: 0.35; }
-.wgd-token-ref-name { font-family: ui-monospace, monospace; color: var(--wgd-accent, #2563eb); }
+.wgd-token-ref-name { font-family: var(--wgd-font-mono); color: var(--wgd-accent); }
 .wgd-token-ref-value { color: var(--wgd-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .wgd-token-ref-details summary { cursor: pointer; }
 `;

package/dist/dom.js.map

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

package/dist/element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"element.d.ts","sourceRoot":"","sources":["../src/element.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,WAAW,uBAAuB,CAAC;AAChD,eAAO,MAAM,iBAAiB,6BAA6B,CAAC;AAC5D,eAAO,MAAM,kBAAkB,8BAA8B,CAAC;AAC9D,eAAO,MAAM,kBAAkB,8BAA8B,CAAC;AAE9D,wBAAgB,qBAAqB,CAAC,OAAO,GAAE,MAAoB,GAAG,IAAI,CAwCzE;AAED,2DAA2D;AAC3D,wBAAgB,0BAA0B,CAAC,OAAO,GAAE,MAA0B,GAAG,IAAI,CAkCpF;AAED,4DAA4D;AAC5D,wBAAgB,2BAA2B,CAAC,OAAO,GAAE,MAA2B,GAAG,IAAI,CAkCtF;AAED,4DAA4D;AAC5D,wBAAgB,2BAA2B,CAAC,OAAO,GAAE,MAA2B,GAAG,IAAI,CAkCtF"}
+{"version":3,"file":"element.d.ts","sourceRoot":"","sources":["../src/element.ts"],"names":[],"mappings":"AAgCA,eAAO,MAAM,WAAW,uBAAuB,CAAC;AAChD,eAAO,MAAM,iBAAiB,6BAA6B,CAAC;AAC5D,eAAO,MAAM,kBAAkB,8BAA8B,CAAC;AAC9D,eAAO,MAAM,kBAAkB,8BAA8B,CAAC;AAE9D,wBAAgB,qBAAqB,CAAC,OAAO,GAAE,MAAoB,GAAG,IAAI,CAkCzE;AAED,2DAA2D;AAC3D,wBAAgB,0BAA0B,CAAC,OAAO,GAAE,MAA0B,GAAG,IAAI,CA8BpF;AAED,4DAA4D;AAC5D,wBAAgB,2BAA2B,CAAC,OAAO,GAAE,MAA2B,GAAG,IAAI,CA8BtF;AAED,4DAA4D;AAC5D,wBAAgB,2BAA2B,CAAC,OAAO,GAAE,MAA2B,GAAG,IAAI,CA8BtF"}