@svgrid/grid 2.1.21 → 2.1.23

package/src/SvGrid.controller.svelte.ts

@@ -34,6 +34,7 @@ import "./sv-grid-scrollbar";
 import {
     computeColumnStat,
     formatsNeedingStats,
+    formatNeedsStats,
     type ColumnStat,
   } from "./conditional-formatting";
 import SvGridDropdown from "./SvGridDropdown.svelte";
@@ -143,9 +144,12 @@ const MAX_DOM_SCROLL_HEIGHT_FALLBACK = 8_000_000;
  * matters because mobile WebKit/Blink can report a generous `offsetHeight` yet
  * expose a smaller scrollable range - trusting the layout height alone is what
  * stranded the last rows on phones. Using a real scroll container also folds in
- * DPR clamping for free. Cached for the page lifetime; constant per browser.
+ * DPR clamping for free. Cached, but re-probed when the device pixel ratio
+ * changes (browser zoom) since the physical-pixel cap moves with it (#85).
  */
 let detectedMaxDomHeight: number | null = null;
+let detectedAtDpr = 0;
+const currentDpr = () => (typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1);
 /**
  * Seed the `hiddenColumns` map from any column def marked `visible: false`.
  * Walks groups so a hidden group hides all of its leaf columns. Keyed by the
@@ -190,7 +194,7 @@ function getMaxDomScrollHeight(): number {
       return forced;
     }
   }
-  if (detectedMaxDomHeight != null) return detectedMaxDomHeight;
+  if (detectedMaxDomHeight != null && detectedAtDpr === currentDpr()) return detectedMaxDomHeight;
   if (typeof document === "undefined" || !document.body) {
     return MAX_DOM_SCROLL_HEIGHT_FALLBACK;
   }
@@ -218,6 +222,7 @@ function getMaxDomScrollHeight(): number {
   } catch {
     detectedMaxDomHeight = MAX_DOM_SCROLL_HEIGHT_FALLBACK;
   }
+  detectedAtDpr = currentDpr();
   return detectedMaxDomHeight;
 }
 
@@ -429,6 +434,12 @@ export function createSvGridController<
   let filterMenuPos = $state<MenuPosition>({ x: 0, y: 0 });
   let operatorMenuFor = $state<string | null>(null);
   let operatorMenuPos = $state<MenuPosition>({ x: 0, y: 0 });
+  // `in` / `notIn` value-suggestions dropdown: the column whose chip input is
+  // active, its anchor position, and the current typed query (for filtering
+  // the distinct-value list as the user types).
+  let inSuggestFor = $state<string | null>(null);
+  let inSuggestPos = $state<MenuPosition>({ x: 0, y: 0 });
+  let inSuggestQuery = $state("");
   let chooseColumnsPos = $state<MenuPosition | null>(null);
   let contextMenuFor = $state<ContextMenuTarget<TData> | null>(null);
   let contextMenuPos = $state<MenuPosition>({ x: 0, y: 0 });
@@ -563,6 +574,10 @@ export function createSvGridController<
   let hiddenColumns = $state<Record<string, boolean>>(
     initialHiddenColumns(props.columns),
   );
+  // The columns declared `visible: false` in the ColumnDefs. Kept separately so
+  // applying a saved view (setState) can re-seed from these and never un-hide a
+  // column the app declared hidden (#54).
+  const declaredHiddenColumns = $derived(initialHiddenColumns(props.columns));
 
   // Collapsible column groups (columnGroupShow). Meta is derived from the tree;
   // `collapsedColumnGroups` is the live set of collapsed group ids, seeded once
@@ -940,6 +955,10 @@ export function createSvGridController<
     const left: Record<string, number> = {};
     let leftAcc = rowNumberWidth + selectionWidth;
     for (const id of effectivePinning.left) {
+      // Hidden pinned columns don't render, so they must contribute neither an
+      // offset entry nor width - otherwise the next visible pinned column is
+      // pushed out by a phantom gap (#75).
+      if (hiddenColumns[id] || hiddenByGroupCollapse[id]) continue;
       left[id] = leftAcc;
       leftAcc += getColumnWidth(id);
     }
@@ -948,6 +967,7 @@ export function createSvGridController<
     for (let i = effectivePinning.right.length - 1; i >= 0; i -= 1) {
       const id = effectivePinning.right[i];
       if (!id) continue;
+      if (hiddenColumns[id] || hiddenByGroupCollapse[id]) continue;
       right[id] = rightAcc;
       rightAcc += getColumnWidth(id);
     }
@@ -990,26 +1010,35 @@ export function createSvGridController<
     const map = new Map<string, ColumnStat>();
     const formats = props.conditionalFormats;
     if (!formats?.length || !formatsNeedingStats(formats)) return map;
+    // `visible` (default): the currently displayed rows (filtered + paged),
+    // so the heat map reflects what the user is looking at. `all`: the full
+    // unfiltered dataset, for a stable scale independent of filter/paging.
+    const scanAll = props.conditionalStatScope === "all";
     for (const column of allColumns) {
       const needs = formats.some(
-        (f) =>
-          (f.type === "colorScale" || f.type === "dataBar") &&
-          (!f.columns || f.columns.includes(column.id)),
+        (f) => formatNeedsStats(f) && (!f.columns || f.columns.includes(column.id)),
       );
       if (!needs) continue;
       const def = column.columnDef;
       const fieldFn = def.fieldFn;
       const field = def.field;
       const stat = computeColumnStat(
-        (function* () {
-          for (const row of allRows) {
-            yield fieldFn
-              ? fieldFn(row.original)
-              : field
-                ? (row.original as Record<string, unknown>)[field]
-                : row.getCellValueByColumnId(column.id);
-          }
-        })(),
+        scanAll
+          ? (function* () {
+              // Raw data objects (unfiltered); field/fieldFn only - no Row wrapper.
+              for (const obj of internalData as ReadonlyArray<Record<string, unknown>>) {
+                yield fieldFn ? fieldFn(obj as any) : field ? obj[field] : undefined;
+              }
+            })()
+          : (function* () {
+              for (const row of allRows) {
+                yield fieldFn
+                  ? fieldFn(row.original)
+                  : field
+                    ? (row.original as Record<string, unknown>)[field]
+                    : row.getCellValueByColumnId(column.id);
+              }
+            })(),
       );
       if (stat) map.set(column.id, stat);
     }
@@ -1076,7 +1105,7 @@ export function createSvGridController<
 
     // A single condition is "active" if it has the value(s) it needs.
     const condActive = (op: FilterOperator, value: string, valueTo?: string): boolean => {
-      if (op === "isBlank") return true;
+      if (op === "isBlank" || op === "isNotBlank") return true;
       if (op === "between") return value.trim().length > 0 && (valueTo ?? "").trim().length > 0;
       return value.trim().length > 0;
     };
@@ -1198,10 +1227,13 @@ export function createSvGridController<
     lastSelectionSerialized = serialized;
     const callback = props.onRowSelectionChange;
     if (!callback) return;
-    const data = internalData;
+    // Resolve selected rows by row id (not numeric index) so this is correct
+    // with a custom getRowId and after sorting (#45). Iterate the full filtered
+    // model - not the paginated slice - so selections on other pages are kept.
     const selectedRows: TData[] = [];
-    for (let i = 0; i < data.length; i++) {
-      if (rowSelectionState[String(i)]) selectedRows.push(data[i] as TData);
+    for (const row of allRowsBeforePagination) {
+      if (isGroupRow(row)) continue;
+      if (rowSelectionState[row.id]) selectedRows.push(row.original as TData);
     }
     callback(rowSelectionState, selectedRows);
   });
@@ -1683,7 +1715,7 @@ export function createSvGridController<
     if (!props.onFiltersChange) return;
     const menuEntries = Object.entries(filterMenuValues)
       .filter(([, f]) => {
-        if (f.operator === "isBlank") return true;
+        if (f.operator === "isBlank" || f.operator === "isNotBlank") return true;
         if (f.operator === "between") {
           return f.value.trim().length > 0 && (f.valueTo ?? "").trim().length > 0;
         }
@@ -1912,6 +1944,43 @@ export function createSvGridController<
     Math.max(totalColumnWidth - columnWindowEnd, 0),
   );
 
+  /**
+   * `groupHeaderRows` clipped to the rendered column window. The multi-level
+   * group-header band must virtualize in lock-step with the leaf-header row
+   * and the body: otherwise a group cell spanning off-window leaves renders a
+   * header over empty space (its cells were dropped by body virtualization),
+   * so wide grouped/pivot grids show group headers with no cells beneath.
+   *
+   * We reuse each cell's `firstLeafIndex` + `colSpan` (leaf-index range) to
+   * clip against the rendered leaf window, dropping fully-off-window cells and
+   * shrinking partially-visible ones to their visible leaves. The template
+   * frames the result with the SAME left/right spacers the leaf row uses, so
+   * everything stays pixel-aligned. When virtualization is off this is a
+   * pass-through.
+   */
+  const groupHeaderRowsWindowed = $derived.by(() => {
+    const base = groupHeaderRows;
+    if (!columnVirtualizationEnabled || base.length === 0) return base;
+    const items = renderedColumnItems;
+    if (items.length === 0) return base;
+    const winFirst = items[0]!.index;
+    const winLast = items[items.length - 1]!.index; // inclusive
+    return base.map((row) => {
+      const cells: GroupHeaderCell[] = [];
+      for (const cell of row.cells) {
+        const start = cell.firstLeafIndex;
+        const end = start + cell.colSpan; // exclusive
+        const from = Math.max(start, winFirst);
+        const to = Math.min(end, winLast + 1);
+        if (to <= from) continue; // cell is entirely outside the window
+        let widthPx = 0;
+        for (let i = from; i < to; i += 1) widthPx += getColumnWidth(allColumns[i]!.id);
+        cells.push({ ...cell, colSpan: to - from, widthPx, firstLeafIndex: from });
+      }
+      return { ...row, cells };
+    });
+  });
+
   const activeCell = $derived.by(() => {
     gridStateVersion;
     return (
@@ -2212,7 +2281,9 @@ export function createSvGridController<
     viewportVersion;
     // Narrow responsive mode pans instead of scaling, so skip fit scaling.
     if (!props.fitColumns || isNarrowResponsive) return null;
-    const cols = grid.getAllColumns().filter((c) => !hiddenColumns[c.id]);
+    // Exclude columns hidden by a collapsed group too (#57) - otherwise their
+    // widths stay in the fit distribution and leave a blank gap at the edge.
+    const cols = grid.getAllColumns().filter((c) => !hiddenColumns[c.id] && !hiddenByGroupCollapse[c.id]);
     if (!cols.length) return null;
     const rowNumberWidth = showRowNumbersEffective ? rowNumberColumnWidth : 0;
     const selectionWidth = showRowSelectionEffective ? selectionColumnWidth : 0;
@@ -2425,15 +2496,19 @@ export function createSvGridController<
     };
   });
 
-  const columnMenuFacetValues = $derived.by(() => {
-    // The funnel popover drives via `filterMenuFor`; the column menu's Filter
-    // tab drives via `columnMenuFor`. Support whichever is open.
-    const columnId = filterMenuFor ?? columnMenuFor;
-    if (!columnId) return [] as Array<string>;
+  /**
+   * Distinct values for a column, for the set-filter checklist and the
+   * `in` / `notIn` suggestions dropdown. Server-provided values win; numeric /
+   * date columns with many values collapse into range buckets; otherwise the
+   * distinct raw values are collected and sorted naturally. Callable for any
+   * column id (not just the open menu) so the filter row can drive it too.
+   */
+  function facetValuesForColumn(columnId: string): Array<string> {
+    if (!columnId) return [];
     // Server-provided distinct values win (fetched + cached above).
     if (props.serverFilterValues) return serverFacetValues[columnId] ?? [];
     const column = allColumns.find((entry) => entry.id === columnId);
-    if (!column) return [] as Array<string>;
+    if (!column) return [];
     // Range-bucketed facets for numeric / date columns with many values.
     const buckets = facetBucketsByColumn.get(columnId);
     if (buckets) return buckets.map((b) => b.label);
@@ -2445,6 +2520,14 @@ export function createSvGridController<
     return Array.from(seen).sort((a, b) =>
       a.localeCompare(b, undefined, { numeric: true }),
     );
+  }
+
+  const columnMenuFacetValues = $derived.by(() => {
+    // The funnel popover drives via `filterMenuFor`; the column menu's Filter
+    // tab drives via `columnMenuFor`. Support whichever is open.
+    const columnId = filterMenuFor ?? columnMenuFor;
+    if (!columnId) return [] as Array<string>;
+    return facetValuesForColumn(columnId);
   });
 
   const columnMenuVisibleFacets = $derived.by(() => {
@@ -2455,6 +2538,20 @@ export function createSvGridController<
     );
   });
 
+  // Distinct values offered in the `in` / `notIn` suggestions dropdown for the
+  // active chip input, narrowed by whatever the user has typed. Capped so a
+  // high-cardinality column can't render thousands of rows into the popover.
+  const IN_SUGGEST_LIMIT = 200;
+  const inSuggestValues = $derived.by(() => {
+    if (!inSuggestFor) return [] as Array<string>;
+    const query = inSuggestQuery.trim().toLowerCase();
+    const all = facetValuesForColumn(inSuggestFor);
+    const matched = query
+      ? all.filter((value) => value.toLowerCase().includes(query))
+      : all;
+    return matched.slice(0, IN_SUGGEST_LIMIT);
+  });
+
 
 
 
@@ -2591,6 +2688,14 @@ export function createSvGridController<
     set operatorMenuFor(v) { operatorMenuFor = v as never; },
     get operatorMenuPos() { return operatorMenuPos; },
     set operatorMenuPos(v) { operatorMenuPos = v as never; },
+    get inSuggestFor() { return inSuggestFor; },
+    set inSuggestFor(v) { inSuggestFor = v as never; },
+    get inSuggestPos() { return inSuggestPos; },
+    set inSuggestPos(v) { inSuggestPos = v as never; },
+    get inSuggestQuery() { return inSuggestQuery; },
+    set inSuggestQuery(v) { inSuggestQuery = v as never; },
+    get inSuggestValues() { return inSuggestValues; },
+    get facetValuesForColumn() { return facetValuesForColumn; },
     get chooseColumnsPos() { return chooseColumnsPos; },
     set chooseColumnsPos(v) { chooseColumnsPos = v as never; },
     get contextMenuFor() { return contextMenuFor; },
@@ -2623,6 +2728,7 @@ export function createSvGridController<
     set internalColumns(v) { internalColumns = v as never; },
     get hiddenColumns() { return hiddenColumns; },
     set hiddenColumns(v) { hiddenColumns = v as never; },
+    get declaredHiddenColumns() { return declaredHiddenColumns; },
     get toggleColumnGroup() { return toggleColumnGroup; },
     get isColumnGroupCollapsed() { return isColumnGroupCollapsed; },
     get externalSortEnabled() { return externalSortEnabled; },
@@ -2637,6 +2743,7 @@ export function createSvGridController<
     get allColumns() { return allColumns; },
     get headerGroups() { return headerGroups; },
     get groupHeaderRows() { return groupHeaderRows; },
+    get groupHeaderRowsWindowed() { return groupHeaderRowsWindowed; },
     get pinnedOffsets() { return pinnedOffsets; },
     get cellPinStyle() { return cellPinStyle; },
     get isColumnPinned() { return isColumnPinned; },
@@ -2981,6 +3088,11 @@ export function createSvGridController<
     get openColumnMenu() { return openColumnMenu; },
     get openFilterMenu() { return openFilterMenu; },
     get openOperatorMenu() { return openOperatorMenu; },
+    get openInSuggest() { return openInSuggest; },
+    get closeInSuggest() { return closeInSuggest; },
+    get addFilterToken() { return addFilterToken; },
+    get removeFilterToken() { return removeFilterToken; },
+    get toggleFilterToken() { return toggleFilterToken; },
     get sortColumnFromMenu() { return sortColumnFromMenu; },
     get clearColumnSort() { return clearColumnSort; },
     get groupByColumnFromMenu() { return groupByColumnFromMenu; },
@@ -3007,12 +3119,12 @@ export function createSvGridController<
   const { showTooltipFor, hideTooltip, flushScheduledScrollSync, scheduleScrollSync, onBodyScroll } = createScrollSync<TFeatures, TData>(ctx);
   const { onGridKeyDown, onWindowKeydown, onHeaderSortClick } = createKeyboard<TFeatures, TData>(ctx);
   const { computeSummaries, hasRenderedColumn } = createSummaries<TFeatures, TData>(ctx);
-  const { updateFilterRow, updateFilterOperator, updateFilterMenuValue, updateFilterMenuValueTo, toggleCheckboxWithKeyboard, isColumnFiltered, closeMenus, openChooseColumns, openColumnMenu, openFilterMenu, openOperatorMenu, sortColumnFromMenu, clearColumnSort, groupByColumnFromMenu, clearGroupingFromMenu, isFacetChecked, toggleFacetValue, isAllFacetsChecked, toggleAllFacets, clearColumnFilter, changePage, goToPage, setPageSize, openContextMenu, closeContextMenu, contextMenuItems, saveComment, removeComment, closeCommentEditor } = createMenus<TFeatures, TData>(ctx);
+  const { updateFilterRow, updateFilterOperator, updateFilterMenuValue, updateFilterMenuValueTo, addFilterToken, removeFilterToken, toggleFilterToken, toggleCheckboxWithKeyboard, isColumnFiltered, closeMenus, openInSuggest, closeInSuggest, openChooseColumns, openColumnMenu, openFilterMenu, openOperatorMenu, sortColumnFromMenu, clearColumnSort, groupByColumnFromMenu, clearGroupingFromMenu, isFacetChecked, toggleFacetValue, isAllFacetsChecked, toggleAllFacets, clearColumnFilter, changePage, goToPage, setPageSize, openContextMenu, closeContextMenu, contextMenuItems, saveComment, removeComment, closeCommentEditor } = createMenus<TFeatures, TData>(ctx);
   const { cellConditionalFormat, computeRowClass, computeCellClass, computeCellTooltip, computeCellValidity, computeCellNote, getColumnEditorOptions, formatListCellValue, formatCellValue, formatPinnedValue, computePinnedCellClass } = createCellRender<TFeatures, TData>(ctx);
   const { isCellEditable, isCellEditableAt, getRowColumnValue, getCellDisplayValue, startEditingWithChar, startEditing, stopEditing, startFullRowEdit, setFullRowDraft, commitFullRowEdit, cancelFullRowEdit, saveEditingCell, applyHistoryStep, updateEditingCellValue, onEditorKeyDown, focusOnMount, onCellDoubleClick, pasteFromClipboard, onGridPaste } = createEditing<TFeatures, TData>(ctx);
   const { isRowSelected, toggleRowSelectionById, toggleSelectAllRows, setActiveCell, scrollActiveCellIntoView, setSelection, extendSelection, isCellInSelectedRange, getCellRangeEdges, getSelectionRects, isInFillPreview, fillMarqueeEdges, findColumnById, onCellPointerDown, onCellPointerEnter, endDragSelection, onWindowPointerMove, onCellClick, emitCellDoubleClick } = createSelection<TFeatures, TData>(ctx);
   const { cellPinStyle, isColumnPinned, getCurrentColumnOrder, emitColumnOrder, setColumnOrderInternal, applyColumnDrop, onColumnHeaderDragStart, onColumnHeaderDragOver, onColumnHeaderDragLeave, onColumnHeaderDrop, onColumnHeaderDragEnd, pinColumnLeft, pinColumnRight, unpinColumn, toggleColumnVisibleInPanel, moveColumnInPanel, toggleGroupInPanel, getColumnBaseWidth, getColumnWidth, startColumnResize, onColumnResizeMove, endColumnResize, measureText, autosizeColumn, autosizeAllColumns, resetColumns } = createColumns<TFeatures, TData>(ctx);
-  const { onRowDragStart, onRowDragOver, onRowDragLeave, onRowDrop, onRowsContainerDragOver, onRowsContainerDrop, onRowDragEnd } = createRowDrag<TFeatures, TData>(ctx);
+  const { onRowDragStart, onRowDragOver, onRowDragLeave, onRowDrop, onRowsContainerDragOver, onRowsContainerDrop, onRowDragEnd, destroyRowDrag } = createRowDrag<TFeatures, TData>(ctx);
   const { register: registerAlignedGrid, broadcastScroll: broadcastAlignedScroll, broadcastWidths: broadcastAlignedWidths } = createAlignedGrids<TFeatures, TData>(ctx);
   const { buildApi } = createGridApi<TFeatures, TData>(ctx);
   const { readCellRaw, writeCellRaw, applyFillPattern, clearSelectedCellValues, startFillDrag, onFillPointerMove, onFillPointerUp, toggleBooleanCell, copySelectionToClipboard, clearSelectedCells, cutSelectionToClipboard } = createClipboard(ctx);
@@ -3030,5 +3142,17 @@ export function createSvGridController<
     broadcastAlignedWidths();
   });
 
