@svgrid/grid 2.2.27 → 2.2.28

package/src/js-scroller.svelte.ts

@@ -1,173 +1,173 @@
-/**
- * createJsScroller - a JS-driven vertical scroller for the virtualized selection
- * controls (SvListBox / SvDropDownList / SvTree).
- *
- * Native overflow scroll is composited off the main thread, so on a fast
- * scrollbar-thumb drag the browser paints the new (empty) scroll position a
- * frame before JS can re-window the virtualizer - the "blank flash while
- * scrolling". This helper removes that async gap the way Smart's list does: the
- * content does NOT use native scroll. A single `scrollOffset` state positions
- * the rows (`translateY`) AND drives the virtualizer window in the same reactive
- * flush, and a custom scrollbar + wheel/touch handlers set that offset directly.
- *
- * The component owns the markup (translated rows + the `sb`/`thumb` elements);
- * this owns the offset, the geometry, and the input handlers.
- */
-import { untrack } from 'svelte'
-
-type ScrollerVirtualizer = {
-  setScrollOffset: (offset: number) => void
-  getOffsetForIndex: (index: number) => number
-  getSizeForIndex: (index: number) => number
-}
-
-export type JsScrollerConfig = {
-  /** The shared virtualizer to drive. */
-  virtualizer: ScrollerVirtualizer
-  /** Full scrollable content height (px). */
-  totalSize: () => number
-  /** Visible viewport height (px). */
-  viewport: () => number
-  /** Row height used to convert line-mode wheel deltas to px. */
-  lineStep: () => number
-}
-
-export function createJsScroller(cfg: JsScrollerConfig) {
-  // The single source of truth for the scroll position.
-  let scrollOffset = $state(0)
-  const maxOffset = $derived(Math.max(0, cfg.totalSize() - cfg.viewport()))
-
-  // Push the offset into the virtualizer whenever it changes. `untrack` keeps
-  // the virtualizer's `version` write out of this effect's dependencies.
-  $effect(() => {
-    const o = scrollOffset
-    untrack(() => cfg.virtualizer.setScrollOffset(o))
-  })
-  // Re-clamp if the content shrinks under the current offset.
-  $effect(() => {
-    const m = maxOffset
-    if (untrack(() => scrollOffset) > m) scrollOffset = m
-  })
-
-  function scrollTo(offset: number) {
-    scrollOffset = Math.max(0, Math.min(maxOffset, offset))
-  }
-  function scrollByPx(delta: number) {
-    scrollTo(scrollOffset + delta)
-  }
-
-  function onWheel(e: WheelEvent) {
-    if (maxOffset <= 0) return
-    // deltaMode: 0 = pixels, 1 = lines, 2 = pages.
-    const step =
-      e.deltaMode === 1 ? e.deltaY * cfg.lineStep() : e.deltaMode === 2 ? e.deltaY * cfg.viewport() : e.deltaY
-    const before = scrollOffset
-    scrollByPx(step)
-    // Only swallow the wheel when it moved us, so the page can scroll once the
-    // list is pinned at its top/bottom edge.
-    if (scrollOffset !== before) e.preventDefault()
-  }
-
-  // --- Custom scrollbar geometry --------------------------------------------
-  const thumbH = $derived(
-    maxOffset > 0 && cfg.totalSize() > 0
-      ? Math.max(24, Math.min(cfg.viewport(), (cfg.viewport() / cfg.totalSize()) * cfg.viewport()))
-      : 0,
-  )
-  const trackRange = $derived(Math.max(0, cfg.viewport() - thumbH))
-  const thumbTop = $derived(maxOffset > 0 ? (scrollOffset / maxOffset) * trackRange : 0)
-
-  let dragging = $state(false)
-  let dragStartY = 0
-  let dragStartOffset = 0
-  function onThumbDown(e: PointerEvent) {
-    e.stopPropagation()
-    e.preventDefault()
-    dragging = true
-    dragStartY = e.clientY
-    dragStartOffset = scrollOffset
-    ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
-  }
-  function onThumbMove(e: PointerEvent) {
-    if (!dragging) return
-    const dy = e.clientY - dragStartY
-    scrollTo(dragStartOffset + (trackRange > 0 ? (dy / trackRange) * maxOffset : 0))
-  }
-  function onThumbUp(e: PointerEvent) {
-    dragging = false
-    releaseCapture(e)
-  }
-  function onTrackDown(e: PointerEvent) {
-    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
-    scrollByPx(e.clientY - rect.top < thumbTop ? -cfg.viewport() : cfg.viewport())
-  }
-
-  // --- Touch: drag the content to pan ---------------------------------------
-  let touchActive = false
-  let touchStartY = 0
-  let touchStartOffset = 0
-  function onContentDown(e: PointerEvent) {
-    if (e.pointerType !== 'touch') return
-    touchActive = true
-    touchStartY = e.clientY
-    touchStartOffset = scrollOffset
-    ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
-  }
-  function onContentMove(e: PointerEvent) {
-    if (!touchActive) return
-    scrollTo(touchStartOffset - (e.clientY - touchStartY))
-  }
-  function onContentUp(e: PointerEvent) {
-    if (!touchActive) return
-    touchActive = false
-    releaseCapture(e)
-  }
-
-  function releaseCapture(e: PointerEvent) {
-    try {
-      ;(e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId)
-    } catch {
-      /* capture may already be gone */
-    }
-  }
-
-  /** Scroll the minimal amount to bring `[top, top+h]` fully into view. */
-  function ensureVisible(top: number, h: number) {
-    if (top < scrollOffset) scrollTo(top)
-    else if (top + h > scrollOffset + cfg.viewport()) scrollTo(top + h - cfg.viewport())
-  }
-  /** Bring a virtualizer row index into view (variable-height aware). */
-  function ensureIndexVisible(index: number) {
-    ensureVisible(cfg.virtualizer.getOffsetForIndex(index), cfg.virtualizer.getSizeForIndex(index))
-  }
-
-  return {
-    get scrollOffset() {
-      return scrollOffset
-    },
-    get maxOffset() {
-      return maxOffset
-    },
-    get thumbH() {
-      return thumbH
-    },
-    get thumbTop() {
-      return thumbTop
-    },
-    get dragging() {
-      return dragging
-    },
-    scrollTo,
-    scrollByPx,
-    ensureVisible,
-    ensureIndexVisible,
-    onWheel,
-    onThumbDown,
-    onThumbMove,
-    onThumbUp,
-    onTrackDown,
-    onContentDown,
-    onContentMove,
-    onContentUp,
-  }
-}
+/**
+ * createJsScroller - a JS-driven vertical scroller for the virtualized selection
+ * controls (SvListBox / SvDropDownList / SvTree).
+ *
+ * Native overflow scroll is composited off the main thread, so on a fast
+ * scrollbar-thumb drag the browser paints the new (empty) scroll position a
+ * frame before JS can re-window the virtualizer - the "blank flash while
+ * scrolling". This helper removes that async gap the way Smart's list does: the
+ * content does NOT use native scroll. A single `scrollOffset` state positions
+ * the rows (`translateY`) AND drives the virtualizer window in the same reactive
+ * flush, and a custom scrollbar + wheel/touch handlers set that offset directly.
+ *
+ * The component owns the markup (translated rows + the `sb`/`thumb` elements);
+ * this owns the offset, the geometry, and the input handlers.
+ */
+import { untrack } from 'svelte'
+
+type ScrollerVirtualizer = {
+  setScrollOffset: (offset: number) => void
+  getOffsetForIndex: (index: number) => number
+  getSizeForIndex: (index: number) => number
+}
+
+export type JsScrollerConfig = {
+  /** The shared virtualizer to drive. */
+  virtualizer: ScrollerVirtualizer
+  /** Full scrollable content height (px). */
+  totalSize: () => number
+  /** Visible viewport height (px). */
+  viewport: () => number
+  /** Row height used to convert line-mode wheel deltas to px. */
+  lineStep: () => number
+}
+
+export function createJsScroller(cfg: JsScrollerConfig) {
+  // The single source of truth for the scroll position.
+  let scrollOffset = $state(0)
+  const maxOffset = $derived(Math.max(0, cfg.totalSize() - cfg.viewport()))
+
+  // Push the offset into the virtualizer whenever it changes. `untrack` keeps
+  // the virtualizer's `version` write out of this effect's dependencies.
+  $effect(() => {
+    const o = scrollOffset
+    untrack(() => cfg.virtualizer.setScrollOffset(o))
+  })
+  // Re-clamp if the content shrinks under the current offset.
+  $effect(() => {
+    const m = maxOffset
+    if (untrack(() => scrollOffset) > m) scrollOffset = m
+  })
+
+  function scrollTo(offset: number) {
+    scrollOffset = Math.max(0, Math.min(maxOffset, offset))
+  }
+  function scrollByPx(delta: number) {
+    scrollTo(scrollOffset + delta)
+  }
+
+  function onWheel(e: WheelEvent) {
+    if (maxOffset <= 0) return
+    // deltaMode: 0 = pixels, 1 = lines, 2 = pages.
+    const step =
+      e.deltaMode === 1 ? e.deltaY * cfg.lineStep() : e.deltaMode === 2 ? e.deltaY * cfg.viewport() : e.deltaY
+    const before = scrollOffset
+    scrollByPx(step)
+    // Only swallow the wheel when it moved us, so the page can scroll once the
+    // list is pinned at its top/bottom edge.
+    if (scrollOffset !== before) e.preventDefault()
+  }
+
+  // --- Custom scrollbar geometry --------------------------------------------
+  const thumbH = $derived(
+    maxOffset > 0 && cfg.totalSize() > 0
+      ? Math.max(24, Math.min(cfg.viewport(), (cfg.viewport() / cfg.totalSize()) * cfg.viewport()))
+      : 0,
+  )
+  const trackRange = $derived(Math.max(0, cfg.viewport() - thumbH))
+  const thumbTop = $derived(maxOffset > 0 ? (scrollOffset / maxOffset) * trackRange : 0)
+
+  let dragging = $state(false)
+  let dragStartY = 0
+  let dragStartOffset = 0
+  function onThumbDown(e: PointerEvent) {
+    e.stopPropagation()
+    e.preventDefault()
+    dragging = true
+    dragStartY = e.clientY
+    dragStartOffset = scrollOffset
+    ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
+  }
+  function onThumbMove(e: PointerEvent) {
+    if (!dragging) return
+    const dy = e.clientY - dragStartY
+    scrollTo(dragStartOffset + (trackRange > 0 ? (dy / trackRange) * maxOffset : 0))
+  }
+  function onThumbUp(e: PointerEvent) {
+    dragging = false
+    releaseCapture(e)
+  }
+  function onTrackDown(e: PointerEvent) {
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
+    scrollByPx(e.clientY - rect.top < thumbTop ? -cfg.viewport() : cfg.viewport())
+  }
+
+  // --- Touch: drag the content to pan ---------------------------------------
+  let touchActive = false
+  let touchStartY = 0
+  let touchStartOffset = 0
+  function onContentDown(e: PointerEvent) {
+    if (e.pointerType !== 'touch') return
+    touchActive = true
+    touchStartY = e.clientY
+    touchStartOffset = scrollOffset
+    ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
+  }
+  function onContentMove(e: PointerEvent) {
+    if (!touchActive) return
+    scrollTo(touchStartOffset - (e.clientY - touchStartY))
+  }
+  function onContentUp(e: PointerEvent) {
+    if (!touchActive) return
+    touchActive = false
+    releaseCapture(e)
+  }
+
+  function releaseCapture(e: PointerEvent) {
+    try {
+      ;(e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId)
+    } catch {
+      /* capture may already be gone */
+    }
+  }
+
+  /** Scroll the minimal amount to bring `[top, top+h]` fully into view. */
+  function ensureVisible(top: number, h: number) {
+    if (top < scrollOffset) scrollTo(top)
+    else if (top + h > scrollOffset + cfg.viewport()) scrollTo(top + h - cfg.viewport())
+  }
+  /** Bring a virtualizer row index into view (variable-height aware). */
+  function ensureIndexVisible(index: number) {
+    ensureVisible(cfg.virtualizer.getOffsetForIndex(index), cfg.virtualizer.getSizeForIndex(index))
+  }
+
+  return {
+    get scrollOffset() {
+      return scrollOffset
+    },
+    get maxOffset() {
+      return maxOffset
+    },
+    get thumbH() {
+      return thumbH
+    },
+    get thumbTop() {
+      return thumbTop
+    },
+    get dragging() {
+      return dragging
+    },
+    scrollTo,
+    scrollByPx,
+    ensureVisible,
+    ensureIndexVisible,
+    onWheel,
+    onThumbDown,
+    onThumbMove,
+    onThumbUp,
+    onTrackDown,
+    onContentDown,
+    onContentMove,
+    onContentUp,
+  }
+}

