@svgrid/grid 1.0.2 → 1.1.0

package/dist/menus.js

@@ -0,0 +1,389 @@
+import "./sv-grid-scrollbar";
+import { clampMenuX, cssEscape, } from "./SvGrid.helpers";
+export function createMenus(ctx) {
+    function updateFilterRow(columnId, value) {
+        ctx.filterRowValues = { ...ctx.filterRowValues, [columnId]: value };
+        const current = ctx.filterMenuValues[columnId] ?? {
+            operator: "contains",
+            value: "",
+        };
+        ctx.filterMenuValues = {
+            ...ctx.filterMenuValues,
+            [columnId]: { ...current, value },
+        };
+    }
+    function updateFilterOperator(columnId, operator) {
+        const current = ctx.filterMenuValues[columnId] ?? {
+            operator: "contains",
+            value: "",
+        };
+        ctx.filterMenuValues = {
+            ...ctx.filterMenuValues,
+            [columnId]: { ...current, operator },
+        };
+    }
+    function updateFilterMenuValue(columnId, value) {
+        const current = ctx.filterMenuValues[columnId] ?? {
+            operator: "contains",
+            value: "",
+        };
+        ctx.filterMenuValues = {
+            ...ctx.filterMenuValues,
+            [columnId]: { ...current, value },
+        };
+        ctx.filterRowValues = { ...ctx.filterRowValues, [columnId]: value };
+    }
+    /** Upper-bound input for the `between` operator. Only relevant when
+     *  the column's current operator is `between`; harmless to call
+     *  otherwise. */
+    function updateFilterMenuValueTo(columnId, valueTo) {
+        const current = ctx.filterMenuValues[columnId] ?? {
+            operator: "between",
+            value: "",
+        };
+        ctx.filterMenuValues = {
+            ...ctx.filterMenuValues,
+            [columnId]: { ...current, valueTo },
+        };
+    }
+    function toggleCheckboxWithKeyboard(event, toggle) {
+        if (event.key !== "Enter" && event.key !== " ")
+            return;
+        event.preventDefault();
+        toggle();
+    }
+    function isColumnFiltered(columnId) {
+        if (ctx.valueFilters[columnId])
+            return true;
+        const menuFilter = ctx.filterMenuValues[columnId];
+        return Boolean(menuFilter &&
+            (menuFilter.operator === "isBlank" || menuFilter.value.trim()));
+    }
+    function closeMenus() {
+        ctx.columnMenuFor = null;
+        ctx.filterMenuFor = null;
+        ctx.operatorMenuFor = null;
+        ctx.chooseColumnsPos = null;
+    }
+    function openChooseColumns(event) {
+        event.stopPropagation();
+        // Submenu behavior: keep the parent operations menu open and float the
+        // Choose Columns panel out to the right of it (AG-Grid style). Falls
+        // back to below the item if the popover would clip the viewport.
+        const trigger = event.currentTarget;
+        const menuEl = trigger.closest(".sv-grid-menu");
+        const anchor = (menuEl ?? trigger).getBoundingClientRect();
+        const panelWidth = 240;
+        const wantRight = anchor.right + 4;
+        const x = wantRight + panelWidth + 8 > window.innerWidth
+            ? clampMenuX(anchor.left - panelWidth - 4, panelWidth)
+            : clampMenuX(wantRight, panelWidth);
+        ctx.chooseColumnsPos = { x, y: anchor.top };
+    }
+    function openColumnMenu(event, columnId) {
+        event.stopPropagation();
+        const wasOpen = ctx.columnMenuFor === columnId;
+        closeMenus();
+        if (wasOpen)
+            return;
+        const rect = event.currentTarget.getBoundingClientRect();
+        ctx.columnMenuPos = {
+            x: clampMenuX(rect.right - 240, 240),
+            y: rect.bottom + 4,
+        };
+        ctx.columnMenuFor = columnId;
+    }
+    function openFilterMenu(event, columnId) {
+        event.stopPropagation();
+        const wasOpen = ctx.filterMenuFor === columnId;
+        closeMenus();
+        if (wasOpen)
+            return;
+        // If the consumer is running in row-mode (or any mode where the
+        // funnel popover wouldn't render), redirect the click to the
+        // inline filter input for this column. Without this the funnel
+        // would be a dead button - it visibly clicks but nothing happens
+        // because the menu is gated behind `showColumnFiltersEffective`.
+        if (!ctx.showColumnFiltersEffective && ctx.showFilterRowEffective) {
+            // Find the row-mode filter input and focus it. The input is
+            // tagged with `data-svgrid-filter-col` so we can target by id
+            // without depending on column position.
+            const input = ctx.scrollContainer?.querySelector(`[data-svgrid-filter-col="${cssEscape(columnId)}"]`);
+            if (input) {
+                input.focus();
+                input.select();
+                // Brief pulse so the user sees where focus landed.
+                input.classList.add("sv-grid-filter-value-pulse");
+                setTimeout(() => input.classList.remove("sv-grid-filter-value-pulse"), 700);
+            }
+            return;
+        }
+        const rect = event.currentTarget.getBoundingClientRect();
+        ctx.filterMenuPos = {
+            x: clampMenuX(rect.right - 260, 260),
+            y: rect.bottom + 4,
+        };
+        ctx.columnMenuSearch = "";
+        ctx.filterMenuFor = columnId;
+    }
+    function openOperatorMenu(event, columnId) {
+        event.stopPropagation();
+        const wasOpen = ctx.operatorMenuFor === columnId;
+        closeMenus();
+        if (wasOpen)
+            return;
+        const rect = event.currentTarget.getBoundingClientRect();
+        ctx.operatorMenuPos = { x: clampMenuX(rect.left, 184), y: rect.bottom + 4 };
+        ctx.operatorMenuFor = columnId;
+    }
+    function sortColumnFromMenu(columnId, desc) {
+        ctx.grid.store.setState((prev) => ({
+            ...prev,
+            sorting: [{ id: columnId, desc }],
+        }));
+        closeMenus();
+    }
+    function clearColumnSort(columnId) {
+        ctx.grid.store.setState((prev) => ({
+            ...prev,
+            sorting: (prev.sorting ?? []).filter((entry) => entry.id !== columnId),
+        }));
+        closeMenus();
+    }
+    function groupByColumnFromMenu(columnId) {
+        const current = ctx.grid.getState().grouping ?? [];
+        if (current.includes(columnId)) {
+            closeMenus();
+            return;
+        }
+        ctx.grid.setGrouping([...current, columnId]);
+        closeMenus();
+    }
+    function clearGroupingFromMenu(columnId) {
+        const current = ctx.grid.getState().grouping ?? [];
+        ctx.grid.setGrouping(current.filter((id) => id !== columnId));
+        closeMenus();
+    }
+    function isFacetChecked(columnId, value) {
+        const selected = ctx.valueFilters[columnId];
+        return selected ? selected.has(value) : true;
+    }
+    function toggleFacetValue(columnId, value) {
+        const allValues = ctx.columnMenuFacetValues;
+        const next = new Set(ctx.valueFilters[columnId] ?? allValues);
+        if (next.has(value))
+            next.delete(value);
+        else
+            next.add(value);
+        if (next.size === allValues.length) {
+            const copy = { ...ctx.valueFilters };
+            delete copy[columnId];
+            ctx.valueFilters = copy;
+        }
+        else {
+            ctx.valueFilters = { ...ctx.valueFilters, [columnId]: next };
+        }
+    }
+    function isAllFacetsChecked(columnId) {
+        const selected = ctx.valueFilters[columnId];
+        return !selected || selected.size >= ctx.columnMenuFacetValues.length;
+    }
+    function toggleAllFacets(columnId) {
+        if (isAllFacetsChecked(columnId)) {
+            ctx.valueFilters = { ...ctx.valueFilters, [columnId]: new Set() };
+        }
+        else {
+            const copy = { ...ctx.valueFilters };
+            delete copy[columnId];
+            ctx.valueFilters = copy;
+        }
+    }
+    function clearColumnFilter(columnId) {
+        if (ctx.valueFilters[columnId]) {
+            const next = { ...ctx.valueFilters };
+            delete next[columnId];
+            ctx.valueFilters = next;
+        }
+        if (ctx.filterMenuValues[columnId]) {
+            const next = { ...ctx.filterMenuValues };
+            delete next[columnId];
+            ctx.filterMenuValues = next;
+        }
+        if (ctx.filterRowValues[columnId]) {
+            const next = { ...ctx.filterRowValues };
+            delete next[columnId];
+            ctx.filterRowValues = next;
+        }
+    }
+    function changePage(delta) {
+        ctx.grid.setPagination((prev) => ({
+            ...prev,
+            pageIndex: Math.max((prev?.pageIndex ?? 0) + delta, 0),
+        }));
+    }
+    function goToPage(pageIndex) {
+        ctx.grid.setPagination((prev) => ({
+            ...prev,
+            pageIndex: Math.max(0, pageIndex),
+        }));
+    }
+    function setPageSize(pageSize) {
+        ctx.grid.setPagination((prev) => {
+            const oldSize = prev?.pageSize ?? 10;
+            const oldIndex = prev?.pageIndex ?? 0;
+            // Keep the first visible row in view when the page size changes.
+            const firstVisibleRow = oldIndex * oldSize;
+            return {
+                ...prev,
+                pageSize,
+                pageIndex: Math.max(0, Math.floor(firstVisibleRow / pageSize)),
+            };
+        });
+    }
+    function insertRowAt(t, offset) {
+        const data = ctx.internalData.slice();
+        const idx = t.row ? data.indexOf(t.row) : -1;
+        const at = idx < 0 ? data.length : idx + offset;
+        data.splice(at, 0, {});
+        ctx.internalData = data;
+    }
+    function removeRowAt(t) {
+        if (!t.row)
+            return;
+        ctx.internalData = ctx.internalData.filter((r) => r !== t.row);
+    }
+    function removeColAt(t) {
+        ctx.internalColumns = ctx.internalColumns.filter((d) => (d.id ?? d.field) !== t.columnId);
+    }
+    // Built-in items, keyed. `run` reads the live target passed at click time.
+    const builtins = {
+        copy: { label: "Copy", run: () => ctx.copySelectionToClipboard() },
+        cut: { label: "Cut", run: () => ctx.cutSelectionToClipboard() },
+        paste: { label: "Paste", run: () => void ctx.pasteFromClipboard() },
+        clear: { label: "Clear", run: () => ctx.clearSelectedCells() },
+        row_above: { label: "Insert row above", run: (t) => insertRowAt(t, 0) },
+        row_below: { label: "Insert row below", run: (t) => insertRowAt(t, 1) },
+        remove_row: { label: "Remove row", run: removeRowAt },
+        remove_col: { label: "Remove column", run: removeColAt },
+        comment: { label: "Edit comment", run: (t) => openCommentEditor(t) },
+    };
+    const DEFAULT_ITEMS = [
+        "copy", "cut", "paste", "clear", "separator",
+        "row_above", "row_below", "remove_row", "separator", "remove_col",
+    ];
+    function openContextMenu(event, rowIndex, colIndex, columnId) {
+        if (!ctx.props.contextMenu)
+            return;
+        event.preventDefault();
+        closeMenus();
+        ctx.contextMenuFor = null;
+        const rowModel = ctx.allRows[rowIndex];
+        const row = rowModel?.original ?? null;
+        const rowId = rowModel?.id ?? String(rowIndex);
+        ctx.contextMenuPos = {
+            x: clampMenuX(event.clientX, 220),
+            y: Math.max(8, Math.min(event.clientY, window.innerHeight - 16)),
+        };
+        ctx.contextMenuFor = { rowIndex, colIndex, columnId, rowId, row };
+    }
+    function closeContextMenu() {
+        ctx.contextMenuFor = null;
+    }
+    // ---- Editable comments ---------------------------------------------
+    function openCommentEditor(t) {
+        const cur = ctx.noteOverrides?.[t.rowId]?.[t.columnId] ??
+            ctx.props.notes?.[t.rowId]?.[t.columnId] ??
+            "";
+        ctx.commentDraft = cur;
+        ctx.commentEditFor = { rowId: t.rowId, columnId: t.columnId, x: ctx.contextMenuPos.x, y: ctx.contextMenuPos.y };
+        ctx.contextMenuFor = null;
+    }
+    function writeNote(rowId, columnId, note) {
+        const next = { ...ctx.noteOverrides };
+        next[rowId] = { ...(next[rowId] ?? {}), [columnId]: note };
+        ctx.noteOverrides = next;
+        ctx.props.onNoteChange?.({ rowId, columnId, note });
+    }
+    function saveComment() {
+        const e = ctx.commentEditFor;
+        if (!e)
+            return;
+        writeNote(e.rowId, e.columnId, ctx.commentDraft);
+        ctx.commentEditFor = null;
+    }
+    function removeComment() {
+        const e = ctx.commentEditFor;
+        if (!e)
+            return;
+        writeNote(e.rowId, e.columnId, "");
+        ctx.commentEditFor = null;
+    }
+    function closeCommentEditor() {
+        ctx.commentEditFor = null;
+    }
+    /** Resolve the configured items against the current target for rendering. */
+    function contextMenuItems() {
+        const target = ctx.contextMenuFor;
+        if (!target)
+            return [];
+        const cfg = ctx.props.contextMenu;
+        const entries = Array.isArray(cfg)
+            ? cfg
+            : [...DEFAULT_ITEMS, ...(ctx.props.editableComments ? ["separator", "comment"] : [])];
+        const out = [];
+        for (const entry of entries) {
+            if (entry === "separator") {
+                out.push({ key: "sep" + out.length, label: "", separator: true });
+                continue;
+            }
+            if (typeof entry === "string") {
+                const b = builtins[entry];
+                if (!b)
+                    continue;
+                out.push({ key: entry, label: b.label, run: () => b.run(target) });
+                continue;
+            }
+            if (entry.hidden?.(target))
+                continue;
+            out.push({
+                key: entry.key,
+                label: entry.label,
+                disabled: entry.disabled?.(target) ?? false,
+                run: () => entry.action(target),
+            });
+        }
+        // Drop leading/trailing/double separators.
+        return out.filter((it, i, a) => !it.separator || (i > 0 && i < a.length - 1 && !a[i - 1]?.separator));
+    }
+    return {
+        updateFilterRow,
+        updateFilterOperator,
+        updateFilterMenuValue,
+        updateFilterMenuValueTo,
+        toggleCheckboxWithKeyboard,
+        isColumnFiltered,
+        closeMenus,
+        openChooseColumns,
+        openColumnMenu,
+        openFilterMenu,
+        openOperatorMenu,
+        sortColumnFromMenu,
+        clearColumnSort,
+        groupByColumnFromMenu,
+        clearGroupingFromMenu,
+        isFacetChecked,
+        toggleFacetValue,
+        isAllFacetsChecked,
+        toggleAllFacets,
+        clearColumnFilter,
+        changePage,
+        goToPage,
+        setPageSize,
+        openContextMenu,
+        closeContextMenu,
+        contextMenuItems,
+        saveComment,
+        removeComment,
+        closeCommentEditor,
+    };
+}

