@quantumwake/terminal-ux-dashboard-components 0.1.12 → 0.1.15

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, useContext, useMemo, useState, useEffect, useRef, Suspense, useCallback } from 'react';
+import { createContext, useContext, useMemo, useState, useEffect, useRef, useCallback, Suspense } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { ResponsiveBar } from '@nivo/bar';
 import { ResponsivePie } from '@nivo/pie';
@@ -11,6 +11,7 @@ import { Loader2, Play, ChevronDown, AlertCircle, Rows3, BarChart3, PieChart, Tr
 import CodeMirror, { EditorView, Prec, keymap } from '@uiw/react-codemirror';
 import { sql, PostgreSQL, schemaCompletionSource, keywordCompletionSource } from '@codemirror/lang-sql';
 import { snippetCompletion, completeFromList, autocompletion, acceptCompletion } from '@codemirror/autocomplete';
+import GridLayout, { WidthProvider } from 'react-grid-layout';
 
 // src/context/DashboardContext.tsx
 var DashboardContext = createContext(null);
@@ -39,7 +40,9 @@ function useCapabilities() {
     canAddPanel: !!c.addPanel,
     canEditPanels: !!c.removePanel,
     // Studio can recompute + persist a panel's precomputed result.
-    canRefresh: !!c.persistPanelData
+    canRefresh: !!c.persistPanelData,
+    // Studio can drag/resize panels and persist the grid layout.
+    canEditLayout: !!c.persistLayout
   };
 }
 
