bun add @duck_ui/core @duckdb/duckdb-wasm

import { DuckUI } from '@duck_ui/core'

const ui = new DuckUI()

import { DuckUI } from '@duck_ui/core'

const ui = new DuckUI()
await ui.init({
  orders: [
    { id: 1, product: 'Widget', total: 99.50 },
    { id: 2, product: 'Gadget', total: 149.00 },
  ],
  sales: { url: '/data/sales.parquet', format: 'parquet' },
})

const result = await ui.query('SELECT product, SUM(total) AS rev FROM orders GROUP BY 1')
console.log(result.rows) // [{ product: 'Widget', rev: 99.5 }, ...]

ui.setFilter('product', 'Widget')
const filtered = await ui.query('SELECT * FROM orders')
// Automatically applies WHERE "product" = 'Widget'

const schema = await ui.getSchema('orders')
// { tableName: 'orders', columns: [{ name: 'id', type: 'INTEGER', nullable: true }, ...] }

ui.clearFilters()
await ui.destroy()

import {
  toBarData,
  toLineData,
  toAreaData,
  toScatterData,
  toPieData,
  toSparklineData,
} from '@duck_ui/core'

import {
  DuckDBManager,
  ConnectionPool,
  QueryExecutor,
  QueryCache,
  FilterInjector,
} from '@duck_ui/core'

bun add @duck_ui/embed @duckdb/duckdb-wasm

import { DuckUIProvider } from '@duck_ui/embed'

type DataInput =
  | Record<string, unknown>[]                              // Array of objects -> table
  | { url: string; format?: 'csv' | 'json' | 'parquet' }  // Remote file
  | { fetch: () => Promise<Record<string, unknown>[]> }    // Async callback
  | File                                                    // Browser File object

<DuckUIProvider
  data={{
    orders: [
      { id: 1, product: 'Widget', total: 99.50 },
      { id: 2, product: 'Gadget', total: 149.00 },
    ],
    sales: { url: '/data/sales.parquet', format: 'parquet' },
    users: { fetch: () => fetch('/api/users').then(r => r.json()) },
  }}
  theme={{ primaryColor: '#4f46e5' }}
  onReady={() => console.log('Ready')}
  onError={(err) => console.error(err)}
>
  {children}
</DuckUIProvider>

function useDuckUI(): { query: (sql: string) => Promise<QueryResult>; status: Status }

import { useDuckUI } from '@duck_ui/embed'

function MyComponent() {
  const { query, status } = useDuckUI()

  if (status !== 'ready') return <p>Loading...</p>

  const handleClick = async () => {
    const result = await query('SELECT count(*) as n FROM orders')
    console.log(result.rows) // [{ n: 42 }]
  }

  return <button onClick={handleClick}>Count orders</button>
}

function useTheme(): DuckTheme

import { useTheme } from '@duck_ui/embed'

const theme = useTheme()
// theme.primaryColor, theme.background, theme.palette, etc.

import { Chart } from '@duck_ui/embed'

<Chart
  sql="SELECT month, SUM(revenue) AS rev FROM sales GROUP BY 1 ORDER BY 1"
  type="bar"
  height={350}
  axes={{ y: { format: 'currency' } }}
/>

import { DataTable } from '@duck_ui/embed'

<DataTable sql="SELECT * FROM orders" pageSize={50} sortable />

import { KPICard } from '@duck_ui/embed'

<KPICard
  sql="SELECT SUM(total) AS value FROM orders"
  label="Total Revenue"
  format="currency"
  currency="USD"
  compareSql="SELECT SUM(total) AS value FROM orders WHERE year = 2024"
  compareLabel="vs 2024"
  sparklineSql="SELECT month, SUM(total) FROM orders GROUP BY 1 ORDER BY 1"
/>

import { ExportButton } from '@duck_ui/embed'

const { data } = useQuery('SELECT * FROM sales')
<ExportButton data={data} format="csv" fileName="sales-report" />

import { Dashboard } from '@duck_ui/embed'

<DuckUIProvider data={{ orders }}>
  <Dashboard columns={3} gap={16}>
    <Dashboard.Panel span={2}>
      <FilterBar auto="orders" />
    </Dashboard.Panel>
    <Dashboard.Panel>
      <KPICard sql="SELECT count(*) as value FROM orders" label="Orders" />
    </Dashboard.Panel>
    <Dashboard.Panel span={2}>
      <Chart sql="SELECT status, count(*) FROM orders GROUP BY 1" type="bar" />
    </Dashboard.Panel>
    <Dashboard.Panel>
      <Chart sql="SELECT date, sum(total) FROM orders GROUP BY 1" type="line" />
    </Dashboard.Panel>
    <Dashboard.Panel span={3}>
      <DataTable sql="SELECT * FROM orders" pageSize={20} sortable />
    </Dashboard.Panel>
  </Dashboard>
</DuckUIProvider>

