@sybilion/uilib 1.2.9 → 1.2.10

package/dist/esm/components/ui/NavUserHeader/NavUserHeader.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import cn from 'classnames';
-import { useTheme } from '../../../docs/contexts/theme-context.js';
+import { useTheme } from '../../../contexts/theme-context.js';
 import { UserCircleIcon, SunIcon, MoonIcon, SignOutIcon } from '@phosphor-icons/react';
 import { ChevronDownIcon } from 'lucide-react';
 import { Avatar } from '../Avatar/Avatar.js';
@@ -9,8 +9,13 @@ import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLab
 import { Image } from '../Image/Image.js';
 import S from './NavUserHeader.styl.js';
 
-function NavUserHeader({ variant = 'default', isLoading = false, isAuthenticated, user = null, menuItems, onLogout, signInSlot, onSignInClick, }) {
-    const { toggleTheme, theme } = useTheme();
+function NavUserHeader({ variant = 'default', isLoading = false, isAuthenticated, user = null, menuItems, onLogout, signInSlot, onSignInClick, theme: themeFromHost, onThemeToggle: onThemeToggleFromHost, }) {
+    const docsTheme = useTheme();
+    const hostControlsTheme = themeFromHost !== undefined && onThemeToggleFromHost !== undefined;
+    const theme = hostControlsTheme ? themeFromHost : docsTheme.theme;
+    const toggleTheme = hostControlsTheme
+        ? onThemeToggleFromHost
+        : docsTheme.toggleTheme;
     const authenticated = isAuthenticated ?? true;
     const avatarUrl = user?.avatar ?? '';
     const userName = user?.name ?? '';

package/dist/esm/components/widgets/SybilionAppHeader/SybilionAppHeader.js

@@ -11,8 +11,8 @@ import '@phosphor-icons/react';
 import 'lucide-react';
 import S from './SybilionAppHeader.styl.js';
 
-function SybilionAppHeader({ pageHeaderId, actionsAnchorId = PAGE_HEADER_ACTIONS_ID, actionsAnchorClassName, pathname, onNavigate, authenticated, defaultApps, appsStorageKey, logo, logoAreaClassName, welcomeBannerOffset, ...navUserHeaderProps }) {
-    return (jsxs(AppHeaderPortal, { pageHeaderId: pageHeaderId, children: [jsx("div", { className: cn(S.logoArea, welcomeBannerOffset && S.logoAreaWithBanner, logoAreaClassName), children: jsx(Link, { to: "/", className: S.logoLink, children: logo ?? jsx(Logo, { size: "md", "aria-hidden": true }) }) }), jsx(WorkspaceAppSwitcher, { pathname: pathname, onNavigate: onNavigate, authenticated: authenticated, defaultApps: defaultApps, appsStorageKey: appsStorageKey }), jsx(Gap, {}), jsx("div", { id: actionsAnchorId, className: cn(S.actionsAnchor, actionsAnchorClassName), children: jsx(NavUserHeader, { ...navUserHeaderProps }) })] }));
+function SybilionAppHeader({ pageHeaderId, actionsAnchorId = PAGE_HEADER_ACTIONS_ID, actionsAnchorClassName, actionsStart, actionsEnd, pathname, onNavigate, authenticated, defaultApps, appsStorageKey, logo, logoAreaClassName, welcomeBannerOffset, ...navUserHeaderProps }) {
+    return (jsxs(AppHeaderPortal, { pageHeaderId: pageHeaderId, children: [jsx("div", { className: cn(S.logoArea, welcomeBannerOffset && S.logoAreaWithBanner, logoAreaClassName), children: jsx(Link, { to: "/", className: S.logoLink, children: logo ?? jsx(Logo, { size: "md", "aria-hidden": true }) }) }), jsx(WorkspaceAppSwitcher, { pathname: pathname, onNavigate: onNavigate, authenticated: authenticated, defaultApps: defaultApps, appsStorageKey: appsStorageKey }), jsx(Gap, {}), jsxs("div", { id: actionsAnchorId, className: cn(S.actionsAnchor, actionsAnchorClassName), children: [actionsStart, jsx(NavUserHeader, { ...navUserHeaderProps }), actionsEnd] })] }));
 }
 
 export { SybilionAppHeader };

package/dist/esm/components/widgets/SybilionSignInPanel/SybilionSignInPanel.styl.js

@@ -1,6 +1,6 @@
 import styleInject from 'style-inject';
 
-var css_248z = ".SybilionSignInPanel_socialButtonContainer__lKNpp{display:flex;gap:10px;margin-bottom:10px;width:100%}.SybilionSignInPanel_socialButton__TqlKb{border:1px solid var(--border);border-radius:14px;flex:1;font-size:14px;font-weight:600;height:48px;padding:14px 16px}.SybilionSignInPanel_errorMessage__o8Q-m{color:red;font-size:14px;margin-bottom:10px;padding:10px}.SybilionSignInPanel_forgotPassword__47q20{margin-bottom:24px;text-align:right}.SybilionSignInPanel_forgotPasswordLink__lOJCv{color:var(--primary);font-family:Manrope,sans-serif;font-size:14px;font-weight:500;text-decoration:none;transition:opacity .2s}.SybilionSignInPanel_forgotPasswordLink__lOJCv:hover{opacity:.8}.SybilionSignInPanel_version__d5KAz{box-sizing:border-box;color:var(--muted-foreground);display:block;font-size:14px;margin-top:var(--p-8);opacity:.5;padding-bottom:var(--p-2);text-align:center;transition:opacity .3s ease-out;white-space:nowrap;width:100%}";
+var css_248z = ".SybilionSignInPanel_socialButtonContainer__lKNpp{display:flex;gap:10px;margin-bottom:10px;width:100%}.SybilionSignInPanel_socialButton__TqlKb{border:1px solid var(--border);border-radius:14px;flex:1;font-size:14px;font-weight:600;height:48px;padding:14px 16px}.SybilionSignInPanel_errorMessage__o8Q-m{color:red;font-size:14px;margin-bottom:10px;padding:10px}.SybilionSignInPanel_forgotPassword__47q20{margin-bottom:24px;text-align:right}.SybilionSignInPanel_forgotPasswordLink__lOJCv{color:var(--primary);font-family:Manrope,sans-serif;font-size:14px;font-weight:500;text-decoration:none;transition:opacity .2s}.SybilionSignInPanel_forgotPasswordLink__lOJCv:hover{opacity:.8}.SybilionSignInPanel_version__d5KAz{bottom:0;box-sizing:border-box;color:var(--muted-foreground);display:block;font-size:14px;margin-top:var(--p-8);opacity:.5;padding-bottom:var(--p-2);position:absolute;right:0;text-align:center;transition:opacity .3s ease-out;white-space:nowrap;width:50%}";
 var S = {"socialButtonContainer":"SybilionSignInPanel_socialButtonContainer__lKNpp","socialButton":"SybilionSignInPanel_socialButton__TqlKb","errorMessage":"SybilionSignInPanel_errorMessage__o8Q-m","forgotPassword":"SybilionSignInPanel_forgotPassword__47q20","forgotPasswordLink":"SybilionSignInPanel_forgotPasswordLink__lOJCv","version":"SybilionSignInPanel_version__d5KAz"};
 styleInject(css_248z);
 

package/dist/esm/contexts/theme-context.js

@@ -0,0 +1,44 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createContext, useMemo, useState, useCallback, useEffect, useContext } from 'react';
+import { Theme } from '@homecode/ui';
+import { getThemeConfig } from '../docs/lib/theme.js';
+
+const ThemeContext = createContext({
+    theme: 'light',
+    isDarkMode: false,
+    setTheme: () => { },
+    toggleTheme: () => { },
+});
+function ThemeProvider({ children, allowLocalStorage = true, activeColor, getThemeConfig: getThemeConfigProp, }) {
+    const getThemeConfig$1 = getThemeConfigProp ?? getThemeConfig;
+    const themeConfigOptions = useMemo(() => ({ activeColor }), [activeColor]);
+    const [theme, setTheme] = useState(() => {
+        return localStorage.getItem('theme') || 'light';
+    });
+    const [currThemeConfig, setCurrThemeConfig] = useState(() => getThemeConfig$1(theme === 'dark', themeConfigOptions));
+    const toggleTheme = useCallback(() => {
+        setTheme(t => (t === 'dark' ? 'light' : 'dark'));
+    }, []);
+    useEffect(() => {
+        setCurrThemeConfig(getThemeConfig$1(theme === 'dark', themeConfigOptions));
+    }, [theme, getThemeConfig$1, themeConfigOptions]);
+    useEffect(() => {
+        const root = document.documentElement;
+        const effectiveTheme = theme;
+        root.classList.remove('light', 'dark');
+        root.classList.add(effectiveTheme);
+        if (allowLocalStorage) {
+            localStorage.setItem('theme', theme);
+        }
+    }, [theme, allowLocalStorage]);
+    const value = useMemo(() => ({
+        theme,
+        isDarkMode: theme === 'dark',
+        setTheme,
+        toggleTheme,
+    }), [theme, toggleTheme]);
+    return (jsxs(ThemeContext.Provider, { value: value, children: [jsx(Theme, { config: currThemeConfig }), children] }));
+}
+const useTheme = () => useContext(ThemeContext);
+
+export { ThemeProvider, useTheme };

package/dist/esm/docs/lib/theme.js

@@ -2,8 +2,10 @@ import { ThemeHelpers, ThemeDefaults } from '@homecode/ui';
 
 const { colors, getColors, getConfig } = ThemeDefaults;
 getColors();
-getConfig();
-({
+const defaultConfig = getConfig();
+const alphaMods = [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+const DEFAULT_THEME_ACTIVE_COLOR = '#9c59ff';
+const colorsConfig = {
     light: {
         ...ThemeHelpers.colorsConfigToVars({
             ...getColors({
@@ -20,4 +22,34 @@ getConfig();
             }),
         }),
     },
-});
+};
+function getThemeConfig(isDarkTheme, options) {
+    const activeColor = options?.activeColor ?? DEFAULT_THEME_ACTIVE_COLOR;
+    return {
+        ...defaultConfig,
+        ...colorsConfig[isDarkTheme ? 'dark' : 'light'],
+        ...ThemeHelpers.colorsConfigToVars({
+            active: {
+                color: activeColor,
+                mods: {
+                    // @ts-ignore
+                    alpha: alphaMods,
+                },
+            },
+            danger: {
+                color: '#ee0000',
+                mods: {
+                    alpha: alphaMods,
+                },
+            },
+            warning: {
+                color: '#ffa500',
+                mods: {
+                    alpha: alphaMods,
+                },
+            },
+        }),
+    };
+}
+
+export { DEFAULT_THEME_ACTIVE_COLOR, colorsConfig, getThemeConfig };

package/dist/esm/index.js

@@ -1,3 +1,5 @@
+export { ThemeProvider, useTheme } from './contexts/theme-context.js';
+export { DEFAULT_THEME_ACTIVE_COLOR } from './docs/lib/theme.js';
 export { SybilionAuthProvider, createSybilionApiFetch, getSybilionApiOriginFromSdk, sybilionApiFetch, useSybilionApiFetch, useSybilionAuth } from './sybilion-auth/SybilionAuthProvider.js';
 export { SYBILION_AUTH_LOGIN_PATH, normalizeApiBaseUrl } from './sybilion-auth/authPaths.js';
 export { exchangeAuth0AccessTokenForSybilionJwt } from './sybilion-auth/exchangeSybilionToken.js';

package/dist/esm/types/src/components/ui/NavUserHeader/NavUserHeader.d.ts

@@ -1,2 +1,2 @@
 import type { NavUserHeaderProps } from './NavUserHeader.types';
-export declare function NavUserHeader({ variant, isLoading, isAuthenticated, user, menuItems, onLogout, signInSlot, onSignInClick, }: NavUserHeaderProps): string | number | bigint | true | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode>> | import("react/jsx-runtime").JSX.Element;
+export declare function NavUserHeader({ variant, isLoading, isAuthenticated, user, menuItems, onLogout, signInSlot, onSignInClick, theme: themeFromHost, onThemeToggle: onThemeToggleFromHost, }: NavUserHeaderProps): string | number | bigint | true | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode>> | import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/ui/NavUserHeader/NavUserHeader.types.d.ts

@@ -18,4 +18,7 @@ export type NavUserHeaderProps = {
     /** Replaces default “Log in” control when signed out. */
     signInSlot?: ReactNode;
     onSignInClick?: () => void;
+    /** When both are set, theme row uses these instead of uilib `ThemeProvider` context. */
+    theme?: 'light' | 'dark';
+    onThemeToggle?: () => void;
 };

package/dist/esm/types/src/components/widgets/SybilionAppHeader/SybilionAppHeader.d.ts

@@ -5,10 +5,14 @@ export type SybilionAppHeaderProps = WorkspaceAppSwitcherProps & NavUserHeaderPr
     pageHeaderId?: string;
     actionsAnchorId?: string;
     actionsAnchorClassName?: string;
+    /** Renders before `NavUserHeader` inside the page actions anchor (e.g. impersonation). */
+    actionsStart?: ReactNode;
+    /** Renders after `NavUserHeader` inside the page actions anchor (e.g. notifications). */
+    actionsEnd?: ReactNode;
     /** Branded markup; omit for default lucide tile + «Sybilion». */
     logo?: ReactNode;
     logoAreaClassName?: string;
     /** Applies vertical offset when a welcome banner consumes top space (CSS `--welcome-banner-height` on shell). */
     welcomeBannerOffset?: boolean;
 };
-export declare function SybilionAppHeader({ pageHeaderId, actionsAnchorId, actionsAnchorClassName, pathname, onNavigate, authenticated, defaultApps, appsStorageKey, logo, logoAreaClassName, welcomeBannerOffset, ...navUserHeaderProps }: SybilionAppHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function SybilionAppHeader({ pageHeaderId, actionsAnchorId, actionsAnchorClassName, actionsStart, actionsEnd, pathname, onNavigate, authenticated, defaultApps, appsStorageKey, logo, logoAreaClassName, welcomeBannerOffset, ...navUserHeaderProps }: SybilionAppHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/contexts/theme-context.d.ts

@@ -0,0 +1,20 @@
+import { getThemeConfig as defaultGetThemeConfig, type GetThemeConfigOptions } from '#uilib/docs/lib/theme';
+export type ThemeMode = 'light' | 'dark';
+export type GetThemeConfigFn = (isDarkTheme: boolean, options?: GetThemeConfigOptions) => ReturnType<typeof defaultGetThemeConfig>;
+export type { GetThemeConfigOptions };
+export type ThemeProviderProps = {
+    children: React.ReactNode;
+    /** When false, DOM classes still update but theme is not persisted to `localStorage`. */
+    allowLocalStorage?: boolean;
+    /** Override docs default active/accent token (`DEFAULT_THEME_ACTIVE_COLOR`). Passed into `getThemeConfig`. */
+    activeColor?: string;
+    /** Homecode theme config; defaults to uilib docs palette. */
+    getThemeConfig?: GetThemeConfigFn;
+};
+export declare function ThemeProvider({ children, allowLocalStorage, activeColor, getThemeConfig: getThemeConfigProp, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare const useTheme: () => {
+    theme: ThemeMode;
+    isDarkMode: boolean;
+    setTheme: (theme: ThemeMode) => void;
+    toggleTheme: () => void;
+};

package/dist/esm/types/src/docs/contexts/theme-context.d.ts

@@ -1,10 +1 @@
-export type ThemeMode = 'light' | 'dark';
-export declare function ThemeProvider({ children }: {
-    children: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
-export declare const useTheme: () => {
-    theme: ThemeMode;
-    isDarkMode: boolean;
-    setTheme: (theme: ThemeMode) => void;
-    toggleTheme: () => void;
-};
+export { ThemeProvider, useTheme, type GetThemeConfigFn, type GetThemeConfigOptions, type ThemeMode, type ThemeProviderProps, } from '#uilib/contexts/theme-context';

package/dist/esm/types/src/docs/lib/theme.d.ts

@@ -1,5 +1,9 @@
+export declare const DEFAULT_THEME_ACTIVE_COLOR = "#9c59ff";
+export type GetThemeConfigOptions = {
+    activeColor?: string;
+};
 export declare const colorsConfig: {
     light: {};
     dark: {};
 };
-export declare function getThemeConfig(isDarkTheme: boolean): any;
+export declare function getThemeConfig(isDarkTheme: boolean, options?: GetThemeConfigOptions): any;

package/dist/esm/types/src/index.d.ts

@@ -1,3 +1,5 @@
+export * from './contexts/theme-context';
+export { DEFAULT_THEME_ACTIVE_COLOR } from './docs/lib/theme';
 export * from './sybilion-auth';
 export * from './types/sybilionDatasetSnapshots';
 export * from './contexts/chat-context';

package/docs/standalone-apps.md

@@ -392,7 +392,11 @@ Wire **`authenticated`**, **`user`** / **`isAuthenticated`**, **`theme`** / **`o
 
 #### Sidebar (`AppSidebar.tsx`)
 
-App-specific sidebar component — keeps the navigation surface out of `AppLayout` so the shell stays generic. Compose your nav from `@sybilion/uilib` primitives (`Sidebar` + `SidebarContent` + `SidebarGroup` + `SidebarMenu*`) and product widgets like `SidebarDatasetsItemsGrouped` (collapsible groups + nested rows for datasets — see demo `src/docs/pages/SidebarDatasetsItemsGroupedPage.tsx`, slug `sidebar-datasets-items-grouped`).
+App-specific sidebar component — keeps the navigation surface out of `AppLayout` so the shell stays generic.
+
+**One sidebar group (default):** Standalone apps use **a single `SidebarGroup`** for the whole sidebar menu unless the **product owner explicitly asks** for another section separated into its own group. **`SidebarDatasetsItemsGrouped`** ([`src/components/widgets/SidebarDatasetsItemsGrouped/SidebarDatasetsItemsGrouped.tsx`](../../src/components/widgets/SidebarDatasetsItemsGrouped/SidebarDatasetsItemsGrouped.tsx)) already renders **one** outer `SidebarGroup` — put primary routes (Home, Datasets, …) in **`preItems`** or **`postItems`** so nav and dataset rows share that group instead of wrapping routes in a separate **`SidebarGroup`** above/below the widget. Apps without datasets: one **`SidebarGroup`** + **`SidebarMenu`** / **`SidebarMenuItem`** only.
+
+Collapsible dataset clusters + nested rows: demo **`src/docs/pages/SidebarDatasetsItemsGroupedPage.tsx`** (slug **`sidebar-datasets-items-grouped`**). Other primitives: **`Sidebar`** + **`SidebarContent`** + **`SidebarMenu*`**.
 
 ```tsx
 import { useEffect, useState } from 'react';
@@ -403,8 +407,6 @@ import {
   SidebarContent,
   SidebarDatasetsItemsGrouped,
   type SidebarDatasetsItemsGroupedDataset,
-  SidebarGroup,
-  SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
 } from '@sybilion/uilib';
@@ -427,27 +429,26 @@ export function AppSidebar() {
   return (
     <Sidebar variant="inset" collapsible="offcanvas">
       <SidebarContent>
-        <SidebarGroup>
-          <SidebarMenu>
-            <SidebarMenuItem>
-              <SidebarMenuButton asChild>
-                <NavLink to="/" end>
-                  Home
-                </NavLink>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-            <SidebarMenuItem>
-              <SidebarMenuButton asChild>
-                <NavLink to="/datasets">Datasets</NavLink>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-          </SidebarMenu>
-        </SidebarGroup>
-
         <SidebarDatasetsItemsGrouped
           groupBy="regions"
           datasets={datasets}
           selectedDatasetId={selectedDatasetId}
+          preItems={
+            <>
+              <SidebarMenuItem>
+                <SidebarMenuButton asChild>
+                  <NavLink to="/" end>
+                    Home
+                  </NavLink>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton asChild>
+                  <NavLink to="/datasets">Datasets</NavLink>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </>
+          }
           onDatasetClick={id => {
             setSelectedDatasetId(id);
             navigate(`/datasets/${id}`);
@@ -530,7 +531,7 @@ Composition: `PageScroll` → `AppShell` → `AppSidebar` → `AppShellMainConte
 | `NavUserHeader`                                      | Header user menu (avatar, account, theme, logout).                                                                                                                                                                                                                                |
 | `Sidebar`, `SidebarProvider`                         | Collapsible rail + context (`@sybilion/uilib`). Wrap `SidebarProvider` above `AppLayout`; render `Sidebar` inside `AppShell` (usually via `AppSidebar`).                                                                                                                          |
 | `AppSidebar`                                         | App-specific component (`src/AppSidebar.tsx`) composing `Sidebar` + nav links + product widgets. Keeps `AppLayout` generic.                                                                                                                                                       |
-| `SidebarDatasetsItemsGrouped`                        | Dataset list widget for the sidebar: collapsible groups (`regions` / `target_type` / `categories`) with nested rows + selection callback.                                                                                                                                         |
+| `SidebarDatasetsItemsGrouped`                        | Single-sidebar-group widget: **`preItems`** / **`postItems`** for main nav + collapsible dataset groups (`regions` / `target_type` / `categories`) + **`onDatasetClick`**. Prefer this over stacking multiple **`SidebarGroup`** blocks unless explicitly requested. Source: **`src/components/widgets/SidebarDatasetsItemsGrouped/SidebarDatasetsItemsGrouped.tsx`**.                                                                                                                                         |
 | `SidebarTrigger`                                     | Toggle sidebar visibility (especially mobile / `offcanvas`).                                                                                                                                                                                                                      |
 | `PageFooter`                                         | Standard footer; requires `versionLink` + `versionLabel`.                                                                                                                                                                                                                         |
 | `Gap`                                                | Spacing primitive between flex children.                                                                                                                                                                                                                                          |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.2.9",
+  "version": "1.2.10",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",

package/src/components/ui/NavUserHeader/NavUserHeader.tsx

@@ -1,6 +1,6 @@
 import cn from 'classnames';
 
-import { useTheme } from '#uilib/docs/contexts/theme-context';
+import { useTheme } from '#uilib/contexts/theme-context';
 import {
   MoonIcon,
   SignOutIcon,
@@ -33,8 +33,16 @@ export function NavUserHeader({
   onLogout,
   signInSlot,
   onSignInClick,
+  theme: themeFromHost,
+  onThemeToggle: onThemeToggleFromHost,
 }: NavUserHeaderProps) {
-  const { toggleTheme, theme } = useTheme();
+  const docsTheme = useTheme();
+  const hostControlsTheme =
+    themeFromHost !== undefined && onThemeToggleFromHost !== undefined;
+  const theme = hostControlsTheme ? themeFromHost : docsTheme.theme;
+  const toggleTheme = hostControlsTheme
+    ? onThemeToggleFromHost
+    : docsTheme.toggleTheme;
   const authenticated = isAuthenticated ?? true;
 
   const avatarUrl = user?.avatar ?? '';

package/src/components/ui/NavUserHeader/NavUserHeader.types.ts

@@ -20,4 +20,7 @@ export type NavUserHeaderProps = {
   /** Replaces default “Log in” control when signed out. */
   signInSlot?: ReactNode;
   onSignInClick?: () => void;
+  /** When both are set, theme row uses these instead of uilib `ThemeProvider` context. */
+  theme?: 'light' | 'dark';
+  onThemeToggle?: () => void;
 };

package/src/components/widgets/SybilionAppHeader/SybilionAppHeader.tsx

@@ -20,6 +20,10 @@ export type SybilionAppHeaderProps = WorkspaceAppSwitcherProps &
     pageHeaderId?: string;
     actionsAnchorId?: string;
     actionsAnchorClassName?: string;
+    /** Renders before `NavUserHeader` inside the page actions anchor (e.g. impersonation). */
+    actionsStart?: ReactNode;
+    /** Renders after `NavUserHeader` inside the page actions anchor (e.g. notifications). */
+    actionsEnd?: ReactNode;
     /** Branded markup; omit for default lucide tile + «Sybilion». */
     logo?: ReactNode;
     logoAreaClassName?: string;
@@ -31,6 +35,8 @@ export function SybilionAppHeader({
   pageHeaderId,
   actionsAnchorId = PAGE_HEADER_ACTIONS_ID,
   actionsAnchorClassName,
+  actionsStart,
+  actionsEnd,
   pathname,
   onNavigate,
   authenticated,
@@ -67,7 +73,9 @@ export function SybilionAppHeader({
         id={actionsAnchorId}
         className={cn(S.actionsAnchor, actionsAnchorClassName)}
       >
+        {actionsStart}
         <NavUserHeader {...navUserHeaderProps} />
+        {actionsEnd}
       </div>
     </AppHeaderPortal>
   );

package/src/components/widgets/SybilionSignInPanel/SybilionSignInPanel.styl

@@ -35,10 +35,13 @@
     opacity 0.8
 
 .version
+  position absolute
+  bottom 0
+  right 0
   display block
   margin-top var(--p-8)
   padding-bottom var(--p-2)
-  width 100%
+  width 50%
   box-sizing border-box
   text-align center
   font-size 14px

package/src/contexts/theme-context.tsx

@@ -0,0 +1,106 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+
+import { Theme as ThemeRoot } from '@homecode/ui';
+
+import {
+  getThemeConfig as defaultGetThemeConfig,
+  type GetThemeConfigOptions,
+} from '#uilib/docs/lib/theme';
+
+export type ThemeMode = 'light' | 'dark';
+
+export type GetThemeConfigFn = (
+  isDarkTheme: boolean,
+  options?: GetThemeConfigOptions,
+) => ReturnType<typeof defaultGetThemeConfig>;
+
+export type { GetThemeConfigOptions };
+
+const ThemeContext = createContext<{
+  theme: ThemeMode;
+  isDarkMode: boolean;
+  setTheme: (theme: ThemeMode) => void;
+  toggleTheme: () => void;
+}>({
+  theme: 'light',
+  isDarkMode: false,
+  setTheme: () => {},
+  toggleTheme: () => {},
+});
+
+export type ThemeProviderProps = {
+  children: React.ReactNode;
+  /** When false, DOM classes still update but theme is not persisted to `localStorage`. */
+  allowLocalStorage?: boolean;
+  /** Override docs default active/accent token (`DEFAULT_THEME_ACTIVE_COLOR`). Passed into `getThemeConfig`. */
+  activeColor?: string;
+  /** Homecode theme config; defaults to uilib docs palette. */
+  getThemeConfig?: GetThemeConfigFn;
+};
+
+export function ThemeProvider({
+  children,
+  allowLocalStorage = true,
+  activeColor,
+  getThemeConfig: getThemeConfigProp,
+}: ThemeProviderProps) {
+  const getThemeConfig = getThemeConfigProp ?? defaultGetThemeConfig;
+
+  const themeConfigOptions = useMemo<GetThemeConfigOptions>(
+    () => ({ activeColor }),
+    [activeColor],
+  );
+
+  const [theme, setTheme] = useState<ThemeMode>(() => {
+    return (localStorage.getItem('theme') as ThemeMode) || 'light';
+  });
+
+  const [currThemeConfig, setCurrThemeConfig] = useState(() =>
+    getThemeConfig(theme === 'dark', themeConfigOptions),
+  );
+
+  const toggleTheme = useCallback(() => {
+    setTheme(t => (t === 'dark' ? 'light' : 'dark'));
+  }, []);
+
+  useEffect(() => {
+    setCurrThemeConfig(getThemeConfig(theme === 'dark', themeConfigOptions));
+  }, [theme, getThemeConfig, themeConfigOptions]);
+
+  useEffect(() => {
+    const root = document.documentElement;
+    const effectiveTheme = theme;
+
+    root.classList.remove('light', 'dark');
+    root.classList.add(effectiveTheme);
+    if (allowLocalStorage) {
+      localStorage.setItem('theme', theme);
+    }
+  }, [theme, allowLocalStorage]);
+
+  const value = useMemo(
+    () => ({
+      theme,
+      isDarkMode: theme === 'dark',
+      setTheme,
+      toggleTheme,
+    }),
+    [theme, toggleTheme],
+  );
+
+  return (
+    <ThemeContext.Provider value={value}>
+      <ThemeRoot config={currThemeConfig} />
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export const useTheme = () => useContext(ThemeContext);

package/src/docs/App/ThemeToggle.tsx

@@ -1,5 +1,5 @@
 import { Button } from '#uilib/components/ui/Button';
-import { useTheme } from '#uilib/docs/contexts/theme-context';
+import { useTheme } from '#uilib/contexts/theme-context';
 import { MoonIcon, SunIcon } from '@phosphor-icons/react';
 
 export function ThemeToggle() {

package/src/docs/contexts/theme-context.tsx

@@ -1,68 +1,8 @@
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useState,
-} from 'react';
-
-import { Theme as ThemeRoot } from '@homecode/ui';
-
-import { getThemeConfig } from '../lib/theme';
-
-export type ThemeMode = 'light' | 'dark';
-
-const ThemeContext = createContext<{
-  theme: ThemeMode;
-  isDarkMode: boolean;
-  setTheme: (theme: ThemeMode) => void;
-  toggleTheme: () => void;
-}>({
-  theme: 'light',
-  isDarkMode: false,
-  setTheme: () => {},
-  toggleTheme: () => {},
-});
-
-export function ThemeProvider({ children }: { children: React.ReactNode }) {
-  const [theme, setTheme] = useState<ThemeMode>(() => {
-    return (localStorage.getItem('theme') as ThemeMode) || 'light';
-  });
-
-  const [currThemeConfig, setCurrThemeConfig] = useState(() =>
-    getThemeConfig(theme === 'dark'),
-  );
-
-  const toggleTheme = useCallback(() => {
-    setTheme(theme === 'dark' ? 'light' : 'dark');
-  }, [theme, setTheme]);
-
-  useEffect(() => {
-    setCurrThemeConfig(getThemeConfig(theme === 'dark'));
-  }, [theme]);
-
-  useEffect(() => {
-    const root = document.documentElement;
-    const effectiveTheme = theme;
-
-    root.classList.remove('light', 'dark');
-    root.classList.add(effectiveTheme);
-    localStorage.setItem('theme', theme);
-  }, [theme]);
-
-  return (
-    <ThemeContext.Provider
-      value={{
-        theme,
-        isDarkMode: theme === 'dark',
-        setTheme,
-        toggleTheme,
-      }}
-    >
-      <ThemeRoot config={currThemeConfig} />
-      {children}
-    </ThemeContext.Provider>
-  );
-}
-
-export const useTheme = () => useContext(ThemeContext);
+export {
+  ThemeProvider,
+  useTheme,
+  type GetThemeConfigFn,
+  type GetThemeConfigOptions,
+  type ThemeMode,
+  type ThemeProviderProps,
+} from '#uilib/contexts/theme-context';

package/src/docs/index.tsx

@@ -9,7 +9,7 @@ const root = createRoot(elem);
 
 root.render(
   <BrowserRouter>
-    <ThemeProvider>
+    <ThemeProvider activeColor="#">
       <App />
     </ThemeProvider>
   </BrowserRouter>,

package/src/docs/lib/theme.ts

@@ -7,6 +7,12 @@ const defaultConfig = getConfig();
 
 const alphaMods = [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
 
+export const DEFAULT_THEME_ACTIVE_COLOR = '#9c59ff';
+
+export type GetThemeConfigOptions = {
+  activeColor?: string;
+};
+
 export const colorsConfig = {
   light: {
     ...ThemeHelpers.colorsConfigToVars({
@@ -26,13 +32,18 @@ export const colorsConfig = {
   },
 };
 
-export function getThemeConfig(isDarkTheme: boolean) {
+export function getThemeConfig(
+  isDarkTheme: boolean,
+  options?: GetThemeConfigOptions,
+) {
+  const activeColor = options?.activeColor ?? DEFAULT_THEME_ACTIVE_COLOR;
+
   return {
     ...defaultConfig,
     ...colorsConfig[isDarkTheme ? 'dark' : 'light'],
     ...ThemeHelpers.colorsConfigToVars({
       active: {
-        color: '#9c59ff',
+        color: activeColor,
         mods: {
           // @ts-ignore
           alpha: alphaMods,

package/src/docs/pages/ChartAreaInteractivePage.tsx

@@ -9,7 +9,7 @@ import type {
 import { ForecastItemData } from '#uilib/components/ui/ChartAreaInteractive/ChartLines';
 import { PageContentSection } from '#uilib/components/ui/Page';
 import { Tabs, TabsList, TabsTrigger } from '#uilib/components/ui/Tabs';
-import { useTheme } from '#uilib/docs/contexts/theme-context';
+import { useTheme } from '#uilib/contexts/theme-context';
 import type { ForecastData } from '#uilib/types/forecast-data';
 
 import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';

package/src/index.ts

@@ -1,3 +1,5 @@
+export * from './contexts/theme-context';
+export { DEFAULT_THEME_ACTIVE_COLOR } from './docs/lib/theme';
 export * from './sybilion-auth';
 export * from './types/sybilionDatasetSnapshots';
 export * from './contexts/chat-context';

package/dist/esm/docs/contexts/theme-context.js

@@ -1,14 +0,0 @@
-import 'react/jsx-runtime';
-import { createContext, useContext } from 'react';
-import '@homecode/ui';
-import '../lib/theme.js';
-
-const ThemeContext = createContext({
-    theme: 'light',
-    isDarkMode: false,
-    setTheme: () => { },
-    toggleTheme: () => { },
-});
-const useTheme = () => useContext(ThemeContext);
-
-export { useTheme };