@actuate-media/cms-admin 0.8.0 → 0.8.2

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

@@ -1,51 +1,46 @@
-'use client';
+'use client'
 
-import { useState, useEffect, useCallback } from 'react';
-import { Loader2, AlertTriangle } from 'lucide-react';
-import { toast } from 'sonner';
-import { cmsApi } from '../../lib/api.js';
-import { ErrorBoundary } from '../../components/ErrorBoundary.js';
+import { useState, useEffect, useCallback } from 'react'
+import { Loader2, AlertTriangle } from 'lucide-react'
+import { toast } from 'sonner'
+import { cmsApi } from '../../lib/api.js'
+import { ErrorBoundary } from '../../components/ErrorBoundary.js'
 import {
   useBuilderState,
   type BuilderState,
   type BuilderActions,
   type PageSettings,
-} from '../../hooks/useBuilderState.js';
-import type { PageNode } from '@actuate-media/cms-core';
-import { BuilderToolbar } from './BuilderToolbar.js';
-import { BottomBar } from './BottomBar.js';
-import { BuilderCanvas } from './canvas/index.js';
-import { ContextPanel } from './ContextPanel.js';
-import { AIGenerateDialog } from './AIGenerateDialog.js';
+} from '../../hooks/useBuilderState.js'
+import type { PageNode } from '@actuate-media/cms-core'
+import { BuilderToolbar } from './BuilderToolbar.js'
+import { BottomBar } from './BottomBar.js'
+import { BuilderCanvas } from './canvas/index.js'
+import { ContextPanel } from './ContextPanel.js'
+import { AIGenerateDialog } from './AIGenerateDialog.js'
 
 export interface PageBuilderProps {
-  documentId?: string;
-  collectionSlug: string;
-  config: any;
-  onNavigate: (path: string) => void;
+  documentId?: string
+  collectionSlug: string
+  config: any
+  onNavigate: (path: string) => void
 }
 
-type DocumentStatus = 'DRAFT' | 'PUBLISHED' | 'SCHEDULED';
+type DocumentStatus = 'DRAFT' | 'PUBLISHED' | 'SCHEDULED'
 
 const DEVICE_WIDTHS = {
   desktop: '100%',
   tablet: '768px',
   mobile: '375px',
-} as const;
+} as const
 
