@prenta/admin 2.6.0 → 2.7.0

package/src/layout/Sidebar.tsx

@@ -1,58 +1,16 @@
 'use client'
 
-import { useEffect, useRef, useState, type ReactNode } from 'react'
+import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { accentPickCssVars, generateAdminThemeTokens } from '@prenta/core/appearance'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
 import { adminPortalContainer } from '../lib/portal-container.js'
+import { TIER_MEDIA } from '../lib/tiers.js'
 import { useTheme } from '../components/ThemeProvider.js'
-import { fetchFormsSidebarCounts, type FormsSidebarCount } from '../lib/forms-service.js'
-import { onFormsChanged } from '../lib/forms-events.js'
-import {
-  LayoutDashboard,
-  FileText,
-  File,
-  Image,
-  Settings,
-  ChevronLeft,
-  ChevronDown,
-  ClipboardList,
-  Inbox,
-  AlertTriangle,
-  Search as SearchIcon,
-  Briefcase,
-  FolderOpen,
-  BookOpen,
-  HelpCircle,
-  Newspaper,
-  PanelTop,
-  PanelBottom,
-  Layers,
-  Code2,
-  ListTree,
-  Menu as MenuIcon,
-  PanelLeftClose,
-  PanelLeftOpen,
-  Trash2,
-  ListTodo,
-} from 'lucide-react'
-import type { LucideIcon } from 'lucide-react'
 import { PrentaBrandLogo, PrentaMark } from '../assets/prenta-logo.js'
 import { LogoPlaceholder } from '../components/LogoPlaceholder.js'
-
-const ICON_MAP: Record<string, LucideIcon> = {
-  file: File,
-  'file-text': FileText,
-  briefcase: Briefcase,
-  folder: FolderOpen,
-  book: BookOpen,
-  help: HelpCircle,
-  newspaper: Newspaper,
-  navigation: ListTree,
-  menu: MenuIcon,
-  'list-tree': ListTree,
-  PanelTop: PanelTop,
-  PanelBottom: PanelBottom,
-  Layers: Layers,
-}
+import { activeChildPath, hasActiveDescendant, isPathActive, type NavItem } from './nav-config.js'
+import { useNavItems } from './use-nav-items.js'
 
 /**
  * Sidebar brand lockup.
@@ -64,7 +22,8 @@ const ICON_MAP: Record<string, LucideIcon> = {
  * un-branded installs. The placeholder replaces the old initials badge, which
  * read as a user avatar (the real account avatar already sits top-right).
  * Dark-mode uses the dark logo when one is configured. Logos are never
- * stretched/cropped (object-contain).
+ * stretched/cropped (object-contain). Kit sizes (cms-responsive.css): the
+ * full logo is 24px tall and at most 150px wide; the rail mark is 26px.
  */
 function BrandLogo({ config, collapsed }: { config?: any; collapsed: boolean }) {
   const { adminBrand, resolvedTheme } = useTheme()
@@ -94,26 +53,32 @@ function BrandLogo({ config, collapsed }: { config?: any; collapsed: boolean })
   const cfg = usable(configLogo)
   const alt = brandName ?? 'Admin'
 
-  // Wide horizontal logos must scale down to fit the narrow rail / sidebar
-  // header instead of overflowing — height-capped, width auto, never wider than
-  // the available space.
-  const logoClass = 'h-8 w-auto max-w-full object-contain'
+  // Wide horizontal logos scale down to fit the rail / sidebar header instead
+  // of overflowing: height-capped, width auto, never wider than the slot.
+  const logoClass = 'h-6 w-auto max-w-full object-contain'
 
   if (collapsed) {
     // Collapsed rail prefers a dedicated square mark; otherwise it shows the
     // logo (scaled to fit) — never the favicon.
     if (mark)
-      return <img src={mark} alt={alt} className="h-8 w-8 object-contain" onError={onErr(mark)} />
+      return (
+        <img
+          src={mark}
+          alt={alt}
+          className="h-[26px] w-[26px] object-contain"
+          onError={onErr(mark)}
+        />
+      )
     if (primary)
       return <img src={primary} alt={alt} className={logoClass} onError={onErr(primary)} />
     if (cfg) return <img src={cfg} alt={alt} className={logoClass} onError={onErr(cfg)} />
     if (hasInitials) return <LogoPlaceholder tone="sidebar" />
-    return <PrentaMark className="h-8 w-8" />
+    return <PrentaMark className="h-[26px] w-[26px]" />
   }
 
   if (primary) {
     return (
-      <div className="flex min-w-0 items-center gap-2.5">
+      <div className="flex max-w-[150px] min-w-0 items-center gap-2.5">
         <img src={primary} alt={alt} className={logoClass} onError={onErr(primary)} />
       </div>
     )
@@ -121,7 +86,7 @@ function BrandLogo({ config, collapsed }: { config?: any; collapsed: boolean })
 
   if (cfg) {
     return (
-      <div className="flex min-w-0 items-center gap-2.5">
+      <div className="flex max-w-[150px] min-w-0 items-center gap-2.5">
         <img src={cfg} alt={alt} className={logoClass} onError={onErr(cfg)} />
       </div>
     )
@@ -133,12 +98,10 @@ function BrandLogo({ config, collapsed }: { config?: any; collapsed: boolean })
         <img
           src={mark}
           alt={alt}
-          className="h-8 w-8 shrink-0 object-contain"
+          className="h-[26px] w-[26px] shrink-0 object-contain"
           onError={onErr(mark)}
         />
-        <span className="text-sidebar-foreground truncate text-sm font-medium">
-          {brandName ?? alt}
-        </span>
+        <span className="text-body text-txt truncate font-medium">{brandName ?? alt}</span>
       </div>
     )
   }
@@ -150,445 +113,556 @@ function BrandLogo({ config, collapsed }: { config?: any; collapsed: boolean })
   if (brandName) {
     return (
       <div className="flex min-w-0 items-center gap-2.5">
-        <PrentaMark className="h-7 w-7 shrink-0" />
-        <span className="text-sidebar-foreground truncate text-sm font-medium">{brandName}</span>
+        <PrentaMark className="h-[26px] w-[26px] shrink-0" />
+        <span className="text-body text-txt truncate font-medium">{brandName}</span>
       </div>
     )
   }
 
-  return <PrentaBrandLogo className="h-8 w-auto" />
+  return <PrentaBrandLogo className="h-6 w-auto" />
 }
 
-/**
- * Children of the Posts parent. Same shape regardless of how many
- * post-type collections are registered — Post Types are accessed via
- * the `/posts/types` cards page, not as individual sidebar entries.
- */
-const POSTS_CHILDREN: NavItem[] = [
-  { path: '/posts', label: 'All Posts', icon: FileText },
-  { path: '/posts/types', label: 'Post Types', icon: Layers },
-]
-
-/**
- * Nav tree for the default (config-less) install. Dashboard sits on its
- * own at the top, then a CONTENT group holding Pages (no children) above
- * Posts (with All Posts + Post Types), followed by Media / Forms / SEO /
- * Script Tags, then a SETTINGS group (Users / API Keys / Settings).
- */
-const defaultNavItems: NavItem[] = [
-  { path: '/', label: 'Dashboard', icon: LayoutDashboard },
-  { path: '/pages', label: 'Pages', icon: File, group: 'Content' },
-  { path: '/posts', label: 'Posts', icon: FileText, group: 'Content', children: POSTS_CHILDREN },
-  { path: '/media', label: 'Media', icon: Image, group: 'Content' },
-  { path: '/forms', label: 'Forms', icon: ClipboardList, group: 'Content' },
-  { path: '/seo', label: 'SEO', icon: SearchIcon, group: 'Content' },
-  { path: '/script-tags', label: 'Script Tags', icon: Code2, group: 'Content' },
-  { path: '/trash', label: 'Trash', icon: Trash2, group: 'Content' },
-  { path: '/jobs', label: 'Jobs', icon: ListTodo, group: 'Settings' },
-  { path: '/settings', label: 'Settings', icon: Settings, group: 'Settings' },
-]
-
 export interface SidebarProps {
   collapsed: boolean
   onToggleCollapse: () => void
   currentPath: string
   onNavigate: (path: string) => void
   config?: any
+  /** Nav tree from `useNavItems`; built (and Forms counts fetched) here when omitted. */
+  items?: NavItem[]
 }
 
