@antigenic-oss/paint 0.1.0

package/src/components/Editor.tsx

@@ -0,0 +1,90 @@
+'use client'
+
+import { Suspense, useCallback } from 'react'
+import { useEditorStore } from '@/store'
+import { useKeyboardShortcuts } from '@/hooks/useKeyboardShortcuts'
+import { usePostMessage } from '@/hooks/usePostMessage'
+import { useBridge } from '@/hooks/useBridge'
+import { TopBar } from './TopBar'
+import { LeftPanel } from './left-panel/LeftPanel'
+import { RightPanel } from './right-panel/RightPanel'
+import { PreviewFrame } from './PreviewFrame'
+import { ConnectModal } from './ConnectModal'
+import { ErrorBoundary } from './common/ErrorBoundary'
+import { ToastContainer } from './common/ToastContainer'
+
+function PanelLoading() {
+  return (
+    <div
+      className="flex items-center justify-center h-full"
+      style={{ background: 'var(--bg-secondary)' }}
+    >
+      <div className="text-xs" style={{ color: 'var(--text-muted)' }}>
+        Loading...
+      </div>
+    </div>
+  )
+}
+
+export function Editor() {
+  const targetUrl = useEditorStore((s) => s.targetUrl)
+  const connectionStatus = useEditorStore((s) => s.connectionStatus)
+  const rightPanelOpen = useEditorStore((s) => s.rightPanelOpen)
+  const leftPanelWidth = useEditorStore((s) => s.leftPanelWidth)
+  const rightPanelWidth = useEditorStore((s) => s.rightPanelWidth)
+  const { sendToInspector } = usePostMessage()
+
+  useKeyboardShortcuts()
+  useBridge()
+
+  // Hide iframe hover overlay when interacting with any panel outside the canvas
+  const hideHover = useCallback(() => {
+    sendToInspector({ type: 'HIDE_HOVER' })
+  }, [sendToInspector])
+
+  return (
+    <div
+      className="flex flex-col h-screen"
+      style={{ background: 'var(--bg-primary)' }}
+    >
+      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+      <div onMouseDown={hideHover} onMouseEnter={hideHover}>
+        <TopBar />
+      </div>
+      <div className="flex flex-1 overflow-hidden">
+        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+        <div onMouseDown={hideHover} onMouseEnter={hideHover} className="flex">
+          <ErrorBoundary panelName="Layers panel">
+            <Suspense fallback={<PanelLoading />}>
+              <LeftPanel width={leftPanelWidth} />
+            </Suspense>
+          </ErrorBoundary>
+        </div>
+        <div className="flex-1 min-w-0 relative">
+          <ErrorBoundary panelName="Preview">
+            <PreviewFrame />
+          </ErrorBoundary>
+        </div>
+        {rightPanelOpen && (
+          // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+          <div
+            onMouseDown={hideHover}
+            onMouseEnter={hideHover}
+            className="flex"
+          >
+            <ErrorBoundary panelName="Design panel">
+              <Suspense fallback={<PanelLoading />}>
+                <RightPanel width={rightPanelWidth} />
+              </Suspense>
+            </ErrorBoundary>
+          </div>
+        )}
+      </div>
+      <ToastContainer />
+      {(!targetUrl ||
+        ['confirming', 'scanning', 'connecting'].includes(
+          connectionStatus,
+        )) && <ConnectModal />}
+    </div>
+  )
+}

package/src/components/PageSelector.tsx

