@asteby/metacore-runtime-react 29.2.4 → 29.2.5

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @asteby/metacore-runtime-react
 
+## 29.2.5
+
+### Patch Changes
+
+- 428f5b0: fix(dashboard): skeleton vacío = 3 cards estáticas a ancho completo
+
+  Sin animación de reflow. El stack ya no usa `mc-demock-tile` (absolute), así
+  que no se colapsa en una franja chica en móvil / con sidebar.
+
+- 48cf4e4: El botón de escaneo también aparece siempre (sin `isCameraScanSupported()`) en
+  los campos `dynamic_select` (`dynamic-select-field`) y en el modal de
+  crear/editar registro (`dialogs/dynamic-record`), no sólo en el input de texto.
+  El renglón de una orden de compra usa `dynamic_select`, así que ahí el icono de
+  cámara no aparecía en escritorio pese a declarar `scan`. Ahora los tres
+  renderers son consistentes con el POS.
+
 ## 29.2.4
 
 ### Patch Changes

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

@@ -24,15 +24,12 @@ export declare function computeLayoutRects(layout: LayoutSpec, gap?: number): Mo
 /** 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.
+ * Full-bleed skeleton dashboard: 3 static cards stacked full-width.
+ * No reflow animation — size and layout stability matter more than motion.
+ * 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.
+ * The layout-math helpers above (`computeLayoutRects`, etc.) stay exported for
+ * the overlap unit test / future reuse; the visible UI is the stack only.
  */
 export declare function DashboardEmptyMockup({ className }: {
     className?: string;

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,qBAyCzE"}
+{"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;AA0HD;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,qBAuBzE"}

package/dist/dashboard-empty-mockup.js

@@ -112,7 +112,9 @@ function useMockupStyles() {
         document.head.appendChild(el);
     }, []);
 }
-const tileBase = 'rounded-lg border border-border/60 bg-card mc-demock-tile mc-demock-shimmer text-foreground';
+// Static stack cards — never `mc-demock-tile` (that class is position:absolute
+// for the old animated grid and collapsed cards into a tiny top-left strip).
+const stackTileBase = 'relative w-full rounded-xl border border-border/60 bg-card 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() {
@@ -122,28 +124,17 @@ function SkeletonHeader() {
 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" }) })] }))] })] }));
 }
