drizzle-cube 0.6.7 → 0.7.0

package/dist/adapters/{utils-G52pPkce.js → utils-tjiwXFnP.js}

@@ -1439,11 +1439,29 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 	"dashboard.deletePortletConfirm": "Are you sure you want to delete",
 	"dashboard.deletePortletSuffix": "? This action cannot be undone.",
 	"dashboard.thisPortlet": "this portlet",
+	"dashboard.portlet.action.edit": "Edit portlet",
+	"dashboard.portlet.action.duplicate": "Duplicate portlet",
+	"dashboard.portlet.action.delete": "Delete portlet",
+	"dashboard.portlet.action.refresh": "Refresh portlet",
+	"dashboard.portlet.action.drag": "Drag portlet",
+	"dashboard.portlet.action.filterConfig": "Configure dashboard filters",
+	"dashboard.portlet.action.filterConfigActive": "Configure dashboard filters ({count} active)",
+	"dashboard.group.rename": "Rename group",
+	"dashboard.group.drag": "Drag group",
+	"dashboard.group.titlePlaceholder": "Group title",
+	"dashboard.group.ungroup": "Ungroup",
+	"dashboard.group.delete": "Delete group",
+	"dashboard.group.deleteTitle": "Delete Group",
+	"dashboard.group.deleteConfirm": "Are you sure you want to delete this group and all {count} portlets inside it? This action cannot be undone.",
 	"dashboard.editModal.dashboardName": "Dashboard Name",
 	"dashboard.editModal.enterDashboardName": "Enter dashboard name...",
 	"dashboard.editModal.descriptionOptional": "Description (optional)",
 	"dashboard.editModal.enterDescription": "Enter description...",
 	"portlet.configRequired": "Configuration Required",
+	"portlet.copyToClipboard": "Copy chart to clipboard",
+	"portlet.copied": "Copied!",
+	"portlet.downloadXlsx": "Download data as XLSX",
+	"portlet.exporting": "Exporting...",
 	"portlet.configRequiredHint": "Please configure this chart",
 	"portlet.queryError": "Query Error",
 	"portlet.queryWithFilters": "Query (with filters applied)",

package/dist/adapters/utils.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./utils-DJ0_72_G.cjs");exports.buildTransformedQuery=e.t,exports.calculateQueryComplexity=e.n,exports.formatCubeResponse=e.r,exports.formatErrorResponse=e.i,exports.formatMetaResponse=e.a,exports.formatSqlResponse=e.o,exports.formatSqlString=e.S,exports.generateRequestId=e.s,exports.getDatabaseType=e.c,exports.handleBatchRequest=e.l,exports.handleDiscover=e.p,exports.handleDryRun=e.u,exports.handleLoad=e.m,exports.handleSuggest=e.d,exports.handleValidate=e.f,exports.normalizeQueryFields=e.h;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./utils-C5FLHK04.cjs");exports.buildTransformedQuery=e.t,exports.calculateQueryComplexity=e.n,exports.formatCubeResponse=e.r,exports.formatErrorResponse=e.i,exports.formatMetaResponse=e.a,exports.formatSqlResponse=e.o,exports.formatSqlString=e.S,exports.generateRequestId=e.s,exports.getDatabaseType=e.c,exports.handleBatchRequest=e.l,exports.handleDiscover=e.p,exports.handleDryRun=e.u,exports.handleLoad=e.m,exports.handleSuggest=e.d,exports.handleValidate=e.f,exports.normalizeQueryFields=e.h;

package/dist/adapters/utils.js

@@ -1,2 +1,2 @@
-import { S as e, a as t, c as n, d as r, f as i, h as a, i as o, l as s, m as c, n as l, o as u, p as d, r as f, s as p, t as m, u as h } from "./utils-G52pPkce.js";
+import { S as e, a as t, c as n, d as r, f as i, h as a, i as o, l as s, m as c, n as l, o as u, p as d, r as f, s as p, t as m, u as h } from "./utils-tjiwXFnP.js";
 export { m as buildTransformedQuery, l as calculateQueryComplexity, f as formatCubeResponse, o as formatErrorResponse, t as formatMetaResponse, u as formatSqlResponse, e as formatSqlString, p as generateRequestId, n as getDatabaseType, s as handleBatchRequest, d as handleDiscover, h as handleDryRun, c as handleLoad, r as handleSuggest, i as handleValidate, a as normalizeQueryFields };

