@svgrid/grid 2.1.6 → 2.1.7

package/dist/SvGrid.controller.svelte.js

@@ -1,4 +1,4 @@
-import { applyExcelFilter, normalizeForFilter, createColumnVirtualizer, createCoreRowModel, createExpandedRowModel, createFilteredRowModel, createGroupedRowModel, createSvelteVirtualizer, createSortedRowModel, createSvGrid, getGridCellDomId, sortFns, } from "./index";
+import { applyExcelFilter, normalizeForFilter, createColumnVirtualizer, createCoreRowModel, createExpandedRowModel, createFilteredRowModel, createGroupedRowModel, createSvelteVirtualizer, createSortedRowModel, createSvGrid, getGridCellDomId, rowsToChartSpec, sortFns, } from "./index";
 import { createRowScrollScaling, resolveMaxDomHeight, } from "./virtualization/scroll-scaling";
 import "./sv-grid-scrollbar";
 import { computeColumnStat, formatsNeedingStats, } from "./conditional-formatting";
@@ -1003,6 +1003,369 @@ export function createSvGridController(props) {
                 ordered.push(c);
         return ordered;
     });
+    // ===================================================================
+    // Integrated charting (the `charting` prop)
+    // ===================================================================
+    const chartCfg = $derived.by(() => {
+        const c = props.charting;
+        if (!c)
+            return null;
+        return c === true ? {} : c;
+    });
+    const chartingEnabled = $derived(!!chartCfg);
+    const chartIsCustom = $derived(typeof chartCfg?.buildSpec === "function");
+    const chartingConfig = $derived(chartCfg
+        ? {
+            position: chartCfg.position ?? "right",
+            defaultOpen: chartCfg.defaultOpen === true,
+            defaultType: chartCfg.defaultType ?? "bar",
+            height: chartCfg.height ?? 300,
+            width: chartCfg.width ?? 460,
+            crossFilter: chartCfg.crossFilter !== false,
+        }
+        : null);
+    let chartPanelOpen = $state(!!props.charting && props.charting !== true && props.charting.defaultOpen === true);
+    let chartSize = $state(null);
+    let chartFloating = $state(false);
+    let chartMaximized = $state(false);
+    let chartFloatRect = $state.raw(null);
+    let chartAiHandler = $state(null);
+    let chartSeq = 0;
+    const makeChart = (title) => ({
+        id: `chart-${chartSeq++}`,
+        title,
+        type: (props.charting && props.charting !== true && props.charting.defaultType) || "bar",
+        reduce: (props.charting && props.charting !== true && props.charting.reduce) || "sum",
+        dimensionId: null,
+        measureId: null,
+        seriesId: undefined,
+        stacked: null,
+        dataLabels: null,
+        logScale: null,
+        timeAxis: null,
+        valueFormat: null,
+    });
+    // svelte-ignore state_referenced_locally
+    let charts = $state([makeChart("Chart 1")]);
+    let activeChartIndex = $state(0);
+    const activeChart = $derived((charts[Math.min(activeChartIndex, charts.length - 1)] ?? charts[0]));
+    const chartType = $derived(activeChart.type);
+    const chartReduce = $derived(activeChart.reduce);
+    const chartDimensionId = $derived(activeChart.dimensionId);
+    const chartMeasureId = $derived(activeChart.measureId);
+    const chartSeriesId = $derived(activeChart.seriesId);
+    const chartStacked = $derived(activeChart.stacked);
+    const chartDataLabels = $derived(activeChart.dataLabels);
+    const chartLogScale = $derived(activeChart.logScale);
+    const chartTimeAxis = $derived(activeChart.timeAxis);
+    const chartValueFormat = $derived(activeChart.valueFormat);
+    const asMeasureList = (m) => m == null ? [] : Array.isArray(m) ? m : [m];
+    const isNumericColumn = (col) => {
+        const dt = col.columnDef.cellDataType;
+        if (dt === "number")
+            return true;
+        if (dt)
+            return false;
+        for (const row of allRows) {
+            const v = row.getCellValueByColumnId(col.id);
+            if (v == null || v === "")
+                continue;
+            return typeof v === "number" || (typeof v === "string" && v.trim() !== "" && !Number.isNaN(Number(v)));
+        }
+        return false;
+    };
+    const columnLabel = (col) => {
+        const h = col.columnDef.header;
+        return typeof h === "string" && h ? h : (col.columnDef.field ?? col.id);
+    };
+    const chartableColumns = $derived.by(() => {
+        const dims = [];
+        const measures = [];
+        for (const col of allColumns) {
+            const field = col.columnDef.field;
+            if (!field)
+                continue;
+            const entry = { id: col.id, field, label: columnLabel(col) };
+            if (isNumericColumn(col))
+                measures.push(entry);
+            else
+                dims.push(entry);
+        }
+        return { dims, measures };
+    });
+    const chartColumnDefaults = $derived.by(() => {
+        const { dims, measures } = chartableColumns;
+        let dimId = dims[0]?.id ?? null;
+        let seriesId = null;
+        let measureIds = measures[0] ? [measures[0].id] : [];
+        const rects = getSelectionRects();
+        if (rects.length) {
+            let minCol = Infinity;
+            let maxCol = -Infinity;
+            for (const r of rects) {
+                minCol = Math.min(minCol, r.minCol);
+                maxCol = Math.max(maxCol, r.maxCol);
+            }
+            const span = allColumns.slice(minCol, maxCol + 1);
+            const spanDims = span.filter((c) => dims.some((d) => d.id === c.id));
+            const spanMeasures = span.filter((c) => measures.some((m) => m.id === c.id));
+            if (maxCol > minCol) {
+                if (spanDims[0])
+                    dimId = spanDims[0].id;
+                if (spanDims[1])
+                    seriesId = spanDims[1].id;
+                if (spanMeasures.length)
+                    measureIds = spanMeasures.map((c) => c.id);
+            }
+            else {
+                if (spanDims[0])
+                    dimId = spanDims[0].id;
+                if (spanMeasures[0])
+                    measureIds = [spanMeasures[0].id];
+            }
+        }
+        return { dimId, seriesId, measureIds, measureId: measureIds[0] ?? null };
+    });
+    const effectiveChartDimensionId = $derived(chartDimensionId ?? chartCfg?.dimension ?? chartColumnDefaults.dimId);
+    const effectiveChartMeasureId = $derived(chartMeasureId ?? asMeasureList(chartCfg?.measures)[0] ?? chartColumnDefaults.measureId);
+    const effectiveChartSeriesId = $derived(chartSeriesId !== undefined ? chartSeriesId : (chartCfg?.series ?? chartColumnDefaults.seriesId));
+    const effectiveChartMeasureIds = $derived.by(() => {
+        if (chartMeasureId)
+            return [chartMeasureId];
+        const configured = asMeasureList(chartCfg?.measures);
+        if (configured.length)
+            return configured;
+        return chartColumnDefaults.measureIds;
+    });
+    const effectiveChartStacked = $derived(chartStacked ?? chartCfg?.stacked ?? false);
+    const effectiveChartDataLabels = $derived(chartDataLabels ?? chartCfg?.dataLabels ?? false);
+    const effectiveChartLogScale = $derived(chartLogScale ?? chartCfg?.yScale === "log");
+    const effectiveChartTimeAxis = $derived(chartTimeAxis ?? chartCfg?.timeAxis === true);
+    const chartMeasureFormatDefault = $derived.by(() => {
+        const col = allColumns.find((c) => c.id === effectiveChartMeasureId);
+        const t = col?.columnDef.format?.type;
+        if (t === "currency")
+            return "currency";
+        if (t === "percent")
+            return "percent";
+        return undefined;
+    });
+    const effectiveChartValueFormat = $derived(chartValueFormat ?? chartCfg?.valueFormat ?? chartMeasureFormatDefault);
+    const chartAutoYAxisTitle = $derived.by(() => {
+        if (effectiveChartMeasureIds.length !== 1)
+            return undefined;
+        const col = allColumns.find((c) => c.id === effectiveChartMeasureId);
+        const label = col ? columnLabel(col) : "";
+        if (!label)
+            return undefined;
+        return chartReduce === "count"
+            ? "Count"
+            : `${chartReduce === "avg" ? "Average" : "Sum"} of ${label}`;
+    });
+    const chartDimensionIsDate = $derived.by(() => {
+        const col = allColumns.find((c) => c.id === effectiveChartDimensionId);
+        if (!col)
+            return false;
+        if (col.columnDef.cellDataType === "date")
+            return true;
+        if (col.columnDef.cellDataType)
+            return false;
+        for (const row of allRows) {
+            const v = row.getCellValueByColumnId(col.id);
+            if (v == null || v === "")
+                continue;
+            if (v instanceof Date)
+                return true;
+            return typeof v === "string" && /^\d{4}-\d{2}(-\d{2})?/.test(v);
+        }
+        return false;
+    });
+    const chartRows = $derived.by(() => {
+        const rects = getSelectionRects();
+        const pushLeaf = (out, row) => {
+            if (!row || (row.subRows && row.subRows.length > 0))
+                return;
+            out.push(row.original);
+        };
+        if (!rects.length) {
+            const out = [];
+            for (const row of allRows)
+                pushLeaf(out, row);
+            return out;
+        }
+        const idx = new Set();
+        for (const r of rects)
+            for (let i = r.minRow; i <= r.maxRow; i += 1)
+                idx.add(i);
+        const out = [];
+        for (const i of Array.from(idx).sort((a, b) => a - b))
+            pushLeaf(out, allRows[i]);
+        return out;
+    });
+    const fieldOf = (id) => id ? allColumns.find((c) => c.id === id)?.columnDef.field : undefined;
+    // ---- Server-side aggregation (charting.getAggregate) ----
+    let chartServerBuckets = $state.raw(null);
+    let chartReqSeq = 0;
+    $effect(() => {
+        const fn = chartCfg?.getAggregate;
+        if (!fn)
+            return;
+        const category = fieldOf(effectiveChartDimensionId);
+        const measure = fieldOf(effectiveChartMeasureIds[0]) ?? null;
+        const series = fieldOf(effectiveChartSeriesId);
+        // Read valueFilters + filterMenuValues so the fetch re-runs when either
+        // changes; hand the model the facet checklists + operator filters + global.
+        const facets = Object.fromEntries(Object.entries(valueFilters).map(([k, set]) => [k, Array.from(set)]));
+        const filterModel = {
+            facets,
+            columns: { ...filterMenuValues },
+            global: globalFilter,
+        };
+        void chartCfg?.refreshKey;
+        const seq = ++chartReqSeq;
+        Promise.resolve(fn({ dimension: category, measure, series, reduce: chartReduce, filterModel }))
+            .then((buckets) => {
+            if (seq === chartReqSeq)
+                chartServerBuckets = buckets;
+        })
+            .catch(() => {
+            if (seq === chartReqSeq)
+                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),
+            })),
+        };
+    };
+    const chartSpec = $derived.by(() => {
+        if (!chartingEnabled || !chartCfg)
+            return null;
+        if (chartCfg.getAggregate) {
+            if (!chartServerBuckets)
+                return null;
+            const spec = bucketsToSpec(chartServerBuckets, chartType, !!effectiveChartSeriesId);
+            if (effectiveChartStacked || chartCfg.stacked100)
+                spec.stacked = true;
+            if (chartCfg.stacked100)
+                spec.stacked100 = true;
+            if (chartCfg.palette)
+                spec.palette = chartCfg.palette;
+            if (effectiveChartTimeAxis)
+                spec.xType = "time";
+            if (effectiveChartLogScale)
+                spec.yScale = "log";
+            if (effectiveChartValueFormat)
+                spec.valueFormat = effectiveChartValueFormat;
+            return spec;
+        }
+        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;
+        const seriesField = fieldOf(effectiveChartSeriesId);
+        const spec = rowsToChartSpec(chartRows, {
+            type: chartType,
+            category: category,
+            value: values.length === 1 ? values[0] : values,
+            ...(seriesField ? { series: seriesField } : {}),
+            reduce: chartReduce,
+            stacked: effectiveChartStacked || chartCfg.stacked100 === true,
+            stacked100: chartCfg.stacked100 === true,
+            ...(chartCfg.palette ? { palette: chartCfg.palette } : {}),
+            ...(chartCfg.topN ? { topN: chartCfg.topN } : {}),
+            ...(chartCfg.otherLabel ? { otherLabel: chartCfg.otherLabel } : {}),
+            ...(chartCfg.sort ? { sort: chartCfg.sort } : {}),
+        });
+        if (chartCfg.orientation)
+            spec.orientation = chartCfg.orientation;
+        if (effectiveChartTimeAxis)
+            spec.xType = "time";
+        if (effectiveChartLogScale)
+            spec.yScale = "log";
+        if (effectiveChartValueFormat)
+            spec.valueFormat = effectiveChartValueFormat;
+        if (chartType !== "pie" && spec.orientation !== "horizontal" && !spec.yAxisTitle && chartAutoYAxisTitle) {
+            spec.yAxisTitle = chartAutoYAxisTitle;
+        }
+        if (effectiveChartValueFormat && activeChart.valueFormat === null) { /* inherited default */ }
+        if (chartType === "pie") {
+            if (chartCfg.donut)
+                spec.innerRadius = typeof chartCfg.donut === "number" ? chartCfg.donut : 0.6;
+        }
+        if (chartCfg.annotations)
+            spec.annotations = chartCfg.annotations;
+        if (chartCfg.patternFallback)
+            spec.patternFallback = true;
+        const refLines = [...(chartCfg.referenceLines ?? [])];
+        if (chartCfg.averageLine && spec.series[0]?.values.length) {
+            const vals = spec.series[0].values;
+            const avg = vals.reduce((a, b) => a + b, 0) / vals.length;
+            refLines.push({ value: avg, label: "Average", dashed: true });
+        }
+        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.smooth)
+                s.smooth = true;
+            if (chartCfg.seriesTypes?.[s.label])
+                s.type = chartCfg.seriesTypes[s.label];
+            if (chartCfg.seriesAxes?.[s.label])
+                s.axis = chartCfg.seriesAxes[s.label];
+        }
+        return spec;
+    });
+    function applyChartCrossFilter(category) {
+        const dimId = effectiveChartDimensionId;
+        if (!dimId)
+            return;
+        const existing = valueFilters[dimId];
+        const next = new Set(existing && existing.has(category) ? existing : []);
+        if (next.has(category))
+            next.delete(category);
+        else
+            next.add(category);
+        valueFilters = { ...valueFilters, [dimId]: next };
+    }
+    function clearChartCrossFilter() {
+        const dimId = effectiveChartDimensionId;
+        if (!dimId)
+            return;
+        const next = { ...valueFilters };
+        delete next[dimId];
+        valueFilters = next;
+    }
     // Forward sort-clause changes to the consumer. Same dedupe pattern as the
     // selection callback above - fires only when the serialized clauses change.
     let lastSortingSerialized = "";
