@virtualdisplay.io/client 4.0.0-alpha.2 → 4.0.0-alpha.21

package/dist/virtualdisplay.client.es.js

@@ -1,798 +1,3574 @@
-//#region src/client/error.ts
-var e = {
-	NO_MAPPING: "NO_MAPPING",
-	ATTRIBUTE_NOT_FOUND: "ATTRIBUTE_NOT_FOUND",
-	VALUE_NOT_FOUND: "VALUE_NOT_FOUND",
-	PARENT_NOT_FOUND: "PARENT_NOT_FOUND",
-	INVALID_PARAMETER: "INVALID_PARAMETER",
-	SNAPSHOT_FAILED: "SNAPSHOT_FAILED"
-}, t = class t extends Error {
-	code;
-	constructor(e, n) {
-		super(e), this.name = "VirtualdisplayError", this.code = n, Error.captureStackTrace !== void 0 && Error.captureStackTrace(this, t);
-	}
-	static noMapping() {
-		return new t("No attributes available. Waiting for server metadata.", e.NO_MAPPING);
-	}
-	static attributeNotFound(n) {
-		return new t(`Attribute "${n}" not found in mapping`, e.ATTRIBUTE_NOT_FOUND);
-	}
-	static valueNotFound(n, r) {
-		return new t(`Value "${r}" not found for attribute "${n}"`, e.VALUE_NOT_FOUND);
-	}
-	static parentNotFound(n) {
-		return new t(`Parent element not found: ${n}`, e.PARENT_NOT_FOUND);
-	}
-	static invalidParameter(n) {
-		return new t(n, e.INVALID_PARAMETER);
-	}
-	static snapshotFailed(n, r) {
-		return new t(`Snapshot failed for "${n}": ${r}`, e.SNAPSHOT_FAILED);
-	}
-}, n = class {
-	defaultServer = "https://server.virtualdisplay.io";
-	options;
-	constructor(e) {
-		this.options = e;
-	}
-	create() {
-		let e = this.createIframe();
-		return this.attachToParent(e), e;
-	}
-	createIframe() {
-		let e = document.createElement("iframe");
-		return e.src = this.buildUrl(), Object.assign(e.style, {
-			width: "100%",
-			height: "100%",
-			border: "none"
-		}), e.setAttribute("allow", "xr-spatial-tracking; fullscreen"), e;
-	}
-	attachToParent(e) {
-		this.getParentElement().appendChild(e);
-	}
-	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.debug === !0 && t.searchParams.set("debug", "true"), this.options.language !== void 0 && t.searchParams.set("language", this.options.language), t.toString();
-	}
-	getServerUrl() {
-		return this.defaultServer;
-	}
-	getParentElement() {
-		if (typeof this.options.parent != "string") return this.options.parent;
-		let e = document.querySelector(this.options.parent);
-		if (e === null) throw t.parentNotFound(this.options.parent);
-		return e;
-	}
+const c = {
+  HANDSHAKE: "handshake",
+  SESSION: "session",
+  MUTATION: "mutation",
+  STATE: "state",
+  LOADING_INDICATOR: "loading_indicator",
+  CAMERA: "camera",
+  SNAPSHOT: "snapshot",
+  MAPPING: "mapping",
+  AR_ACTIVATE: "ar_activate",
+  FULLSCREEN: "fullscreen",
+  CONFIG: "config",
+  ANNOTATION_TOGGLE: "annotation_toggle",
+  FOCUS: "focus",
+  PRICING: "pricing",
+  QR_SHOWN: "qr_shown",
+  SYNC: "sync"
+}, Q = {
+  FOCUS: "focus",
+  UNFOCUS: "unfocus"
+}, kt = {
+  FOCUSED: "focused"
+}, At = {
+  /** Behaves exactly like an unpriced combination: no price, no button. */
+  HIDDEN: "hidden"
+}, Et = new Set(Object.values(c));
+function xt(n) {
+  if (typeof n != "object" || n === null)
+    return !1;
+  const t = n;
+  return typeof t.target == "string" ? !1 : typeof t.type == "string" && Et.has(t.type);
+}
+function Tt(n) {
+  const t = C(n);
+  return t !== null && t.type === c.HANDSHAKE;
+}
+function Rt(n) {
+  const t = C(n);
+  return t !== null && t.type === c.SESSION && typeof t.sessionId == "string";
+}
+function It(n) {
+  const t = C(n);
+  return t !== null && t.type === c.MUTATION && Array.isArray(t.results);
+}
+function Ot(n) {
+  const t = C(n);
+  return t !== null && t.type === c.SNAPSHOT && ("data" in t || "error" in t);
+}
+function Nt(n) {
+  const t = C(n);
+  return t !== null && t.type === c.CAMERA && Array.isArray(t.transforms);
+}
+function Lt(n) {
+  const t = C(n);
+  return t !== null && t.type === c.MAPPING && Array.isArray(t.attributes);
+}
+function Mt(n) {
+  const t = C(n);
+  return t !== null && t.type === c.LOADING_INDICATOR && typeof t.progress == "number";
+}
+function zt(n) {
+  const t = C(n);
+  return t !== null && t.type === c.SYNC && typeof t.connected == "boolean";
+}
+function Pt(n) {
+  const t = C(n);
+  return t !== null && t.type === c.CONFIG && typeof t.viewerSettings == "object";
+}
+function Ft(n) {
+  const t = C(n);
+  return t !== null && t.type === c.FOCUS && typeof t.state == "string";
+}
+function $t(n) {
+  const t = C(n);
+  return t !== null && t.type === c.PRICING && typeof t.pricing == "object" && t.pricing !== null;
+}
+function C(n) {
+  return typeof n != "object" || n === null ? null : n;
+}
+class Y {
+  constructor(t) {
+    this.processor = t;
+  }
+  processor;
+  pending = [];
+  isReady = !1;
+  /**
+   * Add a message — processed immediately if ready, queued otherwise
+   */
+  enqueue(t) {
+    if (this.isReady) {
+      this.processor(t);
+      return;
+    }
+    this.pending.push(t);
+  }
+  /**
+   * Mark as ready and flush all pending messages
+   */
+  markReady() {
+    if (this.isReady || (this.isReady = !0, this.pending.length === 0))
+      return;
+    const t = [...this.pending];
+    this.pending.length = 0;
+    for (const e of t)
+      this.processor(e);
+  }
+  get ready() {
+    return this.isReady;
+  }
+  get pendingCount() {
+    return this.pending.length;
+  }
+  /**
+   * Check if a message of a specific type is pending
+   */
+  hasPending(t) {
+    return this.pending.some((e) => e.type === t);
+  }
+  /**
+   * Clear all pending messages
+   */
+  clear() {
+    this.pending.length = 0;
+  }
+}
+class Dt {
+  constructor(t, e) {
+    this.getTarget = t, this.sourceId = `vd-${Math.random().toString(36).slice(2, 8)}`, this.targetOrigin = e?.targetOrigin ?? "*", this.isValid = e?.isValid ?? xt, this.publisher = new Y((i) => this.post(i)), this.consumer = new Y((i) => this.routeToHandler(i)), this.shouldBuffer = e?.shouldBuffer ?? null, e?.bufferIncoming !== !0 && this.consumer.markReady();
+  }
+  getTarget;
+  handlers = /* @__PURE__ */ new Map();
+  publisher;
+  consumer;
+  shouldBuffer;
+  listener = null;
+  sourceId;
+  targetOrigin;
+  isValid;
+  /**
+   * Register a handler for a specific message type
+   */
+  on(t, e) {
+    this.handlers.set(t, e);
+  }
+  /**
+   * Remove a handler for a specific message type
+   */
+  off(t) {
+    this.handlers.delete(t);
+  }
+  /**
+   * Update the target origin for outgoing postMessage calls.
+   * Use when the target origin is discovered at runtime (e.g. from the first incoming message).
+   */
+  setTargetOrigin(t) {
+    this.targetOrigin = t;
+  }
+  /**
+   * Send a message to the target window
+   * Queued until markReady() is called
+   */
+  send(t) {
+    this.publisher.enqueue(t);
+  }
+  /**
+   * Feed a message through the same routing path as one that just arrived via
+   * postMessage, without an actual postMessage round-trip: still validated
+   * against `isValid`, and still respects the consumer queue's buffering and
+   * the `shouldBuffer` bypass. For a transport that delivers messages some
+   * other way than the iframe channel this messenger already listens on (the
+   * viewer engine's SSE-sourced live sync channel, ar-session-handoff) and
+   * needs them to land exactly where a postMessage would.
+   */
+  receive(t) {
+    if (this.isValid(t)) {
+      if (this.shouldBuffer !== null && !this.shouldBuffer(t)) {
+        this.routeToHandler(t);
+        return;
+      }
+      this.consumer.enqueue(t);
+    }
+  }
+  /**
+   * Enable sending and flush queued outgoing messages
+   */
+  markReady() {
+    this.publisher.markReady();
+  }
+  /**
+   * Enable processing of buffered incoming messages
+   * Only relevant when constructed with bufferIncoming: true
+   */
+  markConsumerReady() {
+    this.consumer.markReady();
+  }
+  /**
+   * Check if an incoming message of a specific type is pending in the consumer buffer
+   */
+  consumerHasPending(t) {
+    return this.consumer.hasPending(t);
+  }
+  /**
+   * Start listening for incoming messages
+   */
+  start() {
+    this.listener === null && (this.listener = (t) => {
+      const { data: e } = t;
+      if (!this.isValid(e) || e._source === this.sourceId)
+        return;
+      const i = this.getTarget();
+      if (i !== null && t.source !== null && t.source !== i)
+        return;
+      const o = e;
+      if (this.shouldBuffer !== null && !this.shouldBuffer(o)) {
+        this.routeToHandler(o);
+        return;
+      }
+      this.consumer.enqueue(o);
+    }, window.addEventListener("message", this.listener));
+  }
+  /**
+   * Stop listening and clean up all state
+   */
+  destroy() {
+    this.listener !== null && (window.removeEventListener("message", this.listener), this.listener = null), this.publisher.clear(), this.consumer.clear(), this.handlers.clear();
+  }
+  /**
+   * Whether the messenger is ready to send
+   */
+  get ready() {
+    return this.publisher.ready;
+  }
+  /**
+   * Number of messages waiting in the outgoing queue
+   */
+  get pendingCount() {
+    return this.publisher.pendingCount;
+  }
+  post(t) {
+    const e = this.getTarget();
+    e !== null && e.postMessage({ ...t, _source: this.sourceId }, this.targetOrigin);
+  }
+  routeToHandler(t) {
+    const e = this.handlers.get(t.type);
+    if (e === void 0)
+      return;
+    const i = e(t);
+    i instanceof Promise && i.catch((o) => {
+      const s = o instanceof Error ? o.message : String(o);
+      console.error(`Virtualdisplay: error handling ${t.type}: ${s}`);
+    });
+  }
+}
+class Bt {
+  constructor(t) {
+    this.send = t;
+  }
+  send;
+  setEnabled(t) {
+    this.send({
+      type: c.ANNOTATION_TOGGLE,
+      enabled: t
+    });
+  }
+}
+class Ut {
+  constructor(t, e) {
+    this.value = t, this.attribute = e;
+  }
+  value;
+  attribute;
+  isSelectedValue = !1;
+  get isSelected() {
+    return this.isSelectedValue;
+  }
+  setSelected(t) {
+    this.isSelectedValue = t;
+  }
+}
+const A = {
+  NO_MAPPING: "NO_MAPPING",
+  ATTRIBUTE_NOT_FOUND: "ATTRIBUTE_NOT_FOUND",
+  VALUE_NOT_FOUND: "VALUE_NOT_FOUND",
+  PARENT_NOT_FOUND: "PARENT_NOT_FOUND",
+  INVALID_PARAMETER: "INVALID_PARAMETER",
+  SNAPSHOT_FAILED: "SNAPSHOT_FAILED"
+};
+class f extends Error {
+  code;
+  constructor(t, e) {
+    super(t), this.name = "VirtualdisplayError", this.code = e;
+  }
+  static valueNotFound(t, e) {
+    return new f(
+      `Value "${e}" not found for attribute "${t}"`,
+      A.VALUE_NOT_FOUND
+    );
+  }
+  static parentNotFound(t) {
+    return new f(
+      `Parent element not found: ${t}`,
+      A.PARENT_NOT_FOUND
+    );
+  }
+  static invalidParameter(t) {
+    return new f(t, A.INVALID_PARAMETER);
+  }
+}
+class Vt {
+  name;
+  defaultValue;
+  values;
+  onSelect;
+  onChangeCallback;
+  constructor(t) {
+    this.name = t.name, this.defaultValue = t.defaultValue, this.onSelect = t.onSelect, this.values = this.createValues(t.values);
+  }
+  /**
+   * Select a value for this attribute
+   * @throws {VirtualdisplayError} When value not found
+   */
+  select(t) {
+    if (!this.values.has(t))
+      throw f.valueNotFound(this.name, t);
+    this.onSelect(this.name, t);
+  }
+  getValues() {
+    return Array.from(this.values.values());
+  }
+  getValue(t) {
+    return this.values.get(t);
+  }
+  /** The currently selected value, or undefined before any selection lands. */
+  get selected() {
+    for (const t of this.values.values())
+      if (t.isSelected)
+        return t.value;
+  }
+  /**
+   * Register callback that fires when selection changes
+   * Receives the newly selected AttributeValue
+   */
+  onChange(t) {
+    this.onChangeCallback = t;
+  }
+  /**
+   * Update selection state from server mutation result
+   * Direct value comparison - no source/target translation
+   */
+  handleResult(t) {
+    let e;
+    for (const i of this.values.values()) {
+      const o = i.value === t;
+      i.setSelected(o), o && (e = i);
+    }
+    e !== void 0 && this.onChangeCallback !== void 0 && this.onChangeCallback(e);
+  }
+  createValues(t) {
+    const e = /* @__PURE__ */ new Map();
+    for (const i of t) {
+      const o = new Ut(i, this.name);
+      i === this.defaultValue && o.setSelected(!0), e.set(i, o);
+    }
+    return e;
+  }
+}
+class jt {
+  attributes = /* @__PURE__ */ new Map();
+  constructor(t, e, i) {
+    for (const o of t) {
+      const s = this.buildOptions(o, e);
+      this.attributes.set(o.name, new Vt(s));
+    }
+    this.onMutationFailed = i;
+  }
+  onMutationFailed;
+  get(t) {
+    return this.attributes.get(t);
+  }
+  /** The current selection as attribute name→value pairs, skipping unset attributes. */
+  getSelection() {
+    const t = {};
+    for (const [e, i] of this.attributes) {
+      const o = i.selected;
+      o !== void 0 && (t[e] = o);
+    }
+    return t;
+  }
+  handleResults(t) {
+    for (const e of t) {
+      if (!e.success) {
+        this.onMutationFailed?.(e.name, e.value);
+        continue;
+      }
+      this.get(e.name)?.handleResult(e.value);
+    }
+  }
+  buildOptions(t, e) {
+    const i = {
+      name: t.name,
+      values: t.values,
+      onSelect: (o, s) => {
+        e([{ name: o, value: s }], !1);
+      }
+    };
+    return t.defaultValue !== void 0 ? { ...i, defaultValue: t.defaultValue } : i;
+  }
+}
+function Ht(n) {
+  const t = new Date(n.timestamp).toLocaleTimeString("en-GB", { hour12: !1 }), e = n.level.toUpperCase().padEnd(5), i = n.trace_id?.slice(0, 8) ?? "--------", o = n.msg, s = ["timestamp", "level", "msg", "service", "trace_id", "span_id"], r = Object.entries(n).filter(([l]) => !s.includes(l)).map(([l, d]) => `${l}=${JSON.stringify(d)}`).join(" ");
+  return `${t} ${e} [${i}] ${o}${r ? " " + r : ""}`;
+}
+function qt(n) {
+  return JSON.stringify(n);
+}
+function Gt(n, t) {
+  const e = t ? Ht(n) : qt(n);
+  n.level === "error" ? console.error(e) : n.level === "warn" ? console.warn(e) : console.log(e);
+}
+function lt(n, t = 0) {
+  const e = {
+    name: n.name,
+    message: n.message
+  };
+  n.stack !== void 0 && (e.stack = n.stack);
+  for (const i of Object.getOwnPropertyNames(n)) {
+    if (i === "name" || i === "message" || i === "stack" || i === "cause")
+      continue;
+    const o = n[i];
+    o !== void 0 && (e[i] = o);
+  }
+  return n.cause !== void 0 && n.cause !== null && (e.cause = n.cause instanceof Error && t < 5 ? lt(n.cause, t + 1) : String(n.cause)), e;
+}
+function Zt(n) {
+  const t = {};
+  for (const [e, i] of Object.entries(n))
+    t[e] = i instanceof Error ? lt(i) : i;
+  return t;
+}
+function Wt() {
+  return /* @__PURE__ */ new Date();
+}
+function Qt(n) {
+  return n.toISOString();
+}
+function ct() {
+  return typeof navigator > "u" ? "" : navigator.userAgent;
+}
+function Yt() {
+  return typeof navigator > "u" ? !1 : navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;
+}
+function Kt() {
+  return /iPhone|iPad|iPod/i.test(ct()) || Yt();
+}
+function Xt() {
+  return /Android/i.test(ct());
+}
+function Jt() {
+  return Kt() || Xt();
+}
+class te {
+  constructor(t) {
+    this.config = t;
+  }
+  config;
+  /**
+   * Log at specified level with optional attributes.
+   */
+  log(t, e, i = {}) {
+    const o = this.config.traceProvider?.() ?? {}, s = {
+      timestamp: Qt(Wt()),
+      level: t,
+      msg: e,
+      service: this.config.service,
+      ...o,
+      ...Zt(i)
+    };
+    Gt(s, this.config.isDev);
+  }
+  /**
+   * Log at DEBUG level (development only).
+   */
+  debug(t, e) {
+    this.config.isDev && this.log("debug", t, e);
+  }
+  /**
+   * Log at INFO level.
+   */
+  info(t, e) {
+    this.log("info", t, e);
+  }
+  /**
+   * Log at WARN level.
+   */
+  warn(t, e) {
+    this.log("warn", t, e);
+  }
+  /**
+   * Log at ERROR level.
+   */
+  error(t, e) {
+    this.log("error", t, e);
+  }
+}
+function ut(n, t) {
+  const e = t?.isDev !== void 0 ? t.isDev : typeof process < "u" ? process.env.NODE_ENV !== "production" : !0;
+  return new te({ service: n, isDev: e, traceProvider: t?.traceProvider });
+}
+function O(n) {
+  if (n !== void 0)
+    return typeof n == "object" && n !== null && !Array.isArray(n) && !(n instanceof Error) ? n : n instanceof Error ? { error: n.message } : { value: n };
+}
+function dt(n) {
+  return {
+    debug: (t, e) => n.debug(t, O(e)),
+    info: (t, e) => n.info(t, O(e)),
+    warn: (t, e) => n.warn(t, O(e)),
+    error: (t, e) => n.error(t, O(e))
+  };
+}
+let ht = !1, _ = dt(ut("client", { isDev: !1 }));
+function ee() {
+  ht = !0, _ = dt(ut("client", { isDev: !0 }));
+}
+function Ki() {
+  return ht;
+}
+class ne {
+  constructor(t, e) {
+    this.send = t, this.onMutationFailed = e;
+  }
+  send;
+  onMutationFailed;
+  registry;
+  pendingCallbacks = [];
+  /**
+   * Handle incoming MAPPING message from server
+   */
+  handleMappingReceived(t) {
+    _.debug("Initializing from server mapping", {
+      attributeCount: t.attributes.length
+    }), this.registry = new jt(
+      t.attributes,
+      (e, i) => this.sendMutation(e, i),
+      this.onMutationFailed
+    ), this.replayPendingCallbacks();
+  }
+  handleMutationResult(t) {
+    this.registry?.handleResults(t.results);
+  }
+  /**
+   * Select a value for an attribute - sends mutation to server.
+   * Can be called before the mapping arrives — the mutation is sent immediately
+   * and the messenger's publisher queue holds it until the iframe is ready.
+   */
+  select(t, e) {
+    this.sendMutation([{ name: t, value: e }], !1);
+  }
+  getValues(t) {
+    return this.registry?.get(t)?.getValues() ?? [];
+  }
+  getValue(t, e) {
+    return this.registry?.get(t)?.getValue(e);
+  }
+  /**
+   * Register onChange callback for an attribute.
+   * Buffers the callback if the mapping hasn't arrived yet.
+   */
+  onChange(t, e) {
+    if (this.registry === void 0) {
+      this.pendingCallbacks.push({ name: t, callback: e });
+      return;
+    }
+    const i = this.registry.get(t);
+    if (i === void 0) {
+      _.warn(`onChange: attribute "${t}" not found — callback will not fire`);
+      return;
+    }
+    i.onChange(e);
+  }
+  getAttribute(t) {
+    return this.registry?.get(t);
+  }
+  /** The current selection as attribute name→value pairs, empty before the mapping arrives. */
+  getSelection() {
+    return this.registry?.getSelection() ?? {};
+  }
+  get hasMapping() {
+    return this.registry !== void 0;
+  }
+  sendMutation(t, e) {
+    const i = {
+      type: c.MUTATION,
+      mutations: t,
+      isInitial: e
+    };
+    this.send(i);
+  }
+  replayPendingCallbacks() {
+    for (const { name: t, callback: e } of this.pendingCallbacks) {
+      const i = this.registry?.get(t);
+      i === void 0 && _.warn(`onChange: attribute "${t}" not found — buffered callback will not fire`), i?.onChange(e);
+    }
+    this.pendingCallbacks.length = 0;
+  }
+}
+let ie = class {
+  constructor(t) {
+    this.send = t;
+  }
+  send;
+  commands = [];
+  /**
+   * Rotate camera horizontally
+   * @param degrees - Absolute rotation in degrees (0 = front view)
+   * @throws VirtualdisplayError if value is not a finite number
+   */
+  rotate(t) {
+    return this.validateFiniteNumber(t, "rotate"), this.commands.push({ action: "rotate", value: t }), this;
+  }
+  /**
+   * Tilt camera vertically
+   * @param degrees - Absolute tilt in degrees (0 = top view, 90 = horizontal)
+   * @throws VirtualdisplayError if value is not a finite number
+   */
+  tilt(t) {
+    return this.validateFiniteNumber(t, "tilt"), this.commands.push({ action: "tilt", value: t }), this;
+  }
+  /**
+   * Zoom camera
+   * @param percentage - Zoom percentage (100 = normal, >100 = zoom in, <100 = zoom out)
+   * @throws VirtualdisplayError if value is not a finite number
+   */
+  zoom(t) {
+    return this.validateFiniteNumber(t, "zoom"), this.commands.push({ action: "zoom", value: t }), this;
+  }
+  /**
+   * Execute accumulated camera commands
+   * @throws VirtualdisplayError if no commands have been accumulated
+   */
+  set() {
+    if (this.commands.length === 0)
+      throw f.invalidParameter(
+        "No camera commands to execute. Call rotate(), tilt(), or zoom() before set()."
+      );
+    const t = {
+      type: c.CAMERA,
+      commands: this.commands
+    };
+    this.send(t), this.commands = [];
+  }
+  validateFiniteNumber(t, e) {
+    if (!Number.isFinite(t))
+      throw f.invalidParameter(
+        `${e}() requires a finite number, got ${String(t)}`
+      );
+  }
+  /**
+   * Reset camera to initial position
+   * This is not chainable and executes immediately
+   */
+  reset() {
+    const t = {
+      type: c.CAMERA,
+      commands: [{ action: "reset" }]
+    };
+    this.send(t);
+  }
+};
+class oe {
+  state;
+  limitsState;
+  changeCallbacks = [];
+  constructor() {
+    this.state = {
+      rotation: 0,
+      tilt: 0,
+      zoom: 100
+    };
+  }
+  /**
+   * Get current rotation in degrees
+   */
+  get rotation() {
+    return this.state.rotation;
+  }
+  /**
+   * Get current tilt in degrees
+   */
+  get tilt() {
+    return this.state.tilt;
+  }
+  /**
+   * Get current zoom percentage
+   */
+  get zoom() {
+    return this.state.zoom;
+  }
+  /**
+   * Subscribe to camera position changes.
+   * Also fires when limits are applied via applyLimits() so components
+   * can re-evaluate disabled states without a separate callback.
+   */
+  onChange(t) {
+    this.changeCallbacks.push(t);
+  }
+  /**
+   * Current camera movement limits (set from CONFIG message).
+   * Undefined until the server sends limits in its CONFIG payload.
+   */
+  get limits() {
+    return this.limitsState;
+  }
+  /**
+   * Apply camera limits received from the server CONFIG message.
+   * Fires onChange callbacks so button disabled states update immediately.
+   */
+  applyLimits(t) {
+    this.limitsState = t;
+    const e = { rotation: this.rotation, tilt: this.tilt, zoom: this.zoom };
+    for (const i of this.changeCallbacks)
+      i(e);
+  }
+  /**
+   * Handle incoming camera position message from server
+   */
+  handlePositionUpdate(t) {
+    this.update(t.transforms);
+  }
+  /**
+   * Update camera position from server transforms
+   */
+  update(t) {
+    let e = !1;
+    for (const i of t)
+      switch (i.type) {
+        case "rotation":
+          this.state.rotation = i.value, e = !0;
+          break;
+        case "tilt":
+          this.state.tilt = i.value, e = !0;
+          break;
+        case "zoom":
+          this.state.zoom = i.value, e = !0;
+          break;
+      }
+    if (e) {
+      const i = {
+        rotation: this.rotation,
+        tilt: this.tilt,
+        zoom: this.zoom
+      };
+      for (const o of this.changeCallbacks)
+        o(i);
+    }
+  }
+}
+function se(n, t) {
+  const e = n.filter((s) => re(s, t));
+  if (e.length === 0)
+    return;
+  const i = Math.max(...e.map(K)), o = e.filter((s) => K(s) === i);
+  return o.length === 1 ? o[0] : void 0;
+}
+function re(n, t) {
+  return Object.entries(n.attributes).every(([e, i]) => t[e] === i);
+}
+function K(n) {
+  return Object.keys(n.attributes).length;
+}
+class ae {
+  constructor(t, e) {
+    this.dispatchChange = t, this.dispatchSubmit = e;
+  }
+  dispatchChange;
+  dispatchSubmit;
+  pricing;
+  selection = {};
+  resolved;
+  changeCallbacks = [];
+  renderCallbacks = [];
+  submitCallback;
+  submitDefaultLabel;
+  /** The resolved configuration, or undefined when nothing matches. */
+  get current() {
+    return this.resolved;
+  }
+  /** The VAT label for bare embeds (e.g. "incl. btw"), or undefined without pricing. */
+  get vatDisplay() {
+    return this.pricing?.vatDisplay;
+  }
+  /**
+   * The CTA label: the customer's `button_label`, or the adapter's `defaultLabel`
+   * when that is empty. Undefined when neither is set — a button must know what
+   * it says, so the CTA does not render.
+   */
+  get buttonLabel() {
+    const t = this.pricing?.buttonLabel;
+    if (t != null && t !== "")
+      return t;
+    if (this.submitDefaultLabel !== void 0 && this.submitDefaultLabel !== "")
+      return this.submitDefaultLabel;
+  }
+  /**
+   * Whether the current configuration may be submitted: a handler is registered
+   * and the configuration is either price-less or an `available` priced one. The
+   * CTA's visibility ({@link submitEnabled}) layers a label requirement on top of
+   * this; a programmatic `submit()` does not need a label.
+   */
+  get submittable() {
+    return this.submitCallback === void 0 ? !1 : this.pricing === void 0 ? !0 : this.resolved?.availability === "available";
+  }
+  /**
+   * Whether the CTA should render: the configuration is submittable and a label
+   * exists. A button must say something, so an empty label hides the CTA rather
+   * than rendering blank.
+   */
+  get submitEnabled() {
+    return this.submittable && this.buttonLabel !== void 0;
+  }
+  /**
+   * Subscribe to configuration changes. Fires after every selection change with
+   * the resolved configuration, including undefined when nothing matches.
+   */
+  onChange(t) {
+    this.changeCallbacks.push(t);
+  }
+  /**
+   * Register the submit handler the CTA hands the configuration to. Registering
+   * one is what switches the button on (capability driven). `defaultLabel` fills
+   * in when the customer authored no button label.
+   */
+  onSubmit(t, e) {
+    this.submitCallback = t, this.submitDefaultLabel = e?.defaultLabel, this.notifyRender();
+  }
+  /**
+   * Subscribe the built-in UI to re-render the price + CTA. Fires on every
+   * resolve and when a submit handler is registered (which can switch the button
+   * on without a configuration change). Separate from `onChange`, which stays the
+   * host-facing, mutation-driven contract. Returns a disposer.
+   */
+  onRender(t) {
+    return this.renderCallbacks.push(t), () => {
+      const e = this.renderCallbacks.indexOf(t);
+      e !== -1 && this.renderCallbacks.splice(e, 1);
+    };
+  }
+  /**
+   * Hand the current configuration to the registered handler and fire the
+   * bubbling `vd:configuration-submit` event. No-op without a handler or a
+   * resolved configuration. Returns the handler's promise so the caller can
+   * reflect the result (bezig / gelukt / mislukt).
+   */
+  async submit() {
+    if (!this.submittable)
+      return;
+    const t = this.resolved !== void 0 ? { attributes: this.resolved.attributes, reference: this.resolved.reference } : { attributes: { ...this.selection }, reference: "" };
+    this.dispatchSubmit(t), await this.submitCallback?.(t);
+  }
+  /** Called by the client when a PRICING message arrives from the viewer. */
+  handlePricingReceived(t) {
+    this.pricing = t, this.recompute();
+  }
+  /** Called by the client after every mutation result, with the full selection. */
+  handleSelectionChanged(t) {
+    this.selection = t, this.recompute();
+  }
+  recompute() {
+    this.resolved = this.resolve();
+    for (const t of this.changeCallbacks)
+      t(this.resolved);
+    this.dispatchChange(this.resolved), this.notifyRender();
+  }
+  notifyRender() {
+    for (const t of this.renderCallbacks)
+      t();
+  }
+  resolve() {
+    if (this.pricing === void 0)
+      return;
+    const t = se(this.pricing.rules, this.selection);
+    if (!(t === void 0 || t.availability === At.HIDDEN))
+      return {
+        attributes: { ...this.selection },
+        reference: t.reference,
+        price: t.priceCents,
+        currency: this.pricing.currency,
+        availability: t.availability
+      };
+  }
+}
+class le {
+  constructor(t, e) {
+    this.send = t, this.dispatch = e;
+  }
+  send;
+  dispatch;
+  focused = null;
+  attributes = [];
+  changeCallbacks = [];
+  /** The focused component name, or null in overview. */
+  get current() {
+    return this.focused;
+  }
+  /**
+   * Focus a component by name. Sends a focus message to the viewer.
+   * @throws VirtualdisplayError if component is not a non-empty string
+   */
+  set(t) {
+    if (typeof t != "string" || t.length === 0)
+      throw f.invalidParameter(
+        `set() requires a non-empty component name, got ${String(t)}`
+      );
+    this.send({ type: c.FOCUS, action: Q.FOCUS, component: t });
+  }
+  /** Return to the overview — unfocus the current component. */
+  clear() {
+    this.send({ type: c.FOCUS, action: Q.UNFOCUS });
+  }
+  /**
+   * Subscribe to focus changes. The callback fires with the focus state when a
+   * component is focused, and with null when returning to overview.
+   */
+  onChange(t) {
+    this.changeCallbacks.push(t);
+  }
+  /** Called by the client when a FocusStateMessage is received from the viewer. */
+  handleStateReceived(t) {
+    t.state === kt.FOCUSED && t.component !== void 0 ? (this.focused = t.component, this.attributes = t.attributes ?? []) : (this.focused = null, this.attributes = []);
+    const e = this.focused !== null ? { component: this.focused, attributes: this.attributes } : null;
+    for (const i of this.changeCallbacks)
+      i(e);
+    this.dispatch(e);
+  }
+}
+class ce {
+  constructor(t) {
+    this.filename = t;
+  }
+  filename;
+  developedCallbacks = /* @__PURE__ */ new Set();
+  errorCallbacks = /* @__PURE__ */ new Set();
+  developed = !1;
+  failed = !1;
+  photoData = null;
+  /**
+   * Register a callback for when the photo is developed
+   * If the photo is already developed, the callback is called immediately
+   *
+   * @param callback Function to call with photo data
+   * @returns This Photo instance for chaining
+   */
+  onDeveloped(t) {
+    return this.developed && this.photoData !== null ? (t(this.photoData), this) : (this.developedCallbacks.add(t), this);
+  }
+  /**
+   * Register a callback for when the photo capture fails
+   *
+   * @param callback Function to call with error
+   * @returns This Photo instance for chaining
+   */
+  onError(t) {
+    return this.errorCallbacks.add(t), this;
+  }
+  /**
+   * Get the filename for this photo
+   */
+  getFilename() {
+    return this.filename;
+  }
+  /**
+   * Mark the photo as developed and notify all callbacks
+   * This method is called by Snapshot when the photo data arrives from the server
+   */
+  develop(t) {
+    this.developed || this.failed || (this.photoData = t, this.developed = !0, this.developedCallbacks.forEach((e) => {
+      e(this.photoData);
+    }), this.developedCallbacks.clear(), this.errorCallbacks.clear());
+  }
+  /**
+   * Mark the photo as failed and notify error callbacks
+   */
+  fail(t) {
+    this.developed || this.failed || (this.failed = !0, this.errorCallbacks.forEach((e) => {
+      e(t);
+    }), this.developedCallbacks.clear(), this.errorCallbacks.clear());
+  }
+}
+const X = 3e4;
+class ue {
+  constructor(t) {
+    this.send = t;
+  }
+  send;
+  validExtensions = [".png"];
+  pendingPhotos = /* @__PURE__ */ new Map();
+  /**
+   * Take a snapshot of the current 3D model view
+   *
+   * @param filename The filename for the snapshot (must include valid extension)
+   * @returns Photo object for registering callbacks
+   * @throws VirtualdisplayError if filename is invalid
+   */
+  take(t) {
+    this.validateFilename(t), _.debug("Taking snapshot", { filename: t });
+    const e = new ce(t), i = setTimeout(() => {
+      this.pendingPhotos.delete(t), _.warn("Snapshot timed out", { filename: t }), e.fail(new f(
+        `Snapshot timed out: the viewer did not respond within ${X}ms`,
+        A.SNAPSHOT_FAILED
+      ));
+    }, X);
+    return this.pendingPhotos.set(t, { photo: e, timeout: i }), this.send({
+      type: c.SNAPSHOT,
+      filename: t
+    }), e;
+  }
+  /**
+   * Handle incoming snapshot result from server
+   * Matches the message to a pending photo by filename, then develops or fails it
+   */
+  handleSnapshotResult(t) {
+    const e = this.pendingPhotos.get(t.filename);
+    if (e === void 0) {
+      _.warn("No pending photo found for filename", {
+        filename: t.filename,
+        pendingFilenames: Array.from(this.pendingPhotos.keys())
+      });
+      return;
+    }
+    clearTimeout(e.timeout), this.pendingPhotos.delete(t.filename);
+    const { photo: i } = e;
+    if (t.error !== void 0) {
+      i.fail(new f(t.error, A.SNAPSHOT_FAILED));
+      return;
+    }
+    t.data !== void 0 && i.develop({ filename: t.filename, data: t.data });
+  }
+  /**
+   * Fail any pending photos and forget them. Called from client destroy
+   * so callers awaiting onError() see a deterministic outcome instead of
+   * leaking captures whose results will never arrive.
+   */
+  clear() {
+    if (this.pendingPhotos.size === 0)
+      return;
+    const t = new f(
+      "Client destroyed before snapshot completed",
+      A.SNAPSHOT_FAILED
+    );
+    for (const { photo: e, timeout: i } of this.pendingPhotos.values())
+      clearTimeout(i), e.fail(t);
+    this.pendingPhotos.clear();
+  }
+  /**
+   * Validate filename has a valid image extension
+   */
+  validateFilename(t) {
+    if (t === "" || typeof t != "string")
+      throw new f(
+        "Filename must be a non-empty string",
+        A.INVALID_PARAMETER
+      );
+    if (!this.validExtensions.some(
+      (i) => t.toLowerCase().endsWith(i)
+    ))
+      throw new f(
+        `Invalid filename: "${t}". Filename must end with one of: ${this.validExtensions.join(", ")}`,
+        A.INVALID_PARAMETER
+      );
+    if (t.includes("..") || t.includes("/") || t.includes("\\"))
+      throw new f(
+        'Filename cannot contain path separators or ".."',
+        A.INVALID_PARAMETER
+      );
+  }
+}
+class de {
+  container = null;
+  attach(t) {
+    this.container = t;
+  }
+  dispatch(t, e, i = !1) {
+    const o = new CustomEvent(t, { detail: e, cancelable: i });
+    return this.container?.dispatchEvent(o), o;
+  }
+  on(t, e) {
+    const i = (o) => {
+      const s = o, r = { ...s.detail, preventDefault: () => {
+        s.preventDefault();
+      } };
+      e(r);
+    };
+    return this.container?.addEventListener(t, i), () => {
+      this.container?.removeEventListener(t, i);
+    };
+  }
+}
+const he = {}, me = "en", mt = (
+  /** @type {const} */
+  ["en", "nl", "de"]
+), Z = [
+  "baseLocale"
+], J = [];
+let tt, et;
+function pe(n) {
+  if (J.length === 0)
+    return;
+  const t = typeof n == "string" ? n : n.href;
+  if (tt === t)
+    return et;
+  const e = new URL(t, "http://dummy.com");
+  let i;
+  for (const o of J)
+    if (new he(o.match, e.href).exec(e.href)) {
+      i = o;
+      break;
+    }
+  return tt = t, et = i, i;
+}
+function pt(n) {
+  const t = pe(n);
+  return t && t.exclude !== !0 && Array.isArray(t.strategy) ? t.strategy : Z;
+}
+const G = typeof window > "u";
+globalThis.__paraglide = /** @type {any} */
+globalThis.__paraglide ?? {};
+globalThis.__paraglide.ssr = /** @type {any} */
+globalThis.__paraglide.ssr ?? {};
+let nt = !1, h = () => {
+  let n = Z;
+  !G && typeof window < "u" && window.location?.href && (n = pt(window.location.href));
+  const t = fe(n);
+  if (t)
+    return nt || (nt = !0, ft(t, { reload: !1 })), t;
+  throw new Error("No locale found. Read the docs https://paraglidejs.com/errors#no-locale-found");
+};
+function fe(n, t) {
+  let e;
+  for (const i of n) {
+    if (i === "baseLocale")
+      e = me;
+    else if (bt(i) && N.has(i)) {
+      const s = N.get(i);
+      if (s) {
+        const r = s.getLocale();
+        if (r instanceof Promise)
+          continue;
+        if (r !== void 0)
+          return be(r);
+      }
+    }
+    const o = gt(e);
+    if (o)
+      return o;
+  }
+}
+const ge = (n) => {
+  window.location.reload();
+};
+let ft = (n, t) => {
+  const e = {
+    reload: !0,
+    ...t
+  };
+  let i;
+  try {
+    i = h();
+  } catch {
+  }
+  const o = [];
+  let s = Z;
+  !G && typeof window < "u" && window.location?.href && (s = pt(window.location.href));
+  for (const l of s)
+    if (l !== "baseLocale" && bt(l) && N.has(l)) {
+      const d = N.get(l);
+      if (d) {
+        let u = d.setLocale(n);
+        u instanceof Promise && (u = u.catch((p) => {
+          throw new Error(`Custom strategy "${l}" setLocale failed.`, {
+            cause: p
+          });
+        }), o.push(u));
+      }
+    }
+  const r = () => {
+    !G && e.reload && window.location && n !== i && ge();
+  };
+  if (o.length)
+    return Promise.all(o).then(() => {
+      r();
+    });
+  r();
+};
+function gt(n) {
+  if (typeof n != "string")
+    return;
+  const t = n.toLowerCase();
+  for (const e of mt)
+    if (e.toLowerCase() === t)
+      return e;
+}
+function be(n) {
+  const t = gt(n);
+  if (t)
+    return t;
+  throw new Error(`Invalid locale: ${n}. Expected one of: ${mt.join(", ")}`);
+}
+const N = /* @__PURE__ */ new Map();
+function bt(n) {
+  return typeof n == "string" && /^custom-[A-Za-z0-9_-]+$/.test(n);
+}
+const ve = (
+  /** @type {(inputs: Controls_Ar_Buttonlabel1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Activate AR"
+  )
+), ye = (
+  /** @type {(inputs: Controls_Ar_Buttonlabel1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "AR activeren"
+  )
+), we = (
+  /** @type {(inputs: Controls_Ar_Buttonlabel1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "AR aktivieren"
+  )
+), _e = (
+  /** @type {((inputs?: Controls_Ar_Buttonlabel1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Ar_Buttonlabel1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? ve() : e === "nl" ? ye() : we();
+  })
+), Ce = (
+  /** @type {(inputs: Controls_Qr_Modaltitle1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Scan to view in AR"
+  )
+), Se = (
+  /** @type {(inputs: Controls_Qr_Modaltitle1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Scan om in AR te bekijken"
+  )
+), ke = (
+  /** @type {(inputs: Controls_Qr_Modaltitle1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Scannen für AR-Ansicht"
+  )
+), Ae = (
+  /** @type {((inputs?: Controls_Qr_Modaltitle1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Qr_Modaltitle1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? Ce() : e === "nl" ? Se() : ke();
+  })
+), Ee = (
+  /** @type {(inputs: Controls_Qr_Modaldescription1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Use your smartphone camera to scan this QR code"
+  )
+), xe = (
+  /** @type {(inputs: Controls_Qr_Modaldescription1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Gebruik de camera van je smartphone om deze QR-code te scannen"
+  )
+), Te = (
+  /** @type {(inputs: Controls_Qr_Modaldescription1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Verwende die Kamera deines Smartphones, um diesen QR-Code zu scannen"
+  )
+), Re = (
+  /** @type {((inputs?: Controls_Qr_Modaldescription1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Qr_Modaldescription1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? Ee() : e === "nl" ? xe() : Te();
+  })
+), Ie = (
+  /** @type {(inputs: Controls_Qr_Modalinstructions1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Your phone will open the 3D model in AR mode."
+  )
+), Oe = (
+  /** @type {(inputs: Controls_Qr_Modalinstructions1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Je telefoon opent het 3D-model in AR-modus."
+  )
+), Ne = (
+  /** @type {(inputs: Controls_Qr_Modalinstructions1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Dein Telefon öffnet das 3D-Modell im AR-Modus."
+  )
+), Le = (
+  /** @type {((inputs?: Controls_Qr_Modalinstructions1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Qr_Modalinstructions1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? Ie() : e === "nl" ? Oe() : Ne();
+  })
+), Me = (
+  /** @type {(inputs: Controls_Qr_Closebutton1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Close"
+  )
+), ze = (
+  /** @type {(inputs: Controls_Qr_Closebutton1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Sluiten"
+  )
+), Pe = (
+  /** @type {(inputs: Controls_Qr_Closebutton1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Schließen"
+  )
+), Fe = (
+  /** @type {((inputs?: Controls_Qr_Closebutton1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Qr_Closebutton1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? Me() : e === "nl" ? ze() : Pe();
+  })
+), $e = (
+  /** @type {(inputs: Controls_Fullscreen_Buttonlabel1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Fullscreen"
+  )
+), De = (
+  /** @type {(inputs: Controls_Fullscreen_Buttonlabel1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Volledig scherm"
+  )
+), Be = (
+  /** @type {(inputs: Controls_Fullscreen_Buttonlabel1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Vollbild"
+  )
+), Ue = (
+  /** @type {((inputs?: Controls_Fullscreen_Buttonlabel1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Fullscreen_Buttonlabel1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? $e() : e === "nl" ? De() : Be();
+  })
+), Ve = (
+  /** @type {(inputs: Loading_Downloadingshort1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Downloading"
+  )
+), je = (
+  /** @type {(inputs: Loading_Downloadingshort1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Downloaden"
+  )
+), He = (
+  /** @type {(inputs: Loading_Downloadingshort1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Herunterladen"
+  )
+), vt = (
+  /** @type {((inputs?: Loading_Downloadingshort1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Loading_Downloadingshort1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? Ve() : e === "nl" ? je() : He();
+  })
+), qe = (
+  /** @type {(inputs: Loading_RenderingInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Rendering"
+  )
+), Ge = (
+  /** @type {(inputs: Loading_RenderingInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Renderen"
+  )
+), Ze = (
+  /** @type {(inputs: Loading_RenderingInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Rendern"
+  )
+), We = (
+  /** @type {((inputs?: Loading_RenderingInputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Loading_RenderingInputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? qe() : e === "nl" ? Ge() : Ze();
+  })
+), Qe = (
+  /** @type {(inputs: Controls_Screenshot_Buttonlabel1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Screenshot"
+  )
+), Ye = (
+  /** @type {(inputs: Controls_Screenshot_Buttonlabel1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Screenshot"
+  )
+), Ke = (
+  /** @type {(inputs: Controls_Screenshot_Buttonlabel1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Screenshot"
+  )
+), Xe = (
+  /** @type {((inputs?: Controls_Screenshot_Buttonlabel1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Screenshot_Buttonlabel1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? Qe() : e === "nl" ? Ye() : Ke();
+  })
+), Je = (
+  /** @type {(inputs: Controls_Configurator_OpenInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Configure"
+  )
+), tn = (
+  /** @type {(inputs: Controls_Configurator_OpenInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Configureren"
+  )
+), en = (
+  /** @type {(inputs: Controls_Configurator_OpenInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Konfigurieren"
+  )
+), nn = (
+  /** @type {((inputs?: Controls_Configurator_OpenInputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Configurator_OpenInputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? Je() : e === "nl" ? tn() : en();
+  })
+), on = (
+  /** @type {(inputs: Controls_Configurator_CloseInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Close"
+  )
+), sn = (
+  /** @type {(inputs: Controls_Configurator_CloseInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Sluiten"
+  )
+), rn = (
+  /** @type {(inputs: Controls_Configurator_CloseInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Schließen"
+  )
+), an = (
+  /** @type {((inputs?: Controls_Configurator_CloseInputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Configurator_CloseInputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? on() : e === "nl" ? sn() : rn();
+  })
+), ln = (
+  /** @type {(inputs: Controls_Camera_ResetInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Reset camera"
+  )
+), cn = (
+  /** @type {(inputs: Controls_Camera_ResetInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Camera resetten"
+  )
+), un = (
+  /** @type {(inputs: Controls_Camera_ResetInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Kamera zurücksetzen"
+  )
+), dn = (
+  /** @type {((inputs?: Controls_Camera_ResetInputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Camera_ResetInputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? ln() : e === "nl" ? cn() : un();
+  })
+), hn = (
+  /** @type {(inputs: Controls_Camera_Zoomin1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Zoom in"
+  )
+), mn = (
+  /** @type {(inputs: Controls_Camera_Zoomin1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Inzoomen"
+  )
+), pn = (
+  /** @type {(inputs: Controls_Camera_Zoomin1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Hineinzoomen"
+  )
+), fn = (
+  /** @type {((inputs?: Controls_Camera_Zoomin1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Camera_Zoomin1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? hn() : e === "nl" ? mn() : pn();
+  })
+), gn = (
+  /** @type {(inputs: Controls_Camera_Zoomout1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Zoom out"
+  )
+), bn = (
+  /** @type {(inputs: Controls_Camera_Zoomout1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Uitzoomen"
+  )
+), vn = (
+  /** @type {(inputs: Controls_Camera_Zoomout1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Herauszoomen"
+  )
+), yn = (
+  /** @type {((inputs?: Controls_Camera_Zoomout1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Camera_Zoomout1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? gn() : e === "nl" ? bn() : vn();
+  })
+), wn = (
+  /** @type {(inputs: Controls_Camera_Rotateleft1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Rotate left"
+  )
+), _n = (
+  /** @type {(inputs: Controls_Camera_Rotateleft1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Naar links draaien"
+  )
+), Cn = (
+  /** @type {(inputs: Controls_Camera_Rotateleft1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Nach links drehen"
+  )
+), Sn = (
+  /** @type {((inputs?: Controls_Camera_Rotateleft1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Camera_Rotateleft1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? wn() : e === "nl" ? _n() : Cn();
+  })
+), kn = (
+  /** @type {(inputs: Controls_Camera_Rotateright1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Rotate right"
+  )
+), An = (
+  /** @type {(inputs: Controls_Camera_Rotateright1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Naar rechts draaien"
+  )
+), En = (
+  /** @type {(inputs: Controls_Camera_Rotateright1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Nach rechts drehen"
+  )
+), xn = (
+  /** @type {((inputs?: Controls_Camera_Rotateright1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Camera_Rotateright1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? kn() : e === "nl" ? An() : En();
+  })
+), Tn = (
+  /** @type {(inputs: Controls_Camera_Tiltup1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Tilt up"
+  )
+), Rn = (
+  /** @type {(inputs: Controls_Camera_Tiltup1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Omhoog kantelen"
+  )
+), In = (
+  /** @type {(inputs: Controls_Camera_Tiltup1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Nach oben kippen"
+  )
+), On = (
+  /** @type {((inputs?: Controls_Camera_Tiltup1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Camera_Tiltup1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? Tn() : e === "nl" ? Rn() : In();
+  })
+), Nn = (
+  /** @type {(inputs: Controls_Camera_Tiltdown1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Tilt down"
+  )
+), Ln = (
+  /** @type {(inputs: Controls_Camera_Tiltdown1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Omlaag kantelen"
+  )
+), Mn = (
+  /** @type {(inputs: Controls_Camera_Tiltdown1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Nach unten kippen"
+  )
+), zn = (
+  /** @type {((inputs?: Controls_Camera_Tiltdown1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Camera_Tiltdown1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? Nn() : e === "nl" ? Ln() : Mn();
+  })
+), Pn = (
+  /** @type {(inputs: Commerce_Submit_BusyInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Working…"
+  )
+), Fn = (
+  /** @type {(inputs: Commerce_Submit_BusyInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Bezig…"
+  )
+), $n = (
+  /** @type {(inputs: Commerce_Submit_BusyInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Läuft…"
+  )
+), Dn = (
+  /** @type {((inputs?: Commerce_Submit_BusyInputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Commerce_Submit_BusyInputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? Pn() : e === "nl" ? Fn() : $n();
+  })
+), Bn = (
+  /** @type {(inputs: Commerce_Submit_SuccessInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Done"
+  )
+), Un = (
+  /** @type {(inputs: Commerce_Submit_SuccessInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Gelukt"
+  )
+), Vn = (
+  /** @type {(inputs: Commerce_Submit_SuccessInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Fertig"
+  )
+), jn = (
+  /** @type {((inputs?: Commerce_Submit_SuccessInputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Commerce_Submit_SuccessInputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? Bn() : e === "nl" ? Un() : Vn();
+  })
+), Hn = (
+  /** @type {(inputs: Commerce_Submit_FailedInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Failed"
+  )
+), qn = (
+  /** @type {(inputs: Commerce_Submit_FailedInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Mislukt"
+  )
+), Gn = (
+  /** @type {(inputs: Commerce_Submit_FailedInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Fehlgeschlagen"
+  )
+), Zn = (
+  /** @type {((inputs?: Commerce_Submit_FailedInputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Commerce_Submit_FailedInputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? Hn() : e === "nl" ? qn() : Gn();
+  })
+);
+const Wn = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": 2,
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+};
+const yt = ([n, t, e]) => {
+  const i = document.createElementNS("http://www.w3.org/2000/svg", n);
+  return Object.keys(t).forEach((o) => {
+    i.setAttribute(o, String(t[o]));
+  }), e?.length && e.forEach((o) => {
+    const s = yt(o);
+    i.appendChild(s);
+  }), i;
+}, wt = (n, t = {}) => {
+  const i = {
+    ...Wn,
+    ...t
+  };
+  return yt(["svg", i, n]);
+};
+const Qn = [
+  [
+    "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" }]
+];
+const Yn = [
+  [
+    "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" }]
+];
+const _t = [["path", { d: "m6 9 6 6 6-6" }]];
+const Kn = [["path", { d: "m15 18-6-6 6-6" }]];
+const Xn = [["path", { d: "m9 18 6-6-6-6" }]];
+const Jn = [["path", { d: "m18 15-6-6-6 6" }]];
+const ti = [
+  ["path", { d: "M15 3h6v6" }],
+  ["path", { d: "m21 3-7 7" }],
+  ["path", { d: "m3 21 7-7" }],
+  ["path", { d: "M9 21H3v-6" }]
+];
+const ei = [
+  ["path", { d: "m14 10 7-7" }],
+  ["path", { d: "M20 10h-6V4" }],
+  ["path", { d: "m3 21 7-7" }],
+  ["path", { d: "M4 14h6v6" }]
+];
+const ni = [
+  ["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" }]
+];
+const ii = [
+  ["path", { d: "M10 5H3" }],
+  ["path", { d: "M12 19H3" }],
+  ["path", { d: "M14 3v4" }],
+  ["path", { d: "M16 17v4" }],
+  ["path", { d: "M21 12h-9" }],
+  ["path", { d: "M21 19h-5" }],
+  ["path", { d: "M21 5h-7" }],
+  ["path", { d: "M8 10v4" }],
+  ["path", { d: "M8 12H3" }]
+];
+const oi = [
+  ["path", { d: "M18 6 6 18" }],
+  ["path", { d: "m6 6 12 12" }]
+];
+const si = [
+  ["circle", { cx: "11", cy: "11", r: "8" }],
+  ["line", { x1: "21", x2: "16.65", y1: "21", y2: "16.65" }],
+  ["line", { x1: "11", x2: "11", y1: "8", y2: "14" }],
+  ["line", { x1: "8", x2: "14", y1: "11", y2: "11" }]
+];
+const ri = [
+  ["circle", { cx: "11", cy: "11", r: "8" }],
+  ["line", { x1: "21", x2: "16.65", y1: "21", y2: "16.65" }],
+  ["line", { x1: "8", x2: "14", y1: "11", y2: "11" }]
+];
+function y(n, { size: t = 20, strokeWidth: e = 1.75 } = {}) {
+  return wt(n, { width: t, height: t, "stroke-width": e });
+}
+const g = {
+  ar: (n) => y(Qn, n),
+  fullscreen: (n) => y(ti, n),
+  exitFullscreen: (n) => y(ei, n),
+  screenshot: (n) => y(Yn, n),
+  tiltUp: (n) => y(Jn, n),
+  tiltDown: (n) => y(_t, n),
+  rotateLeft: (n) => y(Kn, n),
+  rotateRight: (n) => y(Xn, n),
+  zoomIn: (n) => y(si, n),
+  zoomOut: (n) => y(ri, n),
+  reset: (n) => y(ni, n),
+  configurator: (n) => y(ii, n),
+  close: (n) => y(oi, n)
 };
-//#endregion
-//#region ../logger/src/format.ts
-function r(e) {
-	let t = new Date(e.timestamp).toLocaleTimeString("en-GB", { hour12: !1 }), n = e.level.toUpperCase().padEnd(5), r = e.trace_id?.slice(0, 8) ?? "--------", i = e.msg, a = [
-		"timestamp",
-		"level",
-		"msg",
-		"service",
-		"trace_id",
-		"span_id"
-	], o = Object.entries(e).filter(([e]) => !a.includes(e)).map(([e, t]) => `${e}=${JSON.stringify(t)}`).join(" ");
-	return `${t} ${n} [${r}] ${i}${o ? " " + o : ""}`;
-}
-function i(e) {
-	return JSON.stringify(e);
-}
-//#endregion
-//#region ../logger/src/write.ts
-function a(e, t) {
-	let n = t ? r(e) : i(e);
-	e.level === "error" ? console.error(n) : e.level === "warn" ? console.warn(n) : console.log(n);
-}
-//#endregion
-//#region ../utils/src/date.ts
-function o() {
-	return /* @__PURE__ */ new Date();
-}
-function s(e) {
-	return e.toISOString();
-}
-//#endregion
-//#region ../logger/src/logger.ts
-var c = class e {
-	constructor(e) {
-		this.config = e;
-	}
-	log(e, t, n = {}) {
-		let r = this.config.traceProvider?.() ?? {};
-		a({
-			timestamp: s(o()),
-			level: e,
-			msg: t,
-			service: this.config.service,
-			...r,
-			...n
-		}, this.config.isDev);
-	}
-	debug(e, t) {
-		this.config.isDev && this.log("debug", e, t);
-	}
-	info(e, t) {
-		this.log("info", e, t);
-	}
-	warn(e, t) {
-		this.log("warn", e, t);
-	}
-	error(e, t) {
-		this.log("error", e, t);
-	}
-	with(t) {
-		let n = new e(this.config);
-		return n.log = ((e, n, r = {}) => {
-			this.log(e, n, {
-				...t,
-				...r
-			});
-		}).bind(this), n;
-	}
+class b {
+  element;
+  constructor({ variant: t = "default", size: e = "default", label: i, icon: o, onClick: s, disabled: r = !1 } = {}) {
+    this.element = document.createElement("button"), this.element.className = `ui-btn ui-btn--${t} ui-btn--size-${e}`, i !== void 0 && (this.element.setAttribute("aria-label", i), this.element.title = i), o !== void 0 ? this.element.appendChild(o) : i !== void 0 && (this.element.textContent = i), s && this.element.addEventListener("click", s), this.element.disabled = r;
+  }
+  setIcon(t) {
+    const e = this.element.querySelector("svg");
+    e !== null ? e.replaceWith(t) : this.element.appendChild(t);
+  }
+}
+const m = {
+  semantic: {
+    // eslint-disable-next-line vd-custom/enforce-error-codes -- This is a hex color, not an error code
+    error: "#dc2626"
+  },
+  neutral: {
+    500: "#737373",
+    600: "#525252",
+    900: "#171717"
+  },
+  white: "#ffffff",
+  black: "#000000"
+}, a = {
+  0: "0",
+  0.5: "0.125rem",
+  // 2px
+  1: "0.25rem",
+  // 4px
+  1.5: "0.375rem",
+  // 6px
+  2: "0.5rem",
+  // 10px
+  3: "0.75rem",
+  // 14px
+  4: "1rem",
+  // 16px
+  5: "1.25rem",
+  // 20px
+  6: "1.5rem",
+  // 28px
+  8: "2rem",
+  // 32px
+  9: "2.25rem"
 };
-function l(e, t) {
-	return new c({
-		service: e,
-		isDev: t?.isDev === void 0 ? typeof process < "u" ? process.env.NODE_ENV !== "production" : !0 : t.isDev,
-		traceProvider: t?.traceProvider
-	});
-}
-//#endregion
-//#region src/utils/logger.ts
-function u(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 d(e) {
-	return {
-		debug: (t, n) => e.debug(t, u(n)),
-		info: (t, n) => e.info(t, u(n)),
-		warn: (t, n) => e.warn(t, u(n)),
-		error: (t, n) => e.error(t, u(n))
-	};
-}
-var f = !1, p = d(l("client", { isDev: !1 }));
-function m() {
-	f = !0, p = d(l("client", { isDev: !0 }));
-}
-function h() {
-	return f;
-}
-//#endregion
-//#region src/client/ready-state-tracker.ts
-var g = class {
-	ready = !1;
-	onReady;
-	constructor(e) {
-		this.onReady = e;
-	}
-	handleMappingReceived() {
-		this.markReady("Mapping received from server");
-	}
-	handleMutationResult(e) {
-		e.isInitial && this.markReady("Initial mutations processed");
-	}
-	get isReady() {
-		return this.ready;
-	}
-	clear() {
-		this.ready = !1;
-	}
-	markReady(e) {
-		this.ready || (this.ready = !0, p.info(`${e} - client is now ready`), this.onReady?.());
-	}
-}, _ = class {
-	isSelectedValue = !1;
-	constructor(e, t) {
-		this.value = e, this.attribute = t;
-	}
-	get isSelected() {
-		return this.isSelectedValue;
-	}
-	setSelected(e) {
-		this.isSelectedValue = e;
-	}
-}, v = 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 t.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 _(n, this.name);
-			n === this.defaultValue && e.setSelected(!0), t.set(n, e);
-		}
-		return t;
-	}
-}, y = 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 v(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
-		};
-	}
-}, b = {
-	READY: "ready",
-	MUTATION: "mutation",
-	STATE: "state",
-	CONFIG: "config",
-	CAMERA: "camera",
-	SNAPSHOT: "snapshot",
-	MAPPING: "mapping"
-}, x = new Set(Object.values(b));
-function S(e) {
-	if (typeof e != "object" || !e) return !1;
-	let t = e;
-	return typeof t.target == "string" ? !1 : typeof t.type == "string" && x.has(t.type);
-}
-function C(e) {
-	let t = O(e);
-	return t !== null && t.type === b.READY;
-}
-function w(e) {
-	let t = O(e);
-	return t !== null && t.type === b.MUTATION && Array.isArray(t.results);
-}
-function T(e) {
-	let t = O(e);
-	return t !== null && t.type === b.SNAPSHOT && ("data" in t || "error" in t);
-}
-function E(e) {
-	let t = O(e);
-	return t !== null && t.type === b.CAMERA && Array.isArray(t.transforms);
-}
-function D(e) {
-	let t = O(e);
-	return t !== null && t.type === b.MAPPING && Array.isArray(t.attributes);
-}
-function O(e) {
-	return typeof e != "object" || !e ? null : e;
-}
-//#endregion
-//#region ../messaging/src/queue.ts
-var k = class {
-	pending = [];
-	isReady = !1;
-	constructor(e) {
-		this.processor = e;
-	}
-	enqueue(e) {
-		if (this.isReady) {
-			this.processor(e);
-			return;
-		}
-		this.pending.push(e);
-	}
-	markReady() {
-		if (this.isReady || (this.isReady = !0, this.pending.length === 0)) return;
-		let e = [...this.pending];
-		this.pending.length = 0;
-		for (let t of e) this.processor(t);
-	}
-	get ready() {
-		return this.isReady;
-	}
-	get pendingCount() {
-		return this.pending.length;
-	}
-	hasPending(e) {
-		return this.pending.some((t) => t.type === e);
-	}
-	clear() {
-		this.pending.length = 0;
-	}
-}, A = class {
-	handlers = /* @__PURE__ */ new Map();
-	publisher;
-	consumer;
-	shouldBuffer;
-	listener = null;
-	sourceId;
-	constructor(e, t) {
-		this.getTarget = e, this.sourceId = `vd-${Math.random().toString(36).slice(2, 8)}`, this.publisher = new k((e) => this.post(e)), this.consumer = new k((e) => this.routeToHandler(e)), this.shouldBuffer = t?.shouldBuffer ?? null, t?.bufferIncoming !== !0 && this.consumer.markReady();
-	}
-	on(e, t) {
-		this.handlers.set(e, t);
-	}
-	off(e) {
-		this.handlers.delete(e);
-	}
-	send(e) {
-		this.publisher.enqueue(e);
-	}
-	markReady() {
-		this.publisher.markReady();
-	}
-	markConsumerReady() {
-		this.consumer.markReady();
-	}
-	consumerHasPending(e) {
-		return this.consumer.hasPending(e);
-	}
-	start() {
-		this.listener === null && (this.listener = (e) => {
-			let { data: t } = e;
-			if (!S(t) || t._source === this.sourceId) return;
-			let n = t;
-			if (this.shouldBuffer !== null && !this.shouldBuffer(n)) {
-				this.routeToHandler(n);
-				return;
-			}
-			this.consumer.enqueue(n);
-		}, window.addEventListener("message", this.listener));
-	}
-	destroy() {
-		this.listener !== null && (window.removeEventListener("message", this.listener), this.listener = null), this.publisher.clear(), this.consumer.clear(), this.handlers.clear();
-	}
-	get ready() {
-		return this.publisher.ready;
-	}
-	get pendingCount() {
-		return this.publisher.pendingCount;
-	}
-	post(e) {
-		let t = this.getTarget();
-		t !== null && t.postMessage({
-			...e,
-			_source: this.sourceId
-		}, "*");
-	}
-	routeToHandler(e) {
-		let t = this.handlers.get(e.type);
-		if (t === void 0) return;
-		let n = t(e);
-		n instanceof Promise && n.catch((t) => {
-			let n = t instanceof Error ? t.message : String(t);
-			console.error(`Virtualdisplay: error handling ${e.type}: ${n}`);
-		});
-	}
+class ai {
+  element;
+  constructor() {
+    this.element = document.createElement("div"), Object.assign(this.element.style, {
+      background: m.white,
+      borderRadius: a[3],
+      padding: a[6],
+      boxShadow: `0 ${a[2]} ${a[8]} oklch(0% 0 0 / 20%)`,
+      maxWidth: "20rem",
+      width: "100%"
+    });
+  }
+}
+class li {
+  constructor(t = {}) {
+    this.options = t, this.card = new ai(), this.backdrop = this.createBackdrop(), this.backdrop.appendChild(this.card.element);
+  }
+  options;
+  card;
+  backdrop;
+  keyHandler = null;
+  open() {
+    document.body.appendChild(this.backdrop), this.keyHandler = (t) => {
+      t.key === "Escape" && this.close();
+    }, document.addEventListener("keydown", this.keyHandler);
+  }
+  close() {
+    this.backdrop.remove(), this.keyHandler !== null && (document.removeEventListener("keydown", this.keyHandler), this.keyHandler = null), this.options.onClose?.();
+  }
+  createBackdrop() {
+    const t = document.createElement("div");
+    return Object.assign(t.style, {
+      position: "fixed",
+      inset: a[0],
+      background: "oklch(0% 0 0 / 50%)",
+      zIndex: "9999",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }), t.addEventListener("click", (e) => {
+      e.target === t && this.close();
+    }), t;
+  }
+}
+class ci {
+  element;
+  selectCallback = null;
+  constructor(t, e, i) {
+    this.element = document.createElement("div"), this.element.className = "ui-toggle-group";
+    for (let o = 0; o < t.length; o++) {
+      const s = t[o], r = document.createElement("button");
+      r.className = "ui-toggle-group-item", r.dataset.value = s, r.textContent = i?.[o] ?? s, r.dataset.state = s === e ? "on" : "off", r.setAttribute("aria-pressed", s === e ? "true" : "false"), r.addEventListener("click", () => {
+        this.selectCallback?.(s);
+      }), this.element.appendChild(r);
+    }
+  }
+  setSelected(t) {
+    for (const e of this.element.querySelectorAll(".ui-toggle-group-item")) {
+      const i = e.dataset.value === t;
+      e.dataset.state = i ? "on" : "off", e.setAttribute("aria-pressed", i ? "true" : "false");
+    }
+  }
+  onSelect(t) {
+    this.selectCallback = t;
+  }
+}
+class ui {
+  element;
+  select;
+  constructor(t, e, i, o, s) {
+    this.select = document.createElement("select"), this.select.className = "ui-native-select", this.select.dataset.name = t, this.select.setAttribute("aria-label", i);
+    const r = document.createElement("option");
+    r.value = "", r.disabled = !0, r.textContent = i, this.select.appendChild(r);
+    let l = !1;
+    for (let u = 0; u < e.length; u++) {
+      const p = e[u], v = document.createElement("option");
+      v.value = p, v.textContent = s?.[u] ?? p, p === o && (v.selected = !0, l = !0), this.select.appendChild(v);
+    }
+    l || (r.selected = !0);
+    const d = wt(_t, { width: 16, height: 16, "stroke-width": 2 });
+    d.classList.add("ui-native-select-icon"), this.element = document.createElement("div"), this.element.className = "ui-native-select-wrap", this.element.appendChild(this.select), this.element.appendChild(d);
+  }
+  setSelected(t) {
+    this.select.value = t;
+  }
+  onSelect(t) {
+    this.select.addEventListener("change", () => {
+      t(this.select.value);
+    });
+  }
+}
+const w = {
+  fontFamily: {
+    sans: ["Mona Sans", "ui-sans-serif", "system-ui", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"]
+  },
+  fontSize: {
+    xs: "0.75rem",
+    // 12px
+    sm: "0.875rem",
+    // 14px
+    base: "1rem",
+    // 16px
+    lg: "1.125rem"
+  },
+  fontWeight: {
+    medium: "500",
+    semibold: "600"
+  }
+}, x = w.fontFamily.sans.join(", "), di = `
+  --primary: oklch(5% 0 0);
+  --primary-foreground: oklch(100% 0 0);
+  --secondary: oklch(92% 0 0);
+  --secondary-foreground: oklch(5% 0 0);
+  --background: oklch(100% 0 0);
+  --foreground: oklch(5% 0 0);
+  --border: oklch(92% 0 0);
+  --ring: oklch(44% 0 0);
+  --radius: 0.625rem;
+  --accent: oklch(92% 0 0);
+  --accent-foreground: oklch(5% 0 0);
+  --muted-foreground: oklch(44% 0 0);
+`, hi = `
+:root { ${di} }
+
+/* ── Button ──────────────────────────────────────────────── */
+.ui-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border: 1px solid transparent;
+  border-radius: var(--radius);
+  font-family: ${x};
+  font-size: 0.875rem;
+  font-weight: 600;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: all 200ms;
+  flex-shrink: 0;
+}
+.ui-btn:active { transform: scale(0.98); }
+.ui-btn:disabled { opacity: 0.5; pointer-events: none; }
+.ui-btn svg { inline-size: 1rem; block-size: 1rem; pointer-events: none; flex-shrink: 0; }
+
+.ui-btn--default {
+  background: var(--primary);
+  color: var(--primary-foreground);
+  box-shadow: 0 1px 3px oklch(5% 0 0 / 20%);
+}
+.ui-btn--default:hover { background: oklch(10% 0 0); }
+
+.ui-btn--outline {
+  background: var(--background);
+  color: var(--foreground);
+  border-color: var(--border);
+  box-shadow: 0 1px 2px oklch(5% 0 0 / 8%);
+}
+.ui-btn--outline:hover { background: var(--accent); border-color: oklch(85% 0 0); }
+
+.ui-btn--secondary {
+  background: var(--secondary);
+  color: var(--secondary-foreground);
+  box-shadow: 0 1px 2px oklch(5% 0 0 / 8%);
+}
+.ui-btn--secondary:hover { background: oklch(88% 0 0); }
+
+.ui-btn--ghost { background: transparent; color: var(--foreground); }
+.ui-btn--ghost:hover { background: var(--accent); }
+
+.ui-btn--size-default { block-size: 2.25rem; padding: 0 1rem; }
+.ui-btn--size-sm { block-size: 2rem; padding: 0 0.75rem; border-radius: calc(var(--radius) - 0.125rem); }
+.ui-btn--size-lg { block-size: 2.5rem; padding: 0 1.5rem; }
+.ui-btn--size-icon { inline-size: 2.25rem; block-size: 2.25rem; padding: 0; }
+.ui-btn--size-icon-sm { inline-size: 2rem; block-size: 2rem; padding: 0; }
+.ui-btn--size-icon-lg { inline-size: 2.5rem; block-size: 2.5rem; padding: 0; }
+
+/* ── Toggle group ────────────────────────────────────────── */
+.ui-toggle-group { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
+
+.ui-toggle-group-item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  block-size: 2rem;
+  padding: 0 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--background);
+  color: var(--foreground);
+  font-family: ${x};
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 200ms;
+  box-shadow: 0 1px 2px oklch(5% 0 0 / 8%);
+}
+.ui-toggle-group-item:hover { background: var(--accent); border-color: oklch(85% 0 0); }
+.ui-toggle-group-item:active { transform: scale(0.98); }
+.ui-toggle-group-item:focus-visible {
+  outline: none;
+  border-color: var(--ring);
+  box-shadow: 0 0 0 3px oklch(5% 0 0 / 12%);
+}
+.ui-toggle-group-item[data-state="on"] {
+  background: var(--primary);
+  color: var(--primary-foreground);
+  border-color: var(--primary);
+}
+.ui-toggle-group-item[data-state="on"]:hover { background: oklch(10% 0 0); }
+
+/* ── Native select ───────────────────────────────────────── */
+.ui-native-select-wrap {
+  position: relative;
+  display: inline-flex;
+  min-inline-size: 8rem;
+}
+
+.ui-native-select {
+  display: block;
+  inline-size: 100%;
+  block-size: 2.25rem;
+  padding: 0 2.25rem 0 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--background);
+  appearance: none;
+  color: var(--foreground);
+  font-family: ${x};
+  font-size: 0.875rem;
+  font-weight: 400;
+  cursor: pointer;
+  transition: color 200ms, box-shadow 200ms, border-color 200ms;
+  box-shadow: 0 1px 2px oklch(5% 0 0 / 8%);
+}
+.ui-native-select:hover { border-color: oklch(85% 0 0); }
+.ui-native-select:focus-visible {
+  outline: none;
+  border-color: var(--ring);
+  box-shadow: 0 0 0 3px oklch(5% 0 0 / 12%);
+}
+
+.ui-native-select-icon {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: 0.625rem;
+  transform: translateY(-50%);
+  color: var(--muted-foreground);
+  pointer-events: none;
+}
+
+/* ── 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-anchor {
+  position: relative;
+}
+
+.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: ${x};
+  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-marker:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
+.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;
+}
+.vd-annotation-popup:focus { outline: none; }
+
+.vd-annotation-popup-close {
+  position: absolute;
+  inset-block-start: 0.375rem;
+  inset-inline-end: 0.375rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
+  padding: 0;
+  border: none;
+  border-radius: calc(var(--radius) - 4px);
+  background: transparent;
+  color: var(--muted-foreground);
+  cursor: pointer;
+  pointer-events: auto;
+}
+.vd-annotation-popup-close:hover {
+  color: var(--foreground);
+  background: var(--secondary);
+}
+.vd-annotation-popup-close:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 1px;
+}
+.vd-annotation-popup-close svg {
+  inline-size: 0.875rem;
+  block-size: 0.875rem;
+}
+
+@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: ${x};
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.25rem;
+  /* Keep the title clear of the absolutely positioned close button. */
+  padding-inline-end: 1.5rem;
+}
+
+.vd-annotation-popup-description {
+  font-family: ${x};
+  font-size: 0.8125rem;
+  font-weight: 400;
+  line-height: 1.125rem;
+  color: var(--muted-foreground);
+  margin-block-start: 0.25rem;
+}
+
+/* ── QR modal ────────────────────────────────────────────── */
+/* The slot the QR renders into. While loading it is a calm pulsing
+   placeholder of the same size, so the modal opens instantly and the QR
+   swaps in without any layout shift. */
+.ui-qr-slot {
+  inline-size: 6rem;
+  block-size: 6rem;
+  border-radius: 0.25rem;
+  overflow: hidden;
+}
+
+.ui-qr-slot img {
+  inline-size: 100%;
+  block-size: 100%;
+  display: block;
+}
+
+.ui-qr-slot--loading {
+  background: var(--secondary);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .ui-qr-slot--loading {
+    animation: vd-qr-pulse 1.6s ease-in-out infinite;
+  }
+}
+
+@keyframes vd-qr-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.55; }
+}
+`;
+let it = !1;
+function Ct() {
+  if (it || typeof document > "u")
+    return;
+  it = !0;
+  const n = document.createElement("style");
+  n.id = "vd-ui-vanilla", n.textContent = hi, document.head.appendChild(n);
+}
+const mi = w.fontFamily.sans.join(", ");
+class pi {
+  qrLib = null;
+  dialog = null;
+  qrSlot = null;
+  /** Open the modal immediately, with a loading placeholder in the QR slot. */
+  show() {
+    this.hide(), Ct(), this.dialog = new li({ onClose: () => {
+      this.dialog = null, this.qrSlot = null;
+    } }), Object.assign(this.dialog.card.element.style, {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: a[3],
+      fontFamily: mi
+    }), this.dialog.card.element.appendChild(this.createText(Ae(), {
+      fontSize: w.fontSize.base,
+      fontWeight: w.fontWeight.semibold,
+      color: m.neutral[900]
+    })), this.dialog.card.element.appendChild(this.createText(Re(), {
+      fontSize: w.fontSize.sm,
+      color: m.neutral[600]
+    })), this.qrSlot = this.createQrSlot(), this.dialog.card.element.appendChild(this.qrSlot), this.dialog.card.element.appendChild(this.createText(Le(), {
+      fontSize: w.fontSize.xs,
+      color: m.neutral[500]
+    }));
+    const t = new b({
+      variant: "outline",
+      label: Fe(),
+      onClick: () => {
+        this.hide();
+      }
+    });
+    this.dialog.card.element.appendChild(t.element), this.dialog.open();
+  }
+  /**
+   * Render the QR for `url` into the open modal's slot, replacing the loading
+   * placeholder. Resolves `true` once the QR is actually on screen; `false`
+   * when the modal was closed before it could render (nothing reopens).
+   */
+  async update(t) {
+    this.qrLib ??= await import("./browser-ey6Iih3j.js").then((i) => i.b);
+    const e = await this.qrLib.toDataURL(t, {
+      width: 256,
+      margin: 4,
+      errorCorrectionLevel: "M",
+      color: { dark: m.black, light: m.white }
+    });
+    return this.qrSlot === null ? !1 : (this.qrSlot.classList.remove("ui-qr-slot--loading"), this.qrSlot.replaceChildren(this.createQrImage(e)), !0);
+  }
+  hide() {
+    this.dialog?.close(), this.dialog = null, this.qrSlot = null;
+  }
+  createText(t, e) {
+    const i = document.createElement("p");
+    return i.textContent = t, Object.assign(i.style, { margin: "0", textAlign: "center", ...e }), i;
+  }
+  createQrSlot() {
+    const t = document.createElement("div");
+    return t.className = "ui-qr-slot ui-qr-slot--loading", t;
+  }
+  createQrImage(t) {
+    const e = document.createElement("img");
+    return e.src = t, e.alt = "QR code", e;
+  }
+}
+function ot(n) {
+  const t = Math.max(0, Math.min(1, n));
+  return t * t * (3 - 2 * t);
+}
+function fi(n, t, e, i, o, s) {
+  const [r, l, d] = n, u = Math.cos(t), p = Math.sin(t), v = u * r + p * d, E = -p * r + u * d, k = Math.cos(e), S = Math.sin(e), R = k * l - S * E, M = S * l + k * E, W = 0.55;
+  return [i + v * s * W, o - R * s * W, M];
+}
+function gi(n, t, e) {
+  n.beginPath(), n.moveTo(t[0], t[1]), n.lineTo(e[0], e[1]), n.strokeStyle = "#000", n.lineWidth = 2, n.stroke();
+}
+function bi(n, t, e, i, o) {
+  const s = t(e), r = t(i), l = [
+    s[0] + (r[0] - s[0]) * o,
+    s[1] + (r[1] - s[1]) * o,
+    s[2]
+  ];
+  gi(n, s, l);
+}
+const z = [-1, -1, 1], P = [1, -1, 1], F = [1, -1, -1], $ = [-1, -1, -1], D = [-1, 1, 1], B = [1, 1, 1], U = [1, 1, -1], V = [-1, 1, -1], st = [
+  [z, P],
+  [P, F],
+  [F, $],
+  [$, z],
+  [z, D],
+  [P, B],
+  [F, U],
+  [$, V],
+  [D, B],
+  [B, U],
+  [U, V],
+  [V, D]
+], vi = 400, rt = '-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif';
+function yi() {
+  const n = document.createElement("div");
+  Object.assign(n.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"
+  });
+  const t = document.createElement("canvas");
+  Object.assign(t.style, {
+    width: "100%",
+    height: "100%",
+    position: "absolute",
+    inset: "0"
+  });
+  const e = document.createElement("div");
+  Object.assign(e.style, {
+    position: "absolute",
+    top: "56%",
+    left: "0",
+    right: "0",
+    textAlign: "center",
+    pointerEvents: "none"
+  });
+  const i = document.createElement("span");
+  Object.assign(i.style, {
+    fontSize: "13px",
+    fontWeight: "400",
+    color: "#000",
+    fontVariantNumeric: "tabular-nums",
+    fontFamily: rt
+  });
+  const o = document.createElement("span");
+  return Object.assign(o.style, {
+    fontSize: "13px",
+    color: "#000",
+    fontFamily: rt
+  }), o.textContent = vt(), e.appendChild(i), e.appendChild(o), n.appendChild(t), n.appendChild(e), { overlay: n, canvas: t, pctEl: i, phaseEl: o };
+}
+class wi {
+  overlay;
+  canvas;
+  ctx;
+  pctEl;
+  phaseEl;
+  animationId = null;
+  showTimerId = null;
+  startTime;
+  hidden = !1;
+  visible = !1;
+  constructor(t, e = {}) {
+    this.startTime = performance.now();
+    const i = yi();
+    this.overlay = i.overlay, this.canvas = i.canvas, this.pctEl = i.pctEl, this.phaseEl = i.phaseEl, t.appendChild(this.overlay), this.ctx = this.canvas.getContext("2d"), this.ctx !== null && (this.sizeCanvas(), this.tick());
+    const o = e.showDelay ?? vi;
+    this.showTimerId = setTimeout(() => {
+      this.reveal();
+    }, o);
+  }
+  get loadingTexts() {
+    return {
+      downloading: vt(),
+      rendering: We()
+    };
+  }
+  updateProgress(t, e) {
+    this.hidden || (this.pctEl.textContent = `${Math.round(t)}%`, this.phaseEl.textContent = e !== "" ? ` · ${e}` : "");
+  }
+  /**
+   * Show an error state — stops animation and displays the error message.
+   * The overlay stays visible so the user knows something went wrong.
+   */
+  showError(t) {
+    if (this.hidden = !1, this.animationId !== null && (cancelAnimationFrame(this.animationId), this.animationId = null), this.ctx !== null) {
+      const e = Math.min(devicePixelRatio, 2), i = this.canvas.width / e, o = this.canvas.height / e;
+      this.ctx.fillStyle = "#fff", this.ctx.fillRect(0, 0, i * e, o * e);
+    }
+    this.pctEl.textContent = "", this.phaseEl.textContent = t, 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;
+    const t = Math.min(devicePixelRatio, 2), e = this.overlay.clientWidth || 440, i = this.overlay.clientHeight || 360;
+    this.canvas.width = e * t, this.canvas.height = i * t, this.ctx.scale(t, t), this.ctx.lineCap = "round", this.ctx.lineJoin = "round";
+  }
+  tick = () => {
+    this.hidden || (this.drawFrame(), this.animationId = requestAnimationFrame(this.tick));
+  };
+  drawFrame() {
+    if (this.ctx === null)
+      return;
+    const t = this.canvas.width / Math.min(devicePixelRatio, 2), e = this.canvas.height / Math.min(devicePixelRatio, 2), i = (performance.now() - this.startTime) / 1e3;
+    this.ctx.fillStyle = "#fff", this.ctx.fillRect(0, 0, t, e);
+    const o = t / 2, s = e * 0.44, r = Math.min(t, e) * 0.08, l = 0.785, d = 0.615, u = (S) => fi(S, l, d, o, s, r), p = 6, v = i % p / p, E = st.length;
+    let k;
+    v < 0.35 ? k = ot(v / 0.35) * E : v < 0.55 ? k = E : v < 0.9 ? k = (1 - ot((v - 0.55) / 0.35)) * E : k = 0, this.ctx.shadowBlur = 5, this.ctx.shadowColor = "rgba(30,30,30,0.08)";
+    for (let S = 0; S < E && !(S >= k); S++) {
+      const R = st[S];
+      if (R === void 0)
+        continue;
+      const M = Math.min(1, k - S);
+      bi(this.ctx, u, R[0], R[1], M);
+    }
+    this.ctx.shadowBlur = 0;
+  }
+}
+class _i {
+  constructor(t) {
+    this.options = t, this.element = document.createElement("div"), Object.assign(this.element.style, { display: "flex", gap: "0.375rem" }), this.onFullscreenChange = () => {
+      this.setFullscreenIcon(document.fullscreenElement !== null);
+    }, document.addEventListener("fullscreenchange", this.onFullscreenChange);
+  }
+  options;
+  element;
+  arBtn = null;
+  fullscreenBtn = null;
+  onFullscreenChange;
+  setFullscreenIcon(t) {
+    this.fullscreenBtn !== null && this.fullscreenBtn.setIcon(t ? g.exitFullscreen() : g.fullscreen());
+  }
+  syncButton(t, e, i) {
+    if (e && t === null) {
+      const o = i();
+      return this.element.appendChild(o.element), o;
+    }
+    return !e && t !== null ? (t.element.remove(), null) : t;
+  }
+  applySettings(t) {
+    this.arBtn = this.syncButton(this.arBtn, t.ar !== !1 && this.options.onAr !== void 0, () => new b({
+      variant: "outline",
+      size: "icon",
+      label: _e(),
+      icon: g.ar(),
+      onClick: () => {
+        this.options.onAr?.();
+      }
+    })), this.fullscreenBtn = this.syncButton(this.fullscreenBtn, t.fullscreen !== !1 && this.options.onFullscreen !== void 0, () => new b({
+      variant: "outline",
+      size: "icon",
+      label: Ue(),
+      icon: g.fullscreen(),
+      onClick: () => {
+        this.options.onFullscreen?.();
+      }
+    }));
+  }
+  destroy() {
+    document.removeEventListener("fullscreenchange", this.onFullscreenChange);
+  }
+}
+const T = 0.5;
+class L {
+  element;
+  constructor(t, e) {
+    this.element = Object.assign(document.createElement("div"), { className: "vd-camera-controls" });
+    const i = {
+      targetRotation: e.rotation,
+      targetTilt: e.tilt,
+      targetZoom: e.zoom,
+      thetaOffset: 0
+    }, o = Ci(t, e, i);
+    e.onChange((s) => {
+      i.targetRotation = s.rotation - i.thetaOffset, i.targetTilt = s.tilt, i.targetZoom = s.zoom, Si(o, e, s);
+    }), this.element.appendChild(L.buildZoom(o.zoomOut, o.zoomIn)), this.element.appendChild(L.buildDpad(o.tiltUp, o.rotateLeft, o.reset, o.rotateRight, o.tiltDown));
+  }
+  static buildZoom(t, e) {
+    const i = document.createElement("div");
+    return i.className = "vd-zoom", i.appendChild(t.element), i.appendChild(e.element), i;
+  }
+  static buildDpad(t, e, i, o, s) {
+    const r = document.createElement("div");
+    r.className = "vd-dpad";
+    for (const [l, d] of [
+      [t, "up"],
+      [e, "left"],
+      [i, "center"],
+      [o, "right"],
+      [s, "down"]
+    ])
+      l.element.classList.add(`vd-dpad-${d}`), r.appendChild(l.element);
+    return r;
+  }
+}
+function Ci(n, t, e) {
+  const i = (r) => Math.max(t.limits?.minZoom ?? 1, Math.min(t.limits?.maxZoom ?? 1 / 0, r)), o = (r) => {
+    const l = t.limits?.minRotate, d = t.limits?.maxRotate;
+    return l !== void 0 || d !== void 0 ? Math.max(l ?? -1 / 0, Math.min(d ?? 1 / 0, r)) : r;
+  }, s = (r) => {
+    const l = t.limits?.minTilt, d = t.limits?.maxTilt;
+    if (l !== void 0 || d !== void 0) {
+      e.targetTilt = Math.max(l ?? 0, Math.min(d ?? 180, e.targetTilt + r)), n.tilt(e.targetTilt).set();
+      return;
+    }
+    const u = e.targetTilt + r;
+    u > 180 || u < 0 ? (e.targetTilt = u > 180 ? 360 - u : -u, e.thetaOffset = (e.thetaOffset + 180) % 360, n.tilt(e.targetTilt).rotate(e.targetRotation + e.thetaOffset).set()) : (e.targetTilt = u, n.tilt(e.targetTilt).set());
+  };
+  return {
+    zoomOut: new b({ variant: "outline", size: "icon", label: yn(), icon: g.zoomOut(), onClick: () => {
+      e.targetZoom = i(e.targetZoom - 10), n.zoom(e.targetZoom).set();
+    } }),
+    zoomIn: new b({ variant: "outline", size: "icon", label: fn(), icon: g.zoomIn(), onClick: () => {
+      e.targetZoom = i(e.targetZoom + 10), n.zoom(e.targetZoom).set();
+    } }),
+    tiltUp: new b({ variant: "outline", size: "icon", label: On(), icon: g.tiltUp(), onClick: () => {
+      s(-15);
+    } }),
+    rotateLeft: new b({ variant: "outline", size: "icon", label: Sn(), icon: g.rotateLeft(), onClick: () => {
+      e.targetRotation = o(e.targetRotation - 15), n.rotate(e.targetRotation + e.thetaOffset).set();
+    } }),
+    reset: new b({ variant: "outline", size: "icon", label: dn(), icon: g.reset(), onClick: () => {
+      e.thetaOffset = 0, n.reset();
+    } }),
+    rotateRight: new b({ variant: "outline", size: "icon", label: xn(), icon: g.rotateRight(), onClick: () => {
+      e.targetRotation = o(e.targetRotation + 15), n.rotate(e.targetRotation + e.thetaOffset).set();
+    } }),
+    tiltDown: new b({ variant: "outline", size: "icon", label: zn(), icon: g.tiltDown(), onClick: () => {
+      s(15);
+    } })
+  };
+}
+function Si(n, t, e) {
+  const i = t.limits;
+  i !== void 0 && (n.zoomOut.element.disabled = i.minZoom !== void 0 && e.zoom <= i.minZoom + T, n.zoomIn.element.disabled = i.maxZoom !== void 0 && e.zoom >= i.maxZoom - T, n.tiltUp.element.disabled = i.minTilt !== void 0 && e.tilt <= i.minTilt + T, n.tiltDown.element.disabled = i.maxTilt !== void 0 && e.tilt >= i.maxTilt - T, n.rotateLeft.element.disabled = i.minRotate !== void 0 && e.rotation <= i.minRotate + T, n.rotateRight.element.disabled = i.maxRotate !== void 0 && e.rotation >= i.maxRotate - T);
+}
+const I = {
+  /** Attribute selection requested (cancelable). `detail`: `{ attribute, value }`. */
+  SELECT: "ui:select",
+  /** Attribute selection applied. `detail`: `{ attribute, value }`. */
+  SELECTED: "ui:selected",
+  /** Focus changed (bubbles). `detail`: `{ component, attributes }`, or `null` for the overview. */
+  FOCUS_CHANGE: "vd:focus-change",
+  /** Resolved configuration changed (bubbles). `detail`: the resolved configuration, or `null` when nothing matches. */
+  CONFIGURATION_CHANGE: "vd:configuration-change",
+  /** Configuration submitted (bubbles). `detail`: the resolved configuration handed to the host. */
+  CONFIGURATION_SUBMIT: "vd:configuration-submit"
+}, ki = 5;
+let Ai = 0;
+function j(n) {
+  const t = n.replace(/([A-Z])/g, " $1").trim();
+  return t.charAt(0).toUpperCase() + t.slice(1).toLowerCase();
+}
+function Ei(n, t, e, i, o) {
+  const s = document.createElement("div");
+  s.className = "vd-attribute", s.dataset.name = n.name;
+  const r = document.createElement("span");
+  r.className = "vd-attribute-label", r.textContent = j(n.name), r.id = `vd-attribute-label-${Ai++}`, s.appendChild(r), s.setAttribute("role", "group"), s.setAttribute("aria-labelledby", r.id);
+  const l = n.values.find((p) => t.getValue(n.name, p)?.isSelected === !0), d = n.values.map(j), u = n.values.length <= ki ? new ci(n.values, l, d) : new ui(n.name, n.values, j(n.name), l, d);
+  return u.onSelect((p) => {
+    e.dispatch(I.SELECT, { attribute: n.name, value: p }, !0).defaultPrevented || i(n.name, p);
+  }), o(n.name, (p) => {
+    u.setSelected(p.value), e.dispatch(I.SELECTED, { attribute: n.name, value: p.value });
+  }), s.appendChild(u.element), s;
+}
+const xi = 80, Ti = 2500;
+class Ri {
+  constructor(t, e = Ti) {
+    this.configuration = t, this.resetMs = e, this.element = document.createElement("div"), this.element.className = "vd-commerce vd-hidden";
+    const i = document.createElement("div");
+    i.className = "vd-commerce-price", this.priceEl = document.createElement("span"), this.priceEl.className = "vd-price", this.vatEl = document.createElement("span"), this.vatEl.className = "vd-vat", i.append(this.priceEl, this.vatEl), this.button = new b({ variant: "default", onClick: () => {
+      this.handleSubmit();
+    } }), this.button.element.classList.add("vd-cta", "vd-hidden"), this.element.append(i, this.button.element), this.unsubscribe = this.configuration.onRender(() => {
+      this.update();
+    }), this.update();
+  }
+  configuration;
+  resetMs;
+  element;
+  priceEl;
+  vatEl;
+  button;
+  unsubscribe;
+  state = "idle";
+  resetTimer;
+  /** Re-render from the facade. Called on every resolve and on submit-handler registration. */
+  update() {
+    this.renderPrice(this.configuration.current), this.renderButton();
+    const t = this.configuration.current !== void 0 || this.configuration.submitEnabled;
+    this.element.classList.toggle("vd-hidden", !t);
+  }
+  destroy() {
+    this.unsubscribe(), this.resetTimer !== void 0 && clearTimeout(this.resetTimer), this.element.remove();
+  }
+  renderPrice(t) {
+    if (t === void 0) {
+      this.priceEl.textContent = "", this.vatEl.textContent = "";
+      return;
+    }
+    this.priceEl.textContent = Ii(t.price, t.currency), this.vatEl.textContent = at(this.configuration.vatDisplay);
+  }
+  renderButton() {
+    const t = this.configuration.submitEnabled;
+    this.button.element.classList.toggle("vd-hidden", !t), t && this.state === "idle" && this.setButtonText(at(this.configuration.buttonLabel));
+  }
+  async handleSubmit() {
+    if (this.state !== "busy") {
+      this.setState("busy", Dn());
+      try {
+        await this.configuration.submit(), this.setState("success", jn());
+      } catch {
+        this.setState("failed", Zn());
+      }
+      this.scheduleReset();
+    }
+  }
+  scheduleReset() {
+    this.resetTimer !== void 0 && clearTimeout(this.resetTimer), this.resetTimer = setTimeout(() => {
+      this.state = "idle", this.update();
+    }, this.resetMs);
+  }
+  setState(t, e) {
+    this.state = t, this.element.dataset.submit = t, this.button.element.disabled = t === "busy", this.setButtonText(e);
+  }
+  setButtonText(t) {
+    this.button.element.textContent = t, this.button.element.setAttribute("aria-label", t);
+  }
+}
+function at(n) {
+  return (n ?? "").slice(0, xi);
+}
+function Ii(n, t) {
+  try {
+    const e = new Intl.NumberFormat(h(), { style: "currency", currency: t }), i = e.resolvedOptions().maximumFractionDigits ?? 2;
+    return e.format(n / 10 ** i);
+  } catch {
+    return `${t} ${(n / 100).toFixed(2)}`;
+  }
+}
+class St {
+  slot = null;
+  panel = null;
+  attach(t, e) {
+    this.panel = e, e.style.display = "none", this.slot = document.createElement("div"), this.slot.className = "vd-slot-bottom-left", this.slot.appendChild(e), t.appendChild(this.slot);
+  }
+  setVisible(t) {
+    this.panel !== null && (this.panel.style.display = t ? "flex" : "none");
+  }
+  destroy() {
+    this.slot?.remove(), this.slot = null, this.panel = null;
+  }
+}
+const Oi = 572;
+class Ni {
+  element = null;
+  body = null;
+  openButton = null;
+  closeButton = null;
+  container = null;
+  observer = null;
+  collapsible = !1;
+  expanded = !0;
+  visible = !1;
+  attach(t, e) {
+    this.container = t, e.classList.add("vd-attributes-sidebar"), this.closeButton = new b({
+      variant: "ghost",
+      size: "icon-sm",
+      label: an(),
+      icon: g.close({ size: 18 }),
+      onClick: () => {
+        this.expanded = !1, this.render();
+      }
+    });
+    const i = document.createElement("div");
+    i.className = "vd-sidebar-header", i.appendChild(this.closeButton.element), this.body = document.createElement("div"), this.body.className = "vd-sidebar-body", this.body.appendChild(e), this.element = document.createElement("div"), this.element.className = "vd-sidebar vd-hidden", this.element.append(i, this.body), t.appendChild(this.element), this.openButton = new b({
+      variant: "outline",
+      size: "default",
+      label: nn(),
+      icon: g.configurator({ size: 18 }),
+      onClick: () => {
+        this.expanded = !0, this.render();
+      }
+    }), this.openButton.element.classList.add("vd-configurator-toggle", "vd-hidden"), t.appendChild(this.openButton.element), this.observe();
+  }
+  setVisible(t) {
+    this.visible = t, this.render();
+  }
+  destroy() {
+    this.observer?.disconnect(), this.observer = null, this.openButton?.element.remove(), this.element?.remove(), this.container?.classList.remove("vd-layout-sidebar-right", "vd-layout-sidebar-collapsed"), this.container = null;
+  }
+  observe() {
+    typeof ResizeObserver > "u" || this.container === null || (this.observer = new ResizeObserver((t) => {
+      const e = t[0]?.contentRect.width ?? 0;
+      this.setCollapsible(e > 0 && e < Oi);
+    }), this.observer.observe(this.container));
+  }
+  setCollapsible(t) {
+    t !== this.collapsible && (this.collapsible = t, this.expanded = !t, this.render());
+  }
+  render() {
+    if (this.element === null || this.openButton === null || this.closeButton === null || this.container === null)
+      return;
+    const t = this.visible && this.expanded, e = this.visible && !this.expanded;
+    this.element.classList.toggle("vd-hidden", !this.visible), this.element.classList.toggle("vd-sidebar-collapsed", e), this.openButton.element.classList.toggle("vd-hidden", !e), this.closeButton.element.style.display = this.collapsible ? "" : "none", this.container.classList.toggle("vd-layout-sidebar-right", t), this.container.classList.toggle("vd-layout-sidebar-collapsed", e);
+  }
+}
+class Li {
+  attach(t, e) {
+  }
+  setVisible(t) {
+  }
+  destroy() {
+  }
+}
+const Mi = {
+  "inframe-bottom-left": () => new St(),
+  "sidebar-right": () => new Ni(),
+  hidden: () => new Li()
 };
-new Set([b.CAMERA]);
-//#endregion
-//#region src/attributes/attributes.ts
-var j = class {
-	registry;
-	pendingCallbacks = [];
-	constructor(e, t) {
-		this.send = e, this.onMutationFailed = t;
-	}
-	handleMappingReceived(e) {
-		p.debug("Initializing from server mapping", { attributeCount: e.attributes.length }), this.registry = new y(e.attributes, (e, t) => this.sendMutation(e, t), this.onMutationFailed);
-		let t = this.registry.defaults();
-		t.length > 0 && this.sendMutation(t, !0), this.replayPendingCallbacks();
-	}
-	handleMutationResult(e) {
-		this.registry?.handleResults(e.results);
-	}
-	select(e, t) {
-		this.sendMutation([{
-			name: e,
-			value: t
-		}], !1);
-	}
-	getValues(e) {
-		return this.registry?.get(e)?.getValues() ?? [];
-	}
-	getValue(e, t) {
-		return this.registry?.get(e)?.getValue(t);
-	}
-	onChange(e, t) {
-		if (this.registry === void 0) {
-			this.pendingCallbacks.push({
-				name: e,
-				callback: t
-			});
-			return;
-		}
-		let n = this.registry.get(e);
-		if (n === void 0) {
-			p.warn(`onChange: attribute "${e}" not found — callback will not fire`);
-			return;
-		}
-		n.onChange(t);
-	}
-	getAttribute(e) {
-		return this.registry?.get(e);
-	}
-	get hasMapping() {
-		return this.registry !== void 0;
-	}
-	sendMutation(e, t) {
-		let n = {
-			type: b.MUTATION,
-			mutations: e,
-			isInitial: t
-		};
-		this.send(n);
-	}
-	replayPendingCallbacks() {
-		for (let { name: e, callback: t } of this.pendingCallbacks) {
-			let n = this.registry?.get(e);
-			n === void 0 && p.warn(`onChange: attribute "${e}" not found — buffered callback will not fire`), n?.onChange(t);
-		}
-		this.pendingCallbacks.length = 0;
-	}
-}, M = class {
-	commands = [];
-	constructor(e) {
-		this.send = e;
-	}
-	rotate(e) {
-		return this.validateFiniteNumber(e, "rotate"), this.commands.push({
-			action: "rotate",
-			value: e
-		}), this;
-	}
-	tilt(e) {
-		return this.validateFiniteNumber(e, "tilt"), this.commands.push({
-			action: "tilt",
-			value: e
-		}), this;
-	}
-	zoom(e) {
-		return this.validateFiniteNumber(e, "zoom"), this.commands.push({
-			action: "zoom",
-			value: e
-		}), this;
-	}
-	set() {
-		if (this.commands.length === 0) throw t.invalidParameter("No camera commands to execute. Call rotate(), tilt(), or zoom() before set().");
-		let e = {
-			type: b.CAMERA,
-			commands: this.commands
-		};
-		this.send(e), this.commands = [];
-	}
-	validateFiniteNumber(e, n) {
-		if (!Number.isFinite(e)) throw t.invalidParameter(`${n}() requires a finite number, got ${String(e)}`);
-	}
-	reset() {
-		let e = {
-			type: b.CAMERA,
-			commands: [{ action: "reset" }]
-		};
-		this.send(e);
-	}
-}, N = class {
-	state;
-	changeCallbacks = [];
-	constructor() {
-		this.state = {
-			rotation: 0,
-			tilt: 0,
-			zoom: 0
-		};
-	}
-	get rotation() {
-		return this.state.rotation;
-	}
-	get tilt() {
-		return this.state.tilt;
-	}
-	get zoom() {
-		return this.state.zoom;
-	}
-	onChange(e) {
-		this.changeCallbacks.push(e);
-	}
-	handlePositionUpdate(e) {
-		this.update(e.transforms);
-	}
-	update(e) {
-		let t = !1;
-		for (let n of e) switch (n.type) {
-			case "rotation":
-				this.state.rotation = n.value, t = !0;
-				break;
-			case "tilt":
-				this.state.tilt = n.value, t = !0;
-				break;
-			case "zoom":
-				this.state.zoom = n.value, t = !0;
-				break;
-			default: break;
-		}
-		if (t) {
-			let e = {
-				rotation: this.rotation,
-				tilt: this.tilt,
-				zoom: this.zoom
-			};
-			for (let t of this.changeCallbacks) t(e);
-		}
-	}
-}, P = class {
-	developedCallbacks = /* @__PURE__ */ new Set();
-	errorCallbacks = /* @__PURE__ */ new Set();
-	developed = !1;
-	failed = !1;
-	photoData = null;
-	constructor(e) {
-		this.filename = e;
-	}
-	onDeveloped(e) {
-		return this.developed && this.photoData !== null ? (e(this.photoData), this) : (this.developedCallbacks.add(e), this);
-	}
-	onError(e) {
-		return this.errorCallbacks.add(e), this;
-	}
-	getFilename() {
-		return this.filename;
-	}
-	develop(e) {
-		this.developed || this.failed || (this.photoData = e, this.developed = !0, this.developedCallbacks.forEach((e) => {
-			e(this.photoData);
-		}), this.developedCallbacks.clear(), this.errorCallbacks.clear());
-	}
-	fail(e) {
-		this.developed || this.failed || (this.failed = !0, this.errorCallbacks.forEach((t) => {
-			t(e);
-		}), this.developedCallbacks.clear(), this.errorCallbacks.clear());
-	}
-}, F = class {
-	validExtensions = [".png"];
-	pendingPhotos = /* @__PURE__ */ new Map();
-	constructor(e) {
-		this.send = e;
-	}
-	take(e) {
-		this.validateFilename(e), p.debug("Taking snapshot", { filename: e });
-		let t = new P(e);
-		return this.pendingPhotos.set(t.getFilename(), t), this.send({
-			type: b.SNAPSHOT,
-			filename: e
-		}), t;
-	}
-	handleSnapshotResult(n) {
-		let r = this.pendingPhotos.get(n.filename);
-		if (r === void 0) {
-			p.warn("No pending photo found for filename", {
-				filename: n.filename,
-				pendingFilenames: Array.from(this.pendingPhotos.keys())
-			});
-			return;
-		}
-		if (this.pendingPhotos.delete(n.filename), n.error !== void 0) {
-			r.fail(new t(n.error, e.SNAPSHOT_FAILED));
-			return;
-		}
-		n.data !== void 0 && r.develop({
-			filename: n.filename,
-			data: n.data
-		});
-	}
-	validateFilename(n) {
-		if (n === "" || typeof n != "string") throw new t("Filename must be a non-empty string", e.INVALID_PARAMETER);
-		if (!this.validExtensions.some((e) => n.toLowerCase().endsWith(e))) throw new t(`Invalid filename: "${n}". Filename must end with one of: ${this.validExtensions.join(", ")}`, e.INVALID_PARAMETER);
-		if (n.includes("..") || n.includes("/") || n.includes("\\")) throw new t("Filename cannot contain path separators or \"..\"", e.INVALID_PARAMETER);
-	}
-}, I = class {
-	send;
-	constructor(e) {
-		this.send = e;
-	}
-	sendInitialConfig(e) {
-		let t = this.buildUIConfig(e), n = this.buildViewerConfig(t, e.camera);
-		n !== void 0 && this.sendConfig(n);
-	}
-	buildUIConfig(e) {
-		let t = this.extractUIValues(e);
-		if (Object.values(t).some((e) => e !== void 0)) return {
-			...t.arEnabled !== void 0 && { arEnabled: t.arEnabled },
-			...t.fullscreenEnabled !== void 0 && { fullscreenEnabled: t.fullscreenEnabled },
-			...t.loadingIndicatorEnabled !== void 0 && { loadingIndicatorEnabled: t.loadingIndicatorEnabled }
-		};
-	}
-	extractUIValues(e) {
-		return {
-			arEnabled: e.arEnabled ?? e.ui?.arEnabled,
-			fullscreenEnabled: e.fullscreenEnabled ?? e.ui?.fullscreenEnabled,
-			loadingIndicatorEnabled: e.loadingIndicatorEnabled ?? e.ui?.loadingIndicatorEnabled
-		};
-	}
-	buildViewerConfig(e, t) {
-		if (!(e === void 0 && t === void 0)) return {
-			...e !== void 0 && { ui: e },
-			...t !== void 0 && { camera: t }
-		};
-	}
-	setArEnabled(e) {
-		p.debug(`Setting AR button enabled: ${e}`), this.updateUIConfig({ arEnabled: e });
-	}
-	setFullscreenEnabled(e) {
-		p.debug(`Setting fullscreen button enabled: ${e}`), this.updateUIConfig({ fullscreenEnabled: e });
-	}
-	setLoadingIndicatorEnabled(e) {
-		p.debug(`Setting loading indicator enabled: ${e}`), this.updateUIConfig({ loadingIndicatorEnabled: e });
-	}
-	updateUIConfig(e) {
-		p.debug("Updating UI configuration", e), Object.keys(e).length > 0 && this.sendConfig({ ui: e });
-	}
-	hideAllUI() {
-		p.debug("Hiding all UI elements"), this.sendUIConfig({
-			arEnabled: !1,
-			fullscreenEnabled: !1,
-			loadingIndicatorEnabled: !1
-		});
-	}
-	showAllUI() {
-		p.debug("Showing all UI elements"), this.sendUIConfig({
-			arEnabled: !0,
-			fullscreenEnabled: !0,
-			loadingIndicatorEnabled: !0
-		});
-	}
-	sendUIConfig(e) {
-		this.sendConfig({ ui: e });
-	}
-	sendConfig(e) {
-		let t = {
-			type: b.CONFIG,
-			config: e
-		};
-		p.debug("Sending config", t), this.send(t);
-	}
-}, L = class {
-	attributes;
-	readyStateTracker;
-	messenger;
-	viewerService;
-	cameraApi;
-	cameraPositionApi;
-	snapshotApi;
-	options;
-	iframe;
-	readyCallbacks = [];
-	mutationFailedCallbacks = [];
-	constructor(e) {
-		this.options = e, this.initializeLogging(), this.messenger = new A(() => this.iframe?.contentWindow ?? null);
-		let t = (e) => {
-			this.messenger.send(e);
-		};
-		this.attributes = new j(t, (e, t) => {
-			for (let n of this.mutationFailedCallbacks) n({
-				attribute: e,
-				value: t
-			});
-		}), this.readyStateTracker = new g(() => {
-			let e = this.readyCallbacks;
-			this.readyCallbacks = [];
-			for (let t of e) t(this);
-		}), this.viewerService = new I(t), this.cameraApi = new M(t), this.cameraPositionApi = new N(), this.snapshotApi = new F(t), this.registerHandlers(), this.messenger.start(), this.createAndConnectIframe();
-	}
-	registerHandlers() {
-		this.messenger.on(b.READY, (e) => {
-			C(e) && (p.info("Server ready — flushing publisher queue"), this.messenger.markReady(), this.viewerService.sendInitialConfig(this.options));
-		}), this.messenger.on(b.MUTATION, (e) => {
-			w(e) && (this.attributes.handleMutationResult(e), this.readyStateTracker.handleMutationResult(e));
-		}), this.messenger.on(b.SNAPSHOT, (e) => {
-			T(e) && this.snapshotApi.handleSnapshotResult(e);
-		}), this.messenger.on(b.CAMERA, (e) => {
-			E(e) && this.cameraPositionApi.handlePositionUpdate(e);
-		}), this.messenger.on(b.MAPPING, (e) => {
-			D(e) && (this.attributes.handleMappingReceived(e), this.readyStateTracker.handleMappingReceived());
-		});
-	}
-	initializeLogging() {
-		this.options.debug === !0 && m(), p.info("Initializing Virtualdisplay client", {
-			model: this.options.model,
-			debug: this.options.debug,
-			language: this.options.language
-		});
-	}
-	createAndConnectIframe() {
-		p.debug("Creating iframe for Virtualdisplay viewer"), this.iframe = new n(this.options).create(), p.debug("Iframe created, waiting for server READY");
-	}
-	select(e, t) {
-		this.attributes.select(e, t);
-	}
-	getValues(e) {
-		return this.attributes.getValues(e);
-	}
-	getValue(e, t) {
-		return this.attributes.getValue(e, t);
-	}
-	onChange(e, t) {
-		this.attributes.onChange(e, t);
-	}
-	getAttribute(e) {
-		return this.attributes.getAttribute(e);
-	}
-	get isReady() {
-		return this.readyStateTracker.isReady;
-	}
-	onReady(e) {
-		if (this.readyStateTracker.isReady) {
-			e(this);
-			return;
-		}
-		this.readyCallbacks.push(e);
-	}
-	onMutationFailed(e) {
-		this.mutationFailedCallbacks.push(e);
-	}
-	get viewer() {
-		return this.viewerService;
-	}
-	get camera() {
-		return this.cameraApi;
-	}
-	get cameraPosition() {
-		return this.cameraPositionApi;
-	}
-	get snapshot() {
-		return this.snapshotApi;
-	}
-	destroy() {
-		p.info("Destroying Virtualdisplay client"), this.readyStateTracker.clear(), this.readyCallbacks = [], this.messenger.destroy(), this.iframe?.parentElement !== null && this.iframe?.parentElement !== void 0 && this.iframe.parentElement.removeChild(this.iframe), this.iframe = void 0, p.debug("Virtualdisplay client destroyed");
-	}
+function zi(n) {
+  return (Mi[n ?? ""] ?? (() => new St()))();
+}
+const H = w.fontFamily.sans.join(", "), q = `
+  position: absolute;
+  display: flex;
+  z-index: 10;
+  transition: inset-inline-end 0.18s ease;
+`, Pi = `
+/* Override browser's default black fullscreen backdrop */
+.vd-container:fullscreen {
+  background: oklch(100% 0 0);
+}
+
+/* Layout slots — four corners */
+.vd-slot-top-right {
+  ${q}
+  inset-block-start: ${a[3]};
+  inset-inline-end: ${a[3]};
+  flex-direction: column;
+  align-items: flex-end;
+  gap: ${a[1.5]};
+}
+
+.vd-slot-bottom-left {
+  ${q}
+  inset-block-end: ${a[3]};
+  inset-inline-start: ${a[3]};
+  flex-direction: column;
+  align-items: flex-start;
+  gap: ${a[1.5]};
+}
+
+.vd-slot-bottom-right {
+  ${q}
+  inset-block-end: ${a[3]};
+  inset-inline-end: ${a[3]};
+  flex-direction: row;
+  gap: ${a[1.5]};
+}
+
+/* Component styles — no positioning */
+.vd-camera-controls {
+  display: flex;
+  flex-direction: column;
+  gap: ${a[1]};
+  background: color-mix(in oklch, ${m.white} 85%, transparent);
+  backdrop-filter: blur(8px);
+  border-radius: ${a[2]};
+  padding: ${a[2]};
+}
+
+.vd-zoom {
+  display: flex;
+  gap: ${a[0.5]};
+}
+
+.vd-dpad {
+  display: grid;
+  grid-template-columns: repeat(3, ${a[9]});
+  grid-template-rows: repeat(3, ${a[9]});
+  gap: ${a[0.5]};
+}
+
+.vd-dpad-up    { grid-column: 2; grid-row: 1; }
+.vd-dpad-left  { grid-column: 1; grid-row: 2; }
+.vd-dpad-center { grid-column: 2; grid-row: 2; }
+.vd-dpad-right { grid-column: 3; grid-row: 2; }
+.vd-dpad-down  { grid-column: 2; grid-row: 3; }
+
+.vd-attributes {
+  display: flex;
+  flex-direction: column;
+  gap: ${a[3]};
+  background: color-mix(in oklch, ${m.white} 85%, transparent);
+  backdrop-filter: blur(8px);
+  border: 1px solid color-mix(in oklch, ${m.neutral[900]} 8%, transparent);
+  border-radius: ${a[3]};
+  padding: ${a[3]};
+  box-shadow: 0 ${a[1]} ${a[4]} color-mix(in oklch, ${m.neutral[900]} 6%, transparent);
+  font-family: ${H};
+}
+
+.vd-attribute {
+  display: flex;
+  flex-direction: column;
+  gap: ${a[1.5]};
+}
+
+/* Micro-label: recedes so the controls lead. */
+.vd-attribute-label {
+  font-size: ${w.fontSize.xs};
+  font-weight: ${w.fontWeight.medium};
+  color: ${m.neutral[500]};
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-family: ${H};
+}
+
+/* sidebar-right layout — a docked, full-height right panel */
+.vd-container { --vd-sidebar-width: 300px; }
+
+.vd-hidden { display: none !important; }
+
+.vd-sidebar {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 0;
+  inline-size: var(--vd-sidebar-width);
+  z-index: 11;
+  display: flex;
+  flex-direction: column;
+  background: color-mix(in oklch, ${m.white} 90%, transparent);
+  backdrop-filter: blur(10px);
+  border-inline-start: 1px solid color-mix(in oklch, ${m.neutral[900]} 8%, transparent);
+  box-shadow: -${a[1]} 0 ${a[4]} color-mix(in oklch, ${m.neutral[900]} 5%, transparent);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .vd-sidebar { transition: transform 0.18s ease; }
+}
+
+.vd-sidebar-collapsed { transform: translateX(100%); }
+
+.vd-sidebar-header {
+  display: flex;
+  justify-content: flex-end;
+  padding: ${a[1.5]} ${a[1.5]} 0;
+}
+
+.vd-sidebar-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: ${a[4]};
+}
+
+/* attributes inside the sidebar: flat and full-width — the panel provides the frosting */
+.vd-attributes.vd-attributes-sidebar {
+  background: transparent;
+  backdrop-filter: none;
+  border: none;
+  border-radius: 0;
+  padding: 0;
+  box-shadow: none;
+  gap: ${a[5]};
+}
+
+/* floating toggle, shown when the sidebar is collapsed on narrow embeds */
+.vd-configurator-toggle {
+  position: absolute;
+  inset-block-end: ${a[3]};
+  inset-inline-end: ${a[3]};
+  z-index: 12;
+}
+
+/* while the panel is open, keep the corner controls clear of it */
+.vd-layout-sidebar-right .vd-slot-top-right { inset-inline-end: calc(var(--vd-sidebar-width) + ${a[3]}); }
+.vd-layout-sidebar-right .vd-slot-bottom-right { inset-inline-end: calc(var(--vd-sidebar-width) + ${a[3]}); }
+
+/* while collapsed on a narrow embed, lift the bottom-right controls above the
+   floating toggle so the AR/fullscreen buttons aren't hidden behind the
+   "open configurator" button (spacing[9] = the default toggle button height) */
+.vd-layout-sidebar-collapsed .vd-slot-bottom-right {
+  inset-block-end: calc(${a[3]} + ${a[9]} + ${a[1.5]});
+}
+
+/* Price + CTA — sit under the attribute controls, separated by a hairline */
+.vd-commerce {
+  display: flex;
+  flex-direction: column;
+  gap: ${a[2]};
+  padding-block-start: ${a[3]};
+  border-block-start: 1px solid color-mix(in oklch, ${m.neutral[900]} 8%, transparent);
+  font-family: ${H};
+}
+
+.vd-commerce-price {
+  display: flex;
+  align-items: baseline;
+  gap: ${a[1.5]};
+}
+
+.vd-price {
+  font-size: ${w.fontSize.lg};
+  font-weight: ${w.fontWeight.semibold};
+  color: ${m.neutral[900]};
+}
+
+.vd-vat {
+  font-size: ${w.fontSize.xs};
+  color: ${m.neutral[500]};
+}
+
+.vd-cta {
+  inline-size: 100%;
+  justify-content: center;
+}
+
+/* Failed submit is the one place red belongs: a clear, recoverable error state. */
+.vd-commerce[data-submit="failed"] .vd-cta {
+  background: ${m.semantic.error};
+  border-color: ${m.semantic.error};
+  color: ${m.white};
+}
+
+`;
+function Fi() {
+  if (Ct(), document.getElementById("vd-styles") !== null)
+    return;
+  const n = document.createElement("style");
+  n.id = "vd-styles", n.textContent = Pi, document.head.appendChild(n);
+}
+function $i(n, t) {
+  const e = document.createElement("a");
+  e.href = `data:image/png;base64,${n}`, e.download = t, e.click();
+}
+class Di {
+  options;
+  settings = {};
+  container = null;
+  loading = null;
+  slots = { topRight: null, bottomRight: null };
+  screenshotBtn = null;
+  actionBar = null;
+  cameraControls = null;
+  attributes = null;
+  layout = null;
+  commerce = null;
+  constructor(t) {
+    this.options = t;
+  }
+  attach(t) {
+    Fi(), this.container = t, this.loading = new wi(t), this.slots.topRight = this.createSlot(t, "vd-slot-top-right"), this.slots.bottomRight = this.createSlot(t, "vd-slot-bottom-right");
+  }
+  onReady() {
+    this.loading?.hide(), this.loading = null, this.mountToolbar(), this.cameraControls !== null && (this.cameraControls.element.style.display = "flex"), this.layout?.setVisible(!0);
+  }
+  mountToolbar() {
+    if (this.actionBar !== null || this.slots.bottomRight === null || this.container === null)
+      return;
+    const t = typeof this.container.requestFullscreen == "function";
+    this.actionBar = new _i({
+      onAr: this.options.onAr,
+      onFullscreen: t ? () => {
+        this.toggleFullscreen();
+      } : void 0
+    }), this.actionBar.applySettings(this.settings), this.slots.bottomRight.appendChild(this.actionBar.element), this.syncScreenshotButton(), this.placeScreenshotButton();
+  }
+  toggleFullscreen() {
+    this.container !== null && (document.fullscreenElement !== null ? document.exitFullscreen() : (this.options.onFullscreenEnter?.(), this.container.requestFullscreen()));
+  }
+  updateProgress(t, e) {
+    this.loading?.updateProgress(t, e);
+  }
+  showError(t) {
+    this.loading?.showError(t);
+  }
+  applyViewerSettings(t) {
+    this.settings = t, t.language !== void 0 && ft(t.language, { reload: !1 }), this.syncScreenshotButton(), this.actionBar?.applySettings(t), this.cameraControls !== null && (this.cameraControls.element.style.display = t.cameraControls === !0 ? "flex" : "none"), this.placeScreenshotButton();
+  }
+  renderAttributeControls(t, e) {
+    if (!(this.container === null || this.slots.topRight === null) && (this.cameraControls?.element.remove(), this.cameraControls = null, this.teardownConfigurator(), this.settings.cameraControls === !0 && (this.cameraControls = new L(this.options.cameraApi, this.options.cameraPositionApi), this.cameraControls.element.style.display = "none", this.slots.topRight.appendChild(this.cameraControls.element)), this.placeScreenshotButton(), e.length !== 0)) {
+      this.attributes = document.createElement("div"), this.attributes.className = "vd-attributes";
+      for (const i of e)
+        this.attributes.appendChild(Ei(
+          i,
+          t,
+          this.options.eventBus,
+          this.options.onSelect,
+          this.options.onSubscribe
+        ));
+      this.commerce = new Ri(this.options.configuration), this.attributes.appendChild(this.commerce.element), this.layout = zi(this.settings.configuratorLayout), this.layout.attach(this.container, this.attributes);
+    }
+  }
+  get viewerSettings() {
+    return this.settings;
+  }
+  /** Tear down the configurator panel: price + CTA, attribute controls, layout. */
+  teardownConfigurator() {
+    this.commerce?.destroy(), this.commerce = null, this.attributes?.remove(), this.attributes = null, this.layout?.destroy(), this.layout = null;
+  }
+  destroy() {
+    this.loading?.destroy(), this.screenshotBtn?.element.remove(), this.actionBar?.destroy(), this.actionBar?.element.remove(), this.cameraControls?.element.remove(), this.teardownConfigurator();
+    for (const t of Object.values(this.slots))
+      t?.remove();
+    this.container = null;
+  }
+  createSlot(t, e) {
+    const i = document.createElement("div");
+    return i.className = e, t.appendChild(i), i;
+  }
+  syncScreenshotButton() {
+    const t = this.settings.screenshot === !0;
+    t && this.screenshotBtn === null && (this.screenshotBtn = new b({
+      variant: "outline",
+      size: "icon",
+      label: Xe(),
+      icon: g.screenshot(),
+      onClick: () => {
+        this.options.snapshotApi.take("snapshot.png").onDeveloped(({ data: e, filename: i }) => {
+          $i(e, i);
+        });
+      }
+    })), !t && this.screenshotBtn !== null && (this.screenshotBtn.element.remove(), this.screenshotBtn = null);
+  }
+  placeScreenshotButton() {
+    this.screenshotBtn === null || this.slots.topRight === null || (this.cameraControls !== null ? this.cameraControls.element.appendChild(this.screenshotBtn.element) : this.slots.topRight.appendChild(this.screenshotBtn.element));
+  }
+}
+const Bi = {};
+class Ui {
+  defaultServer = "https://server.virtualdisplay.io";
+  options;
+  serverHost;
+  constructor(t, e) {
+    this.options = t, this.serverHost = e;
+  }
+  /**
+   * Create container and iframe, attach to parent element
+   */
+  create() {
+    const t = this.createContainer(), e = this.createIframe();
+    return t.appendChild(e), this.attachToParent(t), { container: t, iframe: e };
+  }
+  createContainer() {
+    const t = document.createElement("div");
+    return t.className = "vd-container", Object.assign(t.style, {
+      position: "relative",
+      width: "100%",
+      height: "100%",
+      overflow: "hidden"
+    }), t;
+  }
+  createIframe() {
+    const t = document.createElement("iframe");
+    return t.src = this.buildUrl(), Object.assign(t.style, {
+      width: "100%",
+      height: "100%",
+      border: "none",
+      display: "block"
+    }), t.setAttribute("allow", "xr-spatial-tracking; fullscreen"), t;
+  }
+  attachToParent(t) {
+    this.getParentElement().appendChild(t);
+  }
+  buildUrl() {
+    const t = this.getServerUrl(), e = new URL(t);
+    return e.searchParams.set("license", this.options.license), e.searchParams.set("model", this.options.model), this.options.language !== void 0 && e.searchParams.set("language", this.options.language), this.options.session !== void 0 && e.searchParams.set("session", this.options.session), this.options.debug === !0 && e.searchParams.set("debug", "true"), this.options.traceparent !== void 0 && e.searchParams.set("traceparent", this.options.traceparent), e.toString();
+  }
+  getServerUrl() {
+    if (this.serverHost !== void 0)
+      return this.serverHost;
+    if (Bi?.VITE_VIRTUALDISPLAY_SERVER_HOST === void 0)
+      return this.defaultServer;
+  }
+  getParentElement() {
+    if (typeof this.options.parent != "string")
+      return this.options.parent;
+    const t = document.querySelector(this.options.parent);
+    if (t === null)
+      throw f.parentNotFound(this.options.parent);
+    return t;
+  }
+}
+function Vi(n) {
+  const { messenger: t } = n;
+  t.on(c.HANDSHAKE, (e) => {
+    Tt(e) && (_.info("Server handshake received, flushing publisher queue"), t.markReady());
+  }), t.on(c.SESSION, (e) => {
+    Rt(e) && n.onSession(e.sessionId);
+  }), t.on(c.MUTATION, (e) => {
+    It(e) && (n.attributes.handleMutationResult(e), n.configuration.handleSelectionChanged(n.attributes.getSelection()));
+  }), t.on(c.SNAPSHOT, (e) => {
+    Ot(e) && n.snapshot.handleSnapshotResult(e);
+  }), t.on(c.CAMERA, (e) => {
+    Nt(e) && n.cameraPosition.handlePositionUpdate(e);
+  }), t.on(c.LOADING_INDICATOR, (e) => {
+    Mt(e) && (e.error !== void 0 ? n.ui.showError(e.error) : n.ui.updateProgress(e.progress, e.phase));
+  }), t.on(c.CONFIG, (e) => {
+    Pt(e) && n.applyConfig(e);
+  }), t.on(c.MAPPING, (e) => {
+    Lt(e) && (n.attributes.handleMappingReceived(e), n.configuration.handleSelectionChanged(n.attributes.getSelection()), n.ui.renderAttributeControls(n.attributes, e.attributes), n.readyStateTracker.handleMappingReceived());
+  }), ji(n);
+}
+function ji(n) {
+  const { messenger: t } = n;
+  t.on(c.FOCUS, (e) => {
+    Ft(e) && n.focus.handleStateReceived(e);
+  }), t.on(c.PRICING, (e) => {
+    $t(e) && n.configuration.handlePricingReceived(e.pricing);
+  }), t.on(c.SYNC, (e) => {
+    zt(e) && n.onSync(e.connected);
+  });
+}
+class Hi {
+  ready = !1;
+  onReady;
+  constructor(t) {
+    this.onReady = t;
+  }
+  handleMappingReceived() {
+    this.ready || (this.ready = !0, _.info("Mapping received from server, client is now ready"), this.onReady?.());
+  }
+  get isReady() {
+    return this.ready;
+  }
+  clear() {
+    this.ready = !1;
+  }
+}
+class qi {
+  attributes;
+  readyStateTracker;
+  messenger;
+  cameraApi;
+  cameraPositionApi;
+  focusApi;
+  configurationApi;
+  snapshotApi;
+  annotationsApi;
+  eventBus;
+  ui;
+  options;
+  serverHost;
+  /** The composed AR flow, or undefined in builds without one (the studio). */
+  arActivation;
+  /** The composed sync tracker, or undefined in builds without one (the studio). */
+  syncTracker;
+  iframe;
+  container;
+  readyCallbacks = [];
+  mutationFailedCallbacks = [];
+  /** The viewer's tracking session id, once the server announces it (SESSION). */
+  viewerSessionId;
+  constructor(t, e) {
+    this.options = t, this.serverHost = e?.serverHost, this.initializeLogging(), this.messenger = new Dt(
+      () => this.iframe?.contentWindow ?? null,
+      e?.messengerOptions
+    );
+    const i = (s) => {
+      this.messenger.send(s);
+    };
+    this.attributes = new ne(i, (s, r) => {
+      this.notifyMutationFailed(s, r);
+    }), this.snapshotApi = new ue(i), this.annotationsApi = new Bt(i), this.cameraApi = new ie(i), this.cameraPositionApi = new oe(), this.focusApi = new le(i, (s) => {
+      this.dispatchFocusChange(s);
+    }), this.configurationApi = new ae(
+      (s) => {
+        this.dispatchConfigurationChange(s);
+      },
+      (s) => {
+        this.dispatchConfigurationSubmit(s);
+      }
+    ), this.eventBus = new de(), this.arActivation = e?.createArActivation?.(i), this.syncTracker = e?.createSyncTracker?.(), this.readyStateTracker = new Hi(() => {
+      this.notifyReady();
+    });
+    const o = this.arActivation;
+    this.ui = new Di({
+      snapshotApi: this.snapshotApi,
+      cameraApi: this.cameraApi,
+      cameraPositionApi: this.cameraPositionApi,
+      eventBus: this.eventBus,
+      configuration: this.configurationApi,
+      onSelect: (s, r) => this.attributes.select(s, r),
+      onSubscribe: (s, r) => this.attributes.onChange(s, r),
+      ...o !== void 0 && { onAr: () => {
+        o.activate();
+      } },
+      onFullscreenEnter: () => {
+        this.trackFullscreen();
+      }
+    }), this.wireIncomingMessages(), e?.registerHandlers?.(this.messenger, i), this.messenger.start(), this.createAndConnectIframe();
+  }
+  /** Wire the inbound viewer protocol to the facades. */
+  wireIncomingMessages() {
+    Vi({
+      messenger: this.messenger,
+      attributes: this.attributes,
+      configuration: this.configurationApi,
+      snapshot: this.snapshotApi,
+      cameraPosition: this.cameraPositionApi,
+      focus: this.focusApi,
+      ui: this.ui,
+      readyStateTracker: this.readyStateTracker,
+      applyConfig: (t) => {
+        this.handleConfig(t);
+      },
+      onSession: (t) => {
+        this.handleSession(t);
+      },
+      onSync: (t) => {
+        this.syncTracker?.handleSync(t);
+      }
+    });
+  }
+  /** Store the tracking session id and hand it to the AR flow, which waits on it for the QR. */
+  handleSession(t) {
+    this.viewerSessionId = t, this.arActivation?.onSession(t);
+  }
+  /** Forward a failed mutation to every registered `onMutationFailed` callback. */
+  notifyMutationFailed(t, e) {
+    for (const i of this.mutationFailedCallbacks)
+      i({ attribute: t, value: e });
+  }
+  /** Flush the queued `onReady` callbacks once, then let the standard interface know. */
+  notifyReady() {
+    const t = this.readyCallbacks;
+    this.readyCallbacks = [];
+    for (const e of t)
+      e(this);
+    this.ui.onReady();
+  }
+  /**
+   * Dispatch a bubbling `vd:focus-change` event on the container so a page can
+   * react to focus without registering an `onChange` callback.
+   */
+  dispatchFocusChange(t) {
+    this.container?.dispatchEvent(
+      new CustomEvent(I.FOCUS_CHANGE, { detail: t, bubbles: !0 })
+    );
+  }
+  /**
+   * Dispatch a bubbling `vd:configuration-change` event on the container so a
+   * page or tag manager can react to price changes without a client callback.
+   */
+  dispatchConfigurationChange(t) {
+    this.container?.dispatchEvent(
+      new CustomEvent(I.CONFIGURATION_CHANGE, { detail: t ?? null, bubbles: !0 })
+    );
+  }
+  /** Dispatch a bubbling `vd:configuration-submit` event when the CTA is used. */
+  dispatchConfigurationSubmit(t) {
+    this.container?.dispatchEvent(
+      new CustomEvent(I.CONFIGURATION_SUBMIT, { detail: t, bubbles: !0 })
+    );
+  }
+  handleConfig(t) {
+    const e = t.viewerSettings, i = this.options.viewerSettings;
+    if (e !== void 0 || i !== void 0) {
+      const o = i !== void 0 ? { ...e ?? {}, ...i } : e;
+      if (i !== void 0 && e !== void 0) {
+        const s = Object.entries(i).filter(([r, l]) => e[r] !== l).map(([r, l]) => `${r} (metadata: ${e[r] ?? "undefined"}, override: ${l})`);
+        s.length > 0 && _.warn(`Viewer settings override active: ${s.join(", ")}`);
+      }
+      this.ui.applyViewerSettings(o), this.annotationsApi.setEnabled(o.annotations !== !1);
+    }
+    this.cameraPositionApi.applyLimits(t.cameraLimits);
+  }
+  /** Tell the viewer the user entered fullscreen, so it records the engagement. */
+  trackFullscreen() {
+    this.messenger.send({ type: c.FULLSCREEN });
+  }
+  initializeLogging() {
+    this.options.debug === !0 && ee(), _.info("Initializing Virtualdisplay client", { model: this.options.model });
+  }
+  createAndConnectIframe() {
+    const e = new Ui(this.options, this.serverHost).create();
+    this.container = e.container, this.iframe = e.iframe, this.eventBus.attach(this.container), this.ui.attach(this.container);
+    try {
+      const i = new URL(this.iframe.src).origin;
+      this.messenger.setTargetOrigin(i);
+    } catch {
+    }
+  }
+  select(t, e) {
+    this.attributes.select(t, e);
+  }
+  getValues(t) {
+    return this.attributes.getValues(t);
+  }
+  getValue(t, e) {
+    return this.attributes.getValue(t, e);
+  }
+  onChange(t, e) {
+    this.attributes.onChange(t, e);
+  }
+  getAttribute(t) {
+    return this.attributes.getAttribute(t);
+  }
+  get isReady() {
+    return this.readyStateTracker.isReady;
+  }
+  onReady(t) {
+    if (this.readyStateTracker.isReady) {
+      t(this);
+      return;
+    }
+    this.readyCallbacks.push(t);
+  }
+  onMutationFailed(t) {
+    this.mutationFailedCallbacks.push(t);
+  }
+  /**
+   * Trigger the composed AR flow directly (ar-session-handoff task 035): a host
+   * page that hides the built-in corner button (`viewerSettings.ar = false`,
+   * e.g. the AR landing, which owns a single custom AR affordance) still needs
+   * an entry point to the same flow that button would have called. A no-op
+   * where no AR flow is composed (the studio client has none).
+   */
+  activateAr() {
+    this.arActivation?.activate();
+  }
+  on(t, e) {
+    this.eventBus.on(t, e);
+  }
+  get annotations() {
+    return this.annotationsApi;
+  }
+  get camera() {
+    return this.cameraApi;
+  }
+  get focus() {
+    return this.focusApi;
+  }
+  get configuration() {
+    return this.configurationApi;
+  }
+  get cameraPosition() {
+    return this.cameraPositionApi;
+  }
+  get snapshot() {
+    return this.snapshotApi;
+  }
+  /** The viewer's tracking session id, for a host page to correlate its own actions. */
+  get sessionId() {
+    return this.viewerSessionId;
+  }
+  get viewerSettings() {
+    return this.ui.viewerSettings;
+  }
+  destroy() {
+    this.readyStateTracker.clear(), this.readyCallbacks = [], this.mutationFailedCallbacks.length = 0, this.snapshotApi.clear(), this.messenger.destroy(), this.arActivation?.destroy(), this.ui.destroy(), this.container?.parentElement !== null && this.container?.parentElement !== void 0 && this.container.parentElement.removeChild(this.container), this.container = void 0, this.iframe = void 0;
+  }
+}
+const Gi = "ar.virtualdisplay.io";
+function Zi(n) {
+  const t = new URL(`https://${Gi}/go`);
+  return n.sessionId !== void 0 ? t.searchParams.set("session", n.sessionId) : (t.searchParams.set("license", n.license), t.searchParams.set("model", n.model)), t.toString();
+}
+const Wi = 1500;
+class Qi {
+  options;
+  qrModal = new pi();
+  /** The viewer's tracking session id, once the engine announces it (SESSION). */
+  sessionId;
+  /** Callbacks waiting on the SESSION message, resolved (or timed out) exactly once each. */
+  waiters = [];
+  /** Session-wait timers still pending, cleared on destroy so no wait outlives the client. */
+  pendingTimers = /* @__PURE__ */ new Set();
+  /** Set on destroy: an in-flight hand-off must not re-mount the modal or send QR_SHOWN. */
+  destroyed = !1;
+  constructor(t) {
+    this.options = t;
+  }
+  /** Store the engine-announced tracking session id and resolve anyone waiting on it. */
+  onSession(t) {
+    this.sessionId = t;
+    const e = this.waiters;
+    this.waiters = [];
+    for (const i of e)
+      i(t);
+  }
+  /** The AR button handler: mobile activates AR in the engine, desktop shows the hand-off QR. */
+  activate() {
+    if (Jt()) {
+      this.options.send({ type: c.AR_ACTIVATE });
+      return;
+    }
+    this.showQrCode();
+  }
+  destroy() {
+    this.destroyed = !0;
+    for (const t of this.pendingTimers)
+      clearTimeout(t);
+    this.pendingTimers.clear(), this.waiters = [], this.qrModal.hide();
+  }
+  /**
+   * Desktop hand-off: open the modal at once in its loading state (the click
+   * must respond immediately, even when the session id is still resolving),
+   * then swap the AR landing QR in as soon as the URL is known. Guarded after
+   * each await: a client torn down during the session wait must not update
+   * the modal or send a stray QR_SHOWN through a dead messenger.
+   */
+  async showQrCode() {
+    this.qrModal.show();
+    const t = await this.waitForSessionId();
+    if (this.destroyed)
+      return;
+    const e = Zi({
+      sessionId: t,
+      license: this.options.license,
+      model: this.options.model
+    }), i = await this.qrModal.update(e);
+    if (this.destroyed) {
+      this.qrModal.hide();
+      return;
+    }
+    i && this.options.send({ type: c.QR_SHOWN });
+  }
+  /**
+   * Resolve once the SESSION message arrives, or `undefined` after
+   * {@link SESSION_WAIT_TIMEOUT_MS} if it never does (e.g. tracking blocked by
+   * an ad blocker). The QR then falls back to a working sessionless landing URL
+   * rather than encoding a wrong one.
+   */
+  waitForSessionId() {
+    return this.sessionId !== void 0 ? Promise.resolve(this.sessionId) : new Promise((t) => {
+      const e = setTimeout(() => {
+        this.pendingTimers.delete(e), t(void 0);
+      }, Wi);
+      this.pendingTimers.add(e), this.waiters.push((i) => {
+        this.pendingTimers.delete(e), clearTimeout(e), t(i);
+      });
+    });
+  }
+}
+class Yi {
+  callbacks = [];
+  lastKnown;
+  handleSync(t) {
+    this.lastKnown = t;
+    for (const e of this.callbacks)
+      e(t);
+  }
+  onChange(t) {
+    this.callbacks.push(t), this.lastKnown !== void 0 && t(this.lastKnown);
+  }
+}
+class Ji extends qi {
+  syncStatusTracker;
+  constructor(t) {
+    const e = new Yi();
+    super(t, {
+      createArActivation: (i) => new Qi({
+        license: t.license,
+        model: t.model,
+        send: i
+      }),
+      createSyncTracker: () => e
+    }), this.syncStatusTracker = e;
+  }
+  /** Subscribe to the live sync channel's connection state (ar-session-handoff). Latest-wins, no buffering. */
+  onSyncChange(t) {
+    this.syncStatusTracker.onChange(t);
+  }
+}
+export {
+  Bt as Annotations,
+  Vt as Attribute,
+  Ut as AttributeValue,
+  ie as Camera,
+  ae as Configuration,
+  A as ERROR_CODES,
+  le as Focus,
+  ce as Photo,
+  ue as Snapshot,
+  I as VD_EVENTS,
+  Ji as VirtualdisplayClient,
+  f as VirtualdisplayError,
+  ee as enableDebugMode,
+  Ki as isDebugMode,
+  _ as logger
 };
-//#endregion
-export { v as Attribute, _ as AttributeValue, M as Camera, e as ERROR_CODES, P as Photo, F as Snapshot, L as VirtualdisplayClient, t as VirtualdisplayError, I as VirtualdisplayViewerService, m as enableDebugMode, h as isDebugMode, p as logger };