@svgrid/grid 1.1.0 → 1.1.1

package/dist/spreadsheet.test.js

@@ -0,0 +1,446 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { spreadsheetLayout, spansToMerges } from './spreadsheet';
+// jsdom does not implement the global `CSS` object, which `findCell` uses via
+// `CSS.escape`. Provide a minimal polyfill so the action's selector queries
+// run. (A real browser ships CSS.escape; this is purely an env gap.)
+if (typeof globalThis.CSS === 'undefined') {
+    // @ts-expect-error - minimal shim for the test environment
+    globalThis.CSS = { escape: (s) => s.replace(/["\\]/g, '\\$&') };
+}
+else if (typeof globalThis.CSS.escape !== 'function') {
+    // @ts-expect-error - augment partial CSS object
+    globalThis.CSS.escape = (s) => s.replace(/["\\]/g, '\\$&');
+}
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+/** Flush a queued requestAnimationFrame callback. The action batches its
+ *  work into one rAF, so tests must advance a frame to observe the effect. */
+function flushFrame() {
+    return new Promise((resolve) => {
+        // Two rAFs: the first lets any already-queued callback run, the second
+        // guarantees we resolve AFTER that callback has executed.
+        requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+    });
+}
+/** Build a `<table>` with a header-less body of `rows` x `cols`. Each TD is
+ *  tagged with `data-svgrid-row` (display index) + `data-col-id` exactly the
+ *  way SvGrid emits them, which is what the layout helper queries on. */
+function buildGrid(rows, columnOrder) {
+    const host = document.createElement('div');
+    const table = document.createElement('table');
+    const tbody = document.createElement('tbody');
+    for (let r = 0; r < rows; r += 1) {
+        const tr = document.createElement('tr');
+        for (const colId of columnOrder) {
+            const td = document.createElement('td');
+            td.setAttribute('data-svgrid-row', String(r));
+            td.setAttribute('data-col-id', colId);
+            td.textContent = `${colId}-${r}`;
+            tr.appendChild(td);
+        }
+        tbody.appendChild(tr);
+    }
+    table.appendChild(tbody);
+    host.appendChild(table);
+    document.body.appendChild(host);
+    const cellAt = (r, colId) => {
+        const el = host.querySelector(`td[data-svgrid-row="${r}"][data-col-id="${colId}"]`);
+        if (!el)
+            throw new Error(`no cell at row=${r} col=${colId}`);
+        return el;
+    };
+    return { host, cellAt };
+}
+let hosts = [];
+function track(host) {
+    hosts.push(host);
+    return host;
+}
+beforeEach(() => {
+    hosts = [];
+});
+afterEach(() => {
+    for (const h of hosts)
+        h.remove();
+    document.body.innerHTML = '';
+});
+// ---------------------------------------------------------------------------
+// Merges
+// ---------------------------------------------------------------------------
+describe('spreadsheetLayout - merges', () => {
+    it('applies colspan + hides covered cells horizontally', async () => {
+        const cols = ['a', 'b', 'c'];
+        const { host, cellAt } = buildGrid(2, cols);
+        track(host);
+        const action = spreadsheetLayout(host, {
+            columnOrder: cols,
+            merges: [{ rowIndex: 0, columnId: 'a', colspan: 2 }],
+        });
+        await flushFrame();
+        const origin = cellAt(0, 'a');
+        expect(origin.getAttribute('colspan')).toBe('2');
+        expect(origin.hasAttribute('rowspan')).toBe(false);
+        expect(origin.getAttribute('data-svgrid-sheet')).toBe('');
+        // Covered neighbour to the right is hidden + marked.
+        expect(cellAt(0, 'b').style.display).toBe('none');
+        expect(cellAt(0, 'b').getAttribute('data-svgrid-sheet')).toBe('');
+        // Untouched cells stay visible.
+        expect(cellAt(0, 'c').style.display).toBe('');
+        expect(cellAt(1, 'a').style.display).toBe('');
+        action.destroy();
+    });
+    it('applies rowspan + hides covered cells vertically', async () => {
+        const cols = ['a', 'b'];
+        const { host, cellAt } = buildGrid(3, cols);
+        track(host);
+        const action = spreadsheetLayout(host, {
+            columnOrder: cols,
+            merges: [{ rowIndex: 0, columnId: 'a', rowspan: 2 }],
+        });
+        await flushFrame();
+        const origin = cellAt(0, 'a');
+        expect(origin.getAttribute('rowspan')).toBe('2');
+        expect(origin.hasAttribute('colspan')).toBe(false);
+        expect(cellAt(1, 'a').style.display).toBe('none');
+        expect(cellAt(2, 'a').style.display).toBe(''); // outside the span
+        action.destroy();
+    });
+    it('handles a rectangular colspan + rowspan block', async () => {
+        const cols = ['a', 'b', 'c'];
+        const { host, cellAt } = buildGrid(3, cols);
+        track(host);
+        const action = spreadsheetLayout(host, {
+            columnOrder: cols,
+            merges: [{ rowIndex: 0, columnId: 'a', colspan: 2, rowspan: 2 }],
+        });
+        await flushFrame();
+        expect(cellAt(0, 'a').getAttribute('colspan')).toBe('2');
+        expect(cellAt(0, 'a').getAttribute('rowspan')).toBe('2');
+        // All covered cells except the origin are hidden.
+        expect(cellAt(0, 'b').style.display).toBe('none');
+        expect(cellAt(1, 'a').style.display).toBe('none');
+        expect(cellAt(1, 'b').style.display).toBe('none');
+        // c column + row 2 untouched.
+        expect(cellAt(0, 'c').style.display).toBe('');
+        expect(cellAt(2, 'a').style.display).toBe('');
+        action.destroy();
+    });
+    it('clamps zero/negative span to a minimum of 1 (no colspan/rowspan attr)', async () => {
+        const cols = ['a', 'b'];
+        const { host, cellAt } = buildGrid(2, cols);
+        track(host);
+        const action = spreadsheetLayout(host, {
+            columnOrder: cols,
+            merges: [{ rowIndex: 0, columnId: 'a', colspan: 0, rowspan: -5 }],
+        });
+        await flushFrame();
+        const origin = cellAt(0, 'a');
+        // Clamped to 1, so no span attributes are written, but it is still marked.
+        expect(origin.hasAttribute('colspan')).toBe(false);
+        expect(origin.hasAttribute('rowspan')).toBe(false);
+        expect(origin.getAttribute('data-svgrid-sheet')).toBe('');
+        expect(cellAt(0, 'b').style.display).toBe(''); // nothing covered
+        action.destroy();
+    });
+    it('skips a merge whose columnId is not in columnOrder', async () => {
+        const cols = ['a', 'b'];
+        const { host, cellAt } = buildGrid(1, cols);
+        track(host);
+        const action = spreadsheetLayout(host, {
+            columnOrder: cols,
+            merges: [{ rowIndex: 0, columnId: 'ghost', colspan: 2 }],
+        });
+        await flushFrame();
+        expect(cellAt(0, 'a').hasAttribute('data-svgrid-sheet')).toBe(false);
+        expect(cellAt(0, 'b').style.display).toBe('');
+        action.destroy();
+    });
+    it('skips a merge whose origin cell is not rendered', async () => {
+        const cols = ['a', 'b'];
+        const { host, cellAt } = buildGrid(1, cols);
+        track(host);
+        const action = spreadsheetLayout(host, {
+            columnOrder: cols,
+            merges: [{ rowIndex: 99, columnId: 'a', colspan: 2 }],
+        });
+        await flushFrame();
+        // Nothing marked anywhere.
+        expect(host.querySelectorAll('[data-svgrid-sheet]').length).toBe(0);
+        expect(cellAt(0, 'a').style.display).toBe('');
+        action.destroy();
+    });
+    it('ignores covered cells that fall outside the columnOrder or render window', async () => {
+        const cols = ['a', 'b'];
+        // Only 1 row rendered, but ask for a colspan that runs off the column
+        // list AND a rowspan that runs off the rendered rows.
+        const { host, cellAt } = buildGrid(1, cols);
+        track(host);
+        const action = spreadsheetLayout(host, {
+            columnOrder: cols,
+            merges: [{ rowIndex: 0, columnId: 'b', colspan: 3, rowspan: 3 }],
+        });
+        await flushFrame();
+        const origin = cellAt(0, 'b');
+        expect(origin.getAttribute('colspan')).toBe('3');
+        expect(origin.getAttribute('rowspan')).toBe('3');
+        // No sibling to the right of b, and rows 1/2 don't exist - so the only
+        // marked cell is the origin itself.
+        expect(host.querySelectorAll('[data-svgrid-sheet]').length).toBe(1);
+        action.destroy();
+    });
+});
+// ---------------------------------------------------------------------------
+// Selection-edge inheritance
+// ---------------------------------------------------------------------------
+describe('spreadsheetLayout - selection edge inheritance', () => {
+    it('mirrors range-right / range-bottom / selected-range flags onto the origin', async () => {
+        const cols = ['a', 'b'];
+        const { host, cellAt } = buildGrid(2, cols);
+        track(host);
+        // Mark the far covered cell with range edge flags BEFORE applying.
+        cellAt(1, 'b').setAttribute('data-range-right', 'true');
+        cellAt(1, 'b').setAttribute('data-range-bottom', 'true');
+        cellAt(0, 'b').setAttribute('data-selected-range', 'true');
+        const action = spreadsheetLayout(host, {
+            columnOrder: cols,
+            merges: [{ rowIndex: 0, columnId: 'a', colspan: 2, rowspan: 2 }],
+        });
+        await flushFrame();
+        const origin = cellAt(0, 'a');
+        expect(origin.classList.contains('sv-merge-edge-right')).toBe(true);
+        expect(origin.classList.contains('sv-merge-edge-bottom')).toBe(true);
+        expect(origin.classList.contains('sv-merge-in-range')).toBe(true);
+        action.destroy();
+    });
+    it('leaves edge classes off when no range flags are present', async () => {
+        const cols = ['a', 'b'];
+        const { host, cellAt } = buildGrid(2, cols);
+        track(host);
+        const action = spreadsheetLayout(host, {
+            columnOrder: cols,
+            merges: [{ rowIndex: 0, columnId: 'a', colspan: 2, rowspan: 2 }],
+        });
+        await flushFrame();
+        const origin = cellAt(0, 'a');
+        expect(origin.classList.contains('sv-merge-edge-right')).toBe(false);
+        expect(origin.classList.contains('sv-merge-edge-bottom')).toBe(false);
+        expect(origin.classList.contains('sv-merge-in-range')).toBe(false);
+        action.destroy();
+    });
+    it('treats the origin own selected-range flag as in-range', async () => {
+        const cols = ['a'];
+        const { host, cellAt } = buildGrid(1, cols);
+        track(host);
+        cellAt(0, 'a').setAttribute('data-selected-range', 'true');
+        const action = spreadsheetLayout(host, {
+            columnOrder: cols,
+            merges: [{ rowIndex: 0, columnId: 'a' }],
+        });
+        await flushFrame();
+        expect(cellAt(0, 'a').classList.contains('sv-merge-in-range')).toBe(true);
+        action.destroy();
+    });
+});
+// ---------------------------------------------------------------------------
+// Borders
+// ---------------------------------------------------------------------------
+describe('spreadsheetLayout - borders', () => {
+    it('injects an overlay with the requested edge styles', async () => {
+        const cols = ['a'];
+        const { host, cellAt } = buildGrid(1, cols);
+        track(host);
+        const action = spreadsheetLayout(host, {
+            columnOrder: cols,
+            borders: [
+                {
+                    rowIndex: 0,
+                    columnId: 'a',
+                    top: { width: 3, style: 'dashed', color: 'red' },
+                    bottom: {}, // defaults: 2px solid currentColor
+                },
+            ],
+        });
+        await flushFrame();
+        const td = cellAt(0, 'a');
+        const overlay = td.querySelector('.sv-cell-border-overlay');
+        expect(overlay).not.toBeNull();
+        expect(overlay.style.borderTop).toBe('3px dashed red');
+        // jsdom's CSSOM drops the `currentColor` keyword from the border
+        // shorthand, but the width + style survive, confirming the default
+        // (2px solid) edge was emitted.
+        expect(overlay.style.borderBottom).toContain('2px solid');
+        // No left/right set.
+        expect(overlay.style.borderLeft).toBe('');
+        expect(td.getAttribute('data-svgrid-sheet')).toBe('');
+        // The TD becomes a positioning context.
+        expect(td.style.position).toBe('relative');
+        action.destroy();
+    });
+    it('skips a border spec with no edges set (no overlay injected)', async () => {
+        const cols = ['a'];
+        const { host, cellAt } = buildGrid(1, cols);
+        track(host);
+        const action = spreadsheetLayout(host, {
+            columnOrder: cols,
+            borders: [{ rowIndex: 0, columnId: 'a' }],
+        });
+        await flushFrame();
+        expect(cellAt(0, 'a').querySelector('.sv-cell-border-overlay')).toBeNull();
+        expect(cellAt(0, 'a').hasAttribute('data-svgrid-sheet')).toBe(false);
+        action.destroy();
+    });
+    it('skips a border spec whose target cell is absent', async () => {
+        const cols = ['a'];
+        const { host } = buildGrid(1, cols);
+        track(host);
+        const action = spreadsheetLayout(host, {
+            columnOrder: cols,
+            borders: [{ rowIndex: 5, columnId: 'a', top: { width: 1 } }],
+        });
+        await flushFrame();
+        expect(host.querySelectorAll('.sv-cell-border-overlay').length).toBe(0);
+        action.destroy();
+    });
+    it('does not override an already-positioned TD', async () => {
+        const cols = ['a'];
+        const { host, cellAt } = buildGrid(1, cols);
+        track(host);
+        cellAt(0, 'a').style.position = 'absolute';
+        const action = spreadsheetLayout(host, {
+            columnOrder: cols,
+            borders: [{ rowIndex: 0, columnId: 'a', left: { color: 'blue' } }],
+        });
+        await flushFrame();
+        expect(cellAt(0, 'a').style.position).toBe('absolute');
+        action.destroy();
+    });
+});
+// ---------------------------------------------------------------------------
+// Cleanup + update + destroy
+// ---------------------------------------------------------------------------
+describe('spreadsheetLayout - update + cleanup', () => {
+    it('clears prior decorations on the next apply (update path)', async () => {
+        const cols = ['a', 'b'];
+        const { host, cellAt } = buildGrid(2, cols);
+        track(host);
+        const action = spreadsheetLayout(host, {
+            columnOrder: cols,
+            merges: [{ rowIndex: 0, columnId: 'a', colspan: 2 }],
+            borders: [{ rowIndex: 1, columnId: 'a', top: { width: 1 } }],
+        });
+        await flushFrame();
+        expect(cellAt(0, 'a').getAttribute('colspan')).toBe('2');
+        expect(cellAt(1, 'a').querySelector('.sv-cell-border-overlay')).not.toBeNull();
+        // Update to an empty spec - everything from the previous run is removed.
+        action.update({ columnOrder: cols, merges: [], borders: [] });
+        await flushFrame();
+        expect(cellAt(0, 'a').hasAttribute('colspan')).toBe(false);
+        expect(cellAt(0, 'b').style.display).toBe('');
+        expect(cellAt(0, 'a').hasAttribute('data-svgrid-sheet')).toBe(false);
+        expect(cellAt(1, 'a').querySelector('.sv-cell-border-overlay')).toBeNull();
+        action.destroy();
+    });
+    it('re-applies decorations when the grid body mutates (MutationObserver)', async () => {
+        const cols = ['a', 'b'];
+        const { host, cellAt } = buildGrid(1, cols);
+        track(host);
+        const action = spreadsheetLayout(host, {
+            columnOrder: cols,
+            merges: [{ rowIndex: 1, columnId: 'a', colspan: 2 }],
+        });
+        await flushFrame();
+        // Row 1 does not exist yet - nothing applied.
+        expect(host.querySelectorAll('[data-svgrid-sheet]').length).toBe(0);
+        // Simulate the grid rendering a new row -> observer schedules apply.
+        const tbody = host.querySelector('tbody');
+        const tr = document.createElement('tr');
+        for (const colId of cols) {
+            const td = document.createElement('td');
+            td.setAttribute('data-svgrid-row', '1');
+            td.setAttribute('data-col-id', colId);
+            tr.appendChild(td);
+        }
+        tbody.appendChild(tr);
+        await flushFrame();
+        await flushFrame();
+        expect(cellAt(1, 'a').getAttribute('colspan')).toBe('2');
+        action.destroy();
+    });
+    it('destroy disconnects the observer and cancels a pending frame', async () => {
+        const cols = ['a', 'b'];
+        const { host, cellAt } = buildGrid(1, cols);
+        track(host);
+        // Destroy immediately - the first scheduled frame is pending.
+        const action = spreadsheetLayout(host, {
+            columnOrder: cols,
+            merges: [{ rowIndex: 0, columnId: 'a', colspan: 2 }],
+        });
+        action.destroy();
+        await flushFrame();
+        await flushFrame();
+        // Frame was cancelled before apply ran.
+        expect(cellAt(0, 'a').hasAttribute('colspan')).toBe(false);
+        // After destroy, mutations no longer trigger apply.
+        const tbody = host.querySelector('tbody');
+        tbody.appendChild(document.createElement('tr'));
+        await flushFrame();
+        await flushFrame();
+        expect(cellAt(0, 'a').hasAttribute('colspan')).toBe(false);
+    });
+    it('treats null merges / borders as empty (no throw)', async () => {
+        const cols = ['a'];
+        const { host } = buildGrid(1, cols);
+        track(host);
+        const opts = {
+            columnOrder: cols,
+            merges: null,
+            borders: null,
+        };
+        const action = spreadsheetLayout(host, opts);
+        await flushFrame();
+        expect(host.querySelectorAll('[data-svgrid-sheet]').length).toBe(0);
+        action.destroy();
+    });
+});
+describe('spansToMerges - declarative colSpan/rowSpan -> MergeSpec[]', () => {
+    const rows = [
+        { region: 'AMER', q: 'Q1', amt: 1 },
+        { region: 'AMER', q: 'Q2', amt: 2 },
+        { region: 'AMER', q: 'Q3', amt: 3 },
+        { region: 'EMEA', q: 'Q1', amt: 4 },
+        { region: 'EMEA', q: 'Q2', amt: 5 },
+    ];
+    // Merge each run of equal `region` values downward.
+    function regionRowSpan() {
+        return ({ data, rowIndex }) => {
+            if (rowIndex > 0 && rows[rowIndex - 1].region === data.region)
+                return 1; // covered
+            let n = 1;
+            while (rows[rowIndex + n]?.region === data.region)
+                n += 1;
+            return n;
+        };
+    }
+    it('emits a rowspan merge at each run origin and skips covered rows', () => {
+        const columns = [{ id: 'region', field: 'region', rowSpan: regionRowSpan() }];
+        const merges = spansToMerges(rows, columns);
+        // AMER spans rows 0..2 (rowspan 3), EMEA spans rows 3..4 (rowspan 2).
+        expect(merges).toEqual([
+            { rowIndex: 0, columnId: 'region', colspan: undefined, rowspan: 3 },
+            { rowIndex: 3, columnId: 'region', colspan: undefined, rowspan: 2 },
+        ]);
+    });
+    it('supports colSpan and marks covered columns', () => {
+        const columns = [
+            { id: 'a', field: 'region', colSpan: ({ rowIndex }) => (rowIndex === 0 ? 2 : 1) },
+            { id: 'b', field: 'q' },
+            { id: 'c', field: 'amt' },
+        ];
+        const merges = spansToMerges(rows.slice(0, 1), columns);
+        expect(merges).toEqual([{ rowIndex: 0, columnId: 'a', colspan: 2, rowspan: undefined }]);
+    });
+    it('returns no merges when no column defines spans', () => {
+        expect(spansToMerges(rows, [{ id: 'region', field: 'region' }])).toEqual([]);
+    });
+});

package/dist/sv-grid-scrollbar.js

@@ -30,7 +30,11 @@ const STYLE_TEMPLATE = `
     display: flex;
     user-select: none;
     background: var(--sg-scrollbar-bg, #eef2f8);
-    box-shadow: inset 0 0 0 1px var(--sg-scrollbar-border, rgba(15, 23, 42, 0.04));
+    /* The 1px separator is drawn on the INNER edge only (the edge facing
+       the grid body) via the orientation rules below. A full inset box
+       here doubled up with the grid's own frame border on the outer edge,
+       reading as a 2px border - most visible in dense-gridline themes
+       like Excel, which should show a single 1px line. */
     /* Start hidden + non-interactive - viewport/content sizes are 0 until
        after the first layout pass, so without this default the scrollbar
        paints visible for one frame and then JS hides it on mount. That
@@ -44,10 +48,18 @@ const STYLE_TEMPLATE = `
   :host([orientation="vertical"]) {
     flex-direction: column;
     width: ${ARROW_SIZE}px;
+    /* LTR: vertical scrollbar sits at the right, inner edge is the left. */
+    box-shadow: inset 1px 0 0 0 var(--sg-scrollbar-border, rgba(15, 23, 42, 0.04));
+  }
+  :host([orientation="vertical"]:dir(rtl)) {
+    /* RTL flips the scrollbar to the left, so the inner edge is the right. */
+    box-shadow: inset -1px 0 0 0 var(--sg-scrollbar-border, rgba(15, 23, 42, 0.04));
   }
   :host([orientation="horizontal"]) {
     flex-direction: row;
     height: ${ARROW_SIZE}px;
+    /* Horizontal scrollbar sits at the bottom, inner edge is the top. */
+    box-shadow: inset 0 1px 0 0 var(--sg-scrollbar-border, rgba(15, 23, 42, 0.04));
   }
   .arrow {
     flex: none;

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

@@ -58,6 +58,16 @@ export type SvGridApi<TFeatures extends TableFeatures, TData extends RowData> =
     getCellValue(rowIndex: number, columnId: string): unknown;
     /** Write a cell value through the column's field. */
     setCellValue(rowIndex: number, columnId: string, value: unknown): void;
+    /**
+     * Programmatically begin editing a cell (as a double-click would). Returns
+     * `true` if editing started (cell exists, editable, editing enabled).
+     */
+    startEditing(rowIndex: number, columnId: string): boolean;
+    /**
+     * Commit (default) or, with `cancel: true`, discard the active edit.
+     * Returns `true` if there was an edit in progress.
+     */
+    stopEditing(cancel?: boolean): boolean;
     /**
      * Programmatically select one or more rectangular cell ranges. Each
      * range is `[rowStart, colStart, rowEnd, colEnd]` in 0-indexed grid
@@ -105,6 +115,15 @@ export type SvGridApi<TFeatures extends TableFeatures, TData extends RowData> =
         value?: string;
         /** Upper bound for the `between` operator. Required when `operator === 'between'`. */
         valueTo?: string;
+        /**
+         * Optional SECOND condition on the same column, joined by `join`
+         * (multi-condition filtering, e.g. "> 100 AND < 500").
+         */
+        operator2?: SvGridFilterOperator;
+        value2?: string;
+        valueTo2?: string;
+        /** How to combine the two conditions. Defaults to `'AND'`. */
+        join?: 'AND' | 'OR';
     } | null): void;
     /**
      * Set the facet (set-list, Excel-style multi-select) filter for a column.

package/dist/svgrid.behavior.test.js

@@ -389,6 +389,26 @@ describe('SvGrid - column add / remove / visibility', () => {
             destroy();
         }
     });
+    it('columns marked `visible: false` start hidden but stay listed', async () => {
+        const columns = personColumns.map((c) => (c.field === 'team' ? { ...c, visible: false } : c));
+        const { api, destroy } = await mountGrid({ columns });
+        try {
+            // Starts hidden...
+            expect(api.isColumnVisible('team')).toBe(false);
+            // ...but is still listed in getColumns() (so a Choose Columns UI
+            // can offer it), just with visible=false.
+            const team = api.getColumns().find((c) => c.id === 'team');
+            expect(team).toBeDefined();
+            expect(team?.visible).toBe(false);
+            // A later user toggle wins over the initial flag.
+            api.setColumnVisible('team', true);
+            await tick();
+            expect(api.isColumnVisible('team')).toBe(true);
+        }
+        finally {
+            destroy();
+        }
+    });
 });
 describe('SvGrid - row add / remove', () => {
     it('addRow at top / bottom / specific index', async () => {

package/dist/svgrid.interaction.test.js

@@ -272,6 +272,37 @@ describe('SvGrid interactions - cell pointer events', () => {
             destroy();
         }
     });
+    // issue #23: a mouse drag extends the cell range, but a touch drag must NOT -
+    // it should leave the single tapped cell selected so the finger-drag scrolls.
+    async function dragSelectCount(pointerType) {
+        const { target, destroy } = await mountInteractive();
+        try {
+            const a = target.querySelector('[data-svgrid-row="0"][data-svgrid-col="0"]');
+            const c = target.querySelector('[data-svgrid-row="0"][data-svgrid-col="2"]');
+            if (!a || !c)
+                return -1; // jsdom didn't lay the cells out; caller skips
+            a.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, pointerId: 1, button: 0, pointerType }));
+            await tick();
+            c.dispatchEvent(new PointerEvent('pointerenter', { bubbles: true, pointerId: 1, pointerType }));
+            await tick();
+            return target.querySelectorAll('[data-selected-range="true"]').length;
+        }
+        finally {
+            destroy();
+        }
+    }
+    it('mouse drag extends the selection across cells', async () => {
+        const n = await dragSelectCount('mouse');
+        if (n < 0)
+            return;
+        expect(n).toBeGreaterThan(1); // (0,0) -> (0,2) selects the row's 3 cells
+    });
+    it('touch drag does not start a range selection (issue #23)', async () => {
+        const n = await dragSelectCount('touch');
+        if (n < 0)
+            return;
+        expect(n).toBeLessThanOrEqual(1); // only the tapped cell; finger-drag scrolls
+    });
 });
 describe('SvGrid interactions - copy', () => {
     it('Ctrl+C with a cell range does not throw', async () => {

package/dist/svgrid.new-features.wrapper.test.js

@@ -64,7 +64,7 @@ describe('SvGrid wrapper - cellClass + rowClass', () => {
     it('computes the row-level class once per render row and threads it onto the <tr>', () => {
         expect(source).toMatch(/function computeRowClass/);
         expect(source).toMatch(/userRowClass = computeRowClass\(row, rowIndex\)/);
-        expect(source).toMatch(/class=\{`sv-grid-row \$\{userRowClass\}`\}/);
+        expect(source).toMatch(/class=\{`sv-grid-row \$\{userRowClass\}/);
     });
     it('computes the cell-level class per column and threads it onto the <td>', () => {
         expect(source).toMatch(/function computeCellClass/);
@@ -120,7 +120,7 @@ describe('SvGrid wrapper - between filter operator', () => {
         expect(source).toMatch(/if \(f\.operator === "between"\) \{[^}]*f\.value\.trim\(\)\.length > 0[^}]*f\.valueTo[^}]*\.trim\(\)\.length > 0/);
     });
     it('forwards valueTo through applyExcelFilter', () => {
-        expect(source).toMatch(/valueTo: filter\.operator === "between" \? filter\.valueTo : undefined/);
+        expect(source).toMatch(/valueTo:\s*(filter\.operator|op) === "between" \? (filter\.valueTo|valueTo) : undefined/);
     });
     it('publishes valueTo in the onFiltersChange payload only for between clauses', () => {
         expect(source).toMatch(/f\.operator === "between" && f\.valueTo\s*\?\s*\{ valueTo: f\.valueTo \}/);
@@ -159,4 +159,36 @@ describe('SvGrid wrapper - multi-cell paste + cut + delete', () => {
         expect(source).toMatch(/event\.key === "Delete" \|\| event\.key === "Backspace"/);
         expect(source).toMatch(/if \((?:ctx\.)?clearSelectedCells\(\)\)\s*\{/);
     });
+    // Regression: the controller's ctx is an object literal of getters, and the
+    // copy/cut/paste handlers in keyboard-handlers + menus reach the functions
+    // via `ctx.<name>()`. A refactor once shipped the `ctx.cutSelectionToClipboard`
+    // / `ctx.pasteFromClipboard` CALLS but dropped their getters, so those threw
+    // "is not a function" at runtime - copy worked, cut + paste were dead. Assert
+    // every clipboard function called through ctx has a matching getter.
+    it('exposes a ctx getter for every clipboard command it calls through ctx', () => {
+        for (const fn of [
+            'copySelectionToClipboard',
+            'cutSelectionToClipboard',
+            'pasteFromClipboard',
+            'onGridPaste',
+            'clearSelectedCells',
+        ]) {
+            expect(source).toMatch(new RegExp(`get ${fn}\\(\\)\\s*\\{\\s*return ${fn};?\\s*\\}`));
+        }
+    });
+    it('copy/cut fall back to execCommand when navigator.clipboard is absent (insecure context)', () => {
+        expect(source).toMatch(/function writeClipboardText\(/);
+        expect(source).toMatch(/document\.execCommand\("copy"\)/);
+    });
+    it('paste falls back to a native paste event when the async API is unavailable', () => {
+        // keydown only preventDefaults (and uses the async API) in a secure context;
+        // otherwise it lets the browser deliver a native paste event to onGridPaste.
+        // Accept either the positive branch or the inverted early-return guard
+        // (`if (!navigator.clipboard?.readText) return`) - both gate on the async API.
+        expect(source).toMatch(/if \(!?navigator\.clipboard\?\.readText\)/);
+        expect(source).toMatch(/function onGridPaste\(event: ClipboardEvent\)/);
+        expect(source).toMatch(/clipboardData\?\.getData\("text\/plain"\)/);
+        // The grid root wires the handler.
+        expect(source).toMatch(/onpaste=\{onGridPaste\}/);
+    });
 });

package/dist/test-setup.js

@@ -1,8 +1,14 @@
 // Vitest setup. jsdom doesn't ship ResizeObserver, IntersectionObserver,
 // or the layout APIs SvGrid touches inside its mount effects. Provide
 // minimal no-op stubs so component mounting completes without crashing.
+//
+// These assign to globals/prototypes the jsdom env doesn't fully type, so
+// the targets are cast to `any`. We deliberately avoid expect-error
+// suppression directives: when a stub happens to line up with the lib types,
+// such a directive becomes "unused" and svelte-check fails the build (an
+// unused expect-error directive is itself an error).
 if (typeof globalThis.ResizeObserver === 'undefined') {
-    // @ts-expect-error - assigning to a globalThis property the env doesn't ship
+    ;
     globalThis.ResizeObserver = class {
         observe() { }
         unobserve() { }
@@ -10,7 +16,7 @@ if (typeof globalThis.ResizeObserver === 'undefined') {
     };
 }
 if (typeof globalThis.IntersectionObserver === 'undefined') {
-    // @ts-expect-error - same
+    ;
     globalThis.IntersectionObserver = class {
         observe() { }
         unobserve() { }
@@ -23,7 +29,7 @@ if (typeof globalThis.IntersectionObserver === 'undefined') {
 // jsdom's HTMLElement.scrollIntoView is a no-op; some grid code calls it
 // during the first effect. Make sure the method exists on every element.
 if (typeof Element !== 'undefined' && !Element.prototype.scrollIntoView) {
-    // @ts-expect-error - patching a missing DOM method
+    ;
     Element.prototype.scrollIntoView = function () { };
 }
 export {};