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

package/dist/virtualdisplay.client.es.js

@@ -50,11 +50,11 @@ function Nt(n) {
   const t = C(n);
   return t !== null && t.type === c.CAMERA && Array.isArray(t.transforms);
 }
-function Lt(n) {
+function Mt(n) {
   const t = C(n);
   return t !== null && t.type === c.MAPPING && Array.isArray(t.attributes);
 }
-function Mt(n) {
+function Lt(n) {
   const t = C(n);
   return t !== null && t.type === c.LOADING_INDICATOR && typeof t.progress == "number";
 }
@@ -408,7 +408,7 @@ class jt {
   }
 }
 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(" ");
+  const t = new Date(n.timestamp).toLocaleTimeString("en-GB", { hour12: !1 }), e = n.level.toUpperCase().padEnd(5), i = n.trace_id?.slice(0, 8) ?? "--------", o = n.msg, s = ["timestamp", "level", "msg", "service", "trace_id", "span_id"], r = Object.entries(n).filter(([l]) => !s.includes(l)).map(([l, d]) => `${l}=${JSON.stringify(d)}`).join(" ");
   return `${t} ${e} [${i}] ${o}${r ? " " + r : ""}`;
 }
 function qt(n) {
@@ -503,7 +503,7 @@ class te {
     this.log("error", t, e);
   }
 }
-function dt(n, t) {
+function ut(n, t) {
   const e = t?.isDev !== void 0 ? t.isDev : typeof process < "u" ? process.env.NODE_ENV !== "production" : !0;
   return new te({ service: n, isDev: e, traceProvider: t?.traceProvider });
 }
@@ -511,7 +511,7 @@ 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) {
+function dt(n) {
   return {
     debug: (t, e) => n.debug(t, O(e)),
     info: (t, e) => n.info(t, O(e)),
@@ -519,9 +519,9 @@ function ut(n) {
     error: (t, e) => n.error(t, O(e))
   };
 }
-let ht = !1, _ = ut(dt("client", { isDev: !1 }));
+let ht = !1, _ = dt(ut("client", { isDev: !1 }));
 function ee() {
-  ht = !0, _ = ut(dt("client", { isDev: !0 }));
+  ht = !0, _ = dt(ut("client", { isDev: !0 }));
 }
 function Ki() {
   return ht;
@@ -988,7 +988,7 @@ class ce {
   }
 }
 const X = 3e4;
-class de {
+class ue {
   constructor(t) {
     this.send = t;
   }
@@ -1075,7 +1075,7 @@ class de {
       );
   }
 }
-class ue {
+class de {
   container = null;
   attach(t) {
     this.container = t;
@@ -1173,14 +1173,14 @@ let ft = (n, t) => {
   !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) => {
+      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(d));
+        }), o.push(u));
       }
     }
   const r = () => {
@@ -1300,13 +1300,13 @@ const ve = (
     /** @type {LocalizedString} */
     "Dein Telefon öffnet das 3D-Modell im AR-Modus."
   )
-), Le = (
+), Me = (
   /** @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 = (
+), Le = (
   /** @type {(inputs: Controls_Qr_Closebutton1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
@@ -1328,7 +1328,7 @@ const ve = (
   /** @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();
+    return e === "en" ? Le() : e === "nl" ? ze() : Pe();
   })
 ), $e = (
   /** @type {(inputs: Controls_Fullscreen_Buttonlabel1Inputs) => LocalizedString} */
@@ -1486,17 +1486,17 @@ const ve = (
     /** @type {LocalizedString} */
     "Camera resetten"
   )
-), dn = (
+), un = (
   /** @type {(inputs: Controls_Camera_ResetInputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Kamera zurücksetzen"
   )
-), un = (
+), dn = (
   /** @type {((inputs?: Controls_Camera_ResetInputs, options?: { locale?: "en" | "nl" | "de" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Controls_Camera_ResetInputs, { locale?: "en" | "nl" | "de" }, {}>} */
   ((n = {}, t = {}) => {
     const e = t.locale ?? h();
-    return e === "en" ? ln() : e === "nl" ? cn() : dn();
+    return e === "en" ? ln() : e === "nl" ? cn() : un();
   })
 ), hn = (
   /** @type {(inputs: Controls_Camera_Zoomin1Inputs) => LocalizedString} */
@@ -1624,13 +1624,13 @@ const ve = (
     /** @type {LocalizedString} */
     "Tilt down"
   )
-), Ln = (
+), Mn = (
   /** @type {(inputs: Controls_Camera_Tiltdown1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
     "Omlaag kantelen"
   )
-), Mn = (
+), Ln = (
   /** @type {(inputs: Controls_Camera_Tiltdown1Inputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
@@ -1640,7 +1640,7 @@ const ve = (
   /** @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();
+    return e === "en" ? Nn() : e === "nl" ? Mn() : Ln();
   })
 ), Pn = (
   /** @type {(inputs: Commerce_Submit_BusyInputs) => LocalizedString} */
@@ -1934,7 +1934,7 @@ class ci {
     this.selectCallback = t;
   }
 }
