@antigenic-oss/paint 0.1.0

package/src/store/uiSlice.ts

@@ -0,0 +1,327 @@
+import type { StateCreator } from 'zustand'
+import type { Breakpoint } from '@/types/changelog'
+import {
+  PANEL_DEFAULTS,
+  LOCAL_STORAGE_KEYS,
+  PREVIEW_WIDTH_MIN,
+  PREVIEW_WIDTH_MAX,
+  BREAKPOINTS,
+} from '@/lib/constants'
+
+export interface Toast {
+  id: string
+  type: 'success' | 'error' | 'info'
+  message: string
+}
+
+export type ConnectionStatus =
+  | 'disconnected'
+  | 'confirming'
+  | 'scanning'
+  | 'connecting'
+  | 'connected'
+export type BridgeStatus =
+  | 'disconnected'
+  | 'checking'
+  | 'connected'
+  | 'unavailable'
+
+export interface UISlice {
+  targetUrl: string | null
+  connectionStatus: ConnectionStatus
+  pendingTargetUrl: string | null
+  pendingFolderPath: string | null
+  recentUrls: string[]
+  activeBreakpoint: Breakpoint
+  leftPanelOpen: boolean
+  rightPanelOpen: boolean
+  leftPanelWidth: number
+  rightPanelWidth: number
+  activeRightTab: 'design' | 'variables' | 'changes' | 'claude' | 'console'
+  changeScope: 'all' | 'breakpoint-only'
+  pageLinks: Array<{ href: string; text: string }>
+  currentPagePath: string
+  selectionMode: boolean
+  viewMode: boolean
+  activeLeftTab: 'layers' | 'pages' | 'components' | 'terminal' | 'add-element'
+  previewWidth: number
+  toasts: Toast[]
+  bridgeUrl: string | null
+  bridgeStatus: BridgeStatus
+
+  setTargetUrl: (url: string | null) => void
+  setConnectionStatus: (status: ConnectionStatus) => void
+  setPendingConnection: (url: string, folder: string) => void
+  finalizeConnection: () => void
+  cancelPendingConnection: () => void
+  addRecentUrl: (url: string) => void
+  setActiveBreakpoint: (bp: Breakpoint) => void
+  toggleLeftPanel: () => void
+  toggleRightPanel: () => void
+  setLeftPanelWidth: (width: number) => void
+  setRightPanelWidth: (width: number) => void
+  setActiveRightTab: (
+    tab: 'design' | 'variables' | 'changes' | 'claude' | 'console',
+  ) => void
+  setChangeScope: (scope: 'all' | 'breakpoint-only') => void
+  setPageLinks: (links: Array<{ href: string; text: string }>) => void
+  setCurrentPagePath: (path: string) => void
+  setSelectionMode: (enabled: boolean) => void
+  toggleSelectionMode: () => void
+  toggleViewMode: () => void
+  setActiveLeftTab: (
+    tab: 'layers' | 'pages' | 'components' | 'terminal' | 'add-element',
+  ) => void
+  setPreviewWidth: (width: number) => void
+  showToast: (type: Toast['type'], message: string) => void
+  dismissToast: (id: string) => void
+  setBridgeUrl: (url: string | null) => void
+  setBridgeStatus: (status: BridgeStatus) => void
+  loadPersistedUI: () => void
+}
+
+export const createUISlice: StateCreator<UISlice, [], [], UISlice> = (
+  set,
+  get,
+) => ({
+  targetUrl: null,
+  connectionStatus: 'disconnected',
+  pendingTargetUrl: null,
+  pendingFolderPath: null,
+  recentUrls: [],
+  activeBreakpoint: 'desktop',
+  leftPanelOpen: true,
+  rightPanelOpen: true,
+  leftPanelWidth: PANEL_DEFAULTS.leftWidth,
+  rightPanelWidth: PANEL_DEFAULTS.rightWidth,
+  activeRightTab: 'design',
+  changeScope: 'breakpoint-only',
+  pageLinks: [],
+  currentPagePath: '/',
+  selectionMode: true,
+  viewMode: false,
+  activeLeftTab: 'layers',
+  previewWidth: 1920,
+  toasts: [],
+  bridgeUrl: null,
+  bridgeStatus: 'disconnected',
+
+  setTargetUrl: (url) => {
+    set({ targetUrl: url })
+  },
+
+  setConnectionStatus: (status) => {
+    set({ connectionStatus: status })
+  },
+
+  setPendingConnection: (url, folder) => {
+    set({
+      pendingTargetUrl: url,
+      pendingFolderPath: folder,
+      connectionStatus: folder ? 'confirming' : 'connecting',
+      // If no folder, go straight to connecting
+      ...(folder ? {} : { targetUrl: url }),
+    })
+  },
+
+  finalizeConnection: () => {
+    const { pendingTargetUrl } = get()
+    if (!pendingTargetUrl) return
+    set({
+      targetUrl: pendingTargetUrl,
+      connectionStatus: 'connecting',
+      pendingTargetUrl: null,
+      pendingFolderPath: null,
+    })
+  },
+
+  cancelPendingConnection: () => {
+    set({
+      connectionStatus: 'disconnected',
+      pendingTargetUrl: null,
+      pendingFolderPath: null,
+      targetUrl: null,
+    })
+  },
+
+  addRecentUrl: (url) => {
+    const { recentUrls } = get()
+    const filtered = recentUrls.filter((u) => u !== url)
+    const updated = [url, ...filtered].slice(0, 10)
+    set({ recentUrls: updated })
+    try {
+      localStorage.setItem(
+        LOCAL_STORAGE_KEYS.RECENT_URLS,
+        JSON.stringify(updated),
+      )
+    } catch {}
+  },
+
+  setActiveBreakpoint: (bp) => set({ activeBreakpoint: bp }),
+
+  toggleLeftPanel: () => {
+    const next = !get().leftPanelOpen
+    set({ leftPanelOpen: next })
+    try {
+      const vis = JSON.parse(
+        localStorage.getItem(LOCAL_STORAGE_KEYS.PANEL_VISIBILITY) || '{}',
+      )
+      vis.left = next
+      localStorage.setItem(
+        LOCAL_STORAGE_KEYS.PANEL_VISIBILITY,
+        JSON.stringify(vis),
+      )
+    } catch {}
+  },
+
+  toggleRightPanel: () => {
+    const next = !get().rightPanelOpen
+    set({ rightPanelOpen: next })
+    try {
+      const vis = JSON.parse(
+        localStorage.getItem(LOCAL_STORAGE_KEYS.PANEL_VISIBILITY) || '{}',
+      )
+      vis.right = next
+      localStorage.setItem(
+        LOCAL_STORAGE_KEYS.PANEL_VISIBILITY,
+        JSON.stringify(vis),
+      )
+    } catch {}
+  },
+
+  setLeftPanelWidth: (width) => {
+    const clamped = Math.min(
+      Math.max(width, PANEL_DEFAULTS.leftMin),
+      PANEL_DEFAULTS.leftMax,
+    )
+    set({ leftPanelWidth: clamped })
+    try {
+      const sizes = JSON.parse(
+        localStorage.getItem(LOCAL_STORAGE_KEYS.PANEL_SIZES) || '{}',
+      )
+      sizes.left = clamped
+      localStorage.setItem(
+        LOCAL_STORAGE_KEYS.PANEL_SIZES,
+        JSON.stringify(sizes),
+      )
+    } catch {}
+  },
+
+  setRightPanelWidth: (width) => {
+    const clamped = Math.min(
+      Math.max(width, PANEL_DEFAULTS.rightMin),
+      PANEL_DEFAULTS.rightMax,
+    )
+    set({ rightPanelWidth: clamped })
+    try {
+      const sizes = JSON.parse(
+        localStorage.getItem(LOCAL_STORAGE_KEYS.PANEL_SIZES) || '{}',
+      )
+      sizes.right = clamped
+      localStorage.setItem(
+        LOCAL_STORAGE_KEYS.PANEL_SIZES,
+        JSON.stringify(sizes),
+      )
+    } catch {}
+  },
+
+  setActiveRightTab: (tab) => set({ activeRightTab: tab }),
+
+  setChangeScope: (scope) => set({ changeScope: scope }),
+
+  setPageLinks: (links) => set({ pageLinks: links }),
+  setCurrentPagePath: (path) => set({ currentPagePath: path }),
+  setSelectionMode: (enabled) => set({ selectionMode: enabled }),
+  toggleSelectionMode: () => set({ selectionMode: !get().selectionMode }),
+
+  toggleViewMode: () => {
+    const { viewMode } = get()
+    if (viewMode) {
+      // Exit preview — restore panels
+      set({
+        viewMode: false,
+        leftPanelOpen: true,
+        rightPanelOpen: true,
+        activeLeftTab: 'layers',
+      })
+    } else {
+      // Enter preview — show left panel with pages tab, hide right panel
+      set({
+        viewMode: true,
+        leftPanelOpen: true,
+        rightPanelOpen: false,
+        activeLeftTab: 'pages',
+      })
+    }
+  },
+
+  setActiveLeftTab: (tab) => set({ activeLeftTab: tab }),
+
+  showToast: (type, message) => {
+    const id = Math.random().toString(36).slice(2, 9)
+    set((state) => ({ toasts: [...state.toasts, { id, type, message }] }))
+    setTimeout(() => {
+      set((state) => ({ toasts: state.toasts.filter((t) => t.id !== id) }))
+    }, 4000)
+  },
+
+  dismissToast: (id) => {
+    set((state) => ({ toasts: state.toasts.filter((t) => t.id !== id) }))
+  },
+
+  setPreviewWidth: (width) => {
+    const clamped = Math.min(
+      Math.max(width, PREVIEW_WIDTH_MIN),
+      PREVIEW_WIDTH_MAX,
+    )
+    // Auto-detect matching breakpoint
+    const match = (
+      Object.entries(BREAKPOINTS) as [
+        Breakpoint,
+        { label: string; width: number },
+      ][]
+    ).find(([, bp]) => bp.width === clamped)
+    set({
+      previewWidth: clamped,
+      ...(match ? { activeBreakpoint: match[0] } : {}),
+    })
+  },
+
+  setBridgeUrl: (url) => {
+    set({ bridgeUrl: url })
+    try {
+      if (url) {
+        localStorage.setItem('dev-editor:bridge-url', url)
+      } else {
+        localStorage.removeItem('dev-editor:bridge-url')
+      }
+    } catch {}
+  },
+
+  setBridgeStatus: (status) => set({ bridgeStatus: status }),
+
+  loadPersistedUI: () => {
+    try {
+      const urls = localStorage.getItem(LOCAL_STORAGE_KEYS.RECENT_URLS)
+      if (urls) set({ recentUrls: JSON.parse(urls) })
+
+      const sizes = localStorage.getItem(LOCAL_STORAGE_KEYS.PANEL_SIZES)
+      if (sizes) {
+        const parsed = JSON.parse(sizes)
+        if (parsed.left) set({ leftPanelWidth: parsed.left })
+        if (parsed.right) set({ rightPanelWidth: parsed.right })
+      }
+
+      const vis = localStorage.getItem(LOCAL_STORAGE_KEYS.PANEL_VISIBILITY)
+      if (vis) {
+        const parsed = JSON.parse(vis)
+        if (typeof parsed.left === 'boolean')
+          set({ leftPanelOpen: parsed.left })
+        if (typeof parsed.right === 'boolean')
+          set({ rightPanelOpen: parsed.right })
+      }
+      const bridgeUrl = localStorage.getItem('dev-editor:bridge-url')
+      if (bridgeUrl) set({ bridgeUrl })
+    } catch {}
+  },
+})

