@sybilion/uilib 1.2.8 → 1.2.10

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

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

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

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+import { SybilionAuthLayout } from '../SybilionAuthLayout/SybilionAuthLayout.js';
+import '../SybilionAuthLayout/SybilionAuthHeadline.styl.js';
+import { useSybilionAuth } from '../../../sybilion-auth/SybilionAuthProvider.js';
+import { SybilionSignInPanel } from '../SybilionSignInPanel/SybilionSignInPanel.js';
+
+const DEFAULT_TITLE = 'Sign In';
+const DEFAULT_SUBTITLE = 'To get access authenticate through google or your email.';
+function SignInPage({ title = DEFAULT_TITLE, subtitle = DEFAULT_SUBTITLE, forgotPasswordTo = '/forgot-password', releasesTo = '/releases', versionLabel, primaryButtonLabel, connectingLabel, loginRedirectOptions, heroBackgroundUrl, logoSize, containerClassName, }) {
+    const { error, loginWithRedirect, isLoading } = useSybilionAuth();
+    const handleSignIn = () => loginWithRedirect({
+        ...loginRedirectOptions,
+        authorizationParams: {
+            prompt: 'login',
+            screen_hint: 'login',
+            ...(typeof window !== 'undefined'
+                ? { origin: window.location.origin }
+                : {}),
+            ...loginRedirectOptions?.authorizationParams,
+        },
+    });
+    return (jsx(SybilionAuthLayout, { title: title, subtitle: subtitle, heroBackgroundUrl: heroBackgroundUrl, logoSize: logoSize, containerClassName: containerClassName, children: jsx(SybilionSignInPanel, { onSignIn: handleSignIn, isSigningIn: isLoading, error: error, forgotPasswordTo: forgotPasswordTo, releasesTo: releasesTo, versionLabel: versionLabel, primaryButtonLabel: primaryButtonLabel, connectingLabel: connectingLabel }) }));
+}
+
+export { SignInPage };

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

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

package/dist/esm/components/widgets/SybilionAuthLayout/SybilionAuthHeadline.js

@@ -0,0 +1,8 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import S from './SybilionAuthHeadline.styl.js';
+
+function SybilionAuthHeadline() {
+    return (jsx("div", { className: S.root, children: jsxs("div", { className: S.headline, children: [jsxs("p", { className: S.headlineParagraph, children: [jsx("span", { children: "External volatility" }), jsx("span", {})] }), jsx("p", { className: S.headlineParagraph, children: "turned into" }), jsx("p", { className: S.headlineParagraph, children: jsx("span", { className: S.headlineCyan, children: "confident decisions" }) })] }) }));
+}
+
+export { SybilionAuthHeadline };

package/dist/esm/components/widgets/SybilionAuthLayout/SybilionAuthHeadline.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".SybilionAuthHeadline_root__iExEN{align-items:center;display:flex;flex-direction:column;font-family:var(--font-family-heading);font-weight:300;height:100%;justify-content:center;padding:64px 48px;position:relative;text-shadow:0 0 2px var(--background);width:100%;z-index:10}.SybilionAuthHeadline_headline__pkjEh{font-size:40px;line-height:48px;max-width:480px;text-align:left;width:100%}.SybilionAuthHeadline_headlineParagraph__jeOTl{margin:0}.SybilionAuthHeadline_headlineCyan__26sg2{color:#27d1ef}";
+var S = {"root":"SybilionAuthHeadline_root__iExEN","headline":"SybilionAuthHeadline_headline__pkjEh","headlineParagraph":"SybilionAuthHeadline_headlineParagraph__jeOTl","headlineCyan":"SybilionAuthHeadline_headlineCyan__26sg2"};
+styleInject(css_248z);
+
+export { S as default };

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