-class di {
+class ui {
   element;
   select;
   constructor(t, e, i, o, s) {
@@ -1942,13 +1942,13 @@ class di {
     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);
+    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 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);
+    const d = wt(_t, { width: 16, height: 16, "stroke-width": 2 });
+    d.classList.add("ui-native-select-icon"), this.element = document.createElement("div"), this.element.className = "ui-native-select-wrap", this.element.appendChild(this.select), this.element.appendChild(d);
   }
   setSelected(t) {
     this.select.value = t;
@@ -1976,7 +1976,7 @@ const w = {
     medium: "500",
     semibold: "600"
   }
-}, x = w.fontFamily.sans.join(", "), ui = `
+}, x = w.fontFamily.sans.join(", "), di = `
   --primary: oklch(5% 0 0);
   --primary-foreground: oklch(100% 0 0);
   --secondary: oklch(92% 0 0);
@@ -1990,7 +1990,7 @@ const w = {
   --accent-foreground: oklch(5% 0 0);
   --muted-foreground: oklch(44% 0 0);
 `, hi = `
-:root { ${ui} }
+:root { ${di} }
 
 /* ── Button ──────────────────────────────────────────────── */
 .ui-btn {
@@ -2297,7 +2297,7 @@ class pi {
     })), 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(), {
+    })), this.qrSlot = this.createQrSlot(), this.dialog.card.element.appendChild(this.qrSlot), this.dialog.card.element.appendChild(this.createText(Me(), {
       fontSize: w.fontSize.xs,
       color: m.neutral[500]
     }));
@@ -2346,8 +2346,8 @@ function ot(n) {
   return t * t * (3 - 2 * t);
 }
 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];
+  const [r, l, d] = n, u = Math.cos(t), p = Math.sin(t), v = u * r + p * d, E = -p * r + u * d, k = Math.cos(e), S = Math.sin(e), R = k * l - S * E, L = S * l + k * E, W = 0.55;
+  return [i + v * s * W, o - R * s * W, L];
 }
 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();
@@ -2495,15 +2495,15 @@ class wi {
       return;
     const t = this.canvas.width / Math.min(devicePixelRatio, 2), e = this.canvas.height / Math.min(devicePixelRatio, 2), i = (performance.now() - this.startTime) / 1e3;
     this.ctx.fillStyle = "#fff", this.ctx.fillRect(0, 0, t, e);
-    const o = t / 2, s = e * 0.44, r = Math.min(t, e) * 0.08, l = 0.785, u = 0.615, d = (S) => fi(S, l, u, o, s, r), p = 6, v = i % p / p, E = st.length;
+    const o = t / 2, s = e * 0.44, r = Math.min(t, e) * 0.08, l = 0.785, d = 0.615, u = (S) => fi(S, l, d, o, s, r), p = 6, v = i % p / p, E = st.length;
     let k;
     v < 0.35 ? k = ot(v / 0.35) * E : v < 0.55 ? k = E : v < 0.9 ? k = (1 - ot((v - 0.55) / 0.35)) * E : k = 0, this.ctx.shadowBlur = 5, this.ctx.shadowColor = "rgba(30,30,30,0.08)";
     for (let S = 0; S < E && !(S >= k); S++) {
       const R = st[S];
       if (R === void 0)
         continue;
-      const M = Math.min(1, k - S);
-      bi(this.ctx, d, R[0], R[1], M);
+      const L = Math.min(1, k - S);
+      bi(this.ctx, u, R[0], R[1], L);
     }
     this.ctx.shadowBlur = 0;
   }
@@ -2553,7 +2553,7 @@ class _i {
   }
 }
 const T = 0.5;
