npm - @asteby/metacore-runtime-react - Versions diffs - 27.1.1 → 27.3.0 - Mend

@asteby/metacore-runtime-react 27.1.1 → 27.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/CHANGELOG.md +29 -0
package/dist/dashboard-empty-mockup.d.ts +9 -0
package/dist/dashboard-empty-mockup.d.ts.map +1 -0
package/dist/dashboard-empty-mockup.js +78 -0
package/dist/dashboard-grid.d.ts.map +1 -1
package/dist/dashboard-grid.js +4 -4
package/dist/dynamic-select-field.d.ts.map +1 -1
package/dist/dynamic-select-field.js +2 -8
package/dist/index.d.ts +1 -0
package/dist/index.d.ts.map +1 -1
package/dist/index.js +1 -0
package/package.json +3 -3
package/src/__tests__/dashboard-grid.test.tsx +10 -0
package/src/dashboard-empty-mockup.tsx +122 -0
package/src/dashboard-grid.tsx +12 -12
package/src/dynamic-select-field.tsx +2 -15
package/src/index.ts +1 -0

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,34 @@
 # @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
+- 27edd94: Las opciones del picker de referencias SIEMPRE llevan lead visual. El gate
+  `optionsHaveVisual` suprimía el avatar de toda la lista cuando ninguna opción
+  traía imagen/icono/color — un select de almacenes quedaba como texto pelado
+  mientras el de productos (una opción con foto) mostraba avatares. Ahora cada
+  opción renderiza su `OptionLead`, que cae a la inicial neutra cuando no hay
+  imagen, en el dropdown y en el trigger.
 ## 27.1.1
 ### Patch Changes

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

@@ -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 ADDED Viewed

	@@ -0,0 +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"}

package/dist/dashboard-empty-mockup.js ADDED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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"}

package/dist/dashboard-grid.js CHANGED Viewed

@@ -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/dynamic-select-field.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dynamic-select-field.d.ts","sourceRoot":"","sources":["../src/dynamic-select-field.tsx"],"names":[],"mappings":"AAwCA,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEhF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,gDAAgD,CAAA;AAEjF;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,EACxB,KAAK,EACL,IAAI,EACJ,IAAS,GACZ,EAAE;IACC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;CAChB,+BAoBA;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACvB,MAAM,EACN,IAAS,GACZ,EAAE;IACC,MAAM,CAAC,EAAE,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,GAAG,IAAI,CAAA;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAA;CAChB,sCA4BA;~~AAqBD~~,MAAM,WAAW,uBAAuB;IACpC,KAAK,EAAE,cAAc,CAAA;IACrB,KAAK,EAAE,GAAG,CAAA;IACV,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;IAC1B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IAClC;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6EAA6E;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,wBAAgB,kBAAkB,CAAC,EAC/B,KAAK,EACL,KAAK,EACL,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,WAAW,EACX,QAAgB,GACnB,EAAE,uBAAuB,+~~BAwOzB~~;AAED,eAAe,kBAAkB,CAAA"}
1	+ {"version":3,"file":"dynamic-select-field.d.ts","sourceRoot":"","sources":["../src/dynamic-select-field.tsx"],"names":[],"mappings":"AAwCA,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEhF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,gDAAgD,CAAA;AAEjF;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,EACxB,KAAK,EACL,IAAI,EACJ,IAAS,GACZ,EAAE;IACC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;CAChB,+BAoBA;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACvB,MAAM,EACN,IAAS,GACZ,EAAE;IACC,MAAM,CAAC,EAAE,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,GAAG,IAAI,CAAA;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAA;CAChB,sCA4BA;AAWD,MAAM,WAAW,uBAAuB;IACpC,KAAK,EAAE,cAAc,CAAA;IACrB,KAAK,EAAE,GAAG,CAAA;IACV,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;IAC1B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IAClC;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6EAA6E;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,wBAAgB,kBAAkB,CAAC,EAC/B,KAAK,EACL,KAAK,EACL,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,WAAW,EACX,QAAgB,GACnB,EAAE,uBAAuB,+BAqOzB;AAED,eAAe,kBAAkB,CAAA"}

package/dist/dynamic-select-field.js CHANGED Viewed

