@svgrid/grid 1.2.21 → 1.2.23

package/src/SvTree.svelte

@@ -0,0 +1,210 @@
+<script lang="ts" module>
+  export type TreeNode = {
+    id: string
+    label: string
+    children?: TreeNode[]
+    disabled?: boolean
+  }
+</script>
+
+<script lang="ts">
+  /**
+   * SvTree - a WAI-ARIA tree view. Expand/collapse, single-select highlight, and
+   * optional cascading tri-state checkboxes. Parity: Smart `smart-tree`. Keyboard:
+   * up/down move, left collapse/parent, right expand/child, Enter/Space select.
+   * The visible tree is flattened so roving-focus keyboard nav stays simple.
+   */
+  type Props = {
+    nodes: ReadonlyArray<TreeNode>
+    /** Selected node id (single-select highlight). */
+    selected?: string | null
+    onSelect?: (id: string) => void
+    /** Initially/controlled expanded ids. */
+    expandedIds?: string[]
+    onToggle?: (id: string, expanded: boolean) => void
+    /** Show cascading checkboxes; `checked` is the set of checked ids. */
+    checkable?: boolean
+    checked?: string[]
+    onCheck?: (ids: string[]) => void
+    ariaLabel?: string
+  }
+
+  let {
+    nodes,
+    selected = null,
+    onSelect,
+    expandedIds,
+    onToggle,
+    checkable = false,
+    checked = [],
+    onCheck,
+    ariaLabel,
+  }: Props = $props()
+
+  // Internal expanded set, seeded from the prop once (then self-managed unless
+  // the prop identity changes).
+  let expanded = $state<Set<string>>(new Set())
+  let seededExp = false
+  $effect(() => {
+    if (!seededExp) { seededExp = true; if (expandedIds) expanded = new Set(expandedIds) }
+  })
+
+  type Flat = { node: TreeNode; depth: number; hasChildren: boolean; open: boolean; parentId: string | null }
+
+  const flat = $derived.by<Flat[]>(() => {
+    const out: Flat[] = []
+    const walk = (list: ReadonlyArray<TreeNode>, depth: number, parentId: string | null) => {
+      for (const node of list) {
+        const hasChildren = !!node.children?.length
+        const open = expanded.has(node.id)
+        out.push({ node, depth, hasChildren, open, parentId })
+        if (hasChildren && open) walk(node.children!, depth + 1, node.id)
+      }
+    }
+    walk(nodes, 0, null)
+    return out
+  })
+
+  let active = $state(0)
+  $effect(() => { if (active >= flat.length) active = Math.max(0, flat.length - 1) })
+
+  const checkedSet = $derived(new Set(checked))
+
+  function descendantIds(node: TreeNode): string[] {
+    const ids: string[] = []
+    const walk = (n: TreeNode) => { for (const c of n.children ?? []) { ids.push(c.id); walk(c) } }
+    walk(node)
+    return ids
+  }
+  function checkState(node: TreeNode): 'checked' | 'indeterminate' | 'unchecked' {
+    if (!node.children?.length) return checkedSet.has(node.id) ? 'checked' : 'unchecked'
+    const desc = descendantIds(node)
+    const on = desc.filter((id) => checkedSet.has(id)).length
+    if (on === 0 && !checkedSet.has(node.id)) return 'unchecked'
+    if (on === desc.length) return 'checked'
+    return 'indeterminate'
+  }
+
+  function toggleExpand(node: TreeNode) {
+    if (!node.children?.length) return
+    const next = new Set(expanded)
+    const willOpen = !next.has(node.id)
+    willOpen ? next.add(node.id) : next.delete(node.id)
+    expanded = next
+    onToggle?.(node.id, willOpen)
+  }
+  function select(node: TreeNode) {
+    if (node.disabled) return
+    onSelect?.(node.id)
+  }
+  function toggleCheck(node: TreeNode) {
+    if (node.disabled) return
+    const next = new Set(checkedSet)
+    const ids = [node.id, ...descendantIds(node)]
+    const currentlyOn = checkState(node) === 'checked'
+    for (const id of ids) currentlyOn ? next.delete(id) : next.add(id)
+    onCheck?.([...next])
+  }
+
+  function onKeydown(e: KeyboardEvent) {
+    const item = flat[active]
+    if (!item) return
+    switch (e.key) {
+      case 'ArrowDown': e.preventDefault(); active = Math.min(active + 1, flat.length - 1); focusActive(); break
+      case 'ArrowUp': e.preventDefault(); active = Math.max(active - 1, 0); focusActive(); break
+      case 'ArrowRight':
+        e.preventDefault()
+        if (item.hasChildren && !item.open) toggleExpand(item.node)
+        else if (item.hasChildren && item.open) { active = Math.min(active + 1, flat.length - 1); focusActive() }
+        break
+      case 'ArrowLeft':
+        e.preventDefault()
+        if (item.hasChildren && item.open) toggleExpand(item.node)
+        else if (item.parentId) { const pi = flat.findIndex((f) => f.node.id === item.parentId); if (pi >= 0) { active = pi; focusActive() } }
+        break
+      case 'Enter': e.preventDefault(); select(item.node); break
+      case ' ': e.preventDefault(); checkable ? toggleCheck(item.node) : select(item.node); break
+      case 'Home': e.preventDefault(); active = 0; focusActive(); break
+      case 'End': e.preventDefault(); active = flat.length - 1; focusActive(); break
+    }
+  }
+
+  let treeEl: HTMLDivElement | null = null
+  function focusActive() {
+    queueMicrotask(() => treeEl?.querySelector<HTMLElement>(`[data-row="${active}"]`)?.focus())
+  }
+</script>
+
+<div bind:this={treeEl} class="sv-tree" role="tree" aria-label={ariaLabel} aria-multiselectable={checkable}>
+  {#each flat as item, i (item.node.id)}
+    {@const cs = checkable ? checkState(item.node) : 'unchecked'}
+    <div
+      class="sv-tree__row"
+      class:is-selected={item.node.id === selected}
+      class:is-disabled={item.node.disabled}
+      role="treeitem"
+      aria-level={item.depth + 1}
+      aria-selected={item.node.id === selected}
+      aria-expanded={item.hasChildren ? item.open : undefined}
+      aria-checked={checkable ? cs === 'checked' ? 'true' : cs === 'indeterminate' ? 'mixed' : 'false' : undefined}
+      data-row={i}
+      tabindex={i === active ? 0 : -1}
+      style:padding-left={`${item.depth * 18 + 6}px`}
+      onclick={() => { active = i; select(item.node) }}
+      onkeydown={onKeydown}
+    >
+      <button
+        type="button"
+        class="sv-tree__twist"
+        class:is-open={item.open}
+        class:is-leaf={!item.hasChildren}
+        tabindex="-1"
+        aria-hidden={!item.hasChildren}
+        onclick={(e) => { e.stopPropagation(); toggleExpand(item.node) }}
+      >
+        {#if item.hasChildren}
+          <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6" /></svg>
+        {/if}
+      </button>
+      {#if checkable}
+        <button type="button" class="sv-tree__check is-{cs}" tabindex="-1" aria-hidden="true" onclick={(e) => { e.stopPropagation(); toggleCheck(item.node) }}>
+          {#if cs === 'checked'}<svg viewBox="0 0 16 16"><path d="M3.5 8.5l3 3 6-6.5" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" /></svg>
+          {:else if cs === 'indeterminate'}<svg viewBox="0 0 16 16"><path d="M4 8h8" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" /></svg>{/if}
+        </button>
+      {/if}
+      <span class="sv-tree__label">{item.node.label}</span>
+    </div>
+  {/each}
+</div>
+
+<style>
+  .sv-tree {
+    --_accent: var(--sg-accent, #2563eb);
+    width: 260px; padding: 4px; user-select: none;
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--sg-border, #e2e8f0); border-radius: var(--sg-radius, 8px);
+    font-size: 13px;
+  }
+  .sv-tree__row {
+    display: flex; align-items: center; gap: 4px; height: 30px; padding-right: 8px;
+    border-radius: 6px; cursor: pointer; outline: none;
+  }
+  .sv-tree__row:hover:not(.is-disabled) { background: var(--sg-row-hover-bg, #f1f5f9); }
+  .sv-tree__row.is-selected { background: color-mix(in srgb, var(--_accent) 15%, transparent); color: var(--_accent); font-weight: 600; }
+  .sv-tree__row.is-disabled { opacity: 0.45; cursor: not-allowed; }
+  .sv-tree__row:focus-visible { box-shadow: inset 0 0 0 2px var(--sg-focus-ring, var(--_accent)); }
+  .sv-tree__twist {
+    display: grid; place-items: center; width: 18px; height: 18px; flex: none;
+    background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; transition: transform 0.12s;
+  }
+  .sv-tree__twist.is-open { transform: rotate(90deg); }
+  .sv-tree__twist.is-leaf { visibility: hidden; }
+  .sv-tree__check {
+    display: grid; place-items: center; width: 16px; height: 16px; flex: none; padding: 0;
+    border: 1.5px solid var(--sg-border, #cbd5e1); border-radius: 4px; background: var(--sg-input-bg, #fff);
+    color: var(--sg-on-accent, #fff); cursor: pointer;
+  }
+  .sv-tree__check.is-checked, .sv-tree__check.is-indeterminate { background: var(--_accent); border-color: var(--_accent); }
+  .sv-tree__check svg { width: 100%; height: 100%; }
+  .sv-tree__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+</style>

package/src/build-api.ts

@@ -47,6 +47,18 @@ import {
   getDateFormatter,
   resolveDatePattern,
 } from "./cell-formatting";
+import {
+  projectGridRows,
+  serializeDelimited,
+  serializeJson,
+  serializeMarkdown,
+  downloadTextFile,
+  copyTextToClipboard,
+  type GridExportColumn,
+  type GridExportScope,
+  type GridExportOptions,
+  type GridClipboardOptions,
+} from "./export-format";
 import {
   RenderSnippetConfig,
   RenderComponentConfig,
@@ -128,6 +140,42 @@ export function createGridApi<
   function buildApi(): SvGridApi<TFeatures, TData> {
     const findColumn = (columnId: string) =>
       ctx.grid.getAllColumns().find((column: any) => column.id === columnId);
+
+    // --- Free data export (CSV / TSV / JSON + clipboard) helpers ----------
+    // Snapshot the VISIBLE columns (field + label + format + align) so the
+    // exporter reproduces on-screen values. Mirrors getColumns()'s visible set.
+    const exportColumns = (): GridExportColumn[] =>
+      ctx.allColumns
+        .map((c: any) => ({
+          field: (c.columnDef as { field?: string }).field as string,
+          header:
+            typeof c.columnDef.header === "string" ? c.columnDef.header : c.id,
+          format: c.columnDef.format,
+          align: getColumnAlign(c),
+        }))
+        .filter((c: GridExportColumn) => !!c.field);
+    // Rows for the requested scope: current view / checked / full dataset.
+    const exportScopeRows = (scope: GridExportScope): TData[] => {
+      if (scope === "all") return ctx.internalData as TData[];
+      const out: TData[] = [];
+      for (const row of ctx.allRows) {
+        if (isGroupRow(row)) continue;
+        if (scope === "selected" && !ctx.rowSelectionState[row.id]) continue;
+        out.push(row.original as TData);
+      }
+      return out;
+    };
+    const projectForExport = (
+      scope: GridExportScope,
+      columns: ReadonlyArray<string> | undefined,
+      rawValues: boolean | undefined,
+    ) =>
+      projectGridRows(
+        exportScopeRows(scope) as ReadonlyArray<Record<string, unknown>>,
+        exportColumns(),
+        { columns, rawValues },
+      );
+
     return {
       getCellValue(rowIndex, columnId) {
         const row = ctx.internalData[rowIndex];
@@ -409,6 +457,12 @@ export function createGridApi<
               ? c.columnDef.header
               : c.id,
           visible,
+          // Surface the format + alignment so exporters can reproduce the
+          // on-screen display value (currency symbol, date pattern, etc.)
+          // instead of dumping raw values. `getColumnAlign` applies the same
+          // editorType-based default the body uses.
+          format: c.columnDef.format,
+          align: getColumnAlign(c),
         });
         // Visible columns first, in their current visual order...
         const out = ctx.allColumns.map((c: any) => describe(c, true));
@@ -421,6 +475,67 @@ export function createGridApi<
         }
         return out;
       },
+      // ---- Free data export (CSV / TSV / JSON + clipboard) -----------------
+      async exportCsv(options: GridExportOptions = {}) {
+        const { records, fields } = projectForExport(
+          options.rows ?? "displayed",
+          options.columns,
+          options.rawValues,
+        );
+        const text = await serializeDelimited(records, fields, {
+          csv: { delimiter: ",", bom: options.bom ?? true },
+          signal: options.signal,
+          onProgress: options.onProgress,
+        });
+        if (options.download !== false)
+          downloadTextFile(text, `${options.filename ?? "grid"}.csv`, "text/csv;charset=utf-8");
+        return text;
+      },
+      async exportTsv(options: GridExportOptions = {}) {
+        const { records, fields } = projectForExport(
+          options.rows ?? "displayed",
+          options.columns,
+          options.rawValues,
+        );
+        const text = await serializeDelimited(records, fields, {
+          csv: { delimiter: "\t", bom: options.bom ?? true },
+          signal: options.signal,
+          onProgress: options.onProgress,
+        });
+        if (options.download !== false)
+          downloadTextFile(text, `${options.filename ?? "grid"}.tsv`, "text/tab-separated-values;charset=utf-8");
+        return text;
+      },
+      async exportJson(options: GridExportOptions = {}) {
+        const { records, fields } = projectForExport(
+          options.rows ?? "displayed",
+          options.columns,
+          options.rawValues,
+        );
+        const text = await serializeJson(records, fields, {
+          signal: options.signal,
+          onProgress: options.onProgress,
+        });
+        if (options.download !== false)
+          downloadTextFile(text, `${options.filename ?? "grid"}.json`, "application/json");
+        return text;
+      },
+      async copyToClipboard(options: GridClipboardOptions = {}) {
+        const { records, fields, align } = projectForExport(
+          options.rows ?? "displayed",
+          options.columns,
+          options.rawValues,
+        );
+        const format = options.format ?? "tsv";
+        const text =
+          format === "markdown"
+            ? await serializeMarkdown(records, fields, { align })
+            : await serializeDelimited(records, fields, {
+                csv: { delimiter: format === "csv" ? "," : "\t", bom: false },
+              });
+        await copyTextToClipboard(text);
+        return text;
+      },
       clearRowSelection() {
         // Wipe the internal selection map AND emit the change so any
         // consumer holding a derived `selectedRows` resets too.

package/src/cell-render.test.ts

@@ -81,6 +81,44 @@ describe('createCellRender / cellConditionalFormat', () => {
   })
 })
 
+describe('createCellRender / computeCellValidity', () => {
+  const validateSalary = ({ value }: { value: unknown }) =>
+    Number(value) >= 1000 ? true : 'Salary must be at least $1,000'
+
+  it('returns valid when no validate hook is configured', () => {
+    const cr = createCellRender(makeCtx({ editedCellValues: {} }))
+    const out = cr.computeCellValidity(makeRow('r', { salary: 5 }), makeColumn('salary'))
+    expect(out).toEqual({ invalid: false, message: null })
+  })
+
+  it('flags bad base data on load (message becomes the tooltip)', () => {
+    const cr = createCellRender(makeCtx({ editedCellValues: {} }))
+    const col = makeColumn('salary', { validate: validateSalary })
+    const out = cr.computeCellValidity(makeRow('r3', { salary: -5000 }), col)
+    expect(out).toEqual({ invalid: true, message: 'Salary must be at least $1,000' })
+  })
+
+  it('re-validates against the edit overlay, not the stale cached base value', () => {
+    // The row still reports the old (bad) value via getCellValueByColumnId -
+    // inline edits are not written into the row's memoized value cache. The
+    // edited value lives in editedCellValues keyed rowId:colId; validity must
+    // read THAT so a cell clears/lights up live as the user types.
+    const col = makeColumn('salary', { validate: validateSalary })
+
+    const fixed = createCellRender(makeCtx({ editedCellValues: { 'r3:salary': 85000 } }))
+    expect(fixed.computeCellValidity(makeRow('r3', { salary: -5000 }), col)).toEqual({
+      invalid: false,
+      message: null,
+    })
+
+    const broken = createCellRender(makeCtx({ editedCellValues: { 'r1:salary': 5 } }))
+    expect(broken.computeCellValidity(makeRow('r1', { salary: 85000 }), col)).toEqual({
+      invalid: true,
+      message: 'Salary must be at least $1,000',
+    })
+  })
+})
+
 describe('createCellRender / computeRowClass', () => {
   it('returns empty string when no rowClass configured', () => {
     const cr = createCellRender(makeCtx())

package/src/cell-render.ts

@@ -201,6 +201,48 @@ export function createCellRender<
     return null
   }
 
+  /**
+   * Resolve per-cell validity via the column's declarative `validate` hook.
+   * Runs for every rendered cell so pre-existing bad data is flagged on load.
+   * Returns `{ invalid, message }` - `invalid` drives the red highlight class,
+   * `message` (when present) becomes the cell's tooltip.
+   */
+  function computeCellValidity(
+    row: Row<TData>,
+    column: Column<TData>,
+  ): { invalid: boolean; message: string | null } {
+    const rule = column.columnDef.validate as
+      | ((params: {
+          value: unknown
+          row: TData
+          rowIndex: number
+          column: Column<TData>
+        }) => string | boolean | null | undefined)
+      | undefined
+    if (typeof rule !== "function") return { invalid: false, message: null }
+    // Read the edit-aware value: inline edits land in `editedCellValues`
+    // (keyed rowId:colId) and are NOT written into the row's memoized value
+    // cache, so `getCellValueByColumnId` would return the stale pre-edit value
+    // and validation would never re-run after an edit. Consult the overlay
+    // first - same rule the display path (getCellDisplayValue) and summaries
+    // use - so a cell re-validates live as the user types.
+    const edited = ctx.editedCellValues ?? {}
+    const key = getCellKey(row.id, column.id)
+    const value =
+      key in edited ? edited[key] : row.getCellValueByColumnId(column.id)
+    const out = rule({
+      value,
+      row: row.original as TData,
+      rowIndex: row.index,
+      column,
+    })
+    // Valid: null / undefined / true. Invalid: false or a message string.
+    if (out == null || out === true) return { invalid: false, message: null }
+    if (out === false) return { invalid: true, message: null }
+    const msg = String(out)
+    return { invalid: true, message: msg.trim() ? msg : null }
+  }
+
   /**
    * Resolve a per-cell note (a longer comment / annotation). Notes
    * come from the grid's `notes` prop - a `{ [rowId]: { [columnId]: string } }`
@@ -416,6 +458,7 @@ export function createCellRender<
     computeRowClass,
     computeCellClass,
     computeCellTooltip,
+    computeCellValidity,
     computeCellNote,
     getColumnEditorOptions,
     formatListCellValue,

package/src/clipboard.test.ts

@@ -668,6 +668,24 @@ describe('clearSelectedCells', () => {
     expect(ctx.grid.store.setState).toHaveBeenCalled()
   })
 
+  it('fires onCellValueChange per cleared cell (so formula engines recompute)', () => {
+    const onCellValueChange = vi.fn()
+    const ctx = makeCtx({
+      columns: [{ id: 'a', field: 'a', editable: true, editorType: 'text' }],
+      data: [{ a: 'hello' }],
+    })
+    ctx.props.onCellValueChange = onCellValueChange
+    ctx.selectionRange = {
+      anchor: { rowIndex: 0, colIndex: 0 },
+      focus: { rowIndex: 0, colIndex: 0 },
+    }
+    const cb = createClipboard(ctx)
+    cb.clearSelectedCells()
+    expect(onCellValueChange).toHaveBeenCalledWith(
+      expect.objectContaining({ rowIndex: 0, columnId: 'a', oldValue: 'hello', newValue: '' }),
+    )
+  })
+
   it('clears a number cell via parseEditorValue coercion', () => {
     const ctx = makeCtx({
       columns: [{ id: 'a', field: 'a', editable: true, editorType: 'number' }],

package/src/clipboard.ts

@@ -488,6 +488,13 @@ export function createClipboard<
 
     const next = ctx.internalData.slice() as Array<TData>;
     let mutated = false;
+    const changes: Array<{
+      rowIndex: number
+      columnId: string
+      oldValue: unknown
+      newValue: unknown
+      row: TData
+    }> = [];
     for (let r = startRow; r <= endRow; r += 1) {
       const row = ctx.allRows[r];
       if (!row || isGroupRow(row)) continue;
@@ -511,8 +518,18 @@ export function createClipboard<
         // else. parseEditorValue handles the per-type coercion.
         const editorType = (column.columnDef.editorType ??
           "text") as CellEditorType;
-        updated[column.columnDef.field] = parseEditorValue(editorType, "");
+        const field = column.columnDef.field;
+        const oldValue = updated[field];
+        const cleared = parseEditorValue(editorType, "");
+        updated[field] = cleared;
         rowChanged = true;
+        changes.push({
+          rowIndex: dataIndex,
+          columnId: column.id,
+          oldValue,
+          newValue: cleared,
+          row: updated as TData,
+        });
       }
       if (rowChanged) {
         next[dataIndex] = updated as TData;
@@ -522,6 +539,12 @@ export function createClipboard<
     if (mutated) {
       ctx.internalData = next;
       ctx.grid.store.setState((prev: any) => ({ ...prev }));
+      // Fire onCellValueChange per cleared cell - same as paste's writeCellRaw -
+      // so consumers (formula engines, autosave) recompute. Clear IS a value
+      // change; without this, a HyperFormula-backed grid wouldn't re-evaluate.
+      if (ctx.props.onCellValueChange) {
+        for (const ch of changes) ctx.props.onCellValueChange(ch);
+      }
     }
     return mutated;
   }

package/src/collaboration.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, it, vi } from 'vitest'
 import {
+  broadcastChannelTransport,
   createCollaboration,
   type CollabMessage,
   type CollabTransport,
@@ -37,6 +38,35 @@ describe('createCollaboration', () => {
     b.dispose()
   })
 
+  it('closes the transport channel on dispose (#82)', () => {
+    // The controller now forwards dispose to the transport...
+    const disposeSpy = vi.fn()
+    const collab = createCollaboration({
+      user: userA,
+      transport: { post: vi.fn(), subscribe: () => () => {}, dispose: disposeSpy },
+    })
+    collab.dispose()
+    expect(disposeSpy).toHaveBeenCalledTimes(1)
+
+    // ...and broadcastChannelTransport.dispose() closes the BroadcastChannel.
+    const close = vi.fn()
+    class FakeBroadcastChannel {
+      postMessage = vi.fn()
+      addEventListener = vi.fn()
+      removeEventListener = vi.fn()
+      close = close
+      constructor(public name: string) {}
+    }
+    const Orig = (globalThis as { BroadcastChannel?: unknown }).BroadcastChannel
+    ;(globalThis as { BroadcastChannel?: unknown }).BroadcastChannel = FakeBroadcastChannel
+    try {
+      broadcastChannelTransport('room').dispose?.()
+      expect(close).toHaveBeenCalledTimes(1)
+    } finally {
+      ;(globalThis as { BroadcastChannel?: unknown }).BroadcastChannel = Orig
+    }
+  })
+
   it('setCell propagates a remote cursor', () => {
     const bus = makeBus()
     const onPeers = vi.fn()

package/src/collaboration.ts

@@ -32,6 +32,8 @@ export type CollabMessage =
 export type CollabTransport = {
   post(msg: CollabMessage): void
   subscribe(handler: (msg: CollabMessage) => void): () => void
+  /** Release any underlying resource (e.g. a BroadcastChannel). Optional. */
+  dispose?(): void
 }
 
 export type Collaboration = {
@@ -75,6 +77,9 @@ export function broadcastChannelTransport(name: string): CollabTransport {
       channel.addEventListener('message', listener)
       return () => channel.removeEventListener('message', listener)
     },
+    dispose() {
+      channel?.close()
+    },
   }
 }
 
@@ -156,6 +161,7 @@ export function createCollaboration(options: CollaborationOptions): Collaboratio
       transport.post({ kind: 'bye', userId: user.id })
       unsubscribe()
       if (pruneTimer) clearInterval(pruneTimer)
+      transport.dispose?.() // release the channel (BroadcastChannel etc.)
     },
   }
 }

package/src/core.ts

@@ -221,9 +221,12 @@ export type ColumnDef<TFeatures extends TableFeatures, TData extends RowData> =
   editorType?:
     | 'text'
     | 'number'
-    | 'date'
-    | 'datetime'
-    | 'time'         // native <input type="time"> - HH:MM or HH:MM:SS
+    | 'date'         // rich SvCalendar popover (opt out with 'date-native')
+    | 'datetime'     // rich SvDateTimePicker (opt out with 'datetime-native')
+    | 'time'         // rich SvTimePicker dial (opt out with 'time-native')
+    | 'date-native'      // plain <input type="date">
+    | 'datetime-native'  // plain <input type="datetime-local">
+    | 'time-native'      // plain <input type="time"> - HH:MM or HH:MM:SS
     | 'password'     // native <input type="password"> with masked rendering
     | 'checkbox'
     | 'list'
@@ -251,6 +254,27 @@ export type ColumnDef<TFeatures extends TableFeatures, TData extends RowData> =
    * string skips the tooltip.
    */
   tooltip?: string | ((ctx: CellContext<TData>) => string | null | undefined)
+  /**
+   * Declarative per-cell validation (Handsontable-style). Runs for EVERY
+   * rendered cell - including values already present in `data` on load, not
+   * just on edit - so bad data is flagged immediately. Invalid cells get the
+   * `sv-grid-cell-invalid` class (red highlight) and the returned message as
+   * their tooltip.
+   *
+   * Return value:
+   *   - `null` / `undefined` / `true` → valid (no highlight)
+   *   - `false`                       → invalid, no message
+   *   - a non-empty `string`          → invalid, string is the tooltip
+   *
+   * The value keeps rendering as-is (the grid does NOT roll it back); pair
+   * with `onCellValueChange` if you also want to reject the commit.
+   */
+  validate?: (params: {
+    value: unknown
+    row: TData
+    rowIndex: number
+    column: Column<TData>
+  }) => string | boolean | null | undefined
   /**
    * Gate editing per column or per cell.
    *