+/**
+ * The admin sidebar (SHELL.md §2). Expanded: section labels, rows and
+ * collapsible sub-groups. Collapsed or at ≤1024px: a 60px icon rail with no
+ * sub-items, the parent active for any child page, children in a flyout and
+ * labels kept for screen readers. The nav itself comes from `nav-config`.
+ */
 export function Sidebar({
   collapsed,
   onToggleCollapse,
   currentPath,
   onNavigate,
   config,
+  items,
 }: SidebarProps) {
-  const formsSidebar = useFormsSidebar()
-  const navItems = applyFormsNav(buildNavItems(config), formsSidebar)
-  const { density } = useTheme()
-  const compact = density === 'compact'
+  const ownItems = useNavItems(config, !items)
+  const navItems = items ?? ownItems
 
   return (
     <aside
-      className={`bg-sidebar border-sidebar-border flex h-full flex-col border-r transition-[width] duration-[var(--motion-layout)] ${
+      className={`bg-sb border-bdr flex h-full flex-col border-r transition-[width] duration-[var(--mo-slow)] ease-[cubic-bezier(.4,0,.2,1)] ${
         collapsed ? 'w-[var(--sbw-col)]' : 'w-[var(--sbw)]'
       }`}
     >
-      {/* Brand header — no toggle button here anymore; it now lives in the footer. */}
       <div
-        className={`border-sidebar-border flex h-[var(--tbh)] shrink-0 items-center border-b px-4 ${
-          collapsed ? 'justify-center' : ''
+        className={`border-bdr flex h-[var(--tbh)] shrink-0 items-center gap-2.5 overflow-hidden border-b ${
+          // Below 769px the drawer's Close button (36px, 44px on touch, at
+          // right 10px) sits in this row; keep a long brand name clear of it.
+          collapsed ? 'justify-center px-0' : 'mobile:pr-14 px-[14px]'
         }`}
       >
         <BrandLogo config={config} collapsed={collapsed} />
       </div>
 
+      {/* `relative`: the rail's `sr-only` labels (absolutely positioned)
+          would otherwise size the fixed admin root and scroll the shell. */}
       <nav
-        className={`flex-1 overflow-y-auto ${compact ? 'space-y-0.5 p-2' : 'space-y-1 p-3'}`}
+        className="[&::-webkit-scrollbar-thumb]:rounded-pill [&::-webkit-scrollbar-thumb]:bg-bdr relative flex-1 overflow-x-hidden overflow-y-auto py-2 [&::-webkit-scrollbar]:w-[3px]"
         aria-label="Primary"
       >
-        {renderNavTree(navItems, { collapsed, currentPath, onNavigate, compact })}
+        <NavTree items={navItems} ctx={{ collapsed, currentPath, onNavigate }} />
       </nav>
 
-      {/* Footer collapse control. Sits at the bottom of the sidebar so it
-          mirrors the reference design and stays out of the way during
-          everyday nav. Hidden below md: the mobile sheet has its own
-          dismiss affordance in <AdminShell>. */}
-      <div className="border-sidebar-border hidden shrink-0 border-t p-3 md:block">
+      {/* Only at >=1025px: the 769-1024px rail can't expand, and the mobile
+          drawer has its own dismiss. */}
+      <div className="border-bdr not-narrow:block hidden shrink-0 border-t p-2">
         <button
+          type="button"
           onClick={onToggleCollapse}
-          className={`text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-foreground flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm transition-colors ${
+          className={`rounded-7 text-meta text-sub hover:bg-acc-l hover:text-acc flex w-full cursor-pointer items-center gap-[9px] overflow-hidden border-0 bg-transparent px-2.5 py-[7px] leading-[normal] font-normal whitespace-nowrap ${
             collapsed ? 'justify-center' : ''
           }`}
+          aria-expanded={!collapsed}
           aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-          title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
         >
-          {collapsed ? (
-            <PanelLeftOpen className="h-4 w-4 shrink-0" aria-hidden />
-          ) : (
-            <>
-              <PanelLeftClose className="h-4 w-4 shrink-0" aria-hidden />
-              <span className="font-medium">Collapse sidebar</span>
-            </>
-          )}
+          {/* 19px: the kit's inline chevron sits on the 12px text baseline, so the button is 33px. */}
+          <span className="flex h-[19px] shrink-0 items-center">
+            {collapsed ? (
+              <ChevronRight className="h-[15px] w-[15px]" strokeWidth={1.75} aria-hidden />
+            ) : (
+              <ChevronLeft className="h-[15px] w-[15px]" strokeWidth={1.75} aria-hidden />
+            )}
+          </span>
+          <span className={collapsed ? 'sr-only' : ''}>Collapse sidebar</span>
         </button>
       </div>
     </aside>
   )
 }
 
-// ─── Dynamic Forms unread badge ───────────────────────────────────────────
+// ─── Rendering ──────────────────────────────────────────────────────────────
 
-interface FormsSidebarState {
-  /** Total unread submissions across active forms (parent badge). */
-  totalUnread: number
-  /** Per-form unread counts, used to build the Forms submenu children. */
-  forms: FormsSidebarCount[]
+interface NavRenderContext {
+  collapsed: boolean
+  currentPath: string
+  onNavigate: (path: string) => void
 }
 
+/** Kit `.ni`: 13px --sub, 7px 10px, margin 1px 8px, radius 7, gap 9. */
+const ROW =
+  'rounded-7 text-body flex w-full cursor-pointer items-center gap-[9px] overflow-hidden border-0 leading-[normal] whitespace-nowrap'
+const ROW_IDLE = 'bg-transparent font-[450] text-sub hover:bg-acc-l hover:text-acc'
+// Forced colors drop the fill, so the current row also gets an outline there.
+const FORCED_ACTIVE =
+  'forced-colors:outline-solid forced-colors:outline-2 forced-colors:-outline-offset-2'
+const ROW_ACTIVE = `bg-acc-l font-[550] text-acc ${FORCED_ACTIVE}`
+
 /**
- * Live unread counts for the Forms submenu: a total surfaced on the Forms nav
- * item plus per-form counts that drive the "All Entries" + per-form children.
- * Refreshes on mount and whenever a forms/entries mutation fires the shared
- * event (mark read, archive, notify toggle, …). Best-effort: a failed fetch
- * keeps the last known value rather than surfacing an error in nav.
+ * At >=1025px a parent row toggles its group (the kit's `onClickCapture`);
+ * below that, in the mobile drawer, it opens the parent page.
+ *
+ * Starts wide and corrects after mount, so a server render and the browser's
+ * first render agree (the row's `aria-expanded` depends on it).
  */
-function useFormsSidebar(): FormsSidebarState {
-  const [state, setState] = useState<FormsSidebarState>({ totalUnread: 0, forms: [] })
-
+function useWideNav(): boolean {
+  const [wide, setWide] = useState(true)
   useEffect(() => {
-    let active = true
-    const load = () => {
-      fetchFormsSidebarCounts()
-        .then((counts) => {
-          if (!active) return
-          setState({
-            totalUnread: counts.reduce((sum, c) => sum + (c.unread ?? 0), 0),
-            forms: counts,
-          })
-        })
-        .catch(() => {
-          /* keep the last known value; nav must never break on a fetch error */
-        })
-    }
-    load()
-    const off = onFormsChanged(load)
-    return () => {
-      active = false
-      off()
-    }
+    if (typeof window.matchMedia !== 'function') return
+    const mq = window.matchMedia(TIER_MEDIA.narrow)
+    const apply = () => setWide(!mq.matches)
+    apply()
+    mq.addEventListener?.('change', apply)
+    return () => mq.removeEventListener?.('change', apply)
   }, [])
-
-  return state
+  return wide
 }
 
-/**
- * Return a copy of the nav tree with the Forms item expanded into a submenu:
- * a total-unread badge on the parent, an "All Entries" child, and one child
- * per active form carrying its own unread badge.
- */
-function applyFormsNav(items: NavItem[], state: FormsSidebarState): NavItem[] {
-  return items.map((item) => {
-    if (item.path !== '/forms') return item
-    const children: NavItem[] = [
-      { path: '/forms/entries', label: 'All Entries', icon: Inbox },
-      { path: '/forms/deliveries', label: 'Deliveries', icon: AlertTriangle },
-      ...state.forms.map((f) => ({
-        path: `/forms/${f.formId}/submissions`,
-        label: f.name,
-        icon: ClipboardList,
-        badge: f.unread,
-      })),
-    ]
-    return {
-      ...item,
-      badge: state.totalUnread > 0 ? state.totalUnread : undefined,
-      children,
-    }
-  })
+/** A parent is current for any page under its path or any of its children. */
+function isSectionActive(currentPath: string, item: NavItem): boolean {
+  const path = currentPath.split(/[?#]/)[0]!
+  return (
+    path === item.path ||
+    (item.path !== '/' && path.startsWith(item.path + '/')) ||
+    hasActiveDescendant(item.children ?? [], currentPath)
+  )
 }
 
-// ─── Rendering ──────────────────────────────────────────────────────────────
-
-interface NavRenderContext {
-  collapsed: boolean
-  currentPath: string
-  onNavigate: (path: string) => void
-  /** Compact density tightens nav row vertical padding. */
-  compact?: boolean
+/** 16px for top-level rows; sub-items default to the kit's 14px. */
+function NavIcon({ item, size: fallback = 16 }: { item: NavItem; size?: number }) {
+  const Icon = item.icon
+  const size = item.iconSize ?? fallback
+  return (
+    <span className="flex h-4 w-4 shrink-0 items-center justify-center" aria-hidden>
+      <Icon className="shrink-0" size={size} strokeWidth={1.75} />
+    </span>
+  )
 }
 
-function isPathActive(currentPath: string, itemPath: string): boolean {
-  // Ignore query string / hash so state-bearing routes (e.g. `/seo?tab=audit`)
-  // still highlight their nav item.
-  currentPath = currentPath.split('?')[0]!.split('#')[0]!
-  if (itemPath === '/') return currentPath === '/'
-
-  // Special case: /posts is a prefix of /posts/types — without this
-  // guard, "All Posts" (/posts) would stay highlighted while the user
-  // is on /posts/types or /posts/types/new. Treat /posts as exact-only
-  // when a sibling /posts/* route exists.
-  if (itemPath === '/posts') {
-    return currentPath === '/posts' || currentPath === '/posts/new'
-  }
+/** Kit `.ni-badge`: 16px pill, --err fill, 9.5px / 700. */
+function NavBadge({ count, className = '' }: { count?: number; className?: string }) {
+  if (!count || count <= 0) return null
+  return (
+    <span
+      className={`rounded-pill bg-err text-badge text-acc-on flex h-4 min-w-4 shrink-0 items-center justify-center px-1 leading-none font-bold tabular-nums ${className}`}
+      aria-label={`${count} unread`}
+    >
+      {count > 99 ? '99+' : count}
+    </span>
+  )
+}
 
-  // Use boundary match so /pages doesn't match /pages-something. Exact, or
-  // followed by a `/` separator.
-  return currentPath === itemPath || currentPath.startsWith(itemPath + '/')
+function SectionLabel({ label, collapsed }: { label: string; collapsed: boolean }) {
+  // Kit: the collapsed sidebar keeps the label's space but hides it; the
+  // 769–1024px rail drops it entirely. The mobile drawer shows it.
+  return (
+    <div
+      className={`text-label text-faint tablet:hidden overflow-hidden px-4 pt-2.5 pb-1 leading-[normal] font-semibold tracking-[0.8px] whitespace-nowrap uppercase ${
+        collapsed ? 'pointer-events-none opacity-0' : ''
+      }`}
+    >
+      {label}
+    </div>
+  )
 }
 
-function renderNavTree(items: NavItem[], ctx: NavRenderContext): ReactNode {
+function NavTree({ items, ctx }: { items: NavItem[]; ctx: NavRenderContext }) {
   const nodes: ReactNode[] = []
   let lastGroup: string | undefined = undefined
 
   for (const item of items) {
     if (item.group && item.group !== lastGroup) {
       nodes.push(
-        ctx.collapsed ? (
-          <div key={`g-${item.group}`} className="flex justify-center pt-3 pb-1">
-            <span className="border-sidebar-foreground/20 w-4 border-t" aria-hidden />
-          </div>
-        ) : (
-          <div key={`g-${item.group}`} className="px-3 pt-4 pb-1">
-            <span className="text-sidebar-foreground/80 text-[10px] font-medium tracking-wider uppercase">
-              {item.group}
-            </span>
-          </div>
-        ),
+        <SectionLabel key={`g-${item.group}`} label={item.group} collapsed={ctx.collapsed} />,
       )
-      lastGroup = item.group
-    } else if (!item.group) {
-      lastGroup = undefined
     }
+    lastGroup = item.group
 
     const hasChildren = !!item.children && item.children.length > 0
-
-    // Collapsed parents reveal their children in a hover/focus flyout instead
-    // of inline (there's no room for indented rows in the 80px rail).
-    if (hasChildren && ctx.collapsed) {
-      nodes.push(<CollapsedFlyout key={`flyout:${item.path}`} item={item} ctx={ctx} />)
-      continue
+    // Keys are namespaced: a parent and its first child can share a path.
+    if (ctx.collapsed) {
+      nodes.push(<RailItem key={`rail:${item.label}:${item.path}`} item={item} ctx={ctx} />)
+    } else if (hasChildren) {
+      nodes.push(<NavGroup key={`group:${item.label}:${item.path}`} item={item} ctx={ctx} />)
+    } else {
+      nodes.push(<NavRow key={`item:${item.path}`} item={item} ctx={ctx} />)
     }
-
-    // Expanded parents with children render as a collapsible section
-    // (chevron toggle to contract/expand the submenu).
-    if (hasChildren) {
-      nodes.push(<NavSection key={`section:${item.path}`} item={item} ctx={ctx} />)
-      continue
-    }
-
-    // Keys are namespaced because a parent and its first child can share
-    // the same path (e.g. the Posts parent and its "All Posts" child are
-    // both `/posts`). Using the raw path as the key collided and made
-    // React warn about — and risk dropping — duplicate siblings.
-    nodes.push(<NavLink key={`item:${item.path}`} item={item} ctx={ctx} />)
   }
 
-  return nodes
+  return <>{nodes}</>
+}
+
+function NavRow({ item, ctx }: { item: NavItem; ctx: NavRenderContext }) {
+  const active = isPathActive(ctx.currentPath, item.path)
+  return (
+    <div className="mx-2 my-px">
+      <button
+        type="button"
+        onClick={() => ctx.onNavigate(item.path)}
+        className={`${ROW} px-2.5 py-[7px] ${active ? ROW_ACTIVE : ROW_IDLE}`}
+        aria-current={active ? 'page' : undefined}
+      >
+        <NavIcon item={item} />
+        <span className="truncate">{item.label}</span>
+        <NavBadge count={item.badge} className="ml-auto" />
+      </button>
+    </div>
+  )
 }
 
 /**
- * Expanded parent with a collapsible submenu. The label/icon navigates to the
- * parent destination; a trailing chevron toggles the child list open/closed.
- * Defaults to open, and auto-opens when the parent or one of its children is
- * the active route so the current page is never hidden behind a collapsed
- * section.
+ * Expanded parent with a sub-group. Groups start closed and open on their
+ * own when the current page is one of their children; a manual toggle holds
+ * until the route changes. At ≥1025px clicking the row toggles the group, as
+ * in the kit; below that (the mobile drawer) it opens the parent page. The
+ * parent stays filled while its section holds the current page, and the
+ * current child is filled too (Inbox.html).
  */
-function NavSection({ item, ctx }: { item: NavItem; ctx: NavRenderContext }) {
-  const Icon = item.icon
-  const isActive = isPathActive(ctx.currentPath, item.path)
-  const childActive = item.children!.some((c) => isPathActive(ctx.currentPath, c.path))
-  const [open, setOpen] = useState(true)
-  const childListId = `nav-section-${item.path.replace(/[^a-z0-9]+/gi, '-')}`
+function NavGroup({ item, ctx }: { item: NavItem; ctx: NavRenderContext }) {
+  const children = item.children!
+  const sectionActive = isSectionActive(ctx.currentPath, item)
+  const childActive = hasActiveDescendant(children, ctx.currentPath)
+  const [open, setOpen] = useState(childActive)
+  // Re-sync on navigation. Adjusting state during render (rather than in an
+  // effect) avoids painting the old open state for a frame. Query/hash-only
+  // changes (filters, tabs) keep the user's toggle.
+  const route = ctx.currentPath.split(/[?#]/)[0]!
+  const [syncedRoute, setSyncedRoute] = useState(route)
+  if (syncedRoute !== route) {
+    setSyncedRoute(route)
+    setOpen(childActive)
+  }
+  const listId = `nav-group-${item.label.replace(/[^a-z0-9]+/gi, '-').toLowerCase()}`
+  const current = activeChildPath(children, ctx.currentPath)
 
-  // Keep the active section visible: if the user is on this section's route
-  // (parent or child) it stays expanded regardless of the manual toggle.
-  const expanded = open || isActive || childActive
+  const wide = useWideNav()
+  const onRowClick = () => {
+    if (wide) setOpen((value) => !value)
+    else ctx.onNavigate(item.path)
+  }
 
+  // Kit `.ni` with `.ni-tog`: the 22px toggle sits inside the 7px padding, so
+  // parent rows are 36px tall; the toggle ends 10px from the row's edge.
   return (
     <div>
       <div
-        className={`flex items-center rounded-lg transition-colors ${
-          isActive
-            ? 'bg-sidebar-accent text-sidebar-primary'
-            : 'text-sidebar-foreground hover:bg-sidebar-accent'
+        className={`rounded-7 mx-2 my-px flex h-9 items-center pr-2.5 ${
+          sectionActive
+            ? `bg-acc-l text-acc ${FORCED_ACTIVE}`
+            : 'text-sub hover:bg-acc-l hover:text-acc'
         }`}
       >
         <button
-          onClick={() => ctx.onNavigate(item.path)}
-          className="flex min-w-0 flex-1 items-center gap-3 rounded-lg py-2.5 pr-1 pl-3 text-left"
-          aria-current={isActive ? 'page' : undefined}
+          type="button"
+          onClick={onRowClick}
+          className={`${ROW} h-full min-w-0 flex-1 bg-transparent py-0 pl-2.5 text-inherit ${
+            sectionActive ? 'font-[550]' : 'font-[450]'
+          }`}
+          aria-current={sectionActive && !open ? 'page' : undefined}
+          // When the row itself toggles, it reports the group like the chevron.
+          aria-expanded={wide ? open : undefined}
+          aria-controls={wide ? listId : undefined}
         >
-          <Icon className="h-5 w-5 shrink-0" aria-hidden />
-          <span className="truncate text-sm font-medium">{item.label}</span>
+          <NavIcon item={item} />
+          <span className="truncate">{item.label}</span>
+          <NavBadge count={item.badge} className="ml-1.5" />
         </button>
-        {!!item.badge && item.badge > 0 && (
-          <span
-            className="bg-destructive text-destructive-foreground mr-1 inline-flex min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 py-0.5 text-xs font-medium tabular-nums"
-            aria-label={`${item.badge} unread`}
-          >
-            {item.badge > 99 ? '99+' : item.badge}
-          </span>
-        )}
+        {/* 24px (kit 22) for WCAG 2.5.8. On touch screens the hit area is
+            44px wide and exactly the 36px row tall, so it doesn't reach into
+            the rows above and below. */}
         <button
-          onClick={() => setOpen((v) => !v)}
-          className="text-sidebar-foreground/55 hover:text-sidebar-foreground mr-1 flex shrink-0 items-center rounded-md p-1.5 transition-colors"
-          aria-label={`${expanded ? 'Collapse' : 'Expand'} ${item.label}`}
-          aria-expanded={expanded}
-          aria-controls={childListId}
+          type="button"
+          onClick={() => setOpen((value) => !value)}
+          className="prenta-touch-hit rounded-5 text-faint hover:text-txt relative ml-auto flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center border-0 bg-transparent p-0 [--touch-hit-block:-6px] [--touch-hit-inline:-10px] hover:bg-[color-mix(in_srgb,var(--txt)_8%,transparent)]"
+          aria-label={`${open ? 'Collapse' : 'Expand'} ${item.label}`}
+          aria-expanded={open}
+          aria-controls={listId}
         >
-          <ChevronDown
-            className={`h-4 w-4 transition-transform duration-200 ${expanded ? '' : '-rotate-90'}`}
+          <ChevronRight
+            className={`h-3 w-3 motion-safe:transition-transform motion-safe:duration-[var(--mo-base)] ${open ? 'rotate-90' : ''}`}
+            strokeWidth={2.2}
             aria-hidden
           />
         </button>
       </div>
 
-      {/* Tight (gap-less) connector container so the vertical tree guides of
-          adjacent rows touch and read as one continuous line with curved
-          elbows into each child. */}
-      {expanded && (
-        <div id={childListId} className="relative">
-          {item.children!.map((child, i) => (
-            <NavLink
-              key={`child:${item.path}:${child.path}`}
-              item={child}
-              ctx={ctx}
-              nested
-              isLast={i === item.children!.length - 1}
-            />
-          ))}
+      {open && (
+        // Kit `.sub-group`: margin 2px 8px 4px 18px, a 1.5px guide on the left
+        // and a 13px connector into each row.
+        <div
+          id={listId}
+          className="before:rounded-pill before:bg-bdr relative mt-0.5 mr-2 mb-1 ml-[18px] before:absolute before:top-1 before:bottom-[18px] before:left-0 before:w-[1.5px]"
+        >
+          {children.map((child) =>
+            child.children?.length ? (
+              <NestedSubGroup
+                key={`nest:${child.label}:${child.path}`}
+                item={child}
+                ctx={ctx}
+                current={current}
+              />
+            ) : (
+              <SubRow
+                key={`child:${child.label}:${child.path}`}
+                item={child}
+                ctx={ctx}
+                active={child.path === current}
+              />
+            ),
+          )}
         </div>
       )}
     </div>
   )
 }
 
-function NavLink({
+/** Kit `.sub-group .ni`: 12.5px, inset 20px past the guide, with a connector. */
+function SubRow({
   item,
   ctx,
-  nested = false,
-  isLast = false,
+  active,
+  kid = false,
+  className = '',
 }: {
   item: NavItem
   ctx: NavRenderContext
-  nested?: boolean
-  /** Last child in its group — the elbow stops here (no continuation line). */
-  isLast?: boolean
+  active: boolean
+  /** Third-level row (`a[data-nest-k]`): inset 30px, icon at half opacity. */
+  kid?: boolean
+  className?: string
 }) {
-  const Icon = item.icon
-  const isActive = isPathActive(ctx.currentPath, item.path)
-
-  const badge = item.badge && item.badge > 0 ? item.badge : 0
-
-  const button = (
+  return (
     <button
+      type="button"
       onClick={() => ctx.onNavigate(item.path)}
-      className={`flex w-full items-center gap-3 rounded-lg text-left transition-colors ${
-        nested
-          ? ctx.compact
-            ? 'py-1 pr-3 pl-9'
-            : 'py-1.5 pr-3 pl-9'
-          : ctx.compact
-            ? 'px-3 py-1.5'
-            : 'px-3 py-2.5'
+      className={`${ROW} text-sm2 relative my-px py-[7px] pr-2.5 before:absolute before:top-1/2 before:left-0 before:h-[1.5px] before:w-[13px] before:-translate-y-1/2 ${
+        kid ? 'pl-[30px]' : 'pl-5'
       } ${
-        isActive
-          ? 'bg-sidebar-accent text-sidebar-primary'
-          : 'text-sidebar-foreground hover:bg-sidebar-accent'
-      } ${ctx.collapsed ? 'justify-center px-3' : ''}`}
-      title={ctx.collapsed ? item.label : ''}
-      aria-current={isActive ? 'page' : undefined}
+        active ? `${ROW_ACTIVE} before:bg-acc-m` : `${ROW_IDLE} before:bg-bdr hover:before:bg-acc-m`
+      } ${className}`}
+      aria-current={active ? 'page' : undefined}
     >
-      <span className="relative flex shrink-0 items-center">
-        {!nested && <Icon className="h-5 w-5 shrink-0" aria-hidden />}
-        {nested && !ctx.collapsed && (
-          <Icon className="text-sidebar-foreground/60 h-4 w-4 shrink-0" aria-hidden />
-        )}
-        {/* Collapsed rail: a dot signals unread without room for a number. */}
-        {ctx.collapsed && badge > 0 && (
-          <span
-            className="bg-destructive absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full"
-            aria-hidden
-          />
-        )}
+      <span className={kid ? 'flex opacity-50' : 'flex'}>
+        <NavIcon item={item} size={14} />
       </span>
-      {!ctx.collapsed && (
-        <span className={`truncate font-medium ${nested ? 'text-[13px]' : 'text-sm'}`}>
-          {item.label}
-        </span>
-      )}
-      {!ctx.collapsed && badge > 0 && (
-        <span
-          className="bg-destructive text-destructive-foreground ml-auto inline-flex min-w-5 items-center justify-center rounded-full px-1.5 py-0.5 text-xs font-medium tabular-nums"
-          aria-label={`${badge} unread`}
+      <span className="truncate">{item.label}</span>
+      <NavBadge count={item.badge} className="ml-auto" />
+    </button>
+  )
+}
+
+/**
+ * Third level (`cms-layouts.js` "3rd-level nav nesting"): All Entries and All
+ * Forms open one row per form. The row itself navigates; the chevron at its
+ * right edge toggles the rows, which start closed and open when one of them
+ * is the current page.
+ */
+function NestedSubGroup({
+  item,
+  ctx,
+  current,
+}: {
+  item: NavItem
+  ctx: NavRenderContext
+  current: string | undefined
+}) {
+  const kids = item.children!
+  const kidActive = kids.some((kid) => kid.path === current)
+  const [open, setOpen] = useState(kidActive)
+  const route = ctx.currentPath.split(/[?#]/)[0]!
+  const [syncedRoute, setSyncedRoute] = useState(route)
+  if (syncedRoute !== route) {
+    setSyncedRoute(route)
+    setOpen(kidActive)
+  }
+  const listId = `nav-nest-${item.label.replace(/[^a-z0-9]+/gi, '-').toLowerCase()}`
+
+  return (
+    <>
+      <div className="relative">
+        <SubRow item={item} ctx={ctx} active={item.path === current} className="pr-[30px]!" />
+        <button
+          type="button"
+          onClick={() => setOpen((value) => !value)}
+          // Touch hit area: 44px wide, the 30px row tall.
+          className={`prenta-touch-hit rounded-5 absolute top-1/2 right-1 flex h-6 w-6 -translate-y-1/2 cursor-pointer items-center justify-center border-0 bg-transparent p-0 [--touch-hit-block:-3px] [--touch-hit-inline:-10px] ${
+            item.path === current ? 'text-acc' : 'text-sub'
+          }`}
+          aria-label={`${open ? 'Collapse' : 'Expand'} ${item.label}`}
+          aria-expanded={open}
+          aria-controls={listId}
         >
-          {badge > 99 ? '99+' : badge}
-        </span>
+          <ChevronRight
+            className={`h-[14px] w-[14px] opacity-55 motion-safe:transition-transform motion-safe:duration-[var(--mo-base)] ${open ? 'rotate-90' : ''}`}
+            strokeWidth={2.4}
+            aria-hidden
+          />
+        </button>
+      </div>
+      {open && (
+        <div id={listId}>
+          {kids.map((kid) => (
+            <SubRow
+              key={`kid:${kid.label}:${kid.path}`}
+              item={kid}
+              ctx={ctx}
+              active={kid.path === current}
+              kid
+            />
+          ))}
+        </div>
       )}
+    </>
+  )
+}
+
+/**
+ * Rail item (collapsed sidebar or ≤1024px). The label stays in the
+ * accessibility tree (`sr-only`). Parents never render sub-items here: the
+ * parent is active for any child page and the children open in a flyout.
+ */
+function RailItem({ item, ctx }: { item: NavItem; ctx: NavRenderContext }) {
+  const hasChildren = !!item.children && item.children.length > 0
+  const active = hasChildren
+    ? isSectionActive(ctx.currentPath, item)
+    : isPathActive(ctx.currentPath, item.path)
+
+  const trigger = (
+    <button
+      type="button"
+      onClick={() => ctx.onNavigate(item.path)}
+      className={`${ROW} justify-center px-0 py-[9px] ${active ? ROW_ACTIVE : ROW_IDLE}`}
+      aria-current={active ? 'page' : undefined}
+    >
+      <NavIcon item={item} />
+      <span className="sr-only">{item.label}</span>
+      <NavBadge count={item.badge} />
     </button>
   )
 
-  if (!nested || ctx.collapsed) return button
+  if (hasChildren) return <RailFlyout item={item} ctx={ctx} trigger={trigger} />
+  return <RailLabel label={item.label}>{trigger}</RailLabel>
+}
 
-  // Curved-elbow tree connector (expanded only). The elbow draws the vertical
-  // run from the row top to its vertical center, curves at the bottom-left
-  // corner, then runs horizontally into the row. Non-last rows continue the
-  // vertical line to the row bottom so it meets the next sibling's elbow.
-  // The guide is centered (~21px) under the parent item's 20px icon.
+/** Kit `.flyout-panel` chrome, shared by the label tip and the menu. */
+const FLYOUT_PANEL =
+  'bg-card border-bdr rounded-12 shadow-shd2 min-w-[200px] overflow-hidden border pb-2 motion-safe:animate-in motion-safe:fade-in'
+const FLYOUT_LABEL =
+  'text-body text-txt flex items-center gap-2 px-[14px] py-2.5 leading-[normal] font-medium'
+
+/**
+ * Hover/focus label for a childless rail item (the kit's label-only flyout).
+ * Visual only: the button already carries its label for screen readers.
+ * WCAG 1.4.13: Esc dismisses it, the pointer can move onto it, and it shows
+ * for mouse and keyboard only, so a tap on a touch tablet doesn't leave it
+ * stuck after navigating.
+ */
+function RailLabel({ label, children }: { label: string; children: ReactNode }) {
+  const [top, setTop] = useState<number | null>(null)
+  const hideTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const cancelHide = () => {
+    if (hideTimer.current) clearTimeout(hideTimer.current)
+    hideTimer.current = null
+  }
+  const show = (el: HTMLElement) => {
+    cancelHide()
+    setTop(el.getBoundingClientRect().top)
+  }
+  const hide = () => {
+    cancelHide()
+    setTop(null)
+  }
+  // Crossing the 6px gap to the label briefly leaves the trigger.
+  const scheduleHide = () => {
+    cancelHide()
+    hideTimer.current = setTimeout(() => setTop(null), 120)
+  }
+  const visible = top !== null
+  useEffect(() => {
+    if (!visible) return
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setTop(null)
+    }
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [visible])
+  useEffect(() => () => cancelHide(), [])
   return (
-    <div className="relative">
-      <span
-        aria-hidden
-        className="border-sidebar-border absolute top-0 left-[21px] h-1/2 w-[15px] rounded-bl-lg border-b border-l"
-      />
-      {!isLast && (
-        <span
+    <div
+      className="mx-1.5 my-px"
+      onPointerEnter={(e) => {
+        if (e.pointerType === 'mouse') show(e.currentTarget)
+      }}
+      onPointerLeave={scheduleHide}
+      onFocus={(e) => {
+        if (e.currentTarget.querySelector(':focus-visible')) show(e.currentTarget)
+      }}
+      onBlur={hide}
+      onClick={hide}
+    >
+      {children}
+      {visible && (
+        <div
           aria-hidden
-          className="border-sidebar-border absolute top-1/2 bottom-0 left-[21px] border-l"
-        />
+          className={`${FLYOUT_PANEL} fixed left-[var(--sbw-col)] z-[var(--z-menu)] min-w-0 pb-0`}
+          style={{ top }}
+          onPointerEnter={cancelHide}
+          onPointerLeave={scheduleHide}
+        >
+          <div className={FLYOUT_LABEL}>{label}</div>
+        </div>
       )}
-      {button}
     </div>
   )
 }
 
 /**
- * Collapsed-rail parent: shows the icon button and, on hover or keyboard
- * focus, a flyout listing the parent's children. Built on Radix
- * DropdownMenu so the panel is portaled (escaping the nav's `overflow`
- * clip), positioned, dismissable, and keyboard-navigable. Hover-opening is
- * controlled manually; we suppress Radix's auto-focus when opened by pointer
- * so hovering doesn't steal focus, while keyboard opening still moves focus
- * into the menu.
+ * Rail parent with a flyout listing its children. Built on Radix
+ * DropdownMenu so the panel is portaled (escaping the nav's `overflow` clip),
+ * dismissable and keyboard-navigable. Hover opens it; Radix's auto-focus is
+ * suppressed for pointer opens so hovering doesn't steal focus, while
+ * keyboard opens still move focus into the menu.
  */
-function CollapsedFlyout({ item, ctx }: { item: NavItem; ctx: NavRenderContext }) {
-  const Icon = item.icon
-  const isActive = isPathActive(ctx.currentPath, item.path)
-  const { resolvedTheme } = useTheme()
+function RailFlyout({
+  item,
+  ctx,
+  trigger,
+}: {
+  item: NavItem
+  ctx: NavRenderContext
+  trigger: ReactNode
+}) {
+  const children = item.children!
+  const { resolvedTheme, lightBase, accent } = useTheme()
   const [open, setOpen] = useState(false)
   const openedByPointer = useRef(false)
+  const focusEntered = useRef(false)
+  const closingByHover = useRef(false)
+  const pointerSelect = useRef(false)
+  const wrapRef = useRef<HTMLDivElement>(null)
+  const contentRef = useRef<HTMLDivElement>(null)
   const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const current = activeChildPath(children, ctx.currentPath)
 
   const cancelClose = () => {
     if (closeTimer.current) {
@@ -598,98 +672,148 @@ function CollapsedFlyout({ item, ctx }: { item: NavItem; ctx: NavRenderContext }
   }
   const scheduleClose = () => {
     cancelClose()
-    closeTimer.current = setTimeout(() => setOpen(false), 120)
+    closeTimer.current = setTimeout(() => {
+      closingByHover.current = true
+      setOpen(false)
+    }, 120)
+  }
+  // Only a hover-opened menu closes when the pointer leaves; a keyboard user
+  // inside a menu keeps it while the mouse happens to cross the rail.
+  const hoverLeave = () => {
+    if (openedByPointer.current) scheduleClose()
+  }
+  const onOpenChange = (next: boolean) => {
+    if (next) closingByHover.current = false
+    setOpen(next)
   }
 
+  // `openedByPointer` records how the menu last opened, set by the opening
+  // input itself: a mouse hover on a closed menu sets it, while a key or a
+  // touch/pen press on the trigger clears it before Radix toggles. Hovering an
+  // already open menu leaves it alone, and so do close paths, so the close
+  // focus handling below still knows how the closing menu was opened. (Esc
+  // needs no listener here: Radix dismisses the top layer on Esc wherever
+  // focus is.)
   return (
-    <DropdownMenu.Root
-      open={open}
-      onOpenChange={(next) => {
-        if (!next) openedByPointer.current = false
-        setOpen(next)
-      }}
-      modal={false}
-    >
+    <DropdownMenu.Root open={open} onOpenChange={onOpenChange} modal={false}>
       <div
+        ref={wrapRef}
+        className="mx-1.5 my-px"
         onMouseEnter={() => {
-          openedByPointer.current = true
+          if (!open) {
+            openedByPointer.current = true
+            closingByHover.current = false
+          }
           cancelClose()
           setOpen(true)
         }}
-        onMouseLeave={scheduleClose}
-      >
-        <DropdownMenu.Trigger asChild>
-          <button
-            onClick={() => ctx.onNavigate(item.path)}
-            className={`flex w-full items-center justify-center rounded-lg px-3 py-2.5 transition-colors ${
-              isActive
-                ? 'bg-sidebar-accent text-sidebar-primary'
-                : 'text-sidebar-foreground hover:bg-sidebar-accent'
-            }`}
-            aria-label={
-              item.badge && item.badge > 0 ? `${item.label} (${item.badge} unread)` : item.label
+        onMouseLeave={hoverLeave}
+        onKeyDownCapture={(e) => {
+          openedByPointer.current = false
+          // The mouse already opened the menu while focus sat on the trigger:
+          // Radix would treat these keys as a no-op (ArrowDown) or a toggle
+          // closed (Enter/Space), so take the keyboard user into the menu.
+          if (open && (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ')) {
+            const first = contentRef.current?.querySelector<HTMLElement>(
+              '[role="menuitem"]:not([data-disabled])',
+            )
+            if (first) {
+              e.preventDefault()
+              e.stopPropagation()
+              first.focus()
             }
-            title={item.label}
-            aria-current={isActive ? 'page' : undefined}
-          >
-            <span className="relative flex shrink-0 items-center">
-              <Icon className="h-5 w-5 shrink-0" aria-hidden />
-              {!!item.badge && item.badge > 0 && (
-                <span
-                  className="bg-destructive absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full"
-                  aria-hidden
-                />
-              )}
-            </span>
-          </button>
-        </DropdownMenu.Trigger>
+          }
+        }}
+        onPointerDownCapture={(e) => {
+          if (e.pointerType !== 'mouse') openedByPointer.current = false
+        }}
+      >
+        <DropdownMenu.Trigger asChild>{trigger}</DropdownMenu.Trigger>
       </div>
 
       <DropdownMenu.Portal container={adminPortalContainer()}>
         <DropdownMenu.Content
+          ref={contentRef}
           side="right"
           align="start"
-          sideOffset={10}
+          // The trigger ends 6px inside the 60px rail; the kit panel starts at 60px.
+          sideOffset={6}
           onMouseEnter={cancelClose}
-          onMouseLeave={scheduleClose}
+          onMouseLeave={hoverLeave}
+          // A hover open must not pull focus out of what the user is typing
+          // in (typeahead would then eat their keys). Keyboard opens focus
+          // the first item as usual. DropdownMenu forwards Menu's
+          // `onOpenAutoFocus` but leaves it out of its types; the shell-nav
+          // render test pins the behaviour across Radix upgrades.
+          {...({
+            onOpenAutoFocus: (e: Event) => {
+              focusEntered.current = false
+              pointerSelect.current = false
+              if (openedByPointer.current) e.preventDefault()
+            },
+          } as object)}
+          onFocusCapture={() => {
+            focusEntered.current = true
+          }}
           onCloseAutoFocus={(e) => {
-            // After a pointer-driven open, don't yank focus back to the rail
-            // trigger (it would leave a stray focus ring once the cursor moves
-            // away). Keyboard-driven opens keep the default focus-return.
-            if (openedByPointer.current) e.preventDefault()
+            // After a pointer-driven open that never took focus, leave focus
+            // where the user had it (e.g. a field they're typing in) instead
+            // of yanking it to the rail trigger. Once focus has been inside
+            // the menu (keyboard open, or Radix focusing items under the
+            // pointer), Esc or picking an item returns it to the trigger;
+            // otherwise it would fall to <body> as the focused item unmounts.
+            // A close because the pointer left never moves focus: focusing
+            // this trigger would dismiss the next flyout the pointer opened.
+            if (openedByPointer.current && (!focusEntered.current || closingByHover.current)) {
+              e.preventDefault()
+            } else if (pointerSelect.current) {
+              // A mouse pick still returns focus to the trigger, but without
+              // the keyboard focus ring (Radix's item focus under the pointer
+              // would otherwise make Chromium show it).
+              e.preventDefault()
+              wrapRef.current
+                ?.querySelector<HTMLElement>('button')
+                ?.focus({ preventScroll: true, focusVisible: false } as FocusOptions)
+            }
           }}
-          // Radix portals to <body>, outside the `.prenta-admin` scope where
-          // the theme tokens (`--popover`, `--radius`, …) live — without the
-          // scope class the panel renders transparent with square corners.
-          // Re-assert the scope (and current dark state) on the panel itself so
-          // it inherits the tokens regardless of portal position.
-          className={`prenta-admin ${resolvedTheme === 'dark' ? 'dark' : ''} bg-popover text-popover-foreground border-border motion-safe:animate-in motion-safe:fade-in z-50 min-w-44 overflow-hidden rounded-lg border p-1 shadow-lg`}
+          // Radix portals outside the `.prenta-admin` scope where the theme
+          // tokens live; re-assert the scope, dark state, light base and
+          // accent on the panel so it paints with the admin's tokens.
+          data-light={lightBase}
+          style={
+            accentPickCssVars(
+              generateAdminThemeTokens({ adminAccentColor: accent }, resolvedTheme),
+            ) as CSSProperties
+          }
+          className={`prenta-admin ${resolvedTheme === 'dark' ? 'dark' : ''} ${FLYOUT_PANEL} z-[var(--z-menu)]`}
         >
-          <div className="text-muted-foreground border-border mb-1 border-b px-3 py-2 text-xs font-medium">
+          <div className={`${FLYOUT_LABEL} border-bdr mb-1 border-b pb-2`}>
+            <span className="text-acc flex">
+              <NavIcon item={item} />
+            </span>
             {item.label}
+            <NavBadge count={item.badge} />
           </div>
-          {item.children!.map((child) => {
-            const ChildIcon = child.icon
-            const childActive = isPathActive(ctx.currentPath, child.path)
+          {children.map((child) => {
+            const active = child.path === current
             return (
               <DropdownMenu.Item
-                key={`flyout-item:${item.path}:${child.path}`}
+                key={`flyout:${child.label}:${child.path}`}
+                // Radix's Enter/Space select clicks the item with detail 0.
+                onClick={(e) => {
+                  pointerSelect.current = e.detail !== 0
+                }}
                 onSelect={() => ctx.onNavigate(child.path)}
-                className={`data-highlighted:bg-accent hover:bg-accent flex cursor-pointer items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none select-none ${
-                  childActive ? 'text-primary' : 'text-foreground'
+                className={`text-body rounded-6 data-highlighted:bg-acc-l data-highlighted:text-acc mx-1 my-px flex cursor-pointer items-center gap-2 px-[14px] py-1.5 leading-[normal] outline-none select-none ${
+                  active ? `bg-acc-l text-acc font-[550] ${FORCED_ACTIVE}` : 'text-sub'
                 }`}
-                aria-current={childActive ? 'page' : undefined}
+                aria-current={active ? 'page' : undefined}
               >
-                <ChildIcon className="text-muted-foreground h-4 w-4 shrink-0" aria-hidden />
-                <span className="truncate">{child.label}</span>
-                {!!child.badge && child.badge > 0 && (
-                  <span
-                    className="bg-destructive text-destructive-foreground ml-auto inline-flex min-w-5 items-center justify-center rounded-full px-1.5 py-0.5 text-xs font-medium tabular-nums"
-                    aria-label={`${child.badge} unread`}
-                  >
-                    {child.badge > 99 ? '99+' : child.badge}
-                  </span>
-                )}
+                <span className="text-faint flex">
+                  <NavIcon item={child} size={14} />
+                </span>
+                <span className="flex-1 truncate">{child.label}</span>
+                <NavBadge count={child.badge} />
               </DropdownMenu.Item>
             )
           })}
@@ -698,165 +822,3 @@ function CollapsedFlyout({ item, ctx }: { item: NavItem; ctx: NavRenderContext }
     </DropdownMenu.Root>
   )
 }
-
-// ─── Config-driven nav builder ──────────────────────────────────────────────
-
-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
-}
-
-export interface NavItem {
-  path: string
-  label: string
-  icon: LucideIcon
-  /**
-   * Section header. Items sharing the same `group` are grouped together
-   * under a header rendered on first encounter. Items without a `group`
-   * render at the top of the nav in document order.
-   */
-  group?: string
-  /** Indented children rendered immediately after this item. */
-  children?: NavItem[]
-  /**
-   * Optional unread/notification count. Rendered as a red pill (expanded)
-   * or a dot (collapsed). Falsy / zero values render nothing.
-   */
-  badge?: number
-}
-
-/**
- * Build the sidebar nav tree from the CMS config. If no collections are
- * configured, returns the curated `defaultNavItems` tree. When
- * collections ARE configured, page-type collections render as Content
- * entries, and every static destination (Media, Forms, SEO, Script Tags,
- * Users, API Keys, Settings) is anchored under the right group.
- */
-export function buildNavItems(config: any): NavItem[] {
-  if (!config?.collections) return defaultNavItems
-
-  const raw = config.collections
-  const collectionsList: any[] = Array.isArray(raw) ? raw : Object.values(raw)
-  const visible = collectionsList.filter((c) => !c.admin?.hidden)
-
-  // Treat `admin.group: 'Posts'` (case-insensitive) as a synonym for
-  // `type: 'post'` so consumers can tag arbitrary collections into
-  // the Posts area without changing the discriminator they already
-  // use elsewhere (sitemaps, schema.org, etc.).
-  const isPostsGroup = (c: any) =>
-    typeof c.admin?.group === 'string' && c.admin.group.toLowerCase() === 'posts'
-  const pages = visible.filter((c) => c.type === 'page' && !c.admin?.group)
-  const posts = visible.filter((c) => c.type === 'post' || isPostsGroup(c))
-  const otherUngrouped = visible.filter(
-    (c) => c.type !== 'page' && c.type !== 'post' && !c.admin?.group,
-  )
-  // Anything explicitly grouped that isn't a posts collection.
-  const grouped = visible.filter((c) => c.admin?.group && !isPostsGroup(c) && c.type !== 'post')
-
-  const items: NavItem[] = [{ path: '/', label: 'Dashboard', icon: LayoutDashboard }]
-
-  // Ungrouped collections that are neither page- nor post-type stay at
-  // the top level, directly under Dashboard, before the CONTENT group.
-  for (const collection of otherUngrouped) {
-    items.push({
-      label: collection.labels?.plural ?? collection.slug,
-      path: `/${collection.slug}`,
-      icon: resolveIcon(collection),
-    })
-  }
-
-  // CONTENT group. Everything below shares `group: 'Content'`, so the
-  // renderer emits the "CONTENT" header once — above Pages. Order:
-  // Pages → Posts → static content destinations (Media / Forms / SEO /
-  // Script Tags).
-
-  // Pages-style collections render as plain Content entries (no nested
-  // children).
-  pages.forEach((collection) => {
-    items.push({
-      label: collection.labels?.plural ?? collection.slug,
-      path: `/${collection.slug}`,
-      icon: resolveIcon(collection),
-      group: 'Content',
-    })
-  })
-
-  // Posts area — collapses every post-type collection under a single
-  // "Posts" parent. The aggregated table at /posts and the type cards
-  // at /posts/types are the entry points; individual post-type
-  // collections are not enumerated in the sidebar to avoid the
-  // duplicate-nav problem when a project has many types.
-  if (posts.length > 0) {
-    items.push({
-      path: '/posts',
-      label: 'Posts',
-      icon: FileText,
-      group: 'Content',
-      children: POSTS_CHILDREN,
-    })
-  }
-
-  // Standard Content destinations (always present — they map to CMS
-  // features, not collections).
-  items.push(
-    { path: '/media', label: 'Media', icon: Image, group: 'Content' },
-    { path: '/forms', label: 'Forms', icon: ClipboardList, group: 'Content' },
-    { path: '/seo', label: 'SEO', icon: SearchIcon, group: 'Content' },
-    { path: '/script-tags', label: 'Script Tags', icon: Code2, group: 'Content' },
-    { path: '/trash', label: 'Trash', icon: Trash2, group: 'Content' },
-  )
-
-  // Plugin-contributed custom nav links (PluginDefinition.adminNavItems,
-  // collected onto `_pluginNavItems` by cms-core's applyPlugins). Deduped by
-  // path against everything already present so a plugin can't double a built-in
-  // destination or one of its own collections. Emitted HERE — inside the Content
-  // block, before the custom collection groups below — so their `group: 'Content'`
-  // stays contiguous and doesn't start a second "CONTENT" header after the groups.
-  const pluginNav: Array<{ label?: string; icon?: string; path?: string }> = Array.isArray(
-    config?._pluginNavItems,
-  )
-    ? config._pluginNavItems
-    : []
-  for (const item of pluginNav) {
-    if (!item?.path || items.some((n) => n.path === item.path)) continue
-    items.push({
-      label: item.label ?? item.path,
-      path: item.path,
-      icon: (item.icon && ICON_MAP[item.icon]) || FileText,
-      group: 'Content',
-    })
-  }
-
-  // Config-supplied custom groups land after the standard Content block and
-  // before Settings. Each renders under its own header. Skip any collection
-  // whose path a built-in Content destination (or an already-added item) already
-  // provides — otherwise a grouped collection like plugin-forms' `forms`
-  // (admin.group: 'Forms', path `/forms`) duplicates the static Forms entry, and
-  // `applyFormsNav` then attaches "All Entries" to BOTH.
-  const groupBuckets = new Map<string, NavItem[]>()
-  for (const col of grouped) {
-    const path = `/${col.slug}`
-    if (items.some((n) => n.path === path)) continue
-    const group = col.admin.group as string
-    const bucket = groupBuckets.get(group) ?? []
-    bucket.push({
-      label: col.labels?.plural ?? col.slug,
-      path,
-      icon: resolveIcon(col),
-      group,
-    })
-    groupBuckets.set(group, bucket)
-  }
-  for (const bucket of groupBuckets.values()) items.push(...bucket)
-
-  // Settings destinations — always last. Users + API Keys now live inside
-  // the Settings view as tabs (see Settings.tsx), so only Settings is anchored
-  // here.
-  items.push(
-    { path: '/jobs', label: 'Jobs', icon: ListTodo, group: 'Settings' },
-    { path: '/settings', label: 'Settings', icon: Settings, group: 'Settings' },
-  )
-
-  return items
-}