+  // Unmount teardown. Reads no reactive state, so the cleanup runs once on
+  // destroy - tearing down an in-flight column resize (its document pointer
+  // listeners, #58), a pending tooltip timer (#64), and any managed row drag
+  // this grid still owns (#68). Each of these is a no-op when idle.
+  $effect(() => {
+    return () => {
+      endColumnResize();
+      hideTooltip();
+      destroyRowDrag();
+    };
+  });
+
   return ctx;
 }

package/src/SvGrid.css

@@ -485,13 +485,28 @@
   justify-content: flex-end;
 }
 /* The custom vertical scrollbar overlays the right 16px of the viewport
-   (absolute, z-index 40). Nudge the last column's right-aligned content in by
-   that width when the scrollbar is visible, so numbers/values aren't hidden
-   underneath it. Left/center content already clears the right edge. */
-.sv-grid-has-vscroll .sv-grid-table tr > :last-child.sv-grid-cell[data-align="right"],
-.sv-grid-has-vscroll .sv-grid-table tr > :last-child.sv-grid-column[data-align="right"] {
+   (absolute, z-index 40) and does NOT shrink the scroll container's
+   clientWidth. Two cases keep the last column clear of it:
+
+   1. No horizontal overflow (content fits, nothing to scroll): nudge the last
+      column's right-aligned content in by the scrollbar width so numbers
+      aren't hidden underneath it. Left/center content already clears it.
+   2. Horizontal overflow: there's nothing to nudge (you scroll to the end and
+      the last 16px sit under the bar with no room left). Instead reserve a
+      trailing gutter on the scroll container so you can scroll the last column
+      fully out from under the overlay. See `.sv-grid-has-vscroll.sv-grid-has-hscroll`. */
+.sv-grid-has-vscroll:not(.sv-grid-has-hscroll) .sv-grid-table tr > :last-child.sv-grid-cell[data-align="right"],
+.sv-grid-has-vscroll:not(.sv-grid-has-hscroll) .sv-grid-table tr > :last-child.sv-grid-column[data-align="right"] {
   padding-right: calc(var(--sg-cell-px, 7px) + 16px);
 }
