@actuate-media/cms-admin 0.8.0 → 0.8.1

package/src/hooks/useKeyboardShortcuts.ts

@@ -1,32 +1,32 @@
-'use client';
+'use client'
 
-import { useEffect } from 'react';
+import { useEffect } from 'react'
 
 interface ShortcutMap {
-  [combo: string]: (e: KeyboardEvent) => void;
+  [combo: string]: (e: KeyboardEvent) => void
 }
 
 export function useKeyboardShortcuts(shortcuts: ShortcutMap) {
   useEffect(() => {
     function handleKeyDown(e: KeyboardEvent) {
-      const meta = e.metaKey || e.ctrlKey;
-      const parts: string[] = [];
+      const meta = e.metaKey || e.ctrlKey
+      const parts: string[] = []
 
-      if (meta) parts.push('mod');
-      if (e.shiftKey) parts.push('shift');
-      if (e.altKey) parts.push('alt');
-      parts.push(e.key.toLowerCase());
+      if (meta) parts.push('mod')
+      if (e.shiftKey) parts.push('shift')
+      if (e.altKey) parts.push('alt')
+      parts.push(e.key.toLowerCase())
 
-      const combo = parts.join('+');
-      const handler = shortcuts[combo];
+      const combo = parts.join('+')
+      const handler = shortcuts[combo]
 
       if (handler) {
-        e.preventDefault();
-        handler(e);
+        e.preventDefault()
+        handler(e)
       }
     }
 
-    document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [shortcuts]);
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [shortcuts])
 }

package/src/index.ts

@@ -1,63 +1,74 @@
-export { AdminRoot } from './AdminRoot.js';
-export type { AdminRootProps } from './AdminRoot.js';
+export { AdminRoot } from './AdminRoot.js'
+export type { AdminRootProps } from './AdminRoot.js'
 
-export { Layout } from './layout/Layout.js';
-export type { LayoutProps } from './layout/Layout.js';
-export { Sidebar } from './layout/Sidebar.js';
-export type { SidebarProps } from './layout/Sidebar.js';
-export { Header } from './layout/Header.js';
-export type { HeaderProps } from './layout/Header.js';
+export { Layout } from './layout/Layout.js'
+export type { LayoutProps } from './layout/Layout.js'
+export { Sidebar } from './layout/Sidebar.js'
+export type { SidebarProps } from './layout/Sidebar.js'
+export { Header } from './layout/Header.js'
+export type { HeaderProps } from './layout/Header.js'
 
-export { Dashboard } from './views/Dashboard.js';
-export { Posts } from './views/Posts.js';
-export { Pages } from './views/Pages.js';
-export { PostEditor } from './views/PostEditor.js';
-export { PageEditor } from './views/PageEditor.js';
-export { MediaBrowser } from './views/MediaBrowser.js';
-export { Forms } from './views/Forms.js';
-export { FormEditor } from './views/FormEditor.js';
-export type { FormEditorProps } from './views/FormEditor.js';
-export { FormSubmissions } from './views/FormSubmissions.js';
-export { Redirects } from './views/Redirects.js';
-export { Users } from './views/Users.js';
-export { Settings } from './views/Settings.js';
-export { SEO } from './views/SEO.js';
-export { SetupWizard } from './views/SetupWizard.js';
-export type { SetupWizardProps } from './views/SetupWizard.js';
-export { Login } from './views/Login.js';
-export type { LoginProps, CaptchaConfig } from './views/Login.js';
-export { ForgotPassword } from './views/ForgotPassword.js';
-export type { ForgotPasswordProps } from './views/ForgotPassword.js';
-export { ResetPassword } from './views/ResetPassword.js';
-export type { ResetPasswordProps } from './views/ResetPassword.js';
-export { CollectionList } from './views/CollectionList.js';
-export { DocumentEdit } from './views/DocumentEdit.js';
+export { Dashboard } from './views/Dashboard.js'
+export { Posts } from './views/Posts.js'
+export { Pages } from './views/Pages.js'
+export { PostEditor } from './views/PostEditor.js'
+export { PageEditor } from './views/PageEditor.js'
+export { MediaBrowser } from './views/MediaBrowser.js'
+export { Forms } from './views/Forms.js'
+export { FormEditor } from './views/FormEditor.js'
+export type { FormEditorProps } from './views/FormEditor.js'
+export { FormSubmissions } from './views/FormSubmissions.js'
+export { Redirects } from './views/Redirects.js'
+export { Users } from './views/Users.js'
+export { Settings } from './views/Settings.js'
+export { SEO } from './views/SEO.js'
+export { SetupWizard } from './views/SetupWizard.js'
+export type { SetupWizardProps } from './views/SetupWizard.js'
+export { Login } from './views/Login.js'
+export type { LoginProps, CaptchaConfig } from './views/Login.js'
+export { ForgotPassword } from './views/ForgotPassword.js'
+export type { ForgotPasswordProps } from './views/ForgotPassword.js'
+export { ResetPassword } from './views/ResetPassword.js'
+export type { ResetPasswordProps } from './views/ResetPassword.js'
+export { CollectionList } from './views/CollectionList.js'
+export { DocumentEdit } from './views/DocumentEdit.js'
 
