@svgrid/grid 3.0.4 → 3.0.6

package/src/clipboard.ts

@@ -100,9 +100,9 @@ export function createClipboard<
     if (before !== value) steps.push({ rowId: row.id, columnId, field, before, after: value });
   }
 
-  function applyFillPattern() {
+  function applyFillPattern(toggled = false) {
     const steps: HistoryStep[] = [];
-    runHistoryGroup(ctx, () => applyFillCells(steps));
+    runHistoryGroup(ctx, () => applyFillCells(steps, toggled));
     if (steps.length) pushHistory(ctx, steps, nextGroupId());
   }
 
@@ -117,7 +117,7 @@ export function createClipboard<
     pattern: unknown[],
     i: number,
     sourceStart: number,
-    targetStart: number,
+    at: number,
     step: 1 | -1,
     axis: "rows" | "cols",
     rowIndex: number,
@@ -126,7 +126,10 @@ export function createClipboard<
     const hook = ctx.props.processCellForFill;
     if (hook && sources.length) {
       const k = i % sources.length;
-      const distance = (targetStart + step * i) - (sourceStart + step * k);
+      // The real distance to the cell being filled, which is not i when a
+      // row the fill skips lies between: a formula moves by the rows it
+      // actually travelled.
+      const distance = at - (sourceStart + step * k);
       const delta = axis === "rows" ? { rows: distance, cols: 0 } : { rows: 0, cols: distance };
       const decided = hook({ value: sources[k], delta, rowIndex, columnId });
       if (decided !== undefined) return decided;
@@ -169,7 +172,18 @@ export function createClipboard<
     applyFillPattern();
   }
 
-  function applyFillCells(steps: HistoryStep[]) {
+  /** The fill's values the other way round from the pattern's default. */
+  function toggledPattern(sources: unknown[], count: number): unknown[] {
+    if (sources.length === 1 && typeof sources[0] === 'number' && Number.isFinite(sources[0])) {
+      return Array.from({ length: count }, (_, i) => (sources[0] as number) + i + 1);
+    }
+    return Array.from({ length: count }, (_, i) => sources[i % sources.length]);
+  }
+
+  function applyFillCells(steps: HistoryStep[], toggled = false) {
+    const pattern = (sources: unknown[], count: number) => (toggled ? toggledPattern(sources, count) : buildFillPattern(sources, count));
+    const includeCollapsed = ctx.props.includeCollapsedRows as ((rowIndex: number) => boolean) | undefined;
+    const skipsRow = (r: number) => ctx.isRowCollapsed?.(r) === true && !(includeCollapsed?.(r) ?? false);
     const d = ctx.fillDrag;
     if (!d) return;
     // Clear fillDrag FIRST so a thrown error doesn't leave the grid
@@ -197,27 +211,30 @@ export function createClipboard<
         for (let r = d.sourceMinRow; r <= d.sourceMaxRow; r += 1) {
           sourceColValues.push(readCellRaw(r, column.id));
         }
+        // A collapsed row the consumer does not count (a filtered row in a
+        // spreadsheet) is neither written nor a step of the series: the
+        // pattern runs over the rows that are there, as Excel's does.
         if (newMaxRow > d.sourceMaxRow) {
-          const targetRows = newMaxRow - d.sourceMaxRow;
-          const fills = buildFillPattern(sourceColValues, targetRows);
-          for (let i = 0; i < targetRows; i += 1) {
-            const targetRow = d.sourceMaxRow + 1 + i;
+          const targets: number[] = [];
+          for (let r = d.sourceMaxRow + 1; r <= newMaxRow; r += 1) if (!skipsRow(r)) targets.push(r);
+          const fills = pattern(sourceColValues, targets.length);
+          targets.forEach((targetRow, i) => {
             if (ctx.isCellEditableAt(targetRow, c))
               writeFilled(steps, targetRow, column.id,
-                filledValue(sourceColValues, fills, i, d.sourceMinRow, d.sourceMaxRow + 1, 1, "rows", targetRow, column.id));
-          }
+                filledValue(sourceColValues, fills, i, d.sourceMinRow, targetRow, 1, "rows", targetRow, column.id));
+          });
         }
         if (newMinRow < d.sourceMinRow) {
           // Filling upward - reverse-extrapolate.
           const reversed = sourceColValues.slice().reverse();
-          const targetRows = d.sourceMinRow - newMinRow;
-          const fills = buildFillPattern(reversed, targetRows);
-          for (let i = 0; i < targetRows; i += 1) {
-            const targetRow = d.sourceMinRow - 1 - i;
+          const targets: number[] = [];
+          for (let r = d.sourceMinRow - 1; r >= newMinRow; r -= 1) if (!skipsRow(r)) targets.push(r);
+          const fills = pattern(reversed, targets.length);
+          targets.forEach((targetRow, i) => {
             if (ctx.isCellEditableAt(targetRow, c))
               writeFilled(steps, targetRow, column.id,
-                filledValue(reversed, fills, i, d.sourceMaxRow, d.sourceMinRow - 1, -1, "rows", targetRow, column.id));
-          }
+                filledValue(reversed, fills, i, d.sourceMaxRow, targetRow, -1, "rows", targetRow, column.id));
+          });
         }
       }
     } else if (horizontalExtension) {
@@ -232,25 +249,25 @@ export function createClipboard<
         }
         if (newMaxCol > d.sourceMaxCol) {
           const targetCols = newMaxCol - d.sourceMaxCol;
-          const fills = buildFillPattern(sourceRowValues, targetCols);
+          const fills = pattern(sourceRowValues, targetCols);
           for (let i = 0; i < targetCols; i += 1) {
             const targetCol = d.sourceMaxCol + 1 + i;
             const col = ctx.allColumns[targetCol];
             if (col && ctx.isCellEditableAt(r, targetCol))
               writeFilled(steps, r, col.id,
-                filledValue(sourceRowValues, fills, i, d.sourceMinCol, d.sourceMaxCol + 1, 1, "cols", r, col.id));
+                filledValue(sourceRowValues, fills, i, d.sourceMinCol, targetCol, 1, "cols", r, col.id));
           }
         }
         if (newMinCol < d.sourceMinCol) {
           const reversed = sourceRowValues.slice().reverse();
           const targetCols = d.sourceMinCol - newMinCol;
-          const fills = buildFillPattern(reversed, targetCols);
+          const fills = pattern(reversed, targetCols);
           for (let i = 0; i < targetCols; i += 1) {
             const targetCol = d.sourceMinCol - 1 - i;
             const col = ctx.allColumns[targetCol];
             if (col && ctx.isCellEditableAt(r, targetCol))
               writeFilled(steps, r, col.id,
-                filledValue(reversed, fills, i, d.sourceMaxCol, d.sourceMinCol - 1, -1, "cols", r, col.id));
+                filledValue(reversed, fills, i, d.sourceMaxCol, targetCol, -1, "cols", r, col.id));
           }
         }
       }
