@antigenic-oss/paint 0.1.0

package/src/lib/cssVariableUtils.ts

@@ -0,0 +1,409 @@
+import type {
+  CSSVariableDefinition,
+  CSSVariableFamily,
+} from '@/types/cssVariables'
+
+/**
+ * Extract the variable name from a var() expression.
+ * e.g. 'var(--primary-500)' → '--primary-500'
+ *      'var(--primary-500, #fff)' → '--primary-500'
+ */
+export function extractVariableName(expr: string): string | null {
+  const match = expr.match(/var\(\s*(--[^,)]+)/)
+  return match ? match[1].trim() : null
+}
+
+/**
+ * Group CSS variable definitions into families by shared prefix.
+ * Only creates a family when 2+ members share the same prefix.
+ * e.g. --primary-100, --primary-200 → family prefix '--primary'
+ */
+export function groupVariablesIntoFamilies(
+  definitions: Record<string, CSSVariableDefinition>,
+): CSSVariableFamily[] {
+  const prefixMap = new Map<
+    string,
+    { name: string; suffix: string; value: string; resolvedValue: string }[]
+  >()
+
+  for (const [name, def] of Object.entries(definitions)) {
+    // Find last hyphen-separated segment as suffix
+    const lastDash = name.lastIndexOf('-')
+    if (lastDash <= 2) continue // skip if no meaningful prefix (-- is index 0-1)
+
+    const prefix = name.substring(0, lastDash)
+    const suffix = name.substring(lastDash + 1)
+
+    if (!prefixMap.has(prefix)) {
+      prefixMap.set(prefix, [])
+    }
+    prefixMap.get(prefix)!.push({
+      name,
+      suffix,
+      value: def.value,
+      resolvedValue: def.resolvedValue,
+    })
+  }
+
+  const families: CSSVariableFamily[] = []
+  for (const [prefix, members] of prefixMap) {
+    if (members.length >= 2) {
+      families.push({ prefix, members })
+    }
+  }
+
+  return families
+}
+
+/**
+ * Find the family that contains a given variable name.
+ */
+export function findFamilyForVariable(
+  name: string,
+  families: CSSVariableFamily[],
+): CSSVariableFamily | null {
+  for (const family of families) {
+    if (family.members.some((m) => m.name === name)) {
+      return family
+    }
+  }
+  return null
+}
+
+const COLOR_PATTERN =
+  /^(#[0-9a-f]{3,8}|rgba?\(|hsla?\(|transparent|currentcolor|inherit)$/i
+
+// Tailwind CSS channel formats: space-separated RGB (e.g. "5 5 5", "74 255 215")
+// or HSL (e.g. "0 0% 3.9%", "220 70% 50%") used with opacity support.
+const RGB_CHANNELS_PATTERN = /^\d{1,3}\s+\d{1,3}\s+\d{1,3}$/
+const HSL_CHANNELS_PATTERN =
+  /^\d{1,3}(\.\d+)?\s+\d{1,3}(\.\d+)?%\s+\d{1,3}(\.\d+)?%$/
+
+const NAMED_COLORS = new Set([
+  'aliceblue',
+  'antiquewhite',
+  'aqua',
+  'aquamarine',
+  'azure',
+  'beige',
+  'bisque',
+  'black',
+  'blanchedalmond',
+  'blue',
+  'blueviolet',
+  'brown',
+  'burlywood',
+  'cadetblue',
+  'chartreuse',
+  'chocolate',
+  'coral',
+  'cornflowerblue',
+  'cornsilk',
+  'crimson',
+  'cyan',
+  'darkblue',
+  'darkcyan',
+  'darkgoldenrod',
+  'darkgray',
+  'darkgreen',
+  'darkgrey',
+  'darkkhaki',
+  'darkmagenta',
+  'darkolivegreen',
+  'darkorange',
+  'darkorchid',
+  'darkred',
+  'darksalmon',
+  'darkseagreen',
+  'darkslateblue',
+  'darkslategray',
+  'darkslategrey',
+  'darkturquoise',
+  'darkviolet',
+  'deeppink',
+  'deepskyblue',
+  'dimgray',
+  'dimgrey',
+  'dodgerblue',
+  'firebrick',
+  'floralwhite',
+  'forestgreen',
+  'fuchsia',
+  'gainsboro',
+  'ghostwhite',
+  'gold',
+  'goldenrod',
+  'gray',
+  'green',
+  'greenyellow',
+  'grey',
+  'honeydew',
+  'hotpink',
+  'indianred',
+  'indigo',
+  'ivory',
+  'khaki',
+  'lavender',
+  'lavenderblush',
+  'lawngreen',
+  'lemonchiffon',
+  'lightblue',
+  'lightcoral',
+  'lightcyan',
+  'lightgoldenrodyellow',
+  'lightgray',
+  'lightgreen',
+  'lightgrey',
+  'lightpink',
+  'lightsalmon',
+  'lightseagreen',
+  'lightskyblue',
+  'lightslategray',
+  'lightslategrey',
+  'lightsteelblue',
+  'lightyellow',
+  'lime',
+  'limegreen',
+  'linen',
+  'magenta',
+  'maroon',
+  'mediumaquamarine',
+  'mediumblue',
+  'mediumorchid',
+  'mediumpurple',
+  'mediumseagreen',
+  'mediumslateblue',
+  'mediumspringgreen',
+  'mediumturquoise',
+  'mediumvioletred',
+  'midnightblue',
+  'mintcream',
+  'mistyrose',
+  'moccasin',
+  'navajowhite',
+  'navy',
+  'oldlace',
+  'olive',
+  'olivedrab',
+  'orange',
+  'orangered',
+  'orchid',
+  'palegoldenrod',
+  'palegreen',
+  'paleturquoise',
+  'palevioletred',
+  'papayawhip',
+  'peachpuff',
+  'peru',
+  'pink',
+  'plum',
+  'powderblue',
+  'purple',
+  'rebeccapurple',
+  'red',
+  'rosybrown',
+  'royalblue',
+  'saddlebrown',
+  'salmon',
+  'sandybrown',
+  'seagreen',
+  'seashell',
+  'sienna',
+  'silver',
+  'skyblue',
+  'slateblue',
+  'slategray',
+  'slategrey',
+  'snow',
+  'springgreen',
+  'steelblue',
+  'tan',
+  'teal',
+  'thistle',
+  'tomato',
+  'turquoise',
+  'violet',
+  'wheat',
+  'white',
+  'whitesmoke',
+  'yellow',
+  'yellowgreen',
+])
+
+/**
+ * Check if a resolved value looks like a color.
+ */
+export function isColorValue(value: string): boolean {
+  const trimmed = value.trim().toLowerCase()
+  if (COLOR_PATTERN.test(trimmed)) return true
+  if (NAMED_COLORS.has(trimmed)) return true
+  // Tailwind-style space-separated RGB channels (e.g. "5 5 5", "74 255 215")
+  if (RGB_CHANNELS_PATTERN.test(trimmed)) return true
+  // Tailwind-style space-separated HSL channels (e.g. "0 0% 3.9%", "220 70% 50%")
+  if (HSL_CHANNELS_PATTERN.test(trimmed)) return true
+  return false
+}
+
+/**
+ * Convert a resolved value to a displayable CSS color string.
+ * Handles Tailwind-style channel values (e.g. "5 5 5" → "rgb(5, 5, 5)",
+ * "220 70% 50%" → "hsl(220, 70%, 50%)") that aren't valid CSS by themselves.
+ * Returns the original value if it's already a valid CSS color.
+ */
+export function toDisplayableColor(value: string): string {
+  const trimmed = value.trim()
+  if (RGB_CHANNELS_PATTERN.test(trimmed)) {
+    const parts = trimmed.split(/\s+/)
+    return `rgb(${parts[0]}, ${parts[1]}, ${parts[2]})`
+  }
+  if (HSL_CHANNELS_PATTERN.test(trimmed)) {
+    const parts = trimmed.split(/\s+/)
+    return `hsl(${parts[0]}, ${parts[1]}, ${parts[2]})`
+  }
+  return trimmed
+}
+
+/**
+ * Filter variable definitions to only those whose resolved values are colors.
+ */
+export function filterColorVariables(
+  definitions: Record<string, CSSVariableDefinition>,
+): Record<string, CSSVariableDefinition> {
+  const result: Record<string, CSSVariableDefinition> = {}
+  for (const [name, def] of Object.entries(definitions)) {
+    if (isColorValue(def.resolvedValue)) {
+      result[name] = def
+    }
+  }
+  return result
+}
+
+/**
+ * Format a CSS variable name as a slash-separated token path for display.
+ * e.g. '--primary-500' → 'primary/500'
+ *      '--color-red-400' → 'color/red/400'
+ */
+export function formatTokenDisplayName(cssVarName: string): string {
+  const stripped = cssVarName.startsWith('--')
+    ? cssVarName.slice(2)
+    : cssVarName
+  return stripped.replace(/-/g, '/')
+}
+
+/**
+ * Convert a camelCase or PascalCase string to kebab-case.
+ * e.g. 'coreBlue' → 'core-blue', 'textPrimary' → 'text-primary'
+ */
+function camelToKebab(str: string): string {
+  return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
+}
+
+// Matches: key: '#hex' or key: 'rgba(...)' or key: "value" or key: number
+const TOKEN_ENTRY_RE =
+  /(\w+)\s*:\s*(?:'([^']*)'|"([^"]*)"|(\d+(?:\.\d+)?))\s*,?/g
+
+// Matches: export const NAME = { ... } as const  (captures NAME and the braced body)
+const EXPORT_BLOCK_RE =
+  /export\s+const\s+(\w+)\s*=\s*\{([^]*?)\}\s*(?:as\s+const\s*)?;/g
+
+/**
+ * Extract design tokens from a JS/TS/Dart source file and convert them
+ * to CSSVariableDefinition records.
+ *
+ * Handles patterns like:
+ *   export const colors = { teal: '#2CEAE1', coreBlue: '#1F8EE7' } as const;
+ *   export const spacing = { xs: 4, sm: 8 } as const;
+ *
+ * Produces:
+ *   '--colors-teal': { value: '#2CEAE1', resolvedValue: '#2CEAE1', selector: 'tokens' }
+ *   '--spacing-xs':  { value: '4',       resolvedValue: '4',       selector: 'tokens' }
+ */
+export function extractDesignTokensFromSource(
+  source: string,
+  filePath: string,
+): Record<string, CSSVariableDefinition> {
+  const results: Record<string, CSSVariableDefinition> = {}
+
+  // Strip single-line and block comments to avoid matching inside them
+  const cleaned = source.replace(/\/\/.*$/gm, '').replace(/\/\*[^]*?\*\//g, '')
+
+  EXPORT_BLOCK_RE.lastIndex = 0
+  let blockMatch: RegExpExecArray | null
+
+  while ((blockMatch = EXPORT_BLOCK_RE.exec(cleaned)) !== null) {
+    const groupName = blockMatch[1] // e.g. 'colors', 'spacing', 'onGradient'
+    const body = blockMatch[2]
+
+    // Check for nested objects: key: { subKey: value }
+    // Split into top-level entries and nested blocks
+    const nestedRe = /(\w+)\s*:\s*\{([^}]*)\}/g
+    const nestedKeys = new Set<string>()
+    let nestedMatch: RegExpExecArray | null
+    nestedRe.lastIndex = 0
+
+    while ((nestedMatch = nestedRe.exec(body)) !== null) {
+      const nestedGroupName = nestedMatch[1]
+      nestedKeys.add(nestedGroupName)
+      const nestedBody = nestedMatch[2]
+
+      TOKEN_ENTRY_RE.lastIndex = 0
+      let entryMatch: RegExpExecArray | null
+      while ((entryMatch = TOKEN_ENTRY_RE.exec(nestedBody)) !== null) {
+        const key = entryMatch[1]
+        const value = entryMatch[2] ?? entryMatch[3] ?? entryMatch[4] ?? ''
+        if (!value) continue
+
+        const varName = `--${camelToKebab(groupName)}-${camelToKebab(nestedGroupName)}-${camelToKebab(key)}`
+        results[varName] = {
+          value,
+          resolvedValue: value,
+          selector: `tokens:${filePath}`,
+        }
+      }
+    }
+
+    // Top-level entries (skip keys that were nested objects)
+    TOKEN_ENTRY_RE.lastIndex = 0
+    let entryMatch: RegExpExecArray | null
+    while ((entryMatch = TOKEN_ENTRY_RE.exec(body)) !== null) {
+      const key = entryMatch[1]
+      if (nestedKeys.has(key)) continue
+      // Skip non-value keys (functions, objects, arrays)
+      const value = entryMatch[2] ?? entryMatch[3] ?? entryMatch[4] ?? ''
+      if (!value) continue
+
+      const varName = `--${camelToKebab(groupName)}-${camelToKebab(key)}`
+      results[varName] = {
+        value,
+        resolvedValue: value,
+        selector: `tokens:${filePath}`,
+      }
+    }
+  }
+
+  return results
+}
+
+/** File names commonly used for design tokens in JS/TS/Dart projects */
+export const TOKEN_FILE_NAMES = new Set([
+  'colors.ts',
+  'colors.js',
+  'colors.dart',
+  'theme.ts',
+  'theme.js',
+  'theme.dart',
+  'tokens.ts',
+  'tokens.js',
+  'tokens.dart',
+  'design-tokens.ts',
+  'design-tokens.js',
+  'palette.ts',
+  'palette.js',
+  'palette.dart',
+  'app_colors.dart',
+  'app_theme.dart',
+  'constants.ts',
+  'constants.js',
+  'styles.ts',
+  'styles.js',
+])