package/dist/cjs/client/components/DashboardPortletCard.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { DashboardPortletCardProps } from './dashboardPortletCard/propsEqual.js';
-declare const DashboardPortletCard: React.MemoExoticComponent<({ portlet, editable, layoutMode, dashboardFilters, configEagerLoad, loadingComponent, colorPalette, containerProps, headerProps, setPortletRef, setPortletComponentRef, callbacks, icons }: DashboardPortletCardProps) => React.JSX.Element>;
+declare const DashboardPortletCard: React.MemoExoticComponent<({ portlet, editable, layoutMode, dashboardFilters, configEagerLoad, loadingComponent, colorPalette, containerProps, headerProps, variant, setPortletRef, setPortletComponentRef, callbacks, icons }: DashboardPortletCardProps) => React.JSX.Element>;
 export default DashboardPortletCard;

package/dist/cjs/client/components/PortletGroupCard.d.ts

@@ -0,0 +1,18 @@
+import { DragEvent, HTMLAttributes, ReactNode } from 'react';
+import { PortletConfig, PortletGroup } from '../types.js';
+export interface PortletGroupCardProps {
+    group: PortletGroup;
+    portlets: Map<string, PortletConfig>;
+    canEdit: boolean;
+    /** Renders one child portlet with group chrome (no border, no header). */
+    renderChild: (portlet: PortletConfig, wrapperProps: HTMLAttributes<HTMLDivElement>) => ReactNode;
+    onRename: (groupId: string, title: string) => void;
+    onUngroup: (groupId: string) => void;
+    onDelete: (groupId: string) => void;
+    /** Fired when a child starts being dragged out of, or around within, the group. */
+    onChildDragStart: (groupId: string, portletId: string, event: DragEvent<HTMLDivElement>) => void;
+    onChildDragEnd: () => void;
+    /** Snap bands rendered inside each child; supplied by the row layout. */
+    renderSnapBands?: (portletId: string) => ReactNode;
+}
+export default function PortletGroupCard({ group, portlets, canEdit, renderChild, onRename, onUngroup, onDelete, onChildDragStart, onChildDragEnd, renderSnapBands }: PortletGroupCardProps): import("react").JSX.Element;

package/dist/cjs/client/components/RowManagedLayout.d.ts

@@ -1,19 +1,31 @@
 import { HTMLAttributes, ReactNode, MouseEvent, DragEvent } from 'react';
-import { DashboardGridSettings, PortletConfig, RowLayout } from '../types.js';
+import { DashboardGridSettings, PortletConfig, PortletGroup, RowLayout } from '../types.js';
+import { SnapEdge } from '../hooks/dashboard/groupUtils.js';
 interface RowManagedLayoutProps {
     rows: RowLayout[];
     portlets: PortletConfig[];
+    groups?: PortletGroup[];
     gridSettings: DashboardGridSettings;
     gridWidth: number;
     canEdit: boolean;
     isDragging: boolean;
     onRowResize: (rowIndex: number, event: MouseEvent<HTMLDivElement>) => void;
     onColumnResize: (rowIndex: number, columnIndex: number, event: MouseEvent<HTMLDivElement>) => void;
-    onPortletDragStart: (rowIndex: number, columnIndex: number, portletId: string, event: DragEvent<HTMLDivElement>) => void;
+    onPortletDragStart: (rowIndex: number, columnIndex: number, portletId: string, event: DragEvent<HTMLDivElement>, 
+    /** Set when the whole column is a group being moved, not a single portlet. */
+    groupId?: string) => void;
     onPortletDragEnd: () => void;
     onRowDrop: (rowIndex: number, insertIndex: number | null) => void;
     onNewRowDrop: (insertIndex: number) => void;
+    /** Snap the dragged portlet against `edge` of `targetPortletId`. */
+    onSnapDrop?: (targetPortletId: string, edge: SnapEdge) => void;
+    /** Id of the portlet currently being dragged, so it can ignore its own bands. */
+    draggingPortletId?: string | null;
+    /** Id of the group currently being dragged, so its members ignore their bands. */
+    draggingGroupId?: string | null;
     renderPortlet: (portlet: PortletConfig, containerProps?: HTMLAttributes<HTMLDivElement>, headerProps?: HTMLAttributes<HTMLDivElement>) => ReactNode;
+    /** Renders a group column. Omitted in contexts that have no groups. */
+    renderGroup?: (group: PortletGroup, renderSnapBands: (portletId: string) => ReactNode) => ReactNode;
 }