@@ -0,0 +1,16 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { Logo } from '../../ui/Logo/Logo.js';
+import { SybilionAuthHeadline } from './SybilionAuthHeadline.js';
+import S from './SybilionAuthLayout.styl.js';
+
+/** Same convention as {@link SYBILION_STANDALONE_LOGO_PUBLIC_URL}: copy `sybilion-bg.svg` from the package into `public/`. */
+const SYBILION_STANDALONE_AUTH_HERO_BG_PUBLIC_URL = '/sybilion_bg.svg';
+function SybilionAuthLayout({ title, subtitle, children, logoSize, containerClassName, heroBackgroundUrl = SYBILION_STANDALONE_AUTH_HERO_BG_PUBLIC_URL, }) {
+    const bg = heroBackgroundUrl
+        ? `url(${JSON.stringify(heroBackgroundUrl)})`
+        : 'none';
+    return (jsxs("div", { className: S.root, children: [jsxs("div", { className: S.leftPanel, children: [jsx("div", { className: S.bgImage, style: { backgroundImage: bg }, "aria-hidden": true }), jsx("div", { className: S.logoContainer, children: jsx(Logo, { className: S.logo, size: logoSize }) }), jsx(SybilionAuthHeadline, {})] }), jsx("div", { className: S.rightPanel, children: jsxs("div", { className: cn(S.formContainer, containerClassName), children: [jsxs("div", { className: S.header, children: [jsx("h1", { className: S.title, children: title }), subtitle && jsx("p", { className: S.subtitle, children: subtitle })] }), children] }) })] }));
+}
+
+export { SYBILION_STANDALONE_AUTH_HERO_BG_PUBLIC_URL, SybilionAuthLayout };

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

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".SybilionAuthLayout_root__jM5q5{display:flex;height:100vh;width:100%}.SybilionAuthLayout_leftPanel__MoyRZ{display:none}@media (min-width:768px){.SybilionAuthLayout_leftPanel__MoyRZ{background-color:var(--secondary);border-bottom-left-radius:var(--p-6);border-bottom-right-radius:var(--p-1);border-top-left-radius:var(--p-6);border-top-right-radius:var(--p-1);display:flex;overflow:hidden;position:relative;width:50%}.dark .SybilionAuthLayout_leftPanel__MoyRZ{background-color:var(--page-color-alpha-800)}}.SybilionAuthLayout_bgImage__LvCav{background-position:0 100%;background-repeat:no-repeat;background-size:contain;bottom:0;height:300px;left:0;position:absolute;width:300px}.SybilionAuthLayout_logoContainer__jR7Dw{align-items:center;display:flex;left:0;min-height:94px;padding:16px 48px;position:absolute;top:0;z-index:10}.SybilionAuthLayout_logo__LxBpo{height:24px;width:24px}.SybilionAuthLayout_rightPanel__pKcYC{align-items:center;background-color:var(--background);display:flex;flex:1;flex-direction:column;justify-content:center;padding:48px 64px}.SybilionAuthLayout_formContainer__xMCFZ{max-width:480px;width:100%}.SybilionAuthLayout_header__OOsdf{margin-bottom:36px}.SybilionAuthLayout_title__iYcZD{color:var(--foreground);font-family:var(--font-family-heading);font-size:30px;font-weight:400;line-height:42px;margin:0 0 6px}.SybilionAuthLayout_subtitle__sWv5p{color:var(--muted-foreground);font-family:Manrope,sans-serif;font-size:14px;font-weight:500;line-height:16px;margin:0}";
+var S = {"root":"SybilionAuthLayout_root__jM5q5","leftPanel":"SybilionAuthLayout_leftPanel__MoyRZ","bgImage":"SybilionAuthLayout_bgImage__LvCav","logoContainer":"SybilionAuthLayout_logoContainer__jR7Dw","logo":"SybilionAuthLayout_logo__LxBpo","rightPanel":"SybilionAuthLayout_rightPanel__pKcYC","formContainer":"SybilionAuthLayout_formContainer__xMCFZ","header":"SybilionAuthLayout_header__OOsdf","title":"SybilionAuthLayout_title__iYcZD","subtitle":"SybilionAuthLayout_subtitle__sWv5p"};
+styleInject(css_248z);
+
+export { S as default };

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

