@vincentt-xr/sdk 2.0.0-alpha.2 → 2.0.0-alpha.3

package/dist/low-level.js

@@ -1,26 +1,23 @@
-var ce = Object.defineProperty;
-var de = (e, t, r) => t in e ? ce(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
-var X = (e, t, r) => de(e, typeof t != "symbol" ? t + "" : t, r);
-import { u as ue, X as te } from "./index-JygePOwo.js";
-import { u as he } from "./index-BgQAX8rs.js";
-import { H as Ct, a as St } from "./index-BgQAX8rs.js";
-import { c as pe } from "./selectors-Dw3C-gSk.js";
-import { b as Et, a as It, e as Mt, u as Tt, d as Ft } from "./selectors-Dw3C-gSk.js";
-import { useEffect as F, useState as S, useRef as L, useCallback as fe, useLayoutEffect as me, useMemo as q, Children as ge, isValidElement as be } from "react";
-import { c as we } from "./getFaceInfo-hUKMLFcr.js";
-import { d as Lt, e as zt } from "./getFaceInfo-hUKMLFcr.js";
-import { jsx as g, jsxs as z, Fragment as P } from "react/jsx-runtime";
-import { PerspectiveCamera as xe } from "@react-three/drei";
-import { S as Dt, g as Vt, c as At, d as Bt, u as Wt } from "./index-CTHeBQOs.js";
-import { u as re } from "./useFaceResults-CkFc1egZ.js";
-import { h as Ht } from "./hasFullUnitUVBounds-BGvcFsQM.js";
-import { X as ve, a as ye, b as Ce } from "./contexts-Bk5zz_VR.js";
-import { c as $t, d as qt, u as Nt } from "./contexts-Bk5zz_VR.js";
-import * as V from "three";
-const W = ({
+import { u as se, X as O } from "./index-JygePOwo.js";
+import { u as le } from "./index-YMUaJU7U.js";
+import { H as dt, a as ut } from "./index-YMUaJU7U.js";
+import { c as ce } from "./selectors-twqYByYZ.js";
+import { u as mt, b as ft, e as pt, a as gt, d as bt } from "./selectors-twqYByYZ.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-Cjcgcc4w.js";
+import { d as xt, e as vt } from "./getFaceInfo-Cjcgcc4w.js";
+import { jsx as g, jsxs as k, Fragment as W } 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-N7C6fNah.js";
+import { u as ee } from "./useFaceResults-CBmhT5E8.js";
+import { h as Ft } from "./hasFullUnitUVBounds-BGvcFsQM.js";
+import { X as ge, a as be, b as we } from "./contexts-D5TQcwmv.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-D5TQcwmv.js";
+import * as L from "three";
+const B = ({
   children: e,
   config: t,
-  style: r
+  style: n
 }) => /* @__PURE__ */ g(
   "div",
   {
@@ -33,57 +30,57 @@ const W = ({
       pointerEvents: t.pointerEvents ?? "none",
       zIndex: t.zIndex,
       opacity: t.hidden ? 0 : 1,
-      ...r
+      ...n
     },
     children: e
   }
-), N = ({
+), q = ({
   canvas: e,
   layout: t,
-  media: r,
-  mirrored: n,
+  media: n,
+  mirrored: r,
   filter: o
 }) => {
   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 s = e.getContext("2d");
-  s && (s.setTransform(1, 0, 0, 1, 0, 0), s.clearRect(0, 0, i, a), n && (s.translate(i, 0), s.scale(-1, 1)), o && (s.filter = o), s.drawImage(r, t.offsetX, t.offsetY, t.drawWidth, t.drawHeight), o && (s.filter = "none"), s.setTransform(1, 0, 0, 1, 0, 0));
-}, ne = ({
+  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 = ({
   canvasRef: e,
   enabled: t = !0,
-  fps: r = 30,
-  imageRef: n,
+  fps: n = 30,
+  imageRef: r,
   layout: o,
   mirrored: i,
   sourceKind: a,
   videoRef: s
 }) => {
-  F(() => {
+  M(() => {
     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 = r > 0 ? 1e3 / r : 0, h = (b) => {
+    const d = n > 0 ? 1e3 / n : 0, h = (b) => {
       if (l = requestAnimationFrame(h), d > 0 && b - c < d) return;
       c = b;
       const f = e.current;
       if (!f || !o) return;
       if (a === "image") {
-        const m = n.current;
-        if (!m || !m.complete || m.naturalWidth <= 0 || m.naturalHeight <= 0)
+        const p = r.current;
+        if (!p || !p.complete || p.naturalWidth <= 0 || p.naturalHeight <= 0)
           return;
-        N({
+        q({
           canvas: f,
           layout: o,
-          media: m,
+          media: p,
           mirrored: i
         });
         return;
       }
       const w = s.current;
-      !w || w.readyState < 2 || w.videoWidth <= 0 || w.videoHeight <= 0 || N({
+      !w || w.readyState < 2 || w.videoWidth <= 0 || w.videoHeight <= 0 || q({
         canvas: f,
         layout: o,
         media: w,
@@ -93,23 +90,23 @@ const W = ({
     return l = requestAnimationFrame(h), () => {
       cancelAnimationFrame(l);
     };
-  }, [e, t, r, n, o, i, a, s]);
-}, Se = ({
+  }, [e, t, n, r, o, i, a, s]);
+}, xe = ({
   canvasRef: e,
   imageRef: t,
-  layer: r,
-  layout: n,
+  layer: n,
+  layout: r,
   mirrored: o,
   sourceKind: i,
   videoRef: a
-}) => (ne({
+}) => (te({
   canvasRef: e,
   imageRef: t,
-  layout: n,
+  layout: r,
   mirrored: o,
   sourceKind: i,
   videoRef: a
-}), /* @__PURE__ */ g(W, { config: r, children: /* @__PURE__ */ g(
+}), /* @__PURE__ */ g(B, { config: n, children: /* @__PURE__ */ g(
   "canvas",
   {
     ref: e,
@@ -122,11 +119,11 @@ const W = ({
       background: "#000"
     }
   }
-) })), lt = ({
+) })), tt = ({
   canvasRef: e,
   controlInsetTop: t,
-  debugVisible: r,
-  fps: n = 15,
+  debugVisible: n,
+  fps: r = 15,
   imageRef: o,
   layer: i,
   layout: a,
@@ -135,10 +132,10 @@ const W = ({
   videoRef: c,
   viewportSize: d
 }) => {
-  ne({
+  te({
     canvasRef: e,
-    enabled: r,
-    fps: n,
+    enabled: n,
+    fps: r,
     imageRef: o,
     layout: a,
     mirrored: s,
@@ -146,7 +143,7 @@ const W = ({
     videoRef: c
   });
   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(W, { config: i, children: /* @__PURE__ */ g(
+  return /* @__PURE__ */ g(B, { config: i, children: /* @__PURE__ */ g(
     "canvas",
     {
       ref: e,
@@ -154,52 +151,52 @@ const W = ({
         position: "absolute",
         left: 16,
         top: f,
-        width: r ? h : 1,
-        height: r ? "auto" : 1,
+        width: n ? h : 1,
+        height: n ? "auto" : 1,
         aspectRatio: `${b}`,
-        opacity: r ? 0.85 : 0,
+        opacity: n ? 0.85 : 0,
         borderRadius: 10,
-        border: r ? "1px solid rgba(255,255,255,0.16)" : "none",
+        border: n ? "1px solid rgba(255,255,255,0.16)" : "none",
         pointerEvents: "none",
         objectFit: "contain",
         background: "#000"
       }
     }
   ) });
-}, Re = {
+}, ve = {
   audio: !1,
   video: {
     facingMode: "user",
     frameRate: { ideal: 30, max: 60 }
   }
-}, Ee = {
+}, ye = {
   name: "viewport-live",
   clearColor: "#000000",
   pointerEvents: "none",
   zIndex: 0
-}, Ie = {
+}, Ce = {
   name: "viewport-ui",
   clearColor: "transparent",
   pointerEvents: "auto",
   zIndex: 5
-}, Me = {
+}, Se = {
   name: "viewport-scene",
   clearColor: "transparent",
   pointerEvents: "auto",
   zIndex: 1
-}, D = {
+}, A = {
   webcam: { icon: "◉", label: "Webcam" },
   image: { icon: "▣", label: "Images" },
   video: { icon: "▶", label: "Videos" }
-}, Te = ({
+}, Re = ({
   imageRef: e,
   selectedSource: t,
-  videoRef: r
-}) => /* @__PURE__ */ z(P, { children: [
+  videoRef: n
+}) => /* @__PURE__ */ k(W, { children: [
   /* @__PURE__ */ g(
     "video",
     {
-      ref: r,
+      ref: n,
       style: {
         position: "absolute",
         width: 1,
@@ -223,11 +220,11 @@ const W = ({
       }
     }
   )
-] }), J = ({
+] }), Y = ({
   dock: e,
   label: t,
-  onChange: r,
-  options: n,
+  onChange: n,
+  options: r,
   value: o
 }) => /* @__PURE__ */ g(
   "div",
@@ -246,7 +243,7 @@ const W = ({
       boxShadow: "0 12px 30px rgba(0,0,0,0.18)",
       backdropFilter: "blur(10px)"
     },
-    children: /* @__PURE__ */ z(
+    children: /* @__PURE__ */ k(
       "label",
       {
         style: {
@@ -262,7 +259,7 @@ const W = ({
             "select",
             {
               value: o,
-              onChange: (i) => r(i.target.value),
+              onChange: (i) => n(i.target.value),
               style: {
                 minWidth: 180,
                 maxWidth: "calc(100vw - 52px)",
@@ -273,18 +270,18 @@ const W = ({
                 color: "#e5eefb",
                 padding: "0 10px"
               },
-              children: n.map((i) => /* @__PURE__ */ g("option", { value: i.id, style: { color: "#111827" }, children: i.label }, i.id))
+              children: r.map((i) => /* @__PURE__ */ g("option", { value: i.id, style: { color: "#111827" }, children: i.label }, i.id))
             }
           )
         ]
       }
     )
   }
-), Fe = ({
+), Ie = ({
   dock: e,
   imageOptions: t,
-  selectedImageId: r,
-  selectedSource: n,
+  selectedImageId: n,
+  selectedSource: r,
   selectedVideoId: o,
   setSelectedImageId: i,
   setSelectedSource: a,
@@ -318,8 +315,8 @@ const W = ({
       },
       children: "≡"
     }
-  ) : /* @__PURE__ */ z(P, { children: [
-    /* @__PURE__ */ z(
+  ) : /* @__PURE__ */ k(W, { children: [
+    /* @__PURE__ */ k(
       "div",
       {
         style: {
@@ -350,14 +347,14 @@ const W = ({
                 overflowX: "auto"
               },
               children: b.map((f) => {
-                const w = f === n;
-                return /* @__PURE__ */ z(
+                const w = f === r;
+                return /* @__PURE__ */ k(
                   "button",
                   {
                     type: "button",
                     onClick: () => a(f),
                     "aria-pressed": w,
-                    title: D[f].label,
+                    title: A[f].label,
                     style: {
                       border: "none",
                       borderRadius: 999,
@@ -374,8 +371,8 @@ const W = ({
                       flex: "0 0 auto"
                     },
                     children: [
-                      /* @__PURE__ */ g("span", { style: { fontSize: 14, lineHeight: 1 }, children: D[f].icon }),
-                      /* @__PURE__ */ g("span", { style: { fontSize: 12, fontWeight: 700, letterSpacing: "0.01em" }, children: D[f].label })
+                      /* @__PURE__ */ g("span", { style: { fontSize: 14, lineHeight: 1 }, children: A[f].icon }),
+                      /* @__PURE__ */ g("span", { style: { fontSize: 12, fontWeight: 700, letterSpacing: "0.01em" }, children: A[f].label })
                     ]
                   },
                   f
@@ -408,18 +405,18 @@ const W = ({
         ]
       }
     ),
-    n === "image" && t.length > 0 && /* @__PURE__ */ g(
-      J,
+    r === "image" && t.length > 0 && /* @__PURE__ */ g(
+      Y,
       {
         dock: e,
         label: "Image Asset",
         options: t,
-        value: r,
+        value: n,
         onChange: i
       }
     ),
-    n === "video" && c.length > 0 && /* @__PURE__ */ g(
-      J,
+    r === "video" && c.length > 0 && /* @__PURE__ */ g(
+      Y,
       {
         dock: e,
         label: "Video Asset",
@@ -429,11 +426,11 @@ const W = ({
       }
     )
   ] }) : null;
-}, ke = ({
+}, Ee = ({
   containerRef: e,
   displayCanvasRef: t,
-  imageOptions: r,
-  imageRef: n,
+  imageOptions: n,
+  imageRef: r,
   layout: o,
   managesOwnMedia: i,
   mediaDock: a,
@@ -445,16 +442,16 @@ const W = ({
   selectedSource: b,
   selectedVideoId: f,
   setSceneRenderOutputs: w,
-  setSelectedImageId: m,
-  setSelectedSource: p,
+  setSelectedImageId: p,
+  setSelectedSource: m,
   setSelectedVideoId: y,
-  showMediaControls: T,
+  showMediaControls: F,
   style: R,
   videoOptions: v,
-  videoRef: E,
+  videoRef: I,
   viewportSize: x,
   mirrored: u
-}) => /* @__PURE__ */ z(
+}) => /* @__PURE__ */ k(
   "div",
   {
     ref: e,
@@ -466,21 +463,21 @@ const W = ({
       ...R
     },
     children: [
-      /* @__PURE__ */ g(Te, { imageRef: n, selectedSource: b, videoRef: E }),
+      /* @__PURE__ */ g(Re, { imageRef: r, selectedSource: b, videoRef: I }),
       s === "dom" && i && /* @__PURE__ */ g(
-        Se,
+        xe,
         {
           canvasRef: t,
-          imageRef: n,
-          videoRef: E,
-          layer: Ee,
+          imageRef: r,
+          videoRef: I,
+          layer: ye,
           layout: o,
           mirrored: u,
           sourceKind: b === "image" ? "image" : "video"
         }
       ),
-      (s === "r3f" || s === "hybrid") && /* @__PURE__ */ g(W, { config: Me, children: /* @__PURE__ */ g(
-        ve,
+      (s === "r3f" || s === "hybrid") && /* @__PURE__ */ g(B, { config: Se, children: /* @__PURE__ */ g(
+        ge,
         {
           onRenderOutputs: w,
           renderOutputs: {
@@ -492,19 +489,19 @@ const W = ({
           children: d
         }
       ) }),
-      /* @__PURE__ */ z(W, { config: Ie, children: [
+      /* @__PURE__ */ k(B, { config: Ce, children: [
         i && /* @__PURE__ */ g(
-          Fe,
+          Ie,
           {
             dock: a,
-            imageOptions: r,
+            imageOptions: n,
             selectedImageId: h,
             selectedSource: b,
             selectedVideoId: f,
-            setSelectedImageId: m,
-            setSelectedSource: p,
+            setSelectedImageId: p,
+            setSelectedSource: m,
             setSelectedVideoId: y,
-            showMediaControls: T,
+            showMediaControls: F,
             videoOptions: v
           }
         ),
@@ -512,46 +509,46 @@ const W = ({
       ] })
     ]
   }
-), Le = 5, ze = 1, Xe = (e, t) => t, De = "brightness(2.2) contrast(1.5) saturate(1.25)", Ve = ({
+), Te = 5, Fe = 1, Me = (e, t) => t, ze = "brightness(2.2) contrast(1.5) saturate(1.25)", Xe = ({
   enabled: e,
   displayMirrored: t,
-  imageRef: r,
-  layout: n,
+  imageRef: n,
+  layout: r,
   mode: o,
   numFaces: i,
   selectedSource: a,
   sourceStream: s,
   videoRef: l
 }) => {
-  const { session: c } = ue(), d = L(null), h = L(!1), b = L(document.createElement("canvas")), {
+  const { session: c } = se(), d = X(null), h = X(!1), b = X(document.createElement("canvas")), {
     ready: f,
     node: w,
-    error: m
-  } = he(te.FACE_TRACKER, {
-    numFaces: i ?? (o === "head-binding" ? ze : Le)
-  }), [p, y] = S("idle"), [T, R] = S(null), v = e && f && !!w, E = re({
+    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({
     node: v ? w : null,
     enabled: v,
     selectedSource: a,
-    onFrame: fe(() => {
+    onFrame: de(() => {
       R(null), y("ready");
     }, [])
   });
-  return F(() => {
-    if (!e || !n) return;
+  return M(() => {
+    if (!e || !r) return;
     const x = () => {
-      const C = a === "image" ? r.current : l.current;
+      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)
           return;
-        N({
+        q({
           canvas: b.current,
-          layout: n,
+          layout: r,
           media: C,
           mirrored: t,
-          filter: a === "webcam" ? De : void 0
+          filter: a === "webcam" ? ze : void 0
         });
       }
     };
@@ -560,22 +557,22 @@ const W = ({
       return;
     }
     let u = 0;
-    const I = () => {
-      u = requestAnimationFrame(I), x();
+    const E = () => {
+      u = requestAnimationFrame(E), x();
     };
-    return u = requestAnimationFrame(I), () => cancelAnimationFrame(u);
-  }, [t, e, r, n, a, l]), F(() => {
-    var A;
+    return u = requestAnimationFrame(E), () => cancelAnimationFrame(u);
+  }, [t, e, n, r, a, l]), M(() => {
+    var V;
     if (!e) {
       y("idle"), R(null), h.current = !1, d.current = null;
       return;
     }
-    if (!n) {
+    if (!r) {
       y("initializing");
       return;
     }
-    const x = (s == null ? void 0 : s.id) ?? (((A = l.current) == null ? void 0 : A.srcObject) instanceof MediaStream ? l.current.srcObject.id : "none"), I = a === "webcam" ? `webcam:${x}` : a;
-    d.current !== I && (h.current = !1, d.current = I);
+    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;
     return (async () => {
       try {
@@ -584,44 +581,44 @@ const W = ({
           sourceKind: a
         }), await c.start(), h.current = !0), C) return;
         R(null), y("initializing");
-      } catch (k) {
+      } catch (z) {
         if (C) return;
-        y("error"), R(k instanceof Error ? k.message : "Failed to initialize SDK face tracking");
+        y("error"), R(z instanceof Error ? z.message : "Failed to initialize SDK face tracking");
       }
     })(), () => {
       C = !0;
     };
-  }, [e, n, a, c, s, l]), F(() => {
-    !v && e && !m && y("initializing");
-  }, [v, e, m]), F(() => {
-    m && (y("error"), R(m.message));
-  }, [m]), F(() => () => {
+  }, [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]), {
     activeDelegate: "GPU",
-    faces: E,
-    status: p,
-    error: T
+    faces: I,
+    status: m,
+    error: F
   };
-}, Ae = (e, t) => e === "auto" ? t === "webcam" ? "cover" : "contain" : e, Be = ({
+}, ke = (e, t) => e === "auto" ? t === "webcam" ? "cover" : "contain" : e, Ae = ({
   imageOptions: e,
   initialImageId: t,
-  initialSource: r,
-  initialVideoId: n,
+  initialSource: n,
+  initialVideoId: r,
   source: o,
   videoOptions: i
 }) => {
   var l, c, d, h;
-  const a = (o == null ? void 0 : o.kind) ?? r ?? "webcam";
+  const a = (o == null ? void 0 : o.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) ?? "" : n ?? ((h = i[0]) == null ? void 0 : h.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) ?? ""
   };
-}, We = (e, t, r) => {
+}, Le = (e, t, n) => {
   if (e.width <= 0 || e.height <= 0 || t.width <= 0 || t.height <= 0)
     return null;
-  const n = r === "contain" ? Math.min(t.width / e.width, t.height / e.height) : Math.max(t.width / e.width, t.height / e.height), o = e.width * n, i = e.height * n;
+  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;
   return {
     source: e,
     destination: t,
@@ -629,24 +626,24 @@ const W = ({
     drawHeight: i,
     offsetX: (t.width - o) * 0.5,
     offsetY: (t.height - i) * 0.5,
-    scale: n
+    scale: r
   };
-}, Pe = (e) => {
+}, Ve = (e) => {
   if (!e) return { width: 0, height: 0 };
   const t = e.getBoundingClientRect();
   return {
     width: t.width || e.clientWidth,
     height: t.height || e.clientHeight
   };
-}, He = (e) => {
-  const [t, r] = S({ width: 0, height: 0 });
-  return me(() => {
-    const n = e.current;
-    if (!n) return;
+}, De = (e) => {
+  const [t, n] = S({ width: 0, height: 0 });
+  return ue(() => {
+    const r = e.current;
+    if (!r) return;
     let o = 0;
     const i = () => {
-      const c = Pe(n);
-      r(
+      const c = Ve(r);
+      n(
         (d) => d.width === c.width && d.height === c.height ? d : c
       );
     }, a = () => {
@@ -654,84 +651,84 @@ const W = ({
     };
     a();
     const s = new ResizeObserver(a);
-    s.observe(n);
+    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);
     };
   }, [e]), t;
-}, _e = ({
+}, Be = ({
   enabled: e,
   selectedSource: t
 }) => {
-  const r = pe(te.FACE_TRACKER);
+  const n = ce(O.FACE_TRACKER);
   return {
-    faces: re({ node: r, enabled: e, selectedSource: t }),
-    trackerStatus: r ? "ready" : "idle"
+    faces: ee({ node: n, enabled: e, selectedSource: t }),
+    trackerStatus: n ? "ready" : "idle"
   };
-}, O = (e) => {
+}, J = (e) => {
   e && (e.pause(), e.removeAttribute("src"), e.srcObject = null, e.load());
 }, Q = (e) => {
   e && e.removeAttribute("src");
-}, $e = ({
+}, We = ({
   enabled: e,
   imageAsset: t,
-  selectedSource: r,
-  videoAsset: n
+  selectedSource: n,
+  videoAsset: r
 }) => {
-  const o = L(null), i = L(null), [a, s] = S(null), [l, c] = S({ width: 0, height: 0 }), [d, h] = S("idle"), [b, f] = S(null);
-  return F(() => {
+  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(() => {
     if (!e) {
-      O(o.current), Q(i.current), s(null), c({ width: 0, height: 0 }), h("idle"), f(null);
+      J(o.current), Q(i.current), s(null), c({ width: 0, height: 0 }), h("idle"), f(null);
       return;
     }
-    let w = !1, m = null;
-    const p = (x, u) => {
+    let w = !1, p = null;
+    const m = (x, u) => {
       w || (c({ width: x, height: u }), h("ready"), f(null));
     }, y = () => {
-      O(o.current), Q(i.current), m == null || m.getTracks().forEach((x) => x.stop()), m = null, s(null);
-    }, T = async () => {
+      J(o.current), Q(i.current), p == null || p.getTracks().forEach((x) => x.stop()), p = null, s(null);
+    }, F = async () => {
       h("requesting");
-      const x = await navigator.mediaDevices.getUserMedia(Re);
+      const x = await navigator.mediaDevices.getUserMedia(ve);
       if (w) {
-        x.getTracks().forEach((I) => I.stop());
+        x.getTracks().forEach((E) => E.stop());
         return;
       }
-      m = x, s(x);
+      p = x, s(x);
       const u = o.current;
-      u && (u.srcObject = x, u.muted = !0, u.playsInline = !0, u.autoplay = !0, await u.play(), p(u.videoWidth, u.videoHeight));
+      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;
-      u && (u.src = x, u.muted = !0, u.loop = !0, u.playsInline = !0, u.autoplay = !0, u.crossOrigin = "anonymous", await u.play(), p(u.videoWidth, u.videoHeight));
+      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((I, C) => {
-        u.onload = () => I(), u.onerror = () => C(new Error("Unable to load image")), u.src = x;
-      }), p(u.naturalWidth, u.naturalHeight));
+      u && (await new Promise((E, C) => {
+        u.onload = () => E(), u.onerror = () => C(new Error("Unable to load image")), u.src = x;
+      }), m(u.naturalWidth, u.naturalHeight));
     };
     return y(), (async () => {
       try {
-        if (r === "webcam") {
-          await T();
+        if (n === "webcam") {
+          await F();
           return;
         }
-        if (r === "video") {
-          if (!(n != null && n.src)) throw new Error("Missing video source");
-          await R(n.src);
+        if (n === "video") {
+          if (!(r != null && r.src)) throw new Error("Missing video source");
+          await R(r.src);
           return;
         }
         if (!(t != null && t.src)) throw new Error("Missing image source");
         await v(t.src);
       } catch (x) {
         if (w) return;
-        h("error"), f(x instanceof Error ? x.message : `Unable to initialize ${r}`);
+        h("error"), f(x instanceof Error ? x.message : `Unable to initialize ${n}`);
       }
     })(), () => {
       w = !0, y();
     };
-  }, [e, t, r, n]), {
+  }, [e, t, n, r]), {
     videoRef: o,
     imageRef: i,
     stream: a,
@@ -739,31 +736,31 @@ const W = ({
     status: d,
     error: b
   };
-}, qe = ({
+}, _e = ({
   enabled: e,
   imageRef: t,
-  selectedSource: r,
-  status: n,
+  selectedSource: n,
+  status: r,
   videoRef: o
 }) => {
   const [i, a] = S(null);
-  return F(() => {
-    if (!e || n !== "ready") {
+  return M(() => {
+    if (!e || r !== "ready") {
       a((c) => (c == null || c.dispose(), null));
       return;
     }
-    const s = r === "image" ? t.current : o.current;
+    const s = n === "image" ? t.current : o.current;
     if (!s) return;
-    const l = r === "image" ? new V.Texture(s) : new V.VideoTexture(s);
-    return l.colorSpace = V.SRGBColorSpace, l.minFilter = V.LinearFilter, l.magFilter = V.LinearFilter, l.generateMipmaps = !1, l.needsUpdate = !0, a((c) => (c == null || c.dispose(), l)), () => {
+    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)), () => {
       l.dispose();
     };
-  }, [e, t, r, n, o]), i;
-}, Ne = ({
+  }, [e, t, n, r, o]), i;
+}, He = ({
   externalTracker: e,
   imageOptions: t,
-  layout: r,
-  managesOwnMedia: n,
+  layout: n,
+  managesOwnMedia: r,
   mediaError: o,
   mediaFitMode: i,
   mediaSize: a,
@@ -775,21 +772,21 @@ const W = ({
   selectedVideo: b,
   selectedVideoId: f,
   setMirrored: w,
-  setSelectedImageId: m,
-  setSelectedSource: p,
+  setSelectedImageId: p,
+  setSelectedSource: m,
   setSelectedVideoId: y,
-  setShowMediaControls: T,
+  setShowMediaControls: F,
   showMediaControls: R,
   tracker: v,
-  videoOptions: E,
+  videoOptions: I,
   viewportSize: x
 }) => {
-  const u = h === "image" ? `${D.image.label}: ${(c == null ? void 0 : c.label) ?? ""}` : h === "video" ? `${D.video.label}: ${(b == null ? void 0 : b.label) ?? ""}` : D.webcam.label;
+  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;
   return {
-    activeDelegate: n ? v.activeDelegate : null,
-    faces: n ? v.faces : e.faces,
+    activeDelegate: r ? v.activeDelegate : null,
+    faces: r ? v.faces : e.faces,
     imageOptions: t,
-    layout: r,
+    layout: n,
     mediaError: o,
     mediaFitMode: i,
     mediaLabel: u,
@@ -799,45 +796,45 @@ const W = ({
     selectedSource: h,
     selectedVideoId: f,
     setMirrored: w,
-    setSelectedImageId: m,
-    setSelectedSource: p,
+    setSelectedImageId: p,
+    setSelectedSource: m,
     setSelectedVideoId: y,
-    setShowMediaControls: T,
+    setShowMediaControls: F,
     showMediaControls: R,
-    trackerError: n ? v.error : null,
-    trackerStatus: n ? v.status : e.trackerStatus,
-    videoOptions: E,
+    trackerError: r ? v.error : null,
+    trackerStatus: r ? v.status : e.trackerStatus,
+    videoOptions: I,
     viewportSize: x,
     mediaSize: a
   };
-}, Ue = ({
+}, Pe = ({
   mediaTexture: e,
   previewMode: t,
-  renderOutputs: r,
-  sceneRenderOutputs: n
-}) => q(
+  renderOutputs: n,
+  sceneRenderOutputs: r
+}) => $(
   () => ({
-    requested: r,
+    requested: n,
     previewMode: t,
     mediaColorTexture: e,
-    sceneColorTexture: n.sceneColorTexture,
-    finalColorTexture: r.finalColor ? n.sceneColorTexture : null,
-    sceneDepthTexture: n.sceneDepthTexture,
+    sceneColorTexture: r.sceneColorTexture,
+    finalColorTexture: n.finalColor ? r.sceneColorTexture : null,
+    sceneDepthTexture: r.sceneDepthTexture,
     estimatedDepthTexture: null,
     available: {
       mediaColor: e !== null,
-      sceneColor: n.sceneColorTexture !== null,
-      finalColor: !!(r.finalColor && n.sceneColorTexture),
-      sceneDepth: n.sceneDepthTexture !== null,
+      sceneColor: r.sceneColorTexture !== null,
+      finalColor: !!(n.finalColor && r.sceneColorTexture),
+      sceneDepth: r.sceneDepthTexture !== null,
       estimatedDepth: !1
     }
   }),
-  [e, t, r, n]
-), je = ({
+  [e, t, n, r]
+), $e = ({
   fitMode: e,
   imageOptions: t,
-  initialImageId: r,
-  initialMirrored: n,
+  initialImageId: n,
+  initialMirrored: r,
   initialSource: o,
   initialVideoId: i,
   mediaStrategy: a,
@@ -847,140 +844,140 @@ const W = ({
   source: d,
   videoOptions: h
 }) => {
-  const b = L(null), f = L(null), w = He(b), m = q(
-    () => Be({
+  const b = X(null), f = X(null), w = De(b), p = $(
+    () => Ae({
       imageOptions: t,
-      initialImageId: r,
+      initialImageId: n,
       initialSource: o,
       initialVideoId: i,
       source: d,
       videoOptions: h
     }),
-    [t, r, o, i, d, h]
-  ), [p, y] = S(n), [T, R] = S(c), [v, E] = S(
-    m.selectedSource
-  ), [x, u] = S(m.selectedImageId), [I, C] = S(m.selectedVideoId), [K, A] = S({
+    [t, n, o, i, d, h]
+  ), [m, y] = S(r), [F, R] = S(c), [v, I] = S(
+    p.selectedSource
+  ), [x, u] = S(p.selectedImageId), [E, C] = S(p.selectedVideoId), [j, V] = S({
     sceneColorTexture: null,
     sceneDepthTexture: null
-  }), k = a === "internal";
-  F(() => {
-    d && (E(m.selectedSource), u(m.selectedImageId), C(m.selectedVideoId));
-  }, [m, d]);
-  const G = t.find(($) => $.id === x) ?? t[0], Y = h.find(($) => $.id === I) ?? h[0], M = $e({
-    enabled: k,
-    imageAsset: G,
+  }), 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,
+    imageAsset: K,
     selectedSource: v,
-    videoAsset: Y
-  }), H = Ae(e, v), B = q(
-    () => We(M.mediaSize, w, H),
-    [M.mediaSize, H, w]
-  ), oe = qe({
+    videoAsset: G
+  }), _ = ke(e, v), D = $(
+    () => Le(T.mediaSize, w, _),
+    [T.mediaSize, _, w]
+  ), re = _e({
     enabled: !!(l.mediaColor || l.finalColor),
-    imageRef: M.imageRef,
+    imageRef: T.imageRef,
     selectedSource: v,
-    status: M.status,
-    videoRef: M.videoRef
-  }), _ = Xe(v, p), ie = Ve({
-    displayMirrored: _,
-    enabled: k && M.status === "ready" && B !== null,
-    imageRef: M.imageRef,
-    layout: B,
+    status: T.status,
+    videoRef: T.videoRef
+  }), H = Me(v, m), ne = Xe({
+    displayMirrored: H,
+    enabled: z && T.status === "ready" && D !== null,
+    imageRef: T.imageRef,
+    layout: D,
     selectedSource: v,
-    sourceStream: M.stream,
-    videoRef: M.videoRef
-  }), ae = _e({
-    enabled: !k,
+    sourceStream: T.stream,
+    videoRef: T.videoRef
+  }), oe = Be({
+    enabled: !z,
     selectedSource: v
-  }), se = Ne({
-    externalTracker: ae,
+  }), ie = He({
+    externalTracker: oe,
     imageOptions: t,
-    layout: B,
-    managesOwnMedia: k,
-    mediaError: M.error,
-    mediaFitMode: H,
-    mediaSize: M.mediaSize,
-    mediaStatus: M.status,
-    mirrored: _,
-    selectedImage: G,
+    layout: D,
+    managesOwnMedia: z,
+    mediaError: T.error,
+    mediaFitMode: _,
+    mediaSize: T.mediaSize,
+    mediaStatus: T.status,
+    mirrored: H,
+    selectedImage: K,
     selectedImageId: x,
     selectedSource: v,
-    selectedVideo: Y,
-    selectedVideoId: I,
+    selectedVideo: G,
+    selectedVideoId: E,
     setMirrored: y,
     setSelectedImageId: u,
-    setSelectedSource: E,
+    setSelectedSource: I,
     setSelectedVideoId: C,
     setShowMediaControls: R,
-    showMediaControls: T,
-    tracker: ie,
+    showMediaControls: F,
+    tracker: ne,
     videoOptions: h,
     viewportSize: w
-  }), le = Ue({
-    mediaTexture: oe,
+  }), ae = Pe({
+    mediaTexture: re,
     previewMode: s,
     renderOutputs: l,
-    sceneRenderOutputs: K
+    sceneRenderOutputs: j
   });
   return {
     containerRef: b,
     displayCanvasRef: f,
-    displayMirrored: _,
-    layout: B,
-    managesOwnMedia: k,
-    media: M,
-    renderOutputState: le,
-    renderState: se,
+    displayMirrored: H,
+    layout: D,
+    managesOwnMedia: z,
+    media: T,
+    renderOutputState: ae,
+    renderState: ie,
     selectedImageId: x,
     selectedSource: v,
-    selectedVideoId: I,
-    setSceneRenderOutputs: A,
+    selectedVideoId: E,
+    setSceneRenderOutputs: V,
     setSelectedImageId: u,
-    setSelectedSource: E,
+    setSelectedSource: I,
     setSelectedVideoId: C,
-    showMediaControls: T,
+    showMediaControls: F,
     viewportSize: w
   };
-}, U = ({ children: e }) => /* @__PURE__ */ g(P, { children: e });
+}, U = ({ children: e }) => /* @__PURE__ */ g(W, { children: e });
 U.displayName = "XRViewport.Scene";
-const j = ({ children: e }) => /* @__PURE__ */ g(P, { children: e });
-j.displayName = "XRViewport.Overlay";
-const Ke = (e, t) => {
+const N = ({ children: e }) => /* @__PURE__ */ g(W, { children: e });
+N.displayName = "XRViewport.Overlay";
+const qe = (e, t) => {
   if (e === "dom")
     return {
       sceneContent: null,
       overlayContent: t
     };
-  let r = null, n = null;
+  let n = null, r = null;
   const o = [];
-  return ge.forEach(t, (i) => {
+  return he.forEach(t, (i) => {
     var s;
-    if (!be(i)) {
+    if (!me(i)) {
       i != null && o.push(i);
       return;
     }
     const a = (s = i.type) == null ? void 0 : s.displayName;
     if (a === U.displayName) {
-      r = i.props.children;
+      n = i.props.children;
       return;
     }
-    if (a === j.displayName) {
-      n = i.props.children;
+    if (a === N.displayName) {
+      r = i.props.children;
       return;
     }
     o.push(i);
-  }), !n && o.length > 0 && (n = o), {
-    sceneContent: r,
-    overlayContent: n
+  }), !r && o.length > 0 && (r = o), {
+    sceneContent: n,
+    overlayContent: r
   };
 }, Z = (e, t) => typeof e == "function" ? e(t) : e;
-function Ge(e) {
-  return e.Scene = U, e.Overlay = j, e;
+function Ue(e) {
+  return e.Scene = U, e.Overlay = N, e;
 }
-const ct = Ge(({
+const rt = Ue(({
   children: e,
   fitMode: t = "auto",
-  imageOptions: r = [],
-  initialImageId: n,
+  imageOptions: n = [],
+  initialImageId: r,
   initialMirrored: o = !0,
   initialSource: i = "webcam",
   initialVideoId: a,
@@ -992,12 +989,12 @@ const ct = Ge(({
   showMediaControlsByDefault: b = !0,
   source: f,
   style: w,
-  videoOptions: m = []
+  videoOptions: p = []
 }) => {
-  const p = je({
+  const m = $e({
     fitMode: t,
-    imageOptions: r,
-    initialImageId: n,
+    imageOptions: n,
+    initialImageId: r,
     initialMirrored: o,
     initialSource: i,
     initialVideoId: a,
@@ -1006,44 +1003,44 @@ const ct = Ge(({
     renderOutputs: h,
     showMediaControlsByDefault: b,
     source: f,
-    videoOptions: m
-  }), y = typeof e == "function" ? e(p.renderState) : e, { sceneContent: T, overlayContent: R } = Ke(c, y), v = Z(
-    T,
-    p.renderState
-  ), E = Z(
+    videoOptions: p
+  }), y = typeof e == "function" ? e(m.renderState) : e, { sceneContent: F, overlayContent: R } = qe(c, y), v = Z(
+    F,
+    m.renderState
+  ), I = Z(
     R,
-    p.renderState
+    m.renderState
   );
-  return /* @__PURE__ */ g(ye.Provider, { value: p.renderState, children: /* @__PURE__ */ g(Ce.Provider, { value: p.renderOutputState, children: /* @__PURE__ */ g(
-    ke,
+  return /* @__PURE__ */ g(be.Provider, { value: m.renderState, children: /* @__PURE__ */ g(we.Provider, { value: m.renderOutputState, children: /* @__PURE__ */ g(
+    Ee,
     {
-      containerRef: p.containerRef,
-      displayCanvasRef: p.displayCanvasRef,
-      imageOptions: r,
-      imageRef: p.media.imageRef,
-      layout: p.layout,
-      managesOwnMedia: p.managesOwnMedia,
+      containerRef: m.containerRef,
+      displayCanvasRef: m.displayCanvasRef,
+      imageOptions: n,
+      imageRef: m.media.imageRef,
+      layout: m.layout,
+      managesOwnMedia: m.managesOwnMedia,
       mediaDock: l,
-      mirrored: p.displayMirrored,
+      mirrored: m.displayMirrored,
       mode: c,
-      overlayContent: E,
+      overlayContent: I,
       renderOutputs: h,
       sceneContent: v,
-      selectedImageId: p.selectedImageId,
-      selectedSource: p.selectedSource,
-      selectedVideoId: p.selectedVideoId,
-      setSceneRenderOutputs: p.setSceneRenderOutputs,
-      setSelectedImageId: p.setSelectedImageId,
-      setSelectedSource: p.setSelectedSource,
-      setSelectedVideoId: p.setSelectedVideoId,
-      showMediaControls: p.showMediaControls,
+      selectedImageId: m.selectedImageId,
+      selectedSource: m.selectedSource,
+      selectedVideoId: m.selectedVideoId,
+      setSceneRenderOutputs: m.setSceneRenderOutputs,
+      setSelectedImageId: m.setSelectedImageId,
+      setSelectedSource: m.setSelectedSource,
+      setSelectedVideoId: m.setSelectedVideoId,
+      showMediaControls: m.showMediaControls,
       style: w,
-      videoOptions: m,
-      videoRef: p.media.videoRef,
-      viewportSize: p.viewportSize
+      videoOptions: p,
+      videoRef: m.media.videoRef,
+      viewportSize: m.viewportSize
     }
   ) }) });
-}), Ye = {
+}), Ne = {
   position: "absolute",
   top: -28,
   left: 0,
@@ -1054,11 +1051,11 @@ const ct = Ge(({
   fontWeight: 700,
   padding: "4px 8px",
   whiteSpace: "nowrap"
-}, dt = ({
+}, nt = ({
   boundingBox: e,
   label: t = "face bounding box",
-  color: r = "#22c55e",
-  style: n,
+  color: n = "#22c55e",
+  style: r,
   labelStyle: o
 }) => /* @__PURE__ */ g(
   "div",
@@ -1069,42 +1066,42 @@ const ct = Ge(({
       top: `${e.top * 100}%`,
       width: `${e.width * 100}%`,
       height: `${e.height * 100}%`,
-      border: `3px solid ${r}`,
+      border: `3px solid ${n}`,
       boxSizing: "border-box",
       pointerEvents: "none",
       zIndex: 20,
-      ...n
+      ...r
     },
-    children: t !== null && /* @__PURE__ */ g("div", { style: { ...Ye, ...o }, children: t })
+    children: t !== null && /* @__PURE__ */ g("div", { style: { ...Ne, ...o }, children: t })
   }
-), ut = (e) => {
-  const [t, r] = S(null);
-  return F(() => {
-    let n = 0;
+), ot = (e) => {
+  const [t, n] = S(null);
+  return M(() => {
+    let r = 0;
     const o = () => {
       var l, c;
-      n = requestAnimationFrame(o);
+      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) {
-        r(null);
+        n(null);
         return;
       }
-      const a = we(i), s = {
+      const a = fe(i), s = {
         left: a.minX,
         top: a.minY,
         width: a.width,
         height: a.height
       };
-      r((d) => d && d.left === s.left && d.top === s.top && d.width === s.width && d.height === s.height ? d : s);
+      n((d) => d && d.left === s.left && d.top === s.top && d.width === s.width && d.height === s.height ? d : s);
     };
     return o(), () => {
-      cancelAnimationFrame(n);
+      cancelAnimationFrame(r);
     };
   }, [e]), t;
-}, ht = ({
+}, it = ({
   background: e = "#000",
   children: t,
-  style: r
+  style: n
 }) => /* @__PURE__ */ g(
   "div",
   {
@@ -1113,156 +1110,68 @@ const ct = Ge(({
       inset: 0,
       overflow: "hidden",
       background: e,
-      ...r
+      ...n
     },
     children: t
   }
-), pt = (e) => {
-  const { makeDefault: t = !0, ...r } = e;
+), at = (e) => {
+  const { makeDefault: t = !0, ...n } = e;
   return /* @__PURE__ */ g(
-    xe,
+    pe,
     {
       position: [0, 0, 40],
       fov: 30,
       near: 0.1,
       far: 1e3,
       makeDefault: t,
-      ...r
+      ...n
     }
   );
-}, ft = ["fill", "contain"], mt = (e, t, r, n, o) => {
-  const i = Math.max(1, Math.floor(t)), a = Math.max(0, Math.floor(e)), s = r === "ping-pong" && i > 1 ? i * 2 - 2 : i, l = Math.floor(a / s), c = o > 0 ? l >= o : !n && a >= s, d = c ? s - 1 : a % s;
-  return { frame: r === "reverse" ? i - 1 - d % i : r === "random" ? d * 7919 % i : r === "ping-pong" && d >= i ? s - d : d, ended: c, loop: l };
-}, gt = (e, t, r) => {
-  const n = Math.max(1, Math.floor(r));
-  return Math.floor(Math.max(0, e) * Math.max(0, t)) % n;
-};
-class bt {
-  constructor(t, r) {
-    X(this, "capabilities");
-    X(this, "snapshot");
-    X(this, "listeners", /* @__PURE__ */ new Set());
-    X(this, "eventListeners", /* @__PURE__ */ new Map());
-    this.capabilities = t, this.snapshot = {
-      state: "idle",
-      frame: 0,
-      time: 0,
-      playMode: "forward",
-      loop: !0,
-      loopCount: 0,
-      ...r
-    };
-  }
-  play() {
-    const t = this.snapshot.state === "paused";
-    this.update({ state: "playing" }), this.emit(t ? "Resume" : "PlayBegin");
-  }
-  pause() {
-    this.update({ state: "paused" }), this.emit("Pause");
-  }
-  restart() {
-    this.update({ state: "playing", frame: 0, time: 0 }), this.emit("PlayBegin");
-  }
-  setPlayMode(t) {
-    this.update({ playMode: t });
-  }
-  setLoop(t, r = 0) {
-    this.update({ loop: t, loopCount: r });
-  }
-  seek(t) {
-    this.capabilities.canSeek && this.update({ frame: Math.max(0, Math.floor(t)), time: Math.max(0, t) });
-  }
-  subscribe(t) {
-    return this.listeners.add(t), () => this.listeners.delete(t);
-  }
-  on(t, r) {
-    const n = this.eventListeners.get(t) ?? /* @__PURE__ */ new Set();
-    return n.add(r), this.eventListeners.set(t, n), () => this.off(t, r);
-  }
-  off(t, r) {
-    var n;
-    (n = this.eventListeners.get(t)) == null || n.delete(r);
-  }
-  getSnapshot() {
-    return this.snapshot;
-  }
-  dispose() {
-    this.listeners.clear(), this.eventListeners.clear(), this.snapshot = { ...this.snapshot, state: "idle" };
-  }
-  emit(t) {
-    var r;
-    (r = this.eventListeners.get(t)) == null || r.forEach((n) => n({ type: t, snapshot: this.snapshot }));
-  }
-  update(t) {
-    this.snapshot = { ...this.snapshot, ...t }, this.listeners.forEach((r) => r(this.snapshot));
-  }
-}
-function wt(e) {
-  return async (t, r) => {
-    const n = e.find((o) => o.canResolve(t));
-    if (!n) throw new Je("No texture provider matched source", t);
-    return Oe(n.resolve.bind(n), t, r);
-  };
-}
-class Je extends Error {
-  constructor(r, n) {
-    super(r);
-    X(this, "source");
-    this.name = "TextureSourceLoadError", this.source = n;
-  }
-}
-function ee(e) {
-  if (e.aborted)
-    throw new DOMException("Texture source load aborted", "AbortError");
-}
-async function Oe(e, t, r) {
-  ee(r);
-  const n = await e(t, r);
-  return r.aborted && (n.dispose(), ee(r)), n;
-}
-function xt(e) {
-  e == null || e.dispose();
-}
+}, st = ["fill", "contain"];
 export {
-  bt as BasicAnimatedTextureController,
-  dt as BoundingBoxOverlay,
-  Ct as HeadTracker,
-  pt as PerspectiveCamera,
-  Dt as ScreenRectAspectContext,
-  ft as TEXTURE_FITS,
-  Je as TextureSourceLoadError,
-  ht as XRCompositor,
-  W as XRLayer,
-  Se as XRMediaSurface,
-  lt as XRTrackingOverlay,
-  ct as XRViewport,
-  we as computeLandmarkBounds,
-  $t as computeScreenTransform,
-  Lt as createFaceInfoTarget,
-  wt as createTextureSourceResolver,
-  xt as disposeResolvedTextureSource,
-  zt as getFaceInfo,
-  mt as getPlaybackFrame,
-  gt as getSequenceFrame,
-  Vt as getThreeBlending,
-  At as getThreeDepthFunction,
-  Bt as getThreeSide,
-  Ht as hasFullUnitUVBounds,
-  Xe as resolveCalibrationFaceDisplayMirrored,
-  Oe as resolveTextureSource,
-  ee as throwIfAborted,
-  Ve as useCalibrationFaceTracker,
-  ut as useFaceBoundingBox,
-  Wt as useScreenSpace,
-  St as useTrackerContext,
-  Et as useXRCameraTexture,
-  ue as useXRContext,
-  It as useXRError,
-  he as useXRModel,
-  pe as useXRModelNode,
-  Mt as useXRPipelineSnapshot,
-  Tt as useXRReady,
-  Ft as useXRRenderSize,
+  zt as BasicAnimatedTextureController,
+  nt as BoundingBoxOverlay,
+  dt as HeadTracker,
+  Xt as MAX_GIF_BYTES,
+  kt as MAX_GIF_FRAMES,
+  At as MAX_GIF_PIXELS,
+  at as PerspectiveCamera,
+  Ct as ScreenRectAspectContext,
+  st as TEXTURE_FITS,
+  Lt as TextureSourceLoadError,
+  it as XRCompositor,
+  B as XRLayer,
+  xe as XRMediaSurface,
+  tt as XRTrackingOverlay,
+  rt as XRViewport,
+  fe as computeLandmarkBounds,
+  Vt as computeScreenTransform,
+  xt as createFaceInfoTarget,
+  Dt as createTextureSourceResolver,
+  Bt as disposeResolvedTextureSource,
+  vt as getFaceInfo,
+  Wt as getPlaybackFrame,
+  _t as getSequenceFrame,
+  St as getThreeBlending,
+  Rt as getThreeDepthFunction,
+  It as getThreeSide,
+  Ht as gifTextureSourceProvider,
+  Ft as hasFullUnitUVBounds,
+  Me as resolveCalibrationFaceDisplayMirrored,
+  Pt as resolveTextureSource,
+  $t as throwIfAborted,
+  Xe as useCalibrationFaceTracker,
+  ot as useFaceBoundingBox,
+  Et as useScreenSpace,
+  ut as useTrackerContext,
+  mt as useXRCameraTexture,
+  se as useXRContext,
+  ft as useXRError,
+  le as useXRModel,
+  ce as useXRModelNode,
+  pt as useXRPipelineSnapshot,
+  gt as useXRReady,
+  bt as useXRRenderSize,
   qt as useXRViewportRenderOutputs,
-  Nt as useXRViewportState
+  Ut as useXRViewportState
 };