-class L {
+class M {
   element;
   constructor(t, e) {
     this.element = Object.assign(document.createElement("div"), { className: "vd-camera-controls" });
@@ -2565,7 +2565,7 @@ class L {
     }, o = Ci(t, e, i);
     e.onChange((s) => {
       i.targetRotation = s.rotation - i.thetaOffset, i.targetTilt = s.tilt, i.targetZoom = s.zoom, Si(o, e, s);
-    }), this.element.appendChild(L.buildZoom(o.zoomOut, o.zoomIn)), this.element.appendChild(L.buildDpad(o.tiltUp, o.rotateLeft, o.reset, o.rotateRight, o.tiltDown));
+    }), this.element.appendChild(M.buildZoom(o.zoomOut, o.zoomIn)), this.element.appendChild(M.buildDpad(o.tiltUp, o.rotateLeft, o.reset, o.rotateRight, o.tiltDown));
   }
   static buildZoom(t, e) {
     const i = document.createElement("div");
@@ -2574,29 +2574,29 @@ class L {
   static buildDpad(t, e, i, o, s) {
     const r = document.createElement("div");
     r.className = "vd-dpad";
-    for (const [l, u] of [
+    for (const [l, d] of [
       [t, "up"],
       [e, "left"],
       [i, "center"],
       [o, "right"],
       [s, "down"]
     ])
-      l.element.classList.add(`vd-dpad-${u}`), r.appendChild(l.element);
+      l.element.classList.add(`vd-dpad-${d}`), r.appendChild(l.element);
     return r;
   }
 }
 function Ci(n, t, e) {
   const i = (r) => Math.max(t.limits?.minZoom ?? 1, Math.min(t.limits?.maxZoom ?? 1 / 0, r)), o = (r) => {
-    const l = t.limits?.minRotate, u = t.limits?.maxRotate;
-    return l !== void 0 || u !== void 0 ? Math.max(l ?? -1 / 0, Math.min(u ?? 1 / 0, r)) : r;
+    const l = t.limits?.minRotate, d = t.limits?.maxRotate;
+    return l !== void 0 || d !== void 0 ? Math.max(l ?? -1 / 0, Math.min(d ?? 1 / 0, r)) : r;
   }, s = (r) => {
-    const l = t.limits?.minTilt, 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();
+    const l = t.limits?.minTilt, d = t.limits?.maxTilt;
+    if (l !== void 0 || d !== void 0) {
+      e.targetTilt = Math.max(l ?? 0, Math.min(d ?? 180, e.targetTilt + r)), n.tilt(e.targetTilt).set();
       return;
     }
-    const 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());
+    const u = e.targetTilt + r;
+    u > 180 || u < 0 ? (e.targetTilt = u > 180 ? 360 - u : -u, e.thetaOffset = (e.thetaOffset + 180) % 360, n.tilt(e.targetTilt).rotate(e.targetRotation + e.thetaOffset).set()) : (e.targetTilt = u, n.tilt(e.targetTilt).set());
   };
   return {
     zoomOut: new b({ variant: "outline", size: "icon", label: yn(), icon: g.zoomOut(), onClick: () => {
@@ -2611,7 +2611,7 @@ function Ci(n, t, e) {
     rotateLeft: new b({ variant: "outline", size: "icon", label: Sn(), icon: g.rotateLeft(), onClick: () => {
       e.targetRotation = o(e.targetRotation - 15), n.rotate(e.targetRotation + e.thetaOffset).set();
     } }),
-    reset: new b({ variant: "outline", size: "icon", label: un(), icon: g.reset(), onClick: () => {
+    reset: new b({ variant: "outline", size: "icon", label: dn(), icon: g.reset(), onClick: () => {
       e.thetaOffset = 0, n.reset();
     } }),
     rotateRight: new b({ variant: "outline", size: "icon", label: xn(), icon: g.rotateRight(), onClick: () => {
@@ -2648,12 +2648,12 @@ function Ei(n, t, e, i, o) {
   s.className = "vd-attribute", s.dataset.name = n.name;
   const r = document.createElement("span");
   r.className = "vd-attribute-label", r.textContent = j(n.name), r.id = `vd-attribute-label-${Ai++}`, s.appendChild(r), s.setAttribute("role", "group"), s.setAttribute("aria-labelledby", r.id);
-  const l = n.values.find((p) => t.getValue(n.name, p)?.isSelected === !0), 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) => {
+  const l = n.values.find((p) => t.getValue(n.name, p)?.isSelected === !0), d = n.values.map(j), u = n.values.length <= ki ? new ci(n.values, l, d) : new ui(n.name, n.values, j(n.name), l, d);
+  return u.onSelect((p) => {
     e.dispatch(I.SELECT, { attribute: n.name, value: p }, !0).defaultPrevented || i(n.name, p);
   }), o(n.name, (p) => {
-    d.setSelected(p.value), e.dispatch(I.SELECTED, { attribute: n.name, value: p.value });
-  }), s.appendChild(d.element), s;
+    u.setSelected(p.value), e.dispatch(I.SELECTED, { attribute: n.name, value: p.value });
+  }), s.appendChild(u.element), s;
 }
 const xi = 80, Ti = 2500;
 class Ri {
@@ -2744,6 +2744,12 @@ class St {
 }
 const Oi = 572;
 class Ni {
+  /** @param actionBarSlot The shared corner slot the AR/fullscreen buttons live in — the
+   * "open configurator" toggle joins them there instead of floating as its own overlay. */
+  constructor(t) {
+    this.actionBarSlot = t;
+  }
+  actionBarSlot;
   element = null;
   body = null;
   openButton = null;
@@ -2766,23 +2772,19 @@ class Ni {
     const i = document.createElement("div");
     i.className = "vd-sidebar-header", i.appendChild(this.closeButton.element), this.body = document.createElement("div"), this.body.className = "vd-sidebar-body", this.body.appendChild(e), this.element = document.createElement("div"), this.element.className = "vd-sidebar vd-hidden", this.element.append(i, this.body), t.appendChild(this.element), this.openButton = new b({
       variant: "outline",
-      size: "default",
+      size: "icon",
       label: nn(),
       icon: g.configurator({ size: 18 }),
       onClick: () => {
         this.expanded = !0, this.render();
       }
-    }), this.openButton.element.classList.add("vd-configurator-toggle", "vd-hidden"), t.appendChild(this.openButton.element), this.observe();
+    }), this.openButton.element.classList.add("vd-configurator-toggle", "vd-hidden"), this.actionBarSlot.appendChild(this.openButton.element), this.observe();
   }
   setVisible(t) {
     this.visible = t, this.render();
   }
   destroy() {
-    this.observer?.disconnect(), this.observer = null, this.openButton?.element.remove(), this.element?.remove(), this.container?.classList.remove(
-      "vd-layout-sidebar-right",
-      "vd-layout-sidebar-collapsed",
-      "vd-layout-sidebar-permanent"
-    ), 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-permanent"), this.container = null;
   }
   observe() {
     typeof ResizeObserver > "u" || this.container === null || (this.observer = new ResizeObserver((t) => {
@@ -2797,10 +2799,10 @@ class Ni {
     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.container.classList.toggle("vd-layout-sidebar-permanent", t && !this.collapsible);
+    this.element.classList.toggle("vd-hidden", !this.visible), this.element.classList.toggle("vd-sidebar-collapsed", e), this.openButton.element.classList.toggle("vd-hidden", !e), this.closeButton.element.style.display = this.collapsible ? "" : "none", this.container.classList.toggle("vd-layout-sidebar-right", t), this.container.classList.toggle("vd-layout-sidebar-permanent", t && !this.collapsible);
   }
 }
-class Li {
+class Mi {
   attach(t, e) {
   }
   setVisible(t) {
@@ -2808,13 +2810,13 @@ class Li {
   destroy() {
   }
 }
-const Mi = {
+const Li = {
   "inframe-bottom-left": () => new St(),
-  "sidebar-right": () => new Ni(),
-  hidden: () => new Li()
+  "sidebar-right": (n) => new Ni(n),
+  hidden: () => new Mi()
 };
-function zi(n) {
-  return (Mi[n ?? ""] ?? (() => new St()))();
+function zi(n, t) {
+  return (Li[n ?? ""] ?? (() => new St()))(t);
 }
 const H = w.fontFamily.sans.join(", "), q = `
   position: absolute;
@@ -2932,6 +2934,11 @@ const H = w.fontFamily.sans.join(", "), q = `
 
 .vd-hidden { display: none !important; }
 
+/* the "open configurator" toggle joins the shared bottom-right slot as a flex child;
+   order pins it after AR/fullscreen regardless of DOM insertion order (MAPPING data,
+   which mounts this button, always arrives before the toolbar mounts on ready). */
+.vd-configurator-toggle { order: 1; }
+
 .vd-sidebar {
   position: absolute;
   inset-block: 0;
@@ -2975,25 +2982,10 @@ const H = w.fontFamily.sans.join(", "), q = `
   gap: ${a[5]};
 }
 
-/* floating toggle, shown when the sidebar is collapsed on narrow embeds */
-.vd-configurator-toggle {
-  position: absolute;
-  inset-block-end: ${a[3]};
-  inset-inline-end: ${a[3]};
-  z-index: 12;
-}
-
 /* while the panel is open, keep the corner controls clear of it */
 .vd-layout-sidebar-right .vd-slot-top-right { inset-inline-end: calc(var(--vd-sidebar-width) + ${a[3]}); }
 .vd-layout-sidebar-right .vd-slot-bottom-right { inset-inline-end: calc(var(--vd-sidebar-width) + ${a[3]}); }
 
-/* while collapsed on a narrow embed, lift the bottom-right controls above the
-   floating toggle so the AR/fullscreen buttons aren't hidden behind the
-   "open configurator" button (spacing[9] = the default toggle button height) */
-.vd-layout-sidebar-collapsed .vd-slot-bottom-right {
-  inset-block-end: calc(${a[3]} + ${a[9]} + ${a[1.5]});
-}
-
 /* Price + CTA — sit under the attribute controls, separated by a hairline */
 .vd-commerce {
   display: flex;
@@ -3089,7 +3081,7 @@ class Di {
     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)) {
+    if (!(this.container === null || this.slots.topRight === null || this.slots.bottomRight === null) && (this.cameraControls?.element.remove(), this.cameraControls = null, this.teardownConfigurator(), this.settings.cameraControls === !0 && (this.cameraControls = new M(this.options.cameraApi, this.options.cameraPositionApi), this.cameraControls.element.style.display = "none", this.slots.topRight.appendChild(this.cameraControls.element)), this.placeScreenshotButton(), e.length !== 0)) {
       this.attributes = document.createElement("div"), this.attributes.className = "vd-attributes";
       for (const i of e)
         this.attributes.appendChild(Ei(
@@ -3099,7 +3091,7 @@ class Di {
           this.options.onSelect,
           this.options.onSubscribe
         ));
-      this.commerce = new Ri(this.options.configuration), this.attributes.appendChild(this.commerce.element), this.layout = zi(this.settings.configuratorLayout), this.layout.attach(this.container, this.attributes);
+      this.commerce = new Ri(this.options.configuration), this.attributes.appendChild(this.commerce.element), this.layout = zi(this.settings.configuratorLayout, this.slots.bottomRight), this.layout.attach(this.container, this.attributes);
     }
   }
   get viewerSettings() {
@@ -3200,11 +3192,11 @@ function Vi(n) {
   }), t.on(c.CAMERA, (e) => {
     Nt(e) && n.cameraPosition.handlePositionUpdate(e);
   }), t.on(c.LOADING_INDICATOR, (e) => {
-    Mt(e) && (e.error !== void 0 ? n.ui.showError(e.error) : n.ui.updateProgress(e.progress, e.phase));
+    Lt(e) && (e.error !== void 0 ? n.ui.showError(e.error) : n.ui.updateProgress(e.progress, e.phase));
   }), t.on(c.CONFIG, (e) => {
     Pt(e) && n.applyConfig(e);
   }), t.on(c.MAPPING, (e) => {
-    Lt(e) && (n.attributes.handleMappingReceived(e), n.configuration.handleSelectionChanged(n.attributes.getSelection()), n.ui.renderAttributeControls(n.attributes, e.attributes), n.readyStateTracker.handleMappingReceived());
+    Mt(e) && (n.attributes.handleMappingReceived(e), n.configuration.handleSelectionChanged(n.attributes.getSelection()), n.ui.renderAttributeControls(n.attributes, e.attributes), n.readyStateTracker.handleMappingReceived());
   }), ji(n);
 }
 function ji(n) {
@@ -3267,7 +3259,7 @@ class qi {
     };
     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.snapshotApi = new ue(i), this.annotationsApi = new Bt(i), this.cameraApi = new ie(i), this.cameraPositionApi = new oe(), this.focusApi = new le(i, (s) => {
       this.dispatchFocusChange(s);
     }), this.configurationApi = new ae(
       (s) => {
@@ -3276,7 +3268,7 @@ class qi {
       (s) => {
         this.dispatchConfigurationSubmit(s);
       }
-    ), this.eventBus = new ue(), this.arActivation = e?.createArActivation?.(i), this.syncTracker = e?.createSyncTracker?.(), this.readyStateTracker = new Hi(() => {
+    ), this.eventBus = new de(), this.arActivation = e?.createArActivation?.(i), this.syncTracker = e?.createSyncTracker?.(), this.readyStateTracker = new Hi(() => {
       this.notifyReady();
     });
     const o = this.arActivation;
@@ -3578,7 +3570,7 @@ export {
   A as ERROR_CODES,
   le as Focus,
   ce as Photo,
-  de as Snapshot,
+  ue as Snapshot,
   I as VD_EVENTS,
   Ji as VirtualdisplayClient,
   f as VirtualdisplayError,