bo-grid 0.2.0 → 0.8.0

package/dist/grid/Grid.svelte

@@ -18,6 +18,14 @@
   import { moveIndex } from './reorder';
   import { parseClipboard, isSingleCell } from './clipboard';
   import { applyWidths, clampWidth, isResizable, type WidthMap } from './sizing';
+  import {
+    passesFilters,
+    isFilterActive,
+    defaultFilterKind,
+    distinctValues,
+    type ColumnFilter,
+    type FilterKind,
+  } from './filtering';
   import type { RowSource } from './source';
   import { RowSourceController } from './source.svelte';
   import Cell from './Cell.svelte';
@@ -42,15 +50,23 @@
     rowSelection = false,
     onRowSelectionChange,
     hiddenColumns = [],
+    onColumnVisibilityChange,
+    columnMenu = false,
+    columnsPanel = false,
     rowClass,
     getRowId = (r: GridRow) => r.id,
     onRowClick,
     sort,
     onSortChange,
+    columnFilters,
+    onFilterChange,
     footer = false,
     onCellClick,
     pinnedRows = [],
     filterRow = false,
+    filterMenu = false,
+    quickFilter = false,
+    fillHandle = false,
     emptyMessage = 'No matching rows',
     loading = false,
     rowMenu,
@@ -83,8 +99,19 @@
     /** Called with the selected row ids whenever the row-selection set changes. */
     onRowSelectionChange?: (selectedIds: Array<string | number>) => void;
     /** Column keys to hide (controlled). Build your own column-picker UI and
-        drive this prop — the grid stays presentation-only. */
+        drive this prop — the grid stays presentation-only. Composed (union) with
+        columns the user hides at runtime via the column menu. */
     hiddenColumns?: string[];
+    /** Called with all currently-hidden column keys whenever the runtime set
+        changes (column menu hide/show). */
+    onColumnVisibilityChange?: (hidden: string[]) => void;
+    /** Enable a per-column header menu (a ⋮ trigger) with sort, hide and (with
+        `filterMenu`) filter actions. Default false. */
+    columnMenu?: boolean;
+    /** Show a "Columns" button that opens a panel to toggle column visibility
+        (the place to restore columns hidden via the menu). Lazy-loaded. Default
+        false. */
+    columnsPanel?: boolean;
     /** Return extra CSS class(es) for a data row (e.g. to colour by value).
         Style them via `:global(.your-class)` since rows live inside the grid. */
     rowClass?: (row: GridRow) => string | undefined;
@@ -100,6 +127,12 @@
     sort?: SortState[];
     /** Called with the new sort order whenever a header is clicked. */
     onSortChange?: (sort: SortState[]) => void;
+    /** Controlled column filters (keyed by column key). When set, the grid
+        reflects these and reports changes via `onFilterChange` instead of holding
+        its own. Omit for uncontrolled filtering. */
+    columnFilters?: Record<string, ColumnFilter>;
+    /** Called with the full column-filter map whenever a header filter changes. */
+    onFilterChange?: (filters: Record<string, ColumnFilter>) => void;
     /** Show a pinned totals row: each column with a `groupAgg` shows that
         aggregate over all (filtered) rows. In-memory mode only. Default false. */
     footer?: boolean;
@@ -115,6 +148,20 @@
     /** Show a per-column filter input row under the header. Rows must match every
         non-empty column filter (AND). In-memory mode only. Default false. */
     filterRow?: boolean;
