@asteby/metacore-runtime-react 29.0.1 → 29.0.3

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @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
+
+- c0c8cb2: fix(hotswap): al recibir `ADDON_MANIFEST_CHANGED`, si la invalidación scopeada
+  no elimina ninguna entrada (el caso real: la metadata se cachea por nombre de
+  TABLA — `purchase_order_items`, `suppliers` — que no lleva el prefijo del
+  addon), se limpia TODO el cache de metadata como fallback. Antes, actualizar un
+  addon dejaba el label/ref viejo en el store persistido y el usuario tenía que
+  borrar datos del sitio a mano para ver la metadata fresca. Un cambio de manifest
+  es infrecuente (install/upgrade), así que el refetch perezoso en el próximo
+  montaje es barato y correcto.
+
 ## 29.0.1
 
 ### 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/dist/manifest-hotswap-subscriber.d.ts

@@ -45,7 +45,9 @@ export interface WireHotSwapInvalidationOptions {
      * Useful for hosts that want to log/observe hot-swaps or trigger a
      * `window.location.reload()` when the running addon's bundle hash
      * changes (see the module-level comment above for the trade-off).
-     * `removed` is the number of cache entries flushed for this addon.
+     * `removed` is the number of cache entries flushed for this addon, or
+     * `-1` when the scoped matcher found nothing and the whole metadata
+     * cache was cleared as a fallback (see `wireHotSwapInvalidation`).
      */
     onSwap?: (msg: AddonManifestChangedMessage, removed: number) => void;
 }

package/dist/manifest-hotswap-subscriber.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"manifest-hotswap-subscriber.d.ts","sourceRoot":"","sources":["../src/manifest-hotswap-subscriber.ts"],"names":[],"mappings":"AA6CA,OAAO,EAAoB,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAEzE;;;;GAIG;AACH,eAAO,MAAM,2BAA2B,EAAG,wBAAiC,CAAA;AAE5E;;;;GAIG;AACH,MAAM,WAAW,2BAA2B;IACxC,IAAI,EAAE,OAAO,2BAA2B,CAAA;IACxC,OAAO,EAAE;QACL,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,QAAQ,EAAE,MAAM,CAAA;QAChB,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,SAAS,CAAC,EAAE,MAAM,CAAA;KACrB,CAAA;CACJ;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,qBAAqB;IAClC,SAAS,EAAE,CACP,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,CAAC,OAAO,EAAE,2BAA2B,KAAK,IAAI,KACtD,MAAM,IAAI,CAAA;CAClB;AAED,MAAM,WAAW,8BAA8B;IAC3C;;;;;OAKG;IACH,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,2BAA2B,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;CACvE;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,uBAAuB,CACnC,MAAM,EAAE,qBAAqB,GAAG,SAAS,GAAG,IAAI,EAChD,OAAO,GAAE,8BAAmC,GAC7C,MAAM,IAAI,CAeZ;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,4BAA4B,CACxC,MAAM,EAAE,qBAAqB,GAAG,SAAS,GAAG,IAAI,EAChD,OAAO,GAAE,8BAAmC,GAC7C,IAAI,CAON"}
+{"version":3,"file":"manifest-hotswap-subscriber.d.ts","sourceRoot":"","sources":["../src/manifest-hotswap-subscriber.ts"],"names":[],"mappings":"AA6CA,OAAO,EAAoB,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAEzE;;;;GAIG;AACH,eAAO,MAAM,2BAA2B,EAAG,wBAAiC,CAAA;AAE5E;;;;GAIG;AACH,MAAM,WAAW,2BAA2B;IACxC,IAAI,EAAE,OAAO,2BAA2B,CAAA;IACxC,OAAO,EAAE;QACL,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,QAAQ,EAAE,MAAM,CAAA;QAChB,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,SAAS,CAAC,EAAE,MAAM,CAAA;KACrB,CAAA;CACJ;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,qBAAqB;IAClC,SAAS,EAAE,CACP,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,CAAC,OAAO,EAAE,2BAA2B,KAAK,IAAI,KACtD,MAAM,IAAI,CAAA;CAClB;AAED,MAAM,WAAW,8BAA8B;IAC3C;;;;;OAKG;IACH,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,2BAA2B,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;CACvE;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,uBAAuB,CACnC,MAAM,EAAE,qBAAqB,GAAG,SAAS,GAAG,IAAI,EAChD,OAAO,GAAE,8BAAmC,GAC7C,MAAM,IAAI,CA+BZ;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,4BAA4B,CACxC,MAAM,EAAE,qBAAqB,GAAG,SAAS,GAAG,IAAI,EAChD,OAAO,GAAE,8BAAmC,GAC7C,IAAI,CAON"}

package/dist/manifest-hotswap-subscriber.js

