@asteby/metacore-runtime-react 29.2.4 → 29.2.6

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @asteby/metacore-runtime-react
 
+## 29.2.6
+
+### Patch Changes
+
+- b1a9703: feat(barcode-scanner): botón de linterna (torch) cuando el dispositivo lo soporta
+
+  En ambientes oscuros se puede encender/apagar el flash de la cámara trasera
+  desde la barra del overlay. Si el hardware no expone `torch`, el botón no
+  aparece. Aplica a POS y formularios (mismo primitivo).
+
+## 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/barcode-scanner.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+/** `true` si el track de video expone linterna (ImageCapture / torch constraint). */
+export declare function trackSupportsTorch(track: MediaStreamTrack | null | undefined): boolean;
 /** Simbolismos de retail que intentamos detectar. */
 export declare const RETAIL_BARCODE_FORMATS: string[];
 /** `true` si este navegador puede escanear con la cámara (detector + getUserMedia). */

package/dist/barcode-scanner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"barcode-scanner.d.ts","sourceRoot":"","sources":["../src/barcode-scanner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAqC9B,qDAAqD;AACrD,eAAO,MAAM,sBAAsB,UASlC,CAAA;AAQD,uFAAuF;AACvF,wBAAgB,qBAAqB,IAAI,OAAO,CAM/C;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,eAyB1B;AAED,MAAM,WAAW,mBAAmB;IAChC,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,8EAA8E;IAC9E,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,uDAAuD;IACvD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;OAIG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAA;CAClC;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC3B,IAAI,EACJ,OAAO,EACP,UAAU,EACV,UAAiB,EACjB,UAAiB,EACjB,KAAyB,EACzB,IAAmC,EACnC,QAAqB,GACxB,EAAE,mBAAmB,4BA+IrB;AAED,eAAe,cAAc,CAAA"}
+{"version":3,"file":"barcode-scanner.d.ts","sourceRoot":"","sources":["../src/barcode-scanner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,qFAAqF;AACrF,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAOtF;AAoDD,qDAAqD;AACrD,eAAO,MAAM,sBAAsB,UASlC,CAAA;AAQD,uFAAuF;AACvF,wBAAgB,qBAAqB,IAAI,OAAO,CAM/C;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,eAyB1B;AAED,MAAM,WAAW,mBAAmB;IAChC,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,8EAA8E;IAC9E,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,uDAAuD;IACvD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;OAIG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAA;CAClC;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC3B,IAAI,EACJ,OAAO,EACP,UAAU,EACV,UAAiB,EACjB,UAAiB,EACjB,KAAyB,EACzB,IAAmC,EACnC,QAAqB,GACxB,EAAE,mBAAmB,4BAgMrB;AAED,eAAe,cAAc,CAAA"}

package/dist/barcode-scanner.js

@@ -1,7 +1,36 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
-import { Camera, ScanLine, X } from 'lucide-react';
+import { Camera, Flashlight, FlashlightOff, ScanLine, X } from 'lucide-react';
 import { Button } from '@asteby/metacore-ui';
+/** `true` si el track de video expone linterna (ImageCapture / torch constraint). */
+export function trackSupportsTorch(track) {
+    if (!track || typeof track.getCapabilities !== 'function')
+        return false;
+    try {
+        return !!track.getCapabilities().torch;
+    }
+    catch {
+        return false;
+    }
+}
+async function setTrackTorch(track, on) {
+    try {
+        await track.applyConstraints({
+            advanced: [{ torch: on }],
+        });
+        return true;
+    }
+    catch {
+        // Algunos WebViews fallan con advanced[] — reintento plano.
+        try {
+            await track.applyConstraints({ torch: on });
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }
+}
 /** Simbolismos de retail que intentamos detectar. */
 export const RETAIL_BARCODE_FORMATS = [
     'ean_13',
@@ -71,19 +100,38 @@ export function BarcodeScanner({ open, onClose, onDetected, continuous = true, b
     const lastHitRef = React.useRef({ code: '', at: 0 });
     const [error, setError] = React.useState(null);
     const [ready, setReady] = React.useState(false);
+    const [torchAvailable, setTorchAvailable] = React.useState(false);
+    const [torchOn, setTorchOn] = React.useState(false);
     const beep = useScanBeep();
     const stop = React.useCallback(() => {
         if (rafRef.current != null)
             cancelAnimationFrame(rafRef.current);
         rafRef.current = null;
+        const track = streamRef.current?.getVideoTracks()[0];
+        if (track && trackSupportsTorch(track)) {
+            void setTrackTorch(track, false);
+        }
         streamRef.current?.getTracks().forEach((t) => t.stop());
         streamRef.current = null;
         setReady(false);
+        setTorchAvailable(false);
+        setTorchOn(false);
     }, []);
+    const toggleTorch = React.useCallback(async () => {
+        const track = streamRef.current?.getVideoTracks()[0];
+        if (!track || !trackSupportsTorch(track))
+            return;
+        const next = !torchOn;
+        const ok = await setTrackTorch(track, next);
+        if (ok)
+            setTorchOn(next);
+    }, [torchOn]);
     React.useEffect(() => {
         if (!open)
             return;
         setError(null);
+        setTorchAvailable(false);
+        setTorchOn(false);
         const Ctor = getDetectorCtor();
         if (!navigator.mediaDevices?.getUserMedia || !Ctor) {
             setError('Tu navegador no soporta escaneo por cámara. Usá un lector físico (escribe en el campo) o escribí el código a mano.');
@@ -132,6 +180,8 @@ export function BarcodeScanner({ open, onClose, onDetected, continuous = true, b
                     return;
                 }
                 streamRef.current = stream;
+                const videoTrack = stream.getVideoTracks()[0];
+                setTorchAvailable(trackSupportsTorch(videoTrack));
                 const video = videoRef.current;
                 if (video) {
                     video.srcObject = stream;
@@ -155,6 +205,12 @@ export function BarcodeScanner({ open, onClose, onDetected, continuous = true, b
     if (!open)
         return null;
     const posClass = position === 'fixed' ? 'fixed' : 'absolute';
-    return (_jsxs("div", { className: `${posClass} inset-0 z-[100] flex flex-col bg-black`, children: [_jsxs("div", { className: "flex items-center justify-between px-4 py-3 text-white", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm font-medium", children: [_jsx(ScanLine, { className: "size-5" }), title] }), _jsx(Button, { variant: "ghost", size: "icon", className: "text-white hover:bg-white/10 hover:text-white", onClick: onClose, "aria-label": "Cerrar esc\u00E1ner", children: _jsx(X, { className: "size-5" }) })] }), _jsx("div", { className: "relative flex flex-1 items-center justify-center overflow-hidden", children: error ? (_jsxs("div", { className: "flex max-w-sm flex-col items-center gap-3 px-6 text-center text-white", children: [_jsx(Camera, { className: "size-10 opacity-70" }), _jsx("p", { className: "text-sm leading-relaxed", children: error }), _jsx(Button, { variant: "secondary", onClick: onClose, children: "Entendido" })] })) : (_jsxs(_Fragment, { children: [_jsx("video", { ref: videoRef, className: "h-full w-full object-cover", muted: true, playsInline: true }), _jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: _jsx("div", { className: "relative h-40 w-72 max-w-[80%] rounded-xl border-2 border-white/80 shadow-[0_0_0_9999px_rgba(0,0,0,0.35)]", children: _jsx("span", { className: "bg-primary absolute inset-x-0 top-1/2 h-0.5 -translate-y-1/2 animate-pulse" }) }) }), _jsx("p", { className: "absolute bottom-8 left-0 right-0 text-center text-sm text-white/90", children: ready ? hint : 'Abriendo cámara…' })] })) })] }));
+    return (_jsxs("div", { className: `${posClass} inset-0 z-[100] flex flex-col bg-black`, children: [_jsxs("div", { className: "flex items-center justify-between px-4 py-3 text-white", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm font-medium", children: [_jsx(ScanLine, { className: "size-5" }), title] }), _jsxs("div", { className: "flex items-center gap-1", children: [torchAvailable && (_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: torchOn
+                                    ? 'bg-amber-400/20 text-amber-300 hover:bg-amber-400/30 hover:text-amber-200'
+                                    : 'text-white hover:bg-white/10 hover:text-white', onClick: () => void toggleTorch(), "aria-label": torchOn ? 'Apagar linterna' : 'Encender linterna', "aria-pressed": torchOn, title: torchOn ? 'Apagar linterna' : 'Encender linterna', children: torchOn ? (_jsx(Flashlight, { className: "size-5" })) : (_jsx(FlashlightOff, { className: "size-5" })) })), _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "text-white hover:bg-white/10 hover:text-white", onClick: onClose, "aria-label": "Cerrar esc\u00E1ner", children: _jsx(X, { className: "size-5" }) })] })] }), _jsx("div", { className: "relative flex flex-1 items-center justify-center overflow-hidden", children: error ? (_jsxs("div", { className: "flex max-w-sm flex-col items-center gap-3 px-6 text-center text-white", children: [_jsx(Camera, { className: "size-10 opacity-70" }), _jsx("p", { className: "text-sm leading-relaxed", children: error }), _jsx(Button, { variant: "secondary", onClick: onClose, children: "Entendido" })] })) : (_jsxs(_Fragment, { children: [_jsx("video", { ref: videoRef, className: "h-full w-full object-cover", muted: true, playsInline: true }), _jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: _jsx("div", { className: "relative h-40 w-72 max-w-[80%] rounded-xl border-2 border-white/80 shadow-[0_0_0_9999px_rgba(0,0,0,0.35)]", children: _jsx("span", { className: "bg-primary absolute inset-x-0 top-1/2 h-0.5 -translate-y-1/2 animate-pulse" }) }) }), _jsx("p", { className: "absolute bottom-8 left-0 right-0 px-4 text-center text-sm text-white/90", children: !ready
+                                ? 'Abriendo cámara…'
+                                : torchAvailable
+                                    ? `${hint} · tocá la linterna si está oscuro`
+                                    : hint })] })) })] }));
 }
 export default BarcodeScanner;

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.6",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",

package/src/__tests__/barcode-scanner.test.tsx

@@ -1,6 +1,10 @@
 // @vitest-environment happy-dom
 import { describe, it, expect, afterEach } from 'vitest'
-import { isCameraScanSupported, RETAIL_BARCODE_FORMATS } from '../barcode-scanner'
+import {
+    isCameraScanSupported,
+    RETAIL_BARCODE_FORMATS,
+    trackSupportsTorch,
+} from '../barcode-scanner'
 
 describe('barcode-scanner primitive', () => {
     afterEach(() => {
@@ -25,4 +29,18 @@ describe('barcode-scanner primitive', () => {
         const hasGUM = !!navigator.mediaDevices?.getUserMedia
         expect(isCameraScanSupported()).toBe(hasGUM)
     })
+
+    it('trackSupportsTorch lee capabilities.torch del track', () => {
+        expect(trackSupportsTorch(null)).toBe(false)
+        expect(
+            trackSupportsTorch({
+                getCapabilities: () => ({}),
+            } as MediaStreamTrack),
+        ).toBe(false)
+        expect(
+            trackSupportsTorch({
+                getCapabilities: () => ({ torch: true }),
+            } as unknown as MediaStreamTrack),
+        ).toBe(true)
+    })
 })

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/barcode-scanner.tsx

@@ -1,7 +1,38 @@
 import * as React from 'react'
-import { Camera, ScanLine, X } from 'lucide-react'
+import { Camera, Flashlight, FlashlightOff, ScanLine, X } from 'lucide-react'
 import { Button } from '@asteby/metacore-ui'
 
+/** `torch` aún no está en todas las libs de TS — extendemos el contrato mínimo. */
+type TorchCapabilities = MediaTrackCapabilities & { torch?: boolean }
+type TorchConstraintSet = MediaTrackConstraintSet & { torch?: boolean }
+
+/** `true` si el track de video expone linterna (ImageCapture / torch constraint). */
+export function trackSupportsTorch(track: MediaStreamTrack | null | undefined): boolean {
+    if (!track || typeof track.getCapabilities !== 'function') return false
+    try {
+        return !!(track.getCapabilities() as TorchCapabilities).torch
+    } catch {
+        return false
+    }
+}
+
+async function setTrackTorch(track: MediaStreamTrack, on: boolean): Promise<boolean> {
+    try {
+        await track.applyConstraints({
+            advanced: [{ torch: on } as TorchConstraintSet],
+        })
+        return true
+    } catch {
+        // Algunos WebViews fallan con advanced[] — reintento plano.
+        try {
+            await track.applyConstraints({ torch: on } as MediaTrackConstraints)
+            return true
+        } catch {
+            return false
+        }
+    }
+}
+
 /**
  * BarcodeScanner — primitivo REUSABLE de escaneo por cámara para todo el
  * ecosistema (POS, formularios declarativos, cualquier addon). Sin dependencias
@@ -141,19 +172,37 @@ export function BarcodeScanner({
     const lastHitRef = React.useRef<{ code: string; at: number }>({ code: '', at: 0 })
     const [error, setError] = React.useState<string | null>(null)
     const [ready, setReady] = React.useState(false)
+    const [torchAvailable, setTorchAvailable] = React.useState(false)
+    const [torchOn, setTorchOn] = React.useState(false)
     const beep = useScanBeep()
 
     const stop = React.useCallback(() => {
         if (rafRef.current != null) cancelAnimationFrame(rafRef.current)
         rafRef.current = null
+        const track = streamRef.current?.getVideoTracks()[0]
+        if (track && trackSupportsTorch(track)) {
+            void setTrackTorch(track, false)
+        }
         streamRef.current?.getTracks().forEach((t) => t.stop())
         streamRef.current = null
         setReady(false)
+        setTorchAvailable(false)
+        setTorchOn(false)
     }, [])
 
+    const toggleTorch = React.useCallback(async () => {
+        const track = streamRef.current?.getVideoTracks()[0]
+        if (!track || !trackSupportsTorch(track)) return
+        const next = !torchOn
+        const ok = await setTrackTorch(track, next)
+        if (ok) setTorchOn(next)
+    }, [torchOn])
+
     React.useEffect(() => {
         if (!open) return
         setError(null)
+        setTorchAvailable(false)
+        setTorchOn(false)
 
         const Ctor = getDetectorCtor()
         if (!navigator.mediaDevices?.getUserMedia || !Ctor) {
@@ -205,6 +254,8 @@ export function BarcodeScanner({
                     return
                 }
                 streamRef.current = stream
+                const videoTrack = stream.getVideoTracks()[0]
+                setTorchAvailable(trackSupportsTorch(videoTrack))
                 const video = videoRef.current
                 if (video) {
                     video.srcObject = stream
@@ -239,15 +290,40 @@ export function BarcodeScanner({
                     <ScanLine className="size-5" />
                     {title}
                 </div>
-                <Button
-                    variant="ghost"
-                    size="icon"
-                    className="text-white hover:bg-white/10 hover:text-white"
-                    onClick={onClose}
-                    aria-label="Cerrar escáner"
-                >
-                    <X className="size-5" />
-                </Button>
+                <div className="flex items-center gap-1">
+                    {torchAvailable && (
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon"
+                            className={
+                                torchOn
+                                    ? 'bg-amber-400/20 text-amber-300 hover:bg-amber-400/30 hover:text-amber-200'
+                                    : 'text-white hover:bg-white/10 hover:text-white'
+                            }
+                            onClick={() => void toggleTorch()}
+                            aria-label={torchOn ? 'Apagar linterna' : 'Encender linterna'}
+                            aria-pressed={torchOn}
+                            title={torchOn ? 'Apagar linterna' : 'Encender linterna'}
+                        >
+                            {torchOn ? (
+                                <Flashlight className="size-5" />
+                            ) : (
+                                <FlashlightOff className="size-5" />
+                            )}
+                        </Button>
+                    )}
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        className="text-white hover:bg-white/10 hover:text-white"
+                        onClick={onClose}
+                        aria-label="Cerrar escáner"
+                    >
+                        <X className="size-5" />
+                    </Button>
+                </div>
             </div>
 
             {/* Área de cámara */}
@@ -269,8 +345,12 @@ export function BarcodeScanner({
                                 <span className="bg-primary absolute inset-x-0 top-1/2 h-0.5 -translate-y-1/2 animate-pulse" />
                             </div>
                         </div>
-                        <p className="absolute bottom-8 left-0 right-0 text-center text-sm text-white/90">
-                            {ready ? hint : 'Abriendo cámara…'}
+                        <p className="absolute bottom-8 left-0 right-0 px-4 text-center text-sm text-white/90">
+                            {!ready
+                                ? 'Abriendo cámara…'
+                                : torchAvailable
+                                  ? `${hint} · tocá la linterna si está oscuro`
+                                  : hint}
                         </p>
                     </>
                 )}

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)