@quantumwake/terminal-ux-dashboard-components 0.1.18 → 0.1.19

package/dist/index.js

@@ -1,5 +1,6 @@
 import { createContext, useContext, useMemo, useState, useEffect, useRef, useCallback, Suspense } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { interpolateRdYlGn } from 'd3-scale-chromatic';
 import { ResponsiveBar } from '@nivo/bar';
 import { ResponsivePie } from '@nivo/pie';
 import { ResponsiveLine } from '@nivo/line';
@@ -8,7 +9,7 @@ import { ResponsiveHeatMap } from '@nivo/heatmap';
 import PivotTableUI from 'react-pivottable/PivotTableUI';
 import 'react-pivottable/pivottable.css';
 import { TerminalSlider, TerminalInput, TerminalToggle, TerminalSelect } from '@quantumwake/terminal-ux-components';
-import { Loader2, Play, ChevronDown, AlertCircle, Rows3, BarChart3, PieChart, TrendingUp, ScatterChart, LayoutGrid, Code, Sparkles, Terminal, RefreshCw, Minimize2, Maximize2, Plus, Save, FolderOpen, Trash2, X, Filter, Database, Send, GripVertical } from 'lucide-react';
+import { Loader2, Play, ChevronDown, AlertCircle, Rows3, BarChart3, PieChart, TrendingUp, ScatterChart, LayoutGrid, Grid3x3, Code, Sparkles, Terminal, RefreshCw, Minimize2, Maximize2, Plus, Save, FolderOpen, Trash2, X, Filter, Database, Send, GripVertical } from 'lucide-react';
 import CodeMirror, { EditorView, Prec, keymap } from '@uiw/react-codemirror';
 import { sql, PostgreSQL, schemaCompletionSource, keywordCompletionSource } from '@codemirror/lang-sql';
 import { snippetCompletion, completeFromList, autocompletion, acceptCompletion } from '@codemirror/autocomplete';
@@ -75,6 +76,8 @@ var aggExpr = (agg, col) => {
       return `MIN(${qNum(col)})`;
     case "max":
       return `MAX(${qNum(col)})`;
+    case "median":
+      return `MEDIAN(${qNum(col)})`;
     default:
       return "COUNT(*)";
   }
@@ -112,7 +115,10 @@ var buildChartSQL = ({
   xFields = [],
   yFields = [],
   valueField = null,
-  filters = []
+  filters = [],
+  labelStat,
+  colorStat,
+  blockField
 }) => {
   const where = compileWhere(filters);
   const x = xFields[0]?.name;
@@ -149,6 +155,14 @@ var buildChartSQL = ({
       const metric = valueField ? aggExpr(valueField.agg || "count", valueField.name) : "COUNT(*)";
       return `SELECT ${qIdent(x)} AS r, ${qIdent(y)} AS c, ${metric} AS v FROM ${TABLE}${where} GROUP BY 1, 2`;
     }
+    case "heatmap-plus": {
+      if (!x || !y) return null;
+      const col = valueField?.name;
+      const lv = col ? aggExpr(labelStat || valueField?.agg || "count", col) : "COUNT(*)";
+      const cv = col ? aggExpr(colorStat || labelStat || valueField?.agg || "count", col) : "COUNT(*)";
+      const blockSel = blockField ? `, ANY_VALUE(${qIdent(blockField)}) AS block` : "";
+      return `SELECT ${qIdent(x)} AS r, ${qIdent(y)} AS c, ${lv} AS lv, ${cv} AS cv${blockSel}, GROUPING(${qIdent(x)}) AS gr, GROUPING(${qIdent(y)}) AS gc FROM ${TABLE}${where} GROUP BY GROUPING SETS ((${qIdent(x)}, ${qIdent(y)}), (${qIdent(x)}), (${qIdent(y)}), ())`;
+    }
     default:
       return null;
   }
@@ -197,6 +211,17 @@ var shapeChartData = (chartType, rows, { yFields = [] } = {}) => {
         data: colKeys.map((ck) => ({ x: ck, y: cell[rk][ck] || 0 }))
       }));
     }