@@ -277,8 +294,10 @@ export function createClipboard<
       const minCol = Math.min(anchor.colIndex, focus.colIndex);
       const maxCol = Math.max(anchor.colIndex, focus.colIndex);
       for (let r = minRow; r <= maxRow; r += 1) {
+        if (ctx.isRowCollapsed?.(r)) continue;
         for (let c = minCol; c <= maxCol; c += 1) {
           const col = ctx.allColumns[c];
+          if (col && ctx.collapsedColumns?.[col.id]) continue;
           if (col?.columnDef.field && ctx.isCellEditableAt(r, c)) {
             writeCellRaw(r, col.id, null);
           }
@@ -448,9 +467,15 @@ export function createClipboard<
     ctx.fillDrag = { ...ctx.fillDrag, targetRow: hit.row, targetCol: hit.col };
   }
 
-  function onFillPointerUp() {
+  /**
+   * The release. Excel's Ctrl turns the fill the other way: a series
+   * becomes a copy of the block, and one number, which copies on its own,
+   * becomes a series stepping by one. The modifier is read here, at the
+   * release, so holding Ctrl only at the end still counts, as in Excel.
+   */
+  function onFillPointerUp(event?: PointerEvent) {
     if (!ctx.fillDrag) return;
-    applyFillPattern();
+    applyFillPattern(!!(event && (event.ctrlKey || event.metaKey)));
   }
 
   // ---- Range move / copy (drag the selection border) --------------------
@@ -837,6 +862,7 @@ export function createClipboard<
     const processCell = ctx.props.processCellForClipboard as
       | ((params: { value: unknown; column: unknown; row: unknown; rowIndex: number; columnId: string }) => unknown)
       | undefined;
+    const copyCollapsed = ctx.props.includeCollapsedRows as ((rowIndex: number) => boolean) | undefined;
     const blocks: Array<string> = [];
     for (const rect of rects) {
       const lines: Array<string> = [];
@@ -844,6 +870,7 @@ export function createClipboard<
         const header: Array<string> = [];
         for (let c = rect.minCol; c <= rect.maxCol; c += 1) {
           const column = ctx.allColumns[c];
+          if (column && ctx.collapsedColumns?.[column.id]) continue;
           header.push(column ? toolPanelHeaderLabel(column) : "");
         }
         lines.push(header.join("\t"));
@@ -851,6 +878,13 @@ export function createClipboard<
       for (let r = rect.minRow; r <= rect.maxRow; r += 1) {
         const row = ctx.allRows[r];
         if (!row || isGroupRow(row)) continue;
+        // A collapsed row is folded to nothing: the user cannot see it and
+        // the keyboard walks past it, so a copy leaves it out too. That is
+        // what a spreadsheet does with a filtered row, and it is what makes
+        // "filter, copy, paste" carry the rows that matched. A consumer that
+        // tells hidden from filtered answers per row (`includeCollapsedRows`):
+        // Excel copies a row hidden by hand.
+        if (ctx.isRowCollapsed?.(r) && !copyCollapsed?.(r)) continue;
         const cells: Array<string> = [];
         for (let c = rect.minCol; c <= rect.maxCol; c += 1) {
           const column = ctx.allColumns[c];
@@ -858,6 +892,7 @@ export function createClipboard<
             cells.push("");
             continue;
           }
+          if (ctx.collapsedColumns?.[column.id]) continue;
           const base = getColumnBaseValue(row, column);
           let value: unknown = ctx.getCellDisplayValue(row.id, column.id, base);
           if (processCell) {
@@ -916,6 +951,9 @@ export function createClipboard<
     for (let r = startRow; r <= endRow; r += 1) {
       const row = ctx.allRows[r];
       if (!row || isGroupRow(row)) continue;
+      // A collapsed row is not there as far as the user is concerned, and a
+      // Delete over a filtered block must not wipe what the filter hid.
+      if (ctx.isRowCollapsed?.(r)) continue;
       // By identity, not `Number(row.id)` - that is the array index only under
       // the default getRowId, so a custom one cleared the wrong row.
       const dataIndex = dataIndexOf(row);
@@ -929,6 +967,7 @@ export function createClipboard<
       for (let c = startCol; c <= endCol; c += 1) {
         const column = ctx.allColumns[c];
         if (!column?.columnDef.field) continue;
+        if (ctx.collapsedColumns?.[column.id]) continue;
         if (!ctx.isCellEditableAt(r, c)) continue;
         // Clear means: empty string for text, undefined for everything
         // else. parseEditorValue handles the per-type coercion.

package/src/columns.test.ts

@@ -57,14 +57,14 @@ describe('cellPinStyle', () => {
   it('returns a left sticky style when the column has a left offset', () => {
     const ctx = makeCtx({ pinnedOffsets: { left: { a: 0, b: 120 }, right: {} } })
     const h = createColumns(ctx)
-    expect(h.cellPinStyle('a')).toBe('position: sticky; left: 0px; z-index: 30;')
-    expect(h.cellPinStyle('b')).toBe('position: sticky; left: 120px; z-index: 30;')
+    expect(h.cellPinStyle('a')).toBe('position: sticky; inset-inline-start: 0px; z-index: 30;')
+    expect(h.cellPinStyle('b')).toBe('position: sticky; inset-inline-start: 120px; z-index: 30;')
   })
 
   it('returns a right sticky style when the column has a right offset', () => {
     const ctx = makeCtx({ pinnedOffsets: { left: {}, right: { d: 0 } } })
     const h = createColumns(ctx)
-    expect(h.cellPinStyle('d')).toBe('position: sticky; right: 0px; z-index: 30;')
+    expect(h.cellPinStyle('d')).toBe('position: sticky; inset-inline-end: 0px; z-index: 30;')
   })
 
   it('returns empty string for an unpinned column', () => {
@@ -75,7 +75,7 @@ describe('cellPinStyle', () => {
   it('prefers the left offset when a column appears in both maps', () => {
     const ctx = makeCtx({ pinnedOffsets: { left: { a: 5 }, right: { a: 9 } } })
     const h = createColumns(ctx)
-    expect(h.cellPinStyle('a')).toBe('position: sticky; left: 5px; z-index: 30;')
+    expect(h.cellPinStyle('a')).toBe('position: sticky; inset-inline-start: 5px; z-index: 30;')
   })
 })
 

package/src/columns.ts

@@ -16,13 +16,18 @@ export function createColumns<
     // context (z=20) so a selected cell in the scrollable middle never
     // bleeds over the pinned columns during horizontal scroll. Still
     // sits below dropdowns (z=900+) and the column menu.
+    // Logical insets, not `left` / `right`: the offsets are measured from the
+    // pinned side in READING order, so under `dir="rtl"` the left-pinned
+    // columns have to stick to the right edge. `inset-inline-start` is that
+    // edge in either direction; with `left` a right-to-left grid scrolls its
+    // pinned columns off the screen.
     const leftOffset = ctx.pinnedOffsets.left[columnId];
     if (leftOffset !== undefined) {
-      return `position: sticky; left: ${leftOffset}px; z-index: 30;`;
+      return `position: sticky; inset-inline-start: ${leftOffset}px; z-index: 30;`;
     }
     const rightOffset = ctx.pinnedOffsets.right[columnId];
     if (rightOffset !== undefined) {
-      return `position: sticky; right: ${rightOffset}px; z-index: 30;`;
+      return `position: sticky; inset-inline-end: ${rightOffset}px; z-index: 30;`;
     }
     return "";
   }

package/src/conditional-formatting.test.ts

@@ -83,6 +83,14 @@ describe('resolveCellFormat', () => {
     expect(resolveCellFormat(1, {}, 'c', fmts, null).background).toBeUndefined()
   })
 
+  it('rule carries its icon while it matches', () => {
+    const fmts: ConditionalFormat[] = [
+      { type: 'rule', when: ({ value }) => Number(value) > 100, background: '#dbeafe', icon: '!' },
+    ]
+    expect(resolveCellFormat(150, {}, 'c', fmts, null).icon).toBe('!')
+    expect(resolveCellFormat(50, {}, 'c', fmts, null).icon).toBeUndefined()
+  })
+
   it('respects the columns scope', () => {
     const fmts: ConditionalFormat[] = [
       { type: 'colorScale', min: '#000000', max: '#ffffff', columns: ['other'] },

package/src/conditional-formatting.ts

@@ -102,6 +102,8 @@ export type RuleFormat<TData = unknown> = {
   background?: string
   color?: string
   fontWeight?: string | number
+  /** A short glyph drawn before the value while the rule matches. */
+  icon?: string
 }
 
 export type ConditionalFormatSpec<TData = unknown> =
@@ -323,6 +325,7 @@ export function resolveCellFormat<TData = unknown>(
         }
         if (fmt.color) out.color = fmt.color
         if (fmt.fontWeight != null) out.fontWeight = fmt.fontWeight
+        if (fmt.icon) out.icon = fmt.icon
       }
       continue
     }

package/src/core.rowmodel-cache.test.ts

@@ -119,3 +119,54 @@ describe('row-model cache: selection', () => {
     expect(target.getIsSelected()).toBe(false)
   })
 })
+
+describe('base rows: reuse across a data swap', () => {
+  // The core reads `options.data` and `options.columns` off the object it was
+  // given (the component hands it a reactive one), so a swap is a write there.
+  const grid = () => {
+    const options = {
+      _features: tableFeatures({ rowSelectionFeature }),
+      _rowModels: { coreRowModel: createCoreRowModel<Row>() },
+      columns: COLUMNS as unknown as Array<ColumnDef<ReturnType<typeof tableFeatures>, Row>>,
+      data: makeRows(50),
+      getRowId: (r: Row) => String(r.id),
+    }
+    return { g: createSvGridCore<ReturnType<typeof tableFeatures>, Row>(options), options }
+  }
+
+  it('keeps the row object for a data object that stayed at its index, and rebuilds the rest', () => {
+    const { g, options } = grid()
+    const before = g.getRowModel().rows
+    const data = options.data.slice()
+    // A block landing: forty of fifty entries are the same objects, ten are new.
+    for (let i = 20; i < 30; i += 1) data[i] = { ...data[i]!, name: 'fresh' }
+    options.data = data
+    const after = g.getRowModel().rows
+    expect(after).toHaveLength(50)
+    for (let i = 0; i < 50; i += 1) {
+      if (i >= 20 && i < 30) expect(after[i]).not.toBe(before[i])
+      else expect(after[i]).toBe(before[i])
+    }
+    expect(after[25]!.getCellValueByColumnId('name')).toBe('fresh')
+  })
+
+  it('does not serve a memoised value after the object was changed in place', () => {
+    const { g, options } = grid()
+    const rows = g.getRowModel().rows
+    expect(rows[3]!.getCellValueByColumnId('score')).toBe((3 * 31) % 1000)
+    options.data[3]!.score = 4242
+    options.data = options.data.slice()
+    const again = g.getRowModel().rows
+    expect(again[3]).toBe(rows[3])
+    expect(again[3]!.getCellValueByColumnId('score')).toBe(4242)
+  })
+
+  it('rebuilds every row when the columns change', () => {
+    const { g, options } = grid()
+    const before = g.getRowModel().rows
+    options.columns = [...COLUMNS, { field: 'extra' }] as unknown as typeof options.columns
+    const after = g.getRowModel().rows
+    expect(after[0]).not.toBe(before[0])
+    expect(after[0]!.getAllCells()).toHaveLength(4)
+  })
+})

package/src/core.tick-repair.test.ts

@@ -0,0 +1,287 @@
+/**
+ * A tick - a new data array where a few row objects were replaced - repairs
+ * the filtered and sorted stages' previous output instead of recomputing it,
+ * and the repaired output is exactly what the full pipeline would produce.
+ *
+ * The full pipeline is the oracle: for every case below a second grid is
+ * built fresh from the ticked data and its rows compared, object by object
+ * (same `original`, same order), against the ticked grid's rows. Sort keys
+ * of every kind the sorted stage specialises (number, date, ranked text,
+ * unranked text, a custom comparator), ties, descending, several clauses,
+ * an active filter, and the cases that must NOT repair: an add, a remove, a
+ * replacement whose filter membership flips, and a text value the ranking
+ * has not seen.
+ */
+import { describe, expect, it } from 'vitest'
+import {
+  createCoreRowModel,
+  createFilteredRowModel,
+  createSortedRowModel,
+  createSvGridCore,
+  rowSortingFeature,
+  columnFilteringFeature,
+  tableFeatures,
+  sortFns,
+  type ColumnDef,
+  type SortingState,
+  type ColumnFiltersState,
+} from './core'
+
+type Quote = { id: number; symbol: string; sector: string; price: number; asOf: string; note: string }
+
+const SECTORS = ['Tech', 'Energy', 'Health', 'Finance']
+function makeRows(n: number, seed = 1): Quote[] {
+  let s = seed
+  const rand = () => (s = (s * 1664525 + 1013904223) >>> 0) / 0xffffffff
+  return Array.from({ length: n }, (_, i) => ({
+    id: i,
+    symbol: `S${String(i).padStart(4, '0')}`,
+    sector: SECTORS[Math.floor(rand() * SECTORS.length)]!,
+    // Many ties on purpose: the stable tie-break is the thing to get right.
+    price: Math.round(rand() * 50),
+    asOf: new Date(Date.UTC(2026, 0, 1 + Math.floor(rand() * 200))).toISOString(),
+    note: `n${Math.floor(rand() * 1e6)}`,
+  }))
+}
+
+const features = tableFeatures({ rowSortingFeature, columnFilteringFeature })
+const COLUMNS = [
+  { field: 'id', editorType: 'number' },
+  { field: 'symbol' },
+  { field: 'sector' },
+  { field: 'price', editorType: 'number' },
+  { field: 'asOf', editorType: 'date' },
+  { field: 'note' },
+] as unknown as Array<ColumnDef<typeof features, Quote>>
+
+function makeGrid(
+  data: Quote[],
+  state: { sorting?: SortingState; columnFilters?: ColumnFiltersState },
+  fns: typeof sortFns = sortFns,
+) {
+  let sortRuns = 0
+  const sorted = createSortedRowModel<Quote>(fns)
+  // A live getter, as <SvGrid> passes it: getRowModel reads options.data on
+  // every call, so replacing the array here is what a tick looks like.
+  const ref = { data }
+  const grid = createSvGridCore<typeof features, Quote>({
+    _features: features,
+    _rowModels: {
+      coreRowModel: createCoreRowModel(),
+      filteredRowModel: createFilteredRowModel(),
+      sortedRowModel: (args) => {
+        sortRuns++
+        return sorted(args)
+      },
+    },
+    columns: COLUMNS,
+    get data() {
+      return ref.data
+    },
+    state: { sorting: [], columnFilters: [], ...state },
+  })
+  return { grid, sortRuns: () => sortRuns, set: (next: Quote[]) => (ref.data = next) }
+}
+
+/** The ticked data: the same array with `count` rows replaced by new objects. */
+function tick(data: Quote[], count: number, mutate: (q: Quote, i: number) => Partial<Quote>, seed = 7): Quote[] {
+  let s = seed
+  const rand = () => (s = (s * 1664525 + 1013904223) >>> 0) / 0xffffffff
+  const next = data.slice()
+  const picked = new Set<number>()
+  while (picked.size < count) picked.add(Math.floor(rand() * data.length))
+  for (const i of picked) next[i] = { ...data[i]!, ...mutate(data[i]!, i) }
+  return next
+}
+
+function originals(grid: ReturnType<typeof makeGrid>['grid']) {
+  return grid.getRowModel().rows.map((r) => r.original)
+}
+
+function expectRepairedEqualsFull(
+  before: Quote[],
+  after: Quote[],
+  state: { sorting?: SortingState; columnFilters?: ColumnFiltersState },
+  fns?: typeof sortFns,
+) {
+  const ticked = makeGrid(before, state, fns)
+  ticked.grid.getRowModel()
+  ticked.set(after)
+  const repaired = originals(ticked.grid)
+
+  const oracle = makeGrid(after, state, fns)
+  const full = originals(oracle.grid)
+
+  expect(repaired.length).toBe(full.length)
+  for (let i = 0; i < full.length; i++) {
+    if (repaired[i] !== full[i]) {
+      throw new Error(`row ${i} differs: repaired id=${repaired[i]?.id} price=${repaired[i]?.price}, full id=${full[i]?.id} price=${full[i]?.price}`)
+    }
+  }
+  return ticked
+}
+
+describe('tick repair: sorted stage equals a full sort', () => {
+  const price = (q: Quote) => ({ price: (q.price * 7 + 13) % 50 })
+
+  it('numeric ascending, with ties', () => {
+    const before = makeRows(2000)
+    expectRepairedEqualsFull(before, tick(before, 150, price), { sorting: [{ id: 'price', desc: false }] })
+  })
+
+  it('numeric descending', () => {
+    const before = makeRows(2000)
+    expectRepairedEqualsFull(before, tick(before, 150, price), { sorting: [{ id: 'price', desc: true }] })
+  })
+
+  it('date column', () => {
+    const before = makeRows(1500)
+    expectRepairedEqualsFull(
+      before,
+      tick(before, 90, (q) => ({ asOf: new Date(Date.parse(q.asOf) + 86_400_000 * 37).toISOString() })),
+      { sorting: [{ id: 'asOf', desc: false }] },
+    )
+  })
+
+  it('ranked text (few distinct values) when the new value is a known one', () => {
+    const before = makeRows(2000)
+    expectRepairedEqualsFull(
+      before,
+      tick(before, 120, (q) => ({ sector: SECTORS[(SECTORS.indexOf(q.sector) + 1) % SECTORS.length]! })),
+      { sorting: [{ id: 'sector', desc: false }, { id: 'price', desc: true }] },
+    )
+  })
+
+  it('unranked text (mostly distinct values)', () => {
+    const before = makeRows(1200)
+    expectRepairedEqualsFull(before, tick(before, 60, (q, i) => ({ note: `z${i}-${q.note}` })), {
+      sorting: [{ id: 'note', desc: false }],
+    })
+  })
+
+  it('a custom comparator', () => {
+    const before = makeRows(800)
+    const custom = { ...sortFns, number: (a: unknown, b: unknown) => (Number(b) % 10) - (Number(a) % 10) }
+    expectRepairedEqualsFull(before, tick(before, 40, price), { sorting: [{ id: 'price', desc: false }] }, custom)
+  })
+
+  it('three clauses', () => {
+    const before = makeRows(3000)
+    expectRepairedEqualsFull(before, tick(before, 200, price), {
+      sorting: [{ id: 'sector', desc: true }, { id: 'price', desc: false }, { id: 'id', desc: true }],
+    })
+  })
+
+  it('a replacement that leaves the key unchanged keeps its slot', () => {
+    const before = makeRows(500)
+    expectRepairedEqualsFull(before, tick(before, 30, (q) => ({ note: q.note + '!' })), {
+      sorting: [{ id: 'price', desc: false }],
+    })
+  })
+
+  it('back-to-back ticks repair on top of a repair', () => {
+    const before = makeRows(2000)
+    const t1 = tick(before, 100, price, 3)
+    const t2 = tick(t1, 100, price, 5)
+    const t3 = tick(t2, 100, price, 9)
+    const g = makeGrid(before, { sorting: [{ id: 'price', desc: true }] })
+    g.grid.getRowModel()
+    for (const d of [t1, t2, t3]) g.set(d)
+    const full = originals(makeGrid(t3, { sorting: [{ id: 'price', desc: true }] }).grid)
+    expect(originals(g.grid)).toEqual(full)
+  })
+})
+
+describe('tick repair: filtered stage', () => {
+  const filters: ColumnFiltersState = [{ id: 'sector', value: 'Tech' }]
+
+  it('keeps a replaced row in its slot when it still passes', () => {
+    const before = makeRows(2000)
+    const g = expectRepairedEqualsFull(
+      before,
+      tick(before, 100, (q) => ({ price: q.price + 1 })),
+      { columnFilters: filters, sorting: [{ id: 'price', desc: false }] },
+    )
+    expect(g.sortRuns()).toBe(2)
+  })
+
+  it('falls back to the full pass when a replacement changes membership', () => {
+    const before = makeRows(2000)
+    expectRepairedEqualsFull(
+      before,
+      tick(before, 50, (q) => ({ sector: q.sector === 'Tech' ? 'Energy' : 'Tech' })),
+      { columnFilters: filters, sorting: [{ id: 'price', desc: false }] },
+    )
+  })
+})
+
+describe('tick repair: when it must not happen', () => {
+  it('an add goes through the full pipeline', () => {
+    const before = makeRows(1000)
+    const after = [...before, { ...before[0]!, id: 1000, symbol: 'S1000', price: 25 }]
+    expectRepairedEqualsFull(before, after, { sorting: [{ id: 'price', desc: false }] })
+  })
+
+  it('a remove goes through the full pipeline', () => {
+    const before = makeRows(1000)
+    const after = before.filter((_, i) => i !== 17)
+    expectRepairedEqualsFull(before, after, { sorting: [{ id: 'price', desc: false }] })
+  })
+
+  it('a ranked text column with a value the ranking has not seen', () => {
+    const before = makeRows(2000)
+    expectRepairedEqualsFull(before, tick(before, 10, () => ({ sector: 'Utilities' })), {
+      sorting: [{ id: 'sector', desc: false }],
+    })
+  })
+
+  it('more than a quarter of the rows replaced', () => {
+    const before = makeRows(1000)
+    expectRepairedEqualsFull(before, tick(before, 400, (q) => ({ price: q.price + 3 })), {
+      sorting: [{ id: 'price', desc: false }],
+    })
+  })
+
+  it('a sorting change between ticks', () => {
+    const before = makeRows(1000)
+    const g = makeGrid(before, { sorting: [{ id: 'price', desc: false }] })
+    g.grid.getRowModel()
+    const after = tick(before, 50, (q) => ({ price: q.price + 5 }))
+    g.grid.store.setState((prev) => ({ ...prev, sorting: [{ id: 'price', desc: true }] }))
+    g.set(after)
+    expect(originals(g.grid)).toEqual(originals(makeGrid(after, { sorting: [{ id: 'price', desc: true }] }).grid))
+  })
+
+  it('a new array with every object the same re-reads the rows (the in-place refresh idiom)', () => {
+    // `rows = [...rows]` after mutating objects in place is the documented
+    // refresh (docs/help/cells/view-refresh.md). Nothing was replaced, so
+    // there is no repair; the stages recompute from the current values and
+    // the mutation is picked up.
+    const before = makeRows(200)
+    const g = makeGrid(before, { sorting: [{ id: 'price', desc: false }] })
+    g.grid.getRowModel()
+    before[0]!.price = 999
+    g.set(before.slice())
+    const rows = originals(g.grid)
+    expect(rows[rows.length - 1]).toBe(before[0])
+    expect(g.sortRuns()).toBe(2)
+  })
+
+  it('a kept row is assumed unchanged in value: the immutable-update contract', () => {
+    // Replace one object and mutate another in place in the same tick. The
+    // replaced one lands in sorted position; the mutated one keeps the slot
+    // its old key earned, because the repair only reads the rows it was told
+    // changed. A feed that mutates in place must not mix in replacements, or
+    // must pass a new array with no replacements to refresh.
+    const before = makeRows(200)
+    const g = makeGrid(before, { sorting: [{ id: 'price', desc: false }] })
+    g.grid.getRowModel()
+    const next = before.slice()
+    next[5] = { ...before[5]!, price: 999 }
+    before[7]!.price = -1
+    g.set(next)
+    const rows = originals(g.grid)
+    expect(rows[rows.length - 1]).toBe(next[5])
+    expect(rows[0]).not.toBe(before[7])
+  })
+})