-export default function RowManagedLayout({ rows, portlets, gridSettings, gridWidth, canEdit, isDragging, onRowResize, onColumnResize, onPortletDragStart, onPortletDragEnd, onRowDrop, onNewRowDrop, renderPortlet }: RowManagedLayoutProps): import("react").JSX.Element;
+export default function RowManagedLayout({ rows, portlets, groups, gridSettings, gridWidth, canEdit, isDragging, onRowResize, onColumnResize, onPortletDragStart, onPortletDragEnd, onRowDrop, onNewRowDrop, onSnapDrop, draggingPortletId, draggingGroupId, renderPortlet, renderGroup }: RowManagedLayoutProps): import("react").JSX.Element;
 export {};

package/dist/cjs/client/components/dashboard/DashboardContext.d.ts

@@ -3,7 +3,7 @@ import { LayoutItem, Layout } from 'react-grid-layout';
 import { UseDashboardActions } from '../../hooks/useDashboardHook.js';
 import { DashboardDisplayMode } from '../../hooks/useResponsiveDashboard.js';
 import { ColorPalette } from '../../utils/colorPalettes.js';
-import { DashboardConfig, PortletConfig, DashboardFilter, DashboardFilterMapping, CubeMeta, DashboardLayoutMode, DashboardGridSettings, RowLayout, FeaturesConfig } from '../../types.js';
+import { DashboardConfig, PortletConfig, DashboardFilter, DashboardFilterMapping, CubeMeta, DashboardLayoutMode, DashboardGridSettings, RowLayout, PortletGroup, FeaturesConfig } from '../../types.js';
 /**
  * Props accepted by DashboardProvider (the public composable entry point).
  * Mirrors the former DashboardGridProps plus `hideToolbar` and `children`.
@@ -55,6 +55,7 @@ export interface DashboardContextValue {
     isFilterConfigModalOpen: boolean;
     filterConfigPortlet: PortletConfig | null;
     deleteConfirmPortletId: string | null;
+    deleteConfirmGroupId: string | null;
     draftRows: RowLayout[] | null;
     isDraggingPortlet: boolean;
     isInitialized: boolean;
@@ -62,8 +63,11 @@ export interface DashboardContextValue {
     canChangeLayoutMode: boolean;
     selectedFilter: DashboardFilter | null;
     resolvedRows: RowLayout[];
+    resolvedGroups: PortletGroup[];
     layoutMode: DashboardLayoutMode;
     allowedModes: DashboardLayoutMode[];
+    /** Modes the toggle should offer; a subset of allowedModes. */
+    selectableModes: DashboardLayoutMode[];
     actions: UseDashboardActions;
     displayMode: DashboardDisplayMode;
     scaleFactor: number;

package/dist/cjs/client/components/dashboard/dashboardGridUtils.d.ts

@@ -1,10 +1,8 @@
 import { CSSProperties } from 'react';
-import { DashboardConfig, DashboardGridSettings, RowLayoutColumn } from '../../types.js';
+import { DashboardConfig, DashboardGridSettings } from '../../types.js';
 export declare const DEFAULT_GRID_SETTINGS: DashboardGridSettings;