package/src/types/changelog.ts

@@ -0,0 +1,49 @@
+import type { SourceInfo } from './claude'
+
+export type Breakpoint = 'mobile' | 'tablet' | 'desktop'
+
+export interface StyleChange {
+  id: string
+  elementSelector: string
+  property: string
+  originalValue: string
+  newValue: string
+  breakpoint: Breakpoint
+  timestamp: number
+  changeScope?: 'all' | 'breakpoint-only'
+}
+
+export interface ElementSnapshot {
+  selectorPath: string
+  tagName: string
+  className: string | null
+  elementId: string | null
+  attributes: Record<string, string>
+  innerText: string | null
+  computedStyles: Record<string, string>
+  pagePath: string
+  changeScope: 'all' | 'breakpoint-only'
+  sourceInfo?: SourceInfo | null
+}
+
+export interface UndoRedoAction {
+  elementSelector: string
+  property: string
+  beforeValue: string
+  afterValue: string
+  breakpoint: Breakpoint
+  wasNewChange: boolean
+  changeScope?: 'all' | 'breakpoint-only'
+}
+
+export const BREAKPOINT_WIDTHS: Record<Breakpoint, number> = {
+  mobile: 375,
+  tablet: 768,
+  desktop: 1280,
+} as const
+
+export const BREAKPOINT_LABELS: Record<Breakpoint, string> = {
+  mobile: 'Mobile',
+  tablet: 'Tablet',
+  desktop: 'Desktop',
+} as const

