create-visualbuild-app 0.1.0 → 1.0.0

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

@@ -1,1059 +1,1116 @@
-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, '')}`
-}
+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 { PrimitiveType, 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,
+    projectConfig,
+    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="vb-canvas-workspace min-w-0 flex-1 overflow-auto bg-[#eef1f4]"
+      onClick={() => setSelectedComponent(null)}
+    >
+      <div data-vb-editor-chrome className="vb-canvas-toolbar 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'
+            }`}
+            data-vb-active={viewport === size ? 'true' : undefined}
+          >
+            {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={
+            projectConfig.editor.responsiveWidths[viewport] === 'fluid'
+              ? undefined
+              : {
+                  width: `${projectConfig.editor.responsiveWidths[viewport]}px`,
+                }
+          }
+          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 customComponents = useAppStore((state) => state.customComponents)
+  const customDefinition = customComponents.find(
+    (component) => component.name === node.type
+  )
+  const definition = primitiveRegistry[node.type as PrimitiveType]
+  const acceptsChildren =
+    definition?.acceptsChildren ?? Boolean(customDefinition)
+  const canvasChildren = customDefinition
+    ? getCustomComponentTreeChildren(node)
+    : node.children
+  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}
+        customDefinition={customDefinition}
+        previewMode={previewMode}
+        elementRef={previewMode ? undefined : setElementRef}
+        elementProps={elementProps}
+        onPreviewNavigate={onPreviewNavigate}
+      >
+        {canvasChildren.length > 0
+          ? canvasChildren.map((child, index) => (
+              <DraggableCanvasNode
+                key={child.id}
+                node={child}
+                parentNodeId={node.id}
+                parentSelectionId={node.id}
+                index={index}
+                isLast={index === canvasChildren.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,
+  customDefinition,
+  children,
+  previewMode,
+  elementRef,
+  elementProps,
+  onPreviewNavigate,
+}: {
+  node: VisualNode
+  customDefinition?: import('../types').CustomComponentDefinition
+  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 (customDefinition) {
+    const preview = customDefinition.preview
+    const previewClassName = String(
+      preview?.rootProps.className ?? ''
+    )
+    const customClassName = Array.from(
+      new Set(
+        `${previewClassName} ${className}`
+          .split(/\s+/)
+          .filter(Boolean)
+      )
+    ).join(' ')
+    return createElement(
+      String(node.props.wrapperTag ?? preview?.rootTag ?? 'div'),
+      {
+        ...baseProps,
+        id:
+          id ||
+          String(preview?.rootProps.id ?? '') ||
+          undefined,
+        className: `rounded-lg border border-dashed border-violet-400/60 bg-violet-500/10 p-4 ${customClassName}`,
+      },
+      children ||
+        (!previewMode ? (
+          <span
+            className="vb-empty-node-placeholder"
+            aria-hidden="true"
+          >
+            Drop an element
+          </span>
+        ) : null)
+    )
+  }
+
+  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>
+  )
+}
+
+function getCustomComponentTreeChildren(node: VisualNode) {
+  const tree = node.props.componentTree
+
+  if (
+    typeof tree !== 'object' ||
+    tree === null ||
+    !Array.isArray((tree as { children?: unknown }).children)
+  ) {
+    return []
+  }
+
+  return (tree as { children: VisualNode[] }).children
+}
+
+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 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, '')}`
+}