@svgrid/grid 1.0.0 → 1.1.0

package/dist/clipboard.d.ts

@@ -0,0 +1,15 @@
+import { type RowData, type TableFeatures } from "./index";
+import "./sv-grid-scrollbar";
+export declare function createClipboard<TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData>(ctx: any): {
+    readCellRaw: (rowIndex: number, columnId: string) => unknown;
+    writeCellRaw: (rowIndex: number, columnId: string, value: unknown) => void;
+    applyFillPattern: () => void;
+    clearSelectedCellValues: () => void;
+    startFillDrag: (event: PointerEvent, rowIndex: number, colIndex: number) => void;
+    onFillPointerMove: (event: PointerEvent) => void;
+    onFillPointerUp: () => void;
+    toggleBooleanCell: (rowIndex: number, colIndex: number) => void;
+    copySelectionToClipboard: () => void;
+    clearSelectedCells: () => boolean;
+    cutSelectionToClipboard: () => Promise<void>;
+};

package/dist/clipboard.js

@@ -0,0 +1,356 @@
+// clipboard handlers extracted from the controller. Imperative event handlers
+// that read/write controller state via the `ctx` handle; the reactive core
+// ($state/$derived/$effect) stays in the controller.
+import { parseEditorValue, } from "./index";
+import "./sv-grid-scrollbar";
+import { buildFillPattern } from "./fill-patterns";
+import { getCellKey, } from "./SvGrid.helpers";
+import { getColumnBaseValue, isGroupRow, } from "./cell-values";
+export function createClipboard(ctx) {
+    /** Read the raw underlying value for the cell at (rowIndex, columnId)
+     *  for pattern extraction. */
+    function readCellRaw(rowIndex, columnId) {
+        const row = ctx.internalData[rowIndex];
+        const column = ctx.findColumnById(columnId);
+        if (!row || !column?.columnDef.field)
+            return undefined;
+        return row[column.columnDef.field];
+    }
+    /** Write a value into (rowIndex, columnId) without going through the
+     *  edit lifecycle. Fires `onCellValueChange` per write so consumers
+     *  can react (formula recompute, autosave, etc.). */
+    function writeCellRaw(rowIndex, columnId, value) {
+        const row = ctx.internalData[rowIndex];
+        const column = ctx.findColumnById(columnId);
+        if (!row || !column?.columnDef.field)
+            return;
+        const field = column.columnDef.field;
+        const oldValue = row[field];
+        if (oldValue === value)
+            return;
+        // Resolve the row's id BEFORE swapping internalData - otherwise the
+        // recomputed `allRows` references the new row object and the
+        // `r.original === row` lookup fails, dropping our edit out of the
+        // `editedCellValues` map (which getCellDisplayValue consults first).
+        const rowId = ctx.allRows.find((r) => r.original === row)?.id;
+        const next = ctx.internalData.slice();
+        next[rowIndex] = { ...row, [field]: value };
+        ctx.internalData = next;
+        if (rowId) {
+            const key = getCellKey(rowId, columnId);
+            ctx.editedCellValues = { ...ctx.editedCellValues, [key]: value };
+        }
+        ctx.props.onCellValueChange?.({
+            rowIndex,
+            columnId,
+            oldValue,
+            newValue: value,
+            row: next[rowIndex],
+        });
+    }
+    /** Apply the pattern fill on pointerup. Each NEW row (or column) is
+     *  filled from a pattern derived from the matching column (or row) of
+     *  the source. Handles all four drag directions. */
+    function applyFillPattern() {
+        const d = ctx.fillDrag;
+        if (!d)
+            return;
+        // Clear fillDrag FIRST so a thrown error doesn't leave the grid
+        // stuck tracking the pointer.
+        ctx.fillDrag = null;
+        const newMinRow = Math.min(d.sourceMinRow, d.targetRow);
+        const newMaxRow = Math.max(d.sourceMaxRow, d.targetRow);
+        const newMinCol = Math.min(d.sourceMinCol, d.targetCol);
+        const newMaxCol = Math.max(d.sourceMaxCol, d.targetCol);
+        const verticalExtension = newMaxRow > d.sourceMaxRow || newMinRow < d.sourceMinRow;
+        const horizontalExtension = newMaxCol > d.sourceMaxCol || newMinCol < d.sourceMinCol;
+        if (verticalExtension) {
+            // For each column in the source range, build a pattern from the
+            // column's source values and apply to the new rows (above or below).
+            for (let c = d.sourceMinCol; c <= d.sourceMaxCol; c += 1) {
+                const column = ctx.allColumns[c];
+                if (!column?.columnDef.field)
+                    continue;
+                if (column.columnDef.editable === false)
+                    continue;
+                const sourceColValues = [];
+                for (let r = d.sourceMinRow; r <= d.sourceMaxRow; r += 1) {
+                    sourceColValues.push(readCellRaw(r, column.id));
+                }
+                if (newMaxRow > d.sourceMaxRow) {
+                    const targetRows = newMaxRow - d.sourceMaxRow;
+                    const fills = buildFillPattern(sourceColValues, targetRows);
+                    for (let i = 0; i < targetRows; i += 1) {
+                        const targetRow = d.sourceMaxRow + 1 + i;
+                        if (ctx.isCellEditableAt(targetRow, c))
+                            writeCellRaw(targetRow, column.id, fills[i]);
+                    }
+                }
+                if (newMinRow < d.sourceMinRow) {
+                    // Filling upward - reverse-extrapolate.
+                    const reversed = sourceColValues.slice().reverse();
+                    const targetRows = d.sourceMinRow - newMinRow;
+                    const fills = buildFillPattern(reversed, targetRows);
+                    for (let i = 0; i < targetRows; i += 1) {
+                        const targetRow = d.sourceMinRow - 1 - i;
+                        if (ctx.isCellEditableAt(targetRow, c))
+                            writeCellRaw(targetRow, column.id, fills[i]);
+                    }
+                }
+            }
+        }
+        else if (horizontalExtension) {
+            // For each row in source range, build pattern from the row's source
+            // values across columns and apply to new columns.
+            for (let r = d.sourceMinRow; r <= d.sourceMaxRow; r += 1) {
+                const sourceRowValues = [];
+                for (let c = d.sourceMinCol; c <= d.sourceMaxCol; c += 1) {
+                    const col = ctx.allColumns[c];
+                    if (!col)
+                        continue;
+                    sourceRowValues.push(readCellRaw(r, col.id));
+                }
+                if (newMaxCol > d.sourceMaxCol) {
+                    const targetCols = newMaxCol - d.sourceMaxCol;
+                    const fills = buildFillPattern(sourceRowValues, targetCols);
+                    for (let i = 0; i < targetCols; i += 1) {
+                        const targetCol = d.sourceMaxCol + 1 + i;
+                        const col = ctx.allColumns[targetCol];
+                        if (col && ctx.isCellEditableAt(r, targetCol))
+                            writeCellRaw(r, col.id, fills[i]);
+                    }
+                }
+                if (newMinCol < d.sourceMinCol) {
+                    const reversed = sourceRowValues.slice().reverse();
+                    const targetCols = d.sourceMinCol - newMinCol;
+                    const fills = buildFillPattern(reversed, targetCols);
+                    for (let i = 0; i < targetCols; i += 1) {
+                        const targetCol = d.sourceMinCol - 1 - i;
+                        const col = ctx.allColumns[targetCol];
+                        if (col && ctx.isCellEditableAt(r, targetCol))
+                            writeCellRaw(r, col.id, fills[i]);
+                    }
+                }
+            }
+        }
+        // Extend the selection to the new range so the user can immediately
+        // see what got filled.
+        ctx.selectionRange = {
+            anchor: { rowIndex: newMinRow, colIndex: newMinCol },
+            focus: { rowIndex: newMaxRow, colIndex: newMaxCol },
+        };
+    }
+    /** Clear the underlying value of every cell in the current selection
+     *  range (or just the active cell when nothing is range-selected).
+     *  Mirrors Excel's `Delete` key - values go to `null`, formatting and
+     *  the row identity stay intact. */
+    function clearSelectedCellValues() {
+        const anchor = ctx.selectionRange.anchor;
+        const focus = ctx.selectionRange.focus;
+        if (anchor && focus) {
+            const minRow = Math.min(anchor.rowIndex, focus.rowIndex);
+            const maxRow = Math.max(anchor.rowIndex, focus.rowIndex);
+            const minCol = Math.min(anchor.colIndex, focus.colIndex);
+            const maxCol = Math.max(anchor.colIndex, focus.colIndex);
+            for (let r = minRow; r <= maxRow; r += 1) {
+                for (let c = minCol; c <= maxCol; c += 1) {
+                    const col = ctx.allColumns[c];
+                    if (col?.columnDef.field && ctx.isCellEditableAt(r, c)) {
+                        writeCellRaw(r, col.id, null);
+                    }
+                }
+            }
+            return;
+        }
+        const a = ctx.grid.getState().activeCell;
+        if (a && ctx.userHasActivatedCell) {
+            const col = ctx.allColumns[a.colIndex];
+            if (col?.columnDef.field && ctx.isCellEditableAt(a.rowIndex, a.colIndex)) {
+                writeCellRaw(a.rowIndex, col.id, null);
+            }
+        }
+    }
+    /** Fill-handle pointerdown - seed the drag with the current selection
+     *  range (or active cell as a 1x1) and start tracking the pointer. */
+    function startFillDrag(event, rowIndex, colIndex) {
+        event.stopPropagation();
+        event.preventDefault();
+        const anchor = ctx.selectionRange.anchor;
+        const focus = ctx.selectionRange.focus;
+        if (anchor && focus) {
+            ctx.fillDrag = {
+                sourceMinRow: Math.min(anchor.rowIndex, focus.rowIndex),
+                sourceMaxRow: Math.max(anchor.rowIndex, focus.rowIndex),
+                sourceMinCol: Math.min(anchor.colIndex, focus.colIndex),
+                sourceMaxCol: Math.max(anchor.colIndex, focus.colIndex),
+                targetRow: rowIndex,
+                targetCol: colIndex,
+            };
+        }
+        else {
+            ctx.fillDrag = {
+                sourceMinRow: rowIndex,
+                sourceMaxRow: rowIndex,
+                sourceMinCol: colIndex,
+                sourceMaxCol: colIndex,
+                targetRow: rowIndex,
+                targetCol: colIndex,
+            };
+        }
+        // Don't `setPointerCapture` - we use `elementFromPoint` during the
+        // drag to find the hovered cell, and capture would route the events
+        // back to the handle, breaking the lookup. Window-level handlers
+        // (`onWindowPointerMove` / `endDragSelection`) keep tracking.
+    }
+    /** Pointermove during fill-drag. We don't get cell coords from the
+     *  event directly - find the td under the pointer via elementFromPoint
+     *  and read its data-svgrid-row / data-svgrid-col attributes. */
+    function onFillPointerMove(event) {
+        if (!ctx.fillDrag)
+            return;
+        const el = document.elementFromPoint(event.clientX, event.clientY);
+        const cell = el?.closest("td[data-svgrid-row][data-svgrid-col]");
+        if (!cell)
+            return;
+        const r = Number(cell.dataset.svgridRow);
+        const c = Number(cell.dataset.svgridCol);
+        if (!Number.isFinite(r) || !Number.isFinite(c))
+            return;
+        if (r === ctx.fillDrag.targetRow && c === ctx.fillDrag.targetCol)
+            return;
+        ctx.fillDrag = { ...ctx.fillDrag, targetRow: r, targetCol: c };
+    }
+    function onFillPointerUp() {
+        if (!ctx.fillDrag)
+            return;
+        applyFillPattern();
+    }
+    function toggleBooleanCell(rowIndex, colIndex) {
+        const row = ctx.allRows[rowIndex];
+        const column = ctx.allColumns[colIndex];
+        if (!row || !column)
+            return;
+        if (!column.columnDef.field)
+            return;
+        const baseValue = getColumnBaseValue(row, column);
+        const currentValue = Boolean(ctx.getCellDisplayValue(row.id, column.id, baseValue));
+        const nextValue = !currentValue;
+        row.original[column.columnDef.field] =
+            nextValue;
+        const key = getCellKey(row.id, column.id);
+        ctx.editedCellValues = {
+            ...ctx.editedCellValues,
+            [key]: nextValue,
+        };
+        ctx.grid.store.setState((prev) => ({ ...prev }));
+    }
+    function copySelectionToClipboard() {
+        const anchor = ctx.selectionRange.anchor;
+        const focus = ctx.selectionRange.focus;
+        if (!anchor || !focus)
+            return;
+        const minRow = Math.min(anchor.rowIndex, focus.rowIndex);
+        const maxRow = Math.max(anchor.rowIndex, focus.rowIndex);
+        const minCol = Math.min(anchor.colIndex, focus.colIndex);
+        const maxCol = Math.max(anchor.colIndex, focus.colIndex);
+        const lines = [];
+        for (let r = minRow; r <= maxRow; r += 1) {
+            const row = ctx.allRows[r];
+            if (!row || isGroupRow(row))
+                continue;
+            const cells = [];
+            for (let c = minCol; c <= maxCol; c += 1) {
+                const column = ctx.allColumns[c];
+                if (!column) {
+                    cells.push("");
+                    continue;
+                }
+                const base = getColumnBaseValue(row, column);
+                const display = ctx.getCellDisplayValue(row.id, column.id, base);
+                cells.push(String(display ?? ""));
+            }
+            lines.push(cells.join("\t"));
+        }
+        const text = lines.join("\n");
+        void navigator.clipboard?.writeText(text).catch(() => { });
+    }
+    /**
+     * Clear every editable cell in the current selection range. Used by
+     * Ctrl/Cmd+X (after a copy) and by the Delete / Backspace keys.
+     * Returns true if anything was changed - the caller uses that to
+     * decide whether to call `preventDefault()` and refresh the store.
+     */
+    function clearSelectedCells() {
+        const anchor = ctx.selectionRange.anchor ?? ctx.grid.getState().activeCell;
+        if (!anchor)
+            return false;
+        const focus = ctx.selectionRange.focus ?? anchor;
+        const startRow = Math.min(anchor.rowIndex, focus.rowIndex);
+        const startCol = Math.min(anchor.colIndex, focus.colIndex);
+        const endRow = Math.max(anchor.rowIndex, focus.rowIndex);
+        const endCol = Math.max(anchor.colIndex, focus.colIndex);
+        const next = ctx.internalData.slice();
+        let mutated = false;
+        for (let r = startRow; r <= endRow; r += 1) {
+            const row = ctx.allRows[r];
+            if (!row || isGroupRow(row))
+                continue;
+            const dataIndex = Number(row.id);
+            if (!Number.isInteger(dataIndex) ||
+                dataIndex < 0 ||
+                dataIndex >= next.length)
+                continue;
+            const originalRow = next[dataIndex];
+            if (!originalRow)
+                continue;
+            const updated = {
+                ...originalRow,
+            };
+            let rowChanged = false;
+            for (let c = startCol; c <= endCol; c += 1) {
+                const column = ctx.allColumns[c];
+                if (!column?.columnDef.field)
+                    continue;
+                if (!ctx.isCellEditableAt(r, c))
+                    continue;
+                // Clear means: empty string for text, undefined for everything
+                // else. parseEditorValue handles the per-type coercion.
+                const editorType = (column.columnDef.editorType ??
+                    "text");
+                updated[column.columnDef.field] = parseEditorValue(editorType, "");
+                rowChanged = true;
+            }
+            if (rowChanged) {
+                next[dataIndex] = updated;
+                mutated = true;
+            }
+        }
+        if (mutated) {
+            ctx.internalData = next;
+            ctx.grid.store.setState((prev) => ({ ...prev }));
+        }
+        return mutated;
+    }
+    async function cutSelectionToClipboard() {
+        // Cut = copy + clear. Wait for the copy to land on the clipboard so
+        // a slow writeText can't race the clear and leave the user with no
+        // way to undo via paste.
+        copySelectionToClipboard();
+        // Best-effort flush; clipboard.writeText is fire-and-forget but we
+        // already kicked it off above. The clear is synchronous.
+        clearSelectedCells();
+    }
+    return {
+        readCellRaw,
+        writeCellRaw,
+        applyFillPattern,
+        clearSelectedCellValues,
+        startFillDrag,
+        onFillPointerMove,
+        onFillPointerUp,
+        toggleBooleanCell,
+        copySelectionToClipboard,
+        clearSelectedCells,
+        cutSelectionToClipboard,
+    };
+}