+    case "heatmap-plus": {
+      return rows.map((r) => ({
+        r: r.r == null ? null : String(r.r),
+        c: r.c == null ? null : String(r.c),
+        lv: Number(r.lv) || 0,
+        cv: Number(r.cv) || 0,
+        gr: Number(r.gr) || 0,
+        gc: Number(r.gc) || 0,
+        ...r.block != null ? { block: String(r.block) } : {}
+      }));
+    }
     default:
       return [];
   }
@@ -342,10 +367,73 @@ var aggregate = (records, column, fn) => {
       return Math.min(...values.map(Number));
     case "max":
       return Math.max(...values.map(Number));
+    case "median": {
+      const nums = values.map(Number).filter((v) => !Number.isNaN(v)).sort((a, b) => a - b);
+      if (!nums.length) return 0;
+      const mid = Math.floor(nums.length / 2);
+      return nums.length % 2 ? nums[mid] : (nums[mid - 1] + nums[mid]) / 2;
+    }
     default:
       return records.length;
   }
 };
+var HEAT_STATS = ["count", "sum", "avg", "min", "max", "median"];
+var cellKey = (row, col) => `${row}\0${col}`;
+var normalizePartition = (cells, method, vmin, vmax) => {
+  const out = /* @__PURE__ */ new Map();
+  const values = cells.map((c) => c.colorValue).filter((v) => Number.isFinite(v));
+  if (!values.length) return out;
+  if (method === "rank") {
+    const sorted = [...values].sort((a, b) => a - b);
+    for (const c of cells) {
+      const below = sorted.findIndex((v) => v >= c.colorValue);
+      const ties = sorted.filter((v) => v === c.colorValue).length;
+      out.set(cellKey(c.row, c.col), (below + 0.5 * ties) / sorted.length);
+    }
+    return out;
+  }
+  const lo = vmin ?? Math.min(...values);
+  const hi = vmax ?? Math.max(...values);
+  for (const c of cells) {
+    const t = hi === lo ? 0.5 : (c.colorValue - lo) / (hi - lo);
+    out.set(cellKey(c.row, c.col), Math.max(0, Math.min(1, t)));
+  }
+  return out;
+};
+var normalizeCells = (cells, { scope = "global", method = "linear", vmin, vmax } = {}) => {
+  const partitions = /* @__PURE__ */ new Map();
+  const partOf = (c) => {
+    switch (scope) {
+      case "row":
+        return `r:${c.row}`;
+      case "column":
+        return `c:${c.col}`;
+      case "block":
+        return c.block != null ? `b:${c.block}` : "global";
+      default:
+        return "global";
+    }
+  };
+  for (const c of cells) {
+    const k = partOf(c);
+    const part = partitions.get(k);
+    if (part) part.push(c);
+    else partitions.set(k, [c]);
+  }
+  const out = /* @__PURE__ */ new Map();
+  for (const part of partitions.values()) {
+    for (const [k, t] of normalizePartition(part, method, vmin, vmax)) out.set(k, t);
+  }
+  return out;
+};
+var heatColor = (t) => interpolateRdYlGn(Math.max(0, Math.min(1, t)));
+var heatLabelColor = (t) => {
+  const m = heatColor(t).match(/\d+/g);
+  if (!m) return "#0f172a";
+  const [r, g, b] = m.map(Number);
+  const lum = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  return lum > 140 ? "#0f172a" : "#f8fafc";
+};
 function MetricView({ records, config, value: presetValue }) {
   const value = useMemo(() => {
     if (presetValue != null) return presetValue;
@@ -661,6 +749,159 @@ function HeatmapView({
     }
   ) });
 }
