@weasel-js/theme 1.15.1 → 1.16.0

package/dist/react.js

@@ -1,31 +1,18 @@
-import { isColorModePreference, themeTints, applyTheme, colorSourceCss, colorSourceLiteral } from './chunk-Y4COX5NW.js';
-export { isColorModePreference } from './chunk-Y4COX5NW.js';
-import './chunk-UKUFGM6D.js';
+import { isColorModePreference, themeTints, applyTheme, colorSourceCss, colorSourceLiteral } from './chunk-SFVRMAMW.js';
+export { isColorModePreference } from './chunk-SFVRMAMW.js';
+import './chunk-44CG54ZK.js';
 import './chunk-M3R5MV7Q.js';
-import { themeAxes, resolveTheme } from './chunk-32JKTYS2.js';
-import { weaselTheme } from './chunk-NCAQ54LO.js';
+import { themeAxes, resolveTheme } from './chunk-UCQC6GZR.js';
+import { weaselTheme } from './chunk-X2KI4SSJ.js';
 import { fullSelection, selectionKey } from './chunk-P5F3GZV6.js';
 import { colorLiteralToHex } from '@weasel-js/paint';
-import { createContext, useState, useEffect, useCallback, useRef, useMemo, useLayoutEffect, useContext } from 'react';
+import { createContext, useState, useCallback, useRef, useMemo, useLayoutEffect, useContext } from 'react';
 import { isDev } from '@weasel-js/registry';
+import { useSystemColorScheme } from '@weasel-js/react';
 import { jsx } from 'react/jsx-runtime';
 
