@actuate-media/cms-admin 0.4.0 → 0.7.0

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

@@ -0,0 +1,64 @@
+'use client';
+
+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;
+}
+
+const DEVICE_LABELS: Record<DeviceMode, string> = {
+  desktop: '100%',
+  tablet: '768px',
+  mobile: '375px',
+};
+
+export function BottomBar({
+  deviceMode,
+  showGridOverlay,
+  onAddSection,
+  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">
+      {/* Add Section */}
+      <button
+        onClick={onAddSection}
+        className="flex items-center gap-1.5 px-3 py-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+        aria-label="Add a new section"
+      >
+        <Plus size={14} />
+        <span>Add Section</span>
+      </button>
+
+      {/* Divider */}
+      <div className="w-px h-5 bg-border" />
+
+      {/* Grid overlay toggle */}
+      <label className="flex items-center gap-2 cursor-pointer">
+        <Grid3X3 size={14} className="text-muted-foreground" />
+        <Switch.Root
+          checked={showGridOverlay}
+          onCheckedChange={onToggleGrid}
+          className="w-8 h-[18px] bg-input-background rounded-full relative data-[state=checked]:bg-primary transition-colors"
+          aria-label="Toggle grid overlay"
+        >
+          <Switch.Thumb className="block w-3.5 h-3.5 bg-background rounded-full shadow-sm transition-transform translate-x-0.5 data-[state=checked]:translate-x-[14px]" />
+        </Switch.Root>
+        <span className="text-xs text-muted-foreground">Grid</span>
+      </label>
+
+      {/* Spacer */}
+      <div className="flex-1" />
+
+      {/* Zoom / device width display */}
+      <span className="text-xs text-muted-foreground tabular-nums">
+        {DEVICE_LABELS[deviceMode]}
+      </span>
+    </div>
+  );
+}

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