+/* Case 2: reserve the overlay scrollbar's width as end-of-scroll space so the
+   final column can be scrolled clear of the vertical scrollbar. Modern browsers
+   include a scroll container's inline-end padding in its scrollable overflow;
+   the custom scrollbars are siblings of this container, so their layout is
+   unaffected. */
+.sv-grid-container.sv-grid-has-vscroll.sv-grid-has-hscroll {
+  padding-right: 16px;
+}
 .sv-grid-column[data-align="center"] .sv-grid-header-sort {
   justify-content: center;
 }
@@ -857,6 +872,11 @@
   flex-direction: row;
   align-items: center;
   gap: 4px;
+  box-sizing: border-box;
+  /* Inset the operator button + input from the cell edges so the filter row
+     lines up with the header label / body text (same --sg-cell-px gutter) and
+     isn't cramped against the top/side borders. */
+  padding: 5px var(--sg-filter-cell-px, var(--sg-cell-px, 7px));
 }
 
 .sv-grid-filter-operator {
@@ -871,6 +891,100 @@
   box-sizing: border-box;
 }
 
+/* Invalid regex pattern: flag the input so the user knows the half-typed
+   pattern isn't being applied (it matches nothing until it compiles). */
+.sv-grid-filter-value.sv-grid-filter-value-invalid,
+.sv-grid-tp-filter-input.sv-grid-filter-value-invalid {
+  border-color: var(--sg-danger, #e5484d) !important;
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sg-danger, #e5484d) 45%, transparent);
+}
+
+/* In / Not-in chip (token) input: chips + a flex-growing text box share one
+   bordered control that reads like a single field. */
+.sv-grid-filter-chips {
+  flex: 3 1 0;
+  min-width: 0;
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 3px;
+  padding: 2px 4px;
+  border: 1px solid var(--sg-input-border, #8794a8);
+  border-radius: 4px;
+  background: var(--sg-input-bg, #fff);
+  overflow: hidden;
+}
+
+/* A few chips stay visible; the rest collapse into a non-wrapping "+N" pill
+   that opens the value dropdown (select / unselect). */
+.sv-grid-filter-chip .sv-grid-filter-chip-label {
+  max-width: 84px;
+}
+.sv-grid-filter-chip-more {
+  flex: none;
+  border: 0;
+  cursor: pointer;
+  font: inherit;
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--sg-text, inherit);
+}
+.sv-grid-filter-chip-more:hover {
+  background: color-mix(in srgb, var(--sg-accent, #0b63f3) 26%, transparent);
+}
+.sv-grid-filter-chips:focus-within {
+  border-color: var(--sg-accent, #0b63f3);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sg-accent, #0b63f3) 45%, transparent);
+}
+.sv-grid-filter-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  max-width: 120px;
+  padding: 0 2px 0 6px;
+  border-radius: 3px;
+  font-size: 11px;
+  line-height: 16px;
+  background: color-mix(in srgb, var(--sg-accent, #0b63f3) 16%, transparent);
+  color: var(--sg-text, inherit);
+}
+.sv-grid-filter-chip-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sv-grid-filter-chip-x {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  padding: 0;
+  border: 0;
+  border-radius: 3px;
+  background: transparent;
+  color: inherit;
+  font-size: 13px;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.7;
+}
+.sv-grid-filter-chip-x:hover {
+  opacity: 1;
+  background: color-mix(in srgb, var(--sg-accent, #0b63f3) 28%, transparent);
+}
+.sv-grid-filter-chips .sv-grid-filter-chip-input {
+  flex: 1 1 14px;
+  min-width: 14px;
+  border: 0 !important;
+  padding: 0 2px;
+  background: transparent;
+  box-shadow: none !important;
+  outline: none;
+}
+
 /* Brief glow used when the user clicks the funnel icon while the grid
    is in row-filter mode - draws attention to where the input is so
    the click isn't a no-op. */
@@ -1220,6 +1334,22 @@ select.sv-grid-fr-editor {
   width: 100%;
   font-size: 0.8125rem;
 }
+/* The global "Filter all rows" search: a labelled input bar above the grid. Ships
+   styled so it never renders as a bare, unpositioned text label + input. */
+.sv-grid-global-filter {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+  font-size: 0.8125rem;
+  font-weight: 550;
+  color: var(--sg-muted, #64748b);
+}
+.sv-grid-global-filter input {
+  height: 30px;
+  min-width: 220px;
+  font-size: 0.8125rem;
+}
 .sv-grid-column-filter::placeholder,
 .sv-grid-filter-value::placeholder,
 .sv-grid-menu-search::placeholder,
@@ -1752,6 +1882,38 @@ select.sv-grid-fr-editor {
   background: var(--sg-row-hover-bg, #eef2f8);
 }
 
+/* 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. */
+.sv-grid-menu.sv-grid-in-suggest {
+  min-width: 140px;
+  max-width: 260px;
+  max-height: 220px;
+  overflow-y: auto;
+  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);
   color: var(--sg-accent, #0b63f3);
@@ -2376,6 +2538,32 @@ select.sv-grid-fr-editor {
   color: var(--sg-fg, #101828);
 }
 
+/* Placeholder shown when `scheduler` is set but the enterprise renderer that
+   powers the calendar view has not been registered. */
+.sv-grid-scheduler-upsell {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: flex-start;
+  justify-content: center;
+  height: 100%;
+  padding: 24px;
+  text-align: left;
+  border: 1px dashed var(--sg-border, #e4e7ec);
+  border-radius: var(--sg-radius, 8px);
+  background: color-mix(in srgb, var(--sg-fg, #1f2937) 5%, transparent);
+  color: color-mix(in srgb, var(--sg-fg, #101828) 70%, transparent);
+}
+.sv-grid-scheduler-upsell strong { font-size: 0.95rem; }
+.sv-grid-scheduler-upsell p { margin: 0; font-size: 0.85rem; max-width: 42ch; }
+.sv-grid-scheduler-upsell code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.82em;
+  padding: 1px 4px;
+  border-radius: 4px;
+  background: color-mix(in srgb, var(--sg-fg, #101828) 8%, transparent);
+}
+
 /* ===================================================================
    Integrated chart panel (the `charting` prop)
    =================================================================== */