React bindings

import { useEffect, useState } from 'react'
import { createEngine, type KymoscopeEngine } from '@kymoscope/sdk'
import { KymoscopeProvider } from '@kymoscope/sdk/react'
import '@kymoscope/sdk/styles/charts.css'

export function AnalysisRoot() {
  const [engine, setEngine] = useState<KymoscopeEngine | null>(null)
  useEffect(() => {
    const e = createEngine({ licenseKey: import.meta.env.VITE_KYMOSCOPE_LICENSE_KEY })
    setEngine(e)
    return () => e.dispose()
  }, [])
  return engine ? <KymoscopeProvider engine={engine}><AnalysisUi /></KymoscopeProvider> : null
}

function ImportButton() {
  const engine = useEngine()
  const busy = useEngineState((s) => s.importing > 0)
  return (
    <label className="btn">
      {busy ? 'Importing…' : 'Import'}
      <input type="file" multiple hidden onChange={(e) => void engine.datasets.importFiles([...e.target.files!])} />
    </label>
  )
}

const names = useEngineState(
  (s) => s.datasets.map((d) => d.name),
  (a, b) => a.length === b.length && a.every((x, i) => x === b[i]),
)

function ChartCard({ chart }: { chart: ChartModel }) {
  const [status, setStatus] = useState<ChartStatus | null>(null)
  const view = useRef<ChartView | null>(null)
  return (
    <section className="card">
      <header>
        {chart.title ?? chartLabel(chart.kind)}
        <button onClick={() => view.current?.exportPng().then(save)}>PNG</button>
      </header>
      <div style={{ position: 'relative', height: 300 }}>
        <Chart
          id={chart.id}
          style={{ height: '100%' }}
          options={{ theme }}
          onStatus={setStatus}
          onContextMenu={(e) => openMenu(chart.id, e)}
          viewRef={(v) => { view.current = v }}
        />
        {status === 'no-data' ? <Placeholder>Import a file to start</Placeholder> : null}
      </div>
    </section>
  )
}