package/src/keyboard.test.ts

@@ -1,59 +1,59 @@
-import { describe, expect, it } from 'vitest'
-import { getKeyboardIntent, getNextActiveCell } from './keyboard'
-
-describe('keyboard navigation engine', () => {
-  it('maps keys to navigation intents', () => {
-    expect(getKeyboardIntent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))).toBe(
-      'moveLeft',
-    )
-    expect(getKeyboardIntent(new KeyboardEvent('keydown', { key: 'Home', ctrlKey: true }))).toBe(
-      'gridStart',
-    )
-    expect(getKeyboardIntent(new KeyboardEvent('keydown', { key: ' ' }))).toBe(
-      'activate',
-    )
-  })
-
-  it('computes next active cell within bounds', () => {
-    const next = getNextActiveCell(
-      { rowIndex: 1, colIndex: 1, cellId: null },
-      'moveDown',
-      { maxRow: 2, maxCol: 3, pageSize: 10 },
-    )
-    expect(next.rowIndex).toBe(2)
-    expect(next.colIndex).toBe(1)
-  })
-
-  it('handles row and grid boundary intents', () => {
-    const rowEnd = getNextActiveCell(
-      { rowIndex: 2, colIndex: 1, cellId: null },
-      'rowEnd',
-      { maxRow: 2, maxCol: 4, pageSize: 2 },
-    )
-    expect(rowEnd.colIndex).toBe(4)
-
-    const gridStart = getNextActiveCell(
-      { rowIndex: 2, colIndex: 4, cellId: null },
-      'gridStart',
-      { maxRow: 2, maxCol: 4, pageSize: 2 },
-    )
-    expect(gridStart.rowIndex).toBe(0)
-    expect(gridStart.colIndex).toBe(0)
-  })
-
-  it('clamps page navigation to valid bounds', () => {
-    const pageUp = getNextActiveCell(
-      { rowIndex: 1, colIndex: 0, cellId: null },
-      'pageUp',
-      { maxRow: 20, maxCol: 2, pageSize: 10 },
-    )
-    const pageDown = getNextActiveCell(
-      { rowIndex: 18, colIndex: 0, cellId: null },
-      'pageDown',
-      { maxRow: 20, maxCol: 2, pageSize: 10 },
-    )
-
-    expect(pageUp.rowIndex).toBe(0)
-    expect(pageDown.rowIndex).toBe(20)
-  })
-})
+import { describe, expect, it } from 'vitest'
+import { getKeyboardIntent, getNextActiveCell } from './keyboard'
+
+describe('keyboard navigation engine', () => {
+  it('maps keys to navigation intents', () => {
+    expect(getKeyboardIntent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))).toBe(
+      'moveLeft',
+    )
+    expect(getKeyboardIntent(new KeyboardEvent('keydown', { key: 'Home', ctrlKey: true }))).toBe(
+      'gridStart',
+    )
+    expect(getKeyboardIntent(new KeyboardEvent('keydown', { key: ' ' }))).toBe(
+      'activate',
+    )
+  })
+
+  it('computes next active cell within bounds', () => {
+    const next = getNextActiveCell(
+      { rowIndex: 1, colIndex: 1, cellId: null },
+      'moveDown',
+      { maxRow: 2, maxCol: 3, pageSize: 10 },
+    )
+    expect(next.rowIndex).toBe(2)
+    expect(next.colIndex).toBe(1)
+  })
+
+  it('handles row and grid boundary intents', () => {
+    const rowEnd = getNextActiveCell(
+      { rowIndex: 2, colIndex: 1, cellId: null },
+      'rowEnd',
+      { maxRow: 2, maxCol: 4, pageSize: 2 },
+    )
+    expect(rowEnd.colIndex).toBe(4)
+
+    const gridStart = getNextActiveCell(
+      { rowIndex: 2, colIndex: 4, cellId: null },
+      'gridStart',
+      { maxRow: 2, maxCol: 4, pageSize: 2 },
+    )
+    expect(gridStart.rowIndex).toBe(0)
+    expect(gridStart.colIndex).toBe(0)
+  })
+
+  it('clamps page navigation to valid bounds', () => {
+    const pageUp = getNextActiveCell(
+      { rowIndex: 1, colIndex: 0, cellId: null },
+      'pageUp',
+      { maxRow: 20, maxCol: 2, pageSize: 10 },
+    )
+    const pageDown = getNextActiveCell(
+      { rowIndex: 18, colIndex: 0, cellId: null },
+      'pageDown',
+      { maxRow: 20, maxCol: 2, pageSize: 10 },
+    )
+
+    expect(pageUp.rowIndex).toBe(0)
+    expect(pageDown.rowIndex).toBe(20)
+  })
+})

