@weasel-js/theme 1.9.3 → 1.10.0

package/dist/engine.js

@@ -1,6 +1,8 @@
 import { overrideKey, AXES_EXT, ALPHA_EXT } from './chunk-Z675UQ26.js';
-import { mergeAxes, toLch, toHex, generate, DEFAULT_CONSTRAINTS, fullSelection, pick, enumerateSelections, resolveTokens, pickAll, themeAxes, selectionKey, isByAxis, contrast } from './chunk-NUILKH2Z.js';
-export { CHROMA_WEIGHT, DEFAULT_CONSTRAINTS, anchorFromHex, chromaCap, contrast, deltaE, floorDegrees, generate, hexToRgb, hueGap, hueName, luminance, toHex, toHexPreview, toLab, toLch, vividAt } from './chunk-NUILKH2Z.js';
+import { toLch, toHex, generate, DEFAULT_CONSTRAINTS, resolveTokens, mixAlpha, themeAxes, tokensAt, contrast, tokenAt } from './chunk-2PY2YTDY.js';
+export { CHROMA_WEIGHT, DEFAULT_CONSTRAINTS, anchorFromHex, chromaCap, contrast, deltaE, floorDegrees, generate, hexToRgb, hueGap, hueName, luminance, toHex, toHexPreview, toLab, toLch, vividAt } from './chunk-2PY2YTDY.js';
+import { mergeAxes, fullSelection, pick, enumerateSelections, pickAll, selectionKey, isByAxis } from './chunk-P5F3GZV6.js';
+import { isPlainObject } from '@weasel-js/registry';
 
 // src/engine/steps.ts
 var stepList = (x) => Array.isArray(x) ? [...new Set(x.filter((s) => typeof s === "string"))] : [];
@@ -217,6 +219,20 @@ function axisDependencies(definition, lookup) {
   return result;
 }
 
+// src/engine/axisIssues.ts
+function axisIssues(axes) {
+  const issues = [];
+  for (const [name, def] of Object.entries(axes)) {
+    const values = Object.keys(def.values ?? {});
+    if (values.length === 0) {
+      issues.push({ kind: "invalid", path: `axes.${name}`, message: `axis "${name}" has no values` });
+    } else if (!values.includes(def.default)) {
+      issues.push({ kind: "invalid", path: `axes.${name}`, message: `axis "${name}" defaults to "${def.default}", which is not one of its values (${values.join(", ")})` });
+    }
+  }
+  return issues;
+}
+
 // src/engine/ramps.ts
 var MAX_CHROMA = 0.4;
 var smoothstep = (t) => t * t * (3 - 2 * t);
@@ -290,12 +306,10 @@ function scale(steps, p) {
   });
   return out;
 }
-
-// src/engine/semantics.ts
 var TOKEN_REF2 = /^\{([^}.]+)\}$/;
 var HEX = /^#[0-9a-f]{6}$/i;
 var MAX_DEPTH = 32;
-var isRecord = (x) => typeof x === "object" && x !== null && !Array.isArray(x);
+var isRecord = isPlainObject;
 var refTarget = (value) => typeof value === "string" ? TOKEN_REF2.exec(value.trim())?.[1] : void 0;
 function deriveSemantics(rules, ctx) {
   const done = /* @__PURE__ */ new Map();
@@ -577,12 +591,12 @@ var Reader = class {
   }
   record(x, path) {
     if (x === void 0) return {};
-    if (typeof x === "object" && x !== null && !Array.isArray(x)) return x;
+    if (isPlainObject(x)) return x;
     this.fail(path, "expected an object");
     return {};
   }
 };
-var isRecord2 = (x) => typeof x === "object" && x !== null && !Array.isArray(x);
+var isRecord2 = isPlainObject;
 var stepNames = (x) => Array.isArray(x) && x.every((s) => typeof s === "string") ? x : void 0;
 function rampColors(name, r, steps, ctx) {
   const path = `ramps.${name}`;
@@ -726,7 +740,7 @@ function inferTypes(tokens, provenance, failed, issues) {
     issues.push({ kind: "untyped-pin", token: name });
   }
 }
-var isPinObject = (v) => typeof v === "object" && v !== null && !Array.isArray(v) && "value" in v;
+var isPinObject = (v) => isPlainObject(v) && "value" in v;
 var NAMED_LAYERS = ["ramps", "scales", "semantics", "components", "pins"];
 var SAFE_NAME = /^[A-Za-z0-9_-]+$/;
 var isSafeName = (name) => SAFE_NAME.test(name);
