@adea-ai/ui 0.60.4 → 0.61.0

package/dist/components/motion/presence.js

@@ -0,0 +1,10 @@
+import { createComponent } from "solid-js/web";
+import { Presence } from "solid-motionone";
+//#region src/components/motion/presence.tsx
+function Presence$1(props) {
+	return createComponent(Presence, props);
+}
+//#endregion
+export { Presence$1 as Presence };
+
+//# sourceMappingURL=presence.js.map

package/dist/components/motion/presence.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presence.js","names":["ComponentProps","JSX","Presence","MotionPresence","PresenceProps","children","Element","props","_$createComponent","Presence","_$createComponent","MotionPresence"],"sources":["../../../src/components/motion/presence.tsx"],"sourcesContent":["import type { ComponentProps, JSX } from 'solid-js'\nimport { Presence as MotionPresence } from 'solid-motionone'\n\n/**\n * Presence.\n *\n * Enter and exit animation with a guarantee the CSS approach cannot make: an exit\n * that is **interrupted** — a menu reopened while it is still closing — returns the\n * element to its shown state instead of finishing the close and then reopening,\n * which is what a class-based `animate-out` does and what makes a fast user's\n * interactions feel like the interface is lagging behind them.\n *\n * The design system uses CSS transitions for state changes (a hover, a press) and\n * this for mounting and unmounting, which is the split that keeps the common case\n * free of a runtime while making the rare case correct.\n *\n *   <Show when={open()}>\n *     <Presence initial={{ opacity: 0, scale: 0.96 }} exit={{ opacity: 0, scale: 0.96 }}>\n *       <div>…</div>\n *     </Presence>\n *   </Show>\n *\n * `Presence` keeps the child mounted until its exit finishes, so the `<Show>` above\n * can stay the only condition in the tree.\n */\nexport type PresenceProps = ComponentProps<typeof MotionPresence> & {\n  children?: JSX.Element\n}\n\nexport function Presence(props: PresenceProps) {\n  return <MotionPresence {...props} />\n}\n"],"mappings":";;;AA6BA,SAAgBE,WAASK,OAAsB;CAC7C,OAAAC,gBAAQL,UAAmBI,KAAK;AAClC"}

package/dist/components/theme/appearance-panel.d.ts

@@ -0,0 +1,25 @@
+import type { ComponentProps } from 'solid-js';
+/**
+ * AppearancePanel.
+ *
+ * The appearance page, as a component rather than as a screen each application
+ * draws for itself. Two applications that both let a user choose a theme should
+ * offer the *same* choices in the *same* arrangement — otherwise "Adea" and
+ * "Cortana" are two products that happen to share a component library, which is
+ * the opposite of what this system is for.
+ *
+ * Four axes, in the order a user thinks about them:
+ *
+ *   1. **Appearance** — light, dark, or follow the system.
+ *   2. **Themes** — one for each appearance. Both are shown at once, because the
+ *      choice is per-appearance and hiding the other half makes it feel like one
+ *      setting that keeps changing.
+ *   3. **Accent** — adea's presets, layered on whichever theme is active.
+ *   4. **Font** — the interface face.
+ *
+ * The panel reads and writes the provider's preference and keeps no state of its
+ * own, so it cannot disagree with what is applied.
+ */
+export type AppearancePanelProps = ComponentProps<'div'>;
+export declare function AppearancePanel(props: AppearancePanelProps): import("solid-js").JSX.Element;
+//# sourceMappingURL=appearance-panel.d.ts.map

package/dist/components/theme/appearance-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"appearance-panel.d.ts","sourceRoot":"","sources":["../../../src/components/theme/appearance-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAU9C;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAA;AAKxD,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,kCAwH1D"}

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

