@sybilion/uilib 1.2.0 → 1.2.1

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

@@ -1,6 +1,6 @@
 import styleInject from 'style-inject';
 
-var css_248z = ".Image_container__beG4N{display:inline-block;height:100%;position:relative;width:100%}.Image_image__Kkmwo{border-radius:inherit;display:block;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.Image_image__Kkmwo.Image_loading__Hi33D{opacity:0}.Image_fallback__N1ndD{align-items:center;border-radius:inherit;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}";
+var css_248z = ".Image_container__beG4N{background-color:var(--muted-50);display:inline-block;height:100%;position:relative;width:100%}.Image_image__Kkmwo{border-radius:inherit;display:block;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.Image_image__Kkmwo.Image_loading__Hi33D{opacity:0}.Image_fallback__N1ndD{align-items:center;border-radius:inherit;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}";
 var S = {"container":"Image_container__beG4N","image":"Image_image__Kkmwo","loading":"Image_loading__Hi33D","fallback":"Image_fallback__N1ndD"};
 styleInject(css_248z);
 

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

@@ -0,0 +1,28 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { UserCircleIcon, SunIcon, MoonIcon, SignOutIcon } from '@phosphor-icons/react';
+import { ChevronDownIcon } from 'lucide-react';
+import { Avatar } from '../Avatar/Avatar.js';
+import { Button } from '../Button/Button.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, DropdownMenuItem } from '../DropdownMenu/DropdownMenu.js';
+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, }) {
+    const authenticated = isAuthenticated ?? true;
+    const avatarUrl = user?.avatar ?? '';
+    const userName = user?.name ?? '';
+    const userEmail = user?.email ?? '';
+    if (isLoading) {
+        return (jsxs(Button, { variant: "ghost", size: "sm", disabled: true, className: S.loadingButton, children: [jsx("div", { className: S.avatarSkeleton }), jsx("div", { className: S.textSkeleton })] }));
+    }
+    if (!authenticated) {
+        if (signInSlot) {
+            return signInSlot;
+        }
+        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"] })] })] }));
+}
+
+export { NavUserHeader };

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

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".NavUserHeader_loadingButton__UM1cm{gap:.5rem}.NavUserHeader_avatarSkeleton__bdWE3{border-radius:9999px;height:2rem;width:2rem}.NavUserHeader_avatarSkeleton__bdWE3,.NavUserHeader_textSkeleton__AOp9E{animation:NavUserHeader_pulse__GWYG6 2s cubic-bezier(.4,0,.6,1) infinite;background-color:var(--color-muted)}.NavUserHeader_textSkeleton__AOp9E{border-radius:.25rem;height:1rem;width:5rem}.NavUserHeader_loginButton__QA4q6{gap:.5rem}.NavUserHeader_iconLg__246wU{height:1.25rem;width:1.25rem}.NavUserHeader_iconSm__CWx2D{height:.75rem;width:.75rem}.NavUserHeader_menuIcon__u0VeA{height:1rem;margin-right:.5rem;width:1rem}.NavUserHeader_dropdownContent__djONy{width:14rem}.NavUserHeader_userButton__sBFb-{gap:.5rem;height:52px;padding:var(--p-2)}.NavUserHeader_userButton__sBFb-.NavUserHeader_compact__UfbAp{background-color:transparent!important;padding:0;transition:transform .2s ease-in-out}.NavUserHeader_userButton__sBFb-.NavUserHeader_compact__UfbAp:hover{transform:scale(1.1)}.NavUserHeader_avatar__Yksm-{height:2rem;width:2rem}.NavUserHeader_avatarImage__d6rzY{border-radius:inherit;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.NavUserHeader_avatarFallback__TKi2T{background-color:var(--color-primary);background:url(avatar.svg) no-repeat 50%;border-radius:inherit;color:var(--color-primary-foreground);height:100%;width:100%}.NavUserHeader_userInfo__kReZ2{align-items:flex-start;display:flex;flex-direction:column;gap:.25rem;text-align:left}.NavUserHeader_userName__8xek-{font-size:var(--text-sm);font-weight:400;line-height:1;max-width:7.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.NavUserHeader_userEmail__HKdtn{color:var(--sb-slate-500);font-size:var(--text-xs);line-height:1}.NavUserHeader_userLabel__DAxki{font-weight:400;padding:0}.NavUserHeader_userLabelContent__n5ngd{align-items:center;display:flex;font-size:.875rem;gap:.5rem;padding:.5rem;text-align:left}.NavUserHeader_userDetails__5r-k8{display:grid;flex:1;font-size:.875rem;line-height:1.25;text-align:left}.NavUserHeader_userDetailName__EajCc{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.NavUserHeader_userDetailEmail__LsK5z{color:var(--color-muted-foreground);font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes NavUserHeader_pulse__GWYG6{0%,to{opacity:1}50%{opacity:.5}}";
+var S = {"loadingButton":"NavUserHeader_loadingButton__UM1cm","avatarSkeleton":"NavUserHeader_avatarSkeleton__bdWE3","pulse":"NavUserHeader_pulse__GWYG6","textSkeleton":"NavUserHeader_textSkeleton__AOp9E","loginButton":"NavUserHeader_loginButton__QA4q6","iconLg":"NavUserHeader_iconLg__246wU","iconSm":"NavUserHeader_iconSm__CWx2D","menuIcon":"NavUserHeader_menuIcon__u0VeA","dropdownContent":"NavUserHeader_dropdownContent__djONy","userButton":"NavUserHeader_userButton__sBFb-","compact":"NavUserHeader_compact__UfbAp","avatar":"NavUserHeader_avatar__Yksm-","avatarImage":"NavUserHeader_avatarImage__d6rzY","avatarFallback":"NavUserHeader_avatarFallback__TKi2T","userInfo":"NavUserHeader_userInfo__kReZ2","userName":"NavUserHeader_userName__8xek-","userEmail":"NavUserHeader_userEmail__HKdtn","userLabel":"NavUserHeader_userLabel__DAxki","userLabelContent":"NavUserHeader_userLabelContent__n5ngd","userDetails":"NavUserHeader_userDetails__5r-k8","userDetailName":"NavUserHeader_userDetailName__EajCc","userDetailEmail":"NavUserHeader_userDetailEmail__LsK5z"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-export { SybilionAuthProvider, createSybilionApiFetch, sybilionApiFetch, useSybilionApiFetch, useSybilionAuth } from './sybilion-auth/SybilionAuthProvider.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';
 export { ChatContext, ChatProvider, useChat, useChats, useChatsForDataset, useChatsForScopeId, useCurrentChat } from './contexts/chat-context.js';
@@ -42,6 +42,7 @@ export { LabelWithId } from './components/ui/LabelWithId/LabelWithId.js';
 export { LegacyPlatformLink } from './components/ui/LegacyPlatformLink/LegacyPlatformLink.js';
 export { Logo } from './components/ui/Logo/Logo.js';
 export { MobileAdaptiveSelector } from './components/ui/MobileAdaptiveSelector/MobileAdaptiveSelector.js';
+export { NavUserHeader } from './components/ui/NavUserHeader/NavUserHeader.js';
 export { NumberControl } from './components/ui/NumberControl/NumberControl.js';
 export { AppShell, AppShellMainContent } from './components/ui/Page/AppShell/AppShell.js';
 export { PageHeader } from './components/ui/Page/PageHeader/PageHeader.js';

package/dist/esm/sybilion-auth/SybilionAuthProvider.js

@@ -2,9 +2,30 @@ import { jsx } from 'react/jsx-runtime';
 import { Auth0Provider, useAuth0 } from '@auth0/auth0-react';
 import { createContext, useContext, useMemo, useRef, useState, useCallback, useEffect } from 'react';
 import { normalizeApiBaseUrl } from './authPaths.js';
-import { exchangeAuth0AccessTokenForSybilionJwt } from './exchangeSybilionToken.js';
 
 const DEFAULT_TOKEN_KEY = 'sybilion.standalone.jwt';
+function sybilionJwtFromLoginResponse(body) {
+    const t = body.data?.token ?? body.token;
+    if (!t)
+        throw new Error('Sybilion auth: missing token in login response');
+    return t;
+}
+/** Origin (`scheme://host:port`) for paths like `/api/v1/...`; derived from SDK URL layout. */
+function getSybilionApiOriginFromSdk(sdk) {
+    const loginUrl = sdk.http.buildUrl('/v1/auth/login');
+    try {
+        const baseHref = typeof window !== 'undefined' && window.location?.href
+            ? window.location.href
+            : 'http://localhost/';
+        const u = new URL(loginUrl, baseHref);
+        if (!u.pathname.endsWith('/v1/auth/login'))
+            return '';
+        return u.origin;
+    }
+    catch {
+        return '';
+    }
+}
 const SybilionAuthContext = createContext(null);
 function useSybilionAuth() {
     const v = useContext(SybilionAuthContext);
@@ -51,7 +72,7 @@ function writeLs(key, value) {
         /* quota / blocked */
     }
 }
-function InnerSybilionSession({ children, apiBaseUrl, storageKey, logoutReturnTo, }) {
+function InnerSybilionSession({ children, sdk, storageKey, logoutReturnTo, }) {
     const auth0 = useAuth0();
     const auth0Ref = useRef(auth0);
     auth0Ref.current = auth0;
@@ -71,6 +92,7 @@ function InnerSybilionSession({ children, apiBaseUrl, storageKey, logoutReturnTo
             logoutParams: returnTo ? { returnTo } : undefined,
         });
     }, [persistToken, logoutReturnTo]);
+    const apiBaseUrl = useMemo(() => getSybilionApiOriginFromSdk(sdk), [sdk]);
     useEffect(() => {
         if (!auth0.isAuthenticated || !auth0.user?.sub) {
             persistToken(null);
@@ -88,7 +110,8 @@ function InnerSybilionSession({ children, apiBaseUrl, storageKey, logoutReturnTo
             setExchangeError(null);
             try {
                 const access = await auth0Ref.current.getAccessTokenSilently();
-                const jwt = await exchangeAuth0AccessTokenForSybilionJwt(apiBaseUrl, access);
+                const loginBody = await sdk.auth.loginWithAuth0Identity(access);
+                const jwt = sybilionJwtFromLoginResponse(loginBody);
                 if (cancelled)
                     return;
                 persistToken(jwt);
@@ -111,7 +134,7 @@ function InnerSybilionSession({ children, apiBaseUrl, storageKey, logoutReturnTo
             cancelled = true;
         };
     }, [
-        apiBaseUrl,
+        sdk,
         auth0.isAuthenticated,
         auth0.user?.sub,
         persistToken,
@@ -163,7 +186,7 @@ function InnerSybilionSession({ children, apiBaseUrl, storageKey, logoutReturnTo
     ]);
     return (jsx(SybilionAuthContext.Provider, { value: value, children: children }));
 }
-function SybilionAuthProvider({ children, apiBaseUrl, auth0Domain, auth0ClientId, redirectUri, authorizationParams, sybilionTokenStorageKey = DEFAULT_TOKEN_KEY, logoutReturnTo, }) {
+function SybilionAuthProvider({ children, sdk, auth0Domain, auth0ClientId, redirectUri, authorizationParams, sybilionTokenStorageKey = DEFAULT_TOKEN_KEY, logoutReturnTo, }) {
     const mergedAuthParams = useMemo(() => ({
         redirect_uri: authorizationParams?.redirect_uri ?? redirectUri,
         audience: authorizationParams?.audience ?? `https://${auth0Domain}/api/v2/`,
@@ -179,7 +202,7 @@ function SybilionAuthProvider({ children, apiBaseUrl, auth0Domain, auth0ClientId
     const cookieOpts = typeof window !== 'undefined'
         ? { cookieDomain: window.location.hostname }
         : {};
-    return (jsx(Auth0Provider, { domain: auth0Domain, clientId: auth0ClientId, authorizationParams: mergedAuthParams, cacheLocation: "localstorage", useRefreshTokens: true, ...cookieOpts, children: jsx(InnerSybilionSession, { apiBaseUrl: apiBaseUrl, storageKey: sybilionTokenStorageKey, logoutReturnTo: logoutReturnTo, children: children }) }));
+    return (jsx(Auth0Provider, { domain: auth0Domain, clientId: auth0ClientId, authorizationParams: mergedAuthParams, cacheLocation: "localstorage", useRefreshTokens: true, ...cookieOpts, children: jsx(InnerSybilionSession, { sdk: sdk, storageKey: sybilionTokenStorageKey, logoutReturnTo: logoutReturnTo, children: children }) }));
 }
 
-export { SybilionAuthProvider, createSybilionApiFetch, sybilionApiFetch, useSybilionApiFetch, useSybilionAuth };
+export { SybilionAuthProvider, createSybilionApiFetch, getSybilionApiOriginFromSdk, sybilionApiFetch, useSybilionApiFetch, useSybilionAuth };

package/dist/esm/sybilion-auth/exchangeSybilionToken.js

@@ -1,9 +1,13 @@
 import { normalizeApiBaseUrl, SYBILION_AUTH_LOGIN_PATH } from './authPaths.js';
 
+/** Default API segment before `/v1/...`; matches {@link createSybilionSDK} default `apiPrefix`. */
+const SYBILION_AUTH_API_PREFIX = '/api';
 /** POST `{ identity: auth0AccessToken, type: 'auth0' }` → Sybilion API JWT string. */
-async function exchangeAuth0AccessTokenForSybilionJwt(apiBaseUrl, auth0AccessToken) {
+async function exchangeAuth0AccessTokenForSybilionJwt(
+/** API origin only (no trailing slash), same as SDK `baseUrl`. */
+apiBaseUrl, auth0AccessToken) {
     const base = normalizeApiBaseUrl(apiBaseUrl);
-    const res = await fetch(`${base}${SYBILION_AUTH_LOGIN_PATH}`, {
+    const res = await fetch(`${base}${SYBILION_AUTH_API_PREFIX}${SYBILION_AUTH_LOGIN_PATH}`, {
         method: 'POST',
         headers: {
             Accept: 'application/json',

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

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

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

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+export type NavUserHeaderUser = {
+    name: string;
+    email: string;
+    /** Passed to avatar `Image` as `src`. */
+    avatar?: string;
+};
+export type NavUserHeaderProps = {
+    variant?: 'default' | 'compact';
+    isLoading?: boolean;
+    /** When false, signed-out branch is shown. Defaults to true when omitted. */
+    isAuthenticated?: boolean;
+    /** Present when authenticated: shown in trigger and dropdown label. */
+    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;
+    onSignInClick?: () => void;
+};

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

@@ -0,0 +1,2 @@
+export { NavUserHeader } from './NavUserHeader';
+export type { NavUserHeaderProps, NavUserHeaderUser, } from './NavUserHeader.types';

package/dist/esm/types/src/docs/pages/NavUserHeaderPage.d.ts

@@ -0,0 +1 @@
+export default function NavUserHeaderPage(): import("react/jsx-runtime").JSX.Element;

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

@@ -31,6 +31,7 @@ export * from './components/ui/LabelWithId';
 export * from './components/ui/LegacyPlatformLink';
 export * from './components/ui/Logo';
 export * from './components/ui/MobileAdaptiveSelector';
+export * from './components/ui/NavUserHeader';
 export * from './components/ui/NumberControl';
 export * from './components/ui/Page';
 export * from './components/ui/Progress';

package/dist/esm/types/src/sybilion-auth/SybilionAuthProvider.d.ts

@@ -1,8 +1,11 @@
 import { type RedirectLoginOptions } from '@auth0/auth0-react';
+import type { SybilionSDK } from '@sybilion/sdk';
 import type { JSX, ReactNode } from 'react';
+/** Origin (`scheme://host:port`) for paths like `/api/v1/...`; derived from SDK URL layout. */
+export declare function getSybilionApiOriginFromSdk(sdk: SybilionSDK): string;
 export type SybilionAuthProviderProps = {
     children: ReactNode;
-    apiBaseUrl: string;
+    sdk: SybilionSDK;
     auth0Domain: string;
     auth0ClientId: string;
     redirectUri: string;
@@ -36,4 +39,4 @@ export declare function sybilionApiFetch(apiBaseUrl: string, bearerToken: string
 export declare function createSybilionApiFetch(apiBaseUrl: string, getSybilionAccessToken: () => Promise<string | null>): (path: string, init?: RequestInit) => Promise<Response>;
 /** Authenticated fetch using {@link useSybilionAuth} context. */
 export declare function useSybilionApiFetch(): (path: string, init?: RequestInit) => Promise<Response>;
-export declare function SybilionAuthProvider({ children, apiBaseUrl, auth0Domain, auth0ClientId, redirectUri, authorizationParams, sybilionTokenStorageKey, logoutReturnTo, }: SybilionAuthProviderProps): JSX.Element;
+export declare function SybilionAuthProvider({ children, sdk, auth0Domain, auth0ClientId, redirectUri, authorizationParams, sybilionTokenStorageKey, logoutReturnTo, }: SybilionAuthProviderProps): JSX.Element;

package/dist/esm/types/src/sybilion-auth/exchangeSybilionToken.d.ts

@@ -1,2 +1,4 @@
 /** POST `{ identity: auth0AccessToken, type: 'auth0' }` → Sybilion API JWT string. */
-export declare function exchangeAuth0AccessTokenForSybilionJwt(apiBaseUrl: string, auth0AccessToken: string): Promise<string>;
+export declare function exchangeAuth0AccessTokenForSybilionJwt(
+/** API origin only (no trailing slash), same as SDK `baseUrl`. */
+apiBaseUrl: string, auth0AccessToken: string): Promise<string>;

package/dist/esm/types/src/sybilion-auth/index.d.ts

@@ -1,4 +1,4 @@
 export type { SybilionAuthProviderProps, SybilionAuthContextValue, } from '#uilib/sybilion-auth/SybilionAuthProvider';
-export { SybilionAuthProvider, useSybilionAuth, sybilionApiFetch, createSybilionApiFetch, useSybilionApiFetch, } from '#uilib/sybilion-auth/SybilionAuthProvider';
+export { SybilionAuthProvider, getSybilionApiOriginFromSdk, useSybilionAuth, sybilionApiFetch, createSybilionApiFetch, useSybilionApiFetch, } from '#uilib/sybilion-auth/SybilionAuthProvider';
 export { SYBILION_AUTH_LOGIN_PATH, normalizeApiBaseUrl, } from '#uilib/sybilion-auth/authPaths';
 export { exchangeAuth0AccessTokenForSybilionJwt } from '#uilib/sybilion-auth/exchangeSybilionToken';

package/docs/standalone-apps.md

@@ -1,13 +1,13 @@
 # Standalone Sybilion apps (@sybilion/uilib)
 
-Greenfield SPA on **your own origin**: `@sybilion/uilib` for layout/UI, `**SybilionAuthProvider`\*\* + Sybilion API for data—no iframe in the main client.
+Greenfield SPA on **your own origin**: `@sybilion/uilib` for layout/UI, **SybilionAuthProvider** + Sybilion API for data—no iframe in the main client.
 
-**Agents / humans:** Use `AppShell` + `AppShellMainContent`; stick to uilib spacing primitives (no random root horizontal gutters).
+**Agents / humans:** Use `AppShell` + `AppShellMainContent`; stick to uilib spacing primitives (e.g. `Gap`) instead of ad hoc root horizontal gutters.
 
 ## 1. Dependencies and global CSS
 
 ```bash
-yarn add react react-dom react-router-dom @auth0/auth0-react @sybilion/uilib
+yarn add react react-dom react-router-dom @auth0/auth0-react @sybilion/uilib @sybilion/sdk
 ```
 
 Import tokens/fonts once:
@@ -18,32 +18,122 @@ import '@sybilion/uilib/standalone-global.css';
 
 ## 2. Layout (AppShell)
 
-Pattern: `[src/docs/DocsShell.tsx](https://github.com/Mir-Insight/uilib/blob/main/src/docs/DocsShell.tsx)` — `PageScroll` → `AppShell` → sidebar → `AppShellMainContent` with `AppHeaderHost`, `PageFooter`, main content (`Outlet` / routes). Add `Theme` and optional `SidebarProvider` from `@homecode/ui`.
+### Minimal example
+
+`AppHeaderHost` is the empty header bar; put triggers and `NavUserHeader` (a.k.a. the user / account menu) inside `AppHeaderPortal` so they render in that bar.
+
+```tsx
+import type { ReactNode } from 'react';
+
+import {
+  AppHeaderHost,
+  AppHeaderPortal,
+  AppShell,
+  AppShellMainContent,
+  Gap,
+  NavUserHeader,
+  PageFooter,
+  PageScroll,
+} from '@sybilion/uilib';
+
+export function AppLayout({ children }: { children: ReactNode }) {
+  return (
+    <PageScroll>
+      <AppShell>
+        {/* Optional: sidebar as a sibling before main, e.g. <Sidebar … /> */}
+        <AppShellMainContent
+          header={<AppHeaderHost />}
+          footer={<PageFooter versionLink="/releases" versionLabel="0.0.0" />}
+        >
+          <AppHeaderPortal>
+            <Gap />
+            <NavUserHeader
+              theme="light"
+              onThemeToggle={() => undefined}
+              onLogout={() => undefined}
+              isAuthenticated={false}
+            />
+          </AppHeaderPortal>
+          {children}
+        </AppShellMainContent>
+      </AppShell>
+    </PageScroll>
+  );
+}
+```
+
+Wire `NavUserHeader` to real auth (`useSybilionAuth`, theme context, etc.). Demo page in repo: `src/docs/pages/NavUserHeaderPage.tsx` (slug `nav-user-header`).
+
+### Full pattern
+
+Reference: `[src/docs/DocsShell.tsx](https://github.com/Mir-Insight/uilib/blob/main/src/docs/DocsShell.tsx)` — `PageScroll` → `AppShell` → sidebar → `AppShellMainContent` with `AppHeaderHost`, `PageFooter`, and routed body (`Outlet`). Add `Theme` and optional `SidebarProvider` from `@homecode/ui`.
+
+### Glossary (high-use pieces)
+
+| Component / API                             | What it is for                                                                                                    |
+| ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
+| `**PageScroll**`                            | Page-level vertical scroll wrapper; usual outer shell for the app body.                                           |
+| `**AppShell**`                              | Layout grid container; typically holds a sidebar (optional) + main column.                                        |
+| `**AppShellMainContent**`                   | Main column with slots: `header`, scrollable body (`children`), `footer`.                                         |
+| `**AppHeaderHost**`                         | Renders the top header anchor (DOM id `page-header`); stays empty on purpose.                                     |
+| `**AppHeaderPortal**`                       | Portals children into `AppHeaderHost` — put header actions, `NavUserHeader`, theme toggle here.                   |
+| `**NavUserHeader**`                         | Header user menu: avatar, account dropdown, theme row, logout; **not** a bare `DropdownMenu`.                     |
+| `**Sidebar`\*\*                             | Collapsible app sidebar / nav rail (pair with `SidebarProvider` from `@homecode/ui` when needed).                 |
+| `**PageFooter**`                            | Standard app footer (logo, links, version badge). Requires `versionLink` + `versionLabel`.                        |
+| `**Gap**`                                   | Horizontal or vertical spacing primitive between flex children (prefer over raw margins).                         |
+| `**SybilionAuthProvider**`                  | Auth0 + Sybilion JWT bootstrap for the whole app (see §3).                                                        |
+| `**useSybilionAuth**`                       | Current user, tokens, login/logout inside the provider tree.                                                      |
+| `**useSybilionApiFetch**`                   | Authenticated `fetch` to the Sybilion API using the stored JWT.                                                   |
+| `**Breadcrumb**`, `**BreadcrumbList`, …\*\* | Accessible breadcrumb trail for the page header (compose `BreadcrumbItem` / `BreadcrumbLink` / `BreadcrumbPage`). |
+| `**Button`**, `**Card\*\*`                  | Primary actions and grouped content blocks—default building blocks for screens inside the layout body.            |
 
 ## 3. Auth (`SybilionAuthProvider`)
 
 Use inside `BrowserRouter` if redirects hit a callback route.
 
-Env vars depend on bundler—for **Vite** only `import.meta.env.VITE_`\* is exposed client-side:
+Env vars depend on bundler—for **Vite** only `import.meta.env.VITE_` is exposed client-side:
 
 ```tsx
-import { SybilionAuthProvider } from '@sybilion/uilib';
+import { useMemo, type ReactNode } from 'react';
 
-const apiBaseUrl = import.meta.env.VITE_SYBILION_API_BASE_URL as string;
-const auth0Domain = import.meta.env.VITE_AUTH0_DOMAIN as string;
-const auth0ClientId = import.meta.env.VITE_AUTH0_CLIENT_ID as string;
-
-<SybilionAuthProvider
-  apiBaseUrl={apiBaseUrl}
-  auth0Domain={auth0Domain}
-  auth0ClientId={auth0ClientId}
-  redirectUri={window.location.origin}
->
-  <App />
-</SybilionAuthProvider>;
+import { SybilionAuthProvider } from '@sybilion/uilib';
+import { createSybilionSDK } from '@sybilion/sdk';
+
+const sybilionJwtKey = 'sybilion.standalone.jwt';
+
+export function AppProviders({ children }: { children: ReactNode }) {
+  const apiBaseUrl = import.meta.env.VITE_SYBILION_API_BASE_URL as string;
+  const auth0Domain = import.meta.env.VITE_AUTH0_DOMAIN as string;
+  const auth0ClientId = import.meta.env.VITE_AUTH0_CLIENT_ID as string;
+
+  const sdk = useMemo(
+    () =>
+      createSybilionSDK({
+        baseUrl: apiBaseUrl,
+        apiPrefix: '/api',
+        getToken: () =>
+          typeof localStorage !== 'undefined'
+            ? localStorage.getItem(sybilionJwtKey) ?? undefined
+            : undefined,
+      }),
+    [apiBaseUrl],
+  );
+
+  return (
+    <SybilionAuthProvider
+      sdk={sdk}
+      sybilionTokenStorageKey={sybilionJwtKey}
+      auth0Domain={auth0Domain}
+      auth0ClientId={auth0ClientId}
+      redirectUri={window.location.origin}
+    >
+      {children}
+    </SybilionAuthProvider>
+  );
+}
 ```
 
-**Flow:** Auth0 SPA → `POST {apiBaseUrl}/v1/auth/login` with `{ identity: "<Auth0 AT>", type: "auth0" }` → Sybilion JWT in response (`data.token` or `token`) → Bearer on API calls.
+**Flow:** Auth0 SPA → `sdk.auth.loginWithAuth0Identity(<Auth0 AT>)` → Sybilion JWT (`data.token` / `token`) persisted → same `sdk` + `getToken` supply Bearer on API calls; `useSybilionApiFetch()` uses `getSybilionApiOriginFromSdk(sdk)` for URLs (paths like `/api/v1/...`).
 
 **Defaults** for `authorizationParams` match sybilion-client (Management audience + `openid profile email offline_access …`); override if your Auth0 SPA needs a Resource Server audience (backend confirms).
 
@@ -51,13 +141,39 @@ const auth0ClientId = import.meta.env.VITE_AUTH0_CLIENT_ID as string;
 | ---------------- | ------------------------------------------------------------------------------------- |
 | **Auth0**        | Callback, logout, and web origins → your URLs (+ previews).                           |
 | **Sybilion API** | CORS → your deploy `Origin`.                                                          |
-| **App**          | `apiBaseUrl`, Auth0 `domain` / `clientId`, redirect usually `window.location.origin`. |
+| **App**          | `createSybilionSDK` (`baseUrl`, `apiPrefix`), pass **`sdk`** to `SybilionAuthProvider`; align `sybilionTokenStorageKey` with `getToken`; Auth0 `domain` / `clientId`; redirect usually `window.location.origin`. |
 
 **Hooks:** `useSybilionAuth()`, `useSybilionApiFetch()` (or `createSybilionApiFetch` / `sybilionApiFetch` helpers).
 
 ## 4. Data
 
-Fetch Sybilion API with the JWT above—no host `postMessage` bridge.
+Fetch the Sybilion API with the JWT above (e.g. via `useSybilionApiFetch`).
+
+### `@sybilion/sdk`
+
+Install the typed client alongside uilib:
+
+```bash
+yarn add @sybilion/sdk
+```
+
+Configure **`createSybilionSDK`** with the same instance you pass to **`SybilionAuthProvider`** (`sdk` prop). Use **`baseUrl`**: API origin only (no trailing slash), default **`apiPrefix: '/api'`** so requests hit `{baseUrl}/api/v1/...`. **`getToken`** should read the same storage key as **`sybilionTokenStorageKey`** on the provider (default `sybilion.standalone.jwt`).
+
+```ts
+import { createSybilionSDK } from '@sybilion/sdk';
+
+const sdk = createSybilionSDK({
+  baseUrl: apiBaseUrl,
+  apiPrefix: '/api',
+  getToken: () => localStorage.getItem('sybilion.standalone.jwt') ?? undefined,
+});
+```
+
+- **`sdk.auth`** — `loginWithAuth0Identity`, `getMe`, `updateMe` (Auth0 bootstrap + user profile).
+- **`sdk.raw`** — thin `GET`/`POST`/… wrappers for `/v1/...` paths (e.g. `raw.analyses.driversMapOnce`; returns parsed JSON, no app-specific shaping).
+- **`sdk.resources`** — higher-level helpers (datasets, drivers, subscriptions) that compose `raw` calls with parsing where applicable.
+
+See the package README: [`@sybilion/sdk`](https://www.npmjs.com/package/@sybilion/sdk) — in this monorepo, [`../../sdk/README.md`](../../sdk/README.md).
 
 ## Related
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",
@@ -106,6 +106,7 @@
   },
   "peerDependencies": {
     "@auth0/auth0-react": "^2.3.1",
+    "@sybilion/sdk": ">=0.0.1",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-router-dom": ">=6.0.0"
@@ -113,10 +114,14 @@
   "peerDependenciesMeta": {
     "@auth0/auth0-react": {
       "optional": true
+    },
+    "@sybilion/sdk": {
+      "optional": true
     }
   },
   "devDependencies": {
     "@auth0/auth0-react": "^2.3.1",
+    "@sybilion/sdk": "file:../sdk",
     "@babel/core": "^7.20.12",
     "@babel/preset-typescript": "^7.21.0",
     "@homecode/ui": "^4.30.6",

package/src/components/ui/Image/Image.styl

@@ -3,6 +3,7 @@
   display inline-block
   width 100%
   height 100%
+  background-color var(--muted-50)
 
 .image
   display block

package/src/components/ui/NavUserHeader/NavUserHeader.styl

@@ -0,0 +1,125 @@
+.loadingButton
+  gap 0.5rem
+
+.avatarSkeleton
+  height 2rem
+  width 2rem
+  border-radius 9999px
+  background-color var(--color-muted)
+  animation pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
+
+.textSkeleton
+  height 1rem
+  width 5rem
+  border-radius 0.25rem
+  background-color var(--color-muted)
+  animation pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
+
+.loginButton
+  gap 0.5rem
+
+.iconLg
+  height 1.25rem
+  width 1.25rem
+
+.iconSm
+  height 0.75rem
+  width 0.75rem
+
+.menuIcon
+  margin-right 0.5rem
+  height 1rem
+  width 1rem
+
+.dropdownContent
+  width 14rem
+
+.userButton
+  gap 0.5rem
+  height 52px
+  padding var(--p-2)
+
+  &.compact
+    padding 0
+    background-color transparent !important
+    transition transform 0.2s ease-in-out
+
+    &:hover
+      transform scale(1.1)
+
+.avatar
+  height 2rem
+  width 2rem
+
+.avatarImage
+  width 100%
+  height 100%
+  object-fit cover
+  border-radius inherit
+
+.avatarFallback
+  background-color var(--color-primary)
+  color var(--color-primary-foreground)
+  background url('./avatar.svg') no-repeat center center
+  width 100%
+  height 100%
+  border-radius inherit
+
+.userInfo
+  display flex
+  flex-direction column
+  align-items flex-start
+  text-align left
+  gap 0.25rem
+
+.userName
+  font-size var(--text-sm)
+  font-weight 400
+  line-height 1
+  text-overflow ellipsis
+  overflow hidden
+  white-space nowrap
+  max-width 7.5rem
+
+.userEmail
+  font-size var(--text-xs)
+  color var(--sb-slate-500)
+  line-height 1
+
+.userLabel
+  padding 0
+  font-weight normal
+
+.userLabelContent
+  display flex
+  align-items center
+  gap 0.5rem
+  padding 0.5rem
+  text-align left
+  font-size 0.875rem
+
+.userDetails
+  display grid
+  flex 1
+  text-align left
+  font-size 0.875rem
+  line-height 1.25
+
+.userDetailName
+  text-overflow ellipsis
+  overflow hidden
+  white-space nowrap
+  font-weight 500
+
+.userDetailEmail
+  color var(--color-muted-foreground)
+  text-overflow ellipsis
+  overflow hidden
+  white-space nowrap
+  font-size 0.75rem
+
+@keyframes pulse
+  0%, 100%
+    opacity 1
+  50%
+    opacity 0.5

package/src/components/ui/NavUserHeader/NavUserHeader.styl.d.ts

@@ -0,0 +1,28 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'avatar': string;
+  'avatarFallback': string;
+  'avatarImage': string;
+  'avatarSkeleton': string;
+  'compact': string;
+  'dropdownContent': string;
+  'iconLg': string;
+  'iconSm': string;
+  'loadingButton': string;
+  'loginButton': string;
+  'menuIcon': string;
+  'pulse': string;
+  'textSkeleton': string;
+  'userButton': string;
+  'userDetailEmail': string;
+  'userDetailName': string;
+  'userDetails': string;
+  'userEmail': string;
+  'userInfo': string;
+  'userLabel': string;
+  'userLabelContent': string;
+  'userName': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

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

@@ -0,0 +1,148 @@
+import cn from 'classnames';
+
+import {
+  MoonIcon,
+  SignOutIcon,
+  SunIcon,
+  UserCircleIcon,
+} from '@phosphor-icons/react';
+import { ChevronDownIcon } from 'lucide-react';
+
+import { Avatar } from '../Avatar';
+import { Button } from '../Button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../DropdownMenu';
+import { Image } from '../Image';
+import S from './NavUserHeader.styl';
+import type { NavUserHeaderProps } from './NavUserHeader.types';
+
+export function NavUserHeader({
+  variant = 'default',
+  isLoading = false,
+  isAuthenticated,
+  user = null,
+  menuItems,
+  theme,
+  onThemeToggle,
+  onLogout,
+  signInSlot,
+  onSignInClick,
+}: NavUserHeaderProps) {
+  const authenticated = isAuthenticated ?? true;
+
+  const avatarUrl = user?.avatar ?? '';
+  const userName = user?.name ?? '';
+  const userEmail = user?.email ?? '';
+
+  if (isLoading) {
+    return (
+      <Button variant="ghost" size="sm" disabled className={S.loadingButton}>
+        <div className={S.avatarSkeleton} />
+        <div className={S.textSkeleton} />
+      </Button>
+    );
+  }
+
+  if (!authenticated) {
+    if (signInSlot) {
+      return signInSlot;
+    }
+    return (
+      <Button
+        variant="ghost"
+        size="sm"
+        className={S.loginButton}
+        type="button"
+        onClick={onSignInClick}
+      >
+        <UserCircleIcon className={S.iconLg} />
+        <span>Log in</span>
+      </Button>
+    );
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className={cn(S.userButton, variant === 'compact' && S.compact)}
+        >
+          <Avatar className={S.avatar}>
+            <Image
+              url={avatarUrl}
+              alt={userName}
+              fallback={<div className={S.avatarFallback} />}
+            />
+          </Avatar>
+          {variant === 'default' && (
+            <>
+              <div className={S.userInfo}>
+                <span className={`${S.userName} ph-no-capture`}>
+                  {userName}
+                </span>
+                <span className={S.userEmail}>{userEmail}</span>
+              </div>
+              <ChevronDownIcon className={S.iconSm} />
+            </>
+          )}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        className={S.dropdownContent}
+        align="end"
+        elevation="md"
+      >
+        <DropdownMenuLabel className={S.userLabel}>
+          <div className={S.userLabelContent}>
+            <Avatar className={S.avatar}>
+              <Image
+                url={avatarUrl}
+                alt={userName}
+                fallback={<div className={S.avatarFallback} />}
+              />
+            </Avatar>
+            <div className={S.userDetails}>
+              <span className={`${S.userDetailName} ph-no-capture`}>
+                {userName}
+              </span>
+              <span className={S.userDetailEmail}>{userEmail}</span>
+            </div>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          {menuItems}
+          {onThemeToggle ? (
+            <DropdownMenuItem onSelect={() => onThemeToggle()}>
+              {theme === 'dark' ? (
+                <>
+                  <SunIcon />
+                  Light theme
+                </>
+              ) : (
+                <>
+                  <MoonIcon />
+                  Dark theme
+                </>
+              )}
+            </DropdownMenuItem>
+          ) : null}
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem variant="destructive" onSelect={() => onLogout()}>
+          <SignOutIcon />
+          Log out
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

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

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+
+export type NavUserHeaderUser = {
+  name: string;
+  email: string;
+  /** Passed to avatar `Image` as `src`. */
+  avatar?: string;
+};
+
+export type NavUserHeaderProps = {
+  variant?: 'default' | 'compact';
+  isLoading?: boolean;
+  /** When false, signed-out branch is shown. Defaults to true when omitted. */
+  isAuthenticated?: boolean;
+  /** Present when authenticated: shown in trigger and dropdown label. */
+  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;
+  onSignInClick?: () => void;
+};

package/src/components/ui/NavUserHeader/avatar.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none">
+	<path fill="#ECFEFF" d="M0 16C0 7.163 7.163 0 16 0s16 7.163 16 16-7.163 16-16 16S0 24.837 0 16" />
+	<path fill="#22D3EE" fill-rule="evenodd" d="M17.4 9.454h-2.8V8h2.8zm1.4 1.455V9.454h-1.4v1.455zm0 2.91v-2.91h1.4v2.91zm-1.4 1.454v-1.455h1.4v1.455zm-2.8 0h2.8v1.454h-2.8zm-1.4-1.455v1.455h1.4v-1.455zm0-2.91v2.91h-1.4v-2.91zm0 0h1.4V9.455h-1.4zm6.3 11.638h-7V21.09h-2.1v-1.455h1.4v-1.454h2.1v-1.454h-2.1v1.454h-1.4v1.454H9v1.455h1.4v1.455h2.1V24h7zm2.1-1.455v1.455h-2.1V21.09zm0-1.455H23v1.455h-1.4zm-1.4-1.454v1.454h1.4v-1.454zm0 0h-2.1v-1.454h2.1z" clip-rule="evenodd" />
+</svg>

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

@@ -0,0 +1,5 @@
+export { NavUserHeader } from './NavUserHeader';
+export type {
+  NavUserHeaderProps,
+  NavUserHeaderUser,
+} from './NavUserHeader.types';

package/src/docs/pages/NavUserHeaderPage.tsx

@@ -0,0 +1,89 @@
+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';
+import { GearSixIcon, UserCircleIcon } from '@phosphor-icons/react';
+
+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>
+        <UserCircleIcon />
+        Account (custom)
+      </DropdownMenuItem>
+      <DropdownMenuItem>
+        <GearSixIcon />
+        Settings (custom)
+      </DropdownMenuItem>
+    </>
+  );
+
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'NavUserHeader' }]}
+        title="NavUserHeader"
+        subheader="User menu with label, custom rows, theme toggle, and logout."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection
+        style={{ display: 'flex', flexWrap: 'wrap', gap: '2rem' }}
+      >
+        <div>
+          <p style={{ marginBottom: 8, fontSize: 12 }}>
+            Signed in · default variant
+          </p>
+          <NavUserHeader
+            user={{
+              name: 'Demo Analyst',
+              email: 'demo@sybilion.io',
+              avatar: '',
+            }}
+            theme={theme}
+            onThemeToggle={onThemeToggle}
+            onLogout={() => {
+              console.info('[docs] logout');
+            }}
+            menuItems={customMenuItems}
+          />
+        </div>
+        <div>
+          <p style={{ marginBottom: 8, fontSize: 12 }}>
+            Signed in · compact variant
+          </p>
+          <NavUserHeader
+            variant="compact"
+            user={{
+              name: 'Compact',
+              email: 'compact@sybilion.io',
+              avatar: '',
+            }}
+            theme={theme}
+            onThemeToggle={onThemeToggle}
+            onLogout={() => {
+              console.info('[docs] logout compact');
+            }}
+            menuItems={customMenuItems}
+          />
+        </div>
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/SybilionAuthProviderPage.tsx

@@ -9,7 +9,7 @@ export default function SybilionAuthProviderPage() {
       <AppPageHeader
         breadcrumbs={[{ label: 'SybilionAuthProvider' }]}
         title="SybilionAuthProvider"
-        subheader="Auth0 SPA → POST /v1/auth/login → Sybilion JWT. Greenfield installs: docs/standalone-apps.md (yarn add line includes @auth0/auth0-react)."
+        subheader="Auth0 SPA → sdk.auth.loginWithAuth0Identity → Sybilion JWT. Pass createSybilionSDK instance via sdk prop; greenfield: docs/standalone-apps.md (yarn add includes @sybilion/sdk, @auth0/auth0-react)."
         actions={<DocsHeaderActions />}
       />
       <PageContentSection title="Exports">
@@ -18,7 +18,10 @@ export default function SybilionAuthProviderPage() {
         </p>
         <ul>
           <li>
-            <code>SybilionAuthProvider</code>
+            <code>SybilionAuthProvider</code> (<code>sdk</code> prop)
+          </li>
+          <li>
+            <code>getSybilionApiOriginFromSdk</code>
           </li>
           <li>
             <code>useSybilionAuth</code>

package/src/docs/registry.ts

@@ -66,6 +66,12 @@ export const DOC_REGISTRY: DocEntry[] = [
     section: 'Navigation',
     load: () => import('./pages/BreadcrumbPage'),
   },
+  {
+    slug: 'nav-user-header',
+    title: 'NavUserHeader',
+    section: 'Navigation',
+    load: () => import('./pages/NavUserHeaderPage'),
+  },
   {
     slug: 'card',
     title: 'Card',

package/src/index.ts

@@ -31,6 +31,7 @@ export * from './components/ui/LabelWithId';
 export * from './components/ui/LegacyPlatformLink';
 export * from './components/ui/Logo';
 export * from './components/ui/MobileAdaptiveSelector';
+export * from './components/ui/NavUserHeader';
 export * from './components/ui/NumberControl';
 export * from './components/ui/Page';
 export * from './components/ui/Progress';

package/src/sybilion-auth/SybilionAuthProvider.tsx

@@ -3,6 +3,7 @@ import {
   type RedirectLoginOptions,
   useAuth0,
 } from '@auth0/auth0-react';
+import type { LoginTokenResponse, SybilionSDK } from '@sybilion/sdk';
 import type { JSX, ReactNode } from 'react';
 import {
   createContext,
@@ -15,13 +16,34 @@ import {
 } from 'react';
 
 import { normalizeApiBaseUrl } from '#uilib/sybilion-auth/authPaths';
-import { exchangeAuth0AccessTokenForSybilionJwt } from '#uilib/sybilion-auth/exchangeSybilionToken';
 
 const DEFAULT_TOKEN_KEY = 'sybilion.standalone.jwt';
 
+function sybilionJwtFromLoginResponse(body: LoginTokenResponse): string {
+  const t = body.data?.token ?? body.token;
+  if (!t) throw new Error('Sybilion auth: missing token in login response');
+  return t;
+}
+
+/** Origin (`scheme://host:port`) for paths like `/api/v1/...`; derived from SDK URL layout. */
+export function getSybilionApiOriginFromSdk(sdk: SybilionSDK): string {
+  const loginUrl = sdk.http.buildUrl('/v1/auth/login');
+  try {
+    const baseHref =
+      typeof window !== 'undefined' && window.location?.href
+        ? window.location.href
+        : 'http://localhost/';
+    const u = new URL(loginUrl, baseHref);
+    if (!u.pathname.endsWith('/v1/auth/login')) return '';
+    return u.origin;
+  } catch {
+    return '';
+  }
+}
+
 export type SybilionAuthProviderProps = {
   children: ReactNode;
-  apiBaseUrl: string;
+  sdk: SybilionSDK;
   auth0Domain: string;
   auth0ClientId: string;
   redirectUri: string;
@@ -119,12 +141,12 @@ function writeLs(key: string, value: string | null): void {
 
 function InnerSybilionSession({
   children,
-  apiBaseUrl,
+  sdk,
   storageKey,
   logoutReturnTo,
 }: {
   children: ReactNode;
-  apiBaseUrl: string;
+  sdk: SybilionSDK;
   storageKey: string;
   logoutReturnTo?: string;
 }): JSX.Element {
@@ -155,6 +177,8 @@ function InnerSybilionSession({
     });
   }, [persistToken, logoutReturnTo]);
 
+  const apiBaseUrl = useMemo(() => getSybilionApiOriginFromSdk(sdk), [sdk]);
+
   useEffect(() => {
     if (!auth0.isAuthenticated || !auth0.user?.sub) {
       persistToken(null);
@@ -174,10 +198,8 @@ function InnerSybilionSession({
       setExchangeError(null);
       try {
         const access = await auth0Ref.current.getAccessTokenSilently();
-        const jwt = await exchangeAuth0AccessTokenForSybilionJwt(
-          apiBaseUrl,
-          access,
-        );
+        const loginBody = await sdk.auth.loginWithAuth0Identity(access);
+        const jwt = sybilionJwtFromLoginResponse(loginBody);
         if (cancelled) return;
         persistToken(jwt);
       } catch (e) {
@@ -198,7 +220,7 @@ function InnerSybilionSession({
       cancelled = true;
     };
   }, [
-    apiBaseUrl,
+    sdk,
     auth0.isAuthenticated,
     auth0.user?.sub,
     persistToken,
@@ -270,7 +292,7 @@ function InnerSybilionSession({
 
 export function SybilionAuthProvider({
   children,
-  apiBaseUrl,
+  sdk,
   auth0Domain,
   auth0ClientId,
   redirectUri,
@@ -311,7 +333,7 @@ export function SybilionAuthProvider({
       {...cookieOpts}
     >
       <InnerSybilionSession
-        apiBaseUrl={apiBaseUrl}
+        sdk={sdk}
         storageKey={sybilionTokenStorageKey}
         logoutReturnTo={logoutReturnTo}
       >

package/src/sybilion-auth/exchangeSybilionToken.ts

@@ -3,13 +3,17 @@ import {
   normalizeApiBaseUrl,
 } from '#uilib/sybilion-auth/authPaths';
 
+/** Default API segment before `/v1/...`; matches {@link createSybilionSDK} default `apiPrefix`. */
+const SYBILION_AUTH_API_PREFIX = '/api';
+
 /** POST `{ identity: auth0AccessToken, type: 'auth0' }` → Sybilion API JWT string. */
 export async function exchangeAuth0AccessTokenForSybilionJwt(
+  /** API origin only (no trailing slash), same as SDK `baseUrl`. */
   apiBaseUrl: string,
   auth0AccessToken: string,
 ): Promise<string> {
   const base = normalizeApiBaseUrl(apiBaseUrl);
-  const res = await fetch(`${base}${SYBILION_AUTH_LOGIN_PATH}`, {
+  const res = await fetch(`${base}${SYBILION_AUTH_API_PREFIX}${SYBILION_AUTH_LOGIN_PATH}`, {
     method: 'POST',
     headers: {
       Accept: 'application/json',

package/src/sybilion-auth/index.ts

@@ -4,6 +4,7 @@ export type {
 } from '#uilib/sybilion-auth/SybilionAuthProvider';
 export {
   SybilionAuthProvider,
+  getSybilionApiOriginFromSdk,
   useSybilionAuth,
   sybilionApiFetch,
   createSybilionApiFetch,