@actuate-media/cms-admin 0.4.0 → 0.7.0

package/src/AdminRoot.tsx

@@ -13,12 +13,18 @@ import { FormEditor } from './views/FormEditor.js';
 import { FormSubmissions } from './views/FormSubmissions.js';
 import { Users } from './views/Users.js';
 import { SEO } from './views/SEO.js';
+import { ScriptTags } from './views/ScriptTags.js';
+import { ScriptTagEditor } from './views/ScriptTagEditor.js';
 import { SetupWizard } from './views/SetupWizard.js';
 import { Login } from './views/Login.js';
+import { ForgotPassword } from './views/ForgotPassword.js';
+import { ResetPassword } from './views/ResetPassword.js';
 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;
@@ -63,6 +69,16 @@ function AdminShell({ config, session, basePath = '/admin', initialPath = '/', s
   }
 
   if (!session && !setupRequired) {
+    if (matchRoute('/forgot-password')) {
+      return <ForgotPassword onNavigate={navigate} />;
+    }
+
+    const resetMatch = matchRoute('/reset-password');
+    if (resetMatch) {
+      const params = new URLSearchParams(typeof window !== 'undefined' ? window.location.search : '');
+      return <ResetPassword onNavigate={navigate} token={params.get('token')} />;
+    }
+
     if (onLogin) {
       return <Login onLogin={onLogin} onNavigate={navigate} captchaConfig={captchaConfig} />;
     }
@@ -85,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) {
@@ -146,6 +172,21 @@ function AdminShell({ config, session, basePath = '/admin', initialPath = '/', s
       return <SEO onNavigate={navigate} initialTab="pages" />;
     }
 
+    if (matchRoute('/script-tags/new')) {
+      return <ScriptTagEditor onNavigate={navigate} />;
+    }
+    const scriptTagEdit = matchRoute('/script-tags/:id');
+    if (scriptTagEdit?.id) {
+      return <ScriptTagEditor tagId={scriptTagEdit.id} onNavigate={navigate} />;
+    }
+    if (matchRoute('/script-tags')) {
+      return <ScriptTags onNavigate={navigate} />;
+    }
+
+    if (matchRoute('/saved-sections')) {
+      return <SavedSections onNavigate={navigate} config={config} />;
+    }
+
     if (matchRoute('/users')) {
       return <Users onNavigate={navigate} />;
     }

package/src/components/Breadcrumbs.tsx

@@ -12,6 +12,7 @@ const LABEL_MAP: Record<string, string> = {
   canonicals: 'Canonicalization',
   links: 'Link Health',
   users: 'Users',
+  'script-tags': 'Script Tags',
   settings: 'Settings',
   collections: 'Collections',
   submissions: 'Submissions',

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

@@ -26,9 +26,17 @@ export { SetupWizard } from './views/SetupWizard.js';
 export type { SetupWizardProps } from './views/SetupWizard.js';
 export { Login } from './views/Login.js';
 export type { LoginProps, CaptchaConfig } from './views/Login.js';
+export { ForgotPassword } from './views/ForgotPassword.js';
+export type { ForgotPasswordProps } from './views/ForgotPassword.js';
+export { ResetPassword } from './views/ResetPassword.js';
+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

@@ -19,6 +19,9 @@ import {
   PanelTop,
   PanelBottom,
   Layers,
+  Code2,
+  LayoutTemplate,
+  Library,
 } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react';
 
@@ -253,9 +256,13 @@ 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 },
+    { path: '/script-tags', label: 'Script Tags', icon: Code2 },
     { path: '/users', label: 'Users', icon: Users },
     { path: '/settings', label: 'Settings', icon: Settings },
   );

package/src/views/ForgotPassword.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+import { useState, type FormEvent } from 'react';
+import { Shield, ArrowLeft, Loader2, CheckCircle2, AlertTriangle } from 'lucide-react';
+import { cmsApi } from '../lib/api.js';
+
+export interface ForgotPasswordProps {
+  onNavigate: (path: string) => void;
+}
+
+export function ForgotPassword({ onNavigate }: ForgotPasswordProps) {
+  const [email, setEmail] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [sent, setSent] = useState(false);
+  const [error, setError] = useState('');
+
+  const canSubmit = email.trim() && !submitting;
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    if (!canSubmit) return;
+
+    setError('');
+    setSubmitting(true);
+
+    try {
+      const result = await cmsApi('/auth/forgot-password', {
+        method: 'POST',
+        body: JSON.stringify({ email: email.trim() }),
+      });
+
+      if (result.error && result.status === 429) {
+        setError('Too many requests. Please try again later.');
+      } else {
+        setSent(true);
+      }
+    } catch {
+      setError('An unexpected error occurred. Please try again.');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 px-4">
+      <div className="w-full max-w-md">
+        <div className="text-center mb-8">
+          <div className="mx-auto mb-4 w-14 h-14 bg-blue-600 rounded-xl flex items-center justify-center">
+            <Shield className="w-7 h-7 text-white" />
+          </div>
+          <h1 className="text-2xl font-bold text-gray-900">Reset Password</h1>
+          <p className="text-gray-600 mt-2">
+            {sent
+              ? 'Check your inbox for a reset link'
+              : "Enter your email and we'll send you a reset link"}
+          </p>
+        </div>
+
+        <div className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm space-y-5">
+          {sent ? (
+            <div className="text-center space-y-4">
+              <div className="mx-auto w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
+                <CheckCircle2 className="w-6 h-6 text-green-600" />
+              </div>
+              <p className="text-sm text-gray-600">
+                If an account exists for <strong>{email}</strong>, you will receive a password reset email shortly.
+              </p>
+              <p className="text-xs text-gray-500">
+                The link expires in 1 hour. Check your spam folder if you don't see it.
+              </p>
+              <button
+                type="button"
+                onClick={() => onNavigate('/login')}
+                className="w-full py-2.5 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors"
+              >
+                Back to Sign In
+              </button>
+            </div>
+          ) : (
+            <form onSubmit={handleSubmit} className="space-y-5">
+              {error && (
+                <div className="flex items-start gap-3 p-3 bg-red-50 border border-red-200 rounded-lg">
+                  <AlertTriangle className="w-5 h-5 text-red-600 mt-0.5 shrink-0" />
+                  <p className="text-sm text-red-800">{error}</p>
+                </div>
+              )}
+
+              <div>
+                <label htmlFor="forgot-email" className="block text-sm font-medium text-gray-700 mb-1.5">
+                  Email Address
+                </label>
+                <input
+                  id="forgot-email"
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder="admin@example.com"
+                  className="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  required
+                  autoFocus
+                  autoComplete="email"
+                />
+              </div>
+
+              <button
+                type="submit"
+                disabled={!canSubmit}
+                className="w-full py-2.5 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+              >
+                {submitting ? (
+                  <>
+                    <Loader2 className="w-4 h-4 animate-spin" />
+                    Sending...
+                  </>
+                ) : (
+                  'Send Reset Link'
+                )}
+              </button>
+            </form>
+          )}
+
+          {!sent && (
+            <button
+              type="button"
+              onClick={() => onNavigate('/login')}
+              className="w-full flex items-center justify-center gap-2 text-sm text-gray-600 hover:text-gray-800 transition-colors"
+            >
+              <ArrowLeft className="w-4 h-4" />
+              Back to Sign In
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}