package/dist/named-views.d.ts

@@ -40,3 +40,30 @@ export declare function localStorageViews(key: string): ViewStorage;
 export declare function createNamedViews(host: ViewStateHost, options?: {
     storage?: ViewStorage;
 }): NamedViews;
+export type AutoSavedViewOptions = {
+    /** Slot name inside the NamedViews store. Default `'__autosave'`. */
+    name?: string;
+    /** Sample interval in ms. Default 800. */
+    intervalMs?: number;
+    /** Skip restore-on-mount (e.g. you already loaded a URL view first). */
+    skipRestore?: boolean;
+};
+/**
+ * Attach an "always-save-current-layout" slot to a `NamedViews` manager.
+ * Restores once on attach (if a saved view exists under `name`) and
+ * polls `host.getState()` thereafter, saving when the JSON snapshot
+ * changes.
+ *
+ * Returns a `detach()` that stops polling - call it from `onDestroy`.
+ *
+ * ```ts
+ * const views = createNamedViews(api, { storage: localStorageViews('myapp:views') })
+ * const off = attachAutoSavedView(api, views)
+ * onDestroy(off)
+ * ```
+ *
+ * Distinct from a user-saved named view: the slot is a single, fixed
+ * name reserved for "what the user left the page looking at." The user
+ * can still call `views.save('Q3 review')` etc. through the same store.
+ */
+export declare function attachAutoSavedView(host: ViewStateHost, views: NamedViews, opts?: AutoSavedViewOptions): () => void;

