@kitlangton/knobs 0.4.0-next.0 → 0.4.0-next.1

package/dist/themes.js

@@ -1,3 +1,1470 @@
+// src/tokens/color.ts
+var clamp01 = (x) => Math.min(1, Math.max(0, x));
+var toLinear = (c) => c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+var toGamma = (c) => c <= 0.0031308 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055;
+function linearToOklch([r, g, b, a]) {
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+  const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
+  const A = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
+  const B = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
+  const c = Math.hypot(A, B);
+  const h = c < 0.0000001 ? 0 : (Math.atan2(B, A) * 180 / Math.PI + 360) % 360;
+  return { l: L, c, h, alpha: a };
+}
+function oklchToLinear({ l: L, c, h, alpha = 1 }) {
+  const hr = h * Math.PI / 180;
+  const A = c * Math.cos(hr);
+  const B = c * Math.sin(hr);
+  const l = (L + 0.3963377774 * A + 0.2158037573 * B) ** 3;
+  const m = (L - 0.1055613458 * A - 0.0638541728 * B) ** 3;
+  const s = (L - 0.0894841775 * A - 1.291485548 * B) ** 3;
+  return [
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s,
+    alpha
+  ];
+}
+var inGamut = ([r, g, b]) => [r, g, b].every((x) => x >= -0.00001 && x <= 1 + 0.00001);
+function oklchToLinearInGamut(color) {
+  let rgb = oklchToLinear(color);
+  if (inGamut(rgb))
+    return clampRgba(rgb);
+  let lo = 0;
+  let hi = color.c;
+  for (let i = 0;i < 24; i++) {
+    const mid = (lo + hi) / 2;
+    rgb = oklchToLinear({ ...color, c: mid });
+    if (inGamut(rgb))
+      lo = mid;
+    else
+      hi = mid;
+  }
+  return clampRgba(oklchToLinear({ ...color, c: lo }));
+}
+var clampRgba = ([r, g, b, a]) => [clamp01(r), clamp01(g), clamp01(b), clamp01(a)];
+function parseColor(input) {
+  const s = input.trim().toLowerCase();
+  if (s === "transparent")
+    return [0, 0, 0, 0];
+  if (s.startsWith("#")) {
+    let hex = s.slice(1);
+    if (hex.length === 3 || hex.length === 4)
+      hex = [...hex].map((ch) => ch + ch).join("");
+    if (!/^[0-9a-f]{6}([0-9a-f]{2})?$/.test(hex))
+      throw new Error(`Invalid colour: ${input}`);
+    const n = (i) => Number.parseInt(hex.slice(i, i + 2), 16) / 255;
+    return [toLinear(n(0)), toLinear(n(2)), toLinear(n(4)), hex.length === 8 ? n(6) : 1];
+  }
+  const fn = /^(oklch|rgba?)\(([^)]*)\)$/.exec(s);
+  if (!fn)
+    throw new Error(`Unsupported colour: ${input}`);
+  const parts = fn[2].split(/[\s,/]+/).filter(Boolean);
+  const num = (p, scale) => p === undefined ? 1 : p.endsWith("%") ? Number.parseFloat(p) / 100 : Number.parseFloat(p) / scale;
+  if (fn[1] === "oklch") {
+    const l = num(parts[0], 1);
+    return oklchToLinearInGamut({
+      l,
+      c: Number.parseFloat(parts[1]),
+      h: Number.parseFloat(parts[2]),
+      alpha: num(parts[3], 1)
+    });
+  }
+  return [
+    toLinear(num(parts[0], 255)),
+    toLinear(num(parts[1], 255)),
+    toLinear(num(parts[2], 255)),
+    num(parts[3], 1)
+  ];
+}
+var toOklch = (input) => linearToOklch(parseColor(input));
+var byte = (c) => Math.round(clamp01(c) * 255).toString(16).padStart(2, "0");
+function formatHex([r, g, b, a]) {
+  const rgb = `#${byte(toGamma(r))}${byte(toGamma(g))}${byte(toGamma(b))}`;
+  return a >= 0.9995 ? rgb : rgb + byte(a);
+}
+var oklchToHex = (color) => formatHex(oklchToLinearInGamut(color));
+var normalize = (input) => formatHex(parseColor(input));
+function withAlpha(input, alpha) {
+  const [r, g, b, a] = parseColor(input);
+  return formatHex([r, g, b, a * alpha]);
+}
+function over(top, bottom) {
+  const t = parseColor(top);
+  const b = parseColor(bottom);
+  const a = t[3];
+  const mix = (i) => toLinear(toGamma(t[i]) * a + toGamma(b[i]) * (1 - a));
+  return formatHex([mix(0), mix(1), mix(2), 1]);
+}
+function apcaY(input) {
+  const [r, g, b] = parseColor(input).map(toGamma);
+  return 0.2126729 * r ** 2.4 + 0.7151522 * g ** 2.4 + 0.072175 * b ** 2.4;
+}
+function apca(text, background) {
+  const bgOpaque = parseColor(background)[3] < 1 ? over(background, "#000") : background;
+  const fg = parseColor(text)[3] < 1 ? over(text, bgOpaque) : text;
+  const soft = (y) => y > 0.022 ? y : y + (0.022 - y) ** 1.414;
+  const yt = soft(apcaY(fg));
+  const yb = soft(apcaY(bgOpaque));
+  if (Math.abs(yb - yt) < 0.0005)
+    return 0;
+  if (yb > yt) {
+    const sapc = (yb ** 0.56 - yt ** 0.57) * 1.14;
+    return sapc < 0.1 ? 0 : (sapc - 0.027) * 100;
+  }
+  const sapc = (yb ** 0.65 - yt ** 0.62) * 1.14;
+  return sapc > -0.1 ? 0 : -(sapc + 0.027) * 100;
+}
+
+// src/tokens/schema.ts
+var theme = { from: "theme" };
+var css = (s) => ({ css: s });
+var value = (s) => ({ value: s });
+var alpha = (pct, of = "var(--k-fg)") => `color-mix(in oklch,${of} calc(${pct}% * var(--k-contrast)),transparent)`;
+var TOKENS = [
+  {
+    name: "accent",
+    tier: "input",
+    type: "color",
+    group: "Accent",
+    source: theme,
+    doc: "The one accent: primary actions, handles, focus. Hover, soft and selection derive from it in CSS.",
+    deprecated: ["--ku-accent"]
+  },
+  {
+    name: "contrast",
+    tier: "input",
+    type: "number",
+    group: "Inputs",
+    source: theme,
+    doc: "Contrast multiplier for fills and alpha borders (1 = default; the theme's 0–100 dial maps 50 → 1)."
+  },
+  {
+    name: "radius",
+    tier: "input",
+    type: "length",
+    group: "Shape",
+    source: theme,
+    doc: "Control corner radius. 0 squares everything, including capsules. Scales with density.",
+    deprecated: ["--ku-radius"],
+    resolve: "round(calc($ * (1 + (var(--_k-density) - 1) * 1.5)),2px)"
+  },
+  {
+    name: "density",
+    tier: "input",
+    type: "number",
+    group: "Size",
+    source: theme,
+    doc: "Size multiplier: compact .875, default 1, comfortable 1.1875."
+  },
+  {
+    name: "font",
+    tier: "input",
+    type: "font",
+    group: "Type",
+    source: theme,
+    doc: "UI font stack.",
+    deprecated: ["--ku-font"]
+  },
+  {
+    name: "mono",
+    tier: "input",
+    type: "font",
+    group: "Type",
+    source: theme,
+    doc: "Monospace font stack.",
+    deprecated: ["--ku-mono"]
+  },
+  {
+    name: "bg-page",
+    tier: "semantic",
+    type: "color",
+    group: "Surfaces",
+    source: theme,
+    doc: "The page behind panels; workspace backdrops.",
+    deprecated: ["--k-page", "--ku-page"]
+  },
+  {
+    name: "bg-inset",
+    tier: "semantic",
+    type: "color",
+    group: "Surfaces",
+    source: theme,
+    doc: "Wells sunk into a panel: tracks, inputs, segmented backgrounds."
+  },
+  {
+    name: "bg",
+    tier: "semantic",
+    type: "color",
+    group: "Surfaces",
+    source: theme,
+    doc: "The panel surface.",
+    deprecated: ["--ku-bg"]
+  },
+  {
+    name: "bg-raised",
+    tier: "semantic",
+    type: "color",
+    group: "Surfaces",
+    source: theme,
+    doc: "Raised within a panel: the active segment, cards on a panel."
+  },
+  {
+    name: "bg-overlay",
+    tier: "semantic",
+    type: "color",
+    group: "Surfaces",
+    source: theme,
+    doc: "Floating surfaces: menus, popovers, tooltips."
+  },
+  {
+    name: "fill",
+    tier: "semantic",
+    type: "color",
+    group: "Fills",
+    source: css(alpha(5.5)),
+    doc: "Resting fill for controls.",
+    deprecated: ["--k-surface", "--ku-surface"]
+  },
+  {
+    name: "fill-hover",
+    tier: "semantic",
+    type: "color",
+    group: "Fills",
+    source: css(alpha(8)),
+    doc: "Hovered fill."
+  },
+  {
+    name: "fill-selected",
+    tier: "semantic",
+    type: "color",
+    group: "Fills",
+    source: css(alpha(11)),
+    doc: "Pressed or selected fill.",
+    deprecated: ["--k-surface-hi", "--ku-surface-hi"]
+  },
+  {
+    name: "fg",
+    tier: "semantic",
+    type: "color",
+    group: "Foreground",
+    source: theme,
+    doc: "Primary text and icons (≥ Lc 90 on bg).",
+    deprecated: ["--k-text", "--ku-text"]
+  },
+  {
+    name: "fg-2",
+    tier: "semantic",
+    type: "color",
+    group: "Foreground",
+    source: theme,
+    doc: "Secondary text: labels (≥ Lc 75).",
+    deprecated: ["--k-label", "--ku-label"]
+  },
+  {
+    name: "fg-3",
+    tier: "semantic",
+    type: "color",
+    group: "Foreground",
+    source: theme,
+    doc: "Tertiary text: metadata, units, captions (≥ Lc 45).",
+    deprecated: ["--k-dim", "--ku-dim"]
+  },
+  {
+    name: "fg-4",
+    tier: "semantic",
+    type: "color",
+    group: "Foreground",
+    source: theme,
+    doc: "Placeholder and disabled text (≥ Lc 30)."
+  },
+  {
+    name: "border-subtle",
+    tier: "semantic",
+    type: "color",
+    group: "Borders",
+    source: css(alpha(6)),
+    doc: "Hairline edges and dividers (below Lc 15 by design).",
+    deprecated: ["--k-edge"]
+  },
+  {
+    name: "border",
+    tier: "semantic",
+    type: "color",
+    group: "Borders",
+    source: css(alpha(10)),
+    doc: "Default borders.",
+    deprecated: ["--k-line", "--ku-line"]
+  },
+  {
+    name: "border-strong",
+    tier: "semantic",
+    type: "color",
+    group: "Borders",
+    source: theme,
+    doc: "Interactive edges (≥ Lc 15; solid).",
+    deprecated: ["--k-line-hi", "--ku-line-hi"]
+  },
+  {
+    name: "accent-hover",
+    tier: "semantic",
+    type: "color",
+    group: "Accent",
+    source: css("color-mix(in oklch,var(--k-accent) 90%,var(--k-bg))"),
+    doc: "Hovered accent."
+  },
+  {
+    name: "accent-soft",
+    tier: "semantic",
+    type: "color",
+    group: "Accent",
+    source: css("color-mix(in oklch,var(--k-accent) 15%,transparent)"),
+    doc: "Accent tint behind accent content."
+  },
+  {
+    name: "accent-fg",
+    tier: "semantic",
+    type: "color",
+    group: "Accent",
+    source: theme,
+    doc: "Accent as text on bg (≥ Lc 60)."
+  },
+  {
+    name: "on-accent",
+    tier: "semantic",
+    type: "color",
+    group: "Accent",
+    source: theme,
+    doc: "Content placed on a solid accent."
+  },
+  { name: "ok", tier: "semantic", type: "color", group: "Status", source: theme, doc: "Success." },
+  {
+    name: "warn",
+    tier: "semantic",
+    type: "color",
+    group: "Status",
+    source: theme,
+    doc: "Warning.",
+    deprecated: ["--ku-warn"]
+  },
+  {
+    name: "danger",
+    tier: "semantic",
+    type: "color",
+    group: "Status",
+    source: theme,
+    doc: "Error, destructive. Put text on danger-soft rather than bare bg.",
+    deprecated: ["--k-critical", "--ku-critical"]
+  },
+  {
+    name: "info",
+    tier: "semantic",
+    type: "color",
+    group: "Status",
+    source: theme,
+    doc: "Informational."
+  },
+  {
+    name: "ok-soft",
+    tier: "semantic",
+    type: "color",
+    group: "Status",
+    source: css("color-mix(in oklch,var(--k-ok) 15%,transparent)"),
+    doc: "Success tint."
+  },
+  {
+    name: "warn-soft",
+    tier: "semantic",
+    type: "color",
+    group: "Status",
+    source: css("color-mix(in oklch,var(--k-warn) 15%,transparent)"),
+    doc: "Warning tint."
+  },
+  {
+    name: "danger-soft",
+    tier: "semantic",
+    type: "color",
+    group: "Status",
+    source: css("color-mix(in oklch,var(--k-danger) 15%,transparent)"),
+    doc: "Danger tint."
+  },
+  {
+    name: "info-soft",
+    tier: "semantic",
+    type: "color",
+    group: "Status",
+    source: css("color-mix(in oklch,var(--k-info) 15%,transparent)"),
+    doc: "Info tint."
+  },
+  {
+    name: "focus",
+    tier: "semantic",
+    type: "color",
+    group: "Interaction",
+    source: css("var(--k-accent)"),
+    doc: "Focus ring colour (drawn as a 2px bg gap, then 2px of focus)."
+  },
+  {
+    name: "selection",
+    tier: "semantic",
+    type: "color",
+    group: "Interaction",
+    source: css("color-mix(in oklch,var(--k-accent) 24%,transparent)"),
+    doc: "Selected rows and ranges.",
+    deprecated: ["--k-ui-select", "--ku-select"]
+  },
+  {
+    name: "scrim",
+    tier: "semantic",
+    type: "color",
+    group: "Interaction",
+    source: theme,
+    doc: "Dimming behind modal layers."
+  },
+  {
+    name: "diff-add",
+    tier: "semantic",
+    type: "color",
+    group: "Data",
+    source: css("var(--k-ok)"),
+    doc: "Added lines; line and word tints derive privately (12% / 38%)."
+  },
+  {
+    name: "diff-del",
+    tier: "semantic",
+    type: "color",
+    group: "Data",
+    source: css("var(--k-danger)"),
+    doc: "Deleted lines."
+  },
+  {
+    name: "diff-mod",
+    tier: "semantic",
+    type: "color",
+    group: "Data",
+    source: css("var(--k-warn)"),
+    doc: "Modified lines."
+  },
+  {
+    name: "series-1",
+    tier: "semantic",
+    type: "color",
+    group: "Data",
+    source: theme,
+    doc: "Chart series 1."
+  },
+  {
+    name: "series-2",
+    tier: "semantic",
+    type: "color",
+    group: "Data",
+    source: theme,
+    doc: "Chart series 2."
+  },
+  {
+    name: "series-3",
+    tier: "semantic",
+    type: "color",
+    group: "Data",
+    source: theme,
+    doc: "Chart series 3."
+  },
+  {
+    name: "series-4",
+    tier: "semantic",
+    type: "color",
+    group: "Data",
+    source: theme,
+    doc: "Chart series 4."
+  },
+  {
+    name: "series-5",
+    tier: "semantic",
+    type: "color",
+    group: "Data",
+    source: theme,
+    doc: "Chart series 5."
+  },
+  {
+    name: "series-6",
+    tier: "semantic",
+    type: "color",
+    group: "Data",
+    source: theme,
+    doc: "Chart series 6."
+  },
+  {
+    name: "radius-panel",
+    tier: "semantic",
+    type: "length",
+    group: "Shape",
+    source: css("calc(var(--k-radius) + var(--k-unit))"),
+    doc: "Panel and card radius, concentric with controls.",
+    deprecated: ["--k-panel-radius", "--ku-panel-radius"]
+  },
+  {
+    name: "round",
+    tier: "semantic",
+    type: "length",
+    group: "Shape",
+    source: css("calc(var(--k-radius) * 999)"),
+    doc: "Capsule radius that squares when --k-radius is 0. Use instead of 999px."
+  },
+  {
+    name: "unit",
+    tier: "semantic",
+    type: "length",
+    group: "Size",
+    source: value("4px"),
+    doc: "The spacing unit."
+  },
+  {
+    name: "row",
+    tier: "semantic",
+    type: "length",
+    group: "Size",
+    source: css("round(calc(32px * var(--k-density)),2px)"),
+    doc: "Row height.",
+    deprecated: ["--ku-row"]
+  },
+  {
+    name: "width",
+    tier: "semantic",
+    type: "length",
+    group: "Size",
+    source: value("288px"),
+    doc: "Panel width."
+  },
+  {
+    name: "font-size",
+    tier: "semantic",
+    type: "length",
+    group: "Type",
+    source: css("round(calc(12px * (1 + (var(--k-density) - 1) * .5)),1px)"),
+    doc: "Body size; a 5-step scale derives privately.",
+    deprecated: ["--ku-font-size"]
+  },
+  {
+    name: "value-font",
+    tier: "semantic",
+    type: "font",
+    group: "Type",
+    source: css("var(--k-font)"),
+    doc: "Font for readouts and values (labPreset: mono).",
+    deprecated: ["--ku-value-font"]
+  },
+  {
+    name: "shadow-raised",
+    tier: "semantic",
+    type: "shadow",
+    group: "Material",
+    source: theme,
+    doc: "Small lift for raised controls.",
+    deprecated: ["--k-lift-shadow"]
+  },
+  {
+    name: "shadow-overlay",
+    tier: "semantic",
+    type: "shadow",
+    group: "Material",
+    source: theme,
+    doc: "Floating panels, menus, popovers.",
+    deprecated: ["--k-shadow", "--ku-shadow"]
+  },
+  {
+    name: "glass",
+    tier: "semantic",
+    type: "number",
+    group: "Material",
+    source: theme,
+    doc: "Backdrop glass amount (0 = opaque)."
+  },
+  {
+    name: "glow",
+    tier: "semantic",
+    type: "number",
+    group: "Material",
+    source: theme,
+    doc: "Specular glow amount."
+  },
+  {
+    name: "rim",
+    tier: "semantic",
+    type: "color",
+    group: "Material",
+    source: theme,
+    doc: "Top-edge highlight hairline.",
+    deprecated: ["--ku-rim"]
+  },
+  {
+    name: "spring",
+    tier: "semantic",
+    type: "spring",
+    group: "Motion",
+    source: value("0.3 0"),
+    doc: "Default spring as `duration bounce` (the motion module's `default`)."
+  },
+  {
+    name: "hover-in",
+    tier: "semantic",
+    type: "number",
+    group: "Motion",
+    source: value("0"),
+    doc: "Hover wash fade-in, unitless milliseconds.",
+    deprecated: ["--ku-hover-in"]
+  },
+  {
+    name: "hover-out",
+    tier: "semantic",
+    type: "number",
+    group: "Motion",
+    source: value("120"),
+    doc: "Hover wash fade-out, unitless milliseconds.",
+    deprecated: ["--ku-hover-out"]
+  },
+  {
+    name: "z",
+    tier: "semantic",
+    type: "integer",
+    group: "Motion",
+    source: value("2147480000"),
+    doc: "Base of knobs' stacking ladder; layers add small offsets."
+  },
+  {
+    name: "slider-track",
+    tier: "hook",
+    type: "color",
+    group: "Hooks",
+    source: css("var(--k-fill)"),
+    doc: "Slider track."
+  },
+  {
+    name: "slider-fill",
+    tier: "hook",
+    type: "color",
+    group: "Hooks",
+    source: css("color-mix(in oklch,var(--k-accent) 20%,var(--k-fill-selected))"),
+    doc: "Slider value fill.",
+    deprecated: ["--k-fill-rest"]
+  },
+  {
+    name: "slider-handle",
+    tier: "hook",
+    type: "color",
+    group: "Hooks",
+    source: css("var(--k-accent)"),
+    doc: "Slider handle and range thumbs.",
+    deprecated: ["--k-handle"]
+  },
+  {
+    name: "toggle-thumb-off",
+    tier: "hook",
+    type: "color",
+    group: "Hooks",
+    source: css("#ffffff"),
+    doc: "A switch's thumb while off, and the ring around colour and gradient thumbs.",
+    deprecated: ["--k-thumb"]
+  },
+  {
+    name: "toggle-track",
+    tier: "hook",
+    type: "color",
+    group: "Hooks",
+    source: css("var(--k-fill-selected)"),
+    doc: "Toggle track, off."
+  },
+  {
+    name: "toggle-track-on",
+    tier: "hook",
+    type: "color",
+    group: "Hooks",
+    source: css("var(--k-accent)"),
+    doc: "Toggle track, on."
+  },
+  {
+    name: "toggle-thumb",
+    tier: "hook",
+    type: "color",
+    group: "Hooks",
+    source: css("var(--k-on-accent)"),
+    doc: "Toggle thumb."
+  },
+  {
+    name: "segmented-track",
+    tier: "hook",
+    type: "color",
+    group: "Hooks",
+    source: css("var(--k-bg-inset)"),
+    doc: "Segmented control background.",
+    deprecated: ["--k-seg-bg", "--ku-seg-bg"]
+  },
+  {
+    name: "segmented-active",
+    tier: "hook",
+    type: "color",
+    group: "Hooks",
+    source: css("var(--k-bg-raised)"),
+    doc: "Active segment.",
+    deprecated: ["--k-seg-active"]
+  },
+  {
+    name: "timeline-playhead",
+    tier: "hook",
+    type: "color",
+    group: "Hooks",
+    source: css("var(--k-accent)"),
+    doc: "Timeline playhead."
+  },
+  {
+    name: "split-gutter",
+    tier: "hook",
+    type: "color",
+    group: "Hooks",
+    source: css("var(--k-border-subtle)"),
+    doc: "Split pane divider.",
+    deprecated: ["--k-ui-divider", "--ku-divider"]
+  },
+  {
+    name: "compare-divider",
+    tier: "hook",
+    type: "color",
+    group: "Hooks",
+    source: css("var(--k-fg)"),
+    doc: "Before/after divider line.",
+    deprecated: ["--k-compare-line"]
+  },
+  {
+    name: "compare-stage",
+    tier: "hook",
+    type: "color",
+    group: "Hooks",
+    source: css("var(--k-fill)"),
+    doc: "Compare stage background."
+  },
+  {
+    name: "activity-rail",
+    tier: "hook",
+    type: "color",
+    group: "Hooks",
+    source: css("var(--k-border-strong)"),
+    doc: "Activity rail line.",
+    deprecated: ["--k-activity-line"]
+  },
+  {
+    name: "picker-card",
+    tier: "hook",
+    type: "color",
+    group: "Hooks",
+    source: css("var(--k-fill)"),
+    doc: "Picker card."
+  },
+  {
+    name: "pane-bg",
+    tier: "hook",
+    type: "color",
+    group: "Hooks",
+    source: css("var(--k-bg)"),
+    doc: "knobs/ui pane card.",
+    deprecated: ["--k-ui-pane", "--ku-pane-bg"]
+  },
+  {
+    name: "button-bg",
+    tier: "hook",
+    type: "color",
+    group: "Hooks",
+    source: css("var(--k-fill)"),
+    doc: "Button fill."
+  },
+  {
+    name: "button-border",
+    tier: "hook",
+    type: "color",
+    group: "Hooks",
+    source: css("transparent"),
+    doc: "Button border.",
+    deprecated: ["--k-button-line"]
+  },
+  {
+    name: "button-fg",
+    tier: "hook",
+    type: "color",
+    group: "Hooks",
+    source: css("var(--k-fg)"),
+    doc: "Button text.",
+    deprecated: ["--k-button-color"]
+  },
+  {
+    name: "row-hover",
+    tier: "hook",
+    type: "color",
+    group: "Hooks",
+    source: css("color-mix(in oklch,var(--k-fill) 50%,transparent)"),
+    doc: "Row hover wash."
+  },
+  {
+    name: "group-label",
+    tier: "hook",
+    type: "color",
+    group: "Hooks",
+    source: css("var(--k-fg-3)"),
+    doc: "Folder and group headings.",
+    deprecated: ["--k-group-ink", "--k-group-color"]
+  },
+  {
+    name: "modified",
+    tier: "hook",
+    type: "color",
+    group: "Hooks",
+    source: css("var(--k-fg-3)"),
+    doc: "Marker for values changed from their default."
+  },
+  {
+    name: "tray-pad",
+    tier: "private",
+    type: "length",
+    group: "Private",
+    source: css("calc(var(--k-unit) * .5)"),
+    doc: "Padding inside a tray around its controls.",
+    deprecated: ["--k-tray-pad"]
+  },
+  {
+    name: "pad",
+    tier: "private",
+    type: "length",
+    group: "Private",
+    source: css("round(calc(10px * var(--k-density)),2px)"),
+    doc: "Panel padding.",
+    deprecated: ["--k-pad"]
+  },
+  {
+    name: "inset",
+    tier: "private",
+    type: "length",
+    group: "Private",
+    source: css("var(--_k-pad)"),
+    doc: "Row content inset.",
+    deprecated: ["--k-inset", "--ku-inset"]
+  },
+  {
+    name: "gap",
+    tier: "private",
+    type: "length",
+    group: "Private",
+    source: css("round(calc(var(--k-unit) * (1 + (var(--k-density) - 1) * 2.5)),1px)"),
+    doc: "Gap between rows.",
+    deprecated: ["--k-gap"]
+  },
+  {
+    name: "radius-md",
+    tier: "private",
+    type: "length",
+    group: "Private",
+    source: css("max(0px,calc(var(--k-radius) - var(--_k-tray-pad)))"),
+    doc: "Concentric radius one tray in.",
+    deprecated: ["--k-radius-md"]
+  },
+  {
+    name: "radius-sm",
+    tier: "private",
+    type: "length",
+    group: "Private",
+    source: css("max(0px,calc(var(--k-radius) - var(--_k-tray-pad) * 2))"),
+    doc: "Concentric radius two trays in.",
+    deprecated: ["--k-radius-sm"]
+  },
+  {
+    name: "control-h",
+    tier: "private",
+    type: "length",
+    group: "Private",
+    source: css("calc(var(--k-row) - var(--k-unit) * 2)"),
+    doc: "Control height inside a row.",
+    deprecated: ["--k-control-h", "--ku-control-h"]
+  },
+  {
+    name: "value-size",
+    tier: "private",
+    type: "length",
+    group: "Private",
+    source: css("calc(var(--k-font-size) - .5px)"),
+    doc: "Readout size.",
+    deprecated: ["--k-value-size", "--ku-value-size"]
+  },
+  {
+    name: "text-title",
+    tier: "private",
+    type: "length",
+    group: "Private",
+    source: css("calc(var(--k-font-size) + 1px)"),
+    doc: "Type scale: titles.",
+    deprecated: ["--k-text-title"]
+  },
+  {
+    name: "text-body",
+    tier: "private",
+    type: "length",
+    group: "Private",
+    source: css("var(--k-font-size)"),
+    doc: "Type scale: body.",
+    deprecated: ["--k-text-body"]
+  },
+  {
+    name: "text-control",
+    tier: "private",
+    type: "length",
+    group: "Private",
+    source: css("calc(var(--k-font-size) - .5px)"),
+    doc: "Type scale: controls.",
+    deprecated: ["--k-text-control"]
+  },
+  {
+    name: "text-meta",
+    tier: "private",
+    type: "length",
+    group: "Private",
+    source: css("calc(var(--k-font-size) - 1px)"),
+    doc: "Type scale: metadata.",
+    deprecated: ["--k-text-meta", "--ku-text-meta"]
+  },
+  {
+    name: "text-cap",
+    tier: "private",
+    type: "length",
+    group: "Private",
+    source: css("calc(var(--k-font-size) - 2px)"),
+    doc: "Type scale: caps and captions.",
+    deprecated: ["--k-text-cap"]
+  },
+  {
+    name: "weight",
+    tier: "private",
+    type: "number",
+    group: "Private",
+    source: value("400"),
+    doc: "Body weight.",
+    deprecated: ["--k-font-weight", "--ku-font-weight"]
+  },
+  {
+    name: "weight-label",
+    tier: "private",
+    type: "number",
+    group: "Private",
+    source: value("500"),
+    doc: "Label weight.",
+    deprecated: ["--k-label-weight", "--ku-label-weight"]
+  },
+  {
+    name: "weight-title",
+    tier: "private",
+    type: "number",
+    group: "Private",
+    source: value("600"),
+    doc: "Title weight.",
+    deprecated: ["--k-title-weight", "--ku-title-weight"]
+  },
+  {
+    name: "focus-ring",
+    tier: "private",
+    type: "shadow",
+    group: "Private",
+    source: css("0 0 0 2px var(--k-bg),0 0 0 4px var(--k-focus)"),
+    doc: "Two-layer focus ring: a bg gap, then the focus colour."
+  },
+  {
+    name: "diff-add-line",
+    tier: "private",
+    type: "color",
+    group: "Private",
+    source: css("color-mix(in oklch,var(--k-diff-add) 12%,transparent)"),
+    doc: "Added line tint."
+  },
+  {
+    name: "diff-add-word",
+    tier: "private",
+    type: "color",
+    group: "Private",
+    source: css("color-mix(in oklch,var(--k-diff-add) 38%,transparent)"),
+    doc: "Added word tint."
+  },
+  {
+    name: "diff-del-line",
+    tier: "private",
+    type: "color",
+    group: "Private",
+    source: css("color-mix(in oklch,var(--k-diff-del) 12%,transparent)"),
+    doc: "Deleted line tint."
+  },
+  {
+    name: "diff-del-word",
+    tier: "private",
+    type: "color",
+    group: "Private",
+    source: css("color-mix(in oklch,var(--k-diff-del) 38%,transparent)"),
+    doc: "Deleted word tint."
+  },
+  {
+    name: "diff-mod-line",
+    tier: "private",
+    type: "color",
+    group: "Private",
+    source: css("color-mix(in oklch,var(--k-diff-mod) 12%,transparent)"),
+    doc: "Modified line tint."
+  },
+  {
+    name: "diff-mod-word",
+    tier: "private",
+    type: "color",
+    group: "Private",
+    source: css("color-mix(in oklch,var(--k-diff-mod) 38%,transparent)"),
+    doc: "Modified word tint."
+  }
+];
+var TOKEN_BY_NAME = new Map(TOKENS.map((t) => [t.name, t]));
+var cssName = (t) => `${t.tier === "private" ? "--_k-" : "--k-"}${t.name}`;
+var PROPERTY_TO_NAME = new Map(TOKENS.map((t) => [cssName(t), t.name]));
+var tokenForProperty = (property) => PROPERTY_TO_NAME.get(property);
+var DEPRECATED = new Map(TOKENS.flatMap((t) => (t.deprecated ?? []).map((old) => [old, cssName(t)])));
+
+// src/tokens/css.ts
+function pair(def, dark, light) {
+  if (dark === undefined && light === undefined)
+    return;
+  if (dark === undefined || light === undefined || dark === light || def.type !== "color")
+    return dark ?? light;
+  return `light-dark(${light},${dark})`;
+}
+function declaredValue(theme, def) {
+  const name = def.name;
+  const dark = theme.declared.dark[name];
+  const light = theme.declared.light[name];
+  if (def.type === "color" && dark === undefined !== (light === undefined))
+    return pair(def, dark ?? theme.dark[name], light ?? theme.light[name]);
+  return pair(def, dark, light);
+}
+var SCHEMES = [
+  [":where(.knobs-root)", "light dark"],
+  [
+    ':where(.dark,.dark-theme,[data-theme="dark"],[data-appearance="dark"],[data-knobs-theme="dark"]) :where(.knobs-root)',
+    "dark"
+  ],
+  [
+    ':where(.light,.light-theme,[data-theme="light"],[data-appearance="light"],[data-knobs-theme="light"]) :where(.knobs-root)',
+    "light"
+  ],
+  [":where(.knobs-root) :where(.knobs-root:not([data-appearance]))", "inherit"],
+  [':where(.knobs-root[data-appearance="dark"])', "dark"],
+  [':where(.knobs-root[data-appearance="light"])', "light"],
+  [':where(.knobs-root[data-appearance="system"])', "light dark"],
+  [':where(.knobs-root[data-appearance="inherit"])', "inherit"]
+];
+var APPEARANCE_CSS = SCHEMES.map(([selector, scheme]) => {
+  const light = scheme === "light" ? "1" : scheme === "inherit" ? "inherit" : "0";
+  const rule = `${selector}{color-scheme:${scheme};--_k-light:${light}}`;
+  return scheme === "light dark" ? `${rule}
+@media(prefers-color-scheme:light){${selector}{--_k-light:1}}` : rule;
+}).join(`
+`);
+var privately = (css) => css.replace(/var\(--k-([a-z0-9-]+)/g, (m, name) => tokenForProperty(`--k-${name}`) ? `var(--_k-${name}` : m);
+function resolver(def) {
+  const reads = [...def.deprecated ?? []];
+  if (def.tier !== "private")
+    reads.push(cssName(def));
+  const source = def.source;
+  const fallback = "css" in source ? privately(source.css) : ("value" in source) && def.tier === "private" ? source.value : undefined;
+  let out = fallback ?? "";
+  for (let i = reads.length - 1;i >= 0; i--)
+    out = out === "" ? `var(${reads[i]})` : `var(${reads[i]},${out})`;
+  return def.resolve ? privately(def.resolve).replaceAll("$", out) : out;
+}
+function tokensCss(theme) {
+  const root = [];
+  const resolved = [];
+  for (const def of TOKENS) {
+    const source = def.source;
+    const own = declaredValue(theme, def) ?? ("from" in source ? "" : ("value" in source) && def.tier !== "private" ? source.value : undefined);
+    if (own !== undefined && def.tier !== "private")
+      root.push(`${cssName(def)}:${own}`);
+    resolved.push(`--_k-${def.name}:${resolver(def)}`);
+  }
+  return `@layer knobs.tokens{
+:where(:root,:host){${root.join(";")}}
+:where(.knobs-root){${resolved.join(";")}}
+${APPEARANCE_CSS}
+}`;
+}
+function themeCss(theme, selector) {
+  const decls = [];
+  for (const def of TOKENS) {
+    const own = declaredValue(theme, def);
+    if (own !== undefined)
+      decls.push(`${cssName(def)}:${own}`);
+  }
+  return `@layer knobs.tokens{${selector}{${decls.join(";")}}}`;
+}
+
+// src/tokens/evaluate.ts
+function splitTop(s) {
+  const out = [];
+  let depth = 0;
+  let start = 0;
+  for (let i = 0;i < s.length; i++) {
+    const ch = s[i];
+    if (ch === "(")
+      depth++;
+    else if (ch === ")")
+      depth--;
+    else if (ch === "," && depth === 0) {
+      out.push(s.slice(start, i).trim());
+      start = i + 1;
+    }
+  }
+  out.push(s.slice(start).trim());
+  return out;
+}
+var call = (s, fn) => s.startsWith(`${fn}(`) && s.endsWith(")") ? s.slice(fn.length + 1, -1) : undefined;
+function evaluate(input, lookup) {
+  const s = input.trim();
+  const v = call(s, "var");
+  if (v !== undefined) {
+    const [name, ...fallback] = splitTop(v);
+    const value = lookup(name);
+    if (value !== undefined)
+      return evaluate(value, lookup);
+    if (fallback.length)
+      return evaluate(fallback.join(","), lookup);
+    throw new Error(`Unresolved ${name}`);
+  }
+  const mix = call(s, "color-mix");
+  if (mix !== undefined)
+    return colorMix(mix, lookup);
+  return normalize(s);
+}
+function percent(s, lookup) {
+  const c = call(s, "calc");
+  if (c === undefined)
+    return Number.parseFloat(s) / 100;
+  const [a, b] = c.split("*").map((x) => x.trim());
+  const num = (x) => {
+    const inner = call(x, "var");
+    if (inner !== undefined)
+      return Number.parseFloat(lookup(splitTop(inner)[0]) ?? Number.NaN.toString());
+    return x.endsWith("%") ? Number.parseFloat(x) / 100 : Number.parseFloat(x);
+  };
+  const out = num(a) * num(b);
+  if (!Number.isFinite(out))
+    throw new Error(`Bad percentage: ${s}`);
+  return out;
+}
+function stop(s, lookup) {
+  const m = /^(.*?)\s+((?:calc\(.*\))|(?:[\d.]+%))$/.exec(s);
+  if (!m)
+    return { color: evaluate(s, lookup) };
+  return { color: evaluate(m[1], lookup), p: percent(m[2], lookup) };
+}
+function colorMix(args, lookup) {
+  const [space, a, b] = splitTop(args);
+  if (space !== "in oklch")
+    throw new Error(`Only color-mix(in oklch, …) is supported, got ${space}`);
+  const x = stop(a, lookup);
+  const y = stop(b, lookup);
+  let p1 = x.p ?? (y.p === undefined ? 0.5 : 1 - y.p);
+  let p2 = y.p ?? 1 - p1;
+  const sum = p1 + p2;
+  const scale = sum < 1 ? sum : 1;
+  p1 /= sum;
+  p2 /= sum;
+  const ca = linearToOklch(parseColor(x.color));
+  const cb = linearToOklch(parseColor(y.color));
+  const a1 = ca.alpha ?? 1;
+  const a2 = cb.alpha ?? 1;
+  const alpha = a1 * p1 + a2 * p2;
+  if (alpha <= 0)
+    return "#00000000";
+  const powerless = (c, alpha) => c.c < 0.0002 || alpha === 0;
+  const h1 = powerless(ca, a1) ? cb.h : ca.h;
+  const h2 = powerless(cb, a2) ? h1 : cb.h;
+  let dh = h2 - h1;
+  if (dh > 180)
+    dh -= 360;
+  if (dh < -180)
+    dh += 360;
+  const pre = (u, v) => (u * a1 * p1 + v * a2 * p2) / alpha;
+  const rgb = oklchToLinear({
+    l: pre(ca.l, cb.l),
+    c: pre(ca.c, cb.c),
+    h: (h1 + dh * p2 + 360) % 360
+  });
+  return formatHex([rgb[0], rgb[1], rgb[2], alpha * scale]);
+}
+
+// src/themes/define.ts
+var DEFAULT_SANS = 'system-ui,-apple-system,"SF Pro Text",sans-serif';
+var DEFAULT_MONO = '"SF Mono",SFMono-Regular,ui-monospace,Menlo,monospace';
+var BASE = {
+  gray: { hue: 0, chroma: 0 },
+  accent: "#ffffff",
+  contrast: 50,
+  radius: 8,
+  density: "default",
+  material: "solid",
+  font: { sans: DEFAULT_SANS, mono: DEFAULT_MONO },
+  tokens: { dark: {}, light: {} }
+};
+var DENSITY = { compact: 0.875, default: 1, comfortable: 1.1875 };
+var SURFACES = {
+  dark: { "bg-page": 14.5, "bg-inset": 19.6, bg: 22.6, "bg-raised": 25.7, "bg-overlay": 28.1 },
+  light: { "bg-page": 92.6, "bg-inset": 94.6, bg: 97.1, "bg-raised": 100, "bg-overlay": 100 }
+};
+var INKS = {
+  dark: { fg: 99.7, "fg-2": 76.7, "fg-3": 48.4, "fg-4": 31.9, "border-strong": 15.8 },
+  light: { fg: 98.35, "fg-2": 78, "fg-3": 50, "fg-4": 34, "border-strong": 17 }
+};
+var APCA_BUDGET = {
+  fg: 90,
+  "fg-2": 75,
+  "fg-3": 45,
+  "fg-4": 30,
+  "accent-fg": 60,
+  "border-strong": 15
+};
+var TINT = { surface: { dark: 0.5, light: 0.7 }, fg: 1.35, ink: 1.5, border: 1.25 };
+var STATUS = {
+  dark: {
+    ok: [78, 0.15, 155],
+    warn: [83, 0.14, 80],
+    danger: [70, 0.18, 25],
+    info: [75, 0.13, 240]
+  },
+  light: {
+    ok: [52, 0.14, 150],
+    warn: [60, 0.14, 65],
+    danger: [55, 0.2, 27],
+    info: [53, 0.15, 245]
+  }
+};
+var SERIES_HUES = [250, 155, 75, 25, 305, 195];
+var SERIES = { dark: { l: 74, c: 0.12 }, light: { l: 56, c: 0.14 } };
+var contrastMultiplier = (contrast) => 0.5 + Math.min(100, Math.max(0, contrast)) / 100;
+function fontStack(family, fallback) {
+  if (family.includes(","))
+    return family;
+  const quoted = /\s/.test(family) && !/^["']/.test(family) ? `"${family}"` : family;
+  return family === fallback ? family : `${quoted},${fallback}`;
+}
+function mergeInputs(parent, spec) {
+  return {
+    gray: { ...parent.gray, ...spec.gray },
+    accent: spec.accent ?? parent.accent,
+    contrast: spec.contrast ?? parent.contrast,
+    radius: spec.radius ?? parent.radius,
+    density: spec.density ?? parent.density,
+    material: spec.material ?? parent.material,
+    font: {
+      sans: spec.font?.sans ? fontStack(spec.font.sans, DEFAULT_SANS) : parent.font.sans,
+      mono: spec.font?.mono ? fontStack(spec.font.mono, DEFAULT_MONO) : parent.font.mono
+    },
+    tokens: {
+      dark: { ...parent.tokens.dark, ...spec.tokens?.dark },
+      light: { ...parent.tokens.light, ...spec.tokens?.light }
+    }
+  };
+}
+function meet(l, floor, bg, away, make) {
+  let x = l;
+  while (apca(make(x), bg) < floor + 0.5 && x >= 0 && x <= 100)
+    x += away * 0.25;
+  return make(Math.min(100, Math.max(0, x)));
+}
+function solve(target, bg, away, make) {
+  let near = toOklch(bg).l * 100;
+  let far = away > 0 ? 100 : 0;
+  if (apca(make(far), bg) <= target)
+    return far;
+  for (let i = 0;i < 30; i++) {
+    const mid = (near + far) / 2;
+    if (apca(make(mid), bg) < target)
+      near = mid;
+    else
+      far = mid;
+  }
+  return far;
+}
+function accentPair(inputs) {
+  if (typeof inputs.accent !== "string")
+    return { ...inputs.accent };
+  const dark = inputs.accent;
+  const o = toOklch(dark);
+  const light = o.c < 0.02 ? oklchToHex({ l: 0.227, c: inputs.gray.chroma, h: inputs.gray.hue }) : oklchToHex({ l: Math.min(0.6, Math.max(0.45, o.l - 0.15)), c: o.c * 1.1, h: o.h });
+  return { dark, light };
+}
+function generate(inputs, appearance, accent) {
+  const m = contrastMultiplier(inputs.contrast);
+  const { hue, chroma } = inputs.gray;
+  const neutral = (l, tint) => oklchToHex({ l: l / 100, c: chroma * tint, h: hue });
+  const user = inputs.tokens[appearance];
+  const out = {};
+  const surfaces = SURFACES[appearance];
+  for (const [role, l] of Object.entries(surfaces)) {
+    const spread = surfaces.bg + (l - surfaces.bg) * m;
+    out[role] = user[role] ?? neutral(Math.min(100, Math.max(0, spread)), TINT.surface[appearance]);
+  }
+  const bg = out.bg;
+  const away = appearance === "dark" ? 1 : -1;
+  const inkSpread = 1 + (m - 1) * 0.4;
+  for (const [role, target] of Object.entries(INKS[appearance])) {
+    const tint = role === "fg" ? TINT.fg : role === "border-strong" ? TINT.border : TINT.ink;
+    const make = (x) => neutral(x, tint);
+    const l = solve(target * inkSpread, bg, away, make);
+    out[role] = meet(l, APCA_BUDGET[role], bg, away, make);
+  }
+  out.accent = accent;
+  const a = toOklch(accent);
+  out["accent-fg"] = meet(a.l * 100, APCA_BUDGET["accent-fg"], bg, away, (x) => oklchToHex({ l: x / 100, c: a.c, h: a.h }));
+  out["on-accent"] = apca("#111111", accent) >= apca("#ffffff", accent) ? "#111111" : "#ffffff";
+  for (const [role, [l, c, h]] of Object.entries(STATUS[appearance]))
+    out[role] = oklchToHex({ l: l / 100, c, h });
+  const s = SERIES[appearance];
+  const start = a.c >= 0.04 ? a.h - SERIES_HUES[0] : 0;
+  SERIES_HUES.forEach((h, i) => {
+    out[`series-${i + 1}`] = oklchToHex({ l: s.l / 100, c: s.c, h: (h + start + 360) % 360 });
+  });
+  out.scrim = appearance === "dark" ? "#00000099" : "#00000040";
+  out.contrast = String(Math.round(m * 1000) / 1000);
+  out.radius = `${inputs.radius}px`;
+  out.density = String(DENSITY[inputs.density]);
+  out.font = inputs.font.sans;
+  out.mono = inputs.font.mono;
+  const material = inputs.material;
+  out.glass = material === "glass" ? "0.6" : "0";
+  out.glow = material === "glass" ? "0.5" : "0";
+  out.rim = material === "flat" ? "transparent" : appearance === "dark" ? "#ffffff1a" : "#ffffff99";
+  if (material === "flat") {
+    out["border-subtle"] = over(withAlpha(out.fg, 0.06 * m), bg);
+    out.border = over(withAlpha(out.fg, 0.1 * m), bg);
+  }
+  return out;
+}
+function shadows(material, borderStrong) {
+  if (material === "flat")
+    return {
+      "shadow-raised": "none",
+      "shadow-overlay": `0 0 0 1px light-dark(${borderStrong.light},${borderStrong.dark})`
+    };
+  return {
+    "shadow-raised": "0 1px 2px light-dark(#0000001f,#00000029)",
+    "shadow-overlay": "0 12px 36px light-dark(#00000024,#00000085),0 1px 2px light-dark(#00000014,#0000004d)"
+  };
+}
+function resolve(declared) {
+  const raw = (name) => {
+    const def = TOKEN_BY_NAME.get(name);
+    const own = declared[name];
+    if (own !== undefined)
+      return own;
+    const source = def.source;
+    if ("css" in source)
+      return source.css;
+    if ("value" in source)
+      return source.value;
+    throw new Error(`Theme does not supply ${name}`);
+  };
+  const lookup = (property) => {
+    const name = tokenForProperty(property);
+    return name ? raw(name) : undefined;
+  };
+  const out = {};
+  for (const t of TOKENS)
+    out[t.name] = t.type === "color" ? evaluate(raw(t.name), lookup) : raw(t.name);
+  return out;
+}
+function gpuOf(resolved) {
+  const out = {};
+  for (const t of TOKENS)
+    if (t.type === "color")
+      out[t.name] = parseColor(resolved[t.name]);
+  return out;
+}
+function validate(name, inputs) {
+  if (!/^[\w-]+$/.test(name))
+    throw new Error(`Invalid theme name: ${name}`);
+  if (name === "dark" || name === "light")
+    throw new Error(`Reserved theme name: ${name}`);
+  for (const appearance of ["dark", "light"])
+    for (const key of Object.keys(inputs.tokens[appearance]))
+      if (!TOKEN_BY_NAME.has(key))
+        throw new Error(`Unknown token in theme ${name}: ${key}`);
+}
+function defineTheme(spec) {
+  const inputs = mergeInputs(spec.extends?.inputs ?? BASE, spec);
+  validate(spec.name, inputs);
+  const accent = accentPair(inputs);
+  const generated = {
+    dark: generate(inputs, "dark", accent.dark),
+    light: generate(inputs, "light", accent.light)
+  };
+  const material = shadows(inputs.material, {
+    dark: inputs.tokens.dark["border-strong"] ?? generated.dark["border-strong"],
+    light: inputs.tokens.light["border-strong"] ?? generated.light["border-strong"]
+  });
+  const declared = {
+    dark: { ...generated.dark, ...material, ...inputs.tokens.dark },
+    light: { ...generated.light, ...material, ...inputs.tokens.light }
+  };
+  for (const [key, dark] of Object.entries(declared.dark)) {
+    const def = TOKEN_BY_NAME.get(key);
+    const light = declared.light[key];
+    if (def.type !== "color" && light !== undefined && light !== dark)
+      throw new Error(`Theme ${spec.name}: only colours may differ by appearance (${key})`);
+  }
+  const dark = resolve(declared.dark);
+  const light = resolve(declared.light);
+  const theme = {
+    name: spec.name,
+    inputs,
+    dark,
+    light,
+    declared,
+    gpu: { dark: gpuOf(dark), light: gpuOf(light) },
+    css: (options) => options?.selector ? themeCss(theme, options.selector) : tokensCss(theme)
+  };
+  return theme;
+}
+
+// src/themes/knobs.ts
+var knobs = defineTheme({
+  name: "knobs",
+  gray: { hue: 285, chroma: 0.004 },
+  accent: { dark: "#ffffff", light: "#1c1c1e" },
+  contrast: 50,
+  radius: 8,
+  density: "default",
+  material: "glass"
+});
+
+// src/themes/void.ts
+var voidTheme = defineTheme({
+  name: "void",
+  extends: knobs,
+  gray: { hue: 0, chroma: 0 },
+  accent: { dark: "#ffffff", light: "#1c1c1c" },
+  material: "flat",
+  tokens: {
+    dark: {
+      "bg-page": "#000000",
+      "bg-inset": "#0a0a0a",
+      bg: "#000000",
+      "bg-raised": "#1c1c1e",
+      "bg-overlay": "#2c2c2e",
+      fg: "#ededed",
+      "fg-2": "#cecece",
+      "fg-3": "#989898",
+      "fg-4": "#7a7a7a",
+      "compare-stage": "#000000"
+    }
+  }
+});
 // src/core/spring.ts
 class Spring {
   x;
@@ -81,13 +1548,20 @@ function springCss(value) {
 }
 
 // src/core/theme.ts
-var block = (tokens) => Object.entries(tokens).map(([k, v]) => `${k.startsWith("--") || k === "color-scheme" ? k : `--k-${k}`}:${v}`).join(";");
+var property = (k) => k.startsWith("--") ? k : `--k-${k}`;
 function presetCss(preset) {
   if (!/^[\w-]+$/.test(preset.name))
     throw new Error(`Invalid preset name: ${preset.name}`);
-  const at = `.knobs-panel[data-preset="${preset.name}"]`;
-  const light = preset.light ? `:where(.knobs-panel)[data-preset="${preset.name}"][data-theme="light"],` + `:where([data-knobs-theme="light"]) ${at}:not([data-theme="dark"]),` + `:where(:root[data-theme="light"]) ${at}[data-theme="auto"]{${block(preset.light)}}` + `@media(prefers-color-scheme:light){:where(:root:not([data-theme="dark"])) ${at}[data-theme="auto"]{${block(preset.light)}}}` : "";
-  return `${at}{${block(preset.dark)}}${light}${(preset.css ?? "").replaceAll("&", at)}`;
+  const at = `.knobs-root[data-preset="${preset.name}"]`;
+  const light = preset.light ?? {};
+  const decls = Object.entries(preset.dark).map(([k, dark]) => {
+    const l = light[k];
+    return l === undefined || String(l) === String(dark) ? `${property(k)}:${dark}` : `${property(k)}:light-dark(${l},${dark})`;
+  });
+  for (const [k, l] of Object.entries(light))
+    if (!(k in preset.dark) && k !== "color-scheme")
+      decls.push(`${property(k)}:${l}`);
+  return `${at}{${decls.join(";")}}${(preset.css ?? "").replaceAll("&", at)}`;
 }
 var glide = /* @__PURE__ */ springCss({ duration: 0.185, bounce: 0.14 });
 var labPreset = {
@@ -127,6 +1601,7 @@ var labPreset = {
     glass: 0,
     glow: 0,
     lift: 0,
+    "lift-shadow": "none",
     blur: 0.6,
     "hover-in": 0,
     "hover-out": 120,
@@ -145,6 +1620,27 @@ var labPreset = {
     "disabled-opacity": 0.38,
     "curve-guide": "dashed",
     "curve-dot": 0
+  },
+  light: {
+    bg: "#f5f5f7",
+    page: "#e6e6eb",
+    surface: "rgba(0,0,0,calc(.05 * var(--k-contrast,1)))",
+    "surface-hi": "rgba(0,0,0,calc(.095 * var(--k-contrast,1)))",
+    line: "rgba(0,0,0,calc(.1 * var(--k-contrast,1)))",
+    "line-hi": "rgba(0,0,0,calc(.2 * var(--k-contrast,1)))",
+    text: "rgba(0,0,0,.88)",
+    label: "rgba(60,60,67,.68)",
+    dim: "rgba(60,60,67,.5)",
+    accent: "#2f6fe4",
+    modified: "#2f6fe4",
+    "seg-bg": "rgba(0,0,0,.065)",
+    "seg-active": "#fff",
+    "toggle-track": "rgba(0,0,0,.14)",
+    "toggle-thumb": "#fff",
+    thumb: "#fff",
+    rim: "transparent",
+    "group-color": "rgba(60,60,67,.68)",
+    "group-divider": "rgba(0,0,0,.1)"
   }
 };
 var problemsPreset = {
@@ -224,12 +1720,18 @@ var problemsPreset = {
     "toggle-thumb": "#fff",
     rim: "transparent",
     "group-color": "rgba(60,60,67,.66)",
-    "group-divider": "rgba(0,0,0,.07)",
-    "color-scheme": "light"
+    "group-divider": "rgba(0,0,0,.07)"
   }
 };
+// src/themes/index.ts
+var themes = { knobs, void: voidTheme };
 export {
+  APCA_BUDGET,
+  defineTheme,
+  knobs,
   labPreset,
   presetCss,
-  problemsPreset
+  problemsPreset,
+  themes,
+  voidTheme
 };