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

package/dist/low-level.js

@@ -1,80 +1,27 @@
-import { u as he } from "./index-BD-JWMjE.js";
-import { H as lt, a as ct } from "./index-BD-JWMjE.js";
-import { a as me } from "./selectors-BHO6TnoC.js";
-import { u as ut, c as ht, e as mt, b as ft, d as gt } from "./selectors-BHO6TnoC.js";
-import { useEffect as M, useRef as k, useState as y, useCallback as fe, useContext as ge, useMemo as G, createContext as pe, useLayoutEffect as be, Children as we, isValidElement as ve } from "react";
-import { u as te, c as xe } from "./useFaceResults-cpsSmKKc.js";
-import { u as ye, X as re } from "./index-CYMj26Ej.js";
-import { h as bt } from "./hasFullUnitUVBounds-BGvcFsQM.js";
-import { X as Ce } from "./index-DtwHElmG.js";
-import { c as vt, d as xt, b as yt } from "./index-DtwHElmG.js";
-import { jsx as f, jsxs as z, Fragment as q } from "react/jsx-runtime";
-import { PerspectiveCamera as Re } from "@react-three/drei";
-const Ee = {
-  position: "absolute",
-  top: -28,
-  left: 0,
-  background: "rgba(34, 197, 94, 0.9)",
-  color: "#04130a",
-  fontFamily: "Menlo, Monaco, Consolas, monospace",
-  fontSize: 12,
-  fontWeight: 700,
-  padding: "4px 8px",
-  whiteSpace: "nowrap"
-}, Ze = ({
-  boundingBox: e,
-  label: t = "face bounding box",
-  color: n = "#22c55e",
-  style: a,
-  labelStyle: r
-}) => /* @__PURE__ */ f(
-  "div",
-  {
-    style: {
-      position: "absolute",
-      left: `${e.left * 100}%`,
-      top: `${e.top * 100}%`,
-      width: `${e.width * 100}%`,
-      height: `${e.height * 100}%`,
-      border: `3px solid ${n}`,
-      boxSizing: "border-box",
-      pointerEvents: "none",
-      zIndex: 20,
-      ...a
-    },
-    children: t !== null && /* @__PURE__ */ f("div", { style: { ...Ee, ...r }, children: t })
-  }
-), et = (e) => {
-  const { makeDefault: t = !0, ...n } = e, a = {
-    position: [0, 0, 40],
-    fov: 30,
-    near: 0.1,
-    far: 1e3,
-    makeDefault: t,
-    ...n
-  };
-  return /* @__PURE__ */ f(Re, { ...a });
-}, tt = ({
-  background: e = "#000",
-  children: t,
-  style: n
-}) => /* @__PURE__ */ f(
-  "div",
-  {
-    style: {
-      position: "fixed",
-      inset: 0,
-      overflow: "hidden",
-      background: e,
-      ...n
-    },
-    children: t
-  }
-), $ = ({
+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 = ({
   children: e,
   config: t,
-  style: n
-}) => /* @__PURE__ */ f(
+  style: r
+}) => /* @__PURE__ */ g(
   "div",
   {
     "data-render-target": t.name,
@@ -86,83 +33,83 @@ const Ee = {
       pointerEvents: t.pointerEvents ?? "none",
       zIndex: t.zIndex,
       opacity: t.hidden ? 0 : 1,
-      ...n
+      ...r
     },
     children: e
   }
-), j = ({
+), N = ({
   canvas: e,
   layout: t,
-  media: n,
-  mirrored: a,
-  filter: r
+  media: r,
+  mirrored: n,
+  filter: o
 }) => {
-  const i = Math.round(t.destination.width), s = Math.round(t.destination.height);
-  e.width !== i && (e.width = i), e.height !== s && (e.height = s);
-  const o = e.getContext("2d");
-  o && (o.setTransform(1, 0, 0, 1, 0, 0), o.clearRect(0, 0, i, s), a && (o.translate(i, 0), o.scale(-1, 1)), r && (o.filter = r), o.drawImage(n, t.offsetX, t.offsetY, t.drawWidth, t.drawHeight), r && (o.filter = "none"), o.setTransform(1, 0, 0, 1, 0, 0));
+  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 = ({
   canvasRef: e,
   enabled: t = !0,
-  fps: n = 30,
-  imageRef: a,
-  layout: r,
+  fps: r = 30,
+  imageRef: n,
+  layout: o,
   mirrored: i,
-  sourceKind: s,
-  videoRef: o
+  sourceKind: a,
+  videoRef: s
 }) => {
-  M(() => {
+  F(() => {
     if (!t) {
-      const p = e.current, c = p == null ? void 0 : p.getContext("2d");
-      p && c && c.clearRect(0, 0, p.width, p.height);
+      const b = e.current, f = b == null ? void 0 : b.getContext("2d");
+      b && f && f.clearRect(0, 0, b.width, b.height);
       return;
     }
-    let h = 0, m = 0;
-    const d = n > 0 ? 1e3 / n : 0, g = (p) => {
-      if (h = requestAnimationFrame(g), d > 0 && p - m < d) return;
-      m = p;
-      const c = e.current;
-      if (!c || !r) return;
-      if (s === "image") {
-        const w = a.current;
-        if (!w || !w.complete || w.naturalWidth <= 0 || w.naturalHeight <= 0)
+    let l = 0, c = 0;
+    const d = r > 0 ? 1e3 / r : 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)
           return;
-        j({
-          canvas: c,
-          layout: r,
-          media: w,
+        N({
+          canvas: f,
+          layout: o,
+          media: m,
           mirrored: i
         });
         return;
       }
-      const b = o.current;
-      !b || b.readyState < 2 || b.videoWidth <= 0 || b.videoHeight <= 0 || j({
-        canvas: c,
-        layout: r,
-        media: b,
+      const w = s.current;
+      !w || w.readyState < 2 || w.videoWidth <= 0 || w.videoHeight <= 0 || N({
+        canvas: f,
+        layout: o,
+        media: w,
         mirrored: i
       });
     };
-    return h = requestAnimationFrame(g), () => {
-      cancelAnimationFrame(h);
+    return l = requestAnimationFrame(h), () => {
+      cancelAnimationFrame(l);
     };
-  }, [e, t, n, a, r, i, s, o]);
+  }, [e, t, r, n, o, i, a, s]);
 }, Se = ({
   canvasRef: e,
   imageRef: t,
-  layer: n,
-  layout: a,
-  mirrored: r,
+  layer: r,
+  layout: n,
+  mirrored: o,
   sourceKind: i,
-  videoRef: s
+  videoRef: a
 }) => (ne({
   canvasRef: e,
   imageRef: t,
-  layout: a,
-  mirrored: r,
+  layout: n,
+  mirrored: o,
   sourceKind: i,
-  videoRef: s
-}), /* @__PURE__ */ f($, { config: n, children: /* @__PURE__ */ f(
+  videoRef: a
+}), /* @__PURE__ */ g(W, { config: r, children: /* @__PURE__ */ g(
   "canvas",
   {
     ref: e,
@@ -175,339 +122,84 @@ const Ee = {
       background: "#000"
     }
   }
-) })), rt = ({
+) })), lt = ({
   canvasRef: e,
   controlInsetTop: t,
-  debugVisible: n,
-  fps: a = 15,
-  imageRef: r,
+  debugVisible: r,
+  fps: n = 15,
+  imageRef: o,
   layer: i,
-  layout: s,
-  mirrored: o,
-  sourceKind: h,
-  videoRef: m,
+  layout: a,
+  mirrored: s,
+  sourceKind: l,
+  videoRef: c,
   viewportSize: d
 }) => {
   ne({
     canvasRef: e,
-    enabled: n,
-    fps: a,
-    imageRef: r,
-    layout: s,
-    mirrored: o,
-    sourceKind: h,
-    videoRef: m
+    enabled: r,
+    fps: n,
+    imageRef: o,
+    layout: a,
+    mirrored: s,
+    sourceKind: l,
+    videoRef: c
   });
-  const g = Math.min(220, Math.max(120, d.width * 0.22)), p = d.width > 0 && d.height > 0 ? d.width / d.height : 1, c = Math.min(d.height - 24, Math.max(t ?? 16, 16));
-  return /* @__PURE__ */ f($, { config: i, children: /* @__PURE__ */ f(
+  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(
     "canvas",
     {
       ref: e,
       style: {
         position: "absolute",
         left: 16,
-        top: c,
-        width: n ? g : 1,
-        height: n ? "auto" : 1,
-        aspectRatio: `${p}`,
-        opacity: n ? 0.85 : 0,
+        top: f,
+        width: r ? h : 1,
+        height: r ? "auto" : 1,
+        aspectRatio: `${b}`,
+        opacity: r ? 0.85 : 0,
         borderRadius: 10,
-        border: n ? "1px solid rgba(255,255,255,0.16)" : "none",
+        border: r ? "1px solid rgba(255,255,255,0.16)" : "none",
         pointerEvents: "none",
         objectFit: "contain",
         background: "#000"
       }
     }
   ) });
-}, Ie = 5, Fe = 1, Me = (e, t) => t, ke = "brightness(2.2) contrast(1.5) saturate(1.25)", ze = ({
-  enabled: e,
-  displayMirrored: t,
-  imageRef: n,
-  layout: a,
-  mode: r,
-  numFaces: i,
-  selectedSource: s,
-  sourceStream: o,
-  videoRef: h
-}) => {
-  const { session: m } = ye(), d = k(null), g = k(!1), p = k(document.createElement("canvas")), {
-    ready: c,
-    node: b,
-    error: w
-  } = he(re.FACE_TRACKER, {
-    numFaces: i ?? (r === "head-binding" ? Fe : Ie)
-  }), [S, v] = y("idle"), [A, I] = y(null), F = e && c && !!b, L = te({
-    node: F ? b : null,
-    enabled: F,
-    selectedSource: s,
-    onFrame: fe(() => {
-      I(null), v("ready");
-    }, [])
-  });
-  return M(() => {
-    if (!e || !a) return;
-    const u = () => {
-      const x = s === "image" ? n.current : h.current;
-      if (x) {
-        if (x instanceof HTMLImageElement) {
-          if (!x.complete || x.naturalWidth <= 0 || x.naturalHeight <= 0) return;
-        } else if (x.readyState < 2 || x.videoWidth <= 0 || x.videoHeight <= 0)
-          return;
-        j({
-          canvas: p.current,
-          layout: a,
-          media: x,
-          mirrored: t,
-          filter: s === "webcam" ? ke : void 0
-        });
-      }
-    };
-    if (s === "image") {
-      u();
-      return;
-    }
-    let l = 0;
-    const C = () => {
-      l = requestAnimationFrame(C), u();
-    };
-    return l = requestAnimationFrame(C), () => cancelAnimationFrame(l);
-  }, [t, e, n, a, s, h]), M(() => {
-    var T;
-    if (!e) {
-      v("idle"), I(null), g.current = !1, d.current = null;
-      return;
-    }
-    if (!a) {
-      v("initializing");
-      return;
-    }
-    const u = (o == null ? void 0 : o.id) ?? (((T = h.current) == null ? void 0 : T.srcObject) instanceof MediaStream ? h.current.srcObject.id : "none"), C = s === "webcam" ? `webcam:${u}` : s;
-    d.current !== C && (g.current = !1, d.current = C);
-    let x = !1;
-    return (async () => {
-      try {
-        if (v("initializing"), g.current || (await m.setFrameSource({
-          canvas: p.current,
-          sourceKind: s
-        }), await m.start(), g.current = !0), x) return;
-        I(null), v("initializing");
-      } catch (E) {
-        if (x) return;
-        v("error"), I(E instanceof Error ? E.message : "Failed to initialize SDK face tracking");
-      }
-    })(), () => {
-      x = !0;
-    };
-  }, [e, a, s, m, o, h]), M(() => {
-    !F && e && !w && v("initializing");
-  }, [F, e, w]), M(() => {
-    w && (v("error"), I(w.message));
-  }, [w]), M(() => () => {
-    g.current = !1, m.stop();
-  }, [m]), {
-    activeDelegate: "GPU",
-    faces: L,
-    status: S,
-    error: A
-  };
-}, ie = pe(null), Te = {
+}, Re = {
   audio: !1,
   video: {
     facingMode: "user",
     frameRate: { ideal: 30, max: 60 }
   }
-}, Xe = {
+}, Ee = {
   name: "viewport-live",
   clearColor: "#000000",
   pointerEvents: "none",
   zIndex: 0
-}, Ae = {
+}, Ie = {
   name: "viewport-ui",
   clearColor: "transparent",
   pointerEvents: "auto",
   zIndex: 5
-}, Le = {
+}, Me = {
   name: "viewport-scene",
   clearColor: "transparent",
   pointerEvents: "auto",
   zIndex: 1
-}, X = {
+}, D = {
   webcam: { icon: "◉", label: "Webcam" },
   image: { icon: "▣", label: "Images" },
   video: { icon: "▶", label: "Videos" }
-}, K = ({ children: e }) => /* @__PURE__ */ f(q, { children: e });
-K.displayName = "XRViewport.Scene";
-const O = ({ children: e }) => /* @__PURE__ */ f(q, { children: e });
-O.displayName = "XRViewport.Overlay";
-const We = (e) => {
-  if (!e)
-    return { width: 0, height: 0 };
-  const t = e.getBoundingClientRect();
-  return {
-    width: t.width || e.clientWidth,
-    height: t.height || e.clientHeight
-  };
-}, Be = (e) => {
-  const [t, n] = y({ width: 0, height: 0 });
-  return be(() => {
-    const a = e.current;
-    if (!a) return;
-    let r = 0;
-    const i = () => {
-      const m = We(a);
-      n(
-        (d) => d.width === m.width && d.height === m.height ? d : m
-      );
-    };
-    i(), r = requestAnimationFrame(i);
-    const s = new ResizeObserver(() => {
-      i(), r && cancelAnimationFrame(r), r = requestAnimationFrame(i);
-    });
-    s.observe(a);
-    const o = window.visualViewport, h = () => {
-      i(), r && cancelAnimationFrame(r), r = requestAnimationFrame(i);
-    };
-    return window.addEventListener("resize", h), window.addEventListener("orientationchange", h), o == null || o.addEventListener("resize", h), o == null || o.addEventListener("scroll", h), () => {
-      r && cancelAnimationFrame(r), s.disconnect(), window.removeEventListener("resize", h), window.removeEventListener("orientationchange", h), o == null || o.removeEventListener("resize", h), o == null || o.removeEventListener("scroll", h);
-    };
-  }, [e]), t;
-}, J = (e) => {
-  e && (e.pause(), e.removeAttribute("src"), e.srcObject = null, e.load());
-}, Q = (e) => {
-  e && e.removeAttribute("src");
-}, He = ({
-  enabled: e,
-  imageAsset: t,
-  selectedSource: n,
-  videoAsset: a
-}) => {
-  const r = k(null), i = k(null), [s, o] = y(null), [h, m] = y({ width: 0, height: 0 }), [d, g] = y("idle"), [p, c] = y(null);
-  return M(() => {
-    if (!e) {
-      J(r.current), Q(i.current), o(null), m({ width: 0, height: 0 }), g("idle"), c(null);
-      return;
-    }
-    let b = !1, w = null;
-    const S = (u, l) => {
-      b || (m({ width: u, height: l }), g("ready"), c(null));
-    }, v = () => {
-      J(r.current), Q(i.current), w == null || w.getTracks().forEach((u) => u.stop()), w = null, o(null);
-    }, A = async () => {
-      g("requesting");
-      const u = await navigator.mediaDevices.getUserMedia(Te);
-      if (b) {
-        u.getTracks().forEach((C) => C.stop());
-        return;
-      }
-      w = u, o(u);
-      const l = r.current;
-      l && (l.srcObject = u, l.muted = !0, l.playsInline = !0, l.autoplay = !0, await l.play(), S(l.videoWidth, l.videoHeight));
-    }, I = async (u) => {
-      g("requesting"), o(null);
-      const l = r.current;
-      l && (l.src = u, l.muted = !0, l.loop = !0, l.playsInline = !0, l.autoplay = !0, l.crossOrigin = "anonymous", await l.play(), S(l.videoWidth, l.videoHeight));
-    }, F = async (u) => {
-      g("requesting"), o(null);
-      const l = i.current;
-      l && (await new Promise((C, x) => {
-        l.onload = () => C(), l.onerror = () => x(new Error("Unable to load image")), l.src = u;
-      }), S(l.naturalWidth, l.naturalHeight));
-    };
-    return v(), (async () => {
-      try {
-        if (n === "webcam") {
-          await A();
-          return;
-        }
-        if (n === "video") {
-          if (!(a != null && a.src))
-            throw new Error("Missing video source");
-          await I(a.src);
-          return;
-        }
-        if (!(t != null && t.src))
-          throw new Error("Missing image source");
-        await F(t.src);
-      } catch (u) {
-        if (b) return;
-        g("error"), c(u instanceof Error ? u.message : `Unable to initialize ${n}`);
-      }
-    })(), () => {
-      b = !0, v();
-    };
-  }, [e, t, n, a]), {
-    videoRef: r,
-    imageRef: i,
-    stream: s,
-    mediaSize: h,
-    status: d,
-    error: p
-  };
-}, Ve = (e, t) => e === "auto" ? t === "webcam" ? "cover" : "contain" : e, De = ({
-  imageOptions: e,
-  initialImageId: t,
-  initialSource: n,
-  initialVideoId: a,
-  source: r,
-  videoOptions: i
-}) => {
-  var d, g, p, c;
-  const s = (r == null ? void 0 : r.kind) ?? n ?? "webcam", o = s === "image" && e.length === 0 || s === "video" && i.length === 0 ? "webcam" : s, h = (r == null ? void 0 : r.kind) === "image" ? r.assetId ?? ((d = e[0]) == null ? void 0 : d.id) ?? "" : t ?? ((g = e[0]) == null ? void 0 : g.id) ?? "", m = (r == null ? void 0 : r.kind) === "video" ? r.assetId ?? ((p = i[0]) == null ? void 0 : p.id) ?? "" : a ?? ((c = i[0]) == null ? void 0 : c.id) ?? "";
-  return {
-    selectedSource: o,
-    selectedImageId: h,
-    selectedVideoId: m
-  };
-}, _e = (e, t, n) => {
-  if (e.width <= 0 || e.height <= 0 || t.width <= 0 || t.height <= 0)
-    return null;
-  const a = n === "contain" ? Math.min(t.width / e.width, t.height / e.height) : Math.max(t.width / e.width, t.height / e.height), r = e.width * a, i = e.height * a, s = (t.width - r) * 0.5, o = (t.height - i) * 0.5;
-  return {
-    source: e,
-    destination: t,
-    drawWidth: r,
-    drawHeight: i,
-    offsetX: s,
-    offsetY: o,
-    scale: a
-  };
-}, $e = (e, t) => {
-  if (e === "dom")
-    return {
-      sceneContent: null,
-      overlayContent: t
-    };
-  let n = null, a = null;
-  const r = [];
-  return we.forEach(t, (i) => {
-    var o;
-    if (!ve(i)) {
-      i != null && r.push(i);
-      return;
-    }
-    const s = (o = i.type) == null ? void 0 : o.displayName;
-    if (s === K.displayName) {
-      n = i.props.children;
-      return;
-    }
-    if (s === O.displayName) {
-      a = i.props.children;
-      return;
-    }
-    r.push(i);
-  }), !a && r.length > 0 && (a = r), {
-    sceneContent: n,
-    overlayContent: a
-  };
-}, Z = (e, t) => typeof e == "function" ? e(t) : e, nt = () => ge(ie), qe = ({
+}, Te = ({
   imageRef: e,
   selectedSource: t,
-  videoRef: n
-}) => /* @__PURE__ */ z(q, { children: [
-  /* @__PURE__ */ f(
+  videoRef: r
+}) => /* @__PURE__ */ z(P, { children: [
+  /* @__PURE__ */ g(
     "video",
     {
-      ref: n,
+      ref: r,
       style: {
         position: "absolute",
         width: 1,
@@ -517,7 +209,7 @@ const We = (e) => {
       }
     }
   ),
-  /* @__PURE__ */ f(
+  /* @__PURE__ */ g(
     "img",
     {
       ref: e,
@@ -531,13 +223,13 @@ const We = (e) => {
       }
     }
   )
-] }), ee = ({
+] }), J = ({
   dock: e,
   label: t,
-  onChange: n,
-  options: a,
-  value: r
-}) => /* @__PURE__ */ f(
+  onChange: r,
+  options: n,
+  value: o
+}) => /* @__PURE__ */ g(
   "div",
   {
     style: {
@@ -565,12 +257,12 @@ const We = (e) => {
           fontWeight: 700
         },
         children: [
-          /* @__PURE__ */ f("span", { children: t }),
-          /* @__PURE__ */ f(
+          /* @__PURE__ */ g("span", { children: t }),
+          /* @__PURE__ */ g(
             "select",
             {
-              value: r,
-              onChange: (i) => n(i.target.value),
+              value: o,
+              onChange: (i) => r(i.target.value),
               style: {
                 minWidth: 180,
                 maxWidth: "calc(100vw - 52px)",
@@ -581,31 +273,31 @@ const We = (e) => {
                 color: "#e5eefb",
                 padding: "0 10px"
               },
-              children: a.map((i) => /* @__PURE__ */ f("option", { value: i.id, style: { color: "#111827" }, children: i.label }, i.id))
+              children: n.map((i) => /* @__PURE__ */ g("option", { value: i.id, style: { color: "#111827" }, children: i.label }, i.id))
             }
           )
         ]
       }
     )
   }
-), Ne = ({
+), Fe = ({
   dock: e,
   imageOptions: t,
-  selectedImageId: n,
-  selectedSource: a,
-  selectedVideoId: r,
+  selectedImageId: r,
+  selectedSource: n,
+  selectedVideoId: o,
   setSelectedImageId: i,
-  setSelectedSource: s,
-  setSelectedVideoId: o,
-  showMediaControls: h,
-  videoOptions: m
+  setSelectedSource: a,
+  setSelectedVideoId: s,
+  showMediaControls: l,
+  videoOptions: c
 }) => {
-  const [d, g] = y(!1), p = ["webcam", "image", "video"].filter((c) => c === "image" ? t.length > 0 : c === "video" ? m.length > 0 : !0);
-  return h ? d ? /* @__PURE__ */ f(
+  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(
     "button",
     {
       type: "button",
-      onClick: () => g(!1),
+      onClick: () => h(!1),
       "aria-label": "Open media controls",
       title: "Open media controls",
       style: {
@@ -626,7 +318,7 @@ const We = (e) => {
       },
       children: "≡"
     }
-  ) : /* @__PURE__ */ z(q, { children: [
+  ) : /* @__PURE__ */ z(P, { children: [
     /* @__PURE__ */ z(
       "div",
       {
@@ -642,7 +334,7 @@ const We = (e) => {
           maxWidth: "calc(100vw - 32px)"
         },
         children: [
-          /* @__PURE__ */ f(
+          /* @__PURE__ */ g(
             "div",
             {
               style: {
@@ -657,15 +349,15 @@ const We = (e) => {
                 backdropFilter: "blur(10px)",
                 overflowX: "auto"
               },
-              children: p.map((c) => {
-                const b = c === a;
+              children: b.map((f) => {
+                const w = f === n;
                 return /* @__PURE__ */ z(
                   "button",
                   {
                     type: "button",
-                    onClick: () => s(c),
-                    "aria-pressed": b,
-                    title: X[c].label,
+                    onClick: () => a(f),
+                    "aria-pressed": w,
+                    title: D[f].label,
                     style: {
                       border: "none",
                       borderRadius: 999,
@@ -676,26 +368,26 @@ const We = (e) => {
                       alignItems: "center",
                       justifyContent: "center",
                       gap: 8,
-                      background: b ? "rgba(56, 189, 248, 0.18)" : "rgba(255,255,255,0.04)",
-                      color: b ? "#e0f2fe" : "rgba(229,238,251,0.82)",
+                      background: w ? "rgba(56, 189, 248, 0.18)" : "rgba(255,255,255,0.04)",
+                      color: w ? "#e0f2fe" : "rgba(229,238,251,0.82)",
                       cursor: "pointer",
                       flex: "0 0 auto"
                     },
                     children: [
-                      /* @__PURE__ */ f("span", { style: { fontSize: 14, lineHeight: 1 }, children: X[c].icon }),
-                      /* @__PURE__ */ f("span", { style: { fontSize: 12, fontWeight: 700, letterSpacing: "0.01em" }, children: X[c].label })
+                      /* @__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 })
                     ]
                   },
-                  c
+                  f
                 );
               })
             }
           ),
-          /* @__PURE__ */ f(
+          /* @__PURE__ */ g(
             "button",
             {
               type: "button",
-              onClick: () => g(!0),
+              onClick: () => h(!0),
               "aria-label": "Close media controls",
               title: "Close media controls",
               style: {
@@ -716,226 +408,861 @@ const We = (e) => {
         ]
       }
     ),
-    a === "image" && t.length > 0 && /* @__PURE__ */ f(
-      ee,
+    n === "image" && t.length > 0 && /* @__PURE__ */ g(
+      J,
       {
         dock: e,
         label: "Image Asset",
         options: t,
-        value: n,
+        value: r,
         onChange: i
       }
     ),
-    a === "video" && m.length > 0 && /* @__PURE__ */ f(
-      ee,
+    n === "video" && c.length > 0 && /* @__PURE__ */ g(
+      J,
       {
         dock: e,
         label: "Video Asset",
-        options: m,
-        value: r,
-        onChange: o
+        options: c,
+        value: o,
+        onChange: s
       }
     )
   ] }) : null;
-}, Pe = ({
+}, ke = ({
+  containerRef: e,
+  displayCanvasRef: t,
+  imageOptions: r,
+  imageRef: n,
+  layout: o,
+  managesOwnMedia: i,
+  mediaDock: a,
+  mode: s,
+  overlayContent: l,
+  renderOutputs: c,
+  sceneContent: d,
+  selectedImageId: h,
+  selectedSource: b,
+  selectedVideoId: f,
+  setSceneRenderOutputs: w,
+  setSelectedImageId: m,
+  setSelectedSource: p,
+  setSelectedVideoId: y,
+  showMediaControls: T,
+  style: R,
+  videoOptions: v,
+  videoRef: E,
+  viewportSize: x,
+  mirrored: u
+}) => /* @__PURE__ */ z(
+  "div",
+  {
+    ref: e,
+    style: {
+      position: "fixed",
+      inset: 0,
+      overflow: "hidden",
+      background: "#000",
+      ...R
+    },
+    children: [
+      /* @__PURE__ */ g(Te, { imageRef: n, selectedSource: b, videoRef: E }),
+      s === "dom" && i && /* @__PURE__ */ g(
+        Se,
+        {
+          canvasRef: t,
+          imageRef: n,
+          videoRef: E,
+          layer: Ee,
+          layout: o,
+          mirrored: u,
+          sourceKind: b === "image" ? "image" : "video"
+        }
+      ),
+      (s === "r3f" || s === "hybrid") && /* @__PURE__ */ g(W, { config: Me, children: /* @__PURE__ */ g(
+        ve,
+        {
+          onRenderOutputs: w,
+          renderOutputs: {
+            sceneColor: c.sceneColor || c.finalColor,
+            sceneDepth: c.sceneDepth
+          },
+          renderTargetSize: x,
+          style: { width: "100%", height: "100%" },
+          children: d
+        }
+      ) }),
+      /* @__PURE__ */ z(W, { config: Ie, children: [
+        i && /* @__PURE__ */ g(
+          Fe,
+          {
+            dock: a,
+            imageOptions: r,
+            selectedImageId: h,
+            selectedSource: b,
+            selectedVideoId: f,
+            setSelectedImageId: m,
+            setSelectedSource: p,
+            setSelectedVideoId: y,
+            showMediaControls: T,
+            videoOptions: v
+          }
+        ),
+        l
+      ] })
+    ]
+  }
+), Le = 5, ze = 1, Xe = (e, t) => t, De = "brightness(2.2) contrast(1.5) saturate(1.25)", Ve = ({
+  enabled: e,
+  displayMirrored: t,
+  imageRef: r,
+  layout: n,
+  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")), {
+    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({
+    node: v ? w : null,
+    enabled: v,
+    selectedSource: a,
+    onFrame: fe(() => {
+      R(null), y("ready");
+    }, [])
+  });
+  return F(() => {
+    if (!e || !n) return;
+    const x = () => {
+      const C = a === "image" ? r.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({
+          canvas: b.current,
+          layout: n,
+          media: C,
+          mirrored: t,
+          filter: a === "webcam" ? De : void 0
+        });
+      }
+    };
+    if (a === "image") {
+      x();
+      return;
+    }
+    let u = 0;
+    const I = () => {
+      u = requestAnimationFrame(I), x();
+    };
+    return u = requestAnimationFrame(I), () => cancelAnimationFrame(u);
+  }, [t, e, r, n, a, l]), F(() => {
+    var A;
+    if (!e) {
+      y("idle"), R(null), h.current = !1, d.current = null;
+      return;
+    }
+    if (!n) {
+      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);
+    let C = !1;
+    return (async () => {
+      try {
+        if (y("initializing"), h.current || (await c.setFrameSource({
+          canvas: b.current,
+          sourceKind: a
+        }), await c.start(), h.current = !0), C) return;
+        R(null), y("initializing");
+      } catch (k) {
+        if (C) return;
+        y("error"), R(k instanceof Error ? k.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(() => () => {
+    h.current = !1, c.stop();
+  }, [c]), {
+    activeDelegate: "GPU",
+    faces: E,
+    status: p,
+    error: T
+  };
+}, Ae = (e, t) => e === "auto" ? t === "webcam" ? "cover" : "contain" : e, Be = ({
+  imageOptions: e,
+  initialImageId: t,
+  initialSource: r,
+  initialVideoId: n,
+  source: o,
+  videoOptions: i
+}) => {
+  var l, c, d, h;
+  const a = (o == null ? void 0 : o.kind) ?? r ?? "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) ?? ""
+  };
+}, We = (e, t, r) => {
+  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;
+  return {
+    source: e,
+    destination: t,
+    drawWidth: o,
+    drawHeight: i,
+    offsetX: (t.width - o) * 0.5,
+    offsetY: (t.height - i) * 0.5,
+    scale: n
+  };
+}, Pe = (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;
+    let o = 0;
+    const i = () => {
+      const c = Pe(n);
+      r(
+        (d) => d.width === c.width && d.height === c.height ? d : c
+      );
+    }, a = () => {
+      i(), o && cancelAnimationFrame(o), o = requestAnimationFrame(i);
+    };
+    a();
+    const s = new ResizeObserver(a);
+    s.observe(n);
+    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 = ({
   enabled: e,
   selectedSource: t
 }) => {
-  const n = me(re.FACE_TRACKER);
+  const r = pe(te.FACE_TRACKER);
   return {
-    faces: te({ node: n, enabled: e, selectedSource: t }),
-    trackerStatus: n ? "ready" : "idle"
+    faces: re({ node: r, enabled: e, selectedSource: t }),
+    trackerStatus: r ? "ready" : "idle"
+  };
+}, O = (e) => {
+  e && (e.pause(), e.removeAttribute("src"), e.srcObject = null, e.load());
+}, Q = (e) => {
+  e && e.removeAttribute("src");
+}, $e = ({
+  enabled: e,
+  imageAsset: t,
+  selectedSource: r,
+  videoAsset: n
+}) => {
+  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(() => {
+    if (!e) {
+      O(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) => {
+      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 () => {
+      h("requesting");
+      const x = await navigator.mediaDevices.getUserMedia(Re);
+      if (w) {
+        x.getTracks().forEach((I) => I.stop());
+        return;
+      }
+      m = 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));
+    }, 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));
+    }, 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));
+    };
+    return y(), (async () => {
+      try {
+        if (r === "webcam") {
+          await T();
+          return;
+        }
+        if (r === "video") {
+          if (!(n != null && n.src)) throw new Error("Missing video source");
+          await R(n.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}`);
+      }
+    })(), () => {
+      w = !0, y();
+    };
+  }, [e, t, r, n]), {
+    videoRef: o,
+    imageRef: i,
+    stream: a,
+    mediaSize: l,
+    status: d,
+    error: b
+  };
+}, qe = ({
+  enabled: e,
+  imageRef: t,
+  selectedSource: r,
+  status: n,
+  videoRef: o
+}) => {
+  const [i, a] = S(null);
+  return F(() => {
+    if (!e || n !== "ready") {
+      a((c) => (c == null || c.dispose(), null));
+      return;
+    }
+    const s = r === "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)), () => {
+      l.dispose();
+    };
+  }, [e, t, r, n, o]), i;
+}, Ne = ({
+  externalTracker: e,
+  imageOptions: t,
+  layout: r,
+  managesOwnMedia: n,
+  mediaError: o,
+  mediaFitMode: i,
+  mediaSize: a,
+  mediaStatus: s,
+  mirrored: l,
+  selectedImage: c,
+  selectedImageId: d,
+  selectedSource: h,
+  selectedVideo: b,
+  selectedVideoId: f,
+  setMirrored: w,
+  setSelectedImageId: m,
+  setSelectedSource: p,
+  setSelectedVideoId: y,
+  setShowMediaControls: T,
+  showMediaControls: R,
+  tracker: v,
+  videoOptions: E,
+  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;
+  return {
+    activeDelegate: n ? v.activeDelegate : null,
+    faces: n ? v.faces : e.faces,
+    imageOptions: t,
+    layout: r,
+    mediaError: o,
+    mediaFitMode: i,
+    mediaLabel: u,
+    mediaStatus: s,
+    mirrored: l,
+    selectedImageId: d,
+    selectedSource: h,
+    selectedVideoId: f,
+    setMirrored: w,
+    setSelectedImageId: m,
+    setSelectedSource: p,
+    setSelectedVideoId: y,
+    setShowMediaControls: T,
+    showMediaControls: R,
+    trackerError: n ? v.error : null,
+    trackerStatus: n ? v.status : e.trackerStatus,
+    videoOptions: E,
+    viewportSize: x,
+    mediaSize: a
+  };
+}, Ue = ({
+  mediaTexture: e,
+  previewMode: t,
+  renderOutputs: r,
+  sceneRenderOutputs: n
+}) => q(
+  () => ({
+    requested: r,
+    previewMode: t,
+    mediaColorTexture: e,
+    sceneColorTexture: n.sceneColorTexture,
+    finalColorTexture: r.finalColor ? n.sceneColorTexture : null,
+    sceneDepthTexture: n.sceneDepthTexture,
+    estimatedDepthTexture: null,
+    available: {
+      mediaColor: e !== null,
+      sceneColor: n.sceneColorTexture !== null,
+      finalColor: !!(r.finalColor && n.sceneColorTexture),
+      sceneDepth: n.sceneDepthTexture !== null,
+      estimatedDepth: !1
+    }
+  }),
+  [e, t, r, n]
+), je = ({
+  fitMode: e,
+  imageOptions: t,
+  initialImageId: r,
+  initialMirrored: n,
+  initialSource: o,
+  initialVideoId: i,
+  mediaStrategy: a,
+  previewMode: s,
+  renderOutputs: l,
+  showMediaControlsByDefault: c,
+  source: d,
+  videoOptions: h
+}) => {
+  const b = L(null), f = L(null), w = He(b), m = q(
+    () => Be({
+      imageOptions: t,
+      initialImageId: r,
+      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({
+    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,
+    selectedSource: v,
+    videoAsset: Y
+  }), H = Ae(e, v), B = q(
+    () => We(M.mediaSize, w, H),
+    [M.mediaSize, H, w]
+  ), oe = qe({
+    enabled: !!(l.mediaColor || l.finalColor),
+    imageRef: M.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,
+    selectedSource: v,
+    sourceStream: M.stream,
+    videoRef: M.videoRef
+  }), ae = _e({
+    enabled: !k,
+    selectedSource: v
+  }), se = Ne({
+    externalTracker: ae,
+    imageOptions: t,
+    layout: B,
+    managesOwnMedia: k,
+    mediaError: M.error,
+    mediaFitMode: H,
+    mediaSize: M.mediaSize,
+    mediaStatus: M.status,
+    mirrored: _,
+    selectedImage: G,
+    selectedImageId: x,
+    selectedSource: v,
+    selectedVideo: Y,
+    selectedVideoId: I,
+    setMirrored: y,
+    setSelectedImageId: u,
+    setSelectedSource: E,
+    setSelectedVideoId: C,
+    setShowMediaControls: R,
+    showMediaControls: T,
+    tracker: ie,
+    videoOptions: h,
+    viewportSize: w
+  }), le = Ue({
+    mediaTexture: oe,
+    previewMode: s,
+    renderOutputs: l,
+    sceneRenderOutputs: K
+  });
+  return {
+    containerRef: b,
+    displayCanvasRef: f,
+    displayMirrored: _,
+    layout: B,
+    managesOwnMedia: k,
+    media: M,
+    renderOutputState: le,
+    renderState: se,
+    selectedImageId: x,
+    selectedSource: v,
+    selectedVideoId: I,
+    setSceneRenderOutputs: A,
+    setSelectedImageId: u,
+    setSelectedSource: E,
+    setSelectedVideoId: C,
+    showMediaControls: T,
+    viewportSize: w
+  };
+}, U = ({ children: e }) => /* @__PURE__ */ g(P, { children: e });
+U.displayName = "XRViewport.Scene";
+const j = ({ children: e }) => /* @__PURE__ */ g(P, { children: e });
+j.displayName = "XRViewport.Overlay";
+const Ke = (e, t) => {
+  if (e === "dom")
+    return {
+      sceneContent: null,
+      overlayContent: t
+    };
+  let r = null, n = null;
+  const o = [];
+  return ge.forEach(t, (i) => {
+    var s;
+    if (!be(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;
+      return;
+    }
+    if (a === j.displayName) {
+      n = i.props.children;
+      return;
+    }
+    o.push(i);
+  }), !n && o.length > 0 && (n = o), {
+    sceneContent: r,
+    overlayContent: n
   };
-}, oe = ({
+}, Z = (e, t) => typeof e == "function" ? e(t) : e;
+function Ge(e) {
+  return e.Scene = U, e.Overlay = j, e;
+}
+const ct = Ge(({
   children: e,
   fitMode: t = "auto",
-  imageOptions: n = [],
-  initialImageId: a,
-  initialMirrored: r = !0,
+  imageOptions: r = [],
+  initialImageId: n,
+  initialMirrored: o = !0,
   initialSource: i = "webcam",
-  initialVideoId: s,
-  mediaStrategy: o = "internal",
-  mediaDock: h = "bottom-left",
-  mode: m = "dom",
-  showMediaControlsByDefault: d = !0,
-  source: g,
-  style: p,
-  videoOptions: c = []
+  initialVideoId: a,
+  mediaStrategy: s = "internal",
+  mediaDock: l = "bottom-left",
+  mode: c = "dom",
+  previewMode: d = "finalColor",
+  renderOutputs: h = {},
+  showMediaControlsByDefault: b = !0,
+  source: f,
+  style: w,
+  videoOptions: m = []
 }) => {
-  const b = k(null), w = k(null), S = Be(b), v = G(
-    () => De({
-      imageOptions: n,
-      initialImageId: a,
-      initialSource: i,
-      initialVideoId: s,
-      source: g,
-      videoOptions: c
-    }),
-    [n, a, i, s, g, c]
-  ), [A, I] = y(r), [F, L] = y(d), [u, l] = y(
-    v.selectedSource
-  ), [C, x] = y(v.selectedImageId), [W, T] = y(v.selectedVideoId), E = o === "internal";
-  M(() => {
-    g && (l(v.selectedSource), x(v.selectedImageId), T(v.selectedVideoId));
-  }, [v, g]);
-  const B = n.find((U) => U.id === C) ?? n[0], H = c.find((U) => U.id === W) ?? c[0], R = He({
-    enabled: E,
-    imageAsset: B,
-    selectedSource: u,
-    videoAsset: H
-  }), N = Ve(t, u), V = G(
-    () => _e(R.mediaSize, S, N),
-    [R.mediaSize, N, S]
-  ), P = Me(u, A), D = ze({
-    displayMirrored: P,
-    enabled: E && R.status === "ready" && V !== null,
-    imageRef: R.imageRef,
-    layout: V,
-    selectedSource: u,
-    sourceStream: R.stream,
-    videoRef: R.videoRef
-  }), Y = Pe({
-    enabled: !E,
-    selectedSource: u
-  }), ae = u === "image" ? `${X.image.label}: ${(B == null ? void 0 : B.label) ?? ""}` : u === "video" ? `${X.video.label}: ${(H == null ? void 0 : H.label) ?? ""}` : X.webcam.label, _ = {
-    activeDelegate: E ? D.activeDelegate : null,
-    faces: E ? D.faces : Y.faces,
-    imageOptions: n,
-    layout: V,
-    mediaError: R.error,
-    mediaFitMode: N,
-    mediaLabel: ae,
-    mediaStatus: R.status,
-    mirrored: P,
-    selectedImageId: C,
-    selectedSource: u,
-    selectedVideoId: W,
-    setMirrored: I,
-    setSelectedImageId: x,
-    setSelectedSource: l,
-    setSelectedVideoId: T,
-    setShowMediaControls: L,
-    showMediaControls: F,
-    trackerError: E ? D.error : null,
-    trackerStatus: E ? D.status : Y.trackerStatus,
-    videoOptions: c,
-    viewportSize: S,
-    mediaSize: R.mediaSize
-  }, se = typeof e == "function" ? e(_) : e, { sceneContent: le, overlayContent: ce } = $e(m, se), de = Z(
-    le,
-    _
-  ), ue = Z(
-    ce,
-    _
+  const p = je({
+    fitMode: t,
+    imageOptions: r,
+    initialImageId: n,
+    initialMirrored: o,
+    initialSource: i,
+    initialVideoId: a,
+    mediaStrategy: s,
+    previewMode: d,
+    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(
+    R,
+    p.renderState
   );
-  return /* @__PURE__ */ f(ie.Provider, { value: _, children: /* @__PURE__ */ z(
-    "div",
+  return /* @__PURE__ */ g(ye.Provider, { value: p.renderState, children: /* @__PURE__ */ g(Ce.Provider, { value: p.renderOutputState, children: /* @__PURE__ */ g(
+    ke,
     {
-      ref: b,
-      style: {
-        position: "fixed",
-        inset: 0,
-        overflow: "hidden",
-        background: "#000",
-        ...p
-      },
-      children: [
-        /* @__PURE__ */ f(
-          qe,
-          {
-            imageRef: R.imageRef,
-            selectedSource: u,
-            videoRef: R.videoRef
-          }
-        ),
-        m === "dom" && E && /* @__PURE__ */ f(
-          Se,
-          {
-            canvasRef: w,
-            imageRef: R.imageRef,
-            videoRef: R.videoRef,
-            layer: Xe,
-            layout: V,
-            mirrored: P,
-            sourceKind: u === "image" ? "image" : "video"
-          }
-        ),
-        (m === "r3f" || m === "hybrid") && /* @__PURE__ */ f($, { config: Le, children: /* @__PURE__ */ f(Ce, { renderTargetSize: S, style: { width: "100%", height: "100%" }, children: de }) }),
-        /* @__PURE__ */ z($, { config: Ae, children: [
-          E && /* @__PURE__ */ f(
-            Ne,
-            {
-              dock: h,
-              imageOptions: n,
-              selectedImageId: C,
-              selectedSource: u,
-              selectedVideoId: W,
-              setSelectedImageId: x,
-              setSelectedSource: l,
-              setSelectedVideoId: T,
-              showMediaControls: F,
-              videoOptions: c
-            }
-          ),
-          ue
-        ] })
-      ]
+      containerRef: p.containerRef,
+      displayCanvasRef: p.displayCanvasRef,
+      imageOptions: r,
+      imageRef: p.media.imageRef,
+      layout: p.layout,
+      managesOwnMedia: p.managesOwnMedia,
+      mediaDock: l,
+      mirrored: p.displayMirrored,
+      mode: c,
+      overlayContent: E,
+      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,
+      style: w,
+      videoOptions: m,
+      videoRef: p.media.videoRef,
+      viewportSize: p.viewportSize
     }
-  ) });
-};
-oe.Scene = K;
-oe.Overlay = O;
-const it = (e) => {
-  const [t, n] = y(null);
-  return M(() => {
-    let a = 0;
-    const r = () => {
-      var h, m;
-      a = requestAnimationFrame(r);
-      const i = (m = (h = e == null ? void 0 : e.detectionResults) == null ? void 0 : h.faceLandmarks) == null ? void 0 : m[0];
+  ) }) });
+}), Ye = {
+  position: "absolute",
+  top: -28,
+  left: 0,
+  background: "rgba(34, 197, 94, 0.9)",
+  color: "#04130a",
+  fontFamily: "Menlo, Monaco, Consolas, monospace",
+  fontSize: 12,
+  fontWeight: 700,
+  padding: "4px 8px",
+  whiteSpace: "nowrap"
+}, dt = ({
+  boundingBox: e,
+  label: t = "face bounding box",
+  color: r = "#22c55e",
+  style: n,
+  labelStyle: o
+}) => /* @__PURE__ */ g(
+  "div",
+  {
+    style: {
+      position: "absolute",
+      left: `${e.left * 100}%`,
+      top: `${e.top * 100}%`,
+      width: `${e.width * 100}%`,
+      height: `${e.height * 100}%`,
+      border: `3px solid ${r}`,
+      boxSizing: "border-box",
+      pointerEvents: "none",
+      zIndex: 20,
+      ...n
+    },
+    children: t !== null && /* @__PURE__ */ g("div", { style: { ...Ye, ...o }, children: t })
+  }
+), ut = (e) => {
+  const [t, r] = S(null);
+  return F(() => {
+    let n = 0;
+    const o = () => {
+      var l, c;
+      n = 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) {
-        n(null);
+        r(null);
         return;
       }
-      const s = xe(i), o = {
-        left: s.minX,
-        top: s.minY,
-        width: s.width,
-        height: s.height
+      const a = we(i), s = {
+        left: a.minX,
+        top: a.minY,
+        width: a.width,
+        height: a.height
       };
-      n((d) => d && d.left === o.left && d.top === o.top && d.width === o.width && d.height === o.height ? d : o);
+      r((d) => d && d.left === s.left && d.top === s.top && d.width === s.width && d.height === s.height ? d : s);
     };
-    return r(), () => {
-      cancelAnimationFrame(a);
+    return o(), () => {
+      cancelAnimationFrame(n);
     };
   }, [e]), t;
-}, ot = ["fill", "contain"];
+}, ht = ({
+  background: e = "#000",
+  children: t,
+  style: r
+}) => /* @__PURE__ */ g(
+  "div",
+  {
+    style: {
+      position: "fixed",
+      inset: 0,
+      overflow: "hidden",
+      background: e,
+      ...r
+    },
+    children: t
+  }
+), pt = (e) => {
+  const { makeDefault: t = !0, ...r } = e;
+  return /* @__PURE__ */ g(
+    xe,
+    {
+      position: [0, 0, 40],
+      fov: 30,
+      near: 0.1,
+      far: 1e3,
+      makeDefault: t,
+      ...r
+    }
+  );
+}, 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();
+}
 export {
-  Ze as BoundingBoxOverlay,
-  lt as HeadTracker,
-  et as PerspectiveCamera,
-  vt as ScreenRectAspectContext,
-  ot as TEXTURE_FITS,
-  tt as XRCompositor,
-  $ as XRLayer,
+  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,
-  rt as XRTrackingOverlay,
-  oe as XRViewport,
-  xe as computeLandmarkBounds,
-  xt as computeScreenTransform,
-  bt as hasFullUnitUVBounds,
-  Me as resolveCalibrationFaceDisplayMirrored,
-  ze as useCalibrationFaceTracker,
-  it as useFaceBoundingBox,
-  yt as useScreenSpace,
-  ct as useTrackerContext,
-  ut as useXRCameraTexture,
-  ye as useXRContext,
-  ht as useXRError,
+  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,
-  me as useXRModelNode,
-  mt as useXRPipelineSnapshot,
-  ft as useXRReady,
-  gt as useXRRenderSize,
-  nt as useXRViewportState
+  pe as useXRModelNode,
+  Mt as useXRPipelineSnapshot,
+  Tt as useXRReady,
+  Ft as useXRRenderSize,
+  qt as useXRViewportRenderOutputs,
+  Nt as useXRViewportState
 };