@prenta/admin 0.98.1 → 1.1.0

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

@@ -1,221 +0,0 @@
-'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

@@ -1,144 +0,0 @@
-'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}
-          />
-        </Tabs.Content>
-
-        <Tabs.Content value="design">
-          <DesignScorePanel tree={tree} />
-        </Tabs.Content>
-      </Tabs.Root>
-    </div>
-  )
-}

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

@@ -1,251 +0,0 @@
-'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>
-  )
-}