@actuate-media/cms-admin 0.66.0 → 0.67.0

package/src/components/ui/InspectorPane.tsx

@@ -0,0 +1,129 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import { X } from 'lucide-react'
+
+/**
+ * Design-system inline split-pane pattern: a list that shrinks while a
+ * fixed-width editor/detail pane slides in beside it (Script Tags 420px,
+ * Entries 400px, Forms 390px, SEO Content 380px in the handoff).
+ *
+ * Compose as:
+ *
+ *   <SplitPaneLayout>
+ *     <SplitPaneList>…table…</SplitPaneList>
+ *     <InspectorPane open={!!selected} width={420} aria-label="Edit script">
+ *       <InspectorPaneHeader onClose={close}>…</InspectorPaneHeader>
+ *       <InspectorPaneBody>…sections…</InspectorPaneBody>
+ *       <InspectorPaneFooter>…save…</InspectorPaneFooter>
+ *     </InspectorPane>
+ *   </SplitPaneLayout>
+ */
+export function SplitPaneLayout({
+  children,
+  className,
+}: {
+  children: ReactNode
+  className?: string
+}) {
+  return <div className={`flex min-h-0 flex-1 overflow-hidden ${className ?? ''}`}>{children}</div>
+}
+
+export function SplitPaneList({
+  children,
+  className,
+}: {
+  children: ReactNode
+  className?: string
+}) {
+  return <div className={`min-w-0 flex-1 overflow-y-auto ${className ?? ''}`}>{children}</div>
+}
+
+export interface InspectorPaneProps {
+  open: boolean
+  /** Outer shell width in px when open (inner card fills it minus 12px gutters). */
+  width: number
+  children: ReactNode
+  'aria-label': string
+}
+
+export function InspectorPane({
+  open,
+  width,
+  children,
+  'aria-label': ariaLabel,
+}: InspectorPaneProps) {
+  return (
+    <div
+      className="shrink-0 overflow-hidden bg-[var(--bg)] motion-safe:transition-[width] motion-safe:duration-200"
+      style={{ width: open ? width : 0 }}
+      aria-hidden={!open}
+    >
+      <div
+        role="region"
+        aria-label={ariaLabel}
+        className="my-3 mr-3 ml-4 flex h-[calc(100%-24px)] flex-col overflow-hidden rounded-[var(--r)] border border-[var(--bdr)] bg-[var(--sb)] shadow-[var(--shd2)]"
+        style={{ width: width - 28 }}
+      >
+        {open ? children : null}
+      </div>
+    </div>
+  )
+}
+
+export function InspectorPaneHeader({
+  children,
+  onClose,
+  closeLabel = 'Close panel',
+}: {
+  children: ReactNode
+  onClose: () => void
+  closeLabel?: string
+}) {
+  return (
+    <div className="flex items-start gap-2 border-b border-[var(--bdr)] px-4 py-3.5">
+      <div className="min-w-0 flex-1">{children}</div>
+      <button
+        type="button"
+        onClick={onClose}
+        aria-label={closeLabel}
+        className="flex h-7 w-7 shrink-0 items-center justify-center rounded-[6px] text-[var(--muted)] transition-colors duration-[var(--motion-fast)] hover:bg-[var(--bg)] hover:text-[var(--txt)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
+      >
+        <X size={16} />
+      </button>
+    </div>
+  )
+}
+
+export function InspectorPaneBody({ children }: { children: ReactNode }) {
+  return <div className="min-h-0 flex-1 overflow-y-auto">{children}</div>
+}
+
+/** Bordered section with the design's uppercase 10.5px section title. */
+export function InspectorPaneSection({
+  title,
+  subtitle,
+  children,
+}: {
+  title?: string
+  subtitle?: string
+  children: ReactNode
+}) {
+  return (
+    <div className="border-b border-[var(--bdr)] px-4 py-3.5 last:border-b-0">
+      {title && (
+        <div className="mb-2.5 flex items-baseline gap-2">
+          <span className="text-[10.5px] font-semibold tracking-[0.6px] text-[var(--muted)] uppercase">
+            {title}
+          </span>
+          {subtitle && <span className="text-[11px] text-[var(--muted)]">{subtitle}</span>}
+        </div>
+      )}
+      {children}
+    </div>
+  )
+}
+
+export function InspectorPaneFooter({ children }: { children: ReactNode }) {
+  return <div className="border-t border-[var(--bdr)] px-4 py-3.5">{children}</div>
+}