-export function PageBuilder({
-  documentId,
-  collectionSlug,
-  config,
-  onNavigate,
-}: PageBuilderProps) {
-  const [loading, setLoading] = useState(!!documentId);
-  const [loadError, setLoadError] = useState<string | null>(null);
-  const [saving, setSaving] = useState(false);
-  const [status, setStatus] = useState<DocumentStatus>('DRAFT');
-  const [aiDialogOpen, setAiDialogOpen] = useState(false);
+export function PageBuilder({ documentId, collectionSlug, config, onNavigate }: PageBuilderProps) {
+  const [loading, setLoading] = useState(!!documentId)
+  const [loadError, setLoadError] = useState<string | null>(null)
+  const [saving, setSaving] = useState(false)
+  const [status, setStatus] = useState<DocumentStatus>('DRAFT')
+  const [aiDialogOpen, setAiDialogOpen] = useState(false)
 
-  const builder = useBuilderState();
+  const builder = useBuilderState()
   const {
     tree,
     pageSettings,
@@ -77,117 +72,122 @@ export function PageBuilder({
     redo,
     markClean,
     replaceTree,
-  } = builder;
+  } = builder
 
   useEffect(() => {
     if (!documentId) {
-      setLoading(false);
-      return;
+      setLoading(false)
+      return
     }
 
-    let cancelled = false;
+    let cancelled = false
 
     async function loadDocument() {
-      const res = await cmsApi<any>(`/collections/${collectionSlug}/${documentId}`);
+      const res = await cmsApi<any>(`/collections/${collectionSlug}/${documentId}`)
 
-      if (cancelled) return;
+      if (cancelled) return
 
       if (res.error) {
-        setLoadError(res.error);
-        setLoading(false);
-        return;
+        setLoadError(res.error)
+        setLoading(false)
+        return
       }
 
-      const doc = res.data;
+      const doc = res.data
       if (doc?.layout) {
-        replaceTree(doc.layout as PageNode);
-        markClean();
+        replaceTree(doc.layout as PageNode)
+        markClean()
       }
       if (doc?.pageSettings) {
-        setPageSettings(doc.pageSettings);
+        setPageSettings(doc.pageSettings)
       }
       if (doc?.status) {
-        setStatus(doc.status as DocumentStatus);
+        setStatus(doc.status as DocumentStatus)
       }
       if (doc?.title) {
-        setPageSettings({ title: doc.title });
+        setPageSettings({ title: doc.title })
       }
 
-      setLoading(false);
+      setLoading(false)
     }
 
-    loadDocument();
-    return () => { cancelled = true; };
-  }, [documentId, collectionSlug]);
+    loadDocument()
+    return () => {
+      cancelled = true
+    }
+  }, [documentId, collectionSlug])
 
   const handleSave = useCallback(async () => {
-    setSaving(true);
+    setSaving(true)
     const body = JSON.stringify({
       layout: tree,
       pageSettings,
       title: pageSettings.title,
       slug: pageSettings.slug,
-    });
+    })
 
     const endpoint = documentId
       ? `/collections/${collectionSlug}/${documentId}`
-      : `/collections/${collectionSlug}`;
-    const method = documentId ? 'PUT' : 'POST';
+      : `/collections/${collectionSlug}`
+    const method = documentId ? 'PUT' : 'POST'
 
-    const res = await cmsApi(endpoint, { method, body });
-    setSaving(false);
+    const res = await cmsApi(endpoint, { method, body })
+    setSaving(false)
 
     if (res.error) {
-      toast.error(res.error);
+      toast.error(res.error)
     } else {
-      markClean();
-      toast.success('Page saved');
+      markClean()
+      toast.success('Page saved')
       if (!documentId && (res.data as any)?.id) {
-        onNavigate(`/pages/${(res.data as any).id}/builder`);
+        onNavigate(`/pages/${(res.data as any).id}/builder`)
       }
     }
-  }, [tree, pageSettings, documentId, collectionSlug, markClean, onNavigate]);
+  }, [tree, pageSettings, documentId, collectionSlug, markClean, onNavigate])
 
   const handlePublish = useCallback(async () => {
-    setSaving(true);
+    setSaving(true)
     const body = JSON.stringify({
       layout: tree,
       pageSettings,
       title: pageSettings.title,
       slug: pageSettings.slug,
       status: 'PUBLISHED',
-    });
+    })
 
     const endpoint = documentId
       ? `/collections/${collectionSlug}/${documentId}`
-      : `/collections/${collectionSlug}`;
-    const method = documentId ? 'PUT' : 'POST';
+      : `/collections/${collectionSlug}`
+    const method = documentId ? 'PUT' : 'POST'
 
-    const res = await cmsApi(endpoint, { method, body });
-    setSaving(false);
+    const res = await cmsApi(endpoint, { method, body })
+    setSaving(false)
 
     if (res.error) {
-      toast.error(res.error);
+      toast.error(res.error)
     } else {
-      markClean();
-      setStatus('PUBLISHED');
-      toast.success('Page published');
+      markClean()
+      setStatus('PUBLISHED')
+      toast.success('Page published')
       if (!documentId && (res.data as any)?.id) {
-        onNavigate(`/pages/${(res.data as any).id}/builder`);
+        onNavigate(`/pages/${(res.data as any).id}/builder`)
       }
     }
-  }, [tree, pageSettings, documentId, collectionSlug, markClean, onNavigate]);
+  }, [tree, pageSettings, documentId, collectionSlug, markClean, onNavigate])
 
-  const handleAIAccept = useCallback((generatedTree: PageNode) => {
-    replaceTree(generatedTree);
-  }, [replaceTree]);
+  const handleAIAccept = useCallback(
+    (generatedTree: PageNode) => {
+      replaceTree(generatedTree)
+    },
+    [replaceTree],
+  )
 
   if (loading) {
     return (
       <div className="h-full flex items-center justify-center bg-background">
         <Loader2 className="animate-spin text-muted-foreground" size={24} />
       </div>
-    );
+    )
   }
 
   if (loadError) {
@@ -201,105 +201,106 @@ export function PageBuilder({
           </div>
         </div>
       </div>
-    );
+    )
   }
 
