@prenta/admin 0.92.0

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

@@ -0,0 +1,221 @@
+'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="bg-card border-border flex h-14 shrink-0 items-center gap-3 border-b px-4"
+      role="toolbar"
+      aria-label="Page builder toolbar"
+    >
+      {/* Back button */}
+      <button
+        onClick={() => onNavigate(`/collections/${collectionSlug}`)}
+        className="text-muted-foreground hover:text-foreground flex items-center gap-1 text-sm transition-colors"
+        aria-label={`Back to ${collectionLabel}`}
+      >
+        <ChevronLeft size={16} />
+        <span className="hidden sm:inline">{collectionLabel}</span>
+      </button>
+
+      {/* Divider */}
+      <div className="bg-border h-6 w-px" />
+
+      {/* Page title */}
+      <input
+        type="text"
+        value={pageSettings.title}
+        onChange={(e) => onTitleChange(e.target.value)}
+        placeholder="Untitled Page"
+        className="text-foreground focus-visible:ring-ring placeholder:text-muted-foreground min-w-0 flex-1 rounded-sm border-none bg-transparent text-sm font-medium outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
+        aria-label="Page title"
+      />
+
+      {/* Status badge */}
+      <span
+        className={`rounded-md px-2 py-0.5 text-xs font-medium whitespace-nowrap ${STATUS_STYLES[status] ?? STATUS_STYLES.DRAFT}`}
+      >
+        {status}
+      </span>
+
+      {/* Unsaved indicator */}
+      {dirty && !saving && (
+        <span
+          className="bg-destructive h-2 w-2 shrink-0 rounded-full"
+          title="Unsaved changes"
+          aria-label="Unsaved changes"
+        />
+      )}
+
+      {/* Divider */}
+      <div className="bg-border h-6 w-px" />
+
+      {/* Undo / Redo */}
+      <div className="flex items-center gap-1">
+        <button
+          onClick={onUndo}
+          disabled={!canUndo}
+          className="text-muted-foreground hover:text-foreground hover:bg-muted rounded-md p-1.5 transition-colors disabled:pointer-events-none disabled:opacity-30"
+          aria-label="Undo"
+        >
+          <Undo2 size={16} />
+        </button>
+        <button
+          onClick={onRedo}
+          disabled={!canRedo}
+          className="text-muted-foreground hover:text-foreground hover:bg-muted rounded-md p-1.5 transition-colors disabled:pointer-events-none disabled:opacity-30"
+          aria-label="Redo"
+        >
+          <Redo2 size={16} />
+        </button>
+      </div>
+
+      {/* Divider */}
+      <div className="bg-border h-6 w-px" />
+
+      {/* Device toggle */}
+      <div className="bg-muted flex items-center gap-0.5 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="bg-border h-6 w-px" />
+
+      {/* AI Generate */}
+      {onOpenAI && (
+        <>
+          <button
+            onClick={onOpenAI}
+            className="text-primary bg-primary/10 hover:bg-primary/20 flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-sm font-medium transition-colors"
+            aria-label="Generate page with AI"
+          >
+            <Sparkles size={14} />
+            <span className="hidden sm:inline">AI</span>
+          </button>
+          <div className="bg-border h-6 w-px" />
+        </>
+      )}
+
+      {/* Save / Publish */}
+      <div className="flex items-center gap-2">
+        <button
+          onClick={onSave}
+          disabled={saving || !dirty}
+          className="bg-muted text-muted-foreground hover:bg-muted/80 flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50"
+        >
+          {saving && <Loader2 size={14} className="animate-spin" />}
+          {saving ? 'Saving...' : 'Save'}
+        </button>
+        <button
+          onClick={onPublish}
+          disabled={saving}
+          className="bg-primary text-primary-foreground hover:bg-primary/90 rounded-md px-3 py-1.5 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50"
+        >
+          Publish
+        </button>
+      </div>
+    </div>
+  )
+}
+
+function DeviceButton({
+  active,
+  onClick,
+  label,
+  children,
+}: {
+  active: boolean
+  onClick: () => void
+  label: string
+  children: React.ReactNode
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={`rounded-md p-1.5 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 '@prenta/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="bg-card h-full w-full overflow-y-auto">
+      <Tabs.Root
+        value={effectiveTab}
+        onValueChange={(value) => onTabChange(value as ContextPanelProps['activeTab'])}
+      >
+        <Tabs.List className="border-border bg-muted/30 flex border-b">
+          {availableTabs.map((tab) => {
+            const Icon = tab.icon
+            return (
+              <Tabs.Trigger
+                key={tab.value}
+                value={tab.value}
+                className="text-muted-foreground hover:text-foreground data-[state=active]:text-foreground data-[state=active]:border-primary data-[state=active]:bg-background flex flex-1 items-center justify-center gap-1.5 px-2 py-2.5 text-xs font-medium transition-colors data-[state=active]:border-b-2"
+              >
+                <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,251 @@
+'use client'
+
+import { useState, useMemo } from 'react'
+import { analyzeDesign } from '@prenta/core/page-builder'
+import type {
+  PageNode,
+  DesignAnalysis,
+  DesignCategory,
+  BuilderDesignCheck,
+  DesignSuggestion,
+} from '@prenta/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-success'
+  if (ratio >= 0.5) return 'text-warning'
+  return 'text-destructive'
+}
+
+function getBarColor(score: number, max: number): string {
+  const ratio = max > 0 ? score / max : 0
+  if (ratio >= 0.8) return 'bg-success'
+  if (ratio >= 0.5) return 'bg-warning'
+  return 'bg-destructive'
+}
+
+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-success shrink-0" />
+    case 'warning':
+      return <AlertCircle size={14} className="text-warning shrink-0" />
+    case 'error':
+      return <XCircle size={14} className="text-destructive shrink-0" />
+  }
+}
+
+function SeverityBadge({ severity }: { severity: DesignSuggestion['severity'] }) {
+  const classes: Record<DesignSuggestion['severity'], string> = {
+    important: 'bg-destructive/10 text-destructive',
+    suggestion: 'bg-warning/10 text-warning',
+    info: 'bg-info/10 text-info',
+  }
+
+  return (
+    <span className={`inline-block rounded px-1.5 py-0.5 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-muted-foreground text-xs">{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-border border-b last:border-b-0">
+      <button
+        type="button"
+        className="hover:bg-muted/50 flex w-full flex-col gap-2 px-4 py-3 text-left transition-colors"
+        onClick={onToggle}
+        aria-expanded={expanded}
+      >
+        <div className="flex items-center justify-between">
+          <span className="text-foreground text-xs font-medium">{category.label}</span>
+          <div className="flex items-center gap-2">
+            <span className="text-muted-foreground text-xs">
+              {category.score}/{category.maxScore}
+            </span>
+            {expanded ? (
+              <ChevronUp size={14} className="text-muted-foreground" />
+            ) : (
+              <ChevronDown size={14} className="text-muted-foreground" />
+            )}
+          </div>
+        </div>
+        <div className="bg-muted h-1.5 w-full overflow-hidden rounded-full">
+          <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="flex flex-col gap-2 px-4 pb-3">
+          {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-foreground text-xs font-medium">{check.label}</span>
+                <span className="text-muted-foreground text-xs">{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="border-border border-t px-4 py-3">
+      <div className="mb-3 flex items-center gap-2">
+        <Lightbulb size={14} className="text-muted-foreground" />
+        <span className="text-foreground text-xs font-medium">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-muted-foreground text-xs 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="flex min-h-[200px] flex-col items-center justify-center p-6 text-center">
+        <Palette size={32} className="text-muted-foreground mb-3" />
+        <p className="text-foreground mb-1 text-sm font-medium">Design Score</p>
+        <p className="text-muted-foreground text-xs">
+          Add sections to your page to see the design analysis
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col">
+      <div className="border-border flex flex-col items-center border-b py-5">
+        <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>
+  )
+}