drizzle-cube 0.6.6 → 0.7.0

package/dist/client/components/charts/ActivityGridChart.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { ChartProps } from '../../types.js';
-declare const ActivityGridChart: React.NamedExoticComponent<ChartProps>;
+declare const ActivityGridChart: React.MemoExoticComponent<({ data, chartConfig, displayConfig, queryObject, height, colorPalette, onDataPointClick, drillEnabled }: ChartProps) => React.JSX.Element>;
 export default ActivityGridChart;

package/dist/client/components/charts/AngledXAxisTick.d.ts

@@ -10,6 +10,11 @@ interface AngledXAxisTickProps {
     visibleTicksCount?: number;
     [key: string]: unknown;
 }
+/**
+ * Longest label the angled axis reserves room for; see
+ * MAX_ANGLED_AXIS_HEIGHT in chartScaffolding.
+ */
+export declare const MAX_TICK_LABEL_CHARS = 16;
 /**
  * Custom XAxis tick component for properly aligned angled labels.
  * Fixes alignment issues in recharts 3.7+ where angled labels don't

package/dist/client/components/charts/AreaChart.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { ChartProps } from '../../types.js';
-declare const AreaChart: React.NamedExoticComponent<ChartProps>;
+declare const AreaChart: React.MemoExoticComponent<({ data, chartConfig, displayConfig, queryObject, height, colorPalette, onDataPointClick, drillEnabled }: ChartProps) => React.JSX.Element>;
 export default AreaChart;

package/dist/client/components/charts/BarChart.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { ChartProps } from '../../types.js';
-declare const BarChart: React.NamedExoticComponent<ChartProps>;
+declare const BarChart: React.MemoExoticComponent<({ data, chartConfig, displayConfig, queryObject, height, colorPalette, onDataPointClick, drillEnabled }: ChartProps) => React.JSX.Element>;
 export default BarChart;

package/dist/client/components/charts/BoxPlotChart.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { ChartProps } from '../../types.js';
-declare const BoxPlotChart: React.NamedExoticComponent<ChartProps>;
+declare const BoxPlotChart: React.MemoExoticComponent<({ data, chartConfig, displayConfig, height, colorPalette, onDataPointClick, drillEnabled, }: ChartProps) => React.JSX.Element>;
 export default BoxPlotChart;

package/dist/client/components/charts/BubbleChart.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { ChartProps } from '../../types.js';
-declare const BubbleChart: React.NamedExoticComponent<ChartProps>;
+declare const BubbleChart: React.MemoExoticComponent<({ data, chartConfig, displayConfig, queryObject, height, colorPalette }: ChartProps) => React.JSX.Element>;
 export default BubbleChart;

package/dist/client/components/charts/CandlestickChart.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { ChartProps } from '../../types.js';
-declare const CandlestickChart: React.NamedExoticComponent<ChartProps>;
+declare const CandlestickChart: React.MemoExoticComponent<({ data, chartConfig, displayConfig, height, onDataPointClick, drillEnabled, }: ChartProps) => React.JSX.Element>;
 export default CandlestickChart;

package/dist/client/components/charts/ChartContainer.d.ts

@@ -2,6 +2,12 @@ import { ReactElement } from 'react';
 interface ChartContainerProps {
     children: ReactElement;
     height?: string | number;
+    /**
+     * Override the default minimum height. Charts that share their portlet with
+     * another element - a wrapped summary header, say - need the plot to shrink
+     * rather than push past the card.
+     */
+    minHeight?: string | number;
 }
-export default function ChartContainer({ children, height }: ChartContainerProps): import("react").JSX.Element;
+export default function ChartContainer({ children, height, minHeight }: ChartContainerProps): import("react").JSX.Element;
 export {};

