@sybilion/uilib 1.2.8 → 1.2.9

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/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/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/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,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.
@@ -488,18 +504,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)
 
@@ -519,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.8",
+  "version": "1.2.9",
   "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>

package/src/components/widgets/SignInPage/SignInPage.tsx

@@ -0,0 +1,84 @@
+import type { RedirectLoginOptions } from '@auth0/auth0-react';
+
+import {
+  SybilionAuthLayout,
+  type SybilionAuthLayoutProps,
+} from '#uilib/components/widgets/SybilionAuthLayout';
+import { useSybilionAuth } from '#uilib/sybilion-auth/SybilionAuthProvider';
+
+import {
+  SybilionSignInPanel,
+  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;
+  };
+
+const DEFAULT_TITLE = 'Sign In';
+const DEFAULT_SUBTITLE =
+  'To get access authenticate through google or your email.';
+
+export function SignInPage({
+  title = DEFAULT_TITLE,
+  subtitle = DEFAULT_SUBTITLE,
+  forgotPasswordTo = '/forgot-password',
+  releasesTo = '/releases',
+  versionLabel,
+  primaryButtonLabel,
+  connectingLabel,
+  loginRedirectOptions,
+  heroBackgroundUrl,
+  logoSize,
+  containerClassName,
+}: SignInPageProps) {
+  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 (
+    <SybilionAuthLayout
+      title={title}
+      subtitle={subtitle}
+      heroBackgroundUrl={heroBackgroundUrl}
+      logoSize={logoSize}
+      containerClassName={containerClassName}
+    >
+      <SybilionSignInPanel
+        onSignIn={handleSignIn}
+        isSigningIn={isLoading}
+        error={error}
+        forgotPasswordTo={forgotPasswordTo}
+        releasesTo={releasesTo}
+        versionLabel={versionLabel}
+        primaryButtonLabel={primaryButtonLabel}
+        connectingLabel={connectingLabel}
+      />
+    </SybilionAuthLayout>
+  );
+}

package/src/components/widgets/SignInPage/index.ts

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

package/src/components/widgets/SybilionAuthLayout/SybilionAuthHeadline.styl

@@ -0,0 +1,26 @@
+.root
+  display flex
+  flex-direction column
+  justify-content center
+  align-items center
+  width 100%
+  padding 64px 48px
+  position relative
+  z-index 10
+  height 100%
+  font-family var(--font-family-heading)
+  font-weight 300
+  text-shadow 0 0 2px var(--background)
+
+.headline
+  font-size 40px
+  line-height 48px
+  text-align left
+  width 100%
+  max-width 480px
+
+.headlineParagraph
+  margin 0
+
+.headlineCyan
+  color #27d1ef

package/src/components/widgets/SybilionAuthLayout/SybilionAuthHeadline.styl.d.ts

@@ -0,0 +1,2 @@
+const mod: { [cls: string]: string };
+export default mod;

package/src/components/widgets/SybilionAuthLayout/SybilionAuthHeadline.tsx

@@ -0,0 +1,18 @@
+import S from './SybilionAuthHeadline.styl';
+
+export function SybilionAuthHeadline() {
+  return (
+    <div className={S.root}>
+      <div className={S.headline}>
+        <p className={S.headlineParagraph}>
+          <span>External volatility</span>
+          <span></span>
+        </p>
+        <p className={S.headlineParagraph}>turned into</p>
+        <p className={S.headlineParagraph}>
+          <span className={S.headlineCyan}>confident decisions</span>
+        </p>
+      </div>
+    </div>
+  );
+}

package/src/components/widgets/SybilionAuthLayout/SybilionAuthLayout.styl

@@ -0,0 +1,79 @@
+.root
+  height 100vh
+  display flex
+  width 100%
+
+.leftPanel
+  display none
+
+  @media (min-width: 768px)
+    display flex
+    width 50%
+    position relative
+    overflow hidden
+    background-color var(--secondary)
+    border-top-left-radius var(--p-6)
+    border-bottom-left-radius var(--p-6)
+    border-top-right-radius var(--p-1)
+    border-bottom-right-radius var(--p-1)
+
+    :global(.dark) &
+      background-color var(--page-color-alpha-800)
+
+.bgImage
+  position absolute
+  bottom 0
+  left 0
+  width 300px
+  height 300px
+  background-size contain
+  background-repeat no-repeat
+  background-position left bottom
+
+.logoContainer
+  z-index 10
+  position absolute
+  top 0
+  left 0
+  display flex
+  align-items center
+  min-height 94px
+  padding 16px 48px
+
+.logo
+  width 24px
+  height 24px
+
+.rightPanel
+  flex 1
+  background-color var(--background)
+  display flex
+  flex-direction column
+  justify-content center
+  align-items center
+  padding 48px 64px
+
+.formContainer
+  // position relative
+  max-width 480px
+  width 100%
+
+.header
+  margin-bottom 36px
+
+.title
+  font-family var(--font-family-heading)
+  font-weight normal
+  font-size 30px
+  line-height 42px
+  margin 0
+  margin-bottom 6px
+  color var(--foreground)
+
+.subtitle
+  font-size 14px
+  color var(--muted-foreground)
+  line-height 16px
+  margin 0
+  font-family 'Manrope', sans-serif
+  font-weight 500

package/src/components/widgets/SybilionAuthLayout/SybilionAuthLayout.styl.d.ts

