web-native-qr-scanner 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,96 @@
+# web-native-qr-scanner
+
+A React QR / barcode scanner component for the browser. It prefers the browser's
+native [`BarcodeDetector`](https://developer.mozilla.org/en-US/docs/Web/API/BarcodeDetector)
+API (Safari 17.4+, Chrome/Edge) for near-native scanning speed, and transparently
+falls back to [`zxing-wasm`](https://github.com/Sec-ant/zxing-wasm) (ZXing-C++ compiled
+to WebAssembly) on devices/browsers without native support.
+
+## Features
+
+- **Native-first, WASM fallback** — tries `BarcodeDetector` first, falls back to
+  `zxing-wasm` if unsupported or after 5s of native misses.
+- **ROI cropping** — only decodes the pixels inside the visible scan frame (matching
+  what `object-cover` actually displays), instead of the full camera frame. Faster
+  decoding and fewer false positives from codes outside the frame — the same approach
+  apps like Zalo use.
+- **`requestVideoFrameCallback`** — schedules decode attempts on the video's actual
+  render cadence instead of blindly polling on a timer.
+- **QR and 1D barcode modes** — `code_128`, `code_39`, `ean_13`, `ean_8`, `upc_a`,
+  `upc_e`, `itf`, `codabar`.
+- Torch/flashlight toggle, multi-code picker sheet, permission-denied state, i18n-able
+  labels.
+- Zero UI dependencies — icons are inlined, styling ships as a plain CSS file (works
+  with or without Tailwind).
+
+## Install
+
+```bash
+npm install web-native-qr-scanner
+```
+
+`react` and `react-dom` (>=18) are peer dependencies.
+
+## Usage
+
+```tsx
+import { QrScanner } from 'web-native-qr-scanner'
+import 'web-native-qr-scanner/style.css'
+
+function ScanPage() {
+  return (
+    <QrScanner
+      mode="qr" // or "barcode"
+      onDetect={(code) => console.log('scanned:', code)}
+    />
+  )
+}
+```
+
+### Props
+
+| Prop        | Type                      | Default      | Description                                     |
+| ----------- | ------------------------- | ------------ | ------------------------------------------------ |
+| `onDetect`  | `(code: string) => void`  | —            | Called once with the decoded text.               |
+| `mode`      | `'qr' \| 'barcode'`       | `'barcode'`  | Restricts which formats are detected.            |
+| `className` | `string`                  | —            | Extra class name on the root element.            |
+| `labels`    | `QrScannerLabels`         | English      | Override any UI string for i18n.                 |
+
+### Custom labels
+
+```tsx
+<QrScanner
+  mode="barcode"
+  onDetect={handleCode}
+  labels={{
+    hintBarcode: 'Đưa barcode vào khung hình',
+    permissionDeniedTitle: 'Không thể truy cập camera',
+  }}
+/>
+```
+
+## Browser support
+
+Camera access requires a secure context (HTTPS, or `localhost`). Native detection
+requires `BarcodeDetector` (Safari 17.4+, Chrome/Edge 83+); everything else uses the
+WASM fallback automatically, so the component works on any browser that supports
+`getUserMedia`.
+
+## Development
+
+```bash
+npm install
+npm run build      # bundle to dist/ (ESM + CJS + .d.ts + style.css)
+npm run typecheck
+```
+
+## Publishing
+
+```bash
+npm login
+npm publish
+```
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,354 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  QrScanner: () => QrScanner
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/QrScanner.tsx
+var import_react = require("react");
+
+// src/icons.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var base = (props) => ({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 20,
+  height: 20,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  ...props
+});
+function CameraIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...base(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "13", r: "3" })
+  ] });
+}
+function CameraOffIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...base(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "2", y1: "2", x2: "22", y2: "22" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h13a2 2 0 0 0 1.41-.59" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9.5 4h5L17 7h3a2 2 0 0 1 2 2v7.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14.12 15.12A3 3 0 1 1 9.88 10.88" })
+  ] });
+}
+function XIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...base(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  ] });
+}
+function ZapIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ...base(props), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polygon", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2" }) });
+}
+function ZapOffIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...base(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "12.41 6.75 13 2 10.57 4.92" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "18.57 12.91 21 10 15.66 10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "8 8 3 14 12 14 11 22 16 16" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "2", y1: "2", x2: "22", y2: "22" })
+  ] });
+}
+
+// src/QrScanner.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var NATIVE_FORMATS = {
+  qr: ["qr_code"],
+  barcode: ["code_128", "code_39", "ean_13", "ean_8", "upc_a", "upc_e", "itf", "codabar"]
+};
+var WASM_FORMATS = {
+  qr: ["QRCode"],
+  barcode: ["Code128", "Code39", "EAN13", "EAN8", "UPCA", "UPCE", "ITF", "Codabar"]
+};
+var DEFAULT_LABELS = {
+  permissionDeniedTitle: "Camera access unavailable",
+  permissionDeniedHint: "Please allow camera access in your browser settings",
+  hintQr: "Point the QR code at the frame",
+  hintBarcode: "Point the barcode at the frame",
+  multipleFoundPrefix: "Found {count} codes \u2014 pick one",
+  close: "Close",
+  torchOn: "Turn off flashlight",
+  torchOff: "Turn on flashlight"
+};
+function stripAim(raw) {
+  return raw.replace(/^\][A-Za-z]\d?/, "");
+}
+function normalise(raw) {
+  return stripAim(raw).trim();
+}
+function computeRoi(vw, vh, mode) {
+  const containerAspect = mode === "qr" ? 1 : 5 / 2;
+  const sourceAspect = vw / vh;
+  let visW, visH, offX, offY;
+  if (sourceAspect > containerAspect) {
+    visH = vh;
+    visW = vh * containerAspect;
+    offX = (vw - visW) / 2;
+    offY = 0;
+  } else {
+    visW = vw;
+    visH = vw / containerAspect;
+    offX = 0;
+    offY = (vh - visH) / 2;
+  }
+  if (mode === "qr") {
+    const frac2 = 0.65;
+    const w = visW * frac2;
+    const h2 = visH * frac2;
+    return { x: offX + (visW - w) / 2, y: offY + (visH - h2) / 2, width: w, height: h2 };
+  }
+  const frac = 0.44;
+  const h = visH * frac;
+  return { x: offX, y: offY + (visH - h) / 2, width: visW, height: h };
+}
+function scheduleFrame(video, cb) {
+  if (video.requestVideoFrameCallback) {
+    const handle = video.requestVideoFrameCallback(() => cb());
+    return () => video.cancelVideoFrameCallback(handle);
+  }
+  const timer = setTimeout(cb, 100);
+  return () => clearTimeout(timer);
+}
+function QrScanner({ onDetect, mode = "barcode", className, labels }) {
+  const l = { ...DEFAULT_LABELS, ...labels };
+  const videoRef = (0, import_react.useRef)(null);
+  const canvasRef = (0, import_react.useRef)(null);
+  const [status, setStatus] = (0, import_react.useState)("loading");
+  const [candidates, setCandidates] = (0, import_react.useState)([]);
+  const [hasTorch, setHasTorch] = (0, import_react.useState)(false);
+  const [torchOn, setTorchOn] = (0, import_react.useState)(false);
+  const stoppedRef = (0, import_react.useRef)(false);
+  const detectedRef = (0, import_react.useRef)(false);
+  const pickerRef = (0, import_react.useRef)(false);
+  const frameCancelRef = (0, import_react.useRef)(null);
+  const streamRef = (0, import_react.useRef)(null);
+  const restartRef = (0, import_react.useRef)(null);
+  const handleDetect = (0, import_react.useCallback)(
+    (code) => {
+      if (detectedRef.current) return;
+      detectedRef.current = true;
+      onDetect(code);
+    },
+    [onDetect]
+  );
+  const selectCandidate = (0, import_react.useCallback)((code) => handleDetect(code), [handleDetect]);
+  const closePicker = (0, import_react.useCallback)(() => {
+    pickerRef.current = false;
+    setCandidates([]);
+    restartRef.current?.();
+  }, []);
+  const toggleTorch = (0, import_react.useCallback)(async () => {
+    const track = streamRef.current?.getVideoTracks()[0];
+    if (!track) return;
+    try {
+      await track.applyConstraints({ advanced: [{ torch: !torchOn }] });
+      setTorchOn((v) => !v);
+    } catch {
+    }
+  }, [torchOn]);
+  (0, import_react.useEffect)(() => {
+    stoppedRef.current = false;
+    detectedRef.current = false;
+    pickerRef.current = false;
+    async function start() {
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({
+          video: { facingMode: "environment", width: { ideal: 1920 }, height: { ideal: 1080 } }
+        });
+        streamRef.current = stream;
+        const track = stream.getVideoTracks()[0];
+        const caps = track?.getCapabilities?.();
+        if (caps?.torch) setHasTorch(true);
+        if (!videoRef.current || stoppedRef.current) {
+          stream.getTracks().forEach((t) => t.stop());
+          return;
+        }
+        videoRef.current.srcObject = stream;
+        await videoRef.current.play();
+        setStatus("active");
+        const startWasm = async () => {
+          if (stoppedRef.current || detectedRef.current) return;
+          const { readBarcodesFromImageData } = await import("zxing-wasm/reader");
+          const formats = WASM_FORMATS[mode];
+          const tick = async () => {
+            if (stoppedRef.current || detectedRef.current || pickerRef.current) return;
+            const video = videoRef.current;
+            const canvas = canvasRef.current;
+            if (video && canvas && video.readyState >= 2 && video.videoWidth > 0) {
+              const roi = computeRoi(video.videoWidth, video.videoHeight, mode);
+              canvas.width = Math.max(1, Math.round(roi.width));
+              canvas.height = Math.max(1, Math.round(roi.height));
+              const ctx = canvas.getContext("2d", { willReadFrequently: true });
+              if (ctx) {
+                ctx.drawImage(video, roi.x, roi.y, roi.width, roi.height, 0, 0, canvas.width, canvas.height);
+                const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+                const results = await readBarcodesFromImageData(imageData, { formats }).catch(() => []);
+                const unique = [...new Set(results.map((r) => normalise(r.text)).filter(Boolean))];
+                if (unique.length === 1) {
+                  handleDetect(unique[0]);
+                  return;
+                }
+                if (unique.length > 1) {
+                  pickerRef.current = true;
+                  setCandidates(unique);
+                  return;
+                }
+              }
+            }
+            if (video) frameCancelRef.current = scheduleFrame(video, tick);
+          };
+          restartRef.current = () => {
+            if (videoRef.current) frameCancelRef.current = scheduleFrame(videoRef.current, tick);
+          };
+          tick();
+        };
+        const NativeDetector = typeof window !== "undefined" ? window["BarcodeDetector"] : void 0;
+        const nativeFormats = NATIVE_FORMATS[mode];
+        const nativeOk = NativeDetector != null && await NativeDetector.getSupportedFormats().then((sup) => nativeFormats.some((f) => sup.includes(f))).catch(() => false);
+        if (nativeOk && NativeDetector) {
+          const detector = new NativeDetector({ formats: nativeFormats });
+          let miss = 0;
+          const tick = async () => {
+            if (stoppedRef.current || detectedRef.current || pickerRef.current) return;
+            const video = videoRef.current;
+            const canvas = canvasRef.current;
+            if (video && canvas && video.readyState >= 2 && video.videoWidth > 0) {
+              const roi = computeRoi(video.videoWidth, video.videoHeight, mode);
+              canvas.width = Math.max(1, Math.round(roi.width));
+              canvas.height = Math.max(1, Math.round(roi.height));
+              const ctx = canvas.getContext("2d");
+              if (ctx) {
+                ctx.drawImage(video, roi.x, roi.y, roi.width, roi.height, 0, 0, canvas.width, canvas.height);
+                const results = await detector.detect(canvas).catch(() => []);
+                const unique = [...new Set(results.map((r) => normalise(r.rawValue)).filter(Boolean))];
+                if (unique.length === 1) {
+                  handleDetect(unique[0]);
+                  return;
+                }
+                if (unique.length > 1) {
+                  pickerRef.current = true;
+                  setCandidates(unique);
+                  return;
+                }
+                if (++miss >= 50) {
+                  startWasm();
+                  return;
+                }
+              }
+            }
+            if (video) frameCancelRef.current = scheduleFrame(video, tick);
+          };
+          restartRef.current = () => {
+            if (videoRef.current) frameCancelRef.current = scheduleFrame(videoRef.current, tick);
+          };
+          tick();
+        } else {
+          startWasm();
+        }
+      } catch {
+        if (!stoppedRef.current) setStatus("denied");
+      }
+    }
+    start();
+    return () => {
+      stoppedRef.current = true;
+      frameCancelRef.current?.();
+      streamRef.current?.getTracks().forEach((t) => t.stop());
+      streamRef.current = null;
+    };
+  }, [handleDetect, mode]);
+  const rootClass = ["wnqs-root", mode === "qr" ? "wnqs-root--qr" : "wnqs-root--barcode", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: rootClass, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("video", { ref: videoRef, className: "wnqs-video", playsInline: true, muted: true }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("canvas", { ref: canvasRef, className: "wnqs-canvas" }),
+    status === "active" && mode === "barcode" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "wnqs-overlay wnqs-overlay--barcode", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "wnqs-shade wnqs-shade--flex" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "wnqs-frame wnqs-frame--barcode", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "wnqs-corner wnqs-corner--tl" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "wnqs-corner wnqs-corner--tr" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "wnqs-corner wnqs-corner--bl" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "wnqs-corner wnqs-corner--br" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "wnqs-scan-line" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "wnqs-shade wnqs-shade--flex" })
+    ] }),
+    status === "active" && mode === "qr" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "wnqs-overlay wnqs-overlay--qr", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "wnqs-shade wnqs-shade--full" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "wnqs-frame wnqs-frame--qr", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "wnqs-corner wnqs-corner--tl" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "wnqs-corner wnqs-corner--tr" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "wnqs-corner wnqs-corner--bl" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "wnqs-corner wnqs-corner--br" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "wnqs-scan-line" })
+      ] })
+    ] }),
+    hasTorch && status === "active" && candidates.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: toggleTorch,
+        className: "wnqs-torch-btn",
+        "aria-label": torchOn ? l.torchOn : l.torchOff,
+        children: torchOn ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ZapOffIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ZapIcon, {})
+      }
+    ),
+    candidates.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "wnqs-picker", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "wnqs-picker-backdrop", onClick: closePicker }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "wnqs-picker-sheet", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "wnqs-picker-header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "wnqs-picker-title", children: l.multipleFoundPrefix.replace("{count}", String(candidates.length)) }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", onClick: closePicker, "aria-label": l.close, className: "wnqs-picker-close", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(XIcon, { width: 16, height: 16 }) })
+        ] }),
+        candidates.map((code) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", onClick: () => selectCandidate(code), className: "wnqs-picker-item", children: code }, code))
+      ] })
+    ] }),
+    status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "wnqs-state-layer", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "wnqs-spinner" }) }),
+    status === "denied" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "wnqs-state-layer wnqs-state-layer--denied", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CameraOffIcon, { width: 40, height: 40 }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "wnqs-denied-title", children: l.permissionDeniedTitle }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "wnqs-denied-hint", children: l.permissionDeniedHint })
+    ] }),
+    status === "active" && candidates.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "wnqs-hint-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "wnqs-hint", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CameraIcon, { width: 14, height: 14 }),
+      mode === "qr" ? l.hintQr : l.hintBarcode
+    ] }) })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  QrScanner
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/QrScanner.tsx","../src/icons.tsx"],"sourcesContent":["export { QrScanner } from './QrScanner'\nexport type { QrScannerProps, QrScannerLabels, ScanMode } from './types'\n","import { useEffect, useRef, useState, useCallback } from 'react'\nimport type { ReadInputBarcodeFormat } from 'zxing-wasm/reader'\nimport { CameraIcon, CameraOffIcon, XIcon, ZapIcon, ZapOffIcon } from './icons'\nimport type { QrScannerLabels, QrScannerProps, ScanMode } from './types'\n\n// ── Native BarcodeDetector types ─────────────────────────────────────────────\ninterface NativeResult {\n  rawValue: string\n}\ninterface BarcodeDetectorCtor {\n  new (opts: { formats: string[] }): { detect(el: CanvasImageSource): Promise<NativeResult[]> }\n  getSupportedFormats(): Promise<string[]>\n}\n\nconst NATIVE_FORMATS: Record<ScanMode, string[]> = {\n  qr: ['qr_code'],\n  barcode: ['code_128', 'code_39', 'ean_13', 'ean_8', 'upc_a', 'upc_e', 'itf', 'codabar'],\n}\n\n// ── zxing-wasm (ZXing-C++) format names ──────────────────────────────────────\nconst WASM_FORMATS: Record<ScanMode, ReadInputBarcodeFormat[]> = {\n  qr: ['QRCode'],\n  barcode: ['Code128', 'Code39', 'EAN13', 'EAN8', 'UPCA', 'UPCE', 'ITF', 'Codabar'],\n}\n\nconst DEFAULT_LABELS: Required<QrScannerLabels> = {\n  permissionDeniedTitle: 'Camera access unavailable',\n  permissionDeniedHint: 'Please allow camera access in your browser settings',\n  hintQr: 'Point the QR code at the frame',\n  hintBarcode: 'Point the barcode at the frame',\n  multipleFoundPrefix: 'Found {count} codes — pick one',\n  close: 'Close',\n  torchOn: 'Turn off flashlight',\n  torchOff: 'Turn on flashlight',\n}\n\nfunction stripAim(raw: string) {\n  return raw.replace(/^\\][A-Za-z]\\d?/, '')\n}\nfunction normalise(raw: string) {\n  return stripAim(raw).trim()\n}\n\n// ── ROI: crop window matched to the overlay (drop the video area outside the scan frame) ─\n// object-cover crops the video to the container's aspect first; the ROI% is applied on top of that crop.\nfunction computeRoi(vw: number, vh: number, mode: ScanMode) {\n  const containerAspect = mode === 'qr' ? 1 : 5 / 2\n  const sourceAspect = vw / vh\n  let visW: number, visH: number, offX: number, offY: number\n  if (sourceAspect > containerAspect) {\n    visH = vh\n    visW = vh * containerAspect\n    offX = (vw - visW) / 2\n    offY = 0\n  } else {\n    visW = vw\n    visH = vw / containerAspect\n    offX = 0\n    offY = (vh - visH) / 2\n  }\n\n  if (mode === 'qr') {\n    const frac = 0.65\n    const w = visW * frac\n    const h = visH * frac\n    return { x: offX + (visW - w) / 2, y: offY + (visH - h) / 2, width: w, height: h }\n  }\n  const frac = 0.44\n  const h = visH * frac\n  return { x: offX, y: offY + (visH - h) / 2, width: visW, height: h }\n}\n\n// ── Schedule the next frame on the video's actual render cadence instead of a blind poll ─\nfunction scheduleFrame(video: HTMLVideoElement, cb: () => void): () => void {\n  if (video.requestVideoFrameCallback) {\n    const handle = video.requestVideoFrameCallback(() => cb())\n    return () => video.cancelVideoFrameCallback(handle)\n  }\n  const timer = setTimeout(cb, 100)\n  return () => clearTimeout(timer)\n}\n\nexport function QrScanner({ onDetect, mode = 'barcode', className, labels }: QrScannerProps) {\n  const l = { ...DEFAULT_LABELS, ...labels }\n\n  const videoRef = useRef<HTMLVideoElement>(null)\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n\n  const [status, setStatus] = useState<'loading' | 'active' | 'denied'>('loading')\n  const [candidates, setCandidates] = useState<string[]>([])\n  const [hasTorch, setHasTorch] = useState(false)\n  const [torchOn, setTorchOn] = useState(false)\n\n  const stoppedRef = useRef(false)\n  const detectedRef = useRef(false)\n  const pickerRef = useRef(false)\n  const frameCancelRef = useRef<(() => void) | null>(null)\n  const streamRef = useRef<MediaStream | null>(null)\n  const restartRef = useRef<(() => void) | null>(null)\n\n  const handleDetect = useCallback(\n    (code: string) => {\n      if (detectedRef.current) return\n      detectedRef.current = true\n      onDetect(code)\n    },\n    [onDetect],\n  )\n\n  const selectCandidate = useCallback((code: string) => handleDetect(code), [handleDetect])\n\n  const closePicker = useCallback(() => {\n    pickerRef.current = false\n    setCandidates([])\n    restartRef.current?.()\n  }, [])\n\n  const toggleTorch = useCallback(async () => {\n    const track = streamRef.current?.getVideoTracks()[0]\n    if (!track) return\n    try {\n      await track.applyConstraints({ advanced: [{ torch: !torchOn } as MediaTrackConstraintSet] })\n      setTorchOn((v) => !v)\n    } catch {\n      // torch not supported on this device\n    }\n  }, [torchOn])\n\n  useEffect(() => {\n    stoppedRef.current = false\n    detectedRef.current = false\n    pickerRef.current = false\n\n    async function start() {\n      try {\n        const stream = await navigator.mediaDevices.getUserMedia({\n          video: { facingMode: 'environment', width: { ideal: 1920 }, height: { ideal: 1080 } },\n        })\n        streamRef.current = stream\n\n        const track = stream.getVideoTracks()[0]\n        const caps = track?.getCapabilities?.() as Record<string, unknown> | undefined\n        if (caps?.torch) setHasTorch(true)\n\n        if (!videoRef.current || stoppedRef.current) {\n          stream.getTracks().forEach((t) => t.stop())\n          return\n        }\n        videoRef.current.srcObject = stream\n        await videoRef.current.play()\n        setStatus('active')\n\n        // ── WASM engine (ZXing-C++) ───────────────────────────────────────────\n        // tryRotate + tryInvert + tryHarder are enabled by default in zxing-wasm 3.x\n        const startWasm = async () => {\n          if (stoppedRef.current || detectedRef.current) return\n          const { readBarcodesFromImageData } = await import('zxing-wasm/reader')\n          const formats = WASM_FORMATS[mode]\n\n          const tick = async () => {\n            if (stoppedRef.current || detectedRef.current || pickerRef.current) return\n            const video = videoRef.current\n            const canvas = canvasRef.current\n            if (video && canvas && video.readyState >= 2 && video.videoWidth > 0) {\n              const roi = computeRoi(video.videoWidth, video.videoHeight, mode)\n              canvas.width = Math.max(1, Math.round(roi.width))\n              canvas.height = Math.max(1, Math.round(roi.height))\n              const ctx = canvas.getContext('2d', { willReadFrequently: true })\n              if (ctx) {\n                ctx.drawImage(video, roi.x, roi.y, roi.width, roi.height, 0, 0, canvas.width, canvas.height)\n                const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)\n                const results = await readBarcodesFromImageData(imageData, { formats }).catch(() => [])\n                const unique = [...new Set(results.map((r) => normalise(r.text)).filter(Boolean))]\n                if (unique.length === 1) {\n                  handleDetect(unique[0])\n                  return\n                }\n                if (unique.length > 1) {\n                  pickerRef.current = true\n                  setCandidates(unique)\n                  return\n                }\n              }\n            }\n            if (video) frameCancelRef.current = scheduleFrame(video, tick)\n          }\n          restartRef.current = () => {\n            if (videoRef.current) frameCancelRef.current = scheduleFrame(videoRef.current, tick)\n          }\n          tick()\n        }\n\n        // ── Native BarcodeDetector (Safari 17.4+, Chrome/Edge) ──────────────────\n        const NativeDetector =\n          typeof window !== 'undefined'\n            ? ((window as unknown as Record<string, unknown>)['BarcodeDetector'] as\n                | BarcodeDetectorCtor\n                | undefined)\n            : undefined\n\n        const nativeFormats = NATIVE_FORMATS[mode]\n        const nativeOk =\n          NativeDetector != null &&\n          (await NativeDetector.getSupportedFormats()\n            .then((sup) => nativeFormats.some((f) => sup.includes(f)))\n            .catch(() => false))\n\n        if (nativeOk && NativeDetector) {\n          const detector = new NativeDetector({ formats: nativeFormats })\n          let miss = 0\n\n          const tick = async () => {\n            if (stoppedRef.current || detectedRef.current || pickerRef.current) return\n            const video = videoRef.current\n            const canvas = canvasRef.current\n            if (video && canvas && video.readyState >= 2 && video.videoWidth > 0) {\n              const roi = computeRoi(video.videoWidth, video.videoHeight, mode)\n              canvas.width = Math.max(1, Math.round(roi.width))\n              canvas.height = Math.max(1, Math.round(roi.height))\n              const ctx = canvas.getContext('2d')\n              if (ctx) {\n                ctx.drawImage(video, roi.x, roi.y, roi.width, roi.height, 0, 0, canvas.width, canvas.height)\n                const results = await detector.detect(canvas).catch(() => [] as NativeResult[])\n                const unique = [...new Set(results.map((r) => normalise(r.rawValue)).filter(Boolean))]\n                if (unique.length === 1) {\n                  handleDetect(unique[0])\n                  return\n                }\n                if (unique.length > 1) {\n                  pickerRef.current = true\n                  setCandidates(unique)\n                  return\n                }\n                // After 5s (50 x 100ms-equivalent frames) of native misses, fall back to WASM.\n                if (++miss >= 50) {\n                  startWasm()\n                  return\n                }\n              }\n            }\n            if (video) frameCancelRef.current = scheduleFrame(video, tick)\n          }\n          restartRef.current = () => {\n            if (videoRef.current) frameCancelRef.current = scheduleFrame(videoRef.current, tick)\n          }\n          tick()\n        } else {\n          startWasm()\n        }\n      } catch {\n        if (!stoppedRef.current) setStatus('denied')\n      }\n    }\n\n    start()\n\n    return () => {\n      stoppedRef.current = true\n      frameCancelRef.current?.()\n      streamRef.current?.getTracks().forEach((t) => t.stop())\n      streamRef.current = null\n    }\n  }, [handleDetect, mode])\n\n  const rootClass = ['wnqs-root', mode === 'qr' ? 'wnqs-root--qr' : 'wnqs-root--barcode', className]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <div className={rootClass}>\n      <video ref={videoRef} className=\"wnqs-video\" playsInline muted />\n      <canvas ref={canvasRef} className=\"wnqs-canvas\" />\n\n      {status === 'active' && mode === 'barcode' && (\n        <div className=\"wnqs-overlay wnqs-overlay--barcode\">\n          <div className=\"wnqs-shade wnqs-shade--flex\" />\n          <div className=\"wnqs-frame wnqs-frame--barcode\">\n            <span className=\"wnqs-corner wnqs-corner--tl\" />\n            <span className=\"wnqs-corner wnqs-corner--tr\" />\n            <span className=\"wnqs-corner wnqs-corner--bl\" />\n            <span className=\"wnqs-corner wnqs-corner--br\" />\n            <span className=\"wnqs-scan-line\" />\n          </div>\n          <div className=\"wnqs-shade wnqs-shade--flex\" />\n        </div>\n      )}\n\n      {status === 'active' && mode === 'qr' && (\n        <div className=\"wnqs-overlay wnqs-overlay--qr\">\n          <div className=\"wnqs-shade wnqs-shade--full\" />\n          <div className=\"wnqs-frame wnqs-frame--qr\">\n            <span className=\"wnqs-corner wnqs-corner--tl\" />\n            <span className=\"wnqs-corner wnqs-corner--tr\" />\n            <span className=\"wnqs-corner wnqs-corner--bl\" />\n            <span className=\"wnqs-corner wnqs-corner--br\" />\n            <span className=\"wnqs-scan-line\" />\n          </div>\n        </div>\n      )}\n\n      {hasTorch && status === 'active' && candidates.length === 0 && (\n        <button\n          type=\"button\"\n          onClick={toggleTorch}\n          className=\"wnqs-torch-btn\"\n          aria-label={torchOn ? l.torchOn : l.torchOff}\n        >\n          {torchOn ? <ZapOffIcon /> : <ZapIcon />}\n        </button>\n      )}\n\n      {candidates.length > 0 && (\n        <div className=\"wnqs-picker\">\n          <div className=\"wnqs-picker-backdrop\" onClick={closePicker} />\n          <div className=\"wnqs-picker-sheet\">\n            <div className=\"wnqs-picker-header\">\n              <p className=\"wnqs-picker-title\">\n                {l.multipleFoundPrefix.replace('{count}', String(candidates.length))}\n              </p>\n              <button type=\"button\" onClick={closePicker} aria-label={l.close} className=\"wnqs-picker-close\">\n                <XIcon width={16} height={16} />\n              </button>\n            </div>\n            {candidates.map((code) => (\n              <button key={code} type=\"button\" onClick={() => selectCandidate(code)} className=\"wnqs-picker-item\">\n                {code}\n              </button>\n            ))}\n          </div>\n        </div>\n      )}\n\n      {status === 'loading' && (\n        <div className=\"wnqs-state-layer\">\n          <span className=\"wnqs-spinner\" />\n        </div>\n      )}\n\n      {status === 'denied' && (\n        <div className=\"wnqs-state-layer wnqs-state-layer--denied\">\n          <CameraOffIcon width={40} height={40} />\n          <p className=\"wnqs-denied-title\">{l.permissionDeniedTitle}</p>\n          <p className=\"wnqs-denied-hint\">{l.permissionDeniedHint}</p>\n        </div>\n      )}\n\n      {status === 'active' && candidates.length === 0 && (\n        <div className=\"wnqs-hint-wrap\">\n          <div className=\"wnqs-hint\">\n            <CameraIcon width={14} height={14} />\n            {mode === 'qr' ? l.hintQr : l.hintBarcode}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n","import type { SVGProps } from 'react'\n\ntype IconProps = SVGProps<SVGSVGElement>\n\nconst base = (props: IconProps): IconProps => ({\n  xmlns: 'http://www.w3.org/2000/svg',\n  width: 20,\n  height: 20,\n  viewBox: '0 0 24 24',\n  fill: 'none',\n  stroke: 'currentColor',\n  strokeWidth: 2,\n  strokeLinecap: 'round',\n  strokeLinejoin: 'round',\n  ...props,\n})\n\nexport function CameraIcon(props: IconProps) {\n  return (\n    <svg {...base(props)}>\n      <path d=\"M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z\" />\n      <circle cx=\"12\" cy=\"13\" r=\"3\" />\n    </svg>\n  )\n}\n\nexport function CameraOffIcon(props: IconProps) {\n  return (\n    <svg {...base(props)}>\n      <line x1=\"2\" y1=\"2\" x2=\"22\" y2=\"22\" />\n      <path d=\"M7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h13a2 2 0 0 0 1.41-.59\" />\n      <path d=\"M9.5 4h5L17 7h3a2 2 0 0 1 2 2v7.5\" />\n      <path d=\"M14.12 15.12A3 3 0 1 1 9.88 10.88\" />\n    </svg>\n  )\n}\n\nexport function XIcon(props: IconProps) {\n  return (\n    <svg {...base(props)}>\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n    </svg>\n  )\n}\n\nexport function ZapIcon(props: IconProps) {\n  return (\n    <svg {...base(props)}>\n      <polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\" />\n    </svg>\n  )\n}\n\nexport function ZapOffIcon(props: IconProps) {\n  return (\n    <svg {...base(props)}>\n      <polyline points=\"12.41 6.75 13 2 10.57 4.92\" />\n      <polyline points=\"18.57 12.91 21 10 15.66 10\" />\n      <polyline points=\"8 8 3 14 12 14 11 22 16 16\" />\n      <line x1=\"2\" y1=\"2\" x2=\"22\" y2=\"22\" />\n    </svg>\n  )\n}\n"],"mappings":"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","names":["import_jsx_runtime","frac","h"]}

