@asteby/metacore-runtime-react 27.3.0 → 27.3.2

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @asteby/metacore-runtime-react
 
+## 27.3.2
+
+### Patch Changes
+
+- c58b455: Empty state del Tablero: el mockup animado ahora reorganiza toda la grilla en
+  loop, pasando por cuatro composiciones de dashboard (A→B→C→D→A) — las skeleton
+  cards crecen, se achican y se redistribuyen como widgets reales probando
+  acomodos mientras carga. ~2s de reposo por layout y ~1.2s de transición fluida
+  sincronizada (todas las cards transicionan a la vez, mismo easing).
+
+  Cero solapes garantizado por construcción: la grilla son 3 columnas en orden
+  fijo × top/bottom, y cada layout solo cambia anchos de columna y el split
+  top/bottom, así que todo par de tiles conserva un eje de separación consistente
+  con un `gap` constante — bajo interpolación lineal eso jamás se cruza. Se agrega
+  un test que interpola los rects (t=0..1, paso 0.05) en cada transición y asserta
+  0 solapes (estático + en tránsito). Se mantiene tokens de tema, skeleton interno
+  tipo widget card, `prefers-reduced-motion: reduce` → grilla estática (layout A) y
+  `aria-hidden`.
+
+## 27.3.1
+
+### Patch Changes
+
+- ccfb7b0: Empty state del Tablero: el mockup animado ahora es full-bleed, se mueve más y
+  va sin texto. Antes se percibía como una ilustración centrada casi estática con
+  un caption en inglés. Ahora los tiles skeleton llenan todo el área del
+  dashboard en una grilla 4×4 y se reacomodan de forma visible —pares que se
+  intercambian de lugar (horizontal, vertical y diagonal) con translate suave,
+  escalonados para que siempre haya 2-3 piezas en movimiento— como si el tablero
+  se estuviera armando solo. Se eliminó el caption ("Your dashboard is taking
+  shape"): la animación habla sola y así no se envía copy sin localizar. Se
+  mantiene el loop lento (~13s), tokens de tema y `prefers-reduced-motion: reduce`
+  (congela todo). El mock sigue decorativo (`aria-hidden`).
+
 ## 27.3.0
 
 ### Minor Changes

package/dist/dashboard-empty-mockup.d.ts

@@ -1,9 +1,41 @@
 import * as React from 'react';
+/** A tile's rectangle in percent of the container (both axes 0–100). */
+export interface MockupRect {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+interface LayoutSpec {
+    widths: [number, number, number];
+    splits: [number, number, number];
+}
+export declare const MOCKUP_LAYOUTS: LayoutSpec[];
+/** Horizontal/vertical gap between tiles, in percent. */
+export declare const MOCKUP_GAP = 3;
 /**
- * Animated skeleton of a dashboard (chart + stats + bar + list) whose tiles
- * slowly drift and settle. Purely decorative — always `aria-hidden`.
+ * Computes the six tile rects for one layout. Tile order is
+ * [c0-top, c0-bottom, c1-top, c1-bottom, c2-top, c2-bottom].
+ *
+ * Columns keep a constant `gap` between them and top/bottom keep a constant
+ * `gap` between them — this is what makes every transition overlap-free.
+ */
+export declare function computeLayoutRects(layout: LayoutSpec, gap?: number): MockupRect[];
+/** The precomputed rects for all four layouts (exported for the overlap test). */
+export declare function mockupLayoutRects(gap?: number): MockupRect[][];
+/**
+ * Full-bleed skeleton dashboard that reflows through four layouts on a loop.
+ * Overlap-free by construction (see the invariant note above). Purely
+ * decorative — always `aria-hidden`, no text.
+ *
+ * Contract: tiles are positioned with percentage heights, so the CONTAINER
+ * must have a DEFINITE height (e.g. `h-[…]`, or a flex child with `flex-1`).
+ * A parent with only `min-height` leaves the box auto-height and the tiles
+ * collapse into a strip. The dashboard empty state mounts it inside a
+ * definite-height box for exactly this reason.
  */
 export declare function DashboardEmptyMockup({ className }: {
     className?: string;
 }): React.JSX.Element;
+export {};
 //# sourceMappingURL=dashboard-empty-mockup.d.ts.map

package/dist/dashboard-empty-mockup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dashboard-empty-mockup.d.ts","sourceRoot":"","sources":["../src/dashboard-empty-mockup.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAoD9B;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,qBA4CzE"}
+{"version":3,"file":"dashboard-empty-mockup.d.ts","sourceRoot":"","sources":["../src/dashboard-empty-mockup.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,wEAAwE;AACxE,MAAM,WAAW,UAAU;IACvB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACZ;AAKD,UAAU,UAAU;IAChB,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;IAChC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;CACnC;AAID,eAAO,MAAM,cAAc,EAAE,UAAU,EAKtC,CAAA;AAED,yDAAyD;AACzD,eAAO,MAAM,UAAU,IAAI,CAAA;AAE3B;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,UAAU,EAAE,GAAG,SAAa,GAAG,UAAU,EAAE,CAerF;AAED,kFAAkF;AAClF,wBAAgB,iBAAiB,CAAC,GAAG,SAAa,GAAG,UAAU,EAAE,EAAE,CAElE;AA4HD;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,qBAuBzE"}

package/dist/dashboard-empty-mockup.js

@@ -1,59 +1,104 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // DashboardEmptyMockup — the animated empty state for the modular dashboard.
 //
-// Instead of a static "nothing here" card, we paint a silhouette of the
-// dashboard itself: skeleton tiles (a big chart, a couple of stat cards, a
-// bar, a list) that slowly drift and swap places, like puzzle pieces settling
-// into a layout. The metaphor is "your board is getting ready", not "empty".
+// The whole grid REORGANIZES on a loop: skeleton widget cards grow, shrink and
+// reflow through four dashboard compositions (A → B → C → D → A), as if the
+// board were trying out arrangements while it loads. No "empty" copy — the
+// motion carries the meaning.
 //
-// Design constraints (kept deliberately simple so it ships from a package):
-//   - Pure CSS keyframes, no dependencies. One slow ~11s loop, subtle motion
-//     (small translate + scale, never opacity strobing).
-//   - Theme tokens only (bg-muted / border tokens) → light & dark for free.
-//   - `prefers-reduced-motion: reduce` freezes everything (tiles rest in place).
-//   - The whole mock is decorative → aria-hidden; the copy below carries the
-//     accessible meaning.
+// ── The zero-overlap invariant (hard requirement) ──────────────────────────
+// Two earlier takes let tiles cross and overlap; the user rejected them. This
+// version makes overlap IMPOSSIBLE by construction, not by tuning:
 //
-// The keyframes ship inline in a <style> tag rather than as Tailwind utilities:
-// consumer apps scan only their OWN source for Tailwind classes, so arbitrary
-// animation utilities declared here would never be generated in their build.
-// Static tokens (bg-muted, rounded-lg…) are standard classes the host emits
-// anyway, so those stay as className.
+//   The board is 3 COLUMNS in a FIXED left-to-right order, each split into a
+//   TOP and BOTTOM tile — 6 tiles total. Every layout only changes the column
+//   WIDTHS and the per-column top/bottom SPLIT. Because column order never
+//   changes and top is always above bottom, EVERY pair of tiles keeps a
+//   consistent separating axis in every layout, with a constant `gap` between
+//   neighbours. Under linear interpolation a gap that is `gap` at both ends of
+//   a transition stays exactly `gap` throughout — so no two tiles can ever
+//   touch, at any frame, during any transition. (Verified independently by the
+//   interpolation check in dashboard-empty-mockup.test — 0 overlaps.)
+//
+// Design constraints kept from the spec:
+//   - Full-bleed (fills the whole dashboard area).
+//   - Pure CSS keyframes, no dependencies; injected once per document.
+//   - Synchronised reflow: all tiles share one duration / easing / timing, so
+//     A→B reads as a single reorganisation. ~2s rest per layout, ~1.2s glide.
+//   - Theme tokens only (bg-card / border / muted) → light & dark for free.
+//   - `prefers-reduced-motion: reduce` → the static A layout, no motion.
+//   - Decorative → aria-hidden, no text.
 import * as React from 'react';
 import { cn } from '@asteby/metacore-ui/lib';
-// Scoped, collision-proof keyframe + class names (prefixed, unlikely to clash).
 const STYLE_ID = 'mc-dashboard-empty-mockup-style';
-const MOCKUP_CSS = `
-.mc-demock{--mc-demock-dur:11s}
-.mc-demock-tile{will-change:transform;transform-origin:center;
-  animation-duration:var(--mc-demock-dur);animation-timing-function:cubic-bezier(.65,0,.35,1);
-  animation-iteration-count:infinite}
-.mc-demock-t1{animation-name:mc-demock-drift-a}
-.mc-demock-t2{animation-name:mc-demock-drift-b;animation-delay:-1.4s}
-.mc-demock-t3{animation-name:mc-demock-drift-c;animation-delay:-3.1s}
-.mc-demock-t4{animation-name:mc-demock-drift-d;animation-delay:-2.2s}
-.mc-demock-t5{animation-name:mc-demock-drift-e;animation-delay:-4.6s}
-.mc-demock-shimmer{position:relative;overflow:hidden}
-.mc-demock-shimmer::after{content:"";position:absolute;inset:0;
-  background:linear-gradient(105deg,transparent 30%,currentColor 50%,transparent 70%);
-  opacity:.05;transform:translateX(-100%);
-  animation:mc-demock-sheen var(--mc-demock-dur) ease-in-out infinite}
-@keyframes mc-demock-drift-a{0%,100%{transform:translate3d(0,0,0) scale(1)}
-  50%{transform:translate3d(3%,4%,0) scale(1.015)}}
-@keyframes mc-demock-drift-b{0%,100%{transform:translate3d(0,0,0) scale(1)}
-  50%{transform:translate3d(-4%,-3%,0) scale(.985)}}
-@keyframes mc-demock-drift-c{0%,100%{transform:translate3d(0,0,0) scale(1)}
-  50%{transform:translate3d(5%,-2%,0) scale(1.02)}}
-@keyframes mc-demock-drift-d{0%,100%{transform:translate3d(0,0,0) scale(1)}
-  50%{transform:translate3d(-3%,3%,0) scale(.99)}}
-@keyframes mc-demock-drift-e{0%,100%{transform:translate3d(0,0,0) scale(1)}
-  50%{transform:translate3d(2%,-4%,0) scale(1.01)}}
-@keyframes mc-demock-sheen{0%,100%{transform:translateX(-120%)}55%,70%{transform:translateX(120%)}}
-@media (prefers-reduced-motion:reduce){
-  .mc-demock-tile{animation:none!important}
-  .mc-demock-shimmer::after{animation:none!important;opacity:0}
+// Four visibly different compositions: balanced → left-heavy → centre-heavy →
+// right-heavy. The loop returns to A, so it is seamless.
+export const MOCKUP_LAYOUTS = [
+    { widths: [40, 32, 28], splits: [0.5, 0.6, 0.45] },
+    { widths: [52, 24, 24], splits: [0.62, 0.4, 0.55] },
+    { widths: [24, 52, 24], splits: [0.4, 0.55, 0.62] },
+    { widths: [26, 28, 46], splits: [0.55, 0.5, 0.4] },
+];
+/** Horizontal/vertical gap between tiles, in percent. */
+export const MOCKUP_GAP = 3;
+/**
+ * Computes the six tile rects for one layout. Tile order is
+ * [c0-top, c0-bottom, c1-top, c1-bottom, c2-top, c2-bottom].
+ *
+ * Columns keep a constant `gap` between them and top/bottom keep a constant
+ * `gap` between them — this is what makes every transition overlap-free.
+ */
+export function computeLayoutRects(layout, gap = MOCKUP_GAP) {
+    const usableW = 100 - 2 * gap;
+    const usableH = 100 - gap;
+    const sum = layout.widths[0] + layout.widths[1] + layout.widths[2];
+    const colW = layout.widths.map((w) => (w / sum) * usableW);
+    const colX = [0, colW[0] + gap, colW[0] + colW[1] + 2 * gap];
+    const rects = [];
+    for (let c = 0; c < 3; c++) {
+        const topH = layout.splits[c] * usableH;
+        const botH = usableH - topH;
+        rects.push({ x: colX[c], y: 0, w: colW[c], h: topH });
+        rects.push({ x: colX[c], y: topH + gap, w: colW[c], h: botH });
+    }
+    return rects;
+}
+/** The precomputed rects for all four layouts (exported for the overlap test). */
+export function mockupLayoutRects(gap = MOCKUP_GAP) {
+    return MOCKUP_LAYOUTS.map((l) => computeLayoutRects(l, gap));
 }
+// Keyframe stops. Cycle = 12.8s: per layout ~2s rest + ~1.2s glide. The stops
+// hold each layout, then glide to the next; 100% == 0% (layout A) → seamless.
+const STOPS = [0, 15.625, 25, 40.625, 50, 65.625, 75, 90.625, 100];
+const STOP_LAYOUT = [0, 0, 1, 1, 2, 2, 3, 3, 0]; // which layout at each stop
+const fmt = (n) => `${Math.round(n * 1000) / 1000}%`;
+/** Builds the full <style> text: per-tile keyframes cycling through the rects. */
+function buildCss() {
+    const layouts = mockupLayoutRects();
+    const tiles = layouts[0].length;
+    let css = `
+.mc-demock{position:relative;height:100%;width:100%}
+.mc-demock-tile{position:absolute;
+  animation-duration:12.8s;animation-timing-function:cubic-bezier(.65,0,.35,1);
+  animation-iteration-count:infinite;will-change:top,left,width,height}
+.mc-demock-shimmer{overflow:hidden}
+.mc-demock-shimmer::after{content:"";position:absolute;inset:0;
+  background:linear-gradient(105deg,transparent 35%,currentColor 50%,transparent 65%);
+  opacity:.045;transform:translateX(-120%);
+  animation:mc-demock-sheen 12.8s ease-in-out infinite}
+@keyframes mc-demock-sheen{0%,100%{transform:translateX(-120%)}55%,72%{transform:translateX(120%)}}
 `;
+    for (let i = 0; i < tiles; i++) {
+        css += `.mc-demock-t${i}{animation-name:mc-demock-k${i}}\n@keyframes mc-demock-k${i}{`;
+        for (let s = 0; s < STOPS.length; s++) {
+            const r = layouts[STOP_LAYOUT[s]][i];
+            css += `${fmt(STOPS[s])}{left:${fmt(r.x)};top:${fmt(r.y)};width:${fmt(r.w)};height:${fmt(r.h)}}`;
+        }
+        css += `}\n`;
+    }
+    css += `@media (prefers-reduced-motion:reduce){.mc-demock-tile{animation:none!important}.mc-demock-shimmer::after{animation:none!important;opacity:0}}\n`;
+    return css;
+}
 /** Injects the keyframes once per document (idempotent, SSR-safe). */
 function useMockupStyles() {
     React.useInsertionEffect(() => {
@@ -63,16 +108,39 @@ function useMockupStyles() {
             return;
         const el = document.createElement('style');
         el.id = STYLE_ID;
-        el.textContent = MOCKUP_CSS;
+        el.textContent = buildCss();
         document.head.appendChild(el);
     }, []);
 }
-const tile = 'rounded-lg bg-muted mc-demock-tile mc-demock-shimmer text-foreground';
+const tileBase = 'rounded-lg border border-border/60 bg-card mc-demock-tile mc-demock-shimmer text-foreground';
+// Header shared by every card kind — icon chip + title bar + subtitle bar,
+// mirroring the real WidgetCard chrome (widgets/widget-card.tsx).
+function SkeletonHeader() {
+    return (_jsxs("div", { className: "flex items-start gap-2.5", children: [_jsx("div", { className: "size-8 shrink-0 rounded-lg bg-foreground/10" }), _jsxs("div", { className: "flex-1 space-y-1.5 pt-0.5", children: [_jsx("div", { className: "h-2.5 w-2/3 rounded bg-foreground/12" }), _jsx("div", { className: "h-2 w-2/5 rounded bg-foreground/[.07]" })] })] }));
+}
+// Bodies copy the anatomy of the matching real renderers (renderers.tsx).
+function TileGlyph({ kind }) {
+    return (_jsxs("div", { className: "flex h-full flex-col gap-3 overflow-hidden p-3", children: [_jsx(SkeletonHeader, {}), _jsxs("div", { className: "min-h-0 flex-1", children: [kind === 'stat' && (_jsxs("div", { className: "flex h-full flex-col justify-center gap-2", children: [_jsx("div", { className: "h-6 w-1/2 rounded-md bg-foreground/15" }), _jsx("div", { className: "h-4 w-14 rounded-full bg-foreground/10" })] })), kind === 'chart' && (_jsx("div", { className: "flex h-full items-end gap-1.5", children: [46, 72, 38, 84, 58, 92, 50].map((h, i) => (_jsx("div", { className: "w-full rounded-sm bg-foreground/10", style: { height: `${h}%` } }, i))) })), kind === 'list' && (_jsx("div", { className: "flex h-full flex-col justify-center gap-2.5", children: [28, 40, 34].map((w, i) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "size-5 shrink-0 rounded-full bg-foreground/10" }), _jsx("div", { className: "h-2 flex-1 rounded-full bg-foreground/10" }), _jsx("div", { className: "h-2 shrink-0 rounded-full bg-foreground/12", style: { width: w } })] }, i))) })), kind === 'bar' && (_jsxs("div", { className: "flex h-full flex-col justify-center gap-3", children: [_jsx("div", { className: "h-2.5 w-full rounded-full bg-foreground/10", children: _jsx("div", { className: "h-full w-3/5 rounded-full bg-foreground/20" }) }), _jsx("div", { className: "h-2.5 w-full rounded-full bg-foreground/10", children: _jsx("div", { className: "h-full w-2/5 rounded-full bg-foreground/20" }) })] }))] })] }));
+}
+// Kind per tile, in the [c0-top, c0-bottom, c1-top, c1-bottom, c2-top, c2-bottom]
+// order used by computeLayoutRects.
+const TILE_KINDS = ['stat', 'chart', 'chart', 'list', 'stat', 'bar'];
 /**
- * Animated skeleton of a dashboard (chart + stats + bar + list) whose tiles
- * slowly drift and settle. Purely decorative — always `aria-hidden`.
+ * Full-bleed skeleton dashboard that reflows through four layouts on a loop.
+ * Overlap-free by construction (see the invariant note above). Purely
+ * decorative — always `aria-hidden`, no text.
+ *
+ * Contract: tiles are positioned with percentage heights, so the CONTAINER
+ * must have a DEFINITE height (e.g. `h-[…]`, or a flex child with `flex-1`).
+ * A parent with only `min-height` leaves the box auto-height and the tiles
+ * collapse into a strip. The dashboard empty state mounts it inside a
+ * definite-height box for exactly this reason.
  */
 export function DashboardEmptyMockup({ className }) {
     useMockupStyles();
-    return (_jsx("div", { "aria-hidden": "true", "data-testid": "dashboard-empty-mockup", className: cn('mc-demock pointer-events-none w-full max-w-md select-none', className), children: _jsxs("div", { className: "grid grid-cols-3 grid-rows-[repeat(3,minmax(0,1fr))] gap-3 [aspect-ratio:16/11]", children: [_jsx("div", { className: cn(tile, 'mc-demock-t1 col-span-2 row-span-2 flex flex-col justify-end gap-2 p-3'), children: _jsxs("div", { className: "flex items-end gap-1.5", children: [_jsx("div", { className: "h-6 w-full rounded-sm bg-foreground/10" }), _jsx("div", { className: "h-10 w-full rounded-sm bg-foreground/10" }), _jsx("div", { className: "h-7 w-full rounded-sm bg-foreground/10" }), _jsx("div", { className: "h-12 w-full rounded-sm bg-foreground/10" }), _jsx("div", { className: "h-9 w-full rounded-sm bg-foreground/10" })] }) }), _jsxs("div", { className: cn(tile, 'mc-demock-t2 flex flex-col justify-center gap-2 p-3'), children: [_jsx("div", { className: "h-2 w-1/2 rounded-full bg-foreground/15" }), _jsx("div", { className: "h-4 w-2/3 rounded bg-foreground/15" })] }), _jsxs("div", { className: cn(tile, 'mc-demock-t3 flex flex-col justify-center gap-2 p-3'), children: [_jsx("div", { className: "h-2 w-1/2 rounded-full bg-foreground/15" }), _jsx("div", { className: "h-4 w-1/2 rounded bg-foreground/15" })] }), _jsxs("div", { className: cn(tile, 'mc-demock-t4 flex flex-col justify-center gap-2 p-3'), children: [_jsx("div", { className: "h-2 w-full rounded-full bg-foreground/12" }), _jsx("div", { className: "h-2 w-4/5 rounded-full bg-foreground/12" }), _jsx("div", { className: "h-2 w-2/3 rounded-full bg-foreground/12" })] }), _jsx("div", { className: cn(tile, 'mc-demock-t5 col-span-2 flex items-center px-3'), children: _jsx("div", { className: "h-2.5 w-full rounded-full bg-foreground/10", children: _jsx("div", { className: "h-full w-2/5 rounded-full bg-foreground/20" }) }) })] }) }));
+    const layoutA = React.useMemo(() => computeLayoutRects(MOCKUP_LAYOUTS[0]), []);
+    return (_jsx("div", { "aria-hidden": "true", "data-testid": "dashboard-empty-mockup", className: cn('mc-demock pointer-events-none select-none', className), children: layoutA.map((r, i) => (_jsx("div", { "data-mockup-tile": "tile", className: cn(tileBase, `mc-demock-t${i}`), 
+            // Base position = layout A, so reduced-motion (animation off)
+            // shows the full static composition.
+            style: { left: `${r.x}%`, top: `${r.y}%`, width: `${r.w}%`, height: `${r.h}%` }, children: _jsx(TileGlyph, { kind: TILE_KINDS[i] }) }, i))) }));
 }

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;AAI9B,OAAO,KAAK,EACR,kBAAkB,EAElB,oBAAoB,EACpB,mBAAmB,EACtB,MAAM,mBAAmB,CAAA;AAY1B,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,qBAiJpB"}
+{"version":3,"file":"dashboard-grid.d.ts","sourceRoot":"","sources":["../src/dashboard-grid.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EACR,kBAAkB,EAElB,oBAAoB,EACpB,mBAAmB,EACtB,MAAM,mBAAmB,CAAA;AAY1B,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,qBAmJpB"}

package/dist/dashboard-grid.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 // DashboardGrid — the modular dashboard surface. Renders the union of
 // declarative + federated widgets in a responsive 4-column grid, grouped with
 // headings, honouring per-widget size, permission gating (useCan), batch data
@@ -120,7 +120,18 @@ export function DashboardGrid({ groups, widgets, loadData, isAdmin, locale, curr
     }, [visibleGroups]);
     // Global empty state (no widgets at all / none visible after gating).
     if (visibleGroups.length === 0) {
-        return (_jsxs("div", { "data-testid": "dashboard-empty", className: cn('flex min-h-[40vh] flex-col items-center justify-center gap-6 rounded-xl border border-dashed border-border/60 p-10 text-center', className), children: [_jsx(DashboardEmptyMockup, {}), _jsxs("div", { className: "flex flex-col items-center", children: [_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-empty", className: cn(
+            // Full-bleed: the mockup fills the whole dashboard area, not a
+            // centered illustration. No caption — the animation speaks for
+            // itself (and dodges shipping un-localized copy).
+            //
+            // DEFINITE height (clamp), not min-height: the mockup positions
+            // its tiles with percentage heights, which only resolve against a
+            // parent whose height is definite. A min-height alone leaves the
+            // box auto-height and the tiles collapse into a strip — so we own
+            // the height here instead of hoping the dashboard layout supplies
+            // one.
+            'h-[clamp(420px,60vh,720px)] w-full rounded-xl border border-dashed border-border/60 p-4', className), children: _jsx(DashboardEmptyMockup, { className: "h-full" }) }));
     }
     return (_jsx("div", { "data-testid": "dashboard-grid", className: cn(
         // Masonry: balanced CSS columns. Cards take their natural height

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "27.3.0",
+  "version": "27.3.2",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",

package/src/__tests__/dashboard-empty-mockup.test.ts

@@ -0,0 +1,83 @@
+// Zero-overlap invariant for the reflowing empty-state mockup.
+//
+// The animation reflows through four layouts (A→B→C→D→A). The hard requirement
+// is that NO two tiles overlap at ANY frame — including mid-transition, where
+// CSS interpolates each tile's rect (left/top/width/height) linearly. This test
+// reproduces that linear interpolation and asserts non-overlap across every
+// transition at fine time steps, so a future layout edit that would introduce a
+// crossing fails here instead of in production.
+
+import { describe, expect, it } from 'vitest'
+import {
+    MockupRect,
+    mockupLayoutRects,
+} from '../dashboard-empty-mockup'
+
+const lerp = (a: number, b: number, t: number) => a + (b - a) * t
+const lerpRect = (a: MockupRect, b: MockupRect, t: number): MockupRect => ({
+    x: lerp(a.x, b.x, t),
+    y: lerp(a.y, b.y, t),
+    w: lerp(a.w, b.w, t),
+    h: lerp(a.h, b.h, t),
+})
+
+// Overlap area with a tiny epsilon so exact edge-adjacency (gap = 0 would-be
+// touching) does not count; here tiles are separated by a real gap anyway.
+const EPS = 1e-6
+function overlapArea(a: MockupRect, b: MockupRect): number {
+    const ox = Math.min(a.x + a.w, b.x + b.w) - Math.max(a.x, b.x)
+    const oy = Math.min(a.y + a.h, b.y + b.h) - Math.max(a.y, b.y)
+    if (ox <= EPS || oy <= EPS) return 0
+    return ox * oy
+}
+
+describe('dashboard empty mockup — zero-overlap invariant', () => {
+    const layouts = mockupLayoutRects()
+
+    it('has 6 tiles in every layout, all within bounds', () => {
+        for (const rects of layouts) {
+            expect(rects).toHaveLength(6)
+            for (const r of rects) {
+                expect(r.x).toBeGreaterThanOrEqual(-EPS)
+                expect(r.y).toBeGreaterThanOrEqual(-EPS)
+                expect(r.x + r.w).toBeLessThanOrEqual(100 + EPS)
+                expect(r.y + r.h).toBeLessThanOrEqual(100 + EPS)
+                expect(r.w).toBeGreaterThan(0)
+                expect(r.h).toBeGreaterThan(0)
+            }
+        }
+    })
+
+    it('no two tiles overlap in any static layout', () => {
+        for (let l = 0; l < layouts.length; l++) {
+            const rects = layouts[l]
+            for (let i = 0; i < rects.length; i++)
+                for (let j = i + 1; j < rects.length; j++)
+                    expect(overlapArea(rects[i], rects[j]), `layout ${l}, tiles ${i}&${j}`).toBe(0)
+        }
+    })
+
+    it('no two tiles overlap at any frame of any transition (A→B→C→D→A)', () => {
+        // The loop is cyclic: transition k goes layout k → (k+1) mod 4.
+        const n = layouts.length
+        let worst = 0
+        for (let k = 0; k < n; k++) {
+            const from = layouts[k]
+            const to = layouts[(k + 1) % n]
+            for (let step = 0; step <= 20; step++) {
+                const t = step / 20 // 0, 0.05, … , 1
+                const frame = from.map((r, idx) => lerpRect(r, to[idx], t))
+                for (let i = 0; i < frame.length; i++)
+                    for (let j = i + 1; j < frame.length; j++) {
+                        const area = overlapArea(frame[i], frame[j])
+                        worst = Math.max(worst, area)
+                        expect(
+                            area,
+                            `transition ${k}→${(k + 1) % n} t=${t.toFixed(2)} tiles ${i}&${j}`,
+                        ).toBe(0)
+                    }
+            }
+        }
+        expect(worst).toBe(0)
+    })
+})

package/src/__tests__/dashboard-grid.test.tsx

@@ -164,6 +164,9 @@ describe('DashboardGrid render', () => {
         expect(mock.getAttribute('aria-hidden')).toBe('true')
         // Keyframes are injected once into the document head.
         expect(document.getElementById('mc-dashboard-empty-mockup-style')).toBeTruthy()
+        // No caption text — the animation carries the meaning (and avoids
+        // shipping un-localized copy from the package).
+        expect(screen.queryByText(/dashboard/i)).toBeNull()
     })
 
     it('survives an empty → populated transition (React #310 regression)', async () => {

package/src/dashboard-empty-mockup.tsx

@@ -1,61 +1,129 @@
 // DashboardEmptyMockup — the animated empty state for the modular dashboard.
 //
-// Instead of a static "nothing here" card, we paint a silhouette of the
-// dashboard itself: skeleton tiles (a big chart, a couple of stat cards, a
-// bar, a list) that slowly drift and swap places, like puzzle pieces settling
-// into a layout. The metaphor is "your board is getting ready", not "empty".
+// The whole grid REORGANIZES on a loop: skeleton widget cards grow, shrink and
+// reflow through four dashboard compositions (A → B → C → D → A), as if the
+// board were trying out arrangements while it loads. No "empty" copy — the
+// motion carries the meaning.
 //
-// Design constraints (kept deliberately simple so it ships from a package):
-//   - Pure CSS keyframes, no dependencies. One slow ~11s loop, subtle motion
-//     (small translate + scale, never opacity strobing).
-//   - Theme tokens only (bg-muted / border tokens) → light & dark for free.
-//   - `prefers-reduced-motion: reduce` freezes everything (tiles rest in place).
-//   - The whole mock is decorative → aria-hidden; the copy below carries the
-//     accessible meaning.
+// ── The zero-overlap invariant (hard requirement) ──────────────────────────
+// Two earlier takes let tiles cross and overlap; the user rejected them. This
+// version makes overlap IMPOSSIBLE by construction, not by tuning:
 //
-// The keyframes ship inline in a <style> tag rather than as Tailwind utilities:
-// consumer apps scan only their OWN source for Tailwind classes, so arbitrary
-// animation utilities declared here would never be generated in their build.
-// Static tokens (bg-muted, rounded-lg…) are standard classes the host emits
-// anyway, so those stay as className.
+//   The board is 3 COLUMNS in a FIXED left-to-right order, each split into a
+//   TOP and BOTTOM tile — 6 tiles total. Every layout only changes the column
+//   WIDTHS and the per-column top/bottom SPLIT. Because column order never
+//   changes and top is always above bottom, EVERY pair of tiles keeps a
+//   consistent separating axis in every layout, with a constant `gap` between
+//   neighbours. Under linear interpolation a gap that is `gap` at both ends of
+//   a transition stays exactly `gap` throughout — so no two tiles can ever
+//   touch, at any frame, during any transition. (Verified independently by the
+//   interpolation check in dashboard-empty-mockup.test — 0 overlaps.)
+//
+// Design constraints kept from the spec:
+//   - Full-bleed (fills the whole dashboard area).
+//   - Pure CSS keyframes, no dependencies; injected once per document.
+//   - Synchronised reflow: all tiles share one duration / easing / timing, so
+//     A→B reads as a single reorganisation. ~2s rest per layout, ~1.2s glide.
+//   - Theme tokens only (bg-card / border / muted) → light & dark for free.
+//   - `prefers-reduced-motion: reduce` → the static A layout, no motion.
+//   - Decorative → aria-hidden, no text.
 
 import * as React from 'react'
 import { cn } from '@asteby/metacore-ui/lib'
 
-// Scoped, collision-proof keyframe + class names (prefixed, unlikely to clash).
 const STYLE_ID = 'mc-dashboard-empty-mockup-style'
 
-const MOCKUP_CSS = `
-.mc-demock{--mc-demock-dur:11s}
-.mc-demock-tile{will-change:transform;transform-origin:center;
-  animation-duration:var(--mc-demock-dur);animation-timing-function:cubic-bezier(.65,0,.35,1);
-  animation-iteration-count:infinite}
-.mc-demock-t1{animation-name:mc-demock-drift-a}
-.mc-demock-t2{animation-name:mc-demock-drift-b;animation-delay:-1.4s}
-.mc-demock-t3{animation-name:mc-demock-drift-c;animation-delay:-3.1s}
-.mc-demock-t4{animation-name:mc-demock-drift-d;animation-delay:-2.2s}
-.mc-demock-t5{animation-name:mc-demock-drift-e;animation-delay:-4.6s}
-.mc-demock-shimmer{position:relative;overflow:hidden}
-.mc-demock-shimmer::after{content:"";position:absolute;inset:0;
-  background:linear-gradient(105deg,transparent 30%,currentColor 50%,transparent 70%);
-  opacity:.05;transform:translateX(-100%);
-  animation:mc-demock-sheen var(--mc-demock-dur) ease-in-out infinite}
-@keyframes mc-demock-drift-a{0%,100%{transform:translate3d(0,0,0) scale(1)}
-  50%{transform:translate3d(3%,4%,0) scale(1.015)}}
-@keyframes mc-demock-drift-b{0%,100%{transform:translate3d(0,0,0) scale(1)}
-  50%{transform:translate3d(-4%,-3%,0) scale(.985)}}
-@keyframes mc-demock-drift-c{0%,100%{transform:translate3d(0,0,0) scale(1)}
-  50%{transform:translate3d(5%,-2%,0) scale(1.02)}}
-@keyframes mc-demock-drift-d{0%,100%{transform:translate3d(0,0,0) scale(1)}
-  50%{transform:translate3d(-3%,3%,0) scale(.99)}}
-@keyframes mc-demock-drift-e{0%,100%{transform:translate3d(0,0,0) scale(1)}
-  50%{transform:translate3d(2%,-4%,0) scale(1.01)}}
-@keyframes mc-demock-sheen{0%,100%{transform:translateX(-120%)}55%,70%{transform:translateX(120%)}}
-@media (prefers-reduced-motion:reduce){
-  .mc-demock-tile{animation:none!important}
-  .mc-demock-shimmer::after{animation:none!important;opacity:0}
+/** A tile's rectangle in percent of the container (both axes 0–100). */
+export interface MockupRect {
+    x: number
+    y: number
+    w: number
+    h: number
+}
+
+// Each layout = three column width weights + each column's top-tile height
+// fraction. Weights are relative (normalised below), so they read as intent
+// ("this column is the wide one") rather than exact percentages.
+interface LayoutSpec {
+    widths: [number, number, number]
+    splits: [number, number, number]
+}
+
+// Four visibly different compositions: balanced → left-heavy → centre-heavy →
+// right-heavy. The loop returns to A, so it is seamless.
+export const MOCKUP_LAYOUTS: LayoutSpec[] = [
+    { widths: [40, 32, 28], splits: [0.5, 0.6, 0.45] },
+    { widths: [52, 24, 24], splits: [0.62, 0.4, 0.55] },
+    { widths: [24, 52, 24], splits: [0.4, 0.55, 0.62] },
+    { widths: [26, 28, 46], splits: [0.55, 0.5, 0.4] },
+]
+
+/** Horizontal/vertical gap between tiles, in percent. */
+export const MOCKUP_GAP = 3
+
+/**
+ * Computes the six tile rects for one layout. Tile order is
+ * [c0-top, c0-bottom, c1-top, c1-bottom, c2-top, c2-bottom].
+ *
+ * Columns keep a constant `gap` between them and top/bottom keep a constant
+ * `gap` between them — this is what makes every transition overlap-free.
+ */
+export function computeLayoutRects(layout: LayoutSpec, gap = MOCKUP_GAP): MockupRect[] {
+    const usableW = 100 - 2 * gap
+    const usableH = 100 - gap
+    const sum = layout.widths[0] + layout.widths[1] + layout.widths[2]
+    const colW = layout.widths.map((w) => (w / sum) * usableW) as [number, number, number]
+    const colX = [0, colW[0] + gap, colW[0] + colW[1] + 2 * gap]
+
+    const rects: MockupRect[] = []
+    for (let c = 0; c < 3; c++) {
+        const topH = layout.splits[c] * usableH
+        const botH = usableH - topH
+        rects.push({ x: colX[c], y: 0, w: colW[c], h: topH })
+        rects.push({ x: colX[c], y: topH + gap, w: colW[c], h: botH })
+    }
+    return rects
 }
+
+/** The precomputed rects for all four layouts (exported for the overlap test). */
+export function mockupLayoutRects(gap = MOCKUP_GAP): MockupRect[][] {
+    return MOCKUP_LAYOUTS.map((l) => computeLayoutRects(l, gap))
+}
+
+// Keyframe stops. Cycle = 12.8s: per layout ~2s rest + ~1.2s glide. The stops
+// hold each layout, then glide to the next; 100% == 0% (layout A) → seamless.
+const STOPS = [0, 15.625, 25, 40.625, 50, 65.625, 75, 90.625, 100]
+const STOP_LAYOUT = [0, 0, 1, 1, 2, 2, 3, 3, 0] // which layout at each stop
+
+const fmt = (n: number) => `${Math.round(n * 1000) / 1000}%`
+
+/** Builds the full <style> text: per-tile keyframes cycling through the rects. */
+function buildCss(): string {
+    const layouts = mockupLayoutRects()
+    const tiles = layouts[0].length
+    let css = `
+.mc-demock{position:relative;height:100%;width:100%}
+.mc-demock-tile{position:absolute;
+  animation-duration:12.8s;animation-timing-function:cubic-bezier(.65,0,.35,1);
+  animation-iteration-count:infinite;will-change:top,left,width,height}
+.mc-demock-shimmer{overflow:hidden}
+.mc-demock-shimmer::after{content:"";position:absolute;inset:0;
+  background:linear-gradient(105deg,transparent 35%,currentColor 50%,transparent 65%);
+  opacity:.045;transform:translateX(-120%);
+  animation:mc-demock-sheen 12.8s ease-in-out infinite}
+@keyframes mc-demock-sheen{0%,100%{transform:translateX(-120%)}55%,72%{transform:translateX(120%)}}
 `
+    for (let i = 0; i < tiles; i++) {
+        css += `.mc-demock-t${i}{animation-name:mc-demock-k${i}}\n@keyframes mc-demock-k${i}{`
+        for (let s = 0; s < STOPS.length; s++) {
+            const r = layouts[STOP_LAYOUT[s]][i]
+            css += `${fmt(STOPS[s])}{left:${fmt(r.x)};top:${fmt(r.y)};width:${fmt(r.w)};height:${fmt(r.h)}}`
+        }
+        css += `}\n`
+    }
+    css += `@media (prefers-reduced-motion:reduce){.mc-demock-tile{animation:none!important}.mc-demock-shimmer::after{animation:none!important;opacity:0}}\n`
+    return css
+}
 
 /** Injects the keyframes once per document (idempotent, SSR-safe). */
 function useMockupStyles() {
@@ -64,59 +132,118 @@ function useMockupStyles() {
         if (document.getElementById(STYLE_ID)) return
         const el = document.createElement('style')
         el.id = STYLE_ID
-        el.textContent = MOCKUP_CSS
+        el.textContent = buildCss()
         document.head.appendChild(el)
     }, [])
 }
 
-const tile = 'rounded-lg bg-muted mc-demock-tile mc-demock-shimmer text-foreground'
+const tileBase =
+    'rounded-lg border border-border/60 bg-card mc-demock-tile mc-demock-shimmer text-foreground'
+
+type Glyph = 'chart' | 'stat' | 'list' | 'bar'
+
+// Header shared by every card kind — icon chip + title bar + subtitle bar,
+// mirroring the real WidgetCard chrome (widgets/widget-card.tsx).
+function SkeletonHeader() {
+    return (
+        <div className="flex items-start gap-2.5">
+            <div className="size-8 shrink-0 rounded-lg bg-foreground/10" />
+            <div className="flex-1 space-y-1.5 pt-0.5">
+                <div className="h-2.5 w-2/3 rounded bg-foreground/12" />
+                <div className="h-2 w-2/5 rounded bg-foreground/[.07]" />
+            </div>
+        </div>
+    )
+}
+
+// Bodies copy the anatomy of the matching real renderers (renderers.tsx).
+function TileGlyph({ kind }: { kind: Glyph }) {
+    return (
+        <div className="flex h-full flex-col gap-3 overflow-hidden p-3">
+            <SkeletonHeader />
+            <div className="min-h-0 flex-1">
+                {kind === 'stat' && (
+                    <div className="flex h-full flex-col justify-center gap-2">
+                        <div className="h-6 w-1/2 rounded-md bg-foreground/15" />
+                        <div className="h-4 w-14 rounded-full bg-foreground/10" />
+                    </div>
+                )}
+                {kind === 'chart' && (
+                    <div className="flex h-full items-end gap-1.5">
+                        {[46, 72, 38, 84, 58, 92, 50].map((h, i) => (
+                            <div
+                                key={i}
+                                className="w-full rounded-sm bg-foreground/10"
+                                style={{ height: `${h}%` }}
+                            />
+                        ))}
+                    </div>
+                )}
+                {kind === 'list' && (
+                    <div className="flex h-full flex-col justify-center gap-2.5">
+                        {[28, 40, 34].map((w, i) => (
+                            <div key={i} className="flex items-center gap-2">
+                                <div className="size-5 shrink-0 rounded-full bg-foreground/10" />
+                                <div className="h-2 flex-1 rounded-full bg-foreground/10" />
+                                <div
+                                    className="h-2 shrink-0 rounded-full bg-foreground/12"
+                                    style={{ width: w }}
+                                />
+                            </div>
+                        ))}
+                    </div>
+                )}
+                {kind === 'bar' && (
+                    <div className="flex h-full flex-col justify-center gap-3">
+                        <div className="h-2.5 w-full rounded-full bg-foreground/10">
+                            <div className="h-full w-3/5 rounded-full bg-foreground/20" />
+                        </div>
+                        <div className="h-2.5 w-full rounded-full bg-foreground/10">
+                            <div className="h-full w-2/5 rounded-full bg-foreground/20" />
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    )
+}
+
+// Kind per tile, in the [c0-top, c0-bottom, c1-top, c1-bottom, c2-top, c2-bottom]
+// order used by computeLayoutRects.
+const TILE_KINDS: Glyph[] = ['stat', 'chart', 'chart', 'list', 'stat', 'bar']
 
 /**
- * Animated skeleton of a dashboard (chart + stats + bar + list) whose tiles
- * slowly drift and settle. Purely decorative — always `aria-hidden`.
+ * Full-bleed skeleton dashboard that reflows through four layouts on a loop.
+ * Overlap-free by construction (see the invariant note above). Purely
+ * decorative — always `aria-hidden`, no text.
+ *
+ * Contract: tiles are positioned with percentage heights, so the CONTAINER
+ * must have a DEFINITE height (e.g. `h-[…]`, or a flex child with `flex-1`).
+ * A parent with only `min-height` leaves the box auto-height and the tiles
+ * collapse into a strip. The dashboard empty state mounts it inside a
+ * definite-height box for exactly this reason.
  */
 export function DashboardEmptyMockup({ className }: { className?: string }) {
     useMockupStyles()
+    const layoutA = React.useMemo(() => computeLayoutRects(MOCKUP_LAYOUTS[0]), [])
     return (
         <div
             aria-hidden="true"
             data-testid="dashboard-empty-mockup"
-            className={cn('mc-demock pointer-events-none w-full max-w-md select-none', className)}
+            className={cn('mc-demock pointer-events-none select-none', className)}
         >
-            <div className="grid grid-cols-3 grid-rows-[repeat(3,minmax(0,1fr))] gap-3 [aspect-ratio:16/11]">
-                {/* Big chart tile */}
-                <div className={cn(tile, 'mc-demock-t1 col-span-2 row-span-2 flex flex-col justify-end gap-2 p-3')}>
-                    <div className="flex items-end gap-1.5">
-                        <div className="h-6 w-full rounded-sm bg-foreground/10" />
-                        <div className="h-10 w-full rounded-sm bg-foreground/10" />
-                        <div className="h-7 w-full rounded-sm bg-foreground/10" />
-                        <div className="h-12 w-full rounded-sm bg-foreground/10" />
-                        <div className="h-9 w-full rounded-sm bg-foreground/10" />
-                    </div>
-                </div>
-                {/* Stat card */}
-                <div className={cn(tile, 'mc-demock-t2 flex flex-col justify-center gap-2 p-3')}>
-                    <div className="h-2 w-1/2 rounded-full bg-foreground/15" />
-                    <div className="h-4 w-2/3 rounded bg-foreground/15" />
+            {layoutA.map((r, i) => (
+                <div
+                    key={i}
+                    data-mockup-tile="tile"
+                    className={cn(tileBase, `mc-demock-t${i}`)}
+                    // Base position = layout A, so reduced-motion (animation off)
+                    // shows the full static composition.
+                    style={{ left: `${r.x}%`, top: `${r.y}%`, width: `${r.w}%`, height: `${r.h}%` }}
+                >
+                    <TileGlyph kind={TILE_KINDS[i]} />
                 </div>
-                {/* Stat card */}
-                <div className={cn(tile, 'mc-demock-t3 flex flex-col justify-center gap-2 p-3')}>
-                    <div className="h-2 w-1/2 rounded-full bg-foreground/15" />
-                    <div className="h-4 w-1/2 rounded bg-foreground/15" />
-                </div>
-                {/* List tile */}
-                <div className={cn(tile, 'mc-demock-t4 flex flex-col justify-center gap-2 p-3')}>
-                    <div className="h-2 w-full rounded-full bg-foreground/12" />
-                    <div className="h-2 w-4/5 rounded-full bg-foreground/12" />
-                    <div className="h-2 w-2/3 rounded-full bg-foreground/12" />
-                </div>
-                {/* Progress bar tile */}
-                <div className={cn(tile, 'mc-demock-t5 col-span-2 flex items-center px-3')}>
-                    <div className="h-2.5 w-full rounded-full bg-foreground/10">
-                        <div className="h-full w-2/5 rounded-full bg-foreground/20" />
-                    </div>
-                </div>
-            </div>
+            ))}
         </div>
     )
 }

package/src/dashboard-grid.tsx

@@ -154,19 +154,21 @@ export function DashboardGrid({
             <div
                 data-testid="dashboard-empty"
                 className={cn(
-                    'flex min-h-[40vh] flex-col items-center justify-center gap-6 rounded-xl border border-dashed border-border/60 p-10 text-center',
+                    // Full-bleed: the mockup fills the whole dashboard area, not a
+                    // centered illustration. No caption — the animation speaks for
+                    // itself (and dodges shipping un-localized copy).
+                    //
+                    // DEFINITE height (clamp), not min-height: the mockup positions
+                    // its tiles with percentage heights, which only resolve against a
+                    // parent whose height is definite. A min-height alone leaves the
+                    // box auto-height and the tiles collapse into a strip — so we own
+                    // the height here instead of hoping the dashboard layout supplies
+                    // one.
+                    'h-[clamp(420px,60vh,720px)] w-full rounded-xl border border-dashed border-border/60 p-4',
                     className,
                 )}
             >
-                <DashboardEmptyMockup />
-                <div className="flex flex-col items-center">
-                    <h3 className="text-base font-semibold text-foreground">
-                        {tr(undefined, s.emptyTitle) || s.emptyTitle}
-                    </h3>
-                    <p className="mt-1 max-w-sm text-sm text-muted-foreground">
-                        {s.emptyDescription}
-                    </p>
-                </div>
+                <DashboardEmptyMockup className="h-full" />
             </div>
         )
     }