bo-grid 0.8.0 → 0.21.0

package/README.md

@@ -98,9 +98,51 @@ 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. (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 +159,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 +399,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 +429,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 +505,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 +591,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
@@ -585,11 +775,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
+};