@actuate-media/cms-admin 0.6.0 → 0.7.0

package/dist/views/page-builder/canvas/RowRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RowRenderer.js","sourceRoot":"","sources":["../../../../src/views/page-builder/canvas/RowRenderer.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAQrD,MAAM,UAAU,WAAW,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,YAAY,EAAoB;IAClF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,UAAU,GAAG,cAAc,KAAK,IAAI,CAAC,EAAE,CAAC;IAC9C,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,IAAI,MAAM,CAAC;IACxC,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,IAAI,SAAS,CAAC;IAE/D,MAAM,QAAQ,GAA2B;QACvC,GAAG,EAAE,OAAO;QACZ,MAAM,EAAE,QAAQ;QAChB,MAAM,EAAE,KAAK;QACb,OAAO,EAAE,SAAS;KACnB,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,CAAmB,EAAE,EAAE;QAC1C,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,OAAO,CACL,+BACgB,IAAI,CAAC,EAAE,EACrB,SAAS,EAAE,8BACT,UAAU;YACR,CAAC,CAAC,mCAAmC;YACrC,CAAC,CAAC,OAAO;gBACP,CAAC,CAAC,wBAAwB;gBAC1B,CAAC,CAAC,EACR,EAAE,EACF,OAAO,EAAE,WAAW,EACpB,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE;YAClB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,UAAU,CAAC,IAAI,CAAC,CAAC;QACnB,CAAC,EACD,YAAY,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,aAEpC,CAAC,OAAO,IAAI,UAAU,CAAC,IAAI,CAC1B,eAAM,SAAS,EAAC,2GAA2G,oBAEpH,CACR,EAED,cACE,SAAS,EAAC,mBAAmB,EAC7B,KAAK,EAAE;oBACL,GAAG;oBACH,UAAU,EAAE,QAAQ,CAAC,aAAa,CAAC,IAAI,SAAS;iBACjD,YAEA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAC1B,KAAC,cAAc,IAEb,IAAI,EAAE,GAAG,EACT,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAE,YAAY,IAHrB,GAAG,CAAC,EAAE,CAIX,CACH,CAAC,GACE,IACF,CACP,CAAC;AACJ,CAAC"}

package/dist/views/page-builder/canvas/SectionRenderer.d.ts

@@ -0,0 +1,8 @@
+import type { SectionNode } from '@actuate-media/cms-core';
+export interface SectionRendererProps {
+    node: SectionNode;
+    selectedNodeId: string | null;
+    onSelectNode: (id: string | null) => void;
+}
+export declare function SectionRenderer({ node, selectedNodeId, onSelectNode }: SectionRendererProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SectionRenderer.d.ts.map

package/dist/views/page-builder/canvas/SectionRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionRenderer.d.ts","sourceRoot":"","sources":["../../../../src/views/page-builder/canvas/SectionRenderer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAI3D,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,WAAW,CAAC;IAClB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3C;AAED,wBAAgB,eAAe,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,YAAY,EAAE,EAAE,oBAAoB,2CAmF3F"}

package/dist/views/page-builder/canvas/SectionRenderer.js

@@ -0,0 +1,54 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ContainerRenderer } from './ContainerRenderer.js';
+import { RowRenderer } from './RowRenderer.js';
+export function SectionRenderer({ node, selectedNodeId, onSelectNode }) {
+    const [hovered, setHovered] = useState(false);
+    const isSelected = selectedNodeId === node.id;
+    const handleClick = (e) => {
+        e.stopPropagation();
+        onSelectNode(node.id);
+    };
+    const backgroundStyle = {};
+    if (node.settings.background) {
+        backgroundStyle.backgroundColor = node.settings.background;
+    }
+    if (node.settings.backgroundImage) {
+        backgroundStyle.backgroundImage = `url(${node.settings.backgroundImage})`;
+        backgroundStyle.backgroundSize = 'cover';
+        backgroundStyle.backgroundPosition = 'center';
+    }
+    if (node.settings.backgroundGradient) {
+        backgroundStyle.backgroundImage = node.settings.backgroundGradient;
+    }
+    if (node.settings.paddingTop) {
+        backgroundStyle.paddingTop = node.settings.paddingTop;
+    }
+    if (node.settings.paddingBottom) {
+        backgroundStyle.paddingBottom = node.settings.paddingBottom;
+    }
+    if (node.settings.marginTop) {
+        backgroundStyle.marginTop = node.settings.marginTop;
+    }
+    if (node.settings.marginBottom) {
+        backgroundStyle.marginBottom = node.settings.marginBottom;
+    }
+    return (_jsxs("div", { "data-node-id": node.id, className: `relative w-full transition-shadow ${isSelected
+            ? 'ring-2 ring-primary ring-offset-2'
+            : hovered
+                ? 'ring-1 ring-primary/50'
+                : ''}`, style: backgroundStyle, onClick: handleClick, onMouseEnter: (e) => {
+            e.stopPropagation();
+            setHovered(true);
+        }, onMouseLeave: () => setHovered(false), children: [(hovered || isSelected) && (_jsx("span", { className: "absolute -top-2 -left-1 text-xs px-1.5 py-0.5 bg-primary text-primary-foreground rounded font-medium z-10", children: "Section" })), node.children.map((child) => {
+                if (child.type === 'container') {
+                    return (_jsx(ContainerRenderer, { node: child, selectedNodeId: selectedNodeId, onSelectNode: onSelectNode }, child.id));
+                }
+                if (child.type === 'row') {
+                    return (_jsx(RowRenderer, { node: child, selectedNodeId: selectedNodeId, onSelectNode: onSelectNode }, child.id));
+                }
+                return null;
+            })] }));
+}
+//# sourceMappingURL=SectionRenderer.js.map

