@sybilion/uilib 1.2.6 → 1.2.8

package/assets/standalone-global.css

@@ -125,17 +125,18 @@
   --font-family-heading: 'KMR Apparat', sans-serif;
   --font-family-body: 'Manrope', sans-serif;
 
-  --brand-color: var(--sb-purple-400);
-  --brand-color-50: var(--sb-purple-50);
-  --brand-color-100: var(--sb-purple-100);
-  --brand-color-200: var(--sb-purple-200);
-  --brand-color-300: var(--sb-purple-300);
-  --brand-color-400: var(--sb-purple-400);
-  --brand-color-500: var(--sb-purple-500);
-  --brand-color-600: var(--sb-purple-600);
-  --brand-color-700: var(--sb-purple-700);
-  --brand-color-800: var(--sb-purple-800);
-  --brand-color-900: var(--sb-purple-900);
+  /* Same mapping as sybilion-client/assets/globals.css (app variables) */
+  --brand-color: var(--sb-cyan-400);
+  --brand-color-50: var(--sb-cyan-50);
+  --brand-color-100: var(--sb-cyan-100);
+  --brand-color-200: var(--sb-cyan-200);
+  --brand-color-300: var(--sb-cyan-300);
+  --brand-color-400: var(--sb-cyan-400);
+  --brand-color-500: var(--sb-cyan-500);
+  --brand-color-600: var(--sb-cyan-600);
+  --brand-color-700: var(--sb-cyan-700);
+  --brand-color-800: var(--sb-cyan-800);
+  --brand-color-900: var(--sb-cyan-900);
   --header-height: 94px;
   --page-x-padding: var(--p-16);
   --page-y-padding: var(--p-12);

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

@@ -2,8 +2,13 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import cn from 'classnames';
 import S from './Logo.styl.js';
 
+/**
+ * Public URL for the Sybilion logo in standalone apps. Copy `@sybilion/uilib/logo.svg`
+ * to `public/logo.svg` (see standalone-apps guide). Same path as the favicon `<link href>`.
+ */
+const SYBILION_STANDALONE_LOGO_PUBLIC_URL = '/logo.svg';
 function Logo({ showText = true, size = 'md', className, ...props }) {
-    return (jsxs("div", { className: cn(S.root, S[size], className), ...props, children: [jsx("img", { src: "/logo.svg", alt: "Sybilion", className: S.icon }), showText && jsx("span", { className: S.text, children: "Sybilion" })] }));
+    return (jsxs("div", { className: cn(S.root, S[size], className), ...props, children: [jsx("img", { src: SYBILION_STANDALONE_LOGO_PUBLIC_URL, alt: showText ? '' : 'Sybilion', className: S.icon, ...(showText ? { 'aria-hidden': true } : {}) }), showText && jsx("span", { className: S.text, children: "Sybilion" })] }));
 }
 
-export { Logo };
+export { Logo, SYBILION_STANDALONE_LOGO_PUBLIC_URL };

package/dist/esm/components/ui/Logo/Logo.styl.js

@@ -1,6 +1,6 @@
 import styleInject from 'style-inject';
 