import { FilterBar } from '@duck_ui/embed'

// Auto mode
<FilterBar auto="orders" />

// Manual mode
<FilterBar filters={[
  { column: 'status', type: 'select' },
  { column: 'total', type: 'range', min: 0, max: 1000 },
  { column: 'created_at', type: 'daterange' },
]} source="orders" />

interface FilterConfig {
  column: string
  type: 'select' | 'multiselect' | 'range' | 'daterange'
  label?: string
  min?: number        // For range
  max?: number        // For range
  step?: number       // For range
  options?: string[]  // For select (explicit options)
}

bun add @duck_ui/elements

<duck-provider src="/data/orders.json" table="orders" theme="dark">
  <!-- child elements -->
</duck-provider>

<duck-chart
  sql="SELECT product, SUM(total) AS revenue FROM orders GROUP BY 1"
  type="bar"
  height="350"
  title="Revenue by Product"
></duck-chart>

<duck-table sql="SELECT * FROM orders" page-size="50" sortable striped></duck-table>

<duck-kpi
  sql="SELECT SUM(total) AS value FROM orders"
  label="Total Revenue"
  format="currency"
  compare-sql="SELECT SUM(total) AS value FROM orders WHERE year = 2024"
></duck-kpi>

<duck-dashboard columns="3" gap="16">
  <duck-panel span="2">
    <duck-filter-bar auto source="orders"></duck-filter-bar>
  </duck-panel>
  <duck-panel>
    <duck-kpi sql="SELECT count(*) as value FROM orders" label="Orders"></duck-kpi>
  </duck-panel>
  <duck-panel span="3">
    <duck-table sql="SELECT * FROM orders" page-size="20" sortable></duck-table>
  </duck-panel>
</duck-dashboard>

<duck-export sql="SELECT * FROM orders" format="csv" file-name="orders-report" label="Download CSV"></duck-export>

const provider = document.querySelector('duck-provider')

provider.addEventListener('duck-ready', () => {
  console.log('Duck-UI is ready')
})

provider.addEventListener('duck-filter-change', (e) => {
  console.log('Active filters:', e.detail.filters)
})

duck-provider {
  --duck-bg: #1a1a2e;
  --duck-text: #e0e0e0;
  --duck-primary: #00d4ff;
  --duck-surface: #16213e;
  --duck-border: #374151;
}

<script src="https://unpkg.com/@duck_ui/cdn/dist/duck-ui.min.js"></script>

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/@duck_ui/cdn/dist/duck-ui.min.js"></script>
</head>
<body>
  <duck-provider src="/data/orders.json" table="orders" theme="dark">
    <duck-dashboard columns="2">
      <duck-panel>
        <duck-kpi
          sql="SELECT SUM(total) AS value FROM orders"
          label="Revenue"
          format="currency"
        ></duck-kpi>
      </duck-panel>
      <duck-panel>
        <duck-chart
          sql="SELECT status, count(*) AS n FROM orders GROUP BY 1"
          type="bar"
          height="300"
        ></duck-chart>
      </duck-panel>
      <duck-panel span="2">
        <duck-table sql="SELECT * FROM orders" page-size="25" sortable></duck-table>
      </duck-panel>
    </duck-dashboard>
  </duck-provider>
</body>
</html>

<script src="https://unpkg.com/@duck_ui/cdn/dist/duck-ui.min.js"></script>
<script>
  const ui = new DuckUI()
  ui.init({
    orders: [
      { id: 1, product: 'Widget', total: 99.50 },
      { id: 2, product: 'Gadget', total: 149.00 },
    ],
  }).then(async () => {
    const result = await ui.query('SELECT * FROM orders')
    console.log(result.rows)
  })
</script>

interface QueryResult {
  rows: Record<string, unknown>[]
  columns: ColumnInfo[]
  rowCount: number
  executionTime: number  // milliseconds
}

interface ColumnInfo {
  name: string
  type: string
  nullable: boolean
}

interface TableSchema {
  tableName: string
  columns: ColumnInfo[]
}

type FilterValue =
  | string
  | number
  | boolean
  | string[]
  | number[]
  | { min: number; max: number }
  | { start: string; end: string }
  | null

interface ChartTheme {
  background: string
  textColor: string
  gridColor: string
  axisColor: string
  palette: string[]
  fontFamily: string
  fontSize: number
}

interface DuckTheme extends ChartTheme {
  surfaceColor: string
  borderColor: string
  hoverColor: string
  primaryColor: string
  errorColor: string
  errorBgColor: string
  mutedTextColor: string
  stripeColor: string
  successColor: string
  successBgColor: string
  dangerColor: string
  dangerBgColor: string
}

interface AxisOptions {
  label?: string
  format?: 'number' | 'currency' | 'percent' | 'date' | ((value: number) => string)
}

import { lightTheme, darkTheme } from '@duck_ui/embed'
// or
import { lightTheme, darkTheme } from '@duck_ui/core'