drizzle-cube 0.6.7 → 0.7.1

package/dist/cjs/client/hooks/dashboard/useDashboardController.d.ts

@@ -1,22 +1,26 @@
 import { MutableRefObject, RefObject } from 'react';
 import { StoreApi } from 'zustand';
-import { DashboardConfig, DashboardFilterMapping, DashboardGridSettings, DashboardLayoutMode, PortletConfig, RowLayout, ThumbnailFeatureConfig } from '../../types.js';
+import { DashboardConfig, DashboardFilterMapping, DashboardGridSettings, DashboardLayoutMode, PortletConfig, PortletGroup, RowLayout, ThumbnailFeatureConfig } from '../../types.js';
 import { DashboardStore, DashboardStoreActions } from '../../stores/dashboardStore.js';
+import { LayoutUpdate } from './useRowLayoutEngine.js';
+import { SnapEdge } from './groupUtils.js';
 interface UseDashboardControllerOptions {
     allowedModes: DashboardLayoutMode[];
     canChangeLayoutMode: boolean;
     isResponsiveEditable: boolean;
     layoutMode: DashboardLayoutMode;
     resolvedRows: RowLayout[];
+    resolvedGroups: PortletGroup[];
     gridSettings: DashboardGridSettings;
     thumbnailConfig?: ThumbnailFeatureConfig;
     dashboardRef?: RefObject<HTMLElement | null>;
     storeApi: StoreApi<DashboardStore>;
-    storeActions: Pick<DashboardStoreActions, 'setEditMode' | 'exitFilterSelectionMode' | 'openPortletModal' | 'closePortletModal' | 'openTextModal' | 'closeTextModal' | 'openFilterConfigModal' | 'closeFilterConfigModal' | 'openDeleteConfirm' | 'closeDeleteConfirm' | 'setThumbnailDirty'>;
+    storeActions: Pick<DashboardStoreActions, 'setEditMode' | 'exitFilterSelectionMode' | 'openPortletModal' | 'closePortletModal' | 'openTextModal' | 'closeTextModal' | 'openFilterConfigModal' | 'closeFilterConfigModal' | 'openDeleteConfirm' | 'openDeleteGroupConfirm' | 'setDraftGroups' | 'closeDeleteConfirm' | 'setThumbnailDirty'>;
     configRef: MutableRefObject<DashboardConfig>;
     onConfigChangeRef: MutableRefObject<((config: DashboardConfig) => void) | undefined>;
     onSaveRef: MutableRefObject<((config: DashboardConfig) => Promise<void> | void) | undefined>;
     onSaveThumbnailRef: MutableRefObject<((thumbnailData: string) => Promise<string | void>) | undefined>;
+    updateLayout: (next: LayoutUpdate, save?: boolean) => Promise<void>;
     updateRowLayout: (rows: RowLayout[], save?: boolean, portletsOverride?: PortletConfig[]) => Promise<void>;
     portletComponentRefs?: MutableRefObject<Record<string, {
         refresh: (options?: {
@@ -27,7 +31,7 @@ interface UseDashboardControllerOptions {
         bustCache?: boolean;
     }) => void;
 }
-export declare function useDashboardController({ allowedModes, canChangeLayoutMode, isResponsiveEditable, layoutMode, resolvedRows, gridSettings, thumbnailConfig, dashboardRef, storeApi, storeActions, configRef, onConfigChangeRef, onSaveRef, onSaveThumbnailRef, updateRowLayout, portletComponentRefs, onPortletRefresh, }: UseDashboardControllerOptions): {
+export declare function useDashboardController({ allowedModes, canChangeLayoutMode, isResponsiveEditable, layoutMode, resolvedRows, resolvedGroups, gridSettings, thumbnailConfig, dashboardRef, storeApi, storeActions, configRef, onConfigChangeRef, onSaveRef, onSaveThumbnailRef, updateLayout, updateRowLayout, portletComponentRefs, onPortletRefresh, }: UseDashboardControllerOptions): {
     enterEditMode: () => void;
     exitEditMode: () => void;
     toggleEditMode: () => void;
@@ -49,5 +53,9 @@ export declare function useDashboardController({ allowedModes, canChangeLayoutMo
     selectAllForFilter: (filterId: string) => Promise<void>;
     saveFilterConfig: (mapping: DashboardFilterMapping) => Promise<void>;
     handlePaletteChange: (paletteName: string) => Promise<void>;
+    snapPortletIntoGroup: (movedPortletId: string, targetPortletId: string, edge: SnapEdge) => Promise<void>;
+    ungroupGroup: (groupId: string) => Promise<void>;
+    deleteGroup: (groupId: string) => void;
+    renameGroup: (groupId: string, title: string) => Promise<void>;
 };
 export {};

package/dist/cjs/client/hooks/dashboard/useRowLayoutEngine.d.ts

@@ -1,18 +1,28 @@
 import { MutableRefObject } from 'react';
-import { DashboardConfig, DashboardGridSettings, DashboardLayoutMode, PortletConfig, RowLayout } from '../../types.js';
+import { DashboardConfig, DashboardGridSettings, DashboardLayoutMode, PortletConfig, PortletGroup, RowLayout } from '../../types.js';
+/** A single layout commit. Rows and groups are coupled, so they travel together. */
+export interface LayoutUpdate {
+    rows: RowLayout[];
+    groups?: PortletGroup[];
+    portlets?: PortletConfig[];
+}
 interface UseRowLayoutEngineOptions {
     layoutMode: DashboardLayoutMode;
     draftRows: RowLayout[] | null;
+    draftGroups: PortletGroup[] | null;
     config: DashboardConfig;
     gridSettings: DashboardGridSettings;
     configRef: MutableRefObject<DashboardConfig>;
     onConfigChangeRef: MutableRefObject<((config: DashboardConfig) => void) | undefined>;
     onSaveRef: MutableRefObject<((config: DashboardConfig) => Promise<void> | void) | undefined>;
     setDraftRows: (rows: RowLayout[] | null) => void;
+    setDraftGroups: (groups: PortletGroup[] | null) => void;
     setThumbnailDirty: (dirty: boolean) => void;
 }
-export declare function useRowLayoutEngine({ layoutMode, draftRows, config, gridSettings, configRef, onConfigChangeRef, onSaveRef, setDraftRows, setThumbnailDirty, }: UseRowLayoutEngineOptions): {
+export declare function useRowLayoutEngine({ layoutMode, draftRows, draftGroups, config, gridSettings, configRef, onConfigChangeRef, onSaveRef, setDraftRows, setDraftGroups, setThumbnailDirty, }: UseRowLayoutEngineOptions): {
     resolvedRows: RowLayout[];
+    resolvedGroups: PortletGroup[];
+    updateLayout: (next: LayoutUpdate, save?: boolean) => Promise<void>;
     updateRowLayout: (rows: RowLayout[], save?: boolean, portletsOverride?: PortletConfig[]) => Promise<void>;
 };
 export {};

package/dist/cjs/client/hooks/useDashboardHook.d.ts

@@ -1,7 +1,9 @@
 import { default as React } from 'react';
 import { PortletDebugDataEntry } from '../stores/dashboardStore.js';
 import { LayoutItem } from 'react-grid-layout';
-import { DashboardConfig, PortletConfig, RowLayout, DashboardFilter, DashboardFilterMapping, DashboardGridSettings, DashboardLayoutMode } from '../types.js';
+import { DashboardConfig, PortletConfig, RowLayout, PortletGroup, DashboardFilter, DashboardFilterMapping, DashboardGridSettings, DashboardLayoutMode } from '../types.js';
+import { SnapEdge } from './dashboard/groupUtils.js';
+import { LayoutUpdate } from './dashboard/useRowLayoutEngine.js';
 export interface UseDashboardOptions {
     /** Dashboard configuration */
     config: DashboardConfig;
@@ -55,6 +57,7 @@ export interface UseDashboardResult {
     filterConfigPortlet: PortletConfig | null;
     /** Portlet ID pending delete confirmation */
     deleteConfirmPortletId: string | null;
+    deleteConfirmGroupId: string | null;
     /** Draft rows during drag operations */
     draftRows: RowLayout[] | null;
     /** Whether a portlet is being dragged */
@@ -71,6 +74,9 @@ export interface UseDashboardResult {
     selectedFilter: DashboardFilter | null;
     /** Resolved rows for row-based layout */
     resolvedRows: RowLayout[];
+    resolvedGroups: PortletGroup[];
+    /** Modes the toggle should offer; a subset of allowedModes. */
+    selectableModes: DashboardLayoutMode[];
     /** Current layout mode */
     layoutMode: DashboardLayoutMode;
     /** Allowed layout modes */
@@ -92,6 +98,7 @@ export interface UseDashboardActions {
     openFilterConfig: (portlet: PortletConfig) => void;
     closeFilterConfig: () => void;
     setDraftRows: (rows: RowLayout[] | null) => void;
+    setDraftGroups: (groups: PortletGroup[] | null) => void;
     setIsDraggingPortlet: (isDragging: boolean) => void;
     setLastKnownLayout: (layout: LayoutItem[]) => void;
     setIsInitialized: (initialized: boolean) => void;
@@ -102,6 +109,7 @@ export interface UseDashboardActions {
     } | null) => void;
     clearDragState: () => void;
     hasLayoutActuallyChanged: (newLayout: LayoutItem[]) => boolean;
+    updateLayout: (next: LayoutUpdate, save?: boolean) => Promise<void>;
     updateRowLayout: (rows: RowLayout[], save?: boolean, portletsOverride?: PortletConfig[]) => Promise<void>;
     handleLayoutModeChange: (mode: DashboardLayoutMode) => Promise<void>;
     savePortlet: (portletData: PortletConfig | Omit<PortletConfig, 'id' | 'x' | 'y'>) => Promise<string | null>;
@@ -114,6 +122,11 @@ export interface UseDashboardActions {
     selectAllForFilter: (filterId: string) => Promise<void>;
     saveFilterConfig: (mapping: DashboardFilterMapping) => Promise<void>;
     handlePaletteChange: (paletteName: string) => Promise<void>;
+    snapPortletIntoGroup: (movedPortletId: string, targetPortletId: string, edge: SnapEdge) => Promise<void>;
+    ungroupGroup: (groupId: string) => Promise<void>;
+    deleteGroup: (groupId: string) => void;
+    renameGroup: (groupId: string, title: string) => Promise<void>;
+    openDeleteGroupConfirm: (groupId: string) => void;
     openDeleteConfirm: (portletId: string) => void;
     closeDeleteConfirm: () => void;
     confirmDelete: () => Promise<void>;

package/dist/cjs/client/index.d.ts

@@ -55,7 +55,7 @@ export { useTheme } from './hooks/useTheme.js';
 export { useScrollDetection } from './hooks/useScrollDetection.js';
 export { useElementVisibility } from './hooks/useElementVisibility.js';
 export { useDrillInteraction } from './hooks/useDrillInteraction.js';
-export type { PortletConfig, ChartType, BuiltInChartType, ChartAxisConfig, ChartDisplayConfig, ChartProps, ColorPalette, CubeQuery, CubeQueryOptions, CubeApiOptions, DashboardConfig, FeaturesConfig, XlsExportFeatureConfig, ThumbnailFeatureConfig, MultiQueryConfig, QueryMergeStrategy, FunnelBindingKey, FunnelBindingKeyMapping, FunnelStep, FunnelConfig, FunnelStepResult, FunnelExecutionResult, FunnelChartData, FunnelValidationError, FunnelValidationResult, UseFunnelQueryOptions, UseFunnelQueryResult, ServerFlowQuery, FlowQueryConfig, FlowChartData, FlowSliceState, SankeyNode, SankeyLink, FlowStartingStep, FlowResultRow, } from './types.js';
+export type { PortletConfig, ChartType, BuiltInChartType, ChartAxisConfig, ChartDisplayConfig, ChartProps, ColorPalette, CubeQuery, CubeQueryOptions, CubeApiOptions, DashboardConfig, PortletGroup, PortletGroupCell, FeaturesConfig, XlsExportFeatureConfig, ThumbnailFeatureConfig, MultiQueryConfig, QueryMergeStrategy, FunnelBindingKey, FunnelBindingKeyMapping, FunnelStep, FunnelConfig, FunnelStepResult, FunnelExecutionResult, FunnelChartData, FunnelValidationError, FunnelValidationResult, UseFunnelQueryOptions, UseFunnelQueryResult, ServerFlowQuery, FlowQueryConfig, FlowChartData, FlowSliceState, SankeyNode, SankeyLink, FlowStartingStep, FlowResultRow, } from './types.js';
 export { isQueryConfig, isFunnelConfig, isFlowConfig, isRetentionConfig, isMultiQuery, isSingleQuery, isValidAnalysisConfig, createDefaultQueryConfig, createDefaultFunnelConfig, createDefaultFlowConfig, createDefaultRetentionConfig, createDefaultConfig, isValidAnalysisWorkspace, createDefaultWorkspace } from './types/analysisConfig.js';
 export type { AnalysisConfig, QueryAnalysisConfig, FunnelAnalysisConfig, FlowAnalysisConfig, RetentionAnalysisConfig, AnalysisWorkspace } from './types/analysisConfig.js';
 export { isMultiQueryConfig, isServerFunnelQuery, isServerFlowQuery, isSankeyData } from './types.js';

package/dist/cjs/client/stores/dashboardStore.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { StoreApi } from 'zustand';
 import { LayoutItem } from 'react-grid-layout';
-import { PortletConfig, RowLayout, ChartType, ChartAxisConfig, ChartDisplayConfig, CubeQuery } from '../types.js';
+import { PortletConfig, RowLayout, PortletGroup, ChartType, ChartAxisConfig, ChartDisplayConfig, CubeQuery } from '../types.js';
 import { FlowChartData } from '../types/flow.js';
 import { RetentionChartData } from '../types/retention.js';
 /**
@@ -50,12 +50,16 @@ export interface DashboardStoreState {
     filterConfigPortlet: PortletConfig | null;
     /** Portlet ID pending delete confirmation (null = no confirmation active) */
     deleteConfirmPortletId: string | null;
+    /** Group ID pending delete confirmation (null = no confirmation active) */
+    deleteConfirmGroupId: string | null;
     /** Whether text portlet modal is open */
     isTextModalOpen: boolean;
     /** Portlet being edited in text modal (null = adding new) */
     editingTextPortlet: PortletConfig | null;
     /** Draft row layout during drag operations (rows mode) */
     draftRows: RowLayout[] | null;
+    /** Draft group layout during drag/resize operations (rows mode) */
+    draftGroups: PortletGroup[] | null;
     /** Whether a portlet is currently being dragged */
     isDraggingPortlet: boolean;
     /** Last known layout for change detection */
@@ -95,10 +99,12 @@ export interface DashboardStoreActions {
     closeTextModal: () => void;
     /** Open delete confirmation for a portlet */
     openDeleteConfirm: (portletId: string) => void;
+    openDeleteGroupConfirm: (groupId: string) => void;
     /** Close delete confirmation */
     closeDeleteConfirm: () => void;
     /** Set draft rows during drag operations */
     setDraftRows: (rows: RowLayout[] | null) => void;
+    setDraftGroups: (groups: PortletGroup[] | null) => void;
     /** Set whether a portlet is being dragged */
     setIsDraggingPortlet: (isDragging: boolean) => void;
     /** Set last known layout for change detection */
@@ -206,6 +212,7 @@ export declare const selectModalState: (state: DashboardStore) => {
  */
 export declare const selectLayoutState: (state: DashboardStore) => {
     draftRows: RowLayout[] | null;
+    draftGroups: PortletGroup[] | null;
     isDraggingPortlet: boolean;
     lastKnownLayout: LayoutItem[];
     isInitialized: boolean;
@@ -239,6 +246,7 @@ export declare const selectModalActions: (state: DashboardStore) => {
     openFilterConfigModal: (portlet: PortletConfig) => void;
     closeFilterConfigModal: () => void;
     openDeleteConfirm: (portletId: string) => void;
+    openDeleteGroupConfirm: (groupId: string) => void;
     closeDeleteConfirm: () => void;
 };
 /**
@@ -246,6 +254,7 @@ export declare const selectModalActions: (state: DashboardStore) => {
  */
 export declare const selectLayoutActions: (state: DashboardStore) => {
     setDraftRows: (rows: RowLayout[] | null) => void;
+    setDraftGroups: (groups: PortletGroup[] | null) => void;
     setIsDraggingPortlet: (isDragging: boolean) => void;
     setLastKnownLayout: (layout: LayoutItem[]) => void;
     setIsInitialized: (initialized: boolean) => void;
@@ -278,6 +287,7 @@ export declare const selectAllActions: (state: DashboardStore) => {
     openFilterConfigModal: (portlet: PortletConfig) => void;
     closeFilterConfigModal: () => void;
     openDeleteConfirm: (portletId: string) => void;
+    openDeleteGroupConfirm: (groupId: string) => void;
     closeDeleteConfirm: () => void;
     setDraftRows: (rows: RowLayout[] | null) => void;
     setIsDraggingPortlet: (isDragging: boolean) => void;

package/dist/cjs/client/types.d.ts

@@ -238,8 +238,36 @@ export interface DashboardGridSettings {
     minW: number;
     minH: number;
 }
+/**
+ * One cell along a group's main axis. `portletIds` are stacked perpendicular to
+ * the group's `direction`. Cells share the main axis equally and stacks share
+ * the cross axis equally - a group is an evenly divided frame, with no
+ * per-cell sizing to set or drag.
+ */
+export interface PortletGroupCell {
+    portletIds: string[];
+}
+/**
+ * A "combination portlet": several portlets snapped together so they render
+ * inside one card. Layout-only - the portlets themselves stay flat in
+ * `DashboardConfig.portlets` and are referenced by id from here.
+ *
+ * Depth is deliberately capped at two (cells along one axis, a stack inside
+ * each). Snapping perpendicular onto an already-stacked portlet joins that
+ * stack rather than creating a third level.
+ */
+export interface PortletGroup {
+    id: string;
+    /** When absent or empty, no title bar is rendered. */
+    title?: string;
+    direction: 'row' | 'column';
+    cells: PortletGroupCell[];
+}
 export interface RowLayoutColumn {
-    portletId: string;
+    /** Exactly one of `portletId` / `groupId` is set. */
+    portletId?: string;
+    /** Set when this column hosts a PortletGroup instead of a single portlet. */
+    groupId?: string;
     w: number;
 }
 export interface RowLayout {
@@ -252,6 +280,7 @@ export interface DashboardConfig {
     layoutMode?: DashboardLayoutMode;
     grid?: DashboardGridSettings;
     rows?: RowLayout[];
+    groups?: PortletGroup[];
     layouts?: {
         [key: string]: any;
     };

package/dist/client/charts/chartConfigs.d.ts

@@ -28,7 +28,7 @@ export interface DisplayOptionConfig {
     /** Display label for the option */
     label: string;
     /** Type of input control to render */
-    type: 'boolean' | 'string' | 'number' | 'select' | 'color' | 'paletteColor' | 'axisFormat' | 'stringArray' | 'buttonGroup';
+    type: 'boolean' | 'string' | 'number' | 'select' | 'color' | 'paletteColor' | 'axisFormat' | 'stringArray' | 'buttonGroup' | 'thresholdBands';
     /** Default value for the option */
     defaultValue?: any;
     /** Placeholder text for string/number inputs */

package/dist/client/charts.js

@@ -1,14 +1,14 @@
-import { ct as e, dt as t, ft as n, lt as r, mt as i, pt as a, st as o, t as s, ut as c } from "./chunks/chart-data-table-D6Cu86m_.js";
-import { d as l, l as u, s as d, u as f } from "./chunks/chart-activity-grid-CyVDJSAI.js";
-import { t as p } from "./chunks/chart-funnel-CLRYMbFj.js";
-import { a as m, i as h, n as g, o as _, r as v, s as y, t as b } from "./chunks/charts-loader-FXj1JiQZ.js";
-import { t as x } from "./chunks/chart-area-b5UAS6NZ.js";
+import { ct as e, dt as t, ft as n, lt as r, mt as i, pt as a, st as o, t as s, ut as c } from "./chunks/chart-data-table-DoDHQRe7.js";
+import { d as l, l as u, s as d, u as f } from "./chunks/chart-activity-grid-4jfS8khG.js";
+import { t as p } from "./chunks/chart-funnel-Cd7da_sa.js";
+import { a as m, i as h, n as g, o as _, r as v, s as y, t as b } from "./chunks/charts-loader-CwMcOfwT.js";
+import { t as x } from "./chunks/chart-area-Dol6s9no.js";
 import { i as S } from "./chunks/utils-CToHkuhU.js";
-import { t as C } from "./chunks/chart-bar-aVNonvWw.js";
-import { t as w } from "./chunks/chart-line-BM_DrpQW.js";
-import { t as T } from "./chunks/chart-pie-D7pxCMll.js";
-import { t as E } from "./chunks/chart-scatter-DD5v7r4K.js";
-import { t as D } from "./chunks/chart-radar-sUnyHn3a.js";
-import { t as O } from "./chunks/chart-radial-bar-Df9zbhst.js";
-import { t as k } from "./chunks/chart-tree-map-DK-pNvh4.js";
+import { t as C } from "./chunks/chart-bar-5_niozi2.js";
+import { t as w } from "./chunks/chart-line-DlwOB7C7.js";
+import { t as T } from "./chunks/chart-pie-FGw66XAH.js";
+import { t as E } from "./chunks/chart-scatter-D9EcAiMQ.js";
+import { t as D } from "./chunks/chart-radar-D-eRDoiA.js";
+import { t as O } from "./chunks/chart-radial-bar-DgtkNTs3.js";
+import { t as k } from "./chunks/chart-tree-map-D_ACSSiB.js";
 export { d as CHART_COLORS, u as CHART_MARGINS, s as DataTable, p as FunnelChart, b as LazyChart, f as NEGATIVE_COLOR, l as POSITIVE_COLOR, x as RechartsAreaChart, C as RechartsBarChart, w as RechartsLineChart, T as RechartsPieChart, D as RechartsRadarChart, O as RechartsRadialBarChart, E as RechartsScatterChart, k as RechartsTreeMapChart, o as clearChartConfigCache, S as formatChartData, g as getAvailableChartTypes, e as getChartConfigAsync, r as getChartConfigSync, v as getUnavailableChartTypes, c as isChartConfigLoaded, h as isChartTypeAvailable, m as isValidChartType, t as loadAllChartConfigs, _ as preloadChart, n as preloadChartConfig, a as preloadChartConfigs, y as preloadCharts, i as useChartConfig };