-var css_248z = ".Logo_root__-IFVw{align-items:center;color:var(--color-foreground);display:flex;gap:8px}.Logo_icon__cE1BI{height:24px;width:auto}.Logo_text__YpU3U{font-family:var(--font-family-heading);line-height:48px}.Logo_sm__p25D- .Logo_icon__cE1BI{height:18px}.Logo_sm__p25D- .Logo_text__YpU3U{font-size:var(--text-lg);line-height:36px}.Logo_md__1Y9mG .Logo_icon__cE1BI{height:24px}.Logo_md__1Y9mG .Logo_text__YpU3U{font-size:var(--text-2xl);line-height:48px}.Logo_lg__V9Yy2 .Logo_icon__cE1BI{height:32px}.Logo_lg__V9Yy2 .Logo_text__YpU3U{font-size:var(--text-3xl);line-height:56px}";
+var css_248z = ".Logo_root__-IFVw{align-items:center;color:var(--color-foreground);display:flex;gap:8px}.Logo_icon__cE1BI{display:block;flex-shrink:0;height:24px;width:auto}.Logo_text__YpU3U{font-family:var(--font-family-heading);line-height:48px}.Logo_sm__p25D- .Logo_icon__cE1BI{height:18px}.Logo_sm__p25D- .Logo_text__YpU3U{font-size:var(--text-lg);line-height:36px}.Logo_md__1Y9mG .Logo_icon__cE1BI{height:24px}.Logo_md__1Y9mG .Logo_text__YpU3U{font-size:var(--text-2xl);line-height:48px}.Logo_lg__V9Yy2 .Logo_icon__cE1BI{height:32px}.Logo_lg__V9Yy2 .Logo_text__YpU3U{font-size:var(--text-3xl);line-height:56px}";
 var S = {"root":"Logo_root__-IFVw","icon":"Logo_icon__cE1BI","text":"Logo_text__YpU3U","sm":"Logo_sm__p25D-","md":"Logo_md__1Y9mG","lg":"Logo_lg__V9Yy2"};
 styleInject(css_248z);
 

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

@@ -1,5 +1,6 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import cn from 'classnames';
+import { useTheme } from '../../../docs/contexts/theme-context.js';
 import { UserCircleIcon, SunIcon, MoonIcon, SignOutIcon } from '@phosphor-icons/react';
 import { ChevronDownIcon } from 'lucide-react';
 import { Avatar } from '../Avatar/Avatar.js';
@@ -8,7 +9,8 @@ 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, theme, onThemeToggle, onLogout, signInSlot, onSignInClick, }) {
+function NavUserHeader({ variant = 'default', isLoading = false, isAuthenticated, user = null, menuItems, onLogout, signInSlot, onSignInClick, }) {
+    const { toggleTheme, theme } = useTheme();
     const authenticated = isAuthenticated ?? true;
     const avatarUrl = user?.avatar ?? '';
     const userName = user?.name ?? '';
@@ -22,7 +24,7 @@ function NavUserHeader({ variant = 'default', isLoading = false, isAuthenticated
         }
         return (jsxs(Button, { variant: "ghost", size: "sm", className: S.loginButton, type: "button", onClick: onSignInClick, children: [jsx(UserCircleIcon, { className: S.iconLg }), jsx("span", { children: "Log in" })] }));
     }
-    return (jsxs(DropdownMenu, { children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsxs(Button, { variant: "ghost", size: "sm", className: cn(S.userButton, variant === 'compact' && S.compact), children: [jsx(Avatar, { className: S.avatar, children: jsx(Image, { url: avatarUrl, alt: userName, fallback: jsx("div", { className: S.avatarFallback }) }) }), variant === 'default' && (jsxs(Fragment, { children: [jsxs("div", { className: S.userInfo, children: [jsx("span", { className: `${S.userName} ph-no-capture`, children: userName }), jsx("span", { className: S.userEmail, children: userEmail })] }), jsx(ChevronDownIcon, { className: S.iconSm })] }))] }) }), jsxs(DropdownMenuContent, { className: S.dropdownContent, align: "end", elevation: "md", children: [jsx(DropdownMenuLabel, { className: S.userLabel, children: jsxs("div", { className: S.userLabelContent, children: [jsx(Avatar, { className: S.avatar, children: jsx(Image, { url: avatarUrl, alt: userName, fallback: jsx("div", { className: S.avatarFallback }) }) }), jsxs("div", { className: S.userDetails, children: [jsx("span", { className: `${S.userDetailName} ph-no-capture`, children: userName }), jsx("span", { className: S.userDetailEmail, children: userEmail })] })] }) }), jsx(DropdownMenuSeparator, {}), jsxs(DropdownMenuGroup, { children: [menuItems, onThemeToggle ? (jsx(DropdownMenuItem, { onSelect: () => onThemeToggle(), children: theme === 'dark' ? (jsxs(Fragment, { children: [jsx(SunIcon, {}), "Light theme"] })) : (jsxs(Fragment, { children: [jsx(MoonIcon, {}), "Dark theme"] })) })) : null] }), jsx(DropdownMenuSeparator, {}), jsxs(DropdownMenuItem, { variant: "destructive", onSelect: () => onLogout(), children: [jsx(SignOutIcon, {}), "Log out"] })] })] }));
+    return (jsxs(DropdownMenu, { children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsxs(Button, { variant: "ghost", size: "sm", className: cn(S.userButton, variant === 'compact' && S.compact), children: [jsx(Avatar, { className: S.avatar, children: jsx(Image, { url: avatarUrl, alt: userName, fallback: jsx("div", { className: S.avatarFallback }) }) }), variant === 'default' && (jsxs(Fragment, { children: [jsxs("div", { className: S.userInfo, children: [jsx("span", { className: `${S.userName} ph-no-capture`, children: userName }), jsx("span", { className: S.userEmail, children: userEmail })] }), jsx(ChevronDownIcon, { className: S.iconSm })] }))] }) }), jsxs(DropdownMenuContent, { className: S.dropdownContent, align: "end", elevation: "md", children: [jsx(DropdownMenuLabel, { className: S.userLabel, children: jsxs("div", { className: S.userLabelContent, children: [jsx(Avatar, { className: S.avatar, children: jsx(Image, { url: avatarUrl, alt: userName, fallback: jsx("div", { className: S.avatarFallback }) }) }), jsxs("div", { className: S.userDetails, children: [jsx("span", { className: `${S.userDetailName} ph-no-capture`, children: userName }), jsx("span", { className: S.userDetailEmail, children: userEmail })] })] }) }), jsx(DropdownMenuSeparator, {}), jsxs(DropdownMenuGroup, { children: [menuItems, jsx(DropdownMenuItem, { onSelect: toggleTheme, children: theme === 'dark' ? (jsxs(Fragment, { children: [jsx(SunIcon, {}), "Light theme"] })) : (jsxs(Fragment, { children: [jsx(MoonIcon, {}), "Dark theme"] })) })] }), jsx(DropdownMenuSeparator, {}), jsxs(DropdownMenuItem, { variant: "destructive", onSelect: () => onLogout(), children: [jsx(SignOutIcon, {}), "Log out"] })] })] }));
 }
 
 export { NavUserHeader };

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

