@svgrid/grid 3.0.3 → 3.0.4

package/src/keyboard.ts

@@ -22,6 +22,20 @@ export function getKeyboardIntent(event: KeyboardEvent): GridKeyboardIntent {
   if (event.ctrlKey && event.key === 'Home') return 'gridStart'
   if (event.ctrlKey && event.key === 'End') return 'gridEnd'
 
+  // Ctrl/Cmd + arrow is Excel's "jump to the edge of the data region". The
+  // grid does not implement that itself - it is a paid command registered
+  // through `registerGridShortcuts`, which runs before this function is ever
+  // called. If we get here the key was NOT claimed, and the right answer is to
+  // do nothing: moving one cell is a silently wrong response to a shortcut
+  // every spreadsheet user presses. Alt is excluded so a browser or OS
+  // combination still falls through untouched.
+  if ((event.ctrlKey || event.metaKey) && !event.altKey) {
+    if (
+      event.key === 'ArrowLeft' || event.key === 'ArrowRight' ||
+      event.key === 'ArrowUp' || event.key === 'ArrowDown'
+    ) return 'noop'
+  }
+
   if (event.key === 'ArrowLeft') return 'moveLeft'
   if (event.key === 'ArrowRight') return 'moveRight'
   if (event.key === 'ArrowUp') return 'moveUp'
@@ -95,3 +109,131 @@ export function getNextActiveCell(
     cellId: current.cellId,
   }
 }
+
+export type Collapsed = {
+  isRowCollapsed: (rowIndex: number) => boolean
+  isColumnCollapsed: (colIndex: number) => boolean
+}
+
+/**
+ * Where a move lands once collapsed rows and columns are stepped over.
+ *
+ * A sheet's arrow keys never rest on a hidden row or column: the cursor
+ * goes on in the direction of travel to the next one that shows, and when
+ * nothing shows in that direction it comes back to the nearest one before
+ * the landing, which for End on a sheet whose last columns are hidden is the
+ * last visible column. An axis the move did not touch is left alone, so a
+ * cursor sitting on a row the user has just hidden still moves sideways.
+ * With every cell in the direction of travel hidden the cursor stays put.
+ */
+export function pastCollapsed(
+  from: ActiveCellState,
+  next: ActiveCellState,
+  bounds: { maxRow: number; maxCol: number },
+  collapsed: Collapsed,
+): ActiveCellState {
+  const axis = (fromIdx: number, nextIdx: number, max: number, isCollapsed: (i: number) => boolean) => {
+    if (nextIdx === fromIdx) return nextIdx
+    const dir = nextIdx > fromIdx ? 1 : -1
+    let i = nextIdx
+    while (i >= 0 && i <= max && isCollapsed(i)) i += dir
+    if (i >= 0 && i <= max) return i
+    i = nextIdx - dir
+    while (i !== fromIdx && isCollapsed(i)) i -= dir
+    return i
+  }
+  const rowIndex = axis(from.rowIndex, next.rowIndex, bounds.maxRow, collapsed.isRowCollapsed)
+  const colIndex = axis(from.colIndex, next.colIndex, bounds.maxCol, collapsed.isColumnCollapsed)
+  return rowIndex === next.rowIndex && colIndex === next.colIndex ? next : { rowIndex, colIndex, cellId: next.cellId }
+}
+
+export type EntryIntent = 'moveDown' | 'moveUp' | 'tabNext' | 'tabPrev'
+
+export type EntryRect = { minRow: number; maxRow: number; minCol: number; maxCol: number }
+
+export type EntryStep = {
+  cell: ActiveCellState
+  /** The move stayed inside a multi-cell selection, which is kept. */
+  withinRange: boolean
+  /** The column a run of Tabs began in, for the Enter that ends it. */
+  tabOrigin: number | null
+}
+
+/**
+ * Where Enter and Tab put the cursor, the way a sheet's data entry expects.
+ *
+ * Two rules on top of `getNextActiveCell`. A run of Tabs remembers the
+ * column it started in, and the Enter that ends the run goes down from
+ * THAT column, not from the last cell: type across A1, B1, C1 with Tab and
+ * Enter lands on A2, ready for the next record. Any other move clears the
+ * memory, which the callers do by resetting `tabOrigin` on every plain
+ * `setActiveCell`. And inside a selection of more than one cell the cursor
+ * stays inside it: Enter walks down a column and wraps to the top of the
+ * next, Tab walks along a row and wraps to the start of the next, both
+ * back to the first cell after the last, and the selection is left
+ * standing, so a block can be filled without ever reaching for the mouse.
+ * Arrow keys are not entry keys and never come here.
+ */
+export function getEntryStep(
+  current: ActiveCellState,
+  intent: EntryIntent,
+  opts: { maxRow: number; maxCol: number; tabOrigin: number | null; range: EntryRect | null; collapsed?: Collapsed },
+): EntryStep {
+  const step = entryStep(current, intent, opts)
+  const collapsed = opts.collapsed
+  if (!collapsed) return step
+  const hidden = (c: ActiveCellState) => collapsed.isRowCollapsed(c.rowIndex) || collapsed.isColumnCollapsed(c.colIndex)
+  if (!hidden(step.cell)) return step
+  if (!step.withinRange) return { ...step, cell: pastCollapsed(current, step.cell, opts, collapsed) }
+  // Walking a block: the same step again from the hidden cell, until one
+  // shows. A block with nothing showing leaves the cursor where it is.
+  let cell = step.cell
+  for (let guard = (opts.range!.maxRow - opts.range!.minRow + 1) * (opts.range!.maxCol - opts.range!.minCol + 1); guard > 0 && hidden(cell); guard -= 1) {
+    cell = entryStep(cell, intent, opts).cell
+  }
+  return { ...step, cell: hidden(cell) ? current : cell }
+}
+
+function entryStep(
+  current: ActiveCellState,
+  intent: EntryIntent,
+  opts: { maxRow: number; maxCol: number; tabOrigin: number | null; range: EntryRect | null },
+): EntryStep {
+  const range = opts.range
+  const inRange =
+    range !== null &&
+    (range.maxRow > range.minRow || range.maxCol > range.minCol) &&
+    current.rowIndex >= range.minRow && current.rowIndex <= range.maxRow &&
+    current.colIndex >= range.minCol && current.colIndex <= range.maxCol
+  if (inRange) {
+    let { rowIndex, colIndex } = current
+    if (intent === 'moveDown') {
+      rowIndex += 1
+      if (rowIndex > range.maxRow) { rowIndex = range.minRow; colIndex += 1 }
+      if (colIndex > range.maxCol) colIndex = range.minCol
+    } else if (intent === 'moveUp') {
+      rowIndex -= 1
+      if (rowIndex < range.minRow) { rowIndex = range.maxRow; colIndex -= 1 }
+      if (colIndex < range.minCol) colIndex = range.maxCol
+    } else if (intent === 'tabNext') {
+      colIndex += 1
+      if (colIndex > range.maxCol) { colIndex = range.minCol; rowIndex += 1 }
+      if (rowIndex > range.maxRow) rowIndex = range.minRow
+    } else {
+      colIndex -= 1
+      if (colIndex < range.minCol) { colIndex = range.maxCol; rowIndex -= 1 }
+      if (rowIndex < range.minRow) rowIndex = range.maxRow
+    }
+    return { cell: { rowIndex, colIndex, cellId: current.cellId }, withinRange: true, tabOrigin: null }
+  }
+  const bounds = { maxRow: opts.maxRow, maxCol: opts.maxCol }
+  if (intent === 'tabNext' || intent === 'tabPrev') {
+    return {
+      cell: getNextActiveCell(current, intent, bounds),
+      withinRange: false,
+      tabOrigin: opts.tabOrigin ?? current.colIndex,
+    }
+  }
+  const from = opts.tabOrigin === null ? current : { ...current, colIndex: opts.tabOrigin }
+  return { cell: getNextActiveCell(from, intent, bounds), withinRange: false, tabOrigin: null }
+}

