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

package/dist/index.cjs

@@ -9,6 +9,7 @@ var scatterplot = require('@nivo/scatterplot');
 var heatmap = require('@nivo/heatmap');
 var PivotTableUI = require('react-pivottable/PivotTableUI');
 require('react-pivottable/pivottable.css');
+var terminalUxComponents = require('@quantumwake/terminal-ux-components');
 var lucideReact = require('lucide-react');
 var CodeMirror = require('@uiw/react-codemirror');
 var langSql = require('@codemirror/lang-sql');
@@ -235,9 +236,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).
@@ -362,6 +369,78 @@ function MetricView({ records, config, value: presetValue }) {
 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 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__ */ jsxRuntime.jsxs("g", { transform: `translate(${tick.x},${tick.y})`, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x2: isX ? 0 : -5, y2: isX ? 5 : 0, style: { stroke: s.textColor, strokeWidth: 1, opacity: 0.3 } }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 = react.useMemo(() => {
     if (presetData || !records) return [];
@@ -369,7 +448,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__ */ jsxRuntime.jsx("div", { className: "h-full min-h-[400px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full min-h-[160px]", children: /* @__PURE__ */ jsxRuntime.jsx(
     bar.ResponsiveBar,
     {
       data,
@@ -379,8 +458,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]] },
@@ -401,7 +480,7 @@ function PieView({ records, groupColumn, data: presetData, style }) {
   }, [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(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full min-h-[160px]", children: /* @__PURE__ */ jsxRuntime.jsx(
     pie.ResponsivePie,
     {
       data,
@@ -437,7 +516,7 @@ function LineView({ records, xColumn, yColumn, data: presetData, style }) {
     }];
   }, [records, xColumn, yColumn, presetData]);
   const data = presetData || computed;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full min-h-[400px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full min-h-[160px]", children: /* @__PURE__ */ jsxRuntime.jsx(
     line.ResponsiveLine,
     {
       data,
@@ -453,8 +532,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)
     }
@@ -467,7 +546,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__ */ jsxRuntime.jsx("div", { className: "h-full min-h-[400px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full min-h-[160px]", children: /* @__PURE__ */ jsxRuntime.jsx(
     scatterplot.ResponsiveScatterPlot,
     {
       data,
@@ -476,8 +555,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)
     }
@@ -571,7 +650,7 @@ function HeatmapView({
     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(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full min-h-[160px]", children: /* @__PURE__ */ jsxRuntime.jsx(
     heatmap.ResponsiveHeatMap,
     {
       data,
@@ -622,73 +701,25 @@ function PivotView({ records }) {
   ] });
 }
 function Section({ title, children }) {
-  const { theme } = useDashboard();
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `py-3 border-t ${theme.border} first:border-t-0 first:pt-0`, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] uppercase tracking-wider text-midnight-text-muted/70 font-mono mb-2", children: title }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1.5", children })
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-midnight-border font-mono", style: { paddingTop: 12, paddingBottom: 12 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "uppercase tracking-wider text-midnight-text-subdued", style: { fontSize: 10, marginBottom: 8 }, children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", rowGap: 6 }, children })
   ] });
 }
 function Row({ label, children }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[88px_1fr] items-center gap-2 min-h-[30px]", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gridTemplateColumns: "84px minmax(0, 1fr)", alignItems: "center", columnGap: 8, height: 32 }, children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-mono text-midnight-text-muted truncate", title: label, children: label }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end", children })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "flex-end", width: "100%", minWidth: 0 }, 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 p-0`
-    }
-  );
-}
-function SliderControl({ value, onChange, min, max, step = 1, unit = "" }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 w-full", children: [
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-    "input",
-    {
-      type: "text",
-      value,
-      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__ */ jsxRuntime.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__ */ jsxRuntime.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"}` })
+      className: "w-9 h-6 bg-transparent border border-midnight-border cursor-pointer p-0"
     }
   );
 }
@@ -696,21 +727,9 @@ function OptionalColor({ value, onChange, fallback = "#a78bfa" }) {
   const on = !!value;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
     on && /* @__PURE__ */ jsxRuntime.jsx(ColorControl, { value, onChange }),
-    /* @__PURE__ */ jsxRuntime.jsx(Switch, { value: on, onChange: (v) => onChange(v ? fallback : "") })
+    /* @__PURE__ */ jsxRuntime.jsx(terminalUxComponents.TerminalToggle, { size: "small", checked: on, onChange: (v) => onChange(v ? fallback : "") })
   ] });
 }