+var MAX_AXIS2 = 30;
+var TOTAL_ID = "\u03A3";
+var NULL = "(null)";
+var fmtNum2 = (n) => {
+  if (typeof n !== "number" || Number.isNaN(n)) return "";
+  return Number.isInteger(n) ? n.toLocaleString() : n.toLocaleString(void 0, { maximumFractionDigits: 2 });
+};
+var orderIds2 = (ids, margin, order) => {
+  const sorted = [...ids];
+  if (order.endsWith("-desc")) sorted.sort((a, b) => (margin[b]?.lv ?? 0) - (margin[a]?.lv ?? 0));
+  else if (order.endsWith("-asc")) sorted.sort((a, b) => (margin[a]?.lv ?? 0) - (margin[b]?.lv ?? 0));
+  else sorted.sort();
+  return sorted;
+};
+function fromRecords(records, rowCol, colCol, valueCol, labelStat, colorStat, blockField) {
+  const col = valueCol || rowCol;
+  const statOf = (rs, s) => valueCol ? aggregate(rs, col, s) : rs.length;
+  const both = (rs) => ({ lv: statOf(rs, labelStat), cv: statOf(rs, colorStat) });
+  const byRow = groupBy(records, rowCol);
+  const rowIds = Object.keys(byRow);
+  const colIds = [...new Set(records.map((r) => String(r[colCol] ?? NULL)))];
+  const cells = {};
+  for (const rid of rowIds) {
+    cells[rid] = {};
+    const byCol2 = groupBy(byRow[rid], colCol);
+    for (const cid of colIds) {
+      const cellRows = byCol2[cid] || [];
+      const stat = both(cellRows);
+      if (blockField && cellRows.length) stat.block = String(cellRows[0][blockField] ?? NULL);
+      cells[rid][cid] = stat;
+    }
+  }
+  const rowMargin = {};
+  for (const rid of rowIds) rowMargin[rid] = both(byRow[rid]);
+  const colMargin = {};
+  const byCol = groupBy(records, colCol);
+  for (const cid of colIds) colMargin[cid] = both(byCol[cid] || []);
+  return { rowIds, colIds, cells, rowMargin, colMargin, grand: both(records) };
+}
+function fromData(data) {
+  const cells = {};
+  const rowMargin = {};
+  const colMargin = {};
+  let grand = { lv: 0, cv: 0 };
+  const rowIds = [];
+  const colIds = [];
+  for (const d of data) {
+    const stat = { lv: d.lv, cv: d.cv, ...d.block != null ? { block: d.block } : {} };
+    if (d.gr && d.gc) {
+      grand = stat;
+      continue;
+    }
+    if (d.gr) {
+      if (d.c != null) colMargin[d.c] = stat;
+      continue;
+    }
+    if (d.gc) {
+      if (d.r != null) rowMargin[d.r] = stat;
+      continue;
+    }
+    const r = d.r ?? NULL, c = d.c ?? NULL;
+    if (!cells[r]) {
+      cells[r] = {};
+      rowIds.push(r);
+    }
+    if (!colIds.includes(c)) colIds.push(c);
+    cells[r][c] = stat;
+  }
+  return { rowIds, colIds, cells, rowMargin, colMargin, grand };
+}
+function HeatmapPlusView({
+  records,
+  rowColumn,
+  colColumn,
+  valueColumn,
+  labelStat = "count",
+  colorStat = "count",
+  blockField,
+  data: presetData,
+  scope = "global",
+  method = "linear",
+  vmin,
+  vmax,
+  rowOrder = "alpha",
+  colOrder = "alpha",
+  showMargins = false,
+  style
+}) {
+  const s = withStyleDefaults(style);
+  const model = useMemo(() => {
+    if (presetData) return fromData(presetData);
+    if (records) return fromRecords(records, rowColumn, colColumn, valueColumn, labelStat, colorStat, blockField);
+    return null;
+  }, [presetData, records, rowColumn, colColumn, valueColumn, labelStat, colorStat, blockField]);
+  const built = useMemo(() => {
+    if (!model || !model.rowIds.length || !model.colIds.length) return null;
+    const { cells, rowMargin, colMargin, grand } = model;
+    const rows = orderIds2(model.rowIds, rowMargin, rowOrder).slice(0, MAX_AXIS2);
+    const cols = orderIds2(model.colIds, colMargin, colOrder).slice(0, MAX_AXIS2);
+    const bodyCells = [];
+    for (const rid of rows) for (const cid of cols) {
+      bodyCells.push({ row: rid, col: cid, colorValue: cells[rid]?.[cid]?.cv ?? NaN, block: cells[rid]?.[cid]?.block });
+    }
+    const t2 = new Map(normalizeCells(bodyCells, { scope, method, vmin, vmax }));
+    if (showMargins) {
+      const rowMc = rows.map((rid) => ({ row: rid, col: TOTAL_ID, colorValue: rowMargin[rid]?.cv ?? NaN }));
+      const colMc = cols.map((cid) => ({ row: TOTAL_ID, col: cid, colorValue: colMargin[cid]?.cv ?? NaN }));
+      for (const [k, v] of normalizeCells(rowMc, { scope: "global", method })) t2.set(k, v);
+      for (const [k, v] of normalizeCells(colMc, { scope: "global", method })) t2.set(k, v);
+      t2.set(cellKey(TOTAL_ID, TOTAL_ID), 0.5);
+    }
+    const colKeys = showMargins ? [...cols, TOTAL_ID] : cols;
+    const nivoData2 = rows.map((rid) => ({
+      id: rid,
+      data: colKeys.map((cid) => ({
+        x: cid,
+        y: cid === TOTAL_ID ? rowMargin[rid]?.lv ?? 0 : cells[rid]?.[cid]?.lv ?? 0
+      }))
+    }));
+    if (showMargins) {
+      nivoData2.push({
+        id: TOTAL_ID,
+        data: colKeys.map((cid) => ({
+          x: cid,
+          y: cid === TOTAL_ID ? grand.lv : colMargin[cid]?.lv ?? 0
+        }))
+      });
+    }
+    return { nivoData: nivoData2, t: t2 };
+  }, [model, rowOrder, colOrder, scope, method, vmin, vmax, showMargins]);
+  if (!built) {
+    return /* @__PURE__ */ jsx("div", { className: "p-8 text-center text-midnight-text-muted", children: "Not enough distinct values for a heatmap" });
+  }
+  const { nivoData, t } = built;
+  const tAt = (serieId, x) => t.get(cellKey(serieId, x)) ?? 0;
+  return /* @__PURE__ */ jsx("div", { className: "h-full w-full min-h-[160px]", children: /* @__PURE__ */ jsx(
+    ResponsiveHeatMap,
+    {
+      data: nivoData,
+      margin: { top: 60, right: 20, bottom: showMargins ? 60 : 20, left: 100 },
+      valueFormat: ((v) => fmtNum2(v)),
+      axisTop: { tickSize: 5, tickPadding: 5, tickRotation: s.xTickRotation, legend: s.showXLegend ? s.xAxisLabel || colColumn : "", legendPosition: s.xLegendPosition, legendOffset: -50 },
+      axisLeft: { tickSize: 5, tickPadding: 5, legend: s.showYLegend ? s.yAxisLabel || rowColumn : "", legendPosition: s.yLegendPosition, legendOffset: -80 },
+      colors: ((cell) => heatColor(tAt(cell.serieId, cell.data.x))),
+      emptyColor: "#1e293b",
+      borderWidth: 1,
+      borderColor: "#334155",
+      labelTextColor: ((cell) => heatLabelColor(tAt(cell.serieId, cell.data.x))),
+      hoverTarget: "cell",
+      theme: buildNivoTheme(style)
+    }
+  ) });
+}
 function PivotView({ records }) {
   const [pivotState, setPivotState] = useState({});
   if (!records?.length) {
@@ -1197,6 +1438,7 @@ var CHART_TYPES = [
   { id: "line", icon: TrendingUp, label: "Line" },
   { id: "scatter", icon: ScatterChart, label: "Scatter" },
   { id: "heatmap", icon: LayoutGrid, label: "Heatmap" },
+  { id: "heatmap-plus", icon: Grid3x3, label: "Heatmap+" },
   { id: "grouped-bar", icon: BarChart3, label: "Grouped Bar" }
 ];
 var AGG_OPTIONS = ["count", "distinct", "sum", "avg", "min", "max"];
@@ -1217,6 +1459,17 @@ var ORDER_OPTIONS = [
   { id: "total-asc", label: "Total \u2191" }
 ];
 var MARGIN_AGGS = ["sum", "avg", "min", "max", "count"].map((a) => ({ id: a, label: a }));
+var HEAT_STAT_OPTIONS = HEAT_STATS.map((a) => ({ id: a, label: a }));
+var SCOPE_OPTIONS = [
+  { id: "global", label: "Global" },
+  { id: "row", label: "Per row" },
+  { id: "column", label: "Per column" },
+  { id: "block", label: "Per block" }
+];
+var METHOD_OPTIONS = [
+  { id: "linear", label: "Linear" },
+  { id: "rank", label: "Rank" }
+];
 var FILTER_OP_OPTIONS = FILTER_OPS.map((o) => ({ id: o, label: o }));
 var FieldPill = ({ name, type, onRemove, onChangeAgg, agg, showAgg }) => {
   const typeColor = {
@@ -1405,6 +1658,7 @@ var ChartPreview = ({
   sqlLoading,
   sqlError,
   heatmapOpts = {},
+  heatPlusOpts = {},
   style
 }) => {
   const xCol = xFields[0]?.name;
@@ -1443,6 +1697,8 @@ var ChartPreview = ({
         return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(ScatterView, { data: shaped, xColumn: xCol, yColumn: yCol, style }) });
       case "heatmap":
         return shaped.length ? /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(HeatmapView, { data: shaped, rowColumn: xCol, colColumn: yCol, ...heatmapOpts, style }) }) : /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-sm text-midnight-text-muted", children: "No data" });
+      case "heatmap-plus":
+        return shaped.length ? /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(HeatmapPlusView, { data: shaped, rowColumn: xCol, colColumn: yCol, ...heatPlusOpts, style }) }) : /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-sm text-midnight-text-muted", children: "No data" });
       default:
         return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-sm text-midnight-text-muted", children: "Select a chart type" });
     }
