@weasel-js/theme 1.4.4 → 1.5.1

package/dist/react.d.ts

@@ -1,17 +1,19 @@
 import React from 'react';
-import { T as Theme, a as ResolvedTheme } from './resolveTheme-CFentlRY.js';
+import { T as Theme, S as Selection } from './theme-BtpBHcUg.js';
+import { R as ResolvedTheme } from './resolveTheme-CHnPdh8W.js';
 
-/** What `<ThemeProvider>` publishes: the theme, the mode in force, and the
+/** What `<ThemeProvider>` publishes: the theme, the full selection in force, and the
  *  fully resolved token record for that pair. */
 interface ThemeContextValue {
     readonly theme: Theme;
-    readonly mode: string;
+    readonly selection: Selection;
     readonly resolved: ResolvedTheme;
 }
 /** Props for `<ThemeProvider>`. */
 interface ThemeProviderProps {
     readonly theme?: Theme;
-    readonly mode?: string;
+    /** Axis values, e.g. `{ mode: 'light' }`. A missing axis takes its default. */
+    readonly selection?: Selection;
     /** Applied to the wrapper element, so it can be the layout element too. */
     readonly className?: string;
     readonly style?: React.CSSProperties;
@@ -27,7 +29,7 @@ interface ThemeProviderProps {
  * nesting your own div inside — an anonymous div between a flex parent and
  * its child breaks percentage heights.
  */
-declare function ThemeProvider({ theme, mode, className, style, children, }: ThemeProviderProps): React.ReactElement;
+declare function ThemeProvider({ theme, selection, className, style, children, }: ThemeProviderProps): React.ReactElement;
 /** The theme in force. Throws outside a `<ThemeProvider>`; use
  *  `useThemeOptional` where the provider is not guaranteed. */
 declare function useTheme(): ThemeContextValue;

package/dist/react.js

@@ -1,35 +1,30 @@
-import { weaselTheme, resolveTheme, applyTheme } from './chunk-D6AFL2JW.js';
+import { weaselTheme, applyTheme } from './chunk-YBHW5LZM.js';
+import { themeAxes, fullSelection, selectionKey, resolveTheme } from './chunk-LL2ERJPZ.js';
 import { createContext, useRef, useMemo, useLayoutEffect, useContext } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 var ThemeContext = createContext(null);
 function ThemeProvider({
   theme = weaselTheme,
-  mode,
+  selection,
   className,
   style,
   children
 }) {
   const ref = useRef(null);
-  const effectiveMode = mode ?? theme.defaultMode;
+  const axes = themeAxes(theme);
+  const full = fullSelection(axes, selection);
+  const key = selectionKey(axes, full);
   const value = useMemo(
-    () => ({ theme, mode: effectiveMode, resolved: resolveTheme(theme, effectiveMode) }),
-    [theme, effectiveMode]
+    () => ({ theme, selection: full, resolved: resolveTheme(theme, full) }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [theme, key]
   );
   useLayoutEffect(() => {
-    if (ref.current) applyTheme(ref.current, theme, effectiveMode);
-  }, [theme, effectiveMode]);
-  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className,
-      style,
-      "data-wzl-theme": theme.name,
-      "data-wzl-mode": effectiveMode,
-      children
-    }
-  ) });
+    if (ref.current) applyTheme(ref.current, theme, value.selection);
+  }, [theme, value]);
+  const attrs = Object.fromEntries(Object.keys(axes).map((a) => [`data-wzl-${a}`, full[a]]));
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { ref, className, style, "data-wzl-theme": theme.name, ...attrs, children }) });
 }
 function useTheme() {
   const ctx = useContext(ThemeContext);

package/dist/react.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/react.tsx"],"names":[],"mappings":";;;;AAaA,IAAM,YAAA,GAAe,cAAwC,IAAI,CAAA;AAsB1D,SAAS,aAAA,CAAc;AAAA,EAC5B,KAAA,GAAQ,WAAA;AAAA,EACR,IAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAA,EAA2C;AACzC,EAAA,MAAM,GAAA,GAAM,OAAuB,IAAI,CAAA;AACvC,EAAA,MAAM,aAAA,GAAgB,QAAQ,KAAA,CAAM,WAAA;AAEpC,EAAA,MAAM,KAAA,GAAQ,OAAA;AAAA,IACZ,OAAO,EAAE,KAAA,EAAO,IAAA,EAAM,eAAe,QAAA,EAAU,YAAA,CAAa,KAAA,EAAO,aAAa,CAAA,EAAE,CAAA;AAAA,IAClF,CAAC,OAAO,aAAa;AAAA,GACvB;AAEA,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,IAAI,IAAI,OAAA,EAAS,UAAA,CAAW,GAAA,CAAI,OAAA,EAAS,OAAO,aAAa,CAAA;AAAA,EAC/D,CAAA,EAAG,CAAC,KAAA,EAAO,aAAa,CAAC,CAAA;AAEzB,EAAA,uBACE,GAAA,CAAC,YAAA,CAAa,QAAA,EAAb,EAAsB,KAAA,EACrB,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA;AAAA,MACA,KAAA;AAAA,MACA,kBAAgB,KAAA,CAAM,IAAA;AAAA,MACtB,eAAA,EAAe,aAAA;AAAA,MAEd;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;AAIO,SAAS,QAAA,GAA8B;AAC5C,EAAA,MAAM,GAAA,GAAM,WAAW,YAAY,CAAA;AACnC,EAAA,IAAI,CAAC,GAAA,EAAK,MAAM,IAAI,MAAM,gDAAgD,CAAA;AAC1E,EAAA,OAAO,GAAA;AACT;AASO,SAAS,gBAAA,GAA6C;AAC3D,EAAA,OAAO,WAAW,YAAY,CAAA;AAChC","file":"react.js","sourcesContent":["import React, { createContext, useContext, useMemo, useRef, useLayoutEffect } from 'react';\nimport { applyTheme } from './applyTheme';\nimport { resolveTheme, type ResolvedTheme } from './resolveTheme';\nimport { weaselTheme, type Theme } from './theme';\n\n/** What `<ThemeProvider>` publishes: the theme, the mode in force, and the\n *  fully resolved token record for that pair. */\nexport interface ThemeContextValue {\n  readonly theme: Theme;\n  readonly mode: string;\n  readonly resolved: ResolvedTheme;\n}\n\nconst ThemeContext = createContext<ThemeContextValue | null>(null);\n\n/** Props for `<ThemeProvider>`. */\nexport interface ThemeProviderProps {\n  readonly theme?: Theme;\n  readonly mode?: string;\n  /** Applied to the wrapper element, so it can be the layout element too. */\n  readonly className?: string;\n  readonly style?: React.CSSProperties;\n  readonly children: React.ReactNode;\n}\n\n/**\n * Applies a theme to a wrapper element and publishes the resolved record.\n *\n * Consumers that draw outside the DOM (the WebGL HUD) read `resolved` and\n * never touch `getComputedStyle`.\n *\n * The wrapper is a real element in the layout. Pass `className` rather than\n * nesting your own div inside — an anonymous div between a flex parent and\n * its child breaks percentage heights.\n */\nexport function ThemeProvider({\n  theme = weaselTheme,\n  mode,\n  className,\n  style,\n  children,\n}: ThemeProviderProps): React.ReactElement {\n  const ref = useRef<HTMLDivElement>(null);\n  const effectiveMode = mode ?? theme.defaultMode;\n\n  const value = useMemo<ThemeContextValue>(\n    () => ({ theme, mode: effectiveMode, resolved: resolveTheme(theme, effectiveMode) }),\n    [theme, effectiveMode],\n  );\n\n  useLayoutEffect(() => {\n    if (ref.current) applyTheme(ref.current, theme, effectiveMode);\n  }, [theme, effectiveMode]);\n\n  return (\n    <ThemeContext.Provider value={value}>\n      <div\n        ref={ref}\n        className={className}\n        style={style}\n        data-wzl-theme={theme.name}\n        data-wzl-mode={effectiveMode}\n      >\n        {children}\n      </div>\n    </ThemeContext.Provider>\n  );\n}\n\n/** The theme in force. Throws outside a `<ThemeProvider>`; use\n *  `useThemeOptional` where the provider is not guaranteed. */\nexport function useTheme(): ThemeContextValue {\n  const ctx = useContext(ThemeContext);\n  if (!ctx) throw new Error('useTheme must be used inside a <ThemeProvider>');\n  return ctx;\n}\n\n/**\n * The theme if one is provided, `null` otherwise.\n *\n * For kit internals that should follow a theme when the app supplies one but\n * must still work in an app that never mounted a provider — `useHud` is the\n * motivating case.\n */\nexport function useThemeOptional(): ThemeContextValue | null {\n  return useContext(ThemeContext);\n}\n"]}
+{"version":3,"sources":["../src/react.tsx"],"names":[],"mappings":";;;;;AAcA,IAAM,YAAA,GAAe,cAAwC,IAAI,CAAA;AAuB1D,SAAS,aAAA,CAAc;AAAA,EAC5B,KAAA,GAAQ,WAAA;AAAA,EACR,SAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAA,EAA2C;AACzC,EAAA,MAAM,GAAA,GAAM,OAAuB,IAAI,CAAA;AACvC,EAAA,MAAM,IAAA,GAAO,UAAU,KAAK,CAAA;AAC5B,EAAA,MAAM,IAAA,GAAO,aAAA,CAAc,IAAA,EAAM,SAAS,CAAA;AAE1C,EAAA,MAAM,GAAA,GAAM,YAAA,CAAa,IAAA,EAAM,IAAI,CAAA;AAEnC,EAAA,MAAM,KAAA,GAAQ,OAAA;AAAA,IACZ,OAAO,EAAE,KAAA,EAAO,SAAA,EAAW,MAAM,QAAA,EAAU,YAAA,CAAa,KAAA,EAAO,IAAI,CAAA,EAAE,CAAA;AAAA;AAAA,IAErE,CAAC,OAAO,GAAG;AAAA,GACb;AAEA,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,IAAI,IAAI,OAAA,EAAS,UAAA,CAAW,IAAI,OAAA,EAAS,KAAA,EAAO,MAAM,SAAS,CAAA;AAAA,EACjE,CAAA,EAAG,CAAC,KAAA,EAAO,KAAK,CAAC,CAAA;AAEjB,EAAA,MAAM,QAAQ,MAAA,CAAO,WAAA,CAAY,OAAO,IAAA,CAAK,IAAI,EAAE,GAAA,CAAI,CAAC,CAAA,KAAM,CAAC,YAAY,CAAC,CAAA,CAAA,EAAI,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;AACzF,EAAA,2BACG,YAAA,CAAa,QAAA,EAAb,EAAsB,KAAA,EACrB,8BAAC,KAAA,EAAA,EAAI,GAAA,EAAU,SAAA,EAAsB,KAAA,EAAc,kBAAgB,KAAA,CAAM,IAAA,EAAO,GAAG,KAAA,EAChF,UACH,CAAA,EACF,CAAA;AAEJ;AAIO,SAAS,QAAA,GAA8B;AAC5C,EAAA,MAAM,GAAA,GAAM,WAAW,YAAY,CAAA;AACnC,EAAA,IAAI,CAAC,GAAA,EAAK,MAAM,IAAI,MAAM,gDAAgD,CAAA;AAC1E,EAAA,OAAO,GAAA;AACT;AASO,SAAS,gBAAA,GAA6C;AAC3D,EAAA,OAAO,WAAW,YAAY,CAAA;AAChC","file":"react.js","sourcesContent":["import React, { createContext, useContext, useMemo, useRef, useLayoutEffect } from 'react';\nimport { applyTheme } from './applyTheme';\nimport { fullSelection, selectionKey, type Selection } from './axes';\nimport { resolveTheme, themeAxes, type ResolvedTheme } from './resolveTheme';\nimport { weaselTheme, type Theme } from './theme';\n\n/** What `<ThemeProvider>` publishes: the theme, the full selection in force, and the\n *  fully resolved token record for that pair. */\nexport interface ThemeContextValue {\n  readonly theme: Theme;\n  readonly selection: Selection;\n  readonly resolved: ResolvedTheme;\n}\n\nconst ThemeContext = createContext<ThemeContextValue | null>(null);\n\n/** Props for `<ThemeProvider>`. */\nexport interface ThemeProviderProps {\n  readonly theme?: Theme;\n  /** Axis values, e.g. `{ mode: 'light' }`. A missing axis takes its default. */\n  readonly selection?: Selection;\n  /** Applied to the wrapper element, so it can be the layout element too. */\n  readonly className?: string;\n  readonly style?: React.CSSProperties;\n  readonly children: React.ReactNode;\n}\n\n/**\n * Applies a theme to a wrapper element and publishes the resolved record.\n *\n * Consumers that draw outside the DOM (the WebGL HUD) read `resolved` and\n * never touch `getComputedStyle`.\n *\n * The wrapper is a real element in the layout. Pass `className` rather than\n * nesting your own div inside — an anonymous div between a flex parent and\n * its child breaks percentage heights.\n */\nexport function ThemeProvider({\n  theme = weaselTheme,\n  selection,\n  className,\n  style,\n  children,\n}: ThemeProviderProps): React.ReactElement {\n  const ref = useRef<HTMLDivElement>(null);\n  const axes = themeAxes(theme);\n  const full = fullSelection(axes, selection);\n  // Keyed on the selection's content: callers pass a fresh object every render.\n  const key = selectionKey(axes, full);\n\n  const value = useMemo<ThemeContextValue>(\n    () => ({ theme, selection: full, resolved: resolveTheme(theme, full) }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [theme, key],\n  );\n\n  useLayoutEffect(() => {\n    if (ref.current) applyTheme(ref.current, theme, value.selection);\n  }, [theme, value]);\n\n  const attrs = Object.fromEntries(Object.keys(axes).map((a) => [`data-wzl-${a}`, full[a]]));\n  return (\n    <ThemeContext.Provider value={value}>\n      <div ref={ref} className={className} style={style} data-wzl-theme={theme.name} {...attrs}>\n        {children}\n      </div>\n    </ThemeContext.Provider>\n  );\n}\n\n/** The theme in force. Throws outside a `<ThemeProvider>`; use\n *  `useThemeOptional` where the provider is not guaranteed. */\nexport function useTheme(): ThemeContextValue {\n  const ctx = useContext(ThemeContext);\n  if (!ctx) throw new Error('useTheme must be used inside a <ThemeProvider>');\n  return ctx;\n}\n\n/**\n * The theme if one is provided, `null` otherwise.\n *\n * For kit internals that should follow a theme when the app supplies one but\n * must still work in an app that never mounted a provider — `useHud` is the\n * motivating case.\n */\nexport function useThemeOptional(): ThemeContextValue | null {\n  return useContext(ThemeContext);\n}\n"]}

package/dist/{resolveTheme-CFentlRY.d.ts → resolveTheme-CHnPdh8W.d.ts}

@@ -1,37 +1,36 @@
-type TokenValue = string | number | readonly (string | number)[];
-/**
- * A single design token as authored, before aliases are resolved: a DTCG-shaped
- * `{ type, value }` pair where `value` may still be a `{ref}` to another token.
- */
-interface RawToken {
-    readonly type: string;
-    readonly value: TokenValue;
-    /** Render the referenced color at this alpha, 0–1. */
-    readonly alpha?: number | undefined;
-    readonly description?: string | undefined;
-}
-/** A token graph flattened to one level, keyed by token name (no `--wzl-`
- *  prefix). Still unresolved — see `ResolvedTokenMap` for the output side. */
-type FlatTokens = Record<string, RawToken>;
+import { B as BakedTheme, b as AxisDefs, f as ThemeDefinition, T as Theme, S as Selection } from './theme-BtpBHcUg.js';
 
 /** Every design token the built-in themes declare, spelled as the CSS
  *  custom property it becomes. */
-type TokenName = '--wzl-accent' | '--wzl-accent-base' | '--wzl-accent-fg' | '--wzl-accent-hover' | '--wzl-accent-soft' | '--wzl-accent-strong' | '--wzl-backdrop' | '--wzl-border' | '--wzl-border-raised' | '--wzl-border-strong' | '--wzl-border-w' | '--wzl-control-h' | '--wzl-curve-color' | '--wzl-curve-width' | '--wzl-danger' | '--wzl-danger-base' | '--wzl-ease-in-cubic' | '--wzl-ease-in-out-cubic' | '--wzl-ease-out-back' | '--wzl-ease-out-cubic' | '--wzl-fg' | '--wzl-fg-inverse' | '--wzl-fg-muted' | '--wzl-fg-on-accent' | '--wzl-fg-subtle' | '--wzl-field-pad-x' | '--wzl-focus-ring' | '--wzl-font-body' | '--wzl-font-display' | '--wzl-font-mono' | '--wzl-font-size' | '--wzl-font-size-2xs' | '--wzl-font-size-lg' | '--wzl-font-size-sm' | '--wzl-font-size-xl' | '--wzl-font-size-xs' | '--wzl-font-ui' | '--wzl-font-weight-bold' | '--wzl-font-weight-light' | '--wzl-font-weight-medium' | '--wzl-font-weight-normal' | '--wzl-glass-blur' | '--wzl-glass-tint' | '--wzl-gray-100' | '--wzl-gray-200' | '--wzl-gray-300' | '--wzl-gray-400' | '--wzl-gray-50' | '--wzl-gray-500' | '--wzl-gray-600' | '--wzl-gray-700' | '--wzl-gray-800' | '--wzl-gray-900' | '--wzl-leading' | '--wzl-leading-snug' | '--wzl-leading-tight' | '--wzl-line' | '--wzl-line-strong' | '--wzl-line-subtle' | '--wzl-line-width' | '--wzl-motion-fast' | '--wzl-motion-medium' | '--wzl-radius-lg' | '--wzl-radius-md' | '--wzl-radius-pill' | '--wzl-radius-sm' | '--wzl-shadow' | '--wzl-slider-thumb-mix' | '--wzl-slider-thumb-size' | '--wzl-slider-track-h' | '--wzl-slider-track-mix' | '--wzl-space-lg' | '--wzl-space-md' | '--wzl-space-sm' | '--wzl-space-xs' | '--wzl-success' | '--wzl-success-base' | '--wzl-surface' | '--wzl-surface-hover' | '--wzl-surface-pressed' | '--wzl-surface-raised' | '--wzl-surface-sunken' | '--wzl-swatch-amber' | '--wzl-swatch-cyan' | '--wzl-swatch-gold' | '--wzl-swatch-green' | '--wzl-swatch-magenta' | '--wzl-swatch-mint' | '--wzl-swatch-orange' | '--wzl-swatch-pink' | '--wzl-swatch-sky' | '--wzl-swatch-violet' | '--wzl-tb-height' | '--wzl-tracking-none' | '--wzl-tracking-wide' | '--wzl-tracking-wider' | '--wzl-warning' | '--wzl-warning-base' | '--wzl-z-modal' | '--wzl-z-overlay' | '--wzl-z-toolbar';
-/** A built-in theme with its aliases already collapsed: every mode maps
- *  every token name to a final CSS value. */
+type TokenName = '--wzl-accent' | '--wzl-accent-base' | '--wzl-accent-fg' | '--wzl-accent-hover' | '--wzl-accent-soft' | '--wzl-accent-strong' | '--wzl-backdrop' | '--wzl-border' | '--wzl-border-strong' | '--wzl-border-w' | '--wzl-control-h' | '--wzl-curve-color' | '--wzl-curve-width' | '--wzl-danger' | '--wzl-danger-base' | '--wzl-ease-in-cubic' | '--wzl-ease-in-out-cubic' | '--wzl-ease-out-back' | '--wzl-ease-out-cubic' | '--wzl-fg' | '--wzl-fg-inverse' | '--wzl-fg-muted' | '--wzl-fg-on-accent' | '--wzl-fg-subtle' | '--wzl-field-pad-x' | '--wzl-focus-ring' | '--wzl-font-body' | '--wzl-font-display' | '--wzl-font-mono' | '--wzl-font-size' | '--wzl-font-size-2xs' | '--wzl-font-size-lg' | '--wzl-font-size-sm' | '--wzl-font-size-xl' | '--wzl-font-size-xs' | '--wzl-font-ui' | '--wzl-font-weight-bold' | '--wzl-font-weight-light' | '--wzl-font-weight-medium' | '--wzl-font-weight-normal' | '--wzl-glass-blur' | '--wzl-glass-tint' | '--wzl-gray-100' | '--wzl-gray-200' | '--wzl-gray-300' | '--wzl-gray-400' | '--wzl-gray-50' | '--wzl-gray-500' | '--wzl-gray-600' | '--wzl-gray-700' | '--wzl-gray-800' | '--wzl-gray-900' | '--wzl-handle-size' | '--wzl-handle-size-lg' | '--wzl-handle-size-sm' | '--wzl-leading' | '--wzl-leading-snug' | '--wzl-leading-tight' | '--wzl-line' | '--wzl-line-strong' | '--wzl-line-subtle' | '--wzl-line-width' | '--wzl-motion-fast' | '--wzl-motion-medium' | '--wzl-radius-lg' | '--wzl-radius-md' | '--wzl-radius-pill' | '--wzl-radius-sm' | '--wzl-shadow' | '--wzl-slider-thumb-mix' | '--wzl-slider-thumb-size' | '--wzl-slider-track-h' | '--wzl-slider-track-mix' | '--wzl-space-lg' | '--wzl-space-md' | '--wzl-space-sm' | '--wzl-space-xs' | '--wzl-success' | '--wzl-success-base' | '--wzl-surface' | '--wzl-surface-hover' | '--wzl-surface-pressed' | '--wzl-surface-raised' | '--wzl-surface-sunken' | '--wzl-swatch-amber' | '--wzl-swatch-blue' | '--wzl-swatch-citron' | '--wzl-swatch-fuchsia' | '--wzl-swatch-green' | '--wzl-swatch-red' | '--wzl-swatch-rose' | '--wzl-swatch-sky' | '--wzl-swatch-teal' | '--wzl-swatch-violet' | '--wzl-tb-height' | '--wzl-tracking-none' | '--wzl-tracking-wide' | '--wzl-tracking-wider' | '--wzl-warning' | '--wzl-warning-base' | '--wzl-z-modal' | '--wzl-z-overlay' | '--wzl-z-toolbar';
+/** A built-in theme with its aliases already collapsed: every selection
+ *  (keyed `mode=dark`, axes in declaration order) maps every token name to
+ *  a final CSS value. */
 interface GeneratedTheme {
     readonly name: string;
-    readonly defaultMode: string;
-    readonly modes: Readonly<Record<string, Readonly<Record<TokenName, string>>>>;
+    readonly axes: AxisDefs;
+    readonly selections: Readonly<Record<string, Readonly<Record<TokenName, string>>>>;
 }
 /** The built-in themes, resolved, keyed by theme name. Read this to list
  *  or preview themes without resolving a token graph yourself. */
 declare const THEMES: {
     readonly weasel: {
         readonly name: "weasel";
-        readonly defaultMode: "dark";
-        readonly modes: {
-            readonly dark: {
+        readonly axes: {
+            readonly mode: {
+                readonly default: "dark";
+                readonly values: {
+                    readonly dark: {
+                        readonly scheme: "dark";
+                    };
+                    readonly light: {
+                        readonly scheme: "light";
+                    };
+                };
+            };
+        };
+        readonly selections: {
+            readonly 'mode=dark': {
                 readonly '--wzl-gray-50': "#f5f5f6";
                 readonly '--wzl-gray-100': "#e6e7e9";
                 readonly '--wzl-gray-200': "#c9cbcf";
@@ -45,11 +44,31 @@ declare const THEMES: {
                 readonly '--wzl-accent-soft': "#1d1454";
                 readonly '--wzl-accent-base': "#2e1f7a";
                 readonly '--wzl-accent-strong': "#5841b8";
+                readonly '--wzl-swatch-fuchsia': "#f641f7";
+                readonly '--wzl-swatch-green': "#48e628";
+                readonly '--wzl-swatch-sky': "#36bff2";
+                readonly '--wzl-swatch-amber': "#e69628";
+                readonly '--wzl-swatch-teal': "#3ee1cb";
+                readonly '--wzl-swatch-red': "#f75034";
+                readonly '--wzl-swatch-blue': "#407ef7";
+                readonly '--wzl-swatch-citron': "#d5d23a";
+                readonly '--wzl-swatch-rose': "#fa4590";
+                readonly '--wzl-swatch-violet': "#955cf9";
+                readonly '--wzl-surface': "#181a1e";
+                readonly '--wzl-surface-raised': "#25272c";
+                readonly '--wzl-surface-sunken': "#0e0f12";
+                readonly '--wzl-fg': "#e6e7e9";
+                readonly '--wzl-fg-muted': "#9ea1a8";
+                readonly '--wzl-fg-subtle': "#6f737b";
+                readonly '--wzl-border': "#25272c";
+                readonly '--wzl-border-strong': "#6f737b";
+                readonly '--wzl-accent-fg': "#5841b8";
+                readonly '--wzl-fg-inverse': "#0e0f12";
+                readonly '--wzl-shadow': "rgba(0, 0, 0, 0.6)";
                 readonly '--wzl-danger-base': "#d94a3f";
                 readonly '--wzl-warning-base': "#d99a3f";
                 readonly '--wzl-success-base': "#2ec27e";
                 readonly '--wzl-fg-on-accent': "#f5f5f6";
-                readonly '--wzl-fg': "#e6e7e9";
                 readonly '--wzl-line-subtle': "rgba(230, 231, 233, 0.1)";
                 readonly '--wzl-line': "rgba(230, 231, 233, 0.2)";
                 readonly '--wzl-line-strong': "rgba(230, 231, 233, 0.4)";
@@ -63,16 +82,6 @@ declare const THEMES: {
                 readonly '--wzl-glass-tint': "#2e1f7a";
                 readonly '--wzl-surface-hover': "rgba(230, 231, 233, 0.1)";
                 readonly '--wzl-surface-pressed': "rgba(230, 231, 233, 0.18)";
-                readonly '--wzl-swatch-green': "#2fdd18";
-                readonly '--wzl-swatch-pink': "#ff5885";
-                readonly '--wzl-swatch-cyan': "#00dfff";
-                readonly '--wzl-swatch-gold': "#dcb700";
-                readonly '--wzl-swatch-amber': "#ff8c00";
-                readonly '--wzl-swatch-violet': "#a497ff";
-                readonly '--wzl-swatch-mint': "#00e7af";
-                readonly '--wzl-swatch-sky': "#00b8ff";
-                readonly '--wzl-swatch-orange': "#ff6b00";
-                readonly '--wzl-swatch-magenta': "#ff6eff";
                 readonly '--wzl-radius-sm': "3px";
                 readonly '--wzl-radius-md': "5px";
                 readonly '--wzl-radius-lg': "14px";
@@ -86,6 +95,9 @@ declare const THEMES: {
                 readonly '--wzl-slider-thumb-size': "8px";
                 readonly '--wzl-slider-track-mix': "18%";
                 readonly '--wzl-slider-thumb-mix': "70%";
+                readonly '--wzl-handle-size': "9px";
+                readonly '--wzl-handle-size-sm': "7px";
+                readonly '--wzl-handle-size-lg': "10px";
                 readonly '--wzl-field-pad-x': "8px";
                 readonly '--wzl-glass-blur': "3px";
                 readonly '--wzl-font-size-2xs': "9px";
@@ -122,19 +134,8 @@ declare const THEMES: {
                 readonly '--wzl-font-weight-normal': "300";
                 readonly '--wzl-font-weight-medium': "350";
                 readonly '--wzl-font-weight-bold': "400";
-                readonly '--wzl-surface': "#181a1e";
-                readonly '--wzl-surface-raised': "#25272c";
-                readonly '--wzl-surface-sunken': "#0e0f12";
-                readonly '--wzl-fg-muted': "#9ea1a8";
-                readonly '--wzl-fg-subtle': "#6f737b";
-                readonly '--wzl-border': "#25272c";
-                readonly '--wzl-border-strong': "#383b42";
-                readonly '--wzl-accent-fg': "#5841b8";
-                readonly '--wzl-fg-inverse': "#0e0f12";
-                readonly '--wzl-shadow': "rgba(0, 0, 0, 0.6)";
-                readonly '--wzl-border-raised': "#6f737b";
             };
-            readonly light: {
+            readonly 'mode=light': {
                 readonly '--wzl-gray-50': "#f5f5f6";
                 readonly '--wzl-gray-100': "#e6e7e9";
                 readonly '--wzl-gray-200': "#c9cbcf";
@@ -148,11 +149,31 @@ declare const THEMES: {
                 readonly '--wzl-accent-soft': "#1d1454";
                 readonly '--wzl-accent-base': "#2e1f7a";
                 readonly '--wzl-accent-strong': "#5841b8";
+                readonly '--wzl-swatch-fuchsia': "#f641f7";
+                readonly '--wzl-swatch-green': "#48e628";
+                readonly '--wzl-swatch-sky': "#36bff2";
+                readonly '--wzl-swatch-amber': "#e69628";
+                readonly '--wzl-swatch-teal': "#3ee1cb";
+                readonly '--wzl-swatch-red': "#f75034";
+                readonly '--wzl-swatch-blue': "#407ef7";
+                readonly '--wzl-swatch-citron': "#d5d23a";
+                readonly '--wzl-swatch-rose': "#fa4590";
+                readonly '--wzl-swatch-violet': "#955cf9";
+                readonly '--wzl-surface': "#f5f5f6";
+                readonly '--wzl-surface-raised': "#e6e7e9";
+                readonly '--wzl-surface-sunken': "#c9cbcf";
+                readonly '--wzl-fg': "#0e0f12";
+                readonly '--wzl-fg-muted': "#383b42";
+                readonly '--wzl-fg-subtle': "#4d5058";
+                readonly '--wzl-border': "#c9cbcf";
+                readonly '--wzl-border-strong': "#4d5058";
+                readonly '--wzl-accent-fg': "#2e1f7a";
+                readonly '--wzl-fg-inverse': "#f5f5f6";
+                readonly '--wzl-shadow': "rgba(0, 0, 0, 0.18)";
                 readonly '--wzl-danger-base': "#d94a3f";
                 readonly '--wzl-warning-base': "#d99a3f";
                 readonly '--wzl-success-base': "#2ec27e";
                 readonly '--wzl-fg-on-accent': "#f5f5f6";
-                readonly '--wzl-fg': "#0e0f12";
                 readonly '--wzl-line-subtle': "rgba(14, 15, 18, 0.1)";
                 readonly '--wzl-line': "rgba(14, 15, 18, 0.2)";
                 readonly '--wzl-line-strong': "rgba(14, 15, 18, 0.4)";
@@ -166,16 +187,6 @@ declare const THEMES: {
                 readonly '--wzl-glass-tint': "#2e1f7a";
                 readonly '--wzl-surface-hover': "rgba(14, 15, 18, 0.1)";
                 readonly '--wzl-surface-pressed': "rgba(14, 15, 18, 0.18)";
-                readonly '--wzl-swatch-green': "#2fdd18";
-                readonly '--wzl-swatch-pink': "#ff5885";
-                readonly '--wzl-swatch-cyan': "#00dfff";
-                readonly '--wzl-swatch-gold': "#dcb700";
-                readonly '--wzl-swatch-amber': "#ff8c00";
-                readonly '--wzl-swatch-violet': "#a497ff";
-                readonly '--wzl-swatch-mint': "#00e7af";
-                readonly '--wzl-swatch-sky': "#00b8ff";
-                readonly '--wzl-swatch-orange': "#ff6b00";
-                readonly '--wzl-swatch-magenta': "#ff6eff";
                 readonly '--wzl-radius-sm': "3px";
                 readonly '--wzl-radius-md': "5px";
                 readonly '--wzl-radius-lg': "14px";
@@ -189,6 +200,9 @@ declare const THEMES: {
                 readonly '--wzl-slider-thumb-size': "8px";
                 readonly '--wzl-slider-track-mix': "18%";
                 readonly '--wzl-slider-thumb-mix': "70%";
+                readonly '--wzl-handle-size': "9px";
+                readonly '--wzl-handle-size-sm': "7px";
+                readonly '--wzl-handle-size-lg': "10px";
                 readonly '--wzl-field-pad-x': "8px";
                 readonly '--wzl-glass-blur': "3px";
                 readonly '--wzl-font-size-2xs': "9px";
@@ -225,74 +239,28 @@ declare const THEMES: {
                 readonly '--wzl-font-weight-normal': "300";
                 readonly '--wzl-font-weight-medium': "350";
                 readonly '--wzl-font-weight-bold': "400";
-                readonly '--wzl-surface': "#f5f5f6";
-                readonly '--wzl-surface-raised': "#e6e7e9";
-                readonly '--wzl-surface-sunken': "#c9cbcf";
-                readonly '--wzl-fg-muted': "#383b42";
-                readonly '--wzl-fg-subtle': "#4d5058";
-                readonly '--wzl-border': "#c9cbcf";
-                readonly '--wzl-border-strong': "#9ea1a8";
-                readonly '--wzl-accent-fg': "#2e1f7a";
-                readonly '--wzl-fg-inverse': "#f5f5f6";
-                readonly '--wzl-shadow': "rgba(0, 0, 0, 0.18)";
-                readonly '--wzl-border-raised': "#6f737b";
             };
         };
     };
 };
-/** Unresolved token graph. `extends` needs the aliases intact so an override
- *  of a base primitive still reaches everything referencing it. */
-interface ThemeSource {
-    readonly primitives: Readonly<Record<string, RawToken>>;
-    readonly modes: Readonly<Record<string, Readonly<Record<string, RawToken>>>>;
-}
-/** The same built-in themes as `THEMES`, unresolved. This is what
- *  `defineTheme` layers onto. */
-declare const THEME_SOURCES: Readonly<Record<string, ThemeSource>>;
-
-/** Authoring shorthand: a bare string is a literal or a `{ref}`. */
-type TokenInput = string | number | RawToken;
-/** What `defineTheme` accepts: a name, the base theme to layer onto, and the
- *  token overrides, split into mode-invariant and per-mode. */
-interface ThemeInput {
-    readonly name: string;
-    /** Base to layer onto. Defaults to `weaselTheme`; `null` opts out. */
-    readonly extends?: Theme | null;
-    readonly defaultMode?: string;
-    /** Mode-invariant overrides. */
-    readonly tokens?: Readonly<Record<string, TokenInput>>;
-    readonly modes: Readonly<Record<string, Readonly<Record<string, TokenInput>>>>;
-}
-/**
- * A theme: a named set of design tokens, organized into a mode-invariant layer
- * plus one layer per mode (light, dark, …), optionally extending another theme.
- * Tokens are held unresolved — aliases between them are collapsed later by
- * `resolveTheme`, so an override of a base primitive still reaches everything
- * that references it.
- */
-interface Theme {
-    readonly name: string;
-    readonly extends: Theme | null;
-    readonly defaultMode: string;
-    readonly tokens: FlatTokens;
-    readonly modes: Readonly<Record<string, FlatTokens>>;
-}
-/** The built-in theme, materialized from the generated source. */
-declare const weaselTheme: Theme;
-/** Build a theme from authoring shorthand. Unless `extends` says otherwise the
- *  result layers onto `weaselTheme`, so a theme only needs to name what it
- *  changes. */
-declare function defineTheme(input: ThemeInput): Theme;
+/** The built-in themes as authored: their unbaked definitions. */
+declare const THEME_SOURCES: Readonly<Record<string, ThemeDefinition>>;
+/** The built-in themes with every rule run and references intact. This is
+ *  what `weaselTheme` is built from, so the runtime entry bundles no generator. */
+declare const BAKED_THEMES: Readonly<Record<string, BakedTheme>>;
 
-/** The output of `resolveTheme`: every token of a theme, for one mode, keyed
+/** The output of `resolveTheme`: every token of a theme, for one selection, keyed
  *  by CSS custom-property name and flattened to a final CSS value. */
 type ResolvedTheme = Readonly<Record<TokenName, string>>;
+/** Every axis the chain declares. An axis declared more than once keeps every value; a descendant's value entries and default win. */
+declare function themeAxes(theme: Theme): AxisDefs;
 /**
- * Merge the extends chain, layer the mode over it, resolve every alias, and
- * key the result by CSS custom-property name.
+ * Merge the extends chain at a selection, resolve every alias, and key the
+ * result by CSS custom-property name. A missing or unknown axis value takes the
+ * axis default.
  *
  * Pure — no DOM. An unresolvable reference throws rather than falling back.
  */
-declare function resolveTheme(theme: Theme, mode: string): ResolvedTheme;
+declare function resolveTheme(theme: Theme, selection?: Selection): ResolvedTheme;
 
-export { type FlatTokens as F, type GeneratedTheme as G, type RawToken as R, type Theme as T, type ResolvedTheme as a, THEMES as b, THEME_SOURCES as c, type ThemeInput as d, type ThemeSource as e, type TokenInput as f, type TokenName as g, defineTheme as h, resolveTheme as r, weaselTheme as w };
+export { BAKED_THEMES as B, type GeneratedTheme as G, type ResolvedTheme as R, type TokenName as T, THEMES as a, THEME_SOURCES as b, resolveTheme as r, themeAxes as t };

package/dist/theme-BtpBHcUg.d.ts

@@ -0,0 +1,189 @@
+/** One value of an axis. `scheme` becomes `color-scheme` in that value's CSS blocks. */
+interface AxisValue {
+    readonly scheme?: 'dark' | 'light';
+}
+interface AxisDef {
+    readonly default: string;
+    readonly values: Readonly<Record<string, AxisValue>>;
+}
+/** Key order is declaration order, which selectors and selection keys follow. */
+type AxisDefs = Readonly<Record<string, AxisDef>>;
+/** A partial choice of axis values, e.g. `{ mode: 'light' }`. */
+type Selection = Readonly<Record<string, string>>;
+/** `{ by: 'mode', dark: …, light: … }`: a value that differs per axis value. */
+interface ByAxis<T> {
+    readonly by: string;
+    readonly [axisValue: string]: Varying<T> | string;
+}
+type Varying<T> = T | ByAxis<T>;
+declare function isByAxis(v: unknown): v is ByAxis<unknown>;
+/** Every axis given a known value; anything missing or unknown takes its default. */
+declare function fullSelection(axes: AxisDefs, selection?: Selection): Selection;
+declare function enumerateSelections(axes: AxisDefs): Selection[];
+/** `mode=dark,density=compact`, axes in declaration order. */
+declare function selectionKey(axes: AxisDefs, selection: Selection): string;
+
+type TokenValue = string | number | readonly (string | number)[];
+/**
+ * A single design token as authored, before aliases are resolved: a DTCG-shaped
+ * `{ type, value }` pair where `value` may still be a `{ref}` to another token.
+ */
+interface RawToken {
+    readonly type: string;
+    readonly value: TokenValue;
+    /** Render the referenced color at this alpha, 0–1. */
+    readonly alpha?: number | undefined;
+    readonly description?: string | undefined;
+}
+/** A token graph flattened to one level, keyed by token name (no `--wzl-`
+ *  prefix). Still unresolved — see `ResolvedTokenMap` for the output side. */
+type FlatTokens = Record<string, RawToken>;
+
+/** A number, or `{seeds.name}`. */
+type NumberParam = Varying<number | string>;
+interface PinObject {
+    readonly value: TokenValue;
+    readonly type?: string;
+    readonly description?: string;
+    readonly alpha?: number;
+}
+/** A bare value or `{ value, type?, description?, alpha? }`. The value may be a `{token}` reference. */
+type PinValue = TokenValue | PinObject;
+interface LightnessRampDef {
+    readonly kind: 'lightness';
+    readonly steps: Varying<readonly string[]>;
+    /** First and last step's OKLCH lightness. */
+    readonly lightness: Varying<readonly [NumberParam, NumberParam]>;
+    /** 0 walks evenly; 1 follows a smoothstep S. */
+    readonly curve?: NumberParam;
+    /** Degrees. Ignored when an anchor is given. */
+    readonly hue?: NumberParam;
+    readonly chroma?: Varying<{
+        readonly peak: NumberParam;
+        readonly lightBias?: NumberParam;
+        readonly darkBias?: NumberParam;
+    }>;
+    /** Step name → exact hex (or `{seeds.name}`). The first anchor supplies hue and chroma. */
+    readonly anchor?: Varying<Readonly<Record<string, Varying<string>>>>;
+    readonly description?: string;
+    readonly describe?: Readonly<Record<string, string>>;
+}
+interface CategoricalRampDef {
+    readonly kind: 'categorical';
+    readonly steps: Varying<readonly string[]>;
+    /** Any of the palette generator's `Constraints` except `count` and `anchors`. */
+    readonly gates?: Varying<Readonly<Record<string, Varying<number | string>>>>;
+    readonly anchors?: readonly {
+        readonly name: string;
+        readonly hue: number;
+        readonly lightness: number;
+        readonly chroma?: number;
+    }[];
+    readonly description?: string;
+    readonly describe?: Readonly<Record<string, string>>;
+}
+type RampDef = LightnessRampDef | CategoricalRampDef;
+interface ScaleDef {
+    readonly steps: Varying<readonly string[]>;
+    readonly base: NumberParam;
+    /** Linear: `base + step × i`. */
+    readonly step?: NumberParam;
+    /** Geometric: `base × ratio^i`. */
+    readonly ratio?: NumberParam;
+    readonly description?: string;
+    readonly describe?: Readonly<Record<string, string>>;
+}
+interface SemanticCommon {
+    readonly type?: string;
+    readonly description?: string;
+    /** Audited, never applied. */
+    readonly check?: {
+        readonly contrast: number;
+        readonly against: readonly string[];
+    };
+}
+type StepRule = SemanticCommon & {
+    readonly ramp: string;
+    readonly step: Varying<string>;
+};
+type OffsetRule = SemanticCommon & {
+    readonly from: string;
+    readonly offset: number;
+    readonly dir: 'lighter' | 'darker' | 'away';
+};
+type ContrastRule = SemanticCommon & {
+    readonly ramp: string;
+    readonly contrast: {
+        readonly min: number;
+        readonly against: readonly string[];
+    };
+};
+type RefRule = SemanticCommon & {
+    readonly ref: string;
+    readonly alpha?: number;
+};
+type LiteralRule = SemanticCommon & {
+    readonly value: TokenValue;
+};
+type SemanticRule = StepRule | OffsetRule | ContrastRule | RefRule | LiteralRule;
+interface ThemeDefinition {
+    readonly name: string;
+    /** Another definition's name. Absent or null: extends nothing. */
+    readonly extends?: string | null;
+    readonly description?: string;
+    readonly axes?: AxisDefs;
+    readonly seeds?: Readonly<Record<string, Varying<number | string>>>;
+    readonly ramps?: Readonly<Record<string, RampDef>>;
+    readonly scales?: Readonly<Record<string, ScaleDef>>;
+    readonly semantics?: Readonly<Record<string, Varying<SemanticRule>>>;
+    readonly components?: Readonly<Record<string, Varying<PinValue>>>;
+    readonly pins?: Readonly<Record<string, Varying<PinValue>>>;
+}
+
+type Lookup = (name: string) => ThemeDefinition | undefined;
+/** The definition with its whole `extends` chain folded in, child entries winning. */
+declare function mergeChain(def: ThemeDefinition, lookup?: Lookup, seen?: ReadonlySet<string>): ThemeDefinition;
+
+/**
+ * A definition with every rule run: plain or `by`-varying tokens, references intact.
+ * A branch `derive` could not produce is left out, so at runtime it falls through to the parent; definitions with
+ * issues still bake, because the editor bakes mid-edit and the build refuses them before baking. Cycles and dangling
+ * references still throw, as they do in `derive`.
+ */
+interface BakedTheme {
+    readonly name: string;
+    readonly extends: string | null;
+    readonly axes: AxisDefs;
+    /** In layer order, then definition order. */
+    readonly tokens: Readonly<Record<string, Varying<RawToken>>>;
+}
+/** Derive `definition` at every selection and fold the results into one record of tokens with no rules left. */
+declare function bake(definition: ThemeDefinition, lookup?: Lookup): BakedTheme;
+/** `definition` and every theme it extends, baked, root first. */
+declare function bakeChain(definition: ThemeDefinition, lookup?: Lookup): BakedTheme[];
+
+/**
+ * A theme ready to resolve: its axes and its tokens, each plain or varying by
+ * axis, references intact. A `by` that leaves a value out contributes nothing
+ * for that selection, so the theme it extends supplies it.
+ */
+interface Theme {
+    readonly name: string;
+    readonly extends: Theme | null;
+    readonly axes: AxisDefs;
+    readonly tokens: Readonly<Record<string, Varying<RawToken>>>;
+}
+/** What `defineTheme` accepts: a definition whose `extends` is a `Theme`, holding pins and components only. */
+type ThemeInput = Omit<ThemeDefinition, 'extends'> & {
+    readonly extends?: Theme | null;
+};
+/** The built-in theme, from the baked output of themes/weasel.json. */
+declare const weaselTheme: Theme;
+/**
+ * Build a theme from pins. Unless `extends` says otherwise the result layers
+ * onto `weaselTheme`, so a theme only names what it changes. A definition with
+ * seeds, ramps, scales or semantics needs deriving first.
+ */
+declare function defineTheme(input: ThemeInput): Theme;
+
+export { type AxisDef as A, type BakedTheme as B, type CategoricalRampDef as C, type FlatTokens as F, type Lookup as L, type NumberParam as N, type OffsetRule as O, type PinObject as P, type RawToken as R, type Selection as S, type Theme as T, type Varying as V, type TokenValue as a, type AxisDefs as b, type AxisValue as c, type ByAxis as d, type PinValue as e, type ThemeDefinition as f, type ThemeInput as g, defineTheme as h, enumerateSelections as i, fullSelection as j, isByAxis as k, type ContrastRule as l, type LightnessRampDef as m, type LiteralRule as n, type RampDef as o, type RefRule as p, type ScaleDef as q, type SemanticRule as r, selectionKey as s, type StepRule as t, bake as u, bakeChain as v, weaselTheme as w, mergeChain as x };