@antigenic-oss/paint 0.1.0

package/src/components/common/EditablePre.tsx

@@ -0,0 +1,136 @@
+'use client'
+
+import { useState, useRef, useEffect, useCallback } from 'react'
+
+/**
+ * A <pre> block that becomes an editable <textarea> on double-click.
+ * Returns the current (possibly edited) text via `onTextChange` so
+ * parent components can use the edited version for copy operations.
+ */
+export function EditablePre({
+  text,
+  onTextChange,
+  className = '',
+  style,
+}: {
+  text: string
+  onTextChange?: (edited: string) => void
+  className?: string
+  style?: React.CSSProperties
+}) {
+  const [editing, setEditing] = useState(false)
+  const [localText, setLocalText] = useState(text)
+  const [modified, setModified] = useState(false)
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+  // When the source text changes and user hasn't edited, sync
+  useEffect(() => {
+    if (!modified) {
+      setLocalText(text)
+    }
+  }, [text, modified])
+
+  // Auto-focus and select when entering edit mode
+  useEffect(() => {
+    if (editing && textareaRef.current) {
+      textareaRef.current.focus()
+    }
+  }, [editing])
+
+  const handleDoubleClick = useCallback(() => {
+    if (!editing) {
+      // If not yet modified, reset to latest computed text
+      if (!modified) setLocalText(text)
+      setEditing(true)
+    }
+  }, [editing, modified, text])
+
+  const handleBlur = useCallback(() => {
+    setEditing(false)
+  }, [])
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const val = e.target.value
+      setLocalText(val)
+      setModified(true)
+      onTextChange?.(val)
+    },
+    [onTextChange],
+  )
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      setEditing(false)
+    }
+  }, [])
+
+  const handleReset = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation()
+      setLocalText(text)
+      setModified(false)
+      onTextChange?.(text)
+    },
+    [text, onTextChange],
+  )
+
+  if (editing) {
+    return (
+      <div className="relative">
+        <textarea
+          ref={textareaRef}
+          value={localText}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          onKeyDown={handleKeyDown}
+          className={className}
+          style={{
+            ...style,
+            width: '100%',
+            minHeight: '120px',
+            resize: 'vertical',
+            background: 'var(--bg-tertiary)',
+            border: '1px solid var(--accent)',
+            borderRadius: '4px',
+            padding: '8px',
+            outline: 'none',
+          }}
+          spellCheck={false}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className="relative group/editable">
+      <pre
+        onDoubleClick={handleDoubleClick}
+        className={className}
+        style={{
+          ...style,
+          cursor: 'text',
+          borderRadius: '4px',
+          transition: 'background 0.15s',
+        }}
+        title="Double-click to edit"
+      >
+        {localText}
+      </pre>
+      {modified && (
+        <button
+          onClick={handleReset}
+          className="absolute top-1 right-1 px-1.5 py-0.5 rounded text-[10px] transition-opacity opacity-0 group-hover/editable:opacity-100"
+          style={{
+            background: 'var(--bg-tertiary)',
+            color: 'var(--text-muted)',
+            border: '1px solid var(--border)',
+          }}
+          title="Reset to original"
+        >
+          Reset
+        </button>
+      )}
+    </div>
+  )
+}

package/src/components/common/ErrorBoundary.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import { Component, type ReactNode } from 'react'
+
+interface Props {
+  children: ReactNode
+  fallback?: ReactNode
+  panelName?: string
+}
+
+interface State {
+  hasError: boolean
+  error: Error | null
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { hasError: false, error: null }
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback
+      }
+
+      return (
+        <div
+          className="flex flex-col items-center justify-center h-full p-4 text-center"
+          style={{ background: 'var(--bg-primary)' }}
+        >
+          <div
+            className="text-sm font-medium mb-1"
+            style={{ color: 'var(--error)' }}
+          >
+            {this.props.panelName
+              ? `${this.props.panelName} error`
+              : 'Something went wrong'}
+          </div>
+          <div className="text-xs mb-3" style={{ color: 'var(--text-muted)' }}>
+            {this.state.error?.message || 'An unexpected error occurred'}
+          </div>
+          <button
+            onClick={() => this.setState({ hasError: false, error: null })}
+            className="px-3 py-1 text-xs rounded"
+            style={{
+              background: 'var(--bg-hover)',
+              color: 'var(--text-secondary)',
+              border: '1px solid var(--border)',
+            }}
+          >
+            Try Again
+          </button>
+        </div>
+      )
+    }
+
+    return this.props.children
+  }
+}

package/src/components/common/ResizablePanel.tsx

