@actuate-media/cms-admin 0.8.0 → 0.8.1

package/src/AdminRoot.tsx

@@ -1,50 +1,67 @@
-'use client';
-
-import { useState, useMemo, useEffect, useRef } from 'react';
-import { Layout } from './layout/Layout.js';
-import { useAdminRouter } from './router/index.js';
-import { ensureCsrfToken } from './lib/api.js';
-import { Dashboard } from './views/Dashboard.js';
-import { CollectionList } from './views/CollectionList.js';
-import { DocumentEdit } from './views/DocumentEdit.js';
-import { MediaBrowser } from './views/MediaBrowser.js';
-import { Settings } from './views/Settings.js';
-import { Forms } from './views/Forms.js';
-import { FormEditor } from './views/FormEditor.js';
-import { FormSubmissions } from './views/FormSubmissions.js';
-import { Users } from './views/Users.js';
-import { SEO } from './views/SEO.js';
-import { ScriptTags } from './views/ScriptTags.js';
-import { ScriptTagEditor } from './views/ScriptTagEditor.js';
-import { SetupWizard } from './views/SetupWizard.js';
-import { Login } from './views/Login.js';
-import { ForgotPassword } from './views/ForgotPassword.js';
-import { ResetPassword } from './views/ResetPassword.js';
-import { ErrorBoundary } from './components/ErrorBoundary.js';
-import { ThemeProvider } from './components/ThemeProvider.js';
-import { LocaleProvider } from './components/LocaleProvider.js';
-import { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts.js';
-import { PageBuilder } from './views/page-builder/PageBuilder.js';
-import { SavedSections } from './views/page-builder/SavedSections.js';
-import { PageTemplates } from './views/page-builder/PageTemplates.js';
+'use client'
+
+import { useState, useMemo, useEffect, useRef } from 'react'
+import { Layout } from './layout/Layout.js'
+import { useAdminRouter } from './router/index.js'
+import { ensureCsrfToken } from './lib/api.js'
+import { Dashboard } from './views/Dashboard.js'
+import { CollectionList } from './views/CollectionList.js'
+import { DocumentEdit } from './views/DocumentEdit.js'
+import { MediaBrowser } from './views/MediaBrowser.js'
+import { Settings } from './views/Settings.js'
+import { Forms } from './views/Forms.js'
+import { FormEditor } from './views/FormEditor.js'
+import { FormSubmissions } from './views/FormSubmissions.js'
+import { Users } from './views/Users.js'
+import { SEO } from './views/SEO.js'
+import { ScriptTags } from './views/ScriptTags.js'
+import { ScriptTagEditor } from './views/ScriptTagEditor.js'
+import { SetupWizard } from './views/SetupWizard.js'
+import { Login } from './views/Login.js'
+import { ForgotPassword } from './views/ForgotPassword.js'
+import { ResetPassword } from './views/ResetPassword.js'
+import { ErrorBoundary } from './components/ErrorBoundary.js'
+import { ThemeProvider } from './components/ThemeProvider.js'
+import { LocaleProvider } from './components/LocaleProvider.js'
+import { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts.js'
+import { PageBuilder } from './views/page-builder/PageBuilder.js'
+import { SavedSections } from './views/page-builder/SavedSections.js'
+import { PageTemplates } from './views/page-builder/PageTemplates.js'
 
 export interface AdminRootProps {
-  config: any;
-  session: any;
-  basePath?: string;
-  initialPath?: string;
-  setupRequired?: boolean;
-  onSetupComplete?: (data: { name: string; email: string; password: string }) => Promise<{ success: boolean; error?: string }>;
-  onLogin?: (email: string, password: string, captchaToken?: string) => Promise<{ success: boolean; error?: string }>;
-  captchaConfig?: { provider: 'recaptcha' | 'turnstile' | 'none'; siteKey: string | null };
+  config: any
+  session: any
+  basePath?: string
+  initialPath?: string
+  setupRequired?: boolean
+  onSetupComplete?: (data: {
+    name: string
+    email: string
+    password: string
+  }) => Promise<{ success: boolean; error?: string }>
+  onLogin?: (
+    email: string,
+    password: string,
+    captchaToken?: string,
+  ) => Promise<{ success: boolean; error?: string }>
+  captchaConfig?: { provider: 'recaptcha' | 'turnstile' | 'none'; siteKey: string | null }
 }
 
-function AdminShell({ config, session, basePath = '/admin', initialPath = '/', setupRequired, onSetupComplete, onLogin, captchaConfig }: AdminRootProps) {
-  const { currentPath, navigate, matchRoute } = useAdminRouter(basePath, initialPath);
-  const [shortcutHelpOpen, setShortcutHelpOpen] = useState(false);
-
-  useBranding(config);
-  useAdminPageTitle(config, currentPath);
+function AdminShell({
+  config,
+  session,
+  basePath = '/admin',
+  initialPath = '/',
+  setupRequired,
+  onSetupComplete,
+  onLogin,
+  captchaConfig,
+}: AdminRootProps) {
+  const { currentPath, navigate, matchRoute } = useAdminRouter(basePath, initialPath)
+  const [shortcutHelpOpen, setShortcutHelpOpen] = useState(false)
+
+  useBranding(config)
+  useAdminPageTitle(config, currentPath)
 
   // When the session was minted via a custom Server Action (the Next.js App
   // Router pattern) the admin won't have hit /auth/login directly and thus
@@ -53,47 +70,79 @@ function AdminShell({ config, session, basePath = '/admin', initialPath = '/', s
   // also bootstraps lazily inside non-GET requests as a belt-and-braces.
   useEffect(() => {
     if (session) {
-      void ensureCsrfToken();
-    }
-  }, [session]);
-
-  const shortcuts = useMemo(() => ({
-    'mod+k': () => {
-      const searchInput = document.querySelector<HTMLInputElement>('input[placeholder*="Search"]');
-      searchInput?.focus();
-    },
-    'mod+s': () => {
-      const saveBtn = document.querySelector<HTMLButtonElement>('[data-shortcut="save"]');
-      saveBtn?.click();
-    },
-    'escape': () => {
-      const closeBtn = document.querySelector<HTMLButtonElement>('[data-shortcut="close"]');
-      closeBtn?.click();
-    },
-    'mod+/': () => {
-      setShortcutHelpOpen(prev => !prev);
-    },
-  }), []);
-
-  useKeyboardShortcuts(shortcuts);
+      void ensureCsrfToken()
+    }
+  }, [session])
+
+  const shortcuts = useMemo(
+    () => ({
+      'mod+k': () => {
+        const searchInput = document.querySelector<HTMLInputElement>('input[placeholder*="Search"]')
+        searchInput?.focus()
+      },
+      'mod+s': () => {
+        const saveBtn = document.querySelector<HTMLButtonElement>('[data-shortcut="save"]')
+        saveBtn?.click()
+      },
+      escape: () => {
+        const closeBtn = document.querySelector<HTMLButtonElement>('[data-shortcut="close"]')
+        closeBtn?.click()
+      },
+      'mod+/': () => {
+        setShortcutHelpOpen((prev) => !prev)
+      },
+    }),
+    [],
+  )
+
+  useKeyboardShortcuts(shortcuts)
+
+  // IMPORTANT: this useMemo MUST stay above the `setupRequired` / `!session`
+  // early returns. React's Rules of Hooks require the same number of hooks
+  // on every render — putting it below the early returns means we call N
+  // hooks pre-login and N+1 post-login, which crashes AdminShell with
+  // "Rendered more hooks than during the previous render." (caught by the
+  // e2e auth.spec.ts → login redirects to dashboard test).
+  const collectionMap = useMemo(() => {
+    const map = new Map<string, { slug: string; type?: string }>()
+    if (config?.collections) {
+      for (const c of Object.values(
+        config.collections as Record<string, { slug: string; type?: string }>,
+      )) {
+        if (c?.slug) map.set(c.slug, c)
+      }
+    }
+    if (map.size === 0) {
+      map.set('pages', { slug: 'pages', type: 'page' })
+      map.set('posts', { slug: 'posts' })
+    }
+    return map
+  }, [config])
 
   if (setupRequired && onSetupComplete) {
-    return <SetupWizard onComplete={onSetupComplete} siteName={config?.admin?.branding?.name ?? 'Actuate CMS'} />;
+    return (
+      <SetupWizard
+        onComplete={onSetupComplete}
+        siteName={config?.admin?.branding?.name ?? 'Actuate CMS'}
+      />
+    )
   }
 
   if (!session && !setupRequired) {
     if (matchRoute('/forgot-password')) {
-      return <ForgotPassword onNavigate={navigate} />;
+      return <ForgotPassword onNavigate={navigate} />
     }
 
-    const resetMatch = matchRoute('/reset-password');
+    const resetMatch = matchRoute('/reset-password')
     if (resetMatch) {
-      const params = new URLSearchParams(typeof window !== 'undefined' ? window.location.search : '');
-      return <ResetPassword onNavigate={navigate} token={params.get('token')} />;
+      const params = new URLSearchParams(
+        typeof window !== 'undefined' ? window.location.search : '',
+      )
+      return <ResetPassword onNavigate={navigate} token={params.get('token')} />
     }
 
     if (onLogin) {
-      return <Login onLogin={onLogin} onNavigate={navigate} captchaConfig={captchaConfig} />;
+      return <Login onLogin={onLogin} onNavigate={navigate} captchaConfig={captchaConfig} />
     }
     return (
       <div className="min-h-screen flex items-center justify-center bg-background">
@@ -102,32 +151,12 @@ function AdminShell({ config, session, basePath = '/admin', initialPath = '/', s
           <p className="text-sm text-muted-foreground">Please log in to access the admin panel.</p>
         </div>
       </div>
-    );
+    )
   }
 
-  // Map of collection slug → definition. Used to:
-  //   1. Decide which editor (PageBuilder vs DocumentEdit) to render based
-  //      on `collection.type === 'page'`.
-  //   2. Skip collections that collide with reserved admin paths so a
-  //      consumer-defined collection named `users` can't hijack the Users
-  //      view (or vice versa).
-  const collectionMap = useMemo(() => {
-    const map = new Map<string, { slug: string; type?: string }>();
-    if (config?.collections) {
-      for (const c of Object.values(config.collections as Record<string, { slug: string; type?: string }>)) {
-        if (c?.slug) map.set(c.slug, c);
-      }
-    }
-    if (map.size === 0) {
-      map.set('pages', { slug: 'pages', type: 'page' });
-      map.set('posts', { slug: 'posts' });
-    }
-    return map;
-  }, [config]);
-
   function renderView() {
     if (matchRoute('/')) {
-      return <Dashboard config={config} session={session} onNavigate={navigate} />;
+      return <Dashboard config={config} session={session} onNavigate={navigate} />
     }
 
     // Reserved admin routes — must match BEFORE iterating collection slugs
@@ -135,122 +164,165 @@ function AdminShell({ config, session, basePath = '/admin', initialPath = '/', s
     // a collection slugged `media`, `users`, or `settings`).
 
     if (matchRoute('/media')) {
-      return <MediaBrowser onNavigate={navigate} />;
+      return <MediaBrowser onNavigate={navigate} />
     }
 
     if (matchRoute('/forms/new')) {
-      return <FormEditor onNavigate={navigate} />;
+      return <FormEditor onNavigate={navigate} />
     }
-    const formEdit = matchRoute('/forms/:id/edit');
+    const formEdit = matchRoute('/forms/:id/edit')
     if (formEdit?.id) {
-      return <FormEditor formId={formEdit.id} onNavigate={navigate} />;
+      return <FormEditor formId={formEdit.id} onNavigate={navigate} />
     }
-    const formSubmissions = matchRoute('/forms/:id/submissions');
+    const formSubmissions = matchRoute('/forms/:id/submissions')
     if (formSubmissions?.id) {
-      return <FormSubmissions formId={formSubmissions.id} onNavigate={navigate} />;
+      return <FormSubmissions formId={formSubmissions.id} onNavigate={navigate} />
     }
     if (matchRoute('/forms')) {
-      return <Forms onNavigate={navigate} />;
+      return <Forms onNavigate={navigate} />
     }
 
     if (matchRoute('/seo/redirects')) {
-      return <SEO onNavigate={navigate} initialTab="redirects" />;
+      return <SEO onNavigate={navigate} initialTab="redirects" />
     }
     if (matchRoute('/seo/canonicals')) {
-      return <SEO onNavigate={navigate} initialTab="canonicals" />;
+      return <SEO onNavigate={navigate} initialTab="canonicals" />
     }
     if (matchRoute('/seo/links')) {
-      return <SEO onNavigate={navigate} initialTab="links" />;
+      return <SEO onNavigate={navigate} initialTab="links" />
     }
     if (matchRoute('/seo')) {
-      return <SEO onNavigate={navigate} initialTab="pages" />;
+      return <SEO onNavigate={navigate} initialTab="pages" />
     }
 
     if (matchRoute('/script-tags/new')) {
-      return <ScriptTagEditor onNavigate={navigate} />;
+      return <ScriptTagEditor onNavigate={navigate} />
     }
-    const scriptTagEdit = matchRoute('/script-tags/:id');
+    const scriptTagEdit = matchRoute('/script-tags/:id')
     if (scriptTagEdit?.id) {
-      return <ScriptTagEditor tagId={scriptTagEdit.id} onNavigate={navigate} />;
+      return <ScriptTagEditor tagId={scriptTagEdit.id} onNavigate={navigate} />
     }
     if (matchRoute('/script-tags')) {
-      return <ScriptTags onNavigate={navigate} />;
+      return <ScriptTags onNavigate={navigate} />
     }
 
     if (matchRoute('/saved-sections')) {
-      return <SavedSections onNavigate={navigate} config={config} />;
+      return <SavedSections onNavigate={navigate} config={config} />
     }
 
     if (matchRoute('/page-templates')) {
-      return <PageTemplates onNavigate={navigate} />;
+      return <PageTemplates onNavigate={navigate} />
     }
 
     if (matchRoute('/users')) {
-      return <Users onNavigate={navigate} />;
+      return <Users onNavigate={navigate} />
     }
 
     if (matchRoute('/settings')) {
-      return <Settings onNavigate={navigate} config={config} />;
+      return <Settings onNavigate={navigate} config={config} />
     }
 
     // Page Builder routes — explicit /page-builder/* takes precedence over
     // the collection-derived routing below, but we ALSO route a collection
     // declared as `type: 'page'` through the Page Builder by default.
-    const pageBuilderNew = matchRoute('/page-builder/new');
+    const pageBuilderNew = matchRoute('/page-builder/new')
     if (pageBuilderNew) {
-      return <PageBuilder collectionSlug="pages" config={config} onNavigate={navigate} />;
+      return <PageBuilder collectionSlug="pages" config={config} onNavigate={navigate} />
     }
 
-    const pageBuilderEdit = matchRoute('/page-builder/:id');
+    const pageBuilderEdit = matchRoute('/page-builder/:id')
     if (pageBuilderEdit?.id) {
-      return <PageBuilder documentId={pageBuilderEdit.id} collectionSlug="pages" config={config} onNavigate={navigate} />;
+      return (
+        <PageBuilder
+          documentId={pageBuilderEdit.id}
+          collectionSlug="pages"
+          config={config}
+          onNavigate={navigate}
+        />
+      )
     }
 
     const RESERVED_SLUGS = new Set([
-      'media', 'forms', 'seo', 'script-tags', 'saved-sections',
-      'page-templates', 'users', 'settings', 'page-builder', 'collections',
-    ]);
+      'media',
+      'forms',
+      'seo',
+      'script-tags',
+      'saved-sections',
+      'page-templates',
+      'users',
+      'settings',
+      'page-builder',
+      'collections',
+    ])
 
     for (const [slug, def] of collectionMap) {
-      if (RESERVED_SLUGS.has(slug)) continue;
+      if (RESERVED_SLUGS.has(slug)) continue
 
-      const isPageType = def.type === 'page';
-      const newMatch = matchRoute(`/${slug}/new`);
+      const isPageType = def.type === 'page'
+      const newMatch = matchRoute(`/${slug}/new`)
       if (newMatch) {
-        return isPageType
-          ? <PageBuilder collectionSlug={slug} config={config} onNavigate={navigate} />
-          : <DocumentEdit collectionSlug={slug} config={config} />;
+        return isPageType ? (
+          <PageBuilder collectionSlug={slug} config={config} onNavigate={navigate} />
+        ) : (
+          <DocumentEdit collectionSlug={slug} config={config} />
+        )
       }
-      const editMatch = matchRoute(`/${slug}/:id`);
+      const editMatch = matchRoute(`/${slug}/:id`)
       if (editMatch?.id) {
-        return isPageType
-          ? <PageBuilder documentId={editMatch.id} collectionSlug={slug} config={config} onNavigate={navigate} />
-          : <DocumentEdit collectionSlug={slug} documentId={editMatch.id} config={config} />;
+        return isPageType ? (
+          <PageBuilder
+            documentId={editMatch.id}
+            collectionSlug={slug}
+            config={config}
+            onNavigate={navigate}
+          />
+        ) : (
+          <DocumentEdit collectionSlug={slug} documentId={editMatch.id} config={config} />
+        )
       }
       if (matchRoute(`/${slug}`)) {
-        return <CollectionList collectionSlug={slug} config={config} onNavigate={navigate} />;
+        return <CollectionList collectionSlug={slug} config={config} onNavigate={navigate} />
       }
     }
 
-    const newCollMatch = matchRoute('/collections/:slug/new');
+    const newCollMatch = matchRoute('/collections/:slug/new')
     if (newCollMatch?.slug) {
-      const def = collectionMap.get(newCollMatch.slug);
-      return def?.type === 'page'
-        ? <PageBuilder collectionSlug={newCollMatch.slug} config={config} onNavigate={navigate} />
-        : <DocumentEdit collectionSlug={newCollMatch.slug} config={config} />;
+      const def = collectionMap.get(newCollMatch.slug)
+      return def?.type === 'page' ? (
+        <PageBuilder collectionSlug={newCollMatch.slug} config={config} onNavigate={navigate} />
+      ) : (
+        <DocumentEdit collectionSlug={newCollMatch.slug} config={config} />
+      )
     }
 
-    const editCollMatch = matchRoute('/collections/:slug/:id');
+    const editCollMatch = matchRoute('/collections/:slug/:id')
     if (editCollMatch?.slug && editCollMatch.id) {
-      const def = collectionMap.get(editCollMatch.slug);
-      return def?.type === 'page'
-        ? <PageBuilder documentId={editCollMatch.id} collectionSlug={editCollMatch.slug} config={config} onNavigate={navigate} />
-        : <DocumentEdit collectionSlug={editCollMatch.slug} documentId={editCollMatch.id} config={config} />;
-    }
-
-    const collectionMatch = matchRoute('/collections/:slug');
+      const def = collectionMap.get(editCollMatch.slug)
+      return def?.type === 'page' ? (
+        <PageBuilder
+          documentId={editCollMatch.id}
+          collectionSlug={editCollMatch.slug}
+          config={config}
+          onNavigate={navigate}
+        />
+      ) : (
+        <DocumentEdit
+          collectionSlug={editCollMatch.slug}
+          documentId={editCollMatch.id}
+          config={config}
+        />
+      )
+    }
+
+    const collectionMatch = matchRoute('/collections/:slug')
     if (collectionMatch?.slug) {
-      return <CollectionList collectionSlug={collectionMatch.slug} config={config} onNavigate={navigate} />;
+      return (
+        <CollectionList
+          collectionSlug={collectionMatch.slug}
+          config={config}
+          onNavigate={navigate}
+        />
+      )
     }
 
     return (
@@ -264,24 +336,24 @@ function AdminShell({ config, session, basePath = '/admin', initialPath = '/', s
           Back to Dashboard
         </button>
       </div>
-    );
+    )
   }
 
   return (
     <Layout config={config} session={session} currentPath={currentPath} onNavigate={navigate}>
-      <ErrorBoundary>
-        {renderView()}
-      </ErrorBoundary>
+      <ErrorBoundary>{renderView()}</ErrorBoundary>
       {shortcutHelpOpen && <ShortcutHelp onClose={() => setShortcutHelpOpen(false)} />}
     </Layout>
-  );
+  )
 }
 
 function ShortcutHelp({ onClose }: { onClose: () => void }) {
   return (
     <div
       className="fixed inset-0 z-100 flex items-center justify-center bg-black/50"
-      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose()
+      }}
     >
       <div className="bg-card text-card-foreground rounded-xl shadow-2xl border border-border p-6 max-w-sm w-full mx-4">
         <h3 className="text-lg font-semibold mb-4">Keyboard Shortcuts</h3>
@@ -306,86 +378,86 @@ function ShortcutHelp({ onClose }: { onClose: () => void }) {
         </button>
       </div>
     </div>
-  );
+  )
 }
 
 function useBranding(config: any) {
-  const originalFaviconRef = useRef<string | null>(null);
-  const originalTitleRef = useRef<string | null>(null);
-  const injectedLinkRef = useRef<HTMLLinkElement | null>(null);
+  const originalFaviconRef = useRef<string | null>(null)
+  const originalTitleRef = useRef<string | null>(null)
+  const injectedLinkRef = useRef<HTMLLinkElement | null>(null)
 
   useEffect(() => {
-    const branding = config?.admin?.branding;
-    if (!branding) return;
+    const branding = config?.admin?.branding
+    if (!branding) return
 
     // --- Favicon ---
     if (branding.favicon) {
-      const existing = document.querySelector<HTMLLinkElement>('link[rel="icon"]');
-      originalFaviconRef.current = existing?.href ?? null;
+      const existing = document.querySelector<HTMLLinkElement>('link[rel="icon"]')
+      originalFaviconRef.current = existing?.href ?? null
 
       if (existing) {
-        existing.href = branding.favicon;
+        existing.href = branding.favicon
       } else {
-        const link = document.createElement('link');
-        link.rel = 'icon';
-        link.href = branding.favicon;
-        document.head.appendChild(link);
-        injectedLinkRef.current = link;
+        const link = document.createElement('link')
+        link.rel = 'icon'
+        link.href = branding.favicon
+        document.head.appendChild(link)
+        injectedLinkRef.current = link
       }
     }
 
     // --- Document title ---
-    originalTitleRef.current = document.title;
+    originalTitleRef.current = document.title
     if (branding.title) {
-      document.title = branding.title;
+      document.title = branding.title
     } else if (branding.name) {
-      document.title = `${branding.name} Admin`;
+      document.title = `${branding.name} Admin`
     }
 
     // --- Primary color ---
-    const adminEl = document.querySelector<HTMLElement>('.actuate-admin');
+    const adminEl = document.querySelector<HTMLElement>('.actuate-admin')
     if (branding.primaryColor && adminEl) {
-      adminEl.style.setProperty('--primary', branding.primaryColor);
-      adminEl.style.setProperty('--sidebar-primary', branding.primaryColor);
+      adminEl.style.setProperty('--primary', branding.primaryColor)
+      adminEl.style.setProperty('--sidebar-primary', branding.primaryColor)
     }
 
     return () => {
       // Restore favicon
       if (branding.favicon) {
-        const link = document.querySelector<HTMLLinkElement>('link[rel="icon"]');
+        const link = document.querySelector<HTMLLinkElement>('link[rel="icon"]')
         if (link && originalFaviconRef.current) {
-          link.href = originalFaviconRef.current;
+          link.href = originalFaviconRef.current
         }
         if (injectedLinkRef.current) {
-          injectedLinkRef.current.remove();
-          injectedLinkRef.current = null;
+          injectedLinkRef.current.remove()
+          injectedLinkRef.current = null
         }
       }
 
       // Restore title
       if (originalTitleRef.current !== null) {
-        document.title = originalTitleRef.current;
+        document.title = originalTitleRef.current
       }
 
       // Remove primary color override
       if (branding.primaryColor && adminEl) {
-        adminEl.style.removeProperty('--primary');
-        adminEl.style.removeProperty('--sidebar-primary');
+        adminEl.style.removeProperty('--primary')
+        adminEl.style.removeProperty('--sidebar-primary')
       }
-    };
-  }, [config]);
+    }
+  }, [config])
 }
 
 function useAdminPageTitle(config: any, currentPath: string) {
   useEffect(() => {
-    const branding = config?.admin?.branding;
-    const baseName = branding?.title ?? (branding?.name ? `${branding.name} Admin` : null);
-    if (!baseName) return;
-
-    const segment = currentPath === '/' ? 'Dashboard' : currentPath.split('/').filter(Boolean)[0];
-    const pageName = segment ? segment.charAt(0).toUpperCase() + segment.slice(1) : 'Dashboard';
-    document.title = `${pageName} — ${baseName}`;
-  }, [config, currentPath]);
+    const branding = config?.admin?.branding
+    const baseName = branding?.title ?? (branding?.name ? `${branding.name} Admin` : null)
+    if (!baseName) return
+
+    const segment = currentPath === '/' ? 'Dashboard' : currentPath.split('/').filter(Boolean)[0]
+    const pageName = segment ? segment.charAt(0).toUpperCase() + segment.slice(1) : 'Dashboard'
+    document.title = `${pageName} — ${baseName}`
+  }, [config, currentPath])
 }
 
 const ISOLATION_STYLE: React.CSSProperties = {
@@ -394,10 +466,10 @@ const ISOLATION_STYLE: React.CSSProperties = {
   zIndex: 50,
   overflow: 'auto',
   isolation: 'isolate',
-};
+}
 
 export function AdminRoot(props: AdminRootProps) {
-  const defaultDarkMode = props.config?.admin?.branding?.darkMode;
+  const defaultDarkMode = props.config?.admin?.branding?.darkMode
 
   return (
     <div style={ISOLATION_STYLE} className="actuate-admin">
@@ -407,5 +479,5 @@ export function AdminRoot(props: AdminRootProps) {
         </LocaleProvider>
       </ThemeProvider>
     </div>
-  );
+  )
 }