@svgrid/grid 1.0.2 → 1.1.1

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/row-resize.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/row-resize.test.js

@@ -0,0 +1,329 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { rowResize } from './row-resize';
+const STRIP_CLASS = 'sv-grid-row-resize-handle';
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+/** Build a host `<table>` with `rows` body rows. Each row carries the
+ *  `tr.sv-grid-row` class + a `.sv-row-gutter` cell holding a
+ *  `data-svgrid-row` marker, matching what SvGrid renders. Extra classes
+ *  let individual tests opt rows out (header / spacer / no-gutter). */
+function buildGrid(specs) {
+    const host = document.createElement('div');
+    const table = document.createElement('table');
+    const tbody = document.createElement('tbody');
+    const rows = [];
+    specs.forEach((spec, i) => {
+        const tr = document.createElement('tr');
+        tr.className = ['sv-grid-row', ...(spec.rowClasses ?? [])].join(' ');
+        const cell = document.createElement('td');
+        cell.className = 'sv-grid-cell';
+        if (spec.gutter !== false)
+            cell.classList.add('sv-row-gutter');
+        const marker = document.createElement('span');
+        marker.setAttribute('data-svgrid-row', String(spec.rowIndex ?? i));
+        cell.appendChild(marker);
+        tr.appendChild(cell);
+        tbody.appendChild(tr);
+        rows.push(tr);
+    });
+    table.appendChild(tbody);
+    host.appendChild(table);
+    document.body.appendChild(host);
+    return { host, rows };
+}
+function gutterOf(tr) {
+    return tr.querySelector('.sv-row-gutter');
+}
+function stripOf(tr) {
+    return tr.querySelector(`.${STRIP_CLASS}`);
+}
+/** Mock getBoundingClientRect so a TR reports a real height in jsdom
+ *  (which otherwise returns all-zero rects). */
+function mockRowHeight(tr, height) {
+    tr.getBoundingClientRect = () => ({ height, width: 100, top: 0, left: 0, right: 100, bottom: height, x: 0, y: 0, toJSON() { } });
+}
+function pointer(type, init = {}) {
+    return new PointerEvent(type, { bubbles: true, cancelable: true, pointerId: 1, ...init });
+}
+const hosts = [];
+function track(host) {
+    hosts.push(host);
+    return host;
+}
+beforeEach(() => {
+    // jsdom lacks pointer-capture methods on elements; stub them so the action's
+    // try/catch wrapped calls have something to invoke.
+    if (!HTMLElement.prototype.setPointerCapture) {
+        HTMLElement.prototype.setPointerCapture = function () { };
+    }
+    if (!HTMLElement.prototype.releasePointerCapture) {
+        HTMLElement.prototype.releasePointerCapture = function () { };
+    }
+});
+afterEach(() => {
+    while (hosts.length)
+        hosts.pop().remove();
+    document.body.innerHTML = '';
+    document.body.style.cursor = '';
+});
+// ---------------------------------------------------------------------------
+// decorate()
+// ---------------------------------------------------------------------------
+describe('rowResize - strip injection', () => {
+    it('injects a resize strip into every gutter cell', () => {
+        const { host, rows } = buildGrid([{}, {}, {}]);
+        track(host);
+        const action = rowResize(host, { onResize: vi.fn() });
+        for (const tr of rows) {
+            const strip = stripOf(tr);
+            expect(strip).not.toBeNull();
+            expect(strip.getAttribute('role')).toBe('separator');
+            expect(strip.getAttribute('aria-orientation')).toBe('horizontal');
+            expect(strip.getAttribute('aria-label')).toBe('Resize row');
+            expect(strip.style.cursor).toBe('row-resize');
+        }
+        // Gutter cells become a positioning context with visible overflow.
+        expect(gutterOf(rows[0]).style.position).toBe('relative');
+        expect(gutterOf(rows[0]).style.overflow).toBe('visible');
+        action.destroy();
+    });
+    it('does not double-inject a strip on re-decorate', async () => {
+        const { host, rows } = buildGrid([{}]);
+        track(host);
+        const action = rowResize(host, { onResize: vi.fn() });
+        expect(rows[0].querySelectorAll(`.${STRIP_CLASS}`).length).toBe(1);
+        // Trigger the MutationObserver by appending an unrelated node.
+        gutterOf(rows[0]).appendChild(document.createElement('span'));
+        await Promise.resolve();
+        await new Promise((r) => setTimeout(r, 0));
+        expect(rows[0].querySelectorAll(`.${STRIP_CLASS}`).length).toBe(1);
+        action.destroy();
+    });
+    it('skips header rows, spacer rows, and rows without a gutter cell', () => {
+        const { host, rows } = buildGrid([
+            { rowClasses: ['sv-grid-header-row'] },
+            { rowClasses: ['sv-grid-row-spacer'] },
+            { gutter: false },
+            {}, // normal row gets a strip
+        ]);
+        track(host);
+        const action = rowResize(host, { onResize: vi.fn() });
+        expect(stripOf(rows[0])).toBeNull();
+        expect(stripOf(rows[1])).toBeNull();
+        expect(stripOf(rows[2])).toBeNull();
+        expect(stripOf(rows[3])).not.toBeNull();
+        action.destroy();
+    });
+    it('does not override an already-positioned gutter cell', () => {
+        const { host, rows } = buildGrid([{}]);
+        track(host);
+        gutterOf(rows[0]).style.position = 'sticky';
+        const action = rowResize(host, { onResize: vi.fn() });
+        expect(gutterOf(rows[0]).style.position).toBe('sticky');
+        action.destroy();
+    });
+    it('injects no strips when created disabled', () => {
+        const { host, rows } = buildGrid([{}, {}]);
+        track(host);
+        const action = rowResize(host, { onResize: vi.fn(), disabled: true });
+        expect(stripOf(rows[0])).toBeNull();
+        expect(stripOf(rows[1])).toBeNull();
+        action.destroy();
+    });
+});
+// ---------------------------------------------------------------------------
+// Drag lifecycle
+// ---------------------------------------------------------------------------
+describe('rowResize - drag', () => {
+    it('reports the new height on pointerup and fires move callbacks', () => {
+        const { host, rows } = buildGrid([{ rowIndex: 0 }]);
+        track(host);
+        mockRowHeight(rows[0], 32);
+        const onResize = vi.fn();
+        const onResizeMove = vi.fn();
+        const action = rowResize(host, { onResize, onResizeMove });
+        const strip = stripOf(rows[0]);
+        strip.dispatchEvent(pointer('pointerdown', { clientY: 100 }));
+        expect(strip.classList.contains('is-resizing')).toBe(true);
+        expect(document.body.style.cursor).toBe('row-resize');
+        // Drag down 20px -> 52.
+        window.dispatchEvent(pointer('pointermove', { clientY: 120 }));
+        expect(onResizeMove).toHaveBeenLastCalledWith(0, 52);
+        expect(rows[0].style.height).toBe('52px');
+        window.dispatchEvent(pointer('pointerup', { clientY: 120 }));
+        expect(onResize).toHaveBeenCalledWith(0, 52);
+        expect(strip.classList.contains('is-resizing')).toBe(false);
+        expect(document.body.style.cursor).toBe('');
+        action.destroy();
+    });
+    it('clamps the height to the min bound', () => {
+        const { host, rows } = buildGrid([{ rowIndex: 0 }]);
+        track(host);
+        mockRowHeight(rows[0], 32);
+        const onResize = vi.fn();
+        const action = rowResize(host, { onResize, min: 24 });
+        const strip = stripOf(rows[0]);
+        strip.dispatchEvent(pointer('pointerdown', { clientY: 100 }));
+        // Drag far up -> would be negative, clamps to 24.
+        window.dispatchEvent(pointer('pointerup', { clientY: 0 }));
+        expect(onResize).toHaveBeenCalledWith(0, 24);
+        action.destroy();
+    });
+    it('clamps the height to the max bound', () => {
+        const { host, rows } = buildGrid([{ rowIndex: 0 }]);
+        track(host);
+        mockRowHeight(rows[0], 32);
+        const onResize = vi.fn();
+        const action = rowResize(host, { onResize, max: 50 });
+        const strip = stripOf(rows[0]);
+        strip.dispatchEvent(pointer('pointerdown', { clientY: 100 }));
+        window.dispatchEvent(pointer('pointerup', { clientY: 1000 }));
+        expect(onResize).toHaveBeenCalledWith(0, 50);
+        action.destroy();
+    });
+    it('works without an onResizeMove callback (optional)', () => {
+        const { host, rows } = buildGrid([{ rowIndex: 0 }]);
+        track(host);
+        mockRowHeight(rows[0], 30);
+        const onResize = vi.fn();
+        const action = rowResize(host, { onResize });
+        const strip = stripOf(rows[0]);
+        strip.dispatchEvent(pointer('pointerdown', { clientY: 50 }));
+        expect(() => window.dispatchEvent(pointer('pointermove', { clientY: 60 }))).not.toThrow();
+        window.dispatchEvent(pointer('pointerup', { clientY: 60 }));
+        expect(onResize).toHaveBeenCalledWith(0, 40);
+        action.destroy();
+    });
+    it('ignores pointermove / pointerup when no drag is active', () => {
+        const { host, rows } = buildGrid([{ rowIndex: 0 }]);
+        track(host);
+        const onResize = vi.fn();
+        const onResizeMove = vi.fn();
+        const action = rowResize(host, { onResize, onResizeMove });
+        // No pointerdown first - listeners were only attached on down, so these
+        // shouldn't do anything even if dispatched.
+        window.dispatchEvent(pointer('pointermove', { clientY: 10 }));
+        window.dispatchEvent(pointer('pointerup', { clientY: 10 }));
+        expect(onResize).not.toHaveBeenCalled();
+        expect(onResizeMove).not.toHaveBeenCalled();
+        action.destroy();
+    });
+});
+// ---------------------------------------------------------------------------
+// pointerdown guards
+// ---------------------------------------------------------------------------
+describe('rowResize - pointerdown guards', () => {
+    it('ignores pointerdown when disabled', () => {
+        const { host, rows } = buildGrid([{ rowIndex: 0 }]);
+        track(host);
+        mockRowHeight(rows[0], 32);
+        const onResize = vi.fn();
+        // Start enabled so a strip exists, then disable via update.
+        const action = rowResize(host, { onResize });
+        const strip = stripOf(rows[0]);
+        action.update({ onResize, disabled: true });
+        // update removes strips, but dispatch on the (now-detached) strip anyway:
+        // even if it were still in the DOM, current.disabled short-circuits.
+        strip.dispatchEvent(pointer('pointerdown', { clientY: 10 }));
+        window.dispatchEvent(pointer('pointerup', { clientY: 50 }));
+        expect(onResize).not.toHaveBeenCalled();
+        action.destroy();
+    });
+    it('ignores pointerdown on a non-strip target', () => {
+        const { host, rows } = buildGrid([{ rowIndex: 0 }]);
+        track(host);
+        const onResize = vi.fn();
+        const action = rowResize(host, { onResize });
+        gutterOf(rows[0]).dispatchEvent(pointer('pointerdown', { clientY: 10 }));
+        expect(document.body.style.cursor).toBe('');
+        action.destroy();
+    });
+    it('ignores a strip whose row has a non-finite row index', () => {
+        const { host, rows } = buildGrid([{}]);
+        track(host);
+        // Remove the data-svgrid-row marker so rowIndexOf returns NaN.
+        rows[0].querySelector('[data-svgrid-row]').removeAttribute('data-svgrid-row');
+        const onResize = vi.fn();
+        const action = rowResize(host, { onResize });
+        const strip = stripOf(rows[0]);
+        strip.dispatchEvent(pointer('pointerdown', { clientY: 10 }));
+        expect(document.body.style.cursor).toBe('');
+        expect(strip.classList.contains('is-resizing')).toBe(false);
+        action.destroy();
+    });
+    it('ignores a strip not inside a tr.sv-grid-row', () => {
+        const host = track(document.createElement('div'));
+        document.body.appendChild(host);
+        // A loose strip with no matching ancestor row.
+        const strip = document.createElement('div');
+        strip.className = STRIP_CLASS;
+        host.appendChild(strip);
+        const onResize = vi.fn();
+        const action = rowResize(host, { onResize });
+        strip.dispatchEvent(pointer('pointerdown', { clientY: 10 }));
+        expect(document.body.style.cursor).toBe('');
+        action.destroy();
+    });
+});
+// ---------------------------------------------------------------------------
+// update() + destroy()
+// ---------------------------------------------------------------------------
+describe('rowResize - update + destroy', () => {
+    it('removes strips when toggled to disabled and restores when re-enabled', () => {
+        const { host, rows } = buildGrid([{}, {}]);
+        track(host);
+        const onResize = vi.fn();
+        const action = rowResize(host, { onResize, disabled: false });
+        expect(stripOf(rows[0])).not.toBeNull();
+        action.update({ onResize, disabled: true });
+        expect(stripOf(rows[0])).toBeNull();
+        expect(stripOf(rows[1])).toBeNull();
+        action.update({ onResize, disabled: false });
+        expect(stripOf(rows[0])).not.toBeNull();
+        action.destroy();
+    });
+    it('does not repaint when disabled flag is unchanged on update', () => {
+        const { host, rows } = buildGrid([{}]);
+        track(host);
+        const action = rowResize(host, { onResize: vi.fn() });
+        const firstStrip = stripOf(rows[0]);
+        // Same disabled value -> decorate is NOT called, strip stays the same node.
+        action.update({ onResize: vi.fn() });
+        expect(stripOf(rows[0])).toBe(firstStrip);
+        action.destroy();
+    });
+    it('destroy removes all strips and detaches listeners', () => {
+        const { host, rows } = buildGrid([{ rowIndex: 0 }]);
+        track(host);
+        mockRowHeight(rows[0], 32);
+        const onResize = vi.fn();
+        const action = rowResize(host, { onResize });
+        expect(stripOf(rows[0])).not.toBeNull();
+        action.destroy();
+        expect(stripOf(rows[0])).toBeNull();
+        // After destroy the pointerdown listener is gone; re-create a strip
+        // manually and confirm no drag starts.
+        const strip = document.createElement('div');
+        strip.className = STRIP_CLASS;
+        gutterOf(rows[0]).appendChild(strip);
+        strip.dispatchEvent(pointer('pointerdown', { clientY: 10 }));
+        expect(document.body.style.cursor).toBe('');
+    });
+    it('uses default min=20 / max=320 when bounds are omitted', () => {
+        const { host, rows } = buildGrid([{ rowIndex: 0 }]);
+        track(host);
+        mockRowHeight(rows[0], 100);
+        const onResize = vi.fn();
+        const action = rowResize(host, { onResize });
+        const strip = stripOf(rows[0]);
+        strip.dispatchEvent(pointer('pointerdown', { clientY: 0 }));
+        // Drag way past max -> clamps to 320.
+        window.dispatchEvent(pointer('pointermove', { clientY: 10000 }));
+        expect(rows[0].style.height).toBe('320px');
+        // Drag way below min -> clamps to 20.
+        window.dispatchEvent(pointer('pointerup', { clientY: -10000 }));
+        expect(onResize).toHaveBeenCalledWith(0, 20);
+        action.destroy();
+    });
+});

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;
+};

