@virtualdisplay.io/client 4.0.0-alpha.19 → 4.0.0-alpha.20

package/dist/virtualdisplay.client.es.js

@@ -1,530 +1,174 @@
-const A = {
-  NO_MAPPING: "NO_MAPPING",
-  ATTRIBUTE_NOT_FOUND: "ATTRIBUTE_NOT_FOUND",
-  VALUE_NOT_FOUND: "VALUE_NOT_FOUND",
-  PARENT_NOT_FOUND: "PARENT_NOT_FOUND",
-  INVALID_PARAMETER: "INVALID_PARAMETER",
-  SNAPSHOT_FAILED: "SNAPSHOT_FAILED"
-};
-class f extends Error {
-  code;
-  constructor(t, e) {
-    super(t), this.name = "VirtualdisplayError", this.code = e;
-  }
-  static valueNotFound(t, e) {
-    return new f(
-      `Value "${e}" not found for attribute "${t}"`,
-      A.VALUE_NOT_FOUND
-    );
-  }
-  static parentNotFound(t) {
-    return new f(
-      `Parent element not found: ${t}`,
-      A.PARENT_NOT_FOUND
-    );
-  }
-  static invalidParameter(t) {
-    return new f(t, A.INVALID_PARAMETER);
-  }
-}
-const St = {};
-class At {
-  defaultServer = "https://server.virtualdisplay.io";
-  options;
-  constructor(t) {
-    this.options = t;
-  }
-  /**
-   * Create container and iframe, attach to parent element
-   */
-  create() {
-    const t = this.createContainer(), e = this.createIframe();
-    return t.appendChild(e), this.attachToParent(t), { container: t, iframe: e };
-  }
-  createContainer() {
-    const t = document.createElement("div");
-    return t.className = "vd-container", Object.assign(t.style, {
-      position: "relative",
-      width: "100%",
-      height: "100%",
-      overflow: "hidden"
-    }), t;
-  }
-  createIframe() {
-    const t = document.createElement("iframe");
-    return t.src = this.buildUrl(), Object.assign(t.style, {
-      width: "100%",
-      height: "100%",
-      border: "none",
-      display: "block"
-    }), t.setAttribute("allow", "xr-spatial-tracking; fullscreen"), t;
-  }
-  attachToParent(t) {
-    this.getParentElement().appendChild(t);
-  }
-  buildUrl() {
-    const t = this.getServerUrl(), e = new URL(t);
-    return e.searchParams.set("license", this.options.license), e.searchParams.set("model", this.options.model), this.options.language !== void 0 && e.searchParams.set("language", this.options.language), this.options.debug === !0 && e.searchParams.set("debug", "true"), this.options.traceparent !== void 0 && e.searchParams.set("traceparent", this.options.traceparent), e.toString();
-  }
-  getServerUrl() {
-    if (St?.VITE_VIRTUALDISPLAY_SERVER_HOST === void 0)
-      return this.defaultServer;
-  }
-  getParentElement() {
-    if (typeof this.options.parent != "string")
-      return this.options.parent;
-    const t = document.querySelector(this.options.parent);
-    if (t === null)
-      throw f.parentNotFound(this.options.parent);
-    return t;
-  }
-}
-function Et(n) {
-  const t = new Date(n.timestamp).toLocaleTimeString("en-GB", { hour12: !1 }), e = n.level.toUpperCase().padEnd(5), i = n.trace_id?.slice(0, 8) ?? "--------", o = n.msg, s = ["timestamp", "level", "msg", "service", "trace_id", "span_id"], r = Object.entries(n).filter(([l]) => !s.includes(l)).map(([l, d]) => `${l}=${JSON.stringify(d)}`).join(" ");
-  return `${t} ${e} [${i}] ${o}${r ? " " + r : ""}`;
+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"
+}, Y = {
+  FOCUS: "focus",
+  UNFOCUS: "unfocus"
+}, kt = {
+  FOCUSED: "focused"
+}, St = {
+  /** Behaves exactly like an unpriced combination: no price, no button. */
+  HIDDEN: "hidden"
+}, Et = new Set(Object.values(c));
+function At(n) {
+  if (typeof n != "object" || n === null)
+    return !1;
+  const t = n;
+  return typeof t.target == "string" ? !1 : typeof t.type == "string" && Et.has(t.type);
 }
 function xt(n) {
-  return JSON.stringify(n);
-}
-function Tt(n, t) {
-  const e = t ? Et(n) : xt(n);
-  n.level === "error" ? console.error(e) : n.level === "warn" ? console.warn(e) : console.log(e);
+  const t = k(n);
+  return t !== null && t.type === c.HANDSHAKE;
 }
-function ct(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 ? ct(n.cause, t + 1) : String(n.cause)), e;
+function Tt(n) {
+  const t = k(n);
+  return t !== null && t.type === c.SESSION && typeof t.sessionId == "string";
 }
 function Rt(n) {
-  const t = {};
-  for (const [e, i] of Object.entries(n))
-    t[e] = i instanceof Error ? ct(i) : i;
-  return t;
+  const t = k(n);
+  return t !== null && t.type === c.MUTATION && Array.isArray(t.results);
 }
