@svgrid/grid 1.1.0 → 1.1.2

package/src/SvGrid.svelte

@@ -3,53 +3,48 @@
   generics="TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData"
 >
   import {
-      getGridCellA11yProps,
-      getGridCellDomId,
-      getGridHeaderA11yProps,
-      getGridRootA11yProps,
-      getGridRowA11yProps,
-      type EditorContext,
-      type CellEditorOption,
-      type Column,
-      type Row,
-      type RowData,
-      type TableFeatures,
-    } from "./index";
+    getGridCellA11yProps,
+    getGridCellDomId,
+    getGridHeaderA11yProps,
+    getGridRootA11yProps,
+    getGridRowA11yProps,
+    type EditorContext,
+    type CellEditorOption,
+    type Column,
+    type Row,
+    type RowData,
+    type TableFeatures,
+  } from "./index";
   import "./sv-grid-scrollbar";
   import "./SvGrid.css";
   import type { Snippet } from "svelte";
   import {
-      RenderSnippetConfig,
-      RenderComponentConfig,
-    } from "./render-component";
-  import {
-      buildSparkline,
-      toSparklineValues,
-    } from "./sparkline";
+    RenderSnippetConfig,
+    RenderComponentConfig,
+  } from "./render-component";
+  import { buildSparkline, toSparklineValues } from "./sparkline";
   import SvGridDropdown from "./SvGridDropdown.svelte";
   import type {
-      Props,
-      SelectionPoint,
-      SelectionRange,
-      CellEditState,
-      FilterOperator,
-      FilterOption,
-      MenuPosition,
-    } from "./SvGrid.types";
-  import {
-      cfTextStyle,
-      fmtStat,
-      getEditableInputValue,
-      getEditorInputType,
-      toValueArray,
-      getOptionLabel,
-      getOptionColor,
-      colorfulChipStyle,
-      getEditorClass,
-    } from "./SvGrid.helpers";
+    Props,
+    SelectionPoint,
+    SelectionRange,
+    CellEditState,
+    FilterOperator,
+    FilterOption,
+    MenuPosition,
+  } from "./SvGrid.types";
   import {
-      createSvGridController,
-    } from "./SvGrid.controller.svelte";
+    cfTextStyle,
+    fmtStat,
+    getEditableInputValue,
+    getEditorInputType,
+    toValueArray,
+    getOptionLabel,
+    getOptionColor,
+    colorfulChipStyle,
+    getEditorClass,
+  } from "./SvGrid.helpers";
+  import { createSvGridController } from "./SvGrid.controller.svelte";
   import GridMenus from "./GridMenus.svelte";
   import GridFooter from "./GridFooter.svelte";
   let props: Props<TFeatures, TData> = $props();
@@ -78,7 +73,9 @@
   const hasVerticalOverflow = $derived(ctrl.hasVerticalOverflow);
   const showGlobalFilterEffective = $derived(ctrl.showGlobalFilterEffective);
   const showFilterRowEffective = $derived(ctrl.showFilterRowEffective);
-  const showInlineColumnFilterEffective = $derived(ctrl.showInlineColumnFilterEffective);
+  const showInlineColumnFilterEffective = $derived(
+    ctrl.showInlineColumnFilterEffective,
+  );
   const showRowSelectionEffective = $derived(ctrl.showRowSelectionEffective);
   const grid = $derived(ctrl.grid);
   const allColumns = $derived(ctrl.allColumns);
@@ -94,6 +91,36 @@
   const onColumnHeaderDragLeave = $derived(ctrl.onColumnHeaderDragLeave);
   const onColumnHeaderDrop = $derived(ctrl.onColumnHeaderDrop);
   const onColumnHeaderDragEnd = $derived(ctrl.onColumnHeaderDragEnd);
+  // Managed row dragging
+  const rowDragManagedEffective = $derived(props.rowDragManaged === true);
+  const rowDropIndex = $derived(ctrl.rowDropIndex);
+  const rowDropSide = $derived(ctrl.rowDropSide);
+  const onRowDragStart = $derived(ctrl.onRowDragStart);
+  const onRowDragOver = $derived(ctrl.onRowDragOver);
+  const onRowDragLeave = $derived(ctrl.onRowDragLeave);
+  const onRowDrop = $derived(ctrl.onRowDrop);
+  const onRowsContainerDragOver = $derived(ctrl.onRowsContainerDragOver);
+  const onRowsContainerDrop = $derived(ctrl.onRowsContainerDrop);
+  const onRowDragEndHandler = $derived(ctrl.onRowDragEnd);
+  // Drag attributes spread onto each body <tr>; empty object when disabled so
+  // rows stay non-draggable and no handlers fire.
+  function rowDragAttrs(rowIndex: number) {
+    if (!rowDragManagedEffective) return {};
+    return {
+      draggable: true,
+      ondragstart: (e: DragEvent) => onRowDragStart(e, rowIndex),
+      ondragover: (e: DragEvent) => onRowDragOver(e, rowIndex),
+      ondragleave: () => onRowDragLeave(rowIndex),
+      ondrop: (e: DragEvent) => onRowDrop(e, rowIndex),
+      ondragend: () => onRowDragEndHandler(),
+    };
+  }
+  function rowDropClass(rowIndex: number) {
+    if (!rowDragManagedEffective || rowDropIndex !== rowIndex) return "";
+    return rowDropSide === "after"
+      ? "sv-grid-row-drop-after"
+      : "sv-grid-row-drop-before";
+  }
   const getColumnBaseValue = $derived(ctrl.getColumnBaseValue);
   const hasConditionalFormats = $derived(ctrl.hasConditionalFormats);
   const cellConditionalFormat = $derived(ctrl.cellConditionalFormat);
@@ -114,7 +141,9 @@
   const toggleGroupInPanel = $derived(ctrl.toggleGroupInPanel);
   const virtualizer = $derived(ctrl.virtualizer);
   const rowVirtualizationEnabled = $derived(ctrl.rowVirtualizationEnabled);
-  const columnVirtualizationEnabled = $derived(ctrl.columnVirtualizationEnabled);
+  const columnVirtualizationEnabled = $derived(
+    ctrl.columnVirtualizationEnabled,
+  );
   const virtualRows = $derived(ctrl.virtualRows);
   // DOM-space spacer heights + capped total: identical to the logical
   // virtualizer values for normal grids, scaled down past
@@ -125,6 +154,88 @@
   const rowDomTotalSize = $derived(ctrl.rowDomTotalSize);
   const renderedColumns = $derived(ctrl.renderedColumns);
   const totalColumnWidth = $derived(ctrl.totalColumnWidth);