@@ -1903,6 +2266,136 @@ export function createSvGridController(props) {
         get toolPanelHeaderLabel() { return toolPanelHeaderLabel; },
         get toggleColumnVisibleInPanel() { return toggleColumnVisibleInPanel; },
         get moveColumnInPanel() { return moveColumnInPanel; },
+        // ---- Integrated charting ----
+        get chartingEnabled() { return chartingEnabled; },
+        get chartingConfig() { return chartingConfig; },
+        get chartCfg() { return chartCfg; },
+        get chartIsCustom() { return chartIsCustom; },
+        get chartPanelOpen() { return chartPanelOpen; },
+        set chartPanelOpen(v) { chartPanelOpen = v; },
+        get chartType() { return chartType; },
+        set chartType(v) { activeChart.type = v; },
+        get chartReduce() { return chartReduce; },
+        set chartReduce(v) { activeChart.reduce = v; },
+        get chartDimensionId() { return effectiveChartDimensionId; },
+        set chartDimensionId(v) { activeChart.dimensionId = v; },
+        get chartMeasureId() { return effectiveChartMeasureId; },
+        set chartMeasureId(v) { activeChart.measureId = v; },
+        get chartSeriesId() { return effectiveChartSeriesId; },
+        set chartSeriesId(v) { activeChart.seriesId = v; },
+        get chartStacked() { return effectiveChartStacked; },
+        set chartStacked(v) { activeChart.stacked = v; },
+        get chartDataLabels() { return effectiveChartDataLabels; },
+        set chartDataLabels(v) { activeChart.dataLabels = v; },
+        get chartLogScale() { return effectiveChartLogScale; },
+        set chartLogScale(v) { activeChart.logScale = v; },
+        get chartTimeAxis() { return effectiveChartTimeAxis; },
+        set chartTimeAxis(v) { activeChart.timeAxis = v; },
+        get chartValueFormat() { return effectiveChartValueFormat ?? "number"; },
+        set chartValueFormat(v) { activeChart.valueFormat = v; },
+        get chartDimensionIsDate() { return chartDimensionIsDate; },
+        get chartSize() { return chartSize; },
+        set chartSize(v) { chartSize = v; },
+        get chartFloating() { return chartFloating; },
+        set chartFloating(v) { chartFloating = v; },
+        get chartMaximized() { return chartMaximized; },
+        set chartMaximized(v) { chartMaximized = v; },
+        get chartFloatRect() { return chartFloatRect; },
+        set chartFloatRect(v) { chartFloatRect = v; },
+        get chartableColumns() { return chartableColumns; },
+        get chartSpec() { return chartSpec; },
+        applyChartCrossFilter,
+        clearChartCrossFilter,
+        // Multiple charts (tab strip)
+        get charts() { return charts.map((c) => ({ id: c.id, title: c.title })); },
+        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}`)];
+            activeChartIndex = charts.length - 1;
+        },
+        removeChart(index) {
+            if (charts.length <= 1)
+                return;
+            const idx = index ?? activeChartIndex;
+            charts = charts.filter((_, k) => k !== idx);
+            if (activeChartIndex >= charts.length)
+                activeChartIndex = charts.length - 1;
+        },
+        renameChart(index, title) {
+            const c = charts[index];
+            if (c)
+                c.title = title;
+        },
+        getChartsState() {
+            return charts.map((c) => ({
+                title: c.title,
+                type: c.type,
+                dimension: c.dimensionId,
+                series: c.seriesId ?? null,
+                measure: c.measureId,
+                reduce: c.reduce,
+                stacked: c.stacked,
+                dataLabels: c.dataLabels,
+                logScale: c.logScale,
+                timeAxis: c.timeAxis,
+                valueFormat: c.valueFormat,
+            }));
+        },
+        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,
+                stacked: c.stacked ?? null,
+                dataLabels: c.dataLabels ?? null,
+                logScale: c.logScale ?? null,
+                timeAxis: c.timeAxis ?? null,
+                valueFormat: c.valueFormat ?? null,
+            }));
+            charts = restored.length ? restored : [makeChart("Chart 1")];
+            activeChartIndex = Math.max(0, Math.min(charts.length - 1, active ?? 0));
+        },
+        get chartAiHandler() { return chartAiHandler; },
+        set chartAiHandler(v) { chartAiHandler = v; },
+        applyChartConfig(config) {
+            const cols = [...chartableColumns.dims, ...chartableColumns.measures];
+            const resolve = (v) => {
+                if (v == null)
+                    return null;
+                const byId = cols.find((c) => c.id === v);
+                if (byId)
+                    return byId.id;
+                const byField = cols.find((c) => c.field === v);
+                return byField ? byField.id : v;
+            };
+            if (config.open !== false)
+                chartPanelOpen = true;
+            if (config.type)
+                activeChart.type = config.type;
+            if ("dimension" in config)
+                activeChart.dimensionId = resolve(config.dimension);
+            if ("series" in config)
+                activeChart.seriesId = config.series == null ? null : resolve(config.series);
+            if ("measure" in config)
+                activeChart.measureId = resolve(config.measure);
+            if (config.reduce)
+                activeChart.reduce = config.reduce;
+            if (typeof config.stacked === "boolean")
+                activeChart.stacked = config.stacked;
+            if (typeof config.dataLabels === "boolean")
+                activeChart.dataLabels = config.dataLabels;
+            if (typeof config.logScale === "boolean")
+                activeChart.logScale = config.logScale;
+            if (typeof config.timeAxis === "boolean")
+                activeChart.timeAxis = config.timeAxis;
+            if (config.valueFormat)
+                activeChart.valueFormat = config.valueFormat;
+        },
         get toggleGroupInPanel() { return toggleGroupInPanel; },
         get lastSortingSerialized() { return lastSortingSerialized; },
         set lastSortingSerialized(v) { lastSortingSerialized = v; },

package/dist/SvGrid.css

@@ -2375,3 +2375,145 @@ select.sv-grid-fr-editor {
   font-size: 0.82rem;
   color: var(--sg-fg, #101828);
 }
+
+/* ===================================================================
+   Integrated chart panel (the `charting` prop)
+   =================================================================== */
+.sv-grid-chart-toggle svg { flex: none; }
+.sv-grid-chart-panel {
+  position: absolute;
+  z-index: 900;
+  display: flex;
+  flex-direction: column;
+  background: var(--sg-bg, #fff);
+  color: var(--sg-fg, #0f172a);
+}
+.sv-grid-chart-panel.is-bottom {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-top: 1px solid var(--sg-border, #e2e8f0);
+  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
+}
+.sv-grid-chart-panel.is-right {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  border-left: 1px solid var(--sg-border, #e2e8f0);
+  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
+}
+.sv-grid-chart-panel.is-floating {
+  top: auto;
+  bottom: auto;
+  left: auto;
+  right: auto;
+  border: 1px solid var(--sg-border, #e2e8f0);
+  border-radius: calc(var(--sg-radius, 6px) + 2px);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
+  overflow: hidden;
+}
+.sv-grid-chart-resizer {
+  position: absolute;
+  z-index: 1;
+  background: transparent;
+  touch-action: none;
+}
+.sv-grid-chart-panel.is-bottom > .sv-grid-chart-resizer { top: -3px; left: 0; right: 0; height: 7px; cursor: ns-resize; }
+.sv-grid-chart-panel.is-right > .sv-grid-chart-resizer { left: -3px; top: 0; bottom: 0; width: 7px; cursor: ew-resize; }
+.sv-grid-chart-resizer:hover,
+.sv-grid-chart-resizer.is-dragging { background: color-mix(in srgb, var(--sg-accent, #2563eb) 30%, transparent); }
+.sv-grid-chart-float-resizer {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 16px;
+  height: 16px;
+  cursor: nwse-resize;
+  touch-action: none;
+  background: linear-gradient(135deg, transparent 50%, color-mix(in srgb, var(--sg-muted, #64748b) 55%, transparent) 50%);
+  border-bottom-right-radius: calc(var(--sg-radius, 6px) + 2px);
+}
+.sv-grid-chart-panel-head {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 8px;
+  padding: 8px 12px 10px;
+  border-bottom: 1px solid var(--sg-border, #e2e8f0);
+  background: var(--sg-header-bg, #f8fafc);
+}
+.sv-grid-chart-drawer-title { display: flex; align-items: center; gap: 7px; }
+.sv-grid-chart-drawer-title.is-drag-handle { cursor: move; user-select: none; }
+.sv-grid-chart-title-icon { color: var(--sg-accent, #2563eb); flex: none; }
+.sv-grid-chart-title { font-size: 13px; font-weight: 700; letter-spacing: 0.01em; color: var(--sg-fg, #0f172a); }
+.sv-grid-chart-drawer-title .sv-grid-chart-actions { margin-left: auto; }
+.sv-grid-chart-actions { display: inline-flex; align-items: center; gap: 6px; }
+.sv-grid-chart-controls { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
+.sv-grid-chart-controls:empty { display: none; }
+.sv-grid-chart-ctl { display: flex; flex-direction: column; gap: 2px; font-size: 11px; font-weight: 600; color: var(--sg-muted, #64748b); }
+.sv-grid-chart-ctl select {
+  font: inherit; font-size: 12.5px; font-weight: 400; color: var(--sg-fg, #0f172a);
+  background: var(--sg-input-bg, var(--sg-bg, #fff));
+  border: 1px solid var(--sg-input-border, var(--sg-border, #e2e8f0));
+  border-radius: var(--sg-radius, 6px); padding: 4px 8px;
+}
+.sv-grid-chart-toggle {
+  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
+  color: var(--sg-muted, #64748b); cursor: pointer; white-space: nowrap;
+}
+.sv-grid-chart-btn {
+  font: inherit; font-size: 12px; font-weight: 550; padding: 5px 10px;
+  border: 1px solid var(--sg-border, #e2e8f0); border-radius: var(--sg-radius, 6px);
+  background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a); cursor: pointer;
+}
+.sv-grid-chart-btn:hover:not(:disabled) { border-color: var(--sg-accent, #2563eb); color: var(--sg-accent, #2563eb); }
+.sv-grid-chart-btn:disabled { opacity: 0.5; cursor: default; }
+.sv-grid-chart-icon-btn {
+  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
+  border: 1px solid transparent; border-radius: var(--sg-radius, 6px); background: transparent;
+  color: var(--sg-muted, #64748b); cursor: pointer;
+}
+.sv-grid-chart-icon-btn:hover { border-color: var(--sg-border, #e2e8f0); color: var(--sg-accent, #2563eb); background: var(--sg-bg, #fff); }
+.sv-grid-chart-close { border: 0; background: transparent; color: var(--sg-muted, #64748b); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
+.sv-grid-chart-close:hover { color: var(--sg-fg, #0f172a); }
+.sv-grid-chart-panel-body {
+  flex: 1; min-height: 0; padding: 4px 10px 8px; overflow: hidden;
+  display: flex; align-items: stretch; justify-content: center;
+}
+.sv-grid-chart-panel-body > .sv-grid-chart { width: 100%; justify-content: center; }
+.sv-grid-chart-empty { margin: 0; font-size: 13px; color: var(--sg-muted, #64748b); text-align: center; max-width: 42ch; }
+/* Export menu */
+.sv-grid-chart-export { position: relative; display: inline-flex; }
+.sv-grid-chart-export-menu {
+  position: absolute; top: calc(100% + 4px); right: 0; z-index: 5; min-width: 150px; padding: 4px;
+  display: flex; flex-direction: column; background: var(--sg-bg, #fff);
+  border: 1px solid var(--sg-border, #e2e8f0); border-radius: var(--sg-radius, 6px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+}
+.sv-grid-chart-export-menu button {
+  font: inherit; font-size: 12.5px; text-align: left; padding: 6px 10px; border: 0;
+  border-radius: calc(var(--sg-radius, 6px) - 2px); background: transparent; color: var(--sg-fg, #0f172a); cursor: pointer; white-space: nowrap;
+}
+.sv-grid-chart-export-menu button:hover:not(:disabled) { background: var(--sg-hover-bg, color-mix(in srgb, var(--sg-accent, #2563eb) 10%, transparent)); }
+.sv-grid-chart-export-menu button:disabled { opacity: 0.45; cursor: default; }
+/* AI "chart this" */
+.sv-grid-chart-ai-btn { display: inline-flex; align-items: center; gap: 4px; }
+.sv-grid-chart-ai-btn.is-active { border-color: var(--sg-accent, #2563eb); color: var(--sg-accent, #2563eb); }
+.sv-grid-chart-ai { display: flex; flex-direction: column; gap: 4px; }
+.sv-grid-chart-ai-row { display: flex; gap: 6px; align-items: center; }
+.sv-grid-chart-ai-input {
+  flex: 1; min-width: 0; font: inherit; font-size: 12.5px; color: var(--sg-fg, #0f172a);
+  background: var(--sg-input-bg, var(--sg-bg, #fff)); border: 1px solid var(--sg-input-border, var(--sg-border, #e2e8f0));
+  border-radius: var(--sg-radius, 6px); padding: 5px 9px;
+}
+.sv-grid-chart-ai-input:focus { outline: none; border-color: var(--sg-accent, #2563eb); }
+.sv-grid-chart-ai-msg { margin: 0; font-size: 12px; color: var(--sg-muted, #64748b); }
+.sv-grid-chart-ai-msg.is-error { color: var(--sg-danger, #dc2626); }
+/* Multi-chart tab strip */
+.sv-grid-chart-tabs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
+.sv-grid-chart-tab { display: inline-flex; align-items: center; border: 1px solid var(--sg-border, #e2e8f0); border-radius: var(--sg-radius, 6px); background: var(--sg-bg, #fff); overflow: hidden; }
+.sv-grid-chart-tab.is-active { border-color: var(--sg-accent, #2563eb); background: color-mix(in srgb, var(--sg-accent, #2563eb) 10%, transparent); }
+.sv-grid-chart-tab-label { font: inherit; font-size: 12px; font-weight: 600; color: var(--sg-fg, #0f172a); background: transparent; border: 0; padding: 3px 8px; cursor: pointer; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sv-grid-chart-tab.is-active .sv-grid-chart-tab-label { color: var(--sg-accent, #2563eb); }
+.sv-grid-chart-tab-x { border: 0; background: transparent; color: var(--sg-muted, #64748b); font-size: 14px; line-height: 1; padding: 0 6px 0 2px; cursor: pointer; }
+.sv-grid-chart-tab-x:hover { color: var(--sg-fg, #0f172a); }