create-visualbuild-app 0.1.0

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

@@ -0,0 +1,874 @@
+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)
+}