@svgrid/grid 3.0.5 → 3.0.7

package/dist/editing.js

@@ -133,6 +133,22 @@ export function createEditing(ctx) {
         // belongs to the same Ctrl+Z as the value.
         runHistoryGroup(ctx, () => commitEditingCell());
     }
+    /**
+     * True when a column with `rejectInvalid` refuses `value`: its `validate`
+     * hook returns `false` or a message. Without the flag nothing is refused.
+     */
+    function editRejected(column, value, rowData) {
+        const def = column?.columnDef;
+        if (!def?.rejectInvalid || typeof def.validate !== "function")
+            return false;
+        const verdict = def.validate({
+            value,
+            row: rowData,
+            rowIndex: ctx.internalData.indexOf(rowData),
+            column,
+        });
+        return verdict === false || (typeof verdict === "string" && verdict.length > 0);
+    }
     function commitEditingCell() {
         if (!ctx.editingCell)
             return;
@@ -165,6 +181,12 @@ export function createEditing(ctx) {
                     columnId: ctx.editingCell.columnId,
                 });
             }
+            // A refused edit closes the editor and leaves the row, the overlay,
+            // the history and the consumer untouched.
+            if (editRejected(column, finalValue, rowData)) {
+                ctx.editingCell = null;
+                return;
+            }
             rowData[column.columnDef.field] = finalValue;
         }
         const key = getCellKey(ctx.editingCell.rowId, ctx.editingCell.columnId);
@@ -764,6 +786,8 @@ export function createEditing(ctx) {
                     columnId: column.id,
                 })
                 : parsed;