@@ -79,11 +79,6 @@ export function OptionLead({ option, size = 20, }) {
         return _jsx(InitialsAvatar, { name: option.label, size: size, rounded: "sm", tone: "neutral" });
     return null;
 }
-/** True when any option (or the selected one) carries a renderable visual. */
-function optionsHaveVisual(options, selected) {
-    const has = (o) => !!(o && (o.image || o.color || o.icon));
-    return has(selected) || options.some(has);
-}
 function useDebounced(value, ms) {
     const [debounced, setDebounced] = useState(value);
     useEffect(() => {
@@ -155,7 +150,6 @@ export function DynamicSelectField({ field, value, onChange, seedOption, depends
     // Only switch the picker into "with thumbnails" mode when the data actually
     // carries images — a relation whose options have no `image` keeps the plain
     // text list it had before (no empty placeholder column).
-    const hasVisual = optionsHaveVisual(options, selectedOption);
     const handlePick = (opt) => {
         setPicked(opt);
         onChange(String(opt.id));
@@ -195,14 +189,14 @@ export function DynamicSelectField({ field, value, onChange, seedOption, depends
     // (the long empty-state placeholder) and overflows the column, pushing the
     // "+" off-screen — it only "fit" once a short value was selected.
     return (_jsxs("div", { className: "flex w-full min-w-0 items-center gap-1.5", children: [_jsxs(Popover, { open: open && !blockedByDependency, onOpenChange: (o) => { if (!blockedByDependency)
-                    setOpen(o); }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", role: "combobox", "aria-expanded": open, id: field.key, disabled: blockedByDependency, className: "min-w-0 flex-1 justify-between font-normal", "data-empty": !value, "data-depends-blocked": blockedByDependency ? '' : undefined, children: [_jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2 text-left", children: [hasVisual && value ? (_jsx(OptionLead, { option: selectedOption, size: 20 })) : null, _jsx("span", { className: 'min-w-0 flex-1 truncate ' + (selectedLabel ? '' : 'text-muted-foreground'), children: blockedByDependency
+                    setOpen(o); }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", role: "combobox", "aria-expanded": open, id: field.key, disabled: blockedByDependency, className: "min-w-0 flex-1 justify-between font-normal", "data-empty": !value, "data-depends-blocked": blockedByDependency ? '' : undefined, children: [_jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2 text-left", children: [value && selectedOption ? (_jsx(OptionLead, { option: selectedOption, size: 20 })) : null, _jsx("span", { className: 'min-w-0 flex-1 truncate ' + (selectedLabel ? '' : 'text-muted-foreground'), children: blockedByDependency
                                                 ? (dependsHint || DEFAULT_DEPENDS_HINT)
                                                 : selectedLabel || field.placeholder || 'Buscar…' })] }), _jsx(ChevronsUpDown, { className: "ml-2 size-4 shrink-0 opacity-50" })] }) }), _jsx(PopoverContent, { className: "p-0", align: "start",
                         // Match the trigger width without an arbitrary Tailwind class
                         // (those don't always survive a consuming app's Tailwind scan).
                         style: { width: 'var(--radix-popover-trigger-width)' }, children: _jsxs(Command, { shouldFilter: false, children: [_jsx(CommandInput, { placeholder: field.placeholder || 'Buscar…', value: search, onValueChange: setSearch }), _jsxs(CommandList, { children: [loading && (_jsxs("div", { className: "text-muted-foreground flex items-center justify-center gap-2 py-6 text-sm", children: [_jsx(Loader2, { className: "size-4 animate-spin" }), "Buscando\u2026"] })), !loading && options.length === 0 && (_jsx(CommandEmpty, { children: debounced ? 'Sin resultados' : 'Escribí para buscar…' })), !loading && options.length > 0 && (_jsx(CommandGroup, { className: "max-h-64 overflow-auto", children: options.map((opt) => {
                                                 const isSel = String(opt.id) === String(value);
-                                                return (_jsxs(CommandItem, { value: String(opt.id), onSelect: () => handlePick(opt), children: [_jsx(Check, { className: 'mr-2 size-4 shrink-0 ' + (isSel ? 'opacity-100' : 'opacity-0') }), hasVisual && (_jsx(OptionLead, { option: opt, size: 24 })), _jsxs("div", { className: "ml-2 flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate", children: opt.label }), opt.description && (_jsx("span", { className: "text-muted-foreground truncate text-xs", children: opt.description }))] })] }, String(opt.id)));
+                                                return (_jsxs(CommandItem, { value: String(opt.id), onSelect: () => handlePick(opt), children: [_jsx(Check, { className: 'mr-2 size-4 shrink-0 ' + (isSel ? 'opacity-100' : 'opacity-0') }), _jsx(OptionLead, { option: opt, size: 24 }), _jsxs("div", { className: "ml-2 flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate", children: opt.label }), opt.description && (_jsx("span", { className: "text-muted-foreground truncate text-xs", children: opt.description }))] })] }, String(opt.id)));
                                             }) }))] })] }) })] }), fieldRef && (_jsx(Button, { type: "button", variant: "outline", size: "icon", className: "size-9 shrink-0", onClick: openCreate, title: `Crear ${field.label ?? fieldRef}`, "aria-label": `Crear ${field.label ?? fieldRef}`, children: _jsx(Plus, { className: "size-4" }) }))] }));
 }
 export default DynamicSelectField;