package/src/lib/diffParser.ts

@@ -0,0 +1,206 @@
+/**
+ * Unified diff parser for Claude CLI output.
+ *
+ * Parses standard unified diff text into structured `ParsedDiff` objects
+ * that the editor can render in the diff viewer.
+ *
+ * The parser is intentionally lenient: Claude output may include
+ * commentary, fenced code blocks, or slight formatting variations.
+ */
+
+import type { ParsedDiff, DiffHunk, DiffLine } from '@/types/claude'
+
+/**
+ * Strip wrapping markdown fenced code blocks (``` or ```diff) that
+ * Claude sometimes emits around diff output.
+ */
+function stripCodeFences(text: string): string {
+  // Remove fenced blocks that wrap the entire output or individual diffs.
+  // We keep the inner content intact.
+  return text.replace(/^```(?:diff)?\s*$/gm, '')
+}
+
+/**
+ * Detect whether a line is the start of a new file diff header.
+ *
+ * We accept both `--- a/path` and `--- path` variants.
+ */
+function isFileHeaderLine(line: string): boolean {
+  return /^---\s+(?:a\/)?/.test(line)
+}
+
+/**
+ * Extract the file path from a `+++ b/path` line.
+ *
+ * Falls back to the `--- a/path` line if the +++ variant is
+ * missing or malformed.
+ */
+function extractFilePath(plusLine: string, minusLine: string): string {
+  // Try +++ first — this represents the "new" file.
+  const plusMatch = plusLine.match(/^\+\+\+\s+(?:b\/)?(.+)/)
+  if (plusMatch) {
+    return plusMatch[1].trim()
+  }
+
+  // Fall back to --- (the "old" file).
+  const minusMatch = minusLine.match(/^---\s+(?:a\/)?(.+)/)
+  if (minusMatch) {
+    return minusMatch[1].trim()
+  }
+
+  return 'unknown'
+}
+
+/**
+ * Parse a single hunk starting from the @@ header line.
+ *
+ * Returns the parsed hunk and the index of the first line AFTER
+ * this hunk (i.e. the next @@ header or file header).
+ */
+function parseHunk(
+  lines: string[],
+  startIndex: number,
+): { hunk: DiffHunk; nextIndex: number } {
+  const header = lines[startIndex]
+  const hunkLines: DiffLine[] = []
+
+  let i = startIndex + 1
+  while (i < lines.length) {
+    const line = lines[i]
+
+    // Stop at the next hunk or file header.
+    if (line.startsWith('@@') || isFileHeaderLine(line)) {
+      break
+    }
+
+    // Classify the line.
+    if (line.startsWith('+')) {
+      hunkLines.push({ type: 'addition', content: line.slice(1) })
+    } else if (line.startsWith('-')) {
+      hunkLines.push({ type: 'removal', content: line.slice(1) })
+    } else {
+      // Context line — may start with a space, or may be a bare line
+      // if Claude omitted the leading space.
+      const content = line.startsWith(' ') ? line.slice(1) : line
+      hunkLines.push({ type: 'context', content })
+    }
+
+    i++
+  }
+
+  return {
+    hunk: { header, lines: hunkLines },
+    nextIndex: i,
+  }
+}
+
+/**
+ * Parse a single file diff block (from `---` through all its hunks).
+ *
+ * Returns the parsed diff and the index of the first line AFTER
+ * this file block.
+ */
+function parseFileDiff(
+  lines: string[],
+  startIndex: number,
+): { diff: ParsedDiff; nextIndex: number } | null {
+  const minusLine = lines[startIndex]
+
+  // The +++ line should follow immediately.
+  const plusLineIndex = startIndex + 1
+  if (plusLineIndex >= lines.length) {
+    return null
+  }
+
+  const plusLine = lines[plusLineIndex]
+  if (!plusLine.startsWith('+++')) {
+    // Malformed — skip this block.
+    return null
+  }
+
+  const filePath = extractFilePath(plusLine, minusLine)
+
+  const hunks: DiffHunk[] = []
+  let linesAdded = 0
+  let linesRemoved = 0
+
+  let i = plusLineIndex + 1
+
+  // Consume all hunks belonging to this file.
+  while (i < lines.length) {
+    const line = lines[i]
+
+    // A new file header means we are done with this file.
+    if (isFileHeaderLine(line)) {
+      break
+    }
+
+    if (line.startsWith('@@')) {
+      const { hunk, nextIndex } = parseHunk(lines, i)
+      hunks.push(hunk)
+
+      // Count additions / removals.
+      for (const hl of hunk.lines) {
+        if (hl.type === 'addition') linesAdded++
+        if (hl.type === 'removal') linesRemoved++
+      }
+
+      i = nextIndex
+    } else {
+      // Non-hunk, non-header line (e.g. blank line between file blocks
+      // or stray commentary). Skip it.
+      i++
+    }
+  }
+
+  // If we found no hunks at all this was probably not a real diff block.
+  if (hunks.length === 0) {
+    return null
+  }
+
+  return {
+    diff: { filePath, hunks, linesAdded, linesRemoved },
+    nextIndex: i,
+  }
+}
+
+/**
+ * Parse unified diff output (potentially mixed with commentary) into
+ * an array of `ParsedDiff` objects.
+ *
+ * Handles:
+ * - Standard `git diff` / unified diff format.
+ * - Multiple files in one output block.
+ * - Markdown code fences wrapping the diffs.
+ * - Leading/trailing prose from Claude.
+ * - Empty or entirely non-diff input (returns `[]`).
+ */
+export function parseDiffs(output: string): ParsedDiff[] {
+  if (!output || output.trim().length === 0) {
+    return []
+  }
+
+  const cleaned = stripCodeFences(output)
+  const lines = cleaned.split('\n')
+  const results: ParsedDiff[] = []
+
+  let i = 0
+  while (i < lines.length) {
+    const line = lines[i]
+
+    if (isFileHeaderLine(line)) {
+      const parsed = parseFileDiff(lines, i)
+      if (parsed) {
+        results.push(parsed.diff)
+        i = parsed.nextIndex
+      } else {
+        // Could not parse — skip past this line.
+        i++
+      }
+    } else {
+      i++
+    }
+  }
+
+  return results
+}

package/src/lib/folderPicker.ts

@@ -0,0 +1,84 @@
+/**
+ * Client-side folder picker utility.
+ *
+ * On deployed (non-localhost): uses the File System Access API (showDirectoryPicker),
+ * or the bridge server's native picker if connected.
+ * On localhost: falls back to the server-side /api/claude/pick-folder endpoint.
+ */
+
+import { getApiBase } from '@/lib/apiBase'
+
+export type FolderPickResult =
+  | { type: 'handle'; handle: FileSystemDirectoryHandle; name: string }
+  | { type: 'path'; path: string }
+  | { type: 'cancelled' }
+  | { type: 'error'; message: string }
+
+/** Whether the browser supports the File System Access API (Chrome/Edge). */
+export function isFolderPickerSupported(): boolean {
+  return typeof window !== 'undefined' && 'showDirectoryPicker' in window
+}
+
+/** Whether the editor is running on localhost (can use server-side picker). */
+function isLocal(): boolean {
+  const h = window.location.hostname
+  return h === 'localhost' || h === '127.0.0.1'
+}
+
+/**
+ * Pick a folder.
+ * - Deployed + Chrome/Edge: File System Access API (client-side, no server needed)
+ * - Deployed + unsupported browser: returns error with guidance
+ * - Localhost: server-side /api/claude/pick-folder (osascript / zenity)
+ */
+export async function pickFolder(): Promise<FolderPickResult> {
+  // On localhost, prefer the server-side native picker (works in every browser)
+  if (isLocal()) {
+    return pickFolderServer()
+  }
+
+  // On deployed with bridge, use the bridge's native picker
+  const apiBase = getApiBase()
+  if (apiBase) {
+    return pickFolderServer()
+  }
+
+  // On deployed without bridge, use File System Access API
+  if (!isFolderPickerSupported()) {
+    return {
+      type: 'error',
+      message:
+        'Folder picker requires Chrome or Edge, or run the bridge server locally.',
+    }
+  }
+
+  return pickFolderClient()
+}
+
+async function pickFolderClient(): Promise<FolderPickResult> {
+  try {
+    const handle = await window.showDirectoryPicker!({ mode: 'read' })
+    return { type: 'handle', handle, name: handle.name }
+  } catch (err) {
+    if (err instanceof DOMException && err.name === 'AbortError') {
+      return { type: 'cancelled' }
+    }
+    return { type: 'error', message: 'Failed to open folder picker' }
+  }
+}
+
+async function pickFolderServer(): Promise<FolderPickResult> {
+  try {
+    const res = await fetch(`${getApiBase()}/api/claude/pick-folder`)
+    const data = await res.json()
+    if (data.cancelled) {
+      return { type: 'cancelled' }
+    }
+    if (data.path) {
+      return { type: 'path', path: data.path }
+    }
+    return { type: 'error', message: data.error || 'Unknown error' }
+  } catch {
+    return { type: 'error', message: 'Failed to open folder picker' }
+  }
+}