+            if (editRejected(column, finalValue, row.original))
+                continue;
             if (oldValue !== finalValue) {
                 row.original[field] = finalValue;
                 const key = getCellKey(fr.rowId, column.id);

package/dist/export-format.d.ts

@@ -21,6 +21,14 @@ export { computeColumnStat, contrastText, formatsNeedingStats, resolveCellFormat
 /** Best-effort coercion of a cell value to a Date. Accepts Date, epoch ms
  *  numbers, and parseable date strings. Returns null when it isn't a date. */
 export declare function coerceExportDate(value: unknown): Date | null;
+/**
+ * A Date as ISO 8601 in LOCAL time with its offset, e.g.
+ * `2024-01-15T00:00:00.000+02:00`. Text exports used `toISOString()`, which
+ * is UTC: local midnight on the 15th came out as `2024-01-14T22:00:00.000Z`
+ * east of UTC, and anything reading the date part got the wrong day (#103).
+ * Same instant, but the date part is the one the grid showed.
+ */
+export declare function toLocalIsoString(d: Date): string;
 /**
  * Format a raw cell value to its on-screen display string using the column's
  * `format` config. Mirrors the grid's own numeric / currency / percent / date

package/dist/export-format.js

@@ -1,4 +1,4 @@
-import { formatNumericWithConfig, getDateFormatter, resolveDatePattern, } from './cell-formatting.js';
+import { formatNumericWithConfig, getDateFormatter, parseDateValue, resolveDatePattern, } from './cell-formatting.js';
 // Re-export the pure conditional-formatting engine here too, so the
 // Svelte-free `@svgrid/grid/format` subpath carries it for @svgrid/enterprise's
 // export code (which must not pull in SvGrid.svelte).
@@ -6,17 +6,24 @@ export { computeColumnStat, contrastText, formatsNeedingStats, resolveCellFormat
 /** Best-effort coercion of a cell value to a Date. Accepts Date, epoch ms
  *  numbers, and parseable date strings. Returns null when it isn't a date. */
 export function coerceExportDate(value) {
-    if (value instanceof Date)
-        return Number.isNaN(value.getTime()) ? null : value;
-    if (typeof value === 'number' && Number.isFinite(value)) {
-        const d = new Date(value);
-        return Number.isNaN(d.getTime()) ? null : d;
-    }
-    if (typeof value === 'string' && value.trim() !== '') {
-        const d = new Date(value);
-        return Number.isNaN(d.getTime()) ? null : d;
-    }
-    return null;
+    return parseDateValue(value);
+}
+/**
+ * A Date as ISO 8601 in LOCAL time with its offset, e.g.
+ * `2024-01-15T00:00:00.000+02:00`. Text exports used `toISOString()`, which
+ * is UTC: local midnight on the 15th came out as `2024-01-14T22:00:00.000Z`
+ * east of UTC, and anything reading the date part got the wrong day (#103).
+ * Same instant, but the date part is the one the grid showed.
+ */
+export function toLocalIsoString(d) {
+    const pad = (n, w = 2) => String(Math.abs(n)).padStart(w, '0');
+    const offset = -d.getTimezoneOffset();
+    const sign = offset < 0 ? '-' : '+';
+    const year = d.getFullYear();
+    return ((year < 0 ? '-' + pad(year, 6) : pad(year, 4)) +
+        `-${pad(d.getMonth() + 1)}-${pad(d.getDate())}` +
+        `T${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}.${pad(d.getMilliseconds(), 3)}` +
+        `${sign}${pad(Math.floor(Math.abs(offset) / 60))}:${pad(Math.abs(offset) % 60)}`);
 }
 /**
  * Format a raw cell value to its on-screen display string using the column's
@@ -190,7 +197,7 @@ function csvCell(value, delimiter) {
     const s = value == null
         ? ''
         : value instanceof Date
-            ? value.toISOString()
+            ? toLocalIsoString(value)
             : String(value);
     if (s === '')
         return s;
@@ -231,7 +238,7 @@ const HTML_ESCAPE = {
     "'": '&#39;',
 };
 function htmlCell(value) {
-    const s = value == null ? '' : value instanceof Date ? value.toISOString() : String(value);
+    const s = value == null ? '' : value instanceof Date ? toLocalIsoString(value) : String(value);
     return s.replace(/[&<>"']/g, (c) => HTML_ESCAPE[c]);
 }
 /**
@@ -311,7 +318,7 @@ export async function serializeJson(rows, fields, opts = {}) {
 }
 /** Escape a Markdown table cell: pipes and newlines would break the row. */
 function mdCell(value) {
-    const s = value == null ? '' : value instanceof Date ? value.toISOString() : String(value);
+    const s = value == null ? '' : value instanceof Date ? toLocalIsoString(value) : String(value);
     return s.replace(/\\/g, '\\\\').replace(/\|/g, '\\|').replace(/\r?\n/g, '<br>');
 }
 /**
@@ -351,7 +358,7 @@ const XML_ESCAPE = {
     "'": '&apos;',
 };
 function xmlText(value) {
-    const s = value == null ? '' : value instanceof Date ? value.toISOString() : String(value);
+    const s = value == null ? '' : value instanceof Date ? toLocalIsoString(value) : String(value);
     // Stripping control characters is the point: XML 1.0 forbids them outright,
     // so a stray \x00 from a data source would produce an unopenable file.
     // eslint-disable-next-line no-control-regex

package/dist/grid-messages.d.ts

@@ -76,6 +76,10 @@ export type GridChromeMessages = {
     chartRange: string;
     rowLoadFailed: string;
     rowLoadRetry: string;
+    expandGroup: string;
+    collapseGroup: string;
+    openDetail: string;
+    closeDetail: string;
     pivotUpsellTitle: string;
     pivotUpsellBody: string;
     ganttUpsellTitle: string;

package/dist/grid-messages.js

@@ -86,6 +86,10 @@ export const defaultGridMessages = {
     chartRange: 'Chart selected range',
     rowLoadFailed: 'Could not load these rows.',
     rowLoadRetry: 'Retry',
+    expandGroup: 'Expand group',
+    collapseGroup: 'Collapse group',
+    openDetail: 'Open details',
+    closeDetail: 'Close details',
     pivotUpsellTitle: 'Pivot mode',
     pivotUpsellBody: 'Pivot mode is an Enterprise feature. Install @svgrid/enterprise and call enablePivot() to use it.',
     ganttUpsellTitle: 'Gantt view',

package/dist/headless.d.ts

@@ -27,3 +27,8 @@ export { columnFilteringFeature, columnGroupingFeature, createCoreRowModel, crea
 export { createGrid, createSvGrid, type SvelteGrid } from './createGrid.svelte.js';
 export { createGridState, createSvGridState } from './createGridState.svelte.js';
 export { subscribeGrid, subscribeSvGrid } from './subscribe.js';
+export { createVirtualizer } from './virtualization/virtualizer.js';
+export { createSvelteVirtualizer } from './virtualization/svelte-virtualizer.svelte.js';
+export { createColumnVirtualizer } from './virtualization/column-virtualizer.js';
+export type { VirtualItem, VirtualizerOptions, VirtualizerState } from './virtualization/types.js';
+export { getGridCellDomId, getGridCellA11yProps, getGridHeaderA11yProps, getGridRootA11yProps, getGridRowA11yProps, type GridCellA11yInput, type GridColumnA11yInput, type GridSortDirection, } from './a11y.js';

package/dist/headless.js

@@ -27,3 +27,15 @@ export { columnFilteringFeature, columnGroupingFeature, createCoreRowModel, crea
 export { createGrid, createSvGrid } from './createGrid.svelte.js';
 export { createGridState, createSvGridState } from './createGridState.svelte.js';
 export { subscribeGrid, subscribeSvGrid } from './subscribe.js';
+// The virtualizers are pure window arithmetic (scroll offset in, visible
+// range out) with no DOM of their own, and a custom renderer over 50k rows
+// needs one. They were only on the barrel, so the Headless demos imported
+// the barrel to reach them and paid for the whole thing.
+export { createVirtualizer } from './virtualization/virtualizer.js';
+export { createSvelteVirtualizer } from './virtualization/svelte-virtualizer.svelte.js';
+export { createColumnVirtualizer } from './virtualization/column-virtualizer.js';
+// The WAI-ARIA attribute factories: plain objects to spread onto your own
+// markup (`role`, `aria-sort`, `aria-rowindex`, ...). No DOM is touched here
+// either; a custom renderer that wants keyboard navigation reads
+// `activeCell` from the store and spreads these.
+export { getGridCellDomId, getGridCellA11yProps, getGridHeaderA11yProps, getGridRootA11yProps, getGridRowA11yProps, } from './a11y.js';

package/dist/history.d.ts

@@ -38,6 +38,15 @@ export type HistoryStep = {
         undo: () => void;
         redo: () => void;
     };
+    /**
+     * The consumer's own mark on the step, copied from `api.setHistoryTag` at
+     * the moment it is recorded. The grid never reads it: it is there for a
+     * consumer that shows one of several data sets through the grid and has
+     * to know which one a step belongs to before it lets Ctrl+Z apply it (a
+     * workbook with several sheets, say). Kept as given, so an object tag
+     * compares by identity. Not serialised.
+     */
+    tag?: unknown;
 };
 /** Ctx surface these helpers touch. The controller satisfies it structurally. */
 type HistoryCtx = {
@@ -49,8 +58,20 @@ type HistoryCtx = {
      *  inside it joins that group, so a command does not have to thread a group
      *  id down through the writers it calls. */
     historyGroupId: string | undefined;
+    /** Stamped on every step recorded while it is set; see `HistoryStep.tag`. */
+    historyTag?: unknown;
     applyHistoryStep(step: HistoryStep, direction: 'undo' | 'redo'): void;
 };
+/** 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 declare function peekUndoHistory(ctx: HistoryCtx): {
+    tag: unknown;
+} | null;
+/** The redo counterpart of `peekUndoHistory`. */
+export declare function peekRedoHistory(ctx: HistoryCtx): {
+    tag: unknown;
+} | null;
 /** Undo one action. Returns false when there is nothing left to undo. */
 export declare function undoHistory(ctx: HistoryCtx): boolean;
 /** Redo one action. Returns false when there is nothing left to redo. */

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