@shellui/core 0.2.0-beta.5 → 0.3.0-beta.0

package/src/features/auth/utils/toAuthSessionFromSettingsUser.ts

@@ -0,0 +1,36 @@
+import type { SettingsUser } from '@shellui/sdk';
+import type { AuthSession } from '../types';
+import { decodeJwtPayload, normalizeJwtUserGroups } from './decodeJwtPayload';
+
+// Maps an SDK settings user object to the internal auth session shape.
+export const toAuthSessionFromSettingsUser = (
+  settingsUser: SettingsUser,
+  accessToken: string | null = null,
+): AuthSession => {
+  const payload = accessToken ? decodeJwtPayload(accessToken) : null;
+  const userMetadata =
+    payload?.user_metadata && typeof payload.user_metadata === 'object'
+      ? (payload.user_metadata as Record<string, unknown>)
+      : null;
+  const fromJwt = userMetadata ? normalizeJwtUserGroups(userMetadata.groups) : [];
+  const fromSettings = Array.isArray(settingsUser.groups)
+    ? normalizeJwtUserGroups(settingsUser.groups)
+    : [];
+
+  return {
+    accessToken: accessToken ?? '',
+    refreshToken: '',
+    tokenType: 'bearer',
+    // Long-lived synthetic expiry; parent shell controls real auth.
+    expiresAt: Math.floor(Date.now() / 1000) + 60 * 60 * 24 * 365,
+    provider: settingsUser.authProvider,
+    userId: settingsUser.id,
+    userEmail: settingsUser.email,
+    userName: settingsUser.name,
+    userAvatarUrl: settingsUser.profilePicture,
+    userIsStaff: userMetadata?.is_staff === true,
+    userIsCompanyOwner: userMetadata?.is_company_owner === true,
+    userGroups: fromSettings.length ? fromSettings : fromJwt,
+    userPreferences: null,
+  };
+};

package/src/features/config/types.ts