-export { PageBuilder } from './views/page-builder/PageBuilder.js';
-export { useBuilderState } from './hooks/useBuilderState.js';
-export type { BuilderState, BuilderActions, DeviceMode, PanelTab, PageSettings as BuilderPageSettings } from './hooks/useBuilderState.js';
+export { PageBuilder } from './views/page-builder/PageBuilder.js'
+export { useBuilderState } from './hooks/useBuilderState.js'
+export type {
+  BuilderState,
+  BuilderActions,
+  DeviceMode,
+  PanelTab,
+  PageSettings as BuilderPageSettings,
+} from './hooks/useBuilderState.js'
 
-export { Breadcrumbs } from './components/Breadcrumbs.js';
-export { CommandPalette } from './components/CommandPalette.js';
-export { ErrorBoundary } from './components/ErrorBoundary.js';
-export { FolderTree } from './components/FolderTree.js';
-export type { FolderTreeProps, FolderNode, FolderSelection, SmartFolder } from './components/FolderTree.js';
-export { TipTapEditor } from './components/TipTapEditor.js';
-export { SEOPanel } from './components/SEOPanel.js';
-export type { SEOData, SEOPanelProps } from './components/SEOPanel.js';
-export { LivePreview } from './components/LivePreview.js';
-export { VersionHistory } from './components/VersionHistory.js';
-export type { VersionHistoryProps } from './components/VersionHistory.js';
-export { MediaPickerModal } from './components/MediaPickerModal.js';
-export type { MediaPickerModalProps } from './components/MediaPickerModal.js';
-export { ThemeProvider, useTheme } from './components/ThemeProvider.js';
-export { FocalPointPicker } from './components/FocalPointPicker.js';
-export { PresenceIndicator } from './components/PresenceIndicator.js';
-export { LocaleProvider, useLocale } from './components/LocaleProvider.js';
-export type { LocaleProviderProps } from './components/LocaleProvider.js';
-export { LocaleSwitcher } from './components/LocaleSwitcher.js';
-export { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts.js';
+export { Breadcrumbs } from './components/Breadcrumbs.js'
+export { CommandPalette } from './components/CommandPalette.js'
+export { ErrorBoundary } from './components/ErrorBoundary.js'
+export { FolderTree } from './components/FolderTree.js'
+export type {
+  FolderTreeProps,
+  FolderNode,
+  FolderSelection,
+  SmartFolder,
+} from './components/FolderTree.js'
+export { TipTapEditor } from './components/TipTapEditor.js'
+export { SEOPanel } from './components/SEOPanel.js'
+export type { SEOData, SEOPanelProps } from './components/SEOPanel.js'
+export { LivePreview } from './components/LivePreview.js'
+export { VersionHistory } from './components/VersionHistory.js'
+export type { VersionHistoryProps } from './components/VersionHistory.js'
+export { MediaPickerModal } from './components/MediaPickerModal.js'
+export type { MediaPickerModalProps } from './components/MediaPickerModal.js'
+export { ThemeProvider, useTheme } from './components/ThemeProvider.js'
+export { FocalPointPicker } from './components/FocalPointPicker.js'
+export { PresenceIndicator } from './components/PresenceIndicator.js'
+export { LocaleProvider, useLocale } from './components/LocaleProvider.js'
+export type { LocaleProviderProps } from './components/LocaleProvider.js'
+export { LocaleSwitcher } from './components/LocaleSwitcher.js'
+export { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts.js'
 
-export { cmsApi, setApiBase, ensureCsrfToken } from './lib/api.js';
-export { useApiData } from './lib/useApiData.js';
-export type { UseApiDataResult } from './lib/useApiData.js';
+export { cmsApi, setApiBase, ensureCsrfToken } from './lib/api.js'
+export { useApiData } from './lib/useApiData.js'
+export type { UseApiDataResult } from './lib/useApiData.js'

package/src/layout/Header.tsx

@@ -1,26 +1,26 @@
-'use client';
+'use client'
 
-import { useState } from 'react';
-import { Search, Bell, User, ChevronDown, Menu, Sun, Moon } from 'lucide-react';
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import { CommandPalette } from '../components/CommandPalette.js';
-import { useTheme } from '../components/ThemeProvider.js';
-import { LocaleSwitcher } from '../components/LocaleSwitcher.js';
+import { useState } from 'react'
+import { Search, Bell, User, ChevronDown, Menu, Sun, Moon } from 'lucide-react'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { CommandPalette } from '../components/CommandPalette.js'
+import { useTheme } from '../components/ThemeProvider.js'
+import { LocaleSwitcher } from '../components/LocaleSwitcher.js'
 
 export interface HeaderProps {
-  onToggleSidebar: () => void;
-  session?: any;
-  onNavigate: (path: string) => void;
+  onToggleSidebar: () => void
+  session?: any
+  onNavigate: (path: string) => void
 }
 
 export function Header({ onToggleSidebar, session, onNavigate }: HeaderProps) {
-  const [showCommandPalette, setShowCommandPalette] = useState(false);
-  const [searchQuery, setSearchQuery] = useState('');
-  const { resolvedTheme, setTheme } = useTheme();
+  const [showCommandPalette, setShowCommandPalette] = useState(false)
+  const [searchQuery, setSearchQuery] = useState('')
+  const { resolvedTheme, setTheme } = useTheme()
 
   const toggleTheme = () => {
-    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
-  };
+    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')
+  }
 
   return (
     <>
@@ -74,7 +74,10 @@ export function Header({ onToggleSidebar, session, onNavigate }: HeaderProps) {
             )}
           </button>
 
-          <button className="p-2 hover:bg-accent rounded-lg transition-colors relative" aria-label="Notifications">
+          <button
+            className="p-2 hover:bg-accent rounded-lg transition-colors relative"
+            aria-label="Notifications"
+          >
             <Bell className="w-5 h-5 text-muted-foreground" />
             <span className="absolute top-1.5 right-1.5 w-2 h-2 bg-destructive rounded-full" />
           </button>
@@ -98,9 +101,7 @@ export function Header({ onToggleSidebar, session, onNavigate }: HeaderProps) {
                 sideOffset={5}
               >
                 <div className="px-3 py-2 border-b border-border">
-                  <p className="text-sm font-medium">
-                    {session?.user?.name ?? 'Admin User'}
-                  </p>
+                  <p className="text-sm font-medium">{session?.user?.name ?? 'Admin User'}</p>
                   <p className="text-xs text-muted-foreground">
                     {session?.user?.email ?? 'admin@example.com'}
                   </p>
@@ -131,5 +132,5 @@ export function Header({ onToggleSidebar, session, onNavigate }: HeaderProps) {
         onNavigate={onNavigate}
       />
     </>
-  );
+  )
 }

package/src/layout/Layout.tsx

@@ -1,36 +1,36 @@
-'use client';
+'use client'
 
-import { useState, useEffect, type ReactNode } from 'react';
-import { Sidebar } from './Sidebar.js';
-import { Header } from './Header.js';
-import { Breadcrumbs } from '../components/Breadcrumbs.js';
-import { Toaster } from 'sonner';
+import { useState, useEffect, type ReactNode } from 'react'
+import { Sidebar } from './Sidebar.js'
+import { Header } from './Header.js'
+import { Breadcrumbs } from '../components/Breadcrumbs.js'
+import { Toaster } from 'sonner'
 
 export interface LayoutProps {
-  config: any;
-  session: any;
-  currentPath: string;
-  onNavigate: (path: string) => void;
-  children: ReactNode;
+  config: any
+  session: any
+  currentPath: string
+  onNavigate: (path: string) => void
+  children: ReactNode
 }
 
 export function Layout({ config, session, currentPath, onNavigate, children }: LayoutProps) {
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
-  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false)
 
   useEffect(() => {
-    setMobileSidebarOpen(false);
-  }, [currentPath]);
+    setMobileSidebarOpen(false)
+  }, [currentPath])
 
   useEffect(() => {
     const handleResize = () => {
       if (window.innerWidth < 1024) {
-        setMobileSidebarOpen(false);
+        setMobileSidebarOpen(false)
       }
-    };
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
+    }
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
 
   return (
     <div className="h-screen flex overflow-hidden bg-background text-foreground">
@@ -67,11 +67,9 @@ export function Layout({ config, session, currentPath, onNavigate, children }: L
         <Breadcrumbs currentPath={currentPath} onNavigate={onNavigate} />
 
         <main className="flex-1 overflow-auto bg-background">
-          <div className="h-full">
-            {children}
-          </div>
+          <div className="h-full">{children}</div>
         </main>
       </div>
     </div>
-  );
+  )
 }

