@adea-ai/ui 0.105.0 → 0.106.1

package/dist/components/theme/appearance-panel.js

@@ -1,24 +1,27 @@
 import { cn } from "../../lib/utils.js";
 import { Heading } from "../ui/typography/typography.js";
-import { Button } from "../ui/button/button.js";
-import { RadioGroup, RadioGroupItem } from "../ui/radio-group/radio-group.js";
-import { accentPresets, fontOptions } from "../../lib/tokens.js";
+import { RadioGroup as RadioGroup$1, RadioGroupItem } from "../ui/radio-group/radio-group.js";
+import { accentPresets } from "../../lib/tokens.js";
 import { themesForAppearance } from "../../lib/themes.js";
+import { DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS } from "../../lib/appearance-font-settings.js";
+import { AccentSwatchGroups } from "../composites/appearance-editor/accent-swatch-groups.js";
+import { AppearanceFontSettingsGroup } from "../composites/appearance-editor/font-settings-group.js";
 import { ThemePicker } from "./theme-picker.js";
 import { useTheme } from "./theme-provider.js";
-import { createComponent, effect, insert, memo, mergeProps, setStyleProperty, spread, template } from "solid-js/web";
-import { For, Show, splitProps } from "solid-js";
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { Show, splitProps } from "solid-js";
+import { RadioGroup } from "@kobalte/core/radio-group";
 //#region src/components/theme/appearance-panel.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div data-slot=appearance-panel><section class="flex flex-col gap-3"><header class="flex flex-col gap-0.5"><p class="max-w-prose text-sm text-muted-foreground">Follow the system, or pin one. The theme below is chosen per appearance, so switching at sunset does not make you choose again.</p></header></section><section class="flex flex-col gap-3"><header class="flex flex-col gap-0.5"><p class="max-w-prose text-sm text-muted-foreground">Colours the interactive roles — the primary button, the focus ring, a selected row — on top of the theme above — one of the presets, or a colour the theme carries itself. Every option is measured against the surface it lands on, so none of them can make a label unreadable.</p></header><div role=radiogroup aria-label=Accent class="flex flex-wrap gap-2"></div></section><section class="flex flex-col gap-3"><header class="flex flex-col gap-0.5"><p class="max-w-prose text-sm text-muted-foreground">The interface face. Every option is self-hosted, so nothing is fetched at runtime and the choice survives going offline.`);
