@virtualdisplay.io/client 4.0.0-alpha.6 → 4.0.0-alpha.7

package/dist/virtualdisplay.client.es.js

@@ -496,7 +496,7 @@ var pe = class {
 		}
 		this.pendingCallbacks.length = 0;
 	}
-}, me = class {
+}, x = class {
 	commands = [];
 	constructor(e) {
 		this.send = e;
@@ -537,7 +537,7 @@ var pe = class {
 		};
 		this.send(e);
 	}
-}, he = class {
+}, me = class {
 	state;
 	limitsState;
 	changeCallbacks = [];
@@ -598,7 +598,7 @@ var pe = class {
 			for (let t of this.changeCallbacks) t(e);
 		}
 	}
-}, ge = class {
+}, S = class {
 	developedCallbacks = /* @__PURE__ */ new Set();
 	errorCallbacks = /* @__PURE__ */ new Set();
 	developed = !1;
@@ -626,7 +626,7 @@ var pe = class {
 			t(e);
 		}), this.developedCallbacks.clear(), this.errorCallbacks.clear());
 	}
-}, _e = class {
+}, C = class {
 	validExtensions = [".png"];
 	pendingPhotos = /* @__PURE__ */ new Map();
 	constructor(e) {
@@ -634,7 +634,7 @@ var pe = class {
 	}
 	take(e) {
 		this.validateFilename(e), m.debug("Taking snapshot", { filename: e });
-		let t = new ge(e);
+		let t = new S(e);
 		return this.pendingPhotos.set(t.getFilename(), t), this.send({
 			type: y.SNAPSHOT,
 			filename: e
@@ -663,7 +663,7 @@ var pe = class {
 		if (!this.validExtensions.some((t) => e.toLowerCase().endsWith(t))) throw new n(`Invalid filename: "${e}". Filename must end with one of: ${this.validExtensions.join(", ")}`, t.INVALID_PARAMETER);
 		if (e.includes("..") || e.includes("/") || e.includes("\\")) throw new n("Filename cannot contain path separators or \"..\"", t.INVALID_PARAMETER);
 	}
-}, ve = class {
+}, he = class {
 	container = null;
 	attach(e) {
 		this.container = e;
@@ -689,70 +689,70 @@ var pe = class {
 			this.container?.removeEventListener(e, n);
 		};
 	}
-}, ye = {}, be = [
+}, ge = {}, w = [
 	"en",
 	"nl",
 	"de"
-], x = ["baseLocale"], S = [], C, w;
-function xe(e) {
-	if (S.length === 0) return;
+], T = ["baseLocale"], _e = [], ve, ye;
+function be(e) {
+	if (_e.length === 0) return;
 	let t = typeof e == "string" ? e : e.href;
-	if (C === t) return w;
+	if (ve === t) return ye;
 	let n = new URL(t, "http://dummy.com"), r;
-	for (let e of S) if (new ye(e.match, n.href).exec(n.href)) {
+	for (let e of _e) if (new ge(e.match, n.href).exec(n.href)) {
 		r = e;
 		break;
 	}
-	return C = t, w = r, r;
+	return ve = t, ye = r, r;
 }
-function T(e) {
-	let t = xe(e);
-	return t && t.exclude !== !0 && Array.isArray(t.strategy) ? t.strategy : x;
+function E(e) {
+	let t = be(e);
+	return t && t.exclude !== !0 && Array.isArray(t.strategy) ? t.strategy : T;
 }
-var E = void 0, D = typeof window > "u";
+var D = void 0, O = typeof window > "u";
 globalThis.__paraglide = globalThis.__paraglide ?? {}, globalThis.__paraglide.ssr = globalThis.__paraglide.ssr ?? {};
-var O = !1, k = () => {
-	if (E) {
-		let e = E?.getStore()?.locale;
+var k = !1, A = () => {
+	if (D) {
+		let e = D?.getStore()?.locale;
 		if (e) return e;
 	}
-	let e = x;
-	!D && typeof window < "u" && window.location?.href && (e = T(window.location.href));
-	let t = Se(e, typeof window < "u" ? window.location?.href : void 0);
-	if (t) return O || (O = !0, A(t, { reload: !1 })), t;
+	let e = T;
+	!O && typeof window < "u" && window.location?.href && (e = E(window.location.href));
+	let t = xe(e, typeof window < "u" ? window.location?.href : void 0);
+	if (t) return k || (k = !0, j(t, { reload: !1 })), t;
 	throw Error("No locale found. Read the docs https://inlang.com/m/gerre34r/library-inlang-paraglideJs/errors#no-locale-found");
 };
-function Se(e, t) {
+function xe(e, t) {
 	let n;
 	for (let t of e) {
 		if (t === "baseLocale") n = "en";
-		else if (N(t) && M.has(t)) {
-			let e = M.get(t);
+		else if (we(t) && N.has(t)) {
+			let e = N.get(t);
 			if (e) {
 				let t = e.getLocale();
 				if (t instanceof Promise) continue;
-				if (t !== void 0) return we(t);
+				if (t !== void 0) return Ce(t);
 			}
 		}
-		let e = j(n);
+		let e = M(n);
 		if (e) return e;
 	}
 }
-var Ce = (e) => {
+var Se = (e) => {
 	e ? window.location.href = e : window.location.reload();
-}, A = (e, t) => {
+}, j = (e, t) => {
 	let n = {
 		reload: !0,
 		...t
 	}, r;
 	try {
-		r = k();
+		r = A();
 	} catch {}
-	let i = [], a = x;
-	!D && typeof window < "u" && window.location?.href && (a = T(window.location.href));
+	let i = [], a = T;
+	!O && typeof window < "u" && window.location?.href && (a = E(window.location.href));
 	for (let t of a) if (t === "baseLocale") continue;
-	else if (N(t) && M.has(t)) {
-		let n = M.get(t);
+	else if (we(t) && N.has(t)) {
+		let n = N.get(t);
 		if (n) {
 			let r = n.setLocale(e);
 			r instanceof Promise && (r = r.catch((e) => {
@@ -761,280 +761,78 @@ var Ce = (e) => {
 		}
 	}
 	let o = () => {
-		!D && n.reload && window.location && e !== r && Ce(void 0);
+		!O && n.reload && window.location && e !== r && Se(void 0);
 	};
 	if (i.length) return Promise.all(i).then(() => {
 		o();
 	});
 	o();
 };
-function j(e) {
+function M(e) {
 	if (typeof e != "string") return;
 	let t = e.toLowerCase();
-	for (let e of be) if (e.toLowerCase() === t) return e;
+	for (let e of w) if (e.toLowerCase() === t) return e;
 }
-function we(e) {
-	let t = j(e);
+function Ce(e) {
+	let t = M(e);
 	if (t) return t;
-	throw Error(`Invalid locale: ${e}. Expected one of: ${be.join(", ")}`);
+	throw Error(`Invalid locale: ${e}. Expected one of: ${w.join(", ")}`);
 }
-var M = /* @__PURE__ */ new Map();
-function N(e) {
+var N = /* @__PURE__ */ new Map();
+function we(e) {
 	return typeof e == "string" && /^custom-[A-Za-z0-9_-]+$/.test(e);
 }
 //#endregion
 //#region ../i18n/src/paraglide-viewer/messages/controls_ar_buttonlabel1.js
 var Te = () => "Activate AR", Ee = () => "AR activeren", De = () => "AR aktivieren", Oe = ((e = {}, t = {}) => {
-	let n = t.locale ?? k();
+	let n = t.locale ?? A();
 	return n === "en" ? Te(e) : n === "nl" ? Ee(e) : De(e);
 }), ke = () => "Scan to view in AR", Ae = () => "Scan om in AR te bekijken", je = () => "Scannen für AR-Ansicht", Me = ((e = {}, t = {}) => {
-	let n = t.locale ?? k();
+	let n = t.locale ?? A();
 	return n === "en" ? ke(e) : n === "nl" ? Ae(e) : je(e);
 }), Ne = () => "Use your smartphone camera to scan this QR code", Pe = () => "Gebruik de camera van uw smartphone om deze QR-code te scannen", Fe = () => "Verwenden Sie die Kamera Ihres Smartphones, um diesen QR-Code zu scannen", Ie = ((e = {}, t = {}) => {
-	let n = t.locale ?? k();
+	let n = t.locale ?? A();
 	return n === "en" ? Ne(e) : n === "nl" ? Pe(e) : Fe(e);
 }), Le = () => "The 3D model will open in your phone's AR mode", Re = () => "Het 3D-model wordt geopend in de AR-modus van uw telefoon", ze = () => "Das 3D-Modell wird im AR-Modus Ihres Telefons geöffnet", Be = ((e = {}, t = {}) => {
-	let n = t.locale ?? k();
+	let n = t.locale ?? A();
 	return n === "en" ? Le(e) : n === "nl" ? Re(e) : ze(e);
 }), Ve = () => "Close", He = () => "Sluiten", Ue = () => "Schließen", We = ((e = {}, t = {}) => {
-	let n = t.locale ?? k();
+	let n = t.locale ?? A();
 	return n === "en" ? Ve(e) : n === "nl" ? He(e) : Ue(e);
 }), Ge = () => "Toggle fullscreen", Ke = () => "Volledig scherm", qe = () => "Vollbild umschalten", Je = ((e = {}, t = {}) => {
-	let n = t.locale ?? k();
+	let n = t.locale ?? A();
 	return n === "en" ? Ge(e) : n === "nl" ? Ke(e) : qe(e);
-}), Ye = () => "Downloading", Xe = () => "Downloaden", Ze = () => "Herunterladen", P = ((e = {}, t = {}) => {
-	let n = t.locale ?? k();
+}), Ye = () => "Downloading", Xe = () => "Downloaden", Ze = () => "Herunterladen", Qe = ((e = {}, t = {}) => {
+	let n = t.locale ?? A();
 	return n === "en" ? Ye(e) : n === "nl" ? Xe(e) : Ze(e);
-}), Qe = () => "Rendering", $e = () => "Renderen", et = () => "Rendern", tt = ((e = {}, t = {}) => {
-	let n = t.locale ?? k();
-	return n === "en" ? Qe(e) : n === "nl" ? $e(e) : et(e);
-}), nt = () => "Screenshot", rt = () => "Screenshot", it = () => "Screenshot", at = ((e = {}, t = {}) => {
-	let n = t.locale ?? k();
-	return n === "en" ? nt(e) : n === "nl" ? rt(e) : it(e);
-}), ot = () => "Reset camera", st = () => "Camera resetten", ct = () => "Kamera zurücksetzen", lt = ((e = {}, t = {}) => {
-	let n = t.locale ?? k();
-	return n === "en" ? ot(e) : n === "nl" ? st(e) : ct(e);
-}), ut = () => "Zoom in", dt = () => "Inzoomen", ft = () => "Hineinzoomen", pt = ((e = {}, t = {}) => {
-	let n = t.locale ?? k();
-	return n === "en" ? ut(e) : n === "nl" ? dt(e) : ft(e);
-}), mt = () => "Zoom out", ht = () => "Uitzoomen", gt = () => "Herauszoomen", _t = ((e = {}, t = {}) => {
-	let n = t.locale ?? k();
-	return n === "en" ? mt(e) : n === "nl" ? ht(e) : gt(e);
-}), vt = () => "Rotate left", yt = () => "Naar links draaien", bt = () => "Nach links drehen", xt = ((e = {}, t = {}) => {
-	let n = t.locale ?? k();
-	return n === "en" ? vt(e) : n === "nl" ? yt(e) : bt(e);
-}), St = () => "Rotate right", Ct = () => "Naar rechts draaien", wt = () => "Nach rechts drehen", Tt = ((e = {}, t = {}) => {
-	let n = t.locale ?? k();
-	return n === "en" ? St(e) : n === "nl" ? Ct(e) : wt(e);
-}), Et = () => "Tilt up", Dt = () => "Omhoog kantelen", Ot = () => "Nach oben kippen", kt = ((e = {}, t = {}) => {
-	let n = t.locale ?? k();
-	return n === "en" ? Et(e) : n === "nl" ? Dt(e) : Ot(e);
-}), At = () => "Tilt down", jt = () => "Omlaag kantelen", Mt = () => "Nach unten kippen", Nt = ((e = {}, t = {}) => {
-	let n = t.locale ?? k();
-	return n === "en" ? At(e) : n === "nl" ? jt(e) : Mt(e);
-});
-//#endregion
-//#region src/ui/loading.ts
-function F(e) {
-	let t = Math.max(0, Math.min(1, e));
-	return t * t * (3 - 2 * t);
-}
-function Pt(e, t, n, r, i, a) {
-	let [o, s, c] = e, l = Math.cos(t), u = Math.sin(t), d = l * o + u * c, f = -u * o + l * c, p = Math.cos(n), m = Math.sin(n), h = p * s - m * f, g = m * s + p * f, _ = .55;
-	return [
-		r + d * a * _,
-		i - h * a * _,
-		g
-	];
-}
-function Ft(e, t, n) {
-	e.beginPath(), e.moveTo(t[0], t[1]), e.lineTo(n[0], n[1]), e.strokeStyle = "#000", e.lineWidth = 2, e.stroke();
-}
-function It(e, t, n, r, i) {
-	let a = t(n), o = t(r);
-	Ft(e, a, [
-		a[0] + (o[0] - a[0]) * i,
-		a[1] + (o[1] - a[1]) * i,
-		a[2]
-	]);
-}
-var I = [
-	-1,
-	-1,
-	1
-], L = [
-	1,
-	-1,
-	1
-], R = [
-	1,
-	-1,
-	-1
-], z = [
-	-1,
-	-1,
-	-1
-], B = [
-	-1,
-	1,
-	1
-], V = [
-	1,
-	1,
-	1
-], H = [
-	1,
-	1,
-	-1
-], U = [
-	-1,
-	1,
-	-1
-], Lt = [
-	[I, L],
-	[L, R],
-	[R, z],
-	[z, I],
-	[I, B],
-	[L, V],
-	[R, H],
-	[z, U],
-	[B, V],
-	[V, H],
-	[H, U],
-	[U, B]
-], Rt = 400, zt = "-apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif";
-function Bt() {
-	let e = document.createElement("div");
-	Object.assign(e.style, {
-		position: "absolute",
-		inset: "0",
-		display: "flex",
-		flexDirection: "column",
-		alignItems: "center",
-		justifyContent: "center",
-		background: "#fff",
-		zIndex: "20",
-		opacity: "0",
-		transition: "opacity 0.3s ease-in-out"
-	});
-	let t = document.createElement("canvas");
-	Object.assign(t.style, {
-		width: "100%",
-		height: "100%",
-		position: "absolute",
-		inset: "0"
-	});
-	let n = document.createElement("div");
-	Object.assign(n.style, {
-		position: "absolute",
-		top: "56%",
-		left: "0",
-		right: "0",
-		textAlign: "center",
-		pointerEvents: "none"
-	});
-	let r = document.createElement("span");
-	Object.assign(r.style, {
-		fontSize: "13px",
-		fontWeight: "400",
-		color: "#000",
-		fontVariantNumeric: "tabular-nums",
-		fontFamily: zt
-	});
-	let i = document.createElement("span");
-	return Object.assign(i.style, {
-		fontSize: "13px",
-		color: "#000",
-		fontFamily: zt
-	}), i.textContent = P(), n.appendChild(r), n.appendChild(i), e.appendChild(t), e.appendChild(n), {
-		overlay: e,
-		canvas: t,
-		pctEl: r,
-		phaseEl: i
-	};
-}
-var Vt = class {
-	overlay;
-	canvas;
-	ctx;
-	pctEl;
-	phaseEl;
-	animationId = null;
-	showTimerId = null;
-	startTime;
-	hidden = !1;
-	visible = !1;
-	constructor(e, t = {}) {
-		this.startTime = performance.now();
-		let n = Bt();
-		this.overlay = n.overlay, this.canvas = n.canvas, this.pctEl = n.pctEl, this.phaseEl = n.phaseEl, e.appendChild(this.overlay), this.ctx = this.canvas.getContext("2d"), this.ctx !== null && (this.sizeCanvas(), this.tick());
-		let r = t.showDelay ?? Rt;
-		this.showTimerId = setTimeout(() => {
-			this.reveal();
-		}, r);
-	}
-	get loadingTexts() {
-		return {
-			downloading: P(),
-			rendering: tt()
-		};
-	}
-	updateProgress(e, t) {
-		this.hidden || (this.pctEl.textContent = `${Math.round(e)}%`, this.phaseEl.textContent = t === "" ? "" : ` \u00B7 ${t}`);
-	}
-	showError(e) {
-		if (this.hidden = !1, this.animationId !== null && (cancelAnimationFrame(this.animationId), this.animationId = null), this.ctx !== null) {
-			let e = Math.min(devicePixelRatio, 2), t = this.canvas.width / e, n = this.canvas.height / e;
-			this.ctx.fillStyle = "#fff", this.ctx.fillRect(0, 0, t * e, n * e);
-		}
-		this.pctEl.textContent = "", this.phaseEl.textContent = e, this.phaseEl.style.color = "#b91c1c", this.reveal();
-	}
-	hide() {
-		if (!this.hidden) {
-			if (this.hidden = !0, this.cancelShowTimer(), !this.visible) {
-				this.destroy();
-				return;
-			}
-			this.overlay.style.opacity = "0", this.overlay.addEventListener("transitionend", () => {
-				this.destroy();
-			}, { once: !0 }), setTimeout(() => {
-				this.destroy();
-			}, 500);
-		}
-	}
-	destroy() {
-		this.cancelShowTimer(), this.animationId !== null && (cancelAnimationFrame(this.animationId), this.animationId = null), this.overlay.remove();
-	}
-	reveal() {
-		this.hidden || this.visible || (this.visible = !0, this.overlay.style.opacity = "1");
-	}
-	cancelShowTimer() {
-		this.showTimerId !== null && (clearTimeout(this.showTimerId), this.showTimerId = null);
-	}
-	sizeCanvas() {
-		if (this.ctx === null) return;
-		let e = Math.min(devicePixelRatio, 2), t = this.overlay.clientWidth || 440, n = this.overlay.clientHeight || 360;
-		this.canvas.width = t * e, this.canvas.height = n * e, this.ctx.scale(e, e), this.ctx.lineCap = "round", this.ctx.lineJoin = "round";
-	}
-	tick = () => {
-		this.hidden || (this.drawFrame(), this.animationId = requestAnimationFrame(this.tick));
-	};
-	drawFrame() {
-		if (this.ctx === null) return;
-		let e = this.canvas.width / Math.min(devicePixelRatio, 2), t = this.canvas.height / Math.min(devicePixelRatio, 2), n = (performance.now() - this.startTime) / 1e3;
-		this.ctx.fillStyle = "#fff", this.ctx.fillRect(0, 0, e, t);
-		let r = e / 2, i = t * .44, a = Math.min(e, t) * .08, o = (e) => Pt(e, .785, .615, r, i, a), s = n % 6 / 6, c = Lt.length, l;
-		l = s < .35 ? F(s / .35) * c : s < .55 ? c : s < .9 ? (1 - F((s - .55) / .35)) * c : 0, this.ctx.shadowBlur = 5, this.ctx.shadowColor = "rgba(30,30,30,0.08)";
-		for (let e = 0; e < c && !(e >= l); e++) {
-			let t = Lt[e];
-			if (t === void 0) continue;
-			let n = Math.min(1, l - e);
-			It(this.ctx, o, t[0], t[1], n);
-		}
-		this.ctx.shadowBlur = 0;
-	}
-}, Ht = {
+}), $e = () => "Rendering", et = () => "Renderen", tt = () => "Rendern", nt = ((e = {}, t = {}) => {
+	let n = t.locale ?? A();
+	return n === "en" ? $e(e) : n === "nl" ? et(e) : tt(e);
+}), rt = () => "Screenshot", it = () => "Screenshot", at = () => "Screenshot", ot = ((e = {}, t = {}) => {
+	let n = t.locale ?? A();
+	return n === "en" ? rt(e) : n === "nl" ? it(e) : at(e);
+}), st = () => "Reset camera", ct = () => "Camera resetten", lt = () => "Kamera zurücksetzen", ut = ((e = {}, t = {}) => {
+	let n = t.locale ?? A();
+	return n === "en" ? st(e) : n === "nl" ? ct(e) : lt(e);
+}), dt = () => "Zoom in", ft = () => "Inzoomen", pt = () => "Hineinzoomen", mt = ((e = {}, t = {}) => {
+	let n = t.locale ?? A();
+	return n === "en" ? dt(e) : n === "nl" ? ft(e) : pt(e);
+}), ht = () => "Zoom out", gt = () => "Uitzoomen", _t = () => "Herauszoomen", vt = ((e = {}, t = {}) => {
+	let n = t.locale ?? A();
+	return n === "en" ? ht(e) : n === "nl" ? gt(e) : _t(e);
+}), yt = () => "Rotate left", bt = () => "Naar links draaien", xt = () => "Nach links drehen", St = ((e = {}, t = {}) => {
+	let n = t.locale ?? A();
+	return n === "en" ? yt(e) : n === "nl" ? bt(e) : xt(e);
+}), Ct = () => "Rotate right", wt = () => "Naar rechts draaien", Tt = () => "Nach rechts drehen", Et = ((e = {}, t = {}) => {
+	let n = t.locale ?? A();
+	return n === "en" ? Ct(e) : n === "nl" ? wt(e) : Tt(e);
+}), Dt = () => "Tilt up", Ot = () => "Omhoog kantelen", kt = () => "Nach oben kippen", At = ((e = {}, t = {}) => {
+	let n = t.locale ?? A();
+	return n === "en" ? Dt(e) : n === "nl" ? Ot(e) : kt(e);
+}), jt = () => "Tilt down", Mt = () => "Omlaag kantelen", Nt = () => "Nach unten kippen", Pt = ((e = {}, t = {}) => {
+	let n = t.locale ?? A();
+	return n === "en" ? jt(e) : n === "nl" ? Mt(e) : Nt(e);
+}), Ft = {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
 	height: 24,
@@ -1044,40 +842,40 @@ var Vt = class {
 	"stroke-width": 2,
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round"
-}, Ut = ([e, t, n]) => {
+}, It = ([e, t, n]) => {
 	let r = document.createElementNS("http://www.w3.org/2000/svg", e);
 	return Object.keys(t).forEach((e) => {
 		r.setAttribute(e, String(t[e]));
 	}), n?.length && n.forEach((e) => {
-		let t = Ut(e);
+		let t = It(e);
 		r.appendChild(t);
 	}), r;
-}, Wt = (e, t = {}) => Ut([
+}, Lt = (e, t = {}) => It([
 	"svg",
 	{
-		...Ht,
+		...Ft,
 		...t
 	},
 	e
-]), Gt = [
+]), Rt = [
 	["path", { d: "M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" }],
 	["path", { d: "m3.3 7 8.7 5 8.7-5" }],
 	["path", { d: "M12 22V12" }]
-], Kt = [["path", { d: "M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z" }], ["circle", {
+], zt = [["path", { d: "M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z" }], ["circle", {
 	cx: "12",
 	cy: "13",
 	r: "3"
-}]], qt = [["path", { d: "m6 9 6 6 6-6" }]], Jt = [["path", { d: "m15 18-6-6 6-6" }]], Yt = [["path", { d: "m9 18 6-6-6-6" }]], Xt = [["path", { d: "m18 15-6-6-6 6" }]], Zt = [
+}]], Bt = [["path", { d: "m6 9 6 6 6-6" }]], Vt = [["path", { d: "m15 18-6-6 6-6" }]], Ht = [["path", { d: "m9 18 6-6-6-6" }]], Ut = [["path", { d: "m18 15-6-6-6 6" }]], Wt = [
 	["path", { d: "M15 3h6v6" }],
 	["path", { d: "m21 3-7 7" }],
 	["path", { d: "m3 21 7-7" }],
 	["path", { d: "M9 21H3v-6" }]
-], Qt = [
+], Gt = [
 	["path", { d: "m14 10 7-7" }],
 	["path", { d: "M20 10h-6V4" }],
 	["path", { d: "m3 21 7-7" }],
 	["path", { d: "M4 14h6v6" }]
-], $t = [["path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }], ["path", { d: "M3 3v5h5" }]], en = [
+], Kt = [["path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }], ["path", { d: "M3 3v5h5" }]], qt = [
 	["circle", {
 		cx: "11",
 		cy: "11",
@@ -1101,7 +899,7 @@ var Vt = class {
 		y1: "11",
 		y2: "11"
 	}]
-], tn = [
+], Jt = [
 	["circle", {
 		cx: "11",
 		cy: "11",
@@ -1122,26 +920,26 @@ var Vt = class {
 ];
 //#endregion
 //#region ../ui/src/icons.ts
-function W(e, { size: t = 20, strokeWidth: n = 1.75 } = {}) {
-	return Wt(e, {
+function P(e, { size: t = 20, strokeWidth: n = 1.75 } = {}) {
+	return Lt(e, {
 		width: t,
 		height: t,
 		"stroke-width": n
 	});
 }
-var G = {
-	ar: (e) => W(Gt, e),
-	fullscreen: (e) => W(Zt, e),
-	exitFullscreen: (e) => W(Qt, e),
-	screenshot: (e) => W(Kt, e),
-	tiltUp: (e) => W(Xt, e),
-	tiltDown: (e) => W(qt, e),
-	rotateLeft: (e) => W(Jt, e),
-	rotateRight: (e) => W(Yt, e),
-	zoomIn: (e) => W(en, e),
-	zoomOut: (e) => W(tn, e),
-	reset: (e) => W($t, e)
-}, K = class {
+var F = {
+	ar: (e) => P(Rt, e),
+	fullscreen: (e) => P(Wt, e),
+	exitFullscreen: (e) => P(Gt, e),
+	screenshot: (e) => P(zt, e),
+	tiltUp: (e) => P(Ut, e),
+	tiltDown: (e) => P(Bt, e),
+	rotateLeft: (e) => P(Vt, e),
+	rotateRight: (e) => P(Ht, e),
+	zoomIn: (e) => P(qt, e),
+	zoomOut: (e) => P(Jt, e),
+	reset: (e) => P(Kt, e)
+}, I = class {
 	element;
 	constructor({ variant: e = "default", size: t = "default", label: n, icon: r, onClick: i, disabled: a = !1 } = {}) {
 		this.element = document.createElement("button"), this.element.className = `ui-btn ui-btn--${e} ui-btn--size-${t}`, n !== void 0 && (this.element.setAttribute("aria-label", n), this.element.title = n), r === void 0 ? n !== void 0 && (this.element.textContent = n) : this.element.appendChild(r), i && this.element.addEventListener("click", i), this.element.disabled = a;
@@ -1150,7 +948,7 @@ var G = {
 		let t = this.element.querySelector("svg");
 		t === null ? this.element.appendChild(e) : t.replaceWith(e);
 	}
-}, q = {
+}, L = {
 	brand: {
 		DEFAULT: "#171717",
 		primary: "#171717",
@@ -1189,7 +987,7 @@ var G = {
 	},
 	white: "#ffffff",
 	black: "#000000"
-}, J = {
+}, R = {
 	px: "1px",
 	0: "0",
 	.5: "0.125rem",
@@ -1212,27 +1010,27 @@ var G = {
 	20: "5rem",
 	24: "6rem"
 };
-J[1], J[2], J[4], J[6], J[8], J[12];
+R[1], R[2], R[4], R[6], R[8], R[12];
 //#endregion
 //#region ../ui/src/vanilla/components/card/index.ts
-var nn = class {
+var Yt = class {
 	element;
 	constructor() {
 		this.element = document.createElement("div"), Object.assign(this.element.style, {
-			background: q.white,
-			borderRadius: J[3],
-			padding: J[6],
-			boxShadow: `0 ${J[2]} ${J[8]} oklch(0% 0 0 / 20%)`,
+			background: L.white,
+			borderRadius: R[3],
+			padding: R[6],
+			boxShadow: `0 ${R[2]} ${R[8]} oklch(0% 0 0 / 20%)`,
 			maxWidth: "20rem",
 			width: "100%"
 		});
 	}
-}, rn = class {
+}, Xt = class {
 	card;
 	backdrop;
 	keyHandler = null;
 	constructor(e = {}) {
-		this.options = e, this.card = new nn(), this.backdrop = this.createBackdrop(), this.backdrop.appendChild(this.card.element);
+		this.options = e, this.card = new Yt(), this.backdrop = this.createBackdrop(), this.backdrop.appendChild(this.card.element);
 	}
 	open() {
 		document.body.appendChild(this.backdrop), this.keyHandler = (e) => {
@@ -1246,7 +1044,7 @@ var nn = class {
 		let e = document.createElement("div");
 		return Object.assign(e.style, {
 			position: "fixed",
-			inset: J[0],
+			inset: R[0],
 			background: "oklch(0% 0 0 / 50%)",
 			zIndex: "9999",
 			display: "flex",
@@ -1256,7 +1054,7 @@ var nn = class {
 			t.target === e && this.close();
 		}), e;
 	}
-}, an = class {
+}, Zt = class {
 	element;
 	selectCallback = null;
 	constructor(e, t, n) {
@@ -1274,7 +1072,7 @@ var nn = class {
 	onSelect(e) {
 		this.selectCallback = e;
 	}
-}, on = class {
+}, Qt = class {
 	element;
 	select;
 	constructor(e, t, n, r, i) {
@@ -1287,7 +1085,7 @@ var nn = class {
 			a.value = n, a.textContent = i?.[e] ?? n, n === r && (a.selected = !0, o = !0), this.select.appendChild(a);
 		}
 		o || (a.selected = !0);
-		let s = Wt(qt, {
+		let s = Lt(Bt, {
 			width: 16,
 			height: 16,
 			"stroke-width": 2
@@ -1302,7 +1100,7 @@ var nn = class {
 			e(this.select.value);
 		});
 	}
-}, Y = {
+}, z = {
 	fontFamily: {
 		sans: [
 			"Mona Sans",
@@ -1341,7 +1139,7 @@ var nn = class {
 		normal: "1.5",
 		relaxed: "1.75"
 	}
-}, sn = Y.fontFamily.sans.join(", "), cn = class {
+}, $t = z.fontFamily.sans.join(", "), en = class {
 	qrLib = null;
 	dialog = null;
 	async show(t) {
@@ -1351,30 +1149,30 @@ var nn = class {
 			margin: 4,
 			errorCorrectionLevel: "M",
 			color: {
-				dark: q.black,
-				light: q.white
+				dark: L.black,
+				light: L.white
 			}
 		});
-		this.dialog = new rn({ onClose: () => {
+		this.dialog = new Xt({ onClose: () => {
 			this.dialog = null;
 		} }), Object.assign(this.dialog.card.element.style, {
 			display: "flex",
 			flexDirection: "column",
 			alignItems: "center",
-			gap: J[3],
-			fontFamily: sn
+			gap: R[3],
+			fontFamily: $t
 		}), this.dialog.card.element.appendChild(this.createText(Me(), {
-			fontSize: Y.fontSize.base,
-			fontWeight: Y.fontWeight.semibold,
-			color: q.neutral[900]
+			fontSize: z.fontSize.base,
+			fontWeight: z.fontWeight.semibold,
+			color: L.neutral[900]
 		})), this.dialog.card.element.appendChild(this.createText(Ie(), {
-			fontSize: Y.fontSize.sm,
-			color: q.neutral[600]
+			fontSize: z.fontSize.sm,
+			color: L.neutral[600]
 		})), this.dialog.card.element.appendChild(this.createQrImage(n)), this.dialog.card.element.appendChild(this.createText(Be(), {
-			fontSize: Y.fontSize.xs,
-			color: q.neutral[500]
+			fontSize: z.fontSize.xs,
+			color: L.neutral[500]
 		}));
-		let r = new K({
+		let r = new I({
 			variant: "outline",
 			label: We(),
 			onClick: () => {
@@ -1397,12 +1195,12 @@ var nn = class {
 	createQrImage(e) {
 		let t = document.createElement("img");
 		return t.src = e, t.alt = "QR code", Object.assign(t.style, {
-			width: J[24],
-			height: J[24],
-			borderRadius: J[1]
+			width: R[24],
+			height: R[24],
+			borderRadius: R[1]
 		}), t;
 	}
-}, X = Y.fontFamily.sans.join(", "), ln = `
+}, B = z.fontFamily.sans.join(", "), tn = `
 :root { 
   --primary: oklch(5% 0 0);
   --primary-foreground: oklch(100% 0 0);
@@ -1426,7 +1224,7 @@ var nn = class {
   gap: 0.5rem;
   border: 1px solid transparent;
   border-radius: var(--radius);
-  font-family: ${X};
+  font-family: ${B};
   font-size: 0.875rem;
   font-weight: 600;
   white-space: nowrap;
@@ -1483,7 +1281,7 @@ var nn = class {
   border-radius: var(--radius);
   background: var(--background);
   color: var(--foreground);
-  font-family: ${X};
+  font-family: ${B};
   font-size: 0.875rem;
   font-weight: 600;
   cursor: pointer;
@@ -1517,7 +1315,7 @@ var nn = class {
   background: var(--background);
   appearance: none;
   color: var(--foreground);
-  font-family: ${X};
+  font-family: ${B};
   font-size: 0.875rem;
   font-weight: 400;
   cursor: pointer;
@@ -1539,55 +1337,224 @@ var nn = class {
   color: var(--muted-foreground);
   pointer-events: none;
 }
-`, Z = !1;
-function un() {
-	if (Z || typeof document > "u") return;
-	Z = !0;
+`, V = !1;
+function nn() {
+	if (V || typeof document > "u") return;
+	V = !0;
 	let e = document.createElement("style");
-	e.id = "vd-ui-vanilla", e.textContent = ln, document.head.appendChild(e);
+	e.id = "vd-ui-vanilla", e.textContent = tn, document.head.appendChild(e);
 }
 //#endregion
-//#region src/ui/toolbar.ts
-function dn(e, t) {
-	let n = document.createElement("a");
-	n.href = `data:image/png;base64,${e}`, n.download = t, n.click();
+//#region src/ui/loading.ts
+function H(e) {
+	let t = Math.max(0, Math.min(1, e));
+	return t * t * (3 - 2 * t);
 }
-var fn = class {
-	element;
-	screenshotBtn = null;
-	constructor(e) {
-		this.options = e, this.element = document.createElement("div"), this.element.className = "vd-toolbar";
+function rn(e, t, n, r, i, a) {
+	let [o, s, c] = e, l = Math.cos(t), u = Math.sin(t), d = l * o + u * c, f = -u * o + l * c, p = Math.cos(n), m = Math.sin(n), h = p * s - m * f, g = m * s + p * f, _ = .55;
+	return [
+		r + d * a * _,
+		i - h * a * _,
+		g
+	];
+}
+function an(e, t, n) {
+	e.beginPath(), e.moveTo(t[0], t[1]), e.lineTo(n[0], n[1]), e.strokeStyle = "#000", e.lineWidth = 2, e.stroke();
+}
+function on(e, t, n, r, i) {
+	let a = t(n), o = t(r);
+	an(e, a, [
+		a[0] + (o[0] - a[0]) * i,
+		a[1] + (o[1] - a[1]) * i,
+		a[2]
+	]);
+}
+var U = [
+	-1,
+	-1,
+	1
+], W = [
+	1,
+	-1,
+	1
+], G = [
+	1,
+	-1,
+	-1
+], K = [
+	-1,
+	-1,
+	-1
+], q = [
+	-1,
+	1,
+	1
+], J = [
+	1,
+	1,
+	1
+], Y = [
+	1,
+	1,
+	-1
+], X = [
+	-1,
+	1,
+	-1
+], sn = [
+	[U, W],
+	[W, G],
+	[G, K],
+	[K, U],
+	[U, q],
+	[W, J],
+	[G, Y],
+	[K, X],
+	[q, J],
+	[J, Y],
+	[Y, X],
+	[X, q]
+], cn = 400, ln = "-apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif";
+function un() {
+	let e = document.createElement("div");
+	Object.assign(e.style, {
+		position: "absolute",
+		inset: "0",
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		justifyContent: "center",
+		background: "#fff",
+		zIndex: "20",
+		opacity: "0",
+		transition: "opacity 0.3s ease-in-out"
+	});
+	let t = document.createElement("canvas");
+	Object.assign(t.style, {
+		width: "100%",
+		height: "100%",
+		position: "absolute",
+		inset: "0"
+	});
+	let n = document.createElement("div");
+	Object.assign(n.style, {
+		position: "absolute",
+		top: "56%",
+		left: "0",
+		right: "0",
+		textAlign: "center",
+		pointerEvents: "none"
+	});
+	let r = document.createElement("span");
+	Object.assign(r.style, {
+		fontSize: "13px",
+		fontWeight: "400",
+		color: "#000",
+		fontVariantNumeric: "tabular-nums",
+		fontFamily: ln
+	});
+	let i = document.createElement("span");
+	return Object.assign(i.style, {
+		fontSize: "13px",
+		color: "#000",
+		fontFamily: ln
+	}), i.textContent = Qe(), n.appendChild(r), n.appendChild(i), e.appendChild(t), e.appendChild(n), {
+		overlay: e,
+		canvas: t,
+		pctEl: r,
+		phaseEl: i
+	};
+}
+var dn = class {
+	overlay;
+	canvas;
+	ctx;
+	pctEl;
+	phaseEl;
+	animationId = null;
+	showTimerId = null;
+	startTime;
+	hidden = !1;
+	visible = !1;
+	constructor(e, t = {}) {
+		this.startTime = performance.now();
+		let n = un();
+		this.overlay = n.overlay, this.canvas = n.canvas, this.pctEl = n.pctEl, this.phaseEl = n.phaseEl, e.appendChild(this.overlay), this.ctx = this.canvas.getContext("2d"), this.ctx !== null && (this.sizeCanvas(), this.tick());
+		let r = t.showDelay ?? cn;
+		this.showTimerId = setTimeout(() => {
+			this.reveal();
+		}, r);
 	}
-	syncButton(e, t, n) {
-		if (t && e === null) {
-			let e = n();
-			return this.element.appendChild(e.element), e;
+	get loadingTexts() {
+		return {
+			downloading: Qe(),
+			rendering: nt()
+		};
+	}
+	updateProgress(e, t) {
+		this.hidden || (this.pctEl.textContent = `${Math.round(e)}%`, this.phaseEl.textContent = t === "" ? "" : ` \u00B7 ${t}`);
+	}
+	showError(e) {
+		if (this.hidden = !1, this.animationId !== null && (cancelAnimationFrame(this.animationId), this.animationId = null), this.ctx !== null) {
+			let e = Math.min(devicePixelRatio, 2), t = this.canvas.width / e, n = this.canvas.height / e;
+			this.ctx.fillStyle = "#fff", this.ctx.fillRect(0, 0, t * e, n * e);
 		}
-		return !t && e !== null ? (e.element.remove(), null) : e;
+		this.pctEl.textContent = "", this.phaseEl.textContent = e, this.phaseEl.style.color = "#b91c1c", this.reveal();
 	}
-	applySettings(e) {
-		this.screenshotBtn = this.syncButton(this.screenshotBtn, e.screenshot === !0, () => new K({
-			variant: "outline",
-			size: "icon",
-			label: at(),
-			icon: G.screenshot(),
-			onClick: () => {
-				this.options.snapshotApi.take("snapshot.png").onDeveloped(({ data: e, filename: t }) => {
-					dn(e, t);
-				});
+	hide() {
+		if (!this.hidden) {
+			if (this.hidden = !0, this.cancelShowTimer(), !this.visible) {
+				this.destroy();
+				return;
 			}
-		}));
+			this.overlay.style.opacity = "0", this.overlay.addEventListener("transitionend", () => {
+				this.destroy();
+			}, { once: !0 }), setTimeout(() => {
+				this.destroy();
+			}, 500);
+		}
+	}
+	destroy() {
+		this.cancelShowTimer(), this.animationId !== null && (cancelAnimationFrame(this.animationId), this.animationId = null), this.overlay.remove();
+	}
+	reveal() {
+		this.hidden || this.visible || (this.visible = !0, this.overlay.style.opacity = "1");
+	}
+	cancelShowTimer() {
+		this.showTimerId !== null && (clearTimeout(this.showTimerId), this.showTimerId = null);
+	}
+	sizeCanvas() {
+		if (this.ctx === null) return;
+		let e = Math.min(devicePixelRatio, 2), t = this.overlay.clientWidth || 440, n = this.overlay.clientHeight || 360;
+		this.canvas.width = t * e, this.canvas.height = n * e, this.ctx.scale(e, e), this.ctx.lineCap = "round", this.ctx.lineJoin = "round";
 	}
-}, pn = class {
+	tick = () => {
+		this.hidden || (this.drawFrame(), this.animationId = requestAnimationFrame(this.tick));
+	};
+	drawFrame() {
+		if (this.ctx === null) return;
+		let e = this.canvas.width / Math.min(devicePixelRatio, 2), t = this.canvas.height / Math.min(devicePixelRatio, 2), n = (performance.now() - this.startTime) / 1e3;
+		this.ctx.fillStyle = "#fff", this.ctx.fillRect(0, 0, e, t);
+		let r = e / 2, i = t * .44, a = Math.min(e, t) * .08, o = (e) => rn(e, .785, .615, r, i, a), s = n % 6 / 6, c = sn.length, l;
+		l = s < .35 ? H(s / .35) * c : s < .55 ? c : s < .9 ? (1 - H((s - .55) / .35)) * c : 0, this.ctx.shadowBlur = 5, this.ctx.shadowColor = "rgba(30,30,30,0.08)";
+		for (let e = 0; e < c && !(e >= l); e++) {
+			let t = sn[e];
+			if (t === void 0) continue;
+			let n = Math.min(1, l - e);
+			on(this.ctx, o, t[0], t[1], n);
+		}
+		this.ctx.shadowBlur = 0;
+	}
+}, fn = class {
 	element;
 	arBtn = null;
 	fullscreenBtn = null;
 	onFullscreenChange;
 	constructor(e) {
-		this.options = e, this.element = document.createElement("div"), this.element.className = "vd-action-bar", this.onFullscreenChange = () => {
+		this.options = e, this.element = document.createElement("div"), this.onFullscreenChange = () => {
 			if (this.fullscreenBtn === null) return;
 			let e = document.fullscreenElement !== null;
-			this.fullscreenBtn.setIcon(e ? G.exitFullscreen() : G.fullscreen());
+			this.fullscreenBtn.setIcon(e ? F.exitFullscreen() : F.fullscreen());
 		}, document.addEventListener("fullscreenchange", this.onFullscreenChange);
 	}
 	syncButton(e, t, n) {
@@ -1598,19 +1565,19 @@ var fn = class {
 		return !t && e !== null ? (e.element.remove(), null) : e;
 	}
 	applySettings(e) {
-		this.arBtn = this.syncButton(this.arBtn, e.ar !== !1 && this.options.onAr !== void 0, () => new K({
+		this.arBtn = this.syncButton(this.arBtn, e.ar !== !1 && this.options.onAr !== void 0, () => new I({
 			variant: "outline",
 			size: "icon",
 			label: Oe(),
-			icon: G.ar(),
+			icon: F.ar(),
 			onClick: () => {
 				this.options.onAr?.();
 			}
-		})), this.fullscreenBtn = this.syncButton(this.fullscreenBtn, e.fullscreen !== !1 && this.options.onFullscreen !== void 0, () => new K({
+		})), this.fullscreenBtn = this.syncButton(this.fullscreenBtn, e.fullscreen !== !1 && this.options.onFullscreen !== void 0, () => new I({
 			variant: "outline",
 			size: "icon",
 			label: Je(),
-			icon: G.fullscreen(),
+			icon: F.fullscreen(),
 			onClick: () => {
 				this.options.onFullscreen?.();
 			}
@@ -1619,7 +1586,7 @@ var fn = class {
 	destroy() {
 		document.removeEventListener("fullscreenchange", this.onFullscreenChange);
 	}
-}, Q = .5, mn = class e {
+}, Z = .5, pn = class e {
 	element;
 	constructor(t, n) {
 		this.element = Object.assign(document.createElement("div"), { className: "vd-camera-controls" });
@@ -1634,65 +1601,65 @@ var fn = class {
 			}
 			let c = i + e;
 			c > 180 || c < 0 ? (i = c > 180 ? 360 - c : -c, o = (o + 180) % 360, t.tilt(i).rotate(r + o).set()) : (i = c, t.tilt(i).set());
-		}, u = new K({
+		}, u = new I({
 			variant: "outline",
 			size: "icon",
-			label: _t(),
-			icon: G.zoomOut(),
+			label: vt(),
+			icon: F.zoomOut(),
 			onClick: () => {
 				a = s(a - 10), t.zoom(a).set();
 			}
-		}), d = new K({
+		}), d = new I({
 			variant: "outline",
 			size: "icon",
-			label: pt(),
-			icon: G.zoomIn(),
+			label: mt(),
+			icon: F.zoomIn(),
 			onClick: () => {
 				a = s(a + 10), t.zoom(a).set();
 			}
-		}), f = new K({
+		}), f = new I({
 			variant: "outline",
 			size: "icon",
-			label: kt(),
-			icon: G.tiltUp(),
+			label: At(),
+			icon: F.tiltUp(),
 			onClick: () => {
 				l(-15);
 			}
-		}), p = new K({
+		}), p = new I({
 			variant: "outline",
 			size: "icon",
-			label: xt(),
-			icon: G.rotateLeft(),
+			label: St(),
+			icon: F.rotateLeft(),
 			onClick: () => {
 				r = c(r - 15), t.rotate(r + o).set();
 			}
-		}), m = new K({
+		}), m = new I({
 			variant: "outline",
 			size: "icon",
-			label: lt(),
-			icon: G.reset(),
+			label: ut(),
+			icon: F.reset(),
 			onClick: () => {
 				o = 0, t.reset();
 			}
-		}), h = new K({
+		}), h = new I({
 			variant: "outline",
 			size: "icon",
-			label: Tt(),
-			icon: G.rotateRight(),
+			label: Et(),
+			icon: F.rotateRight(),
 			onClick: () => {
 				r = c(r + 15), t.rotate(r + o).set();
 			}
-		}), g = new K({
+		}), g = new I({
 			variant: "outline",
 			size: "icon",
-			label: Nt(),
-			icon: G.tiltDown(),
+			label: Pt(),
+			icon: F.tiltDown(),
 			onClick: () => {
 				l(15);
 			}
 		}), _ = (e) => {
 			let t = n.limits;
-			t !== void 0 && (u.element.disabled = t.minZoom !== void 0 && e.zoom <= t.minZoom + Q, d.element.disabled = t.maxZoom !== void 0 && e.zoom >= t.maxZoom - Q, f.element.disabled = t.minTilt !== void 0 && e.tilt <= t.minTilt + Q, g.element.disabled = t.maxTilt !== void 0 && e.tilt >= t.maxTilt - Q, p.element.disabled = t.minRotate !== void 0 && e.rotation <= t.minRotate + Q, h.element.disabled = t.maxRotate !== void 0 && e.rotation >= t.maxRotate - Q);
+			t !== void 0 && (u.element.disabled = t.minZoom !== void 0 && e.zoom <= t.minZoom + Z, d.element.disabled = t.maxZoom !== void 0 && e.zoom >= t.maxZoom - Z, f.element.disabled = t.minTilt !== void 0 && e.tilt <= t.minTilt + Z, g.element.disabled = t.maxTilt !== void 0 && e.tilt >= t.maxTilt - Z, p.element.disabled = t.minRotate !== void 0 && e.rotation <= t.minRotate + Z, h.element.disabled = t.maxRotate !== void 0 && e.rotation >= t.maxRotate - Z);
 		};
 		n.onChange((e) => {
 			r = e.rotation - o, i = e.tilt, a = e.zoom, _(e);
@@ -1714,17 +1681,17 @@ var fn = class {
 		]) o.element.classList.add(`vd-dpad-${s}`), a.appendChild(o.element);
 		return a;
 	}
-}, hn = 5;
-function $(e) {
+}, mn = 5;
+function Q(e) {
 	let t = e.replace(/([A-Z])/g, " $1").trim();
 	return t.charAt(0).toUpperCase() + t.slice(1).toLowerCase();
 }
-function gn(e, t, n, r, i) {
+function hn(e, t, n, r, i) {
 	let a = document.createElement("div");
 	a.className = "vd-attribute", a.dataset.name = e.name;
 	let o = document.createElement("span");
-	o.className = "vd-attribute-label", o.textContent = $(e.name), a.appendChild(o);
-	let s = e.values.find((n) => t.getValue(e.name, n)?.isSelected === !0), c = e.values.map($), l = e.values.length <= hn ? new an(e.values, s, c) : new on(e.name, e.values, $(e.name), s, c);
+	o.className = "vd-attribute-label", o.textContent = Q(e.name), a.appendChild(o);
+	let s = e.values.find((n) => t.getValue(e.name, n)?.isSelected === !0), c = e.values.map(Q), l = e.values.length <= mn ? new Zt(e.values, s, c) : new Qt(e.name, e.values, Q(e.name), s, c);
 	return l.onSelect((t) => {
 		n.dispatch("ui:select", {
 			attribute: e.name,
@@ -1739,56 +1706,60 @@ function gn(e, t, n, r, i) {
 }
 //#endregion
 //#region src/ui/styles.ts
-var _n = Y.fontFamily.sans.join(", "), vn = `
+var gn = z.fontFamily.sans.join(", "), $ = "\n  position: absolute;\n  display: flex;\n  z-index: 10;\n", _n = `
 /* Override browser's default black fullscreen backdrop */
 .vd-container:fullscreen {
   background: oklch(100% 0 0);
 }
 
-/* Top-right: screenshot + camera controls */
-.vd-toolbar {
-  position: absolute;
-  inset-block-start: ${J[3]};
-  inset-inline-end: ${J[3]};
-  display: flex;
+/* Layout slots — four corners */
+.vd-slot-top-right {
+  ${$}
+  inset-block-start: ${R[3]};
+  inset-inline-end: ${R[3]};
   flex-direction: column;
   align-items: flex-end;
-  gap: ${J[1.5]};
-  z-index: 10;
+  gap: ${R[1.5]};
 }
 
-/* Bottom-right: AR + fullscreen */
-.vd-action-bar {
-  position: absolute;
-  inset-block-end: ${J[3]};
-  inset-inline-end: ${J[3]};
-  display: flex;
+.vd-slot-bottom-left {
+  ${$}
+  inset-block-end: ${R[3]};
+  inset-inline-start: ${R[3]};
+  flex-direction: column;
+  align-items: flex-start;
+  gap: ${R[1.5]};
+}
+
+.vd-slot-bottom-right {
+  ${$}
+  inset-block-end: ${R[3]};
+  inset-inline-end: ${R[3]};
   flex-direction: row;
-  gap: ${J[1.5]};
-  z-index: 10;
+  gap: ${R[1.5]};
 }
 
-/* Camera controls card inside .vd-toolbar */
+/* Component styles — no positioning */
 .vd-camera-controls {
   display: flex;
   flex-direction: column;
-  gap: ${J[1]};
-  background: color-mix(in oklch, ${q.white} 85%, transparent);
+  gap: ${R[1]};
+  background: color-mix(in oklch, ${L.white} 85%, transparent);
   backdrop-filter: blur(8px);
-  border-radius: ${J[2]};
-  padding: ${J[2]};
+  border-radius: ${R[2]};
+  padding: ${R[2]};
 }
 
 .vd-zoom {
   display: flex;
-  gap: ${J[.5]};
+  gap: ${R[.5]};
 }
 
 .vd-dpad {
   display: grid;
-  grid-template-columns: repeat(3, ${J[9]});
-  grid-template-rows: repeat(3, ${J[9]});
-  gap: ${J[.5]};
+  grid-template-columns: repeat(3, ${R[9]});
+  grid-template-rows: repeat(3, ${R[9]});
+  gap: ${R[.5]};
 }
 
 .vd-dpad-up    { grid-column: 2; grid-row: 1; }
@@ -1797,49 +1768,53 @@ var _n = Y.fontFamily.sans.join(", "), vn = `
 .vd-dpad-right { grid-column: 3; grid-row: 2; }
 .vd-dpad-down  { grid-column: 2; grid-row: 3; }
 
-/* Bottom-left: attribute selectors */
 .vd-attributes {
-  position: absolute;
-  inset-block-end: ${J[3]};
-  inset-inline-start: ${J[3]};
   display: flex;
   flex-direction: column;
-  gap: ${J[2]};
-  background: color-mix(in oklch, ${q.white} 85%, transparent);
+  gap: ${R[2]};
+  background: color-mix(in oklch, ${L.white} 85%, transparent);
   backdrop-filter: blur(8px);
-  border-radius: ${J[2]};
-  padding: ${J[2]};
-  font-family: ${_n};
-  z-index: 10;
+  border-radius: ${R[2]};
+  padding: ${R[2]};
+  font-family: ${gn};
 }
 
 .vd-attribute {
   display: flex;
   flex-direction: column;
-  gap: ${J[1]};
+  gap: ${R[1]};
 }
 
 .vd-attribute-label {
-  font-size: ${Y.fontSize.xs};
-  font-weight: ${Y.fontWeight.medium};
-  color: ${q.neutral[900]};
-  font-family: ${_n};
+  font-size: ${z.fontSize.xs};
+  font-weight: ${z.fontWeight.medium};
+  color: ${L.neutral[900]};
+  font-family: ${gn};
 }
 
 `;
-function yn() {
-	if (un(), document.getElementById("vd-styles") !== null) return;
+function vn() {
+	if (nn(), document.getElementById("vd-styles") !== null) return;
 	let e = document.createElement("style");
-	e.id = "vd-styles", e.textContent = vn, document.head.appendChild(e);
+	e.id = "vd-styles", e.textContent = _n, document.head.appendChild(e);
 }
 //#endregion
 //#region src/ui/standard-interface.ts
+function yn(e, t) {
+	let n = document.createElement("a");
+	n.href = `data:image/png;base64,${e}`, n.download = t, n.click();
+}
 var bn = class {
 	options;
 	settings = {};
 	container = null;
 	loading = null;
-	toolbar = null;
+	slots = {
+		topRight: null,
+		bottomLeft: null,
+		bottomRight: null
+	};
+	screenshotBtn = null;
 	actionBar = null;
 	cameraControls = null;
 	attributes = null;
@@ -1847,12 +1822,12 @@ var bn = class {
 		this.options = e;
 	}
 	attach(e) {
-		yn(), this.container = e, this.loading = new Vt(e), this.toolbar = new fn({ snapshotApi: this.options.snapshotApi }), this.toolbar.applySettings(this.settings), e.appendChild(this.toolbar.element), this.actionBar = new pn({
+		vn(), this.container = e, this.loading = new dn(e), this.slots.topRight = this.createSlot(e, "vd-slot-top-right"), this.slots.bottomLeft = this.createSlot(e, "vd-slot-bottom-left"), this.slots.bottomRight = this.createSlot(e, "vd-slot-bottom-right"), this.actionBar = new fn({
 			onAr: this.options.onAr,
 			onFullscreen: () => {
 				document.fullscreenElement === null ? this.container?.requestFullscreen() : document.exitFullscreen();
 			}
-		}), this.actionBar.applySettings(this.settings), e.appendChild(this.actionBar.element);
+		}), this.actionBar.applySettings(this.settings), this.slots.bottomRight.appendChild(this.actionBar.element), this.syncScreenshotButton(), this.placeScreenshotButton();
 	}
 	onReady() {
 		this.loading?.hide(), this.loading = null, this.cameraControls !== null && (this.cameraControls.element.style.display = "flex"), this.attributes !== null && (this.attributes.style.display = "flex");
@@ -1864,20 +1839,43 @@ var bn = class {
 		this.loading?.showError(e);
 	}
 	applyViewerSettings(e) {
-		this.settings = e, e.language !== void 0 && A(e.language), this.toolbar?.applySettings(e), this.actionBar?.applySettings(e), this.cameraControls !== null && (this.cameraControls.element.style.display = e.cameraControls === !0 ? "flex" : "none");
+		this.settings = e, e.language !== void 0 && j(e.language), this.syncScreenshotButton(), this.actionBar?.applySettings(e), this.cameraControls !== null && (this.cameraControls.element.style.display = e.cameraControls === !0 ? "flex" : "none"), this.placeScreenshotButton();
 	}
 	renderAttributeControls(e, t) {
-		if (!(this.container === null || this.toolbar === null) && (this.cameraControls?.element.remove(), this.cameraControls = null, this.attributes?.remove(), this.attributes = null, this.settings.cameraControls === !0 && (this.cameraControls = new mn(this.options.cameraApi, this.options.cameraPositionApi), this.cameraControls.element.style.display = "none", this.toolbar.element.appendChild(this.cameraControls.element)), t.length !== 0)) {
+		if (!(this.container === null || this.slots.topRight === null) && (this.cameraControls?.element.remove(), this.cameraControls = null, this.attributes?.remove(), this.attributes = null, this.settings.cameraControls === !0 && (this.cameraControls = new pn(this.options.cameraApi, this.options.cameraPositionApi), this.cameraControls.element.style.display = "none", this.slots.topRight.appendChild(this.cameraControls.element)), this.placeScreenshotButton(), t.length !== 0)) {
 			this.attributes = document.createElement("div"), this.attributes.className = "vd-attributes", this.attributes.style.display = "none";
-			for (let n of t) this.attributes.appendChild(gn(n, e, this.options.eventBus, this.options.onSelect, this.options.onSubscribe));
-			this.container.appendChild(this.attributes);
+			for (let n of t) this.attributes.appendChild(hn(n, e, this.options.eventBus, this.options.onSelect, this.options.onSubscribe));
+			this.slots.bottomLeft.appendChild(this.attributes);
 		}
 	}
 	get viewerSettings() {
 		return this.settings;
 	}
 	destroy() {
-		this.loading?.destroy(), this.toolbar?.element.remove(), this.actionBar?.destroy(), this.actionBar?.element.remove(), this.cameraControls?.element.remove(), this.attributes?.remove(), this.container = null;
+		this.loading?.destroy(), this.screenshotBtn?.element.remove(), this.actionBar?.destroy(), this.actionBar?.element.remove(), this.cameraControls?.element.remove(), this.attributes?.remove();
+		for (let e of Object.values(this.slots)) e?.remove();
+		this.container = null;
+	}
+	createSlot(e, t) {
+		let n = document.createElement("div");
+		return n.className = t, e.appendChild(n), n;
+	}
+	syncScreenshotButton() {
+		let e = this.settings.screenshot === !0;
+		e && this.screenshotBtn === null && (this.screenshotBtn = new I({
+			variant: "outline",
+			size: "icon",
+			label: ot(),
+			icon: F.screenshot(),
+			onClick: () => {
+				this.options.snapshotApi.take("snapshot.png").onDeveloped(({ data: e, filename: t }) => {
+					yn(e, t);
+				});
+			}
+		})), !e && this.screenshotBtn !== null && (this.screenshotBtn.element.remove(), this.screenshotBtn = null);
+	}
+	placeScreenshotButton() {
+		this.screenshotBtn === null || this.slots.topRight === null || (this.cameraControls === null ? this.slots.topRight.appendChild(this.screenshotBtn.element) : this.cameraControls.element.appendChild(this.screenshotBtn.element));
 	}
 }, xn = class {
 	attributes;
@@ -1904,7 +1902,7 @@ var bn = class {
 				attribute: e,
 				value: t
 			});
-		}), this.snapshotApi = new _e(t), this.cameraApi = new me(t), this.cameraPositionApi = new he(), this.eventBus = new ve(), this.qrModal = new cn(), this.readyStateTracker = new _(() => {
+		}), this.snapshotApi = new C(t), this.cameraApi = new x(t), this.cameraPositionApi = new me(), this.eventBus = new he(), this.qrModal = new en(), this.readyStateTracker = new _(() => {
 			let e = this.readyCallbacks;
 			this.readyCallbacks = [];
 			for (let t of e) t(this);
@@ -1993,4 +1991,4 @@ var bn = class {
 	}
 };
 //#endregion
-export { ee as Attribute, v as AttributeValue, me as Camera, t as ERROR_CODES, ge as Photo, _e as Snapshot, xn as VirtualdisplayClient, n as VirtualdisplayError, h as enableDebugMode, g as isDebugMode, m as logger };
+export { ee as Attribute, v as AttributeValue, x as Camera, t as ERROR_CODES, S as Photo, C as Snapshot, xn as VirtualdisplayClient, n as VirtualdisplayError, h as enableDebugMode, g as isDebugMode, m as logger };