-  const canvasWidth = DEVICE_WIDTHS[deviceMode];
-  const isConstrained = deviceMode !== 'desktop';
+  const canvasWidth = DEVICE_WIDTHS[deviceMode]
+  const isConstrained = deviceMode !== 'desktop'
 
   // `pageBuilder.previewTheme` lets consumers preview blocks with their
   // brand fonts/colors/radii without baking them into the admin's tokens.
   // We scope the CSS variables to the canvas wrapper so they never leak
   // into the rest of the admin chrome.
-  const previewTheme = config?.pageBuilder?.previewTheme ?? {};
-  const previewStyle: Record<string, string> = {};
-  if (previewTheme.fontFamily) previewStyle['--preview-font-family'] = previewTheme.fontFamily;
-  if (previewTheme.headingFontFamily) previewStyle['--preview-heading-font-family'] = previewTheme.headingFontFamily;
-  if (previewTheme.primaryColor) previewStyle['--preview-primary'] = previewTheme.primaryColor;
-  if (previewTheme.secondaryColor) previewStyle['--preview-secondary'] = previewTheme.secondaryColor;
-  if (previewTheme.borderRadius) previewStyle['--preview-radius'] = previewTheme.borderRadius;
+  const previewTheme = config?.pageBuilder?.previewTheme ?? {}
+  const previewStyle: Record<string, string> = {}
+  if (previewTheme.fontFamily) previewStyle['--preview-font-family'] = previewTheme.fontFamily
+  if (previewTheme.headingFontFamily)
+    previewStyle['--preview-heading-font-family'] = previewTheme.headingFontFamily
+  if (previewTheme.primaryColor) previewStyle['--preview-primary'] = previewTheme.primaryColor
+  if (previewTheme.secondaryColor) previewStyle['--preview-secondary'] = previewTheme.secondaryColor
+  if (previewTheme.borderRadius) previewStyle['--preview-radius'] = previewTheme.borderRadius
   const canvasShellStyle: React.CSSProperties = {
     ...previewStyle,
     fontFamily: previewTheme.fontFamily ?? undefined,
-  };
+  }
 
   return (
     <ErrorBoundary>
-    <div className="h-full flex flex-col bg-background overflow-hidden">
-      <BuilderToolbar
-        collectionSlug={collectionSlug}
-        pageSettings={pageSettings}
-        status={status}
-        dirty={dirty}
-        saving={saving}
-        canUndo={canUndo}
-        canRedo={canRedo}
-        deviceMode={deviceMode}
-        onNavigate={onNavigate}
-        onTitleChange={(title) => setPageSettings({ title })}
-        onUndo={undo}
-        onRedo={redo}
-        onDeviceMode={setDeviceMode}
-        onSave={handleSave}
-        onPublish={handlePublish}
-        onOpenAI={() => setAiDialogOpen(true)}
-      />
+      <div className="h-full flex flex-col bg-background overflow-hidden">
+        <BuilderToolbar
+          collectionSlug={collectionSlug}
+          pageSettings={pageSettings}
+          status={status}
+          dirty={dirty}
+          saving={saving}
+          canUndo={canUndo}
+          canRedo={canRedo}
+          deviceMode={deviceMode}
+          onNavigate={onNavigate}
+          onTitleChange={(title) => setPageSettings({ title })}
+          onUndo={undo}
+          onRedo={redo}
+          onDeviceMode={setDeviceMode}
+          onSave={handleSave}
+          onPublish={handlePublish}
+          onOpenAI={() => setAiDialogOpen(true)}
+        />
 
-      <div className="flex-1 flex overflow-hidden">
-        {/* Canvas area */}
-        <div className="flex-1 overflow-auto bg-muted">
-          <div
-            className="mx-auto h-full max-w-full transition-all duration-200"
-            style={{ width: canvasWidth }}
-          >
+        <div className="flex-1 flex overflow-hidden">
+          {/* Canvas area */}
+          <div className="flex-1 overflow-auto bg-muted">
             <div
-              className={`h-full bg-background page-builder-canvas-shell ${isConstrained ? 'shadow-lg border-x border-border' : ''}`}
-              style={canvasShellStyle}
+              className="mx-auto h-full max-w-full transition-all duration-200"
+              style={{ width: canvasWidth }}
             >
-              <BuilderCanvas
-                tree={tree}
-                selectedNodeId={selectedNodeId}
-                showGridOverlay={showGridOverlay}
-                deviceMode={deviceMode}
-                onSelectNode={selectNode}
-              />
+              <div
+                className={`h-full bg-background page-builder-canvas-shell ${isConstrained ? 'shadow-lg border-x border-border' : ''}`}
+                style={canvasShellStyle}
+              >
+                <BuilderCanvas
+                  tree={tree}
+                  selectedNodeId={selectedNodeId}
+                  showGridOverlay={showGridOverlay}
+                  deviceMode={deviceMode}
+                  onSelectNode={selectNode}
+                />
+              </div>
             </div>
           </div>
-        </div>
 
-        {/* Context panel */}
-        <div className="w-[35%] min-w-[280px] max-w-[420px] border-l border-border bg-card overflow-y-auto">
-          <ContextPanel
-            activeTab={activeTab}
-            onTabChange={setActiveTab}
-            selectedNode={selectedNode}
-            tree={tree}
-            pageSettings={pageSettings}
-            onUpdateSettings={updateSettings}
-            onUpdateBlock={updateBlock}
-            onRemoveNode={removeNodeById}
-            onDuplicateNode={duplicateNode}
-            onMoveNodeUp={moveNodeUp}
-            onMoveNodeDown={moveNodeDown}
-            onPageSettingsChange={setPageSettings}
-            onAddRow={addRowToSection}
-            config={config}
-          />
+          {/* Context panel */}
+          <div className="w-[35%] min-w-[280px] max-w-[420px] border-l border-border bg-card overflow-y-auto">
+            <ContextPanel
+              activeTab={activeTab}
+              onTabChange={setActiveTab}
+              selectedNode={selectedNode}
+              tree={tree}
+              pageSettings={pageSettings}
+              onUpdateSettings={updateSettings}
+              onUpdateBlock={updateBlock}
+              onRemoveNode={removeNodeById}
+              onDuplicateNode={duplicateNode}
+              onMoveNodeUp={moveNodeUp}
+              onMoveNodeDown={moveNodeDown}
+              onPageSettingsChange={setPageSettings}
+              onAddRow={addRowToSection}
+              config={config}
+            />
+          </div>
         </div>
-      </div>
 
-      <BottomBar
-        deviceMode={deviceMode}
-        showGridOverlay={showGridOverlay}
-        onAddSection={addSection}
-        onToggleGrid={setShowGridOverlay}
+        <BottomBar
+          deviceMode={deviceMode}
+          showGridOverlay={showGridOverlay}
+          onAddSection={addSection}
+          onToggleGrid={setShowGridOverlay}
+        />
+      </div>
+      <AIGenerateDialog
+        open={aiDialogOpen}
+        onClose={() => setAiDialogOpen(false)}
+        onAccept={handleAIAccept}
       />
-    </div>
-    <AIGenerateDialog
-      open={aiDialogOpen}
-      onClose={() => setAiDialogOpen(false)}
-      onAccept={handleAIAccept}
-    />
     </ErrorBoundary>
-  );
+  )
 }

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