@@ -0,0 +1,162 @@
+import { cn } from "../../lib/utils.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 { themesForAppearance } from "../../lib/themes.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";
+//#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"><h2 class="text-base font-semibold tracking-tight">Appearance</h2><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"><h2 class="text-base font-semibold tracking-tight">Accent</h2><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. Every preset 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"><h2 class="text-base font-semibold tracking-tight">Typeface</h2><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"><h2 class="text-base font-semibold tracking-tight"></h2><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 } = useTheme();
+	return (() => {
+		var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+		_el$2.firstChild;
+		var _el$4 = _el$2.nextSibling, _el$6 = _el$4.firstChild.nextSibling, _el$7 = _el$4.nextSibling;
+		_el$7.firstChild;
+		spread(_el$, mergeProps({ get ["class"]() {
+			return cn("flex flex-col gap-8", local.class);
+		} }, rest), false, true);
+		insert(_el$2, createComponent(RadioGroup, {
+			get value() {
+				return selection().appearance;
+			},
+			onChange: (value) => setSelection({ appearance: value }),
+			"aria-label": "Appearance",
+			get children() {
+				return [
+					createComponent(RadioGroupItem, {
+						value: "light",
+						label: "Light",
+						description: "Always the light theme."
+					}),
+					createComponent(RadioGroupItem, {
+						value: "dark",
+						label: "Dark",
+						description: "Always the dark theme."
+					}),
+					createComponent(RadioGroupItem, {
+						value: "system",
+						label: "Match the system",
+						get description() {
+							return `Currently resolving to ${resolvedAppearance()}.`;
+						}
+					})
+				];
+			}
+		}), null);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return resolvedAppearance() === "light";
+			},
+			get children() {
+				return createComponent(ThemeSection, {
+					title: "Light theme",
+					description: "Shown when the appearance resolves to light.",
+					themes: LIGHT_THEMES,
+					get selectedId() {
+						return selection().lightThemeId;
+					},
+					onThemeSelect: (theme) => setSelection({ lightThemeId: theme.id })
+				});
+			}
+		}), _el$4);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return resolvedAppearance() === "dark";
+			},
+			get children() {
+				return createComponent(ThemeSection, {
+					title: "Dark theme",
+					description: "Shown when the appearance resolves to dark.",
+					themes: DARK_THEMES,
+					get selectedId() {
+						return selection().darkThemeId;
+					},
+					onThemeSelect: (theme) => setSelection({ darkThemeId: theme.id })
+				});
+			}
+		}), _el$4);
+		insert(_el$6, createComponent(For, {
+			each: accentPresets,
+			children: (preset) => createComponent(Button, {
+				as: "button",
+				type: "button",
+				variant: "outline",
+				size: "sm",
+				role: "radio",
+				get ["aria-checked"]() {
+					return selection().accent === preset.id;
+				},
+				get ["aria-label"]() {
+					return preset.label;
+				},
+				get ["class"]() {
+					return cn({ "border-ring ring-3 ring-primary-subtle": selection().accent === preset.id });
+				},
+				onClick: () => setSelection({ accent: preset.id }),
+				get children() {
+					return [(() => {
+						var _el$9 = _tmpl$2();
+						effect((_$p) => setStyleProperty(_el$9, "background-color", preset.id === "theme" ? "var(--primary)" : `var(--accent-${preset.id}, ${preset.dark})`));
+						return _el$9;
+					})(), memo(() => preset.label)];
+				}
+			})
+		}));
+		insert(_el$7, createComponent(RadioGroup, {
+			get value() {
+				return selection().font;
+			},
+			onChange: (value) => setSelection({ font: value }),
+			"aria-label": "Typeface",
+			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;
+						}
+					})
+				});
+			}
+		}), null);
+		return _el$;
+	})();
+}
+function ThemeSection(props) {
+	return (() => {
+		var _el$0 = _tmpl$3(), _el$10 = _el$0.firstChild.firstChild, _el$11 = _el$10.nextSibling;
+		insert(_el$10, () => props.title);
+		insert(_el$11, () => props.description);
+		insert(_el$0, createComponent(ThemePicker, {
+			get themes() {
+				return props.themes;
+			},
+			get selectedId() {
+				return props.selectedId;
+			},
+			get onThemeSelect() {
+				return props.onThemeSelect;
+			}
+		}), null);
+		return _el$0;
+	})();
+}
+//#endregion
+export { AppearancePanel };
+
+//# sourceMappingURL=appearance-panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"appearance-panel.js","names":["ComponentProps","For","Show","splitProps","accentPresets","fontOptions","themesForAppearance","cn","Button","RadioGroup","RadioGroupItem","ThemePicker","useTheme","AppearancePanelProps","LIGHT_THEMES","DARK_THEMES","AppearancePanel","props","local","rest","selection","setSelection","resolvedAppearance","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$6","_el$7","_el$8","_$spread","_$mergeProps","class","_$insert","_$createComponent","value","appearance","onChange","children","label","description","when","ThemeSection","title","themes","selectedId","lightThemeId","onThemeSelect","theme","id","darkThemeId","each","preset","as","type","variant","size","role","aria-checked","accent","aria-label","onClick","_el$9","_tmpl$2","_$effect","_$p","_$setStyleProperty","dark","_$memo","font","option","ReturnType","_el$0","_tmpl$3","_el$1","_el$10","_el$11","_$mergeProps","_$createComponent","_$setStyleProperty","_$memo"],"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'\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, 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 } = 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          <h2 class=\"text-base font-semibold tracking-tight\">Appearance</h2>\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          <h2 class=\"text-base font-semibold tracking-tight\">Accent</h2>\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. Every preset is measured against the surface it lands on, so\n            none of them can make a label 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              <Button\n                as=\"button\"\n                type=\"button\"\n                variant=\"outline\"\n                size=\"sm\"\n                role=\"radio\"\n                aria-checked={selection().accent === preset.id}\n                aria-label={preset.label}\n                class={cn({\n                  'border-ring ring-3 ring-primary-subtle': selection().accent === preset.id,\n                })}\n                onClick={() => setSelection({ accent: preset.id })}\n              >\n                <span\n                  aria-hidden=\"true\"\n                  class=\"size-3 rounded-full border border-border\"\n                  style={{\n                    'background-color':\n                      preset.id === 'theme'\n                        ? 'var(--primary)'\n                        : `var(--accent-${preset.id}, ${preset.dark})`,\n                  }}\n                />\n                {preset.label}\n              </Button>\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          <h2 class=\"text-base font-semibold tracking-tight\">Typeface</h2>\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 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        <h2 class=\"text-base font-semibold tracking-tight\">{props.title}</h2>\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":";;;;;;;;;;;;;AAiCA,IAAMc,eAAeR,oBAAoB,OAAO;AAChD,IAAMS,cAAcT,oBAAoB,MAAM;AAE9C,SAAgBU,gBAAgBC,OAA6B;CAC3D,MAAM,CAACC,OAAOC,QAAQhB,WAAWc,OAAO,CAAC,OAAO,CAAC;CACjD,MAAM,EAAEG,WAAWC,cAAcC,uBAAuBV,SAAS;CAEjE,cAAA;EAAA,IAAAW,OAAAC,OAAA,GAAAC,QAAAF,KAAAG;EAAAD,MAAAC;EAAA,IAAAE,QAAAH,MAAAI,aAAAE,QAAAH,MAAAF,WAAAG,aAAAG,QAAAJ,MAAAC;EAAAG,MAAAN;EAAAQ,OAAAX,MAAAY,WAAA,EAAA,KAAA,WAAA;GAAA,OAC2C5B,GAAG,uBAAuBW,MAAMkB,KAAK;EAAC,EAAA,GAAMjB,IAAI,GAAA,OAAA,IAAA;EAAAkB,OAAAZ,OAAAa,gBAUpF7B,YAAU;GAAA,IACT8B,QAAK;IAAA,OAAEnB,UAAU,CAAC,CAACoB;GAAU;GAC7BC,WAAWF,UAAUlB,aAAa,EAAEmB,YAAYD,MAAqC,CAAC;GAAC,cAAA;GAAA,IAAAG,WAAA;IAAA,OAAA;KAAAJ,gBAGtF5B,gBAAc;MAAC6B,OAAK;MAASI,OAAK;MAASC,aAAW;KAAA,CAAA;KAAAN,gBACtD5B,gBAAc;MAAC6B,OAAK;MAAQI,OAAK;MAAQC,aAAW;KAAA,CAAA;KAAAN,gBACpD5B,gBAAc;MACb6B,OAAK;MACLI,OAAK;MAAA,IACLC,cAAW;OAAA,OAAE,0BAA0BtB,mBAAmB,EAAC;MAAG;KAAA,CAAA;IAAA;GAAA;EAAA,CAAA,GAAA,IAAA;EAAAe,OAAAd,MAAAe,gBAMnEpC,MAAI;GAAA,IAAC2C,OAAI;IAAA,OAAEvB,mBAAmB,MAAM;GAAO;GAAA,IAAAoB,WAAA;IAAA,OAAAJ,gBACzCQ,cAAY;KACXC,OAAK;KACLH,aAAW;KACXI,QAAQlC;KAAY,IACpBmC,aAAU;MAAA,OAAE7B,UAAU,CAAC,CAAC8B;KAAY;KACpCC,gBAAgBC,UAAU/B,aAAa,EAAE6B,cAAcE,MAAMC,GAAG,CAAC;IAAC,CAAA;GAAA;EAAA,CAAA,GAAAzB,KAAA;EAAAS,OAAAd,MAAAe,gBAGrEpC,MAAI;GAAA,IAAC2C,OAAI;IAAA,OAAEvB,mBAAmB,MAAM;GAAM;GAAA,IAAAoB,WAAA;IAAA,OAAAJ,gBACxCQ,cAAY;KACXC,OAAK;KACLH,aAAW;KACXI,QAAQjC;KAAW,IACnBkC,aAAU;MAAA,OAAE7B,UAAU,CAAC,CAACkC;KAAW;KACnCH,gBAAgBC,UAAU/B,aAAa,EAAEiC,aAAaF,MAAMC,GAAG,CAAC;IAAC,CAAA;GAAA;EAAA,CAAA,GAAAzB,KAAA;EAAAS,OAAAN,OAAAO,gBAehErC,KAAG;GAACsD,MAAMnD;GAAasC,WACpBc,WAAMlB,gBACL9B,QAAM;IACLiD,IAAE;IACFC,MAAI;IACJC,SAAO;IACPC,MAAI;IACJC,MAAI;IAAA,KAAA,kBAAA;KAAA,OACUzC,UAAU,CAAC,CAAC2C,WAAWP,OAAOH;IAAE;IAAA,KAAA,gBAAA;KAAA,OAClCG,OAAOb;IAAK;IAAA,KAAA,WAAA;KAAA,OACjBpC,GAAG,EACR,0CAA0Ca,UAAU,CAAC,CAAC2C,WAAWP,OAAOH,GAC1E,CAAC;IAAC;IACFY,eAAe5C,aAAa,EAAE0C,QAAQP,OAAOH,GAAG,CAAC;IAAC,IAAAX,WAAA;KAAA,OAAA,QAAA;MAAA,IAAAwB,QAAAC,QAAA;MAAAC,QAAAC,QAAAC,iBAAAJ,OAAA,oBAO5CV,OAAOH,OAAO,UACV,mBACA,gBAAgBG,OAAOH,GAAE,IAAKG,OAAOe,KAAI,EAAG,CAAA;MAAA,OAAAL;KAAA,EAAA,CAAA,GAAAM,WAGrDhB,OAAOb,KAAK,CAAA;IAAA;GAAA,CAAA;EAEhB,CAAA,CAAA;EAAAN,OAAAL,OAAAM,gBAcJ7B,YAAU;GAAA,IACT8B,QAAK;IAAA,OAAEnB,UAAU,CAAC,CAACqD;GAAI;GACvBhC,WAAWF,UAAUlB,aAAa,EAAEoD,MAAMlC,MAAgB,CAAC;GAAC,cAAA;GAAA,IAAAG,WAAA;IAAA,OAAAJ,gBAG3DrC,KAAG;KAACsD,MAAMlD;KAAWqC,WAClBgC,WAAMpC,gBACL5B,gBAAc;MAAA,IACb6B,QAAK;OAAA,OAAEmC,OAAOrB;MAAE;MAAA,IAChBV,QAAK;OAAA,OAAE+B,OAAO/B;MAAK;MAAA,IACnBC,cAAW;OAAA,OAAE8B,OAAO9B;MAAW;KAAA,CAAA;IAElC,CAAA;GAAA;EAAA,CAAA,GAAA,IAAA;EAAA,OAAArB;CAAA,EAAA,CAAA;AAMb;AAEA,SAASuB,aAAa7B,OAMnB;CACD,cAAA;EAAA,IAAA2D,QAAAC,QAAA,GAAAE,SAAAH,MAAAlD,WAAAA,YAAAsD,SAAAD,OAAAlD;EAAAQ,OAAA0C,cAG0D9D,MAAM8B,KAAK;EAAAV,OAAA2C,cACT/D,MAAM2B,WAAW;EAAAP,OAAAuC,OAAAtC,gBAExE3B,aAAW;GAAA,IACVqC,SAAM;IAAA,OAAE/B,MAAM+B;GAAM;GAAA,IACpBC,aAAU;IAAA,OAAEhC,MAAMgC;GAAU;GAAA,IAC5BE,gBAAa;IAAA,OAAElC,MAAMkC;GAAa;EAAA,CAAA,GAAA,IAAA;EAAA,OAAAyB;CAAA,EAAA,CAAA;AAI1C"}

