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

package/dist/index.cjs

@@ -13,11 +13,13 @@ var lucideReact = require('lucide-react');
 var CodeMirror = require('@uiw/react-codemirror');
 var langSql = require('@codemirror/lang-sql');
 var autocomplete = require('@codemirror/autocomplete');
+var GridLayout = require('react-grid-layout');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var PivotTableUI__default = /*#__PURE__*/_interopDefault(PivotTableUI);
 var CodeMirror__default = /*#__PURE__*/_interopDefault(CodeMirror);
+var GridLayout__default = /*#__PURE__*/_interopDefault(GridLayout);
 
 // src/context/DashboardContext.tsx
 var DashboardContext = react.createContext(null);
@@ -46,7 +48,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
   };
 }
 
@@ -232,6 +236,7 @@ var DEFAULT_CHART_STYLE = {
   legendHighlight: "",
   // Tick overflow handling.
   xTickRotation: -35,
+  yTickRotation: 0,
   tickTruncate: 0,
   // Series legend placement (charts that have one: pie, grouped bar).
   legendAnchor: "right",
@@ -307,7 +312,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;
@@ -616,11 +621,17 @@ function PivotView({ records }) {
     )
   ] });
 }
-function Row({ label, children }) {
+function Section({ title, children }) {
   const { theme } = useDashboard();
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 min-h-[28px]", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-xs ${theme.font} text-midnight-text-muted`, children: label }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children })
+  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 })
+  ] });
+}
+function Row({ label, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[88px_1fr] items-center gap-2 min-h-[30px]", 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 })
   ] });
 }
 function ColorControl({ value, onChange }) {
@@ -631,23 +642,29 @@ 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 }) {
-  const { theme } = useDashboard();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "input",
-    {
-      type: "number",
+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,
-      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`
-    }
-  );
+      unit
+    ] })
+  ] });
 }
 function TextControl({ value, onChange, placeholder }) {
   const { theme } = useDashboard();
@@ -658,78 +675,79 @@ function TextControl({ value, onChange, placeholder }) {
       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`
+      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 Toggle({ value, onChange }) {
+function Switch({ value, onChange }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "input",
+    "button",
     {
-      type: "checkbox",
-      checked: value,
-      onChange: (e) => onChange(e.target.checked),
-      className: "w-4 h-4 accent-midnight-accent cursor-pointer"
+      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"}` })
     }
   );
 }
 function OptionalColor({ value, onChange, fallback = "#a78bfa" }) {
   const on = !!value;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Toggle, { value: on, onChange: (v) => onChange(v ? fallback : "") }),
-    on && /* @__PURE__ */ jsxRuntime.jsx(ColorControl, { value, onChange })
+    on && /* @__PURE__ */ jsxRuntime.jsx(ColorControl, { value, onChange }),
+    /* @__PURE__ */ jsxRuntime.jsx(Switch, { value: on, onChange: (v) => onChange(v ? fallback : "") })
   ] });
 }
 function Choice({ value, options, onChange }) {
   const { theme } = useDashboard();
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-28", children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "select",
     {
       value,
       onChange: (e) => onChange(e.target.value),
-      className: `w-full px-2 py-1 text-xs ${theme.font} bg-midnight-surface border ${theme.border} text-midnight-text-body outline-none focus:border-midnight-accent`,
+      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 Group({ children, last }) {
-  const { theme } = useDashboard();
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `space-y-2 pb-3 ${last ? "" : `mb-3 border-b ${theme.border}`}`, children });
+  );
 }
 function ChartStyleControls({ style, onChange }) {
   const s = withStyleDefaults(style);
   const set = (key, value) => onChange({ ...s, [key]: value });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Group, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Section, { title: "Canvas", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Background", children: /* @__PURE__ */ jsxRuntime.jsx(ColorControl, { value: s.background, onChange: (v) => set("background", v) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Text color", children: /* @__PURE__ */ jsxRuntime.jsx(ColorControl, { value: s.textColor, onChange: (v) => set("textColor", v) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Grid color", children: /* @__PURE__ */ jsxRuntime.jsx(ColorControl, { value: s.gridColor, onChange: (v) => set("gridColor", v) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Font size", children: /* @__PURE__ */ jsxRuntime.jsx(NumberControl, { value: s.fontSize, min: 6, max: 24, onChange: (v) => set("fontSize", v) }) })
+      /* @__PURE__ */ jsxRuntime.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.jsxs(Group, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "X axis title", children: /* @__PURE__ */ jsxRuntime.jsx(TextControl, { value: s.xAxisLabel, placeholder: "(column)", onChange: (v) => set("xAxisLabel", v) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Show X title", children: /* @__PURE__ */ jsxRuntime.jsx(Toggle, { value: s.showXLegend, onChange: (v) => set("showXLegend", v) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Y axis title", children: /* @__PURE__ */ jsxRuntime.jsx(TextControl, { value: s.yAxisLabel, placeholder: "(column)", onChange: (v) => set("yAxisLabel", v) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Show Y title", children: /* @__PURE__ */ jsxRuntime.jsx(Toggle, { value: s.showYLegend, onChange: (v) => set("showYLegend", v) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Title color", children: /* @__PURE__ */ jsxRuntime.jsx(ColorControl, { value: s.legendColor, onChange: (v) => set("legendColor", v) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Title bold", children: /* @__PURE__ */ jsxRuntime.jsx(Toggle, { value: s.legendBold, onChange: (v) => set("legendBold", v) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Title highlight", children: /* @__PURE__ */ jsxRuntime.jsx(OptionalColor, { value: s.legendHighlight, onChange: (v) => set("legendHighlight", v) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "X title pos", children: /* @__PURE__ */ jsxRuntime.jsx(Choice, { value: s.xLegendPosition, options: ["start", "middle", "end"], onChange: (v) => set("xLegendPosition", v) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "X title offset", children: /* @__PURE__ */ jsxRuntime.jsx(NumberControl, { value: s.xLegendOffset, onChange: (v) => set("xLegendOffset", v) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Y title pos", children: /* @__PURE__ */ jsxRuntime.jsx(Choice, { value: s.yLegendPosition, options: ["start", "middle", "end"], onChange: (v) => set("yLegendPosition", v) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Y title offset", children: /* @__PURE__ */ jsxRuntime.jsx(NumberControl, { value: s.yLegendOffset, onChange: (v) => set("yLegendOffset", v) }) })
+    /* @__PURE__ */ jsxRuntime.jsxs(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: "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: "Highlight", children: /* @__PURE__ */ jsxRuntime.jsx(OptionalColor, { value: s.legendHighlight, onChange: (v) => set("legendHighlight", v) }) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Group, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "X tick angle", children: /* @__PURE__ */ jsxRuntime.jsx(NumberControl, { value: s.xTickRotation, min: -90, max: 90, onChange: (v) => set("xTickRotation", v) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Truncate ticks", children: /* @__PURE__ */ jsxRuntime.jsx(NumberControl, { value: s.tickTruncate, min: 0, max: 40, onChange: (v) => set("tickTruncate", 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.jsxs(Group, { last: true, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Series legend", children: /* @__PURE__ */ jsxRuntime.jsx(Choice, { value: s.legendAnchor, options: ["right", "top-left", "top-right", "bottom-left", "bottom-right", "none"], onChange: (v) => set("legendAnchor", v) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Panel title align", children: /* @__PURE__ */ jsxRuntime.jsx(Choice, { value: s.titleAlign, options: ["left", "center", "right"], onChange: (v) => set("titleAlign", v) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Panel title bold", children: /* @__PURE__ */ jsxRuntime.jsx(Toggle, { value: s.titleBold, onChange: (v) => set("titleBold", v) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Panel title color", children: /* @__PURE__ */ jsxRuntime.jsx(OptionalColor, { value: s.titleColor, onChange: (v) => set("titleColor", v), fallback: "#e2e8f0" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Panel title bg", children: /* @__PURE__ */ jsxRuntime.jsx(OptionalColor, { value: s.titleBackground, onChange: (v) => set("titleBackground", v), fallback: "#1e293b" }) })
-    ] })
+    /* @__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.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: "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) }) }) })
   ] });
 }
 var AGGREGATES = [
@@ -1999,57 +2017,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() {
+  react.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 = 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);
+    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 = react.useMemo(() => buildLayout(panels), [panels]);
+  const onLayoutChange = react.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 p-2", children: [
     dashboard.insights && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `border ${theme.border} bg-midnight-elevated px-4 py-3 flex items-start gap-3`, children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "w-5 h-5 text-midnight-accent shrink-0 mt-0.5" }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-sm ${theme.text} leading-relaxed`, children: dashboard.insights })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-12 gap-3", children: dashboard.panels?.map((panel) => {
-      const colSpan = Math.min(Math.max(panel.width || 6, 1), 12);
-      const rowSpan = Math.min(Math.max(panel.height || 2, 1), 4);
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: `border ${theme.border} bg-midnight-surface flex flex-col`,
-          style: {
-            gridColumn: `span ${colSpan}`,
-            minHeight: `${rowSpan * ROW_HEIGHT}px`
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center justify-between px-3 py-1.5 border-b ${theme.border} bg-midnight-elevated`, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: "flex-1 text-xs font-mono text-midnight-text-body truncate 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",
-                {
-                  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
-      );
-    }) })
+    /* @__PURE__ */ jsxRuntime.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__ */ 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))
+      }
+    )
   ] });
 }
 function ProfileSummary({ profile, theme }) {