package/dist/index.d.cts

@@ -0,0 +1,27 @@
+import * as react from 'react';
+
+type ScanMode = 'qr' | 'barcode';
+interface QrScannerLabels {
+    permissionDeniedTitle?: string;
+    permissionDeniedHint?: string;
+    hintQr?: string;
+    hintBarcode?: string;
+    multipleFoundPrefix?: string;
+    close?: string;
+    torchOn?: string;
+    torchOff?: string;
+}
+interface QrScannerProps {
+    /** Called once with the decoded, normalised text when a single code is found. */
+    onDetect: (code: string) => void;
+    /** 'qr' restricts detection to QR codes; 'barcode' restricts to common 1D formats. */
+    mode?: ScanMode;
+    /** Extra class name applied to the root element. */
+    className?: string;
+    /** Override any of the UI strings (defaults are in English). */
+    labels?: QrScannerLabels;
+}
+
+declare function QrScanner({ onDetect, mode, className, labels }: QrScannerProps): react.JSX.Element;
+
+export { QrScanner, type QrScannerLabels, type QrScannerProps, type ScanMode };

package/dist/index.d.ts

@@ -0,0 +1,27 @@
+import * as react from 'react';
+
+type ScanMode = 'qr' | 'barcode';
+interface QrScannerLabels {
+    permissionDeniedTitle?: string;
+    permissionDeniedHint?: string;
+    hintQr?: string;
+    hintBarcode?: string;
+    multipleFoundPrefix?: string;
+    close?: string;
+    torchOn?: string;
+    torchOff?: string;
+}
+interface QrScannerProps {
+    /** Called once with the decoded, normalised text when a single code is found. */
+    onDetect: (code: string) => void;
+    /** 'qr' restricts detection to QR codes; 'barcode' restricts to common 1D formats. */
+    mode?: ScanMode;
+    /** Extra class name applied to the root element. */
+    className?: string;
+    /** Override any of the UI strings (defaults are in English). */
+    labels?: QrScannerLabels;
+}
+
+declare function QrScanner({ onDetect, mode, className, labels }: QrScannerProps): react.JSX.Element;
+
+export { QrScanner, type QrScannerLabels, type QrScannerProps, type ScanMode };

