@actuate-media/cms-admin 0.8.0 → 0.8.1

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

@@ -1,7 +1,7 @@
-'use client';
+'use client'
 
-import { useState, useMemo, useRef, useEffect, useCallback } from 'react';
-import * as Dialog from '@radix-ui/react-dialog';
+import { useState, useMemo, useRef, useEffect, useCallback } from 'react'
+import * as Dialog from '@radix-ui/react-dialog'
 import {
   Star,
   Type,
@@ -18,15 +18,15 @@ import {
   ArrowLeft,
   Search,
   Check,
-} from 'lucide-react';
-import type { LucideIcon } from 'lucide-react';
-import { BlockCatalog } from '@actuate-media/cms-core';
-import type { BlockTypeDefinition, VariantDefinition } from '@actuate-media/cms-core';
+} from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+import { BlockCatalog } from '@actuate-media/cms-core'
+import type { BlockTypeDefinition, VariantDefinition } from '@actuate-media/cms-core'
 
 export interface BlockPickerProps {
-  open: boolean;
-  onClose: () => void;
-  onSelect: (blockType: string, variant?: string) => void;
+  open: boolean
+  onClose: () => void
+  onSelect: (blockType: string, variant?: string) => void
 }
 
 const iconMap: Record<string, LucideIcon> = {
@@ -40,88 +40,87 @@ const iconMap: Record<string, LucideIcon> = {
   HelpCircle,
   FileText,
   Code,
-};
+}
 
 function resolveIcon(name: string): LucideIcon {
-  return iconMap[name] ?? Box;
+  return iconMap[name] ?? Box
 }
 
 export function BlockPicker({ open, onClose, onSelect }: BlockPickerProps) {
-  const [search, setSearch] = useState('');
-  const [selectedBlock, setSelectedBlock] = useState<BlockTypeDefinition | null>(null);
-  const searchInputRef = useRef<HTMLInputElement>(null);
-  const variantListRef = useRef<HTMLDivElement>(null);
+  const [search, setSearch] = useState('')
+  const [selectedBlock, setSelectedBlock] = useState<BlockTypeDefinition | null>(null)
+  const searchInputRef = useRef<HTMLInputElement>(null)
+  const variantListRef = useRef<HTMLDivElement>(null)
 
-  const catalog = useMemo(() => new BlockCatalog(), []);
-  const allBlocks = useMemo(() => catalog.getAll(), [catalog]);
+  const catalog = useMemo(() => new BlockCatalog(), [])
+  const allBlocks = useMemo(() => catalog.getAll(), [catalog])
 
   const filteredBlocks = useMemo(() => {
-    if (!search.trim()) return allBlocks;
-    const q = search.toLowerCase();
+    if (!search.trim()) return allBlocks
+    const q = search.toLowerCase()
     return allBlocks.filter(
       (block) =>
         block.label.toLowerCase().includes(q) ||
-        (block.description?.toLowerCase().includes(q) ?? false)
-    );
-  }, [allBlocks, search]);
+        (block.description?.toLowerCase().includes(q) ?? false),
+    )
+  }, [allBlocks, search])
 
   const resetState = useCallback(() => {
-    setSearch('');
-    setSelectedBlock(null);
-  }, []);
+    setSearch('')
+    setSelectedBlock(null)
+  }, [])
 
   useEffect(() => {
     if (open) {
-      resetState();
+      resetState()
     }
-  }, [open, resetState]);
+  }, [open, resetState])
 
   useEffect(() => {
     if (open && !selectedBlock) {
-      const timer = setTimeout(() => searchInputRef.current?.focus(), 50);
-      return () => clearTimeout(timer);
+      const timer = setTimeout(() => searchInputRef.current?.focus(), 50)
+      return () => clearTimeout(timer)
     }
-  }, [open, selectedBlock]);
+  }, [open, selectedBlock])
 
   useEffect(() => {
     if (selectedBlock && variantListRef.current) {
-      const firstButton = variantListRef.current.querySelector<HTMLButtonElement>(
-        'button[data-variant]'
-      );
-      firstButton?.focus();
+      const firstButton =
+        variantListRef.current.querySelector<HTMLButtonElement>('button[data-variant]')
+      firstButton?.focus()
     }
-  }, [selectedBlock]);
+  }, [selectedBlock])
 
   function handleBlockClick(block: BlockTypeDefinition) {
     if (block.variants.length === 1) {
-      onSelect(block.type, block.variants[0]!.name);
-      onClose();
-      return;
+      onSelect(block.type, block.variants[0]!.name)
+      onClose()
+      return
     }
-    setSelectedBlock(block);
+    setSelectedBlock(block)
   }
 
   function handleVariantClick(variant: VariantDefinition) {
-    if (!selectedBlock) return;
-    onSelect(selectedBlock.type, variant.name);
-    onClose();
+    if (!selectedBlock) return
+    onSelect(selectedBlock.type, variant.name)
+    onClose()
   }
 
   function handleBack() {
-    setSelectedBlock(null);
+    setSelectedBlock(null)
   }
 
   function handleKeyDownOnGrid(e: React.KeyboardEvent) {
     if (e.key === 'Escape') {
-      e.stopPropagation();
-      onClose();
+      e.stopPropagation()
+      onClose()
     }
   }
 
   function handleKeyDownOnVariants(e: React.KeyboardEvent) {
     if (e.key === 'Escape') {
-      e.stopPropagation();
-      handleBack();
+      e.stopPropagation()
+      handleBack()
     }
   }
 
