@antigenic-oss/paint 0.1.0

package/src/components/ResponsiveToolbar.tsx

@@ -0,0 +1,222 @@
+'use client'
+
+import { useState, useRef, useCallback, useEffect } from 'react'
+import { useEditorStore } from '@/store'
+import { usePostMessage } from '@/hooks/usePostMessage'
+import {
+  DEVICE_PRESETS,
+  PREVIEW_WIDTH_MIN,
+  PREVIEW_WIDTH_MAX,
+  BREAKPOINT_CATEGORY_MAP,
+} from '@/lib/constants'
+import type { DevicePreset } from '@/lib/constants'
+
+export function ResponsiveToolbar() {
+  const previewWidth = useEditorStore((s) => s.previewWidth)
+  const setPreviewWidth = useEditorStore((s) => s.setPreviewWidth)
+  const activeBreakpoint = useEditorStore((s) => s.activeBreakpoint)
+  const { sendToInspector } = usePostMessage()
+
+  // Filter devices by active breakpoint category
+  const activeCategory = BREAKPOINT_CATEGORY_MAP[activeBreakpoint]
+  const filteredDevices = DEVICE_PRESETS.filter(
+    (d) => d.category === activeCategory,
+  )
+
+  const [dropdownOpen, setDropdownOpen] = useState(false)
+  const [inputValue, setInputValue] = useState(String(previewWidth))
+  const dropdownRef = useRef<HTMLDivElement>(null)
+
+  // Sync input when previewWidth changes externally (drag, slider, preset)
+  useEffect(() => {
+    setInputValue(String(previewWidth))
+  }, [previewWidth])
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    if (!dropdownOpen) return
+    const handler = (e: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(e.target as Node)
+      ) {
+        setDropdownOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [dropdownOpen])
+
+  const applyWidth = useCallback(
+    (width: number) => {
+      setPreviewWidth(width)
+      sendToInspector({ type: 'SET_BREAKPOINT', payload: { width } })
+    },
+    [setPreviewWidth, sendToInspector],
+  )
+
+  const handleInputCommit = useCallback(() => {
+    const parsed = parseInt(inputValue, 10)
+    if (!isNaN(parsed)) {
+      applyWidth(parsed)
+    } else {
+      setInputValue(String(previewWidth))
+    }
+  }, [inputValue, applyWidth, previewWidth])
+
+  const handleInputKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        handleInputCommit()
+        ;(e.target as HTMLInputElement).blur()
+      } else if (e.key === 'Escape') {
+        setInputValue(String(previewWidth))
+        ;(e.target as HTMLInputElement).blur()
+      }
+    },
+    [handleInputCommit, previewWidth],
+  )
+
+  // Find matching device name
+  const matchedDevice = DEVICE_PRESETS.find((d) => d.width === previewWidth)
+
+  return (
+    <div
+      className="flex items-center gap-3 px-3 py-1.5 border-b select-none"
+      style={{
+        background: '#252526',
+        borderColor: 'var(--border)',
+      }}
+    >
+      {/* Device dropdown */}
+      <div ref={dropdownRef} className="relative">
+        <button
+          onClick={() => setDropdownOpen(!dropdownOpen)}
+          className="flex items-center gap-1.5 px-2 py-1 rounded text-[11px] transition-colors"
+          style={{
+            background: dropdownOpen ? 'var(--bg-hover)' : 'transparent',
+            color: matchedDevice
+              ? 'var(--text-primary)'
+              : 'var(--text-secondary)',
+            border: '1px solid var(--border)',
+          }}
+        >
+          <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
+            <path d="M2 3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3zm1 0v7h10V3H3zm-1 9.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z" />
+          </svg>
+          <span className="max-w-[100px] truncate">
+            {matchedDevice ? matchedDevice.name : 'Custom'}
+          </span>
+          <svg
+            width="8"
+            height="8"
+            viewBox="0 0 8 8"
+            fill="currentColor"
+            className="opacity-60"
+          >
+            <path d="M1 3l3 3 3-3z" />
+          </svg>
+        </button>
+
+        {dropdownOpen && (
+          <div
+            className="absolute top-full left-0 mt-1 w-52 rounded shadow-lg z-50 py-1 overflow-auto max-h-64"
+            style={{
+              background: '#2a2a2a',
+              border: '1px solid var(--border)',
+            }}
+          >
+            <div
+              className="px-3 py-1 text-[10px] uppercase tracking-wider"
+              style={{ color: 'var(--text-muted)' }}
+            >
+              {activeCategory === 'phone'
+                ? 'Phones'
+                : activeCategory === 'tablet'
+                  ? 'Tablets'
+                  : 'Desktops'}
+            </div>
+            {filteredDevices.map((device) => (
+              <button
+                key={device.name}
+                onClick={() => {
+                  applyWidth(device.width)
+                  setDropdownOpen(false)
+                }}
+                className="w-full text-left px-3 py-1.5 text-[11px] flex justify-between items-center transition-colors"
+                style={{
+                  color:
+                    previewWidth === device.width
+                      ? 'var(--accent)'
+                      : 'var(--text-primary)',
+                  background:
+                    previewWidth === device.width
+                      ? 'rgba(74, 158, 255, 0.1)'
+                      : 'transparent',
+                }}
+                onMouseEnter={(e) => {
+                  if (previewWidth !== device.width) {
+                    e.currentTarget.style.background = 'var(--bg-hover)'
+                  }
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.background =
+                    previewWidth === device.width
+                      ? 'rgba(74, 158, 255, 0.1)'
+                      : 'transparent'
+                }}
+              >
+                <span>{device.name}</span>
+                <span style={{ color: 'var(--text-muted)' }}>
+                  {device.width}px
+                </span>
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Width input */}
+      <div className="flex items-center gap-1">
+        <input
+          type="text"
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          onBlur={handleInputCommit}
+          onKeyDown={handleInputKeyDown}
+          className="w-14 text-center text-[11px] px-1.5 py-0.5 rounded outline-none"
+          style={{
+            background: '#1e1e1e',
+            color: 'var(--text-primary)',
+            border: '1px solid var(--border)',
+          }}
+          onFocus={(e) => {
+            e.currentTarget.style.borderColor = 'var(--accent)'
+          }}
+          onBlurCapture={(e) => {
+            e.currentTarget.style.borderColor = 'var(--border)'
+          }}
+        />
+        <span className="text-[10px]" style={{ color: 'var(--text-muted)' }}>
+          px
+        </span>
+      </div>
+
+      {/* Width slider */}
+      <input
+        type="range"
+        min={PREVIEW_WIDTH_MIN}
+        max={PREVIEW_WIDTH_MAX}
+        value={previewWidth}
+        onChange={(e) => applyWidth(parseInt(e.target.value, 10))}
+        className="flex-1 h-1 appearance-none rounded cursor-pointer"
+        style={{
+          accentColor: '#4a9eff',
+          background: '#3a3a3a',
+          minWidth: 80,
+          maxWidth: 200,
+        }}
+      />
+    </div>
+  )
+}

package/src/components/TargetSelector.tsx

@@ -0,0 +1,243 @@
+'use client'
+
+import { useState } from 'react'
+import { useEditorStore } from '@/store'
+import { normalizeTargetUrl } from '@/lib/utils'
+import { LOCAL_STORAGE_KEYS } from '@/lib/constants'
+import { isEditorOnLocalhost } from '@/hooks/usePostMessage'
+
+export function TargetSelector() {
+  const targetUrl = useEditorStore((s) => s.targetUrl)
+  const connectionStatus = useEditorStore((s) => s.connectionStatus)
+  const setTargetUrl = useEditorStore((s) => s.setTargetUrl)
+  const setConnectionStatus = useEditorStore((s) => s.setConnectionStatus)
+  const addRecentUrl = useEditorStore((s) => s.addRecentUrl)
+  const bridgeStatus = useEditorStore((s) => s.bridgeStatus)
+  const isRemote = typeof window !== 'undefined' && !isEditorOnLocalhost()
+
+  const portOptions = Array.from({ length: 8 }, (_, i) => 3000 + i)
+  const getPortFromUrl = (url: string | null) => {
+    if (!url) return 3000
+    const match = url.match(/:(\d+)/)
+    return match ? parseInt(match[1], 10) : 3000
+  }
+  const [selectedPort, setSelectedPort] = useState(getPortFromUrl(targetUrl))
+  const [urlMode, setUrlMode] = useState(false)
+  const [customUrl, setCustomUrl] = useState('http://localhost:3000')
+  const [error, setError] = useState<string | null>(null)
+
+  const isConnected = connectionStatus === 'connected'
+
+  const handleConnect = () => {
+    setError(null)
+    const raw = urlMode ? customUrl.trim() : `http://localhost:${selectedPort}`
+    if (urlMode && !raw) {
+      setError('Enter a URL')
+      return
+    }
+    const normalized = normalizeTargetUrl(raw)
+    setTargetUrl(normalized)
+    setConnectionStatus('connecting')
+    addRecentUrl(normalized)
+  }
+
+  const handleDisconnect = () => {
+    // Clear persisted changes for this URL so reconnect loads fresh content
+    if (targetUrl) {
+      try {
+        localStorage.removeItem(LOCAL_STORAGE_KEYS.CHANGES_PREFIX + targetUrl)
+      } catch {}
+    }
+    const store = useEditorStore.getState()
+    store.clearAllChanges()
+    store.clearSelection()
+    setTargetUrl(null)
+    setConnectionStatus('disconnected')
+    setError(null)
+  }
+
+  const handlePortChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelectedPort(parseInt(e.target.value, 10))
+    setError(null)
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !isConnected) {
+      handleConnect()
+    }
+  }
+
+  const statusColor =
+    connectionStatus === 'connected'
+      ? 'var(--success)'
+      : connectionStatus === 'connecting' ||
+          connectionStatus === 'confirming' ||
+          connectionStatus === 'scanning'
+        ? 'var(--warning)'
+        : 'var(--error)'
+
+  return (
+    <div className="flex items-center gap-2 relative">
+      {/* Connection status dot */}
+      <div
+        className="w-2 h-2 rounded-full flex-shrink-0"
+        style={{ background: statusColor }}
+        title={connectionStatus}
+      />
+
+      {/* Toggle between dropdown and URL input */}
+      <button
+        onClick={() => {
+          if (!isConnected) {
+            setUrlMode(!urlMode)
+            setError(null)
+          }
+        }}
+        className="p-1 rounded hover:bg-[var(--bg-hover)] transition-colors flex-shrink-0"
+        style={{
+          color: urlMode ? 'var(--accent)' : 'var(--text-muted)',
+          cursor: isConnected ? 'default' : 'pointer',
+          opacity: isConnected ? 0.5 : 1,
+        }}
+        title={urlMode ? 'Switch to port selector' : 'Switch to URL input'}
+      >
+        {urlMode ? (
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <polyline points="6 9 6 2 18 2 18 9" />
+            <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" />
+            <rect x="6" y="14" width="12" height="8" />
+          </svg>
+        ) : (
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+          </svg>
+        )}
+      </button>
+
+      {isConnected ? (
+        <div
+          className="w-56 text-sm rounded px-2 py-1 truncate"
+          style={{
+            background: 'var(--bg-secondary)',
+            color: 'var(--text-primary)',
+            border: '1px solid var(--border)',
+            opacity: 0.7,
+          }}
+          title={targetUrl || ''}
+        >
+          {targetUrl || 'http://localhost:3000'}
+        </div>
+      ) : urlMode ? (
+        <input
+          type="text"
+          value={customUrl}
+          onChange={(e) => {
+            setCustomUrl(e.target.value)
+            setError(null)
+          }}
+          onKeyDown={handleKeyDown}
+          placeholder="http://localhost:3000/path"
+          className="w-56 text-xs bg-[var(--bg-secondary)] text-[var(--text-primary)] border border-[var(--border)] rounded px-2 py-1 outline-none focus:border-[var(--accent)]"
+        />
+      ) : (
+        <select
+          value={selectedPort}
+          onChange={handlePortChange}
+          className="w-56 text-xs bg-[var(--bg-secondary)] text-[var(--text-primary)] border border-[var(--border)] rounded px-2 py-1 outline-none focus:border-[var(--accent)]"
+        >
+          {portOptions.map((port) => (
+            <option key={port} value={port}>
+              http://localhost:{port}
+            </option>
+          ))}
+        </select>
+      )}
+
+      {/* Connect / Disconnect button */}
+      <button
+        onClick={isConnected ? handleDisconnect : handleConnect}
+        className="px-3 py-1 text-xs rounded transition-colors font-medium"
+        style={{
+          background: isConnected ? 'var(--bg-hover)' : 'var(--accent)',
+          color: isConnected ? 'var(--text-secondary)' : '#fff',
+        }}
+      >
+        {isConnected
+          ? 'Disconnect'
+          : connectionStatus === 'connecting'
+            ? 'Connecting...'
+            : 'Connect'}
+      </button>
+
+      {/* Bridge status indicator (shown when running on Vercel) */}
+      {isRemote && (
+        <div
+          className="flex items-center gap-1 flex-shrink-0"
+          title={
+            bridgeStatus === 'connected'
+              ? 'Bridge connected'
+              : bridgeStatus === 'checking'
+                ? 'Detecting bridge...'
+                : 'Bridge not detected — run: bun run bridge'
+          }
+        >
+          <div
+            className="w-1.5 h-1.5 rounded-full"
+            style={{
+              background:
+                bridgeStatus === 'connected'
+                  ? 'var(--accent)'
+                  : bridgeStatus === 'checking'
+                    ? 'var(--warning)'
+                    : 'var(--text-muted)',
+            }}
+          />
+          <span
+            className="text-[10px]"
+            style={{
+              color:
+                bridgeStatus === 'connected'
+                  ? 'var(--accent)'
+                  : 'var(--text-muted)',
+            }}
+          >
+            {bridgeStatus === 'connected'
+              ? 'Bridge'
+              : bridgeStatus === 'checking'
+                ? '...'
+                : 'No bridge'}
+          </span>
+        </div>
+      )}
+
+      {/* Error message */}
+      {error && (
+        <span
+          className="text-xs absolute -bottom-5 left-6"
+          style={{ color: 'var(--error)' }}
+        >
+          {error}
+        </span>
+      )}
+    </div>
+  )
+}