@actuate-media/cms-admin 0.15.0 → 0.16.1

package/src/components/pages/tag-badges.tsx

@@ -0,0 +1,104 @@
+'use client'
+
+import { paletteFor } from '../posts/badges.js'
+
+/**
+ * Tag UI for the Pages area. Two variants:
+ *   - PageTagChip — interactive filter chip (filter bar). Toggles a tag
+ *     on/off; announces pressed state for screen readers.
+ *   - PageTagPill — static inline pill (Tags column). Compact, with a
+ *     colored dot so tags don't rely on color alone.
+ *
+ * Both resolve color through the shared `paletteFor` palette so they
+ * stay consistent with Post Type badges and work in light/dark mode.
+ */
+
+const DOT_COLOR: Record<string, string> = {
+  purple: 'bg-violet-500',
+  green: 'bg-emerald-500',
+  orange: 'bg-amber-500',
+  red: 'bg-red-500',
+  blue: 'bg-blue-500',
+  pink: 'bg-pink-500',
+  gray: 'bg-muted-foreground',
+}
+
+export function tagDotColor(color: string | null | undefined): string {
+  if (!color) return DOT_COLOR.gray!
+  return DOT_COLOR[color] ?? DOT_COLOR.gray!
+}
+
+export function PageTagChip({
+  name,
+  color,
+  count,
+  selected,
+  onToggle,
+}: {
+  name: string
+  color: string | null
+  count?: number
+  selected: boolean
+  onToggle: () => void
+}) {
+  const p = paletteFor(color)
+  return (
+    <button
+      type="button"
+      onClick={onToggle}
+      aria-pressed={selected}
+      className={`focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium transition-colors focus:outline-none focus-visible:ring-2 ${
+        selected
+          ? `${p.bg} ${p.text} border-transparent ring-1 ${p.ring}`
+          : 'border-border bg-background text-foreground hover:bg-accent'
+      }`}
+    >
+      <span aria-hidden className={`h-2 w-2 rounded-full ${tagDotColor(color)}`} />
+      {name}
+      {typeof count === 'number' && (
+        <span className="text-muted-foreground tabular-nums">{count}</span>
+      )}
+    </button>
+  )
+}
+
+export function PageTagPill({ name, color }: { name: string; color: string | null }) {
+  const p = paletteFor(color)
+  return (
+    <span
+      className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium ${p.bg} ${p.text}`}
+    >
+      <span aria-hidden className={`h-1.5 w-1.5 rounded-full ${tagDotColor(color)}`} />
+      {name}
+    </span>
+  )
+}
+
+export function PageTagsCell({
+  tagSlugs,
+  primaryTagId,
+  resolve,
+}: {
+  tagSlugs: string[]
+  primaryTagId: string | null
+  resolve: (slug: string) => { name: string; color: string | null } | undefined
+}) {
+  if (tagSlugs.length === 0) {
+    return <span className="text-muted-foreground text-xs">—</span>
+  }
+  // Show the primary tag first, then the rest, so grouping context is
+  // visible at a glance.
+  const ordered = [...tagSlugs].sort((a, b) => {
+    if (a === primaryTagId) return -1
+    if (b === primaryTagId) return 1
+    return 0
+  })
+  return (
+    <div className="flex flex-wrap items-center gap-1">
+      {ordered.map((slug) => {
+        const tag = resolve(slug)
+        return <PageTagPill key={slug} name={tag?.name ?? slug} color={tag?.color ?? null} />
+      })}
+    </div>
+  )
+}

package/src/components/posts/badges.tsx

@@ -0,0 +1,170 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import type { PostStatus } from '../../lib/posts-service.js'
+
+/**
+ * Shared status / type / SEO indicators for the Posts admin area.
+ *
+ * Colors are restricted to the theme tokens already used elsewhere in
+ * the admin (`success`, `warning`, `destructive`, `primary`, `muted`)
+ * plus a small named-color palette (`purple`, `green`, `orange`, ...)
+ * that maps to fixed Tailwind utilities. This keeps the badges working
+ * in both light and dark mode and avoids leaking `bg-[#...]` arbitrary
+ * values into components.
+ */
+
+// ─── Named color palette ─────────────────────────────────────────────
+
+const PALETTE: Record<string, { bg: string; text: string; ring: string; border: string }> = {
+  purple: {
+    bg: 'bg-violet-50 dark:bg-violet-950/40',
+    text: 'text-violet-700 dark:text-violet-300',
+    ring: 'ring-violet-200 dark:ring-violet-900',
+    border: 'border-violet-500',
+  },
+  green: {
+    bg: 'bg-emerald-50 dark:bg-emerald-950/40',
+    text: 'text-emerald-700 dark:text-emerald-300',
+    ring: 'ring-emerald-200 dark:ring-emerald-900',
+    border: 'border-emerald-500',
+  },
+  orange: {
+    bg: 'bg-amber-50 dark:bg-amber-950/40',
+    text: 'text-amber-700 dark:text-amber-300',
+    ring: 'ring-amber-200 dark:ring-amber-900',
+    border: 'border-amber-500',
+  },
+  red: {
+    bg: 'bg-red-50 dark:bg-red-950/40',
+    text: 'text-red-700 dark:text-red-300',
+    ring: 'ring-red-200 dark:ring-red-900',
+    border: 'border-red-500',
+  },
+  blue: {
+    bg: 'bg-blue-50 dark:bg-blue-950/40',
+    text: 'text-blue-700 dark:text-blue-300',
+    ring: 'ring-blue-200 dark:ring-blue-900',
+    border: 'border-blue-500',
+  },
+  pink: {
+    bg: 'bg-pink-50 dark:bg-pink-950/40',
+    text: 'text-pink-700 dark:text-pink-300',
+    ring: 'ring-pink-200 dark:ring-pink-900',
+    border: 'border-pink-500',
+  },
+  gray: {
+    bg: 'bg-muted',
+    text: 'text-muted-foreground',
+    ring: 'ring-border',
+    border: 'border-border',
+  },
+}
+
+export function paletteFor(color: string | null | undefined) {
+  if (!color) return PALETTE.gray!
+  return PALETTE[color] ?? PALETTE.gray!
+}
+
+// ─── PostStatusBadge ─────────────────────────────────────────────────
+
+const STATUS_LABEL: Record<PostStatus, string> = {
+  PUBLISHED: 'Published',
+  DRAFT: 'Draft',
+  SCHEDULED: 'Scheduled',
+  ARCHIVED: 'Archived',
+}
+
+const STATUS_PALETTE: Record<PostStatus, string> = {
+  PUBLISHED: 'green',
+  DRAFT: 'gray',
+  SCHEDULED: 'orange',
+  ARCHIVED: 'gray',
+}
+
+const STATUS_GLYPH: Record<PostStatus, string> = {
+  PUBLISHED: '●',
+  DRAFT: '○',
+  SCHEDULED: '◐',
+  ARCHIVED: '◌',
+}
+
+export function PostStatusBadge({ status }: { status: PostStatus }) {
+  const p = paletteFor(STATUS_PALETTE[status])
+  return (
+    <span
+      className={`inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium ${p.bg} ${p.text}`}
+      aria-label={`Status: ${STATUS_LABEL[status]}`}
+    >
+      <span aria-hidden className="text-[10px] leading-none">
+        {STATUS_GLYPH[status]}
+      </span>
+      {STATUS_LABEL[status]}
+    </span>
+  )
+}
+
+// ─── PostTypeBadge ───────────────────────────────────────────────────
+
+export function PostTypeBadge({
+  label,
+  color,
+  onClick,
+}: {
+  label: string
+  color: string | null
+  onClick?: () => void
+}): ReactNode {
+  const p = paletteFor(color)
+  const className = `inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${p.bg} ${p.text}`
+  if (onClick) {
+    return (
+      <button type="button" onClick={onClick} className={`${className} hover:opacity-80`}>
+        {label}
+      </button>
+    )
+  }
+  return <span className={className}>{label}</span>
+}
+
+// ─── SeoScoreIndicator ───────────────────────────────────────────────
+
+/**
+ * Returns the palette key for an SEO score so callers can match the
+ * colored dot. 80+ green, 60–79 orange, 1–59 red, missing = gray.
+ */
+export function seoScorePalette(score: number | null): string {
+  if (score === null || Number.isNaN(score)) return 'gray'
+  if (score >= 80) return 'green'
+  if (score >= 60) return 'orange'
+  if (score >= 1) return 'red'
+  return 'gray'
+}
+
+export function SeoScoreIndicator({ score }: { score: number | null }) {
+  const colorKey = seoScorePalette(score)
+  const p = paletteFor(colorKey)
+  if (score === null) {
+    return (
+      <span className="text-muted-foreground inline-flex items-center gap-1.5 text-xs">
+        <span aria-hidden className={`h-2 w-2 rounded-full ${p.bg.split(' ')[0]}`} />
+        <span className="tabular-nums">—</span>
+      </span>
+    )
+  }
+  return (
+    <span className="text-foreground inline-flex items-center gap-1.5 text-xs">
+      <span
+        aria-hidden
+        className={`h-2 w-2 rounded-full ${
+          colorKey === 'green'
+            ? 'bg-emerald-500'
+            : colorKey === 'orange'
+              ? 'bg-amber-500'
+              : 'bg-red-500'
+        }`}
+      />
+      <span className="tabular-nums">{score}</span>
+    </span>
+  )
+}

package/src/components/posts/icons.ts

@@ -0,0 +1,40 @@
+import {
+  FileText,
+  Briefcase,
+  Newspaper,
+  BookOpen,
+  Folder,
+  Layers,
+  Image as ImageIcon,
+  Calendar,
+  Users,
+  HelpCircle,
+  type LucideIcon,
+} from 'lucide-react'
+
+/**
+ * Icon registry for Post Types. Keyed by the string value stored in a
+ * collection's `admin.icon`. Rendering surfaces (Post Types cards, the
+ * New Post picker, the Quick Post Type gallery) all resolve through
+ * `resolvePostTypeIcon` so a single map keeps them in sync — adding an
+ * icon here makes it available everywhere at once.
+ */
+export const POST_TYPE_ICONS: Record<string, LucideIcon> = {
+  'file-text': FileText,
+  briefcase: Briefcase,
+  newspaper: Newspaper,
+  book: BookOpen,
+  folder: Folder,
+  layers: Layers,
+  image: ImageIcon,
+  calendar: Calendar,
+  users: Users,
+  help: HelpCircle,
+}
+
+export type PostTypeIconName = keyof typeof POST_TYPE_ICONS
+
+export function resolvePostTypeIcon(name: string | null | undefined): LucideIcon {
+  if (!name) return FileText
+  return POST_TYPE_ICONS[name.toLowerCase()] ?? FileText
+}

package/src/layout/Layout.tsx

@@ -102,29 +102,26 @@ function computePageActions({
   config,
   onNavigate,
 }: PageActionsContext): ReactNode | null {
-  // Resolve the "primary" content collection (used for both the dashboard
-  // and any explicit /posts route). Prefer a real `posts` or `post`-type
-  // collection over the hard-coded slug so admin-managed CMS configs work.
   const collections = collectionList(config)
-  const postsCol =
-    collections.find((c) => c.slug === 'posts' || c.type === 'post') ??
-    collections.find((c) => c.type === 'post')
-  const postsSlug = postsCol?.slug ?? 'posts'
-  const postsLabel = postsCol?.labels?.singular ?? 'Post'
+  const postCollections = collections.filter((c) => c.type === 'post')
+  const newPostPath = resolveNewPostPath(postCollections)
   const siteUrl: string | null = config?.site?.url ?? config?.seo?.siteUrl ?? null
 
   const isDashboard = currentPath === '/' || currentPath === '/dashboard'
 
+  // Dashboard: keep the existing "+ New Post" / "View Site" pair. With
+  // a single Post Type we route straight to its editor; with several we
+  // route to the picker so the user can choose the type first.
   if (isDashboard) {
     return (
       <>
         <button
           type="button"
-          onClick={() => onNavigate(`/${postsSlug}/new`)}
+          onClick={() => onNavigate(newPostPath)}
           className="bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 text-sm font-medium shadow-sm transition-colors focus:outline-none focus-visible:ring-2"
         >
           <Plus className="h-3.5 w-3.5" aria-hidden />
-          New {postsLabel}
+          New Post
         </button>
         {siteUrl ? (
           <a
@@ -141,6 +138,52 @@ function computePageActions({
     )
   }
 
+  // Posts area — "+ New Post" + "Manage types" on the list page;
+  // "+ New Post Type" on the types page. The buttons live in the top
+  // bar so the page header stays clean. See the dashboard rule for
+  // why these come from a single config-aware helper.
+  if (currentPath === '/posts') {
+    return (
+      <button
+        type="button"
+        onClick={() => onNavigate(newPostPath)}
+        className="bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 text-sm font-medium shadow-sm transition-colors focus:outline-none focus-visible:ring-2"
+      >
+        <Plus className="h-3.5 w-3.5" aria-hidden />
+        New Post
+      </button>
+    )
+  }
+
+  if (currentPath === '/posts/types') {
+    return (
+      <button
+        type="button"
+        onClick={() => onNavigate('/posts/types/new')}
+        className="bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 text-sm font-medium shadow-sm transition-colors focus:outline-none focus-visible:ring-2"
+      >
+        <Plus className="h-3.5 w-3.5" aria-hidden />
+        New Post Type
+      </button>
+    )
+  }
+
+  // Pages list — "+ New page" routes to the page creation flow. Handled
+  // explicitly (not via the collection loop) so the label/route stay
+  // exact even though `pages` is a reserved route.
+  if (currentPath === '/pages') {
+    return (
+      <button
+        type="button"
+        onClick={() => onNavigate('/pages/new')}
+        className="bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 text-sm font-medium shadow-sm transition-colors focus:outline-none focus-visible:ring-2"
+      >
+        <Plus className="h-3.5 w-3.5" aria-hidden />
+        New page
+      </button>
+    )
+  }
+
   // List views — surface "+ New X" so authors can keep creating without
   // hunting for a per-list button. Skip on editor views; those have their
   // own toolbar.
@@ -169,6 +212,19 @@ interface CollectionMeta {
   admin?: { hidden?: boolean }
 }
 
+/**
+ * Where "+ New Post" should land, given the configured post-type
+ * collections:
+ *   - exactly one  → straight to that type's editor (`/<slug>/new`)
+ *   - more than one → the type picker (`/posts/new`)
+ *   - none          → the Post Type setup instructions
+ */
+function resolveNewPostPath(postCollections: CollectionMeta[]): string {
+  if (postCollections.length === 1) return `/${postCollections[0]!.slug}/new`
+  if (postCollections.length > 1) return '/posts/new'
+  return '/posts/types/new'
+}
+
 function collectionList(config: any): CollectionMeta[] {
   if (!config?.collections) return []
   const raw = config.collections

package/src/layout/Sidebar.tsx

@@ -19,9 +19,12 @@ import {
   PanelTop,
   PanelBottom,
   Layers,
+  LayoutGrid,
   Code2,
   Library,
   KeyRound,
+  ListTree,
+  Menu as MenuIcon,
   PanelLeftClose,
   PanelLeftOpen,
 } from 'lucide-react'
@@ -61,6 +64,9 @@ const ICON_MAP: Record<string, LucideIcon> = {
   book: BookOpen,
   help: HelpCircle,
   newspaper: Newspaper,
+  navigation: ListTree,
+  menu: MenuIcon,
+  'list-tree': ListTree,
   PanelTop: PanelTop,
   PanelBottom: PanelBottom,
   Layers: Layers,
@@ -106,24 +112,45 @@ function BrandLogo({ config, collapsed }: { config?: any; collapsed: boolean })
 }
 
 /**
- * Nav tree for the default (config-less) install. Mirrors the reference
- * dashboard exactly: Dashboard / Posts / Pages (with Saved Sections +
- * Templates as nested children), then a CONTENT group (Media / Forms /
- * SEO / Script Tags), then a SETTINGS group (Users / API Keys /
- * Settings). The group ordering is meaningful — the renderer emits a
- * section header the first time it sees a new group.
+ * 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 },
+]
+
+/**
+ * Children of the Templates parent. Templates is its own top-level item
+ * (page building tools) — Saved Sections are reusable content blocks and
+ * Widgets are embeddable components. These are deliberately NOT children
+ * of Pages: Pages is content, Templates/Sections/Widgets are structure.
+ */
+const TEMPLATES_CHILDREN: NavItem[] = [
+  { path: '/saved-sections', label: 'Saved Sections', icon: Library },
+  { path: '/widgets', label: 'Widgets', icon: LayoutGrid },
+]
+
+/**
+ * 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) and Templates (with Saved Sections
+ * + Widgets), followed by Media / Forms / SEO / Script Tags, then a
+ * SETTINGS group (Users / API Keys / Settings). The group ordering is
+ * meaningful — the renderer emits a section header the first time it
+ * sees a new group, so "CONTENT" renders once, above Pages.
  */
 const defaultNavItems: NavItem[] = [
   { path: '/', label: 'Dashboard', icon: LayoutDashboard },
-  { path: '/posts', label: 'Posts', icon: FileText },
+  { path: '/pages', label: 'Pages', icon: File, group: 'Content' },
+  { path: '/posts', label: 'Posts', icon: FileText, group: 'Content', children: POSTS_CHILDREN },
   {
-    path: '/pages',
-    label: 'Pages',
-    icon: File,
-    children: [
-      { path: '/saved-sections', label: 'Saved Sections', icon: Library },
-      { path: '/page-templates', label: 'Templates', icon: Layers },
-    ],
+    path: '/page-templates',
+    label: 'Templates',
+    icon: Layers,
+    group: 'Content',
+    children: TEMPLATES_CHILDREN,
   },
   { path: '/media', label: 'Media', icon: Image, group: 'Content' },
   { path: '/forms', label: 'Forms', icon: ClipboardList, group: 'Content' },
@@ -207,6 +234,15 @@ interface NavRenderContext {
 
 function isPathActive(currentPath: string, itemPath: string): boolean {
   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'
+  }
+
   // Use boundary match so /pages doesn't match /pages-something. Exact, or
   // followed by a `/` separator.
   return currentPath === itemPath || currentPath.startsWith(itemPath + '/')
@@ -236,10 +272,16 @@ function renderNavTree(items: NavItem[], ctx: NavRenderContext): ReactNode {
       lastGroup = undefined
     }
 
-    nodes.push(<NavLink key={item.path} item={item} ctx={ctx} />)
+    // 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} />)
     if (item.children && item.children.length > 0 && !ctx.collapsed) {
       for (const child of item.children) {
-        nodes.push(<NavLink key={child.path} item={child} ctx={ctx} nested />)
+        nodes.push(
+          <NavLink key={`child:${item.path}:${child.path}`} item={child} ctx={ctx} nested />,
+        )
       }
     }
   }
@@ -315,24 +357,32 @@ export interface NavItem {
  * destination (Media, Forms, SEO, Script Tags, Users, API Keys,
  * Settings) is anchored under the right Content / Settings group.
  */
-function buildNavItems(config: any): NavItem[] {
+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' && !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,
   )
-  const grouped = visible.filter((c) => 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 }]
 
-  // Posts-style collections come first (mirrors the reference layout).
-  for (const collection of posts) {
+  // 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}`,
@@ -340,37 +390,59 @@ function buildNavItems(config: any): NavItem[] {
     })
   }
 
-  // Pages-style collections get the nested Saved Sections + Templates
-  // tree. We attach the children to the *first* page-type collection
-  // so we don't end up with three "Saved Sections" links if a project
-  // configures multiple page collections — admins editing custom
-  // page-style content still navigate to those secondary surfaces via
-  // the primary Pages parent.
-  pages.forEach((collection, idx) => {
-    const item: NavItem = {
+  // 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). Saved Sections / Widgets now live under the dedicated
+  // Templates parent below, not under Pages.
+  pages.forEach((collection) => {
+    items.push({
       label: collection.labels?.plural ?? collection.slug,
       path: `/${collection.slug}`,
       icon: resolveIcon(collection),
-    }
-    if (idx === 0) {
-      item.children = [
-        { path: '/saved-sections', label: 'Saved Sections', icon: Library },
-        { path: '/page-templates', label: 'Templates', icon: Layers },
-      ]
-    }
-    items.push(item)
+      group: 'Content',
+    })
   })
 
-  for (const collection of otherUngrouped) {
+  // 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({
-      label: collection.labels?.plural ?? collection.slug,
-      path: `/${collection.slug}`,
-      icon: resolveIcon(collection),
+      path: '/posts',
+      label: 'Posts',
+      icon: FileText,
+      group: 'Content',
+      children: POSTS_CHILDREN,
     })
   }
 
-  // Config-supplied groups land before our standard Content/Settings
-  // groups so admin-defined sections take precedence.
+  // Templates — its own parent holding Saved Sections + Widgets (page
+  // building structure, distinct from Pages content).
+  items.push({
+    path: '/page-templates',
+    label: 'Templates',
+    icon: Layers,
+    group: 'Content',
+    children: TEMPLATES_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' },
+  )
+
+  // Config-supplied custom groups land after the standard Content block
+  // and before Settings. Each renders under its own header.
   const groupBuckets = new Map<string, NavItem[]>()
   for (const col of grouped) {
     const group = col.admin.group as string
@@ -385,14 +457,8 @@ function buildNavItems(config: any): NavItem[] {
   }
   for (const bucket of groupBuckets.values()) items.push(...bucket)
 
-  // Standard Content + Settings destinations. These are always
-  // present, regardless of which collections the admin configures,
-  // because they map to CMS features (not collections).
+  // Settings destinations — always last.
   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: '/users', label: 'Users', icon: Users, group: 'Settings' },
     { path: '/api-keys', label: 'API Keys', icon: KeyRound, group: 'Settings' },
     { path: '/settings', label: 'Settings', icon: Settings, group: 'Settings' },