@adea-ai/ui 0.123.1 → 0.124.0

package/dist/components/theme/theme-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../../src/components/theme/theme-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAYnC,OAAO,EAKL,KAAK,4BAA4B,EAClC,MAAM,+BAA+B,CAAA;AACtC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AACnD,OAAO,EASL,KAAK,eAAe,EACpB,KAAK,YAAY,EAClB,MAAM,aAAa,CAAA;AAEpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,2EAA2E;IAC3E,UAAU,EAAE,eAAe,GAAG,QAAQ,CAAA;IACtC,gEAAgE;IAChE,YAAY,EAAE,MAAM,CAAA;IACpB,+DAA+D;IAC/D,WAAW,EAAE,MAAM,CAAA;IACnB;;;;OAIG;IACH,MAAM,EAAE,MAAM,CAAA;IACd,4EAA4E;IAC5E,IAAI,EAAE,MAAM,CAAA;IACZ,2FAA2F;IAC3F,KAAK,CAAC,EAAE,4BAA4B,CAAA;IACpC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,qBAAqB,EAAE,cAQnC,CAAA;AAED;;;;;;GAMG;AACH,MAAM,MAAM,YAAY,GAAG,aAAa,GAAG,SAAS,CAAA;AAEpD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,SAAS,EAAE,cAAc,GAAG,YAAY,CAEvE;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,gCAAgC;IAChC,SAAS,EAAE,MAAM,cAAc,CAAA;IAC/B,iEAAiE;IACjE,kBAAkB,EAAE,MAAM,eAAe,CAAA;IACzC,0BAA0B;IAC1B,OAAO,EAAE,MAAM,YAAY,CAAA;IAC3B,qCAAqC;IACrC,YAAY,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAA;IACtD,gEAAgE;IAChE,MAAM,EAAE,SAAS,YAAY,EAAE,CAAA;IAC/B;;;OAGG;IACH,YAAY,EAAE,MAAM,SAAS,YAAY,EAAE,CAAA;CAC5C,CAAA;AAID,wBAAgB,QAAQ,IAAI,iBAAiB,CAI5C;AAgFD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACtB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,wDAAwD;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAA;IACjC;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAA;CACpC,CAAA;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eA0GtD;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEzD;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,WAAW,CAAC,UAAU,SAAoB,GAAG,MAAM,CAGlE"}
+{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../../src/components/theme/theme-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAInC,OAAO,EAIL,KAAK,YAAY,EAClB,MAAM,aAAa,CAAA;AAGpB,OAAO,EAIL,KAAK,gBAAgB,EACtB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAML,KAAK,cAAc,EACpB,MAAM,eAAe,CAAA;AAEtB,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAC5D,OAAO,EAAE,uBAAuB,EAAE,KAAK,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AACpF,OAAO,EACL,qBAAqB,EACrB,eAAe,EACf,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,KAAK,cAAc,GACpB,MAAM,eAAe,CAAA;AAEtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACtB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,wDAAwD;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAA;IACjC;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAA;IACnC;;;;;OAKG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAA;IAC9B;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,SAAS,YAAY,EAAE,GAAG,CAAC,MAAM,SAAS,YAAY,EAAE,CAAC,CAAA;IAClE;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC5E;;;;OAIG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAA;CACpC,CAAA;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eA8GtD;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEzD;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,WAAW,CAAC,UAAU,SAAoB,GAAG,MAAM,CAGlE"}

package/dist/components/theme/theme-provider.js

@@ -1,101 +1,29 @@
-import { accentPresets } from "../../lib/tokens.js";
-import { isThemeAccentId } from "../../lib/theme-accents.js";
-import { accentVariables, builtinThemes, defaultDarkThemeId, defaultLightThemeId, themeAccentsFor, themeById, themeCssVariables } from "../../lib/themes.js";
+import { builtinThemes, themeAccentsFor } from "../../lib/themes.js";
 import { safeScriptStringLiteral } from "../../lib/safe-script.js";
-import { DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS, applyAppearanceFontSettings, fontSettingsBootstrapScript, normalizeAppearanceEditorFontSettings } from "../../lib/appearance-font-settings.js";
+import { fontSettingsBootstrapScript } from "../../lib/appearance-font-settings.js";
+import { themeContext, useOptionalTheme, useTheme } from "./theme-context.js";
+import { defaultThemeSelection, initialThemeSelection, mergeRegistry, mergeThemeSelection, resolveThemeState, resolvedDensity } from "./theme-state.js";
+import { applyThemeToRoot, applyWithoutTransitions } from "./theme-document.js";
+import { localStoragePersistence, readPersisted, writePersisted } from "./theme-persistence.js";
 import { createComponent } from "solid-js/web";
-import { createContext, createEffect, createMemo, createSignal, onCleanup, splitProps, useContext } from "solid-js";
+import { createEffect, createMemo, createSignal, onCleanup, splitProps } from "solid-js";
 //#region src/components/theme/theme-provider.tsx
-var defaultThemeSelection = {
-	appearance: "system",
-	lightThemeId: defaultLightThemeId,
-	darkThemeId: defaultDarkThemeId,
-	accent: "theme",
-	font: "system",
-	fonts: DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS,
-	density: "comfortable"
-};
-/**
-* A stored selection's density, defaulted.
-*
-* The stored value is read through here rather than trusted, because a preference
-* written before density existed has no `density` key and a hand-edited store may
-* hold anything.
-*/
-function resolvedDensity(selection) {
-	return selection.density === "compact" ? "compact" : "comfortable";
-}
-var ThemeContext = createContext();
-function useTheme() {
-	const value = useContext(ThemeContext);
-	if (!value) throw new Error("useTheme must be called inside a <ThemeProvider>.");
-	return value;
-}
-/**
-* The preference store, or nothing.
-*
-* Only ever called inside a `try`: where storage is blocked — a sandboxed iframe, a
-* privacy mode, a denied site-data permission — merely *reading* the `localStorage`
-* global throws ("Access is denied", `SecurityError`), so even the `typeof` guard
-* has to sit inside the `try` rather than in front of it. Without a store the
-* preference lives only in the provider's signal for the session.
-*/
-function preferenceStore() {
-	return typeof localStorage === "undefined" ? void 0 : localStorage;
-}
-/** The stored preference, validated against the catalogue. */
-function readSelection(storageKey) {
-	try {
-		const raw = preferenceStore()?.getItem(storageKey);
-		if (!raw) return defaultThemeSelection;
-		const parsed = JSON.parse(raw);
-		const fonts = normalizeAppearanceEditorFontSettings(parsed.fonts, parsed.font).settings;
-		return {
-			appearance: parsed.appearance === "light" || parsed.appearance === "dark" || parsed.appearance === "system" ? parsed.appearance : defaultThemeSelection.appearance,
-			lightThemeId: themeById(parsed.lightThemeId ?? "")?.appearance === "light" ? parsed.lightThemeId : defaultLightThemeId,
-			darkThemeId: themeById(parsed.darkThemeId ?? "")?.appearance === "dark" ? parsed.darkThemeId : defaultDarkThemeId,
-			accent: typeof parsed.accent === "string" && (accentPresets.some((preset) => preset.id === parsed.accent) || isThemeAccentId(parsed.accent)) ? parsed.accent : defaultThemeSelection.accent,
-			font: fonts.ui.family,
-			fonts,
-			density: resolvedDensity(parsed)
-		};
-	} catch {
-		return defaultThemeSelection;
-	}
-}
-/** Keep the deprecated single-font view synchronized with the UI axis. */
-function mergeThemeSelection(base, patch) {
-	const merged = {
-		...base,
-		...patch
-	};
-	let fonts;
-	if (patch.fonts !== void 0) fonts = normalizeAppearanceEditorFontSettings(patch.fonts).settings;
-	else if (patch.font !== void 0) {
-		const currentFonts = normalizeAppearanceEditorFontSettings(base.fonts, base.font).settings;
-		fonts = normalizeAppearanceEditorFontSettings({
-			...currentFonts,
-			ui: {
-				...currentFonts.ui,
-				family: patch.font
-			}
-		}).settings;
-	} else fonts = normalizeAppearanceEditorFontSettings(merged.fonts, merged.font).settings;
-	return {
-		...merged,
-		fonts,
-		font: fonts.ui.family
-	};
-}
 function ThemeProvider(props) {
 	const [local] = splitProps(props, [
 		"children",
 		"storageKey",
 		"initial",
-		"selection"
+		"selection",
+		"persistence",
+		"themes",
+		"transformTokens",
+		"disableTransitionOnChange"
 	]);
 	const storageKey = () => local.storageKey ?? "adea-appearance";
-	const [selection, setSelectionState] = createSignal(mergeThemeSelection(readSelection(storageKey()), local.initial ?? {}));
+	const persistence = local.persistence ?? localStoragePersistence(storageKey);
+	const extraThemes = createMemo(() => typeof local.themes === "function" ? local.themes() : local.themes ?? []);
+	const registry = createMemo(() => mergeRegistry(builtinThemes, extraThemes()));
+	const [selection, setSelectionState] = createSignal(initialThemeSelection(readPersisted(persistence), local.initial));
 	createEffect(() => {
 		const incoming = local.selection;
 		if (incoming) setSelectionState((current) => mergeThemeSelection(current, incoming));
@@ -108,33 +36,34 @@ function ThemeProvider(props) {
 		query.addEventListener("change", onChange);
 		onCleanup(() => query.removeEventListener("change", onChange));
 	}
-	const resolvedAppearance = createMemo(() => {
-		const preference = selection().appearance;
-		if (preference === "system") return systemAppearance();
-		return preference;
-	});
-	const variant = createMemo(() => {
-		const id = resolvedAppearance() === "dark" ? selection().darkThemeId : selection().lightThemeId;
-		return themeById(id) ?? builtinThemes[0];
+	const committed = createMemo(() => resolveThemeState(selection(), systemAppearance(), registry()));
+	const resolvedAppearance = createMemo(() => committed().appearance);
+	const variant = createMemo(() => committed().variant);
+	const [draft, setDraft] = createSignal();
+	const shownSelection = createMemo(() => {
+		const preview = draft();
+		return preview ? mergeThemeSelection(selection(), preview) : selection();
 	});
+	const shown = createMemo(() => draft() ? resolveThemeState(shownSelection(), systemAppearance(), registry()) : committed());
+	let written;
+	let restoreTransitions;
 	createEffect(() => {
 		if (typeof document === "undefined") return;
-		const root = document.documentElement;
-		const active = variant();
-		const properties = { ...themeCssVariables(active) };
-		const accent = accentVariables(selection().accent, resolvedAppearance(), selection());
-		if (accent) Object.assign(properties, accent);
-		for (const [name, value] of Object.entries(properties)) root.style.setProperty(name, value);
-		root.classList.toggle("dark", resolvedAppearance() === "dark");
-		root.dataset["theme"] = active.id;
-		root.dataset["appearance"] = resolvedAppearance();
-		root.style.colorScheme = resolvedAppearance();
-		if (!accent) root.removeAttribute("data-accent");
-		else root.dataset["accent"] = selection().accent;
-		applyAppearanceFontSettings(root, normalizeAppearanceEditorFontSettings(selection().fonts, selection().font).settings);
-		if (resolvedDensity(selection()) === "comfortable") root.removeAttribute("data-density");
-		else root.dataset["density"] = resolvedDensity(selection());
+		const state = {
+			selection: shownSelection(),
+			appearance: shown().appearance,
+			variant: shown().variant
+		};
+		const options = { transformTokens: local.transformTokens };
+		const apply = () => {
+			written = applyThemeToRoot(document.documentElement, state, options, written);
+		};
+		if (local.disableTransitionOnChange) {
+			restoreTransitions?.();
+			restoreTransitions = applyWithoutTransitions(document, apply);
+		} else apply();
 	});
+	onCleanup(() => restoreTransitions?.());
 	const themeAccents = createMemo(() => themeAccentsFor(selection().lightThemeId, selection().darkThemeId));
 	const value = {
 		selection,
@@ -142,15 +71,20 @@ function ThemeProvider(props) {
 		variant,
 		themes: builtinThemes,
 		themeAccents,
+		allThemes: registry,
+		preview(next) {
+			setDraft(next ? { ...next } : void 0);
+		},
+		previewing: () => draft() !== void 0,
 		setSelection(patch) {
 			const next = mergeThemeSelection(selection(), patch);
 			setSelectionState(next);
-			try {
-				preferenceStore()?.setItem(storageKey(), JSON.stringify(next));
-			} catch {}
+			setDraft(void 0);
+			writePersisted(persistence, next);
 		}
 	};
-	return createComponent(ThemeContext.Provider, {
+	const Context = themeContext();
+	return createComponent(Context.Provider, {
 		value,
 		get children() {
 			return local.children;
@@ -201,6 +135,6 @@ function themeScript(storageKey = "adea-appearance") {
 	return `${`(function(){try{var s=localStorage.getItem(${inlineScriptLiteral(storageKey)});var p=s?JSON.parse(s):{};var a=p.appearance||'system';var d=a==='dark'||(a==='system'&&window.matchMedia('(prefers-color-scheme: dark)').matches);var r=document.documentElement;if(d)r.classList.add('dark');r.style.colorScheme=d?'dark':'light';if(p.accent&&p.accent!=='theme')r.dataset.accent=p.accent;if(p.density==='compact')r.dataset.density='compact';}catch(e){}})();`}${fontSettingsBootstrapScript(storageKey)}`;
 }
 //#endregion
-export { ThemeProvider, defaultThemeSelection, inlineScriptLiteral, resolvedDensity, themeScript, useTheme };
+export { ThemeProvider, defaultThemeSelection, inlineScriptLiteral, localStoragePersistence, resolvedDensity, themeScript, useOptionalTheme, useTheme };
 
 //# sourceMappingURL=theme-provider.js.map

package/dist/components/theme/theme-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-provider.js","names":["JSX","createContext","createEffect","createMemo","createSignal","onCleanup","splitProps","useContext","accentPresets","safeScriptStringLiteral","applyAppearanceFontSettings","DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS","fontSettingsBootstrapScript","normalizeAppearanceEditorFontSettings","AppearanceEditorFontSettings","AccentPreset","accentVariables","builtinThemes","defaultDarkThemeId","defaultLightThemeId","isThemeAccentId","themeAccentsFor","themeById","themeCssVariables","ThemeAppearance","ThemeVariant","ThemeSelection","appearance","lightThemeId","darkThemeId","accent","font","fonts","density","ThemeDensity","defaultThemeSelection","resolvedDensity","selection","ThemeContextValue","resolvedAppearance","variant","setSelection","patch","Partial","themes","themeAccents","ThemeContext","useTheme","value","Error","preferenceStore","Storage","localStorage","undefined","readSelection","storageKey","raw","getItem","parsed","JSON","parse","settings","some","preset","id","ui","family","mergeThemeSelection","base","merged","currentFonts","ThemeProviderProps","children","Element","initial","ThemeProvider","props","local","setSelectionState","incoming","current","systemAppearance","setSystemAppearance","window","matchMedia","query","matches","onChange","event","MediaQueryListEvent","addEventListener","removeEventListener","preference","document","root","documentElement","active","properties","Object","assign","name","entries","style","setProperty","classList","toggle","dataset","colorScheme","removeAttribute","next","setItem","stringify","_$createComponent","Provider","inlineScriptLiteral","themeScript","script","_$createComponent"],"sources":["../../../src/components/theme/theme-provider.tsx"],"sourcesContent":["import type { JSX } from 'solid-js'\nimport {\n  createContext,\n  createEffect,\n  createMemo,\n  createSignal,\n  onCleanup,\n  splitProps,\n  useContext,\n} from 'solid-js'\nimport { accentPresets } from '#lib/tokens'\nimport { safeScriptStringLiteral } from '#lib/safe-script'\nimport {\n  applyAppearanceFontSettings,\n  DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS,\n  fontSettingsBootstrapScript,\n  normalizeAppearanceEditorFontSettings,\n  type AppearanceEditorFontSettings,\n} from '#lib/appearance-font-settings'\nimport type { AccentPreset } from '@adea-ai/themes'\nimport {\n  accentVariables,\n  builtinThemes,\n  defaultDarkThemeId,\n  defaultLightThemeId,\n  isThemeAccentId,\n  themeAccentsFor,\n  themeById,\n  themeCssVariables,\n  type ThemeAppearance,\n  type ThemeVariant,\n} from '#lib/themes'\n\n/**\n * ThemeProvider.\n *\n * Owns the appearance preference and applies it to the document. One provider near\n * the root; everything below reads it.\n *\n * ## What a preference is\n *\n * Four independent choices, and keeping them independent is the point:\n *\n *   - **appearance** — light, dark, or follow the system.\n *   - **a theme per appearance** — so a user can run Catppuccin Mocha by night and\n *     Solarized Light by day without re-choosing when the system flips.\n *   - **an accent** — adea's six presets, or one of the accents the selected theme\n *     pair carries itself (`ansi-blue`…), which re-colour the interactive roles on\n *     top of whichever theme is active.\n *   - **fonts** — separate family and size choices for UI, content and code.\n *\n * Four axes rather than one list of presets, because they compose: a user who wants\n * Nord with a violet accent and the system font should not need someone to author\n * that combination.\n *\n * ## Why the variants are applied as inline properties\n *\n * The catalogue is data, and a theme is applied by writing its roles onto\n * `<html>` as custom properties. That is what makes an imported palette work\n * without a hand-written `[data-theme]` block per theme, and it is why a settings\n * UI can show a preview by reading the same object rather than by loading a\n * stylesheet. `theme.css` keeps the default theme's values so the first paint is\n * correct before any script runs.\n */\nexport type ThemeSelection = {\n  /** `system` follows `prefers-color-scheme` and updates when it changes. */\n  appearance: ThemeAppearance | 'system'\n  /** The variant to use when the resolved appearance is light. */\n  lightThemeId: string\n  /** The variant to use when the resolved appearance is dark. */\n  darkThemeId: string\n  /**\n   * An `accentPresets` id, a theme accent id from `themeAccents()` (`ansi-blue`…),\n   * or `theme` for the variant's own primary. A theme accent the current pair does\n   * not offer falls back to the variant's own primary.\n   */\n  accent: string\n  /** UI-family alias for consumers of the original single-font preference. */\n  font: string\n  /** UI, content and code font settings. Omitted legacy records are migrated from `font`. */\n  fonts?: AppearanceEditorFontSettings\n  /**\n   * `comfortable` is the system's default geometry; `compact` moves the control\n   * ladder down one rung.\n   *\n   * Optional, and defaulted on read, so a preference stored before density existed\n   * keeps working and `ThemeSelection` stays assignable without it.\n   */\n  density?: ThemeDensity\n}\n\nexport const defaultThemeSelection: ThemeSelection = {\n  appearance: 'system',\n  lightThemeId: defaultLightThemeId,\n  darkThemeId: defaultDarkThemeId,\n  accent: 'theme',\n  font: 'system',\n  fonts: DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS,\n  density: 'comfortable',\n}\n\n/**\n * The two density rungs.\n *\n * `comfortable` is the geometry in `theme.css`, so it is the absence of an\n * attribute rather than a value: a document that ships no `data-density` at all\n * renders correctly, which is what keeps this additive.\n */\nexport type ThemeDensity = 'comfortable' | 'compact'\n\n/**\n * A stored selection's density, defaulted.\n *\n * The stored value is read through here rather than trusted, because a preference\n * written before density existed has no `density` key and a hand-edited store may\n * hold anything.\n */\nexport function resolvedDensity(selection: ThemeSelection): ThemeDensity {\n  return selection.density === 'compact' ? 'compact' : 'comfortable'\n}\n\nexport type ThemeContextValue = {\n  /** The preference as stored. */\n  selection: () => ThemeSelection\n  /** What the preference resolves to right now, after `system`. */\n  resolvedAppearance: () => ThemeAppearance\n  /** The variant in use. */\n  variant: () => ThemeVariant\n  /** Update part of the preference. */\n  setSelection: (patch: Partial<ThemeSelection>) => void\n  /** The catalogue, so a picker does not import it separately. */\n  themes: readonly ThemeVariant[]\n  /**\n   * The accents the selected light/dark pair carries, offered beside the presets.\n   * Follows the selection: a different theme pair may offer different slots.\n   */\n  themeAccents: () => readonly AccentPreset[]\n}\n\nconst ThemeContext = createContext<ThemeContextValue>()\n\nexport function useTheme(): ThemeContextValue {\n  const value = useContext(ThemeContext)\n  if (!value) throw new Error('useTheme must be called inside a <ThemeProvider>.')\n  return value\n}\n\n/**\n * The preference store, or nothing.\n *\n * Only ever called inside a `try`: where storage is blocked — a sandboxed iframe, a\n * privacy mode, a denied site-data permission — merely *reading* the `localStorage`\n * global throws (\"Access is denied\", `SecurityError`), so even the `typeof` guard\n * has to sit inside the `try` rather than in front of it. Without a store the\n * preference lives only in the provider's signal for the session.\n */\nfunction preferenceStore(): Storage | undefined {\n  return typeof localStorage === 'undefined' ? undefined : localStorage\n}\n\n/** The stored preference, validated against the catalogue. */\nfunction readSelection(storageKey: string): ThemeSelection {\n  try {\n    const raw = preferenceStore()?.getItem(storageKey)\n    if (!raw) return defaultThemeSelection\n    const parsed = JSON.parse(raw) as Partial<ThemeSelection>\n    const fonts = normalizeAppearanceEditorFontSettings(parsed.fonts, parsed.font).settings\n    return {\n      appearance:\n        parsed.appearance === 'light' ||\n        parsed.appearance === 'dark' ||\n        parsed.appearance === 'system'\n          ? parsed.appearance\n          : defaultThemeSelection.appearance,\n      // An unknown id would leave the document with no theme at all, so a stale\n      // preference from an older catalogue falls back rather than applying nothing.\n      lightThemeId:\n        themeById(parsed.lightThemeId ?? '')?.appearance === 'light'\n          ? (parsed.lightThemeId as string)\n          : defaultLightThemeId,\n      darkThemeId:\n        themeById(parsed.darkThemeId ?? '')?.appearance === 'dark'\n          ? (parsed.darkThemeId as string)\n          : defaultDarkThemeId,\n      // A theme accent is kept whenever it names a slot, even one the stored pair\n      // cannot offer: the id is role-shaped so it survives a theme switch, and an\n      // unoffered slot already resolves to the theme's own primary when applied.\n      accent:\n        typeof parsed.accent === 'string' &&\n        (accentPresets.some((preset) => preset.id === parsed.accent) ||\n          isThemeAccentId(parsed.accent))\n          ? parsed.accent\n          : defaultThemeSelection.accent,\n      font: fonts.ui.family,\n      fonts,\n      // Every axis has to be read back here, or it is lost twice: the effect below\n      // removes the `data-density` that `themeScript` set for the first paint, and\n      // the next `setSelection` rewrites the store without it.\n      density: resolvedDensity(parsed as ThemeSelection),\n    }\n  } catch {\n    return defaultThemeSelection\n  }\n}\n\n/** Keep the deprecated single-font view synchronized with the UI axis. */\nfunction mergeThemeSelection(base: ThemeSelection, patch: Partial<ThemeSelection>): ThemeSelection {\n  const merged = { ...base, ...patch }\n  let fonts: AppearanceEditorFontSettings\n\n  if (patch.fonts !== undefined) {\n    fonts = normalizeAppearanceEditorFontSettings(patch.fonts).settings\n  } else if (patch.font !== undefined) {\n    const currentFonts = normalizeAppearanceEditorFontSettings(base.fonts, base.font).settings\n    fonts = normalizeAppearanceEditorFontSettings({\n      ...currentFonts,\n      ui: { ...currentFonts.ui, family: patch.font },\n    }).settings\n  } else {\n    fonts = normalizeAppearanceEditorFontSettings(merged.fonts, merged.font).settings\n  }\n\n  return { ...merged, fonts, font: fonts.ui.family }\n}\n\nexport type ThemeProviderProps = {\n  children?: JSX.Element\n  /** Where the preference is persisted. Distinct per application. */\n  storageKey?: string\n  /** Start from this instead of the stored preference. */\n  initial?: Partial<ThemeSelection>\n  /**\n   * The selection, owned by the caller.\n   *\n   * For a consumer that keeps the state itself — a settings store, or a workshop\n   * whose selection lives in Storybook globals — rather than handing it to this\n   * provider's signal. Each change lands here and the document follows; nothing is\n   * written to the store, because the caller is the one who persists. A picker\n   * below the provider still works, and its change is the caller's to read back.\n   *\n   * Absent, the provider is the whole owner: it reads `storageKey` on mount,\n   * seeds from `initial`, and persists every `setSelection`.\n   */\n  selection?: Partial<ThemeSelection>\n}\n\nexport function ThemeProvider(props: ThemeProviderProps) {\n  const [local] = splitProps(props, ['children', 'storageKey', 'initial', 'selection'])\n  const storageKey = () => local.storageKey ?? 'adea-appearance'\n\n  const [selection, setSelectionState] = createSignal<ThemeSelection>(\n    mergeThemeSelection(readSelection(storageKey()), local.initial ?? {})\n  )\n\n  // The controlled half of the contract. A patch from the owner replaces the\n  // matching axes; the stored preference is untouched, since the owner is the one\n  // that persists. Reading `local.selection` — a prop getter, not a destructured\n  // value — is what keeps this subscribed for the provider's lifetime.\n  createEffect(() => {\n    const incoming = local.selection\n    if (incoming) setSelectionState((current) => mergeThemeSelection(current, incoming))\n  })\n\n  const [systemAppearance, setSystemAppearance] = createSignal<ThemeAppearance>('light')\n\n  if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {\n    const query = window.matchMedia('(prefers-color-scheme: dark)')\n    setSystemAppearance(query.matches ? 'dark' : 'light')\n    const onChange = (event: MediaQueryListEvent) =>\n      setSystemAppearance(event.matches ? 'dark' : 'light')\n    query.addEventListener('change', onChange)\n    onCleanup(() => query.removeEventListener('change', onChange))\n  }\n\n  const resolvedAppearance = createMemo<ThemeAppearance>(() => {\n    const preference = selection().appearance\n    if (preference === 'system') return systemAppearance()\n    return preference\n  })\n\n  const variant = createMemo<ThemeVariant>(() => {\n    const id = resolvedAppearance() === 'dark' ? selection().darkThemeId : selection().lightThemeId\n    return themeById(id) ?? builtinThemes[0]!\n  })\n\n  createEffect(() => {\n    if (typeof document === 'undefined') return\n    const root = document.documentElement\n    const active = variant()\n\n    // The variant's roles, as properties. `--primary` and `--ring` are written here\n    // too, and an accent selection is layered over them below.\n    //\n    // The accent is applied *here* rather than left to the `[data-accent]` blocks in\n    // `theme.css`, because this loop writes inline custom properties and an inline\n    // declaration outranks every stylesheet selector however specific it is. The\n    // blocks still exist and are still correct — they are what styles the window\n    // before this runs — but they cannot win from here, so leaving the accent to\n    // them meant the attribute was set, the rules were present, and nothing\n    // changed on screen.\n    const properties = { ...themeCssVariables(active) }\n    const accent = accentVariables(selection().accent, resolvedAppearance(), selection())\n    if (accent) Object.assign(properties, accent)\n\n    for (const [name, value] of Object.entries(properties)) {\n      root.style.setProperty(name, value)\n    }\n\n    root.classList.toggle('dark', resolvedAppearance() === 'dark')\n    root.dataset['theme'] = active.id\n    root.dataset['appearance'] = resolvedAppearance()\n    root.style.colorScheme = resolvedAppearance()\n\n    if (!accent) root.removeAttribute('data-accent')\n    else root.dataset['accent'] = selection().accent\n\n    applyAppearanceFontSettings(\n      root,\n      normalizeAppearanceEditorFontSettings(selection().fonts, selection().font).settings\n    )\n\n    // Density is a pure token shift, so unlike the colour axes there is nothing to\n    // compute: the attribute selects a block in `theme.css`. It is applied here for\n    // the same reason as the others — this is the one place that knows what the\n    // current selection is, and it is the only writer of these attributes.\n    if (resolvedDensity(selection()) === 'comfortable') root.removeAttribute('data-density')\n    else root.dataset['density'] = resolvedDensity(selection())\n  })\n\n  const themeAccents = createMemo(() =>\n    themeAccentsFor(selection().lightThemeId, selection().darkThemeId)\n  )\n\n  const value: ThemeContextValue = {\n    selection,\n    resolvedAppearance,\n    variant,\n    themes: builtinThemes,\n    themeAccents,\n    setSelection(patch) {\n      const next = mergeThemeSelection(selection(), patch)\n      setSelectionState(next)\n      try {\n        preferenceStore()?.setItem(storageKey(), JSON.stringify(next))\n      } catch {\n        // A full, blocked or unavailable store must not break the switch: the\n        // preference simply does not survive the reload.\n      }\n    },\n  }\n\n  return <ThemeContext.Provider value={value}>{local.children}</ThemeContext.Provider>\n}\n\n/**\n * A string as a JavaScript literal that is also safe inside an inline `<script>`.\n *\n * `JSON.stringify` produces a correct JavaScript literal, and it is **not** safe\n * here: it leaves `<` and `>` alone, so a value containing `</script>` ends the tag\n * early and everything after it is parsed as HTML. That is the classic inline-script\n * injection, and it is a real one even though the value is a developer-supplied prop\n * rather than user input — a prop can come from configuration, and a key that happens\n * to contain a closing tag should not be able to execute.\n *\n * The escape is also correct JavaScript: `\\u003c` is `<` to the parser, so the value\n * is byte-identical at runtime and inert to the HTML tokenizer. `\\u2028` and `\\u2029`\n * are escaped for the neighbouring reason — they are legal inside a JSON string and\n * were, before ES2019, line terminators to a JavaScript parser.\n *\n * CodeQL flags the unescaped form as `js/bad-code-sanitization`, which is how this\n * was found; `tests/theme-script.test.ts` pins it so it cannot come back.\n */\nexport function inlineScriptLiteral(value: string): string {\n  return safeScriptStringLiteral(value)\n}\n\n/**\n * The no-flash script.\n *\n * Rendered inline in `<head>` before any stylesheet that matters. Without it a dark\n * preference paints the light theme first and then swaps, which is the flash every\n * themed application has to solve and the one thing a provider cannot do from\n * inside the body.\n *\n * Deliberately tiny and dependency-free: it reads the stored preference, resolves\n * `system`, and sets the class. It does not apply the variant's roles — the default\n * theme in `theme.css` covers the first paint, and the provider writes the rest on\n * mount.\n *\n * The script reads two values out of `localStorage` and writes them to `dataset`,\n * which is a *property* assignment rather than code: a stored accent or font id can\n * set an attribute and cannot execute. The one value that reaches the source as text\n * is `storageKey`, and it goes through {@link inlineScriptLiteral} for the reason\n * documented there.\n */\nexport function themeScript(storageKey = 'adea-appearance'): string {\n  const script = `(function(){try{var s=localStorage.getItem(${inlineScriptLiteral(storageKey)});var p=s?JSON.parse(s):{};var a=p.appearance||'system';var d=a==='dark'||(a==='system'&&window.matchMedia('(prefers-color-scheme: dark)').matches);var r=document.documentElement;if(d)r.classList.add('dark');r.style.colorScheme=d?'dark':'light';if(p.accent&&p.accent!=='theme')r.dataset.accent=p.accent;if(p.density==='compact')r.dataset.density='compact';}catch(e){}})();`\n  return `${script}${fontSettingsBootstrapScript(storageKey)}`\n}\n"],"mappings":"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"}
+{"version":3,"file":"theme-provider.js","names":["JSX","createEffect","createMemo","createSignal","onCleanup","splitProps","safeScriptStringLiteral","fontSettingsBootstrapScript","builtinThemes","themeAccentsFor","ThemeAppearance","ThemeVariant","themeContext","applyThemeToRoot","applyWithoutTransitions","localStoragePersistence","readPersisted","writePersisted","ThemePersistence","initialThemeSelection","mergeRegistry","mergeThemeSelection","resolveThemeState","ThemeContextValue","ThemeSelection","useOptionalTheme","useTheme","defaultThemeSelection","resolvedDensity","ThemeDensity","ThemeProviderProps","children","Element","storageKey","initial","Partial","selection","persistence","themes","transformTokens","tokens","Record","disableTransitionOnChange","ThemeProvider","props","local","extraThemes","registry","setSelectionState","incoming","current","systemAppearance","setSystemAppearance","window","matchMedia","query","matches","onChange","event","MediaQueryListEvent","addEventListener","removeEventListener","committed","resolvedAppearance","appearance","variant","draft","setDraft","shownSelection","preview","shown","written","ReadonlySet","restoreTransitions","document","state","options","apply","documentElement","themeAccents","lightThemeId","darkThemeId","value","allThemes","next","undefined","previewing","setSelection","patch","Context","_$createComponent","Provider","inlineScriptLiteral","themeScript","script","_$createComponent"],"sources":["../../../src/components/theme/theme-provider.tsx"],"sourcesContent":["import type { JSX } from 'solid-js'\nimport { createEffect, createMemo, createSignal, onCleanup, splitProps } from 'solid-js'\nimport { safeScriptStringLiteral } from '#lib/safe-script'\nimport { fontSettingsBootstrapScript } from '#lib/appearance-font-settings'\nimport {\n  builtinThemes,\n  themeAccentsFor,\n  type ThemeAppearance,\n  type ThemeVariant,\n} from '#lib/themes'\nimport { themeContext } from './theme-context'\nimport { applyThemeToRoot, applyWithoutTransitions } from './theme-document'\nimport {\n  localStoragePersistence,\n  readPersisted,\n  writePersisted,\n  type ThemePersistence,\n} from './theme-persistence'\nimport {\n  initialThemeSelection,\n  mergeRegistry,\n  mergeThemeSelection,\n  resolveThemeState,\n  type ThemeContextValue,\n  type ThemeSelection,\n} from './theme-state'\n\nexport { useOptionalTheme, useTheme } from './theme-context'\nexport { localStoragePersistence, type ThemePersistence } from './theme-persistence'\nexport {\n  defaultThemeSelection,\n  resolvedDensity,\n  type ThemeContextValue,\n  type ThemeDensity,\n  type ThemeSelection,\n} from './theme-state'\n\n/**\n * ThemeProvider.\n *\n * Owns the appearance preference and applies it to the document. One provider near\n * the root; everything below reads it.\n *\n * ## What a preference is\n *\n * Four independent choices (`ThemeSelection`), and keeping them independent is the\n * point: appearance, a theme per appearance, an accent and fonts. They compose: a\n * user who wants Nord with a violet accent and the system font should not need\n * someone to author that combination.\n *\n * ## Where the rules live\n *\n * This component is wiring. What a selection merges to and resolves to is\n * `theme-state.ts`; what lands on `<html>` is `theme-document.ts`; where the\n * preference is kept is `theme-persistence.ts`. Each is plain code a test can call,\n * which is the reason none of it is inlined here.\n *\n * ## Why the variants are applied as inline properties\n *\n * The catalogue is data, and a theme is applied by writing its roles onto\n * `<html>` as custom properties. That is what makes an imported palette work\n * without a hand-written `[data-theme]` block per theme, and it is why a settings\n * UI can show a preview by reading the same object rather than by loading a\n * stylesheet. `theme.css` keeps the default theme's values so the first paint is\n * correct before any script runs.\n */\nexport type ThemeProviderProps = {\n  children?: JSX.Element\n  /** Where the preference is persisted. Distinct per application. */\n  storageKey?: string\n  /** Start from this instead of the stored preference. */\n  initial?: Partial<ThemeSelection>\n  /**\n   * The selection, owned by the caller.\n   *\n   * For a consumer that keeps the state itself — a settings store, or a workshop\n   * whose selection lives in Storybook globals — rather than handing it to this\n   * provider's signal. Each change lands here and the document follows; nothing is\n   * written to the store, because the caller is the one who persists. A picker\n   * below the provider still works, and its change is the caller's to read back.\n   *\n   * Absent, the provider is the whole owner: it reads `storageKey` on mount,\n   * seeds from `initial`, and persists every `setSelection`.\n   */\n  selection?: Partial<ThemeSelection>\n  /**\n   * Where the preference is kept, in place of `localStorage` under `storageKey`.\n   *\n   * Read once when the provider is created, so changing the prop later does not\n   * move the store. `storageKey` is ignored when this is given.\n   */\n  persistence?: ThemePersistence\n  /**\n   * Variants the host adds to the built-in catalogue — themes a user imported.\n   *\n   * A function is read inside the provider's reactive scope, so one that reads a\n   * signal keeps the picker and the document current when the set changes. A\n   * stored id that names no variant, built in or added, paints the default of its\n   * appearance and stays in the selection untouched.\n   */\n  themes?: readonly ThemeVariant[] | (() => readonly ThemeVariant[])\n  /**\n   * Rewrites the custom properties of each pass before they are written to\n   * `<html>`: the variant's roles with the accent over them. `tokensAsHex` from\n   * `lib/themes` is the one the system ships.\n   */\n  transformTokens?: (tokens: Record<string, string>) => Record<string, string>\n  /**\n   * Switch CSS transitions off for the frame that carries a change, so a theme\n   * switch cannot animate the whole page. Off by default: it adds a `<style>`\n   * element to `<head>` for two frames on every change.\n   */\n  disableTransitionOnChange?: boolean\n}\n\nexport function ThemeProvider(props: ThemeProviderProps) {\n  const [local] = splitProps(props, [\n    'children',\n    'storageKey',\n    'initial',\n    'selection',\n    'persistence',\n    'themes',\n    'transformTokens',\n    'disableTransitionOnChange',\n  ])\n  const storageKey = () => local.storageKey ?? 'adea-appearance'\n  const persistence = local.persistence ?? localStoragePersistence(storageKey)\n\n  // Read before the first resolution and before the store is, so a persistence whose\n  // answer depends on the extras (an id it only accepts if the theme exists) sees\n  // them.\n  const extraThemes = createMemo(() =>\n    typeof local.themes === 'function' ? local.themes() : (local.themes ?? [])\n  )\n  const registry = createMemo(() => mergeRegistry(builtinThemes, extraThemes()))\n\n  const [selection, setSelectionState] = createSignal<ThemeSelection>(\n    initialThemeSelection(readPersisted(persistence), local.initial)\n  )\n\n  // The controlled half of the contract. A patch from the owner replaces the\n  // matching axes; the stored preference is untouched, since the owner is the one\n  // that persists. Reading `local.selection` — a prop getter, not a destructured\n  // value — is what keeps this subscribed for the provider's lifetime.\n  createEffect(() => {\n    const incoming = local.selection\n    if (incoming) setSelectionState((current) => mergeThemeSelection(current, incoming))\n  })\n\n  const [systemAppearance, setSystemAppearance] = createSignal<ThemeAppearance>('light')\n\n  if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {\n    const query = window.matchMedia('(prefers-color-scheme: dark)')\n    setSystemAppearance(query.matches ? 'dark' : 'light')\n    const onChange = (event: MediaQueryListEvent) =>\n      setSystemAppearance(event.matches ? 'dark' : 'light')\n    query.addEventListener('change', onChange)\n    onCleanup(() => query.removeEventListener('change', onChange))\n  }\n\n  // What the stored preference resolves to. `selection()`, `variant()` and\n  // `resolvedAppearance()` answer from this and never from a preview, so a picker\n  // that previews a draft still reads back what is committed.\n  const committed = createMemo(() => resolveThemeState(selection(), systemAppearance(), registry()))\n  const resolvedAppearance = createMemo<ThemeAppearance>(() => committed().appearance)\n  const variant = createMemo<ThemeVariant>(() => committed().variant)\n\n  const [draft, setDraft] = createSignal<Partial<ThemeSelection> | undefined>()\n  const shownSelection = createMemo(() => {\n    const preview = draft()\n    return preview ? mergeThemeSelection(selection(), preview) : selection()\n  })\n  const shown = createMemo(() =>\n    draft() ? resolveThemeState(shownSelection(), systemAppearance(), registry()) : committed()\n  )\n\n  let written: ReadonlySet<string> | undefined\n  let restoreTransitions: (() => void) | undefined\n  createEffect(() => {\n    if (typeof document === 'undefined') return\n    const state = {\n      selection: shownSelection(),\n      appearance: shown().appearance,\n      variant: shown().variant,\n    }\n    const options = { transformTokens: local.transformTokens }\n    const apply = () => {\n      written = applyThemeToRoot(document.documentElement, state, options, written)\n    }\n    if (local.disableTransitionOnChange) {\n      restoreTransitions?.()\n      restoreTransitions = applyWithoutTransitions(document, apply)\n    } else {\n      apply()\n    }\n  })\n  onCleanup(() => restoreTransitions?.())\n\n  const themeAccents = createMemo(() =>\n    themeAccentsFor(selection().lightThemeId, selection().darkThemeId)\n  )\n\n  const value: ThemeContextValue = {\n    selection,\n    resolvedAppearance,\n    variant,\n    themes: builtinThemes,\n    themeAccents,\n    allThemes: registry,\n    preview(next) {\n      setDraft(next ? { ...next } : undefined)\n    },\n    previewing: () => draft() !== undefined,\n    setSelection(patch) {\n      const next = mergeThemeSelection(selection(), patch)\n      setSelectionState(next)\n      // The committed selection is now what should be showing.\n      setDraft(undefined)\n      writePersisted(persistence, next)\n    },\n  }\n\n  const Context = themeContext()\n  return <Context.Provider value={value}>{local.children}</Context.Provider>\n}\n\n/**\n * A string as a JavaScript literal that is also safe inside an inline `<script>`.\n *\n * `JSON.stringify` produces a correct JavaScript literal, and it is **not** safe\n * here: it leaves `<` and `>` alone, so a value containing `</script>` ends the tag\n * early and everything after it is parsed as HTML. That is the classic inline-script\n * injection, and it is a real one even though the value is a developer-supplied prop\n * rather than user input — a prop can come from configuration, and a key that happens\n * to contain a closing tag should not be able to execute.\n *\n * The escape is also correct JavaScript: `\\u003c` is `<` to the parser, so the value\n * is byte-identical at runtime and inert to the HTML tokenizer. `\\u2028` and `\\u2029`\n * are escaped for the neighbouring reason — they are legal inside a JSON string and\n * were, before ES2019, line terminators to a JavaScript parser.\n *\n * CodeQL flags the unescaped form as `js/bad-code-sanitization`, which is how this\n * was found; `tests/theme-script.test.ts` pins it so it cannot come back.\n */\nexport function inlineScriptLiteral(value: string): string {\n  return safeScriptStringLiteral(value)\n}\n\n/**\n * The no-flash script.\n *\n * Rendered inline in `<head>` before any stylesheet that matters. Without it a dark\n * preference paints the light theme first and then swaps, which is the flash every\n * themed application has to solve and the one thing a provider cannot do from\n * inside the body.\n *\n * Deliberately tiny and dependency-free: it reads the stored preference, resolves\n * `system`, and sets the class. It does not apply the variant's roles — the default\n * theme in `theme.css` covers the first paint, and the provider writes the rest on\n * mount.\n *\n * The script reads two values out of `localStorage` and writes them to `dataset`,\n * which is a *property* assignment rather than code: a stored accent or font id can\n * set an attribute and cannot execute. The one value that reaches the source as text\n * is `storageKey`, and it goes through {@link inlineScriptLiteral} for the reason\n * documented there.\n */\nexport function themeScript(storageKey = 'adea-appearance'): string {\n  const script = `(function(){try{var s=localStorage.getItem(${inlineScriptLiteral(storageKey)});var p=s?JSON.parse(s):{};var a=p.appearance||'system';var d=a==='dark'||(a==='system'&&window.matchMedia('(prefers-color-scheme: dark)').matches);var r=document.documentElement;if(d)r.classList.add('dark');r.style.colorScheme=d?'dark':'light';if(p.accent&&p.accent!=='theme')r.dataset.accent=p.accent;if(p.density==='compact')r.dataset.density='compact';}catch(e){}})();`\n  return `${script}${fontSettingsBootstrapScript(storageKey)}`\n}\n"],"mappings":"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"}

package/dist/components/theme/theme-state.d.ts

@@ -0,0 +1,142 @@
+import { type AppearanceEditorFontSettings } from '#lib/appearance-font-settings';
+import type { AccentPreset } from '@adea-ai/themes';
+import { type ThemeAppearance, type ThemeVariant } from '#lib/themes';
+/**
+ * The pure half of the theme provider: what a selection is, how two selections
+ * merge, and what a selection resolves to.
+ *
+ * Nothing here touches the document, storage or a signal, so each rule can be
+ * tested by calling it. `ThemeProvider` owns the reactivity and wires these to it;
+ * `theme-document.ts` owns the writes; `theme-persistence.ts` owns the store.
+ */
+/**
+ * Four independent choices, and keeping them independent is the point:
+ *
+ *   - **appearance** — light, dark, or follow the system.
+ *   - **a theme per appearance** — so a user can run Catppuccin Mocha by night and
+ *     Solarized Light by day without re-choosing when the system flips.
+ *   - **an accent** — adea's six presets, or one of the accents the selected theme
+ *     pair carries itself (`ansi-blue`…), which re-colour the interactive roles on
+ *     top of whichever theme is active.
+ *   - **fonts** — separate family and size choices for UI, content and code.
+ */
+export type ThemeSelection = {
+    /** `system` follows `prefers-color-scheme` and updates when it changes. */
+    appearance: ThemeAppearance | 'system';
+    /** The variant to use when the resolved appearance is light. */
+    lightThemeId: string;
+    /** The variant to use when the resolved appearance is dark. */
+    darkThemeId: string;
+    /**
+     * An `accentPresets` id, a theme accent id from `themeAccents()` (`ansi-blue`…),
+     * or `theme` for the variant's own primary. A theme accent the current pair does
+     * not offer falls back to the variant's own primary.
+     */
+    accent: string;
+    /** UI-family alias for consumers of the original single-font preference. */
+    font: string;
+    /** UI, content and code font settings. Omitted legacy records are migrated from `font`. */
+    fonts?: AppearanceEditorFontSettings;
+    /**
+     * `comfortable` is the system's default geometry; `compact` moves the control
+     * ladder down one rung.
+     *
+     * Optional, and defaulted on read, so a preference stored before density existed
+     * keeps working and `ThemeSelection` stays assignable without it.
+     */
+    density?: ThemeDensity;
+};
+/**
+ * The two density rungs.
+ *
+ * `comfortable` is the geometry in `theme.css`, so it is the absence of an
+ * attribute rather than a value: a document that ships no `data-density` at all
+ * renders correctly, which is what keeps this additive.
+ */
+export type ThemeDensity = 'comfortable' | 'compact';
+/**
+ * Deliberately lists only the fields every consumer has always had. A field added
+ * to {@link ThemeSelection} later gets no default here: `JSON.stringify` drops an
+ * `undefined`, so a store written by a consumer that never sets the field stays
+ * byte-identical to what it was before the field existed.
+ */
+export declare const defaultThemeSelection: ThemeSelection;
+/**
+ * A stored selection's density, defaulted.
+ *
+ * The stored value is read through here rather than trusted, because a preference
+ * written before density existed has no `density` key and a hand-edited store may
+ * hold anything.
+ */
+export declare function resolvedDensity(selection: ThemeSelection): ThemeDensity;
+export type ThemeContextValue = {
+    /** The preference as stored. A {@link ThemeContextValue.preview} does not change it. */
+    selection: () => ThemeSelection;
+    /** What the preference resolves to right now, after `system`. */
+    resolvedAppearance: () => ThemeAppearance;
+    /** The variant in use. */
+    variant: () => ThemeVariant;
+    /** Update part of the preference. */
+    setSelection: (patch: Partial<ThemeSelection>) => void;
+    /**
+     * The built-in catalogue, so a picker does not import it separately. A plain
+     * array: {@link ThemeContextValue.allThemes} is the one that follows a host's
+     * extra themes.
+     */
+    themes: readonly ThemeVariant[];
+    /**
+     * The accents the selected light/dark pair carries, offered beside the presets.
+     * Follows the selection: a different theme pair may offer different slots.
+     */
+    themeAccents: () => readonly AccentPreset[];
+    /**
+     * The built-in catalogue followed by the provider's `themes` prop. Reactive when
+     * that prop is a function that reads signals.
+     */
+    allThemes: () => readonly ThemeVariant[];
+    /**
+     * Paint the document from `draft` laid over the stored selection, without
+     * persisting it or changing what {@link ThemeContextValue.selection} returns.
+     * `undefined` ends the preview. A {@link ThemeContextValue.setSelection} ends it
+     * too, because the committed selection is then what should be showing.
+     */
+    preview: (draft: Partial<ThemeSelection> | undefined) => void;
+    /** True while a {@link ThemeContextValue.preview} draft is on the document. */
+    previewing: () => boolean;
+};
+/** Keep the deprecated single-font view synchronized with the UI axis. */
+export declare function mergeThemeSelection(base: ThemeSelection, patch: Partial<ThemeSelection>): ThemeSelection;
+/**
+ * The selection a provider starts from: the defaults, then whatever the store
+ * returned, then `initial`.
+ *
+ * `initial` wins over the store on every mount. That precedence is part of the
+ * contract Cortana relies on (its `initial` pins `appearance` and `font`), and it
+ * is why the store's answer is only the middle layer. A store that returned
+ * nothing, or threw, or answered with explicit `undefined`s, leaves the defaults
+ * standing for those fields.
+ */
+export declare function initialThemeSelection(stored: Partial<ThemeSelection> | undefined, initial: Partial<ThemeSelection> | undefined): ThemeSelection;
+/** `system` resolved against what the operating system reports. */
+export declare function resolveAppearance(preference: ThemeSelection['appearance'], system: ThemeAppearance): ThemeAppearance;
+/** The theme id the selection names for a resolved appearance. */
+export declare function selectedThemeId(selection: ThemeSelection, appearance: ThemeAppearance): string;
+/**
+ * What a selection paints: the resolved appearance and the variant for it.
+ *
+ * An id the registry does not hold resolves to the appearance's default rather than
+ * being rewritten (see `resolveVariant`), so the selection a host stores is never
+ * changed by being unresolvable.
+ */
+export declare function resolveThemeState(selection: ThemeSelection, system: ThemeAppearance, registry: readonly ThemeVariant[]): {
+    appearance: ThemeAppearance;
+    variant: ThemeVariant;
+};
+/**
+ * The registry a provider resolves against: the catalogue, then the host's extras.
+ *
+ * The catalogue wins an id collision, because it is listed first and `resolveVariant`
+ * takes the first match: a host's variant can add a theme but cannot shadow one.
+ */
+export declare function mergeRegistry(builtin: readonly ThemeVariant[], extra: readonly ThemeVariant[] | undefined): readonly ThemeVariant[];
+//# sourceMappingURL=theme-state.d.ts.map

package/dist/components/theme/theme-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-state.d.ts","sourceRoot":"","sources":["../../../src/components/theme/theme-state.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,4BAA4B,EAClC,MAAM,+BAA+B,CAAA;AACtC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AACnD,OAAO,EAIL,KAAK,eAAe,EACpB,KAAK,YAAY,EAClB,MAAM,aAAa,CAAA;AAEpB;;;;;;;GAOG;AAEH;;;;;;;;;;GAUG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,2EAA2E;IAC3E,UAAU,EAAE,eAAe,GAAG,QAAQ,CAAA;IACtC,gEAAgE;IAChE,YAAY,EAAE,MAAM,CAAA;IACpB,+DAA+D;IAC/D,WAAW,EAAE,MAAM,CAAA;IACnB;;;;OAIG;IACH,MAAM,EAAE,MAAM,CAAA;IACd,4EAA4E;IAC5E,IAAI,EAAE,MAAM,CAAA;IACZ,2FAA2F;IAC3F,KAAK,CAAC,EAAE,4BAA4B,CAAA;IACpC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB,CAAA;AAED;;;;;;GAMG;AACH,MAAM,MAAM,YAAY,GAAG,aAAa,GAAG,SAAS,CAAA;AAEpD;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,EAAE,cAQnC,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,SAAS,EAAE,cAAc,GAAG,YAAY,CAEvE;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,wFAAwF;IACxF,SAAS,EAAE,MAAM,cAAc,CAAA;IAC/B,iEAAiE;IACjE,kBAAkB,EAAE,MAAM,eAAe,CAAA;IACzC,0BAA0B;IAC1B,OAAO,EAAE,MAAM,YAAY,CAAA;IAC3B,qCAAqC;IACrC,YAAY,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAA;IACtD;;;;OAIG;IACH,MAAM,EAAE,SAAS,YAAY,EAAE,CAAA;IAC/B;;;OAGG;IACH,YAAY,EAAE,MAAM,SAAS,YAAY,EAAE,CAAA;IAC3C;;;OAGG;IACH,SAAS,EAAE,MAAM,SAAS,YAAY,EAAE,CAAA;IACxC;;;;;OAKG;IACH,OAAO,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG,SAAS,KAAK,IAAI,CAAA;IAC7D,+EAA+E;IAC/E,UAAU,EAAE,MAAM,OAAO,CAAA;CAC1B,CAAA;AASD,0EAA0E;AAC1E,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,cAAc,EACpB,KAAK,EAAE,OAAO,CAAC,cAAc,CAAC,GAC7B,cAAc,CAiBhB;AAED;;;;;;;;;GASG;AACH,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG,SAAS,EAC3C,OAAO,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG,SAAS,GAC3C,cAAc,CAGhB;AAED,mEAAmE;AACnE,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,cAAc,CAAC,YAAY,CAAC,EACxC,MAAM,EAAE,eAAe,GACtB,eAAe,CAEjB;AAED,kEAAkE;AAClE,wBAAgB,eAAe,CAAC,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,eAAe,GAAG,MAAM,CAE9F;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,cAAc,EACzB,MAAM,EAAE,eAAe,EACvB,QAAQ,EAAE,SAAS,YAAY,EAAE,GAChC;IAAE,UAAU,EAAE,eAAe,CAAC;IAAC,OAAO,EAAE,YAAY,CAAA;CAAE,CAMxD;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAC3B,OAAO,EAAE,SAAS,YAAY,EAAE,EAChC,KAAK,EAAE,SAAS,YAAY,EAAE,GAAG,SAAS,GACzC,SAAS,YAAY,EAAE,CAEzB"}

package/dist/components/theme/theme-state.js

@@ -0,0 +1,104 @@
+import { defaultDarkThemeId, defaultLightThemeId, resolveVariant } from "../../lib/themes.js";
+import { DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS, normalizeAppearanceEditorFontSettings } from "../../lib/appearance-font-settings.js";
+//#region src/components/theme/theme-state.ts
+/**
+* Deliberately lists only the fields every consumer has always had. A field added
+* to {@link ThemeSelection} later gets no default here: `JSON.stringify` drops an
+* `undefined`, so a store written by a consumer that never sets the field stays
+* byte-identical to what it was before the field existed.
+*/
+var defaultThemeSelection = {
+	appearance: "system",
+	lightThemeId: defaultLightThemeId,
+	darkThemeId: defaultDarkThemeId,
+	accent: "theme",
+	font: "system",
+	fonts: DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS,
+	density: "comfortable"
+};
+/**
+* A stored selection's density, defaulted.
+*
+* The stored value is read through here rather than trusted, because a preference
+* written before density existed has no `density` key and a hand-edited store may
+* hold anything.
+*/
+function resolvedDensity(selection) {
+	return selection.density === "compact" ? "compact" : "comfortable";
+}
+/** A selection with the `undefined` keys of a patch left out. */
+function definedOnly(value) {
+	return Object.fromEntries(Object.entries(value).filter(([, entry]) => entry !== void 0));
+}
+/** Keep the deprecated single-font view synchronized with the UI axis. */
+function mergeThemeSelection(base, patch) {
+	const merged = {
+		...base,
+		...patch
+	};
+	let fonts;
+	if (patch.fonts !== void 0) fonts = normalizeAppearanceEditorFontSettings(patch.fonts).settings;
+	else if (patch.font !== void 0) {
+		const currentFonts = normalizeAppearanceEditorFontSettings(base.fonts, base.font).settings;
+		fonts = normalizeAppearanceEditorFontSettings({
+			...currentFonts,
+			ui: {
+				...currentFonts.ui,
+				family: patch.font
+			}
+		}).settings;
+	} else fonts = normalizeAppearanceEditorFontSettings(merged.fonts, merged.font).settings;
+	return {
+		...merged,
+		fonts,
+		font: fonts.ui.family
+	};
+}
+/**
+* The selection a provider starts from: the defaults, then whatever the store
+* returned, then `initial`.
+*
+* `initial` wins over the store on every mount. That precedence is part of the
+* contract Cortana relies on (its `initial` pins `appearance` and `font`), and it
+* is why the store's answer is only the middle layer. A store that returned
+* nothing, or threw, or answered with explicit `undefined`s, leaves the defaults
+* standing for those fields.
+*/
+function initialThemeSelection(stored, initial) {
+	return mergeThemeSelection(mergeThemeSelection(defaultThemeSelection, definedOnly(stored ?? {})), initial ?? {});
+}
+/** `system` resolved against what the operating system reports. */
+function resolveAppearance(preference, system) {
+	return preference === "system" ? system : preference;
+}
+/** The theme id the selection names for a resolved appearance. */
+function selectedThemeId(selection, appearance) {
+	return appearance === "dark" ? selection.darkThemeId : selection.lightThemeId;
+}
+/**
+* What a selection paints: the resolved appearance and the variant for it.
+*
+* An id the registry does not hold resolves to the appearance's default rather than
+* being rewritten (see `resolveVariant`), so the selection a host stores is never
+* changed by being unresolvable.
+*/
+function resolveThemeState(selection, system, registry) {
+	const appearance = resolveAppearance(selection.appearance, system);
+	return {
+		appearance,
+		variant: resolveVariant(registry, selectedThemeId(selection, appearance), appearance)
+	};
+}
+/**
+* The registry a provider resolves against: the catalogue, then the host's extras.
+*
+* The catalogue wins an id collision, because it is listed first and `resolveVariant`
+* takes the first match: a host's variant can add a theme but cannot shadow one.
+*/
+function mergeRegistry(builtin, extra) {
+	return extra && extra.length > 0 ? [...builtin, ...extra] : builtin;
+}
+//#endregion
+export { defaultThemeSelection, initialThemeSelection, mergeRegistry, mergeThemeSelection, resolveAppearance, resolveThemeState, resolvedDensity, selectedThemeId };
+
+//# sourceMappingURL=theme-state.js.map

package/dist/components/theme/theme-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-state.js","names":[],"sources":["../../../src/components/theme/theme-state.ts"],"sourcesContent":["import {\n  DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS,\n  normalizeAppearanceEditorFontSettings,\n  type AppearanceEditorFontSettings,\n} from '#lib/appearance-font-settings'\nimport type { AccentPreset } from '@adea-ai/themes'\nimport {\n  defaultDarkThemeId,\n  defaultLightThemeId,\n  resolveVariant,\n  type ThemeAppearance,\n  type ThemeVariant,\n} from '#lib/themes'\n\n/**\n * The pure half of the theme provider: what a selection is, how two selections\n * merge, and what a selection resolves to.\n *\n * Nothing here touches the document, storage or a signal, so each rule can be\n * tested by calling it. `ThemeProvider` owns the reactivity and wires these to it;\n * `theme-document.ts` owns the writes; `theme-persistence.ts` owns the store.\n */\n\n/**\n * Four independent choices, and keeping them independent is the point:\n *\n *   - **appearance** — light, dark, or follow the system.\n *   - **a theme per appearance** — so a user can run Catppuccin Mocha by night and\n *     Solarized Light by day without re-choosing when the system flips.\n *   - **an accent** — adea's six presets, or one of the accents the selected theme\n *     pair carries itself (`ansi-blue`…), which re-colour the interactive roles on\n *     top of whichever theme is active.\n *   - **fonts** — separate family and size choices for UI, content and code.\n */\nexport type ThemeSelection = {\n  /** `system` follows `prefers-color-scheme` and updates when it changes. */\n  appearance: ThemeAppearance | 'system'\n  /** The variant to use when the resolved appearance is light. */\n  lightThemeId: string\n  /** The variant to use when the resolved appearance is dark. */\n  darkThemeId: string\n  /**\n   * An `accentPresets` id, a theme accent id from `themeAccents()` (`ansi-blue`…),\n   * or `theme` for the variant's own primary. A theme accent the current pair does\n   * not offer falls back to the variant's own primary.\n   */\n  accent: string\n  /** UI-family alias for consumers of the original single-font preference. */\n  font: string\n  /** UI, content and code font settings. Omitted legacy records are migrated from `font`. */\n  fonts?: AppearanceEditorFontSettings\n  /**\n   * `comfortable` is the system's default geometry; `compact` moves the control\n   * ladder down one rung.\n   *\n   * Optional, and defaulted on read, so a preference stored before density existed\n   * keeps working and `ThemeSelection` stays assignable without it.\n   */\n  density?: ThemeDensity\n}\n\n/**\n * The two density rungs.\n *\n * `comfortable` is the geometry in `theme.css`, so it is the absence of an\n * attribute rather than a value: a document that ships no `data-density` at all\n * renders correctly, which is what keeps this additive.\n */\nexport type ThemeDensity = 'comfortable' | 'compact'\n\n/**\n * Deliberately lists only the fields every consumer has always had. A field added\n * to {@link ThemeSelection} later gets no default here: `JSON.stringify` drops an\n * `undefined`, so a store written by a consumer that never sets the field stays\n * byte-identical to what it was before the field existed.\n */\nexport const defaultThemeSelection: ThemeSelection = {\n  appearance: 'system',\n  lightThemeId: defaultLightThemeId,\n  darkThemeId: defaultDarkThemeId,\n  accent: 'theme',\n  font: 'system',\n  fonts: DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS,\n  density: 'comfortable',\n}\n\n/**\n * A stored selection's density, defaulted.\n *\n * The stored value is read through here rather than trusted, because a preference\n * written before density existed has no `density` key and a hand-edited store may\n * hold anything.\n */\nexport function resolvedDensity(selection: ThemeSelection): ThemeDensity {\n  return selection.density === 'compact' ? 'compact' : 'comfortable'\n}\n\nexport type ThemeContextValue = {\n  /** The preference as stored. A {@link ThemeContextValue.preview} does not change it. */\n  selection: () => ThemeSelection\n  /** What the preference resolves to right now, after `system`. */\n  resolvedAppearance: () => ThemeAppearance\n  /** The variant in use. */\n  variant: () => ThemeVariant\n  /** Update part of the preference. */\n  setSelection: (patch: Partial<ThemeSelection>) => void\n  /**\n   * The built-in catalogue, so a picker does not import it separately. A plain\n   * array: {@link ThemeContextValue.allThemes} is the one that follows a host's\n   * extra themes.\n   */\n  themes: readonly ThemeVariant[]\n  /**\n   * The accents the selected light/dark pair carries, offered beside the presets.\n   * Follows the selection: a different theme pair may offer different slots.\n   */\n  themeAccents: () => readonly AccentPreset[]\n  /**\n   * The built-in catalogue followed by the provider's `themes` prop. Reactive when\n   * that prop is a function that reads signals.\n   */\n  allThemes: () => readonly ThemeVariant[]\n  /**\n   * Paint the document from `draft` laid over the stored selection, without\n   * persisting it or changing what {@link ThemeContextValue.selection} returns.\n   * `undefined` ends the preview. A {@link ThemeContextValue.setSelection} ends it\n   * too, because the committed selection is then what should be showing.\n   */\n  preview: (draft: Partial<ThemeSelection> | undefined) => void\n  /** True while a {@link ThemeContextValue.preview} draft is on the document. */\n  previewing: () => boolean\n}\n\n/** A selection with the `undefined` keys of a patch left out. */\nfunction definedOnly<T extends object>(value: T): Partial<T> {\n  return Object.fromEntries(\n    Object.entries(value).filter(([, entry]) => entry !== undefined)\n  ) as Partial<T>\n}\n\n/** Keep the deprecated single-font view synchronized with the UI axis. */\nexport function mergeThemeSelection(\n  base: ThemeSelection,\n  patch: Partial<ThemeSelection>\n): ThemeSelection {\n  const merged = { ...base, ...patch }\n  let fonts: AppearanceEditorFontSettings\n\n  if (patch.fonts !== undefined) {\n    fonts = normalizeAppearanceEditorFontSettings(patch.fonts).settings\n  } else if (patch.font !== undefined) {\n    const currentFonts = normalizeAppearanceEditorFontSettings(base.fonts, base.font).settings\n    fonts = normalizeAppearanceEditorFontSettings({\n      ...currentFonts,\n      ui: { ...currentFonts.ui, family: patch.font },\n    }).settings\n  } else {\n    fonts = normalizeAppearanceEditorFontSettings(merged.fonts, merged.font).settings\n  }\n\n  return { ...merged, fonts, font: fonts.ui.family }\n}\n\n/**\n * The selection a provider starts from: the defaults, then whatever the store\n * returned, then `initial`.\n *\n * `initial` wins over the store on every mount. That precedence is part of the\n * contract Cortana relies on (its `initial` pins `appearance` and `font`), and it\n * is why the store's answer is only the middle layer. A store that returned\n * nothing, or threw, or answered with explicit `undefined`s, leaves the defaults\n * standing for those fields.\n */\nexport function initialThemeSelection(\n  stored: Partial<ThemeSelection> | undefined,\n  initial: Partial<ThemeSelection> | undefined\n): ThemeSelection {\n  const base = mergeThemeSelection(defaultThemeSelection, definedOnly(stored ?? {}))\n  return mergeThemeSelection(base, initial ?? {})\n}\n\n/** `system` resolved against what the operating system reports. */\nexport function resolveAppearance(\n  preference: ThemeSelection['appearance'],\n  system: ThemeAppearance\n): ThemeAppearance {\n  return preference === 'system' ? system : preference\n}\n\n/** The theme id the selection names for a resolved appearance. */\nexport function selectedThemeId(selection: ThemeSelection, appearance: ThemeAppearance): string {\n  return appearance === 'dark' ? selection.darkThemeId : selection.lightThemeId\n}\n\n/**\n * What a selection paints: the resolved appearance and the variant for it.\n *\n * An id the registry does not hold resolves to the appearance's default rather than\n * being rewritten (see `resolveVariant`), so the selection a host stores is never\n * changed by being unresolvable.\n */\nexport function resolveThemeState(\n  selection: ThemeSelection,\n  system: ThemeAppearance,\n  registry: readonly ThemeVariant[]\n): { appearance: ThemeAppearance; variant: ThemeVariant } {\n  const appearance = resolveAppearance(selection.appearance, system)\n  return {\n    appearance,\n    variant: resolveVariant(registry, selectedThemeId(selection, appearance), appearance),\n  }\n}\n\n/**\n * The registry a provider resolves against: the catalogue, then the host's extras.\n *\n * The catalogue wins an id collision, because it is listed first and `resolveVariant`\n * takes the first match: a host's variant can add a theme but cannot shadow one.\n */\nexport function mergeRegistry(\n  builtin: readonly ThemeVariant[],\n  extra: readonly ThemeVariant[] | undefined\n): readonly ThemeVariant[] {\n  return extra && extra.length > 0 ? [...builtin, ...extra] : builtin\n}\n"],"mappings":";;;;;;;;;AA4EA,IAAa,wBAAwC;CACnD,YAAY;CACZ,cAAc;CACd,aAAa;CACb,QAAQ;CACR,MAAM;CACN,OAAO;CACP,SAAS;AACX;;;;;;;;AASA,SAAgB,gBAAgB,WAAyC;CACvE,OAAO,UAAU,YAAY,YAAY,YAAY;AACvD;;AAuCA,SAAS,YAA8B,OAAsB;CAC3D,OAAO,OAAO,YACZ,OAAO,QAAQ,KAAK,CAAC,CAAC,QAAQ,GAAG,WAAW,UAAU,KAAA,CAAS,CACjE;AACF;;AAGA,SAAgB,oBACd,MACA,OACgB;CAChB,MAAM,SAAS;EAAE,GAAG;EAAM,GAAG;CAAM;CACnC,IAAI;CAEJ,IAAI,MAAM,UAAU,KAAA,GAClB,QAAQ,sCAAsC,MAAM,KAAK,CAAC,CAAC;MACtD,IAAI,MAAM,SAAS,KAAA,GAAW;EACnC,MAAM,eAAe,sCAAsC,KAAK,OAAO,KAAK,IAAI,CAAC,CAAC;EAClF,QAAQ,sCAAsC;GAC5C,GAAG;GACH,IAAI;IAAE,GAAG,aAAa;IAAI,QAAQ,MAAM;GAAK;EAC/C,CAAC,CAAC,CAAC;CACL,OACE,QAAQ,sCAAsC,OAAO,OAAO,OAAO,IAAI,CAAC,CAAC;CAG3E,OAAO;EAAE,GAAG;EAAQ;EAAO,MAAM,MAAM,GAAG;CAAO;AACnD;;;;;;;;;;;AAYA,SAAgB,sBACd,QACA,SACgB;CAEhB,OAAO,oBADM,oBAAoB,uBAAuB,YAAY,UAAU,CAAC,CAAC,CACrD,GAAM,WAAW,CAAC,CAAC;AAChD;;AAGA,SAAgB,kBACd,YACA,QACiB;CACjB,OAAO,eAAe,WAAW,SAAS;AAC5C;;AAGA,SAAgB,gBAAgB,WAA2B,YAAqC;CAC9F,OAAO,eAAe,SAAS,UAAU,cAAc,UAAU;AACnE;;;;;;;;AASA,SAAgB,kBACd,WACA,QACA,UACwD;CACxD,MAAM,aAAa,kBAAkB,UAAU,YAAY,MAAM;CACjE,OAAO;EACL;EACA,SAAS,eAAe,UAAU,gBAAgB,WAAW,UAAU,GAAG,UAAU;CACtF;AACF;;;;;;;AAQA,SAAgB,cACd,SACA,OACyB;CACzB,OAAO,SAAS,MAAM,SAAS,IAAI,CAAC,GAAG,SAAS,GAAG,KAAK,IAAI;AAC9D"}

package/dist/components/theme/theme-toggle.js

@@ -1,6 +1,6 @@
 import { cn } from "../../lib/utils.js";
 import { ToggleGroup, ToggleGroupItem } from "../ui/toggle-group/toggle-group.js";
-import { useTheme } from "./theme-provider.js";
+import { useTheme } from "./theme-context.js";
 import { createComponent, insert, memo, mergeProps, template } from "solid-js/web";
 import { Monitor, Moon, Sun } from "lucide-solid";
 import { For, splitProps } from "solid-js";

package/dist/index.d.ts

@@ -104,7 +104,7 @@ export * from './components/composites/help-center';
 export * from './components/composites/workspace-mark';
 export { cn } from './lib/utils';
 export { controlInteractive, controlSize, controlSizeIcon, controlSizes, cva, surfaceInteractive, type ControlSize, type VariantProps, } from './lib/variants';
-export { appearancePreviewThemes, builtinThemes, contrastRatio, defaultDarkThemeId, defaultLightThemeId, isThemeAccentId, resolveAccentPreset, themeAccentsFor, themeById, themeCssVariables, themeFamilies, themeRecordById, themeRecords, themesForAppearance, validateTheme, validateThemeRegistry, withAccent, type ThemeAppearance, type ThemeColors, type ThemeEditorPalette, type ThemeFinding, type ThemeProvenance, type ThemeTerminalPalette, type ThemeVariant, } from './lib/themes';
+export { appearancePreviewThemes, builtinThemes, contrastRatio, defaultDarkThemeId, defaultLightThemeId, isThemeAccentId, resolveAccentPreset, resolveVariant, themeAccentsFor, themeById, themeCssVariables, themeFamilies, themeRecordById, themeRecords, themesForAppearance, tokensAsHex, validateTheme, validateThemeRegistry, variantFromRecord, withAccent, type ThemeAppearance, type ThemeColors, type ThemeEditorPalette, type ThemeFinding, type ThemeProvenance, type ThemeTerminalPalette, type ThemeVariant, } from './lib/themes';
 export { keyedRows, type KeyedRow } from './lib/keyed-rows';
 export { writeClipboardText } from './lib/clipboard';
 export { formatBytes, formatReleaseDate, plainTextFromMarkdown } from './lib/version-notes';