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

package/dist/virtualdisplay.client.es.js

@@ -12,66 +12,72 @@ const c = {
   CONFIG: "config",
   ANNOTATION_TOGGLE: "annotation_toggle",
   FOCUS: "focus",
-  PRICING: "pricing"
-}, Y = {
+  PRICING: "pricing",
+  QR_SHOWN: "qr_shown",
+  SYNC: "sync"
+}, Q = {
   FOCUS: "focus",
   UNFOCUS: "unfocus"
 }, kt = {
   FOCUSED: "focused"
-}, St = {
+}, At = {
   /** Behaves exactly like an unpriced combination: no price, no button. */
   HIDDEN: "hidden"
 }, Et = new Set(Object.values(c));
-function At(n) {
+function xt(n) {
   if (typeof n != "object" || n === null)
     return !1;
   const t = n;
   return typeof t.target == "string" ? !1 : typeof t.type == "string" && Et.has(t.type);
 }
-function xt(n) {
-  const t = k(n);
+function Tt(n) {
+  const t = C(n);
   return t !== null && t.type === c.HANDSHAKE;
 }
-function Tt(n) {
-  const t = k(n);
+function Rt(n) {
+  const t = C(n);
   return t !== null && t.type === c.SESSION && typeof t.sessionId == "string";
 }
-function Rt(n) {
-  const t = k(n);
+function It(n) {
+  const t = C(n);
   return t !== null && t.type === c.MUTATION && Array.isArray(t.results);
 }
-function It(n) {
-  const t = k(n);
+function Ot(n) {
+  const t = C(n);
   return t !== null && t.type === c.SNAPSHOT && ("data" in t || "error" in t);
 }
-function Ot(n) {
-  const t = k(n);
+function Nt(n) {
+  const t = C(n);
   return t !== null && t.type === c.CAMERA && Array.isArray(t.transforms);
 }
-function Nt(n) {
-  const t = k(n);
+function Lt(n) {
+  const t = C(n);
   return t !== null && t.type === c.MAPPING && Array.isArray(t.attributes);
 }
-function Lt(n) {
-  const t = k(n);
+function Mt(n) {
+  const t = C(n);
   return t !== null && t.type === c.LOADING_INDICATOR && typeof t.progress == "number";
 }
-function Mt(n) {
-  const t = k(n);
+function zt(n) {
+  const t = C(n);
+  return t !== null && t.type === c.SYNC && typeof t.connected == "boolean";
+}
+function Pt(n) {
+  const t = C(n);
   return t !== null && t.type === c.CONFIG && typeof t.viewerSettings == "object";
 }
-function zt(n) {
-  const t = k(n);
+function Ft(n) {
+  const t = C(n);
   return t !== null && t.type === c.FOCUS && typeof t.state == "string";
 }
-function Ft(n) {
-  const t = k(n);
+function $t(n) {
+  const t = C(n);
   return t !== null && t.type === c.PRICING && typeof t.pricing == "object" && t.pricing !== null;
 }
-function k(n) {
+function C(n) {
   return typeof n != "object" || n === null ? null : n;
 }
-class X {
+class Y {
   constructor(t) {
     this.processor = t;
   }
@@ -118,9 +124,9 @@ class X {
     this.pending.length = 0;
   }
 }
-class Pt {
+class Dt {
   constructor(t, e) {
-    this.getTarget = t, this.sourceId = `vd-${Math.random().toString(36).slice(2, 8)}`, this.targetOrigin = e?.targetOrigin ?? "*", this.isValid = e?.isValid ?? 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();
+    this.getTarget = t, this.sourceId = `vd-${Math.random().toString(36).slice(2, 8)}`, this.targetOrigin = e?.targetOrigin ?? "*", this.isValid = e?.isValid ?? xt, this.publisher = new Y((i) => this.post(i)), this.consumer = new Y((i) => this.routeToHandler(i)), this.shouldBuffer = e?.shouldBuffer ?? null, e?.bufferIncoming !== !0 && this.consumer.markReady();
   }
   getTarget;
   handlers = /* @__PURE__ */ new Map();
@@ -157,6 +163,24 @@ class Pt {
   send(t) {
     this.publisher.enqueue(t);
   }
+  /**
+   * Feed a message through the same routing path as one that just arrived via
+   * postMessage, without an actual postMessage round-trip: still validated
+   * against `isValid`, and still respects the consumer queue's buffering and
+   * the `shouldBuffer` bypass. For a transport that delivers messages some
+   * other way than the iframe channel this messenger already listens on (the
+   * viewer engine's SSE-sourced live sync channel, ar-session-handoff) and
+   * needs them to land exactly where a postMessage would.
+   */
+  receive(t) {
+    if (this.isValid(t)) {
+      if (this.shouldBuffer !== null && !this.shouldBuffer(t)) {
+        this.routeToHandler(t);
+        return;
+      }
+      this.consumer.enqueue(t);
+    }
+  }
   /**
    * Enable sending and flush queued outgoing messages
    */
@@ -228,1467 +252,281 @@ class Pt {
     });
   }
 }
-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;
-  }
-  setIcon(t) {
-    const e = this.element.querySelector("svg");
-    e !== null ? e.replaceWith(t) : this.element.appendChild(t);
+class Bt {
+  constructor(t) {
+    this.send = t;
   }
-}
-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"
-    }
-  ],
-  ["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"
-    }
-  ],
-  ["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%"
+  send;
+  setEnabled(t) {
+    this.send({
+      type: c.ANNOTATION_TOGGLE,
+      enabled: t
     });
   }
 }
-class Qt {
-  constructor(t = {}) {
-    this.options = t, this.card = new Kt(), 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 Ut {
+  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 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);
-    }
+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;
   }
-  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}"`,
+      A.VALUE_NOT_FOUND
+    );
   }
-  onSelect(t) {
-    this.selectCallback = t;
+  static parentNotFound(t) {
+    return new f(
+      `Parent element not found: ${t}`,
+      A.PARENT_NOT_FOUND
+    );
+  }
+  static invalidParameter(t) {
+    return new f(t, A.INVALID_PARAMETER);
   }
 }
-class 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);
+class Vt {
+  name;
+  defaultValue;
+  values;
+  onSelect;
+  onChangeCallback;
+  constructor(t) {
+    this.name = t.name, this.defaultValue = t.defaultValue, this.onSelect = t.onSelect, this.values = this.createValues(t.values);
   }
-  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());
   }
-}
-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;
+  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);
     }
-  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;
+    e !== void 0 && this.onChangeCallback !== void 0 && this.onChangeCallback(e);
+  }
+  createValues(t) {
+    const e = /* @__PURE__ */ new Map();
+    for (const i of t) {
+      const o = new Ut(i, this.name);
+      i === this.defaultValue && o.setSelected(!0), e.set(i, o);
+    }
+    return e;
+  }
 }
-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");
-};
-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);
+class jt {
+  attributes = /* @__PURE__ */ new Map();
+  constructor(t, e, i) {
+    for (const o of t) {
+      const s = this.buildOptions(o, e);
+      this.attributes.set(o.name, new Vt(s));
+    }
+    this.onMutationFailed = i;
+  }
+  onMutationFailed;
+  get(t) {
+    return this.attributes.get(t);
+  }
+  /** The current selection as attribute name→value pairs, skipping unset attributes. */
+  getSelection() {
+    const t = {};
+    for (const [e, i] of this.attributes) {
+      const o = i.selected;
+      o !== void 0 && (t[e] = o);
+    }
+    return t;
+  }
+  handleResults(t) {
+    for (const e of t) {
+      if (!e.success) {
+        this.onMutationFailed?.(e.name, e.value);
+        continue;
       }
+      this.get(e.name)?.handleResult(e.value);
     }
-    const o = pt(e);
-    if (o)
-      return o;
+  }
+  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 se = (n) => {
-  window.location.reload();
-};
-let mt = (n, t) => {
+function Ht(n) {
+  const t = new Date(n.timestamp).toLocaleTimeString("en-GB", { hour12: !1 }), e = n.level.toUpperCase().padEnd(5), i = n.trace_id?.slice(0, 8) ?? "--------", o = n.msg, s = ["timestamp", "level", "msg", "service", "trace_id", "span_id"], r = Object.entries(n).filter(([l]) => !s.includes(l)).map(([l, u]) => `${l}=${JSON.stringify(u)}`).join(" ");
+  return `${t} ${e} [${i}] ${o}${r ? " " + r : ""}`;
+}
+function qt(n) {
+  return JSON.stringify(n);
+}
+function Gt(n, t) {
+  const e = t ? Ht(n) : qt(n);
+  n.level === "error" ? console.error(e) : n.level === "warn" ? console.warn(e) : console.log(e);
+}
+function lt(n, t = 0) {
   const e = {
-    reload: !0,
-    ...t
+    name: n.name,
+    message: n.message
   };
-  let i;
-  try {
-    i = h();
-  } catch {
+  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);
   }
-  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();
+  return n.cause !== void 0 && n.cause !== null && (e.cause = n.cause instanceof Error && t < 5 ? lt(n.cause, t + 1) : String(n.cause)), e;
+}
+function Zt(n) {
+  const t = {};
+  for (const [e, i] of Object.entries(n))
+    t[e] = i instanceof Error ? lt(i) : i;
+  return t;
+}
+function Wt() {
+  return /* @__PURE__ */ new Date();
+}
+function Qt(n) {
+  return n.toISOString();
+}
+function ct() {
+  return typeof navigator > "u" ? "" : navigator.userAgent;
+}
+function Yt() {
+  return typeof navigator > "u" ? !1 : navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;
+}
+function Kt() {
+  return /iPhone|iPad|iPod/i.test(ct()) || Yt();
+}
+function Xt() {
+  return /Android/i.test(ct());
+}
+function Jt() {
+  return Kt() || Xt();
+}
+class te {
+  constructor(t) {
+    this.config = t;
+  }
+  config;
+  /**
+   * Log at specified level with optional attributes.
+   */
+  log(t, e, i = {}) {
+    const o = this.config.traceProvider?.() ?? {}, s = {
+      timestamp: Qt(Wt()),
+      level: t,
+      msg: e,
+      service: this.config.service,
+      ...o,
+      ...Zt(i)
+    };
+    Gt(s, this.config.isDev);
+  }
+  /**
+   * Log at DEBUG level (development only).
+   */
+  debug(t, e) {
+    this.config.isDev && this.log("debug", t, e);
+  }
+  /**
+   * Log at INFO level.
+   */
+  info(t, e) {
+    this.log("info", t, e);
+  }
+  /**
+   * Log at WARN level.
+   */
+  warn(t, e) {
+    this.log("warn", t, e);
+  }
+  /**
+   * Log at ERROR level.
+   */
+  error(t, e) {
+    this.log("error", t, e);
+  }
+}
+function dt(n, t) {
+  const e = t?.isDev !== void 0 ? t.isDev : typeof process < "u" ? process.env.NODE_ENV !== "production" : !0;
+  return new te({ service: n, isDev: e, traceProvider: t?.traceProvider });
+}
+function O(n) {
+  if (n !== void 0)
+    return typeof n == "object" && n !== null && !Array.isArray(n) && !(n instanceof Error) ? n : n instanceof Error ? { error: n.message } : { value: n };
+}
+function ut(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))
   };
-  if (o.length)
-    return Promise.all(o).then(() => {
-      r();
-    });
-  r();
-};
-function pt(n) {
-  if (typeof n != "string")
-    return;
-  const t = n.toLowerCase();
-  for (const e of dt)
-    if (e.toLowerCase() === t)
-      return e;
 }
