@antigenic-oss/paint 0.1.0

package/src/components/left-panel/LayerSearch.tsx

@@ -0,0 +1,23 @@
+'use client'
+
+import { useEditorStore } from '@/store'
+
+export function LayerSearch() {
+  const searchQuery = useEditorStore((s) => s.searchQuery)
+  const setSearchQuery = useEditorStore((s) => s.setSearchQuery)
+
+  return (
+    <div
+      className="px-2 py-1.5 flex-shrink-0"
+      style={{ borderBottom: '1px solid var(--border)' }}
+    >
+      <input
+        type="text"
+        value={searchQuery}
+        onChange={(e) => setSearchQuery(e.target.value)}
+        placeholder="Search elements..."
+        className="w-full text-xs py-1 px-2"
+      />
+    </div>
+  )
+}

package/src/components/left-panel/LayersPanel.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import { useMemo } from 'react'
+import { useEditorStore } from '@/store'
+import { LayerNode } from './LayerNode'
+import { LayerSearch } from './LayerSearch'
+
+export function LayersPanel() {
+  const rootNode = useEditorStore((s) => s.rootNode)
+  const searchQuery = useEditorStore((s) => s.searchQuery)
+  const styleChanges = useEditorStore((s) => s.styleChanges)
+
+  const { changedSelectors, deletedSelectors } = useMemo(() => {
+    const changed = new Set<string>()
+    const deleted = new Set<string>()
+    for (const change of styleChanges) {
+      changed.add(change.elementSelector)
+      if (change.property === '__element_deleted__') {
+        deleted.add(change.elementSelector)
+      }
+    }
+    return { changedSelectors: changed, deletedSelectors: deleted }
+  }, [styleChanges])
+
+  if (!rootNode) {
+    return (
+      <div
+        className="flex items-center justify-center flex-1 text-xs"
+        style={{ color: 'var(--text-muted)' }}
+      >
+        Loading tree...
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col flex-1 overflow-hidden">
+      <LayerSearch />
+      <div className="flex-1 overflow-auto py-1">
+        <div style={{ minWidth: 'max-content' }}>
+          <LayerNode
+            node={rootNode}
+            depth={0}
+            searchQuery={searchQuery}
+            changedSelectors={changedSelectors}
+            deletedSelectors={deletedSelectors}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/left-panel/LeftPanel.tsx

@@ -0,0 +1,122 @@
+'use client'
+
+import React, { Suspense } from 'react'
+import { ResizablePanel } from '@/components/common/ResizablePanel'
+import { useEditorStore } from '@/store'
+import { LayersPanel } from './LayersPanel'
+import { PagesPanel } from './PagesPanel'
+import { AddElementPanel } from './AddElementPanel'
+import { IconSidebar } from './IconSidebar'
+import { PANEL_DEFAULTS } from '@/lib/constants'
+
+const ComponentsPanel = React.lazy(() => import('./ComponentsPanel'))
+const TerminalPanel = React.lazy(() =>
+  import('./terminal/TerminalPanel').then((m) => ({
+    default: m.TerminalPanel,
+  })),
+)
+
+type LeftTab = 'layers' | 'pages' | 'components' | 'terminal' | 'add-element'
+
+const TAB_LABELS: Record<LeftTab, string> = {
+  layers: 'Navigator',
+  pages: 'Pages',
+  components: 'Components',
+  'add-element': 'Add Element',
+  terminal: 'Terminal',
+}
+
+interface LeftPanelProps {
+  width: number
+}
+
+export function LeftPanel({ width }: LeftPanelProps) {
+  const setLeftPanelWidth = useEditorStore((s) => s.setLeftPanelWidth)
+  const connectionStatus = useEditorStore((s) => s.connectionStatus)
+  const activeTab = useEditorStore((s) => s.activeLeftTab)
+  const leftPanelOpen = useEditorStore((s) => s.leftPanelOpen)
+
+  const isInspectorTab = activeTab !== 'terminal'
+  const showNotConnected = isInspectorTab && connectionStatus !== 'connected'
+
+  return (
+    <div className="flex h-full">
+      <IconSidebar />
+      {leftPanelOpen && (
+        <ResizablePanel
+          width={width}
+          minWidth={PANEL_DEFAULTS.leftMin}
+          maxWidth={PANEL_DEFAULTS.leftMax}
+          onResize={setLeftPanelWidth}
+          side="left"
+        >
+          <div className="flex flex-col h-full">
+            {/* Panel header */}
+            <div
+              className="flex items-center flex-shrink-0 h-8"
+              style={{
+                padding: '0 12px',
+                borderBottom: '1px solid var(--border)',
+              }}
+            >
+              <span
+                className="text-xs font-medium"
+                style={{ color: 'var(--text-primary)' }}
+              >
+                {TAB_LABELS[activeTab]}
+              </span>
+            </div>
+
+            {/* Tab content */}
+            {activeTab === 'terminal' ? (
+              <Suspense
+                fallback={
+                  <div
+                    style={{
+                      color: 'var(--text-muted)',
+                      padding: '8px',
+                      fontSize: '11px',
+                    }}
+                  >
+                    Loading terminal...
+                  </div>
+                }
+              >
+                <TerminalPanel />
+              </Suspense>
+            ) : showNotConnected ? (
+              <div
+                className="flex items-center justify-center flex-1 text-xs"
+                style={{ color: 'var(--text-muted)' }}
+              >
+                Connect to inspect
+              </div>
+            ) : activeTab === 'layers' ? (
+              <LayersPanel />
+            ) : activeTab === 'pages' ? (
+              <PagesPanel />
+            ) : activeTab === 'add-element' ? (
+              <AddElementPanel />
+            ) : (
+              <Suspense
+                fallback={
+                  <div
+                    style={{
+                      color: 'var(--text-muted)',
+                      padding: '8px',
+                      fontSize: '11px',
+                    }}
+                  >
+                    Loading...
+                  </div>
+                }
+              >
+                <ComponentsPanel />
+              </Suspense>
+            )}
+          </div>
+        </ResizablePanel>
+      )}
+    </div>
+  )
+}

package/src/components/left-panel/PagesPanel.tsx

@@ -0,0 +1,114 @@
+'use client'
+
+import { useCallback } from 'react'
+import { useEditorStore } from '@/store'
+
+export function PagesPanel() {
+  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 handleNavigate = useCallback(
+    (path: string) => {
+      if (!targetUrl) return
+      setCurrentPagePath(path)
+    },
+    [targetUrl, setCurrentPagePath],
+  )
+
+  // Build page list: always include "/" plus discovered links
+  const seen = new Set<string>()
+  const pages: Array<{ href: string; text: string }> = []
+
+  pages.push({ href: '/', text: 'Home' })
+  seen.add('/')
+
+  for (const link of pageLinks) {
+    if (!seen.has(link.href)) {
+      seen.add(link.href)
+      pages.push(link)
+    }
+  }
+
+  return (
+    <div className="flex flex-col flex-1 overflow-hidden">
+      {/* Header count */}
+      <div
+        className="px-3 py-1.5 text-[10px] font-medium uppercase tracking-wider flex-shrink-0"
+        style={{
+          color: 'var(--text-muted)',
+          borderBottom: '1px solid var(--border)',
+        }}
+      >
+        {pages.length} page{pages.length !== 1 ? 's' : ''} found
+      </div>
+
+      {/* Page list */}
+      <div className="flex-1 overflow-y-auto">
+        {pages.map((page) => {
+          const isActive = page.href === currentPagePath
+          return (
+            <button
+              key={page.href}
+              onClick={() => handleNavigate(page.href)}
+              className="w-full text-left px-3 py-2 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: '1px solid var(--border)',
+              }}
+              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-4 text-[10px] text-center"
+            style={{ color: 'var(--text-muted)' }}
+          >
+            No additional pages found
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/left-panel/icons.tsx

@@ -0,0 +1,162 @@
+import React from 'react'
+
+export function LayersIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width={16}
+      height={16}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M8 2L2 5.5l6 3.5 6-3.5L8 2Z"
+        stroke="currentColor"
+        strokeWidth={1.3}
+        strokeLinejoin="round"
+      />
+      <path
+        d="M2 8l6 3.5L14 8"
+        stroke="currentColor"
+        strokeWidth={1.3}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M2 10.5L8 14l6-3.5"
+        stroke="currentColor"
+        strokeWidth={1.3}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export function PagesIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width={16}
+      height={16}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect
+        x={4.5}
+        y={1.5}
+        width={9}
+        height={11}
+        rx={1}
+        stroke="currentColor"
+        strokeWidth={1.3}
+      />
+      <path
+        d="M2.5 4.5v9a1 1 0 0 0 1 1h7"
+        stroke="currentColor"
+        strokeWidth={1.3}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export function ComponentsIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width={16}
+      height={16}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M8 1.5L14 5v6l-6 3.5L2 11V5l6-3.5Z"
+        stroke="currentColor"
+        strokeWidth={1.3}
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8 8.5V14.5"
+        stroke="currentColor"
+        strokeWidth={1.3}
+        strokeLinecap="round"
+      />
+      <path
+        d="M2 5l6 3.5L14 5"
+        stroke="currentColor"
+        strokeWidth={1.3}
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export function AddElementIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width={16}
+      height={16}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect
+        x={2.5}
+        y={2.5}
+        width={11}
+        height={11}
+        rx={1.5}
+        stroke="currentColor"
+        strokeWidth={1.3}
+      />
+      <path
+        d="M8 5.5v5M5.5 8h5"
+        stroke="currentColor"
+        strokeWidth={1.3}
+        strokeLinecap="round"
+      />
+    </svg>
+  )
+}
+
+export function TerminalIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width={16}
+      height={16}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect
+        x={1.5}
+        y={2.5}
+        width={13}
+        height={11}
+        rx={1.5}
+        stroke="currentColor"
+        strokeWidth={1.3}
+      />
+      <path
+        d="M4.5 6l2.5 2-2.5 2"
+        stroke="currentColor"
+        strokeWidth={1.3}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8.5 10.5h3"
+        stroke="currentColor"
+        strokeWidth={1.3}
+        strokeLinecap="round"
+      />
+    </svg>
+  )
+}

package/src/components/left-panel/terminal/ScanOverlay.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useEditorStore } from '@/store'
+import { ScanAnimation } from '@/components/common/ScanAnimation'
+
+export function ScanOverlay() {
+  const aiScanStatus = useEditorStore((s) => s.aiScanStatus)
+  const [visible, setVisible] = useState(false)
+  const [fadeOut, setFadeOut] = useState(false)
+
+  useEffect(() => {
+    if (aiScanStatus === 'scanning') {
+      setFadeOut(false)
+      setVisible(true)
+    } else if (visible) {
+      // Fade out when scan finishes
+      setFadeOut(true)
+      const timer = setTimeout(() => setVisible(false), 600)
+      return () => clearTimeout(timer)
+    }
+  }, [aiScanStatus, visible])
+
+  if (!visible) return null
+
+  return (
+    <div
+      className="absolute inset-0 z-10 flex flex-col items-center justify-center overflow-hidden pointer-events-none"
+      style={{
+        background: 'rgba(30, 30, 30, 0.75)',
+        transition: 'opacity 0.4s ease',
+        opacity: fadeOut ? 0 : 1,
+      }}
+    >
+      {/* Sweep line */}
+      <div
+        style={{
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          height: '2px',
+          background:
+            'linear-gradient(90deg, transparent 0%, var(--accent) 30%, var(--accent) 70%, transparent 100%)',
+          boxShadow: '0 0 12px 3px rgba(74, 158, 255, 0.4)',
+          animation: 'scan-sweep 2.4s ease-in-out infinite',
+        }}
+      />
+
+      {/* Second sweep line (offset) */}
+      <div
+        style={{
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          height: '1px',
+          background:
+            'linear-gradient(90deg, transparent 0%, rgba(74, 158, 255, 0.4) 40%, rgba(74, 158, 255, 0.4) 60%, transparent 100%)',
+          animation: 'scan-sweep 2.4s ease-in-out infinite',
+          animationDelay: '1.2s',
+        }}
+      />
+
+      <ScanAnimation active={!fadeOut} label="SCANNING" />
+    </div>
+  )
+}