@virtualdisplay.io/client 4.0.0-alpha.15 → 4.0.0-alpha.17

package/dist/virtualdisplay.client.es.js

@@ -204,7 +204,7 @@ let mt = !1, C = ht(dt("client", { isDev: !1 }));
 function Pt() {
   mt = !0, C = ht(dt("client", { isDev: !0 }));
 }
-function Vi() {
+function ji() {
   return mt;
 }
 class Ft {
@@ -223,8 +223,135 @@ class Ft {
     this.ready = !1;
   }
 }
+const O = {
+  /** Attribute selection requested (cancelable). `detail`: `{ attribute, value }`. */
+  SELECT: "ui:select",
+  /** Attribute selection applied. `detail`: `{ attribute, value }`. */
+  SELECTED: "ui:selected",
+  /** Focus changed (bubbles). `detail`: `{ component, attributes }`, or `null` for the overview. */
+  FOCUS_CHANGE: "vd:focus-change",
+  /** Resolved configuration changed (bubbles). `detail`: the resolved configuration, or `null` when nothing matches. */
+  CONFIGURATION_CHANGE: "vd:configuration-change",
+  /** Configuration submitted (bubbles). `detail`: the resolved configuration handed to the host. */
+  CONFIGURATION_SUBMIT: "vd:configuration-submit"
+};
+class $t {
+  constructor(t, e) {
+    this.value = t, this.attribute = e;
+  }
+  value;
+  attribute;
+  isSelectedValue = !1;
+  get isSelected() {
+    return this.isSelectedValue;
+  }
+  setSelected(t) {
+    this.isSelectedValue = t;
+  }
+}
+class Dt {
+  name;
+  defaultValue;
+  values;
+  onSelect;
+  onChangeCallback;
+  constructor(t) {
+    this.name = t.name, this.defaultValue = t.defaultValue, this.onSelect = t.onSelect, this.values = this.createValues(t.values);
+  }
+  /**
+   * Select a value for this attribute
+   * @throws {VirtualdisplayError} When value not found
+   */
+  select(t) {
+    if (!this.values.has(t))
+      throw f.valueNotFound(this.name, t);
+    this.onSelect(this.name, t);
+  }
+  getValues() {
+    return Array.from(this.values.values());
+  }
+  getValue(t) {
+    return this.values.get(t);
+  }
+  /** The currently selected value, or undefined before any selection lands. */
+  get selected() {
+    for (const t of this.values.values())
+      if (t.isSelected)
+        return t.value;
+  }
+  /**
+   * Register callback that fires when selection changes
+   * Receives the newly selected AttributeValue
+   */
+  onChange(t) {
+    this.onChangeCallback = t;
+  }
+  /**
+   * Update selection state from server mutation result
+   * Direct value comparison - no source/target translation
+   */
+  handleResult(t) {
+    let e;
+    for (const i of this.values.values()) {
+      const o = i.value === t;
+      i.setSelected(o), o && (e = i);
+    }
+    e !== void 0 && this.onChangeCallback !== void 0 && this.onChangeCallback(e);
+  }
+  createValues(t) {
+    const e = /* @__PURE__ */ new Map();
+    for (const i of t) {
+      const o = new $t(i, this.name);
+      i === this.defaultValue && o.setSelected(!0), e.set(i, o);
+    }
+    return e;
+  }
+}
+class Bt {
+  attributes = /* @__PURE__ */ new Map();
+  constructor(t, e, i) {
+    for (const o of t) {
+      const s = this.buildOptions(o, e);
+      this.attributes.set(o.name, new Dt(s));
+    }
+    this.onMutationFailed = i;
+  }
+  onMutationFailed;
+  get(t) {
+    return this.attributes.get(t);
+  }
+  /** The current selection as attribute name→value pairs, skipping unset attributes. */
+  getSelection() {
+    const t = {};
+    for (const [e, i] of this.attributes) {
+      const o = i.selected;
+      o !== void 0 && (t[e] = o);
+    }
+    return t;
+  }
+  handleResults(t) {
+    for (const e of t) {
+      if (!e.success) {
+        this.onMutationFailed?.(e.name, e.value);
+        continue;
+      }
+      this.get(e.name)?.handleResult(e.value);
+    }
+  }
+  buildOptions(t, e) {
+    const i = {
+      name: t.name,
+      values: t.values,
+      onSelect: (o, s) => {
+        e([{ name: o, value: s }], !1);
+      }
+    };
+    return t.defaultValue !== void 0 ? { ...i, defaultValue: t.defaultValue } : i;
+  }
+}
 const c = {
   HANDSHAKE: "handshake",
+  SESSION: "session",
   MUTATION: "mutation",
   STATE: "state",
   LOADING_INDICATOR: "loading_indicator",
@@ -241,59 +368,63 @@ const c = {
 }, X = {
   FOCUS: "focus",
   UNFOCUS: "unfocus"
-}, $t = {
+}, Ut = {
   FOCUSED: "focused"
-}, Dt = {
+}, Vt = {
   /** Behaves exactly like an unpriced combination: no price, no button. */
   HIDDEN: "hidden"
-}, Bt = new Set(Object.values(c));
-function Ut(n) {
+}, jt = new Set(Object.values(c));
+function Ht(n) {
   if (typeof n != "object" || n === null)
     return !1;
   const t = n;
-  return typeof t.target == "string" ? !1 : typeof t.type == "string" && Bt.has(t.type);
+  return typeof t.target == "string" ? !1 : typeof t.type == "string" && jt.has(t.type);
 }
-function Vt(n) {
-  const t = k(n);
+function Gt(n) {
+  const t = w(n);
   return t !== null && t.type === c.HANDSHAKE;
 }
-function jt(n) {
-  const t = k(n);
+function qt(n) {
+  const t = w(n);
+  return t !== null && t.type === c.SESSION && typeof t.sessionId == "string";
+}
+function Zt(n) {
+  const t = w(n);
   return t !== null && t.type === c.MUTATION && Array.isArray(t.results);
 }
-function Ht(n) {
-  const t = k(n);
+function Wt(n) {
+  const t = w(n);
   return t !== null && t.type === c.SNAPSHOT && ("data" in t || "error" in t);
 }
-function Gt(n) {
-  const t = k(n);
+function Yt(n) {
+  const t = w(n);
   return t !== null && t.type === c.CAMERA && Array.isArray(t.transforms);
 }
-function qt(n) {
-  const t = k(n);
+function Xt(n) {
+  const t = w(n);
   return t !== null && t.type === c.MAPPING && Array.isArray(t.attributes);
 }
-function Zt(n) {
-  const t = k(n);
+function Kt(n) {
+  const t = w(n);
   return t !== null && t.type === c.LOADING_INDICATOR && typeof t.progress == "number";
 }
-function Wt(n) {
-  const t = k(n);
+function Qt(n) {
+  const t = w(n);
   return t !== null && t.type === c.CONFIG && typeof t.viewerSettings == "object";
 }
-function Yt(n) {
-  const t = k(n);
+function Jt(n) {
+  const t = w(n);
   return t !== null && t.type === c.ANNOTATION_PLACED && typeof t.position == "object" && t.position !== null;
 }
-function Xt(n) {
-  const t = k(n);
+function te(n) {
+  const t = w(n);
   return t !== null && t.type === c.FOCUS && typeof t.state == "string";
 }
-function Kt(n) {
-  const t = k(n);
+function ee(n) {
+  const t = w(n);
   return t !== null && t.type === c.PRICING && typeof t.pricing == "object" && t.pricing !== null;
 }
-function k(n) {
+function w(n) {
   return typeof n != "object" || n === null ? null : n;
 }
 class K {
@@ -343,7 +474,7 @@ class K {
     this.pending.length = 0;
   }
 }
-class Qt {
+class ne {
   constructor(t, e) {
     this.getTarget = t, this.sourceId = `vd-${Math.random().toString(36).slice(2, 8)}`, this.targetOrigin = e?.targetOrigin ?? "*", this.publisher = new K((i) => this.post(i)), this.consumer = new K((i) => this.routeToHandler(i)), this.shouldBuffer = e?.shouldBuffer ?? null, e?.bufferIncoming !== !0 && this.consumer.markReady();
   }
@@ -406,7 +537,7 @@ class Qt {
   start() {
     this.listener === null && (this.listener = (t) => {
       const { data: e } = t;
-      if (!Ut(e) || e._source === this.sourceId)
+      if (!Ht(e) || e._source === this.sourceId)
         return;
       const i = this.getTarget();
       if (i !== null && t.source !== null && t.source !== i)
@@ -452,153 +583,6 @@ class Qt {
     });
   }
 }
-class Jt {
-  constructor(t) {
-    this.send = t;
-  }
-  send;
-  placedCallbacks = [];
-  setEnabled(t) {
-    this.send({
-      type: c.ANNOTATION_TOGGLE,
-      enabled: t
-    });
-  }
-  startPlacing() {
-    this.send({
-      type: c.ANNOTATION_PLACE_MODE,
-      enabled: !0
-    });
-  }
-  stopPlacing() {
-    this.send({
-      type: c.ANNOTATION_PLACE_MODE,
-      enabled: !1
-    });
-  }
-  onPlaced(t) {
-    this.placedCallbacks.push(t);
-  }
-  /** Called by the client when an ANNOTATION_PLACED message is received. */
-  handlePlaced(t) {
-    for (const e of this.placedCallbacks)
-      e(t);
-  }
-}
-class te {
-  constructor(t, e) {
-    this.value = t, this.attribute = e;
-  }
-  value;
-  attribute;
-  isSelectedValue = !1;
-  get isSelected() {
-    return this.isSelectedValue;
-  }
-  setSelected(t) {
-    this.isSelectedValue = t;
-  }
-}
-class ee {
-  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 te(i, this.name);
-      i === this.defaultValue && o.setSelected(!0), e.set(i, o);
-    }
-    return e;
-  }
-}
-class ne {
-  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 ee(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;
-  }
-}
 class ie {
   constructor(t, e) {
     this.send = t, this.onMutationFailed = e;
@@ -613,7 +597,7 @@ class ie {
   handleMappingReceived(t) {
     C.debug("Initializing from server mapping", {
       attributeCount: t.attributes.length
-    }), this.registry = new ne(
+    }), this.registry = new Bt(
       t.attributes,
       (e, i) => this.sendMutation(e, i),
       this.onMutationFailed
@@ -829,18 +813,6 @@ class se {
     }
   }
 }
-const O = {
-  /** Attribute selection requested (cancelable). `detail`: `{ attribute, value }`. */
-  SELECT: "ui:select",
-  /** Attribute selection applied. `detail`: `{ attribute, value }`. */
-  SELECTED: "ui:selected",
-  /** Focus changed (bubbles). `detail`: `{ component, attributes }`, or `null` for the overview. */
-  FOCUS_CHANGE: "vd:focus-change",
-  /** Resolved configuration changed (bubbles). `detail`: the resolved configuration, or `null` when nothing matches. */
-  CONFIGURATION_CHANGE: "vd:configuration-change",
-  /** Configuration submitted (bubbles). `detail`: the resolved configuration handed to the host. */
-  CONFIGURATION_SUBMIT: "vd:configuration-submit"
-};
 class re {
   constructor(t, e) {
     this.send = t, this.dispatch = e;
@@ -878,7 +850,7 @@ class re {
   }
   /** Called by the client when a FocusStateMessage is received from the viewer. */
   handleStateReceived(t) {
-    t.state === $t.FOCUSED && t.component !== void 0 ? (this.focused = t.component, this.attributes = t.attributes ?? []) : (this.focused = null, this.attributes = []);
+    t.state === Ut.FOCUSED && t.component !== void 0 ? (this.focused = t.component, this.attributes = t.attributes ?? []) : (this.focused = null, this.attributes = []);
     const e = this.focused !== null ? { component: this.focused, attributes: this.attributes } : null;
     for (const i of this.changeCallbacks)
       i(e);
@@ -1009,7 +981,7 @@ class ce {
     if (this.pricing === void 0)
       return;
     const t = ae(this.pricing.rules, this.selection);
-    if (!(t === void 0 || t.availability === Dt.HIDDEN))
+    if (!(t === void 0 || t.availability === Vt.HIDDEN))
       return {
         attributes: { ...this.selection },
         reference: t.reference,
@@ -1521,7 +1493,7 @@ const ye = (
   /** @type {(inputs: Controls_Configurator_OpenInputs) => LocalizedString} */
   () => (
     /** @type {LocalizedString} */
-    "Configureer"
+    "Configureren"
   )
 ), nn = (
   /** @type {(inputs: Controls_Configurator_OpenInputs) => LocalizedString} */
@@ -2392,7 +2364,7 @@ function st(n) {
   return t * t * (3 - 2 * t);
 }
 function bi(n, t, e, i, o, s) {
-  const [r, l, d] = n, u = Math.cos(t), p = Math.sin(t), v = u * r + p * d, E = -p * r + u * d, S = Math.cos(e), w = Math.sin(e), R = S * l - w * E, M = w * l + S * E, Y = 0.55;
+  const [r, l, d] = n, u = Math.cos(t), p = Math.sin(t), v = u * r + p * d, E = -p * r + u * d, S = Math.cos(e), k = Math.sin(e), R = S * l - k * E, M = k * l + S * E, Y = 0.55;
   return [i + v * s * Y, o - R * s * Y, M];
 }
 function vi(n, t, e) {
@@ -2541,14 +2513,14 @@ class wi {
       return;
     const t = this.canvas.width / Math.min(devicePixelRatio, 2), e = this.canvas.height / Math.min(devicePixelRatio, 2), i = (performance.now() - this.startTime) / 1e3;
     this.ctx.fillStyle = "#fff", this.ctx.fillRect(0, 0, t, e);
-    const o = t / 2, s = e * 0.44, r = Math.min(t, e) * 0.08, l = 0.785, d = 0.615, u = (w) => bi(w, l, d, o, s, r), p = 6, v = i % p / p, E = rt.length;
+    const o = t / 2, s = e * 0.44, r = Math.min(t, e) * 0.08, l = 0.785, d = 0.615, u = (k) => bi(k, l, d, o, s, r), p = 6, v = i % p / p, E = rt.length;
     let S;
     v < 0.35 ? S = st(v / 0.35) * E : v < 0.55 ? S = E : v < 0.9 ? S = (1 - st((v - 0.55) / 0.35)) * E : S = 0, this.ctx.shadowBlur = 5, this.ctx.shadowColor = "rgba(30,30,30,0.08)";
-    for (let w = 0; w < E && !(w >= S); w++) {
-      const R = rt[w];
+    for (let k = 0; k < E && !(k >= S); k++) {
+      const R = rt[k];
       if (R === void 0)
         continue;
-      const M = Math.min(1, S - w);
+      const M = Math.min(1, S - k);
       yi(this.ctx, u, R[0], R[1], M);
     }
     this.ctx.shadowBlur = 0;
@@ -3146,7 +3118,40 @@ class Ui {
     this.screenshotBtn === null || this.slots.topRight === null || (this.cameraControls !== null ? this.cameraControls.element.appendChild(this.screenshotBtn.element) : this.slots.topRight.appendChild(this.screenshotBtn.element));
   }
 }
-class Hi {
+class Vi {
+  constructor(t) {
+    this.send = t;
+  }
+  send;
+  placedCallbacks = [];
+  setEnabled(t) {
+    this.send({
+      type: c.ANNOTATION_TOGGLE,
+      enabled: t
+    });
+  }
+  startPlacing() {
+    this.send({
+      type: c.ANNOTATION_PLACE_MODE,
+      enabled: !0
+    });
+  }
+  stopPlacing() {
+    this.send({
+      type: c.ANNOTATION_PLACE_MODE,
+      enabled: !1
+    });
+  }
+  onPlaced(t) {
+    this.placedCallbacks.push(t);
+  }
+  /** Called by the client when an ANNOTATION_PLACED message is received. */
+  handlePlaced(t) {
+    for (const e of this.placedCallbacks)
+      e(t);
+  }
+}
+class Gi {
   attributes;
   readyStateTracker;
   messenger;
@@ -3162,17 +3167,18 @@ class Hi {
   options;
   iframe;
   container;
+  viewerSessionId;
   readyCallbacks = [];
   mutationFailedCallbacks = [];
   constructor(t) {
-    this.options = t, this.initializeLogging(), this.messenger = new Qt(() => this.iframe?.contentWindow ?? null);
+    this.options = t, this.initializeLogging(), this.messenger = new ne(() => this.iframe?.contentWindow ?? null);
     const e = (i) => {
       this.messenger.send(i);
     };
     this.attributes = new ie(e, (i, o) => {
       for (const s of this.mutationFailedCallbacks)
         s({ attribute: i, value: o });
-    }), this.snapshotApi = new de(e), this.annotationsApi = new Jt(e), this.cameraApi = new oe(e), this.cameraPositionApi = new se(), this.focusApi = new re(e, (i) => {
+    }), this.snapshotApi = new de(e), this.annotationsApi = new Vi(e), this.cameraApi = new oe(e), this.cameraPositionApi = new se(), this.focusApi = new re(e, (i) => {
       this.dispatchFocusChange(i);
     }), this.configurationApi = new ce(
       (i) => {
@@ -3201,30 +3207,36 @@ class Hi {
     }), this.registerHandlers(), this.messenger.start(), this.createAndConnectIframe();
   }
   registerHandlers() {
-    this.messenger.on(c.HANDSHAKE, (t) => {
-      Vt(t) && (C.info("Server handshake received, flushing publisher queue"), this.messenger.markReady());
-    }), this.messenger.on(c.MUTATION, (t) => {
-      jt(t) && (this.attributes.handleMutationResult(t), this.configurationApi.handleSelectionChanged(this.attributes.getSelection()));
+    this.registerLifecycleHandlers(), this.messenger.on(c.MUTATION, (t) => {
+      Zt(t) && (this.attributes.handleMutationResult(t), this.configurationApi.handleSelectionChanged(this.attributes.getSelection()));
     }), this.messenger.on(c.SNAPSHOT, (t) => {
-      Ht(t) && this.snapshotApi.handleSnapshotResult(t);
+      Wt(t) && this.snapshotApi.handleSnapshotResult(t);
     }), this.messenger.on(c.CAMERA, (t) => {
-      Gt(t) && this.cameraPositionApi.handlePositionUpdate(t);
+      Yt(t) && this.cameraPositionApi.handlePositionUpdate(t);
     }), this.messenger.on(c.LOADING_INDICATOR, (t) => {
-      Zt(t) && (t.error !== void 0 ? this.ui.showError(t.error) : this.ui.updateProgress(t.progress, t.phase));
+      Kt(t) && (t.error !== void 0 ? this.ui.showError(t.error) : this.ui.updateProgress(t.progress, t.phase));
     }), this.messenger.on(c.CONFIG, (t) => {
-      Wt(t) && this.handleConfig(t);
+      Qt(t) && this.handleConfig(t);
     }), this.messenger.on(c.ANNOTATION_PLACED, (t) => {
-      Yt(t) && this.annotationsApi.handlePlaced(t.position);
+      Jt(t) && this.annotationsApi.handlePlaced(t.position);
     }), this.messenger.on(c.MAPPING, (t) => {
-      qt(t) && (this.attributes.handleMappingReceived(t), this.configurationApi.handleSelectionChanged(this.attributes.getSelection()), this.ui.renderAttributeControls(this.attributes, t.attributes), this.readyStateTracker.handleMappingReceived());
+      Xt(t) && (this.attributes.handleMappingReceived(t), this.configurationApi.handleSelectionChanged(this.attributes.getSelection()), this.ui.renderAttributeControls(this.attributes, t.attributes), this.readyStateTracker.handleMappingReceived());
     }), this.registerFacadeStateHandlers();
   }
+  /** Lifecycle handlers: the handshake (queue flush) and the tracking session id. */
+  registerLifecycleHandlers() {
+    this.messenger.on(c.HANDSHAKE, (t) => {
+      Gt(t) && (C.info("Server handshake received, flushing publisher queue"), this.messenger.markReady());
+    }), this.messenger.on(c.SESSION, (t) => {
+      qt(t) && (this.viewerSessionId = t.sessionId);
+    });
+  }
   /** Handlers that feed viewer-reported state into the facades (focus, pricing). */
   registerFacadeStateHandlers() {
     this.messenger.on(c.FOCUS, (t) => {
-      Xt(t) && this.focusApi.handleStateReceived(t);
+      te(t) && this.focusApi.handleStateReceived(t);
     }), this.messenger.on(c.PRICING, (t) => {
-      Kt(t) && this.configurationApi.handlePricingReceived(t.pricing);
+      ee(t) && this.configurationApi.handlePricingReceived(t.pricing);
     });
   }
   /**
@@ -3334,14 +3346,23 @@ class Hi {
   get viewerSettings() {
     return this.ui.viewerSettings;
   }
+  /**
+   * The viewer's tracking session id, once the viewer has established it (the id
+   * is generated inside the iframe and announced to the client). `undefined`
+   * until then. A host page can use it to correlate its own actions, e.g. a
+   * configurator conversion, with the viewer session.
+   */
+  get sessionId() {
+    return this.viewerSessionId;
+  }
   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;
   }
 }
 export {
-  Jt as Annotations,
-  ee as Attribute,
-  te as AttributeValue,
+  Vi as Annotations,
+  Dt as Attribute,
+  $t as AttributeValue,
   oe as Camera,
   ce as Configuration,
   A as ERROR_CODES,
@@ -3349,9 +3370,9 @@ export {
   ue as Photo,
   de as Snapshot,
   O as VD_EVENTS,
-  Hi as VirtualdisplayClient,
+  Gi as VirtualdisplayClient,
   f as VirtualdisplayError,
   Pt as enableDebugMode,
-  Vi as isDebugMode,
+  ji as isDebugMode,
   C as logger
 };