bo-grid 0.7.0 → 0.21.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 LazyGroup } from './grouping';
 import { type ColumnFilter } from './filtering';
 import type { RowSource } from './source';
 type $$ComponentProps = {
@@ -35,6 +36,10 @@ type $$ComponentProps = {
         (the place to restore columns hidden via the menu). Lazy-loaded. Default
         false. */
     columnsPanel?: boolean;
+    /** Render only the columns within the horizontal scroll window (+ overscan)
+        for very wide grids (100+ columns). Forces fixed-width horizontal scroll;
+        pinned columns always render. Default false (fit-to-width). */
+    virtualizeColumns?: 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;
@@ -108,6 +113,20 @@ type $$ComponentProps = {
         `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;
+    /** Async tree data: load a row's children on expand (server-backed trees).
+        Returns a promise; the grid shows a loading row, then caches the result.
+        Pair with `hasChildren` (a cheap predicate) so chevrons show without
+        loading. Use instead of `getChildren`. In-memory roots. */
+    loadChildren?: (row: GridRow) => Promise<GridRow[]>;
+    /** Cheap predicate for whether a row has children (drives the expand chevron
+        without loading). Required with `loadChildren`; optional with `getChildren`. */
+    hasChildren?: (row: GridRow) => boolean;
+    /** Server-side grouping: top-level group summaries (header data, no leaf rows).
+        Each group's rows load on expand via `loadGroup`. In-memory mode. */
+    lazyGroups?: LazyGroup[];
+    /** Load a lazy group's leaf rows on expand (returns a promise; shows a loading
+        row, then caches). Required with `lazyGroups`. */
+    loadGroup?: (key: string) => Promise<GridRow[]>;
     /** 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. */

package/dist/grid/GroupRow.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { ColumnDef, GridRow } from './column';
-  import { colStyle, formatCell } from './column';
+  import { colStyle, formatCell, cellValue } from './column';
   import { aggregate } from './aggregate';
   import type { GroupNode } from './grouping';
 
@@ -19,10 +19,13 @@
   // Aggregate over the group's leaf rows. Reads row $state values, so group
   // subtotals stay live as the feed ticks (only on-screen groups are rendered).
   function aggText(col: ColumnDef): string {
+    // Lazy/server groups carry preformatted aggregate strings (leaf rows aren't
+    // loaded), so use those directly when present.
+    if (group.aggText) return group.aggText[col.key] ?? '';
     if (col.type === 'sparkline' || col.type === 'text' || !col.groupAgg) return '';
     const vals: number[] = [];
     for (const row of group.rows) {
-      const v = Number((row as GridRow)[col.key]);
+      const v = Number(cellValue(col, row as GridRow));
       if (Number.isFinite(v)) vals.push(v);
     }
     const a = aggregate(vals);

package/dist/grid/Pager.svelte

@@ -46,6 +46,10 @@
     background: var(--bo-row-hover);
     border-color: var(--bo-sel-border);
   }
+  .pg:focus-visible {
+    outline: 2px solid var(--bo-sel-border);
+    outline-offset: 1px;
+  }
   .pg:disabled {
     opacity: 0.4;
     cursor: not-allowed;

package/dist/grid/RowMenu.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
-  // Floating right-click row menu. Presentation-only: the parent owns open/close
-  // state and positions it via x/y.
+  // Floating action menu (row context menu + column header menu). Presentation +
+  // its own keyboard semantics (APG menu pattern): focus moves into the menu on
+  // open, Arrow/Home/End move between items, Enter/Space activate, Esc/Tab close.
+  // The parent owns open/close state and positions it via x/y.
   let {
     x,
     y,
@@ -12,14 +14,69 @@
     items: Array<{ label: string; onSelect: () => void }>;
     onClose: () => void;
   } = $props();
+
+  let menuEl: HTMLDivElement;
+
+  const buttons = (): HTMLButtonElement[] =>
+    menuEl ? [...menuEl.querySelectorAll<HTMLButtonElement>('.rowmenu-item')] : [];
+
+  function focusAt(i: number): void {
+    const b = buttons();
+    if (b.length === 0) return;
+    b[((i % b.length) + b.length) % b.length].focus();
+  }
+
+  // Move focus into the menu on open; restore it to the opener on close.
+  $effect(() => {
+    const opener = document.activeElement as HTMLElement | null;
+    focusAt(0);
+    return () => opener?.focus?.();
+  });
+
+  function onKeydown(e: KeyboardEvent): void {
+    const b = buttons();
+    const i = b.indexOf(document.activeElement as HTMLButtonElement);
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        e.stopPropagation();
+        focusAt(i + 1);
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        e.stopPropagation();
+        focusAt(i - 1);
+        break;
+      case 'Home':
+        e.preventDefault();
+        e.stopPropagation();
+        focusAt(0);
+        break;
+      case 'End':
+        e.preventDefault();
+        e.stopPropagation();
+        focusAt(b.length - 1);
+        break;
+      case 'Escape':
+        e.preventDefault();
+        e.stopPropagation();
+        onClose();
+        break;
+      case 'Tab':
+        onClose(); // close and let focus return to the opener
+        break;
+    }
+  }
 </script>
 
 <div
   class="rowmenu"
   role="menu"
   tabindex="-1"
+  bind:this={menuEl}
   style="left:{x}px;top:{y}px;"
   onpointerdown={(e) => e.stopPropagation()}
+  onkeydown={onKeydown}
 >
   {#each items as item (item.label)}
     <button
@@ -63,4 +120,10 @@
   .rowmenu-item:hover {
     background: var(--bo-row-hover);
   }
+  /* Visible keyboard focus (WCAG 2.4.7) — the menu is arrow-navigable. */
+  .rowmenu-item:focus-visible {
+    background: var(--bo-row-hover);
+    outline: 2px solid var(--bo-sel-border);
+    outline-offset: -2px;
+  }
 </style>

package/dist/grid/ToolPanel.svelte

@@ -84,6 +84,11 @@
   .bo-tp-link:hover {
     text-decoration: underline;
   }
+  .bo-tp-link:focus-visible {
+    outline: 2px solid var(--bo-sel-border);
+    outline-offset: 1px;
+    border-radius: 4px;
+  }
   .bo-tp-search {
     width: 100%;
     padding: 5px 7px;

package/dist/grid/column.d.ts

@@ -7,6 +7,13 @@ interface ColBase {
     /** Field on the row to read for this column's value. */
     key: string;
     header: string;
+    /** Computed value: derive this cell's value from the whole row instead of
+        reading `row[key]` (KPIs, ratios, deltas). Flows through display, sort,
+        filter, aggregation, export and conditional formatting. `key` still names
+        the column (and is the sort/filter key) but need not be a real row field.
+        Keep it cheap and pure — it's called during sort/filter. Computed columns
+        aren't editable. In-memory mode (a server source owns its own derivations). */
+    value?: (row: GridRow) => unknown;
     /** Fixed width in px. Ignored when `flex` is set. */
     width?: number;
     /** Min/max width (px) enforced while drag-resizing this column. */
@@ -57,6 +64,58 @@ interface ColBase {
         <Grid>). Defaults to the column's type; `'set'` shows a value checklist;
         `false` disables filtering for this column. */
     filter?: false | FilterKind;
+    /** Conditional formatting — a horizontal bar painted behind the cell value,
+        scaled across the column's value range. The range is auto-computed over the
+        current view (in-memory) unless `min`/`max` are given; pass `min: 0` for
+        absolute proportional bars. Bars cross a zero baseline when the range spans
+        negatives. Numeric columns only. */
+    dataBar?: DataBarConfig;
+    /** Conditional formatting — show an icon beside the value, chosen by the
+        highest threshold `at` that is ≤ the cell value (e.g. ▲ ● ▼ by sign or band).
+        Numeric columns only. */
+    icons?: IconRule[];
+    /** Conditional formatting — tint the cell background across the column's value
+        range (a soft heat ramp). Auto-ranged over the current view unless `min`/
+        `max` are given; pass `mid` for a 3-stop diverging scale (e.g. `mid: 0`).
+        Numeric columns only. */
+    colorScale?: ColorScaleConfig;
+}
+/** Conditional-formatting data-bar config (see `ColBase.dataBar`). */
+export interface DataBarConfig {
+    min?: number;
+    max?: number;
+    /** Bar colour for values ≥ 0 (default `--bo-up`). Any CSS colour or var. */
+    color?: string;
+    /** Bar colour for values < 0 (default `--bo-down`). */
+    negative?: string;
+}
+/** Conditional-formatting colour-scale config (see `ColBase.colorScale`). */
+export interface ColorScaleConfig {
+    min?: number;
+    /** Midpoint for a 3-stop diverging scale (e.g. `0`). Omit for a 2-stop scale. */
+    mid?: number;
+    max?: number;
+    /** Stop colours — `[low, high]` (2-stop) or `[low, mid, high]` (3-stop). Any
+        CSS colour or var. Defaults to a soft, translucent theme ramp (up tint for
+        high; down→up diverging when `mid` is set). */
+    colors?: [string, string] | [string, string, string];
+}
+/** A single icon-set threshold rule (see `ColBase.icons`). */
+export interface IconRule {
+    /** Lower bound: this rule wins when `value >= at` and `at` is the greatest
+        such threshold. */
+    at: number;
+    icon: string;
+    tone?: BadgeTone;
+}
+/** Resolved data-bar geometry as fractions of the cell width (0..1). */
+export interface DataBarGeom {
+    /** Distance of the bar's left edge from the cell's left edge. */
+    left: number;
+    /** Bar width. */
+    width: number;
+    /** The value is negative (use the bar's `negative` colour). */
+    negative: boolean;
 }
 export interface CellEditEvent {
     row: GridRow;
@@ -83,6 +142,13 @@ export type ColumnDef = (ColBase & {
 }) | (ColBase & {
     type: 'date';
     dateStyle?: DateStyle;
+}) | (ColBase & {
+    type: 'currency';
+    currency?: string;
+    locale?: string;
+    decimals?: number;
+}) | (ColBase & {
+    type: 'relative';
 }) | (ColBase & {
     type: 'heatmap';
     min: number;
@@ -91,9 +157,34 @@ export type ColumnDef = (ColBase & {
 }) | (ColBase & {
     type: 'sparkline';
     sparkKey: string;
+}) | (ColBase & {
+    type: 'progress';
+    min?: number;
+    max?: number;
+}) | (ColBase & {
+    type: 'rating';
+    max?: number;
+}) | (ColBase & {
+    type: 'tags';
+}) | (ColBase & {
+    type: 'badge';
+    tones?: Record<string, BadgeTone>;
+}) | (ColBase & {
+    type: 'boolean';
+    trueLabel?: string;
+    falseLabel?: string;
+}) | (ColBase & {
+    type: 'avatar';
+    sub?: string;
+}) | (ColBase & {
+    type: 'link';
+    href?: (row: GridRow) => string;
+    newTab?: boolean;
 }) | (ColBase & {
     type: 'custom';
 });
+/** Semantic colour for a `badge` value (mapped via the column's `tones`). */
+export type BadgeTone = 'up' | 'down' | 'amber' | 'info' | 'neutral';
 export type SortDir = 'asc' | 'desc';
 export interface SortState {
     key: string;
@@ -106,6 +197,12 @@ export interface GridRow {
     flashDir: 'up' | 'down';
     [field: string]: unknown;
 }
+/**
+ * The cell's value: a column's computed `value(row)` when defined, else the row
+ * field `row[key]`. Route ALL value reads through this so computed columns flow
+ * through display, sort, filter, aggregation and export.
+ */
+export declare function cellValue(col: ColumnDef, row: GridRow): unknown;
 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;
@@ -120,4 +217,40 @@ export declare function colStyle(col: ColumnDef): string;
 export declare function colWidth(col: ColumnDef): number;
 export declare function isNumeric(col: ColumnDef): boolean;
 export declare function candlesOf(row: GridRow, key: string): Candle[];
+/**
+ * Conditional formatting — data-bar geometry. Maps `value` onto a 0..1 range,
+ * anchored at the zero baseline so signed columns diverge left/right around zero
+ * (left-anchored when the range doesn't cross zero). `range` is the data extent;
+ * `cfg.min`/`cfg.max` override it (e.g. `min: 0` for absolute bars). Returns null
+ * for non-numeric values (no bar). Pure; unit-tested.
+ */
+export declare function dataBarGeometry(value: unknown, range: {
+    min: number;
+    max: number;
+}, cfg?: {
+    min?: number;
+    max?: number;
+}): DataBarGeom | null;
+/**
+ * Conditional formatting — colour-scale background for a value across the range.
+ * Two-stop (low→high) by default; pass `cfg.mid` (or 3 `colors`) for a diverging
+ * scale. `range` is the data extent; `cfg.min`/`cfg.max` override it. Returns null
+ * for non-numeric values (no tint). Pure; unit-tested.
+ */
+export declare function colorScaleBackground(value: unknown, range: {
+    min: number;
+    max: number;
+}, cfg?: ColorScaleConfig): string | null;
+/**
+ * Conditional formatting — pick the icon-set rule for a value: the rule with the
+ * greatest `at` threshold that is ≤ the value (order-independent). Returns null
+ * for non-numeric values or when no threshold matches. Pure; unit-tested.
+ */
+export declare function pickIcon(value: unknown, rules: readonly IconRule[]): IconRule | null;
+/** Sanitize a `link` column's href: block the XSS-prone url schemes
+    (javascript:/data:/vbscript:), pass everything else (http(s)/mailto/tel/
+    relative). Returns undefined for an empty or unsafe href (renders as text). */
+export declare function safeHref(url: string): string | undefined;
+/** Semantic tone → grid theme colour var (shared by badges + icon sets). */
+export declare function toneColor(tone?: BadgeTone): string;
 export {};

package/dist/grid/column.js

@@ -1,4 +1,12 @@
-import { fmtPrice, fmtPercent, fmtVolume, fmtDate } from '../format/format';
+import { fmtPrice, fmtPercent, fmtVolume, fmtDate, fmtCurrency, relativeTime } from '../format/format';
+/**
+ * The cell's value: a column's computed `value(row)` when defined, else the row
+ * field `row[key]`. Route ALL value reads through this so computed columns flow
+ * through display, sort, filter, aggregation and export.
+ */
+export function cellValue(col, row) {
+    return col.value ? col.value(row) : row[col.key];
+}
 export function formatCell(col, value, row) {
     if (col.format)
         return col.format(value, row);
@@ -14,17 +22,31 @@ export function formatCell(col, value, row) {
             return n.toFixed(col.decimals ?? 2);
         case 'date':
             return fmtDate(n, col.dateStyle);
+        case 'currency':
+            return fmtCurrency(n, col.currency, col.locale, col.decimals);
+        case 'relative':
+            return relativeTime(n);
         case 'heatmap':
             return n.toFixed(col.decimals ?? 2);
+        case 'rating':
+            return `${value ?? 0}`;
+        case 'tags':
+            return Array.isArray(value) ? value.join(', ') : String(value ?? '');
+        case 'boolean':
+            return value ? (col.trueLabel ?? 'Yes') : (col.falseLabel ?? 'No');
         default:
+            // progress / badge / avatar / link / text and friends.
             return value == null ? '' : String(value);
     }
 }
 export function isSortable(col) {
     return col.type !== 'sparkline' && col.sortable !== false;
 }
+// Rich display widgets aren't text-editable (they render structured/visual data).
+const DISPLAY_ONLY = ['sparkline', 'custom', 'tags', 'badge', 'boolean', 'avatar', 'progress', 'rating', 'link', 'relative'];
 export function isEditable(col) {
-    return !!col.editable && col.type !== 'sparkline' && col.type !== 'custom';
+    // Computed columns have no underlying field to write back to.
+    return !!col.editable && !col.value && !DISPLAY_ONLY.includes(col.type);
 }
 function rawCompare(a, b) {
     if (typeof a === 'number' && typeof b === 'number')
@@ -32,7 +54,11 @@ function rawCompare(a, b) {
     return String(a ?? '').localeCompare(String(b ?? ''));
 }
 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]);
+    // Computed columns sort by their derived value; everything else reads the
+    // authoritative sort key off the row.
+    const av = col?.value ? col.value(a) : a[sort.key];
+    const bv = col?.value ? col.value(b) : b[sort.key];
+    const d = col?.compare ? col.compare(av, bv) : rawCompare(av, bv);
     return sort.dir === 'asc' ? d : -d;
 }
 /**
@@ -57,8 +83,111 @@ export function colWidth(col) {
     return col.flex ? (col.width ?? 160) : (col.width ?? 96);
 }
 export function isNumeric(col) {
-    return col.type !== 'text' && col.type !== 'sparkline' && col.type !== 'custom';
+    // Non-numeric (text-aligned / structured) types; everything else is a number.
+    return !['text', 'sparkline', 'custom', 'tags', 'badge', 'boolean', 'avatar', 'link'].includes(col.type);
 }
 export function candlesOf(row, key) {
     return row[key] ?? [];
 }
+const clamp01 = (x) => Math.max(0, Math.min(1, x));
+// Coerce to a number, but treat null/undefined/'' as non-numeric (NaN) — guards
+// against `Number(null) === 0` slipping blanks through as a real zero value.
+function numericOrNaN(value) {
+    if (value === null || value === undefined || value === '')
+        return NaN;
+    return typeof value === 'number' ? value : Number(value);
+}
+/**
+ * Conditional formatting — data-bar geometry. Maps `value` onto a 0..1 range,
+ * anchored at the zero baseline so signed columns diverge left/right around zero
+ * (left-anchored when the range doesn't cross zero). `range` is the data extent;
+ * `cfg.min`/`cfg.max` override it (e.g. `min: 0` for absolute bars). Returns null
+ * for non-numeric values (no bar). Pure; unit-tested.
+ */
+export function dataBarGeometry(value, range, cfg = {}) {
+    const n = numericOrNaN(value);
+    if (!Number.isFinite(n))
+        return null;
+    const min = cfg.min ?? range.min;
+    const max = cfg.max ?? range.max;
+    const span = max - min || 1;
+    const zero = clamp01((0 - min) / span);
+    const v = clamp01((n - min) / span);
+    return { left: Math.min(zero, v), width: Math.abs(v - zero), negative: n < 0 };
+}
+// Default colour-scale stops — soft, translucent theme tints so row striping
+// shows through and text stays readable (mixed in sRGB to keep clean alpha).
+const SCALE_SEQ = ['transparent', 'color-mix(in srgb, var(--bo-up) 32%, transparent)'];
+const SCALE_DIV = [
+    'color-mix(in srgb, var(--bo-down) 34%, transparent)',
+    'transparent',
+    'color-mix(in srgb, var(--bo-up) 34%, transparent)',
+];
+const mixColor = (a, b, t) => `color-mix(in srgb, ${b} ${(clamp01(t) * 100).toFixed(1)}%, ${a})`;
+/**
+ * Conditional formatting — colour-scale background for a value across the range.
+ * Two-stop (low→high) by default; pass `cfg.mid` (or 3 `colors`) for a diverging
+ * scale. `range` is the data extent; `cfg.min`/`cfg.max` override it. Returns null
+ * for non-numeric values (no tint). Pure; unit-tested.
+ */
+export function colorScaleBackground(value, range, cfg = {}) {
+    const n = numericOrNaN(value);
+    if (!Number.isFinite(n))
+        return null;
+    const min = cfg.min ?? range.min;
+    const max = cfg.max ?? range.max;
+    const span = max - min || 1;
+    const t = clamp01((n - min) / span);
+    if (cfg.mid != null || cfg.colors?.length === 3) {
+        const [lo, md, hi] = cfg.colors ?? SCALE_DIV;
+        const mt = clamp01(((cfg.mid ?? (min + max) / 2) - min) / span);
+        return t <= mt
+            ? mixColor(lo, md, mt === 0 ? 1 : t / mt)
+            : mixColor(md, hi, mt === 1 ? 1 : (t - mt) / (1 - mt));
+    }
+    const [lo, hi] = cfg.colors ?? SCALE_SEQ;
+    return mixColor(lo, hi, t);
+}
+/**
+ * Conditional formatting — pick the icon-set rule for a value: the rule with the
+ * greatest `at` threshold that is ≤ the value (order-independent). Returns null
+ * for non-numeric values or when no threshold matches. Pure; unit-tested.
+ */
+export function pickIcon(value, rules) {
+    const n = numericOrNaN(value);
+    if (!Number.isFinite(n))
+        return null;
+    let pick = null;
+    for (const rule of rules) {
+        if (n >= rule.at && (pick === null || rule.at >= pick.at))
+            pick = rule;
+    }
+    return pick;
+}
+/** Sanitize a `link` column's href: block the XSS-prone url schemes
+    (javascript:/data:/vbscript:), pass everything else (http(s)/mailto/tel/
+    relative). Returns undefined for an empty or unsafe href (renders as text). */
+export function safeHref(url) {
+    const u = url.trim();
+    if (!u)
+        return undefined;
+    // eslint-disable-next-line no-script-url
+    if (/^(javascript|data|vbscript):/i.test(u))
+        return undefined;
+    return u;
+}
+/** Semantic tone → grid theme colour var (shared by badges + icon sets). */
+export function toneColor(tone) {
+    switch (tone) {
+        case 'up':
+            return 'var(--bo-up)';
+        case 'down':
+            return 'var(--bo-down)';
+        case 'amber':
+            return 'var(--bo-amber)';
+        case 'info':
+            return 'var(--bo-sel-border)';
+        default:
+            return 'var(--bo-text-dim)';
+    }
+}

package/dist/grid/colvirt.d.ts

@@ -0,0 +1,15 @@
+export type ColRenderItem = {
+    kind: 'cell';
+    ci: number;
+} | {
+    kind: 'spacer';
+    w: number;
+};
+/**
+ * Given each column's x-offset (`x`) and `widths`, which columns are `pinned`
+ * (always rendered), and the horizontal viewport (`scrollLeft`..`+viewW`, grown
+ * by `overscan` px each side), return the render items in column order.
+ */
+export declare function columnWindow(x: readonly number[], widths: readonly number[], pinned: readonly boolean[], scrollLeft: number, viewW: number, overscan: number): ColRenderItem[];
+/** Prefix-sum of column widths → each column's left x-offset. */
+export declare function columnOffsets(widths: readonly number[]): number[];

package/dist/grid/colvirt.js

@@ -0,0 +1,43 @@
+// Column (horizontal) virtualization math. Pure + unit-tested; the Grid maps the
+// result to <Cell> / spacer elements. Off-window runs of columns collapse into a
+// single spacer of their summed width so positions/total width stay exact.
+/**
+ * Given each column's x-offset (`x`) and `widths`, which columns are `pinned`
+ * (always rendered), and the horizontal viewport (`scrollLeft`..`+viewW`, grown
+ * by `overscan` px each side), return the render items in column order.
+ */
+export function columnWindow(x, widths, pinned, scrollLeft, viewW, overscan) {
+    const n = widths.length;
+    const lo = scrollLeft - overscan;
+    const hi = scrollLeft + viewW + overscan;
+    const out = [];
+    let pending = 0;
+    const flush = () => {
+        if (pending > 0) {
+            out.push({ kind: 'spacer', w: pending });
+            pending = 0;
+        }
+    };
+    for (let ci = 0; ci < n; ci++) {
+        const visible = pinned[ci] || (x[ci] + widths[ci] > lo && x[ci] < hi);
+        if (visible) {
+            flush();
+            out.push({ kind: 'cell', ci });
+        }
+        else {
+            pending += widths[ci];
+        }
+    }
+    flush();
+    return out;
+}
+/** Prefix-sum of column widths → each column's left x-offset. */
+export function columnOffsets(widths) {
+    const xs = [];
+    let x = 0;
+    for (const w of widths) {
+        xs.push(x);
+        x += w;
+    }
+    return xs;
+}

package/dist/grid/export.js

@@ -1,4 +1,4 @@
-import { formatCell, isNumeric } from './column';
+import { formatCell, isNumeric, cellValue } from './column';
 function rawValue(col, v) {
     if (col.type === 'date')
         return formatCell(col, v); // epoch ms isn't useful raw
@@ -19,7 +19,10 @@ 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], row) : rawValue(c, row[c.key]))));
+        matrix.push(cols.map((c) => {
+            const v = cellValue(c, row);
+            return opts.formatted ? formatCell(c, v, row) : rawValue(c, v);
+        }));
     }
     return matrix;
 }

package/dist/grid/filtering.d.ts

@@ -35,7 +35,10 @@ export declare function emptyFilter(kind: FilterKind): ColumnFilter;
 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;
+/** Resolve a column's value for filtering — `row[key]` by default; Grid passes a
+    computed-aware resolver so computed columns filter on their derived value. */
+export type ValueResolver = (row: GridRow, key: string) => unknown;
 /** AND across every active per-column filter. */
-export declare function passesFilters(row: GridRow, filters: Record<string, ColumnFilter>): boolean;
+export declare function passesFilters(row: GridRow, filters: Record<string, ColumnFilter>, valueOf?: ValueResolver): boolean;
 /** Sorted unique string values for a column — the set-filter checklist. */
-export declare function distinctValues(rows: readonly GridRow[], key: string): string[];
+export declare function distinctValues(rows: readonly GridRow[], key: string, valueOf?: ValueResolver): string[];

package/dist/grid/filtering.js

@@ -89,19 +89,20 @@ export function matchesFilter(value, f) {
     }
     return true; // unreachable fallback
 }
+const byKey = (row, key) => row[key];
 /** AND across every active per-column filter. */
-export function passesFilters(row, filters) {
+export function passesFilters(row, filters, valueOf = byKey) {
     for (const key in filters) {
         const f = filters[key];
-        if (isFilterActive(f) && !matchesFilter(row[key], f))
+        if (isFilterActive(f) && !matchesFilter(valueOf(row, key), f))
             return false;
     }
     return true;
 }
 /** Sorted unique string values for a column — the set-filter checklist. */
-export function distinctValues(rows, key) {
+export function distinctValues(rows, key, valueOf = byKey) {
     const seen = new Set();
     for (const row of rows)
-        seen.add(String(row[key] ?? ''));
+        seen.add(String(valueOf(row, key) ?? ''));
     return [...seen].sort((a, b) => a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' }));
 }