@@ -0,0 +1,11 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Link } from 'react-router-dom';
+import { Button } from '../../ui/Button/Button.js';
+import S from './SybilionSignInPanel.styl.js';
+
+function SybilionSignInPanel({ onSignIn, isSigningIn = false, error, forgotPasswordTo, releasesTo, versionLabel, primaryButtonLabel = 'Sign-in', connectingLabel = 'Connecting...', }) {
+    const signingIn = Boolean(isSigningIn);
+    return (jsxs(Fragment, { children: [jsx("div", { className: S.socialButtonContainer, children: jsx(Button, { variant: "outline", type: "button", className: S.socialButton, onClick: () => void onSignIn(), disabled: signingIn, children: signingIn ? connectingLabel : primaryButtonLabel }) }), error ? jsx("div", { className: S.errorMessage, children: error }) : null, jsx("div", { className: S.forgotPassword, children: jsx(Link, { to: forgotPasswordTo, className: S.forgotPasswordLink, children: "Forgot password?" }) }), releasesTo && versionLabel ? (jsxs(Link, { className: S.version, to: releasesTo, children: ["v", versionLabel] })) : null] }));
+}
+
+export { SybilionSignInPanel };

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

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

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

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

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

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

package/dist/esm/index.js

@@ -1,3 +1,5 @@
+export { ThemeProvider, useTheme } from './contexts/theme-context.js';
+export { DEFAULT_THEME_ACTIVE_COLOR } from './docs/lib/theme.js';
 export { SybilionAuthProvider, createSybilionApiFetch, getSybilionApiOriginFromSdk, sybilionApiFetch, useSybilionApiFetch, useSybilionAuth } from './sybilion-auth/SybilionAuthProvider.js';
 export { SYBILION_AUTH_LOGIN_PATH, normalizeApiBaseUrl } from './sybilion-auth/authPaths.js';
 export { exchangeAuth0AccessTokenForSybilionJwt } from './sybilion-auth/exchangeSybilionToken.js';
@@ -86,6 +88,10 @@ export { findWorkspaceAppByPathname, workspaceAppSlugPath } from './components/u
 export { SidebarDatasetsItemsGrouped } from './components/widgets/SidebarDatasetsItemsGrouped/SidebarDatasetsItemsGrouped.js';
 export { groupSidebarDatasets } from './components/widgets/SidebarDatasetsItemsGrouped/groupSidebarDatasets.js';
 export { SybilionAppHeader } from './components/widgets/SybilionAppHeader/SybilionAppHeader.js';
+export { SYBILION_STANDALONE_AUTH_HERO_BG_PUBLIC_URL, SybilionAuthLayout } from './components/widgets/SybilionAuthLayout/SybilionAuthLayout.js';
+export { SybilionAuthHeadline } from './components/widgets/SybilionAuthLayout/SybilionAuthHeadline.js';
+export { SybilionSignInPanel } from './components/widgets/SybilionSignInPanel/SybilionSignInPanel.js';
+export { SignInPage } from './components/widgets/SignInPage/SignInPage.js';
 export { ChartTooltipItem } from './components/ui/Chart/components/ChartTooltipItem.js';
 export { ChartLegendItem } from './components/ui/Chart/components/ChartLegendItem.js';
 export { CustomChartLegend } from './components/ui/Chart/components/CustomChartLegend/CustomChartLegend.js';

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

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

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

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

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