package/dist/views/page-builder/canvas/SectionRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionRenderer.js","sourceRoot":"","sources":["../../../../src/views/page-builder/canvas/SectionRenderer.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAQ/C,MAAM,UAAU,eAAe,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,YAAY,EAAwB;IAC1F,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,UAAU,GAAG,cAAc,KAAK,IAAI,CAAC,EAAE,CAAC;IAE9C,MAAM,WAAW,GAAG,CAAC,CAAmB,EAAE,EAAE;QAC1C,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,MAAM,eAAe,GAAwB,EAAE,CAAC;IAChD,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;QAC7B,eAAe,CAAC,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC;IAC7D,CAAC;IACD,IAAI,IAAI,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC;QAClC,eAAe,CAAC,eAAe,GAAG,OAAO,IAAI,CAAC,QAAQ,CAAC,eAAe,GAAG,CAAC;QAC1E,eAAe,CAAC,cAAc,GAAG,OAAO,CAAC;QACzC,eAAe,CAAC,kBAAkB,GAAG,QAAQ,CAAC;IAChD,CAAC;IACD,IAAI,IAAI,CAAC,QAAQ,CAAC,kBAAkB,EAAE,CAAC;QACrC,eAAe,CAAC,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC,kBAAkB,CAAC;IACrE,CAAC;IACD,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;QAC7B,eAAe,CAAC,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC;IACxD,CAAC;IACD,IAAI,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC;QAChC,eAAe,CAAC,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC;IAC9D,CAAC;IACD,IAAI,IAAI,CAAC,QAAQ,CAAC,SAAS,EAAE,CAAC;QAC5B,eAAe,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC;IACtD,CAAC;IACD,IAAI,IAAI,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC;QAC/B,eAAe,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC;IAC5D,CAAC;IAED,OAAO,CACL,+BACgB,IAAI,CAAC,EAAE,EACrB,SAAS,EAAE,qCACT,UAAU;YACR,CAAC,CAAC,mCAAmC;YACrC,CAAC,CAAC,OAAO;gBACP,CAAC,CAAC,wBAAwB;gBAC1B,CAAC,CAAC,EACR,EAAE,EACF,KAAK,EAAE,eAAe,EACtB,OAAO,EAAE,WAAW,EACpB,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE;YAClB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,UAAU,CAAC,IAAI,CAAC,CAAC;QACnB,CAAC,EACD,YAAY,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,aAEpC,CAAC,OAAO,IAAI,UAAU,CAAC,IAAI,CAC1B,eAAM,SAAS,EAAC,2GAA2G,wBAEpH,CACR,EAEA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;gBAC3B,IAAI,KAAK,CAAC,IAAI,KAAK,WAAW,EAAE,CAAC;oBAC/B,OAAO,CACL,KAAC,iBAAiB,IAEhB,IAAI,EAAE,KAAK,EACX,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAE,YAAY,IAHrB,KAAK,CAAC,EAAE,CAIb,CACH,CAAC;gBACJ,CAAC;gBACD,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,EAAE,CAAC;oBACzB,OAAO,CACL,KAAC,WAAW,IAEV,IAAI,EAAE,KAAK,EACX,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAE,YAAY,IAHrB,KAAK,CAAC,EAAE,CAIb,CACH,CAAC;gBACJ,CAAC;gBACD,OAAO,IAAI,CAAC;YACd,CAAC,CAAC,IACE,CACP,CAAC;AACJ,CAAC"}