+    /** Enable a per-column header filter menu (lazy-loaded on first open). Each
+        filterable column shows a funnel; the menu's control matches the column
+        type (text/number/date). Override or disable per column with `col.filter`.
+        Works in source mode too (filters are delegated to the `RowSource`); set
+        filters need in-memory data. Default false. */
+    filterMenu?: boolean;
+    /** Show a built-in quick-filter search box above the grid that matches across
+        all column values (ANDed with the `filter` prop). In-memory mode only.
+        Default false. */
+    quickFilter?: boolean;
+    /** Show an Excel-style fill handle at the selection's bottom-right corner;
+        drag it to copy the selected value(s) across the extended range (editable
+        columns only). In-memory mode only. Default false. */
+    fillHandle?: boolean;
     /** Message shown when there are no rows. Default 'No matching rows'. */
     emptyMessage?: string;
     /** Show a loading overlay over the grid (for consumer-driven async work in
@@ -184,6 +231,10 @@
 
   const sel = new Selection();
   let dragging = $state(false);
+  // Fill handle: drag the selection's corner to copy its value(s) across.
+  let filling = $state(false);
+  let fillTo = $state<{ r: number; c: number } | null>(null);
+  let fillSource: { r0: number; c0: number; r1: number; c1: number } | null = null;
   let editing = $state<{ r: number; c: number } | null>(null);
   // When editing was opened by typing a character (type-to-edit), the editor
   // seeds its input with it; null means edit the existing value (dblclick/Enter).
@@ -194,24 +245,74 @@
     editSeed = seed;
     editing = { r, c };
   }
-  // Coerce + validate a raw string for cell (r,c) and emit onCellEdit.
-  // Returns true if a value was written, false if rejected (not editable,
-  // missing row, or invalid number). Shared by inline edit and paste.
+  // ---- Edit history (undo / redo) -------------------------------------------
+  // The grid is controlled (the consumer owns the data via onCellEdit), so undo
+  // re-emits onCellEdit with the previous value. History is keyed by row object
+  // reference + column, so it survives sort/filter/reorder. Multi-cell ops
+  // (paste, fill) record as one grouped step.
+  type EditCell = { row: GridRow; col: ColumnDef; old: string | number; value: string | number };
+  const UNDO_LIMIT = 100;
+  let undoStack: EditCell[][] = [];
+  let redoStack: EditCell[][] = [];
+  let currentBatch: EditCell[] | null = null;
+  function pushUndo(group: EditCell[]): void {
+    undoStack.push(group);
+    if (undoStack.length > UNDO_LIMIT) undoStack.shift();
+    redoStack = [];
+  }
+  /** Group every writeCell inside `fn` into a single undo step. */
+  function batch(fn: () => void): void {
+    const prev = currentBatch;
+    currentBatch = [];
+    fn();
+    const group = currentBatch;
+    currentBatch = prev;
+    if (group.length) pushUndo(group);
+  }
+
+  // Coerce + validate a raw string for cell (r,c) and emit onCellEdit, recording
+  // it for undo. Returns true if written, false if rejected (not editable,
+  // missing row, or invalid number). Shared by inline edit, paste and fill.
   function writeCell(r: number, c: number, raw: string): boolean {
     const col = cols[c];
     if (!col || !isEditable(col)) return false;
     const row = dataAt(r);
     if (!row) return false;
     let value: string | number = raw;
-    if (isNumeric(col)) {
+    if (col.type === 'date') {
+      // The date editor emits a yyyy-mm-dd string; store the column's ms value.
+      const ms = Date.parse(`${raw}T00:00:00Z`);
+      if (!Number.isFinite(ms)) return false;
+      value = ms;
+    } else if (isNumeric(col)) {
       const n = Number(raw);
       if (!Number.isFinite(n)) return false; // reject invalid number, keep old value
       value = n;
     }
     if (col.validate && !col.validate(value, row)) return false; // consumer rejected it
+    const old = (row[col.key] ?? '') as string | number;
     onCellEdit?.({ row, column: col, value });
+    if (onCellEdit) {
+      const entry: EditCell = { row, col, old, value };
+      if (currentBatch) currentBatch.push(entry);
+      else pushUndo([entry]);
+    }
     return true;
   }
+  function undo(): void {
+    const group = undoStack.pop();
+    if (!group) return;
+    for (const e of group) onCellEdit?.({ row: e.row, column: e.col, value: e.old });
+    redoStack.push(group);
+    editing = null;
+  }
+  function redo(): void {
+    const group = redoStack.pop();
+    if (!group) return;
+    for (const e of group) onCellEdit?.({ row: e.row, column: e.col, value: e.value });
+    undoStack.push(group);
+    editing = null;
+  }
 
   function commitEdit(r: number, c: number, raw: string) {
     editing = null;
@@ -233,6 +334,19 @@
   // Per-column filter text (filterRow), keyed by column key.
   let colFilters = $state<Record<string, string>>({});
 
+  // Structured per-column filters from the header filter menu (v0.3), keyed by
+  // column key. Menu filters take precedence over the filterRow text inputs.
+  // Controlled by the `columnFilters` prop when provided, else internal state.
+  let internalColumnFilters = $state<Record<string, ColumnFilter>>({});
+  const activeColumnFilters = $derived(columnFilters ?? internalColumnFilters);
+  function setColumnFilters(next: Record<string, ColumnFilter>): void {
+    if (columnFilters === undefined) internalColumnFilters = next; // uncontrolled: own it
+    onFilterChange?.(next); // always notify
+  }
+
+  // Built-in quick-filter text (global, matches across all columns).
+  let quickText = $state('');
+
   // Whole-row selection (opt-in), keyed by row id so it survives sort/filter.
   // Plain Set + a version counter for reactivity (same pattern as `collapsed`).
   const SEL_W = 40; // checkbox column width (px)
@@ -273,17 +387,30 @@
   }
 
   const ordered = $derived(order.length === columns.length ? order.map((i) => columns[i]) : columns);
-  // Drop hidden columns (controlled via `hiddenColumns`). Applied after ordering
-  // so `order` stays indexed over the full column set.
+  // Columns hidden at runtime via the column menu, unioned with the controlled
+  // `hiddenColumns` prop.
+  let runtimeHidden = $state<string[]>([]);
+  const effectiveHidden = $derived(
+    runtimeHidden.length ? [...new Set([...hiddenColumns, ...runtimeHidden])] : hiddenColumns,
+  );
+  // Drop hidden columns. Applied after ordering so `order` stays indexed over the
+  // full column set.
   const visible = $derived(
-    hiddenColumns.length ? ordered.filter((c) => !hiddenColumns.includes(c.key)) : ordered,
+    effectiveHidden.length ? ordered.filter((c) => !effectiveHidden.includes(c.key)) : ordered,
   );
   // Apply any resize overrides (turns the dragged column fixed-width), then
   // pin-arrange. Both are no-ops by default, so the grid stays fit-to-width.
   const sized = $derived(applyWidths(visible, widths));
-  // Pin-arrangement: pinned columns move to the front and get sticky offsets.
+  // Runtime pin overrides (column menu) layered on top of static `col.pinned`.
+  let pinOverrides = $state<Record<string, 'left' | 'right' | false>>({});
+  const pinnedSized = $derived(
+    Object.keys(pinOverrides).length
+      ? sized.map((c) => (c.key in pinOverrides ? { ...c, pinned: pinOverrides[c.key] } : c))
+      : sized,
+  );
+  // Pin-arrangement: pinned columns move to the edges and get sticky offsets.
   // When nothing is pinned this is a no-op and the grid stays fit-to-width.
-  const layout = $derived(arrangePinned(sized));
+  const layout = $derived(arrangePinned(pinnedSized));
   const cols = $derived(layout.columns);
   const pinned = $derived(layout.anyPinned);
 
@@ -422,6 +549,105 @@
     });
   });
 
