@svgrid/grid 1.2.21 → 1.2.23

package/src/SvDropDownList.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+  /**
+   * SvDropDownList - a single-select dropdown (trigger button + portalled list,
+   * no typing). Parity: Smart `smart-drop-down-list`. Controlled via `value` +
+   * `onChange`. Popover escapes scroll clipping via popover.ts.
+   */
+  import { anchoredRect, portalToBody, type AnchoredRect } from './popover'
+  import type { ListOption } from './list-option'
+
+  type Props = {
+    options: ReadonlyArray<ListOption>
+    value?: string | number | null
+    onChange?: (value: string | number) => void
+    placeholder?: string
+    disabled?: boolean
+    name?: string
+    size?: 'sm' | 'md' | 'lg'
+    ariaLabel?: string
+    autoOpen?: boolean
+  }
+
+  let { options, value = null, onChange, placeholder = 'Select…', disabled = false, name, size = 'md', ariaLabel, autoOpen = false }: Props = $props()
+
+  let open = $state(false)
+  let active = $state(-1)
+  let triggerEl = $state<HTMLButtonElement | null>(null)
+  let panelEl = $state<HTMLDivElement | null>(null)
+  let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false })
+
+  const selected = $derived(options.find((o) => o.value === value) ?? null)
+  const enabledIdx = $derived(options.map((o, i) => (o.disabled ? -1 : i)).filter((i) => i >= 0))
+
+  function updatePos() {
+    if (!triggerEl) return
+    rect = anchoredRect(triggerEl.getBoundingClientRect(), { estimatedHeight: Math.min(options.length, 8) * 34 + 8 })
+  }
+  function openPanel() {
+    if (disabled || open) return
+    open = true
+    active = Math.max(0, options.findIndex((o) => o.value === value))
+    updatePos()
+  }
+  function close() { open = false }
+  function toggle() { open ? close() : openPanel() }
+  function pick(i: number) {
+    const o = options[i]
+    if (!o || o.disabled) return
+    onChange?.(o.value); close(); triggerEl?.focus()
+  }
+  function move(d: number) {
+    const pos = enabledIdx.indexOf(active)
+    active = enabledIdx[(pos + d + enabledIdx.length) % enabledIdx.length] ?? active
+    queueMicrotask(() => panelEl?.querySelector<HTMLElement>(`[data-idx="${active}"]`)?.scrollIntoView({ block: 'nearest' }))
+  }
+  function onKeydown(e: KeyboardEvent) {
+    if (disabled) return
+    if (!open && (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); openPanel(); return }
+    if (!open) return
+    if (e.key === 'ArrowDown') { e.preventDefault(); move(1) }
+    else if (e.key === 'ArrowUp') { e.preventDefault(); move(-1) }
+    else if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); pick(active) }
+    else if (e.key === 'Escape') { e.preventDefault(); close(); triggerEl?.focus() }
+    else if (e.key === 'Home') { active = enabledIdx[0] ?? 0 }
+    else if (e.key === 'End') { active = enabledIdx.at(-1) ?? 0 }
+  }
+
+  $effect(() => {
+    if (!open) return
+    const rp = () => updatePos()
+    window.addEventListener('scroll', rp, true); window.addEventListener('resize', rp)
+    const od = (e: PointerEvent) => { const t = e.target as Node | null; if (t && (triggerEl?.contains(t) || panelEl?.contains(t))) return; close() }
+    document.addEventListener('pointerdown', od, true)
+    return () => { window.removeEventListener('scroll', rp, true); window.removeEventListener('resize', rp); document.removeEventListener('pointerdown', od, true) }
+  })
+  function focusOpen(node: HTMLButtonElement) { if (autoOpen) { node.focus(); openPanel() } }
+</script>
+
+<button
+  bind:this={triggerEl}
+  type="button"
+  class="sv-ddl sv-ddl--{size}"
+  class:is-open={open}
+  class:is-disabled={disabled}
+  aria-haspopup="listbox"
+  aria-expanded={open}
+  aria-label={ariaLabel}
+  {disabled}
+  onclick={toggle}
+  onkeydown={onKeydown}
+  use:focusOpen
+>
+  <span class="sv-ddl__value" class:is-placeholder={!selected}>{selected?.label ?? placeholder}</span>
+  <svg class="sv-ddl__chev" viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
+</button>
+
+{#if open}
+  <div bind:this={panelEl} class="sv-ddl__panel" use:portalToBody style:position="fixed" style:top={`${rect.top}px`} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} role="listbox" tabindex="-1">
+    {#each options as opt, i (opt.value)}
+      <!-- svelte-ignore a11y_click_events_have_key_events a11y_interactive_supports_focus -->
+      <div
+        class="sv-ddl__opt"
+        class:is-active={i === active}
+        class:is-selected={opt.value === value}
+        class:is-disabled={opt.disabled}
+        role="option"
+        tabindex="-1"
+        aria-selected={opt.value === value}
+        data-idx={i}
+        onclick={() => pick(i)}
+        onpointermove={() => { if (!opt.disabled) active = i }}
+      >{opt.label}</div>
+    {/each}
+  </div>
+{/if}
+{#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
+
+<style>
+  .sv-ddl {
+    --_accent: var(--sg-accent, #2563eb);
+    display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; width: 200px;
+    background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a); font: inherit; text-align: left;
+    border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1)); border-radius: var(--sg-radius, 8px);
+    padding: 0 10px; cursor: pointer;
+  }
+  .sv-ddl--sm { height: 28px; font-size: 12px; }
+  .sv-ddl--md { height: 34px; font-size: 13px; }
+  .sv-ddl--lg { height: 40px; font-size: 15px; }
+  .sv-ddl.is-open, .sv-ddl:focus-visible { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); outline: none; }
+  .sv-ddl.is-disabled { opacity: 0.6; cursor: not-allowed; }
+  .sv-ddl__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .sv-ddl__value.is-placeholder { color: var(--sg-muted, #94a3b8); }
+  .sv-ddl__chev { color: var(--sg-muted, #64748b); flex: none; }
+
+  :global(.sv-ddl__panel) {
+    z-index: 2147483647; max-height: 288px; overflow-y: auto; padding: 4px;
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--sg-border, #e2e8f0); border-radius: 10px; box-shadow: 0 16px 48px -12px rgba(15,23,42,0.35);
+  }
+  :global(.sv-ddl__opt) { padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; }
+  :global(.sv-ddl__opt.is-active) { background: var(--sg-row-hover-bg, #f1f5f9); }
+  :global(.sv-ddl__opt.is-selected) { color: var(--sg-accent, #2563eb); font-weight: 600; }
+  :global(.sv-ddl__opt.is-disabled) { opacity: 0.4; cursor: not-allowed; }
+</style>

package/src/SvForm.svelte

@@ -0,0 +1,147 @@
+<script lang="ts" module>
+  export type FormFieldType =
+    | 'text' | 'email' | 'tel' | 'textarea' | 'number' | 'password'
+    | 'select' | 'checkbox' | 'switch' | 'date' | 'color' | 'rating'
+
+  export type FormField = {
+    name: string
+    label: string
+    type?: FormFieldType
+    required?: boolean
+    placeholder?: string
+    options?: Array<{ value: string | number; label: string }>
+    /** Return an error message, or null/undefined when valid. */
+    validate?: (value: any, values: Record<string, any>) => string | null | undefined
+    /** Span full width in the grid. */
+    full?: boolean
+  }
+</script>
+
+<script lang="ts">
+  /**
+   * SvForm - a schema-driven form that renders the SvGrid UI-kit controls with
+   * labels, required + custom validation, and a submit handler. Parity: Smart
+   * `smart-form`. Emits `onSubmit(values)` only when valid; `onChange` on edits.
+   */
+  import SvNumberInput from './SvNumberInput.svelte'
+  import SvPasswordInput from './SvPasswordInput.svelte'
+  import SvDropDownList from './SvDropDownList.svelte'
+  import SvCheckBox from './SvCheckBox.svelte'
+  import SvSwitchButton from './SvSwitchButton.svelte'
+  import SvDateTimePicker from './SvDateTimePicker.svelte'
+  import SvColorInput from './SvColorInput.svelte'
+  import SvRating from './SvRating.svelte'
+  import SvButton from './SvButton.svelte'
+
+  type Props = {
+    fields: ReadonlyArray<FormField>
+    initial?: Record<string, any>
+    onSubmit?: (values: Record<string, any>) => void
+    onChange?: (values: Record<string, any>) => void
+    submitLabel?: string
+    /** Columns in the responsive field grid. */
+    columns?: number
+    disabled?: boolean
+  }
+
+  let { fields, initial = {}, onSubmit, onChange, submitLabel = 'Submit', columns = 1, disabled = false }: Props = $props()
+
+  let values = $state<Record<string, any>>({})
+  let errors = $state<Record<string, string>>({})
+  let touched = $state<Record<string, boolean>>({})
+  let seededForm = false
+  $effect(() => { if (!seededForm) { seededForm = true; values = { ...initial } } })
+
+  function setValue(name: string, v: any) {
+    values = { ...values, [name]: v }
+    onChange?.(values)
+    if (touched[name]) validateField(name)
+  }
+
+  function validateField(name: string): boolean {
+    const field = fields.find((f) => f.name === name)
+    if (!field) return true
+    const v = values[name]
+    let err: string | null | undefined = null
+    if (field.required && (v == null || v === '' || (Array.isArray(v) && !v.length))) err = `${field.label} is required`
+    else if (field.validate) err = field.validate(v, values)
+    const next = { ...errors }
+    if (err) next[name] = err
+    else delete next[name]
+    errors = next
+    return !err
+  }
+
+  function submit(e: Event) {
+    e.preventDefault()
+    let ok = true
+    const t: Record<string, boolean> = {}
+    for (const f of fields) { t[f.name] = true; if (!validateField(f.name)) ok = false }
+    touched = t
+    if (ok) onSubmit?.({ ...values })
+  }
+
+  const dateVal = (v: any): Date | null => (v instanceof Date ? v : v ? new Date(v) : null)
+</script>
+
+<form class="sv-form" style:--cols={columns} onsubmit={submit} novalidate>
+  <div class="sv-form__grid">
+    {#each fields as field (field.name)}
+      {@const type = field.type ?? 'text'}
+      <div class="sv-form__field" class:is-full={field.full || columns === 1} class:has-error={errors[field.name]}>
+        {#if type !== 'checkbox' && type !== 'switch'}
+          <label class="sv-form__label" for={`f-${field.name}`}>
+            {field.label}{#if field.required}<span class="sv-form__req" aria-hidden="true"> *</span>{/if}
+          </label>
+        {/if}
+
+        {#if type === 'textarea'}
+          <textarea id={`f-${field.name}`} class="sv-form__control sv-form__textarea" rows="3" {disabled} placeholder={field.placeholder} value={values[field.name] ?? ''} oninput={(e) => setValue(field.name, e.currentTarget.value)} onblur={() => { touched[field.name] = true; validateField(field.name) }}></textarea>
+        {:else if type === 'number'}
+          <SvNumberInput value={values[field.name] ?? null} {disabled} onChange={(v) => setValue(field.name, v)} />
+        {:else if type === 'password'}
+          <SvPasswordInput value={values[field.name] ?? ''} {disabled} onChange={(v) => setValue(field.name, v)} />
+        {:else if type === 'select'}
+          <SvDropDownList options={field.options ?? []} value={values[field.name] ?? null} {disabled} placeholder={field.placeholder} onChange={(v) => setValue(field.name, v)} />
+        {:else if type === 'checkbox'}
+          <SvCheckBox checked={!!values[field.name]} {disabled} onChange={(v) => setValue(field.name, v)}>{field.label}</SvCheckBox>
+        {:else if type === 'switch'}
+          <div class="sv-form__inline"><SvSwitchButton checked={!!values[field.name]} {disabled} onChange={(v) => setValue(field.name, v)} ariaLabel={field.label} /><span>{field.label}</span></div>
+        {:else if type === 'date'}
+          <SvDateTimePicker value={dateVal(values[field.name])} dropDownDisplayMode="calendar" formatString="yyyy-MM-dd" {disabled} onChange={(v) => setValue(field.name, v)} />
+        {:else if type === 'color'}
+          <SvColorInput value={values[field.name] ?? '#3b82f6'} {disabled} onChange={(v) => setValue(field.name, v)} />
+        {:else if type === 'rating'}
+          <SvRating value={values[field.name] ?? 0} {disabled} onChange={(v) => setValue(field.name, v)} />
+        {:else}
+          <input id={`f-${field.name}`} class="sv-form__control" type={type} {disabled} placeholder={field.placeholder} value={values[field.name] ?? ''} oninput={(e) => setValue(field.name, e.currentTarget.value)} onblur={() => { touched[field.name] = true; validateField(field.name) }} />
+        {/if}
+
+        {#if errors[field.name]}<span class="sv-form__error" role="alert">{errors[field.name]}</span>{/if}
+      </div>
+    {/each}
+  </div>
+  <div class="sv-form__actions">
+    <SvButton type="submit" {disabled}>{submitLabel}</SvButton>
+  </div>
+</form>
+
+<style>
+  .sv-form { --_accent: var(--sg-accent, #2563eb); width: 100%; }
+  .sv-form__grid { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); gap: 14px 18px; }
+  .sv-form__field { display: flex; flex-direction: column; gap: 5px; }
+  .sv-form__field.is-full { grid-column: 1 / -1; }
+  .sv-form__label { font-size: 12.5px; font-weight: 600; color: var(--sg-fg, #0f172a); }
+  .sv-form__req { color: var(--sg-danger, #dc2626); }
+  .sv-form__control {
+    width: 100%; box-sizing: border-box; height: 34px; padding: 0 10px; font: inherit; font-size: 13px;
+    background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1)); border-radius: var(--sg-radius, 8px); outline: none;
+  }
+  .sv-form__textarea { height: auto; padding: 8px 10px; resize: vertical; }
+  .sv-form__control:focus { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
+  .sv-form__field.has-error .sv-form__control { border-color: var(--sg-danger, #dc2626); }
+  .sv-form__inline { display: flex; align-items: center; gap: 8px; font-size: 13px; }
+  .sv-form__error { font-size: 11.5px; color: var(--sg-danger, #dc2626); }
+  .sv-form__actions { margin-top: 16px; }
+</style>

package/src/SvGauge.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  /**
+   * SvGauge - a radial arc gauge (SVG) that renders a value within [min, max]
+   * with optional colored threshold bands, a needle, and a center label. Parity:
+   * Smart `smart-gauge` (radial). Display control; theme-driven.
+   */
+  type Band = { from: number; to: number; color: string }
+
+  type Props = {
+    value?: number
+    min?: number
+    max?: number
+    /** Sweep angle in degrees (default 270, a classic dashboard gauge). */
+    sweep?: number
+    /** Colored threshold bands along the arc. */
+    bands?: Band[]
+    /** Show the needle. */
+    needle?: boolean
+    /** Center label (defaults to the formatted value). */
+    label?: string
+    unit?: string
+    size?: number
+    thickness?: number
+    formatValue?: (v: number) => string
+    ariaLabel?: string
+  }
+
+  let {
+    value = 0,
+    min = 0,
+    max = 100,
+    sweep = 270,
+    bands = [],
+    needle = true,
+    label,
+    unit = '',
+    size = 180,
+    thickness = 14,
+    formatValue,
+    ariaLabel,
+  }: Props = $props()
+
+  const clamped = $derived(Math.min(max, Math.max(min, value)))
+  const startAngle = $derived(90 + (360 - sweep) / 2) // symmetric around the bottom
+  const cx = $derived(size / 2)
+  const cy = $derived(size / 2)
+  const r = $derived(size / 2 - thickness / 2 - 2)
+
+  function frac(v: number) { return (v - min) / (max - min) }
+  function angleOf(v: number) { return startAngle + frac(v) * sweep }
+  function polar(angleDeg: number, radius: number) {
+    const a = (angleDeg * Math.PI) / 180
+    return { x: cx + radius * Math.cos(a), y: cy + radius * Math.sin(a) }
+  }
+  function arcPath(v0: number, v1: number, radius: number): string {
+    const a0 = angleOf(v0)
+    const a1 = angleOf(v1)
+    const p0 = polar(a0, radius)
+    const p1 = polar(a1, radius)
+    const large = a1 - a0 > 180 ? 1 : 0
+    return `M ${p0.x} ${p0.y} A ${radius} ${radius} 0 ${large} 1 ${p1.x} ${p1.y}`
+  }
+
+  const needleEnd = $derived(polar(angleOf(clamped), r - thickness / 2))
+  const display = $derived(label ?? `${formatValue ? formatValue(clamped) : Math.round(clamped)}${unit}`)
+</script>
+
+<div class="sv-gauge" role="meter" aria-valuenow={clamped} aria-valuemin={min} aria-valuemax={max} aria-label={ariaLabel ?? 'Gauge'}>
+  <svg viewBox={`0 0 ${size} ${size}`} width={size} height={size} class="sv-gauge__svg">
+    <!-- track -->
+    <path d={arcPath(min, max, r)} class="sv-gauge__track" fill="none" stroke-width={thickness} stroke-linecap="round" />
+    <!-- bands (or accent fill up to value when no bands) -->
+    {#if bands.length}
+      {#each bands as band (band.from + '-' + band.to)}
+        <path d={arcPath(band.from, band.to, r)} fill="none" stroke={band.color} stroke-width={thickness} stroke-linecap="round" />
+      {/each}
+    {:else}
+      <path d={arcPath(min, clamped, r)} class="sv-gauge__value" fill="none" stroke-width={thickness} stroke-linecap="round" />
+    {/if}
+    {#if needle}
+      <line x1={cx} y1={cy} x2={needleEnd.x} y2={needleEnd.y} class="sv-gauge__needle" stroke-linecap="round" />
+      <circle cx={cx} cy={cy} r="5" class="sv-gauge__hub" />
+    {/if}
+  </svg>
+  <div class="sv-gauge__label">{display}</div>
+</div>
+
+<style>
+  .sv-gauge { position: relative; display: inline-flex; flex-direction: column; align-items: center; color: var(--sg-fg, #0f172a); }
+  .sv-gauge__svg { display: block; }
+  .sv-gauge__track { stroke: var(--sg-border, #e2e8f0); }
+  .sv-gauge__value { stroke: var(--sg-accent, #2563eb); }
+  .sv-gauge__needle { stroke: var(--sg-fg, #0f172a); stroke-width: 3; }
+  .sv-gauge__hub { fill: var(--sg-fg, #0f172a); }
+  .sv-gauge__label {
+    position: absolute; left: 0; right: 0; bottom: 22%; text-align: center;
+    font-size: 22px; font-weight: 750; font-variant-numeric: tabular-nums;
+  }
+</style>

package/src/SvGrid.controller.svelte.ts

@@ -409,6 +409,10 @@ export function createSvGridController<
   });
   let columnVirtualizerVersion = $state(0);
   let gridStateVersion = $state(0);
+  // Bumps only when a row-model-affecting slice changes (see the store
+  // subscription below) - the row-model derivation depends on THIS, not the
+  // catch-all gridStateVersion, so navigation doesn't rebuild 1M rows.
+  let dataStateVersion = $state(0);
   const selectionColumnWidth = 44;
   const rowNumberColumnWidth = $derived(props.rowNumberWidth ?? 56);
   const showRowNumbersEffective = $derived(props.showRowNumbers ?? false);
@@ -582,6 +586,10 @@ export function createSvGridController<
   // the wrapper records filter state but does not actually filter rows.
   // svelte-ignore state_referenced_locally
   const externalFilterEnabled = props.externalFilter === true;
+  // Server-side pagination: the footer reads rowCount/pageIndex from props and
+  // emits onPaginationChange instead of slicing locally. Controlled by the
+  // consumer. Reactive (unlike sort/filter) so pageIndex/rowCount can change.
+  const externalPaginationEnabled = $derived(props.externalPagination === true);
   const passthroughSortedRowModel = ({ rows }: { rows: Array<Row<TData>> }) =>
     rows;
 
@@ -629,9 +637,38 @@ export function createSvGridController<
     },
   });
 
+  // `gridStateVersion` bumps on EVERY store change (incl. moving the active
+  // cell). `dataStateVersion` bumps ONLY when a slice that actually changes the
+  // row model changes (sort / filter / pagination / grouping / expansion /
+  // selection) - so the O(rows) row-model derivation does NOT re-run on plain
+  // keyboard navigation. Without this, arrow-keying a 1,000,000-row grid re-ran
+  // the entire core->filter->sort->group pipeline on every keystroke.
+  let prevDataSlices:
+    | { sorting: unknown; columnFilters: unknown; pagination: unknown; grouping: unknown; expanded: unknown; rowSelection: unknown }
+    | null = null;
   $effect(() => {
     const unsubscribe = grid.store.subscribe(() => {
       gridStateVersion += 1;
+      const s = grid.getState();
+      if (
+        !prevDataSlices ||
+        prevDataSlices.sorting !== s.sorting ||
+        prevDataSlices.columnFilters !== s.columnFilters ||
+        prevDataSlices.pagination !== s.pagination ||
+        prevDataSlices.grouping !== s.grouping ||
+        prevDataSlices.expanded !== s.expanded ||
+        prevDataSlices.rowSelection !== s.rowSelection
+      ) {
+        dataStateVersion += 1;
+        prevDataSlices = {
+          sorting: s.sorting,
+          columnFilters: s.columnFilters,
+          pagination: s.pagination,
+          grouping: s.grouping,
+          expanded: s.expanded,
+          rowSelection: s.rowSelection,
+        };
+      }
     });
     return unsubscribe;
   });
@@ -977,7 +1014,11 @@ export function createSvGridController<
    * filters reduce the dataset.
    */
   const allRowsBeforePagination = $derived.by(() => {
-    gridStateVersion;
+    // Depend on dataStateVersion (row-model-affecting store changes) NOT
+    // gridStateVersion - so moving the active cell / selection does not force
+    // this O(rows) pipeline to re-run. Filter-input state (globalFilter etc.)
+    // and internalData are read below and tracked as their own dependencies.
+    dataStateVersion;
     // Touch internalData + internalColumns so the row model re-derives when
     // the consumer replaces the data array (e.g. via a "Reset" button).
     void internalData;
@@ -1081,7 +1122,8 @@ export function createSvGridController<
    */
   const allRows = $derived.by(() => {
     const rows = allRowsBeforePagination;
-    if (!paginationEnabled) return rows;
+    // External pagination: `data` already IS the current page - never slice.
+    if (!paginationEnabled || externalPaginationEnabled) return rows;
     const { pageIndex, pageSize } = paginationState;
     const start = pageIndex * pageSize;
     return rows.slice(start, start + pageSize);
@@ -1089,14 +1131,27 @@ export function createSvGridController<
 
   // When a filter reduces the dataset, the stored pageIndex can point beyond
   // the last valid page. Reset to page 0 so the grid never shows a blank body.
+  // Skipped for external pagination, where the consumer owns pageIndex.
   $effect(() => {
-    if (!paginationEnabled) return;
+    if (!paginationEnabled || externalPaginationEnabled) return;
     const { pageIndex, pageSize } = paginationState;
     const pageCount = Math.ceil(allRowsBeforePagination.length / pageSize);
     if (pageCount > 0 && pageIndex >= pageCount) {
       grid.setPagination({ pageIndex: 0, pageSize });
     }
   });
+
+  // Footer-facing pagination values. In external mode they come from the
+  // consumer-controlled props; otherwise from the local row model + state.
+  const paginationTotalRows = $derived(
+    externalPaginationEnabled ? (props.rowCount ?? 0) : allRowsBeforePagination.length,
+  );
+  const paginationPageIndex = $derived(
+    externalPaginationEnabled ? (props.pageIndex ?? 0) : paginationState.pageIndex,
+  );
+  const paginationPageSize = $derived(
+    externalPaginationEnabled ? (props.pageSize ?? 10) : paginationState.pageSize,
+  );
   const rowSelectionState = $derived.by(() => {
     gridStateVersion;
     return grid.getState().rowSelection ?? {};
@@ -1501,9 +1556,14 @@ export function createSvGridController<
 
   let summaryByColumn = $state<Record<string, string>>({});
   $effect(() => {
-    // Re-aggregate whenever the visible data, columns, edits, or any
-    // state that reorders/filters rows changes.
-    gridStateVersion;
+    // Re-aggregate whenever the data / columns / edits change. We depend on
+    // `allRows` / `allColumns` / `editedCellValues` DIRECTLY - not the
+    // catch-all `gridStateVersion` - because that version bumps on EVERY store
+    // change, including moving the active cell or selection. `allRows` stays
+    // referentially stable across those (sort/filter/paginate produce a new
+    // rows array; navigation does not), so this now skips the
+    // O(rows x cols) aggregation on plain keyboard navigation - which was
+    // making arrow-key movement crawl on huge grids (e.g. 1,000,000 rows).
     void editedCellValues;
     const rows = allRows;
     const columns = allColumns;
@@ -2209,6 +2269,10 @@ export function createSvGridController<
     get sortDirectionByColumn() { return sortDirectionByColumn; },
     get groupingColumns() { return groupingColumns; },
     get paginationState() { return paginationState; },
+    get externalPaginationEnabled() { return externalPaginationEnabled; },
+    get paginationTotalRows() { return paginationTotalRows; },
+    get paginationPageIndex() { return paginationPageIndex; },
+    get paginationPageSize() { return paginationPageSize; },
     get getRowColumnValue() { return getRowColumnValue; },
     get allRowsBeforePagination() { return allRowsBeforePagination; },
     get allRows() { return allRows; },
@@ -2274,6 +2338,7 @@ export function createSvGridController<
     get computeRowClass() { return computeRowClass; },
     get computeCellClass() { return computeCellClass; },
     get computeCellTooltip() { return computeCellTooltip; },
+    get computeCellValidity() { return computeCellValidity; },
     get computeCellNote() { return computeCellNote; },
     get getCellDisplayValue() { return getCellDisplayValue; },
     get getColumnAlign() { return getColumnAlign; },
@@ -2309,6 +2374,7 @@ export function createSvGridController<
     get getSelectionRects() { return getSelectionRects; },
     get fillHandleCell() { return fillHandleCell; },
     get isInFillPreview() { return isInFillPreview; },
+    get fillMarqueeEdges() { return fillMarqueeEdges; },
     get findColumnById() { return findColumnById; },
     get readCellRaw() { return readCellRaw; },
     get writeCellRaw() { return writeCellRaw; },
@@ -2402,9 +2468,9 @@ export function createSvGridController<
   const { onGridKeyDown, onWindowKeydown, onHeaderSortClick } = createKeyboard<TFeatures, TData>(ctx);
   const { computeSummaries, hasRenderedColumn } = createSummaries<TFeatures, TData>(ctx);
   const { updateFilterRow, updateFilterOperator, updateFilterMenuValue, updateFilterMenuValueTo, toggleCheckboxWithKeyboard, isColumnFiltered, closeMenus, openChooseColumns, openColumnMenu, openFilterMenu, openOperatorMenu, sortColumnFromMenu, clearColumnSort, groupByColumnFromMenu, clearGroupingFromMenu, isFacetChecked, toggleFacetValue, isAllFacetsChecked, toggleAllFacets, clearColumnFilter, changePage, goToPage, setPageSize, openContextMenu, closeContextMenu, contextMenuItems, saveComment, removeComment, closeCommentEditor } = createMenus<TFeatures, TData>(ctx);
-  const { cellConditionalFormat, computeRowClass, computeCellClass, computeCellTooltip, computeCellNote, getColumnEditorOptions, formatListCellValue, formatCellValue, formatPinnedValue, computePinnedCellClass } = createCellRender<TFeatures, TData>(ctx);
+  const { cellConditionalFormat, computeRowClass, computeCellClass, computeCellTooltip, computeCellValidity, computeCellNote, getColumnEditorOptions, formatListCellValue, formatCellValue, formatPinnedValue, computePinnedCellClass } = createCellRender<TFeatures, TData>(ctx);
   const { isCellEditable, isCellEditableAt, getRowColumnValue, getCellDisplayValue, startEditingWithChar, startEditing, stopEditing, startFullRowEdit, setFullRowDraft, commitFullRowEdit, cancelFullRowEdit, saveEditingCell, applyHistoryStep, updateEditingCellValue, onEditorKeyDown, focusOnMount, onCellDoubleClick, pasteFromClipboard, onGridPaste } = createEditing<TFeatures, TData>(ctx);
-  const { isRowSelected, toggleRowSelectionById, toggleSelectAllRows, setActiveCell, scrollActiveCellIntoView, setSelection, extendSelection, isCellInSelectedRange, getCellRangeEdges, getSelectionRects, isInFillPreview, findColumnById, onCellPointerDown, onCellPointerEnter, endDragSelection, onWindowPointerMove, onCellClick, emitCellDoubleClick } = createSelection<TFeatures, TData>(ctx);
+  const { isRowSelected, toggleRowSelectionById, toggleSelectAllRows, setActiveCell, scrollActiveCellIntoView, setSelection, extendSelection, isCellInSelectedRange, getCellRangeEdges, getSelectionRects, isInFillPreview, fillMarqueeEdges, findColumnById, onCellPointerDown, onCellPointerEnter, endDragSelection, onWindowPointerMove, onCellClick, emitCellDoubleClick } = createSelection<TFeatures, TData>(ctx);
   const { cellPinStyle, isColumnPinned, getCurrentColumnOrder, emitColumnOrder, setColumnOrderInternal, applyColumnDrop, onColumnHeaderDragStart, onColumnHeaderDragOver, onColumnHeaderDragLeave, onColumnHeaderDrop, onColumnHeaderDragEnd, pinColumnLeft, pinColumnRight, unpinColumn, toggleColumnVisibleInPanel, moveColumnInPanel, toggleGroupInPanel, getColumnBaseWidth, getColumnWidth, startColumnResize, onColumnResizeMove, endColumnResize, measureText, autosizeColumn, autosizeAllColumns, resetColumns } = createColumns<TFeatures, TData>(ctx);
   const { onRowDragStart, onRowDragOver, onRowDragLeave, onRowDrop, onRowsContainerDragOver, onRowsContainerDrop, onRowDragEnd } = createRowDrag<TFeatures, TData>(ctx);
   const { register: registerAlignedGrid, broadcastScroll: broadcastAlignedScroll, broadcastWidths: broadcastAlignedWidths } = createAlignedGrids<TFeatures, TData>(ctx);