@adea-ai/ui 0.125.0 → 0.128.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;AAInC,OAAO,EAIL,KAAK,YAAY,EAClB,MAAM,aAAa,CAAA;AAGpB,OAAO,EAIL,KAAK,gBAAgB,EACtB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAOL,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;IACnC;;;;;;;OAOG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAA;CAC7B,CAAA;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eAyHtD;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,EAGL,KAAK,eAAe,EAEpB,KAAK,YAAY,EAClB,MAAM,aAAa,CAAA;AAGpB,OAAO,EAIL,KAAK,gBAAgB,EACtB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EASL,KAAK,cAAc,EACpB,MAAM,eAAe,CAAA;AAEtB,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAC5D,OAAO,EACL,0BAA0B,EAC1B,uBAAuB,EACvB,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,2BAA2B,GACjC,MAAM,qBAAqB,CAAA;AAC5B,YAAY,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AACtD,YAAY,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,EAAE,mBAAmB,EAAE,WAAW,EAAE,KAAK,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAC1F,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;IACnC;;;;;;;OAOG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B;;;;;;;;;;;;;;;;OAgBG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG;QAAE,kBAAkB,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,OAAO,CAAC,CAAA;KAAE,CAAA;IACtE;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,YAAY,CAAA;IACjC;;;;;;;;;;;OAWG;IACH,WAAW,CAAC,EAAE,eAAe,CAAA;IAC7B;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AASD,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eAqLtD"}

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

@@ -1,13 +1,18 @@
 import { builtinThemes, themeAccentsFor } from "../../lib/themes.js";
-import { safeScriptStringLiteral } from "../../lib/safe-script.js";
-import { fontSettingsBootstrapScript } from "../../lib/appearance-font-settings.js";
+import { fontZoomShortcut } from "../../lib/font-zoom.js";
+import { REDUCED_TRANSPARENCY_QUERY, resolveSurfaceState } from "../../lib/theme-surface.js";
 import { themeContext, useOptionalTheme, useTheme } from "./theme-context.js";
-import { accentRolesForState, defaultThemeSelection, initialThemeSelection, mergeRegistry, mergeThemeSelection, resolveThemeState, resolvedDensity } from "./theme-state.js";
+import { accentRolesForState, defaultThemeSelection, initialThemeSelection, mergeRegistry, mergeThemeSelection, resolveTerminalVariant, resolveThemeState, resolvedDensity, zoomedFontSettings } from "./theme-state.js";
 import { applyThemeToRoot, applyWithoutTransitions } from "./theme-document.js";
-import { localStoragePersistence, readPersisted, writePersisted } from "./theme-persistence.js";
+import { createVersionedPersistence, localStoragePersistence, readPersisted, writePersisted } from "./theme-persistence.js";
+import { inlineScriptLiteral, themeScript } from "./theme-script.js";
 import { createComponent } from "solid-js/web";
-import { createEffect, createMemo, createSignal, onCleanup, splitProps } from "solid-js";
+import { createEffect, createMemo, createSignal, onCleanup, splitProps, untrack } from "solid-js";
 //#region src/components/theme/theme-provider.tsx