@@ -0,0 +1,218 @@
+'use client';
+
+import {
+  ChevronLeft,
+  Undo2,
+  Redo2,
+  Monitor,
+  Tablet,
+  Smartphone,
+  Loader2,
+  Sparkles,
+} 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;
+}
+
+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,
+  pageSettings,
+  status,
+  dirty,
+  saving,
+  canUndo,
+  canRedo,
+  deviceMode,
+  onNavigate,
+  onTitleChange,
+  onUndo,
+  onRedo,
+  onDeviceMode,
+  onSave,
+  onPublish,
+  onOpenAI,
+}: BuilderToolbarProps) {
+  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">
+      {/* Back button */}
+      <button
+        onClick={() => onNavigate(`/collections/${collectionSlug}`)}
+        className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
+        aria-label={`Back to ${collectionLabel}`}
+      >
+        <ChevronLeft size={16} />
+        <span className="hidden sm:inline">{collectionLabel}</span>
+      </button>
+
+      {/* Divider */}
+      <div className="w-px h-6 bg-border" />
+
+      {/* Page title */}
+      <input
+        type="text"
+        value={pageSettings.title}
+        onChange={(e) => onTitleChange(e.target.value)}
+        placeholder="Untitled Page"
+        className="flex-1 min-w-0 text-sm font-medium text-foreground bg-transparent border-none outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm placeholder:text-muted-foreground"
+        aria-label="Page title"
+      />
+
+      {/* Status badge */}
+      <span
+        className={`text-xs font-medium px-2 py-0.5 rounded-md whitespace-nowrap ${STATUS_STYLES[status] ?? STATUS_STYLES.DRAFT}`}
+      >
+        {status}
+      </span>
+
+      {/* Unsaved indicator */}
+      {dirty && !saving && (
+        <span
+          className="w-2 h-2 rounded-full bg-destructive shrink-0"
+          title="Unsaved changes"
+          aria-label="Unsaved changes"
+        />
+      )}
+
+      {/* Divider */}
+      <div className="w-px h-6 bg-border" />
+
+      {/* Undo / Redo */}
+      <div className="flex items-center gap-1">
+        <button
+          onClick={onUndo}
+          disabled={!canUndo}
+          className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-30 disabled:pointer-events-none transition-colors"
+          aria-label="Undo"
+        >
+          <Undo2 size={16} />
+        </button>
+        <button
+          onClick={onRedo}
+          disabled={!canRedo}
+          className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-30 disabled:pointer-events-none transition-colors"
+          aria-label="Redo"
+        >
+          <Redo2 size={16} />
+        </button>
+      </div>
+
+      {/* Divider */}
+      <div className="w-px h-6 bg-border" />
+
+      {/* Device toggle */}
+      <div className="flex items-center gap-0.5 bg-muted rounded-md p-0.5">
+        <DeviceButton
+          active={deviceMode === 'desktop'}
+          onClick={() => onDeviceMode('desktop')}
+          label="Desktop view"
+        >
+          <Monitor size={16} />
+        </DeviceButton>
+        <DeviceButton
+          active={deviceMode === 'tablet'}
+          onClick={() => onDeviceMode('tablet')}
+          label="Tablet view"
+        >
+          <Tablet size={16} />
+        </DeviceButton>
+        <DeviceButton
+          active={deviceMode === 'mobile'}
+          onClick={() => onDeviceMode('mobile')}
+          label="Mobile view"
+        >
+          <Smartphone size={16} />
+        </DeviceButton>
+      </div>
+
+      {/* Divider */}
+      <div className="w-px h-6 bg-border" />
+
+      {/* AI Generate */}
+      {onOpenAI && (
+        <>
+          <button
+            onClick={onOpenAI}
+            className="flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-medium text-primary bg-primary/10 rounded-md hover:bg-primary/20 transition-colors"
+            aria-label="Generate page with AI"
+          >
+            <Sparkles size={14} />
+            <span className="hidden sm:inline">AI</span>
+          </button>
+          <div className="w-px h-6 bg-border" />
+        </>
+      )}
+
+      {/* Save / Publish */}
+      <div className="flex items-center gap-2">
+        <button
+          onClick={onSave}
+          disabled={saving || !dirty}
+          className="bg-muted text-muted-foreground rounded-md px-3 py-1.5 text-sm font-medium hover:bg-muted/80 disabled:opacity-50 disabled:pointer-events-none transition-colors flex items-center gap-1.5"
+        >
+          {saving && <Loader2 size={14} className="animate-spin" />}
+          {saving ? 'Saving...' : 'Save'}
+        </button>
+        <button
+          onClick={onPublish}
+          disabled={saving}
+          className="bg-primary text-primary-foreground rounded-md px-3 py-1.5 text-sm font-medium hover:bg-primary/90 disabled:opacity-50 disabled:pointer-events-none transition-colors"
+        >
+          Publish
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function DeviceButton({
+  active,
+  onClick,
+  label,
+  children,
+}: {
+  active: boolean;
+  onClick: () => void;
+  label: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={`p-1.5 rounded-md transition-colors ${
+        active
+          ? 'bg-background text-foreground shadow-sm'
+          : 'text-muted-foreground hover:text-foreground'
+      }`}
+      aria-label={label}
+      aria-pressed={active}
+    >
+      {children}
+    </button>
+  );
+}

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

@@ -0,0 +1,145 @@
+'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';
+
+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;
+}
+
+type TabDef = {
+  value: 'block' | 'node' | 'page' | 'seo' | 'design';
+  label: string;
+  icon: typeof Blocks;
+};
+
+const TABS: TabDef[] = [
+  { value: 'block', label: 'Block', icon: Blocks },
+  { value: 'node', label: 'Node', icon: Settings2 },
+  { value: 'page', label: 'Page', icon: FileText },
+  { value: 'seo', label: 'SEO', icon: Search },
+  { value: 'design', label: 'Design', icon: Palette },
+];
+
+export function ContextPanel({
+  activeTab,
+  onTabChange,
+  selectedNode,
+  tree,
+  pageSettings,
+  onUpdateSettings,
+  onUpdateBlock,
+  onRemoveNode,
+  onDuplicateNode,
+  onMoveNodeUp,
+  onMoveNodeDown,
+  onPageSettingsChange,
+  onAddRow,
+  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]);
+
+  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]);
+
+  return (
+    <div className="w-full h-full bg-card overflow-y-auto">
+      <Tabs.Root
+        value={effectiveTab}
+        onValueChange={(value) => onTabChange(value as ContextPanelProps['activeTab'])}
+      >
+        <Tabs.List className="flex border-b border-border bg-muted/30">
+          {availableTabs.map((tab) => {
+            const Icon = tab.icon;
+            return (
+              <Tabs.Trigger
+                key={tab.value}
+                value={tab.value}
+                className="flex-1 flex items-center justify-center gap-1.5 px-2 py-2.5 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground data-[state=active]:text-foreground data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-background"
+              >
+                <Icon size={14} />
+                <span>{tab.label}</span>
+              </Tabs.Trigger>
+            );
+          })}
+        </Tabs.List>
+
+        <Tabs.Content value="block">
+          {selectedNode?.type === 'block' && (
+            <BlockEditor
+              node={selectedNode}
+              onUpdateBlock={onUpdateBlock}
+              onUpdateSettings={onUpdateSettings}
+              onRemoveNode={onRemoveNode}
+              onDuplicateNode={onDuplicateNode}
+              config={config}
+            />
+          )}
+        </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}
+            />
+          )}
+        </Tabs.Content>
+
+        <Tabs.Content value="page">
+          <PageSettingsEditor
+            settings={pageSettings}
+            onChange={onPageSettingsChange}
+          />
+        </Tabs.Content>
+
+        <Tabs.Content value="seo">
+          <BuilderSEOPanel
+            tree={tree}
+            pageSettings={pageSettings}
+            onPageSettingsChange={onPageSettingsChange}
+            selectedNodeId={selectedNode?.id ?? null}
+          />
+        </Tabs.Content>
+
+        <Tabs.Content value="design">
+          <DesignScorePanel tree={tree} />
+        </Tabs.Content>
+      </Tabs.Root>
+    </div>
+  );
+}

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