package/dist/named-views.js

@@ -78,3 +78,42 @@ export function createNamedViews(host, options = {}) {
         },
     };
 }
+/**
+ * Attach an "always-save-current-layout" slot to a `NamedViews` manager.
+ * Restores once on attach (if a saved view exists under `name`) and
+ * polls `host.getState()` thereafter, saving when the JSON snapshot
+ * changes.
+ *
+ * Returns a `detach()` that stops polling - call it from `onDestroy`.
+ *
+ * ```ts
+ * const views = createNamedViews(api, { storage: localStorageViews('myapp:views') })
+ * const off = attachAutoSavedView(api, views)
+ * onDestroy(off)
+ * ```
+ *
+ * Distinct from a user-saved named view: the slot is a single, fixed
+ * name reserved for "what the user left the page looking at." The user
+ * can still call `views.save('Q3 review')` etc. through the same store.
+ */
+export function attachAutoSavedView(host, views, opts = {}) {
+    const name = opts.name ?? '__autosave';
+    if (!opts.skipRestore && views.has(name))
+        views.load(name);
+    const interval = Math.max(100, opts.intervalMs ?? 800);
+    let last = JSON.stringify(host.getState());
+    const handle = setInterval(() => {
+        let next;
+        try {
+            next = JSON.stringify(host.getState());
+        }
+        catch {
+            return;
+        }
+        if (next === last)
+            return;
+        last = next;
+        views.save(name);
+    }, interval);
+    return () => clearInterval(handle);
+}

