@weasel-js/theme 1.5.0 → 1.5.2

package/README.md

@@ -1,7 +1,7 @@
 # @weasel-js/theme
 
-Design tokens shared by weasel-ui and weasel-hud — generated from a DTCG
-source into CSS custom properties plus a parallel TS export.
+Design tokens shared by weasel-ui and weasel-hud — generated from a theme
+definition into CSS custom properties plus a parallel TS export.
 
 Part of [weasel](https://github.com/orochi235/weasel), a domain-agnostic 2D
 scene-graph canvas kit for React. See the
@@ -38,11 +38,13 @@ import { defineTheme, applyTheme } from '@weasel-js/theme';
 
 const acme = defineTheme({
   name: 'acme',
-  tokens: { 'accent-base': '#ff3366' },   // aliases rebase onto it
-  modes: { light: { surface: '#fffdf8' } },
+  pins: {
+    'accent-base': '#ff3366',                    // aliases rebase onto it
+    surface: { by: 'mode', light: '#fffdf8' },   // dark keeps the base's
+  },
 });
 
-applyTheme(document.documentElement, acme, 'light');
+applyTheme(document.documentElement, acme, { mode: 'light' });
 ```
 
 `extends` defaults to the built-in theme, so a partial theme can never be
@@ -50,18 +52,45 @@ accidentally incomplete. Overriding a primitive rebases every alias that
 references it — set `accent-base` and `--wzl-accent`, `--wzl-accent-hover`,
 `--wzl-focus-ring` and `--wzl-glass-tint` all follow.
 
-Themes exported from a design tool load through `loadDTCG(json)` —
-`interstellarTheme` in `@weasel-js/labkit` is a worked example, authored as a
-DTCG document and loaded at import time.
+Themes exported from a design tool load through `loadDTCG(json)`.
+`interstellarTheme` in `@weasel-js/labkit` is a worked example of the other
+path: a pins-only definition in JSON, passed to `defineTheme`.
 
-In React, `<ThemeProvider theme={acme} mode="light">` from
+In React, `<ThemeProvider theme={acme} selection={{ mode: 'light' }}>` from
 `@weasel-js/theme/react` does the same and publishes the resolved record via
 `useTheme()` — which is how canvas and WebGL surfaces stay in sync without
 reading the DOM.
 
+## The engine
+
+`@weasel-js/theme/engine` is for authoring layered theme definitions: seeds,
+generated ramps and scales, semantic rules, components and pins. `derive`
+produces a definition's tokens for one selection, with where each came from and
+any issues; `bake` folds every selection into the tokens a runtime `Theme`
+holds; `toDTCG` writes a theme out as a DTCG document. The runtime entry never
+loads it.
+
+```ts
+import { bake, derive } from '@weasel-js/theme/engine';
+import { weaselTheme, type Theme, type ThemeDefinition } from '@weasel-js/theme';
+
+const slate: ThemeDefinition = {
+  name: 'slate',
+  axes: { mode: { default: 'dark', values: { dark: { scheme: 'dark' }, light: { scheme: 'light' } } } },
+  ramps: { slate: { kind: 'lightness', steps: ['100', '500', '900'], lightness: [0.96, 0.22] } },
+  semantics: {
+    surface: { by: 'mode', dark: { ramp: 'slate', step: '900' }, light: { ramp: 'slate', step: '100' } },
+    fg: { by: 'mode', dark: { ref: 'slate-100' }, light: { ref: 'slate-900' } },
+  },
+};
+
+const { tokens, provenance, issues } = derive(slate, { mode: 'light' });
+const theme: Theme = { ...bake(slate), extends: weaselTheme };
+```
+
 ## Editing tokens
 
-`src/generated/` is generated — never edit it. Change `tokens/weasel/*.json`,
+`src/generated/` is generated — never edit it. Change `themes/weasel.json`,
 then:
 
 ```sh
@@ -70,10 +99,34 @@ npm run gen:tokens -w @weasel-js/theme
 
 CI re-runs the generator and fails if the committed output differs.
 
-Token names are flat leaf keys inside `$type` groups: `color.fg-muted` becomes
-`--wzl-fg-muted`. The group carries `$type` and contributes nothing to the name,
-because `--wzl-accent` and `--wzl-accent-base` are both real tokens and DTCG
-forbids a token that is also a group.
+Token names are the definition's keys: `fg-muted` becomes `--wzl-fg-muted`, and
+a reference in a pin's value is written `{fg-muted}`, while a semantic's `ref`
+names the token bare (`"ref": "gray-800"`).
+
+## Override hooks
+
+Ten custom properties resize kit components and **no theme declares them**:
+`--wzl-swatch-size`, `--wzl-timeline-label-w`, `--wzl-number-field-width` and
+the rest. Kit CSS reads each one with a fallback, so setting it on any
+container is what changes it, and leaving it alone takes the fallback:
+
+```css
+.dense-panel { --wzl-swatch-size: 20px; --wzl-number-field-width: 6ch; }
+```
+
+They are declared in `src/hooks.ts` and land in `TOKEN_MANIFEST` with
+`hook: true`, which is where to find the current list, each one's fallback and
+what it sizes:
+
+```ts
+import { TOKEN_MANIFEST } from '@weasel-js/theme';
+const hooks = TOKEN_MANIFEST.filter((t) => t.hook);
+```
+
+They stay out of `tokens.css` on purpose. A `:root` value would outrank the
+fallback written beside every read, so the two would have to agree forever, and
+`npm run check:token-reads` would stop requiring that the fallback be there at
+all. Adding a hook means adding it to `src/hooks.ts` and regenerating.
 
 ## Licenses
 

package/dist/chunk-LL2ERJPZ.js

@@ -0,0 +1,175 @@
+// src/axes.ts
+function isByAxis(v) {
+  return typeof v === "object" && v !== null && !Array.isArray(v) && typeof v.by === "string";
+}
+function fullSelection(axes, selection = {}) {
+  const out = {};
+  for (const [name, def] of Object.entries(axes)) {
+    const v = selection[name];
+    out[name] = v !== void 0 && v in def.values ? v : def.default;
+  }
+  return out;
+}
+function mergeAxes(parent, child) {
+  const out = { ...parent };
+  for (const [name, def] of Object.entries(child)) {
+    out[name] = { ...def, values: { ...parent[name]?.values, ...def.values } };
+  }
+  return out;
+}
+function enumerateSelections(axes) {
+  let out = [{}];
+  for (const [name, def] of Object.entries(axes)) {
+    out = out.flatMap((s) => Object.keys(def.values).map((v) => ({ ...s, [name]: v })));
+  }
+  return out;
+}
+function selectionKey(axes, selection) {
+  const full = fullSelection(axes, selection);
+  return Object.keys(axes).map((a) => `${a}=${full[a]}`).join(",");
+}
+function pick(v, selection) {
+  let cur = v;
+  while (isByAxis(cur)) {
+    const axis = cur.by;
+    const value = selection[axis];
+    if (value === void 0 || value === "by" || !(value in cur)) return { ok: false, axis, value: value ?? "" };
+    cur = cur[value];
+  }
+  return { ok: true, value: cur };
+}
+function pickAll(record, selection) {
+  const out = {};
+  for (const [name, v] of Object.entries(record)) {
+    const picked = pick(v, selection);
+    if (picked.ok) out[name] = picked.value;
+  }
+  return out;
+}
+
+// src/dtcg/value.ts
+function fontStack(value) {
+  return value.map((f) => typeof f === "string" && /\s/.test(f) ? `'${f}'` : String(f)).join(", ");
+}
+function serializeTokenValue(type, value) {
+  if (Array.isArray(value)) {
+    if (type === "cubicBezier") return `cubic-bezier(${value.join(", ")})`;
+    if (type === "fontFamily") return fontStack(value);
+    return value.join(", ");
+  }
+  return String(value);
+}
+var BEZIER = /^cubic-bezier\(\s*([^)]*)\)$/i;
+function parseTokenValue(type, text) {
+  const raw = text.trim();
+  if (type === "cubicBezier") {
+    const inner = BEZIER.exec(raw)?.[1] ?? raw;
+    const parts = inner.split(",").map((p) => Number(p.trim()));
+    return parts.length === 4 && parts.every((n) => Number.isFinite(n)) ? parts : raw;
+  }
+  if (type === "fontFamily") {
+    const families = raw.split(",").map((f) => f.trim().replace(/^['"]|['"]$/g, "").trim()).filter((f) => f !== "");
+    return families.length > 0 ? families : raw;
+  }
+  return raw;
+}
+
+// src/dtcg/color.ts
+function withAlpha(color, alpha) {
+  const rgba = parseRgba(color.trim());
+  if (!rgba) return `color-mix(in srgb, ${color.trim()} ${round(alpha * 100, 4)}%, transparent)`;
+  const [r, g, b, a] = rgba;
+  return `rgba(${r}, ${g}, ${b}, ${round(a * alpha, 3)})`;
+}
+function round(n, places) {
+  return Number(n.toFixed(places));
+}
+function parseRgba(s) {
+  if (s.toLowerCase() === "transparent") return [0, 0, 0, 0];
+  return parseHex(s) ?? parseRgbFn(s);
+}
+function parseHex(s) {
+  const m = /^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.exec(s);
+  if (!m) return null;
+  const body = m[1];
+  const full = body.length <= 4 ? body.replace(/./g, (c) => c + c) : body;
+  const byte = (i) => Number.parseInt(full.slice(i, i + 2), 16);
+  return [byte(0), byte(2), byte(4), full.length === 8 ? byte(6) / 255 : 1];
+}
+function parseRgbFn(s) {
+  const m = /^rgba?\(([^()]*)\)$/i.exec(s);
+  if (!m) return null;
+  const [channels, alphaPart, extra] = m[1].split("/");
+  if (extra !== void 0) return null;
+  const parts = channels.trim().split(/\s*,\s*|\s+/);
+  if (alphaPart !== void 0) parts.push(alphaPart.trim());
+  if (parts.length !== 3 && parts.length !== 4) return null;
+  const channel = (p) => p.endsWith("%") ? Number.parseFloat(p) / 100 * 255 : Number(p);
+  const alpha = (p) => p.endsWith("%") ? Number.parseFloat(p) / 100 : Number(p);
+  const [r, g, b] = parts.slice(0, 3).map(channel);
+  const a = parts[3] === void 0 ? 1 : alpha(parts[3]);
+  if (![r, g, b, a].every(Number.isFinite)) return null;
+  return [Math.round(r), Math.round(g), Math.round(b), a];
+}
+
+// src/dtcg/resolve.ts
+var REF = /^\{([^}]+)\}$/;
+function refTarget(value) {
+  if (typeof value !== "string") return null;
+  const m = REF.exec(value.trim());
+  if (!m) return null;
+  const path = m[1];
+  const dot = path.indexOf(".");
+  return dot === -1 ? path : path.slice(dot + 1);
+}
+function resolveTokens(tokens) {
+  const out = {};
+  const inProgress = /* @__PURE__ */ new Set();
+  const resolveOne = (name) => {
+    const cached = out[name];
+    if (cached !== void 0) return cached;
+    const token = tokens[name];
+    if (!token) throw new Error(`Unknown token "${name}"`);
+    if (inProgress.has(name)) {
+      throw new Error(`Reference cycle at token "${name}" (${[...inProgress].join(" \u2192 ")})`);
+    }
+    inProgress.add(name);
+    const target = refTarget(token.value);
+    let value;
+    if (target === null) {
+      value = serializeTokenValue(token.type, token.value);
+    } else if (!tokens[target]) {
+      throw new Error(`Token "${name}" references "${target}", which is not defined`);
+    } else {
+      value = resolveOne(target);
+    }
+    if (token.alpha !== void 0) value = withAlpha(value, token.alpha);
+    inProgress.delete(name);
+    out[name] = value;
+    return value;
+  };
+  for (const name of Object.keys(tokens)) resolveOne(name);
+  return out;
+}
+
+// src/resolveTheme.ts
+function themeChain(theme) {
+  const out = [];
+  for (let t = theme; t; t = t.extends) out.unshift(t);
+  return out;
+}
+function themeAxes(theme) {
+  return themeChain(theme).reduce((axes, t) => mergeAxes(axes, t.axes), {});
+}
+function resolveTheme(theme, selection = {}) {
+  const sel = fullSelection(themeAxes(theme), selection);
+  let merged = {};
+  for (const t of themeChain(theme)) merged = { ...merged, ...pickAll(t.tokens, sel) };
+  const out = {};
+  for (const [name, value] of Object.entries(resolveTokens(merged))) out[`--wzl-${name}`] = value;
+  return out;
+}
+
+export { enumerateSelections, fullSelection, isByAxis, mergeAxes, parseTokenValue, pick, pickAll, resolveTheme, resolveTokens, selectionKey, serializeTokenValue, themeAxes };
+//# sourceMappingURL=chunk-LL2ERJPZ.js.map
+//# sourceMappingURL=chunk-LL2ERJPZ.js.map

