@prenta/admin 0.98.1 → 1.1.0

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

@@ -1,324 +0,0 @@
-'use client'
-
-import { useState, useMemo, useRef, useEffect, useCallback } from 'react'
-import * as Dialog from '@radix-ui/react-dialog'
-import { adminPortalContainer } from '../../lib/portal-container.js'
-import {
-  Star,
-  Type,
-  Image,
-  LayoutGrid,
-  MousePointer,
-  Play,
-  Grid,
-  HelpCircle,
-  FileText,
-  Code,
-  Box,
-  X,
-  ArrowLeft,
-  Search,
-  Check,
-} from 'lucide-react'
-import type { LucideIcon } from 'lucide-react'
-import { BlockCatalog } from '@prenta/core/page-builder'
-import type { BlockTypeDefinition, VariantDefinition } from '@prenta/core'
-
-export interface BlockPickerProps {
-  open: boolean
-  onClose: () => void
-  onSelect: (blockType: string, variant?: string) => void
-}
-
-const iconMap: Record<string, LucideIcon> = {
-  Star,
-  Type,
-  Image,
-  LayoutGrid,
-  MousePointer,
-  Play,
-  Grid,
-  HelpCircle,
-  FileText,
-  Code,
-}
-
-function resolveIcon(name: string): LucideIcon {
-  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 catalog = useMemo(() => new BlockCatalog(), [])
-  const allBlocks = useMemo(() => catalog.getAll(), [catalog])
-
-  const filteredBlocks = useMemo(() => {
-    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])
-
-  const resetState = useCallback(() => {
-    setSearch('')
-    setSelectedBlock(null)
-  }, [])
-
-  useEffect(() => {
-    if (open) {
-      resetState()
-    }
-  }, [open, resetState])
-
-  useEffect(() => {
-    if (open && !selectedBlock) {
-      const timer = setTimeout(() => searchInputRef.current?.focus(), 50)
-      return () => clearTimeout(timer)
-    }
-  }, [open, selectedBlock])
-
-  useEffect(() => {
-    if (selectedBlock && variantListRef.current) {
-      const firstButton =
-        variantListRef.current.querySelector<HTMLButtonElement>('button[data-variant]')
-      firstButton?.focus()
-    }
-  }, [selectedBlock])
-
-  function handleBlockClick(block: BlockTypeDefinition) {
-    if (block.variants.length === 1) {
-      onSelect(block.type, block.variants[0]!.name)
-      onClose()
-      return
-    }
-    setSelectedBlock(block)
-  }
-
-  function handleVariantClick(variant: VariantDefinition) {
-    if (!selectedBlock) return
-    onSelect(selectedBlock.type, variant.name)
-    onClose()
-  }
-
-  function handleBack() {
-    setSelectedBlock(null)
-  }
-
-  function handleKeyDownOnGrid(e: React.KeyboardEvent) {
-    if (e.key === 'Escape') {
-      e.stopPropagation()
-      onClose()
-    }
-  }
-
-  function handleKeyDownOnVariants(e: React.KeyboardEvent) {
-    if (e.key === 'Escape') {
-      e.stopPropagation()
-      handleBack()
-    }
-  }
-
-  return (
-    <Dialog.Root open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
-      <Dialog.Portal container={adminPortalContainer()}>
-        <Dialog.Overlay className="motion-safe:animate-in motion-safe:fade-in-0 fixed inset-0 z-50 bg-black/50" />
-        <Dialog.Content
-          className="bg-card border-border fixed top-1/2 left-1/2 z-50 flex max-h-[80vh] w-full max-w-2xl -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-xl border shadow-2xl"
-          aria-describedby={undefined}
-          onEscapeKeyDown={() => {
-            if (selectedBlock) {
-              handleBack()
-            }
-          }}
-        >
-          {selectedBlock ? (
-            <VariantView
-              block={selectedBlock}
-              variantListRef={variantListRef}
-              onBack={handleBack}
-              onVariantClick={handleVariantClick}
-              onKeyDown={handleKeyDownOnVariants}
-            />
-          ) : (
-            <BlockTypeGrid
-              search={search}
-              filteredBlocks={filteredBlocks}
-              searchInputRef={searchInputRef}
-              onSearchChange={setSearch}
-              onBlockClick={handleBlockClick}
-              onClose={onClose}
-              onKeyDown={handleKeyDownOnGrid}
-            />
-          )}
-        </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
-}
-
-function BlockTypeGrid({
-  search,
-  filteredBlocks,
-  searchInputRef,
-  onSearchChange,
-  onBlockClick,
-  onClose,
-  onKeyDown,
-}: BlockTypeGridProps) {
-  return (
-    <div className="flex h-full flex-col" onKeyDown={onKeyDown}>
-      <div className="flex items-center justify-between gap-3 px-5 pt-5 pb-3">
-        <Dialog.Title className="text-foreground text-lg font-medium">Add Block</Dialog.Title>
-        <Dialog.Close asChild>
-          <button
-            type="button"
-            className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-md p-1.5 transition-colors"
-            aria-label="Close"
-          >
-            <X size={18} />
-          </button>
-        </Dialog.Close>
-      </div>
-
-      <div className="px-5 pb-3">
-        <div className="relative">
-          <Search
-            className="text-muted-foreground pointer-events-none absolute top-1/2 left-3 -translate-y-1/2"
-            size={16}
-          />
-          <input
-            ref={searchInputRef}
-            type="text"
-            placeholder="Search blocks..."
-            value={search}
-            onChange={(e) => onSearchChange(e.target.value)}
-            className="bg-background border-input focus:ring-ring w-full rounded-md border py-2 pr-3 pl-9 text-sm focus:ring-2 focus:outline-none"
-            aria-label="Search block types"
-          />
-        </div>
-      </div>
-
-      <div className="flex-1 overflow-y-auto px-5 pb-5">
-        {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-muted-foreground text-sm">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)
-              return (
-                <button
-                  key={block.type}
-                  type="button"
-                  role="listitem"
-                  onClick={() => onBlockClick(block)}
-                  className="border-border hover:border-primary bg-card group focus:ring-ring flex cursor-pointer items-start gap-3 rounded-lg border p-4 text-left transition-colors focus:ring-2 focus:outline-none"
-                >
-                  <div className="bg-accent text-foreground group-hover:bg-primary/10 group-hover:text-primary flex h-9 w-9 shrink-0 items-center justify-center rounded-md transition-colors">
-                    <Icon size={18} />
-                  </div>
-                  <div className="min-w-0">
-                    <p className="text-foreground truncate text-sm font-medium">{block.label}</p>
-                    {block.description && (
-                      <p className="text-muted-foreground mt-0.5 line-clamp-2 text-xs">
-                        {block.description}
-                      </p>
-                    )}
-                  </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
-}
-
-function VariantView({
-  block,
-  variantListRef,
-  onBack,
-  onVariantClick,
-  onKeyDown,
-}: VariantViewProps) {
-  const Icon = resolveIcon(block.icon)
-
-  return (
-    <div className="flex h-full flex-col" onKeyDown={onKeyDown}>
-      <div className="flex items-center gap-3 px-5 pt-5 pb-3">
-        <button
-          type="button"
-          onClick={onBack}
-          className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-md p-1.5 transition-colors"
-          aria-label="Back to block types"
-        >
-          <ArrowLeft size={18} />
-        </button>
-        <div className="flex min-w-0 items-center gap-2">
-          <Icon size={18} className="text-foreground shrink-0" />
-          <h2 className="text-foreground truncate text-lg font-medium">{block.label}</h2>
-        </div>
-      </div>
-
-      {block.description && (
-        <p className="text-muted-foreground px-5 pb-3 text-sm">{block.description}</p>
-      )}
-
-      <div className="flex-1 overflow-y-auto px-5 pb-5" ref={variantListRef}>
-        <div className="space-y-2" role="list" aria-label={`${block.label} variants`}>
-          {block.variants.map((variant, index) => (
-            <button
-              key={variant.name}
-              type="button"
-              role="listitem"
-              data-variant={variant.name}
-              onClick={() => onVariantClick(variant)}
-              className="border-border hover:border-primary bg-card group focus:ring-ring flex w-full cursor-pointer items-center gap-3 rounded-lg border p-4 text-left transition-colors focus:ring-2 focus:outline-none"
-            >
-              <div className="min-w-0 flex-1">
-                <div className="flex items-center gap-2">
-                  <p className="text-foreground text-sm font-medium">{variant.label}</p>
-                  {index === 0 && (
-                    <span className="text-primary bg-primary/10 inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs">
-                      <Check size={10} />
-                      Default
-                    </span>
-                  )}
-                </div>
-                <p className="text-muted-foreground mt-0.5 text-xs">{variant.description}</p>
-              </div>
-            </button>
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-}

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

@@ -1,65 +0,0 @@
-'use client'
-
-import { Plus, Grid3X3 } from 'lucide-react'
-import { Toggle } from '../../components/ui/Toggle.js'
-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="bg-card border-border flex h-10 shrink-0 items-center gap-4 border-t px-4"
-      role="toolbar"
-      aria-label="Builder actions"
-    >
-      {/* Add Section */}
-      <button
-        onClick={onAddSection}
-        className="text-muted-foreground hover:text-foreground flex items-center gap-1.5 px-3 py-2 text-sm transition-colors"
-        aria-label="Add a new section"
-      >
-        <Plus size={14} />
-        <span>Add Section</span>
-      </button>
-
-      {/* Divider */}
-      <div className="bg-border h-5 w-px" />
-
-      {/* Grid overlay toggle */}
-      <label className="flex cursor-pointer items-center gap-2">
-        <Grid3X3 size={14} className="text-muted-foreground" />
-        <Toggle
-          checked={showGridOverlay}
-          onCheckedChange={onToggleGrid}
-          aria-label="Toggle grid overlay"
-        />
-        <span className="text-muted-foreground text-xs">Grid</span>
-      </label>
-
-      {/* Spacer */}
-      <div className="flex-1" />
-
-      {/* Zoom / device width display */}
-      <span className="text-muted-foreground text-xs tabular-nums">
-        {DEVICE_LABELS[deviceMode]}
-      </span>
-    </div>
-  )
-}

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

@@ -1,304 +0,0 @@
-'use client'
-
-import { useMemo } from 'react'
-import {
-  DndContext,
-  KeyboardSensor,
-  PointerSensor,
-  closestCenter,
-  useSensor,
-  useSensors,
-  type DragEndEvent,
-} from '@dnd-kit/core'
-import {
-  SortableContext,
-  sortableKeyboardCoordinates,
-  useSortable,
-  verticalListSortingStrategy,
-} from '@dnd-kit/sortable'
-import { CSS } from '@dnd-kit/utilities'
-import {
-  Bookmark,
-  Code,
-  FileText,
-  Grid,
-  GripVertical,
-  HelpCircle,
-  Image,
-  LayoutGrid,
-  LayoutTemplate,
-  MousePointer,
-  PanelLeftClose,
-  PanelLeftOpen,
-  Play,
-  Plus,
-  Star,
-  Type,
-  type LucideIcon,
-} from 'lucide-react'
-import { BlockCatalog } from '@prenta/core/page-builder'
-import type { BuilderNode, PageNode } from '@prenta/core'
-
-export interface BuilderSectionsPanelProps {
-  tree: PageNode
-  selectedNodeId: string | null
-  /** Collapsed to a slim rail. State is owned by PageBuilder (persisted). */
-  collapsed: boolean
-  onToggleCollapsed: () => void
-  onSelect: (id: string) => void
-  /** Move a top-level section to `toIndex` within the page. */
-  onReorder: (id: string, toIndex: number) => void
-  onAddSection: () => void
-}
-
-interface SectionEntry {
-  id: string
-  name: string
-  meta: string
-  icon: LucideIcon
-  hidden: boolean
-}
-
-/** Same icon-name → component mapping the BlockPicker uses for the catalog. */
-const BLOCK_ICONS: Record<string, LucideIcon> = {
-  Star,
-  Type,
-  Image,
-  LayoutGrid,
-  MousePointer,
-  Play,
-  Grid,
-  HelpCircle,
-  FileText,
-  Code,
-}
-
-function collectBlockTypes(node: BuilderNode, out: string[]): void {
-  if (node.type === 'block') {
-    out.push(node.settings.blockType)
-    return
-  }
-  if (node.type === 'savedSectionRef') return
-  for (const child of node.children) collectBlockTypes(child, out)
-}
-
-function humanize(type: string): string {
-  return type.charAt(0).toUpperCase() + type.slice(1)
-}
-
-/**
- * Builder sections have no user-facing title, so each row derives its name
- * from the section's first block (via the catalog label) and summarizes its
- * contents as the kind label — enough for the editor to recognize and jump
- * between sections without inventing data we don't store.
- */
-function buildEntries(tree: PageNode, catalog: BlockCatalog): SectionEntry[] {
-  return tree.children.map((node, index) => {
-    if (node.type === 'savedSectionRef') {
-      return {
-        id: node.id,
-        name: 'Saved section',
-        meta: 'From the section library',
-        icon: Bookmark,
-        hidden: false,
-      }
-    }
-    const blockTypes: string[] = []
-    collectBlockTypes(node, blockTypes)
-    const firstType = blockTypes[0]
-    const def = firstType ? catalog.get(firstType) : undefined
-    return {
-      id: node.id,
-      name: def?.label ?? (firstType ? humanize(firstType) : `Section ${index + 1}`),
-      meta:
-        blockTypes.length === 0
-          ? 'Empty section'
-          : `${blockTypes.length} block${blockTypes.length === 1 ? '' : 's'}`,
-      icon: (def && BLOCK_ICONS[def.icon]) ?? LayoutTemplate,
-      hidden: node.settings.visibility === 'hidden',
-    }
-  })
-}
-
-const ICON_BUTTON_CLASS =
-  'flex h-8 w-8 items-center justify-center rounded-[7px] text-[var(--sub)] transition-colors duration-[var(--motion-fast)] hover:bg-[var(--acc-l)] hover:text-[var(--acc)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none'
-
-/**
- * Design-parity left rail for the Page Builder (PageBuilder.html): the page's
- * sections listed in order with drag-to-reorder, click-to-select (which
- * highlights the section on the canvas and opens its settings in the existing
- * right-hand context panel), and an "Add Section" affordance at the bottom.
- */
-export function BuilderSectionsPanel({
-  tree,
-  selectedNodeId,
-  collapsed,
-  onToggleCollapsed,
-  onSelect,
-  onReorder,
-  onAddSection,
-}: BuilderSectionsPanelProps) {
-  const catalog = useMemo(() => new BlockCatalog(), [])
-  const entries = useMemo(() => buildEntries(tree, catalog), [tree, catalog])
-
-  const sensors = useSensors(
-    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
-    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
-  )
-
-  function handleDragEnd(event: DragEndEvent) {
-    const { active, over } = event
-    if (!over || active.id === over.id) return
-    const ids = entries.map((e) => e.id)
-    const to = ids.indexOf(String(over.id))
-    if (to === -1 || !ids.includes(String(active.id))) return
-    onReorder(String(active.id), to)
-  }
-
-  if (collapsed) {
-    return (
-      <nav
-        aria-label="Page sections"
-        className="flex w-11 shrink-0 flex-col items-center border-r border-[var(--bdr)] bg-[var(--sb)] py-2"
-      >
-        <button
-          type="button"
-          onClick={onToggleCollapsed}
-          aria-expanded={false}
-          aria-label="Expand sections panel"
-          className={ICON_BUTTON_CLASS}
-        >
-          <PanelLeftOpen size={16} aria-hidden />
-        </button>
-      </nav>
-    )
-  }
-
-  return (
-    <nav
-      aria-label="Page sections"
-      className="flex w-[280px] shrink-0 flex-col overflow-hidden border-r border-[var(--bdr)] bg-[var(--sb)]"
-    >
-      <div className="flex items-center justify-between border-b border-[var(--bdr)] py-2 pr-2 pl-3.5">
-        <div className="flex items-center gap-2">
-          <h2 className="text-[13px] font-medium text-[var(--txt)]">Sections</h2>
-          <span className="rounded-[4px] bg-[var(--acc-l)] px-[7px] py-0.5 text-[11px] font-medium text-[var(--acc)] tabular-nums">
-            {entries.length}
-          </span>
-        </div>
-        <button
-          type="button"
-          onClick={onToggleCollapsed}
-          aria-expanded
-          aria-label="Collapse sections panel"
-          className={ICON_BUTTON_CLASS}
-        >
-          <PanelLeftClose size={16} aria-hidden />
-        </button>
-      </div>
-
-      <div className="flex-1 overflow-y-auto">
-        {entries.length === 0 ? (
-          <p className="px-4 py-6 text-center text-[12.5px] text-[var(--muted)]">
-            No sections yet. Add one below to start building.
-          </p>
-        ) : (
-          <DndContext
-            sensors={sensors}
-            collisionDetection={closestCenter}
-            onDragEnd={handleDragEnd}
-          >
-            <SortableContext
-              items={entries.map((e) => e.id)}
-              strategy={verticalListSortingStrategy}
-            >
-              <ul aria-label="Sections in page order">
-                {entries.map((entry) => (
-                  <SortableSectionRow
-                    key={entry.id}
-                    entry={entry}
-                    selected={entry.id === selectedNodeId}
-                    onSelect={onSelect}
-                  />
-                ))}
-              </ul>
-            </SortableContext>
-          </DndContext>
-        )}
-      </div>
-
-      <div className="border-t border-[var(--bdr)]">
-        <button
-          type="button"
-          onClick={onAddSection}
-          className="flex w-full items-center gap-2 px-3.5 py-3 text-[13px] font-medium text-[var(--acc)] transition-colors duration-[var(--motion-fast)] hover:bg-[var(--acc-l)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none focus-visible:ring-inset"
-        >
-          <Plus size={14} aria-hidden />
-          Add Section
-        </button>
-      </div>
-    </nav>
-  )
-}
-
-interface SortableSectionRowProps {
-  entry: SectionEntry
-  selected: boolean
-  onSelect: (id: string) => void
-}
-
-function SortableSectionRow({ entry, selected, onSelect }: SortableSectionRowProps) {
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-    id: entry.id,
-  })
-  const Icon = entry.icon
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    zIndex: isDragging ? 10 : undefined,
-  }
-
-  return (
-    <li ref={setNodeRef} style={style} className={isDragging ? 'shadow-[var(--shd2)]' : undefined}>
-      <div
-        className={`flex items-center gap-1.5 border-b border-[var(--bdr)] py-2 pr-2.5 pl-1.5 transition-colors duration-[var(--motion-fast)] ${
-          selected ? 'bg-[var(--acc-l)]' : 'hover:bg-[var(--acc-l)]'
-        }`}
-      >
-        <button
-          type="button"
-          aria-label={`Drag to reorder ${entry.name}`}
-          {...attributes}
-          {...listeners}
-          className="shrink-0 cursor-grab touch-none rounded p-1 text-[var(--muted)] transition-colors duration-[var(--motion-fast)] hover:text-[var(--acc)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none active:cursor-grabbing"
-        >
-          <GripVertical size={15} aria-hidden />
-        </button>
-        <button
-          type="button"
-          onClick={() => onSelect(entry.id)}
-          aria-current={selected ? 'true' : undefined}
-          className="flex min-w-0 flex-1 items-center gap-2.5 rounded text-left focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
-        >
-          <span
-            aria-hidden
-            className="flex h-7 w-7 shrink-0 items-center justify-center rounded-[7px] bg-[var(--acc-l)] text-[var(--acc)]"
-          >
-            <Icon size={14} />
-          </span>
-          <span className="flex min-w-0 flex-col">
-            <span
-              className={`truncate text-[13px] font-medium ${
-                entry.hidden ? 'text-[var(--muted)] line-through' : 'text-[var(--txt)]'
-              }`}
-            >
-              {entry.name}
-            </span>
-            <span className="truncate text-[11px] text-[var(--muted)]">{entry.meta}</span>
-          </span>
-        </button>
-      </div>
-    </li>
-  )
-}