@sybilion/uilib 1.2.10 → 1.2.11

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,4 +1,5 @@
 import cn from 'classnames';
+import { useMemo } from 'react';
 
 import { useTheme } from '#uilib/contexts/theme-context';
 import {
@@ -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';
 
@@ -49,6 +49,30 @@ export function NavUserHeader({
   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}>
@@ -84,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} />
             </>
           )}
@@ -111,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/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/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

@@ -41,7 +41,7 @@
   display block
   margin-top var(--p-8)
   padding-bottom var(--p-2)
-  width 50%
+  width 100%
   box-sizing border-box
   text-align center
   font-size 14px

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;

package/src/docs/DocsShell.tsx

@@ -1,10 +1,10 @@
-import { Outlet } from 'react-router-dom';
+import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 
-import { AppHeaderHost, AppHeaderPortal } from '#uilib/components/ui/AppHeader';
-import { Gap } from '#uilib/components/ui/Gap/Gap';
+import { AppHeaderHost } from '#uilib/components/ui/AppHeader';
 import { AppShell, AppShellMainContent } from '#uilib/components/ui/Page';
 import { PageFooter } from '#uilib/components/ui/Page/PageFooter/PageFooter';
 import { PageScroll } from '#uilib/components/ui/Page/PageScroll/PageScroll';
+import { SybilionAppHeader } from '#uilib/components/widgets/SybilionAppHeader';
 import { ThemeToggle } from '#uilib/docs/App/ThemeToggle';
 import { DocsSidebar } from '#uilib/docs/components/DocsSidebar/DocsSidebar';
 