package/src/keyboard.ts

@@ -1,97 +1,97 @@
-import type { ActiveCellState } from './core'
-
-export type GridKeyboardIntent =
-  | 'moveLeft'
-  | 'moveRight'
-  | 'moveUp'
-  | 'moveDown'
-  | 'tabNext'
-  | 'tabPrev'
-  | 'rowStart'
-  | 'rowEnd'
-  | 'gridStart'
-  | 'gridEnd'
-  | 'pageUp'
-  | 'pageDown'
-  | 'activate'
-  | 'clearCells'
-  | 'noop'
-
-export function getKeyboardIntent(event: KeyboardEvent): GridKeyboardIntent {
-  // Ctrl+Home / Ctrl+End come before plain Home / End so the modifier wins.
-  if (event.ctrlKey && event.key === 'Home') return 'gridStart'
-  if (event.ctrlKey && event.key === 'End') return 'gridEnd'
-
-  if (event.key === 'ArrowLeft') return 'moveLeft'
-  if (event.key === 'ArrowRight') return 'moveRight'
-  if (event.key === 'ArrowUp') return 'moveUp'
-  if (event.key === 'ArrowDown') return 'moveDown'
-  if (event.key === 'Home') return 'rowStart'
-  if (event.key === 'End') return 'rowEnd'
-  if (event.key === 'PageUp') return 'pageUp'
-  if (event.key === 'PageDown') return 'pageDown'
-
-  // Excel-style data-entry navigation:
-  //   Enter      → move down (Shift+Enter → up)
-  //   Tab        → move right (Shift+Tab → left), wraps at row boundaries
-  //   Delete     → clear contents of the selected cells
-  //   F2 / Space → start editing the active cell
-  if (event.key === 'Enter') return event.shiftKey ? 'moveUp' : 'moveDown'
-  if (event.key === 'Tab') return event.shiftKey ? 'tabPrev' : 'tabNext'
-  if (event.key === 'F2') return 'activate'
-  if (event.key === ' ') return 'activate'
-  if (event.key === 'Delete') return 'clearCells'
-
-  return 'noop'
-}
-
-export function getNextActiveCell(
-  current: ActiveCellState,
-  intent: GridKeyboardIntent,
-  bounds: { maxRow: number; maxCol: number; pageSize?: number },
-): ActiveCellState {
-  const pageSize = bounds.pageSize ?? 10
-  let rowIndex = current.rowIndex
-  let colIndex = current.colIndex
-
-  if (intent === 'moveLeft') colIndex -= 1
-  if (intent === 'moveRight') colIndex += 1
-  if (intent === 'moveUp') rowIndex -= 1
-  if (intent === 'moveDown') rowIndex += 1
-  if (intent === 'tabNext') {
-    // Right one column; if we fall off the right edge, wrap to the
-    // first column of the next row - Excel's "data entry" behavior.
-    colIndex += 1
-    if (colIndex > bounds.maxCol) {
-      colIndex = 0
-      rowIndex += 1
-    }
-  }
-  if (intent === 'tabPrev') {
-    colIndex -= 1
-    if (colIndex < 0) {
-      colIndex = bounds.maxCol
-      rowIndex -= 1
-    }
-  }
-  if (intent === 'rowStart') colIndex = 0
-  if (intent === 'rowEnd') colIndex = bounds.maxCol
-  if (intent === 'gridStart') {
-    rowIndex = 0
-    colIndex = 0
-  }
-  if (intent === 'gridEnd') {
-    rowIndex = bounds.maxRow
-    colIndex = bounds.maxCol
-  }
-  if (intent === 'pageUp') rowIndex -= pageSize
-  if (intent === 'pageDown') rowIndex += pageSize
-
-  rowIndex = Math.min(Math.max(rowIndex, 0), Math.max(bounds.maxRow, 0))
-  colIndex = Math.min(Math.max(colIndex, 0), Math.max(bounds.maxCol, 0))
-  return {
-    rowIndex,
-    colIndex,
-    cellId: current.cellId,
-  }
-}
+import type { ActiveCellState } from './core'
+
+export type GridKeyboardIntent =
+  | 'moveLeft'
+  | 'moveRight'
+  | 'moveUp'
+  | 'moveDown'
+  | 'tabNext'
+  | 'tabPrev'
+  | 'rowStart'
+  | 'rowEnd'
+  | 'gridStart'
+  | 'gridEnd'
+  | 'pageUp'
+  | 'pageDown'
+  | 'activate'
+  | 'clearCells'
+  | 'noop'
+
+export function getKeyboardIntent(event: KeyboardEvent): GridKeyboardIntent {
+  // Ctrl+Home / Ctrl+End come before plain Home / End so the modifier wins.
+  if (event.ctrlKey && event.key === 'Home') return 'gridStart'
+  if (event.ctrlKey && event.key === 'End') return 'gridEnd'
+
+  if (event.key === 'ArrowLeft') return 'moveLeft'
+  if (event.key === 'ArrowRight') return 'moveRight'
+  if (event.key === 'ArrowUp') return 'moveUp'
+  if (event.key === 'ArrowDown') return 'moveDown'
+  if (event.key === 'Home') return 'rowStart'
+  if (event.key === 'End') return 'rowEnd'
+  if (event.key === 'PageUp') return 'pageUp'
+  if (event.key === 'PageDown') return 'pageDown'
+
+  // Excel-style data-entry navigation:
+  //   Enter      → move down (Shift+Enter → up)
+  //   Tab        → move right (Shift+Tab → left), wraps at row boundaries
+  //   Delete     → clear contents of the selected cells
+  //   F2 / Space → start editing the active cell
+  if (event.key === 'Enter') return event.shiftKey ? 'moveUp' : 'moveDown'
+  if (event.key === 'Tab') return event.shiftKey ? 'tabPrev' : 'tabNext'
+  if (event.key === 'F2') return 'activate'
+  if (event.key === ' ') return 'activate'
+  if (event.key === 'Delete') return 'clearCells'
+
+  return 'noop'
+}
+
+export function getNextActiveCell(
+  current: ActiveCellState,
+  intent: GridKeyboardIntent,
+  bounds: { maxRow: number; maxCol: number; pageSize?: number },
+): ActiveCellState {
+  const pageSize = bounds.pageSize ?? 10
+  let rowIndex = current.rowIndex
+  let colIndex = current.colIndex
+
+  if (intent === 'moveLeft') colIndex -= 1
+  if (intent === 'moveRight') colIndex += 1
+  if (intent === 'moveUp') rowIndex -= 1
+  if (intent === 'moveDown') rowIndex += 1
+  if (intent === 'tabNext') {
+    // Right one column; if we fall off the right edge, wrap to the
+    // first column of the next row - Excel's "data entry" behavior.
+    colIndex += 1
+    if (colIndex > bounds.maxCol) {
+      colIndex = 0
+      rowIndex += 1
+    }
+  }
+  if (intent === 'tabPrev') {
+    colIndex -= 1
+    if (colIndex < 0) {
+      colIndex = bounds.maxCol
+      rowIndex -= 1
+    }
+  }
+  if (intent === 'rowStart') colIndex = 0
+  if (intent === 'rowEnd') colIndex = bounds.maxCol
+  if (intent === 'gridStart') {
+    rowIndex = 0
+    colIndex = 0
+  }
+  if (intent === 'gridEnd') {
+    rowIndex = bounds.maxRow
+    colIndex = bounds.maxCol
+  }
+  if (intent === 'pageUp') rowIndex -= pageSize
+  if (intent === 'pageDown') rowIndex += pageSize
+
+  rowIndex = Math.min(Math.max(rowIndex, 0), Math.max(bounds.maxRow, 0))
+  colIndex = Math.min(Math.max(colIndex, 0), Math.max(bounds.maxCol, 0))
+  return {
+    rowIndex,
+    colIndex,
+    cellId: current.cellId,
+  }
+}