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

package/dist/virtualdisplay.client.es.js

@@ -1,4 +1,4 @@
-import { n as e } from "./chunk-efA98nb6.js";
+import { n as e } from "./chunk-C_CI6nMA.js";
 //#region src/client/error.ts
 var t = {
 	NO_MAPPING: "NO_MAPPING",
@@ -66,7 +66,7 @@ var t = {
 	}
 	buildUrl() {
 		let e = this.getServerUrl(), t = new URL(e);
-		return t.searchParams.set("license", this.options.license), t.searchParams.set("model", this.options.model), this.options.language !== void 0 && t.searchParams.set("language", this.options.language), this.options.debug === !0 && t.searchParams.set("debug", "true"), t.toString();
+		return t.searchParams.set("license", this.options.license), t.searchParams.set("model", this.options.model), this.options.language !== void 0 && t.searchParams.set("language", this.options.language), this.options.debug === !0 && t.searchParams.set("debug", "true"), this.options.traceparent !== void 0 && t.searchParams.set("traceparent", this.options.traceparent), t.toString();
 	}
 	getServerUrl() {
 		return this.defaultServer;
@@ -101,28 +101,48 @@ function o(e, t) {
 	e.level === "error" ? console.error(n) : e.level === "warn" ? console.warn(n) : console.log(n);
 }
 //#endregion
+//#region ../logger/src/serialise.ts
+function s(e, t = 0) {
+	let n = {
+		name: e.name,
+		message: e.message
+	};
+	e.stack !== void 0 && (n.stack = e.stack);
+	for (let t of Object.getOwnPropertyNames(e)) {
+		if (t === "name" || t === "message" || t === "stack" || t === "cause") continue;
+		let r = e[t];
+		r !== void 0 && (n[t] = r);
+	}
+	return e.cause !== void 0 && e.cause !== null && (n.cause = e.cause instanceof Error && t < 5 ? s(e.cause, t + 1) : String(e.cause)), n;
+}
+function c(e) {
+	let t = {};
+	for (let [n, r] of Object.entries(e)) t[n] = r instanceof Error ? s(r) : r;
+	return t;
+}
+//#endregion
 //#region ../utils/src/date.ts
-function s() {
+function l() {
 	return /* @__PURE__ */ new Date();
 }
-function c(e) {
+function u(e) {
 	return e.toISOString();
 }
 //#endregion
 //#region ../logger/src/logger.ts
-var l = class e {
+var d = class e {
 	constructor(e) {
 		this.config = e;
 	}
 	log(e, t, n = {}) {
 		let r = this.config.traceProvider?.() ?? {};
 		o({
-			timestamp: c(s()),
+			timestamp: u(l()),
 			level: e,
 			msg: t,
 			service: this.config.service,
 			...r,
-			...n
+			...c(n)
 		}, this.config.isDev);
 	}
 	debug(e, t) {
@@ -147,8 +167,8 @@ var l = class e {
 		}).bind(this), n;
 	}
 };
-function u(e, t) {
-	return new l({
+function f(e, t) {
+	return new d({
 		service: e,
 		isDev: t?.isDev === void 0 ? typeof process < "u" ? process.env.NODE_ENV !== "production" : !0 : t.isDev,
 		traceProvider: t?.traceProvider
@@ -156,34 +176,34 @@ function u(e, t) {
 }
 //#endregion
 //#region src/utils/logger.ts
-function d(e) {
+function p(e) {
 	if (e !== void 0) return typeof e == "object" && e && !Array.isArray(e) && !(e instanceof Error) ? e : e instanceof Error ? { error: e.message } : { value: e };
 }
-function f(e) {
+function m(e) {
 	return {
-		debug: (t, n) => e.debug(t, d(n)),
-		info: (t, n) => e.info(t, d(n)),
-		warn: (t, n) => e.warn(t, d(n)),
-		error: (t, n) => e.error(t, d(n))
+		debug: (t, n) => e.debug(t, p(n)),
+		info: (t, n) => e.info(t, p(n)),
+		warn: (t, n) => e.warn(t, p(n)),
+		error: (t, n) => e.error(t, p(n))
 	};
 }
-var p = !1, m = f(u("client", { isDev: !1 }));
-function h() {
-	p = !0, m = f(u("client", { isDev: !0 }));
+var h = !1, g = m(f("client", { isDev: !1 }));
+function _() {
+	h = !0, g = m(f("client", { isDev: !0 }));
 }
-function g() {
-	return p;
+function ee() {
+	return h;
 }
 //#endregion
 //#region src/client/ready-state-tracker.ts
-var _ = class {
+var te = class {
 	ready = !1;
 	onReady;
 	constructor(e) {
 		this.onReady = e;
 	}
 	handleMappingReceived() {
-		this.ready || (this.ready = !0, m.info("Mapping received from server, client is now ready"), this.onReady?.());
+		this.ready || (this.ready = !0, g.info("Mapping received from server, client is now ready"), this.onReady?.());
 	}
 	get isReady() {
 		return this.ready;
@@ -191,102 +211,7 @@ var _ = class {
 	clear() {
 		this.ready = !1;
 	}
-}, v = class {
-	isSelectedValue = !1;
-	constructor(e, t) {
-		this.value = e, this.attribute = t;
-	}
-	get isSelected() {
-		return this.isSelectedValue;
-	}
-	setSelected(e) {
-		this.isSelectedValue = e;
-	}
-}, ee = class {
-	name;
-	defaultValue;
-	values;
-	onSelect;
-	onChangeCallback;
-	constructor(e) {
-		this.name = e.name, this.defaultValue = e.defaultValue, this.onSelect = e.onSelect, this.values = this.createValues(e.values);
-	}
-	select(e) {
-		if (!this.values.has(e)) throw n.valueNotFound(this.name, e);
-		this.onSelect(this.name, e);
-	}
-	getValues() {
-		return Array.from(this.values.values());
-	}
-	getValue(e) {
-		return this.values.get(e);
-	}
-	onChange(e) {
-		this.onChangeCallback = e;
-	}
-	handleResult(e) {
-		let t;
-		for (let n of this.values.values()) {
-			let r = n.value === e;
-			n.setSelected(r), r && (t = n);
-		}
-		t !== void 0 && this.onChangeCallback !== void 0 && this.onChangeCallback(t);
-	}
-	createValues(e) {
-		let t = /* @__PURE__ */ new Map();
-		for (let n of e) {
-			let e = new v(n, this.name);
-			n === this.defaultValue && e.setSelected(!0), t.set(n, e);
-		}
-		return t;
-	}
-}, te = class {
-	attributes = /* @__PURE__ */ new Map();
-	constructor(e, t, n) {
-		for (let n of e) {
-			let e = this.buildOptions(n, t);
-			this.attributes.set(n.name, new ee(e));
-		}
-		this.onMutationFailed = n;
-	}
-	onMutationFailed;
-	get(e) {
-		return this.attributes.get(e);
-	}
-	defaults() {
-		let e = [];
-		for (let t of this.attributes.values()) t.defaultValue !== void 0 && e.push({
-			name: t.name,
-			value: t.defaultValue
-		});
-		return e;
-	}
-	handleResults(e) {
-		for (let t of e) {
-			if (!t.success) {
-				this.onMutationFailed?.(t.name, t.value);
-				continue;
-			}
-			this.get(t.name)?.handleResult(t.value);
-		}
-	}
-	buildOptions(e, t) {
-		let n = {
-			name: e.name,
-			values: e.values,
-			onSelect: (e, n) => {
-				t([{
-					name: e,
-					value: n
-				}], !1);
-			}
-		};
-		return e.defaultValue === void 0 ? n : {
-			...n,
-			defaultValue: e.defaultValue
-		};
-	}
-}, y = {
+}, v = {
 	HANDSHAKE: "handshake",
 	MUTATION: "mutation",
 	STATE: "state",
@@ -296,47 +221,54 @@ var _ = class {
 	MAPPING: "mapping",
 	AR_ACTIVATE: "ar_activate",
 	CONFIG: "config",
-	INTERACTION: "interaction"
-}, ne = new Set(Object.values(y));
+	INTERACTION: "interaction",
+	ANNOTATION_PLACE_MODE: "annotation_place_mode",
+	ANNOTATION_PLACED: "annotation_placed",
+	ANNOTATION_TOGGLE: "annotation_toggle"
+}, ne = new Set(Object.values(v));
 function re(e) {
 	if (typeof e != "object" || !e) return !1;
 	let t = e;
 	return typeof t.target == "string" ? !1 : typeof t.type == "string" && ne.has(t.type);
 }
 function ie(e) {
-	let t = b(e);
-	return t !== null && t.type === y.HANDSHAKE;
+	let t = y(e);
+	return t !== null && t.type === v.HANDSHAKE;
 }
 function ae(e) {
-	let t = b(e);
-	return t !== null && t.type === y.MUTATION && Array.isArray(t.results);
+	let t = y(e);
+	return t !== null && t.type === v.MUTATION && Array.isArray(t.results);
 }
 function oe(e) {
-	let t = b(e);
-	return t !== null && t.type === y.SNAPSHOT && ("data" in t || "error" in t);
+	let t = y(e);
+	return t !== null && t.type === v.SNAPSHOT && ("data" in t || "error" in t);
 }
 function se(e) {
-	let t = b(e);
-	return t !== null && t.type === y.CAMERA && Array.isArray(t.transforms);
+	let t = y(e);
+	return t !== null && t.type === v.CAMERA && Array.isArray(t.transforms);
 }
 function ce(e) {
-	let t = b(e);
-	return t !== null && t.type === y.MAPPING && Array.isArray(t.attributes);
+	let t = y(e);
+	return t !== null && t.type === v.MAPPING && Array.isArray(t.attributes);
 }
 function le(e) {
-	let t = b(e);
-	return t !== null && t.type === y.LOADING_INDICATOR && typeof t.progress == "number";
+	let t = y(e);
+	return t !== null && t.type === v.LOADING_INDICATOR && typeof t.progress == "number";
 }
 function ue(e) {
-	let t = b(e);
-	return t !== null && t.type === y.CONFIG && typeof t.viewerSettings == "object";
+	let t = y(e);
+	return t !== null && t.type === v.CONFIG && typeof t.viewerSettings == "object";
+}
+function de(e) {
+	let t = y(e);
+	return t !== null && t.type === v.ANNOTATION_PLACED && typeof t.position == "object" && t.position !== null;
 }
-function b(e) {
+function y(e) {
 	return typeof e != "object" || !e ? null : e;
 }
 //#endregion
 //#region ../messaging/src/queue.ts
-var de = class {
+var b = class {
 	pending = [];
 	isReady = !1;
 	constructor(e) {
@@ -374,8 +306,9 @@ var de = class {
 	shouldBuffer;
 	listener = null;
 	sourceId;
+	targetOrigin;
 	constructor(e, t) {
-		this.getTarget = e, this.sourceId = `vd-${Math.random().toString(36).slice(2, 8)}`, this.publisher = new de((e) => this.post(e)), this.consumer = new de((e) => this.routeToHandler(e)), this.shouldBuffer = t?.shouldBuffer ?? null, t?.bufferIncoming !== !0 && this.consumer.markReady();
+		this.getTarget = e, this.sourceId = `vd-${Math.random().toString(36).slice(2, 8)}`, this.targetOrigin = t?.targetOrigin ?? "*", this.publisher = new b((e) => this.post(e)), this.consumer = new b((e) => this.routeToHandler(e)), this.shouldBuffer = t?.shouldBuffer ?? null, t?.bufferIncoming !== !0 && this.consumer.markReady();
 	}
 	on(e, t) {
 		this.handlers.set(e, t);
@@ -383,6 +316,9 @@ var de = class {
 	off(e) {
 		this.handlers.delete(e);
 	}
+	setTargetOrigin(e) {
+		this.targetOrigin = e;
+	}
 	send(e) {
 		this.publisher.enqueue(e);
 	}
@@ -421,7 +357,7 @@ var de = class {
 		t !== null && t.postMessage({
 			...e,
 			_source: this.sourceId
-		}, "*");
+		}, this.targetOrigin);
 	}
 	routeToHandler(e) {
 		let t = this.handlers.get(e.type);
@@ -433,17 +369,141 @@ var de = class {
 		});
 	}
 };
-new Set([y.CAMERA]);
+new Set([v.CAMERA]);
 //#endregion
-//#region src/attributes/attributes.ts
+//#region src/annotations/annotations.ts
 var pe = class {
+	placedCallbacks = [];
+	constructor(e) {
+		this.send = e;
+	}
+	setEnabled(e) {
+		this.send({
+			type: v.ANNOTATION_TOGGLE,
+			enabled: e
+		});
+	}
+	startPlacing() {
+		this.send({
+			type: v.ANNOTATION_PLACE_MODE,
+			enabled: !0
+		});
+	}
+	stopPlacing() {
+		this.send({
+			type: v.ANNOTATION_PLACE_MODE,
+			enabled: !1
+		});
+	}
+	onPlaced(e) {
+		this.placedCallbacks.push(e);
+	}
+	handlePlaced(e) {
+		for (let t of this.placedCallbacks) t(e);
+	}
+}, me = class {
+	isSelectedValue = !1;
+	constructor(e, t) {
+		this.value = e, this.attribute = t;
+	}
+	get isSelected() {
+		return this.isSelectedValue;
+	}
+	setSelected(e) {
+		this.isSelectedValue = e;
+	}
+}, x = class {
+	name;
+	defaultValue;
+	values;
+	onSelect;
+	onChangeCallback;
+	constructor(e) {
+		this.name = e.name, this.defaultValue = e.defaultValue, this.onSelect = e.onSelect, this.values = this.createValues(e.values);
+	}
+	select(e) {
+		if (!this.values.has(e)) throw n.valueNotFound(this.name, e);
+		this.onSelect(this.name, e);
+	}
+	getValues() {
+		return Array.from(this.values.values());
+	}
+	getValue(e) {
+		return this.values.get(e);
+	}
+	onChange(e) {
+		this.onChangeCallback = e;
+	}
+	handleResult(e) {
+		let t;
+		for (let n of this.values.values()) {
+			let r = n.value === e;
+			n.setSelected(r), r && (t = n);
+		}
+		t !== void 0 && this.onChangeCallback !== void 0 && this.onChangeCallback(t);
+	}
+	createValues(e) {
+		let t = /* @__PURE__ */ new Map();
+		for (let n of e) {
+			let e = new me(n, this.name);
+			n === this.defaultValue && e.setSelected(!0), t.set(n, e);
+		}
+		return t;
+	}
+}, he = class {
+	attributes = /* @__PURE__ */ new Map();
+	constructor(e, t, n) {
+		for (let n of e) {
+			let e = this.buildOptions(n, t);
+			this.attributes.set(n.name, new x(e));
+		}
+		this.onMutationFailed = n;
+	}
+	onMutationFailed;
+	get(e) {
+		return this.attributes.get(e);
+	}
+	defaults() {
+		let e = [];
+		for (let t of this.attributes.values()) t.defaultValue !== void 0 && e.push({
+			name: t.name,
+			value: t.defaultValue
+		});
+		return e;
+	}
+	handleResults(e) {
+		for (let t of e) {
+			if (!t.success) {
+				this.onMutationFailed?.(t.name, t.value);
+				continue;
+			}
+			this.get(t.name)?.handleResult(t.value);
+		}
+	}
+	buildOptions(e, t) {
+		let n = {
+			name: e.name,
+			values: e.values,
+			onSelect: (e, n) => {
+				t([{
+					name: e,
+					value: n
+				}], !1);
+			}
+		};
+		return e.defaultValue === void 0 ? n : {
+			...n,
+			defaultValue: e.defaultValue
+		};
+	}
+}, ge = class {
 	registry;
 	pendingCallbacks = [];
 	constructor(e, t) {
 		this.send = e, this.onMutationFailed = t;
 	}
 	handleMappingReceived(e) {
-		m.debug("Initializing from server mapping", { attributeCount: e.attributes.length }), this.registry = new te(e.attributes, (e, t) => this.sendMutation(e, t), this.onMutationFailed), this.replayPendingCallbacks();
+		g.debug("Initializing from server mapping", { attributeCount: e.attributes.length }), this.registry = new he(e.attributes, (e, t) => this.sendMutation(e, t), this.onMutationFailed), this.replayPendingCallbacks();
 	}
 	handleMutationResult(e) {
 		this.registry?.handleResults(e.results);
@@ -470,7 +530,7 @@ var pe = class {
 		}
 		let n = this.registry.get(e);
 		if (n === void 0) {
-			m.warn(`onChange: attribute "${e}" not found — callback will not fire`);
+			g.warn(`onChange: attribute "${e}" not found — callback will not fire`);
 			return;
 		}
 		n.onChange(t);
@@ -483,7 +543,7 @@ var pe = class {
 	}
 	sendMutation(e, t) {
 		let n = {
-			type: y.MUTATION,
+			type: v.MUTATION,
 			mutations: e,
 			isInitial: t
 		};
@@ -492,11 +552,11 @@ var pe = class {
 	replayPendingCallbacks() {
 		for (let { name: e, callback: t } of this.pendingCallbacks) {
 			let n = this.registry?.get(e);
-			n === void 0 && m.warn(`onChange: attribute "${e}" not found — buffered callback will not fire`), n?.onChange(t);
+			n === void 0 && g.warn(`onChange: attribute "${e}" not found — buffered callback will not fire`), n?.onChange(t);
 		}
 		this.pendingCallbacks.length = 0;
 	}
-}, x = class {
+}, _e = class {
 	commands = [];
 	constructor(e) {
 		this.send = e;
@@ -522,7 +582,7 @@ var pe = class {
 	set() {
 		if (this.commands.length === 0) throw n.invalidParameter("No camera commands to execute. Call rotate(), tilt(), or zoom() before set().");
 		let e = {
-			type: y.CAMERA,
+			type: v.CAMERA,
 			commands: this.commands
 		};
 		this.send(e), this.commands = [];
@@ -532,12 +592,12 @@ var pe = class {
 	}
 	reset() {
 		let e = {
-			type: y.CAMERA,
+			type: v.CAMERA,
 			commands: [{ action: "reset" }]
 		};
 		this.send(e);
 	}
-}, me = class {
+}, ve = class {
 	state;
 	limitsState;
 	changeCallbacks = [];
@@ -598,7 +658,7 @@ var pe = class {
 			for (let t of this.changeCallbacks) t(e);
 		}
 	}
-}, S = class {
+}, ye = class {
 	developedCallbacks = /* @__PURE__ */ new Set();
 	errorCallbacks = /* @__PURE__ */ new Set();
 	developed = !1;
@@ -626,24 +686,24 @@ var pe = class {
 			t(e);
 		}), this.developedCallbacks.clear(), this.errorCallbacks.clear());
 	}
-}, C = class {
+}, S = class {
 	validExtensions = [".png"];
 	pendingPhotos = /* @__PURE__ */ new Map();
 	constructor(e) {
 		this.send = e;
 	}
 	take(e) {
-		this.validateFilename(e), m.debug("Taking snapshot", { filename: e });
-		let t = new S(e);
+		this.validateFilename(e), g.debug("Taking snapshot", { filename: e });
+		let t = new ye(e);
 		return this.pendingPhotos.set(t.getFilename(), t), this.send({
-			type: y.SNAPSHOT,
+			type: v.SNAPSHOT,
 			filename: e
 		}), t;
 	}
 	handleSnapshotResult(e) {
 		let r = this.pendingPhotos.get(e.filename);
 		if (r === void 0) {
-			m.warn("No pending photo found for filename", {
+			g.warn("No pending photo found for filename", {
 				filename: e.filename,
 				pendingFilenames: Array.from(this.pendingPhotos.keys())
 			});
@@ -663,7 +723,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);
 	}
-}, he = class {
+}, be = class {
 	container = null;
 	attach(e) {
 		this.container = e;
@@ -689,70 +749,70 @@ var pe = class {
 			this.container?.removeEventListener(e, n);
 		};
 	}
-}, ge = {}, w = [
+}, xe = {}, C = [
 	"en",
 	"nl",
 	"de"
-], T = ["baseLocale"], _e = [], ve, ye;
-function be(e) {
-	if (_e.length === 0) return;
+], w = ["baseLocale"], T = [], E, D;
+function Se(e) {
+	if (T.length === 0) return;
 	let t = typeof e == "string" ? e : e.href;
-	if (ve === t) return ye;
+	if (E === t) return D;
 	let n = new URL(t, "http://dummy.com"), r;
-	for (let e of _e) if (new ge(e.match, n.href).exec(n.href)) {
+	for (let e of T) if (new xe(e.match, n.href).exec(n.href)) {
 		r = e;
 		break;
 	}
-	return ve = t, ye = r, r;
+	return E = t, D = r, r;
 }
-function E(e) {
-	let t = be(e);
-	return t && t.exclude !== !0 && Array.isArray(t.strategy) ? t.strategy : T;
+function O(e) {
+	let t = Se(e);
+	return t && t.exclude !== !0 && Array.isArray(t.strategy) ? t.strategy : w;
 }
-var D = void 0, O = typeof window > "u";
+var k = void 0, A = typeof window > "u";
 globalThis.__paraglide = globalThis.__paraglide ?? {}, globalThis.__paraglide.ssr = globalThis.__paraglide.ssr ?? {};
-var k = !1, A = () => {
-	if (D) {
-		let e = D?.getStore()?.locale;
+var j = !1, M = () => {
+	if (k) {
+		let e = k?.getStore()?.locale;
 		if (e) return e;
 	}
-	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;
+	let e = w;
+	!A && typeof window < "u" && window.location?.href && (e = O(window.location.href));
+	let t = Ce(e, typeof window < "u" ? window.location?.href : void 0);
+	if (t) return j || (j = !0, N(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 xe(e, t) {
+function Ce(e, t) {
 	let n;
 	for (let t of e) {
 		if (t === "baseLocale") n = "en";
-		else if (we(t) && N.has(t)) {
-			let e = N.get(t);
+		else if (Ee(t) && F.has(t)) {
+			let e = F.get(t);
 			if (e) {
 				let t = e.getLocale();
 				if (t instanceof Promise) continue;
-				if (t !== void 0) return Ce(t);
+				if (t !== void 0) return Te(t);
 			}
 		}
-		let e = M(n);
+		let e = P(n);
 		if (e) return e;
 	}
 }
-var Se = (e) => {
+var we = (e) => {
 	e ? window.location.href = e : window.location.reload();
-}, j = (e, t) => {
+}, N = (e, t) => {
 	let n = {
 		reload: !0,
 		...t
 	}, r;
 	try {
-		r = A();
+		r = M();
 	} catch {}
-	let i = [], a = T;
-	!O && typeof window < "u" && window.location?.href && (a = E(window.location.href));
+	let i = [], a = w;
+	!A && typeof window < "u" && window.location?.href && (a = O(window.location.href));
 	for (let t of a) if (t === "baseLocale") continue;
-	else if (we(t) && N.has(t)) {
-		let n = N.get(t);
+	else if (Ee(t) && F.has(t)) {
+		let n = F.get(t);
 		if (n) {
 			let r = n.setLocale(e);
 			r instanceof Promise && (r = r.catch((e) => {
@@ -761,78 +821,78 @@ var Se = (e) => {
 		}
 	}
 	let o = () => {
-		!O && n.reload && window.location && e !== r && Se(void 0);
+		!A && n.reload && window.location && e !== r && we(void 0);
 	};
 	if (i.length) return Promise.all(i).then(() => {
 		o();
 	});
 	o();
 };
-function M(e) {
+function P(e) {
 	if (typeof e != "string") return;
 	let t = e.toLowerCase();
-	for (let e of w) if (e.toLowerCase() === t) return e;
+	for (let e of C) if (e.toLowerCase() === t) return e;
 }
-function Ce(e) {
-	let t = M(e);
+function Te(e) {
+	let t = P(e);
 	if (t) return t;
-	throw Error(`Invalid locale: ${e}. Expected one of: ${w.join(", ")}`);
+	throw Error(`Invalid locale: ${e}. Expected one of: ${C.join(", ")}`);
 }
-var N = /* @__PURE__ */ new Map();
-function we(e) {
+var F = /* @__PURE__ */ new Map();
+function Ee(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 ?? 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 ?? 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 ?? 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 ?? 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 ?? 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 ?? A();
-	return n === "en" ? Ge(e) : n === "nl" ? Ke(e) : qe(e);
-}), 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);
-}), $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 = {
+var De = () => "Activate AR", Oe = () => "AR activeren", ke = () => "AR aktivieren", Ae = ((e = {}, t = {}) => {
+	let n = t.locale ?? M();
+	return n === "en" ? De(e) : n === "nl" ? Oe(e) : ke(e);
+}), je = () => "Scan to view in AR", Me = () => "Scan om in AR te bekijken", Ne = () => "Scannen für AR-Ansicht", Pe = ((e = {}, t = {}) => {
+	let n = t.locale ?? M();
+	return n === "en" ? je(e) : n === "nl" ? Me(e) : Ne(e);
+}), Fe = () => "Use your smartphone camera to scan this QR code", Ie = () => "Gebruik de camera van je smartphone om deze QR-code te scannen", Le = () => "Verwenden Sie die Kamera Ihres Smartphones, um diesen QR-Code zu scannen", Re = ((e = {}, t = {}) => {
+	let n = t.locale ?? M();
+	return n === "en" ? Fe(e) : n === "nl" ? Ie(e) : Le(e);
+}), ze = () => "The 3D model will open in your phone's AR mode", Be = () => "Het 3D-model wordt geopend in de AR-modus van je telefoon", Ve = () => "Das 3D-Modell wird im AR-Modus Ihres Telefons geöffnet", He = ((e = {}, t = {}) => {
+	let n = t.locale ?? M();
+	return n === "en" ? ze(e) : n === "nl" ? Be(e) : Ve(e);
+}), Ue = () => "Close", We = () => "Sluiten", Ge = () => "Schließen", Ke = ((e = {}, t = {}) => {
+	let n = t.locale ?? M();
+	return n === "en" ? Ue(e) : n === "nl" ? We(e) : Ge(e);
+}), qe = () => "Toggle fullscreen", Je = () => "Volledig scherm", Ye = () => "Vollbild umschalten", Xe = ((e = {}, t = {}) => {
+	let n = t.locale ?? M();
+	return n === "en" ? qe(e) : n === "nl" ? Je(e) : Ye(e);
+}), Ze = () => "Downloading", Qe = () => "Downloaden", $e = () => "Herunterladen", et = ((e = {}, t = {}) => {
+	let n = t.locale ?? M();
+	return n === "en" ? Ze(e) : n === "nl" ? Qe(e) : $e(e);
+}), tt = () => "Rendering", nt = () => "Renderen", rt = () => "Rendern", it = ((e = {}, t = {}) => {
+	let n = t.locale ?? M();
+	return n === "en" ? tt(e) : n === "nl" ? nt(e) : rt(e);
+}), at = () => "Screenshot", ot = () => "Screenshot", st = () => "Screenshot", ct = ((e = {}, t = {}) => {
+	let n = t.locale ?? M();
+	return n === "en" ? at(e) : n === "nl" ? ot(e) : st(e);
+}), lt = () => "Reset camera", ut = () => "Camera resetten", dt = () => "Kamera zurücksetzen", ft = ((e = {}, t = {}) => {
+	let n = t.locale ?? M();
+	return n === "en" ? lt(e) : n === "nl" ? ut(e) : dt(e);
+}), pt = () => "Zoom in", mt = () => "Inzoomen", ht = () => "Hineinzoomen", gt = ((e = {}, t = {}) => {
+	let n = t.locale ?? M();
+	return n === "en" ? pt(e) : n === "nl" ? mt(e) : ht(e);
+}), _t = () => "Zoom out", vt = () => "Uitzoomen", yt = () => "Herauszoomen", bt = ((e = {}, t = {}) => {
+	let n = t.locale ?? M();
+	return n === "en" ? _t(e) : n === "nl" ? vt(e) : yt(e);
+}), xt = () => "Rotate left", St = () => "Naar links draaien", Ct = () => "Nach links drehen", wt = ((e = {}, t = {}) => {
+	let n = t.locale ?? M();
+	return n === "en" ? xt(e) : n === "nl" ? St(e) : Ct(e);
+}), Tt = () => "Rotate right", Et = () => "Naar rechts draaien", Dt = () => "Nach rechts drehen", Ot = ((e = {}, t = {}) => {
+	let n = t.locale ?? M();
+	return n === "en" ? Tt(e) : n === "nl" ? Et(e) : Dt(e);
+}), kt = () => "Tilt up", At = () => "Omhoog kantelen", jt = () => "Nach oben kippen", Mt = ((e = {}, t = {}) => {
+	let n = t.locale ?? M();
+	return n === "en" ? kt(e) : n === "nl" ? At(e) : jt(e);
+}), Nt = () => "Tilt down", Pt = () => "Omlaag kantelen", Ft = () => "Nach unten kippen", It = ((e = {}, t = {}) => {
+	let n = t.locale ?? M();
+	return n === "en" ? Nt(e) : n === "nl" ? Pt(e) : Ft(e);
+}), Lt = {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
 	height: 24,
@@ -842,40 +902,40 @@ var Te = () => "Activate AR", Ee = () => "AR activeren", De = () => "AR aktivier
 	"stroke-width": 2,
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round"
-}, It = ([e, t, n]) => {
+}, Rt = ([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 = It(e);
+		let t = Rt(e);
 		r.appendChild(t);
 	}), r;
-}, Lt = (e, t = {}) => It([
+}, zt = (e, t = {}) => Rt([
 	"svg",
 	{
-		...Ft,
+		...Lt,
 		...t
 	},
 	e
-]), Rt = [
+]), Bt = [
 	["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" }]
-], 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", {
+], Vt = [["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"
-}]], 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 = [
+}]], Ht = [["path", { d: "m6 9 6 6 6-6" }]], Ut = [["path", { d: "m15 18-6-6 6-6" }]], Wt = [["path", { d: "m9 18 6-6-6-6" }]], Gt = [["path", { d: "m18 15-6-6-6 6" }]], Kt = [
 	["path", { d: "M15 3h6v6" }],
 	["path", { d: "m21 3-7 7" }],
 	["path", { d: "m3 21 7-7" }],
 	["path", { d: "M9 21H3v-6" }]
-], Gt = [
+], qt = [
 	["path", { d: "m14 10 7-7" }],
 	["path", { d: "M20 10h-6V4" }],
 	["path", { d: "m3 21 7-7" }],
 	["path", { d: "M4 14h6v6" }]
-], 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 = [
+], Jt = [["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" }]], Yt = [
 	["circle", {
 		cx: "11",
 		cy: "11",
@@ -899,7 +959,7 @@ var Te = () => "Activate AR", Ee = () => "AR activeren", De = () => "AR aktivier
 		y1: "11",
 		y2: "11"
 	}]
-], Jt = [
+], Xt = [
 	["circle", {
 		cx: "11",
 		cy: "11",
@@ -920,26 +980,26 @@ var Te = () => "Activate AR", Ee = () => "AR activeren", De = () => "AR aktivier
 ];
 //#endregion
 //#region ../ui/src/icons.ts
-function P(e, { size: t = 20, strokeWidth: n = 1.75 } = {}) {
-	return Lt(e, {
+function I(e, { size: t = 20, strokeWidth: n = 1.75 } = {}) {
+	return zt(e, {
 		width: t,
 		height: t,
 		"stroke-width": n
 	});
 }
-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 {
+var L = {
+	ar: (e) => I(Bt, e),
+	fullscreen: (e) => I(Kt, e),
+	exitFullscreen: (e) => I(qt, e),
+	screenshot: (e) => I(Vt, e),
+	tiltUp: (e) => I(Gt, e),
+	tiltDown: (e) => I(Ht, e),
+	rotateLeft: (e) => I(Ut, e),
+	rotateRight: (e) => I(Wt, e),
+	zoomIn: (e) => I(Yt, e),
+	zoomOut: (e) => I(Xt, e),
+	reset: (e) => I(Jt, e)
+}, R = 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;
@@ -948,7 +1008,7 @@ var F = {
 		let t = this.element.querySelector("svg");
 		t === null ? this.element.appendChild(e) : t.replaceWith(e);
 	}
-}, L = {
+}, z = {
 	brand: {
 		DEFAULT: "#171717",
 		primary: "#171717",
@@ -987,7 +1047,7 @@ var F = {
 	},
 	white: "#ffffff",
 	black: "#000000"
-}, R = {
+}, B = {
 	px: "1px",
 	0: "0",
 	.5: "0.125rem",
@@ -1010,27 +1070,27 @@ var F = {
 	20: "5rem",
 	24: "6rem"
 };
-R[1], R[2], R[4], R[6], R[8], R[12];
+B[1], B[2], B[4], B[6], B[8], B[12];
 //#endregion
 //#region ../ui/src/vanilla/components/card/index.ts
-var Yt = class {
+var Zt = class {
 	element;
 	constructor() {
 		this.element = document.createElement("div"), Object.assign(this.element.style, {
-			background: L.white,
-			borderRadius: R[3],
-			padding: R[6],
-			boxShadow: `0 ${R[2]} ${R[8]} oklch(0% 0 0 / 20%)`,
+			background: z.white,
+			borderRadius: B[3],
+			padding: B[6],
+			boxShadow: `0 ${B[2]} ${B[8]} oklch(0% 0 0 / 20%)`,
 			maxWidth: "20rem",
 			width: "100%"
 		});
 	}
-}, Xt = class {
+}, Qt = class {
 	card;
 	backdrop;
 	keyHandler = null;
 	constructor(e = {}) {
-		this.options = e, this.card = new Yt(), this.backdrop = this.createBackdrop(), this.backdrop.appendChild(this.card.element);
+		this.options = e, this.card = new Zt(), this.backdrop = this.createBackdrop(), this.backdrop.appendChild(this.card.element);
 	}
 	open() {
 		document.body.appendChild(this.backdrop), this.keyHandler = (e) => {
@@ -1044,7 +1104,7 @@ var Yt = class {
 		let e = document.createElement("div");
 		return Object.assign(e.style, {
 			position: "fixed",
-			inset: R[0],
+			inset: B[0],
 			background: "oklch(0% 0 0 / 50%)",
 			zIndex: "9999",
 			display: "flex",
@@ -1054,7 +1114,7 @@ var Yt = class {
 			t.target === e && this.close();
 		}), e;
 	}
-}, Zt = class {
+}, $t = class {
 	element;
 	selectCallback = null;
 	constructor(e, t, n) {
@@ -1072,7 +1132,7 @@ var Yt = class {
 	onSelect(e) {
 		this.selectCallback = e;
 	}
-}, Qt = class {
+}, en = class {
 	element;
 	select;
 	constructor(e, t, n, r, i) {
@@ -1085,7 +1145,7 @@ var Yt = 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 = Lt(Bt, {
+		let s = zt(Ht, {
 			width: 16,
 			height: 16,
 			"stroke-width": 2
@@ -1100,7 +1160,7 @@ var Yt = class {
 			e(this.select.value);
 		});
 	}
-}, z = {
+}, V = {
 	fontFamily: {
 		sans: [
 			"Mona Sans",
@@ -1139,42 +1199,42 @@ var Yt = class {
 		normal: "1.5",
 		relaxed: "1.75"
 	}
-}, $t = z.fontFamily.sans.join(", "), en = class {
+}, tn = V.fontFamily.sans.join(", "), nn = class {
 	qrLib = null;
 	dialog = null;
 	async show(t) {
-		this.hide(), this.qrLib ??= await import("./browser-DbgxVbZp.js").then((t) => /* @__PURE__ */ e(t.default, 1));
+		this.hide(), this.qrLib ??= await import("./browser-DxtIwHNu.js").then((t) => /* @__PURE__ */ e(t.default, 1));
 		let n = await this.qrLib.toDataURL(t, {
 			width: 256,
 			margin: 4,
 			errorCorrectionLevel: "M",
 			color: {
-				dark: L.black,
-				light: L.white
+				dark: z.black,
+				light: z.white
 			}
 		});
-		this.dialog = new Xt({ onClose: () => {
+		this.dialog = new Qt({ onClose: () => {
 			this.dialog = null;
 		} }), Object.assign(this.dialog.card.element.style, {
 			display: "flex",
 			flexDirection: "column",
 			alignItems: "center",
-			gap: R[3],
-			fontFamily: $t
-		}), this.dialog.card.element.appendChild(this.createText(Me(), {
-			fontSize: z.fontSize.base,
-			fontWeight: z.fontWeight.semibold,
-			color: L.neutral[900]
-		})), this.dialog.card.element.appendChild(this.createText(Ie(), {
-			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: z.fontSize.xs,
-			color: L.neutral[500]
+			gap: B[3],
+			fontFamily: tn
+		}), this.dialog.card.element.appendChild(this.createText(Pe(), {
+			fontSize: V.fontSize.base,
+			fontWeight: V.fontWeight.semibold,
+			color: z.neutral[900]
+		})), this.dialog.card.element.appendChild(this.createText(Re(), {
+			fontSize: V.fontSize.sm,
+			color: z.neutral[600]
+		})), this.dialog.card.element.appendChild(this.createQrImage(n)), this.dialog.card.element.appendChild(this.createText(He(), {
+			fontSize: V.fontSize.xs,
+			color: z.neutral[500]
 		}));
-		let r = new I({
+		let r = new R({
 			variant: "outline",
-			label: We(),
+			label: Ke(),
 			onClick: () => {
 				this.hide();
 			}
@@ -1195,12 +1255,12 @@ var Yt = class {
 	createQrImage(e) {
 		let t = document.createElement("img");
 		return t.src = e, t.alt = "QR code", Object.assign(t.style, {
-			width: R[24],
-			height: R[24],
-			borderRadius: R[1]
+			width: B[24],
+			height: B[24],
+			borderRadius: B[1]
 		}), t;
 	}
-}, B = z.fontFamily.sans.join(", "), tn = `
+}, H = V.fontFamily.sans.join(", "), rn = `
 :root { 
   --primary: oklch(5% 0 0);
   --primary-foreground: oklch(100% 0 0);
@@ -1224,7 +1284,7 @@ var Yt = class {
   gap: 0.5rem;
   border: 1px solid transparent;
   border-radius: var(--radius);
-  font-family: ${B};
+  font-family: ${H};
   font-size: 0.875rem;
   font-weight: 600;
   white-space: nowrap;
@@ -1281,7 +1341,7 @@ var Yt = class {
   border-radius: var(--radius);
   background: var(--background);
   color: var(--foreground);
-  font-family: ${B};
+  font-family: ${H};
   font-size: 0.875rem;
   font-weight: 600;
   cursor: pointer;
@@ -1315,7 +1375,7 @@ var Yt = class {
   background: var(--background);
   appearance: none;
   color: var(--foreground);
-  font-family: ${B};
+  font-family: ${H};
   font-size: 0.875rem;
   font-weight: 400;
   cursor: pointer;
@@ -1337,20 +1397,95 @@ var Yt = class {
   color: var(--muted-foreground);
   pointer-events: none;
 }
-`, V = !1;
-function nn() {
-	if (V || typeof document > "u") return;
-	V = !0;
+
+/* ── Annotation layer ───────────────────────────────────── */
+.vd-annotations-layer {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  pointer-events: none;
+  overflow: visible !important; /* override CSS2DRenderer inline style */
+}
+
+.vd-annotation-marker {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.75rem;
+  block-size: 1.75rem;
+  border-radius: 50%;
+  border: 2px solid oklch(100% 0 0);
+  background: var(--primary);
+  color: var(--primary-foreground);
+  font-family: ${H};
+  font-size: 0.8125rem;
+  font-weight: 600;
+  cursor: pointer;
+  pointer-events: auto;
+  box-shadow: 0 2px 8px oklch(5% 0 0 / 20%);
+  transition: transform 100ms ease;
+  position: relative;
+}
+.vd-annotation-marker:hover { transform: scale(1.1); }
+
+.vd-annotation-popup {
+  position: absolute;
+  inset-block-end: calc(100% + 0.5rem);
+  inset-inline-start: 50%;
+  transform: translateX(-50%);
+  background: var(--background);
+  color: var(--foreground);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 0.75rem 1rem;
+  max-inline-size: 15rem;
+  box-shadow: 0 4px 6px oklch(5% 0 0 / 8%), 0 2px 4px oklch(5% 0 0 / 6%);
+  pointer-events: auto;
+  white-space: normal;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .vd-annotation-popup {
+    animation: vd-popup-in 150ms ease;
+  }
+}
+
+@keyframes vd-popup-in {
+  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
+  to { opacity: 1; transform: translateX(-50%) translateY(0); }
+}
+
+.vd-annotation-popup-title {
+  font-family: ${H};
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.25rem;
+}
+
+.vd-annotation-popup-description {
+  font-family: ${H};
+  font-size: 0.8125rem;
+  font-weight: 400;
+  line-height: 1.125rem;
+  color: var(--muted-foreground);
+  margin-block-start: 0.25rem;
+}
+`, an = !1;
+function on() {
+	if (an || typeof document > "u") return;
+	an = !0;
 	let e = document.createElement("style");
-	e.id = "vd-ui-vanilla", e.textContent = tn, document.head.appendChild(e);
+	e.id = "vd-ui-vanilla", e.textContent = rn, document.head.appendChild(e);
 }
 //#endregion
 //#region src/ui/loading.ts
-function H(e) {
+function sn(e) {
 	let t = Math.max(0, Math.min(1, e));
 	return t * t * (3 - 2 * t);
 }
-function rn(e, t, n, r, i, a) {
+function cn(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 * _,
@@ -1358,12 +1493,12 @@ function rn(e, t, n, r, i, a) {
 		g
 	];
 }
-function an(e, t, n) {
+function ln(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) {
+function un(e, t, n, r, i) {
 	let a = t(n), o = t(r);
-	an(e, a, [
+	ln(e, a, [
 		a[0] + (o[0] - a[0]) * i,
 		a[1] + (o[1] - a[1]) * i,
 		a[2]
@@ -1401,7 +1536,7 @@ var U = [
 	-1,
 	1,
 	-1
-], sn = [
+], dn = [
 	[U, W],
 	[W, G],
 	[G, K],
@@ -1414,8 +1549,8 @@ var U = [
 	[J, Y],
 	[Y, X],
 	[X, q]
-], cn = 400, ln = "-apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif";
-function un() {
+], fn = 400, pn = "-apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif";
+function mn() {
 	let e = document.createElement("div");
 	Object.assign(e.style, {
 		position: "absolute",
@@ -1451,21 +1586,21 @@ function un() {
 		fontWeight: "400",
 		color: "#000",
 		fontVariantNumeric: "tabular-nums",
-		fontFamily: ln
+		fontFamily: pn
 	});
 	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), {
+		fontFamily: pn
+	}), i.textContent = et(), n.appendChild(r), n.appendChild(i), e.appendChild(t), e.appendChild(n), {
 		overlay: e,
 		canvas: t,
 		pctEl: r,
 		phaseEl: i
 	};
 }
-var dn = class {
+var hn = class {
 	overlay;
 	canvas;
 	ctx;
@@ -1478,17 +1613,17 @@ var dn = class {
 	visible = !1;
 	constructor(e, t = {}) {
 		this.startTime = performance.now();
-		let n = un();
+		let n = mn();
 		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;
+		let r = t.showDelay ?? fn;
 		this.showTimerId = setTimeout(() => {
 			this.reveal();
 		}, r);
 	}
 	get loadingTexts() {
 		return {
-			downloading: Qe(),
-			rendering: nt()
+			downloading: et(),
+			rendering: it()
 		};
 	}
 	updateProgress(e, t) {
@@ -1535,26 +1670,29 @@ var dn = class {
 		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)";
+		let r = e / 2, i = t * .44, a = Math.min(e, t) * .08, o = (e) => cn(e, .785, .615, r, i, a), s = n % 6 / 6, c = dn.length, l;
+		l = s < .35 ? sn(s / .35) * c : s < .55 ? c : s < .9 ? (1 - sn((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];
+			let t = dn[e];
 			if (t === void 0) continue;
 			let n = Math.min(1, l - e);
-			on(this.ctx, o, t[0], t[1], n);
+			un(this.ctx, o, t[0], t[1], n);
 		}
 		this.ctx.shadowBlur = 0;
 	}
-}, fn = class {
+}, gn = class {
 	element;
 	arBtn = null;
 	fullscreenBtn = null;
 	onFullscreenChange;
 	constructor(e) {
-		this.options = e, this.element = document.createElement("div"), this.onFullscreenChange = () => {
+		this.options = e, this.element = document.createElement("div"), Object.assign(this.element.style, {
+			display: "flex",
+			gap: "0.375rem"
+		}), this.onFullscreenChange = () => {
 			if (this.fullscreenBtn === null) return;
 			let e = document.fullscreenElement !== null;
-			this.fullscreenBtn.setIcon(e ? F.exitFullscreen() : F.fullscreen());
+			this.fullscreenBtn.setIcon(e ? L.exitFullscreen() : L.fullscreen());
 		}, document.addEventListener("fullscreenchange", this.onFullscreenChange);
 	}
 	syncButton(e, t, n) {
@@ -1565,19 +1703,19 @@ var dn = 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 I({
+		this.arBtn = this.syncButton(this.arBtn, e.ar !== !1 && this.options.onAr !== void 0, () => new R({
 			variant: "outline",
 			size: "icon",
-			label: Oe(),
-			icon: F.ar(),
+			label: Ae(),
+			icon: L.ar(),
 			onClick: () => {
 				this.options.onAr?.();
 			}
-		})), this.fullscreenBtn = this.syncButton(this.fullscreenBtn, e.fullscreen !== !1 && this.options.onFullscreen !== void 0, () => new I({
+		})), this.fullscreenBtn = this.syncButton(this.fullscreenBtn, e.fullscreen !== !1 && this.options.onFullscreen !== void 0, () => new R({
 			variant: "outline",
 			size: "icon",
-			label: Je(),
-			icon: F.fullscreen(),
+			label: Xe(),
+			icon: L.fullscreen(),
 			onClick: () => {
 				this.options.onFullscreen?.();
 			}
@@ -1586,112 +1724,133 @@ var dn = class {
 	destroy() {
 		document.removeEventListener("fullscreenchange", this.onFullscreenChange);
 	}
-}, Z = .5, pn = class e {
+}, Z = .5, _n = class e {
 	element;
 	constructor(t, n) {
 		this.element = Object.assign(document.createElement("div"), { className: "vd-camera-controls" });
-		let r = n.rotation, i = n.tilt, a = n.zoom, o = 0, s = (e) => Math.max(n.limits?.minZoom ?? 1, Math.min(n.limits?.maxZoom ?? Infinity, e)), c = (e) => {
-			let t = n.limits?.minRotate, r = n.limits?.maxRotate;
-			return t !== void 0 || r !== void 0 ? Math.max(t ?? -Infinity, Math.min(r ?? Infinity, e)) : e;
-		}, l = (e) => {
-			let a = n.limits?.minTilt, s = n.limits?.maxTilt;
-			if (a !== void 0 || s !== void 0) {
-				i = Math.max(a ?? 0, Math.min(s ?? 180, i + e)), t.tilt(i).set();
-				return;
-			}
-			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 I({
+		let r = {
+			targetRotation: n.rotation,
+			targetTilt: n.tilt,
+			targetZoom: n.zoom,
+			thetaOffset: 0
+		}, i = vn(t, n, r);
+		n.onChange((e) => {
+			r.targetRotation = e.rotation - r.thetaOffset, r.targetTilt = e.tilt, r.targetZoom = e.zoom, yn(i, n, e);
+		}), this.element.appendChild(e.buildZoom(i.zoomOut, i.zoomIn)), this.element.appendChild(e.buildDpad(i.tiltUp, i.rotateLeft, i.reset, i.rotateRight, i.tiltDown));
+	}
+	static buildZoom(e, t) {
+		let n = document.createElement("div");
+		return n.className = "vd-zoom", n.appendChild(e.element), n.appendChild(t.element), n;
+	}
+	static buildDpad(e, t, n, r, i) {
+		let a = document.createElement("div");
+		a.className = "vd-dpad";
+		for (let [o, s] of [
+			[e, "up"],
+			[t, "left"],
+			[n, "center"],
+			[r, "right"],
+			[i, "down"]
+		]) o.element.classList.add(`vd-dpad-${s}`), a.appendChild(o.element);
+		return a;
+	}
+};
+function vn(e, t, n) {
+	let r = (e) => Math.max(t.limits?.minZoom ?? 1, Math.min(t.limits?.maxZoom ?? Infinity, e)), i = (e) => {
+		let n = t.limits?.minRotate, r = t.limits?.maxRotate;
+		return n !== void 0 || r !== void 0 ? Math.max(n ?? -Infinity, Math.min(r ?? Infinity, e)) : e;
+	}, a = (r) => {
+		let i = t.limits?.minTilt, a = t.limits?.maxTilt;
+		if (i !== void 0 || a !== void 0) {
+			n.targetTilt = Math.max(i ?? 0, Math.min(a ?? 180, n.targetTilt + r)), e.tilt(n.targetTilt).set();
+			return;
+		}
+		let o = n.targetTilt + r;
+		o > 180 || o < 0 ? (n.targetTilt = o > 180 ? 360 - o : -o, n.thetaOffset = (n.thetaOffset + 180) % 360, e.tilt(n.targetTilt).rotate(n.targetRotation + n.thetaOffset).set()) : (n.targetTilt = o, e.tilt(n.targetTilt).set());
+	};
+	return {
+		zoomOut: new R({
 			variant: "outline",
 			size: "icon",
-			label: vt(),
-			icon: F.zoomOut(),
+			label: bt(),
+			icon: L.zoomOut(),
 			onClick: () => {
-				a = s(a - 10), t.zoom(a).set();
+				n.targetZoom = r(n.targetZoom - 10), e.zoom(n.targetZoom).set();
 			}
-		}), d = new I({
+		}),
+		zoomIn: new R({
 			variant: "outline",
 			size: "icon",
-			label: mt(),
-			icon: F.zoomIn(),
+			label: gt(),
+			icon: L.zoomIn(),
 			onClick: () => {
-				a = s(a + 10), t.zoom(a).set();
+				n.targetZoom = r(n.targetZoom + 10), e.zoom(n.targetZoom).set();
 			}
-		}), f = new I({
+		}),
+		tiltUp: new R({
 			variant: "outline",
 			size: "icon",
-			label: At(),
-			icon: F.tiltUp(),
+			label: Mt(),
+			icon: L.tiltUp(),
 			onClick: () => {
-				l(-15);
+				a(-15);
 			}
-		}), p = new I({
+		}),
+		rotateLeft: new R({
 			variant: "outline",
 			size: "icon",
-			label: St(),
-			icon: F.rotateLeft(),
+			label: wt(),
+			icon: L.rotateLeft(),
 			onClick: () => {
-				r = c(r - 15), t.rotate(r + o).set();
+				n.targetRotation = i(n.targetRotation - 15), e.rotate(n.targetRotation + n.thetaOffset).set();
 			}
-		}), m = new I({
+		}),
+		reset: new R({
 			variant: "outline",
 			size: "icon",
-			label: ut(),
-			icon: F.reset(),
+			label: ft(),
+			icon: L.reset(),
 			onClick: () => {
-				o = 0, t.reset();
+				n.thetaOffset = 0, e.reset();
 			}
-		}), h = new I({
+		}),
+		rotateRight: new R({
 			variant: "outline",
 			size: "icon",
-			label: Et(),
-			icon: F.rotateRight(),
+			label: Ot(),
+			icon: L.rotateRight(),
 			onClick: () => {
-				r = c(r + 15), t.rotate(r + o).set();
+				n.targetRotation = i(n.targetRotation + 15), e.rotate(n.targetRotation + n.thetaOffset).set();
 			}
-		}), g = new I({
+		}),
+		tiltDown: new R({
 			variant: "outline",
 			size: "icon",
-			label: Pt(),
-			icon: F.tiltDown(),
+			label: It(),
+			icon: L.tiltDown(),
 			onClick: () => {
-				l(15);
+				a(15);
 			}
-		}), _ = (e) => {
-			let t = n.limits;
-			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);
-		}), this.element.appendChild(e.buildZoom(u, d)), this.element.appendChild(e.buildDpad(f, p, m, h, g));
-	}
-	static buildZoom(e, t) {
-		let n = document.createElement("div");
-		return n.className = "vd-zoom", n.appendChild(e.element), n.appendChild(t.element), n;
-	}
-	static buildDpad(e, t, n, r, i) {
-		let a = document.createElement("div");
-		a.className = "vd-dpad";
-		for (let [o, s] of [
-			[e, "up"],
-			[t, "left"],
-			[n, "center"],
-			[r, "right"],
-			[i, "down"]
-		]) o.element.classList.add(`vd-dpad-${s}`), a.appendChild(o.element);
-		return a;
-	}
-}, mn = 5;
+		})
+	};
+}
+function yn(e, t, n) {
+	let r = t.limits;
+	r !== void 0 && (e.zoomOut.element.disabled = r.minZoom !== void 0 && n.zoom <= r.minZoom + Z, e.zoomIn.element.disabled = r.maxZoom !== void 0 && n.zoom >= r.maxZoom - Z, e.tiltUp.element.disabled = r.minTilt !== void 0 && n.tilt <= r.minTilt + Z, e.tiltDown.element.disabled = r.maxTilt !== void 0 && n.tilt >= r.maxTilt - Z, e.rotateLeft.element.disabled = r.minRotate !== void 0 && n.rotation <= r.minRotate + Z, e.rotateRight.element.disabled = r.maxRotate !== void 0 && n.rotation >= r.maxRotate - Z);
+}
+//#endregion
+//#region src/ui/controls/attribute-group.ts
+var bn = 5;
 function Q(e) {
 	let t = e.replace(/([A-Z])/g, " $1").trim();
 	return t.charAt(0).toUpperCase() + t.slice(1).toLowerCase();
 }
-function hn(e, t, n, r, i) {
+function xn(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 = 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);
+	let s = e.values.find((n) => t.getValue(e.name, n)?.isSelected === !0), c = e.values.map(Q), l = e.values.length <= bn ? new $t(e.values, s, c) : new en(e.name, e.values, Q(e.name), s, c);
 	return l.onSelect((t) => {
 		n.dispatch("ui:select", {
 			attribute: e.name,
@@ -1706,7 +1865,7 @@ function hn(e, t, n, r, i) {
 }
 //#endregion
 //#region src/ui/styles.ts
-var gn = z.fontFamily.sans.join(", "), $ = "\n  position: absolute;\n  display: flex;\n  z-index: 10;\n", _n = `
+var Sn = V.fontFamily.sans.join(", "), $ = "\n  position: absolute;\n  display: flex;\n  z-index: 10;\n", Cn = `
 /* Override browser's default black fullscreen backdrop */
 .vd-container:fullscreen {
   background: oklch(100% 0 0);
@@ -1715,51 +1874,51 @@ var gn = z.fontFamily.sans.join(", "), $ = "\n  position: absolute;\n  display:
 /* Layout slots — four corners */
 .vd-slot-top-right {
   ${$}
-  inset-block-start: ${R[3]};
-  inset-inline-end: ${R[3]};
+  inset-block-start: ${B[3]};
+  inset-inline-end: ${B[3]};
   flex-direction: column;
   align-items: flex-end;
-  gap: ${R[1.5]};
+  gap: ${B[1.5]};
 }
 
 .vd-slot-bottom-left {
   ${$}
-  inset-block-end: ${R[3]};
-  inset-inline-start: ${R[3]};
+  inset-block-end: ${B[3]};
+  inset-inline-start: ${B[3]};
   flex-direction: column;
   align-items: flex-start;
-  gap: ${R[1.5]};
+  gap: ${B[1.5]};
 }
 
 .vd-slot-bottom-right {
   ${$}
-  inset-block-end: ${R[3]};
-  inset-inline-end: ${R[3]};
+  inset-block-end: ${B[3]};
+  inset-inline-end: ${B[3]};
   flex-direction: row;
-  gap: ${R[1.5]};
+  gap: ${B[1.5]};
 }
 
 /* Component styles — no positioning */
 .vd-camera-controls {
   display: flex;
   flex-direction: column;
-  gap: ${R[1]};
-  background: color-mix(in oklch, ${L.white} 85%, transparent);
+  gap: ${B[1]};
+  background: color-mix(in oklch, ${z.white} 85%, transparent);
   backdrop-filter: blur(8px);
-  border-radius: ${R[2]};
-  padding: ${R[2]};
+  border-radius: ${B[2]};
+  padding: ${B[2]};
 }
 
 .vd-zoom {
   display: flex;
-  gap: ${R[.5]};
+  gap: ${B[.5]};
 }
 
 .vd-dpad {
   display: grid;
-  grid-template-columns: repeat(3, ${R[9]});
-  grid-template-rows: repeat(3, ${R[9]});
-  gap: ${R[.5]};
+  grid-template-columns: repeat(3, ${B[9]});
+  grid-template-rows: repeat(3, ${B[9]});
+  gap: ${B[.5]};
 }
 
 .vd-dpad-up    { grid-column: 2; grid-row: 1; }
@@ -1771,40 +1930,40 @@ var gn = z.fontFamily.sans.join(", "), $ = "\n  position: absolute;\n  display:
 .vd-attributes {
   display: flex;
   flex-direction: column;
-  gap: ${R[2]};
-  background: color-mix(in oklch, ${L.white} 85%, transparent);
+  gap: ${B[2]};
+  background: color-mix(in oklch, ${z.white} 85%, transparent);
   backdrop-filter: blur(8px);
-  border-radius: ${R[2]};
-  padding: ${R[2]};
-  font-family: ${gn};
+  border-radius: ${B[2]};
+  padding: ${B[2]};
+  font-family: ${Sn};
 }
 
 .vd-attribute {
   display: flex;
   flex-direction: column;
-  gap: ${R[1]};
+  gap: ${B[1]};
 }
 
 .vd-attribute-label {
-  font-size: ${z.fontSize.xs};
-  font-weight: ${z.fontWeight.medium};
-  color: ${L.neutral[900]};
-  font-family: ${gn};
+  font-size: ${V.fontSize.xs};
+  font-weight: ${V.fontWeight.medium};
+  color: ${z.neutral[900]};
+  font-family: ${Sn};
 }
 
 `;
-function vn() {
-	if (nn(), document.getElementById("vd-styles") !== null) return;
+function wn() {
+	if (on(), document.getElementById("vd-styles") !== null) return;
 	let e = document.createElement("style");
-	e.id = "vd-styles", e.textContent = _n, document.head.appendChild(e);
+	e.id = "vd-styles", e.textContent = Cn, document.head.appendChild(e);
 }
 //#endregion
 //#region src/ui/standard-interface.ts
-function yn(e, t) {
+function Tn(e, t) {
 	let n = document.createElement("a");
 	n.href = `data:image/png;base64,${e}`, n.download = t, n.click();
 }
-var bn = class {
+var En = class {
 	options;
 	settings = {};
 	container = null;
@@ -1822,15 +1981,18 @@ var bn = class {
 		this.options = e;
 	}
 	attach(e) {
-		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({
+		wn(), this.container = e, this.loading = new hn(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");
+	}
+	onReady() {
+		this.loading?.hide(), this.loading = null, this.mountToolbar(), this.cameraControls !== null && (this.cameraControls.element.style.display = "flex"), this.attributes !== null && (this.attributes.style.display = "flex");
+	}
+	mountToolbar() {
+		this.actionBar !== null || this.slots.bottomRight === null || (this.actionBar = new gn({
 			onAr: this.options.onAr,
 			onFullscreen: () => {
 				document.fullscreenElement === null ? this.container?.requestFullscreen() : document.exitFullscreen();
 			}
-		}), 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");
+		}), this.actionBar.applySettings(this.settings), this.slots.bottomRight.appendChild(this.actionBar.element), this.syncScreenshotButton(), this.placeScreenshotButton());
 	}
 	updateProgress(e, t) {
 		this.loading?.updateProgress(e, t);
@@ -1839,12 +2001,12 @@ var bn = class {
 		this.loading?.showError(e);
 	}
 	applyViewerSettings(e) {
-		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();
+		this.settings = e, e.language !== void 0 && N(e.language, { reload: !1 }), 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.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)) {
+		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 _n(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.settings.attributeControls === !1))) {
 			this.attributes = document.createElement("div"), this.attributes.className = "vd-attributes", this.attributes.style.display = "none";
-			for (let n of t) this.attributes.appendChild(hn(n, e, this.options.eventBus, this.options.onSelect, this.options.onSubscribe));
+			for (let n of t) this.attributes.appendChild(xn(n, e, this.options.eventBus, this.options.onSelect, this.options.onSubscribe));
 			this.slots.bottomLeft.appendChild(this.attributes);
 		}
 	}
@@ -1862,14 +2024,14 @@ var bn = class {
 	}
 	syncScreenshotButton() {
 		let e = this.settings.screenshot === !0;
-		e && this.screenshotBtn === null && (this.screenshotBtn = new I({
+		e && this.screenshotBtn === null && (this.screenshotBtn = new R({
 			variant: "outline",
 			size: "icon",
-			label: ot(),
-			icon: F.screenshot(),
+			label: ct(),
+			icon: L.screenshot(),
 			onClick: () => {
 				this.options.snapshotApi.take("snapshot.png").onDeveloped(({ data: e, filename: t }) => {
-					yn(e, t);
+					Tn(e, t);
 				});
 			}
 		})), !e && this.screenshotBtn !== null && (this.screenshotBtn.element.remove(), this.screenshotBtn = null);
@@ -1877,13 +2039,14 @@ var bn = class {
 	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 {
+}, Dn = class {
 	attributes;
 	readyStateTracker;
 	messenger;
 	cameraApi;
 	cameraPositionApi;
 	snapshotApi;
+	annotationsApi;
 	eventBus;
 	ui;
 	qrModal;
@@ -1897,17 +2060,17 @@ var bn = class {
 		let t = (e) => {
 			this.messenger.send(e);
 		};
-		this.attributes = new pe(t, (e, t) => {
+		this.attributes = new ge(t, (e, t) => {
 			for (let n of this.mutationFailedCallbacks) n({
 				attribute: e,
 				value: t
 			});
-		}), 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 _(() => {
+		}), this.snapshotApi = new S(t), this.annotationsApi = new pe(t), this.cameraApi = new _e(t), this.cameraPositionApi = new ve(), this.eventBus = new be(), this.qrModal = new nn(), this.readyStateTracker = new te(() => {
 			let e = this.readyCallbacks;
 			this.readyCallbacks = [];
 			for (let t of e) t(this);
 			this.ui.onReady();
-		}), this.ui = new bn({
+		}), this.ui = new En({
 			snapshotApi: this.snapshotApi,
 			cameraApi: this.cameraApi,
 			cameraPositionApi: this.cameraPositionApi,
@@ -1920,28 +2083,49 @@ var bn = class {
 		}), this.registerHandlers(), this.messenger.start(), this.createAndConnectIframe();
 	}
 	registerHandlers() {
-		this.messenger.on(y.HANDSHAKE, (e) => {
-			ie(e) && (m.info("Server handshake received, flushing publisher queue"), this.messenger.markReady());
-		}), this.messenger.on(y.MUTATION, (e) => {
+		this.messenger.on(v.HANDSHAKE, (e) => {
+			ie(e) && (g.info("Server handshake received, flushing publisher queue"), this.messenger.markReady());
+		}), this.messenger.on(v.MUTATION, (e) => {
 			ae(e) && this.attributes.handleMutationResult(e);
-		}), this.messenger.on(y.SNAPSHOT, (e) => {
+		}), this.messenger.on(v.SNAPSHOT, (e) => {
 			oe(e) && this.snapshotApi.handleSnapshotResult(e);
-		}), this.messenger.on(y.CAMERA, (e) => {
+		}), this.messenger.on(v.CAMERA, (e) => {
 			se(e) && this.cameraPositionApi.handlePositionUpdate(e);
-		}), this.messenger.on(y.LOADING_INDICATOR, (e) => {
+		}), this.messenger.on(v.LOADING_INDICATOR, (e) => {
 			le(e) && (e.error === void 0 ? this.ui.updateProgress(e.progress, e.phase) : this.ui.showError(e.error));
-		}), this.messenger.on(y.CONFIG, (e) => {
-			ue(e) && (e.viewerSettings !== void 0 && this.ui.applyViewerSettings(e.viewerSettings), this.cameraPositionApi.applyLimits(e.cameraLimits));
-		}), this.messenger.on(y.MAPPING, (e) => {
+		}), this.messenger.on(v.CONFIG, (e) => {
+			ue(e) && this.handleConfig(e);
+		}), this.messenger.on(v.ANNOTATION_PLACED, (e) => {
+			de(e) && this.annotationsApi.handlePlaced(e.position);
+		}), this.messenger.on(v.MAPPING, (e) => {
 			ce(e) && (this.attributes.handleMappingReceived(e), this.ui.renderAttributeControls(this.attributes, e.attributes), this.readyStateTracker.handleMappingReceived());
 		});
 	}
+	handleConfig(e) {
+		let t = e.viewerSettings, n = this.options.viewerSettings;
+		if (t !== void 0 || n !== void 0) {
+			let e = n === void 0 ? t : {
+				...t ?? {},
+				...n
+			};
+			if (n !== void 0 && t !== void 0) {
+				let e = Object.entries(n).filter(([e, n]) => t[e] !== n).map(([e, n]) => `${e} (metadata: ${t[e] ?? "undefined"}, override: ${n})`);
+				e.length > 0 && g.warn(`Viewer settings override active: ${e.join(", ")}`);
+			}
+			this.ui.applyViewerSettings(e), this.annotationsApi.setEnabled(e.annotations !== !1);
+		}
+		this.cameraPositionApi.applyLimits(e.cameraLimits);
+	}
 	initializeLogging() {
-		this.options.debug === !0 && h(), m.info("Initializing Virtualdisplay client", { model: this.options.model });
+		this.options.debug === !0 && _(), g.info("Initializing Virtualdisplay client", { model: this.options.model });
 	}
 	createAndConnectIframe() {
 		let e = new r(this.options).create();
 		this.container = e.container, this.iframe = e.iframe, this.eventBus.attach(this.container), this.ui.attach(this.container);
+		try {
+			let e = new URL(this.iframe.src).origin;
+			this.messenger.setTargetOrigin(e);
+		} catch {}
 	}
 	select(e, t) {
 		this.attributes.select(e, t);
@@ -1974,6 +2158,9 @@ var bn = class {
 	on(e, t) {
 		this.eventBus.on(e, t);
 	}
+	get annotations() {
+		return this.annotationsApi;
+	}
 	get camera() {
 		return this.cameraApi;
 	}
@@ -1991,4 +2178,4 @@ var bn = class {
 	}
 };
 //#endregion
-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 };
+export { pe as Annotations, x as Attribute, me as AttributeValue, _e as Camera, t as ERROR_CODES, ye as Photo, S as Snapshot, Dn as VirtualdisplayClient, n as VirtualdisplayError, _ as enableDebugMode, ee as isDebugMode, g as logger };