package/dist/client/components/charts/ChartSummaryHeader.d.ts

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+import { SeriesSummary } from './cartesianChartHelpers.js';
+import { AxisFormatConfig } from '../../types.js';
+interface ChartSummaryHeaderProps {
+    summaries: SeriesSummary[];
+    /** Resolves a series key to its display label. */
+    getSeriesLabel: (seriesKey: string) => string;
+    /** Left-axis numeric format, so the header matches the axis it summarises. */
+    valueFormat?: AxisFormatConfig;
+    /** Right-axis format, used for series assigned to the right axis. */
+    rightValueFormat?: AxisFormatConfig;
+    /**
+     * Whether a change vs. the start of the window is meaningful. False for a
+     * categorical x-axis, where "first" and "last" are arbitrary categories.
+     */
+    showChange?: boolean;
+    /**
+     * Distance from the container's left edge to the plot area, so the summary
+     * lines up with the first data point rather than the card edge.
+     */
+    leftOffset?: number;
+}
+/**
+ * Summary band rendered above a time-series plot.
+ *
+ * Shows each series' latest value and how far it has moved since the start of
+ * the window, so the chart is readable without hovering. All values are derived
+ * from the already-fetched result set — this issues no queries of its own.
+ */
+declare const ChartSummaryHeader: React.MemoExoticComponent<({ summaries, getSeriesLabel, valueFormat, rightValueFormat, showChange, leftOffset }: ChartSummaryHeaderProps) => React.JSX.Element | null>;
+export default ChartSummaryHeader;

package/dist/client/components/charts/DataTable.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { ChartProps } from '../../types.js';
-declare const DataTable: React.NamedExoticComponent<ChartProps>;
+declare const DataTable: React.MemoExoticComponent<({ data, chartConfig, displayConfig, queryObject, height }: ChartProps) => React.JSX.Element>;
 export default DataTable;

package/dist/client/components/charts/FunnelChart.d.ts

@@ -7,5 +7,5 @@ import { ChartProps } from '../../types.js';
  * Shows each step as a horizontal bar with width proportional to count.
  * Displays conversion rates between steps.
  */
-declare const FunnelChart: React.NamedExoticComponent<ChartProps>;
+declare const FunnelChart: React.MemoExoticComponent<({ data, height, colorPalette, displayConfig, }: ChartProps) => React.JSX.Element>;
 export default FunnelChart;

package/dist/client/components/charts/GaugeChart.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { ChartProps } from '../../types.js';
-declare const GaugeChart: React.NamedExoticComponent<ChartProps>;
+declare const GaugeChart: React.MemoExoticComponent<({ data, chartConfig, displayConfig, height, }: ChartProps) => React.JSX.Element>;
 export default GaugeChart;

package/dist/client/components/charts/HeatMapChart.d.ts

@@ -6,5 +6,5 @@ import { ChartProps } from '../../types.js';
  * Renders a heatmap visualization from query results.
  * Shows intensity patterns across two categorical dimensions.
  */
-declare const HeatMapChart: React.NamedExoticComponent<ChartProps>;
+declare const HeatMapChart: React.MemoExoticComponent<({ data, height, chartConfig, colorPalette, displayConfig, queryObject, }: ChartProps) => React.JSX.Element>;
 export default HeatMapChart;

package/dist/client/components/charts/KpiCompactLayout.d.ts

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+interface KpiCompactLayoutProps {
+    /** Resolved measure label, rendered small and uppercase. */
+    label: string;
+    /** Optional adornment next to the label (e.g. the incomplete-period info icon). */
+    labelAdornment?: React.ReactNode;
+    /** Pre-formatted main value. */
+    value: string;
+    /** Colour for the main value; falls back to the themed text colour. */
+    valueColor?: string;
+    /** Unit rendered next to the value at a smaller size. */
+    suffix?: string;
+    /**
+     * Rendered immediately after the value — used for the coloured delta so the
+     * headline number keeps its usual meaning.
+     */
+    valueAdornment?: React.ReactNode;
+    /** Quiet sub-line — a before/after pair, a target comparison, etc. */
+    detail?: React.ReactNode;
+    /** Forwarded so callers can keep measuring the container if they need to. */
+    containerRef?: React.Ref<HTMLDivElement>;
+}
+/**
+ * Dense KPI presentation shared by KpiNumber and KpiDelta.
+ *
+ * Unlike the default layout, nothing here scales with the container: the type
+ * sizes are fixed so that a row of KPI portlets reads as a consistent metric
+ * strip rather than a wall of differently-sized numbers.
+ */
+declare const KpiCompactLayout: React.MemoExoticComponent<({ label, labelAdornment, value, valueColor, suffix, valueAdornment, detail, containerRef }: KpiCompactLayoutProps) => React.JSX.Element>;
+export default KpiCompactLayout;