@@ -135,8 +138,10 @@ var buildChartSQL = ({
     }
     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}`;
+      const nx = `TRY_CAST(${qIdent(x)} AS DOUBLE)`, ny = `TRY_CAST(${qIdent(y)} AS DOUBLE)`;
+      const extra = `${nx} IS NOT NULL AND ${ny} IS NOT NULL`;
+      const w = where ? `${where} AND ${extra}` : ` WHERE ${extra}`;
+      return `SELECT ${nx} AS x, ${ny} AS y FROM ${TABLE}${w} LIMIT ${MAX_POINTS}`;
     }
     case "heatmap": {
       if (!x || !y) return null;
@@ -168,7 +173,10 @@ var shapeChartData = (chartType, rows, { yFields = [] } = {}) => {
     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 })) }];
+      return [{
+        id: "points",
+        data: rows.map((r) => ({ x: Number(r.x), y: Number(r.y) })).filter((p) => Number.isFinite(p.x) && Number.isFinite(p.y))
+      }];
     case "heatmap": {
       const rowKeys = [];
       const colKeys = [];
@@ -210,10 +218,25 @@ var DEFAULT_CHART_STYLE = {
   xLegendOffset: 46,
   yLegendPosition: "middle",
   yLegendOffset: -50,
+  // Custom axis title text + visibility.
+  xAxisLabel: "",
+  yAxisLabel: "",
+  showXLegend: true,
+  showYLegend: true,
+  // Axis title emphasis.
+  legendBold: false,
+  legendHighlight: "",
+  // Tick overflow handling.
+  xTickRotation: -35,
+  yTickRotation: 0,
+  tickTruncate: 0,
   // Series legend placement (charts that have one: pie, grouped bar).
   legendAnchor: "right",
-  // Panel title alignment (rendered by DashboardRenderer's panel header).
-  titleAlign: "left"
+  // Panel title (rendered by DashboardRenderer's panel header).
+  titleAlign: "left",
+  titleBold: false,
+  titleBackground: "",
+  titleColor: ""
 };
 var LEGEND_ANCHORS = ["right", "top-left", "top-right", "bottom-left", "bottom-right", "none"];
 var withStyleDefaults = (style) => ({
@@ -227,7 +250,17 @@ var buildNivoTheme = (style) => {
     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 } }
+      legend: {
+        text: {
+          fill: s.legendColor,
+          fontSize: s.fontSize + 2,
+          fontWeight: s.legendBold ? 700 : 400,
+          // A highlight is drawn as a text outline (halo) — the clean,
+          // SVG-native way to make an axis title stand out.
+          outlineWidth: s.legendHighlight ? 3 : 0,
+          outlineColor: s.legendHighlight || "transparent"
+        }
+      }
     },
     grid: { line: { stroke: s.gridColor } },
     crosshair: { line: { stroke: s.textColor, strokeDasharray: "6 6" } },
@@ -256,14 +289,25 @@ var legendConfig = (style) => {
   const ty = s.legendAnchor.includes("top") ? 10 : -10;
   return { ...base, translateX: tx, translateY: ty };
 };
-var axisLegend = (style, axis, legendText) => {
+var truncate = (v, n) => {
+  const str = String(v);
+  return n > 0 && str.length > n ? `${str.slice(0, n)}\u2026` : str;
+};
+var axisLegend = (style, axis, columnName, opts2 = {}) => {
   const s = withStyleDefaults(style);
   const isX = axis === "x";
-  return {
-    legend: legendText,
-    legendPosition: isX ? s.xLegendPosition : s.yLegendPosition,
-    legendOffset: isX ? s.xLegendOffset : s.yLegendOffset
-  };
+  const show = isX ? s.showXLegend : s.showYLegend;
+  const label = (isX ? s.xAxisLabel : s.yAxisLabel) || columnName;
+  const out = {};
+  if (show && label) {
+    out.legend = label;
+    out.legendPosition = isX ? s.xLegendPosition : s.yLegendPosition;
+    out.legendOffset = isX ? s.xLegendOffset : s.yLegendOffset;
+  }
+  out.tickRotation = isX ? s.xTickRotation : s.yTickRotation;
+  if (opts2.numeric) out.format = (v) => Number(v).toLocaleString();
+  else if (s.tickTruncate > 0) out.format = (v) => truncate(v, s.tickTruncate);
+  return out;
 };
 
 // src/dataShape.ts
@@ -327,8 +371,8 @@ function BarView({ records, groupColumn, valueColumn, aggFn = "count", data: pre
       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() },
+      axisBottom: { tickSize: 5, tickPadding: 5, ...axisLegend(style, "x", groupColumn) },
+      axisLeft: { tickSize: 5, tickPadding: 5, ...axisLegend(style, "y", valueColumn, { numeric: true }) },
       labelSkipWidth: 12,
       labelSkipHeight: 12,
       labelTextColor: { from: "color", modifiers: [["darker", 3]] },
@@ -401,8 +445,8 @@ function LineView({ records, xColumn, yColumn, data: presetData, style }) {
       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) },
+      axisBottom: { tickSize: 5, tickPadding: 5, ...axisLegend(style, "x", xColumn) },
+      axisLeft: { tickSize: 5, tickPadding: 5, ...axisLegend(style, "y", yColumn, { numeric: true }) },
       useMesh: true,
       theme: buildNivoTheme(style)
     }
@@ -411,7 +455,7 @@ function LineView({ records, xColumn, yColumn, data: presetData, style }) {
 function ScatterView({ records, xColumn, yColumn, data: presetData, style }) {
   const computed = 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);
+    const points = records.map((r) => ({ x: Number(r[xColumn]), y: Number(r[yColumn]) })).filter((p) => Number.isFinite(p.x) && Number.isFinite(p.y)).slice(0, 1e3);
     return [{ id: `${xColumn} vs ${yColumn}`, data: points }];
   }, [records, xColumn, yColumn, presetData]);
   const data = presetData || computed;
@@ -424,8 +468,8 @@ function ScatterView({ records, xColumn, yColumn, data: presetData, style }) {
       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) },
+      axisBottom: { tickSize: 5, tickPadding: 5, ...axisLegend(style, "x", xColumn, { numeric: true }) },
+      axisLeft: { tickSize: 5, tickPadding: 5, ...axisLegend(style, "y", yColumn, { numeric: true }) },
       useMesh: true,
       theme: buildNivoTheme(style)
     }
@@ -524,8 +568,8 @@ function HeatmapView({
     {
       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 },
+      axisTop: { tickSize: 5, tickPadding: 5, tickRotation: s.xTickRotation, legend: s.showXLegend ? s.xAxisLabel || colColumn : "", legendPosition: s.xLegendPosition, legendOffset: -50 },
+      axisLeft: { tickSize: 5, tickPadding: 5, legend: s.showYLegend ? s.yAxisLabel || rowColumn : "", legendPosition: s.yLegendPosition, legendOffset: -80 },
       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 },
@@ -569,11 +613,17 @@ function PivotView({ records }) {
     )
   ] });
 }
-function Row({ label, children }) {
+function Section({ title, children }) {
   const { theme } = useDashboard();
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 min-h-[28px]", children: [
-    /* @__PURE__ */ jsx("span", { className: `text-xs ${theme.font} text-midnight-text-muted`, children: label }),
-    /* @__PURE__ */ jsx("div", { className: "flex items-center", children })
+  return /* @__PURE__ */ jsxs("div", { className: `py-3 border-t ${theme.border} first:border-t-0 first:pt-0`, children: [
+    /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-wider text-midnight-text-muted/70 font-mono mb-2", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children })
+  ] });
+}
+function Row({ label, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[88px_1fr] items-center gap-2 min-h-[30px]", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-midnight-text-muted truncate", title: label, children: label }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end", children })
   ] });
 }
 function ColorControl({ value, onChange }) {
@@ -584,61 +634,112 @@ function ColorControl({ value, onChange }) {
       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`