-var _tmpl$2 = /*#__PURE__*/ template(`<span aria-hidden=true class="size-3 rounded-full border border-border">`);
-var _tmpl$3 = /*#__PURE__*/ template(`<section class="flex flex-col gap-3"><header class="flex flex-col gap-0.5"><p class="max-w-prose text-sm text-muted-foreground">`);
+var _tmpl$ = /*#__PURE__*/ template(`<div data-slot=appearance-panel><section class="flex flex-col gap-3"><header class="flex flex-col gap-0.5"><p class="max-w-prose text-sm text-muted-foreground">Follow the system, or pin one. The theme below is chosen per appearance, so switching at sunset does not make you choose again.</p></header></section><section class="flex flex-col gap-3"><header class="flex flex-col gap-0.5"><p class="max-w-prose text-sm text-muted-foreground">Colours the interactive roles — the primary button, the focus ring, a selected row — on top of the theme above — one of the presets, or a colour the theme carries itself. Every option is measured against the surface it lands on, so none of them can make a label unreadable.</p></header></section><section class="flex flex-col gap-3"><header class="flex flex-col gap-0.5"><p class="max-w-prose text-sm text-muted-foreground">Choose separate families and sizes for the interface, reading, and code. Font families come from the shared catalogue and are self-hosted.`);
+var _tmpl$2 = /*#__PURE__*/ template(`<section class="flex flex-col gap-3"><header class="flex flex-col gap-0.5"><p class="max-w-prose text-sm text-muted-foreground">`);
 var LIGHT_THEMES = themesForAppearance("light");
 var DARK_THEMES = themesForAppearance("dark");
 function AppearancePanel(props) {
 	const [local, rest] = splitProps(props, ["class"]);
 	const { selection, setSelection, resolvedAppearance, themeAccents } = useTheme();
+	const selectedAccent = () => accentPresets.some((option) => option.id === selection().accent) || themeAccents().some((option) => option.id === selection().accent) ? selection().accent : "theme";
 	return (() => {
-		var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$2.nextSibling, _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$8 = _el$6.nextSibling, _el$9 = _el$5.nextSibling, _el$0 = _el$9.firstChild, _el$1 = _el$0.firstChild;
+		var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$2.nextSibling, _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$8 = _el$5.nextSibling, _el$9 = _el$8.firstChild, _el$0 = _el$9.firstChild;
 		spread(_el$, mergeProps({ get ["class"]() {
 			return cn("flex flex-col gap-8", local.class);
 		} }, rest), false, true);
@@ -27,7 +30,7 @@ function AppearancePanel(props) {
 			size: "card",
 			children: "Appearance"
 		}), _el$4);
-		insert(_el$2, createComponent(RadioGroup, {
+		insert(_el$2, createComponent(RadioGroup$1, {
 			get value() {
 				return selection().appearance;
 			},
@@ -92,116 +95,53 @@ function AppearancePanel(props) {
 			size: "card",
 			children: "Accent"
 		}), _el$7);
-		insert(_el$8, createComponent(For, {
-			each: accentPresets,
-			children: (preset) => createComponent(AccentOption, {
-				get id() {
-					return preset.id;
-				},
-				get label() {
-					return preset.label;
-				},
-				get checked() {
-					return selection().accent === preset.id;
-				},
-				get swatch() {
-					return memo(() => preset.id === "theme")() ? "var(--primary)" : `var(--accent-${preset.id}, ${preset.dark})`;
-				},
-				onSelect: () => setSelection({ accent: preset.id })
-			})
-		}), null);
-		insert(_el$8, createComponent(For, {
-			get each() {
-				return themeAccents();
-			},
-			children: (accent) => createComponent(AccentOption, {
-				get id() {
-					return accent.id;
-				},
-				get label() {
-					return `Theme ${accent.label.toLowerCase()}`;
-				},
-				get checked() {
-					return selection().accent === accent.id;
-				},
-				get swatch() {
-					return memo(() => resolvedAppearance() === "dark")() ? accent.dark : accent.light;
-				},
-				onSelect: () => setSelection({ accent: accent.id })
-			})
-		}), null);
-		insert(_el$0, createComponent(Heading, {
-			as: "h2",
-			size: "card",
-			children: "Typeface"
-		}), _el$1);
-		insert(_el$9, createComponent(RadioGroup, {
+		insert(_el$5, createComponent(RadioGroup, {
 			get value() {
-				return selection().font;
+				return selectedAccent();
 			},
-			onChange: (value) => setSelection({ font: value }),
-			"aria-label": "Typeface",
+			onChange: (accent) => setSelection({ accent }),
+			orientation: "horizontal",
+			"aria-label": "Accent",
+			"class": "flex flex-col items-start gap-3",
 			get children() {
-				return createComponent(For, {
-					each: fontOptions,
-					children: (option) => createComponent(RadioGroupItem, {
-						get value() {
-							return option.id;
-						},
-						get label() {
-							return option.label;
-						},
-						get description() {
-							return option.description;
-						}
-					})
+				return createComponent(AccentSwatchGroups, {
+					accentOptions: accentPresets,
+					get themeAccentOptions() {
+						return themeAccents();
+					},
+					get resolvedAppearance() {
+						return resolvedAppearance();
+					},
+					themeDefaultColor: "var(--primary)"
 				});
 			}
 		}), null);
+		insert(_el$9, createComponent(Heading, {
+			as: "h2",
+			size: "card",
+			children: "Fonts"
+		}), _el$0);
+		insert(_el$8, createComponent(AppearanceFontSettingsGroup, {
+			get settings() {
+				return selection().fonts ?? DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS;
+			},
+			onChange: (fonts) => setSelection({ fonts })
+		}), null);
 		return _el$;
 	})();
 }
-function AccentOption(props) {
-	return createComponent(Button, {
-		as: "button",
-		type: "button",
-		variant: "outline",
-		size: "sm",
-		role: "radio",
-		get ["data-accent-option"]() {
-			return props.id;
-		},
-		get ["aria-checked"]() {
-			return props.checked;
-		},
-		get ["aria-label"]() {
-			return props.label;
-		},
-		get ["class"]() {
-			return cn({ "border-ring ring-3 ring-primary-subtle": props.checked });
-		},
-		onClick: () => props.onSelect(),
-		get children() {
-			return [(() => {
-				var _el$10 = _tmpl$2();
-				effect((_$p) => setStyleProperty(_el$10, "background-color", props.swatch));
-				return _el$10;
-			})(), memo(() => props.label)];
-		}
-	});
-}
 function ThemeSection(props) {
 	return (() => {
-		var _el$11 = _tmpl$3(), _el$12 = _el$11.firstChild, _el$13 = _el$12.firstChild;
-		insert(_el$12, createComponent(Heading, {
+		var _el$1 = _tmpl$2(), _el$10 = _el$1.firstChild, _el$11 = _el$10.firstChild;
+		insert(_el$10, createComponent(Heading, {
 			as: "h2",
 			size: "card",
 			get children() {
 				return props.title;
 			}
-		}), _el$13);
-		insert(_el$13, () => props.description);
-		insert(_el$11, createComponent(ThemePicker, {
+		}), _el$11);
+		insert(_el$11, () => props.description);
+		insert(_el$1, createComponent(ThemePicker, {
 			get themes() {
 				return props.themes;
 			},
@@ -212,7 +152,7 @@ function ThemeSection(props) {
 				return props.onThemeSelect;
 			}
 		}), null);
-		return _el$11;
+		return _el$1;
 	})();
 }
 //#endregion

package/dist/components/theme/appearance-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"appearance-panel.js","names":["ComponentProps","For","Show","splitProps","accentPresets","fontOptions","themesForAppearance","cn","Button","RadioGroup","RadioGroupItem","ThemePicker","useTheme","Heading","AppearancePanelProps","LIGHT_THEMES","DARK_THEMES","AppearancePanel","props","local","rest","selection","setSelection","resolvedAppearance","themeAccents","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","_el$5","nextSibling","_el$6","_el$7","_el$8","_el$9","_el$0","_el$1","_$spread","_$mergeProps","class","_$insert","_$createComponent","as","size","children","value","appearance","onChange","label","description","when","ThemeSection","title","themes","selectedId","lightThemeId","onThemeSelect","theme","id","darkThemeId","each","preset","AccentOption","checked","accent","swatch","_$memo","dark","onSelect","toLowerCase","light","font","option","type","variant","role","data-accent-option","aria-checked","aria-label","onClick","_el$10","_tmpl$2","_$effect","_$p","_$setStyleProperty","ReturnType","_el$11","_tmpl$3","_el$12","_el$13","_$mergeProps","_$createComponent","_$memo","_$setStyleProperty"],"sources":["../../../src/components/theme/appearance-panel.tsx"],"sourcesContent":["import type { ComponentProps } from 'solid-js'\nimport { For, Show, splitProps } from 'solid-js'\nimport { accentPresets, fontOptions } from '#lib/tokens'\nimport { themesForAppearance } from '#lib/themes'\nimport { cn } from '#lib/utils'\nimport { Button } from '../ui/button/button'\nimport { RadioGroup, RadioGroupItem } from '../ui/radio-group/radio-group'\nimport { ThemePicker } from './theme-picker'\nimport { useTheme } from './theme-provider'\nimport { Heading } from '../ui/typography'\n\n/**\n * AppearancePanel.\n *\n * The appearance page, as a component rather than as a screen each application\n * draws for itself. Two applications that both let a user choose a theme should\n * offer the *same* choices in the *same* arrangement — otherwise \"Adea\" and\n * \"Cortana\" are two products that happen to share a component library, which is\n * the opposite of what this system is for.\n *\n * Four axes, in the order a user thinks about them:\n *\n *   1. **Appearance** — light, dark, or follow the system.\n *   2. **Themes** — one for each appearance. Both are shown at once, because the\n *      choice is per-appearance and hiding the other half makes it feel like one\n *      setting that keeps changing.\n *   3. **Accent** — adea's presets, then the accents the selected theme pair\n *      carries itself, layered on whichever theme is active.\n *   4. **Font** — the interface face.\n *\n * The panel reads and writes the provider's preference and keeps no state of its\n * own, so it cannot disagree with what is applied.\n */\nexport type AppearancePanelProps = ComponentProps<'div'>\n\nconst LIGHT_THEMES = themesForAppearance('light')\nconst DARK_THEMES = themesForAppearance('dark')\n\nexport function AppearancePanel(props: AppearancePanelProps) {\n  const [local, rest] = splitProps(props, ['class'])\n  const { selection, setSelection, resolvedAppearance, themeAccents } = useTheme()\n\n  return (\n    <div data-slot=\"appearance-panel\" class={cn('flex flex-col gap-8', local.class)} {...rest}>\n      {/* --- 1. Appearance ------------------------------------------------- */}\n      <section class=\"flex flex-col gap-3\">\n        <header class=\"flex flex-col gap-0.5\">\n          <Heading as=\"h2\" size=\"card\">\n            Appearance\n          </Heading>\n          <p class=\"max-w-prose text-sm text-muted-foreground\">\n            Follow the system, or pin one. The theme below is chosen per appearance, so switching at\n            sunset does not make you choose again.\n          </p>\n        </header>\n        <RadioGroup\n          value={selection().appearance}\n          onChange={(value) => setSelection({ appearance: value as 'light' | 'dark' | 'system' })}\n          aria-label=\"Appearance\"\n        >\n          <RadioGroupItem value=\"light\" label=\"Light\" description=\"Always the light theme.\" />\n          <RadioGroupItem value=\"dark\" label=\"Dark\" description=\"Always the dark theme.\" />\n          <RadioGroupItem\n            value=\"system\"\n            label=\"Match the system\"\n            description={`Currently resolving to ${resolvedAppearance()}.`}\n          />\n        </RadioGroup>\n      </section>\n\n      {/* --- 2. Themes ------------------------------------------------------ */}\n      <Show when={resolvedAppearance() === 'light'}>\n        <ThemeSection\n          title=\"Light theme\"\n          description=\"Shown when the appearance resolves to light.\"\n          themes={LIGHT_THEMES}\n          selectedId={selection().lightThemeId}\n          onThemeSelect={(theme) => setSelection({ lightThemeId: theme.id })}\n        />\n      </Show>\n      <Show when={resolvedAppearance() === 'dark'}>\n        <ThemeSection\n          title=\"Dark theme\"\n          description=\"Shown when the appearance resolves to dark.\"\n          themes={DARK_THEMES}\n          selectedId={selection().darkThemeId}\n          onThemeSelect={(theme) => setSelection({ darkThemeId: theme.id })}\n        />\n      </Show>\n\n      {/* --- 3. Accent ------------------------------------------------------ */}\n      <section class=\"flex flex-col gap-3\">\n        <header class=\"flex flex-col gap-0.5\">\n          <Heading as=\"h2\" size=\"card\">\n            Accent\n          </Heading>\n          <p class=\"max-w-prose text-sm text-muted-foreground\">\n            Colours the interactive roles — the primary button, the focus ring, a selected row — on\n            top of the theme above — one of the presets, or a colour the theme carries itself. Every\n            option is measured against the surface it lands on, so none of them can make a label\n            unreadable.\n          </p>\n        </header>\n        <div role=\"radiogroup\" aria-label=\"Accent\" class=\"flex flex-wrap gap-2\">\n          <For each={accentPresets}>\n            {(preset) => (\n              <AccentOption\n                id={preset.id}\n                label={preset.label}\n                checked={selection().accent === preset.id}\n                swatch={\n                  preset.id === 'theme'\n                    ? 'var(--primary)'\n                    : `var(--accent-${preset.id}, ${preset.dark})`\n                }\n                onSelect={() => setSelection({ accent: preset.id })}\n              />\n            )}\n          </For>\n          {/* The theme's own accents follow the presets. Their values are the\n              theme pair's, so the swatch shows the side that is active now. */}\n          <For each={themeAccents()}>\n            {(accent) => (\n              <AccentOption\n                id={accent.id}\n                label={`Theme ${accent.label.toLowerCase()}`}\n                checked={selection().accent === accent.id}\n                swatch={resolvedAppearance() === 'dark' ? accent.dark : accent.light}\n                onSelect={() => setSelection({ accent: accent.id })}\n              />\n            )}\n          </For>\n        </div>\n      </section>\n\n      {/* --- 4. Font -------------------------------------------------------- */}\n      <section class=\"flex flex-col gap-3\">\n        <header class=\"flex flex-col gap-0.5\">\n          <Heading as=\"h2\" size=\"card\">\n            Typeface\n          </Heading>\n          <p class=\"max-w-prose text-sm text-muted-foreground\">\n            The interface face. Every option is self-hosted, so nothing is fetched at runtime and\n            the choice survives going offline.\n          </p>\n        </header>\n        <RadioGroup\n          value={selection().font}\n          onChange={(value) => setSelection({ font: value as string })}\n          aria-label=\"Typeface\"\n        >\n          <For each={fontOptions}>\n            {(option) => (\n              <RadioGroupItem\n                value={option.id}\n                label={option.label}\n                description={option.description}\n              />\n            )}\n          </For>\n        </RadioGroup>\n      </section>\n    </div>\n  )\n}\n\nfunction AccentOption(props: {\n  id: string\n  label: string\n  checked: boolean\n  swatch: string\n  onSelect: () => void\n}) {\n  return (\n    <Button\n      as=\"button\"\n      type=\"button\"\n      variant=\"outline\"\n      size=\"sm\"\n      role=\"radio\"\n      data-accent-option={props.id}\n      aria-checked={props.checked}\n      aria-label={props.label}\n      class={cn({ 'border-ring ring-3 ring-primary-subtle': props.checked })}\n      onClick={() => props.onSelect()}\n    >\n      <span\n        aria-hidden=\"true\"\n        class=\"size-3 rounded-full border border-border\"\n        style={{ 'background-color': props.swatch }}\n      />\n      {props.label}\n    </Button>\n  )\n}\n\nfunction ThemeSection(props: {\n  title: string\n  description: string\n  themes: ReturnType<typeof themesForAppearance>\n  selectedId: string\n  onThemeSelect: (theme: ReturnType<typeof themesForAppearance>[number]) => void\n}) {\n  return (\n    <section class=\"flex flex-col gap-3\">\n      <header class=\"flex flex-col gap-0.5\">\n        <Heading as=\"h2\" size=\"card\">\n          {props.title}\n        </Heading>\n        <p class=\"max-w-prose text-sm text-muted-foreground\">{props.description}</p>\n      </header>\n      <ThemePicker\n        themes={props.themes}\n        selectedId={props.selectedId}\n        onThemeSelect={props.onThemeSelect}\n      />\n    </section>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"appearance-panel.js","names":["ComponentProps","Show","splitProps","RadioGroup","Radio","accentPresets","themesForAppearance","DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS","cn","AccentSwatchGroups","AppearanceFontSettingsGroup","RadioGroupItem","ThemePicker","useTheme","Heading","AppearancePanelProps","LIGHT_THEMES","DARK_THEMES","AppearancePanel","props","local","rest","selection","setSelection","resolvedAppearance","themeAccents","selectedAccent","some","option","id","accent","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","_el$5","nextSibling","_el$6","_el$7","_el$8","_el$9","_el$0","_$spread","_$mergeProps","class","_$insert","_$createComponent","as","size","children","value","appearance","onChange","label","description","when","ThemeSection","title","themes","selectedId","lightThemeId","onThemeSelect","theme","darkThemeId","orientation","accentOptions","themeAccentOptions","themeDefaultColor","settings","fonts","ReturnType","_el$1","_tmpl$2","_el$10","_el$11","_$mergeProps","_$createComponent","RadioGroup","Radio"],"sources":["../../../src/components/theme/appearance-panel.tsx"],"sourcesContent":["import type { ComponentProps } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { RadioGroup as Radio } from '@kobalte/core/radio-group'\nimport { accentPresets } from '#lib/tokens'\nimport { themesForAppearance } from '#lib/themes'\nimport { DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS } from '#lib/appearance-font-settings'\nimport { cn } from '#lib/utils'\nimport { AccentSwatchGroups } from '../composites/appearance-editor/accent-swatch-groups'\nimport { AppearanceFontSettingsGroup } from '../composites/appearance-editor/font-settings-group'\nimport { RadioGroup, RadioGroupItem } from '../ui/radio-group/radio-group'\nimport { ThemePicker } from './theme-picker'\nimport { useTheme } from './theme-provider'\nimport { Heading } from '../ui/typography'\n\n/**\n * AppearancePanel.\n *\n * The appearance page, as a component rather than as a screen each application\n * draws for itself. Two applications that both let a user choose a theme should\n * offer the *same* choices in the *same* arrangement — otherwise \"Adea\" and\n * \"Cortana\" are two products that happen to share a component library, which is\n * the opposite of what this system is for.\n *\n * Four axes, in the order a user thinks about them:\n *\n *   1. **Appearance** — light, dark, or follow the system.\n *   2. **Themes** — one for each appearance. Both are shown at once, because the\n *      choice is per-appearance and hiding the other half makes it feel like one\n *      setting that keeps changing.\n *   3. **Accent** — adea's presets, then the accents the selected theme pair\n *      carries itself, layered on whichever theme is active.\n *   4. **Fonts** — separate families and sizes for interface, content and code.\n *\n * The panel reads and writes the provider's preference and keeps no state of its\n * own, so it cannot disagree with what is applied.\n */\nexport type AppearancePanelProps = ComponentProps<'div'>\n\nconst LIGHT_THEMES = themesForAppearance('light')\nconst DARK_THEMES = themesForAppearance('dark')\n\nexport function AppearancePanel(props: AppearancePanelProps) {\n  const [local, rest] = splitProps(props, ['class'])\n  const { selection, setSelection, resolvedAppearance, themeAccents } = useTheme()\n  const selectedAccent = () =>\n    accentPresets.some((option) => option.id === selection().accent) ||\n    themeAccents().some((option) => option.id === selection().accent)\n      ? selection().accent\n      : 'theme'\n\n  return (\n    <div data-slot=\"appearance-panel\" class={cn('flex flex-col gap-8', local.class)} {...rest}>\n      {/* --- 1. Appearance ------------------------------------------------- */}\n      <section class=\"flex flex-col gap-3\">\n        <header class=\"flex flex-col gap-0.5\">\n          <Heading as=\"h2\" size=\"card\">\n            Appearance\n          </Heading>\n          <p class=\"max-w-prose text-sm text-muted-foreground\">\n            Follow the system, or pin one. The theme below is chosen per appearance, so switching at\n            sunset does not make you choose again.\n          </p>\n        </header>\n        <RadioGroup\n          value={selection().appearance}\n          onChange={(value) => setSelection({ appearance: value as 'light' | 'dark' | 'system' })}\n          aria-label=\"Appearance\"\n        >\n          <RadioGroupItem value=\"light\" label=\"Light\" description=\"Always the light theme.\" />\n          <RadioGroupItem value=\"dark\" label=\"Dark\" description=\"Always the dark theme.\" />\n          <RadioGroupItem\n            value=\"system\"\n            label=\"Match the system\"\n            description={`Currently resolving to ${resolvedAppearance()}.`}\n          />\n        </RadioGroup>\n      </section>\n\n      {/* --- 2. Themes ------------------------------------------------------ */}\n      <Show when={resolvedAppearance() === 'light'}>\n        <ThemeSection\n          title=\"Light theme\"\n          description=\"Shown when the appearance resolves to light.\"\n          themes={LIGHT_THEMES}\n          selectedId={selection().lightThemeId}\n          onThemeSelect={(theme) => setSelection({ lightThemeId: theme.id })}\n        />\n      </Show>\n      <Show when={resolvedAppearance() === 'dark'}>\n        <ThemeSection\n          title=\"Dark theme\"\n          description=\"Shown when the appearance resolves to dark.\"\n          themes={DARK_THEMES}\n          selectedId={selection().darkThemeId}\n          onThemeSelect={(theme) => setSelection({ darkThemeId: theme.id })}\n        />\n      </Show>\n\n      {/* --- 3. Accent ------------------------------------------------------ */}\n      <section class=\"flex flex-col gap-3\">\n        <header class=\"flex flex-col gap-0.5\">\n          <Heading as=\"h2\" size=\"card\">\n            Accent\n          </Heading>\n          <p class=\"max-w-prose text-sm text-muted-foreground\">\n            Colours the interactive roles — the primary button, the focus ring, a selected row — on\n            top of the theme above — one of the presets, or a colour the theme carries itself. Every\n            option is measured against the surface it lands on, so none of them can make a label\n            unreadable.\n          </p>\n        </header>\n        <Radio\n          value={selectedAccent()}\n          onChange={(accent) => setSelection({ accent })}\n          orientation=\"horizontal\"\n          aria-label=\"Accent\"\n          class=\"flex flex-col items-start gap-3\"\n        >\n          <AccentSwatchGroups\n            accentOptions={accentPresets}\n            themeAccentOptions={themeAccents()}\n            resolvedAppearance={resolvedAppearance()}\n            themeDefaultColor=\"var(--primary)\"\n          />\n        </Radio>\n      </section>\n\n      {/* --- 4. Fonts ------------------------------------------------------- */}\n      <section class=\"flex flex-col gap-3\">\n        <header class=\"flex flex-col gap-0.5\">\n          <Heading as=\"h2\" size=\"card\">\n            Fonts\n          </Heading>\n          <p class=\"max-w-prose text-sm text-muted-foreground\">\n            Choose separate families and sizes for the interface, reading, and code. Font families\n            come from the shared catalogue and are self-hosted.\n          </p>\n        </header>\n        <AppearanceFontSettingsGroup\n          settings={selection().fonts ?? DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS}\n          onChange={(fonts) => setSelection({ fonts })}\n        />\n      </section>\n    </div>\n  )\n}\n\nfunction ThemeSection(props: {\n  title: string\n  description: string\n  themes: ReturnType<typeof themesForAppearance>\n  selectedId: string\n  onThemeSelect: (theme: ReturnType<typeof themesForAppearance>[number]) => void\n}) {\n  return (\n    <section class=\"flex flex-col gap-3\">\n      <header class=\"flex flex-col gap-0.5\">\n        <Heading as=\"h2\" size=\"card\">\n          {props.title}\n        </Heading>\n        <p class=\"max-w-prose text-sm text-muted-foreground\">{props.description}</p>\n      </header>\n      <ThemePicker\n        themes={props.themes}\n        selectedId={props.selectedId}\n        onThemeSelect={props.onThemeSelect}\n      />\n    </section>\n  )\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,5 @@
 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';
 /**
@@ -17,7 +18,7 @@ import { type ThemeAppearance, type ThemeVariant } from '#lib/themes';
  *   - **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.
- *   - **a font** — the interface face.
+ *   - **fonts** — separate family and size choices for UI, content and code.
  *
  * 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
@@ -45,8 +46,10 @@ export type ThemeSelection = {
      * not offer falls back to the variant's own primary.
      */
     accent: string;
-    /** A `fontOptions` id, or `space-grotesk` for the default. */
+    /** 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.

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;AAWnC,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,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,qBAAqB,EAAE,cAOnC,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;AA4DD,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,eAyGtD;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAKzD;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,WAAW,CAAC,UAAU,SAAoB,GAAG,MAAM,CAElE"}
+{"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"}

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

@@ -1,6 +1,8 @@
-import { accentPresets, fontOptions } from "../../lib/tokens.js";
+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 { safeScriptStringLiteral } from "../../lib/safe-script.js";
+import { DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS, applyAppearanceFontSettings, fontSettingsBootstrapScript, normalizeAppearanceEditorFontSettings } from "../../lib/appearance-font-settings.js";
 import { createComponent } from "solid-js/web";
 import { createContext, createEffect, createMemo, createSignal, onCleanup, splitProps, useContext } from "solid-js";
 //#region src/components/theme/theme-provider.tsx
@@ -9,7 +11,8 @@ var defaultThemeSelection = {
 	lightThemeId: defaultLightThemeId,
 	darkThemeId: defaultDarkThemeId,
 	accent: "theme",
-	font: "space-grotesk",
+	font: "system",
+	fonts: DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS,
 	density: "comfortable"
 };
 /**
@@ -46,18 +49,44 @@ function readSelection(storageKey) {
 		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: fontOptions.some((option) => option.id === parsed.font) ? parsed.font : defaultThemeSelection.font,
+			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",
@@ -66,16 +95,10 @@ function ThemeProvider(props) {
 		"selection"
 	]);
 	const storageKey = () => local.storageKey ?? "adea-appearance";
-	const [selection, setSelectionState] = createSignal({
-		...readSelection(storageKey()),
-		...local.initial
-	});
+	const [selection, setSelectionState] = createSignal(mergeThemeSelection(readSelection(storageKey()), local.initial ?? {}));
 	createEffect(() => {
 		const incoming = local.selection;
-		if (incoming) setSelectionState((current) => ({
-			...current,
-			...incoming
-		}));
+		if (incoming) setSelectionState((current) => mergeThemeSelection(current, incoming));
 	});
 	const [systemAppearance, setSystemAppearance] = createSignal("light");
 	if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
@@ -108,8 +131,7 @@ function ThemeProvider(props) {
 		root.style.colorScheme = resolvedAppearance();
 		if (!accent) root.removeAttribute("data-accent");
 		else root.dataset["accent"] = selection().accent;
-		if (selection().font === "space-grotesk") root.removeAttribute("data-font");
-		else root.dataset["font"] = selection().font;
+		applyAppearanceFontSettings(root, normalizeAppearanceEditorFontSettings(selection().fonts, selection().font).settings);
 		if (resolvedDensity(selection()) === "comfortable") root.removeAttribute("data-density");
 		else root.dataset["density"] = resolvedDensity(selection());
 	});
@@ -121,10 +143,7 @@ function ThemeProvider(props) {
 		themes: builtinThemes,
 		themeAccents,
 		setSelection(patch) {
-			const next = {
-				...selection(),
-				...patch
-			};
+			const next = mergeThemeSelection(selection(), patch);
 			setSelectionState(next);
 			try {
 				preferenceStore()?.setItem(storageKey(), JSON.stringify(next));
@@ -157,7 +176,7 @@ function ThemeProvider(props) {
 * was found; `tests/theme-script.test.ts` pins it so it cannot come back.
 */
 function inlineScriptLiteral(value) {
-	return JSON.stringify(value).replace(/[<>\u2028\u2029]/g, (character) => `\\u${character.charCodeAt(0).toString(16).padStart(4, "0")}`);
+	return safeScriptStringLiteral(value);
 }
 /**
 * The no-flash script.
@@ -179,7 +198,7 @@ function inlineScriptLiteral(value) {
 * 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.font&&p.font!=='space-grotesk')r.dataset.font=p.font;if(p.density==='compact')r.dataset.density='compact';}catch(e){}})();`;
+	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 };

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","fontOptions","AccentPreset","accentVariables","builtinThemes","defaultDarkThemeId","defaultLightThemeId","isThemeAccentId","themeAccentsFor","themeById","themeCssVariables","ThemeAppearance","ThemeVariant","ThemeSelection","appearance","lightThemeId","darkThemeId","accent","font","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","some","preset","id","option","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","replace","character","charCodeAt","toString","padStart","themeScript","_$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, fontOptions } from '#lib/tokens'\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 *   - **a font** — the interface face.\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  /** A `fontOptions` id, or `space-grotesk` for the default. */\n  font: string\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: 'space-grotesk',\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    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: fontOptions.some((option) => option.id === parsed.font)\n        ? (parsed.font as string)\n        : defaultThemeSelection.font,\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\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    ...readSelection(storageKey()),\n    ...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) => ({ ...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    if (selection().font === 'space-grotesk') root.removeAttribute('data-font')\n    else root.dataset['font'] = selection().font\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 = { ...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 JSON.stringify(value).replace(\n    /[<>\\u2028\\u2029]/g,\n    (character) => `\\\\u${character.charCodeAt(0).toString(16).padStart(4, '0')}`\n  )\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  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.font&&p.font!=='space-grotesk')r.dataset.font=p.font;if(p.density==='compact')r.dataset.density='compact';}catch(e){}})();`\n}\n"],"mappings":"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"}
+{"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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"}

package/dist/components/ui/code-block/code-block.d.ts

@@ -65,9 +65,9 @@ export declare function CodeBlock(props: CodeBlockProps): JSX.Element;
  * InlineCode.
  *
  * The `code` inside a sentence. It is a component rather than a class because it
- * has to hold three properties at once: it must not break the line's rhythm
- * (`font-size: 0.9em`, so it tracks the surrounding text), it must wrap rather
- * than overflow a narrow column (`overflow-wrap: anywhere` — an identifier with
+ * has to hold three properties at once: it uses the shared code family and size
+ * preference, and it wraps rather than overflows a narrow column
+ * (`overflow-wrap: anywhere` — an identifier with
  * no spaces is one long token), and it must be legible against whatever surface
  * it lands on, which is why the fill is a token and not a fixed grey.
  */

package/dist/components/ui/code-block/code-block.js

@@ -7,8 +7,8 @@ import { For, Show, createMemo, createSignal, splitProps } from "solid-js";
 var _tmpl$ = /*#__PURE__*/ template(`<div class="flex items-center gap-1 opacity-0 transition-opacity group-focus-within/code:opacity-100 group-hover/code:opacity-100">`);
 var _tmpl$2 = /*#__PURE__*/ template(`<p class="px-3 pb-2 text-xs text-muted-foreground italic">Generating…`);
 var _tmpl$3 = /*#__PURE__*/ template(`<div data-code-block-footer class="flex items-center justify-end border-t border-transparent px-3 py-1 transition-colors group-focus-within/code:border-border group-hover/code:border-border">`);
-var _tmpl$4 = /*#__PURE__*/ template(`<div><div class="flex items-center justify-between gap-2 px-3 py-1"><span class="truncate font-mono text-xs text-muted-foreground"></span></div><div class="scroll-fade overflow-x-auto"tabindex=0 role=region>`);
-var _tmpl$5 = /*#__PURE__*/ template(`<pre class="m-0 px-3 py-2"><code class="font-mono text-xs">`);
+var _tmpl$4 = /*#__PURE__*/ template(`<div><div class="flex items-center justify-between gap-2 px-3 py-1"><span class="truncate font-code text-code text-muted-foreground"></span></div><div class="scroll-fade overflow-x-auto"tabindex=0 role=region>`);
+var _tmpl$5 = /*#__PURE__*/ template(`<pre class="m-0 px-3 py-2"><code class="font-code text-code">`);
 var _tmpl$6 = /*#__PURE__*/ template(`<span class="grid grid-cols-[3ch_1fr] gap-3"><span class="text-right text-muted-foreground select-none"aria-hidden=true></span><span>`);
 var _tmpl$7 = /*#__PURE__*/ template(`<div class="px-3 py-2">`);
 var _tmpl$8 = /*#__PURE__*/ template(`<code>`);
@@ -164,9 +164,9 @@ function CodeBlock(props) {
 * InlineCode.
 *
 * The `code` inside a sentence. It is a component rather than a class because it
-* has to hold three properties at once: it must not break the line's rhythm
-* (`font-size: 0.9em`, so it tracks the surrounding text), it must wrap rather
-* than overflow a narrow column (`overflow-wrap: anywhere` — an identifier with
+* has to hold three properties at once: it uses the shared code family and size
+* preference, and it wraps rather than overflows a narrow column
+* (`overflow-wrap: anywhere` — an identifier with
 * no spaces is one long token), and it must be legible against whatever surface
 * it lands on, which is why the fill is a token and not a fixed grey.
 */
@@ -175,7 +175,7 @@ function InlineCode(props) {
 	return (() => {
 		var _el$12 = _tmpl$8();
 		spread(_el$12, mergeProps({ get ["class"]() {
-			return cn("rounded-sm bg-muted px-[0.4em] py-[0.15em] font-mono text-[0.9em] text-foreground [overflow-wrap:anywhere]", local.class);
+			return cn("rounded-sm bg-muted px-[0.4em] py-[0.15em] font-code text-code text-foreground [overflow-wrap:anywhere]", local.class);
 		} }, rest), false, false);
 		return _el$12;
 	})();