@sybilion/uilib 1.2.9 → 1.2.11

package/src/contexts/theme-context.tsx

@@ -0,0 +1,106 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+
+import { Theme as ThemeRoot } from '@homecode/ui';
+
+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 };
+
+const ThemeContext = createContext<{
+  theme: ThemeMode;
+  isDarkMode: boolean;
+  setTheme: (theme: ThemeMode) => void;
+  toggleTheme: () => void;
+}>({
+  theme: 'light',
+  isDarkMode: false,
+  setTheme: () => {},
+  toggleTheme: () => {},
+});
+
+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 function ThemeProvider({
+  children,
+  allowLocalStorage = true,
+  activeColor,
+  getThemeConfig: getThemeConfigProp,
+}: ThemeProviderProps) {
+  const getThemeConfig = getThemeConfigProp ?? defaultGetThemeConfig;
+
+  const themeConfigOptions = useMemo<GetThemeConfigOptions>(
+    () => ({ activeColor }),
+    [activeColor],
+  );
+
+  const [theme, setTheme] = useState<ThemeMode>(() => {
+    return (localStorage.getItem('theme') as ThemeMode) || 'light';
+  });
+
+  const [currThemeConfig, setCurrThemeConfig] = useState(() =>
+    getThemeConfig(theme === 'dark', themeConfigOptions),
+  );
+
+  const toggleTheme = useCallback(() => {
+    setTheme(t => (t === 'dark' ? 'light' : 'dark'));
+  }, []);
+
+  useEffect(() => {
+    setCurrThemeConfig(getThemeConfig(theme === 'dark', themeConfigOptions));
+  }, [theme, getThemeConfig, themeConfigOptions]);
+
+  useEffect(() => {
+    const root = document.documentElement;
+    const effectiveTheme = theme;
+
+    root.classList.remove('light', 'dark');
+    root.classList.add(effectiveTheme);
+    if (allowLocalStorage) {
+      localStorage.setItem('theme', theme);
+    }
+  }, [theme, allowLocalStorage]);
+
+  const value = useMemo(
+    () => ({
+      theme,
+      isDarkMode: theme === 'dark',
+      setTheme,
+      toggleTheme,
+    }),
+    [theme, toggleTheme],
+  );
+
+  return (
+    <ThemeContext.Provider value={value}>
+      <ThemeRoot config={currThemeConfig} />
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export const useTheme = () => useContext(ThemeContext);

package/src/docs/App/ThemeToggle.tsx

@@ -1,5 +1,5 @@
 import { Button } from '#uilib/components/ui/Button';
-import { useTheme } from '#uilib/docs/contexts/theme-context';
+import { useTheme } from '#uilib/contexts/theme-context';
 import { MoonIcon, SunIcon } from '@phosphor-icons/react';
 
 export function ThemeToggle() {

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/contexts/theme-context.tsx

@@ -1,68 +1,8 @@
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useState,
-} from 'react';
-
-import { Theme as ThemeRoot } from '@homecode/ui';
-
-import { getThemeConfig } from '../lib/theme';
-
-export type ThemeMode = 'light' | 'dark';
-
-const ThemeContext = createContext<{
-  theme: ThemeMode;
-  isDarkMode: boolean;
-  setTheme: (theme: ThemeMode) => void;
-  toggleTheme: () => void;
-}>({
-  theme: 'light',
-  isDarkMode: false,
-  setTheme: () => {},
-  toggleTheme: () => {},
-});
-
-export function ThemeProvider({ children }: { children: React.ReactNode }) {
-  const [theme, setTheme] = useState<ThemeMode>(() => {
-    return (localStorage.getItem('theme') as ThemeMode) || 'light';
-  });
-
-  const [currThemeConfig, setCurrThemeConfig] = useState(() =>
-    getThemeConfig(theme === 'dark'),
-  );
-
-  const toggleTheme = useCallback(() => {
-    setTheme(theme === 'dark' ? 'light' : 'dark');
-  }, [theme, setTheme]);
-
-  useEffect(() => {
-    setCurrThemeConfig(getThemeConfig(theme === 'dark'));
-  }, [theme]);
-
-  useEffect(() => {
-    const root = document.documentElement;
-    const effectiveTheme = theme;
-
-    root.classList.remove('light', 'dark');
-    root.classList.add(effectiveTheme);
-    localStorage.setItem('theme', theme);
-  }, [theme]);
-
-  return (
-    <ThemeContext.Provider
-      value={{
-        theme,
-        isDarkMode: theme === 'dark',
-        setTheme,
-        toggleTheme,
-      }}
-    >
-      <ThemeRoot config={currThemeConfig} />
-      {children}
-    </ThemeContext.Provider>
-  );
-}
-
-export const useTheme = () => useContext(ThemeContext);
+export {
+  ThemeProvider,
+  useTheme,
+  type GetThemeConfigFn,
+  type GetThemeConfigOptions,
+  type ThemeMode,
+  type ThemeProviderProps,
+} from '#uilib/contexts/theme-context';

package/src/docs/index.tsx

@@ -9,7 +9,7 @@ const root = createRoot(elem);
 
 root.render(
   <BrowserRouter>
-    <ThemeProvider>
+    <ThemeProvider activeColor="#">
       <App />
     </ThemeProvider>
   </BrowserRouter>,

package/src/docs/lib/theme.ts

@@ -7,6 +7,12 @@ const defaultConfig = getConfig();
 
 const alphaMods = [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
 
+export const DEFAULT_THEME_ACTIVE_COLOR = '#9c59ff';
+
+export type GetThemeConfigOptions = {
+  activeColor?: string;
+};
+
 export const colorsConfig = {
   light: {
     ...ThemeHelpers.colorsConfigToVars({
@@ -26,13 +32,18 @@ export const colorsConfig = {
   },
 };
 
-export function getThemeConfig(isDarkTheme: boolean) {
+export function getThemeConfig(
+  isDarkTheme: boolean,
+  options?: GetThemeConfigOptions,
+) {
+  const activeColor = options?.activeColor ?? DEFAULT_THEME_ACTIVE_COLOR;
+
   return {
     ...defaultConfig,
     ...colorsConfig[isDarkTheme ? 'dark' : 'light'],
     ...ThemeHelpers.colorsConfigToVars({
       active: {
-        color: '#9c59ff',
+        color: activeColor,
         mods: {
           // @ts-ignore
           alpha: alphaMods,

package/src/docs/pages/ChartAreaInteractivePage.tsx

@@ -9,7 +9,7 @@ import type {
 import { ForecastItemData } from '#uilib/components/ui/ChartAreaInteractive/ChartLines';
 import { PageContentSection } from '#uilib/components/ui/Page';
 import { Tabs, TabsList, TabsTrigger } from '#uilib/components/ui/Tabs';
-import { useTheme } from '#uilib/docs/contexts/theme-context';
+import { useTheme } from '#uilib/contexts/theme-context';
 import type { ForecastData } from '#uilib/types/forecast-data';
 
 import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
@@ -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/index.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/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>