@quantumwake/terminal-ux-dashboard-components 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1807 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var bar = require('@nivo/bar');
+var pie = require('@nivo/pie');
+var line = require('@nivo/line');
+var scatterplot = require('@nivo/scatterplot');
+var heatmap = require('@nivo/heatmap');
+var PivotTableUI = require('react-pivottable/PivotTableUI');
+require('react-pivottable/pivottable.css');
+var lucideReact = require('lucide-react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var PivotTableUI__default = /*#__PURE__*/_interopDefault(PivotTableUI);
+
+// src/context/DashboardContext.tsx
+var DashboardContext = react.createContext(null);
+function DashboardProvider({ children, ...value }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DashboardContext.Provider, { value, children });
+}
+function useDashboard() {
+  const ctx = react.useContext(DashboardContext);
+  if (!ctx) {
+    throw new Error("useDashboard must be used within a <DashboardProvider>");
+  }
+  return ctx;
+}
+function useCapabilities() {
+  const c = useDashboard();
+  return {
+    canRun: true,
+    canSave: !!c.saveDashboard,
+    canList: !!c.listDashboards,
+    canSearch: !!c.searchDashboards,
+    canLoad: !!c.loadDashboard,
+    canDelete: !!c.deleteDashboard,
+    canAnalyze: !!c.analyzeDataset,
+    canRefine: !!c.refineDashboard,
+    canEditPanels: !!c.removePanel
+  };
+}
+
+// src/sqlgen.ts
+var TABLE = "data";
+var MAX_GROUPS = 50;
+var MAX_POINTS = 1e3;
+var qIdent = (name) => `"${String(name).replace(/"/g, '""')}"`;
+var qLit = (v) => {
+  const s = String(v);
+  if (/^-?\d+(\.\d+)?$/.test(s)) return s;
+  if (s === "true" || s === "false") return s;
+  return `'${s.replace(/'/g, "''")}'`;
+};
+var qNum = (col) => `TRY_CAST(${qIdent(col)} AS DECIMAL(18,6))`;
+var aggExpr = (agg, col) => {
+  const fn = (agg || "count").toLowerCase();
+  if (fn === "count") return "COUNT(*)";
+  if (!col) return "COUNT(*)";
+  const c = qIdent(col);
+  switch (fn) {
+    case "distinct":
+      return `COUNT(DISTINCT ${c})`;
+    case "sum":
+      return `SUM(${qNum(col)})`;
+    case "avg":
+      return `AVG(${qNum(col)})`;
+    case "min":
+      return `MIN(${qNum(col)})`;
+    case "max":
+      return `MAX(${qNum(col)})`;
+    default:
+      return "COUNT(*)";
+  }
+};
+var compileWhere = (filters) => {
+  const conds = (filters || []).filter((f) => f && f.column && f.op).map((f) => {
+    const c = qIdent(f.column);
+    switch (f.op) {
+      case "IS NULL":
+        return `${c} IS NULL`;
+      case "IS NOT NULL":
+        return `${c} IS NOT NULL`;
+      case "IN":
+      case "NOT IN": {
+        const items = String(f.value ?? "").split(",").map((s) => s.trim()).filter(Boolean);
+        if (!items.length) return null;
+        return `${c} ${f.op} (${items.map(qLit).join(", ")})`;
+      }
+      case "BETWEEN": {
+        const parts = String(f.value ?? "").split(",").map((s) => s.trim()).filter(Boolean);
+        if (parts.length !== 2) return null;
+        return `${c} BETWEEN ${qLit(parts[0])} AND ${qLit(parts[1])}`;
+      }
+      case "LIKE":
+        return `${c} LIKE ${qLit(f.value)}`;
+      default:
+        if (f.value == null || f.value === "") return null;
+        return `${c} ${f.op} ${qLit(f.value)}`;
+    }
+  }).filter((x) => Boolean(x));
+  return conds.length ? ` WHERE ${conds.join(" AND ")}` : "";
+};
+var buildChartSQL = ({
+  chartType,
+  xFields = [],
+  yFields = [],
+  valueField = null,
+  filters = []
+}) => {
+  const where = compileWhere(filters);
+  const x = xFields[0]?.name;
+  const y = yFields[0]?.name;
+  switch (chartType) {
+    case "bar": {
+      if (!x) return null;
+      const metric = aggExpr(yFields[0]?.agg || "count", yFields[0]?.name);
+      return `SELECT ${qIdent(x)} AS g, ${metric} AS v FROM ${TABLE}${where} GROUP BY 1 ORDER BY 2 DESC LIMIT ${MAX_GROUPS}`;
+    }
+    case "grouped-bar": {
+      if (!x || !yFields.length) return null;
+      const metrics = yFields.map((yf, i) => `${aggExpr(yf.agg || "count", yf.name)} AS m${i}`);
+      return `SELECT ${qIdent(x)} AS g, ${metrics.join(", ")} FROM ${TABLE}${where} GROUP BY 1 ORDER BY 2 DESC LIMIT ${MAX_GROUPS}`;
+    }
+    case "pie": {
+      if (!x) return null;
+      return `SELECT ${qIdent(x)} AS g, COUNT(*) AS v FROM ${TABLE}${where} GROUP BY 1 ORDER BY 2 DESC LIMIT ${MAX_GROUPS}`;
+    }
+    case "line": {
+      if (!x || !y) return null;
+      const w = where ? `${where} AND ${qIdent(x)} IS NOT NULL AND ${qIdent(y)} IS NOT NULL` : ` WHERE ${qIdent(x)} IS NOT NULL AND ${qIdent(y)} IS NOT NULL`;
+      return `SELECT ${qIdent(x)} AS x, ${qIdent(y)} AS y FROM ${TABLE}${w} ORDER BY 1 LIMIT 500`;
+    }
+    case "scatter": {
+      if (!x || !y) return null;
+      const w = where ? `${where} AND ${qIdent(x)} IS NOT NULL AND ${qIdent(y)} IS NOT NULL` : ` WHERE ${qIdent(x)} IS NOT NULL AND ${qIdent(y)} IS NOT NULL`;
+      return `SELECT ${qIdent(x)} AS x, ${qIdent(y)} AS y FROM ${TABLE}${w} LIMIT ${MAX_POINTS}`;
+    }
+    case "heatmap": {
+      if (!x || !y) return null;
+      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`;
+    }
+    default:
+      return null;
+  }
+};
+var shapeChartData = (chartType, rows, { yFields = [] } = {}) => {
+  rows = rows || [];
+  switch (chartType) {
+    case "bar":
+      return rows.map((r) => ({ group: String(r.g ?? "(null)"), value: Number(r.v) || 0 }));
+    case "grouped-bar": {
+      const keys = yFields.map((yf) => `${yf.agg || "count"}(${yf.name})`);
+      const data = rows.map((r) => {
+        const out = { group: String(r.g ?? "(null)") };
+        yFields.forEach((_, i) => {
+          out[keys[i]] = Number(r[`m${i}`]) || 0;
+        });
+        return out;
+      });
+      return { data, keys };
+    }
+    case "pie":
+      return rows.map((r) => ({ id: String(r.g ?? "(null)"), label: String(r.g ?? "(null)"), value: Number(r.v) || 0 }));
+    case "line":
+      return [{ id: "series", data: rows.map((r) => ({ x: String(r.x), y: Number(r.y) || 0 })) }];
+    case "scatter":
+      return [{ id: "points", data: rows.map((r) => ({ x: Number(r.x) || 0, y: Number(r.y) || 0 })) }];
+    case "heatmap": {
+      const rowKeys = [];
+      const colKeys = [];
+      const cell = {};
+      for (const r of rows) {
+        const rk = String(r.r ?? "(null)");
+        const ck = String(r.c ?? "(null)");
+        if (!cell[rk]) {
+          cell[rk] = {};
+          rowKeys.push(rk);
+        }
+        if (!colKeys.includes(ck)) colKeys.push(ck);
+        cell[rk][ck] = Number(r.v) || 0;
+      }
+      return rowKeys.map((rk) => ({
+        id: rk,
+        data: colKeys.map((ck) => ({ x: ck, y: cell[rk][ck] || 0 }))
+      }));
+    }
+    default:
+      return [];
+  }
+};
+
+// src/chartStyle.ts
+var DEFAULT_CHART_STYLE = {
+  background: "transparent",
+  // chart canvas background
+  textColor: "#94a3b8",
+  // ticks + labels
+  legendColor: "#cbd5e1",
+  // axis titles (legends)
+  fontSize: 11,
+  gridColor: "rgba(148,163,184,0.1)",
+  tooltipBg: "#1e293b",
+  tooltipColor: "#e2e8f0",
+  // Axis titles (legends): position along the axis + distance from it.
+  xLegendPosition: "middle",
+  xLegendOffset: 46,
+  yLegendPosition: "middle",
+  yLegendOffset: -50,
+  // Series legend placement (charts that have one: pie, grouped bar).
+  legendAnchor: "right",
+  // Panel title alignment (rendered by DashboardRenderer's panel header).
+  titleAlign: "left"
+};
+var LEGEND_ANCHORS = ["right", "top-left", "top-right", "bottom-left", "bottom-right", "none"];
+var withStyleDefaults = (style) => ({
+  ...DEFAULT_CHART_STYLE,
+  ...style || {}
+});
+var buildNivoTheme = (style) => {
+  const s = withStyleDefaults(style);
+  return {
+    background: s.background,
+    text: { fill: s.textColor, fontSize: s.fontSize },
+    axis: {
+      ticks: { text: { fill: s.textColor, fontSize: s.fontSize } },
+      legend: { text: { fill: s.legendColor, fontSize: s.fontSize + 2 } }
+    },
+    grid: { line: { stroke: s.gridColor } },
+    crosshair: { line: { stroke: s.textColor, strokeDasharray: "6 6" } },
+    labels: { text: { fontSize: s.fontSize } },
+    legends: { text: { fill: s.textColor, fontSize: s.fontSize } },
+    tooltip: { container: { background: s.tooltipBg, color: s.tooltipColor, border: "1px solid #334155" } }
+  };
+};
+var legendConfig = (style) => {
+  const s = withStyleDefaults(style);
+  if (s.legendAnchor === "none") return null;
+  const base = {
+    anchor: s.legendAnchor,
+    direction: "column",
+    itemWidth: 90,
+    itemHeight: 18,
+    itemsSpacing: 2,
+    symbolSize: 10,
+    symbolShape: "circle",
+    itemTextColor: s.textColor
+  };
+  if (s.legendAnchor === "right") {
+    return { ...base, translateX: 100 };
+  }
+  const tx = s.legendAnchor.includes("left") ? 10 : -10;
+  const ty = s.legendAnchor.includes("top") ? 10 : -10;
+  return { ...base, translateX: tx, translateY: ty };
+};
+var axisLegend = (style, axis, legendText) => {
+  const s = withStyleDefaults(style);
+  const isX = axis === "x";
+  return {
+    legend: legendText,
+    legendPosition: isX ? s.xLegendPosition : s.yLegendPosition,
+    legendOffset: isX ? s.xLegendOffset : s.yLegendOffset
+  };
+};
+
+// src/dataShape.ts
+var groupBy = (records, column) => {
+  const groups = {};
+  for (const rec of records) {
+    const key = String(rec[column] ?? "(null)");
+    if (!groups[key]) groups[key] = [];
+    groups[key].push(rec);
+  }
+  return groups;
+};
+var aggregate = (records, column, fn) => {
+  const values = records.map((r) => r[column]).filter((v) => v != null);
+  switch (fn) {
+    case "count":
+      return records.length;
+    case "distinct":
+      return new Set(values.map(String)).size;
+    case "sum":
+      return values.reduce((a, b) => a + Number(b), 0);
+    case "avg":
+      return values.length ? values.reduce((a, b) => a + Number(b), 0) / values.length : 0;
+    case "min":
+      return Math.min(...values.map(Number));
+    case "max":
+      return Math.max(...values.map(Number));
+    default:
+      return records.length;
+  }
+};
+function MetricView({ records, config, value: presetValue }) {
+  const value = react.useMemo(() => {
+    if (presetValue != null) return presetValue;
+    if (!records?.length) return 0;
+    return aggregate(records, config.column, config.agg || "count");
+  }, [records, config, presetValue]);
+  const formatted = typeof value === "number" ? value.toLocaleString(void 0, { maximumFractionDigits: 2 }) : value;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full flex flex-col items-center justify-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-4xl font-mono text-midnight-accent", children: formatted }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-midnight-text-muted mt-2", children: config.label || `${config.agg}(${config.column})` })
+  ] });
+}
+function InsightView({ config }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full p-4 overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-midnight-text-body leading-relaxed whitespace-pre-wrap", children: config.text }) });
+}
+function BarView({ records, groupColumn, valueColumn, aggFn = "count", data: presetData, style }) {
+  const computed = react.useMemo(() => {
+    if (presetData || !records) return [];
+    const groups = groupBy(records, groupColumn);
+    return Object.entries(groups).map(([key, recs]) => ({ group: key, value: aggregate(recs, valueColumn, aggFn) })).sort((a, b) => b.value - a.value).slice(0, 50);
+  }, [records, groupColumn, valueColumn, aggFn, presetData]);
+  const data = presetData || computed;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full min-h-[400px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+    bar.ResponsiveBar,
+    {
+      data,
+      keys: ["value"],
+      indexBy: "group",
+      margin: { top: 20, right: 20, bottom: 60, left: 60 },
+      padding: 0.3,
+      colors: ["rgba(74, 222, 128, 0.8)"],
+      borderColor: { from: "color", modifiers: [["darker", 1.6]] },
+      axisBottom: { tickSize: 5, tickPadding: 5, tickRotation: -35 },
+      axisLeft: { tickSize: 5, tickPadding: 5, format: (v) => Number(v).toLocaleString() },
+      labelSkipWidth: 12,
+      labelSkipHeight: 12,
+      labelTextColor: { from: "color", modifiers: [["darker", 3]] },
+      theme: buildNivoTheme(style)
+    }
+  ) });
+}
+function PieView({ records, groupColumn, data: presetData, style }) {
+  const computed = react.useMemo(() => {
+    if (presetData || !records) return [];
+    const groups = groupBy(records, groupColumn);
+    const sorted = Object.entries(groups).sort((a, b) => b[1].length - a[1].length);
+    const top = sorted.slice(0, 12);
+    const otherCount = sorted.slice(12).reduce((sum, [, recs]) => sum + recs.length, 0);
+    const result = top.map(([key, recs]) => ({ id: key, label: key, value: recs.length }));
+    if (otherCount > 0) result.push({ id: "(other)", label: "(other)", value: otherCount });
+    return result;
+  }, [records, groupColumn, presetData]);
+  const data = presetData || computed;
+  const legend = legendConfig(style);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full min-h-[400px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+    pie.ResponsivePie,
+    {
+      data,
+      margin: { top: 20, right: 120, bottom: 20, left: 20 },
+      innerRadius: 0.4,
+      padAngle: 1,
+      cornerRadius: 3,
+      activeOuterRadiusOffset: 8,
+      colors: { scheme: "set2" },
+      borderWidth: 1,
+      borderColor: { from: "color", modifiers: [["darker", 0.2]] },
+      arcLinkLabelsSkipAngle: 10,
+      arcLinkLabelsTextColor: "#94a3b8",
+      arcLinkLabelsColor: { from: "color" },
+      arcLabelsSkipAngle: 10,
+      arcLabelsTextColor: { from: "color", modifiers: [["darker", 3]] },
+      legends: legend ? [legend] : [],
+      theme: buildNivoTheme(style)
+    }
+  ) });
+}
+function LineView({ records, xColumn, yColumn, data: presetData, style }) {
+  const computed = react.useMemo(() => {
+    if (presetData || !records) return [];
+    const sorted = [...records].filter((r) => r[xColumn] != null && r[yColumn] != null).sort((a, b) => {
+      const av = a[xColumn];
+      const bv = b[xColumn];
+      return av < bv ? -1 : av > bv ? 1 : 0;
+    }).slice(0, 500);
+    return [{
+      id: yColumn,
+      data: sorted.map((r) => ({ x: String(r[xColumn]), y: Number(r[yColumn]) || 0 }))
+    }];
+  }, [records, xColumn, yColumn, presetData]);
+  const data = presetData || computed;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full min-h-[400px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+    line.ResponsiveLine,
+    {
+      data,
+      margin: { top: 20, right: 20, bottom: 60, left: 60 },
+      xScale: { type: "point" },
+      yScale: { type: "linear", min: "auto", max: "auto" },
+      curve: "monotoneX",
+      enableArea: true,
+      areaOpacity: 0.15,
+      colors: ["rgba(96, 165, 250, 0.9)"],
+      pointSize: (data[0]?.data.length ?? 0) > 50 ? 0 : 6,
+      pointColor: { theme: "background" },
+      pointBorderWidth: 2,
+      pointBorderColor: { from: "serieColor" },
+      enableGridX: false,
+      axisBottom: { tickSize: 5, tickPadding: 5, tickRotation: -35, ...axisLegend(style, "x", xColumn) },
+      axisLeft: { tickSize: 5, tickPadding: 5, ...axisLegend(style, "y", yColumn) },
+      useMesh: true,
+      theme: buildNivoTheme(style)
+    }
+  ) });
+}
+function ScatterView({ records, xColumn, yColumn, data: presetData, style }) {
+  const computed = react.useMemo(() => {
+    if (presetData || !records) return [];
+    const points = records.filter((r) => r[xColumn] != null && r[yColumn] != null).map((r) => ({ x: Number(r[xColumn]) || 0, y: Number(r[yColumn]) || 0 })).slice(0, 1e3);
+    return [{ id: `${xColumn} vs ${yColumn}`, data: points }];
+  }, [records, xColumn, yColumn, presetData]);
+  const data = presetData || computed;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full min-h-[400px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+    scatterplot.ResponsiveScatterPlot,
+    {
+      data,
+      margin: { top: 20, right: 20, bottom: 60, left: 60 },
+      xScale: { type: "linear", min: "auto", max: "auto" },
+      yScale: { type: "linear", min: "auto", max: "auto" },
+      colors: ["rgba(167, 139, 250, 0.7)"],
+      nodeSize: 6,
+      axisBottom: { tickSize: 5, tickPadding: 5, ...axisLegend(style, "x", xColumn) },
+      axisLeft: { tickSize: 5, tickPadding: 5, ...axisLegend(style, "y", yColumn) },
+      useMesh: true,
+      theme: buildNivoTheme(style)
+    }
+  ) });
+}
+var MAX_AXIS = 30;
+var reduceVals = (vals, agg) => {
+  const nums = vals.map(Number).filter((v) => !Number.isNaN(v));
+  switch (agg) {
+    case "avg":
+      return nums.length ? nums.reduce((a, b) => a + b, 0) / nums.length : 0;
+    case "min":
+      return nums.length ? Math.min(...nums) : 0;
+    case "max":
+      return nums.length ? Math.max(...nums) : 0;
+    case "count":
+      return vals.length;
+    case "sum":
+    default:
+      return nums.reduce((a, b) => a + b, 0);
+  }
+};
+var fmtNum = (n) => {
+  if (typeof n !== "number" || Number.isNaN(n)) return "";
+  return Number.isInteger(n) ? n.toLocaleString() : n.toLocaleString(void 0, { maximumFractionDigits: 2 });
+};
+var orderIds = (ids, marginals, order) => {
+  const sorted = [...ids];
+  if (order === "total-desc") sorted.sort((a, b) => (marginals[b] || 0) - (marginals[a] || 0));
+  else if (order === "total-asc") sorted.sort((a, b) => (marginals[a] || 0) - (marginals[b] || 0));
+  else sorted.sort();
+  return sorted;
+};
+function HeatmapView({
+  records,
+  rowColumn,
+  colColumn,
+  valueColumn,
+  aggFn = "count",
+  data: presetData,
+  rowOrder = "alpha",
+  colOrder = "alpha",
+  marginAgg = "sum",
+  showTotals = false,
+  style
+}) {
+  const s = withStyleDefaults(style);
+  const base = react.useMemo(() => {
+    if (presetData) return presetData;
+    if (!records) return [];
+    const rowGroups = groupBy(records, rowColumn);
+    const colValues = [...new Set(records.map((r) => String(r[colColumn] ?? "(null)")))];
+    const fn = valueColumn ? aggFn : "count";
+    return Object.keys(rowGroups).map((rowVal) => ({
+      id: rowVal,
+      data: colValues.map((colVal) => {
+        const cellRecords = rowGroups[rowVal]?.filter((r) => String(r[colColumn] ?? "(null)") === colVal) || [];
+        return { x: colVal, y: cellRecords.length && valueColumn ? aggregate(cellRecords, valueColumn, fn) : cellRecords.length };
+      })
+    }));
+  }, [records, rowColumn, colColumn, valueColumn, aggFn, presetData]);
+  const { data, rowTotals, colTotals } = react.useMemo(() => {
+    if (!base.length) return { data: [], rowTotals: {}, colTotals: {} };
+    const cell = {};
+    const colIdSet = [];
+    for (const row of base) {
+      cell[row.id] = {};
+      for (const d of row.data) {
+        cell[row.id][d.x] = Number(d.y) || 0;
+        if (!colIdSet.includes(d.x)) colIdSet.push(d.x);
+      }
+    }
+    const rowIds = base.map((r) => r.id);
+    const rowMarg = {};
+    rowIds.forEach((rid) => {
+      rowMarg[rid] = reduceVals(colIdSet.map((cid) => cell[rid][cid] ?? 0), marginAgg);
+    });
+    const colMarg = {};
+    colIdSet.forEach((cid) => {
+      colMarg[cid] = reduceVals(rowIds.map((rid) => cell[rid][cid] ?? 0), marginAgg);
+    });
+    const orderedRows = orderIds(rowIds, rowMarg, rowOrder).slice(0, MAX_AXIS);
+    const orderedCols = orderIds(colIdSet, colMarg, colOrder).slice(0, MAX_AXIS);
+    const shaped = orderedRows.map((rid) => ({
+      id: rid,
+      data: orderedCols.map((cid) => ({ x: cid, y: cell[rid][cid] ?? 0 }))
+    }));
+    return { data: shaped, rowTotals: rowMarg, colTotals: colMarg };
+  }, [base, rowOrder, colOrder, marginAgg]);
+  if (!data.length || !data[0].data.length) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-8 text-center text-midnight-text-muted", children: "Not enough distinct values for a heatmap" });
+  }
+  const margin = showTotals ? { top: 60, right: 70, bottom: 60, left: 100 } : { top: 60, right: 20, bottom: 20, left: 100 };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full min-h-[400px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+    heatmap.ResponsiveHeatMap,
+    {
+      data,
+      margin,
+      axisTop: { tickSize: 5, tickPadding: 5, tickRotation: -35, legend: colColumn, legendPosition: s.xLegendPosition, legendOffset: -50 },
+      axisLeft: { tickSize: 5, tickPadding: 5, legend: rowColumn, legendPosition: s.yLegendPosition, legendOffset: -80 },
+      axisRight: showTotals ? { tickSize: 5, tickPadding: 5, format: (id) => fmtNum(rowTotals[id]), legend: `${marginAgg} \u25B8`, legendOffset: 60 } : null,
+      axisBottom: showTotals ? { tickSize: 5, tickPadding: 5, tickRotation: -35, format: (id) => fmtNum(colTotals[id]) } : null,
+      colors: { type: "sequential", scheme: "blue_green", minValue: 0 },
+      emptyColor: "#1e293b",
+      borderWidth: 1,
+      borderColor: "#334155",
+      labelTextColor: { from: "color", modifiers: [["darker", 3]] },
+      hoverTarget: "cell",
+      theme: buildNivoTheme(style)
+    }
+  ) });
+}
+function PivotView({ records }) {
+  const [pivotState, setPivotState] = react.useState({});
+  if (!records?.length) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-8 text-center text-midnight-text-muted", children: "No data for pivot" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full overflow-auto pivot-dark-theme", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+                /* Override react-pivottable styles for dark theme */
+                .pivot-dark-theme .pvtUi { background: transparent; color: #e2e8f0; }
+                .pivot-dark-theme table.pvtTable { font-size: 12px; color: #e2e8f0; border-collapse: collapse; }
+                .pivot-dark-theme table.pvtTable thead tr th,
+                .pivot-dark-theme table.pvtTable tbody tr th { background: #1e293b; color: #94a3b8; border: 1px solid #334155; padding: 4px 8px; }
+                .pivot-dark-theme table.pvtTable tbody tr td { background: #0f172a; color: #e2e8f0; border: 1px solid #334155; padding: 4px 8px; text-align: right; }
+                .pivot-dark-theme .pvtAxisContainer, .pivot-dark-theme .pvtVals { background: #1e293b; border: 1px solid #334155; }
+                .pivot-dark-theme .pvtAxisContainer li.pvtAxis { background: #334155; color: #e2e8f0; border: 1px solid #475569; border-radius: 3px; }
+                .pivot-dark-theme .pvtFilterBox { background: #1e293b; border: 1px solid #334155; color: #e2e8f0; }
+                .pivot-dark-theme .pvtDropdown { background: #1e293b; color: #e2e8f0; border: 1px solid #334155; }
+                .pivot-dark-theme .pvtSearch { background: #0f172a; color: #e2e8f0; border: 1px solid #334155; }
+                .pivot-dark-theme select, .pivot-dark-theme .pvtAggregator { background: #1e293b; color: #e2e8f0; border: 1px solid #334155; }
+                .pivot-dark-theme .pvtRenderers { background: #1e293b; color: #e2e8f0; border: 1px solid #334155; }
+            ` }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      PivotTableUI__default.default,
+      {
+        data: records,
+        onChange: (s) => setPivotState(s),
+        ...pivotState
+      }
+    )
+  ] });
+}
+function Row({ label, children }) {
+  const { theme } = useDashboard();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 min-h-[28px]", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-xs ${theme.font} text-midnight-text-muted`, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children })
+  ] });
+}
+function ColorControl({ value, onChange }) {
+  const { theme } = useDashboard();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      type: "color",
+      value: /^#/.test(value) ? value : "#94a3b8",
+      onChange: (e) => onChange(e.target.value),
+      className: `w-9 h-6 bg-transparent border ${theme.border} cursor-pointer`
+    }
+  );
+}
+function NumberControl({ value, onChange, min, max }) {
+  const { theme } = useDashboard();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      type: "number",
+      value,
+      min,
+      max,
+      onChange: (e) => onChange(Number(e.target.value)),
+      className: `w-20 px-2 py-1 text-xs ${theme.font} bg-midnight-surface border ${theme.border} text-midnight-text-body outline-none focus:border-midnight-accent`
+    }
+  );
+}
+function Choice({ value, options, onChange }) {
+  const { theme } = useDashboard();
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-28", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "select",
+    {
+      value,
+      onChange: (e) => onChange(e.target.value),
+      className: `w-full px-2 py-1 text-xs ${theme.font} bg-midnight-surface border ${theme.border} text-midnight-text-body outline-none focus:border-midnight-accent`,
+      children: options.map((o) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: o, children: o }, o))
+    }
+  ) });
+}
+function Group({ children, last }) {
+  const { theme } = useDashboard();
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `space-y-2 pb-3 ${last ? "" : `mb-3 border-b ${theme.border}`}`, children });
+}
+function ChartStyleControls({ style, onChange }) {
+  const s = withStyleDefaults(style);
+  const set = (key, value) => onChange({ ...s, [key]: value });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Group, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Background", children: /* @__PURE__ */ jsxRuntime.jsx(ColorControl, { value: s.background, onChange: (v) => set("background", v) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Text color", children: /* @__PURE__ */ jsxRuntime.jsx(ColorControl, { value: s.textColor, onChange: (v) => set("textColor", v) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Title color", children: /* @__PURE__ */ jsxRuntime.jsx(ColorControl, { value: s.legendColor, onChange: (v) => set("legendColor", v) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Grid color", children: /* @__PURE__ */ jsxRuntime.jsx(ColorControl, { value: s.gridColor, onChange: (v) => set("gridColor", v) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Font size", children: /* @__PURE__ */ jsxRuntime.jsx(NumberControl, { value: s.fontSize, min: 6, max: 24, onChange: (v) => set("fontSize", v) }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Group, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "X title pos", children: /* @__PURE__ */ jsxRuntime.jsx(Choice, { value: s.xLegendPosition, options: ["start", "middle", "end"], onChange: (v) => set("xLegendPosition", v) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "X title offset", children: /* @__PURE__ */ jsxRuntime.jsx(NumberControl, { value: s.xLegendOffset, onChange: (v) => set("xLegendOffset", v) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Y title pos", children: /* @__PURE__ */ jsxRuntime.jsx(Choice, { value: s.yLegendPosition, options: ["start", "middle", "end"], onChange: (v) => set("yLegendPosition", v) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Y title offset", children: /* @__PURE__ */ jsxRuntime.jsx(NumberControl, { value: s.yLegendOffset, onChange: (v) => set("yLegendOffset", v) }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Group, { last: true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Legend", children: /* @__PURE__ */ jsxRuntime.jsx(Choice, { value: s.legendAnchor, options: ["right", "top-left", "top-right", "bottom-left", "bottom-right", "none"], onChange: (v) => set("legendAnchor", v) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Title align", children: /* @__PURE__ */ jsxRuntime.jsx(Choice, { value: s.titleAlign, options: ["left", "center", "right"], onChange: (v) => set("titleAlign", v) }) })
+    ] })
+  ] });
+}
+var DEFAULT_SQL = "SELECT *\nFROM data\nLIMIT 100";
+var renderCell = (v) => {
+  if (v == null) return "";
+  if (typeof v === "object") return JSON.stringify(v);
+  if (typeof v === "boolean") return v ? "true" : "false";
+  return String(v);
+};
+function SqlConsole({ columns = [], stateId }) {
+  const { theme, runQuery } = useDashboard();
+  const [sql, setSql] = react.useState(DEFAULT_SQL);
+  const [result, setResult] = react.useState(null);
+  const [error, setError] = react.useState(null);
+  const [running, setRunning] = react.useState(false);
+  const run = async () => {
+    if (running || !sql.trim()) return;
+    setRunning(true);
+    setError(null);
+    try {
+      const data = await runQuery(sql, stateId);
+      setResult({ columns: data.columns || [], rows: data.rows || [] });
+    } catch (err) {
+      setResult(null);
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setRunning(false);
+    }
+  };
+  const onKeyDown = (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+      e.preventDefault();
+      void run();
+    }
+  };
+  const resultColumns = result?.columns || [];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `border-b ${theme.border} bg-midnight-elevated p-3 shrink-0`, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs uppercase text-midnight-text-muted font-mono", children: [
+          "SQL \u2014 table is ",
+          /* @__PURE__ */ jsxRuntime.jsx("code", { className: "text-midnight-accent", children: "data" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => void run(),
+            disabled: running || !sql.trim(),
+            className: `flex items-center gap-1.5 px-3 py-1 border text-xs font-mono transition-colors ${running ? "border-midnight-border opacity-50" : "border-midnight-accent text-midnight-accent hover:bg-midnight-accent/10"}`,
+            children: [
+              running ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-3.5 h-3.5 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Play, { className: "w-3.5 h-3.5" }),
+              "Run ",
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-60", children: "\u2318\u21B5" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          value: sql,
+          onChange: (e) => setSql(e.target.value),
+          onKeyDown,
+          spellCheck: false,
+          rows: 5,
+          className: "w-full bg-midnight-surface border border-midnight-border px-3 py-2 text-sm font-mono outline-none text-midnight-text-body resize-y focus:border-midnight-accent transition-colors",
+          placeholder: "SELECT ... FROM data"
+        }
+      ),
+      columns.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex flex-wrap gap-1", children: columns.map((c) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          title: `Insert ${c.name}`,
+          onClick: () => setSql((s) => `${s}${s.endsWith(" ") || s.endsWith("\n") || !s ? "" : " "}${c.name}`),
+          className: "px-1.5 py-0.5 border border-midnight-border text-[11px] font-mono text-midnight-text-muted hover:bg-midnight-raised transition-colors",
+          children: [
+            c.name,
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-50 ml-1", children: c.type })
+          ]
+        },
+        c.name
+      )) })
+    ] }),
+    (result || error) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex items-center gap-4 px-3 py-1.5 border-b ${theme.border} text-xs font-mono shrink-0 ${error ? "text-red-400" : "text-midnight-text-muted"}`, children: error ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "w-3.5 h-3.5" }),
+      " ",
+      error
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Rows3, { className: "w-3.5 h-3.5" }),
+      " ",
+      result.rows.length.toLocaleString(),
+      " rows"
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 overflow-auto", children: result && !error && resultColumns.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full text-xs", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "sticky top-0 bg-midnight-elevated", children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: resultColumns.map((c) => /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-2 py-1.5 text-left text-midnight-text-muted font-mono border-b border-midnight-border whitespace-nowrap", children: c }, c)) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: result.rows.map((row, i) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "border-b border-dashed border-midnight-border hover:bg-midnight-raised", children: resultColumns.map((c) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-2 py-1 text-midnight-text-body font-mono truncate max-w-[300px]", children: renderCell(row[c]) }, c)) }, i)) })
+    ] }) : !error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center h-full text-sm text-midnight-text-muted", children: [
+      "Write a query and press ",
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-midnight-accent mx-1", children: "Run" }),
+      " (\u2318\u21B5)"
+    ] }) })
+  ] });
+}
+var CHART_TYPES = [
+  { id: "bar", icon: lucideReact.BarChart3, label: "Bar" },
+  { id: "pie", icon: lucideReact.PieChart, label: "Pie" },
+  { id: "line", icon: lucideReact.TrendingUp, label: "Line" },
+  { id: "scatter", icon: lucideReact.ScatterChart, label: "Scatter" },
+  { id: "heatmap", icon: lucideReact.LayoutGrid, label: "Heatmap" },
+  { id: "grouped-bar", icon: lucideReact.BarChart3, label: "Grouped Bar" }
+];
+var AGG_OPTIONS = ["count", "distinct", "sum", "avg", "min", "max"];
+var FILTER_OPS = ["=", "!=", "<", "<=", ">", ">=", "IN", "NOT IN", "LIKE", "BETWEEN", "IS NULL", "IS NOT NULL"];
+var OPS_NO_VALUE = /* @__PURE__ */ new Set(["IS NULL", "IS NOT NULL"]);
+var SelectControl = ({ value, options, onChange, className = "w-28" }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx(
+  "select",
+  {
+    value,
+    onChange: (e) => onChange(e.target.value),
+    className: "w-full 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 transition-colors",
+    children: options.map((o) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: o.id, children: o.label }, o.id))
+  }
+) });
+var ORDER_OPTIONS = [
+  { id: "alpha", label: "A \u2192 Z" },
+  { id: "total-desc", label: "Total \u2193" },
+  { id: "total-asc", label: "Total \u2191" }
+];
+var MARGIN_AGGS = ["sum", "avg", "min", "max", "count"].map((a) => ({ id: a, label: a }));
+var FILTER_OP_OPTIONS = FILTER_OPS.map((o) => ({ id: o, label: o }));
+var FieldPill = ({ name, type, onRemove, onChangeAgg, agg, showAgg }) => {
+  const typeColor = {
+    string: "border-green-500/50 text-green-400",
+    int64: "border-blue-500/50 text-blue-400",
+    float64: "border-purple-500/50 text-purple-400",
+    bool: "border-orange-500/50 text-orange-400"
+  }[type ?? ""] || "border-midnight-border text-midnight-text-body";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center gap-1 px-2 py-1 border ${typeColor} bg-midnight-surface text-xs font-mono`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GripVertical, { className: "w-3 h-3 opacity-40" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: name }),
+    showAgg && /* @__PURE__ */ jsxRuntime.jsx(
+      "select",
+      {
+        value: agg,
+        onChange: (e) => onChangeAgg?.(e.target.value),
+        className: "bg-transparent border-none text-xs outline-none ml-1 text-midnight-text-muted",
+        children: AGG_OPTIONS.map((a) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: a, children: a }, a))
+      }
+    ),
+    onRemove && /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: onRemove, className: "ml-1 hover:text-red-400", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3 h-3" }) })
+  ] });
+};
+var DropZone = ({ label, fields, onAdd, onRemove, onChangeAgg, columns, showAgg = false, maxFields = 5 }) => {
+  const [showPicker, setShowPicker] = react.useState(false);
+  const usedNames = new Set(fields.map((f) => f.name));
+  const available = columns.filter((c) => !usedNames.has(c.name));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs uppercase text-midnight-text-muted mb-1 font-mono", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-1 min-h-[32px] p-1.5 border border-dashed border-midnight-border bg-midnight-surface/50", children: [
+      fields.map((f, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        FieldPill,
+        {
+          name: f.name,
+          type: f.type,
+          agg: f.agg,
+          showAgg,
+          onRemove: () => onRemove(i),
+          onChangeAgg: (agg) => onChangeAgg(i, agg)
+        },
+        f.name
+      )),
+      fields.length < maxFields && available.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => setShowPicker(!showPicker),
+            className: "flex items-center gap-1 px-2 py-1 border border-dashed border-midnight-border text-xs text-midnight-text-muted hover:bg-midnight-raised transition-colors",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "w-3 h-3" }),
+              " Add"
+            ]
+          }
+        ),
+        showPicker && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-full left-0 mt-1 z-20 bg-midnight-elevated border border-midnight-border shadow-lg max-h-[200px] overflow-auto min-w-[150px]", children: available.map((col) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => {
+              onAdd({ name: col.name, type: col.type, agg: "count" });
+              setShowPicker(false);
+            },
+            className: "block w-full text-left px-3 py-1.5 text-xs font-mono text-midnight-text-body hover:bg-midnight-raised transition-colors",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: col.name }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-midnight-text-muted ml-2", children: [
+                "(",
+                col.type,
+                ")"
+              ] })
+            ]
+          },
+          col.name
+        )) })
+      ] })
+    ] })
+  ] });
+};
+var FiltersSection = ({ filters, columns, onChange }) => {
+  const addFilter = () => onChange([...filters, { column: columns[0]?.name || "", op: "=", value: "" }]);
+  const updateFilter = (i, patch) => onChange(filters.map((f, idx) => idx === i ? { ...f, ...patch } : f));
+  const removeFilter = (i) => onChange(filters.filter((_, idx) => idx !== i));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs uppercase text-midnight-text-muted font-mono flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { className: "w-3 h-3" }),
+        " Filters"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          onClick: addFilter,
+          disabled: !columns.length,
+          className: "flex items-center gap-1 px-1.5 py-0.5 border border-dashed border-midnight-border text-xs text-midnight-text-muted hover:bg-midnight-raised transition-colors",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "w-3 h-3" }),
+            " Add"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+      filters.map((f, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SelectControl,
+          {
+            value: f.column,
+            options: columns.map((c) => ({ id: c.name, label: c.name })),
+            onChange: (colId) => updateFilter(i, { column: colId }),
+            className: "flex-1 min-w-0"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SelectControl,
+          {
+            value: f.op,
+            options: FILTER_OP_OPTIONS,
+            onChange: (op) => updateFilter(i, { op }),
+            className: "w-24 shrink-0"
+          }
+        ),
+        !OPS_NO_VALUE.has(f.op) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            value: f.value ?? "",
+            onChange: (e) => updateFilter(i, { value: e.target.value }),
+            placeholder: f.op === "IN" || f.op === "NOT IN" ? "a,b,c" : f.op === "BETWEEN" ? "lo,hi" : "value",
+            className: "w-full 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 transition-colors"
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => removeFilter(i), className: "text-midnight-text-muted hover:text-red-400", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3 h-3" }) })
+      ] }, i)),
+      !filters.length && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-midnight-text-muted font-mono px-1", children: "No filters" })
+    ] })
+  ] });
+};
+var GroupedBarChart = ({ records, xFields = [], yFields = [], groupField, data: presetData, keys: presetKeys, style }) => {
+  const computed = react.useMemo(() => {
+    if (presetData || !records || !xFields.length || !yFields.length) return [];
+    const xCol = xFields[0].name;
+    const groups = groupBy(records, xCol);
+    return Object.entries(groups).map(([key, recs]) => {
+      const row = { group: key };
+      yFields.forEach((yf) => {
+        row[`${yf.agg}(${yf.name})`] = aggregate(recs, yf.name, yf.agg ?? "count");
+      });
+      return row;
+    }).sort((a, b) => {
+      const firstKey = `${yFields[0].agg}(${yFields[0].name})`;
+      return (Number(b[firstKey]) || 0) - (Number(a[firstKey]) || 0);
+    }).slice(0, 50);
+  }, [records, xFields, yFields, presetData]);
+  const data = presetData || computed;
+  if (!data.length) return null;
+  const keys = presetKeys || yFields.map((yf) => `${yf.agg}(${yf.name})`);
+  const colors = ["rgba(74,222,128,0.8)", "rgba(96,165,250,0.8)", "rgba(251,146,60,0.8)", "rgba(167,139,250,0.8)", "rgba(248,113,113,0.8)"];
+  const legend = legendConfig(style);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full min-h-[400px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+    bar.ResponsiveBar,
+    {
+      data,
+      keys,
+      indexBy: "group",
+      groupMode: groupField ? "grouped" : "stacked",
+      margin: { top: 20, right: 120, bottom: 60, left: 60 },
+      padding: 0.3,
+      colors: colors.slice(0, keys.length),
+      axisBottom: { tickSize: 5, tickPadding: 5, tickRotation: -35 },
+      axisLeft: { tickSize: 5, tickPadding: 5, format: (v) => Number(v).toLocaleString() },
+      labelSkipWidth: 12,
+      labelSkipHeight: 12,
+      labelTextColor: { from: "color", modifiers: [["darker", 3]] },
+      legends: legend ? [{ dataFrom: "keys", ...legend }] : [],
+      theme: buildNivoTheme(style)
+    }
+  ) });
+};
+var ChartPreview = ({
+  chartType,
+  records,
+  xFields,
+  yFields,
+  valueField,
+  groupField,
+  engineMode,
+  sqlRows,
+  sqlLoading,
+  sqlError,
+  heatmapOpts = {},
+  style
+}) => {
+  const xCol = xFields[0]?.name;
+  const yCol = yFields[0]?.name;
+  const yAgg = yFields[0]?.agg || "count";
+  if (engineMode === "sql") {
+    if (sqlError) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center h-full text-sm text-red-400 gap-2 px-4 text-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "w-4 h-4 shrink-0" }),
+        " ",
+        sqlError
+      ] });
+    }
+    if (sqlLoading && !sqlRows) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center h-full text-sm text-midnight-text-muted gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-4 h-4 animate-spin" }),
+        " Running query\u2026"
+      ] });
+    }
+    if (!sqlRows) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full text-sm text-midnight-text-muted", children: "Configure the chart to run a query" });
+    }
+    if (chartType === "grouped-bar" || chartType === "bar" && (yFields.length > 1 || groupField)) {
+      const { data, keys } = shapeChartData("grouped-bar", sqlRows, { yFields });
+      return /* @__PURE__ */ jsxRuntime.jsx(GroupedBarChart, { data, keys, yFields, groupField, style });
+    }
+    const shaped = shapeChartData(chartType, sqlRows, { yFields });
+    switch (chartType) {
+      case "bar":
+        return /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(BarView, { data: shaped, groupColumn: xCol, valueColumn: yCol, style }) });
+      case "pie":
+        return /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(PieView, { data: shaped, groupColumn: xCol, style }) });
+      case "line":
+        return /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LineView, { data: shaped, xColumn: xCol, yColumn: yCol, style }) });
+      case "scatter":
+        return /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(ScatterView, { data: shaped, xColumn: xCol, yColumn: yCol, style }) });
+      case "heatmap":
+        return shaped.length ? /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(HeatmapView, { data: shaped, rowColumn: xCol, colColumn: yCol, ...heatmapOpts, style }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full text-sm text-midnight-text-muted", children: "No data" });
+      default:
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full text-sm text-midnight-text-muted", children: "Select a chart type" });
+    }
+  }
+  if (!records?.length) return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full text-sm text-midnight-text-muted", children: "No data" });
+  switch (chartType) {
+    case "bar":
+      if (yFields.length > 1 || groupField) {
+        return /* @__PURE__ */ jsxRuntime.jsx(GroupedBarChart, { records, xFields, yFields, groupField, style });
+      }
+      return xCol ? /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(BarView, { records, groupColumn: xCol, valueColumn: yCol, aggFn: yAgg, style }) }) : null;
+    case "grouped-bar":
+      return /* @__PURE__ */ jsxRuntime.jsx(GroupedBarChart, { records, xFields, yFields, groupField, style });
+    case "pie":
+      return xCol ? /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(PieView, { records, groupColumn: xCol, style }) }) : null;
+    case "line":
+      return xCol && yCol ? /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LineView, { records, xColumn: xCol, yColumn: yCol, style }) }) : null;
+    case "scatter":
+      return xCol && yCol ? /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(ScatterView, { records, xColumn: xCol, yColumn: yCol, style }) }) : null;
+    case "heatmap":
+      return xCol && yCol ? /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(HeatmapView, { records, rowColumn: xCol, colColumn: yCol, valueColumn: valueField?.name, aggFn: valueField?.agg || "count", ...heatmapOpts, style }) }) : null;
+    default:
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full text-sm text-midnight-text-muted", children: "Select a chart type" });
+  }
+};
+function ChartBuilder({ records, columns, stateId, onSave }) {
+  const { theme, runQuery } = useDashboard();
+  const [chartType, setChartType] = react.useState("bar");
+  const [xFields, setXFields] = react.useState([]);
+  const [yFields, setYFields] = react.useState([]);
+  const [valueField, setValueField] = react.useState(null);
+  const [groupField, setGroupField] = react.useState(null);
+  const [colorField, setColorField] = react.useState(null);
+  const [title, setTitle] = react.useState("");
+  const [engineMode, setEngineMode] = react.useState("sql");
+  const [filters, setFilters] = react.useState([]);
+  const [showSql, setShowSql] = react.useState(false);
+  const [rowOrder, setRowOrder] = react.useState("alpha");
+  const [colOrder, setColOrder] = react.useState("alpha");
+  const [marginAgg, setMarginAgg] = react.useState("sum");
+  const [showTotals, setShowTotals] = react.useState(false);
+  const [style, setStyle] = react.useState(DEFAULT_CHART_STYLE);
+  const [showStyle, setShowStyle] = react.useState(false);
+  const [sqlRows, setSqlRows] = react.useState(null);
+  const [sqlLoading, setSqlLoading] = react.useState(false);
+  const [sqlError, setSqlError] = react.useState(null);
+  const generatedSql = react.useMemo(
+    () => buildChartSQL({ chartType, xFields, yFields, valueField, filters }),
+    [chartType, xFields, yFields, valueField, filters]
+  );
+  react.useEffect(() => {
+    if (engineMode !== "sql") return void 0;
+    if (!generatedSql) {
+      setSqlRows(null);
+      setSqlError(null);
+      return void 0;
+    }
+    let cancelled = false;
+    setSqlLoading(true);
+    setSqlError(null);
+    runQuery(generatedSql, stateId).then((res) => {
+      if (cancelled) return;
+      setSqlLoading(false);
+      setSqlRows(res.rows || []);
+    }).catch((err) => {
+      if (cancelled) return;
+      setSqlLoading(false);
+      setSqlRows(null);
+      setSqlError(err instanceof Error ? err.message : String(err) || "Query failed");
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [engineMode, generatedSql, runQuery, stateId]);
+  const addField = (zone, field) => {
+    switch (zone) {
+      case "x":
+        setXFields((f) => [...f, field]);
+        break;
+      case "y":
+        setYFields((f) => [...f, field]);
+        break;
+      case "value":
+        setValueField(field);
+        break;
+      case "group":
+        setGroupField(field);
+        break;
+      case "color":
+        setColorField(field);
+        break;
+    }
+  };
+  const removeField = (zone, idx) => {
+    switch (zone) {
+      case "x":
+        setXFields((f) => f.filter((_, i) => i !== idx));
+        break;
+      case "y":
+        setYFields((f) => f.filter((_, i) => i !== idx));
+        break;
+      case "value":
+        setValueField(null);
+        break;
+      case "group":
+        setGroupField(null);
+        break;
+      case "color":
+        setColorField(null);
+        break;
+    }
+  };
+  const changeAgg = (zone, idx, agg) => {
+    if (zone === "y") {
+      setYFields((f) => f.map((field, i) => i === idx ? { ...field, agg } : field));
+    } else if (zone === "value") {
+      setValueField((f) => f ? { ...f, agg } : f);
+    }
+  };
+  const handleSaveToDashboard = () => {
+    if (!onSave) return;
+    const config = {};
+    if (xFields.length) config.group = xFields[0].name;
+    if (yFields.length) {
+      config.value = yFields[0].name;
+      config.agg = yFields[0].agg;
+    }
+    if (chartType === "line" || chartType === "scatter") {
+      config.x = xFields[0]?.name;
+      config.y = yFields[0]?.name;
+    }
+    if (chartType === "heatmap") {
+      config.row = xFields[0]?.name;
+      config.col = yFields[0]?.name;
+      if (valueField) {
+        config.value = valueField.name;
+        config.agg = valueField.agg || "count";
+      } else {
+        delete config.value;
+        delete config.agg;
+      }
+      config.rowOrder = rowOrder;
+      config.colOrder = colOrder;
+      config.marginAgg = marginAgg;
+      config.showTotals = showTotals;
+    }
+    if (engineMode === "sql" && generatedSql) {
+      config.sql = generatedSql;
+      config.chartType = chartType;
+      if (filters.length) config.filters = filters;
+      if (yFields.length) config.yFields = yFields.map((f) => ({ name: f.name, agg: f.agg }));
+    }
+    config.style = style;
+    onSave({
+      title: title || `${chartType} chart`,
+      type: chartType === "grouped-bar" ? "bar" : chartType,
+      config,
+      width: 6,
+      height: 2
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `w-[280px] shrink-0 border-r ${theme.border} bg-midnight-elevated overflow-y-auto p-3 space-y-4`, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs uppercase text-midnight-text-muted mb-2 font-mono", children: "Chart Type" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-1", children: CHART_TYPES.map((ct) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => setChartType(ct.id),
+            className: `flex flex-col items-center gap-1 p-2 border text-xs font-mono transition-colors ${chartType === ct.id ? "border-midnight-accent text-midnight-accent bg-midnight-accent/10" : "border-midnight-border text-midnight-text-muted hover:bg-midnight-raised"}`,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ct.icon, { className: "w-4 h-4" }),
+              ct.label
+            ]
+          },
+          ct.id
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs uppercase text-midnight-text-muted mb-1 font-mono", children: "Query Engine" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex border border-midnight-border", children: [
+          { id: "sql", label: "SQL (full data)" },
+          { id: "direct", label: "Direct (sample)" }
+        ].map((m) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => setEngineMode(m.id),
+            className: `flex-1 px-2 py-1 text-xs font-mono transition-colors ${engineMode === m.id ? "bg-midnight-accent/10 text-midnight-accent" : "text-midnight-text-muted hover:bg-midnight-raised"}`,
+            children: m.label
+          },
+          m.id
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        DropZone,
+        {
+          label: chartType === "heatmap" ? "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
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        DropZone,
+        {
+          label: chartType === "heatmap" ? "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
+        }
+      ),
+      chartType === "heatmap" && /* @__PURE__ */ jsxRuntime.jsx(
+        DropZone,
+        {
+          label: "Cell Value (optional \u2014 defaults to count)",
+          fields: valueField ? [valueField] : [],
+          columns,
+          onAdd: (f) => addField("value", f),
+          onRemove: () => removeField("value"),
+          onChangeAgg: (i, agg) => changeAgg("value", i, agg),
+          showAgg: true,
+          maxFields: 1
+        }
+      ),
+      chartType === "heatmap" && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs uppercase text-midnight-text-muted mb-2 font-mono", children: "Order & Totals" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 min-h-[28px]", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-mono text-midnight-text-muted", children: "Order rows" }),
+            /* @__PURE__ */ jsxRuntime.jsx(SelectControl, { value: rowOrder, options: ORDER_OPTIONS, onChange: (v) => setRowOrder(v) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 min-h-[28px]", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-mono text-midnight-text-muted", children: "Order columns" }),
+            /* @__PURE__ */ jsxRuntime.jsx(SelectControl, { value: colOrder, options: ORDER_OPTIONS, onChange: (v) => setColOrder(v) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 min-h-[28px]", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-mono text-midnight-text-muted", children: "Total aggregator" }),
+            /* @__PURE__ */ jsxRuntime.jsx(SelectControl, { value: marginAgg, options: MARGIN_AGGS, onChange: setMarginAgg })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: showTotals,
+                onChange: (e) => setShowTotals(e.target.checked),
+                className: "accent-midnight-accent"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-mono text-midnight-text-muted", children: "Show row/column totals" })
+          ] })
+        ] })
+      ] }),
+      (chartType === "bar" || chartType === "grouped-bar") && /* @__PURE__ */ jsxRuntime.jsx(
+        DropZone,
+        {
+          label: "Group / Color",
+          fields: groupField ? [groupField] : [],
+          columns,
+          onAdd: (f) => addField("group", f),
+          onRemove: () => removeField("group"),
+          onChangeAgg: () => {
+          },
+          maxFields: 1
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(FiltersSection, { filters, columns, onChange: setFilters }),
+      engineMode === "sql" && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => setShowSql((s) => !s),
+            className: "flex items-center gap-1 text-xs uppercase text-midnight-text-muted font-mono hover:text-midnight-text-body transition-colors",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code, { className: "w-3 h-3" }),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: `w-3 h-3 transition-transform ${showSql ? "" : "-rotate-90"}` }),
+              "Generated SQL"
+            ]
+          }
+        ),
+        showSql && /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "mt-1 p-2 bg-midnight-surface border border-midnight-border text-[11px] font-mono text-midnight-text-body whitespace-pre-wrap break-words max-h-[160px] overflow-auto", children: generatedSql || "\u2014 configure the chart \u2014" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => setShowStyle((s) => !s),
+            className: "flex items-center gap-1 text-xs uppercase text-midnight-text-muted font-mono hover:text-midnight-text-body transition-colors",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: `w-3 h-3 transition-transform ${showStyle ? "" : "-rotate-90"}` }),
+              "Appearance"
+            ]
+          }
+        ),
+        showStyle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(ChartStyleControls, { style, onChange: setStyle }) })
+      ] }),
+      onSave && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-4 border-t border-midnight-border", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            value: title,
+            onChange: (e) => setTitle(e.target.value),
+            placeholder: "Chart title...",
+            className: "w-full mb-2 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 transition-colors"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: handleSaveToDashboard,
+            className: "w-full px-3 py-1.5 border border-midnight-accent text-midnight-accent text-xs font-mono hover:bg-midnight-accent/10 transition-colors",
+            children: "+ Add to Dashboard"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-4 border-t border-midnight-border", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs uppercase text-midnight-text-muted mb-2 font-mono", children: "Available Fields" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs font-mono px-1 py-0.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-midnight-text-body", children: col.name }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-midnight-text-muted", children: col.type })
+        ] }, col.name)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+      ChartPreview,
+      {
+        chartType,
+        records,
+        xFields,
+        yFields,
+        valueField,
+        groupField,
+        colorField,
+        engineMode,
+        sqlRows,
+        sqlLoading,
+        sqlError,
+        heatmapOpts: { rowOrder, colOrder, marginAgg, showTotals },
+        style
+      }
+    ) })
+  ] });
+}
+function ViewLoading() {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full text-xs text-midnight-text-muted", children: "Loading..." });
+}
+function SqlPanel({ panel }) {
+  const { runQuery } = useDashboard();
+  const config = panel.config || {};
+  const chartType = config.chartType || panel.type;
+  const [rows, setRows] = react.useState(null);
+  const [error, setError] = react.useState(null);
+  const [loading, setLoading] = react.useState(true);
+  react.useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    const sql = config.sql || "";
+    runQuery(sql).then(
+      (res) => {
+        if (cancelled) return;
+        setLoading(false);
+        setRows(res?.rows || []);
+      },
+      (err) => {
+        if (cancelled) return;
+        setLoading(false);
+        setRows(null);
+        setError(err instanceof Error ? err.message : String(err) || "Query failed");
+      }
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [config.sql, runQuery]);
+  if (loading && !rows) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full text-xs text-midnight-text-muted", children: "Running\u2026" });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full text-xs text-red-400 px-2 text-center", children: error });
+  }
+  if (!rows) return null;
+  if (chartType === "metric") {
+    const first = rows[0];
+    const v = first ? Object.values(first)[0] : 0;
+    return /* @__PURE__ */ jsxRuntime.jsx(MetricView, { value: Number(v) || 0, config: { column: config.column || "", agg: config.agg, label: config.label } });
+  }
+  const shaped = shapeChartData(chartType, rows, { yFields: config.yFields || [] });
+  switch (chartType) {
+    case "bar":
+      return /* @__PURE__ */ jsxRuntime.jsx(BarView, { data: shaped, groupColumn: config.group || "", valueColumn: config.value || "", style: config.style });
+    case "grouped-bar": {
+      const gb = shaped;
+      return /* @__PURE__ */ jsxRuntime.jsx(GroupedBarChart, { data: gb.data, keys: gb.keys, yFields: config.yFields || [], style: config.style });
+    }
+    case "pie":
+      return /* @__PURE__ */ jsxRuntime.jsx(PieView, { data: shaped, groupColumn: config.group || "", style: config.style });
+    case "line":
+      return /* @__PURE__ */ jsxRuntime.jsx(LineView, { data: shaped, xColumn: config.x || "", yColumn: config.y || "", style: config.style });
+    case "scatter":
+      return /* @__PURE__ */ jsxRuntime.jsx(ScatterView, { data: shaped, xColumn: config.x || "", yColumn: config.y || "", style: config.style });
+    case "heatmap":
+      return shaped.length ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full text-xs text-midnight-text-muted", children: "No data" });
+    default:
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 text-xs text-midnight-text-muted", children: [
+        "Unsupported SQL chart: ",
+        chartType
+      ] });
+  }
+}
+function PanelContent({ panel, records, columns }) {
+  const { type } = panel;
+  const config = panel.config || {};
+  if (config.sql) {
+    return /* @__PURE__ */ jsxRuntime.jsx(SqlPanel, { panel });
+  }
+  if (!records?.length && type !== "insight") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full text-xs text-midnight-text-muted", children: "No data" });
+  }
+  switch (type) {
+    case "bar":
+      return config.group ? /* @__PURE__ */ jsxRuntime.jsx(BarView, { records, groupColumn: config.group, valueColumn: config.value || "", aggFn: config.agg || "count", style: config.style }) : null;
+    case "pie":
+      return config.group ? /* @__PURE__ */ jsxRuntime.jsx(PieView, { records, groupColumn: config.group, style: config.style }) : null;
+    case "line":
+      return config.x && config.y ? /* @__PURE__ */ jsxRuntime.jsx(LineView, { records, xColumn: config.x, yColumn: config.y, style: config.style }) : null;
+    case "scatter":
+      return config.x && config.y ? /* @__PURE__ */ jsxRuntime.jsx(ScatterView, { records, xColumn: config.x, yColumn: config.y, style: config.style }) : null;
+    case "heatmap":
+      return config.row && config.col ? /* @__PURE__ */ jsxRuntime.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 "pivot":
+      return /* @__PURE__ */ jsxRuntime.jsx(PivotView, { records });
+    case "metric":
+      return /* @__PURE__ */ jsxRuntime.jsx(MetricView, { records, config: { column: config.column || "", agg: config.agg, label: config.label } });
+    case "insight":
+      return /* @__PURE__ */ jsxRuntime.jsx(InsightView, { config: { text: config.text } });
+    case "table": {
+      const cols = config.columns ? config.columns.map((c) => ({ name: c })) : columns;
+      const colNames = cols?.map((c) => c.name) || (records && records[0] ? Object.keys(records[0]) : []);
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-auto h-full text-xs", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "sticky top-0 bg-midnight-elevated", children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: colNames.map((n) => /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-2 py-1 text-left text-midnight-text-muted font-mono border-b border-midnight-border", children: n }, n)) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: (records || []).slice(0, 50).map((r, i) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "border-b border-dashed border-midnight-border hover:bg-midnight-raised", children: colNames.map((n) => {
+          const cellValue = r[n];
+          return /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-2 py-1 text-midnight-text-body truncate max-w-[200px]", children: cellValue == null ? "" : typeof cellValue === "object" ? JSON.stringify(cellValue) : String(cellValue) }, n);
+        }) }, i)) })
+      ] }) });
+    }
+    default:
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 text-xs text-midnight-text-muted", children: [
+        "Unknown panel type: ",
+        type
+      ] });
+  }
+}
+var ROW_HEIGHT = 180;
+function DashboardRenderer({ dashboard, records, columns }) {
+  const { theme, removePanel } = useDashboard();
+  const { canEditPanels } = useCapabilities();
+  if (!dashboard) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 p-2", children: [
+    dashboard.insights && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `border ${theme.border} bg-midnight-elevated px-4 py-3 flex items-start gap-3`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "w-5 h-5 text-midnight-accent shrink-0 mt-0.5" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-sm ${theme.text} leading-relaxed`, children: dashboard.insights })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-12 gap-3", children: dashboard.panels?.map((panel) => {
+      const colSpan = Math.min(Math.max(panel.width || 6, 1), 12);
+      const rowSpan = Math.min(Math.max(panel.height || 2, 1), 4);
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: `border ${theme.border} bg-midnight-surface flex flex-col`,
+          style: {
+            gridColumn: `span ${colSpan}`,
+            minHeight: `${rowSpan * ROW_HEIGHT}px`
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center justify-between px-3 py-1.5 border-b ${theme.border} bg-midnight-elevated`, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-xs font-mono text-midnight-text-body truncate", style: { textAlign: panel.config?.style?.titleAlign || "left" }, children: panel.title || panel.type }),
+              canEditPanels && removePanel && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: () => removePanel(panel.id),
+                  className: "p-0.5 hover:bg-midnight-raised text-midnight-text-muted hover:text-midnight-text-body transition-colors",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3 h-3" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(ViewLoading, {}), children: /* @__PURE__ */ jsxRuntime.jsx(PanelContent, { panel, records, columns }) }) })
+          ]
+        },
+        panel.id
+      );
+    }) })
+  ] });
+}
+function ProfileSummary({ profile, theme }) {
+  const [open, setOpen] = react.useState(false);
+  if (!profile) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `border ${theme.border} bg-midnight-surface mb-3`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: () => setOpen(!open),
+        className: `w-full px-3 py-2 bg-midnight-elevated flex items-center gap-2 hover:bg-midnight-raised transition-colors text-left`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: `w-4 h-4 transition-transform ${open ? "" : "-rotate-90"}` }),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BarChart3, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `text-sm font-mono ${theme.text}`, children: [
+            profile.total_rows?.toLocaleString(),
+            " rows, ",
+            profile.columns?.length,
+            " columns"
+          ] })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full text-xs", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: `border-b ${theme.border} bg-midnight-elevated`, children: ["Column", "Type", "Distinct", "Nulls", "Stats", "Top Values"].map((h) => /* @__PURE__ */ jsxRuntime.jsx("th", { className: `px-3 py-1 text-left uppercase ${theme.textSecondary}`, children: h }, h)) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: profile.columns?.map((col) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: `border-b border-dashed ${theme.border}`, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: `px-3 py-1 font-mono ${theme.text}`, children: col.name }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: `px-3 py-1 ${theme.textSecondary}`, children: col.type }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: `px-3 py-1 text-right ${theme.textSecondary}`, children: col.distinct_count }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: `px-3 py-1 text-right ${theme.textSecondary}`, children: col.null_count }),
+        /* @__PURE__ */ jsxRuntime.jsxs("td", { className: `px-3 py-1 ${theme.textSecondary}`, children: [
+          col.type === "string" && (col.avg_length ?? 0) > 0 && `len: ${col.min_length}\u2013${col.max_length}`,
+          (col.type === "int64" || col.type === "float64") && col.min !== void 0 && `${col.min}\u2013${col.max}`
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: `px-3 py-1 ${theme.textSecondary} max-w-[200px] truncate`, children: col.top_values?.slice(0, 3).join(", ") })
+      ] }, col.name)) })
+    ] }) })
+  ] });
+}
+function StateSelector({ states, activeStateId, onSelect, theme }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `border ${theme.border} bg-midnight-surface mb-3`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `px-3 py-2 bg-midnight-elevated flex items-center gap-2`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Database, { className: "w-4 h-4" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `text-sm font-mono ${theme.text}`, children: [
+        "States (",
+        states.length,
+        ")"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-h-[140px] overflow-y-auto", children: [
+      states.map((s) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          onClick: () => onSelect(s.state_id),
+          className: `px-3 py-1.5 cursor-pointer flex justify-between items-center border-b border-dashed ${theme.border} ${s.state_id === activeStateId ? "bg-midnight-raised" : ""} hover:bg-midnight-raised transition-colors`,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `font-mono text-xs ${theme.text} truncate`, children: s.state_id }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `text-xs ${theme.textSecondary} ml-2 shrink-0`, children: [
+              s.row_count?.toLocaleString(),
+              " rows"
+            ] })
+          ]
+        },
+        s.state_id
+      )),
+      !states.length && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `px-3 py-4 text-center text-sm ${theme.textSecondary}`, children: "No states found" })
+    ] })
+  ] });
+}
+function ChatInput({ onSend, loading, theme }) {
+  const [text, setText] = react.useState("");
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!text.trim() || loading) return;
+    onSend(text.trim());
+    setText("");
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: `flex gap-2 px-3 py-2 border-t ${theme.border} bg-midnight-elevated shrink-0`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        value: text,
+        onChange: (e) => setText(e.target.value),
+        placeholder: "Ask AI to refine the dashboard...",
+        disabled: loading,
+        className: "flex-1 bg-midnight-surface border border-midnight-border px-3 py-1.5 text-sm outline-none text-midnight-text-body placeholder:text-midnight-text-muted"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "submit",
+        disabled: loading || !text.trim(),
+        className: `px-3 py-1.5 border border-midnight-border text-sm flex items-center gap-1 ${loading ? "opacity-50" : "hover:bg-midnight-raised"} transition-colors`,
+        children: loading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-4 h-4 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { className: "w-4 h-4" })
+      }
+    )
+  ] });
+}
+function ModeTab({ active, onClick, icon: Icon, label }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      onClick,
+      className: `px-3 py-1 text-xs font-mono border transition-colors ${active ? "border-midnight-accent text-midnight-accent bg-midnight-accent/10" : "border-midnight-border text-midnight-text-muted hover:bg-midnight-raised"}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "w-3 h-3 inline mr-1" }),
+        label
+      ]
+    }
+  );
+}
+function DataExplorer({
+  records,
+  columns,
+  states = [],
+  activeStateId,
+  profile,
+  dashboard,
+  dashboardId,
+  savedDashboards = [],
+  loading = false,
+  analyzing = false,
+  onSelectState,
+  onRefreshStates
+}) {
+  const { theme, saveDashboard, listDashboards, searchDashboards, loadDashboard, deleteDashboard, analyzeDataset, refineDashboard } = useDashboard();
+  const caps = useCapabilities();
+  const [mode, setMode] = react.useState("dashboard");
+  const [fullscreen, setFullscreen] = react.useState(false);
+  const [showSaved, setShowSaved] = react.useState(false);
+  const [saveName, setSaveName] = react.useState("");
+  const [showSaveInput, setShowSaveInput] = react.useState(false);
+  const [searchQuery, setSearchQuery] = react.useState("");
+  const showPersistence = caps.canSave || caps.canList || caps.canLoad || caps.canDelete;
+  const handleAutoAnalyze = () => {
+    setMode("dashboard");
+    analyzeDataset?.();
+  };
+  const handleSave = async () => {
+    if (!caps.canSave) return;
+    if (showSaveInput && saveName.trim()) {
+      await saveDashboard?.(saveName.trim());
+      setShowSaveInput(false);
+      setSaveName("");
+    } else if (dashboardId) {
+      await saveDashboard?.();
+    } else {
+      setShowSaveInput(true);
+    }
+  };
+  const handleOpenSaved = () => {
+    listDashboards?.();
+    setShowSaved(!showSaved);
+  };
+  const handleSearch = (q) => {
+    setSearchQuery(q);
+    searchDashboards?.(q);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col ${theme.bg} ${theme.text} p-4 ${fullscreen ? "fixed inset-0 z-50" : "h-full"}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-3 shrink-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Rows3, { className: "w-5 h-5" }),
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg font-mono", children: "Data Explorer" }),
+      (loading || analyzing) && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-4 h-4 animate-spin text-midnight-text-muted ml-2" }),
+      onRefreshStates && /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: onRefreshStates, className: "ml-auto p-1 hover:bg-midnight-raised transition-colors", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "w-4 h-4" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => setFullscreen((f) => !f),
+          title: fullscreen ? "Exit full screen" : "Full screen",
+          className: `p-1 hover:bg-midnight-raised transition-colors ${onRefreshStates ? "" : "ml-auto"}`,
+          children: fullscreen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minimize2, { className: "w-4 h-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { className: "w-4 h-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(StateSelector, { states, activeStateId, onSelect: onSelectState, theme }) }),
+    activeStateId && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 mb-3 shrink-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(ProfileSummary, { profile, theme }) }),
+        caps.canAnalyze && /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: handleAutoAnalyze,
+            disabled: analyzing || !profile,
+            className: `shrink-0 flex items-center gap-2 px-4 py-2 border text-sm font-mono transition-colors ${analyzing ? "border-midnight-border opacity-50" : "border-midnight-accent text-midnight-accent hover:bg-midnight-accent/10"}`,
+            children: [
+              analyzing ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-4 h-4 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "w-4 h-4" }),
+              analyzing ? "Analyzing..." : "Auto-Analyze"
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 mb-3 shrink-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ModeTab, { active: mode === "dashboard", onClick: () => setMode("dashboard"), icon: lucideReact.Sparkles, label: "Dashboard" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ModeTab, { active: mode === "builder", onClick: () => setMode("builder"), icon: lucideReact.BarChart3, label: "Chart Builder" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ModeTab, { active: mode === "sql", onClick: () => setMode("sql"), icon: lucideReact.Terminal, label: "SQL" }),
+        showPersistence && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 ml-auto", children: [
+          caps.canSave && showSaveInput && /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              value: saveName,
+              onChange: (e) => setSaveName(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") void handleSave();
+              },
+              placeholder: "Dashboard name...",
+              className: "bg-midnight-surface border border-midnight-border px-2 py-1 text-xs outline-none text-midnight-text-body w-40",
+              autoFocus: true
+            }
+          ),
+          caps.canSave && dashboard && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => void handleSave(),
+              title: dashboardId ? "Save" : "Save as...",
+              className: "p-1 border border-midnight-border text-midnight-text-muted hover:bg-midnight-raised transition-colors",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { className: "w-3.5 h-3.5" })
+            }
+          ),
+          (caps.canList || caps.canLoad || caps.canDelete) && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: handleOpenSaved,
+              title: "Saved dashboards",
+              className: `p-1 border transition-colors ${showSaved ? "border-midnight-accent text-midnight-accent" : "border-midnight-border text-midnight-text-muted hover:bg-midnight-raised"}`,
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FolderOpen, { className: "w-3.5 h-3.5" })
+            }
+          )
+        ] })
+      ] }),
+      showSaved && (caps.canList || caps.canLoad || caps.canDelete) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `border ${theme.border} bg-midnight-surface mb-3 shrink-0 max-h-[200px] overflow-y-auto`, children: [
+        caps.canSearch && /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            value: searchQuery,
+            onChange: (e) => handleSearch(e.target.value),
+            placeholder: "Search dashboards...",
+            className: "w-full bg-midnight-surface border-b border-midnight-border px-3 py-1.5 text-xs outline-none text-midnight-text-body placeholder:text-midnight-text-muted sticky top-0"
+          }
+        ),
+        savedDashboards.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-3 text-center text-xs text-midnight-text-muted", children: "No saved dashboards" }) : savedDashboards.map((d) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center justify-between px-3 py-1.5 border-b border-dashed ${theme.border} hover:bg-midnight-raised transition-colors`, children: [
+          caps.canLoad ? /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => {
+                void loadDashboard?.(d.id);
+                setShowSaved(false);
+                setMode("dashboard");
+              },
+              className: "flex-1 text-left text-xs font-mono text-midnight-text-body truncate",
+              children: d.name
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-xs font-mono text-midnight-text-body truncate", children: d.name }),
+          typeof d.updated_at === "string" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-midnight-text-muted mx-2", children: new Date(d.updated_at).toLocaleDateString() }),
+          caps.canDelete && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => void deleteDashboard?.(d.id),
+              className: "p-0.5 text-midnight-text-muted hover:text-red-400 transition-colors",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "w-3 h-3" })
+            }
+          )
+        ] }, d.id))
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `border ${theme.border} bg-midnight-surface flex-1 flex flex-col min-h-0`, children: mode === "sql" ? /* @__PURE__ */ jsxRuntime.jsx(SqlConsole, { columns, stateId: activeStateId ?? void 0 }) : mode === "builder" ? /* @__PURE__ */ jsxRuntime.jsx(ChartBuilder, { records, columns, stateId: activeStateId ?? void 0 }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 overflow-auto", children: dashboard ? /* @__PURE__ */ jsxRuntime.jsx(DashboardRenderer, { dashboard, records, columns }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center h-full gap-4 text-midnight-text-muted", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "w-8 h-8" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: caps.canAnalyze ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            "Click ",
+            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Auto-Analyze" }),
+            " to generate an AI dashboard"
+          ] }) : "No dashboard to display" })
+        ] }) }),
+        dashboard && caps.canRefine && refineDashboard && /* @__PURE__ */ jsxRuntime.jsx(ChatInput, { onSend: refineDashboard, loading: analyzing, theme })
+      ] }) })
+    ] })
+  ] });
+}
+
+exports.BarView = BarView;
+exports.ChartBuilder = ChartBuilder;
+exports.ChartStyleControls = ChartStyleControls;
+exports.DEFAULT_CHART_STYLE = DEFAULT_CHART_STYLE;
+exports.DashboardProvider = DashboardProvider;
+exports.DashboardRenderer = DashboardRenderer;
+exports.DataExplorer = DataExplorer;
+exports.HeatmapView = HeatmapView;
+exports.InsightView = InsightView;
+exports.LEGEND_ANCHORS = LEGEND_ANCHORS;
+exports.LineView = LineView;
+exports.MetricView = MetricView;
+exports.PieView = PieView;
+exports.PivotView = PivotView;
+exports.ScatterView = ScatterView;
+exports.SqlConsole = SqlConsole;
+exports.aggExpr = aggExpr;
+exports.aggregate = aggregate;
+exports.axisLegend = axisLegend;
+exports.buildChartSQL = buildChartSQL;
+exports.buildNivoTheme = buildNivoTheme;
+exports.compileWhere = compileWhere;
+exports.groupBy = groupBy;
+exports.legendConfig = legendConfig;
+exports.qIdent = qIdent;
+exports.qLit = qLit;
+exports.shapeChartData = shapeChartData;
+exports.useCapabilities = useCapabilities;
+exports.useDashboard = useDashboard;
+exports.withStyleDefaults = withStyleDefaults;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map