package/dist/row-resize.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Row-resize Svelte action - drag the bottom edge of a row to grow /
+ * shrink it. Pair with a function-valued `rowHeight` prop so the grid
+ * 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.
+ *
+ *   <script>
+ *     let heights = $state<Record<number, number>>({})
+ *     let resizeOn = $state(false)
+ *     const rowHeight = (i: number) => heights[i] ?? 32
+ *     function onResize(i: number, h: number) { heights = { ...heights, [i]: h } }
+ *   </script>
+ *
+ *   <div use:rowResize={{ onResize, disabled: !resizeOn }}>
+ *     <SvGrid columns={[{ field:'rn', cellClass:'sv-row-gutter', ... }, ...]}
+ *             rowHeight={rowHeight} ... />
+ *   </div>
+ *
+ * Visual: the strip sits along the bottom edge of the row-header
+ * cell, 5px tall, transparent by default, accent-tinted on hover -
+ * matching the column resize handle's look. Cursor is `row-resize`.
+ */
+export type RowResizeOptions = {
+    /** Called when the user releases the drag with the final height. */
+    onResize: (rowIndex: number, height: number) => void;
+    /** Optional callback fired during the drag (every pointermove). */
+    onResizeMove?: (rowIndex: number, height: number) => void;
+    /** Min row height in px. Default 20. */
+    min?: number;
+    /** Max row height in px. Default 320. */
+    max?: number;
+    /** When true, the action removes its strips and ignores events. */
+    disabled?: boolean;
+};
+export declare function rowResize(node: HTMLElement, opts: RowResizeOptions): {
+    update(next: RowResizeOptions): void;
+    destroy(): void;
+};