package/src/types/claude.ts

@@ -0,0 +1,131 @@
+export type ClaudeStatus =
+  | 'idle'
+  | 'analyzing'
+  | 'complete'
+  | 'applying'
+  | 'applied'
+  | 'error'
+
+export type ClaudeErrorCode =
+  | 'CLI_NOT_FOUND'
+  | 'AUTH_REQUIRED'
+  | 'TIMEOUT'
+  | 'PARSE_FAILURE'
+  | 'UNKNOWN'
+
+export interface ClaudeError {
+  code: ClaudeErrorCode
+  message: string
+}
+
+export interface DiffLine {
+  type: 'context' | 'addition' | 'removal'
+  content: string
+}
+
+export interface DiffHunk {
+  header: string
+  lines: DiffLine[]
+}
+
+export interface ParsedDiff {
+  filePath: string
+  hunks: DiffHunk[]
+  linesAdded: number
+  linesRemoved: number
+}
+
+export interface ClaudeAnalyzeRequest {
+  changelog: string
+  projectRoot: string
+  /** When provided (from AI Scan), used as-is instead of wrapping changelog. */
+  smartPrompt?: string
+}
+
+export interface ClaudeAnalyzeResponse {
+  sessionId: string
+  diffs: ParsedDiff[]
+  summary: string
+}
+
+export interface ClaudeApplyRequest {
+  sessionId: string
+  projectRoot: string
+}
+
+export interface ClaudeApplyResponse {
+  success: boolean
+  filesModified: string[]
+  summary: string
+}
+
+export interface ClaudeStatusResponse {
+  available: boolean
+  version?: string
+  error?: string
+}
+
+export interface ClaudeScanRequest {
+  changelog: string
+  projectRoot: string
+}
+
+export type ScanGroupCategory =
+  | 'typography'
+  | 'spacing'
+  | 'colors'
+  | 'layout'
+  | 'borders'
+  | 'background'
+  | 'effects'
+  | 'mixed'
+
+export interface ScanGroup {
+  label: string
+  category: ScanGroupCategory
+  changeCount: number
+  suggestedFiles: string[]
+}
+
+export interface ClaudeScanResponse {
+  smartPrompt: string
+  intent: string
+  groups: ScanGroup[]
+  warnings: string[]
+}
+
+export interface RouteEntry {
+  urlPattern: string // e.g. "/", "/about", "/blog/[slug]" (web only)
+  filePath: string // relative to projectRoot
+  type: 'page' | 'layout' | 'loading' | 'error' | 'not-found' | 'template'
+}
+
+export interface ComponentEntry {
+  name: string // PascalCase: "Button", "HomeScreen", "ProfileWidget"
+  filePath: string // relative to projectRoot
+  nameLower: string // lowercase for matching: "button", "homescreen"
+  category: 'component' | 'screen' | 'page' | 'layout' | 'widget' | 'view'
+}
+
+export interface FileMap {
+  routes: RouteEntry[]
+  components: ComponentEntry[]
+}
+
+export interface SourceInfo {
+  fileName: string // Absolute path from React fiber _debugSource
+  lineNumber: number
+  columnNumber?: number
+  componentName: string | null
+  componentChain: string[]
+}
+
+export interface ProjectScanResult {
+  framework: string | null
+  cssStrategy: string[]
+  cssFiles: string[]
+  srcDirs: string[]
+  packageName: string | null
+  fileMap?: FileMap
+  assetDirs?: string[]
+}

