@asteby/metacore-runtime-react 18.17.0 → 18.17.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @asteby/metacore-runtime-react
 
+## 18.17.2
+
+### Patch Changes
+
+- 714cc34: Dashboard: masonry (balanced CSS columns) layout — no blank cells; charts fixed-height, compact stat cards
+
+## 18.17.1
+
+### Patch Changes
+
+- 211484b: Dashboard grid: compact KPI stat cards, dense fixed-row packing (charts span 2 rows), charts fill card height
+
 ## 18.17.0
 
 ### Minor Changes

package/dist/dashboard-grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dashboard-grid.d.ts","sourceRoot":"","sources":["../src/dashboard-grid.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,KAAK,EACR,kBAAkB,EAElB,oBAAoB,EACpB,mBAAmB,EACtB,MAAM,mBAAmB,CAAA;AAW1B,uEAAuE;AACvE,wBAAgB,eAAe,CAC3B,MAAM,CAAC,EAAE,oBAAoB,EAAE,EAC/B,OAAO,CAAC,EAAE,mBAAmB,EAAE,GAChC,oBAAoB,EAAE,CAgBxB;AASD,wBAAgB,aAAa,CAAC,EAC1B,MAAM,EACN,OAAO,EACP,QAAQ,EACR,OAAO,EACP,MAAM,EACN,QAAQ,EACR,SAAS,EACT,OAAO,GACV,EAAE,kBAAkB,qBA4IpB"}
+{"version":3,"file":"dashboard-grid.d.ts","sourceRoot":"","sources":["../src/dashboard-grid.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,KAAK,EACR,kBAAkB,EAElB,oBAAoB,EACpB,mBAAmB,EACtB,MAAM,mBAAmB,CAAA;AAW1B,uEAAuE;AACvE,wBAAgB,eAAe,CAC3B,MAAM,CAAC,EAAE,oBAAoB,EAAE,EAC/B,OAAO,CAAC,EAAE,mBAAmB,EAAE,GAChC,oBAAoB,EAAE,CAgBxB;AASD,wBAAgB,aAAa,CAAC,EAC1B,MAAM,EACN,OAAO,EACP,QAAQ,EACR,OAAO,EACP,MAAM,EACN,QAAQ,EACR,SAAS,EACT,OAAO,GACV,EAAE,kBAAkB,qBAkJpB"}

package/dist/dashboard-grid.js

@@ -9,7 +9,7 @@ import { useTranslation } from 'react-i18next';
 import { cn } from '@asteby/metacore-ui/lib';
 import { useCan, usePermissionsActive } from './permissions-context';
 import { DynamicIcon } from './dynamic-icon';
-import { WidgetRenderer, WidgetSkeleton, SIZE_CLASS } from './widgets/widget-renderer';
+import { WidgetRenderer, WidgetSkeleton, isTallWidget } from './widgets/widget-renderer';
 const DEFAULT_STRINGS = {
     emptyTitle: 'Your dashboard is empty',
     emptyDescription: 'Install an addon with dashboard widgets to start seeing metrics here.',
@@ -110,18 +110,30 @@ export function DashboardGrid({ groups, widgets, loadData, isAdmin, locale, curr
     if (visibleGroups.length === 0) {
         return (_jsxs("div", { "data-testid": "dashboard-empty", className: cn('flex min-h-[40vh] flex-col items-center justify-center rounded-xl border border-dashed border-border/60 p-10 text-center', className), children: [_jsx("div", { className: "mb-4 flex size-14 items-center justify-center rounded-2xl bg-muted text-muted-foreground", children: _jsx(DynamicIcon, { name: "LayoutDashboard", className: "size-7" }) }), _jsx("h3", { className: "text-base font-semibold text-foreground", children: tr(undefined, s.emptyTitle) || s.emptyTitle }), _jsx("p", { className: "mt-1 max-w-sm text-sm text-muted-foreground", children: s.emptyDescription })] }));
     }
-    return (_jsx("div", { "data-testid": "dashboard-grid", className: cn('flex flex-col gap-8', className), children: visibleGroups.map((group) => (_jsxs("section", { className: "flex flex-col gap-3", children: [group.title && (_jsx("h2", { className: "text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: tr(group.title, group.title) })), _jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4", children: group.widgets.map((spec) => {
-                        const size = spec.size ?? 'sm';
-                        return (_jsx("div", { className: SIZE_CLASS[size], children: loading ? (_jsx(WidgetSkeleton, { spec: {
-                                    ...spec,
-                                    title: tr(spec.title, spec.title),
-                                    subtitle: tr(spec.subtitle, spec.subtitle),
-                                } })) : (_jsx(WidgetRenderer, { spec: {
-                                    ...spec,
-                                    title: tr(spec.title, spec.title),
-                                    subtitle: tr(spec.subtitle, spec.subtitle),
-                                }, data: data?.[spec.key], locale: locale, currency: currency, emptyText: spec.empty
-                                    ? tr(spec.empty, spec.empty)
-                                    : s.widgetEmpty, errorText: s.widgetError })) }, spec.key));
-                    }) })] }, group.title || '__default'))) }));
+    // ONE unified dense grid across every group. Per-group sections used to
+    // break the layout into rows, so a lone-widget group (e.g. a single KPI)
+    // left the rest of its row blank. Flattening + `grid-flow-row-dense`
+    // backfills those holes; ordering compact KPIs before charts makes the top
+    // read as a metric band and the charts mosaic below it. No blank space.
+    const ordered = React.useMemo(() => {
+        const flat = visibleGroups.flatMap((g) => g.widgets);
+        return flat
+            .map((w, i) => ({ w, i }))
+            .sort((a, b) => (isTallWidget(a.w) ? 1 : 0) - (isTallWidget(b.w) ? 1 : 0) ||
+            a.i - b.i)
+            .map((x) => x.w);
+    }, [visibleGroups]);
+    return (_jsx("div", { "data-testid": "dashboard-grid", className: cn(
+        // Masonry: balanced CSS columns. Cards take their natural height
+        // (compact stats, taller charts) and flow to equalize column
+        // height, so there are NO blank cells — the gaps a fixed grid
+        // leaves around mixed 1×1 / 2×2 tiles simply don't exist here.
+        'columns-1 gap-4 md:columns-2 xl:columns-3', className), children: ordered.map((spec) => {
+            const rspec = {
+                ...spec,
+                title: tr(spec.title, spec.title),
+                subtitle: tr(spec.subtitle, spec.subtitle),
+            };
+            return (_jsx("div", { className: "mb-4 break-inside-avoid", children: loading ? (_jsx(WidgetSkeleton, { spec: rspec })) : (_jsx(WidgetRenderer, { spec: rspec, data: data?.[spec.key], locale: locale, currency: currency, emptyText: spec.empty ? tr(spec.empty, spec.empty) : s.widgetEmpty, errorText: s.widgetError })) }, spec.key));
+        }) }));
 }

package/dist/widgets/renderers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderers.d.ts","sourceRoot":"","sources":["../../src/widgets/renderers.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAkB9B,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAazE,MAAM,WAAW,iBAAiB;IAC9B,IAAI,EAAE,mBAAmB,CAAA;IACzB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4DAA4D;IAC5D,SAAS,EAAE,MAAM,CAAA;CACpB;AAiCD,wBAAgB,UAAU,CAAC,CAAC,EAAE,iBAAiB,qBA2B9C;AAGD,wBAAgB,SAAS,CAAC,CAAC,EAAE,iBAAiB,qBAsC7C;AAgDD,wBAAgB,UAAU,CAAC,CAAC,EAAE,iBAAiB,qBAE9C;AACD,wBAAgB,UAAU,CAAC,CAAC,EAAE,iBAAiB,qBAE9C;AAqDD,wBAAgB,SAAS,CAAC,CAAC,EAAE,iBAAiB,qBAE7C;AACD,wBAAgB,WAAW,CAAC,CAAC,EAAE,iBAAiB,qBAE/C;AAGD,wBAAgB,UAAU,CAAC,CAAC,EAAE,iBAAiB,qBAqC9C;AAKD,wBAAgB,cAAc,CAAC,CAAC,EAAE,iBAAiB,qBAkClD"}
+{"version":3,"file":"renderers.d.ts","sourceRoot":"","sources":["../../src/widgets/renderers.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAkB9B,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAazE,MAAM,WAAW,iBAAiB;IAC9B,IAAI,EAAE,mBAAmB,CAAA;IACzB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4DAA4D;IAC5D,SAAS,EAAE,MAAM,CAAA;CACpB;AA8CD,wBAAgB,UAAU,CAAC,CAAC,EAAE,iBAAiB,qBA+B9C;AAGD,wBAAgB,SAAS,CAAC,CAAC,EAAE,iBAAiB,qBAsC7C;AAgDD,wBAAgB,UAAU,CAAC,CAAC,EAAE,iBAAiB,qBAE9C;AACD,wBAAgB,UAAU,CAAC,CAAC,EAAE,iBAAiB,qBAE9C;AAuDD,wBAAgB,SAAS,CAAC,CAAC,EAAE,iBAAiB,qBAE7C;AACD,wBAAgB,WAAW,CAAC,CAAC,EAAE,iBAAiB,qBAE/C;AAGD,wBAAgB,UAAU,CAAC,CAAC,EAAE,iBAAiB,qBAqC9C;AAKD,wBAAgB,cAAc,CAAC,CAAC,EAAE,iBAAiB,qBAkClD"}

package/dist/widgets/renderers.js

@@ -5,7 +5,14 @@ import { WidgetCard, DeltaChip, WidgetEmpty } from './widget-card';
 import { accentClasses, paletteColor, formatWidgetValue, formatAxisTick, formatDelta, CHART_GRID, CHART_MUTED, } from './widget-format';
 const fmtCtx = (spec, locale, currency) => ({ format: spec.format, locale, currency });
 const hasSeries = (d) => Array.isArray(d?.series) && d.series.length > 0;
-const CHART_HEIGHT = 132;
+// Fixed-height chart body. In the masonry (CSS columns) layout cards take their
+// natural height, so charts need a definite height for ResponsiveContainer to
+// resolve. This height + the card chrome gives every chart card a consistent,
+// taller footprint that balances cleanly against compact stat cards.
+const CHART_H = 'h-[190px]';
+function ChartArea({ children }) {
+    return (_jsx("div", { className: cn(CHART_H, 'w-full'), children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", children: children }) }));
+}
 // Compact recharts tooltip styled with theme tokens.
 function ChartTooltip({ ctx }) {
     return (_jsx(Tooltip, { cursor: { fill: 'var(--muted, rgba(148,163,184,0.12))', opacity: 0.4 }, contentStyle: {
@@ -23,20 +30,20 @@ export function StatWidget(p) {
     const value = p.data?.value;
     const delta = p.data?.delta;
     const hasValue = typeof value === 'number' && !Number.isNaN(value);
-    return (_jsx(WidgetCard, { "data-testid": `widget-${p.spec.key}`, title: p.spec.title, subtitle: p.spec.subtitle, icon: p.spec.icon, accent: p.spec.accent, headerExtra: typeof delta === 'number' ? (_jsx(DeltaChip, { delta: delta, text: formatDelta(delta, p.locale) })) : undefined, children: hasValue ? (_jsx("div", { className: "text-3xl font-semibold tabular-nums tracking-tight text-foreground", children: formatWidgetValue(value, ctx) })) : (_jsx(WidgetEmpty, { message: p.emptyText })) }));
+    return (_jsx(WidgetCard, { "data-testid": `widget-${p.spec.key}`, title: p.spec.title, subtitle: p.spec.subtitle, icon: p.spec.icon, accent: p.spec.accent, headerExtra: typeof delta === 'number' ? (_jsx(DeltaChip, { delta: delta, text: formatDelta(delta, p.locale) })) : undefined, children: hasValue ? (_jsx("div", { className: "flex min-h-[2.5rem] items-end", children: _jsx("div", { className: "text-[2rem] font-semibold leading-none tabular-nums tracking-tight text-foreground", children: formatWidgetValue(value, ctx) }) })) : (_jsx("div", { className: "flex min-h-[2.5rem] items-center text-sm text-muted-foreground", children: p.emptyText })) }));
 }
 // --- bar ------------------------------------------------------------------
 export function BarWidget(p) {
     const ctx = fmtCtx(p.spec, p.locale, p.currency);
     const a = accentClasses(p.spec.accent);
-    return (_jsx(WidgetCard, { "data-testid": `widget-${p.spec.key}`, title: p.spec.title, subtitle: p.spec.subtitle, icon: p.spec.icon, accent: p.spec.accent, children: hasSeries(p.data) ? (_jsx(ResponsiveContainer, { width: "100%", height: CHART_HEIGHT, children: _jsxs(BarChart, { data: p.data.series, margin: { top: 4, right: 4, left: -16, bottom: 0 }, children: [_jsx(CartesianGrid, { vertical: false, stroke: CHART_GRID, strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: "label", tick: { fontSize: 10, fill: CHART_MUTED }, tickLine: false, axisLine: false, interval: "preserveStartEnd" }), _jsx(YAxis, { tick: { fontSize: 10, fill: CHART_MUTED }, tickLine: false, axisLine: false, width: 44, tickFormatter: (v) => formatAxisTick(v, ctx) }), _jsx(ChartTooltip, { ctx: ctx }), _jsx(Bar, { dataKey: "value", fill: a.chartVar, radius: [4, 4, 0, 0], maxBarSize: 40 })] }) })) : (_jsx(WidgetEmpty, { message: p.emptyText })) }));
+    return (_jsx(WidgetCard, { "data-testid": `widget-${p.spec.key}`, title: p.spec.title, subtitle: p.spec.subtitle, icon: p.spec.icon, accent: p.spec.accent, children: hasSeries(p.data) ? (_jsx(ChartArea, { children: _jsxs(BarChart, { data: p.data.series, margin: { top: 4, right: 4, left: -16, bottom: 0 }, children: [_jsx(CartesianGrid, { vertical: false, stroke: CHART_GRID, strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: "label", tick: { fontSize: 10, fill: CHART_MUTED }, tickLine: false, axisLine: false, interval: "preserveStartEnd" }), _jsx(YAxis, { tick: { fontSize: 10, fill: CHART_MUTED }, tickLine: false, axisLine: false, width: 44, tickFormatter: (v) => formatAxisTick(v, ctx) }), _jsx(ChartTooltip, { ctx: ctx }), _jsx(Bar, { dataKey: "value", fill: a.chartVar, radius: [4, 4, 0, 0], maxBarSize: 48 })] }) })) : (_jsx(WidgetEmpty, { message: p.emptyText })) }));
 }
 // --- line / area (shared) -------------------------------------------------
 function TimeSeriesWidget(p) {
     const ctx = fmtCtx(p.spec, p.locale, p.currency);
     const a = accentClasses(p.spec.accent);
     const gradId = `wg-grad-${p.spec.key}`;
-    return (_jsx(WidgetCard, { "data-testid": `widget-${p.spec.key}`, title: p.spec.title, subtitle: p.spec.subtitle, icon: p.spec.icon, accent: p.spec.accent, children: hasSeries(p.data) ? (_jsx(ResponsiveContainer, { width: "100%", height: CHART_HEIGHT, children: p.variant === 'area' ? (_jsxs(AreaChart, { data: p.data.series, margin: { top: 4, right: 6, left: -16, bottom: 0 }, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: gradId, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: a.chartVar, stopOpacity: 0.35 }), _jsx("stop", { offset: "100%", stopColor: a.chartVar, stopOpacity: 0.02 })] }) }), _jsx(CartesianGrid, { vertical: false, stroke: CHART_GRID, strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: "label", tick: { fontSize: 10, fill: CHART_MUTED }, tickLine: false, axisLine: false, interval: "preserveStartEnd" }), _jsx(YAxis, { tick: { fontSize: 10, fill: CHART_MUTED }, tickLine: false, axisLine: false, width: 44, tickFormatter: (v) => formatAxisTick(v, ctx) }), _jsx(ChartTooltip, { ctx: ctx }), _jsx(Area, { type: "monotone", dataKey: "value", stroke: a.chartVar, strokeWidth: 2, fill: `url(#${gradId})` })] })) : (_jsxs(LineChart, { data: p.data.series, margin: { top: 4, right: 6, left: -16, bottom: 0 }, children: [_jsx(CartesianGrid, { vertical: false, stroke: CHART_GRID, strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: "label", tick: { fontSize: 10, fill: CHART_MUTED }, tickLine: false, axisLine: false, interval: "preserveStartEnd" }), _jsx(YAxis, { tick: { fontSize: 10, fill: CHART_MUTED }, tickLine: false, axisLine: false, width: 44, tickFormatter: (v) => formatAxisTick(v, ctx) }), _jsx(ChartTooltip, { ctx: ctx }), _jsx(Line, { type: "monotone", dataKey: "value", stroke: a.chartVar, strokeWidth: 2, dot: false, activeDot: { r: 4 } })] })) })) : (_jsx(WidgetEmpty, { message: p.emptyText })) }));
+    return (_jsx(WidgetCard, { "data-testid": `widget-${p.spec.key}`, title: p.spec.title, subtitle: p.spec.subtitle, icon: p.spec.icon, accent: p.spec.accent, children: hasSeries(p.data) ? (_jsx(ChartArea, { children: p.variant === 'area' ? (_jsxs(AreaChart, { data: p.data.series, margin: { top: 4, right: 6, left: -16, bottom: 0 }, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: gradId, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: a.chartVar, stopOpacity: 0.35 }), _jsx("stop", { offset: "100%", stopColor: a.chartVar, stopOpacity: 0.02 })] }) }), _jsx(CartesianGrid, { vertical: false, stroke: CHART_GRID, strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: "label", tick: { fontSize: 10, fill: CHART_MUTED }, tickLine: false, axisLine: false, interval: "preserveStartEnd" }), _jsx(YAxis, { tick: { fontSize: 10, fill: CHART_MUTED }, tickLine: false, axisLine: false, width: 44, tickFormatter: (v) => formatAxisTick(v, ctx) }), _jsx(ChartTooltip, { ctx: ctx }), _jsx(Area, { type: "monotone", dataKey: "value", stroke: a.chartVar, strokeWidth: 2, fill: `url(#${gradId})` })] })) : (_jsxs(LineChart, { data: p.data.series, margin: { top: 4, right: 6, left: -16, bottom: 0 }, children: [_jsx(CartesianGrid, { vertical: false, stroke: CHART_GRID, strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: "label", tick: { fontSize: 10, fill: CHART_MUTED }, tickLine: false, axisLine: false, interval: "preserveStartEnd" }), _jsx(YAxis, { tick: { fontSize: 10, fill: CHART_MUTED }, tickLine: false, axisLine: false, width: 44, tickFormatter: (v) => formatAxisTick(v, ctx) }), _jsx(ChartTooltip, { ctx: ctx }), _jsx(Line, { type: "monotone", dataKey: "value", stroke: a.chartVar, strokeWidth: 2, dot: false, activeDot: { r: 4 } })] })) })) : (_jsx(WidgetEmpty, { message: p.emptyText })) }));
 }
 export function LineWidget(p) {
     return _jsx(TimeSeriesWidget, { ...p, variant: "line" });
@@ -47,7 +54,7 @@ export function AreaWidget(p) {
 // --- pie / donut (shared) -------------------------------------------------
 function CircularWidget(p) {
     const ctx = fmtCtx(p.spec, p.locale, p.currency);
-    return (_jsx(WidgetCard, { "data-testid": `widget-${p.spec.key}`, title: p.spec.title, subtitle: p.spec.subtitle, icon: p.spec.icon, accent: p.spec.accent, children: hasSeries(p.data) ? (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(ResponsiveContainer, { width: "50%", height: CHART_HEIGHT, children: _jsxs(PieChart, { children: [_jsx(ChartTooltip, { ctx: ctx }), _jsx(Pie, { data: p.data.series, dataKey: "value", nameKey: "label", innerRadius: p.variant === 'donut' ? 32 : 0, outerRadius: 56, paddingAngle: p.variant === 'donut' ? 2 : 0, stroke: "var(--background, #fff)", strokeWidth: 2, children: p.data.series.map((_, i) => (_jsx(Cell, { fill: paletteColor(i) }, i))) })] }) }), _jsx("ul", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: p.data.series.slice(0, 6).map((pt, i) => (_jsxs("li", { className: "flex items-center gap-2 text-xs", children: [_jsx("span", { className: "size-2.5 shrink-0 rounded-sm", style: { background: paletteColor(i) } }), _jsx("span", { className: "truncate text-muted-foreground", children: pt.label }), _jsx("span", { className: "ml-auto shrink-0 font-medium tabular-nums text-foreground", children: formatWidgetValue(pt.value, ctx) })] }, pt.key))) })] })) : (_jsx(WidgetEmpty, { message: p.emptyText })) }));
+    return (_jsx(WidgetCard, { "data-testid": `widget-${p.spec.key}`, title: p.spec.title, subtitle: p.spec.subtitle, icon: p.spec.icon, accent: p.spec.accent, children: hasSeries(p.data) ? (_jsxs("div", { className: cn(CHART_H, 'flex items-center gap-3'), children: [_jsx("div", { className: "h-full min-h-0 w-[46%] shrink-0", children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(PieChart, { children: [_jsx(ChartTooltip, { ctx: ctx }), _jsx(Pie, { data: p.data.series, dataKey: "value", nameKey: "label", innerRadius: p.variant === 'donut' ? '55%' : 0, outerRadius: "92%", paddingAngle: p.variant === 'donut' ? 2 : 0, stroke: "var(--background, #fff)", strokeWidth: 2, children: p.data.series.map((_, i) => (_jsx(Cell, { fill: paletteColor(i) }, i))) })] }) }) }), _jsx("ul", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: p.data.series.slice(0, 6).map((pt, i) => (_jsxs("li", { className: "flex items-center gap-2 text-xs", children: [_jsx("span", { className: "size-2.5 shrink-0 rounded-sm", style: { background: paletteColor(i) } }), _jsx("span", { className: "truncate text-muted-foreground", children: pt.label }), _jsx("span", { className: "ml-auto shrink-0 font-medium tabular-nums text-foreground", children: formatWidgetValue(pt.value, ctx) })] }, pt.key))) })] })) : (_jsx(WidgetEmpty, { message: p.emptyText })) }));
 }
 export function PieWidget(p) {
     return _jsx(CircularWidget, { ...p, variant: "pie" });

package/dist/widgets/widget-card.js

@@ -12,7 +12,7 @@ export function WidgetCard({ title, subtitle, icon, accent, headerExtra, childre
     const showIcon = icon && isLucideIconName(icon);
     return (_jsxs(Card, { ...rest, className: cn(
         // base: subtle border, ring on hover, gentle lift, mount fade-in
-        'group/widget relative flex h-full flex-col overflow-hidden', 'border-border/60 transition-all duration-200', 'hover:border-border hover:ring-1 hover:ring-ring/30 hover:shadow-sm', 'motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-bottom-1 motion-safe:duration-500', className), children: [_jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-3 space-y-0 pb-2", children: [_jsxs("div", { className: "flex min-w-0 items-start gap-3", children: [showIcon && (_jsx("span", { className: cn('flex size-9 shrink-0 items-center justify-center rounded-lg', a.chip), children: _jsx(DynamicIcon, { name: icon, className: "size-[18px]" }) })), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate text-sm font-medium leading-tight text-foreground", children: title }), subtitle && (_jsx("div", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: subtitle }))] })] }), headerExtra && _jsx("div", { className: "shrink-0", children: headerExtra })] }), _jsx(CardContent, { className: "flex flex-1 flex-col justify-end pt-1", children: children })] }));
+        'group/widget relative flex h-full flex-col overflow-hidden', 'border-border/60 transition-all duration-200', 'hover:border-border hover:ring-1 hover:ring-ring/30 hover:shadow-sm', 'motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-bottom-1 motion-safe:duration-500', className), children: [_jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-3 space-y-0 pb-2", children: [_jsxs("div", { className: "flex min-w-0 items-start gap-3", children: [showIcon && (_jsx("span", { className: cn('flex size-9 shrink-0 items-center justify-center rounded-lg', a.chip), children: _jsx(DynamicIcon, { name: icon, className: "size-[18px]" }) })), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate text-sm font-medium leading-tight text-foreground", children: title }), subtitle && (_jsx("div", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: subtitle }))] })] }), headerExtra && _jsx("div", { className: "shrink-0", children: headerExtra })] }), _jsx(CardContent, { className: "flex min-h-0 flex-1 flex-col pt-1", children: children })] }));
 }
 /** Delta chip: green up / red down, neutral on zero. `text` is preformatted. */
 export function DeltaChip({ delta, text }) {

package/dist/widgets/widget-renderer.d.ts

@@ -2,8 +2,18 @@ import * as React from 'react';
 import type { DashboardWidgetSpec, WidgetData, WidgetSize } from '../dashboard-types';
 /** Maps a widget size to its column span in the 4-col grid. */
 export declare const SIZE_SPAN: Record<WidgetSize, number>;
-/** Tailwind col-span class per size (static → scanned in this package build). */
+/** Tailwind col-span class per size (static → scanned in this package build).
+ * Grid is 2 cols on mobile, 4 on lg: sm=quarter, md=half, lg=¾, full=row. */
 export declare const SIZE_CLASS: Record<WidgetSize, string>;
+/** Default footprint when a spec omits `size`: charts go half-width, stats a
+ * quarter — so a tablero of mixed widgets packs densely without manual sizing. */
+export declare function defaultSize(spec: DashboardWidgetSpec): WidgetSize;
+/** Combined col + row span for a widget's grid cell. Row-span drives the
+ * height contrast (chart=2, stat=1) that makes the layout feel designed. */
+export declare function spanClass(spec: DashboardWidgetSpec): string;
+/** True for chart/list widgets that occupy 2 rows. Used to order compact KPIs
+ * before charts in the unified grid so the top reads as a metric band. */
+export declare function isTallWidget(spec: DashboardWidgetSpec): boolean;
 export interface WidgetRendererProps {
     spec: DashboardWidgetSpec;
     data?: WidgetData;

package/dist/widgets/widget-renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"widget-renderer.d.ts","sourceRoot":"","sources":["../../src/widgets/widget-renderer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAcrF,+DAA+D;AAC/D,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAKhD,CAAA;AAED,iFAAiF;AACjF,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAKjD,CAAA;AAiDD,MAAM,WAAW,mBAAmB;IAChC,IAAI,EAAE,mBAAmB,CAAA;IACzB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,iDAAiD;IACjD,SAAS,EAAE,MAAM,CAAA;IACjB,gDAAgD;IAChD,SAAS,EAAE,MAAM,CAAA;CACpB;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC3B,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,SAAS,EACT,SAAS,GACZ,EAAE,mBAAmB,qBAkDrB;AAED,8DAA8D;AAC9D,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,mBAAmB,CAAA;CAAE,qBAqBrE"}
+{"version":3,"file":"widget-renderer.d.ts","sourceRoot":"","sources":["../../src/widgets/widget-renderer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAcrF,+DAA+D;AAC/D,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAKhD,CAAA;AAED;6EAC6E;AAC7E,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAKjD,CAAA;AAMD;kFACkF;AAClF,wBAAgB,WAAW,CAAC,IAAI,EAAE,mBAAmB,GAAG,UAAU,CAGjE;AAED;4EAC4E;AAC5E,wBAAgB,SAAS,CAAC,IAAI,EAAE,mBAAmB,GAAG,MAAM,CAG3D;AAED;0EAC0E;AAC1E,wBAAgB,YAAY,CAAC,IAAI,EAAE,mBAAmB,GAAG,OAAO,CAE/D;AAiDD,MAAM,WAAW,mBAAmB;IAChC,IAAI,EAAE,mBAAmB,CAAA;IACzB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,iDAAiD;IACjD,SAAS,EAAE,MAAM,CAAA;IACjB,gDAAgD;IAChD,SAAS,EAAE,MAAM,CAAA;CACpB;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC3B,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,SAAS,EACT,SAAS,GACZ,EAAE,mBAAmB,qBAkDrB;AAED,8DAA8D;AAC9D,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,mBAAmB,CAAA;CAAE,qBAqBrE"}

package/dist/widgets/widget-renderer.js

@@ -13,13 +13,35 @@ export const SIZE_SPAN = {
     lg: 3,
     full: 4,
 };
-/** Tailwind col-span class per size (static → scanned in this package build). */
+/** Tailwind col-span class per size (static → scanned in this package build).
+ * Grid is 2 cols on mobile, 4 on lg: sm=quarter, md=half, lg=¾, full=row. */
 export const SIZE_CLASS = {
-    sm: 'sm:col-span-2 lg:col-span-1',
-    md: 'sm:col-span-2 lg:col-span-2',
-    lg: 'sm:col-span-2 lg:col-span-3',
-    full: 'sm:col-span-2 lg:col-span-4',
+    sm: 'col-span-1 lg:col-span-1',
+    md: 'col-span-2 lg:col-span-2',
+    lg: 'col-span-2 lg:col-span-3',
+    full: 'col-span-2 lg:col-span-4',
 };
+/** Kinds that render a chart/list and want extra vertical room (2 grid rows).
+ * Stat/progress stay a single compact row so KPIs read like KPIs, not slabs. */
+const TALL_KINDS = new Set(['bar', 'line', 'area', 'pie', 'donut', 'list', 'custom']);
+/** Default footprint when a spec omits `size`: charts go half-width, stats a
+ * quarter — so a tablero of mixed widgets packs densely without manual sizing. */
+export function defaultSize(spec) {
+    if (spec.size)
+        return spec.size;
+    return TALL_KINDS.has(spec.kind) ? 'md' : 'sm';
+}
+/** Combined col + row span for a widget's grid cell. Row-span drives the
+ * height contrast (chart=2, stat=1) that makes the layout feel designed. */
+export function spanClass(spec) {
+    const col = SIZE_CLASS[defaultSize(spec)];
+    return `${col} ${TALL_KINDS.has(spec.kind) ? 'row-span-2' : 'row-span-1'}`;
+}
+/** True for chart/list widgets that occupy 2 rows. Used to order compact KPIs
+ * before charts in the unified grid so the top reads as a metric band. */
+export function isTallWidget(spec) {
+    return TALL_KINDS.has(spec.kind);
+}
 const RENDERERS = {
     stat: StatWidget,
     bar: BarWidget,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "18.17.0",
+  "version": "18.17.2",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",
@@ -64,8 +64,8 @@
     "typescript": "^6.0.0",
     "vitest": "^4.0.0",
     "zustand": "^5.0.0",
-    "@asteby/metacore-sdk": "3.2.0",
-    "@asteby/metacore-ui": "2.5.2"
+    "@asteby/metacore-ui": "2.5.2",
+    "@asteby/metacore-sdk": "3.2.0"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",

package/src/dashboard-grid.tsx

@@ -15,7 +15,7 @@ import type {
     DashboardWidgetGroup,
     DashboardWidgetSpec,
 } from './dashboard-types'
-import { WidgetRenderer, WidgetSkeleton, SIZE_CLASS } from './widgets/widget-renderer'
+import { WidgetRenderer, WidgetSkeleton, isTallWidget } from './widgets/widget-renderer'
 
 const DEFAULT_STRINGS: DashboardGridStrings = {
     emptyTitle: 'Your dashboard is empty',
@@ -155,52 +155,58 @@ export function DashboardGrid({
         )
     }
 
+    // ONE unified dense grid across every group. Per-group sections used to
+    // break the layout into rows, so a lone-widget group (e.g. a single KPI)
+    // left the rest of its row blank. Flattening + `grid-flow-row-dense`
+    // backfills those holes; ordering compact KPIs before charts makes the top
+    // read as a metric band and the charts mosaic below it. No blank space.
+    const ordered = React.useMemo(() => {
+        const flat = visibleGroups.flatMap((g) => g.widgets)
+        return flat
+            .map((w, i) => ({ w, i }))
+            .sort(
+                (a, b) =>
+                    (isTallWidget(a.w) ? 1 : 0) - (isTallWidget(b.w) ? 1 : 0) ||
+                    a.i - b.i,
+            )
+            .map((x) => x.w)
+    }, [visibleGroups])
+
     return (
-        <div data-testid="dashboard-grid" className={cn('flex flex-col gap-8', className)}>
-            {visibleGroups.map((group) => (
-                <section key={group.title || '__default'} className="flex flex-col gap-3">
-                    {group.title && (
-                        <h2 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
-                            {tr(group.title, group.title)}
-                        </h2>
-                    )}
-                    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
-                        {group.widgets.map((spec) => {
-                            const size = spec.size ?? 'sm'
-                            return (
-                                <div key={spec.key} className={SIZE_CLASS[size]}>
-                                    {loading ? (
-                                        <WidgetSkeleton
-                                            spec={{
-                                                ...spec,
-                                                title: tr(spec.title, spec.title),
-                                                subtitle: tr(spec.subtitle, spec.subtitle),
-                                            }}
-                                        />
-                                    ) : (
-                                        <WidgetRenderer
-                                            spec={{
-                                                ...spec,
-                                                title: tr(spec.title, spec.title),
-                                                subtitle: tr(spec.subtitle, spec.subtitle),
-                                            }}
-                                            data={data?.[spec.key]}
-                                            locale={locale}
-                                            currency={currency}
-                                            emptyText={
-                                                spec.empty
-                                                    ? tr(spec.empty, spec.empty)
-                                                    : s.widgetEmpty
-                                            }
-                                            errorText={s.widgetError}
-                                        />
-                                    )}
-                                </div>
-                            )
-                        })}
+        <div
+            data-testid="dashboard-grid"
+            className={cn(
+                // Masonry: balanced CSS columns. Cards take their natural height
+                // (compact stats, taller charts) and flow to equalize column
+                // height, so there are NO blank cells — the gaps a fixed grid
+                // leaves around mixed 1×1 / 2×2 tiles simply don't exist here.
+                'columns-1 gap-4 md:columns-2 xl:columns-3',
+                className,
+            )}
+        >
+            {ordered.map((spec) => {
+                const rspec = {
+                    ...spec,
+                    title: tr(spec.title, spec.title),
+                    subtitle: tr(spec.subtitle, spec.subtitle),
+                }
+                return (
+                    <div key={spec.key} className="mb-4 break-inside-avoid">
+                        {loading ? (
+                            <WidgetSkeleton spec={rspec} />
+                        ) : (
+                            <WidgetRenderer
+                                spec={rspec}
+                                data={data?.[spec.key]}
+                                locale={locale}
+                                currency={currency}
+                                emptyText={spec.empty ? tr(spec.empty, spec.empty) : s.widgetEmpty}
+                                errorText={s.widgetError}
+                            />
+                        )}
                     </div>
-                </section>
-            ))}
+                )
+            })}
         </div>
     )
 }

package/src/widgets/renderers.tsx

@@ -53,7 +53,20 @@ const fmtCtx = (
 const hasSeries = (d?: WidgetData): d is WidgetData & { series: NonNullable<WidgetData['series']> } =>
     Array.isArray(d?.series) && d!.series!.length > 0
 
-const CHART_HEIGHT = 132
+// Fixed-height chart body. In the masonry (CSS columns) layout cards take their
+// natural height, so charts need a definite height for ResponsiveContainer to
+// resolve. This height + the card chrome gives every chart card a consistent,
+// taller footprint that balances cleanly against compact stat cards.
+const CHART_H = 'h-[190px]'
+function ChartArea({ children }: { children: React.ReactElement }) {
+    return (
+        <div className={cn(CHART_H, 'w-full')}>
+            <ResponsiveContainer width="100%" height="100%">
+                {children}
+            </ResponsiveContainer>
+        </div>
+    )
+}
 
 // Compact recharts tooltip styled with theme tokens.
 function ChartTooltip({ ctx }: { ctx: WidgetFormatCtx }) {
@@ -94,11 +107,15 @@ export function StatWidget(p: WidgetRenderProps) {
             }
         >
             {hasValue ? (
-                <div className="text-3xl font-semibold tabular-nums tracking-tight text-foreground">
-                    {formatWidgetValue(value!, ctx)}
+                <div className="flex min-h-[2.5rem] items-end">
+                    <div className="text-[2rem] font-semibold leading-none tabular-nums tracking-tight text-foreground">
+                        {formatWidgetValue(value!, ctx)}
+                    </div>
                 </div>
             ) : (
-                <WidgetEmpty message={p.emptyText} />
+                <div className="flex min-h-[2.5rem] items-center text-sm text-muted-foreground">
+                    {p.emptyText}
+                </div>
             )}
         </WidgetCard>
     )
@@ -117,7 +134,7 @@ export function BarWidget(p: WidgetRenderProps) {
             accent={p.spec.accent}
         >
             {hasSeries(p.data) ? (
-                <ResponsiveContainer width="100%" height={CHART_HEIGHT}>
+                <ChartArea>
                     <BarChart data={p.data.series} margin={{ top: 4, right: 4, left: -16, bottom: 0 }}>
                         <CartesianGrid vertical={false} stroke={CHART_GRID} strokeDasharray="3 3" />
                         <XAxis
@@ -135,9 +152,9 @@ export function BarWidget(p: WidgetRenderProps) {
                             tickFormatter={(v: number) => formatAxisTick(v, ctx)}
                         />
                         <ChartTooltip ctx={ctx} />
-                        <Bar dataKey="value" fill={a.chartVar} radius={[4, 4, 0, 0]} maxBarSize={40} />
+                        <Bar dataKey="value" fill={a.chartVar} radius={[4, 4, 0, 0]} maxBarSize={48} />
                     </BarChart>
-                </ResponsiveContainer>
+                </ChartArea>
             ) : (
                 <WidgetEmpty message={p.emptyText} />
             )}
@@ -159,7 +176,7 @@ function TimeSeriesWidget(p: WidgetRenderProps & { variant: 'line' | 'area' }) {
             accent={p.spec.accent}
         >
             {hasSeries(p.data) ? (
-                <ResponsiveContainer width="100%" height={CHART_HEIGHT}>
+                <ChartArea>
                     {p.variant === 'area' ? (
                         <AreaChart data={p.data.series} margin={{ top: 4, right: 6, left: -16, bottom: 0 }}>
                             <defs>
@@ -183,7 +200,7 @@ function TimeSeriesWidget(p: WidgetRenderProps & { variant: 'line' | 'area' }) {
                             <Line type="monotone" dataKey="value" stroke={a.chartVar} strokeWidth={2} dot={false} activeDot={{ r: 4 }} />
                         </LineChart>
                     )}
-                </ResponsiveContainer>
+                </ChartArea>
             ) : (
                 <WidgetEmpty message={p.emptyText} />
             )}
@@ -210,26 +227,28 @@ function CircularWidget(p: WidgetRenderProps & { variant: 'pie' | 'donut' }) {
             accent={p.spec.accent}
         >
             {hasSeries(p.data) ? (
-                <div className="flex items-center gap-3">
-                    <ResponsiveContainer width="50%" height={CHART_HEIGHT}>
-                        <PieChart>
-                            <ChartTooltip ctx={ctx} />
-                            <Pie
-                                data={p.data.series}
-                                dataKey="value"
-                                nameKey="label"
-                                innerRadius={p.variant === 'donut' ? 32 : 0}
-                                outerRadius={56}
-                                paddingAngle={p.variant === 'donut' ? 2 : 0}
-                                stroke="var(--background, #fff)"
-                                strokeWidth={2}
-                            >
-                                {p.data.series.map((_, i) => (
-                                    <Cell key={i} fill={paletteColor(i)} />
-                                ))}
-                            </Pie>
-                        </PieChart>
-                    </ResponsiveContainer>
+                <div className={cn(CHART_H, 'flex items-center gap-3')}>
+                    <div className="h-full min-h-0 w-[46%] shrink-0">
+                        <ResponsiveContainer width="100%" height="100%">
+                            <PieChart>
+                                <ChartTooltip ctx={ctx} />
+                                <Pie
+                                    data={p.data.series}
+                                    dataKey="value"
+                                    nameKey="label"
+                                    innerRadius={p.variant === 'donut' ? '55%' : 0}
+                                    outerRadius="92%"
+                                    paddingAngle={p.variant === 'donut' ? 2 : 0}
+                                    stroke="var(--background, #fff)"
+                                    strokeWidth={2}
+                                >
+                                    {p.data.series.map((_, i) => (
+                                        <Cell key={i} fill={paletteColor(i)} />
+                                    ))}
+                                </Pie>
+                            </PieChart>
+                        </ResponsiveContainer>
+                    </div>
                     <ul className="flex min-w-0 flex-1 flex-col gap-1.5">
                         {p.data.series.slice(0, 6).map((pt, i) => (
                             <li key={pt.key} className="flex items-center gap-2 text-xs">

package/src/widgets/widget-card.tsx

@@ -78,7 +78,7 @@ export function WidgetCard({
                 </div>
                 {headerExtra && <div className="shrink-0">{headerExtra}</div>}
             </CardHeader>
-            <CardContent className="flex flex-1 flex-col justify-end pt-1">
+            <CardContent className="flex min-h-0 flex-1 flex-col pt-1">
                 {children}
             </CardContent>
         </Card>

package/src/widgets/widget-renderer.tsx

@@ -26,12 +26,37 @@ export const SIZE_SPAN: Record<WidgetSize, number> = {
     full: 4,
 }
 
-/** Tailwind col-span class per size (static → scanned in this package build). */
+/** Tailwind col-span class per size (static → scanned in this package build).
+ * Grid is 2 cols on mobile, 4 on lg: sm=quarter, md=half, lg=¾, full=row. */
 export const SIZE_CLASS: Record<WidgetSize, string> = {
-    sm: 'sm:col-span-2 lg:col-span-1',
-    md: 'sm:col-span-2 lg:col-span-2',
-    lg: 'sm:col-span-2 lg:col-span-3',
-    full: 'sm:col-span-2 lg:col-span-4',
+    sm: 'col-span-1 lg:col-span-1',
+    md: 'col-span-2 lg:col-span-2',
+    lg: 'col-span-2 lg:col-span-3',
+    full: 'col-span-2 lg:col-span-4',
+}
+
+/** Kinds that render a chart/list and want extra vertical room (2 grid rows).
+ * Stat/progress stay a single compact row so KPIs read like KPIs, not slabs. */
+const TALL_KINDS = new Set(['bar', 'line', 'area', 'pie', 'donut', 'list', 'custom'])
+
+/** Default footprint when a spec omits `size`: charts go half-width, stats a
+ * quarter — so a tablero of mixed widgets packs densely without manual sizing. */
+export function defaultSize(spec: DashboardWidgetSpec): WidgetSize {
+    if (spec.size) return spec.size
+    return TALL_KINDS.has(spec.kind) ? 'md' : 'sm'
+}
+
+/** Combined col + row span for a widget's grid cell. Row-span drives the
+ * height contrast (chart=2, stat=1) that makes the layout feel designed. */
+export function spanClass(spec: DashboardWidgetSpec): string {
+    const col = SIZE_CLASS[defaultSize(spec)]
+    return `${col} ${TALL_KINDS.has(spec.kind) ? 'row-span-2' : 'row-span-1'}`
+}
+
+/** True for chart/list widgets that occupy 2 rows. Used to order compact KPIs
+ * before charts in the unified grid so the top reads as a metric band. */
+export function isTallWidget(spec: DashboardWidgetSpec): boolean {
+    return TALL_KINDS.has(spec.kind)
 }
 
 const RENDERERS: Record<