@weasel-js/theme 1.5.1 → 1.6.0

package/dist/engine.js

@@ -1,397 +1,6 @@
-import { ALPHA_EXT } from './chunk-PJMTWM34.js';
-import { mergeAxes, fullSelection, pick, enumerateSelections, resolveTokens, pickAll, themeAxes, isByAxis, selectionKey } from './chunk-LL2ERJPZ.js';
-import { srgbU8ToOklab, oklabToOklch, oklchToOklab, oklabToSrgbU8 } from '@weasel-js/paint';
-
-var clamp255 = (v) => Math.max(0, Math.min(255, Math.round(v)));
-function hexToRgb(hex) {
-  const n = Number.parseInt(hex.slice(1), 16);
-  return [n >> 16 & 255, n >> 8 & 255, n & 255];
-}
-function toHex(L, C, H) {
-  const [l, a, b] = oklchToOklab(L, C, H * Math.PI / 180);
-  const [r, g, bl] = oklabToSrgbU8(l, a, b);
-  return `#${[r, g, bl].map((v) => clamp255(v).toString(16).padStart(2, "0")).join("")}`;
-}
-function toLch(hex) {
-  const [r, g, b] = hexToRgb(hex);
-  const [L, A, B] = srgbU8ToOklab(r, g, b);
-  const [l, c, h] = oklabToOklch(L, A, B);
-  return { L: l, C: c, H: (h * 180 / Math.PI % 360 + 360) % 360 };
-}
-function chromaCap(L, H) {
-  return toLch(toHex(L, 0.5, H)).C;
-}
-function luminance(hex) {
-  const [r, g, b] = hexToRgb(hex).map((v) => v / 255);
-  const f = (u) => u <= 0.04045 ? u / 12.92 : ((u + 0.055) / 1.055) ** 2.4;
-  return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b);
-}
-function contrast(a, b) {
-  const [hi, lo] = [luminance(a), luminance(b)].sort((p, q) => q - p);
-  return (hi + 0.05) / (lo + 0.05);
-}
-function hueGap(a, b) {
-  const d = Math.abs(a - b) % 360;
-  return Math.min(d, 360 - d);
-}
-function toLab(hex) {
-  const [r, g, b] = hexToRgb(hex);
-  return srgbU8ToOklab(r, g, b);
-}
-var CHROMA_WEIGHT = 3;
-function deltaE(a, b) {
-  const [l1, a1, b1] = toLab(a);
-  const [l2, a2, b2] = toLab(b);
-  return Math.hypot(l1 - l2, CHROMA_WEIGHT * (a1 - a2), CHROMA_WEIGHT * (b1 - b2));
-}
-function vividAt(L, H) {
-  return toHex(L, chromaCap(L, H), H);
-}
-
-// src/engine/color/generate.ts
-function peakLightness(H) {
-  let bestL = 0.5;
-  let bestC = -1;
-  for (let L = 0.32; L <= 0.96; L += 0.01) {
-    const c = chromaCap(L, H);
-    if (c > bestC) {
-      bestC = c;
-      bestL = L;
-    }
-  }
-  return bestL;
-}
-var PEAK = [];
-for (let H = 0; H < 360; H += 1) PEAK.push(peakLightness(H));
-var peakAt = (H) => PEAK[(Math.round(H) % 360 + 360) % 360];
-function place(H, c) {
-  const L = peakAt(H) + (c.lightnessTarget - peakAt(H)) * c.lightnessPull;
-  return toHex(L, chromaCap(L, H) * c.chromaFraction, H);
-}
-var HUE_NAMES = [
-  [15, "rose"],
-  [45, "red"],
-  [62, "orange"],
-  [85, "amber"],
-  [100, "gold"],
-  [122, "yellow"],
-  [138, "lime"],
-  [165, "green"],
-  [195, "teal"],
-  [218, "cyan"],
-  [245, "sky"],
-  [275, "blue"],
-  [310, "violet"],
-  [345, "fuchsia"]
-];
-function hueName(H) {
-  for (const [ceil, name] of HUE_NAMES) if (H < ceil) return name;
-  return "rose";
-}
-function uniqueNames(hues) {
-  const seen = /* @__PURE__ */ new Map();
-  return hues.map((h) => {
-    const base = hueName(h);
-    const n = (seen.get(base) ?? 0) + 1;
-    seen.set(base, n);
-    return n === 1 ? base : `${base}-${n}`;
-  });
-}
-function equalizeChroma(hexes, k, anchored) {
-  if (k <= 0) return hexes;
-  const lch = hexes.map(toLch);
-  const target = lch.reduce((sum, x) => sum + x.C, 0) / lch.length;
-  return lch.map((x, i) => {
-    const wanted = x.C + (target - x.C) * k;
-    if (anchored[i]) return toHex(x.L, Math.min(wanted, chromaCap(x.L, x.H)), x.H);
-    if (chromaCap(x.L, x.H) >= wanted) return toHex(x.L, wanted, x.H);
-    let bestL = x.L;
-    let bestDistance = Infinity;
-    for (let L = 0.3; L <= 0.96; L += 5e-3) {
-      if (chromaCap(L, x.H) >= wanted) {
-        const d = Math.abs(L - x.L);
-        if (d < bestDistance) {
-          bestDistance = d;
-          bestL = L;
-        }
-      }
-    }
-    if (bestDistance === Infinity) {
-      const pk = peakAt(x.H);
-      return toHex(pk, chromaCap(pk, x.H), x.H);
-    }
-    return toHex(bestL, wanted, x.H);
-  });
-}
-function farthestFirst(hues) {
-  const order = [0];
-  while (order.length < hues.length) {
-    let best = -1;
-    let bestGap = -1;
-    for (let i = 0; i < hues.length; i += 1) {
-      if (order.includes(i)) continue;
-      const gap = Math.min(...order.map((j) => hueGap(hues[i], hues[j])));
-      if (gap > bestGap) {
-        bestGap = gap;
-        best = i;
-      }
-    }
-    order.push(best);
-  }
-  return order;
-}
-function floorDegrees(c) {
-  return c.hueFloor <= 0 ? 0 : c.hueFloor * 360 / Math.max(1, c.count);
-}
-function searchHues(c) {
-  const minGapDeg = floorDegrees(c);
-  const anchorHues = c.anchors.map((a) => a.hue);
-  const anchorHexes = c.anchors.map(toHexPreview);
-  const freeCount = c.count - c.anchors.length;
-  if (freeCount < 0) return null;
-  if (freeCount === 0) return [];
-  const weighted = (hex) => {
-    const [L, a, b] = toLab(hex);
-    return [L, CHROMA_WEIGHT * a, CHROMA_WEIGHT * b];
-  };
-  const between = (p, q) => Math.hypot(p[0] - q[0], p[1] - q[1], p[2] - q[2]);
-  const placed = /* @__PURE__ */ new Map();
-  const at = (H) => {
-    const key = (Math.round(H) % 360 + 360) % 360;
-    let v = placed.get(key);
-    if (!v) {
-      const hex = place(key, c);
-      const lch = toLch(hex);
-      v = {
-        hex,
-        hue: lch.H,
-        contrast: contrast(hex, c.surface),
-        chroma: lch.C,
-        surfaceDistance: deltaE(hex, c.surface),
-        lab: weighted(hex)
-      };
-      placed.set(key, v);
-    }
-    return v;
-  };
-  const anchorMeta = anchorHexes.map((hex) => {
-    const lch = toLch(hex);
-    return {
-      hex,
-      hue: lch.H,
-      contrast: contrast(hex, c.surface),
-      chroma: lch.C,
-      surfaceDistance: deltaE(hex, c.surface),
-      lab: weighted(hex)
-    };
-  });
-  const metaFor = (free) => [...anchorMeta, ...free.map(at)];
-  const penalty = (free) => {
-    const m = metaFor(free);
-    let p = 0;
-    if (minGapDeg > 0) {
-      for (let i = 0; i < m.length; i += 1) {
-        for (let j = i + 1; j < m.length; j += 1) {
-          const short = minGapDeg - hueGap(m[i].hue, m[j].hue);
-          if (short > 0) p += short;
-        }
-      }
-    }
-    if (c.minContrast > 0) {
-      for (const x of m) {
-        const short = c.minContrast - x.contrast;
-        if (short > 0) p += short * 40;
-      }
-    }
-    if (c.minSurfaceDistance > 0) {
-      for (const x of m) {
-        const short = c.minSurfaceDistance - x.surfaceDistance;
-        if (short > 0) p += short * 400;
-      }
-    }
-    if (c.minDistance > 0) {
-      for (let i = 0; i < m.length; i += 1) {
-        for (let j = i + 1; j < m.length; j += 1) {
-          const short = c.minDistance - between(m[i].lab, m[j].lab);
-          if (short > 0) p += short * 400;
-        }
-      }
-    }
-    return p;
-  };
-  const score = (free) => {
-    const m = metaFor(free);
-    return m.reduce((sum, x) => sum + x.chroma, 0) / m.length;
-  };
-  const seeds = [];
-  const seedStep = Math.max(6, Math.round(freeCount * 1.6));
-  for (let start = 0; start < 360; start += seedStep) {
-    seeds.push(Array.from({ length: freeCount }, (_, i) => Math.round((start + i * 360 / freeCount) % 360)));
-  }
-  if (anchorHues.length > 0) {
-    const base = anchorHues[0];
-    const span = 360 - 2 * Math.max(minGapDeg, 1);
-    for (let jitter = -8; jitter <= 8; jitter += 2) {
-      for (const divisor of [Math.max(1, freeCount - 1), freeCount]) {
-        seeds.push(
-          Array.from(
-            { length: freeCount },
-            (_, i) => Math.round(((base + minGapDeg + jitter + i * span / divisor) % 360 + 360) % 360)
-          )
-        );
-      }
-    }
-  }
-  const STEPS = [-16, -8, -4, -2, -1, 1, 2, 4, 8, 16];
-  const penaltyAt = (m, i) => {
-    let p = 0;
-    const x = m[i];
-    if (c.minContrast > 0) {
-      const short = c.minContrast - x.contrast;
-      if (short > 0) p += short * 40;
-    }
-    if (c.minSurfaceDistance > 0) {
-      const short = c.minSurfaceDistance - x.surfaceDistance;
-      if (short > 0) p += short * 400;
-    }
-    for (let j = 0; j < m.length; j += 1) {
-      if (j === i) continue;
-      if (minGapDeg > 0) {
-        const short = minGapDeg - hueGap(x.hue, m[j].hue);
-        if (short > 0) p += short;
-      }
-      if (c.minDistance > 0) {
-        const short = c.minDistance - between(x.lab, m[j].lab);
-        if (short > 0) p += short * 400;
-      }
-    }
-    return p;
-  };
-  const descend = (hues, useChroma, keepLegal) => {
-    const current = [...hues];
-    let meta = metaFor(current);
-    const offset = anchorMeta.length;
-    for (let iteration = 0; iteration < 120; iteration += 1) {
-      let improved = false;
-      for (let i = 0; i < freeCount; i += 1) {
-        const slot = offset + i;
-        const beforeP = penaltyAt(meta, slot);
-        const beforeC = meta[slot].chroma;
-        for (const delta of STEPS) {
-          const next = ((current[i] + delta) % 360 + 360) % 360;
-          if (next === current[i]) continue;
-          const candidate = at(next);
-          const trialMeta = meta.slice();
-          trialMeta[slot] = candidate;
-          const afterP = penaltyAt(trialMeta, slot);
-          const better = useChroma ? (keepLegal ? afterP <= beforeP : true) && candidate.chroma > beforeC : afterP < beforeP;
-          if (!better) continue;
-          if (keepLegal && afterP > beforeP) continue;
-          current[i] = next;
-          meta = trialMeta;
-          improved = true;
-          break;
-        }
-      }
-      if (!improved) break;
-    }
-    return current;
-  };
-  let best = null;
-  let bestScore = -1;
-  for (const seed of seeds) {
-    const repaired = penalty(seed) > 0 ? descend(seed, false, false) : seed;
-    if (penalty(repaired) > 0) continue;
-    const tuned = descend(repaired, true, true);
-    if (penalty(tuned) > 0) continue;
-    const s = score(tuned);
-    if (s > bestScore) {
-      bestScore = s;
-      best = tuned;
-    }
-  }
-  return best;
-}
-function pairwiseMin(hexes) {
-  if (hexes.length < 2) return 1;
-  let min = Infinity;
-  for (let i = 0; i < hexes.length; i += 1) {
-    for (let j = i + 1; j < hexes.length; j += 1) min = Math.min(min, deltaE(hexes[i], hexes[j]));
-  }
-  return min;
-}
-function summarize(swatches, surface) {
-  const cs = swatches.map((s) => s.lch.C);
-  const ls = swatches.map((s) => s.lch.L);
-  let gap = 360;
-  for (let i = 0; i < swatches.length; i += 1) {
-    for (let j = i + 1; j < swatches.length; j += 1) {
-      gap = Math.min(gap, hueGap(swatches[i].lch.H, swatches[j].lch.H));
-    }
-  }
-  return {
-    meanChroma: cs.reduce((a, b) => a + b, 0) / (cs.length || 1),
-    chromaSpread: Math.max(...cs) - Math.min(...cs),
-    lightnessSpread: Math.max(...ls) - Math.min(...ls),
-    minHueGap: swatches.length > 1 ? gap : 360,
-    hueFloorShare: swatches.length > 1 ? gap * swatches.length / 360 : 1,
-    minContrast: Math.min(...swatches.map((s) => contrast(s.hex, surface))),
-    minSurfaceDistance: Math.min(...swatches.map((s) => deltaE(s.hex, surface))),
-    minDistance: pairwiseMin(swatches.map((s) => s.hex))
-  };
-}
-function generate(c) {
-  const found = searchHues(c);
-  const feasible = found !== null;
-  const free = found ?? Array.from(
-    { length: Math.max(0, c.count - c.anchors.length) },
-    (_, i) => Math.round(i * 360 / Math.max(1, c.count - c.anchors.length))
-  );
-  const hues = [...c.anchors.map((a) => a.hue), ...free];
-  const anchoredFlags = [...c.anchors.map(() => true), ...free.map(() => false)];
-  const raw = [
-    ...c.anchors.map(toHexPreview),
-    ...free.map((h) => place(h, c))
-  ];
-  const hexes = equalizeChroma(raw, c.equalize, anchoredFlags);
-  const order = c.order === "farthest" ? farthestFirst(hues) : [...hues.keys()].sort((a, b) => hues[a] - hues[b]);
-  const names = uniqueNames(order.map((i) => toLch(hexes[i]).H));
-  const swatches = order.map((i, position) => ({
-    name: c.anchors[i]?.name ?? names[position],
-    hex: hexes[i],
-    lch: toLch(hexes[i]),
-    anchored: anchoredFlags[i],
-    contrast: contrast(hexes[i], c.surface)
-  }));
-  return { swatches, stats: summarize(swatches, c.surface), feasible };
-}
-var DEFAULT_CONSTRAINTS = {
-  count: 10,
-  hueFloor: 0.9,
-  minContrast: 4,
-  surface: "#181a1e",
-  lightnessTarget: 0.72,
-  lightnessPull: 0.4,
-  chromaFraction: 0.95,
-  equalize: 0,
-  minSurfaceDistance: 0.25,
-  minDistance: 0.22,
-  anchors: [],
-  order: "farthest"
-};
-function toHexPreview(a) {
-  const cap = chromaCap(a.lightness, a.hue);
-  return toHex(a.lightness, a.chroma === void 0 ? cap : Math.min(a.chroma, cap), a.hue);
-}
-function anchorFromHex(hex, name) {
-  const { L, C, H } = toLch(hex);
-  return {
-    name: name ?? hueName(H),
-    hue: Math.round(H),
-    lightness: Number(L.toFixed(3)),
-    chroma: Number(C.toFixed(4))
-  };
-}
+import { overrideKey, AXES_EXT, ALPHA_EXT } from './chunk-GI7ZAXIB.js';
+import { mergeAxes, toLch, toHex, generate, DEFAULT_CONSTRAINTS, fullSelection, pick, enumerateSelections, resolveTokens, pickAll, themeAxes, selectionKey, isByAxis, contrast } from './chunk-QKRFHBRB.js';
+export { CHROMA_WEIGHT, DEFAULT_CONSTRAINTS, anchorFromHex, chromaCap, contrast, deltaE, floorDegrees, generate, hexToRgb, hueGap, hueName, luminance, toHex, toHexPreview, toLab, toLch, vividAt } from './chunk-QKRFHBRB.js';
 
 // src/engine/steps.ts
 var stepList = (x) => Array.isArray(x) ? [...new Set(x.filter((s) => typeof s === "string"))] : [];