@@ -0,0 +1,83 @@
+'use client'
+
+import { useCallback, useRef } from 'react'
+
+interface ResizablePanelProps {
+  width: number
+  minWidth: number
+  maxWidth: number
+  onResize: (width: number) => void
+  side: 'left' | 'right'
+  children: React.ReactNode
+}
+
+export function ResizablePanel({
+  width,
+  minWidth,
+  maxWidth,
+  onResize,
+  side,
+  children,
+}: ResizablePanelProps) {
+  const panelRef = useRef<HTMLDivElement>(null)
+  const isDragging = useRef(false)
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault()
+      isDragging.current = true
+      const startX = e.clientX
+      const startWidth = width
+
+      const handleMouseMove = (moveEvent: MouseEvent) => {
+        if (!isDragging.current) return
+        const delta =
+          side === 'left'
+            ? moveEvent.clientX - startX
+            : startX - moveEvent.clientX
+        const newWidth = Math.min(
+          Math.max(startWidth + delta, minWidth),
+          maxWidth,
+        )
+        onResize(newWidth)
+      }
+
+      const handleMouseUp = () => {
+        isDragging.current = false
+        document.removeEventListener('mousemove', handleMouseMove)
+        document.removeEventListener('mouseup', handleMouseUp)
+        document.body.style.cursor = ''
+        document.body.style.userSelect = ''
+      }
+
+      document.addEventListener('mousemove', handleMouseMove)
+      document.addEventListener('mouseup', handleMouseUp)
+      document.body.style.cursor = 'col-resize'
+      document.body.style.userSelect = 'none'
+    },
+    [width, minWidth, maxWidth, onResize, side],
+  )
+
+  return (
+    <div
+      ref={panelRef}
+      className="relative flex-shrink-0 overflow-hidden"
+      style={{
+        width,
+        background: 'var(--bg-secondary)',
+        borderLeft: side === 'right' ? '1px solid var(--border)' : 'none',
+        borderRight: side === 'left' ? '1px solid var(--border)' : 'none',
+      }}
+    >
+      {children}
+      <div
+        className="absolute top-0 bottom-0 w-1 cursor-col-resize z-10 hover:bg-[var(--accent)]"
+        style={{
+          [side === 'left' ? 'right' : 'left']: 0,
+          transition: 'background-color 0.15s',
+        }}
+        onMouseDown={handleMouseDown}
+      />
+    </div>
+  )
+}

package/src/components/common/ScanAnimation.tsx

