@sybilion/uilib 1.2.6 → 1.2.9

package/assets/standalone-global.css

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

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

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

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

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

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

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

package/dist/esm/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/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{box-sizing:border-box;color:var(--muted-foreground);display:block;font-size:14px;margin-top:var(--p-8);opacity:.5;padding-bottom:var(--p-2);text-align:center;transition:opacity .3s ease-out;white-space:nowrap;width:100%}";
+var 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/docs/contexts/theme-context.js

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

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

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

package/dist/esm/index.js

@@ -86,6 +86,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/Logo/Logo.d.ts

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

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

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

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

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

package/dist/esm/types/src/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/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/docs/contexts/theme-context.d.ts

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

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

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

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

@@ -58,3 +58,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,6 +40,25 @@ Import tokens/fonts once (typically `src/main.tsx`):
 import '@sybilion/uilib/standalone-global.css';
 ```
 
+### Branding (static SVGs + optional tab icon)
+
+**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 \
+  && cp node_modules/@sybilion/uilib/sybilion-bg.svg public/sybilion_bg.svg
+```
+
+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>`:
+
+```html
+<link rel="icon" href="/logo.svg" type="image/svg+xml" />
+<title>Your app name</title>
+```
+
 Mount the tree with `ReactDOM.createRoot` → `App` (wrap with `StrictMode` if you want).
 
 ### `package.json` scripts (required)
@@ -249,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.
@@ -478,6 +511,8 @@ Composition: `PageScroll` → `AppShell` → `AppSidebar` → `AppShellMainConte
 | 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.                                                  |
@@ -501,6 +536,9 @@ Composition: `PageScroll` → `AppShell` → `AppSidebar` → `AppShellMainConte
 | `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.6",
+  "version": "1.2.9",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",
@@ -35,7 +35,9 @@
       "types": "./dist/standalone/vite-sybilion-standalone-dev.d.ts",
       "import": "./dist/standalone/vite-sybilion-standalone-dev.js",
       "default": "./dist/standalone/vite-sybilion-standalone-dev.js"
-    }
+    },
+    "./logo.svg": "./src/assets/logo.svg",
+    "./sybilion-bg.svg": "./src/assets/sybilion_bg.svg"
   },
   "files": [
     "assets",

package/src/assets/logo.svg

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

package/src/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>

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

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

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

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

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

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

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

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