@adea-ai/ui 0.123.0 → 0.124.0

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

@@ -0,0 +1,86 @@
+import { accentPresets } from "../../lib/tokens.js";
+import { isThemeAccentId } from "../../lib/theme-accents.js";
+import { defaultDarkThemeId, defaultLightThemeId, themeById } from "../../lib/themes.js";
+import { normalizeAppearanceEditorFontSettings } from "../../lib/appearance-font-settings.js";
+import { defaultThemeSelection, resolvedDensity } from "./theme-state.js";
+//#region src/components/theme/theme-persistence.ts
+/**
+* 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;
+	}
+}
+/**
+* The default persistence: one JSON document in `localStorage` under `key`.
+*
+* `read` is the provider's original `readSelection`, moved here unchanged — every
+* stored id is validated against the catalogue, so a stale preference falls back to
+* a default rather than reaching the document. `key` may be a function so a
+* provider whose `storageKey` prop changes writes to the key it is now given.
+*
+* Blocked, full or absent storage is survivable in both directions: a read answers
+* with the defaults and a write is dropped, so the preference simply lasts the
+* session.
+*/
+function localStoragePersistence(key) {
+	const keyOf = () => typeof key === "function" ? key() : key;
+	return {
+		read: () => readSelection(keyOf()),
+		write(next) {
+			try {
+				preferenceStore()?.setItem(keyOf(), JSON.stringify(next));
+			} catch {}
+		}
+	};
+}
+/**
+* What a persistence knows, or nothing.
+*
+* The seam's `read` must not throw, and the provider does not rely on that: a host
+* persistence is code the design system has not seen, and a theme provider that
+* fails to mount because a store misbehaved has turned a lost preference into a
+* blank application.
+*/
+function readPersisted(persistence) {
+	try {
+		return persistence.read();
+	} catch {
+		return;
+	}
+}
+/** Hand a selection to the store; a store that throws loses the preference, not the switch. */
+function writePersisted(persistence, next) {
+	try {
+		persistence.write(next);
+	} catch {}
+}
+//#endregion
+export { localStoragePersistence, readPersisted, writePersisted };
+
+//# sourceMappingURL=theme-persistence.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"theme-persistence.js","names":[],"sources":["../../../src/components/theme/theme-persistence.ts"],"sourcesContent":["import { accentPresets } from '#lib/tokens'\nimport { normalizeAppearanceEditorFontSettings } from '#lib/appearance-font-settings'\nimport { defaultDarkThemeId, defaultLightThemeId, isThemeAccentId, themeById } from '#lib/themes'\nimport { defaultThemeSelection, resolvedDensity, type ThemeSelection } from './theme-state'\n\n/**\n * Where a selection is kept between sessions.\n *\n * The provider never touches storage itself; it asks a `ThemePersistence`. The\n * default is {@link localStoragePersistence}, which is what the provider always did.\n * A host that stores the preference in a different shape, under a versioned\n * envelope, or somewhere that is not `localStorage` supplies its own and the\n * resolution and application rules stay the shared ones.\n *\n * The contract is deliberately narrow, so that an implementation cannot make the\n * provider less safe than it was:\n *\n *   - `read` is synchronous and runs once, when the provider is created. It may\n *     repair or quarantine what it finds, and it must not throw: the provider\n *     treats a throw as \"nothing stored\" and starts from the defaults.\n *   - `write` runs only from `setSelection`. Never on mount, never from `preview`,\n *     never as a side effect of reading, so the first write to a store is always a\n *     user's decision. A throw is swallowed, because a full or blocked store must\n *     not break the switch.\n */\nexport type ThemePersistence = {\n  read(): Partial<ThemeSelection> | undefined\n  write(next: ThemeSelection): void\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 provider's\n      // document effect 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/**\n * The default persistence: one JSON document in `localStorage` under `key`.\n *\n * `read` is the provider's original `readSelection`, moved here unchanged — every\n * stored id is validated against the catalogue, so a stale preference falls back to\n * a default rather than reaching the document. `key` may be a function so a\n * provider whose `storageKey` prop changes writes to the key it is now given.\n *\n * Blocked, full or absent storage is survivable in both directions: a read answers\n * with the defaults and a write is dropped, so the preference simply lasts the\n * session.\n */\nexport function localStoragePersistence(key: string | (() => string)): ThemePersistence {\n  const keyOf = () => (typeof key === 'function' ? key() : key)\n  return {\n    read: () => readSelection(keyOf()),\n    write(next) {\n      try {\n        preferenceStore()?.setItem(keyOf(), 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\n/**\n * What a persistence knows, or nothing.\n *\n * The seam's `read` must not throw, and the provider does not rely on that: a host\n * persistence is code the design system has not seen, and a theme provider that\n * fails to mount because a store misbehaved has turned a lost preference into a\n * blank application.\n */\nexport function readPersisted(persistence: ThemePersistence): Partial<ThemeSelection> | undefined {\n  try {\n    return persistence.read()\n  } catch {\n    return undefined\n  }\n}\n\n/** Hand a selection to the store; a store that throws loses the preference, not the switch. */\nexport function writePersisted(persistence: ThemePersistence, next: ThemeSelection): void {\n  try {\n    persistence.write(next)\n  } catch {\n    // Same contract as a full or blocked `localStorage`: the choice holds for the\n    // session and does not survive the reload.\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAuCA,SAAS,kBAAuC;CAC9C,OAAO,OAAO,iBAAiB,cAAc,KAAA,IAAY;AAC3D;;AAGA,SAAS,cAAc,YAAoC;CACzD,IAAI;EACF,MAAM,MAAM,gBAAgB,CAAC,EAAE,QAAQ,UAAU;EACjD,IAAI,CAAC,KAAK,OAAO;EACjB,MAAM,SAAS,KAAK,MAAM,GAAG;EAC7B,MAAM,QAAQ,sCAAsC,OAAO,OAAO,OAAO,IAAI,CAAC,CAAC;EAC/E,OAAO;GACL,YACE,OAAO,eAAe,WACtB,OAAO,eAAe,UACtB,OAAO,eAAe,WAClB,OAAO,aACP,sBAAsB;GAG5B,cACE,UAAU,OAAO,gBAAgB,EAAE,CAAC,EAAE,eAAe,UAChD,OAAO,eACR;GACN,aACE,UAAU,OAAO,eAAe,EAAE,CAAC,EAAE,eAAe,SAC/C,OAAO,cACR;GAIN,QACE,OAAO,OAAO,WAAW,aACxB,cAAc,MAAM,WAAW,OAAO,OAAO,OAAO,MAAM,KACzD,gBAAgB,OAAO,MAAM,KAC3B,OAAO,SACP,sBAAsB;GAC5B,MAAM,MAAM,GAAG;GACf;GAIA,SAAS,gBAAgB,MAAwB;EACnD;CACF,QAAQ;EACN,OAAO;CACT;AACF;;;;;;;;;;;;;AAcA,SAAgB,wBAAwB,KAAgD;CACtF,MAAM,cAAe,OAAO,QAAQ,aAAa,IAAI,IAAI;CACzD,OAAO;EACL,YAAY,cAAc,MAAM,CAAC;EACjC,MAAM,MAAM;GACV,IAAI;IACF,gBAAgB,CAAC,EAAE,QAAQ,MAAM,GAAG,KAAK,UAAU,IAAI,CAAC;GAC1D,QAAQ,CAGR;EACF;CACF;AACF;;;;;;;;;AAUA,SAAgB,cAAc,aAAoE;CAChG,IAAI;EACF,OAAO,YAAY,KAAK;CAC1B,QAAQ;EACN;CACF;AACF;;AAGA,SAAgB,eAAe,aAA+B,MAA4B;CACxF,IAAI;EACF,YAAY,MAAM,IAAI;CACxB,QAAQ,CAGR;AACF"}

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

