@vincentt-xr/sdk 2.0.0-alpha.6 → 2.0.0-alpha.7

package/dist/low-level.js

@@ -1,18 +1,18 @@
-import { u as se, X as O } from "./index-I4eF5TKT.js";
-import { u as le } from "./index-B-s4YbWu.js";
-import { H as dt, a as ut } from "./index-B-s4YbWu.js";
-import { c as ce } from "./selectors-ByKNTXeA.js";
-import { u as mt, b as ft, e as pt, a as gt, d as bt } from "./selectors-ByKNTXeA.js";
-import { useEffect as M, useState as S, useRef as X, useCallback as de, useLayoutEffect as ue, useMemo as $, Children as he, isValidElement as me } from "react";
-import { c as fe } from "./getFaceInfo-B43Cwq4n.js";
-import { d as xt, e as vt } from "./getFaceInfo-B43Cwq4n.js";
-import { jsx as g, jsxs as k, Fragment as W } from "react/jsx-runtime";
+import { u as O, X as ee } from "./index-9dlAQAhy.js";
+import { u as le } from "./index-ByoNj0QP.js";
+import { H as ct, a as ut } from "./index-ByoNj0QP.js";
+import { c as de } from "./selectors-B8H97CKA.js";
+import { u as mt, b as ft, e as pt, a as gt, d as bt } from "./selectors-B8H97CKA.js";
+import { useEffect as z, useState as C, useRef as X, useCallback as ce, useLayoutEffect as ue, useMemo as $, Children as he, isValidElement as me } from "react";
+import { c as fe } from "./getFaceInfo-C4QpCQIY.js";
+import { d as xt, e as vt } from "./getFaceInfo-C4QpCQIY.js";
+import { jsx as g, jsxs as k, Fragment as _ } from "react/jsx-runtime";
 import { PerspectiveCamera as pe } from "@react-three/drei";
