@startsimpli/ui 0.4.5 → 0.4.7

package/src/components/email-editor/email-editor.tsx

@@ -0,0 +1,886 @@
+'use client'
+
+import * as React from 'react'
+import { useState, useCallback, useRef, useEffect } from 'react'
+import {
+  Section,
+  Block,
+  BlockType,
+  ColumnLayout,
+  GlobalStyles,
+  MergeFieldDefinition,
+  DEFAULT_GLOBAL_STYLES,
+  createBlock,
+  createRow,
+  createSection,
+  getColumnCount,
+  getColumnWidths,
+} from './types'
+import {
+  TextBlockEditor,
+  MetricsBlockEditor,
+  DividerBlockEditor,
+  ButtonBlockEditor,
+  ImageBlockEditor,
+  SpacerBlockEditor,
+  SocialBlockEditor,
+  HeaderBlockEditor,
+  FooterBlockEditor,
+} from './blocks'
+import { BlockToolbar } from './block-toolbar'
+import { AddBlockMenu } from './add-block-menu'
+import { EditorSidebar } from './editor-sidebar'
+import {
+  UndoRedoState,
+  createUndoRedoState,
+  pushState,
+  undo as undoState,
+  redo as redoState,
+  canUndo,
+  canRedo,
+} from './utils/undo-redo'
+import { Button } from '../ui/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select'
+import {
+  Undo,
+  Redo,
+  Plus,
+  Settings,
+  Columns2,
+  Columns3,
+  RectangleHorizontal,
+  Trash2,
+} from 'lucide-react'
+import { cn } from '../../lib/utils'
+
+// --- Types ---
+interface EditorSelection {
+  sectionIndex: number
+  rowIndex: number
+  columnIndex: number
+  blockIndex: number
+}
+
+interface EmailEditorProps {
+  sections: Section[]
+  onChange: (sections: Section[]) => void
+  globalStyles?: GlobalStyles
+  onGlobalStylesChange?: (styles: GlobalStyles) => void
+  mergeFields?: MergeFieldDefinition[]
+  readOnly?: boolean
+  /** Optional custom rich text editor for the text block. */
+  renderTextEditor?: (props: {
+    content: string
+    onChange: (html: string) => void
+    placeholder?: string
+    className?: string
+  }) => React.ReactNode
+}
+
+// --- Main Editor ---
+export function EmailEditor({
+  sections,
+  onChange,
+  globalStyles = DEFAULT_GLOBAL_STYLES,
+  onGlobalStylesChange,
+  mergeFields,
+  readOnly = false,
+  renderTextEditor,
+}: EmailEditorProps) {
+  const [selection, setSelection] = useState<EditorSelection | null>(null)
+  const [showSidebar, setShowSidebar] = useState(false)
+  const [dragState, setDragState] = useState<{
+    sourceSection: number
+    sourceRow: number
+    sourceCol: number
+    sourceBlock: number
+  } | null>(null)
+  const [dragOverTarget, setDragOverTarget] = useState<{
+    sectionIndex: number
+    rowIndex: number
+    colIndex: number
+    blockIndex: number
+  } | null>(null)
+
+  const historyRef = useRef<UndoRedoState>(createUndoRedoState(sections))
+
+  // Sync history when sections change externally
+  useEffect(() => {
+    historyRef.current = { ...historyRef.current, present: sections }
+  }, [sections])
+
+  const commitChange = useCallback(
+    (newSections: Section[]) => {
+      historyRef.current = pushState(historyRef.current, newSections)
+      onChange(newSections)
+    },
+    [onChange]
+  )
+
+  const handleUndo = useCallback(() => {
+    const newState = undoState(historyRef.current)
+    historyRef.current = newState
+    onChange(newState.present)
+  }, [onChange])
+
+  const handleRedo = useCallback(() => {
+    const newState = redoState(historyRef.current)
+    historyRef.current = newState
+    onChange(newState.present)
+  }, [onChange])
+
+  // Keyboard shortcuts for undo/redo
+  useEffect(() => {
+    if (readOnly) return
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'z' && !e.shiftKey) {
+        e.preventDefault()
+        handleUndo()
+      }
+      if ((e.metaKey || e.ctrlKey) && (e.key === 'y' || (e.key === 'z' && e.shiftKey))) {
+        e.preventDefault()
+        handleRedo()
+      }
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [readOnly, handleUndo, handleRedo])
+
+  // Get selected block
+  const selectedBlock = selection
+    ? sections[selection.sectionIndex]?.rows[selection.rowIndex]?.columns[selection.columnIndex]?.[
+        selection.blockIndex
+      ] ?? null
+    : null
+
+  // --- Mutation helpers ---
+
+  const updateBlock = useCallback(
+    (sel: EditorSelection, updatedBlock: Block) => {
+      const newSections = sections.map((section, si) => {
+        if (si !== sel.sectionIndex) return section
+        return {
+          ...section,
+          rows: section.rows.map((row, ri) => {
+            if (ri !== sel.rowIndex) return row
+            return {
+              ...row,
+              columns: row.columns.map((col, ci) => {
+                if (ci !== sel.columnIndex) return col
+                return col.map((block, bi) => (bi === sel.blockIndex ? updatedBlock : block))
+              }),
+            }
+          }),
+        }
+      })
+      commitChange(newSections)
+    },
+    [sections, commitChange]
+  )
+
+  const addBlockToColumn = useCallback(
+    (
+      sectionIndex: number,
+      rowIndex: number,
+      colIndex: number,
+      blockType: BlockType,
+      afterBlockIndex?: number
+    ) => {
+      const newBlock = createBlock(blockType)
+      const newSections = sections.map((section, si) => {
+        if (si !== sectionIndex) return section
+        return {
+          ...section,
+          rows: section.rows.map((row, ri) => {
+            if (ri !== rowIndex) return row
+            return {
+              ...row,
+              columns: row.columns.map((col, ci) => {
+                if (ci !== colIndex) return col
+                const insertAt = afterBlockIndex !== undefined ? afterBlockIndex + 1 : col.length
+                return [...col.slice(0, insertAt), newBlock, ...col.slice(insertAt)]
+              }),
+            }
+          }),
+        }
+      })
+      commitChange(newSections)
+      // Select the new block
+      const insertAt = afterBlockIndex !== undefined ? afterBlockIndex + 1 : sections[sectionIndex].rows[rowIndex].columns[colIndex].length
+      setSelection({
+        sectionIndex,
+        rowIndex,
+        columnIndex: colIndex,
+        blockIndex: insertAt,
+      })
+    },
+    [sections, commitChange]
+  )
+
+  const removeBlock = useCallback(
+    (sel: EditorSelection) => {
+      const newSections = sections.map((section, si) => {
+        if (si !== sel.sectionIndex) return section
+        return {
+          ...section,
+          rows: section.rows.map((row, ri) => {
+            if (ri !== sel.rowIndex) return row
+            return {
+              ...row,
+              columns: row.columns.map((col, ci) => {
+                if (ci !== sel.columnIndex) return col
+                return col.filter((_, bi) => bi !== sel.blockIndex)
+              }),
+            }
+          }),
+        }
+      })
+      commitChange(newSections)
+      setSelection(null)
+    },
+    [sections, commitChange]
+  )
+
+  const duplicateBlock = useCallback(
+    (sel: EditorSelection) => {
+      const block = sections[sel.sectionIndex].rows[sel.rowIndex].columns[sel.columnIndex][sel.blockIndex]
+      if (!block) return
+      const copy: Block = { ...JSON.parse(JSON.stringify(block)), id: `block-${Date.now()}-${Math.random().toString(36).substr(2, 6)}` }
+      const newSections = sections.map((section, si) => {
+        if (si !== sel.sectionIndex) return section
+        return {
+          ...section,
+          rows: section.rows.map((row, ri) => {
+            if (ri !== sel.rowIndex) return row
+            return {
+              ...row,
+              columns: row.columns.map((col, ci) => {
+                if (ci !== sel.columnIndex) return col
+                return [...col.slice(0, sel.blockIndex + 1), copy, ...col.slice(sel.blockIndex + 1)]
+              }),
+            }
+          }),
+        }
+      })
+      commitChange(newSections)
+      setSelection({ ...sel, blockIndex: sel.blockIndex + 1 })
+    },
+    [sections, commitChange]
+  )
+
+  const moveBlockInColumn = useCallback(
+    (sel: EditorSelection, direction: 'up' | 'down') => {
+      const col = sections[sel.sectionIndex].rows[sel.rowIndex].columns[sel.columnIndex]
+      const newIndex = direction === 'up' ? sel.blockIndex - 1 : sel.blockIndex + 1
+      if (newIndex < 0 || newIndex >= col.length) return
+      const newCol = [...col]
+      const [moved] = newCol.splice(sel.blockIndex, 1)
+      newCol.splice(newIndex, 0, moved)
+      const newSections = sections.map((section, si) => {
+        if (si !== sel.sectionIndex) return section
+        return {
+          ...section,
+          rows: section.rows.map((row, ri) => {
+            if (ri !== sel.rowIndex) return row
+            return {
+              ...row,
+              columns: row.columns.map((col, ci) =>
+                ci === sel.columnIndex ? newCol : col
+              ),
+            }
+          }),
+        }
+      })
+      commitChange(newSections)
+      setSelection({ ...sel, blockIndex: newIndex })
+    },
+    [sections, commitChange]
+  )
+
+  // --- Section/Row operations ---
+  const addSection = useCallback(
+    (afterIndex: number) => {
+      const newSection = createSection()
+      const newSections = [
+        ...sections.slice(0, afterIndex + 1),
+        newSection,
+        ...sections.slice(afterIndex + 1),
+      ]
+      commitChange(newSections)
+    },
+    [sections, commitChange]
+  )
+
+  const removeSection = useCallback(
+    (index: number) => {
+      if (sections.length <= 1) return
+      commitChange(sections.filter((_, i) => i !== index))
+      setSelection(null)
+    },
+    [sections, commitChange]
+  )
+
+  const addRow = useCallback(
+    (sectionIndex: number, layout: ColumnLayout = '1') => {
+      const newRow = createRow(layout)
+      const newSections = sections.map((section, si) => {
+        if (si !== sectionIndex) return section
+        return { ...section, rows: [...section.rows, newRow] }
+      })
+      commitChange(newSections)
+    },
+    [sections, commitChange]
+  )
+
+  const changeRowLayout = useCallback(
+    (sectionIndex: number, rowIndex: number, layout: ColumnLayout) => {
+      const newColCount = getColumnCount(layout)
+      const newSections = sections.map((section, si) => {
+        if (si !== sectionIndex) return section
+        return {
+          ...section,
+          rows: section.rows.map((row, ri) => {
+            if (ri !== rowIndex) return row
+            const columns = [...row.columns]
+            // Add or trim columns as needed
+            while (columns.length < newColCount) columns.push([])
+            // If reducing columns, merge extra columns into last
+            if (columns.length > newColCount) {
+              const extra = columns.splice(newColCount - 1)
+              columns[newColCount - 1] = extra.flat()
+            }
+            return { ...row, layout, columns }
+          }),
+        }
+      })
+      commitChange(newSections)
+    },
+    [sections, commitChange]
+  )
+
+  const removeRow = useCallback(
+    (sectionIndex: number, rowIndex: number) => {
+      const section = sections[sectionIndex]
+      if (section.rows.length <= 1) return
+      const newSections = sections.map((s, si) => {
+        if (si !== sectionIndex) return s
+        return { ...s, rows: s.rows.filter((_, ri) => ri !== rowIndex) }
+      })
+      commitChange(newSections)
+      setSelection(null)
+    },
+    [sections, commitChange]
+  )
+
+  // --- DnD handlers ---
+  const handleDragStart = useCallback(
+    (sectionIndex: number, rowIndex: number, colIndex: number, blockIndex: number) => {
+      setDragState({
+        sourceSection: sectionIndex,
+        sourceRow: rowIndex,
+        sourceCol: colIndex,
+        sourceBlock: blockIndex,
+      })
+    },
+    []
+  )
+
+  const handleDragOver = useCallback(
+    (
+      e: React.DragEvent,
+      sectionIndex: number,
+      rowIndex: number,
+      colIndex: number,
+      blockIndex: number
+    ) => {
+      e.preventDefault()
+      setDragOverTarget({ sectionIndex, rowIndex, colIndex, blockIndex })
+    },
+    []
+  )
+
+  const handleDrop = useCallback(
+    (
+      e: React.DragEvent,
+      targetSection: number,
+      targetRow: number,
+      targetCol: number,
+      targetBlock: number
+    ) => {
+      e.preventDefault()
+      if (!dragState) return
+
+      const { sourceSection, sourceRow, sourceCol, sourceBlock } = dragState
+
+      // Get the block being moved
+      const block =
+        sections[sourceSection]?.rows[sourceRow]?.columns[sourceCol]?.[sourceBlock]
+      if (!block) return
+
+      // Remove from source
+      let newSections = sections.map((section, si) => {
+        if (si !== sourceSection) return section
+        return {
+          ...section,
+          rows: section.rows.map((row, ri) => {
+            if (ri !== sourceRow) return row
+            return {
+              ...row,
+              columns: row.columns.map((col, ci) => {
+                if (ci !== sourceCol) return col
+                return col.filter((_, bi) => bi !== sourceBlock)
+              }),
+            }
+          }),
+        }
+      })
+
+      // Adjust target index if removing from same column before target
+      let adjustedTargetBlock = targetBlock
+      if (
+        sourceSection === targetSection &&
+        sourceRow === targetRow &&
+        sourceCol === targetCol &&
+        sourceBlock < targetBlock
+      ) {
+        adjustedTargetBlock -= 1
+      }
+
+      // Insert at target
+      newSections = newSections.map((section, si) => {
+        if (si !== targetSection) return section
+        return {
+          ...section,
+          rows: section.rows.map((row, ri) => {
+            if (ri !== targetRow) return row
+            return {
+              ...row,
+              columns: row.columns.map((col, ci) => {
+                if (ci !== targetCol) return col
+                return [
+                  ...col.slice(0, adjustedTargetBlock),
+                  block,
+                  ...col.slice(adjustedTargetBlock),
+                ]
+              }),
+            }
+          }),
+        }
+      })
+
+      commitChange(newSections)
+      setDragState(null)
+      setDragOverTarget(null)
+      setSelection({
+        sectionIndex: targetSection,
+        rowIndex: targetRow,
+        columnIndex: targetCol,
+        blockIndex: adjustedTargetBlock,
+      })
+    },
+    [dragState, sections, commitChange]
+  )
+
+  const handleDragEnd = useCallback(() => {
+    setDragState(null)
+    setDragOverTarget(null)
+  }, [])
+
+  // --- Render block by type ---
+  const renderBlock = useCallback(
+    (block: Block, sel: EditorSelection) => {
+      const commonProps = {
+        isEditing: !readOnly,
+        onChange: (updated: Block) => updateBlock(sel, updated),
+      }
+
+      switch (block.type) {
+        case 'text':
+          return <TextBlockEditor block={block} {...commonProps} onChange={(b) => updateBlock(sel, b)} renderEditor={renderTextEditor} />
+        case 'metrics':
+          return <MetricsBlockEditor block={block} {...commonProps} onChange={(b) => updateBlock(sel, b)} />
+        case 'divider':
+          return <DividerBlockEditor block={block} {...commonProps} onChange={(b) => updateBlock(sel, b)} />
+        case 'cta':
+          return <ButtonBlockEditor block={block} {...commonProps} onChange={(b) => updateBlock(sel, b)} />
+        case 'image':
+          return <ImageBlockEditor block={block} {...commonProps} onChange={(b) => updateBlock(sel, b)} />
+        case 'spacer':
+          return <SpacerBlockEditor block={block} {...commonProps} onChange={(b) => updateBlock(sel, b)} />
+        case 'social':
+          return <SocialBlockEditor block={block} {...commonProps} onChange={(b) => updateBlock(sel, b)} />
+        case 'header':
+          return <HeaderBlockEditor block={block} {...commonProps} onChange={(b) => updateBlock(sel, b)} />
+        case 'footer':
+          return <FooterBlockEditor block={block} {...commonProps} onChange={(b) => updateBlock(sel, b)} />
+        default:
+          return null
+      }
+    },
+    [readOnly, updateBlock, renderTextEditor]
+  )
+
+  // --- Read-only mode ---
+  if (readOnly) {
+    return (
+      <div
+        className="mx-auto"
+        style={{
+          maxWidth: globalStyles.contentWidth,
+          backgroundColor: globalStyles.backgroundColor,
+          fontFamily: globalStyles.fontFamily,
+        }}
+      >
+        {sections.map((section, si) => (
+          <div
+            key={section.id}
+            style={{
+              backgroundColor: section.backgroundColor || '#ffffff',
+              paddingTop: section.paddingTop,
+              paddingBottom: section.paddingBottom,
+              paddingLeft: section.paddingLeft,
+              paddingRight: section.paddingRight,
+              borderRadius: 8,
+              marginBottom: 4,
+            }}
+          >
+            {section.rows.map((row, ri) => {
+              const widths = getColumnWidths(row.layout)
+              return (
+                <div key={row.id} className="flex gap-2">
+                  {row.columns.map((col, ci) => (
+                    <div key={ci} style={{ width: `${widths[ci]}%` }}>
+                      {col.map((block, bi) => (
+                        <div key={block.id}>
+                          {renderBlock(block, { sectionIndex: si, rowIndex: ri, columnIndex: ci, blockIndex: bi })}
+                        </div>
+                      ))}
+                    </div>
+                  ))}
+                </div>
+              )
+            })}
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  // --- Editor mode ---
+  return (
+    <div className="flex h-full">
+      {/* Main canvas */}
+      <div className="flex-1 overflow-y-auto">
+        {/* Toolbar */}
+        <div className="sticky top-0 z-30 bg-background border-b px-4 py-2 flex items-center gap-2">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8"
+            onClick={handleUndo}
+            disabled={!canUndo(historyRef.current)}
+            title="Undo (Cmd+Z)"
+          >
+            <Undo className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8"
+            onClick={handleRedo}
+            disabled={!canRedo(historyRef.current)}
+            title="Redo (Cmd+Shift+Z)"
+          >
+            <Redo className="h-4 w-4" />
+          </Button>
+          <div className="w-px h-6 bg-border mx-1" />
+          <Button
+            variant={showSidebar ? 'secondary' : 'ghost'}
+            size="sm"
+            className="h-8 gap-1 text-xs"
+            onClick={() => setShowSidebar(!showSidebar)}
+          >
+            <Settings className="h-3.5 w-3.5" />
+            Settings
+          </Button>
+        </div>
+
+        {/* Canvas area */}
+        <div
+          className="p-6"
+          style={{ backgroundColor: globalStyles.backgroundColor }}
+          onClick={() => setSelection(null)}
+        >
+          <div
+            className="mx-auto"
+            style={{ maxWidth: globalStyles.contentWidth }}
+          >
+            {sections.map((section, si) => (
+              <div key={section.id} className="mb-2">
+                {/* Section wrapper */}
+                <div
+                  className="relative group/section rounded-lg"
+                  style={{
+                    backgroundColor: section.backgroundColor || '#ffffff',
+                    paddingTop: section.paddingTop,
+                    paddingBottom: section.paddingBottom,
+                    paddingLeft: section.paddingLeft,
+                    paddingRight: section.paddingRight,
+                  }}
+                >
+                  {/* Section controls */}
+                  <div className="absolute -right-10 top-2 flex flex-col gap-1 opacity-0 group-hover/section:opacity-100 transition-opacity z-20">
+                    {sections.length > 1 && (
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-6 w-6 text-destructive hover:text-destructive"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          removeSection(si)
+                        }}
+                        title="Remove section"
+                      >
+                        <Trash2 className="h-3 w-3" />
+                      </Button>
+                    )}
+                  </div>
+
+                  {/* Rows */}
+                  {section.rows.map((row, ri) => {
+                    const widths = getColumnWidths(row.layout)
+                    return (
+                      <div key={row.id} className="relative group/row mb-1">
+                        {/* Row layout controls */}
+                        <div className="absolute -right-10 top-0 opacity-0 group-hover/row:opacity-100 transition-opacity z-10">
+                          <Select
+                            value={row.layout}
+                            onValueChange={(v) =>
+                              changeRowLayout(si, ri, v as ColumnLayout)
+                            }
+                          >
+                            <SelectTrigger className="h-6 w-6 p-0 border-0 bg-transparent [&>svg]:hidden">
+                              {row.layout === '1' ? (
+                                <RectangleHorizontal className="h-3.5 w-3.5 text-muted-foreground" />
+                              ) : row.layout === '3' ? (
+                                <Columns3 className="h-3.5 w-3.5 text-muted-foreground" />
+                              ) : (
+                                <Columns2 className="h-3.5 w-3.5 text-muted-foreground" />
+                              )}
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="1">1 Column</SelectItem>
+                              <SelectItem value="2">2 Equal</SelectItem>
+                              <SelectItem value="3">3 Equal</SelectItem>
+                              <SelectItem value="2-1">2/3 + 1/3</SelectItem>
+                              <SelectItem value="1-2">1/3 + 2/3</SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </div>
+
+                        {/* Columns */}
+                        <div className="flex gap-2">
+                          {row.columns.map((col, ci) => (
+                            <div
+                              key={ci}
+                              style={{ width: `${widths[ci]}%` }}
+                              className={cn(
+                                'min-h-[40px] rounded transition-colors',
+                                col.length === 0 && 'border-2 border-dashed border-gray-200'
+                              )}
+                              onDragOver={(e) => {
+                                e.preventDefault()
+                                if (col.length === 0) {
+                                  setDragOverTarget({
+                                    sectionIndex: si,
+                                    rowIndex: ri,
+                                    colIndex: ci,
+                                    blockIndex: 0,
+                                  })
+                                }
+                              }}
+                              onDrop={(e) => {
+                                if (col.length === 0) {
+                                  handleDrop(e, si, ri, ci, 0)
+                                }
+                              }}
+                            >
+                              {col.length === 0 && (
+                                <div className="flex items-center justify-center h-full p-2">
+                                  <AddBlockMenu
+                                    onAdd={(type) => addBlockToColumn(si, ri, ci, type)}
+                                    variant="inline"
+                                  />
+                                </div>
+                              )}
+
+                              {col.map((block, bi) => {
+                                const blockSel: EditorSelection = {
+                                  sectionIndex: si,
+                                  rowIndex: ri,
+                                  columnIndex: ci,
+                                  blockIndex: bi,
+                                }
+                                const isSelected =
+                                  selection?.sectionIndex === si &&
+                                  selection?.rowIndex === ri &&
+                                  selection?.columnIndex === ci &&
+                                  selection?.blockIndex === bi
+                                const isDragOver =
+                                  dragOverTarget?.sectionIndex === si &&
+                                  dragOverTarget?.rowIndex === ri &&
+                                  dragOverTarget?.colIndex === ci &&
+                                  dragOverTarget?.blockIndex === bi
+
+                                return (
+                                  <div key={block.id}>
+                                    {/* Drop zone indicator */}
+                                    {isDragOver && dragState && (
+                                      <div className="h-0.5 bg-primary rounded-full mx-2 my-1" />
+                                    )}
+                                    <div
+                                      className={cn(
+                                        'group relative rounded transition-all cursor-pointer',
+                                        isSelected
+                                          ? 'ring-2 ring-foreground ring-offset-1'
+                                          : 'hover:ring-1 hover:ring-muted-foreground/30'
+                                      )}
+                                      onClick={(e) => {
+                                        e.stopPropagation()
+                                        setSelection(blockSel)
+                                      }}
+                                      draggable
+                                      onDragStart={(e) => {
+                                        e.stopPropagation()
+                                        handleDragStart(si, ri, ci, bi)
+                                      }}
+                                      onDragOver={(e) =>
+                                        handleDragOver(e, si, ri, ci, bi)
+                                      }
+                                      onDrop={(e) =>
+                                        handleDrop(e, si, ri, ci, bi)
+                                      }
+                                      onDragEnd={handleDragEnd}
+                                    >
+                                      {/* Block toolbar (on hover when selected) */}
+                                      {isSelected && (
+                                        <BlockToolbar
+                                          onDelete={() => removeBlock(blockSel)}
+                                          onDuplicate={() => duplicateBlock(blockSel)}
+                                          onMoveUp={() =>
+                                            moveBlockInColumn(blockSel, 'up')
+                                          }
+                                          onMoveDown={() =>
+                                            moveBlockInColumn(blockSel, 'down')
+                                          }
+                                          canMoveUp={bi > 0}
+                                          canMoveDown={bi < col.length - 1}
+                                        />
+                                      )}
+
+                                      {/* Block content */}
+                                      <div className="p-1">
+                                        {renderBlock(block, blockSel)}
+                                      </div>
+                                    </div>
+
+                                    {/* Add block between items */}
+                                    {isSelected && (
+                                      <div className="flex justify-center py-1 opacity-0 group-hover:opacity-100 hover:!opacity-100 transition-opacity">
+                                        <AddBlockMenu
+                                          onAdd={(type) =>
+                                            addBlockToColumn(si, ri, ci, type, bi)
+                                          }
+                                          variant="small"
+                                        />
+                                      </div>
+                                    )}
+                                  </div>
+                                )
+                              })}
+
+                              {/* Add block at end of column */}
+                              {col.length > 0 && (
+                                <div className="flex justify-center py-1 opacity-0 hover:opacity-100 transition-opacity">
+                                  <AddBlockMenu
+                                    onAdd={(type) =>
+                                      addBlockToColumn(
+                                        si,
+                                        ri,
+                                        ci,
+                                        type,
+                                        col.length - 1
+                                      )
+                                    }
+                                    variant="small"
+                                  />
+                                </div>
+                              )}
+                            </div>
+                          ))}
+                        </div>
+
+                        {/* Add row button */}
+                        {ri === section.rows.length - 1 && (
+                          <div className="flex justify-center py-2 opacity-0 group-hover/section:opacity-100 transition-opacity">
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="h-6 text-xs gap-1 text-muted-foreground"
+                              onClick={(e) => {
+                                e.stopPropagation()
+                                addRow(si)
+                              }}
+                            >
+                              <Plus className="h-3 w-3" />
+                              Add Row
+                            </Button>
+                          </div>
+                        )}
+                      </div>
+                    )
+                  })}
+                </div>
+
+                {/* Add section between */}
+                <div className="flex justify-center py-2">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-6 text-xs gap-1 text-muted-foreground opacity-0 hover:opacity-100 transition-opacity"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      addSection(si)
+                    }}
+                  >
+                    <Plus className="h-3 w-3" />
+                    Add Section
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Sidebar */}
+      {showSidebar && (
+        <EditorSidebar
+          selectedBlock={selectedBlock}
+          onBlockChange={(block) => {
+            if (selection) updateBlock(selection, block)
+          }}
+          globalStyles={globalStyles}
+          onGlobalStylesChange={onGlobalStylesChange || (() => {})}
+          onClose={() => setShowSidebar(false)}
+        />
+      )}
+    </div>
+  )
+}