@datalayer/primer-addons 1.0.14 → 1.0.15

package/lib/theme/palettes/SvgPalette.d.ts

@@ -1,3 +1,4 @@
+import { type ThemeVariant } from '../themeRegistry';
 export interface SvgPalette {
     bg: string;
     bgPanel: string;
@@ -16,6 +17,7 @@ export interface SvgPalette {
     textMuted: string;
     isLight: boolean;
 }
+export declare function getSvgPalette(theme?: ThemeVariant, colorMode?: 'light' | 'dark' | 'auto'): SvgPalette;
 export declare function useSvgPalette(): SvgPalette;
 /** @deprecated Use `useSvgPalette` instead. */
 export declare const useBlogSvgPalette: typeof useSvgPalette;

package/lib/theme/palettes/SvgPalette.js

@@ -213,8 +213,7 @@ const palettes = {
         },
     },
 };
-export function useSvgPalette() {
-    const { colorMode, theme } = useThemeStore();
+export function getSvgPalette(theme = 'datalayer', colorMode = 'auto') {
     const mode = colorMode === 'auto'
         ? typeof window !== 'undefined' &&
             window.matchMedia('(prefers-color-scheme: dark)').matches
@@ -223,6 +222,10 @@ export function useSvgPalette() {
         : colorMode;
     return palettes[theme]?.[mode] ?? palettes.datalayer.dark;
 }
+export function useSvgPalette() {
+    const { colorMode, theme } = useThemeStore();
+    return getSvgPalette(theme, colorMode);
+}
 /** @deprecated Use `useSvgPalette` instead. */
 export const useBlogSvgPalette = useSvgPalette;
 export const LightBoostFilter = () => (_jsx("filter", { id: "svgLightBoost", colorInterpolationFilters: "sRGB", children: _jsx("feComponentTransfer", { children: _jsx("feFuncA", { type: "gamma", exponent: "0.45", amplitude: "1", offset: "0" }) }) }));

package/lib/theme/useThemeStore.d.ts

@@ -1,14 +1,32 @@
 /**
  * Zustand store for theme preferences – reusable across Datalayer apps.
  *
- * Persists `colorMode` and `theme` to localStorage. The store key is
+ * Persists `colorMode` and `theme` to localStorage.  The store key is
  * configurable so that different apps can maintain independent prefs.
  *
+ * ## Variants
+ *
+ * A *variant* is a named set of theme/colorMode defaults (e.g. `anonymous`,
+ * `authenticated`).  When a variant is active, `setTheme`, `setColorMode`,
+ * and `toggleColorMode` automatically update the active variant's stored
+ * preferences.  Calling `setVariant(name)` switches theme/colorMode to
+ * that variant's prefs in one step.
+ *
+ * Variants can be registered at build time (via defaults) or at runtime
+ * (via `registerVariants`).  `registerVariants` only sets defaults for
+ * variants that don't already exist, preserving user-customised prefs
+ * across page loads.
+ *
  * @module theme/useThemeStore
  */
 import { type StoreApi, type UseBoundStore } from 'zustand';
 import type { ThemeVariant } from './themeRegistry';
 import type { ColorMode } from './DatalayerBrandThemeProvider';
+/** Per-variant theme + colorMode preferences. */
+export type VariantDefaults = Record<string, {
+    theme: ThemeVariant;
+    colorMode: ColorMode;
+}>;
 export interface ThemeState {
     /** Current color mode (light, dark, or auto = follow OS). */
     colorMode: ColorMode;
@@ -24,6 +42,21 @@ export interface ThemeState {
      *   color mode to the theme's configured default.
      */
     setTheme: (theme: ThemeVariant, applyDefaultColorMode?: boolean) => void;
+    /** The currently active variant (`null` when no variant is active). */
+    activeVariant: string | null;
+    /** Per-variant stored preferences. */
+    variants: VariantDefaults;
+    /**
+     * Register variant definitions.  Only sets defaults for variants that
+     * don't already exist — existing (possibly user-customised) variants
+     * are preserved.
+     */
+    registerVariants: (defs: VariantDefaults) => void;
+    /**
+     * Activate a named variant.  Sets `theme` / `colorMode` to the
+     * variant's stored prefs in one step.
+     */
+    setVariant: (variant: string) => void;
 }
 /**
  * Create a theme store bound to a specific localStorage key.
@@ -34,11 +67,12 @@ export interface ThemeState {
  * ```
  *
  * @param storageKey  localStorage key for persistence (e.g. `'otel-example-theme'`)
- * @param defaults    Optional overrides for the initial colorMode / theme
+ * @param defaults    Optional overrides for the initial colorMode / theme / variants
  */
 export declare function createThemeStore(storageKey: string, defaults?: {
     colorMode?: ColorMode;
     theme?: ThemeVariant;
+    variants?: VariantDefaults;
 }): UseBoundStore<StoreApi<ThemeState>>;
 /**
  * Default theme store for Datalayer applications.

package/lib/theme/useThemeStore.js

@@ -5,14 +5,33 @@
 /**
  * Zustand store for theme preferences – reusable across Datalayer apps.
  *
- * Persists `colorMode` and `theme` to localStorage. The store key is
+ * Persists `colorMode` and `theme` to localStorage.  The store key is
  * configurable so that different apps can maintain independent prefs.
  *
+ * ## Variants
+ *
+ * A *variant* is a named set of theme/colorMode defaults (e.g. `anonymous`,
+ * `authenticated`).  When a variant is active, `setTheme`, `setColorMode`,
+ * and `toggleColorMode` automatically update the active variant's stored
+ * preferences.  Calling `setVariant(name)` switches theme/colorMode to
+ * that variant's prefs in one step.
+ *
+ * Variants can be registered at build time (via defaults) or at runtime
+ * (via `registerVariants`).  `registerVariants` only sets defaults for
+ * variants that don't already exist, preserving user-customised prefs
+ * across page loads.
+ *
  * @module theme/useThemeStore
  */
 import { create } from 'zustand';
 import { persist, createJSONStorage } from 'zustand/middleware';
 import { themeConfigs } from './themeRegistry';
+/* ── Helpers ─────────────────────────────────────────────────────── */
+const colorModeCycle = {
+    light: 'dark',
+    dark: 'auto',
+    auto: 'light',
+};
 /**
  * Create a theme store bound to a specific localStorage key.
  *
@@ -22,35 +41,118 @@ import { themeConfigs } from './themeRegistry';
  * ```
  *
  * @param storageKey  localStorage key for persistence (e.g. `'otel-example-theme'`)
- * @param defaults    Optional overrides for the initial colorMode / theme
+ * @param defaults    Optional overrides for the initial colorMode / theme / variants
  */
 export function createThemeStore(storageKey, defaults) {
     return create()(persist(set => ({
         colorMode: defaults?.colorMode ?? 'dark',
         theme: defaults?.theme ?? 'matrix',
+        /* ── variant state ──────────────────────────────────── */
+        activeVariant: null,
+        variants: defaults?.variants ?? {},
+        /* ── actions ────────────────────────────────────────── */
         toggleColorMode: () => set(state => {
-            const cycle = {
-                light: 'dark',
-                dark: 'auto',
-                auto: 'light',
-            };
-            return { colorMode: cycle[state.colorMode] };
+            const next = colorModeCycle[state.colorMode];
+            if (state.activeVariant && state.variants[state.activeVariant]) {
+                return {
+                    colorMode: next,
+                    variants: {
+                        ...state.variants,
+                        [state.activeVariant]: { ...state.variants[state.activeVariant], colorMode: next },
+                    },
+                };
+            }
+            return { colorMode: next };
+        }),
+        setColorMode: (mode) => set(state => {
+            if (state.activeVariant && state.variants[state.activeVariant]) {
+                return {
+                    colorMode: mode,
+                    variants: {
+                        ...state.variants,
+                        [state.activeVariant]: { ...state.variants[state.activeVariant], colorMode: mode },
+                    },
+                };
+            }
+            return { colorMode: mode };
         }),
-        setColorMode: (mode) => set({ colorMode: mode }),
-        setTheme: (theme, applyDefaultColorMode = true) => set(() => {
-            const next = { theme };
-            if (applyDefaultColorMode) {
-                next.colorMode = themeConfigs[theme].defaultColorMode;
+        setTheme: (theme, applyDefaultColorMode = true) => set(state => {
+            const nextColorMode = applyDefaultColorMode
+                ? themeConfigs[theme].defaultColorMode
+                : state.colorMode;
+            if (state.activeVariant && state.variants[state.activeVariant]) {
+                return {
+                    theme,
+                    colorMode: nextColorMode,
+                    variants: {
+                        ...state.variants,
+                        [state.activeVariant]: { theme, colorMode: nextColorMode },
+                    },
+                };
             }
-            return next;
+            return { theme, colorMode: nextColorMode };
+        }),
+        registerVariants: (defs) => set(state => {
+            const merged = { ...state.variants };
+            for (const [key, val] of Object.entries(defs)) {
+                if (!merged[key]) {
+                    merged[key] = val;
+                }
+            }
+            return { variants: merged };
+        }),
+        setVariant: (variant) => set(state => {
+            const v = state.variants[variant];
+            if (!v) {
+                return { activeVariant: variant };
+            }
+            return {
+                activeVariant: variant,
+                theme: v.theme,
+                colorMode: v.colorMode,
+            };
         }),
     }), {
         name: storageKey,
+        version: 2,
         storage: createJSONStorage(() => localStorage),
         partialize: state => ({
             colorMode: state.colorMode,
             theme: state.theme,
+            activeVariant: state.activeVariant,
+            variants: state.variants,
         }),
+        /**
+         * Migration: when `version` is missing or differs from the current
+         * value the persisted state is discarded and the store starts fresh
+         * from code-defined defaults.
+         */
+        migrate: () => ({}),
+        /**
+         * Deep-merge variants during hydration so that:
+         *  - Code-defined variants (from defaults or registerVariants) are
+         *    always present even when localStorage has an older snapshot.
+         *  - Per-variant prefs that the user customised (persisted) win over
+         *    code defaults for each variant key.
+         */
+        merge: (persisted, current) => {
+            const p = (persisted ?? {});
+            // Build merged variants: start from code-defined, then overlay
+            // any persisted variant whose prefs differ (user customisations).
+            const mergedVariants = { ...current.variants };
+            if (p.variants) {
+                for (const [key, val] of Object.entries(p.variants)) {
+                    if (val && typeof val === 'object' && 'theme' in val) {
+                        mergedVariants[key] = val;
+                    }
+                }
+            }
+            return {
+                ...current,
+                ...p,
+                variants: mergedVariants,
+            };
+        },
     }));
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/primer-addons",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "license": "BSD-3-Clause",
   "scripts": {
     "build": "tsc && vite build",