-export declare const createRowId: () => string;
+export { createRowId, equalizeRowColumns, equalizeColumns, adjustRowWidths, adjustInsertIndexForRemovedRow } from '../../hooks/dashboard/layoutUtils.js';
 export declare const getGridSettings: (config: DashboardConfig) => DashboardGridSettings;
-export declare const equalizeRowColumns: (portletIds: string[], gridSettings: DashboardGridSettings) => RowLayoutColumn[];
-export declare const adjustRowWidths: (columns: RowLayoutColumn[], gridSettings: DashboardGridSettings) => RowLayoutColumn[];
 /**
  * Finds the nearest scrollable ancestor of an element.
  * Used to detect scroll container for lazy loading IntersectionObserver.

package/dist/cjs/client/components/dashboardPortletCard/EditActionButtons.d.ts

@@ -0,0 +1,34 @@
+import { default as React, CSSProperties, ComponentType } from 'react';
+import { PortletConfig } from '../../types.js';
+export declare const ICON_STYLE: CSSProperties;
+export interface CardIcons {
+    RefreshIcon: ComponentType<{
+        className?: string;
+        style?: CSSProperties;
+    }>;
+    EditIcon: ComponentType<{
+        className?: string;
+        style?: CSSProperties;
+    }>;
+    DeleteIcon: ComponentType<{
+        className?: string;
+        style?: CSSProperties;
+    }>;
+    CopyIcon: ComponentType<{
+        className?: string;
+        style?: CSSProperties;
+    }>;
+    FilterIcon: ComponentType<{
+        className?: string;
+        style?: CSSProperties;
+    }>;
+}
+export interface EditActionButtonsProps {
+    portlet: PortletConfig;
+    icons: CardIcons;
+    onOpenFilterConfig: () => void;
+    onDuplicate: () => void;
+    onEdit: () => void;
+    onDelete: () => void;
+}
+export default function EditActionButtons({ portlet, icons, onOpenFilterConfig, onDuplicate, onEdit, onDelete }: EditActionButtonsProps): React.JSX.Element;

package/dist/cjs/client/components/dashboardPortletCard/PortletCardHeader.d.ts

@@ -1,17 +1,7 @@
-import { default as React, CSSProperties, ComponentType } from 'react';
+import { default as React, CSSProperties } from 'react';
 import { PortletConfig } from '../../types.js';
 import { PortletDebugDataEntry } from '../../stores/dashboardStore.js';
-type IconComponent = ComponentType<{
-    className?: string;
-    style?: CSSProperties;
-}>;
-interface CardIcons {
-    RefreshIcon: IconComponent;
-    EditIcon: IconComponent;
-    DeleteIcon: IconComponent;
-    CopyIcon: IconComponent;
-    FilterIcon: IconComponent;
-}
+import { CardIcons } from './EditActionButtons.js';
 interface PortletCardHeaderProps {
     portlet: PortletConfig;
     className: string;

package/dist/cjs/client/components/dashboardPortletCard/PortletFloatingActions.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+import { PortletConfig } from '../../types.js';
+import { CardIcons } from './EditActionButtons.js';
+interface PortletFloatingActionsProps {
+    portlet: PortletConfig;
+    icons: CardIcons;
+    /** Show the edit-only actions (drag, filter config, duplicate, edit, delete). */
+    showEditActions: boolean;
+    copyAvailable: boolean;
+    copySuccess: boolean;
+    xlsExportAvailable: boolean;
+    exportInProgress: boolean;
+    onRefresh: (options?: {
+        bustCache?: boolean;
+    }) => void;
+    onCopyToClipboard: (event: React.MouseEvent | React.TouchEvent) => void;
+    onExportXlsx: (event: React.MouseEvent | React.TouchEvent) => void;
+    onOpenFilterConfig: () => void;
+    onDuplicate: () => void;
+    onEdit: () => void;
+    onDelete: () => void;
+}
+export default function PortletFloatingActions({ portlet, icons, showEditActions, copyAvailable, copySuccess, xlsExportAvailable, exportInProgress, onRefresh, onCopyToClipboard, onExportXlsx, onOpenFilterConfig, onDuplicate, onEdit, onDelete }: PortletFloatingActionsProps): React.JSX.Element;
+export {};

