create-visualbuild-app 0.1.0 → 1.0.0

package/visual-app-builder/src/App.tsx

@@ -1,874 +1,1090 @@
-import {
-  DndContext,
-  KeyboardSensor,
-  PointerSensor,
-  pointerWithin,
-  rectIntersection,
-  useSensor,
-  useSensors,
-  type CollisionDetection,
-  type DragEndEvent,
-} from '@dnd-kit/core'
-import { sortableKeyboardCoordinates } from '@dnd-kit/sortable'
-import { useEffect, useRef, useState } from 'react'
-import Canvas from './components/Canvas'
-import CodePanel, { type CodeView } from './components/CodePanel'
-import ComponentSidebar from './components/ComponentSidebar'
-import PageSwitcher from './components/PageSwitcher'
-import PropertiesPanel from './components/PropertiesPanel'
-import Topbar, { type SaveState } from './components/Topbar'
-import { useAppStore } from './stores/useAppStore'
-import type { ComponentType, Page, PrimitiveType } from './types'
-import { getPageSourcePath } from './utils/codegen'
-import { getGeneratorDiagnostic } from './utils/projectPersistence'
-
-type DragData =
-  | { kind: 'sidebar-component'; type: ComponentType }
-  | { kind: 'primitive'; type: PrimitiveType }
-  | { kind: 'canvas-node'; nodeId: string }
-  | { kind: 'canvas-root' }
-  | { kind: 'node-dropzone'; nodeId: string }
-  | {
-      kind: 'insertion-zone'
-      parentNodeId: string | null
-      index: number
-    }
-
-interface ReverseSyncPayload {
-  type: 'reverse-sync-success' | 'reverse-sync-error'
-  path: string
-  pageId?: string
-  message: string
-}
-
-interface GeneratorDiagnosticPayload {
-  type: 'generator-diagnostic'
-  severity: 'error'
-  phase: 'generate'
-  code: string
-  title: string
-  message: string
-  path: string
-  suggestion?: string
-}
-
-interface FileSystemPayload {
-  type: 'filesystem-change'
-  path: string
-  action: 'add' | 'change' | 'unlink' | 'addDir' | 'unlinkDir'
-}
-
-interface ManagedPagesDeletedPayload {
-  type: 'managed-pages-deleted'
-  path: string
-  pageIds: string[]
-  message: string
-}
-
-interface ManagedPagesMovedPayload {
-  type: 'managed-pages-moved'
-  path: string
-  targetPath: string
-  pages: Array<{
-    pageId: string
-    previousPath: string
-    sourcePath: string
-  }>
-  message: string
-}
-
-type VisualBuildPayload =
-  | ReverseSyncPayload
-  | GeneratorDiagnosticPayload
-  | FileSystemPayload
-  | ManagedPagesDeletedPayload
-  | ManagedPagesMovedPayload
-
-type ReverseSyncNoticeState =
-  | (ReverseSyncPayload & {
-      status: 'success' | 'error' | 'conflict'
-    })
-  | (GeneratorDiagnosticPayload & {
-      status: 'error'
-    })
-
-export default function App() {
-  const [leftPanelOpen, setLeftPanelOpen] = useState(true)
-  const [leftPanelTab, setLeftPanelTab] =
-    useState<'files' | 'elements'>('elements')
-  const [rightPanelOpen, setRightPanelOpen] = useState(true)
-  const [rightPanelTab, setRightPanelTab] = useState<'code' | 'properties'>('code')
-  const [codeView, setCodeView] = useState<CodeView>('page')
-  const [selectedProjectFile, setSelectedProjectFile] = useState<string | null>(
-    null
-  )
-  const [saveState, setSaveState] = useState<SaveState>('idle')
-  const [reverseSyncNotice, setReverseSyncNotice] =
-    useState<ReverseSyncNoticeState | null>(null)
-  const saveResetTimeout = useRef<number | null>(null)
-  const {
-    pages,
-    activePageId,
-    loadProject,
-    refreshProjectFromDisk,
-    isProjectLoaded,
-    previewMode,
-    togglePreviewMode,
-    saveProject,
-    addComponentAt,
-    addComponentToNode,
-    addComponentToNodeAt,
-    addPrimitiveAt,
-    addPrimitiveToNode,
-    addPrimitiveToNodeAt,
-    moveNode,
-    setActivePage,
-    setAppShellComponent,
-  } = useAppStore()
-  const sensors = useSensors(
-    useSensor(PointerSensor, {
-      activationConstraint: {
-        distance: 6,
-      },
-    }),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    })
-  )
-  const activePage = pages.find((page) => page.id === activePageId)
-
-  useEffect(() => {
-    void loadProject()
-  }, [loadProject])
-
-  useEffect(() => {
-    const eventSource = new EventSource('/__visualbuild/events')
-    const handleReverseSync = (event: MessageEvent<string>) => {
-      let payload: VisualBuildPayload
-
-      try {
-        payload = JSON.parse(event.data) as VisualBuildPayload
-      } catch {
-        return
-      }
-
-      if (payload.type === 'filesystem-change') {
-        window.dispatchEvent(
-          new CustomEvent('visualbuild:filesystem-changed', {
-            detail: payload,
-          })
-        )
-        return
-      }
-
-      if (payload.type === 'managed-pages-deleted') {
-        setSelectedProjectFile((currentPath) => {
-          if (
-            currentPath === payload.path ||
-            currentPath?.startsWith(`${payload.path}/`)
-          ) {
-            return null
-          }
-
-          return currentPath
-        })
-        setCodeView('page')
-        setReverseSyncNotice(null)
-        void refreshProjectFromDisk(true).then((result) => {
-          window.dispatchEvent(new Event('visualbuild:filesystem-changed'))
-
-          if (result !== 'updated') {
-            setReverseSyncNotice({
-              type: 'reverse-sync-error',
-              path: payload.path,
-              message: 'The page was deleted, but the editor could not refresh.',
-              status: 'error',
-            })
-            return
-          }
-
-          const nextActivePage = useAppStore
-            .getState()
-            .pages.find(
-              (page) => page.id === useAppStore.getState().activePageId
-            )
-
-          if (nextActivePage) {
-            window.history.replaceState({}, '', nextActivePage.route)
-          }
-        })
-        return
-      }
-
-      if (payload.type === 'managed-pages-moved') {
-        setSelectedProjectFile((currentPath) =>
-          currentPath
-            ? replacePathPrefix(
-                currentPath,
-                payload.path,
-                payload.targetPath
-              )
-            : null
-        )
-        setReverseSyncNotice(null)
-        void refreshProjectFromDisk(true).then((result) => {
-          window.dispatchEvent(new Event('visualbuild:filesystem-changed'))
-
-          if (result !== 'updated') {
-            setReverseSyncNotice({
-              type: 'reverse-sync-error',
-              path: payload.targetPath,
-              message:
-                'The page source moved, but the editor could not refresh.',
-              status: 'error',
-            })
-          }
-        })
-        return
-      }
-
-      if (payload.type === 'generator-diagnostic') {
-        setReverseSyncNotice({ ...payload, status: 'error' })
-        return
-      }
-
-      if (payload.type === 'reverse-sync-error') {
-        setReverseSyncNotice({ ...payload, status: 'error' })
-        return
-      }
-
-      void refreshProjectFromDisk().then((result) => {
-        if (result === 'updated') {
-          window.dispatchEvent(
-            new Event('visualbuild:filesystem-changed')
-          )
-          setReverseSyncNotice({ ...payload, status: 'success' })
-          return
-        }
-
-        setReverseSyncNotice({
-          ...payload,
-          status: result === 'skipped-dirty' ? 'conflict' : 'error',
-          message:
-            result === 'skipped-dirty'
-              ? 'Source changed while the canvas has unsaved edits.'
-              : 'The source changed, but the canvas could not refresh.',
-        })
-      })
-    }
-
-    eventSource.addEventListener(
-      'visualbuild',
-      handleReverseSync as EventListener
-    )
-
-    return () => eventSource.close()
-  }, [refreshProjectFromDisk])
-
-  useEffect(
-    () => () => {
-      if (saveResetTimeout.current !== null) {
-        window.clearTimeout(saveResetTimeout.current)
-      }
-    },
-    []
-  )
-
-  const handleToggleCode = () => {
-    if (previewMode) {
-      togglePreviewMode()
-      setRightPanelTab('code')
-      setRightPanelOpen(true)
-      return
-    }
-
-    if (rightPanelOpen && rightPanelTab === 'code') {
-      setRightPanelOpen(false)
-      return
-    }
-
-    setRightPanelTab('code')
-    setRightPanelOpen(true)
-  }
-
-  const handleTogglePreview = () => {
-    if (!previewMode && activePage) {
-      window.history.replaceState({}, '', activePage.route)
-    }
-
-    togglePreviewMode()
-  }
-
-  const handleSelectProjectFile = (path: string | null) => {
-    setSelectedProjectFile(path)
-
-    if (path) {
-      const normalizedPath = path.replace(/\\/g, '/')
-      const managedPage = pages.find(
-        (page) => getPageSourcePath(page) === normalizedPath
-      )
-
-      if (managedPage) {
-        setActivePage(managedPage.id)
-        setCodeView('page')
-      } else {
-        setCodeView('file')
-      }
-      setRightPanelTab('code')
-      setRightPanelOpen(true)
-    } else if (codeView === 'file') {
-      setCodeView('page')
-    }
-  }
-
-  const handleSelectCodeWorkspaceFile = (path: string) => {
-    const normalizedPath = path.replace(/\\/g, '/')
-    const managedPage = pages.find(
-      (page) => getPageSourcePath(page) === normalizedPath
-    )
-
-    setSelectedProjectFile(path)
-    if (managedPage) {
-      setActivePage(managedPage.id)
-    }
-    setCodeView('file')
-  }
-
-  const handleSelectPage = (page: Page) => {
-    setSelectedProjectFile(getPageSourcePath(page))
-    setCodeView('page')
-    setRightPanelTab('code')
-    setRightPanelOpen(true)
-  }
-
-  const handleDeletePage = (page: Page) => {
-    if (selectedProjectFile === getPageSourcePath(page)) {
-      setSelectedProjectFile(null)
-      setCodeView('page')
-    }
-  }
-
-  const handleSave = async () => {
-    if (saveState === 'saving') {
-      return
-    }
-
-    if (saveResetTimeout.current !== null) {
-      window.clearTimeout(saveResetTimeout.current)
-    }
-
-    setSaveState('saving')
-    const minimumOverlayTime = delay(450)
-
-    try {
-      await saveProject()
-      await minimumOverlayTime
-      setSaveState('saved')
-      saveResetTimeout.current = window.setTimeout(
-        () => setSaveState('idle'),
-        1200
-      )
-    } catch (error) {
-      await minimumOverlayTime
-      console.error('Failed to save VisualBuild project', error)
-      const diagnostic = getGeneratorDiagnostic(error)
-
-      if (diagnostic) {
-        setReverseSyncNotice({
-          type: 'generator-diagnostic',
-          ...diagnostic,
-          status: 'error',
-        })
-      }
-
-      setSaveState('error')
-      saveResetTimeout.current = window.setTimeout(
-        () => setSaveState('idle'),
-        2400
-      )
-    }
-  }
-
-  const handleUseSourceChanges = async () => {
-    const result = await refreshProjectFromDisk(true)
-
-    if (result === 'updated') {
-      window.dispatchEvent(new Event('visualbuild:filesystem-changed'))
-      setReverseSyncNotice((notice) =>
-        notice && notice.type !== 'generator-diagnostic'
-          ? {
-              ...notice,
-              status: 'success',
-              message: 'Loaded the source version into the canvas.',
-            }
-          : null
-      )
-    }
-  }
-
-  const handleDragEnd = (event: DragEndEvent) => {
-    const activeData = getDragData(event.active.data.current)
-    const overData = getDragData(event.over?.data.current)
-
-    if (!activeData || !overData || !activePage) {
-      return
-    }
-
-    if (overData.kind === 'insertion-zone') {
-      if (activeData.kind === 'canvas-node') {
-        moveNode(
-          activePageId,
-          activeData.nodeId,
-          overData.parentNodeId,
-          overData.index
-        )
-        return
-      }
-
-      if (activeData.kind === 'primitive') {
-        if (overData.parentNodeId === null) {
-          addPrimitiveAt(activePageId, activeData.type, overData.index)
-        } else {
-          addPrimitiveToNodeAt(
-            overData.parentNodeId,
-            activeData.type,
-            overData.index
-          )
-        }
-        return
-      }
-
-      if (activeData.kind === 'sidebar-component') {
-        if (isGlobalComponent(activeData.type)) {
-          setGlobalComponent(activeData.type, setAppShellComponent)
-        } else if (overData.parentNodeId === null) {
-          addComponentAt(activePageId, activeData.type, overData.index)
-        } else {
-          addComponentToNodeAt(
-            overData.parentNodeId,
-            activeData.type,
-            overData.index
-          )
-        }
-      }
-
-      return
-    }
-
-    if (overData.kind === 'node-dropzone') {
-      if (activeData.kind === 'canvas-node') {
-        moveNode(
-          activePageId,
-          activeData.nodeId,
-          overData.nodeId,
-          Number.POSITIVE_INFINITY
-        )
-        return
-      }
-
-      if (activeData.kind === 'primitive') {
-        addPrimitiveToNode(overData.nodeId, activeData.type)
-        return
-      }
-
-      if (activeData.kind === 'sidebar-component') {
-        if (isGlobalComponent(activeData.type)) {
-          setGlobalComponent(activeData.type, setAppShellComponent)
-          return
-        }
-
-        addComponentToNode(overData.nodeId, activeData.type)
-      }
-
-      return
-    }
-
-    if (overData.kind !== 'canvas-root') {
-      return
-    }
-
-    if (activeData.kind === 'canvas-node') {
-      moveNode(
-        activePageId,
-        activeData.nodeId,
-        null,
-        Number.POSITIVE_INFINITY
-      )
-      return
-    }
-
-    if (activeData.kind === 'primitive') {
-      addPrimitiveAt(activePageId, activeData.type, Number.POSITIVE_INFINITY)
-      return
-    }
-
-    if (activeData.kind === 'sidebar-component') {
-      if (isGlobalComponent(activeData.type)) {
-        setGlobalComponent(activeData.type, setAppShellComponent)
-        return
-      }
-
-      addComponentAt(activePageId, activeData.type, Number.POSITIVE_INFINITY)
-    }
-  }
-
-  return (
-    <div className="flex flex-col h-full bg-gray-950 text-gray-100">
-      <Topbar
-        showCode={rightPanelOpen && rightPanelTab === 'code'}
-        previewMode={previewMode}
-        saveState={saveState}
-        onToggleCode={handleToggleCode}
-        onTogglePreview={handleTogglePreview}
-        onSave={() => {
-          void handleSave()
-        }}
-      />
-      {reverseSyncNotice && (
-        <ReverseSyncNotice
-          notice={reverseSyncNotice}
-          onDismiss={() => setReverseSyncNotice(null)}
-          onUseSource={() => {
-            void handleUseSourceChanges()
-          }}
-        />
-      )}
-      <DndContext
-        sensors={sensors}
-        collisionDetection={canvasCollisionDetection}
-        onDragEnd={handleDragEnd}
-      >
-        <div className="flex flex-1 overflow-hidden">
-          {!isProjectLoaded ? (
-            <div className="flex flex-1 items-center justify-center bg-[#eef1f4] text-sm text-gray-500">
-              Loading project...
-            </div>
-          ) : (
-            <>
-              {!previewMode && (
-                <WorkspacePanel
-                  side="left"
-                  open={leftPanelOpen}
-                  activeTab={leftPanelTab}
-                  tabs={[
-                    { id: 'files', label: 'Files' },
-                    { id: 'elements', label: 'Elements' },
-                  ]}
-                  onToggle={() => setLeftPanelOpen((value) => !value)}
-                  onTabChange={(tab) =>
-                    setLeftPanelTab(tab as 'files' | 'elements')
-                  }
-                >
-                  <ComponentSidebar
-                    view={leftPanelTab}
-                    selectedProjectFile={selectedProjectFile}
-                    onSelectProjectFile={handleSelectProjectFile}
-                  />
-                </WorkspacePanel>
-              )}
-              <div className="flex flex-col flex-1 overflow-hidden">
-                <div className="flex flex-1 overflow-hidden">
-                  <Canvas />
-                </div>
-                {!previewMode && (
-                  <PageSwitcher
-                    onSelectPage={handleSelectPage}
-                    onDeletePage={handleDeletePage}
-                  />
-                )}
-              </div>
-              {!previewMode && (
-                <WorkspacePanel
-                  side="right"
-                  open={rightPanelOpen}
-                  activeTab={rightPanelTab}
-                  tabs={[
-                    { id: 'code', label: 'Code' },
-                    { id: 'properties', label: 'Properties' },
-                  ]}
-                  onToggle={() => setRightPanelOpen((value) => !value)}
-                  onTabChange={(tab) => {
-                    setRightPanelTab(tab as 'code' | 'properties')
-                    setRightPanelOpen(true)
-                  }}
-                >
-                  {rightPanelTab === 'code' ? (
-                    <CodePanel
-                      embedded
-                      view={codeView}
-                      filePath={selectedProjectFile}
-                      onViewChange={setCodeView}
-                      onPageRegistered={handleSelectPage}
-                      onWorkspaceSelectFile={handleSelectCodeWorkspaceFile}
-                    />
-                  ) : (
-                    <PropertiesPanel embedded />
-                  )}
-                </WorkspacePanel>
-              )}
-            </>
-          )}
-        </div>
-      </DndContext>
-      {saveState === 'saving' && <SaveOverlay />}
-    </div>
-  )
-}
-
-function replacePathPrefix(
-  value: string,
-  previousPath: string,
-  targetPath: string
-) {
-  if (
-    value !== previousPath &&
-    !value.startsWith(`${previousPath}/`)
-  ) {
-    return value
-  }
-
-  return `${targetPath}${value.slice(previousPath.length)}`
-}
-
-function ReverseSyncNotice({
-  notice,
-  onDismiss,
-  onUseSource,
-}: {
-  notice: ReverseSyncNoticeState
-  onDismiss: () => void
-  onUseSource: () => void
-}) {
-  const tone =
-    notice.status === 'success'
-      ? 'border-emerald-400/30 bg-emerald-950/95'
-      : notice.status === 'conflict'
-        ? 'border-amber-400/30 bg-amber-950/95'
-        : 'border-red-400/30 bg-red-950/95'
-
-  return (
-    <div
-      className={`fixed right-4 top-16 z-[90] w-[390px] max-w-[calc(100vw-2rem)] rounded-md border px-4 py-3 text-white shadow-2xl ${tone}`}
-      role={notice.status === 'success' ? 'status' : 'alert'}
-      aria-live="polite"
-    >
-      <div className="flex items-start gap-3">
-        <div className="min-w-0 flex-1">
-          <p className="text-sm font-semibold">
-            {notice.type === 'generator-diagnostic'
-              ? notice.title
-              : notice.status === 'success'
-              ? 'Source synced'
-              : notice.status === 'conflict'
-                ? 'Choose the version to keep'
-                : 'Reverse sync paused'}
-          </p>
-          <p className="mt-1 text-xs leading-5 text-white/75">
-            {notice.message}
-          </p>
-          <p className="mt-1 truncate font-mono text-[10px] text-white/50">
-            {notice.path}
-          </p>
-          {notice.type === 'generator-diagnostic' &&
-            notice.suggestion && (
-              <p className="mt-2 text-xs leading-5 text-white/70">
-                {notice.suggestion}
-              </p>
-            )}
-          {notice.status === 'conflict' && (
-            <button
-              type="button"
-              onClick={onUseSource}
-              className="mt-3 cursor-pointer rounded bg-white px-3 py-1.5 text-xs font-semibold text-gray-950 hover:bg-gray-100"
-            >
-              Load source changes
-            </button>
-          )}
-        </div>
-        <button
-          type="button"
-          onClick={onDismiss}
-          aria-label="Dismiss reverse sync notice"
-          title="Dismiss"
-          className="flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded text-base text-white/60 hover:bg-white/10 hover:text-white"
-        >
-          x
-        </button>
-      </div>
-    </div>
-  )
-}
-
-function WorkspacePanel({
-  side,
-  open,
-  activeTab,
-  tabs,
-  onToggle,
-  onTabChange,
-  children,
-}: {
-  side: 'left' | 'right'
-  open: boolean
-  activeTab: string
-  tabs: { id: string; label: string }[]
-  onToggle: () => void
-  onTabChange: (tab: string) => void
-  children: React.ReactNode
-}) {
-  const borderClass = side === 'left' ? 'border-r' : 'border-l'
-  const collapseLabel = open
-    ? `Collapse ${side} panel`
-    : `Expand ${side} panel`
-  const arrow = side === 'left' ? (open ? '<' : '>') : open ? '>' : '<'
-
-  if (!open) {
-    return (
-      <div
-        className={`flex w-8 shrink-0 items-start justify-center border-white/[0.06] bg-panel pt-2 ${borderClass}`}
-      >
-        <button
-          type="button"
-          onClick={onToggle}
-          aria-label={collapseLabel}
-          title={collapseLabel}
-          className="flex h-7 w-7 cursor-pointer items-center justify-center rounded text-sm text-gray-400 transition-colors hover:bg-white/[0.08] hover:text-white"
-        >
-          {arrow}
-        </button>
-      </div>
-    )
-  }
-
-  return (
-    <aside
-      className={`${side === 'left' ? 'w-64' : 'w-[460px]'} ${borderClass} flex shrink-0 flex-col overflow-hidden border-white/[0.06] bg-panel`}
-    >
-      <div className="flex h-10 shrink-0 items-center border-b border-white/[0.06] px-1.5">
-        <div className="flex min-w-0 flex-1 items-center gap-1">
-          {tabs.map((tab) => (
-            <button
-              key={tab.id}
-              type="button"
-              onClick={() => onTabChange(tab.id)}
-              className={`h-7 cursor-pointer rounded px-2.5 text-[11px] font-medium transition-colors ${
-                activeTab === tab.id
-                  ? 'bg-white/[0.1] text-white'
-                  : 'text-gray-500 hover:bg-white/[0.05] hover:text-gray-200'
-              }`}
-            >
-              {tab.label}
-            </button>
-          ))}
-        </div>
-        <button
-          type="button"
-          onClick={onToggle}
-          aria-label={collapseLabel}
-          title={collapseLabel}
-          className="flex h-7 w-7 cursor-pointer items-center justify-center rounded text-sm text-gray-400 transition-colors hover:bg-white/[0.08] hover:text-white"
-        >
-          {arrow}
-        </button>
-      </div>
-      <div className="min-h-0 flex-1 overflow-hidden">{children}</div>
-    </aside>
-  )
-}
-
-function SaveOverlay() {
-  return (
-    <div
-      className="fixed inset-0 z-[100] flex items-center justify-center bg-gray-950/25 px-4 backdrop-blur-sm"
-      role="status"
-      aria-live="polite"
-      aria-label="Saving project"
-    >
-      <div className="flex w-[320px] max-w-full items-center gap-3 rounded-lg border border-white/10 bg-[#171a20] px-5 py-4 text-white shadow-2xl">
-        <span
-          className="h-5 w-5 shrink-0 animate-spin rounded-full border-2 border-white/20 border-t-blue-400"
-          aria-hidden="true"
-        />
-        <div className="min-w-0">
-          <p className="text-sm font-medium">Saving project...</p>
-          <p className="mt-0.5 text-xs text-gray-400">
-            Updating your React files
-          </p>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function delay(milliseconds: number) {
-  return new Promise<void>((resolve) => window.setTimeout(resolve, milliseconds))
-}
-
-function isGlobalComponent(type: ComponentType) {
-  return type === 'Navbar' || type === 'Footer'
-}
-
-function setGlobalComponent(
-  type: ComponentType,
-  setAppShellComponent: ReturnType<typeof useAppStore.getState>['setAppShellComponent']
-) {
-  setAppShellComponent(type === 'Footer' ? 'footer' : 'header', type)
-}
-
-function getDragData(data: unknown): DragData | null {
-  if (!data || typeof data !== 'object' || !('kind' in data)) {
-    return null
-  }
-
-  return data as DragData
-}
-
-const canvasCollisionDetection: CollisionDetection = (args) => {
-  const activeData = getDragData(args.active.data.current)
-  const isInvalidSelfTarget = (data: DragData | null) =>
-    activeData?.kind === 'canvas-node' &&
-    ((data?.kind === 'node-dropzone' &&
-      data.nodeId === activeData.nodeId) ||
-      (data?.kind === 'insertion-zone' &&
-        data.parentNodeId === activeData.nodeId))
-  const insertionContainers = args.droppableContainers.filter((container) => {
-    const data = getDragData(container.data.current)
-    return data?.kind === 'insertion-zone' && !isInvalidSelfTarget(data)
-  })
-  const insertionCollisions = pointerWithin({
-    ...args,
-    droppableContainers: insertionContainers,
-  })
-
-  if (insertionCollisions.length > 0) {
-    return insertionCollisions
-  }
-
-  const nodeContainers = args.droppableContainers.filter((container) => {
-    const data = getDragData(container.data.current)
-    return data?.kind === 'node-dropzone' && !isInvalidSelfTarget(data)
-  })
-  const nodeCollisions = pointerWithin({
-    ...args,
-    droppableContainers: nodeContainers,
-  })
-
-  if (nodeCollisions.length > 0) {
-    return [...nodeCollisions].sort((first, second) => {
-      const firstRect = args.droppableRects.get(first.id)
-      const secondRect = args.droppableRects.get(second.id)
-      const firstArea = firstRect ? firstRect.width * firstRect.height : Infinity
-      const secondArea = secondRect
-        ? secondRect.width * secondRect.height
-        : Infinity
-
-      return firstArea - secondArea
-    })
-  }
-
-  const pointerCollisions = pointerWithin(args)
-
-  return pointerCollisions.length > 0
-    ? pointerCollisions
-    : rectIntersection(args)
-}
+import {
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  pointerWithin,
+  rectIntersection,
+  useSensor,
+  useSensors,
+  type CollisionDetection,
+  type DragEndEvent,
+} from '@dnd-kit/core'
+import { sortableKeyboardCoordinates } from '@dnd-kit/sortable'
+import { useEffect, useRef, useState } from 'react'
+import Canvas from './components/Canvas'
+import CodePanel, { type CodeView } from './components/CodePanel'
+import ComponentSidebar from './components/ComponentSidebar'
+import DeploymentModal from './components/DeploymentModal'
+import PageSwitcher from './components/PageSwitcher'
+import PropertiesPanel from './components/PropertiesPanel'
+import Topbar, { type SaveState } from './components/Topbar'
+import { useAppStore } from './stores/useAppStore'
+import type {
+  ComponentType,
+  Page,
+  PrimitiveType,
+  VisualNode,
+} from './types'
+import { getPageSourcePath } from './utils/codegen'
+import { getGeneratorDiagnostic } from './utils/projectPersistence'
+import {
+  createEditorThemeStorageKey,
+  normalizeEditorTheme,
+  parseStoredEditorTheme,
+  resolveEditorTheme,
+} from './theme'
+import type { EditorThemeChoice } from './types'
+
+type DragData =
+  | { kind: 'sidebar-component'; type: ComponentType }
+  | { kind: 'custom-component'; name: string }
+  | { kind: 'primitive'; type: PrimitiveType }
+  | { kind: 'canvas-node'; nodeId: string }
+  | { kind: 'canvas-root' }
+  | { kind: 'node-dropzone'; nodeId: string }
+  | {
+      kind: 'insertion-zone'
+      parentNodeId: string | null
+      index: number
+    }
+
+interface ReverseSyncPayload {
+  type: 'reverse-sync-success' | 'reverse-sync-error'
+  path: string
+  pageId?: string
+  message: string
+}
+
+interface GeneratorDiagnosticPayload {
+  type: 'generator-diagnostic'
+  severity: 'error'
+  phase: 'generate'
+  code: string
+  title: string
+  message: string
+  path: string
+  suggestion?: string
+}
+
+interface FileSystemPayload {
+  type: 'filesystem-change'
+  path: string
+  action: 'add' | 'change' | 'unlink' | 'addDir' | 'unlinkDir'
+}
+
+interface ManagedPagesDeletedPayload {
+  type: 'managed-pages-deleted'
+  path: string
+  pageIds: string[]
+  message: string
+}
+
+interface ManagedPagesMovedPayload {
+  type: 'managed-pages-moved'
+  path: string
+  targetPath: string
+  pages: Array<{
+    pageId: string
+    previousPath: string
+    sourcePath: string
+  }>
+  message: string
+}
+
+type VisualBuildPayload =
+  | ReverseSyncPayload
+  | GeneratorDiagnosticPayload
+  | FileSystemPayload
+  | ManagedPagesDeletedPayload
+  | ManagedPagesMovedPayload
+
+type ReverseSyncNoticeState =
+  | (ReverseSyncPayload & {
+      status: 'success' | 'error' | 'conflict'
+    })
+  | (GeneratorDiagnosticPayload & {
+      status: 'error'
+    })
+
+export default function App() {
+  const [leftPanelOpen, setLeftPanelOpen] = useState(true)
+  const [leftPanelTab, setLeftPanelTab] =
+    useState<'files' | 'elements'>('elements')
+  const [rightPanelOpen, setRightPanelOpen] = useState(true)
+  const [rightPanelTab, setRightPanelTab] = useState<'code' | 'properties'>('code')
+  const [codeView, setCodeView] = useState<CodeView>('page')
+  const [selectedProjectFile, setSelectedProjectFile] = useState<string | null>(
+    null
+  )
+  const [saveState, setSaveState] = useState<SaveState>('idle')
+  const [deploymentOpen, setDeploymentOpen] = useState(false)
+  const [editorTheme, setEditorTheme] =
+    useState<EditorThemeChoice>('default')
+  const [reverseSyncNotice, setReverseSyncNotice] =
+    useState<ReverseSyncNoticeState | null>(null)
+  const saveResetTimeout = useRef<number | null>(null)
+  const preferencesApplied = useRef(false)
+  const themePreferenceApplied = useRef(false)
+  const {
+    projectName,
+    appShell,
+    pages,
+    activePageId,
+    selectedComponentId,
+    customComponents,
+    loadProject,
+    refreshCustomComponents,
+    refreshProjectFromDisk,
+    isProjectLoaded,
+    projectConfig,
+    previewMode,
+    togglePreviewMode,
+    saveProject,
+    addComponentAt,
+    addComponentToNode,
+    addComponentToNodeAt,
+    addCustomComponentAt,
+    addCustomComponentToNode,
+    addCustomComponentToNodeAt,
+    addPrimitiveAt,
+    addPrimitiveToNode,
+    addPrimitiveToNodeAt,
+    moveNode,
+    setActivePage,
+    setAppShellComponent,
+  } = useAppStore()
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 6,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  )
+  const activePage = pages.find((page) => page.id === activePageId)
+
+  useEffect(() => {
+    if (!isProjectLoaded || preferencesApplied.current) return
+
+    preferencesApplied.current = true
+    const panels = projectConfig.editor.panels
+    setLeftPanelOpen(panels.leftOpen)
+    setLeftPanelTab(panels.leftTab)
+    setRightPanelOpen(panels.rightOpen)
+    setRightPanelTab(panels.rightTab)
+    setCodeView(panels.codeView)
+  }, [isProjectLoaded, projectConfig])
+
+  useEffect(() => {
+    if (!isProjectLoaded || themePreferenceApplied.current) return
+
+    themePreferenceApplied.current = true
+    const storageKey = createEditorThemeStorageKey(projectName)
+    const storedTheme = parseStoredEditorTheme(
+      window.localStorage.getItem(storageKey)
+    )
+    setEditorTheme(
+      storedTheme ?? normalizeEditorTheme(projectConfig.editor.theme)
+    )
+  }, [isProjectLoaded, projectConfig.editor.theme, projectName])
+
+  useEffect(() => {
+    const applyTheme = () => {
+      document.documentElement.dataset.visualbuildTheme =
+        resolveEditorTheme(
+          editorTheme,
+          window.matchMedia('(prefers-color-scheme: light)').matches
+        )
+    }
+
+    applyTheme()
+    if (editorTheme !== 'system') return
+
+    const media = window.matchMedia('(prefers-color-scheme: light)')
+    media.addEventListener('change', applyTheme)
+    return () => media.removeEventListener('change', applyTheme)
+  }, [editorTheme])
+
+  const handleThemeChange = (theme: EditorThemeChoice) => {
+    setEditorTheme(theme)
+    window.localStorage.setItem(
+      createEditorThemeStorageKey(projectName),
+      theme
+    )
+  }
+
+  useEffect(() => {
+    if (!selectedComponentId || !activePage) return
+
+    const selectedNode = findVisualNodeById(
+      [
+        ...(appShell.header ? [appShell.header] : []),
+        activePage.root,
+        ...activePage.components,
+        ...(appShell.footer ? [appShell.footer] : []),
+      ],
+      selectedComponentId
+    )
+    const customOwner = findCustomOwnerForNode(
+      [
+        ...(appShell.header ? [appShell.header] : []),
+        ...activePage.components,
+        ...(appShell.footer ? [appShell.footer] : []),
+      ],
+      selectedComponentId,
+      customComponents
+    )
+    const customComponent = customComponents.find(
+      (component) =>
+        component.name === (customOwner?.type ?? selectedNode?.type)
+    )
+    const timer = window.setTimeout(() => {
+      setSelectedProjectFile(
+        customComponent?.importPath ?? getPageSourcePath(activePage)
+      )
+      setCodeView('file')
+    }, 0)
+
+    return () => window.clearTimeout(timer)
+  }, [
+    activePage,
+    appShell,
+    customComponents,
+    selectedComponentId,
+  ])
+
+  useEffect(() => {
+    void loadProject()
+  }, [loadProject])
+
+  useEffect(() => {
+    const eventSource = new EventSource('/__visualbuild/events')
+    const handleReverseSync = (event: MessageEvent<string>) => {
+      let payload: VisualBuildPayload
+
+      try {
+        payload = JSON.parse(event.data) as VisualBuildPayload
+      } catch {
+        return
+      }
+
+      if (payload.type === 'filesystem-change') {
+        window.dispatchEvent(
+          new CustomEvent('visualbuild:filesystem-changed', {
+            detail: payload,
+          })
+        )
+        if (/\.(jsx|tsx)$/i.test(payload.path)) {
+          void refreshCustomComponents()
+        }
+        return
+      }
+
+      if (payload.type === 'managed-pages-deleted') {
+        setSelectedProjectFile((currentPath) => {
+          if (
+            currentPath === payload.path ||
+            currentPath?.startsWith(`${payload.path}/`)
+          ) {
+            return null
+          }
+
+          return currentPath
+        })
+        setCodeView('page')
+        setReverseSyncNotice(null)
+        void refreshProjectFromDisk(true).then((result) => {
+          window.dispatchEvent(new Event('visualbuild:filesystem-changed'))
+
+          if (result !== 'updated') {
+            setReverseSyncNotice({
+              type: 'reverse-sync-error',
+              path: payload.path,
+              message: 'The page was deleted, but the editor could not refresh.',
+              status: 'error',
+            })
+            return
+          }
+
+          const nextActivePage = useAppStore
+            .getState()
+            .pages.find(
+              (page) => page.id === useAppStore.getState().activePageId
+            )
+
+          if (nextActivePage) {
+            window.history.replaceState({}, '', nextActivePage.route)
+          }
+        })
+        return
+      }
+
+      if (payload.type === 'managed-pages-moved') {
+        setSelectedProjectFile((currentPath) =>
+          currentPath
+            ? replacePathPrefix(
+                currentPath,
+                payload.path,
+                payload.targetPath
+              )
+            : null
+        )
+        setReverseSyncNotice(null)
+        void refreshProjectFromDisk(true).then((result) => {
+          window.dispatchEvent(new Event('visualbuild:filesystem-changed'))
+
+          if (result !== 'updated') {
+            setReverseSyncNotice({
+              type: 'reverse-sync-error',
+              path: payload.targetPath,
+              message:
+                'The page source moved, but the editor could not refresh.',
+              status: 'error',
+            })
+          }
+        })
+        return
+      }
+
+      if (payload.type === 'generator-diagnostic') {
+        setReverseSyncNotice({ ...payload, status: 'error' })
+        return
+      }
+
+      if (payload.type === 'reverse-sync-error') {
+        setReverseSyncNotice({ ...payload, status: 'error' })
+        return
+      }
+
+      void refreshProjectFromDisk().then((result) => {
+        if (result === 'updated') {
+          window.dispatchEvent(
+            new Event('visualbuild:filesystem-changed')
+          )
+          setReverseSyncNotice({ ...payload, status: 'success' })
+          return
+        }
+
+        setReverseSyncNotice({
+          ...payload,
+          status: result === 'skipped-dirty' ? 'conflict' : 'error',
+          message:
+            result === 'skipped-dirty'
+              ? 'Source changed while the canvas has unsaved edits.'
+              : 'The source changed, but the canvas could not refresh.',
+        })
+      })
+    }
+
+    eventSource.addEventListener(
+      'visualbuild',
+      handleReverseSync as EventListener
+    )
+
+    return () => eventSource.close()
+  }, [refreshCustomComponents, refreshProjectFromDisk])
+
+  useEffect(
+    () => () => {
+      if (saveResetTimeout.current !== null) {
+        window.clearTimeout(saveResetTimeout.current)
+      }
+    },
+    []
+  )
+
+  const handleToggleCode = () => {
+    if (previewMode) {
+      togglePreviewMode()
+      setRightPanelTab('code')
+      setRightPanelOpen(true)
+      return
+    }
+
+    if (rightPanelOpen && rightPanelTab === 'code') {
+      setRightPanelOpen(false)
+      return
+    }
+
+    setRightPanelTab('code')
+    setRightPanelOpen(true)
+  }
+
+  const handleTogglePreview = () => {
+    if (!previewMode && activePage) {
+      window.history.replaceState({}, '', activePage.route)
+    }
+
+    togglePreviewMode()
+  }
+
+  const handleSelectProjectFile = (path: string | null) => {
+    setSelectedProjectFile(path)
+
+    if (path) {
+      const normalizedPath = path.replace(/\\/g, '/')
+      const managedPage = pages.find(
+        (page) => getPageSourcePath(page) === normalizedPath
+      )
+
+      if (managedPage) {
+        setActivePage(managedPage.id)
+      }
+      setCodeView('file')
+      setRightPanelTab('code')
+      setRightPanelOpen(true)
+    } else if (codeView === 'file') {
+      setCodeView('page')
+    }
+  }
+
+  const handleSelectCodeWorkspaceFile = (path: string) => {
+    const normalizedPath = path.replace(/\\/g, '/')
+    const managedPage = pages.find(
+      (page) => getPageSourcePath(page) === normalizedPath
+    )
+
+    setSelectedProjectFile(path)
+    if (managedPage) {
+      setActivePage(managedPage.id)
+    }
+    setCodeView('file')
+  }
+
+  const handleSelectPage = (page: Page) => {
+    setSelectedProjectFile(getPageSourcePath(page))
+    setCodeView('file')
+    setRightPanelTab('code')
+    setRightPanelOpen(true)
+  }
+
+  const handleDeletePage = (page: Page) => {
+    if (selectedProjectFile === getPageSourcePath(page)) {
+      setSelectedProjectFile(null)
+      setCodeView('page')
+    }
+  }
+
+  const handleSave = async () => {
+    if (saveState === 'saving') {
+      return false
+    }
+
+    if (saveResetTimeout.current !== null) {
+      window.clearTimeout(saveResetTimeout.current)
+    }
+
+    setSaveState('saving')
+    const minimumOverlayTime = delay(450)
+
+    try {
+      await saveProject()
+      await minimumOverlayTime
+      setSaveState('saved')
+      saveResetTimeout.current = window.setTimeout(
+        () => setSaveState('idle'),
+        1200
+      )
+      return true
+    } catch (error) {
+      await minimumOverlayTime
+      console.error('Failed to save VisualBuild project', error)
+      const diagnostic = getGeneratorDiagnostic(error)
+
+      if (diagnostic) {
+        setReverseSyncNotice({
+          type: 'generator-diagnostic',
+          ...diagnostic,
+          status: 'error',
+        })
+      }
+
+      setSaveState('error')
+      saveResetTimeout.current = window.setTimeout(
+        () => setSaveState('idle'),
+        2400
+      )
+      return false
+    }
+  }
+
+  const handleUseSourceChanges = async () => {
+    const result = await refreshProjectFromDisk(true)
+
+    if (result === 'updated') {
+      window.dispatchEvent(new Event('visualbuild:filesystem-changed'))
+      setReverseSyncNotice((notice) =>
+        notice && notice.type !== 'generator-diagnostic'
+          ? {
+              ...notice,
+              status: 'success',
+              message: 'Loaded the source version into the canvas.',
+            }
+          : null
+      )
+    }
+  }
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const activeData = getDragData(event.active.data.current)
+    const overData = getDragData(event.over?.data.current)
+
+    if (!activeData || !overData || !activePage) {
+      return
+    }
+
+    if (overData.kind === 'insertion-zone') {
+      if (activeData.kind === 'canvas-node') {
+        moveNode(
+          activePageId,
+          activeData.nodeId,
+          overData.parentNodeId,
+          overData.index
+        )
+        return
+      }
+
+      if (activeData.kind === 'primitive') {
+        if (overData.parentNodeId === null) {
+          addPrimitiveAt(activePageId, activeData.type, overData.index)
+        } else {
+          addPrimitiveToNodeAt(
+            overData.parentNodeId,
+            activeData.type,
+            overData.index
+          )
+        }
+        return
+      }
+
+      if (activeData.kind === 'sidebar-component') {
+        if (isGlobalComponent(activeData.type)) {
+          setGlobalComponent(activeData.type, setAppShellComponent)
+        } else if (overData.parentNodeId === null) {
+          addComponentAt(activePageId, activeData.type, overData.index)
+        } else {
+          addComponentToNodeAt(
+            overData.parentNodeId,
+            activeData.type,
+            overData.index
+          )
+        }
+      }
+
+      if (activeData.kind === 'custom-component') {
+        if (overData.parentNodeId === null) {
+          addCustomComponentAt(activePageId, activeData.name, overData.index)
+        } else {
+          addCustomComponentToNodeAt(
+            overData.parentNodeId,
+            activeData.name,
+            overData.index
+          )
+        }
+      }
+
+      return
+    }
+
+    if (overData.kind === 'node-dropzone') {
+      if (activeData.kind === 'canvas-node') {
+        moveNode(
+          activePageId,
+          activeData.nodeId,
+          overData.nodeId,
+          Number.POSITIVE_INFINITY
+        )
+        return
+      }
+
+      if (activeData.kind === 'primitive') {
+        addPrimitiveToNode(overData.nodeId, activeData.type)
+        return
+      }
+
+      if (activeData.kind === 'sidebar-component') {
+        if (isGlobalComponent(activeData.type)) {
+          setGlobalComponent(activeData.type, setAppShellComponent)
+          return
+        }
+
+        addComponentToNode(overData.nodeId, activeData.type)
+      }
+
+      if (activeData.kind === 'custom-component') {
+        addCustomComponentToNode(overData.nodeId, activeData.name)
+      }
+
+      return
+    }
+
+    if (overData.kind !== 'canvas-root') {
+      return
+    }
+
+    if (activeData.kind === 'canvas-node') {
+      moveNode(
+        activePageId,
+        activeData.nodeId,
+        null,
+        Number.POSITIVE_INFINITY
+      )
+      return
+    }
+
+    if (activeData.kind === 'primitive') {
+      addPrimitiveAt(activePageId, activeData.type, Number.POSITIVE_INFINITY)
+      return
+    }
+
+    if (activeData.kind === 'sidebar-component') {
+      if (isGlobalComponent(activeData.type)) {
+        setGlobalComponent(activeData.type, setAppShellComponent)
+        return
+      }
+
+      addComponentAt(activePageId, activeData.type, Number.POSITIVE_INFINITY)
+    }
+
+    if (activeData.kind === 'custom-component') {
+      addCustomComponentAt(
+        activePageId,
+        activeData.name,
+        Number.POSITIVE_INFINITY
+      )
+    }
+  }
+
+  return (
+    <div className="vb-editor-shell flex flex-col h-full bg-gray-950 text-gray-100">
+      <Topbar
+        showCode={rightPanelOpen && rightPanelTab === 'code'}
+        previewMode={previewMode}
+        saveState={saveState}
+        editorTheme={editorTheme}
+        onToggleCode={handleToggleCode}
+        onTogglePreview={handleTogglePreview}
+        onSave={() => {
+          void handleSave()
+        }}
+        onDeploy={() => setDeploymentOpen(true)}
+        onThemeChange={handleThemeChange}
+      />
+      <DeploymentModal
+        open={deploymentOpen}
+        onClose={() => setDeploymentOpen(false)}
+        onBeforeDeploy={handleSave}
+      />
+      {reverseSyncNotice && (
+        <ReverseSyncNotice
+          notice={reverseSyncNotice}
+          onDismiss={() => setReverseSyncNotice(null)}
+          onUseSource={() => {
+            void handleUseSourceChanges()
+          }}
+        />
+      )}
+      <DndContext
+        sensors={sensors}
+        collisionDetection={canvasCollisionDetection}
+        onDragEnd={handleDragEnd}
+      >
+        <div className="flex flex-1 overflow-hidden">
+          {!isProjectLoaded ? (
+            <div data-vb-editor-chrome className="flex flex-1 items-center justify-center bg-[#eef1f4] text-sm text-gray-500">
+              Loading project...
+            </div>
+          ) : (
+            <>
+              {!previewMode && (
+                <WorkspacePanel
+                  side="left"
+                  open={leftPanelOpen}
+                  activeTab={leftPanelTab}
+                  tabs={[
+                    { id: 'files', label: 'Files' },
+                    { id: 'elements', label: 'Elements' },
+                  ]}
+                  onToggle={() => setLeftPanelOpen((value) => !value)}
+                  onTabChange={(tab) =>
+                    setLeftPanelTab(tab as 'files' | 'elements')
+                  }
+                >
+                  <ComponentSidebar
+                    view={leftPanelTab}
+                    selectedProjectFile={selectedProjectFile}
+                    onSelectProjectFile={handleSelectProjectFile}
+                  />
+                </WorkspacePanel>
+              )}
+              <div className="flex flex-col flex-1 overflow-hidden">
+                <div className="flex flex-1 overflow-hidden">
+                  <Canvas />
+                </div>
+                {!previewMode && (
+                  <PageSwitcher
+                    onSelectPage={handleSelectPage}
+                    onDeletePage={handleDeletePage}
+                  />
+                )}
+              </div>
+              {!previewMode && (
+                <WorkspacePanel
+                  side="right"
+                  open={rightPanelOpen}
+                  activeTab={rightPanelTab}
+                  tabs={[
+                    { id: 'code', label: 'Code' },
+                    { id: 'properties', label: 'Properties' },
+                  ]}
+                  onToggle={() => setRightPanelOpen((value) => !value)}
+                  onTabChange={(tab) => {
+                    setRightPanelTab(tab as 'code' | 'properties')
+                    setRightPanelOpen(true)
+                  }}
+                >
+                  {rightPanelTab === 'code' ? (
+                    <CodePanel
+                      embedded
+                      view={codeView}
+                      filePath={selectedProjectFile}
+                      onViewChange={setCodeView}
+                      onPageRegistered={handleSelectPage}
+                      onWorkspaceSelectFile={handleSelectCodeWorkspaceFile}
+                    />
+                  ) : (
+                    <PropertiesPanel embedded />
+                  )}
+                </WorkspacePanel>
+              )}
+            </>
+          )}
+        </div>
+      </DndContext>
+      {saveState === 'saving' && <SaveOverlay />}
+    </div>
+  )
+}
+
+function replacePathPrefix(
+  value: string,
+  previousPath: string,
+  targetPath: string
+) {
+  if (
+    value !== previousPath &&
+    !value.startsWith(`${previousPath}/`)
+  ) {
+    return value
+  }
+
+  return `${targetPath}${value.slice(previousPath.length)}`
+}
+
+function ReverseSyncNotice({
+  notice,
+  onDismiss,
+  onUseSource,
+}: {
+  notice: ReverseSyncNoticeState
+  onDismiss: () => void
+  onUseSource: () => void
+}) {
+  const tone =
+    notice.status === 'success'
+      ? 'border-emerald-400/30 bg-emerald-950/95'
+      : notice.status === 'conflict'
+        ? 'border-amber-400/30 bg-amber-950/95'
+        : 'border-red-400/30 bg-red-950/95'
+
+  return (
+    <div
+      className={`fixed right-4 top-16 z-[90] w-[390px] max-w-[calc(100vw-2rem)] rounded-md border px-4 py-3 text-white shadow-2xl ${tone}`}
+      role={notice.status === 'success' ? 'status' : 'alert'}
+      aria-live="polite"
+    >
+      <div className="flex items-start gap-3">
+        <div className="min-w-0 flex-1">
+          <p className="text-sm font-semibold">
+            {notice.type === 'generator-diagnostic'
+              ? notice.title
+              : notice.status === 'success'
+              ? 'Source synced'
+              : notice.status === 'conflict'
+                ? 'Choose the version to keep'
+                : 'Reverse sync paused'}
+          </p>
+          <p className="mt-1 text-xs leading-5 text-white/75">
+            {notice.message}
+          </p>
+          <p className="mt-1 truncate font-mono text-[10px] text-white/50">
+            {notice.path}
+          </p>
+          {notice.type === 'generator-diagnostic' &&
+            notice.suggestion && (
+              <p className="mt-2 text-xs leading-5 text-white/70">
+                {notice.suggestion}
+              </p>
+            )}
+          {notice.status === 'conflict' && (
+            <button
+              type="button"
+              onClick={onUseSource}
+              className="mt-3 cursor-pointer rounded bg-white px-3 py-1.5 text-xs font-semibold text-gray-950 hover:bg-gray-100"
+            >
+              Load source changes
+            </button>
+          )}
+        </div>
+        <button
+          type="button"
+          onClick={onDismiss}
+          aria-label="Dismiss reverse sync notice"
+          title="Dismiss"
+          className="flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded text-base text-white/60 hover:bg-white/10 hover:text-white"
+        >
+          x
+        </button>
+      </div>
+    </div>
+  )
+}
+
+function WorkspacePanel({
+  side,
+  open,
+  activeTab,
+  tabs,
+  onToggle,
+  onTabChange,
+  children,
+}: {
+  side: 'left' | 'right'
+  open: boolean
+  activeTab: string
+  tabs: { id: string; label: string }[]
+  onToggle: () => void
+  onTabChange: (tab: string) => void
+  children: React.ReactNode
+}) {
+  const borderClass = side === 'left' ? 'border-r' : 'border-l'
+  const collapseLabel = open
+    ? `Collapse ${side} panel`
+    : `Expand ${side} panel`
+  const arrow = side === 'left' ? (open ? '<' : '>') : open ? '>' : '<'
+
+  if (!open) {
+    return (
+      <div
+        data-vb-editor-chrome
+        className={`flex w-8 shrink-0 items-start justify-center border-white/[0.06] bg-panel pt-2 ${borderClass}`}
+      >
+        <button
+          type="button"
+          onClick={onToggle}
+          aria-label={collapseLabel}
+          title={collapseLabel}
+          className="flex h-7 w-7 cursor-pointer items-center justify-center rounded text-sm text-gray-400 transition-colors hover:bg-white/[0.08] hover:text-white"
+        >
+          {arrow}
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <aside
+      data-vb-editor-chrome
+      className={`${side === 'left' ? 'w-64' : 'w-[460px]'} ${borderClass} flex shrink-0 flex-col overflow-hidden border-white/[0.06] bg-panel`}
+    >
+      <div className="flex h-10 shrink-0 items-center border-b border-white/[0.06] px-1.5">
+        <div className="flex min-w-0 flex-1 items-center gap-1">
+          {tabs.map((tab) => (
+            <button
+              key={tab.id}
+              type="button"
+              onClick={() => onTabChange(tab.id)}
+              className={`h-7 cursor-pointer rounded px-2.5 text-[11px] font-medium transition-colors ${
+                activeTab === tab.id
+                  ? 'bg-white/[0.1] text-white'
+                  : 'text-gray-500 hover:bg-white/[0.05] hover:text-gray-200'
+              }`}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+        <button
+          type="button"
+          onClick={onToggle}
+          aria-label={collapseLabel}
+          title={collapseLabel}
+          className="flex h-7 w-7 cursor-pointer items-center justify-center rounded text-sm text-gray-400 transition-colors hover:bg-white/[0.08] hover:text-white"
+        >
+          {arrow}
+        </button>
+      </div>
+      <div className="min-h-0 flex-1 overflow-hidden">{children}</div>
+    </aside>
+  )
+}
+
+function SaveOverlay() {
+  return (
+    <div
+      data-vb-editor-chrome
+      className="fixed inset-0 z-[100] flex items-center justify-center bg-gray-950/25 px-4 backdrop-blur-sm"
+      role="status"
+      aria-live="polite"
+      aria-label="Saving project"
+    >
+      <div className="flex w-[320px] max-w-full items-center gap-3 rounded-lg border border-white/10 bg-[#171a20] px-5 py-4 text-white shadow-2xl">
+        <span
+          className="h-5 w-5 shrink-0 animate-spin rounded-full border-2 border-white/20 border-t-blue-400"
+          aria-hidden="true"
+        />
+        <div className="min-w-0">
+          <p className="text-sm font-medium">Saving project...</p>
+          <p className="mt-0.5 text-xs text-gray-400">
+            Updating your React files
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function delay(milliseconds: number) {
+  return new Promise<void>((resolve) => window.setTimeout(resolve, milliseconds))
+}
+
+function findVisualNodeById(
+  nodes: VisualNode[],
+  nodeId: string
+): VisualNode | null {
+  for (const node of nodes) {
+    if (node.id === nodeId) return node
+    const child = findVisualNodeById(node.children, nodeId)
+    if (child) return child
+    const componentTree = node.props.componentTree
+    if (
+      typeof componentTree === 'object' &&
+      componentTree !== null &&
+      Array.isArray((componentTree as { children?: unknown }).children)
+    ) {
+      const definitionChild = findVisualNodeById(
+        (componentTree as { children: VisualNode[] }).children,
+        nodeId
+      )
+      if (definitionChild) return definitionChild
+    }
+  }
+
+  return null
+}
+
+function findCustomOwnerForNode(
+  nodes: VisualNode[],
+  nodeId: string,
+  definitions: { name: string }[]
+) {
+  const names = new Set(definitions.map((definition) => definition.name))
+
+  for (const node of nodes) {
+    if (names.has(node.type)) {
+      const tree = node.props.componentTree
+      const children =
+        typeof tree === 'object' &&
+        tree !== null &&
+        Array.isArray((tree as { children?: unknown }).children)
+          ? (tree as { children: VisualNode[] }).children
+          : []
+      if (
+        node.id === nodeId ||
+        findVisualNodeById(children, nodeId)
+      ) {
+        return node
+      }
+    }
+
+    const nestedOwner = findCustomOwnerForNode(
+      node.children,
+      nodeId,
+      definitions
+    )
+    if (nestedOwner) return nestedOwner
+  }
+
+  return null
+}
+
+function isGlobalComponent(type: ComponentType) {
+  return type === 'Navbar' || type === 'Footer'
+}
+
+function setGlobalComponent(
+  type: ComponentType,
+  setAppShellComponent: ReturnType<typeof useAppStore.getState>['setAppShellComponent']
+) {
+  setAppShellComponent(type === 'Footer' ? 'footer' : 'header', type)
+}
+
+function getDragData(data: unknown): DragData | null {
+  if (!data || typeof data !== 'object' || !('kind' in data)) {
+    return null
+  }
+
+  return data as DragData
+}
+
+const canvasCollisionDetection: CollisionDetection = (args) => {
+  const activeData = getDragData(args.active.data.current)
+  const isInvalidSelfTarget = (data: DragData | null) =>
+    activeData?.kind === 'canvas-node' &&
+    ((data?.kind === 'node-dropzone' &&
+      data.nodeId === activeData.nodeId) ||
+      (data?.kind === 'insertion-zone' &&
+        data.parentNodeId === activeData.nodeId))
+  const insertionContainers = args.droppableContainers.filter((container) => {
+    const data = getDragData(container.data.current)
+    return data?.kind === 'insertion-zone' && !isInvalidSelfTarget(data)
+  })
+  const insertionCollisions = pointerWithin({
+    ...args,
+    droppableContainers: insertionContainers,
+  })
+
+  if (insertionCollisions.length > 0) {
+    return insertionCollisions
+  }
+
+  const nodeContainers = args.droppableContainers.filter((container) => {
+    const data = getDragData(container.data.current)
+    return data?.kind === 'node-dropzone' && !isInvalidSelfTarget(data)
+  })
+  const nodeCollisions = pointerWithin({
+    ...args,
+    droppableContainers: nodeContainers,
+  })
+
+  if (nodeCollisions.length > 0) {
+    return [...nodeCollisions].sort((first, second) => {
+      const firstRect = args.droppableRects.get(first.id)
+      const secondRect = args.droppableRects.get(second.id)
+      const firstArea = firstRect ? firstRect.width * firstRect.height : Infinity
+      const secondArea = secondRect
+        ? secondRect.width * secondRect.height
+        : Infinity
+
+      return firstArea - secondArea
+    })
+  }
+
+  const pointerCollisions = pointerWithin(args)
+
+  return pointerCollisions.length > 0
+    ? pointerCollisions
+    : rectIntersection(args)
+}