@@ -12,6 +12,9 @@ import LogoSvg from '../../assets/logo.svg';
 import S from './DocsShell.styl';
 
 export function DocsShell() {
+  const location = useLocation();
+  const navigate = useNavigate();
+
   return (
     <PageScroll className={S.root}>
       <AppShell>
@@ -27,10 +30,16 @@ export function DocsShell() {
             />
           }
         >
-          <AppHeaderPortal>
-            <Gap />
-            <ThemeToggle />
-          </AppHeaderPortal>
+          <SybilionAppHeader
+            pathname={location.pathname}
+            onNavigate={href => {
+              void navigate(href);
+            }}
+            authenticated={false}
+            isAuthenticated={false}
+            onLogout={() => undefined}
+            signInSlot={<ThemeToggle />}
+          />
           <Outlet />
         </AppShellMainContent>
       </AppShell>

package/src/docs/components/DocsSidebar/DocsSidebar.tsx

@@ -79,6 +79,7 @@ export function DocsSidebar() {
   useEffect(() => {
     if (activeSection) {
       setExpandedSections(prev => new Set(prev).add(activeSection));
+      setSidebarSearch('');
     }
   }, [activeSection]);
 

package/src/docs/pages/ChartAreaInteractivePage.tsx

@@ -84,7 +84,7 @@ const INITIAL_CHART: ChartDataPoint[] = [
 ];
 
 const DEMO_FORECAST_ITEMS: ForecastItemData[] = [
-  { id: DEMO_FORECAST_ID, name: 'Forecast' },
+  { id: DEMO_FORECAST_ID, name: 'My custom forecast' },
 ];
 
 type DemoMode = 'none' | OverlayMode;

package/src/docs/pages/StandaloneAppLayoutPage/StandaloneAppLayoutPage.styl

@@ -29,7 +29,7 @@
   min-height 100vh
   margin-top var(--p-4)
   padding var(--p-4)
-  border-radius var(--p-2)
+  border-radius var(--p-4)
   border 2px dashed var(--border)
   background-color var(--background)
   color var(--muted-foreground)

package/src/docs/pages/StandaloneAppLayoutPage/StandaloneAppLayoutPage.tsx

@@ -191,10 +191,11 @@ export default function StandaloneAppLayoutPage() {
         title="Standalone app layout"
         subheader={
           <>
-            Live preview of AppShell + Sidebar + main column from
-            docs/standalone-apps.md §4. <br />
-            Full greenfield setup (deps, global CSS, SybilionAuthProvider, SDK)
-            lives in that doc — this page is layout only.
+            Live preview of AppShell + Sidebar + main column.{' '}
+            <br />
+            Greenfield wiring: copy{' '}
+            <code>mini/sybilion-app-template/</code> and follow its README — this
+            page is layout only.
           </>
         }
         actions={<DocsHeaderActions />}

package/src/docs/pages/SybilionAuthLayoutPage.tsx

@@ -0,0 +1,47 @@
+import { PageContentSection } from '#uilib/components/ui/Page';
+import { SybilionAuthLayout } from '#uilib/components/widgets/SybilionAuthLayout';
+import { SybilionSignInPanel } from '#uilib/components/widgets/SybilionSignInPanel';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+export default function SybilionAuthLayoutPage() {
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'SybilionAuthLayout' }]}
+        title="SybilionAuthLayout"
+        subheader="Split-view auth chrome (hero column + form). Standalone apps: copy package logo to public/logo.svg — see Logo."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection title="Preview">
+        <p style={{ marginTop: 0, color: 'var(--muted-foreground)' }}>
+          Clipped height so <code>100vh</code> layout fits the docs shell. Real
+          sign-in route uses full viewport — e.g. <code>SignInPage</code> (wraps
+          this layout + <code>SybilionSignInPanel</code>).
+        </p>
+        <div
+          style={{
+            overflow: 'hidden',
+            borderRadius: 34,
+            border: '2px dashed var(--border)',
+            height: 'min(720px, 85vh)',
+          }}
+        >
+          <SybilionAuthLayout
+            title="Sign In"
+            subtitle="Example — authenticate to continue."
+            style={{ height: '100%' }}
+          >
+            <SybilionSignInPanel
+              onSignIn={() => undefined}
+              forgotPasswordTo="/forgot-password"
+              releasesTo="/releases"
+              versionLabel="0.0.1"
+            />
+          </SybilionAuthLayout>
+        </div>
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/registry.ts

@@ -163,10 +163,10 @@ export const DOC_REGISTRY: DocEntry[] = [
     load: () => import('./pages/InteractiveContentPage'),
   },
   {
-    slug: 'sybilion-auth-provider',
-    title: 'SybilionAuthProvider',
+    slug: 'sybilion-auth-layout',
+    title: 'SybilionAuthLayout',
     section: 'Layout',
-    load: () => import('./pages/SybilionAuthProviderPage'),
+    load: () => import('./pages/SybilionAuthLayoutPage'),
   },
   {
     slug: 'label',

package/src/sybilion-auth/SybilionAuthProvider.tsx

@@ -57,7 +57,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 = {
@@ -144,11 +153,13 @@ function InnerSybilionSession({
   sdk,
   storageKey,
   logoutReturnTo,
+  useFederatedLogout = false,
 }: {
   children: ReactNode;
   sdk: SybilionSDK;
   storageKey: string;
   logoutReturnTo?: string;
+  useFederatedLogout?: boolean;
 }): JSX.Element {
   const auth0 = useAuth0();
   const auth0Ref = useRef(auth0);
@@ -157,6 +168,7 @@ function InnerSybilionSession({
   const [sybilionToken, setSybilionToken] = useState<string | null>(null);
   const [exchangeLoading, setExchangeLoading] = useState(false);
   const [exchangeError, setExchangeError] = useState<string | null>(null);
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
 
   const persistToken = useCallback(
     (t: string | null) => {
@@ -167,15 +179,26 @@ function InnerSybilionSession({
   );
 
   const doLogout = useCallback(() => {
+    setIsLoggingOut(true);
     persistToken(null);
     setExchangeError(null);
-    const returnTo =
-      logoutReturnTo ??
-      (typeof window !== 'undefined' ? window.location.origin : undefined);
-    auth0Ref.current.logout({
-      logoutParams: returnTo ? { returnTo } : undefined,
-    });
-  }, [persistToken, logoutReturnTo]);
+    if (useFederatedLogout) {
+      const returnTo =
+        logoutReturnTo ??
+        (typeof window !== 'undefined' ? window.location.origin : undefined);
+      void auth0Ref.current.logout({
+        logoutParams: returnTo ? { returnTo } : undefined,
+      });
+    } else {
+      void auth0Ref.current.logout({ openUrl: false });
+    }
+  }, [persistToken, logoutReturnTo, useFederatedLogout]);
+
+  useEffect(() => {
+    if (!auth0.isAuthenticated) {
+      setIsLoggingOut(false);
+    }
+  }, [auth0.isAuthenticated]);
 
   const apiBaseUrl = useMemo(() => getSybilionApiOriginFromSdk(sdk), [sdk]);
 
@@ -255,7 +278,8 @@ function InnerSybilionSession({
     exchangeLoading ||
     (Boolean(auth0.isAuthenticated && auth0.user) &&
       sybilionToken === null &&
-      exchangeError === null);
+      exchangeError === null &&
+      !isLoggingOut);
 
   const value = useMemo(
     (): SybilionAuthContextValue => ({
@@ -299,6 +323,7 @@ export function SybilionAuthProvider({
   authorizationParams,
   sybilionTokenStorageKey = DEFAULT_TOKEN_KEY,
   logoutReturnTo,
+  useFederatedLogout = false,
 }: SybilionAuthProviderProps): JSX.Element {
   const mergedAuthParams = useMemo(
     () => ({
@@ -336,6 +361,7 @@ export function SybilionAuthProvider({
         sdk={sdk}
         storageKey={sybilionTokenStorageKey}
         logoutReturnTo={logoutReturnTo}
+        useFederatedLogout={useFederatedLogout}
       >
         {children}
       </InnerSybilionSession>