package/dist/cjs/client/components/dashboardPortletCard/cardStyles.d.ts

@@ -1,5 +1,7 @@
 import { CSSProperties } from 'react';
 import { ChartType, ChartDisplayConfig } from '../../types.js';
+/** How much chrome a card draws. Group children are frameless and headerless. */
+export type PortletCardVariant = 'standalone' | 'groupChild';
 export interface PortletDisplayModes {
     isMarkdownAutoHeight: boolean;
     isTransparentContent: boolean;
@@ -17,12 +19,14 @@ export declare function resolveDisplayModes(params: {
     layoutMode: string;
     isEditMode: boolean;
     portletTitle?: string;
+    variant?: PortletCardVariant;
 }): PortletDisplayModes;
 export declare function buildContainerClassName(params: {
     isTransparent: boolean;
     isMarkdownAutoHeight: boolean;
     isInSelectionMode: boolean;
     extraClassName?: string;
+    variant?: PortletCardVariant;
 }): string;
 export declare function buildHeaderClassName(isEditMode: boolean, extraClassName?: string): string;
 export declare function buildContainerStyle(params: {
@@ -30,4 +34,5 @@ export declare function buildContainerStyle(params: {
     isInSelectionMode: boolean;
     hasSelectedFilter: boolean;
     containerStyle?: CSSProperties;
+    variant?: PortletCardVariant;
 }): CSSProperties;

package/dist/cjs/client/components/dashboardPortletCard/propsEqual.d.ts

@@ -1,10 +1,12 @@
 import { HTMLAttributes, ReactNode, ComponentType, CSSProperties } from 'react';
 import { ChartType, DashboardFilter, DashboardLayoutMode, PortletConfig } from '../../types.js';
+import { PortletCardVariant } from './cardStyles.js';
 import { ColorPalette } from '../../utils/colorPalettes.js';
 export interface DashboardPortletCardProps {
     portlet: PortletConfig;
     editable: boolean;
     layoutMode?: DashboardLayoutMode;
+    variant?: PortletCardVariant;
     dashboardFilters?: DashboardFilter[];
     configEagerLoad?: boolean;
     loadingComponent?: ReactNode;

package/dist/cjs/client/components/mobileStackedLayout/memberDisplay.d.ts

@@ -0,0 +1,21 @@
+import { ChartAxisConfig, ChartDisplayConfig, ChartType, PortletConfig } from '../../types.js';
+export interface MobilePortletDisplay {
+    query: string;
+    chartType: ChartType;
+    chartConfig?: ChartAxisConfig;
+    displayConfig?: ChartDisplayConfig;
+    isTransparent: boolean;
+    isAutoHeight: boolean;
+    shouldHideHeader: boolean;
+    /** Outer height in px; `isAutoHeight` callers ignore it. */
+    height: number;
+    /** Height available to the chart once header and padding are removed. */
+    contentHeight: number;
+}
+export declare function resolveMobilePortletDisplay(params: {
+    portlet: PortletConfig;
+    /** False for a portlet inside a group card, which supplies its own frame. */
+    framed: boolean;
+    /** How many portlets share the group card, so its height can be shared out. */
+    memberCount: number;
+}): MobilePortletDisplay;

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

@@ -14,4 +14,4 @@ export { default as DashboardEditModal } from './components/DashboardEditModal.j
 export { default as Modal } from './components/Modal.js';
 export { default as AnalysisDisplayConfigPanel } from './components/AnalysisBuilder/AnalysisDisplayConfigPanel.js';
 export { createDashboardLayout, generateResponsiveLayouts, generatePortletId, findNextPosition, validateCubeQuery, createSamplePortlet } from './utils/index.js';
-export type { PortletConfig, DashboardConfig } from './types.js';
+export type { PortletConfig, DashboardConfig, PortletGroup, PortletGroupCell } from './types.js';

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/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';