@@ -1464,6 +1720,8 @@ var ChartPreview = ({
       return xCol && yCol ? /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(ScatterView, { records, xColumn: xCol, yColumn: yCol, style }) }) : null;
     case "heatmap":
       return xCol && yCol ? /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(HeatmapView, { records, rowColumn: xCol, colColumn: yCol, valueColumn: valueField?.name, aggFn: valueField?.agg || "count", ...heatmapOpts, style }) }) : null;
+    case "heatmap-plus":
+      return xCol && yCol ? /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(HeatmapPlusView, { records, rowColumn: xCol, colColumn: yCol, valueColumn: valueField?.name, ...heatPlusOpts, style }) }) : null;
     default:
       return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-sm text-midnight-text-muted", children: "Select a chart type" });
   }
@@ -1487,6 +1745,13 @@ function ChartBuilder({ records, columns, stateId, onSave }) {
   const [colOrder, setColOrder] = useState("alpha");
   const [marginAgg, setMarginAgg] = useState("sum");
   const [showTotals, setShowTotals] = useState(false);
+  const [labelStat, setLabelStat] = useState("count");
+  const [colorStat, setColorStat] = useState("count");
+  const [scope, setScope] = useState("global");
+  const [method, setMethod] = useState("linear");
+  const [vmin, setVmin] = useState("");
+  const [vmax, setVmax] = useState("");
+  const [showMargins, setShowMargins] = useState(false);
   const [style, setStyle] = useState(DEFAULT_CHART_STYLE);
   const [showStyle, setShowStyle] = useState(false);
   const [showFields, setShowFields] = useState(false);
@@ -1495,8 +1760,17 @@ function ChartBuilder({ records, columns, stateId, onSave }) {
   const [sqlLoading, setSqlLoading] = useState(false);
   const [sqlError, setSqlError] = useState(null);
   const generatedSql = useMemo(
-    () => buildChartSQL({ chartType, xFields, yFields, valueField, filters }),
-    [chartType, xFields, yFields, valueField, filters]
+    () => buildChartSQL({
+      chartType,
+      xFields,
+      yFields,
+      valueField,
+      filters,
+      labelStat,
+      colorStat,
+      blockField: colorField?.name
+    }),
+    [chartType, xFields, yFields, valueField, filters, labelStat, colorStat, colorField]
   );
   useEffect(() => {
     if (engineMode !== "sql") return void 0;
@@ -1594,6 +1868,26 @@ function ChartBuilder({ records, columns, stateId, onSave }) {
       config.marginAgg = marginAgg;
       config.showTotals = showTotals;
     }
+    if (chartType === "heatmap-plus") {
+      config.row = xFields[0]?.name;
+      config.col = yFields[0]?.name;
+      if (valueField) config.value = valueField.name;
+      else delete config.value;
+      config.labelStat = labelStat;
+      config.colorStat = colorStat;
+      if (colorField) config.blockField = colorField.name;
+      else delete config.blockField;
+      config.scope = scope;
+      config.method = method;
+      const nMin = parseFloat(vmin), nMax = parseFloat(vmax);
+      if (Number.isFinite(nMin)) config.vmin = nMin;
+      else delete config.vmin;
+      if (Number.isFinite(nMax)) config.vmax = nMax;
+      else delete config.vmax;
+      config.rowOrder = rowOrder;
+      config.colOrder = colOrder;
+      config.showMargins = showMargins;
+    }
     if (engineMode === "sql" && generatedSql) {
       config.sql = generatedSql;
       config.chartType = chartType;
@@ -1614,6 +1908,7 @@ function ChartBuilder({ records, columns, stateId, onSave }) {
       height: fillContainer ? 8 : 2
     });
   };
+  const isHeat = chartType === "heatmap" || chartType === "heatmap-plus";
   return /* @__PURE__ */ jsxs("div", { className: "flex h-full", children: [
     /* @__PURE__ */ jsxs("div", { className: `w-[280px] shrink-0 border-r ${theme.border} bg-midnight-elevated overflow-y-auto p-3 space-y-4`, children: [
       /* @__PURE__ */ jsxs("div", { children: [
@@ -1649,30 +1944,30 @@ function ChartBuilder({ records, columns, stateId, onSave }) {
       /* @__PURE__ */ jsx(
         DropZone,
         {
-          label: chartType === "heatmap" ? "Rows" : "X Axis / Group By",
+          label: isHeat ? "Rows" : "X Axis / Group By",
           fields: xFields,
           columns,
           onAdd: (f) => addField("x", f),
           onRemove: (i) => removeField("x", i),
           onChangeAgg: () => {
           },
-          maxFields: chartType === "pie" || chartType === "heatmap" ? 1 : 3
+          maxFields: chartType === "pie" || isHeat ? 1 : 3
         }
       ),
       /* @__PURE__ */ jsx(
         DropZone,
         {
-          label: chartType === "heatmap" ? "Columns" : "Y Axis / Values",
+          label: isHeat ? "Columns" : "Y Axis / Values",
           fields: yFields,
           columns,
           onAdd: (f) => addField("y", f),
           onRemove: (i) => removeField("y", i),
           onChangeAgg: (i, agg) => changeAgg("y", i, agg),
-          showAgg: chartType !== "heatmap",
-          maxFields: chartType === "heatmap" ? 1 : 5
+          showAgg: !isHeat,
+          maxFields: isHeat ? 1 : 5
         }
       ),
-      chartType === "heatmap" && /* @__PURE__ */ jsx(
+      isHeat && /* @__PURE__ */ jsx(
         DropZone,
         {
           label: "Cell Value (optional \u2014 defaults to count)",
@@ -1681,10 +1976,93 @@ function ChartBuilder({ records, columns, stateId, onSave }) {
           onAdd: (f) => addField("value", f),
           onRemove: () => removeField("value"),
           onChangeAgg: (i, agg) => changeAgg("value", i, agg),
-          showAgg: true,
+          showAgg: chartType === "heatmap",
           maxFields: 1
         }
       ),
+      chartType === "heatmap-plus" && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          DropZone,
+          {
+            label: "Block (optional \u2014 color-scope grouping)",
+            fields: colorField ? [colorField] : [],
+            columns,
+            onAdd: (f) => addField("color", f),
+            onRemove: () => removeField("color"),
+            onChangeAgg: () => {
+            },
+            maxFields: 1
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: "text-xs uppercase text-midnight-text-muted mb-2 font-mono", children: "Cell Stats" }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 min-h-[28px]", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-midnight-text-muted", children: "Label stat" }),
+              /* @__PURE__ */ jsx(SelectControl, { value: labelStat, options: HEAT_STAT_OPTIONS, onChange: (v) => setLabelStat(v) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 min-h-[28px]", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-midnight-text-muted", children: "Color stat" }),
+              /* @__PURE__ */ jsx(SelectControl, { value: colorStat, options: HEAT_STAT_OPTIONS, onChange: (v) => setColorStat(v) })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: "text-xs uppercase text-midnight-text-muted mb-2 font-mono", children: "Color Engine" }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 min-h-[28px]", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-midnight-text-muted", children: "Scale scope" }),
+              /* @__PURE__ */ jsx(SelectControl, { value: scope, options: SCOPE_OPTIONS, onChange: (v) => setScope(v) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 min-h-[28px]", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-midnight-text-muted", children: "Scale method" }),
+              /* @__PURE__ */ jsx(SelectControl, { value: method, options: METHOD_OPTIONS, onChange: (v) => setMethod(v) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 min-h-[28px]", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-midnight-text-muted", children: "Fixed min / max" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    value: vmin,
+                    onChange: (e) => setVmin(e.target.value),
+                    placeholder: "auto",
+                    inputMode: "decimal",
+                    className: "w-14 px-2 py-1 text-xs font-mono bg-midnight-surface border border-midnight-border text-midnight-text-body outline-none focus:border-midnight-accent"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    value: vmax,
+                    onChange: (e) => setVmax(e.target.value),
+                    placeholder: "auto",
+                    inputMode: "decimal",
+                    className: "w-14 px-2 py-1 text-xs font-mono bg-midnight-surface border border-midnight-border text-midnight-text-body outline-none focus:border-midnight-accent"
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: "text-xs uppercase text-midnight-text-muted mb-2 font-mono", children: "Order & Margins" }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 min-h-[28px]", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-midnight-text-muted", children: "Order rows" }),
+              /* @__PURE__ */ jsx(SelectControl, { value: rowOrder, options: ORDER_OPTIONS, onChange: (v) => setRowOrder(v) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 min-h-[28px]", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-midnight-text-muted", children: "Order columns" }),
+              /* @__PURE__ */ jsx(SelectControl, { value: colOrder, options: ORDER_OPTIONS, onChange: (v) => setColOrder(v) })
+            ] }),
+            /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [
+              /* @__PURE__ */ jsx("input", { type: "checkbox", checked: showMargins, onChange: (e) => setShowMargins(e.target.checked), className: "accent-midnight-accent" }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-midnight-text-muted", children: "Show margins (row / col / grand)" })
+            ] })
+          ] })
+        ] })
+      ] }),
       chartType === "heatmap" && /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("div", { className: "text-xs uppercase text-midnight-text-muted mb-2 font-mono", children: "Order & Totals" }),
         /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
