@sybilion/uilib 1.2.0 → 1.2.3

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

@@ -8,11 +8,11 @@ import { PAGE_HEADER_ID } from './appChromeAnchors.js';
 function AppHeaderHost({ className, anchorId = PAGE_HEADER_ID, }) {
     return jsx("header", { className: cn(S.root, className), id: anchorId });
 }
-function AppHeaderPortal({ children }) {
+function AppHeaderPortal({ children, pageHeaderId = PAGE_HEADER_ID, }) {
     const [container, setContainer] = useState(null);
     useLayoutEffect(() => {
-        setContainer(document.getElementById(PAGE_HEADER_ID));
-    }, []);
+        setContainer(document.getElementById(pageHeaderId));
+    }, [pageHeaderId]);
     if (!container) {
         return null;
     }

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/components/ui/Page/AppShell/AppShell.styl.js

@@ -1,6 +1,6 @@
 import styleInject from 'style-inject';
 
-var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.AppShell_root__ONlNK{display:grid;flex:1;grid-template-areas:\"main\";grid-template-columns:1fr;min-height:0;width:100%}@media (min-width:768px){.AppShell_root__ONlNK{grid-template-areas:\"sidebar main\";grid-template-columns:var(--sidebar-width) 1fr}[data-slot=sidebar-wrapper][data-state=collapsed] .AppShell_root__ONlNK{grid-template-columns:0 1fr}}.AppShell_mainColumn__Emn1p{display:flex;flex:1;flex-direction:column;grid-area:main;min-height:0;min-width:0}[data-slot=sidebar-wrapper][data-state=collapsed] .AppShell_mainColumn__Emn1p{margin-left:var(--p-3)}.AppShell_mainBody__IoVuy{background-color:var(--page-color);border-radius:var(--p-4);flex:1;min-width:0;padding-bottom:var(--page-y-padding)}";
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.AppShell_root__ONlNK{display:grid;flex:1;grid-template-areas:\"main\";grid-template-columns:1fr;min-height:0;min-height:100%;width:100%}@media (min-width:768px){.AppShell_root__ONlNK{grid-template-areas:\"sidebar main\";grid-template-columns:var(--sidebar-width) 1fr}[data-slot=sidebar-wrapper][data-state=collapsed] .AppShell_root__ONlNK{grid-template-columns:0 1fr}}.AppShell_mainColumn__Emn1p{display:flex;flex:1;flex-direction:column;grid-area:main;min-height:0;min-width:0}[data-slot=sidebar-wrapper][data-state=collapsed] .AppShell_mainColumn__Emn1p{margin-left:var(--p-3)}.AppShell_mainBody__IoVuy{background-color:var(--page-color);border-radius:var(--p-4);flex:1;min-width:0;padding-bottom:var(--page-y-padding)}";
 var S = {"root":"AppShell_root__ONlNK","mainColumn":"AppShell_mainColumn__Emn1p","mainBody":"AppShell_mainBody__IoVuy"};
 styleInject(css_248z);
 

package/dist/esm/components/ui/Page/PageScroll/PageScroll.js

@@ -6,7 +6,7 @@ import { PageContext } from '../pageContext.js';
 import { Scroll } from '@homecode/ui';
 import S from './PageScroll.styl.js';
 
-function PageScrollInner({ className, children, }) {
+function PageScrollInner({ className, rootClassName, children, }) {
     // const { setIsScrolled } = useContext(PageContext);
     // const prevScrollTop = useRef(0);
     const location = useLocation();
@@ -25,13 +25,13 @@ function PageScrollInner({ className, children, }) {
     // };
     return (jsx(Scroll, { y: true, 
         // fadeSize="l"
-        offset: { y: { before: 120, after: 130 } }, className: S.root, autoHide: true, innerClassName: cn(S.inner, className), yScrollbarClassName: S.scrollbar, onInnerRef: el => {
+        offset: { y: { before: 120, after: 130 } }, className: cn(S.root, rootClassName), autoHide: true, innerClassName: cn(S.inner, className), yScrollbarClassName: S.scrollbar, onInnerRef: el => {
             scrollInnerRef.current = el;
         }, children: children }));
 }
-const PageScroll = ({ children, className, }) => {
+const PageScroll = ({ children, className, rootClassName, }) => {
     const [isScrolled, setIsScrolled] = useState(false);
-    return (jsx(PageContext.Provider, { value: { isScrolled, setIsScrolled }, children: jsx(PageScrollInner, { className: className, children: children }) }));
+    return (jsx(PageContext.Provider, { value: { isScrolled, setIsScrolled }, children: jsx(PageScrollInner, { className: className, rootClassName: rootClassName, children: children }) }));
 };
 
 export { PageScroll };

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

@@ -6,7 +6,7 @@ import { PackageOpen, ChevronDown, ChevronRight } from 'lucide-react';
 import S from './SidebarDatasetsItemsGrouped.styl.js';
 import { groupSidebarDatasets } from './groupSidebarDatasets.js';
 
-function SidebarDatasetsItemsGrouped({ groupBy, datasets, selectedDatasetId, onDatasetClick, defaultExpandedGroupNames, className, }) {
+function SidebarDatasetsItemsGrouped({ groupBy, datasets, preItems, postItems, selectedDatasetId, onDatasetClick, defaultExpandedGroupNames, className, }) {
     const grouped = useMemo(() => groupSidebarDatasets(datasets, groupBy), [datasets, groupBy]);
     const [expanded, setExpanded] = useState(new Set());
     useEffect(() => {
@@ -35,14 +35,14 @@ function SidebarDatasetsItemsGrouped({ groupBy, datasets, selectedDatasetId, onD
             return next;
         });
     };
-    return (jsx(SidebarGroup, { className: className, children: jsx(SidebarMenu, { children: grouped.map(([groupName, groupDatasets]) => {
-                const isExpanded = expanded.has(groupName);
-                const parentActive = groupDatasets.some(d => d.id === selectedDatasetId);
-                return (jsxs(SidebarMenuItem, { children: [jsxs(SidebarMenuButton, { type: "button", isActive: parentActive, onClick: () => toggleGroup(groupName), children: [jsx(PackageOpen, { strokeWidth: 1.5, size: 16 }), jsx(SmartTextTruncate, { children: groupName }), jsx("div", { className: S.chevronContainer, children: isExpanded ? (jsx(ChevronDown, { size: 12 })) : (jsx(ChevronRight, { size: 12 })) })] }), isExpanded && (jsxs(SidebarMenuSub, { className: S.subMenuContainer, children: [jsx("div", { className: S.subMenuBorder }), groupDatasets.map(dataset => (jsx(SidebarMenuSubItem, { className: S.subMenuItem, children: jsx(SidebarMenuSubButton, { href: `#dataset-${dataset.id}`, isActive: dataset.id === selectedDatasetId, onClick: e => {
-                                            e.preventDefault();
-                                            onDatasetClick?.(dataset.id);
-                                        }, children: jsx(SmartTextTruncate, { children: dataset.name }) }) }, dataset.id)))] }))] }, groupName));
-            }) }) }));
+    return (jsx(SidebarGroup, { className: className, children: jsxs(SidebarMenu, { children: [preItems, grouped.map(([groupName, groupDatasets]) => {
+                    const isExpanded = expanded.has(groupName);
+                    const parentActive = groupDatasets.some(d => d.id === selectedDatasetId);
+                    return (jsxs(SidebarMenuItem, { children: [jsxs(SidebarMenuButton, { type: "button", isActive: parentActive, onClick: () => toggleGroup(groupName), children: [jsx(PackageOpen, { strokeWidth: 1.5, size: 16 }), jsx(SmartTextTruncate, { children: groupName }), jsx("div", { className: S.chevronContainer, children: isExpanded ? (jsx(ChevronDown, { size: 12 })) : (jsx(ChevronRight, { size: 12 })) })] }), isExpanded && (jsxs(SidebarMenuSub, { className: S.subMenuContainer, children: [jsx("div", { className: S.subMenuBorder }), groupDatasets.map(dataset => (jsx(SidebarMenuSubItem, { className: S.subMenuItem, children: jsx(SidebarMenuSubButton, { href: `#dataset-${dataset.id}`, isActive: dataset.id === selectedDatasetId, onClick: e => {
+                                                e.preventDefault();
+                                                onDatasetClick?.(dataset.id);
+                                            }, children: jsx(SmartTextTruncate, { children: dataset.name }) }) }, dataset.id)))] }))] }, groupName));
+                }), postItems] }) }));
 }
 
 export { SidebarDatasetsItemsGrouped };

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/AppHeader/AppHeader.d.ts

@@ -7,5 +7,6 @@ export type AppHeaderProps = {
 export declare function AppHeaderHost({ className, anchorId, }: AppHeaderProps): import("react/jsx-runtime").JSX.Element;
 export type AppHeaderPortalProps = {
     children: ReactNode;
+    pageHeaderId?: string;
 };
-export declare function AppHeaderPortal({ children }: AppHeaderPortalProps): import("react").ReactPortal;
+export declare function AppHeaderPortal({ children, pageHeaderId, }: AppHeaderPortalProps): import("react").ReactPortal;

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/components/ui/Page/PageScroll/PageScroll.d.ts

@@ -1,4 +1,5 @@
-export declare const PageScroll: ({ children, className, }: {
+export declare const PageScroll: ({ children, className, rootClassName, }: {
     children: React.ReactNode;
     className?: string;
+    rootClassName?: string;
 }) => import("react/jsx-runtime").JSX.Element;

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

@@ -2,10 +2,12 @@ import { type SidebarDatasetsItemsGroupBy, type SidebarDatasetsItemsGroupedDatas
 export type SidebarDatasetsItemsGroupedProps = {
     groupBy: SidebarDatasetsItemsGroupBy;
     datasets: SidebarDatasetsItemsGroupedDataset[];
+    preItems?: React.ReactNode;
+    postItems?: React.ReactNode;
     selectedDatasetId?: number;
     onDatasetClick?: (datasetId: number) => void;
     /** When omitted, all groups start expanded. */
     defaultExpandedGroupNames?: string[];
     className?: string;
 };
-export declare function SidebarDatasetsItemsGrouped({ groupBy, datasets, selectedDatasetId, onDatasetClick, defaultExpandedGroupNames, className, }: SidebarDatasetsItemsGroupedProps): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarDatasetsItemsGrouped({ groupBy, datasets, preItems, postItems, selectedDatasetId, onDatasetClick, defaultExpandedGroupNames, className, }: SidebarDatasetsItemsGroupedProps): import("react/jsx-runtime").JSX.Element;

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/docs/pages/StandaloneAppLayoutPage.d.ts

@@ -0,0 +1 @@
+export default function StandaloneAppLayoutPage(): 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';