@virtualdisplay.io/client 4.0.0-alpha.3 → 4.0.0-alpha.30

package/dist/virtualdisplay.client.es.js

@@ -1,798 +1,4117 @@
-//#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?.(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",
+  SELECTABLE: "selectable",
+  APP_RESOLVED: "app_resolved"
+}, L = "main", et = {
+  FOCUS: "focus",
+  UNFOCUS: "unfocus"
+}, It = {
+  FOCUSED: "focused"
+}, Ot = {
+  /** Price and submit button both shown (default). */
+  AVAILABLE: "available",
+  /** Price shown, submit hidden (sold out / coming soon). */
+  VIEW_ONLY: "view_only",
+  /** Behaves exactly like an unpriced combination: no price, no button. */
+  HIDDEN: "hidden"
+}, Lt = new Set(Object.values(c));
+function Mt(n) {
+  if (typeof n != "object" || n === null)
+    return !1;
+  const t = n;
+  return typeof t.target == "string" ? !1 : typeof t.type == "string" && Lt.has(t.type);
+}
+function Nt(n) {
+  const t = S(n);
+  return t !== null && t.type === c.HANDSHAKE;
+}
+function zt(n) {
+  const t = S(n);
+  return t !== null && t.type === c.SESSION && typeof t.sessionId == "string";
+}
+function Pt(n) {
+  const t = S(n);
+  return t !== null && t.type === c.APP_RESOLVED && typeof t.appType == "string" && t.appType !== "" && typeof t.name == "string";
+}
+function Ft(n) {
+  const t = S(n);
+  return t !== null && t.type === c.MUTATION && typeof t.instance == "string" && t.instance !== "" && Array.isArray(t.results);
+}
+function $t(n) {
+  const t = S(n);
+  return t !== null && t.type === c.SNAPSHOT && ("data" in t || "error" in t);
+}
+function Dt(n) {
+  const t = S(n);
+  return t !== null && t.type === c.CAMERA && Array.isArray(t.transforms);
+}
+function Bt(n) {
+  const t = S(n);
+  return t !== null && t.type === c.MAPPING && typeof t.instance == "string" && t.instance !== "" && Array.isArray(t.attributes);
+}
+function Ut(n) {
+  const t = S(n);
+  return t !== null && t.type === c.LOADING_INDICATOR && typeof t.progress == "number";
+}
+function Vt(n) {
+  const t = S(n);
+  return t !== null && t.type === c.SYNC && typeof t.connected == "boolean";
+}
+function Ht(n) {
+  const t = S(n);
+  return t !== null && t.type === c.SELECTABLE && typeof t.instance == "string" && t.instance !== "" && Array.isArray(t.attributes);
+}
+function jt(n) {
+  const t = S(n);
+  return t !== null && t.type === c.CONFIG && typeof t.viewerSettings == "object";
+}
+function qt(n) {
+  const t = S(n);
+  return t !== null && t.type === c.FOCUS && typeof t.instance == "string" && t.instance !== "" && typeof t.state == "string";
+}
+function Gt(n) {
+  const t = S(n);
+  return t !== null && t.type === c.PRICING && typeof t.instance == "string" && t.instance !== "" && typeof t.pricing == "object" && t.pricing !== null;
+}
+function S(n) {
+  return typeof n != "object" || n === null ? null : n;
+}
+class nt {
+  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 Zt {
+  constructor(t, e) {
+    this.getTarget = t, this.sourceId = `vd-${Math.random().toString(36).slice(2, 8)}`, this.targetOrigin = "*", this.isValid = e?.isValid ?? Mt, this.onHandlerError = e?.onHandlerError ?? Wt, this.publisher = new nt((i) => this.post(i)), this.consumer = new nt((i) => this.routeToHandler(i)), e?.bufferIncoming !== !0 && this.consumer.markReady();
+  }
+  getTarget;
+  handlers = /* @__PURE__ */ new Map();
+  publisher;
+  consumer;
+  listener = null;
+  sourceId;
+  targetOrigin;
+  isValid;
+  onHandlerError;
+  /**
+   * Register a handler for a specific message type
+   */
+  on(t, e) {
+    this.handlers.set(t, e);
+  }
+  /**
+   * 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);
+  }
+  // For a transport that delivers messages some way other than the iframe
+  // channel this messenger listens on, such as the viewer's live sync channel,
+  // and needs them to land exactly where a postMessage would.
+  /**
+   * Route a message as if it had arrived by postMessage, without the round trip.
+   * Still validated against `isValid` and still subject to the consumer queue.
+   */
+  receive(t) {
+    this.isValid(t) && 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;
+      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();
+  }
+  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) => {
+      this.onHandlerError(t, o);
+    });
+  }
+}
+function Wt(n, t) {
+  const e = t instanceof Error ? t.message : String(t);
+  console.error(`Virtualdisplay: error handling ${n.type}: ${e}`);
+}
+class Qt {
+  /** @internal */
+  constructor(t, e) {
+    this.send = t, this.instance = e;
+  }
+  send;
+  instance;
+  setEnabled(t) {
+    this.send({
+      type: c.ANNOTATION_TOGGLE,
+      instance: this.instance,
+      enabled: t
+    });
+  }
+}
+class Yt {
+  /** @internal */
+  constructor(t, e) {
+    this.value = t, this.attribute = e;
+  }
+  value;
+  attribute;
+  isSelectedValue = !1;
+  get isSelected() {
+    return this.isSelectedValue;
+  }
+  /** @internal */
+  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 y extends Error {
+  code;
+  constructor(t, e) {
+    super(t), this.name = "VirtualdisplayError", this.code = e;
+  }
+  static valueNotFound(t, e) {
+    return new y(
+      `Value "${e}" not found for attribute "${t}"`,
+      A.VALUE_NOT_FOUND
+    );
+  }
+  static parentNotFound(t) {
+    return new y(
+      `Parent element not found: ${t}`,
+      A.PARENT_NOT_FOUND
+    );
+  }
+  static invalidParameter(t) {
+    return new y(t, A.INVALID_PARAMETER);
+  }
+}
+class Kt {
+  name;
+  defaultValue;
+  values;
+  onSelect;
+  onChangeCallback;
+  /** @internal */
+  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 y.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
+   * @internal
+   */
+  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 Yt(i, this.name);
+      i === this.defaultValue && o.setSelected(!0), e.set(i, o);
+    }
+    return e;
+  }
+}
+class Xt {
+  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 Kt(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;
+  }
+  /** @internal */
+  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;
+  }
+}
+const N = 4096, $ = 16384, Jt = [1024, 256, 64], te = 20, Q = ["timestamp", "level", "msg", "service", "trace_id", "span_id"];
+function ee(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 = Object.entries(n).filter(([r]) => !Q.includes(r)).map(([r, a]) => `${r}=${O(a, N).line}`).join(" ");
+  return `${t} ${e} [${i}] ${o}${s ? " " + s : ""}`;
+}
+function ne(n) {
+  for (const o of [N, ...Jt]) {
+    const { line: s, truncated: r } = O(n, o);
+    if (!r) {
+      if (s.length <= $)
+        return s;
+      continue;
+    }
+    const { line: a } = O({ ...n, log_truncated: !0 }, o);
+    if (a.length <= $)
+      return a;
+  }
+  const t = Object.keys(n).filter((o) => !Q.includes(o)), e = { ...oe(n, Q), log_truncated: !0, log_dropped_count: t.length }, i = O({ ...e, log_dropped_attrs: t.slice(0, te) }, N);
+  return i.line.length <= $ ? i.line : O(e, N).line;
+}
+function O(n, t) {
+  const e = [];
+  let i = !1;
+  return { line: JSON.stringify(n, function(r, a) {
+    if (typeof a == "string")
+      return a.length > t && (i = !0), ie(a, t);
+    if (typeof a == "bigint")
+      return a.toString();
+    if (typeof a != "object" || a === null)
+      return a;
+    for (; e.length > 0 && e.at(-1) !== this; )
+      e.pop();
+    return e.includes(a) ? "[Circular]" : (e.push(a), a);
+  }), truncated: i };
+}
+function ie(n, t) {
+  return n.length <= t ? n : `${n.slice(0, t)}...[truncated ${n.length - t} chars]`;
+}
+function oe(n, t) {
+  const e = {};
+  for (const i of t)
+    n[i] !== void 0 && (e[i] = n[i]);
+  return e;
+}
+function se(n, t) {
+  const e = t ? ee(n) : ne(n);
+  n.level === "error" ? console.error(e) : n.level === "warn" ? console.warn(e) : console.log(e);
+}
+function ft(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 ? ft(n.cause, t + 1) : String(n.cause)), e;
+}
+function re(n) {
+  const t = {};
+  for (const [e, i] of Object.entries(n))
+    t[e] = i instanceof Error ? ft(i) : i;
+  return t;
+}
+function ae() {
+  return /* @__PURE__ */ new Date();
+}
+function le(n) {
+  return n.toISOString();
+}
+function gt() {
+  return typeof navigator > "u" ? "" : navigator.userAgent;
+}
+function ce() {
+  return typeof navigator > "u" ? !1 : navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;
+}
+function de() {
+  return /iPhone|iPad|iPod/i.test(gt()) || ce();
+}
+function ue() {
+  return /Android/i.test(gt());
+}
+function he() {
+  return de() || ue();
+}
+class pe {
+  constructor(t) {
+    this.config = t;
+  }
+  config;
+  /**
+   * Log at specified level with optional attributes.
+   */
+  log(t, e, i = {}) {
+    const o = this.config.traceProvider?.() ?? {}, s = {
+      timestamp: le(ae()),
+      level: t,
+      msg: e,
+      service: this.config.service,
+      ...o,
+      ...re(i)
+    };
+    se(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 bt(n, t) {
+  const e = t?.isDev !== void 0 ? t.isDev : typeof process < "u" ? process.env.NODE_ENV !== "production" : !0;
+  return new pe({ service: n, isDev: e, traceProvider: t?.traceProvider });
+}
+function M(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 vt(n) {
+  return {
+    debug: (t, e) => n.debug(t, M(e)),
+    info: (t, e) => n.info(t, M(e)),
+    warn: (t, e) => n.warn(t, M(e)),
+    error: (t, e) => n.error(t, M(e))
+  };
+}
+let yt = !1, w = vt(bt("client", { isDev: !1 }));
+function me() {
+  yt = !0, w = vt(bt("client", { isDev: !0 }));
+}
+function Ao() {
+  return yt;
+}
+class fe {
+  /** @internal */
+  constructor(t, e, i) {
+    this.send = t, this.instance = e, this.onMutationFailed = i;
+  }
+  send;
+  instance;
+  onMutationFailed;
+  registry;
+  pendingCallbacks = [];
+  /**
+   * Handle incoming MAPPING message from server
+   * @internal
+   */
+  handleMappingReceived(t) {
+    w.debug("Initializing from server mapping", {
+      attributeCount: t.attributes.length
+    }), this.registry = new Xt(
+      t.attributes,
+      (e, i) => this.sendMutation(e, i),
+      this.onMutationFailed
+    ), this.replayPendingCallbacks();
+  }
+  /** @internal */
+  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);
+  }
+  /**
+   * A drag's intermediate step (parametric dimensions): the viewer applies it
+   * so the model follows the hand, but it is never recorded as a choice; the
+   * settling `select()` is the one tracked value. Used by the measurement
+   * slider per step crossed. Deliberately not delegated on the public client:
+   * `select()` staying the whole choice API is the spec's own evidence the
+   * shape is right, and no integrator has asked for live-follow yet.
+   */
+  selectTransient(t, e) {
+    this.sendMutation([{ name: t, value: e }], !1, !0);
+  }
+  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) {
+      w.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() ?? {};
+  }
+  sendMutation(t, e, i = !1) {
+    const o = {
+      type: c.MUTATION,
+      instance: this.instance,
+      mutations: t,
+      isInitial: e,
+      ...i && { transient: !0 }
+    };
+    this.send(o);
+  }
+  replayPendingCallbacks() {
+    for (const { name: t, callback: e } of this.pendingCallbacks) {
+      const i = this.registry?.get(t);
+      i === void 0 && w.warn(`onChange: attribute "${t}" not found — buffered callback will not fire`), i?.onChange(e);
+    }
+    this.pendingCallbacks.length = 0;
+  }
+}
+class ge {
+  snapshot;
+  callbacks = [];
+  /** @internal */
+  handleSnapshot(t) {
+    this.snapshot = t.attributes;
+    for (const e of this.callbacks)
+      e(t.attributes);
+  }
+  onChange(t) {
+    this.callbacks.push(t), this.snapshot !== void 0 && t(this.snapshot);
+  }
+  /** The selectable values for one attribute, or null when unrestricted. */
+  selectableFor(t) {
+    return this.snapshot?.find((i) => i.name === t)?.selectable ?? null;
+  }
+  /** The latest snapshot; empty before the viewer has reported anything. */
+  get current() {
+    return this.snapshot ?? [];
+  }
+}
+let be = class {
+  /** @internal */
+  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 y.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 y.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 ve {
+  state;
+  limitsState;
+  changeCallbacks = [];
+  /** @internal */
+  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 the viewer reports new
+   * movement limits, so controls can re-evaluate their disabled state without a
+   * second 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.
+   * @internal
+   */
+  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
+   * @internal
+   */
+  handlePositionUpdate(t) {
+    this.update(t.transforms);
+  }
+  /**
+   * Update camera position from server transforms
+   * @internal
+   */
+  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 ye(n, t) {
+  const e = n.filter((s) => we(s, t));
+  if (e.length === 0)
+    return;
+  const i = Math.max(...e.map(it)), o = e.filter((s) => it(s) === i);
+  return o.length === 1 ? o[0] : void 0;
+}
+function we(n, t) {
+  return Object.entries(n.attributes).every(([e, i]) => t[e] === i);
+}
+function it(n) {
+  return Object.keys(n.attributes).length;
+}
+class Se {
+  /** @internal */
+  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.
+   * @internal
+   */
+  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.
+   * @internal
+   */
+  handlePricingReceived(t) {
+    this.pricing = t, this.recompute();
+  }
+  /**
+   * Called by the client after every mutation result, with the full selection.
+   * @internal
+   */
+  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 = ye(this.pricing.rules, this.selection);
+    if (!(t === void 0 || t.availability === Ot.HIDDEN))
+      return {
+        attributes: { ...this.selection },
+        reference: t.reference,
+        price: t.priceCents,
+        currency: this.pricing.currency,
+        availability: t.availability
+      };
+  }
+}
+class _e {
+  /** @internal */
+  constructor(t, e, i) {
+    this.send = t, this.dispatch = e, this.instance = i;
+  }
+  send;
+  dispatch;
+  instance;
+  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 y.invalidParameter(
+        `set() requires a non-empty component name, got ${String(t)}`
+      );
+    this.send({
+      type: c.FOCUS,
+      instance: this.instance,
+      action: et.FOCUS,
+      component: t
+    });
+  }
+  /** Return to the overview — unfocus the current component. */
+  clear() {
+    this.send({ type: c.FOCUS, instance: this.instance, action: et.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.
+   * @internal
+   */
+  handleStateReceived(t) {
+    t.state === It.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 ke {
+  /** @internal */
+  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
+   * @internal
+   */
+  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
+   * @internal
+   */
+  fail(t) {
+    this.developed || this.failed || (this.failed = !0, this.errorCallbacks.forEach((e) => {
+      e(t);
+    }), this.developedCallbacks.clear(), this.errorCallbacks.clear());
+  }
+}
+const ot = 3e4;
+class Ce {
+  /** @internal */
+  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), w.debug("Taking snapshot", { filename: t });
+    const e = new ke(t), i = setTimeout(() => {
+      this.pendingPhotos.delete(t), w.warn("Snapshot timed out", { filename: t }), e.fail(new y(
+        `Snapshot timed out: the viewer did not respond within ${ot}ms`,
+        A.SNAPSHOT_FAILED
+      ));
+    }, ot);
+    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
+   * @internal
+   */
+  handleSnapshotResult(t) {
+    const e = this.pendingPhotos.get(t.filename);
+    if (e === void 0) {
+      w.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 y(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 y(
+      "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 y(
+        "Filename must be a non-empty string",
+        A.INVALID_PARAMETER
+      );
+    if (!this.validExtensions.some(
+      (i) => t.toLowerCase().endsWith(i)
+    ))
+      throw new y(
+        `Invalid filename: "${t}". Filename must end with one of: ${this.validExtensions.join(", ")}`,
+        A.INVALID_PARAMETER
+      );
+    if (t.includes("..") || t.includes("/") || t.includes("\\"))
+      throw new y(
+        'Filename cannot contain path separators or ".."',
+        A.INVALID_PARAMETER
+      );
+  }
+}
+class Ae {
+  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 Ee = {}, xe = "en", wt = (
+  /** @type {const} */
+  ["en", "nl", "de"]
+), X = [
+  "baseLocale"
+], st = [], Y = typeof window > "u";
+globalThis.__paraglide = /** @type {any} */
+globalThis.__paraglide ?? {};
+globalThis.__paraglide.ssr = /** @type {any} */
+globalThis.__paraglide.ssr ?? {};
+let rt = !1, p = () => {
+  let n = X;
+  !Y && typeof window < "u" && window.location?.href && (n = _t(window.location.href));
+  const t = Te(n);
+  if (t)
+    return rt || (rt = !0, St(t, { reload: !1 })), t;
+  throw new Error("No locale found. Read the docs https://paraglidejs.com/errors#no-locale-found");
+};
+function Te(n, t) {
+  let e;
+  for (const i of n) {
+    if (i === "baseLocale")
+      e = xe;
+    else if (kt(i) && z.has(i)) {
+      const s = z.get(i);
+      if (s) {
+        const r = s.getLocale();
+        if (r instanceof Promise)
+          continue;
+        if (r !== void 0)
+          return Oe(r);
+      }
+    }
+    const o = J(e);
+    if (o)
+      return o;
+  }
+}
+const Re = (n) => {
+  window.location.reload();
+};
+let St = (n, t) => {
+  const e = {
+    reload: !0,
+    ...t
+  };
+  let i;
+  try {
+    i = p();
+  } catch {
+  }
+  const o = [];
+  let s = X;
+  !Y && typeof window < "u" && window.location?.href && (s = _t(window.location.href));
+  for (const a of s)
+    if (a !== "baseLocale" && kt(a) && z.has(a)) {
+      const d = z.get(a);
+      if (d) {
+        let u = d.setLocale(n);
+        u instanceof Promise && (u = u.catch((f) => {
+          throw new Error(`Custom strategy "${a}" setLocale failed.`, {
+            cause: f
+          });
+        }), o.push(u));
+      }
+    }
+  const r = () => {
+    !Y && e.reload && window.location && n !== i && Re();
+  };
+  if (o.length)
+    return Promise.all(o).then(() => {
+      r();
+    });
+  r();
+}, Ie = () => typeof window < "u" ? window.location.origin : "http://fallback.com";
+function J(n) {
+  if (typeof n != "string")
+    return;
+  const t = n.toLowerCase();
+  for (const e of wt)
+    if (e.toLowerCase() === t)
+      return e;
+}
+function Oe(n) {
+  const t = J(n);
+  if (t)
+    return t;
+  throw new Error(`Invalid locale: ${n}. Expected one of: ${wt.join(", ")}`);
+}
+function Le(n, t) {
+  return n.exec(t.href);
+}
+function Me(n) {
+  return Ne(n);
+}
+function Ne(n) {
+  const t = typeof n == "string" ? new URL(n, Ie()) : new URL(n), e = t.pathname.split("/").filter(Boolean);
+  return e.length > 0 && J(e[0]) && (t.pathname = "/" + e.slice(1).join("/")), t;
+}
+let at, lt;
+function ze(n) {
+  if (st.length === 0)
+    return;
+  const t = typeof n == "string" ? n : n.href;
+  if (at === t)
+    return lt;
+  const e = new URL(t, "http://example.com"), i = Me(e), o = i.href === e.href ? [e] : [e, i];
+  let s;
+  for (const r of o) {
+    for (const a of st) {
+      const d = new Ee(a.match, r.href);
+      if (Le(d, r)) {
+        s = a;
+        break;
+      }
+    }
+    if (s)
+      break;
+  }
+  return at = t, lt = s, s;
+}
+function _t(n) {
+  const t = ze(n);
+  return t && t.exclude !== !0 && Array.isArray(t.strategy) ? t.strategy : X;
+}
+const z = /* @__PURE__ */ new Map();
+function kt(n) {
+  return typeof n == "string" && /^custom-[A-Za-z0-9_-]+$/.test(n);
+}
+const Pe = (
+  /** @type {(inputs: Commerce_Submit_BusyInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Working…"
+  )
+), Fe = (
+  /** @type {(inputs: Commerce_Submit_BusyInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Bezig…"
+  )
+), $e = (
+  /** @type {(inputs: Commerce_Submit_BusyInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Läuft…"
+  )
+), De = (
+  /** @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 ?? p();
+    return e === "nl" ? Fe() : e === "de" ? $e() : Pe();
+  })
+), Be = (
+  /** @type {(inputs: Commerce_Submit_FailedInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Failed"
+  )
+), Ue = (
+  /** @type {(inputs: Commerce_Submit_FailedInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Mislukt"
+  )
+), Ve = (
+  /** @type {(inputs: Commerce_Submit_FailedInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Fehlgeschlagen"
+  )
+), He = (
+  /** @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 ?? p();
+    return e === "nl" ? Ue() : e === "de" ? Ve() : Be();
+  })
+), je = (
+  /** @type {(inputs: Commerce_Submit_SuccessInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Done"
+  )
+), qe = (
+  /** @type {(inputs: Commerce_Submit_SuccessInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Gelukt"
+  )
+), Ge = (
+  /** @type {(inputs: Commerce_Submit_SuccessInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Fertig"
+  )
+), Ze = (
+  /** @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 ?? p();
+    return e === "nl" ? qe() : e === "de" ? Ge() : je();
+  })
+), We = (
+  /** @type {(inputs: Controls_Annotations_Buttonlabel1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Annotations"
+  )
+), Qe = (
+  /** @type {(inputs: Controls_Annotations_Buttonlabel1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Annotaties"
+  )
+), Ye = (
+  /** @type {(inputs: Controls_Annotations_Buttonlabel1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Anmerkungen"
+  )
+), Ke = (
+  /** @type {((inputs?: Controls_Annotations_Buttonlabel1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Annotations_Buttonlabel1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? p();
+    return e === "nl" ? Qe() : e === "de" ? Ye() : We();
+  })
+), Xe = (
+  /** @type {(inputs: Controls_Ar_Buttonlabel1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Activate AR"
+  )
+), Je = (
+  /** @type {(inputs: Controls_Ar_Buttonlabel1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "AR activeren"
+  )
+), tn = (
+  /** @type {(inputs: Controls_Ar_Buttonlabel1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "AR aktivieren"
+  )
+), en = (
+  /** @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 ?? p();
+    return e === "nl" ? Je() : e === "de" ? tn() : Xe();
+  })
+), nn = (
+  /** @type {(inputs: Controls_Camera_ResetInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Reset camera"
+  )
+), on = (
+  /** @type {(inputs: Controls_Camera_ResetInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Camera resetten"
+  )
+), sn = (
+  /** @type {(inputs: Controls_Camera_ResetInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Kamera zurücksetzen"
+  )
+), rn = (
+  /** @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 ?? p();
+    return e === "nl" ? on() : e === "de" ? sn() : nn();
+  })
+), an = (
+  /** @type {(inputs: Controls_Camera_Rotateleft1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Rotate left"
+  )
+), ln = (
+  /** @type {(inputs: Controls_Camera_Rotateleft1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Naar links draaien"
+  )
+), cn = (
+  /** @type {(inputs: Controls_Camera_Rotateleft1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Nach links drehen"
+  )
+), dn = (
+  /** @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 ?? p();
+    return e === "nl" ? ln() : e === "de" ? cn() : an();
+  })
+), un = (
+  /** @type {(inputs: Controls_Camera_Rotateright1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Rotate right"
+  )
+), hn = (
+  /** @type {(inputs: Controls_Camera_Rotateright1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Naar rechts draaien"
+  )
+), pn = (
+  /** @type {(inputs: Controls_Camera_Rotateright1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Nach rechts drehen"
+  )
+), mn = (
+  /** @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 ?? p();
+    return e === "nl" ? hn() : e === "de" ? pn() : un();
+  })
+), fn = (
+  /** @type {(inputs: Controls_Camera_Tiltdown1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Tilt down"
+  )
+), gn = (
+  /** @type {(inputs: Controls_Camera_Tiltdown1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Omlaag kantelen"
+  )
+), bn = (
+  /** @type {(inputs: Controls_Camera_Tiltdown1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Nach unten kippen"
+  )
+), vn = (
+  /** @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 ?? p();
+    return e === "nl" ? gn() : e === "de" ? bn() : fn();
+  })
+), yn = (
+  /** @type {(inputs: Controls_Camera_Tiltup1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Tilt up"
+  )
+), wn = (
+  /** @type {(inputs: Controls_Camera_Tiltup1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Omhoog kantelen"
+  )
+), Sn = (
+  /** @type {(inputs: Controls_Camera_Tiltup1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Nach oben kippen"
+  )
+), _n = (
+  /** @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 ?? p();
+    return e === "nl" ? wn() : e === "de" ? Sn() : yn();
+  })
+), kn = (
+  /** @type {(inputs: Controls_Camera_Zoomin1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Zoom in"
+  )
+), Cn = (
+  /** @type {(inputs: Controls_Camera_Zoomin1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Inzoomen"
+  )
+), An = (
+  /** @type {(inputs: Controls_Camera_Zoomin1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Hineinzoomen"
+  )
+), En = (
+  /** @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 ?? p();
+    return e === "nl" ? Cn() : e === "de" ? An() : kn();
+  })
+), xn = (
+  /** @type {(inputs: Controls_Camera_Zoomout1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Zoom out"
+  )
+), Tn = (
+  /** @type {(inputs: Controls_Camera_Zoomout1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Uitzoomen"
+  )
+), Rn = (
+  /** @type {(inputs: Controls_Camera_Zoomout1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Herauszoomen"
+  )
+), In = (
+  /** @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 ?? p();
+    return e === "nl" ? Tn() : e === "de" ? Rn() : xn();
+  })
+), On = (
+  /** @type {(inputs: Controls_Configurator_CloseInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Close"
+  )
+), Ln = (
+  /** @type {(inputs: Controls_Configurator_CloseInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Sluiten"
+  )
+), Mn = (
+  /** @type {(inputs: Controls_Configurator_CloseInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Schließen"
+  )
+), Nn = (
+  /** @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 ?? p();
+    return e === "nl" ? Ln() : e === "de" ? Mn() : On();
+  })
+), zn = (
+  /** @type {(inputs: Controls_Configurator_OpenInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Configure"
+  )
+), Pn = (
+  /** @type {(inputs: Controls_Configurator_OpenInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Configureren"
+  )
+), Fn = (
+  /** @type {(inputs: Controls_Configurator_OpenInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Konfigurieren"
+  )
+), $n = (
+  /** @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 ?? p();
+    return e === "nl" ? Pn() : e === "de" ? Fn() : zn();
+  })
+), Dn = (
+  /** @type {(inputs: Controls_Fullscreen_Buttonlabel1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Fullscreen"
+  )
+), Bn = (
+  /** @type {(inputs: Controls_Fullscreen_Buttonlabel1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Volledig scherm"
+  )
+), Un = (
+  /** @type {(inputs: Controls_Fullscreen_Buttonlabel1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Vollbild"
+  )
+), Vn = (
+  /** @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 ?? p();
+    return e === "nl" ? Bn() : e === "de" ? Un() : Dn();
+  })
+), Hn = (
+  /** @type {(inputs: Controls_Qr_Closebutton1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Close"
+  )
+), jn = (
+  /** @type {(inputs: Controls_Qr_Closebutton1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Sluiten"
+  )
+), qn = (
+  /** @type {(inputs: Controls_Qr_Closebutton1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Schließen"
+  )
+), Gn = (
+  /** @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 ?? p();
+    return e === "nl" ? jn() : e === "de" ? qn() : Hn();
+  })
+), Zn = (
+  /** @type {(inputs: Controls_Qr_Modaldescription1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Use your smartphone camera to scan this QR code"
+  )
+), Wn = (
+  /** @type {(inputs: Controls_Qr_Modaldescription1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Gebruik de camera van je smartphone om deze QR-code te scannen"
+  )
+), Qn = (
+  /** @type {(inputs: Controls_Qr_Modaldescription1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Verwende die Kamera deines Smartphones, um diesen QR-Code zu scannen"
+  )
+), Yn = (
+  /** @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 ?? p();
+    return e === "nl" ? Wn() : e === "de" ? Qn() : Zn();
+  })
+), Kn = (
+  /** @type {(inputs: Controls_Qr_Modalinstructions1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Your phone will open the 3D model in AR mode."
+  )
+), Xn = (
+  /** @type {(inputs: Controls_Qr_Modalinstructions1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Je telefoon opent het 3D-model in AR-modus."
+  )
+), Jn = (
+  /** @type {(inputs: Controls_Qr_Modalinstructions1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Dein Telefon öffnet das 3D-Modell im AR-Modus."
+  )
+), ti = (
+  /** @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 ?? p();
+    return e === "nl" ? Xn() : e === "de" ? Jn() : Kn();
+  })
+), ei = (
+  /** @type {(inputs: Controls_Qr_Modaltitle1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Scan to view in AR"
+  )
+), ni = (
+  /** @type {(inputs: Controls_Qr_Modaltitle1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Scan om in AR te bekijken"
+  )
+), ii = (
+  /** @type {(inputs: Controls_Qr_Modaltitle1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Scannen für AR-Ansicht"
+  )
+), oi = (
+  /** @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 ?? p();
+    return e === "nl" ? ni() : e === "de" ? ii() : ei();
+  })
+), si = (
+  /** @type {(inputs: Controls_Screenshot_Buttonlabel1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Screenshot"
+  )
+), ri = (
+  /** @type {(inputs: Controls_Screenshot_Buttonlabel1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Screenshot"
+  )
+), ai = (
+  /** @type {(inputs: Controls_Screenshot_Buttonlabel1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Screenshot"
+  )
+), li = (
+  /** @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 ?? p();
+    return e === "nl" ? ri() : e === "de" ? ai() : si();
+  })
+), ci = (
+  /** @type {(inputs: Loading_Downloadingshort1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Downloading"
+  )
+), di = (
+  /** @type {(inputs: Loading_Downloadingshort1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Downloaden"
+  )
+), ui = (
+  /** @type {(inputs: Loading_Downloadingshort1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Herunterladen"
+  )
+), hi = (
+  /** @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 ?? p();
+    return e === "nl" ? di() : e === "de" ? ui() : ci();
+  })
+);
+const pi = {
+  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"
 };
-//#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;
-	}
+const Ct = ([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 = Ct(o);
+    i.appendChild(s);
+  }), i;
+}, At = (n, t = {}) => {
+  const i = {
+    ...pi,
+    ...t
+  };
+  return Ct(["svg", i, n]);
 };
-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}`);
-		});
-	}
+const mi = [
+  [
+    "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 fi = [
+  [
+    "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 Et = [["path", { d: "m6 9 6 6 6-6" }]];
+const gi = [["path", { d: "m15 18-6-6 6-6" }]];
+const bi = [["path", { d: "m9 18 6-6-6-6" }]];
+const vi = [["path", { d: "m18 15-6-6-6 6" }]];
+const yi = [
+  ["path", { d: "M12.75 7.09a3 3 0 0 1 2.16 2.16" }],
+  [
+    "path",
+    {
+      d: "M17.072 17.072c-1.634 2.17-3.527 3.912-4.471 4.727a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 1.432-4.568"
+    }
+  ],
+  ["path", { d: "m2 2 20 20" }],
+  ["path", { d: "M8.475 2.818A8 8 0 0 1 20 10c0 1.183-.31 2.377-.81 3.533" }],
+  ["path", { d: "M9.13 9.13a3 3 0 0 0 3.74 3.74" }]
+];
+const wi = [
+  [
+    "path",
+    {
+      d: "M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"
+    }
+  ],
+  ["circle", { cx: "12", cy: "10", r: "3" }]
+];
+const Si = [
+  ["path", { d: "M15 3h6v6" }],
+  ["path", { d: "m21 3-7 7" }],
+  ["path", { d: "m3 21 7-7" }],
+  ["path", { d: "M9 21H3v-6" }]
+];
+const _i = [
+  ["path", { d: "m14 10 7-7" }],
+  ["path", { d: "M20 10h-6V4" }],
+  ["path", { d: "m3 21 7-7" }],
+  ["path", { d: "M4 14h6v6" }]
+];
+const ki = [
+  ["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 Ci = [
+  ["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 Ai = [
+  ["path", { d: "M18 6 6 18" }],
+  ["path", { d: "m6 6 12 12" }]
+];
+const Ei = [
+  ["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 xi = [
+  ["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 b(n, { size: t = 20, strokeWidth: e = 1.75 } = {}) {
+  return At(n, { width: t, height: t, "stroke-width": e });
+}
+const g = {
+  ar: (n) => b(mi, n),
+  annotations: (n) => b(wi, n),
+  annotationsOff: (n) => b(yi, n),
+  fullscreen: (n) => b(Si, n),
+  exitFullscreen: (n) => b(_i, n),
+  screenshot: (n) => b(fi, n),
+  tiltUp: (n) => b(vi, n),
+  tiltDown: (n) => b(Et, n),
+  rotateLeft: (n) => b(gi, n),
+  rotateRight: (n) => b(bi, n),
+  zoomIn: (n) => b(Ei, n),
+  zoomOut: (n) => b(xi, n),
+  reset: (n) => b(ki, n),
+  configurator: (n) => b(Ci, n),
+  close: (n) => b(Ai, n)
+};
+class v {
+  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"
+}, l = {
+  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"
+};
+class Ti {
+  element;
+  constructor() {
+    this.element = document.createElement("div"), Object.assign(this.element.style, {
+      background: m.white,
+      borderRadius: l[3],
+      padding: l[6],
+      boxShadow: `0 ${l[2]} ${l[8]} oklch(0% 0 0 / 20%)`,
+      maxWidth: "20rem",
+      width: "100%"
+    });
+  }
+}
+class Ri {
+  constructor(t = {}) {
+    this.options = t, this.card = new Ti(), 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: l[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 Ii {
+  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;
+  }
+  /**
+   * Enable only the given values; null lifts every restriction. A disabled
+   * value stays visible (the buyer sees the option exists) but cannot be
+   * picked: the selectable snapshot's "not in the list = grey".
+   */
+  setEnabled(t) {
+    for (const e of this.element.querySelectorAll(".ui-toggle-group-item")) {
+      const i = t === null || t.includes(e.dataset.value ?? "");
+      e.disabled = !i, e.setAttribute("aria-disabled", i ? "false" : "true");
+    }
+  }
+}
+class Oi {
+  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 a = !1;
+    for (let u = 0; u < e.length; u++) {
+      const f = e[u], h = document.createElement("option");
+      h.value = f, h.textContent = s?.[u] ?? f, f === o && (h.selected = !0, a = !0), this.select.appendChild(h);
+    }
+    a || (r.selected = !0);
+    const d = At(Et, { 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);
+    });
+  }
+  /** Enable only the given values; null lifts every restriction (see ToggleGroup.setEnabled). */
+  setEnabled(t) {
+    for (const e of this.select.options)
+      e.value !== "" && (e.disabled = t !== null && !t.includes(e.value));
+  }
+}
+class Li {
+  element;
+  input;
+  valueText;
+  values;
+  options;
+  selectCallback = null;
+  settleCallback = null;
+  constructor(t, e) {
+    if (t.length === 0)
+      throw new Error("Virtualdisplay: Slider needs at least one value");
+    this.values = t, this.options = e, this.input = document.createElement("input"), this.input.type = "range", this.input.className = "ui-slider-input", this.input.min = "0", this.input.max = String(t.length - 1), this.input.step = "1", this.input.setAttribute("aria-label", e.label), this.valueText = document.createElement("span"), this.valueText.className = "ui-slider-value", this.valueText.setAttribute("aria-hidden", "true");
+    const i = document.createElement("div");
+    i.className = "ui-slider-track", i.appendChild(this.input), i.appendChild(this.buildEnds()), this.element = document.createElement("div"), this.element.className = "ui-slider", this.element.appendChild(i), this.element.appendChild(this.valueText);
+    const o = e.initialSelected === void 0 ? 0 : t.indexOf(e.initialSelected);
+    this.applyIndex(o === -1 ? 0 : o), this.listen();
+  }
+  setSelected(t) {
+    const e = this.values.indexOf(t);
+    e !== -1 && this.applyIndex(e);
+  }
+  /** Fires on every step a drag or keypress crosses, with the value it lands on. */
+  onSelect(t) {
+    this.selectCallback = t;
+  }
+  /** Fires once per interaction, when the value commits (drag released, key released). */
+  onSettle(t) {
+    this.settleCallback = t;
+  }
+  listen() {
+    this.input.addEventListener("input", () => {
+      const t = this.values[this.currentIndex];
+      t !== void 0 && (this.applyIndex(this.currentIndex), this.selectCallback?.(t));
+    }), this.input.addEventListener("change", () => {
+      const t = this.values[this.currentIndex];
+      t !== void 0 && this.settleCallback?.(t);
+    });
+  }
+  get currentIndex() {
+    return Number(this.input.value);
+  }
+  applyIndex(t) {
+    this.input.value = String(t);
+    const e = this.displayAt(t);
+    this.valueText.textContent = e, this.input.setAttribute("aria-valuetext", e);
+    const i = this.values.length === 1 ? 100 : t / (this.values.length - 1) * 100;
+    this.element.style.setProperty("--ui-slider-pct", `${i}%`);
+  }
+  buildEnds() {
+    const t = document.createElement("div");
+    t.className = "ui-slider-ends", t.setAttribute("aria-hidden", "true");
+    for (const e of [0, this.values.length - 1]) {
+      const i = document.createElement("span");
+      i.textContent = this.labelAt(e), t.appendChild(i);
+    }
+    return t;
+  }
+  labelAt(t) {
+    return this.options.labels?.[t] ?? this.values[t] ?? "";
+  }
+  displayAt(t) {
+    const e = this.labelAt(t);
+    return this.options.unit === void 0 ? e : `${e} ${this.options.unit}`;
+  }
+}
+const _ = {
+  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 = _.fontFamily.sans.join(", "), Mi = `
+  --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);
+`, Ni = `
+:root { ${Mi} }
+
+/* ── 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:disabled { opacity: 0.4; cursor: not-allowed; }
+.ui-toggle-group-item:disabled:hover { background: var(--background); border-color: var(--border); }
+.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;
+}
+
+/* ── Slider ──────────────────────────────────────────────── */
+.ui-slider {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  inline-size: 100%;
+}
+
+.ui-slider-track {
+  flex: 1;
+  min-inline-size: 0;
+}
+
+/* Tabular figures keep the readout and layout steady mid-drag. */
+.ui-slider-value {
+  font-family: ${x};
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--foreground);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.ui-slider-ends {
+  display: flex;
+  justify-content: space-between;
+  font-family: ${x};
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+  font-variant-numeric: tabular-nums;
+}
+
+/* 2.75rem tall: the whole input is the touch target (44px). */
+.ui-slider-input {
+  appearance: none;
+  display: block;
+  inline-size: 100%;
+  block-size: 2.75rem;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  cursor: pointer;
+}
+.ui-slider-input:focus-visible { outline: none; }
+
+/* --ui-slider-pct is set by the component; it fills the track up to the thumb. */
+.ui-slider-input::-webkit-slider-runnable-track {
+  block-size: 0.375rem;
+  border-radius: 9999px;
+  background: linear-gradient(to right, var(--primary) var(--ui-slider-pct, 0%), var(--secondary) var(--ui-slider-pct, 0%));
+}
+.ui-slider-input::-webkit-slider-thumb {
+  appearance: none;
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
+  margin-block-start: -0.4375rem; /* centre the 1.25rem thumb on the 0.375rem track */
+  border-radius: 50%;
+  border: 2px solid var(--primary);
+  background: var(--background);
+  box-shadow: 0 1px 3px oklch(5% 0 0 / 20%);
+  transition: box-shadow 200ms, border-color 200ms;
+}
+.ui-slider-input:focus-visible::-webkit-slider-thumb {
+  border-color: var(--ring);
+  box-shadow: 0 0 0 3px oklch(5% 0 0 / 12%);
+}
+
+.ui-slider-input::-moz-range-track {
+  block-size: 0.375rem;
+  border-radius: 9999px;
+  background: var(--secondary);
+}
+.ui-slider-input::-moz-range-progress {
+  block-size: 0.375rem;
+  border-radius: 9999px;
+  background: var(--primary);
+}
+.ui-slider-input::-moz-range-thumb {
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
+  border-radius: 50%;
+  border: 2px solid var(--primary);
+  background: var(--background);
+  box-shadow: 0 1px 3px oklch(5% 0 0 / 20%);
+  transition: box-shadow 200ms, border-color 200ms;
+}
+.ui-slider-input:focus-visible::-moz-range-thumb {
+  border-color: var(--ring);
+  box-shadow: 0 0 0 3px oklch(5% 0 0 / 12%);
+}
+
+/* ── 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;
+  /* The popup is absolutely positioned inside the ~28px marker anchor, so
+     without an explicit width it shrink-to-fits against that anchor and
+     collapses to one word per line. max-content sizes it by its own text,
+     capped below. */
+  inline-size: max-content;
+  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; }
+
+/* Flipped below the marker when the popup would clip the container's top
+   edge; the layer positions it at open time and on the render cadence. */
+.vd-annotation-popup--below {
+  inset-block-end: auto;
+  inset-block-start: calc(100% + 0.5rem);
+}
+
+.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;
+  }
+}
+
+/* Opacity only: the layer sets the popup's transform inline to clamp it
+   inside the container, and a keyframe animating transform would override
+   that for its duration and make the popup jump at the end. */
+@keyframes vd-popup-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.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 ct = !1;
+function xt() {
+  if (ct || typeof document > "u")
+    return;
+  ct = !0;
+  const n = document.createElement("style");
+  n.id = "vd-ui-vanilla", n.textContent = Ni, document.head.appendChild(n);
+}
+const zi = _.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(), xt(), this.dialog = new Ri({ onClose: () => {
+      this.dialog = null, this.qrSlot = null;
+    } }), Object.assign(this.dialog.card.element.style, {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: l[3],
+      fontFamily: zi
+    }), this.dialog.card.element.appendChild(this.createText(oi(), {
+      fontSize: _.fontSize.base,
+      fontWeight: _.fontWeight.semibold,
+      color: m.neutral[900]
+    })), this.dialog.card.element.appendChild(this.createText(Yn(), {
+      fontSize: _.fontSize.sm,
+      color: m.neutral[600]
+    })), this.qrSlot = this.createQrSlot(), this.dialog.card.element.appendChild(this.qrSlot), this.dialog.card.element.appendChild(this.createText(ti(), {
+      fontSize: _.fontSize.xs,
+      color: m.neutral[500]
+    }));
+    const t = new v({
+      variant: "outline",
+      label: Gn(),
+      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 dt(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, a, d] = n, u = Math.cos(t), f = Math.sin(t), h = u * r + f * d, E = -f * r + u * d, C = Math.cos(e), k = Math.sin(e), I = C * a - k * E, F = k * a + C * E, tt = 0.55;
+  return [i + h * s * tt, o - I * s * tt, F];
+}
+function $i(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 Di(n, t, e, i, o) {
+  const s = t(e), r = t(i), a = [
+    s[0] + (r[0] - s[0]) * o,
+    s[1] + (r[1] - s[1]) * o,
+    s[2]
+  ];
+  $i(n, s, a);
+}
+const D = [-1, -1, 1], B = [1, -1, 1], U = [1, -1, -1], V = [-1, -1, -1], H = [-1, 1, 1], j = [1, 1, 1], q = [1, 1, -1], G = [-1, 1, -1], ut = [
+  [D, B],
+  [B, U],
+  [U, V],
+  [V, D],
+  [D, H],
+  [B, j],
+  [U, q],
+  [V, G],
+  [H, j],
+  [j, q],
+  [q, G],
+  [G, H]
+], Bi = 400, ht = '-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif';
+function Ui() {
+  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: ht
+  });
+  const o = document.createElement("span");
+  return Object.assign(o.style, {
+    fontSize: "13px",
+    color: "#000",
+    fontFamily: ht
+  }), o.textContent = hi(), e.appendChild(i), e.appendChild(o), n.appendChild(t), n.appendChild(e), { overlay: n, canvas: t, pctEl: i, phaseEl: o };
+}
+class Vi {
+  overlay;
+  canvas;
+  ctx;
+  pctEl;
+  phaseEl;
+  animationId = null;
+  showTimerId = null;
+  startTime;
+  hidden = !1;
+  visible = !1;
+  constructor(t, e = {}) {
+    this.startTime = performance.now();
+    const i = Ui();
+    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 ?? Bi;
+    this.showTimerId = setTimeout(() => {
+      this.reveal();
+    }, o);
+  }
+  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, a = 0.785, d = 0.615, u = (k) => Fi(k, a, d, o, s, r), f = 6, h = i % f / f, E = ut.length;
+    let C;
+    h < 0.35 ? C = dt(h / 0.35) * E : h < 0.55 ? C = E : h < 0.9 ? C = (1 - dt((h - 0.55) / 0.35)) * E : C = 0, this.ctx.shadowBlur = 5, this.ctx.shadowColor = "rgba(30,30,30,0.08)";
+    for (let k = 0; k < E && !(k >= C); k++) {
+      const I = ut[k];
+      if (I === void 0)
+        continue;
+      const F = Math.min(1, C - k);
+      Di(this.ctx, u, I[0], I[1], F);
+    }
+    this.ctx.shadowBlur = 0;
+  }
+}
+class Hi {
+  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;
+  annotationsBtn = null;
+  /**
+   * Whether markers are currently shown, as this control believes it. Seeded
+   * from the mode when the button first renders, then owned by the clicks:
+   * the toggle channel has no return leg, so the button is the state holder.
+   */
+  annotationsShown = !1;
+  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 v({
+      variant: "outline",
+      size: "icon",
+      label: en(),
+      icon: g.ar(),
+      onClick: () => {
+        this.options.onAr?.();
+      }
+    })), this.fullscreenBtn = this.syncButton(this.fullscreenBtn, t.fullscreen !== !1 && this.options.onFullscreen !== void 0, () => new v({
+      variant: "outline",
+      size: "icon",
+      label: Vn(),
+      icon: g.fullscreen(),
+      onClick: () => {
+        this.options.onFullscreen?.();
+      }
+    }));
+    const e = t.annotations === "toggle-shown" || t.annotations === "toggle-hidden";
+    this.annotationsBtn = this.syncButton(this.annotationsBtn, e && this.options.onAnnotationsToggle !== void 0, () => {
+      this.annotationsShown = t.annotations === "toggle-shown";
+      const i = new v({
+        variant: "outline",
+        size: "icon",
+        label: Ke(),
+        icon: this.annotationsShown ? g.annotations() : g.annotationsOff(),
+        onClick: () => {
+          this.flipAnnotations();
+        }
+      });
+      return i.element.setAttribute("aria-pressed", String(this.annotationsShown)), i;
+    });
+  }
+  flipAnnotations() {
+    this.annotationsShown = !this.annotationsShown, this.annotationsBtn?.element.setAttribute("aria-pressed", String(this.annotationsShown)), this.annotationsBtn?.setIcon(this.annotationsShown ? g.annotations() : g.annotationsOff()), this.options.onAnnotationsToggle?.(this.annotationsShown);
+  }
+  destroy() {
+    document.removeEventListener("fullscreenchange", this.onFullscreenChange);
+  }
+}
+const R = 0.5;
+class P {
+  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 = ji(t, e, i);
+    e.onChange((s) => {
+      i.targetRotation = s.rotation - i.thetaOffset, i.targetTilt = s.tilt, i.targetZoom = s.zoom, qi(o, e, s);
+    }), this.element.appendChild(P.buildZoom(o.zoomOut, o.zoomIn)), this.element.appendChild(P.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 [a, d] of [
+      [t, "up"],
+      [e, "left"],
+      [i, "center"],
+      [o, "right"],
+      [s, "down"]
+    ])
+      a.element.classList.add(`vd-dpad-${d}`), r.appendChild(a.element);
+    return r;
+  }
+}
+function ji(n, t, e) {
+  const i = (r) => Math.max(t.limits?.minZoom ?? 1, Math.min(t.limits?.maxZoom ?? 1 / 0, r)), o = (r) => {
+    const a = t.limits?.minRotate, d = t.limits?.maxRotate;
+    return a !== void 0 || d !== void 0 ? Math.max(a ?? -1 / 0, Math.min(d ?? 1 / 0, r)) : r;
+  }, s = (r) => {
+    const a = t.limits?.minTilt, d = t.limits?.maxTilt;
+    if (a !== void 0 || d !== void 0) {
+      e.targetTilt = Math.max(a ?? 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 v({ variant: "outline", size: "icon", label: In(), icon: g.zoomOut(), onClick: () => {
+      e.targetZoom = i(e.targetZoom - 10), n.zoom(e.targetZoom).set();
+    } }),
+    zoomIn: new v({ variant: "outline", size: "icon", label: En(), icon: g.zoomIn(), onClick: () => {
+      e.targetZoom = i(e.targetZoom + 10), n.zoom(e.targetZoom).set();
+    } }),
+    tiltUp: new v({ variant: "outline", size: "icon", label: _n(), icon: g.tiltUp(), onClick: () => {
+      s(-15);
+    } }),
+    rotateLeft: new v({ variant: "outline", size: "icon", label: dn(), icon: g.rotateLeft(), onClick: () => {
+      e.targetRotation = o(e.targetRotation - 15), n.rotate(e.targetRotation + e.thetaOffset).set();
+    } }),
+    reset: new v({ variant: "outline", size: "icon", label: rn(), icon: g.reset(), onClick: () => {
+      e.thetaOffset = 0, n.reset();
+    } }),
+    rotateRight: new v({ variant: "outline", size: "icon", label: mn(), icon: g.rotateRight(), onClick: () => {
+      e.targetRotation = o(e.targetRotation + 15), n.rotate(e.targetRotation + e.thetaOffset).set();
+    } }),
+    tiltDown: new v({ variant: "outline", size: "icon", label: vn(), icon: g.tiltDown(), onClick: () => {
+      s(15);
+    } })
+  };
+}
+function qi(n, t, e) {
+  const i = t.limits;
+  i !== void 0 && (n.zoomOut.element.disabled = i.minZoom !== void 0 && e.zoom <= i.minZoom + R, n.zoomIn.element.disabled = i.maxZoom !== void 0 && e.zoom >= i.maxZoom - R, n.tiltUp.element.disabled = i.minTilt !== void 0 && e.tilt <= i.minTilt + R, n.tiltDown.element.disabled = i.maxTilt !== void 0 && e.tilt >= i.maxTilt - R, n.rotateLeft.element.disabled = i.minRotate !== void 0 && e.rotation <= i.minRotate + R, n.rotateRight.element.disabled = i.maxRotate !== void 0 && e.rotation >= i.maxRotate - R);
+}
+const T = {
+  /** Attribute selection requested (cancelable, does not bubble). `detail`: `{ attribute, value }`. */
+  SELECT: "vd:select",
+  /** Attribute selection applied (does not bubble). `detail`: `{ attribute, value }`. */
+  SELECTED: "vd: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"
+}, Tt = {
+  mm: 1,
+  cm: 10,
+  m: 1e3,
+  in: 25.4
+}, pt = 3;
+function Gi(n) {
+  const t = n.stepMm / Tt[n.displayUnit];
+  for (let e = 0; e <= pt; e++) {
+    const i = t * 10 ** e;
+    if (Math.abs(i - Math.round(i)) < 1e-9)
+      return e;
+  }
+  return pt;
+}
+function Zi(n, t, e) {
+  const i = Gi(t), o = n / Tt[t.displayUnit];
+  return new Intl.NumberFormat(e, {
+    minimumFractionDigits: i,
+    maximumFractionDigits: i
+  }).format(o);
+}
+function Wi(n, t, e, i, o, s, r) {
+  const a = p(), d = n.values.map((h) => Zi(Number(h), t, a)), u = n.values.find((h) => e.getValue(n.name, h)?.isSelected === !0) ?? n.defaultValue, f = new Li(n.values, {
+    label: n.name,
+    labels: d,
+    unit: t.displayUnit,
+    ...u !== void 0 && { initialSelected: u }
+  });
+  return f.onSelect((h) => {
+    o(n.name, h);
+  }), f.onSettle((h) => {
+    i.dispatch(T.SELECT, { attribute: n.name, value: h }, !0).defaultPrevented || s(n.name, h);
+  }), r(n.name, (h) => {
+    f.setSelected(h.value), i.dispatch(T.SELECTED, { attribute: n.name, value: h.value });
+  }), {
+    element: f.element,
+    // No per-notch grey-out on the slider in v1: a range control cannot
+    // honestly disable one notch. The exclusion still works, the way it
+    // always does, on the other side: the viewer's selectable snapshot greys
+    // the leg that cannot do this size. A slider-side treatment is a later
+    // refinement, noted in task 040.
+    setSelectable: () => {
+    }
+  };
+}
+const Qi = 5;
+let Yi = 0;
+function K(n) {
+  const t = n.replace(/([A-Z])/g, " $1").trim();
+  return t.charAt(0).toUpperCase() + t.slice(1).toLowerCase();
+}
+function Ki(n, t, e, i, o, s) {
+  const r = document.createElement("div");
+  r.className = "vd-attribute", r.dataset.name = n.name;
+  const a = document.createElement("span");
+  a.className = "vd-attribute-label", a.textContent = K(n.name), a.id = `vd-attribute-label-${Yi++}`, r.appendChild(a), r.setAttribute("role", "group"), r.setAttribute("aria-labelledby", a.id);
+  const d = (f) => {
+    r.style.display = f ? "none" : "";
+  }, u = n.dimension !== void 0 ? Wi(
+    n,
+    n.dimension,
+    t,
+    e,
+    o,
+    i,
+    s
+  ) : Xi(n, t, e, i, s);
+  return r.appendChild(u.element), { element: r, setSelectable: u.setSelectable, setHidden: d };
+}
+function Xi(n, t, e, i, o) {
+  const s = n.values.find(
+    (d) => t.getValue(n.name, d)?.isSelected === !0
+  ), r = n.values.map(K), a = n.values.length <= Qi ? new Ii(n.values, s, r) : new Oi(n.name, n.values, K(n.name), s, r);
+  return a.onSelect((d) => {
+    e.dispatch(T.SELECT, { attribute: n.name, value: d }, !0).defaultPrevented || i(n.name, d);
+  }), o(n.name, (d) => {
+    a.setSelected(d.value), e.dispatch(T.SELECTED, { attribute: n.name, value: d.value });
+  }), {
+    element: a.element,
+    setSelectable: (d) => {
+      a.setEnabled(d);
+    }
+  };
+}
+const Ji = 80, to = 2500;
+class eo {
+  constructor(t, e = to) {
+    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 v({ 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 = no(t.price, t.currency), this.vatEl.textContent = mt(this.configuration.vatDisplay);
+  }
+  renderButton() {
+    const t = this.configuration.submitEnabled;
+    this.button.element.classList.toggle("vd-hidden", !t), t && this.state === "idle" && this.setButtonText(mt(this.configuration.buttonLabel));
+  }
+  async handleSubmit() {
+    if (this.state !== "busy") {
+      this.setState("busy", De());
+      try {
+        await this.configuration.submit(), this.setState("success", Ze());
+      } catch {
+        this.setState("failed", He());
+      }
+      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 mt(n) {
+  return (n ?? "").slice(0, Ji);
+}
+function no(n, t) {
+  try {
+    const e = new Intl.NumberFormat(p(), { style: "currency", currency: t }), i = e.resolvedOptions().maximumFractionDigits ?? 2;
+    return e.format(n / 10 ** i);
+  } catch {
+    return `${t} ${(n / 100).toFixed(2)}`;
+  }
+}
+class Rt {
+  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 io = 572;
+class oo {
+  /** @param actionBarSlot The shared corner slot the AR/fullscreen buttons live in — the
+   * "open configurator" toggle joins them there instead of floating as its own overlay. */
+  constructor(t) {
+    this.actionBarSlot = t;
+  }
+  actionBarSlot;
+  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 v({
+      variant: "ghost",
+      size: "icon-sm",
+      label: Nn(),
+      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 v({
+      variant: "outline",
+      size: "icon",
+      label: $n(),
+      icon: g.configurator({ size: 18 }),
+      onClick: () => {
+        this.expanded = !0, this.render();
+      }
+    }), this.openButton.element.classList.add("vd-configurator-toggle", "vd-hidden"), this.actionBarSlot.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-permanent"), 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 < io);
+    }), 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-permanent", t && !this.collapsible);
+  }
+}
+class so {
+  attach(t, e) {
+  }
+  setVisible(t) {
+  }
+  destroy() {
+  }
+}
+const ro = {
+  "inframe-bottom-left": () => new Rt(),
+  "sidebar-right": (n) => new oo(n),
+  hidden: () => new so()
 };
-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 ao(n, t) {
+  return (ro[n ?? ""] ?? (() => new Rt()))(t);
+}
+const Z = _.fontFamily.sans.join(", "), W = `
+  position: absolute;
+  display: flex;
+  z-index: 10;
+  transition: inset-inline-end 0.18s ease;
+`, lo = `
+/* Override browser's default black fullscreen backdrop */
+.vd-container:fullscreen {
+  background: oklch(100% 0 0);
+}
+
+/* Layout slots — four corners */
+.vd-slot-top-right {
+  ${W}
+  inset-block-start: ${l[3]};
+  inset-inline-end: ${l[3]};
+  flex-direction: column;
+  align-items: flex-end;
+  gap: ${l[1.5]};
+}
+
+.vd-slot-bottom-left {
+  ${W}
+  inset-block-end: ${l[3]};
+  inset-inline-start: ${l[3]};
+  flex-direction: column;
+  align-items: flex-start;
+  gap: ${l[1.5]};
+}
+
+.vd-slot-bottom-right {
+  ${W}
+  inset-block-end: ${l[3]};
+  inset-inline-end: ${l[3]};
+  flex-direction: row;
+  gap: ${l[1.5]};
+}
+
+/* Component styles — no positioning */
+.vd-camera-controls {
+  display: flex;
+  flex-direction: column;
+  gap: ${l[1]};
+  background: color-mix(in oklch, ${m.white} 85%, transparent);
+  backdrop-filter: blur(8px);
+  border-radius: ${l[2]};
+  padding: ${l[2]};
+}
+
+.vd-zoom {
+  display: flex;
+  gap: ${l[0.5]};
+}
+
+.vd-dpad {
+  display: grid;
+  grid-template-columns: repeat(3, ${l[9]});
+  grid-template-rows: repeat(3, ${l[9]});
+  gap: ${l[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: ${l[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: ${l[3]};
+  padding: ${l[3]};
+  box-shadow: 0 ${l[1]} ${l[4]} color-mix(in oklch, ${m.neutral[900]} 6%, transparent);
+  font-family: ${Z};
+}
+
+.vd-attribute {
+  display: flex;
+  flex-direction: column;
+  gap: ${l[1.5]};
+}
+
+/* Micro-label: recedes so the controls lead. */
+.vd-attribute-label {
+  font-size: ${_.fontSize.xs};
+  font-weight: ${_.fontWeight.medium};
+  color: ${m.neutral[500]};
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-family: ${Z};
+}
+
+/* sidebar-right layout — a docked, full-height right panel */
+.vd-container { --vd-sidebar-width: 300px; }
+
+.vd-container > iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  display: block;
+}
+
+/* Permanently docked panel (wide embeds, not collapsible): the viewer fills the
+   remaining width instead of the panel floating over it. On narrow embeds the
+   panel is a temporary tap-to-reveal overlay instead (vd-layout-sidebar-right
+   without -permanent), where covering part of the model briefly is expected. */
+.vd-container.vd-layout-sidebar-permanent > iframe {
+  width: calc(100% - var(--vd-sidebar-width));
+}
+
+.vd-hidden { display: none !important; }
+
+/* the "open configurator" toggle joins the shared bottom-right slot as a flex child;
+   order pins it after AR/fullscreen regardless of DOM insertion order (MAPPING data,
+   which mounts this button, always arrives before the toolbar mounts on ready). */
+.vd-configurator-toggle { order: 1; }
+
+.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: -${l[1]} 0 ${l[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: ${l[1.5]} ${l[1.5]} 0;
+}
+
+.vd-sidebar-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: ${l[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: ${l[5]};
+}
+
+/* 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) + ${l[3]}); }
+.vd-layout-sidebar-right .vd-slot-bottom-right { inset-inline-end: calc(var(--vd-sidebar-width) + ${l[3]}); }
+
+/* Price + CTA — sit under the attribute controls, separated by a hairline */
+.vd-commerce {
+  display: flex;
+  flex-direction: column;
+  gap: ${l[2]};
+  padding-block-start: ${l[3]};
+  border-block-start: 1px solid color-mix(in oklch, ${m.neutral[900]} 8%, transparent);
+  font-family: ${Z};
+}
+
+.vd-commerce-price {
+  display: flex;
+  align-items: baseline;
+  gap: ${l[1.5]};
+}
+
+.vd-price {
+  font-size: ${_.fontSize.lg};
+  font-weight: ${_.fontWeight.semibold};
+  color: ${m.neutral[900]};
+}
+
+.vd-vat {
+  font-size: ${_.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 co() {
+  if (xt(), document.getElementById("vd-styles") !== null)
+    return;
+  const n = document.createElement("style");
+  n.id = "vd-styles", n.textContent = lo, document.head.appendChild(n);
+}
+function uo(n, t) {
+  const e = document.createElement("a");
+  e.href = `data:image/png;base64,${n}`, e.download = t, e.click();
+}
+class ho {
+  options;
+  settings = {};
+  container = null;
+  loading = null;
+  slots = { topRight: null, bottomRight: null };
+  screenshotBtn = null;
+  actionBar = null;
+  cameraControls = null;
+  attributes = null;
+  /** Rendered attribute groups by name, so a selectable snapshot can reach their controls. */
+  groupHandles = /* @__PURE__ */ new Map();
+  /** The latest selectable snapshot, re-applied when the controls re-render. */
+  lastSelectable = null;
+  layout = null;
+  commerce = null;
+  constructor(t) {
+    this.options = t;
+  }
+  attach(t) {
+    co(), this.container = t, this.loading = new Vi(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 Hi({
+      onAr: this.options.onAr,
+      onFullscreen: t ? () => {
+        this.toggleFullscreen();
+      } : void 0,
+      onAnnotationsToggle: this.options.onAnnotationsToggle
+    }), 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 && St(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.slots.bottomRight === null) && (this.cameraControls?.element.remove(), this.cameraControls = null, this.teardownConfigurator(), this.settings.cameraControls === !0 && (this.cameraControls = new P(
+      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", this.groupHandles = /* @__PURE__ */ new Map();
+      for (const i of e) {
+        const o = Ki(
+          i,
+          t,
+          this.options.eventBus,
+          this.options.onSelect,
+          this.options.onSelectTransient,
+          this.options.onSubscribe
+        );
+        this.groupHandles.set(i.name, o), this.attributes.appendChild(o.element);
+      }
+      this.commerce = new eo(this.options.configuration), this.attributes.appendChild(this.commerce.element), this.layout = ao(
+        this.settings.configuratorLayout,
+        this.slots.bottomRight
+      ), this.layout.attach(this.container, this.attributes), this.lastSelectable !== null && this.applySelectable(this.lastSelectable);
+    }
+  }
+  /**
+   * Grey out what the viewer reports as not pickable: per attribute in the
+   * snapshot only the listed values stay enabled; attributes the snapshot
+   * does not name are unrestricted. The interface renders, it never knows
+   * the exclusion rules (kiesbaarheid live, binding-studio task 17).
+   */
+  applySelectable(t) {
+    this.lastSelectable = t;
+    for (const [e, i] of this.groupHandles) {
+      const o = t.find((s) => s.name === e);
+      i.setSelectable(o?.selectable ?? null), i.setHidden(o?.hidden === !0);
+    }
+  }
+  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.groupHandles = /* @__PURE__ */ new Map(), 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 v({
+      variant: "outline",
+      size: "icon",
+      label: li(),
+      icon: g.screenshot(),
+      onClick: () => {
+        this.options.snapshotApi.take("snapshot.png").onDeveloped(({ data: e, filename: i }) => {
+          uo(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 po = {};
+class mo {
+  defaultServer = "https://server.virtualdisplay.io";
+  options;
+  serverHost;
+  extraParams;
+  constructor(t, e, i) {
+    this.options = t, this.serverHost = e, this.extraParams = i;
+  }
+  /**
+   * 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(), t.setAttribute("allow", "xr-spatial-tracking; fullscreen"), t;
+  }
+  attachToParent(t) {
+    this.getParentElement().appendChild(t);
+  }
+  buildUrl() {
+    const t = this.getServerUrl(), e = new URL(t);
+    this.setAddressParams(e), 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);
+    for (const [i, o] of Object.entries(this.extraParams ?? {}))
+      e.searchParams.set(i, o);
+    return e.toString();
+  }
+  /**
+   * Put the address form on the URL. `app` names an app row; the
+   * `license`/`model` pair resolves to the model's default app. When both are
+   * given, `app` wins and the pair is ignored with a warning, so adding `app`
+   * to an existing integration is additive rather than a swap.
+   */
+  setAddressParams(t) {
+    if (this.options.app === void 0) {
+      t.searchParams.set("license", this.options.license), t.searchParams.set("model", this.options.model);
+      return;
+    }
+    t.searchParams.set("app", this.options.app), (this.options.license !== void 0 || this.options.model !== void 0) && w.warn("Both `app` and `license`/`model` were supplied: `app` wins, the pair was ignored");
+  }
+  getServerUrl() {
+    if (this.serverHost !== void 0)
+      return this.serverHost;
+    if (po?.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 y.parentNotFound(this.options.parent);
+    return t;
+  }
+}
+function fo(n) {
+  const { messenger: t } = n;
+  t.on(c.HANDSHAKE, (e) => {
+    Nt(e) && (w.info("Server handshake received, flushing publisher queue"), t.markReady());
+  }), t.on(c.SESSION, (e) => {
+    zt(e) && n.onSession(e.sessionId);
+  }), t.on(c.MUTATION, (e) => {
+    Ft(e) && (n.attributes.handleMutationResult(e), n.configuration.handleSelectionChanged(n.attributes.getSelection()));
+  }), t.on(c.SNAPSHOT, (e) => {
+    $t(e) && n.snapshot.handleSnapshotResult(e);
+  }), t.on(c.CAMERA, (e) => {
+    Dt(e) && n.cameraPosition.handlePositionUpdate(e);
+  }), t.on(c.LOADING_INDICATOR, (e) => {
+    Ut(e) && (e.error !== void 0 ? n.ui.showError(e.error) : n.ui.updateProgress(e.progress, e.phase));
+  }), t.on(c.CONFIG, (e) => {
+    jt(e) && n.applyConfig(e);
+  }), t.on(c.MAPPING, (e) => {
+    Bt(e) && (n.attributes.handleMappingReceived(e), n.configuration.handleSelectionChanged(n.attributes.getSelection()), n.ui.renderAttributeControls(n.attributes, e.attributes), n.readyStateTracker.handleMappingReceived());
+  }), go(n);
+}
+function go(n) {
+  const { messenger: t } = n;
+  t.on(c.FOCUS, (e) => {
+    qt(e) && n.focus.handleStateReceived(e);
+  }), t.on(c.PRICING, (e) => {
+    Gt(e) && n.configuration.handlePricingReceived(e.pricing);
+  }), t.on(c.SYNC, (e) => {
+    Vt(e) && n.onSync(e.connected);
+  }), t.on(c.SELECTABLE, (e) => {
+    Ht(e) && (n.selectable.handleSnapshot(e), n.ui.applySelectable(e.attributes));
+  }), t.on(c.APP_RESOLVED, (e) => {
+    Pt(e) && n.onAppResolved(e);
+  });
+}
+class bo {
+  ready = !1;
+  onReady;
+  constructor(t) {
+    this.onReady = t;
+  }
+  handleMappingReceived() {
+    this.ready || (this.ready = !0, w.info("Mapping received from server, client is now ready"), this.onReady?.());
+  }
+  get isReady() {
+    return this.ready;
+  }
+  clear() {
+    this.ready = !1;
+  }
+}
+function vo(n) {
+  if (n === void 0)
+    return;
+  const { annotations: t, ...e } = n;
+  return t === void 0 ? e : t === !0 ? { ...e, annotations: "show" } : t === !1 ? { ...e, annotations: "hide" } : { ...e, annotations: t };
+}
+class yo {
+  attributes;
+  selectableState;
+  readyStateTracker;
+  messenger;
+  cameraApi;
+  cameraPositionApi;
+  focusApi;
+  configurationApi;
+  snapshotApi;
+  annotationsApi;
+  eventBus;
+  ui;
+  options;
+  serverHost;
+  iframeParams;
+  // The composed AR flow, or undefined in a build that composes none.
+  arActivation;
+  // The composed sync tracker, or undefined in a build that composes none.
+  syncTracker;
+  iframe;
+  container;
+  readyCallbacks = [];
+  mutationFailedCallbacks = [];
+  // The viewer's tracking session id, once the server announces it (SESSION).
+  viewerSessionId;
+  // Which app the viewer resolved, once reported (APP_RESOLVED).
+  resolvedApp;
+  appResolvedCallbacks = [];
+  /** @internal */
+  constructor(t, e) {
+    this.options = t;
+    const i = e ?? {};
+    this.serverHost = i.serverHost, this.iframeParams = i.iframeParams, this.initializeLogging(), this.messenger = new Zt(() => this.iframe?.contentWindow ?? null, {
+      onHandlerError: (s, r) => w.error(`Error handling ${s.type}`, r),
+      ...i.messengerOptions
+    });
+    const o = (s) => {
+      this.messenger.send(s);
+    };
+    this.attributes = new fe(o, L, (s, r) => {
+      this.notifyMutationFailed(s, r);
+    }), this.selectableState = new ge(), this.snapshotApi = new Ce(o), this.annotationsApi = new Qt(o, L), this.cameraApi = new be(o), this.cameraPositionApi = new ve(), this.focusApi = new _e(o, (s) => {
+      this.dispatchFocusChange(s);
+    }, L), this.configurationApi = new Se(
+      (s) => {
+        this.dispatchConfigurationChange(s);
+      },
+      (s) => {
+        this.dispatchConfigurationSubmit(s);
+      }
+    ), this.eventBus = new Ae(), this.arActivation = i.createArActivation?.(o), this.syncTracker = i.createSyncTracker?.(), this.readyStateTracker = new bo(() => {
+      this.notifyReady();
+    }), this.ui = this.createStandardInterface(), this.wireIncomingMessages(), i.registerHandlers?.(this.messenger, o), this.messenger.start(), this.createAndConnectIframe();
+  }
+  // The configurator UI, every callback bridging it to the facade that owns the action.
+  createStandardInterface() {
+    const t = this.arActivation;
+    return new ho({
+      snapshotApi: this.snapshotApi,
+      cameraApi: this.cameraApi,
+      cameraPositionApi: this.cameraPositionApi,
+      eventBus: this.eventBus,
+      configuration: this.configurationApi,
+      onSelect: (e, i) => this.attributes.select(e, i),
+      onSelectTransient: (e, i) => this.attributes.selectTransient(e, i),
+      onSubscribe: (e, i) => this.attributes.onChange(e, i),
+      ...t !== void 0 && {
+        onAr: () => {
+          t.activate();
+        }
+      },
+      onFullscreenEnter: () => {
+        this.trackFullscreen();
+      },
+      onAnnotationsToggle: (e) => {
+        this.sendControlAnnotationToggle(e);
+      }
+    });
+  }
+  // The visible toggle composes its message here because it is the one sender
+  // allowed to stamp `origin: 'control'`: the viewer only counts
+  // control-originated flips as Shopper use. The public `client.annotations`
+  // facade stays origin-less on purpose. One send per member instance once
+  // composition lands; today the host is the only one.
+  sendControlAnnotationToggle(t) {
+    this.messenger.send({
+      type: c.ANNOTATION_TOGGLE,
+      instance: L,
+      enabled: t,
+      origin: "control"
+    });
+  }
+  // Wire the inbound viewer protocol to the facades.
+  wireIncomingMessages() {
+    fo({
+      messenger: this.messenger,
+      attributes: this.attributes,
+      selectable: this.selectableState,
+      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);
+      },
+      onAppResolved: (t) => {
+        this.handleAppResolved({
+          appType: t.appType,
+          name: t.name,
+          ...t.slug !== void 0 && { slug: t.slug },
+          ...t.submit !== void 0 && { submit: t.submit }
+        });
+      }
+    });
+  }
+  // Store the resolved app and notify every registered `onAppResolved` callback.
+  handleAppResolved(t) {
+    this.resolvedApp = t;
+    for (const e of this.appResolvedCallbacks)
+      e(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(T.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(T.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(T.CONFIGURATION_SUBMIT, { detail: t, bubbles: !0 })
+    );
+  }
+  handleConfig(t) {
+    const e = t.viewerSettings, i = vo(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, a]) => e[r] !== a).map(
+          ([r, a]) => `${r} (metadata: ${e[r] ?? "undefined"}, override: ${a})`
+        );
+        s.length > 0 && w.warn(`Viewer settings override active: ${s.join(", ")}`);
+      }
+      this.ui.applyViewerSettings(o), this.echoAnnotationsDifference(e?.annotations, o.annotations);
+    }
+    this.cameraPositionApi.applyLimits(t.cameraLimits);
+  }
+  // The viewer already applied the announced mode itself, so speaking up when
+  // the merged mode matches would toggle it back and forth for nothing. A boot
+  // without overrides therefore sends no toggle at all.
+  // Tell the viewer about the annotation mode only when the merged mode differs
+  // from the one it announced.
+  echoAnnotationsDifference(t, e) {
+    e === void 0 || e === t || this.annotationsApi.setEnabled(e === "show" || e === "toggle-shown");
+  }
+  // Tell the viewer the user entered fullscreen, so it records the engagement.
+  trackFullscreen() {
+    this.messenger.send({ type: c.FULLSCREEN });
+  }
+  initializeLogging() {
+    this.options.debug === !0 && me(), w.info("Initializing Virtualdisplay client", {
+      ...this.options.app === void 0 ? { model: this.options.model } : { app: this.options.app }
+    });
+  }
+  createAndConnectIframe() {
+    const e = new mo(this.options, this.serverHost, this.iframeParams).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);
+  }
+  /**
+   * Subscribe to which values can be picked right now, per attribute. Fires
+   * immediately when a snapshot already arrived. A model with no exclusions
+   * never sends one, so this never fires and everything stays selectable.
+   */
+  onSelectableChange(t) {
+    this.selectableState.onChange(t);
+  }
+  /**
+   * Subscribe to which app this viewer resolved (type, name, public submit
+   * settings). Reported once by the viewer after its resolve; fires immediately
+   * when the report already arrived, so registration order does not matter.
+   */
+  onAppResolved(t) {
+    this.appResolvedCallbacks.push(t), this.resolvedApp !== void 0 && t(this.resolvedApp);
+  }
+  /** The selectable values for one attribute right now, or null when unrestricted. */
+  getSelectable(t) {
+    return this.selectableState.selectableFor(t);
+  }
+  // Exists for a host page that hides the built-in button and owns its own AR
+  // affordance: without this it would have no way into the same flow.
+  /**
+   * Start the AR flow directly, as the built-in AR button would. Does nothing
+   * when `viewerSettings.ar` is off or the build composes no AR flow.
+   */
+  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 wo = "ar.virtualdisplay.io";
+function So(n) {
+  const t = new URL(`https://${wo}/go`);
+  return n.sessionId !== void 0 ? t.searchParams.set("session", n.sessionId) : n.app !== void 0 ? t.searchParams.set("app", n.app) : n.license !== void 0 && n.model !== void 0 && (t.searchParams.set("license", n.license), t.searchParams.set("model", n.model)), t.toString();
+}
+const _o = 1500;
+class ko {
+  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 (he()) {
+      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 = So({
+      sessionId: t,
+      app: this.options.app,
+      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);
+      }, _o);
+      this.pendingTimers.add(e), this.waiters.push((i) => {
+        this.pendingTimers.delete(e), clearTimeout(e), t(i);
+      });
+    });
+  }
+}
+class Co {
+  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 xo extends yo {
+  syncStatusTracker;
+  constructor(t) {
+    const e = new Co();
+    super(t, {
+      createArActivation: (i) => new ko({
+        app: t.app,
+        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 {
+  Ot as AVAILABILITY,
+  Qt as Annotations,
+  Kt as Attribute,
+  Yt as AttributeValue,
+  be as Camera,
+  ve as CameraPosition,
+  Se as Configuration,
+  A as ERROR_CODES,
+  _e as Focus,
+  ke as Photo,
+  Ce as Snapshot,
+  T as VD_EVENTS,
+  xo as VirtualdisplayClient,
+  y as VirtualdisplayError,
+  me as enableDebugMode,
+  Ao as isDebugMode,
+  w 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 };