npm - @asteby/metacore-runtime-react - Versions diffs - 27.3.1 → 27.3.3 - Mend

@asteby/metacore-runtime-react 27.3.1 → 27.3.3

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 (16) hide show

package/CHANGELOG.md +25 -0
package/dist/dashboard-empty-mockup.d.ts +34 -3
package/dist/dashboard-empty-mockup.d.ts.map +1 -1
package/dist/dashboard-empty-mockup.js +115 -105
package/dist/dashboard-grid.d.ts.map +1 -1
package/dist/dashboard-grid.js +8 -1
package/dist/dynamic-columns.d.ts.map +1 -1
package/dist/dynamic-columns.js +14 -4
package/dist/dynamic-table.d.ts.map +1 -1
package/dist/dynamic-table.js +8 -1
package/package.json +1 -1
package/src/__tests__/dashboard-empty-mockup.test.ts +83 -0
package/src/dashboard-empty-mockup.tsx +196 -141
package/src/dashboard-grid.tsx +9 -2
package/src/dynamic-columns.tsx +15 -9
package/src/dynamic-table.tsx +11 -1

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,30 @@
 # @asteby/metacore-runtime-react
+## 27.3.3
+### Patch Changes
+- 31ba021: DynamicTable: clamp genérico de texto largo en celdas (max-width 350px + tooltip con el valor completo) y las cards móviles muestran el label traducido de la columna en vez de la key cruda.
+## 27.3.2
+### Patch Changes
+- c58b455: Empty state del Tablero: el mockup animado ahora reorganiza toda la grilla en
+  loop, pasando por cuatro composiciones de dashboard (A→B→C→D→A) — las skeleton
+  cards crecen, se achican y se redistribuyen como widgets reales probando
+  acomodos mientras carga. ~2s de reposo por layout y ~1.2s de transición fluida
+  sincronizada (todas las cards transicionan a la vez, mismo easing).
+  Cero solapes garantizado por construcción: la grilla son 3 columnas en orden
+  fijo × top/bottom, y cada layout solo cambia anchos de columna y el split
+  top/bottom, así que todo par de tiles conserva un eje de separación consistente
+  con un `gap` constante — bajo interpolación lineal eso jamás se cruza. Se agrega
+  un test que interpola los rects (t=0..1, paso 0.05) en cada transición y asserta
+  0 solapes (estático + en tránsito). Se mantiene tokens de tema, skeleton interno
+  tipo widget card, `prefers-reduced-motion: reduce` → grilla estática (layout A) y
+  `aria-hidden`.
 ## 27.3.1
 ### Patch Changes

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

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

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

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

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

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

package/dist/dashboard-grid.d.ts.map 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;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~~"}
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,qBAmJpB"}

package/dist/dashboard-grid.js CHANGED Viewed