@@ -746,6 +760,7 @@ function withoutUnsafeNames(def, issues) {
 function derive(definition, selection = {}, lookup) {
   const issues = [];
   const def = withoutUnsafeNames(mergeChain(definition, lookup), issues);
+  issues.push(...axisIssues(def.axes ?? {}));
   const sel = fullSelection(def.axes ?? {}, selection);
   const seeds = {};
   for (const [k, v] of Object.entries(def.seeds ?? {})) {
@@ -937,23 +952,14 @@ function bakeOver(definition, merged, above, lookup) {
   const axes = merged.axes ?? {};
   const own = table(definition, axes, lookup);
   const at = (sel, name) => own.get(selectionKey(axes, sel))?.[name];
-  const inherited = (sel, name) => {
-    const full = fullSelection(axes, sel);
-    for (let i = above.length - 1; i >= 0; i--) {
-      const tokens2 = above[i].tokens;
-      if (!Object.hasOwn(tokens2, name)) continue;
-      const picked = pick(tokens2[name], full);
-      if (picked.ok) return picked.value;
-    }
-    return void 0;
-  };
+  const inherited = (sel, name) => tokenAt(above, name, fullSelection(axes, sel));
   const produced = new Set([...own.values()].flatMap((t) => Object.keys(t)));
   const ordered = definitionOrder(merged).filter((n) => produced.has(n));
   const names = [...ordered, ...[...produced].filter((n) => !ordered.includes(n))];
   const selections = enumerateSelections(axes);
   const tokens = {};
   for (const name of names) {
-    if (selections.every((sel) => same(at(sel, name), inherited(sel, name)))) continue;
+    if (selections.every((sel) => at(sel, name) === void 0 || same(at(sel, name), inherited(sel, name)))) continue;
     const varying = Object.keys(axes).filter(
       (axis) => selections.some((sel) => Object.keys(axes[axis].values).some((v) => !same(at(sel, name), at({ ...sel, [axis]: v }, name))))
     );
@@ -998,7 +1004,7 @@ function cssValue(name, token) {
   const target = refTarget2(token);
   if (target === null) return resolveTokens({ [name]: token })[name];
   if (token.alpha === void 0) return `var(--wzl-${target})`;
-  return `color-mix(in srgb, var(--wzl-${target}) ${Math.round(token.alpha * 100)}%, transparent)`;
+  return mixAlpha(`var(--wzl-${target})`, token.alpha);
 }
 function axisSets(axes) {
   const names = Object.keys(axes);
@@ -1030,21 +1036,16 @@ function combineAxes(own, other) {
 var Resolved = class {
   axes;
   names;
+  /** Root first. */
   chain;
   memo = /* @__PURE__ */ new Map();
   constructor(axes, chain) {
     this.axes = axes;
     this.chain = chain;
-    this.names = [...new Set([...chain].reverse().flatMap((t) => Object.keys(t.tokens)))];
+    this.names = [...new Set(chain.flatMap((t) => Object.keys(t.tokens)))];
   }
   token(name, sel) {
-    const full = fullSelection(this.axes, sel);
-    for (const t of this.chain) {
-      if (!Object.hasOwn(t.tokens, name)) continue;
-      const picked = pick(t.tokens[name], full);
-      if (picked.ok) return picked.value;
-    }
-    return void 0;
+    return tokenAt(this.chain, name, fullSelection(this.axes, sel));
   }
   /** What a browser computes: every `var()` substituted, down to literals. */
   expanded(name, sel, stack = []) {
@@ -1064,7 +1065,7 @@ function chainOf(baked, byName) {
   if (!baked.extends) return [baked];
   const parent = byName.get(baked.extends);
   if (!parent) throw new Error(`Theme "${baked.name}" extends "${baked.extends}", which is not being emitted`);
-  return [baked, ...chainOf(parent, byName)];
+  return [...chainOf(parent, byName), baked];
 }
 var union = (axes, ...sets) => {
   const all = new Set(sets.flatMap((s) => s ?? []));
@@ -1249,6 +1250,138 @@ function toDTCG(theme) {
 
 // src/hooks.ts
 var TOKEN_HOOKS = [
+  {
+    name: "titlebar-surface",
+    type: "color",
+    value: "var(--_edge)",
+    description: "Background of the strip a `titlebar` frame carries its title in: a color, a gradient, or stripes. Unset, the frame\u2019s edge color. A frame that names a tone paints the tone instead."
+  },
+  {
+    name: "titlebar-fg",
+    type: "color",
+    value: "var(--_edge-ink)",
+    description: "Text color on a `titlebar` frame\u2019s strip. Unset, black or white, whichever reads on the edge color."
+  },
+  {
+    name: "titlebar-align",
+    type: "string",
+    value: "start",
+    description: "Text alignment of a `titlebar` frame\u2019s title along its strip."
+  },
+  {
+    name: "titlebar-weight",
+    type: "fontWeight",
+    value: "var(--wzl-font-weight-bold)",
+    description: "Font weight of a `titlebar` frame\u2019s title."
+  },
+  {
+    name: "titlebar-label-surface",
+    type: "color",
+    value: "transparent",
+    description: "Background behind a `titlebar` frame\u2019s title alone, for a strip drawn in stripes that must not run through the letters."
+  },
+  {
+    name: "titlebar-label-pad",
+    type: "dimension",
+    value: "0",
+    description: "Inline padding of the patch --wzl-titlebar-label-surface paints behind a `titlebar` frame\u2019s title."
+  },
+  {
+    name: "titlebar-border",
+    type: "border",
+    value: "1px solid var(--_edge)",
+    description: "Border of a `titlebar` frame. A theme whose --wzl-bevel-raised draws the edge sets it to a border of no width."
+  },
+  {
+    name: "titlebar-inset",
+    type: "dimension",
+    value: "0",
+    description: "Padding between a `titlebar` frame\u2019s edge and its strip and body: the width of the bevel a theme draws there."
+  },
+  {
+    name: "bevel-raised",
+    type: "shadow",
+    value: "none",
+    description: "Box shadow of a raised face: a Button, a PropertyPanel, a menu, popover, tooltip, or Dialog, a thumb, the chosen segment of a segmented control, a toolbar\u2019s strip, and every edge of a tab but the one its panel is on. A theme that draws its edges in relief declares it; unset, each keeps the shadow it draws for itself, which for most is none."
+  },
+  {
+    name: "bevel-pressed",
+    type: "shadow",
+    value: "none",
+    description: "Box shadow of a Button held down, or of a Button or a toolbar\u2019s button that stays down. Unset, a Button draws its own inset (--btn-relief-pressed) and a toolbar\u2019s button none."
+  },
+  {
+    name: "bevel-sunken",
+    type: "shadow",
+    value: "none",
+    description: "Box shadow of a well: the frame a field draws its value in, a checkbox, a radio, the track of a switch, a slider, or a segmented control, and a cell of a flat one."
+  },
+  {
+    name: "field-border",
+    type: "border",
+    value: "1px solid var(--wzl-border)",
+    description: "Border of a field\u2019s frame. A theme whose --wzl-bevel-sunken draws the edge sets it to a border of no width."
+  },
+  {
+    name: "field-focus-shadow",
+    type: "shadow",
+    value: "0 0 0 1px var(--wzl-focus-ring)",
+    description: "Box shadow of a field\u2019s frame while it holds focus. It replaces --wzl-bevel-sunken there, so a beveled theme restates the bevel in it."
+  },
+  {
+    name: "button-radius",
+    type: "dimension",
+    value: "calc(var(--btn-height) * 0.1)",
+    description: "Corner radius of a Button. Unset, a tenth of its height."
+  },
+  {
+    name: "button-surface",
+    type: "color",
+    value: "var(--btn-glass)",
+    description: "Background of a secondary Button. Unset, neutral glass mixed from the surfaces."
+  },
+  {
+    name: "button-pressed-surface",
+    type: "color",
+    value: "var(--btn-glass-pressed)",
+    description: "Background of a secondary Button while it is held down."
+  },
+  {
+    name: "button-primary-surface",
+    type: "color",
+    value: "var(--btn-glass)",
+    description: "Background of a primary Button. Unset, glass tinted with --wzl-accent."
+  },
+  {
+    name: "button-primary-pressed-surface",
+    type: "color",
+    value: "var(--btn-glass-pressed)",
+    description: "Background of a primary Button while it is held down."
+  },
+  {
+    name: "button-primary-fg",
+    type: "color",
+    value: "var(--wzl-fg-on-accent)",
+    description: "Text color of a primary Button, for a theme whose --wzl-button-primary-surface is not an accent fill."
+  },
+  {
+    name: "button-primary-bevel",
+    type: "shadow",
+    value: "var(--wzl-bevel-raised)",
+    description: "Box shadow of a primary Button, where it differs from --wzl-bevel-raised: the heavier frame of a default button."
+  },
+  {
+    name: "button-gloss",
+    type: "number",
+    value: "1",
+    description: "Opacity of the specular sheen over a Button\u2019s upper half. 0 for a flat face."
+  },
+  {
+    name: "button-text-shadow",
+    type: "shadow",
+    value: "var(--btn-engraving)",
+    description: "Text shadow of a primary or secondary Button\u2019s label. Unset, an engraving stamp under the glyphs in dark mode."
+  },
   {
     name: "detail-figure-min-width",
     type: "dimension",
@@ -1321,6 +1454,12 @@ var TOKEN_HOOKS = [
     value: "300px",
     description: "Width of the Prefs category column."
   },
+  {
+    name: "prop-columns",
+    type: "string",
+    value: "1fr 1fr",
+    description: "Column tracks of a Properties list, group body, and subpanel. A container too narrow for two columns sets `minmax(0, 1fr)` to stack every row."
+  },
   {
     name: "prop-number-width",
     type: "dimension",
@@ -1380,6 +1519,60 @@ var TOKEN_HOOKS = [
     type: "dimension",
     value: "calc(var(--wzl-control-h-xs) + var(--wzl-space-2))",
     description: "Indent of each Tree level. Unset, it is one twisty and one gap, so a child\u2019s twisty sits under its parent\u2019s label."
+  },
+  {
+    name: "tree-font-size",
+    type: "dimension",
+    value: "var(--wzl-font-size-sm)",
+    description: "Size of a Tree row\u2019s text."
+  },
+  {
+    name: "tree-fold-size",
+    type: "dimension",
+    value: "16px",
+    description: "Size of the leading glyph a Tree folds a branch by, where its branches fold by their glyphs."
+  },
+  {
+    name: "tree-guide",
+    type: "color",
+    value: "var(--wzl-fg-subtle)",
+    description: "Color of the bracket a Tree draws down a branch."
+  },
+  {
+    name: "tree-leaf-indent",
+    type: "dimension",
+    value: "0",
+    description: "How far in from its branches' glyphs a Tree with guides sets a row that folds nothing."
+  },
+  {
+    name: "dialog-max-width",
+    type: "dimension",
+    value: "900px",
+    description: "Widest a Dialog grows, modal or inline, before its contents wrap or scroll."
+  },
+  {
+    name: "prefs-across-gap",
+    type: "dimension",
+    value: "28px",
+    description: "Gap between the two columns of rows a PrefsForm pane sets side by side."
+  },
+  {
+    name: "prefs-control-min",
+    type: "dimension",
+    value: "80px",
+    description: "Narrowest a PrefsForm row\u2019s control gets in a two-across pane before the row wraps it under its label."
+  },
+  {
+    name: "prop-panel-actions-basis",
+    type: "dimension",
+    value: "auto",
+    description: "Width a PropertyPanel\u2019s title row gives its actions. Set, it holds that width whatever the actions are."
+  },
+  {
+    name: "prop-panel-actions-align",
+    type: "string",
+    value: "center",
+    description: "How a PropertyPanel\u2019s title row lines its actions up with the title: center, or baseline for actions that are text."
   }
 ];
 
@@ -1434,9 +1627,6 @@ function chainOf2(baked, byName) {
   if (baked.extends && !parent) throw new Error(`Theme "${baked.name}" extends "${baked.extends}", which is not in themes/`);
   return [...parent ? chainOf2(parent, byName) : [], baked];
 }
-function tokensAt(chain, sel) {
-  return Object.assign({}, ...chain.map((t) => pickAll(t.tokens, sel)));
-}
 function emitThemes(themes) {
   const byName = new Map(themes.map((t) => [t.baked.name, t.baked]));
   const names = /* @__PURE__ */ new Set();
@@ -1506,11 +1696,12 @@ function generateTokens(definitions) {
   const roots = definitions.filter((d) => !d.extends);
   if (roots.length !== 1) throw new Error(`themes/ needs exactly one theme that extends nothing; found ${roots.length}`);
   const ordered = [roots[0], ...definitions.filter((d) => d.extends)];
-  const problems = ordered.flatMap(
-    (def) => enumerateSelections(mergeChain(def, lookup).axes ?? {}).flatMap(
+  const problems = ordered.flatMap((def) => {
+    const selections = enumerateSelections(mergeChain(def, lookup).axes ?? {});
+    return (selections.length > 0 ? selections : [{}]).flatMap(
       (sel) => derive(def, sel, lookup).issues.map((issue) => `${def.name} ${JSON.stringify(sel)}: ${JSON.stringify(issue)}`)
-    )
-  );
+    );
+  });
   if (problems.length > 0) return { ok: false, problems };
   const themes = ordered.map((definition) => ({
     definition,