@svgrid/grid 1.2.21 → 1.2.23

package/dist/index.d.ts

@@ -1,9 +1,45 @@
 export { formatNumericWithConfig, resolveDatePattern } from './cell-formatting';
+export { coerceExportDate, formatValueForExport, projectGridRows, toExcelNumFmt, valueForExcel, serializeDelimited, serializeJson, serializeMarkdown, serializeHtml, serializeXml, downloadTextFile, downloadBlobFile, copyTextToClipboard, type GridExportOptions, type GridExportScope, type GridExportColumn, type GridClipboardOptions, type GridClipboardFormat, type SerializeProgress, type SerializeOptions, type CsvOptions, } from './export-format';
 export { columnFilteringFeature, columnGroupingFeature, createCoreRowModel, createExpandedRowModel, createFilteredRowModel, createGroupedRowModel, createPaginatedRowModel, createSortedRowModel, applyGroupAggregate, filterFns, rowExpandingFeature, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, sortFns, tableFeatures, type Cell, type CellContext, type CellSpanParams, type ValueParserParams, type EditorContext, type CellData, type ActiveCellState, type CellFormatConfig, type CellFormatter, type Column, type ColumnDef, type ColumnDefTemplate, type GroupAggregator, type Header, type HeaderContext, type HeaderGroup, type Row, type RowData, type SortingState, type SvGrid as SvGridInstance, type SvGridOptions, type TableFeatures, type Updater, } from './core';
 export { createGrid, createSvGrid, type SvelteGrid } from './createGrid.svelte';
 export { createGridState, createSvGridState } from './createGridState.svelte';
 export { subscribeGrid, subscribeSvGrid } from './subscribe';
 export { default as SvGrid } from './SvGrid.svelte';
+export { default as SvGridDropdown } from './SvGridDropdown.svelte';
+export { default as SvCalendar, type CalendarValue, type CalendarPreset, type CalendarAnimation } from './SvCalendar.svelte';
+export { default as SvTimePicker, type TimeValue } from './SvTimePicker.svelte';
+export { default as SvDateTimePicker, type DateTimeValue } from './SvDateTimePicker.svelte';
+export { default as SvButton } from './SvButton.svelte';
+export { default as SvRepeatButton } from './SvRepeatButton.svelte';
+export { default as SvToggleButton } from './SvToggleButton.svelte';
+export { default as SvSwitchButton } from './SvSwitchButton.svelte';
+export { default as SvCheckBox } from './SvCheckBox.svelte';
+export { default as SvRadioGroup, type RadioOption } from './SvRadioGroup.svelte';
+export { default as SvRating } from './SvRating.svelte';
+export { default as SvNumberInput } from './SvNumberInput.svelte';
+export { default as SvPasswordInput } from './SvPasswordInput.svelte';
+export { default as SvMaskedInput } from './SvMaskedInput.svelte';
+export { default as SvPhoneInput } from './SvPhoneInput.svelte';
+export { default as SvColorInput } from './SvColorInput.svelte';
+export { applyMask, unmask, isMaskComplete } from './datetime/mask';
+export { COUNTRIES, COUNTRY_BY_CODE, flagEmoji, type Country } from './countries';
+export { default as SvListBox } from './SvListBox.svelte';
+export { default as SvDropDownList } from './SvDropDownList.svelte';
+export { default as SvComboBox } from './SvComboBox.svelte';
+export { default as SvAutoComplete } from './SvAutoComplete.svelte';
+export { default as SvTagsInput } from './SvTagsInput.svelte';
+export { default as SvCountryInput } from './SvCountryInput.svelte';
+export { filterOptions, type ListOption } from './list-option';
+export { default as SvSlider } from './SvSlider.svelte';
+export { default as SvGauge } from './SvGauge.svelte';
+export { default as SvTabs, type TabItem } from './SvTabs.svelte';
+export { default as SvTree, type TreeNode as SvTreeNode } from './SvTree.svelte';
+export { default as SvForm, type FormField, type FormFieldType } from './SvForm.svelte';
+export { anchoredRect, portalToBody, PANEL_THEME_VARS, type AnchoredRect } from './popover';
+export { toDate, startOfDay, addDays, addMonths, addYears, clampDate, isSameDay, monthMatrix, isoWeek, decadeRange, withTime, snapMinute, type DateLike, } from './datetime/date-core';
+export { formatDate, parseDate, tokenizeMask } from './datetime/date-format';
+export { selectDate, rangeDays, isSelected, isMultiSelectMode, emptySelection, type SelectionMode, type SelectionState, } from './datetime/date-selection';
+export { isDisabledDay, isOutOfRange, isRestricted, isImportant, type RestrictOptions, } from './datetime/date-restrict';
 export { default as FlexRender } from './FlexRender.svelte';
 export { renderComponent, renderSnippet } from './render-component';
 export { default as SvGridChart } from './SvGridChart.svelte';