+  // ---- Runtime column visibility (column menu) ------------------------------
+  function hiddenStorageKey(): string | null {
+    return persistKey ? `bo-grid:hidden:${persistKey}` : null;
+  }
+  $effect(() => {
+    persistKey;
+    untrack(() => {
+      const key = hiddenStorageKey();
+      if (!key || typeof localStorage === 'undefined') return;
+      try {
+        const saved = JSON.parse(localStorage.getItem(key) ?? 'null');
+        if (Array.isArray(saved)) runtimeHidden = saved.filter((k) => typeof k === 'string');
+      } catch {
+        /* corrupt value — ignore */
+      }
+    });
+  });
+  function setRuntimeHidden(next: string[]): void {
+    runtimeHidden = next;
+    const key = hiddenStorageKey();
+    if (key && typeof localStorage !== 'undefined') {
+      try {
+        localStorage.setItem(key, JSON.stringify(next));
+      } catch {
+        /* storage unavailable — still applies this session */
+      }
+    }
+    onColumnVisibilityChange?.(effectiveHidden);
+  }
+  function hideColumn(key: string): void {
+    if (!runtimeHidden.includes(key)) setRuntimeHidden([...runtimeHidden, key]);
+  }
+  function showColumn(key: string): void {
+    if (runtimeHidden.includes(key)) setRuntimeHidden(runtimeHidden.filter((k) => k !== key));
+  }
+  function toggleColumnVisible(key: string): void {
+    if (effectiveHidden.includes(key)) showColumn(key);
+    else hideColumn(key);
+  }
+  function showAllColumns(): void {
+    setRuntimeHidden([]);
+  }
+  // Columns tool panel (lazy-loaded checklist), anchored at the toolbar button.
+  let ToolPanelComp = $state<typeof import('./ToolPanel.svelte').default | null>(null);
+  let panelXY = $state<{ x: number; y: number } | null>(null);
+  async function openToolPanel(e: Event) {
+    e.stopPropagation();
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    if (!ToolPanelComp) ToolPanelComp = (await import('./ToolPanel.svelte')).default;
+    panelXY = { x: rect.left, y: rect.bottom + 2 };
+  }
+  $effect(() => {
+    if (!panelXY) return;
+    const close = () => (panelXY = null);
+    const onKey = (e: KeyboardEvent) => e.key === 'Escape' && (panelXY = null);
+    window.addEventListener('pointerdown', close);
+    window.addEventListener('keydown', onKey);
+    window.addEventListener('blur', close);
+    return () => {
+      window.removeEventListener('pointerdown', close);
+      window.removeEventListener('keydown', onKey);
+      window.removeEventListener('blur', close);
+    };
+  });
+
+  // ---- Runtime column pinning (column menu) ---------------------------------
+  function pinStorageKey(): string | null {
+    return persistKey ? `bo-grid:pin:${persistKey}` : null;
+  }
+  $effect(() => {
+    persistKey;
+    untrack(() => {
+      const key = pinStorageKey();
+      if (!key || typeof localStorage === 'undefined') return;
+      try {
+        const saved = JSON.parse(localStorage.getItem(key) ?? 'null');
+        if (saved && typeof saved === 'object') pinOverrides = saved as typeof pinOverrides;
+      } catch {
+        /* corrupt value — ignore */
+      }
+    });
+  });
+  function setPinOverride(key: string, side: 'left' | 'right' | false): void {
+    pinOverrides = { ...pinOverrides, [key]: side };
+    const sk = pinStorageKey();
+    if (sk && typeof localStorage !== 'undefined') {
+      try {
+        localStorage.setItem(sk, JSON.stringify(pinOverrides));
+      } catch {
+        /* storage unavailable — still applies this session */
+      }
+    }
+  }
+  // Effective pin side for a column key: runtime override, else static config.
+  function pinSideOf(col: ColumnDef): 'left' | 'right' | false {
+    if (col.key in pinOverrides) return pinOverrides[col.key];
+    return col.pinned === true ? 'left' : col.pinned || false;
+  }
+
   let resize: { key: string; startX: number; startW: number; min?: number; max?: number } | null = null;
   let justResized = false;
 
