@svgrid/grid 1.2.22 → 1.2.24

package/dist/SvTimePicker.svelte

@@ -0,0 +1,201 @@
+<script lang="ts" module>
+  export type { TimeValue } from './createTimePicker.svelte'
+</script>
+
+<script lang="ts">
+  /**
+   * SvTimePicker - an analog clock-dial time picker (parity: Smart
+   * `smart-time-picker`). 12/24-hour, minute snapping, hour->minute auto-switch,
+   * pointer-drag + keyboard. It is a styled renderer over the headless
+   * `createTimePicker` core: the core owns the value math, dial geometry, keyboard
+   * and ARIA; this component keeps the DOM-bound pointer capture + hit-testing.
+   * All visuals come from `--sg-*` tokens so every theme applies for free.
+   */
+  import { createTimePicker, type TimeValue, type TimeFormat, type TimeSelection } from './createTimePicker.svelte'
+
+  type Props = {
+    /** Date, "HH:MM[:SS]" string, or epoch ms. */
+    value?: TimeValue
+    /** Fires with a Date (today's date carrying the picked time). */
+    onChange?: (value: Date) => void
+    format?: TimeFormat
+    minuteInterval?: number
+    /** After picking an hour, jump the dial to minutes. Default true. */
+    autoSwitchToMinutes?: boolean
+    /** Show the Now footer button. */
+    footer?: boolean
+    disabled?: boolean
+    readonly?: boolean
+    name?: string
+    /** Which dial opens first. */
+    selection?: TimeSelection
+  }
+
+  let {
+    value = null,
+    onChange,
+    format = '24-hour',
+    minuteInterval = 1,
+    autoSwitchToMinutes = true,
+    footer = false,
+    disabled = false,
+    readonly = false,
+    name,
+    selection = 'hour',
+  }: Props = $props()
+
+  // The headless core owns all state, geometry, keyboard + ARIA. Reactive inputs
+  // are getters; callbacks are closures.
+  const tp = createTimePicker({
+    value: () => value,
+    onChange: (d) => onChange?.(d),
+    format: () => format,
+    minuteInterval: () => minuteInterval,
+    autoSwitchToMinutes: () => autoSwitchToMinutes,
+    disabled: () => disabled,
+    readonly: () => readonly,
+    selection: () => selection,
+  })
+
+  // --- Pointer drag on the dial (DOM-bound; stays in the component) -----------
+  // The core exposes SIZE/C + a pure `pointerSelect(angle, dist)`; here we only
+  // turn a pointer event into that angle via the live element rect.
+  let dialEl: SVGSVGElement | null = null
+  let dragging = false
+
+  function angleFromEvent(e: PointerEvent): { angle: number; dist: number } {
+    const rect = dialEl!.getBoundingClientRect()
+    const scale = tp.SIZE / rect.width
+    const x = (e.clientX - rect.left) * scale - tp.C
+    const y = (e.clientY - rect.top) * scale - tp.C
+    let deg = (Math.atan2(y, x) * 180) / Math.PI + 90
+    if (deg < 0) deg += 360
+    return { angle: deg, dist: Math.hypot(x, y) }
+  }
+
+  function onDialPointerDown(e: PointerEvent) {
+    if (!tp.isInteractive) return
+    dragging = true
+    dialEl?.setPointerCapture(e.pointerId)
+    const { angle, dist } = angleFromEvent(e)
+    tp.pointerSelect(angle, dist)
+  }
+  function onDialPointerMove(e: PointerEvent) {
+    if (!dragging) return
+    const { angle, dist } = angleFromEvent(e)
+    tp.pointerSelect(angle, dist)
+  }
+  function onDialPointerUp(e: PointerEvent) {
+    if (!dragging) return
+    dragging = false
+    dialEl?.releasePointerCapture(e.pointerId)
+    tp.endPointer()
+  }
+</script>
+
+<div class="sv-tp" class:sv-tp--disabled={disabled} role="group" aria-label="Time picker">
+  <div class="sv-tp__head">
+    <button class="sv-tp__seg" class:is-active={tp.selection === 'hour'} {...tp.segProps('hour')}>
+      {String(tp.displayHour).padStart(2, '0')}
+    </button>
+    <span class="sv-tp__colon">:</span>
+    <button class="sv-tp__seg" class:is-active={tp.selection === 'minute'} {...tp.segProps('minute')}>
+      {tp.mm}
+    </button>
+    {#if tp.is12}
+      <div class="sv-tp__ampm">
+        <button class:is-active={!tp.isPm} {...tp.ampmProps(false)}>AM</button>
+        <button class:is-active={tp.isPm} {...tp.ampmProps(true)}>PM</button>
+      </div>
+    {/if}
+  </div>
+
+  <svg
+    bind:this={dialEl}
+    class="sv-tp__dial"
+    viewBox={`0 0 ${tp.SIZE} ${tp.SIZE}`}
+    width="100%"
+    {...tp.dialProps()}
+    onpointerdown={onDialPointerDown}
+    onpointermove={onDialPointerMove}
+    onpointerup={onDialPointerUp}
+    onpointercancel={onDialPointerUp}
+  >
+    <circle class="sv-tp__face" cx={tp.C} cy={tp.C} r={tp.C - 4} />
+    <!-- hand -->
+    <line class="sv-tp__hand" x1={tp.C} y1={tp.C} x2={tp.handEnd.x} y2={tp.handEnd.y} />
+    <circle class="sv-tp__hub" cx={tp.C} cy={tp.C} r="3" />
+    <circle class="sv-tp__knob" cx={tp.handEnd.x} cy={tp.handEnd.y} r="15" />
+    {#if tp.selection === 'hour'}
+      {#each tp.hourTicks as t (t.ring + '-' + t.value)}
+        <text class="sv-tp__num" class:is-active={tp.isActiveHour(t)} class:is-inner={t.ring === 'inner'} x={t.x} y={t.y} dominant-baseline="central" text-anchor="middle">{t.label}</text>
+      {/each}
+    {:else}
+      {#each tp.minuteTicks as t (t.value)}
+        <text class="sv-tp__num" class:is-active={t.value === tp.minutes} x={t.x} y={t.y} dominant-baseline="central" text-anchor="middle">{t.label}</text>
+      {/each}
+    {/if}
+  </svg>
+
+  {#if footer}
+    <div class="sv-tp__footer">
+      <button class="sv-tp__now" {...tp.nowProps()}>Now</button>
+    </div>
+  {/if}
+
+  {#if name}<input type="hidden" {name} value={`${String(tp.hours).padStart(2, '0')}:${tp.mm}`} />{/if}
+</div>
+
+<style>
+  .sv-tp {
+    --_accent: var(--sg-accent, #2563eb);
+    --_bg: var(--sg-bg, #fff);
+    --_fg: var(--sg-fg, #0f172a);
+    --_muted: var(--sg-muted, #64748b);
+    --_border: var(--sg-border, #e2e8f0);
+    --_face: var(--sg-header-bg, #f1f5f9);
+    --_radius: var(--sg-radius, 8px);
+    display: inline-flex; flex-direction: column; gap: 10px; align-items: center;
+    width: 260px; padding: 12px;
+    background: var(--_bg); color: var(--_fg);
+    border: 1px solid var(--_border); border-radius: calc(var(--_radius) + 4px);
+    user-select: none;
+  }
+  .sv-tp--disabled { opacity: 0.55; pointer-events: none; }
+
+  .sv-tp__head { display: flex; align-items: center; gap: 2px; font-variant-numeric: tabular-nums; }
+  .sv-tp__seg {
+    font-size: 30px; font-weight: 700; line-height: 1;
+    background: none; border: 0; color: var(--_muted); cursor: pointer;
+    padding: 2px 6px; border-radius: var(--_radius);
+  }
+  .sv-tp__seg.is-active { color: var(--_accent); background: color-mix(in srgb, var(--_accent) 12%, transparent); }
+  .sv-tp__colon { font-size: 28px; font-weight: 700; color: var(--_muted); }
+  .sv-tp__ampm { display: flex; flex-direction: column; margin-left: 8px; gap: 2px; }
+  .sv-tp__ampm button {
+    font-size: 11px; font-weight: 700; padding: 3px 8px;
+    background: none; border: 1px solid var(--_border); border-radius: 6px; color: var(--_muted); cursor: pointer;
+  }
+  .sv-tp__ampm button.is-active { background: var(--_accent); color: var(--sg-on-accent, #fff); border-color: var(--_accent); }
+
+  .sv-tp__dial { touch-action: none; cursor: pointer; outline: none; display: block; width: 100%; height: auto; aspect-ratio: 1; }
+  .sv-tp__dial:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: 2px; border-radius: 50%; }
+  .sv-tp__face { fill: var(--_face); }
+  .sv-tp__hand { stroke: var(--_accent); stroke-width: 2; }
+  .sv-tp__hub { fill: var(--_accent); }
+  .sv-tp__knob { fill: var(--_accent); opacity: 0.9; }
+  .sv-tp__num {
+    font-size: 13px; fill: var(--_fg); pointer-events: none;
+    font-family: inherit;
+  }
+  .sv-tp__num.is-inner { font-size: 11px; fill: var(--_muted); }
+  .sv-tp__num.is-active { fill: var(--sg-on-accent, #fff); font-weight: 700; }
+
+  .sv-tp__footer { width: 100%; display: flex; justify-content: center; border-top: 1px solid var(--_border); padding-top: 8px; }
+  .sv-tp__now {
+    padding: 5px 14px; font: inherit; font-size: 12px; font-weight: 600;
+    background: none; border: 1px solid var(--_border); border-radius: var(--_radius);
+    color: var(--_accent); cursor: pointer;
+  }
+  .sv-tp__now:hover { background: color-mix(in srgb, var(--_accent) 10%, transparent); }
+</style>

package/dist/SvTimePicker.svelte.d.ts

@@ -0,0 +1,30 @@
+export type { TimeValue } from './createTimePicker.svelte';
+/**
+   * SvTimePicker - an analog clock-dial time picker (parity: Smart
+   * `smart-time-picker`). 12/24-hour, minute snapping, hour->minute auto-switch,
+   * pointer-drag + keyboard. It is a styled renderer over the headless
+   * `createTimePicker` core: the core owns the value math, dial geometry, keyboard
+   * and ARIA; this component keeps the DOM-bound pointer capture + hit-testing.
+   * All visuals come from `--sg-*` tokens so every theme applies for free.
+   */
+import { type TimeValue, type TimeFormat, type TimeSelection } from './createTimePicker.svelte';
+type Props = {
+    /** Date, "HH:MM[:SS]" string, or epoch ms. */
+    value?: TimeValue;
+    /** Fires with a Date (today's date carrying the picked time). */
+    onChange?: (value: Date) => void;
+    format?: TimeFormat;
+    minuteInterval?: number;
+    /** After picking an hour, jump the dial to minutes. Default true. */
+    autoSwitchToMinutes?: boolean;
+    /** Show the Now footer button. */
+    footer?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    name?: string;
+    /** Which dial opens first. */
+    selection?: TimeSelection;
+};
+declare const SvTimePicker: import("svelte").Component<Props, {}, "">;
+type SvTimePicker = ReturnType<typeof SvTimePicker>;
+export default SvTimePicker;

package/dist/SvToggleButton.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  /**
+   * SvToggleButton - a button with a pressed on/off state (aria-pressed).
+   * Parity: Smart `smart-toggle-button`. Controlled via `pressed` + `onChange`.
+   */
+  import type { Snippet } from 'svelte'
+  import { createToggle } from './createToggle.svelte'
+
+  type Props = {
+    pressed?: boolean
+    onChange?: (pressed: boolean) => void
+    disabled?: boolean
+    size?: 'sm' | 'md' | 'lg'
+    ariaLabel?: string
+    children?: Snippet
+  }
+
+  let { pressed = false, onChange, disabled = false, size = 'md', ariaLabel, children }: Props = $props()
+
+  // The styled toggle is just a renderer over the headless core.
+  const t = createToggle({
+    pressed: () => pressed,
+    onChange: (v) => onChange?.(v),
+    disabled: () => disabled,
+    ariaLabel: () => ariaLabel,
+  })
+</script>
+
+<button
+  class="sv-toggle sv-toggle--{size}"
+  class:is-pressed={pressed}
+  {...t.buttonProps()}
+>
+  {#if children}{@render children()}{/if}
+</button>
+
+<style>
+  .sv-toggle {
+    --_accent: var(--sg-accent, #2563eb);
+    --_border: var(--sg-border, #cbd5e1);
+    --_radius: var(--sg-radius, 8px);
+    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+    font: inherit; font-weight: 600; line-height: 1;
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--_border); border-radius: var(--_radius); cursor: pointer; user-select: none;
+    transition: background 0.12s, border-color 0.12s, color 0.12s;
+  }
+  .sv-toggle--sm { padding: 5px 10px; font-size: 12px; }
+  .sv-toggle--md { padding: 8px 13px; font-size: 13px; }
+  .sv-toggle--lg { padding: 11px 17px; font-size: 15px; }
+  .sv-toggle:hover:not([disabled]):not(.is-pressed) { background: var(--sg-row-hover-bg, #f1f5f9); }
+  .sv-toggle.is-pressed {
+    background: var(--_accent); color: var(--sg-on-accent, #fff); border-color: var(--_accent);
+  }
+  .sv-toggle[disabled] { opacity: 0.55; cursor: not-allowed; }
+  .sv-toggle:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: 2px; }
+</style>

package/dist/SvToggleButton.svelte.d.ts

@@ -0,0 +1,16 @@
+/**
+   * SvToggleButton - a button with a pressed on/off state (aria-pressed).
+   * Parity: Smart `smart-toggle-button`. Controlled via `pressed` + `onChange`.
+   */
+import type { Snippet } from 'svelte';
+type Props = {
+    pressed?: boolean;
+    onChange?: (pressed: boolean) => void;
+    disabled?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    ariaLabel?: string;
+    children?: Snippet;
+};
+declare const SvToggleButton: import("svelte").Component<Props, {}, "">;
+type SvToggleButton = ReturnType<typeof SvToggleButton>;
+export default SvToggleButton;

package/dist/SvTree.svelte

@@ -0,0 +1,131 @@
+<script lang="ts" module>
+  export type { TreeNode } from './createTree.svelte'
+</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 behavior (flattening, cascade math, keyboard, ARIA) lives in the headless
+   * `createTree` core; this component is just one styled renderer over it.
+   */
+  import { createTree, type TreeNode } from './createTree.svelte'
+
+  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()
+
+  const tree = createTree({
+    nodes: () => nodes,
+    selected: () => selected,
+    onSelect: (id) => onSelect?.(id),
+    expandedIds: () => expandedIds,
+    onToggle: (id, exp) => onToggle?.(id, exp),
+    checkable: () => checkable,
+    checked: () => checked,
+    onCheck: (ids) => onCheck?.(ids),
+    ariaLabel: () => ariaLabel,
+  })
+
+  // DOM focus movement is a render concern: follow the core's roving focus row.
+  let treeEl: HTMLDivElement | null = null
+  let lastFocusTick = 0
+  $effect(() => {
+    if (tree.focusTick !== lastFocusTick) {
+      lastFocusTick = tree.focusTick
+      const i = tree.activeIndex
+      queueMicrotask(() => treeEl?.querySelector<HTMLElement>(`[data-row="${i}"]`)?.focus())
+    }
+  })
+</script>
+
+<div bind:this={treeEl} class="sv-tree" {...tree.treeProps()}>
+  {#each tree.rows as item (item.node.id)}
+    {@const cs = checkable ? tree.checkStateOf(item.node) : 'unchecked'}
+    <div
+      class="sv-tree__row"
+      class:is-selected={item.node.id === selected}
+      class:is-disabled={item.node.disabled}
+      style:padding-left={`${item.depth * 18 + 6}px`}
+      {...tree.itemProps(item)}
+    >
+      <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(); tree.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(); tree.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/dist/SvTree.svelte.d.ts

@@ -0,0 +1,27 @@
+export type { TreeNode } from './createTree.svelte';
+/**
+   * 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 behavior (flattening, cascade math, keyboard, ARIA) lives in the headless
+   * `createTree` core; this component is just one styled renderer over it.
+   */
+import { type TreeNode } from './createTree.svelte';
+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;
+};
+declare const SvTree: import("svelte").Component<Props, {}, "">;
+type SvTree = ReturnType<typeof SvTree>;
+export default SvTree;

package/dist/build-api.js

@@ -1,8 +1,35 @@
 import "./sv-grid-scrollbar";
-import { isGroupRow, columnDefMatchesId, } from "./cell-values";
+import { projectGridRows, serializeDelimited, serializeJson, serializeMarkdown, downloadTextFile, copyTextToClipboard, } from "./export-format";
+import { isGroupRow, getColumnAlign, columnDefMatchesId, } from "./cell-values";
 export function createGridApi(ctx) {
     function buildApi() {
         const findColumn = (columnId) => ctx.grid.getAllColumns().find((column) => 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 = () => ctx.allColumns
+            .map((c) => ({
+            field: c.columnDef.field,
+            header: typeof c.columnDef.header === "string" ? c.columnDef.header : c.id,
+            format: c.columnDef.format,
+            align: getColumnAlign(c),
+        }))
+            .filter((c) => !!c.field);
+        // Rows for the requested scope: current view / checked / full dataset.
+        const exportScopeRows = (scope) => {
+            if (scope === "all")
+                return ctx.internalData;
+            const out = [];
+            for (const row of ctx.allRows) {
+                if (isGroupRow(row))
+                    continue;
+                if (scope === "selected" && !ctx.rowSelectionState[row.id])
+                    continue;
+                out.push(row.original);
+            }
+            return out;
+        };
+        const projectForExport = (scope, columns, rawValues) => projectGridRows(exportScopeRows(scope), exportColumns(), { columns, rawValues });
         return {
             getCellValue(rowIndex, columnId) {
                 const row = ctx.internalData[rowIndex];
@@ -281,6 +308,12 @@ export function createGridApi(ctx) {
                         ? 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) => describe(c, true));
@@ -294,6 +327,50 @@ export function createGridApi(ctx) {
                 }
                 return out;
             },
+            // ---- Free data export (CSV / TSV / JSON + clipboard) -----------------
+            async exportCsv(options = {}) {
+                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 = {}) {
+                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 = {}) {
+                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 = {}) {
+                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.