package/dist/index.js

@@ -1,9 +1,50 @@
 export { formatNumericWithConfig, resolveDatePattern } from './cell-formatting';
+export { coerceExportDate, formatValueForExport, projectGridRows, toExcelNumFmt, valueForExcel, serializeDelimited, serializeJson, serializeMarkdown, serializeHtml, serializeXml, downloadTextFile, downloadBlobFile, copyTextToClipboard, } from './export-format';
 export { columnFilteringFeature, columnGroupingFeature, createCoreRowModel, createExpandedRowModel, createFilteredRowModel, createGroupedRowModel, createPaginatedRowModel, createSortedRowModel, applyGroupAggregate, filterFns, rowExpandingFeature, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, sortFns, tableFeatures, } from './core';
 export { createGrid, createSvGrid } from './createGrid.svelte';
 export { createGridState, createSvGridState } from './createGridState.svelte';
 export { subscribeGrid, subscribeSvGrid } from './subscribe';
 export { default as SvGrid } from './SvGrid.svelte';
+export { default as SvGridDropdown } from './SvGridDropdown.svelte';
+export { default as SvCalendar } from './SvCalendar.svelte';
+export { default as SvTimePicker } from './SvTimePicker.svelte';
+export { default as SvDateTimePicker } from './SvDateTimePicker.svelte';
+// UI kit - Group B (buttons & toggles)
+export { default as SvButton } from './SvButton.svelte';
+export { default as SvRepeatButton } from './SvRepeatButton.svelte';
+export { default as SvToggleButton } from './SvToggleButton.svelte';
+export { default as SvSwitchButton } from './SvSwitchButton.svelte';
+export { default as SvCheckBox } from './SvCheckBox.svelte';
+export { default as SvRadioGroup } from './SvRadioGroup.svelte';
+export { default as SvRating } from './SvRating.svelte';
+// UI kit - Group C (text inputs)
+export { default as SvNumberInput } from './SvNumberInput.svelte';
+export { default as SvPasswordInput } from './SvPasswordInput.svelte';
+export { default as SvMaskedInput } from './SvMaskedInput.svelte';
+export { default as SvPhoneInput } from './SvPhoneInput.svelte';
+export { default as SvColorInput } from './SvColorInput.svelte';
+export { applyMask, unmask, isMaskComplete } from './datetime/mask';
+export { COUNTRIES, COUNTRY_BY_CODE, flagEmoji } from './countries';
+// UI kit - Group D (selection overlays)
+export { default as SvListBox } from './SvListBox.svelte';
+export { default as SvDropDownList } from './SvDropDownList.svelte';
+export { default as SvComboBox } from './SvComboBox.svelte';
+export { default as SvAutoComplete } from './SvAutoComplete.svelte';
+export { default as SvTagsInput } from './SvTagsInput.svelte';
+export { default as SvCountryInput } from './SvCountryInput.svelte';
+export { filterOptions } from './list-option';
+// UI kit - Group E (range & feedback)
+export { default as SvSlider } from './SvSlider.svelte';
+export { default as SvGauge } from './SvGauge.svelte';
+// UI kit - Group F (composite / layout)
+export { default as SvTabs } from './SvTabs.svelte';
+export { default as SvTree } from './SvTree.svelte';
+export { default as SvForm } from './SvForm.svelte';
+export { anchoredRect, portalToBody, PANEL_THEME_VARS } from './popover';
+export { toDate, startOfDay, addDays, addMonths, addYears, clampDate, isSameDay, monthMatrix, isoWeek, decadeRange, withTime, snapMinute, } from './datetime/date-core';
+export { formatDate, parseDate, tokenizeMask } from './datetime/date-format';
+export { selectDate, rangeDays, isSelected, isMultiSelectMode, emptySelection, } from './datetime/date-selection';
+export { isDisabledDay, isOutOfRange, isRestricted, isImportant, } from './datetime/date-restrict';
 export { default as FlexRender } from './FlexRender.svelte';
 export { renderComponent, renderSnippet } from './render-component';
 export { default as SvGridChart } from './SvGridChart.svelte';

