bo-grid 0.8.0 → 0.25.0

package/README.md

@@ -1,20 +1,20 @@
 # bo-grid
 
 Tiny, fast **Svelte 5** data grid for fintech UIs — canvas sparklines, batched
-realtime cell updates, and virtual scrolling in a package that gzips to ~20 KB.
-A free alternative to the heavyweight grids that paywall these features.
+realtime cell updates, and virtual scrolling, with a core that gzips to ~31 KB
+(Svelte external; unused exports tree-shake). A free alternative to the heavyweight
+grids that paywall these features.
 
 **[Live demo](https://bonguynvan.github.io/bo-grid/)** ·
 **[API reference](https://bonguynvan.github.io/bo-grid/api.html)** ·
 **[Benchmarks](./BENCHMARKS.md)** ·
 **[Roadmap](./ROADMAP.md)**
 
-The demo is a small gallery of nine grid types — a realtime **Trading desk**, a
-grouped **Portfolio** with subtotals and pivot, a general-purpose editable
-**Spreadsheet**, a live **Order book** depth ladder, a **Correlation** heatmap
-matrix, a **Leaderboard** with rank medals and score bars, a **Tree** file
-explorer, a drag-to-reorder **Tasks** list, and a **1M-row** trade tape windowed
-from a synthetic source — switch between them with the tabs.
+The demo is a gallery of grid types — a realtime **Trading desk**, a grouped
+**Portfolio** with subtotals and pivot, an editable **Spreadsheet**, a live
+**Order book**, a **Correlation** heatmap, a **Dashboard** with in-cell charts, a
+**Wide** 60-column grid, a server-backed **Lazy tree**, and more — switch between
+them with the tabs.
 
 > **Status: actively developed.** Working: config-driven columns, virtual scroll,
 > sort (single / multi / controlled), filtering (global, per-column row, header
@@ -37,13 +37,12 @@ from a synthetic source — switch between them with the tabs.
 | Price | $$$ / dev / year | Free (MIT) |
 | Sparklines | paid tier | built in |
 | Realtime cell updates | DIY / complex | built-in primitive |
-| Bundle | hundreds of KB | **~20 KB gzip** ([benchmarks](./BENCHMARKS.md)) |
+| Bundle | hundreds of KB | **~31 KB gzip core** ([benchmarks](./BENCHMARKS.md)) |
 | Svelte | wrapper | native Svelte 5 |
 
-bo-grid ships most of AG Grid's **paid (Enterprise)** features — grouping, pivot,
-tree data, master-detail, range selection, Excel export, sparklines — for free.
-See the honest **[bo-grid vs AG Grid](./docs/vs-ag-grid.md)** comparison (including
-what it doesn't do) to decide.
+bo-grid ships most of the features other grids put behind a **paid (Enterprise)**
+tier — grouping, pivot, tree data, master-detail, range selection, Excel export,
+sparklines — for free, and runs in any framework via a [custom element](./docs/frameworks.md).
 
 ## Install
 
@@ -56,7 +55,8 @@ Works with **SvelteKit / SSR** out of the box — `<Grid>` server-renders to HTM
 without touching `window`/`document`/`localStorage` (a CI gate, `pnpm ssr`,
 proves it). The package is `sideEffects: false`, so unused exports tree-shake
 away. See the **[SvelteKit guide](./docs/sveltekit.md)** for `load`-function data,
-realtime feeds, and layout persistence.
+server-side / lazy loading, realtime feeds, import helpers, charts, printing, and
+layout persistence.
 
 ## Usage
 
@@ -98,9 +98,52 @@ Only on-screen rows render DOM, so off-screen updates cost nothing until they
 scroll into view. Batch bursty feeds into a `requestAnimationFrame` flush to
 keep frames smooth.
 
+### React, Vue, Angular & vanilla
+
+bo-grid also ships a framework-agnostic **custom element**. Import it and drive
+the whole API through a `config` property:
+
+```js
+import 'bo-grid/element'; // registers <bo-grid>, injects styles
+
+const el = document.querySelector('bo-grid');
+el.config = { columns, rows, theme: 'dark', height: 520 };
+```
+
+It works in React, Vue, Angular and plain HTML — see
+**[docs/frameworks.md](./docs/frameworks.md)** for per-framework recipes and
+**[examples/](./examples/)** for runnable, build-free starters. (Custom
+`cell`/`detail` snippets are Svelte-only; use built-in types, `format`, or computed
+`value` from other frameworks. Native Svelte users should import `Grid` directly —
+smaller, and snippets work.)
+
 ## Column types
 
-`text` · `price` · `percent` · `volume` · `number` · `date` · `heatmap` · `sparkline` · `custom`
+**Data:** `text` · `price` · `percent` · `volume` · `number` · `date` · `currency` ·
+`relative` · `heatmap` · `sparkline`
+**Rich:** `progress` · `rating` · `tags` · `badge` · `boolean` · `avatar` · `link`
+**Escape hatch:** `custom`
+
+Rich types render value as a widget — handy well beyond fintech (CRM, projects,
+admin, content). All are themed from the design tokens:
+
+```ts
+const columns: ColumnDef[] = [
+  { type: 'avatar',  key: 'name',   header: 'Member', sub: 'role' },
+  { type: 'badge',   key: 'status', header: 'Status',
+    tones: { Active: 'up', Away: 'amber', Offline: 'neutral' } },
+  { type: 'progress', key: 'done',  header: 'Progress', min: 0, max: 100 },
+  { type: 'rating',  key: 'score',  header: 'Rating', max: 5 },
+  { type: 'tags',    key: 'skills', header: 'Skills' },        // value: string[]
+  { type: 'boolean', key: 'remote', header: 'Remote', trueLabel: 'Remote', falseLabel: 'Office' },
+  { type: 'link',     key: 'email',  header: 'Email', href: (r) => `mailto:${r.email}` },
+  { type: 'relative', key: 'seen',   header: 'Last seen' },     // value: epoch ms → "3h ago"
+  { type: 'currency', key: 'rate',   header: 'Rate', currency: 'USD' },
+];
+```
+
+`link` sanitizes its href (`javascript:`/`data:` are blocked); `relative` formats
+an epoch-ms value as relative time; `currency` localizes via `Intl.NumberFormat`.
 
 Sizing: `width` (px) or `flex` (grow weight). See `ColumnDef` for per-type options.
 
@@ -117,6 +160,94 @@ buttons, links. The snippet receives `{ row, column, value }`:
 <Grid {rows} {columns} {cell} height={640} />
 ```
 
+## Conditional formatting
+
+Paint analytics cues straight into numeric cells — no custom snippet needed.
+
+**Data bars** (`dataBar`): an in-cell bar behind the value, scaled across the
+column's range. The range auto-computes over the current view, or set `min`/`max`
+(`min: 0` gives absolute proportional bars). When the range spans negatives, bars
+diverge left/right around a zero baseline. `color`/`negative` override the default
+up/down theme colours.
+
+**Icon sets** (`icons`): an icon beside the value, chosen by the highest threshold
+`at` that is ≤ the value. Each rule carries a semantic `tone` (`up` · `down` ·
+`amber` · `info` · `neutral`) for its colour.
+
+**Colour scales** (`colorScale`): tint the cell background across the value range —
+a soft, themed heat ramp. Auto-ranges over the view (or set `min`/`max`); pass
+`mid` for a 3-stop diverging scale; `colors` overrides the stops. Works on any
+numeric column (the fixed `heatmap` type still exists for an absolute ramp).
+
+```ts
+const columns: ColumnDef[] = [
+  // Proportional bar from zero:
+  { type: 'volume', key: 'marketValue', header: 'Mkt Value', dataBar: { min: 0 } },
+  // Diverging bar (auto-ranged) + an icon keyed by sign:
+  { type: 'number', key: 'pnl', header: 'P&L', decimals: 0,
+    dataBar: {},
+    icons: [
+      { at: -Infinity, icon: '▼', tone: 'down' },
+      { at: 0,         icon: '▲', tone: 'up' },
+    ] },
+  // Diverging colour scale around zero (auto-ranged):
+  { type: 'number', key: 'pnlPct', header: 'P&L %', decimals: 1, colorScale: { mid: 0 } },
+];
+```
+
+All three compose with flashing/live cells and add nothing to the core for grids
+that don't use them. (In-memory auto-ranging; pass explicit `min`/`max` in source
+mode.)
+
+## Computed columns
+
+Derive a column's value from the whole row with `value: (row) => …` — KPIs,
+ratios, deltas. The derived value flows through display, sort, filter, group/footer
+aggregation, conditional formatting, export and copy, just like a real column.
+`key` still names the column (and is the sort/filter key) but need not be a real
+field. Computed columns aren't editable (there's no field to write back).
+
+```ts
+const columns: ColumnDef[] = [
+  { type: 'number', key: 'qty',   header: 'Qty' },
+  { type: 'price',  key: 'price', header: 'Price' },
+  // No `total` field on the row — derived, and still sortable/filterable/exportable:
+  { type: 'price',  key: 'total', header: 'Total', value: (row) => row.qty * row.price,
+    groupAgg: 'sum' },
+];
+```
+
+In-memory mode (a server `source` owns its own derivations). Keep `value()` cheap
+and pure — it's called during sort and filter.
+
+## Charts (companion)
+
+For dashboards, `bo-grid/charts` ships tiny, dependency-free SVG charts —
+`LineChart`, `BarChart`, `DonutChart`, `StackedBarChart` (stacked or `grouped`
+multi-series), and a `Legend`. They're a **separate import**, so they add nothing
+to the grid core (~3 KB gzip on their own). Use them standalone, or inside a grid
+cell via a `custom` column. Bar/stacked/donut elements carry an SVG `<title>`, so
+hovering shows the value (accessible, zero-JS).
+
+```svelte
+<script>
+  import { LineChart, BarChart, DonutChart, StackedBarChart, Legend } from 'bo-grid/charts';
+</script>
+
+<LineChart data={[3, 5, 4, 8, 6, 9]} width={160} height={40} area />
+<BarChart data={[4, 8, 6, 9, 7]} color="var(--up)" />
+<DonutChart data={[{ value: 5, label: 'A' }, { value: 3, label: 'B' }]} />
+
+<!-- data[series][category]; stacked by default, `grouped` for side-by-side -->
+<StackedBarChart data={[[3, 5, 2], [4, 1, 6]]} seriesLabels={['Q1', 'Q2']} />
+<Legend items={[{ label: 'Q1' }, { label: 'Q2' }]} />
+```
+
+Theme them with `color` / `colors` props, or by setting `--boc-color` and
+`--boc-1`…`--boc-6` CSS vars on any ancestor. The geometry helpers (`linePoints`,
+`barRects`, `donutArcs`, …) are exported too, for rolling your own SVG charts. See
+the **Dashboard** example for charts inside grid cells.
+
 ## Row height
 
 Uniform 36px by default. Pass `rowHeight` as a number for a different density, or
@@ -269,6 +400,26 @@ Group headers are the same height as data rows, so virtual scrolling stays smoot
 over very large grouped sets. Subtotals recompute live as the feed ticks, and the
 current group's header stays pinned to the top as you scroll within it.
 
+### Server-side grouping
+
+When the data is grouped on the server (or too large to fetch upfront), pass
+**`lazyGroups`** (the group summaries) and **`loadGroup`** (load a group's rows on
+expand). Headers show the server-provided count and preformatted aggregates; rows
+load lazily with a loading row, then cache. See the **Server groups** example.
+
+```svelte
+<Grid
+  rows={[]}
+  {columns}
+  lazyGroups={[
+    { key: 'North America', count: 142, agg: { amount: '$2.4M' } },
+    { key: 'Europe', count: 98, agg: { amount: '$1.8M' } },
+  ]}
+  loadGroup={(key) => fetch(`/api/orders?group=${key}`).then((r) => r.json())}
+  height={520}
+/>
+```
+
 ## Theming
 
 Dark-first and self-contained — no CSS import required. Use the `theme` prop with
@@ -279,9 +430,20 @@ a built-in preset or a custom token map:
 <Grid {rows} {columns} theme={{ bg: '#0b1020', up: '#22d3ee' }} height={640} />
 ```
 
-Built-in `darkTheme` / `lightTheme` are exported (`GridTheme`). Or set any
-`--bo-grid-*` custom property on an ancestor — the prop is just a convenience over
-these:
+Six built-in presets are exported (`GridTheme`): `darkTheme`, `lightTheme`,
+`highContrastDark`, `highContrastLight`, `midnightTheme`, `terminalTheme` — plus a
+`themePresets` name→preset map (and a `ThemePreset` type) for a theme picker:
+
+```svelte
+<script>
+  import { Grid, themePresets, type ThemePreset } from 'bo-grid';
+  let preset: ThemePreset = 'midnight';
+</script>
+<Grid {rows} {columns} theme={themePresets[preset]} height={640} />
+```
+
+Or set any `--bo-grid-*` custom property on an ancestor — the prop is just a
+convenience over these:
 
 ```css
 .my-app {
@@ -344,6 +506,18 @@ render as skeletons.
 the same interface (handy for testing the path or client-side data). Grouping is
 client-only, so it's not applied in source mode.
 
+### Wide grids (column virtualization)
+
+Rows are virtualized vertically by default. For very wide grids (100+ columns),
+add **`virtualizeColumns`** to also virtualize horizontally — only the columns in
+the scroll window (+ overscan) render, so a 60-column grid costs about the same as
+a handful. It switches the grid to fixed-width horizontal scroll; **pinned columns
+always render**. See the **Wide** example.
+
+```svelte
+<Grid {rows} {columns} virtualizeColumns height={520} />
+```
+
 ## Column reorder
 
 Pass `onRowReorder(from, to)` to enable **drag-to-reorder rows** via a handle in
@@ -418,6 +592,23 @@ In tree mode the grid renders the tree directly (filter/sort/group/paginate are
 not applied to it). Nodes are keyboard-accessible: **→** expands a collapsed node,
 **←** collapses an expanded one, and rows expose `aria-level` / `aria-expanded`.
 
+### Lazy (server-backed) trees
+
+For hierarchies too large to ship upfront, use **`loadChildren`** (async) instead
+of `getChildren`. Children load on first expand — the grid shows a loading row,
+then caches them. Pair it with **`hasChildren`** (a cheap predicate) so the chevron
+shows without loading. See the **Lazy tree** example.
+
+```svelte
+<Grid
+  {rows}
+  {columns}
+  height={520}
+  hasChildren={(r) => r.kind === 'folder'}
+  loadChildren={(r) => fetch(`/api/children/${r.id}`).then((res) => res.json())}
+/>
+```
+
 ## Master-detail
 
 Pass a `detail` snippet to render an expandable panel under each row — the grid
@@ -520,17 +711,38 @@ const columns = [
 ];
 ```
 
-## Export
+## Export & import
 
-CSV export is dependency-free:
+CSV export — and import — are dependency-free:
 
 ```ts
-import { exportCSV, toCSV } from 'bo-grid';
+import { exportCSV, toCSV, parseCSV } from 'bo-grid';
 
 exportCSV('tickers.csv', rows, columns);          // triggers a download
 const text = toCSV(rows, columns, { formatted: true }); // or get the string
+const rows = parseCSV(text, columns);             // …and back to rows (round-trip)
+```
+
+`parseCSV` is RFC4180-aware (quoted fields, embedded commas/quotes/newlines), maps
+headers to columns, coerces numeric/`date` columns, and stamps `id` + flash fields
+so the result drops straight into `<Grid rows={…}>`. There's also `parseTSV` (tab-
+separated — what Ctrl/⌘+C copies), and for JSON/API data, `rowsFromObjects(objects)`
+/ `parseJSON(text)`:
+
+```ts
+import { rowsFromObjects } from 'bo-grid';
+const rows = rowsFromObjects(await (await fetch('/api/rows')).json());
 ```
 
+Not sure what you'll get? **`parseRows(text, columns?)`** auto-detects JSON / TSV /
+CSV — perfect for a paste handler:
+
+```svelte
+<div onpaste={(e) => (rows = parseRows(e.clipboardData.getData('text'), columns))}>…</div>
+```
+
+See the **CSV import** demo (CSV / TSV / JSON / Auto-detect).
+
 Excel export loads SheetJS via **dynamic import**, so it lands in its own lazy
 chunk and never bloats your core bundle. `xlsx` is an **optional peer dependency**
 — install it only if you use this:
@@ -544,11 +756,23 @@ Sparkline columns are skipped; numeric columns export as raw numbers so
 spreadsheets can compute on them (pass `{ formatted: true }` for display strings).
 Ctrl/⌘+C still copies the current selection as TSV.
 
+**Printing.** The grid virtualizes, so printing it directly drops off-screen rows.
+`printTable(rows, columns, { title })` opens a print window with **all** rows as a
+clean table (Save-as-PDF from the dialog); `toHTMLTable(rows, columns)` returns
+that table as an HTML string to embed. See the **Print** demo.
+
+```ts
+import { printTable } from 'bo-grid';
+printTable(rows, columns, { title: 'Sales report' });
+```
+
 ## Also exported
 
 `Sparkline` component · `drawCandles` / `setupHiDpiCanvas` (draw on your own
 canvas) · `fmtPrice` / `fmtPercent` / `fmtVolume` / `fmtDate` · `heatColor` ·
-`Selection` · `aggregate` · `toCSV` / `exportCSV` / `exportXLSX` / `rowsToMatrix`.
+`Selection` · `aggregate` · `toCSV` / `exportCSV` / `exportXLSX` / `rowsToMatrix` ·
+`parseCSV` / `parseCSVMatrix` / `parseTSV` / `parseJSON` / `parseRows` /
+`rowsFromObjects` · `toHTMLTable` / `printTable`.
 
 ## Pivot tables
 
@@ -585,11 +809,14 @@ the real dimensions and positions so assistive tech isn't misled:
 - `aria-activedescendant` tracks the focused cell for screen readers.
 - Sparkline cells carry a text `aria-label`; sticky/skeleton duplicates are
   `aria-hidden`; the aggregation bar is an `aria-live` status region.
-- Fully keyboard-operable (see [Selection & keyboard](#selection--keyboard) and
-  inline editing) and respects `prefers-reduced-motion`.
-
-A formal WCAG 2.1 AA audit is on the roadmap; the above is a deliberate pass, not
-a certification.
+- Fully keyboard-operable: one tab stop with arrow-key navigation, APG-pattern
+  menus (focus moves in, arrow-navigable, returns focus on close), a keyboard path
+  to filtering (column menu → **Filter…**), and visible `:focus-visible` rings on
+  every reachable control. Respects `prefers-reduced-motion`.
+
+bo-grid targets **WCAG 2.1 AA**. See **[ACCESSIBILITY.md](./ACCESSIBILITY.md)** for
+the full keyboard map, roles, measured contrast ratios, and conformance notes from
+the audit.
 
 ## Develop
 

package/dist/bo-grid.FilterMenu-BHI6rILc.js

@@ -0,0 +1,154 @@
+import { p as ce, a as xe, v as me, w as _e, n as x, x as _, s as p, y as L, t as N, z as he, j as ke, f as C, h as w, i as u, m as ge, c as h, A as D, e as F, g as t, B as U, k as S, d as ye, l as f, C as we, o as k, D as Ae, u as Oe, q as Se, r as d, b as A } from "./bo-grid.element-DPnHUXMa.js";
+var G = k("<option> </option>"), Ne = k('<input class="bo-fm-in svelte-f7i4av" type="number" placeholder="and" aria-label="Upper value"/>'), Ce = k('<select class="bo-fm-op svelte-f7i4av" aria-label="Operator"></select> <input class="bo-fm-in svelte-f7i4av" type="number" placeholder="value" aria-label="Value"/> <!>', 1), Ee = k('<input class="bo-fm-in svelte-f7i4av" type="date" aria-label="End date"/>'), qe = k('<select class="bo-fm-op svelte-f7i4av" aria-label="Operator"></select> <input class="bo-fm-in svelte-f7i4av" type="date" aria-label="Date"/> <!>', 1), Be = k('<label class="bo-fm-opt svelte-f7i4av"><input type="checkbox"/> <span class="svelte-f7i4av"> </span></label>'), De = k('<input class="bo-fm-in svelte-f7i4av" type="search" placeholder="search…" aria-label="Search values"/> <div class="bo-fm-setbar svelte-f7i4av"><button type="button" class="bo-fm-link svelte-f7i4av">All</button> <button type="button" class="bo-fm-link svelte-f7i4av">None</button></div> <div class="bo-fm-list svelte-f7i4av"></div>', 1), Fe = k('<select class="bo-fm-op svelte-f7i4av" aria-label="Operator"></select> <input class="bo-fm-in svelte-f7i4av" type="text" placeholder="filter…" aria-label="Value"/>', 1), ze = k('<div class="bo-filtermenu svelte-f7i4av" role="dialog" tabindex="-1"><div class="bo-fm-head svelte-f7i4av"> </div> <!> <div class="bo-fm-actions svelte-f7i4av"><button class="bo-fm-btn svelte-f7i4av" type="button">Clear</button> <button class="bo-fm-btn bo-fm-apply svelte-f7i4av" type="button">Apply</button></div></div>');
+const Pe = {
+  hash: "svelte-f7i4av",
+  code: `.bo-filtermenu.svelte-f7i4av {position:fixed;z-index:30;display:flex;flex-direction:column;gap:6px;width:200px;padding:10px;background:var(--bo-header-bg);border:0.5px solid var(--bo-border);border-radius:8px;box-shadow:0 10px 30px rgba(0, 0, 0, 0.35);font-size:12px;color:var(--bo-text);}.bo-fm-head.svelte-f7i4av {font-weight:600;color:var(--bo-text-dim);padding-bottom:2px;}.bo-fm-op.svelte-f7i4av,
+  .bo-fm-in.svelte-f7i4av {width:100%;padding:5px 7px;font:inherit;color:var(--bo-text);background:var(--bo-bg);border:0.5px solid var(--bo-border);border-radius:5px;}.bo-fm-setbar.svelte-f7i4av {display:flex;gap:12px;}.bo-fm-link.svelte-f7i4av {padding:0;font:inherit;font-size:11px;color:var(--bo-up);background:none;border:0;cursor:pointer;}.bo-fm-link.svelte-f7i4av:hover {text-decoration:underline;}.bo-fm-list.svelte-f7i4av {display:flex;flex-direction:column;max-height:180px;overflow-y:auto;border:0.5px solid var(--bo-border);border-radius:5px;}.bo-fm-opt.svelte-f7i4av {display:flex;align-items:center;gap:7px;padding:4px 7px;cursor:pointer;white-space:nowrap;}.bo-fm-opt.svelte-f7i4av:hover {background:var(--bo-row-hover);}.bo-fm-opt.svelte-f7i4av span:where(.svelte-f7i4av) {overflow:hidden;text-overflow:ellipsis;}.bo-fm-actions.svelte-f7i4av {display:flex;justify-content:flex-end;gap:6px;margin-top:2px;}.bo-fm-btn.svelte-f7i4av {padding:5px 12px;font:inherit;font-size:11px;color:var(--bo-text-dim);background:transparent;border:0.5px solid var(--bo-border);border-radius:5px;cursor:pointer;}.bo-fm-btn.svelte-f7i4av:hover {color:var(--bo-text);}
+  /* Visible keyboard focus (WCAG 2.4.7) for the menu's custom buttons. */.bo-fm-btn.svelte-f7i4av:focus-visible,
+  .bo-fm-link.svelte-f7i4av:focus-visible {outline:2px solid var(--bo-sel-border);outline-offset:1px;border-radius:5px;}.bo-fm-apply.svelte-f7i4av {color:#0a0a0a;background:var(--bo-up);border-color:var(--bo-up);}`
+};
+function Ve(K, n) {
+  ce(n, !0), xe(K, Pe);
+  let Q = me(n, "values", 19, () => []);
+  const $ = [
+    { op: "contains", label: "Contains" },
+    { op: "notContains", label: "Not contains" },
+    { op: "equals", label: "Equals" },
+    { op: "starts", label: "Starts with" },
+    { op: "ends", label: "Ends with" }
+  ], ee = [
+    { op: "eq", label: "=" },
+    { op: "ne", label: "≠" },
+    { op: "lt", label: "<" },
+    { op: "le", label: "≤" },
+    { op: "gt", label: ">" },
+    { op: "ge", label: "≥" },
+    { op: "between", label: "Between" }
+  ], ae = [
+    { op: "on", label: "On" },
+    { op: "before", label: "Before" },
+    { op: "after", label: "After" },
+    { op: "between", label: "Between" }
+  ], R = (a) => a ? Date.parse(`${a}T00:00:00Z`) : NaN, W = (a) => Number.isFinite(a) ? new Date(a).toISOString().slice(0, 10) : "", e = _e(() => n.filter);
+  let z = x(_((e == null ? void 0 : e.kind) === "text" ? e.op : "contains")), P = x(_((e == null ? void 0 : e.kind) === "text" ? e.q : "")), E = x(_((e == null ? void 0 : e.kind) === "number" ? e.op : "eq")), T = x(_((e == null ? void 0 : e.kind) === "number" && Number.isFinite(e.a) ? e.a : null)), V = x(_((e == null ? void 0 : e.kind) === "number" && e.b != null && Number.isFinite(e.b) ? e.b : null)), q = x(_((e == null ? void 0 : e.kind) === "date" ? e.op : "on")), M = x(_((e == null ? void 0 : e.kind) === "date" ? W(e.a) : "")), B = x(_((e == null ? void 0 : e.kind) === "date" && e.b != null ? W(e.b) : "")), O = x(_(new Set((e == null ? void 0 : e.kind) === "set" ? e.excluded : []))), j = x("");
+  const te = Oe(() => Q().filter((a) => a.toLowerCase().includes(t(j).trim().toLowerCase())));
+  function le(a) {
+    const s = new Set(t(O));
+    s.has(a) ? s.delete(a) : s.add(a), f(O, s, !0);
+  }
+  function oe() {
+    let a;
+    return n.kind === "number" ? a = {
+      kind: "number",
+      op: t(E),
+      a: t(T) ?? NaN,
+      b: t(V) ?? void 0
+    } : n.kind === "date" ? a = {
+      kind: "date",
+      op: t(q),
+      a: R(t(M)),
+      b: t(B) ? R(t(B)) : void 0
+    } : n.kind === "set" ? a = { kind: "set", excluded: [...t(O)] } : a = { kind: "text", op: t(z), q: t(P) }, Ae(a) ? a : null;
+  }
+  function X() {
+    n.onApply(oe());
+  }
+  function re() {
+    n.onApply(null);
+  }
+  function ie(a) {
+    a.key === "Enter" ? X() : a.key === "Escape" && n.onClose();
+  }
+  var g = ze(), I = h(g), ne = h(I, !0);
+  d(I);
+  var Z = p(I, 2);
+  {
+    var se = (a) => {
+      var s = Ce(), i = D(s);
+      F(i, 21, () => ee, (l) => l.op, (l, o) => {
+        var r = G(), y = h(r, !0);
+        d(r);
+        var c = {};
+        N(() => {
+          C(y, t(o).label), c !== (c = t(o).op) && (r.value = (r.__value = t(o).op) ?? "");
+        }), u(l, r);
+      }), d(i);
+      var v = p(i, 2);
+      A(v);
+      var b = p(v, 2);
+      {
+        var m = (l) => {
+          var o = Ne();
+          A(o), S(o, () => t(V), (r) => f(V, r)), u(l, o);
+        };
+        L(b, (l) => {
+          t(E) === "between" && l(m);
+        });
+      }
+      U(i, () => t(E), (l) => f(E, l)), S(v, () => t(T), (l) => f(T, l)), u(a, s);
+    }, ve = (a) => {
+      var s = qe(), i = D(s);
+      F(i, 21, () => ae, (l) => l.op, (l, o) => {
+        var r = G(), y = h(r, !0);
+        d(r);
+        var c = {};
+        N(() => {
+          C(y, t(o).label), c !== (c = t(o).op) && (r.value = (r.__value = t(o).op) ?? "");
+        }), u(l, r);
+      }), d(i);
+      var v = p(i, 2);
+      A(v);
+      var b = p(v, 2);
+      {
+        var m = (l) => {
+          var o = Ee();
+          A(o), S(o, () => t(B), (r) => f(B, r)), u(l, o);
+        };
+        L(b, (l) => {
+          t(q) === "between" && l(m);
+        });
+      }
+      U(i, () => t(q), (l) => f(q, l)), S(v, () => t(M), (l) => f(M, l)), u(a, s);
+    }, be = (a) => {
+      var s = De(), i = D(s);
+      A(i);
+      var v = p(i, 2), b = h(v), m = p(b, 2);
+      d(v);
+      var l = p(v, 2);
+      F(l, 20, () => t(te), (o) => o, (o, r) => {
+        var y = Be(), c = h(y);
+        A(c);
+        var Y = p(c, 2), fe = h(Y, !0);
+        d(Y), d(y), N(
+          (ue) => {
+            ye(c, ue), C(fe, r === "" ? "(blank)" : r);
+          },
+          [() => !t(O).has(r)]
+        ), w("change", c, () => le(r)), u(o, y);
+      }), d(l), S(i, () => t(j), (o) => f(j, o)), w("click", b, () => f(O, /* @__PURE__ */ new Set(), !0)), w("click", m, () => f(O, new Set(Q()), !0)), u(a, s);
+    }, de = (a) => {
+      var s = Fe(), i = D(s);
+      F(i, 21, () => $, (b) => b.op, (b, m) => {
+        var l = G(), o = h(l, !0);
+        d(l);
+        var r = {};
+        N(() => {
+          C(o, t(m).label), r !== (r = t(m).op) && (l.value = (l.__value = t(m).op) ?? "");
+        }), u(b, l);
+      }), d(i);
+      var v = p(i, 2);
+      A(v), we(v), U(i, () => t(z), (b) => f(z, b)), S(v, () => t(P), (b) => f(P, b)), u(a, s);
+    };
+    L(Z, (a) => {
+      n.kind === "number" ? a(se) : n.kind === "date" ? a(ve, 1) : n.kind === "set" ? a(be, 2) : a(de, -1);
+    });
+  }
+  var H = p(Z, 2), J = h(H), pe = p(J, 2);
+  d(H), d(g), N(() => {
+    he(g, "aria-label", `Filter ${n.header ?? ""}`), ke(g, `left:${n.x ?? ""}px;top:${n.y ?? ""}px;`), C(ne, n.header);
+  }), w("pointerdown", g, (a) => a.stopPropagation()), w("keydown", g, ie), w("click", J, re), w("click", pe, X), u(K, g), ge();
+}
+Se(["pointerdown", "keydown", "click", "change"]);
+export {
+  Ve as default
+};

package/dist/bo-grid.ToolPanel-C3u-4YKc.js

@@ -0,0 +1,34 @@
+import { p as z, a as S, c as d, s as r, r as l, b as f, e as j, t as g, g as s, d as L, f as P, h as i, i as w, j as T, k as q, l as A, m as E, n as B, u as D, o as k, q as F } from "./bo-grid.element-DPnHUXMa.js";
+var G = k('<label class="bo-tp-opt svelte-7xdno"><input type="checkbox"/> <span class="svelte-7xdno"> </span></label>'), H = k('<div class="bo-toolpanel svelte-7xdno" role="dialog" tabindex="-1" aria-label="Columns"><div class="bo-tp-head svelte-7xdno"><span>Columns</span> <button type="button" class="bo-tp-link svelte-7xdno">Show all</button></div> <input class="bo-tp-search svelte-7xdno" type="search" placeholder="search…" aria-label="Search columns"/> <div class="bo-tp-list svelte-7xdno"></div></div>');
+const I = {
+  hash: "svelte-7xdno",
+  code: ".bo-toolpanel.svelte-7xdno {position:fixed;z-index:30;display:flex;flex-direction:column;gap:7px;width:200px;padding:10px;background:var(--bo-header-bg);border:0.5px solid var(--bo-border);border-radius:8px;box-shadow:0 10px 30px rgba(0, 0, 0, 0.35);font-size:12px;color:var(--bo-text);}.bo-tp-head.svelte-7xdno {display:flex;align-items:baseline;justify-content:space-between;font-weight:600;color:var(--bo-text-dim);}.bo-tp-link.svelte-7xdno {padding:0;font:inherit;font-size:11px;color:var(--bo-up);background:none;border:0;cursor:pointer;}.bo-tp-link.svelte-7xdno:hover {text-decoration:underline;}.bo-tp-link.svelte-7xdno:focus-visible {outline:2px solid var(--bo-sel-border);outline-offset:1px;border-radius:4px;}.bo-tp-search.svelte-7xdno {width:100%;padding:5px 7px;font:inherit;color:var(--bo-text);background:var(--bo-bg);border:0.5px solid var(--bo-border);border-radius:5px;}.bo-tp-list.svelte-7xdno {display:flex;flex-direction:column;max-height:220px;overflow-y:auto;}.bo-tp-opt.svelte-7xdno {display:flex;align-items:center;gap:7px;padding:4px 4px;cursor:pointer;white-space:nowrap;}.bo-tp-opt.svelte-7xdno:hover {background:var(--bo-row-hover);}.bo-tp-opt.svelte-7xdno span:where(.svelte-7xdno) {overflow:hidden;text-overflow:ellipsis;}"
+};
+function K(c, o) {
+  z(o, !0), S(c, I);
+  let p = B("");
+  const y = D(() => o.columns.filter((e) => e.header.toLowerCase().includes(s(p).trim().toLowerCase())));
+  var t = H(), x = d(t), m = r(d(x), 2);
+  l(x);
+  var b = r(x, 2);
+  f(b);
+  var u = r(b, 2);
+  j(u, 21, () => s(y), (e) => e.key, (e, a) => {
+    var v = G(), n = d(v);
+    f(n);
+    var h = r(n, 2), _ = d(h, !0);
+    l(h), l(v), g(
+      (C) => {
+        L(n, C), P(_, s(a).header);
+      },
+      [() => !o.hidden.includes(s(a).key)]
+    ), i("change", n, () => o.onToggle(s(a).key)), w(e, v);
+  }), l(u), l(t), g(() => T(t, `left:${o.x ?? ""}px;top:${o.y ?? ""}px;`)), i("pointerdown", t, (e) => e.stopPropagation()), i("keydown", t, (e) => e.key === "Escape" && o.onClose()), i("click", m, function(...e) {
+    var a;
+    (a = o.onShowAll) == null || a.apply(this, e);
+  }), q(b, () => s(p), (e) => A(p, e)), w(c, t), E();
+}
+F(["pointerdown", "keydown", "click", "change"]);
+export {
+  K as default
+};