@antigenic-oss/paint 0.1.0

package/src/store/componentSlice.ts

@@ -0,0 +1,90 @@
+import type { StateCreator } from 'zustand'
+import type { DetectedComponent, CreatedComponent } from '@/types/component'
+
+export interface ComponentSlice {
+  detectedComponents: DetectedComponent[]
+  selectedComponentPath: string | null
+  componentSearchQuery: string
+  createdComponents: Record<string, CreatedComponent>
+
+  setDetectedComponents: (components: DetectedComponent[]) => void
+  setSelectedComponentPath: (path: string | null) => void
+  setComponentSearchQuery: (query: string) => void
+  addCreatedComponent: (component: CreatedComponent) => void
+  removeCreatedComponent: (selectorPath: string) => void
+  updateComponentVariantActiveIndex: (
+    selectorPath: string,
+    groupIndex: number,
+    optionIndex: number,
+  ) => void
+  clearComponents: () => void
+}
+
+export const createComponentSlice: StateCreator<
+  ComponentSlice,
+  [],
+  [],
+  ComponentSlice
+> = (set) => ({
+  detectedComponents: [],
+  selectedComponentPath: null,
+  componentSearchQuery: '',
+  createdComponents: {},
+
+  setDetectedComponents: (components) => {
+    set({ detectedComponents: components })
+  },
+
+  setSelectedComponentPath: (path) => {
+    set({ selectedComponentPath: path })
+  },
+
+  setComponentSearchQuery: (query) => {
+    set({ componentSearchQuery: query })
+  },
+
+  addCreatedComponent: (component) => {
+    set((state) => ({
+      createdComponents: {
+        ...state.createdComponents,
+        [component.selectorPath]: component,
+      },
+    }))
+  },
+
+  removeCreatedComponent: (selectorPath) => {
+    set((state) => {
+      const next = { ...state.createdComponents }
+      delete next[selectorPath]
+      return { createdComponents: next }
+    })
+  },
+
+  updateComponentVariantActiveIndex: (
+    selectorPath,
+    groupIndex,
+    optionIndex,
+  ) => {
+    set((state) => ({
+      detectedComponents: state.detectedComponents.map((comp) => {
+        if (comp.selectorPath !== selectorPath) return comp
+        return {
+          ...comp,
+          variants: comp.variants.map((group, gi) => {
+            if (gi !== groupIndex) return group
+            return { ...group, activeIndex: optionIndex }
+          }),
+        }
+      }),
+    }))
+  },
+
+  clearComponents: () => {
+    set({
+      detectedComponents: [],
+      selectedComponentPath: null,
+      componentSearchQuery: '',
+      createdComponents: {},
+    })
+  },
+})

package/src/store/consoleSlice.ts

@@ -0,0 +1,51 @@
+import type { StateCreator } from 'zustand'
+import type { ConsoleLevel } from '@/types/messages'
+
+const MAX_CONSOLE_ENTRIES = 200
+
+export interface ConsoleEntry {
+  id: number
+  level: ConsoleLevel
+  args: string[]
+  timestamp: number
+  source?: string
+  line?: number
+  column?: number
+}
+
+export interface ConsoleSlice {
+  consoleEntries: ConsoleEntry[]
+  consoleErrorCount: number
+
+  addConsoleEntry: (payload: Omit<ConsoleEntry, 'id'>) => void
+  clearConsole: () => void
+}
+
+let nextConsoleId = 1
+
+export const createConsoleSlice: StateCreator<
+  ConsoleSlice,
+  [],
+  [],
+  ConsoleSlice
+> = (set) => ({
+  consoleEntries: [],
+  consoleErrorCount: 0,
+
+  addConsoleEntry: (payload) => {
+    const entry: ConsoleEntry = { ...payload, id: nextConsoleId++ }
+    set((state) => {
+      const entries =
+        state.consoleEntries.length >= MAX_CONSOLE_ENTRIES
+          ? [...state.consoleEntries.slice(1), entry]
+          : [...state.consoleEntries, entry]
+      return {
+        consoleEntries: entries,
+        consoleErrorCount:
+          state.consoleErrorCount + (payload.level === 'error' ? 1 : 0),
+      }
+    })
+  },
+
+  clearConsole: () => set({ consoleEntries: [], consoleErrorCount: 0 }),
+})

package/src/store/cssVariableSlice.ts