@@ -0,0 +1,76 @@
+'use client'
+
+interface ScanAnimationProps {
+  active: boolean
+  label?: string
+}
+
+export function ScanAnimation({
+  active,
+  label = 'SCANNING',
+}: ScanAnimationProps) {
+  if (!active) return null
+
+  return (
+    <div className="flex flex-col items-center gap-3">
+      {/* Pulsing rings */}
+      <div className="relative" style={{ width: 48, height: 48 }}>
+        {[0, 0.6, 1.2].map((delay, i) => (
+          <div
+            key={i}
+            style={{
+              position: 'absolute',
+              inset: 0,
+              borderRadius: '50%',
+              border: '1px solid var(--accent)',
+              animation: 'scan-ring 2.4s ease-out infinite',
+              animationDelay: `${delay}s`,
+            }}
+          />
+        ))}
+        {/* Center dot */}
+        <div
+          style={{
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            width: 6,
+            height: 6,
+            borderRadius: '50%',
+            background: 'var(--accent)',
+            animation: 'scan-glow 1.6s ease-in-out infinite',
+          }}
+        />
+      </div>
+
+      {/* Status text */}
+      <div
+        className="text-[11px] font-medium tracking-wide"
+        style={{
+          color: 'var(--accent)',
+          animation: 'scan-pulse 2s ease-in-out infinite',
+        }}
+      >
+        {label}
+      </div>
+
+      {/* Animated dots */}
+      <div className="flex gap-1.5">
+        {[0, 0.2, 0.4, 0.6, 0.8].map((delay, i) => (
+          <div
+            key={i}
+            style={{
+              width: 4,
+              height: 4,
+              borderRadius: '50%',
+              background: 'var(--accent)',
+              animation: 'scan-dot 1.4s ease-in-out infinite',
+              animationDelay: `${delay}s`,
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/components/common/ToastContainer.tsx

@@ -0,0 +1,97 @@
+'use client'
+
+import { useEditorStore } from '@/store'
+
+const ICON_MAP = {
+  success: '\u2713',
+  error: '!',
+  info: 'i',
+} as const
+
+const COLOR_MAP = {
+  success: {
+    bg: 'rgba(74, 222, 128, 0.12)',
+    border: 'var(--success)',
+    text: 'var(--success)',
+  },
+  error: {
+    bg: 'rgba(248, 113, 113, 0.12)',
+    border: 'var(--error)',
+    text: 'var(--error)',
+  },
+  info: {
+    bg: 'rgba(74, 158, 255, 0.12)',
+    border: 'var(--accent)',
+    text: 'var(--accent)',
+  },
+} as const
+
+export function ToastContainer() {
+  const toasts = useEditorStore((s) => s.toasts)
+  const dismissToast = useEditorStore((s) => s.dismissToast)
+
+  if (toasts.length === 0) return null
+
+  return (
+    <div className="fixed bottom-4 right-4 z-[9999] flex flex-col gap-2 pointer-events-none">
+      {toasts.map((toast) => {
+        const colors = COLOR_MAP[toast.type]
+        return (
+          <div
+            key={toast.id}
+            className="pointer-events-auto flex items-center gap-2.5 px-4 py-3 rounded-lg shadow-lg min-w-[280px] max-w-[400px] animate-[toast-in_0.25s_ease-out]"
+            style={{
+              background: 'var(--bg-primary)',
+              border: `1px solid ${colors.border}`,
+              boxShadow: `0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px ${colors.border}`,
+            }}
+          >
+            {/* Icon */}
+            <div
+              className="flex items-center justify-center w-5 h-5 rounded-full flex-shrink-0 text-[11px] font-bold"
+              style={{ background: colors.bg, color: colors.text }}
+            >
+              {ICON_MAP[toast.type]}
+            </div>
+
+            {/* Message */}
+            <span
+              className="flex-1 text-xs leading-relaxed"
+              style={{ color: 'var(--text-primary)' }}
+            >
+              {toast.message}
+            </span>
+
+            {/* Dismiss */}
+            <button
+              onClick={() => dismissToast(toast.id)}
+              className="flex-shrink-0 p-0.5 rounded hover:bg-[var(--bg-hover)] transition-colors"
+              style={{ color: 'var(--text-muted)' }}
+            >
+              <svg
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <line x1="18" y1="6" x2="6" y2="18" />
+                <line x1="6" y1="6" x2="18" y2="18" />
+              </svg>
+            </button>
+          </div>
+        )
+      })}
+
+      <style>{`
+        @keyframes toast-in {
+          from { opacity: 0; transform: translateY(8px) scale(0.96); }
+          to { opacity: 1; transform: translateY(0) scale(1); }
+        }
+      `}</style>
+    </div>
+  )
+}

package/src/components/common/UnitInput.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import { useState, useCallback, useEffect } from 'react'
+import { parseCSSValue, formatCSSValue } from '@/lib/utils'
+
+interface UnitInputProps {
+  value: string
+  onChange: (value: string) => void
+  units?: string[]
+  placeholder?: string
+}
+
+export function UnitInput({
+  value,
+  onChange,
+  units = ['px', '%', 'em', 'rem', 'auto'],
+  placeholder = '0',
+}: UnitInputProps) {
+  const parsed = parseCSSValue(value)
+  const [localValue, setLocalValue] = useState(String(parsed.number))
+  const [unit, setUnit] = useState(parsed.unit || 'px')
+
+  useEffect(() => {
+    const p = parseCSSValue(value)
+    setLocalValue(String(p.number))
+    setUnit(p.unit || 'px')
+  }, [value])
+
+  const commit = useCallback(
+    (num: string, u: string) => {
+      if (u === 'auto') {
+        onChange('auto')
+      } else {
+        const n = parseFloat(num)
+        if (!isNaN(n)) onChange(formatCSSValue(n, u))
+      }
+    },
+    [onChange],
+  )
+
+  return (
+    <div className="flex gap-1">
+      <input
+        type="number"
+        value={unit === 'auto' ? '' : localValue}
+        onChange={(e) => setLocalValue(e.target.value)}
+        onBlur={() => commit(localValue, unit)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') commit(localValue, unit)
+        }}
+        disabled={unit === 'auto'}
+        placeholder={placeholder}
+        className="flex-1 min-w-0 text-xs py-1 px-2"
+        style={{ opacity: unit === 'auto' ? 0.5 : 1 }}
+      />
+      <select
+        value={unit}
+        onChange={(e) => {
+          setUnit(e.target.value)
+          commit(localValue, e.target.value)
+        }}
+        className="w-14 text-[11px] py-1 px-1 rounded"
+        style={{
+          background: 'var(--bg-tertiary)',
+          border: '1px solid var(--border)',
+          color: 'var(--text-secondary)',
+        }}
+      >
+        {units.map((u) => (
+          <option key={u} value={u}>
+            {u}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+}