package/src/layout/Sidebar.tsx

@@ -1,4 +1,4 @@
-'use client';
+'use client'
 
 import {
   LayoutDashboard,
@@ -22,12 +22,18 @@ import {
   Code2,
   LayoutTemplate,
   Library,
-} from 'lucide-react';
-import type { LucideIcon } from 'lucide-react';
+} from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
 
 function ActuateLogo({ className }: { className?: string }) {
   return (
-    <svg viewBox="0 0 40 44" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} aria-hidden="true">
+    <svg
+      viewBox="0 0 40 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      aria-hidden="true"
+    >
       {/* Upward arrow / chevron */}
       <polygon points="20,2 6,18 12,18 20,8 28,18 34,18" fill="#E8646A" />
       {/* Three vertical bars */}
@@ -35,20 +41,46 @@ function ActuateLogo({ className }: { className?: string }) {
       <rect x="18" y="20" width="4" height="22" rx="1" fill="#E8646A" />
       <rect x="25" y="20" width="4" height="22" rx="1" fill="#E8646A" />
     </svg>
-  );
+  )
 }
 
 function ActuateWordmark({ className }: { className?: string }) {
   return (
-    <svg viewBox="0 0 170 44" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} aria-hidden="true">
+    <svg
+      viewBox="0 0 170 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      aria-hidden="true"
+    >
       <polygon points="20,2 6,18 12,18 20,8 28,18 34,18" fill="#E8646A" />
       <rect x="11" y="20" width="4" height="22" rx="1" fill="#E8646A" />
       <rect x="18" y="20" width="4" height="22" rx="1" fill="#E8646A" />
       <rect x="25" y="20" width="4" height="22" rx="1" fill="#E8646A" />
-      <text x="44" y="25" fontFamily="system-ui, sans-serif" fontSize="17" fontWeight="600" letterSpacing="1.5" fill="#E8646A">ACTUATE</text>
-      <text x="44" y="40" fontFamily="system-ui, sans-serif" fontSize="10" fontWeight="500" letterSpacing="4" fill="#9CA3AF">MEDIA</text>
+      <text
+        x="44"
+        y="25"
+        fontFamily="system-ui, sans-serif"
+        fontSize="17"
+        fontWeight="600"
+        letterSpacing="1.5"
+        fill="#E8646A"
+      >
+        ACTUATE
+      </text>
+      <text
+        x="44"
+        y="40"
+        fontFamily="system-ui, sans-serif"
+        fontSize="10"
+        fontWeight="500"
+        letterSpacing="4"
+        fill="#9CA3AF"
+      >
+        MEDIA
+      </text>
     </svg>
-  );
+  )
 }
 
 const ICON_MAP: Record<string, LucideIcon> = {
@@ -62,29 +94,35 @@ const ICON_MAP: Record<string, LucideIcon> = {
   PanelTop: PanelTop,
   PanelBottom: PanelBottom,
   Layers: Layers,
-};
+}
 
 function BrandLogo({ config, collapsed }: { config?: any; collapsed: boolean }) {
-  const branding = config?.admin?.branding;
-  const customLogo = branding?.logo;
-  const brandName = branding?.name;
+  const branding = config?.admin?.branding
+  const customLogo = branding?.logo
+  const brandName = branding?.name
 
   if (collapsed) {
     if (customLogo) {
-      return <img src={customLogo} alt={brandName ?? 'Admin'} className="w-8 h-8 object-contain" />;
+      return <img src={customLogo} alt={brandName ?? 'Admin'} className="w-8 h-8 object-contain" />
     }
-    return <ActuateLogo className="w-8 h-8" />;
+    return <ActuateLogo className="w-8 h-8" />
   }
 
   if (customLogo) {
     return (
       <div className="flex items-center gap-2.5 min-w-0">
-        <img src={customLogo} alt={brandName ?? 'Admin'} className="h-8 w-auto object-contain shrink-0" />
+        <img
+          src={customLogo}
+          alt={brandName ?? 'Admin'}
+          className="h-8 w-auto object-contain shrink-0"
+        />
         {brandName && (
-          <span className="text-sm font-semibold text-sidebar-foreground truncate">{brandName}</span>
+          <span className="text-sm font-semibold text-sidebar-foreground truncate">
+            {brandName}
+          </span>
         )}
       </div>
-    );
+    )
   }
 
   if (brandName) {
@@ -93,10 +131,10 @@ function BrandLogo({ config, collapsed }: { config?: any; collapsed: boolean })
         <ActuateLogo className="w-7 h-7 shrink-0" />
         <span className="text-sm font-semibold text-sidebar-foreground truncate">{brandName}</span>
       </div>
-    );
+    )
   }
 