-function systemQuery() {
-  if (typeof globalThis.matchMedia !== "function") return null;
-  return globalThis.matchMedia("(prefers-color-scheme: light)");
-}
-var systemMode = () => systemQuery()?.matches ? "light" : "dark";
 function useResolvedColorMode(preference) {
-  const [system, setSystem] = useState(systemMode);
-  useEffect(() => {
-    if (preference !== "auto") return;
-    const mq = systemQuery();
-    if (!mq) return;
-    setSystem(mq.matches ? "light" : "dark");
-    const onChange = (e) => setSystem(e.matches ? "light" : "dark");
-    mq.addEventListener("change", onChange);
-    return () => mq.removeEventListener("change", onChange);
-  }, [preference]);
+  const system = useSystemColorScheme(preference === "auto");
   return preference === "auto" ? system : preference;
 }
 function defaultStorage() {
@@ -73,8 +60,8 @@ function ThemeProvider({
   const ref = useRef(null);
   const axes = themeAxes(theme);
   const autoMode = selection?.mode === "auto" && !("auto" in (axes.mode?.values ?? {}));
-  const systemMode2 = useResolvedColorMode(autoMode ? "auto" : "dark");
-  const given = autoMode ? { ...selection, mode: systemMode2 } : selection;
+  const systemMode = useResolvedColorMode(autoMode ? "auto" : "dark");
+  const given = autoMode ? { ...selection, mode: systemMode } : selection;
   const full = fullSelection(axes, given);
   warnUnknownAxisValues(theme, axes, given);
   const key = selectionKey(axes, full);

package/dist/react.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useColorMode.ts","../src/react.tsx"],"names":["systemMode","useCallback"],"mappings":"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","file":"react.js","sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport { isColorModePreference, type ColorMode, type ColorModePreference } from './colorMode';\n\nfunction systemQuery(): MediaQueryList | null {\n  if (typeof globalThis.matchMedia !== 'function') return null;\n  return globalThis.matchMedia('(prefers-color-scheme: light)');\n}\n\nconst systemMode = (): ColorMode => (systemQuery()?.matches ? 'light' : 'dark');\n\n/**\n * Resolves a preference to the mode a `ThemeProvider` selection takes.\n * `'auto'` subscribes to the OS setting and follows it live; an explicit\n * choice opts out of the subscription entirely.\n */\nexport function useResolvedColorMode(preference: ColorModePreference): ColorMode {\n  const [system, setSystem] = useState<ColorMode>(systemMode);\n\n  useEffect(() => {\n    if (preference !== 'auto') return;\n    const mq = systemQuery();\n    if (!mq) return;\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- syncs to the OS color-scheme query\n    setSystem(mq.matches ? 'light' : 'dark');\n    const onChange = (e: { matches: boolean }) => setSystem(e.matches ? 'light' : 'dark');\n    mq.addEventListener('change', onChange);\n    return () => mq.removeEventListener('change', onChange);\n  }, [preference]);\n\n  return preference === 'auto' ? system : preference;\n}\n\n/** The part of `Storage` {@link useColorModePreference} reads and writes. */\nexport type ColorModeStorage = Pick<Storage, 'getItem' | 'setItem'>;\n\n/** Options for {@link useColorModePreference}. */\nexport interface ColorModePreferenceOptions {\n  /** Where the choice is remembered. Unset, it lasts as long as the component. */\n  readonly storageKey?: string;\n  /** The store `storageKey` names a slot in. Defaults to `localStorage`. */\n  readonly storage?: ColorModeStorage;\n  /** The preference before the user has chosen one. Defaults to `'auto'`. */\n  readonly defaultPreference?: ColorModePreference;\n}\n\n/** What {@link useColorModePreference} returns. */\nexport interface ColorModePreferenceState {\n  readonly preference: ColorModePreference;\n  readonly setPreference: (next: ColorModePreference) => void;\n  /** `preference` resolved against the OS — what to put in the theme's `mode` axis. */\n  readonly mode: ColorMode;\n}\n\nfunction defaultStorage(): ColorModeStorage | undefined {\n  try {\n    return globalThis.localStorage ?? undefined;\n  } catch {\n    return undefined;\n  }\n}\n\n/**\n * A user's color-mode choice, optionally remembered across loads, and the mode\n * it resolves to. Storage that is missing or throws (a private window, blocked\n * site data) degrades to an unremembered choice rather than an error.\n */\nexport function useColorModePreference(\n  options: ColorModePreferenceOptions = {},\n): ColorModePreferenceState {\n  const { storageKey, storage, defaultPreference = 'auto' } = options;\n\n  const [preference, setState] = useState<ColorModePreference>(() => {\n    if (storageKey === undefined) return defaultPreference;\n    try {\n      const stored = (storage ?? defaultStorage())?.getItem(storageKey);\n      return isColorModePreference(stored) ? stored : defaultPreference;\n    } catch {\n      return defaultPreference;\n    }\n  });\n\n  const setPreference = useCallback(\n    (next: ColorModePreference) => {\n      setState(next);\n      if (storageKey === undefined) return;\n      try {\n        (storage ?? defaultStorage())?.setItem(storageKey, next);\n      } catch {\n        // Unremembered, but still applied.\n      }\n    },\n    [storageKey, storage],\n  );\n\n  return { preference, setPreference, mode: useResolvedColorMode(preference) };\n}\n","import { colorLiteralToHex, type ColorSource, type Palette } from '@weasel-js/paint';\nimport React, { createContext, useCallback, useContext, useMemo, useRef, useLayoutEffect } from 'react';\nimport { isDev } from '@weasel-js/registry';\nimport { applyTheme } from './applyTheme';\nimport { themeTints, type ColorList } from './colorList';\nimport { colorSourceCss, colorSourceLiteral } from './colorSource';\nimport { fullSelection, selectionKey, type Selection } from './axes';\nimport { resolveTheme, themeAxes, type ResolvedTheme } from './resolveTheme';\nimport { weaselTheme, type Theme } from './theme';\nimport { useResolvedColorMode } from './useColorMode';\n\nexport {\n  useColorModePreference,\n  useResolvedColorMode,\n  type ColorModePreferenceOptions,\n  type ColorModePreferenceState,\n  type ColorModeStorage,\n} from './useColorMode';\nexport { isColorModePreference, type ColorMode, type ColorModePreference } from './colorMode';\n\n/** What `<ThemeProvider>` publishes: the theme, the full selection in force, the\n *  fully resolved token record for that pair, and the tint list and palette in force. */\nexport interface ThemeContextValue {\n  readonly theme: Theme;\n  readonly selection: Selection;\n  readonly resolved: ResolvedTheme;\n  readonly tints: ColorList;\n  readonly palette: Palette;\n}\n\n/** What `<ThemeProvider>` publishes. Provide `null` to hide an outer theme from a subtree, as a\n *  boundary that renders its children the way a page with no provider would. */\nexport const ThemeContext = createContext<ThemeContextValue | null>(null);\n\nconst NO_PALETTE: Palette = { entries: [] };\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. `mode: 'auto'`\n   *  follows the OS setting, live; any other value the theme lacks takes the default, with a\n   *  warning in development. */\n  readonly selection?: Selection;\n  /** The colors a `tint` index picks from in this subtree. Absent: the theme's own. */\n  readonly tints?: ColorList;\n  /** Colors a `ColorRef` names in this subtree, answered before the theme's own names. Absent: none. */\n  readonly palette?: Palette;\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  tints,\n  palette = NO_PALETTE,\n  className,\n  style,\n  children,\n}: ThemeProviderProps): React.ReactElement {\n  const ref = useRef<HTMLDivElement>(null);\n  const axes = themeAxes(theme);\n  const autoMode = selection?.mode === 'auto' && !('auto' in (axes.mode?.values ?? {}));\n  const systemMode = useResolvedColorMode(autoMode ? 'auto' : 'dark');\n  const given = autoMode ? { ...selection, mode: systemMode } : selection;\n  const full = fullSelection(axes, given);\n  warnUnknownAxisValues(theme, axes, given);\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), tints: tints ?? themeTints(theme), palette }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [theme, key, tints, palette],\n  );\n\n  // Applying again replaces what the element held, so only the unmount releases.\n  const release = useRef<(() => void) | null>(null);\n  useLayoutEffect(() => {\n    if (ref.current) release.current = applyTheme(ref.current, theme, value.selection);\n  }, [theme, value]);\n  useLayoutEffect(() => () => release.current?.(), []);\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\nconst warned = new Set<string>();\n\nfunction warnUnknownAxisValues(theme: Theme, axes: ReturnType<typeof themeAxes>, selection: Selection | undefined): void {\n  if (!selection || !isDev()) return;\n  for (const [axis, value] of Object.entries(selection)) {\n    const def = axes[axis];\n    if (!def || value in def.values) continue;\n    const key = `${theme.name}\\0${axis}\\0${value}`;\n    if (warned.has(key)) continue;\n    warned.add(key);\n    console.warn(\n      `[weasel theme] ThemeProvider: theme \"${theme.name}\" has no ${axis} \"${value}\"; using \"${def.default}\". Its ${axis} values: ${Object.keys(def.values).join(', ')}.`,\n    );\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\nlet defaultTints: ThemeContextValue | undefined;\n\n/**\n * The tint list in force and what it resolves against — the nearest\n * `<ThemeProvider>`'s, else the built-in theme's at its defaults. Pass the\n * result as `colorAt`'s context.\n */\nexport function useTints(): ThemeContextValue {\n  const ctx = useContext(ThemeContext);\n  if (ctx) return ctx;\n  return (defaultTints ??= {\n    theme: weaselTheme,\n    selection: fullSelection(themeAxes(weaselTheme)),\n    resolved: resolveTheme(weaselTheme),\n    tints: themeTints(weaselTheme),\n    palette: NO_PALETTE,\n  });\n}\n\n/**\n * Turns a `ColorSource` into a CSS color under the theme, tints, and palette in\n * force: `colorSourceCss` against `useTints()`. Every component that takes a\n * color writes it through this. `undefined` for no source, and for one nothing\n * answers.\n */\nexport function useColorCss(): (source: ColorSource | null | undefined) => string | undefined {\n  const ctx = useTints();\n  return useCallback((source) => (source == null ? undefined : (colorSourceCss(source, ctx) ?? undefined)), [ctx]);\n}\n\n/**\n * Turns a `ColorSource` into a hex color under the theme, tints, and palette in force, for a\n * surface drawn without the cascade, such as a scene's paint. `useColorCss` may answer\n * `var(--wzl-…)`, which only the DOM resolves; this answers the value. `undefined` for no\n * source, and for one nothing answers.\n */\nexport function useColorHex(): (source: ColorSource | null | undefined) => string | undefined {\n  const ctx = useTints();\n  return useCallback((source) => {\n    if (source == null) return undefined;\n    const literal = colorSourceLiteral(source, ctx);\n    return (literal && colorLiteralToHex(literal)) ?? undefined;\n  }, [ctx]);\n}\n"]}
+{"version":3,"sources":["../src/useColorMode.ts","../src/react.tsx"],"names":["useCallback"],"mappings":"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","file":"react.js","sourcesContent":["import { useSystemColorScheme } from '@weasel-js/react';\nimport { useCallback, useState } from 'react';\nimport { isColorModePreference, type ColorMode, type ColorModePreference } from './colorMode';\n\n/**\n * Resolves a preference to the mode a `ThemeProvider` selection takes.\n * `'auto'` subscribes to the OS setting and follows it live, dark where the OS\n * says nothing; an explicit choice opts out of the subscription entirely.\n */\nexport function useResolvedColorMode(preference: ColorModePreference): ColorMode {\n  const system = useSystemColorScheme(preference === 'auto');\n  return preference === 'auto' ? system : preference;\n}\n\n/** The part of `Storage` {@link useColorModePreference} reads and writes. */\nexport type ColorModeStorage = Pick<Storage, 'getItem' | 'setItem'>;\n\n/** Options for {@link useColorModePreference}. */\nexport interface ColorModePreferenceOptions {\n  /** Where the choice is remembered. Unset, it lasts as long as the component. */\n  readonly storageKey?: string;\n  /** The store `storageKey` names a slot in. Defaults to `localStorage`. */\n  readonly storage?: ColorModeStorage;\n  /** The preference before the user has chosen one. Defaults to `'auto'`. */\n  readonly defaultPreference?: ColorModePreference;\n}\n\n/** What {@link useColorModePreference} returns. */\nexport interface ColorModePreferenceState {\n  readonly preference: ColorModePreference;\n  readonly setPreference: (next: ColorModePreference) => void;\n  /** `preference` resolved against the OS — what to put in the theme's `mode` axis. */\n  readonly mode: ColorMode;\n}\n\nfunction defaultStorage(): ColorModeStorage | undefined {\n  try {\n    return globalThis.localStorage ?? undefined;\n  } catch {\n    return undefined;\n  }\n}\n\n/**\n * A user's color-mode choice, optionally remembered across loads, and the mode\n * it resolves to. Storage that is missing or throws (a private window, blocked\n * site data) degrades to an unremembered choice rather than an error.\n */\nexport function useColorModePreference(\n  options: ColorModePreferenceOptions = {},\n): ColorModePreferenceState {\n  const { storageKey, storage, defaultPreference = 'auto' } = options;\n\n  const [preference, setState] = useState<ColorModePreference>(() => {\n    if (storageKey === undefined) return defaultPreference;\n    try {\n      const stored = (storage ?? defaultStorage())?.getItem(storageKey);\n      return isColorModePreference(stored) ? stored : defaultPreference;\n    } catch {\n      return defaultPreference;\n    }\n  });\n\n  const setPreference = useCallback(\n    (next: ColorModePreference) => {\n      setState(next);\n      if (storageKey === undefined) return;\n      try {\n        (storage ?? defaultStorage())?.setItem(storageKey, next);\n      } catch {\n        // Unremembered, but still applied.\n      }\n    },\n    [storageKey, storage],\n  );\n\n  return { preference, setPreference, mode: useResolvedColorMode(preference) };\n}\n","import { colorLiteralToHex, type ColorSource, type Palette } from '@weasel-js/paint';\nimport React, { createContext, useCallback, useContext, useMemo, useRef, useLayoutEffect } from 'react';\nimport { isDev } from '@weasel-js/registry';\nimport { applyTheme } from './applyTheme';\nimport { themeTints, type ColorList } from './colorListItems';\nimport { colorSourceCss, colorSourceLiteral } from './colorSource';\nimport { fullSelection, selectionKey, type Selection } from './axes';\nimport { resolveTheme, themeAxes, type ResolvedTheme } from './resolveTheme';\nimport { weaselTheme, type Theme } from './theme';\nimport { useResolvedColorMode } from './useColorMode';\n\nexport {\n  useColorModePreference,\n  useResolvedColorMode,\n  type ColorModePreferenceOptions,\n  type ColorModePreferenceState,\n  type ColorModeStorage,\n} from './useColorMode';\nexport { isColorModePreference, type ColorMode, type ColorModePreference } from './colorMode';\n\n/** What `<ThemeProvider>` publishes: the theme, the full selection in force, the\n *  fully resolved token record for that pair, and the tint list and palette in force. */\nexport interface ThemeContextValue {\n  readonly theme: Theme;\n  readonly selection: Selection;\n  readonly resolved: ResolvedTheme;\n  readonly tints: ColorList;\n  readonly palette: Palette;\n}\n\n/** What `<ThemeProvider>` publishes. Provide `null` to hide an outer theme from a subtree, as a\n *  boundary that renders its children the way a page with no provider would. */\nexport const ThemeContext = createContext<ThemeContextValue | null>(null);\n\nconst NO_PALETTE: Palette = { entries: [] };\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. `mode: 'auto'`\n   *  follows the OS setting, live; any other value the theme lacks takes the default, with a\n   *  warning in development. */\n  readonly selection?: Selection;\n  /** The colors a `tint` index picks from in this subtree. Absent: the theme's own. */\n  readonly tints?: ColorList;\n  /** Colors a `ColorRef` names in this subtree, answered before the theme's own names. Absent: none. */\n  readonly palette?: Palette;\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  tints,\n  palette = NO_PALETTE,\n  className,\n  style,\n  children,\n}: ThemeProviderProps): React.ReactElement {\n  const ref = useRef<HTMLDivElement>(null);\n  const axes = themeAxes(theme);\n  const autoMode = selection?.mode === 'auto' && !('auto' in (axes.mode?.values ?? {}));\n  const systemMode = useResolvedColorMode(autoMode ? 'auto' : 'dark');\n  const given = autoMode ? { ...selection, mode: systemMode } : selection;\n  const full = fullSelection(axes, given);\n  warnUnknownAxisValues(theme, axes, given);\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), tints: tints ?? themeTints(theme), palette }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [theme, key, tints, palette],\n  );\n\n  // Applying again replaces what the element held, so only the unmount releases.\n  const release = useRef<(() => void) | null>(null);\n  useLayoutEffect(() => {\n    if (ref.current) release.current = applyTheme(ref.current, theme, value.selection);\n  }, [theme, value]);\n  useLayoutEffect(() => () => release.current?.(), []);\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\nconst warned = new Set<string>();\n\nfunction warnUnknownAxisValues(theme: Theme, axes: ReturnType<typeof themeAxes>, selection: Selection | undefined): void {\n  if (!selection || !isDev()) return;\n  for (const [axis, value] of Object.entries(selection)) {\n    const def = axes[axis];\n    if (!def || value in def.values) continue;\n    const key = `${theme.name}\\0${axis}\\0${value}`;\n    if (warned.has(key)) continue;\n    warned.add(key);\n    console.warn(\n      `[weasel theme] ThemeProvider: theme \"${theme.name}\" has no ${axis} \"${value}\"; using \"${def.default}\". Its ${axis} values: ${Object.keys(def.values).join(', ')}.`,\n    );\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\nlet defaultTints: ThemeContextValue | undefined;\n\n/**\n * The tint list in force and what it resolves against — the nearest\n * `<ThemeProvider>`'s, else the built-in theme's at its defaults. Pass the\n * result as `colorAt`'s context.\n */\nexport function useTints(): ThemeContextValue {\n  const ctx = useContext(ThemeContext);\n  if (ctx) return ctx;\n  return (defaultTints ??= {\n    theme: weaselTheme,\n    selection: fullSelection(themeAxes(weaselTheme)),\n    resolved: resolveTheme(weaselTheme),\n    tints: themeTints(weaselTheme),\n    palette: NO_PALETTE,\n  });\n}\n\n/**\n * Turns a `ColorSource` into a CSS color under the theme, tints, and palette in\n * force: `colorSourceCss` against `useTints()`. Every component that takes a\n * color writes it through this. `undefined` for no source, and for one nothing\n * answers.\n */\nexport function useColorCss(): (source: ColorSource | null | undefined) => string | undefined {\n  const ctx = useTints();\n  return useCallback((source) => (source == null ? undefined : (colorSourceCss(source, ctx) ?? undefined)), [ctx]);\n}\n\n/**\n * Turns a `ColorSource` into a hex color under the theme, tints, and palette in force, for a\n * surface drawn without the cascade, such as a scene's paint. `useColorCss` may answer\n * `var(--wzl-…)`, which only the DOM resolves; this answers the value. `undefined` for no\n * source, and for one nothing answers.\n */\nexport function useColorHex(): (source: ColorSource | null | undefined) => string | undefined {\n  const ctx = useTints();\n  return useCallback((source) => {\n    if (source == null) return undefined;\n    const literal = colorSourceLiteral(source, ctx);\n    return (literal && colorLiteralToHex(literal)) ?? undefined;\n  }, [ctx]);\n}\n"]}

package/dist/themes/platinum.d.ts

@@ -1,4 +1,4 @@
-import { a as Theme } from '../definition-nZbgRG7A.js';
+import { a as Theme } from '../definition-DfbYMDu0.js';
 import '@weasel-js/paint';
 
 /**

package/dist/themes/platinum.js

@@ -1,4 +1,4 @@
-import { defineTheme, weaselTheme } from '../chunk-NCAQ54LO.js';
+import { defineTheme, weaselTheme } from '../chunk-X2KI4SSJ.js';
 import '../chunk-P5F3GZV6.js';
 
 // src/themes/mac-classic.theme.json

package/dist/themes/win9x.d.ts

@@ -1,4 +1,4 @@
-import { a as Theme } from '../definition-nZbgRG7A.js';
+import { a as Theme } from '../definition-DfbYMDu0.js';
 import '@weasel-js/paint';
 
 /**

package/dist/themes/win9x.js

@@ -1,4 +1,4 @@
-import { defineTheme, weaselTheme } from '../chunk-NCAQ54LO.js';
+import { defineTheme, weaselTheme } from '../chunk-X2KI4SSJ.js';
 import '../chunk-P5F3GZV6.js';
 
 // src/themes/win9x.theme.json

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weasel-js/theme",
-  "version": "1.15.1",
+  "version": "1.16.0",
   "description": "Design tokens shared by weasel-ui and weasel-hud — CSS variables + a parallel TS export.",
   "license": "MIT",
   "type": "module",
@@ -43,9 +43,10 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@weasel-js/paint": "1.15.1",
-    "@weasel-js/prefs": "1.15.1",
-    "@weasel-js/registry": "1.15.1"
+    "@weasel-js/paint": "1.16.0",
+    "@weasel-js/prefs": "1.16.0",
+    "@weasel-js/react": "1.16.0",
+    "@weasel-js/registry": "1.16.0"
   },
   "peerDependencies": {
     "react": ">=18"

package/dist/chunk-32JKTYS2.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/dtcg/value.ts","../src/chainTokens.ts","../src/dtcg/color.ts","../src/dtcg/resolve.ts","../src/resolveTheme.ts"],"names":[],"mappings":"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","file":"chunk-32JKTYS2.js","sourcesContent":["import type { TokenValue } from './types.ts';\n\n/**\n * Quote family names containing whitespace; leave everything else bare.\n * Generic keywords (`sans-serif`) and hyphen-prefixed identifiers\n * (`-apple-system`) break if quoted, and neither contains a space.\n */\nfunction fontStack(value: readonly (string | number)[]): string {\n  return value.map((f) => (typeof f === 'string' && /\\s/.test(f) ? `'${f}'` : String(f))).join(', ');\n}\n\n/**\n * A token's value as CSS renders it. A DTCG value is not always a string: a\n * `fontFamily` is a list of names and a `cubicBezier` is four numbers, and both\n * have a spelling that belongs in a stylesheet rather than in JSON.\n */\nexport function serializeTokenValue(type: string, value: TokenValue): string {\n  if (Array.isArray(value)) {\n    if (type === 'cubicBezier') return `cubic-bezier(${value.join(', ')})`;\n    if (type === 'fontFamily') return fontStack(value);\n    return value.join(', ');\n  }\n  return String(value);\n}\n\nconst BEZIER = /^cubic-bezier\\(\\s*([^)]*)\\)$/i;\n\n/**\n * The inverse of {@link serializeTokenValue}: text a person edited, back in the\n * shape a definition stores. Text that does not parse for its type is kept as\n * text rather than thrown away, so a half-typed value stays editable.\n */\nexport function parseTokenValue(type: string, text: string): TokenValue {\n  const raw = text.trim();\n  if (type === 'cubicBezier') {\n    const inner = BEZIER.exec(raw)?.[1] ?? raw;\n    const parts = inner.split(',').map((p) => Number(p.trim()));\n    return parts.length === 4 && parts.every((n) => Number.isFinite(n)) ? parts : raw;\n  }\n  if (type === 'fontFamily') {\n    const families = raw\n      .split(',')\n      .map((f) => f.trim().replace(/^['\"]|['\"]$/g, '').trim())\n      .filter((f) => f !== '');\n    return families.length > 0 ? families : raw;\n  }\n  return raw;\n}\n","import { fullSelection, mergeAxes, pick, type AxisDefs, type Selection, type Varying } from './axes.ts';\nimport type { FlatTokens, RawToken } from './dtcg/types.ts';\n\n/** One theme of an `extends` chain, as far as choosing its tokens goes. */\nexport interface ChainLink {\n  readonly axes: AxisDefs;\n  readonly tokens: Readonly<Record<string, Varying<RawToken>>>;\n}\n\n/**\n * The selection each theme of a root-first chain reads its own tokens at. An axis value a theme and\n * everything it extends never declared (one a descendant added) becomes that theme's default for the\n * axis, which is what the stylesheet's cascade gives it: no block of the ancestor matches the new\n * value, so its default declarations show through.\n */\nfunction localSelections(chain: readonly ChainLink[], selection: Selection): Selection[] {\n  let axes: AxisDefs = {};\n  return chain.map((link) => {\n    axes = mergeAxes(axes, link.axes);\n    return { ...selection, ...fullSelection(axes, selection) };\n  });\n}\n\n/** `name` from the nearest theme of a root-first chain that has it at `selection`. */\nexport function tokenAt(chain: readonly ChainLink[], name: string, selection: Selection): RawToken | undefined {\n  const local = localSelections(chain, selection);\n  for (let i = chain.length - 1; i >= 0; i--) {\n    const { tokens } = chain[i];\n    if (!Object.hasOwn(tokens, name)) continue;\n    const picked = pick(tokens[name], local[i]);\n    if (picked.ok) return picked.value;\n  }\n  return undefined;\n}\n\n/** Every token of a root-first chain at `selection`, each from the nearest theme that has it there. */\nexport function tokensAt(chain: readonly ChainLink[], selection: Selection): FlatTokens {\n  const local = localSelections(chain, selection);\n  const out: Record<string, RawToken> = {};\n  chain.forEach((link, i) => {\n    for (const [name, v] of Object.entries(link.tokens)) {\n      const picked = pick(v, local[i]);\n      if (picked.ok) out[name] = picked.value;\n    }\n  });\n  return out;\n}\n","import { parseHexBytes } from '@weasel-js/paint';\n\n/**\n * A resolved color at `alpha`, multiplied into any alpha it already carries. The\n * JS side of the alpha extension; the CSS side emits `color-mix()` instead so DOM\n * chrome keeps tracking a downstream override of the referenced token.\n *\n * Hex and `rgb()`/`rgba()` become an `rgba()` literal. Anything else — a named\n * color, `hsl()`, `oklch()`, a `var()` — becomes the same `color-mix()` the CSS\n * side writes, which the browser resolves.\n */\nexport function withAlpha(color: string, alpha: number): string {\n  const rgba = parseRgba(color.trim());\n  if (!rgba) return mixAlpha(color.trim(), alpha);\n  const [r, g, b, a] = rgba;\n  return `rgba(${r}, ${g}, ${b}, ${round(a * alpha, 3)})`;\n}\n\n/** `color` at `alpha` as a `color-mix()` with transparent, for a color only the browser can resolve. */\nexport function mixAlpha(color: string, alpha: number): string {\n  return `color-mix(in srgb, ${color} ${round(alpha * 100, 4)}%, transparent)`;\n}\n\n/** A resolved color with its alpha replaced by `alpha`, as `rgb(from c r g b / alpha)` computes it. */\nexport function atAlpha(color: string, alpha: number): string {\n  const rgba = parseRgba(color.trim());\n  if (!rgba) return `rgb(from ${color.trim()} r g b / ${alpha})`;\n  const [r, g, b] = rgba;\n  return `rgba(${r}, ${g}, ${b}, ${round(alpha, 3)})`;\n}\n\ntype Rgba = [number, number, number, number];\n\nfunction round(n: number, places: number): number {\n  return Number(n.toFixed(places));\n}\n\nfunction parseRgba(s: string): Rgba | null {\n  if (s.toLowerCase() === 'transparent') return [0, 0, 0, 0];\n  return parseHex(s) ?? parseRgbFn(s);\n}\n\nfunction parseHex(s: string): Rgba | null {\n  const bytes = parseHexBytes(s);\n  return bytes && [bytes[0], bytes[1], bytes[2], bytes[3] / 255];\n}\n\nfunction parseRgbFn(s: string): Rgba | null {\n  const m = /^rgba?\\(([^()]*)\\)$/i.exec(s);\n  if (!m) return null;\n  const [channels, alphaPart, extra] = m[1].split('/');\n  if (extra !== undefined) return null;\n  const parts = channels.trim().split(/\\s*,\\s*|\\s+/);\n  if (alphaPart !== undefined) parts.push(alphaPart.trim());\n  if (parts.length !== 3 && parts.length !== 4) return null;\n\n  const channel = (p: string) => (p.endsWith('%') ? (Number.parseFloat(p) / 100) * 255 : Number(p));\n  const alpha = (p: string) => (p.endsWith('%') ? Number.parseFloat(p) / 100 : Number(p));\n  const [r, g, b] = parts.slice(0, 3).map(channel);\n  const a = parts[3] === undefined ? 1 : alpha(parts[3]);\n  if (![r, g, b, a].every(Number.isFinite)) return null;\n  return [Math.round(r), Math.round(g), Math.round(b), a];\n}\n","import { withAlpha } from './color.ts';\nimport type { FlatTokens, ResolvedTokenMap, TokenValue } from './types.ts';\nimport { serializeTokenValue } from './value.ts';\n\n/** `{color.gray-100}` → `gray-100`. The type group is dropped, per the naming rule. */\nconst REF = /^\\{([^}]+)\\}$/;\n\nfunction refTarget(value: TokenValue): string | null {\n  if (typeof value !== 'string') return null;\n  const m = REF.exec(value.trim());\n  if (!m) return null;\n  const path = m[1];\n  const dot = path.indexOf('.');\n  return dot === -1 ? path : path.slice(dot + 1);\n}\n\n/**\n * Resolve flat tokens to final CSS-ready strings.\n *\n * Merge modes before calling: this function has no notion of modes, only of a\n * complete token set.\n */\nexport function resolveTokens(tokens: FlatTokens): ResolvedTokenMap {\n  const out: ResolvedTokenMap = {};\n  const inProgress = new Set<string>();\n\n  const resolveOne = (name: string): string => {\n    const cached = out[name];\n    if (cached !== undefined) return cached;\n\n    const token = tokens[name];\n    if (!token) throw new Error(`Unknown token \"${name}\"`);\n\n    if (inProgress.has(name)) {\n      throw new Error(`Reference cycle at token \"${name}\" (${[...inProgress].join(' → ')})`);\n    }\n    inProgress.add(name);\n\n    const target = refTarget(token.value);\n    let value: string;\n    if (target === null) {\n      value = serializeTokenValue(token.type, token.value);\n    } else if (!tokens[target]) {\n      throw new Error(`Token \"${name}\" references \"${target}\", which is not defined`);\n    } else {\n      value = resolveOne(target);\n    }\n\n    if (token.alpha !== undefined) value = withAlpha(value, token.alpha);\n\n    inProgress.delete(name);\n    out[name] = value;\n    return value;\n  };\n\n  for (const name of Object.keys(tokens)) resolveOne(name);\n  return out;\n}\n\n/** Merge a mode's tokens over the mode-invariant set. Later wins. */\nexport function mergeTokens(base: FlatTokens, mode: FlatTokens): FlatTokens {\n  return { ...base, ...mode };\n}\n","import { fullSelection, mergeAxes, type AxisDefs, type Selection } from './axes.ts';\nimport { tokensAt } from './chainTokens.ts';\nimport { resolveTokens } from './dtcg/resolve.ts';\nimport type { TokenName } from './generated/themes.ts';\nimport type { Theme } from './theme.ts';\n\n/** The output of `resolveTheme`: every token of a theme, for one selection, keyed\n *  by CSS custom-property name and flattened to a final CSS value. */\nexport type ResolvedTheme = Readonly<Record<TokenName, string>>;\n\n/** Root-first, so the leaf theme's tokens land last. */\nexport function themeChain(theme: Theme): Theme[] {\n  const out: Theme[] = [];\n  for (let t: Theme | null = theme; t; t = t.extends) out.unshift(t);\n  return out;\n}\n\n/** Every axis the chain declares. An axis declared more than once keeps every value; a descendant's value entries and default win. */\nexport function themeAxes(theme: Theme): AxisDefs {\n  return themeChain(theme).reduce<AxisDefs>((axes, t) => mergeAxes(axes, t.axes), {});\n}\n\n/**\n * Merge the extends chain at a selection, resolve every alias, and key the\n * result by CSS custom-property name. A missing or unknown axis value takes the\n * axis default, and a theme in the chain reads a value it never declared at its\n * own default for that axis.\n *\n * Pure — no DOM. An unresolvable reference throws rather than falling back.\n */\nexport function resolveTheme(theme: Theme, selection: Selection = {}): ResolvedTheme {\n  const sel = fullSelection(themeAxes(theme), selection);\n  const out: Record<string, string> = {};\n  for (const [name, value] of Object.entries(resolveTokens(tokensAt(themeChain(theme), sel)))) out[`--wzl-${name}`] = value;\n  return out as ResolvedTheme;\n}\n"]}