package/dist/index.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/dist/index.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "27.1.1",
+  "version": "27.3.0",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",
@@ -37,8 +37,8 @@
     "react-i18next": ">=13",
     "sonner": ">=1.7",
     "zustand": ">=5",
-    "@asteby/metacore-ui": "^2.12.1",
-    "@asteby/metacore-sdk": "^3.3.0"
+    "@asteby/metacore-sdk": "^3.3.0",
+    "@asteby/metacore-ui": "^2.12.1"
   },
   "peerDependenciesMeta": {
     "@tanstack/react-router": {

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

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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/dynamic-select-field.tsx CHANGED Viewed

@@ -129,16 +129,6 @@ export function OptionLead({
     return null
 }
-/** True when any option (or the selected one) carries a renderable visual. */
-function optionsHaveVisual(
-    options: ReadonlyArray<Pick<ResolvedOption, 'image' | 'color' | 'icon'>>,
-    selected?: Pick<ResolvedOption, 'image' | 'color' | 'icon'> | null,
-): boolean {
-    const has = (o?: Pick<ResolvedOption, 'image' | 'color' | 'icon'> | null) =>
-        !!(o && (o.image || o.color || o.icon))
-    return has(selected) || options.some(has)
-}
 function useDebounced<T>(value: T, ms: number): T {
     const [debounced, setDebounced] = useState(value)
     useEffect(() => {
@@ -257,7 +247,6 @@ export function DynamicSelectField({
     // Only switch the picker into "with thumbnails" mode when the data actually
     // carries images — a relation whose options have no `image` keeps the plain
     // text list it had before (no empty placeholder column).
-    const hasVisual = optionsHaveVisual(options, selectedOption)
     const handlePick = (opt: ResolvedOption) => {
         setPicked(opt)
@@ -336,7 +325,7 @@ export function DynamicSelectField({
                     data-depends-blocked={blockedByDependency ? '' : undefined}
                 >
                     <span className="flex min-w-0 flex-1 items-center gap-2 text-left">
-                        {hasVisual && value ? (
+                        {value && selectedOption ? (
                             <OptionLead option={selectedOption} size={20} />
                         ) : null}
                         <span className={'min-w-0 flex-1 truncate ' + (selectedLabel ? '' : 'text-muted-foreground')}>
@@ -384,9 +373,7 @@ export function DynamicSelectField({
                                             onSelect={() => handlePick(opt)}
                                         >
                                             <Check className={'mr-2 size-4 shrink-0 ' + (isSel ? 'opacity-100' : 'opacity-0')} />
-                                            {hasVisual && (
-                                                <OptionLead option={opt} size={24} />
-                                            )}
+                                            <OptionLead option={opt} size={24} />
                                             <div className="ml-2 flex min-w-0 flex-col">
                                                 <span className="truncate">{opt.label}</span>
                                                 {opt.description && (

package/src/index.ts CHANGED Viewed

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