@feugene/granularity-media 0.2.1 → 0.4.0

package/README.md

@@ -1,9 +1,9 @@
 # `@feugene/granularity-media`
 
-Работа с изображением и камерой для `@feugene/granularity`. Два компонента, и они
-стоят рядом по сценарию: `GrCameraCapture` снимает кадр камерой,
-`GrImageCrop` выбирает кадр из уже существующей картинки. Оба отдают готовый
-`Blob` — можно сразу отправлять.
+Работа с изображением и камерой для `@feugene/granularity`. Три компонента, и они
+стоят рядом по сценарию: `GrCameraCapture` снимает кадр камерой, `GrImageCrop`
+выбирает кадр из уже существующей картинки, `GrCodeScanner` читает камерой QR и
+штрихкоды. Первые два отдают готовый `Blob`, третий — содержимое кода.
 
 ```bash
 yarn add @feugene/granularity-media
@@ -95,9 +95,26 @@ presetGranularNode({
 Превью фронтальной камеры зеркальное, снимок — нет: иначе текст на визитке или в
 документе уехал бы в зазеркалье.
 
+## Чтение кодов
+
+```vue
+<GrCodeScanner :formats="['qr_code']" @detect="codes => open(codes[0].value)" />
+```
+
+Декодера пакет не несёт. Нативный `BarcodeDetector` есть в Chrome и Edge, а
+Safari и Firefox закрываются детектором, который передаёт приложение
+(`:detector`): встроить библиотеку значило бы навязать самую тяжёлую
+зависимость и тем, кто взял один кроп. Готовый рецепт на `@zxing/browser` — на
+странице компонента.
+
+Один код в кадре даёт одно событие: камера отдаёт десятки кадров в секунду, и
+без фильтра приложение оформило бы двадцать заказов вместо одного. Режим
+приёмки, где сканируют одинаковые упаковки подряд, включается `continuous`.
+
 ## Документация
 
 - [`docs/components.md`](./docs/components.md) — состав пакета;
-- [`docs/components/GrImageCrop.md`](./docs/components/GrImageCrop.md) и
-  [`docs/components/GrCameraCapture.md`](./docs/components/GrCameraCapture.md) — страницы компонентов;
+- [`docs/components/GrImageCrop.md`](./docs/components/GrImageCrop.md),
+  [`docs/components/GrCameraCapture.md`](./docs/components/GrCameraCapture.md) и
+  [`docs/components/GrCodeScanner.md`](./docs/components/GrCodeScanner.md) — страницы компонентов;
 - [`docs/keyboard.md`](./docs/keyboard.md), [`docs/ssr.md`](./docs/ssr.md) — сквозные правила пакета.

package/dist/chunks/{config-CZ4ZDG0_.js → config-DHLlFslI.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./classTokens-bAzTjLuQ.js";
 import { defineGranularComponent as t } from "@feugene/unocss-preset-granular/contract";
 //#region src/components/GrCameraCapture/grCameraCaptureStyles.ts
-var n = "grid gap-2", r = "relative w-full overflow-hidden rounded-[var(--gr-radius-md)] border border-[var(--gr-brd)] bg-[var(--gr-muted)]", i = "h-full w-full object-cover", a = "scale-x-[-1]", o = "absolute inset-0 grid place-content-center gap-3 p-4 text-center transition-opacity duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]", s = "text-[var(--gr-muted-fg)]", c = "flex flex-wrap items-center gap-2", l = {
+var n = "grid gap-2", r = "relative w-full overflow-hidden rounded-[var(--gr-radius-md)] border border-[var(--gr-brd)] bg-[var(--gr-muted)]", i = "h-full w-full object-contain", a = "scale-x-[-1]", o = "absolute inset-0 grid place-content-center gap-3 p-4 text-center transition-opacity duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]", s = "text-[var(--gr-muted-fg)]", c = "flex flex-wrap items-center gap-2", l = {
 	xs: "text-[length:var(--gr-control-text-xs)] leading-[var(--gr-control-leading-xs)]",
 	sm: "text-[length:var(--gr-control-text-sm)] leading-[var(--gr-control-leading-sm)]",
 	md: "text-[length:var(--gr-control-text-md)] leading-[var(--gr-control-leading-md)]",

package/dist/chunks/config-DfJkKtIh.js

@@ -0,0 +1,27 @@
+import { t as e } from "./classTokens-bAzTjLuQ.js";
+import { defineGranularComponent as t } from "@feugene/unocss-preset-granular/contract";
+//#region src/components/GrCodeScanner/grCodeScannerStyles.ts
+var n = "grid gap-2", r = "relative w-full overflow-hidden rounded-[var(--gr-radius-md)] border border-[var(--gr-brd)] bg-[var(--gr-muted)]", i = "h-full w-full object-contain", a = "pointer-events-none absolute inset-[15%] rounded-[var(--gr-radius-md)] border-2 border-[var(--gr-code-scanner-reticle,var(--gr-primary))]", o = "absolute inset-0 grid place-content-center gap-3 p-4 text-center transition-opacity duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]", s = "text-[var(--gr-muted-fg)]", c = "flex flex-wrap items-center gap-2", l = {
+	xs: "text-[length:var(--gr-control-text-xs)] leading-[var(--gr-control-leading-xs)]",
+	sm: "text-[length:var(--gr-control-text-sm)] leading-[var(--gr-control-leading-sm)]",
+	md: "text-[length:var(--gr-control-text-md)] leading-[var(--gr-control-leading-md)]",
+	lg: "text-[length:var(--gr-control-text-lg)] leading-[var(--gr-control-leading-lg)]"
+}, u = [
+	...e(n),
+	...e(r),
+	...e(i),
+	...e(a),
+	...e(o),
+	...e(s),
+	...e(c),
+	...Object.values(l).flatMap(e)
+], d = t(import.meta.url, {
+	name: "GrCodeScanner",
+	safelist: u,
+	dependencies: [{
+		provider: "@feugene/granularity",
+		components: ["GrButton"]
+	}]
+});
+//#endregion
+export { a, o as c, u as i, s as l, c as n, n as o, r, l as s, d as t, i as u };

package/dist/chunks/{en-C-Wc5fTB.js → en-BugobSAO.js}

@@ -2,8 +2,9 @@ import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
 //#region src/i18n/locales/en.json
 var t = /* @__PURE__ */ e({
 	camera: () => r,
-	default: () => i,
-	imageCrop: () => n
+	default: () => a,
+	imageCrop: () => n,
+	scanner: () => i
 }), n = {
 	label: "Image crop",
 	frame: "Frame: arrow keys move the image, plus and minus zoom",
@@ -25,8 +26,15 @@ var t = /* @__PURE__ */ e({
 	live: "Camera is on",
 	captured: "Photo taken"
 }, i = {
+	label: "Code scanner",
+	start: "Start scanning",
+	stop: "Stop",
+	unsupported: "This browser cannot read codes. Pass a `detector` to enable it.",
+	detected: "Code recognised"
+}, a = {
 	imageCrop: n,
-	camera: r
+	camera: r,
+	scanner: i
 };
 //#endregion
-export { t as n, i as t };
+export { t as n, a as t };

package/dist/chunks/{es-BUPtE9_0.js → es-B7iA-ExH.js}

@@ -2,8 +2,9 @@ import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
 //#region src/i18n/locales/es.json
 var t = /* @__PURE__ */ e({
 	camera: () => r,
-	default: () => i,
-	imageCrop: () => n
+	default: () => a,
+	imageCrop: () => n,
+	scanner: () => i
 }), n = {
 	label: "Recorte de imagen",
 	frame: "Marco: las flechas mueven la imagen, más y menos ajustan el zoom",
@@ -25,8 +26,15 @@ var t = /* @__PURE__ */ e({
 	live: "Cámara encendida",
 	captured: "Foto tomada"
 }, i = {
+	label: "Escáner de códigos",
+	start: "Iniciar escaneo",
+	stop: "Detener",
+	unsupported: "Este navegador no puede leer códigos. Pasa un `detector` para habilitarlos.",
+	detected: "Código reconocido"
+}, a = {
 	imageCrop: n,
-	camera: r
+	camera: r,
+	scanner: i
 };
 //#endregion
-export { t as n, i as t };
+export { t as n, a as t };

package/dist/chunks/outputSize-D2FU4CbB.js

@@ -0,0 +1,23 @@
+//#region src/internal/outputSize.ts
+function e(e, t) {
+	let n = e.sh > 0 ? e.sw / e.sh : 1, r = (e) => Math.max(1, Math.round(e));
+	if (t?.width && t?.height) {
+		let n = Math.min(t.width / (e.sw || 1), t.height / (e.sh || 1));
+		return {
+			width: r(e.sw * n),
+			height: r(e.sh * n)
+		};
+	}
+	return t?.width ? {
+		width: r(t.width),
+		height: r(t.width / n)
+	} : t?.height ? {
+		width: r(t.height * n),
+		height: r(t.height)
+	} : {
+		width: r(e.sw),
+		height: r(e.sh)
+	};
+}
+//#endregion
+export { e as t };

package/dist/chunks/ru-DSjpFh8N.js

@@ -0,0 +1,4 @@
+//#region src/i18n/messages/const.ts
+var e = "grMedia", t = { en: { [e]: async () => import("./en-BugobSAO.js").then((e) => e.n) } }, n = { es: { [e]: async () => import("./es-B7iA-ExH.js").then((e) => e.n) } }, r = { ru: { [e]: async () => import("./ru-DpiW6Vax.js").then((e) => e.n) } };
+//#endregion
+export { e as i, n, t as r, r as t };

package/dist/chunks/{ru-BqNILj54.js → ru-DpiW6Vax.js}

@@ -2,8 +2,9 @@ import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
 //#region src/i18n/locales/ru.json
 var t = /* @__PURE__ */ e({
 	camera: () => r,
-	default: () => i,
-	imageCrop: () => n
+	default: () => a,
+	imageCrop: () => n,
+	scanner: () => i
 }), n = {
 	label: "Кадрирование изображения",
 	frame: "Кадр: стрелки двигают изображение, плюс и минус меняют увеличение",
@@ -25,8 +26,15 @@ var t = /* @__PURE__ */ e({
 	live: "Камера включена",
 	captured: "Снимок сделан"
 }, i = {
+	label: "Сканер кодов",
+	start: "Начать сканирование",
+	stop: "Остановить",
+	unsupported: "Этот браузер не умеет читать коды. Передайте `detector`, чтобы включить их.",
+	detected: "Код распознан"
+}, a = {
 	imageCrop: n,
-	camera: r
+	camera: r,
+	scanner: i
 };
 //#endregion
-export { t as n, i as t };
+export { t as n, a as t };

package/dist/chunks/useCameraStream-CPdm3r90.js

@@ -0,0 +1,86 @@
+import { computed as e, onBeforeUnmount as t, ref as n, shallowRef as r } from "vue";
+import { useAnnouncer as i } from "@feugene/granularity/composables/useAnnouncer";
+import { useGranularityTranslations as a } from "@feugene/granularity/composables/useGranularityTranslations";
+//#region src/components/GrCameraCapture/cameraState.ts
+function o(e) {
+	switch (e instanceof Error ? e.name : "") {
+		case "NotAllowedError":
+		case "SecurityError":
+		case "PermissionDeniedError": return "denied";
+		case "NotFoundError":
+		case "DevicesNotFoundError":
+		case "OverconstrainedError": return "missing";
+		case "NotReadableError":
+		case "TrackStartError":
+		case "AbortError": return "busy";
+		default: return "error";
+	}
+}
+function s(e) {
+	return typeof e?.mediaDevices?.getUserMedia == "function";
+}
+function c(e, t) {
+	return t ?? e === "user";
+}
+//#endregion
+//#region src/internal/useCameraStream.ts
+function l(c) {
+	let { t: l } = a(), { announce: u } = i(), d = r(null), f = n("idle"), p = n(null), m = e(() => f.value === "live"), h = e(() => p.value ?? 4 / 3), g = e(() => {
+		switch (f.value) {
+			case "starting": return l("grMedia.camera.starting", "Requesting camera access…");
+			case "denied": return l("grMedia.camera.denied", "Camera access is blocked. Allow it in the browser settings for this site.");
+			case "missing": return l("grMedia.camera.missing", "No camera found on this device.");
+			case "busy": return l("grMedia.camera.busy", "The camera is busy in another application.");
+			case "insecure": return l("grMedia.camera.insecure", "The camera works only over HTTPS.");
+			case "error": return l("grMedia.camera.error", "The camera could not be started.");
+			default: return l("grMedia.camera.idle", "The camera is off.");
+		}
+	});
+	function _(e) {
+		f.value !== e && (f.value = e, c.onStatus?.(e));
+	}
+	function v() {
+		let e = c.video.value;
+		!e || e.videoWidth <= 0 || e.videoHeight <= 0 || (p.value = e.videoWidth / e.videoHeight);
+	}
+	function y() {
+		d.value?.getTracks().forEach((e) => e.stop()), d.value = null, p.value = null, c.video.value && (c.video.value.srcObject = null);
+	}
+	async function b() {
+		if (!(c.disabled() || f.value === "starting" || f.value === "live")) {
+			if (!s(navigator)) {
+				_("insecure");
+				return;
+			}
+			_("starting");
+			try {
+				let e = c.aspectRatio?.(), t = await navigator.mediaDevices.getUserMedia({
+					video: {
+						...c.deviceId() ? { deviceId: { exact: c.deviceId() } } : { facingMode: c.facing() },
+						...e ? { aspectRatio: e } : {}
+					},
+					audio: !1
+				});
+				d.value = t;
+				let n = c.video.value;
+				n && (n.srcObject = t, n.addEventListener("loadedmetadata", v, { once: !0 }), await n.play().catch(() => void 0), v()), _("live"), c.onStart?.(), u(l("grMedia.camera.live", "Camera is on"));
+			} catch (e) {
+				y(), _(o(e)), u(g.value, { politeness: "assertive" });
+			}
+		}
+	}
+	function x() {
+		d.value && (y(), _("idle"), c.onStop?.());
+	}
+	return t(y), {
+		status: f,
+		streamRatio: p,
+		frameRatio: h,
+		isLive: m,
+		message: g,
+		start: b,
+		stop: x
+	};
+}
+//#endregion
+export { c as i, o as n, s as r, l as t };

package/dist/components/GrCameraCapture/chunks/GrCameraCapture-t-uFTD9s.js

@@ -0,0 +1,134 @@
+import { t as e } from "../../../chunks/outputSize-D2FU4CbB.js";
+import { i as t, t as n } from "../../../chunks/useCameraStream-CPdm3r90.js";
+import { a as r, c as i, l as a, n as o, o as s, r as c, s as l, u } from "../../../chunks/config-DHLlFslI.js";
+import { computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createTextVNode as g, createVNode as _, defineComponent as v, normalizeClass as y, normalizeStyle as b, onMounted as x, openBlock as S, ref as C, renderSlot as w, toDisplayString as T, unref as E, withCtx as D } from "vue";
+import O from "@feugene/granularity/components/GrButton";
+import { useAnnouncer as k } from "@feugene/granularity/composables/useAnnouncer";
+import { useGrComponentSize as A } from "@feugene/granularity/composables/useGrComponentConfig";
+import { useGranularityTranslations as j } from "@feugene/granularity/composables/useGranularityTranslations";
+//#region src/components/GrCameraCapture/GrCameraCapture.vue?vue&type=script&setup=true&lang.ts
+var M = ["aria-label"], N = /* @__PURE__ */ v({
+	__name: "GrCameraCapture",
+	props: {
+		facing: { default: "user" },
+		deviceId: { default: void 0 },
+		aspectRatio: { default: void 0 },
+		autoStart: {
+			type: Boolean,
+			default: !1
+		},
+		mirror: {
+			type: Boolean,
+			default: void 0
+		},
+		output: { default: void 0 },
+		size: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		ariaLabel: { default: void 0 }
+	},
+	emits: [
+		"capture",
+		"start",
+		"stop",
+		"statusChange"
+	],
+	setup(v, { expose: N, emit: P }) {
+		let F = v, I = P, { t: L } = j(), { announce: R } = k(), z = A(() => F.size, { component: "GrCameraCapture" }), B = C(null), { frameRatio: V, isLive: H, message: U, start: W, status: G, stop: K } = n({
+			video: B,
+			disabled: () => F.disabled,
+			facing: () => F.facing,
+			deviceId: () => F.deviceId,
+			aspectRatio: () => F.aspectRatio,
+			onStatus: (e) => I("statusChange", e),
+			onStart: () => I("start"),
+			onStop: () => I("stop")
+		}), q = d(() => t(F.facing, F.mirror));
+		async function J() {
+			let t = B.value;
+			if (!t || !H.value) return null;
+			let n = {
+				sx: 0,
+				sy: 0,
+				sw: t.videoWidth,
+				sh: t.videoHeight
+			};
+			if (n.sw <= 0) return null;
+			let r = document.createElement("canvas"), i = e(n, F.output);
+			r.width = i.width, r.height = i.height;
+			let a = r.getContext("2d");
+			if (!a) return null;
+			a.drawImage(t, n.sx, n.sy, n.sw, n.sh, 0, 0, r.width, r.height);
+			let o = await new Promise((e) => {
+				r.toBlob(e, F.output?.type ?? "image/jpeg", F.output?.quality ?? .92);
+			});
+			return o && (I("capture", o), R(L("grMedia.camera.captured", "Photo taken"))), o;
+		}
+		return x(() => {
+			F.autoStart && W();
+		}), N({
+			start: W,
+			stop: K,
+			capture: J,
+			status: G
+		}), (e, t) => (S(), m("div", {
+			class: y(E(s)),
+			role: "group",
+			"aria-label": v.ariaLabel ?? E(L)("grMedia.camera.label", "Camera")
+		}, [h("div", {
+			class: y(E(c)),
+			style: b({ aspectRatio: String(E(V)) })
+		}, [h("video", {
+			ref_key: "videoEl",
+			ref: B,
+			class: y([E(u), q.value ? E(r) : ""]),
+			playsinline: "",
+			muted: "",
+			autoplay: ""
+		}, null, 2), E(H) ? p("", !0) : (S(), m("div", {
+			key: 0,
+			class: y(E(i))
+		}, [h("p", { class: y([E(a), E(l)[E(z)]]) }, T(E(U)), 3), E(G) !== "starting" && E(G) !== "insecure" && E(G) !== "missing" ? (S(), f(E(O), {
+			key: 0,
+			size: E(z),
+			disabled: v.disabled,
+			onClick: E(W)
+		}, {
+			default: D(() => [g(T(E(G) === "idle" ? E(L)("grMedia.camera.start", "Turn on camera") : E(L)("grMedia.camera.retry", "Try again")), 1)]),
+			_: 1
+		}, 8, [
+			"size",
+			"disabled",
+			"onClick"
+		])) : p("", !0)], 2))], 6), h("div", { class: y(E(o)) }, [w(e.$slots, "controls", {
+			status: E(G),
+			start: E(W),
+			stop: E(K),
+			capture: J
+		}, () => [_(E(O), {
+			size: E(z),
+			disabled: v.disabled || !E(H),
+			onClick: J
+		}, {
+			default: D(() => [g(T(E(L)("grMedia.camera.capture", "Take photo")), 1)]),
+			_: 1
+		}, 8, ["size", "disabled"]), E(H) ? (S(), f(E(O), {
+			key: 0,
+			variant: "outline",
+			size: E(z),
+			disabled: v.disabled,
+			onClick: E(K)
+		}, {
+			default: D(() => [g(T(E(L)("grMedia.camera.stop", "Turn off")), 1)]),
+			_: 1
+		}, 8, [
+			"size",
+			"disabled",
+			"onClick"
+		])) : p("", !0)])], 2)], 10, M));
+	}
+});
+//#endregion
+export { N as t };

package/dist/components/GrCameraCapture/index.js

@@ -1,3 +1,4 @@
-import { a as e, i as t, n, r, t as i } from "./chunks/GrCameraCapture-B9EPXm7r.js";
-import { i as a, t as o } from "../../chunks/config-CZ4ZDG0_.js";
-export { i as GrCameraCapture, i as default, n as cameraFrameRect, r as cameraStatusFromError, t as cameraSupported, o as grCameraCaptureConfig, a as grCameraCaptureSafelist, e as shouldMirrorPreview };
+import { i as e, n as t, r as n } from "../../chunks/useCameraStream-CPdm3r90.js";
+import { i as r, t as i } from "../../chunks/config-DHLlFslI.js";
+import { t as a } from "./chunks/GrCameraCapture-t-uFTD9s.js";
+export { a as GrCameraCapture, a as default, t as cameraStatusFromError, n as cameraSupported, i as grCameraCaptureConfig, r as grCameraCaptureSafelist, e as shouldMirrorPreview };

package/dist/components/GrCodeScanner/chunks/GrCodeScanner-BX147Gct.js

@@ -0,0 +1,162 @@
+import { t as e } from "../../../chunks/useCameraStream-CPdm3r90.js";
+import { a as t, c as n, l as r, n as ee, o as i, r as a, s as o, u as te } from "../../../chunks/config-DfJkKtIh.js";
+import { computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, defineComponent as p, normalizeClass as m, normalizeStyle as h, onBeforeUnmount as g, onMounted as ne, openBlock as _, ref as v, renderSlot as y, shallowRef as b, toDisplayString as x, unref as S, withCtx as C } from "vue";
+import w from "@feugene/granularity/components/GrButton";
+import { useAnnouncer as T } from "@feugene/granularity/composables/useAnnouncer";
+import { useGrComponentSize as E } from "@feugene/granularity/composables/useGrComponentConfig";
+import { useGranularityTranslations as D } from "@feugene/granularity/composables/useGranularityTranslations";
+//#region src/components/GrCodeScanner/codeDetection.ts
+function O(e = globalThis) {
+	return typeof e.BarcodeDetector == "function";
+}
+function k(e, t = globalThis) {
+	if (!O(t)) return null;
+	let n = t.BarcodeDetector, r = new n(e ? { formats: [...e] } : void 0);
+	return async (e) => (await r.detect(e)).map((e) => ({
+		value: e.rawValue,
+		format: e.format
+	}));
+}
+function A(e, t, n) {
+	if (n) return [...t];
+	let r = new Set(e.map((e) => `${e.format}:${e.value}`));
+	return t.filter((e) => !r.has(`${e.format}:${e.value}`));
+}
+//#endregion
+//#region src/components/GrCodeScanner/GrCodeScanner.vue?vue&type=script&setup=true&lang.ts
+var j = ["aria-label"], M = /* @__PURE__ */ p({
+	__name: "GrCodeScanner",
+	props: {
+		facing: { default: "environment" },
+		deviceId: { default: void 0 },
+		autoStart: {
+			type: Boolean,
+			default: !1
+		},
+		formats: { default: void 0 },
+		detector: {
+			type: Function,
+			default: void 0
+		},
+		interval: { default: 250 },
+		continuous: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		ariaLabel: { default: void 0 }
+	},
+	emits: [
+		"detect",
+		"start",
+		"stop",
+		"statusChange"
+	],
+	setup(p, { expose: M, emit: re }) {
+		let N = p, P = re, { t: F } = D(), { announce: I } = T(), L = E(() => N.size, { component: "GrCodeScanner" }), R = v(null), z = b(null), B = b([]), { frameRatio: V, isLive: H, message: U, start: W, status: G, stop: K } = e({
+			video: R,
+			disabled: () => N.disabled,
+			facing: () => N.facing,
+			deviceId: () => N.deviceId,
+			onStatus: (e) => P("statusChange", e),
+			onStart: () => {
+				B.value = [], ae(), P("start");
+			},
+			onStop: () => P("stop")
+		}), q = s(() => !N.detector && !O()), J = s(() => q.value ? F("grMedia.scanner.unsupported", "This browser cannot read codes. Pass a `detector` to enable it.") : U.value);
+		function Y() {
+			return N.detector ?? k(N.formats);
+		}
+		let X = null, Z = !1;
+		async function ie() {
+			let e = R.value;
+			if (!(!e || !H.value || N.disabled) && (z.value ??= Y(), z.value)) try {
+				let t = await z.value(e), n = A(B.value, t, N.continuous);
+				B.value = t, n.length > 0 && (P("detect", n), I(F("grMedia.scanner.detected", "Code recognised")));
+			} catch {}
+		}
+		function ae() {
+			if (Z) return;
+			Z = !0;
+			let e = async () => {
+				if (Z) {
+					if (await ie(), !Z || !H.value) {
+						X = null, Z = !1;
+						return;
+					}
+					X = setTimeout(() => void e(), N.interval);
+				}
+			};
+			X = setTimeout(() => void e(), N.interval);
+		}
+		function Q() {
+			Z = !1, X !== null && (clearTimeout(X), X = null);
+		}
+		ne(() => {
+			N.autoStart && W();
+		}), g(Q);
+		function $() {
+			Q(), K();
+		}
+		return M({
+			start: W,
+			stop: $,
+			status: G
+		}), (e, s) => (_(), u("div", {
+			class: m(S(i)),
+			role: "group",
+			"aria-label": p.ariaLabel ?? S(F)("grMedia.scanner.label", "Code scanner")
+		}, [d("div", {
+			class: m(S(a)),
+			style: h({ aspectRatio: String(S(V)) })
+		}, [
+			d("video", {
+				ref_key: "videoEl",
+				ref: R,
+				class: m(S(te)),
+				playsinline: "",
+				muted: "",
+				autoplay: ""
+			}, null, 2),
+			S(H) && !q.value ? (_(), u("div", {
+				key: 0,
+				class: m(S(t))
+			}, null, 2)) : l("", !0),
+			!S(H) || q.value ? (_(), u("div", {
+				key: 1,
+				class: m(S(n))
+			}, [d("p", { class: m([S(r), S(o)[S(L)]]) }, x(J.value), 3), !q.value && S(G) !== "starting" && S(G) !== "insecure" && S(G) !== "missing" ? (_(), c(S(w), {
+				key: 0,
+				size: S(L),
+				disabled: p.disabled,
+				onClick: S(W)
+			}, {
+				default: C(() => [f(x(S(G) === "idle" ? S(F)("grMedia.scanner.start", "Start scanning") : S(F)("grMedia.camera.retry", "Try again")), 1)]),
+				_: 1
+			}, 8, [
+				"size",
+				"disabled",
+				"onClick"
+			])) : l("", !0)], 2)) : l("", !0)
+		], 6), d("div", { class: m(S(ee)) }, [y(e.$slots, "controls", {
+			status: S(G),
+			start: S(W),
+			stop: $
+		}, () => [S(H) ? (_(), c(S(w), {
+			key: 0,
+			variant: "outline",
+			size: S(L),
+			disabled: p.disabled,
+			onClick: $
+		}, {
+			default: C(() => [f(x(S(F)("grMedia.scanner.stop", "Stop")), 1)]),
+			_: 1
+		}, 8, ["size", "disabled"])) : l("", !0)])], 2)], 10, j));
+	}
+});
+//#endregion
+export { O as i, k as n, A as r, M as t };

package/dist/components/GrCodeScanner/index.js

@@ -0,0 +1,3 @@
+import { i as e, n as t, r as n, t as r } from "./chunks/GrCodeScanner-BX147Gct.js";
+import { i, t as a } from "../../chunks/config-DfJkKtIh.js";
+export { r as GrCodeScanner, r as default, t as createNativeDetector, n as freshCodes, a as grCodeScannerConfig, i as grCodeScannerSafelist, e as nativeDetectorSupported };