@@ -0,0 +1,94 @@
+import type { StateCreator } from 'zustand'
+import type {
+  CSSVariableDefinition,
+  CSSVariableFamily,
+} from '@/types/cssVariables'
+import { groupVariablesIntoFamilies } from '@/lib/cssVariableUtils'
+import type { TailwindColorClass } from '@/lib/tailwindClassParser'
+
+export type TailwindClassMapEntry = TailwindColorClass & {
+  variableName: string | null
+}
+
+export interface CSSVariableSlice {
+  cssVariableDefinitions: Record<string, CSSVariableDefinition>
+  cssVariableUsages: Record<string, string>
+  cssVariableFamilies: CSSVariableFamily[]
+  isExplicitTokens: boolean
+  detachedProperties: Record<string, boolean>
+  tailwindClassMap: Record<string, TailwindClassMapEntry>
+  themeScopes: string[]
+
+  setCSSVariableDefinitions: (
+    definitions: Record<string, CSSVariableDefinition>,
+    isExplicit?: boolean,
+    scopes?: string[],
+  ) => void
+  setCSSVariableUsages: (usages: Record<string, string>) => void
+  clearCSSVariableUsages: () => void
+  detachProperty: (selectorPath: string, property: string) => void
+  reattachProperty: (selectorPath: string, property: string) => void
+  isPropertyDetached: (selectorPath: string, property: string) => boolean
+  setTailwindClassMap: (map: Record<string, TailwindClassMapEntry>) => void
+}
+
+function detachKey(selectorPath: string, property: string): string {
+  return `${selectorPath}::${property}`
+}
+
+export const createCSSVariableSlice: StateCreator<
+  CSSVariableSlice,
+  [],
+  [],
+  CSSVariableSlice
+> = (set, get) => ({
+  cssVariableDefinitions: {},
+  cssVariableUsages: {},
+  cssVariableFamilies: [],
+  isExplicitTokens: false,
+  detachedProperties: {},
+  tailwindClassMap: {},
+  themeScopes: [],
+
+  setCSSVariableDefinitions: (definitions, isExplicit, scopes) => {
+    set({
+      cssVariableDefinitions: definitions,
+      cssVariableFamilies: groupVariablesIntoFamilies(definitions),
+      isExplicitTokens: isExplicit ?? false,
+      themeScopes: scopes ?? [],
+    })
+  },
+
+  setCSSVariableUsages: (usages) => {
+    set({ cssVariableUsages: usages })
+  },
+
+  clearCSSVariableUsages: () => {
+    set({ cssVariableUsages: {}, tailwindClassMap: {} })
+  },
+
+  detachProperty: (selectorPath, property) => {
+    const key = detachKey(selectorPath, property)
+    set((state) => ({
+      detachedProperties: { ...state.detachedProperties, [key]: true },
+    }))
+  },
+
+  reattachProperty: (selectorPath, property) => {
+    const key = detachKey(selectorPath, property)
+    set((state) => {
+      const next = { ...state.detachedProperties }
+      delete next[key]
+      return { detachedProperties: next }
+    })
+  },
+
+  isPropertyDetached: (selectorPath, property) => {
+    const key = detachKey(selectorPath, property)
+    return !!get().detachedProperties[key]
+  },
+
+  setTailwindClassMap: (map) => {
+    set({ tailwindClassMap: map })
+  },
+})

package/src/store/elementSlice.ts

@@ -0,0 +1,78 @@
+import type { StateCreator } from 'zustand'
+import type { BoundingRect } from '@/types/element'
+import type { SourceInfo } from '@/types/claude'
+
+export interface ElementSlice {
+  selectorPath: string | null
+  tagName: string | null
+  className: string | null
+  elementId: string | null
+  attributes: Record<string, string>
+  innerText: string | null
+  computedStyles: Record<string, string>
+  boundingRect: BoundingRect | null
+  sourceInfo: SourceInfo | null
+
+  selectElement: (data: {
+    selectorPath: string
+    tagName: string
+    className: string | null
+    id: string | null
+    attributes: Record<string, string>
+    innerText: string | null
+    computedStyles: Record<string, string>
+    boundingRect: BoundingRect
+    sourceInfo?: SourceInfo | null
+  }) => void
+  clearSelection: () => void
+  updateComputedStyles: (styles: Record<string, string>) => void
+}
+
+export const createElementSlice: StateCreator<
+  ElementSlice,
+  [],
+  [],
+  ElementSlice
+> = (set) => ({
+  selectorPath: null,
+  tagName: null,
+  className: null,
+  elementId: null,
+  attributes: {},
+  innerText: null,
+  computedStyles: {},
+  boundingRect: null,
+  sourceInfo: null,
+
+  selectElement: (data) => {
+    set({
+      selectorPath: data.selectorPath,
+      tagName: data.tagName,
+      className: data.className,
+      elementId: data.id,
+      attributes: data.attributes,
+      innerText: data.innerText,
+      computedStyles: data.computedStyles,
+      boundingRect: data.boundingRect,
+      sourceInfo: data.sourceInfo ?? null,
+    })
+  },
+
+  clearSelection: () => {
+    set({
+      selectorPath: null,
+      tagName: null,
+      className: null,
+      elementId: null,
+      attributes: {},
+      innerText: null,
+      computedStyles: {},
+      boundingRect: null,
+      sourceInfo: null,
+    })
+  },
+
+  updateComputedStyles: (styles) => {
+    set({ computedStyles: styles })
+  },
+})

package/src/store/index.ts