+
+  // ---- Built-in cell flash (ColumnDef `cellFlash`) ----------------------
+  // Flashes a cell when its value changes (edits, streaming feeds, server
+  // pushes). Keyed by rowId so virtualization recycling a <td> into a new row
+  // on scroll does NOT trigger a spurious flash - only a same-row value change
+  // does. Inert (active:false) for columns without `cellFlash`.
+  function cellFlashAction(
+    node: HTMLElement,
+    params: {
+      rowId: string;
+      value: unknown;
+      active: boolean;
+      className: string;
+    },
+  ) {
+    let prevRow = params.rowId;
+    let prev = params.value;
+    return {
+      update(next: {
+        rowId: string;
+        value: unknown;
+        active: boolean;
+        className: string;
+      }) {
+        if (next.rowId !== prevRow) {
+          // A different row scrolled into this recycled slot - reset, no flash.
+          prevRow = next.rowId;
+          prev = next.value;
+          return;
+        }
+        if (next.active && next.className && !Object.is(next.value, prev)) {
+          node.classList.remove(next.className);
+          void node.offsetWidth; // reflow so the animation restarts
+          node.classList.add(next.className);
+        }
+        prev = next.value;
+      },
+    };
+  }
+  function flashClassFor(
+    cfg: boolean | { className?: string } | undefined,
+  ): string {
+    console.log("flash cell");
+    if (cfg && typeof cfg === "object" && cfg.className) return cfg.className;
+    return "sv-grid-cell-flash";
+  }
+
+  // ---- Full-row editing -------------------------------------------------
+  const fullRowEdit = $derived(ctrl.fullRowEdit);
+  // Commit the whole row when the user clicks away from its editors (Excel /
+  // AG-Grid feel). Clicking within any full-row editor keeps editing.
+  $effect(() => {
+    if (!fullRowEdit) return;
+    const onDown = (e: PointerEvent) => {
+      const t = e.target as HTMLElement | null;
+      if (t && t.closest(".sv-grid-fr-editor")) return;
+      ctrl.commitFullRowEdit();
+    };
+    document.addEventListener("pointerdown", onDown, true);
+    return () => document.removeEventListener("pointerdown", onDown, true);
+  });
+  function fullRowKeydown(e: KeyboardEvent) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      ctrl.commitFullRowEdit();
+      ctrl.gridRootEl?.focus({ preventScroll: true });
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      ctrl.cancelFullRowEdit();
+      ctrl.gridRootEl?.focus({ preventScroll: true });
+    }
+  }
+  function optionValueOf(o: unknown): string {
+    return typeof o === "object" && o !== null && "value" in o
+      ? String((o as { value: unknown }).value)
+      : String(o);
+  }
+  function optionLabelOf(o: unknown): string {
+    return typeof o === "object" && o !== null && "label" in o
+      ? String((o as { label: unknown }).label)
+      : String(o);
+  }
   const hasHorizontalOverflow = $derived(ctrl.hasHorizontalOverflow);
   const columnWindowStart = $derived(ctrl.columnWindowStart);
   const columnWindowRightSpacer = $derived(ctrl.columnWindowRightSpacer);
@@ -175,6 +286,11 @@
   const goToPage = $derived(ctrl.goToPage);
   const setPageSize = $derived(ctrl.setPageSize);
   const updateFilterRow = $derived(ctrl.updateFilterRow);
+  const updateFilterMenuValue = $derived(ctrl.updateFilterMenuValue);
+  const updateFilterMenuValueTo = $derived(ctrl.updateFilterMenuValueTo);
+  const updateFilterOperator = $derived(ctrl.updateFilterOperator);
+  const operatorsForColumn = $derived(ctrl.operatorsForColumn);
+  const clearColumnFilter = $derived(ctrl.clearColumnFilter);
   const toggleCheckboxWithKeyboard = $derived(ctrl.toggleCheckboxWithKeyboard);
   const operatorOption = $derived(ctrl.operatorOption);
   const defaultOperatorFor = $derived(ctrl.defaultOperatorFor);
@@ -442,7 +558,10 @@
       <!-- Custom editor slot. The columnDef provides a snippet that
            receives the editor context (value + commit + cancel) so the
            consumer fully owns the in-cell UI. -->
-      {@const customEditor = column.columnDef.cellEditor as unknown as import('svelte').Snippet<[EditorContext<TData>]>}
+      {@const customEditor = column.columnDef
+        .cellEditor as unknown as import("svelte").Snippet<
+        [EditorContext<TData>]
+      >}
       {@render customEditor({
         cell: row.getAllCells().find((c) => c.column.id === column.id)!,
         row,
@@ -453,19 +572,23 @@
         update: (next: unknown) => {
           // Stage the draft without closing. Live-preview controls
           // (sliders, color pickers) call this on every input tick.
-          ctrl.editingCell = ctrl.editingCell ? { ...ctrl.editingCell, value: next } : ctrl.editingCell
+          ctrl.editingCell = ctrl.editingCell
+            ? { ...ctrl.editingCell, value: next }
+            : ctrl.editingCell;
         },
         commit: (next?: unknown) => {
           // Write + close. If the caller passed a value, stage it
           // first; otherwise save whatever update() last wrote.
           if (next !== undefined) {
-            ctrl.editingCell = ctrl.editingCell ? { ...ctrl.editingCell, value: next } : ctrl.editingCell
+            ctrl.editingCell = ctrl.editingCell
+              ? { ...ctrl.editingCell, value: next }
+              : ctrl.editingCell;
           }
-          saveEditingCell()
+          saveEditingCell();
         },
         cancel: () => {
-          ctrl.editingCell = null
-          ctrl.gridRootEl?.focus({ preventScroll: true })
+          ctrl.editingCell = null;
+          ctrl.gridRootEl?.focus({ preventScroll: true });
         },
       })}
     {:else if ctrl.editingCell?.editorType === "checkbox"}
@@ -519,12 +642,11 @@
       {@const selectedArr = toValueArray(ctrl.editingCell?.value)}
       {@render chipsEditor(opts, multi, selectedArr)}
     {:else if ctrl.editingCell?.editorType === "rating"}
-      {@const ratingVal = Math.max(0, Math.min(5, Math.round(Number(ctrl.editingCell?.value) || 0)))}
-      <span
-        class="sv-grid-rating-editor"
-        role="radiogroup"
-        aria-label="Rating"
-      >
+      {@const ratingVal = Math.max(
+        0,
+        Math.min(5, Math.round(Number(ctrl.editingCell?.value) || 0)),
+      )}
+      <span class="sv-grid-rating-editor" role="radiogroup" aria-label="Rating">
         {#each [1, 2, 3, 4, 5] as n (n)}
           <button
             type="button"
@@ -540,8 +662,8 @@
                 : ctrl.editingCell;
               saveEditingCell();
             }}