package/dist/components/theme/index.d.ts

@@ -0,0 +1,5 @@
+export { AppearancePanel, type AppearancePanelProps } from './appearance-panel';
+export { ThemePicker, ThemePreview, ThemeSwatch, type ThemePickerProps, type ThemePreviewProps, type ThemeSwatchProps, } from './theme-picker';
+export { ThemeProvider, defaultThemeSelection, inlineScriptLiteral, resolvedDensity, themeScript, useTheme, type ThemeContextValue, type ThemeDensity, type ThemeProviderProps, type ThemeSelection, } from './theme-provider';
+export { ThemeToggle, type ThemeToggleProps } from './theme-toggle';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,oBAAoB,CAAA;AAC/E,OAAO,EACL,WAAW,EACX,YAAY,EACZ,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,GACtB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EACL,aAAa,EACb,qBAAqB,EACrB,mBAAmB,EACnB,eAAe,EACf,WAAW,EACX,QAAQ,EACR,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,KAAK,kBAAkB,EACvB,KAAK,cAAc,GACpB,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAA"}

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

@@ -0,0 +1,54 @@
+import type { ComponentProps } from 'solid-js';
+import type { ThemeVariant } from '#lib/themes';
+/**
+ * ThemeSwatch.
+ *
+ * The colours of a theme, as a small readable strip: the canvas, a card, the
+ * primary, an accent and the destructive fill. Enough to tell two dark themes
+ * apart at a glance and to recognise the one you want without applying it.
+ *
+ * A swatch is **read from the variant object**, not from a stylesheet, so a picker
+ * can show a theme that is not currently applied — which is the whole point of a
+ * picker. That is also why the catalogue is data rather than CSS.
+ */
+export type ThemeSwatchProps = ComponentProps<'span'> & {
+    theme: ThemeVariant;
+    /** Draw the swatch at the given size. */
+    size?: 'sm' | 'md' | 'lg';
+};
+export declare function ThemeSwatch(props: ThemeSwatchProps): import("solid-js").JSX.Element;
+/**
+ * ThemePreview.
+ *
+ * A miniature of the interface, painted in a theme's own colours: a rail, a panel,
+ * a heading, body text, a primary button and a destructive one.
+ *
+ * The point is that a colour strip cannot answer the question a user actually has —
+ * "would I want to look at this all day?" — and a real preview can. It is drawn
+ * with inline colours from the variant rather than by applying the theme, so a list
+ * of twenty previews costs one object read each instead of twenty theme swaps.
+ */
+export type ThemePreviewProps = ComponentProps<'div'> & {
+    theme: ThemeVariant;
+    /** Highlight the preview as the current selection. */
+    selected?: boolean;
+};
+export declare function ThemePreview(props: ThemePreviewProps): import("solid-js").JSX.Element;
+/**
+ * ThemePicker.
+ *
+ * The catalogue as a selectable grid. One appearance at a time — a light picker
+ * lists light themes and a dark picker lists dark ones — because choosing a dark
+ * theme while looking at a light interface is a choice nobody can evaluate.
+ *
+ * `onSelect` rather than an internal signal: the selection belongs to the
+ * preference the provider owns, and a picker that kept its own copy could disagree
+ * with what is applied.
+ */
+export type ThemePickerProps = ComponentProps<'div'> & {
+    themes: readonly ThemeVariant[];
+    selectedId: string;
+    onThemeSelect: (theme: ThemeVariant) => void;
+};
+export declare function ThemePicker(props: ThemePickerProps): import("solid-js").JSX.Element;
+//# sourceMappingURL=theme-picker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"theme-picker.d.ts","sourceRoot":"","sources":["../../../src/components/theme/theme-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAG9C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAG/C;;;;;;;;;;GAUG;AACH,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,MAAM,CAAC,GAAG;IACtD,KAAK,EAAE,YAAY,CAAA;IACnB,yCAAyC;IACzC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC1B,CAAA;AAQD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,kCAgClD;AAED;;;;;;;;;;GAUG;AACH,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACtD,KAAK,EAAE,YAAY,CAAA;IACnB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,kCAsCpD;AAED;;;;;;;;;;GAUG;AACH,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACrD,MAAM,EAAE,SAAS,YAAY,EAAE,CAAA;IAC/B,UAAU,EAAE,MAAM,CAAA;IAClB,aAAa,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAA;CAC7C,CAAA;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,kCAoClD"}

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

