Pattern Builder

function calculateGridLayout(channels: number): GridLayout {
  // Auto-calculate optimal rows/columns
  if (channels <= 8) {
    return { rows: 1, cols: channels }  // Single row
  } else if (channels <= 16) {
    return { rows: 2, cols: channels / 2 }  // 2 rows
  } else if (channels <= 32) {
    return { rows: 4, cols: channels / 4 }  // 4 rows
  } else {
    return { rows: 8, cols: channels / 8 }  // 8 rows (max 64 channels)
  }
}

<ExpressionEditor>
  <Input 
    value="sin((t * 0.05) + (i * 0.8)) > 0"
    onChange={updateExpression}
  />
  
  <div className="preview">
    {/* Live visualization of wave propagating across LEDs */}
  </div>
  
  <Button onClick={exportToFrames}>
    Convert to Frames
  </Button>
  
  <Button onClick={exportToCpp}>
    Generate C++ Code
  </Button>
</ExpressionEditor>

class PrecisionTimer {
  private targetDelay: number
  private callback: () => void
  private running: boolean = false
  
  constructor(delay: number, callback: () => void) {
    this.targetDelay = delay
    this.callback = callback
  }
  
  start(): void {
    this.running = true
    const startTime = performance.now()
    
    const tick = () => {
      if (!this.running) return
      
      const elapsed = performance.now() - startTime
      
      if (elapsed >= this.targetDelay) {
        this.callback()
        return
      }
      
      // Continue ticking
      requestAnimationFrame(tick)
    }
    
    // Hybrid approach: setTimeout for bulk delay + RAF for precision
    const bulkDelay = Math.max(0, this.targetDelay - 20)
    setTimeout(() => {
      if (this.running) {
        requestAnimationFrame(tick)
      }
    }, bulkDelay)
  }
  
  stop(): void {
    this.running = false
  }
}

class ArduinoAPI {
  constructor(channelCount) {
    this.channels = new Array(channelCount).fill(0)
    this.frames = []
  }
  
  // Arduino-compatible functions
  set(channel, state) {
    this.channels[channel] = state ? 1 : 0
  }
  
  on() {
    this.channels.fill(1)
  }
  
  off() {
    this.channels.fill(0)
  }
  
  sleep(ms) {
    // Capture current frame with delay
    this.frames.push({
      channels: [...this.channels],
      delay: ms
    })
  }
  
  // Helper functions
  HIGH = 1
  LOW = 0
}

<div className="hidden lg:block">
  {/* Pattern Builder - Desktop Only */}
  <PatternBuilder />
</div>

<div className="lg:hidden">
  {/* Mobile Warning */}
  <Alert>
    <Info className="h-4 w-4" />
    <AlertTitle>Desktop Required</AlertTitle>
    <AlertDescription>
      The Pattern Builder requires a screen width of at least 1024px.
      Please use a desktop or laptop computer for pattern development.
    </AlertDescription>
  </Alert>
</div>