@feugene/granularity-media 0.2.0 → 0.3.0

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/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/components/GrCameraCapture/chunks/GrCameraCapture-CoSuBEfS.js

@@ -0,0 +1,182 @@
+import { t as e } from "../../../chunks/outputSize-D2FU4CbB.js";
+import { a as t, c as n, l as r, n as i, o as a, r as o, s, u as c } from "../../../chunks/config-DHLlFslI.js";
+import { computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, defineComponent as g, normalizeClass as _, normalizeStyle as v, onBeforeUnmount as y, onMounted as b, openBlock as x, ref as S, renderSlot as ee, shallowRef as C, toDisplayString as w, unref as T, withCtx as E } from "vue";
+import D from "@feugene/granularity/components/GrButton";
+import { useAnnouncer as O } from "@feugene/granularity/composables/useAnnouncer";
+import { useGrComponentSize as te } from "@feugene/granularity/composables/useGrComponentConfig";
+import { useGranularityTranslations as ne } from "@feugene/granularity/composables/useGranularityTranslations";
+//#region src/components/GrCameraCapture/cameraState.ts
+function k(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 A(e) {
+	return typeof e?.mediaDevices?.getUserMedia == "function";
+}
+function j(e, t) {
+	return t ?? e === "user";
+}
+//#endregion
+//#region src/components/GrCameraCapture/GrCameraCapture.vue?vue&type=script&setup=true&lang.ts
+var M = ["aria-label"], N = /* @__PURE__ */ g({
+	__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(g, { expose: N, emit: P }) {
+		let F = g, I = P, { t: L } = ne(), { announce: R } = O(), z = te(() => F.size, { component: "GrCameraCapture" }), B = S(null), V = C(null), H = S("idle"), U = S(null), W = l(() => U.value ?? 4 / 3), G = l(() => j(F.facing, F.mirror)), K = l(() => H.value === "live"), q = l(() => {
+			switch (H.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 J(e) {
+			H.value !== e && (H.value = e, I("statusChange", e));
+		}
+		function Y() {
+			let e = B.value;
+			!e || e.videoWidth <= 0 || e.videoHeight <= 0 || (U.value = e.videoWidth / e.videoHeight);
+		}
+		function X() {
+			V.value?.getTracks().forEach((e) => e.stop()), V.value = null, U.value = null, B.value && (B.value.srcObject = null);
+		}
+		async function Z() {
+			if (!(F.disabled || H.value === "starting" || H.value === "live")) {
+				if (!A(navigator)) {
+					J("insecure");
+					return;
+				}
+				J("starting");
+				try {
+					let e = await navigator.mediaDevices.getUserMedia({
+						video: {
+							...F.deviceId ? { deviceId: { exact: F.deviceId } } : { facingMode: F.facing },
+							...F.aspectRatio ? { aspectRatio: F.aspectRatio } : {}
+						},
+						audio: !1
+					});
+					V.value = e, B.value && (B.value.srcObject = e, B.value.addEventListener("loadedmetadata", Y, { once: !0 }), await B.value.play().catch(() => void 0), Y()), J("live"), I("start"), R(L("grMedia.camera.live", "Camera is on"));
+				} catch (e) {
+					X(), J(k(e)), R(q.value, { politeness: "assertive" });
+				}
+			}
+		}
+		function Q() {
+			V.value && (X(), J("idle"), I("stop"));
+		}
+		async function $() {
+			let t = B.value;
+			if (!t || !K.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 b(() => {
+			F.autoStart && Z();
+		}), y(X), N({
+			start: Z,
+			stop: Q,
+			capture: $,
+			status: H
+		}), (e, l) => (x(), f("div", {
+			class: _(T(a)),
+			role: "group",
+			"aria-label": g.ariaLabel ?? T(L)("grMedia.camera.label", "Camera")
+		}, [p("div", {
+			class: _(T(o)),
+			style: v({ aspectRatio: String(W.value) })
+		}, [p("video", {
+			ref_key: "videoEl",
+			ref: B,
+			class: _([T(c), G.value ? T(t) : ""]),
+			playsinline: "",
+			muted: "",
+			autoplay: ""
+		}, null, 2), K.value ? d("", !0) : (x(), f("div", {
+			key: 0,
+			class: _(T(n))
+		}, [p("p", { class: _([T(r), T(s)[T(z)]]) }, w(q.value), 3), H.value !== "starting" && H.value !== "insecure" && H.value !== "missing" ? (x(), u(T(D), {
+			key: 0,
+			size: T(z),
+			disabled: g.disabled,
+			onClick: Z
+		}, {
+			default: E(() => [m(w(H.value === "idle" ? T(L)("grMedia.camera.start", "Turn on camera") : T(L)("grMedia.camera.retry", "Try again")), 1)]),
+			_: 1
+		}, 8, ["size", "disabled"])) : d("", !0)], 2))], 6), p("div", { class: _(T(i)) }, [ee(e.$slots, "controls", {
+			status: H.value,
+			start: Z,
+			stop: Q,
+			capture: $
+		}, () => [h(T(D), {
+			size: T(z),
+			disabled: g.disabled || !K.value,
+			onClick: $
+		}, {
+			default: E(() => [m(w(T(L)("grMedia.camera.capture", "Take photo")), 1)]),
+			_: 1
+		}, 8, ["size", "disabled"]), K.value ? (x(), u(T(D), {
+			key: 0,
+			variant: "outline",
+			size: T(z),
+			disabled: g.disabled,
+			onClick: Q
+		}, {
+			default: E(() => [m(w(T(L)("grMedia.camera.stop", "Turn off")), 1)]),
+			_: 1
+		}, 8, ["size", "disabled"])) : d("", !0)])], 2)], 10, M));
+	}
+});
+//#endregion
+export { j as i, k as n, A as r, N as t };

package/dist/components/GrCameraCapture/index.js

@@ -1,3 +1,3 @@
-import { a as e, i as t, n, r, t as i } from "./chunks/GrCameraCapture-DJKFrVfw.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, t as r } from "./chunks/GrCameraCapture-CoSuBEfS.js";
+import { i, t as a } from "../../chunks/config-DHLlFslI.js";
+export { r as GrCameraCapture, r as default, t as cameraStatusFromError, n as cameraSupported, a as grCameraCaptureConfig, i as grCameraCaptureSafelist, e as shouldMirrorPreview };

package/dist/components/GrImageCrop/chunks/{GrImageCrop-Fo2qrX2n.js → GrImageCrop-g1StRUis.js}

@@ -1,43 +1,44 @@
-import { c as e, d as t, f as n, i as r, l as i, n as a, o, r as s, s as c, u as l } from "../../../chunks/config-Be_Mh801.js";
-import { Fragment as u, computed as d, createCommentVNode as ee, createElementBlock as f, createElementVNode as p, createVNode as te, defineComponent as m, normalizeClass as h, normalizeStyle as g, onBeforeUnmount as _, onMounted as ne, openBlock as v, ref as y, renderSlot as b, shallowRef as x, toDisplayString as re, unref as S, watch as ie } from "vue";
-import { useGrComponentSize as ae } from "@feugene/granularity/composables/useGrComponentConfig";
-import { useGranularityTranslations as oe } from "@feugene/granularity/composables/useGranularityTranslations";
-import se from "@feugene/granularity/components/GrSlider";
-import { useDragGesture as ce } from "@feugene/granularity/composables/useDragGesture";
+import { t as e } from "../../../chunks/outputSize-D2FU4CbB.js";
+import { c as t, d as n, f as r, i, l as a, n as o, o as ee, r as te, s, u as ne } from "../../../chunks/config-Be_Mh801.js";
+import { Fragment as c, computed as l, createCommentVNode as re, createElementBlock as u, createElementVNode as d, createVNode as ie, defineComponent as f, normalizeClass as p, normalizeStyle as m, onBeforeUnmount as ae, onMounted as oe, openBlock as h, ref as g, renderSlot as _, shallowRef as se, toDisplayString as v, unref as y, watch as ce } from "vue";
+import { useGrComponentSize as le } from "@feugene/granularity/composables/useGrComponentConfig";
+import { useGranularityTranslations as ue } from "@feugene/granularity/composables/useGranularityTranslations";
+import b from "@feugene/granularity/components/GrSlider";
+import { useDragGesture as de } from "@feugene/granularity/composables/useDragGesture";
 //#region src/components/GrImageCrop/cropGeometry.ts
-function C(e, t) {
+function x(e, t) {
 	return e.width <= 0 || e.height <= 0 ? 1 : Math.max(t.width / e.width, t.height / e.height);
 }
-function w(e, t, n) {
-	let r = C(e, t) * n;
+function S(e, t, n) {
+	let r = x(e, t) * n;
 	return {
 		width: e.width * r,
 		height: e.height * r
 	};
 }
-function T(e, t, n) {
-	let r = w(e, t, n);
+function C(e, t, n) {
+	let r = S(e, t, n);
 	return {
 		x: Math.max(0, (r.width - t.width) / 2),
 		y: Math.max(0, (r.height - t.height) / 2)
 	};
 }
-function E(e, t, n, r) {
-	let i = T(t, n, r);
+function w(e, t, n, r) {
+	let i = C(t, n, r);
 	return {
 		x: Math.min(i.x, Math.max(-i.x, e.x)),
 		y: Math.min(i.y, Math.max(-i.y, e.y))
 	};
 }
-function D(e, t, n, r) {
-	let i = C(e, t) * n;
+function T(e, t, n, r) {
+	let i = x(e, t) * n;
 	if (i <= 0) return {
 		sx: 0,
 		sy: 0,
 		sw: 0,
 		sh: 0
 	};
-	let a = E(r, e, t, n), o = w(e, t, n);
+	let a = w(r, e, t, n), o = S(e, t, n);
 	return {
 		sx: (o.width - t.width) / 2 / i - a.x / i,
 		sy: (o.height - t.height) / 2 / i - a.y / i,
@@ -45,7 +46,7 @@ function D(e, t, n, r) {
 		sh: t.height / i
 	};
 }
-function O(e, t) {
+function E(e, t) {
 	return {
 		width: e,
 		height: e / (t > 0 ? t : 1)
@@ -53,11 +54,11 @@ function O(e, t) {
 }
 //#endregion
 //#region src/components/GrImageCrop/GrImageCrop.vue?vue&type=script&setup=true&lang.ts
-var le = ["aria-label"], ue = [
+var D = ["aria-label"], O = [
 	"tabindex",
 	"aria-label",
 	"aria-disabled"
-], de = ["src"], k = 12, A = .15, j = /* @__PURE__ */ m({
+], fe = ["src"], k = 12, A = .15, j = /* @__PURE__ */ f({
 	__name: "GrImageCrop",
 	props: {
 		src: { default: null },
@@ -79,14 +80,14 @@ var le = ["aria-label"], ue = [
 		"load",
 		"error"
 	],
-	setup(m, { expose: C, emit: w }) {
-		let T = m, j = w, { t: M } = oe(), N = ae(() => T.size, { component: "GrImageCrop" }), P = y(null), F = x(null), I = y({
+	setup(f, { expose: x, emit: S }) {
+		let C = f, j = S, { t: M } = ue(), N = le(() => C.size, { component: "GrImageCrop" }), P = g(null), F = se(null), I = g({
 			width: 0,
 			height: 0
-		}), L = y(0), R = y({
+		}), L = g(0), R = g({
 			x: 0,
 			y: 0
-		}), z = y(null), B = d(() => O(L.value, T.aspectRatio)), V = d(() => F.value !== null && I.value.width > 0), H = d(() => Math.min(T.maxZoom, Math.max(1, T.zoom))), fe = d(() => {
+		}), z = g(null), B = l(() => E(L.value, C.aspectRatio)), V = l(() => F.value !== null && I.value.width > 0), H = l(() => Math.min(C.maxZoom, Math.max(1, C.zoom))), pe = l(() => {
 			let e = B.value.width > 0 && I.value.width > 0 ? Math.max(B.value.width / I.value.width, B.value.height / I.value.height) * H.value : 1;
 			return {
 				width: `${I.value.width}px`,
@@ -95,21 +96,21 @@ var le = ["aria-label"], ue = [
 			};
 		});
 		function U() {
-			return D(I.value, B.value, H.value, R.value);
+			return T(I.value, B.value, H.value, R.value);
 		}
 		function W() {
 			V.value && j("change", U());
 		}
 		function G(e, t) {
-			T.disabled || !V.value || (R.value = E({
+			C.disabled || !V.value || (R.value = w({
 				x: R.value.x + e,
 				y: R.value.y + t
 			}, I.value, B.value, H.value), W());
 		}
 		function K(e) {
-			if (T.disabled) return;
-			let t = Math.min(T.maxZoom, Math.max(1, e));
-			j("update:zoom", t), R.value = E(R.value, I.value, B.value, t), W();
+			if (C.disabled) return;
+			let t = Math.min(C.maxZoom, Math.max(1, e));
+			j("update:zoom", t), R.value = w(R.value, I.value, B.value, t), W();
 		}
 		function q() {
 			R.value = {
@@ -117,14 +118,14 @@ var le = ["aria-label"], ue = [
 				y: 0
 			}, j("update:zoom", 1), W();
 		}
-		let J = y({
+		let J = g({
 			x: 0,
 			y: 0
-		}), Y = y({
+		}), Y = g({
 			x: 0,
 			y: 0
-		}), X = ce({
-			disabled: () => T.disabled || !V.value,
+		}), X = de({
+			disabled: () => C.disabled || !V.value,
 			onStart: (e) => {
 				J.value = {
 					x: e.clientX,
@@ -132,7 +133,7 @@ var le = ["aria-label"], ue = [
 				}, Y.value = { ...R.value };
 			},
 			onMove: (e) => {
-				R.value = E({
+				R.value = w({
 					x: Y.value.x + (e.clientX - J.value.x),
 					y: Y.value.y + (e.clientY - J.value.y)
 				}, I.value, B.value, H.value);
@@ -142,10 +143,10 @@ var le = ["aria-label"], ue = [
 				R.value = Y.value;
 			}
 		});
-		function pe(e) {
-			T.disabled || !V.value || (e.preventDefault(), K(H.value + (e.deltaY < 0 ? A : -.15)));
-		}
 		function me(e) {
+			C.disabled || !V.value || (e.preventDefault(), K(H.value + (e.deltaY < 0 ? A : -.15)));
+		}
+		function he(e) {
 			let t = {
 				ArrowLeft: () => G(k, 0),
 				ArrowRight: () => G(-12, 0),
@@ -161,7 +162,7 @@ var le = ["aria-label"], ue = [
 		function Z() {
 			z.value &&= (URL.revokeObjectURL(z.value), null);
 		}
-		function he(e) {
+		function ge(e) {
 			if (!e) return null;
 			if (typeof e == "string") return e;
 			let t = URL.createObjectURL(e);
@@ -169,7 +170,7 @@ var le = ["aria-label"], ue = [
 		}
 		function Q(e) {
 			Z();
-			let t = he(e);
+			let t = ge(e);
 			if (!t) {
 				F.value = null, I.value = {
 					width: 0,
@@ -189,83 +190,83 @@ var le = ["aria-label"], ue = [
 			}), n.addEventListener("error", (e) => j("error", e)), n.src = t;
 		}
 		let $ = null;
-		ne(() => {
+		oe(() => {
 			P.value && (L.value = P.value.clientWidth, $ = new ResizeObserver(([e]) => {
-				L.value = e?.contentRect.width ?? 0, R.value = E(R.value, I.value, B.value, H.value);
-			}), $.observe(P.value)), Q(T.src);
-		}), _(() => {
+				L.value = e?.contentRect.width ?? 0, R.value = w(R.value, I.value, B.value, H.value);
+			}), $.observe(P.value)), Q(C.src);
+		}), ae(() => {
 			$?.disconnect(), $ = null, Z();
-		}), ie(() => T.src, (e) => Q(e));
-		async function ge() {
-			let e = F.value;
-			if (!e || !V.value) return null;
-			let t = U(), n = document.createElement("canvas");
-			n.width = Math.max(1, Math.round(T.output?.width ?? t.sw)), n.height = Math.max(1, Math.round(T.output?.height ?? t.sh));
-			let r = n.getContext("2d");
-			if (!r) return null;
-			r.drawImage(e, t.sx, t.sy, t.sw, t.sh, 0, 0, n.width, n.height);
+		}), ce(() => C.src, (e) => Q(e));
+		async function _e() {
+			let t = F.value;
+			if (!t || !V.value) return null;
+			let n = U(), r = document.createElement("canvas"), i = e(n, C.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);
 			try {
 				return await new Promise((e) => {
-					n.toBlob(e, T.output?.type ?? "image/png", T.output?.quality);
+					r.toBlob(e, C.output?.type ?? "image/png", C.output?.quality);
 				});
 			} catch (e) {
 				return typeof process < "u" && process.env.NODE_ENV !== "production" && console.warn("[granularity-media] GrImageCrop: экспорт кадра запрещён политикой источника. Картинка приехала с другого домена без заголовка `Access-Control-Allow-Origin`, и холст стал непригоден для чтения."), j("error", e), null;
 			}
 		}
-		return C({
-			crop: ge,
+		return x({
+			crop: _e,
 			reset: q,
 			rect: U
-		}), (d, _) => (v(), f("div", {
-			class: h(S(i)),
+		}), (e, l) => (h(), u("div", {
+			class: p(y(a)),
 			role: "group",
-			"aria-label": m.ariaLabel ?? S(M)("grMedia.imageCrop.label", "Image crop")
-		}, [p("div", {
+			"aria-label": f.ariaLabel ?? y(M)("grMedia.imageCrop.label", "Image crop")
+		}, [d("div", {
 			ref_key: "viewportEl",
 			ref: P,
 			role: "application",
-			class: h([S(n), V.value ? "" : [S(r), S(l)[S(N)]]]),
-			style: g(V.value ? { aspectRatio: String(m.aspectRatio) } : void 0),
-			tabindex: m.disabled || !V.value ? -1 : 0,
-			"aria-label": S(M)("grMedia.imageCrop.frame", "Frame: arrow keys move the image, plus and minus zoom"),
-			"aria-disabled": m.disabled || void 0,
-			onPointerdown: _[0] ||= (...e) => S(X).start && S(X).start(...e),
-			onWheel: pe,
-			onKeydown: me
-		}, [V.value ? (v(), f(u, { key: 0 }, [p("img", {
+			class: p([y(r), V.value ? "" : [y(i), y(ne)[y(N)]]]),
+			style: m(V.value ? { aspectRatio: String(f.aspectRatio) } : void 0),
+			tabindex: f.disabled || !V.value ? -1 : 0,
+			"aria-label": y(M)("grMedia.imageCrop.frame", "Frame: arrow keys move the image, plus and minus zoom"),
+			"aria-disabled": f.disabled || void 0,
+			onPointerdown: l[0] ||= (...e) => y(X).start && y(X).start(...e),
+			onWheel: me,
+			onKeydown: he
+		}, [V.value ? (h(), u(c, { key: 0 }, [d("img", {
 			src: F.value.src,
 			alt: "",
-			class: h([S(o), S(X).isDragging.value ? "" : S(c)]),
-			style: g(fe.value)
-		}, null, 14, de), m.shape === "circle" ? (v(), f("div", {
+			class: p([y(ee), y(X).isDragging.value ? "" : y(s)]),
+			style: m(pe.value)
+		}, null, 14, fe), f.shape === "circle" ? (h(), u("div", {
 			key: 0,
-			class: h(S(a))
-		}, null, 2)) : (v(), f("div", {
+			class: p(y(o))
+		}, null, 2)) : (h(), u("div", {
 			key: 1,
-			class: h(S(e))
-		}, null, 2))], 64)) : b(d.$slots, "empty", {}, () => [p("span", { class: h(S(t)[S(N)]) }, re(S(M)("grMedia.imageCrop.empty", "No image selected")), 3)], void 0, 1)], 46, ue), V.value ? (v(), f("div", {
+			class: p(y(t))
+		}, null, 2))], 64)) : _(e.$slots, "empty", {}, () => [d("span", { class: p(y(n)[y(N)]) }, v(y(M)("grMedia.imageCrop.empty", "No image selected")), 3)], void 0, 1)], 46, O), V.value ? (h(), u("div", {
 			key: 0,
-			class: h(S(s))
-		}, [b(d.$slots, "controls", {
+			class: p(y(te))
+		}, [_(e.$slots, "controls", {
 			zoom: H.value,
 			setZoom: K
-		}, () => [te(S(se), {
+		}, () => [ie(y(b), {
 			"model-value": H.value,
 			min: 1,
-			max: m.maxZoom,
+			max: f.maxZoom,
 			step: .01,
-			size: S(N),
-			disabled: m.disabled,
-			"aria-label": S(M)("grMedia.imageCrop.zoom", "Zoom"),
-			"onUpdate:modelValue": _[1] ||= (e) => K(Number(e))
+			size: y(N),
+			disabled: f.disabled,
+			"aria-label": y(M)("grMedia.imageCrop.zoom", "Zoom"),
+			"onUpdate:modelValue": l[1] ||= (e) => K(Number(e))
 		}, null, 8, [
 			"model-value",
 			"max",
 			"size",
 			"disabled",
 			"aria-label"
-		])])], 2)) : ee("", !0)], 10, le));
+		])])], 2)) : re("", !0)], 10, D));
 	}
 });
 //#endregion
-export { w as a, D as i, E as n, T as o, C as r, O as s, j as t };
+export { S as a, T as i, w as n, C as o, x as r, E as s, j as t };

package/dist/components/GrImageCrop/index.js

@@ -1,3 +1,3 @@
-import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./chunks/GrImageCrop-Fo2qrX2n.js";
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./chunks/GrImageCrop-g1StRUis.js";
 import { a as s, t as c } from "../../chunks/config-Be_Mh801.js";
 export { o as GrImageCrop, o as default, n as clampOffset, i as coverScale, t as cropRect, e as displaySize, c as grImageCropConfig, s as grImageCropSafelist, r as offsetBounds, a as viewportFor };

package/dist/granular-provider.js

@@ -1,4 +1,4 @@
-import { t as e } from "./chunks/config-CZ4ZDG0_.js";
+import { t as e } from "./chunks/config-DHLlFslI.js";
 import { t } from "./chunks/config-Be_Mh801.js";
 import { defineGranularProvider as n, resolvePackageBaseUrl as r } from "@feugene/unocss-preset-granular/contract";
 import { granularityProvider as i } from "@feugene/granularity/granular-provider";

package/dist/index.js

@@ -1,5 +1,5 @@
-import { a as e, i as t, n, r, t as i } from "./components/GrCameraCapture/chunks/GrCameraCapture-DJKFrVfw.js";
-import { i as a, t as o } from "./chunks/config-CZ4ZDG0_.js";
-import { a as s, i as c, n as l, o as u, r as d, s as f, t as p } from "./components/GrImageCrop/chunks/GrImageCrop-Fo2qrX2n.js";
-import { a as m, t as h } from "./chunks/config-Be_Mh801.js";
-export { i as GrCameraCapture, p as GrImageCrop, n as cameraFrameRect, r as cameraStatusFromError, t as cameraSupported, l as clampOffset, d as coverScale, c as cropRect, s as displaySize, o as grCameraCaptureConfig, a as grCameraCaptureSafelist, h as grImageCropConfig, m as grImageCropSafelist, u as offsetBounds, e as shouldMirrorPreview, f as viewportFor };
+import { i as e, n as t, r as n, t as r } from "./components/GrCameraCapture/chunks/GrCameraCapture-CoSuBEfS.js";
+import { i, t as a } from "./chunks/config-DHLlFslI.js";
+import { a as o, i as s, n as c, o as l, r as u, s as d, t as f } from "./components/GrImageCrop/chunks/GrImageCrop-g1StRUis.js";
+import { a as p, t as m } from "./chunks/config-Be_Mh801.js";
+export { r as GrCameraCapture, f as GrImageCrop, t as cameraStatusFromError, n as cameraSupported, c as clampOffset, u as coverScale, s as cropRect, o as displaySize, a as grCameraCaptureConfig, i as grCameraCaptureSafelist, m as grImageCropConfig, p as grImageCropSafelist, l as offsetBounds, e as shouldMirrorPreview, d as viewportFor };

package/dist/types/components/GrCameraCapture/GrCameraCapture.vue.d.ts

@@ -11,6 +11,14 @@ export interface GrCameraCaptureProps {
     facing?: GrCameraFacing;
     /** Конкретное устройство, если приложение его уже выбрало. */
     deviceId?: string;
+    /**
+     * Пожелание камере: какое соотношение сторон запросить у устройства.
+     *
+     * Это **не обрезка**. Камера, которая умеет запрошенное, отдаст его сама;
+     * та, что не умеет, отдаст своё — и показан, и снят будет её настоящий кадр.
+     * Нужен ровно квадрат — это `GrImageCrop` после съёмки.
+     */
+    aspectRatio?: number;
     /**
      * Включать камеру сразу.
      *
@@ -18,7 +26,6 @@ export interface GrCameraCaptureProps {
      * отклоняют не глядя, а второй раз браузер уже не спросит.
      */
     autoStart?: boolean;
-    aspectRatio?: number;
     /** Зеркалить превью. По умолчанию — только фронтальную камеру. */
     mirror?: boolean;
     output?: GrCameraCaptureOutput;
@@ -44,7 +51,12 @@ type __VLS_Slots = {
 declare function start(): Promise<void>;
 declare function stop(): void;
 /**
- * Снимок текущего кадра.
+ * Снимок текущего кадра — целиком, без среза.
+ *
+ * Камеры на разных устройствах отдают разные размеры и соотношения, поэтому
+ * подгонять кадр под окно бессмысленно: на одном телефоне срезалось бы одно, на
+ * другом другое. Снимок повторяет то, что показывало превью, а обрезка под
+ * нужное место — работа `GrImageCrop`.
  *
  * Зеркало превью сюда **не переносится**: на снимке оказывается то, что было
  * перед камерой. Иначе текст на визитке или в документе уехал бы в зазеркалье —
@@ -55,7 +67,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     facing: string;
     deviceId: undefined;
     autoStart: boolean;
-    aspectRatio: number;
+    aspectRatio: undefined;
     mirror: undefined;
     output: undefined;
     size: undefined;
@@ -75,7 +87,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     facing: string;
     deviceId: undefined;
     autoStart: boolean;
-    aspectRatio: number;
+    aspectRatio: undefined;
     mirror: undefined;
     output: undefined;
     size: undefined;
@@ -89,8 +101,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>, {
     facing: GrCameraFacing;
     deviceId: string;
-    autoStart: boolean;
     aspectRatio: number;
+    autoStart: boolean;
     mirror: boolean;
     output: GrCameraCaptureOutput;
     size: GrCameraCaptureSize;

package/dist/types/components/GrCameraCapture/cameraState.d.ts

@@ -48,20 +48,3 @@ export declare function cameraSupported(navigatorLike: Pick<Navigator, 'mediaDev
  * уедет в зазеркалье — а снимают ими ровно это.
  */
 export declare function shouldMirrorPreview(facing: 'user' | 'environment', mirror: boolean | undefined): boolean;
-export interface GrCameraFrameRect {
-    sx: number;
-    sy: number;
-    sw: number;
-    sh: number;
-}
-/**
- * Какая часть кадра камеры попадёт в снимок при заданном соотношении сторон.
- *
- * Камера отдаёт своё соотношение (обычно 4:3 или 16:9), а приложению нужно
- * своё. Лишнее срезается по центру — так же, как это делает `object-fit: cover`
- * в превью: снимок обязан совпасть с тем, что пользователь видел.
- */
-export declare function cameraFrameRect(frame: {
-    width: number;
-    height: number;
-}, aspectRatio: number): GrCameraFrameRect;

package/dist/types/components/GrCameraCapture/grCameraCaptureStyles.d.ts

@@ -2,8 +2,12 @@ export type GrCameraCaptureSize = 'xs' | 'sm' | 'md' | 'lg';
 export type GrCameraFacing = 'user' | 'environment';
 export declare const rootClass = "grid gap-2";
 export declare const frameClass = "relative w-full overflow-hidden rounded-[var(--gr-radius-md)] border border-[var(--gr-brd)] bg-[var(--gr-muted)]";
-/** Превью покрывает рамку целиком: снимок берётся тем же `cover`, что и показ. */
-export declare const videoClass = "h-full w-full object-cover";
+/**
+ * Превью **вписывается**, а не покрывает: кадр показывается целиком, в своих
+ * пропорциях. При совпадающей рамке разницы нет, но между стартом и первым
+ * кадром рамка ещё держит запасные 4:3 — и `cover` срезал бы картинку.
+ */
+export declare const videoClass = "h-full w-full object-contain";
 export declare const mirroredClass = "scale-x-[-1]";
 /**
  * Подложка состояния поверх рамки. Появление плавное: отказ и ошибка приходят

package/dist/types/components/GrCameraCapture/index.d.ts

@@ -1,7 +1,7 @@
 export { default } from './GrCameraCapture.vue';
 export { default as GrCameraCapture } from './GrCameraCapture.vue';
-export type { GrCameraFrameRect, GrCameraStatus } from './cameraState';
-export { cameraFrameRect, cameraStatusFromError, cameraSupported, shouldMirrorPreview } from './cameraState';
+export type { GrCameraStatus } from './cameraState';
+export { cameraStatusFromError, cameraSupported, shouldMirrorPreview } from './cameraState';
 export { grCameraCaptureConfig } from './config';
 export type { GrCameraCaptureConfigurableProps } from './defaults';
 export type { GrCameraCaptureEmits, GrCameraCaptureOutput, GrCameraCaptureProps } from './GrCameraCapture.vue';

package/dist/types/components/GrImageCrop/GrImageCrop.vue.d.ts

@@ -85,12 +85,12 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     ariaLabel: undefined;
 }>>> & Readonly<{
     onError?: ((error: unknown) => any) | undefined;
-    "onUpdate:zoom"?: ((value: number) => any) | undefined;
     onChange?: ((rect: GrCropRect) => any) | undefined;
     onLoad?: ((size: {
         width: number;
         height: number;
     }) => any) | undefined;
+    "onUpdate:zoom"?: ((value: number) => any) | undefined;
 }>, {
     aspectRatio: number;
     output: GrImageCropOutput;

package/dist/types/internal/__tests__/outputSize.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/internal/outputSize.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Размер результата по заданной части `output`.
+ *
+ * Ловушка, ради которой это отдельная функция: задать **одну** сторону —
+ * обычное дело («аватар шириной 256»), и вторая обязана считаться из
+ * соотношения захваченной области. Взятая из исходника, она даёт растянутую
+ * картинку: кадр камеры 640×480 при `output.width = 800` превращался в холст
+ * 800×480, то есть в изображение, растянутое по горизонтали на четверть.
+ *
+ * Обе стороны заданы — это **габарит**, а не точный размер: кадр вписывается в
+ * него, сохраняя свои пропорции. Взять их буквально значило бы растянуть
+ * картинку, когда соотношения не совпали, — а пропорции съёмки в этом пакете
+ * не искажаются никогда.
+ */
+export interface GrOutputRequest {
+    width?: number;
+    height?: number;
+}
+export interface GrOutputSize {
+    width: number;
+    height: number;
+}
+export declare function outputSize(area: {
+    sw: number;
+    sh: number;
+}, output?: GrOutputRequest): GrOutputSize;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@feugene/granularity-media",
   "description": "Media components for @feugene/granularity: image cropping, camera capture, code scanning and video playback.",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "license": "SEE LICENSE IN LICENSE",
   "author": {
     "name": "Evgeniy Fureev",

package/dist/components/GrCameraCapture/chunks/GrCameraCapture-DJKFrVfw.js

@@ -1,197 +0,0 @@
-import { a as e, c as t, l as n, n as r, o as i, r as a, s as o, u as s } from "../../../chunks/config-CZ4ZDG0_.js";
-import { computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, normalizeClass as g, normalizeStyle as _, onBeforeUnmount as v, onMounted as y, openBlock as b, ref as x, renderSlot as S, shallowRef as C, toDisplayString as w, unref as T, withCtx as E } from "vue";
-import D from "@feugene/granularity/components/GrButton";
-import { useAnnouncer as O } from "@feugene/granularity/composables/useAnnouncer";
-import { useGrComponentSize as k } from "@feugene/granularity/composables/useGrComponentConfig";
-import { useGranularityTranslations as A } from "@feugene/granularity/composables/useGranularityTranslations";
-//#region src/components/GrCameraCapture/cameraState.ts
-function j(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 M(e) {
-	return typeof e?.mediaDevices?.getUserMedia == "function";
-}
-function N(e, t) {
-	return t ?? e === "user";
-}
-function P(e, t) {
-	let n = t > 0 ? t : 1;
-	if (e.width <= 0 || e.height <= 0) return {
-		sx: 0,
-		sy: 0,
-		sw: 0,
-		sh: 0
-	};
-	if (e.width / e.height > n) {
-		let t = e.height * n;
-		return {
-			sx: (e.width - t) / 2,
-			sy: 0,
-			sw: t,
-			sh: e.height
-		};
-	}
-	let r = e.width / n;
-	return {
-		sx: 0,
-		sy: (e.height - r) / 2,
-		sw: e.width,
-		sh: r
-	};
-}
-//#endregion
-//#region src/components/GrCameraCapture/GrCameraCapture.vue?vue&type=script&setup=true&lang.ts
-var F = ["aria-label"], I = /* @__PURE__ */ h({
-	__name: "GrCameraCapture",
-	props: {
-		facing: { default: "user" },
-		deviceId: { default: void 0 },
-		autoStart: {
-			type: Boolean,
-			default: !1
-		},
-		aspectRatio: { default: 4 / 3 },
-		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(h, { expose: I, emit: L }) {
-		let R = h, z = L, { t: B } = A(), { announce: V } = O(), H = k(() => R.size, { component: "GrCameraCapture" }), U = x(null), W = C(null), G = x("idle"), K = c(() => N(R.facing, R.mirror)), q = c(() => G.value === "live"), J = c(() => {
-			switch (G.value) {
-				case "starting": return B("grMedia.camera.starting", "Requesting camera access…");
-				case "denied": return B("grMedia.camera.denied", "Camera access is blocked. Allow it in the browser settings for this site.");
-				case "missing": return B("grMedia.camera.missing", "No camera found on this device.");
-				case "busy": return B("grMedia.camera.busy", "The camera is busy in another application.");
-				case "insecure": return B("grMedia.camera.insecure", "The camera works only over HTTPS.");
-				case "error": return B("grMedia.camera.error", "The camera could not be started.");
-				default: return B("grMedia.camera.idle", "The camera is off.");
-			}
-		});
-		function Y(e) {
-			G.value !== e && (G.value = e, z("statusChange", e));
-		}
-		function X() {
-			W.value?.getTracks().forEach((e) => e.stop()), W.value = null, U.value && (U.value.srcObject = null);
-		}
-		async function Z() {
-			if (!(R.disabled || G.value === "starting" || G.value === "live")) {
-				if (!M(navigator)) {
-					Y("insecure");
-					return;
-				}
-				Y("starting");
-				try {
-					let e = await navigator.mediaDevices.getUserMedia({
-						video: R.deviceId ? { deviceId: { exact: R.deviceId } } : { facingMode: R.facing },
-						audio: !1
-					});
-					W.value = e, U.value && (U.value.srcObject = e, await U.value.play().catch(() => void 0)), Y("live"), z("start"), V(B("grMedia.camera.live", "Camera is on"));
-				} catch (e) {
-					X(), Y(j(e)), V(J.value, { politeness: "assertive" });
-				}
-			}
-		}
-		function Q() {
-			W.value && (X(), Y("idle"), z("stop"));
-		}
-		async function $() {
-			let e = U.value;
-			if (!e || !q.value) return null;
-			let t = P({
-				width: e.videoWidth,
-				height: e.videoHeight
-			}, R.aspectRatio);
-			if (t.sw <= 0) return null;
-			let n = document.createElement("canvas");
-			n.width = Math.max(1, Math.round(R.output?.width ?? t.sw)), n.height = Math.max(1, Math.round(R.output?.height ?? t.sh));
-			let r = n.getContext("2d");
-			if (!r) return null;
-			r.drawImage(e, t.sx, t.sy, t.sw, t.sh, 0, 0, n.width, n.height);
-			let i = await new Promise((e) => {
-				n.toBlob(e, R.output?.type ?? "image/jpeg", R.output?.quality ?? .92);
-			});
-			return i && (z("capture", i), V(B("grMedia.camera.captured", "Photo taken"))), i;
-		}
-		return y(() => {
-			R.autoStart && Z();
-		}), v(X), I({
-			start: Z,
-			stop: Q,
-			capture: $,
-			status: G
-		}), (c, v) => (b(), d("div", {
-			class: g(T(i)),
-			role: "group",
-			"aria-label": h.ariaLabel ?? T(B)("grMedia.camera.label", "Camera")
-		}, [f("div", {
-			class: g(T(a)),
-			style: _({ aspectRatio: String(h.aspectRatio) })
-		}, [f("video", {
-			ref_key: "videoEl",
-			ref: U,
-			class: g([T(s), K.value ? T(e) : ""]),
-			playsinline: "",
-			muted: "",
-			autoplay: ""
-		}, null, 2), q.value ? u("", !0) : (b(), d("div", {
-			key: 0,
-			class: g(T(t))
-		}, [f("p", { class: g([T(n), T(o)[T(H)]]) }, w(J.value), 3), G.value !== "starting" && G.value !== "insecure" && G.value !== "missing" ? (b(), l(T(D), {
-			key: 0,
-			size: T(H),
-			disabled: h.disabled,
-			onClick: Z
-		}, {
-			default: E(() => [p(w(G.value === "idle" ? T(B)("grMedia.camera.start", "Turn on camera") : T(B)("grMedia.camera.retry", "Try again")), 1)]),
-			_: 1
-		}, 8, ["size", "disabled"])) : u("", !0)], 2))], 6), f("div", { class: g(T(r)) }, [S(c.$slots, "controls", {
-			status: G.value,
-			start: Z,
-			stop: Q,
-			capture: $
-		}, () => [m(T(D), {
-			size: T(H),
-			disabled: h.disabled || !q.value,
-			onClick: $
-		}, {
-			default: E(() => [p(w(T(B)("grMedia.camera.capture", "Take photo")), 1)]),
-			_: 1
-		}, 8, ["size", "disabled"]), q.value ? (b(), l(T(D), {
-			key: 0,
-			variant: "outline",
-			size: T(H),
-			disabled: h.disabled,
-			onClick: Q
-		}, {
-			default: E(() => [p(w(T(B)("grMedia.camera.stop", "Turn off")), 1)]),
-			_: 1
-		}, 8, ["size", "disabled"])) : u("", !0)])], 2)], 10, F));
-	}
-});
-//#endregion
-export { N as a, M as i, P as n, j as r, I as t };