@@ -124,7 +124,14 @@ export function DashboardGrid({ groups, widgets, loadData, isAdmin, locale, curr
             // 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]" }) }));
+            //
+            // DEFINITE height (clamp), not min-height: the mockup positions
+            // its tiles with percentage heights, which only resolve against a
+            // parent whose height is definite. A min-height alone leaves the
+            // box auto-height and the tiles collapse into a strip — so we own
+            // the height here instead of hoping the dashboard layout supplies
+            // one.
+            'h-[clamp(420px,60vh,720px)] w-full rounded-xl border border-dashed border-border/60 p-4', className), children: _jsx(DashboardEmptyMockup, { className: "h-full" }) }));
     }
     return (_jsx("div", { "data-testid": "dashboard-grid", className: cn(
         // Masonry: balanced CSS columns. Cards take their natural height

package/dist/dynamic-columns.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dynamic-columns.d.ts","sourceRoot":"","sources":["../src/dynamic-columns.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAU,KAAK,MAAM,EAAE,MAAM,UAAU,CAAA;AAwC9C,OAAO,KAAK,EAAiB,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE9D,OAAO,KAAK,EAER,iBAAiB,EACpB,MAAM,wBAAwB,CAAA;AAE/B,qEAAqE;AACrE,MAAM,WAAW,qBAAqB;IAClC;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACtB;AA0BD;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,KAAK,gBAAgB,EAAE,cAAc,MAAM,KAAG,MACzB,CAAA;AAQrD;;;;;GAKG;AACH,eAAO,MAAM,WAAW,GAAI,KAAK,gBAAgB,KAAG,MAAM,GAAG,SAG5D,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAC7B,KAAK,gBAAgB,EACrB,OAAO,OAAO,EACd,WAAW,MAAM,EACjB,SAAS,MAAM,KAChB,MAyBF,CAAA;AAyCD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,0BAA0B,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OAMlE,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OAiB5D,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OACqB,CAAA;AAwFhF;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,GAAI,KAAK,IAAI,CAAC,gBAAgB,EAAE,KAAK,CAAC,KAAG,MAGnE,CAAA;AAED,6EAA6E;AAC7E,eAAO,MAAM,eAAe,2DAA4D,CAAA;AAExF;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,cAAc,CAC1B,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,MAAM,GAAG,SAAS,EAC5B,MAAM,EAAE,MAAM,EACd,QAAQ,CAAC,EAAE,MAAM,GAClB;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CA6C5C;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB,GAAI,KAAK,gBAAgB,EAAE,KAAK,GAAG,KAAG,MAWtE,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAAI,KAAK,gBAAgB,EAAE,KAAK,GAAG,KAAG,MAOtE,CAAA;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,uBAAuB,GAAI,KAAK,gBAAgB,EAAE,KAAK,GAAG,KAAG,MAOzE,CAAA;AA+ID;;;;GAIG;AACH,wBAAgB,4BAA4B,CACxC,OAAO,GAAE,qBAA0B,GACpC,iBAAiB,~~CAqmBnB~~;AAED;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,iBACL,CAAA"}
1	+ {"version":3,"file":"dynamic-columns.d.ts","sourceRoot":"","sources":["../src/dynamic-columns.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAU,KAAK,MAAM,EAAE,MAAM,UAAU,CAAA;AAwC9C,OAAO,KAAK,EAAiB,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE9D,OAAO,KAAK,EAER,iBAAiB,EACpB,MAAM,wBAAwB,CAAA;AAE/B,qEAAqE;AACrE,MAAM,WAAW,qBAAqB;IAClC;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACtB;AA0BD;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,KAAK,gBAAgB,EAAE,cAAc,MAAM,KAAG,MACzB,CAAA;AAQrD;;;;;GAKG;AACH,eAAO,MAAM,WAAW,GAAI,KAAK,gBAAgB,KAAG,MAAM,GAAG,SAG5D,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAC7B,KAAK,gBAAgB,EACrB,OAAO,OAAO,EACd,WAAW,MAAM,EACjB,SAAS,MAAM,KAChB,MAyBF,CAAA;AAyCD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,0BAA0B,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OAMlE,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OAiB5D,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OACqB,CAAA;AAwFhF;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,GAAI,KAAK,IAAI,CAAC,gBAAgB,EAAE,KAAK,CAAC,KAAG,MAGnE,CAAA;AAED,6EAA6E;AAC7E,eAAO,MAAM,eAAe,2DAA4D,CAAA;AAExF;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,cAAc,CAC1B,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,MAAM,GAAG,SAAS,EAC5B,MAAM,EAAE,MAAM,EACd,QAAQ,CAAC,EAAE,MAAM,GAClB;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CA6C5C;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB,GAAI,KAAK,gBAAgB,EAAE,KAAK,GAAG,KAAG,MAWtE,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAAI,KAAK,gBAAgB,EAAE,KAAK,GAAG,KAAG,MAOtE,CAAA;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,uBAAuB,GAAI,KAAK,gBAAgB,EAAE,KAAK,GAAG,KAAG,MAOzE,CAAA;AA+ID;;;;GAIG;AACH,wBAAgB,4BAA4B,CACxC,OAAO,GAAE,qBAA0B,GACpC,iBAAiB,CA2mBnB;AAED;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,iBACL,CAAA"}

package/dist/dynamic-columns.js CHANGED Viewed

@@ -731,12 +731,22 @@ export function makeDefaultGetDynamicColumns(helpers = {}) {
                             if (typeof value === 'object' && value !== null) {
                                 return (_jsx(CollectionCell, { value: value, locale: currentLanguage, t: t, itemFields: col.itemFields ?? col.item_fields, getImageUrl: getImageUrl }));
                             }
-                            if (col.key === 'description' ||
+                            const text = value !== null && value !== undefined ? String(value) : '-';
+                            // Clamp de texto largo GENÉRICO: un `truncate` en un
+                            // span suelto no limita nada dentro de una celda de
+                            // tabla (la celda crece con el contenido). Cualquier
+                            // texto largo — biografías, notas, direcciones — se
+                            // acota a 350px con tooltip del valor completo. La
+                            // heurística por longitud cubre lo que la heurística
+                            // por nombre ('description') dejaba pasar.
+                            const isLongText = text.length > 60 ||
+                                col.key === 'description' ||
                                 col.key === 'features' ||
-                                col.key.includes('description')) {
-                                return (_jsx("div", { className: "max-w-[350px]", title: String(value), children: _jsx("span", { className: "truncate font-medium block", children: value !== null && value !== undefined ? String(value) : '-' }) }));
+                                col.key.includes('description');
+                            if (isLongText) {
+                                return (_jsx("div", { className: "max-w-[350px]", title: text, children: _jsx("span", { className: "truncate font-medium block", children: text }) }));
                             }
-                            return (_jsx("span", { className: "truncate font-medium", children: value !== null && value !== undefined ? String(value) : '-' }));
+                            return _jsx("span", { className: "truncate font-medium", children: text });
                         }
                     }
                 },

package/dist/dynamic-table.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dynamic-table.d.ts","sourceRoot":"","sources":["../src/dynamic-table.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAKH,KAAK,SAAS,EAajB,MAAM,uBAAuB,CAAA;AAgC9B,OAAO,KAAK,EAAsB,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAiEnF,MAAM,WAAW,iBAAiB;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC7C;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC/B,cAAc,CAAC,EAAE,GAAG,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,YAAY,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAA;IAC/B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,aAAoB,EACpB,aAAkB,EAClB,QAAQ,EACR,UAAU,EACV,cAAc,EACd,cAAc,EACd,YAAiB,EACjB,iBAA4C,EAC5C,QAAQ,EACR,QAAQ,EACR,cAAsB,GACzB,EAAE,iBAAiB,+~~BA6qCnB~~"}
1	+ {"version":3,"file":"dynamic-table.d.ts","sourceRoot":"","sources":["../src/dynamic-table.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAKH,KAAK,SAAS,EAajB,MAAM,uBAAuB,CAAA;AAgC9B,OAAO,KAAK,EAAsB,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAiEnF,MAAM,WAAW,iBAAiB;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC7C;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC/B,cAAc,CAAC,EAAE,GAAG,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,YAAY,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAA;IAC/B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,aAAoB,EACpB,aAAkB,EAClB,QAAQ,EACR,UAAU,EACV,cAAc,EACd,cAAc,EACd,YAAiB,EACjB,iBAA4C,EAC5C,QAAQ,EACR,QAAQ,EACR,cAAsB,GACzB,EAAE,iBAAiB,+BAurCnB"}

package/dist/dynamic-table.js CHANGED Viewed

@@ -976,8 +976,15 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
                                 const actionsCell = cells.find((c) => c.column.id === 'actions');
                                 const dataCells = cells.filter((c) => c.column.id !== 'actions' && c.column.id !== 'select');
                                 return (_jsxs("div", { "data-state": row.getIsSelected() && 'selected', className: cn('flex flex-col gap-1.5 rounded-lg border bg-card p-3 data-[state=selected]:border-primary/40', onRowClick && 'cursor-pointer'), onClick: onRowClick ? () => onRowClick(row.original) : undefined, children: [dataCells.map((cell) => {
+                                            // El label humano vive en columnDef.meta.label (lo
+                                            // adjunta la fábrica de columnas); el header casi
+                                            // nunca es string (es un componente), así que caer a
+                                            // column.id mostraba keys crudas ('user.avatar',
+                                            // 'created_at') en las cards móviles.
+                                            const cellMeta = cell.column.columnDef.meta;
                                             const header = cell.column.columnDef.header;
-                                            const label = typeof header === 'string' ? header : cell.column.id;
+                                            const label = cellMeta?.label ??
+                                                (typeof header === 'string' ? header : cell.column.id);
                                             return (_jsxs("div", { className: 'flex items-start justify-between gap-3 text-sm', children: [_jsx("span", { className: 'shrink-0 text-muted-foreground', children: label }), _jsx("span", { className: 'min-w-0 break-words text-right font-medium', children: flexRender(cell.column.columnDef.cell, cell.getContext()) })] }, cell.id));
                                         }), actionsCell && (_jsx("div", { className: 'flex justify-end border-t pt-2', onClick: onRowClick ? (e) => e.stopPropagation() : undefined, children: flexRender(actionsCell.column.columnDef.cell, actionsCell.getContext()) }))] }, row.id));
                             })) : (_jsxs("div", { className: 'flex flex-col items-center justify-center gap-2 rounded-lg border bg-card py-12 text-muted-foreground', children: [_jsx("div", { className: 'flex h-16 w-16 items-center justify-center rounded-full bg-muted/50', children: _jsx(Inbox, { className: 'h-8 w-8' }) }), _jsx("h3", { className: 'text-base font-semibold text-foreground', children: "No se encontraron resultados" }), _jsx("p", { className: 'text-sm text-muted-foreground', children: "No hay datos para mostrar en este momento." })] })), infiniteScroll && (_jsxs(_Fragment, { children: [loadingMore && (_jsx(Skeleton, { className: 'h-16 w-full shrink-0', "data-testid": 'table-loading-more-mobile' })), _jsx("div", { ref: infMobileSentinel, className: 'h-1 w-full shrink-0', "aria-hidden": true })] }))] }), _jsx("div", { className: 'shrink-0 pt-4', children: infiniteScroll ? (data.length > 0 && (_jsx("p", { className: 'text-center text-xs text-muted-foreground tabular-nums', children: t('common.showingCount', {

package/package.json CHANGED Viewed

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

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

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

package/src/dashboard-empty-mockup.tsx CHANGED Viewed

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

package/src/dashboard-grid.tsx CHANGED Viewed

@@ -157,11 +157,18 @@ export function DashboardGrid({
                     // 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',
+                    //
+                    // DEFINITE height (clamp), not min-height: the mockup positions
+                    // its tiles with percentage heights, which only resolve against a
+                    // parent whose height is definite. A min-height alone leaves the
+                    // box auto-height and the tiles collapse into a strip — so we own
+                    // the height here instead of hoping the dashboard layout supplies
+                    // one.
+                    'h-[clamp(420px,60vh,720px)] w-full rounded-xl border border-dashed border-border/60 p-4',
                     className,
                 )}
             >
-                <DashboardEmptyMockup className="h-full min-h-[inherit]" />
+                <DashboardEmptyMockup className="h-full" />
             </div>
         )
     }

package/src/dynamic-columns.tsx CHANGED Viewed

@@ -1143,24 +1143,30 @@ export function makeDefaultGetDynamicColumns(
                                     />
                                 )
                             }
-                            if (
+                            const text =
+                                value !== null && value !== undefined ? String(value) : '-'
+                            // Clamp de texto largo GENÉRICO: un `truncate` en un
+                            // span suelto no limita nada dentro de una celda de
+                            // tabla (la celda crece con el contenido). Cualquier
+                            // texto largo — biografías, notas, direcciones — se
+                            // acota a 350px con tooltip del valor completo. La
+                            // heurística por longitud cubre lo que la heurística
+                            // por nombre ('description') dejaba pasar.
+                            const isLongText =
+                                text.length > 60 ||
                                 col.key === 'description' ||
                                 col.key === 'features' ||
                                 col.key.includes('description')
-                            ) {
+                            if (isLongText) {
                                 return (
-                                    <div className="max-w-[350px]" title={String(value)}>
+                                    <div className="max-w-[350px]" title={text}>
                                         <span className="truncate font-medium block">
-                                            {value !== null && value !== undefined ? String(value) : '-'}
+                                            {text}
                                         </span>
                                     </div>
                                 )
                             }
-                            return (
-                                <span className="truncate font-medium">
-                                    {value !== null && value !== undefined ? String(value) : '-'}
-                                </span>
-                            )
+                            return <span className="truncate font-medium">{text}</span>
                         }
                     }
                 },

package/src/dynamic-table.tsx CHANGED Viewed

@@ -1286,8 +1286,18 @@ export function DynamicTable({
                                     onClick={onRowClick ? () => onRowClick(row.original) : undefined}
                                 >
                                     {dataCells.map((cell: Cell<any, unknown>) => {
+                                        // El label humano vive en columnDef.meta.label (lo
+                                        // adjunta la fábrica de columnas); el header casi
+                                        // nunca es string (es un componente), así que caer a
+                                        // column.id mostraba keys crudas ('user.avatar',
+                                        // 'created_at') en las cards móviles.
+                                        const cellMeta = cell.column.columnDef.meta as
+                                            | { label?: string }
+                                            | undefined
                                         const header = cell.column.columnDef.header
-                                        const label = typeof header === 'string' ? header : cell.column.id
+                                        const label =
+                                            cellMeta?.label ??
+                                            (typeof header === 'string' ? header : cell.column.id)
                                         return (
                                             <div key={cell.id} className='flex items-start justify-between gap-3 text-sm'>
                                                 <span className='shrink-0 text-muted-foreground'>{label}</span>