@@ -0,0 +1,258 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import { analyzeDesign } from '@actuate-media/cms-core';
+import type {
+  PageNode,
+  DesignAnalysis,
+  DesignCategory,
+  BuilderDesignCheck,
+  DesignSuggestion,
+} from '@actuate-media/cms-core';
+import {
+  CheckCircle2,
+  AlertCircle,
+  XCircle,
+  ChevronDown,
+  ChevronUp,
+  Lightbulb,
+  Palette,
+} from 'lucide-react';
+
+export interface DesignScorePanelProps {
+  tree: PageNode;
+}
+
+function getScoreColor(score: number, max: number): string {
+  const ratio = max > 0 ? score / max : 0;
+  if (ratio >= 0.8) return 'text-green-500';
+  if (ratio >= 0.5) return 'text-amber-500';
+  return 'text-red-500';
+}
+
+function getBarColor(score: number, max: number): string {
+  const ratio = max > 0 ? score / max : 0;
+  if (ratio >= 0.8) return 'bg-green-500';
+  if (ratio >= 0.5) return 'bg-amber-500';
+  return 'bg-red-500';
+}
+
+function getScoreLabel(score: number): string {
+  if (score >= 80) return 'Excellent';
+  if (score >= 65) return 'Good';
+  if (score >= 50) return 'Needs Work';
+  return 'Poor';
+}
+
+function getRingStrokeColor(score: number): string {
+  if (score >= 80) return 'rgb(34, 197, 94)';
+  if (score >= 50) return 'rgb(245, 158, 11)';
+  return 'rgb(239, 68, 68)';
+}
+
+function StatusIcon({ status }: { status: BuilderDesignCheck['status'] }) {
+  switch (status) {
+    case 'good':
+      return <CheckCircle2 size={14} className="text-green-500 shrink-0" />;
+    case 'warning':
+      return <AlertCircle size={14} className="text-amber-500 shrink-0" />;
+    case 'error':
+      return <XCircle size={14} className="text-red-500 shrink-0" />;
+  }
+}
+
+function SeverityBadge({ severity }: { severity: DesignSuggestion['severity'] }) {
+  const classes: Record<DesignSuggestion['severity'], string> = {
+    important: 'bg-red-100 text-red-700',
+    suggestion: 'bg-amber-100 text-amber-700',
+    info: 'bg-blue-100 text-blue-700',
+  };
+
+  return (
+    <span className={`inline-block px-1.5 py-0.5 rounded text-xs font-medium ${classes[severity]}`}>
+      {severity}
+    </span>
+  );
+}
+
+function ScoreRing({ score }: { score: number }) {
+  const radius = 32;
+  const strokeWidth = 6;
+  const circumference = 2 * Math.PI * radius;
+  const progress = Math.min(score, 100) / 100;
+  const dashOffset = circumference * (1 - progress);
+  const size = (radius + strokeWidth) * 2;
+
+  return (
+    <div className="flex flex-col items-center gap-2">
+      <div className="relative">
+        <svg
+          width={size}
+          height={size}
+          viewBox={`0 0 ${size} ${size}`}
+          className="-rotate-90"
+        >
+          <circle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            fill="none"
+            stroke="var(--border)"
+            strokeWidth={strokeWidth}
+          />
+          <circle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            fill="none"
+            stroke={getRingStrokeColor(score)}
+            strokeWidth={strokeWidth}
+            strokeDasharray={circumference}
+            strokeDashoffset={dashOffset}
+            strokeLinecap="round"
+            className="transition-all duration-700 ease-out"
+          />
+        </svg>
+        <div className="absolute inset-0 flex items-center justify-center">
+          <span className={`text-lg font-medium ${getScoreColor(score, 100)}`}>
+            {score}
+          </span>
+        </div>
+      </div>
+      <span className="text-xs text-muted-foreground">{getScoreLabel(score)}</span>
+    </div>
+  );
+}
+
+function CategoryRow({
+  category,
+  expanded,
+  onToggle,
+}: {
+  category: DesignCategory;
+  expanded: boolean;
+  onToggle: () => void;
+}) {
+  const percentage = category.maxScore > 0 ? (category.score / category.maxScore) * 100 : 0;
+
+  return (
+    <div className="border-b border-border last:border-b-0">
+      <button
+        type="button"
+        className="w-full text-left px-4 py-3 flex flex-col gap-2 hover:bg-muted/50 transition-colors"
+        onClick={onToggle}
+        aria-expanded={expanded}
+      >
+        <div className="flex items-center justify-between">
+          <span className="text-xs font-medium text-foreground">{category.label}</span>
+          <div className="flex items-center gap-2">
+            <span className="text-xs text-muted-foreground">
+              {category.score}/{category.maxScore}
+            </span>
+            {expanded ? (
+              <ChevronUp size={14} className="text-muted-foreground" />
+            ) : (
+              <ChevronDown size={14} className="text-muted-foreground" />
+            )}
+          </div>
+        </div>
+        <div className="w-full h-1.5 rounded-full bg-muted overflow-hidden">
+          <div
+            className={`h-full rounded-full transition-all duration-500 ease-out ${getBarColor(category.score, category.maxScore)}`}
+            style={{ width: `${percentage}%` }}
+          />
+        </div>
+      </button>
+
+      {expanded && category.checks.length > 0 && (
+        <div className="px-4 pb-3 flex flex-col gap-2">
+          {category.checks.map((check) => (
+            <div key={check.id} className="flex items-start gap-2 pl-1">
+              <StatusIcon status={check.status} />
+              <div className="flex flex-col">
+                <span className="text-xs font-medium text-foreground">{check.label}</span>
+                <span className="text-xs text-muted-foreground">{check.detail}</span>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function SuggestionsList({ suggestions }: { suggestions: DesignSuggestion[] }) {
+  const sorted = useMemo(() => {
+    const order: Record<DesignSuggestion['severity'], number> = {
+      important: 0,
+      suggestion: 1,
+      info: 2,
+    };
+    return [...suggestions].sort((a, b) => order[a.severity] - order[b.severity]);
+  }, [suggestions]);
+
+  if (sorted.length === 0) return null;
+
+  return (
+    <div className="px-4 py-3 border-t border-border">
+      <div className="flex items-center gap-2 mb-3">
+        <Lightbulb size={14} className="text-muted-foreground" />
+        <span className="text-xs font-medium text-foreground">Suggestions</span>
+      </div>
+      <div className="flex flex-col gap-2.5">
+        {sorted.map((suggestion) => (
+          <div key={suggestion.id} className="flex items-start gap-2">
+            <SeverityBadge severity={suggestion.severity} />
+            <span className="text-xs text-muted-foreground leading-relaxed">
+              {suggestion.message}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function DesignScorePanel({ tree }: DesignScorePanelProps) {
+  const analysis = useMemo(() => analyzeDesign(tree), [tree]);
+  const [expandedCategories, setExpandedCategories] = useState<string[]>([]);
+
+  const toggleCategory = (name: string) => {
+    setExpandedCategories((prev) =>
+      prev.includes(name) ? prev.filter((n) => n !== name) : [...prev, name]
+    );
+  };
+
+  if (!tree.children || tree.children.length === 0) {
+    return (
+      <div className="p-6 flex flex-col items-center justify-center text-center min-h-[200px]">
+        <Palette size={32} className="text-muted-foreground mb-3" />
+        <p className="text-sm font-medium text-foreground mb-1">Design Score</p>
+        <p className="text-xs text-muted-foreground">
+          Add sections to your page to see the design analysis
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col">
+      <div className="flex flex-col items-center py-5 border-b border-border">
+        <ScoreRing score={analysis.score} />
+      </div>
+
+      <div className="flex flex-col">
+        {analysis.categories.map((category) => (
+          <CategoryRow
+            key={category.name}
+            category={category}
+            expanded={expandedCategories.includes(category.name)}
+            onToggle={() => toggleCategory(category.name)}
+          />
+        ))}
+      </div>
+
+      <SuggestionsList suggestions={analysis.suggestions} />
+    </div>
+  );
+}