-// 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 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.
+ * Full-bleed skeleton dashboard: 3 static cards stacked full-width.
+ * No reflow animation — size and layout stability matter more than motion.
+ * 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.
+ * The layout-math helpers above (`computeLayoutRects`, etc.) stay exported for
+ * the overlap unit test / future reuse; the visible UI is the stack only.
  */
 export function DashboardEmptyMockup({ className }) {
     useMockupStyles();
-    const layoutA = React.useMemo(() => computeLayoutRects(MOCKUP_LAYOUTS[0]), []);
-    return (_jsxs("div", { "aria-hidden": "true", "data-testid": "dashboard-empty-mockup", className: cn('pointer-events-none select-none', className), children: [_jsx("div", { className: "flex min-h-full flex-col gap-3 sm:hidden", children: MOBILE_TILE_KINDS.map((kind, i) => (_jsx("div", { className: cn(tileBase, 'mc-demock-shimmer relative min-h-[132px] 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))) })] }));
+    return (_jsx("div", { "aria-hidden": "true", "data-testid": "dashboard-empty-mockup", className: cn('pointer-events-none w-full select-none', className), children: _jsx("div", { className: "flex w-full flex-col gap-4", "data-testid": "dashboard-empty-mockup-stack", children: STACK_TILE_KINDS.map((kind, i) => (_jsx("div", { className: cn(stackTileBase, 'min-h-[200px]'), children: _jsx(TileGlyph, { kind: kind }) }, 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'];
+// 3 cards a ancho completo — stat + chart + list. Sin animación de reflow.
+const STACK_TILE_KINDS = ['stat', 'chart', 'list'];

package/dist/dashboard-grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dashboard-grid.d.ts","sourceRoot":"","sources":["../src/dashboard-grid.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;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,qBAuJpB"}
+{"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"}

package/dist/dashboard-grid.js

@@ -121,21 +121,10 @@ export function DashboardGrid({ groups, widgets, loadData, isAdmin, locale, curr
     // Global empty state (no widgets at all / none visible after gating).
     if (visibleGroups.length === 0) {
         return (_jsx("div", { "data-testid": "dashboard-empty", className: cn(
-            // 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).
-            //
-            // 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.
-            // No dashed border / padding wrapper: the skeleton tiles ARE
-            // cards (same anatomy as the real widgets), so the mockup
-            // should float exactly like the loaded dashboard, not sit
-            // inside a boxed placeholder. Keep only the definite height.
-            'h-[clamp(420px,60vh,720px)] w-full', className), children: _jsx(DashboardEmptyMockup, { className: "h-full" }) }));
+            // Full-bleed stack of static skeleton cards (no dashed box,
+            // no caption). Height follows the 3 tall cards — no absolute
+            // %-height grid that needed a clamp wrapper.
+            'w-full', className), children: _jsx(DashboardEmptyMockup, {}) }));
     }
     return (_jsx("div", { "data-testid": "dashboard-grid", className: cn(
         // Masonry: balanced CSS columns. Cards take their natural height

package/dist/dialogs/dynamic-record.js

@@ -18,7 +18,7 @@ import { toast } from 'sonner';
 import { format, parseISO } from 'date-fns';
 import { es } from 'date-fns/locale';
 import { ExternalLink, Loader2, CalendarIcon, ChevronDown, Check, Upload, X as XIcon, ScanLine } from 'lucide-react';
-import { BarcodeScanner, isCameraScanSupported } from '../barcode-scanner';
+import { BarcodeScanner } from '../barcode-scanner';
 import { useApi } from '../api-context';
 import { toastServerError, extractFieldErrors, localizeFieldIssue } from '../server-error';
 import { DynamicSelectField, OptionLead, OptionThumb } from '../dynamic-select-field';
@@ -1026,9 +1026,11 @@ export function EditField({ field, value, onChange, record }) {
  */
 function ScannableRecordInput({ field, value, onChange, inputType, }) {
     const [scanOpen, setScanOpen] = useState(false);
+    // El botón de escaneo aparece siempre que el campo declara `scan` (como el
+    // POS), sin esconderse por `isCameraScanSupported()`. El BarcodeScanner ya
+    // muestra un mensaje amable cuando el navegador no tiene cámara.
     const scanEnabled = !!(field.scan ??
-        field.scannable) &&
-        isCameraScanSupported();
+        field.scannable);
     const input = (_jsx(Input, { type: inputType, value: value ?? '', onChange: (e) => onChange(inputType === 'number' ? (e.target.value === '' ? '' : Number(e.target.value)) : e.target.value), placeholder: field.placeholder }));
     if (!scanEnabled)
         return input;

package/dist/dynamic-select-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-select-field.d.ts","sourceRoot":"","sources":["../src/dynamic-select-field.tsx"],"names":[],"mappings":"AAyCA,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,+BA6BA;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,+BAsQzB;AAED,eAAe,kBAAkB,CAAA"}
+{"version":3,"file":"dynamic-select-field.d.ts","sourceRoot":"","sources":["../src/dynamic-select-field.tsx"],"names":[],"mappings":"AAyCA,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,+BA6BA;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,+BAyQzB;AAED,eAAe,kBAAkB,CAAA"}

package/dist/dynamic-select-field.js

@@ -26,7 +26,7 @@ import { useEffect, useRef, useState } from 'react';
 import { Button, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, Popover, PopoverContent, PopoverTrigger, InitialsAvatar, } from '@asteby/metacore-ui/primitives';
 import { Check, ChevronsUpDown, Loader2, Plus, ScanLine } from 'lucide-react';
 import { resolveColorCss } from '@asteby/metacore-ui/lib';
-import { BarcodeScanner, isCameraScanSupported } from './barcode-scanner';
+import { BarcodeScanner } from './barcode-scanner';
 import { DynamicIcon, isLucideIconName } from './dynamic-icon';
 import { useOptionsResolver } from './use-options-resolver';
 import { getDependsOn, getFieldRef, resolveOptionsSource } from './dynamic-form-schema';
@@ -98,10 +98,13 @@ export function DynamicSelectField({ field, value, onChange, seedOption, depends
     const [search, setSearch] = useState('');
     const [scanOpen, setScanOpen] = useState(false);
     const debounced = useDebounced(search, 250);
-    // Escaneo por cámara para "llenar rápido": opt-in por campo (`scan`) y sólo
-    // si el navegador soporta BarcodeDetector. Un código escaneado alimenta la
-    // búsqueda y abre el picker para elegir la referencia sin tipear el UUID.
-    const scanEnabled = !!(field.scan ?? field.scannable) && isCameraScanSupported();
+    // Escaneo por cámara para "llenar rápido": opt-in por campo (`scan`). El
+    // botón aparece SIEMPRE que el campo lo declara (igual que el POS), sin
+    // esconderse por `isCameraScanSupported()` — en escritorio el botón no salía
+    // aunque el campo lo pidiera. El BarcodeScanner ya degrada con un mensaje
+    // cuando no hay cámara. Un código escaneado alimenta la búsqueda y abre el
+    // picker para elegir la referencia sin tipear el UUID.
+    const scanEnabled = !!(field.scan ?? field.scannable);
     const handleScanDetected = (code) => {
         setSearch(code);
         setOpen(true);

package/package.json

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

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

@@ -156,16 +156,16 @@ describe('DashboardGrid render', () => {
         expect(screen.getByTestId('dashboard-empty')).toBeTruthy()
     })
 
-    it('renders the animated mockup (decorative) in the empty state', () => {
+    it('renders the static full-width skeleton stack (decorative) in the empty state', () => {
         render(<DashboardGrid widgets={[]} loadData={loaderOf({})} />)
         const mock = screen.getByTestId('dashboard-empty-mockup')
         expect(mock).toBeTruthy()
+        expect(screen.getByTestId('dashboard-empty-mockup-stack')).toBeTruthy()
         // Purely decorative → hidden from the a11y tree.
         expect(mock.getAttribute('aria-hidden')).toBe('true')
-        // Keyframes are injected once into the document head.
+        // Shimmer styles still inject once (no reflow keyframes required).
         expect(document.getElementById('mc-dashboard-empty-mockup-style')).toBeTruthy()
-        // No caption text — the animation carries the meaning (and avoids
-        // shipping un-localized copy from the package).
+        // No caption text — avoids shipping un-localized copy from the package.
         expect(screen.queryByText(/dashboard/i)).toBeNull()
     })
 

package/src/dashboard-empty-mockup.tsx

@@ -137,8 +137,10 @@ function useMockupStyles() {
     }, [])
 }
 
-const tileBase =
-    'rounded-lg border border-border/60 bg-card mc-demock-tile mc-demock-shimmer text-foreground'
+// Static stack cards — never `mc-demock-tile` (that class is position:absolute
+// for the old animated grid and collapsed cards into a tiny top-left strip).
+const stackTileBase =
+    'relative w-full rounded-xl border border-border/60 bg-card mc-demock-shimmer text-foreground'
 
 type Glyph = 'chart' | 'stat' | 'list' | 'bar'
 
@@ -208,64 +210,38 @@ function TileGlyph({ kind }: { kind: Glyph }) {
     )
 }
 
-// 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 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.
+ * Full-bleed skeleton dashboard: 3 static cards stacked full-width.
+ * No reflow animation — size and layout stability matter more than motion.
+ * 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.
+ * The layout-math helpers above (`computeLayoutRects`, etc.) stay exported for
+ * the overlap unit test / future reuse; the visible UI is the stack only.
  */
 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('pointer-events-none select-none', className)}
+            className={cn('pointer-events-none w-full select-none', className)}
         >
-            {/* 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 min-h-full flex-col gap-3 sm:hidden">
-                {MOBILE_TILE_KINDS.map((kind, i) => (
+            <div
+                className="flex w-full flex-col gap-4"
+                data-testid="dashboard-empty-mockup-stack"
+            >
+                {STACK_TILE_KINDS.map((kind, i) => (
                     <div
                         key={i}
-                        className={cn(tileBase, 'mc-demock-shimmer relative min-h-[132px] flex-1')}
+                        className={cn(stackTileBase, 'min-h-[200px]')}
                     >
                         <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']
+// 3 cards a ancho completo — stat + chart + list. Sin animación de reflow.
+const STACK_TILE_KINDS: Glyph[] = ['stat', 'chart', 'list']

package/src/dashboard-grid.tsx

@@ -154,25 +154,14 @@ export function DashboardGrid({
             <div
                 data-testid="dashboard-empty"
                 className={cn(
-                    // 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).
-                    //
-                    // 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.
-                    // No dashed border / padding wrapper: the skeleton tiles ARE
-                    // cards (same anatomy as the real widgets), so the mockup
-                    // should float exactly like the loaded dashboard, not sit
-                    // inside a boxed placeholder. Keep only the definite height.
-                    'h-[clamp(420px,60vh,720px)] w-full',
+                    // Full-bleed stack of static skeleton cards (no dashed box,
+                    // no caption). Height follows the 3 tall cards — no absolute
+                    // %-height grid that needed a clamp wrapper.
+                    'w-full',
                     className,
                 )}
             >
-                <DashboardEmptyMockup className="h-full" />
+                <DashboardEmptyMockup />
             </div>
         )
     }

package/src/dialogs/dynamic-record.tsx

@@ -47,7 +47,7 @@ import { toast } from 'sonner'
 import { format, parseISO } from 'date-fns'
 import { es } from 'date-fns/locale'
 import { ExternalLink, Loader2, CalendarIcon, ChevronDown, Check, Upload, X as XIcon, ScanLine } from 'lucide-react'
-import { BarcodeScanner, isCameraScanSupported } from '../barcode-scanner'
+import { BarcodeScanner } from '../barcode-scanner'
 import { useApi } from '../api-context'
 import { toastServerError, extractFieldErrors, localizeFieldIssue } from '../server-error'
 import { DynamicSelectField, OptionLead, OptionThumb } from '../dynamic-select-field'
@@ -1848,10 +1848,13 @@ function ScannableRecordInput({
     inputType: string
 }) {
     const [scanOpen, setScanOpen] = useState(false)
-    const scanEnabled =
-        !!((field as { scan?: boolean; scannable?: boolean }).scan ??
-            (field as { scan?: boolean; scannable?: boolean }).scannable) &&
-        isCameraScanSupported()
+    // El botón de escaneo aparece siempre que el campo declara `scan` (como el
+    // POS), sin esconderse por `isCameraScanSupported()`. El BarcodeScanner ya
+    // muestra un mensaje amable cuando el navegador no tiene cámara.
+    const scanEnabled = !!(
+        (field as { scan?: boolean; scannable?: boolean }).scan ??
+        (field as { scan?: boolean; scannable?: boolean }).scannable
+    )
     const input = (
         <Input
             type={inputType}

package/src/dynamic-select-field.tsx

@@ -37,7 +37,7 @@ import {
 } from '@asteby/metacore-ui/primitives'
 import { Check, ChevronsUpDown, Loader2, Plus, ScanLine } from 'lucide-react'
 import { resolveColorCss } from '@asteby/metacore-ui/lib'
-import { BarcodeScanner, isCameraScanSupported } from './barcode-scanner'
+import { BarcodeScanner } from './barcode-scanner'
 import { DynamicIcon, isLucideIconName } from './dynamic-icon'
 import { useOptionsResolver, type ResolvedOption } from './use-options-resolver'
 import { getDependsOn, getFieldRef, resolveOptionsSource } from './dynamic-form-schema'
@@ -193,10 +193,13 @@ export function DynamicSelectField({
     const [scanOpen, setScanOpen] = useState(false)
     const debounced = useDebounced(search, 250)
 
-    // Escaneo por cámara para "llenar rápido": opt-in por campo (`scan`) y sólo
-    // si el navegador soporta BarcodeDetector. Un código escaneado alimenta la
-    // búsqueda y abre el picker para elegir la referencia sin tipear el UUID.
-    const scanEnabled = !!(field.scan ?? field.scannable) && isCameraScanSupported()
+    // Escaneo por cámara para "llenar rápido": opt-in por campo (`scan`). El
+    // botón aparece SIEMPRE que el campo lo declara (igual que el POS), sin
+    // esconderse por `isCameraScanSupported()` — en escritorio el botón no salía
+    // aunque el campo lo pidiera. El BarcodeScanner ya degrada con un mensaje
+    // cuando no hay cámara. Un código escaneado alimenta la búsqueda y abre el
+    // picker para elegir la referencia sin tipear el UUID.
+    const scanEnabled = !!(field.scan ?? field.scannable)
     const handleScanDetected = (code: string) => {
         setSearch(code)
         setOpen(true)