-function re(n) {
-  const t = pt(n);
-  if (t)
-    return t;
-  throw new Error(`Invalid locale: ${n}. Expected one of: ${dt.join(", ")}`);
+let ht = !1, _ = ut(dt("client", { isDev: !1 }));
+function ee() {
+  ht = !0, _ = ut(dt("client", { isDev: !0 }));
 }
-const N = /* @__PURE__ */ new Map();
-function ft(n) {
-  return typeof n == "string" && /^custom-[A-Za-z0-9_-]+$/.test(n);
+function Ki() {
+  return ht;
 }
-const ae = (
-  /** @type {(inputs: Controls_Ar_Buttonlabel1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Activate AR"
-  )
-), le = (
-  /** @type {(inputs: Controls_Ar_Buttonlabel1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "AR activeren"
-  )
-), ce = (
-  /** @type {(inputs: Controls_Ar_Buttonlabel1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "AR aktivieren"
-  )
-), 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" ? ae() : e === "nl" ? le() : ce();
-  })
-), de = (
-  /** @type {(inputs: Controls_Qr_Modaltitle1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Scan to view in AR"
-  )
-), he = (
-  /** @type {(inputs: Controls_Qr_Modaltitle1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Scan om in AR te bekijken"
-  )
-), me = (
-  /** @type {(inputs: Controls_Qr_Modaltitle1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Scannen für AR-Ansicht"
-  )
-), 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" ? de() : e === "nl" ? he() : me();
-  })
-), fe = (
-  /** @type {(inputs: Controls_Qr_Modaldescription1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Use your smartphone camera to scan this QR code"
-  )
-), ge = (
-  /** @type {(inputs: Controls_Qr_Modaldescription1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Gebruik de camera van je smartphone om deze QR-code te scannen"
-  )
-), be = (
-  /** @type {(inputs: Controls_Qr_Modaldescription1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Verwende die Kamera deines Smartphones, um diesen QR-Code zu scannen"
-  )
-), 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" ? fe() : e === "nl" ? ge() : be();
-  })
-), ye = (
-  /** @type {(inputs: Controls_Qr_Modalinstructions1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Your phone will open the 3D model in AR mode."
-  )
-), _e = (
-  /** @type {(inputs: Controls_Qr_Modalinstructions1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Je telefoon opent het 3D-model in AR-modus."
-  )
-), we = (
-  /** @type {(inputs: Controls_Qr_Modalinstructions1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Dein Telefon öffnet das 3D-Modell im AR-Modus."
-  )
-), 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" ? ye() : e === "nl" ? _e() : we();
-  })
-), ke = (
-  /** @type {(inputs: Controls_Qr_Closebutton1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Close"
-  )
-), Se = (
-  /** @type {(inputs: Controls_Qr_Closebutton1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Sluiten"
-  )
-), Ee = (
-  /** @type {(inputs: Controls_Qr_Closebutton1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Schließen"
-  )
-), 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" ? ke() : e === "nl" ? Se() : Ee();
-  })
-), xe = (
-  /** @type {(inputs: Controls_Fullscreen_Buttonlabel1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Fullscreen"
-  )
-), Te = (
-  /** @type {(inputs: Controls_Fullscreen_Buttonlabel1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Volledig scherm"
-  )
-), Re = (
-  /** @type {(inputs: Controls_Fullscreen_Buttonlabel1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Vollbild"
-  )
-), 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" ? xe() : e === "nl" ? Te() : Re();
-  })
-), Oe = (
-  /** @type {(inputs: Loading_Downloadingshort1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Downloading"
-  )
-), Ne = (
-  /** @type {(inputs: Loading_Downloadingshort1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Downloaden"
-  )
-), Le = (
-  /** @type {(inputs: Loading_Downloadingshort1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Herunterladen"
-  )
-), 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" ? Oe() : e === "nl" ? Ne() : Le();
-  })
-), Me = (
-  /** @type {(inputs: Loading_RenderingInputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Rendering"
-  )
-), ze = (
-  /** @type {(inputs: Loading_RenderingInputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Renderen"
-  )
-), Fe = (
-  /** @type {(inputs: Loading_RenderingInputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Rendern"
-  )
-), 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" ? Me() : e === "nl" ? ze() : Fe();
-  })
-), $e = (
-  /** @type {(inputs: Controls_Screenshot_Buttonlabel1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Screenshot"
-  )
-), De = (
-  /** @type {(inputs: Controls_Screenshot_Buttonlabel1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Screenshot"
-  )
-), Be = (
-  /** @type {(inputs: Controls_Screenshot_Buttonlabel1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Screenshot"
-  )
-), 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" ? $e() : e === "nl" ? De() : Be();
-  })
-), Ve = (
-  /** @type {(inputs: Controls_Configurator_OpenInputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Configure"
-  )
-), je = (
-  /** @type {(inputs: Controls_Configurator_OpenInputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Configureren"
-  )
-), He = (
-  /** @type {(inputs: Controls_Configurator_OpenInputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Konfigurieren"
-  )
-), 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" ? Ve() : e === "nl" ? je() : He();
-  })
-), qe = (
-  /** @type {(inputs: Controls_Configurator_CloseInputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Close"
-  )
-), Ze = (
-  /** @type {(inputs: Controls_Configurator_CloseInputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Sluiten"
-  )
-), We = (
-  /** @type {(inputs: Controls_Configurator_CloseInputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Schließen"
-  )
-), 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" ? qe() : e === "nl" ? Ze() : We();
-  })
-), Xe = (
-  /** @type {(inputs: Controls_Camera_ResetInputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Reset camera"
-  )
-), Ke = (
-  /** @type {(inputs: Controls_Camera_ResetInputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Camera resetten"
-  )
-), Qe = (
-  /** @type {(inputs: Controls_Camera_ResetInputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Kamera zurücksetzen"
-  )
-), 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" ? Xe() : e === "nl" ? Ke() : Qe();
-  })
-), tn = (
-  /** @type {(inputs: Controls_Camera_Zoomin1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Zoom in"
-  )
-), en = (
-  /** @type {(inputs: Controls_Camera_Zoomin1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Inzoomen"
-  )
-), nn = (
-  /** @type {(inputs: Controls_Camera_Zoomin1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Hineinzoomen"
-  )
-), 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" ? tn() : e === "nl" ? en() : nn();
-  })
-), sn = (
-  /** @type {(inputs: Controls_Camera_Zoomout1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Zoom out"
-  )
-), rn = (
-  /** @type {(inputs: Controls_Camera_Zoomout1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Uitzoomen"
-  )
-), an = (
-  /** @type {(inputs: Controls_Camera_Zoomout1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Herauszoomen"
-  )
-), 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" ? sn() : e === "nl" ? rn() : an();
-  })
-), cn = (
-  /** @type {(inputs: Controls_Camera_Rotateleft1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Rotate left"
-  )
-), un = (
-  /** @type {(inputs: Controls_Camera_Rotateleft1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Naar links draaien"
-  )
-), dn = (
-  /** @type {(inputs: Controls_Camera_Rotateleft1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Nach links drehen"
-  )
-), 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" ? un() : dn();
-  })
-), mn = (
-  /** @type {(inputs: Controls_Camera_Rotateright1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Rotate right"
-  )
-), pn = (
-  /** @type {(inputs: Controls_Camera_Rotateright1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Naar rechts draaien"
-  )
-), fn = (
-  /** @type {(inputs: Controls_Camera_Rotateright1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Nach rechts drehen"
-  )
-), 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" ? mn() : e === "nl" ? pn() : fn();
-  })
-), bn = (
-  /** @type {(inputs: Controls_Camera_Tiltup1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Tilt up"
-  )
-), vn = (
-  /** @type {(inputs: Controls_Camera_Tiltup1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Omhoog kantelen"
-  )
-), yn = (
-  /** @type {(inputs: Controls_Camera_Tiltup1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Nach oben kippen"
-  )
-), _n = (
-  /** @type {((inputs?: Controls_Camera_Tiltup1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Camera_Tiltup1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
-  ((n = {}, t = {}) => {
-    const e = t.locale ?? h();
-    return e === "en" ? bn() : e === "nl" ? vn() : yn();
-  })
-), wn = (
-  /** @type {(inputs: Controls_Camera_Tiltdown1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Tilt down"
-  )
-), Cn = (
-  /** @type {(inputs: Controls_Camera_Tiltdown1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Omlaag kantelen"
-  )
-), kn = (
-  /** @type {(inputs: Controls_Camera_Tiltdown1Inputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Nach unten kippen"
-  )
-), 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" ? wn() : e === "nl" ? Cn() : kn();
-  })
-), En = (
-  /** @type {(inputs: Commerce_Submit_BusyInputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Working…"
-  )
-), An = (
-  /** @type {(inputs: Commerce_Submit_BusyInputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Bezig…"
-  )
-), xn = (
-  /** @type {(inputs: Commerce_Submit_BusyInputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Läuft…"
-  )
-), 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" ? En() : e === "nl" ? An() : xn();
-  })
-), Rn = (
-  /** @type {(inputs: Commerce_Submit_SuccessInputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Done"
-  )
-), In = (
-  /** @type {(inputs: Commerce_Submit_SuccessInputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Gelukt"
-  )
-), On = (
-  /** @type {(inputs: Commerce_Submit_SuccessInputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Fertig"
-  )
-), 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" ? Rn() : e === "nl" ? In() : On();
-  })
-), Ln = (
-  /** @type {(inputs: Commerce_Submit_FailedInputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Failed"
-  )
-), Mn = (
-  /** @type {(inputs: Commerce_Submit_FailedInputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Mislukt"
-  )
-), zn = (
-  /** @type {(inputs: Commerce_Submit_FailedInputs) => LocalizedString} */
-  () => (
-    /** @type {LocalizedString} */
-    "Fehlgeschlagen"
-  )
-), 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" ? Ln() : e === "nl" ? Mn() : zn();
-  })
-), _ = {
-  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();
-  }
-  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;
-  }
-}
-
-@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 Yn {
-  constructor(t, e) {
-    this.value = t, this.attribute = e;
-  }
-  value;
-  attribute;
-  isSelectedValue = !1;
-  get isSelected() {
-    return this.isSelectedValue;
-  }
-  setSelected(t) {
-    this.isSelectedValue = t;
-  }
-}
-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;
-  }
-  static valueNotFound(t, e) {
-    return new f(
-      `Value "${e}" not found for attribute "${t}"`,
-      E.VALUE_NOT_FOUND
-    );
-  }
-  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 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);
-  }
-  /**
-   * 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 Yn(i, this.name);
-      i === this.defaultValue && o.setSelected(!0), e.set(i, o);
-    }
-    return e;
-  }
-}
-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;
-  }
-  onMutationFailed;
-  get(t) {
-    return this.attributes.get(t);
-  }
-  /** The current selection as attribute name→value pairs, skipping unset attributes. */
-  getSelection() {
-    const t = {};
-    for (const [e, i] of this.attributes) {
-      const o = i.selected;
-      o !== void 0 && (t[e] = o);
-    }
-    return t;
-  }
-  handleResults(t) {
-    for (const e of t) {
-      if (!e.success) {
-        this.onMutationFailed?.(e.name, e.value);
-        continue;
-      }
-      this.get(e.name)?.handleResult(e.value);
-    }
-  }
-  buildOptions(t, e) {
-    const i = {
-      name: t.name,
-      values: t.values,
-      onSelect: (o, s) => {
-        e([{ name: o, value: s }], !1);
-      }
-    };
-    return t.defaultValue !== void 0 ? { ...i, defaultValue: t.defaultValue } : i;
-  }
-}
-function 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 : ""}`;
-}
-function Jn(n) {
-  return JSON.stringify(n);
-}
-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);
-}
-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;
-}
-function ei(n) {
-  const t = {};
-  for (const [e, i] of Object.entries(n))
-    t[e] = i instanceof Error ? vt(i) : i;
-  return t;
-}
-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);
-  }
-}
-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 });
-}
-function O(n) {
-  if (n !== void 0)
-    return typeof n == "object" && n !== null && !Array.isArray(n) && !(n instanceof Error) ? n : n instanceof Error ? { error: n.message } : { value: n };
-}
-function _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))
-  };
-}
-let wt = !1, w = _t(yt("client", { isDev: !1 }));
-function ii() {
-  wt = !0, w = _t(yt("client", { isDev: !0 }));
-}
-function Gi() {
-  return wt;
-}
-class oi {
+class ne {
   constructor(t, e) {
     this.send = t, this.onMutationFailed = e;
   }
@@ -1700,9 +538,9 @@ class oi {
    * Handle incoming MAPPING message from server
    */
   handleMappingReceived(t) {
-    w.debug("Initializing from server mapping", {
+    _.debug("Initializing from server mapping", {
       attributeCount: t.attributes.length
-    }), this.registry = new Kn(
+    }), this.registry = new jt(
       t.attributes,
       (e, i) => this.sendMutation(e, i),
       this.onMutationFailed
@@ -1736,7 +574,7 @@ class oi {
     }
     const i = this.registry.get(t);
     if (i === void 0) {
-      w.warn(`onChange: attribute "${t}" not found — callback will not fire`);
+      _.warn(`onChange: attribute "${t}" not found — callback will not fire`);
       return;
     }
     i.onChange(e);
@@ -1762,12 +600,12 @@ class oi {
   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);
+      i === void 0 && _.warn(`onChange: attribute "${t}" not found — buffered callback will not fire`), i?.onChange(e);
     }
     this.pendingCallbacks.length = 0;
   }
 }
-class si {
+let ie = class {
   constructor(t) {
     this.send = t;
   }
@@ -1829,8 +667,8 @@ class si {
     };
     this.send(t);
   }
-}
-class ri {
+};
+class oe {
   state;
   limitsState;
   changeCallbacks = [];
@@ -1918,20 +756,20 @@ class ri {
     }
   }
 }
-function ai(n, t) {
-  const e = n.filter((s) => li(s, t));
+function se(n, t) {
+  const e = n.filter((s) => re(s, t));
   if (e.length === 0)
     return;
-  const i = Math.max(...e.map(nt)), o = e.filter((s) => nt(s) === i);
+  const i = Math.max(...e.map(K)), o = e.filter((s) => K(s) === i);
   return o.length === 1 ? o[0] : void 0;
 }
-function li(n, t) {
+function re(n, t) {
   return Object.entries(n.attributes).every(([e, i]) => t[e] === i);
 }
-function nt(n) {
+function K(n) {
   return Object.keys(n.attributes).length;
 }
-class ci {
+class ae {
   constructor(t, e) {
     this.dispatchChange = t, this.dispatchSubmit = e;
   }
@@ -2028,288 +866,1515 @@ class ci {
   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();
+  recompute() {
+    this.resolved = this.resolve();
+    for (const t of this.changeCallbacks)
+      t(this.resolved);
+    this.dispatchChange(this.resolved), this.notifyRender();
+  }
+  notifyRender() {
+    for (const t of this.renderCallbacks)
+      t();
+  }
+  resolve() {
+    if (this.pricing === void 0)
+      return;
+    const t = se(this.pricing.rules, this.selection);
+    if (!(t === void 0 || t.availability === At.HIDDEN))
+      return {
+        attributes: { ...this.selection },
+        reference: t.reference,
+        price: t.priceCents,
+        currency: this.pricing.currency,
+        availability: t.availability
+      };
+  }
+}
+class le {
+  constructor(t, e) {
+    this.send = t, this.dispatch = e;
+  }
+  send;
+  dispatch;
+  focused = null;
+  attributes = [];
+  changeCallbacks = [];
+  /** The focused component name, or null in overview. */
+  get current() {
+    return this.focused;
+  }
+  /**
+   * Focus a component by name. Sends a focus message to the viewer.
+   * @throws VirtualdisplayError if component is not a non-empty string
+   */
+  set(t) {
+    if (typeof t != "string" || t.length === 0)
+      throw f.invalidParameter(
+        `set() requires a non-empty component name, got ${String(t)}`
+      );
+    this.send({ type: c.FOCUS, action: Q.FOCUS, component: t });
+  }
+  /** Return to the overview — unfocus the current component. */
+  clear() {
+    this.send({ type: c.FOCUS, action: Q.UNFOCUS });
+  }
+  /**
+   * Subscribe to focus changes. The callback fires with the focus state when a
+   * component is focused, and with null when returning to overview.
+   */
+  onChange(t) {
+    this.changeCallbacks.push(t);
+  }
+  /** Called by the client when a FocusStateMessage is received from the viewer. */
+  handleStateReceived(t) {
+    t.state === kt.FOCUSED && t.component !== void 0 ? (this.focused = t.component, this.attributes = t.attributes ?? []) : (this.focused = null, this.attributes = []);
+    const e = this.focused !== null ? { component: this.focused, attributes: this.attributes } : null;
+    for (const i of this.changeCallbacks)
+      i(e);
+    this.dispatch(e);
+  }
+}
+class ce {
+  constructor(t) {
+    this.filename = t;
+  }
+  filename;
+  developedCallbacks = /* @__PURE__ */ new Set();
+  errorCallbacks = /* @__PURE__ */ new Set();
+  developed = !1;
+  failed = !1;
+  photoData = null;
+  /**
+   * Register a callback for when the photo is developed
+   * If the photo is already developed, the callback is called immediately
+   *
+   * @param callback Function to call with photo data
+   * @returns This Photo instance for chaining
+   */
+  onDeveloped(t) {
+    return this.developed && this.photoData !== null ? (t(this.photoData), this) : (this.developedCallbacks.add(t), this);
+  }
+  /**
+   * Register a callback for when the photo capture fails
+   *
+   * @param callback Function to call with error
+   * @returns This Photo instance for chaining
+   */
+  onError(t) {
+    return this.errorCallbacks.add(t), this;
+  }
+  /**
+   * Get the filename for this photo
+   */
+  getFilename() {
+    return this.filename;
+  }
+  /**
+   * Mark the photo as developed and notify all callbacks
+   * This method is called by Snapshot when the photo data arrives from the server
+   */
+  develop(t) {
+    this.developed || this.failed || (this.photoData = t, this.developed = !0, this.developedCallbacks.forEach((e) => {
+      e(this.photoData);
+    }), this.developedCallbacks.clear(), this.errorCallbacks.clear());
+  }
+  /**
+   * Mark the photo as failed and notify error callbacks
+   */
+  fail(t) {
+    this.developed || this.failed || (this.failed = !0, this.errorCallbacks.forEach((e) => {
+      e(t);
+    }), this.developedCallbacks.clear(), this.errorCallbacks.clear());
+  }
+}
+const X = 3e4;
+class 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), _.debug("Taking snapshot", { filename: t });
+    const e = new ce(t), i = setTimeout(() => {
+      this.pendingPhotos.delete(t), _.warn("Snapshot timed out", { filename: t }), e.fail(new f(
+        `Snapshot timed out: the viewer did not respond within ${X}ms`,
+        A.SNAPSHOT_FAILED
+      ));
+    }, X);
+    return this.pendingPhotos.set(t, { photo: e, timeout: i }), this.send({
+      type: c.SNAPSHOT,
+      filename: t
+    }), e;
+  }
+  /**
+   * Handle incoming snapshot result from server
+   * Matches the message to a pending photo by filename, then develops or fails it
+   */
+  handleSnapshotResult(t) {
+    const e = this.pendingPhotos.get(t.filename);
+    if (e === void 0) {
+      _.warn("No pending photo found for filename", {
+        filename: t.filename,
+        pendingFilenames: Array.from(this.pendingPhotos.keys())
+      });
+      return;
+    }
+    clearTimeout(e.timeout), this.pendingPhotos.delete(t.filename);
+    const { photo: i } = e;
+    if (t.error !== void 0) {
+      i.fail(new f(t.error, A.SNAPSHOT_FAILED));
+      return;
+    }
+    t.data !== void 0 && i.develop({ filename: t.filename, data: t.data });
+  }
+  /**
+   * Fail any pending photos and forget them. Called from client destroy
+   * so callers awaiting onError() see a deterministic outcome instead of
+   * leaking captures whose results will never arrive.
+   */
+  clear() {
+    if (this.pendingPhotos.size === 0)
+      return;
+    const t = new f(
+      "Client destroyed before snapshot completed",
+      A.SNAPSHOT_FAILED
+    );
+    for (const { photo: e, timeout: i } of this.pendingPhotos.values())
+      clearTimeout(i), e.fail(t);
+    this.pendingPhotos.clear();
+  }
+  /**
+   * Validate filename has a valid image extension
+   */
+  validateFilename(t) {
+    if (t === "" || typeof t != "string")
+      throw new f(
+        "Filename must be a non-empty string",
+        A.INVALID_PARAMETER
+      );
+    if (!this.validExtensions.some(
+      (i) => t.toLowerCase().endsWith(i)
+    ))
+      throw new f(
+        `Invalid filename: "${t}". Filename must end with one of: ${this.validExtensions.join(", ")}`,
+        A.INVALID_PARAMETER
+      );
+    if (t.includes("..") || t.includes("/") || t.includes("\\"))
+      throw new f(
+        'Filename cannot contain path separators or ".."',
+        A.INVALID_PARAMETER
+      );
+  }
+}
+class ue {
+  container = null;
+  attach(t) {
+    this.container = t;
+  }
+  dispatch(t, e, i = !1) {
+    const o = new CustomEvent(t, { detail: e, cancelable: i });
+    return this.container?.dispatchEvent(o), o;
+  }
+  on(t, e) {
+    const i = (o) => {
+      const s = o, r = { ...s.detail, preventDefault: () => {
+        s.preventDefault();
+      } };
+      e(r);
+    };
+    return this.container?.addEventListener(t, i), () => {
+      this.container?.removeEventListener(t, i);
+    };
+  }
+}
+const he = {}, me = "en", mt = (
+  /** @type {const} */
+  ["en", "nl", "de"]
+), Z = [
+  "baseLocale"
+], J = [];
+let tt, et;
+function pe(n) {
+  if (J.length === 0)
+    return;
+  const t = typeof n == "string" ? n : n.href;
+  if (tt === t)
+    return et;
+  const e = new URL(t, "http://dummy.com");
+  let i;
+  for (const o of J)
+    if (new he(o.match, e.href).exec(e.href)) {
+      i = o;
+      break;
+    }
+  return tt = t, et = i, i;
+}
+function pt(n) {
+  const t = pe(n);
+  return t && t.exclude !== !0 && Array.isArray(t.strategy) ? t.strategy : Z;
+}
+const G = typeof window > "u";
+globalThis.__paraglide = /** @type {any} */
+globalThis.__paraglide ?? {};
+globalThis.__paraglide.ssr = /** @type {any} */
+globalThis.__paraglide.ssr ?? {};
+let nt = !1, h = () => {
+  let n = Z;
+  !G && typeof window < "u" && window.location?.href && (n = pt(window.location.href));
+  const t = fe(n);
+  if (t)
+    return nt || (nt = !0, ft(t, { reload: !1 })), t;
+  throw new Error("No locale found. Read the docs https://paraglidejs.com/errors#no-locale-found");
+};
+function fe(n, t) {
+  let e;
+  for (const i of n) {
+    if (i === "baseLocale")
+      e = me;
+    else if (bt(i) && N.has(i)) {
+      const s = N.get(i);
+      if (s) {
+        const r = s.getLocale();
+        if (r instanceof Promise)
+          continue;
+        if (r !== void 0)
+          return be(r);
+      }
+    }
+    const o = gt(e);
+    if (o)
+      return o;
+  }
+}
+const ge = (n) => {
+  window.location.reload();
+};
+let ft = (n, t) => {
+  const e = {
+    reload: !0,
+    ...t
+  };
+  let i;
+  try {
+    i = h();
+  } catch {
   }
-  notifyRender() {
-    for (const t of this.renderCallbacks)
-      t();
+  const o = [];
+  let s = Z;
+  !G && typeof window < "u" && window.location?.href && (s = pt(window.location.href));
+  for (const l of s)
+    if (l !== "baseLocale" && bt(l) && N.has(l)) {
+      const u = N.get(l);
+      if (u) {
+        let d = u.setLocale(n);
+        d instanceof Promise && (d = d.catch((p) => {
+          throw new Error(`Custom strategy "${l}" setLocale failed.`, {
+            cause: p
+          });
+        }), o.push(d));
+      }
+    }
+  const r = () => {
+    !G && e.reload && window.location && n !== i && ge();
+  };
+  if (o.length)
+    return Promise.all(o).then(() => {
+      r();
+    });
+  r();
+};
+function gt(n) {
+  if (typeof n != "string")
+    return;
+  const t = n.toLowerCase();
+  for (const e of mt)
+    if (e.toLowerCase() === t)
+      return e;
+}
+function be(n) {
+  const t = gt(n);
+  if (t)
+    return t;
+  throw new Error(`Invalid locale: ${n}. Expected one of: ${mt.join(", ")}`);
+}
+const N = /* @__PURE__ */ new Map();
+function bt(n) {
+  return typeof n == "string" && /^custom-[A-Za-z0-9_-]+$/.test(n);
+}
+const ve = (
+  /** @type {(inputs: Controls_Ar_Buttonlabel1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Activate AR"
+  )
+), ye = (
+  /** @type {(inputs: Controls_Ar_Buttonlabel1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "AR activeren"
+  )
+), we = (
+  /** @type {(inputs: Controls_Ar_Buttonlabel1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "AR aktivieren"
+  )
+), _e = (
+  /** @type {((inputs?: Controls_Ar_Buttonlabel1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Ar_Buttonlabel1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? ve() : e === "nl" ? ye() : we();
+  })
+), Ce = (
+  /** @type {(inputs: Controls_Qr_Modaltitle1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Scan to view in AR"
+  )
+), Se = (
+  /** @type {(inputs: Controls_Qr_Modaltitle1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Scan om in AR te bekijken"
+  )
+), ke = (
+  /** @type {(inputs: Controls_Qr_Modaltitle1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Scannen für AR-Ansicht"
+  )
+), Ae = (
+  /** @type {((inputs?: Controls_Qr_Modaltitle1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Qr_Modaltitle1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? Ce() : e === "nl" ? Se() : ke();
+  })
+), Ee = (
+  /** @type {(inputs: Controls_Qr_Modaldescription1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Use your smartphone camera to scan this QR code"
+  )
+), xe = (
+  /** @type {(inputs: Controls_Qr_Modaldescription1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Gebruik de camera van je smartphone om deze QR-code te scannen"
+  )
+), Te = (
+  /** @type {(inputs: Controls_Qr_Modaldescription1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Verwende die Kamera deines Smartphones, um diesen QR-Code zu scannen"
+  )
+), Re = (
+  /** @type {((inputs?: Controls_Qr_Modaldescription1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Qr_Modaldescription1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? Ee() : e === "nl" ? xe() : Te();
+  })
+), Ie = (
+  /** @type {(inputs: Controls_Qr_Modalinstructions1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Your phone will open the 3D model in AR mode."
+  )
+), Oe = (
+  /** @type {(inputs: Controls_Qr_Modalinstructions1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Je telefoon opent het 3D-model in AR-modus."
+  )
+), Ne = (
+  /** @type {(inputs: Controls_Qr_Modalinstructions1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Dein Telefon öffnet das 3D-Modell im AR-Modus."
+  )
+), Le = (
+  /** @type {((inputs?: Controls_Qr_Modalinstructions1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Qr_Modalinstructions1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? Ie() : e === "nl" ? Oe() : Ne();
+  })
+), Me = (
+  /** @type {(inputs: Controls_Qr_Closebutton1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Close"
+  )
+), ze = (
+  /** @type {(inputs: Controls_Qr_Closebutton1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Sluiten"
+  )
+), Pe = (
+  /** @type {(inputs: Controls_Qr_Closebutton1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Schließen"
+  )
+), Fe = (
+  /** @type {((inputs?: Controls_Qr_Closebutton1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Qr_Closebutton1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? Me() : e === "nl" ? ze() : Pe();
+  })
+), $e = (
+  /** @type {(inputs: Controls_Fullscreen_Buttonlabel1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Fullscreen"
+  )
+), De = (
+  /** @type {(inputs: Controls_Fullscreen_Buttonlabel1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Volledig scherm"
+  )
+), Be = (
+  /** @type {(inputs: Controls_Fullscreen_Buttonlabel1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Vollbild"
+  )
+), Ue = (
+  /** @type {((inputs?: Controls_Fullscreen_Buttonlabel1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Fullscreen_Buttonlabel1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? $e() : e === "nl" ? De() : Be();
+  })
+), Ve = (
+  /** @type {(inputs: Loading_Downloadingshort1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Downloading"
+  )
+), je = (
+  /** @type {(inputs: Loading_Downloadingshort1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Downloaden"
+  )
+), He = (
+  /** @type {(inputs: Loading_Downloadingshort1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Herunterladen"
+  )
+), vt = (
+  /** @type {((inputs?: Loading_Downloadingshort1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Loading_Downloadingshort1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? Ve() : e === "nl" ? je() : He();
+  })
+), qe = (
+  /** @type {(inputs: Loading_RenderingInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Rendering"
+  )
+), Ge = (
+  /** @type {(inputs: Loading_RenderingInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Renderen"
+  )
+), Ze = (
+  /** @type {(inputs: Loading_RenderingInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Rendern"
+  )
+), We = (
+  /** @type {((inputs?: Loading_RenderingInputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Loading_RenderingInputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? qe() : e === "nl" ? Ge() : Ze();
+  })
+), Qe = (
+  /** @type {(inputs: Controls_Screenshot_Buttonlabel1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Screenshot"
+  )
+), Ye = (
+  /** @type {(inputs: Controls_Screenshot_Buttonlabel1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Screenshot"
+  )
+), Ke = (
+  /** @type {(inputs: Controls_Screenshot_Buttonlabel1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Screenshot"
+  )
+), Xe = (
+  /** @type {((inputs?: Controls_Screenshot_Buttonlabel1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Screenshot_Buttonlabel1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? Qe() : e === "nl" ? Ye() : Ke();
+  })
+), Je = (
+  /** @type {(inputs: Controls_Configurator_OpenInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Configure"
+  )
+), tn = (
+  /** @type {(inputs: Controls_Configurator_OpenInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Configureren"
+  )
+), en = (
+  /** @type {(inputs: Controls_Configurator_OpenInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Konfigurieren"
+  )
+), nn = (
+  /** @type {((inputs?: Controls_Configurator_OpenInputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Configurator_OpenInputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? Je() : e === "nl" ? tn() : en();
+  })
+), on = (
+  /** @type {(inputs: Controls_Configurator_CloseInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Close"
+  )
+), sn = (
+  /** @type {(inputs: Controls_Configurator_CloseInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Sluiten"
+  )
+), rn = (
+  /** @type {(inputs: Controls_Configurator_CloseInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Schließen"
+  )
+), an = (
+  /** @type {((inputs?: Controls_Configurator_CloseInputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Configurator_CloseInputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? on() : e === "nl" ? sn() : rn();
+  })
+), ln = (
+  /** @type {(inputs: Controls_Camera_ResetInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Reset camera"
+  )
+), cn = (
+  /** @type {(inputs: Controls_Camera_ResetInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Camera resetten"
+  )
+), dn = (
+  /** @type {(inputs: Controls_Camera_ResetInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Kamera zurücksetzen"
+  )
+), un = (
+  /** @type {((inputs?: Controls_Camera_ResetInputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Camera_ResetInputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? ln() : e === "nl" ? cn() : dn();
+  })
+), hn = (
+  /** @type {(inputs: Controls_Camera_Zoomin1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Zoom in"
+  )
+), mn = (
+  /** @type {(inputs: Controls_Camera_Zoomin1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Inzoomen"
+  )
+), pn = (
+  /** @type {(inputs: Controls_Camera_Zoomin1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Hineinzoomen"
+  )
+), fn = (
+  /** @type {((inputs?: Controls_Camera_Zoomin1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Camera_Zoomin1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? hn() : e === "nl" ? mn() : pn();
+  })
+), gn = (
+  /** @type {(inputs: Controls_Camera_Zoomout1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Zoom out"
+  )
+), bn = (
+  /** @type {(inputs: Controls_Camera_Zoomout1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Uitzoomen"
+  )
+), vn = (
+  /** @type {(inputs: Controls_Camera_Zoomout1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Herauszoomen"
+  )
+), yn = (
+  /** @type {((inputs?: Controls_Camera_Zoomout1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Camera_Zoomout1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? gn() : e === "nl" ? bn() : vn();
+  })
+), wn = (
+  /** @type {(inputs: Controls_Camera_Rotateleft1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Rotate left"
+  )
+), _n = (
+  /** @type {(inputs: Controls_Camera_Rotateleft1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Naar links draaien"
+  )
+), Cn = (
+  /** @type {(inputs: Controls_Camera_Rotateleft1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Nach links drehen"
+  )
+), Sn = (
+  /** @type {((inputs?: Controls_Camera_Rotateleft1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Camera_Rotateleft1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? wn() : e === "nl" ? _n() : Cn();
+  })
+), kn = (
+  /** @type {(inputs: Controls_Camera_Rotateright1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Rotate right"
+  )
+), An = (
+  /** @type {(inputs: Controls_Camera_Rotateright1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Naar rechts draaien"
+  )
+), En = (
+  /** @type {(inputs: Controls_Camera_Rotateright1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Nach rechts drehen"
+  )
+), xn = (
+  /** @type {((inputs?: Controls_Camera_Rotateright1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Camera_Rotateright1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? kn() : e === "nl" ? An() : En();
+  })
+), Tn = (
+  /** @type {(inputs: Controls_Camera_Tiltup1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Tilt up"
+  )
+), Rn = (
+  /** @type {(inputs: Controls_Camera_Tiltup1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Omhoog kantelen"
+  )
+), In = (
+  /** @type {(inputs: Controls_Camera_Tiltup1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Nach oben kippen"
+  )
+), On = (
+  /** @type {((inputs?: Controls_Camera_Tiltup1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Camera_Tiltup1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? Tn() : e === "nl" ? Rn() : In();
+  })
+), Nn = (
+  /** @type {(inputs: Controls_Camera_Tiltdown1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Tilt down"
+  )
+), Ln = (
+  /** @type {(inputs: Controls_Camera_Tiltdown1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Omlaag kantelen"
+  )
+), Mn = (
+  /** @type {(inputs: Controls_Camera_Tiltdown1Inputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Nach unten kippen"
+  )
+), zn = (
+  /** @type {((inputs?: Controls_Camera_Tiltdown1Inputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Camera_Tiltdown1Inputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? Nn() : e === "nl" ? Ln() : Mn();
+  })
+), Pn = (
+  /** @type {(inputs: Commerce_Submit_BusyInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Working…"
+  )
+), Fn = (
+  /** @type {(inputs: Commerce_Submit_BusyInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Bezig…"
+  )
+), $n = (
+  /** @type {(inputs: Commerce_Submit_BusyInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Läuft…"
+  )
+), Dn = (
+  /** @type {((inputs?: Commerce_Submit_BusyInputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Commerce_Submit_BusyInputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? Pn() : e === "nl" ? Fn() : $n();
+  })
+), Bn = (
+  /** @type {(inputs: Commerce_Submit_SuccessInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Done"
+  )
+), Un = (
+  /** @type {(inputs: Commerce_Submit_SuccessInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Gelukt"
+  )
+), Vn = (
+  /** @type {(inputs: Commerce_Submit_SuccessInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Fertig"
+  )
+), jn = (
+  /** @type {((inputs?: Commerce_Submit_SuccessInputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Commerce_Submit_SuccessInputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? Bn() : e === "nl" ? Un() : Vn();
+  })
+), Hn = (
+  /** @type {(inputs: Commerce_Submit_FailedInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Failed"
+  )
+), qn = (
+  /** @type {(inputs: Commerce_Submit_FailedInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Mislukt"
+  )
+), Gn = (
+  /** @type {(inputs: Commerce_Submit_FailedInputs) => LocalizedString} */
+  () => (
+    /** @type {LocalizedString} */
+    "Fehlgeschlagen"
+  )
+), Zn = (
+  /** @type {((inputs?: Commerce_Submit_FailedInputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Commerce_Submit_FailedInputs, { locale?: "en" | "nl" | "de" }, {}>} */
+  ((n = {}, t = {}) => {
+    const e = t.locale ?? h();
+    return e === "en" ? Hn() : e === "nl" ? qn() : Gn();
+  })
+);
+const Wn = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": 2,
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+};
+const yt = ([n, t, e]) => {
+  const i = document.createElementNS("http://www.w3.org/2000/svg", n);
+  return Object.keys(t).forEach((o) => {
+    i.setAttribute(o, String(t[o]));
+  }), e?.length && e.forEach((o) => {
+    const s = yt(o);
+    i.appendChild(s);
+  }), i;
+}, wt = (n, t = {}) => {
+  const i = {
+    ...Wn,
+    ...t
+  };
+  return yt(["svg", i, n]);
+};
+const Qn = [
+  [
+    "path",
+    {
+      d: "M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"
+    }
+  ],
+  ["path", { d: "m3.3 7 8.7 5 8.7-5" }],
+  ["path", { d: "M12 22V12" }]
+];
+const Yn = [
+  [
+    "path",
+    {
+      d: "M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z"
+    }
+  ],
+  ["circle", { cx: "12", cy: "13", r: "3" }]
+];
+const _t = [["path", { d: "m6 9 6 6 6-6" }]];
+const Kn = [["path", { d: "m15 18-6-6 6-6" }]];
+const Xn = [["path", { d: "m9 18 6-6-6-6" }]];
+const Jn = [["path", { d: "m18 15-6-6-6 6" }]];
+const ti = [
+  ["path", { d: "M15 3h6v6" }],
+  ["path", { d: "m21 3-7 7" }],
+  ["path", { d: "m3 21 7-7" }],
+  ["path", { d: "M9 21H3v-6" }]
+];
+const ei = [
+  ["path", { d: "m14 10 7-7" }],
+  ["path", { d: "M20 10h-6V4" }],
+  ["path", { d: "m3 21 7-7" }],
+  ["path", { d: "M4 14h6v6" }]
+];
+const ni = [
+  ["path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }],
+  ["path", { d: "M3 3v5h5" }]
+];
+const ii = [
+  ["path", { d: "M10 5H3" }],
+  ["path", { d: "M12 19H3" }],
+  ["path", { d: "M14 3v4" }],
+  ["path", { d: "M16 17v4" }],
+  ["path", { d: "M21 12h-9" }],
+  ["path", { d: "M21 19h-5" }],
+  ["path", { d: "M21 5h-7" }],
+  ["path", { d: "M8 10v4" }],
+  ["path", { d: "M8 12H3" }]
+];
+const oi = [
+  ["path", { d: "M18 6 6 18" }],
+  ["path", { d: "m6 6 12 12" }]
+];
+const si = [
+  ["circle", { cx: "11", cy: "11", r: "8" }],
+  ["line", { x1: "21", x2: "16.65", y1: "21", y2: "16.65" }],
+  ["line", { x1: "11", x2: "11", y1: "8", y2: "14" }],
+  ["line", { x1: "8", x2: "14", y1: "11", y2: "11" }]
+];
+const ri = [
+  ["circle", { cx: "11", cy: "11", r: "8" }],
+  ["line", { x1: "21", x2: "16.65", y1: "21", y2: "16.65" }],
+  ["line", { x1: "8", x2: "14", y1: "11", y2: "11" }]
+];
+function y(n, { size: t = 20, strokeWidth: e = 1.75 } = {}) {
+  return wt(n, { width: t, height: t, "stroke-width": e });
+}
+const g = {
+  ar: (n) => y(Qn, n),
+  fullscreen: (n) => y(ti, n),
+  exitFullscreen: (n) => y(ei, n),
+  screenshot: (n) => y(Yn, n),
+  tiltUp: (n) => y(Jn, n),
+  tiltDown: (n) => y(_t, n),
+  rotateLeft: (n) => y(Kn, n),
+  rotateRight: (n) => y(Xn, n),
+  zoomIn: (n) => y(si, n),
+  zoomOut: (n) => y(ri, n),
+  reset: (n) => y(ni, n),
+  configurator: (n) => y(ii, n),
+  close: (n) => y(oi, n)
+};
+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;
   }
-  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
-      };
+  setIcon(t) {
+    const e = this.element.querySelector("svg");
+    e !== null ? e.replaceWith(t) : this.element.appendChild(t);
   }
 }
-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;
+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"
+};
+class ai {
+  element;
+  constructor() {
+    this.element = document.createElement("div"), Object.assign(this.element.style, {
+      background: m.white,
+      borderRadius: a[3],
+      padding: a[6],
+      boxShadow: `0 ${a[2]} ${a[8]} oklch(0% 0 0 / 20%)`,
+      maxWidth: "20rem",
+      width: "100%"
+    });
   }
-  /**
-   * 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 });
+}
+class li {
+  constructor(t = {}) {
+    this.options = t, this.card = new ai(), this.backdrop = this.createBackdrop(), this.backdrop.appendChild(this.card.element);
   }
-  /** Return to the overview — unfocus the current component. */
-  clear() {
-    this.send({ type: c.FOCUS, action: Y.UNFOCUS });
+  options;
+  card;
+  backdrop;
+  keyHandler = null;
+  open() {
+    document.body.appendChild(this.backdrop), this.keyHandler = (t) => {
+      t.key === "Escape" && this.close();
+    }, document.addEventListener("keydown", this.keyHandler);
   }
-  /**
-   * 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);
+  close() {
+    this.backdrop.remove(), this.keyHandler !== null && (document.removeEventListener("keydown", this.keyHandler), this.keyHandler = null), this.options.onClose?.();
   }
-  /** 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);
+  createBackdrop() {
+    const t = document.createElement("div");
+    return Object.assign(t.style, {
+      position: "fixed",
+      inset: a[0],
+      background: "oklch(0% 0 0 / 50%)",
+      zIndex: "9999",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }), t.addEventListener("click", (e) => {
+      e.target === t && this.close();
+    }), t;
   }
 }
-class di {
-  constructor(t) {
-    this.filename = t;
+class ci {
+  element;
+  selectCallback = null;
+  constructor(t, e, i) {
+    this.element = document.createElement("div"), this.element.className = "ui-toggle-group";
+    for (let o = 0; o < t.length; o++) {
+      const s = t[o], r = document.createElement("button");
+      r.className = "ui-toggle-group-item", r.dataset.value = s, r.textContent = i?.[o] ?? s, r.dataset.state = s === e ? "on" : "off", r.setAttribute("aria-pressed", s === e ? "true" : "false"), r.addEventListener("click", () => {
+        this.selectCallback?.(s);
+      }), this.element.appendChild(r);
+    }
   }
-  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);
+  setSelected(t) {
+    for (const e of this.element.querySelectorAll(".ui-toggle-group-item")) {
+      const i = e.dataset.value === t;
+      e.dataset.state = i ? "on" : "off", e.setAttribute("aria-pressed", i ? "true" : "false");
+    }
+  }
+  onSelect(t) {
+    this.selectCallback = t;
   }
-  /**
-   * 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;
+}
+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 d = 0; d < e.length; d++) {
+      const p = e[d], v = document.createElement("option");
+      v.value = p, v.textContent = s?.[d] ?? p, p === o && (v.selected = !0, l = !0), this.select.appendChild(v);
+    }
+    l || (r.selected = !0);
+    const u = wt(_t, { width: 16, height: 16, "stroke-width": 2 });
+    u.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(u);
   }
-  /**
-   * Get the filename for this photo
-   */
-  getFilename() {
-    return this.filename;
+  setSelected(t) {
+    this.select.value = t;
   }
-  /**
-   * 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());
+  onSelect(t) {
+    this.select.addEventListener("change", () => {
+      t(this.select.value);
+    });
   }
-  /**
-   * 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 w = {
+  fontFamily: {
+    sans: ["Mona Sans", "ui-sans-serif", "system-ui", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"]
+  },
+  fontSize: {
+    xs: "0.75rem",
+    // 12px
+    sm: "0.875rem",
+    // 14px
+    base: "1rem",
+    // 16px
+    lg: "1.125rem"
+  },
+  fontWeight: {
+    medium: "500",
+    semibold: "600"
   }
+}, x = w.fontFamily.sans.join(", "), ui = `
+  --primary: oklch(5% 0 0);
+  --primary-foreground: oklch(100% 0 0);
+  --secondary: oklch(92% 0 0);
+  --secondary-foreground: oklch(5% 0 0);
+  --background: oklch(100% 0 0);
+  --foreground: oklch(5% 0 0);
+  --border: oklch(92% 0 0);
+  --ring: oklch(44% 0 0);
+  --radius: 0.625rem;
+  --accent: oklch(92% 0 0);
+  --accent-foreground: oklch(5% 0 0);
+  --muted-foreground: oklch(44% 0 0);
+`, hi = `
+:root { ${ui} }
+
+/* ── 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;
 }
-const it = 3e4;
-class hi {
-  constructor(t) {
-    this.send = t;
+.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;
   }
-  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;
+}
+
+@keyframes vd-popup-in {
+  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
+  to { opacity: 1; transform: translateX(-50%) translateY(0); }
+}
+
+.vd-annotation-popup-title {
+  font-family: ${x};
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.25rem;
+  /* Keep the title clear of the absolutely positioned close button. */
+  padding-inline-end: 1.5rem;
+}
+
+.vd-annotation-popup-description {
+  font-family: ${x};
+  font-size: 0.8125rem;
+  font-weight: 400;
+  line-height: 1.125rem;
+  color: var(--muted-foreground);
+  margin-block-start: 0.25rem;
+}
+
+/* ── QR modal ────────────────────────────────────────────── */
+/* The slot the QR renders into. While loading it is a calm pulsing
+   placeholder of the same size, so the modal opens instantly and the QR
+   swaps in without any layout shift. */
+.ui-qr-slot {
+  inline-size: 6rem;
+  block-size: 6rem;
+  border-radius: 0.25rem;
+  overflow: hidden;
+}
+
+.ui-qr-slot img {
+  inline-size: 100%;
+  block-size: 100%;
+  display: block;
+}
+
+.ui-qr-slot--loading {
+  background: var(--secondary);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .ui-qr-slot--loading {
+    animation: vd-qr-pulse 1.6s ease-in-out infinite;
   }
-  /**
-   * 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 });
+}
+
+@keyframes vd-qr-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.55; }
+}
+`;
+let it = !1;
+function Ct() {
+  if (it || typeof document > "u")
+    return;
+  it = !0;
+  const n = document.createElement("style");
+  n.id = "vd-ui-vanilla", n.textContent = hi, document.head.appendChild(n);
+}
+const mi = w.fontFamily.sans.join(", ");
+class pi {
+  qrLib = null;
+  dialog = null;
+  qrSlot = null;
+  /** Open the modal immediately, with a loading placeholder in the QR slot. */
+  show() {
+    this.hide(), Ct(), this.dialog = new li({ onClose: () => {
+      this.dialog = null, this.qrSlot = null;
+    } }), Object.assign(this.dialog.card.element.style, {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: a[3],
+      fontFamily: mi
+    }), this.dialog.card.element.appendChild(this.createText(Ae(), {
+      fontSize: w.fontSize.base,
+      fontWeight: w.fontWeight.semibold,
+      color: m.neutral[900]
+    })), this.dialog.card.element.appendChild(this.createText(Re(), {
+      fontSize: w.fontSize.sm,
+      color: m.neutral[600]
+    })), this.qrSlot = this.createQrSlot(), this.dialog.card.element.appendChild(this.qrSlot), this.dialog.card.element.appendChild(this.createText(Le(), {
+      fontSize: w.fontSize.xs,
+      color: m.neutral[500]
+    }));
+    const t = new b({
+      variant: "outline",
+      label: Fe(),
+      onClick: () => {
+        this.hide();
+      }
+    });
+    this.dialog.card.element.appendChild(t.element), this.dialog.open();
   }
   /**
-   * 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.
+   * Render the QR for `url` into the open modal's slot, replacing the loading
+   * placeholder. Resolves `true` once the QR is actually on screen; `false`
+   * when the modal was closed before it could render (nothing reopens).
    */
-  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();
+  async update(t) {
+    this.qrLib ??= await import("./browser-ey6Iih3j.js").then((i) => i.b);
+    const e = await this.qrLib.toDataURL(t, {
+      width: 256,
+      margin: 4,
+      errorCorrectionLevel: "M",
+      color: { dark: m.black, light: m.white }
+    });
+    return this.qrSlot === null ? !1 : (this.qrSlot.classList.remove("ui-qr-slot--loading"), this.qrSlot.replaceChildren(this.createQrImage(e)), !0);
   }
-  /**
-   * 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
-      );
+  hide() {
+    this.dialog?.close(), this.dialog = null, this.qrSlot = null;
   }
-}
-class mi {
-  container = null;
-  attach(t) {
-    this.container = t;
+  createText(t, e) {
+    const i = document.createElement("p");
+    return i.textContent = t, Object.assign(i.style, { margin: "0", textAlign: "center", ...e }), i;
   }
-  dispatch(t, e, i = !1) {
-    const o = new CustomEvent(t, { detail: e, cancelable: i });
-    return this.container?.dispatchEvent(o), o;
+  createQrSlot() {
+    const t = document.createElement("div");
+    return t.className = "ui-qr-slot ui-qr-slot--loading", t;
   }
-  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);
-    };
+  createQrImage(t) {
+    const e = document.createElement("img");
+    return e.src = t, e.alt = "QR code", e;
   }
 }
-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 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;
+function fi(n, t, e, i, o, s) {
+  const [r, l, u] = n, d = Math.cos(t), p = Math.sin(t), v = d * r + p * u, E = -p * r + d * u, k = Math.cos(e), S = Math.sin(e), R = k * l - S * E, M = S * l + k * E, W = 0.55;
   return [i + v * s * W, o - R * s * W, M];
 }
-function fi(n, t, e) {
+function gi(n, t, e) {
   n.beginPath(), n.moveTo(t[0], t[1]), n.lineTo(e[0], e[1]), n.strokeStyle = "#000", n.lineWidth = 2, n.stroke();
 }
-function gi(n, t, e, i, o) {
+function bi(n, t, e, i, o) {
   const s = t(e), r = t(i), l = [
     s[0] + (r[0] - s[0]) * o,
     s[1] + (r[1] - s[1]) * o,
     s[2]
   ];
-  fi(n, s, l);
+  gi(n, s, l);
 }
-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, $],
+const z = [-1, -1, 1], P = [1, -1, 1], F = [1, -1, -1], $ = [-1, -1, -1], D = [-1, 1, 1], B = [1, 1, 1], U = [1, 1, -1], V = [-1, 1, -1], st = [
+  [z, P],
+  [P, F],
+  [F, $],
   [$, z],
   [z, D],
-  [F, B],
-  [P, U],
+  [P, B],
+  [F, U],
   [$, V],
   [D, B],
   [B, U],
   [U, V],
   [V, D]
-], bi = 400, rt = '-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif';
-function vi() {
+], vi = 400, rt = '-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif';
+function yi() {
   const n = document.createElement("div");
   Object.assign(n.style, {
     position: "absolute",
@@ -2352,9 +2417,9 @@ function vi() {
     fontSize: "13px",
     color: "#000",
     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 };
+  }), o.textContent = vt(), e.appendChild(i), e.appendChild(o), n.appendChild(t), n.appendChild(e), { overlay: n, canvas: t, pctEl: i, phaseEl: o };
 }
-class yi {
+class wi {
   overlay;
   canvas;
   ctx;
@@ -2367,17 +2432,17 @@ class yi {
   visible = !1;
   constructor(t, e = {}) {
     this.startTime = performance.now();
-    const i = vi();
+    const i = yi();
     this.overlay = i.overlay, this.canvas = i.canvas, this.pctEl = i.pctEl, this.phaseEl = i.phaseEl, t.appendChild(this.overlay), this.ctx = this.canvas.getContext("2d"), this.ctx !== null && (this.sizeCanvas(), this.tick());
-    const o = e.showDelay ?? bi;
+    const o = e.showDelay ?? vi;
     this.showTimerId = setTimeout(() => {
       this.reveal();
     }, o);
   }
   get loadingTexts() {
     return {
-      downloading: gt(),
-      rendering: Pe()
+      downloading: vt(),
+      rendering: We()
     };
   }
   updateProgress(t, e) {
@@ -2430,15 +2495,15 @@ class yi {
       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 = (C) => pi(C, l, d, o, s, r), p = 6, v = i % p / p, A = st.length;
-    let S;
-    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];
+    const o = t / 2, s = e * 0.44, r = Math.min(t, e) * 0.08, l = 0.785, u = 0.615, d = (S) => fi(S, l, u, o, s, r), p = 6, v = i % p / p, E = st.length;
+    let k;
+    v < 0.35 ? k = ot(v / 0.35) * E : v < 0.55 ? k = E : v < 0.9 ? k = (1 - ot((v - 0.55) / 0.35)) * E : k = 0, this.ctx.shadowBlur = 5, this.ctx.shadowColor = "rgba(30,30,30,0.08)";
+    for (let S = 0; S < E && !(S >= k); S++) {
+      const R = st[S];
       if (R === void 0)
         continue;
-      const M = Math.min(1, S - C);
-      gi(this.ctx, u, R[0], R[1], M);
+      const M = Math.min(1, k - S);
+      bi(this.ctx, d, R[0], R[1], M);
     }
     this.ctx.shadowBlur = 0;
   }
@@ -2455,7 +2520,7 @@ class _i {
   fullscreenBtn = null;
   onFullscreenChange;
   setFullscreenIcon(t) {
-    this.fullscreenBtn !== null && this.fullscreenBtn.setIcon(t ? b.exitFullscreen() : b.fullscreen());
+    this.fullscreenBtn !== null && this.fullscreenBtn.setIcon(t ? g.exitFullscreen() : g.fullscreen());
   }
   syncButton(t, e, i) {
     if (e && t === null) {
@@ -2465,19 +2530,19 @@ class _i {
     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 g({
+    this.arBtn = this.syncButton(this.arBtn, t.ar !== !1 && this.options.onAr !== void 0, () => new b({
       variant: "outline",
       size: "icon",
-      label: ue(),
-      icon: b.ar(),
+      label: _e(),
+      icon: g.ar(),
       onClick: () => {
         this.options.onAr?.();
       }
-    })), this.fullscreenBtn = this.syncButton(this.fullscreenBtn, t.fullscreen !== !1 && this.options.onFullscreen !== void 0, () => new g({
+    })), this.fullscreenBtn = this.syncButton(this.fullscreenBtn, t.fullscreen !== !1 && this.options.onFullscreen !== void 0, () => new b({
       variant: "outline",
       size: "icon",
-      label: Ie(),
-      icon: b.fullscreen(),
+      label: Ue(),
+      icon: g.fullscreen(),
       onClick: () => {
         this.options.onFullscreen?.();
       }
@@ -2497,9 +2562,9 @@ class L {
       targetTilt: e.tilt,
       targetZoom: e.zoom,
       thetaOffset: 0
-    }, o = wi(t, e, i);
+    }, o = Ci(t, e, i);
     e.onChange((s) => {
-      i.targetRotation = s.rotation - i.thetaOffset, i.targetTilt = s.tilt, i.targetZoom = s.zoom, Ci(o, e, s);
+      i.targetRotation = s.rotation - i.thetaOffset, i.targetTilt = s.tilt, i.targetZoom = s.zoom, Si(o, e, s);
     }), this.element.appendChild(L.buildZoom(o.zoomOut, o.zoomIn)), this.element.appendChild(L.buildDpad(o.tiltUp, o.rotateLeft, o.reset, o.rotateRight, o.tiltDown));
   }
   static buildZoom(t, e) {
@@ -2509,55 +2574,55 @@ class L {
   static buildDpad(t, e, i, o, s) {
     const r = document.createElement("div");
     r.className = "vd-dpad";
-    for (const [l, d] of [
+    for (const [l, u] of [
       [t, "up"],
       [e, "left"],
       [i, "center"],
       [o, "right"],
       [s, "down"]
     ])
-      l.element.classList.add(`vd-dpad-${d}`), r.appendChild(l.element);
+      l.element.classList.add(`vd-dpad-${u}`), r.appendChild(l.element);
     return r;
   }
 }
-function wi(n, t, e) {
+function Ci(n, t, e) {
   const i = (r) => Math.max(t.limits?.minZoom ?? 1, Math.min(t.limits?.maxZoom ?? 1 / 0, r)), o = (r) => {
-    const l = t.limits?.minRotate, d = t.limits?.maxRotate;
-    return l !== void 0 || d !== void 0 ? Math.max(l ?? -1 / 0, Math.min(d ?? 1 / 0, r)) : r;
+    const l = t.limits?.minRotate, u = t.limits?.maxRotate;
+    return l !== void 0 || u !== void 0 ? Math.max(l ?? -1 / 0, Math.min(u ?? 1 / 0, r)) : r;
   }, s = (r) => {
-    const l = t.limits?.minTilt, d = t.limits?.maxTilt;
-    if (l !== void 0 || d !== void 0) {
-      e.targetTilt = Math.max(l ?? 0, Math.min(d ?? 180, e.targetTilt + r)), n.tilt(e.targetTilt).set();
+    const l = t.limits?.minTilt, u = t.limits?.maxTilt;
+    if (l !== void 0 || u !== void 0) {
+      e.targetTilt = Math.max(l ?? 0, Math.min(u ?? 180, e.targetTilt + r)), n.tilt(e.targetTilt).set();
       return;
     }
-    const u = e.targetTilt + r;
-    u > 180 || u < 0 ? (e.targetTilt = u > 180 ? 360 - u : -u, e.thetaOffset = (e.thetaOffset + 180) % 360, n.tilt(e.targetTilt).rotate(e.targetRotation + e.thetaOffset).set()) : (e.targetTilt = u, n.tilt(e.targetTilt).set());
+    const d = e.targetTilt + r;
+    d > 180 || d < 0 ? (e.targetTilt = d > 180 ? 360 - d : -d, e.thetaOffset = (e.thetaOffset + 180) % 360, n.tilt(e.targetTilt).rotate(e.targetRotation + e.thetaOffset).set()) : (e.targetTilt = d, n.tilt(e.targetTilt).set());
   };
   return {
-    zoomOut: new g({ variant: "outline", size: "icon", label: ln(), icon: b.zoomOut(), onClick: () => {
+    zoomOut: new b({ variant: "outline", size: "icon", label: yn(), icon: g.zoomOut(), onClick: () => {
       e.targetZoom = i(e.targetZoom - 10), n.zoom(e.targetZoom).set();
     } }),
-    zoomIn: new g({ variant: "outline", size: "icon", label: on(), icon: b.zoomIn(), onClick: () => {
+    zoomIn: new b({ variant: "outline", size: "icon", label: fn(), icon: g.zoomIn(), onClick: () => {
       e.targetZoom = i(e.targetZoom + 10), n.zoom(e.targetZoom).set();
     } }),
-    tiltUp: new g({ variant: "outline", size: "icon", label: _n(), icon: b.tiltUp(), onClick: () => {
+    tiltUp: new b({ variant: "outline", size: "icon", label: On(), icon: g.tiltUp(), onClick: () => {
       s(-15);
     } }),
-    rotateLeft: new g({ variant: "outline", size: "icon", label: hn(), icon: b.rotateLeft(), onClick: () => {
+    rotateLeft: new b({ variant: "outline", size: "icon", label: Sn(), icon: g.rotateLeft(), onClick: () => {
       e.targetRotation = o(e.targetRotation - 15), n.rotate(e.targetRotation + e.thetaOffset).set();
     } }),
-    reset: new g({ variant: "outline", size: "icon", label: Je(), icon: b.reset(), onClick: () => {
+    reset: new b({ variant: "outline", size: "icon", label: un(), icon: g.reset(), onClick: () => {
       e.thetaOffset = 0, n.reset();
     } }),
-    rotateRight: new g({ variant: "outline", size: "icon", label: gn(), icon: b.rotateRight(), onClick: () => {
+    rotateRight: new b({ variant: "outline", size: "icon", label: xn(), icon: g.rotateRight(), onClick: () => {
       e.targetRotation = o(e.targetRotation + 15), n.rotate(e.targetRotation + e.thetaOffset).set();
     } }),
-    tiltDown: new g({ variant: "outline", size: "icon", label: Sn(), icon: b.tiltDown(), onClick: () => {
+    tiltDown: new b({ variant: "outline", size: "icon", label: zn(), icon: g.tiltDown(), onClick: () => {
       s(15);
     } })
   };
 }
-function Ci(n, t, e) {
+function Si(n, t, e) {
   const i = t.limits;
   i !== void 0 && (n.zoomOut.element.disabled = i.minZoom !== void 0 && e.zoom <= i.minZoom + T, n.zoomIn.element.disabled = i.maxZoom !== void 0 && e.zoom >= i.maxZoom - T, n.tiltUp.element.disabled = i.minTilt !== void 0 && e.tilt <= i.minTilt + T, n.tiltDown.element.disabled = i.maxTilt !== void 0 && e.tilt >= i.maxTilt - T, n.rotateLeft.element.disabled = i.minRotate !== void 0 && e.rotation <= i.minRotate + T, n.rotateRight.element.disabled = i.maxRotate !== void 0 && e.rotation >= i.maxRotate - T);
 }
@@ -2573,7 +2638,7 @@ const I = {
   /** Configuration submitted (bubbles). `detail`: the resolved configuration handed to the host. */
   CONFIGURATION_SUBMIT: "vd:configuration-submit"
 }, ki = 5;