@@ -0,0 +1,35 @@
+import { create } from 'zustand'
+import { createUISlice, type UISlice } from './uiSlice'
+import { createElementSlice, type ElementSlice } from './elementSlice'
+import { createTreeSlice, type TreeSlice } from './treeSlice'
+import { createChangeSlice, type ChangeSlice } from './changeSlice'
+import { createClaudeSlice, type ClaudeSlice } from './claudeSlice'
+import {
+  createCSSVariableSlice,
+  type CSSVariableSlice,
+} from './cssVariableSlice'
+import { createComponentSlice, type ComponentSlice } from './componentSlice'
+import { createConsoleSlice, type ConsoleSlice } from './consoleSlice'
+import { createTerminalSlice, type TerminalSlice } from './terminalSlice'
+
+export type EditorStore = UISlice &
+  ElementSlice &
+  TreeSlice &
+  ChangeSlice &
+  ClaudeSlice &
+  CSSVariableSlice &
+  ComponentSlice &
+  ConsoleSlice &
+  TerminalSlice
+
+export const useEditorStore = create<EditorStore>()((...a) => ({
+  ...createUISlice(...a),
+  ...createElementSlice(...a),
+  ...createTreeSlice(...a),
+  ...createChangeSlice(...a),
+  ...createClaudeSlice(...a),
+  ...createCSSVariableSlice(...a),
+  ...createComponentSlice(...a),
+  ...createConsoleSlice(...a),
+  ...createTerminalSlice(...a),
+}))

package/src/store/terminalSlice.ts

@@ -0,0 +1,30 @@
+import type { StateCreator } from 'zustand'
+
+export type TerminalStatus =
+  | 'disconnected'
+  | 'connecting'
+  | 'connected'
+  | 'error'
+
+export interface TerminalSlice {
+  terminalStatus: TerminalStatus
+  terminalServerPort: number
+  writeToTerminal: ((data: string) => void) | null
+
+  setTerminalStatus: (status: TerminalStatus) => void
+  registerTerminalWriter: (writer: ((data: string) => void) | null) => void
+}
+
+export const createTerminalSlice: StateCreator<
+  TerminalSlice,
+  [],
+  [],
+  TerminalSlice
+> = (set) => ({
+  terminalStatus: 'disconnected',
+  terminalServerPort: 4001,
+  writeToTerminal: null,
+
+  setTerminalStatus: (status) => set({ terminalStatus: status }),
+  registerTerminalWriter: (writer) => set({ writeToTerminal: writer }),
+})

package/src/store/treeSlice.ts

@@ -0,0 +1,69 @@
+import type { StateCreator } from 'zustand'
+import type { TreeNode } from '@/types/tree'
+
+// Collect all node IDs that have children for full expansion
+function collectAllIds(node: TreeNode, ids: Set<string>) {
+  if (node.children.length === 0) return
+  ids.add(node.id)
+  for (const child of node.children) {
+    collectAllIds(child, ids)
+  }
+}
+
+export interface TreeSlice {
+  rootNode: TreeNode | null
+  expandedNodeIds: Set<string>
+  searchQuery: string
+  highlightedNodeId: string | null
+
+  setRootNode: (node: TreeNode | null) => void
+  setSearchQuery: (query: string) => void
+  setHighlightedNodeId: (id: string | null) => void
+  toggleNodeExpanded: (nodeId: string) => void
+  expandToNode: (nodeId: string) => void
+}
+
+export const createTreeSlice: StateCreator<TreeSlice, [], [], TreeSlice> = (
+  set,
+  get,
+) => ({
+  rootNode: null,
+  expandedNodeIds: new Set<string>(),
+  searchQuery: '',
+  highlightedNodeId: null,
+
+  setRootNode: (node) => {
+    const { expandedNodeIds: prev } = get()
+    // On first load (no previous state), start collapsed.
+    // On subsequent updates (DOM_UPDATED), preserve user-expanded state.
+    if (prev.size === 0) {
+      set({ rootNode: node, expandedNodeIds: new Set<string>() })
+    } else {
+      set({ rootNode: node })
+    }
+  },
+  setSearchQuery: (query) => set({ searchQuery: query }),
+  setHighlightedNodeId: (id) => set({ highlightedNodeId: id }),
+
+  toggleNodeExpanded: (nodeId) => {
+    const { expandedNodeIds } = get()
+    const next = new Set(expandedNodeIds)
+    if (next.has(nodeId)) {
+      next.delete(nodeId)
+    } else {
+      next.add(nodeId)
+    }
+    set({ expandedNodeIds: next })
+  },
+
+  expandToNode: (nodeId) => {
+    // Merge ancestors into existing expanded state (preserve user-toggled branches)
+    const { expandedNodeIds: prev } = get()
+    const next = new Set(prev)
+    const parts = nodeId.split(' > ')
+    for (let i = 1; i <= parts.length; i++) {
+      next.add(parts.slice(0, i).join(' > '))
+    }
+    set({ expandedNodeIds: next })
+  },
+})