@@ -0,0 +1,156 @@
+import { cn } from "../../lib/utils.js";
+import { Button } from "../ui/button/button.js";
+import { className, createComponent, effect, insert, mergeProps, setStyleProperty, spread, template } from "solid-js/web";
+import { For, Show, splitProps } from "solid-js";
+//#region src/components/theme/theme-picker.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span data-slot=theme-swatch aria-hidden=true>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<span>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div data-slot=theme-preview><div class="flex h-24"><div class="theme-preview-edge flex w-6 flex-col items-center gap-1.5 border-e py-2"><span class="size-2.5 rounded-sm"></span><span class="size-2.5 rounded-sm"></span><span class="size-2.5 rounded-sm"></span></div><div class="flex flex-1 flex-col gap-1.5 p-2"><div class="h-1.5 w-14 rounded-full"></div><div class="h-1 w-20 rounded-full"></div><div class="h-1 w-16 rounded-full"></div><div class="mt-auto flex items-center gap-1"><span class="h-3 w-9 rounded-sm"></span><span class="h-3 w-6 rounded-sm"></span><span class="h-3 w-6 rounded-sm">`);
+var _tmpl$4 = /*#__PURE__*/ template(`<div data-slot=theme-picker role=radiogroup aria-label=Theme>`);
+var _tmpl$5 = /*#__PURE__*/ template(`<span class="text-muted-foreground text-2xs">`);
+var _tmpl$6 = /*#__PURE__*/ template(`<span class="flex flex-col items-center"><span class="text-xs font-medium">`);
+var swatchSizes = {
+	sm: "h-4 w-4",
+	md: "h-6 w-6",
+	lg: "h-8 w-8"
+};
+function ThemeSwatch(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"theme",
+		"size"
+	]);
+	const colors = () => local.theme.colors;
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps({ get ["class"]() {
+			return cn("border-border inline-flex shrink-0 overflow-hidden rounded-md border", local.class);
+		} }, rest), false, true);
+		insert(_el$, createComponent(For, {
+			get each() {
+				return [
+					colors().background,
+					colors().card,
+					colors().primary,
+					colors().accent,
+					colors().destructive
+				];
+			},
+			children: (color) => (() => {
+				var _el$2 = _tmpl$2();
+				setStyleProperty(_el$2, "background-color", color);
+				effect(() => className(_el$2, cn("block", swatchSizes[local.size ?? "md"])));
+				return _el$2;
+			})()
+		}));
+		return _el$;
+	})();
+}
+function ThemePreview(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"theme",
+		"selected"
+	]);
+	const c = () => local.theme.colors;
+	return (() => {
+		var _el$3 = _tmpl$3(), _el$5 = _el$3.firstChild.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$8 = _el$7.nextSibling, _el$0 = _el$5.nextSibling.firstChild, _el$1 = _el$0.nextSibling, _el$10 = _el$1.nextSibling, _el$12 = _el$10.nextSibling.firstChild, _el$13 = _el$12.nextSibling, _el$14 = _el$13.nextSibling;
+		spread(_el$3, mergeProps({
+			get ["class"]() {
+				return cn("w-44 overflow-hidden rounded-lg border shadow-xs", local.selected ? "border-primary ring-3 ring-primary-subtle" : "border-border", local.class);
+			},
+			get style() {
+				return { "background-color": c().background };
+			}
+		}, rest), false, true);
+		effect((_p$) => {
+			var _v$ = c().sidebar, _v$2 = c().sidebarBorder, _v$3 = c().primary, _v$4 = c().sidebarAccent, _v$5 = c().sidebarAccent, _v$6 = c().foreground, _v$7 = c().mutedForeground, _v$8 = c().mutedForeground, _v$9 = c().primary, _v$0 = c().destructive, _v$1 = c().secondary;
+			_v$ !== _p$.e && setStyleProperty(_el$5, "background-color", _p$.e = _v$);
+			_v$2 !== _p$.t && setStyleProperty(_el$5, "--preview-edge", _p$.t = _v$2);
+			_v$3 !== _p$.a && setStyleProperty(_el$6, "background-color", _p$.a = _v$3);
+			_v$4 !== _p$.o && setStyleProperty(_el$7, "background-color", _p$.o = _v$4);
+			_v$5 !== _p$.i && setStyleProperty(_el$8, "background-color", _p$.i = _v$5);
+			_v$6 !== _p$.n && setStyleProperty(_el$0, "background-color", _p$.n = _v$6);
+			_v$7 !== _p$.s && setStyleProperty(_el$1, "background-color", _p$.s = _v$7);
+			_v$8 !== _p$.h && setStyleProperty(_el$10, "background-color", _p$.h = _v$8);
+			_v$9 !== _p$.r && setStyleProperty(_el$12, "background-color", _p$.r = _v$9);
+			_v$0 !== _p$.d && setStyleProperty(_el$13, "background-color", _p$.d = _v$0);
+			_v$1 !== _p$.l && setStyleProperty(_el$14, "background-color", _p$.l = _v$1);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0,
+			n: void 0,
+			s: void 0,
+			h: void 0,
+			r: void 0,
+			d: void 0,
+			l: void 0
+		});
+		return _el$3;
+	})();
+}
+function ThemePicker(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"themes",
+		"selectedId",
+		"onThemeSelect"
+	]);
+	return (() => {
+		var _el$15 = _tmpl$4();
+		spread(_el$15, mergeProps({ get ["class"]() {
+			return cn("flex flex-wrap gap-3", local.class);
+		} }, rest), false, true);
+		insert(_el$15, createComponent(For, {
+			get each() {
+				return local.themes;
+			},
+			children: (theme) => createComponent(Button, {
+				as: "button",
+				type: "button",
+				variant: "ghost",
+				size: "sm",
+				role: "radio",
+				get ["aria-checked"]() {
+					return local.selectedId === theme.id;
+				},
+				get ["aria-label"]() {
+					return `${theme.familyLabel} ${theme.label}`;
+				},
+				"class": "h-auto flex-col gap-1.5 p-0 hover:bg-transparent",
+				onClick: () => local.onThemeSelect(theme),
+				get children() {
+					return [createComponent(ThemePreview, {
+						theme,
+						get selected() {
+							return local.selectedId === theme.id;
+						}
+					}), (() => {
+						var _el$16 = _tmpl$6(), _el$17 = _el$16.firstChild;
+						insert(_el$17, () => theme.label);
+						insert(_el$16, createComponent(Show, {
+							get when() {
+								return theme.family !== "adea";
+							},
+							get children() {
+								var _el$18 = _tmpl$5();
+								insert(_el$18, () => theme.familyLabel);
+								return _el$18;
+							}
+						}), null);
+						return _el$16;
+					})()];
+				}
+			})
+		}));
+		return _el$15;
+	})();
+}
+//#endregion
+export { ThemePicker, ThemePreview, ThemeSwatch };
+
+//# sourceMappingURL=theme-picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"theme-picker.js","names":["ComponentProps","For","Show","splitProps","cn","ThemeVariant","Button","ThemeSwatchProps","theme","size","swatchSizes","sm","md","lg","const","ThemeSwatch","props","local","rest","colors","_el$","_tmpl$","_$spread","_$mergeProps","class","_$insert","_$createComponent","each","background","card","primary","accent","destructive","children","color","_el$2","_tmpl$2","_$setStyleProperty","_$effect","_$className","ThemePreviewProps","selected","ThemePreview","c","_el$3","_tmpl$3","_el$4","firstChild","_el$5","_el$6","_el$7","nextSibling","_el$8","_el$9","_el$0","_el$1","_el$10","_el$11","_el$12","_el$13","_el$14","style","_p$","_v$","sidebar","_v$2","sidebarBorder","_v$3","_v$4","sidebarAccent","_v$5","_v$6","foreground","_v$7","mutedForeground","_v$8","_v$9","_v$0","_v$1","secondary","e","t","a","o","i","n","s","h","r","d","l","undefined","ThemePickerProps","themes","selectedId","onThemeSelect","ThemePicker","_el$15","_tmpl$4","as","type","variant","role","aria-checked","id","aria-label","familyLabel","label","onClick","_el$16","_tmpl$6","_el$17","when","family","_el$18","_tmpl$5","_$mergeProps","_$createComponent","_$className","_$setStyleProperty"],"sources":["../../../src/components/theme/theme-picker.tsx"],"sourcesContent":["import type { ComponentProps } from 'solid-js'\nimport { For, Show, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\nimport type { ThemeVariant } from '#lib/themes'\nimport { Button } from '../ui/button/button'\n\n/**\n * ThemeSwatch.\n *\n * The colours of a theme, as a small readable strip: the canvas, a card, the\n * primary, an accent and the destructive fill. Enough to tell two dark themes\n * apart at a glance and to recognise the one you want without applying it.\n *\n * A swatch is **read from the variant object**, not from a stylesheet, so a picker\n * can show a theme that is not currently applied — which is the whole point of a\n * picker. That is also why the catalogue is data rather than CSS.\n */\nexport type ThemeSwatchProps = ComponentProps<'span'> & {\n  theme: ThemeVariant\n  /** Draw the swatch at the given size. */\n  size?: 'sm' | 'md' | 'lg'\n}\n\nconst swatchSizes = {\n  sm: 'h-4 w-4',\n  md: 'h-6 w-6',\n  lg: 'h-8 w-8',\n} as const\n\nexport function ThemeSwatch(props: ThemeSwatchProps) {\n  const [local, rest] = splitProps(props, ['class', 'theme', 'size'])\n  const colors = () => local.theme.colors\n\n  return (\n    <span\n      data-slot=\"theme-swatch\"\n      aria-hidden=\"true\"\n      class={cn(\n        'border-border inline-flex shrink-0 overflow-hidden rounded-md border',\n        local.class\n      )}\n      {...rest}\n    >\n      <For\n        each={[\n          colors().background,\n          colors().card,\n          colors().primary,\n          colors().accent,\n          colors().destructive,\n        ]}\n      >\n        {(color) => (\n          <span\n            class={cn('block', swatchSizes[local.size ?? 'md'])}\n            style={{ 'background-color': color }}\n          />\n        )}\n      </For>\n    </span>\n  )\n}\n\n/**\n * ThemePreview.\n *\n * A miniature of the interface, painted in a theme's own colours: a rail, a panel,\n * a heading, body text, a primary button and a destructive one.\n *\n * The point is that a colour strip cannot answer the question a user actually has —\n * \"would I want to look at this all day?\" — and a real preview can. It is drawn\n * with inline colours from the variant rather than by applying the theme, so a list\n * of twenty previews costs one object read each instead of twenty theme swaps.\n */\nexport type ThemePreviewProps = ComponentProps<'div'> & {\n  theme: ThemeVariant\n  /** Highlight the preview as the current selection. */\n  selected?: boolean\n}\n\nexport function ThemePreview(props: ThemePreviewProps) {\n  const [local, rest] = splitProps(props, ['class', 'theme', 'selected'])\n  const c = () => local.theme.colors\n\n  return (\n    <div\n      data-slot=\"theme-preview\"\n      class={cn(\n        'w-44 overflow-hidden rounded-lg border shadow-xs',\n        local.selected ? 'border-primary ring-3 ring-primary-subtle' : 'border-border',\n        local.class\n      )}\n      style={{ 'background-color': c().background }}\n      {...rest}\n    >\n      <div class=\"flex h-24\">\n        {/* A rail and a panel: the two surfaces a user spends the day looking at. */}\n        <div\n          class=\"theme-preview-edge flex w-6 flex-col items-center gap-1.5 border-e py-2\"\n          style={{ 'background-color': c().sidebar, '--preview-edge': c().sidebarBorder }}\n        >\n          <span class=\"size-2.5 rounded-sm\" style={{ 'background-color': c().primary }} />\n          <span class=\"size-2.5 rounded-sm\" style={{ 'background-color': c().sidebarAccent }} />\n          <span class=\"size-2.5 rounded-sm\" style={{ 'background-color': c().sidebarAccent }} />\n        </div>\n        <div class=\"flex flex-1 flex-col gap-1.5 p-2\">\n          <div class=\"h-1.5 w-14 rounded-full\" style={{ 'background-color': c().foreground }} />\n          <div class=\"h-1 w-20 rounded-full\" style={{ 'background-color': c().mutedForeground }} />\n          <div class=\"h-1 w-16 rounded-full\" style={{ 'background-color': c().mutedForeground }} />\n          <div class=\"mt-auto flex items-center gap-1\">\n            <span class=\"h-3 w-9 rounded-sm\" style={{ 'background-color': c().primary }} />\n            <span class=\"h-3 w-6 rounded-sm\" style={{ 'background-color': c().destructive }} />\n            <span class=\"h-3 w-6 rounded-sm\" style={{ 'background-color': c().secondary }} />\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\n/**\n * ThemePicker.\n *\n * The catalogue as a selectable grid. One appearance at a time — a light picker\n * lists light themes and a dark picker lists dark ones — because choosing a dark\n * theme while looking at a light interface is a choice nobody can evaluate.\n *\n * `onSelect` rather than an internal signal: the selection belongs to the\n * preference the provider owns, and a picker that kept its own copy could disagree\n * with what is applied.\n */\nexport type ThemePickerProps = ComponentProps<'div'> & {\n  themes: readonly ThemeVariant[]\n  selectedId: string\n  onThemeSelect: (theme: ThemeVariant) => void\n}\n\nexport function ThemePicker(props: ThemePickerProps) {\n  const [local, rest] = splitProps(props, ['class', 'themes', 'selectedId', 'onThemeSelect'])\n\n  return (\n    <div\n      data-slot=\"theme-picker\"\n      role=\"radiogroup\"\n      aria-label=\"Theme\"\n      class={cn('flex flex-wrap gap-3', local.class)}\n      {...rest}\n    >\n      <For each={local.themes}>\n        {(theme) => (\n          <Button\n            as=\"button\"\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"sm\"\n            role=\"radio\"\n            aria-checked={local.selectedId === theme.id}\n            aria-label={`${theme.familyLabel} ${theme.label}`}\n            class=\"h-auto flex-col gap-1.5 p-0 hover:bg-transparent\"\n            onClick={() => local.onThemeSelect(theme)}\n          >\n            <ThemePreview theme={theme} selected={local.selectedId === theme.id} />\n            <span class=\"flex flex-col items-center\">\n              <span class=\"text-xs font-medium\">{theme.label}</span>\n              <Show when={theme.family !== 'adea'}>\n                <span class=\"text-muted-foreground text-2xs\">{theme.familyLabel}</span>\n              </Show>\n            </span>\n          </Button>\n        )}\n      </For>\n    </div>\n  )\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,130 @@
+import type { JSX } from 'solid-js';
+import { type ThemeAppearance, type ThemeVariant } from '#lib/themes';
+/**
+ * ThemeProvider.
+ *
+ * Owns the appearance preference and applies it to the document. One provider near
+ * the root; everything below reads it.
+ *
+ * ## What a preference is
+ *
+ * Four independent choices, and keeping them independent is the point:
+ *
+ *   - **appearance** — light, dark, or follow the system.
+ *   - **a theme per appearance** — so a user can run Catppuccin Mocha by night and
+ *     Solarized Light by day without re-choosing when the system flips.
+ *   - **an accent** — adea's six presets, which re-colour the interactive roles on
+ *     top of whichever theme is active.
+ *   - **a font** — the interface face.
+ *
+ * Four axes rather than one list of presets, because they compose: a user who wants
+ * Nord with a violet accent and the system font should not need someone to author
+ * that combination.
+ *
+ * ## Why the variants are applied as inline properties
+ *
+ * The catalogue is data, and a theme is applied by writing its roles onto
+ * `<html>` as custom properties. That is what makes an imported palette work
+ * without a hand-written `[data-theme]` block per theme, and it is why a settings
+ * UI can show a preview by reading the same object rather than by loading a
+ * stylesheet. `theme.css` keeps the default theme's values so the first paint is
+ * correct before any script runs.
+ */
+export type ThemeSelection = {
+    /** `system` follows `prefers-color-scheme` and updates when it changes. */
+    appearance: ThemeAppearance | 'system';
+    /** The variant to use when the resolved appearance is light. */
+    lightThemeId: string;
+    /** The variant to use when the resolved appearance is dark. */
+    darkThemeId: string;
+    /** An `accentPresets` id, or `theme` for the variant's own primary. */
+    accent: string;
+    /** A `fontOptions` id, or `space-grotesk` for the default. */
+    font: string;
+    /**
+     * `comfortable` is the system's default geometry; `compact` moves the control
+     * ladder down one rung.
+     *
+     * Optional, and defaulted on read, so a preference stored before density existed
+     * keeps working and `ThemeSelection` stays assignable without it.
+     */
+    density?: ThemeDensity;
+};
+export declare const defaultThemeSelection: ThemeSelection;
+/**
+ * The two density rungs.
+ *
+ * `comfortable` is the geometry in `theme.css`, so it is the absence of an
+ * attribute rather than a value: a document that ships no `data-density` at all
+ * renders correctly, which is what keeps this additive.
+ */
+export type ThemeDensity = 'comfortable' | 'compact';
+/**
+ * A stored selection's density, defaulted.
+ *
+ * The stored value is read through here rather than trusted, because a preference
+ * written before density existed has no `density` key and a hand-edited store may
+ * hold anything.
+ */
+export declare function resolvedDensity(selection: ThemeSelection): ThemeDensity;
+export type ThemeContextValue = {
+    /** The preference as stored. */
+    selection: () => ThemeSelection;
+    /** What the preference resolves to right now, after `system`. */
+    resolvedAppearance: () => ThemeAppearance;
+    /** The variant in use. */
+    variant: () => ThemeVariant;
+    /** Update part of the preference. */
+    setSelection: (patch: Partial<ThemeSelection>) => void;
+    /** The catalogue, so a picker does not import it separately. */
+    themes: readonly ThemeVariant[];
+};
+export declare function useTheme(): ThemeContextValue;
+export type ThemeProviderProps = {
+    children?: JSX.Element;
+    /** Where the preference is persisted. Distinct per application. */
+    storageKey?: string;
+    /** Start from this instead of the stored preference. */
+    initial?: Partial<ThemeSelection>;
+};
+export declare function ThemeProvider(props: ThemeProviderProps): JSX.Element;
+/**
+ * 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;
+/**
+ * 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.
+ */
+export declare function themeScript(storageKey?: string): string;
+//# sourceMappingURL=theme-provider.d.ts.map

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

@@ -0,0 +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,EAOL,KAAK,eAAe,EACpB,KAAK,YAAY,EAClB,MAAM,aAAa,CAAA;AAEpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;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,uEAAuE;IACvE,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;CAChC,CAAA;AAID,wBAAgB,QAAQ,IAAI,iBAAiB,CAI5C;AAsCD,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;CAClC,CAAA;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eA6FtD;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAKzD;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,WAAW,CAAC,UAAU,SAAoB,GAAG,MAAM,CAElE"}