package/dist/row-resize.js

@@ -0,0 +1,158 @@
+/**
+ * Row-resize Svelte action - drag the bottom edge of a row to grow /
+ * shrink it. Pair with a function-valued `rowHeight` prop so the grid
+ * 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.
+ *
+ *   <script>
+ *     let heights = $state<Record<number, number>>({})
+ *     let resizeOn = $state(false)
+ *     const rowHeight = (i: number) => heights[i] ?? 32
+ *     function onResize(i: number, h: number) { heights = { ...heights, [i]: h } }
+ *   </script>
+ *
+ *   <div use:rowResize={{ onResize, disabled: !resizeOn }}>
+ *     <SvGrid columns={[{ field:'rn', cellClass:'sv-row-gutter', ... }, ...]}
+ *             rowHeight={rowHeight} ... />
+ *   </div>
+ *
+ * Visual: the strip sits along the bottom edge of the row-header
+ * cell, 5px tall, transparent by default, accent-tinted on hover -
+ * matching the column resize handle's look. Cursor is `row-resize`.
+ */
+const STRIP_CLASS = 'sv-grid-row-resize-handle';
+export function rowResize(node, opts) {
+    let current = opts;
+    let drag = null;
+    function rowIndexOf(tr) {
+        const dataRow = tr.querySelector('[data-svgrid-row]');
+        const val = dataRow?.dataset.svgridRow;
+        return val != null ? Number(val) : NaN;
+    }
+    function onPointerMove(e) {
+        if (!drag)
+            return;
+        const min = current.min ?? 20;
+        const max = current.max ?? 320;
+        const next = Math.max(min, Math.min(max, drag.startHeight + (e.clientY - drag.startY)));
+        drag.trEl.style.height = `${Math.round(next)}px`;
+        current.onResizeMove?.(drag.rowIndex, Math.round(next));
+    }
+    function onPointerUp(e) {
+        if (!drag)
+            return;
+        const min = current.min ?? 20;
+        const max = current.max ?? 320;
+        const next = Math.max(min, Math.min(max, drag.startHeight + (e.clientY - drag.startY)));
+        current.onResize(drag.rowIndex, Math.round(next));
+        drag.strip.classList.remove('is-resizing');
+        try {
+            drag.trEl.releasePointerCapture(e.pointerId);
+        }
+        catch { /* ignore */ }
+        drag = null;
+        window.removeEventListener('pointermove', onPointerMove);
+        window.removeEventListener('pointerup', onPointerUp);
+        document.body.style.cursor = '';
+    }
+    function onPointerDown(e) {
+        if (current.disabled)
+            return;
+        const t = e.target;
+        if (!t?.classList.contains(STRIP_CLASS))
+            return;
+        const tr = t.closest('tr.sv-grid-row');
+        if (!tr)
+            return;
+        const rowIndex = rowIndexOf(tr);
+        if (!Number.isFinite(rowIndex))
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        t.classList.add('is-resizing');
+        drag = {
+            rowIndex,
+            startY: e.clientY,
+            startHeight: tr.getBoundingClientRect().height,
+            trEl: tr,
+            strip: t,
+        };
+        try {
+            tr.setPointerCapture(e.pointerId);
+        }
+        catch { /* ignore */ }
+        document.body.style.cursor = 'row-resize';
+        window.addEventListener('pointermove', onPointerMove);
+        window.addEventListener('pointerup', onPointerUp);
+    }
+    /** Inject one strip into every row's gutter cell. When disabled or
+     *  when a row lacks a `.sv-row-gutter` cell, no strip is added. */
+    function decorate() {
+        if (current.disabled) {
+            removeAllStrips();
+            return;
+        }
+        const rows = node.querySelectorAll('tr.sv-grid-row');
+        for (const tr of rows) {
+            if (tr.classList.contains('sv-grid-header-row'))
+                continue;
+            if (tr.classList.contains('sv-grid-row-spacer'))
+                continue;
+            const gutter = tr.querySelector('.sv-grid-cell.sv-row-gutter');
+            if (!gutter)
+                continue;
+            if (gutter.querySelector(`:scope > .${STRIP_CLASS}`))
+                continue;
+            // Anchor the strip to the gutter cell + allow it to overflow
+            // downward into the row gap so the hit-area straddles the
+            // row boundary the way Excel does.
+            if (getComputedStyle(gutter).position === 'static')
+                gutter.style.position = 'relative';
+            gutter.style.overflow = 'visible';
+            const strip = document.createElement('div');
+            strip.className = STRIP_CLASS;
+            strip.setAttribute('role', 'separator');
+            strip.setAttribute('aria-orientation', 'horizontal');
+            strip.setAttribute('aria-label', 'Resize row');
+            // Inline the geometry + pointer-events so the strip works even
+            // before SvGrid.css is parsed; the hover tint still comes from
+            // the stylesheet. We keep the strip fully inside the gutter
+            // cell (no negative offset) to avoid stacking-context surprises
+            // with pinned / virtualised neighbour cells.
+            // 5px tall + sitting flush with the row bottom matches the
+            // column resize handle's 5px width.
+            strip.style.cssText =
+                'position:absolute;left:0;right:0;bottom:0;height:5px;' +
+                    'cursor:row-resize;user-select:none;z-index:60;pointer-events:auto;';
+            gutter.appendChild(strip);
+        }
+    }
+    function removeAllStrips() {
+        node.querySelectorAll(`.${STRIP_CLASS}`).forEach((el) => el.remove());
+    }
+    node.addEventListener('pointerdown', onPointerDown, { capture: true });
+    const observer = new MutationObserver(() => decorate());
+    observer.observe(node, { childList: true, subtree: true });
+    decorate();
+    return {
+        update(next) {
+            const wasDisabled = current.disabled;
+            current = next;
+            // Toggle: when going from enabled <-> disabled, repaint immediately.
+            if (wasDisabled !== current.disabled)
+                decorate();
+        },
+        destroy() {
+            node.removeEventListener('pointerdown', onPointerDown, { capture: true });
+            window.removeEventListener('pointermove', onPointerMove);
+            window.removeEventListener('pointerup', onPointerUp);
+            observer.disconnect();
+            removeAllStrips();
+        },
+    };
+}

package/dist/scroll-sync.d.ts

@@ -0,0 +1,9 @@
+import { type RowData, type TableFeatures } from "./index";
+import "./sv-grid-scrollbar";
+export declare function createScrollSync<TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData>(ctx: any): {
+    showTooltipFor: (el: HTMLElement, text: string) => void;
+    hideTooltip: () => void;
+    flushScheduledScrollSync: () => void;
+    scheduleScrollSync: (scrollTop: number, scrollLeft: number) => void;
+    onBodyScroll: (event: Event) => void;
+};