@sybilion/uilib 1.2.9 → 1.2.11

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

@@ -1,10 +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'> & {
+export type SignInPageProps = Pick<SybilionAuthLayoutProps, '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;
+export declare function SignInPage({ title, subtitle, forgotPasswordTo, releasesTo, versionLabel, primaryButtonLabel, connectingLabel, loginRedirectOptions, logoSize, containerClassName, }: SignInPageProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,14 +1,11 @@
 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;
+    style?: React.CSSProperties;
 };
-export declare function SybilionAuthLayout({ title, subtitle, children, logoSize, containerClassName, heroBackgroundUrl, }: SybilionAuthLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function SybilionAuthLayout({ title, subtitle, children, logoSize, containerClassName, style, }: SybilionAuthLayoutProps): import("react/jsx-runtime").JSX.Element;

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

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

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

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

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';

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

@@ -19,7 +19,16 @@ export type SybilionAuthProviderProps = {
         redirect_uri?: string;
     };
     sybilionTokenStorageKey?: string;
+    /**
+     * When set, passed to Auth0 `logout({ logoutParams: { returnTo } })` if
+     * {@link SybilionAuthProviderProps.useFederatedLogout} is true.
+     */
     logoutReturnTo?: string;
+    /**
+     * If true, redirect to Auth0 `/v2/logout` (clears IdP session). Default false matches
+     * sybilion-client: local session clear only, no redirect (`openUrl: false`).
+     */
+    useFederatedLogout?: boolean;
 };
 export type SybilionAuthContextValue = {
     apiBaseUrl: string;
@@ -39,4 +48,4 @@ export declare function sybilionApiFetch(apiBaseUrl: string, bearerToken: string
 export declare function createSybilionApiFetch(apiBaseUrl: string, getSybilionAccessToken: () => Promise<string | null>): (path: string, init?: RequestInit) => Promise<Response>;
 /** Authenticated fetch using {@link useSybilionAuth} context. */
 export declare function useSybilionApiFetch(): (path: string, init?: RequestInit) => Promise<Response>;
-export declare function SybilionAuthProvider({ children, sdk, auth0Domain, auth0ClientId, redirectUri, authorizationParams, sybilionTokenStorageKey, logoutReturnTo, }: SybilionAuthProviderProps): JSX.Element;
+export declare function SybilionAuthProvider({ children, sdk, auth0Domain, auth0ClientId, redirectUri, authorizationParams, sybilionTokenStorageKey, logoutReturnTo, useFederatedLogout, }: SybilionAuthProviderProps): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.2.9",
+  "version": "1.2.11",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",
@@ -30,14 +30,12 @@
       "default": "./src/index.ts"
     },
     "./src/*": "./src/*",
-    "./standalone-global.css": "./assets/standalone-global.css",
     "./vite-standalone-dev": {
       "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"
+    "./logo.svg": "./src/assets/logo.svg"
   },
   "files": [
     "assets",

package/src/components/ui/AppHeader/AppHeader.styl

@@ -7,6 +7,8 @@
   width 100%
   max-width calc(100vw - var(--sidebar-width) - var(--p-3))
   min-height var(--header-height)
+  padding-right var(--p-2)
+
   background-color var(--color-background)
 
   @media (min-width MOBILE)

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

@@ -5,7 +5,8 @@ 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>`.
+ * to `public/logo.svg` (Sybilion app template README documents postinstall copies).
+ * Same path as the favicon `<link href>`.
  */
 export const SYBILION_STANDALONE_LOGO_PUBLIC_URL = '/logo.svg' as const;
 

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

@@ -67,10 +67,12 @@
 
 .userInfo
   display flex
+  flex 1
   flex-direction column
   align-items flex-start
   text-align left
   gap 0.25rem
+  min-width 0
 
 .userName
   font-size var(--text-sm)
@@ -98,26 +100,6 @@
   text-align left
   font-size 0.875rem
 
-.userDetails
-  display grid
-  flex 1
-  text-align left
-  font-size 0.875rem
-  line-height 1.25
-
-.userDetailName
-  text-overflow ellipsis
-  overflow hidden
-  white-space nowrap
-  font-weight 500
-
-.userDetailEmail
-  color var(--color-muted-foreground)
-  text-overflow ellipsis
-  overflow hidden
-  white-space nowrap
-  font-size 0.75rem
-
 @keyframes pulse
   0%, 100%
     opacity 1

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

@@ -15,9 +15,6 @@ interface CssExports {
   'pulse': string;
   'textSkeleton': string;
   'userButton': string;
-  'userDetailEmail': string;
-  'userDetailName': string;
-  'userDetails': string;
   'userEmail': string;
   'userInfo': string;
   'userLabel': string;

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

@@ -1,6 +1,7 @@
 import cn from 'classnames';
+import { useMemo } from 'react';
 
-import { useTheme } from '#uilib/docs/contexts/theme-context';
+import { useTheme } from '#uilib/contexts/theme-context';
 import {
   MoonIcon,
   SignOutIcon,
@@ -9,7 +10,7 @@ import {
 } from '@phosphor-icons/react';
 import { ChevronDownIcon } from 'lucide-react';
 
-import { Avatar } from '../Avatar';
+import { Avatar, AvatarFallback, AvatarImage } from '../Avatar';
 import { Button } from '../Button';
 import {
   DropdownMenu,
@@ -20,7 +21,6 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '../DropdownMenu';
-import { Image } from '../Image';
 import S from './NavUserHeader.styl';
 import type { NavUserHeaderProps } from './NavUserHeader.types';
 
@@ -33,14 +33,46 @@ export function NavUserHeader({
   onLogout,
   signInSlot,
   onSignInClick,
+  theme: themeFromHost,
+  onThemeToggle: onThemeToggleFromHost,
 }: NavUserHeaderProps) {
-  const { toggleTheme, theme } = useTheme();
+  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 ?? '';
   const userEmail = user?.email ?? '';
 
+  const avatar = useMemo(() => {
+    const initials = userName
+      .split(' ')
+      .map(name => name.charAt(0))
+      .join('');
+
+    return (
+      <Avatar className={S.avatar}>
+        <AvatarImage src={avatarUrl || undefined} alt={userName} />
+        <AvatarFallback>{initials}</AvatarFallback>
+      </Avatar>
+    );
+  }, [avatarUrl, userName]);
+
+  const userIdentity = useMemo(
+    () => (
+      <div className={S.userInfo}>
+        <span className={`${S.userName} ph-no-capture`}>{userName}</span>
+        <span className={S.userEmail}>{userEmail}</span>
+      </div>
+    ),
+    [userEmail, userName],
+  );
+
   if (isLoading) {
     return (
       <Button variant="ghost" size="sm" disabled className={S.loadingButton}>
@@ -76,21 +108,10 @@ export function NavUserHeader({
           size="sm"
           className={cn(S.userButton, variant === 'compact' && S.compact)}
         >
-          <Avatar className={S.avatar}>
-            <Image
-              url={avatarUrl}
-              alt={userName}
-              fallback={<div className={S.avatarFallback} />}
-            />
-          </Avatar>
+          {avatar}
           {variant === 'default' && (
             <>
-              <div className={S.userInfo}>
-                <span className={`${S.userName} ph-no-capture`}>
-                  {userName}
-                </span>
-                <span className={S.userEmail}>{userEmail}</span>
-              </div>
+              {userIdentity}
               <ChevronDownIcon className={S.iconSm} />
             </>
           )}
@@ -103,19 +124,8 @@ export function NavUserHeader({
       >
         <DropdownMenuLabel className={S.userLabel}>
           <div className={S.userLabelContent}>
-            <Avatar className={S.avatar}>
-              <Image
-                url={avatarUrl}
-                alt={userName}
-                fallback={<div className={S.avatarFallback} />}
-              />
-            </Avatar>
-            <div className={S.userDetails}>
-              <span className={`${S.userDetailName} ph-no-capture`}>
-                {userName}
-              </span>
-              <span className={S.userDetailEmail}>{userEmail}</span>
-            </div>
+            {avatar}
+            {userIdentity}
           </div>
         </DropdownMenuLabel>
         <DropdownMenuSeparator />

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

@@ -20,4 +20,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/src/components/ui/Sidebar/Sidebar.styl

@@ -193,7 +193,6 @@
 .sidebarContent
   position absolute
   display flex
-  min-height 0
   flex 1
   flex-direction column
   gap var(--p-16)
@@ -201,7 +200,8 @@
 
   width 100%
   height 100vh
-  max-height @height
+  min-height 0
+  max-height 100%
 
   @media (min-width MOBILE)
     height calc(100vh - var(--gap-top))

package/src/components/widgets/SidebarDatasetsItemsGrouped/SidebarDatasetsItemsGrouped.tsx

@@ -26,7 +26,10 @@ export type SidebarDatasetsItemsGroupedProps = {
   postItems?: React.ReactNode;
   selectedDatasetId?: number;
   onDatasetClick?: (datasetId: number) => void;
-  /** When omitted, all groups start expanded. */
+  /**
+   * When set, expanded state resets to this list whenever `grouped` changes.
+   * Omit: start collapsed; any group containing `selectedDatasetId` opens (toggle still adds more).
+   */
   defaultExpandedGroupNames?: string[];
   className?: string;
 };
@@ -46,15 +49,23 @@ export function SidebarDatasetsItemsGrouped({
     [datasets, groupBy],
   );
 
+  /** Content key — inline `[]` must not retrigger reset every render (new array ref). */
+  const defaultExpandedKey =
+    defaultExpandedGroupNames === undefined
+      ? '__smart__'
+      : defaultExpandedGroupNames.join('\0');
+
   const [expanded, setExpanded] = useState<Set<string>>(new Set());
 
   useEffect(() => {
     if (defaultExpandedGroupNames !== undefined) {
       setExpanded(new Set(defaultExpandedGroupNames));
     } else {
-      setExpanded(new Set(grouped.map(([name]) => name)));
+      setExpanded(new Set());
     }
-  }, [grouped, defaultExpandedGroupNames]);
+    // Intentionally `defaultExpandedKey` not `defaultExpandedGroupNames` (reference stability).
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- key encodes array contents
+  }, [grouped, defaultExpandedKey]);
 
   useEffect(() => {
     if (selectedDatasetId == null) return;

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

@@ -13,7 +13,7 @@ import {
 
 export type SignInPageProps = Pick<
   SybilionAuthLayoutProps,
-  'heroBackgroundUrl' | 'logoSize' | 'containerClassName'
+  'logoSize' | 'containerClassName'
 > &
   Pick<
     SybilionSignInPanelProps,
@@ -42,7 +42,6 @@ export function SignInPage({
   primaryButtonLabel,
   connectingLabel,
   loginRedirectOptions,
-  heroBackgroundUrl,
   logoSize,
   containerClassName,
 }: SignInPageProps) {
@@ -65,7 +64,6 @@ export function SignInPage({
     <SybilionAuthLayout
       title={title}
       subtitle={subtitle}
-      heroBackgroundUrl={heroBackgroundUrl}
       logoSize={logoSize}
       containerClassName={containerClassName}
     >

package/src/components/widgets/SybilionAppHeader/SybilionAppHeader.tsx

@@ -20,6 +20,10 @@ export type SybilionAppHeaderProps = WorkspaceAppSwitcherProps &
     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;
@@ -31,6 +35,8 @@ export function SybilionAppHeader({
   pageHeaderId,
   actionsAnchorId = PAGE_HEADER_ACTIONS_ID,
   actionsAnchorClassName,
+  actionsStart,
+  actionsEnd,
   pathname,
   onNavigate,
   authenticated,
@@ -67,7 +73,9 @@ export function SybilionAppHeader({
         id={actionsAnchorId}
         className={cn(S.actionsAnchor, actionsAnchorClassName)}
       >
+        {actionsStart}
         <NavUserHeader {...navUserHeaderProps} />
+        {actionsEnd}
       </div>
     </AppHeaderPortal>
   );

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

@@ -10,7 +10,7 @@
   height 100%
   font-family var(--font-family-heading)
   font-weight 300
-  text-shadow 0 0 2px var(--background)
+  text-shadow 0 0 7px var(--background)
 
 .headline
   font-size 40px
@@ -23,4 +23,4 @@
   margin 0
 
 .headlineCyan
-  color #27d1ef
+  color var(--brand-color)

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

@@ -1,2 +1,10 @@
-const mod: { [cls: string]: string };
-export default mod;
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'headline': string;
+  'headlineCyan': string;
+  'headlineParagraph': string;
+  'root': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

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

@@ -2,6 +2,7 @@
   height 100vh
   display flex
   width 100%
+  background-color var(--background)
 
 .leftPanel
   display none
@@ -9,6 +10,8 @@
   @media (min-width: 768px)
     display flex
     width 50%
+    height calc(100% - var(--p-6))
+    margin var(--p-3) 0 var(--p-3) var(--p-3)
     position relative
     overflow hidden
     background-color var(--secondary)
@@ -20,15 +23,23 @@
     :global(.dark) &
       background-color var(--page-color-alpha-800)
 
-.bgImage
+// ~500px graphic, -200px offset → ~300px (~60%) visible inside panel (clipped by .leftPanel overflow)
+.heroWatermark
   position absolute
-  bottom 0
-  left 0
-  width 300px
-  height 300px
-  background-size contain
-  background-repeat no-repeat
-  background-position left bottom
+  bottom -180px
+  left -180px
+  width 500px
+  height 500px
+  align-items flex-end
+  justify-content flex-start
+  gap 0
+  pointer-events none
+
+  img
+    width 100% !important
+    height 100% !important
+    object-fit contain
+    object-position left bottom
 
 .logoContainer
   z-index 10
@@ -45,8 +56,8 @@
   height 24px
 
 .rightPanel
+  position relative
   flex 1
-  background-color var(--background)
   display flex
   flex-direction column
   justify-content center

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

@@ -1,2 +1,16 @@
-const mod: { [cls: string]: string };
-export default mod;
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'formContainer': string;
+  'header': string;
+  'heroWatermark': string;
+  'leftPanel': string;
+  'logo': string;
+  'logoContainer': string;
+  'rightPanel': string;
+  'root': string;
+  'subtitle': string;
+  'title': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

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

@@ -7,18 +7,13 @@ 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;
+  style?: React.CSSProperties;
 };
 
 export function SybilionAuthLayout({
@@ -27,20 +22,12 @@ export function SybilionAuthLayout({
   children,
   logoSize,
   containerClassName,
-  heroBackgroundUrl = SYBILION_STANDALONE_AUTH_HERO_BG_PUBLIC_URL,
+  style,
 }: SybilionAuthLayoutProps) {
-  const bg = heroBackgroundUrl
-    ? `url(${JSON.stringify(heroBackgroundUrl)})`
-    : 'none';
-
   return (
-    <div className={S.root}>
+    <div className={S.root} style={style}>
       <div className={S.leftPanel}>
-        <div
-          className={S.bgImage}
-          style={{ backgroundImage: bg }}
-          aria-hidden
-        />
+        <Logo showText={false} className={S.heroWatermark} aria-hidden />
 
         <div className={S.logoContainer}>
           <Logo className={S.logo} size={logoSize} />

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

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

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

@@ -35,6 +35,9 @@
     opacity 0.8
 
 .version
+  position absolute
+  bottom 0
+  right 0
   display block
   margin-top var(--p-8)
   padding-bottom var(--p-2)

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

@@ -1,2 +1,12 @@
-const mod: { [cls: string]: string };
-export default mod;
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'errorMessage': string;
+  'forgotPassword': string;
+  'forgotPasswordLink': string;
+  'socialButton': string;
+  'socialButtonContainer': string;
+  'version': string;
+}
+export const cssExports: CssExports;
+export default cssExports;