drizzle-cube 0.6.6 → 0.7.0

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

@@ -0,0 +1,23 @@
+import { PortletGroup } from '../../types.js';
+/** Edge of a card a drag can be dropped against. Lives here, not in
+ *  `groupUtils`, so `layoutUtils` can name it without importing back. */
+export type SnapEdge = 'top' | 'right' | 'bottom' | 'left';
+/**
+ * Split `total` integer units across `weights` using largest-remainder, never
+ * handing out less than 1. When `total < weights.length` every entry still gets
+ * 1 and the result overflows - callers accept that rather than dropping a
+ * portlet to zero size.
+ */
+export declare function partitionUnits(total: number, weights: number[]): number[];
+/**
+ * Grid-unit rectangle for every portlet in a group, given the rectangle the
+ * group itself occupies. Written back onto the portlets so grid mode, the
+ * mobile stack and thumbnails keep working without knowing groups exist.
+ */
+export declare function deriveGroupGeometry(group: PortletGroup, x: number, y: number, w: number, h: number): Array<{
+    portletId: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}>;

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

@@ -0,0 +1,57 @@
+import { DashboardGridSettings, PortletConfig, PortletGroup, RowLayout } from '../../types.js';
+import { SnapEdge } from './groupGeometry.js';
+export { deriveGroupGeometry, partitionUnits } from './groupGeometry.js';
+export type { SnapEdge } from './groupGeometry.js';
+export interface GroupLayoutState {
+    rows: RowLayout[];
+    groups: PortletGroup[];
+}
+/** Where a portlet currently lives within the rows/groups structure. */
+export interface PortletLocation {
+    rowIndex: number;
+    colIndex: number;
+    /** Set when the portlet lives inside a group rather than owning its column. */
+    groupId?: string;
+    cellIndex?: number;
+    stackIndex?: number;
+}
+export declare const createGroupId: () => string;
+/** Portlet ids in visual order: cells along the main axis, stacks within each. */
+export declare const groupPortletIds: (group: PortletGroup) => string[];
+/** Locate a portlet across rows and groups. Returns null when it is unplaced. */
+export declare function findPortletLocation(rows: RowLayout[], groups: PortletGroup[], portletId: string): PortletLocation | null;
+/** Remove a portlet from whichever group holds it. Empty cells/groups are pruned. */
+export declare function removeFromGroup(groups: PortletGroup[], portletId: string): {
+    groups: PortletGroup[];
+    groupId: string | null;
+};
+/**
+ * Reconcile groups against the portlets that exist and the rows that host them.
+ *
+ * Returns rows as well as groups, because the two are coupled: collapsing a
+ * one-portlet group has to rewrite its column back to a plain `portletId`, and
+ * pruning a group has to remove its column. **Always run this before
+ * `normalizeRows`** - otherwise `normalizeRows` sees a `groupId` column whose
+ * group has just been emptied and renders a blank card.
+ */
+export declare function normalizeGroups(groups: PortletGroup[] | undefined, portlets: PortletConfig[], rows: RowLayout[], gridSettings: DashboardGridSettings): GroupLayoutState;
+/**
+ * Snap `movedPortletId` against an edge of `targetPortletId`.
+ *
+ * Left/right build a `row` group, top/bottom a `column` group. When the target
+ * is already grouped, a snap along the group's main axis adds a cell, and a
+ * perpendicular snap joins the target's stack (the depth-2 clamp).
+ *
+ * Returns null when the move is a no-op.
+ */
+export declare function snapIntoGroup(state: GroupLayoutState, movedPortletId: string, targetPortletId: string, edge: SnapEdge, gridSettings: DashboardGridSettings): GroupLayoutState | null;
+/**
+ * Dissolve a group, replacing its column with one column per member portlet in
+ * visual order. The row is re-equalised afterwards.
+ */
+export declare function ungroup(state: GroupLayoutState, groupId: string, gridSettings: DashboardGridSettings): GroupLayoutState;
+/** Remove a group and every portlet id it holds. Callers delete the portlets. */
+export declare function deleteGroup(state: GroupLayoutState, groupId: string, gridSettings: DashboardGridSettings): {
+    state: GroupLayoutState;
+    removedPortletIds: string[];
+};

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

@@ -1,7 +1,38 @@
-import { DashboardGridSettings, PortletConfig, RowLayout, RowLayoutColumn } from '../../types.js';
+import { DashboardGridSettings, PortletConfig, PortletGroup, RowLayout, RowLayoutColumn } from '../../types.js';
 export declare const createRowId: () => string;