@@ -1,7 +1,10 @@
 import type { JSX } from 'solid-js';
-import { type AppearanceEditorFontSettings } from '#lib/appearance-font-settings';
-import type { AccentPreset } from '@adea-ai/themes';
-import { type ThemeAppearance, type ThemeVariant } from '#lib/themes';
+import { type ThemeVariant } from '#lib/themes';
+import { type ThemePersistence } from './theme-persistence';
+import { type ThemeSelection } from './theme-state';
+export { useOptionalTheme, useTheme } from './theme-context';
+export { localStoragePersistence, type ThemePersistence } from './theme-persistence';
+export { defaultThemeSelection, resolvedDensity, type ThemeContextValue, type ThemeDensity, type ThemeSelection, } from './theme-state';
 /**
  * ThemeProvider.
  *
@@ -10,19 +13,17 @@ import { type ThemeAppearance, type ThemeVariant } from '#lib/themes';
  *
  * ## What a preference is
  *
- * Four independent choices, and keeping them independent is the point:
+ * Four independent choices (`ThemeSelection`), and keeping them independent is the
+ * point: appearance, a theme per appearance, an accent and fonts. They compose: a
+ * user who wants Nord with a violet accent and the system font should not need
+ * someone to author that combination.
  *
- *   - **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.
+ * ## Where the rules live
  *
- * Four axes rather than one list of presets, because they compose: a user who wants
- * Nord with a violet accent and the system font should not need someone to author
- * that combination.
+ * This component is wiring. What a selection merges to and resolves to is
+ * `theme-state.ts`; what lands on `<html>` is `theme-document.ts`; where the
+ * preference is kept is `theme-persistence.ts`. Each is plain code a test can call,
+ * which is the reason none of it is inlined here.
  *
  * ## Why the variants are applied as inline properties
  *
@@ -33,67 +34,6 @@ import { type ThemeAppearance, type ThemeVariant } from '#lib/themes';
  * stylesheet. `theme.css` keeps the default theme's values so the first paint is
  * correct before any script runs.
  */
