@asteby/metacore-runtime-react 27.2.0 → 27.3.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @asteby/metacore-runtime-react
 
+## 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,9 @@
+import * as React from 'react';
+/**
+ * Animated skeleton of a dashboard (chart + stats + bar + list) whose tiles
+ * slowly drift and settle. Purely decorative — always `aria-hidden`.
+ */
+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":"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"}

package/dist/dashboard-empty-mockup.js

@@ -0,0 +1,78 @@
+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".
+//
+// 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 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';
+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}
+}
+`;
+/** 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 tile = 'rounded-lg bg-muted mc-demock-tile mc-demock-shimmer text-foreground';
+/**
+ * Animated skeleton of a dashboard (chart + stats + bar + list) whose tiles
+ * slowly drift and settle. Purely decorative — always `aria-hidden`.
+ */
+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" }) }) })] }) }));
+}

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,qBAiJpB"}

package/dist/dashboard-grid.js

@@ -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,7 @@ 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 (_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-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.0",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",

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

@@ -156,6 +156,16 @@ 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()
+    })
+
     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,122 @@
+// 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".
+//
+// 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 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'
+
+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}
+}
+`
+
+/** 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 tile = 'rounded-lg bg-muted mc-demock-tile mc-demock-shimmer text-foreground'
+
+/**
+ * Animated skeleton of a dashboard (chart + stats + bar + list) whose tiles
+ * slowly drift and settle. Purely decorative — always `aria-hidden`.
+ */
+export function DashboardEmptyMockup({ className }: { className?: string }) {
+    useMockupStyles()
+    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)}
+        >
+            <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" />
+                </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

@@ -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,19 @@ 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',
+                    '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,
                 )}
             >
-                <div className="mb-4 flex size-14 items-center justify-center rounded-2xl bg-muted text-muted-foreground">
-                    <DynamicIcon name="LayoutDashboard" className="size-7" />
+                <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>
-                <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>
         )
     }

package/src/index.ts

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