@@ -432,6 +41,17 @@ function ownSteps(def) {
   }
   return names;
 }
+function fillFromParent(child, parent, axes) {
+  if (!isByAxis(child) || parent === void 0) return child;
+  const values = Object.keys(axes[child.by]?.values ?? {});
+  const out = { ...child };
+  for (const v of values) {
+    if (v in out) continue;
+    out[v] = isByAxis(parent) && parent.by === child.by ? parent[v] : parent;
+    if (out[v] === void 0) delete out[v];
+  }
+  return out;
+}
 function mergeChain(def, lookup, seen = /* @__PURE__ */ new Set()) {
   if (seen.has(def.name)) throw new Error(`extends cycle at theme "${def.name}"`);
   if (!def.extends) return def;
@@ -442,8 +62,13 @@ function mergeChain(def, lookup, seen = /* @__PURE__ */ new Set()) {
   for (const layer of LAYERS) out[layer] = { ...parent[layer] ?? {}, ...def[layer] ?? {} };
   const shadowed = ownSteps(def);
   const inherited = Object.entries(parent.pins ?? {}).filter(([name]) => !shadowed.has(name));
-  out.pins = { ...Object.fromEntries(inherited), ...def.pins ?? {} };
-  out.axes = mergeAxes(parent.axes ?? {}, def.axes ?? {});
+  const axes = mergeAxes(parent.axes ?? {}, def.axes ?? {});
+  const parentPins = parent.pins ?? {};
+  const own = Object.entries(def.pins ?? {}).map(([name, v]) => [name, fillFromParent(v, parentPins[name], axes)]);
+  out.pins = { ...Object.fromEntries(inherited), ...Object.fromEntries(own) };
+  out.axes = axes;
+  out.tones = def.tones ?? parent.tones;
+  if (out.tones === void 0) delete out.tones;
   return out;
 }
 
@@ -606,14 +231,23 @@ function lightnessRamp(p) {
   const at = (i) => n === 1 ? 0 : i / (n - 1);
   const lightBias = p.lightBias ?? 0;
   const max = envelopeMax(lightBias, p.darkBias);
-  let { hue, peak } = p;
-  const anchorIndex = p.steps.findIndex((s) => p.anchor?.[s] !== void 0);
-  if (anchorIndex !== -1) {
-    const a = toLch(p.anchor[p.steps[anchorIndex]]);
-    const e = envelope(at(anchorIndex), lightBias, p.darkBias);
-    hue = a.H;
-    peak = e > 1e-6 ? a.C * max / e : a.C;
-  }
+  const anchors = p.steps.flatMap((s, i) => {
+    const hex = p.anchor?.[s];
+    if (hex === void 0) return [];
+    const { C, H } = toLch(hex);
+    return [{ i, hue: H, peak: C }];
+  });
+  const hueAndPeak = (i) => {
+    if (anchors.length === 0) return p;
+    const next = anchors.findIndex((a2) => a2.i >= i);
+    if (next === 0) return anchors[0];
+    if (next === -1) return anchors[anchors.length - 1];
+    const a = anchors[next - 1];
+    const b = anchors[next];
+    const f = (i - a.i) / (b.i - a.i);
+    const arc = ((b.hue - a.hue) % 360 + 540) % 360 - 180;
+    return { hue: ((a.hue + arc * f) % 360 + 360) % 360, peak: a.peak + (b.peak - a.peak) * f };
+  };
   const out = {};
   p.steps.forEach((step, i) => {
     const fixed = p.anchor?.[step];
@@ -623,6 +257,7 @@ function lightnessRamp(p) {
     }
     const t = at(i);
     const L = p.lightness[0] + (p.lightness[1] - p.lightness[0]) * (t + (smoothstep(t) - t) * p.curve);
+    const { hue, peak } = hueAndPeak(i);
     out[step] = toHex(L, Math.min(peak * envelope(t, lightBias, p.darkBias) / max, MAX_CHROMA), hue);
   });
   return out;
@@ -638,12 +273,19 @@ function categoricalRamp(steps, gates, anchors) {
 
 // src/engine/scales.ts
 function scale(steps, p) {
-  if (p.step === void 0 === (p.ratio === void 0)) {
-    throw new Error("A scale takes exactly one of `step` and `ratio`");
+  const rules = [p.step, p.ratio, p.factors].filter((r) => r !== void 0);
+  if (rules.length !== 1) {
+    throw new Error("A scale takes exactly one of `step`, `ratio` and `factors`");
+  }
+  if (p.factors && p.factors.length !== steps.length) {
+    throw new Error(`A scale needs one factor per step; got ${p.factors.length} for ${steps.length} steps`);
   }
   const out = {};
   steps.forEach((name, i) => {
-    const v = p.step !== void 0 ? p.base + p.step * i : p.base * p.ratio ** i;
+    let v;
+    if (p.factors !== void 0) v = p.base * p.factors[i];
+    else if (p.step !== void 0) v = p.base + p.step * i;
+    else v = p.base * p.ratio ** i;
     out[name] = `${Math.round(v)}px`;
   });
   return out;
@@ -865,7 +507,7 @@ var SEED_REF2 = /^\{seeds\.([\w-]+)\}$/;
 var REF = /^\{([^}]+)\}$/;
 var HEX2 = /^#[0-9a-f]{6}$/i;
 var UNTYPED = "unknown";
-var PARAMS = ["kind", "steps", "lightness", "curve", "hue", "chroma", "anchor", "gates", "anchors", "base", "step", "ratio"];
+var PARAMS = ["kind", "steps", "lightness", "curve", "hue", "chroma", "anchor", "gates", "anchors", "base", "step", "ratio", "factors"];
 var has = (o, key) => Object.hasOwn(o, key);
 function refName(value) {
   return typeof value === "string" ? REF.exec(value.trim())?.[1] : void 0;
@@ -925,6 +567,14 @@ var Reader = class {
   optNum(x, path, fallback) {
     return x === void 0 ? fallback : this.num(x, path);
   }
+  optNums(x, path) {
+    if (x === void 0) return void 0;
+    if (!Array.isArray(x)) {
+      this.fail(path, "expected an array of numbers");
+      return void 0;
+    }
+    return x.map((v, i) => this.num(v, `${path}.${i}`));
+  }
   record(x, path) {
     if (x === void 0) return {};
     if (typeof x === "object" && x !== null && !Array.isArray(x)) return x;
@@ -1003,9 +653,11 @@ function scaleValues(name, s, steps, issues) {
   const base = read.num(s.base, `${path}.base`);
   const step = read.optNum(s.step, `${path}.step`);
   const ratio = read.optNum(s.ratio, `${path}.ratio`);
+  const factors = read.optNums(s.factors, `${path}.factors`);
   if (!read.ok) return void 0;
   try {
-    return { values: scale(steps, { base, step, ratio }), rule: step !== void 0 ? "linear" : "geometric" };
+    const rule = factors !== void 0 ? "factors" : step !== void 0 ? "linear" : "geometric";
+    return { values: scale(steps, { base, step, ratio, factors }), rule };
   } catch (e) {
     issues.push({ kind: "invalid", path, message: e.message });
     return void 0;
@@ -1229,6 +881,7 @@ function derive(definition, selection = {}, lookup) {
   }
   for (const [name, v] of Object.entries(def.pins ?? {})) {
     const prior = has(tokens, name) ? tokens[name] : void 0;
+    if (prior && !pick(v, sel).ok) continue;
     const token = toToken(v, `pins.${name}`, prior);
     if (!token) {
       if (!prior) failed.add(name);
@@ -1321,7 +974,15 @@ function bakeOver(definition, merged, above, lookup) {
     const value = build(0, {});
     if (value !== void 0) tokens[name] = value;
   }
-  return { name: definition.name, extends: definition.extends ?? null, axes, tokens };
+  const ramps = Object.fromEntries(Object.entries(definition.ramps ?? {}).map(([name, entry]) => [name, declaredSteps(entry)]));
+  return {
+    name: definition.name,
+    extends: definition.extends ?? null,
+    axes,
+    tokens,
+    ...Object.keys(ramps).length > 0 ? { ramps } : {},
+    ...definition.tones !== void 0 ? { tones: definition.tones } : {}
+  };
 }
 
 // src/engine/emit/css.ts
@@ -1511,9 +1172,11 @@ function emitCss(themes) {
 
 // src/engine/emit/dtcg.ts
 var REF3 = /^\{([^}.]+)\}$/;
-var modeOnly = (theme, what) => new Error(`DTCG export supports a mode axis only; ${theme} ${what}`);
 function toDTCG(theme) {
   const axes = themeAxes(theme);
+  const defaults = fullSelection(axes);
+  const nonMode = Object.keys(axes).filter((a) => a !== "mode");
+  const declaredModes = Object.keys(axes.mode?.values ?? {});
   const typeOf = (name) => {
     for (let t = theme; t; t = t.extends) {
       if (!Object.hasOwn(t.tokens, name)) continue;
@@ -1536,23 +1199,52 @@ function toDTCG(theme) {
       ...t.alpha !== void 0 ? { $extensions: { [ALPHA_EXT]: t.alpha } } : {}
     };
   };
-  const branches = (name, v) => {
-    if (!isByAxis(v)) return [];
-    if (v.by !== "mode") throw modeOnly(`"${name}"`, `varies by ${v.by}`);
-    return Object.entries(v).flatMap(([mode, x]) => {
-      if (mode === "by") return [];
-      if (isByAxis(x)) throw modeOnly(`"${name}"`, `varies by ${x.by} inside mode`);
-      return [[mode, x]];
-    });
+  const scan2 = (v, used, modeKeys) => {
+    if (!isByAxis(v)) return;
+    used.add(v.by);
+    for (const [k, x] of Object.entries(v)) {
+      if (k === "by") continue;
+      if (v.by === "mode") modeKeys.add(k);
+      scan2(x, used, modeKeys);
+    }
   };
-  const modes = {};
-  for (const mode of Object.keys(axes.mode?.values ?? {})) modes[mode] = {};
-  const primitives = {};
-  for (const [name, v] of Object.entries(theme.tokens)) {
-    if (!isByAxis(v)) put(primitives, name, v);
-    else for (const [mode, t] of branches(name, v)) put(modes[mode] ??= {}, name, t);
+  const base = { primitives: {}, modes: {} };
+  for (const mode of declaredModes) base.modes[mode] = {};
+  const overrides = {};
+  const varies = {};
+  for (const [name, raw] of Object.entries(theme.tokens)) {
+    const used = /* @__PURE__ */ new Set();
+    const modeKeys = /* @__PURE__ */ new Set();
+    scan2(raw, used, modeKeys);
+    const varying = nonMode.filter((a) => used.has(a));
+    if (varying.length > 0) varies[name] = varying;
+    const modes = used.has("mode") ? [.../* @__PURE__ */ new Set([...declaredModes, ...modeKeys])] : [];
+    for (const combo of enumerateSelections(Object.fromEntries(varying.map((a) => [a, axes[a]])))) {
+      const key = overrideKey(axes, combo);
+      const layer = key === "" ? base : overrides[key] ??= { primitives: {}, modes: {} };
+      const sel = { ...defaults, ...combo };
+      if (modes.length === 0) {
+        const p = pick(raw, sel);
+        if (p.ok) put(layer.primitives, name, p.value);
+        continue;
+      }
+      const picked = modes.map((mode) => [mode, pick(raw, { ...sel, mode })]);
+      const first = picked[0][1];
+      if (first.ok && picked.every(([, p]) => p.ok && p.value === first.value)) {
+        put(layer.primitives, name, first.value);
+        continue;
+      }
+      for (const [mode, p] of picked) if (p.ok) put(layer.modes[mode] ??= {}, name, p.value);
+    }
   }
-  return { name: theme.name, ...axes.mode ? { defaultMode: axes.mode.default } : {}, primitives, modes };
+  const ext = { axes, varies, overrides };
+  return {
+    name: theme.name,
+    ...axes.mode ? { defaultMode: axes.mode.default } : {},
+    primitives: base.primitives,
+    modes: base.modes,
+    ...Object.keys(axes).length > 0 ? { $extensions: { [AXES_EXT]: ext } } : {}
+  };
 }
 
 // src/hooks.ts
@@ -1563,11 +1255,23 @@ var TOKEN_HOOKS = [
     value: "4px",
     description: "Gap between a Disclosure\u2019s twisty and its label."
   },
+  {
+    name: "disclosure-fill",
+    type: "color",
+    value: "var(--wzl-accent-fg)",
+    description: "Fill of a Disclosure\u2019s fold mark."
+  },
   {
     name: "disclosure-target",
     type: "dimension",
     value: "20px",
-    description: "Hit-target square of a Disclosure twisty, and of a labkit LayerList row\u2019s."
+    description: "Hit-target square of a Disclosure twisty, and the twisty column of a LayerList row."
+  },
+  {
+    name: "input-surface",
+    type: "color",
+    value: "var(--wzl-surface-sunken)",
+    description: "Surface a text Input\u2019s frame sits on. Set it on any container whose own background is the default \u2014 a sunken rail or panel \u2014 where an unset field is the same color as what is behind it."
   },
   {
     name: "number-field-width",
@@ -1575,6 +1279,36 @@ var TOKEN_HOOKS = [
     value: "9ch",
     description: "Width of a NumberField\u2019s input."
   },
+  {
+    name: "params-label-align",
+    type: "string",
+    value: "start",
+    description: "Text alignment of row labels in PropertyPanel, Prefs and labkit\u2019s ControlPanel."
+  },
+  {
+    name: "params-label-case",
+    type: "string",
+    value: "uppercase",
+    description: "text-transform of every label and title in PropertyPanel, Prefs and labkit\u2019s ControlPanel."
+  },
+  {
+    name: "params-label-tracking",
+    type: "dimension",
+    value: "var(--wzl-tracking-wide)",
+    description: "Letter spacing of every label and title in PropertyPanel, Prefs and labkit\u2019s ControlPanel. Unset, rows take --wzl-tracking-wide and titles --wzl-tracking-wider."
+  },
+  {
+    name: "params-label-width",
+    type: "dimension",
+    value: "auto",
+    description: "Inline size of row labels in PropertyPanel, Prefs and labkit\u2019s ControlPanel."
+  },
+  {
+    name: "prefs-rail-width",
+    type: "dimension",
+    value: "216px",
+    description: "Width of the Prefs navigation rail."
+  },
   {
     name: "prefs-column-width",
     type: "dimension",
@@ -1587,6 +1321,12 @@ var TOKEN_HOOKS = [
     value: "9ch",
     description: "Width of a numeric field in the Properties panel."
   },
+  {
+    name: "prop-row-h",
+    type: "dimension",
+    value: "20px",
+    description: "Floor under every Properties row, whatever control it holds. Unset, it is the panel\u2019s own field height, so it follows density \u2014 20px at the default one."
+  },
   {
     name: "prop-text-width",
     type: "dimension",
@@ -1596,8 +1336,20 @@ var TOKEN_HOOKS = [
   {
     name: "property-readout-w",
     type: "dimension",
-    value: "2.8em",
-    description: "Minimum width of a Properties row\u2019s value readout."
+    value: "calc(4.5ch + 2px)",
+    description: "Width of a Properties row\u2019s value readout \u2014 four digits, so the controls beside a column of readouts end on one line. A range whose widest value needs more widens its own readout."
+  },
+  {
+    name: "select-border",
+    type: "border",
+    value: "1px solid var(--wzl-border)",
+    description: "Border of a Select\u2019s trigger. Unset, a boxed trigger draws --wzl-border and a bare one a transparent border of the same width."
+  },
+  {
+    name: "select-fg",
+    type: "color",
+    value: "var(--wzl-fg)",
+    description: "Text color of a Select\u2019s trigger."
   },
   {
     name: "swatch-size",
@@ -1616,11 +1368,21 @@ var TOKEN_HOOKS = [
     type: "dimension",
     value: "32px",
     description: "Width reserved for the Timeline\u2019s value axis."
+  },
+  {
+    name: "tree-indent",
+    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."
   }
 ];
 
 // src/engine/emit/manifest.ts
-var groupOf = (name) => name.includes("-") ? name.slice(0, name.indexOf("-")) : name;
+var MERGED_GROUPS = { danger: "status", warning: "status", success: "status" };
+var groupOf = (name) => {
+  const prefix = name.includes("-") ? name.slice(0, name.indexOf("-")) : name;
+  return MERGED_GROUPS[prefix] ?? prefix;
+};
 var row = (name, type, value, description, hook) => `  { name: '--wzl-${name}', type: ${JSON.stringify(type)}, group: ${JSON.stringify(groupOf(name))}, defaultValue: ${JSON.stringify(value)}, description: ${JSON.stringify(description)}, hook: ${hook} },`;
 function emitManifest({ baked }) {
   const all = pickAll(baked.tokens, fullSelection(baked.axes, {}));
@@ -1756,6 +1518,28 @@ function generateTokens(definitions) {
   };
 }
 
-export { CHROMA_WEIGHT, DEFAULT_CONSTRAINTS, anchorFromHex, axisDependencies, bake, bakeChain, categoricalRamp, chromaCap, contrast, cssValue, declaredSteps, deltaE, derive, emitCss, emitManifest, emitThemes, floorDegrees, generate, generateTokens, hexToRgb, hueGap, hueName, lightnessRamp, luminance, mergeChain, scale, toDTCG, toHex, toHexPreview, toLab, toLch, vividAt };
+// src/store.ts
+var serializeDefinition = (definition) => `${JSON.stringify(definition, null, 2)}
+`;
+function httpThemeApi(base = document.baseURI, fetchImpl = (input, init) => fetch(input, init)) {
+  const url = (path) => new URL(`__theme/${path}`, base).toString();
+  const read = async (response) => {
+    if (!response.ok && response.status !== 409 && response.status !== 400) throw new Error(`${response.status} ${response.statusText}`);
+    return await response.json();
+  };
+  return {
+    list: async () => (await read(await fetchImpl(url("list"), void 0))).themes,
+    get: async (name) => read(await fetchImpl(url(name), void 0)),
+    put: async (name, definition, baseHash) => read(
+      await fetchImpl(url(name), {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ definition, hash: baseHash })
+      })
+    )
+  };
+}
+
+export { axisDependencies, bake, bakeChain, categoricalRamp, cssValue, declaredSteps, derive, emitCss, emitManifest, emitThemes, generateTokens, httpThemeApi, lightnessRamp, mergeChain, scale, serializeDefinition, toDTCG };
 //# sourceMappingURL=engine.js.map
 //# sourceMappingURL=engine.js.map