package/src/components/ui/index.ts

@@ -44,6 +44,16 @@ export { StatPill } from './StatPill.js'
 export type { StatPillProps } from './StatPill.js'
 export { RowActions, RowActionButton } from './RowActions.js'
 export type { RowActionButtonProps } from './RowActions.js'
+export {
+  SplitPaneLayout,
+  SplitPaneList,
+  InspectorPane,
+  InspectorPaneHeader,
+  InspectorPaneBody,
+  InspectorPaneSection,
+  InspectorPaneFooter,
+} from './InspectorPane.js'
+export type { InspectorPaneProps } from './InspectorPane.js'
 export { formControlBase, formControlState } from './form-control.js'
 export { CommandPalette } from './CommandPalette.js'
 export type { CommandPaletteProps } from './CommandPalette.js'

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

@@ -64,6 +64,12 @@ export interface EditorPage {
   slug: string
   path: string
   status: PageStatus
+  /**
+   * Parent page for the tree hierarchy (`data.parentPageId`), or null for
+   * a top-level page. Preselected when arriving via "Add sub-page"
+   * (`/pages/new?parent=<id>`); editable in Page settings.
+   */
+  parentPageId: string | null
   sections: PageSection[]
   seoTitle: string
   seoDescription: string
@@ -192,6 +198,8 @@ function rowToEditorPage(doc: DocumentApiRow): EditorPage {
     slug,
     path: typeof data.path === 'string' && data.path ? data.path : slug ? `/${slug}` : '/',
     status: doc.status ?? 'DRAFT',
+    parentPageId:
+      typeof data.parentPageId === 'string' && data.parentPageId ? data.parentPageId : null,
     // Preserve unknown (externally-managed) sections so the editor can show
     // them read-only and round-trip them on save instead of dropping them.
     sections: coerceSectionsCore(data.sections, { onUnknown: 'preserve' }),
@@ -215,6 +223,7 @@ interface PageWritePayload {
   title: string
   slug: string
   path: string
+  parentPageId: string | null
   sections: PageSection[]
   metaTitle: string
   metaDescription: string
@@ -230,6 +239,7 @@ function toWriteBody(page: EditorPage, extra?: Record<string, unknown>): string
     title: page.title,
     slug: page.slug,
     path: page.path,
+    parentPageId: page.parentPageId,
     // Unmanaged sections are part of `page.sections`, so they round-trip on
     // every save (no data loss). Strip the derived `unmanaged` marker — it is
     // recomputed from the registry on read, so persisting it would only stale.
@@ -275,14 +285,18 @@ export async function publishPage(page: EditorPage): Promise<EditorPage> {
   return rowToEditorPage(res.data)
 }
 
-/** A blank page scaffold for `/pages/new`. */
-export function emptyPage(): EditorPage {
+/**
+ * A blank page scaffold for `/pages/new`. `parentPageId` is preset when
+ * the flow was entered via "Add sub-page" in the Pages tree view.
+ */
+export function emptyPage(parentPageId: string | null = null): EditorPage {
   return {
     id: null,
     title: '',
     slug: '',
     path: '',
     status: 'DRAFT',
+    parentPageId,
     sections: [],
     seoTitle: '',
     seoDescription: '',

package/src/lib/pages-tree.ts

@@ -0,0 +1,145 @@
+/**
+ * Page hierarchy resolution for the Pages tree view.
+ *
+ * Parent resolution strategy (in priority order):
+ *   1. `parentPageId` — explicit link, used when it points at a page that
+ *      exists in the set (and isn't the page itself).
+ *   2. Path-prefix derivation — for rows without a usable `parentPageId`,
+ *      the longest existing path prefix wins: "/about/team" becomes a child
+ *      of the page whose path is "/about". Missing intermediate levels are
+ *      skipped ("/a/b/c" with no "/a/b" attaches to "/a"). The root path
+ *      "/" is never treated as a prefix parent, so top-level pages stay
+ *      siblings of the homepage.
+ *
+ * Safety guarantees:
+ *   - Orphans (parent id not in the set) become roots.
+ *   - Cycles (a → b → a) are broken deterministically: walking up from each
+ *     page in input order, the edge that closes a cycle is severed and that
+ *     page becomes a root. Every page appears in the tree exactly once.
+ *   - Sibling ordering is stable: title (locale-aware), then path.
+ *
+ * Pure functions — no network, no React — so the view and the unit tests
+ * share one implementation.
+ */
+import type { Page } from './pages-service.js'
+
+export interface PageTreeNode {
+  page: Page
+  children: PageTreeNode[]
+}
+
+/** One visible row of the flattened tree table. */
+export interface PageTreeRow {
+  page: Page
+  depth: number
+  hasChildren: boolean
+}
+
+function normalizePath(path: string): string {
+  let p = path.trim()
+  if (!p.startsWith('/')) p = `/${p}`
+  p = p.replace(/\/{2,}/g, '/')
+  if (p.length > 1) p = p.replace(/\/+$/, '')
+  return p
+}
+
+/**
+ * Longest existing path-prefix parent, or null. Only prefixes with at
+ * least one segment count — "/" (the homepage) is never a derived parent.
+ */
+function derivePathParent(page: Page, idByPath: Map<string, string>): string | null {
+  const segments = normalizePath(page.path).split('/').filter(Boolean)
+  for (let i = segments.length - 1; i >= 1; i--) {
+    const prefix = `/${segments.slice(0, i).join('/')}`
+    const candidate = idByPath.get(prefix)
+    if (candidate !== undefined && candidate !== page.id) return candidate
+  }
+  return null
+}
+
+function compareSiblings(a: PageTreeNode, b: PageTreeNode): number {
+  return (
+    a.page.title.localeCompare(b.page.title) ||
+    a.page.path.localeCompare(b.page.path) ||
+    a.page.id.localeCompare(b.page.id)
+  )
+}
+
+/** Build the parent/child hierarchy for the tree view. Returns root nodes. */
+export function buildPageTree(pages: Page[]): PageTreeNode[] {
+  const byId = new Map<string, Page>()
+  for (const p of pages) byId.set(p.id, p)
+
+  // First occurrence wins on duplicate paths, keeping resolution stable
+  // with respect to input order.
+  const idByPath = new Map<string, string>()
+  for (const p of pages) {
+    const norm = normalizePath(p.path)
+    if (!idByPath.has(norm)) idByPath.set(norm, p.id)
+  }
+
+  const parentOf = new Map<string, string | null>()
+  for (const p of pages) {
+    const explicit =
+      p.parentPageId && p.parentPageId !== p.id && byId.has(p.parentPageId) ? p.parentPageId : null
+    parentOf.set(p.id, explicit ?? derivePathParent(p, idByPath))
+  }
+
+  // Cycle guard: walk each page's ancestor chain; the edge that revisits a
+  // seen node is severed, rooting that page. Deterministic in input order.
+  for (const p of pages) {
+    const seen = new Set<string>([p.id])
+    let cur = p.id
+    for (;;) {
+      const parent = parentOf.get(cur) ?? null
+      if (parent === null) break
+      if (seen.has(parent)) {
+        parentOf.set(cur, null)
+        break
+      }
+      seen.add(parent)
+      cur = parent
+    }
+  }
+
+  const nodeById = new Map<string, PageTreeNode>()
+  for (const p of pages) nodeById.set(p.id, { page: p, children: [] })
+
+  const roots: PageTreeNode[] = []
+  for (const p of pages) {
+    const node = nodeById.get(p.id)!
+    const parentId = parentOf.get(p.id) ?? null
+    const parentNode = parentId !== null ? nodeById.get(parentId) : undefined
+    if (parentNode) parentNode.children.push(node)
+    else roots.push(node)
+  }
+
+  const sortRecursive = (nodes: PageTreeNode[]) => {
+    nodes.sort(compareSiblings)
+    for (const n of nodes) sortRecursive(n.children)
+  }
+  sortRecursive(roots)
+  return roots
+}
+
+/**
+ * Flatten the tree into visible rows: children render only when their
+ * parent's id is in `expanded`.
+ */
+export function flattenPageTree(nodes: PageTreeNode[], expanded: Set<string>): PageTreeRow[] {
+  const rows: PageTreeRow[] = []
+  const walk = (list: PageTreeNode[], depth: number) => {
+    for (const node of list) {
+      const hasChildren = node.children.length > 0
+      rows.push({ page: node.page, depth, hasChildren })
+      if (hasChildren && expanded.has(node.page.id)) walk(node.children, depth + 1)
+    }
+  }
+  walk(nodes, 0)
+  return rows
+}
+
+/** Default expand state: every root node that has children starts open. */
+export function defaultExpandedIds(roots: PageTreeNode[]): Set<string> {
+  return new Set(roots.filter((n) => n.children.length > 0).map((n) => n.page.id))
+}