-            onkeydown={onEditorKeyDown}
-          >★</button>
+            onkeydown={onEditorKeyDown}>★</button
+          >
         {/each}
         <button
           type="button"
@@ -554,8 +676,8 @@
               ? { ...ctrl.editingCell, value: 0 }
               : ctrl.editingCell;
             saveEditingCell();
-          }}
-        >×</button>
+          }}>×</button
+        >
       </span>
     {:else if ctrl.editingCell?.editorType === "select"}
       <!-- Custom dropdown: opens a themed popover identical in feel to
@@ -613,18 +735,21 @@
             (event.currentTarget as HTMLTextAreaElement).value,
           )}
         onkeydown={(event) => {
-          event.stopPropagation()
+          event.stopPropagation();
           if (event.key === "Escape") {
-            event.preventDefault()
-            ctrl.editingCell = null
-            ctrl.gridRootEl?.focus({ preventScroll: true })
-            return
+            event.preventDefault();
+            ctrl.editingCell = null;
+            ctrl.gridRootEl?.focus({ preventScroll: true });
+            return;
           }
           // Tab and Ctrl/Cmd+Enter both commit. Plain Enter inserts a newline.
-          if (event.key === "Tab" || (event.key === "Enter" && (event.ctrlKey || event.metaKey))) {
-            event.preventDefault()
-            saveEditingCell()
-            ctrl.gridRootEl?.focus({ preventScroll: true })
+          if (
+            event.key === "Tab" ||
+            (event.key === "Enter" && (event.ctrlKey || event.metaKey))
+          ) {
+            event.preventDefault();
+            saveEditingCell();
+            ctrl.gridRootEl?.focus({ preventScroll: true });
           }
         }}
         onblur={() => saveEditingCell()}
@@ -668,8 +793,8 @@
                     ? { ...ctrl.editingCell, value: opt.value }
                     : ctrl.editingCell;
                   saveEditingCell();
-                }}
-              >{opt.label}</button>
+                }}>{opt.label}</button
+              >
             {/each}
           </div>
         {/if}
@@ -717,6 +842,63 @@
     {/if}
   {/snippet}
 
