@svgrid/grid 2.2.28 → 2.2.30

package/src/SvGrid.css

@@ -1899,35 +1899,15 @@ select.sv-grid-fr-editor {
 
 /* In / Not-in value-suggestions dropdown (anchored under the chip input).
    Defined AFTER .sv-grid-menu so its tighter sizing wins - the element
-   carries both classes. Compact rows keep a long value list scannable. */
+   carries both classes. The rows come from SvListBox, which owns its own
+   scrolling (windowed past ~40 values), so this is just the frame. */
 .sv-grid-menu.sv-grid-in-suggest {
   min-width: 140px;
   max-width: 260px;
-  max-height: 220px;
-  overflow-y: auto;
+  padding: 0;
+  overflow: visible;
   font-size: 12px;
 }
-.sv-grid-in-suggest-item {
-  gap: 6px;
-  padding: 3px 8px;
-  border-radius: 4px;
-  line-height: 1.4;
-}
-.sv-grid-in-suggest-item[aria-selected="true"] {
-  color: var(--sg-accent, #0b63f3);
-  font-weight: 600;
-}
-.sv-grid-in-suggest-check {
-  flex: none;
-  width: 12px;
-  text-align: center;
-  color: var(--sg-accent, #0b63f3);
-}
-.sv-grid-in-suggest-label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 
 .sv-grid-menu-item[aria-checked="true"] {
   background: var(--sg-selection-bg, #eaf2ff);
@@ -2062,12 +2042,13 @@ select.sv-grid-fr-editor {
   padding: 2px 7px !important;
 }
 
-.sv-grid-facet-list {
-  max-height: 200px;
-  overflow: auto;
+/* The value / column checklists are SvListBox instances (windowed past ~40
+   rows). They draw their own box off the shared --sg-input-border/--sg-border
+   tokens, so all the menu adds is scroll containment - without it a wheel past
+   the end of a non-virtual list scrolls the page behind the popover, which
+   closes it. */
+.sv-grid-menu .sv-listbox {
   overscroll-behavior: contain;
-  border: 1px solid var(--sg-border, #eaeef4);
-  border-radius: 5px;
 }
 
 .sv-grid-facet {
@@ -2082,9 +2063,11 @@ select.sv-grid-fr-editor {
   background: var(--sg-row-hover-bg, #f4f6fa);
 }
 
+/* Sits directly above the checklist, which draws its own frame - so no rule
+   here, or the two borders stack. */
 .sv-grid-facet-all {
-  border-bottom: 1px solid var(--sg-border, #eaeef4);
   font-weight: 600;
+  padding-inline-start: 3px;
 }
 
 .sv-grid-facet input {
@@ -2464,11 +2447,9 @@ select.sv-grid-fr-editor {
 .sv-grid-choose-columns-menu {
   width: 240px;
 }
-.sv-grid-choose-columns-menu .sv-grid-facet-list {
-  max-height: 280px;
-}
 
-/* Native checkboxes in the facet list pick up the theme accent. */
+/* Native checkbox on the "(Select all)" row picks up the theme accent. The
+   checklist rows below it draw SvListBox's own box, not a native input. */
 .sv-grid-facet input[type="checkbox"] {
   accent-color: var(--sg-accent, #2563eb);
   width: 14px;

package/src/SvGrid.svelte

@@ -56,6 +56,7 @@
   } from "./SvGrid.helpers";
   import {
     splitInTokens,
+    trailingInToken,
     joinInTokens,
   } from "./filtering/excel-filters";
   import { createSvGridController } from "./SvGrid.controller.svelte";
@@ -68,7 +69,13 @@
   import { getBoardView } from "./board-view.svelte";
   import { getChartView } from "./chart-view.svelte";
   let props: Props<TFeatures, TData> = $props();
-  const ctrl = createSvGridController(props);
+  // Per-instance base for every DOM id the grid mints. `$props.id()` is stable
+  // across SSR and hydration, so two grids on one page no longer collide on
+  // `svgrid_cell_0_0` and point `aria-activedescendant` at each other (#77).
+  // `$props.id()` must be its own declaration initializer - it can't be passed
+  // inline as a call argument.
+  const gridInstanceId = $props.id();
+  const ctrl = createSvGridController(props, gridInstanceId);
   // Effective props: the controller's `override ?? prop` proxy that backs
   // `api.setOption(...)`. Reading `opt.X` (instead of `props.X`) makes a view-direct
   // prop honor a runtime override. Svelte binds template `props.X` reads to the prop
@@ -151,6 +158,10 @@
       ctrl.contextMenuFor ||
       ctrl.filterMenuFor ||
       ctrl.operatorMenuFor ||
+      // The value-suggestions dropdown lives in the overlay too, and it can be
+      // the FIRST thing a user opens (focusing an in/notIn filter input), so it
+      // has to pull the chunk in rather than assume a menu already did.
+      ctrl.inSuggestFor ||
       ctrl.chooseColumnsPos;
     if (menuOpen && !MenusOverlay)
       import("./GridMenus.svelte").then((m) => (MenusOverlay = m.default));
@@ -474,7 +485,6 @@
   const closeInSuggest = $derived(ctrl.closeInSuggest);
   const addFilterToken = $derived(ctrl.addFilterToken);
   const removeFilterToken = $derived(ctrl.removeFilterToken);
-  const facetValuesForColumn = $derived(ctrl.facetValuesForColumn);
   const onWindowKeydown = $derived(ctrl.onWindowKeydown);
 
   // True when a `regex` filter's pattern won't compile - used to flag the
@@ -522,6 +532,21 @@
     if (ctrl.inSuggestFor !== columnId) openInSuggest(input, columnId);
   }
 
+  // The tool-panel / filter-menu `in` / `notIn` inputs hold the WHOLE token
+  // list ("AAPL, MSFT"), unlike the chip input which holds one token. So the
+  // suggestion query is the trailing fragment being typed, not the full value.
+  function onSetOpFilterFocus(event: FocusEvent, columnId: string): void {
+    const input = event.currentTarget as HTMLInputElement;
+    openInSuggest(input, columnId);
+    ctrl.inSuggestQuery = trailingInToken(input.value);
+  }
+
+  function onSetOpFilterInput(event: Event, columnId: string): void {
+    const input = event.currentTarget as HTMLInputElement;
+    ctrl.inSuggestQuery = trailingInToken(input.value);
+    if (ctrl.inSuggestFor !== columnId) openInSuggest(input, columnId);
+  }
+
   // Overflow layout for the `in` / `notIn` chip row: render every chip, then
   // measure how many fit on one line and collapse the rest into the "+N" pill.
   // A guess-by-width heuristic can't work (labels vary), so we measure real
@@ -1280,10 +1305,14 @@
             return;
           }
           // Tab and Ctrl/Cmd+Enter both commit. Plain Enter inserts a newline.
-          if (
-            event.key === "Tab" ||
-            (event.key === "Enter" && (event.ctrlKey || event.metaKey))
-          ) {
+          // Tab goes through the shared helper so it advances the active cell
+          // like every other editor does (#48).
+          if (event.key === "Tab") {
+            event.preventDefault();
+            ctrl.commitAndMoveByTab(event.shiftKey);
+            return;
+          }
+          if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
             event.preventDefault();
             saveEditingCell();
             ctrl.gridRootEl?.focus({ preventScroll: true });
@@ -2583,7 +2612,7 @@
                             ),
                           }}
                           {...getGridCellA11yProps({
-                            id: getGridCellDomId("svgrid", rowIndex, colIndex),
+                            id: getGridCellDomId(ctrl.gridDomId, rowIndex, colIndex),
                             rowIndex: rowIndex + 1,
                             colIndex: colIndex + 1,
                             selected: isRowSelected(row.id),
@@ -2833,7 +2862,7 @@
                           ),
                         }}
                         {...getGridCellA11yProps({
-                          id: getGridCellDomId("svgrid", rowIndex, colIndex),
+                          id: getGridCellDomId(ctrl.gridDomId, rowIndex, colIndex),
                           rowIndex: rowIndex + 1,
                           colIndex: colIndex + 1,
                           selected: isRowSelected(row.id),
@@ -3273,10 +3302,13 @@
                     </select>
                     {#if active !== "isBlank" && active !== "isNotBlank"}
                       {@const tpIsSetOp = active === "in" || active === "notIn"}
+                      <!-- in/notIn drives the shared value-suggestions dropdown
+                           (a windowed checklist) rather than a native datalist,
+                           which capped at 200 values and couldn't show which
+                           are already selected. -->
                       <input
                         class="sv-grid-tp-filter-input"
                         type={active === "regex" ? "text" : fType}
-                        list={tpIsSetOp ? `sv-tp-in-list-${column.id}` : undefined}
                         placeholder={active === "between"
                           ? "From"
                           : tpIsSetOp
@@ -3285,19 +3317,15 @@
                               ? "Pattern…"
                               : "Filter…"}
                         value={filterMenuValues[column.id]?.value ?? ""}
-                        oninput={(e) =>
-                          updateFilterMenuValue(
-                            column.id,
-                            e.currentTarget.value,
-                          )}
+                        onfocus={tpIsSetOp
+                          ? (e) => onSetOpFilterFocus(e, column.id)
+                          : undefined}
+                        onblur={tpIsSetOp ? () => closeInSuggest() : undefined}
+                        oninput={(e) => {
+                          updateFilterMenuValue(column.id, e.currentTarget.value);
+                          if (tpIsSetOp) onSetOpFilterInput(e, column.id);
+                        }}
                       />
-                      {#if tpIsSetOp}
-                        <datalist id={`sv-tp-in-list-${column.id}`}>
-                          {#each facetValuesForColumn(column.id).slice(0, 200) as v (v)}
-                            <option value={v}></option>
-                          {/each}
-                        </datalist>
-                      {/if}
                       {#if active === "between"}
                         <input
                           class="sv-grid-tp-filter-input"

package/src/SvGrid.types.ts

@@ -1370,11 +1370,18 @@ export type Props<TFeatures extends TableFeatures = TableFeatures, TData extends
   conditionalFormats?: ReadonlyArray<ConditionalFormat<TData>>;
   /**
    * Which rows feed the min/max range that `colorScale` / `dataBar` formats
-   * scale against. `visible` (default): the currently displayed rows (after
-   * filtering + paging), so the heat map adapts to what's on screen. `all`:
-   * the full unfiltered dataset, for a scale that stays put as you filter.
-   */
-  conditionalStatScope?: "visible" | "all";
+   * scale against.
+   *
+   * - `filtered` (default): every row that survives the filters, ignoring the
+   *   page slice. The scale follows what you filtered to but does not shift
+   *   when you page, so the same value keeps the same colour on page 1 and
+   *   page 2.
+   * - `visible`: only the rows currently on screen. Rescales per page - use it
+   *   when you want each page's heat map normalized to that page.
+   * - `all`: the full unfiltered dataset, for a scale that stays put as you
+   *   filter.
+   */
+  conditionalStatScope?: "filtered" | "visible" | "all";
   onCellValueChange?: (event: {
     rowIndex: number;
     columnId: string;
@@ -1589,6 +1596,14 @@ export type CellEditState = {
   columnId: string;
   editorType: CellEditorType;
   value: unknown;
+  /**
+   * The row's underlying data object, captured when the edit started. The
+   * commit path resolves the row by id first; this is the fallback for when
+   * the row has left the row model mid-edit (a filter typed into the filter
+   * row while an editor is open), so the typed value still lands instead of
+   * being silently dropped.
+   */
+  rowRef?: unknown;
 } | null;
 export type FilterOperator =
   | "contains"

package/src/SvListBox.svelte

@@ -23,9 +23,18 @@
 
   type Props = SvEditorProps & {
     options: ReadonlyArray<ListOption>
-    value?: string | number | Array<string | number> | null
+    value?: string | number | ReadonlyArray<string | number> | ReadonlySet<string | number> | null
     onChange?: (value: any) => void
     multiple?: boolean
+    /**
+     * Checklist styling: each row draws a checkbox and the selected-row accent
+     * highlight is suppressed, because a list that starts fully selected (a
+     * filter checklist) would otherwise paint every row. State reads off the
+     * box; `aria-selected` still carries it for assistive tech.
+     */
+    checkbox?: boolean
+    /** Stretch to the container width instead of the default 220px. */
+    block?: boolean
     /** Visible height in rows before scrolling. */
     rows?: number
     /** Window the list (render only visible rows) for large option sets. */
@@ -46,6 +55,8 @@
     value = null,
     onChange,
     multiple = false,
+    checkbox = false,
+    block = false,
     disabled = false,
     size = 'md',
     rows = 7,
@@ -152,13 +163,15 @@
   })
 </script>
 
-<SvField id={uid} {label} {hint} {error} {required} {dir}>
+<SvField id={uid} {label} {hint} {error} {required} {dir} {block}>
   <!-- Div-based listbox (role comes from `lb.rootProps()`). -->
   <div
     bind:this={listEl}
     class="sv-listbox sv-listbox--{size}"
     class:is-invalid={invalid}
     class:is-virtual={useVirtual}
+    class:is-checkbox={checkbox}
+    class:is-block={block}
     style:--sv-rows={rows}
     style:--sv-row-h={`${rowHeightBase}px`}
     onwheel={useVirtual ? scroller.onWheel : undefined}
@@ -211,7 +224,11 @@
 </SvField>
 
 {#snippet optionInner(opt: ListOption)}
-  {#if multiple}<span class="sv-listbox__check" aria-hidden="true">{isSel(opt) ? '✓' : ''}</span>{/if}
+  {#if checkbox}
+    <span class="sv-listbox__box" class:is-on={isSel(opt)} aria-hidden="true"></span>
+  {:else if multiple}
+    <span class="sv-listbox__check" aria-hidden="true">{isSel(opt) ? '✓' : ''}</span>
+  {/if}
   {#if item ?? itemTemplate}{@render (item ?? itemTemplate)!(opt)}{:else}<span class="sv-listbox__label">{opt.label}</span>{/if}
 {/snippet}
 
@@ -249,6 +266,7 @@
     padding: 0; overflow: hidden; position: relative;
     height: calc(var(--sv-rows, 7) * var(--sv-row-h, 32px) + 8px);
   }
+  .sv-listbox.is-block { width: 100%; }
   .sv-listbox--sm { --_fs: 12px; }
   .sv-listbox--lg { --_fs: 15px; }
   .sv-listbox:focus-visible { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
@@ -284,4 +302,25 @@
   }
   .sv-listbox__check { width: 14px; text-align: center; color: var(--_accent); }
   .sv-listbox__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+  /* ---- Checklist variant ---- */
+  .sv-listbox__box {
+    width: 14px; height: 14px; flex: none; box-sizing: border-box; position: relative;
+    border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1));
+    border-radius: 3px; background: var(--sg-input-bg, #fff);
+  }
+  .sv-listbox__box.is-on { background: var(--_accent); border-color: var(--_accent); }
+  .sv-listbox__box.is-on::after {
+    content: ''; position: absolute; left: 4px; top: 1px; width: 3px; height: 7px;
+    border: solid var(--sg-input-bg, #fff); border-width: 0 2px 2px 0; transform: rotate(45deg);
+  }
+  /* The box carries the state, so selected rows keep neutral chrome - only the
+     roving highlight tints a row. */
+  .sv-listbox.is-checkbox .sv-listbox__opt.is-selected {
+    background: none; color: inherit; font-weight: inherit;
+  }
+  .sv-listbox.is-checkbox .sv-listbox__opt.is-active,
+  .sv-listbox.is-checkbox .sv-listbox__opt.is-selected.is-active {
+    background: var(--sg-row-hover-bg, #f1f5f9);
+  }
 </style>

package/src/column-groups.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, it } from 'vitest'
 import { computeColumnGroupMeta, hiddenLeavesForCollapse } from './column-groups'
+import { resolveColumnId } from './column-id'
 
 // A group "Q1" with an always-on Total plus Jan/Feb that only show when open.
 const columns = [
@@ -57,3 +58,50 @@ describe('hiddenLeavesForCollapse', () => {
     expect(hidden.apr).toBeUndefined() // 'open' shows when expanded
   })
 })
+
+// ---------------------------------------------------------------------------
+// Id agreement with the engine
+// ---------------------------------------------------------------------------
+
+describe('unnamed columns', () => {
+  // Columns with neither `id` nor `field` get an id synthesized from their
+  // position. The engine, this module, and the group-header derivation all
+  // have to synthesize the SAME one - they used to disagree (`q1_d_1` here vs
+  // `q1_1_1` in the engine), so `columnGroupShow` on an unnamed column looked
+  // wired up but never actually hid anything.
+  const unnamed = [
+    { field: 'name' },
+    {
+      id: 'q1',
+      header: 'Q1',
+      columns: [
+        { field: 'jan', columnGroupShow: 'open' },
+        { header: 'Closed', columnGroupShow: 'closed' },
+        { header: 'Always' },
+      ],
+    },
+  ]
+
+  it('keys leafControl by the id the engine assigns', () => {
+    const meta = computeColumnGroupMeta(unnamed)
+    // `<parentId>_<depth>_<index>`: depth 1 under "q1", index 1 in its siblings.
+    expect(meta.leafControl.has('q1_1_1')).toBe(true)
+    expect(meta.leafControl.get('q1_1_1')).toEqual({ groupId: 'q1', show: 'closed' })
+    // The untagged sibling is not controlled, and no stale `_d_` key survives.
+    expect(meta.leafControl.has('q1_1_2')).toBe(false)
+    expect([...meta.leafControl.keys()].some((k) => k.includes('_d_'))).toBe(false)
+  })
+
+  it('hides an unnamed closed-mode leaf once the group is expanded', () => {
+    const meta = computeColumnGroupMeta(unnamed)
+    expect(hiddenLeavesForCollapse(meta, new Set<string>())).toEqual({ q1_1_1: true })
+    expect(hiddenLeavesForCollapse(meta, new Set(['q1']))).toEqual({ jan: true })
+  })
+
+  it('matches resolveColumnId at every depth', () => {
+    expect(resolveColumnId({ field: 'jan' }, 'q1', 1, 0)).toBe('jan')
+    expect(resolveColumnId({ id: 'q1' }, undefined, 0, 1)).toBe('q1')
+    expect(resolveColumnId({ header: 'X' }, 'q1', 1, 2)).toBe('q1_1_2')
+    expect(resolveColumnId({ header: 'X' }, undefined, 0, 3)).toBe('col_0_3')
+  })
+})

package/src/column-groups.ts

@@ -20,12 +20,7 @@ export type ColumnGroupMeta = {
   leafControl: Map<string, { groupId: string; show: ColumnGroupShow }>;
 };
 
-// Mirror the id resolution used by the group-header derivation so group ids and
-// leaf ids line up across both.
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function idOf(def: any, parentId: string | undefined, ix: number): string {
-  return def.id ?? def.field ?? `${parentId ?? "col"}_d_${ix}`;
-}
+import { resolveColumnId } from "./column-id";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function computeColumnGroupMeta(columns: ReadonlyArray<any>): ColumnGroupMeta {
@@ -33,10 +28,13 @@ export function computeColumnGroupMeta(columns: ReadonlyArray<any>): ColumnGroup
   const defaultOpen = new Map<string, boolean>();
   const leafControl = new Map<string, { groupId: string; show: ColumnGroupShow }>();
 
+  // `depth` is threaded because it is part of the id of an unnamed column -
+  // drop it and the ids here stop matching the ones the engine assigns, so
+  // `leafControl` lookups silently miss for those columns.
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  function walk(defs: ReadonlyArray<any>, parentId: string | undefined, controllingGroup: string | undefined) {
+  function walk(defs: ReadonlyArray<any>, parentId: string | undefined, controllingGroup: string | undefined, depth: number) {
     defs.forEach((def, ix) => {
-      const id = idOf(def, parentId, ix);
+      const id = resolveColumnId(def, parentId, depth, ix);
       if (def.columns?.length) {
         // A group is collapsible when any DIRECT child declares columnGroupShow.
         const collapsible = def.columns.some(
@@ -47,7 +45,7 @@ export function computeColumnGroupMeta(columns: ReadonlyArray<any>): ColumnGroup
           collapsibleGroupIds.add(id);
           defaultOpen.set(id, def.openByDefault === true);
         }
-        walk(def.columns, id, collapsible ? id : controllingGroup);
+        walk(def.columns, id, collapsible ? id : controllingGroup, depth + 1);
       } else {
         const show = def.columnGroupShow;
         if ((show === "open" || show === "closed") && controllingGroup) {
@@ -57,7 +55,7 @@ export function computeColumnGroupMeta(columns: ReadonlyArray<any>): ColumnGroup
     });
   }
 
-  walk(columns, undefined, undefined);
+  walk(columns, undefined, undefined, 0);
   return { collapsibleGroupIds, defaultOpen, leafControl };
 }
 

package/src/column-id.ts

@@ -0,0 +1,30 @@
+// The single definition of a column's id.
+//
+// A column def normally names itself with `id` or `field`. When it does
+// neither, the id is synthesized from where the def sits in the tree. That
+// synthesized form is what makes this module necessary: it used to be spelled
+// out separately in the engine, in the collapsible-group metadata, and in the
+// group-header derivation, and the copies did not agree. The engine keyed
+// columns by `<parent>_<depth>_<index>` while the other two used
+// `<parent>_d_<index>`, so for an unnamed column every cross-lookup missed -
+// `columnGroupShow` never hid it, and its group header measured nothing.
+//
+// Anything that needs a column's id derives it here.
+
+/**
+ * The id the grid engine assigns to a column def.
+ *
+ * @param def       the column def (only `id` / `field` are read)
+ * @param parentId  id of the enclosing column group, if any
+ * @param depth     nesting depth of `def` - 0 at the top level
+ * @param index     position of `def` within its own sibling array
+ */
+export function resolveColumnId(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  def: any,
+  parentId: string | undefined,
+  depth: number,
+  index: number,
+): string {
+  return def.id ?? def.field ?? `${parentId ?? "col"}_${depth}_${index}`;
+}

package/src/core.ts

@@ -1,4 +1,5 @@
 import type { SparklineConfig } from './sparkline'
+import { resolveColumnId } from './column-id'
 
 export type RowData = Record<string, unknown>
 export type Updater<T> = T | ((prev: T) => T)
@@ -913,7 +914,7 @@ export function createSvGridCore<TFeatures extends TableFeatures, TData extends
       ): Array<Column<TData>> => {
         const leaves: Array<Column<TData>> = []
         defs.forEach((columnDef, index) => {
-          const id = columnDef.id ?? columnDef.field ?? `${parentId ?? 'col'}_${depth}_${index}`
+          const id = resolveColumnId(columnDef, parentId, depth, index)
           if (columnDef.columns?.length) {
             leaves.push(...build(columnDef.columns, depth + 1, id))
             return

package/src/createListbox.svelte.ts

@@ -25,14 +25,25 @@
 import { createTypeaheadBuffer, isTypeaheadKey, nextTypeaheadIndex, type ListOption } from './list-option'
 import { editorAria, type EditorAriaState } from './editor-contract'
 
-export type ListboxValue = string | number | Array<string | number> | null
+/**
+ * A `Set` is accepted (and echoed back) in multi-select mode so a caller whose
+ * selection is already set-shaped - a filter checklist whose default state is
+ * "every value selected" - never has to materialize it as an array to drive the
+ * listbox, or to spread it back out again on every click.
+ */
+export type ListboxValue =
+  | string
+  | number
+  | ReadonlyArray<string | number>
+  | ReadonlySet<string | number>
+  | null
 
 /** Reactive inputs are passed as getters so the core tracks live prop changes
  *  (the same controlled pattern Svelte headless libraries use). */
 export type ListboxConfig = {
   options: () => ReadonlyArray<ListOption>
   value: () => ListboxValue
-  onChange?: (value: string | number | Array<string | number>) => void
+  onChange?: (value: string | number | Array<string | number> | Set<string | number>) => void
   multiple?: () => boolean
   disabled?: () => boolean
   ariaLabel?: () => string | undefined
@@ -95,8 +106,23 @@ let uid = 0
 
 /** Normalize a listbox value to an array (pure). */
 export function toSelectedArray(value: ListboxValue, multiple: boolean): Array<string | number> {
-  if (multiple) return Array.isArray(value) ? [...value] : value == null ? [] : [value]
-  return value == null ? [] : [value as string | number]
+  if (value == null) return []
+  if (value instanceof Set || Array.isArray(value)) {
+    const all = [...(value as Iterable<string | number>)]
+    return multiple ? all : all.slice(0, 1)
+  }
+  return [value as string | number]
+}
+
+/**
+ * Membership set for a listbox value (pure). A `Set` value is reused as-is, so
+ * `isSelected` stays O(1) without copying - the difference between a linear
+ * scan per rendered row and a hash hit when the selection runs to thousands of
+ * entries.
+ */
+export function toSelectedSet(value: ListboxValue, multiple: boolean): ReadonlySet<string | number> {
+  if (value instanceof Set) return value
+  return new Set(toSelectedArray(value, multiple))
 }
 
 export function createListbox(config: ListboxConfig): Listbox {
@@ -106,6 +132,9 @@ export function createListbox(config: ListboxConfig): Listbox {
   const disabled = () => config.disabled?.() ?? false
 
   let active = $state(0)
+  // `selectedSet` drives membership; `selected` (the ordered array) stays a
+  // lazy derived so a large selection is only flattened when someone reads it.
+  const selectedSet = $derived(toSelectedSet(config.value(), multiple()))
   const selected = $derived(toSelectedArray(config.value(), multiple()))
   const enabledIdx = $derived(opts().map((o, i) => (o.disabled ? -1 : i)).filter((i) => i >= 0))
 
@@ -115,7 +144,7 @@ export function createListbox(config: ListboxConfig): Listbox {
     if (!o || o.disabled) active = enabledIdx[0] ?? 0
   })
 
-  const isSelected = (value: string | number) => selected.includes(value)
+  const isSelected = (value: string | number) => selectedSet.has(value)
   const isActive = (index: number) => index === active
   const optionId = (index: number) => `${id}-opt-${index}`
 
@@ -129,9 +158,12 @@ export function createListbox(config: ListboxConfig): Listbox {
     if (!o || o.disabled || disabled()) return
     active = index
     if (multiple()) {
-      const set = new Set(selected)
+      const set = new Set(selectedSet)
       set.has(o.value) ? set.delete(o.value) : set.add(o.value)
-      config.onChange?.([...set])
+      // Echo back the shape we were handed. Toggling one option must not
+      // disturb selected values that aren't currently in `options` (search has
+      // narrowed the list, say) - they ride along in the set untouched.
+      config.onChange?.(config.value() instanceof Set ? set : [...set])
     } else {
       config.onChange?.(o.value)
     }