-let Si = 0;
+let Ai = 0;
 function j(n) {
   const t = n.replace(/([A-Z])/g, " $1").trim();
   return t.charAt(0).toUpperCase() + t.slice(1).toLowerCase();
@@ -2582,20 +2647,20 @@ 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-${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) => {
+  r.className = "vd-attribute-label", r.textContent = j(n.name), r.id = `vd-attribute-label-${Ai++}`, s.appendChild(r), s.setAttribute("role", "group"), s.setAttribute("aria-labelledby", r.id);
+  const l = n.values.find((p) => t.getValue(n.name, p)?.isSelected === !0), u = n.values.map(j), d = n.values.length <= ki ? new ci(n.values, l, u) : new di(n.name, n.values, j(n.name), l, u);
+  return d.onSelect((p) => {
     e.dispatch(I.SELECT, { attribute: n.name, value: p }, !0).defaultPrevented || i(n.name, p);
   }), o(n.name, (p) => {
-    u.setSelected(p.value), e.dispatch(I.SELECTED, { attribute: n.name, value: p.value });
-  }), s.appendChild(u.element), s;
+    d.setSelected(p.value), e.dispatch(I.SELECTED, { attribute: n.name, value: p.value });
+  }), s.appendChild(d.element), s;
 }
-const Ai = 80, xi = 2500;
-class Ti {
-  constructor(t, e = xi) {
+const xi = 80, Ti = 2500;
+class Ri {
+  constructor(t, e = Ti) {
     this.configuration = t, this.resetMs = e, this.element = document.createElement("div"), this.element.className = "vd-commerce vd-hidden";
     const i = document.createElement("div");
-    i.className = "vd-commerce-price", this.priceEl = document.createElement("span"), this.priceEl.className = "vd-price", this.vatEl = document.createElement("span"), this.vatEl.className = "vd-vat", i.append(this.priceEl, this.vatEl), this.button = new g({ 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 b({ variant: "default", onClick: () => {
       this.handleSubmit();
     } }), this.button.element.classList.add("vd-cta", "vd-hidden"), this.element.append(i, this.button.element), this.unsubscribe = this.configuration.onRender(() => {
       this.update();
@@ -2624,7 +2689,7 @@ class Ti {
       this.priceEl.textContent = "", this.vatEl.textContent = "";
       return;
     }
-    this.priceEl.textContent = Ri(t.price, t.currency), this.vatEl.textContent = at(this.configuration.vatDisplay);
+    this.priceEl.textContent = Ii(t.price, t.currency), this.vatEl.textContent = at(this.configuration.vatDisplay);
   }
   renderButton() {
     const t = this.configuration.submitEnabled;
@@ -2632,11 +2697,11 @@ class Ti {
   }
   async handleSubmit() {
     if (this.state !== "busy") {
-      this.setState("busy", Tn());
+      this.setState("busy", Dn());
       try {
-        await this.configuration.submit(), this.setState("success", Nn());
+        await this.configuration.submit(), this.setState("success", jn());
       } catch {
-        this.setState("failed", Fn());
+        this.setState("failed", Zn());
       }
       this.scheduleReset();
     }
@@ -2654,9 +2719,9 @@ class Ti {
   }
 }
 function at(n) {
-  return (n ?? "").slice(0, Ai);
+  return (n ?? "").slice(0, xi);
 }
-function Ri(n, t) {
+function Ii(n, t) {
   try {
     const e = new Intl.NumberFormat(h(), { style: "currency", currency: t }), i = e.resolvedOptions().maximumFractionDigits ?? 2;
     return e.format(n / 10 ** i);
@@ -2664,7 +2729,7 @@ function Ri(n, t) {
     return `${t} ${(n / 100).toFixed(2)}`;
   }
 }
-class Ct {
+class St {
   slot = null;
   panel = null;
   attach(t, e) {
@@ -2677,8 +2742,8 @@ class Ct {
     this.slot?.remove(), this.slot = null, this.panel = null;
   }
 }
-const Ii = 572;
-class Oi {
+const Oi = 572;
+class Ni {
   element = null;
   body = null;
   openButton = null;
@@ -2689,21 +2754,21 @@ class Oi {
   expanded = !0;
   visible = !1;
   attach(t, e) {
-    this.container = t, e.classList.add("vd-attributes-sidebar"), this.closeButton = new g({
+    this.container = t, e.classList.add("vd-attributes-sidebar"), this.closeButton = new b({
       variant: "ghost",
       size: "icon-sm",
-      label: Ye(),
-      icon: b.close({ size: 18 }),
+      label: an(),
+      icon: g.close({ size: 18 }),
       onClick: () => {
         this.expanded = !1, this.render();
       }
     });
     const i = document.createElement("div");
-    i.className = "vd-sidebar-header", i.appendChild(this.closeButton.element), this.body = document.createElement("div"), this.body.className = "vd-sidebar-body", this.body.appendChild(e), this.element = document.createElement("div"), this.element.className = "vd-sidebar vd-hidden", this.element.append(i, this.body), t.appendChild(this.element), this.openButton = new g({
+    i.className = "vd-sidebar-header", i.appendChild(this.closeButton.element), this.body = document.createElement("div"), this.body.className = "vd-sidebar-body", this.body.appendChild(e), this.element = document.createElement("div"), this.element.className = "vd-sidebar vd-hidden", this.element.append(i, this.body), t.appendChild(this.element), this.openButton = new b({
       variant: "outline",
       size: "default",
-      label: Ge(),
-      icon: b.configurator({ size: 18 }),
+      label: nn(),
+      icon: g.configurator({ size: 18 }),
       onClick: () => {
         this.expanded = !0, this.render();
       }
@@ -2713,12 +2778,16 @@ class Oi {
     this.visible = t, this.render();
   }
   destroy() {
-    this.observer?.disconnect(), this.observer = null, this.openButton?.element.remove(), this.element?.remove(), this.container?.classList.remove("vd-layout-sidebar-right", "vd-layout-sidebar-collapsed"), this.container = null;
+    this.observer?.disconnect(), this.observer = null, this.openButton?.element.remove(), this.element?.remove(), this.container?.classList.remove(
+      "vd-layout-sidebar-right",
+      "vd-layout-sidebar-collapsed",
+      "vd-layout-sidebar-permanent"
+    ), this.container = null;
   }
   observe() {
     typeof ResizeObserver > "u" || this.container === null || (this.observer = new ResizeObserver((t) => {
       const e = t[0]?.contentRect.width ?? 0;
-      this.setCollapsible(e > 0 && e < Ii);
+      this.setCollapsible(e > 0 && e < Oi);
     }), this.observer.observe(this.container));
   }
   setCollapsible(t) {
@@ -2728,10 +2797,10 @@ class Oi {
     if (this.element === null || this.openButton === null || this.closeButton === null || this.container === null)
       return;
     const t = this.visible && this.expanded, e = this.visible && !this.expanded;
-    this.element.classList.toggle("vd-hidden", !this.visible), this.element.classList.toggle("vd-sidebar-collapsed", e), this.openButton.element.classList.toggle("vd-hidden", !e), this.closeButton.element.style.display = this.collapsible ? "" : "none", this.container.classList.toggle("vd-layout-sidebar-right", t), this.container.classList.toggle("vd-layout-sidebar-collapsed", e);
+    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), this.container.classList.toggle("vd-layout-sidebar-permanent", t && !this.collapsible);
   }
 }
-class Ni {
+class Li {
   attach(t, e) {
   }
   setVisible(t) {
@@ -2739,20 +2808,20 @@ class Ni {
   destroy() {
   }
 }
-const Li = {
-  "inframe-bottom-left": () => new Ct(),
-  "sidebar-right": () => new Oi(),
-  hidden: () => new Ni()
+const Mi = {
+  "inframe-bottom-left": () => new St(),
+  "sidebar-right": () => new Ni(),
+  hidden: () => new Li()
 };
-function Mi(n) {
-  return (Li[n ?? ""] ?? (() => new Ct()))();
+function zi(n) {
+  return (Mi[n ?? ""] ?? (() => new St()))();
 }
-const H = _.fontFamily.sans.join(", "), G = `
+const H = w.fontFamily.sans.join(", "), q = `
   position: absolute;
   display: flex;
   z-index: 10;
   transition: inset-inline-end 0.18s ease;
-`, zi = `
+`, Pi = `
 /* Override browser's default black fullscreen backdrop */
 .vd-container:fullscreen {
   background: oklch(100% 0 0);
@@ -2760,7 +2829,7 @@ const H = _.fontFamily.sans.join(", "), G = `
 
 /* Layout slots — four corners */
 .vd-slot-top-right {
-  ${G}
+  ${q}
   inset-block-start: ${a[3]};
   inset-inline-end: ${a[3]};
   flex-direction: column;
@@ -2769,7 +2838,7 @@ const H = _.fontFamily.sans.join(", "), G = `
 }
 
 .vd-slot-bottom-left {
-  ${G}
+  ${q}
   inset-block-end: ${a[3]};
   inset-inline-start: ${a[3]};
   flex-direction: column;
@@ -2778,7 +2847,7 @@ const H = _.fontFamily.sans.join(", "), G = `
 }
 
 .vd-slot-bottom-right {
-  ${G}
+  ${q}
   inset-block-end: ${a[3]};
   inset-inline-end: ${a[3]};
   flex-direction: row;
@@ -2835,8 +2904,8 @@ const H = _.fontFamily.sans.join(", "), G = `
 
 /* Micro-label: recedes so the controls lead. */
 .vd-attribute-label {
-  font-size: ${_.fontSize.xs};
-  font-weight: ${_.fontWeight.medium};
+  font-size: ${w.fontSize.xs};
+  font-weight: ${w.fontWeight.medium};
   color: ${m.neutral[500]};
   text-transform: uppercase;
   letter-spacing: 0.05em;
@@ -2846,6 +2915,21 @@ const H = _.fontFamily.sans.join(", "), G = `
 /* sidebar-right layout — a docked, full-height right panel */
 .vd-container { --vd-sidebar-width: 300px; }
 
+.vd-container > iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  display: block;
+}
+
+/* Permanently docked panel (wide embeds, not collapsible): the viewer fills the
+   remaining width instead of the panel floating over it. On narrow embeds the
+   panel is a temporary tap-to-reveal overlay instead (vd-layout-sidebar-right
+   without -permanent), where covering part of the model briefly is expected. */
+.vd-container.vd-layout-sidebar-permanent > iframe {
+  width: calc(100% - var(--vd-sidebar-width));
+}
+
 .vd-hidden { display: none !important; }
 
 .vd-sidebar {
@@ -2927,13 +3011,13 @@ const H = _.fontFamily.sans.join(", "), G = `
 }
 
 .vd-price {
-  font-size: ${_.fontSize.lg};
-  font-weight: ${_.fontWeight.semibold};
+  font-size: ${w.fontSize.lg};
+  font-weight: ${w.fontWeight.semibold};
   color: ${m.neutral[900]};
 }
 
 .vd-vat {
-  font-size: ${_.fontSize.xs};
+  font-size: ${w.fontSize.xs};
   color: ${m.neutral[500]};
 }
 
@@ -2951,16 +3035,16 @@ const H = _.fontFamily.sans.join(", "), G = `
 
 `;
 function Fi() {
-  if (Un(), document.getElementById("vd-styles") !== null)
+  if (Ct(), document.getElementById("vd-styles") !== null)
     return;
   const n = document.createElement("style");
-  n.id = "vd-styles", n.textContent = zi, document.head.appendChild(n);
+  n.id = "vd-styles", n.textContent = Pi, document.head.appendChild(n);
 }
-function Pi(n, t) {
+function $i(n, t) {
   const e = document.createElement("a");
   e.href = `data:image/png;base64,${n}`, e.download = t, e.click();
 }
-class $i {
+class Di {
   options;
   settings = {};
   container = null;
@@ -2976,7 +3060,7 @@ class $i {
     this.options = t;
   }
   attach(t) {
-    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");
+    Fi(), this.container = t, this.loading = new wi(t), this.slots.topRight = this.createSlot(t, "vd-slot-top-right"), this.slots.bottomRight = this.createSlot(t, "vd-slot-bottom-right");
   }
   onReady() {
     this.loading?.hide(), this.loading = null, this.mountToolbar(), this.cameraControls !== null && (this.cameraControls.element.style.display = "flex"), this.layout?.setVisible(!0);
@@ -3002,7 +3086,7 @@ class $i {
     this.loading?.showError(t);
   }
   applyViewerSettings(t) {
-    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();
+    this.settings = t, t.language !== void 0 && ft(t.language, { reload: !1 }), this.syncScreenshotButton(), this.actionBar?.applySettings(t), this.cameraControls !== null && (this.cameraControls.element.style.display = t.cameraControls === !0 ? "flex" : "none"), this.placeScreenshotButton();
   }
   renderAttributeControls(t, e) {
     if (!(this.container === null || this.slots.topRight === null) && (this.cameraControls?.element.remove(), this.cameraControls = null, this.teardownConfigurator(), this.settings.cameraControls === !0 && (this.cameraControls = new L(this.options.cameraApi, this.options.cameraPositionApi), this.cameraControls.element.style.display = "none", this.slots.topRight.appendChild(this.cameraControls.element)), this.placeScreenshotButton(), e.length !== 0)) {
@@ -3015,7 +3099,7 @@ class $i {
           this.options.onSelect,
           this.options.onSubscribe
         ));
-      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);
+      this.commerce = new Ri(this.options.configuration), this.attributes.appendChild(this.commerce.element), this.layout = zi(this.settings.configuratorLayout), this.layout.attach(this.container, this.attributes);
     }
   }
   get viewerSettings() {
@@ -3037,14 +3121,14 @@ class $i {
   }
   syncScreenshotButton() {
     const t = this.settings.screenshot === !0;
-    t && this.screenshotBtn === null && (this.screenshotBtn = new g({
+    t && this.screenshotBtn === null && (this.screenshotBtn = new b({
       variant: "outline",
       size: "icon",
-      label: Ue(),
-      icon: b.screenshot(),
+      label: Xe(),
+      icon: g.screenshot(),
       onClick: () => {
         this.options.snapshotApi.take("snapshot.png").onDeveloped(({ data: e, filename: i }) => {
-          Pi(e, i);
+          $i(e, i);
         });
       }
     })), !t && this.screenshotBtn !== null && (this.screenshotBtn.element.remove(), this.screenshotBtn = null);
@@ -3053,8 +3137,8 @@ class $i {
     this.screenshotBtn === null || this.slots.topRight === null || (this.cameraControls !== null ? this.cameraControls.element.appendChild(this.screenshotBtn.element) : this.slots.topRight.appendChild(this.screenshotBtn.element));
   }
 }
-const Di = {};
-class Bi {
+const Bi = {};
+class Ui {
   defaultServer = "https://server.virtualdisplay.io";
   options;
   serverHost;
@@ -3079,24 +3163,19 @@ class Bi {
   }
   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;
+    return t.src = this.buildUrl(), t.setAttribute("allow", "xr-spatial-tracking; fullscreen"), t;
   }
   attachToParent(t) {
     this.getParentElement().appendChild(t);
   }
   buildUrl() {
     const t = this.getServerUrl(), e = new URL(t);
-    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();
+    return e.searchParams.set("license", this.options.license), e.searchParams.set("model", this.options.model), this.options.language !== void 0 && e.searchParams.set("language", this.options.language), this.options.session !== void 0 && e.searchParams.set("session", this.options.session), this.options.debug === !0 && e.searchParams.set("debug", "true"), this.options.traceparent !== void 0 && e.searchParams.set("traceparent", this.options.traceparent), e.toString();
   }
   getServerUrl() {
     if (this.serverHost !== void 0)
       return this.serverHost;
-    if (Di?.VITE_VIRTUALDISPLAY_SERVER_HOST === void 0)
+    if (Bi?.VITE_VIRTUALDISPLAY_SERVER_HOST === void 0)
       return this.defaultServer;
   }
   getParentElement() {
@@ -3108,42 +3187,44 @@ class Bi {
     return t;
   }
 }
-function Ui(n) {
+function Vi(n) {
   const { messenger: t } = n;
   t.on(c.HANDSHAKE, (e) => {
-    xt(e) && (w.info("Server handshake received, flushing publisher queue"), t.markReady());
+    Tt(e) && (_.info("Server handshake received, flushing publisher queue"), t.markReady());
   }), t.on(c.SESSION, (e) => {
-    Tt(e) && n.onSession(e.sessionId);
+    Rt(e) && n.onSession(e.sessionId);
   }), t.on(c.MUTATION, (e) => {
-    Rt(e) && (n.attributes.handleMutationResult(e), n.configuration.handleSelectionChanged(n.attributes.getSelection()));
+    It(e) && (n.attributes.handleMutationResult(e), n.configuration.handleSelectionChanged(n.attributes.getSelection()));
   }), t.on(c.SNAPSHOT, (e) => {
-    It(e) && n.snapshot.handleSnapshotResult(e);
+    Ot(e) && n.snapshot.handleSnapshotResult(e);
   }), t.on(c.CAMERA, (e) => {
-    Ot(e) && n.cameraPosition.handlePositionUpdate(e);
+    Nt(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));
+    Mt(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);
+    Pt(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);
+    Lt(e) && (n.attributes.handleMappingReceived(e), n.configuration.handleSelectionChanged(n.attributes.getSelection()), n.ui.renderAttributeControls(n.attributes, e.attributes), n.readyStateTracker.handleMappingReceived());
+  }), ji(n);
 }
-function Vi(n) {
+function ji(n) {
   const { messenger: t } = n;
   t.on(c.FOCUS, (e) => {
-    zt(e) && n.focus.handleStateReceived(e);
+    Ft(e) && n.focus.handleStateReceived(e);
   }), t.on(c.PRICING, (e) => {
-    Ft(e) && n.configuration.handlePricingReceived(e.pricing);
+    $t(e) && n.configuration.handlePricingReceived(e.pricing);
+  }), t.on(c.SYNC, (e) => {
+    zt(e) && n.onSync(e.connected);
   });
 }
-class ji {
+class Hi {
   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?.());
+    this.ready || (this.ready = !0, _.info("Mapping received from server, client is now ready"), this.onReady?.());
   }
   get isReady() {
     return this.ready;
@@ -3152,7 +3233,7 @@ class ji {
     this.ready = !1;
   }
 }
-class Hi {
+class qi {
   attributes;
   readyStateTracker;
   messenger;
@@ -3164,9 +3245,12 @@ class Hi {
   annotationsApi;
   eventBus;
   ui;
-  qrModal;
   options;
   serverHost;
+  /** The composed AR flow, or undefined in builds without one (the studio). */
+  arActivation;
+  /** The composed sync tracker, or undefined in builds without one (the studio). */
+  syncTracker;
   iframe;
   container;
   readyCallbacks = [];
@@ -3174,42 +3258,39 @@ class Hi {
   /** 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.options = t, this.serverHost = e?.serverHost, this.initializeLogging(), this.messenger = new Dt(
       () => this.iframe?.contentWindow ?? null,
       e?.messengerOptions
     );
-    const i = (o) => {
-      this.messenger.send(o);
+    const i = (s) => {
+      this.messenger.send(s);
     };
-    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);
+    this.attributes = new ne(i, (s, r) => {
+      this.notifyMutationFailed(s, r);
+    }), this.snapshotApi = new de(i), this.annotationsApi = new Bt(i), this.cameraApi = new ie(i), this.cameraPositionApi = new oe(), this.focusApi = new le(i, (s) => {
+      this.dispatchFocusChange(s);
+    }), this.configurationApi = new ae(
+      (s) => {
+        this.dispatchConfigurationChange(s);
       },
-      (o) => {
-        this.dispatchConfigurationSubmit(o);
+      (s) => {
+        this.dispatchConfigurationSubmit(s);
       }
-    ), this.eventBus = new mi(), this.qrModal = new $n(), this.readyStateTracker = new ji(() => {
-      const o = this.readyCallbacks;
-      this.readyCallbacks = [];
-      for (const s of o)
-        s(this);
-      this.ui.onReady();
-    }), this.ui = new $i({
+    ), this.eventBus = new ue(), this.arActivation = e?.createArActivation?.(i), this.syncTracker = e?.createSyncTracker?.(), this.readyStateTracker = new Hi(() => {
+      this.notifyReady();
+    });
+    const o = this.arActivation;
+    this.ui = new Di({
       snapshotApi: this.snapshotApi,
       cameraApi: this.cameraApi,
       cameraPositionApi: this.cameraPositionApi,
       eventBus: this.eventBus,
       configuration: this.configurationApi,
-      onSelect: (o, s) => this.attributes.select(o, s),
-      onSubscribe: (o, s) => this.attributes.onChange(o, s),
-      onAr: () => {
-        this.activateAr();
-      },
+      onSelect: (s, r) => this.attributes.select(s, r),
+      onSubscribe: (s, r) => this.attributes.onChange(s, r),
+      ...o !== void 0 && { onAr: () => {
+        o.activate();
+      } },
       onFullscreenEnter: () => {
         this.trackFullscreen();
       }
@@ -3217,7 +3298,7 @@ class Hi {
   }
   /** Wire the inbound viewer protocol to the facades. */
   wireIncomingMessages() {
-    Ui({
+    Vi({
       messenger: this.messenger,
       attributes: this.attributes,
       configuration: this.configurationApi,
@@ -3230,10 +3311,30 @@ class Hi {
         this.handleConfig(t);
       },
       onSession: (t) => {
-        this.viewerSessionId = t;
+        this.handleSession(t);
+      },
+      onSync: (t) => {
+        this.syncTracker?.handleSync(t);
       }
     });
   }
+  /** Store the tracking session id and hand it to the AR flow, which waits on it for the QR. */
+  handleSession(t) {
+    this.viewerSessionId = t, this.arActivation?.onSession(t);
+  }
+  /** Forward a failed mutation to every registered `onMutationFailed` callback. */
+  notifyMutationFailed(t, e) {
+    for (const i of this.mutationFailedCallbacks)
+      i({ attribute: t, value: e });
+  }
+  /** Flush the queued `onReady` callbacks once, then let the standard interface know. */
+  notifyReady() {
+    const t = this.readyCallbacks;
+    this.readyCallbacks = [];
+    for (const e of t)
+      e(this);
+    this.ui.onReady();
+  }
   /**
    * Dispatch a bubbling `vd:focus-change` event on the container so a page can
    * react to focus without registering an `onChange` callback.
@@ -3264,28 +3365,21 @@ class Hi {
       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 && w.warn(`Viewer settings override active: ${s.join(", ")}`);
+        s.length > 0 && _.warn(`Viewer settings override active: ${s.join(", ")}`);
       }
       this.ui.applyViewerSettings(o), this.annotationsApi.setEnabled(o.annotations !== !1);
     }
     this.cameraPositionApi.applyLimits(t.cameraLimits);
   }
-  activateAr() {
-    if (Zn()) {
-      this.messenger.send({ type: c.AR_ACTIVATE });
-      return;
-    }
-    this.qrModal.show(this.iframe?.src ?? "");
-  }
   /** Tell the viewer the user entered fullscreen, so it records the engagement. */
   trackFullscreen() {
     this.messenger.send({ type: c.FULLSCREEN });
   }
   initializeLogging() {
-    this.options.debug === !0 && ii(), w.info("Initializing Virtualdisplay client", { model: this.options.model });
+    this.options.debug === !0 && ee(), _.info("Initializing Virtualdisplay client", { model: this.options.model });
   }
   createAndConnectIframe() {
-    const e = new Bi(this.options, this.serverHost).create();
+    const e = new Ui(this.options, this.serverHost).create();
     this.container = e.container, this.iframe = e.iframe, this.eventBus.attach(this.container), this.ui.attach(this.container);
     try {
       const i = new URL(this.iframe.src).origin;
@@ -3321,6 +3415,16 @@ class Hi {
   onMutationFailed(t) {
     this.mutationFailedCallbacks.push(t);
   }
+  /**
+   * Trigger the composed AR flow directly (ar-session-handoff task 035): a host
+   * page that hides the built-in corner button (`viewerSettings.ar = false`,
+   * e.g. the AR landing, which owns a single custom AR affordance) still needs
+   * an entry point to the same flow that button would have called. A no-op
+   * where no AR flow is composed (the studio client has none).
+   */
+  activateAr() {
+    this.arActivation?.activate();
+  }
   on(t, e) {
     this.eventBus.on(t, e);
   }
@@ -3350,25 +3454,135 @@ class Hi {
     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;
+    this.readyStateTracker.clear(), this.readyCallbacks = [], this.mutationFailedCallbacks.length = 0, this.snapshotApi.clear(), this.messenger.destroy(), this.arActivation?.destroy(), this.ui.destroy(), this.container?.parentElement !== null && this.container?.parentElement !== void 0 && this.container.parentElement.removeChild(this.container), this.container = void 0, this.iframe = void 0;
+  }
+}
+const Gi = "ar.virtualdisplay.io";
+function Zi(n) {
+  const t = new URL(`https://${Gi}/go`);
+  return n.sessionId !== void 0 ? t.searchParams.set("session", n.sessionId) : (t.searchParams.set("license", n.license), t.searchParams.set("model", n.model)), t.toString();
+}
+const Wi = 1500;
+class Qi {
+  options;
+  qrModal = new pi();
+  /** The viewer's tracking session id, once the engine announces it (SESSION). */
+  sessionId;
+  /** Callbacks waiting on the SESSION message, resolved (or timed out) exactly once each. */
+  waiters = [];
+  /** Session-wait timers still pending, cleared on destroy so no wait outlives the client. */
+  pendingTimers = /* @__PURE__ */ new Set();
+  /** Set on destroy: an in-flight hand-off must not re-mount the modal or send QR_SHOWN. */
+  destroyed = !1;
+  constructor(t) {
+    this.options = t;
+  }
+  /** Store the engine-announced tracking session id and resolve anyone waiting on it. */
+  onSession(t) {
+    this.sessionId = t;
+    const e = this.waiters;
+    this.waiters = [];
+    for (const i of e)
+      i(t);
+  }
+  /** The AR button handler: mobile activates AR in the engine, desktop shows the hand-off QR. */
+  activate() {
+    if (Jt()) {
+      this.options.send({ type: c.AR_ACTIVATE });
+      return;
+    }
+    this.showQrCode();
+  }
+  destroy() {
+    this.destroyed = !0;
+    for (const t of this.pendingTimers)
+      clearTimeout(t);
+    this.pendingTimers.clear(), this.waiters = [], this.qrModal.hide();
+  }
+  /**
+   * Desktop hand-off: open the modal at once in its loading state (the click
+   * must respond immediately, even when the session id is still resolving),
+   * then swap the AR landing QR in as soon as the URL is known. Guarded after
+   * each await: a client torn down during the session wait must not update
+   * the modal or send a stray QR_SHOWN through a dead messenger.
+   */
+  async showQrCode() {
+    this.qrModal.show();
+    const t = await this.waitForSessionId();
+    if (this.destroyed)
+      return;
+    const e = Zi({
+      sessionId: t,
+      license: this.options.license,
+      model: this.options.model
+    }), i = await this.qrModal.update(e);
+    if (this.destroyed) {
+      this.qrModal.hide();
+      return;
+    }
+    i && this.options.send({ type: c.QR_SHOWN });
+  }
+  /**
+   * Resolve once the SESSION message arrives, or `undefined` after
+   * {@link SESSION_WAIT_TIMEOUT_MS} if it never does (e.g. tracking blocked by
+   * an ad blocker). The QR then falls back to a working sessionless landing URL
+   * rather than encoding a wrong one.
+   */
+  waitForSessionId() {
+    return this.sessionId !== void 0 ? Promise.resolve(this.sessionId) : new Promise((t) => {
+      const e = setTimeout(() => {
+        this.pendingTimers.delete(e), t(void 0);
+      }, Wi);
+      this.pendingTimers.add(e), this.waiters.push((i) => {
+        this.pendingTimers.delete(e), clearTimeout(e), t(i);
+      });
+    });
   }
 }
-class qi extends Hi {
+class Yi {
+  callbacks = [];
+  lastKnown;
+  handleSync(t) {
+    this.lastKnown = t;
+    for (const e of this.callbacks)
+      e(t);
+  }
+  onChange(t) {
+    this.callbacks.push(t), this.lastKnown !== void 0 && t(this.lastKnown);
+  }
+}
+class Ji extends qi {
+  syncStatusTracker;
+  constructor(t) {
+    const e = new Yi();
+    super(t, {
+      createArActivation: (i) => new Qi({
+        license: t.license,
+        model: t.model,
+        send: i
+      }),
+      createSyncTracker: () => e
+    }), this.syncStatusTracker = e;
+  }
+  /** Subscribe to the live sync channel's connection state (ar-session-handoff). Latest-wins, no buffering. */
+  onSyncChange(t) {
+    this.syncStatusTracker.onChange(t);
+  }
 }
 export {
-  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,
+  Bt as Annotations,
+  Vt as Attribute,
+  Ut as AttributeValue,
+  ie as Camera,
+  ae as Configuration,
+  A as ERROR_CODES,
+  le as Focus,
+  ce as Photo,
+  de as Snapshot,
   I as VD_EVENTS,
-  qi as VirtualdisplayClient,
+  Ji as VirtualdisplayClient,
   f as VirtualdisplayError,
-  ii as enableDebugMode,
-  Gi as isDebugMode,
-  w as logger
+  ee as enableDebugMode,
+  Ki as isDebugMode,
+  _ as logger
 };