package/dist/columns.d.ts

@@ -0,0 +1,30 @@
+import { type RowData, type TableFeatures } from "./index";
+import "./sv-grid-scrollbar";
+export declare function createColumns<TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData>(ctx: any): {
+    cellPinStyle: (columnId: string) => string;
+    isColumnPinned: (columnId: string) => "left" | "right" | null;
+    getCurrentColumnOrder: () => string[];
+    emitColumnOrder: () => void;
+    setColumnOrderInternal: (ids: ReadonlyArray<string>) => void;
+    applyColumnDrop: (dragId: string, targetId: string, side: "before" | "after") => void;
+    onColumnHeaderDragStart: (e: DragEvent, columnId: string) => void;
+    onColumnHeaderDragOver: (e: DragEvent, columnId: string) => void;
+    onColumnHeaderDragLeave: (columnId: string) => void;
+    onColumnHeaderDrop: (e: DragEvent, columnId: string) => void;
+    onColumnHeaderDragEnd: () => void;
+    pinColumnLeft: (columnId: string) => void;
+    pinColumnRight: (columnId: string) => void;
+    unpinColumn: (columnId: string) => void;
+    toggleColumnVisibleInPanel: (columnId: string) => void;
+    moveColumnInPanel: (columnId: string, dir: -1 | 1) => void;
+    toggleGroupInPanel: (columnId: string) => void;
+    getColumnBaseWidth: (columnId: string) => any;
+    getColumnWidth: (columnId: string) => any;
+    startColumnResize: (event: PointerEvent, columnId: string) => void;
+    onColumnResizeMove: (event: PointerEvent) => void;
+    endColumnResize: () => void;
+    measureText: (text: string, font: string) => number;
+    autosizeColumn: (columnId: string) => void;
+    autosizeAllColumns: () => void;
+    resetColumns: () => void;
+};

