@adea-ai/ui 0.27.0 → 0.29.0

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

@@ -1,7 +1,24 @@
 import { type Accessor, type JSX, type ParentProps } from 'solid-js';
-export type Theme = 'light' | 'dark' | 'system';
-export type ResolvedTheme = 'light' | 'dark';
+import { type AppearanceMode, type AppearancePreferencesV2, type ResolvedAppearance } from './appearance';
+export type Theme = AppearanceMode;
+export type ResolvedTheme = ResolvedAppearance;
+export type { AppearanceMode, AppearancePreferencesV2, ResolvedAppearance } from './appearance';
 type ThemeContextValue = {
+    /** The persisted v2 appearance preferences. */
+    preferences: Accessor<AppearancePreferencesV2>;
+    /** Mode after combining the user choice with the OS report. */
+    resolvedMode: Accessor<ResolvedAppearance>;
+    /** The active theme variant id (`documentElement.dataset.theme`). */
+    variantId: Accessor<string>;
+    /** Surface after reduced-transparency and capability resolution. */
+    effectiveSurface: Accessor<'opaque' | 'frosted' | 'translucent'>;
+    /** True while the OS or the user forces opaque surfaces. */
+    reduceTransparencyActive: Accessor<boolean>;
+    /** Persist a field update immediately (Zeron's `SavePolicy::Immediate`). */
+    update: (patch: Partial<AppearancePreferencesV2>) => void;
+    /** Apply a draft against the visible app without persisting it. */
+    preview: (preferences: AppearancePreferencesV2 | undefined) => void;
+    /** Legacy single-mode seam (settings toggle and existing consumers). */
     theme: Accessor<Theme>;
     resolvedTheme: Accessor<ResolvedTheme>;
     setTheme: (theme: Theme) => void;
@@ -9,19 +26,27 @@ type ThemeContextValue = {
 type ThemeProviderProps = ParentProps<{
     defaultTheme?: Theme;
     disableTransitionOnChange?: boolean;
+    /**
+     * Whether the host window can render OS translucency. The web lane keeps
+     * the default `false` and renders tokenized frosted surfaces instead of
+     * pretending to OS vibrancy.
+     */
+    nativeTranslucency?: boolean;
 }>;
 /**
- * The shared Solid theme provider. It owns the same contract the previous
- * provider exposed to the token layer: a `dark` class on the document element
- * plus a `color-scheme` style, persisted in `localStorage` and defaulting to
- * the system preference.
+ * The shared Solid appearance provider. It owns the versioned appearance
+ * preference (mode, independent light/dark themes, accent, surface) on top of
+ * the contract the previous provider exposed to the token layer: a `dark`
+ * class on the document element plus a `color-scheme` style, persisted in
+ * `localStorage` and defaulting to the system preference. The legacy single
+ * `theme` key migrates on read and is never deleted.
  */
 export declare function ThemeProvider(props: ThemeProviderProps): JSX.Element;
 export declare function useTheme(): ThemeContextValue;
 /**
- * Pre-paint theme restore for server-rendered documents. Rendered in the
- * document head, it applies the stored or system theme before first paint so
- * hydration never shows the wrong palette.
+ * Pre-paint appearance restore for server-rendered documents. Rendered in the
+ * document head, it resolves the stored (or legacy) preference against the OS
+ * and applies the palette before first paint so hydration never shows the
+ * wrong theme.
  */
 export declare function ThemeScript(): JSX.Element;
-export {};

package/dist/components/theme-provider.js

@@ -1,72 +1,85 @@
-import { createComponent, template } from "solid-js/web";
+import { DARK_QUERY, REDUCED_TRANSPARENCY_QUERY, appearanceThemeScript, applyAppearanceToDocument, defaultAppearancePreferences, readAppearancePreferences, resolveAppearanceState, writeAppearancePreferences } from "./appearance.js";
+import { createComponent, effect, template } from "solid-js/web";
 import { createContext, createEffect, createSignal, onCleanup, useContext } from "solid-js";
 //#region src/components/theme-provider.tsx
 var _tmpl$ = /*#__PURE__*/ template(`<script>`);
-var STORAGE_KEY = "theme";
-var DARK_QUERY = "(prefers-color-scheme: dark)";
 var ThemeContext = createContext();
-function readStoredTheme() {
-	if (typeof window === "undefined") return "system";
-	try {
-		const stored = window.localStorage.getItem(STORAGE_KEY);
-		return stored === "light" || stored === "dark" || stored === "system" ? stored : "system";
-	} catch {
-		return "system";
-	}
-}
 function systemPrefersDark() {
-	return typeof window !== "undefined" && window.matchMedia(DARK_QUERY).matches;
+	return typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches;
 }
-/**
-* Applies the resolved theme to the document and suppresses transitions for the
-* frame that carries the change, so a theme switch cannot animate page-wide.
-*/
-function applyTheme(theme, disableTransitionOnChange) {
-	if (typeof document === "undefined") return;
-	const root = document.documentElement;
-	let restoreTransitions;
-	if (disableTransitionOnChange) {
-		const style = document.createElement("style");
-		style.appendChild(document.createTextNode("*{transition:none !important}"));
-		document.head.appendChild(style);
-		style.offsetHeight;
-		restoreTransitions = () => style.remove();
-	}
-	root.classList.toggle("dark", theme === "dark");
-	root.style.colorScheme = theme;
-	if (restoreTransitions) requestAnimationFrame(() => requestAnimationFrame(() => restoreTransitions?.()));
+function systemReducesTransparency() {
+	return typeof window !== "undefined" && window.matchMedia("(prefers-reduced-transparency: reduce)").matches;
 }
 /**
-* The shared Solid theme provider. It owns the same contract the previous
-* provider exposed to the token layer: a `dark` class on the document element
-* plus a `color-scheme` style, persisted in `localStorage` and defaulting to
-* the system preference.
+* The shared Solid appearance provider. It owns the versioned appearance
+* preference (mode, independent light/dark themes, accent, surface) on top of
+* the contract the previous provider exposed to the token layer: a `dark`
+* class on the document element plus a `color-scheme` style, persisted in
+* `localStorage` and defaulting to the system preference. The legacy single
+* `theme` key migrates on read and is never deleted.
 */
 function ThemeProvider(props) {
-	const [theme, setThemeSignal] = createSignal(props.defaultTheme ?? readStoredTheme());
+	const storage = typeof window === "undefined" ? void 0 : window.localStorage;
+	const stored = readAppearancePreferences(storage);
+	const initial = stored === defaultAppearancePreferences && props.defaultTheme ? {
+		...stored,
+		mode: props.defaultTheme
+	} : stored;
+	const [preferences, setPreferences] = createSignal(initial);
 	const [prefersDark, setPrefersDark] = createSignal(systemPrefersDark());
-	const resolvedTheme = () => {
-		const current = theme();
-		if (current === "system") return prefersDark() ? "dark" : "light";
-		return current;
-	};
+	const [osReducedTransparency, setOsReducedTransparency] = createSignal(systemReducesTransparency());
+	const nativeTranslucency = () => props.nativeTranslucency ?? false;
 	if (typeof window !== "undefined") {
-		const media = window.matchMedia(DARK_QUERY);
-		const onChange = (event) => setPrefersDark(event.matches);
-		media.addEventListener("change", onChange);
-		onCleanup(() => media.removeEventListener("change", onChange));
+		const darkMedia = window.matchMedia(DARK_QUERY);
+		const onDarkChange = (event) => setPrefersDark(event.matches);
+		darkMedia.addEventListener("change", onDarkChange);
+		onCleanup(() => darkMedia.removeEventListener("change", onDarkChange));
+		const transparencyMedia = window.matchMedia(REDUCED_TRANSPARENCY_QUERY);
+		const onTransparencyChange = (event) => setOsReducedTransparency(event.matches);
+		transparencyMedia.addEventListener("change", onTransparencyChange);
+		onCleanup(() => transparencyMedia.removeEventListener("change", onTransparencyChange));
 	}
+	const resolvedState = () => resolveAppearanceState(preferences(), {
+		systemAppearance: prefersDark() ? "dark" : "light",
+		osReducedTransparency: osReducedTransparency(),
+		nativeTranslucency: nativeTranslucency()
+	});
+	const persist = (next) => {
+		setPreferences(next);
+		writeAppearancePreferences(storage, next);
+	};
 	createEffect(() => {
-		applyTheme(resolvedTheme(), props.disableTransitionOnChange ?? true);
+		applyResolved(resolvedState(), props.disableTransitionOnChange ?? true);
 	});
-	const setTheme = (next) => {
-		setThemeSignal(next);
-		try {
-			window.localStorage.setItem(STORAGE_KEY, next);
-		} catch {}
+	const update = (patch) => {
+		persist({
+			...preferences(),
+			...patch
+		});
+	};
+	const preview = (draft) => {
+		if (!draft) {
+			applyResolved(resolvedState(), props.disableTransitionOnChange ?? true);
+			return;
+		}
+		applyResolved(resolveAppearanceState(draft, {
+			systemAppearance: prefersDark() ? "dark" : "light",
+			osReducedTransparency: osReducedTransparency(),
+			nativeTranslucency: nativeTranslucency()
+		}), props.disableTransitionOnChange ?? true);
 	};
+	const theme = () => preferences().mode;
+	const resolvedTheme = () => resolvedState().resolvedMode;
+	const setTheme = (next) => update({ mode: next });
 	return createComponent(ThemeContext.Provider, {
 		value: {
+			preferences,
+			resolvedMode: resolvedTheme,
+			variantId: () => resolvedState().variant.id,
+			effectiveSurface: () => resolvedState().effectiveSurface,
+			reduceTransparencyActive: () => resolvedState().reduceTransparencyActive,
+			update,
+			preview,
 			theme,
 			resolvedTheme,
 			setTheme
@@ -76,20 +89,38 @@ function ThemeProvider(props) {
 		}
 	});
 }
+/**
+* Applies the resolved theme to the document and suppresses transitions for the
+* frame that carries the change, so a theme switch cannot animate page-wide.
+*/
+function applyResolved(state, disableTransitionOnChange) {
+	if (typeof document === "undefined") return;
+	let restoreTransitions;
+	if (disableTransitionOnChange) {
+		const style = document.createElement("style");
+		style.appendChild(document.createTextNode("*{transition:none !important}"));
+		document.head.appendChild(style);
+		style.offsetHeight;
+		restoreTransitions = () => style.remove();
+	}
+	applyAppearanceToDocument(document, state);
+	if (restoreTransitions) requestAnimationFrame(() => requestAnimationFrame(() => restoreTransitions?.()));
+}
 function useTheme() {
 	const context = useContext(ThemeContext);
 	if (!context) throw new Error("useTheme must be used within a ThemeProvider.");
 	return context;
 }
 /**
-* Pre-paint theme restore for server-rendered documents. Rendered in the
-* document head, it applies the stored or system theme before first paint so
-* hydration never shows the wrong palette.
+* Pre-paint appearance restore for server-rendered documents. Rendered in the
+* document head, it resolves the stored (or legacy) preference against the OS
+* and applies the palette before first paint so hydration never shows the
+* wrong theme.
 */
 function ThemeScript() {
 	return (() => {
 		var _el$ = _tmpl$();
-		_el$.innerHTML = "(function(){try{var t=localStorage.getItem('theme')||'system';var d=t==='dark'||(t==='system'&&window.matchMedia('(prefers-color-scheme: dark)').matches);var r=document.documentElement;r.classList.toggle('dark',d);r.style.colorScheme=d?'dark':'light'}catch(e){}})();";
+		effect(() => _el$.innerHTML = appearanceThemeScript());
 		return _el$;
 	})();
 }

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

@@ -0,0 +1,12 @@
+import type { ThemeVariant } from './appearance';
+/** The three-dot preview for a theme variant (background, primary, card). */
+export declare function ThemeSwatch(props: {
+    class?: string;
+    variant: ThemeVariant;
+}): import("solid-js").JSX.Element;
+/** Single-color swatch (accent presets and custom accents). */
+export declare function ColorSwatch(props: {
+    class?: string;
+    color: string;
+    label: string;
+}): import("solid-js").JSX.Element;

package/dist/components/theme-swatch.js

@@ -0,0 +1,66 @@
+import { className, createComponent, effect, insert, setAttribute, setStyleProperty, template } from "solid-js/web";
+import { For } from "solid-js";
+//#region src/components/theme-swatch.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span aria-hidden=true>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<span class=theme-swatch__dot>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<span role=img><span class=theme-swatch__dot>`);
+/** The three-dot preview for a theme variant (background, primary, card). */
+function ThemeSwatch(props) {
+	const swatches = () => [
+		{
+			role: "Background",
+			color: props.variant.colors.background
+		},
+		{
+			role: "Primary",
+			color: props.variant.colors.primary
+		},
+		{
+			role: "Card",
+			color: props.variant.colors.card
+		}
+	];
+	return (() => {
+		var _el$ = _tmpl$();
+		insert(_el$, createComponent(For, {
+			get each() {
+				return swatches();
+			},
+			children: (swatch) => (() => {
+				var _el$2 = _tmpl$2();
+				effect((_p$) => {
+					var _v$ = swatch.role, _v$2 = swatch.color;
+					_v$ !== _p$.e && setAttribute(_el$2, "title", _p$.e = _v$);
+					_v$2 !== _p$.t && setStyleProperty(_el$2, "background-color", _p$.t = _v$2);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0
+				});
+				return _el$2;
+			})()
+		}));
+		effect(() => className(_el$, props.class));
+		return _el$;
+	})();
+}
+/** Single-color swatch (accent presets and custom accents). */
+function ColorSwatch(props) {
+	return (() => {
+		var _el$3 = _tmpl$3(), _el$4 = _el$3.firstChild;
+		effect((_p$) => {
+			var _v$3 = props.class, _v$4 = props.label, _v$5 = props.color;
+			_v$3 !== _p$.e && className(_el$3, _p$.e = _v$3);
+			_v$4 !== _p$.t && setAttribute(_el$3, "aria-label", _p$.t = _v$4);
+			_v$5 !== _p$.a && setStyleProperty(_el$4, "background-color", _p$.a = _v$5);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0
+		});
+		return _el$3;
+	})();
+}
+//#endregion
+export { ColorSwatch, ThemeSwatch };

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export { Toggle } from './components/ui/toggle';
 export { ToggleGroup, ToggleGroupItem } from './components/ui/toggle-group';
 export { RadioGroup, RadioGroupItem } from './components/ui/radio-group';
 export { ThemeToggle } from './components/theme-toggle';
+export { ColorSwatch, ThemeSwatch } from './components/theme-swatch';
 export { ThemeProvider, ThemeScript, useTheme, type ResolvedTheme, type Theme, } from './components/theme-provider';
 export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerSwipeHandle, DrawerTitle, DrawerTrigger, } from './components/ui/drawer';
 export { AccountDrawer, type AccountDrawerProps } from './components/account-drawer';

package/dist/index.js

@@ -6,6 +6,7 @@ import { ThemeToggle } from "./components/theme-toggle.js";
 import { AccountDrawer } from "./components/account-drawer.js";
 import { OnScreenControls } from "./components/on-screen-controls.js";
 import { SceneSettings } from "./components/scene-settings.js";
+import { ColorSwatch, ThemeSwatch } from "./components/theme-swatch.js";
 import { Card, CardContent } from "./components/ui/card.js";
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./components/ui/dialog.js";
 import { RadioGroup, RadioGroupItem } from "./components/ui/radio-group.js";
@@ -17,4 +18,4 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./comp
 import { VersionDialog } from "./components/version-dialog.js";
 import { WorkspaceBrand } from "./components/workspace-brand.js";
 import { WorkspaceLogo } from "./components/workspace-logo.js";
-export { AccountDrawer, Button, Card, CardContent, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerSwipeHandle, DrawerTitle, DrawerTrigger, OnScreenControls, RadioGroup, RadioGroupItem, SceneSettings, Spinner, Switch, ThemeProvider, ThemeScript, ThemeToggle, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, VersionDialog, WorkspaceBrand, WorkspaceLogo, buttonVariants, cn, useTheme };
+export { AccountDrawer, Button, Card, CardContent, ColorSwatch, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerSwipeHandle, DrawerTitle, DrawerTrigger, OnScreenControls, RadioGroup, RadioGroupItem, SceneSettings, Spinner, Switch, ThemeProvider, ThemeScript, ThemeSwatch, ThemeToggle, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, VersionDialog, WorkspaceBrand, WorkspaceLogo, buttonVariants, cn, useTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.27.0",
+  "version": "0.29.0",
   "description": "Shared UI kit for Adea: Kobalte/corvu-backed Solid primitives, workspace shells, and theme styles.",
   "keywords": [
     "components",
@@ -58,6 +58,7 @@
   },
   "scripts": {
     "lint": "oxlint",
+    "test": "bun test tests",
     "build": "vite build && tsc -p tsconfig.json --emitDeclarationOnly",
     "dev": "vite build --watch",
     "typecheck": "tsc -p tsconfig.json --noEmit"