@actuate-media/cms-admin 0.15.0 → 0.16.0

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' },

package/src/lib/page-editor-service.ts

@@ -0,0 +1,233 @@
+/**
+ * Page Editor service — data layer for the flat, section-based page
+ * editor (`/pages/:id/edit`).
+ *
+ * A page is a document in the `pages` collection. The editor reads and
+ * writes a single JSON field, `data.sections`, holding an ordered list of
+ * `PageSection`s. Save draft = `PUT` the sections (+ title/slug/SEO) with
+ * no status change; publish = the same payload plus `status: 'PUBLISHED'`.
+ *
+ * Persistence reuses the existing collection document API, so there is no
+ * new endpoint and no Prisma migration — `sections` is declared as a
+ * `type: 'json'` field on the `pages` collection so the field-access layer
+ * doesn't strip it on write.
+ *
+ * The section mutation helpers (`addSection`, `moveSection`, …) are pure
+ * functions over `PageSection[]` so the editor state and the unit tests
+ * share one implementation.
+ */
+import { cmsApi } from './api.js'
+import {
+  getSectionType,
+  createSection,
+  addSection,
+  removeSection,
+  duplicateSection,
+  toggleSectionVisibility,
+  moveSection,
+  reorderSections,
+  updateSectionContent,
+  updateSectionSettings,
+  updateSectionMeta,
+  coerceSections as coerceSectionsCore,
+  validateSectionContent,
+  type PageSection,
+} from '@actuate-media/cms-core/page-sections'
+
+export type { PageSection } from '@actuate-media/cms-core/page-sections'
+
+// Re-export the pure section helpers so existing editor imports
+// (`../../lib/page-editor-service.js`) keep working after the move to core.
+export {
+  createSection,
+  addSection,
+  removeSection,
+  duplicateSection,
+  toggleSectionVisibility,
+  moveSection,
+  reorderSections,
+  updateSectionContent,
+  updateSectionSettings,
+  updateSectionMeta,
+}
+
+export type PageStatus = 'DRAFT' | 'PUBLISHED' | 'SCHEDULED' | 'ARCHIVED'
+
+export const PAGES_COLLECTION = 'pages'
+
+export interface EditorPage {
+  id: string | null
+  title: string
+  slug: string
+  path: string
+  status: PageStatus
+  sections: PageSection[]
+  seoTitle: string
+  seoDescription: string
+  publishedAt: string | null
+  updatedAt: string | null
+}
+
+export interface ValidationResult {
+  /** blocking issues — publish is disabled while any exist */
+  errors: string[]
+  /** non-blocking advisories (e.g. SEO) */
+  warnings: string[]
+}
+
+// ─── Validation ──────────────────────────────────────────────────────
+
+function isBlank(v: unknown): boolean {
+  return v === undefined || v === null || (typeof v === 'string' && v.trim() === '')
+}
+
+/**
+ * Validate a page for save/publish. `forPublish` turns on the stricter
+ * rules (at least one visible section, required section fields, valid
+ * button URLs, image alt text). SEO gaps are surfaced as warnings.
+ *
+ * Per-section rules are delegated to the shared `validateSectionContent`
+ * in `@actuate-media/cms-core/page-sections`, so the editor and the
+ * server/MCP enforce identical content rules. Page-level rules
+ * (title/path, "at least one visible section", SEO) stay here because
+ * they operate on the whole `EditorPage`.
+ */
+export function validatePage(page: EditorPage, forPublish = false): ValidationResult {
+  const errors: string[] = []
+  const warnings: string[] = []
+
+  if (isBlank(page.title)) errors.push('Page title is required.')
+  if (isBlank(page.path)) errors.push('Page path is required.')
+
+  if (forPublish) {
+    const visible = page.sections.filter((s) => s.visible)
+    if (visible.length === 0) {
+      errors.push('Add at least one visible section before publishing.')
+    }
+
+    for (const section of visible) {
+      const def = getSectionType(section.sectionType)
+      const label = section.name || def?.name || 'Section'
+      const result = validateSectionContent(section.sectionType, section.content, section.settings)
+      for (const issue of result.errors) {
+        errors.push(`${label}: ${issue.message}`)
+      }
+    }
+
+    if (isBlank(page.seoTitle)) warnings.push('Add an SEO title to improve search results.')
+    if (isBlank(page.seoDescription)) {
+      warnings.push('Add an SEO description to improve search results.')
+    }
+  }
+
+  return { errors, warnings }
+}
+
+// ─── API row mapping ─────────────────────────────────────────────────
+
+interface DocumentApiRow {
+  id: string
+  title: string | null
+  slug: string | null
+  status: PageStatus
+  publishedAt: string | null
+  updatedAt: string | null
+  data: Record<string, unknown> | null
+}
+
+function rowToEditorPage(doc: DocumentApiRow): EditorPage {
+  const data = doc.data ?? {}
+  const slug = doc.slug ?? ''
+  return {
+    id: doc.id,
+    title: doc.title ?? '',
+    slug,
+    path: typeof data.path === 'string' && data.path ? data.path : slug ? `/${slug}` : '/',
+    status: doc.status ?? 'DRAFT',
+    sections: coerceSectionsCore(data.sections),
+    seoTitle: typeof data.metaTitle === 'string' ? data.metaTitle : '',
+    seoDescription: typeof data.metaDescription === 'string' ? data.metaDescription : '',
+    publishedAt: doc.publishedAt ?? null,
+    updatedAt: doc.updatedAt ?? null,
+  }
+}
+
+// ─── API calls ───────────────────────────────────────────────────────
+
+export async function fetchPageForEditor(pageId: string): Promise<EditorPage> {
+  const res = await cmsApi<DocumentApiRow>(`/collections/${PAGES_COLLECTION}/${pageId}`)
+  if (res.error || !res.data) throw new Error(res.error ?? 'Failed to load page')
+  return rowToEditorPage(res.data)
+}
+
+interface PageWritePayload {
+  title: string
+  slug: string
+  path: string
+  sections: PageSection[]
+  metaTitle: string
+  metaDescription: string
+}
+
+function toWriteBody(page: EditorPage, extra?: Record<string, unknown>): string {
+  const payload: PageWritePayload & Record<string, unknown> = {
+    title: page.title,
+    slug: page.slug,
+    path: page.path,
+    sections: page.sections,
+    metaTitle: page.seoTitle,
+    metaDescription: page.seoDescription,
+    ...extra,
+  }
+  return JSON.stringify(payload)
+}
+
+/** Create a new page document, returning the new id. */
+export async function createPage(page: EditorPage): Promise<EditorPage> {
+  const res = await cmsApi<DocumentApiRow>(`/collections/${PAGES_COLLECTION}`, {
+    method: 'POST',
+    body: toWriteBody(page),
+  })
+  if (res.error || !res.data) throw new Error(res.error ?? 'Failed to create page')
+  return rowToEditorPage(res.data)
+}
+
+/** Save the current draft (no status change). */
+export async function savePageDraft(page: EditorPage): Promise<EditorPage> {
+  if (!page.id) return createPage(page)
+  const res = await cmsApi<DocumentApiRow>(`/collections/${PAGES_COLLECTION}/${page.id}`, {
+    method: 'PUT',
+    body: toWriteBody(page),
+  })
+  if (res.error || !res.data) throw new Error(res.error ?? 'Failed to save draft')
+  return rowToEditorPage(res.data)
+}
+
+/** Publish: persist the latest content and flip status to PUBLISHED. */
+export async function publishPage(page: EditorPage): Promise<EditorPage> {
+  const endpoint = page.id
+    ? `/collections/${PAGES_COLLECTION}/${page.id}`
+    : `/collections/${PAGES_COLLECTION}`
+  const res = await cmsApi<DocumentApiRow>(endpoint, {
+    method: page.id ? 'PUT' : 'POST',
+    body: toWriteBody(page, { status: 'PUBLISHED' }),
+  })
+  if (res.error || !res.data) throw new Error(res.error ?? 'Failed to publish page')
+  return rowToEditorPage(res.data)
+}
+
+/** A blank page scaffold for `/pages/new`. */
+export function emptyPage(): EditorPage {
+  return {
+    id: null,
+    title: '',
+    slug: '',
+    path: '',
+    status: 'DRAFT',
+    sections: [],
+    seoTitle: '',
+    seoDescription: '',
+    publishedAt: null,
+    updatedAt: null,
+  }
+}