@@ -0,0 +1,208 @@
+'use client'
+
+import { useState, useRef, useEffect, useCallback } from 'react'
+import { useEditorStore } from '@/store'
+import { sendViaIframe } from '@/hooks/usePostMessage'
+
+export function PageSelector() {
+  const [isOpen, setIsOpen] = useState(false)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+  const pageLinks = useEditorStore((s) => s.pageLinks)
+  const currentPagePath = useEditorStore((s) => s.currentPagePath)
+  const setCurrentPagePath = useEditorStore((s) => s.setCurrentPagePath)
+  const targetUrl = useEditorStore((s) => s.targetUrl)
+  const setConnectionStatus = useEditorStore((s) => s.setConnectionStatus)
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    if (!isOpen) return
+    const handleClick = (e: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(e.target as Node)
+      ) {
+        setIsOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClick)
+    return () => document.removeEventListener('mousedown', handleClick)
+  }, [isOpen])
+
+  const handleNavigate = useCallback(
+    (path: string) => {
+      if (!targetUrl) return
+      setCurrentPagePath(path)
+      sendViaIframe({ type: 'NAVIGATE_TO', payload: { path } })
+      setIsOpen(false)
+    },
+    [targetUrl, setCurrentPagePath],
+  )
+
+  const handleRefresh = useCallback(() => {
+    setConnectionStatus('connecting')
+  }, [setConnectionStatus])
+
+  // Build page list: always include "/" plus discovered links
+  const allPages = useRef<Array<{ href: string; text: string }>>([])
+  const seen = new Set<string>()
+  const pages: Array<{ href: string; text: string }> = []
+
+  // Always add root
+  pages.push({ href: '/', text: 'Home' })
+  seen.add('/')
+
+  // Add discovered links (deduplicated)
+  for (const link of pageLinks) {
+    if (!seen.has(link.href)) {
+      seen.add(link.href)
+      pages.push(link)
+    }
+  }
+  allPages.current = pages
+
+  return (
+    <div ref={dropdownRef} className="relative flex items-center gap-1">
+      {/* Page dropdown */}
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-1.5 px-2 py-1 text-[11px] rounded transition-colors"
+        style={{
+          color: 'var(--text-secondary)',
+          background: isOpen ? 'var(--bg-hover)' : 'transparent',
+        }}
+        title="Navigate to another page"
+      >
+        <span className="truncate max-w-[140px] font-medium">
+          {currentPagePath}
+        </span>
+        <svg
+          width="8"
+          height="8"
+          viewBox="0 0 8 8"
+          fill="currentColor"
+          style={{
+            transform: isOpen ? 'rotate(180deg)' : 'none',
+            transition: 'transform 0.15s',
+          }}
+        >
+          <path
+            d="M1 2.5L4 5.5L7 2.5"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            fill="none"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </button>
+
+      {/* Refresh button */}
+      <button
+        onClick={handleRefresh}
+        className="flex items-center justify-center w-6 h-6 rounded transition-colors hover:bg-[var(--bg-hover)]"
+        style={{ color: 'var(--text-muted)' }}
+        title="Refresh page"
+      >
+        <svg
+          width="12"
+          height="12"
+          viewBox="0 0 16 16"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M1 1v5h5" />
+          <path d="M3.51 10a6 6 0 1 0 .49-5.5L1 6" />
+        </svg>
+      </button>
+
+      {/* Dropdown */}
+      {isOpen && (
+        <div
+          className="absolute top-full left-0 mt-1 w-60 max-h-72 overflow-y-auto rounded shadow-lg z-50"
+          style={{
+            background: 'var(--bg-secondary)',
+            border: '1px solid var(--border)',
+          }}
+        >
+          {/* Header */}
+          <div
+            className="px-3 py-1.5 text-[10px] font-medium uppercase tracking-wider"
+            style={{
+              color: 'var(--text-muted)',
+              borderBottom: '1px solid var(--border)',
+            }}
+          >
+            Pages ({pages.length})
+          </div>
+
+          {pages.map((page, i) => {
+            const isActive = page.href === currentPagePath
+            return (
+              <button
+                key={page.href}
+                onClick={() => handleNavigate(page.href)}
+                className="w-full text-left px-3 py-1.5 text-xs transition-colors flex items-center gap-2"
+                style={{
+                  color: isActive ? 'var(--accent)' : 'var(--text-primary)',
+                  background: isActive
+                    ? 'rgba(74, 158, 255, 0.08)'
+                    : 'transparent',
+                  borderBottom:
+                    i < pages.length - 1 ? '1px solid var(--border)' : 'none',
+                }}
+                title={page.href}
+              >
+                {/* Page icon */}
+                <svg
+                  width="12"
+                  height="12"
+                  viewBox="0 0 16 16"
+                  fill="none"
+                  stroke={isActive ? 'var(--accent)' : 'var(--text-muted)'}
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="flex-shrink-0"
+                >
+                  <rect x="2" y="2" width="12" height="12" rx="1.5" />
+                  <path d="M2 5.5h12" />
+                </svg>
+                <div className="truncate flex-1">
+                  <div className="truncate font-medium">
+                    {page.text || page.href}
+                  </div>
+                  {page.text && page.href !== page.text && (
+                    <div
+                      className="truncate"
+                      style={{ color: 'var(--text-muted)', fontSize: '10px' }}
+                    >
+                      {page.href}
+                    </div>
+                  )}
+                </div>
+                {isActive && (
+                  <div
+                    className="w-1.5 h-1.5 rounded-full flex-shrink-0"
+                    style={{ background: 'var(--accent)' }}
+                  />
+                )}
+              </button>
+            )
+          })}
+
+          {pages.length <= 1 && (
+            <div
+              className="px-3 py-2 text-[10px] text-center"
+              style={{ color: 'var(--text-muted)' }}
+            >
+              No additional pages found
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/PreviewFrame.tsx

@@ -0,0 +1,299 @@
+'use client'
+
+import { useEffect, useRef, useCallback, useState } from 'react'
+import { useEditorStore } from '@/store'
+import { usePostMessage, isEditorOnLocalhost } from '@/hooks/usePostMessage'
+import {
+  PREVIEW_WIDTH_MIN,
+  PREVIEW_WIDTH_MAX,
+  PROXY_HEADER,
+} from '@/lib/constants'
+import { ResponsiveToolbar } from './ResponsiveToolbar'
+
+/**
+ * Build the proxy URL for the iframe. Routes through /api/proxy/
+ * so the proxy can inject the inspector script and strip security
+ * headers (COEP, CSP, X-Frame-Options) that would block the editor.
+ * Used only when the editor runs on localhost.
+ */
+function buildProxyUrl(targetUrl: string, pagePath: string): string {
+  const path = pagePath === '/' ? '' : pagePath
+  const encoded = encodeURIComponent(targetUrl)
+  return `/api/proxy${path}?${PROXY_HEADER}=${encoded}`
+}
+
+/**
+ * Build the bridge proxy URL for the iframe. Routes through the bridge server
+ * running on the user's machine. The bridge injects the inspector script
+ * and strips security headers, just like the local proxy.
+ * Used when the editor is deployed remotely and a bridge is connected.
+ */
+function buildBridgeUrl(
+  bridgeUrl: string,
+  targetUrl: string,
+  pagePath: string,
+): string {
+  const path = pagePath === '/' ? '' : pagePath
+  const encoded = encodeURIComponent(targetUrl)
+  return `${bridgeUrl}${path}?${PROXY_HEADER}=${encoded}`
+}
+
+/**
+ * Build the direct URL for the iframe. Loads the target page directly
+ * without the proxy. Used when the editor is deployed remotely (e.g. Vercel)
+ * and can't proxy to the user's localhost.
+ * Requires the user to manually add the inspector script tag to their project.
+ */
+function buildDirectUrl(targetUrl: string, pagePath: string): string {
+  const path = pagePath === '/' ? '' : pagePath
+  return `${targetUrl}${path}`
+}
+
+/**
+ * Build the appropriate iframe URL based on whether the editor is local,
+ * has a bridge connection, or is remote without bridge.
+ */
+function buildIframeUrl(targetUrl: string, pagePath: string): string {
+  if (isEditorOnLocalhost()) {
+    return buildProxyUrl(targetUrl, pagePath)
+  }
+  // Check for bridge connection
+  const bridgeUrl = useEditorStore.getState().bridgeUrl
+  if (bridgeUrl) {
+    return buildBridgeUrl(bridgeUrl, targetUrl, pagePath)
+  }
+  return buildDirectUrl(targetUrl, pagePath)
+}
+
+export function PreviewFrame() {
+  const targetUrl = useEditorStore((s) => s.targetUrl)
+  const connectionStatus = useEditorStore((s) => s.connectionStatus)
+  const previewWidth = useEditorStore((s) => s.previewWidth)
+  const setPreviewWidth = useEditorStore((s) => s.setPreviewWidth)
+  const currentPagePath = useEditorStore((s) => s.currentPagePath)
+  const setConnectionStatus = useEditorStore((s) => s.setConnectionStatus)
+  const viewMode = useEditorStore((s) => s.viewMode)
+  const { iframeRef, sendToInspector } = usePostMessage()
+  const containerRef = useRef<HTMLDivElement>(null)
+  const lastSrcRef = useRef<string | null>(null)
+  const [isDragging, setIsDragging] = useState(false)
+
+  // Handle initial connection — load through proxy
+  useEffect(() => {
+    if (!targetUrl || connectionStatus !== 'connecting') return
+
+    const iframe = iframeRef.current
+    if (!iframe) return
+
+    const newSrc = buildIframeUrl(targetUrl, currentPagePath)
+
+    if (lastSrcRef.current !== newSrc) {
+      lastSrcRef.current = newSrc
+      iframe.src = newSrc
+    }
+
+    const handleError = () => {
+      setConnectionStatus('disconnected')
+    }
+
+    iframe.addEventListener('error', handleError)
+
+    return () => {
+      iframe.removeEventListener('error', handleError)
+    }
+  }, [
+    targetUrl,
+    connectionStatus,
+    currentPagePath,
+    iframeRef,
+    setConnectionStatus,
+  ])
+
+  // Handle page navigation when already connected
+  useEffect(() => {
+    if (!targetUrl || connectionStatus !== 'connected') return
+
+    const iframe = iframeRef.current
+    if (!iframe) return
+
+    const newSrc = buildIframeUrl(targetUrl, currentPagePath)
+
+    if (lastSrcRef.current !== newSrc) {
+      lastSrcRef.current = newSrc
+      iframe.src = newSrc
+    }
+  }, [targetUrl, connectionStatus, currentPagePath, iframeRef])
+
+  // Preview mode — stay on proxy URL but disable inspector overlays.
+  // Previously this switched to the direct URL for full JS interactivity,
+  // but that breaks when the target page embeds the external inspector script
+  // (e.g. from Vercel): the external inspector starts with selection ON and
+  // can't receive SET_SELECTION_MODE:false due to cross-origin postMessage
+  // restrictions. Keeping the proxy URL ensures the only inspector running
+  // is the proxy-injected one (same-origin, fully controllable).
+  // The proxy already preserves enough scripts for most apps (Expo/RN Web
+  // bundles load fine through the proxy).
+  useEffect(() => {
+    if (!targetUrl || connectionStatus !== 'connected') return
+
+    // Selection mode is managed by TopBar via sendToInspector.
+    // When exiting preview, TopBar re-enables selection and the proxy
+    // iframe is still loaded — no reload needed.
+  }, [viewMode, targetUrl, connectionStatus, currentPagePath, iframeRef])
+
+  // Drag resize logic — symmetric from center
+  const dragStateRef = useRef<{
+    startX: number
+    startWidth: number
+    side: 'left' | 'right'
+  } | null>(null)
+
+  const handleDragStart = useCallback(
+    (e: React.MouseEvent, side: 'left' | 'right') => {
+      e.preventDefault()
+      dragStateRef.current = {
+        startX: e.clientX,
+        startWidth: previewWidth,
+        side,
+      }
+      setIsDragging(true)
+    },
+    [previewWidth],
+  )
+
+  useEffect(() => {
+    if (!isDragging) return
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const state = dragStateRef.current
+      if (!state) return
+      const delta = e.clientX - state.startX
+      // Symmetric: dragging right handle right = wider, left handle left = wider
+      const direction = state.side === 'right' ? 1 : -1
+      const newWidth = Math.round(state.startWidth + delta * direction * 2)
+      const clamped = Math.min(
+        Math.max(newWidth, PREVIEW_WIDTH_MIN),
+        PREVIEW_WIDTH_MAX,
+      )
+      setPreviewWidth(clamped)
+      sendToInspector({ type: 'SET_BREAKPOINT', payload: { width: clamped } })
+    }
+
+    const handleMouseUp = () => {
+      dragStateRef.current = null
+      setIsDragging(false)
+    }
+
+    document.addEventListener('mousemove', handleMouseMove)
+    document.addEventListener('mouseup', handleMouseUp)
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove)
+      document.removeEventListener('mouseup', handleMouseUp)
+    }
+  }, [isDragging, setPreviewWidth, sendToInspector])
+
+  // Check if preview fills container (no handles needed)
+  const containerWidth = containerRef.current?.clientWidth ?? 0
+  const isFullWidth = previewWidth >= containerWidth && containerWidth > 0
+
+  if (!targetUrl) {
+    return (
+      <div
+        className="flex items-center justify-center h-full"
+        style={{ background: 'var(--bg-primary)' }}
+      >
+        <div className="text-center">
+          <div
+            className="text-lg font-medium mb-2"
+            style={{ color: 'var(--text-secondary)' }}
+          >
+            No project connected
+          </div>
+          <div className="text-sm" style={{ color: 'var(--text-muted)' }}>
+            Enter a localhost URL above to get started
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  const showHandles = !isFullWidth && connectionStatus === 'connected'
+
+  return (
+    <div
+      className="flex flex-col h-full"
+      style={{ background: 'var(--bg-primary)' }}
+    >
+      {connectionStatus === 'connected' && <ResponsiveToolbar />}
+
+      <div
+        ref={containerRef}
+        className="flex items-start justify-center flex-1 overflow-auto relative"
+        style={{ padding: '0' }}
+      >
+        {/* Left drag handle */}
+        {showHandles && (
+          <div
+            onMouseDown={(e) => handleDragStart(e, 'left')}
+            className="absolute top-0 bottom-0 z-10 flex items-center justify-center"
+            style={{
+              width: 6,
+              left: `calc(50% - ${previewWidth / 2}px - 6px)`,
+              cursor: 'col-resize',
+            }}
+          >
+            <div
+              className="w-1 rounded-full transition-colors"
+              style={{
+                height: 40,
+                background: isDragging ? 'var(--accent)' : 'var(--border)',
+              }}
+            />
+          </div>
+        )}
+
+        <div
+          className="h-full mx-auto"
+          style={{
+            width: isFullWidth ? '100%' : previewWidth,
+            maxWidth: '100%',
+            transition: isDragging ? 'none' : 'width 0.2s ease',
+          }}
+        >
+          <iframe
+            ref={iframeRef}
+            className="w-full h-full border-0"
+            style={{
+              background: '#fff',
+              pointerEvents: isDragging ? 'none' : 'auto',
+              borderLeft: !isFullWidth ? '1px solid var(--border)' : 'none',
+              borderRight: !isFullWidth ? '1px solid var(--border)' : 'none',
+            }}
+            title="Preview"
+          />
+        </div>
+
+        {/* Right drag handle */}
+        {showHandles && (
+          <div
+            onMouseDown={(e) => handleDragStart(e, 'right')}
+            className="absolute top-0 bottom-0 z-10 flex items-center justify-center"
+            style={{
+              width: 6,
+              right: `calc(50% - ${previewWidth / 2}px - 6px)`,
+              cursor: 'col-resize',
+            }}
+          >
+            <div
+              className="w-1 rounded-full transition-colors"
+              style={{
+                height: 40,
+                background: isDragging ? 'var(--accent)' : 'var(--border)',
+              }}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/ProjectFolderBanner.tsx

@@ -0,0 +1,91 @@
+'use client'
+
+import { useState } from 'react'
+import { useEditorStore } from '@/store'
+
+export function ProjectFolderBanner() {
+  const connectionStatus = useEditorStore((s) => s.connectionStatus)
+  const targetUrl = useEditorStore((s) => s.targetUrl)
+  const portRoots = useEditorStore((s) => s.portRoots)
+  const scanStatus = useEditorStore((s) => s.scanStatus)
+  const scanError = useEditorStore((s) => s.scanError)
+  const scannedProjectName = useEditorStore((s) => s.scannedProjectName)
+  const componentFileMap = useEditorStore((s) => s.componentFileMap)
+
+  const [dismissed, setDismissed] = useState(false)
+
+  const hasProjectRoot = targetUrl ? !!portRoots[targetUrl] : false
+
+  // Don't show if not connected or dismissed
+  if (connectionStatus !== 'connected' || dismissed) return null
+
+  // Show scan results feedback if project root is set
+  if (hasProjectRoot && scanStatus === 'complete' && componentFileMap) {
+    const count = Object.keys(componentFileMap).length
+    return (
+      <div
+        className="flex items-center justify-between px-3 py-1.5 text-xs"
+        style={{
+          background:
+            count > 0 ? 'rgba(74, 222, 128, 0.08)' : 'rgba(251, 191, 36, 0.08)',
+          borderBottom: '1px solid var(--border)',
+          color: count > 0 ? 'var(--success)' : 'var(--warning)',
+        }}
+      >
+        <span>
+          {count > 0
+            ? `Found ${count} components in ${scannedProjectName || 'project'}`
+            : `No component files found — check project folder`}
+        </span>
+        <button
+          onClick={() => setDismissed(true)}
+          className="ml-2 px-1.5 py-0.5 rounded text-[10px] hover:bg-[var(--bg-hover)] transition-colors"
+          style={{ color: 'var(--text-muted)' }}
+        >
+          Dismiss
+        </button>
+      </div>
+    )
+  }
+
+  // Show scan error
+  if (hasProjectRoot && scanStatus === 'error') {
+    return (
+      <div
+        className="flex items-center justify-between px-3 py-1.5 text-xs"
+        style={{
+          background: 'rgba(248, 113, 113, 0.08)',
+          borderBottom: '1px solid var(--border)',
+          color: 'var(--error)',
+        }}
+      >
+        <span>{scanError || 'Scan failed'}</span>
+        <button
+          onClick={() => setDismissed(true)}
+          className="ml-2 px-1.5 py-0.5 rounded text-[10px] hover:bg-[var(--bg-hover)] transition-colors"
+          style={{ color: 'var(--text-muted)' }}
+        >
+          Dismiss
+        </button>
+      </div>
+    )
+  }
+
+  // Show scanning indicator
+  if (hasProjectRoot && scanStatus === 'scanning') {
+    return (
+      <div
+        className="flex items-center px-3 py-1.5 text-xs"
+        style={{
+          background: 'rgba(74, 158, 255, 0.06)',
+          borderBottom: '1px solid var(--border)',
+          color: 'var(--text-secondary)',
+        }}
+      >
+        Scanning project for components...
+      </div>
+    )
+  }
+
+  return null
+}