@svgrid/grid 2.1.21 → 2.1.23

package/README.md

@@ -118,9 +118,16 @@ Compatibility aliases are provided for the framework-neutral names: `createGrid`
 
 SvGrid publishes an [MCP server](https://www.npmjs.com/package/@svgrid/mcp) and `llms.txt` / `llms-full.txt`, so Claude, Cursor, and Zed answer with accurate, version-pinned APIs and all 280+ demo sources as context - not hallucinated methods.
 
-## Enterprise
+## Enterprise features
 
-The MIT core is free for any use, including commercial. The optional [`@svgrid/enterprise`](https://www.npmjs.com/package/@svgrid/enterprise) pack adds Excel / PDF / CSV / TSV / HTML export, paginated print, pivot tables with a drag-and-drop Designer, and AI helpers. OSS projects receive an Enterprise key free. See [Pricing](https://svgrid.com/pricing).
+The MIT core is free for any use, including commercial, with **no feature gating** - sorting, filtering, editing, virtualization, and the **server-side row model** (sort / filter / group pushdown) all ship in the free package. The optional [`@svgrid/enterprise`](https://www.npmjs.com/package/@svgrid/enterprise) pack layers on the export- and analytics-heavy features teams tend to need last:
+
+- **Excel / PDF / CSV / TSV / HTML export** plus paginated print.
+- **Pivot tables** with a drag-and-drop pivot Designer.
+- **Scheduler / calendar view** and Kanban roll-ups for larger deployments.
+- **AI helpers** and SvGrid Studio for data-app scaffolding.
+
+OSS projects receive an Enterprise key free. See the [Enterprise docs](https://svgrid.com/docs) and [Pricing](https://svgrid.com/pricing).
 
 ## Documentation
 

package/dist/DockNodeView.svelte

@@ -0,0 +1,306 @@
+<script lang="ts">
+  /**
+   * DockNodeView - the recursive renderer for one node of a <SvDockLayout> tree.
+   * A `group` becomes a flex row/column of children with draggable splitters
+   * between them; a `tabs` leaf becomes a tab strip over the active pane's
+   * content. All tree edits go through the pure `dock-model`; this file only
+   * paints and wires gestures. It renders itself for nested groups.
+   */
+  import { getContext } from 'svelte'
+  import Self from './DockNodeView.svelte'
+  import { DOCK_CONTEXT, type DockContext } from './dock-context'
+  import { leafMinSize, type DockNode, type DockGroup } from './dock-model'
+
+  let { node }: { node: DockNode } = $props()
+
+  const ctx = getContext<DockContext>(DOCK_CONTEXT)
+
+  // ---- splitter drag (group children resize) ----------------------------
+  let groupEl = $state<HTMLElement | null>(null)
+
+  /** A child's minimum size (px): a leaf's largest per-pane `minSize`, else 0. */
+  function nodeMin(n: DockNode | undefined): number {
+    return n && n.type === 'tabs' ? leafMinSize(n) : 0
+  }
+
+  function onSplitterDown(e: PointerEvent, group: DockGroup, index: number) {
+    if (e.button !== 0 || !groupEl) return
+    e.preventDefault()
+    const vertical = group.direction === 'column'
+    const rect = groupEl.getBoundingClientRect()
+    const total = vertical ? rect.height : rect.width
+    if (total <= 0) return
+    const startSizes = group.sizes.slice()
+    const startPos = vertical ? e.clientY : e.clientX
+    // Only the two panes adjacent to this gutter move; the rest stay put. Each
+    // honors its own minimum (a leaf's largest per-pane `minSize`, else global).
+    const a = index
+    const b = index + 1
+    const minA = Math.max(ctx.minSize(), nodeMin(group.children[a])) / total
+    const minB = Math.max(ctx.minSize(), nodeMin(group.children[b])) / total
+    const pairTotal = startSizes[a]! + startSizes[b]!
+
+    const onMove = (ev: PointerEvent) => {
+      const delta = ((vertical ? ev.clientY : ev.clientX) - startPos) / total
+      let fa = Math.min(Math.max(startSizes[a]! + delta, minA), pairTotal - minB)
+      const next = startSizes.slice()
+      next[a] = fa
+      next[b] = pairTotal - fa
+      ctx.resize(group.id, next)
+    }
+    const onUp = () => {
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onUp)
+      document.body.style.userSelect = ''
+      document.body.style.cursor = ''
+    }
+    document.body.style.userSelect = 'none'
+    document.body.style.cursor = vertical ? 'row-resize' : 'col-resize'
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp)
+  }
+</script>
+
+{#if node.type === 'group'}
+  <div
+    class="sv-dock__group sv-dock__group--{node.direction}"
+    bind:this={groupEl}
+    role="group"
+  >
+    {#each node.children as child, i (child.id)}
+      <div class="sv-dock__cell" style:flex-grow={node.sizes[i] ?? 1} style:flex-basis="0">
+        <Self node={child} />
+      </div>
+      {#if i < node.children.length - 1}
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div
+          class="sv-dock__splitter sv-dock__splitter--{node.direction}"
+          role="separator"
+          aria-orientation={node.direction === 'column' ? 'horizontal' : 'vertical'}
+          onpointerdown={(e) => onSplitterDown(e, node as DockGroup, i)}
+        ></div>
+      {/if}
+    {/each}
+  </div>
+{:else}
+  {@const active = node.panes[node.active] ?? node.panes[0]}
+  {@const reorder = ctx.reorderTarget?.() ?? null}
+  {@const reorderHere = reorder && reorder.tabsId === node.id ? reorder.index : -1}
+  {@const hp = ctx.headerPosition?.() ?? 'top'}
+  <!-- A single-pane leaf in an auto-hide fly-out drops its (redundant with the edge strip)
+       tab button, leaving just the leaf actions (pin). -->
+  {@const bareSingle = !!ctx.hideSingleTab?.() && node.panes.length === 1}
+  <div class="sv-dock__leaf sv-dock__leaf--h-{hp}" class:is-focused={ctx.focusedLeaf?.() === node.id} data-dock-tabs={node.id}>
+    <div class="sv-dock__tabstrip" class:is-bare={bareSingle} role="tablist">
+      {#if !bareSingle}
+      {#each node.panes as p, i (p.id)}
+        {#if reorderHere === i}<div class="sv-dock__ins" aria-hidden="true"></div>{/if}
+        <div
+          class="sv-dock__tab"
+          class:is-active={i === node.active}
+          role="tab"
+          aria-selected={i === node.active}
+          tabindex={i === node.active ? 0 : -1}
+          data-dock-tab={p.id}
+          data-tab-index={i}
+          onpointerdown={(e) => {
+            if (e.button === 0) { ctx.activate(node.id, i); ctx.beginDrag(e, p.id, node.id) }
+          }}
+          onkeydown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); ctx.activate(node.id, i) }
+          }}
+        >
+          <span class="sv-dock__tab-label">{p.title}</span>
+          {#if p.closable !== false}
+            <button
+              type="button"
+              class="sv-dock__tab-close"
+              aria-label={`Close ${p.title}`}
+              title="Close"
+              onpointerdown={(e) => e.stopPropagation()}
+              onclick={(e) => { e.stopPropagation(); ctx.close(p.id) }}
+            >&times;</button>
+          {/if}
+        </div>
+      {/each}
+      {#if reorderHere === node.panes.length}<div class="sv-dock__ins" aria-hidden="true"></div>{/if}
+      {/if}
+      {#if ctx.leafActions}
+        <div class="sv-dock__leafctl">{@render ctx.leafActions(node)}</div>
+      {/if}
+    </div>
+
+    {#if ctx.keepAlive?.()}
+      <!-- Keep every tab mounted; hide the inactive ones so their state persists. -->
+      {#each node.panes as p (p.id)}
+        <div class="sv-dock__content" role="tabpanel" style:display={p.id === active?.id ? '' : 'none'}>
+          {@render ctx.pane(p)}
+        </div>
+      {/each}
+    {:else}
+      <!-- Only the active tab renders; `{#key}` remounts on switch so a pane's
+           content never bleeds into the next (use keepAlive to persist state). -->
+      {#if active}
+        {#key active.id}
+          <div class="sv-dock__content" role="tabpanel">{@render ctx.pane(active)}</div>
+        {/key}
+      {/if}
+    {/if}
+
+    {#if ctx.dropTarget()?.tabsId === node.id}
+      {@const dt = ctx.dropTarget()!}
+      {@const zone = dt.zone}
+      {@const centerOnly = dt.centerOnly === true}
+      <div class="sv-dock__dropzone" aria-hidden="true">
+        <!-- Preview: the region the panel will occupy (only when over a chip). -->
+        {#if zone}<div class="sv-dock__drop-hint sv-dock__drop-hint--{zone}"></div>{/if}
+        <!-- Guide: dock targets. Drop ON a chip to dock; off it, the tab floats. -->
+        <div class="sv-dock__guide" class:is-center-only={centerOnly}>
+          {#if !centerOnly}
+            <div class="sv-dock__guide-cell sv-dock__guide-cell--top" class:is-on={zone === 'top'}></div>
+          {/if}
+          <div class="sv-dock__guide-row">
+            {#if !centerOnly}
+              <div class="sv-dock__guide-cell sv-dock__guide-cell--left" class:is-on={zone === 'left'}></div>
+            {/if}
+            <div class="sv-dock__guide-cell sv-dock__guide-cell--center" class:is-on={zone === 'center'}></div>
+            {#if !centerOnly}
+              <div class="sv-dock__guide-cell sv-dock__guide-cell--right" class:is-on={zone === 'right'}></div>
+            {/if}
+          </div>
+          {#if !centerOnly}
+            <div class="sv-dock__guide-cell sv-dock__guide-cell--bottom" class:is-on={zone === 'bottom'}></div>
+          {/if}
+        </div>
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .sv-dock__group { display: flex; width: 100%; height: 100%; min-width: 0; min-height: 0; }
+  .sv-dock__group--row { flex-direction: row; }
+  .sv-dock__group--column { flex-direction: column; }
+  .sv-dock__cell { min-width: 0; min-height: 0; overflow: hidden; display: flex; }
+  .sv-dock__cell > :global(*) { flex: 1; min-width: 0; min-height: 0; }
+
+  .sv-dock__splitter { flex: none; background: var(--sg-border, #e2e8f0); position: relative; touch-action: none; }
+  .sv-dock__splitter::after { content: ''; position: absolute; inset: -3px; }
+  .sv-dock__splitter--row { width: 4px; cursor: col-resize; }
+  .sv-dock__splitter--column { height: 4px; cursor: row-resize; }
+  .sv-dock__splitter:hover { background: var(--sg-accent, #2563eb); }
+
+  .sv-dock__leaf {
+    position: relative; display: flex; flex-direction: column; width: 100%; height: 100%;
+    min-width: 0; min-height: 0; background: var(--sg-bg, #fff);
+    border: 1px solid var(--sg-border, #e2e8f0); border-radius: 8px; overflow: hidden;
+  }
+  .sv-dock__tabstrip {
+    display: flex; flex: none; gap: 2px; padding: 4px 4px 0; overflow-x: auto;
+    background: var(--sg-header-bg, #f6f7f9); border-bottom: 1px solid var(--sg-border, #e2e8f0);
+  }
+  /* Focused leaf: accent-tinted header + active-tab underline. */
+  .sv-dock__leaf.is-focused > .sv-dock__tabstrip { background: color-mix(in srgb, var(--sg-accent, #2563eb) 8%, var(--sg-header-bg, #f6f7f9)); }
+  .sv-dock__leaf.is-focused .sv-dock__tab.is-active { box-shadow: inset 0 -2px 0 var(--sg-accent, #2563eb); }
+  /* Header on the bottom: content first, strip below with flipped chrome. */
+  .sv-dock__leaf--h-bottom { flex-direction: column-reverse; }
+  .sv-dock__leaf--h-bottom .sv-dock__tabstrip { padding: 0 4px 4px; border-bottom: none; border-top: 1px solid var(--sg-border, #e2e8f0); }
+  .sv-dock__leaf--h-bottom .sv-dock__tab { border-radius: 0 0 7px 7px; border-top: none; border-bottom: 1px solid transparent; }
+  .sv-dock__leaf--h-bottom .sv-dock__tab.is-active { border-color: var(--sg-border, #e2e8f0); border-top: none; }
+
+  /* Header on the left/right: a VERTICAL tab strip beside the content. */
+  .sv-dock__leaf--h-left { flex-direction: row; }
+  .sv-dock__leaf--h-right { flex-direction: row-reverse; }
+  .sv-dock__leaf--h-left .sv-dock__tabstrip,
+  .sv-dock__leaf--h-right .sv-dock__tabstrip {
+    flex-direction: column; overflow-x: hidden; overflow-y: auto; padding: 4px 0 4px 4px;
+    border-bottom: none;
+  }
+  .sv-dock__leaf--h-left .sv-dock__tabstrip { border-right: 1px solid var(--sg-border, #e2e8f0); }
+  .sv-dock__leaf--h-right .sv-dock__tabstrip { padding: 4px 4px 4px 0; border-left: 1px solid var(--sg-border, #e2e8f0); }
+  .sv-dock__leaf--h-left .sv-dock__tab,
+  .sv-dock__leaf--h-right .sv-dock__tab {
+    writing-mode: vertical-rl; padding: 10px 6px; border-radius: 7px 0 0 7px; border-bottom: 1px solid transparent;
+    max-height: 200px; overflow: hidden;
+  }
+  .sv-dock__leaf--h-right .sv-dock__tab { border-radius: 0 7px 7px 0; }
+  .sv-dock__leaf--h-left .sv-dock__tab.is-active,
+  .sv-dock__leaf--h-right .sv-dock__tab.is-active { border-color: var(--sg-border, #e2e8f0); }
+  /* Stack controls go to the bottom of a vertical strip. */
+  .sv-dock__leaf--h-left .sv-dock__leafctl,
+  .sv-dock__leaf--h-right .sv-dock__leafctl { flex-direction: column; margin-inline-start: 0; margin-top: auto; padding: 2px 0; align-self: center; }
+  /* Reorder insertion line runs horizontally between stacked tabs. */
+  .sv-dock__leaf--h-left .sv-dock__ins,
+  .sv-dock__leaf--h-right .sv-dock__ins { width: auto; height: 3px; align-self: stretch; margin: 0 3px; }
+  .sv-dock__tab {
+    display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; cursor: grab;
+    font-size: 12.5px; font-weight: 600; color: var(--sg-muted, #64748b); white-space: nowrap;
+    border: 1px solid transparent; border-bottom: none; border-radius: 7px 7px 0 0; user-select: none;
+    touch-action: none;
+  }
+  .sv-dock__tab:hover { color: var(--sg-fg, #0f172a); }
+  .sv-dock__tab.is-active {
+    color: var(--sg-fg, #0f172a); background: var(--sg-bg, #fff);
+    border-color: var(--sg-border, #e2e8f0);
+  }
+  .sv-dock__tab-close {
+    display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
+    padding: 0; font-size: 15px; line-height: 1; color: var(--sg-muted, #94a3b8); cursor: pointer;
+    background: none; border: none; border-radius: 4px;
+  }
+  .sv-dock__tab-close:hover { background: var(--sg-row-hover-bg, #f1f5f9); color: var(--sg-danger, #dc2626); }
+  /* Stack-header controls, pinned to the right of the tab strip. */
+  .sv-dock__leafctl { margin-inline-start: auto; align-self: center; display: flex; align-items: center; gap: 1px; padding: 0 2px 3px; }
+  .sv-dock__content { flex: 1; min-height: 0; overflow: auto; }
+
+  /* Tab-reorder insertion line. */
+  .sv-dock__ins {
+    flex: none; align-self: stretch; width: 3px; margin: 3px 0; border-radius: 2px;
+    background: var(--sg-accent, #2563eb); box-shadow: 0 0 0 1px color-mix(in srgb, var(--sg-accent, #2563eb) 40%, transparent);
+  }
+
+  /* Drop-zone indicators shown on the leaf under the pointer while dragging. */
+  .sv-dock__dropzone { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
+  /* Ring around the whole targeted leaf, so which pane you're over is obvious. */
+  .sv-dock__dropzone::before {
+    content: ''; position: absolute; inset: 2px; border-radius: 7px;
+    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--sg-accent, #2563eb) 32%, transparent);
+  }
+  .sv-dock__drop-hint {
+    position: absolute; background: color-mix(in srgb, var(--sg-accent, #2563eb) 22%, transparent);
+    border: 2px solid var(--sg-accent, #2563eb); border-radius: 6px; transition: inset 90ms ease;
+  }
+  .sv-dock__drop-hint--center { inset: 8px; }
+  .sv-dock__drop-hint--left { inset: 4px 50% 4px 4px; }
+  .sv-dock__drop-hint--right { inset: 4px 4px 4px 50%; }
+  .sv-dock__drop-hint--top { inset: 4px 4px 50% 4px; }
+  .sv-dock__drop-hint--bottom { inset: 50% 4px 4px 4px; }
+
+  /* The 5-direction dock guide (VS-style): a plus of targets, active one lit. */
+  .sv-dock__guide {
+    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
+    display: flex; flex-direction: column; align-items: center; gap: 4px;
+    padding: 6px; border-radius: 10px;
+    background: color-mix(in srgb, var(--sg-bg, #fff) 82%, transparent);
+    box-shadow: 0 6px 20px -6px rgba(15,23,42,0.45); border: 1px solid var(--sg-border, #e2e8f0);
+  }
+  .sv-dock__guide-row { display: flex; gap: 4px; }
+  .sv-dock__guide-cell {
+    width: 26px; height: 26px; border-radius: 6px; position: relative;
+    background: var(--sg-header-bg, #f1f5f9); border: 1px solid var(--sg-border, #cbd5e1);
+  }
+  .sv-dock__guide-cell::after {
+    content: ''; position: absolute; border-radius: 3px;
+    background: color-mix(in srgb, var(--sg-accent, #2563eb) 55%, transparent);
+  }
+  .sv-dock__guide-cell--center::after { inset: 5px; }
+  .sv-dock__guide-cell--left::after { inset: 5px 13px 5px 5px; }
+  .sv-dock__guide-cell--right::after { inset: 5px 5px 5px 13px; }
+  .sv-dock__guide-cell--top::after { inset: 5px 5px 13px 5px; }
+  .sv-dock__guide-cell--bottom::after { inset: 13px 5px 5px 5px; }
+  .sv-dock__guide-cell.is-on {
+    background: color-mix(in srgb, var(--sg-accent, #2563eb) 18%, var(--sg-bg, #fff));
+    border-color: var(--sg-accent, #2563eb);
+  }
+  .sv-dock__guide-cell.is-on::after { background: var(--sg-accent, #2563eb); }
+</style>

package/dist/DockNodeView.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type DockNode } from './dock-model';
+type $$ComponentProps = {
+    node: DockNode;
+};
+declare const DockNodeView: import("svelte").Component<$$ComponentProps, {}, "">;
+type DockNodeView = ReturnType<typeof DockNodeView>;
+export default DockNodeView;

package/dist/DockPopoutHost.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  /**
+   * DockPopoutHost - the tiny root mounted into a popped-out browser window. It
+   * just renders the manager's `pane` snippet for the popped pane, so a pop-out
+   * shows the exact same content as the docked view.
+   */
+  import type { Snippet } from 'svelte'
+  import type { DockPane } from './dock-model'
+
+  let { pane, paneData }: { pane: Snippet<[DockPane]>; paneData: DockPane } = $props()
+</script>
+
+<div class="sv-popout-host">{@render pane(paneData)}</div>
+
+<style>
+  .sv-popout-host { width: 100%; height: 100vh; overflow: auto; box-sizing: border-box; }
+</style>

package/dist/DockPopoutHost.svelte.d.ts

@@ -0,0 +1,14 @@
+/**
+   * DockPopoutHost - the tiny root mounted into a popped-out browser window. It
+   * just renders the manager's `pane` snippet for the popped pane, so a pop-out
+   * shows the exact same content as the docked view.
+   */
+import type { Snippet } from 'svelte';
+import type { DockPane } from './dock-model';
+type $$ComponentProps = {
+    pane: Snippet<[DockPane]>;
+    paneData: DockPane;
+};
+declare const DockPopoutHost: import("svelte").Component<$$ComponentProps, {}, "">;
+type DockPopoutHost = ReturnType<typeof DockPopoutHost>;
+export default DockPopoutHost;

package/dist/GridMenus.svelte

@@ -2,6 +2,7 @@
   import {
     applyExcelFilter,
     normalizeForFilter,
+    splitInTokens,
     createColumnVirtualizer,
     createCoreRowModel,
     createExpandedRowModel,
@@ -124,6 +125,12 @@
   const operatorsForColumn = $derived(ctrl.operatorsForColumn);
   const defaultOperatorFor = $derived(ctrl.defaultOperatorFor);
   const operatorLabelFor = $derived(ctrl.operatorLabelFor);
+  const filterRowValues = $derived(ctrl.filterRowValues);
+  const inSuggestFor = $derived(ctrl.inSuggestFor);
+  const inSuggestPos = $derived(ctrl.inSuggestPos);
+  const inSuggestValues = $derived(ctrl.inSuggestValues);
+  const toggleFilterToken = $derived(ctrl.toggleFilterToken);
+  const facetValuesForColumn = $derived(ctrl.facetValuesForColumn);
 
   // Patch a column's menu filter (used for the optional 2nd condition + join
   // of multi-condition filtering). Merges into the existing entry, creating a
@@ -135,6 +142,22 @@
   }
   const isColumnFiltered = $derived(ctrl.isColumnFiltered);
   const closeMenus = $derived(ctrl.closeMenus);
+
+  // Column/filter/operator menus are position:fixed and anchored to their
+  // trigger by a one-time measurement taken when they open. On scroll they'd
+  // otherwise detach and float over the wrong place (#88), so close them on any
+  // scroll (capture phase, to catch inner scroll containers) or resize.
+  $effect(() => {
+    if (!(columnMenuFor || filterMenuFor || operatorMenuFor || chooseColumnsPos)) return;
+    const close = () => closeMenus();
+    window.addEventListener('scroll', close, true);
+    window.addEventListener('resize', close);
+    return () => {
+      window.removeEventListener('scroll', close, true);
+      window.removeEventListener('resize', close);
+    };
+  });
+
   const autosizeColumn = $derived(ctrl.autosizeColumn);
   const autosizeAllColumns = $derived(ctrl.autosizeAllColumns);
   const resetColumns = $derived(ctrl.resetColumns);
@@ -202,14 +225,30 @@
           <option value={option.value}>{operatorLabelFor(option, menuColumn)}</option>
         {/each}
       </select>
-      {#if menuActiveOperator !== "isBlank"}
+      {#if menuActiveOperator !== "isBlank" && menuActiveOperator !== "isNotBlank"}
+        {@const isSetOp =
+          menuActiveOperator === "in" || menuActiveOperator === "notIn"}
         <input
           class="sv-grid-menu-condition-value"
-          type={menuInputType}
+          type={menuActiveOperator === "regex" ? "text" : menuInputType}
+          list={isSetOp ? `sv-in-list-${colId}` : undefined}
           value={filterMenuValues[colId]?.value ?? ""}
-          placeholder={menuActiveOperator === "between" ? "From" : "Filter value..."}
+          placeholder={menuActiveOperator === "between"
+            ? "From"
+            : isSetOp
+              ? "value, value..."
+              : menuActiveOperator === "regex"
+                ? "Pattern..."
+                : "Filter value..."}
           oninput={(event) => updateFilterMenuValue(colId, (event.currentTarget as HTMLInputElement).value)}
         />
+        {#if isSetOp}
+          <datalist id={`sv-in-list-${colId}`}>
+            {#each facetValuesForColumn(colId).slice(0, 200) as v (v)}
+              <option value={v}></option>
+            {/each}
+          </datalist>
+        {/if}
         {#if menuActiveOperator === "between"}
           <input
             class="sv-grid-menu-condition-value"
@@ -585,6 +624,47 @@
     </div>
   {/if}
 
+  {#if inSuggestFor}
+    {@const suggestColId = inSuggestFor}
+    {@const selectedTokens = new Set(
+      splitInTokens(filterRowValues[suggestColId] ?? ""),
+    )}
+    <!-- Value suggestions for an `in` / `notIn` chip input. Items use
+         `onmousedown` (preventDefault) so clicking one keeps focus in the
+         chip input and the dropdown stays open for multi-select; the input's
+         own blur handler closes it when focus truly leaves. -->
+    <div
+      class="sv-grid-menu sv-grid-in-suggest"
+      role="listbox"
+      aria-multiselectable="true"
+      aria-label="Filter values"
+      style={`left: ${inSuggestPos.x}px; top: ${inSuggestPos.y}px;`}
+    >
+      {#each inSuggestValues as value (value)}
+        {@const checked = selectedTokens.has(value)}
+        <button
+          type="button"
+          class="sv-grid-menu-item sv-grid-in-suggest-item"
+          role="option"
+          aria-selected={checked}
+          onmousedown={(event) => {
+            event.preventDefault();
+            toggleFilterToken(suggestColId, value);
+          }}
+        >
+          <span class="sv-grid-in-suggest-check" aria-hidden="true"
+            >{checked ? "✓" : ""}</span
+          >
+          <span class="sv-grid-in-suggest-label"
+            >{value === "" ? "(Blanks)" : value}</span
+          >
+        </button>
+      {:else}
+        <div class="sv-grid-facet-empty">No values</div>
+      {/each}
+    </div>
+  {/if}
+
   {#if contextMenuFor}
     <div
       class="sv-grid-menu-backdrop"

package/dist/SvAutoComplete.svelte

@@ -47,7 +47,7 @@
 
   let fieldEl = $state<HTMLInputElement | null>(null)
   let panelEl = $state<HTMLDivElement | null>(null)
-  let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false })
+  let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false, maxHeight: 0, availHeight: 0 })
 
   const ac = createAutocomplete({
     value: () => value,
@@ -66,7 +66,9 @@
 
   function updatePos() {
     if (!fieldEl) return
-    rect = anchoredRect(fieldEl.getBoundingClientRect(), { estimatedHeight: Math.min(ac.filtered.length, 8) * 34 + 8 })
+    // estimatedHeight only picks the flip direction; real max-height is availHeight
+    // below, so the panel takes its natural content height. See SvComboBox.
+    rect = anchoredRect(fieldEl.getBoundingClientRect(), { estimatedHeight: Math.min(ac.filtered.length, 8) * 34 + 12 })
   }
 
   $effect(() => {
@@ -92,7 +94,7 @@
 </SvField>
 
 {#if ac.open}
-  <div bind:this={panelEl} class="sv-ddl__panel" use:portalToBody use:popIn={{ up: rect.openUpward }} style:position="fixed" style:top={`${rect.top}px`} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} {...ac.listboxProps()}>
+  <div bind:this={panelEl} class="sv-ddl__panel" use:portalToBody use:popIn={{ up: rect.openUpward }} style:position="fixed" style:top={rect.openUpward ? undefined : `${rect.top}px`} style:bottom={rect.openUpward ? `${rect.bottom}px` : undefined} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} style:max-height={`${Math.min(rect.availHeight, 288)}px`} {...ac.listboxProps()}>
     {#each ac.filtered as opt, i (opt.value)}
       <!-- svelte-ignore a11y_click_events_have_key_events a11y_interactive_supports_focus -->
       <div class="sv-ddl__opt" class:is-active={ac.isActive(i)} {...ac.optionProps(i)}>{opt.label}</div>

package/dist/SvCarousel.svelte

@@ -13,6 +13,7 @@
    */
   import type { Snippet } from 'svelte'
   import { type EditorDir } from './editor-contract'
+  import { createCarousel } from './createCarousel.svelte'
 
   type Props = {
     count: number
@@ -41,28 +42,20 @@
     dir,
   }: Props = $props()
 
-  const resolvedDir = $derived(dir === 'ltr' || dir === 'rtl' ? dir : undefined)
-  const rtl = $derived(resolvedDir === 'rtl')
-
-  function go(i: number) {
-    if (count === 0) return
-    current = loop ? (i + count) % count : Math.max(0, Math.min(i, count - 1))
-  }
-  const next = () => go(current + 1)
-  const prev = () => go(current - 1)
-
-  // Autoplay, paused while hovered/focused, or stopped via the persistent
-  // play/pause toggle (WCAG 2.2.2: auto-advancing content needs a way to stop
-  // it that doesn't depend on hover/focus).
-  let paused = $state(false)
-  let userPaused = $state(false)
-  $effect(() => {
-    if (!autoplay || paused || userPaused || count < 2) return
-    const t = setInterval(next, autoplay)
-    return () => clearInterval(t)
+  // Navigation, autoplay (pause on hover/focus + WCAG 2.2.2 stop toggle) and the
+  // rtl-aware arrow wiring live in the shared headless core; this component keeps
+  // only the visual track + swipe. See createCarousel.svelte.ts.
+  const car = createCarousel({
+    count: () => count,
+    current: () => current,
+    onChange: (i) => (current = i),
+    loop: () => loop,
+    autoplay: () => autoplay,
+    dir: () => (dir === 'ltr' || dir === 'rtl' ? dir : undefined),
   })
+  const rtl = $derived(car.rtl())
 
-  // Swipe.
+  // Swipe (a DOM gesture the renderer owns; delegates to the core's next/prev).
   let dragging = $state(false)
   let startX = 0
   let dx = $state(0)
@@ -75,26 +68,17 @@
   function up() {
     if (!dragging) return
     dragging = false
-    if (Math.abs(dx) > 50) (dx < 0 ? next() : prev())
+    if (Math.abs(dx) > 50) (dx < 0 ? car.next() : car.prev())
     dx = 0
   }
 </script>
 
-<div
-  class="sv-carousel"
-  role="group"
-  aria-roledescription="carousel"
-  aria-label={ariaLabel}
-  onpointerenter={() => (paused = true)}
-  onpointerleave={() => (paused = false)}
-  onfocusin={() => (paused = true)}
-  onfocusout={() => (paused = false)}
->
+<div class="sv-carousel" {...car.rootProps(ariaLabel)}>
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div class="sv-carousel__viewport" onpointerdown={down} onpointermove={move} onpointerup={up} onpointercancel={up}>
     <div class="sv-carousel__track" class:is-dragging={dragging} style:transform={`translateX(calc(${(rtl ? current : -current) * 100}% + ${dx}px))`}>
       {#each Array(count) as _, i (i)}
-        <div class="sv-carousel__slide" role="group" aria-roledescription="slide" aria-label={`${i + 1} of ${count}`} aria-hidden={i !== current} inert={i !== current}>
+        <div class="sv-carousel__slide" {...car.slideProps(i)}>
           {@render slide?.(i)}
         </div>
       {/each}
@@ -102,26 +86,20 @@
   </div>
 
   {#if arrows && count > 1}
-    <button type="button" class="sv-carousel__arrow is-prev" aria-label={rtl ? 'Next slide' : 'Previous slide'} onclick={rtl ? next : prev} disabled={rtl ? (!loop && current === count - 1) : (!loop && current === 0)}>{rtl ? '›' : '‹'}</button>
-    <button type="button" class="sv-carousel__arrow is-next" aria-label={rtl ? 'Previous slide' : 'Next slide'} onclick={rtl ? prev : next} disabled={rtl ? (!loop && current === 0) : (!loop && current === count - 1)}>{rtl ? '‹' : '›'}</button>
+    <button type="button" class="sv-carousel__arrow is-prev" {...car.prevArrowProps()}>{rtl ? '›' : '‹'}</button>
+    <button type="button" class="sv-carousel__arrow is-next" {...car.nextArrowProps()}>{rtl ? '‹' : '›'}</button>
   {/if}
 
   {#if dots && count > 1}
     <div class="sv-carousel__dots">
       {#each Array(count) as _, i (i)}
-        <button type="button" class="sv-carousel__dot" class:is-active={i === current} aria-label={`Go to slide ${i + 1}`} aria-current={i === current ? 'true' : undefined} onclick={() => go(i)}></button>
+        <button type="button" class="sv-carousel__dot" class:is-active={car.isActive(i)} {...car.dotProps(i)}></button>
       {/each}
     </div>
   {/if}
 
   {#if autoplay > 0}
-    <button
-      type="button"
-      class="sv-carousel__playpause"
-      aria-label={userPaused ? 'Play autoplay' : 'Pause autoplay'}
-      aria-pressed={userPaused}
-      onclick={() => (userPaused = !userPaused)}
-    >{userPaused ? '▶' : '⏸'}</button>
+    <button type="button" class="sv-carousel__playpause" {...car.playPauseProps()}>{car.userPaused ? '▶' : '⏸'}</button>
   {/if}
 </div>
 

package/dist/SvColorInput.svelte

@@ -29,7 +29,7 @@
   }
 
   let {
-    value = '#3b82f6',
+    value = $bindable('#3b82f6'),
     onChange,
     disabled = false,
     readonly = false,
@@ -54,7 +54,8 @@
 
   const col = createColorInput({
     value: () => value,
-    onChange: (hex) => onChange?.(hex),
+    // Write `value` (so `bind:value` works) AND fire `onChange` (callback users).
+    onChange: (hex) => { value = hex; onChange?.(hex) },
     disabled: () => disabled,
     readonly: () => readonly,
     palette: () => palette as string[],
@@ -68,7 +69,7 @@
 
   let triggerEl = $state<HTMLButtonElement | null>(null)
   let panelEl = $state<HTMLDivElement | null>(null)
-  let panelRect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false })
+  let panelRect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false, maxHeight: 0, availHeight: 0 })
 
   function updatePos() {
     if (!triggerEl) return