@@ -503,16 +729,22 @@
     const base = rows;
     const allCols = columns;
     const f = filter.trim().toLowerCase();
+    const q = quickText.trim().toLowerCase();
     const s = sorts;
-    // Active per-column filters (filterRow): [key, lowercased needle] pairs.
-    const colF = Object.entries(colFilters)
-      .map(([k, v]) => [k, v.trim().toLowerCase()] as const)
-      .filter(([, v]) => v.length > 0);
+    // Active per-column filters: menu-driven structured filters (columnFilters)
+    // take precedence; filterRow text inputs (colFilters) fill in the rest as
+    // case-insensitive "contains".
+    const active: Record<string, ColumnFilter> = { ...activeColumnFilters };
+    for (const [k, v] of Object.entries(colFilters)) {
+      if (!active[k] && v.trim()) active[k] = { kind: 'text', op: 'contains', q: v };
+    }
+    const hasColFilters = Object.keys(active).length > 0;
     return untrack(() => {
       let r = base;
       if (f) r = r.filter((row) => allCols.some((c) => String(row[c.key] ?? '').toLowerCase().includes(f)));
-      if (colF.length > 0) {
-        r = r.filter((row) => colF.every(([k, v]) => String(row[k] ?? '').toLowerCase().includes(v)));
+      if (q) r = r.filter((row) => allCols.some((c) => String(row[c.key] ?? '').toLowerCase().includes(q)));
+      if (hasColFilters) {
+        r = r.filter((row) => passesFilters(row, active));
       }
       if (s.length > 0) {
         const colOf = (k: string) => allCols.find((c) => c.key === k);
@@ -703,7 +935,8 @@
     const range = { start, end: start + visibleCount };
     const s = sorts;
     const f = filter;
-    void ctrl.fetch(range, s, f);
+    const cf = activeColumnFilters;
+    void ctrl.fetch(range, s, f, cf);
   });
 
   function dataAt(r: number): GridRow | null {
@@ -755,7 +988,58 @@
   }
 
   function onCellEnter(r: number, c: number) {
-    if (dragging) sel.extendTo(r, c);
+    if (filling) fillTo = { r, c };
+    else if (dragging) sel.extendTo(r, c);
+  }
+
+  // Fill handle: start dragging from the selection's bottom-right corner.
+  function onFillStart(): void {
+    const b = sel.bounds;
+    if (!b) return;
+    fillSource = { ...b };
+    fillTo = { r: b.r1, c: b.c1 };
+    filling = true;
+  }
+  // The rectangle the fill drag currently covers (extends down/right only).
+  const fillRange = $derived.by(() => {
+    if (!filling || !fillSource || !fillTo) return null;
+    return {
+      r0: fillSource.r0,
+      c0: fillSource.c0,
+      r1: Math.max(fillSource.r1, fillTo.r),
+      c1: Math.max(fillSource.c1, fillTo.c),
+    };
+  });
+  function inFillPreview(r: number, c: number): boolean {
+    const fr = fillRange;
+    return !!fr && r >= fr.r0 && r <= fr.r1 && c >= fr.c0 && c <= fr.c1 && !sel.contains(r, c);
+  }
+  // Commit the fill: tile the source block's values across the extended range.
+  function commitFill(): void {
+    if (!filling) return;
+    filling = false;
+    const b = fillSource;
+    const ft = fillTo;
+    fillTo = null;
+    fillSource = null;
+    if (!b || !ft) return;
+    const r1 = Math.max(b.r1, ft.r);
+    const c1 = Math.max(b.c1, ft.c);
+    if (r1 === b.r1 && c1 === b.c1) return; // no extension
+    const srcRows = b.r1 - b.r0 + 1;
+    const srcCols = b.c1 - b.c0 + 1;
+    batch(() => {
+      for (let r = b.r0; r <= r1; r++) {
+        for (let c = b.c0; c <= c1; c++) {
+          if (r <= b.r1 && c <= b.c1) continue; // skip the source block
+          const srcRow = dataAt(b.r0 + ((r - b.r0) % srcRows));
+          if (!srcRow) continue;
+          writeCell(r, c, String(srcRow[cols[b.c0 + ((c - b.c0) % srcCols)].key] ?? ''));
+        }
+      }
+    });
+    sel.anchor = { r: b.r0, c: b.c0 };
+    sel.focus = { r: r1, c: c1 };
   }
 
   // Right-click row menu (floating).
@@ -781,6 +1065,96 @@
     };
   });
 