+      className: `w-9 h-6 bg-transparent border ${theme.border} cursor-pointer p-0`
     }
   );
 }
-function NumberControl({ value, onChange, min, max }) {
+function SliderControl({ value, onChange, min, max, step = 1, unit = "" }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "range",
+        min,
+        max,
+        step,
+        value,
+        onChange: (e) => onChange(Number(e.target.value)),
+        className: "flex-1 h-1 accent-midnight-accent cursor-pointer"
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { className: "w-10 shrink-0 text-right text-[11px] font-mono tabular-nums text-midnight-text-body", children: [
+      value,
+      unit
+    ] })
+  ] });
+}
+function TextControl({ value, onChange, placeholder }) {
   const { theme } = useDashboard();
   return /* @__PURE__ */ jsx(
     "input",
     {
-      type: "number",
+      type: "text",
       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`
+      placeholder,
+      onChange: (e) => onChange(e.target.value),
+      className: `w-full px-2 py-1 text-xs font-mono bg-midnight-surface border ${theme.border} text-midnight-text-body outline-none focus:border-midnight-accent transition-colors`
+    }
+  );
+}
+function Switch({ value, onChange }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": value,
+      onClick: () => onChange(!value),
+      className: `relative inline-flex h-4 w-7 shrink-0 items-center rounded-full transition-colors ${value ? "bg-midnight-accent" : "bg-midnight-border"}`,
+      children: /* @__PURE__ */ jsx("span", { className: `inline-block h-3 w-3 transform rounded-full bg-white transition-transform ${value ? "translate-x-3.5" : "translate-x-0.5"}` })
     }
   );
 }
+function OptionalColor({ value, onChange, fallback = "#a78bfa" }) {
+  const on = !!value;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    on && /* @__PURE__ */ jsx(ColorControl, { value, onChange }),
+    /* @__PURE__ */ jsx(Switch, { value: on, onChange: (v) => onChange(v ? fallback : "") })
+  ] });
+}
 function Choice({ value, options, onChange }) {
   const { theme } = useDashboard();
-  return /* @__PURE__ */ jsx("div", { className: "w-28", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ 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`,
+      className: `w-full px-2 py-1 text-xs font-mono bg-midnight-surface border ${theme.border} text-midnight-text-body outline-none focus:border-midnight-accent transition-colors`,
       children: options.map((o) => /* @__PURE__ */ jsx("option", { value: o, children: o }, o))
     }
-  ) });
-}
-function Group({ children, last }) {
-  const { theme } = useDashboard();
-  return /* @__PURE__ */ 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__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs(Group, { children: [
+    /* @__PURE__ */ jsxs(Section, { title: "Canvas", children: [
       /* @__PURE__ */ jsx(Row, { label: "Background", children: /* @__PURE__ */ jsx(ColorControl, { value: s.background, onChange: (v) => set("background", v) }) }),
-      /* @__PURE__ */ jsx(Row, { label: "Text color", children: /* @__PURE__ */ jsx(ColorControl, { value: s.textColor, onChange: (v) => set("textColor", v) }) }),
-      /* @__PURE__ */ jsx(Row, { label: "Title color", children: /* @__PURE__ */ jsx(ColorControl, { value: s.legendColor, onChange: (v) => set("legendColor", v) }) }),
-      /* @__PURE__ */ jsx(Row, { label: "Grid color", children: /* @__PURE__ */ jsx(ColorControl, { value: s.gridColor, onChange: (v) => set("gridColor", v) }) }),
-      /* @__PURE__ */ jsx(Row, { label: "Font size", children: /* @__PURE__ */ jsx(NumberControl, { value: s.fontSize, min: 6, max: 24, onChange: (v) => set("fontSize", v) }) })
+      /* @__PURE__ */ jsx(Row, { label: "Text", children: /* @__PURE__ */ jsx(ColorControl, { value: s.textColor, onChange: (v) => set("textColor", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Grid", children: /* @__PURE__ */ jsx(ColorControl, { value: s.gridColor, onChange: (v) => set("gridColor", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Font size", children: /* @__PURE__ */ jsx(SliderControl, { value: s.fontSize, min: 6, max: 24, unit: "px", onChange: (v) => set("fontSize", v) }) })
     ] }),
-    /* @__PURE__ */ jsxs(Group, { children: [
-      /* @__PURE__ */ jsx(Row, { label: "X title pos", children: /* @__PURE__ */ jsx(Choice, { value: s.xLegendPosition, options: ["start", "middle", "end"], onChange: (v) => set("xLegendPosition", v) }) }),
-      /* @__PURE__ */ jsx(Row, { label: "X title offset", children: /* @__PURE__ */ jsx(NumberControl, { value: s.xLegendOffset, onChange: (v) => set("xLegendOffset", v) }) }),
-      /* @__PURE__ */ jsx(Row, { label: "Y title pos", children: /* @__PURE__ */ jsx(Choice, { value: s.yLegendPosition, options: ["start", "middle", "end"], onChange: (v) => set("yLegendPosition", v) }) }),
-      /* @__PURE__ */ jsx(Row, { label: "Y title offset", children: /* @__PURE__ */ jsx(NumberControl, { value: s.yLegendOffset, onChange: (v) => set("yLegendOffset", v) }) })
+    /* @__PURE__ */ jsxs(Section, { title: "Axis titles", children: [
+      /* @__PURE__ */ jsx(Row, { label: "X title", children: /* @__PURE__ */ jsx(TextControl, { value: s.xAxisLabel, placeholder: "(column)", onChange: (v) => set("xAxisLabel", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Show X", children: /* @__PURE__ */ jsx(Switch, { value: s.showXLegend, onChange: (v) => set("showXLegend", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Y title", children: /* @__PURE__ */ jsx(TextControl, { value: s.yAxisLabel, placeholder: "(column)", onChange: (v) => set("yAxisLabel", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Show Y", children: /* @__PURE__ */ jsx(Switch, { value: s.showYLegend, onChange: (v) => set("showYLegend", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Color", children: /* @__PURE__ */ jsx(ColorControl, { value: s.legendColor, onChange: (v) => set("legendColor", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Bold", children: /* @__PURE__ */ jsx(Switch, { value: s.legendBold, onChange: (v) => set("legendBold", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Highlight", children: /* @__PURE__ */ jsx(OptionalColor, { value: s.legendHighlight, onChange: (v) => set("legendHighlight", v) }) })
     ] }),
-    /* @__PURE__ */ jsxs(Group, { last: true, children: [
-      /* @__PURE__ */ jsx(Row, { label: "Legend", children: /* @__PURE__ */ jsx(Choice, { value: s.legendAnchor, options: ["right", "top-left", "top-right", "bottom-left", "bottom-right", "none"], onChange: (v) => set("legendAnchor", v) }) }),
-      /* @__PURE__ */ jsx(Row, { label: "Title align", children: /* @__PURE__ */ jsx(Choice, { value: s.titleAlign, options: ["left", "center", "right"], onChange: (v) => set("titleAlign", v) }) })
-    ] })
+    /* @__PURE__ */ jsxs(Section, { title: "Axis placement", children: [
+      /* @__PURE__ */ jsx(Row, { label: "X pos", children: /* @__PURE__ */ jsx(Choice, { value: s.xLegendPosition, options: ["start", "middle", "end"], onChange: (v) => set("xLegendPosition", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "X offset", children: /* @__PURE__ */ jsx(SliderControl, { value: s.xLegendOffset, min: -80, max: 80, onChange: (v) => set("xLegendOffset", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Y pos", children: /* @__PURE__ */ jsx(Choice, { value: s.yLegendPosition, options: ["start", "middle", "end"], onChange: (v) => set("yLegendPosition", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Y offset", children: /* @__PURE__ */ jsx(SliderControl, { value: s.yLegendOffset, min: -80, max: 80, onChange: (v) => set("yLegendOffset", v) }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Section, { title: "Ticks", children: [
+      /* @__PURE__ */ jsx(Row, { label: "X angle", children: /* @__PURE__ */ jsx(SliderControl, { value: s.xTickRotation, min: -90, max: 90, unit: "\xB0", onChange: (v) => set("xTickRotation", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Y angle", children: /* @__PURE__ */ jsx(SliderControl, { value: s.yTickRotation, min: -90, max: 90, unit: "\xB0", onChange: (v) => set("yTickRotation", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Truncate", children: /* @__PURE__ */ jsx(SliderControl, { value: s.tickTruncate, min: 0, max: 40, onChange: (v) => set("tickTruncate", v) }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Section, { title: "Panel title", children: [
+      /* @__PURE__ */ jsx(Row, { label: "Align", children: /* @__PURE__ */ jsx(Choice, { value: s.titleAlign, options: ["left", "center", "right"], onChange: (v) => set("titleAlign", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Bold", children: /* @__PURE__ */ jsx(Switch, { value: s.titleBold, onChange: (v) => set("titleBold", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Color", children: /* @__PURE__ */ jsx(OptionalColor, { value: s.titleColor, onChange: (v) => set("titleColor", v), fallback: "#e2e8f0" }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Background", children: /* @__PURE__ */ jsx(OptionalColor, { value: s.titleBackground, onChange: (v) => set("titleBackground", v), fallback: "#1e293b" }) })
+    ] }),
+    /* @__PURE__ */ jsx(Section, { title: "Series legend", children: /* @__PURE__ */ jsx(Row, { label: "Position", children: /* @__PURE__ */ jsx(Choice, { value: s.legendAnchor, options: ["right", "top-left", "top-right", "bottom-left", "bottom-right", "none"], onChange: (v) => set("legendAnchor", v) }) }) })
   ] });
 }
 var AGGREGATES = [
@@ -1362,6 +1463,7 @@ function ChartBuilder({ records, columns, stateId, onSave }) {
   const [showTotals, setShowTotals] = useState(false);
   const [style, setStyle] = useState(DEFAULT_CHART_STYLE);
   const [showStyle, setShowStyle] = useState(false);
+  const [showFields, setShowFields] = useState(false);
   const [sqlRows, setSqlRows] = useState(null);
   const [sqlLoading, setSqlLoading] = useState(false);
   const [sqlError, setSqlError] = useState(null);
@@ -1647,8 +1749,23 @@ function ChartBuilder({ records, columns, stateId, onSave }) {
         )
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "pt-4 border-t border-midnight-border", children: [
-        /* @__PURE__ */ jsx("div", { className: "text-xs uppercase text-midnight-text-muted mb-2 font-mono", children: "Available Fields" }),
-        /* @__PURE__ */ jsx("div", { className: "space-y-1", children: columns.map((col) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs font-mono px-1 py-0.5", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setShowFields((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__ */ jsx(ChevronDown, { className: `w-3 h-3 transition-transform ${showFields ? "" : "-rotate-90"}` }),
+              "Available Fields",
+              /* @__PURE__ */ jsxs("span", { className: "text-midnight-text-muted/60 normal-case", children: [
+                "(",
+                columns.length,
+                ")"
+              ] })
+            ]
+          }
+        ),
+        showFields && /* @__PURE__ */ jsx("div", { className: "space-y-1 mt-2", children: columns.map((col) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs font-mono px-1 py-0.5", children: [
           /* @__PURE__ */ jsx("span", { className: "text-midnight-text-body", children: col.name }),
           /* @__PURE__ */ jsx("span", { className: "text-midnight-text-muted", children: col.type })
         ] }, col.name)) })
@@ -1678,6 +1795,15 @@ function ViewLoading() {
   return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-xs text-midnight-text-muted", children: "Loading..." });
 }
 var SQL_CHART_TYPES = /* @__PURE__ */ new Set(["bar", "grouped-bar", "pie", "line", "scatter", "heatmap"]);
+var SQL_DATA_TYPES = /* @__PURE__ */ new Set(["table", "metric"]);
+var TABLE_PREVIEW_ROWS = 200;
+function tableSql(config) {
+  const cols = config.columns?.length ? config.columns.map(qIdent).join(", ") : "*";
+  return `SELECT ${cols} FROM data LIMIT ${TABLE_PREVIEW_ROWS}`;
+}
+function metricSql(config) {
+  return `SELECT ${aggExpr(config.agg, config.column)} AS v FROM data`;
+}
 function panelToChartConfig(chartType, config) {
   const cfg = { chartType, xFields: [], yFields: [], filters: config.filters || [] };
   switch (chartType) {
@@ -1702,11 +1828,23 @@ function panelToChartConfig(chartType, config) {
   }
   return cfg;
 }
-function panelSql(chartType, config) {
+function panelSql(type, config) {
   if (config.sql) return config.sql;
-  if (SQL_CHART_TYPES.has(chartType)) return buildChartSQL(panelToChartConfig(chartType, config)) || "";
+  if (type === "table") return tableSql(config);
+  if (type === "metric") return metricSql(config);
+  if (SQL_CHART_TYPES.has(type)) return buildChartSQL(panelToChartConfig(type, config)) || "";
   return "";
 }
+function DataTable({ rows, columns }) {
+  const colNames = columns?.length ? columns : rows[0] ? Object.keys(rows[0]) : [];
+  return /* @__PURE__ */ jsx("div", { className: "overflow-auto h-full text-xs", children: /* @__PURE__ */ jsxs("table", { className: "w-full", children: [
+    /* @__PURE__ */ jsx("thead", { className: "sticky top-0 bg-midnight-elevated", children: /* @__PURE__ */ jsx("tr", { children: colNames.map((n) => /* @__PURE__ */ jsx("th", { className: "px-2 py-1 text-left text-midnight-text-muted font-mono border-b border-midnight-border", children: n }, n)) }) }),
+    /* @__PURE__ */ jsx("tbody", { children: rows.map((r, i) => /* @__PURE__ */ jsx("tr", { className: "border-b border-dashed border-midnight-border hover:bg-midnight-raised", children: colNames.map((n) => {
+      const cellValue = r[n];
+      return /* @__PURE__ */ 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)) })
+  ] }) });
+}
 function SqlPanel({ panel }) {
   const { runQuery, persistPanelData } = useDashboard();
   const { canRefresh } = useCapabilities();
@@ -1798,6 +1936,8 @@ function SqlPanel({ panel }) {
     const first = rows[0];
     const v = first ? Object.values(first)[0] : 0;
     chart = /* @__PURE__ */ jsx(MetricView, { value: Number(v) || 0, config: { column: config.column || "", agg: config.agg, label: config.label } });
+  } else if (chartType === "table") {
+    chart = /* @__PURE__ */ jsx(DataTable, { rows, columns: config.columns });
   } else {
     const shaped = shapeChartData(chartType, rows, { yFields: config.yFields || [] });
     switch (chartType) {
@@ -1837,7 +1977,7 @@ function PanelContent({ panel, records, columns }) {
   const { type } = panel;
   const config = panel.config || {};
   const effType = config.chartType || type;
-  if (config.sql || SQL_CHART_TYPES.has(effType)) {
+  if (config.sql || SQL_CHART_TYPES.has(effType) || SQL_DATA_TYPES.has(effType)) {
     return /* @__PURE__ */ jsx(SqlPanel, { panel });
   }
   if (!records?.length && type !== "insight") {
@@ -1860,17 +2000,8 @@ function PanelContent({ panel, records, columns }) {
       return /* @__PURE__ */ jsx(MetricView, { records, config: { column: config.column || "", agg: config.agg, label: config.label } });
     case "insight":
       return /* @__PURE__ */ 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__ */ jsx("div", { className: "overflow-auto h-full text-xs", children: /* @__PURE__ */ jsxs("table", { className: "w-full", children: [
-        /* @__PURE__ */ jsx("thead", { className: "sticky top-0 bg-midnight-elevated", children: /* @__PURE__ */ jsx("tr", { children: colNames.map((n) => /* @__PURE__ */ jsx("th", { className: "px-2 py-1 text-left text-midnight-text-muted font-mono border-b border-midnight-border", children: n }, n)) }) }),
-        /* @__PURE__ */ jsx("tbody", { children: (records || []).slice(0, 50).map((r, i) => /* @__PURE__ */ jsx("tr", { className: "border-b border-dashed border-midnight-border hover:bg-midnight-raised", children: colNames.map((n) => {
-          const cellValue = r[n];
-          return /* @__PURE__ */ 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)) })
-      ] }) });
-    }
+    case "table":
+      return /* @__PURE__ */ jsx(DataTable, { rows: (records || []).slice(0, 50), columns: config.columns || columns?.map((c) => c.name) });
     default:
       return /* @__PURE__ */ jsxs("div", { className: "p-4 text-xs text-midnight-text-muted", children: [
         "Unknown panel type: ",
@@ -1878,45 +2009,112 @@ function PanelContent({ panel, records, columns }) {
       ] });
   }
 }
-var ROW_HEIGHT = 180;
+var GRID_COLS = 12;
+var ROW_HEIGHT = 80;
+var GRID_MARGIN = 10;
+var DRAG_HANDLE = "panel-drag-handle";
+var RGL_CSS = `
+.react-grid-layout { position: relative; transition: height 200ms ease; }
+.react-grid-item { transition: all 200ms ease; transition-property: left, top, width, height; box-sizing: border-box; }
+.react-grid-item.cssTransforms { transition-property: transform, width, height; }
+.react-grid-item.resizing { transition: none; z-index: 3; will-change: width, height; }
+.react-grid-item.react-draggable-dragging { transition: none; z-index: 3; will-change: transform; }
+.react-grid-item.react-grid-placeholder { background: rgba(99,102,241,0.18); border: 1px dashed #6366f1; border-radius: 2px; transition-duration: 100ms; z-index: 2; user-select: none; }
+.react-grid-item > .react-resizable-handle { position: absolute; width: 18px; height: 18px; bottom: 0; right: 0; cursor: se-resize; }
+.react-grid-item > .react-resizable-handle::after { content: ''; position: absolute; right: 4px; bottom: 4px; width: 6px; height: 6px; border-right: 2px solid rgba(148,163,184,0.7); border-bottom: 2px solid rgba(148,163,184,0.7); }
+.${DRAG_HANDLE} { cursor: grab; }
+.react-grid-item.react-draggable-dragging .${DRAG_HANDLE} { cursor: grabbing; }
+`;
+var rglCssInjected = false;
+function useInjectRglCss() {
+  useEffect(() => {
+    if (rglCssInjected || typeof document === "undefined") return;
+    const el = document.createElement("style");
+    el.setAttribute("data-rgl", "dashboard-renderer");
+    el.textContent = RGL_CSS;
+    document.head.appendChild(el);
+    rglCssInjected = true;
+  }, []);
+}
+var GridLayoutWithWidth = WidthProvider(GridLayout);
+function buildLayout(panels) {
+  let cx = 0, cy = 0, rowH = 0;
+  return panels.map((p) => {
+    const w = Math.min(Math.max(p.width || 6, 1), GRID_COLS);
+    const h = Math.max(p.height || 4, 1);
+    if (typeof p.x === "number" && typeof p.y === "number") {
+      return { i: p.id, x: p.x, y: p.y, w, h, minW: 2, minH: 2 };
+    }
+    if (cx + w > GRID_COLS) {
+      cx = 0;
+      cy += rowH;
+      rowH = 0;
+    }
+    const item = { i: p.id, x: cx, y: cy, w, h, minW: 2, minH: 2 };
+    cx += w;
+    rowH = Math.max(rowH, h);
+    return item;
+  });
+}
 function DashboardRenderer({ dashboard, records, columns }) {
-  const { theme, removePanel } = useDashboard();
-  const { canEditPanels } = useCapabilities();
+  const { theme, removePanel, persistLayout } = useDashboard();
+  const { canEditPanels, canEditLayout } = useCapabilities();
+  useInjectRglCss();
+  const panels = dashboard?.panels ?? [];
+  const layout = useMemo(() => buildLayout(panels), [panels]);
+  const onLayoutChange = useCallback((next) => {
+    if (!persistLayout) return;
+    persistLayout(next.map((l) => ({ id: l.i, x: l.x, y: l.y, w: l.w, h: l.h })));
+  }, [persistLayout]);
   if (!dashboard) return null;
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-2", children: [
     dashboard.insights && /* @__PURE__ */ jsxs("div", { className: `border ${theme.border} bg-midnight-elevated px-4 py-3 flex items-start gap-3`, children: [
       /* @__PURE__ */ jsx(Sparkles, { className: "w-5 h-5 text-midnight-accent shrink-0 mt-0.5" }),
       /* @__PURE__ */ jsx("p", { className: `text-sm ${theme.text} leading-relaxed`, children: dashboard.insights })
     ] }),
-    /* @__PURE__ */ 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__ */ jsxs(
-        "div",
-        {
-          className: `border ${theme.border} bg-midnight-surface flex flex-col`,
-          style: {
-            gridColumn: `span ${colSpan}`,
-            minHeight: `${rowSpan * ROW_HEIGHT}px`
-          },
-          children: [
-            /* @__PURE__ */ jsxs("div", { className: `flex items-center justify-between px-3 py-1.5 border-b ${theme.border} bg-midnight-elevated`, children: [
-              /* @__PURE__ */ 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__ */ 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__ */ jsx(X, { className: "w-3 h-3" })
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ViewLoading, {}), children: /* @__PURE__ */ jsx(PanelContent, { panel, records, columns }) }) })
-          ]
-        },
-        panel.id
-      );
-    }) })
+    /* @__PURE__ */ jsx(
+      GridLayoutWithWidth,
+      {
+        className: "layout",
+        layout,
+        cols: GRID_COLS,
+        rowHeight: ROW_HEIGHT,
+        margin: [GRID_MARGIN, GRID_MARGIN],
+        isDraggable: canEditLayout,
+        isResizable: canEditLayout,
+        draggableHandle: `.${DRAG_HANDLE}`,
+        onDragStop: onLayoutChange,
+        onResizeStop: onLayoutChange,
+        compactType: canEditLayout ? "vertical" : null,
+        children: panels.map((panel) => /* @__PURE__ */ jsxs("div", { className: `border ${theme.border} bg-midnight-surface flex flex-col overflow-hidden`, children: [
+          /* @__PURE__ */ jsxs("div", { className: `flex items-center justify-between px-3 py-1.5 border-b ${theme.border} bg-midnight-elevated ${canEditLayout ? DRAG_HANDLE : ""}`, children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "flex-1 text-xs font-mono text-midnight-text-body truncate px-1",
+                style: {
+                  textAlign: panel.config?.style?.titleAlign || "left",
+                  fontWeight: panel.config?.style?.titleBold ? 700 : void 0,
+                  background: panel.config?.style?.titleBackground || void 0,
+                  color: panel.config?.style?.titleColor || void 0
+                },
+                children: panel.title || panel.type
+              }
+            ),
+            canEditPanels && removePanel && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onMouseDown: (e) => e.stopPropagation(),
+                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__ */ jsx(X, { className: "w-3 h-3" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ViewLoading, {}), children: /* @__PURE__ */ jsx(PanelContent, { panel, records, columns }) }) })
+        ] }, panel.id))
+      }
+    )
   ] });
 }
 function ProfileSummary({ profile, theme }) {