package/dist/views/page-builder/canvas/index.d.ts

@@ -0,0 +1,3 @@
+export { BuilderCanvas } from './BuilderCanvas.js';
+export type { BuilderCanvasProps } from './BuilderCanvas.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/views/page-builder/canvas/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/page-builder/canvas/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/views/page-builder/canvas/index.js

@@ -0,0 +1,2 @@
+export { BuilderCanvas } from './BuilderCanvas.js';
+//# sourceMappingURL=index.js.map

package/dist/views/page-builder/canvas/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/views/page-builder/canvas/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actuate-media/cms-admin",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/actuate-media/actuatecms.git",
@@ -69,7 +69,8 @@
     "@types/react-dom": "^19.0.0",
     "tailwindcss": "^4.0.0",
     "typescript": "^5.7.0",
-    "vitest": "^3.0.0"
+    "vitest": "^3.0.0",
+    "@actuate-media/cms-core": "0.9.0"
   },
   "scripts": {
     "build": "tsc --project tsconfig.json && npx @tailwindcss/cli -i src/styles/build-input.css -o dist/actuate-admin.css --minify",

package/src/AdminRoot.tsx

@@ -23,6 +23,8 @@ import { ErrorBoundary } from './components/ErrorBoundary.js';
 import { ThemeProvider } from './components/ThemeProvider.js';
 import { LocaleProvider } from './components/LocaleProvider.js';
 import { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts.js';
+import { PageBuilder } from './views/page-builder/PageBuilder.js';
+import { SavedSections } from './views/page-builder/SavedSections.js';
 
 export interface AdminRootProps {
   config: any;
@@ -99,6 +101,16 @@ function AdminShell({ config, session, basePath = '/admin', initialPath = '/', s
       return <Dashboard config={config} session={session} onNavigate={navigate} />;
     }
 
+    const pageBuilderEdit = matchRoute('/page-builder/:id');
+    if (pageBuilderEdit?.id) {
+      return <PageBuilder documentId={pageBuilderEdit.id} collectionSlug="pages" config={config} onNavigate={navigate} />;
+    }
+
+    const pageBuilderNew = matchRoute('/page-builder/new');
+    if (pageBuilderNew) {
+      return <PageBuilder collectionSlug="pages" config={config} onNavigate={navigate} />;
+    }
+
     for (const slug of collectionSlugs) {
       const newMatch = matchRoute(`/${slug}/new`);
       if (newMatch) {
@@ -171,6 +183,10 @@ function AdminShell({ config, session, basePath = '/admin', initialPath = '/', s
       return <ScriptTags onNavigate={navigate} />;
     }
 
+    if (matchRoute('/saved-sections')) {
+      return <SavedSections onNavigate={navigate} config={config} />;
+    }
+
     if (matchRoute('/users')) {
       return <Users onNavigate={navigate} />;
     }

package/src/components/ErrorBoundary.tsx

@@ -32,13 +32,13 @@ export class ErrorBoundary extends Component<Props, State> {
       return (
         <div className="flex min-h-[200px] items-center justify-center p-6">
           <div className="text-center">
-            <h2 className="text-lg font-semibold text-gray-900 mb-2">Something went wrong</h2>
-            <p className="text-sm text-gray-600 mb-4">
+            <h2 className="text-lg font-medium text-foreground mb-2">Something went wrong</h2>
+            <p className="text-sm text-muted-foreground mb-4">
               {this.state.error?.message ?? 'An unexpected error occurred'}
             </p>
             <button
               onClick={() => this.setState({ hasError: false, error: null })}
-              className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700"
+              className="px-4 py-2 text-sm font-medium text-primary-foreground bg-primary rounded-md hover:bg-primary/90 transition-colors"
             >
               Try Again
             </button>

package/src/hooks/useBuilderState.ts

@@ -0,0 +1,328 @@
+'use client';
+
+import { useState, useCallback, useRef, useMemo } from 'react';
+import type {
+  PageNode,
+  BuilderNode,
+  BlockNode,
+  SectionNode,
+  ColumnNode,
+} from '@actuate-media/cms-core';
+import {
+  addNode,
+  removeNode,
+  moveNode,
+  updateNodeSettings,
+  updateBlockData,
+  findNode,
+  findParent,
+  createEmptyPage,
+  createSection,
+  createContainer,
+  createRow,
+  createColumn,
+  createBlock,
+  hasChildren,
+} from '@actuate-media/cms-core';
+
+export type DeviceMode = 'desktop' | 'tablet' | 'mobile';
+export type PanelTab = 'block' | 'node' | 'page' | 'seo' | 'design';
+
+export interface PageSettings {
+  title: string;
+  slug: string;
+  template?: string;
+  metaTitle?: string;
+  metaDescription?: string;
+  ogImage?: string;
+  focusKeyphrase?: string;
+  schemaType?: string;
+}
+
+export interface BuilderState {
+  tree: PageNode;
+  selectedNodeId: string | null;
+  selectedNode: BuilderNode | null;
+  deviceMode: DeviceMode;
+  activeTab: PanelTab;
+  pageSettings: PageSettings;
+  dirty: boolean;
+  canUndo: boolean;
+  canRedo: boolean;
+  showGridOverlay: boolean;
+}
+
+export interface BuilderActions {
+  selectNode: (id: string | null) => void;
+  setDeviceMode: (mode: DeviceMode) => void;
+  setActiveTab: (tab: PanelTab) => void;
+  setPageSettings: (settings: Partial<PageSettings>) => void;
+  setShowGridOverlay: (show: boolean) => void;
+
+  addSection: () => void;
+  addRowToSection: (sectionId: string) => void;
+  addBlockToColumn: (columnId: string, blockType: string, variant?: string) => void;
+  addNodeAtId: (parentId: string, node: BuilderNode, index?: number) => void;
+  removeNodeById: (id: string) => void;
+  moveNodeById: (id: string, newParentId: string, index?: number) => void;
+  updateSettings: (id: string, settings: Record<string, unknown>) => void;
+  updateBlock: (id: string, data: Record<string, unknown>) => void;
+  duplicateNode: (id: string) => void;
+  moveNodeUp: (id: string) => void;
+  moveNodeDown: (id: string) => void;
+
+  undo: () => void;
+  redo: () => void;
+  markClean: () => void;
+  replaceTree: (tree: PageNode) => void;
+}
+
+const MAX_HISTORY = 50;
+
+function deepClone<T>(obj: T): T {
+  return JSON.parse(JSON.stringify(obj));
+}
+
+function regenerateIds(node: BuilderNode): BuilderNode {
+  const cloned = deepClone(node);
+  let counter = 0;
+  function walk(n: any) {
+    n.id = `node_${Date.now().toString(36)}_${(counter++).toString(36)}_${Math.random().toString(36).slice(2, 8)}`;
+    if (Array.isArray(n.children)) {
+      for (const child of n.children) walk(child);
+    }
+  }
+  walk(cloned);
+  return cloned;
+}
+
+export function useBuilderState(
+  initialTree?: PageNode,
+  initialPageSettings?: Partial<PageSettings>,
+): BuilderState & BuilderActions {
+  const [tree, setTree] = useState<PageNode>(() => initialTree ?? createEmptyPage());
+  const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
+  const [deviceMode, setDeviceMode] = useState<DeviceMode>('desktop');
+  const [activeTab, setActiveTab] = useState<PanelTab>('page');
+  const [showGridOverlay, setShowGridOverlay] = useState(false);
+  const [pageSettings, setPageSettingsState] = useState<PageSettings>({
+    title: '',
+    slug: '',
+    ...initialPageSettings,
+  });
+  const [dirty, setDirty] = useState(false);
+
+  const undoStack = useRef<PageNode[]>([]);
+  const redoStack = useRef<PageNode[]>([]);
+
+  const pushHistory = useCallback((currentTree: PageNode) => {
+    undoStack.current = [...undoStack.current.slice(-MAX_HISTORY + 1), currentTree];
+    redoStack.current = [];
+  }, []);
+
+  const [canUndo, setCanUndo] = useState(false);
+  const [canRedo, setCanRedo] = useState(false);
+
+  const applyTreeChange = useCallback((fn: (prev: PageNode) => PageNode) => {
+    setTree((prev) => {
+      pushHistory(prev);
+      const next = fn(prev);
+      setDirty(true);
+      setCanUndo(true);
+      setCanRedo(false);
+      return next;
+    });
+  }, [pushHistory]);
+
+  const selectedNode = useMemo(() => {
+    if (!selectedNodeId) return null;
+    return findNode(tree, selectedNodeId) ?? null;
+  }, [tree, selectedNodeId]);
+
+  const selectNode = useCallback((id: string | null) => {
+    setSelectedNodeId(id);
+    if (id) {
+      const node = findNode(tree, id);
+      if (node) {
+        if (node.type === 'block') setActiveTab('block');
+        else if (node.type === 'page') setActiveTab('page');
+        else setActiveTab('node');
+      }
+    }
+  }, [tree]);
+
+  const setPageSettings = useCallback((settings: Partial<PageSettings>) => {
+    setPageSettingsState((prev) => ({ ...prev, ...settings }));
+    setDirty(true);
+  }, []);
+
+  const addSection = useCallback(() => {
+    applyTreeChange((prev) => {
+      const section = createSection({ paddingTop: '64px', paddingBottom: '64px' });
+      const container = createContainer();
+      const col = createColumn(12);
+      const row = createRow([col]);
+      (container as any).children = [row];
+      (section as any).children = [container];
+      return addNode(prev, prev.id, section as BuilderNode);
+    });
+  }, [applyTreeChange]);
+
+  const addRowToSection = useCallback((sectionId: string) => {
+    applyTreeChange((prev) => {
+      const section = findNode(prev, sectionId);
+      if (!section || !hasChildren(section)) return prev;
+      const containers = (section as SectionNode).children.filter((c) => c.type === 'container');
+      const targetId = containers.length > 0 ? containers[containers.length - 1]!.id : sectionId;
+      const col = createColumn(12);
+      const row = createRow([col]);
+      return addNode(prev, targetId, row as BuilderNode);
+    });
+  }, [applyTreeChange]);
+
+  const addBlockToColumn = useCallback((columnId: string, blockType: string, variant?: string) => {
+    applyTreeChange((prev) => {
+      const block = createBlock(blockType, variant);
+      return addNode(prev, columnId, block as BuilderNode);
+    });
+  }, [applyTreeChange]);
+
+  const addNodeAtId = useCallback((parentId: string, node: BuilderNode, index?: number) => {
+    applyTreeChange((prev) => addNode(prev, parentId, node, index));
+  }, [applyTreeChange]);
+
+  const removeNodeById = useCallback((id: string) => {
+    applyTreeChange((prev) => {
+      const result = removeNode(prev, id);
+      if (selectedNodeId === id) setSelectedNodeId(null);
+      return result;
+    });
+  }, [applyTreeChange, selectedNodeId]);
+
+  const moveNodeById = useCallback((id: string, newParentId: string, index?: number) => {
+    applyTreeChange((prev) => moveNode(prev, id, newParentId, index));
+  }, [applyTreeChange]);
+
+  const updateSettings = useCallback((id: string, settings: Record<string, unknown>) => {
+    applyTreeChange((prev) => updateNodeSettings(prev, id, settings));
+  }, [applyTreeChange]);
+
+  const updateBlock = useCallback((id: string, data: Record<string, unknown>) => {
+    applyTreeChange((prev) => updateBlockData(prev, id, data));
+  }, [applyTreeChange]);
+
+  const duplicateNode = useCallback((id: string) => {
+    applyTreeChange((prev) => {
+      const node = findNode(prev, id);
+      if (!node) return prev;
+      const parent = findParent(prev, id);
+      if (!parent) return prev;
+      const siblings = (parent as any).children as BuilderNode[];
+      const idx = siblings.findIndex((c) => c.id === id);
+      const cloned = regenerateIds(node);
+      return addNode(prev, parent.id, cloned, idx + 1);
+    });
+  }, [applyTreeChange]);
+
+  const moveNodeUp = useCallback((id: string) => {
+    applyTreeChange((prev) => {
+      const parent = findParent(prev, id);
+      if (!parent) return prev;
+      const siblings = (parent as any).children as BuilderNode[];
+      const idx = siblings.findIndex((c) => c.id === id);
+      if (idx <= 0) return prev;
+      const withoutNode = removeNode(prev, id);
+      const node = findNode(prev, id);
+      if (!node) return prev;
+      return addNode(withoutNode, parent.id, deepClone(node), idx - 1);
+    });
+  }, [applyTreeChange]);
+
+  const moveNodeDown = useCallback((id: string) => {
+    applyTreeChange((prev) => {
+      const parent = findParent(prev, id);
+      if (!parent) return prev;
+      const siblings = (parent as any).children as BuilderNode[];
+      const idx = siblings.findIndex((c) => c.id === id);
+      if (idx >= siblings.length - 1) return prev;
+      const withoutNode = removeNode(prev, id);
+      const node = findNode(prev, id);
+      if (!node) return prev;
+      return addNode(withoutNode, parent.id, deepClone(node), idx + 1);
+    });
+  }, [applyTreeChange]);
+
+  const undo = useCallback(() => {
+    if (undoStack.current.length === 0) return;
+    const prev = undoStack.current[undoStack.current.length - 1]!;
+    undoStack.current = undoStack.current.slice(0, -1);
+    setTree((current) => {
+      redoStack.current = [...redoStack.current, current];
+      setCanUndo(undoStack.current.length > 0);
+      setCanRedo(true);
+      return prev;
+    });
+  }, []);
+
+  const redo = useCallback(() => {
+    if (redoStack.current.length === 0) return;
+    const next = redoStack.current[redoStack.current.length - 1]!;
+    redoStack.current = redoStack.current.slice(0, -1);
+    setTree((current) => {
+      undoStack.current = [...undoStack.current, current];
+      setCanRedo(redoStack.current.length > 0);
+      setCanUndo(true);
+      return next;
+    });
+  }, []);
+
+  const markClean = useCallback(() => {
+    setDirty(false);
+  }, []);
+
+  const replaceTree = useCallback((newTree: PageNode) => {
+    setTree((prev) => {
+      pushHistory(prev);
+      setDirty(true);
+      setCanUndo(true);
+      setCanRedo(false);
+      return newTree;
+    });
+  }, [pushHistory]);
+
+  return {
+    tree,
+    selectedNodeId,
+    selectedNode,
+    deviceMode,
+    activeTab,
+    pageSettings,
+    dirty,
+    canUndo,
+    canRedo,
+    showGridOverlay,
+
+    selectNode,
+    setDeviceMode,
+    setActiveTab,
+    setPageSettings,
+    setShowGridOverlay,
+
+    addSection,
+    addRowToSection,
+    addBlockToColumn,
+    addNodeAtId,
+    removeNodeById,
+    moveNodeById,
+    updateSettings,
+    updateBlock,
+    duplicateNode,
+    moveNodeUp,
+    moveNodeDown,
+
+    undo,
+    redo,
+    markClean,
+    replaceTree,
+  };
+}

package/src/index.ts

@@ -33,6 +33,10 @@ export type { ResetPasswordProps } from './views/ResetPassword.js';
 export { CollectionList } from './views/CollectionList.js';
 export { DocumentEdit } from './views/DocumentEdit.js';
 
+export { PageBuilder } from './views/page-builder/PageBuilder.js';
+export { useBuilderState } from './hooks/useBuilderState.js';
+export type { BuilderState, BuilderActions, DeviceMode, PanelTab, PageSettings as BuilderPageSettings } from './hooks/useBuilderState.js';
+
 export { Breadcrumbs } from './components/Breadcrumbs.js';
 export { CommandPalette } from './components/CommandPalette.js';
 export { ErrorBoundary } from './components/ErrorBoundary.js';

package/src/layout/Sidebar.tsx

@@ -20,6 +20,8 @@ import {
   PanelBottom,
   Layers,
   Code2,
+  LayoutTemplate,
+  Library,
 } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react';
 
@@ -254,6 +256,9 @@ function buildNavItems(config: any): NavItem[] {
   }
 
   items.push(
+    { path: '/page-builder/new', label: 'Page Builder', icon: LayoutTemplate, group: 'Pages' },
+    { path: '/saved-sections', label: 'Saved Sections', icon: Library, group: 'Pages' },
+    { path: '/page-templates', label: 'Templates', icon: Layers, group: 'Pages' },
     { path: '/media', label: 'Media', icon: Image },
     { path: '/forms', label: 'Forms', icon: ClipboardList },
     { path: '/seo', label: 'SEO', icon: SearchIcon },

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

@@ -0,0 +1,68 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import { Sparkles, Loader2 } from 'lucide-react';
+import { toast } from 'sonner';
+import { cmsApi } from '../../lib/api.js';
+import type { BlockNode } from '@actuate-media/cms-core';
+
+export interface AIBlockAssistProps {
+  block: BlockNode;
+  pageTitle?: string;
+  businessName?: string;
+  onUpdateData: (data: Record<string, unknown>) => void;
+}
+
+export function AIBlockAssist({
+  block,
+  pageTitle,
+  businessName,
+  onUpdateData,
+}: AIBlockAssistProps) {
+  const [generating, setGenerating] = useState(false);
+
+  const handleGenerate = useCallback(async () => {
+    setGenerating(true);
+
+    try {
+      const res = await cmsApi<Record<string, unknown>>('/page-builder/generate-block', {
+        method: 'POST',
+        body: JSON.stringify({
+          blockType: block.settings.blockType,
+          variant: block.settings.variant,
+          pageContext: {
+            pageTitle,
+            businessName,
+          },
+        }),
+      });
+
+      if (res.error) {
+        toast.error(res.error);
+      } else if (res.data) {
+        onUpdateData(res.data);
+        toast.success('Content generated');
+      }
+    } catch {
+      toast.error('Failed to generate content');
+    } finally {
+      setGenerating(false);
+    }
+  }, [block, pageTitle, businessName, onUpdateData]);
+
+  return (
+    <button
+      onClick={handleGenerate}
+      disabled={generating}
+      className="flex items-center gap-1.5 px-2.5 py-1 text-xs text-primary hover:bg-primary/10 rounded-md transition-colors disabled:opacity-50"
+      title="Generate content with AI"
+    >
+      {generating ? (
+        <Loader2 size={12} className="animate-spin" />
+      ) : (
+        <Sparkles size={12} />
+      )}
+      {generating ? 'Generating...' : 'AI Fill'}
+    </button>
+  );
+}