circuit-board

1"use client"
2 
3import * as React from "react"
4import { motion } from "framer-motion"
5import { cn } from "@workspace/ui/lib/utils"
6 
7interface CircuitNode {
8  id: string
9  x: number
10  y: number
11  label?: string
12  icon?: React.ReactNode
13  status?: "active" | "inactive" | "processing" | "error"
14  size?: "sm" | "md" | "lg"
15}
16 
17interface CircuitConnection {
18  from: string
19  to: string
20  animated?: boolean
21  bidirectional?: boolean
22  color?: string
23  pulseColor?: string
24}
25 
26interface CircuitBoardProps extends React.HTMLAttributes<HTMLDivElement> {
27  nodes: CircuitNode[]
28  connections: CircuitConnection[]
29  width?: number
30  height?: number
31  gridSize?: number
32  showGrid?: boolean
33  gridColor?: string
34  traceColor?: string
35  pulseColor?: string
36  nodeColor?: string
37  pulseSpeed?: number
38  traceWidth?: number
39  /** Force a specific theme variant. Defaults to auto-detect from system. */
40  variant?: "light" | "dark" | "auto"
41}
42 
43function CircuitBoard({
44  nodes,
45  connections,
46  width = 600,
47  height = 400,
48  gridSize = 20,
49  showGrid = true,
50  gridColor,
51  traceColor,
52  pulseColor,
53  nodeColor,
54  pulseSpeed = 2,
55  traceWidth = 2,
56  variant = "auto",
57  className,
58  ...props
59}: CircuitBoardProps) {
60  // Theme-aware color defaults
61  const [isDark, setIsDark] = React.useState(true)
62 
63  React.useEffect(() => {
64    if (variant !== "auto") {
65      setIsDark(variant === "dark")
66      return
67    }
68 
69    // Check for dark class on html/body
70    const checkTheme = () => {
71      const isDarkMode = document.documentElement.classList.contains("dark") ||
72        document.body.classList.contains("dark")
73      setIsDark(isDarkMode)
74    }
75 
76    checkTheme()
77 
78    // Listen for changes
79    const observer = new MutationObserver(checkTheme)
80    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] })
81    observer.observe(document.body, { attributes: true, attributeFilter: ["class"] })
82 
83    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
84    mediaQuery.addEventListener("change", checkTheme)
85 
86    return () => {
87      observer.disconnect()
88      mediaQuery.removeEventListener("change", checkTheme)
89    }
90  }, [variant])
91 
92  // Compute theme-aware colors
93  const computedGridColor = gridColor || (isDark ? "rgba(163, 163, 163, 0.08)" : "rgba(64, 64, 64, 0.12)")
94  const computedTraceColor = traceColor || (isDark ? "rgba(163, 163, 163, 0.25)" : "rgba(64, 64, 64, 0.35)")
95// … truncated