package/dist/scroll-sync.js

@@ -0,0 +1,89 @@
+import "./sv-grid-scrollbar";
+export function createScrollSync(ctx) {
+    function showTooltipFor(el, text) {
+        if (!text)
+            return;
+        if (ctx.tooltipTimer)
+            window.clearTimeout(ctx.tooltipTimer);
+        ctx.tooltipTimer = window.setTimeout(() => {
+            const rect = el.getBoundingClientRect();
+            const vw = window.innerWidth;
+            const vh = window.innerHeight;
+            const below = rect.bottom + 64 < vh;
+            // Clamp x so the 280px-wide tooltip doesn't fall off the viewport.
+            const x = Math.min(Math.max(rect.left + 6, 10), vw - 290);
+            const y = below ? rect.bottom + 6 : rect.top - 6;
+            ctx.tooltip = { text, x, y, below };
+        }, 250);
+    }
+    function hideTooltip() {
+        if (ctx.tooltipTimer) {
+            window.clearTimeout(ctx.tooltipTimer);
+            ctx.tooltipTimer = null;
+        }
+        ctx.tooltip = null;
+    }
+    function flushScheduledScrollSync() {
+        ctx.scrollSyncRaf = null;
+        ctx.scrollVersion += 1;
+        if (ctx.rowVirtualizationEnabled)
+            ctx.virtualizer.setScrollOffset(ctx.domToLogicalRowOffset(ctx.pendingScrollTop));
+        if (ctx.columnVirtualizationEnabled)
+            ctx.columnVirtualizer.setHorizontalOffset(ctx.pendingScrollLeft);
+    }
+    /**
+     * Sync the virtualizer to the user's scroll position once per frame.
+     *
+     * The browser's smooth-scroll animation fires a `scroll` event on
+     * every frame of the ~250 ms ramp after each wheel notch - so a
+     * single wheel notch produces ~16 calls to `onBodyScroll`. Without
+     * batching, each one ran a full virtualizer recalc + Svelte re-render
+     * synchronously, which (a) made the work pile up on heavy demos and
+     * (b) read on screen as "the grid keeps scrolling after the wheel
+     * stopped" because each scroll event ticked the rendered window one
+     * row at a time over a quarter-second.
+     *
+     * Batching to a single rAF flush per frame means each animation
+     * frame produces ONE virtualizer update at the latest known scroll
+     * position. Smooth-scroll still feels smooth (the browser is still
+     * animating `scrollTop`), but the grid's per-frame cost is bounded
+     * and the visible rows match the current `scrollTop` exactly when
+     * the wheel stops - no trailing updates.
+     */
+    function scheduleScrollSync(scrollTop, scrollLeft) {
+        ctx.pendingScrollTop = scrollTop;
+        ctx.pendingScrollLeft = scrollLeft;
+        if (ctx.scrollSyncRaf !== null)
+            return;
+        ctx.scrollSyncRaf = requestAnimationFrame(flushScheduledScrollSync);
+    }
+    function onBodyScroll(event) {
+        const container = event.currentTarget;
+        if (!container)
+            return;
+        if (ctx.columnMenuFor || ctx.operatorMenuFor)
+            ctx.closeMenus();
+        scheduleScrollSync(container.scrollTop, container.scrollLeft);
+        // Mirror horizontal scroll to any aligned grids in the same group.
+        if (ctx.props.alignedGridGroup != null)
+            ctx.broadcastAlignedScroll(container.scrollLeft);
+        if (ctx.props.onScrollBottomReached) {
+            const { scrollTop, scrollHeight, clientHeight } = container;
+            const atBottom = scrollTop + clientHeight >= scrollHeight - 32;
+            if (atBottom && ctx.scrollBottomArmed) {
+                ctx.scrollBottomArmed = false;
+                ctx.props.onScrollBottomReached({ scrollTop, scrollHeight, clientHeight });
+            }
+            else if (!atBottom && !ctx.scrollBottomArmed) {
+                ctx.scrollBottomArmed = true;
+            }
+        }
+    }
+    return {
+        showTooltipFor,
+        hideTooltip,
+        flushScheduledScrollSync,
+        scheduleScrollSync,
+        onBodyScroll,
+    };
+}

package/dist/scroll-sync.test.d.ts

@@ -0,0 +1 @@
+export {};