package/dist/index.js

@@ -0,0 +1,317 @@
+// src/QrScanner.tsx
+import { useEffect, useRef, useState, useCallback } from "react";
+
+// src/icons.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var base = (props) => ({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 20,
+  height: 20,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  ...props
+});
+function CameraIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...base(props), children: [
+    /* @__PURE__ */ jsx("path", { d: "M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "13", r: "3" })
+  ] });
+}
+function CameraOffIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...base(props), children: [
+    /* @__PURE__ */ jsx("line", { x1: "2", y1: "2", x2: "22", y2: "22" }),
+    /* @__PURE__ */ jsx("path", { d: "M7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h13a2 2 0 0 0 1.41-.59" }),
+    /* @__PURE__ */ jsx("path", { d: "M9.5 4h5L17 7h3a2 2 0 0 1 2 2v7.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M14.12 15.12A3 3 0 1 1 9.88 10.88" })
+  ] });
+}
+function XIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...base(props), children: [
+    /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  ] });
+}
+function ZapIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { ...base(props), children: /* @__PURE__ */ jsx("polygon", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2" }) });
+}
+function ZapOffIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...base(props), children: [
+    /* @__PURE__ */ jsx("polyline", { points: "12.41 6.75 13 2 10.57 4.92" }),
+    /* @__PURE__ */ jsx("polyline", { points: "18.57 12.91 21 10 15.66 10" }),
+    /* @__PURE__ */ jsx("polyline", { points: "8 8 3 14 12 14 11 22 16 16" }),
+    /* @__PURE__ */ jsx("line", { x1: "2", y1: "2", x2: "22", y2: "22" })
+  ] });
+}
+
+// src/QrScanner.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var NATIVE_FORMATS = {
+  qr: ["qr_code"],
+  barcode: ["code_128", "code_39", "ean_13", "ean_8", "upc_a", "upc_e", "itf", "codabar"]
+};
+var WASM_FORMATS = {
+  qr: ["QRCode"],
+  barcode: ["Code128", "Code39", "EAN13", "EAN8", "UPCA", "UPCE", "ITF", "Codabar"]
+};
+var DEFAULT_LABELS = {
+  permissionDeniedTitle: "Camera access unavailable",
+  permissionDeniedHint: "Please allow camera access in your browser settings",
+  hintQr: "Point the QR code at the frame",
+  hintBarcode: "Point the barcode at the frame",
+  multipleFoundPrefix: "Found {count} codes \u2014 pick one",
+  close: "Close",
+  torchOn: "Turn off flashlight",
+  torchOff: "Turn on flashlight"
+};
+function stripAim(raw) {
+  return raw.replace(/^\][A-Za-z]\d?/, "");
+}
+function normalise(raw) {
+  return stripAim(raw).trim();
+}
+function computeRoi(vw, vh, mode) {
+  const containerAspect = mode === "qr" ? 1 : 5 / 2;
+  const sourceAspect = vw / vh;
+  let visW, visH, offX, offY;
+  if (sourceAspect > containerAspect) {
+    visH = vh;
+    visW = vh * containerAspect;
+    offX = (vw - visW) / 2;
+    offY = 0;
+  } else {
+    visW = vw;
+    visH = vw / containerAspect;
+    offX = 0;
+    offY = (vh - visH) / 2;
+  }
+  if (mode === "qr") {
+    const frac2 = 0.65;
+    const w = visW * frac2;
+    const h2 = visH * frac2;
+    return { x: offX + (visW - w) / 2, y: offY + (visH - h2) / 2, width: w, height: h2 };
+  }
+  const frac = 0.44;
+  const h = visH * frac;
+  return { x: offX, y: offY + (visH - h) / 2, width: visW, height: h };
+}
+function scheduleFrame(video, cb) {
+  if (video.requestVideoFrameCallback) {
+    const handle = video.requestVideoFrameCallback(() => cb());
+    return () => video.cancelVideoFrameCallback(handle);
+  }
+  const timer = setTimeout(cb, 100);
+  return () => clearTimeout(timer);
+}
+function QrScanner({ onDetect, mode = "barcode", className, labels }) {
+  const l = { ...DEFAULT_LABELS, ...labels };
+  const videoRef = useRef(null);
+  const canvasRef = useRef(null);
+  const [status, setStatus] = useState("loading");
+  const [candidates, setCandidates] = useState([]);
+  const [hasTorch, setHasTorch] = useState(false);
+  const [torchOn, setTorchOn] = useState(false);
+  const stoppedRef = useRef(false);
+  const detectedRef = useRef(false);
+  const pickerRef = useRef(false);
+  const frameCancelRef = useRef(null);
+  const streamRef = useRef(null);
+  const restartRef = useRef(null);
+  const handleDetect = useCallback(
+    (code) => {
+      if (detectedRef.current) return;
+      detectedRef.current = true;
+      onDetect(code);
+    },
+    [onDetect]
+  );
+  const selectCandidate = useCallback((code) => handleDetect(code), [handleDetect]);
+  const closePicker = useCallback(() => {
+    pickerRef.current = false;
+    setCandidates([]);
+    restartRef.current?.();
+  }, []);
+  const toggleTorch = useCallback(async () => {
+    const track = streamRef.current?.getVideoTracks()[0];
+    if (!track) return;
+    try {
+      await track.applyConstraints({ advanced: [{ torch: !torchOn }] });
+      setTorchOn((v) => !v);
+    } catch {
+    }
+  }, [torchOn]);
+  useEffect(() => {
+    stoppedRef.current = false;
+    detectedRef.current = false;
+    pickerRef.current = false;
+    async function start() {
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({
+          video: { facingMode: "environment", width: { ideal: 1920 }, height: { ideal: 1080 } }
+        });
+        streamRef.current = stream;
+        const track = stream.getVideoTracks()[0];
+        const caps = track?.getCapabilities?.();
+        if (caps?.torch) setHasTorch(true);
+        if (!videoRef.current || stoppedRef.current) {
+          stream.getTracks().forEach((t) => t.stop());
+          return;
+        }
+        videoRef.current.srcObject = stream;
+        await videoRef.current.play();
+        setStatus("active");
+        const startWasm = async () => {
+          if (stoppedRef.current || detectedRef.current) return;
+          const { readBarcodesFromImageData } = await import("zxing-wasm/reader");
+          const formats = WASM_FORMATS[mode];
+          const tick = async () => {
+            if (stoppedRef.current || detectedRef.current || pickerRef.current) return;
+            const video = videoRef.current;
+            const canvas = canvasRef.current;
+            if (video && canvas && video.readyState >= 2 && video.videoWidth > 0) {
+              const roi = computeRoi(video.videoWidth, video.videoHeight, mode);
+              canvas.width = Math.max(1, Math.round(roi.width));
+              canvas.height = Math.max(1, Math.round(roi.height));
+              const ctx = canvas.getContext("2d", { willReadFrequently: true });
+              if (ctx) {
+                ctx.drawImage(video, roi.x, roi.y, roi.width, roi.height, 0, 0, canvas.width, canvas.height);
+                const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+                const results = await readBarcodesFromImageData(imageData, { formats }).catch(() => []);
+                const unique = [...new Set(results.map((r) => normalise(r.text)).filter(Boolean))];
+                if (unique.length === 1) {
+                  handleDetect(unique[0]);
+                  return;
+                }
+                if (unique.length > 1) {
+                  pickerRef.current = true;
+                  setCandidates(unique);
+                  return;
+                }
+              }
+            }
+            if (video) frameCancelRef.current = scheduleFrame(video, tick);
+          };
+          restartRef.current = () => {
+            if (videoRef.current) frameCancelRef.current = scheduleFrame(videoRef.current, tick);
+          };
+          tick();
+        };
+        const NativeDetector = typeof window !== "undefined" ? window["BarcodeDetector"] : void 0;
+        const nativeFormats = NATIVE_FORMATS[mode];
+        const nativeOk = NativeDetector != null && await NativeDetector.getSupportedFormats().then((sup) => nativeFormats.some((f) => sup.includes(f))).catch(() => false);
+        if (nativeOk && NativeDetector) {
+          const detector = new NativeDetector({ formats: nativeFormats });
+          let miss = 0;
+          const tick = async () => {
+            if (stoppedRef.current || detectedRef.current || pickerRef.current) return;
+            const video = videoRef.current;
+            const canvas = canvasRef.current;
+            if (video && canvas && video.readyState >= 2 && video.videoWidth > 0) {
+              const roi = computeRoi(video.videoWidth, video.videoHeight, mode);
+              canvas.width = Math.max(1, Math.round(roi.width));
+              canvas.height = Math.max(1, Math.round(roi.height));
+              const ctx = canvas.getContext("2d");
+              if (ctx) {
+                ctx.drawImage(video, roi.x, roi.y, roi.width, roi.height, 0, 0, canvas.width, canvas.height);
+                const results = await detector.detect(canvas).catch(() => []);
+                const unique = [...new Set(results.map((r) => normalise(r.rawValue)).filter(Boolean))];
+                if (unique.length === 1) {
+                  handleDetect(unique[0]);
+                  return;
+                }
+                if (unique.length > 1) {
+                  pickerRef.current = true;
+                  setCandidates(unique);
+                  return;
+                }
+                if (++miss >= 50) {
+                  startWasm();
+                  return;
+                }
+              }
+            }
+            if (video) frameCancelRef.current = scheduleFrame(video, tick);
+          };
+          restartRef.current = () => {
+            if (videoRef.current) frameCancelRef.current = scheduleFrame(videoRef.current, tick);
+          };
+          tick();
+        } else {
+          startWasm();
+        }
+      } catch {
+        if (!stoppedRef.current) setStatus("denied");
+      }
+    }
+    start();
+    return () => {
+      stoppedRef.current = true;
+      frameCancelRef.current?.();
+      streamRef.current?.getTracks().forEach((t) => t.stop());
+      streamRef.current = null;
+    };
+  }, [handleDetect, mode]);
+  const rootClass = ["wnqs-root", mode === "qr" ? "wnqs-root--qr" : "wnqs-root--barcode", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs2("div", { className: rootClass, children: [
+    /* @__PURE__ */ jsx2("video", { ref: videoRef, className: "wnqs-video", playsInline: true, muted: true }),
+    /* @__PURE__ */ jsx2("canvas", { ref: canvasRef, className: "wnqs-canvas" }),
+    status === "active" && mode === "barcode" && /* @__PURE__ */ jsxs2("div", { className: "wnqs-overlay wnqs-overlay--barcode", children: [
+      /* @__PURE__ */ jsx2("div", { className: "wnqs-shade wnqs-shade--flex" }),
+      /* @__PURE__ */ jsxs2("div", { className: "wnqs-frame wnqs-frame--barcode", children: [
+        /* @__PURE__ */ jsx2("span", { className: "wnqs-corner wnqs-corner--tl" }),
+        /* @__PURE__ */ jsx2("span", { className: "wnqs-corner wnqs-corner--tr" }),
+        /* @__PURE__ */ jsx2("span", { className: "wnqs-corner wnqs-corner--bl" }),
+        /* @__PURE__ */ jsx2("span", { className: "wnqs-corner wnqs-corner--br" }),
+        /* @__PURE__ */ jsx2("span", { className: "wnqs-scan-line" })
+      ] }),
+      /* @__PURE__ */ jsx2("div", { className: "wnqs-shade wnqs-shade--flex" })
+    ] }),
+    status === "active" && mode === "qr" && /* @__PURE__ */ jsxs2("div", { className: "wnqs-overlay wnqs-overlay--qr", children: [
+      /* @__PURE__ */ jsx2("div", { className: "wnqs-shade wnqs-shade--full" }),
+      /* @__PURE__ */ jsxs2("div", { className: "wnqs-frame wnqs-frame--qr", children: [
+        /* @__PURE__ */ jsx2("span", { className: "wnqs-corner wnqs-corner--tl" }),
+        /* @__PURE__ */ jsx2("span", { className: "wnqs-corner wnqs-corner--tr" }),
+        /* @__PURE__ */ jsx2("span", { className: "wnqs-corner wnqs-corner--bl" }),
+        /* @__PURE__ */ jsx2("span", { className: "wnqs-corner wnqs-corner--br" }),
+        /* @__PURE__ */ jsx2("span", { className: "wnqs-scan-line" })
+      ] })
+    ] }),
+    hasTorch && status === "active" && candidates.length === 0 && /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        onClick: toggleTorch,
+        className: "wnqs-torch-btn",
+        "aria-label": torchOn ? l.torchOn : l.torchOff,
+        children: torchOn ? /* @__PURE__ */ jsx2(ZapOffIcon, {}) : /* @__PURE__ */ jsx2(ZapIcon, {})
+      }
+    ),
+    candidates.length > 0 && /* @__PURE__ */ jsxs2("div", { className: "wnqs-picker", children: [
+      /* @__PURE__ */ jsx2("div", { className: "wnqs-picker-backdrop", onClick: closePicker }),
+      /* @__PURE__ */ jsxs2("div", { className: "wnqs-picker-sheet", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "wnqs-picker-header", children: [
+          /* @__PURE__ */ jsx2("p", { className: "wnqs-picker-title", children: l.multipleFoundPrefix.replace("{count}", String(candidates.length)) }),
+          /* @__PURE__ */ jsx2("button", { type: "button", onClick: closePicker, "aria-label": l.close, className: "wnqs-picker-close", children: /* @__PURE__ */ jsx2(XIcon, { width: 16, height: 16 }) })
+        ] }),
+        candidates.map((code) => /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => selectCandidate(code), className: "wnqs-picker-item", children: code }, code))
+      ] })
+    ] }),
+    status === "loading" && /* @__PURE__ */ jsx2("div", { className: "wnqs-state-layer", children: /* @__PURE__ */ jsx2("span", { className: "wnqs-spinner" }) }),
+    status === "denied" && /* @__PURE__ */ jsxs2("div", { className: "wnqs-state-layer wnqs-state-layer--denied", children: [
+      /* @__PURE__ */ jsx2(CameraOffIcon, { width: 40, height: 40 }),
+      /* @__PURE__ */ jsx2("p", { className: "wnqs-denied-title", children: l.permissionDeniedTitle }),
+      /* @__PURE__ */ jsx2("p", { className: "wnqs-denied-hint", children: l.permissionDeniedHint })
+    ] }),
+    status === "active" && candidates.length === 0 && /* @__PURE__ */ jsx2("div", { className: "wnqs-hint-wrap", children: /* @__PURE__ */ jsxs2("div", { className: "wnqs-hint", children: [
+      /* @__PURE__ */ jsx2(CameraIcon, { width: 14, height: 14 }),
+      mode === "qr" ? l.hintQr : l.hintBarcode
+    ] }) })
+  ] });
+}
+export {
+  QrScanner
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/QrScanner.tsx","../src/icons.tsx"],"sourcesContent":["import { useEffect, useRef, useState, useCallback } from 'react'\nimport type { ReadInputBarcodeFormat } from 'zxing-wasm/reader'\nimport { CameraIcon, CameraOffIcon, XIcon, ZapIcon, ZapOffIcon } from './icons'\nimport type { QrScannerLabels, QrScannerProps, ScanMode } from './types'\n\n// ── Native BarcodeDetector types ─────────────────────────────────────────────\ninterface NativeResult {\n  rawValue: string\n}\ninterface BarcodeDetectorCtor {\n  new (opts: { formats: string[] }): { detect(el: CanvasImageSource): Promise<NativeResult[]> }\n  getSupportedFormats(): Promise<string[]>\n}\n\nconst NATIVE_FORMATS: Record<ScanMode, string[]> = {\n  qr: ['qr_code'],\n  barcode: ['code_128', 'code_39', 'ean_13', 'ean_8', 'upc_a', 'upc_e', 'itf', 'codabar'],\n}\n\n// ── zxing-wasm (ZXing-C++) format names ──────────────────────────────────────\nconst WASM_FORMATS: Record<ScanMode, ReadInputBarcodeFormat[]> = {\n  qr: ['QRCode'],\n  barcode: ['Code128', 'Code39', 'EAN13', 'EAN8', 'UPCA', 'UPCE', 'ITF', 'Codabar'],\n}\n\nconst DEFAULT_LABELS: Required<QrScannerLabels> = {\n  permissionDeniedTitle: 'Camera access unavailable',\n  permissionDeniedHint: 'Please allow camera access in your browser settings',\n  hintQr: 'Point the QR code at the frame',\n  hintBarcode: 'Point the barcode at the frame',\n  multipleFoundPrefix: 'Found {count} codes — pick one',\n  close: 'Close',\n  torchOn: 'Turn off flashlight',\n  torchOff: 'Turn on flashlight',\n}\n\nfunction stripAim(raw: string) {\n  return raw.replace(/^\\][A-Za-z]\\d?/, '')\n}\nfunction normalise(raw: string) {\n  return stripAim(raw).trim()\n}\n\n// ── ROI: crop window matched to the overlay (drop the video area outside the scan frame) ─\n// object-cover crops the video to the container's aspect first; the ROI% is applied on top of that crop.\nfunction computeRoi(vw: number, vh: number, mode: ScanMode) {\n  const containerAspect = mode === 'qr' ? 1 : 5 / 2\n  const sourceAspect = vw / vh\n  let visW: number, visH: number, offX: number, offY: number\n  if (sourceAspect > containerAspect) {\n    visH = vh\n    visW = vh * containerAspect\n    offX = (vw - visW) / 2\n    offY = 0\n  } else {\n    visW = vw\n    visH = vw / containerAspect\n    offX = 0\n    offY = (vh - visH) / 2\n  }\n\n  if (mode === 'qr') {\n    const frac = 0.65\n    const w = visW * frac\n    const h = visH * frac\n    return { x: offX + (visW - w) / 2, y: offY + (visH - h) / 2, width: w, height: h }\n  }\n  const frac = 0.44\n  const h = visH * frac\n  return { x: offX, y: offY + (visH - h) / 2, width: visW, height: h }\n}\n\n// ── Schedule the next frame on the video's actual render cadence instead of a blind poll ─\nfunction scheduleFrame(video: HTMLVideoElement, cb: () => void): () => void {\n  if (video.requestVideoFrameCallback) {\n    const handle = video.requestVideoFrameCallback(() => cb())\n    return () => video.cancelVideoFrameCallback(handle)\n  }\n  const timer = setTimeout(cb, 100)\n  return () => clearTimeout(timer)\n}\n\nexport function QrScanner({ onDetect, mode = 'barcode', className, labels }: QrScannerProps) {\n  const l = { ...DEFAULT_LABELS, ...labels }\n\n  const videoRef = useRef<HTMLVideoElement>(null)\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n\n  const [status, setStatus] = useState<'loading' | 'active' | 'denied'>('loading')\n  const [candidates, setCandidates] = useState<string[]>([])\n  const [hasTorch, setHasTorch] = useState(false)\n  const [torchOn, setTorchOn] = useState(false)\n\n  const stoppedRef = useRef(false)\n  const detectedRef = useRef(false)\n  const pickerRef = useRef(false)\n  const frameCancelRef = useRef<(() => void) | null>(null)\n  const streamRef = useRef<MediaStream | null>(null)\n  const restartRef = useRef<(() => void) | null>(null)\n\n  const handleDetect = useCallback(\n    (code: string) => {\n      if (detectedRef.current) return\n      detectedRef.current = true\n      onDetect(code)\n    },\n    [onDetect],\n  )\n\n  const selectCandidate = useCallback((code: string) => handleDetect(code), [handleDetect])\n\n  const closePicker = useCallback(() => {\n    pickerRef.current = false\n    setCandidates([])\n    restartRef.current?.()\n  }, [])\n\n  const toggleTorch = useCallback(async () => {\n    const track = streamRef.current?.getVideoTracks()[0]\n    if (!track) return\n    try {\n      await track.applyConstraints({ advanced: [{ torch: !torchOn } as MediaTrackConstraintSet] })\n      setTorchOn((v) => !v)\n    } catch {\n      // torch not supported on this device\n    }\n  }, [torchOn])\n\n  useEffect(() => {\n    stoppedRef.current = false\n    detectedRef.current = false\n    pickerRef.current = false\n\n    async function start() {\n      try {\n        const stream = await navigator.mediaDevices.getUserMedia({\n          video: { facingMode: 'environment', width: { ideal: 1920 }, height: { ideal: 1080 } },\n        })\n        streamRef.current = stream\n\n        const track = stream.getVideoTracks()[0]\n        const caps = track?.getCapabilities?.() as Record<string, unknown> | undefined\n        if (caps?.torch) setHasTorch(true)\n\n        if (!videoRef.current || stoppedRef.current) {\n          stream.getTracks().forEach((t) => t.stop())\n          return\n        }\n        videoRef.current.srcObject = stream\n        await videoRef.current.play()\n        setStatus('active')\n\n        // ── WASM engine (ZXing-C++) ───────────────────────────────────────────\n        // tryRotate + tryInvert + tryHarder are enabled by default in zxing-wasm 3.x\n        const startWasm = async () => {\n          if (stoppedRef.current || detectedRef.current) return\n          const { readBarcodesFromImageData } = await import('zxing-wasm/reader')\n          const formats = WASM_FORMATS[mode]\n\n          const tick = async () => {\n            if (stoppedRef.current || detectedRef.current || pickerRef.current) return\n            const video = videoRef.current\n            const canvas = canvasRef.current\n            if (video && canvas && video.readyState >= 2 && video.videoWidth > 0) {\n              const roi = computeRoi(video.videoWidth, video.videoHeight, mode)\n              canvas.width = Math.max(1, Math.round(roi.width))\n              canvas.height = Math.max(1, Math.round(roi.height))\n              const ctx = canvas.getContext('2d', { willReadFrequently: true })\n              if (ctx) {\n                ctx.drawImage(video, roi.x, roi.y, roi.width, roi.height, 0, 0, canvas.width, canvas.height)\n                const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)\n                const results = await readBarcodesFromImageData(imageData, { formats }).catch(() => [])\n                const unique = [...new Set(results.map((r) => normalise(r.text)).filter(Boolean))]\n                if (unique.length === 1) {\n                  handleDetect(unique[0])\n                  return\n                }\n                if (unique.length > 1) {\n                  pickerRef.current = true\n                  setCandidates(unique)\n                  return\n                }\n              }\n            }\n            if (video) frameCancelRef.current = scheduleFrame(video, tick)\n          }\n          restartRef.current = () => {\n            if (videoRef.current) frameCancelRef.current = scheduleFrame(videoRef.current, tick)\n          }\n          tick()\n        }\n\n        // ── Native BarcodeDetector (Safari 17.4+, Chrome/Edge) ──────────────────\n        const NativeDetector =\n          typeof window !== 'undefined'\n            ? ((window as unknown as Record<string, unknown>)['BarcodeDetector'] as\n                | BarcodeDetectorCtor\n                | undefined)\n            : undefined\n\n        const nativeFormats = NATIVE_FORMATS[mode]\n        const nativeOk =\n          NativeDetector != null &&\n          (await NativeDetector.getSupportedFormats()\n            .then((sup) => nativeFormats.some((f) => sup.includes(f)))\n            .catch(() => false))\n\n        if (nativeOk && NativeDetector) {\n          const detector = new NativeDetector({ formats: nativeFormats })\n          let miss = 0\n\n          const tick = async () => {\n            if (stoppedRef.current || detectedRef.current || pickerRef.current) return\n            const video = videoRef.current\n            const canvas = canvasRef.current\n            if (video && canvas && video.readyState >= 2 && video.videoWidth > 0) {\n              const roi = computeRoi(video.videoWidth, video.videoHeight, mode)\n              canvas.width = Math.max(1, Math.round(roi.width))\n              canvas.height = Math.max(1, Math.round(roi.height))\n              const ctx = canvas.getContext('2d')\n              if (ctx) {\n                ctx.drawImage(video, roi.x, roi.y, roi.width, roi.height, 0, 0, canvas.width, canvas.height)\n                const results = await detector.detect(canvas).catch(() => [] as NativeResult[])\n                const unique = [...new Set(results.map((r) => normalise(r.rawValue)).filter(Boolean))]\n                if (unique.length === 1) {\n                  handleDetect(unique[0])\n                  return\n                }\n                if (unique.length > 1) {\n                  pickerRef.current = true\n                  setCandidates(unique)\n                  return\n                }\n                // After 5s (50 x 100ms-equivalent frames) of native misses, fall back to WASM.\n                if (++miss >= 50) {\n                  startWasm()\n                  return\n                }\n              }\n            }\n            if (video) frameCancelRef.current = scheduleFrame(video, tick)\n          }\n          restartRef.current = () => {\n            if (videoRef.current) frameCancelRef.current = scheduleFrame(videoRef.current, tick)\n          }\n          tick()\n        } else {\n          startWasm()\n        }\n      } catch {\n        if (!stoppedRef.current) setStatus('denied')\n      }\n    }\n\n    start()\n\n    return () => {\n      stoppedRef.current = true\n      frameCancelRef.current?.()\n      streamRef.current?.getTracks().forEach((t) => t.stop())\n      streamRef.current = null\n    }\n  }, [handleDetect, mode])\n\n  const rootClass = ['wnqs-root', mode === 'qr' ? 'wnqs-root--qr' : 'wnqs-root--barcode', className]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <div className={rootClass}>\n      <video ref={videoRef} className=\"wnqs-video\" playsInline muted />\n      <canvas ref={canvasRef} className=\"wnqs-canvas\" />\n\n      {status === 'active' && mode === 'barcode' && (\n        <div className=\"wnqs-overlay wnqs-overlay--barcode\">\n          <div className=\"wnqs-shade wnqs-shade--flex\" />\n          <div className=\"wnqs-frame wnqs-frame--barcode\">\n            <span className=\"wnqs-corner wnqs-corner--tl\" />\n            <span className=\"wnqs-corner wnqs-corner--tr\" />\n            <span className=\"wnqs-corner wnqs-corner--bl\" />\n            <span className=\"wnqs-corner wnqs-corner--br\" />\n            <span className=\"wnqs-scan-line\" />\n          </div>\n          <div className=\"wnqs-shade wnqs-shade--flex\" />\n        </div>\n      )}\n\n      {status === 'active' && mode === 'qr' && (\n        <div className=\"wnqs-overlay wnqs-overlay--qr\">\n          <div className=\"wnqs-shade wnqs-shade--full\" />\n          <div className=\"wnqs-frame wnqs-frame--qr\">\n            <span className=\"wnqs-corner wnqs-corner--tl\" />\n            <span className=\"wnqs-corner wnqs-corner--tr\" />\n            <span className=\"wnqs-corner wnqs-corner--bl\" />\n            <span className=\"wnqs-corner wnqs-corner--br\" />\n            <span className=\"wnqs-scan-line\" />\n          </div>\n        </div>\n      )}\n\n      {hasTorch && status === 'active' && candidates.length === 0 && (\n        <button\n          type=\"button\"\n          onClick={toggleTorch}\n          className=\"wnqs-torch-btn\"\n          aria-label={torchOn ? l.torchOn : l.torchOff}\n        >\n          {torchOn ? <ZapOffIcon /> : <ZapIcon />}\n        </button>\n      )}\n\n      {candidates.length > 0 && (\n        <div className=\"wnqs-picker\">\n          <div className=\"wnqs-picker-backdrop\" onClick={closePicker} />\n          <div className=\"wnqs-picker-sheet\">\n            <div className=\"wnqs-picker-header\">\n              <p className=\"wnqs-picker-title\">\n                {l.multipleFoundPrefix.replace('{count}', String(candidates.length))}\n              </p>\n              <button type=\"button\" onClick={closePicker} aria-label={l.close} className=\"wnqs-picker-close\">\n                <XIcon width={16} height={16} />\n              </button>\n            </div>\n            {candidates.map((code) => (\n              <button key={code} type=\"button\" onClick={() => selectCandidate(code)} className=\"wnqs-picker-item\">\n                {code}\n              </button>\n            ))}\n          </div>\n        </div>\n      )}\n\n      {status === 'loading' && (\n        <div className=\"wnqs-state-layer\">\n          <span className=\"wnqs-spinner\" />\n        </div>\n      )}\n\n      {status === 'denied' && (\n        <div className=\"wnqs-state-layer wnqs-state-layer--denied\">\n          <CameraOffIcon width={40} height={40} />\n          <p className=\"wnqs-denied-title\">{l.permissionDeniedTitle}</p>\n          <p className=\"wnqs-denied-hint\">{l.permissionDeniedHint}</p>\n        </div>\n      )}\n\n      {status === 'active' && candidates.length === 0 && (\n        <div className=\"wnqs-hint-wrap\">\n          <div className=\"wnqs-hint\">\n            <CameraIcon width={14} height={14} />\n            {mode === 'qr' ? l.hintQr : l.hintBarcode}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n","import type { SVGProps } from 'react'\n\ntype IconProps = SVGProps<SVGSVGElement>\n\nconst base = (props: IconProps): IconProps => ({\n  xmlns: 'http://www.w3.org/2000/svg',\n  width: 20,\n  height: 20,\n  viewBox: '0 0 24 24',\n  fill: 'none',\n  stroke: 'currentColor',\n  strokeWidth: 2,\n  strokeLinecap: 'round',\n  strokeLinejoin: 'round',\n  ...props,\n})\n\nexport function CameraIcon(props: IconProps) {\n  return (\n    <svg {...base(props)}>\n      <path d=\"M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z\" />\n      <circle cx=\"12\" cy=\"13\" r=\"3\" />\n    </svg>\n  )\n}\n\nexport function CameraOffIcon(props: IconProps) {\n  return (\n    <svg {...base(props)}>\n      <line x1=\"2\" y1=\"2\" x2=\"22\" y2=\"22\" />\n      <path d=\"M7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h13a2 2 0 0 0 1.41-.59\" />\n      <path d=\"M9.5 4h5L17 7h3a2 2 0 0 1 2 2v7.5\" />\n      <path d=\"M14.12 15.12A3 3 0 1 1 9.88 10.88\" />\n    </svg>\n  )\n}\n\nexport function XIcon(props: IconProps) {\n  return (\n    <svg {...base(props)}>\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n    </svg>\n  )\n}\n\nexport function ZapIcon(props: IconProps) {\n  return (\n    <svg {...base(props)}>\n      <polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\" />\n    </svg>\n  )\n}\n\nexport function ZapOffIcon(props: IconProps) {\n  return (\n    <svg {...base(props)}>\n      <polyline points=\"12.41 6.75 13 2 10.57 4.92\" />\n      <polyline points=\"18.57 12.91 21 10 15.66 10\" />\n      <polyline points=\"8 8 3 14 12 14 11 22 16 16\" />\n      <line x1=\"2\" y1=\"2\" x2=\"22\" y2=\"22\" />\n    </svg>\n  )\n}\n"],"mappings":"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","names":["jsx","jsxs","frac","h"]}

package/dist/style.css

@@ -0,0 +1,283 @@
+.wnqs-root {
+  position: relative;
+  width: 100%;
+  border-radius: 16px;
+  overflow: hidden;
+  background: #000;
+}
+.wnqs-root--barcode {
+  aspect-ratio: 5 / 2;
+}
+.wnqs-root--qr {
+  aspect-ratio: 1 / 1;
+}
+
+.wnqs-video {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.wnqs-canvas {
+  display: none;
+}
+
+/* ── Overlays ─────────────────────────────────────────────────────────── */
+.wnqs-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  pointer-events: none;
+}
+.wnqs-overlay--barcode {
+  flex-direction: column;
+}
+.wnqs-overlay--qr {
+  align-items: center;
+  justify-content: center;
+}
+
+.wnqs-shade {
+  background: rgba(0, 0, 0, 0.55);
+}
+.wnqs-shade--flex {
+  flex: 1;
+}
+.wnqs-shade--full {
+  position: absolute;
+  inset: 0;
+}
+
+.wnqs-frame {
+  position: relative;
+}
+.wnqs-frame--barcode {
+  flex: none;
+  height: 44%;
+}
+.wnqs-frame--qr {
+  width: 65%;
+  aspect-ratio: 1 / 1;
+  z-index: 10;
+}
+
+.wnqs-corner {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border: 3px solid #4ade80;
+}
+.wnqs-frame--qr .wnqs-corner {
+  width: 28px;
+  height: 28px;
+}
+.wnqs-corner--tl {
+  top: 0;
+  left: 16px;
+  border-right: none;
+  border-bottom: none;
+  border-top-left-radius: 4px;
+}
+.wnqs-corner--tr {
+  top: 0;
+  right: 16px;
+  border-left: none;
+  border-bottom: none;
+  border-top-right-radius: 4px;
+}
+.wnqs-corner--bl {
+  bottom: 0;
+  left: 16px;
+  border-right: none;
+  border-top: none;
+  border-bottom-left-radius: 4px;
+}
+.wnqs-corner--br {
+  bottom: 0;
+  right: 16px;
+  border-left: none;
+  border-top: none;
+  border-bottom-right-radius: 4px;
+}
+.wnqs-frame--qr .wnqs-corner--tl {
+  left: 0;
+}
+.wnqs-frame--qr .wnqs-corner--tr {
+  right: 0;
+}
+.wnqs-frame--qr .wnqs-corner--bl {
+  left: 0;
+}
+.wnqs-frame--qr .wnqs-corner--br {
+  right: 0;
+}
+
+.wnqs-scan-line {
+  position: absolute;
+  left: 16px;
+  right: 16px;
+  height: 2px;
+  background: #ef4444;
+  opacity: 0.9;
+  top: 8px;
+  animation: wnqs-scan-line 2s ease-in-out infinite;
+}
+.wnqs-frame--qr .wnqs-scan-line {
+  left: 0;
+  right: 0;
+}
+@keyframes wnqs-scan-line {
+  0% {
+    top: 8px;
+  }
+  50% {
+    top: calc(100% - 8px);
+  }
+  100% {
+    top: 8px;
+  }
+}
+
+/* ── Torch button ─────────────────────────────────────────────────────── */
+.wnqs-torch-btn {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 20;
+  padding: 8px;
+  border-radius: 999px;
+  border: none;
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  backdrop-filter: blur(4px);
+  cursor: pointer;
+  display: flex;
+}
+
+/* ── Multi-candidate picker ──────────────────────────────────────────── */
+.wnqs-picker {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  z-index: 30;
+}
+.wnqs-picker-backdrop {
+  flex: 1;
+}
+.wnqs-picker-sheet {
+  background: #fff;
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 70%;
+  overflow-y: auto;
+}
+.wnqs-picker-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 4px;
+}
+.wnqs-picker-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #374151;
+  margin: 0;
+}
+.wnqs-picker-close {
+  padding: 4px;
+  border-radius: 8px;
+  border: none;
+  background: transparent;
+  color: #6b7280;
+  cursor: pointer;
+  display: flex;
+}
+.wnqs-picker-close:hover {
+  background: #f3f4f6;
+}
+.wnqs-picker-item {
+  width: 100%;
+  text-align: left;
+  padding: 10px 12px;
+  background: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  font-size: 12px;
+  font-family: ui-monospace, monospace;
+  word-break: break-all;
+  cursor: pointer;
+}
+.wnqs-picker-item:active {
+  background: #eff6ff;
+}
+
+/* ── Status layers ────────────────────────────────────────────────────── */
+.wnqs-state-layer {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.6);
+}
+.wnqs-state-layer--denied {
+  flex-direction: column;
+  gap: 12px;
+  padding: 0 24px;
+  text-align: center;
+  background: rgba(0, 0, 0, 0.8);
+  color: #9ca3af;
+}
+.wnqs-denied-title {
+  color: #fff;
+  font-size: 14px;
+  margin: 0;
+}
+.wnqs-denied-hint {
+  color: #9ca3af;
+  font-size: 12px;
+  margin: 0;
+}
+
+.wnqs-spinner {
+  width: 32px;
+  height: 32px;
+  border: 2px solid #fff;
+  border-top-color: transparent;
+  border-radius: 999px;
+  animation: wnqs-spin 0.8s linear infinite;
+}
+@keyframes wnqs-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ── Hint label ───────────────────────────────────────────────────────── */
+.wnqs-hint-wrap {
+  position: absolute;
+  bottom: 8px;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  pointer-events: none;
+  z-index: 10;
+}
+.wnqs-hint {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  font-size: 12px;
+  padding: 4px 12px;
+  border-radius: 999px;
+}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "web-native-qr-scanner",
+  "version": "0.1.0",
+  "description": "React QR/barcode scanner component using the browser's native BarcodeDetector API with a zxing-wasm fallback, ROI cropping and requestVideoFrameCallback for near-native scanning performance in the browser.",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "tsup && shx cp src/QrScanner.css dist/style.css",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run typecheck && npm run build"
+  },
+  "keywords": [
+    "qr",
+    "qrcode",
+    "barcode",
+    "scanner",
+    "react",
+    "camera",
+    "BarcodeDetector",
+    "zxing",
+    "zxing-wasm"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "zxing-wasm": "^3.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "shx": "^0.3.4",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.0"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}