create-visualbuild-app 0.1.0

package/visual-app-builder/src/components/Canvas.tsx

@@ -0,0 +1,1059 @@
+import {
+  useDndContext,
+  useDraggable,
+  useDroppable,
+  type DraggableAttributes,
+  type DraggableSyntheticListeners,
+} from '@dnd-kit/core'
+import { CSS } from '@dnd-kit/utilities'
+import {
+  createElement,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+  type MouseEvent as ReactMouseEvent,
+  type MutableRefObject,
+  type PointerEvent as ReactPointerEvent,
+  type ReactNode,
+} from 'react'
+import { createPortal } from 'react-dom'
+import { primitiveRegistry } from '../data/primitiveRegistry'
+import { useAppStore } from '../stores/useAppStore'
+import type { Viewport, VisualNode } from '../types'
+
+type DropOrientation = 'vertical' | 'horizontal'
+
+interface FloatingRect {
+  top: number
+  right: number
+  bottom: number
+  left: number
+  width: number
+  height: number
+}
+
+const CanvasOverlayContext = createContext<HTMLElement | null>(null)
+
+export default function Canvas() {
+  const [overlayRoot, setOverlayRoot] = useState<HTMLDivElement | null>(null)
+  const {
+    pages,
+    appShell,
+    activePageId,
+    selectedComponentId,
+    viewport,
+    previewMode,
+    setActivePage,
+    setSelectedComponent,
+    setViewport,
+    removeNode,
+    removeAppShellComponent,
+  } = useAppStore()
+  const activePage = pages.find((page) => page.id === activePageId)
+  const pageRoot = activePage?.root
+  const pageRootRef = useRef<HTMLElement | null>(null)
+  const rootOrientation = pageRoot
+    ? getChildOrientation(pageRoot)
+    : 'vertical'
+  const isPageRootSelected =
+    !previewMode && pageRoot?.id !== undefined && selectedComponentId === pageRoot.id
+  const { isOver, setNodeRef } = useDroppable({
+    id: 'canvas:root',
+    disabled: previewMode || !activePage,
+    data: {
+      kind: 'canvas-root',
+    },
+  })
+
+  useEffect(() => {
+    if (!previewMode) {
+      return
+    }
+
+    const syncPageToLocation = () => {
+      const matchingPage = pages.find(
+        (page) => normalizeRoute(page.route) === normalizeRoute(window.location.pathname)
+      )
+
+      if (matchingPage && matchingPage.id !== activePageId) {
+        setActivePage(matchingPage.id)
+      }
+    }
+
+    window.addEventListener('popstate', syncPageToLocation)
+    return () => window.removeEventListener('popstate', syncPageToLocation)
+  }, [activePageId, pages, previewMode, setActivePage])
+
+  const handlePreviewNavigate = (
+    event: ReactMouseEvent<HTMLAnchorElement>,
+    href: string,
+    target: string
+  ) => {
+    if (!previewMode || target === '_blank' || href.startsWith('#')) {
+      return
+    }
+
+    const destination = new URL(href, window.location.href)
+
+    if (destination.origin !== window.location.origin) {
+      return
+    }
+
+    const matchingPage = pages.find(
+      (page) => normalizeRoute(page.route) === normalizeRoute(destination.pathname)
+    )
+
+    event.preventDefault()
+    event.stopPropagation()
+
+    if (!matchingPage) {
+      return
+    }
+
+    setActivePage(matchingPage.id)
+    window.history.pushState({}, '', destination.pathname)
+  }
+
+  const rootElementProps = pageRoot
+    ? {
+        'data-vb-page-root': 'true',
+        'data-canvas-node-id': pageRoot.id,
+        'data-canvas-node-tag': pageRoot.type,
+        ...(previewMode
+          ? {}
+          : {
+              tabIndex: 0,
+              'data-vb-editor-node': 'true',
+              'data-vb-selected': isPageRootSelected ? 'true' : undefined,
+              'data-vb-drop-target': isOver ? 'true' : undefined,
+              onClick: (event: ReactMouseEvent<HTMLElement>) => {
+                event.preventDefault()
+                event.stopPropagation()
+                setSelectedComponent(pageRoot.id)
+              },
+              onKeyDown: (event: KeyboardEvent) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                  event.preventDefault()
+                  setSelectedComponent(pageRoot.id)
+                }
+              },
+            }),
+      }
+    : undefined
+
+  return (
+    <CanvasOverlayContext.Provider value={overlayRoot}>
+    <main
+      className="min-w-0 flex-1 overflow-auto bg-[#eef1f4]"
+      onClick={() => setSelectedComponent(null)}
+    >
+      <div className="sticky top-0 z-10 flex items-center justify-center gap-1 border-b border-gray-200 bg-white py-2">
+        {(['mobile', 'tablet', 'desktop'] as const).map((size) => (
+          <button
+            key={size}
+            type="button"
+            onClick={(event) => {
+              event.stopPropagation()
+              setViewport(size)
+            }}
+            className={`cursor-pointer select-none rounded px-3 py-1 text-xs transition-colors ${
+              viewport === size
+                ? 'bg-gray-900 text-white'
+                : 'text-gray-500 hover:bg-gray-100 hover:text-gray-900'
+            }`}
+          >
+            {size.charAt(0).toUpperCase() + size.slice(1)}
+          </button>
+        ))}
+      </div>
+
+      <div
+        className={`flex ${
+          viewport === 'desktop'
+            ? 'w-full min-w-0 justify-start'
+            : 'min-w-full justify-center'
+        } ${previewMode ? '' : 'px-4 py-6'}`}
+      >
+        <div
+          ref={setNodeRef}
+          className={`vb-canvas-surface min-h-[calc(100vh-10rem)] bg-white transition-[width,border-color,box-shadow] ${
+            viewport === 'desktop' ? 'min-w-0 w-full' : 'shrink-0'
+          } ${
+            previewMode
+              ? ''
+              : 'vb-canvas-editor-frame shadow-sm'
+          }`}
+          data-vb-canvas-over={!previewMode && isOver ? 'true' : undefined}
+          style={
+            viewport === 'desktop'
+              ? undefined
+              : { width: getViewportWidth(viewport) }
+          }
+          onClick={(event) => {
+            if (!pageRoot || previewMode) return
+            event.stopPropagation()
+            setSelectedComponent(pageRoot.id)
+          }}
+        >
+          {!activePage || !pageRoot ? null : (
+            <>
+              {appShell.header && (
+                <CanvasNode
+                  node={appShell.header}
+                  parentSelectionId={null}
+                  selectedNodeId={selectedComponentId}
+                  previewMode={previewMode}
+                  onSelect={setSelectedComponent}
+                  onDelete={() => removeAppShellComponent('header')}
+                  onPreviewNavigate={handlePreviewNavigate}
+                />
+              )}
+
+              <PrimitiveElement
+                node={pageRoot}
+                previewMode={previewMode}
+                elementRef={(element) => {
+                  pageRootRef.current = element
+                }}
+                elementProps={rootElementProps}
+                onPreviewNavigate={handlePreviewNavigate}
+              >
+                {activePage.components.length === 0 ? (
+                  previewMode ? null : (
+                    <EmptyCanvas isOver={isOver} />
+                  )
+                ) : (
+                  activePage.components.map((node, index) => (
+                    <DraggableCanvasNode
+                      key={node.id}
+                      node={node}
+                      parentNodeId={null}
+                      parentSelectionId={pageRoot.id}
+                      index={index}
+                      isLast={index === activePage.components.length - 1}
+                      orientation={rootOrientation}
+                      selectedNodeId={selectedComponentId}
+                      previewMode={previewMode}
+                      onSelect={setSelectedComponent}
+                      onDelete={removeNode}
+                      onPreviewNavigate={handlePreviewNavigate}
+                    />
+                  ))
+                )}
+              </PrimitiveElement>
+
+              {appShell.footer && (
+                <CanvasNode
+                  node={appShell.footer}
+                  parentSelectionId={null}
+                  selectedNodeId={selectedComponentId}
+                  previewMode={previewMode}
+                  onSelect={setSelectedComponent}
+                  onDelete={() => removeAppShellComponent('footer')}
+                  onPreviewNavigate={handlePreviewNavigate}
+                />
+              )}
+            </>
+          )}
+        </div>
+      </div>
+
+      {!previewMode && pageRoot && (
+        <FloatingNodeToolbar
+          targetRef={pageRootRef}
+          tag={`page: ${pageRoot.type}`}
+          visible={isPageRootSelected}
+          selected={isPageRootSelected}
+          onSelect={() => setSelectedComponent(pageRoot.id)}
+        />
+      )}
+      {!previewMode && (
+        <FloatingElementOutline
+          targetRef={pageRootRef}
+          visible={isOver}
+          label="Drop on page"
+        />
+      )}
+      <div
+        ref={setOverlayRoot}
+        className="pointer-events-none fixed inset-0 z-[70]"
+        data-vb-overlay-root
+      />
+    </main>
+    </CanvasOverlayContext.Provider>
+  )
+}
+
+function DraggableCanvasNode({
+  node,
+  parentNodeId,
+  parentSelectionId,
+  index,
+  isLast,
+  orientation,
+  selectedNodeId,
+  previewMode,
+  onSelect,
+  onDelete,
+  onPreviewNavigate,
+}: {
+  node: VisualNode
+  parentNodeId: string | null
+  parentSelectionId: string | null
+  index: number
+  isLast: boolean
+  orientation: DropOrientation
+  selectedNodeId: string | null
+  previewMode: boolean
+  onSelect: (id: string | null) => void
+  onDelete: (id: string) => void
+  onPreviewNavigate: PreviewNavigateHandler
+}) {
+  const targetRef = useRef<HTMLElement | null>(null)
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    isDragging,
+  } = useDraggable({
+    id: `canvas-node:${node.id}`,
+    disabled: previewMode,
+    data: {
+      kind: 'canvas-node',
+      nodeId: node.id,
+    },
+  })
+  const dragStyle: CSSProperties | undefined = transform
+    ? {
+        transform: CSS.Translate.toString(transform),
+        opacity: isDragging ? 0.55 : 1,
+        position: 'relative',
+        zIndex: isDragging ? 30 : undefined,
+      }
+    : undefined
+
+  return (
+    <>
+      {!previewMode && (
+        <InsertionDropZone
+          targetRef={targetRef}
+          parentNodeId={parentNodeId}
+          index={index}
+          edge="before"
+          orientation={orientation}
+        />
+      )}
+      <CanvasNode
+        node={node}
+        parentSelectionId={parentSelectionId}
+        selectedNodeId={selectedNodeId}
+        previewMode={previewMode}
+        onSelect={onSelect}
+        onDelete={onDelete}
+        onPreviewNavigate={onPreviewNavigate}
+        dragAttributes={attributes}
+        dragListeners={listeners}
+        dragNodeRef={setNodeRef}
+        dragStyle={dragStyle}
+        externalElementRef={targetRef}
+        isDragging={isDragging}
+      />
+      {!previewMode && isLast && (
+        <InsertionDropZone
+          targetRef={targetRef}
+          parentNodeId={parentNodeId}
+          index={index + 1}
+          edge="after"
+          orientation={orientation}
+        />
+      )}
+    </>
+  )
+}
+
+type PreviewNavigateHandler = (
+  event: ReactMouseEvent<HTMLAnchorElement>,
+  href: string,
+  target: string
+) => void
+
+function CanvasNode({
+  node,
+  parentSelectionId,
+  selectedNodeId,
+  previewMode,
+  onSelect,
+  onDelete,
+  onPreviewNavigate,
+  dragAttributes,
+  dragListeners,
+  dragNodeRef,
+  dragStyle,
+  externalElementRef,
+  isDragging = false,
+}: {
+  node: VisualNode
+  parentSelectionId: string | null
+  selectedNodeId: string | null
+  previewMode: boolean
+  onSelect: (id: string | null) => void
+  onDelete: (id: string) => void
+  onPreviewNavigate: PreviewNavigateHandler
+  dragAttributes?: DraggableAttributes
+  dragListeners?: DraggableSyntheticListeners
+  dragNodeRef?: (element: HTMLElement | null) => void
+  dragStyle?: CSSProperties
+  externalElementRef?: MutableRefObject<HTMLElement | null>
+  isDragging?: boolean
+}) {
+  const definition = primitiveRegistry[node.type]
+  const acceptsChildren = definition.acceptsChildren
+  const isSelected = !previewMode && selectedNodeId === node.id
+  const elementRef = useRef<HTMLElement | null>(null)
+  const [isHovered, setIsHovered] = useState(false)
+  const hideToolbarTimeout = useRef<number | null>(null)
+  const { isOver, setNodeRef: setDropNodeRef } = useDroppable({
+    id: `node:${node.id}`,
+    disabled: previewMode || !acceptsChildren,
+    data: {
+      kind: 'node-dropzone',
+      nodeId: node.id,
+    },
+  })
+
+  const setElementRef = useCallback(
+    (element: HTMLElement | null) => {
+      elementRef.current = element
+      setDropNodeRef(element)
+      dragNodeRef?.(element)
+
+      if (externalElementRef) {
+        externalElementRef.current = element
+      }
+    },
+    [dragNodeRef, externalElementRef, setDropNodeRef]
+  )
+
+  useEffect(
+    () => () => {
+      if (hideToolbarTimeout.current !== null) {
+        window.clearTimeout(hideToolbarTimeout.current)
+      }
+    },
+    []
+  )
+
+  const showToolbar = () => {
+    if (hideToolbarTimeout.current !== null) {
+      window.clearTimeout(hideToolbarTimeout.current)
+    }
+    setIsHovered(true)
+  }
+
+  const scheduleToolbarHide = () => {
+    if (isSelected) {
+      return
+    }
+
+    hideToolbarTimeout.current = window.setTimeout(() => {
+      setIsHovered(false)
+    }, 120)
+  }
+
+  const dragElementListeners = dragListeners
+    ? Object.fromEntries(
+        Object.entries(dragListeners as Record<string, unknown>).filter(
+          ([key]) => key !== 'onKeyDown'
+        )
+      )
+    : {}
+
+  const elementProps = previewMode
+    ? undefined
+    : {
+        ...dragElementListeners,
+        tabIndex: 0,
+        style: dragStyle,
+        'data-canvas-node-id': node.id,
+        'data-canvas-node-tag': node.type,
+        'data-draggable-node-id': dragListeners ? node.id : undefined,
+        'data-draggable-node-tag': dragListeners ? node.type : undefined,
+        'data-vb-editor-node': 'true',
+        'data-vb-selected': isSelected ? 'true' : undefined,
+        'data-vb-hovered': isHovered ? 'true' : undefined,
+        'data-vb-drop-target': isOver ? 'true' : undefined,
+        'data-vb-dragging': isDragging ? 'true' : undefined,
+        onClick: (event: ReactMouseEvent<HTMLElement>) => {
+          event.preventDefault()
+          event.stopPropagation()
+          onSelect(node.id)
+        },
+        onPointerEnter: (event: ReactPointerEvent<HTMLElement>) => {
+          event.stopPropagation()
+          showToolbar()
+        },
+        onPointerLeave: (event: ReactPointerEvent<HTMLElement>) => {
+          event.stopPropagation()
+          scheduleToolbarHide()
+        },
+        onKeyDown: (event: KeyboardEvent) => {
+          if (event.key === 'Delete' || event.key === 'Backspace') {
+            event.preventDefault()
+            event.stopPropagation()
+            onDelete(node.id)
+          }
+        },
+      }
+
+  return (
+    <>
+      <PrimitiveElement
+        node={node}
+        previewMode={previewMode}
+        elementRef={previewMode ? undefined : setElementRef}
+        elementProps={elementProps}
+        onPreviewNavigate={onPreviewNavigate}
+      >
+        {node.children.length > 0
+          ? node.children.map((child, index) => (
+              <DraggableCanvasNode
+                key={child.id}
+                node={child}
+                parentNodeId={node.id}
+                parentSelectionId={node.id}
+                index={index}
+                isLast={index === node.children.length - 1}
+                orientation={getChildOrientation(node)}
+                selectedNodeId={selectedNodeId}
+                previewMode={previewMode}
+                onSelect={onSelect}
+                onDelete={onDelete}
+                onPreviewNavigate={onPreviewNavigate}
+              />
+            ))
+          : renderEditableNodeContent(node, previewMode)}
+      </PrimitiveElement>
+
+      {!previewMode && (
+        <FloatingNodeToolbar
+          targetRef={elementRef}
+          tag={node.type}
+          visible={isSelected}
+          selected={isSelected}
+          parentSelectionId={parentSelectionId}
+          onSelect={() => onSelect(node.id)}
+          onSelectParent={
+            parentSelectionId ? () => onSelect(parentSelectionId) : undefined
+          }
+          onDelete={() => onDelete(node.id)}
+          dragAttributes={dragAttributes}
+          dragListeners={dragListeners}
+        />
+      )}
+      {!previewMode && (
+        <FloatingElementOutline
+          targetRef={elementRef}
+          visible={isOver}
+          label="Drop inside"
+        />
+      )}
+    </>
+  )
+}
+
+function FloatingNodeToolbar({
+  targetRef,
+  tag,
+  visible,
+  selected,
+  parentSelectionId,
+  onSelect,
+  onSelectParent,
+  onDelete,
+  onPointerEnter,
+  onPointerLeave,
+  dragAttributes,
+  dragListeners,
+}: {
+  targetRef: MutableRefObject<HTMLElement | null>
+  tag: string
+  visible: boolean
+  selected: boolean
+  parentSelectionId?: string | null
+  onSelect: () => void
+  onSelectParent?: () => void
+  onDelete?: () => void
+  onPointerEnter?: () => void
+  onPointerLeave?: () => void
+  dragAttributes?: DraggableAttributes
+  dragListeners?: DraggableSyntheticListeners
+}) {
+  const overlayRoot = useContext(CanvasOverlayContext)
+  const rect = useElementRect(targetRef, visible)
+
+  if (!visible || !rect || !overlayRoot) {
+    return null
+  }
+
+  const top = rect.top >= 32 ? rect.top - 28 : rect.top + 4
+  const left = Math.max(4, Math.min(rect.left, window.innerWidth - 112))
+
+  return createPortal(
+    <div
+      className={`pointer-events-auto fixed z-[90] flex h-7 items-center overflow-hidden rounded-md border text-[10px] shadow-lg ${
+        selected
+          ? 'border-blue-300 bg-blue-600 text-white'
+          : 'border-gray-600 bg-gray-900 text-gray-100'
+      }`}
+      style={{ top, left }}
+      data-vb-floating-toolbar={tag}
+      onPointerEnter={onPointerEnter}
+      onPointerLeave={onPointerLeave}
+      onClick={(event) => event.stopPropagation()}
+    >
+      <button
+        type="button"
+        {...dragAttributes}
+        {...dragListeners}
+        aria-label={dragListeners ? `Drag ${tag} to reorder` : `Select ${tag}`}
+        onClick={(event) => {
+          event.stopPropagation()
+          onSelect()
+        }}
+        className={`flex h-full w-8 items-center justify-center font-mono text-xs font-semibold ${
+          dragListeners
+            ? 'touch-none cursor-grab active:cursor-grabbing'
+            : 'cursor-pointer'
+        }`}
+      >
+        ::
+      </button>
+      {parentSelectionId && onSelectParent && (
+        <button
+          type="button"
+          aria-label="Select parent element"
+          onPointerDown={(event) => event.stopPropagation()}
+          onClick={(event) => {
+            event.stopPropagation()
+            onSelectParent()
+          }}
+          className="h-full w-8 cursor-pointer border-l border-white/15 text-xs text-gray-200 transition-colors hover:bg-white/10 hover:text-white"
+        >
+          Up
+        </button>
+      )}
+      {onDelete && (
+        <button
+          type="button"
+          aria-label={`Delete ${tag}`}
+          onPointerDown={(event) => event.stopPropagation()}
+          onClick={(event) => {
+            event.stopPropagation()
+            onDelete()
+          }}
+          className="flex h-full w-8 cursor-pointer items-center justify-center border-l border-white/15 text-sm text-red-200 transition-colors hover:bg-red-500 hover:text-white"
+        >
+          <span aria-hidden="true">x</span>
+        </button>
+      )}
+    </div>,
+    overlayRoot
+  )
+}
+
+function FloatingElementOutline({
+  targetRef,
+  visible,
+  label,
+}: {
+  targetRef: MutableRefObject<HTMLElement | null>
+  visible: boolean
+  label: string
+}) {
+  const overlayRoot = useContext(CanvasOverlayContext)
+  const rect = useElementRect(targetRef, visible)
+
+  if (!visible || !rect || !overlayRoot) {
+    return null
+  }
+
+  return createPortal(
+    <div
+      className="pointer-events-none fixed z-[80] flex items-center justify-center border-2 border-blue-500 bg-blue-100/20"
+      style={{
+        top: rect.top,
+        left: rect.left,
+        width: rect.width,
+        height: Math.max(rect.height, 12),
+      }}
+    >
+      <span className="rounded bg-blue-600 px-2 py-1 text-[10px] font-medium text-white shadow">
+        {label}
+      </span>
+    </div>,
+    overlayRoot
+  )
+}
+
+function InsertionDropZone({
+  targetRef,
+  parentNodeId,
+  index,
+  edge,
+  orientation,
+}: {
+  targetRef: MutableRefObject<HTMLElement | null>
+  parentNodeId: string | null
+  index: number
+  edge: 'before' | 'after'
+  orientation: DropOrientation
+}) {
+  const overlayRoot = useContext(CanvasOverlayContext)
+  const { active } = useDndContext()
+  const rect = useElementRect(targetRef, active !== null)
+  const { isOver, setNodeRef } = useDroppable({
+    id: `insert:${parentNodeId ?? 'page-root'}:${index}:${edge}`,
+    data: {
+      kind: 'insertion-zone',
+      parentNodeId,
+      index,
+    },
+  })
+
+  if (!rect || !overlayRoot) {
+    return null
+  }
+
+  const isHorizontal = orientation === 'horizontal'
+  const style: CSSProperties = isHorizontal
+    ? {
+        top: rect.top,
+        left: edge === 'before' ? rect.left - 7 : rect.right - 7,
+        width: 14,
+        height: Math.max(rect.height, 12),
+      }
+    : {
+        top: edge === 'before' ? rect.top - 7 : rect.bottom - 7,
+        left: rect.left,
+        width: Math.max(rect.width, 12),
+        height: 14,
+      }
+
+  return createPortal(
+    <div
+      ref={setNodeRef}
+      aria-hidden="true"
+      data-drop-index={index}
+      data-drop-parent={parentNodeId ?? 'page-root'}
+      className={`fixed z-[85] flex items-center justify-center ${
+        active ? 'pointer-events-auto' : 'pointer-events-none'
+      }`}
+      style={style}
+    >
+      <span
+        className={`block rounded-full transition-all ${
+          isHorizontal ? 'h-full w-0.5' : 'h-0.5 w-full'
+        } ${
+          isOver
+            ? 'bg-blue-500 shadow-[0_0_0_3px_rgba(96,165,250,0.3)]'
+            : 'bg-transparent'
+        }`}
+      />
+    </div>,
+    overlayRoot
+  )
+}
+
+function useElementRect(
+  targetRef: MutableRefObject<HTMLElement | null>,
+  trackChanges: boolean
+) {
+  const [rect, setRect] = useState<FloatingRect | null>(null)
+  const updateRect = useCallback(() => {
+    const element = targetRef.current
+
+    if (!element) {
+      setRect(null)
+      return
+    }
+
+    const nextRect = element.getBoundingClientRect()
+    setRect({
+      top: nextRect.top,
+      right: nextRect.right,
+      bottom: nextRect.bottom,
+      left: nextRect.left,
+      width: nextRect.width,
+      height: nextRect.height,
+    })
+  }, [targetRef])
+
+  useLayoutEffect(() => {
+    updateRect()
+    const animationFrame = window.requestAnimationFrame(updateRect)
+
+    const element = targetRef.current
+    if (!element) {
+      return () => window.cancelAnimationFrame(animationFrame)
+    }
+
+    const resizeObserver = new ResizeObserver(updateRect)
+    resizeObserver.observe(element)
+
+    if (trackChanges) {
+      window.addEventListener('resize', updateRect)
+      document.addEventListener('scroll', updateRect, true)
+    }
+
+    return () => {
+      window.cancelAnimationFrame(animationFrame)
+      resizeObserver.disconnect()
+      window.removeEventListener('resize', updateRect)
+      document.removeEventListener('scroll', updateRect, true)
+    }
+  }, [targetRef, trackChanges, updateRect])
+
+  return rect
+}
+
+function PrimitiveElement({
+  node,
+  children,
+  previewMode,
+  elementRef,
+  elementProps,
+  onPreviewNavigate,
+}: {
+  node: VisualNode
+  children: ReactNode
+  previewMode: boolean
+  elementRef?: (element: HTMLElement | null) => void
+  elementProps?: Record<string, unknown>
+  onPreviewNavigate: PreviewNavigateHandler
+}) {
+  const className = String(node.props.className ?? '')
+  const id = String(node.props.id ?? '')
+  const baseProps: Record<string, unknown> = {
+    id: id || undefined,
+    className,
+    ref: elementRef,
+    ...elementProps,
+  }
+
+  if (voidElements.has(node.type)) {
+    if (node.type === 'input') {
+      return createElement('input', {
+        ...baseProps,
+        type: String(node.props.type ?? 'text'),
+        name: String(node.props.name ?? '') || undefined,
+        placeholder: String(node.props.placeholder ?? '') || undefined,
+      })
+    }
+
+    if (node.type === 'img') {
+      return createElement('img', {
+        ...baseProps,
+        src: String(node.props.src ?? ''),
+        alt: String(node.props.alt ?? ''),
+      })
+    }
+
+    if (node.type === 'source') {
+      return createElement('source', {
+        ...baseProps,
+        src: String(node.props.src ?? ''),
+        type: String(node.props.type ?? '') || undefined,
+      })
+    }
+
+    return createElement(node.type, baseProps)
+  }
+
+  if (node.type === 'a') {
+    const href = String(node.props.href ?? '#')
+    const target = String(node.props.target ?? '_self')
+    const editorOnClick = elementProps?.onClick as
+      | ((event: ReactMouseEvent<HTMLAnchorElement>) => void)
+      | undefined
+
+    return createElement(
+      'a',
+      {
+        ...baseProps,
+        href,
+        target,
+        onClick: (event: ReactMouseEvent<HTMLAnchorElement>) => {
+          if (previewMode) {
+            onPreviewNavigate(event, href, target)
+            return
+          }
+
+          event.preventDefault()
+          editorOnClick?.(event)
+        },
+      },
+      children
+    )
+  }
+
+  if (node.type === 'button') {
+    return createElement(
+      'button',
+      {
+        ...baseProps,
+        type: String(node.props.type ?? 'button'),
+      },
+      children
+    )
+  }
+
+  if (node.type === 'label') {
+    return createElement(
+      'label',
+      {
+        ...baseProps,
+        htmlFor: String(node.props.htmlFor ?? '') || undefined,
+      },
+      children
+    )
+  }
+
+  if (node.type === 'textarea') {
+    return createElement('textarea', {
+      ...baseProps,
+      name: String(node.props.name ?? '') || undefined,
+      placeholder: String(node.props.placeholder ?? '') || undefined,
+      ...(previewMode
+        ? { defaultValue: String(node.props.text ?? '') }
+        : { value: String(node.props.text ?? ''), readOnly: true }),
+    })
+  }
+
+  if (node.type === 'option') {
+    return createElement(
+      'option',
+      {
+        ...baseProps,
+        value: String(node.props.value ?? '') || undefined,
+      },
+      children
+    )
+  }
+
+  if (node.type === 'optgroup') {
+    return createElement(
+      'optgroup',
+      {
+        ...baseProps,
+        label: String(node.props.label ?? 'Group'),
+      },
+      children
+    )
+  }
+
+  if (node.type === 'video' || node.type === 'audio') {
+    return createElement(node.type, {
+      ...baseProps,
+      src: String(node.props.src ?? '') || undefined,
+      controls: node.props.controls !== false,
+    })
+  }
+
+  if (node.type === 'iframe') {
+    return createElement('iframe', {
+      ...baseProps,
+      src: String(node.props.src ?? ''),
+      title: String(node.props.title ?? 'Embedded content'),
+    })
+  }
+
+  return createElement(node.type, baseProps, children)
+}
+
+function renderEditableNodeContent(node: VisualNode, previewMode: boolean) {
+  if (voidElements.has(node.type)) {
+    return null
+  }
+
+  const text = String(node.props.text ?? '')
+
+  if (text.trim() !== '') {
+    return text
+  }
+
+  if (previewMode) {
+    return ''
+  }
+
+  return (
+    <span className="vb-empty-node-placeholder" aria-hidden="true">
+      Drop an element
+    </span>
+  )
+}
+
+const voidElements = new Set<VisualNode['type']>([
+  'br',
+  'hr',
+  'img',
+  'input',
+  'source',
+  'col',
+])
+
+function EmptyCanvas({ isOver }: { isOver: boolean }) {
+  return (
+    <div
+      className={`flex min-h-[calc(100vh-10rem)] flex-col items-center justify-center border-2 border-dashed text-center transition-colors ${
+        isOver
+          ? 'border-blue-500 bg-blue-50 ring-2 ring-inset ring-blue-300'
+          : 'border-gray-300'
+      }`}
+    >
+      <p className="mb-3 text-3xl">+</p>
+      <p className="text-sm font-medium text-gray-500">
+        Drag any component or HTML element here
+      </p>
+      <p className="mt-1 text-xs text-gray-400">Your canvas is empty</p>
+    </div>
+  )
+}
+
+function getViewportWidth(viewport: Viewport) {
+  if (viewport === 'mobile') return '390px'
+  if (viewport === 'tablet') return '768px'
+  return '100%'
+}
+
+function getChildOrientation(node: VisualNode): DropOrientation {
+  const classNames = String(node.props.className ?? '')
+    .split(/\s+/)
+    .filter(Boolean)
+  const hasGrid = classNames.some(
+    (className) => className === 'grid' || className.endsWith(':grid')
+  )
+  const hasFlex = classNames.some(
+    (className) =>
+      className === 'flex' ||
+      className === 'inline-flex' ||
+      className.endsWith(':flex') ||
+      className.endsWith(':inline-flex')
+  )
+  const hasFlexColumn = classNames.some(
+    (className) =>
+      className === 'flex-col' || className.endsWith(':flex-col')
+  )
+
+  return hasGrid || (hasFlex && !hasFlexColumn) ? 'horizontal' : 'vertical'
+}
+
+function normalizeRoute(route: string) {
+  if (!route || route === '/') return '/'
+  return `/${route.replace(/^\/+|\/+$/g, '')}`
+}