package/dist/client/components/charts/KpiDelta.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { ChartProps } from '../../types.js';
-declare const KpiDelta: React.NamedExoticComponent<ChartProps>;
+declare const KpiDelta: React.MemoExoticComponent<({ data, chartConfig, displayConfig, queryObject, height, colorPalette, }: ChartProps) => React.JSX.Element>;
 export default KpiDelta;

package/dist/client/components/charts/KpiDelta.helpers.d.ts

@@ -7,6 +7,8 @@ export declare function sortByDimension<T extends Record<string, any>>(data: T[]
 export declare function extractNumericValues(rows: Record<string, any>[], valueField: string): number[];
 export interface DeltaStats {
     lastValue: number;
+    /** The value the delta is measured against — the baseline in `prev → current`. */
+    previousValue: number;
     absoluteChange: number;
     percentageChange: number;
     isPositiveChange: boolean;

package/dist/client/components/charts/KpiNumber.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { ChartProps } from '../../types.js';
-declare const KpiNumber: React.NamedExoticComponent<ChartProps>;
+declare const KpiNumber: React.MemoExoticComponent<({ data, chartConfig, displayConfig, queryObject, height, colorPalette }: ChartProps) => React.JSX.Element>;
 export default KpiNumber;

package/dist/client/components/charts/KpiStates.d.ts

@@ -1,7 +1,12 @@
 import { default as React } from 'react';
 type KpiStateVariant = 'muted' | 'danger' | 'warning';
-/** Resolve the shared `height`/`minHeight` style used by every KPI card state. */
-export declare function kpiHeightStyle(height: string | number): React.CSSProperties;
+/**
+ * Resolve the shared `height`/`minHeight` style used by every KPI card state.
+ *
+ * `minHeight` only applies when the card is sized at `100%`; the compact layout
+ * passes a smaller floor since it is meant to sit in a short metric strip.
+ */
+export declare function kpiHeightStyle(height: string | number, minHeight?: string | number): React.CSSProperties;
 /**
  * Centred KPI state card (no-data / config-error / insufficient-data).
  *

package/dist/client/components/charts/KpiText.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { ChartProps } from '../../types.js';
-declare const KpiText: React.NamedExoticComponent<ChartProps>;
+declare const KpiText: React.MemoExoticComponent<({ data, chartConfig, displayConfig, height, colorPalette }: ChartProps) => React.JSX.Element>;
 export default KpiText;

package/dist/client/components/charts/LineChart.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { ChartProps } from '../../types.js';
-declare const LineChart: React.NamedExoticComponent<ChartProps>;
+declare const LineChart: React.MemoExoticComponent<({ data, chartConfig, displayConfig, queryObject, height, colorPalette, onDataPointClick, drillEnabled }: ChartProps) => React.JSX.Element>;
 export default LineChart;

package/dist/client/components/charts/MarkdownChart.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { ChartProps } from '../../types.js';
-declare const MarkdownChart: React.NamedExoticComponent<ChartProps>;
+declare const MarkdownChart: React.MemoExoticComponent<({ displayConfig, height, colorPalette }: ChartProps) => React.JSX.Element | null>;
 export default MarkdownChart;

package/dist/client/components/charts/MeasureProfileChart.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { ChartProps } from '../../types.js';
-declare const MeasureProfileChart: React.NamedExoticComponent<ChartProps>;
+declare const MeasureProfileChart: React.MemoExoticComponent<({ data, chartConfig, displayConfig, height, colorPalette, drillEnabled, }: ChartProps) => React.JSX.Element>;
 export default MeasureProfileChart;

package/dist/client/components/charts/PieChart.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { ChartProps } from '../../types.js';
-declare const PieChart: React.NamedExoticComponent<ChartProps>;
+declare const PieChart: React.MemoExoticComponent<({ data, chartConfig, displayConfig, queryObject, height, colorPalette, onDataPointClick, drillEnabled }: ChartProps) => React.JSX.Element>;
 export default PieChart;

package/dist/client/components/charts/ProportionBarChart.config.d.ts

@@ -0,0 +1,10 @@
+import { ChartTypeConfig } from '../../charts/chartConfigs.js';
+/**
+ * Configuration for the proportion bar chart type.
+ *
+ * Eager metadata (`label`, `description`, `useCase`, `isAvailable`) lives in the
+ * unified `chartRegistry` entry (the single source of truth) — see
+ * `src/client/charts/chartRegistry.ts`. This file owns the lazy-loaded shape:
+ * drop zones, display options, clickable elements, validation.
+ */
+export declare const proportionBarChartConfig: ChartTypeConfig;

package/dist/client/components/charts/ProportionBarChart.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { ChartProps } from '../../types.js';
+/**
+ * A single 100%-wide stacked bar plus a labelled percentage legend.
+ *
+ * A flatter alternative to a pie chart for part-to-whole breakdowns: shares are
+ * far easier to compare along one axis than as angles, and it costs a fraction
+ * of the vertical space. Deliberately plain HTML rather than Recharts — there is
+ * no axis, scale or interaction to justify an SVG chart.
+ */
+declare const ProportionBarChart: React.MemoExoticComponent<({ data, chartConfig, displayConfig, height, colorPalette }: ChartProps) => React.JSX.Element>;
+export default ProportionBarChart;

package/dist/client/components/charts/RadarChart.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { ChartProps } from '../../types.js';
-declare const RadarChart: React.NamedExoticComponent<ChartProps>;
+declare const RadarChart: React.MemoExoticComponent<({ data, chartConfig, displayConfig, queryObject, height, colorPalette }: ChartProps) => React.JSX.Element>;
 export default RadarChart;

package/dist/client/components/charts/RadialBarChart.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { ChartProps } from '../../types.js';
-declare const RadialBarChart: React.NamedExoticComponent<ChartProps>;
+declare const RadialBarChart: React.MemoExoticComponent<({ data, chartConfig, displayConfig, queryObject, height, colorPalette }: ChartProps) => React.JSX.Element>;
 export default RadialBarChart;

package/dist/client/components/charts/RetentionCombinedChart.d.ts

@@ -10,5 +10,5 @@ export type RetentionDisplayMode = 'heatmap' | 'line' | 'combined';
 /**
  * RetentionCombinedChart Component
  */
-declare const RetentionCombinedChart: React.NamedExoticComponent<ChartProps>;
+declare const RetentionCombinedChart: React.MemoExoticComponent<({ data, height, displayConfig, colorPalette, }: ChartProps) => React.JSX.Element>;
 export default RetentionCombinedChart;

package/dist/client/components/charts/RetentionHeatmap.d.ts

@@ -3,5 +3,5 @@ import { ChartProps } from '../../types.js';
 /**
  * RetentionHeatmap Component
  */
-declare const RetentionHeatmap: React.NamedExoticComponent<ChartProps>;
+declare const RetentionHeatmap: React.MemoExoticComponent<({ data, height, displayConfig, }: ChartProps) => React.JSX.Element>;
 export default RetentionHeatmap;

package/dist/client/components/charts/SankeyChart.d.ts

@@ -6,5 +6,5 @@ import { ChartProps } from '../../types.js';
  * Renders a Sankey diagram visualization from FlowChartData.
  * Shows flow paths with nodes at each layer and links between them.
  */
-declare const SankeyChart: React.NamedExoticComponent<ChartProps>;
+declare const SankeyChart: React.MemoExoticComponent<({ data, height, colorPalette, displayConfig, }: ChartProps) => React.JSX.Element>;
 export default SankeyChart;

package/dist/client/components/charts/ScatterChart.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { ChartProps } from '../../types.js';
-declare const ScatterChart: React.NamedExoticComponent<ChartProps>;
+declare const ScatterChart: React.MemoExoticComponent<({ data, chartConfig, displayConfig, queryObject, height, colorPalette }: ChartProps) => React.JSX.Element>;
 export default ScatterChart;

package/dist/client/components/charts/SunburstChart.d.ts

@@ -6,5 +6,5 @@ import { ChartProps } from '../../types.js';
  * Renders a sunburst diagram visualization from FlowChartData.
  * Shows hierarchical flow paths radiating from a central starting step.
  */
-declare const SunburstChart: React.NamedExoticComponent<ChartProps>;
+declare const SunburstChart: React.MemoExoticComponent<({ data, height, colorPalette, displayConfig, }: ChartProps) => React.JSX.Element>;
 export default SunburstChart;

package/dist/client/components/charts/TreeMapChart.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { ChartProps } from '../../types.js';
-declare const TreeMapChart: React.NamedExoticComponent<ChartProps>;
+declare const TreeMapChart: React.MemoExoticComponent<({ data, chartConfig, displayConfig, queryObject, height, colorPalette, onDataPointClick, drillEnabled }: ChartProps) => React.JSX.Element>;
 export default TreeMapChart;

package/dist/client/components/charts/WaterfallChart.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { ChartProps } from '../../types.js';
-declare const WaterfallChart: React.NamedExoticComponent<ChartProps>;
+declare const WaterfallChart: React.MemoExoticComponent<({ data, chartConfig, displayConfig, height, onDataPointClick, drillEnabled, }: ChartProps) => React.JSX.Element>;
 export default WaterfallChart;

package/dist/client/components/charts/cartesianChartHelpers.d.ts

@@ -79,6 +79,8 @@ interface LineSeriesOptions {
     yAxisAssignment: Record<string, 'left' | 'right'>;
     hoveredLegend: string | null;
     connectNulls: boolean;
+    /** Render a marker at every data point. Off is clearer on dense series. */
+    showPoints?: boolean;
     drillEnabled?: boolean;
     onDataPointClick?: (payload: DataPointClickPayload) => void;
     /** Comparison styling (omit/false → standard series). */
@@ -97,11 +99,71 @@ interface AreaSeriesOptions {
     hoveredLegend: string | null;
     connectNulls: boolean;
     shouldStack: boolean;
+    /** Render a marker at every data point. Off is clearer on dense series. */
+    showPoints?: boolean;
     drillEnabled?: boolean;
     onDataPointClick?: (payload: DataPointClickPayload) => void;
+    /**
+     * Unique-per-chart-instance prefix for the `<defs>` gradient ids. When
+     * omitted (or when stacking) the series fall back to a flat fill.
+     */
+    gradientIdPrefix?: string;
 }
+/**
+ * Vertical fade gradients for the Area chart — one `<linearGradient>` per series.
+ *
+ * Recharts has no gradient primitive; the fade is plain SVG in `<defs>` that each
+ * `<Area>` references by id. Both stops use the *same* hue (fading to white would
+ * break the dark and neon themes) and the `<Area>`'s own `fillOpacity` stays the
+ * master control, so the existing hover dim/highlight still works unchanged.
+ */
+export declare function renderAreaGradientDefs(seriesKeys: string[], colorPalette: ColorPalette | undefined, idPrefix: string): React.ReactElement;
 /** Render all area series for the Area chart. */
 export declare function renderAreaSeries(opts: AreaSeriesOptions): React.ReactElement[];
+/**
+ * Is the x-axis an ordered time series?
+ *
+ * The summary header's "change since the start of the window" only means
+ * something when the x-axis is ordered. For a categorical axis (region,
+ * product, status) the first and last categories are arbitrary, so the delta
+ * would be noise.
+ */
+export declare function isTimeOrderedXAxis(queryObject: any, xAxisField: string | undefined): boolean;
+/**
+ * Resolve which Y axis a series key is plotted against — the same rule the
+ * `<Area>`/`<Line>` elements use, so summaries and series never disagree.
+ */
+export declare function makeAxisResolver(resolveField: (seriesKey: string) => string | undefined, yAxisAssignment: Record<string, 'left' | 'right'>): (seriesKey: string) => 'left' | 'right';
+export interface SeriesSummary {
+    seriesKey: string;
+    color: string;
+    /**
+     * Which Y axis this series is plotted against, so the summary can be
+     * formatted with that axis' format rather than always the left one.
+     */
+    axis: 'left' | 'right';
+    /** Latest non-null value in the window. */
+    current: number | null;
+    /** First non-null value in the window — the baseline the delta is measured from. */
+    baseline: number | null;
+    absoluteChange: number | null;
+    percentageChange: number | null;
+    /**
+     * X-axis label of the point the delta is measured from, so the header can say
+     * "since Sep 2025" rather than a generic "since start of period". Undefined
+     * when the axis key is unknown or the baseline row carries no label.
+     */
+    baselineLabel?: string;
+}
+/**
+ * Per-series first/last/delta over the plotted window, for the summary header.
+ *
+ * Pure and DOM-free so it can be unit-tested directly. Nulls are skipped rather
+ * than treated as zero — a gap in a series should not read as a crash to zero.
+ * When a series has fewer than two non-null points there is nothing to compare,
+ * so the deltas stay null and the header renders the value alone.
+ */
+export declare function computeSeriesSummaries(chartData: any[], seriesKeys: string[], colorPalette?: ColorPalette, resolveAxis?: (seriesKey: string) => 'left' | 'right', xAxisKey?: string): SeriesSummary[];
 export interface TimeSeriesShape {
     chartData: any[];
     seriesKeys: string[];

package/dist/client/components/charts/chartScaffolding.d.ts

@@ -26,6 +26,35 @@ export declare function getYAxisChartMargins(hasRightAxis: boolean): {
     top: number;
     bottom: number;
 };
+/**
+ * Vertical space an angled X-axis label needs.
+ *
+ * `AngledXAxisTick` rotates its text -45deg from an anchor offset dy=16, so the
+ * space required below the axis is the label's own width projected onto the
+ * vertical, plus that offset. A fixed height clipped longer labels: "2026-08-24"
+ * is roughly 66px wide at 12px, which projects to ~47px and needs ~63px in
+ * total against the 60px that used to be hardcoded.
+ *
+ * Capped, because a pathological label should cost the plot a bounded amount of
+ * height rather than squeeze it away - past the cap the label is truncated
+ * instead (see AngledXAxisTick).
+ */
+export declare const MIN_ANGLED_AXIS_HEIGHT = 60;
+export declare const MAX_ANGLED_AXIS_HEIGHT = 96;
+export declare function resolveAngledAxisHeight(values: Array<string | number | undefined>): number;
+/**
+ * Width reserved for the left `<YAxis>`. This is recharts' own default, stated
+ * explicitly so anything needing to line up with the plot area can rely on it
+ * rather than assume it.
+ */
+export declare const Y_AXIS_WIDTH = 60;
+/**
+ * Distance from the chart container's left edge to the left edge of the plot
+ * area — the chart margin plus the Y-axis gutter. Used to indent content
+ * rendered outside the chart (the summary header) so it lines up with the first
+ * data point instead of floating against the card edge.
+ */
+export declare function getPlotLeftOffset(hasRightAxis: boolean): number;
 /**
  * Apply target values (single or comma-separated spread) onto chart data,
  * returning the spread targets plus data enhanced with a `__target` key.

package/dist/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/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/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/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/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/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/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;