package/src/types/component.ts

@@ -0,0 +1,49 @@
+// Component detection types for the Components tab
+
+export type DetectionMethod =
+  | 'semantic-html'
+  | 'custom-element'
+  | 'aria-role'
+  | 'class-pattern'
+  | 'data-attribute'
+
+export interface ComponentBoundingRect {
+  top: number
+  left: number
+  width: number
+  height: number
+}
+
+export interface VariantOption {
+  label: string
+  className: string | null
+  removeClassNames: string[] | null
+  pseudoState: string | null
+  pseudoStyles: Record<string, string> | null
+}
+
+export interface VariantGroup {
+  groupName: string
+  type: 'class' | 'pseudo'
+  options: VariantOption[]
+  activeIndex: number
+}
+
+export interface DetectedComponent {
+  selectorPath: string
+  name: string
+  tagName: string
+  detectionMethod: DetectionMethod
+  className: string | null
+  elementId: string | null
+  innerText: string | null
+  boundingRect: ComponentBoundingRect
+  variants: VariantGroup[]
+  childComponentCount: number
+}
+
+export interface CreatedComponent {
+  name: string
+  selectorPath: string
+  timestamp: number
+}

package/src/types/cssVariables.ts

@@ -0,0 +1,18 @@
+export interface CSSVariableDefinition {
+  value: string // raw value from stylesheet
+  resolvedValue: string // computed value from getComputedStyle
+  selector: string // e.g. ':root'
+  scope?: 'root' | 'dark' | 'media-dark' | 'custom' // theme scope
+}
+
+export interface CSSVariableFamilyMember {
+  name: string
+  suffix: string
+  value: string
+  resolvedValue: string
+}
+
+export interface CSSVariableFamily {
+  prefix: string // e.g. '--primary'
+  members: CSSVariableFamilyMember[]
+}