@@ -1,17 +1,18 @@
-'use client';
+'use client'
 
-import { useCallback } from 'react';
-import type { PageSettings } from '../../hooks/useBuilderState.js';
+import { useCallback } from 'react'
+import type { PageSettings } from '../../hooks/useBuilderState.js'
 
 export interface PageSettingsProps {
-  settings: PageSettings;
-  onChange: (settings: Partial<PageSettings>) => void;
+  settings: PageSettings
+  onChange: (settings: Partial<PageSettings>) => void
 }
 
 const INPUT_CLASS =
-  'w-full px-3 py-2 text-sm bg-background border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring';
-const LABEL_CLASS = 'text-sm font-medium text-foreground mb-1 block';
-const SECTION_HEADING_CLASS = 'text-xs font-medium uppercase tracking-wider text-muted-foreground mb-2';
+  'w-full px-3 py-2 text-sm bg-background border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring'
+const LABEL_CLASS = 'text-sm font-medium text-foreground mb-1 block'
+const SECTION_HEADING_CLASS =
+  'text-xs font-medium uppercase tracking-wider text-muted-foreground mb-2'
 
 const SCHEMA_TYPES = [
   'Article',
@@ -24,18 +25,18 @@ const SCHEMA_TYPES = [
   'Recipe',
   'HowTo',
   'BreadcrumbList',
-];
+]
 
 export function PageSettingsEditor({ settings, onChange }: PageSettingsProps) {
   const update = useCallback(
     (key: keyof PageSettings, value: string) => {
-      onChange({ [key]: value });
+      onChange({ [key]: value })
     },
-    [onChange]
-  );
+    [onChange],
+  )
 