@@ -134,7 +133,7 @@ export function BlockPicker({ open, onClose, onSelect }: BlockPickerProps) {
           aria-describedby={undefined}
           onEscapeKeyDown={() => {
             if (selectedBlock) {
-              handleBack();
+              handleBack()
             }
           }}
         >
@@ -160,17 +159,17 @@ export function BlockPicker({ open, onClose, onSelect }: BlockPickerProps) {
         </Dialog.Content>
       </Dialog.Portal>
     </Dialog.Root>
-  );
+  )
 }
 
 interface BlockTypeGridProps {
-  search: string;
-  filteredBlocks: BlockTypeDefinition[];
-  searchInputRef: React.RefObject<HTMLInputElement | null>;
-  onSearchChange: (value: string) => void;
-  onBlockClick: (block: BlockTypeDefinition) => void;
-  onClose: () => void;
-  onKeyDown: (e: React.KeyboardEvent) => void;
+  search: string
+  filteredBlocks: BlockTypeDefinition[]
+  searchInputRef: React.RefObject<HTMLInputElement | null>
+  onSearchChange: (value: string) => void
+  onBlockClick: (block: BlockTypeDefinition) => void
+  onClose: () => void
+  onKeyDown: (e: React.KeyboardEvent) => void
 }
 
 function BlockTypeGrid({
@@ -185,9 +184,7 @@ function BlockTypeGrid({
   return (
     <div className="flex flex-col h-full" onKeyDown={onKeyDown}>
       <div className="flex items-center justify-between gap-3 px-5 pt-5 pb-3">
-        <Dialog.Title className="text-lg font-medium text-foreground">
-          Add Block
-        </Dialog.Title>
+        <Dialog.Title className="text-lg font-medium text-foreground">Add Block</Dialog.Title>
         <Dialog.Close asChild>
           <button
             type="button"
@@ -221,14 +218,12 @@ function BlockTypeGrid({
         {filteredBlocks.length === 0 ? (
           <div className="flex flex-col items-center justify-center py-12 text-center">
             <Search size={24} className="text-muted-foreground mb-2" />
-            <p className="text-sm text-muted-foreground">
-              No blocks match &ldquo;{search}&rdquo;
-            </p>
+            <p className="text-sm text-muted-foreground">No blocks match &ldquo;{search}&rdquo;</p>
           </div>
         ) : (
           <div className="grid grid-cols-2 gap-3" role="list" aria-label="Available block types">
             {filteredBlocks.map((block) => {
-              const Icon = resolveIcon(block.icon);
+              const Icon = resolveIcon(block.icon)
               return (
                 <button
                   key={block.type}
@@ -241,9 +236,7 @@ function BlockTypeGrid({
                     <Icon size={18} />
                   </div>
                   <div className="min-w-0">
-                    <p className="text-sm font-medium text-foreground truncate">
-                      {block.label}
-                    </p>
+                    <p className="text-sm font-medium text-foreground truncate">{block.label}</p>
                     {block.description && (
                       <p className="text-xs text-muted-foreground mt-0.5 line-clamp-2">
                         {block.description}
@@ -251,21 +244,21 @@ function BlockTypeGrid({
                     )}
                   </div>
                 </button>
-              );
+              )
             })}
           </div>
         )}
       </div>
     </div>
-  );
+  )
 }
 
 interface VariantViewProps {
-  block: BlockTypeDefinition;
-  variantListRef: React.RefObject<HTMLDivElement | null>;
-  onBack: () => void;
-  onVariantClick: (variant: VariantDefinition) => void;
-  onKeyDown: (e: React.KeyboardEvent) => void;
+  block: BlockTypeDefinition
+  variantListRef: React.RefObject<HTMLDivElement | null>
+  onBack: () => void
+  onVariantClick: (variant: VariantDefinition) => void
+  onKeyDown: (e: React.KeyboardEvent) => void
 }
 
 function VariantView({
@@ -275,7 +268,7 @@ function VariantView({
   onVariantClick,
   onKeyDown,
 }: VariantViewProps) {
-  const Icon = resolveIcon(block.icon);
+  const Icon = resolveIcon(block.icon)
 
   return (
     <div className="flex flex-col h-full" onKeyDown={onKeyDown}>
@@ -290,16 +283,12 @@ function VariantView({
         </button>
         <div className="flex items-center gap-2 min-w-0">
           <Icon size={18} className="text-foreground shrink-0" />
-          <h2 className="text-lg font-medium text-foreground truncate">
-            {block.label}
-          </h2>
+          <h2 className="text-lg font-medium text-foreground truncate">{block.label}</h2>
         </div>
       </div>
 
       {block.description && (
-        <p className="text-sm text-muted-foreground px-5 pb-3">
-          {block.description}
-        </p>
+        <p className="text-sm text-muted-foreground px-5 pb-3">{block.description}</p>
       )}
 
       <div className="flex-1 overflow-y-auto px-5 pb-5" ref={variantListRef}>
@@ -315,9 +304,7 @@ function VariantView({
             >
               <div className="flex-1 min-w-0">
                 <div className="flex items-center gap-2">
-                  <p className="text-sm font-medium text-foreground">
-                    {variant.label}
-                  </p>
+                  <p className="text-sm font-medium text-foreground">{variant.label}</p>
                   {index === 0 && (
                     <span className="inline-flex items-center gap-1 text-xs text-primary bg-primary/10 px-1.5 py-0.5 rounded">
                       <Check size={10} />
@@ -325,14 +312,12 @@ function VariantView({
                     </span>
                   )}
                 </div>
-                <p className="text-xs text-muted-foreground mt-0.5">
-                  {variant.description}
-                </p>
+                <p className="text-xs text-muted-foreground mt-0.5">{variant.description}</p>
               </div>
             </button>
           ))}
         </div>
       </div>
     </div>
-  );
+  )
 }

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

@@ -1,21 +1,21 @@
-'use client';
+'use client'
 
-import { Plus, Grid3X3 } from 'lucide-react';
-import * as Switch from '@radix-ui/react-switch';
-import type { DeviceMode } from '../../hooks/useBuilderState.js';
+import { Plus, Grid3X3 } from 'lucide-react'
+import * as Switch from '@radix-ui/react-switch'
+import type { DeviceMode } from '../../hooks/useBuilderState.js'
 
 export interface BottomBarProps {
-  deviceMode: DeviceMode;
-  showGridOverlay: boolean;
-  onAddSection: () => void;
-  onToggleGrid: (show: boolean) => void;
+  deviceMode: DeviceMode
+  showGridOverlay: boolean
+  onAddSection: () => void
+  onToggleGrid: (show: boolean) => void
 }
 
 const DEVICE_LABELS: Record<DeviceMode, string> = {
   desktop: '100%',
   tablet: '768px',
   mobile: '375px',
-};
+}
 
 export function BottomBar({
   deviceMode,
@@ -24,7 +24,11 @@ export function BottomBar({
   onToggleGrid,
 }: BottomBarProps) {
   return (
-    <div className="h-10 bg-card border-t border-border flex items-center px-4 gap-4 shrink-0" role="toolbar" aria-label="Builder actions">
+    <div
+      className="h-10 bg-card border-t border-border flex items-center px-4 gap-4 shrink-0"
+      role="toolbar"
+      aria-label="Builder actions"
+    >
       {/* Add Section */}
       <button
         onClick={onAddSection}
@@ -60,5 +64,5 @@ export function BottomBar({
         {DEVICE_LABELS[deviceMode]}
       </span>
     </div>
-  );
+  )
 }

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

@@ -1,4 +1,4 @@
-'use client';
+'use client'
 
 import {
   ChevronLeft,
@@ -9,33 +9,33 @@ import {
   Smartphone,
   Loader2,
   Sparkles,
-} from 'lucide-react';
-import type { DeviceMode, PageSettings } from '../../hooks/useBuilderState.js';
+} from 'lucide-react'
+import type { DeviceMode, PageSettings } from '../../hooks/useBuilderState.js'
 
 export interface BuilderToolbarProps {
-  collectionSlug: string;
-  pageSettings: PageSettings;
-  status: 'DRAFT' | 'PUBLISHED' | 'SCHEDULED';
-  dirty: boolean;
-  saving: boolean;
-  canUndo: boolean;
-  canRedo: boolean;
-  deviceMode: DeviceMode;
-  onNavigate: (path: string) => void;
-  onTitleChange: (title: string) => void;
-  onUndo: () => void;
-  onRedo: () => void;
-  onDeviceMode: (mode: DeviceMode) => void;
-  onSave: () => void;
-  onPublish: () => void;
-  onOpenAI?: () => void;
+  collectionSlug: string
+  pageSettings: PageSettings
+  status: 'DRAFT' | 'PUBLISHED' | 'SCHEDULED'
+  dirty: boolean
+  saving: boolean
+  canUndo: boolean
+  canRedo: boolean
+  deviceMode: DeviceMode
+  onNavigate: (path: string) => void
+  onTitleChange: (title: string) => void
+  onUndo: () => void
+  onRedo: () => void
+  onDeviceMode: (mode: DeviceMode) => void
+  onSave: () => void
+  onPublish: () => void
+  onOpenAI?: () => void
 }
 
 const STATUS_STYLES: Record<string, string> = {
   DRAFT: 'bg-muted text-muted-foreground',
   PUBLISHED: 'bg-primary/10 text-primary',
   SCHEDULED: 'bg-accent text-accent-foreground',
-};
+}
 
 export function BuilderToolbar({
   collectionSlug,
@@ -55,11 +55,14 @@ export function BuilderToolbar({
   onPublish,
   onOpenAI,
 }: BuilderToolbarProps) {
-  const collectionLabel =
-    collectionSlug.charAt(0).toUpperCase() + collectionSlug.slice(1);
+  const collectionLabel = collectionSlug.charAt(0).toUpperCase() + collectionSlug.slice(1)
 
   return (
-    <div className="h-14 bg-card border-b border-border flex items-center px-4 gap-3 shrink-0" role="toolbar" aria-label="Page builder toolbar">
+    <div
+      className="h-14 bg-card border-b border-border flex items-center px-4 gap-3 shrink-0"
+      role="toolbar"
+      aria-label="Page builder toolbar"
+    >
       {/* Back button */}
       <button
         onClick={() => onNavigate(`/collections/${collectionSlug}`)}
@@ -187,7 +190,7 @@ export function BuilderToolbar({
         </button>
       </div>
     </div>
-  );
+  )
 }
 
 function DeviceButton({
@@ -196,10 +199,10 @@ function DeviceButton({
   label,
   children,
 }: {
-  active: boolean;
-  onClick: () => void;
-  label: string;
-  children: React.ReactNode;
+  active: boolean
+  onClick: () => void
+  label: string
+  children: React.ReactNode
 }) {
   return (
     <button
@@ -214,5 +217,5 @@ function DeviceButton({
     >
       {children}
     </button>
-  );
+  )
 }

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

@@ -1,38 +1,38 @@
-'use client';
+'use client'
 
-import { useMemo } from 'react';
-import * as Tabs from '@radix-ui/react-tabs';
-import { Blocks, Settings2, FileText, Search, Palette } from 'lucide-react';
-import type { BuilderNode, PageNode } from '@actuate-media/cms-core';
-import { BlockEditor } from './BlockEditor.js';
-import { NodeSettings } from './NodeSettings.js';
-import { PageSettingsEditor } from './PageSettings.js';
-import { BuilderSEOPanel } from './SEOPanel.js';
-import { DesignScorePanel } from './DesignScore.js';
-import type { PageSettings } from '../../hooks/useBuilderState.js';
+import { useMemo } from 'react'
+import * as Tabs from '@radix-ui/react-tabs'
+import { Blocks, Settings2, FileText, Search, Palette } from 'lucide-react'
+import type { BuilderNode, PageNode } from '@actuate-media/cms-core'
+import { BlockEditor } from './BlockEditor.js'
+import { NodeSettings } from './NodeSettings.js'
+import { PageSettingsEditor } from './PageSettings.js'
+import { BuilderSEOPanel } from './SEOPanel.js'
+import { DesignScorePanel } from './DesignScore.js'
+import type { PageSettings } from '../../hooks/useBuilderState.js'
 
 export interface ContextPanelProps {
-  activeTab: 'block' | 'node' | 'page' | 'seo' | 'design';
-  onTabChange: (tab: 'block' | 'node' | 'page' | 'seo' | 'design') => void;
-  selectedNode: BuilderNode | null;
-  tree: PageNode;
-  pageSettings: PageSettings;
-  onUpdateSettings: (id: string, settings: Record<string, unknown>) => void;
-  onUpdateBlock: (id: string, data: Record<string, unknown>) => void;
-  onRemoveNode: (id: string) => void;
-  onDuplicateNode: (id: string) => void;
-  onMoveNodeUp: (id: string) => void;
-  onMoveNodeDown: (id: string) => void;
-  onPageSettingsChange: (settings: Partial<PageSettings>) => void;
-  onAddRow: (sectionId: string) => void;
-  config: any;
+  activeTab: 'block' | 'node' | 'page' | 'seo' | 'design'
+  onTabChange: (tab: 'block' | 'node' | 'page' | 'seo' | 'design') => void
+  selectedNode: BuilderNode | null
+  tree: PageNode
+  pageSettings: PageSettings
+  onUpdateSettings: (id: string, settings: Record<string, unknown>) => void
+  onUpdateBlock: (id: string, data: Record<string, unknown>) => void
+  onRemoveNode: (id: string) => void
+  onDuplicateNode: (id: string) => void
+  onMoveNodeUp: (id: string) => void
+  onMoveNodeDown: (id: string) => void
+  onPageSettingsChange: (settings: Partial<PageSettings>) => void
+  onAddRow: (sectionId: string) => void
+  config: any
 }
 
 type TabDef = {
-  value: 'block' | 'node' | 'page' | 'seo' | 'design';
-  label: string;
-  icon: typeof Blocks;
-};
+  value: 'block' | 'node' | 'page' | 'seo' | 'design'
+  label: string
+  icon: typeof Blocks
+}
 
 const TABS: TabDef[] = [
   { value: 'block', label: 'Block', icon: Blocks },
@@ -40,7 +40,7 @@ const TABS: TabDef[] = [
   { value: 'page', label: 'Page', icon: FileText },
   { value: 'seo', label: 'SEO', icon: Search },
   { value: 'design', label: 'Design', icon: Palette },
-];
+]
 
 export function ContextPanel({
   activeTab,
@@ -59,17 +59,17 @@ export function ContextPanel({
   config,
 }: ContextPanelProps) {
   const availableTabs = useMemo(() => {
-    if (!selectedNode) return TABS.filter((t) => t.value !== 'block' && t.value !== 'node');
-    if (selectedNode.type === 'block') return TABS.filter((t) => t.value !== 'node');
-    return TABS.filter((t) => t.value !== 'block');
-  }, [selectedNode]);
+    if (!selectedNode) return TABS.filter((t) => t.value !== 'block' && t.value !== 'node')
+    if (selectedNode.type === 'block') return TABS.filter((t) => t.value !== 'node')
+    return TABS.filter((t) => t.value !== 'block')
+  }, [selectedNode])
 
   const effectiveTab = useMemo(() => {
-    if (availableTabs.some((t) => t.value === activeTab)) return activeTab;
-    if (selectedNode?.type === 'block') return 'block';
-    if (selectedNode) return 'node';
-    return 'page';
-  }, [activeTab, availableTabs, selectedNode]);
+    if (availableTabs.some((t) => t.value === activeTab)) return activeTab
+    if (selectedNode?.type === 'block') return 'block'
+    if (selectedNode) return 'node'
+    return 'page'
+  }, [activeTab, availableTabs, selectedNode])
 
   return (
     <div className="w-full h-full bg-card overflow-y-auto">
@@ -79,7 +79,7 @@ export function ContextPanel({
       >
         <Tabs.List className="flex border-b border-border bg-muted/30">
           {availableTabs.map((tab) => {
-            const Icon = tab.icon;
+            const Icon = tab.icon
             return (
               <Tabs.Trigger
                 key={tab.value}
@@ -89,7 +89,7 @@ export function ContextPanel({
                 <Icon size={14} />
                 <span>{tab.label}</span>
               </Tabs.Trigger>
-            );
+            )
           })}
         </Tabs.List>
 
@@ -107,24 +107,24 @@ export function ContextPanel({
         </Tabs.Content>
 
         <Tabs.Content value="node">
-          {selectedNode && selectedNode.type !== 'block' && selectedNode.type !== 'page' && selectedNode.type !== 'savedSectionRef' && (
-            <NodeSettings
-              node={selectedNode}
-              onUpdateSettings={onUpdateSettings}
-              onRemoveNode={onRemoveNode}
-              onDuplicateNode={onDuplicateNode}
-              onMoveNodeUp={onMoveNodeUp}
-              onMoveNodeDown={onMoveNodeDown}
-              onAddRow={selectedNode.type === 'section' ? onAddRow : undefined}
-            />
-          )}
+          {selectedNode &&
+            selectedNode.type !== 'block' &&
+            selectedNode.type !== 'page' &&
+            selectedNode.type !== 'savedSectionRef' && (
+              <NodeSettings
+                node={selectedNode}
+                onUpdateSettings={onUpdateSettings}
+                onRemoveNode={onRemoveNode}
+                onDuplicateNode={onDuplicateNode}
+                onMoveNodeUp={onMoveNodeUp}
+                onMoveNodeDown={onMoveNodeDown}
+                onAddRow={selectedNode.type === 'section' ? onAddRow : undefined}
+              />
+            )}
         </Tabs.Content>
 
         <Tabs.Content value="page">
-          <PageSettingsEditor
-            settings={pageSettings}
-            onChange={onPageSettingsChange}
-          />
+          <PageSettingsEditor settings={pageSettings} onChange={onPageSettingsChange} />
         </Tabs.Content>
 
         <Tabs.Content value="seo">
@@ -141,5 +141,5 @@ export function ContextPanel({
         </Tabs.Content>
       </Tabs.Root>
     </div>
-  );
+  )
 }