@actuate-media/cms-admin 0.69.0 → 0.70.0

package/src/views/Pages/PagesTreeTable.tsx

@@ -1,9 +1,23 @@
 'use client'
 
-import { ChevronDown, Copy, PenLine, Plus, Trash2 } from 'lucide-react'
+import { useState } from 'react'
+import {
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  pointerWithin,
+  useDraggable,
+  useDroppable,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type DragStartEvent,
+} from '@dnd-kit/core'
+import { ChevronDown, Copy, GripVertical, PenLine, Plus, Trash2 } from 'lucide-react'
 import type { Page } from '../../lib/pages-service.js'
 import type { PageTreeRow } from '../../lib/pages-tree.js'
 import { PostStatusBadge, SeoScoreIndicator } from '../../components/posts/badges.js'
+import { Button } from '../../components/ui/Button.js'
 import { RowActionButton, RowActions } from '../../components/ui/RowActions.js'
 
 /**
@@ -16,6 +30,12 @@ import { RowActionButton, RowActions } from '../../components/ui/RowActions.js'
  * renders at depth 0 and expand state is ignored — the caller passes
  * pre-flattened rows, this component just skips the leaf spacers' tree
  * semantics.
+ *
+ * Drag-reparent: rows can be dragged (grip handle) and dropped onto
+ * another row to become its child. There is intentionally no "drop to
+ * make top-level" zone — with `parentPageId` cleared, the tree falls back
+ * to path-prefix derivation, which would silently re-nest most pages, so
+ * un-nesting stays an editor operation. Disabled while flattened.
  */
 
 interface PagesTreeTableProps {
@@ -33,6 +53,10 @@ interface PagesTreeTableProps {
   onAddSubPage: (page: Page) => void
   onDuplicate: (page: Page) => void
   onDelete: (page: Page) => void
+  /** Drop handler: `source` becomes a child of `targetParent`. */
+  onReparent: (sourceId: string, targetParentId: string) => void
+  /** Validity gate for a drop (cycle/self/no-op checks live in the caller). */
+  canReparent: (sourceId: string, targetParentId: string) => boolean
   onRetry: () => void
   onClearFilters: () => void
   onNewPage: () => void
@@ -55,122 +79,157 @@ export function PagesTreeTable({
   onAddSubPage,
   onDuplicate,
   onDelete,
+  onReparent,
+  canReparent,
   onRetry,
   onClearFilters,
   onNewPage,
 }: PagesTreeTableProps) {
   const allSelected = rows.length > 0 && rows.every((r) => selected.has(r.page.id))
+  const [draggingId, setDraggingId] = useState<string | null>(null)
+
+  // A small activation distance keeps plain clicks (title, checkbox,
+  // chevron) from starting a drag.
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
+    useSensor(KeyboardSensor),
+  )
+
+  const handleDragStart = (event: DragStartEvent) => {
+    setDraggingId(String(event.active.id))
+  }
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    setDraggingId(null)
+    const sourceId = String(event.active.id)
+    const targetId = event.over ? String(event.over.id) : null
+    if (!targetId || targetId === sourceId) return
+    if (!canReparent(sourceId, targetId)) return
+    onReparent(sourceId, targetId)
+  }
 
   return (
-    <div className="overflow-x-auto">
-      <table className="w-full min-w-[800px]" role="table" aria-label="Pages tree">
-        <colgroup>
-          <col style={{ width: '40px' }} />
-          <col />
-          <col style={{ width: '130px' }} />
-          <col style={{ width: '150px' }} />
-          <col style={{ width: '120px' }} />
-          <col style={{ width: '115px' }} />
-          <col style={{ width: '70px' }} />
-          <col style={{ width: '170px' }} />
-        </colgroup>
-        <thead className="border-b border-[var(--bdr)]">
-          <tr>
-            <th scope="col" className="px-3 py-2.5 text-left">
-              <input
-                type="checkbox"
-                aria-label="Select all visible pages"
-                checked={allSelected}
-                onChange={(e) => onToggleAll(e.target.checked)}
-                className="border-border accent-primary rounded"
-              />
-            </th>
-            <th scope="col" className={`${TH_CLASS} min-w-[280px]`}>
-              Title
-            </th>
-            <th scope="col" className={TH_CLASS}>
-              Template
-            </th>
-            <th scope="col" className={TH_CLASS}>
-              Author
-            </th>
-            <th scope="col" className={TH_CLASS}>
-              Status
-            </th>
-            <th scope="col" className={TH_CLASS}>
-              Last Modified
-            </th>
-            <th scope="col" className={TH_CLASS}>
-              SEO
-            </th>
-            <th scope="col" className="px-3 py-2.5 text-right">
-              <span className="sr-only">Actions</span>
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          {loading && rows.length === 0 && <TreeLoadingRows />}
-          {!loading && error && (
-            <tr>
-              <td colSpan={8} className="px-3 py-12 text-center">
-                <div className="text-foreground mb-2 text-sm font-medium">{error}</div>
-                <button onClick={onRetry} className="text-primary text-sm hover:underline">
-                  Try again
-                </button>
-              </td>
-            </tr>
-          )}
-          {!loading && !error && rows.length === 0 && (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={pointerWithin}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+      onDragCancel={() => setDraggingId(null)}
+    >
+      <div className="overflow-x-auto">
+        <table className="w-full min-w-[800px]" role="table" aria-label="Pages tree">
+          <colgroup>
+            <col style={{ width: '40px' }} />
+            <col />
+            <col style={{ width: '130px' }} />
+            <col style={{ width: '150px' }} />
+            <col style={{ width: '120px' }} />
+            <col style={{ width: '115px' }} />
+            <col style={{ width: '70px' }} />
+            <col style={{ width: '170px' }} />
+          </colgroup>
+          <thead className="border-b border-[var(--bdr)]">
             <tr>
-              <td colSpan={8} className="px-3 py-16 text-center">
-                <div className="text-foreground mb-2 text-sm font-medium">
-                  {flattened ? 'No pages match your filters' : 'No pages yet'}
-                </div>
-                <div className="text-muted-foreground mb-4 text-sm">
-                  {flattened
-                    ? 'Try clearing the search or status filter above.'
-                    : 'Create your first page to get started.'}
-                </div>
-                {flattened ? (
-                  <button
-                    type="button"
-                    onClick={onClearFilters}
-                    className="text-primary text-sm hover:underline"
-                  >
-                    Clear filters
-                  </button>
-                ) : (
-                  <button
-                    type="button"
-                    onClick={onNewPage}
-                    className="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 text-sm font-medium shadow-sm transition-colors"
-                  >
-                    <Plus className="h-3.5 w-3.5" aria-hidden />
-                    New page
-                  </button>
-                )}
-              </td>
+              <th scope="col" className="px-3 py-2.5 text-left">
+                <input
+                  type="checkbox"
+                  aria-label="Select all visible pages"
+                  checked={allSelected}
+                  onChange={(e) => onToggleAll(e.target.checked)}
+                  className="accent-primary rounded border-[var(--bdr)]"
+                />
+              </th>
+              <th scope="col" className={`${TH_CLASS} min-w-[280px]`}>
+                Title
+              </th>
+              <th scope="col" className={TH_CLASS}>
+                Template
+              </th>
+              <th scope="col" className={TH_CLASS}>
+                Author
+              </th>
+              <th scope="col" className={TH_CLASS}>
+                Status
+              </th>
+              <th scope="col" className={TH_CLASS}>
+                Last Modified
+              </th>
+              <th scope="col" className={TH_CLASS}>
+                SEO
+              </th>
+              <th scope="col" className="px-3 py-2.5 text-right">
+                <span className="sr-only">Actions</span>
+              </th>
             </tr>
-          )}
-          {!loading &&
-            !error &&
-            rows.map((row) => (
-              <TreeRow
-                key={row.page.id}
-                row={row}
-                isSelected={selected.has(row.page.id)}
-                isExpanded={expanded.has(row.page.id)}
-                onToggleExpand={() => onToggleExpand(row.page.id)}
-                onToggleSelect={() => onToggleSelect(row.page.id)}
-                onOpen={() => onOpen(row.page)}
-                onAddSubPage={() => onAddSubPage(row.page)}
-                onDuplicate={() => onDuplicate(row.page)}
-                onDelete={() => onDelete(row.page)}
-              />
-            ))}
-        </tbody>
-      </table>
-    </div>
+          </thead>
+          <tbody>
+            {loading && rows.length === 0 && <TreeLoadingRows />}
+            {!loading && error && (
+              <tr>
+                <td colSpan={8} className="px-3 py-12 text-center">
+                  <div className="mb-2 text-sm font-medium text-[var(--txt)]">{error}</div>
+                  <Button variant="link" size="md" onClick={onRetry}>
+                    Try again
+                  </Button>
+                </td>
+              </tr>
+            )}
+            {!loading && !error && rows.length === 0 && (
+              <tr>
+                <td colSpan={8} className="px-3 py-16 text-center">
+                  <div className="mb-2 text-sm font-medium text-[var(--txt)]">
+                    {flattened ? 'No pages match your filters' : 'No pages yet'}
+                  </div>
+                  <div className="mb-4 text-sm text-[var(--sub)]">
+                    {flattened
+                      ? 'Try clearing the search or status filter above.'
+                      : 'Create your first page to get started.'}
+                  </div>
+                  {flattened ? (
+                    <Button type="button" variant="link" size="md" onClick={onClearFilters}>
+                      Clear filters
+                    </Button>
+                  ) : (
+                    <Button
+                      type="button"
+                      variant="primary"
+                      size="sm"
+                      className="shadow-sm"
+                      onClick={onNewPage}
+                      leftIcon={<Plus size={16} aria-hidden />}
+                    >
+                      New page
+                    </Button>
+                  )}
+                </td>
+              </tr>
+            )}
+            {!loading &&
+              !error &&
+              rows.map((row) => (
+                <TreeRow
+                  key={row.page.id}
+                  row={row}
+                  isSelected={selected.has(row.page.id)}
+                  isExpanded={expanded.has(row.page.id)}
+                  draggable={!flattened}
+                  isDropTarget={
+                    draggingId !== null &&
+                    draggingId !== row.page.id &&
+                    canReparent(draggingId, row.page.id)
+                  }
+                  onToggleExpand={() => onToggleExpand(row.page.id)}
+                  onToggleSelect={() => onToggleSelect(row.page.id)}
+                  onOpen={() => onOpen(row.page)}
+                  onAddSubPage={() => onAddSubPage(row.page)}
+                  onDuplicate={() => onDuplicate(row.page)}
+                  onDelete={() => onDelete(row.page)}
+                />
+              ))}
+          </tbody>
+        </table>
+      </div>
+    </DndContext>
   )
 }
 