-  return <ActuateWordmark className="h-8 w-auto" />;
+  return <ActuateWordmark className="h-8 w-auto" />
 }
 
 const defaultNavItems = [
@@ -108,18 +146,24 @@ const defaultNavItems = [
   { path: '/seo', label: 'SEO', icon: SearchIcon },
   { path: '/users', label: 'Users', icon: Users },
   { path: '/settings', label: 'Settings', icon: Settings },
-];
+]
 
 export interface SidebarProps {
-  collapsed: boolean;
-  onToggleCollapse: () => void;
-  currentPath: string;
-  onNavigate: (path: string) => void;
-  config?: any;
+  collapsed: boolean
+  onToggleCollapse: () => void
+  currentPath: string
+  onNavigate: (path: string) => void
+  config?: any
 }
 
-export function Sidebar({ collapsed, onToggleCollapse, currentPath, onNavigate, config }: SidebarProps) {
-  const navItems = buildNavItems(config);
+export function Sidebar({
+  collapsed,
+  onToggleCollapse,
+  currentPath,
+  onNavigate,
+  config,
+}: SidebarProps) {
+  const navItems = buildNavItems(config)
 
   return (
     <aside
@@ -132,12 +176,8 @@ export function Sidebar({ collapsed, onToggleCollapse, currentPath, onNavigate,
           collapsed ? 'justify-center' : 'justify-between'
         }`}
       >
-        {!collapsed && (
-          <BrandLogo config={config} collapsed={false} />
-        )}
-        {collapsed && (
-          <BrandLogo config={config} collapsed={true} />
-        )}
+        {!collapsed && <BrandLogo config={config} collapsed={false} />}
+        {collapsed && <BrandLogo config={config} collapsed={true} />}
         <button
           onClick={onToggleCollapse}
           className="hidden lg:block p-2 hover:bg-sidebar-accent rounded-lg transition-colors shrink-0"
@@ -153,13 +193,12 @@ export function Sidebar({ collapsed, onToggleCollapse, currentPath, onNavigate,
 
       <nav className="p-3 space-y-1">
         {navItems.map((item, idx) => {
-          const Icon = item.icon;
+          const Icon = item.icon
           const isActive =
-            currentPath === item.path ||
-            (item.path !== '/' && currentPath.startsWith(item.path));
+            currentPath === item.path || (item.path !== '/' && currentPath.startsWith(item.path))
 
-          const prevGroup = idx > 0 ? navItems[idx - 1]?.group : undefined;
-          const showGroupLabel = item.group && item.group !== prevGroup;
+          const prevGroup = idx > 0 ? navItems[idx - 1]?.group : undefined
+          const showGroupLabel = item.group && item.group !== prevGroup
 
           return (
             <div key={item.path}>
@@ -185,64 +224,60 @@ export function Sidebar({ collapsed, onToggleCollapse, currentPath, onNavigate,
                 title={collapsed ? item.label : ''}
               >
                 <Icon className="w-5 h-5 shrink-0" />
-                {!collapsed && (
-                  <span className="text-sm font-medium">{item.label}</span>
-                )}
+                {!collapsed && <span className="text-sm font-medium">{item.label}</span>}
               </button>
             </div>
-          );
+          )
         })}
       </nav>
     </aside>
-  );
+  )
 }
 
 function resolveIcon(collection: any): LucideIcon {
-  const mapped = collection.admin?.icon ? ICON_MAP[collection.admin.icon] : undefined;
-  if (mapped) return mapped;
-  return collection.type === 'page' ? File : FileText;
+  const mapped = collection.admin?.icon ? ICON_MAP[collection.admin.icon] : undefined
+  if (mapped) return mapped
+  return collection.type === 'page' ? File : FileText
 }
 
 export interface NavItem {
-  path: string;
-  label: string;
-  icon: LucideIcon;
-  group?: string;
+  path: string
+  label: string
+  icon: LucideIcon
+  group?: string
 }
 
 function buildNavItems(config: any): NavItem[] {
-  if (!config?.collections) return defaultNavItems;
+  if (!config?.collections) return defaultNavItems
 
-  const raw = config.collections;
-  const collectionsList: any[] = Array.isArray(raw) ? raw : Object.values(raw);
+  const raw = config.collections
+  const collectionsList: any[] = Array.isArray(raw) ? raw : Object.values(raw)
 
-  const visible = collectionsList.filter((c) => !c.admin?.hidden);
+  const visible = collectionsList.filter((c) => !c.admin?.hidden)
 
-  const ungrouped = visible.filter((c) => !c.admin?.group);
-  const grouped = visible.filter((c) => c.admin?.group);
+  const ungrouped = visible.filter((c) => !c.admin?.group)
+  const grouped = visible.filter((c) => c.admin?.group)
 
-  const pages = ungrouped.filter((c) => c.type === 'page');
-  const posts = ungrouped.filter((c) => c.type === 'post');
-  const other = ungrouped.filter((c) => c.type !== 'page' && c.type !== 'post');
-  const sortedUngrouped = [...pages, ...posts, ...other];
+  const pages = ungrouped.filter((c) => c.type === 'page')
+  const posts = ungrouped.filter((c) => c.type === 'post')
+  const other = ungrouped.filter((c) => c.type !== 'page' && c.type !== 'post')
+  const sortedUngrouped = [...pages, ...posts, ...other]
 
-  const items: NavItem[] = [
-    { path: '/', label: 'Dashboard', icon: LayoutDashboard },
-  ];
+  const items: NavItem[] = [{ path: '/', label: 'Dashboard', icon: LayoutDashboard }]
 
   for (const collection of sortedUngrouped) {
     items.push({
       label: collection.labels?.plural ?? collection.slug,
       path: `/${collection.slug}`,
       icon: resolveIcon(collection),
-    });
+    })
   }
 
-  const groups = new Map<string, typeof grouped>();
+  const groups = new Map<string, typeof grouped>()
   for (const col of grouped) {
-    const group = col.admin.group as string;
-    if (!groups.has(group)) groups.set(group, []);
-    groups.get(group)!.push(col);
+    const group = col.admin.group as string
+    if (!groups.has(group)) groups.set(group, [])
+    groups.get(group)!.push(col)
   }
   for (const [groupName, cols] of groups) {
     for (const collection of cols) {
@@ -251,7 +286,7 @@ function buildNavItems(config: any): NavItem[] {
         path: `/${collection.slug}`,
         icon: resolveIcon(collection),
         group: groupName,
-      });
+      })
     }
   }
 
@@ -265,7 +300,7 @@ function buildNavItems(config: any): NavItem[] {
     { path: '/script-tags', label: 'Script Tags', icon: Code2 },
     { path: '/users', label: 'Users', icon: Users },
     { path: '/settings', label: 'Settings', icon: Settings },
-  );
+  )
 
-  return items;
+  return items
 }