bo-grid 0.1.0 → 0.7.0

package/dist/grid/Grid.svelte.d.ts

@@ -2,6 +2,7 @@ import type { Snippet } from 'svelte';
 import type { ColumnDef, GridRow, SortState, CellEditEvent } from './column';
 import { type GridTheme } from './theme';
 import { type AggKind } from './aggregate';
+import { type ColumnFilter } from './filtering';
 import type { RowSource } from './source';
 type $$ComponentProps = {
     rows: GridRow[];
@@ -21,8 +22,19 @@ type $$ComponentProps = {
     /** Called with the selected row ids whenever the row-selection set changes. */
     onRowSelectionChange?: (selectedIds: Array<string | number>) => void;
     /** Column keys to hide (controlled). Build your own column-picker UI and
-        drive this prop — the grid stays presentation-only. */
+        drive this prop — the grid stays presentation-only. Composed (union) with
+        columns the user hides at runtime via the column menu. */
     hiddenColumns?: string[];
+    /** Called with all currently-hidden column keys whenever the runtime set
+        changes (column menu hide/show). */
+    onColumnVisibilityChange?: (hidden: string[]) => void;
+    /** Enable a per-column header menu (a ⋮ trigger) with sort, hide and (with
+        `filterMenu`) filter actions. Default false. */
+    columnMenu?: boolean;
+    /** Show a "Columns" button that opens a panel to toggle column visibility
+        (the place to restore columns hidden via the menu). Lazy-loaded. Default
+        false. */
+    columnsPanel?: boolean;
     /** Return extra CSS class(es) for a data row (e.g. to colour by value).
         Style them via `:global(.your-class)` since rows live inside the grid. */
     rowClass?: (row: GridRow) => string | undefined;
@@ -38,6 +50,12 @@ type $$ComponentProps = {
     sort?: SortState[];
     /** Called with the new sort order whenever a header is clicked. */
     onSortChange?: (sort: SortState[]) => void;
+    /** Controlled column filters (keyed by column key). When set, the grid
+        reflects these and reports changes via `onFilterChange` instead of holding
+        its own. Omit for uncontrolled filtering. */
+    columnFilters?: Record<string, ColumnFilter>;
+    /** Called with the full column-filter map whenever a header filter changes. */
+    onFilterChange?: (filters: Record<string, ColumnFilter>) => void;
     /** Show a pinned totals row: each column with a `groupAgg` shows that
         aggregate over all (filtered) rows. In-memory mode only. Default false. */
     footer?: boolean;
@@ -54,6 +72,59 @@ type $$ComponentProps = {
     /** Show a per-column filter input row under the header. Rows must match every
         non-empty column filter (AND). In-memory mode only. Default false. */
     filterRow?: boolean;
+    /** Enable a per-column header filter menu (lazy-loaded on first open). Each
+        filterable column shows a funnel; the menu's control matches the column
+        type (text/number/date). Override or disable per column with `col.filter`.
+        Works in source mode too (filters are delegated to the `RowSource`); set
+        filters need in-memory data. Default false. */
+    filterMenu?: boolean;
+    /** Show a built-in quick-filter search box above the grid that matches across
+        all column values (ANDed with the `filter` prop). In-memory mode only.
+        Default false. */
+    quickFilter?: boolean;
+    /** Show an Excel-style fill handle at the selection's bottom-right corner;
+        drag it to copy the selected value(s) across the extended range (editable
+        columns only). In-memory mode only. Default false. */
+    fillHandle?: boolean;
+    /** Message shown when there are no rows. Default 'No matching rows'. */
+    emptyMessage?: string;
+    /** Show a loading overlay over the grid (for consumer-driven async work in
+        in-memory mode; source mode shows skeleton rows automatically). */
+    loading?: boolean;
+    /** Right-click row menu. Return the items for a row; an empty array shows no
+        menu. Each item runs `onSelect` and closes the menu. */
+    rowMenu?: (row: GridRow) => Array<{
+        label: string;
+        onSelect: () => void;
+    }>;
+    /** Master-detail: render an expandable detail panel under a row. Adds a
+        leading expand-toggle column. In-memory mode only (overrides rowHeight). */
+    detail?: Snippet<[{
+        row: GridRow;
+    }]>;
+    /** Height (px) of the expanded detail panel. Default 160. */
+    detailHeight?: number;
+    /** Tree data: return a row's children (undefined/empty = leaf). When set,
+        `rows` are the roots; the grid renders an indented, expandable tree.
+        In-memory mode; filter/sort/group/paginate are not applied to the tree. */
+    getChildren?: (row: GridRow) => GridRow[] | undefined;
+    /** Enable drag-to-reorder rows via a handle in the first column. Called with
+        the from/to indices (into the visible rows) on drop — reorder your own
+        `rows` in here. Flat, unsorted, in-memory lists only. */
+    onRowReorder?: (fromIndex: number, toIndex: number) => void;
+    /** Rows per page. When > 0 (in-memory mode), shows a pager instead of one
+        long scroll; rows still virtualize within a page. Default 0 (off). */
+    pageSize?: number;
+    /** Controlled current page (0-based). Omit for uncontrolled paging. */
+    page?: number;
+    /** Called with the new page index when the pager is used. */
+    onPageChange?: (page: number) => void;
+    /** Called with the new column-key order after a header drag-reorder. */
+    onColumnReorder?: (keys: string[]) => void;
+    /** Called with a column key + new width after a drag-resize. */
+    onColumnResize?: (key: string, width: number) => void;
+    /** Accessible name for the grid (`aria-label` on the `role="grid"` root). */
+    ariaLabel?: string;
     filter?: string;
     groupBy?: string[];
     aggregations?: AggKind[];

package/dist/grid/Pager.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  // Pagination bar for the grid. Presentation-only: the parent owns the page
+  // state and reorders via `onGoto`.
+  let {
+    page,
+    pageCount,
+    total,
+    onGoto,
+  }: {
+    page: number;
+    pageCount: number;
+    total: number;
+    onGoto: (page: number) => void;
+  } = $props();
+</script>
+
+<div class="pager" role="navigation" aria-label="Pagination">
+  <button type="button" class="pg" disabled={page === 0} aria-label="First page" onclick={() => onGoto(0)}>«</button>
+  <button type="button" class="pg" disabled={page === 0} onclick={() => onGoto(page - 1)}>‹ Prev</button>
+  <span class="pageinfo">Page {page + 1} of {pageCount} · {total.toLocaleString()} rows</span>
+  <button type="button" class="pg" disabled={page >= pageCount - 1} onclick={() => onGoto(page + 1)}>Next ›</button>
+  <button type="button" class="pg" disabled={page >= pageCount - 1} aria-label="Last page" onclick={() => onGoto(pageCount - 1)}>»</button>
+</div>
+
+<style>
+  .pager {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 10px;
+    background: var(--bo-header-bg);
+    border-top: 0.5px solid var(--bo-border);
+  }
+  .pg {
+    padding: 3px 9px;
+    font: inherit;
+    font-family: var(--bo-mono);
+    font-size: 11px;
+    color: var(--bo-text);
+    background: transparent;
+    border: 0.5px solid var(--bo-border);
+    border-radius: 6px;
+    cursor: pointer;
+  }
+  .pg:hover:not(:disabled) {
+    background: var(--bo-row-hover);
+    border-color: var(--bo-sel-border);
+  }
+  .pg:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+  .pageinfo {
+    font-family: var(--bo-mono);
+    font-size: 11px;
+    color: var(--bo-text-dim);
+    font-variant-numeric: tabular-nums;
+  }
+</style>

package/dist/grid/Pager.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    page: number;
+    pageCount: number;
+    total: number;
+    onGoto: (page: number) => void;
+};
+declare const Pager: import("svelte").Component<$$ComponentProps, {}, "">;
+type Pager = ReturnType<typeof Pager>;
+export default Pager;

package/dist/grid/RowMenu.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  // Floating right-click row menu. Presentation-only: the parent owns open/close
+  // state and positions it via x/y.
+  let {
+    x,
+    y,
+    items,
+    onClose,
+  }: {
+    x: number;
+    y: number;
+    items: Array<{ label: string; onSelect: () => void }>;
+    onClose: () => void;
+  } = $props();
+</script>
+
+<div
+  class="rowmenu"
+  role="menu"
+  tabindex="-1"
+  style="left:{x}px;top:{y}px;"
+  onpointerdown={(e) => e.stopPropagation()}
+>
+  {#each items as item (item.label)}
+    <button
+      class="rowmenu-item"
+      type="button"
+      role="menuitem"
+      onclick={() => {
+        item.onSelect();
+        onClose();
+      }}
+    >
+      {item.label}
+    </button>
+  {/each}
+</div>
+
+<style>
+  .rowmenu {
+    position: fixed;
+    z-index: 20;
+    min-width: 150px;
+    padding: 4px;
+    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);
+  }
+  .rowmenu-item {
+    display: block;
+    width: 100%;
+    padding: 6px 10px;
+    font: inherit;
+    font-size: 12px;
+    text-align: left;
+    color: var(--bo-text);
+    background: transparent;
+    border: 0;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+  .rowmenu-item:hover {
+    background: var(--bo-row-hover);
+  }
+</style>

package/dist/grid/RowMenu.svelte.d.ts

@@ -0,0 +1,12 @@
+type $$ComponentProps = {
+    x: number;
+    y: number;
+    items: Array<{
+        label: string;
+        onSelect: () => void;
+    }>;
+    onClose: () => void;
+};
+declare const RowMenu: import("svelte").Component<$$ComponentProps, {}, "">;
+type RowMenu = ReturnType<typeof RowMenu>;
+export default RowMenu;

package/dist/grid/ToolPanel.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+  // Floating columns panel: toggle column visibility (and restore hidden ones).
+  // Lazy-loaded by Grid; presentation-only — the parent owns the visibility set.
+  let {
+    columns,
+    hidden,
+    x,
+    y,
+    onToggle,
+    onShowAll,
+    onClose,
+  }: {
+    columns: Array<{ key: string; header: string }>;
+    hidden: string[];
+    x: number;
+    y: number;
+    onToggle: (key: string) => void;
+    onShowAll: () => void;
+    onClose: () => void;
+  } = $props();
+
+  let search = $state('');
+  const shown = $derived(
+    columns.filter((c) => c.header.toLowerCase().includes(search.trim().toLowerCase())),
+  );
+</script>
+
+<div
+  class="bo-toolpanel"
+  role="dialog"
+  tabindex="-1"
+  aria-label="Columns"
+  style="left:{x}px;top:{y}px;"
+  onpointerdown={(e) => e.stopPropagation()}
+  onkeydown={(e) => e.key === 'Escape' && onClose()}
+>
+  <div class="bo-tp-head">
+    <span>Columns</span>
+    <button type="button" class="bo-tp-link" onclick={onShowAll}>Show all</button>
+  </div>
+  <input class="bo-tp-search" type="search" bind:value={search} placeholder="search…" aria-label="Search columns" />
+  <div class="bo-tp-list">
+    {#each shown as col (col.key)}
+      <label class="bo-tp-opt">
+        <input type="checkbox" checked={!hidden.includes(col.key)} onchange={() => onToggle(col.key)} />
+        <span>{col.header}</span>
+      </label>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .bo-toolpanel {
+    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 {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    font-weight: 600;
+    color: var(--bo-text-dim);
+  }
+  .bo-tp-link {
+    padding: 0;
+    font: inherit;
+    font-size: 11px;
+    color: var(--bo-up);
+    background: none;
+    border: 0;
+    cursor: pointer;
+  }
+  .bo-tp-link:hover {
+    text-decoration: underline;
+  }
+  .bo-tp-search {
+    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 {
+    display: flex;
+    flex-direction: column;
+    max-height: 220px;
+    overflow-y: auto;
+  }
+  .bo-tp-opt {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    padding: 4px 4px;
+    cursor: pointer;
+    white-space: nowrap;
+  }
+  .bo-tp-opt:hover {
+    background: var(--bo-row-hover);
+  }
+  .bo-tp-opt span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+</style>

package/dist/grid/ToolPanel.svelte.d.ts

@@ -0,0 +1,15 @@
+type $$ComponentProps = {
+    columns: Array<{
+        key: string;
+        header: string;
+    }>;
+    hidden: string[];
+    x: number;
+    y: number;
+    onToggle: (key: string) => void;
+    onShowAll: () => void;
+    onClose: () => void;
+};
+declare const ToolPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type ToolPanel = ReturnType<typeof ToolPanel>;
+export default ToolPanel;

package/dist/grid/column.d.ts

@@ -1,6 +1,7 @@
 import type { Candle } from '../types';
 import { type DateStyle } from '../format/format';
 import type { AggKind } from './aggregate';
+import type { FilterKind } from './filtering';
 export type Align = 'left' | 'right';
 interface ColBase {
     /** Field on the row to read for this column's value. */
@@ -8,27 +9,54 @@ interface ColBase {
     header: string;
     /** Fixed width in px. Ignored when `flex` is set. */
     width?: number;
+    /** Min/max width (px) enforced while drag-resizing this column. */
+    minWidth?: number;
+    maxWidth?: number;
     /** flex-grow weight; column stretches to fill remaining space. */
     flex?: number;
     align?: Align;
+    /** Extra class(es) for this column's data cells — a static string, or a
+        function of the cell value/row for conditional styling. Target via
+        `:global(.bo-grid .c.your-class)`. */
+    cellClass?: string | ((value: unknown, row: GridRow) => string | undefined);
+    /** Extra class(es) for this column's header. Target via `:global`. */
+    headerClass?: string;
     /** Amber flash on value change (drives off the row's flashSeq/flashDir). */
     flash?: boolean;
     /** Set false to disable header-click sorting on this column. */
     sortable?: boolean;
+    /** Custom ascending comparator for this column's values (e.g. enum priority or
+        natural sort). Direction is applied by the grid. In-memory mode only. */
+    compare?: (a: unknown, b: unknown) => number;
     /** When grouping is active, show this aggregate of the column on group headers. */
     groupAgg?: AggKind;
-    /** Pin this column to the left; it stays visible during horizontal scroll. */
-    pinned?: boolean;
+    /** Pin this column so it stays visible during horizontal scroll. `true` /
+        `'left'` pins to the left edge, `'right'` to the right. */
+    pinned?: boolean | 'left' | 'right';
     /** Allow inline editing (double-click or Enter on the focused cell). */
     editable?: boolean;
     /** Validate an edited value before it commits (inline edit or paste). Return
         false to reject and keep the old value. Receives the coerced value. */
     validate?: (value: string | number, row: GridRow) => boolean;
+    /** Editable choices: when set, editing renders a `<select>` of these options
+        instead of a text input (enum/status columns). */
+    options?: string[];
+    /** Set a native `title` tooltip on each cell (the full formatted value) — handy
+        when content truncates. */
+    tooltip?: boolean;
+    /** Custom display formatter, overriding the built-in type formatter. Applies
+        to display, tooltip, copy and (formatted) export. `row` is absent for
+        aggregate cells. */
+    format?: (value: unknown, row?: GridRow) => string;
     /** Set false to disable drag-to-resize on this column (default on). */
     resizable?: boolean;
     /** Parent header label. Consecutive columns sharing a `group` render under a
         spanning header. Best with fixed-width columns. */
     group?: string;
+    /** Header filter-menu control for this column (requires `filterMenu` on
+        <Grid>). Defaults to the column's type; `'set'` shows a value checklist;
+        `false` disables filtering for this column. */
+    filter?: false | FilterKind;
 }
 export interface CellEditEvent {
     row: GridRow;
@@ -78,15 +106,15 @@ export interface GridRow {
     flashDir: 'up' | 'down';
     [field: string]: unknown;
 }
-export declare function formatCell(col: ColumnDef, value: unknown): string;
+export declare function formatCell(col: ColumnDef, value: unknown, row?: GridRow): string;
 export declare function isSortable(col: ColumnDef): boolean;
 export declare function isEditable(col: ColumnDef): boolean;
-export declare function compareRows(a: GridRow, b: GridRow, sort: SortState): number;
+export declare function compareRows(a: GridRow, b: GridRow, sort: SortState, col?: ColumnDef): number;
 /**
  * Multi-key comparison: apply each sort in order, returning the first that
  * separates the rows. An empty list leaves rows in their original order.
  */
-export declare function compareBySorts(a: GridRow, b: GridRow, sorts: readonly SortState[]): number;
+export declare function compareBySorts(a: GridRow, b: GridRow, sorts: readonly SortState[], colOf?: (key: string) => ColumnDef | undefined): number;
 export declare function colStyle(col: ColumnDef): string;
 /** Concrete pixel width for a column (flex columns get a sensible default). */
 export declare function colWidth(col: ColumnDef): number;

package/dist/grid/column.js

@@ -1,5 +1,7 @@
 import { fmtPrice, fmtPercent, fmtVolume, fmtDate } from '../format/format';
-export function formatCell(col, value) {
+export function formatCell(col, value, row) {
+    if (col.format)
+        return col.format(value, row);
     const n = typeof value === 'number' ? value : Number(value);
     switch (col.type) {
         case 'price':
@@ -22,24 +24,24 @@ export function isSortable(col) {
     return col.type !== 'sparkline' && col.sortable !== false;
 }
 export function isEditable(col) {
-    return !!col.editable && col.type !== 'sparkline' && col.type !== 'date' && col.type !== 'custom';
+    return !!col.editable && col.type !== 'sparkline' && col.type !== 'custom';
 }
 function rawCompare(a, b) {
     if (typeof a === 'number' && typeof b === 'number')
         return a - b;
     return String(a ?? '').localeCompare(String(b ?? ''));
 }
-export function compareRows(a, b, sort) {
-    const d = rawCompare(a[sort.key], b[sort.key]);
+export function compareRows(a, b, sort, col) {
+    const d = col?.compare ? col.compare(a[sort.key], b[sort.key]) : rawCompare(a[sort.key], b[sort.key]);
     return sort.dir === 'asc' ? d : -d;
 }
 /**
  * Multi-key comparison: apply each sort in order, returning the first that
  * separates the rows. An empty list leaves rows in their original order.
  */
-export function compareBySorts(a, b, sorts) {
+export function compareBySorts(a, b, sorts, colOf) {
     for (const sort of sorts) {
-        const d = compareRows(a, b, sort);
+        const d = compareRows(a, b, sort, colOf?.(sort.key));
         if (d !== 0)
             return d;
     }

package/dist/grid/export.js

@@ -19,7 +19,7 @@ export function rowsToMatrix(rows, columns, opts = {}) {
     if (opts.header !== false)
         matrix.push(cols.map((c) => c.header));
     for (const row of rows) {
-        matrix.push(cols.map((c) => (opts.formatted ? formatCell(c, row[c.key]) : rawValue(c, row[c.key]))));
+        matrix.push(cols.map((c) => (opts.formatted ? formatCell(c, row[c.key], row) : rawValue(c, row[c.key]))));
     }
     return matrix;
 }

package/dist/grid/filtering.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Structured per-column filter model (v0.3). Pure and dependency-free so it can
+ * be unit-tested and reused by both the in-memory `view` and a server source.
+ * The header filter-menu UI (lazy-loaded) writes these; `passesFilters` applies
+ * them. Filtering is a snapshot operation, not a per-frame one.
+ */
+import type { ColumnDef, GridRow } from './column';
+export type FilterKind = 'text' | 'number' | 'date' | 'set';
+export type TextOp = 'contains' | 'notContains' | 'equals' | 'starts' | 'ends';
+export type NumberOp = 'eq' | 'ne' | 'lt' | 'le' | 'gt' | 'ge' | 'between';
+export type DateOp = 'before' | 'after' | 'on' | 'between';
+export type ColumnFilter = {
+    kind: 'text';
+    op: TextOp;
+    q: string;
+} | {
+    kind: 'number';
+    op: NumberOp;
+    a: number;
+    b?: number;
+} | {
+    kind: 'date';
+    op: DateOp;
+    a: number;
+    b?: number;
+} | {
+    kind: 'set';
+    excluded: string[];
+};
+/** Pick the default filter control for a column from its type. */
+export declare function defaultFilterKind(col: ColumnDef): FilterKind;
+/** A fresh, inactive filter of the given kind (the menu's starting state). */
+export declare function emptyFilter(kind: FilterKind): ColumnFilter;
+/** Whether a filter actually constrains anything (else it's a no-op). */
+export declare function isFilterActive(f: ColumnFilter | undefined | null): boolean;
+/** Does one cell value satisfy one filter? An inactive filter passes everything. */
+export declare function matchesFilter(value: unknown, f: ColumnFilter): boolean;
+/** AND across every active per-column filter. */
+export declare function passesFilters(row: GridRow, filters: Record<string, ColumnFilter>): boolean;
+/** Sorted unique string values for a column — the set-filter checklist. */
+export declare function distinctValues(rows: readonly GridRow[], key: string): string[];

package/dist/grid/filtering.js

@@ -0,0 +1,107 @@
+import { isNumeric } from './column';
+const DAY = 86_400_000;
+/** Pick the default filter control for a column from its type. */
+export function defaultFilterKind(col) {
+    if (col.type === 'date')
+        return 'date';
+    if (isNumeric(col))
+        return 'number';
+    return 'text';
+}
+/** A fresh, inactive filter of the given kind (the menu's starting state). */
+export function emptyFilter(kind) {
+    switch (kind) {
+        case 'number':
+            return { kind: 'number', op: 'eq', a: NaN };
+        case 'date':
+            return { kind: 'date', op: 'on', a: NaN };
+        case 'set':
+            return { kind: 'set', excluded: [] };
+        default:
+            return { kind: 'text', op: 'contains', q: '' };
+    }
+}
+/** Whether a filter actually constrains anything (else it's a no-op). */
+export function isFilterActive(f) {
+    if (!f)
+        return false;
+    switch (f.kind) {
+        case 'text':
+            return f.q.trim().length > 0;
+        case 'number':
+        case 'date':
+            return Number.isFinite(f.a) && (f.op !== 'between' || Number.isFinite(f.b));
+        case 'set':
+            return f.excluded.length > 0;
+    }
+}
+/** Does one cell value satisfy one filter? An inactive filter passes everything. */
+export function matchesFilter(value, f) {
+    if (!isFilterActive(f))
+        return true;
+    switch (f.kind) {
+        case 'text': {
+            const hay = String(value ?? '').toLowerCase();
+            const q = f.q.trim().toLowerCase();
+            if (f.op === 'contains')
+                return hay.includes(q);
+            if (f.op === 'notContains')
+                return !hay.includes(q);
+            if (f.op === 'equals')
+                return hay === q;
+            if (f.op === 'starts')
+                return hay.startsWith(q);
+            return hay.endsWith(q); // 'ends'
+        }
+        case 'set':
+            return !f.excluded.includes(String(value ?? ''));
+        case 'number':
+        case 'date': {
+            // Empty/blank cells aren't numbers (Number(null)/Number('') coerce to 0),
+            // so exclude them explicitly while a number/date filter is active.
+            if (value === null || value === undefined || value === '')
+                return false;
+            const n = Number(value);
+            if (!Number.isFinite(n))
+                return false; // non-numeric is excluded while active
+            if (f.kind === 'date' && f.op === 'on') {
+                return Math.floor(n / DAY) === Math.floor(f.a / DAY); // same (UTC) day
+            }
+            switch (f.op) {
+                case 'eq':
+                    return n === f.a;
+                case 'ne':
+                    return n !== f.a;
+                case 'lt':
+                case 'before':
+                    return n < f.a;
+                case 'le':
+                    return n <= f.a;
+                case 'gt':
+                case 'after':
+                    return n > f.a;
+                case 'ge':
+                    return n >= f.a;
+                case 'between':
+                    return n >= f.a && n <= (f.b ?? Infinity);
+            }
+        }
+    }
+    return true; // unreachable fallback
+}
+/** AND across every active per-column filter. */
+export function passesFilters(row, filters) {
+    for (const key in filters) {
+        const f = filters[key];
+        if (isFilterActive(f) && !matchesFilter(row[key], f))
+            return false;
+    }
+    return true;
+}
+/** Sorted unique string values for a column — the set-filter checklist. */
+export function distinctValues(rows, key) {
+    const seen = new Set();
+    for (const row of rows)
+        seen.add(String(row[key] ?? ''));
+    return [...seen].sort((a, b) => a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' }));
+}

package/dist/grid/grouping.d.ts

@@ -14,6 +14,8 @@ export interface GroupNode {
 export type VisualRow = {
     kind: 'data';
     row: GridRow;
+    depth?: number;
+    hasChildren?: boolean;
 } | {
     kind: 'group';
     group: GroupNode;