@asteby/metacore-runtime-react 29.2.5 → 29.2.6

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @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

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "29.2.5",
+  "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/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>
                     </>
                 )}