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

package/dist/index.d.cts

@@ -31,6 +31,14 @@ interface DashboardCapabilities {
     addPanel?: (panel: PanelInput) => void;
     removePanel?: (panelId: string) => void;
     persistPanelData?: (panelId: string, rows: QueryResult['rows'], refreshedAt: string) => void;
+    persistLayout?: (items: PanelLayout[]) => void;
+}
+interface PanelLayout {
+    id: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
 }
 interface DashboardContextValue extends DashboardCapabilities {
     theme: DashboardTheme;
@@ -54,6 +62,7 @@ declare function useCapabilities(): {
     canAddPanel: boolean;
     canEditPanels: boolean;
     canRefresh: boolean;
+    canEditLayout: boolean;
 };
 
 type ChartType = 'bar' | 'grouped-bar' | 'pie' | 'line' | 'scatter' | 'heatmap';
@@ -105,6 +114,7 @@ interface ChartStyle {
     legendBold: boolean;
     legendHighlight: string;
     xTickRotation: number;
+    yTickRotation: number;
     tickTruncate: number;
     legendAnchor: LegendAnchor;
     titleAlign: TitleAlign;
@@ -325,12 +335,6 @@ interface ChartStyleControlsProps {
     style?: Partial<ChartStyle> | null;
     onChange: (next: ChartStyle) => void;
 }
-/**
- * ChartStyleControls — the standardized appearance editor used across all
- * charts. Edits a plain style object (see chartStyle.ts); theme-aware via the
- * host-injected DashboardContext theme. Parent persists the style and passes it
- * to the views.
- */
 declare function ChartStyleControls({ style, onChange }: ChartStyleControlsProps): react.JSX.Element;
 
 interface SqlConsoleColumn {
@@ -382,6 +386,8 @@ interface DashboardPanel$1 {
     title?: string;
     width?: number;
     height?: number;
+    x?: number;
+    y?: number;
     config?: PanelConfig;
 }
 interface Dashboard$1 {
@@ -398,8 +404,12 @@ interface DashboardRendererProps {
 }
 /**
  * DashboardRenderer — renders a grid of AI-generated or manually configured
- * panels. The per-panel remove button is gated behind canEditPanels: the
- * published viewer (no removePanel) renders the dashboard READ-ONLY.
+ * panels via react-grid-layout. Editing is capability-gated:
+ *   - studio (persistLayout wired) ⇒ panels drag (by their header) + resize, and
+ *     the new geometry is persisted back to the host.
+ *   - published viewer (no persistLayout) ⇒ a static grid, rendered exactly where
+ *     the studio left the panels.
+ * The per-panel remove button is similarly gated behind canEditPanels.
  */
 declare function DashboardRenderer({ dashboard, records, columns }: DashboardRendererProps): react.JSX.Element | null;
 
@@ -504,4 +514,4 @@ interface DataExplorerProps {
 }
 declare function DataExplorer({ records, columns, states, activeStateId, profile, dashboard, dashboardId, savedDashboards, loading, analyzing, defaultMode, tabs, onSelectState, onRefreshStates, }: DataExplorerProps): react.JSX.Element;
 
-export { type AggFn, type BarDatum, BarView, type BarViewProps, ChartBuilder, type ChartBuilderColumn, type ChartBuilderProps, type ChartConfig, type ChartField, type ChartFilter, type ChartPanel, type ChartStyle, ChartStyleControls, type ChartStyleControlsProps, type ChartType, DEFAULT_CHART_STYLE, type Dashboard$1 as Dashboard, type DashboardCapabilities, type DashboardContextValue, type DashboardPanel$1 as DashboardPanel, DashboardProvider, type DashboardProviderProps, DashboardRenderer, type DashboardRendererProps, type DashboardTheme, DataExplorer, type DataExplorerProps, type HeatmapSerie, HeatmapView, type HeatmapViewProps, type InsightConfig, InsightView, type InsightViewProps, LEGEND_ANCHORS, type LegendAnchor, type LegendPosition, type LineSerie, LineView, type LineViewProps, type MetricConfig, MetricView, type MetricViewProps, type PanelInput, type PieDatum, PieView, type PieViewProps, PivotView, type PivotViewProps, type QueryResult, type Row, type SavedDashboard, type ScatterSerie, ScatterView, type ScatterViewProps, SqlConsole, type SqlConsoleColumn, type SqlConsoleProps, type TitleAlign, aggExpr, aggregate, axisLegend, buildChartSQL, buildNivoTheme, compileWhere, groupBy, legendConfig, qIdent, qLit, shapeChartData, useCapabilities, useDashboard, withStyleDefaults };
+export { type AggFn, type BarDatum, BarView, type BarViewProps, ChartBuilder, type ChartBuilderColumn, type ChartBuilderProps, type ChartConfig, type ChartField, type ChartFilter, type ChartPanel, type ChartStyle, ChartStyleControls, type ChartStyleControlsProps, type ChartType, DEFAULT_CHART_STYLE, type Dashboard$1 as Dashboard, type DashboardCapabilities, type DashboardContextValue, type DashboardPanel$1 as DashboardPanel, DashboardProvider, type DashboardProviderProps, DashboardRenderer, type DashboardRendererProps, type DashboardTheme, DataExplorer, type DataExplorerProps, type HeatmapSerie, HeatmapView, type HeatmapViewProps, type InsightConfig, InsightView, type InsightViewProps, LEGEND_ANCHORS, type LegendAnchor, type LegendPosition, type LineSerie, LineView, type LineViewProps, type MetricConfig, MetricView, type MetricViewProps, type PanelInput, type PanelLayout, type PieDatum, PieView, type PieViewProps, PivotView, type PivotViewProps, type QueryResult, type Row, type SavedDashboard, type ScatterSerie, ScatterView, type ScatterViewProps, SqlConsole, type SqlConsoleColumn, type SqlConsoleProps, type TitleAlign, aggExpr, aggregate, axisLegend, buildChartSQL, buildNivoTheme, compileWhere, groupBy, legendConfig, qIdent, qLit, shapeChartData, useCapabilities, useDashboard, withStyleDefaults };

package/dist/index.d.ts

@@ -31,6 +31,14 @@ interface DashboardCapabilities {
     addPanel?: (panel: PanelInput) => void;
     removePanel?: (panelId: string) => void;
     persistPanelData?: (panelId: string, rows: QueryResult['rows'], refreshedAt: string) => void;
+    persistLayout?: (items: PanelLayout[]) => void;
+}
+interface PanelLayout {
+    id: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
 }
 interface DashboardContextValue extends DashboardCapabilities {
     theme: DashboardTheme;
@@ -54,6 +62,7 @@ declare function useCapabilities(): {
     canAddPanel: boolean;
     canEditPanels: boolean;
     canRefresh: boolean;
+    canEditLayout: boolean;
 };
 
 type ChartType = 'bar' | 'grouped-bar' | 'pie' | 'line' | 'scatter' | 'heatmap';
@@ -105,6 +114,7 @@ interface ChartStyle {
     legendBold: boolean;
     legendHighlight: string;
     xTickRotation: number;
+    yTickRotation: number;
     tickTruncate: number;
     legendAnchor: LegendAnchor;
     titleAlign: TitleAlign;
@@ -325,12 +335,6 @@ interface ChartStyleControlsProps {
     style?: Partial<ChartStyle> | null;
     onChange: (next: ChartStyle) => void;
 }
-/**
- * ChartStyleControls — the standardized appearance editor used across all
- * charts. Edits a plain style object (see chartStyle.ts); theme-aware via the
- * host-injected DashboardContext theme. Parent persists the style and passes it
- * to the views.
- */
 declare function ChartStyleControls({ style, onChange }: ChartStyleControlsProps): react.JSX.Element;
 
 interface SqlConsoleColumn {
@@ -382,6 +386,8 @@ interface DashboardPanel$1 {
     title?: string;
     width?: number;
     height?: number;
+    x?: number;
+    y?: number;
     config?: PanelConfig;
 }
 interface Dashboard$1 {
@@ -398,8 +404,12 @@ interface DashboardRendererProps {
 }
 /**
  * DashboardRenderer — renders a grid of AI-generated or manually configured
- * panels. The per-panel remove button is gated behind canEditPanels: the
- * published viewer (no removePanel) renders the dashboard READ-ONLY.
+ * panels via react-grid-layout. Editing is capability-gated:
+ *   - studio (persistLayout wired) ⇒ panels drag (by their header) + resize, and
+ *     the new geometry is persisted back to the host.
+ *   - published viewer (no persistLayout) ⇒ a static grid, rendered exactly where
+ *     the studio left the panels.
+ * The per-panel remove button is similarly gated behind canEditPanels.
  */
 declare function DashboardRenderer({ dashboard, records, columns }: DashboardRendererProps): react.JSX.Element | null;
 
@@ -504,4 +514,4 @@ interface DataExplorerProps {
 }
 declare function DataExplorer({ records, columns, states, activeStateId, profile, dashboard, dashboardId, savedDashboards, loading, analyzing, defaultMode, tabs, onSelectState, onRefreshStates, }: DataExplorerProps): react.JSX.Element;
 
-export { type AggFn, type BarDatum, BarView, type BarViewProps, ChartBuilder, type ChartBuilderColumn, type ChartBuilderProps, type ChartConfig, type ChartField, type ChartFilter, type ChartPanel, type ChartStyle, ChartStyleControls, type ChartStyleControlsProps, type ChartType, DEFAULT_CHART_STYLE, type Dashboard$1 as Dashboard, type DashboardCapabilities, type DashboardContextValue, type DashboardPanel$1 as DashboardPanel, DashboardProvider, type DashboardProviderProps, DashboardRenderer, type DashboardRendererProps, type DashboardTheme, DataExplorer, type DataExplorerProps, type HeatmapSerie, HeatmapView, type HeatmapViewProps, type InsightConfig, InsightView, type InsightViewProps, LEGEND_ANCHORS, type LegendAnchor, type LegendPosition, type LineSerie, LineView, type LineViewProps, type MetricConfig, MetricView, type MetricViewProps, type PanelInput, type PieDatum, PieView, type PieViewProps, PivotView, type PivotViewProps, type QueryResult, type Row, type SavedDashboard, type ScatterSerie, ScatterView, type ScatterViewProps, SqlConsole, type SqlConsoleColumn, type SqlConsoleProps, type TitleAlign, aggExpr, aggregate, axisLegend, buildChartSQL, buildNivoTheme, compileWhere, groupBy, legendConfig, qIdent, qLit, shapeChartData, useCapabilities, useDashboard, withStyleDefaults };
+export { type AggFn, type BarDatum, BarView, type BarViewProps, ChartBuilder, type ChartBuilderColumn, type ChartBuilderProps, type ChartConfig, type ChartField, type ChartFilter, type ChartPanel, type ChartStyle, ChartStyleControls, type ChartStyleControlsProps, type ChartType, DEFAULT_CHART_STYLE, type Dashboard$1 as Dashboard, type DashboardCapabilities, type DashboardContextValue, type DashboardPanel$1 as DashboardPanel, DashboardProvider, type DashboardProviderProps, DashboardRenderer, type DashboardRendererProps, type DashboardTheme, DataExplorer, type DataExplorerProps, type HeatmapSerie, HeatmapView, type HeatmapViewProps, type InsightConfig, InsightView, type InsightViewProps, LEGEND_ANCHORS, type LegendAnchor, type LegendPosition, type LineSerie, LineView, type LineViewProps, type MetricConfig, MetricView, type MetricViewProps, type PanelInput, type PanelLayout, type PieDatum, PieView, type PieViewProps, PivotView, type PivotViewProps, type QueryResult, type Row, type SavedDashboard, type ScatterSerie, ScatterView, type ScatterViewProps, SqlConsole, type SqlConsoleColumn, type SqlConsoleProps, type TitleAlign, aggExpr, aggregate, axisLegend, buildChartSQL, buildNivoTheme, compileWhere, groupBy, legendConfig, qIdent, qLit, shapeChartData, useCapabilities, useDashboard, withStyleDefaults };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, useContext, useMemo, useState, useEffect, useRef, Suspense, useCallback } from 'react';
+import { createContext, useContext, useMemo, useState, useEffect, useRef, useCallback, Suspense } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { ResponsiveBar } from '@nivo/bar';
 import { ResponsivePie } from '@nivo/pie';
@@ -11,6 +11,7 @@ import { Loader2, Play, ChevronDown, AlertCircle, Rows3, BarChart3, PieChart, Tr
 import CodeMirror, { EditorView, Prec, keymap } from '@uiw/react-codemirror';
 import { sql, PostgreSQL, schemaCompletionSource, keywordCompletionSource } from '@codemirror/lang-sql';
 import { snippetCompletion, completeFromList, autocompletion, acceptCompletion } from '@codemirror/autocomplete';
+import GridLayout, { WidthProvider } from 'react-grid-layout';
 
 // src/context/DashboardContext.tsx
 var DashboardContext = createContext(null);
@@ -39,7 +40,9 @@ function useCapabilities() {
     canAddPanel: !!c.addPanel,
     canEditPanels: !!c.removePanel,
     // Studio can recompute + persist a panel's precomputed result.
-    canRefresh: !!c.persistPanelData
+    canRefresh: !!c.persistPanelData,
+    // Studio can drag/resize panels and persist the grid layout.
+    canEditLayout: !!c.persistLayout
   };
 }
 
@@ -225,6 +228,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",
@@ -300,7 +304,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;
@@ -609,11 +613,17 @@ function PivotView({ records }) {
     )
   ] });
 }
-function Row({ label, children }) {
+function Section({ title, children }) {
   const { theme } = useDashboard();
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 min-h-[28px]", children: [
-    /* @__PURE__ */ jsx("span", { className: `text-xs ${theme.font} text-midnight-text-muted`, children: label }),
-    /* @__PURE__ */ jsx("div", { className: "flex items-center", children })
+  return /* @__PURE__ */ jsxs("div", { className: `py-3 border-t ${theme.border} first:border-t-0 first:pt-0`, children: [
+    /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-wider text-midnight-text-muted/70 font-mono mb-2", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children })
+  ] });
+}
+function Row({ label, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[88px_1fr] items-center gap-2 min-h-[30px]", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-midnight-text-muted truncate", title: label, children: label }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end", children })
   ] });
 }
 function ColorControl({ value, onChange }) {
@@ -624,23 +634,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__ */ jsx(
-    "input",
-    {
-      type: "number",
+function SliderControl({ value, onChange, min, max, step = 1, unit = "" }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "range",
+        min,
+        max,
+        step,
+        value,
+        onChange: (e) => onChange(Number(e.target.value)),
+        className: "flex-1 h-1 accent-midnight-accent cursor-pointer"
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { className: "w-10 shrink-0 text-right text-[11px] font-mono tabular-nums text-midnight-text-body", children: [
       value,
-      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();
@@ -651,78 +667,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__ */ 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__ */ jsx("span", { className: `inline-block h-3 w-3 transform rounded-full bg-white transition-transform ${value ? "translate-x-3.5" : "translate-x-0.5"}` })
     }
   );
 }
 function OptionalColor({ value, onChange, fallback = "#a78bfa" }) {
   const on = !!value;
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ jsx(Toggle, { value: on, onChange: (v) => onChange(v ? fallback : "") }),
-    on && /* @__PURE__ */ jsx(ColorControl, { value, onChange })
+    on && /* @__PURE__ */ jsx(ColorControl, { value, onChange }),
+    /* @__PURE__ */ jsx(Switch, { value: on, onChange: (v) => onChange(v ? fallback : "") })
   ] });
 }
 function Choice({ value, options, onChange }) {
   const { theme } = useDashboard();
-  return /* @__PURE__ */ jsx("div", { className: "w-28", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
     "select",
     {
       value,
       onChange: (e) => onChange(e.target.value),
-      className: `w-full px-2 py-1 text-xs ${theme.font} bg-midnight-surface border ${theme.border} text-midnight-text-body outline-none focus:border-midnight-accent`,
+      className: `w-full px-2 py-1 text-xs font-mono bg-midnight-surface border ${theme.border} text-midnight-text-body outline-none focus:border-midnight-accent transition-colors`,
       children: options.map((o) => /* @__PURE__ */ jsx("option", { value: o, children: o }, o))
     }
-  ) });
-}
-function Group({ children, last }) {
-  const { theme } = useDashboard();
-  return /* @__PURE__ */ jsx("div", { className: `space-y-2 pb-3 ${last ? "" : `mb-3 border-b ${theme.border}`}`, children });
+  );
 }
 function ChartStyleControls({ style, onChange }) {
   const s = withStyleDefaults(style);
   const set = (key, value) => onChange({ ...s, [key]: value });
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs(Group, { children: [
+    /* @__PURE__ */ jsxs(Section, { title: "Canvas", children: [
       /* @__PURE__ */ jsx(Row, { label: "Background", children: /* @__PURE__ */ jsx(ColorControl, { value: s.background, onChange: (v) => set("background", v) }) }),
-      /* @__PURE__ */ jsx(Row, { label: "Text color", children: /* @__PURE__ */ jsx(ColorControl, { value: s.textColor, onChange: (v) => set("textColor", v) }) }),
-      /* @__PURE__ */ jsx(Row, { label: "Grid color", children: /* @__PURE__ */ jsx(ColorControl, { value: s.gridColor, onChange: (v) => set("gridColor", v) }) }),
-      /* @__PURE__ */ jsx(Row, { label: "Font size", children: /* @__PURE__ */ jsx(NumberControl, { value: s.fontSize, min: 6, max: 24, onChange: (v) => set("fontSize", v) }) })
+      /* @__PURE__ */ jsx(Row, { label: "Text", children: /* @__PURE__ */ jsx(ColorControl, { value: s.textColor, onChange: (v) => set("textColor", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Grid", children: /* @__PURE__ */ jsx(ColorControl, { value: s.gridColor, onChange: (v) => set("gridColor", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Font size", children: /* @__PURE__ */ jsx(SliderControl, { value: s.fontSize, min: 6, max: 24, unit: "px", onChange: (v) => set("fontSize", v) }) })
     ] }),
-    /* @__PURE__ */ jsxs(Group, { children: [
-      /* @__PURE__ */ jsx(Row, { label: "X 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(TextControl, { value: s.xAxisLabel, placeholder: "(column)", onChange: (v) => set("xAxisLabel", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Show X", children: /* @__PURE__ */ jsx(Switch, { value: s.showXLegend, onChange: (v) => set("showXLegend", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Y title", children: /* @__PURE__ */ jsx(TextControl, { value: s.yAxisLabel, placeholder: "(column)", onChange: (v) => set("yAxisLabel", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Show Y", children: /* @__PURE__ */ jsx(Switch, { value: s.showYLegend, onChange: (v) => set("showYLegend", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Color", children: /* @__PURE__ */ jsx(ColorControl, { value: s.legendColor, onChange: (v) => set("legendColor", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Bold", children: /* @__PURE__ */ jsx(Switch, { value: s.legendBold, onChange: (v) => set("legendBold", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Highlight", children: /* @__PURE__ */ jsx(OptionalColor, { value: s.legendHighlight, onChange: (v) => set("legendHighlight", v) }) })
     ] }),
-    /* @__PURE__ */ jsxs(Group, { 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(Choice, { value: s.xLegendPosition, options: ["start", "middle", "end"], onChange: (v) => set("xLegendPosition", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "X offset", children: /* @__PURE__ */ jsx(SliderControl, { value: s.xLegendOffset, min: -80, max: 80, onChange: (v) => set("xLegendOffset", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Y pos", children: /* @__PURE__ */ jsx(Choice, { value: s.yLegendPosition, options: ["start", "middle", "end"], onChange: (v) => set("yLegendPosition", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Y offset", children: /* @__PURE__ */ jsx(SliderControl, { value: s.yLegendOffset, min: -80, max: 80, onChange: (v) => set("yLegendOffset", v) }) })
     ] }),
-    /* @__PURE__ */ jsxs(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: "X angle", children: /* @__PURE__ */ jsx(SliderControl, { value: s.xTickRotation, min: -90, max: 90, unit: "\xB0", onChange: (v) => set("xTickRotation", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Y angle", children: /* @__PURE__ */ jsx(SliderControl, { value: s.yTickRotation, min: -90, max: 90, unit: "\xB0", onChange: (v) => set("yTickRotation", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Truncate", children: /* @__PURE__ */ jsx(SliderControl, { value: s.tickTruncate, min: 0, max: 40, onChange: (v) => set("tickTruncate", v) }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Section, { title: "Panel title", children: [
+      /* @__PURE__ */ jsx(Row, { label: "Align", children: /* @__PURE__ */ jsx(Choice, { value: s.titleAlign, options: ["left", "center", "right"], onChange: (v) => set("titleAlign", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Bold", children: /* @__PURE__ */ jsx(Switch, { value: s.titleBold, onChange: (v) => set("titleBold", v) }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Color", children: /* @__PURE__ */ jsx(OptionalColor, { value: s.titleColor, onChange: (v) => set("titleColor", v), fallback: "#e2e8f0" }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Background", children: /* @__PURE__ */ jsx(OptionalColor, { value: s.titleBackground, onChange: (v) => set("titleBackground", v), fallback: "#1e293b" }) })
+    ] }),
+    /* @__PURE__ */ jsx(Section, { title: "Series legend", children: /* @__PURE__ */ jsx(Row, { label: "Position", children: /* @__PURE__ */ jsx(Choice, { value: s.legendAnchor, options: ["right", "top-left", "top-right", "bottom-left", "bottom-right", "none"], onChange: (v) => set("legendAnchor", v) }) }) })
   ] });
 }
 var AGGREGATES = [
@@ -1992,57 +2009,112 @@ function PanelContent({ panel, records, columns }) {
       ] });
   }
 }
-var ROW_HEIGHT = 180;
+var GRID_COLS = 12;
+var ROW_HEIGHT = 80;
+var GRID_MARGIN = 10;
+var DRAG_HANDLE = "panel-drag-handle";
+var RGL_CSS = `
+.react-grid-layout { position: relative; transition: height 200ms ease; }
+.react-grid-item { transition: all 200ms ease; transition-property: left, top, width, height; box-sizing: border-box; }
+.react-grid-item.cssTransforms { transition-property: transform, width, height; }
+.react-grid-item.resizing { transition: none; z-index: 3; will-change: width, height; }
+.react-grid-item.react-draggable-dragging { transition: none; z-index: 3; will-change: transform; }
+.react-grid-item.react-grid-placeholder { background: rgba(99,102,241,0.18); border: 1px dashed #6366f1; border-radius: 2px; transition-duration: 100ms; z-index: 2; user-select: none; }
+.react-grid-item > .react-resizable-handle { position: absolute; width: 18px; height: 18px; bottom: 0; right: 0; cursor: se-resize; }
+.react-grid-item > .react-resizable-handle::after { content: ''; position: absolute; right: 4px; bottom: 4px; width: 6px; height: 6px; border-right: 2px solid rgba(148,163,184,0.7); border-bottom: 2px solid rgba(148,163,184,0.7); }
+.${DRAG_HANDLE} { cursor: grab; }
+.react-grid-item.react-draggable-dragging .${DRAG_HANDLE} { cursor: grabbing; }
+`;
+var rglCssInjected = false;
+function useInjectRglCss() {
+  useEffect(() => {
+    if (rglCssInjected || typeof document === "undefined") return;
+    const el = document.createElement("style");
+    el.setAttribute("data-rgl", "dashboard-renderer");
+    el.textContent = RGL_CSS;
+    document.head.appendChild(el);
+    rglCssInjected = true;
+  }, []);
+}
+var GridLayoutWithWidth = WidthProvider(GridLayout);
+function buildLayout(panels) {
+  let cx = 0, cy = 0, rowH = 0;
+  return panels.map((p) => {
+    const w = Math.min(Math.max(p.width || 6, 1), GRID_COLS);
+    const h = Math.max(p.height || 4, 1);
+    if (typeof p.x === "number" && typeof p.y === "number") {
+      return { i: p.id, x: p.x, y: p.y, w, h, minW: 2, minH: 2 };
+    }
+    if (cx + w > GRID_COLS) {
+      cx = 0;
+      cy += rowH;
+      rowH = 0;
+    }
+    const item = { i: p.id, x: cx, y: cy, w, h, minW: 2, minH: 2 };
+    cx += w;
+    rowH = Math.max(rowH, h);
+    return item;
+  });
+}
 function DashboardRenderer({ dashboard, records, columns }) {
-  const { theme, removePanel } = useDashboard();
-  const { canEditPanels } = useCapabilities();
+  const { theme, removePanel, persistLayout } = useDashboard();
+  const { canEditPanels, canEditLayout } = useCapabilities();
+  useInjectRglCss();
+  const panels = dashboard?.panels ?? [];
+  const layout = useMemo(() => buildLayout(panels), [panels]);
+  const onLayoutChange = useCallback((next) => {
+    if (!persistLayout) return;
+    persistLayout(next.map((l) => ({ id: l.i, x: l.x, y: l.y, w: l.w, h: l.h })));
+  }, [persistLayout]);
   if (!dashboard) return null;
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-2", children: [
     dashboard.insights && /* @__PURE__ */ jsxs("div", { className: `border ${theme.border} bg-midnight-elevated px-4 py-3 flex items-start gap-3`, children: [
       /* @__PURE__ */ jsx(Sparkles, { className: "w-5 h-5 text-midnight-accent shrink-0 mt-0.5" }),
       /* @__PURE__ */ jsx("p", { className: `text-sm ${theme.text} leading-relaxed`, children: dashboard.insights })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-12 gap-3", children: dashboard.panels?.map((panel) => {
-      const colSpan = Math.min(Math.max(panel.width || 6, 1), 12);
-      const rowSpan = Math.min(Math.max(panel.height || 2, 1), 4);
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: `border ${theme.border} bg-midnight-surface flex flex-col`,
-          style: {
-            gridColumn: `span ${colSpan}`,
-            minHeight: `${rowSpan * ROW_HEIGHT}px`
-          },
-          children: [
-            /* @__PURE__ */ jsxs("div", { className: `flex items-center justify-between px-3 py-1.5 border-b ${theme.border} bg-midnight-elevated`, children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: "flex-1 text-xs font-mono text-midnight-text-body truncate 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
-      );
-    }) })
+    /* @__PURE__ */ jsx(
+      GridLayoutWithWidth,
+      {
+        className: "layout",
+        layout,
+        cols: GRID_COLS,
+        rowHeight: ROW_HEIGHT,
+        margin: [GRID_MARGIN, GRID_MARGIN],
+        isDraggable: canEditLayout,
+        isResizable: canEditLayout,
+        draggableHandle: `.${DRAG_HANDLE}`,
+        onDragStop: onLayoutChange,
+        onResizeStop: onLayoutChange,
+        compactType: canEditLayout ? "vertical" : null,
+        children: panels.map((panel) => /* @__PURE__ */ jsxs("div", { className: `border ${theme.border} bg-midnight-surface flex flex-col overflow-hidden`, children: [
+          /* @__PURE__ */ jsxs("div", { className: `flex items-center justify-between px-3 py-1.5 border-b ${theme.border} bg-midnight-elevated ${canEditLayout ? DRAG_HANDLE : ""}`, children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "flex-1 text-xs font-mono text-midnight-text-body truncate px-1",
+                style: {
+                  textAlign: panel.config?.style?.titleAlign || "left",
+                  fontWeight: panel.config?.style?.titleBold ? 700 : void 0,
+                  background: panel.config?.style?.titleBackground || void 0,
+                  color: panel.config?.style?.titleColor || void 0
+                },
+                children: panel.title || panel.type
+              }
+            ),
+            canEditPanels && removePanel && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onMouseDown: (e) => e.stopPropagation(),
+                onClick: () => removePanel(panel.id),
+                className: "p-0.5 hover:bg-midnight-raised text-midnight-text-muted hover:text-midnight-text-body transition-colors",
+                children: /* @__PURE__ */ jsx(X, { className: "w-3 h-3" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ViewLoading, {}), children: /* @__PURE__ */ jsx(PanelContent, { panel, records, columns }) }) })
+        ] }, panel.id))
+      }
+    )
   ] });
 }
 function ProfileSummary({ profile, theme }) {