package/dist/chunk-LL2ERJPZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/axes.ts","../src/dtcg/value.ts","../src/dtcg/color.ts","../src/dtcg/resolve.ts","../src/resolveTheme.ts"],"names":[],"mappings":"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","file":"chunk-LL2ERJPZ.js","sourcesContent":["/** One value of an axis. `scheme` becomes `color-scheme` in that value's CSS blocks. */\nexport interface AxisValue {\n  readonly scheme?: 'dark' | 'light';\n}\n\nexport interface AxisDef {\n  readonly default: string;\n  readonly values: Readonly<Record<string, AxisValue>>;\n}\n\n/** Key order is declaration order, which selectors and selection keys follow. */\nexport type AxisDefs = Readonly<Record<string, AxisDef>>;\n\n/** A partial choice of axis values, e.g. `{ mode: 'light' }`. */\nexport type Selection = Readonly<Record<string, string>>;\n\n/** `{ by: 'mode', dark: …, light: … }`: a value that differs per axis value. */\nexport interface ByAxis<T> {\n  readonly by: string;\n  readonly [axisValue: string]: Varying<T> | string;\n}\n\nexport type Varying<T> = T | ByAxis<T>;\n\nexport type Picked<T> = { ok: true; value: T } | { ok: false; axis: string; value: string };\n\nexport function isByAxis(v: unknown): v is ByAxis<unknown> {\n  return typeof v === 'object' && v !== null && !Array.isArray(v) && typeof (v as { by?: unknown }).by === 'string';\n}\n\n/** Every axis given a known value; anything missing or unknown takes its default. */\nexport function fullSelection(axes: AxisDefs, selection: Selection = {}): Selection {\n  const out: Record<string, string> = {};\n  for (const [name, def] of Object.entries(axes)) {\n    const v = selection[name];\n    out[name] = v !== undefined && v in def.values ? v : def.default;\n  }\n  return out;\n}\n\n/** A child's axes over its parent's: an axis both declare keeps both sets of values, the child's entries and default winning. */\nexport function mergeAxes(parent: AxisDefs, child: AxisDefs): AxisDefs {\n  const out: Record<string, AxisDef> = { ...parent };\n  for (const [name, def] of Object.entries(child)) {\n    out[name] = { ...def, values: { ...parent[name]?.values, ...def.values } };\n  }\n  return out;\n}\n\nexport function enumerateSelections(axes: AxisDefs): Selection[] {\n  let out: Record<string, string>[] = [{}];\n  for (const [name, def] of Object.entries(axes)) {\n    out = out.flatMap((s) => Object.keys(def.values).map((v) => ({ ...s, [name]: v })));\n  }\n  return out;\n}\n\n/** `mode=dark,density=compact`, axes in declaration order. */\nexport function selectionKey(axes: AxisDefs, selection: Selection): string {\n  const full = fullSelection(axes, selection);\n  return Object.keys(axes).map((a) => `${a}=${full[a]}`).join(',');\n}\n\nexport function pick<T>(v: Varying<T>, selection: Selection): Picked<T> {\n  let cur: unknown = v;\n  while (isByAxis(cur)) {\n    const axis = cur.by;\n    const value = selection[axis];\n    if (value === undefined || value === 'by' || !(value in cur)) return { ok: false, axis, value: value ?? '' };\n    cur = cur[value];\n  }\n  return { ok: true, value: cur as T };\n}\n\n/** Every entry of a varying record that has a value for this selection, in record order. */\nexport function pickAll<T>(record: Readonly<Record<string, Varying<T>>>, selection: Selection): Record<string, T> {\n  const out: Record<string, T> = {};\n  for (const [name, v] of Object.entries(record)) {\n    const picked = pick(v, selection);\n    if (picked.ok) out[name] = picked.value;\n  }\n  return out;\n}\n","import type { TokenValue } from './types';\n\n/**\n * Quote family names containing whitespace; leave everything else bare.\n * Generic keywords (`sans-serif`) and hyphen-prefixed identifiers\n * (`-apple-system`) break if quoted, and neither contains a space.\n */\nfunction fontStack(value: readonly (string | number)[]): string {\n  return value.map((f) => (typeof f === 'string' && /\\s/.test(f) ? `'${f}'` : String(f))).join(', ');\n}\n\n/**\n * A token's value as CSS renders it. A DTCG value is not always a string: a\n * `fontFamily` is a list of names and a `cubicBezier` is four numbers, and both\n * have a spelling that belongs in a stylesheet rather than in JSON.\n */\nexport function serializeTokenValue(type: string, value: TokenValue): string {\n  if (Array.isArray(value)) {\n    if (type === 'cubicBezier') return `cubic-bezier(${value.join(', ')})`;\n    if (type === 'fontFamily') return fontStack(value);\n    return value.join(', ');\n  }\n  return String(value);\n}\n\nconst BEZIER = /^cubic-bezier\\(\\s*([^)]*)\\)$/i;\n\n/**\n * The inverse of {@link serializeTokenValue}: text a person edited, back in the\n * shape a definition stores. Text that does not parse for its type is kept as\n * text rather than thrown away, so a half-typed value stays editable.\n */\nexport function parseTokenValue(type: string, text: string): TokenValue {\n  const raw = text.trim();\n  if (type === 'cubicBezier') {\n    const inner = BEZIER.exec(raw)?.[1] ?? raw;\n    const parts = inner.split(',').map((p) => Number(p.trim()));\n    return parts.length === 4 && parts.every((n) => Number.isFinite(n)) ? parts : raw;\n  }\n  if (type === 'fontFamily') {\n    const families = raw\n      .split(',')\n      .map((f) => f.trim().replace(/^['\"]|['\"]$/g, '').trim())\n      .filter((f) => f !== '');\n    return families.length > 0 ? families : raw;\n  }\n  return raw;\n}\n","/**\n * A resolved color at `alpha`, multiplied into any alpha it already carries. The\n * JS side of the alpha extension; the CSS side emits `color-mix()` instead so DOM\n * chrome keeps tracking a downstream override of the referenced token.\n *\n * Hex and `rgb()`/`rgba()` become an `rgba()` literal. Anything else — a named\n * color, `hsl()`, `oklch()`, a `var()` — becomes the same `color-mix()` the CSS\n * side writes, which the browser resolves.\n */\nexport function withAlpha(color: string, alpha: number): string {\n  const rgba = parseRgba(color.trim());\n  if (!rgba) return `color-mix(in srgb, ${color.trim()} ${round(alpha * 100, 4)}%, transparent)`;\n  const [r, g, b, a] = rgba;\n  return `rgba(${r}, ${g}, ${b}, ${round(a * alpha, 3)})`;\n}\n\ntype Rgba = [number, number, number, number];\n\nfunction round(n: number, places: number): number {\n  return Number(n.toFixed(places));\n}\n\nfunction parseRgba(s: string): Rgba | null {\n  if (s.toLowerCase() === 'transparent') return [0, 0, 0, 0];\n  return parseHex(s) ?? parseRgbFn(s);\n}\n\nfunction parseHex(s: string): Rgba | null {\n  const m = /^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.exec(s);\n  if (!m) return null;\n  const body = m[1];\n  const full = body.length <= 4 ? body.replace(/./g, (c) => c + c) : body;\n  const byte = (i: number) => Number.parseInt(full.slice(i, i + 2), 16);\n  return [byte(0), byte(2), byte(4), full.length === 8 ? byte(6) / 255 : 1];\n}\n\nfunction parseRgbFn(s: string): Rgba | null {\n  const m = /^rgba?\\(([^()]*)\\)$/i.exec(s);\n  if (!m) return null;\n  const [channels, alphaPart, extra] = m[1].split('/');\n  if (extra !== undefined) return null;\n  const parts = channels.trim().split(/\\s*,\\s*|\\s+/);\n  if (alphaPart !== undefined) parts.push(alphaPart.trim());\n  if (parts.length !== 3 && parts.length !== 4) return null;\n\n  const channel = (p: string) => (p.endsWith('%') ? (Number.parseFloat(p) / 100) * 255 : Number(p));\n  const alpha = (p: string) => (p.endsWith('%') ? Number.parseFloat(p) / 100 : Number(p));\n  const [r, g, b] = parts.slice(0, 3).map(channel);\n  const a = parts[3] === undefined ? 1 : alpha(parts[3]);\n  if (![r, g, b, a].every(Number.isFinite)) return null;\n  return [Math.round(r), Math.round(g), Math.round(b), a];\n}\n","import { withAlpha } from './color';\nimport type { FlatTokens, ResolvedTokenMap, TokenValue } from './types';\nimport { serializeTokenValue } from './value';\n\n/** `{color.gray-100}` → `gray-100`. The type group is dropped, per the naming rule. */\nconst REF = /^\\{([^}]+)\\}$/;\n\nfunction refTarget(value: TokenValue): string | null {\n  if (typeof value !== 'string') return null;\n  const m = REF.exec(value.trim());\n  if (!m) return null;\n  const path = m[1];\n  const dot = path.indexOf('.');\n  return dot === -1 ? path : path.slice(dot + 1);\n}\n\n/**\n * Resolve flat tokens to final CSS-ready strings.\n *\n * Merge modes before calling: this function has no notion of modes, only of a\n * complete token set.\n */\nexport function resolveTokens(tokens: FlatTokens): ResolvedTokenMap {\n  const out: ResolvedTokenMap = {};\n  const inProgress = new Set<string>();\n\n  const resolveOne = (name: string): string => {\n    const cached = out[name];\n    if (cached !== undefined) return cached;\n\n    const token = tokens[name];\n    if (!token) throw new Error(`Unknown token \"${name}\"`);\n\n    if (inProgress.has(name)) {\n      throw new Error(`Reference cycle at token \"${name}\" (${[...inProgress].join(' → ')})`);\n    }\n    inProgress.add(name);\n\n    const target = refTarget(token.value);\n    let value: string;\n    if (target === null) {\n      value = serializeTokenValue(token.type, token.value);\n    } else if (!tokens[target]) {\n      throw new Error(`Token \"${name}\" references \"${target}\", which is not defined`);\n    } else {\n      value = resolveOne(target);\n    }\n\n    if (token.alpha !== undefined) value = withAlpha(value, token.alpha);\n\n    inProgress.delete(name);\n    out[name] = value;\n    return value;\n  };\n\n  for (const name of Object.keys(tokens)) resolveOne(name);\n  return out;\n}\n\n/** Merge a mode's tokens over the mode-invariant set. Later wins. */\nexport function mergeTokens(base: FlatTokens, mode: FlatTokens): FlatTokens {\n  return { ...base, ...mode };\n}\n","import { fullSelection, mergeAxes, pickAll, type AxisDefs, type Selection } from './axes';\nimport { resolveTokens } from './dtcg/resolve';\nimport type { FlatTokens } from './dtcg/types';\nimport type { TokenName } from './generated/themes';\nimport type { Theme } from './theme';\n\n/** The output of `resolveTheme`: every token of a theme, for one selection, keyed\n *  by CSS custom-property name and flattened to a final CSS value. */\nexport type ResolvedTheme = Readonly<Record<TokenName, string>>;\n\n/** Root-first, so the leaf theme's tokens land last. */\nexport function themeChain(theme: Theme): Theme[] {\n  const out: Theme[] = [];\n  for (let t: Theme | null = theme; t; t = t.extends) out.unshift(t);\n  return out;\n}\n\n/** Every axis the chain declares. An axis declared more than once keeps every value; a descendant's value entries and default win. */\nexport function themeAxes(theme: Theme): AxisDefs {\n  return themeChain(theme).reduce<AxisDefs>((axes, t) => mergeAxes(axes, t.axes), {});\n}\n\n/**\n * Merge the extends chain at a selection, resolve every alias, and key the\n * result by CSS custom-property name. A missing or unknown axis value takes the\n * axis default.\n *\n * Pure — no DOM. An unresolvable reference throws rather than falling back.\n */\nexport function resolveTheme(theme: Theme, selection: Selection = {}): ResolvedTheme {\n  const sel = fullSelection(themeAxes(theme), selection);\n  let merged: FlatTokens = {};\n  for (const t of themeChain(theme)) merged = { ...merged, ...pickAll(t.tokens, sel) };\n  const out: Record<string, string> = {};\n  for (const [name, value] of Object.entries(resolveTokens(merged))) out[`--wzl-${name}`] = value;\n  return out as ResolvedTheme;\n}\n"]}

package/dist/chunk-PJMTWM34.js

@@ -0,0 +1,6 @@
+// src/dtcg/types.ts
+var ALPHA_EXT = "com.weasel.alpha";
+
+export { ALPHA_EXT };
+//# sourceMappingURL=chunk-PJMTWM34.js.map
+//# sourceMappingURL=chunk-PJMTWM34.js.map

package/dist/chunk-PJMTWM34.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/dtcg/types.ts"],"names":[],"mappings":";AACO,IAAM,SAAA,GAAY","file":"chunk-PJMTWM34.js","sourcesContent":["/** The one `$extensions` key this kit defines. */\nexport const ALPHA_EXT = 'com.weasel.alpha';\n\nexport type TokenValue = string | number | readonly (string | number)[];\n\n/**\n * A single design token as authored, before aliases are resolved: a DTCG-shaped\n * `{ type, value }` pair where `value` may still be a `{ref}` to another token.\n */\nexport interface RawToken {\n  readonly type: string;\n  readonly value: TokenValue;\n  /** Render the referenced color at this alpha, 0–1. */\n  readonly alpha?: number | undefined;\n  readonly description?: string | undefined;\n}\n\n/** A token graph flattened to one level, keyed by token name (no `--wzl-`\n *  prefix). Still unresolved — see `ResolvedTokenMap` for the output side. */\nexport type FlatTokens = Record<string, RawToken>;\n\n/** A resolved theme: every token name mapped to its final CSS-ready string.\n *  Named ...Map, not ...Tokens, to stay distinct from hud's public `ResolvedTokens`. */\nexport type ResolvedTokenMap = Record<string, string>;\n"]}