@quantumwake/terminal-ux-dashboard-components 0.1.13 → 0.1.17

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';
@@ -7,10 +7,12 @@ import { ResponsiveScatterPlot } from '@nivo/scatterplot';
 import { ResponsiveHeatMap } from '@nivo/heatmap';
 import PivotTableUI from 'react-pivottable/PivotTableUI';
 import 'react-pivottable/pivottable.css';
-import { Loader2, Play, ChevronDown, AlertCircle, Rows3, BarChart3, PieChart, TrendingUp, ScatterChart, LayoutGrid, Code, Sparkles, X, Terminal, RefreshCw, Minimize2, Maximize2, Plus, Save, FolderOpen, Trash2, Filter, Database, Send, GripVertical } from 'lucide-react';
+import { TerminalSlider, TerminalInput, TerminalToggle, TerminalSelect } from '@quantumwake/terminal-ux-components';
+import { Loader2, Play, ChevronDown, AlertCircle, Rows3, BarChart3, PieChart, TrendingUp, ScatterChart, LayoutGrid, Code, Sparkles, Terminal, RefreshCw, Minimize2, Maximize2, Plus, Save, FolderOpen, Trash2, X, Filter, Database, Send, GripVertical } from 'lucide-react';
 import 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 +41,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
   };
 }
 
