@virtualdisplay.io/client 4.0.0-alpha.21 → 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";
 }
@@ -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} */
@@ -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} */
@@ -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, d] = n, u = Math.cos(t), p = Math.sin(t), v = u * r + p * d, E = -p * r + u * d, k = Math.cos(e), S = Math.sin(e), R = k * l - S * E, M = S * l + k * E, W = 0.55;
-  return [i + v * s * W, o - R * s * W, M];
+  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();
@@ -2502,8 +2502,8 @@ class wi {
       const R = st[S];
       if (R === void 0)
         continue;
-      const M = Math.min(1, k - S);
-      bi(this.ctx, u, R[0], R[1], M);
+      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");
@@ -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,19 +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"), 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) => {
@@ -2793,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.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) {
@@ -2804,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;
@@ -2911,8 +2917,28 @@ const H = w.fontFamily.sans.join(", "), q = `
 /* sidebar-right layout — a docked, full-height right panel */
 .vd-container { --vd-sidebar-width: 300px; }
 
+.vd-container > iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  display: block;
+}
+
+/* Permanently docked panel (wide embeds, not collapsible): the viewer fills the
+   remaining width instead of the panel floating over it. On narrow embeds the
+   panel is a temporary tap-to-reveal overlay instead (vd-layout-sidebar-right
+   without -permanent), where covering part of the model briefly is expected. */
+.vd-container.vd-layout-sidebar-permanent > iframe {
+  width: calc(100% - var(--vd-sidebar-width));
+}
+
 .vd-hidden { display: none !important; }
 
+/* the "open configurator" toggle joins the shared bottom-right slot as a flex child;
+   order pins it after AR/fullscreen regardless of DOM insertion order (MAPPING data,
+   which mounts this button, always arrives before the toolbar mounts on ready). */
+.vd-configurator-toggle { order: 1; }
+
 .vd-sidebar {
   position: absolute;
   inset-block: 0;
@@ -2956,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;
@@ -3070,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(
@@ -3080,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() {
@@ -3144,12 +3155,7 @@ class Ui {
   }
   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);
@@ -3186,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) {