package/src/menus.test.ts

@@ -621,6 +621,32 @@ describe('createMenus - contextMenuItems', () => {
     expect(ctx.clearSelectedCells).toHaveBeenCalled()
   })
 
+  it('an object on a built-in key with no action keeps the built-in, and carries the icon', () => {
+    const icon = { paths: [{ d: 'M2 2h12v12H2z' }] }
+    const ctx = makeCtx({
+      props: { contextMenu: [{ key: 'cut', icon }, { key: 'copy', label: 'Copy cells', icon: 'columns' }] },
+      contextMenuFor: { rowIndex: 0, colIndex: 0, columnId: 'name', rowId: 'r0', row: { id: 0 } },
+    })
+    const items = createMenus(ctx).contextMenuItems()
+    const cut = items.find((i) => i.key === 'cut')!
+    expect(cut.label).toBe('Cut')
+    expect(cut.icon).toBe(icon)
+    cut.run!()
+    expect(ctx.cutSelectionToClipboard).toHaveBeenCalled()
+    const copy = items.find((i) => i.key === 'copy')!
+    expect(copy.label).toBe('Copy cells')
+    expect(copy.icon).toBe('columns')
+  })
+
+  it('an unknown key with no action resolves to an inert item rather than throwing', () => {
+    const ctx = makeCtx({
+      props: { contextMenu: [{ key: 'nothing', label: 'Nothing' }] },
+      contextMenuFor: { rowIndex: 0, colIndex: 0, columnId: 'name', rowId: 'r0', row: { id: 0 } },
+    })
+    const item = createMenus(ctx).contextMenuItems()[0]!
+    expect(item.label).toBe('Nothing')
+    expect(item.run).toBeUndefined()
+  })
   it('row_above / row_below / remove_row mutate internalData', () => {
     const rowA = { id: 1 }
     const rowB = { id: 2 }

package/src/menus.ts

@@ -8,8 +8,10 @@ import {
 import "./sv-grid-scrollbar";
 import { untrack } from "svelte";
 import type {
+  ContextMenuIcon,
   FilterOperator,
 } from "./SvGrid.types";
+import type { GridIconName } from "./grid-icons";
 import {
   clampMenuX,
   cssEscape,
@@ -414,7 +416,7 @@ export function createMenus<
 
   // ---- Right-click context menu --------------------------------------
   type CtxTarget = { rowIndex: number; colIndex: number; columnId: string; rowId: string; row: TData | null };
-  type ResolvedItem = { key: string; label: string; separator?: boolean; disabled?: boolean; run?: () => void };
+  type ResolvedItem = { key: string; label: string; icon?: GridIconName | ContextMenuIcon; separator?: boolean; disabled?: boolean; run?: () => void };
 
   function insertRowAt(t: CtxTarget, offset: number) {
     const data = ctx.internalData.slice() as TData[];
@@ -543,11 +545,16 @@ export function createMenus<
         continue;
       }
       if (entry.hidden?.(target)) continue;
+      // An object on a built-in's key with no action of its own is that
+      // built-in with an icon (or a label) of the consumer's choosing.
+      const b = builtins[entry.key];
+      const builtinLabel = b ? ((b.msg && messages?.[b.msg]) || b.label) : entry.key;
       out.push({
         key: entry.key,
-        label: entry.label,
+        label: entry.label ?? builtinLabel,
+        icon: entry.icon,
         disabled: entry.disabled?.(target) ?? false,
-        run: () => entry.action(target),
+        run: entry.action ? () => entry.action(target) : b ? () => b.run(target) : undefined,
       });
     }
     // Drop leading/trailing/double separators.

package/src/merges.test.ts

@@ -0,0 +1,112 @@
+import { describe, expect, it } from 'vitest'
+import {
+  buildMergeIndex, mergeAt, isCovered, originOf, endOf, expandRectToMerges, stepPastMerge, mergeDrawAt,
+} from './merges'
+
+// A1:C1 (three across), B3:B5 (three down), E5:F6 (two by two).
+const index = buildMergeIndex([
+  { rowIndex: 0, colIndex: 0, rowSpan: 1, colSpan: 3 },
+  { rowIndex: 2, colIndex: 1, rowSpan: 3, colSpan: 1 },
+  { rowIndex: 4, colIndex: 4, rowSpan: 2, colSpan: 2 },
+])
+const bounds = { maxRow: 9, maxCol: 9 }
+
+describe('buildMergeIndex', () => {
+  it('is null for nothing, and drops 1x1 merges', () => {
+    expect(buildMergeIndex([])).toBeNull()
+    expect(buildMergeIndex(undefined)).toBeNull()
+    expect(buildMergeIndex([{ rowIndex: 0, colIndex: 0, rowSpan: 1, colSpan: 1 }])).toBeNull()
+  })
+
+  it('indexes every covered cell to its merge', () => {
+    expect(mergeAt(index, 0, 2)?.colSpan).toBe(3)
+    expect(mergeAt(index, 4, 1)?.rowSpan).toBe(3)
+    expect(mergeAt(index, 5, 5)).toMatchObject({ rowIndex: 4, colIndex: 4 })
+    expect(mergeAt(index, 1, 1)).toBeUndefined()
+    expect(isCovered(index, 0, 0)).toBe(false)
+    expect(isCovered(index, 0, 1)).toBe(true)
+    expect(originOf(index, 5, 5)).toEqual({ rowIndex: 4, colIndex: 4 })
+    expect(originOf(index, 7, 7)).toEqual({ rowIndex: 7, colIndex: 7 })
+    expect(endOf(index, 2, 1)).toEqual({ rowIndex: 4, colIndex: 1 })
+    expect(endOf(index, 7, 7)).toEqual({ rowIndex: 7, colIndex: 7 })
+  })
+})
+
+describe('expandRectToMerges', () => {
+  it('grows a rectangle to hold every merge it touches, to a fixed point', () => {
+    expect(expandRectToMerges(index, { minRow: 0, maxRow: 0, minCol: 1, maxCol: 1 })).toEqual({ minRow: 0, maxRow: 0, minCol: 0, maxCol: 2 })
+    // B4 alone pulls in B3:B5; a rectangle reaching E5 pulls in E5:F6.
+    expect(expandRectToMerges(index, { minRow: 3, maxRow: 3, minCol: 1, maxCol: 1 })).toEqual({ minRow: 2, maxRow: 4, minCol: 1, maxCol: 1 })
+    expect(expandRectToMerges(index, { minRow: 4, maxRow: 4, minCol: 1, maxCol: 4 })).toEqual({ minRow: 2, maxRow: 5, minCol: 1, maxCol: 5 })
+  })
+
+  it('hands the same object back when nothing grows', () => {
+    const rect = { minRow: 7, maxRow: 8, minCol: 7, maxCol: 8 }
+    expect(expandRectToMerges(index, rect)).toBe(rect)
+    expect(expandRectToMerges(null, rect)).toBe(rect)
+  })
+})
+
+describe('stepPastMerge', () => {
+  it('a step into a merge lands on its origin', () => {
+    expect(stepPastMerge(index, { rowIndex: 1, colIndex: 1 }, { rowIndex: 0, colIndex: 1 }, bounds)).toEqual({ rowIndex: 0, colIndex: 0 })
+    expect(stepPastMerge(index, { rowIndex: 5, colIndex: 3 }, { rowIndex: 5, colIndex: 4 }, bounds)).toEqual({ rowIndex: 4, colIndex: 4 })
+  })
+
+  it('a step inside the merge the move began in carries on past its far edge', () => {
+    // Right from A1 (A1:C1) reaches D1, not B1.
+    expect(stepPastMerge(index, { rowIndex: 0, colIndex: 0 }, { rowIndex: 0, colIndex: 1 }, bounds)).toEqual({ rowIndex: 0, colIndex: 3 })
+    // Down from B3 (B3:B5) reaches B6.
+    expect(stepPastMerge(index, { rowIndex: 2, colIndex: 1 }, { rowIndex: 3, colIndex: 1 }, bounds)).toEqual({ rowIndex: 5, colIndex: 1 })
+    // Up from E5 (E5:F6) reaches E4; left reaches D5.
+    expect(stepPastMerge(index, { rowIndex: 4, colIndex: 4 }, { rowIndex: 3, colIndex: 4 }, bounds)).toEqual({ rowIndex: 3, colIndex: 4 })
+    expect(stepPastMerge(index, { rowIndex: 4, colIndex: 4 }, { rowIndex: 4, colIndex: 3 }, bounds)).toEqual({ rowIndex: 4, colIndex: 3 })
+  })
+
+  it('stays on the merge at the sheet edge, and takes the origin of a merge it lands in', () => {
+    expect(stepPastMerge(index, { rowIndex: 0, colIndex: 0 }, { rowIndex: 0, colIndex: 1 }, { maxRow: 9, maxCol: 2 })).toEqual({ rowIndex: 0, colIndex: 0 })
+    const chain = buildMergeIndex([
+      { rowIndex: 0, colIndex: 0, rowSpan: 1, colSpan: 2 },
+      { rowIndex: 0, colIndex: 2, rowSpan: 1, colSpan: 2 },
+    ])
+    expect(stepPastMerge(chain, { rowIndex: 0, colIndex: 0 }, { rowIndex: 0, colIndex: 1 }, bounds)).toEqual({ rowIndex: 0, colIndex: 2 })
+  })
+
+  it('is a pass-through without merges or outside them', () => {
+    expect(stepPastMerge(null, { rowIndex: 0, colIndex: 0 }, { rowIndex: 0, colIndex: 1 }, bounds)).toEqual({ rowIndex: 0, colIndex: 1 })
+    expect(stepPastMerge(index, { rowIndex: 7, colIndex: 7 }, { rowIndex: 7, colIndex: 8 }, bounds)).toEqual({ rowIndex: 7, colIndex: 8 })
+  })
+})
+
+describe('mergeDrawAt', () => {
+  const all = { firstRow: 0, lastRow: 9, firstCol: 0, lastCol: 9 }
+
+  it('the origin draws with its spans and the covered cells are skipped', () => {
+    expect(mergeDrawAt(index, 0, 0, all)).toEqual({ kind: 'origin', merge: index!.list[0], rowSpan: 1, colSpan: 3 })
+    expect(mergeDrawAt(index, 0, 1, all)).toEqual({ kind: 'skip' })
+    expect(mergeDrawAt(index, 4, 5, all)).toEqual({ kind: 'skip' })
+    expect(mergeDrawAt(index, 1, 1, all)).toBeNull()
+  })
+
+  it('a merge whose origin is above the window continues from its first drawn row, spans clamped', () => {
+    const window = { firstRow: 3, lastRow: 9, firstCol: 0, lastCol: 9 }
+    // B3:B5 with rows 3.. shown: B4 draws the rest (two rows), B5 is skipped.
+    expect(mergeDrawAt(index, 3, 1, window)).toEqual({ kind: 'continuation', merge: index!.list[1], rowSpan: 2, colSpan: 1 })
+    expect(mergeDrawAt(index, 4, 1, window)).toEqual({ kind: 'skip' })
+  })
+
+  it('clamps to the window\'s last row and column', () => {
+    const window = { firstRow: 0, lastRow: 4, firstCol: 0, lastCol: 4 }
+    expect(mergeDrawAt(index, 2, 1, window)).toEqual({ kind: 'origin', merge: index!.list[1], rowSpan: 3, colSpan: 1 })
+    expect(mergeDrawAt(index, 4, 4, window)).toEqual({ kind: 'origin', merge: index!.list[2], rowSpan: 1, colSpan: 1 })
+  })
+
+  it('a merge starting in the frozen band draws its remainder in the body as a continuation', () => {
+    const frozen = { firstRow: 0, lastRow: 0, firstCol: 0, lastCol: 9 }
+    const body = { firstRow: 1, lastRow: 9, firstCol: 0, lastCol: 9 }
+    const tall = buildMergeIndex([{ rowIndex: 0, colIndex: 0, rowSpan: 3, colSpan: 1 }])
+    expect(mergeDrawAt(tall, 0, 0, frozen)).toEqual({ kind: 'origin', merge: tall!.list[0], rowSpan: 1, colSpan: 1 })
+    expect(mergeDrawAt(tall, 1, 0, body)).toEqual({ kind: 'continuation', merge: tall!.list[0], rowSpan: 2, colSpan: 1 })
+    expect(mergeDrawAt(tall, 2, 0, body)).toEqual({ kind: 'skip' })
+  })
+})

package/src/merges.ts

@@ -0,0 +1,168 @@
+/**
+ * Merged cells: a rectangle of cells drawn as one, the way a spreadsheet's
+ * Merge & Center does. The grid takes them as `mergedCells`, a list of
+ * origins with their spans in display indices, and this module is the
+ * pure part: an index over them, the questions the renderer, the
+ * selection and the keyboard ask, and nothing that touches the DOM.
+ *
+ * A merge is drawn by its origin td, which takes `rowspan` and `colspan`;
+ * the cells it covers are not emitted. Selection rectangles grow to whole
+ * merges (a merge is selected as one), the active cell inside a merge is
+ * its origin, and an arrow key moving into a merge lands on the origin
+ * and moving out of one steps past its far edge.
+ */
+
+export type MergedCell = {
+  /** Top-left cell of the merge, display indices. */
+  rowIndex: number
+  colIndex: number
+  /** How many rows and columns it covers, 1 or more. */
+  rowSpan: number
+  colSpan: number
+}
+
+export type MergeIndex = {
+  readonly list: ReadonlyArray<MergedCell>
+  /** Every cell a merge covers (origin included) -> its merge. */
+  readonly byCell: ReadonlyMap<string, MergedCell>
+}
+
+export type MergeRect = { minRow: number; maxRow: number; minCol: number; maxCol: number }
+
+const key = (r: number, c: number) => `${r}:${c}`
+
+/** An index over the merges, or null when there are none (the common case). */
+export function buildMergeIndex(merges: ReadonlyArray<MergedCell> | undefined | null): MergeIndex | null {
+  if (!merges || merges.length === 0) return null
+  const byCell = new Map<string, MergedCell>()
+  const list: MergedCell[] = []
+  for (const raw of merges) {
+    const rowSpan = Math.max(1, Math.floor(raw.rowSpan))
+    const colSpan = Math.max(1, Math.floor(raw.colSpan))
+    if (rowSpan === 1 && colSpan === 1) continue
+    const merge = { rowIndex: raw.rowIndex, colIndex: raw.colIndex, rowSpan, colSpan }
+    list.push(merge)
+    for (let r = merge.rowIndex; r < merge.rowIndex + rowSpan; r += 1) {
+      for (let c = merge.colIndex; c < merge.colIndex + colSpan; c += 1) byCell.set(key(r, c), merge)
+    }
+  }
+  return list.length ? { list, byCell } : null
+}
+
+/** The merge covering (r, c), origin included, or undefined. */
+export function mergeAt(index: MergeIndex | null, r: number, c: number): MergedCell | undefined {
+  return index?.byCell.get(key(r, c))
+}
+
+/** Whether (r, c) is inside a merge without being its origin. */
+export function isCovered(index: MergeIndex | null, r: number, c: number): boolean {
+  const m = mergeAt(index, r, c)
+  return !!m && (m.rowIndex !== r || m.colIndex !== c)
+}
+
+/** The origin of the merge (r, c) sits in, or (r, c) itself. */
+export function originOf(index: MergeIndex | null, r: number, c: number): { rowIndex: number; colIndex: number } {
+  const m = mergeAt(index, r, c)
+  return m ? { rowIndex: m.rowIndex, colIndex: m.colIndex } : { rowIndex: r, colIndex: c }
+}
+
+/** The far corner of the merge (r, c) sits in, or (r, c) itself. */
+export function endOf(index: MergeIndex | null, r: number, c: number): { rowIndex: number; colIndex: number } {
+  const m = mergeAt(index, r, c)
+  return m
+    ? { rowIndex: m.rowIndex + m.rowSpan - 1, colIndex: m.colIndex + m.colSpan - 1 }
+    : { rowIndex: r, colIndex: c }
+}
+
+/**
+ * The rectangle grown to hold every merge it touches, to a fixed point: a
+ * merge that pokes out of the rectangle pulls the edge out, which can
+ * reach another merge, and so on, as a spreadsheet's selection does.
+ */
+export function expandRectToMerges(index: MergeIndex | null, rect: MergeRect): MergeRect {
+  if (!index) return rect
+  let { minRow, maxRow, minCol, maxCol } = rect
+  for (let guard = 0; guard < 64; guard += 1) {
+    let grew = false
+    for (const m of index.list) {
+      const r2 = m.rowIndex + m.rowSpan - 1
+      const c2 = m.colIndex + m.colSpan - 1
+      const touches = m.rowIndex <= maxRow && r2 >= minRow && m.colIndex <= maxCol && c2 >= minCol
+      if (!touches) continue
+      if (m.rowIndex < minRow) { minRow = m.rowIndex; grew = true }
+      if (r2 > maxRow) { maxRow = r2; grew = true }
+      if (m.colIndex < minCol) { minCol = m.colIndex; grew = true }
+      if (c2 > maxCol) { maxCol = c2; grew = true }
+    }
+    if (!grew) break
+  }
+  return minRow === rect.minRow && maxRow === rect.maxRow && minCol === rect.minCol && maxCol === rect.maxCol
+    ? rect
+    : { minRow, maxRow, minCol, maxCol }
+}
+
+/**
+ * Where a move from `from` to `next` really lands. A step into a merge
+ * lands on its origin; a step that stays inside the merge the move started
+ * in carries on past its far edge (right from a three-wide merge reaches
+ * the column after it), clamped to the bounds; a step that then lands in
+ * another merge takes that one's origin.
+ */
+export function stepPastMerge(
+  index: MergeIndex | null,
+  from: { rowIndex: number; colIndex: number },
+  next: { rowIndex: number; colIndex: number },
+  bounds: { maxRow: number; maxCol: number },
+): { rowIndex: number; colIndex: number } {
+  if (!index) return next
+  const target = mergeAt(index, next.rowIndex, next.colIndex)
+  if (!target) return next
+  const source = mergeAt(index, from.rowIndex, from.colIndex)
+  if (source !== target) return { rowIndex: target.rowIndex, colIndex: target.colIndex }
+  // Still inside the merge the move began in: keep going in that direction.
+  const dr = Math.sign(next.rowIndex - from.rowIndex)
+  const dc = Math.sign(next.colIndex - from.colIndex)
+  if (dr === 0 && dc === 0) return { rowIndex: target.rowIndex, colIndex: target.colIndex }
+  let rowIndex = next.rowIndex
+  let colIndex = next.colIndex
+  if (dr > 0) rowIndex = target.rowIndex + target.rowSpan
+  else if (dr < 0) rowIndex = target.rowIndex - 1
+  if (dc > 0) colIndex = target.colIndex + target.colSpan
+  else if (dc < 0) colIndex = target.colIndex - 1
+  if (rowIndex < 0 || rowIndex > bounds.maxRow || colIndex < 0 || colIndex > bounds.maxCol) {
+    // Nowhere further to go: the merge itself stays current.
+    return { rowIndex: target.rowIndex, colIndex: target.colIndex }
+  }
+  const landed = mergeAt(index, rowIndex, colIndex)
+  return landed ? { rowIndex: landed.rowIndex, colIndex: landed.colIndex } : { rowIndex, colIndex }
+}
+
+/**
+ * How a td at (r, c) draws inside a rendered window of rows and columns.
+ * A merge is drawn once per window, by the top-left cell of the part of it
+ * the window holds: the origin when the origin is in the window (`origin`),
+ * else the first covered cell the window shows (`continuation`, which
+ * draws the origin's content itself), with the spans clamped to the window
+ * so a table never spans into rows it has not drawn. Every other cell of
+ * the merge is `skip`: no td, the drawn one covers its slot.
+ */
+export type MergeDraw =
+  | { kind: 'skip' }
+  | { kind: 'origin' | 'continuation'; merge: MergedCell; rowSpan: number; colSpan: number }
+
+export function mergeDrawAt(
+  index: MergeIndex | null,
+  r: number,
+  c: number,
+  window: { firstRow: number; lastRow: number; firstCol: number; lastCol: number },
+): MergeDraw | null {
+  const m = mergeAt(index, r, c)
+  if (!m) return null
+  const anchorRow = Math.max(m.rowIndex, window.firstRow)
+  const anchorCol = Math.max(m.colIndex, window.firstCol)
+  if (r !== anchorRow || c !== anchorCol) return { kind: 'skip' }
+  const isOrigin = anchorRow === m.rowIndex && anchorCol === m.colIndex
+  const rowSpan = Math.max(1, Math.min(m.rowIndex + m.rowSpan - r, window.lastRow - r + 1))
+  const colSpan = Math.max(1, Math.min(m.colIndex + m.colSpan - c, window.lastCol - c + 1))
+  return { kind: isOrigin ? 'origin' : 'continuation', merge: m, rowSpan, colSpan }
+}

package/src/pivot.grid.test.ts

@@ -35,27 +35,32 @@ const data: Row[] = [
 const engine = (rows: ReadonlyArray<Record<string, unknown>>) => {
   const byRegion = new Map<string, number>()
   for (const r of rows) byRegion.set(String(r.region), (byRegion.get(String(r.region)) ?? 0) + Number(r.sales))
-  const pivotRows: GridPivotRow[] = [...byRegion].map(([region, total], i) => ({
-    __pivotId: `p${i}`, __pivotDepth: 0, __pivotLabel: region, __pivotParentId: null, __pivotExpandable: false,
-    region, total,
+  const pivotRows: Array<GridPivotRow & { __pivotKind: string }> = [...byRegion].map(([region, total], i) => ({
+    __pivotId: `p${i}`, __pivotDepth: 0, __pivotLabel: region, __pivotParentId: null, __pivotExpandable: false, __pivotKind: 'leaf',
+    region, total, pv_grand__total: total,
   }))
+  const all = [...byRegion.values()].reduce((a, b) => a + b, 0)
+  pivotRows.push({ __pivotId: 'grand', __pivotDepth: 0, __pivotLabel: 'Total', __pivotParentId: null, __pivotExpandable: false, __pivotKind: 'grandTotal', region: 'Total', total: all, pv_grand__total: all })
   return {
     rows: pivotRows,
     columns: [
-      { id: 'region', header: 'Region', field: 'region', width: 140 },
+      { id: '__pivotRowHeader', header: 'Region', field: 'region', width: 140 },
       { id: 'total', header: 'Total sales', field: 'total', width: 140 },
+      { id: 'pv_group__grand', header: 'Grand total', columns: [{ id: 'pv_grand__total', header: 'Total sales', field: 'pv_grand__total', width: 140 }] },
     ] as never,
   }
 }
 
 const tick = () => new Promise<void>((r) => queueMicrotask(r))
 
-function mountGrid() {
+function mountGrid(extra: Record<string, unknown> = {}) {
   const target = document.createElement('div')
+  target.style.width = '1000px'
   document.body.appendChild(target)
   const app = mount(SvGrid, {
     target,
     props: {
+      ...extra,
       data,
       columns: cols,
       features,
@@ -99,4 +104,34 @@ describe('in-grid pivot mode', () => {
     expect(target.textContent).toContain('Total sales')
     expect(target.textContent).toContain('140') // EU 100 + 40
   })
+
+  it('the Chart panel charts the pivot on screen, not the source rows', async () => {
+    registerPivotEngine(engine as never)
+    const { target, destroy } = mountGrid({ charting: { defaultOpen: true, position: 'right' } })
+    cleanup = destroy
+    // The panel and the chart engine are lazy chunks: a few macrotasks.
+    for (let i = 0; i < 6; i += 1) await new Promise((r) => setTimeout(r))
+    const panel = target.querySelector('.sv-grid-chart-panel')!
+    expect(panel).toBeTruthy()
+    // The categories are the pivot's leaf rows and the series its value column;
+    // the grand total is not a bar. The source rows would have drawn three bars
+    // (one per row) or asked for a Group by.
+    const table = panel.querySelector('.sv-grid-chart-sr-only tbody')!
+    const cells = [...table.querySelectorAll('td')].map((td) => td.textContent)
+    expect(cells).toEqual(['EU', '140', 'US', '70'])
+    expect(panel.querySelector('.sv-grid-chart-sr-only thead')!.textContent).toContain('Total sales')
+    // The data pickers are gone and the note says why; Type stays.
+    const labels = [...panel.querySelectorAll('.sv-grid-chart-ctl-lbl')].map((l) => l.textContent)
+    expect(labels).not.toContain('Group by')
+    expect(labels).not.toContain('Value')
+    expect(labels).not.toContain('Aggregate')
+    expect(labels).toContain('Type')
+    expect(panel.querySelector('.sv-grid-chart-pivot-hint')!.textContent).toContain('Charting the pivot')
+    // The type list keeps the shapes a pivot can take.
+    const options = [...panel.querySelectorAll('.sv-grid-chart-ctl select option')].map((o) => (o as HTMLOptionElement).value)
+    expect(options).toContain('line')
+    expect(options).toContain('radar')
+    expect(options).not.toContain('scatter')
+    expect(options).not.toContain('candlestick')
+  })
 })

package/src/row-resize.test.ts

@@ -209,6 +209,50 @@ describe('rowResize - strip injection', () => {
 // Drag lifecycle
 // ---------------------------------------------------------------------------
 
+describe('rowResize - double-click', () => {
+  it('asks for an autosize of the row and keeps the click from the row itself', () => {
+    const { host, rows } = buildGrid([{ rowIndex: 0 }, { rowIndex: 1 }])
+    track(host)
+    const onAutosize = vi.fn()
+    const rowSaw = vi.fn()
+    rows[1]!.addEventListener('dblclick', rowSaw)
+    const onResize = vi.fn()
+    const action = rowResize(host, { onResize, onAutosize })
+    const strip = stripOf(rows[1]!)!
+    // Two presses on one strip inside 400ms are a double-click.
+    strip.dispatchEvent(pointer('pointerdown', { clientY: 100 }))
+    window.dispatchEvent(pointer('pointerup', { clientY: 100 }))
+    strip.dispatchEvent(pointer('pointerdown', { clientY: 100 }))
+    expect(onAutosize).toHaveBeenCalledWith(1)
+    // No drag started, so nothing to release.
+    expect(strip.classList.contains('is-resizing')).toBe(false)
+    window.dispatchEvent(pointer('pointerup', { clientY: 100 }))
+    // The first press's release reported the unchanged height; the second
+    // press started no drag.
+    expect(onResize).toHaveBeenCalledTimes(1)
+    expect(rowSaw).not.toHaveBeenCalled()
+    action.destroy()
+  })
+
+  it('does nothing without an onAutosize handler', () => {
+    const { host, rows } = buildGrid([{ rowIndex: 0 }])
+    track(host)
+    const rowSaw = vi.fn()
+    rows[0]!.addEventListener('dblclick', rowSaw)
+    const onResize = vi.fn()
+    const action = rowResize(host, { onResize })
+    const strip = stripOf(rows[0]!)!
+    strip.dispatchEvent(pointer('pointerdown', { clientY: 100 }))
+    window.dispatchEvent(pointer('pointerup', { clientY: 100 }))
+    strip.dispatchEvent(pointer('pointerdown', { clientY: 100 }))
+    // Without a handler the second press is an ordinary drag start.
+    expect(strip.classList.contains('is-resizing')).toBe(true)
+    window.dispatchEvent(pointer('pointerup', { clientY: 100 }))
+    expect(rowSaw).not.toHaveBeenCalled()
+    action.destroy()
+  })
+})
+
 describe('rowResize - drag', () => {
   it('reports the new height on pointerup and fires move callbacks', () => {
     const { host, rows } = buildGrid([{ rowIndex: 0 }])

package/src/row-resize.ts

@@ -33,6 +33,9 @@ export type RowResizeOptions = {
   onResize: (rowIndex: number, height: number) => void
   /** Optional callback fired during the drag (every pointermove). */
   onResizeMove?: (rowIndex: number, height: number) => void
+  /** Double-click on the strip: size the row to its content, the
+   *  spreadsheet gesture. Without it a double-click does nothing. */
+  onAutosize?: (rowIndex: number) => void
   /** Min row height in px. Default 20. */
   min?: number
   /** Max row height in px. Default 320. */
@@ -63,6 +66,8 @@ type ActiveDrag = {
 export function rowResize(node: HTMLElement, opts: RowResizeOptions) {
   let current = opts
   let drag: ActiveDrag | null = null
+  /** The last press on a strip, for telling a double-click from two drags. */
+  let lastPress: { rowIndex: number; at: number } | null = null
 
   function rowIndexOf(tr: HTMLTableRowElement): number {
     const dataRow = tr.querySelector<HTMLElement>('[data-svgrid-row]')
@@ -133,6 +138,18 @@ export function rowResize(node: HTMLElement, opts: RowResizeOptions) {
     if (!Number.isFinite(rowIndex)) return
     e.preventDefault()
     e.stopPropagation()
+    // The second press of a double-click: size the row to its content
+    // instead of starting another drag. Timed here rather than read from
+    // a dblclick event, whose target is the row once the first press's
+    // resize has re-rendered the strip; pointerdown carries no count.
+    const now = e.timeStamp
+    const again = lastPress !== null && lastPress.rowIndex === rowIndex && now - lastPress.at < 400
+    lastPress = { rowIndex, at: now }
+    if (again && current.onAutosize) {
+      lastPress = null
+      current.onAutosize(rowIndex)
+      return
+    }
     t.classList.add('is-resizing')
     drag = {
       rowIndex,