package/dist/list-option.d.ts

@@ -0,0 +1,10 @@
+/** Shared option shape for the SvGrid UI-kit selection controls. */
+export type ListOption = {
+    value: string | number;
+    label: string;
+    disabled?: boolean;
+    /** Optional group heading this option belongs under. */
+    group?: string;
+};
+/** Case-insensitive substring filter over option labels. */
+export declare function filterOptions(options: ReadonlyArray<ListOption>, query: string): ListOption[];

package/dist/list-option.js

@@ -0,0 +1,7 @@
+/** Case-insensitive substring filter over option labels. */
+export function filterOptions(options, query) {
+    const q = query.trim().toLowerCase();
+    if (!q)
+        return [...options];
+    return options.filter((o) => o.label.toLowerCase().includes(q));
+}

package/dist/menus.js

@@ -216,21 +216,37 @@ export function createMenus(ctx) {
             ctx.filterRowValues = next;
         }
     }
+    // External pagination is controlled: emit the requested page/size and let
+    // the consumer fetch + update props. Never mutate local pagination state.
+    function emitExternalPagination(pageIndex, pageSize) {
+        if (ctx.props.externalPagination !== true)
+            return false;
+        ctx.props.onPaginationChange?.({ pageIndex: Math.max(0, pageIndex), pageSize });
+        ctx.scrollContainer?.scrollTo?.({ top: 0 });
+        return true;
+    }
     function changePage(delta) {
+        if (emitExternalPagination((ctx.props.pageIndex ?? 0) + delta, ctx.props.pageSize ?? 10))
+            return;
         ctx.grid.setPagination((prev) => ({
             ...prev,
             pageIndex: Math.max((prev?.pageIndex ?? 0) + delta, 0),
         }));
-        ctx.scrollContainer?.scrollTo({ top: 0 });
+        ctx.scrollContainer?.scrollTo?.({ top: 0 });
     }
     function goToPage(pageIndex) {
+        if (emitExternalPagination(pageIndex, ctx.props.pageSize ?? 10))
+            return;
         ctx.grid.setPagination((prev) => ({
             ...prev,
             pageIndex: Math.max(0, pageIndex),
         }));
-        ctx.scrollContainer?.scrollTo({ top: 0 });
+        ctx.scrollContainer?.scrollTo?.({ top: 0 });
     }
     function setPageSize(pageSize) {
+        // External mode: changing page size resets to the first page.
+        if (emitExternalPagination(0, pageSize))
+            return;
         ctx.grid.setPagination((prev) => {
             const oldSize = prev?.pageSize ?? 10;
             const oldIndex = prev?.pageIndex ?? 0;

package/dist/popover.d.ts

@@ -0,0 +1,48 @@
+/**
+ * popover - shared helpers for panels that must escape the grid's
+ * `overflow:hidden` scroll container by portalling to <body>: the theme-var
+ * snapshot + portal action, and the fixed-position anchor/flip math. Rune-free
+ * and DOM-only so it is reused verbatim by SvGridDropdown, SvDateTimePicker and
+ * any future popover. The per-component `$effect` wiring (scroll/resize
+ * reposition, outside-click close) stays in the component since it needs the
+ * component's own open state.
+ */
+/**
+ * Theme tokens a portalled panel must carry with it. `--sg-*` custom properties
+ * are scoped to whatever wrapper the grid sits inside (e.g. a per-preset theme
+ * class); moving the panel to <body> leaves that scope, so we snapshot the
+ * resolved values and pin them inline. Keep this list in sync with the tokens
+ * any popover panel actually consumes.
+ */
+export declare const PANEL_THEME_VARS: readonly ["--sg-accent", "--sg-bg", "--sg-fg", "--sg-border", "--sg-muted", "--sg-header-bg", "--sg-row-hover-bg", "--sg-selection-bg", "--sg-input-bg", "--sg-input-border", "--sg-selection-fg"];
+/**
+ * Svelte action: snapshot the resolved theme tokens from the node's current
+ * (in-scope) position, then detach it and append to <body> so it can never be
+ * clipped by an ancestor's overflow. Removes itself on destroy.
+ */
+export declare function portalToBody(node: HTMLElement, vars?: ReadonlyArray<string>): {
+    destroy(): void;
+};
+export type AnchoredRect = {
+    top: number;
+    left: number;
+    width: number;
+    openUpward: boolean;
+};
+export type AnchorOptions = {
+    /** Estimated panel height, used to decide whether to flip upward. */
+    estimatedHeight: number;
+    /** Gap between trigger and panel. Default 2px. */
+    gap?: number;
+    /** Force the panel at least this wide (else it matches the trigger). */
+    minWidth?: number;
+    /** Keep the panel within the viewport horizontally. Default true. */
+    clampHorizontal?: boolean;
+};
+/**
+ * Compute a `position: fixed` rect anchored to `triggerRect`, flipping above the
+ * trigger when there isn't room below and there's more room above. Mirrors the
+ * behavior SvGridDropdown shipped with, generalized with min-width + horizontal
+ * clamping for wider panels (date/time popovers).
+ */
+export declare function anchoredRect(triggerRect: DOMRect, opts: AnchorOptions): AnchoredRect;

package/dist/popover.js

@@ -0,0 +1,65 @@
+/**
+ * popover - shared helpers for panels that must escape the grid's
+ * `overflow:hidden` scroll container by portalling to <body>: the theme-var
+ * snapshot + portal action, and the fixed-position anchor/flip math. Rune-free
+ * and DOM-only so it is reused verbatim by SvGridDropdown, SvDateTimePicker and
+ * any future popover. The per-component `$effect` wiring (scroll/resize
+ * reposition, outside-click close) stays in the component since it needs the
+ * component's own open state.
+ */
+/**
+ * Theme tokens a portalled panel must carry with it. `--sg-*` custom properties
+ * are scoped to whatever wrapper the grid sits inside (e.g. a per-preset theme
+ * class); moving the panel to <body> leaves that scope, so we snapshot the
+ * resolved values and pin them inline. Keep this list in sync with the tokens
+ * any popover panel actually consumes.
+ */
+export const PANEL_THEME_VARS = [
+    '--sg-accent', '--sg-bg', '--sg-fg', '--sg-border', '--sg-muted',
+    '--sg-header-bg', '--sg-row-hover-bg', '--sg-selection-bg',
+    '--sg-input-bg', '--sg-input-border', '--sg-selection-fg',
+];
+/**
+ * Svelte action: snapshot the resolved theme tokens from the node's current
+ * (in-scope) position, then detach it and append to <body> so it can never be
+ * clipped by an ancestor's overflow. Removes itself on destroy.
+ */
+export function portalToBody(node, vars = PANEL_THEME_VARS) {
+    const cs = getComputedStyle(node);
+    for (const v of vars) {
+        const val = cs.getPropertyValue(v).trim();
+        if (val)
+            node.style.setProperty(v, val);
+    }
+    document.body.appendChild(node);
+    return {
+        destroy() {
+            if (node.parentNode === document.body)
+                document.body.removeChild(node);
+        },
+    };
+}
+/**
+ * Compute a `position: fixed` rect anchored to `triggerRect`, flipping above the
+ * trigger when there isn't room below and there's more room above. Mirrors the
+ * behavior SvGridDropdown shipped with, generalized with min-width + horizontal
+ * clamping for wider panels (date/time popovers).
+ */
+export function anchoredRect(triggerRect, opts) {
+    const gap = opts.gap ?? 2;
+    const spaceBelow = window.innerHeight - triggerRect.bottom;
+    const spaceAbove = triggerRect.top;
+    const openUpward = spaceBelow < opts.estimatedHeight && spaceAbove > spaceBelow;
+    const width = Math.max(triggerRect.width, opts.minWidth ?? 0);
+    let left = triggerRect.left;
+    if (opts.clampHorizontal !== false) {
+        const maxLeft = window.innerWidth - width - 4;
+        left = Math.max(4, Math.min(left, maxLeft));
+    }
+    return {
+        top: openUpward ? triggerRect.top - opts.estimatedHeight - gap : triggerRect.bottom + gap,
+        left,
+        width,
+        openUpward,
+    };
+}

package/dist/row-resize.d.ts

@@ -4,10 +4,10 @@
  * reads per-row heights from a reactive store.
  *
  * The action is OFF until a consumer attaches it AND a row-header
- * gutter cell exists in each row. A row-header cell is any TD with
- * the `sv-row-gutter` class (typically the one rendering the row
- * number 1, 2, 3, ...). Demos opt in by setting
- * `cellClass: 'sv-row-gutter'` on the gutter column.
+ * gutter cell exists in each row. A row-header cell is either the
+ * grid's built-in row-number gutter (enable `showRowNumbers`) or any
+ * TD tagged with the `sv-row-gutter` class (set
+ * `cellClass: 'sv-row-gutter'` on a custom gutter column).
  *
  *   <script>
  *     let heights = $state<Record<number, number>>({})

package/dist/row-resize.js

@@ -4,10 +4,10 @@
  * reads per-row heights from a reactive store.
  *
  * The action is OFF until a consumer attaches it AND a row-header
- * gutter cell exists in each row. A row-header cell is any TD with
- * the `sv-row-gutter` class (typically the one rendering the row
- * number 1, 2, 3, ...). Demos opt in by setting
- * `cellClass: 'sv-row-gutter'` on the gutter column.
+ * gutter cell exists in each row. A row-header cell is either the
+ * grid's built-in row-number gutter (enable `showRowNumbers`) or any
+ * TD tagged with the `sv-row-gutter` class (set
+ * `cellClass: 'sv-row-gutter'` on a custom gutter column).
  *
  *   <script>
  *     let heights = $state<Record<number, number>>({})
@@ -103,7 +103,10 @@ export function rowResize(node, opts) {
                 continue;
             if (tr.classList.contains('sv-grid-row-spacer'))
                 continue;
-            const gutter = tr.querySelector('.sv-grid-cell.sv-row-gutter');
+            // A row-header gutter cell: either a user column tagged
+            // `sv-row-gutter`, or the grid's built-in row-number gutter
+            // (`showRowNumbers`), whose cell is `.sv-grid-row-number-cell`.
+            const gutter = tr.querySelector('.sv-grid-cell.sv-row-gutter, .sv-grid-cell.sv-grid-row-number-cell');
             if (!gutter)
                 continue;
             if (gutter.querySelector(`:scope > .${STRIP_CLASS}`))

package/dist/selection.d.ts

@@ -15,6 +15,12 @@ export declare function createSelection<TFeatures extends TableFeatures = TableF
         left: boolean;
         right: boolean;
     } | null;
+    fillMarqueeEdges: (rowIndex: number, colIndex: number) => {
+        top: boolean;
+        bottom: boolean;
+        left: boolean;
+        right: boolean;
+    } | null;
     getSelectionRects: () => {
         minRow: number;
         maxRow: number;

package/dist/selection.js

@@ -264,6 +264,31 @@ export function createSelection(ctx) {
             colIndex <= d.sourceMaxCol;
         return !inSource;
     }
+    /**
+     * Which edges of the fill-drag rectangle a cell sits on, so the render can
+     * paint a single dashed marquee around the WHOLE target range (source +
+     * extension) - the Excel fill-handle look - instead of a thick per-cell
+     * border. Returns null when the cell isn't on the rectangle's boundary.
+     */
+    function fillMarqueeEdges(rowIndex, colIndex) {
+        const d = ctx.fillDrag;
+        if (!d)
+            return null;
+        const minR = Math.min(d.sourceMinRow, d.targetRow);
+        const maxR = Math.max(d.sourceMaxRow, d.targetRow);
+        const minC = Math.min(d.sourceMinCol, d.targetCol);
+        const maxC = Math.max(d.sourceMaxCol, d.targetCol);
+        if (rowIndex < minR || rowIndex > maxR || colIndex < minC || colIndex > maxC) {
+            return null;
+        }
+        const top = rowIndex === minR;
+        const bottom = rowIndex === maxR;
+        const left = colIndex === minC;
+        const right = colIndex === maxC;
+        if (!top && !bottom && !left && !right)
+            return null;
+        return { top, bottom, left, right };
+    }
     /** Look up a column by id without depending on `buildApi`'s private
      *  closure (those helpers don't exist at this scope). */
     function findColumnById(columnId) {
@@ -276,11 +301,11 @@ export function createSelection(ctx) {
         const column = ctx.allColumns[colIndex];
         if (!row || !column || isGroupRow(row))
             return;
-        const cellValue = ctx.getCellDisplayValue(row.id, column.id, getColumnBaseValue(row, column));
-        const isCheckboxColumn = column.columnDef.editorType === "checkbox" ||
-            typeof cellValue === "boolean";
-        if (isCheckboxColumn)
-            return; // let onCellClick toggle the checkbox
+        // NOTE: we no longer bail for checkbox columns. Bailing here meant a
+        // range drag could never START on a checkbox cell. A plain click still
+        // toggles the checkbox via onCellClick (a same-cell click), while a
+        // cross-cell drag fires its `click` on a common ancestor - not the cell -
+        // so it selects a range without toggling.
         const active = ctx.grid.getState().activeCell;
         ctx.activeAtPointerDown = active
             ? { rowIndex: active.rowIndex, colIndex: active.colIndex }
@@ -414,6 +439,7 @@ export function createSelection(ctx) {
         extendSelection,
         isCellInSelectedRange,
         getCellRangeEdges,
+        fillMarqueeEdges,
         getSelectionRects,
         isInFillPreview,
         findColumnById,

package/dist/server-data-source.d.ts

@@ -8,6 +8,12 @@
  * It's headless and framework-agnostic on purpose: wire `setSort` /
  * `setFilter` / `setPage` to the grid's controlled callbacks, and render the
  * grid from the `{ rows, total, loading }` it hands you. See the demo.
+ *
+ * The write side (`createRow` / `updateRow` / `deleteRow`) is optional: a
+ * source that only implements `getRows` stays a pure read model, and the
+ * matching controller methods throw a clear error if called. Mutations are
+ * non-optimistic for now - the grid reflects a change only after the
+ * follow-up re-fetch of the current page lands.
  */
 export type ServerSortModel = Array<{
     id: string;
@@ -45,11 +51,22 @@ export type ServerResult<TData> = {
 };
 export type ServerDataSource<TData> = {
     getRows(request: ServerRequest): Promise<ServerResult<TData>>;
+    /**
+     * Optional write side. Implement whichever your backend supports; the
+     * controller exposes matching `createRow` / `updateRow` / `deleteRow`
+     * methods that call through and then `refresh()` the current page.
+     * Calling a controller method whose source counterpart is missing throws.
+     */
+    createRow?(input: Partial<TData>): Promise<TData>;
+    updateRow?(id: string, patch: Partial<TData>): Promise<TData>;
+    deleteRow?(id: string): Promise<void>;
 };
 export type ServerState<TData> = {
     rows: ReadonlyArray<TData>;
     total: number;
     loading: boolean;
+    /** True while a create / update / delete mutation is in flight. */
+    saving: boolean;
     error: unknown;
     pageIndex: number;
     pageSize: number;
@@ -64,6 +81,23 @@ export type ServerController<TData> = {
     setFilter(filterModel: ServerFilterModel): void;
     setPage(pageIndex: number): void;
     setPageSize(pageSize: number): void;
+    /**
+     * Create a row through the source, then refresh the current page. Resolves
+     * with the created row. Rejects if the source has no `createRow` (or if the
+     * create itself fails - the read state is left untouched on failure).
+     */
+    createRow(input: Partial<TData>): Promise<TData>;
+    /**
+     * Update a row by id through the source. Non-optimistic: refreshes the page.
+     * Optimistic (see `optimistic` + `getRowId` options): patches the local row
+     * immediately, then reconciles with the server result, rolling back on error.
+     */
+    updateRow(id: string, patch: Partial<TData>): Promise<TData>;
+    /**
+     * Delete a row by id through the source. Non-optimistic: refreshes the page.
+     * Optimistic: removes the local row immediately, restoring it on error.
+     */
+    deleteRow(id: string): Promise<void>;
     getState(): ServerState<TData>;
     /** Stop accepting in-flight responses (call on unmount). */
     dispose(): void;
@@ -72,5 +106,14 @@ export type ServerControllerOptions<TData> = {
     pageSize?: number;
     /** Called whenever any of `rows` / `total` / `loading` / page changes. */
     onChange: (state: ServerState<TData>) => void;
+    /**
+     * Apply `updateRow` / `deleteRow` to the local rows immediately (before the
+     * server confirms) and roll back on error - so edits feel instant and no
+     * refetch is needed. Requires `getRowId` to locate rows; ignored without it.
+     * A subsequent `refresh()` reconciles ordering/filtering. Default false.
+     */
+    optimistic?: boolean;
+    /** Resolve a row's stable id, so optimistic update/delete can find it in `rows`. */
+    getRowId?: (row: TData) => string;
 };
 export declare function createServerDataSource<TData>(source: ServerDataSource<TData>, options: ServerControllerOptions<TData>): ServerController<TData>;

package/dist/server-data-source.js

@@ -3,6 +3,7 @@ export function createServerDataSource(source, options) {
         rows: [],
         total: 0,
         loading: false,
+        saving: false,
         error: null,
         pageIndex: 0,
         pageSize: options.pageSize ?? 50,
@@ -51,8 +52,100 @@ export function createServerDataSource(source, options) {
             emit();
         }
     }
+    // Shared mutation lifecycle: flip `saving`, run the write, refresh the
+    // current page on success, and always clear `saving`. A missing source
+    // method (or a disposed controller) rejects before anything is emitted.
+    function mutate(name, thunk) {
+        if (disposed) {
+            return Promise.reject(new Error('createServerDataSource: controller is disposed'));
+        }
+        if (!thunk) {
+            return Promise.reject(new Error(`createServerDataSource: the datasource does not implement ${name}()`));
+        }
+        state.saving = true;
+        emit();
+        return (async () => {
+            try {
+                const result = await thunk();
+                await fetchPage();
+                return result;
+            }
+            finally {
+                state.saving = false;
+                emit();
+            }
+        })();
+    }
+    const optimistic = !!options.optimistic && !!options.getRowId;
+    const getRowId = options.getRowId;
+    // Optimistic update: patch the local row, reconcile with the server result,
+    // roll back on error. Falls back to the plain refresh path when the row
+    // isn't on the current page (nothing local to update).
+    async function optimisticUpdate(id, patch, fn) {
+        if (disposed)
+            throw new Error('createServerDataSource: controller is disposed');
+        const prevRows = state.rows;
+        const idx = prevRows.findIndex((r) => getRowId(r) === id);
+        if (idx < 0)
+            return mutate('updateRow', () => fn(id, patch));
+        state.rows = [...prevRows.slice(0, idx), { ...prevRows[idx], ...patch }, ...prevRows.slice(idx + 1)];
+        state.saving = true;
+        emit();
+        try {
+            const result = await fn(id, patch);
+            state.rows = state.rows.map((r) => (getRowId(r) === id ? result : r));
+            return result;
+        }
+        catch (err) {
+            state.rows = prevRows;
+            throw err;
+        }
+        finally {
+            state.saving = false;
+            emit();
+        }
+    }
+    // Optimistic delete: drop the local row + decrement total, restore on error.
+    async function optimisticDelete(id, fn) {
+        if (disposed)
+            throw new Error('createServerDataSource: controller is disposed');
+        const prevRows = state.rows;
+        const prevTotal = state.total;
+        const next = prevRows.filter((r) => getRowId(r) !== id);
+        if (next.length === prevRows.length)
+            return mutate('deleteRow', () => fn(id));
+        state.rows = next;
+        state.total = Math.max(0, prevTotal - (prevRows.length - next.length));
+        state.saving = true;
+        emit();
+        try {
+            await fn(id);
+        }
+        catch (err) {
+            state.rows = prevRows;
+            state.total = prevTotal;
+            throw err;
+        }
+        finally {
+            state.saving = false;
+            emit();
+        }
+    }
     return {
         refresh: fetchPage,
+        createRow: (input) => mutate('createRow', source.createRow ? () => source.createRow(input) : null),
+        updateRow: (id, patch) => {
+            if (!source.updateRow)
+                return mutate('updateRow', null);
+            const fn = source.updateRow;
+            return optimistic ? optimisticUpdate(id, patch, fn) : mutate('updateRow', () => fn(id, patch));
+        },
+        deleteRow: (id) => {
+            if (!source.deleteRow)
+                return mutate('deleteRow', null);
+            const fn = source.deleteRow;
+            return optimistic ? optimisticDelete(id, fn) : mutate('deleteRow', () => fn(id));
+        },
         setSort(sortModel) {
             state.sortModel = sortModel;
             state.pageIndex = 0;
@@ -78,6 +171,13 @@ export function createServerDataSource(source, options) {
         getState: () => ({ ...state }),
         dispose() {
             disposed = true;
+            // An in-flight fetch's resolution short-circuits on `disposed`, so it
+            // never clears `loading`. Clear it here (and emit) so a disposed
+            // controller doesn't report a permanent loading state.
+            if (state.loading) {
+                state.loading = false;
+                emit();
+            }
         },
     };
 }

package/dist/sparkline.js

@@ -72,12 +72,16 @@ export function buildSparkline(values, cfg = {}) {
     const n = values.length;
     const stepX = n > 1 ? innerW / (n - 1) : 0;
     const pts = values.map((v, i) => ({
-        x: pad + i * stepX,
+        // A single point has no span to walk, so centre it rather than pinning it
+        // to the left edge.
+        x: n === 1 ? pad + innerW / 2 : pad + i * stepX,
         y: pad + innerH - ((v - min) / span) * innerH,
     }));
-    const linePath = pts
-        .map((p, i) => `${i === 0 ? 'M' : 'L'}${round(p.x)},${round(p.y)}`)
-        .join(' ');
+    const linePath = n === 1
+        ? // One point produces only a moveto, which draws nothing. Emit a tiny
+            // horizontal segment so a single value still renders a visible mark.
+            `M${round(pts[0].x - 1)},${round(pts[0].y)} L${round(pts[0].x + 1)},${round(pts[0].y)}`
+        : pts.map((p, i) => `${i === 0 ? 'M' : 'L'}${round(p.x)},${round(p.y)}`).join(' ');
     const first = pts[0];
     const last = pts[pts.length - 1];
     const baseY = pad + innerH;

package/dist/svgrid-wrapper.types.d.ts

@@ -1,4 +1,5 @@
-import type { ColumnDef, RowData, SvGridOptions, TableFeatures } from './core';
+import type { CellFormatConfig, ColumnDef, RowData, SvGridOptions, TableFeatures } from './core';
+import type { GridExportOptions, GridClipboardOptions } from './export-format';
 export type SvGridFilterOperator = 'contains' | 'equals' | 'startsWith' | 'greaterThan' | 'lessThan' | 'between' | 'isBlank';
 /**
  * A serializable snapshot of everything that makes up the current "view":
@@ -168,7 +169,31 @@ export type SvGridApi<TFeatures extends TableFeatures, TData extends RowData> =
         field?: string;
         header: string;
         visible: boolean;
+        /** The column's `format` config, when set. Lets an exporter reproduce
+         *  the on-screen display value (currency, date pattern, etc.). */
+        format?: CellFormatConfig;
+        /** Effective horizontal alignment ('left' | 'center' | 'right'). */
+        align?: 'left' | 'center' | 'right';
     }>;
+    /**
+     * Export the grid to a **CSV** file. Free in the community grid; the
+     * richer Excel / PDF / styled formats live in @svgrid/enterprise. Values
+     * are formatted as shown on screen (pass `rawValues: true` for raw). Rows
+     * default to the current view (`rows: 'selected' | 'all'` to change).
+     * Resolves with the serialized text; pass `download: false` to skip the
+     * browser download and just get the string.
+     */
+    exportCsv(options?: GridExportOptions): Promise<string>;
+    /** Export the grid to a **TSV** file (tab-separated). See `exportCsv`. */
+    exportTsv(options?: GridExportOptions): Promise<string>;
+    /** Export the grid to a **JSON** file (array of `{ field: value }`). */
+    exportJson(options?: GridExportOptions): Promise<string>;
+    /**
+     * Copy the grid to the system clipboard. `format: 'tsv'` (default) pastes
+     * straight into Excel / Sheets; `'csv'` / `'markdown'` also supported.
+     * Resolves with the copied text.
+     */
+    copyToClipboard(options?: GridClipboardOptions): Promise<string>;
     /** Clear every checked row. Emits `onRowSelectionChange({}, [])`. */
     clearRowSelection(): void;
     /**