@@ -224,8 +228,15 @@ var DEFAULT_CHART_STYLE = {
   legendBold: false,
   legendHighlight: "",
   // Tick overflow handling.
-  xTickRotation: -35,
+  xTickRotation: 0,
+  yTickRotation: 0,
   tickTruncate: 0,
+  tickWrap: true,
+  tickWrapWidth: 14,
+  // Table cells.
+  cellWrap: true,
+  cellPrecision: 2,
+  cellTruncate: 0,
   // Series legend placement (charts that have one: pie, grouped bar).
   legendAnchor: "right",
   // Panel title (rendered by DashboardRenderer's panel header).
@@ -300,7 +311,7 @@ var axisLegend = (style, axis, columnName, opts2 = {}) => {
     out.legendPosition = isX ? s.xLegendPosition : s.yLegendPosition;
     out.legendOffset = isX ? s.xLegendOffset : s.yLegendOffset;
   }
-  if (isX) out.tickRotation = s.xTickRotation;
+  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;
@@ -350,6 +361,78 @@ function MetricView({ records, config, value: presetValue }) {
 function InsightView({ config }) {
   return /* @__PURE__ */ jsx("div", { className: "h-full p-4 overflow-auto", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-midnight-text-body leading-relaxed whitespace-pre-wrap", children: config.text }) });
 }
+function formatVal(value, s, numeric) {
+  let str = numeric ? Number(value).toLocaleString() : String(value);
+  if (s.tickTruncate > 0 && str.length > s.tickTruncate) str = `${str.slice(0, s.tickTruncate)}\u2026`;
+  return str;
+}
+function wrapText(str, width) {
+  if (width <= 0 || str.length <= width) return [str];
+  const words = str.split(/\s+/);
+  const lines = [];
+  let cur = "";
+  const push = (t) => {
+    if (t) lines.push(t);
+  };
+  for (const w of words) {
+    if (w.length > width) {
+      push(cur);
+      cur = "";
+      for (let i = 0; i < w.length; i += width) lines.push(w.slice(i, i + width));
+      continue;
+    }
+    if (!cur) cur = w;
+    else if (cur.length + 1 + w.length <= width) cur += ` ${w}`;
+    else {
+      push(cur);
+      cur = w;
+    }
+  }
+  push(cur);
+  if (lines.length > 4) {
+    const kept = lines.slice(0, 4);
+    kept[3] = `${kept[3].slice(0, Math.max(0, width - 1))}\u2026`;
+    return kept;
+  }
+  return lines;
+}
+function makeAxis(style, axis, columnName, opts2 = {}) {
+  const s = withStyleDefaults(style);
+  const isX = axis === "x";
+  const numeric = !!opts2.numeric;
+  const show = isX ? s.showXLegend : s.showYLegend;
+  const label = (isX ? s.xAxisLabel : s.yAxisLabel) || columnName;
+  const rotate = isX ? s.xTickRotation : s.yTickRotation;
+  const out = { tickSize: 5, tickPadding: 5 };
+  if (show && label) {
+    out.legend = label;
+    out.legendPosition = isX ? s.xLegendPosition : s.yLegendPosition;
+    out.legendOffset = isX ? s.xLegendOffset : s.yLegendOffset;
+  }
+  if (s.tickWrap) {
+    out.renderTick = (tick) => {
+      const lines = wrapText(formatVal(tick.value, s, numeric), s.tickWrapWidth);
+      const firstDy = isX ? "0" : `${-((lines.length - 1) * 0.55)}em`;
+      return /* @__PURE__ */ jsxs("g", { transform: `translate(${tick.x},${tick.y})`, children: [
+        /* @__PURE__ */ jsx("line", { x2: isX ? 0 : -5, y2: isX ? 5 : 0, style: { stroke: s.textColor, strokeWidth: 1, opacity: 0.3 } }),
+        /* @__PURE__ */ jsx(
+          "text",
+          {
+            transform: `translate(${tick.textX},${tick.textY}) rotate(${rotate})`,
+            textAnchor: tick.textAnchor,
+            dominantBaseline: tick.textBaseline,
+            style: { fill: s.textColor, fontSize: s.fontSize },
+            children: lines.map((ln, i) => /* @__PURE__ */ jsx("tspan", { x: 0, dy: i === 0 ? firstDy : "1.1em", children: ln }, i))
+          }
+        )
+      ] });
+    };
+  } else {
+    out.tickRotation = rotate;
+    out.format = (v) => formatVal(v, s, numeric);
+  }
+  return out;
+}
 function BarView({ records, groupColumn, valueColumn, aggFn = "count", data: presetData, style }) {
   const computed = useMemo(() => {
     if (presetData || !records) return [];
@@ -357,7 +440,7 @@ function BarView({ records, groupColumn, valueColumn, aggFn = "count", data: pre
     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__ */ jsx("div", { className: "h-full min-h-[400px]", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: "h-full w-full min-h-[160px]", children: /* @__PURE__ */ jsx(
     ResponsiveBar,
     {
       data,
@@ -367,8 +450,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, ...axisLegend(style, "x", groupColumn) },
-      axisLeft: { tickSize: 5, tickPadding: 5, ...axisLegend(style, "y", valueColumn, { numeric: true }) },
+      axisBottom: makeAxis(style, "x", groupColumn),
+      axisLeft: makeAxis(style, "y", valueColumn, { numeric: true }),
       labelSkipWidth: 12,
       labelSkipHeight: 12,
       labelTextColor: { from: "color", modifiers: [["darker", 3]] },
@@ -389,7 +472,7 @@ function PieView({ records, groupColumn, data: presetData, style }) {
   }, [records, groupColumn, presetData]);
   const data = presetData || computed;
   const legend = legendConfig(style);
-  return /* @__PURE__ */ jsx("div", { className: "h-full min-h-[400px]", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: "h-full w-full min-h-[160px]", children: /* @__PURE__ */ jsx(
     ResponsivePie,
     {
       data,
@@ -425,7 +508,7 @@ function LineView({ records, xColumn, yColumn, data: presetData, style }) {
     }];
   }, [records, xColumn, yColumn, presetData]);
   const data = presetData || computed;
-  return /* @__PURE__ */ jsx("div", { className: "h-full min-h-[400px]", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: "h-full w-full min-h-[160px]", children: /* @__PURE__ */ jsx(
     ResponsiveLine,
     {
       data,
@@ -441,8 +524,8 @@ function LineView({ records, xColumn, yColumn, data: presetData, style }) {
       pointBorderWidth: 2,
       pointBorderColor: { from: "serieColor" },
       enableGridX: false,
-      axisBottom: { tickSize: 5, tickPadding: 5, ...axisLegend(style, "x", xColumn) },
-      axisLeft: { tickSize: 5, tickPadding: 5, ...axisLegend(style, "y", yColumn, { numeric: true }) },
+      axisBottom: makeAxis(style, "x", xColumn),
+      axisLeft: makeAxis(style, "y", yColumn, { numeric: true }),
       useMesh: true,
       theme: buildNivoTheme(style)
     }
@@ -455,7 +538,7 @@ function ScatterView({ records, xColumn, yColumn, data: presetData, style }) {
     return [{ id: `${xColumn} vs ${yColumn}`, data: points }];
   }, [records, xColumn, yColumn, presetData]);
   const data = presetData || computed;
-  return /* @__PURE__ */ jsx("div", { className: "h-full min-h-[400px]", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: "h-full w-full min-h-[160px]", children: /* @__PURE__ */ jsx(
     ResponsiveScatterPlot,
     {
       data,
@@ -464,8 +547,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, { numeric: true }) },
-      axisLeft: { tickSize: 5, tickPadding: 5, ...axisLegend(style, "y", yColumn, { numeric: true }) },
+      axisBottom: makeAxis(style, "x", xColumn, { numeric: true }),
+      axisLeft: makeAxis(style, "y", yColumn, { numeric: true }),
       useMesh: true,
       theme: buildNivoTheme(style)
     }
@@ -559,7 +642,7 @@ function HeatmapView({
     return /* @__PURE__ */ 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__ */ jsx("div", { className: "h-full min-h-[400px]", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: "h-full w-full min-h-[160px]", children: /* @__PURE__ */ jsx(
     ResponsiveHeatMap,
     {
       data,
@@ -609,120 +692,80 @@ function PivotView({ records }) {
     )
   ] });
 }
+function Section({ title, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "border-t border-midnight-border font-mono", style: { paddingTop: 12, paddingBottom: 12 }, children: [
+    /* @__PURE__ */ jsx("div", { className: "uppercase tracking-wider text-midnight-text-subdued", style: { fontSize: 10, marginBottom: 8 }, children: title }),
+    /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", rowGap: 6 }, children })
+  ] });
+}
 function Row({ label, 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", { style: { display: "grid", gridTemplateColumns: "84px minmax(0, 1fr)", alignItems: "center", columnGap: 8, height: 32 }, children: [
+    /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-midnight-text-muted truncate", title: label, children: label }),
+    /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "flex-end", width: "100%", minWidth: 0 }, children })
   ] });
 }
 function ColorControl({ value, onChange }) {
-  const { theme } = useDashboard();
   return /* @__PURE__ */ 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__ */ 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 TextControl({ value, onChange, placeholder }) {
-  const { theme } = useDashboard();
-  return /* @__PURE__ */ jsx(
-    "input",
-    {
-      type: "text",
-      value,
-      placeholder,
-      onChange: (e) => onChange(e.target.value),
-      className: `w-28 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 Toggle({ value, onChange }) {
-  return /* @__PURE__ */ jsx(
-    "input",
-    {
-      type: "checkbox",
-      checked: value,
-      onChange: (e) => onChange(e.target.checked),
-      className: "w-4 h-4 accent-midnight-accent cursor-pointer"
+      className: "w-9 h-6 bg-transparent border border-midnight-border cursor-pointer p-0"
     }
   );
 }
 function OptionalColor({ value, onChange, fallback = "#a78bfa" }) {
   const on = !!value;
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ jsx(Toggle, { value: on, onChange: (v) => onChange(v ? fallback : "") }),
-    on && /* @__PURE__ */ jsx(ColorControl, { value, onChange })
+    on && /* @__PURE__ */ jsx(ColorControl, { value, onChange }),
+    /* @__PURE__ */ jsx(TerminalToggle, { size: "small", checked: on, onChange: (v) => onChange(v ? fallback : "") })
   ] });
 }
-function Choice({ value, options, onChange }) {
-  const { theme } = useDashboard();
-  return /* @__PURE__ */ jsx("div", { className: "w-28", children: /* @__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`,
-      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: "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(TerminalSlider, { value: s.fontSize, min: 6, max: 24, unit: "px", onChange: (v) => set("fontSize", v) }) })
     ] }),
-    /* @__PURE__ */ jsxs(Group, { children: [
-      /* @__PURE__ */ jsx(Row, { label: "X axis title", children: /* @__PURE__ */ jsx(TextControl, { value: s.xAxisLabel, placeholder: "(column)", onChange: (v) => set("xAxisLabel", v) }) }),
-      /* @__PURE__ */ jsx(Row, { label: "Show X title", children: /* @__PURE__ */ jsx(Toggle, { value: s.showXLegend, onChange: (v) => set("showXLegend", v) }) }),
-      /* @__PURE__ */ jsx(Row, { label: "Y axis title", children: /* @__PURE__ */ jsx(TextControl, { value: s.yAxisLabel, placeholder: "(column)", onChange: (v) => set("yAxisLabel", v) }) }),
-      /* @__PURE__ */ jsx(Row, { label: "Show Y title", children: /* @__PURE__ */ jsx(Toggle, { value: s.showYLegend, onChange: (v) => set("showYLegend", v) }) }),
-      /* @__PURE__ */ jsx(Row, { label: "Title color", children: /* @__PURE__ */ jsx(ColorControl, { value: s.legendColor, onChange: (v) => set("legendColor", v) }) }),
-      /* @__PURE__ */ jsx(Row, { label: "Title bold", children: /* @__PURE__ */ jsx(Toggle, { value: s.legendBold, onChange: (v) => set("legendBold", v) }) }),
-      /* @__PURE__ */ jsx(Row, { label: "Title highlight", children: /* @__PURE__ */ jsx(OptionalColor, { value: s.legendHighlight, onChange: (v) => set("legendHighlight", v) }) }),
-      /* @__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(TerminalInput, { size: "small", value: s.xAxisLabel, placeholder: "(column)", onChange: (e) => set("xAxisLabel", e.target.value) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Show X", children: /* @__PURE__ */ jsx(TerminalToggle, { size: "small", checked: s.showXLegend, onChange: (v) => set("showXLegend", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Y title", children: /* @__PURE__ */ jsx(TerminalInput, { size: "small", value: s.yAxisLabel, placeholder: "(column)", onChange: (e) => set("yAxisLabel", e.target.value) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Show Y", children: /* @__PURE__ */ jsx(TerminalToggle, { size: "small", checked: 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(TerminalToggle, { size: "small", checked: 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, { children: [
-      /* @__PURE__ */ jsx(Row, { label: "X tick angle", children: /* @__PURE__ */ jsx(NumberControl, { value: s.xTickRotation, min: -90, max: 90, onChange: (v) => set("xTickRotation", v) }) }),
-      /* @__PURE__ */ jsx(Row, { label: "Truncate ticks", children: /* @__PURE__ */ jsx(NumberControl, { value: s.tickTruncate, min: 0, max: 40, onChange: (v) => set("tickTruncate", v) }) })
+    /* @__PURE__ */ jsxs(Section, { title: "Axis placement", children: [
+      /* @__PURE__ */ jsx(Row, { label: "X pos", children: /* @__PURE__ */ jsx(TerminalSelect, { size: "small", value: s.xLegendPosition, options: ["start", "middle", "end"], onChange: (v) => set("xLegendPosition", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "X offset", children: /* @__PURE__ */ jsx(TerminalSlider, { value: s.xLegendOffset, min: -80, max: 80, onChange: (v) => set("xLegendOffset", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Y pos", children: /* @__PURE__ */ jsx(TerminalSelect, { size: "small", value: s.yLegendPosition, options: ["start", "middle", "end"], onChange: (v) => set("yLegendPosition", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Y offset", children: /* @__PURE__ */ jsx(TerminalSlider, { value: s.yLegendOffset, min: -80, max: 80, onChange: (v) => set("yLegendOffset", v) }) })
     ] }),
-    /* @__PURE__ */ jsxs(Group, { last: true, children: [
-      /* @__PURE__ */ jsx(Row, { label: "Series 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: "Panel title align", children: /* @__PURE__ */ jsx(Choice, { value: s.titleAlign, options: ["left", "center", "right"], onChange: (v) => set("titleAlign", v) }) }),
-      /* @__PURE__ */ jsx(Row, { label: "Panel title bold", children: /* @__PURE__ */ jsx(Toggle, { value: s.titleBold, onChange: (v) => set("titleBold", v) }) }),
-      /* @__PURE__ */ jsx(Row, { label: "Panel title color", children: /* @__PURE__ */ jsx(OptionalColor, { value: s.titleColor, onChange: (v) => set("titleColor", v), fallback: "#e2e8f0" }) }),
-      /* @__PURE__ */ jsx(Row, { label: "Panel title bg", children: /* @__PURE__ */ jsx(OptionalColor, { value: s.titleBackground, onChange: (v) => set("titleBackground", v), fallback: "#1e293b" }) })
-    ] })
+    /* @__PURE__ */ jsxs(Section, { title: "Ticks", children: [
+      /* @__PURE__ */ jsx(Row, { label: "Wrap", children: /* @__PURE__ */ jsx(TerminalToggle, { size: "small", checked: s.tickWrap, onChange: (v) => set("tickWrap", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Wrap width", children: /* @__PURE__ */ jsx(TerminalSlider, { value: s.tickWrapWidth, min: 4, max: 40, onChange: (v) => set("tickWrapWidth", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "X angle", children: /* @__PURE__ */ jsx(TerminalSlider, { value: s.xTickRotation, min: -90, max: 90, unit: "\xB0", onChange: (v) => set("xTickRotation", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Y angle", children: /* @__PURE__ */ jsx(TerminalSlider, { value: s.yTickRotation, min: -90, max: 90, unit: "\xB0", onChange: (v) => set("yTickRotation", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Truncate", children: /* @__PURE__ */ jsx(TerminalSlider, { value: s.tickTruncate, min: 0, max: 40, onChange: (v) => set("tickTruncate", v) }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Section, { title: "Table cells", children: [
+      /* @__PURE__ */ jsx(Row, { label: "Wrap", children: /* @__PURE__ */ jsx(TerminalToggle, { size: "small", checked: s.cellWrap, onChange: (v) => set("cellWrap", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Decimals", children: /* @__PURE__ */ jsx(TerminalSlider, { value: s.cellPrecision, min: 0, max: 8, onChange: (v) => set("cellPrecision", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Truncate", children: /* @__PURE__ */ jsx(TerminalSlider, { value: s.cellTruncate, min: 0, max: 80, onChange: (v) => set("cellTruncate", v) }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Section, { title: "Panel title", children: [
+      /* @__PURE__ */ jsx(Row, { label: "Align", children: /* @__PURE__ */ jsx(TerminalSelect, { size: "small", value: s.titleAlign, options: ["left", "center", "right"], onChange: (v) => set("titleAlign", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Bold", children: /* @__PURE__ */ jsx(TerminalToggle, { size: "small", checked: 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(TerminalSelect, { size: "small", value: s.legendAnchor, options: ["right", "top-left", "top-right", "bottom-left", "bottom-right", "none"], onChange: (v) => set("legendAnchor", v) }) }) })
   ] });
 }
 var AGGREGATES = [
@@ -1330,7 +1373,7 @@ var GroupedBarChart = ({ records, xFields = [], yFields = [], groupField, data:
   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__ */ jsx("div", { className: "h-full min-h-[400px]", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: "h-full w-full min-h-[160px]", children: /* @__PURE__ */ jsx(
     ResponsiveBar,
     {
       data,
@@ -1340,8 +1383,8 @@ var GroupedBarChart = ({ records, xFields = [], yFields = [], groupField, data:
       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() },
+      axisBottom: makeAxis(style, "x", xFields[0]?.name || ""),
+      axisLeft: makeAxis(style, "y", "", { numeric: true }),
       labelSkipWidth: 12,
       labelSkipHeight: 12,
       labelTextColor: { from: "color", modifiers: [["darker", 3]] },
@@ -1447,6 +1490,7 @@ function ChartBuilder({ records, columns, stateId, onSave }) {
   const [style, setStyle] = useState(DEFAULT_CHART_STYLE);
   const [showStyle, setShowStyle] = useState(false);
   const [showFields, setShowFields] = useState(false);
+  const [fillContainer, setFillContainer] = useState(false);
   const [sqlRows, setSqlRows] = useState(null);
   const [sqlLoading, setSqlLoading] = useState(false);
   const [sqlError, setSqlError] = useState(null);
@@ -1561,12 +1605,13 @@ function ChartBuilder({ records, columns, stateId, onSave }) {
       }
     }
     config.style = style;
+    config.fill = fillContainer;
     onSave({
       title: title || `${chartType} chart`,
       type: chartType === "grouped-bar" ? "bar" : chartType,
       config,
-      width: 6,
-      height: 2
+      width: fillContainer ? 12 : 6,
+      height: fillContainer ? 8 : 2
     });
   };
   return /* @__PURE__ */ jsxs("div", { className: "flex h-full", children: [
@@ -1722,6 +1767,10 @@ function ChartBuilder({ records, columns, stateId, onSave }) {
             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__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-midnight-text-muted", title: "Span the full dashboard width and height", children: "Maximize size" }),
+          /* @__PURE__ */ jsx(TerminalToggle, { size: "small", checked: fillContainer, onChange: setFillContainer })
+        ] }),
         /* @__PURE__ */ jsx(
           "button",
           {
@@ -1818,14 +1867,26 @@ function panelSql(type, config) {
   if (SQL_CHART_TYPES.has(type)) return buildChartSQL(panelToChartConfig(type, config)) || "";
   return "";
 }
-function DataTable({ rows, columns }) {
+function formatCell(value, s) {
+  if (value == null) return "";
+  if (typeof value === "object") return JSON.stringify(value);
+  let str;
+  const n = typeof value === "number" ? value : Number(value);
+  if (value !== "" && typeof value !== "boolean" && Number.isFinite(n)) {
+    str = Number.isInteger(n) ? n.toLocaleString() : n.toLocaleString(void 0, { minimumFractionDigits: s.cellPrecision, maximumFractionDigits: s.cellPrecision });
+  } else {
+    str = String(value);
+  }
+  if (s.cellTruncate > 0 && str.length > s.cellTruncate) str = `${str.slice(0, s.cellTruncate)}\u2026`;
+  return str;
+}
+function DataTable({ rows, columns, style }) {
+  const s = withStyleDefaults(style);
   const colNames = columns?.length ? columns : rows[0] ? Object.keys(rows[0]) : [];
+  const cellCls = s.cellWrap ? "px-2 py-1 text-midnight-text-body align-top whitespace-normal break-words max-w-[280px]" : "px-2 py-1 text-midnight-text-body truncate max-w-[200px]";
   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)) })
+    /* @__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) => /* @__PURE__ */ jsx("td", { className: cellCls, children: formatCell(r[n], s) }, n)) }, i)) })
   ] }) });
 }
 function SqlPanel({ panel }) {
@@ -1920,7 +1981,7 @@ function SqlPanel({ panel }) {
     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 });
+    chart = /* @__PURE__ */ jsx(DataTable, { rows, columns: config.columns, style: config.style });
   } else {
     const shaped = shapeChartData(chartType, rows, { yFields: config.yFields || [] });
     switch (chartType) {
@@ -1984,7 +2045,7 @@ function PanelContent({ panel, records, columns }) {
     case "insight":
       return /* @__PURE__ */ jsx(InsightView, { config: { text: config.text } });
     case "table":
-      return /* @__PURE__ */ jsx(DataTable, { rows: (records || []).slice(0, 50), columns: config.columns || columns?.map((c) => c.name) });
+      return /* @__PURE__ */ jsx(DataTable, { rows: (records || []).slice(0, 50), columns: config.columns || columns?.map((c) => c.name), style: config.style });
     default:
       return /* @__PURE__ */ jsxs("div", { className: "p-4 text-xs text-midnight-text-muted", children: [
         "Unknown panel type: ",
@@ -1992,57 +2053,121 @@ 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 fill = !!p.config?.fill;
+    const w = fill ? GRID_COLS : Math.min(Math.max(p.width || 6, 1), GRID_COLS);
+    const h = fill ? Math.max(p.height || 8, 6) : Math.max(p.height || 4, 1);
+    if (typeof p.x === "number" && typeof p.y === "number") {
+      return { i: p.id, x: fill ? 0 : 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",
+  const panelFrame = (panel, draggable) => /* @__PURE__ */ jsxs("div", { className: `border ${theme.border} bg-midnight-surface flex flex-col overflow-hidden h-full`, children: [
+    /* @__PURE__ */ jsxs("div", { className: `flex items-center justify-between px-3 py-1.5 border-b ${theme.border} bg-midnight-elevated ${draggable ? DRAG_HANDLE : ""}`, children: [
+      /* @__PURE__ */ jsx(
+        "span",
         {
-          className: `border ${theme.border} bg-midnight-surface flex flex-col`,
+          className: "flex-1 text-xs font-mono text-midnight-text-body truncate px-1",
           style: {
-            gridColumn: `span ${colSpan}`,
-            minHeight: `${rowSpan * ROW_HEIGHT}px`
+            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: [
-            /* @__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 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",
-                {
-                  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
-      );
-    }) })
+          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);
+  const insightsBanner = 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 })
+  ] }) : null;
+  if (panels.length === 1) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-2 h-full min-h-[60vh]", children: [
+      insightsBanner,
+      /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: panelFrame(panels[0], false) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-2", children: [
+    insightsBanner,
+    /* @__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) => panelFrame(panel, canEditLayout))
+      }
+    )
   ] });
 }
 function ProfileSummary({ profile, theme }) {