-function Choice({ value, options, onChange }) {
-  const { theme } = useDashboard();
-  return /* @__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 ${theme.border} text-midnight-text-body outline-none focus:border-midnight-accent transition-colors`,
-      children: options.map((o) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: o, children: o }, o))
-    }
-  );
-}
 function ChartStyleControls({ style, onChange }) {
   const s = withStyleDefaults(style);
   const set = (key, value) => onChange({ ...s, [key]: value });
@@ -719,35 +738,42 @@ function ChartStyleControls({ style, onChange }) {
       /* @__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", children: /* @__PURE__ */ jsxRuntime.jsx(ColorControl, { value: s.textColor, onChange: (v) => set("textColor", v) }) }),
       /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Grid", children: /* @__PURE__ */ jsxRuntime.jsx(ColorControl, { value: s.gridColor, onChange: (v) => set("gridColor", v) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Font size", children: /* @__PURE__ */ jsxRuntime.jsx(SliderControl, { value: s.fontSize, min: 6, max: 24, unit: "px", onChange: (v) => set("fontSize", v) }) })
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Font size", children: /* @__PURE__ */ jsxRuntime.jsx(terminalUxComponents.TerminalSlider, { value: s.fontSize, min: 6, max: 24, unit: "px", onChange: (v) => set("fontSize", v) }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(Section, { title: "Axis titles", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "X title", children: /* @__PURE__ */ jsxRuntime.jsx(TextControl, { value: s.xAxisLabel, placeholder: "(column)", onChange: (v) => set("xAxisLabel", v) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Show X", children: /* @__PURE__ */ jsxRuntime.jsx(Switch, { value: s.showXLegend, onChange: (v) => set("showXLegend", v) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Y title", children: /* @__PURE__ */ jsxRuntime.jsx(TextControl, { value: s.yAxisLabel, placeholder: "(column)", onChange: (v) => set("yAxisLabel", v) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Show Y", children: /* @__PURE__ */ jsxRuntime.jsx(Switch, { value: s.showYLegend, onChange: (v) => set("showYLegend", v) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "X title", children: /* @__PURE__ */ jsxRuntime.jsx(terminalUxComponents.TerminalInput, { size: "small", value: s.xAxisLabel, placeholder: "(column)", onChange: (e) => set("xAxisLabel", e.target.value) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Show X", children: /* @__PURE__ */ jsxRuntime.jsx(terminalUxComponents.TerminalToggle, { size: "small", checked: s.showXLegend, onChange: (v) => set("showXLegend", v) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Y title", children: /* @__PURE__ */ jsxRuntime.jsx(terminalUxComponents.TerminalInput, { size: "small", value: s.yAxisLabel, placeholder: "(column)", onChange: (e) => set("yAxisLabel", e.target.value) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Show Y", children: /* @__PURE__ */ jsxRuntime.jsx(terminalUxComponents.TerminalToggle, { size: "small", checked: s.showYLegend, onChange: (v) => set("showYLegend", v) }) }),
       /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Color", children: /* @__PURE__ */ jsxRuntime.jsx(ColorControl, { value: s.legendColor, onChange: (v) => set("legendColor", v) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Bold", children: /* @__PURE__ */ jsxRuntime.jsx(Switch, { value: s.legendBold, onChange: (v) => set("legendBold", v) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Bold", children: /* @__PURE__ */ jsxRuntime.jsx(terminalUxComponents.TerminalToggle, { size: "small", checked: s.legendBold, onChange: (v) => set("legendBold", v) }) }),
       /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Highlight", children: /* @__PURE__ */ jsxRuntime.jsx(OptionalColor, { value: s.legendHighlight, onChange: (v) => set("legendHighlight", v) }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(Section, { title: "Axis placement", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "X pos", children: /* @__PURE__ */ jsxRuntime.jsx(Choice, { value: s.xLegendPosition, options: ["start", "middle", "end"], onChange: (v) => set("xLegendPosition", v) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "X offset", children: /* @__PURE__ */ jsxRuntime.jsx(SliderControl, { value: s.xLegendOffset, min: -80, max: 80, onChange: (v) => set("xLegendOffset", v) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Y pos", children: /* @__PURE__ */ jsxRuntime.jsx(Choice, { value: s.yLegendPosition, options: ["start", "middle", "end"], onChange: (v) => set("yLegendPosition", v) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Y offset", children: /* @__PURE__ */ jsxRuntime.jsx(SliderControl, { value: s.yLegendOffset, min: -80, max: 80, onChange: (v) => set("yLegendOffset", v) }) })
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "X pos", children: /* @__PURE__ */ jsxRuntime.jsx(terminalUxComponents.TerminalSelect, { size: "small", value: s.xLegendPosition, options: ["start", "middle", "end"], onChange: (v) => set("xLegendPosition", v) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "X offset", children: /* @__PURE__ */ jsxRuntime.jsx(terminalUxComponents.TerminalSlider, { value: s.xLegendOffset, min: -80, max: 80, onChange: (v) => set("xLegendOffset", v) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Y pos", children: /* @__PURE__ */ jsxRuntime.jsx(terminalUxComponents.TerminalSelect, { size: "small", value: s.yLegendPosition, options: ["start", "middle", "end"], onChange: (v) => set("yLegendPosition", v) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Y offset", children: /* @__PURE__ */ jsxRuntime.jsx(terminalUxComponents.TerminalSlider, { value: s.yLegendOffset, min: -80, max: 80, onChange: (v) => set("yLegendOffset", v) }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(Section, { title: "Ticks", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "X angle", children: /* @__PURE__ */ jsxRuntime.jsx(SliderControl, { value: s.xTickRotation, min: -90, max: 90, unit: "\xB0", onChange: (v) => set("xTickRotation", v) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Y angle", children: /* @__PURE__ */ jsxRuntime.jsx(SliderControl, { value: s.yTickRotation, min: -90, max: 90, unit: "\xB0", onChange: (v) => set("yTickRotation", v) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Truncate", children: /* @__PURE__ */ jsxRuntime.jsx(SliderControl, { value: s.tickTruncate, min: 0, max: 40, onChange: (v) => set("tickTruncate", v) }) })
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Wrap", children: /* @__PURE__ */ jsxRuntime.jsx(terminalUxComponents.TerminalToggle, { size: "small", checked: s.tickWrap, onChange: (v) => set("tickWrap", v) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Wrap width", children: /* @__PURE__ */ jsxRuntime.jsx(terminalUxComponents.TerminalSlider, { value: s.tickWrapWidth, min: 4, max: 40, onChange: (v) => set("tickWrapWidth", v) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "X angle", children: /* @__PURE__ */ jsxRuntime.jsx(terminalUxComponents.TerminalSlider, { value: s.xTickRotation, min: -90, max: 90, unit: "\xB0", onChange: (v) => set("xTickRotation", v) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Y angle", children: /* @__PURE__ */ jsxRuntime.jsx(terminalUxComponents.TerminalSlider, { value: s.yTickRotation, min: -90, max: 90, unit: "\xB0", onChange: (v) => set("yTickRotation", v) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Truncate", children: /* @__PURE__ */ jsxRuntime.jsx(terminalUxComponents.TerminalSlider, { value: s.tickTruncate, min: 0, max: 40, onChange: (v) => set("tickTruncate", v) }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Section, { title: "Table cells", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Wrap", children: /* @__PURE__ */ jsxRuntime.jsx(terminalUxComponents.TerminalToggle, { size: "small", checked: s.cellWrap, onChange: (v) => set("cellWrap", v) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Decimals", children: /* @__PURE__ */ jsxRuntime.jsx(terminalUxComponents.TerminalSlider, { value: s.cellPrecision, min: 0, max: 8, onChange: (v) => set("cellPrecision", v) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Truncate", children: /* @__PURE__ */ jsxRuntime.jsx(terminalUxComponents.TerminalSlider, { value: s.cellTruncate, min: 0, max: 80, onChange: (v) => set("cellTruncate", v) }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(Section, { title: "Panel title", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Align", children: /* @__PURE__ */ jsxRuntime.jsx(Choice, { value: s.titleAlign, options: ["left", "center", "right"], onChange: (v) => set("titleAlign", v) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Bold", children: /* @__PURE__ */ jsxRuntime.jsx(Switch, { value: s.titleBold, onChange: (v) => set("titleBold", v) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Align", children: /* @__PURE__ */ jsxRuntime.jsx(terminalUxComponents.TerminalSelect, { size: "small", value: s.titleAlign, options: ["left", "center", "right"], onChange: (v) => set("titleAlign", v) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Bold", children: /* @__PURE__ */ jsxRuntime.jsx(terminalUxComponents.TerminalToggle, { size: "small", checked: s.titleBold, onChange: (v) => set("titleBold", v) }) }),
       /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Color", children: /* @__PURE__ */ jsxRuntime.jsx(OptionalColor, { value: s.titleColor, onChange: (v) => set("titleColor", v), fallback: "#e2e8f0" }) }),
       /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Background", children: /* @__PURE__ */ jsxRuntime.jsx(OptionalColor, { value: s.titleBackground, onChange: (v) => set("titleBackground", v), fallback: "#1e293b" }) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Section, { title: "Series legend", children: /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Position", 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(Section, { title: "Series legend", children: /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Position", children: /* @__PURE__ */ jsxRuntime.jsx(terminalUxComponents.TerminalSelect, { size: "small", value: s.legendAnchor, options: ["right", "top-left", "top-right", "bottom-left", "bottom-right", "none"], onChange: (v) => set("legendAnchor", v) }) }) })
   ] });
 }
 var AGGREGATES = [
@@ -1355,7 +1381,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__ */ jsxRuntime.jsx("div", { className: "h-full min-h-[400px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full min-h-[160px]", children: /* @__PURE__ */ jsxRuntime.jsx(
     bar.ResponsiveBar,
     {
       data,
@@ -1365,8 +1391,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]] },
@@ -1472,6 +1498,7 @@ function ChartBuilder({ records, columns, stateId, onSave }) {
   const [style, setStyle] = react.useState(DEFAULT_CHART_STYLE);
   const [showStyle, setShowStyle] = react.useState(false);
   const [showFields, setShowFields] = react.useState(false);
+  const [fillContainer, setFillContainer] = react.useState(false);
   const [sqlRows, setSqlRows] = react.useState(null);
   const [sqlLoading, setSqlLoading] = react.useState(false);
   const [sqlError, setSqlError] = react.useState(null);
@@ -1586,12 +1613,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__ */ jsxRuntime.jsxs("div", { className: "flex h-full", children: [
@@ -1747,6 +1775,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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-mono text-midnight-text-muted", title: "Span the full dashboard width and height", children: "Maximize size" }),
+          /* @__PURE__ */ jsxRuntime.jsx(terminalUxComponents.TerminalToggle, { size: "small", checked: fillContainer, onChange: setFillContainer })
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
@@ -1843,14 +1875,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__ */ 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: rows.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)) })
+    /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: rows.map((r, i) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "border-b border-dashed border-midnight-border hover:bg-midnight-raised", children: colNames.map((n) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: cellCls, children: formatCell(r[n], s) }, n)) }, i)) })
   ] }) });
 }
 function SqlPanel({ panel }) {
@@ -1945,7 +1989,7 @@ function SqlPanel({ panel }) {
     const v = first ? Object.values(first)[0] : 0;
     chart = /* @__PURE__ */ jsxRuntime.jsx(MetricView, { value: Number(v) || 0, config: { column: config.column || "", agg: config.agg, label: config.label } });
   } else if (chartType === "table") {
-    chart = /* @__PURE__ */ jsxRuntime.jsx(DataTable, { rows, columns: config.columns });
+    chart = /* @__PURE__ */ jsxRuntime.jsx(DataTable, { rows, columns: config.columns, style: config.style });
   } else {
     const shaped = shapeChartData(chartType, rows, { yFields: config.yFields || [] });
     switch (chartType) {
@@ -2009,7 +2053,7 @@ function PanelContent({ panel, records, columns }) {
     case "insight":
       return /* @__PURE__ */ jsxRuntime.jsx(InsightView, { config: { text: config.text } });
     case "table":
-      return /* @__PURE__ */ jsxRuntime.jsx(DataTable, { rows: (records || []).slice(0, 50), columns: config.columns || columns?.map((c) => c.name) });
+      return /* @__PURE__ */ jsxRuntime.jsx(DataTable, { rows: (records || []).slice(0, 50), columns: config.columns || columns?.map((c) => c.name), style: config.style });
     default:
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 text-xs text-midnight-text-muted", children: [
         "Unknown panel type: ",
@@ -2048,10 +2092,11 @@ var GridLayoutWithWidth = GridLayout.WidthProvider(GridLayout__default.default);
 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);
+    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: p.x, y: p.y, w, h, minW: 2, minH: 2 };
+      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;
@@ -2075,11 +2120,45 @@ function DashboardRenderer({ dashboard, records, columns }) {
     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__ */ 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 })
+  const panelFrame = (panel, draggable) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `border ${theme.border} bg-midnight-surface flex flex-col overflow-hidden h-full`, children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ 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);
+  const insightsBanner = 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 })
+  ] }) : null;
+  if (panels.length === 1) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 p-2 h-full min-h-[60vh]", children: [
+      insightsBanner,
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0", children: panelFrame(panels[0], false) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 p-2", children: [
+    insightsBanner,
     /* @__PURE__ */ jsxRuntime.jsx(
       GridLayoutWithWidth,
       {
@@ -2094,33 +2173,7 @@ function DashboardRenderer({ dashboard, records, columns }) {
         onDragStop: onLayoutChange,
         onResizeStop: onLayoutChange,
         compactType: canEditLayout ? "vertical" : null,
-        children: panels.map((panel) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `border ${theme.border} bg-midnight-surface flex flex-col overflow-hidden`, children: [
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ 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))
+        children: panels.map((panel) => panelFrame(panel, canEditLayout))
       }
     )
   ] });