ablok-components 0.3.124 → 0.3.127

package/dist/components/molecules/link-sharing/link-sharing.vue.d.ts

@@ -44,6 +44,7 @@ declare const __VLS_export: import('../../../../vue/dist/vue.esm-bundler.js').De
             mailto: boolean;
             clipboard: boolean;
             bluesky: boolean;
+            os: boolean;
         };
     };
 }>, {}, {}, {}, {}, import('../../../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, import('../../../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, {}, string, import('../../../../vue/dist/vue.esm-bundler.js').PublicProps, Readonly<import('../../../../vue/dist/vue.esm-bundler.js').ExtractPropTypes<{
@@ -89,6 +90,7 @@ declare const __VLS_export: import('../../../../vue/dist/vue.esm-bundler.js').De
             mailto: boolean;
             clipboard: boolean;
             bluesky: boolean;
+            os: boolean;
         };
     };
 }>> & Readonly<{}>, {

package/dist/components/molecules/link-sharing/link-sharing.vue_vue_type_script_setup_true_lang.js

@@ -26,9 +26,12 @@ var f = { class: "link-sharing" }, p = {
 	key: 6,
 	class: "col-12 col-md-6"
 }, M = ["href"], N = { class: "caption" }, P = {
+	key: 7,
+	class: "col-12 col-md-6"
+}, F = { class: "caption" }, I = {
 	key: 1,
 	class: "link-sharing__instructions pt-5"
-}, F = { class: "row" }, I = { class: "col-12 text-center py-0" }, L = { class: "mb-5" }, R = (e) => e.replace(/<(?:.|\n)*?>/gm, ""), z = /*@__PURE__*/ s({
+}, L = { class: "row" }, R = { class: "col-12 text-center py-0" }, z = { class: "mb-5" }, B = (e) => e.replace(/<(?:.|\n)*?>/gm, ""), V = /*@__PURE__*/ s({
 	__name: "link-sharing",
 	props: {
 		url: {
@@ -57,69 +60,87 @@ var f = { class: "link-sharing" }, p = {
 				whatsapp: !0,
 				mailto: !0,
 				clipboard: !0,
-				bluesky: !0
+				bluesky: !0,
+				os: !0
 			}
 		}
 	},
 	setup(s) {
-		let z = s, B = l(!1), V = t(() => encodeURIComponent(z.url));
-		t(() => encodeURIComponent(z.media));
-		let H = t(() => R(z.text)), U = t(() => !!(navigator && navigator.userAgent && /Mobi|Android/i.test(navigator.userAgent)));
-		async function W() {
+		let V = s, H = l(!1), U = t(() => encodeURIComponent(V.url));
+		t(() => encodeURIComponent(V.media));
+		let W = t(() => B(V.text)), G = t(() => !!(navigator && navigator.userAgent && /Mobi|Android/i.test(navigator.userAgent))), K = t(() => !!(navigator && navigator.canShare));
+		async function q() {
 			let e = document.createElement("textarea");
-			document.body.appendChild(e), e.value = z.url, e.select(), e.setSelectionRange(0, 99999), navigator.clipboard.writeText(e.value), document.body.removeChild(e);
+			document.body.appendChild(e), e.value = V.url, e.select(), e.setSelectionRange(0, 99999), navigator.clipboard.writeText(e.value), document.body.removeChild(e);
+		}
+		async function J() {
+			if (K.value) {
+				let e = {
+					title: V.subject,
+					text: W.value,
+					url: V.url
+				};
+				await navigator.canShare(e) && await navigator.share(e).catch((e) => {
+					console.log("shareError", e);
+				});
+			}
 		}
-		return (t, l) => (c(), r("div", f, [B.value ? (c(), r("div", P, [i("div", F, [i("div", I, [i("div", L, [
+		return (t, l) => (c(), r("div", f, [H.value ? (c(), r("div", I, [i("div", L, [i("div", R, [i("div", z, [
 			i("p", null, u(t.$t("sharing.instructions", { service: "Instagram" })), 1),
 			i("p", null, [i("strong", null, u(Array.isArray(s.hashtags) ? s.hashtags.join(", ") : s.hashtags), 1)]),
 			i("button", {
 				type: "button",
 				class: "btn btn-text",
-				onClick: l[1] ||= d((e) => B.value = !B.value, ["prevent"])
+				onClick: l[1] ||= d((e) => H.value = !H.value, ["prevent"])
 			}, [o(e, { symbol: "arrow-left" }), a(" " + u(t.$t("common.back")), 1)])
 		])])])])) : (c(), r("div", p, [i("div", m, [
 			s.services.facebook ? (c(), r("div", h, [i("a", {
 				class: "link-sharing__link btn btn-primary",
-				href: `https://www.facebook.com/sharer/sharer.php?u=${V.value}`,
+				href: `https://www.facebook.com/sharer/sharer.php?u=${U.value}`,
 				target: "_blank",
 				rel: "noopener"
 			}, [o(e, { symbol: "facebook" }), i("span", _, u(t.$t("sharing.facebook")), 1)], 8, g)])) : n("", !0),
 			s.services.bluesky ? (c(), r("div", v, [i("a", {
 				class: "link-sharing__link btn btn-primary",
-				href: `https://bsky.app/intent/compose?text=${H.value}${H.value ? "%20" : ""}${s.url}`,
+				href: `https://bsky.app/intent/compose?text=${W.value}${W.value ? "%20" : ""}${s.url}`,
 				target: "_blank",
 				rel: "noopener"
 			}, [o(e, { symbol: "bluesky-logo" }), i("span", b, u(t.$t("sharing.bluesky")), 1)], 8, y)])) : n("", !0),
 			s.services.instagram ? (c(), r("div", x, [i("button", {
 				type: "button",
 				class: "link-sharing__link btn btn-primary",
-				onClick: l[0] ||= d((e) => B.value = !B.value, ["prevent"])
+				onClick: l[0] ||= d((e) => H.value = !H.value, ["prevent"])
 			}, [o(e, { symbol: "instagram" }), i("span", S, u(t.$t("sharing.instagram")), 1)])])) : n("", !0),
 			s.services.linkedin ? (c(), r("div", C, [i("a", {
 				class: "link-sharing__link btn btn-primary",
-				href: `https://www.linkedin.com/shareArticle?mini=true&url=${V.value}&title=${s.subject}`,
+				href: `https://www.linkedin.com/shareArticle?mini=true&url=${U.value}&title=${s.subject}`,
 				target: "_blank",
 				rel: "noopener"
 			}, [o(e, { symbol: "linkedin" }), i("span", T, u(t.$t("sharing.linkedin")), 1)], 8, w)])) : n("", !0),
-			s.services.whatsapp && U.value ? (c(), r("div", E, [i("a", {
+			s.services.whatsapp && G.value ? (c(), r("div", E, [i("a", {
 				class: "link-sharing__link btn btn-primary",
-				href: `whatsapp://send?text=${V.value}`,
+				href: `whatsapp://send?text=${U.value}`,
 				target: "_blank",
 				rel: "noopener"
 			}, [o(e, { symbol: "whatsapp" }), i("span", O, u(t.$t("sharing.whatsapp")), 1)], 8, D)])) : n("", !0),
 			s.services.clipboard ? (c(), r("div", k, [i("button", {
 				type: "button",
 				class: "link-sharing__link btn btn-primary",
-				onClick: d(W, ["prevent", "stop"])
+				onClick: d(q, ["prevent", "stop"])
 			}, [o(e, { symbol: "copy" }), i("span", A, u(t.$t("sharing.clipboard")), 1)])])) : n("", !0),
 			s.services.mailto ? (c(), r("div", j, [i("a", {
 				class: "link-sharing__link btn btn-primary",
-				href: `mailto:?subject=${s.subject}&body=${H.value}%0D%0A${s.url}`,
+				href: `mailto:?subject=${s.subject}&body=${W.value}%0D%0A${s.url}`,
 				target: "_blank",
 				rel: "noopener"
-			}, [o(e, { symbol: "mail" }), i("span", N, u(t.$t("sharing.mailto")), 1)], 8, M)])) : n("", !0)
+			}, [o(e, { symbol: "mail" }), i("span", N, u(t.$t("sharing.mailto")), 1)], 8, M)])) : n("", !0),
+			s.services.os && K.value ? (c(), r("div", P, [i("button", {
+				type: "button",
+				class: "link-sharing__link btn btn-primary",
+				onClick: d(J, ["prevent"])
+			}, [o(e, { symbol: "share" }), i("span", F, u(t.$t("sharing.os")), 1)])])) : n("", !0)
 		])]))]));
 	}
 });
 //#endregion
-export { z as default, R as stripHtml };
+export { V as default, B as stripHtml };

package/dist/composables/useCameraCapture.d.ts

@@ -0,0 +1,34 @@
+export interface CaptureOptions {
+    /** Target canvas dimensions; falls back to the source video dimensions. */
+    targetResolution?: {
+        width: number;
+        height: number;
+    } | undefined;
+    /** True when the target ratio was explicitly requested (else derive height from source ratio). */
+    hasExplicitRatio: boolean;
+    /** Crop to the target ratio (cover) instead of letterboxing (contain). */
+    enableCropImage: boolean;
+    /** Digital zoom factor (1 = none). */
+    zoom: number;
+    /** Front-camera mirroring — flip horizontally. */
+    mirror: boolean;
+    /** Portrait-upright correction rotation (0/90/180/270), from useOrientationCorrection. */
+    captureRotation: number;
+    /** Called with the resulting PNG data URL. */
+    onSave: (dataUrl: string) => void;
+}
+/**
+ * Captures the current video frame onto the canvas, honouring ratio cropping,
+ * zoom, mirroring and device-orientation rotation. Pure drawing logic — no
+ * reactivity, trivially unit-testable.
+ */
+export declare function captureFrame(canvas: HTMLCanvasElement, image: HTMLVideoElement, options: CaptureOptions): void;
+/** Runs the canvas-capture pipeline (drawing + optional post-filter) and returns the PNG data URL. */
+export declare function captureToDataUrl(canvas: HTMLCanvasElement, image: HTMLVideoElement, options: CaptureOptions, applyFilter?: (context: CanvasRenderingContext2D, width: number, height: number) => void): string;
+/** Converts a captured data URL into the emitted photo payload. */
+export declare function toPhotoPayload(dataUrl: string): {
+    name: string;
+    id: string;
+    blob: Blob;
+    size: number;
+};

package/dist/composables/useCameraCapture.js

@@ -0,0 +1,53 @@
+import { dataURItoBlob as e } from "../utilities/helpers.js";
+//#region src/composables/useCameraCapture.ts
+function t(e, t, n, r, i, a, o) {
+	let s = e.canvas.width, c = e.canvas.height;
+	e.translate(s / 2, c / 2), o && e.scale(-1, 1), e.rotate(n * Math.PI / 180);
+	let l = c, u = s, d = Math.max(l / r, u / i) * (a && a > 0 ? a : 1), f = r * d, p = i * d;
+	e.drawImage(t, -f / 2, -p / 2, f, p);
+}
+function n(e, n, r) {
+	let i = e.getContext("2d");
+	if (!i) return;
+	let a = n.srcObject instanceof MediaStream ? n.srcObject.getTracks() : [], { aspectRatio: o, width: s, height: c } = a.length ? a[0].getSettings() : {}, l = n?.videoWidth || s || 0, u = n?.videoHeight || c || 0, d = l && u ? l / u : o, f = r.targetResolution || {
+		width: l,
+		height: u
+	}, p = f?.width || l, m = r.hasExplicitRatio ? f?.height || u : Math.round(p / (d || 1)), h = p / m;
+	if (e.width = p, e.height = m, !l || !u || !d) return;
+	let g = r.zoom, _ = r.mirror;
+	if (i.save(), r.captureRotation === 90 || r.captureRotation === 270) {
+		t(i, n, r.captureRotation, l, u, g, _), i.restore();
+		return;
+	}
+	if (r.captureRotation === 180 && (i.translate(e.width, e.height), i.scale(-1, -1)), _ && (i.translate(e.width, 0), i.scale(-1, 1)), r.enableCropImage) {
+		let t = 0, r = 0, a = l, o = u;
+		if (d > h ? (a = u * h, t = (l - a) / 2) : d < h && (o = l / h, r = (u - o) / 2), g && g !== 1) {
+			let e = a / g, n = o / g;
+			t += (a - e) / 2, r += (o - n) / 2, a = e, o = n;
+		}
+		i.drawImage(n, t, r, a, o, 0, 0, e.width, e.height);
+	} else {
+		let t = e.width, r = e.height, a = 0, o = 0;
+		if (d > h ? (r = e.width / d, o = (e.height - r) / 2) : d < h && (t = e.height * d, a = (e.width - t) / 2), g && g !== 1) {
+			let s = l / g, c = u / g, d = (l - s) / 2, f = (u - c) / 2;
+			_ && (a = e.width - a - t), i.drawImage(n, d, f, s, c, a, o, t, r);
+		} else _ && (a = e.width - a - t), i.drawImage(n, 0, 0, l, u, a, o, t, r);
+	}
+	i.restore();
+}
+function r(e, t, r, i) {
+	n(e, t, r);
+	let a = e.getContext("2d");
+	return a && i && i(a, e.width, e.height), e.toDataURL("image/png");
+}
+function i(t) {
+	let n = e(t), r = `cam-pic-${(/* @__PURE__ */ new Date()).toISOString()}`;
+	return {
+		name: r,
+		id: r,
+		blob: n,
+		size: n.size
+	};
+}
+//#endregion
+export { n as captureFrame, r as captureToDataUrl, i as toPhotoPayload };

package/dist/composables/useOrientationCorrection.d.ts

@@ -0,0 +1,27 @@
+import { ComputedRef, Ref } from '../../vue/dist/vue.esm-bundler.js';
+/**
+ * Device-orientation correction for rotation-locked pages.
+ *
+ * When the page is rotation-locked, the OS bakes a portrait-up OR portrait-down
+ * (0°/180°) orientation into the camera buffer based on gravity. That affects the
+ * preview AND the captured canvas identically. `orientationFlip` is true only while
+ * the device is actually held in landscape (in-plane gravity near ±90°), where the
+ * buffer arrives upside-down relative to the device frame; the preview counter-rotates
+ * with a 180° rotation. Portrait-up and portrait-down are left untouched. Hysteresis
+ * around the band edges prevents flicker.
+ *
+ * `previewReady` gates the preview until the correction is live (motion permission
+ * granted + first sensor reading applied). A safety timeout prevents the preview
+ * from being blocked forever if permission is denied or never granted.
+ */
+export declare function useOrientationCorrection(enabled: () => boolean): {
+    motionEnabled: Ref<boolean, boolean>;
+    orientationFlip: Ref<boolean>;
+    lastGravityAngle: Ref<number | null, number | null>;
+    orientationReady: Ref<boolean, boolean>;
+    requiresGate: ComputedRef<boolean>;
+    enableMotion: () => Promise<void>;
+    armGate: () => void;
+    getCaptureRotation: () => number;
+    dispose: () => void;
+};

package/dist/composables/useOrientationCorrection.js

@@ -0,0 +1,66 @@
+import { computed as e, ref as t } from "vue";
+//#region src/composables/useOrientationCorrection.ts
+function n(n) {
+	let r = t(!1), i = t(!1), a = t(null), o = t(!1), s, c, l = typeof window < "u" && "DeviceMotionEvent" in window && (window.matchMedia?.("(pointer: coarse)")?.matches || "ontouchstart" in window), u = e(() => n() && l);
+	function d() {
+		c &&= (window.removeEventListener("pointerdown", c, !0), window.removeEventListener("touchend", c, !0), void 0);
+	}
+	function f() {
+		o.value = !0, s &&= (clearTimeout(s), void 0), d();
+	}
+	function p() {
+		c || (c = () => {
+			h();
+		}, window.addEventListener("pointerdown", c, !0), window.addEventListener("touchend", c, !0));
+	}
+	function m(e) {
+		let t = e.accelerationIncludingGravity;
+		if (!t || t.x == null || t.y == null) return;
+		let n = Math.round(Math.atan2(t.x, t.y) * 180 / Math.PI);
+		if (a.value = n, !(typeof screen < "u" && screen.orientation && screen.orientation.type || "portrait-primary").startsWith("portrait")) i.value = !1;
+		else {
+			let e = Math.abs(Math.abs(n) - 90);
+			!i.value && e < 40 ? i.value = !0 : i.value && e > 50 && (i.value = !1);
+		}
+		o.value || f();
+	}
+	async function h() {
+		if (!(!n() || r.value)) try {
+			let e = window.DeviceOrientationEvent, t = window.DeviceMotionEvent;
+			if (e && typeof e.requestPermission == "function" && await e.requestPermission() !== "granted") {
+				f();
+				return;
+			}
+			t && typeof t.requestPermission == "function" && await t.requestPermission().catch(() => {}), window.addEventListener("devicemotion", m, !0), r.value = !0, d();
+		} catch (e) {
+			console.error(e, "enableMotion: failed"), f();
+		}
+	}
+	function g() {
+		if (!u.value) return;
+		s = setTimeout(f, 3e3);
+		let e = window.DeviceOrientationEvent;
+		e && typeof e.requestPermission == "function" ? p() : h();
+	}
+	function _() {
+		if (!n() || a.value == null) return 0;
+		let e = ((a.value - 180) % 360 + 360) % 360;
+		return (-1 * (Math.round(e / 90) * 90 % 360) % 360 + 360) % 360;
+	}
+	function v() {
+		window.removeEventListener("devicemotion", m, !0), s && clearTimeout(s), d();
+	}
+	return {
+		motionEnabled: r,
+		orientationFlip: i,
+		lastGravityAngle: a,
+		orientationReady: o,
+		requiresGate: u,
+		enableMotion: h,
+		armGate: g,
+		getCaptureRotation: _,
+		dispose: v
+	};
+}
+//#endregion
+export { n as useOrientationCorrection };

package/dist/i18n.d.ts

@@ -135,6 +135,7 @@ declare const i18n: import('vue-i18n').I18n<{
             mailto: string;
             clipboard: string;
             instructions: string;
+            os: string;
         };
         testing: {
             headline: string;

package/dist/locales/en.d.ts

@@ -134,6 +134,7 @@ export declare const messages: {
         mailto: string;
         clipboard: string;
         instructions: string;
+        os: string;
     };
     testing: {
         headline: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ablok-components",
   "private": false,
-  "version": "0.3.124",
+  "version": "0.3.127",
   "type": "module",
   "dependencies": {
     "@tiptap/core": "^3.30.0",