@@ -72,9 +72,25 @@ export function wireHotSwapInvalidation(client, options = {}) {
         const addonKey = message?.payload?.addonKey;
         if (!addonKey)
             return;
-        const removed = useMetadataCache
-            .getState()
-            .invalidateAddon(addonKey, matcher);
+        const store = useMetadataCache.getState();
+        let removed = store.invalidateAddon(addonKey, matcher);
+        // Matcher-miss fallback. `invalidateAddon`'s default matcher only
+        // recognises cache keys that carry the addon prefix
+        // (`purchases`, `purchases.Model`, `purchases:Model`). But most
+        // hosts cache metadata under the model's TABLE name
+        // (`purchase_order_items`, `suppliers`) — which has no `purchases.`
+        // prefix — so a scoped invalidation removes 0 entries and the
+        // stale label/ref survives (the "why did I have to clear site
+        // data" bug). A manifest change is rare (addon install/upgrade),
+        // so when scoping matched nothing we drop the WHOLE metadata cache:
+        // correctness over a micro-optimisation. Entries refetch lazily on
+        // the next DynamicTable/relation mount, picking up the new
+        // fields/refs/labels. Hosts that DO namespace their keys keep the
+        // cheap scoped path (removed > 0).
+        if (removed === 0) {
+            store.clearAll();
+            removed = -1; // sentinel: "cleared all" (distinct from 0 = no-op)
+        }
         onSwap?.(message, removed);
     });
     return unsubscribe;

package/package.json

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

package/src/__tests__/manifest-hotswap-subscriber.test.ts

@@ -118,6 +118,36 @@ describe('manifest-hotswap-subscriber', () => {
         expect(onSwap).toHaveBeenCalledWith(message, 2)
     })
 
+    it('clears the WHOLE cache when the scoped matcher finds nothing (table-named keys)', () => {
+        // Real-world case: metadata is cached under TABLE names, which carry no
+        // addon prefix. `invalidateAddon('purchases')` matches none of them, so
+        // without the fallback the stale label/ref would survive an upgrade.
+        const cache = useMetadataCache.getState()
+        cache.setMetadata('purchase_order_items', fakeMeta('items-old'))
+        cache.setMetadata('suppliers', fakeMeta('suppliers-old'))
+        cache.setModalMetadata('purchase_orders', fakeMeta('po-old'))
+
+        const onSwap = vi.fn()
+        const client = makeFakeClient()
+        wireHotSwapInvalidation(client, { onSwap })
+
+        const message: AddonManifestChangedMessage = {
+            type: 'ADDON_MANIFEST_CHANGED',
+            payload: { addonKey: 'purchases', newHash: 'sha256:new' },
+        }
+        client.emit(message)
+
+        const after = useMetadataCache.getState()
+        // Everything dropped — next mount refetches fresh metadata.
+        expect(after.cache).toEqual({})
+        expect(after.modalCache).toEqual({})
+        expect(after.prefetched).toBe(false)
+        // metadataVersion reset so prefetchAll re-seeds from the server.
+        expect(after.metadataVersion).toBe('')
+        // Sentinel -1 tells the host "cleared all" (vs 0 = genuine no-op).
+        expect(onSwap).toHaveBeenCalledWith(message, -1)
+    })
+
     it('honours a custom matcher when the host uses a different key convention', () => {
         const cache = useMetadataCache.getState()
         cache.setMetadata('addons/pos/cart', fakeMeta('cart'))

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']

package/src/manifest-hotswap-subscriber.ts

@@ -97,7 +97,9 @@ export interface WireHotSwapInvalidationOptions {
      * Useful for hosts that want to log/observe hot-swaps or trigger a
      * `window.location.reload()` when the running addon's bundle hash
      * changes (see the module-level comment above for the trade-off).
-     * `removed` is the number of cache entries flushed for this addon.
+     * `removed` is the number of cache entries flushed for this addon, or
+     * `-1` when the scoped matcher found nothing and the whole metadata
+     * cache was cleared as a fallback (see `wireHotSwapInvalidation`).
      */
     onSwap?: (msg: AddonManifestChangedMessage, removed: number) => void
 }
@@ -128,9 +130,25 @@ export function wireHotSwapInvalidation(
         (message) => {
             const addonKey = message?.payload?.addonKey
             if (!addonKey) return
-            const removed = useMetadataCache
-                .getState()
-                .invalidateAddon(addonKey, matcher)
+            const store = useMetadataCache.getState()
+            let removed = store.invalidateAddon(addonKey, matcher)
+            // Matcher-miss fallback. `invalidateAddon`'s default matcher only
+            // recognises cache keys that carry the addon prefix
+            // (`purchases`, `purchases.Model`, `purchases:Model`). But most
+            // hosts cache metadata under the model's TABLE name
+            // (`purchase_order_items`, `suppliers`) — which has no `purchases.`
+            // prefix — so a scoped invalidation removes 0 entries and the
+            // stale label/ref survives (the "why did I have to clear site
+            // data" bug). A manifest change is rare (addon install/upgrade),
+            // so when scoping matched nothing we drop the WHOLE metadata cache:
+            // correctness over a micro-optimisation. Entries refetch lazily on
+            // the next DynamicTable/relation mount, picking up the new
+            // fields/refs/labels. Hosts that DO namespace their keys keep the
+            // cheap scoped path (removed > 0).
+            if (removed === 0) {
+                store.clearAll()
+                removed = -1 // sentinel: "cleared all" (distinct from 0 = no-op)
+            }
             onSwap?.(message, removed)
         },
     )