-import { S as Ct, g as St, c as Rt, d as It, u as Et } from "./index-uE3sKczj.js";
-import { u as ee } from "./useFaceResults-D62STzT1.js";
-import { h as Ft } from "./hasFullUnitUVBounds-BGvcFsQM.js";
-import { X as ge, a as be, b as we } from "./contexts-DvQI4PqI.js";
-import { B as zt, M as Xt, h as kt, i as At, T as Lt, c as Vt, j as Dt, k as Bt, g as Wt, e as _t, f as Ht, r as Pt, t as $t, d as qt, u as Ut } from "./contexts-DvQI4PqI.js";
+import { S as yt, g as Ct, c as Rt, d as It, u as Et } from "./index-VJ0SJwmG.js";
+import { u as te } from "./useFaceResults-CtetsO9M.js";
+import { h as Mt } from "./hasFullUnitUVBounds-BGvcFsQM.js";
+import { X as ge, a as be, b as we } from "./contexts-ByhzppYl.js";
+import { B as zt, M as Xt, h as kt, i as At, T as Lt, c as Vt, j as Dt, k as Bt, g as _t, e as Wt, f as Ht, r as Pt, t as $t, d as qt, u as Ut } from "./contexts-ByhzppYl.js";
 import * as L from "three";
 const B = ({
   children: e,
@@ -39,74 +39,79 @@ const B = ({
   layout: t,
   media: n,
   mirrored: r,
-  filter: o
+  filter: i
 }) => {
-  const i = Math.round(t.destination.width), a = Math.round(t.destination.height);
-  e.width !== i && (e.width = i), e.height !== a && (e.height = a);
+  const o = Math.round(t.destination.width), a = Math.round(t.destination.height);
+  e.width !== o && (e.width = o), e.height !== a && (e.height = a);
   const s = e.getContext("2d");
-  s && (s.setTransform(1, 0, 0, 1, 0, 0), s.clearRect(0, 0, i, a), r && (s.translate(i, 0), s.scale(-1, 1)), o && (s.filter = o), s.drawImage(n, t.offsetX, t.offsetY, t.drawWidth, t.drawHeight), o && (s.filter = "none"), s.setTransform(1, 0, 0, 1, 0, 0));
-}, te = ({
+  s && (s.setTransform(1, 0, 0, 1, 0, 0), s.clearRect(0, 0, o, a), r && (s.translate(o, 0), s.scale(-1, 1)), i && (s.filter = i), s.drawImage(n, t.offsetX, t.offsetY, t.drawWidth, t.drawHeight), i && (s.filter = "none"), s.setTransform(1, 0, 0, 1, 0, 0));
+}, re = ({
   canvasRef: e,
   enabled: t = !0,
   fps: n = 30,
   imageRef: r,
-  layout: o,
-  mirrored: i,
+  layout: i,
+  mirrored: o,
   sourceKind: a,
   videoRef: s
 }) => {
-  M(() => {
+  z(() => {
     if (!t) {
       const b = e.current, f = b == null ? void 0 : b.getContext("2d");
       b && f && f.clearRect(0, 0, b.width, b.height);
       return;
     }
-    let l = 0, c = 0;
-    const d = n > 0 ? 1e3 / n : 0, h = (b) => {
-      if (l = requestAnimationFrame(h), d > 0 && b - c < d) return;
-      c = b;
+    let l = 0, d = 0;
+    const c = n > 0 ? 1e3 / n : 0, h = (b) => {
+      if (l = requestAnimationFrame(h), c > 0 && b - d < c) return;
+      d = b;
       const f = e.current;
-      if (!f || !o) return;
+      if (!f || !i) return;
       if (a === "image") {
         const p = r.current;
         if (!p || !p.complete || p.naturalWidth <= 0 || p.naturalHeight <= 0)
           return;
         q({
           canvas: f,
-          layout: o,
+          layout: i,
           media: p,
-          mirrored: i
+          mirrored: o
         });
         return;
       }
       const w = s.current;
       !w || w.readyState < 2 || w.videoWidth <= 0 || w.videoHeight <= 0 || q({
         canvas: f,
-        layout: o,
+        layout: i,
         media: w,
-        mirrored: i
+        mirrored: o
       });
     };
     return l = requestAnimationFrame(h), () => {
       cancelAnimationFrame(l);
     };
-  }, [e, t, n, r, o, i, a, s]);
+  }, [e, t, n, r, i, o, a, s]);
 }, xe = ({
   canvasRef: e,
   imageRef: t,
   layer: n,
   layout: r,
-  mirrored: o,
-  sourceKind: i,
-  videoRef: a
-}) => (te({
+  mirrored: i,
+  onCaptureTarget: o,
+  sourceKind: a,
+  videoRef: s
+}) => (re({
   canvasRef: e,
   imageRef: t,
   layout: r,
-  mirrored: o,
-  sourceKind: i,
-  videoRef: a
-}), /* @__PURE__ */ g(B, { config: n, children: /* @__PURE__ */ g(
+  mirrored: i,
+  sourceKind: a,
+  videoRef: s
+}), z(() => {
+  const l = e.current;
+  if (l)
+    return o == null || o(l), () => o == null ? void 0 : o(void 0);
+}, [e, o]), /* @__PURE__ */ g(B, { config: n, children: /* @__PURE__ */ g(
   "canvas",
   {
     ref: e,
@@ -124,26 +129,26 @@ const B = ({
   controlInsetTop: t,
   debugVisible: n,
   fps: r = 15,
-  imageRef: o,
-  layer: i,
+  imageRef: i,
+  layer: o,
   layout: a,
   mirrored: s,
   sourceKind: l,
-  videoRef: c,
-  viewportSize: d
+  videoRef: d,
+  viewportSize: c
 }) => {
-  te({
+  re({
     canvasRef: e,
     enabled: n,
     fps: r,
-    imageRef: o,
+    imageRef: i,
     layout: a,
     mirrored: s,
     sourceKind: l,
-    videoRef: c
+    videoRef: d
   });
-  const h = Math.min(220, Math.max(120, d.width * 0.22)), b = d.width > 0 && d.height > 0 ? d.width / d.height : 1, f = Math.min(d.height - 24, Math.max(t ?? 16, 16));
-  return /* @__PURE__ */ g(B, { config: i, children: /* @__PURE__ */ g(
+  const h = Math.min(220, Math.max(120, c.width * 0.22)), b = c.width > 0 && c.height > 0 ? c.width / c.height : 1, f = Math.min(c.height - 24, Math.max(t ?? 16, 16));
+  return /* @__PURE__ */ g(B, { config: o, children: /* @__PURE__ */ g(
     "canvas",
     {
       ref: e,
@@ -169,17 +174,17 @@ const B = ({
     facingMode: "user",
     frameRate: { ideal: 30, max: 60 }
   }
-}, ye = {
+}, Se = {
   name: "viewport-live",
   clearColor: "#000000",
   pointerEvents: "none",
   zIndex: 0
-}, Ce = {
+}, ye = {
   name: "viewport-ui",
   clearColor: "transparent",
   pointerEvents: "auto",
   zIndex: 5
-}, Se = {
+}, Ce = {
   name: "viewport-scene",
   clearColor: "transparent",
   pointerEvents: "auto",
@@ -192,7 +197,7 @@ const B = ({
   imageRef: e,
   selectedSource: t,
   videoRef: n
-}) => /* @__PURE__ */ k(W, { children: [
+}) => /* @__PURE__ */ k(_, { children: [
   /* @__PURE__ */ g(
     "video",
     {
@@ -225,7 +230,7 @@ const B = ({
   label: t,
   onChange: n,
   options: r,
-  value: o
+  value: i
 }) => /* @__PURE__ */ g(
   "div",
   {
@@ -258,8 +263,8 @@ const B = ({
           /* @__PURE__ */ g(
             "select",
             {
-              value: o,
-              onChange: (i) => n(i.target.value),
+              value: i,
+              onChange: (o) => n(o.target.value),
               style: {
                 minWidth: 180,
                 maxWidth: "calc(100vw - 52px)",
@@ -270,7 +275,7 @@ const B = ({
                 color: "#e5eefb",
                 padding: "0 10px"
               },
-              children: r.map((i) => /* @__PURE__ */ g("option", { value: i.id, style: { color: "#111827" }, children: i.label }, i.id))
+              children: r.map((o) => /* @__PURE__ */ g("option", { value: o.id, style: { color: "#111827" }, children: o.label }, o.id))
             }
           )
         ]
@@ -282,15 +287,15 @@ const B = ({
   imageOptions: t,
   selectedImageId: n,
   selectedSource: r,
-  selectedVideoId: o,
-  setSelectedImageId: i,
+  selectedVideoId: i,
+  setSelectedImageId: o,
   setSelectedSource: a,
   setSelectedVideoId: s,
   showMediaControls: l,
-  videoOptions: c
+  videoOptions: d
 }) => {
-  const [d, h] = S(!1), b = ["webcam", "image", "video"].filter((f) => f === "image" ? t.length > 0 : f === "video" ? c.length > 0 : !0);
-  return l ? d ? /* @__PURE__ */ g(
+  const [c, h] = C(!1), b = ["webcam", "image", "video"].filter((f) => f === "image" ? t.length > 0 : f === "video" ? d.length > 0 : !0);
+  return l ? c ? /* @__PURE__ */ g(
     "button",
     {
       type: "button",
@@ -315,7 +320,7 @@ const B = ({
       },
       children: "≡"
     }
-  ) : /* @__PURE__ */ k(W, { children: [
+  ) : /* @__PURE__ */ k(_, { children: [
     /* @__PURE__ */ k(
       "div",
       {
@@ -412,16 +417,16 @@ const B = ({
         label: "Image Asset",
         options: t,
         value: n,
-        onChange: i
+        onChange: o
       }
     ),
-    r === "video" && c.length > 0 && /* @__PURE__ */ g(
+    r === "video" && d.length > 0 && /* @__PURE__ */ g(
       Y,
       {
         dock: e,
         label: "Video Asset",
-        options: c,
-        value: o,
+        options: d,
+        value: i,
         onChange: s
       }
     )
@@ -431,122 +436,126 @@ const B = ({
   displayCanvasRef: t,
   imageOptions: n,
   imageRef: r,
-  layout: o,
-  managesOwnMedia: i,
+  layout: i,
+  managesOwnMedia: o,
   mediaDock: a,
   mode: s,
   overlayContent: l,
-  renderOutputs: c,
-  sceneContent: d,
+  renderOutputs: d,
+  sceneContent: c,
   selectedImageId: h,
   selectedSource: b,
   selectedVideoId: f,
   setSceneRenderOutputs: w,
   setSelectedImageId: p,
   setSelectedSource: m,
-  setSelectedVideoId: y,
-  showMediaControls: F,
+  setSelectedVideoId: S,
+  showMediaControls: M,
   style: R,
   videoOptions: v,
-  videoRef: I,
+  videoRef: E,
   viewportSize: x,
   mirrored: u
-}) => /* @__PURE__ */ k(
-  "div",
-  {
-    ref: e,
-    style: {
-      position: "fixed",
-      inset: 0,
-      overflow: "hidden",
-      background: "#000",
-      ...R
-    },
-    children: [
-      /* @__PURE__ */ g(Re, { imageRef: r, selectedSource: b, videoRef: I }),
-      s === "dom" && i && /* @__PURE__ */ g(
-        xe,
-        {
-          canvasRef: t,
-          imageRef: r,
-          videoRef: I,
-          layer: ye,
-          layout: o,
-          mirrored: u,
-          sourceKind: b === "image" ? "image" : "video"
-        }
-      ),
-      (s === "r3f" || s === "hybrid") && /* @__PURE__ */ g(B, { config: Se, children: /* @__PURE__ */ g(
-        ge,
-        {
-          onRenderOutputs: w,
-          renderOutputs: {
-            sceneColor: c.sceneColor || c.finalColor,
-            sceneDepth: c.sceneDepth
-          },
-          renderTargetSize: x,
-          style: { width: "100%", height: "100%" },
-          children: d
-        }
-      ) }),
-      /* @__PURE__ */ k(B, { config: Ce, children: [
-        i && /* @__PURE__ */ g(
-          Ie,
+}) => {
+  const { session: I } = O();
+  return /* @__PURE__ */ k(
+    "div",
+    {
+      ref: e,
+      style: {
+        position: "fixed",
+        inset: 0,
+        overflow: "hidden",
+        background: "#000",
+        ...R
+      },
+      children: [
+        /* @__PURE__ */ g(Re, { imageRef: r, selectedSource: b, videoRef: E }),
+        s === "dom" && o && /* @__PURE__ */ g(
+          xe,
           {
-            dock: a,
-            imageOptions: n,
-            selectedImageId: h,
-            selectedSource: b,
-            selectedVideoId: f,
-            setSelectedImageId: p,
-            setSelectedSource: m,
-            setSelectedVideoId: y,
-            showMediaControls: F,
-            videoOptions: v
+            canvasRef: t,
+            imageRef: r,
+            videoRef: E,
+            layer: Se,
+            layout: i,
+            mirrored: u,
+            onCaptureTarget: I._setCaptureTarget,
+            sourceKind: b === "image" ? "image" : "video"
           }
         ),
-        l
-      ] })
-    ]
-  }
-), Te = 5, Fe = 1, Me = (e, t) => t, ze = "brightness(2.2) contrast(1.5) saturate(1.25)", Xe = ({
+        (s === "r3f" || s === "hybrid") && /* @__PURE__ */ g(B, { config: Ce, children: /* @__PURE__ */ g(
+          ge,
+          {
+            onRenderOutputs: w,
+            renderOutputs: {
+              sceneColor: d.sceneColor || d.finalColor,
+              sceneDepth: d.sceneDepth
+            },
+            renderTargetSize: x,
+            style: { width: "100%", height: "100%" },
+            children: c
+          }
+        ) }),
+        /* @__PURE__ */ k(B, { config: ye, children: [
+          o && /* @__PURE__ */ g(
+            Ie,
+            {
+              dock: a,
+              imageOptions: n,
+              selectedImageId: h,
+              selectedSource: b,
+              selectedVideoId: f,
+              setSelectedImageId: p,
+              setSelectedSource: m,
+              setSelectedVideoId: S,
+              showMediaControls: M,
+              videoOptions: v
+            }
+          ),
+          l
+        ] })
+      ]
+    }
+  );
+}, Fe = 5, Me = 1, Te = (e, t) => t, ze = "brightness(2.2) contrast(1.5) saturate(1.25)", Xe = ({
   enabled: e,
   displayMirrored: t,
   imageRef: n,
   layout: r,
-  mode: o,
-  numFaces: i,
+  mode: i,
+  numFaces: o,
   selectedSource: a,
   sourceStream: s,
   videoRef: l
 }) => {
-  const { session: c } = se(), d = X(null), h = X(!1), b = X(document.createElement("canvas")), {
+  const { session: d } = O(), c = X(null), h = X(!1), b = X(document.createElement("canvas")), {
     ready: f,
     node: w,
     error: p
-  } = le(O.FACE_TRACKER, {
-    numFaces: i ?? (o === "head-binding" ? Fe : Te)
-  }), [m, y] = S("idle"), [F, R] = S(null), v = e && f && !!w, I = ee({
+  } = le(ee.FACE_TRACKER, {
+    numFaces: o ?? (i === "head-binding" ? Me : Fe)
+  }), [m, S] = C("idle"), [M, R] = C(null), v = e && f && !!w, E = te({
     node: v ? w : null,
     enabled: v,
     selectedSource: a,
-    onFrame: de(() => {
-      R(null), y("ready");
+    onFrame: ce(() => {
+      R(null), S("ready");
     }, [])
   });
-  return M(() => {
+  return z(() => {
     if (!e || !r) return;
     const x = () => {
-      const C = a === "image" ? n.current : l.current;
-      if (C) {
-        if (C instanceof HTMLImageElement) {
-          if (!C.complete || C.naturalWidth <= 0 || C.naturalHeight <= 0) return;
-        } else if (C.readyState < 2 || C.videoWidth <= 0 || C.videoHeight <= 0)
+      const y = a === "image" ? n.current : l.current;
+      if (y) {
+        if (y instanceof HTMLImageElement) {
+          if (!y.complete || y.naturalWidth <= 0 || y.naturalHeight <= 0) return;
+        } else if (y.readyState < 2 || y.videoWidth <= 0 || y.videoHeight <= 0)
           return;
         q({
           canvas: b.current,
           layout: r,
-          media: C,
+          media: y,
           mirrored: t,
           filter: a === "webcam" ? ze : void 0
         });
@@ -557,75 +566,80 @@ const B = ({
       return;
     }
     let u = 0;
-    const E = () => {
-      u = requestAnimationFrame(E), x();
+    const I = () => {
+      u = requestAnimationFrame(I), x();
     };
-    return u = requestAnimationFrame(E), () => cancelAnimationFrame(u);
-  }, [t, e, n, r, a, l]), M(() => {
+    return u = requestAnimationFrame(I), () => cancelAnimationFrame(u);
+  }, [t, e, n, r, a, l]), z(() => {
     var V;
     if (!e) {
-      y("idle"), R(null), h.current = !1, d.current = null;
+      S("idle"), R(null), h.current = !1, c.current = null;
       return;
     }
     if (!r) {
-      y("initializing");
+      S("initializing");
       return;
     }
-    const x = (s == null ? void 0 : s.id) ?? (((V = l.current) == null ? void 0 : V.srcObject) instanceof MediaStream ? l.current.srcObject.id : "none"), E = a === "webcam" ? `webcam:${x}` : a;
-    d.current !== E && (h.current = !1, d.current = E);
-    let C = !1;
+    const x = (s == null ? void 0 : s.id) ?? (((V = l.current) == null ? void 0 : V.srcObject) instanceof MediaStream ? l.current.srcObject.id : "none"), I = a === "webcam" ? `webcam:${x}` : a;
+    c.current !== I && (h.current = !1, c.current = I);
+    let y = !1;
     return (async () => {
       try {
-        if (y("initializing"), h.current || (await c.setFrameSource({
+        S("initializing");
+        const T = !h.current;
+        if (T && await d.setFrameSource({
           canvas: b.current,
           sourceKind: a
-        }), await c.start(), h.current = !0), C) return;
-        R(null), y("initializing");
-      } catch (z) {
-        if (C) return;
-        y("error"), R(z instanceof Error ? z.message : "Failed to initialize SDK face tracking");
+        }), await d._setRenderSize(
+          Math.round(r.destination.width),
+          Math.round(r.destination.height)
+        ), T && (await d.start(), h.current = !0), y) return;
+        R(null), S("initializing");
+      } catch (T) {
+        if (y) return;
+        S("error"), R(T instanceof Error ? T.message : "Failed to initialize SDK face tracking");
       }
     })(), () => {
-      C = !0;
+      y = !0;
     };
-  }, [e, r, a, c, s, l]), M(() => {
-    !v && e && !p && y("initializing");
-  }, [v, e, p]), M(() => {
-    p && (y("error"), R(p.message));
-  }, [p]), M(() => () => {
-    h.current = !1, c.stop();
-  }, [c]), {
+  }, [e, r, a, d, s, l]), z(() => {
+    !v && e && !p && S("initializing");
+  }, [v, e, p]), z(() => {
+    p && (S("error"), R(p.message));
+  }, [p]), z(() => () => {
+    h.current = !1, d.stop();
+  }, [d]), {
     activeDelegate: "GPU",
-    faces: I,
+    faces: E,
     status: m,
-    error: F
+    error: M
   };
 }, ke = (e, t) => e === "auto" ? t === "webcam" ? "cover" : "contain" : e, Ae = ({
   imageOptions: e,
   initialImageId: t,
   initialSource: n,
   initialVideoId: r,
-  source: o,
-  videoOptions: i
+  source: i,
+  videoOptions: o
 }) => {
-  var l, c, d, h;
-  const a = (o == null ? void 0 : o.kind) ?? n ?? "webcam";
+  var l, d, c, h;
+  const a = (i == null ? void 0 : i.kind) ?? n ?? "webcam";
   return {
-    selectedSource: a === "image" && e.length === 0 || a === "video" && i.length === 0 ? "webcam" : a,
-    selectedImageId: (o == null ? void 0 : o.kind) === "image" ? o.assetId ?? ((l = e[0]) == null ? void 0 : l.id) ?? "" : t ?? ((c = e[0]) == null ? void 0 : c.id) ?? "",
-    selectedVideoId: (o == null ? void 0 : o.kind) === "video" ? o.assetId ?? ((d = i[0]) == null ? void 0 : d.id) ?? "" : r ?? ((h = i[0]) == null ? void 0 : h.id) ?? ""
+    selectedSource: a === "image" && e.length === 0 || a === "video" && o.length === 0 ? "webcam" : a,
+    selectedImageId: (i == null ? void 0 : i.kind) === "image" ? i.assetId ?? ((l = e[0]) == null ? void 0 : l.id) ?? "" : t ?? ((d = e[0]) == null ? void 0 : d.id) ?? "",
+    selectedVideoId: (i == null ? void 0 : i.kind) === "video" ? i.assetId ?? ((c = o[0]) == null ? void 0 : c.id) ?? "" : r ?? ((h = o[0]) == null ? void 0 : h.id) ?? ""
   };
 }, Le = (e, t, n) => {
   if (e.width <= 0 || e.height <= 0 || t.width <= 0 || t.height <= 0)
     return null;
-  const r = n === "contain" ? Math.min(t.width / e.width, t.height / e.height) : Math.max(t.width / e.width, t.height / e.height), o = e.width * r, i = e.height * r;
+  const r = n === "contain" ? Math.min(t.width / e.width, t.height / e.height) : Math.max(t.width / e.width, t.height / e.height), i = e.width * r, o = e.height * r;
   return {
     source: e,
     destination: t,
-    drawWidth: o,
-    drawHeight: i,
-    offsetX: (t.width - o) * 0.5,
-    offsetY: (t.height - i) * 0.5,
+    drawWidth: i,
+    drawHeight: o,
+    offsetX: (t.width - i) * 0.5,
+    offsetY: (t.height - o) * 0.5,
     scale: r
   };
 }, Ve = (e) => {
@@ -636,82 +650,82 @@ const B = ({
     height: t.height || e.clientHeight
   };
 }, De = (e) => {
-  const [t, n] = S({ width: 0, height: 0 });
+  const [t, n] = C({ width: 0, height: 0 });
   return ue(() => {
     const r = e.current;
     if (!r) return;
-    let o = 0;
-    const i = () => {
-      const c = Ve(r);
+    let i = 0;
+    const o = () => {
+      const d = Ve(r);
       n(
-        (d) => d.width === c.width && d.height === c.height ? d : c
+        (c) => c.width === d.width && c.height === d.height ? c : d
       );
     }, a = () => {
-      i(), o && cancelAnimationFrame(o), o = requestAnimationFrame(i);
+      o(), i && cancelAnimationFrame(i), i = requestAnimationFrame(o);
     };
     a();
     const s = new ResizeObserver(a);
     s.observe(r);
     const l = window.visualViewport;
     return window.addEventListener("resize", a), window.addEventListener("orientationchange", a), l == null || l.addEventListener("resize", a), l == null || l.addEventListener("scroll", a), () => {
-      o && cancelAnimationFrame(o), s.disconnect(), window.removeEventListener("resize", a), window.removeEventListener("orientationchange", a), l == null || l.removeEventListener("resize", a), l == null || l.removeEventListener("scroll", a);
+      i && cancelAnimationFrame(i), s.disconnect(), window.removeEventListener("resize", a), window.removeEventListener("orientationchange", a), l == null || l.removeEventListener("resize", a), l == null || l.removeEventListener("scroll", a);
     };
   }, [e]), t;
 }, Be = ({
   enabled: e,
   selectedSource: t
 }) => {
-  const n = ce(O.FACE_TRACKER);
+  const n = de(ee.FACE_TRACKER);
   return {
-    faces: ee({ node: n, enabled: e, selectedSource: t }),
+    faces: te({ node: n, enabled: e, selectedSource: t }),
     trackerStatus: n ? "ready" : "idle"
   };
 }, J = (e) => {
   e && (e.pause(), e.removeAttribute("src"), e.srcObject = null, e.load());
 }, Q = (e) => {
   e && e.removeAttribute("src");
-}, We = ({
+}, _e = ({
   enabled: e,
   imageAsset: t,
   selectedSource: n,
   videoAsset: r
 }) => {
-  const o = X(null), i = X(null), [a, s] = S(null), [l, c] = S({ width: 0, height: 0 }), [d, h] = S("idle"), [b, f] = S(null);
-  return M(() => {
+  const i = X(null), o = X(null), [a, s] = C(null), [l, d] = C({ width: 0, height: 0 }), [c, h] = C("idle"), [b, f] = C(null);
+  return z(() => {
     if (!e) {
-      J(o.current), Q(i.current), s(null), c({ width: 0, height: 0 }), h("idle"), f(null);
+      J(i.current), Q(o.current), s(null), d({ width: 0, height: 0 }), h("idle"), f(null);
       return;
     }
     let w = !1, p = null;
     const m = (x, u) => {
-      w || (c({ width: x, height: u }), h("ready"), f(null));
-    }, y = () => {
-      J(o.current), Q(i.current), p == null || p.getTracks().forEach((x) => x.stop()), p = null, s(null);
-    }, F = async () => {
+      w || (d({ width: x, height: u }), h("ready"), f(null));
+    }, S = () => {
+      J(i.current), Q(o.current), p == null || p.getTracks().forEach((x) => x.stop()), p = null, s(null);
+    }, M = async () => {
       h("requesting");
       const x = await navigator.mediaDevices.getUserMedia(ve);
       if (w) {
-        x.getTracks().forEach((E) => E.stop());
+        x.getTracks().forEach((I) => I.stop());
         return;
       }
       p = x, s(x);
-      const u = o.current;
+      const u = i.current;
       u && (u.srcObject = x, u.muted = !0, u.playsInline = !0, u.autoplay = !0, await u.play(), m(u.videoWidth, u.videoHeight));
     }, R = async (x) => {
       h("requesting"), s(null);
-      const u = o.current;
+      const u = i.current;
       u && (u.src = x, u.muted = !0, u.loop = !0, u.playsInline = !0, u.autoplay = !0, u.crossOrigin = "anonymous", await u.play(), m(u.videoWidth, u.videoHeight));
     }, v = async (x) => {
       h("requesting"), s(null);
-      const u = i.current;
-      u && (await new Promise((E, C) => {
-        u.onload = () => E(), u.onerror = () => C(new Error("Unable to load image")), u.src = x;
+      const u = o.current;
+      u && (await new Promise((I, y) => {
+        u.onload = () => I(), u.onerror = () => y(new Error("Unable to load image")), u.src = x;
       }), m(u.naturalWidth, u.naturalHeight));
     };
-    return y(), (async () => {
+    return S(), (async () => {
       try {
         if (n === "webcam") {
-          await F();
+          await M();
           return;
         }
         if (n === "video") {
@@ -726,84 +740,84 @@ const B = ({
         h("error"), f(x instanceof Error ? x.message : `Unable to initialize ${n}`);
       }
     })(), () => {
-      w = !0, y();
+      w = !0, S();
     };
   }, [e, t, n, r]), {
-    videoRef: o,
-    imageRef: i,
+    videoRef: i,
+    imageRef: o,
     stream: a,
     mediaSize: l,
-    status: d,
+    status: c,
     error: b
   };
-}, _e = ({
+}, We = ({
   enabled: e,
   imageRef: t,
   selectedSource: n,
   status: r,
-  videoRef: o
+  videoRef: i
 }) => {
-  const [i, a] = S(null);
-  return M(() => {
+  const [o, a] = C(null);
+  return z(() => {
     if (!e || r !== "ready") {
-      a((c) => (c == null || c.dispose(), null));
+      a((d) => (d == null || d.dispose(), null));
       return;
     }
-    const s = n === "image" ? t.current : o.current;
+    const s = n === "image" ? t.current : i.current;
     if (!s) return;
     const l = n === "image" ? new L.Texture(s) : new L.VideoTexture(s);
-    return l.colorSpace = L.SRGBColorSpace, l.minFilter = L.LinearFilter, l.magFilter = L.LinearFilter, l.generateMipmaps = !1, l.needsUpdate = !0, a((c) => (c == null || c.dispose(), l)), () => {
+    return l.colorSpace = L.SRGBColorSpace, l.minFilter = L.LinearFilter, l.magFilter = L.LinearFilter, l.generateMipmaps = !1, l.needsUpdate = !0, a((d) => (d == null || d.dispose(), l)), () => {
       l.dispose();
     };
-  }, [e, t, n, r, o]), i;
+  }, [e, t, n, r, i]), o;
 }, He = ({
   externalTracker: e,
   imageOptions: t,
   layout: n,
   managesOwnMedia: r,
-  mediaError: o,
-  mediaFitMode: i,
+  mediaError: i,
+  mediaFitMode: o,
   mediaSize: a,
   mediaStatus: s,
   mirrored: l,
-  selectedImage: c,
-  selectedImageId: d,
+  selectedImage: d,
+  selectedImageId: c,
   selectedSource: h,
   selectedVideo: b,
   selectedVideoId: f,
   setMirrored: w,
   setSelectedImageId: p,
   setSelectedSource: m,
-  setSelectedVideoId: y,
-  setShowMediaControls: F,
+  setSelectedVideoId: S,
+  setShowMediaControls: M,
   showMediaControls: R,
   tracker: v,
-  videoOptions: I,
+  videoOptions: E,
   viewportSize: x
 }) => {
-  const u = h === "image" ? `${A.image.label}: ${(c == null ? void 0 : c.label) ?? ""}` : h === "video" ? `${A.video.label}: ${(b == null ? void 0 : b.label) ?? ""}` : A.webcam.label;
+  const u = h === "image" ? `${A.image.label}: ${(d == null ? void 0 : d.label) ?? ""}` : h === "video" ? `${A.video.label}: ${(b == null ? void 0 : b.label) ?? ""}` : A.webcam.label;
   return {
     activeDelegate: r ? v.activeDelegate : null,
     faces: r ? v.faces : e.faces,
     imageOptions: t,
     layout: n,
-    mediaError: o,
-    mediaFitMode: i,
+    mediaError: i,
+    mediaFitMode: o,
     mediaLabel: u,
     mediaStatus: s,
     mirrored: l,
-    selectedImageId: d,
+    selectedImageId: c,
     selectedSource: h,
     selectedVideoId: f,
     setMirrored: w,
     setSelectedImageId: p,
     setSelectedSource: m,
-    setSelectedVideoId: y,
-    setShowMediaControls: F,
+    setSelectedVideoId: S,
+    setShowMediaControls: M,
     showMediaControls: R,
     trackerError: r ? v.error : null,
     trackerStatus: r ? v.status : e.trackerStatus,
-    videoOptions: I,
+    videoOptions: E,
     viewportSize: x,
     mediaSize: a
   };
@@ -835,85 +849,85 @@ const B = ({
   imageOptions: t,
   initialImageId: n,
   initialMirrored: r,
-  initialSource: o,
-  initialVideoId: i,
+  initialSource: i,
+  initialVideoId: o,
   mediaStrategy: a,
   previewMode: s,
   renderOutputs: l,
-  showMediaControlsByDefault: c,
-  source: d,
+  showMediaControlsByDefault: d,
+  source: c,
   videoOptions: h
 }) => {
   const b = X(null), f = X(null), w = De(b), p = $(
     () => Ae({
       imageOptions: t,
       initialImageId: n,
-      initialSource: o,
-      initialVideoId: i,
-      source: d,
+      initialSource: i,
+      initialVideoId: o,
+      source: c,
       videoOptions: h
     }),
-    [t, n, o, i, d, h]
-  ), [m, y] = S(r), [F, R] = S(c), [v, I] = S(
+    [t, n, i, o, c, h]
+  ), [m, S] = C(r), [M, R] = C(d), [v, E] = C(
     p.selectedSource
-  ), [x, u] = S(p.selectedImageId), [E, C] = S(p.selectedVideoId), [j, V] = S({
+  ), [x, u] = C(p.selectedImageId), [I, y] = C(p.selectedVideoId), [j, V] = C({
     sceneColorTexture: null,
     sceneDepthTexture: null
-  }), z = a === "internal";
-  M(() => {
-    d && (I(p.selectedSource), u(p.selectedImageId), C(p.selectedVideoId));
-  }, [p, d]);
-  const K = t.find((P) => P.id === x) ?? t[0], G = h.find((P) => P.id === E) ?? h[0], T = We({
-    enabled: z,
+  }), T = a === "internal";
+  z(() => {
+    c && (E(p.selectedSource), u(p.selectedImageId), y(p.selectedVideoId));
+  }, [p, c]);
+  const K = t.find((P) => P.id === x) ?? t[0], G = h.find((P) => P.id === I) ?? h[0], F = _e({
+    enabled: T,
     imageAsset: K,
     selectedSource: v,
     videoAsset: G
-  }), _ = ke(e, v), D = $(
-    () => Le(T.mediaSize, w, _),
-    [T.mediaSize, _, w]
-  ), re = _e({
+  }), W = ke(e, v), D = $(
+    () => Le(F.mediaSize, w, W),
+    [F.mediaSize, W, w]
+  ), ne = We({
     enabled: !!(l.mediaColor || l.finalColor),
-    imageRef: T.imageRef,
+    imageRef: F.imageRef,
     selectedSource: v,
-    status: T.status,
-    videoRef: T.videoRef
-  }), H = Me(v, m), ne = Xe({
+    status: F.status,
+    videoRef: F.videoRef
+  }), H = Te(v, m), oe = Xe({
     displayMirrored: H,
-    enabled: z && T.status === "ready" && D !== null,
-    imageRef: T.imageRef,
+    enabled: T && F.status === "ready" && D !== null,
+    imageRef: F.imageRef,
     layout: D,
     selectedSource: v,
-    sourceStream: T.stream,
-    videoRef: T.videoRef
-  }), oe = Be({
-    enabled: !z,
+    sourceStream: F.stream,
+    videoRef: F.videoRef
+  }), ie = Be({
+    enabled: !T,
     selectedSource: v
-  }), ie = He({
-    externalTracker: oe,
+  }), ae = He({
+    externalTracker: ie,
     imageOptions: t,
     layout: D,
-    managesOwnMedia: z,
-    mediaError: T.error,
-    mediaFitMode: _,
-    mediaSize: T.mediaSize,
-    mediaStatus: T.status,
+    managesOwnMedia: T,
+    mediaError: F.error,
+    mediaFitMode: W,
+    mediaSize: F.mediaSize,
+    mediaStatus: F.status,
     mirrored: H,
     selectedImage: K,
     selectedImageId: x,
     selectedSource: v,
     selectedVideo: G,
-    selectedVideoId: E,
-    setMirrored: y,
+    selectedVideoId: I,
+    setMirrored: S,
     setSelectedImageId: u,
-    setSelectedSource: I,
-    setSelectedVideoId: C,
+    setSelectedSource: E,
+    setSelectedVideoId: y,
     setShowMediaControls: R,
-    showMediaControls: F,
-    tracker: ne,
+    showMediaControls: M,
+    tracker: oe,
     videoOptions: h,
     viewportSize: w
-  }), ae = Pe({
-    mediaTexture: re,
+  }), se = Pe({
+    mediaTexture: ne,
     previewMode: s,
     renderOutputs: l,
     sceneRenderOutputs: j
@@ -923,23 +937,23 @@ const B = ({
     displayCanvasRef: f,
     displayMirrored: H,
     layout: D,
-    managesOwnMedia: z,
-    media: T,
-    renderOutputState: ae,
-    renderState: ie,
+    managesOwnMedia: T,
+    media: F,
+    renderOutputState: se,
+    renderState: ae,
     selectedImageId: x,
     selectedSource: v,
-    selectedVideoId: E,
+    selectedVideoId: I,
     setSceneRenderOutputs: V,
     setSelectedImageId: u,
-    setSelectedSource: I,
-    setSelectedVideoId: C,
-    showMediaControls: F,
+    setSelectedSource: E,
+    setSelectedVideoId: y,
+    showMediaControls: M,
     viewportSize: w
   };
-}, U = ({ children: e }) => /* @__PURE__ */ g(W, { children: e });
+}, U = ({ children: e }) => /* @__PURE__ */ g(_, { children: e });
 U.displayName = "XRViewport.Scene";
-const N = ({ children: e }) => /* @__PURE__ */ g(W, { children: e });
+const N = ({ children: e }) => /* @__PURE__ */ g(_, { children: e });
 N.displayName = "XRViewport.Overlay";
 const qe = (e, t) => {
   if (e === "dom")
@@ -948,24 +962,24 @@ const qe = (e, t) => {
       overlayContent: t
     };
   let n = null, r = null;
-  const o = [];
-  return he.forEach(t, (i) => {
+  const i = [];
+  return he.forEach(t, (o) => {
     var s;
-    if (!me(i)) {
-      i != null && o.push(i);
+    if (!me(o)) {
+      o != null && i.push(o);
       return;
     }
-    const a = (s = i.type) == null ? void 0 : s.displayName;
+    const a = (s = o.type) == null ? void 0 : s.displayName;
     if (a === U.displayName) {
-      n = i.props.children;
+      n = o.props.children;
       return;
     }
     if (a === N.displayName) {
-      r = i.props.children;
+      r = o.props.children;
       return;
     }
-    o.push(i);
-  }), !r && o.length > 0 && (r = o), {
+    i.push(o);
+  }), !r && i.length > 0 && (r = i), {
     sceneContent: n,
     overlayContent: r
   };
@@ -978,13 +992,13 @@ const rt = Ue(({
   fitMode: t = "auto",
   imageOptions: n = [],
   initialImageId: r,
-  initialMirrored: o = !0,
-  initialSource: i = "webcam",
+  initialMirrored: i = !0,
+  initialSource: o = "webcam",
   initialVideoId: a,
   mediaStrategy: s = "internal",
   mediaDock: l = "bottom-left",
-  mode: c = "dom",
-  previewMode: d = "finalColor",
+  mode: d = "dom",
+  previewMode: c = "finalColor",
   renderOutputs: h = {},
   showMediaControlsByDefault: b = !0,
   source: f,
@@ -995,19 +1009,19 @@ const rt = Ue(({
     fitMode: t,
     imageOptions: n,
     initialImageId: r,
-    initialMirrored: o,
-    initialSource: i,
+    initialMirrored: i,
+    initialSource: o,
     initialVideoId: a,
     mediaStrategy: s,
-    previewMode: d,
+    previewMode: c,
     renderOutputs: h,
     showMediaControlsByDefault: b,
     source: f,
     videoOptions: p
-  }), y = typeof e == "function" ? e(m.renderState) : e, { sceneContent: F, overlayContent: R } = qe(c, y), v = Z(
-    F,
+  }), S = typeof e == "function" ? e(m.renderState) : e, { sceneContent: M, overlayContent: R } = qe(d, S), v = Z(
+    M,
     m.renderState
-  ), I = Z(
+  ), E = Z(
     R,
     m.renderState
   );
@@ -1022,8 +1036,8 @@ const rt = Ue(({
       managesOwnMedia: m.managesOwnMedia,
       mediaDock: l,
       mirrored: m.displayMirrored,
-      mode: c,
-      overlayContent: I,
+      mode: d,
+      overlayContent: E,
       renderOutputs: h,
       sceneContent: v,
       selectedImageId: m.selectedImageId,
@@ -1056,7 +1070,7 @@ const rt = Ue(({
   label: t = "face bounding box",
   color: n = "#22c55e",
   style: r,
-  labelStyle: o
+  labelStyle: i
 }) => /* @__PURE__ */ g(
   "div",
   {
@@ -1072,29 +1086,29 @@ const rt = Ue(({
       zIndex: 20,
       ...r
     },
-    children: t !== null && /* @__PURE__ */ g("div", { style: { ...Ne, ...o }, children: t })
+    children: t !== null && /* @__PURE__ */ g("div", { style: { ...Ne, ...i }, children: t })
   }
 ), ot = (e) => {
-  const [t, n] = S(null);
-  return M(() => {
+  const [t, n] = C(null);
+  return z(() => {
     let r = 0;
-    const o = () => {
-      var l, c;
-      r = requestAnimationFrame(o);
-      const i = (c = (l = e == null ? void 0 : e.detectionResults) == null ? void 0 : l.faceLandmarks) == null ? void 0 : c[0];
-      if (!i || i.length === 0) {
+    const i = () => {
+      var l, d;
+      r = requestAnimationFrame(i);
+      const o = (d = (l = e == null ? void 0 : e.detectionResults) == null ? void 0 : l.faceLandmarks) == null ? void 0 : d[0];
+      if (!o || o.length === 0) {
         n(null);
         return;
       }
-      const a = fe(i), s = {
+      const a = fe(o), s = {
         left: a.minX,
         top: a.minY,
         width: a.width,
         height: a.height
       };
-      n((d) => d && d.left === s.left && d.top === s.top && d.width === s.width && d.height === s.height ? d : s);
+      n((c) => c && c.left === s.left && c.top === s.top && c.width === s.width && c.height === s.height ? c : s);
     };
-    return o(), () => {
+    return i(), () => {
       cancelAnimationFrame(r);
     };
   }, [e]), t;
@@ -1131,12 +1145,12 @@ const rt = Ue(({
 export {
   zt as BasicAnimatedTextureController,
   nt as BoundingBoxOverlay,
-  dt as HeadTracker,
+  ct as HeadTracker,
   Xt as MAX_GIF_BYTES,
   kt as MAX_GIF_FRAMES,
   At as MAX_GIF_PIXELS,
   at as PerspectiveCamera,
-  Ct as ScreenRectAspectContext,
+  yt as ScreenRectAspectContext,
   st as TEXTURE_FITS,
   Lt as TextureSourceLoadError,
   it as XRCompositor,
@@ -1150,14 +1164,14 @@ export {
   Dt as createTextureSourceResolver,
   Bt as disposeResolvedTextureSource,
   vt as getFaceInfo,
-  Wt as getPlaybackFrame,
-  _t as getSequenceFrame,
-  St as getThreeBlending,
+  _t as getPlaybackFrame,
+  Wt as getSequenceFrame,
+  Ct as getThreeBlending,
   Rt as getThreeDepthFunction,
   It as getThreeSide,
   Ht as gifTextureSourceProvider,
-  Ft as hasFullUnitUVBounds,
-  Me as resolveCalibrationFaceDisplayMirrored,
+  Mt as hasFullUnitUVBounds,
+  Te as resolveCalibrationFaceDisplayMirrored,
   Pt as resolveTextureSource,
   $t as throwIfAborted,
   Xe as useCalibrationFaceTracker,
@@ -1165,10 +1179,10 @@ export {
   Et as useScreenSpace,
   ut as useTrackerContext,
   mt as useXRCameraTexture,
-  se as useXRContext,
+  O as useXRContext,
   ft as useXRError,
   le as useXRModel,
-  ce as useXRModelNode,
+  de as useXRModelNode,
   pt as useXRPipelineSnapshot,
   gt as useXRReady,
   bt as useXRRenderSize,