@asteby/metacore-runtime-react 27.2.0 → 27.3.1

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @asteby/metacore-runtime-react
 
+## 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
+
+- 8b46e55: El empty state del Tablero ahora muestra un mockup animado en vez de un ícono
+  estático. Cuando no hay widgets (o ninguno visible tras el gating de permisos),
+  `DashboardGrid` pinta una silueta del propio dashboard —tiles skeleton (un
+  gráfico grande, un par de stat cards, una barra de progreso y una lista)— que
+  se desplazan y reacomodan suavemente entre sí, como piezas encajando en su
+  lugar. El mensaje pasa de "no hay nada" a "acá va a vivir tu tablero".
+
+  Detalles: animación CSS pura (un loop lento de ~11s, translate+scale sutil, sin
+  dependencias nuevas), tokens de tema (`bg-muted`) para light/dark automáticos,
+  `prefers-reduced-motion: reduce` congela todo, y el mock es decorativo
+  (`aria-hidden`). Se exporta el componente `DashboardEmptyMockup` por si un host
+  quiere reutilizarlo. Copy por defecto del empty ajustado al nuevo framing
+  (override vía `strings`).
+
 ## 27.2.0
 
 ### Minor Changes

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+/**
+ * Full-bleed animated skeleton of a dashboard whose tiles slide and swap places,
+ * as if the layout were assembling itself. Purely decorative — always
+ * `aria-hidden`, no text.
+ */
+export declare function DashboardEmptyMockup({ className }: {
+    className?: string;
+}): React.JSX.Element;
+//# sourceMappingURL=dashboard-empty-mockup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-empty-mockup.d.ts","sourceRoot":"","sources":["../src/dashboard-empty-mockup.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AA2I9B;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,qBAuBzE"}

package/dist/dashboard-empty-mockup.js