-  const metaTitleLength = (settings.metaTitle ?? '').length;
-  const metaDescLength = (settings.metaDescription ?? '').length;
+  const metaTitleLength = (settings.metaTitle ?? '').length
+  const metaDescLength = (settings.metaDescription ?? '').length
 
   return (
     <div className="space-y-4 p-4">
@@ -157,5 +158,5 @@ export function PageSettingsEditor({ settings, onChange }: PageSettingsProps) {
         </select>
       </div>
     </div>
-  );
+  )
 }

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

@@ -1,24 +1,24 @@
-'use client';
+'use client'
 
-import { AlertTriangle, Layers, Loader2, RefreshCw } from 'lucide-react';
-import { useApiData } from '../../lib/useApiData.js';
+import { AlertTriangle, Layers, Loader2, RefreshCw } from 'lucide-react'
+import { useApiData } from '../../lib/useApiData.js'
 
 interface PageTemplate {
-  id: string;
-  name?: string;
-  description?: string | null;
-  category?: string;
-  builtIn?: boolean;
-  updatedAt?: string;
+  id: string
+  name?: string
+  description?: string | null
+  category?: string
+  builtIn?: boolean
+  updatedAt?: string
 }
 
 export interface PageTemplatesProps {
-  onNavigate?: (path: string) => void;
+  onNavigate?: (path: string) => void
 }
 
 export function PageTemplates({ onNavigate }: PageTemplatesProps) {
-  const { data, loading, error, refetch } = useApiData<PageTemplate[]>('/page-templates');
-  const templates = data ?? [];
+  const { data, loading, error, refetch } = useApiData<PageTemplate[]>('/page-templates')
+  const templates = data ?? []
 
   if (loading) {
     return (
@@ -26,7 +26,7 @@ export function PageTemplates({ onNavigate }: PageTemplatesProps) {
         <Loader2 className="h-6 w-6 animate-spin text-primary" />
         <span className="sr-only">Loading page templates</span>
       </div>
-    );
+    )
   }
 
   return (
@@ -83,8 +83,12 @@ export function PageTemplates({ onNavigate }: PageTemplatesProps) {
             <div key={template.id} className="rounded-lg border border-border bg-card p-4">
               <div className="mb-3 flex items-start justify-between gap-3">
                 <div>
-                  <h2 className="text-base font-medium text-foreground">{template.name ?? 'Untitled template'}</h2>
-                  <p className="mt-1 text-sm text-muted-foreground">{template.description ?? 'No description provided.'}</p>
+                  <h2 className="text-base font-medium text-foreground">
+                    {template.name ?? 'Untitled template'}
+                  </h2>
+                  <p className="mt-1 text-sm text-muted-foreground">
+                    {template.description ?? 'No description provided.'}
+                  </p>
                 </div>
                 {template.builtIn && (
                   <span className="rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground">
@@ -94,12 +98,14 @@ export function PageTemplates({ onNavigate }: PageTemplatesProps) {
               </div>
               <div className="flex items-center justify-between text-sm text-muted-foreground">
                 <span>{template.category ?? 'content'}</span>
-                <span>{template.updatedAt ? new Date(template.updatedAt).toLocaleDateString() : ''}</span>
+                <span>
+                  {template.updatedAt ? new Date(template.updatedAt).toLocaleDateString() : ''}
+                </span>
               </div>
             </div>
           ))}
         </div>
       )}
     </div>
-  );
+  )
 }