@@ -0,0 +1,14 @@
+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 };

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

@@ -0,0 +1,23 @@
+import { ThemeHelpers, ThemeDefaults } from '@homecode/ui';
+
+const { colors, getColors, getConfig } = ThemeDefaults;
+getColors();
+getConfig();
+({
+    light: {
+        ...ThemeHelpers.colorsConfigToVars({
+            ...getColors({
+                accent: colors.dark,
+                decent: colors.light,
+            }),
+        }),
+    },
+    dark: {
+        ...ThemeHelpers.colorsConfigToVars({
+            ...getColors({
+                accent: colors.light,
+                decent: colors.dark,
+            }),
+        }),
+    },
+});

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

@@ -1,2 +1,7 @@
 import type { LogoProps } from './Logo.types';
+/**
+ * Public URL for the Sybilion logo in standalone apps. Copy `@sybilion/uilib/logo.svg`
+ * to `public/logo.svg` (see standalone-apps guide). Same path as the favicon `<link href>`.
+ */
+export declare const SYBILION_STANDALONE_LOGO_PUBLIC_URL: "/logo.svg";
 export declare function Logo({ showText, size, className, ...props }: LogoProps): import("react/jsx-runtime").JSX.Element;

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, theme, onThemeToggle, 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, }: 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

@@ -14,10 +14,6 @@ export type NavUserHeaderProps = {
     user?: NavUserHeaderUser | null;
     /** Rows inside the menu above theme toggle and logout. Use `DropdownMenuItem` nodes. */
     menuItems?: ReactNode;
-    /** Current theme drives the toggle row label/icons. */
-    theme: 'light' | 'dark';
-    /** When set, renders the light/dark theme menu row. */
-    onThemeToggle?: () => void;
     onLogout: () => void;
     /** Replaces default “Log in” control when signed out. */
     signInSlot?: ReactNode;

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

@@ -6,4 +6,5 @@ export declare const useTheme: () => {
     theme: ThemeMode;
     isDarkMode: boolean;
     setTheme: (theme: ThemeMode) => void;
+    toggleTheme: () => void;
 };

package/dist/esm/types/src/docs/pages/StandaloneAppLayoutPage/StandaloneAppLayoutPage.constants.d.ts

@@ -0,0 +1,7 @@
+import { WorkspaceAppEntry } from '#uilib/components/ui/WorkspaceAppSwitcher';
+import { SidebarDatasetsItemsGroupedDataset } from '#uilib/components/widgets/SidebarDatasetsItemsGrouped';
+export declare const MOCK_DATASETS: SidebarDatasetsItemsGroupedDataset[];
+export type PreviewPanel = 'home' | 'datasets';
+export declare const TEST_HEADER_ID = "test-header-id";
+export declare const DOCS_WORKSPACE_APPS_LS_KEY = "uilib.docs.workspaceApps";
+export declare const DOCS_PREVIEW_APPS: WorkspaceAppEntry[];

package/docs/standalone-apps.md

@@ -40,6 +40,23 @@ Import tokens/fonts once (typically `src/main.tsx`):
 import '@sybilion/uilib/standalone-global.css';
 ```
 
+### Branding (header logo + optional tab icon)
+
+**Header:** **`SybilionAppHeader`** includes **`Logo`** from **`@sybilion/uilib`**. **`Logo`** uses **`SYBILION_STANDALONE_LOGO_PUBLIC_URL`** (**`'/logo.svg'`**). Vite serves that from **`public/logo.svg`**. Copy the published file once:
+
+```bash
+mkdir -p public && cp node_modules/@sybilion/uilib/logo.svg public/logo.svg
+```
+
+That asset is **`src/assets/logo.svg`** in the package (**cyan** glyph). The **uilib docs** repo uses **`assets/logo.svg`** (**purple**) for its own site only—not what **`./logo.svg`** publishes.
+
+**Browser tab (optional):** The favicon (tiny icon next to the tab title) and the document title come from **`index.html`**, not from React. **`Logo`** does not set them. To replace Vite’s default tab icon with the package logo, add **`href="/logo.svg"`** — same as **`SYBILION_STANDALONE_LOGO_PUBLIC_URL`** from **`@sybilion/uilib`** — plus **`<title>`** in **`index.html`** `<head>`:
+
+```html
+<link rel="icon" href="/logo.svg" type="image/svg+xml" />
+<title>Your app name</title>
+```
+
 Mount the tree with `ReactDOM.createRoot` → `App` (wrap with `StrictMode` if you want).
 
 ### `package.json` scripts (required)
@@ -471,17 +488,18 @@ Composition: `PageScroll` → `AppShell` → `AppSidebar` → `AppShellMainConte
 
 ### Greenfield checklist (agents)
 
-| Step               | Deliverable                                                                                                                                                                                          |
-| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| React / router     | **`react`**, **`react-dom`**, **`react-router-dom`**, **`@auth0/auth0-react`** (and **`vite`** if applicable) aligned with **`@sybilion/uilib`** **`package.json`** — §1 _React ecosystem versions_. |
-| Env files          | **`.env.example`** (committed) + **`.env`** locally; **`PORT=3000`** recommended for Auth0 test tenant; **`VITE_*`** as in §1 table.                                                                 |
-| Scripts            | **`package.json`** includes mandatory **`dev`** (e.g. `"vite"`); optional **`build`**, **`preview`**.                                                                                                |
-| Vite proxy         | **`vite.config.ts`** spreads **`sybilionStandaloneViteDev({ mode })`**; SDK **`baseUrl`** empty in dev (§2).                                                                                         |
-| Files              | `src/libs/sybilion-sdk.ts`, `AppProviders.tsx`, `AppLayout.tsx`, `AppSidebar.tsx`, `App.tsx`, `main.tsx`, route pages under e.g. `src/pages/`.                                                       |
-| Pages + UI         | **§4 Route page body** (mandatory stack) + **Discovering** (barrel-first; bespoke markup only when no export fits).                                                                                  |
-| Auth0              | SPA callback / logout URLs + allowed web origins → **`http://localhost:<PORT>`** for local dev and deploy URLs (and previews).                                                                       |
-| API                | **Dev:** proxy handles API traffic (no browser CORS to API). **Prod:** Sybilion backend **CORS** → your deploy `Origin`, unless API is same-origin.                                                  |
-| Go (if applicable) | Server proxies **`/api`** to Sybilion; SPA dev **`baseUrl`** stays `''` when same-origin.                                                                                                            |
+| Step               | Deliverable                                                                                                                                                                                                             |
+| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| React / router     | **`react`**, **`react-dom`**, **`react-router-dom`**, **`@auth0/auth0-react`** (and **`vite`** if applicable) aligned with **`@sybilion/uilib`** **`package.json`** — §1 _React ecosystem versions_.                    |
+| Env files          | **`.env.example`** (committed) + **`.env`** locally; **`PORT=3000`** recommended for Auth0 test tenant; **`VITE_*`** as in §1 table.                                                                                    |
+| Scripts            | **`package.json`** includes mandatory **`dev`** (e.g. `"vite"`); optional **`build`**, **`preview`**.                                                                                                                   |
+| Vite proxy         | **`vite.config.ts`** spreads **`sybilionStandaloneViteDev({ mode })`**; SDK **`baseUrl`** empty in dev (§2).                                                                                                            |
+| Files              | `src/libs/sybilion-sdk.ts`, `AppProviders.tsx`, `AppLayout.tsx`, `AppSidebar.tsx`, `App.tsx`, `main.tsx`, route pages under e.g. `src/pages/`.                                                                          |
+| Branding           | **`public/logo.svg`** for **`Logo`** / **`SybilionAppHeader`**: `cp node_modules/@sybilion/uilib/logo.svg public/logo.svg`. **`index.html`**: `<title>`; optional **`<link rel="icon">`** for tab icon (§1 _Branding_). |
+| Pages + UI         | **§4 Route page body** (mandatory stack) + **Discovering** (barrel-first; bespoke markup only when no export fits).                                                                                                     |
+| Auth0              | SPA callback / logout URLs + allowed web origins → **`http://localhost:<PORT>`** for local dev and deploy URLs (and previews).                                                                                          |
+| API                | **Dev:** proxy handles API traffic (no browser CORS to API). **Prod:** Sybilion backend **CORS** → your deploy `Origin`, unless API is same-origin.                                                                     |
+| Go (if applicable) | Server proxies **`/api`** to Sybilion; SPA dev **`baseUrl`** stays `''` when same-origin.                                                                                                                               |
 
 ### Glossary (high-use pieces)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.2.6",
+  "version": "1.2.8",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",
@@ -35,7 +35,8 @@
       "types": "./dist/standalone/vite-sybilion-standalone-dev.d.ts",
       "import": "./dist/standalone/vite-sybilion-standalone-dev.js",
       "default": "./dist/standalone/vite-sybilion-standalone-dev.js"
-    }
+    },
+    "./logo.svg": "./src/assets/logo.svg"
   },
   "files": [
     "assets",

package/src/assets/logo.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+	<path fill="#59f0ff" d="M13.43 24.023h-2.836v-2.836h2.836zm-2.835-2.844H5.63v-2.74h4.965Zm10.527-2.74h-2.726v2.74h-4.965v-2.74h4.952v-4.965h2.74zm-15.5 0h-2.74v-4.965h2.74ZM2.87 13.462H.034v-2.836H2.87Zm21.096 0H21.13v-2.836h2.836zM5.617 10.635h-2.74V5.669h2.74zm15.505 0h-2.74V5.669h2.74zM10.588 2.927v2.74H5.623v-2.74Zm2.842 0h4.96v2.74h-4.966v-2.74h-2.83V.09h2.836z" style="stroke-width:.13252" />
+</svg>

package/src/components/ui/Logo/Logo.styl

@@ -5,6 +5,8 @@
   color var(--color-foreground)
 
 .icon
+  display block
+  flex-shrink 0
   height 24px
   width auto
 

package/src/components/ui/Logo/Logo.tsx

@@ -3,6 +3,12 @@ import cn from 'classnames';
 import S from './Logo.styl';
 import type { LogoProps } from './Logo.types';
 
+/**
+ * Public URL for the Sybilion logo in standalone apps. Copy `@sybilion/uilib/logo.svg`
+ * to `public/logo.svg` (see standalone-apps guide). Same path as the favicon `<link href>`.
+ */
+export const SYBILION_STANDALONE_LOGO_PUBLIC_URL = '/logo.svg' as const;
+
 export function Logo({
   showText = true,
   size = 'md',
@@ -11,7 +17,12 @@ export function Logo({
 }: LogoProps) {
   return (
     <div className={cn(S.root, S[size], className)} {...props}>
-      <img src="/logo.svg" alt="Sybilion" className={S.icon} />
+      <img
+        src={SYBILION_STANDALONE_LOGO_PUBLIC_URL}
+        alt={showText ? '' : 'Sybilion'}
+        className={S.icon}
+        {...(showText ? { 'aria-hidden': true } : {})}
+      />
       {showText && <span className={S.text}>Sybilion</span>}
     </div>
   );

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

@@ -1,5 +1,6 @@
 import cn from 'classnames';
 
+import { useTheme } from '#uilib/docs/contexts/theme-context';
 import {
   MoonIcon,
   SignOutIcon,
@@ -29,12 +30,11 @@ export function NavUserHeader({
   isAuthenticated,
   user = null,
   menuItems,
-  theme,
-  onThemeToggle,
   onLogout,
   signInSlot,
   onSignInClick,
 }: NavUserHeaderProps) {
+  const { toggleTheme, theme } = useTheme();
   const authenticated = isAuthenticated ?? true;
 
   const avatarUrl = user?.avatar ?? '';
@@ -121,21 +121,19 @@ export function NavUserHeader({
         <DropdownMenuSeparator />
         <DropdownMenuGroup>
           {menuItems}
-          {onThemeToggle ? (
-            <DropdownMenuItem onSelect={() => onThemeToggle()}>
-              {theme === 'dark' ? (
-                <>
-                  <SunIcon />
-                  Light theme
-                </>
-              ) : (
-                <>
-                  <MoonIcon />
-                  Dark theme
-                </>
-              )}
-            </DropdownMenuItem>
-          ) : null}
+          <DropdownMenuItem onSelect={toggleTheme}>
+            {theme === 'dark' ? (
+              <>
+                <SunIcon />
+                Light theme
+              </>
+            ) : (
+              <>
+                <MoonIcon />
+                Dark theme
+              </>
+            )}
+          </DropdownMenuItem>
         </DropdownMenuGroup>
         <DropdownMenuSeparator />
         <DropdownMenuItem variant="destructive" onSelect={() => onLogout()}>

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

@@ -16,10 +16,6 @@ export type NavUserHeaderProps = {
   user?: NavUserHeaderUser | null;
   /** Rows inside the menu above theme toggle and logout. Use `DropdownMenuItem` nodes. */
   menuItems?: ReactNode;
-  /** Current theme drives the toggle row label/icons. */
-  theme: 'light' | 'dark';
-  /** When set, renders the light/dark theme menu row. */
-  onThemeToggle?: () => void;
   onLogout: () => void;
   /** Replaces default “Log in” control when signed out. */
   signInSlot?: ReactNode;

package/src/docs/config/webpack.config.js

@@ -20,6 +20,7 @@ const FaviconWebpackPlugin = require('favicons-webpack-plugin');
 const pkg = require('../../../package.json');
 
 const themeStyl = pathResolve(paths.src, 'theme.styl');
+const logoSvgPath = pathResolve(paths.assets, 'logo.svg');
 
 export default (env, argv) => {
   const isDev = argv.mode === 'development';
@@ -148,7 +149,7 @@ export default (env, argv) => {
             noErrorOnMissing: true,
           },
           {
-            from: `${paths.assets}/logo.svg`,
+            from: logoSvgPath,
             to: paths.build,
             noErrorOnMissing: true,
           },
@@ -175,9 +176,9 @@ export default (env, argv) => {
               minifyURLs: true,
             },
       }),
-      existsSync(`${paths.assets}/logo.svg`) &&
+      existsSync(logoSvgPath) &&
         new FaviconWebpackPlugin({
-          logo: `${paths.assets}/logo.svg`,
+          logo: logoSvgPath,
           mode: 'webapp',
           devMode: 'webapp',
           favicons: {

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

@@ -1,4 +1,10 @@
-import { createContext, useContext, useEffect, useState } from 'react';
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
 
 import { Theme as ThemeRoot } from '@homecode/ui';
 
@@ -10,10 +16,12 @@ 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 }) {
@@ -25,6 +33,10 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
     getThemeConfig(theme === 'dark'),
   );
 
+  const toggleTheme = useCallback(() => {
+    setTheme(theme === 'dark' ? 'light' : 'dark');
+  }, [theme, setTheme]);
+
   useEffect(() => {
     setCurrThemeConfig(getThemeConfig(theme === 'dark'));
   }, [theme]);
@@ -44,6 +56,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
         theme,
         isDarkMode: theme === 'dark',
         setTheme,
+        toggleTheme,
       }}
     >
       <ThemeRoot config={currThemeConfig} />

package/src/docs/pages/NavUserHeaderPage.tsx

@@ -1,5 +1,3 @@
-import { useCallback, useEffect, useState } from 'react';
-
 import { DropdownMenuItem } from '#uilib/components/ui/DropdownMenu';
 import { NavUserHeader } from '#uilib/components/ui/NavUserHeader';
 import { PageContentSection } from '#uilib/components/ui/Page';
@@ -9,19 +7,6 @@ import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
 import { DocsHeaderActions } from '../docsHeaderActions';
 
 export default function NavUserHeaderPage() {
-  const [theme, setTheme] = useState<'light' | 'dark'>('light');
-
-  useEffect(() => {
-    document.documentElement.dataset.theme = theme;
-    return () => {
-      delete document.documentElement.dataset.theme;
-    };
-  }, [theme]);
-
-  const onThemeToggle = useCallback(() => {
-    setTheme(t => (t === 'dark' ? 'light' : 'dark'));
-  }, []);
-
   const customMenuItems = (
     <>
       <DropdownMenuItem>
@@ -40,7 +25,7 @@ export default function NavUserHeaderPage() {
       <AppPageHeader
         breadcrumbs={[{ label: 'NavUserHeader' }]}
         title="NavUserHeader"
-        subheader="User menu with label, custom rows, theme toggle, and logout."
+        subheader="User menu with label, custom rows, theme toggle (docs ThemeProvider), and logout."
         actions={<DocsHeaderActions />}
       />
       <PageContentSection
@@ -56,8 +41,6 @@ export default function NavUserHeaderPage() {
               email: 'demo@sybilion.io',
               avatar: '',
             }}
-            theme={theme}
-            onThemeToggle={onThemeToggle}
             onLogout={() => {
               console.info('[docs] logout');
             }}
@@ -75,8 +58,6 @@ export default function NavUserHeaderPage() {
               email: 'compact@sybilion.io',
               avatar: '',
             }}
-            theme={theme}
-            onThemeToggle={onThemeToggle}
             onLogout={() => {
               console.info('[docs] logout compact');
             }}