@svgrid/grid 3.0.4 → 3.0.6

package/dist/server-data-source.js

@@ -1,3 +1,11 @@
+import { createBlockCache, rowPlaceholderState, } from './server-block-cache.js';
+import { toServerFilterColumns } from './row-model.js';
+/**
+ * The free server row model over a `ServerDataSource`: one page at a time,
+ * or one block-cached list in `infinite` mode, with sort, filter, race
+ * safety and writes. The result is a `GridRowModel`, so
+ * `<SvGrid rowModel={ctl} />` wires every seam.
+ */
 export function createServerDataSource(source, options) {
     const state = {
         rows: [],
@@ -12,21 +20,113 @@ export function createServerDataSource(source, options) {
         filterModel: {},
         expressionUnapplied: false,
     };
+    const infinite = options.mode === 'infinite';
+    // `onChange` is the one-callback API this controller shipped with;
+    // `subscribe` is the many-listener one `GridRowModel` needs. Both fire
+    // from `emit`, so a grid driven by `rowModel` and an app reading
+    // `onChange` stay in step.
+    const subscribers = new Set();
+    let cache = null;
     // Monotonic request id: only the latest fetch is allowed to land, so a slow
     // response for an old sort/filter can't clobber a newer one.
     let requestSeq = 0;
+    /** The page fetch in flight; a newer one, or dispose, aborts it. */
+    let pageAbort = null;
     let disposed = false;
     // Once per controller: a misconfigured backend would otherwise log on every
     // page, scroll and filter change.
     let warnedExpressionUnapplied = false;
     const emit = () => {
         state.pageCount = Math.max(1, Math.ceil(state.total / state.pageSize));
-        options.onChange({ ...state });
+        options.onChange?.({ ...state });
+        for (const notify of subscribers)
+            notify();
     };
+    /**
+     * Pull the block cache's view of the world into `state` and emit.
+     *
+     * `total` stays a plain number because the pager and the footer have
+     * always read it as one; while the end is undiscovered it holds the
+     * current optimistic length, which is exactly what the scrollbar needs.
+     * `rowCount` is the honest answer, null and all.
+     */
+    function emitFromCache() {
+        if (!cache || disposed)
+            return;
+        const rows = cache.rows();
+        state.rows = rows;
+        state.rowCount = cache.rowCount();
+        state.lastRowKnown = cache.lastRowKnown();
+        state.total = cache.rowCount() ?? rows.length;
+        emit();
+    }
+    function buildCache() {
+        return createBlockCache({
+            blockSize: options.blockSize ?? 100,
+            maxBlocksInCache: options.maxBlocksInCache,
+            maxConcurrentRequests: options.maxConcurrentRequests,
+            blockLoadDebounceMs: options.blockLoadDebounceMs,
+            initialRowCount: options.initialRowCount,
+            fetch: async (startRow, endRow, signal) => {
+                const result = await source.getRows({
+                    startRow,
+                    endRow,
+                    // A block is a page of its own size, so a backend that only knows
+                    // how to page still works unchanged.
+                    pageIndex: Math.floor(startRow / Math.max(1, endRow - startRow)),
+                    pageSize: endRow - startRow,
+                    sortModel: state.sortModel,
+                    filterModel: state.filterModel,
+                    groupBy: [],
+                    groupKeys: [],
+                    aggregations: [],
+                    signal,
+                });
+                noteExpressionApplied(result);
+                return { rows: result.rows, rowCount: result.rowCount };
+            },
+            onChange: (s) => {
+                state.loading = s.loading;
+                state.failedBlocks = s.failedBlocks;
+                emitFromCache();
+            },
+        });
+    }
+    /** Reload from scratch: new sort, new filter, or an explicit purge. */
+    function resetCache() {
+        if (disposed)
+            return;
+        cache?.dispose();
+        cache = buildCache();
+        cache.setViewport(viewStart, viewEnd);
+        emitFromCache();
+    }
+    /**
+     * An expression was sent but the backend did not acknowledge applying it,
+     * so these rows are a SUPERSET of what was asked for. Say so instead of
+     * filtering here: filtering one page would turn "3 of 1,000,000 match"
+     * into a confident lie and make paging incoherent, since the next page
+     * would re-filter a different slice.
+     */
+    function noteExpressionApplied(result) {
+        state.expressionUnapplied =
+            state.filterModel.expression != null && result.appliedExpression !== true;
+        if (!state.expressionUnapplied || warnedExpressionUnapplied)
+            return;
+        warnedExpressionUnapplied = true;
+        console.warn('[svgrid] The data source was sent filterModel.expression but did not ' +
+            'return `appliedExpression: true`, so the advanced filter is NOT applied ' +
+            'and the rows shown are unfiltered. Apply the whole expression and ' +
+            'acknowledge it, or clear the advanced filter. ' +
+            'See https://svgrid.com/docs/help/server/server-filtering');
+    }
     async function fetchPage() {
         if (disposed)
             return;
         const id = ++requestSeq;
+        pageAbort?.abort();
+        const controller = new AbortController();
+        pageAbort = controller;
         state.loading = true;
         state.error = null;
         emit();
@@ -39,30 +139,20 @@ export function createServerDataSource(source, options) {
                 pageSize: state.pageSize,
                 sortModel: state.sortModel,
                 filterModel: state.filterModel,
-                // Flat mode: no grouping. Group mode lives in createServerGroupModel.
+                // Flat mode: no grouping. Server-side grouping and tree data live in
+                // `createServerGroupModel` from @svgrid/enterprise, which fills these in.
                 groupBy: [],
                 groupKeys: [],
                 aggregations: [],
+                signal: controller.signal,
             });
             if (disposed || id !== requestSeq)
                 return; // stale
             state.rows = result.rows;
             state.total = result.rowCount;
-            // An expression was sent but the backend did not acknowledge applying it,
-            // so these rows are a SUPERSET of what was asked for. Say so instead of
-            // filtering the loaded page here: filtering one page would turn
-            // "3 of 1,000,000 match" into a confident lie and make paging incoherent,
-            // since page 2 would re-filter a different slice.
-            state.expressionUnapplied =
-                state.filterModel.expression != null && result.appliedExpression !== true;
-            if (state.expressionUnapplied && !warnedExpressionUnapplied) {
-                warnedExpressionUnapplied = true;
-                console.warn('[svgrid] The data source was sent filterModel.expression but did not ' +
-                    'return `appliedExpression: true`, so the advanced filter is NOT applied ' +
-                    'and the rows shown are unfiltered. Apply the whole expression and ' +
-                    'acknowledge it, or clear the advanced filter. ' +
-                    'See https://svgrid.com/docs/help/server/server-filtering');
-            }
+            state.rowCount = result.rowCount;
+            state.lastRowKnown = true;
+            noteExpressionApplied(result);
             state.loading = false;
             emit();
         }
@@ -90,7 +180,12 @@ export function createServerDataSource(source, options) {
         return (async () => {
             try {
                 const result = await thunk();
-                await fetchPage();
+                // Page mode re-reads the page. Infinite mode re-reads the blocks it
+                // holds, in place: the list keeps its length and its scroll.
+                if (infinite)
+                    cache?.refresh();
+                else
+                    await fetchPage();
                 return result;
             }
             finally {
@@ -101,12 +196,40 @@ export function createServerDataSource(source, options) {
     }
     const optimistic = !!options.optimistic && !!options.getRowId;
     const getRowId = options.getRowId;
+    // The last range the grid reported, so a sort / filter / purge can
+    // re-request what the user is actually looking at rather than row 0.
+    let viewStart = 0;
+    let viewEnd = 0;
     // Optimistic update: patch the local row, reconcile with the server result,
     // roll back on error. Falls back to the plain refresh path when the row
     // isn't on the current page (nothing local to update).
     async function optimisticUpdate(id, patch, fn) {
         if (disposed)
             throw new Error('createServerDataSource: controller is disposed');
+        if (infinite && cache) {
+            // The cache owns the rows here; patch it, not a copy the next block
+            // to land would overwrite.
+            const at = cache.findIndex((r) => !rowPlaceholderState(r) && getRowId(r) === id);
+            if (at < 0)
+                return mutate('updateRow', () => fn(id, patch));
+            const prev = cache.getRow(at);
+            cache.patch(at, { ...prev, ...patch });
+            state.saving = true;
+            emit();
+            try {
+                const result = await fn(id, patch);
+                cache.patch(at, result);
+                return result;
+            }
+            catch (err) {
+                cache.patch(at, prev);
+                throw err;
+            }
+            finally {
+                state.saving = false;
+                emit();
+            }
+        }
         const prevRows = state.rows;
         const idx = prevRows.findIndex((r) => getRowId(r) === id);
         if (idx < 0)
@@ -132,6 +255,27 @@ export function createServerDataSource(source, options) {
     async function optimisticDelete(id, fn) {
         if (disposed)
             throw new Error('createServerDataSource: controller is disposed');
+        if (infinite && cache) {
+            const at = cache.findIndex((r) => !rowPlaceholderState(r) && getRowId(r) === id);
+            if (at < 0)
+                return mutate('deleteRow', () => fn(id));
+            const prev = cache.getRow(at);
+            cache.remove(at, 1);
+            state.saving = true;
+            emit();
+            try {
+                await fn(id);
+            }
+            catch (err) {
+                cache.insert(at, [prev]);
+                throw err;
+            }
+            finally {
+                state.saving = false;
+                emit();
+            }
+            return;
+        }
         const prevRows = state.rows;
         const prevTotal = state.total;
         const next = prevRows.filter((r) => getRowId(r) !== id);
@@ -154,8 +298,54 @@ export function createServerDataSource(source, options) {
             emit();
         }
     }
+    // In infinite mode the first blocks are requested as soon as the grid
+    // reports a viewport; `refresh()` is what arms the cache before that.
+    if (infinite)
+        cache = buildCache();
     return {
-        refresh: fetchPage,
+        refresh: () => {
+            if (!infinite)
+                return void fetchPage();
+            // Keep the count and the scroll position, re-request what is held.
+            cache?.refresh();
+        },
+        setViewport(startIndex, endIndex) {
+            viewStart = startIndex;
+            viewEnd = endIndex;
+            cache?.setViewport(startIndex, endIndex);
+        },
+        retryLoads: () => cache?.retryFailed(),
+        purge: () => cache?.purge(),
+        getCacheState: () => cache?.getCacheState() ?? [],
+        // --- GridRowModel -----------------------------------------------
+        subscribe(onChange) {
+            subscribers.add(onChange);
+            return () => {
+                subscribers.delete(onChange);
+            };
+        },
+        getRows: () => state.rows,
+        isLoading: () => state.loading,
+        getRowId: options.getRowId ? (row) => options.getRowId(row) : undefined,
+        // Only infinite mode has unloaded rows to stand in for.
+        rowPlaceholder: infinite ? (row) => rowPlaceholderState(row) : undefined,
+        retryRow: infinite ? (_row, rowIndex) => cache?.retryFailedAt(rowIndex) : undefined,
+        /**
+         * A getter, not a snapshot: the grid re-reads this after every change
+         * notification, and a frozen object would leave the pager on page 1
+         * forever. Absent in infinite mode, where there are no pages.
+         */
+        get pagination() {
+            if (infinite)
+                return undefined;
+            return {
+                pageIndex: state.pageIndex,
+                pageSize: state.pageSize,
+                rowCount: state.total,
+                setPage: (pageIndex) => this.setPage(pageIndex),
+                setPageSize: (pageSize) => this.setPageSize(pageSize),
+            };
+        },
         createRow: (input) => mutate('createRow', source.createRow ? () => source.createRow(input) : null),
         updateRow: (id, patch) => {
             if (!source.updateRow)
@@ -172,14 +362,27 @@ export function createServerDataSource(source, options) {
         setSort(sortModel) {
             state.sortModel = sortModel;
             state.pageIndex = 0;
+            if (infinite)
+                return resetCache();
             void fetchPage();
         },
         setFilter(filterModel) {
-            state.filterModel = filterModel;
+            state.filterModel = Array.isArray(filterModel.columns)
+                ? {
+                    global: filterModel.global,
+                    columns: toServerFilterColumns(filterModel),
+                }
+                : filterModel;
             state.pageIndex = 0;
+            if (infinite)
+                return resetCache();
             void fetchPage();
         },
         setPage(pageIndex) {
+            // There are no pages to move between when the whole result is one
+            // scrollable list; the grid scrolls instead.
+            if (infinite)
+                return;
             const clamped = Math.max(0, pageIndex);
             if (clamped === state.pageIndex)
                 return;
@@ -189,11 +392,17 @@ export function createServerDataSource(source, options) {
         setPageSize(pageSize) {
             state.pageSize = Math.max(1, pageSize);
             state.pageIndex = 0;
+            if (infinite)
+                return;
             void fetchPage();
         },
         getState: () => ({ ...state }),
         dispose() {
             disposed = true;
+            pageAbort?.abort();
+            pageAbort = null;
+            cache?.dispose();
+            cache = null;
             // An in-flight fetch's resolution short-circuits on `disposed`, so it
             // never clears `loading`. Clear it here (and emit) so a disposed
             // controller doesn't report a permanent loading state.

package/dist/server.d.ts

@@ -0,0 +1,13 @@
+/**
+ * `@svgrid/grid/server` - the server-side data primitives, with no Svelte in
+ * the import graph.
+ *
+ * Everything here is also on the package root. This entry point exists for
+ * code that must not pull `SvGrid.svelte` into its bundle or its test
+ * runner: a SvelteKit `+server.ts` shaping a `ServerRequest` into a query,
+ * a worker feeding a block cache, or `@svgrid/enterprise`'s own row model,
+ * whose unit tests run without the Svelte compiler.
+ */
+export { createServerDataSource, type ServerDataSource, type ServerSelectionRule, type ServerRequest, type ServerResult, type ServerController, type ServerControllerOptions, type ServerState, type ServerSortModel, type ServerFilterModel, type ServerAggFn, type ServerAggregation, type ServerGroupRow, type ServerLeafRow, type ServerMoreRow, type ServerFooterRow, type ServerSkeletonRow, type ServerGrandTotalRow, type ServerPlaceholderRow, type ServerDisplayRow, type ServerDetailRow, } from './server-data-source.js';
+export { createBlockCache, createRowPlaceholder, rowPlaceholderState, type BlockCache, type BlockCacheOptions, type BlockCacheState, type BlockFetchResult, type BlockState, } from './server-block-cache.js';
+export { toServerFilterColumns, type GridRowModel, type GridFilterState, type GridRowModelSort, } from './row-model.js';

package/dist/server.js

@@ -0,0 +1,13 @@
+/**
+ * `@svgrid/grid/server` - the server-side data primitives, with no Svelte in
+ * the import graph.
+ *
+ * Everything here is also on the package root. This entry point exists for
+ * code that must not pull `SvGrid.svelte` into its bundle or its test
+ * runner: a SvelteKit `+server.ts` shaping a `ServerRequest` into a query,
+ * a worker feeding a block cache, or `@svgrid/enterprise`'s own row model,
+ * whose unit tests run without the Svelte compiler.
+ */
+export { createServerDataSource, } from './server-data-source.js';
+export { createBlockCache, createRowPlaceholder, rowPlaceholderState, } from './server-block-cache.js';
+export { toServerFilterColumns, } from './row-model.js';

package/dist/sparkline.js

@@ -38,13 +38,15 @@ export function buildSparkline(values, cfg = {}) {
         const barW = Math.max(1, slot - gap);
         const mid = height / 2;
         const h = innerH / 2;
-        const bars = values.map((v, i) => {
+        const bars = [];
+        values.forEach((v, i) => {
             const x = pad + i * slot + (slot - barW) / 2;
+            // A win/loss sparkline marks a win up and a loss down; a zero is a
+            // blank gap, no mark at all, the way Excel draws one.
             if (v > 0)
-                return { x, y: mid - h, w: barW, h, negative: false };
-            if (v < 0)
-                return { x, y: mid, w: barW, h, negative: true };
-            return { x, y: mid - 1, w: barW, h: 2, negative: false };
+                bars.push({ x, y: mid - h, w: barW, h, negative: false });
+            else if (v < 0)
+                bars.push({ x, y: mid, w: barW, h, negative: true });
         });
         return { ...base, linePath: '', areaPath: '', bars, lastPoint: null };
     }

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

@@ -151,6 +151,12 @@ export type SvGridTransactionResult = {
  * the component.
  */
 export type SvGridApi<TFeatures extends TableFeatures, TData extends RowData> = {
+    /**
+     * The grid's root element (`.sv-grid-root`), or null before mount and
+     * after unmount. For measuring, focusing, or reading the theme the grid
+     * is drawn with - the PDF export takes its colours from here.
+     */
+    getElement(): HTMLElement | null;
     /** Read a cell value from the underlying data at `rowIndex`. */
     getCellValue(rowIndex: number, columnId: string): unknown;
     /** Write a cell value through the column's field. */
@@ -413,6 +419,15 @@ export type SvGridApi<TFeatures extends TableFeatures, TData extends RowData> =
     getDisplayedRows(): ReadonlyArray<TData>;
     /** Snapshot of the current data array (pre-pipeline). */
     getData(): ReadonlyArray<TData>;
+    /**
+     * The stable id the grid keys a row by: what the `getRowId` prop
+     * computed, or the row's position when no `getRowId` is set. Pass a
+     * display index (the space `getActiveCell`, `scrollToRow` and the cell
+     * methods use) or a row object; returns null for an unknown index or a
+     * row that is not in the data. Pair with `selectRows`, `toggleRowSelected`
+     * or an `applyTransaction` remove, all of which take these ids.
+     */
+    getRowId(row: number | TData): string | null;
     /**
      * Snapshot of every column the grid currently knows about, in visual
      * order, with the human-readable header label. Use this when exporting
@@ -560,6 +575,24 @@ export type SvGridApi<TFeatures extends TableFeatures, TData extends RowData> =
     canRedo(): boolean;
     /** Wipe both stacks (e.g. after a server save commits the buffer). */
     clearHistory(): void;
+    /**
+     * Mark every step recorded from now on with `tag`, until the next call;
+     * `undefined` stops the marking. The grid never reads the tag. It is for a
+     * consumer that shows one of several data sets through the grid (a
+     * workbook's sheets, say) and has to know which one the next Ctrl+Z would
+     * change before it lets the grid apply it: it tags the steps with the data
+     * set they were made on and asks `peekUndo` first.
+     */
+    setHistoryTag(tag: unknown): void;
+    /** The step the next `undo()` would apply, or null when there is none. A
+     *  multi-cell action carries one tag, so it reports as one. */
+    peekUndo(): {
+        tag: unknown;
+    } | null;
+    /** The step the next `redo()` would apply, or null when there is none. */
+    peekRedo(): {
+        tag: unknown;
+    } | null;
     /**
      * The same `GridCommandContext` a registered shortcut handler receives.
      *

package/dist/validate.d.ts

@@ -35,6 +35,10 @@ export type ValidateInput<TFeatures extends TableFeatures, TData extends RowData
         idField?: string;
         column?: string;
     };
+    /** Gantt mode. Only its presence matters here - see rule 6b. */
+    gantt?: unknown;
+    /** Server-side grouping: group rows carry their key and aggregates, not the leaf fields. */
+    serverGroup?: unknown;
     initialColumnPinning?: {
         left?: ReadonlyArray<string>;
         right?: ReadonlyArray<string>;

package/dist/validate.js

@@ -1,3 +1,4 @@
+import { rowPlaceholderState } from './server-block-cache.js';
 /** How many rows to sample when deciding whether a `field` exists. */
 const FIELD_SAMPLE_ROWS = 10;
 const DOCS = 'https://svgrid.com/docs/getting-started/3-data-and-columns/';
@@ -17,9 +18,21 @@ export function validateGridConfig(input) {
     // ---- 1. A `field` that does not exist on the data -------------------------
     // The single most expensive silent failure: the column renders, and every
     // cell in it is blank. Sampled across several rows so genuinely sparse data
-    // (a key absent from row 0 but present later) does not trip it.
-    const sample = (input.data ?? []).slice(0, FIELD_SAMPLE_ROWS);
-    if (sample.length) {
+    // (a key absent from row 0 but present later) does not trip it. A row
+    // model shows placeholder rows before its first block lands; those carry
+    // no data keys at all and say nothing about the columns.
+    // Stops at the sample size: this runs on every data change, and a filter
+    // over all the rows first was O(n) per tick on a live feed.
+    const sample = [];
+    for (const row of input.data ?? []) {
+        if (sample.length >= FIELD_SAMPLE_ROWS)
+            break;
+        if (!rowPlaceholderState(row))
+            sample.push(row);
+    }
+    // Under server-side grouping the first rows are group rows, which carry
+    // a key and aggregates and none of the leaf fields; nothing to judge by.
+    if (sample.length && !input.serverGroup) {
         const known = new Set();
         for (const row of sample) {
             if (row && typeof row === 'object')
@@ -122,6 +135,19 @@ export function validateGridConfig(input) {
                 `data, so parent lookups cannot match and the tree stays flat.`);
         }
     }
+    // ---- 6b. gantt + treeData: two trees over one set of rows -----------------
+    // The Gantt builds its own work-breakdown tree from `gantt.parentField`,
+    // because it needs every descendant - a collapsed phase still contributes to
+    // its summary bar. `treeData` hides collapsed children from the view before
+    // the renderer sees them, so the two together silently drop tasks out of
+    // their phase's rollup the moment anything is collapsed.
+    if (input.gantt && input.treeData) {
+        messages.push('[svgrid] `gantt` and `treeData` are both set. The Gantt builds its own ' +
+            'work-breakdown tree from `gantt.parentField` and needs every ' +
+            'descendant row, but `treeData` hides collapsed children from the view, ' +
+            'so summary bars will under-report. Remove `treeData` and set ' +
+            '`gantt.parentField` instead.');
+    }
     // ---- 7. Pinning that column virtualization will hide ----------------------
     // Documented incompatibility: the virtualizer recycles column DOM nodes, so
     // sticky pinning cannot survive it. `columnVirtualization` defaults to ON,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svgrid/grid",
-  "version": "3.0.4",
+  "version": "3.0.6",
   "description": "Svelte 5-native data grid and data table. Headless-first engine with virtual scrolling for 100k+ rows, Excel-style filtering, inline editing, grouping, tree data, pivot, and server-side data. Drop-in <SvGrid> component. TypeScript, SSR-ready.",
   "author": "jQWidgets <boikom@jqwidgets.com>",
   "license": "MIT",
@@ -94,11 +94,21 @@
       "svelte": "./dist/filtering/excel-filters.js",
       "import": "./dist/filtering/excel-filters.js"
     },
+    "./sparkline": {
+      "types": "./dist/sparkline.d.ts",
+      "svelte": "./dist/sparkline.js",
+      "import": "./dist/sparkline.js"
+    },
     "./shortcuts": {
       "types": "./dist/shortcut-registry.d.ts",
       "svelte": "./dist/shortcut-registry.js",
       "import": "./dist/shortcut-registry.js"
     },
+    "./server": {
+      "types": "./dist/server.d.ts",
+      "svelte": "./dist/server.js",
+      "import": "./dist/server.js"
+    },
     "./flex-render": {
       "types": "./dist/flex-render.d.ts",
       "svelte": "./dist/flex-render.js",

package/src/GridMenus.svelte

@@ -214,6 +214,19 @@
     });
   }
 
+  /**
+   * Whether a column's active filter operator is one of the set operators,
+   * read at event time from component state: the condition input's focus
+   * and blur handlers cannot depend on a template `@const`, because blur
+   * also fires while the popover is being torn down, after that const's
+   * effect is gone.
+   */
+  function isSetOperatorFor(colId: string): boolean {
+    const column = allColumns.find((c) => c.id === colId);
+    const op = filterMenuValues[colId]?.operator ?? defaultOperatorFor(column);
+    return op === "in" || op === "notIn";
+  }
+
   /** Enter anywhere in the panel means "done" - filtering is already live. */
   function onFilterPanelKeydown(event: KeyboardEvent) {
     if (event.key !== "Enter" || event.shiftKey) return;
@@ -286,8 +299,23 @@
   const saveComment = $derived(ctrl.saveComment);
   const removeComment = $derived(ctrl.removeComment);
   const closeCommentEditor = $derived(ctrl.closeCommentEditor);
+
+  function onContextMenuKeydown(event: KeyboardEvent) {
+    // Escape closes the context menu, the way every spreadsheet and desktop
+    // app does. The backdrop closes it on a click, but a keyboard user who
+    // opened it (Shift+F10, the Menu key) otherwise has no way out, and the
+    // menu sits over the sheet swallowing every other key. Handled at the
+    // window so it works whatever holds focus while the menu is open.
+    if (contextMenuFor && (event.key === "Escape" || event.key === "Esc")) {
+      event.preventDefault();
+      event.stopPropagation();
+      closeContextMenu();
+    }
+  }
 </script>
 
+<svelte:window onkeydown={onContextMenuKeydown} />
+
   {#if tooltip}
     <!-- Custom hover tooltip. Floats above the grid; positioned by
          showTooltipFor(). Notes and column tooltips both surface here. -->
@@ -396,10 +424,12 @@
               : menuActiveOperator === "regex"
                 ? "Pattern..."
                 : "Filter value..."}
-          onfocus={isSetOp
-            ? (event) => onSetOpFilterFocus(event.currentTarget as HTMLInputElement, colId)
-            : undefined}
-          onblur={isSetOp ? () => closeInSuggest() : undefined}
+          onfocus={(event) => {
+            if (isSetOperatorFor(colId)) onSetOpFilterFocus(event.currentTarget as HTMLInputElement, colId);
+          }}
+          onblur={() => {
+            if (isSetOperatorFor(colId)) closeInSuggest();
+          }}
           oninput={(event) => {
             const input = event.currentTarget as HTMLInputElement;
             updateFilterMenuValue(colId, input.value);