+/** The operating system's Reduce Transparency query, where there is a window to ask. */
+function reducedTransparencyMedia() {
+	return typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(REDUCED_TRANSPARENCY_QUERY) : void 0;
+}
 function ThemeProvider(props) {
 	const [local] = splitProps(props, [
 		"children",
@@ -18,7 +23,11 @@ function ThemeProvider(props) {
 		"themes",
 		"transformTokens",
 		"disableTransitionOnChange",
-		"accentContrastFloor"
+		"accentContrastFloor",
+		"surface",
+		"palette",
+		"editorRoles",
+		"fontZoom"
 	]);
 	const storageKey = () => local.storageKey ?? "adea-appearance";
 	const persistence = local.persistence ?? localStoragePersistence(storageKey);
@@ -46,6 +55,27 @@ function ThemeProvider(props) {
 		return preview ? mergeThemeSelection(selection(), preview) : selection();
 	});
 	const shown = createMemo(() => draft() ? resolveThemeState(shownSelection(), systemAppearance(), registry()) : committed());
+	const surfaceOn = (candidate) => local.surface === true || typeof local.surface === "object" || candidate.surface !== void 0;
+	const nativeTranslucency = () => {
+		const capability = typeof local.surface === "object" ? local.surface.nativeTranslucency : false;
+		return (typeof capability === "function" ? capability() : capability) === true;
+	};
+	const [osReducedTransparency, setOsReducedTransparency] = createSignal(surfaceOn(untrack(shownSelection)) ? reducedTransparencyMedia()?.matches ?? false : false);
+	const axisOn = createMemo(() => surfaceOn(shownSelection()));
+	createEffect(() => {
+		const query = axisOn() ? reducedTransparencyMedia() : void 0;
+		setOsReducedTransparency(query?.matches ?? false);
+		if (!query) return;
+		const onChange = (event) => setOsReducedTransparency(event.matches);
+		query.addEventListener("change", onChange);
+		onCleanup(() => query.removeEventListener("change", onChange));
+	});
+	const surfaceStateOf = (candidate) => resolveSurfaceState(candidate.surface, {
+		osReducedTransparency: osReducedTransparency(),
+		userReducedTransparency: candidate.reduceTransparency === true,
+		nativeTranslucency: nativeTranslucency()
+	});
+	const committedSurface = createMemo(() => surfaceOn(selection()) ? surfaceStateOf(selection()) : void 0);
 	let written;
 	let restoreTransitions;
 	createEffect(() => {
@@ -53,11 +83,15 @@ function ThemeProvider(props) {
 		const state = {
 			selection: shownSelection(),
 			appearance: shown().appearance,
-			variant: shown().variant
+			variant: shown().variant,
+			terminalVariant: resolveTerminalVariant(shownSelection().terminalThemeId, registry()),
+			surface: axisOn() ? surfaceStateOf(shownSelection()) : void 0
 		};
 		const options = {
 			transformTokens: local.transformTokens,
-			accentContrastFloor: local.accentContrastFloor
+			accentContrastFloor: local.accentContrastFloor,
+			palette: local.palette,
+			editorRoles: local.editorRoles
 		};
 		const apply = () => {
 			written = applyThemeToRoot(document.documentElement, state, options, written);
@@ -69,6 +103,19 @@ function ThemeProvider(props) {
 	});
 	onCleanup(() => restoreTransitions?.());
 	const themeAccents = createMemo(() => themeAccentsFor(selection().lightThemeId, selection().darkThemeId));
+	const zoomFonts = (intent) => value.setSelection({ fonts: zoomedFontSettings(selection(), intent) });
+	const onKeyDown = (event) => {
+		if (event.defaultPrevented) return;
+		const intent = fontZoomShortcut(event);
+		if (!intent) return;
+		event.preventDefault();
+		zoomFonts(intent);
+	};
+	createEffect(() => {
+		if (!local.fontZoom || typeof window === "undefined") return;
+		window.addEventListener("keydown", onKeyDown, { capture: true });
+		onCleanup(() => window.removeEventListener("keydown", onKeyDown, { capture: true }));
+	});
 	const value = {
 		selection,
 		resolvedAppearance,
@@ -86,6 +133,9 @@ function ThemeProvider(props) {
 			registry: registry(),
 			accentContrastFloor: local.accentContrastFloor
 		}),
+		effectiveSurface: () => committedSurface()?.surface ?? "opaque",
+		reduceTransparencyActive: () => committedSurface()?.reduceTransparencyActive ?? false,
+		zoomFonts,
 		setSelection(patch) {
 			const next = mergeThemeSelection(selection(), patch);
 			setSelectionState(next);
@@ -101,50 +151,7 @@ function ThemeProvider(props) {
 		}
 	});
 }
-/**
-* A string as a JavaScript literal that is also safe inside an inline `<script>`.
-*
-* `JSON.stringify` produces a correct JavaScript literal, and it is **not** safe
-* here: it leaves `<` and `>` alone, so a value containing `<\/script>` ends the tag
-* early and everything after it is parsed as HTML. That is the classic inline-script
-* injection, and it is a real one even though the value is a developer-supplied prop
-* rather than user input — a prop can come from configuration, and a key that happens
-* to contain a closing tag should not be able to execute.
-*
-* The escape is also correct JavaScript: `\u003c` is `<` to the parser, so the value
-* is byte-identical at runtime and inert to the HTML tokenizer. `\u2028` and `\u2029`
-* are escaped for the neighbouring reason — they are legal inside a JSON string and
-* were, before ES2019, line terminators to a JavaScript parser.
-*
-* CodeQL flags the unescaped form as `js/bad-code-sanitization`, which is how this
-* was found; `tests/theme-script.test.ts` pins it so it cannot come back.
-*/
-function inlineScriptLiteral(value) {
-	return safeScriptStringLiteral(value);
-}
-/**
-* The no-flash script.
-*
-* Rendered inline in `<head>` before any stylesheet that matters. Without it a dark
-* preference paints the light theme first and then swaps, which is the flash every
-* themed application has to solve and the one thing a provider cannot do from
-* inside the body.
-*
-* Deliberately tiny and dependency-free: it reads the stored preference, resolves
-* `system`, and sets the class. It does not apply the variant's roles — the default
-* theme in `theme.css` covers the first paint, and the provider writes the rest on
-* mount.
-*
-* The script reads two values out of `localStorage` and writes them to `dataset`,
-* which is a *property* assignment rather than code: a stored accent or font id can
-* set an attribute and cannot execute. The one value that reaches the source as text
-* is `storageKey`, and it goes through {@link inlineScriptLiteral} for the reason
-* documented there.
-*/
-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, localStoragePersistence, resolvedDensity, themeScript, useOptionalTheme, useTheme };
+export { ThemeProvider, createVersionedPersistence, 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","createEffect","createMemo","createSignal","onCleanup","splitProps","safeScriptStringLiteral","fontSettingsBootstrapScript","builtinThemes","themeAccentsFor","ThemeAppearance","ThemeVariant","themeContext","applyThemeToRoot","applyWithoutTransitions","localStoragePersistence","readPersisted","writePersisted","ThemePersistence","accentRolesForState","initialThemeSelection","mergeRegistry","mergeThemeSelection","resolveThemeState","ThemeContextValue","ThemeSelection","useOptionalTheme","useTheme","defaultThemeSelection","resolvedDensity","ThemeDensity","ThemeProviderProps","children","Element","storageKey","initial","Partial","selection","persistence","themes","transformTokens","tokens","Record","disableTransitionOnChange","accentContrastFloor","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","accentRolesFor","accent","variantId","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  accentRolesForState,\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   * The contrast ratio an accent is held to against the variant's background,\n   * repaired to the nearest passing colour when it falls short. Absent, presets\n   * are painted verbatim — the catalogue measured them for its own themes — and\n   * only a custom `#rrggbb` is held to 3:1. A host that adds themes the catalogue\n   * never measured passes 3 to hold the presets to it as well; for the catalogue's\n   * own themes the floor changes no preset.\n   */\n  accentContrastFloor?: number\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    'accentContrastFloor',\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 = {\n      transformTokens: local.transformTokens,\n      accentContrastFloor: local.accentContrastFloor,\n    }\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    accentRolesFor: (accent, variantId) =>\n      accentRolesForState(accent, variantId, {\n        selection: selection(),\n        variant: variant(),\n        registry: registry(),\n        accentContrastFloor: local.accentContrastFloor,\n      }),\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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"}
+{"version":3,"file":"theme-provider.js","names":["JSX","createEffect","createMemo","createSignal","onCleanup","splitProps","untrack","fontZoomShortcut","FontZoomIntent","REDUCED_TRANSPARENCY_QUERY","resolveSurfaceState","builtinThemes","themeAccentsFor","EditorRolesMode","ThemeAppearance","ThemeVariant","themeContext","applyThemeToRoot","applyWithoutTransitions","localStoragePersistence","readPersisted","writePersisted","ThemePersistence","accentRolesForState","initialThemeSelection","mergeRegistry","mergeThemeSelection","resolveTerminalVariant","resolveThemeState","zoomedFontSettings","ThemeContextValue","ThemeSelection","useOptionalTheme","useTheme","createVersionedPersistence","ThemeStorageSchema","VersionedCodec","VersionedPersistenceOptions","ThemeSurface","inlineScriptLiteral","themeScript","ThemeScriptOptions","defaultThemeSelection","resolvedDensity","ThemeDensity","ThemeProviderProps","children","Element","storageKey","initial","Partial","selection","persistence","themes","transformTokens","tokens","Record","disableTransitionOnChange","accentContrastFloor","surface","nativeTranslucency","palette","editorRoles","fontZoom","reducedTransparencyMedia","MediaQueryList","window","matchMedia","undefined","ThemeProvider","props","local","extraThemes","registry","setSelectionState","incoming","current","systemAppearance","setSystemAppearance","query","matches","onChange","event","MediaQueryListEvent","addEventListener","removeEventListener","committed","resolvedAppearance","appearance","variant","draft","setDraft","shownSelection","preview","shown","surfaceOn","candidate","capability","osReducedTransparency","setOsReducedTransparency","axisOn","surfaceStateOf","userReducedTransparency","reduceTransparency","committedSurface","written","ReadonlySet","restoreTransitions","document","state","terminalVariant","terminalThemeId","options","apply","documentElement","themeAccents","lightThemeId","darkThemeId","zoomFonts","intent","value","setSelection","fonts","onKeyDown","KeyboardEvent","defaultPrevented","preventDefault","capture","allThemes","next","previewing","accentRolesFor","accent","variantId","effectiveSurface","reduceTransparencyActive","patch","Context","_$createComponent","Provider","_$createComponent"],"sources":["../../../src/components/theme/theme-provider.tsx"],"sourcesContent":["import type { JSX } from 'solid-js'\nimport { createEffect, createMemo, createSignal, onCleanup, splitProps, untrack } from 'solid-js'\nimport { fontZoomShortcut, type FontZoomIntent } from '#lib/font-zoom'\nimport { REDUCED_TRANSPARENCY_QUERY, resolveSurfaceState } from '#lib/theme-surface'\nimport {\n  builtinThemes,\n  themeAccentsFor,\n  type EditorRolesMode,\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  accentRolesForState,\n  initialThemeSelection,\n  mergeRegistry,\n  mergeThemeSelection,\n  resolveTerminalVariant,\n  resolveThemeState,\n  zoomedFontSettings,\n  type ThemeContextValue,\n  type ThemeSelection,\n} from './theme-state'\n\nexport { useOptionalTheme, useTheme } from './theme-context'\nexport {\n  createVersionedPersistence,\n  localStoragePersistence,\n  type ThemePersistence,\n  type ThemeStorageSchema,\n  type VersionedCodec,\n  type VersionedPersistenceOptions,\n} from './theme-persistence'\nexport type { ThemeSurface } from '#lib/theme-surface'\nexport type { EditorRolesMode } from '#lib/themes'\nexport { inlineScriptLiteral, themeScript, type ThemeScriptOptions } from './theme-script'\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   * The contrast ratio an accent is held to against the variant's background,\n   * repaired to the nearest passing colour when it falls short. Absent, presets\n   * are painted verbatim — the catalogue measured them for its own themes — and\n   * only a custom `#rrggbb` is held to 3:1. A host that adds themes the catalogue\n   * never measured passes 3 to hold the presets to it as well; for the catalogue's\n   * own themes the floor changes no preset.\n   */\n  accentContrastFloor?: number\n  /**\n   * Turns the surface axis on: `selection.surface` and `selection.reduceTransparency`\n   * are resolved against the operating system's Reduce Transparency setting and the\n   * host's capability, and `data-surface`, `data-reduce-transparency` and\n   * `--surface-alpha` are written to `<html>` (the frost rule in `theme.css` reads\n   * them). Off by default: a provider that never opts in writes none of them, adds no\n   * media-query listener, and stores nothing new.\n   *\n   * An object also states the host's capability. `nativeTranslucency` is whether the\n   * window can render the OS's own translucency; without it a `translucent`\n   * preference paints the tokenized `frosted` surface instead of pretending to\n   * vibrancy. A function is read inside the provider's reactive scope, for a\n   * capability that is learned after mount.\n   *\n   * A selection that already carries a `surface` turns the axis on for itself, so a\n   * host that stores the field gets the same document without the prop.\n   */\n  surface?: boolean | { nativeTranslucency?: boolean | (() => boolean) }\n  /**\n   * Where a catalogue variant's palette comes from. `inline` (the default) writes\n   * every role onto `<html>`. `stylesheet` leaves a catalogue variant to the host's\n   * `[data-theme]` stylesheet and writes inline only what no stylesheet can know: a\n   * host's own `themes`, the accent, the pinned terminal palette, the surface alpha\n   * and the fonts. Switching from a host variant back to a catalogue one removes the\n   * properties the host variant wrote.\n   */\n  palette?: 'inline' | 'stylesheet'\n  /**\n   * The projection behind the `--editor-*` ramp. `syntax` (the default) is the\n   * catalogue's quiet syntax roles, a comment among them deliberately below\n   * body-text contrast. `floor` holds all sixteen roles to 4.5:1 on the canvas, as\n   * hex, for a host that renders code as content (a diff, a file view) rather than\n   * as decoration.\n   *\n   * Applies to catalogue variants; a host's own `themes` keep their `editor` and\n   * their `tokens`. With `palette=\"stylesheet\"` it is the one palette property a\n   * catalogue variant still writes inline, because `theme-variants.css` is generated\n   * for `syntax`. Absent, nothing changes.\n   */\n  editorRoles?: EditorRolesMode\n  /**\n   * Bind the platform zoom chords (Cmd or Ctrl with `=`, `+`, `-`, `0`) to the three\n   * text sizes instead of the browser's page zoom: stepping them together is zoom\n   * inside the persisted type system. Off by default: it adds a capturing `keydown`\n   * listener to `window`, and an event already handled elsewhere is left alone.\n   * `zoomFonts` on the context does the same from a menu or a host's own binding.\n   */\n  fontZoom?: boolean\n}\n\n/** The operating system's Reduce Transparency query, where there is a window to ask. */\nfunction reducedTransparencyMedia(): MediaQueryList | undefined {\n  return typeof window !== 'undefined' && typeof window.matchMedia === 'function'\n    ? window.matchMedia(REDUCED_TRANSPARENCY_QUERY)\n    : undefined\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    'accentContrastFloor',\n    'surface',\n    'palette',\n    'editorRoles',\n    'fontZoom',\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  // The surface axis. Off, none of this reads the operating system: the media query\n  // is subscribed only while the axis is on, so a provider that never opts in adds no\n  // listener and no repaint.\n  const surfaceOn = (candidate: ThemeSelection) =>\n    local.surface === true || typeof local.surface === 'object' || candidate.surface !== undefined\n  const nativeTranslucency = () => {\n    const capability = typeof local.surface === 'object' ? local.surface.nativeTranslucency : false\n    return (typeof capability === 'function' ? capability() : capability) === true\n  }\n  const [osReducedTransparency, setOsReducedTransparency] = createSignal(\n    surfaceOn(untrack(shownSelection)) ? (reducedTransparencyMedia()?.matches ?? false) : false\n  )\n  const axisOn = createMemo(() => surfaceOn(shownSelection()))\n  createEffect(() => {\n    const query = axisOn() ? reducedTransparencyMedia() : undefined\n    setOsReducedTransparency(query?.matches ?? false)\n    if (!query) return\n    const onChange = (event: MediaQueryListEvent) => setOsReducedTransparency(event.matches)\n    query.addEventListener('change', onChange)\n    onCleanup(() => query.removeEventListener('change', onChange))\n  })\n  const surfaceStateOf = (candidate: ThemeSelection) =>\n    resolveSurfaceState(candidate.surface, {\n      osReducedTransparency: osReducedTransparency(),\n      userReducedTransparency: candidate.reduceTransparency === true,\n      nativeTranslucency: nativeTranslucency(),\n    })\n  const committedSurface = createMemo(() =>\n    surfaceOn(selection()) ? surfaceStateOf(selection()) : undefined\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      terminalVariant: resolveTerminalVariant(shownSelection().terminalThemeId, registry()),\n      surface: axisOn() ? surfaceStateOf(shownSelection()) : undefined,\n    }\n    const options = {\n      transformTokens: local.transformTokens,\n      accentContrastFloor: local.accentContrastFloor,\n      palette: local.palette,\n      editorRoles: local.editorRoles,\n    }\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 zoomFonts = (intent: FontZoomIntent) =>\n    value.setSelection({ fonts: zoomedFontSettings(selection(), intent) })\n\n  // The platform zoom chords drive the three text sizes, captured like the other\n  // global chords; an event something else already handled never double-steps.\n  const onKeyDown = (event: KeyboardEvent) => {\n    if (event.defaultPrevented) return\n    const intent = fontZoomShortcut(event)\n    if (!intent) return\n    event.preventDefault()\n    zoomFonts(intent)\n  }\n  createEffect(() => {\n    if (!local.fontZoom || typeof window === 'undefined') return\n    window.addEventListener('keydown', onKeyDown, { capture: true })\n    onCleanup(() => window.removeEventListener('keydown', onKeyDown, { capture: true }))\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    accentRolesFor: (accent, variantId) =>\n      accentRolesForState(accent, variantId, {\n        selection: selection(),\n        variant: variant(),\n        registry: registry(),\n        accentContrastFloor: local.accentContrastFloor,\n      }),\n    effectiveSurface: () => committedSurface()?.surface ?? 'opaque',\n    reduceTransparencyActive: () => committedSurface()?.reduceTransparencyActive ?? false,\n    zoomFonts,\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"],"mappings":"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"}

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

@@ -0,0 +1,100 @@
+import type { ThemeStorageSchema } from './theme-persistence';
+/**
+ * A string as a JavaScript literal that is also safe inside an inline `<script>`.
+ *
+ * `JSON.stringify` produces a correct JavaScript literal, and it is **not** safe
+ * here: it leaves `<` and `>` alone, so a value containing `</script>` ends the tag
+ * early and everything after it is parsed as HTML. That is the classic inline-script
+ * injection, and it is a real one even though the value is a developer-supplied prop
+ * rather than user input — a prop can come from configuration, and a key that happens
+ * to contain a closing tag should not be able to execute.
+ *
+ * The escape is also correct JavaScript: `\u003c` is `<` to the parser, so the value
+ * is byte-identical at runtime and inert to the HTML tokenizer. `\u2028` and `\u2029`
+ * are escaped for the neighbouring reason — they are legal inside a JSON string and
+ * were, before ES2019, line terminators to a JavaScript parser.
+ *
+ * CodeQL flags the unescaped form as `js/bad-code-sanitization`, which is how this
+ * was found; `tests/theme-script.test.ts` pins it so it cannot come back.
+ */
+export declare function inlineScriptLiteral(value: string): string;
+/**
+ * Options for the host-shaped no-flash script: the document's {@link ThemeStorageSchema}
+ * plus what the script paints from it.
+ */
+export type ThemeScriptOptions = ThemeStorageSchema & {
+    /**
+     * The accent painted when the document has none, an unrecognised one, or the
+     * legacy `theme` spelling — the host's default (adea: `violet`). Without it those
+     * cases paint no `data-accent`, which is what the provider writes for `theme`.
+     * Setting it means the `[data-accent]` block of the default preset paints on the
+     * first frame instead of after hydration.
+     */
+    defaultAccent?: string;
+    /**
+     * Also resolve the surface axis (`data-surface`, `data-reduce-transparency`,
+     * `--surface-alpha`) from the document and the operating system's Reduce
+     * Transparency setting. A `translucent` preference resolves to `frosted`: the
+     * host's translucency capability is not known until the provider mounts, and the
+     * provider re-resolves it then. Match the provider's `surface` prop.
+     */
+    surface?: boolean;
+    /**
+     * Match the provider's `palette` prop. The attributes written are the same either
+     * way: a catalogue variant's palette is the host stylesheet's job (`stylesheet`) or
+     * the provider's, at mount (`inline`), and a stored theme's own tokens are written
+     * inline in both.
+     */
+    palette?: 'inline' | 'stylesheet';
+    /** The only `version` of the library document read. Default `1`. */
+    libraryVersion?: number;
+};
+/**
+ * The no-flash script.
+ *
+ * Rendered inline in `<head>` before any stylesheet that matters. Without it a dark
+ * preference paints the light theme first and then swaps, which is the flash every
+ * themed application has to solve and the one thing a provider cannot do from
+ * inside the body.
+ *
+ * ## The string form
+ *
+ * `themeScript('key')` serves a provider that stores an unversioned
+ * `localStorage[key]` document. Deliberately tiny and dependency-free: it reads the
+ * stored preference, resolves `system`, and sets the class. It does not apply the
+ * variant's roles — the default theme in `theme.css` covers the first paint, and the
+ * provider writes the rest on mount. Its output is a compatibility surface (a
+ * consumer may have it in a snapshot), so it does not change.
+ *
+ * ## The options form
+ *
+ * `themeScript({ key, ... })` serves a host with a versioned document (see
+ * `createVersionedPersistence`) and writes what the provider will write, so mounting
+ * repaints nothing:
+ *
+ *   - `class="dark"`, `color-scheme`, `data-theme`, `data-appearance` and, for a
+ *     compact document, `data-density`;
+ *   - `data-accent`: a preset id as stored, `custom` for a `#rrggbb` (never the hex
+ *     itself, which is the worst possible attribute content), `defaultAccent` when the
+ *     document has none, nothing for a theme-derived `ansi-*` accent (it has no
+ *     stylesheet block; the provider paints it inline);
+ *   - the theme: the stored id when the catalogue or the stored library holds it, else
+ *     the default of the resolved appearance, exactly as the provider resolves it. A
+ *     library theme's own tokens are written inline, so an imported theme paints on the
+ *     first frame;
+ *   - the surface axis, when `surface` is set;
+ *   - the font settings, guarded to the document's `version`.
+ *
+ * The document's `version`, when the schema names one, must match exactly. The legacy
+ * key is read only while the main key is absent: an unreadable main document is not
+ * "no preference", so it does not resurrect an older value.
+ *
+ * The script reads values out of `localStorage` and writes them to `dataset` and
+ * `style`, which are *property* assignments rather than code: a stored id, accent or
+ * token can set an attribute and cannot execute. The values that reach the source as
+ * text (keys, ids, the default accent) go through {@link inlineScriptLiteral} for the
+ * reason documented there.
+ */
+export declare function themeScript(storageKey?: string): string;
+export declare function themeScript(options: ThemeScriptOptions): string;
+//# sourceMappingURL=theme-script.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"theme-script.d.ts","sourceRoot":"","sources":["../../../src/components/theme/theme-script.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AAE7D;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEzD;AAED;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,kBAAkB,GAAG;IACpD;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,YAAY,CAAA;IACjC,oEAAoE;IACpE,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,wBAAgB,WAAW,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;AACxD,wBAAgB,WAAW,CAAC,OAAO,EAAE,kBAAkB,GAAG,MAAM,CAAA"}

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

@@ -0,0 +1,57 @@
+import { accentPresets } from "../../lib/tokens.js";
+import { isCustomAccent } from "../../lib/accent-roles.js";
+import { builtinThemes, defaultDarkThemeId, defaultLightThemeId } from "../../lib/themes.js";
+import { safeScriptStringLiteral } from "../../lib/safe-script.js";
+import { fontSettingsBootstrapScript } from "../../lib/appearance-font-settings.js";
+import { REDUCED_TRANSPARENCY_QUERY, surfaceAlpha } from "../../lib/theme-surface.js";
+//#region src/components/theme/theme-script.ts
+/**
+* A string as a JavaScript literal that is also safe inside an inline `<script>`.
+*
+* `JSON.stringify` produces a correct JavaScript literal, and it is **not** safe
+* here: it leaves `<` and `>` alone, so a value containing `<\/script>` ends the tag
+* early and everything after it is parsed as HTML. That is the classic inline-script
+* injection, and it is a real one even though the value is a developer-supplied prop
+* rather than user input — a prop can come from configuration, and a key that happens
+* to contain a closing tag should not be able to execute.
+*
+* The escape is also correct JavaScript: `\u003c` is `<` to the parser, so the value
+* is byte-identical at runtime and inert to the HTML tokenizer. `\u2028` and `\u2029`
+* are escaped for the neighbouring reason — they are legal inside a JSON string and
+* were, before ES2019, line terminators to a JavaScript parser.
+*
+* CodeQL flags the unescaped form as `js/bad-code-sanitization`, which is how this
+* was found; `tests/theme-script.test.ts` pins it so it cannot come back.
+*/
+function inlineScriptLiteral(value) {
+	return safeScriptStringLiteral(value);
+}
+function themeScript(input = "adea-appearance") {
+	if (typeof input === "string") return stringFormScript(input);
+	return optionsFormScript(input);
+}
+function stringFormScript(storageKey) {
+	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)}`;
+}
+var literal = safeScriptStringLiteral;
+function optionsFormScript(options) {
+	const field = options.appearanceField ?? "appearance";
+	const versionGuard = options.version === void 0 ? "" : `&&x.version===${Number(options.version)}`;
+	const presets = accentPresets.filter((preset) => preset.id !== "theme").map((preset) => literal(preset.id));
+	const defaultAccent = options.defaultAccent === void 0 ? "" : isCustomAccent(options.defaultAccent) ? "custom" : options.defaultAccent;
+	const parts = [];
+	parts.push(`(function(){try{`, `var r=document.documentElement,s=r.style;`, `var q=function(m){try{return window.matchMedia(m).matches}catch(e){return false}};`, `var get=function(k){try{return localStorage.getItem(k)}catch(e){return null}};`, `var raw=get(${literal(options.key)}),doc=null,legacy=null;`, `if(raw!==null){try{var x=JSON.parse(raw);if(x&&typeof x==='object'&&!Array.isArray(x)${versionGuard})doc=x}catch(e){}}`);
+	if (options.legacyAppearanceKey !== void 0) parts.push(`else legacy=get(${literal(options.legacyAppearanceKey)});`);
+	parts.push(`var m=doc?doc[${literal(field)}]:legacy;`, `var mode=m==='light'||m==='dark'?m:'system';`, `var dark=mode==='dark'||(mode==='system'&&q('(prefers-color-scheme: dark)'));`, `var fallback=dark?${literal(defaultDarkThemeId)}:${literal(defaultLightThemeId)};`, `var want=doc?(dark?doc.darkThemeId:doc.lightThemeId):null;`, `if(typeof want!=='string')want=fallback;`, `var ids=[${builtinThemes.map((theme) => literal(theme.id)).join(",")}];`, `var id=ids.indexOf(want)!==-1?want:null,tokens=null;`);
+	if (options.libraryKey !== void 0) parts.push(`if(id===null){try{var lib=JSON.parse(get(${literal(options.libraryKey)})||'null');`, `if(lib&&typeof lib==='object'&&lib.version===${Number(options.libraryVersion ?? 1)}&&Array.isArray(lib.themes)){`, `for(var i=0;i!==lib.themes.length;i++){var t=lib.themes[i];`, `if(t&&t.id===want&&t.flatTokens&&typeof t.flatTokens==='object'){id=want;tokens=t.flatTokens;break}}}}catch(e){}}`);
+	parts.push(`if(id===null)id=fallback;`, `r.classList.toggle('dark',dark);`, `s.colorScheme=dark?'dark':'light';`, `r.dataset.theme=id;`, `r.dataset.appearance=dark?'dark':'light';`);
+	if (options.libraryKey !== void 0) parts.push(`if(tokens){for(var n in tokens){if(Object.prototype.hasOwnProperty.call(tokens,n)&&n.slice(0,2)==='--'&&typeof tokens[n]==='string')s.setProperty(n,tokens[n])}}`);
+	parts.push(`var a=doc&&typeof doc.accent==='string'?doc.accent:'';`, `var accent=[${presets.join(",")}].indexOf(a)!==-1?a:/^#[0-9a-fA-F]{6}$/.test(a)?'custom':a.slice(0,5)==='ansi-'?'':${literal(defaultAccent)};`, `if(accent)r.dataset.accent=accent;`, `if(doc&&doc.density==='compact')r.dataset.density='compact';`);
+	if (options.surface) parts.push(`var reduce=q(${literal(REDUCED_TRANSPARENCY_QUERY)})||!!(doc&&doc.reduceTransparency===true);`, `var surface=reduce?'opaque':doc&&(doc.surface==='frosted'||doc.surface==='translucent')?'frosted':'opaque';`, `r.dataset.surface=surface;`, `r.dataset.reduceTransparency=reduce?'true':'false';`, `s.setProperty('--surface-alpha',${JSON.stringify(surfaceAlpha)}[surface]);`);
+	parts.push(`}catch(e){}})();`);
+	return `${parts.join("")}${fontSettingsBootstrapScript(options.key, options.version)}`;
+}
+//#endregion
+export { inlineScriptLiteral, themeScript };
+
+//# sourceMappingURL=theme-script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"theme-script.js","names":[],"sources":["../../../src/components/theme/theme-script.ts"],"sourcesContent":["import { fontSettingsBootstrapScript } from '#lib/appearance-font-settings'\nimport { isCustomAccent } from '#lib/accent-roles'\nimport { safeScriptStringLiteral } from '#lib/safe-script'\nimport { REDUCED_TRANSPARENCY_QUERY, surfaceAlpha } from '#lib/theme-surface'\nimport { accentPresets } from '#lib/tokens'\nimport { builtinThemes, defaultDarkThemeId, defaultLightThemeId } from '#lib/themes'\nimport type { ThemeStorageSchema } from './theme-persistence'\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 * Options for the host-shaped no-flash script: the document's {@link ThemeStorageSchema}\n * plus what the script paints from it.\n */\nexport type ThemeScriptOptions = ThemeStorageSchema & {\n  /**\n   * The accent painted when the document has none, an unrecognised one, or the\n   * legacy `theme` spelling — the host's default (adea: `violet`). Without it those\n   * cases paint no `data-accent`, which is what the provider writes for `theme`.\n   * Setting it means the `[data-accent]` block of the default preset paints on the\n   * first frame instead of after hydration.\n   */\n  defaultAccent?: string\n  /**\n   * Also resolve the surface axis (`data-surface`, `data-reduce-transparency`,\n   * `--surface-alpha`) from the document and the operating system's Reduce\n   * Transparency setting. A `translucent` preference resolves to `frosted`: the\n   * host's translucency capability is not known until the provider mounts, and the\n   * provider re-resolves it then. Match the provider's `surface` prop.\n   */\n  surface?: boolean\n  /**\n   * Match the provider's `palette` prop. The attributes written are the same either\n   * way: a catalogue variant's palette is the host stylesheet's job (`stylesheet`) or\n   * the provider's, at mount (`inline`), and a stored theme's own tokens are written\n   * inline in both.\n   */\n  palette?: 'inline' | 'stylesheet'\n  /** The only `version` of the library document read. Default `1`. */\n  libraryVersion?: number\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 * ## The string form\n *\n * `themeScript('key')` serves a provider that stores an unversioned\n * `localStorage[key]` document. Deliberately tiny and dependency-free: it reads the\n * stored preference, resolves `system`, and sets the class. It does not apply the\n * variant's roles — the default theme in `theme.css` covers the first paint, and the\n * provider writes the rest on mount. Its output is a compatibility surface (a\n * consumer may have it in a snapshot), so it does not change.\n *\n * ## The options form\n *\n * `themeScript({ key, ... })` serves a host with a versioned document (see\n * `createVersionedPersistence`) and writes what the provider will write, so mounting\n * repaints nothing:\n *\n *   - `class=\"dark\"`, `color-scheme`, `data-theme`, `data-appearance` and, for a\n *     compact document, `data-density`;\n *   - `data-accent`: a preset id as stored, `custom` for a `#rrggbb` (never the hex\n *     itself, which is the worst possible attribute content), `defaultAccent` when the\n *     document has none, nothing for a theme-derived `ansi-*` accent (it has no\n *     stylesheet block; the provider paints it inline);\n *   - the theme: the stored id when the catalogue or the stored library holds it, else\n *     the default of the resolved appearance, exactly as the provider resolves it. A\n *     library theme's own tokens are written inline, so an imported theme paints on the\n *     first frame;\n *   - the surface axis, when `surface` is set;\n *   - the font settings, guarded to the document's `version`.\n *\n * The document's `version`, when the schema names one, must match exactly. The legacy\n * key is read only while the main key is absent: an unreadable main document is not\n * \"no preference\", so it does not resurrect an older value.\n *\n * The script reads values out of `localStorage` and writes them to `dataset` and\n * `style`, which are *property* assignments rather than code: a stored id, accent or\n * token can set an attribute and cannot execute. The values that reach the source as\n * text (keys, ids, the default accent) go through {@link inlineScriptLiteral} for the\n * reason documented there.\n */\nexport function themeScript(storageKey?: string): string\nexport function themeScript(options: ThemeScriptOptions): string\nexport function themeScript(input: string | ThemeScriptOptions = 'adea-appearance'): string {\n  if (typeof input === 'string') return stringFormScript(input)\n  return optionsFormScript(input)\n}\n\nfunction stringFormScript(storageKey: string): 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\nconst literal = safeScriptStringLiteral\n\nfunction optionsFormScript(options: ThemeScriptOptions): string {\n  const field = options.appearanceField ?? 'appearance'\n  const versionGuard =\n    options.version === undefined ? '' : `&&x.version===${Number(options.version)}`\n  const presets = accentPresets\n    .filter((preset) => preset.id !== 'theme')\n    .map((preset) => literal(preset.id))\n  const defaultAccent =\n    options.defaultAccent === undefined\n      ? ''\n      : isCustomAccent(options.defaultAccent)\n        ? 'custom'\n        : options.defaultAccent\n\n  const parts: string[] = []\n  parts.push(\n    `(function(){try{`,\n    `var r=document.documentElement,s=r.style;`,\n    `var q=function(m){try{return window.matchMedia(m).matches}catch(e){return false}};`,\n    `var get=function(k){try{return localStorage.getItem(k)}catch(e){return null}};`,\n    // The main document. `raw !== null` rather than truthiness: an empty string is a\n    // stored (corrupt) value, so it does not fall through to the legacy key.\n    `var raw=get(${literal(options.key)}),doc=null,legacy=null;`,\n    `if(raw!==null){try{var x=JSON.parse(raw);if(x&&typeof x==='object'&&!Array.isArray(x)${versionGuard})doc=x}catch(e){}}`\n  )\n  if (options.legacyAppearanceKey !== undefined) {\n    parts.push(`else legacy=get(${literal(options.legacyAppearanceKey)});`)\n  }\n  parts.push(\n    `var m=doc?doc[${literal(field)}]:legacy;`,\n    `var mode=m==='light'||m==='dark'?m:'system';`,\n    `var dark=mode==='dark'||(mode==='system'&&q('(prefers-color-scheme: dark)'));`,\n    `var fallback=dark?${literal(defaultDarkThemeId)}:${literal(defaultLightThemeId)};`,\n    `var want=doc?(dark?doc.darkThemeId:doc.lightThemeId):null;`,\n    `if(typeof want!=='string')want=fallback;`,\n    `var ids=[${builtinThemes.map((theme) => literal(theme.id)).join(',')}];`,\n    `var id=ids.indexOf(want)!==-1?want:null,tokens=null;`\n  )\n  if (options.libraryKey !== undefined) {\n    parts.push(\n      `if(id===null){try{var lib=JSON.parse(get(${literal(options.libraryKey)})||'null');`,\n      `if(lib&&typeof lib==='object'&&lib.version===${Number(options.libraryVersion ?? 1)}&&Array.isArray(lib.themes)){`,\n      `for(var i=0;i!==lib.themes.length;i++){var t=lib.themes[i];`,\n      `if(t&&t.id===want&&t.flatTokens&&typeof t.flatTokens==='object'){id=want;tokens=t.flatTokens;break}}}}catch(e){}}`\n    )\n  }\n  parts.push(\n    `if(id===null)id=fallback;`,\n    `r.classList.toggle('dark',dark);`,\n    `s.colorScheme=dark?'dark':'light';`,\n    `r.dataset.theme=id;`,\n    `r.dataset.appearance=dark?'dark':'light';`\n  )\n  if (options.libraryKey !== undefined) {\n    parts.push(\n      `if(tokens){for(var n in tokens){if(Object.prototype.hasOwnProperty.call(tokens,n)&&n.slice(0,2)==='--'&&typeof tokens[n]==='string')s.setProperty(n,tokens[n])}}`\n    )\n  }\n  parts.push(\n    `var a=doc&&typeof doc.accent==='string'?doc.accent:'';`,\n    `var accent=[${presets.join(',')}].indexOf(a)!==-1?a:/^#[0-9a-fA-F]{6}$/.test(a)?'custom':a.slice(0,5)==='ansi-'?'':${literal(defaultAccent)};`,\n    `if(accent)r.dataset.accent=accent;`,\n    `if(doc&&doc.density==='compact')r.dataset.density='compact';`\n  )\n  if (options.surface) {\n    parts.push(\n      // Reduce Transparency forces the opaque surface; a translucent request resolves\n      // to frosted because the host's capability is unknown before the provider mounts.\n      `var reduce=q(${literal(REDUCED_TRANSPARENCY_QUERY)})||!!(doc&&doc.reduceTransparency===true);`,\n      `var surface=reduce?'opaque':doc&&(doc.surface==='frosted'||doc.surface==='translucent')?'frosted':'opaque';`,\n      `r.dataset.surface=surface;`,\n      `r.dataset.reduceTransparency=reduce?'true':'false';`,\n      `s.setProperty('--surface-alpha',${JSON.stringify(surfaceAlpha)}[surface]);`\n    )\n  }\n  parts.push(`}catch(e){}})();`)\n\n  return `${parts.join('')}${fontSettingsBootstrapScript(options.key, options.version)}`\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,SAAgB,oBAAoB,OAAuB;CACzD,OAAO,wBAAwB,KAAK;AACtC;AAkFA,SAAgB,YAAY,QAAqC,mBAA2B;CAC1F,IAAI,OAAO,UAAU,UAAU,OAAO,iBAAiB,KAAK;CAC5D,OAAO,kBAAkB,KAAK;AAChC;AAEA,SAAS,iBAAiB,YAA4B;CAEpD,OAAO,GAAG,8CADmD,oBAAoB,UAAU,EAAE,wXAC1E,4BAA4B,UAAU;AAC3D;AAEA,IAAM,UAAU;AAEhB,SAAS,kBAAkB,SAAqC;CAC9D,MAAM,QAAQ,QAAQ,mBAAmB;CACzC,MAAM,eACJ,QAAQ,YAAY,KAAA,IAAY,KAAK,iBAAiB,OAAO,QAAQ,OAAO;CAC9E,MAAM,UAAU,cACb,QAAQ,WAAW,OAAO,OAAO,OAAO,CAAC,CACzC,KAAK,WAAW,QAAQ,OAAO,EAAE,CAAC;CACrC,MAAM,gBACJ,QAAQ,kBAAkB,KAAA,IACtB,KACA,eAAe,QAAQ,aAAa,IAClC,WACA,QAAQ;CAEhB,MAAM,QAAkB,CAAC;CACzB,MAAM,KACJ,oBACA,6CACA,sFACA,kFAGA,eAAe,QAAQ,QAAQ,GAAG,EAAE,0BACpC,wFAAwF,aAAa,mBACvG;CACA,IAAI,QAAQ,wBAAwB,KAAA,GAClC,MAAM,KAAK,mBAAmB,QAAQ,QAAQ,mBAAmB,EAAE,GAAG;CAExE,MAAM,KACJ,iBAAiB,QAAQ,KAAK,EAAE,YAChC,gDACA,iFACA,qBAAqB,QAAQ,kBAAkB,EAAE,GAAG,QAAQ,mBAAmB,EAAE,IACjF,8DACA,4CACA,YAAY,cAAc,KAAK,UAAU,QAAQ,MAAM,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE,KACtE,sDACF;CACA,IAAI,QAAQ,eAAe,KAAA,GACzB,MAAM,KACJ,4CAA4C,QAAQ,QAAQ,UAAU,EAAE,cACxE,gDAAgD,OAAO,QAAQ,kBAAkB,CAAC,EAAE,gCACpF,+DACA,mHACF;CAEF,MAAM,KACJ,6BACA,oCACA,sCACA,uBACA,2CACF;CACA,IAAI,QAAQ,eAAe,KAAA,GACzB,MAAM,KACJ,kKACF;CAEF,MAAM,KACJ,0DACA,eAAe,QAAQ,KAAK,GAAG,EAAE,qFAAqF,QAAQ,aAAa,EAAE,IAC7I,sCACA,8DACF;CACA,IAAI,QAAQ,SACV,MAAM,KAGJ,gBAAgB,QAAQ,0BAA0B,EAAE,6CACpD,+GACA,8BACA,uDACA,mCAAmC,KAAK,UAAU,YAAY,EAAE,YAClE;CAEF,MAAM,KAAK,kBAAkB;CAE7B,OAAO,GAAG,MAAM,KAAK,EAAE,IAAI,4BAA4B,QAAQ,KAAK,QAAQ,OAAO;AACrF"}

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

@@ -1,6 +1,8 @@
 import { type AppearanceEditorFontSettings } from '#lib/appearance-font-settings';
 import type { AccentPreset } from '@adea-ai/themes';
 import { type AccentRoles } from '#lib/accent-roles';
+import { type FontZoomIntent } from '#lib/font-zoom';
+import type { ThemeSurface } from '#lib/theme-surface';
 import { type ThemeAppearance, type ThemeVariant } from '#lib/themes';
 /**
  * The pure half of the theme provider: what a selection is, how two selections
@@ -50,6 +52,30 @@ export type ThemeSelection = {
      * keeps working and `ThemeSelection` stays assignable without it.
      */
     density?: ThemeDensity;
+    /**
+     * The terminal either follows the interface theme (`theme`, or absent) or is pinned
+     * to another theme's terminal palette by that theme's id. The pin is written over
+     * the interface variant's own `--terminal-*` properties, so a light interface can
+     * carry a dark terminal.
+     *
+     * An id the registry does not hold paints the interface palette and stays in the
+     * selection, the same rule as an unknown theme id.
+     *
+     * Optional and not defaulted: see {@link defaultThemeSelection}.
+     */
+    terminalThemeId?: string;
+    /**
+     * How opaque elevated panels are. Written to `<html>` only when the provider's
+     * `surface` prop is on or this is set; absent, a host paints no surface axis at
+     * all. Resolved against the OS and the host's capability before it is painted —
+     * see `resolveSurface` — so the value stored is a preference, never the outcome.
+     */
+    surface?: ThemeSurface;
+    /**
+     * The user's own Reduce Transparency switch, which forces the `opaque` surface the
+     * same way the operating system's setting does.
+     */
+    reduceTransparency?: boolean;
 };
 /**
  * The two density rungs.
@@ -116,6 +142,24 @@ export type ThemeContextValue = {
      * registry does not hold: each means "keep the inherited accent".
      */
     accentRolesFor: (accent: string | null, variantId?: string) => AccentRoles | undefined;
+    /**
+     * The surface the committed selection paints, after Reduce Transparency and the
+     * host's translucency capability. `opaque` when the axis is off. Follows the
+     * committed selection, not a preview, like {@link ThemeContextValue.variant}.
+     */
+    effectiveSurface: () => ThemeSurface;
+    /**
+     * True while the operating system or the selection's `reduceTransparency` forces
+     * opaque surfaces. Always false when the surface axis is off, because nothing is
+     * then listening to the operating system.
+     */
+    reduceTransparencyActive: () => boolean;
+    /**
+     * Step the three text sizes together, or put them back to the defaults: what the
+     * `fontZoom` prop's chords do, for a host that binds its own keys or a menu. Goes
+     * through {@link ThemeContextValue.setSelection}, so it persists and ends a preview.
+     */
+    zoomFonts: (intent: FontZoomIntent) => void;
 };
 /** Keep the deprecated single-font view synchronized with the UI axis. */
 export declare function mergeThemeSelection(base: ThemeSelection, patch: Partial<ThemeSelection>): ThemeSelection;
@@ -145,6 +189,20 @@ export declare function resolveThemeState(selection: ThemeSelection, system: The
     appearance: ThemeAppearance;
     variant: ThemeVariant;
 };
+/**
+ * The variant whose terminal palette is pinned, or `undefined` when the terminal
+ * follows the interface theme.
+ *
+ * `theme`, an absent id and an id the registry does not hold all mean the interface
+ * palette: a terminal must never resolve to a blank or half-painted palette because a
+ * theme was deleted after it was pinned.
+ */
+export declare function resolveTerminalVariant(terminalThemeId: string | undefined, registry: readonly ThemeVariant[]): ThemeVariant | undefined;
+/**
+ * The font settings a zoom chord asks for: one pixel up or down on every axis, or
+ * the defaults for `reset`.
+ */
+export declare function zoomedFontSettings(selection: ThemeSelection, intent: FontZoomIntent): AppearanceEditorFontSettings;
 /**
  * The registry a provider resolves against: the catalogue, then the host's extras.
  *

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

@@ -1 +1 @@
-{"version":3,"file":"theme-state.d.ts","sourceRoot":"","sources":["../../../src/components/theme/theme-state.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"theme-state.d.ts","sourceRoot":"","sources":["../../../src/components/theme/theme-state.ts"],"names":[],"mappings":"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"}

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

@@ -1,6 +1,7 @@
 import { normalizeCustomAccent } from "../../lib/accent-roles.js";
 import { accentRolesForSelection, defaultDarkThemeId, defaultLightThemeId, resolveVariant } from "../../lib/themes.js";
 import { DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS, normalizeAppearanceEditorFontSettings } from "../../lib/appearance-font-settings.js";
+import { stepAppearanceFontSizes } from "../../lib/font-zoom.js";
 //#region src/components/theme/theme-state.ts
 /**
 * Deliberately lists only the fields every consumer has always had. A field added
@@ -92,6 +93,26 @@ function resolveThemeState(selection, system, registry) {
 	};
 }
 /**
+* The variant whose terminal palette is pinned, or `undefined` when the terminal
+* follows the interface theme.
+*
+* `theme`, an absent id and an id the registry does not hold all mean the interface
+* palette: a terminal must never resolve to a blank or half-painted palette because a
+* theme was deleted after it was pinned.
+*/
+function resolveTerminalVariant(terminalThemeId, registry) {
+	if (terminalThemeId === void 0 || terminalThemeId === "theme") return void 0;
+	return registry.find((candidate) => candidate.id === terminalThemeId);
+}
+/**
+* The font settings a zoom chord asks for: one pixel up or down on every axis, or
+* the defaults for `reset`.
+*/
+function zoomedFontSettings(selection, intent) {
+	if (intent === "reset") return { ...DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS };
+	return stepAppearanceFontSizes(selection.fonts, intent === "in" ? 1 : -1);
+}
+/**
 * 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`
@@ -117,6 +138,6 @@ function accentRolesForState(accent, variantId, state) {
 	});
 }
 //#endregion
-export { accentRolesForState, defaultThemeSelection, initialThemeSelection, mergeRegistry, mergeThemeSelection, resolveAppearance, resolveThemeState, resolvedDensity, selectedThemeId };
+export { accentRolesForState, defaultThemeSelection, initialThemeSelection, mergeRegistry, mergeThemeSelection, resolveAppearance, resolveTerminalVariant, resolveThemeState, resolvedDensity, selectedThemeId, zoomedFontSettings };
 
 //# sourceMappingURL=theme-state.js.map