+  <!-- Full-row editor: a lightweight inline editor per editable cell, shown
+       for every editable column of the row in full-row edit. Kept separate
+       from `editorBody` (which owns the 14 rich single-cell editors) so
+       cell editing is untouched. Covers the common editor types. -->
+  {#snippet fullRowEditor(column: Column<TData>, row: Row<TData>)}
+    {@const et = column.columnDef.editorType ?? "text"}
+    {@const val = fullRowEdit?.draft[column.id]}
+    {#if et === "checkbox"}
+      <input
+        type="checkbox"
+        class="sv-grid-fr-editor sv-grid-fr-checkbox"
+        checked={Boolean(val)}
+        onchange={(e) =>
+          ctrl.setFullRowDraft(column.id, e.currentTarget.checked)}
+        onkeydown={fullRowKeydown}
+        onpointerdown={(e) => e.stopPropagation()}
+        onclick={(e) => e.stopPropagation()}
+      />
+    {:else if et === "list" || et === "select" || et === "rich-select"}
+      {@const opts = getColumnEditorOptions(column, row)}
+      <select
+        class="sv-grid-cell-editor sv-grid-fr-editor"
+        value={String(val ?? "")}
+        onchange={(e) => ctrl.setFullRowDraft(column.id, e.currentTarget.value)}
+        onkeydown={fullRowKeydown}
+        onpointerdown={(e) => e.stopPropagation()}
+        onclick={(e) => e.stopPropagation()}
+      >
+        {#each opts as o (optionValueOf(o))}
+          <option value={optionValueOf(o)}>{optionLabelOf(o)}</option>
+        {/each}
+      </select>
+    {:else}
+      {@const inputType =
+        et === "number"
+          ? "number"
+          : et === "date"
+            ? "date"
+            : et === "datetime"
+              ? "datetime-local"
+              : et === "time"
+                ? "time"
+                : et === "password"
+                  ? "password"
+                  : "text"}
+      <input
+        type={inputType}
+        class="sv-grid-cell-editor sv-grid-fr-editor"
+        value={String(val ?? "")}
+        oninput={(e) => ctrl.setFullRowDraft(column.id, e.currentTarget.value)}
+        onkeydown={fullRowKeydown}
+        onpointerdown={(e) => e.stopPropagation()}
+        onclick={(e) => e.stopPropagation()}
+      />
+    {/if}
+  {/snippet}
+
   {#snippet chipsEditor(
     opts: CellEditorOption[],
     multi: boolean,
@@ -900,7 +1082,11 @@
        inline editing, no row-selection checkbox, no fill handle.
        Position-sticky CSS keeps it anchored to the top of the body or
        the bottom of the viewport while the rest scrolls. -->
-  {#snippet pinnedRowBody(rowData: TData, where: "top" | "bottom", index: number)}
+  {#snippet pinnedRowBody(
+    rowData: TData,
+    where: "top" | "bottom",
+    index: number,
+  )}
     <tr
       class={`sv-grid-row sv-grid-pinned-row sv-grid-pinned-row-${where}`}
       data-pinned-row={where}
@@ -910,7 +1096,8 @@
         <td
           class="sv-grid-cell sv-grid-row-number-cell"
           style={`width: ${rowNumberColumnWidth}px; min-width: ${rowNumberColumnWidth}px; max-width: ${rowNumberColumnWidth}px; left: 0;`}
-        >{where === "top" ? "↑" : "↓"}</td>
+          >{where === "top" ? "↑" : "↓"}</td
+        >
       {/if}
       {#if showRowSelectionEffective}
         <td
@@ -927,13 +1114,17 @@
       {/if}
       {#each renderedColumns as rendered (rendered.column.id)}
         {@const value = getPinnedCellValue(rowData, rendered.column)}
-        {@const userCellClass = computePinnedCellClass(rowData, rendered.column)}
+        {@const userCellClass = computePinnedCellClass(
+          rowData,
+          rendered.column,
+        )}
         <td
           class={`sv-grid-cell ${userCellClass}`}
           data-col-id={rendered.column.id}
           data-pinned={isColumnPinned(rendered.column.id) ?? undefined}
           style={`width: ${rendered.item.size}px; min-width: ${rendered.item.size}px; max-width: ${rendered.item.size}px; ${cellPinStyle(rendered.column.id)}`}
-        >{formatPinnedValue(rendered.column, value)}</td>
+          >{formatPinnedValue(rendered.column, value)}</td
+        >
       {/each}
       {#if columnVirtualizationEnabled && columnWindowRightSpacer > 0}
         <td
@@ -956,13 +1147,45 @@
       </label>
     {/if}
 
+    {#if toolPanelEnabled}
+      <div class="sv-grid-toolbar">
+        <button
+          type="button"
+          class="sv-grid-toolbar-btn"
+          class:is-active={ctrl.toolPanelOpen}
+          aria-label={ctrl.toolPanelOpen
+            ? "Close tool panel"
+            : "Open tool panel (columns & filters)"}
+          aria-expanded={ctrl.toolPanelOpen}
+          onclick={() => (ctrl.toolPanelOpen = !ctrl.toolPanelOpen)}
+        >
+          <svg
+            viewBox="0 0 24 24"
+            width="15"
+            height="15"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <rect x="3" y="4" width="6" height="16" rx="1" />
+            <rect x="11" y="4" width="4" height="16" rx="1" />
+            <rect x="17" y="4" width="4" height="16" rx="1" />
+          </svg>
+          Columns &amp; Filters
+        </button>
+      </div>
+    {/if}
+
     <div
       class="sv-grid-shell"
       style={`height: ${
         typeof props.containerHeight === "string"
           ? props.containerHeight
           : `${props.containerHeight ?? 520}px`
-      }; --sg-thead-h: ${headerHeight}px; --sg-pinned-row-h: ${(typeof props.rowHeight === 'number' ? props.rowHeight : 30)}px;`}
+      }; --sg-thead-h: ${headerHeight}px; --sg-pinned-row-h: ${typeof props.rowHeight === "number" ? props.rowHeight : 30}px;`}
     >
       <div
         class="sv-grid-container sv-grid-container-custom-scrollbars"
@@ -1018,7 +1241,43 @@
                     style={`width: ${cell.widthPx}px; min-width: ${cell.widthPx}px; max-width: ${cell.widthPx}px;`}
                   >
                     {#if !cell.isPlaceholder}
-                      <span class="sv-grid-group-header-label">{cell.label}</span>
+                      {#if cell.collapsible}
+                        <button
+                          type="button"
+                          class="sv-grid-group-toggle"
+                          class:is-collapsed={cell.collapsed}
+                          aria-expanded={!cell.collapsed}
+                          aria-label={cell.collapsed
+                            ? `Expand ${cell.label}`
+                            : `Collapse ${cell.label}`}
+                          title={cell.collapsed
+                            ? "Expand group"
+                            : "Collapse group"}
+                          onclick={() => ctrl.toggleColumnGroup(cell.groupId!)}
+                        >
+                          <span class="sv-grid-group-header-label"
+                            >{cell.label}</span
+                          >
+                          <svg
+                            class="sv-grid-group-caret"
+                            viewBox="0 0 16 16"
+                            width="10"
+                            height="10"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            aria-hidden="true"
+                          >
+                            <polyline points="4 6 8 10 12 6"></polyline>
+                          </svg>
+                        </button>
+                      {:else}
+                        <span class="sv-grid-group-header-label"
+                          >{cell.label}</span
+                        >
+                      {/if}
                     {/if}
                   </th>
                 {/each}
@@ -1079,14 +1338,18 @@
                     )}
                     <th
                       class="sv-grid-column"
-                      class:is-drag-target-before={colDropOnId === header.column.id && colDropSide === "before"}
-                      class:is-drag-target-after={colDropOnId === header.column.id && colDropSide === "after"}
+                      class:is-drag-target-before={colDropOnId ===
+                        header.column.id && colDropSide === "before"}
+                      class:is-drag-target-after={colDropOnId ===
+                        header.column.id && colDropSide === "after"}
                       class:is-dragging={colDragId === header.column.id}
                       data-svgrid-header-col={header.column.id}
                       data-align={getColumnAlign(rendered.column)}
                       data-pinned={isColumnPinned(rendered.column.id) ??
                         undefined}
-                      draggable={(props.enableColumnReorder ?? false) ? true : undefined}
+                      draggable={(props.enableColumnReorder ?? false)
+                        ? true
+                        : undefined}
                       ondragstart={(e) =>
                         (props.enableColumnReorder ?? false) &&
                         onColumnHeaderDragStart(e, header.column.id)}
@@ -1116,7 +1379,9 @@
                       {#if !header.isPlaceholder}
                         <div class="sv-grid-header-cell">
                           {#if typeof header.column.columnDef.header === "function"}
-                            {@const rendered = header.column.columnDef.header(header.getContext())}
+                            {@const rendered = header.column.columnDef.header(
+                              header.getContext(),
+                            )}
                             <!-- Custom header (snippet/component): rendered
                                  OUTSIDE the sort button so the consumer's
                                  own interactive elements (menu buttons,
@@ -1129,20 +1394,30 @@
                               role="button"
                               tabindex="-1"
                               onclick={(event) => {
-                                if (!header.column.getCanSort()) return
+                                if (!header.column.getCanSort()) return;
                                 // If the click landed on an interactive
                                 // element inside the custom header, let
                                 // that element handle it.
-                                const t = event.target as HTMLElement | null
-                                if (t && t.closest('button, a, input, select, textarea, [role="button"], [role="menuitem"]') &&
-                                    !(t.classList.contains('sv-grid-header-custom'))) return
-                                onHeaderSortClick(event, header.column.id)
+                                const t = event.target as HTMLElement | null;
+                                if (
+                                  t &&
+                                  t.closest(
+                                    'button, a, input, select, textarea, [role="button"], [role="menuitem"]',
+                                  ) &&
+                                  !t.classList.contains("sv-grid-header-custom")
+                                )
+                                  return;
+                                onHeaderSortClick(event, header.column.id);
                               }}
                               onkeydown={(event) => {
-                                if (event.key !== 'Enter' && event.key !== ' ') return
-                                if (!header.column.getCanSort()) return
-                                event.preventDefault()
-                                onHeaderSortClick(event as unknown as MouseEvent, header.column.id)
+                                if (event.key !== "Enter" && event.key !== " ")
+                                  return;
+                                if (!header.column.getCanSort()) return;
+                                event.preventDefault();
+                                onHeaderSortClick(
+                                  event as unknown as MouseEvent,
+                                  header.column.id,
+                                );
                               }}
                             >
                               {#if rendered instanceof RenderSnippetConfig}
@@ -1157,10 +1432,12 @@
                               {#if header.column.getCanSort()}
                                 {#if sortDirection === "asc"}
                                   <span class="sv-grid-header-icon"
-                                    >{@render icon("sort-asc")}</span>
+                                    >{@render icon("sort-asc")}</span
+                                  >
                                 {:else if sortDirection === "desc"}
                                   <span class="sv-grid-header-icon"
-                                    >{@render icon("sort-desc")}</span>
+                                    >{@render icon("sort-desc")}</span
+                                  >
                                 {/if}
                               {/if}
                             </div>
@@ -1172,7 +1449,8 @@
                                 onHeaderSortClick(event, header.column.id)}
                             >
                               <span class="sv-grid-header-label">
-                                {typeof header.column.columnDef.header === "string"
+                                {typeof header.column.columnDef.header ===
+                                "string"
                                   ? header.column.columnDef.header
                                   : header.id}
                               </span>
@@ -1327,9 +1605,15 @@
                           >
                         </button>
                         {#if activeOperator !== "isBlank"}
+                          {@const frType = getEditorInputType(
+                            rendered.column.columnDef.editorType ?? "text",
+                          )}
                           <input
                             class="sv-grid-filter-value"
-                            placeholder="Filter rows"
+                            type={frType}
+                            placeholder={activeOperator === "between"
+                              ? "From"
+                              : "Filter…"}
                             data-svgrid-filter-col={rendered.column.id}
                             value={filterRowValues[rendered.column.id] ?? ""}
                             oninput={(event) =>
@@ -1338,6 +1622,21 @@
                                 (event.currentTarget as HTMLInputElement).value,
                               )}
                           />
+                          {#if activeOperator === "between"}
+                            <input
+                              class="sv-grid-filter-value sv-grid-filter-value-to"
+                              type={frType}
+                              placeholder="To"
+                              value={filterMenuValues[rendered.column.id]
+                                ?.valueTo ?? ""}
+                              oninput={(event) =>
+                                updateFilterMenuValueTo(
+                                  rendered.column.id,
+                                  (event.currentTarget as HTMLInputElement)
+                                    .value,
+                                )}
+                            />
+                          {/if}
                         {/if}
                       </div>
                     </th>
@@ -1355,14 +1654,24 @@
           </thead>
           {#if props.pinnedTopRows && props.pinnedTopRows.length > 0}
             <!-- svelte-ignore a11y_no_redundant_roles -->
-            <tbody class="sv-grid-pinned sv-grid-pinned-top-body" role="rowgroup">
+            <tbody
+              class="sv-grid-pinned sv-grid-pinned-top-body"
+              role="rowgroup"
+            >
               {#each props.pinnedTopRows as r, i (i)}
                 {@render pinnedRowBody(r, "top", i)}
               {/each}
             </tbody>
           {/if}
           <!-- svelte-ignore a11y_no_redundant_roles -->
-          <tbody class="sv-grid-body" role="rowgroup">
+          <tbody
+            class="sv-grid-body"
+            role="rowgroup"
+            ondragover={rowDragManagedEffective
+              ? onRowsContainerDragOver
+              : undefined}
+            ondrop={rowDragManagedEffective ? onRowsContainerDrop : undefined}
+          >
             {#if !allRows.length && !(props.loading && props.loadingOverlay)}
               <tr class="sv-grid-row sv-grid-empty-row">
                 <td
@@ -1416,10 +1725,13 @@
                   {:else}
                     {@const userRowClass = computeRowClass(row, rowIndex)}
                     <tr
-                      class={`sv-grid-row ${userRowClass}`}
+                      class={`sv-grid-row ${userRowClass} ${rowDropClass(rowIndex)}`}
                       class:sv-grid-row-selected={isRowSelected(row.id)}
-                      class:sv-grid-row-alt={props.zebraRows && rowIndex % 2 === 1}
+                      class:sv-grid-row-alt={props.zebraRows &&
+                        rowIndex % 2 === 1}
+                      class:sv-grid-row-draggable={rowDragManagedEffective}
                       {...getGridRowA11yProps(rowIndex + 1)}
+                      {...rowDragAttrs(rowIndex)}
                       style={`height: ${rowItem.size}px;`}
                     >
                       {#if showRowNumbersEffective}
@@ -1474,6 +1786,10 @@
                         {@const isEditing =
                           ctrl.editingCell?.rowId === row.id &&
                           ctrl.editingCell?.columnId === rendered.column.id}
+                        {@const inRowEdit =
+                          !!fullRowEdit &&
+                          fullRowEdit.rowId === row.id &&
+                          rendered.column.id in fullRowEdit.draft}
                         {@const rangeEdges = getCellRangeEdges(
                           rowIndex,
                           colIndex,
@@ -1482,12 +1798,21 @@
                           fillHandleCell &&
                           fillHandleCell.rowIndex === rowIndex &&
                           fillHandleCell.colIndex === colIndex}
-                        {@const userCellClass = computeCellClass(row, rendered.column)}
-                        {@const cellTooltip = computeCellTooltip(row, rendered.column)}
-                        {@const cellNote    = computeCellNote(row, rendered.column)}
+                        {@const userCellClass = computeCellClass(
+                          row,
+                          rendered.column,
+                        )}
+                        {@const cellTooltip = computeCellTooltip(
+                          row,
+                          rendered.column,
+                        )}
+                        {@const cellNote = computeCellNote(
+                          row,
+                          rendered.column,
+                        )}
                         <td
                           class={`sv-grid-cell ${userCellClass}`}
-                          class:sv-grid-cell-editing={isEditing}
+                          class:sv-grid-cell-editing={isEditing || inRowEdit}
                           class:sv-grid-cell-active={activeCell.rowIndex ===
                             rowIndex && activeCell.colIndex === colIndex}
                           class:sv-grid-cell-has-fill-handle={hasFillHandle}
@@ -1522,7 +1847,20 @@
                             emitCellDoubleClick(rowIndex, colIndex)}
                           onclick={() => onCellClick(rowIndex, colIndex)}
                           oncontextmenu={(event) =>
-                            openContextMenu(event, rowIndex, colIndex, rendered.column.id)}
+                            openContextMenu(
+                              event,
+                              rowIndex,
+                              colIndex,
+                              rendered.column.id,
+                            )}
+                          use:cellFlashAction={{
+                            rowId: row.id,
+                            value: cellValue,
+                            active: !!rendered.column.columnDef.cellFlash,
+                            className: flashClassFor(
+                              rendered.column.columnDef.cellFlash,
+                            ),
+                          }}
                           {...getGridCellA11yProps({
                             id: getGridCellDomId("svgrid", rowIndex, colIndex),
                             rowIndex: rowIndex + 1,
@@ -1530,10 +1868,16 @@
                             selected: isRowSelected(row.id),
                           })}
                         >
-                          {#if isEditing}
+                          {#if inRowEdit}
+                            {@render fullRowEditor(rendered.column, row)}
+                          {:else if isEditing}
                             {@render editorBody(rendered.column, row)}
                           {:else}
-                            {@render cellBodyWithFormat(row, rendered.column, cellValue)}
+                            {@render cellBodyWithFormat(
+                              row,
+                              rendered.column,
+                              cellValue,
+                            )}
                           {/if}
                           {#if !isEditing && fillHandleCell && fillHandleCell.rowIndex === rowIndex && fillHandleCell.colIndex === colIndex}
                             <!-- Excel-style fill handle: drag down/right to
@@ -1554,12 +1898,15 @@
                               class="sv-grid-cell-note-corner"
                               aria-label="Note"
                               onpointerenter={(event) => {
-                                event.stopPropagation()
-                                showTooltipFor(event.currentTarget as HTMLElement, cellNote)
+                                event.stopPropagation();
+                                showTooltipFor(
+                                  event.currentTarget as HTMLElement,
+                                  cellNote,
+                                );
                               }}
                               onpointerleave={(event) => {
-                                event.stopPropagation()
-                                hideTooltip()
+                                event.stopPropagation();
+                                hideTooltip();
                               }}
                             ></span>
                           {/if}
@@ -1614,10 +1961,13 @@
                 {:else}
                   {@const userRowClass = computeRowClass(row, rowIndex)}
                   <tr
-                    class={`sv-grid-row ${userRowClass}`}
+                    class={`sv-grid-row ${userRowClass} ${rowDropClass(rowIndex)}`}
                     class:sv-grid-row-selected={isRowSelected(row.id)}
-                    class:sv-grid-row-alt={props.zebraRows && rowIndex % 2 === 1}
+                    class:sv-grid-row-alt={props.zebraRows &&
+                      rowIndex % 2 === 1}
+                    class:sv-grid-row-draggable={rowDragManagedEffective}
                     {...getGridRowA11yProps(rowIndex + 1)}
+                    {...rowDragAttrs(rowIndex)}
                   >
                     {#if showRowNumbersEffective}
                       <td
@@ -1671,16 +2021,26 @@
                       {@const isEditing =
                         ctrl.editingCell?.rowId === row.id &&
                         ctrl.editingCell?.columnId === rendered.column.id}
+                      {@const inRowEdit =
+                        !!fullRowEdit &&
+                        fullRowEdit.rowId === row.id &&
+                        rendered.column.id in fullRowEdit.draft}
                       {@const rangeEdges = getCellRangeEdges(
                         rowIndex,
                         colIndex,
                       )}
-                      {@const userCellClass = computeCellClass(row, rendered.column)}
-                      {@const cellTooltip = computeCellTooltip(row, rendered.column)}
-                      {@const cellNote    = computeCellNote(row, rendered.column)}
+                      {@const userCellClass = computeCellClass(
+                        row,
+                        rendered.column,
+                      )}
+                      {@const cellTooltip = computeCellTooltip(
+                        row,
+                        rendered.column,
+                      )}
+                      {@const cellNote = computeCellNote(row, rendered.column)}
                       <td
                         class={`sv-grid-cell ${userCellClass}`}
-                        class:sv-grid-cell-editing={isEditing}
+                        class:sv-grid-cell-editing={isEditing || inRowEdit}
                         class:sv-grid-cell-active={activeCell.rowIndex ===
                           rowIndex && activeCell.colIndex === colIndex}
                         class:sv-grid-cell-cf={hasConditionalFormats}
@@ -1703,18 +2063,36 @@
                         onpointerdown={(event) =>
                           onCellPointerDown(rowIndex, colIndex, event)}
                         onpointerenter={(event) => {
-                          onCellPointerEnter(rowIndex, colIndex)
+                          onCellPointerEnter(rowIndex, colIndex);
                           // Column tooltip fires on whole-cell hover.
                           // Per-cell notes are gated on the corner hot-
                           // zone below (Excel-style: hover the small
                           // triangle to read the note).
-                          if (cellTooltip) showTooltipFor(event.currentTarget as HTMLElement, cellTooltip)
+                          if (cellTooltip)
+                            showTooltipFor(
+                              event.currentTarget as HTMLElement,
+                              cellTooltip,
+                            );
                         }}
                         onpointerleave={hideTooltip}
-                        ondblclick={() => emitCellDoubleClick(rowIndex, colIndex)}
+                        ondblclick={() =>
+                          emitCellDoubleClick(rowIndex, colIndex)}
                         onclick={() => onCellClick(rowIndex, colIndex)}
                         oncontextmenu={(event) =>
-                          openContextMenu(event, rowIndex, colIndex, rendered.column.id)}
+                          openContextMenu(
+                            event,
+                            rowIndex,
+                            colIndex,
+                            rendered.column.id,
+                          )}
+                        use:cellFlashAction={{
+                          rowId: row.id,
+                          value: cellValue,
+                          active: !!rendered.column.columnDef.cellFlash,
+                          className: flashClassFor(
+                            rendered.column.columnDef.cellFlash,
+                          ),
+                        }}
                         {...getGridCellA11yProps({
                           id: getGridCellDomId("svgrid", rowIndex, colIndex),
                           rowIndex: rowIndex + 1,
@@ -1722,10 +2100,16 @@
                           selected: isRowSelected(row.id),
                         })}
                       >
-                        {#if isEditing}
+                        {#if inRowEdit}
+                          {@render fullRowEditor(rendered.column, row)}
+                        {:else if isEditing}
                           {@render editorBody(rendered.column, row)}
                         {:else}
-                          {@render cellBodyWithFormat(row, rendered.column, cellValue)}
+                          {@render cellBodyWithFormat(
+                            row,
+                            rendered.column,
+                            cellValue,
+                          )}
                         {/if}
                         {#if cellNote != null && !isEditing}
                           <!-- Excel-style per-cell note indicator. The
@@ -1739,12 +2123,15 @@
                             class="sv-grid-cell-note-corner"
                             aria-label="Note"
                             onpointerenter={(event) => {
-                              event.stopPropagation()
-                              showTooltipFor(event.currentTarget as HTMLElement, cellNote)
+                              event.stopPropagation();
+                              showTooltipFor(
+                                event.currentTarget as HTMLElement,
+                                cellNote,
+                              );
                             }}
                             onpointerleave={(event) => {
-                              event.stopPropagation()
-                              hideTooltip()
+                              event.stopPropagation();
+                              hideTooltip();
                             }}
                           ></span>
                         {/if}
@@ -1764,7 +2151,10 @@
           </tbody>
           {#if props.pinnedBottomRows && props.pinnedBottomRows.length > 0}
             <!-- svelte-ignore a11y_no_redundant_roles -->
-            <tbody class="sv-grid-pinned sv-grid-pinned-bottom-body" role="rowgroup">
+            <tbody
+              class="sv-grid-pinned sv-grid-pinned-bottom-body"
+              role="rowgroup"
+            >
               {#each props.pinnedBottomRows as r, i (i)}
                 {@render pinnedRowBody(r, "bottom", i)}
               {/each}
@@ -1866,7 +2256,7 @@
           content-size={scrollMetrics.scrollHeight ||
             rowDomTotalSize + headerHeight}
           value={scrollMetrics.scrollTop}
-          step={typeof props.rowHeight === 'number' ? props.rowHeight : 30}
+          step={typeof props.rowHeight === "number" ? props.rowHeight : 30}
           style={`top: ${headerHeight}px; height: calc(100% - ${headerHeight + (hasHorizontalOverflow ? 16 : 0)}px);`}
         ></sv-grid-scrollbar>
       {/if}
@@ -1899,8 +2289,23 @@
            Enter cycles to the next hit; Esc closes. -->
       <div class="sv-grid-find" role="search" aria-label="Find in grid">
         <svg class="sv-grid-find-icon" viewBox="0 0 16 16" aria-hidden="true">
-          <circle cx="7" cy="7" r="4.5" fill="none" stroke="currentColor" stroke-width="1.5"/>
-          <line x1="10.2" y1="10.2" x2="14" y2="14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+          <circle
+            cx="7"
+            cy="7"
+            r="4.5"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+          />
+          <line
+            x1="10.2"
+            y1="10.2"
+            x2="14"
+            y2="14"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+          />
         </svg>
         <input
           class="sv-grid-find-input"
@@ -1910,40 +2315,73 @@
           bind:value={ctrl.findQuery}
           oninput={() => (ctrl.findHitIndex = 0)}
           onkeydown={(event) => {
-            event.stopPropagation()
-            if (event.key === 'Enter') {
-              event.preventDefault()
-              if (findHits.length === 0) return
-              ctrl.findHitIndex = (ctrl.findHitIndex + (event.shiftKey ? -1 : 1) + findHits.length) % findHits.length
-              const hit = findHits[ctrl.findHitIndex]
-              if (hit) { setActiveCell(hit.rowIndex, hit.colIndex); scrollActiveCellIntoView(hit.rowIndex, hit.colIndex) }
+            event.stopPropagation();
+            if (event.key === "Enter") {
+              event.preventDefault();
+              if (findHits.length === 0) return;
+              ctrl.findHitIndex =
+                (ctrl.findHitIndex +
+                  (event.shiftKey ? -1 : 1) +
+                  findHits.length) %
+                findHits.length;
+              const hit = findHits[ctrl.findHitIndex];
+              if (hit) {
+                setActiveCell(hit.rowIndex, hit.colIndex);
+                scrollActiveCellIntoView(hit.rowIndex, hit.colIndex);
+              }
+            }
+            if (event.key === "Escape") {
+              event.preventDefault();
+              ctrl.findOpen = false;
+              ctrl.findQuery = "";
             }
-            if (event.key === 'Escape') { event.preventDefault(); ctrl.findOpen = false; ctrl.findQuery = '' }
           }}
         />
         <span class="sv-grid-find-count">
           {findHits.length === 0 && ctrl.findQuery.trim()
-            ? 'No matches'
+            ? "No matches"
             : findHits.length === 0
-              ? ''
+              ? ""
               : `${ctrl.findHitIndex + 1} of ${findHits.length}`}
         </span>
-        <button type="button" class="sv-grid-find-step" aria-label="Previous match"
+        <button
+          type="button"
+          class="sv-grid-find-step"
+          aria-label="Previous match"
           disabled={findHits.length === 0}
           onclick={() => {
-            ctrl.findHitIndex = (ctrl.findHitIndex - 1 + findHits.length) % findHits.length
-            const hit = findHits[ctrl.findHitIndex]
-            if (hit) { setActiveCell(hit.rowIndex, hit.colIndex); scrollActiveCellIntoView(hit.rowIndex, hit.colIndex) }
-          }}>↑</button>
-        <button type="button" class="sv-grid-find-step" aria-label="Next match"
+            ctrl.findHitIndex =
+              (ctrl.findHitIndex - 1 + findHits.length) % findHits.length;
+            const hit = findHits[ctrl.findHitIndex];
+            if (hit) {
+              setActiveCell(hit.rowIndex, hit.colIndex);
+              scrollActiveCellIntoView(hit.rowIndex, hit.colIndex);
+            }
+          }}>↑</button
+        >
+        <button
+          type="button"
+          class="sv-grid-find-step"
+          aria-label="Next match"
           disabled={findHits.length === 0}
           onclick={() => {
-            ctrl.findHitIndex = (ctrl.findHitIndex + 1) % findHits.length
-            const hit = findHits[ctrl.findHitIndex]
-            if (hit) { setActiveCell(hit.rowIndex, hit.colIndex); scrollActiveCellIntoView(hit.rowIndex, hit.colIndex) }
-          }}>↓</button>
-        <button type="button" class="sv-grid-find-close" aria-label="Close find"
-          onclick={() => { ctrl.findOpen = false; ctrl.findQuery = '' }}>✕</button>
+            ctrl.findHitIndex = (ctrl.findHitIndex + 1) % findHits.length;
+            const hit = findHits[ctrl.findHitIndex];
+            if (hit) {
+              setActiveCell(hit.rowIndex, hit.colIndex);
+              scrollActiveCellIntoView(hit.rowIndex, hit.colIndex);
+            }
+          }}>↓</button
+        >
+        <button
+          type="button"
+          class="sv-grid-find-close"
+          aria-label="Close find"
+          onclick={() => {
+            ctrl.findOpen = false;
+            ctrl.findQuery = "";
+          }}>✕</button
+        >
       </div>
     {/if}
 
@@ -1971,25 +2409,11 @@
     {/if}
 
     {#if toolPanelEnabled}
-      <button
-        type="button"
-        class="sv-grid-tool-panel-toggle"
-        class:is-open={ctrl.toolPanelOpen}
-        aria-label={ctrl.toolPanelOpen ? "Close columns panel" : "Open columns panel"}
-        aria-expanded={ctrl.toolPanelOpen}
-        onclick={() => (ctrl.toolPanelOpen = !ctrl.toolPanelOpen)}
-        title="Columns"
-      >
-        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-          <rect x="3" y="4" width="6" height="16" rx="1" />
-          <rect x="11" y="4" width="4" height="16" rx="1" />
-          <rect x="17" y="4" width="4" height="16" rx="1" />
-        </svg>
-      </button>
       {#if ctrl.toolPanelOpen}
-        <aside class="sv-grid-tool-panel" aria-label="Columns tool panel">
+        {@const panelTab = ctrl.toolPanelTab}
+        <aside class="sv-grid-tool-panel" aria-label="Tool panel">
           <div class="sv-grid-tool-panel-head">
-            <span>Columns</span>
+            <span>{panelTab === "filters" ? "Filters" : "Columns"}</span>
             <button
               type="button"
               class="sv-grid-tool-panel-close"
@@ -1997,46 +2421,144 @@
               onclick={() => (ctrl.toolPanelOpen = false)}>✕</button
             >
           </div>
-          <ul class="sv-grid-tool-panel-list">
-            {#each toolPanelColumns as column, i (column.id)}
-              {@const visible = !ctrl.hiddenColumns[column.id]}
-              {@const grouped = groupingColumns.includes(column.id)}
-              <li class="sv-grid-tool-panel-item">
-                <label class="sv-grid-tool-panel-vis">
-                  <input
-                    type="checkbox"
-                    checked={visible}
-                    onchange={() => toggleColumnVisibleInPanel(column.id)}
-                  />
-                  <span class="sv-grid-tool-panel-name">{toolPanelHeaderLabel(column)}</span>
-                </label>
-                <span class="sv-grid-tool-panel-actions">
-                  <button
-                    type="button"
-                    class="sv-grid-tool-panel-btn"
-                    class:is-active={grouped}
-                    aria-label={grouped ? "Ungroup" : "Group by"}
-                    title={grouped ? "Ungroup" : "Group by this column"}
-                    onclick={() => toggleGroupInPanel(column.id)}>⊞</button
-                  >
-                  <button
-                    type="button"
-                    class="sv-grid-tool-panel-btn"
-                    aria-label="Move up"
-                    disabled={i === 0}
-                    onclick={() => moveColumnInPanel(column.id, -1)}>↑</button
-                  >
-                  <button
-                    type="button"
-                    class="sv-grid-tool-panel-btn"
-                    aria-label="Move down"
-                    disabled={i === toolPanelColumns.length - 1}
-                    onclick={() => moveColumnInPanel(column.id, 1)}>↓</button
+          <div class="sv-grid-tool-panel-tabs" role="tablist">
+            <button
+              type="button"
+              class="sv-grid-tool-panel-tab"
+              class:is-active={panelTab === "columns"}
+              role="tab"
+              aria-selected={panelTab === "columns"}
+              onclick={() => (ctrl.toolPanelTab = "columns")}>Columns</button
+            >
+            <button
+              type="button"
+              class="sv-grid-tool-panel-tab"
+              class:is-active={panelTab === "filters"}
+              role="tab"
+              aria-selected={panelTab === "filters"}
+              onclick={() => (ctrl.toolPanelTab = "filters")}>Filters</button
+            >
+          </div>
+          {#if panelTab === "columns"}
+            <ul class="sv-grid-tool-panel-list">
+              {#each toolPanelColumns as column, i (column.id)}
+                {@const visible = !ctrl.hiddenColumns[column.id]}
+                {@const grouped = groupingColumns.includes(column.id)}
+                <li class="sv-grid-tool-panel-item">
+                  <label class="sv-grid-tool-panel-vis">
+                    <input
+                      type="checkbox"
+                      checked={visible}
+                      onchange={() => toggleColumnVisibleInPanel(column.id)}
+                    />
+                    <span class="sv-grid-tool-panel-name"
+                      >{toolPanelHeaderLabel(column)}</span
+                    >
+                  </label>
+                  <span class="sv-grid-tool-panel-actions">
+                    <button
+                      type="button"
+                      class="sv-grid-tool-panel-btn"
+                      class:is-active={grouped}
+                      aria-label={grouped ? "Ungroup" : "Group by"}
+                      title={grouped ? "Ungroup" : "Group by this column"}
+                      onclick={() => toggleGroupInPanel(column.id)}>⊞</button
+                    >
+                    <button
+                      type="button"
+                      class="sv-grid-tool-panel-btn"
+                      aria-label="Move up"
+                      disabled={i === 0}
+                      onclick={() => moveColumnInPanel(column.id, -1)}>↑</button
+                    >
+                    <button
+                      type="button"
+                      class="sv-grid-tool-panel-btn"
+                      aria-label="Move down"
+                      disabled={i === toolPanelColumns.length - 1}
+                      onclick={() => moveColumnInPanel(column.id, 1)}>↓</button
+                    >
+                  </span>
+                </li>
+              {/each}
+            </ul>
+          {:else}
+            <!-- Filters tab: one filter control per filterable column, sharing
+                 the same filterMenuValues state as the column menu / filter row. -->
+            <div class="sv-grid-tool-panel-filters">
+              {#each toolPanelColumns as column (column.id)}
+                {#if column.columnDef.field && column.columnDef.filterable !== false}
+                  {@const active =
+                    filterMenuValues[column.id]?.operator ??
+                    defaultOperatorFor(column)}
+                  {@const fType = getEditorInputType(
+                    column.columnDef.editorType ?? "text",
+                  )}
+                  <div
+                    class="sv-grid-tp-filter"
+                    class:is-filtered={isColumnFiltered(column.id)}
                   >
-                </span>
-              </li>
-            {/each}
-          </ul>
+                    <div class="sv-grid-tp-filter-head">
+                      <span class="sv-grid-tp-filter-name"
+                        >{toolPanelHeaderLabel(column)}</span
+                      >
+                      {#if isColumnFiltered(column.id)}
+                        <button
+                          type="button"
+                          class="sv-grid-tp-filter-clear"
+                          aria-label={`Clear ${toolPanelHeaderLabel(column)} filter`}
+                          title="Clear filter"
+                          onclick={() => clearColumnFilter(column.id)}>✕</button
+                        >
+                      {/if}
+                    </div>
+                    <select
+                      class="sv-grid-tp-filter-op"
+                      aria-label={`${toolPanelHeaderLabel(column)} filter condition`}
+                      value={active}
+                      onchange={(e) =>
+                        updateFilterOperator(
+                          column.id,
+                          e.currentTarget.value as FilterOperator,
+                        )}
+                    >
+                      {#each operatorsForColumn(column) as option (option.value)}
+                        <option value={option.value}
+                          >{operatorOption(option.value).label}</option
+                        >
+                      {/each}
+                    </select>
+                    {#if active !== "isBlank"}
+                      <input
+                        class="sv-grid-tp-filter-input"
+                        type={fType}
+                        placeholder={active === "between" ? "From" : "Filter…"}
+                        value={filterMenuValues[column.id]?.value ?? ""}
+                        oninput={(e) =>
+                          updateFilterMenuValue(
+                            column.id,
+                            e.currentTarget.value,
+                          )}
+                      />
+                      {#if active === "between"}
+                        <input
+                          class="sv-grid-tp-filter-input"
+                          type={fType}
+                          placeholder="To"
+                          value={filterMenuValues[column.id]?.valueTo ?? ""}
+                          oninput={(e) =>
+                            updateFilterMenuValueTo(
+                              column.id,
+                              e.currentTarget.value,
+                            )}
+                        />
+                      {/if}
+                    {/if}
+                  </div>
+                {/if}
+              {/each}
+            </div>
+          {/if}
         </aside>
       {/if}
     {/if}