-function Ot() {
-  return /* @__PURE__ */ new Date();
+function It(n) {
+  const t = k(n);
+  return t !== null && t.type === c.SNAPSHOT && ("data" in t || "error" in t);
+}
+function Ot(n) {
+  const t = k(n);
+  return t !== null && t.type === c.CAMERA && Array.isArray(t.transforms);
 }
 function Nt(n) {
-  return n.toISOString();
+  const t = k(n);
+  return t !== null && t.type === c.MAPPING && Array.isArray(t.attributes);
 }
-function ut() {
-  return typeof navigator > "u" ? "" : navigator.userAgent;
+function Lt(n) {
+  const t = k(n);
+  return t !== null && t.type === c.LOADING_INDICATOR && typeof t.progress == "number";
 }
-function It() {
-  return typeof navigator > "u" ? !1 : navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;
+function Mt(n) {
+  const t = k(n);
+  return t !== null && t.type === c.CONFIG && typeof t.viewerSettings == "object";
 }
-function Lt() {
-  return /iPhone|iPad|iPod/i.test(ut()) || It();
+function zt(n) {
+  const t = k(n);
+  return t !== null && t.type === c.FOCUS && typeof t.state == "string";
 }
-function Mt() {
-  return /Android/i.test(ut());
+function Ft(n) {
+  const t = k(n);
+  return t !== null && t.type === c.PRICING && typeof t.pricing == "object" && t.pricing !== null;
 }
-function zt() {
-  return Lt() || Mt();
+function k(n) {
+  return typeof n != "object" || n === null ? null : n;
 }
-class Z {
+class X {
   constructor(t) {
-    this.config = t;
+    this.processor = t;
   }
-  config;
+  processor;
+  pending = [];
+  isReady = !1;
   /**
-   * Log at specified level with optional attributes.
+   * Add a message — processed immediately if ready, queued otherwise
    */
-  log(t, e, i = {}) {
-    const o = this.config.traceProvider?.() ?? {}, s = {
-      timestamp: Nt(Ot()),
-      level: t,
-      msg: e,
-      service: this.config.service,
-      ...o,
-      ...Rt(i)
-    };
-    Tt(s, this.config.isDev);
+  enqueue(t) {
+    if (this.isReady) {
+      this.processor(t);
+      return;
+    }
+    this.pending.push(t);
   }
   /**
-   * Log at DEBUG level (development only).
+   * Mark as ready and flush all pending messages
    */
-  debug(t, e) {
-    this.config.isDev && this.log("debug", t, e);
+  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;
   }
   /**
-   * Log at INFO level.
+   * Check if a message of a specific type is pending
    */
-  info(t, e) {
-    this.log("info", t, e);
+  hasPending(t) {
+    return this.pending.some((e) => e.type === t);
   }
   /**
-   * Log at WARN level.
+   * Clear all pending messages
    */
-  warn(t, e) {
-    this.log("warn", t, e);
+  clear() {
+    this.pending.length = 0;
+  }
+}
+class Pt {
+  constructor(t, e) {
+    this.getTarget = t, this.sourceId = `vd-${Math.random().toString(36).slice(2, 8)}`, this.targetOrigin = e?.targetOrigin ?? "*", this.isValid = e?.isValid ?? At, this.publisher = new X((i) => this.post(i)), this.consumer = new X((i) => this.routeToHandler(i)), this.shouldBuffer = e?.shouldBuffer ?? null, e?.bufferIncoming !== !0 && this.consumer.markReady();
   }
+  getTarget;
+  handlers = /* @__PURE__ */ new Map();
+  publisher;
+  consumer;
+  shouldBuffer;
+  listener = null;
+  sourceId;
+  targetOrigin;
+  isValid;
   /**
-   * Log at ERROR level.
+   * Register a handler for a specific message type
    */
-  error(t, e) {
-    this.log("error", t, e);
+  on(t, e) {
+    this.handlers.set(t, e);
   }
   /**
-   * Create a child logger with additional default attributes.
+   * Remove a handler for a specific message type
    */
-  with(t) {
-    const e = new Z(this.config);
-    return e.log = ((i, o, s = {}) => {
-      this.log(i, o, { ...t, ...s });
-    }).bind(this), e;
+  off(t) {
+    this.handlers.delete(t);
   }
-}
-function dt(n, t) {
-  const e = t?.isDev !== void 0 ? t.isDev : typeof process < "u" ? process.env.NODE_ENV !== "production" : !0;
-  return new Z({ service: n, isDev: e, traceProvider: t?.traceProvider });
-}
-function N(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 ht(n) {
-  return {
-    debug: (t, e) => n.debug(t, N(e)),
-    info: (t, e) => n.info(t, N(e)),
-    warn: (t, e) => n.warn(t, N(e)),
-    error: (t, e) => n.error(t, N(e))
-  };
-}
-let mt = !1, C = ht(dt("client", { isDev: !1 }));
-function Pt() {
-  mt = !0, C = ht(dt("client", { isDev: !0 }));
-}
-function ji() {
-  return mt;
-}
-class Ft {
-  ready = !1;
-  onReady;
-  constructor(t) {
-    this.onReady = t;
+  /**
+   * Update the target origin for outgoing postMessage calls.
+   * Use when the target origin is discovered at runtime (e.g. from the first incoming message).
+   */
+  setTargetOrigin(t) {
+    this.targetOrigin = t;
   }
-  handleMappingReceived() {
-    this.ready || (this.ready = !0, C.info("Mapping received from server, client is now ready"), this.onReady?.());
+  /**
+   * Send a message to the target window
+   * Queued until markReady() is called
+   */
+  send(t) {
+    this.publisher.enqueue(t);
   }
-  get isReady() {
-    return this.ready;
+  /**
+   * Enable sending and flush queued outgoing messages
+   */
+  markReady() {
+    this.publisher.markReady();
   }
-  clear() {
-    this.ready = !1;
-  }
-}
-const O = {
-  /** Attribute selection requested (cancelable). `detail`: `{ attribute, value }`. */
-  SELECT: "ui:select",
-  /** Attribute selection applied. `detail`: `{ attribute, value }`. */
-  SELECTED: "ui:selected",
-  /** Focus changed (bubbles). `detail`: `{ component, attributes }`, or `null` for the overview. */
-  FOCUS_CHANGE: "vd:focus-change",
-  /** Resolved configuration changed (bubbles). `detail`: the resolved configuration, or `null` when nothing matches. */
-  CONFIGURATION_CHANGE: "vd:configuration-change",
-  /** Configuration submitted (bubbles). `detail`: the resolved configuration handed to the host. */
-  CONFIGURATION_SUBMIT: "vd:configuration-submit"
-};
-class $t {
-  constructor(t, e) {
-    this.value = t, this.attribute = e;
-  }
-  value;
-  attribute;
-  isSelectedValue = !1;
-  get isSelected() {
-    return this.isSelectedValue;
-  }
-  setSelected(t) {
-    this.isSelectedValue = t;
-  }
-}
-class Dt {
-  name;
-  defaultValue;
-  values;
-  onSelect;
-  onChangeCallback;
-  constructor(t) {
-    this.name = t.name, this.defaultValue = t.defaultValue, this.onSelect = t.onSelect, this.values = this.createValues(t.values);
-  }
-  /**
-   * Select a value for this attribute
-   * @throws {VirtualdisplayError} When value not found
-   */
-  select(t) {
-    if (!this.values.has(t))
-      throw f.valueNotFound(this.name, t);
-    this.onSelect(this.name, t);
-  }
-  getValues() {
-    return Array.from(this.values.values());
-  }
-  getValue(t) {
-    return this.values.get(t);
-  }
-  /** The currently selected value, or undefined before any selection lands. */
-  get selected() {
-    for (const t of this.values.values())
-      if (t.isSelected)
-        return t.value;
-  }
-  /**
-   * Register callback that fires when selection changes
-   * Receives the newly selected AttributeValue
-   */
-  onChange(t) {
-    this.onChangeCallback = t;
-  }
-  /**
-   * Update selection state from server mutation result
-   * Direct value comparison - no source/target translation
-   */
-  handleResult(t) {
-    let e;
-    for (const i of this.values.values()) {
-      const o = i.value === t;
-      i.setSelected(o), o && (e = i);
-    }
-    e !== void 0 && this.onChangeCallback !== void 0 && this.onChangeCallback(e);
-  }
-  createValues(t) {
-    const e = /* @__PURE__ */ new Map();
-    for (const i of t) {
-      const o = new $t(i, this.name);
-      i === this.defaultValue && o.setSelected(!0), e.set(i, o);
-    }
-    return e;
-  }
-}
-class Bt {
-  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 Dt(s));
-    }
-    this.onMutationFailed = i;
-  }
-  onMutationFailed;
-  get(t) {
-    return this.attributes.get(t);
-  }
-  /** The current selection as attribute name→value pairs, skipping unset attributes. */
-  getSelection() {
-    const t = {};
-    for (const [e, i] of this.attributes) {
-      const o = i.selected;
-      o !== void 0 && (t[e] = o);
-    }
-    return t;
-  }
-  handleResults(t) {
-    for (const e of t) {
-      if (!e.success) {
-        this.onMutationFailed?.(e.name, e.value);
-        continue;
-      }
-      this.get(e.name)?.handleResult(e.value);
-    }
-  }
-  buildOptions(t, e) {
-    const i = {
-      name: t.name,
-      values: t.values,
-      onSelect: (o, s) => {
-        e([{ name: o, value: s }], !1);
-      }
-    };
-    return t.defaultValue !== void 0 ? { ...i, defaultValue: t.defaultValue } : i;
-  }
-}
-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_PLACE_MODE: "annotation_place_mode",
-  ANNOTATION_PLACED: "annotation_placed",
-  ANNOTATION_TOGGLE: "annotation_toggle",
-  FOCUS: "focus",
-  PRICING: "pricing"
-}, X = {
-  FOCUS: "focus",
-  UNFOCUS: "unfocus"
-}, Ut = {
-  FOCUSED: "focused"
-}, Vt = {
-  /** Behaves exactly like an unpriced combination: no price, no button. */
-  HIDDEN: "hidden"
-}, jt = new Set(Object.values(c));
-function Ht(n) {
-  if (typeof n != "object" || n === null)
-    return !1;
-  const t = n;
-  return typeof t.target == "string" ? !1 : typeof t.type == "string" && jt.has(t.type);
-}
-function Gt(n) {
-  const t = w(n);
-  return t !== null && t.type === c.HANDSHAKE;
-}
-function qt(n) {
-  const t = w(n);
-  return t !== null && t.type === c.SESSION && typeof t.sessionId == "string";
-}
-function Zt(n) {
-  const t = w(n);
-  return t !== null && t.type === c.MUTATION && Array.isArray(t.results);
-}
-function Wt(n) {
-  const t = w(n);
-  return t !== null && t.type === c.SNAPSHOT && ("data" in t || "error" in t);
-}
-function Yt(n) {
-  const t = w(n);
-  return t !== null && t.type === c.CAMERA && Array.isArray(t.transforms);
-}
-function Xt(n) {
-  const t = w(n);
-  return t !== null && t.type === c.MAPPING && Array.isArray(t.attributes);
-}
-function Kt(n) {
-  const t = w(n);
-  return t !== null && t.type === c.LOADING_INDICATOR && typeof t.progress == "number";
-}
-function Qt(n) {
-  const t = w(n);
-  return t !== null && t.type === c.CONFIG && typeof t.viewerSettings == "object";
-}
-function Jt(n) {
-  const t = w(n);
-  return t !== null && t.type === c.ANNOTATION_PLACED && typeof t.position == "object" && t.position !== null;
-}
-function te(n) {
-  const t = w(n);
-  return t !== null && t.type === c.FOCUS && typeof t.state == "string";
-}
-function ee(n) {
-  const t = w(n);
-  return t !== null && t.type === c.PRICING && typeof t.pricing == "object" && t.pricing !== null;
-}
-function w(n) {
-  return typeof n != "object" || n === null ? null : n;
-}
-class K {
-  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 ne {
-  constructor(t, e) {
-    this.getTarget = t, this.sourceId = `vd-${Math.random().toString(36).slice(2, 8)}`, this.targetOrigin = e?.targetOrigin ?? "*", this.publisher = new K((i) => this.post(i)), this.consumer = new K((i) => this.routeToHandler(i)), this.shouldBuffer = e?.shouldBuffer ?? null, e?.bufferIncoming !== !0 && this.consumer.markReady();
-  }
-  getTarget;
-  handlers = /* @__PURE__ */ new Map();
-  publisher;
-  consumer;
-  shouldBuffer;
-  listener = null;
-  sourceId;
-  targetOrigin;
-  /**
-   * Register a handler for a specific message type
-   */
-  on(t, e) {
-    this.handlers.set(t, e);
-  }
-  /**
-   * Remove a handler for a specific message type
-   */
-  off(t) {
-    this.handlers.delete(t);
-  }
-  /**
-   * Update the target origin for outgoing postMessage calls.
-   * Use when the target origin is discovered at runtime (e.g. from the first incoming message).
-   */
-  setTargetOrigin(t) {
-    this.targetOrigin = t;
-  }
-  /**
-   * Send a message to the target window
-   * Queued until markReady() is called
-   */
-  send(t) {
-    this.publisher.enqueue(t);
-  }
-  /**
-   * 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();
+  /**
+   * 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
@@ -538,7 +182,7 @@ class ne {
   start() {
     this.listener === null && (this.listener = (t) => {
       const { data: e } = t;
-      if (!Ht(e) || e._source === this.sourceId)
+      if (!this.isValid(e) || e._source === this.sourceId)
         return;
       const i = this.getTarget();
       if (i !== null && t.source !== null && t.source !== i)
@@ -584,1816 +228,2088 @@ class ne {
     });
   }
 }
-class ie {
-  constructor(t, e) {
-    this.send = t, this.onMutationFailed = e;
-  }
-  send;
-  onMutationFailed;
-  registry;
-  pendingCallbacks = [];
-  /**
-   * Handle incoming MAPPING message from server
-   */
-  handleMappingReceived(t) {
-    C.debug("Initializing from server mapping", {
-      attributeCount: t.attributes.length
-    }), this.registry = new Bt(
-      t.attributes,
-      (e, i) => this.sendMutation(e, i),
-      this.onMutationFailed
-    ), this.replayPendingCallbacks();
-  }
-  handleMutationResult(t) {
-    this.registry?.handleResults(t.results);
-  }
-  /**
-   * Select a value for an attribute - sends mutation to server.
-   * Can be called before the mapping arrives — the mutation is sent immediately
-   * and the messenger's publisher queue holds it until the iframe is ready.
-   */
-  select(t, e) {
-    this.sendMutation([{ name: t, value: e }], !1);
-  }
-  getValues(t) {
-    return this.registry?.get(t)?.getValues() ?? [];
+class g {
+  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;
   }
-  getValue(t, e) {
-    return this.registry?.get(t)?.getValue(e);
+  setIcon(t) {
+    const e = this.element.querySelector("svg");
+    e !== null ? e.replaceWith(t) : this.element.appendChild(t);
   }
-  /**
-   * 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 $t = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": 2,
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+};
+const lt = ([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 = lt(o);
+    i.appendChild(s);
+  }), i;
+}, ct = (n, t = {}) => {
+  const i = {
+    ...$t,
+    ...t
+  };
+  return lt(["svg", i, n]);
+};
+const Dt = [
+  [
+    "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"
     }
-    const i = this.registry.get(t);
-    if (i === void 0) {
-      C.warn(`onChange: attribute "${t}" not found — callback will not fire`);
-      return;
+  ],
+  ["path", { d: "m3.3 7 8.7 5 8.7-5" }],
+  ["path", { d: "M12 22V12" }]
+];
+const Bt = [
+  [
+    "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"
     }
-    i.onChange(e);
+  ],
+  ["circle", { cx: "12", cy: "13", r: "3" }]
+];
+const ut = [["path", { d: "m6 9 6 6 6-6" }]];
+const Ut = [["path", { d: "m15 18-6-6 6-6" }]];
+const Vt = [["path", { d: "m9 18 6-6-6-6" }]];
+const jt = [["path", { d: "m18 15-6-6-6 6" }]];
+const Ht = [
+  ["path", { d: "M15 3h6v6" }],
+  ["path", { d: "m21 3-7 7" }],
+  ["path", { d: "m3 21 7-7" }],
+  ["path", { d: "M9 21H3v-6" }]
+];
+const Gt = [
+  ["path", { d: "m14 10 7-7" }],
+  ["path", { d: "M20 10h-6V4" }],
+  ["path", { d: "m3 21 7-7" }],
+  ["path", { d: "M4 14h6v6" }]
+];
+const qt = [
+  ["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 Zt = [
+  ["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 Wt = [
+  ["path", { d: "M18 6 6 18" }],
+  ["path", { d: "m6 6 12 12" }]
+];
+const Yt = [
+  ["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 Xt = [
+  ["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" }]
+], m = {
+  semantic: {
+    // eslint-disable-next-line vd-custom/enforce-error-codes -- This is a hex color, not an error code
+    error: "#dc2626"
+  },
+  neutral: {
+    500: "#737373",
+    600: "#525252",
+    900: "#171717"
+  },
+  white: "#ffffff",
+  black: "#000000"
+}, a = {
+  0: "0",
+  0.5: "0.125rem",
+  // 2px
+  1: "0.25rem",
+  // 4px
+  1.5: "0.375rem",
+  // 6px
+  2: "0.5rem",
+  // 10px
+  3: "0.75rem",
+  // 14px
+  4: "1rem",
+  // 16px
+  5: "1.25rem",
+  // 20px
+  6: "1.5rem",
+  // 28px
+  8: "2rem",
+  // 32px
+  9: "2.25rem",
+  // 80px
+  24: "6rem"
+  // 96px
+};
+class Kt {
+  element;
+  constructor() {
+    this.element = document.createElement("div"), Object.assign(this.element.style, {
+      background: m.white,
+      borderRadius: a[3],
+      padding: a[6],
+      boxShadow: `0 ${a[2]} ${a[8]} oklch(0% 0 0 / 20%)`,
+      maxWidth: "20rem",
+      width: "100%"
+    });
   }
-  getAttribute(t) {
-    return this.registry?.get(t);
+}
+class Qt {
+  constructor(t = {}) {
+    this.options = t, this.card = new Kt(), this.backdrop = this.createBackdrop(), this.backdrop.appendChild(this.card.element);
   }
-  /** The current selection as attribute name→value pairs, empty before the mapping arrives. */
-  getSelection() {
-    return this.registry?.getSelection() ?? {};
+  options;
+  card;
+  backdrop;
+  keyHandler = null;
+  open() {
+    document.body.appendChild(this.backdrop), this.keyHandler = (t) => {
+      t.key === "Escape" && this.close();
+    }, document.addEventListener("keydown", this.keyHandler);
   }
-  get hasMapping() {
-    return this.registry !== void 0;
+  close() {
+    this.backdrop.remove(), this.keyHandler !== null && (document.removeEventListener("keydown", this.keyHandler), this.keyHandler = null), this.options.onClose?.();
   }
-  sendMutation(t, e) {
-    const i = {
-      type: c.MUTATION,
-      mutations: t,
-      isInitial: e
-    };
-    this.send(i);
+  createBackdrop() {
+    const t = document.createElement("div");
+    return Object.assign(t.style, {
+      position: "fixed",
+      inset: a[0],
+      background: "oklch(0% 0 0 / 50%)",
+      zIndex: "9999",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }), t.addEventListener("click", (e) => {
+      e.target === t && this.close();
+    }), t;
   }
-  replayPendingCallbacks() {
-    for (const { name: t, callback: e } of this.pendingCallbacks) {
-      const i = this.registry?.get(t);
-      i === void 0 && C.warn(`onChange: attribute "${t}" not found — buffered callback will not fire`), i?.onChange(e);
+}
+class Jt {
+  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);
     }
-    this.pendingCallbacks.length = 0;
   }
-}
-let oe = class {
-  constructor(t) {
-    this.send = t;
+  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");
+    }
   }
-  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;
+  onSelect(t) {
+    this.selectCallback = t;
   }
-  /**
-   * 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;
+}
+class te {
+  element;
+  select;
+  constructor(t, e, i, o, s) {
+    this.select = document.createElement("select"), this.select.className = "ui-native-select", this.select.dataset.name = t, this.select.setAttribute("aria-label", i);
+    const r = document.createElement("option");
+    r.value = "", r.disabled = !0, r.textContent = i, this.select.appendChild(r);
+    let l = !1;
+    for (let u = 0; u < e.length; u++) {
+      const p = e[u], v = document.createElement("option");
+      v.value = p, v.textContent = s?.[u] ?? p, p === o && (v.selected = !0, l = !0), this.select.appendChild(v);
+    }
+    l || (r.selected = !0);
+    const d = ct(ut, { 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);
   }
-  /**
-   * Zoom camera
-   * @param percentage - Zoom percentage (100 = normal, >100 = zoom in, <100 = zoom out)
-   * @throws VirtualdisplayError if value is not a finite number
-   */
-  zoom(t) {
-    return this.validateFiniteNumber(t, "zoom"), this.commands.push({ action: "zoom", value: t }), this;
-  }
-  /**
-   * Execute accumulated camera commands
-   * @throws VirtualdisplayError if no commands have been accumulated
-   */
-  set() {
-    if (this.commands.length === 0)
-      throw f.invalidParameter(
-        "No camera commands to execute. Call rotate(), tilt(), or zoom() before set()."
-      );
-    const t = {
-      type: c.CAMERA,
-      commands: this.commands
-    };
-    this.send(t), this.commands = [];
-  }
-  validateFiniteNumber(t, e) {
-    if (!Number.isFinite(t))
-      throw f.invalidParameter(
-        `${e}() requires a finite number, got ${String(t)}`
-      );
+  setSelected(t) {
+    this.select.value = 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);
+  onSelect(t) {
+    this.select.addEventListener("change", () => {
+      t(this.select.value);
+    });
   }
+}
+const ee = {}, ne = "en", dt = (
+  /** @type {const} */
+  ["en", "nl", "de"]
+), Z = [
+  "baseLocale"
+], K = [];
+let Q, J;
+function ie(n) {
+  if (K.length === 0)
+    return;
+  const t = typeof n == "string" ? n : n.href;
+  if (Q === t)
+    return J;
+  const e = new URL(t, "http://dummy.com");
+  let i;
+  for (const o of K)
+    if (new ee(o.match, e.href).exec(e.href)) {
+      i = o;
+      break;
+    }
+  return Q = t, J = i, i;
+}
+function ht(n) {
+  const t = ie(n);
+  return t && t.exclude !== !0 && Array.isArray(t.strategy) ? t.strategy : Z;
+}
+const q = typeof window > "u";
+globalThis.__paraglide = /** @type {any} */
+globalThis.__paraglide ?? {};
+globalThis.__paraglide.ssr = /** @type {any} */
+globalThis.__paraglide.ssr ?? {};
+let tt = !1, h = () => {
+  let n = Z;
+  !q && typeof window < "u" && window.location?.href && (n = ht(window.location.href));
+  const t = oe(n);
+  if (t)
+    return tt || (tt = !0, mt(t, { reload: !1 })), t;
+  throw new Error("No locale found. Read the docs https://paraglidejs.com/errors#no-locale-found");
 };
-class se {
-  state;
-  limitsState;
-  changeCallbacks = [];
-  constructor() {
-    this.state = {
-      rotation: 0,
-      tilt: 0,
-      zoom: 100
-    };
-  }
-  /**
-   * Get current rotation in degrees
-   */
-  get rotation() {
-    return this.state.rotation;
-  }
-  /**
-   * Get current tilt in degrees
-   */
-  get tilt() {
-    return this.state.tilt;
-  }
-  /**
-   * Get current zoom percentage
-   */
-  get zoom() {
-    return this.state.zoom;
-  }
-  /**
-   * Subscribe to camera position changes.
-   * Also fires when limits are applied via applyLimits() so components
-   * can re-evaluate disabled states without a separate callback.
-   */
-  onChange(t) {
-    this.changeCallbacks.push(t);
-  }
-  /**
-   * Current camera movement limits (set from CONFIG message).
-   * Undefined until the server sends limits in its CONFIG payload.
-   */
-  get limits() {
-    return this.limitsState;
-  }
-  /**
-   * Apply camera limits received from the server CONFIG message.
-   * Fires onChange callbacks so button disabled states update immediately.
-   */
-  applyLimits(t) {
-    this.limitsState = t;
-    const e = { rotation: this.rotation, tilt: this.tilt, zoom: this.zoom };
-    for (const i of this.changeCallbacks)
-      i(e);
-  }
-  /**
-   * Handle incoming camera position message from server
-   */
-  handlePositionUpdate(t) {
-    this.update(t.transforms);
-  }
-  /**
-   * Update camera position from server transforms
-   */
-  update(t) {
-    let e = !1;
-    for (const i of t)
-      switch (i.type) {
-        case "rotation":
-          this.state.rotation = i.value, e = !0;
-          break;
-        case "tilt":
-          this.state.tilt = i.value, e = !0;
-          break;
-        case "zoom":
-          this.state.zoom = i.value, e = !0;
-          break;
+function oe(n, t) {
+  let e;
+  for (const i of n) {
+    if (i === "baseLocale")
+      e = ne;
+    else if (ft(i) && N.has(i)) {
+      const s = N.get(i);
+      if (s) {
+        const r = s.getLocale();
+        if (r instanceof Promise)
+          continue;
+        if (r !== void 0)
+          return re(r);
       }
-    if (e) {
-      const i = {
-        rotation: this.rotation,
-        tilt: this.tilt,
-        zoom: this.zoom
-      };
-      for (const o of this.changeCallbacks)
-        o(i);
     }
+    const o = pt(e);
+    if (o)
+      return o;
   }
 }
-class re {
-  constructor(t, e) {
-    this.send = t, this.dispatch = e;
-  }
-  send;
-  dispatch;
-  focused = null;
-  attributes = [];
-  changeCallbacks = [];
-  /** The focused component name, or null in overview. */
-  get current() {
-    return this.focused;
-  }
-  /**
-   * Focus a component by name. Sends a focus message to the viewer.
-   * @throws VirtualdisplayError if component is not a non-empty string
-   */
-  set(t) {
-    if (typeof t != "string" || t.length === 0)
-      throw f.invalidParameter(
-        `set() requires a non-empty component name, got ${String(t)}`
-      );
-    this.send({ type: c.FOCUS, action: X.FOCUS, component: t });
-  }
-  /** Return to the overview — unfocus the current component. */
-  clear() {
-    this.send({ type: c.FOCUS, action: X.UNFOCUS });
-  }
-  /**
-   * Subscribe to focus changes. The callback fires with the focus state when a
-   * component is focused, and with null when returning to overview.
-   */
-  onChange(t) {
-    this.changeCallbacks.push(t);
-  }
-  /** Called by the client when a FocusStateMessage is received from the viewer. */
-  handleStateReceived(t) {
-    t.state === Ut.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);
+const se = (n) => {
+  window.location.reload();
+};
+let mt = (n, t) => {
+  const e = {
+    reload: !0,
+    ...t
+  };
+  let i;
+  try {
+    i = h();
+  } catch {
   }
-}
-function ae(n, t) {
-  const e = n.filter((s) => le(s, t));
-  if (e.length === 0)
+  const o = [];
+  let s = Z;
+  !q && typeof window < "u" && window.location?.href && (s = ht(window.location.href));
+  for (const l of s)
+    if (l !== "baseLocale" && ft(l) && N.has(l)) {
+      const d = N.get(l);
+      if (d) {
+        let u = d.setLocale(n);
+        u instanceof Promise && (u = u.catch((p) => {
+          throw new Error(`Custom strategy "${l}" setLocale failed.`, {
+            cause: p
+          });
+        }), o.push(u));
+      }
+    }
+  const r = () => {
+    !q && e.reload && window.location && n !== i && se();
+  };
+  if (o.length)
+    return Promise.all(o).then(() => {
+      r();
+    });
+  r();
+};
+function pt(n) {
+  if (typeof n != "string")
     return;
-  const i = Math.max(...e.map(Q)), o = e.filter((s) => Q(s) === i);
-  return o.length === 1 ? o[0] : void 0;
+  const t = n.toLowerCase();
+  for (const e of dt)
+    if (e.toLowerCase() === t)
+      return e;
 }
-function le(n, t) {
-  return Object.entries(n.attributes).every(([e, i]) => t[e] === i);
+function re(n) {
+  const t = pt(n);
+  if (t)
+    return t;
+  throw new Error(`Invalid locale: ${n}. Expected one of: ${dt.join(", ")}`);
 }
-function Q(n) {
-  return Object.keys(n.attributes).length;
+const N = /* @__PURE__ */ new Map();
+function ft(n) {
+  return typeof n == "string" && /^custom-[A-Za-z0-9_-]+$/.test(n);
 }
-class ce {
-  constructor(t, e) {
-    this.dispatchChange = t, this.dispatchSubmit = e;
-  }
-  dispatchChange;
-  dispatchSubmit;
-  pricing;
-  selection = {};
-  resolved;
-  changeCallbacks = [];
-  renderCallbacks = [];
-  submitCallback;
-  submitDefaultLabel;
-  /** The resolved configuration, or undefined when nothing matches. */
-  get current() {
-    return this.resolved;
-  }
-  /** The VAT label for bare embeds (e.g. "incl. btw"), or undefined without pricing. */
-  get vatDisplay() {
-    return this.pricing?.vatDisplay;
-  }
-  /**
-   * The CTA label: the customer's `button_label`, or the adapter's `defaultLabel`
-   * when that is empty. Undefined when neither is set — a button must know what
-   * it says, so the CTA does not render.
-   */
-  get buttonLabel() {
-    const t = this.pricing?.buttonLabel;
-    if (t != null && t !== "")
-      return t;
-    if (this.submitDefaultLabel !== void 0 && this.submitDefaultLabel !== "")
-      return this.submitDefaultLabel;
-  }
-  /**
-   * Whether the current configuration may be submitted: a handler is registered
-   * and the configuration is either price-less or an `available` priced one. The
-   * CTA's visibility ({@link submitEnabled}) layers a label requirement on top of
-   * this; a programmatic `submit()` does not need a label.
-   */
-  get submittable() {
-    return this.submitCallback === void 0 ? !1 : this.pricing === void 0 ? !0 : this.resolved?.availability === "available";
-  }
-  /**
-   * Whether the CTA should render: the configuration is submittable and a label
-   * exists. A button must say something, so an empty label hides the CTA rather
-   * than rendering blank.
-   */
-  get submitEnabled() {
-    return this.submittable && this.buttonLabel !== void 0;
-  }
-  /**
-   * Subscribe to configuration changes. Fires after every selection change with
-   * the resolved configuration, including undefined when nothing matches.
-   */
-  onChange(t) {
-    this.changeCallbacks.push(t);
-  }
-  /**
-   * Register the submit handler the CTA hands the configuration to. Registering
-   * one is what switches the button on (capability driven). `defaultLabel` fills
-   * in when the customer authored no button label.
-   */
-  onSubmit(t, e) {
-    this.submitCallback = t, this.submitDefaultLabel = e?.defaultLabel, this.notifyRender();
-  }
-  /**
-   * Subscribe the built-in UI to re-render the price + CTA. Fires on every
-   * resolve and when a submit handler is registered (which can switch the button
-   * on without a configuration change). Separate from `onChange`, which stays the
-   * host-facing, mutation-driven contract. Returns a disposer.
-   */
-  onRender(t) {
-    return this.renderCallbacks.push(t), () => {
-      const e = this.renderCallbacks.indexOf(t);
-      e !== -1 && this.renderCallbacks.splice(e, 1);
-    };
-  }
-  /**
-   * Hand the current configuration to the registered handler and fire the
-   * bubbling `vd:configuration-submit` event. No-op without a handler or a
-   * resolved configuration. Returns the handler's promise so the caller can
-   * reflect the result (bezig / gelukt / mislukt).
-   */
-  async submit() {
-    if (!this.submittable)
-      return;
-    const t = this.resolved !== void 0 ? { attributes: this.resolved.attributes, reference: this.resolved.reference } : { attributes: { ...this.selection }, reference: "" };
-    this.dispatchSubmit(t), await this.submitCallback?.(t);
-  }
-  /** Called by the client when a PRICING message arrives from the viewer. */
-  handlePricingReceived(t) {
-    this.pricing = t, this.recompute();
-  }
-  /** Called by the client after every mutation result, with the full selection. */
-  handleSelectionChanged(t) {
-    this.selection = t, this.recompute();
-  }
-  recompute() {
-    this.resolved = this.resolve();
-    for (const t of this.changeCallbacks)
-      t(this.resolved);
-    this.dispatchChange(this.resolved), this.notifyRender();
-  }
-  notifyRender() {
-    for (const t of this.renderCallbacks)
-      t();
-  }
-  resolve() {
-    if (this.pricing === void 0)
-      return;
-    const t = ae(this.pricing.rules, this.selection);
-    if (!(t === void 0 || t.availability === Vt.HIDDEN))
-      return {
-        attributes: { ...this.selection },
-        reference: t.reference,
-        price: t.priceCents,
-        currency: this.pricing.currency,
-        availability: t.availability
-      };
-  }
-}
-class ue {
-  constructor(t) {
-    this.filename = t;
-  }
-  filename;
-  developedCallbacks = /* @__PURE__ */ new Set();
-  errorCallbacks = /* @__PURE__ */ new Set();
-  developed = !1;
-  failed = !1;
-  photoData = null;
-  /**
-   * Register a callback for when the photo is developed
-   * If the photo is already developed, the callback is called immediately
-   *
-   * @param callback Function to call with photo data
-   * @returns This Photo instance for chaining
-   */
-  onDeveloped(t) {
-    return this.developed && this.photoData !== null ? (t(this.photoData), this) : (this.developedCallbacks.add(t), this);
-  }
-  /**
-   * Register a callback for when the photo capture fails
-   *
-   * @param callback Function to call with error
-   * @returns This Photo instance for chaining
-   */
-  onError(t) {
-    return this.errorCallbacks.add(t), this;
-  }
-  /**
-   * Get the filename for this photo
-   */
-  getFilename() {
-    return this.filename;
-  }
-  /**
-   * Mark the photo as developed and notify all callbacks
-   * This method is called by Snapshot when the photo data arrives from the server
-   */
-  develop(t) {
-    this.developed || this.failed || (this.photoData = t, this.developed = !0, this.developedCallbacks.forEach((e) => {
-      e(this.photoData);
-    }), this.developedCallbacks.clear(), this.errorCallbacks.clear());
-  }
-  /**
-   * Mark the photo as failed and notify error callbacks
-   */
-  fail(t) {
-    this.developed || this.failed || (this.failed = !0, this.errorCallbacks.forEach((e) => {
-      e(t);
-    }), this.developedCallbacks.clear(), this.errorCallbacks.clear());
-  }
-}
-const J = 3e4;
-class de {
-  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), C.debug("Taking snapshot", { filename: t });
-    const e = new ue(t), i = setTimeout(() => {
-      this.pendingPhotos.delete(t), C.warn("Snapshot timed out", { filename: t }), e.fail(new f(
-        `Snapshot timed out: the viewer did not respond within ${J}ms`,
-        A.SNAPSHOT_FAILED
-      ));
-    }, J);
-    return this.pendingPhotos.set(t, { photo: e, timeout: i }), this.send({
-      type: c.SNAPSHOT,
-      filename: t
-    }), e;
-  }
-  /**
-   * Handle incoming snapshot result from server
-   * Matches the message to a pending photo by filename, then develops or fails it
-   */
-  handleSnapshotResult(t) {
-    const e = this.pendingPhotos.get(t.filename);
-    if (e === void 0) {
-      C.warn("No pending photo found for filename", {
-        filename: t.filename,
-        pendingFilenames: Array.from(this.pendingPhotos.keys())
-      });
-      return;
-    }
-    clearTimeout(e.timeout), this.pendingPhotos.delete(t.filename);
-    const { photo: i } = e;
-    if (t.error !== void 0) {
-      i.fail(new f(t.error, A.SNAPSHOT_FAILED));
-      return;
-    }
-    t.data !== void 0 && i.develop({ filename: t.filename, data: t.data });
-  }
-  /**
-   * Fail any pending photos and forget them. Called from client destroy
-   * so callers awaiting onError() see a deterministic outcome instead of
-   * leaking captures whose results will never arrive.
-   */
-  clear() {
-    if (this.pendingPhotos.size === 0)
-      return;
-    const t = new f(
-      "Client destroyed before snapshot completed",
-      A.SNAPSHOT_FAILED
-    );
-    for (const { photo: e, timeout: i } of this.pendingPhotos.values())
-      clearTimeout(i), e.fail(t);
-    this.pendingPhotos.clear();
-  }
-  /**
-   * Validate filename has a valid image extension
-   */
-  validateFilename(t) {
-    if (t === "" || typeof t != "string")
-      throw new f(
-        "Filename must be a non-empty string",
-        A.INVALID_PARAMETER
-      );
-    if (!this.validExtensions.some(
-      (i) => t.toLowerCase().endsWith(i)
-    ))
-      throw new f(
-        `Invalid filename: "${t}". Filename must end with one of: ${this.validExtensions.join(", ")}`,
-        A.INVALID_PARAMETER
-      );
-    if (t.includes("..") || t.includes("/") || t.includes("\\"))
-      throw new f(
-        'Filename cannot contain path separators or ".."',
-        A.INVALID_PARAMETER
-      );
-  }
-}
-class he {
-  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 me = {}, pe = "en", pt = (
-  /** @type {const} */
-  ["en", "nl", "de"]
-), W = [
-  "baseLocale"
-], tt = [];
-let et, nt;
-function fe(n) {
-  if (tt.length === 0)
-    return;
-  const t = typeof n == "string" ? n : n.href;
-  if (et === t)
-    return nt;
-  const e = new URL(t, "http://dummy.com");
-  let i;
-  for (const o of tt)
-    if (new me(o.match, e.href).exec(e.href)) {
-      i = o;
-      break;
-    }
-  return et = t, nt = i, i;
-}
-function ft(n) {
-  const t = fe(n);
-  return t && t.exclude !== !0 && Array.isArray(t.strategy) ? t.strategy : W;
-}
-const q = typeof window > "u";
-globalThis.__paraglide = /** @type {any} */
-globalThis.__paraglide ?? {};
-globalThis.__paraglide.ssr = /** @type {any} */
-globalThis.__paraglide.ssr ?? {};
-let it = !1, h = () => {
-  let n = W;
-  !q && typeof window < "u" && window.location?.href && (n = ft(window.location.href));
-  const t = ge(n);
-  if (t)
-    return it || (it = !0, gt(t, { reload: !1 })), t;
-  throw new Error("No locale found. Read the docs https://paraglidejs.com/errors#no-locale-found");
-};
-function ge(n, t) {
-  let e;
-  for (const i of n) {
-    if (i === "baseLocale")
-      e = pe;
-    else if (vt(i) && I.has(i)) {
-      const s = I.get(i);
-      if (s) {
-        const r = s.getLocale();
-        if (r instanceof Promise)
-          continue;
-        if (r !== void 0)
-          return ve(r);
-      }
-    }
-    const o = bt(e);
-    if (o)
-      return o;
-  }
-}
-const be = (n) => {
-  window.location.reload();
-};
-let gt = (n, t) => {
-  const e = {
-    reload: !0,
-    ...t
-  };
-  let i;
-  try {
-    i = h();
-  } catch {
-  }
-  const o = [];
-  let s = W;
-  !q && typeof window < "u" && window.location?.href && (s = ft(window.location.href));
-  for (const l of s)
-    if (l !== "baseLocale" && vt(l) && I.has(l)) {
-      const d = I.get(l);
-      if (d) {
-        let u = d.setLocale(n);
-        u instanceof Promise && (u = u.catch((p) => {
-          throw new Error(`Custom strategy "${l}" setLocale failed.`, {
-            cause: p
-          });
-        }), o.push(u));
-      }
-    }
-  const r = () => {
-    !q && e.reload && window.location && n !== i && be();
-  };
-  if (o.length)
-    return Promise.all(o).then(() => {
-      r();
-    });
-  r();
-};
-function bt(n) {
-  if (typeof n != "string")
-    return;
-  const t = n.toLowerCase();
-  for (const e of pt)
-    if (e.toLowerCase() === t)
-      return e;
-}
-function ve(n) {
-  const t = bt(n);
-  if (t)
-    return t;
-  throw new Error(`Invalid locale: ${n}. Expected one of: ${pt.join(", ")}`);
-}
-const I = /* @__PURE__ */ new Map();
-function vt(n) {
-  return typeof n == "string" && /^custom-[A-Za-z0-9_-]+$/.test(n);
-}
-const ye = (
+const ae = (
   /** @type {(inputs: Controls_Ar_Buttonlabel1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Activate AR"
   )
-), _e = (
+), le = (
   /** @type {(inputs: Controls_Ar_Buttonlabel1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "AR activeren"
   )
-), Ce = (
+), ce = (
   /** @type {(inputs: Controls_Ar_Buttonlabel1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "AR aktivieren"
   )
-), we = (
+), ue = (
   /** @type {((inputs?: Controls_Ar_Buttonlabel1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Ar_Buttonlabel1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
   ((n = {}, t = {}) => {
     const e = t.locale ?? h();
-    return e === "en" ? ye() : e === "nl" ? _e() : Ce();
+    return e === "en" ? ae() : e === "nl" ? le() : ce();
   })
-), ke = (
+), de = (
   /** @type {(inputs: Controls_Qr_Modaltitle1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Scan to view in AR"
   )
-), Se = (
+), he = (
   /** @type {(inputs: Controls_Qr_Modaltitle1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Scan om in AR te bekijken"
   )
-), Ae = (
+), me = (
   /** @type {(inputs: Controls_Qr_Modaltitle1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Scannen für AR-Ansicht"
   )
-), Ee = (
+), pe = (
   /** @type {((inputs?: Controls_Qr_Modaltitle1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Qr_Modaltitle1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
   ((n = {}, t = {}) => {
     const e = t.locale ?? h();
-    return e === "en" ? ke() : e === "nl" ? Se() : Ae();
+    return e === "en" ? de() : e === "nl" ? he() : me();
   })
-), xe = (
+), fe = (
   /** @type {(inputs: Controls_Qr_Modaldescription1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Use your smartphone camera to scan this QR code"
   )
-), Te = (
+), ge = (
   /** @type {(inputs: Controls_Qr_Modaldescription1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Gebruik de camera van je smartphone om deze QR-code te scannen"
   )
-), Re = (
+), be = (
   /** @type {(inputs: Controls_Qr_Modaldescription1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Verwende die Kamera deines Smartphones, um diesen QR-Code zu scannen"
   )
-), Oe = (
+), ve = (
   /** @type {((inputs?: Controls_Qr_Modaldescription1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Qr_Modaldescription1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
   ((n = {}, t = {}) => {
     const e = t.locale ?? h();
-    return e === "en" ? xe() : e === "nl" ? Te() : Re();
+    return e === "en" ? fe() : e === "nl" ? ge() : be();
   })
-), Ne = (
+), ye = (
   /** @type {(inputs: Controls_Qr_Modalinstructions1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Your phone will open the 3D model in AR mode."
   )
-), Ie = (
+), _e = (
   /** @type {(inputs: Controls_Qr_Modalinstructions1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Je telefoon opent het 3D-model in AR-modus."
   )
-), Le = (
+), we = (
   /** @type {(inputs: Controls_Qr_Modalinstructions1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Dein Telefon öffnet das 3D-Modell im AR-Modus."
   )
-), Me = (
+), Ce = (
   /** @type {((inputs?: Controls_Qr_Modalinstructions1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Qr_Modalinstructions1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
   ((n = {}, t = {}) => {
     const e = t.locale ?? h();
-    return e === "en" ? Ne() : e === "nl" ? Ie() : Le();
+    return e === "en" ? ye() : e === "nl" ? _e() : we();
   })
-), ze = (
+), ke = (
   /** @type {(inputs: Controls_Qr_Closebutton1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Close"
   )
-), Pe = (
+), Se = (
   /** @type {(inputs: Controls_Qr_Closebutton1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Sluiten"
   )
-), Fe = (
+), Ee = (
   /** @type {(inputs: Controls_Qr_Closebutton1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Schließen"
   )
-), $e = (
+), Ae = (
   /** @type {((inputs?: Controls_Qr_Closebutton1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Qr_Closebutton1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
   ((n = {}, t = {}) => {
     const e = t.locale ?? h();
-    return e === "en" ? ze() : e === "nl" ? Pe() : Fe();
+    return e === "en" ? ke() : e === "nl" ? Se() : Ee();
   })
-), De = (
+), xe = (
   /** @type {(inputs: Controls_Fullscreen_Buttonlabel1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Fullscreen"
   )
-), Be = (
+), Te = (
   /** @type {(inputs: Controls_Fullscreen_Buttonlabel1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Volledig scherm"
   )
-), Ue = (
+), Re = (
   /** @type {(inputs: Controls_Fullscreen_Buttonlabel1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Vollbild"
   )
-), Ve = (
+), Ie = (
   /** @type {((inputs?: Controls_Fullscreen_Buttonlabel1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Fullscreen_Buttonlabel1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
   ((n = {}, t = {}) => {
     const e = t.locale ?? h();
-    return e === "en" ? De() : e === "nl" ? Be() : Ue();
+    return e === "en" ? xe() : e === "nl" ? Te() : Re();
   })
-), je = (
+), Oe = (
   /** @type {(inputs: Loading_Downloadingshort1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Downloading"
   )
-), He = (
+), Ne = (
   /** @type {(inputs: Loading_Downloadingshort1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Downloaden"
   )
-), Ge = (
+), Le = (
   /** @type {(inputs: Loading_Downloadingshort1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Herunterladen"
   )
-), yt = (
+), gt = (
   /** @type {((inputs?: Loading_Downloadingshort1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Loading_Downloadingshort1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
   ((n = {}, t = {}) => {
     const e = t.locale ?? h();
-    return e === "en" ? je() : e === "nl" ? He() : Ge();
+    return e === "en" ? Oe() : e === "nl" ? Ne() : Le();
   })
-), qe = (
+), Me = (
   /** @type {(inputs: Loading_RenderingInputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Rendering"
   )
-), Ze = (
+), ze = (
   /** @type {(inputs: Loading_RenderingInputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Renderen"
   )
-), We = (
+), Fe = (
   /** @type {(inputs: Loading_RenderingInputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Rendern"
   )
-), Ye = (
+), Pe = (
   /** @type {((inputs?: Loading_RenderingInputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Loading_RenderingInputs, { locale?: "en" | "nl" | "de" }, {}>} */
   ((n = {}, t = {}) => {
     const e = t.locale ?? h();
-    return e === "en" ? qe() : e === "nl" ? Ze() : We();
+    return e === "en" ? Me() : e === "nl" ? ze() : Fe();
   })
-), Xe = (
+), $e = (
   /** @type {(inputs: Controls_Screenshot_Buttonlabel1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Screenshot"
   )
-), Ke = (
+), De = (
   /** @type {(inputs: Controls_Screenshot_Buttonlabel1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Screenshot"
   )
-), Qe = (
+), Be = (
   /** @type {(inputs: Controls_Screenshot_Buttonlabel1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Screenshot"
   )
-), Je = (
+), Ue = (
   /** @type {((inputs?: Controls_Screenshot_Buttonlabel1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Screenshot_Buttonlabel1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
   ((n = {}, t = {}) => {
     const e = t.locale ?? h();
-    return e === "en" ? Xe() : e === "nl" ? Ke() : Qe();
+    return e === "en" ? $e() : e === "nl" ? De() : Be();
   })
-), tn = (
+), Ve = (
   /** @type {(inputs: Controls_Configurator_OpenInputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Configure"
   )
-), en = (
+), je = (
   /** @type {(inputs: Controls_Configurator_OpenInputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Configureren"
   )
-), nn = (
+), He = (
   /** @type {(inputs: Controls_Configurator_OpenInputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Konfigurieren"
   )
-), on = (
+), Ge = (
   /** @type {((inputs?: Controls_Configurator_OpenInputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Configurator_OpenInputs, { locale?: "en" | "nl" | "de" }, {}>} */
   ((n = {}, t = {}) => {
     const e = t.locale ?? h();
-    return e === "en" ? tn() : e === "nl" ? en() : nn();
+    return e === "en" ? Ve() : e === "nl" ? je() : He();
   })
-), sn = (
+), qe = (
   /** @type {(inputs: Controls_Configurator_CloseInputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Close"
   )
-), rn = (
+), Ze = (
   /** @type {(inputs: Controls_Configurator_CloseInputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Sluiten"
   )
-), an = (
+), We = (
   /** @type {(inputs: Controls_Configurator_CloseInputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Schließen"
   )
-), ln = (
+), Ye = (
   /** @type {((inputs?: Controls_Configurator_CloseInputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Configurator_CloseInputs, { locale?: "en" | "nl" | "de" }, {}>} */
   ((n = {}, t = {}) => {
     const e = t.locale ?? h();
-    return e === "en" ? sn() : e === "nl" ? rn() : an();
+    return e === "en" ? qe() : e === "nl" ? Ze() : We();
   })
-), cn = (
+), Xe = (
   /** @type {(inputs: Controls_Camera_ResetInputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Reset camera"
   )
-), un = (
+), Ke = (
   /** @type {(inputs: Controls_Camera_ResetInputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Camera resetten"
   )
-), dn = (
+), Qe = (
   /** @type {(inputs: Controls_Camera_ResetInputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Kamera zurücksetzen"
   )
-), hn = (
+), Je = (
   /** @type {((inputs?: Controls_Camera_ResetInputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Camera_ResetInputs, { locale?: "en" | "nl" | "de" }, {}>} */
   ((n = {}, t = {}) => {
     const e = t.locale ?? h();
-    return e === "en" ? cn() : e === "nl" ? un() : dn();
+    return e === "en" ? Xe() : e === "nl" ? Ke() : Qe();
   })
-), mn = (
+), tn = (
   /** @type {(inputs: Controls_Camera_Zoomin1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Zoom in"
   )
-), pn = (
+), en = (
   /** @type {(inputs: Controls_Camera_Zoomin1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Inzoomen"
   )
-), fn = (
+), nn = (
   /** @type {(inputs: Controls_Camera_Zoomin1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Hineinzoomen"
   )
-), gn = (
+), on = (
   /** @type {((inputs?: Controls_Camera_Zoomin1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Camera_Zoomin1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
   ((n = {}, t = {}) => {
     const e = t.locale ?? h();
-    return e === "en" ? mn() : e === "nl" ? pn() : fn();
+    return e === "en" ? tn() : e === "nl" ? en() : nn();
   })
-), bn = (
+), sn = (
   /** @type {(inputs: Controls_Camera_Zoomout1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Zoom out"
   )
-), vn = (
+), rn = (
   /** @type {(inputs: Controls_Camera_Zoomout1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Uitzoomen"
   )
-), yn = (
+), an = (
   /** @type {(inputs: Controls_Camera_Zoomout1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Herauszoomen"
   )
-), _n = (
+), ln = (
   /** @type {((inputs?: Controls_Camera_Zoomout1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Camera_Zoomout1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
   ((n = {}, t = {}) => {
     const e = t.locale ?? h();
-    return e === "en" ? bn() : e === "nl" ? vn() : yn();
+    return e === "en" ? sn() : e === "nl" ? rn() : an();
   })
-), Cn = (
+), cn = (
   /** @type {(inputs: Controls_Camera_Rotateleft1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Rotate left"
   )
-), wn = (
+), un = (
   /** @type {(inputs: Controls_Camera_Rotateleft1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Naar links draaien"
   )
-), kn = (
+), dn = (
   /** @type {(inputs: Controls_Camera_Rotateleft1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Nach links drehen"
   )
-), Sn = (
+), hn = (
   /** @type {((inputs?: Controls_Camera_Rotateleft1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Camera_Rotateleft1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
   ((n = {}, t = {}) => {
     const e = t.locale ?? h();
-    return e === "en" ? Cn() : e === "nl" ? wn() : kn();
+    return e === "en" ? cn() : e === "nl" ? un() : dn();
   })
-), An = (
+), mn = (
   /** @type {(inputs: Controls_Camera_Rotateright1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Rotate right"
   )
-), En = (
+), pn = (
   /** @type {(inputs: Controls_Camera_Rotateright1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Naar rechts draaien"
   )
-), xn = (
+), fn = (
   /** @type {(inputs: Controls_Camera_Rotateright1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Nach rechts drehen"
   )
-), Tn = (
+), gn = (
   /** @type {((inputs?: Controls_Camera_Rotateright1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Camera_Rotateright1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
   ((n = {}, t = {}) => {
     const e = t.locale ?? h();
-    return e === "en" ? An() : e === "nl" ? En() : xn();
+    return e === "en" ? mn() : e === "nl" ? pn() : fn();
   })
-), Rn = (
+), bn = (
   /** @type {(inputs: Controls_Camera_Tiltup1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Tilt up"
   )
-), On = (
+), vn = (
   /** @type {(inputs: Controls_Camera_Tiltup1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Omhoog kantelen"
   )
-), Nn = (
+), yn = (
   /** @type {(inputs: Controls_Camera_Tiltup1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Nach oben kippen"
   )
-), In = (
+), _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 ?? h();
-    return e === "en" ? Rn() : e === "nl" ? On() : Nn();
+    return e === "en" ? bn() : e === "nl" ? vn() : yn();
   })
-), Ln = (
+), wn = (
   /** @type {(inputs: Controls_Camera_Tiltdown1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Tilt down"
   )
-), Mn = (
+), Cn = (
   /** @type {(inputs: Controls_Camera_Tiltdown1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Omlaag kantelen"
   )
-), zn = (
+), kn = (
   /** @type {(inputs: Controls_Camera_Tiltdown1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Nach unten kippen"
   )
-), Pn = (
+), Sn = (
   /** @type {((inputs?: Controls_Camera_Tiltdown1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Camera_Tiltdown1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
   ((n = {}, t = {}) => {
     const e = t.locale ?? h();
-    return e === "en" ? Ln() : e === "nl" ? Mn() : zn();
+    return e === "en" ? wn() : e === "nl" ? Cn() : kn();
   })
-), Fn = (
+), En = (
   /** @type {(inputs: Commerce_Submit_BusyInputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Working…"
   )
-), $n = (
+), An = (
   /** @type {(inputs: Commerce_Submit_BusyInputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Bezig…"
   )
-), Dn = (
+), xn = (
   /** @type {(inputs: Commerce_Submit_BusyInputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Läuft…"
   )
-), Bn = (
+), Tn = (
   /** @type {((inputs?: Commerce_Submit_BusyInputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Commerce_Submit_BusyInputs, { locale?: "en" | "nl" | "de" }, {}>} */
   ((n = {}, t = {}) => {
     const e = t.locale ?? h();
-    return e === "en" ? Fn() : e === "nl" ? $n() : Dn();
+    return e === "en" ? En() : e === "nl" ? An() : xn();
   })
-), Un = (
+), Rn = (
   /** @type {(inputs: Commerce_Submit_SuccessInputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Done"
   )
-), Vn = (
+), In = (
   /** @type {(inputs: Commerce_Submit_SuccessInputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Gelukt"
   )
-), jn = (
+), On = (
   /** @type {(inputs: Commerce_Submit_SuccessInputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Fertig"
   )
-), Hn = (
+), Nn = (
   /** @type {((inputs?: Commerce_Submit_SuccessInputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Commerce_Submit_SuccessInputs, { locale?: "en" | "nl" | "de" }, {}>} */
   ((n = {}, t = {}) => {
     const e = t.locale ?? h();
-    return e === "en" ? Un() : e === "nl" ? Vn() : jn();
+    return e === "en" ? Rn() : e === "nl" ? In() : On();
   })
-), Gn = (
+), Ln = (
   /** @type {(inputs: Commerce_Submit_FailedInputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Failed"
   )
-), qn = (
+), Mn = (
   /** @type {(inputs: Commerce_Submit_FailedInputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Mislukt"
   )
-), Zn = (
+), zn = (
   /** @type {(inputs: Commerce_Submit_FailedInputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Fehlgeschlagen"
   )
-), Wn = (
+), Fn = (
   /** @type {((inputs?: Commerce_Submit_FailedInputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Commerce_Submit_FailedInputs, { locale?: "en" | "nl" | "de" }, {}>} */
   ((n = {}, t = {}) => {
     const e = t.locale ?? h();
-    return e === "en" ? Gn() : e === "nl" ? qn() : Zn();
+    return e === "en" ? Ln() : e === "nl" ? Mn() : zn();
   })
-);
-const Yn = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: 24,
-  height: 24,
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  "stroke-width": 2,
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round"
-};
-const _t = ([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 = _t(o);
-    i.appendChild(s);
-  }), i;
-}, Ct = (n, t = {}) => {
-  const i = {
-    ...Yn,
-    ...t
-  };
-  return _t(["svg", i, n]);
-};
-const Xn = [
-  [
-    "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 Kn = [
-  [
-    "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 wt = [["path", { d: "m6 9 6 6 6-6" }]];
-const Qn = [["path", { d: "m15 18-6-6 6-6" }]];
-const Jn = [["path", { d: "m9 18 6-6-6-6" }]];
-const ti = [["path", { d: "m18 15-6-6-6 6" }]];
-const ei = [
-  ["path", { d: "M15 3h6v6" }],
-  ["path", { d: "m21 3-7 7" }],
-  ["path", { d: "m3 21 7-7" }],
-  ["path", { d: "M9 21H3v-6" }]
-];
-const ni = [
-  ["path", { d: "m14 10 7-7" }],
-  ["path", { d: "M20 10h-6V4" }],
-  ["path", { d: "m3 21 7-7" }],
-  ["path", { d: "M4 14h6v6" }]
-];
-const ii = [
-  ["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 oi = [
-  ["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 si = [
-  ["path", { d: "M18 6 6 18" }],
-  ["path", { d: "m6 6 12 12" }]
-];
-const ri = [
-  ["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 ai = [
-  ["circle", { cx: "11", cy: "11", r: "8" }],
-  ["line", { x1: "21", x2: "16.65", y1: "21", y2: "16.65" }],
-  ["line", { x1: "8", x2: "14", y1: "11", y2: "11" }]
-];
-function y(n, { size: t = 20, strokeWidth: e = 1.75 } = {}) {
-  return Ct(n, { width: t, height: t, "stroke-width": e });
-}
-const g = {
-  ar: (n) => y(Xn, n),
-  fullscreen: (n) => y(ei, n),
-  exitFullscreen: (n) => y(ni, n),
-  screenshot: (n) => y(Kn, n),
-  tiltUp: (n) => y(ti, n),
-  tiltDown: (n) => y(wt, n),
-  rotateLeft: (n) => y(Qn, n),
-  rotateRight: (n) => y(Jn, n),
-  zoomIn: (n) => y(ri, n),
-  zoomOut: (n) => y(ai, n),
-  reset: (n) => y(ii, n),
-  configurator: (n) => y(oi, n),
-  close: (n) => y(si, n)
-};
-class b {
-  element;
-  constructor({ variant: t = "default", size: e = "default", label: i, icon: o, onClick: s, disabled: r = !1 } = {}) {
-    this.element = document.createElement("button"), this.element.className = `ui-btn ui-btn--${t} ui-btn--size-${e}`, i !== void 0 && (this.element.setAttribute("aria-label", i), this.element.title = i), o !== void 0 ? this.element.appendChild(o) : i !== void 0 && (this.element.textContent = i), s && this.element.addEventListener("click", s), this.element.disabled = r;
+), _ = {
+  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"
+  }
+}, Pn = _.fontFamily.sans.join(", ");
+class $n {
+  qrLib = null;
+  dialog = null;
+  async show(t) {
+    this.hide(), this.qrLib ??= await import("./browser-ey6Iih3j.js").then((o) => o.b);
+    const e = await this.qrLib.toDataURL(t, {
+      width: 256,
+      margin: 4,
+      errorCorrectionLevel: "M",
+      color: { dark: m.black, light: m.white }
+    });
+    this.dialog = new Qt({ onClose: () => {
+      this.dialog = null;
+    } }), Object.assign(this.dialog.card.element.style, {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: a[3],
+      fontFamily: Pn
+    }), this.dialog.card.element.appendChild(this.createText(pe(), {
+      fontSize: _.fontSize.base,
+      fontWeight: _.fontWeight.semibold,
+      color: m.neutral[900]
+    })), this.dialog.card.element.appendChild(this.createText(ve(), {
+      fontSize: _.fontSize.sm,
+      color: m.neutral[600]
+    })), this.dialog.card.element.appendChild(this.createQrImage(e)), this.dialog.card.element.appendChild(this.createText(Ce(), {
+      fontSize: _.fontSize.xs,
+      color: m.neutral[500]
+    }));
+    const i = new g({
+      variant: "outline",
+      label: Ae(),
+      onClick: () => {
+        this.hide();
+      }
+    });
+    this.dialog.card.element.appendChild(i.element), this.dialog.open();
   }
-  setIcon(t) {
-    const e = this.element.querySelector("svg");
-    e !== null ? e.replaceWith(t) : this.element.appendChild(t);
+  hide() {
+    this.dialog?.close(), this.dialog = null;
+  }
+  createText(t, e) {
+    const i = document.createElement("p");
+    return i.textContent = t, Object.assign(i.style, { margin: "0", textAlign: "center", ...e }), i;
+  }
+  createQrImage(t) {
+    const e = document.createElement("img");
+    return e.src = t, e.alt = "QR code", Object.assign(e.style, {
+      width: a[24],
+      height: a[24],
+      borderRadius: a[1]
+    }), e;
+  }
+}
+const x = _.fontFamily.sans.join(", "), Dn = `
+  --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);
+`, Bn = `
+:root { ${Dn} }
+
+/* ── Button ──────────────────────────────────────────────── */
+.ui-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border: 1px solid transparent;
+  border-radius: var(--radius);
+  font-family: ${x};
+  font-size: 0.875rem;
+  font-weight: 600;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: all 200ms;
+  flex-shrink: 0;
+}
+.ui-btn:active { transform: scale(0.98); }
+.ui-btn:disabled { opacity: 0.5; pointer-events: none; }
+.ui-btn svg { inline-size: 1rem; block-size: 1rem; pointer-events: none; flex-shrink: 0; }
+
+.ui-btn--default {
+  background: var(--primary);
+  color: var(--primary-foreground);
+  box-shadow: 0 1px 3px oklch(5% 0 0 / 20%);
+}
+.ui-btn--default:hover { background: oklch(10% 0 0); }
+
+.ui-btn--outline {
+  background: var(--background);
+  color: var(--foreground);
+  border-color: var(--border);
+  box-shadow: 0 1px 2px oklch(5% 0 0 / 8%);
+}
+.ui-btn--outline:hover { background: var(--accent); border-color: oklch(85% 0 0); }
+
+.ui-btn--secondary {
+  background: var(--secondary);
+  color: var(--secondary-foreground);
+  box-shadow: 0 1px 2px oklch(5% 0 0 / 8%);
+}
+.ui-btn--secondary:hover { background: oklch(88% 0 0); }
+
+.ui-btn--ghost { background: transparent; color: var(--foreground); }
+.ui-btn--ghost:hover { background: var(--accent); }
+
+.ui-btn--size-default { block-size: 2.25rem; padding: 0 1rem; }
+.ui-btn--size-sm { block-size: 2rem; padding: 0 0.75rem; border-radius: calc(var(--radius) - 0.125rem); }
+.ui-btn--size-lg { block-size: 2.5rem; padding: 0 1.5rem; }
+.ui-btn--size-icon { inline-size: 2.25rem; block-size: 2.25rem; padding: 0; }
+.ui-btn--size-icon-sm { inline-size: 2rem; block-size: 2rem; padding: 0; }
+.ui-btn--size-icon-lg { inline-size: 2.5rem; block-size: 2.5rem; padding: 0; }
+
+/* ── Toggle group ────────────────────────────────────────── */
+.ui-toggle-group { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
+
+.ui-toggle-group-item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  block-size: 2rem;
+  padding: 0 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--background);
+  color: var(--foreground);
+  font-family: ${x};
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 200ms;
+  box-shadow: 0 1px 2px oklch(5% 0 0 / 8%);
+}
+.ui-toggle-group-item:hover { background: var(--accent); border-color: oklch(85% 0 0); }
+.ui-toggle-group-item:active { transform: scale(0.98); }
+.ui-toggle-group-item:focus-visible {
+  outline: none;
+  border-color: var(--ring);
+  box-shadow: 0 0 0 3px oklch(5% 0 0 / 12%);
+}
+.ui-toggle-group-item[data-state="on"] {
+  background: var(--primary);
+  color: var(--primary-foreground);
+  border-color: var(--primary);
+}
+.ui-toggle-group-item[data-state="on"]:hover { background: oklch(10% 0 0); }
+
+/* ── Native select ───────────────────────────────────────── */
+.ui-native-select-wrap {
+  position: relative;
+  display: inline-flex;
+  min-inline-size: 8rem;
+}
+
+.ui-native-select {
+  display: block;
+  inline-size: 100%;
+  block-size: 2.25rem;
+  padding: 0 2.25rem 0 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--background);
+  appearance: none;
+  color: var(--foreground);
+  font-family: ${x};
+  font-size: 0.875rem;
+  font-weight: 400;
+  cursor: pointer;
+  transition: color 200ms, box-shadow 200ms, border-color 200ms;
+  box-shadow: 0 1px 2px oklch(5% 0 0 / 8%);
+}
+.ui-native-select:hover { border-color: oklch(85% 0 0); }
+.ui-native-select:focus-visible {
+  outline: none;
+  border-color: var(--ring);
+  box-shadow: 0 0 0 3px oklch(5% 0 0 / 12%);
+}
+
+.ui-native-select-icon {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: 0.625rem;
+  transform: translateY(-50%);
+  color: var(--muted-foreground);
+  pointer-events: none;
+}
+
+/* ── Annotation layer ───────────────────────────────────── */
+.vd-annotations-layer {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  pointer-events: none;
+  overflow: visible !important; /* override CSS2DRenderer inline style */
+}
+
+.vd-annotation-anchor {
+  position: relative;
+}
+
+.vd-annotation-marker {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.75rem;
+  block-size: 1.75rem;
+  border-radius: 50%;
+  border: 2px solid oklch(100% 0 0);
+  background: var(--primary);
+  color: var(--primary-foreground);
+  font-family: ${x};
+  font-size: 0.8125rem;
+  font-weight: 600;
+  cursor: pointer;
+  pointer-events: auto;
+  box-shadow: 0 2px 8px oklch(5% 0 0 / 20%);
+  transition: transform 100ms ease;
+  position: relative;
+}
+.vd-annotation-marker:hover { transform: scale(1.1); }
+.vd-annotation-marker:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
+.vd-annotation-popup {
+  position: absolute;
+  inset-block-end: calc(100% + 0.5rem);
+  inset-inline-start: 50%;
+  transform: translateX(-50%);
+  background: var(--background);
+  color: var(--foreground);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 0.75rem 1rem;
+  max-inline-size: 15rem;
+  box-shadow: 0 4px 6px oklch(5% 0 0 / 8%), 0 2px 4px oklch(5% 0 0 / 6%);
+  pointer-events: auto;
+  white-space: normal;
+}
+.vd-annotation-popup:focus { outline: none; }
+
+.vd-annotation-popup-close {
+  position: absolute;
+  inset-block-start: 0.375rem;
+  inset-inline-end: 0.375rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
+  padding: 0;
+  border: none;
+  border-radius: calc(var(--radius) - 4px);
+  background: transparent;
+  color: var(--muted-foreground);
+  cursor: pointer;
+  pointer-events: auto;
+}
+.vd-annotation-popup-close:hover {
+  color: var(--foreground);
+  background: var(--secondary);
+}
+.vd-annotation-popup-close:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 1px;
+}
+.vd-annotation-popup-close svg {
+  inline-size: 0.875rem;
+  block-size: 0.875rem;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .vd-annotation-popup {
+    animation: vd-popup-in 150ms ease;
   }
 }
-const m = {
-  semantic: {
-    // eslint-disable-next-line vd-custom/enforce-error-codes -- This is a hex color, not an error code
-    error: "#dc2626"
-  },
-  neutral: {
-    500: "#737373",
-    600: "#525252",
-    900: "#171717"
-  },
-  white: "#ffffff",
-  black: "#000000"
-}, a = {
-  0: "0",
-  0.5: "0.125rem",
-  // 2px
-  1: "0.25rem",
-  // 4px
-  1.5: "0.375rem",
-  // 6px
-  2: "0.5rem",
-  // 10px
-  3: "0.75rem",
-  // 14px
-  4: "1rem",
-  // 16px
-  5: "1.25rem",
-  // 20px
-  6: "1.5rem",
-  // 28px
-  8: "2rem",
-  // 32px
-  9: "2.25rem",
-  // 80px
-  24: "6rem"
-  // 96px
-};
-class li {
-  element;
-  constructor() {
-    this.element = document.createElement("div"), Object.assign(this.element.style, {
-      background: m.white,
-      borderRadius: a[3],
-      padding: a[6],
-      boxShadow: `0 ${a[2]} ${a[8]} oklch(0% 0 0 / 20%)`,
-      maxWidth: "20rem",
-      width: "100%"
+
+@keyframes vd-popup-in {
+  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
+  to { opacity: 1; transform: translateX(-50%) translateY(0); }
+}
+
+.vd-annotation-popup-title {
+  font-family: ${x};
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.25rem;
+  /* Keep the title clear of the absolutely positioned close button. */
+  padding-inline-end: 1.5rem;
+}
+
+.vd-annotation-popup-description {
+  font-family: ${x};
+  font-size: 0.8125rem;
+  font-weight: 400;
+  line-height: 1.125rem;
+  color: var(--muted-foreground);
+  margin-block-start: 0.25rem;
+}
+`;
+let et = !1;
+function Un() {
+  if (et || typeof document > "u")
+    return;
+  et = !0;
+  const n = document.createElement("style");
+  n.id = "vd-ui-vanilla", n.textContent = Bn, document.head.appendChild(n);
+}
+function Vn() {
+  return /* @__PURE__ */ new Date();
+}
+function jn(n) {
+  return n.toISOString();
+}
+function bt() {
+  return typeof navigator > "u" ? "" : navigator.userAgent;
+}
+function Hn() {
+  return typeof navigator > "u" ? !1 : navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;
+}
+function Gn() {
+  return /iPhone|iPad|iPod/i.test(bt()) || Hn();
+}
+function qn() {
+  return /Android/i.test(bt());
+}
+function Zn() {
+  return Gn() || qn();
+}
+class Wn {
+  constructor(t) {
+    this.send = t;
+  }
+  send;
+  setEnabled(t) {
+    this.send({
+      type: c.ANNOTATION_TOGGLE,
+      enabled: t
     });
   }
 }
-class ci {
-  constructor(t = {}) {
-    this.options = t, this.card = new li(), 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);
+class Yn {
+  constructor(t, e) {
+    this.value = t, this.attribute = e;
   }
-  close() {
-    this.backdrop.remove(), this.keyHandler !== null && (document.removeEventListener("keydown", this.keyHandler), this.keyHandler = null), this.options.onClose?.();
+  value;
+  attribute;
+  isSelectedValue = !1;
+  get isSelected() {
+    return this.isSelectedValue;
   }
-  createBackdrop() {
-    const t = document.createElement("div");
-    return Object.assign(t.style, {
-      position: "fixed",
-      inset: a[0],
-      background: "oklch(0% 0 0 / 50%)",
-      zIndex: "9999",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center"
-    }), t.addEventListener("click", (e) => {
-      e.target === t && this.close();
-    }), t;
+  setSelected(t) {
+    this.isSelectedValue = t;
   }
 }
-class ui {
-  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);
-    }
+const 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"
+};
+class f extends Error {
+  code;
+  constructor(t, e) {
+    super(t), this.name = "VirtualdisplayError", this.code = e;
   }
-  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");
-    }
+  static valueNotFound(t, e) {
+    return new f(
+      `Value "${e}" not found for attribute "${t}"`,
+      E.VALUE_NOT_FOUND
+    );
   }
-  onSelect(t) {
-    this.selectCallback = t;
+  static parentNotFound(t) {
+    return new f(
+      `Parent element not found: ${t}`,
+      E.PARENT_NOT_FOUND
+    );
+  }
+  static invalidParameter(t) {
+    return new f(t, E.INVALID_PARAMETER);
   }
 }
-class di {
-  element;
-  select;
-  constructor(t, e, i, o, s) {
-    this.select = document.createElement("select"), this.select.className = "ui-native-select", this.select.dataset.name = t, this.select.setAttribute("aria-label", i);
-    const r = document.createElement("option");
-    r.value = "", r.disabled = !0, r.textContent = i, this.select.appendChild(r);
-    let l = !1;
-    for (let u = 0; u < e.length; u++) {
-      const p = e[u], v = document.createElement("option");
-      v.value = p, v.textContent = s?.[u] ?? p, p === o && (v.selected = !0, l = !0), this.select.appendChild(v);
-    }
-    l || (r.selected = !0);
-    const d = Ct(wt, { 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);
+class Xn {
+  name;
+  defaultValue;
+  values;
+  onSelect;
+  onChangeCallback;
+  constructor(t) {
+    this.name = t.name, this.defaultValue = t.defaultValue, this.onSelect = t.onSelect, this.values = this.createValues(t.values);
   }
-  setSelected(t) {
-    this.select.value = t;
+  /**
+   * Select a value for this attribute
+   * @throws {VirtualdisplayError} When value not found
+   */
+  select(t) {
+    if (!this.values.has(t))
+      throw f.valueNotFound(this.name, t);
+    this.onSelect(this.name, t);
   }
-  onSelect(t) {
-    this.select.addEventListener("change", () => {
-      t(this.select.value);
-    });
+  getValues() {
+    return Array.from(this.values.values());
+  }
+  getValue(t) {
+    return this.values.get(t);
+  }
+  /** The currently selected value, or undefined before any selection lands. */
+  get selected() {
+    for (const t of this.values.values())
+      if (t.isSelected)
+        return t.value;
+  }
+  /**
+   * Register callback that fires when selection changes
+   * Receives the newly selected AttributeValue
+   */
+  onChange(t) {
+    this.onChangeCallback = t;
+  }
+  /**
+   * Update selection state from server mutation result
+   * Direct value comparison - no source/target translation
+   */
+  handleResult(t) {
+    let e;
+    for (const i of this.values.values()) {
+      const o = i.value === t;
+      i.setSelected(o), o && (e = i);
+    }
+    e !== void 0 && this.onChangeCallback !== void 0 && this.onChangeCallback(e);
+  }
+  createValues(t) {
+    const e = /* @__PURE__ */ new Map();
+    for (const i of t) {
+      const o = new Yn(i, this.name);
+      i === this.defaultValue && o.setSelected(!0), e.set(i, o);
+    }
+    return e;
   }
 }
-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"
+class Kn {
+  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 Xn(s));
+    }
+    this.onMutationFailed = i;
   }
-}, hi = _.fontFamily.sans.join(", ");
-class mi {
-  qrLib = null;
-  dialog = null;
-  async show(t) {
-    this.hide(), this.qrLib ??= await import("./browser-ey6Iih3j.js").then((o) => o.b);
-    const e = await this.qrLib.toDataURL(t, {
-      width: 256,
-      margin: 4,
-      errorCorrectionLevel: "M",
-      color: { dark: m.black, light: m.white }
-    });
-    this.dialog = new ci({ onClose: () => {
-      this.dialog = null;
-    } }), Object.assign(this.dialog.card.element.style, {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      gap: a[3],
-      fontFamily: hi
-    }), this.dialog.card.element.appendChild(this.createText(Ee(), {
-      fontSize: _.fontSize.base,
-      fontWeight: _.fontWeight.semibold,
-      color: m.neutral[900]
-    })), this.dialog.card.element.appendChild(this.createText(Oe(), {
-      fontSize: _.fontSize.sm,
-      color: m.neutral[600]
-    })), this.dialog.card.element.appendChild(this.createQrImage(e)), this.dialog.card.element.appendChild(this.createText(Me(), {
-      fontSize: _.fontSize.xs,
-      color: m.neutral[500]
-    }));
-    const i = new b({
-      variant: "outline",
-      label: $e(),
-      onClick: () => {
-        this.hide();
-      }
-    });
-    this.dialog.card.element.appendChild(i.element), this.dialog.open();
+  onMutationFailed;
+  get(t) {
+    return this.attributes.get(t);
   }
-  hide() {
-    this.dialog?.close(), this.dialog = null;
+  /** 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;
   }
-  createText(t, e) {
-    const i = document.createElement("p");
-    return i.textContent = t, Object.assign(i.style, { margin: "0", textAlign: "center", ...e }), i;
+  handleResults(t) {
+    for (const e of t) {
+      if (!e.success) {
+        this.onMutationFailed?.(e.name, e.value);
+        continue;
+      }
+      this.get(e.name)?.handleResult(e.value);
+    }
   }
-  createQrImage(t) {
-    const e = document.createElement("img");
-    return e.src = t, e.alt = "QR code", Object.assign(e.style, {
-      width: a[24],
-      height: a[24],
-      borderRadius: a[1]
-    }), e;
+  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 x = _.fontFamily.sans.join(", "), pi = `
-  --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);
-`, fi = `
-:root { ${pi} }
-
-/* ── 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%);
+function Qn(n) {
+  const t = new Date(n.timestamp).toLocaleTimeString("en-GB", { hour12: !1 }), e = n.level.toUpperCase().padEnd(5), i = n.trace_id?.slice(0, 8) ?? "--------", o = n.msg, s = ["timestamp", "level", "msg", "service", "trace_id", "span_id"], r = Object.entries(n).filter(([l]) => !s.includes(l)).map(([l, d]) => `${l}=${JSON.stringify(d)}`).join(" ");
+  return `${t} ${e} [${i}] ${o}${r ? " " + r : ""}`;
 }
-.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%);
+function Jn(n) {
+  return JSON.stringify(n);
 }
-.ui-toggle-group-item:hover { background: var(--accent); border-color: oklch(85% 0 0); }
-.ui-toggle-group-item:active { transform: scale(0.98); }
-.ui-toggle-group-item:focus-visible {
-  outline: none;
-  border-color: var(--ring);
-  box-shadow: 0 0 0 3px oklch(5% 0 0 / 12%);
+function ti(n, t) {
+  const e = t ? Qn(n) : Jn(n);
+  n.level === "error" ? console.error(e) : n.level === "warn" ? console.warn(e) : console.log(e);
 }
-.ui-toggle-group-item[data-state="on"] {
-  background: var(--primary);
-  color: var(--primary-foreground);
-  border-color: var(--primary);
+function vt(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 ? vt(n.cause, t + 1) : String(n.cause)), e;
 }
-.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;
+function ei(n) {
+  const t = {};
+  for (const [e, i] of Object.entries(n))
+    t[e] = i instanceof Error ? vt(i) : i;
+  return t;
 }
-
-.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%);
+class ni {
+  constructor(t) {
+    this.config = t;
+  }
+  config;
+  /**
+   * Log at specified level with optional attributes.
+   */
+  log(t, e, i = {}) {
+    const o = this.config.traceProvider?.() ?? {}, s = {
+      timestamp: jn(Vn()),
+      level: t,
+      msg: e,
+      service: this.config.service,
+      ...o,
+      ...ei(i)
+    };
+    ti(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);
+  }
 }
-.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%);
+function yt(n, t) {
+  const e = t?.isDev !== void 0 ? t.isDev : typeof process < "u" ? process.env.NODE_ENV !== "production" : !0;
+  return new ni({ service: n, isDev: e, traceProvider: t?.traceProvider });
 }
-
-.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;
+function O(n) {
+  if (n !== void 0)
+    return typeof n == "object" && n !== null && !Array.isArray(n) && !(n instanceof Error) ? n : n instanceof Error ? { error: n.message } : { value: n };
 }
-
-/* ── 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 */
+function _t(n) {
+  return {
+    debug: (t, e) => n.debug(t, O(e)),
+    info: (t, e) => n.info(t, O(e)),
+    warn: (t, e) => n.warn(t, O(e)),
+    error: (t, e) => n.error(t, O(e))
+  };
 }
-
-.vd-annotation-anchor {
-  position: relative;
+let wt = !1, w = _t(yt("client", { isDev: !1 }));
+function ii() {
+  wt = !0, w = _t(yt("client", { isDev: !0 }));
 }
-
-.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;
+function Gi() {
+  return wt;
 }
-.vd-annotation-marker:hover { transform: scale(1.1); }
-.vd-annotation-marker:focus-visible {
-  outline: 2px solid var(--ring);
-  outline-offset: 2px;
+class oi {
+  constructor(t, e) {
+    this.send = t, this.onMutationFailed = e;
+  }
+  send;
+  onMutationFailed;
+  registry;
+  pendingCallbacks = [];
+  /**
+   * Handle incoming MAPPING message from server
+   */
+  handleMappingReceived(t) {
+    w.debug("Initializing from server mapping", {
+      attributeCount: t.attributes.length
+    }), this.registry = new Kn(
+      t.attributes,
+      (e, i) => this.sendMutation(e, i),
+      this.onMutationFailed
+    ), this.replayPendingCallbacks();
+  }
+  handleMutationResult(t) {
+    this.registry?.handleResults(t.results);
+  }
+  /**
+   * Select a value for an attribute - sends mutation to server.
+   * Can be called before the mapping arrives — the mutation is sent immediately
+   * and the messenger's publisher queue holds it until the iframe is ready.
+   */
+  select(t, e) {
+    this.sendMutation([{ name: t, value: e }], !1);
+  }
+  getValues(t) {
+    return this.registry?.get(t)?.getValues() ?? [];
+  }
+  getValue(t, e) {
+    return this.registry?.get(t)?.getValue(e);
+  }
+  /**
+   * Register onChange callback for an attribute.
+   * Buffers the callback if the mapping hasn't arrived yet.
+   */
+  onChange(t, e) {
+    if (this.registry === void 0) {
+      this.pendingCallbacks.push({ name: t, callback: e });
+      return;
+    }
+    const i = this.registry.get(t);
+    if (i === void 0) {
+      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() ?? {};
+  }
+  get hasMapping() {
+    return this.registry !== void 0;
+  }
+  sendMutation(t, e) {
+    const i = {
+      type: c.MUTATION,
+      mutations: t,
+      isInitial: e
+    };
+    this.send(i);
+  }
+  replayPendingCallbacks() {
+    for (const { name: t, callback: e } of this.pendingCallbacks) {
+      const i = this.registry?.get(t);
+      i === void 0 && w.warn(`onChange: attribute "${t}" not found — buffered callback will not fire`), i?.onChange(e);
+    }
+    this.pendingCallbacks.length = 0;
+  }
+}
+class si {
+  constructor(t) {
+    this.send = t;
+  }
+  send;
+  commands = [];
+  /**
+   * Rotate camera horizontally
+   * @param degrees - Absolute rotation in degrees (0 = front view)
+   * @throws VirtualdisplayError if value is not a finite number
+   */
+  rotate(t) {
+    return this.validateFiniteNumber(t, "rotate"), this.commands.push({ action: "rotate", value: t }), this;
+  }
+  /**
+   * Tilt camera vertically
+   * @param degrees - Absolute tilt in degrees (0 = top view, 90 = horizontal)
+   * @throws VirtualdisplayError if value is not a finite number
+   */
+  tilt(t) {
+    return this.validateFiniteNumber(t, "tilt"), this.commands.push({ action: "tilt", value: t }), this;
+  }
+  /**
+   * Zoom camera
+   * @param percentage - Zoom percentage (100 = normal, >100 = zoom in, <100 = zoom out)
+   * @throws VirtualdisplayError if value is not a finite number
+   */
+  zoom(t) {
+    return this.validateFiniteNumber(t, "zoom"), this.commands.push({ action: "zoom", value: t }), this;
+  }
+  /**
+   * Execute accumulated camera commands
+   * @throws VirtualdisplayError if no commands have been accumulated
+   */
+  set() {
+    if (this.commands.length === 0)
+      throw f.invalidParameter(
+        "No camera commands to execute. Call rotate(), tilt(), or zoom() before set()."
+      );
+    const t = {
+      type: c.CAMERA,
+      commands: this.commands
+    };
+    this.send(t), this.commands = [];
+  }
+  validateFiniteNumber(t, e) {
+    if (!Number.isFinite(t))
+      throw f.invalidParameter(
+        `${e}() requires a finite number, got ${String(t)}`
+      );
+  }
+  /**
+   * Reset camera to initial position
+   * This is not chainable and executes immediately
+   */
+  reset() {
+    const t = {
+      type: c.CAMERA,
+      commands: [{ action: "reset" }]
+    };
+    this.send(t);
+  }
+}
+class ri {
+  state;
+  limitsState;
+  changeCallbacks = [];
+  constructor() {
+    this.state = {
+      rotation: 0,
+      tilt: 0,
+      zoom: 100
+    };
+  }
+  /**
+   * Get current rotation in degrees
+   */
+  get rotation() {
+    return this.state.rotation;
+  }
+  /**
+   * Get current tilt in degrees
+   */
+  get tilt() {
+    return this.state.tilt;
+  }
+  /**
+   * Get current zoom percentage
+   */
+  get zoom() {
+    return this.state.zoom;
+  }
+  /**
+   * Subscribe to camera position changes.
+   * Also fires when limits are applied via applyLimits() so components
+   * can re-evaluate disabled states without a separate callback.
+   */
+  onChange(t) {
+    this.changeCallbacks.push(t);
+  }
+  /**
+   * Current camera movement limits (set from CONFIG message).
+   * Undefined until the server sends limits in its CONFIG payload.
+   */
+  get limits() {
+    return this.limitsState;
+  }
+  /**
+   * Apply camera limits received from the server CONFIG message.
+   * Fires onChange callbacks so button disabled states update immediately.
+   */
+  applyLimits(t) {
+    this.limitsState = t;
+    const e = { rotation: this.rotation, tilt: this.tilt, zoom: this.zoom };
+    for (const i of this.changeCallbacks)
+      i(e);
+  }
+  /**
+   * Handle incoming camera position message from server
+   */
+  handlePositionUpdate(t) {
+    this.update(t.transforms);
+  }
+  /**
+   * Update camera position from server transforms
+   */
+  update(t) {
+    let e = !1;
+    for (const i of t)
+      switch (i.type) {
+        case "rotation":
+          this.state.rotation = i.value, e = !0;
+          break;
+        case "tilt":
+          this.state.tilt = i.value, e = !0;
+          break;
+        case "zoom":
+          this.state.zoom = i.value, e = !0;
+          break;
+      }
+    if (e) {
+      const i = {
+        rotation: this.rotation,
+        tilt: this.tilt,
+        zoom: this.zoom
+      };
+      for (const o of this.changeCallbacks)
+        o(i);
+    }
+  }
 }
-
-.vd-annotation-popup {
-  position: absolute;
-  inset-block-end: calc(100% + 0.5rem);
-  inset-inline-start: 50%;
-  transform: translateX(-50%);
-  background: var(--background);
-  color: var(--foreground);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 0.75rem 1rem;
-  max-inline-size: 15rem;
-  box-shadow: 0 4px 6px oklch(5% 0 0 / 8%), 0 2px 4px oklch(5% 0 0 / 6%);
-  pointer-events: auto;
-  white-space: normal;
+function ai(n, t) {
+  const e = n.filter((s) => li(s, t));
+  if (e.length === 0)
+    return;
+  const i = Math.max(...e.map(nt)), o = e.filter((s) => nt(s) === i);
+  return o.length === 1 ? o[0] : void 0;
 }
-.vd-annotation-popup:focus { outline: none; }
-
-.vd-annotation-popup-close {
-  position: absolute;
-  inset-block-start: 0.375rem;
-  inset-inline-end: 0.375rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: 1.25rem;
-  block-size: 1.25rem;
-  padding: 0;
-  border: none;
-  border-radius: calc(var(--radius) - 4px);
-  background: transparent;
-  color: var(--muted-foreground);
-  cursor: pointer;
-  pointer-events: auto;
+function li(n, t) {
+  return Object.entries(n.attributes).every(([e, i]) => t[e] === i);
 }
-.vd-annotation-popup-close:hover {
-  color: var(--foreground);
-  background: var(--secondary);
+function nt(n) {
+  return Object.keys(n.attributes).length;
 }
-.vd-annotation-popup-close:focus-visible {
-  outline: 2px solid var(--ring);
-  outline-offset: 1px;
+class ci {
+  constructor(t, e) {
+    this.dispatchChange = t, this.dispatchSubmit = e;
+  }
+  dispatchChange;
+  dispatchSubmit;
+  pricing;
+  selection = {};
+  resolved;
+  changeCallbacks = [];
+  renderCallbacks = [];
+  submitCallback;
+  submitDefaultLabel;
+  /** The resolved configuration, or undefined when nothing matches. */
+  get current() {
+    return this.resolved;
+  }
+  /** The VAT label for bare embeds (e.g. "incl. btw"), or undefined without pricing. */
+  get vatDisplay() {
+    return this.pricing?.vatDisplay;
+  }
+  /**
+   * The CTA label: the customer's `button_label`, or the adapter's `defaultLabel`
+   * when that is empty. Undefined when neither is set — a button must know what
+   * it says, so the CTA does not render.
+   */
+  get buttonLabel() {
+    const t = this.pricing?.buttonLabel;
+    if (t != null && t !== "")
+      return t;
+    if (this.submitDefaultLabel !== void 0 && this.submitDefaultLabel !== "")
+      return this.submitDefaultLabel;
+  }
+  /**
+   * Whether the current configuration may be submitted: a handler is registered
+   * and the configuration is either price-less or an `available` priced one. The
+   * CTA's visibility ({@link submitEnabled}) layers a label requirement on top of
+   * this; a programmatic `submit()` does not need a label.
+   */
+  get submittable() {
+    return this.submitCallback === void 0 ? !1 : this.pricing === void 0 ? !0 : this.resolved?.availability === "available";
+  }
+  /**
+   * Whether the CTA should render: the configuration is submittable and a label
+   * exists. A button must say something, so an empty label hides the CTA rather
+   * than rendering blank.
+   */
+  get submitEnabled() {
+    return this.submittable && this.buttonLabel !== void 0;
+  }
+  /**
+   * Subscribe to configuration changes. Fires after every selection change with
+   * the resolved configuration, including undefined when nothing matches.
+   */
+  onChange(t) {
+    this.changeCallbacks.push(t);
+  }
+  /**
+   * Register the submit handler the CTA hands the configuration to. Registering
+   * one is what switches the button on (capability driven). `defaultLabel` fills
+   * in when the customer authored no button label.
+   */
+  onSubmit(t, e) {
+    this.submitCallback = t, this.submitDefaultLabel = e?.defaultLabel, this.notifyRender();
+  }
+  /**
+   * Subscribe the built-in UI to re-render the price + CTA. Fires on every
+   * resolve and when a submit handler is registered (which can switch the button
+   * on without a configuration change). Separate from `onChange`, which stays the
+   * host-facing, mutation-driven contract. Returns a disposer.
+   */
+  onRender(t) {
+    return this.renderCallbacks.push(t), () => {
+      const e = this.renderCallbacks.indexOf(t);
+      e !== -1 && this.renderCallbacks.splice(e, 1);
+    };
+  }
+  /**
+   * Hand the current configuration to the registered handler and fire the
+   * bubbling `vd:configuration-submit` event. No-op without a handler or a
+   * resolved configuration. Returns the handler's promise so the caller can
+   * reflect the result (bezig / gelukt / mislukt).
+   */
+  async submit() {
+    if (!this.submittable)
+      return;
+    const t = this.resolved !== void 0 ? { attributes: this.resolved.attributes, reference: this.resolved.reference } : { attributes: { ...this.selection }, reference: "" };
+    this.dispatchSubmit(t), await this.submitCallback?.(t);
+  }
+  /** Called by the client when a PRICING message arrives from the viewer. */
+  handlePricingReceived(t) {
+    this.pricing = t, this.recompute();
+  }
+  /** Called by the client after every mutation result, with the full selection. */
+  handleSelectionChanged(t) {
+    this.selection = t, this.recompute();
+  }
+  recompute() {
+    this.resolved = this.resolve();
+    for (const t of this.changeCallbacks)
+      t(this.resolved);
+    this.dispatchChange(this.resolved), this.notifyRender();
+  }
+  notifyRender() {
+    for (const t of this.renderCallbacks)
+      t();
+  }
+  resolve() {
+    if (this.pricing === void 0)
+      return;
+    const t = ai(this.pricing.rules, this.selection);
+    if (!(t === void 0 || t.availability === St.HIDDEN))
+      return {
+        attributes: { ...this.selection },
+        reference: t.reference,
+        price: t.priceCents,
+        currency: this.pricing.currency,
+        availability: t.availability
+      };
+  }
 }
-.vd-annotation-popup-close svg {
-  inline-size: 0.875rem;
-  block-size: 0.875rem;
+class ui {
+  constructor(t, e) {
+    this.send = t, this.dispatch = e;
+  }
+  send;
+  dispatch;
+  focused = null;
+  attributes = [];
+  changeCallbacks = [];
+  /** The focused component name, or null in overview. */
+  get current() {
+    return this.focused;
+  }
+  /**
+   * Focus a component by name. Sends a focus message to the viewer.
+   * @throws VirtualdisplayError if component is not a non-empty string
+   */
+  set(t) {
+    if (typeof t != "string" || t.length === 0)
+      throw f.invalidParameter(
+        `set() requires a non-empty component name, got ${String(t)}`
+      );
+    this.send({ type: c.FOCUS, action: Y.FOCUS, component: t });
+  }
+  /** Return to the overview — unfocus the current component. */
+  clear() {
+    this.send({ type: c.FOCUS, action: Y.UNFOCUS });
+  }
+  /**
+   * Subscribe to focus changes. The callback fires with the focus state when a
+   * component is focused, and with null when returning to overview.
+   */
+  onChange(t) {
+    this.changeCallbacks.push(t);
+  }
+  /** Called by the client when a FocusStateMessage is received from the viewer. */
+  handleStateReceived(t) {
+    t.state === kt.FOCUSED && t.component !== void 0 ? (this.focused = t.component, this.attributes = t.attributes ?? []) : (this.focused = null, this.attributes = []);
+    const e = this.focused !== null ? { component: this.focused, attributes: this.attributes } : null;
+    for (const i of this.changeCallbacks)
+      i(e);
+    this.dispatch(e);
+  }
 }
-
-@media (prefers-reduced-motion: no-preference) {
-  .vd-annotation-popup {
-    animation: vd-popup-in 150ms ease;
+class di {
+  constructor(t) {
+    this.filename = t;
+  }
+  filename;
+  developedCallbacks = /* @__PURE__ */ new Set();
+  errorCallbacks = /* @__PURE__ */ new Set();
+  developed = !1;
+  failed = !1;
+  photoData = null;
+  /**
+   * Register a callback for when the photo is developed
+   * If the photo is already developed, the callback is called immediately
+   *
+   * @param callback Function to call with photo data
+   * @returns This Photo instance for chaining
+   */
+  onDeveloped(t) {
+    return this.developed && this.photoData !== null ? (t(this.photoData), this) : (this.developedCallbacks.add(t), this);
+  }
+  /**
+   * Register a callback for when the photo capture fails
+   *
+   * @param callback Function to call with error
+   * @returns This Photo instance for chaining
+   */
+  onError(t) {
+    return this.errorCallbacks.add(t), this;
+  }
+  /**
+   * Get the filename for this photo
+   */
+  getFilename() {
+    return this.filename;
+  }
+  /**
+   * Mark the photo as developed and notify all callbacks
+   * This method is called by Snapshot when the photo data arrives from the server
+   */
+  develop(t) {
+    this.developed || this.failed || (this.photoData = t, this.developed = !0, this.developedCallbacks.forEach((e) => {
+      e(this.photoData);
+    }), this.developedCallbacks.clear(), this.errorCallbacks.clear());
+  }
+  /**
+   * Mark the photo as failed and notify error callbacks
+   */
+  fail(t) {
+    this.developed || this.failed || (this.failed = !0, this.errorCallbacks.forEach((e) => {
+      e(t);
+    }), this.developedCallbacks.clear(), this.errorCallbacks.clear());
   }
 }
-
-@keyframes vd-popup-in {
-  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
-  to { opacity: 1; transform: translateX(-50%) translateY(0); }
-}
-
-.vd-annotation-popup-title {
-  font-family: ${x};
-  font-size: 0.875rem;
-  font-weight: 600;
-  line-height: 1.25rem;
-  /* Keep the title clear of the absolutely positioned close button. */
-  padding-inline-end: 1.5rem;
-}
-
-.vd-annotation-popup-description {
-  font-family: ${x};
-  font-size: 0.8125rem;
-  font-weight: 400;
-  line-height: 1.125rem;
-  color: var(--muted-foreground);
-  margin-block-start: 0.25rem;
+const it = 3e4;
+class hi {
+  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 di(t), i = setTimeout(() => {
+      this.pendingPhotos.delete(t), w.warn("Snapshot timed out", { filename: t }), e.fail(new f(
+        `Snapshot timed out: the viewer did not respond within ${it}ms`,
+        E.SNAPSHOT_FAILED
+      ));
+    }, it);
+    return this.pendingPhotos.set(t, { photo: e, timeout: i }), this.send({
+      type: c.SNAPSHOT,
+      filename: t
+    }), e;
+  }
+  /**
+   * Handle incoming snapshot result from server
+   * Matches the message to a pending photo by filename, then develops or fails it
+   */
+  handleSnapshotResult(t) {
+    const e = this.pendingPhotos.get(t.filename);
+    if (e === void 0) {
+      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 f(t.error, E.SNAPSHOT_FAILED));
+      return;
+    }
+    t.data !== void 0 && i.develop({ filename: t.filename, data: t.data });
+  }
+  /**
+   * Fail any pending photos and forget them. Called from client destroy
+   * so callers awaiting onError() see a deterministic outcome instead of
+   * leaking captures whose results will never arrive.
+   */
+  clear() {
+    if (this.pendingPhotos.size === 0)
+      return;
+    const t = new f(
+      "Client destroyed before snapshot completed",
+      E.SNAPSHOT_FAILED
+    );
+    for (const { photo: e, timeout: i } of this.pendingPhotos.values())
+      clearTimeout(i), e.fail(t);
+    this.pendingPhotos.clear();
+  }
+  /**
+   * Validate filename has a valid image extension
+   */
+  validateFilename(t) {
+    if (t === "" || typeof t != "string")
+      throw new f(
+        "Filename must be a non-empty string",
+        E.INVALID_PARAMETER
+      );
+    if (!this.validExtensions.some(
+      (i) => t.toLowerCase().endsWith(i)
+    ))
+      throw new f(
+        `Invalid filename: "${t}". Filename must end with one of: ${this.validExtensions.join(", ")}`,
+        E.INVALID_PARAMETER
+      );
+    if (t.includes("..") || t.includes("/") || t.includes("\\"))
+      throw new f(
+        'Filename cannot contain path separators or ".."',
+        E.INVALID_PARAMETER
+      );
+  }
 }
-`;
-let ot = !1;
-function gi() {
-  if (ot || typeof document > "u")
-    return;
-  ot = !0;
-  const n = document.createElement("style");
-  n.id = "vd-ui-vanilla", n.textContent = fi, document.head.appendChild(n);
+class mi {
+  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);
+    };
+  }
 }
-function st(n) {
+function y(n, { size: t = 20, strokeWidth: e = 1.75 } = {}) {
+  return ct(n, { width: t, height: t, "stroke-width": e });
+}
+const b = {
+  ar: (n) => y(Dt, n),
+  fullscreen: (n) => y(Ht, n),
+  exitFullscreen: (n) => y(Gt, n),
+  screenshot: (n) => y(Bt, n),
+  tiltUp: (n) => y(jt, n),
+  tiltDown: (n) => y(ut, n),
+  rotateLeft: (n) => y(Ut, n),
+  rotateRight: (n) => y(Vt, n),
+  zoomIn: (n) => y(Yt, n),
+  zoomOut: (n) => y(Xt, n),
+  reset: (n) => y(qt, n),
+  configurator: (n) => y(Zt, n),
+  close: (n) => y(Wt, n)
+};
+function ot(n) {
   const t = Math.max(0, Math.min(1, n));
   return t * t * (3 - 2 * t);
 }
-function bi(n, t, e, i, o, s) {
-  const [r, l, d] = n, u = Math.cos(t), p = Math.sin(t), v = u * r + p * d, E = -p * r + u * d, S = Math.cos(e), k = Math.sin(e), R = S * l - k * E, M = k * l + S * E, Y = 0.55;
-  return [i + v * s * Y, o - R * s * Y, M];
+function pi(n, t, e, i, o, s) {
+  const [r, l, d] = n, u = Math.cos(t), p = Math.sin(t), v = u * r + p * d, A = -p * r + u * d, S = Math.cos(e), C = Math.sin(e), R = S * l - C * A, M = C * l + S * A, W = 0.55;
+  return [i + v * s * W, o - R * s * W, M];
 }
-function vi(n, t, e) {
+function fi(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 yi(n, t, e, i, o) {
+function gi(n, t, e, i, o) {
   const s = t(e), r = t(i), l = [
     s[0] + (r[0] - s[0]) * o,
     s[1] + (r[1] - s[1]) * o,
     s[2]
   ];
-  vi(n, s, l);
+  fi(n, s, l);
 }
-const z = [-1, -1, 1], P = [1, -1, 1], F = [1, -1, -1], $ = [-1, -1, -1], D = [-1, 1, 1], B = [1, 1, 1], U = [1, 1, -1], V = [-1, 1, -1], rt = [
-  [z, P],
-  [P, F],
-  [F, $],
+const z = [-1, -1, 1], F = [1, -1, 1], P = [1, -1, -1], $ = [-1, -1, -1], D = [-1, 1, 1], B = [1, 1, 1], U = [1, 1, -1], V = [-1, 1, -1], st = [
+  [z, F],
+  [F, P],
+  [P, $],
   [$, z],
   [z, D],
-  [P, B],
-  [F, U],
+  [F, B],
+  [P, U],
   [$, V],
   [D, B],
   [B, U],
   [U, V],
   [V, D]
-], _i = 400, at = '-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif';
-function Ci() {
+], bi = 400, rt = '-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif';
+function vi() {
   const n = document.createElement("div");
   Object.assign(n.style, {
     position: "absolute",
@@ -2429,16 +2345,16 @@ function Ci() {
     fontWeight: "400",
     color: "#000",
     fontVariantNumeric: "tabular-nums",
-    fontFamily: at
+    fontFamily: rt
   });
   const o = document.createElement("span");
   return Object.assign(o.style, {
     fontSize: "13px",
     color: "#000",
-    fontFamily: at
-  }), o.textContent = yt(), e.appendChild(i), e.appendChild(o), n.appendChild(t), n.appendChild(e), { overlay: n, canvas: t, pctEl: i, phaseEl: o };
+    fontFamily: rt
+  }), o.textContent = gt(), e.appendChild(i), e.appendChild(o), n.appendChild(t), n.appendChild(e), { overlay: n, canvas: t, pctEl: i, phaseEl: o };
 }
-class wi {
+class yi {
   overlay;
   canvas;
   ctx;
@@ -2451,17 +2367,17 @@ class wi {
   visible = !1;
   constructor(t, e = {}) {
     this.startTime = performance.now();
-    const i = Ci();
+    const i = vi();
     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 ?? _i;
+    const o = e.showDelay ?? bi;
     this.showTimerId = setTimeout(() => {
       this.reveal();
     }, o);
   }
   get loadingTexts() {
     return {
-      downloading: yt(),
-      rendering: Ye()
+      downloading: gt(),
+      rendering: Pe()
     };
   }
   updateProgress(t, e) {
@@ -2514,20 +2430,20 @@ class wi {
       return;
     const t = this.canvas.width / Math.min(devicePixelRatio, 2), e = this.canvas.height / Math.min(devicePixelRatio, 2), i = (performance.now() - this.startTime) / 1e3;
     this.ctx.fillStyle = "#fff", this.ctx.fillRect(0, 0, t, e);
-    const o = t / 2, s = e * 0.44, r = Math.min(t, e) * 0.08, l = 0.785, d = 0.615, u = (k) => bi(k, l, d, o, s, r), p = 6, v = i % p / p, E = rt.length;
+    const o = t / 2, s = e * 0.44, r = Math.min(t, e) * 0.08, l = 0.785, d = 0.615, u = (C) => pi(C, l, d, o, s, r), p = 6, v = i % p / p, A = st.length;
     let S;
-    v < 0.35 ? S = st(v / 0.35) * E : v < 0.55 ? S = E : v < 0.9 ? S = (1 - st((v - 0.55) / 0.35)) * E : S = 0, this.ctx.shadowBlur = 5, this.ctx.shadowColor = "rgba(30,30,30,0.08)";
-    for (let k = 0; k < E && !(k >= S); k++) {
-      const R = rt[k];
+    v < 0.35 ? S = ot(v / 0.35) * A : v < 0.55 ? S = A : v < 0.9 ? S = (1 - ot((v - 0.55) / 0.35)) * A : S = 0, this.ctx.shadowBlur = 5, this.ctx.shadowColor = "rgba(30,30,30,0.08)";
+    for (let C = 0; C < A && !(C >= S); C++) {
+      const R = st[C];
       if (R === void 0)
         continue;
-      const M = Math.min(1, S - k);
-      yi(this.ctx, u, R[0], R[1], M);
+      const M = Math.min(1, S - C);
+      gi(this.ctx, u, R[0], R[1], M);
     }
     this.ctx.shadowBlur = 0;
   }
 }
-class ki {
+class _i {
   constructor(t) {
     this.options = t, this.element = document.createElement("div"), Object.assign(this.element.style, { display: "flex", gap: "0.375rem" }), this.onFullscreenChange = () => {
       this.setFullscreenIcon(document.fullscreenElement !== null);
@@ -2539,7 +2455,7 @@ class ki {
   fullscreenBtn = null;
   onFullscreenChange;
   setFullscreenIcon(t) {
-    this.fullscreenBtn !== null && this.fullscreenBtn.setIcon(t ? g.exitFullscreen() : g.fullscreen());
+    this.fullscreenBtn !== null && this.fullscreenBtn.setIcon(t ? b.exitFullscreen() : b.fullscreen());
   }
   syncButton(t, e, i) {
     if (e && t === null) {
@@ -2549,19 +2465,19 @@ class ki {
     return !e && t !== null ? (t.element.remove(), null) : t;
   }
   applySettings(t) {
-    this.arBtn = this.syncButton(this.arBtn, t.ar !== !1 && this.options.onAr !== void 0, () => new b({
+    this.arBtn = this.syncButton(this.arBtn, t.ar !== !1 && this.options.onAr !== void 0, () => new g({
       variant: "outline",
       size: "icon",
-      label: we(),
-      icon: g.ar(),
+      label: ue(),
+      icon: b.ar(),
       onClick: () => {
         this.options.onAr?.();
       }
-    })), this.fullscreenBtn = this.syncButton(this.fullscreenBtn, t.fullscreen !== !1 && this.options.onFullscreen !== void 0, () => new b({
+    })), this.fullscreenBtn = this.syncButton(this.fullscreenBtn, t.fullscreen !== !1 && this.options.onFullscreen !== void 0, () => new g({
       variant: "outline",
       size: "icon",
-      label: Ve(),
-      icon: g.fullscreen(),
+      label: Ie(),
+      icon: b.fullscreen(),
       onClick: () => {
         this.options.onFullscreen?.();
       }
@@ -2581,9 +2497,9 @@ class L {
       targetTilt: e.tilt,
       targetZoom: e.zoom,
       thetaOffset: 0
-    }, o = Si(t, e, i);
+    }, o = wi(t, e, i);
     e.onChange((s) => {
-      i.targetRotation = s.rotation - i.thetaOffset, i.targetTilt = s.tilt, i.targetZoom = s.zoom, Ai(o, e, s);
+      i.targetRotation = s.rotation - i.thetaOffset, i.targetTilt = s.tilt, i.targetZoom = s.zoom, Ci(o, e, s);
     }), this.element.appendChild(L.buildZoom(o.zoomOut, o.zoomIn)), this.element.appendChild(L.buildDpad(o.tiltUp, o.rotateLeft, o.reset, o.rotateRight, o.tiltDown));
   }
   static buildZoom(t, e) {
@@ -2604,7 +2520,7 @@ class L {
     return r;
   }
 }
-function Si(n, t, e) {
+function wi(n, t, e) {
   const i = (r) => Math.max(t.limits?.minZoom ?? 1, Math.min(t.limits?.maxZoom ?? 1 / 0, r)), o = (r) => {
     const l = t.limits?.minRotate, d = t.limits?.maxRotate;
     return l !== void 0 || d !== void 0 ? Math.max(l ?? -1 / 0, Math.min(d ?? 1 / 0, r)) : r;
@@ -2618,57 +2534,68 @@ function Si(n, t, e) {
     u > 180 || u < 0 ? (e.targetTilt = u > 180 ? 360 - u : -u, e.thetaOffset = (e.thetaOffset + 180) % 360, n.tilt(e.targetTilt).rotate(e.targetRotation + e.thetaOffset).set()) : (e.targetTilt = u, n.tilt(e.targetTilt).set());
   };
   return {
-    zoomOut: new b({ variant: "outline", size: "icon", label: _n(), icon: g.zoomOut(), onClick: () => {
+    zoomOut: new g({ variant: "outline", size: "icon", label: ln(), icon: b.zoomOut(), onClick: () => {
       e.targetZoom = i(e.targetZoom - 10), n.zoom(e.targetZoom).set();
     } }),
-    zoomIn: new b({ variant: "outline", size: "icon", label: gn(), icon: g.zoomIn(), onClick: () => {
+    zoomIn: new g({ variant: "outline", size: "icon", label: on(), icon: b.zoomIn(), onClick: () => {
       e.targetZoom = i(e.targetZoom + 10), n.zoom(e.targetZoom).set();
     } }),
-    tiltUp: new b({ variant: "outline", size: "icon", label: In(), icon: g.tiltUp(), onClick: () => {
+    tiltUp: new g({ variant: "outline", size: "icon", label: _n(), icon: b.tiltUp(), onClick: () => {
       s(-15);
     } }),
-    rotateLeft: new b({ variant: "outline", size: "icon", label: Sn(), icon: g.rotateLeft(), onClick: () => {
+    rotateLeft: new g({ variant: "outline", size: "icon", label: hn(), icon: b.rotateLeft(), onClick: () => {
       e.targetRotation = o(e.targetRotation - 15), n.rotate(e.targetRotation + e.thetaOffset).set();
     } }),
-    reset: new b({ variant: "outline", size: "icon", label: hn(), icon: g.reset(), onClick: () => {
+    reset: new g({ variant: "outline", size: "icon", label: Je(), icon: b.reset(), onClick: () => {
       e.thetaOffset = 0, n.reset();
     } }),
-    rotateRight: new b({ variant: "outline", size: "icon", label: Tn(), icon: g.rotateRight(), onClick: () => {
+    rotateRight: new g({ variant: "outline", size: "icon", label: gn(), icon: b.rotateRight(), onClick: () => {
       e.targetRotation = o(e.targetRotation + 15), n.rotate(e.targetRotation + e.thetaOffset).set();
     } }),
-    tiltDown: new b({ variant: "outline", size: "icon", label: Pn(), icon: g.tiltDown(), onClick: () => {
+    tiltDown: new g({ variant: "outline", size: "icon", label: Sn(), icon: b.tiltDown(), onClick: () => {
       s(15);
     } })
   };
 }
-function Ai(n, t, e) {
+function Ci(n, t, e) {
   const i = t.limits;
   i !== void 0 && (n.zoomOut.element.disabled = i.minZoom !== void 0 && e.zoom <= i.minZoom + T, n.zoomIn.element.disabled = i.maxZoom !== void 0 && e.zoom >= i.maxZoom - T, n.tiltUp.element.disabled = i.minTilt !== void 0 && e.tilt <= i.minTilt + T, n.tiltDown.element.disabled = i.maxTilt !== void 0 && e.tilt >= i.maxTilt - T, n.rotateLeft.element.disabled = i.minRotate !== void 0 && e.rotation <= i.minRotate + T, n.rotateRight.element.disabled = i.maxRotate !== void 0 && e.rotation >= i.maxRotate - T);
 }
-const Ei = 5;
-let xi = 0;
+const I = {
+  /** Attribute selection requested (cancelable). `detail`: `{ attribute, value }`. */
+  SELECT: "ui:select",
+  /** Attribute selection applied. `detail`: `{ attribute, value }`. */
+  SELECTED: "ui:selected",
+  /** Focus changed (bubbles). `detail`: `{ component, attributes }`, or `null` for the overview. */
+  FOCUS_CHANGE: "vd:focus-change",
+  /** Resolved configuration changed (bubbles). `detail`: the resolved configuration, or `null` when nothing matches. */
+  CONFIGURATION_CHANGE: "vd:configuration-change",
+  /** Configuration submitted (bubbles). `detail`: the resolved configuration handed to the host. */
+  CONFIGURATION_SUBMIT: "vd:configuration-submit"
+}, ki = 5;
+let Si = 0;
 function j(n) {
   const t = n.replace(/([A-Z])/g, " $1").trim();
   return t.charAt(0).toUpperCase() + t.slice(1).toLowerCase();
 }
-function Ti(n, t, e, i, o) {
+function Ei(n, t, e, i, o) {
   const s = document.createElement("div");
   s.className = "vd-attribute", s.dataset.name = n.name;
   const r = document.createElement("span");
-  r.className = "vd-attribute-label", r.textContent = j(n.name), r.id = `vd-attribute-label-${xi++}`, s.appendChild(r), s.setAttribute("role", "group"), s.setAttribute("aria-labelledby", r.id);
-  const l = n.values.find((p) => t.getValue(n.name, p)?.isSelected === !0), d = n.values.map(j), u = n.values.length <= Ei ? new ui(n.values, l, d) : new di(n.name, n.values, j(n.name), l, d);
+  r.className = "vd-attribute-label", r.textContent = j(n.name), r.id = `vd-attribute-label-${Si++}`, s.appendChild(r), s.setAttribute("role", "group"), s.setAttribute("aria-labelledby", r.id);
+  const l = n.values.find((p) => t.getValue(n.name, p)?.isSelected === !0), d = n.values.map(j), u = n.values.length <= ki ? new Jt(n.values, l, d) : new te(n.name, n.values, j(n.name), l, d);
   return u.onSelect((p) => {
-    e.dispatch(O.SELECT, { attribute: n.name, value: p }, !0).defaultPrevented || i(n.name, p);
+    e.dispatch(I.SELECT, { attribute: n.name, value: p }, !0).defaultPrevented || i(n.name, p);
   }), o(n.name, (p) => {
-    u.setSelected(p.value), e.dispatch(O.SELECTED, { attribute: n.name, value: p.value });
+    u.setSelected(p.value), e.dispatch(I.SELECTED, { attribute: n.name, value: p.value });
   }), s.appendChild(u.element), s;
 }
-const Ri = 80, Oi = 2500;
-class Ni {
-  constructor(t, e = Oi) {
+const Ai = 80, xi = 2500;
+class Ti {
+  constructor(t, e = xi) {
     this.configuration = t, this.resetMs = e, this.element = document.createElement("div"), this.element.className = "vd-commerce vd-hidden";
     const i = document.createElement("div");
-    i.className = "vd-commerce-price", this.priceEl = document.createElement("span"), this.priceEl.className = "vd-price", this.vatEl = document.createElement("span"), this.vatEl.className = "vd-vat", i.append(this.priceEl, this.vatEl), this.button = new b({ variant: "default", onClick: () => {
+    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 g({ 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();
@@ -2697,19 +2624,19 @@ class Ni {
       this.priceEl.textContent = "", this.vatEl.textContent = "";
       return;
     }
-    this.priceEl.textContent = Ii(t.price, t.currency), this.vatEl.textContent = lt(this.configuration.vatDisplay);
+    this.priceEl.textContent = Ri(t.price, t.currency), this.vatEl.textContent = at(this.configuration.vatDisplay);
   }
   renderButton() {
     const t = this.configuration.submitEnabled;
-    this.button.element.classList.toggle("vd-hidden", !t), t && this.state === "idle" && this.setButtonText(lt(this.configuration.buttonLabel));
+    this.button.element.classList.toggle("vd-hidden", !t), t && this.state === "idle" && this.setButtonText(at(this.configuration.buttonLabel));
   }
   async handleSubmit() {
     if (this.state !== "busy") {
-      this.setState("busy", Bn());
+      this.setState("busy", Tn());
       try {
-        await this.configuration.submit(), this.setState("success", Hn());
+        await this.configuration.submit(), this.setState("success", Nn());
       } catch {
-        this.setState("failed", Wn());
+        this.setState("failed", Fn());
       }
       this.scheduleReset();
     }
@@ -2726,10 +2653,10 @@ class Ni {
     this.button.element.textContent = t, this.button.element.setAttribute("aria-label", t);
   }
 }
-function lt(n) {
-  return (n ?? "").slice(0, Ri);
+function at(n) {
+  return (n ?? "").slice(0, Ai);
 }
-function Ii(n, t) {
+function Ri(n, t) {
   try {
     const e = new Intl.NumberFormat(h(), { style: "currency", currency: t }), i = e.resolvedOptions().maximumFractionDigits ?? 2;
     return e.format(n / 10 ** i);
@@ -2737,7 +2664,7 @@ function Ii(n, t) {
     return `${t} ${(n / 100).toFixed(2)}`;
   }
 }
-class kt {
+class Ct {
   slot = null;
   panel = null;
   attach(t, e) {
@@ -2750,8 +2677,8 @@ class kt {
     this.slot?.remove(), this.slot = null, this.panel = null;
   }
 }
-const Li = 572;
-class Mi {
+const Ii = 572;
+class Oi {
   element = null;
   body = null;
   openButton = null;
@@ -2762,21 +2689,21 @@ class Mi {
   expanded = !0;
   visible = !1;
   attach(t, e) {
-    this.container = t, e.classList.add("vd-attributes-sidebar"), this.closeButton = new b({
+    this.container = t, e.classList.add("vd-attributes-sidebar"), this.closeButton = new g({
       variant: "ghost",
       size: "icon-sm",
-      label: ln(),
-      icon: g.close({ size: 18 }),
+      label: Ye(),
+      icon: b.close({ size: 18 }),
       onClick: () => {
         this.expanded = !1, this.render();
       }
     });
     const i = document.createElement("div");
-    i.className = "vd-sidebar-header", i.appendChild(this.closeButton.element), this.body = document.createElement("div"), this.body.className = "vd-sidebar-body", this.body.appendChild(e), this.element = document.createElement("div"), this.element.className = "vd-sidebar vd-hidden", this.element.append(i, this.body), t.appendChild(this.element), this.openButton = new b({
+    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 g({
       variant: "outline",
       size: "default",
-      label: on(),
-      icon: g.configurator({ size: 18 }),
+      label: Ge(),
+      icon: b.configurator({ size: 18 }),
       onClick: () => {
         this.expanded = !0, this.render();
       }
@@ -2791,7 +2718,7 @@ class Mi {
   observe() {
     typeof ResizeObserver > "u" || this.container === null || (this.observer = new ResizeObserver((t) => {
       const e = t[0]?.contentRect.width ?? 0;
-      this.setCollapsible(e > 0 && e < Li);
+      this.setCollapsible(e > 0 && e < Ii);
     }), this.observer.observe(this.container));
   }
   setCollapsible(t) {
@@ -2804,7 +2731,7 @@ class Mi {
     this.element.classList.toggle("vd-hidden", !this.visible), this.element.classList.toggle("vd-sidebar-collapsed", e), this.openButton.element.classList.toggle("vd-hidden", !e), this.closeButton.element.style.display = this.collapsible ? "" : "none", this.container.classList.toggle("vd-layout-sidebar-right", t), this.container.classList.toggle("vd-layout-sidebar-collapsed", e);
   }
 }
-class zi {
+class Ni {
   attach(t, e) {
   }
   setVisible(t) {
@@ -2812,20 +2739,20 @@ class zi {
   destroy() {
   }
 }
-const Pi = {
-  "inframe-bottom-left": () => new kt(),
-  "sidebar-right": () => new Mi(),
-  hidden: () => new zi()
+const Li = {
+  "inframe-bottom-left": () => new Ct(),
+  "sidebar-right": () => new Oi(),
+  hidden: () => new Ni()
 };
-function Fi(n) {
-  return (Pi[n ?? ""] ?? (() => new kt()))();
+function Mi(n) {
+  return (Li[n ?? ""] ?? (() => new Ct()))();
 }
 const H = _.fontFamily.sans.join(", "), G = `
   position: absolute;
   display: flex;
   z-index: 10;
   transition: inset-inline-end 0.18s ease;
-`, $i = `
+`, zi = `
 /* Override browser's default black fullscreen backdrop */
 .vd-container:fullscreen {
   background: oklch(100% 0 0);
@@ -3023,17 +2950,17 @@ const H = _.fontFamily.sans.join(", "), G = `
 }
 
 `;
-function Di() {
-  if (gi(), document.getElementById("vd-styles") !== null)
+function Fi() {
+  if (Un(), document.getElementById("vd-styles") !== null)
     return;
   const n = document.createElement("style");
-  n.id = "vd-styles", n.textContent = $i, document.head.appendChild(n);
+  n.id = "vd-styles", n.textContent = zi, document.head.appendChild(n);
 }
-function Bi(n, t) {
+function Pi(n, t) {
   const e = document.createElement("a");
   e.href = `data:image/png;base64,${n}`, e.download = t, e.click();
 }
-class Ui {
+class $i {
   options;
   settings = {};
   container = null;
@@ -3049,7 +2976,7 @@ class Ui {
     this.options = t;
   }
   attach(t) {
-    Di(), this.container = t, this.loading = new wi(t), this.slots.topRight = this.createSlot(t, "vd-slot-top-right"), this.slots.bottomRight = this.createSlot(t, "vd-slot-bottom-right");
+    Fi(), this.container = t, this.loading = new yi(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);
@@ -3058,7 +2985,7 @@ class Ui {
     if (this.actionBar !== null || this.slots.bottomRight === null || this.container === null)
       return;
     const t = typeof this.container.requestFullscreen == "function";
-    this.actionBar = new ki({
+    this.actionBar = new _i({
       onAr: this.options.onAr,
       onFullscreen: t ? () => {
         this.toggleFullscreen();
@@ -3075,20 +3002,20 @@ class Ui {
     this.loading?.showError(t);
   }
   applyViewerSettings(t) {
-    this.settings = t, t.language !== void 0 && gt(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();
+    this.settings = t, t.language !== void 0 && mt(t.language, { reload: !1 }), this.syncScreenshotButton(), this.actionBar?.applySettings(t), this.cameraControls !== null && (this.cameraControls.element.style.display = t.cameraControls === !0 ? "flex" : "none"), this.placeScreenshotButton();
   }
   renderAttributeControls(t, e) {
     if (!(this.container === null || this.slots.topRight === null) && (this.cameraControls?.element.remove(), this.cameraControls = null, this.teardownConfigurator(), this.settings.cameraControls === !0 && (this.cameraControls = new L(this.options.cameraApi, this.options.cameraPositionApi), this.cameraControls.element.style.display = "none", this.slots.topRight.appendChild(this.cameraControls.element)), this.placeScreenshotButton(), e.length !== 0)) {
       this.attributes = document.createElement("div"), this.attributes.className = "vd-attributes";
       for (const i of e)
-        this.attributes.appendChild(Ti(
+        this.attributes.appendChild(Ei(
           i,
           t,
           this.options.eventBus,
           this.options.onSelect,
           this.options.onSubscribe
         ));
-      this.commerce = new Ni(this.options.configuration), this.attributes.appendChild(this.commerce.element), this.layout = Fi(this.settings.configuratorLayout), this.layout.attach(this.container, this.attributes);
+      this.commerce = new Ti(this.options.configuration), this.attributes.appendChild(this.commerce.element), this.layout = Mi(this.settings.configuratorLayout), this.layout.attach(this.container, this.attributes);
     }
   }
   get viewerSettings() {
@@ -3110,14 +3037,14 @@ class Ui {
   }
   syncScreenshotButton() {
     const t = this.settings.screenshot === !0;
-    t && this.screenshotBtn === null && (this.screenshotBtn = new b({
+    t && this.screenshotBtn === null && (this.screenshotBtn = new g({
       variant: "outline",
       size: "icon",
-      label: Je(),
-      icon: g.screenshot(),
+      label: Ue(),
+      icon: b.screenshot(),
       onClick: () => {
         this.options.snapshotApi.take("snapshot.png").onDeveloped(({ data: e, filename: i }) => {
-          Bi(e, i);
+          Pi(e, i);
         });
       }
     })), !t && this.screenshotBtn !== null && (this.screenshotBtn.element.remove(), this.screenshotBtn = null);
@@ -3126,40 +3053,106 @@ class Ui {
     this.screenshotBtn === null || this.slots.topRight === null || (this.cameraControls !== null ? this.cameraControls.element.appendChild(this.screenshotBtn.element) : this.slots.topRight.appendChild(this.screenshotBtn.element));
   }
 }
-class Vi {
-  constructor(t) {
-    this.send = t;
+const Di = {};
+class Bi {
+  defaultServer = "https://server.virtualdisplay.io";
+  options;
+  serverHost;
+  constructor(t, e) {
+    this.options = t, this.serverHost = e;
   }
-  send;
-  placedCallbacks = [];
-  setEnabled(t) {
-    this.send({
-      type: c.ANNOTATION_TOGGLE,
-      enabled: t
-    });
+  /**
+   * 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 };
   }
-  startPlacing() {
-    this.send({
-      type: c.ANNOTATION_PLACE_MODE,
-      enabled: !0
-    });
+  createContainer() {
+    const t = document.createElement("div");
+    return t.className = "vd-container", Object.assign(t.style, {
+      position: "relative",
+      width: "100%",
+      height: "100%",
+      overflow: "hidden"
+    }), t;
   }
-  stopPlacing() {
-    this.send({
-      type: c.ANNOTATION_PLACE_MODE,
-      enabled: !1
-    });
+  createIframe() {
+    const t = document.createElement("iframe");
+    return t.src = this.buildUrl(), Object.assign(t.style, {
+      width: "100%",
+      height: "100%",
+      border: "none",
+      display: "block"
+    }), t.setAttribute("allow", "xr-spatial-tracking; fullscreen"), t;
   }
-  onPlaced(t) {
-    this.placedCallbacks.push(t);
+  attachToParent(t) {
+    this.getParentElement().appendChild(t);
   }
-  /** Called by the client when an ANNOTATION_PLACED message is received. */
-  handlePlaced(t) {
-    for (const e of this.placedCallbacks)
-      e(t);
+  buildUrl() {
+    const t = this.getServerUrl(), e = new URL(t);
+    return e.searchParams.set("license", this.options.license), e.searchParams.set("model", this.options.model), this.options.language !== void 0 && e.searchParams.set("language", this.options.language), this.options.debug === !0 && e.searchParams.set("debug", "true"), this.options.traceparent !== void 0 && e.searchParams.set("traceparent", this.options.traceparent), e.toString();
+  }
+  getServerUrl() {
+    if (this.serverHost !== void 0)
+      return this.serverHost;
+    if (Di?.VITE_VIRTUALDISPLAY_SERVER_HOST === void 0)
+      return this.defaultServer;
+  }
+  getParentElement() {
+    if (typeof this.options.parent != "string")
+      return this.options.parent;
+    const t = document.querySelector(this.options.parent);
+    if (t === null)
+      throw f.parentNotFound(this.options.parent);
+    return t;
+  }
+}
+function Ui(n) {
+  const { messenger: t } = n;
+  t.on(c.HANDSHAKE, (e) => {
+    xt(e) && (w.info("Server handshake received, flushing publisher queue"), t.markReady());
+  }), t.on(c.SESSION, (e) => {
+    Tt(e) && n.onSession(e.sessionId);
+  }), t.on(c.MUTATION, (e) => {
+    Rt(e) && (n.attributes.handleMutationResult(e), n.configuration.handleSelectionChanged(n.attributes.getSelection()));
+  }), t.on(c.SNAPSHOT, (e) => {
+    It(e) && n.snapshot.handleSnapshotResult(e);
+  }), t.on(c.CAMERA, (e) => {
+    Ot(e) && n.cameraPosition.handlePositionUpdate(e);
+  }), t.on(c.LOADING_INDICATOR, (e) => {
+    Lt(e) && (e.error !== void 0 ? n.ui.showError(e.error) : n.ui.updateProgress(e.progress, e.phase));
+  }), t.on(c.CONFIG, (e) => {
+    Mt(e) && n.applyConfig(e);
+  }), t.on(c.MAPPING, (e) => {
+    Nt(e) && (n.attributes.handleMappingReceived(e), n.configuration.handleSelectionChanged(n.attributes.getSelection()), n.ui.renderAttributeControls(n.attributes, e.attributes), n.readyStateTracker.handleMappingReceived());
+  }), Vi(n);
+}
+function Vi(n) {
+  const { messenger: t } = n;
+  t.on(c.FOCUS, (e) => {
+    zt(e) && n.focus.handleStateReceived(e);
+  }), t.on(c.PRICING, (e) => {
+    Ft(e) && n.configuration.handlePricingReceived(e.pricing);
+  });
+}
+class ji {
+  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;
   }
 }
-class Gi {
+class Hi {
   attributes;
   readyStateTracker;
   messenger;
@@ -3173,81 +3166,72 @@ class Gi {
   ui;
   qrModal;
   options;
+  serverHost;
   iframe;
   container;
-  viewerSessionId;
   readyCallbacks = [];
   mutationFailedCallbacks = [];
-  constructor(t) {
-    this.options = t, this.initializeLogging(), this.messenger = new ne(() => this.iframe?.contentWindow ?? null);
-    const e = (i) => {
-      this.messenger.send(i);
+  /** The viewer's tracking session id, once the server announces it (SESSION). */
+  viewerSessionId;
+  constructor(t, e) {
+    this.options = t, this.serverHost = e?.serverHost, this.initializeLogging(), this.messenger = new Pt(
+      () => this.iframe?.contentWindow ?? null,
+      e?.messengerOptions
+    );
+    const i = (o) => {
+      this.messenger.send(o);
     };
-    this.attributes = new ie(e, (i, o) => {
-      for (const s of this.mutationFailedCallbacks)
-        s({ attribute: i, value: o });
-    }), this.snapshotApi = new de(e), this.annotationsApi = new Vi(e), this.cameraApi = new oe(e), this.cameraPositionApi = new se(), this.focusApi = new re(e, (i) => {
-      this.dispatchFocusChange(i);
-    }), this.configurationApi = new ce(
-      (i) => {
-        this.dispatchConfigurationChange(i);
+    this.attributes = new oi(i, (o, s) => {
+      for (const r of this.mutationFailedCallbacks)
+        r({ attribute: o, value: s });
+    }), this.snapshotApi = new hi(i), this.annotationsApi = new Wn(i), this.cameraApi = new si(i), this.cameraPositionApi = new ri(), this.focusApi = new ui(i, (o) => {
+      this.dispatchFocusChange(o);
+    }), this.configurationApi = new ci(
+      (o) => {
+        this.dispatchConfigurationChange(o);
       },
-      (i) => {
-        this.dispatchConfigurationSubmit(i);
+      (o) => {
+        this.dispatchConfigurationSubmit(o);
       }
-    ), this.eventBus = new he(), this.qrModal = new mi(), this.readyStateTracker = new Ft(() => {
-      const i = this.readyCallbacks;
+    ), this.eventBus = new mi(), this.qrModal = new $n(), this.readyStateTracker = new ji(() => {
+      const o = this.readyCallbacks;
       this.readyCallbacks = [];
-      for (const o of i)
-        o(this);
+      for (const s of o)
+        s(this);
       this.ui.onReady();
-    }), this.ui = new Ui({
+    }), this.ui = new $i({
       snapshotApi: this.snapshotApi,
       cameraApi: this.cameraApi,
       cameraPositionApi: this.cameraPositionApi,
       eventBus: this.eventBus,
       configuration: this.configurationApi,
-      onSelect: (i, o) => this.attributes.select(i, o),
-      onSubscribe: (i, o) => this.attributes.onChange(i, o),
+      onSelect: (o, s) => this.attributes.select(o, s),
+      onSubscribe: (o, s) => this.attributes.onChange(o, s),
       onAr: () => {
         this.activateAr();
       },
       onFullscreenEnter: () => {
         this.trackFullscreen();
       }
-    }), this.registerHandlers(), this.messenger.start(), this.createAndConnectIframe();
-  }
-  registerHandlers() {
-    this.registerLifecycleHandlers(), this.messenger.on(c.MUTATION, (t) => {
-      Zt(t) && (this.attributes.handleMutationResult(t), this.configurationApi.handleSelectionChanged(this.attributes.getSelection()));
-    }), this.messenger.on(c.SNAPSHOT, (t) => {
-      Wt(t) && this.snapshotApi.handleSnapshotResult(t);
-    }), this.messenger.on(c.CAMERA, (t) => {
-      Yt(t) && this.cameraPositionApi.handlePositionUpdate(t);
-    }), this.messenger.on(c.LOADING_INDICATOR, (t) => {
-      Kt(t) && (t.error !== void 0 ? this.ui.showError(t.error) : this.ui.updateProgress(t.progress, t.phase));
-    }), this.messenger.on(c.CONFIG, (t) => {
-      Qt(t) && this.handleConfig(t);
-    }), this.messenger.on(c.ANNOTATION_PLACED, (t) => {
-      Jt(t) && this.annotationsApi.handlePlaced(t.position);
-    }), this.messenger.on(c.MAPPING, (t) => {
-      Xt(t) && (this.attributes.handleMappingReceived(t), this.configurationApi.handleSelectionChanged(this.attributes.getSelection()), this.ui.renderAttributeControls(this.attributes, t.attributes), this.readyStateTracker.handleMappingReceived());
-    }), this.registerFacadeStateHandlers();
-  }
-  /** Lifecycle handlers: the handshake (queue flush) and the tracking session id. */
-  registerLifecycleHandlers() {
-    this.messenger.on(c.HANDSHAKE, (t) => {
-      Gt(t) && (C.info("Server handshake received, flushing publisher queue"), this.messenger.markReady());
-    }), this.messenger.on(c.SESSION, (t) => {
-      qt(t) && (this.viewerSessionId = t.sessionId);
-    });
+    }), this.wireIncomingMessages(), e?.registerHandlers?.(this.messenger, i), this.messenger.start(), this.createAndConnectIframe();
   }
-  /** Handlers that feed viewer-reported state into the facades (focus, pricing). */
-  registerFacadeStateHandlers() {
-    this.messenger.on(c.FOCUS, (t) => {
-      te(t) && this.focusApi.handleStateReceived(t);
-    }), this.messenger.on(c.PRICING, (t) => {
-      ee(t) && this.configurationApi.handlePricingReceived(t.pricing);
+  /** Wire the inbound viewer protocol to the facades. */
+  wireIncomingMessages() {
+    Ui({
+      messenger: this.messenger,
+      attributes: this.attributes,
+      configuration: this.configurationApi,
+      snapshot: this.snapshotApi,
+      cameraPosition: this.cameraPositionApi,
+      focus: this.focusApi,
+      ui: this.ui,
+      readyStateTracker: this.readyStateTracker,
+      applyConfig: (t) => {
+        this.handleConfig(t);
+      },
+      onSession: (t) => {
+        this.viewerSessionId = t;
+      }
     });
   }
   /**
@@ -3256,7 +3240,7 @@ class Gi {
    */
   dispatchFocusChange(t) {
     this.container?.dispatchEvent(
-      new CustomEvent(O.FOCUS_CHANGE, { detail: t, bubbles: !0 })
+      new CustomEvent(I.FOCUS_CHANGE, { detail: t, bubbles: !0 })
     );
   }
   /**
@@ -3265,13 +3249,13 @@ class Gi {
    */
   dispatchConfigurationChange(t) {
     this.container?.dispatchEvent(
-      new CustomEvent(O.CONFIGURATION_CHANGE, { detail: t ?? null, bubbles: !0 })
+      new CustomEvent(I.CONFIGURATION_CHANGE, { detail: t ?? null, bubbles: !0 })
     );
   }
   /** Dispatch a bubbling `vd:configuration-submit` event when the CTA is used. */
   dispatchConfigurationSubmit(t) {
     this.container?.dispatchEvent(
-      new CustomEvent(O.CONFIGURATION_SUBMIT, { detail: t, bubbles: !0 })
+      new CustomEvent(I.CONFIGURATION_SUBMIT, { detail: t, bubbles: !0 })
     );
   }
   handleConfig(t) {
@@ -3280,14 +3264,14 @@ class Gi {
       const o = i !== void 0 ? { ...e ?? {}, ...i } : e;
       if (i !== void 0 && e !== void 0) {
         const s = Object.entries(i).filter(([r, l]) => e[r] !== l).map(([r, l]) => `${r} (metadata: ${e[r] ?? "undefined"}, override: ${l})`);
-        s.length > 0 && C.warn(`Viewer settings override active: ${s.join(", ")}`);
+        s.length > 0 && w.warn(`Viewer settings override active: ${s.join(", ")}`);
       }
       this.ui.applyViewerSettings(o), this.annotationsApi.setEnabled(o.annotations !== !1);
     }
     this.cameraPositionApi.applyLimits(t.cameraLimits);
   }
   activateAr() {
-    if (zt()) {
+    if (Zn()) {
       this.messenger.send({ type: c.AR_ACTIVATE });
       return;
     }
@@ -3298,10 +3282,10 @@ class Gi {
     this.messenger.send({ type: c.FULLSCREEN });
   }
   initializeLogging() {
-    this.options.debug === !0 && Pt(), C.info("Initializing Virtualdisplay client", { model: this.options.model });
+    this.options.debug === !0 && ii(), w.info("Initializing Virtualdisplay client", { model: this.options.model });
   }
   createAndConnectIframe() {
-    const e = new At(this.options).create();
+    const e = new Bi(this.options, this.serverHost).create();
     this.container = e.container, this.iframe = e.iframe, this.eventBus.attach(this.container), this.ui.attach(this.container);
     try {
       const i = new URL(this.iframe.src).origin;
@@ -3358,36 +3342,33 @@ class Gi {
   get snapshot() {
     return this.snapshotApi;
   }
-  get viewerSettings() {
-    return this.ui.viewerSettings;
-  }
-  /**
-   * The viewer's tracking session id, once the viewer has established it (the id
-   * is generated inside the iframe and announced to the client). `undefined`
-   * until then. A host page can use it to correlate its own actions, e.g. a
-   * configurator conversion, with the viewer session.
-   */
+  /** 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.qrModal.hide(), 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;
   }
 }
+class qi extends Hi {
+}
 export {
-  Vi as Annotations,
-  Dt as Attribute,
-  $t as AttributeValue,
-  oe as Camera,
-  ce as Configuration,
-  A as ERROR_CODES,
-  re as Focus,
-  ue as Photo,
-  de as Snapshot,
-  O as VD_EVENTS,
-  Gi as VirtualdisplayClient,
+  Wn as Annotations,
+  Xn as Attribute,
+  Yn as AttributeValue,
+  si as Camera,
+  ci as Configuration,
+  E as ERROR_CODES,
+  ui as Focus,
+  di as Photo,
+  hi as Snapshot,
+  I as VD_EVENTS,
+  qi as VirtualdisplayClient,
   f as VirtualdisplayError,
-  Pt as enableDebugMode,
-  ji as isDebugMode,
-  C as logger
+  ii as enableDebugMode,
+  Gi as isDebugMode,
+  w as logger
 };