@@ -0,0 +1,2 @@
+const mod: { [cls: string]: string };
+export default mod;

package/src/components/widgets/SybilionAuthLayout/SybilionAuthLayout.tsx

@@ -0,0 +1,64 @@
+import cn from 'classnames';
+import type { ReactNode } from 'react';
+
+import { Logo } from '#uilib/components/ui/Logo/Logo';
+import type { LogoSize } from '#uilib/components/ui/Logo/Logo.types';
+
+import { SybilionAuthHeadline } from './SybilionAuthHeadline';
+import S from './SybilionAuthLayout.styl';
+
+/** Same convention as {@link SYBILION_STANDALONE_LOGO_PUBLIC_URL}: copy `sybilion-bg.svg` from the package into `public/`. */
+export const SYBILION_STANDALONE_AUTH_HERO_BG_PUBLIC_URL =
+  '/sybilion_bg.svg' as const;
+
+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 function SybilionAuthLayout({
+  title,
+  subtitle,
+  children,
+  logoSize,
+  containerClassName,
+  heroBackgroundUrl = SYBILION_STANDALONE_AUTH_HERO_BG_PUBLIC_URL,
+}: SybilionAuthLayoutProps) {
+  const bg = heroBackgroundUrl
+    ? `url(${JSON.stringify(heroBackgroundUrl)})`
+    : 'none';
+
+  return (
+    <div className={S.root}>
+      <div className={S.leftPanel}>
+        <div
+          className={S.bgImage}
+          style={{ backgroundImage: bg }}
+          aria-hidden
+        />
+
+        <div className={S.logoContainer}>
+          <Logo className={S.logo} size={logoSize} />
+        </div>
+
+        <SybilionAuthHeadline />
+      </div>
+
+      <div className={S.rightPanel}>
+        <div className={cn(S.formContainer, containerClassName)}>
+          <div className={S.header}>
+            <h1 className={S.title}>{title}</h1>
+            {subtitle && <p className={S.subtitle}>{subtitle}</p>}
+          </div>
+
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/widgets/SybilionAuthLayout/index.ts

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

package/src/components/widgets/SybilionSignInPanel/SybilionSignInPanel.styl

@@ -0,0 +1,48 @@
+.socialButtonContainer
+  display flex
+  width 100%
+  gap 10px
+  margin-bottom 10px
+
+.socialButton
+  flex 1
+  height 48px
+  padding 14px 16px
+  font-size 14px
+  font-weight 600
+  border-radius 14px
+  border 1px solid var(--border)
+
+.errorMessage
+  color red
+  padding 10px
+  font-size 14px
+  margin-bottom 10px
+
+.forgotPassword
+  text-align right
+  margin-bottom 24px
+
+.forgotPasswordLink
+  color var(--primary)
+  text-decoration none
+  font-size 14px
+  font-family 'Manrope', sans-serif
+  font-weight 500
+  transition opacity 0.2s
+
+  &:hover
+    opacity 0.8
+
+.version
+  display block
+  margin-top var(--p-8)
+  padding-bottom var(--p-2)
+  width 100%
+  box-sizing border-box
+  text-align center
+  font-size 14px
+  color var(--muted-foreground)
+  opacity 0.5
+  transition opacity 0.3s ease-out
+  white-space nowrap

package/src/components/widgets/SybilionSignInPanel/SybilionSignInPanel.styl.d.ts

@@ -0,0 +1,2 @@
+const mod: { [cls: string]: string };
+export default mod;

package/src/components/widgets/SybilionSignInPanel/SybilionSignInPanel.tsx

@@ -0,0 +1,59 @@
+import { Link } from 'react-router-dom';
+
+import { Button } from '#uilib/components/ui/Button';
+
+import S from './SybilionSignInPanel.styl';
+
+export type SybilionSignInPanelProps = {
+  onSignIn: () => void | Promise<void>;
+  isSigningIn?: boolean;
+  error?: string | null;
+  forgotPasswordTo: string;
+  releasesTo?: string;
+  versionLabel?: string;
+  primaryButtonLabel?: string;
+  connectingLabel?: string;
+};
+
+export function SybilionSignInPanel({
+  onSignIn,
+  isSigningIn = false,
+  error,
+  forgotPasswordTo,
+  releasesTo,
+  versionLabel,
+  primaryButtonLabel = 'Sign-in',
+  connectingLabel = 'Connecting...',
+}: SybilionSignInPanelProps) {
+  const signingIn = Boolean(isSigningIn);
+
+  return (
+    <>
+      <div className={S.socialButtonContainer}>
+        <Button
+          variant="outline"
+          type="button"
+          className={S.socialButton}
+          onClick={() => void onSignIn()}
+          disabled={signingIn}
+        >
+          {signingIn ? connectingLabel : primaryButtonLabel}
+        </Button>
+      </div>
+
+      {error ? <div className={S.errorMessage}>{error}</div> : null}
+
+      <div className={S.forgotPassword}>
+        <Link to={forgotPasswordTo} className={S.forgotPasswordLink}>
+          Forgot password?
+        </Link>
+      </div>
+
+      {releasesTo && versionLabel ? (
+        <Link className={S.version} to={releasesTo}>
+          v{versionLabel}
+        </Link>
+      ) : null}
+    </>
+  );
+}

package/src/components/widgets/SybilionSignInPanel/index.ts

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

package/src/index.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';