@@ -0,0 +1,10 @@
+import type { RedirectLoginOptions } from '@auth0/auth0-react';
+import { type SybilionAuthLayoutProps } from '#uilib/components/widgets/SybilionAuthLayout';
+import { type SybilionSignInPanelProps } from '../SybilionSignInPanel';
+export type SignInPageProps = Pick<SybilionAuthLayoutProps, 'heroBackgroundUrl' | 'logoSize' | 'containerClassName'> & Pick<SybilionSignInPanelProps, 'forgotPasswordTo' | 'releasesTo' | 'versionLabel' | 'primaryButtonLabel' | 'connectingLabel'> & {
+    title?: string;
+    subtitle?: string;
+    /** Extra Auth0 `loginWithRedirect` options; merged with default sign-in params. */
+    loginRedirectOptions?: RedirectLoginOptions;
+};
+export declare function SignInPage({ title, subtitle, forgotPasswordTo, releasesTo, versionLabel, primaryButtonLabel, connectingLabel, loginRedirectOptions, heroBackgroundUrl, logoSize, containerClassName, }: SignInPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/widgets/SignInPage/index.d.ts

@@ -0,0 +1 @@
+export { SignInPage, type SignInPageProps } from './SignInPage';

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

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

package/dist/esm/types/src/components/widgets/SybilionAuthLayout/SybilionAuthHeadline.d.ts

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

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

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import type { LogoSize } from '#uilib/components/ui/Logo/Logo.types';
+/** Same convention as {@link SYBILION_STANDALONE_LOGO_PUBLIC_URL}: copy `sybilion-bg.svg` from the package into `public/`. */
+export declare const SYBILION_STANDALONE_AUTH_HERO_BG_PUBLIC_URL: "/sybilion_bg.svg";
+export type SybilionAuthLayoutProps = {
+    title: string;
+    subtitle?: string;
+    children: ReactNode;
+    logoSize?: LogoSize;
+    containerClassName?: string;
+    /** Public URL for the hero watermark SVG (default {@link SYBILION_STANDALONE_AUTH_HERO_BG_PUBLIC_URL}). */
+    heroBackgroundUrl?: string;
+};
+export declare function SybilionAuthLayout({ title, subtitle, children, logoSize, containerClassName, heroBackgroundUrl, }: SybilionAuthLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/widgets/SybilionAuthLayout/index.d.ts

@@ -0,0 +1,2 @@
+export { SybilionAuthLayout, SYBILION_STANDALONE_AUTH_HERO_BG_PUBLIC_URL, type SybilionAuthLayoutProps, } from './SybilionAuthLayout';
+export { SybilionAuthHeadline } from './SybilionAuthHeadline';

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

@@ -0,0 +1,11 @@
+export type SybilionSignInPanelProps = {
+    onSignIn: () => void | Promise<void>;
+    isSigningIn?: boolean;
+    error?: string | null;
+    forgotPasswordTo: string;
+    releasesTo?: string;
+    versionLabel?: string;
+    primaryButtonLabel?: string;
+    connectingLabel?: string;
+};
+export declare function SybilionSignInPanel({ onSignIn, isSigningIn, error, forgotPasswordTo, releasesTo, versionLabel, primaryButtonLabel, connectingLabel, }: SybilionSignInPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/widgets/SybilionSignInPanel/index.d.ts

@@ -0,0 +1 @@
+export { SybilionSignInPanel, type SybilionSignInPanelProps, } from './SybilionSignInPanel';

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

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

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

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

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

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

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

@@ -1,3 +1,5 @@
+export * from './contexts/theme-context';
+export { DEFAULT_THEME_ACTIVE_COLOR } from './docs/lib/theme';
 export * from './sybilion-auth';
 export * from './types/sybilionDatasetSnapshots';
 export * from './contexts/chat-context';
@@ -58,3 +60,6 @@ export * from './components/ui/VimeoEmbed';
 export * from './components/ui/WorkspaceAppSwitcher';
 export * from './components/widgets/SidebarDatasetsItemsGrouped';
 export * from './components/widgets/SybilionAppHeader';
+export * from './components/widgets/SybilionAuthLayout';
+export * from './components/widgets/SybilionSignInPanel';
+export * from './components/widgets/SignInPage';

package/docs/standalone-apps.md

@@ -40,15 +40,17 @@ Import tokens/fonts once (typically `src/main.tsx`):
 import '@sybilion/uilib/standalone-global.css';
 ```
 
-### Branding (header logo + optional tab icon)
+### Branding (static SVGs + 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:
+**Header + auth hero:** Copy packaged SVGs into **`public/`** so **`Logo`** (**`SYBILION_STANDALONE_LOGO_PUBLIC_URL`** → **`/logo.svg`**) and **`SybilionAuthLayout`** (**`SYBILION_STANDALONE_AUTH_HERO_BG_PUBLIC_URL`** → **`/sybilion_bg.svg`**) resolve at runtime. Package paths: **`@sybilion/uilib/logo.svg`**, **`@sybilion/uilib/sybilion-bg.svg`**.
 
 ```bash
-mkdir -p public && cp node_modules/@sybilion/uilib/logo.svg public/logo.svg
+mkdir -p public \
+  && cp node_modules/@sybilion/uilib/logo.svg public/logo.svg \
+  && cp node_modules/@sybilion/uilib/sybilion-bg.svg public/sybilion_bg.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.
+Logo source in the package: **`src/assets/logo.svg`** (**cyan** glyph).
 
 **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>`:
 
@@ -266,6 +268,20 @@ useEffect(() => {
 
 Pass `user` (or `null` while loading with `isLoading` on `NavUserHeader`) and `isAuthenticated` to `SybilionAppHeader`.
 
+### Sign-in page (unauthenticated)
+
+Agents building the Auth0 entry route:
+
+1. **Public assets:** Same **`public/`** SVG setup as §1 _Branding (static SVGs + optional tab icon)_ (**`/sybilion_bg.svg`** for **`SYBILION_STANDALONE_AUTH_HERO_BG_PUBLIC_URL`** / **`SybilionAuthLayout`**).
+
+2. **Routing:** Register **`/sign-in`** (and your Auth0 **`/callback`** route if applicable) **outside** **`AppLayout`** — full viewport auth chrome must not sit under **`AppShell`** / sidebar / **`SybilionAppHeader`**. Pattern: top-level `<Routes>` with `<Route path="/sign-in" … />` as a sibling of the branch that renders **`AppLayout`**, both wrapped by **`SybilionAuthProvider`** (§3).
+
+3. **Composition:**
+   - **`SignInPage`** (`@sybilion/uilib`) — drop-in when **`SybilionAuthProvider`** wraps the tree. Calls **`useSybilionAuth`**. **`loginWithRedirect`** merges defaults (`prompt`, `screen_hint`, `origin`) with optional **`loginRedirectOptions`** / **`authorizationParams`** for tenant-specific **`connection`** or audiences.
+   - **Custom:** compose **`SybilionAuthLayout`** + **`SybilionSignInPanel`** and wire **`loginWithRedirect`** yourself from **`useSybilionAuth`**.
+
+4. **Footer chip:** Pass **`versionLabel`** into **`SignInPage`** (or **`SybilionSignInPanel`**) when you want **`v…`** linked to **`releasesTo`** (default **`/releases`**).
+
 ## 4. Layout (AppShell)
 
 With §2 `sybilionSdk` and §3 `AppProviders` / `SybilionAuthProvider` defined, compose routing + shell so Auth0 callbacks and JWT-backed hooks wrap the whole UI.
@@ -376,7 +392,11 @@ Wire **`authenticated`**, **`user`** / **`isAuthenticated`**, **`theme`** / **`o
 
 #### Sidebar (`AppSidebar.tsx`)
 
-App-specific sidebar component — keeps the navigation surface out of `AppLayout` so the shell stays generic. Compose your nav from `@sybilion/uilib` primitives (`Sidebar` + `SidebarContent` + `SidebarGroup` + `SidebarMenu*`) and product widgets like `SidebarDatasetsItemsGrouped` (collapsible groups + nested rows for datasets — see demo `src/docs/pages/SidebarDatasetsItemsGroupedPage.tsx`, slug `sidebar-datasets-items-grouped`).
+App-specific sidebar component — keeps the navigation surface out of `AppLayout` so the shell stays generic.
+
+**One sidebar group (default):** Standalone apps use **a single `SidebarGroup`** for the whole sidebar menu unless the **product owner explicitly asks** for another section separated into its own group. **`SidebarDatasetsItemsGrouped`** ([`src/components/widgets/SidebarDatasetsItemsGrouped/SidebarDatasetsItemsGrouped.tsx`](../../src/components/widgets/SidebarDatasetsItemsGrouped/SidebarDatasetsItemsGrouped.tsx)) already renders **one** outer `SidebarGroup` — put primary routes (Home, Datasets, …) in **`preItems`** or **`postItems`** so nav and dataset rows share that group instead of wrapping routes in a separate **`SidebarGroup`** above/below the widget. Apps without datasets: one **`SidebarGroup`** + **`SidebarMenu`** / **`SidebarMenuItem`** only.
+
+Collapsible dataset clusters + nested rows: demo **`src/docs/pages/SidebarDatasetsItemsGroupedPage.tsx`** (slug **`sidebar-datasets-items-grouped`**). Other primitives: **`Sidebar`** + **`SidebarContent`** + **`SidebarMenu*`**.
 
 ```tsx
 import { useEffect, useState } from 'react';
@@ -387,8 +407,6 @@ import {
   SidebarContent,
   SidebarDatasetsItemsGrouped,
   type SidebarDatasetsItemsGroupedDataset,
-  SidebarGroup,
-  SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
 } from '@sybilion/uilib';
@@ -411,27 +429,26 @@ export function AppSidebar() {
   return (
     <Sidebar variant="inset" collapsible="offcanvas">
       <SidebarContent>
-        <SidebarGroup>
-          <SidebarMenu>
-            <SidebarMenuItem>
-              <SidebarMenuButton asChild>
-                <NavLink to="/" end>
-                  Home
-                </NavLink>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-            <SidebarMenuItem>
-              <SidebarMenuButton asChild>
-                <NavLink to="/datasets">Datasets</NavLink>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-          </SidebarMenu>
-        </SidebarGroup>
-
         <SidebarDatasetsItemsGrouped
           groupBy="regions"
           datasets={datasets}
           selectedDatasetId={selectedDatasetId}
+          preItems={
+            <>
+              <SidebarMenuItem>
+                <SidebarMenuButton asChild>
+                  <NavLink to="/" end>
+                    Home
+                  </NavLink>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton asChild>
+                  <NavLink to="/datasets">Datasets</NavLink>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </>
+          }
           onDatasetClick={id => {
             setSelectedDatasetId(id);
             navigate(`/datasets/${id}`);
@@ -488,18 +505,19 @@ 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/`.                                                                          |
-| 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.                                                                                                                               |
+| 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           | §1 _Branding_: **`public/logo.svg`** + **`public/sybilion_bg.svg`** (one **`mkdir` + two `cp`** block). **`index.html`**: `<title>`; optional **`<link rel="icon">`** for tab icon.                  |
+| Sign-in            | §3 _Sign-in page (unauthenticated)_: **`SignInPage`** or **`SybilionAuthLayout`** + **`SybilionSignInPanel`**; **`/sign-in`** not inside **`AppLayout`**; **`SybilionAuthProvider`** wraps router.   |
+| 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)
 
@@ -513,12 +531,15 @@ Composition: `PageScroll` → `AppShell` → `AppSidebar` → `AppShellMainConte
 | `NavUserHeader`                                      | Header user menu (avatar, account, theme, logout).                                                                                                                                                                                                                                |
 | `Sidebar`, `SidebarProvider`                         | Collapsible rail + context (`@sybilion/uilib`). Wrap `SidebarProvider` above `AppLayout`; render `Sidebar` inside `AppShell` (usually via `AppSidebar`).                                                                                                                          |
 | `AppSidebar`                                         | App-specific component (`src/AppSidebar.tsx`) composing `Sidebar` + nav links + product widgets. Keeps `AppLayout` generic.                                                                                                                                                       |
-| `SidebarDatasetsItemsGrouped`                        | Dataset list widget for the sidebar: collapsible groups (`regions` / `target_type` / `categories`) with nested rows + selection callback.                                                                                                                                         |
+| `SidebarDatasetsItemsGrouped`                        | Single-sidebar-group widget: **`preItems`** / **`postItems`** for main nav + collapsible dataset groups (`regions` / `target_type` / `categories`) + **`onDatasetClick`**. Prefer this over stacking multiple **`SidebarGroup`** blocks unless explicitly requested. Source: **`src/components/widgets/SidebarDatasetsItemsGrouped/SidebarDatasetsItemsGrouped.tsx`**.                                                                                                                                         |
 | `SidebarTrigger`                                     | Toggle sidebar visibility (especially mobile / `offcanvas`).                                                                                                                                                                                                                      |
 | `PageFooter`                                         | Standard footer; requires `versionLink` + `versionLabel`.                                                                                                                                                                                                                         |
 | `Gap`                                                | Spacing primitive between flex children.                                                                                                                                                                                                                                          |
 | `PageHeader`, `PageContent`, `PageContentSection`, … | **§4 Route page body** (roles, `breadcrumbSidebarTrigger`, example). Same barrel also has `PageTabs`, `PageColumns`, `SectionHeader`, `PageEmptyCanvas`, …                                                                                                                        |
 | `SybilionAuthProvider`                               | Auth0 + Sybilion JWT (§3).                                                                                                                                                                                                                                                        |
+| `SignInPage`                                         | Full sign-in route using **`SybilionAuthLayout`** + **`SybilionSignInPanel`** + **`useSybilionAuth`**; §3 sign-in subsection.                                                                                                                                                     |
+| `SybilionAuthLayout`                                 | Split-view auth chrome (hero + form column); optional **`heroBackgroundUrl`** (default **`/sybilion_bg.svg`**).                                                                                                                                                                   |
+| `SybilionSignInPanel`                                | Presentational primary button, error line, forgot-password link, optional version link; §3 sign-in subsection.                                                                                                                                                                    |
 | `useSybilionAuth`                                    | User session + login/logout under provider.                                                                                                                                                                                                                                       |
 | `useSybilionApiFetch`                                | Authenticated `fetch` using stored JWT.                                                                                                                                                                                                                                           |
 

package/package.json

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

package/src/assets/sybilion_bg.svg

@@ -0,0 +1,8 @@
+<svg width="312" height="309" viewBox="0 0 312 309" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="268.707" y="206.636" width="43.2928" height="57.7237" fill="#8EE9F7"/>
+<rect width="43.2928" height="57.7237" transform="matrix(4.37114e-08 -1 -1 -4.37114e-08 106.365 43.848)" fill="#8EE9F7"/>
+<rect x="268.707" y="206.639" width="57.7237" height="104.624" transform="rotate(180 268.707 206.639)" fill="#8EE9F7"/>
+<rect x="48.6343" y="43.848" width="57.7237" height="104.624" transform="rotate(90 48.6343 43.848)" fill="#8EE9F7"/>
+<rect width="57.7237" height="104.624" transform="matrix(-4.37114e-08 1 1 4.37114e-08 106.365 43.848)" fill="#8EE9F7"/>
+<rect width="57.7237" height="104.624" transform="matrix(-1 0 0 1 268.707 264.36)" fill="#8EE9F7"/>
+</svg>