@asteby/metacore-runtime-react 29.0.2 → 29.0.3

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @asteby/metacore-runtime-react
 
+## 29.0.3
+
+### Patch Changes
+
+- 14dcf25: Dashboard: el skeleton/empty del tablero (`DashboardEmptyMockup`) se veía
+  apretado y raro en móvil (3 columnas absolutas angostas en un teléfono). En
+  `<sm` ahora renderiza un stack vertical de cards a ancho completo; el reflow
+  animado de 3 columnas se conserva de `sm` hacia arriba. Toggle por CSS, sin JS.
+
 ## 29.0.2
 
 ### Patch Changes

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

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

package/dist/dashboard-empty-mockup.js

@@ -139,8 +139,11 @@ const TILE_KINDS = ['stat', 'chart', 'chart', 'list', 'stat', 'bar'];
 export function DashboardEmptyMockup({ className }) {
     useMockupStyles();
     const layoutA = React.useMemo(() => computeLayoutRects(MOCKUP_LAYOUTS[0]), []);
-    return (_jsx("div", { "aria-hidden": "true", "data-testid": "dashboard-empty-mockup", className: cn('mc-demock pointer-events-none select-none', className), children: layoutA.map((r, i) => (_jsx("div", { "data-mockup-tile": "tile", className: cn(tileBase, `mc-demock-t${i}`), 
-            // Base position = layout A, so reduced-motion (animation off)
-            // shows the full static composition.
-            style: { left: `${r.x}%`, top: `${r.y}%`, width: `${r.w}%`, height: `${r.h}%` }, children: _jsx(TileGlyph, { kind: TILE_KINDS[i] }) }, i))) }));
+    return (_jsxs("div", { "aria-hidden": "true", "data-testid": "dashboard-empty-mockup", className: cn('pointer-events-none select-none', className), children: [_jsx("div", { className: "flex h-full flex-col gap-3 sm:hidden", children: MOBILE_TILE_KINDS.map((kind, i) => (_jsx("div", { className: cn(tileBase, 'mc-demock-shimmer relative flex-1'), children: _jsx(TileGlyph, { kind: kind }) }, i))) }), _jsx("div", { className: "mc-demock hidden h-full sm:block", children: layoutA.map((r, i) => (_jsx("div", { "data-mockup-tile": "tile", className: cn(tileBase, `mc-demock-t${i}`), 
+                    // Base position = layout A, so reduced-motion (animation off)
+                    // shows the full static composition.
+                    style: { left: `${r.x}%`, top: `${r.y}%`, width: `${r.w}%`, height: `${r.h}%` }, children: _jsx(TileGlyph, { kind: TILE_KINDS[i] }) }, i))) })] }));
 }
+// En móvil mostramos 3 cards apiladas (stat + chart + list) a ancho completo —
+// suficiente para comunicar "tablero cargando/ vacío" sin apretar 6 tiles.
+const MOBILE_TILE_KINDS = ['stat', 'chart', 'list'];

package/package.json

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

package/src/dashboard-empty-mockup.tsx

@@ -230,20 +230,39 @@ export function DashboardEmptyMockup({ className }: { className?: string }) {
         <div
             aria-hidden="true"
             data-testid="dashboard-empty-mockup"
-            className={cn('mc-demock pointer-events-none select-none', className)}
+            className={cn('pointer-events-none select-none', className)}
         >
-            {layoutA.map((r, i) => (
-                <div
-                    key={i}
-                    data-mockup-tile="tile"
-                    className={cn(tileBase, `mc-demock-t${i}`)}
-                    // Base position = layout A, so reduced-motion (animation off)
-                    // shows the full static composition.
-                    style={{ left: `${r.x}%`, top: `${r.y}%`, width: `${r.w}%`, height: `${r.h}%` }}
-                >
-                    <TileGlyph kind={TILE_KINDS[i]} />
-                </div>
-            ))}
+            {/* Móvil (<sm): las 3 columnas absolutas quedan angostas y apretadas
+                en un teléfono. Un STACK vertical de cards a ancho completo se lee
+                claro. Toggle por CSS (sin JS, SSR-safe): el reflow animado sólo
+                aparece de sm hacia arriba, donde hay ancho para las 3 columnas. */}
+            <div className="flex h-full flex-col gap-3 sm:hidden">
+                {MOBILE_TILE_KINDS.map((kind, i) => (
+                    <div key={i} className={cn(tileBase, 'mc-demock-shimmer relative flex-1')}>
+                        <TileGlyph kind={kind} />
+                    </div>
+                ))}
+            </div>
+
+            {/* Tablet/escritorio: el mockup de 3 columnas que reorganiza en bucle. */}
+            <div className="mc-demock hidden h-full sm:block">
+                {layoutA.map((r, i) => (
+                    <div
+                        key={i}
+                        data-mockup-tile="tile"
+                        className={cn(tileBase, `mc-demock-t${i}`)}
+                        // Base position = layout A, so reduced-motion (animation off)
+                        // shows the full static composition.
+                        style={{ left: `${r.x}%`, top: `${r.y}%`, width: `${r.w}%`, height: `${r.h}%` }}
+                    >
+                        <TileGlyph kind={TILE_KINDS[i]} />
+                    </div>
+                ))}
+            </div>
         </div>
     )
 }
+
+// En móvil mostramos 3 cards apiladas (stat + chart + list) a ancho completo —
+// suficiente para comunicar "tablero cargando/ vacío" sin apretar 6 tiles.
+const MOBILE_TILE_KINDS: Glyph[] = ['stat', 'chart', 'list']