@svgrid/grid 3.0.5 → 3.0.6

package/dist/history.js

@@ -41,6 +41,34 @@ function groupEnd(history, start) {
         i += 1;
     return i;
 }
+/**
+ * The last `limit` ACTIONS of a history, whole groups kept. The cap used
+ * to count steps, and a sort of 5,000 rows is 20,000 steps in one group:
+ * it cut the group to its last 200 cells, so Ctrl+Z put a fifth of a
+ * column back and left the rest sorted. An action is one press of Ctrl+Z,
+ * so that is what the buffer counts; the steps inside are the cost of it.
+ */
+function lastActions(history, limit) {
+    let i = history.length;
+    let actions = 0;
+    while (i > 0 && actions < limit) {
+        i = groupStart(history, i - 1);
+        actions += 1;
+    }
+    return i === 0 ? history : history.slice(i);
+}
+/** What the next undo would apply: the tag of the step Ctrl+Z takes next
+ *  (a group carries one tag, so its last step's is the group's). Null when
+ *  there is nothing to undo. */
+export function peekUndoHistory(ctx) {
+    const step = ctx.historyPtr >= 0 ? ctx.history[ctx.historyPtr] : undefined;
+    return step ? { tag: step.tag } : null;
+}
+/** The redo counterpart of `peekUndoHistory`. */
+export function peekRedoHistory(ctx) {
+    const step = ctx.historyPtr < ctx.history.length - 1 ? ctx.history[ctx.historyPtr + 1] : undefined;
+    return step ? { tag: step.tag } : null;
+}
 /** Undo one action. Returns false when there is nothing left to undo. */
 export function undoHistory(ctx) {
     if (ctx.historyPtr < 0)
@@ -94,11 +122,13 @@ export function pushHistory(ctx, steps, groupId) {
     // Outside one, a group of one is just a step. Tagging it would make undo do
     // the same work through a slower path and would show up in serialized state.
     const id = ctx.historyGroupId ?? (groupId && steps.length > 1 ? groupId : undefined);
+    const tag = ctx.historyTag;
     let next = ctx.history.slice(0, ctx.historyPtr + 1);
-    for (const step of steps)
-        next.push(id ? { ...step, groupId: id } : step);
-    if (next.length > ctx.UNDO_LIMIT)
-        next = next.slice(next.length - ctx.UNDO_LIMIT);
+    for (const step of steps) {
+        const stamped = tag === undefined ? step : { ...step, tag };
+        next.push(id ? { ...stamped, groupId: id } : stamped);
+    }
+    next = lastActions(next, ctx.UNDO_LIMIT);
     ctx.history = next;
     ctx.historyPtr = ctx.history.length - 1;
     ctx.historyVersion += 1;

package/dist/index.d.ts

@@ -213,7 +213,7 @@ export { resolveColumnTypes, inferCellDataType, type CellDataType } from './colu
 export { computeColumnGroupMeta, hiddenLeavesForCollapse, type ColumnGroupMeta, type ColumnGroupShow, } from './column-groups.js';
 export { createHyperFormulaSheet, type HyperFormulaSheet, type HyperFormulaSheetConfig, type HyperFormulaInstance, } from './hyperformula-adapter.js';
 export { createCollaboration, broadcastChannelTransport, type CollabUser, type CollabCell, type CollabPresence, type CollabMessage, type CollabTransport, type Collaboration, } from './collaboration.js';
-export { createServerDataSource, type ServerDataSource, type ServerSelectionRule, type ServerRequest, type ServerResult, type ServerController, type ServerControllerOptions, type ServerState, type ServerSortModel, type ServerFilterModel, type ServerAggregation, type ServerGroupRow, type ServerLeafRow, type ServerMoreRow, type ServerFooterRow, type ServerSkeletonRow, type ServerGrandTotalRow, type ServerPlaceholderRow, type ServerDisplayRow, } from './server-data-source.js';
+export { createServerDataSource, type ServerDataSource, type ServerSelectionRule, type ServerRequest, type ServerResult, type ServerController, type ServerControllerOptions, type ServerState, type ServerSortModel, type ServerFilterModel, type ServerAggFn, type ServerAggregation, type ServerGroupRow, type ServerLeafRow, type ServerMoreRow, type ServerFooterRow, type ServerSkeletonRow, type ServerGrandTotalRow, type ServerPlaceholderRow, type ServerDisplayRow, type ServerDetailRow, } from './server-data-source.js';
 export { createBlockCache, createRowPlaceholder, rowPlaceholderState, type BlockCache, type BlockCacheOptions, type BlockCacheState, type BlockFetchResult, type BlockState, } from './server-block-cache.js';
 export { toServerFilterColumns, type GridRowModel, type GridFilterState, type GridRowModelSort, } from './row-model.js';
 export { createNamedViews, memoryViews, localStorageViews, attachAutoSavedView, type SavedView, type ViewStorage, type NamedViews, type AutoSavedViewOptions, } from './named-views.js';

package/dist/keyboard-handlers.js

@@ -166,6 +166,28 @@ export function createKeyboard(ctx) {
                 row.toggleExpanded?.();
                 return;
             }
+            // The same key on a server-side tree: a group opens or closes, a leaf
+            // opens or closes its detail panel when the grid draws one.
+            const sg = ctx.props.serverGroup;
+            if (event.ctrlKey && sg && row) {
+                const data = row.original;
+                if (sg.isGroup(data)) {
+                    sg.onToggle(data);
+                    return;
+                }
+                if (sg.toggleDetail && ctx.props.renderDetailRow && (sg.hasDetail?.(data) ?? true)) {
+                    sg.toggleDetail(data);
+                    return;
+                }
+            }
+            // ...and on a client-side master-detail: the app's own toggle.
+            if (event.ctrlKey && row && ctx.props.onDetailToggle && ctx.props.renderDetailRow) {
+                const data = row.original;
+                if (!ctx.props.isDetailRow?.(data, current.rowIndex) && (ctx.props.hasDetail?.(data) ?? true)) {
+                    ctx.props.onDetailToggle(data, current.rowIndex);
+                    return;
+                }
+            }
             if (column?.columnDef.editorType === "checkbox") {
                 ctx.toggleBooleanCell(current.rowIndex, current.colIndex);
                 return;
@@ -257,7 +279,8 @@ export function createKeyboard(ctx) {
         ctx.setSelection(next.rowIndex, next.colIndex);
     }
     function onWindowKeydown(event) {
-        if (event.key === "Escape" && (ctx.columnMenuFor || ctx.operatorMenuFor)) {
+        if (event.key === "Escape" &&
+            (ctx.columnMenuFor || ctx.operatorMenuFor || ctx.filterMenuFor || ctx.inSuggestFor || ctx.chooseColumnsPos)) {
             ctx.closeMenus();
         }
     }

package/dist/keyboard.js

@@ -37,6 +37,10 @@ export function getKeyboardIntent(event) {
     //   Tab        → move right (Shift+Tab → left), wraps at row boundaries
     //   Delete     → clear contents of the selected cells
     //   F2 / Space → start editing the active cell
+    // Ctrl+Enter acts on the row rather than moving: a group opens or closes,
+    // a row with a detail panel shows or hides it (see the activate branch).
+    if (event.key === 'Enter' && (event.ctrlKey || event.metaKey))
+        return 'activate';
     if (event.key === 'Enter')
         return event.shiftKey ? 'moveUp' : 'moveDown';
     if (event.key === 'Tab')

package/dist/row-drag-touch.d.ts

@@ -3,7 +3,7 @@ export type TouchDragDeps = {
     ctx: any;
     managed: () => boolean;
     originalAt: (rowIndex: number) => unknown;
-    commitDropOnRow: (rowIndex: number, side: "before" | "after") => void;
+    commitDropOnRow: (rowIndex: number, side: "before" | "after" | "into") => void;
     clearIndicators: () => void;
     cancelPendingLeave: () => void;
     /** Publish the dragged row on the shared cross-grid bus. */

package/dist/row-drag.js

@@ -98,7 +98,27 @@ export function createRowDrag(ctx) {
             e.dataTransfer.dropEffect = "move";
         const rect = e.currentTarget.getBoundingClientRect();
         ctx.rowDropIndex = rowIndex;
-        ctx.rowDropSide = e.clientY < rect.top + rect.height / 2 ? "before" : "after";
+        ctx.rowDropSide = sideAt(rowIndex, rect, e.clientY);
+    }
+    /**
+     * Which edge the pointer is on. A custom drop handler also gets the middle
+     * of a group or tree row as "into" (the row becomes its child); the
+     * managed reorder only knows before and after.
+     */
+    function sideAt(rowIndex, rect, y) {
+        const rel = (y - rect.top) / Math.max(rect.height, 1);
+        if (ctx.props.onRowDrop && rel >= 0.25 && rel <= 0.75 && canNest(rowIndex))
+            return "into";
+        return rel < 0.5 ? "before" : "after";
+    }
+    function canNest(rowIndex) {
+        const row = ctx.allRows[rowIndex];
+        if (!row)
+            return false;
+        const sg = ctx.props.serverGroup;
+        if (sg)
+            return !!sg.isGroup(row.original);
+        return typeof row.getCanExpand === "function" && row.getCanExpand();
     }
     function onRowDragLeave(rowIndex) {
         // A leave from a row that is not the current target is already stale.
@@ -137,6 +157,15 @@ export function createRowDrag(ctx) {
         const sourceGridId = bus.gridId;
         const sameGrid = sourceGridId === gridId;
         clearIndicators();
+        // A custom handler owns the drop: the grid reports it and leaves its
+        // data alone (a row model's rows are not the grid's to splice).
+        if (sameGrid && ctx.props.onRowDrop) {
+            bus = null;
+            ctx.props.onRowDrop({ row: dragged, target, targetIndex: rowIndex, side });
+            return;
+        }
+        if (side === "into")
+            side = "after";
         const data = ctx.internalData.slice();
         if (sameGrid) {
             const from = data.indexOf(dragged);
@@ -183,6 +212,11 @@ export function createRowDrag(ctx) {
         const sourceGridId = bus.gridId;
         const sameGrid = sourceGridId === gridId;
         clearIndicators();
+        if (sameGrid && ctx.props.onRowDrop) {
+            bus = null;
+            ctx.props.onRowDrop({ row: dragged, target: null, targetIndex: null, side: "after" });
+            return;
+        }
         const data = ctx.internalData.slice();
         if (sameGrid) {
             const from = data.indexOf(dragged);

package/dist/row-model.d.ts

@@ -84,6 +84,12 @@ export type GridRowModel<TData> = {
         level: (row: TData) => number;
         expanded?: (row: TData) => boolean;
         onToggle: (row: TData) => void;
+        /** Open or close the detail panel under a leaf. Ctrl+Enter on a row calls it when `renderDetailRow` is set, and so does the `showDetailToggle` chevron. */
+        toggleDetail?: (row: TData) => void;
+        /** Whether the detail under a leaf is open: the chevron's direction. */
+        detailOpen?: (row: TData) => boolean;
+        /** Whether a row can open a detail; the chevron is left out where this is false. */
+        hasDetail?: (row: TData) => boolean;
     };
     /** Selection the grid does not own - see the `rowSelectionModel` prop. */
     selection?: {

package/dist/row-resize.js

@@ -31,6 +31,19 @@ export function rowResize(node, opts) {
     let drag = null;
     /** The last press on a strip, for telling a double-click from two drags. */
     let lastPress = null;
+    /**
+     * A focusable `role="separator"` is a splitter, and a splitter carries its
+     * position: axe's `aria-required-attr` fails one without `aria-valuenow`,
+     * and a screen reader reading the strip says nothing useful without it. The
+     * value is the row's height in pixels, between the action's min and max.
+     */
+    function setStripValue(strip, height) {
+        const min = current.min ?? 20;
+        const max = current.max ?? 320;
+        strip.setAttribute('aria-valuemin', String(min));
+        strip.setAttribute('aria-valuemax', String(max));
+        strip.setAttribute('aria-valuenow', String(Math.round(Math.max(min, Math.min(max, height || min)))));
+    }
     function rowIndexOf(tr) {
         const dataRow = tr.querySelector('[data-svgrid-row]');
         const val = dataRow?.dataset.svgridRow;
@@ -43,6 +56,7 @@ export function rowResize(node, opts) {
         const max = current.max ?? 320;
         const next = Math.max(min, Math.min(max, drag.startHeight + (e.clientY - drag.startY)));
         drag.trEl.style.height = `${Math.round(next)}px`;
+        setStripValue(drag.strip, next);
         current.onResizeMove?.(drag.rowIndex, Math.round(next));
     }
     function onPointerUp(e) {
@@ -94,6 +108,7 @@ export function rowResize(node, opts) {
         const max = current.max ?? 320;
         const next = Math.round(Math.max(min, Math.min(max, tr.getBoundingClientRect().height + delta)));
         tr.style.height = `${next}px`;
+        setStripValue(t, next);
         current.onResizeMove?.(rowIndex, next);
         current.onResize(rowIndex, next);
     }
@@ -164,8 +179,13 @@ export function rowResize(node, opts) {
                     : null);
             if (!gutter)
                 continue;
-            if (gutter.querySelector(`:scope > .${STRIP_CLASS}`))
+            const already = gutter.querySelector(`:scope > .${STRIP_CLASS}`);
+            if (already) {
+                // The row may have been resized from outside the action (a saved
+                // height, a double-click autofit); keep the separator's value honest.
+                setStripValue(already, tr.getBoundingClientRect().height);
                 continue;
+            }
             // Anchor the strip to the gutter cell + allow it to overflow
             // downward into the row gap so the hit-area straddles the
             // row boundary the way Excel does.
@@ -180,6 +200,7 @@ export function rowResize(node, opts) {
             // A separator used as an interactive splitter has to be focusable so
             // keyboard-only users can reach it and drive `onKeyDown` (#79).
             strip.tabIndex = 0;
+            setStripValue(strip, tr.getBoundingClientRect().height);
             // Inline the geometry + pointer-events so the strip works even
             // before SvGrid.css is parsed; the hover tint still comes from
             // the stylesheet. We keep the strip fully inside the gutter

package/dist/selection.js

@@ -522,7 +522,7 @@ export function createSelection(ctx) {
         // Also commit a fill-handle drag if one was in progress - the user
         // released the mouse, time to apply the pattern.
         if (ctx.fillDrag)
-            ctx.onFillPointerUp();
+            ctx.onFillPointerUp(event);
         if (ctx.moveDrag)
             ctx.onMovePointerUp(event);
     }

package/dist/server-block-cache.d.ts

@@ -161,6 +161,11 @@ export type BlockCache<TData> = {
     lastRowKnown(): boolean;
     /** Re-fetch the blocks that failed. */
     retryFailed(): void;
+    /**
+     * Re-fetch the failed block holding `rowIndex`, and only that one; the
+     * Retry on a failed row. A row whose block has not failed is a no-op.
+     */
+    retryFailedAt(rowIndex: number): void;
     /**
      * Re-fetch the loaded blocks in place, keeping the row count and scroll
      * position. What you want after a mutation lands on the server.

package/dist/server-block-cache.js

@@ -353,6 +353,14 @@ export function createBlockCache(options) {
             if (any)
                 emit();
         },
+        retryFailedAt(rowIndex) {
+            const index = blockOf(Math.max(0, rowIndex));
+            if (blocks.get(index)?.status !== 'failed')
+                return;
+            blocks.delete(index);
+            ensureBlock(index);
+            emit();
+        },
         refresh() {
             // Keep the count and the scroll position: drop the DATA, re-request the
             // same blocks. The user sees skeletons where they were, not a jump home.

package/dist/server-data-source.d.ts

@@ -60,10 +60,18 @@ export type ServerFilterModel = {
      */
     expression?: GridPredicateExpr;
 };
-/** A value column to roll up per group. */
+/** The aggregate functions every backend helper understands. */
+export type ServerAggFn = 'sum' | 'avg' | 'min' | 'max' | 'count';
+/**
+ * One value column to roll up per group. `fn` is one of the five built-ins
+ * or any name your backend knows (`median`, `countDistinct`, a domain
+ * aggregate): the request carries it untouched. The SvelteKit planner emits
+ * only the built-ins plus the names it was told to allow, since `fn` ends
+ * up in SQL.
+ */
 export type ServerAggregation = {
     col: string;
-    fn: 'sum' | 'avg' | 'min' | 'max' | 'count';
+    fn: ServerAggFn | (string & {});
 };
 /**
  * One range of rows as the grid asks for it. A flat request carries the
@@ -121,6 +129,16 @@ export type ServerRequest = {
      * transport posts the whole request to your endpoint.
      */
     context?: unknown;
+    /**
+     * Aborted when the grid no longer wants the answer: the block was purged
+     * or evicted, the sort or filter changed, a group was collapsed, the
+     * controller was disposed. Hand it to `fetch` and a query the user has
+     * scrolled past is cancelled at the server instead of completing for
+     * nothing; a rejection carrying the abort is ignored by the grid. Not
+     * serialisable - the SvelteKit transport reads it and leaves it out of
+     * the body.
+     */
+    signal?: AbortSignal;
 };
 /**
  * A group row in the server-side group/tree model - one distinct key at a
@@ -227,12 +245,26 @@ export type ServerPlaceholderRow = {
     readonly kind: 'placeholder';
     readonly state: 'loading' | 'failed';
 };
+/**
+ * The detail panel under a leaf whose detail is open: master-detail on a
+ * server-side row model. The grid draws it through `renderDetailRow`
+ * (mark it with `isDetailRow`); `master` is the leaf it belongs to.
+ */
+export type ServerDetailRow<TData> = {
+    kind: 'detail';
+    id: string;
+    level: number;
+    route?: string[];
+    /** The leaf's id, as `getRowId` names it. */
+    masterId: string;
+    master: TData;
+};
 /**
  * Every row a server row model can put on screen. Each carries an `id` and
  * a `level`. The block-cached model adds {@link ServerPlaceholderRow} for
  * rows not yet loaded - see its own `ServerRowModelDisplayRow`.
  */
-export type ServerDisplayRow<TData> = ServerGroupRow<TData> | ServerLeafRow<TData> | ServerMoreRow | ServerFooterRow<TData> | ServerSkeletonRow | ServerGrandTotalRow<TData>;
+export type ServerDisplayRow<TData> = ServerGroupRow<TData> | ServerLeafRow<TData> | ServerDetailRow<TData> | ServerMoreRow | ServerFooterRow<TData> | ServerSkeletonRow | ServerGrandTotalRow<TData>;
 /**
  * What `getRows` answers with: the rows for the requested range and the
  * count after filtering, plus the grand total and the pivot fields when

package/dist/server-data-source.js

@@ -30,6 +30,8 @@ export function createServerDataSource(source, options) {
     // Monotonic request id: only the latest fetch is allowed to land, so a slow
     // response for an old sort/filter can't clobber a newer one.
     let requestSeq = 0;
+    /** The page fetch in flight; a newer one, or dispose, aborts it. */
+    let pageAbort = null;
     let disposed = false;
     // Once per controller: a misconfigured backend would otherwise log on every
     // page, scroll and filter change.
@@ -65,7 +67,7 @@ export function createServerDataSource(source, options) {
             maxConcurrentRequests: options.maxConcurrentRequests,
             blockLoadDebounceMs: options.blockLoadDebounceMs,
             initialRowCount: options.initialRowCount,
-            fetch: async (startRow, endRow) => {
+            fetch: async (startRow, endRow, signal) => {
                 const result = await source.getRows({
                     startRow,
                     endRow,
@@ -78,6 +80,7 @@ export function createServerDataSource(source, options) {
                     groupBy: [],
                     groupKeys: [],
                     aggregations: [],
+                    signal,
                 });
                 noteExpressionApplied(result);
                 return { rows: result.rows, rowCount: result.rowCount };
@@ -121,6 +124,9 @@ export function createServerDataSource(source, options) {
         if (disposed)
             return;
         const id = ++requestSeq;
+        pageAbort?.abort();
+        const controller = new AbortController();
+        pageAbort = controller;
         state.loading = true;
         state.error = null;
         emit();
@@ -138,6 +144,7 @@ export function createServerDataSource(source, options) {
                 groupBy: [],
                 groupKeys: [],
                 aggregations: [],
+                signal: controller.signal,
             });
             if (disposed || id !== requestSeq)
                 return; // stale
@@ -322,7 +329,7 @@ export function createServerDataSource(source, options) {
         getRowId: options.getRowId ? (row) => options.getRowId(row) : undefined,
         // Only infinite mode has unloaded rows to stand in for.
         rowPlaceholder: infinite ? (row) => rowPlaceholderState(row) : undefined,
-        retryRow: infinite ? () => cache?.retryFailed() : undefined,
+        retryRow: infinite ? (_row, rowIndex) => cache?.retryFailedAt(rowIndex) : undefined,
         /**
          * A getter, not a snapshot: the grid re-reads this after every change
          * notification, and a frozen object would leave the pager on page 1
@@ -392,6 +399,8 @@ export function createServerDataSource(source, options) {
         getState: () => ({ ...state }),
         dispose() {
             disposed = true;
+            pageAbort?.abort();
+            pageAbort = null;
             cache?.dispose();
             cache = null;
             // An in-flight fetch's resolution short-circuits on `disposed`, so it

package/dist/server.d.ts

@@ -8,6 +8,6 @@
  * a worker feeding a block cache, or `@svgrid/enterprise`'s own row model,
  * whose unit tests run without the Svelte compiler.
  */
-export { createServerDataSource, type ServerDataSource, type ServerSelectionRule, type ServerRequest, type ServerResult, type ServerController, type ServerControllerOptions, type ServerState, type ServerSortModel, type ServerFilterModel, type ServerAggregation, type ServerGroupRow, type ServerLeafRow, type ServerMoreRow, type ServerFooterRow, type ServerSkeletonRow, type ServerGrandTotalRow, type ServerPlaceholderRow, type ServerDisplayRow, } from './server-data-source.js';
+export { createServerDataSource, type ServerDataSource, type ServerSelectionRule, type ServerRequest, type ServerResult, type ServerController, type ServerControllerOptions, type ServerState, type ServerSortModel, type ServerFilterModel, type ServerAggFn, type ServerAggregation, type ServerGroupRow, type ServerLeafRow, type ServerMoreRow, type ServerFooterRow, type ServerSkeletonRow, type ServerGrandTotalRow, type ServerPlaceholderRow, type ServerDisplayRow, type ServerDetailRow, } from './server-data-source.js';
 export { createBlockCache, createRowPlaceholder, rowPlaceholderState, type BlockCache, type BlockCacheOptions, type BlockCacheState, type BlockFetchResult, type BlockState, } from './server-block-cache.js';
 export { toServerFilterColumns, type GridRowModel, type GridFilterState, type GridRowModelSort, } from './row-model.js';

package/dist/sparkline.js

@@ -38,13 +38,15 @@ export function buildSparkline(values, cfg = {}) {
         const barW = Math.max(1, slot - gap);
         const mid = height / 2;
         const h = innerH / 2;
-        const bars = values.map((v, i) => {
+        const bars = [];
+        values.forEach((v, i) => {
             const x = pad + i * slot + (slot - barW) / 2;
+            // A win/loss sparkline marks a win up and a loss down; a zero is a
+            // blank gap, no mark at all, the way Excel draws one.
             if (v > 0)
-                return { x, y: mid - h, w: barW, h, negative: false };
-            if (v < 0)
-                return { x, y: mid, w: barW, h, negative: true };
-            return { x, y: mid - 1, w: barW, h: 2, negative: false };
+                bars.push({ x, y: mid - h, w: barW, h, negative: false });
+            else if (v < 0)
+                bars.push({ x, y: mid, w: barW, h, negative: true });
         });
         return { ...base, linePath: '', areaPath: '', bars, lastPoint: null };
     }

package/dist/svgrid-wrapper.types.d.ts

@@ -151,6 +151,12 @@ export type SvGridTransactionResult = {
  * the component.
  */
 export type SvGridApi<TFeatures extends TableFeatures, TData extends RowData> = {
+    /**
+     * The grid's root element (`.sv-grid-root`), or null before mount and
+     * after unmount. For measuring, focusing, or reading the theme the grid
+     * is drawn with - the PDF export takes its colours from here.
+     */
+    getElement(): HTMLElement | null;
     /** Read a cell value from the underlying data at `rowIndex`. */
     getCellValue(rowIndex: number, columnId: string): unknown;
     /** Write a cell value through the column's field. */
@@ -413,6 +419,15 @@ export type SvGridApi<TFeatures extends TableFeatures, TData extends RowData> =
     getDisplayedRows(): ReadonlyArray<TData>;
     /** Snapshot of the current data array (pre-pipeline). */
     getData(): ReadonlyArray<TData>;
+    /**
+     * The stable id the grid keys a row by: what the `getRowId` prop
+     * computed, or the row's position when no `getRowId` is set. Pass a
+     * display index (the space `getActiveCell`, `scrollToRow` and the cell
+     * methods use) or a row object; returns null for an unknown index or a
+     * row that is not in the data. Pair with `selectRows`, `toggleRowSelected`
+     * or an `applyTransaction` remove, all of which take these ids.
+     */
+    getRowId(row: number | TData): string | null;
     /**
      * Snapshot of every column the grid currently knows about, in visual
      * order, with the human-readable header label. Use this when exporting
@@ -560,6 +575,24 @@ export type SvGridApi<TFeatures extends TableFeatures, TData extends RowData> =
     canRedo(): boolean;
     /** Wipe both stacks (e.g. after a server save commits the buffer). */
     clearHistory(): void;
+    /**
+     * Mark every step recorded from now on with `tag`, until the next call;
+     * `undefined` stops the marking. The grid never reads the tag. It is for a
+     * consumer that shows one of several data sets through the grid (a
+     * workbook's sheets, say) and has to know which one the next Ctrl+Z would
+     * change before it lets the grid apply it: it tags the steps with the data
+     * set they were made on and asks `peekUndo` first.
+     */
+    setHistoryTag(tag: unknown): void;
+    /** The step the next `undo()` would apply, or null when there is none. A
+     *  multi-cell action carries one tag, so it reports as one. */
+    peekUndo(): {
+        tag: unknown;
+    } | null;
+    /** The step the next `redo()` would apply, or null when there is none. */
+    peekRedo(): {
+        tag: unknown;
+    } | null;
     /**
      * The same `GridCommandContext` a registered shortcut handler receives.
      *

package/dist/validate.js

@@ -21,7 +21,15 @@ export function validateGridConfig(input) {
     // (a key absent from row 0 but present later) does not trip it. A row
     // model shows placeholder rows before its first block lands; those carry
     // no data keys at all and say nothing about the columns.
-    const sample = (input.data ?? []).filter((row) => !rowPlaceholderState(row)).slice(0, FIELD_SAMPLE_ROWS);
+    // Stops at the sample size: this runs on every data change, and a filter
+    // over all the rows first was O(n) per tick on a live feed.
+    const sample = [];
+    for (const row of input.data ?? []) {
+        if (sample.length >= FIELD_SAMPLE_ROWS)
+            break;
+        if (!rowPlaceholderState(row))
+            sample.push(row);
+    }
     // Under server-side grouping the first rows are group rows, which carry
     // a key and aggregates and none of the leaf fields; nothing to judge by.
     if (sample.length && !input.serverGroup) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svgrid/grid",
-  "version": "3.0.5",
+  "version": "3.0.6",
   "description": "Svelte 5-native data grid and data table. Headless-first engine with virtual scrolling for 100k+ rows, Excel-style filtering, inline editing, grouping, tree data, pivot, and server-side data. Drop-in <SvGrid> component. TypeScript, SSR-ready.",
   "author": "jQWidgets <boikom@jqwidgets.com>",
   "license": "MIT",
@@ -94,6 +94,11 @@
       "svelte": "./dist/filtering/excel-filters.js",
       "import": "./dist/filtering/excel-filters.js"
     },
+    "./sparkline": {
+      "types": "./dist/sparkline.d.ts",
+      "svelte": "./dist/sparkline.js",
+      "import": "./dist/sparkline.js"
+    },
     "./shortcuts": {
       "types": "./dist/shortcut-registry.d.ts",
       "svelte": "./dist/shortcut-registry.js",

package/src/GridMenus.svelte

@@ -214,6 +214,19 @@
     });
   }
 
+  /**
+   * Whether a column's active filter operator is one of the set operators,
+   * read at event time from component state: the condition input's focus
+   * and blur handlers cannot depend on a template `@const`, because blur
+   * also fires while the popover is being torn down, after that const's
+   * effect is gone.
+   */
+  function isSetOperatorFor(colId: string): boolean {
+    const column = allColumns.find((c) => c.id === colId);
+    const op = filterMenuValues[colId]?.operator ?? defaultOperatorFor(column);
+    return op === "in" || op === "notIn";
+  }
+
   /** Enter anywhere in the panel means "done" - filtering is already live. */
   function onFilterPanelKeydown(event: KeyboardEvent) {
     if (event.key !== "Enter" || event.shiftKey) return;
@@ -286,8 +299,23 @@
   const saveComment = $derived(ctrl.saveComment);
   const removeComment = $derived(ctrl.removeComment);
   const closeCommentEditor = $derived(ctrl.closeCommentEditor);
+
+  function onContextMenuKeydown(event: KeyboardEvent) {
+    // Escape closes the context menu, the way every spreadsheet and desktop
+    // app does. The backdrop closes it on a click, but a keyboard user who
+    // opened it (Shift+F10, the Menu key) otherwise has no way out, and the
+    // menu sits over the sheet swallowing every other key. Handled at the
+    // window so it works whatever holds focus while the menu is open.
+    if (contextMenuFor && (event.key === "Escape" || event.key === "Esc")) {
+      event.preventDefault();
+      event.stopPropagation();
+      closeContextMenu();
+    }
+  }
 </script>
 
+<svelte:window onkeydown={onContextMenuKeydown} />
+
   {#if tooltip}
     <!-- Custom hover tooltip. Floats above the grid; positioned by
          showTooltipFor(). Notes and column tooltips both surface here. -->
@@ -396,10 +424,12 @@
               : menuActiveOperator === "regex"
                 ? "Pattern..."
                 : "Filter value..."}
-          onfocus={isSetOp
-            ? (event) => onSetOpFilterFocus(event.currentTarget as HTMLInputElement, colId)
-            : undefined}
-          onblur={isSetOp ? () => closeInSuggest() : undefined}
+          onfocus={(event) => {
+            if (isSetOperatorFor(colId)) onSetOpFilterFocus(event.currentTarget as HTMLInputElement, colId);
+          }}
+          onblur={() => {
+            if (isSetOperatorFor(colId)) closeInSuggest();
+          }}
           oninput={(event) => {
             const input = event.currentTarget as HTMLInputElement;
             updateFilterMenuValue(colId, input.value);