+/**
+ * Correct a row insertion index for a source row that the move emptied.
+ *
+ * Splicing the source row out shifts every later index up by one, so an
+ * unadjusted index lands the row one position too low. `handleRowDrop` has
+ * always done this for column moves; new-row drops need it too, and hit it more
+ * often, because a group is usually the only column in its row.
+ */
+export declare const adjustInsertIndexForRemovedRow: (insertIndex: number, sourceRowIndex: number, sourceRowRemoved: boolean) => number;
+/**
+ * Distribute `cols` evenly across the given columns, preserving each column's
+ * identity (`portletId` **or** `groupId`) so re-equalisation never drops a group
+ * reference. This is the function to use; `equalizeRowColumns` below is the
+ * legacy id-only wrapper.
+ */
+export declare const equalizeColumns: (columns: RowLayoutColumn[], gridSettings: DashboardGridSettings) => RowLayoutColumn[];
+/**
+ * @deprecated Loses `groupId`. Use {@link equalizeColumns} with the real columns.
+ */
 export declare const equalizeRowColumns: (portletIds: string[], gridSettings: DashboardGridSettings) => RowLayoutColumn[];
 export declare const adjustRowWidths: (columns: RowLayoutColumn[], gridSettings: DashboardGridSettings) => RowLayoutColumn[];
 export declare const convertPortletsToRows: (portlets: PortletConfig[], gridSettings: DashboardGridSettings) => RowLayout[];
-export declare const normalizeRows: (rows: RowLayout[], portlets: PortletConfig[], gridSettings: DashboardGridSettings) => RowLayout[];
-export declare const convertRowsToPortlets: (rows: RowLayout[], portlets: PortletConfig[]) => PortletConfig[];
+/**
+ * Drop columns whose target no longer exists, clamp row height, re-balance
+ * widths. `groups` must be the already-normalized group list - a column
+ * referencing a group is kept only when that group survives, so run
+ * `normalizeGroups` first.
+ */
+export declare const normalizeRows: (rows: RowLayout[], portlets: PortletConfig[], gridSettings: DashboardGridSettings, groups?: PortletGroup[]) => RowLayout[];
+/**
+ * Re-derive every portlet's x/y/w/h from the row layout. Group columns are
+ * subdivided via `deriveGroupGeometry`, so grouped children get real grid
+ * coordinates too - that is what keeps grid mode, the mobile stack and
+ * thumbnails working without any knowledge of groups.
+ */
+export declare const convertRowsToPortlets: (rows: RowLayout[], portlets: PortletConfig[], groups?: PortletGroup[]) => PortletConfig[];

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/icons/types.d.ts

