@svgrid/grid 3.0.2 → 3.0.4

package/dist/SvGrid.controller.svelte.js

@@ -6,6 +6,8 @@ import "./sv-grid-scrollbar.js";
 import { computeColumnStat, formatsNeedingStats, formatNeedsStats, } from "./conditional-formatting.js";
 import { rawToNumber, } from "./SvGrid.helpers.js";
 import { createFeatures } from "./features.js";
+import { pushHistory } from "./history.js";
+import { buildMergeIndex } from "./merges.js";
 import { createScrollSync, } from "./scroll-sync.js";
 import { createKeyboard, } from "./keyboard-handlers.js";
 import { createSummaries, } from "./summaries.js";
@@ -215,7 +217,12 @@ export function createSvGridController(rawProps, domIdBase) {
     let pendingScrollTop = 0;
     let pendingScrollLeft = 0;
     let scrollSyncRaf = null;
-    let selectionRange = $state({ anchor: null, focus: null });
+    // `$state.raw`: every writer replaces the whole object, and every rendered
+    // cell's selection derived reads it. Under a deep proxy each of those ~300
+    // deriveds tracked the nested anchor/focus row/col signals separately (six
+    // dependencies per cell to mark and re-check on every arrow key) where one
+    // will do.
+    let selectionRange = $state.raw({ anchor: null, focus: null });
     // Extra committed ranges for multi-range (Ctrl+drag) selection. The
     // `selectionRange` above is always the ACTIVE range being manipulated; these
     // are the finished ones. Full selection = these + the active range.
@@ -243,7 +250,12 @@ export function createSvGridController(rawProps, domIdBase) {
     // Full-row editing: the row currently in whole-row edit + its per-column
     // draft (keyed by column id). Null when not in full-row mode.
     let fullRowEdit = $state(null);
-    let editedCellValues = $state({});
+    // `$state.raw`, not `$state`: every writer replaces the whole object, and
+    // the render path asks `key in editedCellValues` once per rendered cell. On
+    // a deep proxy that `in` check, run inside an effect, creates and keeps a
+    // per-key signal for every cell that ever scrolls into view - a leak that
+    // grows with rows x columns and a Map lookup per cell per render.
+    let editedCellValues = $state.raw({});
     const UNDO_LIMIT = 200;
     let history = $state([]);
     /** Index in `history` of the LAST applied step. -1 means "nothing applied".
@@ -253,6 +265,11 @@ export function createSvGridController(rawProps, domIdBase) {
     /** Bumps on every undo / redo / record so $derived consumers can
      *  observe via the api without subscribing to history directly. */
     let historyVersion = $state(0);
+    /** Set while a `runHistoryGroup` call is on the stack, so every step pushed
+     *  inside one action shares a group id and undoes together. Deliberately not
+     *  $state: it is written and read synchronously inside a single call and
+     *  nothing renders from it. */
+    let historyGroupId = undefined;
     let tooltip = $state(null);
     let tooltipTimer = null;
     // ---- Find-in-grid ----------------------------------------------------
@@ -288,6 +305,26 @@ export function createSvGridController(rawProps, domIdBase) {
     let editorSelectAll = true;
     /** Per-column width overrides set by the resize handles. */
     let columnWidths = $state({});
+    /**
+     * Columns folded to nothing, the way a sheet hides a column: the column
+     * keeps its index, its cells and its width for later, and takes no room.
+     * Distinct from `hiddenColumns`, which takes a column out of the model
+     * and shifts every index after it; a spreadsheet's formulas and formats
+     * are keyed by index and could not follow that.
+     */
+    let collapsedColumns = $state({});
+    function setColumnCollapsed(columnId, collapsed) {
+        if (!!collapsedColumns[columnId] === collapsed)
+            return;
+        if (collapsed) {
+            collapsedColumns = { ...collapsedColumns, [columnId]: true };
+        }
+        else {
+            const next = { ...collapsedColumns };
+            delete next[columnId];
+            collapsedColumns = next;
+        }
+    }
     const MIN_COLUMN_WIDTH = 40;
     /** Columns pinned to the left or right edge of the grid (sticky positioning).
      *  Seeded from `props.initialColumnPinning` so demos / tests can show the
@@ -373,26 +410,53 @@ export function createSvGridController(rawProps, domIdBase) {
         const hb = column.columnDef?.hideBelow;
         return hb != null && viewportWidth > 0 && viewportWidth < hb;
     }
-    const scrollMetrics = $derived.by(function scrollMetrics_d() {
+    /**
+     * Live scroll geometry of the scroll container (feeds the custom
+     * scrollbars and `hasVerticalOverflow`).
+     *
+     * Measured from a plain `$effect`, NOT inside a `$derived`, on purpose.
+     * `scrollTop` / `scrollHeight` / `scrollWidth` reads force a synchronous
+     * layout whenever the tree is dirty. As a derived this was pulled by the
+     * shell's `class:sv-grid-has-vscroll` at the very start of every scroll
+     * flush - before the recycled rows had been rewritten - so it forced a
+     * full table layout that the row writes then invalidated again, and the
+     * browser laid the table out a second time before painting. Two table
+     * layouts per arrow key on a large grid. An effect runs after the flush
+     * has written the DOM, so the reads below land on a tree the browser has
+     * to lay out anyway, and the pre-paint pass is incremental.
+     *
+     * The version reads keep the same triggers the derived had: a scroll
+     * tick, a shell resize, and either virtualizer's window/size change (data
+     * load, row / column count change) - without those the scrollbar kept a
+     * stale `content-size` ≈ 0, its hidden-check tripped, it set
+     * `pointer-events: none`, and the user could not drag it.
+     */
+    let scrollMetrics = $state.raw({
+        scrollTop: 0,
+        scrollLeft: 0,
+        scrollHeight: 0,
+        scrollWidth: 0,
+    });
+    $effect(function scrollMetrics_e() {
         scrollVersion;
         viewportVersion;
-        // Track the virtualizers' versions too so when data loads or row /
-        // column counts change, scrollMetrics re-reads the DOM's grown
-        // scrollHeight / scrollWidth. Without these deps the scrollbar
-        // receives a stale `content-size` ≈ 0, its hidden-check trips, it
-        // sets `pointer-events: none`, and the user can't drag it. The
-        // identifiers below are declared further down - derived callbacks
-        // run lazily, so by the time this fires they're in scope.
         virtualizer.version;
         columnVirtualizerVersion;
-        return {
-            scrollTop: scrollContainer?.scrollTop ?? 0,
-            scrollLeft: scrollContainer?.scrollLeft ?? 0,
-            clientHeight: scrollContainer?.clientHeight ?? 0,
-            clientWidth: scrollContainer?.clientWidth ?? 0,
-            scrollHeight: scrollContainer?.scrollHeight ?? 0,
-            scrollWidth: scrollContainer?.scrollWidth ?? 0,
-        };
+        const el = scrollContainer;
+        if (!el)
+            return;
+        const scrollTop = el.scrollTop;
+        const scrollLeft = el.scrollLeft;
+        const scrollHeight = el.scrollHeight;
+        const scrollWidth = el.scrollWidth;
+        const prev = untrack(() => scrollMetrics);
+        if (prev.scrollTop === scrollTop &&
+            prev.scrollLeft === scrollLeft &&
+            prev.scrollHeight === scrollHeight &&
+            prev.scrollWidth === scrollWidth) {
+            return;
+        }
+        scrollMetrics = { scrollTop, scrollLeft, scrollHeight, scrollWidth };
     });
     /** Vertical overflow from the virtualizer's authoritative total size,
      *  NOT from `scrollMetrics.scrollHeight` alone. Reading DOM dimensions
@@ -1355,8 +1419,14 @@ export function createSvGridController(rawProps, domIdBase) {
     const paginationTotalRows = $derived(externalPaginationEnabled ? (props.rowCount ?? 0) : paginatedRowTotal);
     const paginationPageIndex = $derived(externalPaginationEnabled ? (props.pageIndex ?? 0) : paginationState.pageIndex);
     const paginationPageSize = $derived(externalPaginationEnabled ? (props.pageSize ?? 10) : paginationState.pageSize);
+    // Tracks `dataStateVersion`, which the store subscription bumps when the
+    // rowSelection slice (among others) changes - NOT the catch-all
+    // `gridStateVersion`, which also bumps on every active-cell move. Every
+    // rendered row and cell reads this (`sv-grid-row-selected`, `aria-selected`),
+    // so on the catch-all each arrow key re-marked and re-checked ~400 effects
+    // to find the same object.
     const rowSelectionState = $derived.by(function rowSelectionState_d() {
-        gridStateVersion;
+        dataStateVersion;
         return grid.getState().rowSelection ?? {};
     });
     // ---- Selection bar ----------------------------------------------------
@@ -1652,7 +1722,9 @@ export function createSvGridController(rawProps, domIdBase) {
     let chartMaximized = $state(false);
     let chartFloatRect = $state.raw(null);
     let chartAiHandler = $state(null);
+    let chartExplainHandler = $state(null);
     let chartSeq = 0;
+    const isZoomWindow = (v) => !!v && typeof v === "object" && Number.isInteger(v.i0) && Number.isInteger(v.i1);
     const makeChart = (title) => ({
         id: `chart-${chartSeq++}`,
         title,
@@ -1671,10 +1743,50 @@ export function createSvGridController(rawProps, domIdBase) {
         logScale: null,
         timeAxis: null,
         valueFormat: null,
+        bucket: null,
+        bins: null,
+        funnelShape: null,
+        candleStyle: null,
+        zoom: null,
+        ohlc: null,
+        indicators: [],
+        format: null,
+        frozen: null,
     });
+    // The saved view (`GridState.charts[i]`) names four fields differently
+    // from the tab; everything else is the tab's own key.
+    const TAB_ALIASES = { dimensionId: "dimension", measureId: "measure", seriesId: "series", measure2Id: "measure2" };
+    /** A tab as the saved view carries it, without the runtime id. */
+    const tabToState = (c) => {
+        const out = {};
+        for (const k in c)
+            if (k !== "id")
+                out[TAB_ALIASES[k] ?? k] = k === "seriesId" ? (c.seriesId ?? null) : c[k];
+        return out;
+    };
+    /** A tab from a saved-view snapshot: a fresh tab with every known field
+     *  the snapshot carries, and the shape-checked ones dropped when malformed. */
+    const tabFromState = (c, i) => {
+        const t = makeChart(typeof c.title === "string" ? c.title : `Chart ${i + 1}`);
+        for (const k in t) {
+            const v = c[TAB_ALIASES[k] ?? k];
+            if (k !== "id" && k !== "title" && v !== undefined)
+                t[k] = v;
+        }
+        if (!isZoomWindow(t.zoom))
+            t.zoom = null;
+        if (!Array.isArray(t.indicators))
+            t.indicators = [];
+        if (typeof t.bins !== "number")
+            t.bins = null;
+        if (!t.frozen || typeof t.frozen !== "object" || !t.frozen.spec)
+            t.frozen = null;
+        return t;
+    };
     // svelte-ignore state_referenced_locally
     let charts = $state([makeChart("Chart 1")]);
     let activeChartIndex = $state(0);
+    let savedCharts = $state([]);
     const activeChart = $derived((charts[Math.min(activeChartIndex, charts.length - 1)] ?? charts[0]));
     const chartType = $derived(activeChart.type);
     const chartReduce = $derived(activeChart.reduce);
@@ -1685,6 +1797,10 @@ export function createSvGridController(rawProps, domIdBase) {
     const chartDataLabels = $derived(activeChart.dataLabels);
     const chartLogScale = $derived(activeChart.logScale);
     const chartTimeAxis = $derived(activeChart.timeAxis);
+    const chartBucket = $derived(activeChart.bucket);
+    const chartBins = $derived(activeChart.bins);
+    const chartFunnelShape = $derived(activeChart.funnelShape);
+    const chartCandleStyle = $derived(activeChart.candleStyle);
     const chartValueFormat = $derived(activeChart.valueFormat);
     const asMeasureList = (m) => m == null ? [] : Array.isArray(m) ? m : [m];
     const isNumericColumn = (col) => {
@@ -1802,9 +1918,14 @@ export function createSvGridController(rawProps, domIdBase) {
         const label = col ? columnLabel(col) : "";
         if (!label)
             return undefined;
-        return chartReduce === "count"
-            ? "Count"
-            : `${chartReduce === "avg" ? "Average" : "Sum"} of ${label}`;
+        const word = {
+            sum: "Sum", avg: "Average", min: "Min", max: "Max", median: "Median",
+            first: "First", last: "Last", countDistinct: "Distinct",
+        };
+        if (chartReduce === "count")
+            return "Count";
+        const w = word[chartReduce] ?? (chartReduce.startsWith("p") ? `P${chartReduce.slice(1)}` : "Sum");
+        return `${w} of ${label}`;
     });
     /**
      * Does this column hold dates? Declared type first, then a probe of the
@@ -1830,6 +1951,34 @@ export function createSvGridController(rawProps, domIdBase) {
         return false;
     }
     const chartDimensionIsDate = $derived.by(() => columnIsDate(allColumns.find((c) => c.id === effectiveChartDimensionId)));
+    // The chart derivation engine (rowsToChartSpec) is loaded lazily the first time
+    // charting is enabled, keeping chart.ts (~11 KB gzip) out of the base <SvGrid>
+    // bundle - it rides in the same lazy chunk as the chart panel. `chartSpec` stays
+    // null until it resolves, a tick after the panel itself starts loading (which it
+    // already does). The `getAggregate` server path uses the local bucketsToSpec and
+    // does not need the engine.
+    // The whole module, not just `rowsToChartSpec`: the panel can now reach
+    // every chart type, and the ones that do not read a categories-by-series
+    // grid (scatter, gauge, treemap, calendar, sankey) need their own builders
+    // from the same lazy chunk. Same `import()`, same boundary.
+    let chartEngine = $state(null);
+    $effect(() => {
+        if (chartingEnabled && !chartEngine)
+            import("./chart.js").then((m) => (chartEngine = m));
+    });
+    const chartIsOhlc = $derived(chartType === "candlestick" || chartType === "ohlc");
+    /** The price columns: what the reader picked, else the engine's guess
+     *  from the column names (nothing until the engine chunk has loaded). */
+    const effectiveChartOhlc = $derived(chartEngine
+        ? chartEngine.guessOhlcColumns(chartableColumns.measures, activeChart.ohlc)
+        : { open: null, high: null, low: null, close: null, volume: null, ...activeChart.ohlc });
+    /** The date column a candlestick reads: the picked dimension when it is a
+     *  date, else the first date column. */
+    const effectiveChartOhlcDateId = $derived(chartDimensionIsDate ? effectiveChartDimensionId : (chartableColumns.dates[0]?.id ?? null));
+    const chartIndicators = $derived(activeChart.indicators);
+    /** The panes under a price chart and the overlay on it, split by the engine. */
+    const chartIndicatorSplit = $derived(chartIsOhlc && chartEngine ? chartEngine.splitPanelIndicators(chartIndicators) : { panes: [], overlay: null });
+    const chartIndicatorPanes = $derived(chartIndicatorSplit.panes);
     const chartRows = $derived.by(() => {
         const rects = getSelectionRects();
         const pushLeaf = (out, row) => {
@@ -1883,53 +2032,6 @@ export function createSvGridController(rawProps, domIdBase) {
                 chartServerBuckets = [];
         });
     });
-    const bucketsToSpec = (buckets, type, hasSeries) => {
-        const cats = [];
-        const catIdx = new Map();
-        const ensureCat = (c) => {
-            let i = catIdx.get(c);
-            if (i === undefined) {
-                i = cats.length;
-                catIdx.set(c, i);
-                cats.push(c);
-            }
-            return i;
-        };
-        const seriesMap = new Map();
-        for (const b of buckets) {
-            const ci = ensureCat(b.category);
-            const key = hasSeries ? (b.series ?? "") : "value";
-            let arr = seriesMap.get(key);
-            if (!arr) {
-                arr = [];
-                seriesMap.set(key, arr);
-            }
-            arr[ci] = (arr[ci] ?? 0) + b.value;
-        }
-        return {
-            type,
-            categories: cats,
-            series: [...seriesMap.entries()].map(([label, values]) => ({
-                label,
-                values: cats.map((_, i) => values[i] ?? 0),
-            })),
-        };
-    };
-    // The chart derivation engine (rowsToChartSpec) is loaded lazily the first time
-    // charting is enabled, keeping chart.ts (~11 KB gzip) out of the base <SvGrid>
-    // bundle - it rides in the same lazy chunk as the chart panel. `chartSpec` stays
-    // null until it resolves, a tick after the panel itself starts loading (which it
-    // already does). The `getAggregate` server path uses the local bucketsToSpec and
-    // does not need the engine.
-    // The whole module, not just `rowsToChartSpec`: the panel can now reach
-    // every chart type, and the ones that do not read a categories-by-series
-    // grid (scatter, gauge, treemap, calendar, sankey) need their own builders
-    // from the same lazy chunk. Same `import()`, same boundary.
-    let chartEngine = $state(null);
-    $effect(() => {
-        if (chartingEnabled && !chartEngine)
-            import("./chart.js").then((m) => (chartEngine = m));
-    });
     /** Put the chart's numbers in the same locale as the grid's. A grid that set
      *  `localization.locale` has already said which locale its data is in, and a
      *  chart of that data reading in a different one is a bug nobody would think
@@ -1942,13 +2044,13 @@ export function createSvGridController(rawProps, domIdBase) {
         if (chartCfg?.currency)
             spec.currency = chartCfg.currency;
     };
-    const chartSpec = $derived.by(() => {
+    const chartSpecLive = $derived.by(() => {
         if (!chartingEnabled || !chartCfg)
             return null;
         if (chartCfg.getAggregate) {
-            if (!chartServerBuckets)
+            if (!chartServerBuckets || !chartEngine)
                 return null;
-            const spec = bucketsToSpec(chartServerBuckets, chartType, !!effectiveChartSeriesId);
+            const spec = chartEngine.bucketsToChartSpec(chartServerBuckets, chartType, !!effectiveChartSeriesId);
             if (effectiveChartStacked || chartCfg.stacked100)
                 spec.stacked = true;
             if (chartCfg.stacked100)
@@ -1957,6 +2059,8 @@ export function createSvGridController(rawProps, domIdBase) {
                 spec.palette = chartCfg.palette;
             if (effectiveChartTimeAxis)
                 spec.xType = "time";
+            else if (chartBucket && chartDimensionIsDate)
+                spec.xType = "ordinal-time";
             if (effectiveChartLogScale)
                 spec.yScale = "log";
             if (effectiveChartValueFormat)
@@ -1966,55 +2070,110 @@ export function createSvGridController(rawProps, domIdBase) {
         }
         if (chartCfg.buildSpec)
             return chartCfg.buildSpec(chartRows) ?? null;
-        const category = fieldOf(effectiveChartDimensionId);
-        const values = effectiveChartMeasureIds.map((id) => fieldOf(id)).filter((f) => !!f);
-        if (!category || !values.length)
-            return null;
         // Engine not loaded yet (lazy): render nothing until it resolves.
         if (!chartEngine)
             return null;
-        const seriesField = fieldOf(effectiveChartSeriesId);
-        const rowsForChart = chartRows;
-        // Some types read the rows directly rather than a grouped grid: a scatter
-        // point is one row, a gauge has no category axis at all, and a box plot
-        // needs the whole sample per group rather than one reduced number. The
-        // engine owns that dispatch - naming each type here would put them in the
-        // base bundle, which every grid pays for whether or not it ever charts.
-        // Everything else falls through to the aggregation below and is reshaped
-        // afterwards, so reduce / sort / topN / "Other" keep working for all of it.
-        const direct = chartEngine.rowsToDirectSpec(chartType, rowsForChart, {
-            category: category,
-            ...(values[0] ? { value: values[0] } : {}),
-            ...(fieldOf(effectiveChartMeasure2Id) ? { value2: fieldOf(effectiveChartMeasure2Id) } : {}),
-            ...(seriesField ? { series: seriesField } : {}),
-            reduce: chartReduce,
-            ...(effectiveChartPalette ? { palette: effectiveChartPalette } : {}),
-        });
-        if (direct)
-            return direct;
-        // A direct type that could not build (scatter with no Y picked yet, for
-        // instance) must not fall through to the bar-chart path and draw the wrong
-        // chart - it renders the panel's empty state instead.
-        if (chartType === "scatter" || chartType === "gauge" || chartType === "boxplot")
-            return null;
-        const spec = chartEngine.rowsToChartSpec(rowsForChart, {
-            type: chartType,
-            category: category,
-            value: values.length === 1 ? values[0] : values,
-            ...(seriesField ? { series: seriesField } : {}),
-            reduce: chartReduce,
-            stacked: effectiveChartStacked || effectiveChartStacked100,
-            stacked100: effectiveChartStacked100,
-            ...(effectiveChartPalette ? { palette: effectiveChartPalette } : {}),
-            ...(chartCfg.topN ? { topN: chartCfg.topN } : {}),
-            ...(chartCfg.otherLabel ? { otherLabel: chartCfg.otherLabel } : {}),
-            ...(chartCfg.sort ? { sort: chartCfg.sort } : {}),
-        });
+        // Shared by the direct and aggregated paths so the two cannot drift apart
+        // again - which is how these came to be skipped for scatter, gauge and
+        // boxplot in the first place. Declared here, at the derived's own scope:
+        // a function declaration inside the `else` block below is block-scoped,
+        // and the aggregated path calls it after that block has closed.
+        function applyChartValueSettings(spec) {
+            if (effectiveChartTimeAxis)
+                spec.xType = "time";
+            if (effectiveChartLogScale)
+                spec.yScale = "log";
+            if (effectiveChartValueFormat)
+                spec.valueFormat = effectiveChartValueFormat;
+            applyChartLocale(spec);
+            return spec;
+        }
+        // Pivot mode: the pivot on screen is the chart, rows as categories and
+        // columns as series; the pickers have nothing to choose.
+        let spec;
+        if (pivotResult) {
+            spec = chartEngine.pivotResultToChartSpec(pivotResult, {
+                type: chartType, stacked: effectiveChartStacked, stacked100: effectiveChartStacked100,
+                measures: pivotConfig.values,
+                ...(effectiveChartPalette ? { palette: effectiveChartPalette } : {}),
+            });
+        }
+        else {
+            const category = fieldOf(effectiveChartDimensionId);
+            const values = effectiveChartMeasureIds.map((id) => fieldOf(id)).filter((f) => !!f);
+            if (!chartIsOhlc && (!category || !values.length))
+                return null;
+            const seriesField = fieldOf(effectiveChartSeriesId);
+            const rowsForChart = chartRows;
+            // Some types read the rows directly rather than a grouped grid: a scatter
+            // point is one row, a gauge has no category axis at all, and a box plot
+            // needs the whole sample per group rather than one reduced number. The
+            // engine owns that dispatch - naming each type here would put them in the
+            // base bundle, which every grid pays for whether or not it ever charts.
+            // Everything else falls through to the aggregation below and is reshaped
+            // afterwards, so reduce / sort / topN / "Other" keep working for all of it.
+            const ohlcOpts = chartIsOhlc
+                ? chartEngine.ohlcDirectOptions(fieldOf, effectiveChartOhlcDateId, effectiveChartOhlc, { bucket: chartBucket, candleStyle: chartCandleStyle })
+                : null;
+            const direct = chartEngine.rowsToDirectSpec(chartType, rowsForChart, {
+                ...(ohlcOpts ?? {}),
+                category: ohlcOpts?.category ?? category,
+                ...(values[0] ? { value: values[0] } : {}),
+                ...(fieldOf(effectiveChartMeasure2Id) ? { value2: fieldOf(effectiveChartMeasure2Id) } : {}),
+                ...(seriesField ? { series: seriesField } : {}),
+                reduce: chartReduce,
+                ...(chartBins ? { bins: chartBins } : {}),
+                ...(effectiveChartPalette ? { palette: effectiveChartPalette } : {}),
+            });
+            // Number formatting and the scale/axis-type settings are about how values
+            // READ, so they apply to a scatter or a gauge exactly as they do to a bar
+            // chart. They used to live only on the aggregated path below, so setting
+            // `valueFormat` or `logScale` on a direct type silently did nothing.
+            //
+            // The series-shaped settings (trend, averageLine, seriesTypes) stay on the
+            // aggregated path: a direct spec does not have the series shape they read.
+            if (direct) {
+                if (chartIsOhlc) {
+                    // Overlays ride on the price series; the panes are composed by the
+                    // panel body from `chartIndicatorPanes`.
+                    const overlay = chartIndicatorSplit.overlay;
+                    if (overlay && direct.series[0])
+                        direct.series[0].overlay = overlay;
+                }
+                return applyChartValueSettings(direct);
+            }
+            // A direct type that could not build (scatter with no Y picked yet, for
+            // instance) must not fall through to the bar-chart path and draw the wrong
+            // chart - it renders the panel's empty state instead.
+            if (chartType === "scatter" || chartType === "gauge" || chartType === "boxplot" ||
+                chartType === "histogram" || chartType === "range-bar" || chartType === "range-area" ||
+                chartType === "dumbbell" || chartType === "bullet" || chartIsOhlc)
+                return null;
+            spec = chartEngine.rowsToChartSpec(rowsForChart, {
+                type: chartType,
+                category: category,
+                value: values.length === 1 ? values[0] : values,
+                ...(seriesField ? { series: seriesField } : {}),
+                reduce: chartReduce,
+                ...(chartBucket && chartDimensionIsDate ? { bucket: chartBucket } : {}),
+                stacked: effectiveChartStacked || effectiveChartStacked100,
+                stacked100: effectiveChartStacked100,
+                ...(effectiveChartPalette ? { palette: effectiveChartPalette } : {}),
+                ...(chartCfg.topN ? { topN: chartCfg.topN } : {}),
+                ...(chartCfg.otherLabel ? { otherLabel: chartCfg.otherLabel } : {}),
+                ...(chartCfg.sort ? { sort: chartCfg.sort } : {}),
+            });
+        }
         // Reshape the aggregated grid into whatever this type actually reads.
         // These run AFTER the aggregation so grouping, reduce, sort, topN and the
         // "Other" bucket apply to them exactly as they do to a bar chart.
-        if (chartType === "treemap")
+        if (chartType === "treemap" || chartType === "sunburst")
             spec.treemap = chartEngine.specToTreemap(spec);
+        else if (chartType === "chord") {
+            const flow = chartEngine.specToSankey(spec);
+            spec.sankeyNodes = flow.nodes;
+            spec.sankeyLinks = flow.links;
+        }
         else if (chartType === "calendar")
             spec.calendarValues = chartEngine.specToCalendar(spec);
         else if (chartType === "sankey") {
@@ -2024,13 +2183,7 @@ export function createSvGridController(rawProps, domIdBase) {
         }
         if (effectiveChartOrientation === "horizontal")
             spec.orientation = "horizontal";
-        if (effectiveChartTimeAxis)
-            spec.xType = "time";
-        if (effectiveChartLogScale)
-            spec.yScale = "log";
-        if (effectiveChartValueFormat)
-            spec.valueFormat = effectiveChartValueFormat;
-        applyChartLocale(spec);
+        applyChartValueSettings(spec);
         if (chartType !== "pie" && spec.orientation !== "horizontal" && !spec.yAxisTitle && chartAutoYAxisTitle) {
             spec.yAxisTitle = chartAutoYAxisTitle;
         }
@@ -2043,6 +2196,16 @@ export function createSvGridController(rawProps, domIdBase) {
             spec.annotations = chartCfg.annotations;
         if (chartCfg.patternFallback)
             spec.patternFallback = true;
+        if (chartFunnelShape && chartType === "funnel")
+            spec.funnelShape = chartFunnelShape;
+        if (chartCandleStyle && (chartType === "candlestick" || chartType === "ohlc"))
+            spec.candleStyle = chartCandleStyle;
+        // A stream is a stacked area on a wiggle baseline; the picker's Stacked
+        // box has nothing to add, so the offset is applied here outright.
+        if (chartType === "stream") {
+            spec.stacked = true;
+            spec.stackOffset = "wiggle";
+        }
         const refLines = [...(chartCfg.referenceLines ?? [])];
         if (chartCfg.averageLine && spec.series[0]?.values.length) {
             const vals = spec.series[0].values;
@@ -2052,8 +2215,10 @@ export function createSvGridController(rawProps, domIdBase) {
         if (refLines.length)
             spec.referenceLines = refLines;
         for (const s of spec.series) {
-            if (chartCfg.trend)
-                s.overlay = chartCfg.trend === "linear" ? "linear" : `${chartCfg.trend}:7`;
+            if (chartCfg.trend) {
+                const t = chartCfg.trend;
+                s.overlay = t === "sma" || t === "ema" ? `${t}:7` : t === "poly" ? "poly:2" : t;
+            }
             if (chartCfg.smooth)
                 s.smooth = true;
             if (chartCfg.seriesTypes?.[s.label])
@@ -2063,6 +2228,51 @@ export function createSvGridController(rawProps, domIdBase) {
         }
         return spec;
     });
+    /**
+     * What the panel renders: an unlinked chart's frozen snapshot, else the live
+     * derivation with the builder's format applied. The format runs through
+     * the lazy engine so its code stays out of the base bundle.
+     */
+    const chartSpec = $derived.by(() => {
+        if (activeChart.frozen)
+            return activeChart.frozen.spec;
+        const live = chartSpecLive;
+        if (!live || !activeChart.format || !chartEngine)
+            return live;
+        return chartEngine.applyChartFormat(live, activeChart.format);
+    });
+    let announcedFirstChart = false;
+    $effect(() => {
+        if (!chartPanelOpen || announcedFirstChart || !chartCfg?.onChartCreated)
+            return;
+        announcedFirstChart = true;
+        const c = charts[0];
+        untrack(() => chartCfg?.onChartCreated?.({ index: 0, title: c.title, type: c.type, spec: null }));
+    });
+    // Lifecycle: one `onChartChanged` per burst of spec changes.
+    let chartChangeTimer = null;
+    $effect(() => {
+        const cb = chartCfg?.onChartChanged;
+        const spec = chartSpec;
+        const index = activeChartIndex;
+        if (!cb)
+            return;
+        untrack(() => {
+            if (chartChangeTimer)
+                clearTimeout(chartChangeTimer);
+            chartChangeTimer = setTimeout(() => {
+                chartChangeTimer = null;
+                const c = charts[index] ?? activeChart;
+                cb({ index, title: c.title, type: c.type, spec });
+            }, 150);
+        });
+        return () => {
+            if (chartChangeTimer) {
+                clearTimeout(chartChangeTimer);
+                chartChangeTimer = null;
+            }
+        };
+    });
     /**
      * Can a click on this chart be turned back into a grid filter?
      *
@@ -2071,11 +2281,16 @@ export function createSvGridController(rawProps, domIdBase) {
      * SOURCE column by a target value and empty the grid), a gauge (no category
      * at all), or a scatter (the mark carries a point label, not a group).
      */
-    const chartCrossFilterable = $derived(chartType !== "sankey" && chartType !== "gauge" && chartType !== "scatter");
+    const chartCrossFilterable = $derived(chartType !== "sankey" && chartType !== "gauge" && chartType !== "scatter" &&
+        // A chord's arcs are both ends of a flow, a sunburst's are a hierarchy
+        // and a histogram's are bins: none maps a click back to one dimension value.
+        chartType !== "chord" && chartType !== "sunburst" && chartType !== "histogram");
+    /** The column a chart click filters: the picked dimension, or in pivot mode the innermost row dimension when it is a grid column. */
+    const chartFilterDimId = $derived(pivotResult ? (chartEngine?.pivotFilterColumn(pivotConfig.rows, chartableColumns.dims, fieldOf) ?? null) : effectiveChartDimensionId);
     function applyChartCrossFilter(category) {
         if (!chartCrossFilterable)
             return;
-        const dimId = effectiveChartDimensionId;
+        const dimId = chartFilterDimId;
         if (!dimId)
             return;
         const existing = valueFilters[dimId];
@@ -2087,7 +2302,7 @@ export function createSvGridController(rawProps, domIdBase) {
         valueFilters = { ...valueFilters, [dimId]: next };
     }
     function clearChartCrossFilter() {
-        const dimId = effectiveChartDimensionId;
+        const dimId = chartFilterDimId;
         if (!dimId)
             return;
         const next = { ...valueFilters };
@@ -2246,9 +2461,50 @@ export function createSvGridController(rawProps, domIdBase) {
         const logical = virtualizer.getState().scrollOffset;
         return logical - rowScrollScaling.logicalToDom(logical);
     });
+    /**
+     * The first `frozenRows` rows are rendered ahead of the virtual window
+     * and stick under the header. The virtualizer still counts them, so its
+     * offsets stay in row-index space and nothing downstream has to translate;
+     * the window skips them, and the top spacer gives back the height they
+     * already occupy in the flow.
+     */
+    const frozenRowCount = $derived(Math.max(0, Math.min(Math.floor(props.frozenRows ?? 0), allRows.length)));
+    const frozenRowList = $derived(frozenRowCount ? allRows.slice(0, frozenRowCount) : []);
+    /** The merged cells, indexed; null (the usual case) costs nothing. */
+    const mergeIndex = $derived(buildMergeIndex(props.mergedCells));
+    const frozenBandHeight = $derived.by(() => {
+        if (!frozenRowCount)
+            return 0;
+        rowResizeVersion;
+        autoRowHeightVersion;
+        let total = 0;
+        for (let i = 0; i < frozenRowCount; i += 1)
+            total += rowSizePxOf(i);
+        return total;
+    });
+    /** The declared or dragged height of one row; measured under auto height. */
+    function rowSizePxOf(i) {
+        if (isRowCollapsed(i))
+            return 0;
+        if (autoRowHeightOn)
+            return measuredRowHeights.get(i) ?? autoRowHeightFallback;
+        const own = rowResizeHeightPx(i);
+        if (own != null)
+            return own;
+        const rh = props.rowHeight;
+        return typeof rh === "function" ? rh(i) : (rh ?? 30);
+    }
+    /** Where frozen row i sticks: under the header and the frozen rows above it. */
+    function frozenRowTop(i) {
+        let top = headerHeight;
+        for (let k = 0; k < i; k += 1)
+            top += rowSizePxOf(k);
+        return top;
+    }
     // Spacer heights in DOM space. With scaling inert these equal the original
-    // virtualRowStart / virtualRowBottomSpacer.
-    const rowTopSpacer = $derived(Math.max(virtualRowStart - rowOffsetAdjustment, 0));
+    // virtualRowStart / virtualRowBottomSpacer. The frozen band is in the flow
+    // before the spacer whatever the window shows, so it comes off the spacer.
+    const rowTopSpacer = $derived(Math.max(virtualRowStart - rowOffsetAdjustment - frozenBandHeight, 0));
     const rowBottomSpacer = $derived(Math.max(rowDomTotalSize - (virtualRowEnd - rowOffsetAdjustment), 0));
     const virtualColumns = $derived.by(function virtualColumns_d() {
         columnVirtualizerVersion;
@@ -2585,35 +2841,117 @@ export function createSvGridController(rawProps, domIdBase) {
     let autoRowHeightVersion = $state(0);
     const autoRowHeightFallback = $derived(typeof props.rowHeight === "number" ? props.rowHeight : 30);
     // ----- Interactive row resize (`rowResize` prop) -----
-    // Heights the user has dragged, by row index. A plain Map plus a version
-    // counter, exactly like `measuredRowHeights` above and for the same reason:
-    // the reset effect below has to read this collection to know whether there is
-    // anything to clear, and if the collection were reactive that read would make
-    // every resize re-trigger the reset and wipe the height it just stored.
+    // Heights the user has dragged, or set through `api.setRowHeight`, keyed
+    // by ROW ID so they belong to the row rather than to a slot: the height
+    // follows its row through a sort or a filter and survives the data being
+    // replaced. They used to be keyed by index and wiped on every data change,
+    // which in a spreadsheet meant every keystroke, so a row dragged taller
+    // snapped back the moment the next cell was typed. A plain Map plus a
+    // version counter, like `measuredRowHeights` above: the readers touch the
+    // version, and the Map itself stays out of the reactive graph.
     const rowResizeHeights = new Map();
     let rowResizeVersion = $state(0);
-    function setRowResizeHeight(index, height) {
-        if (!rowResizeOn || !Number.isFinite(index) || height <= 0)
+    /**
+     * Rows folded to nothing, the row-side twin of `collapsedColumns`: the
+     * row keeps its index and its cells and takes no height. Keyed by row id
+     * like the heights and announced through the same version counter, so
+     * every reader of a row's size sees the change.
+     */
+    const collapsedRows = new Set();
+    function isRowCollapsed(index) {
+        rowResizeVersion;
+        const id = allRows[index]?.id;
+        return id != null && collapsedRows.has(id);
+    }
+    function setRowCollapsed(index, collapsed) {
+        const id = allRows[index]?.id;
+        if (id == null)
             return;
-        rowResizeHeights.set(index, Math.round(height));
+        if (collapsed === collapsedRows.has(id))
+            return;
+        if (collapsed)
+            collapsedRows.add(id);
+        else
+            collapsedRows.delete(id);
         rowResizeVersion += 1;
     }
-    /** A user-dragged height for this row, or undefined when it has not been
-     *  resized. Read by the view AND by the virtualizer's `estimateSize`. */
-    function rowResizeHeightPx(index) {
-        return rowResizeOn ? rowResizeHeights.get(index) : undefined;
+    /**
+     * A size the user changed by hand is one undo step, as it is in a
+     * spreadsheet: Ctrl+Z after a column drag puts the width back. Recorded
+     * only for the user's gestures; the api's own setters record nothing, so
+     * a consumer restoring saved sizes does not fill the history.
+     */
+    function recordSizeUndo(undo, redo) {
+        pushHistory(ctx, [
+            { rowId: "", columnId: "", field: "", before: undefined, after: undefined, custom: { undo, redo } },
+        ]);
     }
-    // A row index means a different row once the data changes, so keeping the
-    // heights would size new rows by the old ones - the same reasoning as the
-    // measured-height reset below.
-    $effect(() => {
-        void allRows.length;
-        void internalData;
-        if (rowResizeHeights.size === 0)
+    // The undo and redo of a size step report through the same callbacks as
+    // the gesture did: a consumer keeping the sizes (a sheet saving its
+    // document) would otherwise hold the width the user dragged to while the
+    // grid showed the one Ctrl+Z put back.
+    function resizeColumnByUser(columnId, width, before) {
+        const apply = (w) => {
+            columnWidths = { ...columnWidths, [columnId]: w };
+            props.onColumnResize?.({ columnId, width: w });
+        };
+        apply(width);
+        if (before !== width)
+            recordSizeUndo(() => apply(before), () => apply(width));
+    }
+    function autosizeColumnByUser(columnId) {
+        const before = getColumnWidth(columnId);
+        autosizeColumn(columnId);
+        const width = getColumnWidth(columnId);
+        const apply = (w) => {
+            columnWidths = { ...columnWidths, [columnId]: w };
+            props.onColumnResize?.({ columnId, width: w });
+        };
+        if (before !== width)
+            recordSizeUndo(() => apply(before), () => apply(width));
+        else
+            props.onColumnResize?.({ columnId, width });
+    }
+    function resizeRowByUser(index, height) {
+        const before = rowResizeHeightPx(index) ?? null;
+        const apply = (h) => {
+            setRowResizeHeight(index, h);
+            props.onRowResize?.({ rowIndex: index, height: h });
+        };
+        apply(height);
+        if (before !== height)
+            recordSizeUndo(() => apply(before), () => apply(height));
+    }
+    function setRowResizeHeight(index, height) {
+        const id = allRows[index]?.id;
+        if (id == null)
             return;
-        rowResizeHeights.clear();
+        if (height == null) {
+            if (!rowResizeHeights.delete(id))
+                return;
+        }
+        else {
+            if (!Number.isFinite(height) || height <= 0)
+                return;
+            rowResizeHeights.set(id, Math.round(height));
+        }
         rowResizeVersion += 1;
-    });
+    }
+    /** A row's own height, or undefined when it has none. Read by the view AND
+     *  by the virtualizer's `estimateSize`. Auto height wins over it: the
+     *  content decides the height there, and a manual one would be overwritten
+     *  by the next measurement. */
+    function rowResizeHeightPx(index) {
+        const id = allRows[index]?.id;
+        if (id == null)
+            return undefined;
+        // A collapsed row is 0 whatever else it has, under auto height too.
+        if (collapsedRows.has(id))
+            return 0;
+        if (autoRowHeightOn)
+            return undefined;
+        return rowResizeHeights.get(id);
+    }
     /** Report a row's measured height. Called by the view's measuring action.
      *  Sub-pixel churn is ignored so a fractional layout can't loop. */
     function reportRowHeight(index, height) {
@@ -2638,12 +2976,20 @@ export function createSvGridController(rawProps, domIdBase) {
     function measureRowHeight(node, index) {
         let current = index;
         let stop = null;
-        const measure = () => reportRowHeight(current, node.getBoundingClientRect().height);
+        // Read the rect only under autoRowHeight. `getBoundingClientRect` forces a
+        // synchronous layout, and the virtualizer's slot keys hand every rendered
+        // <tr> a new index on each one-row scroll, so measuring unconditionally
+        // meant ~30 forced layouts per arrow key on a fixed-height grid whose
+        // measurement `reportRowHeight` then threw away.
+        const measure = () => {
+            if (!autoRowHeightOn)
+                return;
+            reportRowHeight(current, node.getBoundingClientRect().height);
+        };
         const attach = () => {
             stop?.();
             stop = autoRowHeightOn ? observeSizeRaf(node, measure) : null;
-            if (autoRowHeightOn)
-                measure();
+            measure();
         };
         attach();
         return {
@@ -2694,8 +3040,8 @@ export function createSvGridController(rawProps, domIdBase) {
             : typeof rh === "function"
                 ? rh
                 : (rh ?? 30);
-        const estimateSize = rowResizeOn
-            ? (index) => rowResizeHeights.get(index) ??
+        const estimateSize = rowResizeHeights.size > 0 || collapsedRows.size > 0
+            ? (index) => rowResizeHeightPx(index) ??
                 (typeof base === "function" ? base(index) : base)
             : base;
         virtualizer.setOptions({
@@ -2755,6 +3101,7 @@ export function createSvGridController(rawProps, domIdBase) {
         // closure each run; the virtualizer sees a new function reference and
         // re-derives its layout from the current per-column widths.
         columnWidths;
+        collapsedColumns;
         columnVirtualizer.setOptions({
             count: allColumns.length,
             estimateSize: (index) => {
@@ -2795,8 +3142,11 @@ export function createSvGridController(rawProps, domIdBase) {
     // Lets the resolver answer from cache without re-invoking the source, so an
     // async source fires one request per row instead of one per render.
     const asyncEditorColumns = new Set();
+    // Depends on `allRows` and `rowSelectionState` only. It used to read the
+    // catch-all `gridStateVersion` too, which made every arrow key walk all the
+    // rows (10k iterations on the large-dataset demo, 100k on its top tier) to
+    // recount a selection that had not changed.
     const headerSelectionState = $derived.by(function headerSelectionState_d() {
-        gridStateVersion;
         const selectable = allRows.filter((row) => !isGroupRow(row));
         if (!selectable.length)
             return "none";
@@ -2815,6 +3165,10 @@ export function createSvGridController(rawProps, domIdBase) {
      *  from a user-focused (0,0). The fill handle keys off this flag so it
      *  stays hidden until the user actually selects something. */
     let userHasActivatedCell = $state(false);
+    /** The column a run of Tabs began in, so the Enter that ends the run goes
+     *  down from there (`getEntryStep`). Plain, not state: nothing renders
+     *  it. `setActiveCell` clears it; the Tab and Enter paths set it back. */
+    let tabRunOrigin = null;
     /**
      * Per-column fitted widths when `fitColumns` is on. Computed in one pass
      * so the LAST auto-sized column can absorb the rounding residue and make
@@ -2837,7 +3191,7 @@ export function createSvGridController(rawProps, domIdBase) {
             return null;
         // Exclude columns hidden by a collapsed group too (#57) - otherwise their
         // widths stay in the fit distribution and leave a blank gap at the edge.
-        const cols = grid.getAllColumns().filter((c) => !hiddenColumns[c.id] && !hiddenByGroupCollapse[c.id]);
+        const cols = grid.getAllColumns().filter((c) => !hiddenColumns[c.id] && !hiddenByGroupCollapse[c.id] && !collapsedColumns[c.id]);
         if (!cols.length)
             return null;
         const rowNumberWidth = showRowNumbersEffective ? rowNumberColumnWidth : 0;
@@ -3170,6 +3524,17 @@ export function createSvGridController(rawProps, domIdBase) {
     // state mutation inside the callback (e.g. `api.setGroupBy(...)`) created
     // an infinite update loop. Now it's a true mount-once notification.
     let apiNotified = false;
+    // Memoized: `buildApi()` builds a fresh object each call, and a feature pack
+    // that keys per-grid state on the api (a WeakMap in @svgrid/enterprise) needs
+    // the object the consumer received and the object a command handler sees to
+    // be the same one. Every method reads through `ctx`, so one instance stays
+    // correct for the life of the grid.
+    let apiInstance = null;
+    function api() {
+        if (!apiInstance)
+            apiInstance = buildApi();
+        return apiInstance;
+    }
     $effect(() => {
         if (apiNotified)
             return;
@@ -3177,7 +3542,7 @@ export function createSvGridController(rawProps, domIdBase) {
         if (!cb)
             return;
         apiNotified = true;
-        cb(buildApi());
+        cb(api());
     });
     const ctx = {
         get props() { return props; },
@@ -3239,6 +3604,8 @@ export function createSvGridController(rawProps, domIdBase) {
         set history(v) { history = v; },
         get historyPtr() { return historyPtr; },
         set historyPtr(v) { historyPtr = v; },
+        get historyGroupId() { return historyGroupId; },
+        set historyGroupId(v) { historyGroupId = v; },
         get historyVersion() { return historyVersion; },
         set historyVersion(v) { historyVersion = v; },
         get tooltip() { return tooltip; },
@@ -3261,6 +3628,9 @@ export function createSvGridController(rawProps, domIdBase) {
         get editorSelectAll() { return editorSelectAll; },
         set editorSelectAll(v) { editorSelectAll = v; },
         get columnWidths() { return columnWidths; },
+        get collapsedColumns() { return collapsedColumns; },
+        get mergeIndex() { return mergeIndex; },
+        get setColumnCollapsed() { return setColumnCollapsed; },
         set columnWidths(v) { columnWidths = v; },
         get MIN_COLUMN_WIDTH() { return MIN_COLUMN_WIDTH; },
         get columnPinning() { return columnPinning; },
@@ -3332,6 +3702,7 @@ export function createSvGridController(rawProps, domIdBase) {
         get moveCellsEffective() { return moveCellsEffective; },
         get flushScheduledScrollSync() { return flushScheduledScrollSync; },
         get scheduleScrollSync() { return scheduleScrollSync; },
+        get syncScrollNow() { return syncScrollNow; },
         get internalData() { return internalData; },
         set internalData(v) { internalData = v; },
         get internalColumns() { return internalColumns; },
@@ -3435,6 +3806,8 @@ export function createSvGridController(rawProps, domIdBase) {
         get moveColumnInPanel() { return moveColumnInPanel; },
         // ---- Localized chrome strings ----
         get messages() { return gridMessages; },
+        /** The raw `localization.text` map, for the lazy chart panel's own strings. */
+        get localizationText() { return props.localization?.text; },
         // ---- In-grid pivot mode ----
         get pivotConfig() { return pivotConfig; },
         get pivotActive() { return pivotActive; },
@@ -3467,6 +3840,35 @@ export function createSvGridController(rawProps, domIdBase) {
         set chartLogScale(v) { activeChart.logScale = v; },
         get chartTimeAxis() { return effectiveChartTimeAxis; },
         set chartTimeAxis(v) { activeChart.timeAxis = v; },
+        get chartBucket() { return chartBucket; },
+        set chartBucket(v) { activeChart.bucket = v; },
+        get chartBins() { return chartBins; },
+        set chartBins(v) { activeChart.bins = v; },
+        get chartFunnelShape() { return chartFunnelShape; },
+        set chartFunnelShape(v) { activeChart.funnelShape = v; },
+        get chartCandleStyle() { return chartCandleStyle; },
+        set chartCandleStyle(v) { activeChart.candleStyle = v; },
+        get chartFormat() { return activeChart.format; },
+        set chartFormat(v) { activeChart.format = v; },
+        get chartFrozen() { return activeChart.frozen; },
+        get chartIsOhlc() { return chartIsOhlc; },
+        get chartOhlc() { return effectiveChartOhlc; },
+        set chartOhlc(v) { activeChart.ohlc = v; },
+        get chartOhlcDateId() { return effectiveChartOhlcDateId; },
+        get chartIndicators() { return chartIndicators; },
+        set chartIndicators(v) { activeChart.indicators = v; },
+        get chartIndicatorPanes() { return chartIndicatorPanes; },
+        get chartZoom() { return activeChart.zoom; },
+        // The panel keeps one chart component across tabs, so "tabs share a
+        // window" is simply every tab carrying the same window: a zoom on one is
+        // written to all, and switching tabs hands the component the same value.
+        set chartZoom(v) {
+            if (chartCfg?.syncTabs)
+                for (const c of charts)
+                    c.zoom = v;
+            else
+                activeChart.zoom = v;
+        },
         get chartValueFormat() { return effectiveChartValueFormat ?? "number"; },
         set chartValueFormat(v) { activeChart.valueFormat = v; },
         get chartDimensionIsDate() { return chartDimensionIsDate; },
@@ -3487,8 +3889,23 @@ export function createSvGridController(rawProps, domIdBase) {
         get activeChartIndex() { return Math.min(activeChartIndex, charts.length - 1); },
         set activeChartIndex(v) { activeChartIndex = Math.max(0, Math.min(charts.length - 1, v)); },
         addChart() {
-            charts = [...charts, makeChart(`Chart ${charts.length + 1}`)];
+            const next = makeChart(`Chart ${charts.length + 1}`);
+            if (chartCfg?.syncTabs)
+                next.zoom = activeChart.zoom;
+            charts = [...charts, next];
             activeChartIndex = charts.length - 1;
+            chartCfg?.onChartCreated?.({ index: activeChartIndex, title: next.title, type: next.type, spec: null });
+        },
+        /** Unlink the active chart from the grid: it keeps the spec it has now. */
+        freezeChart() {
+            const spec = chartSpec;
+            if (!spec)
+                return;
+            activeChart.frozen = { spec: JSON.parse(JSON.stringify(spec)), at: new Date().toISOString() };
+        },
+        /** Link the active chart back to the grid's rows. */
+        unfreezeChart() {
+            activeChart.frozen = null;
         },
         removeChart(index) {
             if (charts.length <= 1)
@@ -3504,48 +3921,40 @@ export function createSvGridController(rawProps, domIdBase) {
                 c.title = title;
         },
         getChartsState() {
-            return charts.map((c) => ({
-                title: c.title,
-                type: c.type,
-                dimension: c.dimensionId,
-                series: c.seriesId ?? null,
-                measure: c.measureId,
-                measure2: c.measure2Id,
-                orientation: c.orientation,
-                stacked100: c.stacked100,
-                donut: c.donut,
-                palette: c.palette,
-                reduce: c.reduce,
-                stacked: c.stacked,
-                dataLabels: c.dataLabels,
-                logScale: c.logScale,
-                timeAxis: c.timeAxis,
-                valueFormat: c.valueFormat,
-            }));
+            return charts.map(tabToState);
         },
         applyChartsState(list, active) {
-            const restored = list.map((c, i) => ({
-                id: `chart-${chartSeq++}`,
-                title: typeof c.title === "string" ? c.title : `Chart ${i + 1}`,
-                type: c.type ?? "bar",
-                reduce: c.reduce ?? "sum",
-                dimensionId: c.dimension ?? null,
-                measureId: c.measure ?? null,
-                seriesId: c.series,
-                measure2Id: c.measure2 ?? null,
-                orientation: c.orientation ?? null,
-                stacked100: c.stacked100 ?? null,
-                donut: c.donut ?? null,
-                palette: c.palette ?? null,
-                stacked: c.stacked ?? null,
-                dataLabels: c.dataLabels ?? null,
-                logScale: c.logScale ?? null,
-                timeAxis: c.timeAxis ?? null,
-                valueFormat: c.valueFormat ?? null,
-            }));
+            const restored = list.map(tabFromState);
             charts = restored.length ? restored : [makeChart("Chart 1")];
             activeChartIndex = Math.max(0, Math.min(charts.length - 1, active ?? 0));
         },
+        // ---- Saved charts ----
+        get savedCharts() { return savedCharts; },
+        /** Keep the active tab's configuration under a name (replacing a same-named one). */
+        saveChart(name) {
+            const entry = { name, savedAt: new Date().toISOString(), tab: tabToState(activeChart) };
+            savedCharts = [...savedCharts.filter((s) => s.name !== name), entry];
+        },
+        /** Apply a saved chart to the active tab; the tab keeps its id and title. */
+        applySavedChart(name) {
+            const entry = savedCharts.find((s) => s.name === name);
+            if (!entry)
+                return false;
+            const { id: _id, title: _title, ...rest } = tabFromState(entry.tab, activeChartIndex);
+            Object.assign(activeChart, rest);
+            return true;
+        },
+        removeSavedChart(name) {
+            savedCharts = savedCharts.filter((s) => s.name !== name);
+        },
+        getSavedCharts() {
+            return savedCharts.map((s) => ({ ...s, tab: { ...s.tab } }));
+        },
+        applySavedCharts(list) {
+            savedCharts = list
+                .filter((s) => typeof s?.name === "string" && s.tab && typeof s.tab === "object")
+                .map((s) => ({ name: s.name, savedAt: String(s.savedAt ?? ""), tab: s.tab }));
+        },
         get chartCrossFilterable() { return chartCrossFilterable; },
         get chartOrientation() { return effectiveChartOrientation; },
         set chartOrientation(v) { activeChart.orientation = v; },
@@ -3560,7 +3969,11 @@ export function createSvGridController(rawProps, domIdBase) {
         get effectiveChartMeasure2Id() { return effectiveChartMeasure2Id; },
         get chartAiHandler() { return chartAiHandler; },
         set chartAiHandler(v) { chartAiHandler = v; },
+        get chartExplainHandler() { return chartExplainHandler; },
+        set chartExplainHandler(v) { chartExplainHandler = v; },
         applyChartConfig(config) {
+            if (config.saved)
+                this.applySavedChart(config.saved);
             const cols = [...chartableColumns.dims, ...chartableColumns.measures];
             const resolve = (v) => {
                 if (v == null)
@@ -3593,6 +4006,33 @@ export function createSvGridController(rawProps, domIdBase) {
                 activeChart.timeAxis = config.timeAxis;
             if (config.valueFormat)
                 activeChart.valueFormat = config.valueFormat;
+            if ("bucket" in config)
+                activeChart.bucket = config.bucket ?? null;
+            if ("bins" in config)
+                activeChart.bins = config.bins ?? null;
+            if ("funnelShape" in config)
+                activeChart.funnelShape = config.funnelShape ?? null;
+            if ("candleStyle" in config)
+                activeChart.candleStyle = config.candleStyle ?? null;
+            if ("measure2" in config)
+                activeChart.measure2Id = resolve(config.measure2);
+            if ("ohlc" in config) {
+                const o = config.ohlc;
+                activeChart.ohlc = o
+                    ? { open: resolve(o.open), high: resolve(o.high), low: resolve(o.low), close: resolve(o.close), volume: resolve(o.volume) }
+                    : null;
+            }
+            if (config.indicators)
+                activeChart.indicators = [...config.indicators];
+            if ("format" in config)
+                activeChart.format = config.format ?? null;
+            if (config.frozen === false)
+                activeChart.frozen = null;
+            else if (config.frozen === true && !activeChart.frozen) {
+                const spec = chartSpec;
+                if (spec)
+                    activeChart.frozen = { spec: JSON.parse(JSON.stringify(spec)), at: new Date().toISOString() };
+            }
         },
         get toggleGroupInPanel() { return toggleGroupInPanel; },
         get lastSortingSerialized() { return lastSortingSerialized; },
@@ -3615,8 +4055,17 @@ export function createSvGridController(rawProps, domIdBase) {
         },
         /** True when the `rowResize` prop is on and nothing overrides it. */
         get rowResizeOn() { return rowResizeOn; },
+        get frozenRowCount() { return frozenRowCount; },
+        get frozenRowList() { return frozenRowList; },
+        get frozenBandHeight() { return frozenBandHeight; },
+        get frozenRowTop() { return frozenRowTop; },
         /** Record the height the user dragged a row to. */
         get setRowResizeHeight() { return setRowResizeHeight; },
+        get isRowCollapsed() { return isRowCollapsed; },
+        get setRowCollapsed() { return setRowCollapsed; },
+        get resizeRowByUser() { return resizeRowByUser; },
+        get resizeColumnByUser() { return resizeColumnByUser; },
+        get autosizeColumnByUser() { return autosizeColumnByUser; },
         /** A row's dragged height, or undefined when it has not been resized. */
         get rowResizeHeightPx() {
             rowResizeVersion;
@@ -3679,6 +4128,8 @@ export function createSvGridController(rawProps, domIdBase) {
         get toggleSelectAllRows() { return toggleSelectAllRows; },
         get userHasActivatedCell() { return userHasActivatedCell; },
         set userHasActivatedCell(v) { userHasActivatedCell = v; },
+        get tabRunOrigin() { return tabRunOrigin; },
+        set tabRunOrigin(v) { tabRunOrigin = v; },
         get setActiveCell() { return setActiveCell; },
         get scrollActiveCellIntoView() { return scrollActiveCellIntoView; },
         get getColumnBaseWidth() { return getColumnBaseWidth; },
@@ -3688,6 +4139,8 @@ export function createSvGridController(rawProps, domIdBase) {
         get extendSelection() { return extendSelection; },
         get isCellInSelectedRange() { return isCellInSelectedRange; },
         get getCellRangeEdges() { return getCellRangeEdges; },
+        get activeRangeRect() { return activeRangeRect; },
+        get cellSelectionState() { return cellSelectionState; },
         get getSelectionRects() { return getSelectionRects; },
         get fillHandleCell() { return fillHandleCell; },
         get isInFillPreview() { return isInFillPreview; },
@@ -3710,6 +4163,7 @@ export function createSvGridController(rawProps, domIdBase) {
         get startFillDrag() { return startFillDrag; },
         get onFillPointerMove() { return onFillPointerMove; },
         get onFillPointerUp() { return onFillPointerUp; },
+        get fillDownToNeighbour() { return fillDownToNeighbour; },
         get isOnMoveGrabStrip() { return isOnMoveGrabStrip; },
         get startMoveDrag() { return startMoveDrag; },
         get onMovePointerMove() { return onMovePointerMove; },
@@ -3729,6 +4183,7 @@ export function createSvGridController(rawProps, domIdBase) {
         get cutSelectionToClipboard() { return cutSelectionToClipboard; },
         get pasteFromClipboard() { return pasteFromClipboard; },
         get onGridPaste() { return onGridPaste; },
+        get armPasteFallback() { return armPasteFallback; },
         get clearSelectedCells() { return clearSelectedCells; },
         get onCellDoubleClick() { return onCellDoubleClick; },
         get startEditingWithChar() { return startEditingWithChar; },
@@ -3805,12 +4260,12 @@ export function createSvGridController(rawProps, domIdBase) {
         get clearColumnFilter() { return clearColumnFilter; },
         get onWindowKeydown() { return onWindowKeydown; },
         get columnDefMatchesId() { return columnDefMatchesId; },
-        get buildApi() { return buildApi; },
+        get buildApi() { return api; },
         get apiNotified() { return apiNotified; },
         set apiNotified(v) { apiNotified = v; },
     };
     const { resolveEffectiveFeatures } = createFeatures(ctx);
-    const { showTooltipFor, hideTooltip, flushScheduledScrollSync, scheduleScrollSync, onBodyScroll } = createScrollSync(ctx);
+    const { showTooltipFor, hideTooltip, flushScheduledScrollSync, scheduleScrollSync, syncScrollNow, onBodyScroll } = createScrollSync(ctx);
     const { onGridKeyDown, onWindowKeydown, onHeaderSortClick } = createKeyboard(ctx);
     const { computeSummaries, hasRenderedColumn } = createSummaries(ctx);
     // Hand the aggregator to `eagerSummaries` (declared above `ctx`, which this
@@ -3818,13 +4273,13 @@ export function createSvGridController(rawProps, domIdBase) {
     summarize = computeSummaries;
     const { updateFilterRow, updateFilterOperator, updateFilterMenuValue, updateFilterMenuValueTo, addFilterToken, removeFilterToken, toggleFilterToken, toggleCheckboxWithKeyboard, isColumnFiltered, closeMenus, openInSuggest, closeInSuggest, openChooseColumns, openColumnMenu, openFilterMenu, openOperatorMenu, sortColumnFromMenu, clearColumnSort, groupByColumnFromMenu, clearGroupingFromMenu, isFacetChecked, toggleFacetValue, setFacetSelection, setFilterTokens, isAllFacetsChecked, toggleAllFacets, clearColumnFilter, changePage, goToPage, setPageSize, openContextMenu, closeContextMenu, contextMenuItems, saveComment, removeComment, closeCommentEditor } = createMenus(ctx);
     const { cellConditionalFormat, computeRowClass, computeCellClass, computeCellTooltip, computeCellValidity, computeCellNote, getColumnEditorOptions, areEditorOptionsLoading, formatListCellValue, formatCellValue, formatPinnedValue, computePinnedCellClass } = createCellRender(ctx);
-    const { isCellEditable, isCellEditableAt, getRowColumnValue, getCellDisplayValue, startEditingWithChar, startEditing, stopEditing, startFullRowEdit, setFullRowDraft, commitFullRowEdit, cancelFullRowEdit, saveEditingCell, applyHistoryStep, updateEditingCellValue, onEditorKeyDown, commitAndMoveByTab, focusOnMount, onCellDoubleClick, pasteFromClipboard, onGridPaste } = createEditing(ctx);
-    const { isRowSelected, toggleRowSelectionById, toggleSelectAllRows, setActiveCell, scrollActiveCellIntoView, setSelection, extendSelection, isCellInSelectedRange, getCellRangeEdges, getSelectionRects, isInFillPreview, dragPreviewRect, fillMarqueeEdges, findColumnById, onCellPointerDown, onCellPointerEnter, endDragSelection, onWindowPointerMove, onCellClick, emitCellDoubleClick } = createSelection(ctx);
+    const { isCellEditable, isCellEditableAt, getRowColumnValue, getCellDisplayValue, startEditingWithChar, startEditing, stopEditing, startFullRowEdit, setFullRowDraft, commitFullRowEdit, cancelFullRowEdit, saveEditingCell, applyHistoryStep, updateEditingCellValue, onEditorKeyDown, commitAndMoveByTab, focusOnMount, onCellDoubleClick, pasteFromClipboard, onGridPaste, armPasteFallback } = createEditing(ctx);
+    const { isRowSelected, toggleRowSelectionById, toggleSelectAllRows, setActiveCell, scrollActiveCellIntoView, setSelection, extendSelection, isCellInSelectedRange, getCellRangeEdges, activeRangeRect, cellSelectionState, getSelectionRects, isInFillPreview, dragPreviewRect, fillMarqueeEdges, findColumnById, onCellPointerDown, onCellPointerEnter, endDragSelection, onWindowPointerMove, onCellClick, emitCellDoubleClick } = createSelection(ctx);
     const { cellPinStyle, isColumnPinned, getCurrentColumnOrder, emitColumnOrder, setColumnOrderInternal, applyColumnDrop, onColumnHeaderDragStart, onColumnHeaderDragOver, onColumnHeaderDragLeave, onColumnHeaderDrop, onColumnHeaderDragEnd, pinColumnLeft, pinColumnRight, unpinColumn, toggleColumnVisibleInPanel, moveColumnInPanel, toggleGroupInPanel, getColumnBaseWidth, getColumnWidth, measureText, autosizeColumn, autosizeAllColumns, resetColumns } = createColumns(ctx);
     const { onRowDragStart, onRowDragOver, onRowDragLeave, onRowDrop, onRowsContainerDragOver, onRowsContainerDrop, onRowDragEnd, onRowPointerDown, destroyRowDrag } = createRowDrag(ctx);
     const { register: registerAlignedGrid, broadcastScroll: broadcastAlignedScroll, broadcastWidths: broadcastAlignedWidths } = createAlignedGrids(ctx);
     const { buildApi } = createGridApi(ctx);
-    const { readCellRaw, writeCellRaw, applyFillPattern, clearSelectedCellValues, startFillDrag, onFillPointerMove, onFillPointerUp, isOnMoveGrabStrip, startMoveDrag, onMovePointerMove, onMovePointerUp, applyMoveRange, moveDestRect, trackEdgeScroll, stopEdgeScroll, toggleBooleanCell, copySelectionToClipboard, clearSelectedCells, cutSelectionToClipboard } = createClipboard(ctx);
+    const { readCellRaw, writeCellRaw, applyFillPattern, clearSelectedCellValues, startFillDrag, onFillPointerMove, onFillPointerUp, fillDownToNeighbour, isOnMoveGrabStrip, startMoveDrag, onMovePointerMove, onMovePointerUp, applyMoveRange, moveDestRect, trackEdgeScroll, stopEdgeScroll, toggleBooleanCell, copySelectionToClipboard, clearSelectedCells, cutSelectionToClipboard } = createClipboard(ctx);
     // Dev-time configuration checks. Silent misconfiguration was the grid's
     // biggest usability gap - a misspelled `field` rendered a column of blank
     // cells and printed nothing, and an inert `pageSize` was simply ignored.