@asteby/metacore-runtime-react 29.2.9 → 29.2.10

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @asteby/metacore-runtime-react
 
+## 29.2.10
+
+### Patch Changes
+
+- fd81213: BarcodeScanner: prop `feedback` para mostrar un chip de confirmación (producto agregado / sin coincidencia) **sobre** la cámara — los toasts de Sonner no se ven encima del overlay opaco.
+
 ## 29.2.9
 
 ### Patch Changes

package/dist/barcode-scanner.d.ts

@@ -12,6 +12,11 @@ export declare function isCameraScanSupported(): boolean;
  * dispositivo no permite audio. Exportado para reutilizarlo con lectores físicos.
  */
 export declare function useScanBeep(): () => void;
+/** Chip superpuesto sobre la cámara (éxito / error del padre tras resolver el código). */
+export type BarcodeScannerFeedback = {
+    message: string;
+    tone?: 'success' | 'error' | 'neutral';
+};
 export interface BarcodeScannerProps {
     open: boolean;
     onClose: () => void;
@@ -35,12 +40,18 @@ export interface BarcodeScannerProps {
      * modal, sin taparse con el chrome del host. `fixed` cubre todo el viewport.
      */
     position?: 'absolute' | 'fixed';
+    /**
+     * Feedback del padre (ej. "Harina × 2" / "Sin coincidencia") pintado ENCIMA
+     * del video. Los toasts de Sonner del host quedan detrás de este overlay
+     * opaco en la práctica — este chip es la confirmación visible al escanear.
+     */
+    feedback?: BarcodeScannerFeedback | null;
 }
 /**
  * Overlay de cámara a pantalla del contenedor con retícula de puntería. Montalo
  * condicionalmente (`open`) dentro de un ancestro `relative` cuando uses el
  * posicionamiento `absolute` por defecto.
  */
-export declare function BarcodeScanner({ open, onClose, onDetected, continuous, beepOnScan, title, hint, position, }: BarcodeScannerProps): React.JSX.Element | null;
+export declare function BarcodeScanner({ open, onClose, onDetected, continuous, beepOnScan, title, hint, position, feedback, }: BarcodeScannerProps): React.JSX.Element | null;
 export default BarcodeScanner;
 //# sourceMappingURL=barcode-scanner.d.ts.map

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;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"}
+{"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,0FAA0F;AAC1F,MAAM,MAAM,sBAAsB,GAAG;IACjC,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,CAAA;CACzC,CAAA;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;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,sBAAsB,GAAG,IAAI,CAAA;CAC3C;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC3B,IAAI,EACJ,OAAO,EACP,UAAU,EACV,UAAiB,EACjB,UAAiB,EACjB,KAAyB,EACzB,IAAmC,EACnC,QAAqB,EACrB,QAAe,GAClB,EAAE,mBAAmB,4BAsNrB;AAED,eAAe,cAAc,CAAA"}

package/dist/barcode-scanner.js

@@ -93,7 +93,7 @@ export function useScanBeep() {
  * condicionalmente (`open`) dentro de un ancestro `relative` cuando uses el
  * posicionamiento `absolute` por defecto.
  */
-export function BarcodeScanner({ open, onClose, onDetected, continuous = true, beepOnScan = true, title = 'Escanear código', hint = 'Apuntá al código de barras', position = 'absolute', }) {
+export function BarcodeScanner({ open, onClose, onDetected, continuous = true, beepOnScan = true, title = 'Escanear código', hint = 'Apuntá al código de barras', position = 'absolute', feedback = null, }) {
     const videoRef = React.useRef(null);
     const streamRef = React.useRef(null);
     const rafRef = React.useRef(null);
@@ -207,7 +207,11 @@ export function BarcodeScanner({ open, onClose, onDetected, continuous = true, b
     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] }), _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
+                                    : '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" }) }) }), feedback?.message ? (_jsx("div", { className: "pointer-events-none absolute inset-x-0 top-4 z-10 flex justify-center px-4", "data-testid": "barcode-scanner-feedback", role: "status", "aria-live": "polite", children: _jsx("div", { className: feedback.tone === 'error'
+                                    ? 'max-w-[90%] rounded-full bg-red-500 px-4 py-2.5 text-center text-sm font-semibold text-white shadow-lg'
+                                    : feedback.tone === 'neutral'
+                                        ? 'max-w-[90%] rounded-full bg-white/90 px-4 py-2.5 text-center text-sm font-semibold text-black shadow-lg'
+                                        : 'max-w-[90%] rounded-full bg-emerald-500 px-4 py-2.5 text-center text-sm font-semibold text-white shadow-lg', children: feedback.message }) })) : null, _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`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "29.2.9",
+  "version": "29.2.10",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",
@@ -37,8 +37,8 @@
     "react-i18next": ">=13",
     "sonner": ">=1.7",
     "zustand": ">=5",
-    "@asteby/metacore-ui": "^2.13.0",
-    "@asteby/metacore-sdk": "^3.4.0"
+    "@asteby/metacore-sdk": "^3.4.0",
+    "@asteby/metacore-ui": "^2.13.0"
   },
   "peerDependenciesMeta": {
     "@tanstack/react-router": {
@@ -67,8 +67,8 @@
     "typescript": "^6.0.0",
     "vitest": "^4.0.0",
     "zustand": "^5.0.0",
-    "@asteby/metacore-ui": "2.13.0",
-    "@asteby/metacore-sdk": "3.4.0"
+    "@asteby/metacore-sdk": "3.4.0",
+    "@asteby/metacore-ui": "2.13.0"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",

package/src/barcode-scanner.tsx

@@ -126,6 +126,12 @@ export function useScanBeep() {
     }, [])
 }
 
+/** Chip superpuesto sobre la cámara (éxito / error del padre tras resolver el código). */
+export type BarcodeScannerFeedback = {
+    message: string
+    tone?: 'success' | 'error' | 'neutral'
+}
+
 export interface BarcodeScannerProps {
     open: boolean
     onClose: () => void
@@ -149,6 +155,12 @@ export interface BarcodeScannerProps {
      * modal, sin taparse con el chrome del host. `fixed` cubre todo el viewport.
      */
     position?: 'absolute' | 'fixed'
+    /**
+     * Feedback del padre (ej. "Harina × 2" / "Sin coincidencia") pintado ENCIMA
+     * del video. Los toasts de Sonner del host quedan detrás de este overlay
+     * opaco en la práctica — este chip es la confirmación visible al escanear.
+     */
+    feedback?: BarcodeScannerFeedback | null
 }
 
 /**
@@ -165,6 +177,7 @@ export function BarcodeScanner({
     title = 'Escanear código',
     hint = 'Apuntá al código de barras',
     position = 'absolute',
+    feedback = null,
 }: BarcodeScannerProps) {
     const videoRef = React.useRef<HTMLVideoElement | null>(null)
     const streamRef = React.useRef<MediaStream | null>(null)
@@ -345,6 +358,28 @@ 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>
+                        {/* Confirmación del padre ENCIMA del video (Sonner queda
+                            detrás de este overlay opaco al escanear). */}
+                        {feedback?.message ? (
+                            <div
+                                className="pointer-events-none absolute inset-x-0 top-4 z-10 flex justify-center px-4"
+                                data-testid="barcode-scanner-feedback"
+                                role="status"
+                                aria-live="polite"
+                            >
+                                <div
+                                    className={
+                                        feedback.tone === 'error'
+                                            ? 'max-w-[90%] rounded-full bg-red-500 px-4 py-2.5 text-center text-sm font-semibold text-white shadow-lg'
+                                            : feedback.tone === 'neutral'
+                                              ? 'max-w-[90%] rounded-full bg-white/90 px-4 py-2.5 text-center text-sm font-semibold text-black shadow-lg'
+                                              : 'max-w-[90%] rounded-full bg-emerald-500 px-4 py-2.5 text-center text-sm font-semibold text-white shadow-lg'
+                                    }
+                                >
+                                    {feedback.message}
+                                </div>
+                            </div>
+                        ) : null}
                         <p className="absolute bottom-8 left-0 right-0 px-4 text-center text-sm text-white/90">
                             {!ready
                                 ? 'Abriendo cámara…'