@@ -94,6 +94,7 @@ export interface IconRegistry {
     chartWaterfall: IconDefinition;
     chartCandlestick: IconDefinition;
     chartMeasureProfile: IconDefinition;
+    chartProportionBar: IconDefinition;
     chartGauge: IconDefinition;
     measureCount: IconDefinition;
     measureCountDistinct: IconDefinition;

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

@@ -71,7 +71,7 @@ export interface CubeMeta {
 }
 export type FieldLabelMap = Record<string, string>;
 export type { ColorPalette } from './utils/colorPalettes.js';
-export type BuiltInChartType = 'line' | 'bar' | 'pie' | 'table' | 'area' | 'scatter' | 'radar' | 'radialBar' | 'treemap' | 'bubble' | 'activityGrid' | 'kpiNumber' | 'kpiDelta' | 'kpiText' | 'markdown' | 'funnel' | 'sankey' | 'sunburst' | 'heatmap' | 'retentionHeatmap' | 'retentionCombined' | 'boxPlot' | 'waterfall' | 'candlestick' | 'measureProfile' | 'gauge';
+export type BuiltInChartType = 'line' | 'bar' | 'pie' | 'table' | 'area' | 'scatter' | 'radar' | 'radialBar' | 'treemap' | 'bubble' | 'activityGrid' | 'kpiNumber' | 'kpiDelta' | 'kpiText' | 'markdown' | 'funnel' | 'sankey' | 'sunburst' | 'heatmap' | 'retentionHeatmap' | 'retentionCombined' | 'boxPlot' | 'waterfall' | 'candlestick' | 'proportionBar' | 'measureProfile' | 'gauge';
 export type ChartType = BuiltInChartType | (string & {});
 export interface AxisFormatConfig {
     label?: string;
@@ -106,6 +106,8 @@ export interface ChartDisplayConfig {
     stacked?: boolean;
     stackType?: 'none' | 'normal' | 'percent';
     connectNulls?: boolean;
+    showSummary?: boolean;
+    showPoints?: boolean;
     showAllXLabels?: boolean;
     hideHeader?: boolean;
     innerRadius?: string;
@@ -113,6 +115,8 @@ export interface ChartDisplayConfig {
     maxBubbleSize?: number;
     bubbleOpacity?: number;
     showLabels?: boolean;
+    showPercentages?: boolean;
+    sortSegments?: boolean;
     fitToWidth?: boolean;
     pivotTimeDimension?: boolean;
     target?: string;
@@ -123,9 +127,11 @@ export interface ChartDisplayConfig {
     formatValue?: (value: number | null | undefined) => string;
     valueColor?: string;
     valueColorIndex?: number;
+    layout?: 'auto' | 'compact';
     positiveColorIndex?: number;
     negativeColorIndex?: number;
     showHistogram?: boolean;
+    showBaseline?: boolean;
     useLastCompletePeriod?: boolean;
     skipLastPeriod?: boolean;
     content?: string;
@@ -232,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 {
@@ -246,6 +280,7 @@ export interface DashboardConfig {
     layoutMode?: DashboardLayoutMode;
     grid?: DashboardGridSettings;
     rows?: RowLayout[];
+    groups?: PortletGroup[];
     layouts?: {
         [key: string]: any;
     };

package/dist/cli/index.cjs

@@ -16,7 +16,7 @@ var __copyProps = (to, from, except, desc) => {
 	}
 	return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
 	value: mod,
 	enumerable: true
 }) : target, mod));
@@ -417,9 +417,10 @@ var { positionals } = (0, node_util.parseArgs)({
 	strict: false
 });
 var [command, subcommand] = positionals;
-if (command === "charts") if (subcommand === "init") chartsInit();
-else if (subcommand === "list") chartsList();
-else console.log(`
+if (command === "charts") {
+	if (subcommand === "init") chartsInit();
+	else if (subcommand === "list") chartsList();
+	else console.log(`
 drizzle-cube charts
 
 Commands:
@@ -428,7 +429,7 @@ Commands:
   drizzle-cube charts init -o <dir>    Set output directory (default: ./src/charts)
   drizzle-cube charts list             List available built-in chart types
 `);
-else console.log(`
+} else console.log(`
 drizzle-cube CLI
 
 Commands:

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

@@ -36,3 +36,23 @@ export declare function valueFormatDisplayOption(description?: string): DisplayO
  * per chart (bar vs area series wording).
  */
 export declare function stackTypeDisplayOption(description: string): DisplayOptionConfig;
+/**
+ * Layout density for the KPI charts.
+ *
+ * `auto` keeps the historic behaviour, where the value's font size is derived
+ * from the portlet box — which makes a wide portlet render an enormous number.
+ * `compact` uses a fixed type scale so several KPIs read as a tidy metric strip.
+ */
+export declare const kpiLayoutDisplayOption: DisplayOptionConfig;
+/**
+ * Summary-band toggle for the time-series charts.
+ *
+ * Renders each series' latest value and its change since the start of the
+ * window above the plot, so the chart is readable without hovering.
+ */
+export declare const showSummaryDisplayOption: DisplayOptionConfig;
+/**
+ * Data-point marker toggle for the time-series charts. Dense series (hundreds
+ * of points) read far better without a marker on every one.
+ */
+export declare function showPointsDisplayOption(defaultValue?: boolean): DisplayOptionConfig;

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-BP6DMdom.js";
-import { d as l, l as u, s as d, u as f } from "./chunks/chart-activity-grid-DDqFVWoa.js";
-import { t as p } from "./chunks/chart-funnel-xeVGBy-p.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-DAJbAD7a.js";
-import { t as x } from "./chunks/chart-area-BHxPNsmc.js";
-import { i as S } from "./chunks/utils-DjLiJKS_.js";
-import { t as C } from "./chunks/chart-bar-DAO3PPcE.js";
-import { t as w } from "./chunks/chart-line-sJK-cJc0.js";
-import { t as T } from "./chunks/chart-pie-BDaaYt7a.js";
-import { t as E } from "./chunks/chart-scatter-CRhGLCcy.js";
-import { t as D } from "./chunks/chart-radar-Bz07PIVe.js";
-import { t as O } from "./chunks/chart-radial-bar-DpyxKQMj.js";
-import { t as k } from "./chunks/chart-tree-map-iI3ewOKY.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-SNSqZj9B.js";
+import { d as l, l as u, s as d, u as f } from "./chunks/chart-activity-grid-DVOhLgxv.js";
+import { t as p } from "./chunks/chart-funnel-CkHSXp6h.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-0avVzeDd.js";
+import { t as x } from "./chunks/chart-area-C-5ATxvi.js";
+import { i as S } from "./chunks/utils-CToHkuhU.js";
+import { t as C } from "./chunks/chart-bar-CPiLaXHP.js";
+import { t as w } from "./chunks/chart-line-CzvVL3Be.js";
+import { t as T } from "./chunks/chart-pie-CwRfwWWZ.js";
+import { t as E } from "./chunks/chart-scatter-BtLfAsZb.js";
+import { t as D } from "./chunks/chart-radar-Dfql2E7i.js";
+import { t as O } from "./chunks/chart-radial-bar-oE9OZ1IX.js";
+import { t as k } from "./chunks/chart-tree-map-DU5M3-qe.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 };