@@ -20,6 +20,12 @@ export interface NavigationItem {
   icon?: string; // Path to SVG icon file (e.g., '/icons/book-open.svg')
   /** When true, hide this item from the sidebar and 404 page; route remains valid and item still appears in Develop settings. */
   hidden?: boolean;
+  /** When true, hide this item from navigation when the user is not authenticated. */
+  hideWhenLoggedOut?: boolean;
+  /** When true, navigating to this route requires authentication and redirects to login with a next URL. */
+  requiresAuth?: boolean;
+  /** When true, this item is available only when Settings > Advanced > Developer features is enabled. */
+  requiresDevMode?: boolean;
   /** When true, hide this item on mobile (bottom nav). Has no effect if hidden is true. */
   hiddenOnMobile?: boolean;
   /** When true, hide this item on desktop (sidebar). Has no effect if hidden is true. */
@@ -34,6 +40,12 @@ export interface NavigationItem {
   position?: 'start' | 'end';
   /** URL to display as a settings panel in Settings > Applications. When set, the nav item appears in the Applications group. */
   settings?: string;
+  /**
+   * Trust control for auth token sharing to iframe apps.
+   * - undefined/true: trusted (default), token can be shared
+   * - false: untrusted, token is never shared
+   */
+  safeForAuthToken?: boolean;
 }
 
 export interface NavigationGroup {
@@ -170,9 +182,48 @@ export interface CookieConsentConfig {
   cookies: CookieDefinition[];
 }
 
+export interface LegalDocumentsConfig {
+  privacyPolicy?: string;
+  termsOfService?: string;
+  legalNotice?: string;
+  dataProcessingAgreement?: string;
+}
+
 /** When set to 'tauri', disables service worker and hides its settings (Tauri uses a different caching system). */
 export type RuntimeType = 'browser' | 'tauri';
 
+/** Supported backend providers for auth/API communication. */
+export type BackendType = 'shellui' | 'supabase';
+
+/** Supported auth login methods that can be declared in config. */
+export type BackendLoginMethod = 'password' | 'oauth' | 'magic_link' | 'web3';
+
+/** Optional login capabilities declared by app config for immediate UI rendering. */
+export interface BackendLoginConfig {
+  /** Enabled login methods shown by the Login view. */
+  methods?: BackendLoginMethod[];
+  /** OAuth providers used when oauth is enabled (e.g. ["github"]). */
+  oauthProviders?: string[];
+}
+
+/** Backend API configuration. */
+export interface BackendConfig {
+  /** Backend provider type. */
+  type: BackendType;
+  /** Base URL used to access backend APIs. */
+  url: string;
+  /** Admin route pathname (e.g. "/admin"). Used as Shell route path for embedded admin panel. */
+  adminPathname?: string;
+  /** Admin content URL loaded in the admin route view (e.g. "https://example.com/admin"). */
+  adminUrl?: string;
+  /** Optional Supabase publishable key (public key). */
+  publishableKey?: string;
+  /** Optional login capabilities used by frontend for immediate rendering. */
+  login?: BackendLoginConfig;
+  /** Optional tenant id used for multi-tenant shellui-auth calls. */
+  companyId?: string | number;
+}
+
 export interface ShellUIConfig {
   port?: number;
   title?: string;
@@ -196,6 +247,10 @@ export interface ShellUIConfig {
   defaultTheme?: string; // Default theme name to use
   /** Sentry error reporting. Load from env (e.g. SENTRY_DSN). Only active in production builds. */
   sentry?: SentryConfig;
+  /** Backend communication config. Defaults to undefined (no backend integration). */
+  backend?: BackendConfig;
   /** Cookie consent: list of cookies by category; accepted ids are stored in settings. */
   cookieConsent?: CookieConsentConfig;
+  /** Legal documents content rendered as markdown. */
+  legalDocuments?: LegalDocumentsConfig;
 }

package/src/features/layouts/AppLayout.tsx

@@ -25,7 +25,8 @@ interface AppLayoutProps {
   title?: string;
   appIcon?: string;
   logo?: string;
-  navigation: (NavigationItem | NavigationGroup)[];
+  navigation?: (NavigationItem | NavigationGroup)[];
+  children?: React.ReactNode;
 }
 
 /** Renders the layout based on settings.layout (override) or config.layout: 'sidebar' (default), 'fullscreen', or 'windows'. Lazy-loads only the active layout. */
@@ -35,6 +36,7 @@ export function AppLayout({
   appIcon,
   logo,
   navigation,
+  children,
 }: AppLayoutProps) {
   const { settings } = useSettings();
   const effectiveLayout: LayoutType = settings.layout ?? layout;
@@ -45,16 +47,16 @@ export function AppLayout({
 
   if (effectiveLayout === 'fullscreen') {
     LayoutComponent = FullscreenLayout;
-    layoutProps = { title, navigation };
+    layoutProps = { title, navigation: navigation || [], children };
   } else if (effectiveLayout === 'windows') {
     LayoutComponent = WindowsLayout;
-    layoutProps = { title, appIcon, logo, navigation };
+    layoutProps = { title, appIcon, logo, navigation: navigation || [] };
   } else if (effectiveLayout === 'app-bar') {
     LayoutComponent = AppBarLayout;
-    layoutProps = { title, appIcon, logo, navigation };
+    layoutProps = { title, appIcon, logo, navigation: navigation || [] };
   } else {
     LayoutComponent = SidebarLayout;
-    layoutProps = { title, appIcon, logo, navigation };
+    layoutProps = { title, appIcon, logo, navigation: navigation || [] };
   }
   return (
     <ModalProvider>
@@ -62,7 +64,7 @@ export function AppLayout({
         <SonnerProvider>
           <OverlayShell>
             <Suspense fallback={<LayoutFallback />}>
-              <LayoutComponent {...layoutProps} />
+              {children ? children : <LayoutComponent {...layoutProps} />}
             </Suspense>
           </OverlayShell>
         </SonnerProvider>

package/src/features/layouts/appbar/AppBarLayout.tsx

@@ -4,10 +4,12 @@ import { useTranslation } from 'react-i18next';
 import { shellui } from '@shellui/sdk';
 import type { NavigationItem, NavigationGroup } from '../../config/types';
 import {
+  filterNavigationForAuthState,
   filterNavigationByViewport,
   flattenNavigationItems,
   getActivePathPrefix,
   getNavPathPrefix,
+  hasLoginNavigationItem,
   resolveLocalizedString as resolveNavLabel,
   splitNavigationByPosition,
   withHomepageWhenNoRoot,
@@ -15,6 +17,9 @@ import {
 import { Select } from '../../../components/ui/select';
 import { AppBarTooltip, TooltipProvider } from '../../../components/ui/tooltip';
 import { cn } from '../../../lib/utils';
+import { LoginButton } from '../../auth/components/LoginButton';
+import { useAuth } from '../../auth/hooks/useAuth';
+import { useSettings } from '../../settings/hooks/useSettings';
 
 const TOP_BAR_MAX_HEIGHT = 42;
 
@@ -142,22 +147,30 @@ function TopBarEndItem({
 
 export function AppBarLayout({ title, logo, navigation }: AppBarLayoutProps) {
   const { i18n } = useTranslation();
+  const { isAuthenticated } = useAuth();
+  const { settings } = useSettings();
   const location = useLocation();
   const navigate = useNavigate();
   const currentLanguage = i18n.language || 'en';
+  const hasCustomLoginNav = useMemo(() => hasLoginNavigationItem(navigation), [navigation]);
+  const authAwareNavigation = useMemo(
+    () =>
+      filterNavigationForAuthState(navigation, isAuthenticated, settings.developerFeatures.enabled),
+    [navigation, isAuthenticated, settings.developerFeatures.enabled],
+  );
 
   const { endNavItems, navigationItems, displayStartItems, activePathPrefix } = useMemo(() => {
-    const desktopNav = filterNavigationByViewport(navigation, 'desktop');
+    const desktopNav = filterNavigationByViewport(authAwareNavigation, 'desktop');
     const { start, end } = splitNavigationByPosition(desktopNav);
     const startItems = flattenNavigationItems(start).filter((i) => !i.hidden);
-    const flat = flattenNavigationItems(navigation);
+    const flat = flattenNavigationItems(authAwareNavigation);
     return {
       endNavItems: flattenNavigationItems(end).filter((i) => !i.hidden),
       navigationItems: flat,
       displayStartItems: withHomepageWhenNoRoot(startItems),
       activePathPrefix: getActivePathPrefix(location.pathname, flat),
     };
-  }, [navigation, location.pathname]);
+  }, [authAwareNavigation, location.pathname]);
 
   useEffect(() => {
     if (!title) return;
@@ -220,9 +233,9 @@ export function AppBarLayout({ title, logo, navigation }: AppBarLayoutProps) {
               }
             }}
           >
-            {displayStartItems.map((item) => (
+            {displayStartItems.map((item, index) => (
               <option
-                key={item.path || 'root'}
+                key={`${item.path || 'root'}-${item.url}-${item.openIn || 'default'}-${index}`}
                 value={getNavPathPrefix(item)}
               >
                 {resolveNavLabel(item.label, currentLanguage) || item.path || 'Home'}
@@ -233,24 +246,30 @@ export function AppBarLayout({ title, logo, navigation }: AppBarLayoutProps) {
 
         <div className="flex-1 min-w-0" />
 
-        {/* End links: icon-only or first letter + tooltip */}
-        {endNavItems.length > 0 && (
-          <TooltipProvider
-            delayDuration={200}
-            skipDelayDuration={0}
-          >
-            <div className="flex items-center gap-0.5 shrink-0">
-              {endNavItems.map((item) => (
-                <TopBarEndItem
-                  key={item.path}
-                  item={item}
-                  label={resolveNavLabel(item.label, currentLanguage) || item.path || ''}
-                  activePathPrefix={activePathPrefix}
-                />
-              ))}
-            </div>
-          </TooltipProvider>
-        )}
+        <div className="flex items-center gap-1 shrink-0">
+          {/* End links: icon-only or first letter + tooltip */}
+          {endNavItems.length > 0 && (
+            <TooltipProvider
+              delayDuration={200}
+              skipDelayDuration={0}
+            >
+              <div className="flex items-center gap-0.5">
+                {endNavItems.map((item) => (
+                  <TopBarEndItem
+                    key={item.path}
+                    item={item}
+                    label={resolveNavLabel(item.label, currentLanguage) || item.path || ''}
+                    activePathPrefix={activePathPrefix}
+                  />
+                ))}
+              </div>
+            </TooltipProvider>
+          )}
+          <LoginButton
+            variant="appbar"
+            hideWhenLoggedOut={hasCustomLoginNav}
+          />
+        </div>
       </header>
 
       <main className="flex-1 flex flex-col overflow-auto min-h-0">

package/src/features/layouts/fullscreen/FullscreenLayout.tsx

@@ -7,6 +7,7 @@ import { flattenNavigationItems } from '../utils';
 interface FullscreenLayoutProps {
   title?: string;
   navigation: (NavigationItem | NavigationGroup)[];
+  children?: React.ReactNode;
 }
 
 function resolveLocalizedLabel(
@@ -18,7 +19,7 @@ function resolveLocalizedLabel(
 }
 
 /** Full-width layout with no sidebar or navigation; only content area. Modal, drawer and providers are still active. */
-export function FullscreenLayout({ title, navigation }: FullscreenLayoutProps) {
+export function FullscreenLayout({ title, navigation, children }: FullscreenLayoutProps) {
   const location = useLocation();
   const { i18n } = useTranslation();
   const currentLanguage = i18n.language || 'en';
@@ -43,7 +44,7 @@ export function FullscreenLayout({ title, navigation }: FullscreenLayoutProps) {
 
   return (
     <main className="flex flex-col w-full h-screen overflow-hidden bg-background">
-      <Outlet />
+      {children || <Outlet />}
     </main>
   );
 }

package/src/features/layouts/sidebar/SidebarInner.tsx

@@ -2,6 +2,7 @@ import { Link } from 'react-router';
 import type { NavigationItem, NavigationGroup } from '../../config/types';
 import { SidebarHeader, SidebarContent, SidebarFooter } from '../../../components/ui/sidebar';
 import { NavigationContent } from './NavigationContent';
+import { LoginButton } from '../../auth/components/LoginButton';
 
 /** Reusable sidebar inner: header, main nav, footer. Used in desktop Sidebar and mobile Drawer. */
 export function SidebarInner({
@@ -9,11 +10,13 @@ export function SidebarInner({
   logo,
   startNav,
   endItems,
+  showAuthButton,
 }: {
   title?: string;
   logo?: string;
   startNav: (NavigationItem | NavigationGroup)[];
   endItems: (NavigationItem | NavigationGroup)[];
+  showAuthButton: boolean;
 }) {
   return (
     <>
@@ -38,11 +41,10 @@ export function SidebarInner({
       <SidebarContent className="gap-1">
         <NavigationContent navigation={startNav} />
       </SidebarContent>
-      {endItems.length > 0 && (
-        <SidebarFooter>
-          <NavigationContent navigation={endItems} />
-        </SidebarFooter>
-      )}
+      <SidebarFooter>
+        {endItems.length > 0 && <NavigationContent navigation={endItems} />}
+        {showAuthButton && <LoginButton variant="sidebar" />}
+      </SidebarFooter>
     </>
   );
 }

package/src/features/layouts/sidebar/SidebarLayout.tsx

@@ -4,9 +4,11 @@ import { useTranslation } from 'react-i18next';
 import { Sidebar } from '../../../components/ui/sidebar';
 import { cn } from '../../../lib/utils';
 import {
+  filterNavigationForAuthState,
   filterNavigationByViewport,
   filterNavigationForSidebar,
   flattenNavigationItems,
+  hasLoginNavigationItem,
   resolveLocalizedString as resolveLocalizedLabel,
   splitNavigationByPosition,
 } from '../utils';
@@ -14,18 +16,28 @@ import { SidebarInner } from './SidebarInner';
 import { MobileBottomNav } from './MobileBottomNav';
 import type { SidebarLayoutProps } from './types';
 import { useNavigationItems } from '../../../routes/hooks/useNavigationItems';
+import { useAuth } from '../../auth/hooks/useAuth';
+import { useSettings } from '../../settings/hooks/useSettings';
 
 const SidebarLayoutContent = ({ title, logo, navigation }: SidebarLayoutProps) => {
   const { i18n } = useTranslation();
+  const { isAuthenticated } = useAuth();
+  const { settings } = useSettings();
   const { navigationItem, rootItem } = useNavigationItems();
 
   const currentLanguage = useMemo(() => {
     return i18n.language || 'en';
   }, [i18n]);
 
+  const hasCustomLoginNav = useMemo(() => hasLoginNavigationItem(navigation), [navigation]);
+  const authAwareNavigation = useMemo(
+    () =>
+      filterNavigationForAuthState(navigation, isAuthenticated, settings.developerFeatures.enabled),
+    [navigation, isAuthenticated, settings.developerFeatures.enabled],
+  );
   const { startNav, endItems, mobileNavItems } = useMemo(() => {
-    const desktopNav = filterNavigationByViewport(navigation, 'desktop');
-    const mobileNav = filterNavigationByViewport(navigation, 'mobile');
+    const desktopNav = filterNavigationByViewport(authAwareNavigation, 'desktop');
+    const mobileNav = filterNavigationByViewport(authAwareNavigation, 'mobile');
     const { start, end } = splitNavigationByPosition(desktopNav);
     const mobileFlat = flattenNavigationItems(mobileNav);
 
@@ -34,7 +46,7 @@ const SidebarLayoutContent = ({ title, logo, navigation }: SidebarLayoutProps) =
       endItems: end,
       mobileNavItems: mobileFlat,
     };
-  }, [navigation]);
+  }, [authAwareNavigation]);
 
   useEffect(() => {
     if (!title) return;
@@ -55,6 +67,7 @@ const SidebarLayoutContent = ({ title, logo, navigation }: SidebarLayoutProps) =
             logo={logo}
             startNav={startNav}
             endItems={endItems}
+            showAuthButton={!hasCustomLoginNav || isAuthenticated}
           />
         </Sidebar>
 

package/src/features/layouts/utils.ts

@@ -1,4 +1,5 @@
 import type { NavigationItem, NavigationGroup, LocalizedString } from '../config/types';
+import urls from '../../constants/urls';
 
 /** Path prefix for a nav item: "/" for root (path '' or '/'), otherwise "/{path}". */
 export function getNavPathPrefix(item: NavigationItem): string {
@@ -133,6 +134,59 @@ export function withHomepageWhenNoRoot(items: NavigationItem[]): NavigationItem[
   return [HOMEPAGE_NAV_ITEM, ...items];
 }
 
+const normalizePathForComparison = (value: string): string => {
+  const trimmed = value.trim();
+  if (!trimmed) return '';
+  try {
+    const parsed = new URL(trimmed, 'http://localhost');
+    return parsed.pathname.replace(/\/+$/, '') || '/';
+  } catch {
+    return trimmed.replace(/\/+$/, '') || '/';
+  }
+};
+
+/** True when a nav item URL points to the built-in login route. */
+export function isLoginNavigationUrl(url: string): boolean {
+  return normalizePathForComparison(url) === urls.login;
+}
+
+/** Whether the config defines at least one navigation item targeting the login route. */
+export function hasLoginNavigationItem(navigation: (NavigationItem | NavigationGroup)[]): boolean {
+  return flattenNavigationItems(navigation).some((item) => isLoginNavigationUrl(item.url));
+}
+
+/**
+ * Hide login navigation entries only when authenticated, so custom login entries
+ * can still be used while signed out (e.g. open login in modal/drawer).
+ */
+export function filterNavigationForAuthState(
+  navigation: (NavigationItem | NavigationGroup)[],
+  isAuthenticated: boolean,
+  isDevModeEnabled = false,
+): (NavigationItem | NavigationGroup)[] {
+  if (navigation.length === 0) return navigation;
+  return navigation
+    .map((item) => {
+      if ('title' in item && 'items' in item) {
+        const group = item as NavigationGroup;
+        const visibleItems = group.items.filter((navItem) => {
+          if (navItem.hideWhenLoggedOut && !isAuthenticated) return false;
+          if (navItem.requiresDevMode && !isDevModeEnabled) return false;
+          if (isAuthenticated && isLoginNavigationUrl(navItem.url)) return false;
+          return true;
+        });
+        if (visibleItems.length === 0) return null;
+        return { ...group, items: visibleItems };
+      }
+      const navItem = item as NavigationItem;
+      if (navItem.hideWhenLoggedOut && !isAuthenticated) return null;
+      if (navItem.requiresDevMode && !isDevModeEnabled) return null;
+      if (isAuthenticated && isLoginNavigationUrl(navItem.url)) return null;
+      return item;
+    })
+    .filter((item): item is NavigationItem | NavigationGroup => item !== null);
+}
+
 /** Split navigation by position: start (main content) and end (footer). */
 export function splitNavigationByPosition(navigation: (NavigationItem | NavigationGroup)[]): {
   start: (NavigationItem | NavigationGroup)[];

package/src/features/layouts/windows/WindowsLayout.tsx

@@ -11,16 +11,20 @@ import { useTranslation } from 'react-i18next';
 import { shellui } from '@shellui/sdk';
 import type { NavigationItem, NavigationGroup } from '../../config/types';
 import {
+  filterNavigationForAuthState,
   flattenNavigationItems,
   getActivePathPrefix,
   getNavPathPrefix,
+  hasLoginNavigationItem,
   resolveLocalizedString as resolveNavLabel,
   splitNavigationByPosition,
 } from '../utils';
-import { useSettings } from '../../settings/SettingsContext';
+import { useSettings } from '../../settings/hooks/useSettings';
 import { ContentView } from '../../../components/ContentView';
 import { cn } from '../../../lib/utils';
 import { Z_INDEX } from '../../../lib/z-index';
+import { LoginButton } from '../../auth/components/LoginButton';
+import { useAuth } from '../../auth/hooks/useAuth';
 
 interface WindowsLayoutProps {
   title?: string;
@@ -509,17 +513,24 @@ export function WindowsLayout({
 }: WindowsLayoutProps) {
   const location = useLocation();
   const { i18n } = useTranslation();
+  const { isAuthenticated } = useAuth();
   const { settings } = useSettings();
   const currentLanguage = i18n.language || 'en';
+  const hasCustomLoginNav = useMemo(() => hasLoginNavigationItem(navigation), [navigation]);
+  const authAwareNavigation = useMemo(
+    () =>
+      filterNavigationForAuthState(navigation, isAuthenticated, settings.developerFeatures.enabled),
+    [navigation, isAuthenticated, settings.developerFeatures.enabled],
+  );
   const timeZone = settings.region?.timezone ?? getBrowserTimezone();
   const { startNavItems, endNavItems, navigationItems } = useMemo(() => {
-    const { start, end } = splitNavigationByPosition(navigation);
+    const { start, end } = splitNavigationByPosition(authAwareNavigation);
     return {
       startNavItems: flattenNavigationItems(start),
       endNavItems: end,
-      navigationItems: flattenNavigationItems(navigation),
+      navigationItems: flattenNavigationItems(authAwareNavigation),
     };
-  }, [navigation]);
+  }, [authAwareNavigation]);
 
   const [windows, setWindows] = useState<WindowState[]>([]);
   /** Id of the window that is on top (first plan). Clicking a window or its taskbar button sets this. */
@@ -836,6 +847,13 @@ export function WindowsLayout({
           </div>
         )}
 
+        <div className="flex items-center shrink-0 border-l border-sidebar-border pl-2 ml-1">
+          <LoginButton
+            variant="windows"
+            hideWhenLoggedOut={hasCustomLoginNav}
+          />
+        </div>
+
         {/* Date and time (extreme bottom right, OS-style); uses region timezone from settings */}
         <div
           className="flex flex-col items-end justify-center shrink-0 px-3 py-1 text-sidebar-foreground border-l border-sidebar-border ml-1 min-w-0"

package/src/features/legal/LegalDocumentContent.tsx

@@ -0,0 +1,102 @@
+import type { LegalDocumentDescriptor } from './legalDocuments';
+import ReactMarkdown from 'react-markdown';
+import { Link } from 'react-router';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '../../components/ui/breadcrumb';
+import urls from '../../constants/urls';
+
+type LegalDocumentContentProps = {
+  document: LegalDocumentDescriptor;
+};
+
+export const LegalDocumentContent = ({ document }: LegalDocumentContentProps) => {
+  const isIframeView = typeof window !== 'undefined' && window.parent !== window;
+
+  return (
+    <article className="space-y-5">
+      {!isIframeView && (
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink asChild>
+                <Link to={urls.legalDocuments}>Legal documents</Link>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>{document.title}</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      )}
+      <div className="max-w-none space-y-4 text-sm leading-7 text-card-foreground">
+        <ReactMarkdown
+          components={{
+            h1: ({ children }) => (
+              <h1
+                className="text-3xl font-semibold tracking-tight text-card-foreground"
+                style={{ fontFamily: 'var(--heading-font-family, inherit)' }}
+              >
+                {children}
+              </h1>
+            ),
+            h2: ({ children }) => (
+              <h2
+                className="mt-8 border-b pb-2 text-2xl font-semibold tracking-tight text-card-foreground first:mt-0"
+                style={{ fontFamily: 'var(--heading-font-family, inherit)' }}
+              >
+                {children}
+              </h2>
+            ),
+            h3: ({ children }) => (
+              <h3
+                className="mt-6 text-xl font-semibold tracking-tight text-card-foreground"
+                style={{ fontFamily: 'var(--heading-font-family, inherit)' }}
+              >
+                {children}
+              </h3>
+            ),
+            p: ({ children }) => (
+              <p className="text-sm leading-7 text-card-foreground">{children}</p>
+            ),
+            ul: ({ children }) => <ul className="my-4 ml-6 list-disc space-y-2">{children}</ul>,
+            ol: ({ children }) => <ol className="my-4 ml-6 list-decimal space-y-2">{children}</ol>,
+            li: ({ children }) => (
+              <li className="text-sm leading-7 text-card-foreground">{children}</li>
+            ),
+            strong: ({ children }) => (
+              <strong className="font-semibold text-card-foreground">{children}</strong>
+            ),
+            a: ({ href, children }) => (
+              <a
+                href={href}
+                target="_blank"
+                rel="noreferrer"
+                className="font-medium text-primary underline underline-offset-4"
+              >
+                {children}
+              </a>
+            ),
+            blockquote: ({ children }) => (
+              <blockquote className="border-l-2 border-border pl-4 italic text-muted-foreground">
+                {children}
+              </blockquote>
+            ),
+            code: ({ children }) => (
+              <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">{children}</code>
+            ),
+            hr: () => <hr className="my-6 border-border" />,
+          }}
+        >
+          {document.content}
+        </ReactMarkdown>
+      </div>
+    </article>
+  );
+};