@@ -0,0 +1,136 @@
+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 and let it BUILD ITSELF: skeleton tiles (a big chart, stat
+// cards, a bar, lists) that live in a full-bleed grid and visibly slide past
+// each other, swapping places like pieces reorganizing into a layout. The
+// metaphor is "your board is assembling", not "empty".
+//
+// Design constraints (kept simple so it ships from a package):
+//   - Full-bleed: fills the whole dashboard area (100% w/h), NOT a centered
+//     illustration. A responsive grid so it reads like the real dashboard.
+//   - Pure CSS keyframes, no dependencies. One slow loop (~13s). Motion is
+//     PERCEPTIBLE — tiles translate a real distance and swap in pairs — but
+//     never opacity-strobing, and eased so it feels like settling.
+//   - Theme tokens only (bg-muted / border tokens) → light & dark for free.
+//   - `prefers-reduced-motion: reduce` freezes everything (tiles rest in place).
+//   - No caption text — the animation carries the meaning, and shipping copy
+//     from the package risks un-localized strings. The whole mock is
+//     decorative → aria-hidden.
+//
+// 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.
+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';
+// Each tile lives in a grid cell and animates on a shared ~13s loop. Pairs move
+// in opposite directions at the same phase so it reads as a SWAP, and the phases
+// are staggered (via negative delays) so 2-3 tiles are always in motion at
+// different moments of the cycle — never a frozen frame.
+const MOCKUP_CSS = `
+.mc-demock{--mc-demock-dur:13s}
+.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}
+/* Horizontal swap pair (col A <-> col B) */
+.mc-demock-swapL{animation-name:mc-demock-swap-left}
+.mc-demock-swapR{animation-name:mc-demock-swap-right;animation-delay:-.2s}
+/* Vertical swap pair */
+.mc-demock-swapU{animation-name:mc-demock-swap-up;animation-delay:-4.3s}
+.mc-demock-swapD{animation-name:mc-demock-swap-down;animation-delay:-4.5s}
+/* Diagonal reshuffle pair */
+.mc-demock-shuffleA{animation-name:mc-demock-shuffle-a;animation-delay:-8.1s}
+.mc-demock-shuffleB{animation-name:mc-demock-shuffle-b;animation-delay:-8.3s}
+/* Gentle drifters filling the rhythm between swaps */
+.mc-demock-driftA{animation-name:mc-demock-drift-a;animation-delay:-2.4s}
+.mc-demock-driftB{animation-name:mc-demock-drift-b;animation-delay:-6.7s}
+.mc-demock-shimmer{position:relative;overflow:hidden}
+.mc-demock-shimmer::after{content:"";position:absolute;inset:0;
+  background:linear-gradient(105deg,transparent 35%,currentColor 50%,transparent 65%);
+  opacity:.05;transform:translateX(-120%);
+  animation:mc-demock-sheen var(--mc-demock-dur) ease-in-out infinite}
+/* Swaps: hold home -> travel a full cell (+gap) to the partner's slot -> hold
+   -> travel back. ~108% of own size clears the tile plus the grid gap. */
+@keyframes mc-demock-swap-left{
+  0%,12%{transform:translate(0,0)}38%,62%{transform:translate(108%,0)}88%,100%{transform:translate(0,0)}}
+@keyframes mc-demock-swap-right{
+  0%,12%{transform:translate(0,0)}38%,62%{transform:translate(-108%,0)}88%,100%{transform:translate(0,0)}}
+@keyframes mc-demock-swap-up{
+  0%,12%{transform:translate(0,0)}38%,62%{transform:translate(0,112%)}88%,100%{transform:translate(0,0)}}
+@keyframes mc-demock-swap-down{
+  0%,12%{transform:translate(0,0)}38%,62%{transform:translate(0,-112%)}88%,100%{transform:translate(0,0)}}
+@keyframes mc-demock-shuffle-a{
+  0%,15%{transform:translate(0,0) scale(1)}45%,60%{transform:translate(106%,110%) scale(.96)}90%,100%{transform:translate(0,0) scale(1)}}
+@keyframes mc-demock-shuffle-b{
+  0%,15%{transform:translate(0,0) scale(1)}45%,60%{transform:translate(-106%,-110%) scale(1.04)}90%,100%{transform:translate(0,0) scale(1)}}
+@keyframes mc-demock-drift-a{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4%,-5%) scale(1.02)}}
+@keyframes mc-demock-drift-b{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5%,4%) scale(.98)}}
+@keyframes mc-demock-sheen{0%,100%{transform:translateX(-120%)}55%,72%{transform:translateX(120%)}}
+@media (prefers-reduced-motion:reduce){
+  .mc-demock-tile{animation:none!important}
+  .mc-demock-shimmer::after{animation:none!important;opacity:0}
+}
+`;
+/** Injects the keyframes once per document (idempotent, SSR-safe). */
+function useMockupStyles() {
+    React.useInsertionEffect(() => {
+        if (typeof document === 'undefined')
+            return;
+        if (document.getElementById(STYLE_ID))
+            return;
+        const el = document.createElement('style');
+        el.id = STYLE_ID;
+        el.textContent = MOCKUP_CSS;
+        document.head.appendChild(el);
+    }, []);
+}
+const tileBase = 'rounded-lg bg-muted mc-demock-tile mc-demock-shimmer text-foreground overflow-hidden';
+/** A skeleton "chart" tile: a row of bars. */
+function ChartGlyph() {
+    return (_jsx("div", { className: "flex h-full items-end gap-1.5 p-3", children: [6, 10, 7, 12, 9, 11, 8].map((h, i) => (_jsx("div", { className: "w-full rounded-sm bg-foreground/10", style: { height: `${h * 8}%` } }, i))) }));
+}
+/** A skeleton "stat card": label + big number. */
+function StatGlyph() {
+    return (_jsxs("div", { className: "flex h-full 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" })] }));
+}
+/** A skeleton "list" tile: stacked rows. */
+function ListGlyph() {
+    return (_jsxs("div", { className: "flex h-full 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" })] }));
+}
+/** A skeleton "progress bar" tile. */
+function BarGlyph() {
+    return (_jsx("div", { className: "flex h-full 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 TILES = [
+    // Big chart (top-left 2x2) — diagonal shuffle with the bottom stat.
+    { area: { gridColumn: '1 / 3', gridRow: '1 / 3' }, motion: 'mc-demock-shuffleA', glyph: _jsx(ChartGlyph, {}) },
+    // Horizontal swap pair, top-right.
+    { area: { gridColumn: '3 / 4', gridRow: '1 / 2' }, motion: 'mc-demock-swapL', glyph: _jsx(StatGlyph, {}) },
+    { area: { gridColumn: '4 / 5', gridRow: '1 / 2' }, motion: 'mc-demock-swapR', glyph: _jsx(StatGlyph, {}) },
+    // Vertical swap pair, right column.
+    { area: { gridColumn: '3 / 5', gridRow: '2 / 3' }, motion: 'mc-demock-swapU', glyph: _jsx(ListGlyph, {}) },
+    { area: { gridColumn: '3 / 5', gridRow: '3 / 4' }, motion: 'mc-demock-swapD', glyph: _jsx(BarGlyph, {}) },
+    // Bottom-left cluster: shuffle partner + drifter.
+    { area: { gridColumn: '1 / 2', gridRow: '3 / 4' }, motion: 'mc-demock-shuffleB', glyph: _jsx(StatGlyph, {}) },
+    { area: { gridColumn: '2 / 3', gridRow: '3 / 4' }, motion: 'mc-demock-driftA', glyph: _jsx(StatGlyph, {}) },
+    // Full-width footer bar + trailing stat.
+    { area: { gridColumn: '1 / 4', gridRow: '4 / 5' }, motion: 'mc-demock-driftB', glyph: _jsx(BarGlyph, {}) },
+    { area: { gridColumn: '4 / 5', gridRow: '4 / 5' }, motion: 'mc-demock-driftA', glyph: _jsx(StatGlyph, {}) },
+];
+/**
+ * Full-bleed animated skeleton of a dashboard whose tiles slide and swap places,
+ * as if the layout were assembling itself. Purely decorative — always
+ * `aria-hidden`, no text.
+ */
+export function DashboardEmptyMockup({ className }) {
+    useMockupStyles();
+    return (_jsx("div", { "aria-hidden": "true", "data-testid": "dashboard-empty-mockup", className: cn('mc-demock pointer-events-none h-full w-full select-none', className), children: _jsx("div", { className: "grid h-full w-full gap-3", style: {
+                gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
+                gridTemplateRows: 'repeat(4, minmax(0, 1fr))',
+            }, children: TILES.map((t, i) => (_jsx("div", { style: t.area, className: cn(tileBase, t.motion), children: t.glyph }, 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;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,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,qBA4IpB"}

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
@@ -8,11 +8,11 @@ import * as React from 'react';
 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, isTallWidget } from './widgets/widget-renderer';
+import { DashboardEmptyMockup } from './dashboard-empty-mockup';
 const DEFAULT_STRINGS = {
-    emptyTitle: 'Your dashboard is empty',
-    emptyDescription: 'Install an addon with dashboard widgets to start seeing metrics here.',
+    emptyTitle: 'Your dashboard is taking shape',
+    emptyDescription: 'Install an addon with dashboard widgets and your metrics will start living here.',
     widgetError: 'Could not load this widget.',
     widgetEmpty: 'No data yet.',
 };
@@ -120,7 +120,11 @@ 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 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-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).
+            'min-h-[60vh] w-full rounded-xl border border-dashed border-border/60 p-4', className), children: _jsx(DashboardEmptyMockup, { className: "h-full min-h-[inherit]" }) }));
     }
     return (_jsx("div", { "data-testid": "dashboard-grid", className: cn(
         // Masonry: balanced CSS columns. Cards take their natural height

package/dist/index.d.ts

@@ -58,6 +58,7 @@ export { ActivityDiff, type ActivityEvent, type ActivityDiffProps, } from './act
 export { RecordHistory, type RecordHistoryProps, } from './record-history';
 export { ActivityTimeline, type ActivityTimelineProps, } from './activity-timeline';
 export { DashboardGrid, normalizeGroups, } from './dashboard-grid';
+export { DashboardEmptyMockup } from './dashboard-empty-mockup';
 export type { WidgetKind, WidgetSize, WidgetFormat, WidgetAccent, WidgetAggregate, WidgetWhereOp, DashboardWidgetQuery, DashboardWidgetCompare, DashboardWidgetSpec, WidgetSeriesPoint, WidgetData, DashboardWidgetGroup, LoadWidgetData, DashboardGridProps, DashboardGridStrings, } from './dashboard-types';
 export { StatWidget, BarWidget, LineWidget, AreaWidget, PieWidget, DonutWidget, ListWidget, ProgressWidget, type WidgetRenderProps, } from './widgets/renderers';
 export { WidgetRenderer, WidgetSkeleton, SIZE_SPAN, SIZE_CLASS, type WidgetRendererProps, } from './widgets/widget-renderer';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -60,6 +60,7 @@ export { ActivityDiff, } from './activity-diff';
 export { RecordHistory, } from './record-history';
 export { ActivityTimeline, } from './activity-timeline';
 export { DashboardGrid, normalizeGroups, } from './dashboard-grid';
+export { DashboardEmptyMockup } from './dashboard-empty-mockup';
 export { StatWidget, BarWidget, LineWidget, AreaWidget, PieWidget, DonutWidget, ListWidget, ProgressWidget, } from './widgets/renderers';
 export { WidgetRenderer, WidgetSkeleton, SIZE_SPAN, SIZE_CLASS, } from './widgets/widget-renderer';
 export { WidgetCard, DeltaChip, WidgetEmpty, WidgetError, } from './widgets/widget-card';

package/package.json

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

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

@@ -156,6 +156,19 @@ describe('DashboardGrid render', () => {
         expect(screen.getByTestId('dashboard-empty')).toBeTruthy()
     })
 
+    it('renders the animated mockup (decorative) in the empty state', () => {
+        render(<DashboardGrid widgets={[]} loadData={loaderOf({})} />)
+        const mock = screen.getByTestId('dashboard-empty-mockup')
+        expect(mock).toBeTruthy()
+        // Purely decorative → hidden from the a11y tree.
+        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 () => {
         // The flatten/order useMemo must run BEFORE the empty-state early return.
         // When it sat after the return, an empty render called one fewer hook

package/src/dashboard-empty-mockup.tsx

@@ -0,0 +1,194 @@
+// DashboardEmptyMockup — the animated empty state for the modular dashboard.
+//
+// Instead of a static "nothing here" card, we paint a silhouette of the
+// dashboard itself and let it BUILD ITSELF: skeleton tiles (a big chart, stat
+// cards, a bar, lists) that live in a full-bleed grid and visibly slide past
+// each other, swapping places like pieces reorganizing into a layout. The
+// metaphor is "your board is assembling", not "empty".
+//
+// Design constraints (kept simple so it ships from a package):
+//   - Full-bleed: fills the whole dashboard area (100% w/h), NOT a centered
+//     illustration. A responsive grid so it reads like the real dashboard.
+//   - Pure CSS keyframes, no dependencies. One slow loop (~13s). Motion is
+//     PERCEPTIBLE — tiles translate a real distance and swap in pairs — but
+//     never opacity-strobing, and eased so it feels like settling.
+//   - Theme tokens only (bg-muted / border tokens) → light & dark for free.
+//   - `prefers-reduced-motion: reduce` freezes everything (tiles rest in place).
+//   - No caption text — the animation carries the meaning, and shipping copy
+//     from the package risks un-localized strings. The whole mock is
+//     decorative → aria-hidden.
+//
+// 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.
+
+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'
+
+// Each tile lives in a grid cell and animates on a shared ~13s loop. Pairs move
+// in opposite directions at the same phase so it reads as a SWAP, and the phases
+// are staggered (via negative delays) so 2-3 tiles are always in motion at
+// different moments of the cycle — never a frozen frame.
+const MOCKUP_CSS = `
+.mc-demock{--mc-demock-dur:13s}
+.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}
+/* Horizontal swap pair (col A <-> col B) */
+.mc-demock-swapL{animation-name:mc-demock-swap-left}
+.mc-demock-swapR{animation-name:mc-demock-swap-right;animation-delay:-.2s}
+/* Vertical swap pair */
+.mc-demock-swapU{animation-name:mc-demock-swap-up;animation-delay:-4.3s}
+.mc-demock-swapD{animation-name:mc-demock-swap-down;animation-delay:-4.5s}
+/* Diagonal reshuffle pair */
+.mc-demock-shuffleA{animation-name:mc-demock-shuffle-a;animation-delay:-8.1s}
+.mc-demock-shuffleB{animation-name:mc-demock-shuffle-b;animation-delay:-8.3s}
+/* Gentle drifters filling the rhythm between swaps */
+.mc-demock-driftA{animation-name:mc-demock-drift-a;animation-delay:-2.4s}
+.mc-demock-driftB{animation-name:mc-demock-drift-b;animation-delay:-6.7s}
+.mc-demock-shimmer{position:relative;overflow:hidden}
+.mc-demock-shimmer::after{content:"";position:absolute;inset:0;
+  background:linear-gradient(105deg,transparent 35%,currentColor 50%,transparent 65%);
+  opacity:.05;transform:translateX(-120%);
+  animation:mc-demock-sheen var(--mc-demock-dur) ease-in-out infinite}
+/* Swaps: hold home -> travel a full cell (+gap) to the partner's slot -> hold
+   -> travel back. ~108% of own size clears the tile plus the grid gap. */
+@keyframes mc-demock-swap-left{
+  0%,12%{transform:translate(0,0)}38%,62%{transform:translate(108%,0)}88%,100%{transform:translate(0,0)}}
+@keyframes mc-demock-swap-right{
+  0%,12%{transform:translate(0,0)}38%,62%{transform:translate(-108%,0)}88%,100%{transform:translate(0,0)}}
+@keyframes mc-demock-swap-up{
+  0%,12%{transform:translate(0,0)}38%,62%{transform:translate(0,112%)}88%,100%{transform:translate(0,0)}}
+@keyframes mc-demock-swap-down{
+  0%,12%{transform:translate(0,0)}38%,62%{transform:translate(0,-112%)}88%,100%{transform:translate(0,0)}}
+@keyframes mc-demock-shuffle-a{
+  0%,15%{transform:translate(0,0) scale(1)}45%,60%{transform:translate(106%,110%) scale(.96)}90%,100%{transform:translate(0,0) scale(1)}}
+@keyframes mc-demock-shuffle-b{
+  0%,15%{transform:translate(0,0) scale(1)}45%,60%{transform:translate(-106%,-110%) scale(1.04)}90%,100%{transform:translate(0,0) scale(1)}}
+@keyframes mc-demock-drift-a{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4%,-5%) scale(1.02)}}
+@keyframes mc-demock-drift-b{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5%,4%) scale(.98)}}
+@keyframes mc-demock-sheen{0%,100%{transform:translateX(-120%)}55%,72%{transform:translateX(120%)}}
+@media (prefers-reduced-motion:reduce){
+  .mc-demock-tile{animation:none!important}
+  .mc-demock-shimmer::after{animation:none!important;opacity:0}
+}
+`
+
+/** Injects the keyframes once per document (idempotent, SSR-safe). */
+function useMockupStyles() {
+    React.useInsertionEffect(() => {
+        if (typeof document === 'undefined') return
+        if (document.getElementById(STYLE_ID)) return
+        const el = document.createElement('style')
+        el.id = STYLE_ID
+        el.textContent = MOCKUP_CSS
+        document.head.appendChild(el)
+    }, [])
+}
+
+const tileBase =
+    'rounded-lg bg-muted mc-demock-tile mc-demock-shimmer text-foreground overflow-hidden'
+
+/** A skeleton "chart" tile: a row of bars. */
+function ChartGlyph() {
+    return (
+        <div className="flex h-full items-end gap-1.5 p-3">
+            {[6, 10, 7, 12, 9, 11, 8].map((h, i) => (
+                <div
+                    key={i}
+                    className="w-full rounded-sm bg-foreground/10"
+                    style={{ height: `${h * 8}%` }}
+                />
+            ))}
+        </div>
+    )
+}
+
+/** A skeleton "stat card": label + big number. */
+function StatGlyph() {
+    return (
+        <div className="flex h-full 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" />
+        </div>
+    )
+}
+
+/** A skeleton "list" tile: stacked rows. */
+function ListGlyph() {
+    return (
+        <div className="flex h-full 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>
+    )
+}
+
+/** A skeleton "progress bar" tile. */
+function BarGlyph() {
+    return (
+        <div className="flex h-full 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>
+    )
+}
+
+// The board: a 4-col x 4-row grid that fills the container. Each tile declares
+// its cell (via inline gridColumn/gridRow) and a motion class. Swap pairs sit in
+// adjacent cells and move toward each other, so the eye reads a reshuffle.
+type Tile = { area: React.CSSProperties; motion: string; glyph: React.ReactNode }
+
+const TILES: Tile[] = [
+    // Big chart (top-left 2x2) — diagonal shuffle with the bottom stat.
+    { area: { gridColumn: '1 / 3', gridRow: '1 / 3' }, motion: 'mc-demock-shuffleA', glyph: <ChartGlyph /> },
+    // Horizontal swap pair, top-right.
+    { area: { gridColumn: '3 / 4', gridRow: '1 / 2' }, motion: 'mc-demock-swapL', glyph: <StatGlyph /> },
+    { area: { gridColumn: '4 / 5', gridRow: '1 / 2' }, motion: 'mc-demock-swapR', glyph: <StatGlyph /> },
+    // Vertical swap pair, right column.
+    { area: { gridColumn: '3 / 5', gridRow: '2 / 3' }, motion: 'mc-demock-swapU', glyph: <ListGlyph /> },
+    { area: { gridColumn: '3 / 5', gridRow: '3 / 4' }, motion: 'mc-demock-swapD', glyph: <BarGlyph /> },
+    // Bottom-left cluster: shuffle partner + drifter.
+    { area: { gridColumn: '1 / 2', gridRow: '3 / 4' }, motion: 'mc-demock-shuffleB', glyph: <StatGlyph /> },
+    { area: { gridColumn: '2 / 3', gridRow: '3 / 4' }, motion: 'mc-demock-driftA', glyph: <StatGlyph /> },
+    // Full-width footer bar + trailing stat.
+    { area: { gridColumn: '1 / 4', gridRow: '4 / 5' }, motion: 'mc-demock-driftB', glyph: <BarGlyph /> },
+    { area: { gridColumn: '4 / 5', gridRow: '4 / 5' }, motion: 'mc-demock-driftA', glyph: <StatGlyph /> },
+]
+
+/**
+ * Full-bleed animated skeleton of a dashboard whose tiles slide and swap places,
+ * as if the layout were assembling itself. Purely decorative — always
+ * `aria-hidden`, no text.
+ */
+export function DashboardEmptyMockup({ className }: { className?: string }) {
+    useMockupStyles()
+    return (
+        <div
+            aria-hidden="true"
+            data-testid="dashboard-empty-mockup"
+            className={cn('mc-demock pointer-events-none h-full w-full select-none', className)}
+        >
+            <div
+                className="grid h-full w-full gap-3"
+                style={{
+                    gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
+                    gridTemplateRows: 'repeat(4, minmax(0, 1fr))',
+                }}
+            >
+                {TILES.map((t, i) => (
+                    <div key={i} style={t.area} className={cn(tileBase, t.motion)}>
+                        {t.glyph}
+                    </div>
+                ))}
+            </div>
+        </div>
+    )
+}

package/src/dashboard-grid.tsx

@@ -8,7 +8,6 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { cn } from '@asteby/metacore-ui/lib'
 import { useCan, usePermissionsActive } from './permissions-context'
-import { DynamicIcon } from './dynamic-icon'
 import type {
     DashboardGridProps,
     DashboardGridStrings,
@@ -16,11 +15,12 @@ import type {
     DashboardWidgetSpec,
 } from './dashboard-types'
 import { WidgetRenderer, WidgetSkeleton, isTallWidget } from './widgets/widget-renderer'
+import { DashboardEmptyMockup } from './dashboard-empty-mockup'
 
 const DEFAULT_STRINGS: DashboardGridStrings = {
-    emptyTitle: 'Your dashboard is empty',
+    emptyTitle: 'Your dashboard is taking shape',
     emptyDescription:
-        'Install an addon with dashboard widgets to start seeing metrics here.',
+        'Install an addon with dashboard widgets and your metrics will start living here.',
     widgetError: 'Could not load this widget.',
     widgetEmpty: 'No data yet.',
 }
@@ -154,19 +154,14 @@ export function DashboardGrid({
             <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',
+                    // 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).
+                    'min-h-[60vh] w-full rounded-xl border border-dashed border-border/60 p-4',
                     className,
                 )}
             >
-                <div className="mb-4 flex size-14 items-center justify-center rounded-2xl bg-muted text-muted-foreground">
-                    <DynamicIcon name="LayoutDashboard" className="size-7" />
-                </div>
-                <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>
+                <DashboardEmptyMockup className="h-full min-h-[inherit]" />
             </div>
         )
     }

package/src/index.ts

@@ -325,6 +325,7 @@ export {
     DashboardGrid,
     normalizeGroups,
 } from './dashboard-grid'
+export { DashboardEmptyMockup } from './dashboard-empty-mockup'
 export type {
     WidgetKind,
     WidgetSize,