@@ -1818,6 +2196,18 @@ function ChartBuilder({ records, columns, stateId, onSave }) {
         sqlLoading,
         sqlError,
         heatmapOpts: { rowOrder, colOrder, marginAgg, showTotals },
+        heatPlusOpts: {
+          labelStat,
+          colorStat,
+          blockField: colorField?.name,
+          scope,
+          method,
+          vmin: Number.isFinite(parseFloat(vmin)) ? parseFloat(vmin) : void 0,
+          vmax: Number.isFinite(parseFloat(vmax)) ? parseFloat(vmax) : void 0,
+          rowOrder,
+          colOrder,
+          showMargins
+        },
         style
       }
     ) })
@@ -1826,7 +2216,7 @@ function ChartBuilder({ records, columns, stateId, onSave }) {
 function ViewLoading() {
   return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-xs text-midnight-text-muted", children: "Loading..." });
 }
-var SQL_CHART_TYPES = /* @__PURE__ */ new Set(["bar", "grouped-bar", "pie", "line", "scatter", "heatmap"]);
+var SQL_CHART_TYPES = /* @__PURE__ */ new Set(["bar", "grouped-bar", "pie", "line", "scatter", "heatmap", "heatmap-plus"]);
 var SQL_DATA_TYPES = /* @__PURE__ */ new Set(["table", "metric"]);
 var TABLE_PREVIEW_ROWS = 200;
 function tableSql(config) {
@@ -1857,6 +2247,14 @@ function panelToChartConfig(chartType, config) {
       if (config.col) cfg.yFields = [{ name: config.col }];
       if (config.value) cfg.valueField = { name: config.value, agg: config.agg };
       break;
+    case "heatmap-plus":
+      if (config.row) cfg.xFields = [{ name: config.row }];
+      if (config.col) cfg.yFields = [{ name: config.col }];
+      if (config.value) cfg.valueField = { name: config.value, agg: config.labelStat };
+      cfg.labelStat = config.labelStat;
+      cfg.colorStat = config.colorStat;
+      cfg.blockField = config.blockField;
+      break;
   }
   return cfg;
 }
@@ -2005,6 +2403,9 @@ function SqlPanel({ panel }) {
       case "heatmap":
         chart = shaped.length ? /* @__PURE__ */ jsx(HeatmapView, { data: shaped, rowColumn: config.row || "", colColumn: config.col || "", rowOrder: config.rowOrder, colOrder: config.colOrder, marginAgg: config.marginAgg, showTotals: config.showTotals, style: config.style }) : /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-xs text-midnight-text-muted", children: "No data" });
         break;
+      case "heatmap-plus":
+        chart = shaped.length ? /* @__PURE__ */ jsx(HeatmapPlusView, { data: shaped, rowColumn: config.row || "", colColumn: config.col || "", scope: config.scope, method: config.method, vmin: config.vmin, vmax: config.vmax, rowOrder: config.rowOrder, colOrder: config.colOrder, showMargins: config.showMargins, style: config.style }) : /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-xs text-midnight-text-muted", children: "No data" });
+        break;
       default:
         chart = /* @__PURE__ */ jsxs("div", { className: "p-4 text-xs text-midnight-text-muted", children: [
           "Unsupported SQL chart: ",
@@ -2038,6 +2439,8 @@ function PanelContent({ panel, records, columns }) {
       return config.x && config.y ? /* @__PURE__ */ jsx(ScatterView, { records, xColumn: config.x, yColumn: config.y, style: config.style }) : null;
     case "heatmap":
       return config.row && config.col ? /* @__PURE__ */ jsx(HeatmapView, { records, rowColumn: config.row, colColumn: config.col, valueColumn: config.value, aggFn: config.agg || "count", rowOrder: config.rowOrder, colOrder: config.colOrder, marginAgg: config.marginAgg, showTotals: config.showTotals, style: config.style }) : null;
+    case "heatmap-plus":
+      return config.row && config.col ? /* @__PURE__ */ jsx(HeatmapPlusView, { records, rowColumn: config.row, colColumn: config.col, valueColumn: config.value, labelStat: config.labelStat, colorStat: config.colorStat, blockField: config.blockField, scope: config.scope, method: config.method, vmin: config.vmin, vmax: config.vmax, rowOrder: config.rowOrder, colOrder: config.colOrder, showMargins: config.showMargins, style: config.style }) : null;
     case "pivot":
       return /* @__PURE__ */ jsx(PivotView, { records });
     case "metric":
@@ -2497,6 +2900,6 @@ function DataExplorer({
   ] });
 }
 
-export { BarView, ChartBuilder, ChartStyleControls, DEFAULT_CHART_STYLE, DashboardProvider, DashboardRenderer, DataExplorer, HeatmapView, InsightView, LEGEND_ANCHORS, LineView, MetricView, PanelChart, PieView, PivotView, ScatterView, SqlConsole, aggExpr, aggregate, axisLegend, buildChartSQL, buildNivoTheme, compileWhere, groupBy, legendConfig, qIdent, qLit, shapeChartData, useCapabilities, useDashboard, withStyleDefaults };
+export { BarView, ChartBuilder, ChartStyleControls, DEFAULT_CHART_STYLE, DashboardProvider, DashboardRenderer, DataExplorer, HEAT_STATS, HeatmapPlusView, HeatmapView, InsightView, LEGEND_ANCHORS, LineView, MetricView, PanelChart, PieView, PivotView, ScatterView, SqlConsole, aggExpr, aggregate, axisLegend, buildChartSQL, buildNivoTheme, compileWhere, groupBy, heatColor, heatLabelColor, legendConfig, normalizeCells, qIdent, qLit, shapeChartData, useCapabilities, useDashboard, withStyleDefaults };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map