package/src/types/element.ts

@@ -0,0 +1,21 @@
+export interface BoundingRect {
+  x: number
+  y: number
+  width: number
+  height: number
+  top: number
+  right: number
+  bottom: number
+  left: number
+}
+
+export interface SelectedElement {
+  selectorPath: string | null
+  tagName: string | null
+  className: string | null
+  id: string | null
+  attributes: Record<string, string>
+  innerText: string | null
+  computedStyles: Record<string, string>
+  boundingRect: BoundingRect | null
+}

package/src/types/file-system-access.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Type augmentations for the File System Access API.
+ * These APIs are available in Chromium-based browsers (Chrome, Edge)
+ * but not yet in TypeScript's standard lib definitions.
+ */
+
+interface FileSystemDirectoryHandle {
+  entries(): AsyncIterableIterator<[string, FileSystemHandle]>
+  getDirectoryHandle(
+    name: string,
+    options?: { create?: boolean },
+  ): Promise<FileSystemDirectoryHandle>
+  getFileHandle(
+    name: string,
+    options?: { create?: boolean },
+  ): Promise<FileSystemFileHandle>
+}
+
+interface FileSystemFileHandle {
+  getFile(): Promise<File>
+}
+
+interface Window {
+  showDirectoryPicker?(options?: {
+    mode?: 'read' | 'readwrite'
+  }): Promise<FileSystemDirectoryHandle>
+}

package/src/types/gradient.ts

@@ -0,0 +1,12 @@
+export interface GradientStop {
+  color: string
+  position: number
+  opacity: number
+}
+
+export interface GradientData {
+  type: 'linear' | 'radial' | 'conic'
+  angle: number
+  stops: GradientStop[]
+  repeat?: boolean
+}