+  // Header filter menu (v0.3), lazy-loaded on first open to keep the core lean.
+  let FilterMenuComp = $state<typeof import('./FilterMenu.svelte').default | null>(null);
+  let filterUi = $state<{
+    key: string;
+    kind: FilterKind;
+    header: string;
+    values: string[];
+    x: number;
+    y: number;
+  } | null>(null);
+  function filterKindFor(col: ColumnDef): FilterKind {
+    return typeof col.filter === 'string' ? col.filter : defaultFilterKind(col);
+  }
+  async function openFilterMenu(col: ColumnDef, e: Event) {
+    e.stopPropagation();
+    // Read the anchor rect now — after the await, the event's currentTarget is null.
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    let kind = filterKindFor(col);
+    // A set filter needs distinct values; in source mode they can't be
+    // enumerated, so fall back to the column's typed filter.
+    if (source && kind === 'set') kind = defaultFilterKind(col);
+    const values = !source && kind === 'set' ? distinctValues(rows, col.key) : [];
+    if (!FilterMenuComp) FilterMenuComp = (await import('./FilterMenu.svelte')).default;
+    filterUi = { key: col.key, kind, header: col.header, values, x: rect.left, y: rect.bottom + 2 };
+  }
+  function applyColumnFilter(key: string, f: ColumnFilter | null): void {
+    const next = { ...activeColumnFilters };
+    if (f) next[key] = f;
+    else delete next[key];
+    setColumnFilters(next);
+    filterUi = null;
+  }
+  $effect(() => {
+    if (!filterUi) return;
+    const close = () => (filterUi = null);
+    const onKey = (e: KeyboardEvent) => e.key === 'Escape' && (filterUi = null);
+    window.addEventListener('pointerdown', close);
+    window.addEventListener('keydown', onKey);
+    window.addEventListener('blur', close);
+    return () => {
+      window.removeEventListener('pointerdown', close);
+      window.removeEventListener('keydown', onKey);
+      window.removeEventListener('blur', close);
+    };
+  });
+
+  // Autosize a column to its content (a character-count heuristic — no DOM
+  // measurement, so it's cheap and deterministic). Sets the same width override
+  // as a manual resize.
+  function autosizeColumn(col: ColumnDef): void {
+    const CHAR_PX = 7.5;
+    const PAD = 32; // cell padding + room for the header icons
+    let maxLen = col.header.length;
+    if (!source) {
+      for (const row of view.slice(0, 500)) {
+        const s = formatCell(col, row[col.key], row);
+        if (s.length > maxLen) maxLen = s.length;
+      }
+    }
+    const w = clampWidth(Math.round(maxLen * CHAR_PX) + PAD, col.minWidth, col.maxWidth);
+    widths = { ...widths, [col.key]: w };
+    persistWidths();
+    onColumnResize?.(col.key, w);
+  }
+
+  // Column header menu (⋮): sort / pin / autosize / hide. Reuses the floating
+  // RowMenu (a light action list — no lazy chunk, unlike the filter menu).
+  function columnMenuItems(col: ColumnDef): Array<{ label: string; onSelect: () => void }> {
+    const items: Array<{ label: string; onSelect: () => void }> = [];
+    if (isSortable(col)) {
+      items.push({ label: 'Sort ascending', onSelect: () => setSorts([{ key: col.key, dir: 'asc' }]) });
+      items.push({ label: 'Sort descending', onSelect: () => setSorts([{ key: col.key, dir: 'desc' }]) });
+      if (sortInfo(col.key)) {
+        items.push({ label: 'Clear sort', onSelect: () => setSorts(sorts.filter((s) => s.key !== col.key)) });
+      }
+    }
+    const side = pinSideOf(col);
+    if (side !== 'left') items.push({ label: 'Pin left', onSelect: () => setPinOverride(col.key, 'left') });
+    if (side !== 'right') items.push({ label: 'Pin right', onSelect: () => setPinOverride(col.key, 'right') });
+    if (side) items.push({ label: 'Unpin', onSelect: () => setPinOverride(col.key, false) });
+    if (isResizable(col, resizable)) items.push({ label: 'Autosize', onSelect: () => autosizeColumn(col) });
+    items.push({ label: 'Hide column', onSelect: () => hideColumn(col.key) });
+    return items;
+  }
+  function openColumnMenu(col: ColumnDef, e: Event) {
+    e.stopPropagation();
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    menu = { x: rect.left, y: rect.bottom + 2, items: columnMenuItems(col) };
+  }
+
   function onCellClicked(r: number, c: number, e: MouseEvent) {
     if (!onCellClick) return;
     const row = dataAt(r);
@@ -850,18 +1224,20 @@
     const c0 = anchor.c0;
     const rSpan = single ? anchor.r1 - anchor.r0 + 1 : grid.length;
     let wrote = 0;
-    for (let dr = 0; dr < rSpan; dr++) {
-      const r = r0 + dr;
-      if (r > rowCount - 1) break;
-      const srcRow = single ? grid[0] : grid[dr];
-      const cSpan = single ? anchor.c1 - anchor.c0 + 1 : srcRow.length;
-      for (let dc = 0; dc < cSpan; dc++) {
-        const c = c0 + dc;
-        if (c > cols.length - 1) break;
-        const raw = single ? grid[0][0] : (srcRow[dc] ?? '');
-        if (writeCell(r, c, raw)) wrote++;
+    batch(() => {
+      for (let dr = 0; dr < rSpan; dr++) {
+        const r = r0 + dr;
+        if (r > rowCount - 1) break;
+        const srcRow = single ? grid[0] : grid[dr];
+        const cSpan = single ? anchor.c1 - anchor.c0 + 1 : srcRow.length;
+        for (let dc = 0; dc < cSpan; dc++) {
+          const c = c0 + dc;
+          if (c > cols.length - 1) break;
+          const raw = single ? grid[0][0] : (srcRow[dc] ?? '');
+          if (writeCell(r, c, raw)) wrote++;
+        }
       }
-    }
+    });
     // Surface the pasted region as the new selection so it's visible.
     if (wrote > 0) {
       const rEnd = Math.min(r0 + rSpan - 1, rowCount - 1);
@@ -907,12 +1283,26 @@
     if (!mod && !e.altKey && e.key.length === 1 && e.key !== ' ' && sel.focus && !editing) {
       const f = sel.focus;
       const col = cols[f.c];
-      if (isEditable(col) && !(col.options && col.options.length) && dataAt(f.r)) {
+      if (isEditable(col) && col.type !== 'date' && !(col.options && col.options.length) && dataAt(f.r)) {
         e.preventDefault();
         startEdit(f.r, f.c, e.key);
         return;
       }
     }
+    if (mod && e.key.toLowerCase() === 'z' && !e.shiftKey) {
+      if (undoStack.length) {
+        e.preventDefault();
+        undo();
+        return;
+      }
+    }
+    if (mod && (e.key.toLowerCase() === 'y' || (e.shiftKey && e.key.toLowerCase() === 'z'))) {
+      if (redoStack.length) {
+        e.preventDefault();
+        redo();
+        return;
+      }
+    }
     if (mod && e.key.toLowerCase() === 'a') {
       e.preventDefault();
       sel.selectAll(rowCount, cols.length);
@@ -943,6 +1333,13 @@
         return;
       }
     }
+    // Open the column menu from the keyboard (Alt+ArrowDown) at the focused column.
+    if (columnMenu && sel.focus && e.altKey && e.key === 'ArrowDown') {
+      e.preventDefault();
+      const rect = document.getElementById(activeId ?? '')?.getBoundingClientRect();
+      menu = { x: rect?.left ?? 0, y: rect?.bottom ?? 0, items: columnMenuItems(cols[sel.focus.c]) };
+      return;
+    }
     // Tree nav: ArrowRight expands a collapsed node, ArrowLeft collapses an
     // expanded one (treegrid pattern); otherwise arrows move normally.
     if (treeData && sel.focus && (e.key === 'ArrowRight' || e.key === 'ArrowLeft')) {
@@ -988,7 +1385,10 @@
   }
 
   $effect(() => {
-    const up = () => (dragging = false);
+    const up = () => {
+      dragging = false;
+      if (filling) commitFill();
+    };
     window.addEventListener('pointerup', up);
     return () => window.removeEventListener('pointerup', up);
   });
@@ -1021,6 +1421,22 @@
   bind:this={gridEl}
   onkeydown={onKeydown}
 >
+  {#if quickFilter || columnsPanel}
+    <div class="bo-toolbar">
+      {#if quickFilter}
+        <input
+          class="bo-quickfilter"
+          type="search"
+          placeholder="Search…"
+          aria-label="Quick filter"
+          bind:value={quickText}
+        />
+      {/if}
+      {#if columnsPanel}
+        <button class="bo-cols-toggle" type="button" onclick={openToolPanel}>⊟ Columns</button>
+      {/if}
+    </div>
+  {/if}
   {#if headerGroups}
     <div class="head-groups" aria-hidden="true" bind:this={groupHeadEl} style={pinned ? 'overflow:hidden;' : ''}>
       {#if expandable}<span class="expandcell" style={expandCellStyle(true)}></span>{/if}
@@ -1095,6 +1511,40 @@
             {si?.dir === 'asc' ? '▲' : '▼'}{#if sorts.length > 1}<span class="ord">{si?.pos}</span>{/if}
           </span>
         {/if}
+        {#if filterMenu && col.type !== 'sparkline' && col.filter !== false}
+          <span
+            class="funnel"
+            class:on={isFilterActive(activeColumnFilters[col.key])}
+            role="button"
+            tabindex="-1"
+            aria-label="Filter {col.header}"
+            title="Filter {col.header}"
+            onclick={(e) => openFilterMenu(col, e)}
+            onkeydown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') openFilterMenu(col, e);
+            }}
+            ondragstart={(e) => e.preventDefault()}
+            draggable="false"
+          >
+            <svg viewBox="0 0 10 10" width="9" height="9" aria-hidden="true">
+              <path d="M0 1h10L6 6v3L4 8V6z" fill="currentColor" />
+            </svg>
+          </span>
+        {/if}
+        {#if columnMenu}
+          <span
+            class="hmenu"
+            role="button"
+            tabindex="-1"
+            aria-label="{col.header} menu"
+            title="{col.header} menu"
+            onclick={(e) => openColumnMenu(col, e)}
+            onkeydown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') openColumnMenu(col, e);
+            }}
+            ondragstart={(e) => e.preventDefault()}
+            draggable="false">⋮</span>
+        {/if}
         {#if isResizable(col, resizable)}
           <span
             class="grip"
@@ -1249,6 +1699,9 @@
                 alt={item.vr % 2 === 1}
                 editing={editing?.r === item.vr && editing?.c === ci}
                 seed={editing?.r === item.vr && editing?.c === ci ? editSeed : null}
+                fillCorner={fillHandle && !!sel.bounds && item.vr === sel.bounds.r1 && ci === sel.bounds.c1}
+                fillpreview={inFillPreview(item.vr, ci)}
+                {onFillStart}
                 tree={treeData && ci === 0
                   ? {
                       depth: item.depth ?? 0,
@@ -1302,6 +1755,34 @@
   {#if menu}
     <RowMenu x={menu.x} y={menu.y} items={menu.items} onClose={() => (menu = null)} />
   {/if}
+
+  {#if filterUi && FilterMenuComp}
+    {@const Menu = FilterMenuComp}
+    {@const key = filterUi.key}
+    <Menu
+      kind={filterUi.kind}
+      header={filterUi.header}
+      filter={activeColumnFilters[key] ?? null}
+      values={filterUi.values}
+      x={filterUi.x}
+      y={filterUi.y}
+      onApply={(f) => applyColumnFilter(key, f)}
+      onClose={() => (filterUi = null)}
+    />
+  {/if}
+
+  {#if panelXY && ToolPanelComp}
+    {@const Panel = ToolPanelComp}
+    <Panel
+      columns={ordered.map((c) => ({ key: c.key, header: c.header }))}
+      hidden={effectiveHidden}
+      x={panelXY.x}
+      y={panelXY.y}
+      onToggle={toggleColumnVisible}
+      onShowAll={showAllColumns}
+      onClose={() => (panelXY = null)}
+    />
+  {/if}
 </div>
 
 <style>
@@ -1322,6 +1803,15 @@
     --bo-header-h: var(--bo-grid-header-h, 28px);
     --bo-mono: var(--bo-grid-mono, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace);
     --bo-sans: var(--bo-grid-sans, Inter, "Segoe UI", system-ui, sans-serif);
+    /* Layout/density tokens (override via --bo-grid-* for a custom look). */
+    --bo-radius: var(--bo-grid-radius, 8px);
+    --bo-font-size: var(--bo-grid-font-size, 13px);
+    --bo-cell-pad: var(--bo-grid-cell-pad, 8px);
+
+    /* Theme native controls (checkboxes, date pickers, number spinners, search
+       clear buttons, scrollbars) and accent fills to match the grid theme. */
+    color-scheme: var(--bo-grid-scheme, dark);
+    accent-color: var(--bo-up);
 
     display: flex;
     flex-direction: column;
@@ -1329,13 +1819,48 @@
     font-family: var(--bo-sans);
     background: var(--bo-bg);
     border: 0.5px solid var(--bo-border);
-    border-radius: 8px;
+    border-radius: var(--bo-radius);
     overflow: hidden;
     outline: none;
   }
   .grid:focus-visible {
     border-color: var(--bo-sel-border);
   }
+  /* Built-in quick-filter toolbar (opt-in via `quickFilter`). */
+  .bo-toolbar {
+    display: flex;
+    padding: 6px;
+    border-bottom: 0.5px solid var(--bo-border);
+    background: var(--bo-header-bg);
+  }
+  .bo-quickfilter {
+    width: 100%;
+    max-width: 260px;
+    padding: 5px 9px;
+    font: inherit;
+    font-size: 12px;
+    color: var(--bo-text);
+    background: var(--bo-bg);
+    border: 0.5px solid var(--bo-border);
+    border-radius: 6px;
+  }
+  .bo-quickfilter::placeholder {
+    color: var(--bo-text-dim);
+  }
+  .bo-cols-toggle {
+    margin-left: auto;
+    padding: 5px 11px;
+    font: inherit;
+    font-size: 12px;
+    color: var(--bo-text);
+    background: var(--bo-bg);
+    border: 0.5px solid var(--bo-border);
+    border-radius: 6px;
+    cursor: pointer;
+  }
+  .bo-cols-toggle:hover {
+    border-color: var(--bo-text-dim);
+  }
 
   /* Spanning header groups (row above the column headers). */
   .head-groups {
@@ -1377,7 +1902,7 @@
     display: flex;
     align-items: center;
     gap: 4px;
-    padding: 0 8px;
+    padding: 0 var(--bo-cell-pad, 8px);
     min-width: 0;
     font: inherit;
     font-size: 11px;
@@ -1450,6 +1975,40 @@
     color: var(--bo-text-dim);
     font-variant-numeric: tabular-nums;
   }
+  /* Header filter funnel: a click target that opens the (lazy) filter menu. */
+  .h .funnel {
+    display: inline-flex;
+    align-items: center;
+    margin-left: 4px;
+    color: var(--bo-text-dim);
+    opacity: 0.55;
+    cursor: pointer;
+    transition: opacity 120ms, color 120ms;
+  }
+  .h .funnel:hover {
+    opacity: 1;
+    color: var(--bo-text);
+  }
+  .h .funnel.on {
+    opacity: 1;
+    color: var(--bo-up);
+  }
+  /* Header column-menu (⋮) trigger. */
+  .h .hmenu {
+    display: inline-flex;
+    align-items: center;
+    margin-left: 4px;
+    font-size: 14px;
+    line-height: 1;
+    color: var(--bo-text-dim);
+    opacity: 0.55;
+    cursor: pointer;
+    transition: opacity 120ms, color 120ms;
+  }
+  .h .hmenu:hover {
+    opacity: 1;
+    color: var(--bo-text);
+  }
 
   /* Per-column filter input row, under the header. */
   .filter-row {
@@ -1487,6 +2046,26 @@
     overflow-y: auto;
     overflow-x: hidden;
     user-select: none;
+    /* Thin, themed scrollbars (Firefox) — Chromium/Safari below. */
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in srgb, var(--bo-text-dim) 55%, transparent) transparent;
+  }
+  .viewport::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  .viewport::-webkit-scrollbar-thumb {
+    background: color-mix(in srgb, var(--bo-text-dim) 45%, transparent);
+    border: 2px solid transparent;
+    background-clip: padding-box;
+    border-radius: 6px;
+  }
+  .viewport::-webkit-scrollbar-thumb:hover {
+    background: color-mix(in srgb, var(--bo-text-dim) 70%, transparent);
+    background-clip: padding-box;
+  }
+  .viewport::-webkit-scrollbar-corner {
+    background: transparent;
   }
   .empty {
     position: absolute;