@quantumwake/terminal-ux-dashboard-components 0.1.12 → 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';
@@ -98,8 +107,20 @@ interface ChartStyle {
     xLegendOffset: number;
     yLegendPosition: LegendPosition;
     yLegendOffset: number;
+    xAxisLabel: string;
+    yAxisLabel: string;
+    showXLegend: boolean;
+    showYLegend: boolean;
+    legendBold: boolean;
+    legendHighlight: string;
+    xTickRotation: number;
+    yTickRotation: number;
+    tickTruncate: number;
     legendAnchor: LegendAnchor;
     titleAlign: TitleAlign;
+    titleBold: boolean;
+    titleBackground: string;
+    titleColor: string;
 }
 declare const DEFAULT_CHART_STYLE: ChartStyle;
 declare const LEGEND_ANCHORS: LegendAnchor[];
@@ -121,6 +142,9 @@ declare const buildNivoTheme: (style?: Partial<ChartStyle> | null) => {
             text: {
                 fill: string;
                 fontSize: number;
+                fontWeight: number;
+                outlineWidth: number;
+                outlineColor: string;
             };
         };
     };
@@ -176,11 +200,9 @@ declare const legendConfig: (style?: Partial<ChartStyle> | null) => {
     symbolShape: "circle";
     itemTextColor: string;
 } | null;
-declare const axisLegend: (style: Partial<ChartStyle> | null | undefined, axis: "x" | "y", legendText: string) => {
-    legend: string;
-    legendPosition: LegendPosition;
-    legendOffset: number;
-};
+declare const axisLegend: (style: Partial<ChartStyle> | null | undefined, axis: "x" | "y", columnName: string, opts?: {
+    numeric?: boolean;
+}) => Record<string, unknown>;
 
 type AggFn = 'count' | 'distinct' | 'sum' | 'avg' | 'min' | 'max';
 declare const groupBy: (records: Row[], column: string) => Record<string, Row[]>;
@@ -313,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 {
@@ -370,6 +386,8 @@ interface DashboardPanel$1 {
     title?: string;
     width?: number;
     height?: number;
+    x?: number;
+    y?: number;
     config?: PanelConfig;
 }
 interface Dashboard$1 {
@@ -386,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;
 
@@ -492,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';
@@ -98,8 +107,20 @@ interface ChartStyle {
     xLegendOffset: number;
     yLegendPosition: LegendPosition;
     yLegendOffset: number;
+    xAxisLabel: string;
+    yAxisLabel: string;
+    showXLegend: boolean;
+    showYLegend: boolean;
+    legendBold: boolean;
+    legendHighlight: string;
+    xTickRotation: number;
+    yTickRotation: number;
+    tickTruncate: number;
     legendAnchor: LegendAnchor;
     titleAlign: TitleAlign;
+    titleBold: boolean;
+    titleBackground: string;
+    titleColor: string;
 }
 declare const DEFAULT_CHART_STYLE: ChartStyle;
 declare const LEGEND_ANCHORS: LegendAnchor[];
@@ -121,6 +142,9 @@ declare const buildNivoTheme: (style?: Partial<ChartStyle> | null) => {
             text: {
                 fill: string;
                 fontSize: number;
+                fontWeight: number;
+                outlineWidth: number;
+                outlineColor: string;
             };
         };
     };
@@ -176,11 +200,9 @@ declare const legendConfig: (style?: Partial<ChartStyle> | null) => {
     symbolShape: "circle";
     itemTextColor: string;
 } | null;
-declare const axisLegend: (style: Partial<ChartStyle> | null | undefined, axis: "x" | "y", legendText: string) => {
-    legend: string;
-    legendPosition: LegendPosition;
-    legendOffset: number;
-};
+declare const axisLegend: (style: Partial<ChartStyle> | null | undefined, axis: "x" | "y", columnName: string, opts?: {
+    numeric?: boolean;
+}) => Record<string, unknown>;
 
 type AggFn = 'count' | 'distinct' | 'sum' | 'avg' | 'min' | 'max';
 declare const groupBy: (records: Row[], column: string) => Record<string, Row[]>;
@@ -313,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 {
@@ -370,6 +386,8 @@ interface DashboardPanel$1 {
     title?: string;
     width?: number;
     height?: number;
+    x?: number;
+    y?: number;
     config?: PanelConfig;
 }
 interface Dashboard$1 {
@@ -386,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;
 
@@ -492,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 };