-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;
-};
-export declare const defaultThemeSelection: ThemeSelection;
-/**
- * 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';
-/**
- * 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. */
-    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 catalogue, so a picker does not import it separately. */
-    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[];
-};
-export declare function useTheme(): ThemeContextValue;
 export type ThemeProviderProps = {
     children?: JSX.Element;
     /** Where the preference is persisted. Distinct per application. */
@@ -113,6 +53,34 @@ export type ThemeProviderProps = {
      * seeds from `initial`, and persists every `setSelection`.
      */
     selection?: Partial<ThemeSelection>;
+    /**
+     * Where the preference is kept, in place of `localStorage` under `storageKey`.
+     *
+     * Read once when the provider is created, so changing the prop later does not
+     * move the store. `storageKey` is ignored when this is given.
+     */
+    persistence?: ThemePersistence;
+    /**
+     * Variants the host adds to the built-in catalogue — themes a user imported.
+     *
+     * A function is read inside the provider's reactive scope, so one that reads a
+     * signal keeps the picker and the document current when the set changes. A
+     * stored id that names no variant, built in or added, paints the default of its
+     * appearance and stays in the selection untouched.
+     */
+    themes?: readonly ThemeVariant[] | (() => readonly ThemeVariant[]);
+    /**
+     * Rewrites the custom properties of each pass before they are written to
+     * `<html>`: the variant's roles with the accent over them. `tokensAsHex` from
+     * `lib/themes` is the one the system ships.
+     */
+    transformTokens?: (tokens: Record<string, string>) => Record<string, string>;
+    /**
+     * Switch CSS transitions off for the frame that carries a change, so a theme
+     * switch cannot animate the whole page. Off by default: it adds a `<style>`
+     * element to `<head>` for two frames on every change.
+     */
+    disableTransitionOnChange?: boolean;
 };
 export declare function ThemeProvider(props: ThemeProviderProps): JSX.Element;
 /**

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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"}