@@ -178,6 +237,8 @@ function TreeRow({
   row,
   isSelected,
   isExpanded,
+  draggable,
+  isDropTarget,
   onToggleExpand,
   onToggleSelect,
   onOpen,
@@ -188,6 +249,9 @@ function TreeRow({
   row: PageTreeRow
   isSelected: boolean
   isExpanded: boolean
+  draggable: boolean
+  /** true while another row is being dragged and this row is a valid parent */
+  isDropTarget: boolean
   onToggleExpand: () => void
   onToggleSelect: () => void
   onOpen: () => void
@@ -196,10 +260,28 @@ function TreeRow({
   onDelete: () => void
 }) {
   const { page, depth, hasChildren } = row
+  const {
+    attributes,
+    listeners,
+    setNodeRef: setDragRef,
+    isDragging,
+  } = useDraggable({ id: page.id, disabled: !draggable })
+  const { setNodeRef: setDropRef, isOver } = useDroppable({
+    id: page.id,
+    disabled: !draggable || !isDropTarget,
+  })
+
   return (
     <tr
+      ref={setDropRef}
       className={`group h-14 border-b border-[var(--bdr)] transition-colors last:border-b-0 hover:bg-[var(--acc-l)] ${
         isSelected ? 'bg-[var(--acc-l)]' : ''
+      } ${isDragging ? 'opacity-40' : ''} ${
+        isDropTarget && isOver
+          ? 'bg-[var(--acc-l)] shadow-[inset_0_0_0_2px_var(--acc)]'
+          : isDropTarget
+            ? 'shadow-[inset_0_0_0_1px_var(--acc-m)]'
+            : ''
       }`}
     >
       <td className="px-3 align-middle">
@@ -208,13 +290,26 @@ function TreeRow({
           aria-label={`Select "${page.title}"`}
           checked={isSelected}
           onChange={onToggleSelect}
-          className="border-border accent-primary rounded"
+          className="accent-primary rounded border-[var(--bdr)]"
         />
       </td>
       <td className="px-3 align-middle">
         {/* Indentation is data-driven (24px per depth level), so it must be
             an inline style rather than a class. */}
         <div className="flex items-center" style={{ paddingLeft: depth * 24 }}>
+          {draggable && (
+            <button
+              type="button"
+              ref={setDragRef}
+              {...attributes}
+              {...listeners}
+              aria-label={`Move "${page.title}" — drag onto another page to nest it there`}
+              title="Drag to move under another page"
+              className="mr-1 flex h-5 w-5 shrink-0 cursor-grab items-center justify-center rounded-[5px] text-[var(--muted)] opacity-0 transition-opacity duration-[var(--motion-fast)] group-hover:opacity-100 hover:bg-[var(--acc-l)] hover:text-[var(--acc)] focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none active:cursor-grabbing"
+            >
+              <GripVertical size={13} aria-hidden />
+            </button>
+          )}
           {hasChildren ? (
             <button
               type="button"

package/src/views/Pages.tsx

@@ -97,6 +97,10 @@ function buildApiUrl(folderSel: FolderSelection): string {
   return `${base}&folderId=${folderSel.folderId}`
 }
 
+/**
+ * @deprecated Superseded by `PagesListView` (`views/Pages/PagesListView.tsx`),
+ * which `AdminRoot` routes to; will be removed in the next major.
+ */
 export function Pages({ onNavigate }: PagesProps) {
   const [folderSel, setFolderSel] = useState<FolderSelection>({ type: 'smart', smart: 'all' })
   const [sidebarOpen, setSidebarOpen] = useState(true)

package/src/views/Redirects.tsx

@@ -26,6 +26,10 @@ export interface RedirectsProps {
   onNavigate?: (path: string) => void
 }
 
+/**
+ * @deprecated Superseded by `RedirectsTab` (`views/seo/RedirectsTab.tsx`)
+ * inside the SEO view; will be removed in the next major.
+ */
 export function Redirects({ onNavigate }: RedirectsProps) {
   const { data, loading, error, refetch } = useApiData<any[]>('/redirects')
   const [showAddDialog, setShowAddDialog] = useState(false)

package/src/views/ScriptTags.tsx

@@ -4,6 +4,7 @@ import { useMemo, useState } from 'react'
 import { Code2, Plus, Loader2, AlertTriangle } from 'lucide-react'
 import { toast } from 'sonner'
 import { EnabledSwitch } from '../components/EnabledSwitch.js'
+import { Button } from '../components/ui/Button.js'
 import { StatPill } from '../components/ui/StatPill.js'
 import { InspectorPane, SplitPaneLayout, SplitPaneList } from '../components/ui/InspectorPane.js'
 import {
@@ -139,7 +140,7 @@ export function ScriptTags({ initialSelectedId, initialNew }: ScriptTagsProps) {
             <span className="text-destructive flex-1 text-sm">{error}</span>
             <button
               onClick={refetch}
-              className="border-destructive/40 text-destructive hover:bg-destructive/15 rounded-lg border px-3 py-1 text-sm transition-colors"
+              className="border-destructive/40 text-destructive hover:bg-destructive/15 rounded-lg border px-3 py-1 text-sm transition-colors focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
             >
               Retry
             </button>
@@ -148,8 +149,8 @@ export function ScriptTags({ initialSelectedId, initialNew }: ScriptTagsProps) {
 
         <div className="mb-4 flex items-center justify-between">
           <div>
-            <h1 className="text-foreground mb-1">Script Tags</h1>
-            <p className="text-muted-foreground text-sm">
+            <h1 className="mb-1 text-[var(--txt)]">Script Tags</h1>
+            <p className="text-sm text-[var(--sub)]">
               Manage tracking codes, analytics, and custom scripts injected into your site
             </p>
             {tags.length > 0 && (
@@ -168,59 +169,52 @@ export function ScriptTags({ initialSelectedId, initialNew }: ScriptTagsProps) {
               </div>
             )}
           </div>
-          <button
+          <Button
             type="button"
+            variant="primary"
+            size="md"
             onClick={() => setSelection({ mode: 'new' })}
-            className="bg-primary text-primary-foreground hover:bg-primary/90 flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors"
+            leftIcon={<Plus size={16} aria-hidden />}
           >
-            <Plus className="h-4 w-4" />
             New Script
-          </button>
+          </Button>
         </div>
       </div>
 
       <SplitPaneLayout>
         <SplitPaneList className="p-3 pt-0 pr-6 sm:p-4 sm:pt-0 sm:pr-8">
           {tags.length === 0 && !error ? (
-            <div className="border-border bg-card rounded-lg border p-12 text-center">
-              <Code2 className="text-muted-foreground mx-auto mb-3 h-10 w-10" />
-              <h3 className="text-foreground text-sm font-medium">No script tags yet</h3>
-              <p className="text-muted-foreground mt-1 text-sm">
+            <div className="rounded-lg border border-[var(--bdr)] bg-[var(--card)] p-12 text-center">
+              <Code2 className="mx-auto mb-3 h-10 w-10 text-[var(--sub)]" />
+              <h3 className="text-sm font-medium text-[var(--txt)]">No script tags yet</h3>
+              <p className="mt-1 text-sm text-[var(--sub)]">
                 Add tracking codes like Google Analytics, Tag Manager, or Facebook Pixel.
               </p>
-              <button
+              <Button
                 type="button"
+                variant="primary"
+                size="md"
+                className="mt-4"
                 onClick={() => setSelection({ mode: 'new' })}
-                className="bg-primary text-primary-foreground hover:bg-primary/90 mt-4 inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors"
+                leftIcon={<Plus size={16} aria-hidden />}
               >
-                <Plus className="h-4 w-4" />
                 Add Your First Script
-              </button>
+              </Button>
             </div>
           ) : (
-            <div className="border-border bg-card overflow-hidden rounded-lg border">
+            <div className="overflow-hidden rounded-lg border border-[var(--bdr)] bg-[var(--card)]">
               <table className="w-full text-sm" aria-label="Script tags">
                 <thead>
-                  <tr className="border-border bg-muted border-b">
-                    <th className="text-muted-foreground px-4 py-3 text-left font-medium">
-                      Script
-                    </th>
-                    <th className="text-muted-foreground px-4 py-3 text-left font-medium">
-                      Location
-                    </th>
-                    <th className="text-muted-foreground px-4 py-3 text-center font-medium">
+                  <tr className="bg-muted border-b border-[var(--bdr)]">
+                    <th className="px-4 py-3 text-left font-medium text-[var(--sub)]">Script</th>
+                    <th className="px-4 py-3 text-left font-medium text-[var(--sub)]">Location</th>
+                    <th className="px-4 py-3 text-center font-medium text-[var(--sub)]">
                       Priority
                     </th>
-                    <th className="text-muted-foreground px-4 py-3 text-left font-medium">Scope</th>
-                    <th className="text-muted-foreground px-4 py-3 text-left font-medium">
-                      Consent
-                    </th>
-                    <th className="text-muted-foreground px-4 py-3 text-center font-medium">
-                      Active
-                    </th>
-                    <th className="text-muted-foreground px-4 py-3 text-left font-medium">
-                      Updated
-                    </th>
+                    <th className="px-4 py-3 text-left font-medium text-[var(--sub)]">Scope</th>
+                    <th className="px-4 py-3 text-left font-medium text-[var(--sub)]">Consent</th>
+                    <th className="px-4 py-3 text-center font-medium text-[var(--sub)]">Active</th>
+                    <th className="px-4 py-3 text-left font-medium text-[var(--sub)]">Updated</th>
                   </tr>
                 </thead>
                 <tbody>
@@ -229,8 +223,8 @@ export function ScriptTags({ initialSelectedId, initialNew }: ScriptTagsProps) {
                     return (
                       <tr
                         key={tag.id}
-                        className={`border-border cursor-pointer border-b transition-colors last:border-0 ${
-                          isSelected ? 'bg-[var(--acc-l)]' : 'hover:bg-muted'
+                        className={`cursor-pointer border-b border-[var(--bdr)] transition-colors last:border-0 ${
+                          isSelected ? 'bg-[var(--acc-l)]' : 'hover:bg-[var(--acc-l)]'
                         }`}
                         onClick={() => toggleRow(tag)}
                       >
@@ -242,29 +236,29 @@ export function ScriptTags({ initialSelectedId, initialNew }: ScriptTagsProps) {
                               toggleRow(tag)
                             }}
                             aria-expanded={isSelected}
-                            className="text-foreground hover:text-primary text-left font-medium"
+                            className="text-left font-medium text-[var(--txt)] hover:text-[var(--acc)]"
                           >
                             {tag.name}
                           </button>
                         </td>
                         <td className="px-4 py-[11px]">
                           <span
-                            className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${PLACEMENT_COLORS[tag.placement] ?? 'bg-muted text-foreground'}`}
+                            className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${PLACEMENT_COLORS[tag.placement] ?? 'bg-muted text-[var(--txt)]'}`}
                           >
                             {PLACEMENT_LABELS[tag.placement] ?? tag.placement}
                           </span>
                         </td>
-                        <td className="text-muted-foreground px-4 py-[11px] text-center font-mono">
+                        <td className="px-4 py-[11px] text-center font-mono text-[var(--sub)]">
                           {tag.priority}
                         </td>
-                        <td className="text-muted-foreground px-4 py-[11px]">{scopeLabel(tag)}</td>
+                        <td className="px-4 py-[11px] text-[var(--sub)]">{scopeLabel(tag)}</td>
                         <td className="px-4 py-[11px]">
                           {tag.consentCategory && tag.consentCategory !== 'none' ? (
                             <span className="rounded-[5px] border border-[var(--bdr)] bg-[var(--bg)] px-1.5 py-0.5 text-[11px] text-[var(--sub)]">
                               {CONSENT_LABELS[tag.consentCategory] ?? tag.consentCategory}
                             </span>
                           ) : (
-                            <span className="text-muted-foreground text-xs">—</span>
+                            <span className="text-xs text-[var(--sub)]">—</span>
                           )}
                         </td>
                         <td
@@ -278,7 +272,7 @@ export function ScriptTags({ initialSelectedId, initialNew }: ScriptTagsProps) {
                             aria-label={`${tag.enabled ? 'Disable' : 'Enable'} ${tag.name}`}
                           />
                         </td>
-                        <td className="text-muted-foreground px-4 py-[11px] text-xs">
+                        <td className="px-4 py-[11px] text-xs text-[var(--sub)]">
                           {formatUpdated(tag.updatedAt)}
                         </td>
                       </tr>

package/src/views/page-builder/PageBuilder.tsx

@@ -21,6 +21,8 @@ import { AIGenerateDialog } from './AIGenerateDialog.js'
 
 export interface PageBuilderProps {
   documentId?: string
+  /** Seed a NEW page from a saved template (`/page-builder/new?template=<id>`). */
+  templateId?: string
   collectionSlug: string
   config: any
   onNavigate: (path: string) => void
@@ -55,7 +57,13 @@ function initialSectionsCollapsed(): boolean {
   return false
 }
 
-export function PageBuilder({ documentId, collectionSlug, config, onNavigate }: PageBuilderProps) {
+export function PageBuilder({
+  documentId,
+  templateId,
+  collectionSlug,
+  config,
+  onNavigate,
+}: PageBuilderProps) {
   const [loading, setLoading] = useState(!!documentId)
   const [loadError, setLoadError] = useState<string | null>(null)
   const [saving, setSaving] = useState(false)
@@ -100,6 +108,25 @@ export function PageBuilder({ documentId, collectionSlug, config, onNavigate }:
 
   useEffect(() => {
     if (!documentId) {
+      // A new page can be seeded from a saved template ("Use template" on
+      // the Templates grid). Load the template tree, then hand the canvas
+      // over as a dirty, unsaved draft.
+      if (templateId) {
+        let cancelledNew = false
+        setLoading(true)
+        cmsApi<{ name?: string; tree?: PageNode }>(`/page-templates/${templateId}`).then((res) => {
+          if (cancelledNew) return
+          if (res.error) {
+            toast.error(`Couldn't load template: ${res.error}`)
+          } else if (res.data?.tree) {
+            replaceTree(res.data.tree)
+          }
+          setLoading(false)
+        })
+        return () => {
+          cancelledNew = true
+        }
+      }
       setLoading(false)
       return
     }
@@ -139,7 +166,8 @@ export function PageBuilder({ documentId, collectionSlug, config, onNavigate }:
     return () => {
       cancelled = true
     }
-  }, [documentId, collectionSlug])
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- replaceTree/setPageSettings are stable builder actions
+  }, [documentId, templateId, collectionSlug])
 
   const handleSave = useCallback(async () => {
     setSaving(true)