package/dist/columns.js

@@ -0,0 +1,277 @@
+import "./sv-grid-scrollbar";
+export function createColumns(ctx) {
+    function cellPinStyle(columnId) {
+        // z-index 30 - higher than the active-cell / selection-range stacking
+        // context (z=20) so a selected cell in the scrollable middle never
+        // bleeds over the pinned columns during horizontal scroll. Still
+        // sits below dropdowns (z=900+) and the column menu.
+        const leftOffset = ctx.pinnedOffsets.left[columnId];
+        if (leftOffset !== undefined) {
+            return `position: sticky; left: ${leftOffset}px; z-index: 30;`;
+        }
+        const rightOffset = ctx.pinnedOffsets.right[columnId];
+        if (rightOffset !== undefined) {
+            return `position: sticky; right: ${rightOffset}px; z-index: 30;`;
+        }
+        return "";
+    }
+    function isColumnPinned(columnId) {
+        if (ctx.columnPinning.left.includes(columnId))
+            return "left";
+        if (ctx.columnPinning.right.includes(columnId))
+            return "right";
+        return null;
+    }
+    /** Compute the current full column order as displayed (pinned-left
+     *  first, unpinned in the middle, pinned-right last). The order
+     *  emitted via `onColumnOrderChange` matches what the user sees. */
+    function getCurrentColumnOrder() {
+        return ctx.allColumns.map((c) => c.id);
+    }
+    function emitColumnOrder() {
+        ctx.props.onColumnOrderChange?.(getCurrentColumnOrder());
+    }
+    function setColumnOrderInternal(ids) {
+        ctx.userColumnOrder = [...ids];
+        emitColumnOrder();
+    }
+    /** Drop `dragId` before / after `targetId` in the user order. We
+     *  rebuild a clean order out of the currently-displayed columns so
+     *  hidden columns are unaffected and pin groups stay logically
+     *  separate (you can reorder freely within left-pinned / unpinned /
+     *  right-pinned, but a drop across pin zones is allowed - the cell
+     *  just lands in whichever zone the target belongs to). */
+    function applyColumnDrop(dragId, targetId, side) {
+        if (dragId === targetId)
+            return;
+        const current = getCurrentColumnOrder();
+        const without = current.filter((id) => id !== dragId);
+        let idx = without.indexOf(targetId);
+        if (idx < 0)
+            return;
+        if (side === "after")
+            idx++;
+        without.splice(idx, 0, dragId);
+        setColumnOrderInternal(without);
+    }
+    function onColumnHeaderDragStart(e, columnId) {
+        if (!(ctx.props.enableColumnReorder ?? false))
+            return;
+        ctx.colDragId = columnId;
+        e.dataTransfer?.setData("text/plain", columnId);
+        e.dataTransfer.effectAllowed = "move";
+    }
+    function onColumnHeaderDragOver(e, columnId) {
+        if (!ctx.colDragId || ctx.colDragId === columnId)
+            return;
+        e.preventDefault();
+        e.dataTransfer.dropEffect = "move";
+        const rect = e.currentTarget.getBoundingClientRect();
+        ctx.colDropSide = e.clientX < rect.left + rect.width / 2 ? "before" : "after";
+        ctx.colDropOnId = columnId;
+    }
+    function onColumnHeaderDragLeave(columnId) {
+        if (ctx.colDropOnId === columnId) {
+            ctx.colDropOnId = null;
+            ctx.colDropSide = null;
+        }
+    }
+    function onColumnHeaderDrop(e, columnId) {
+        e.preventDefault();
+        if (ctx.colDragId && ctx.colDropSide)
+            applyColumnDrop(ctx.colDragId, columnId, ctx.colDropSide);
+        ctx.colDragId = null;
+        ctx.colDropOnId = null;
+        ctx.colDropSide = null;
+    }
+    function onColumnHeaderDragEnd() {
+        ctx.colDragId = null;
+        ctx.colDropOnId = null;
+        ctx.colDropSide = null;
+    }
+    function pinColumnLeft(columnId) {
+        const left = ctx.columnPinning.left.filter((id) => id !== columnId);
+        const right = ctx.columnPinning.right.filter((id) => id !== columnId);
+        ctx.columnPinning = { left: [...left, columnId], right };
+        ctx.closeMenus();
+    }
+    function pinColumnRight(columnId) {
+        const left = ctx.columnPinning.left.filter((id) => id !== columnId);
+        const right = ctx.columnPinning.right.filter((id) => id !== columnId);
+        ctx.columnPinning = { left, right: [columnId, ...right] };
+        ctx.closeMenus();
+    }
+    function unpinColumn(columnId) {
+        ctx.columnPinning = {
+            left: ctx.columnPinning.left.filter((id) => id !== columnId),
+            right: ctx.columnPinning.right.filter((id) => id !== columnId),
+        };
+        ctx.closeMenus();
+    }
+    function toggleColumnVisibleInPanel(columnId) {
+        if (ctx.hiddenColumns[columnId]) {
+            const next = { ...ctx.hiddenColumns };
+            delete next[columnId];
+            ctx.hiddenColumns = next;
+        }
+        else {
+            ctx.hiddenColumns = { ...ctx.hiddenColumns, [columnId]: true };
+        }
+    }
+    function moveColumnInPanel(columnId, dir) {
+        const current = ctx.toolPanelColumns.map((c) => c.id);
+        const i = current.indexOf(columnId);
+        const j = i + dir;
+        if (i < 0 || j < 0 || j >= current.length)
+            return;
+        [current[i], current[j]] = [current[j], current[i]];
+        ctx.userColumnOrder = current;
+    }
+    function toggleGroupInPanel(columnId) {
+        const g = (ctx.grid.getState().grouping ?? []);
+        ctx.grid.setGrouping(g.includes(columnId)
+            ? g.filter((x) => x !== columnId)
+            : [...g, columnId]);
+    }
+    /** Width before fitColumns scaling - what the columnDef/user actually set. */
+    function getColumnBaseWidth(columnId) {
+        if (ctx.columnWidths[columnId] !== undefined)
+            return ctx.columnWidths[columnId];
+        const column = ctx.grid.getAllColumns().find((c) => c.id === columnId);
+        if (column?.columnDef.width !== undefined)
+            return column.columnDef.width;
+        return ctx.props.columnWidth ?? 140;
+    }
+    function getColumnWidth(columnId) {
+        const fitted = ctx.fittedColumnWidths?.[columnId];
+        if (fitted !== undefined && ctx.columnWidths[columnId] === undefined)
+            return fitted;
+        return getColumnBaseWidth(columnId);
+    }
+    function startColumnResize(event, columnId) {
+        event.stopPropagation();
+        event.preventDefault();
+        ctx.resizingColumnId = columnId;
+        ctx.resizeStartX = event.clientX;
+        ctx.resizeStartWidth = getColumnWidth(columnId);
+        document.addEventListener("pointermove", onColumnResizeMove);
+        document.addEventListener("pointerup", endColumnResize);
+        document.addEventListener("pointercancel", endColumnResize);
+    }
+    function onColumnResizeMove(event) {
+        if (!ctx.resizingColumnId)
+            return;
+        // Coalesce updates onto the animation frame: pointermove can fire many
+        // times per frame, and each $state mutation triggers a full reactive
+        // recompute of the column-layout pipeline. Without rAF coalescing the
+        // grid stutters during the drag.
+        ctx.resizePendingWidth = Math.max(ctx.MIN_COLUMN_WIDTH, ctx.resizeStartWidth + (event.clientX - ctx.resizeStartX));
+        if (ctx.resizeRaf !== null)
+            return;
+        ctx.resizeRaf = requestAnimationFrame(() => {
+            ctx.resizeRaf = null;
+            if (!ctx.resizingColumnId)
+                return;
+            ctx.columnWidths = {
+                ...ctx.columnWidths,
+                [ctx.resizingColumnId]: ctx.resizePendingWidth,
+            };
+        });
+    }
+    function endColumnResize() {
+        if (ctx.resizeRaf !== null) {
+            cancelAnimationFrame(ctx.resizeRaf);
+            ctx.resizeRaf = null;
+        }
+        if (ctx.resizingColumnId && ctx.resizePendingWidth) {
+            // Make sure the final width is committed even if the last rAF was
+            // canceled mid-flight.
+            ctx.columnWidths = {
+                ...ctx.columnWidths,
+                [ctx.resizingColumnId]: ctx.resizePendingWidth,
+            };
+        }
+        ctx.resizingColumnId = null;
+        document.removeEventListener("pointermove", onColumnResizeMove);
+        document.removeEventListener("pointerup", endColumnResize);
+        document.removeEventListener("pointercancel", endColumnResize);
+    }
+    function measureText(text, font) {
+        if (!text)
+            return 0;
+        if (!ctx.measureCanvas)
+            ctx.measureCanvas = document.createElement("canvas");
+        const c2d = ctx.measureCanvas.getContext("2d");
+        if (!c2d)
+            return 0;
+        c2d.font = font;
+        return c2d.measureText(text).width;
+    }
+    /** Snap a column to the width of its widest visible cell (header + body). */
+    function autosizeColumn(columnId) {
+        if (!ctx.gridRootEl)
+            return;
+        const sampleCell = ctx.gridRootEl.querySelector(`[data-col-id="${CSS.escape(columnId)}"]`);
+        if (!sampleCell)
+            return;
+        const cellFont = getComputedStyle(sampleCell).font;
+        let max = ctx.MIN_COLUMN_WIDTH;
+        const header = ctx.gridRootEl.querySelector(`[data-svgrid-header-col="${CSS.escape(columnId)}"]`);
+        if (header) {
+            const labelEl = header.querySelector(".sv-grid-header-label");
+            const target = labelEl ?? header;
+            const text = target.textContent ?? "";
+            // +70 reserves room for sort indicator + funnel + 3-dot menu button
+            max = Math.max(max, measureText(text, getComputedStyle(target).font) + 70);
+        }
+        const cells = ctx.gridRootEl.querySelectorAll(`[data-col-id="${CSS.escape(columnId)}"]`);
+        cells.forEach((cell) => {
+            const text = cell.textContent ?? "";
+            const w = measureText(text, cellFont);
+            if (w > max)
+                max = w;
+        });
+        // cell horizontal padding (~16px) + 8px breathing room
+        ctx.columnWidths = {
+            ...ctx.columnWidths,
+            [columnId]: Math.max(ctx.MIN_COLUMN_WIDTH, Math.ceil(max) + 24),
+        };
+    }
+    function autosizeAllColumns() {
+        for (const column of ctx.allColumns)
+            autosizeColumn(column.id);
+    }
+    function resetColumns() {
+        ctx.columnWidths = {};
+        ctx.hiddenColumns = {};
+        ctx.columnPinning = { left: [], right: [] };
+    }
+    return {
+        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,
+    };
+}

package/dist/core.d.ts

@@ -110,7 +110,7 @@ export type ColumnDef<TFeatures extends TableFeatures, TData extends RowData> =
     footer?: ColumnDefTemplate<HeaderContext<TData>>;
     cell?: ColumnDefTemplate<CellContext<TData>>;
     columns?: Array<ColumnDef<TFeatures, TData>>;
-    editorType?: 'text' | 'number' | 'date' | 'datetime' | 'time' | 'password' | 'checkbox' | 'list' | 'chips' | 'select' | 'rich-select' | 'textarea' | 'color' | 'rating';
+    editorType?: 'text' | 'number' | 'date' | 'datetime' | 'time' | 'password' | 'checkbox' | 'list' | 'chips' | 'select' | 'rich-select' | 'autocomplete' | 'textarea' | 'color' | 'rating';
     /**
      * Custom in-cell editor. Receives the cell context PLUS a `commit(value)`
      * and `cancel()` helper. Use when none of the built-in `editorType`s fit;