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

package/dist/low-level.js

@@ -1,14 +1,1046 @@
-import { H as T, u as F } from "./index-BGNbrc4C.js";
-import { u as P } from "./useXRModel-BMJE1hrk.js";
-import { b as E, a as z, d as L, e as V, u as A, c as I } from "./selectors-CXd_x-6t.js";
-import { useState as d, useEffect as m } from "react";
-import { c as f } from "./useFaceResults-cpsSmKKc.js";
-import { S as U, X as D, a as H, d as j, b as q, c as W, r as Y, g as _, u as G, f as J, e as K } from "./index-O-2crZ3M.js";
-import { h as Z } from "./hasFullUnitUVBounds-BGvcFsQM.js";
-import { u as ee } from "./index-safCs_af.js";
-import { jsx as u } from "react/jsx-runtime";
-import { PerspectiveCamera as h } from "@react-three/drei";
-const x = {
+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: n
+}) => /* @__PURE__ */ g(
+  "div",
+  {
+    "data-render-target": t.name,
+    style: {
+      position: "absolute",
+      inset: 0,
+      overflow: "hidden",
+      background: t.clearColor,
+      pointerEvents: t.pointerEvents ?? "none",
+      zIndex: t.zIndex,
+      opacity: t.hidden ? 0 : 1,
+      ...n
+    },
+    children: e
+  }
+), q = ({
+  canvas: e,
+  layout: t,
+  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), 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: n = 30,
+  imageRef: r,
+  layout: o,
+  mirrored: i,
+  sourceKind: a,
+  videoRef: s
+}) => {
+  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 = 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 p = r.current;
+        if (!p || !p.complete || p.naturalWidth <= 0 || p.naturalHeight <= 0)
+          return;
+        q({
+          canvas: f,
+          layout: o,
+          media: p,
+          mirrored: i
+        });
+        return;
+      }
+      const w = s.current;
+      !w || w.readyState < 2 || w.videoWidth <= 0 || w.videoHeight <= 0 || q({
+        canvas: f,
+        layout: o,
+        media: w,
+        mirrored: i
+      });
+    };
+    return l = requestAnimationFrame(h), () => {
+      cancelAnimationFrame(l);
+    };
+  }, [e, t, n, r, o, i, a, s]);
+}, xe = ({
+  canvasRef: e,
+  imageRef: t,
+  layer: n,
+  layout: r,
+  mirrored: o,
+  sourceKind: i,
+  videoRef: a
+}) => (te({
+  canvasRef: e,
+  imageRef: t,
+  layout: r,
+  mirrored: o,
+  sourceKind: i,
+  videoRef: a
+}), /* @__PURE__ */ g(B, { config: n, children: /* @__PURE__ */ g(
+  "canvas",
+  {
+    ref: e,
+    style: {
+      position: "absolute",
+      inset: 0,
+      width: "100%",
+      height: "100%",
+      display: "block",
+      background: "#000"
+    }
+  }
+) })), tt = ({
+  canvasRef: e,
+  controlInsetTop: t,
+  debugVisible: n,
+  fps: r = 15,
+  imageRef: o,
+  layer: i,
+  layout: a,
+  mirrored: s,
+  sourceKind: l,
+  videoRef: c,
+  viewportSize: d
+}) => {
+  te({
+    canvasRef: e,
+    enabled: n,
+    fps: r,
+    imageRef: o,
+    layout: a,
+    mirrored: s,
+    sourceKind: l,
+    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(B, { config: i, children: /* @__PURE__ */ g(
+    "canvas",
+    {
+      ref: e,
+      style: {
+        position: "absolute",
+        left: 16,
+        top: f,
+        width: n ? h : 1,
+        height: n ? "auto" : 1,
+        aspectRatio: `${b}`,
+        opacity: n ? 0.85 : 0,
+        borderRadius: 10,
+        border: n ? "1px solid rgba(255,255,255,0.16)" : "none",
+        pointerEvents: "none",
+        objectFit: "contain",
+        background: "#000"
+      }
+    }
+  ) });
+}, ve = {
+  audio: !1,
+  video: {
+    facingMode: "user",
+    frameRate: { ideal: 30, max: 60 }
+  }
+}, ye = {
+  name: "viewport-live",
+  clearColor: "#000000",
+  pointerEvents: "none",
+  zIndex: 0
+}, Ce = {
+  name: "viewport-ui",
+  clearColor: "transparent",
+  pointerEvents: "auto",
+  zIndex: 5
+}, Se = {
+  name: "viewport-scene",
+  clearColor: "transparent",
+  pointerEvents: "auto",
+  zIndex: 1
+}, A = {
+  webcam: { icon: "◉", label: "Webcam" },
+  image: { icon: "▣", label: "Images" },
+  video: { icon: "▶", label: "Videos" }
+}, Re = ({
+  imageRef: e,
+  selectedSource: t,
+  videoRef: n
+}) => /* @__PURE__ */ k(W, { children: [
+  /* @__PURE__ */ g(
+    "video",
+    {
+      ref: n,
+      style: {
+        position: "absolute",
+        width: 1,
+        height: 1,
+        opacity: t === "image" ? 0 : 1e-3,
+        pointerEvents: "none"
+      }
+    }
+  ),
+  /* @__PURE__ */ g(
+    "img",
+    {
+      ref: e,
+      alt: "",
+      style: {
+        position: "absolute",
+        width: 1,
+        height: 1,
+        opacity: t === "image" ? 1e-3 : 0,
+        pointerEvents: "none"
+      }
+    }
+  )
+] }), Y = ({
+  dock: e,
+  label: t,
+  onChange: n,
+  options: r,
+  value: o
+}) => /* @__PURE__ */ g(
+  "div",
+  {
+    style: {
+      position: "absolute",
+      top: e === "top-left" ? 74 : void 0,
+      bottom: e === "bottom-left" ? 74 : void 0,
+      left: 16,
+      zIndex: 5,
+      maxWidth: "calc(100vw - 32px)",
+      padding: 10,
+      borderRadius: 14,
+      background: "rgba(15, 23, 42, 0.72)",
+      border: "1px solid rgba(255,255,255,0.12)",
+      boxShadow: "0 12px 30px rgba(0,0,0,0.18)",
+      backdropFilter: "blur(10px)"
+    },
+    children: /* @__PURE__ */ k(
+      "label",
+      {
+        style: {
+          display: "grid",
+          gap: 6,
+          color: "#e5eefb",
+          fontSize: 12,
+          fontWeight: 700
+        },
+        children: [
+          /* @__PURE__ */ g("span", { children: t }),
+          /* @__PURE__ */ g(
+            "select",
+            {
+              value: o,
+              onChange: (i) => n(i.target.value),
+              style: {
+                minWidth: 180,
+                maxWidth: "calc(100vw - 52px)",
+                height: 36,
+                borderRadius: 10,
+                border: "1px solid rgba(255,255,255,0.12)",
+                background: "rgba(255,255,255,0.06)",
+                color: "#e5eefb",
+                padding: "0 10px"
+              },
+              children: r.map((i) => /* @__PURE__ */ g("option", { value: i.id, style: { color: "#111827" }, children: i.label }, i.id))
+            }
+          )
+        ]
+      }
+    )
+  }
+), Ie = ({
+  dock: e,
+  imageOptions: t,
+  selectedImageId: n,
+  selectedSource: r,
+  selectedVideoId: o,
+  setSelectedImageId: i,
+  setSelectedSource: a,
+  setSelectedVideoId: s,
+  showMediaControls: l,
+  videoOptions: c
+}) => {
+  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: () => h(!1),
+      "aria-label": "Open media controls",
+      title: "Open media controls",
+      style: {
+        position: "absolute",
+        top: e === "top-left" ? 16 : void 0,
+        bottom: e === "bottom-left" ? 16 : void 0,
+        left: 16,
+        zIndex: 5,
+        width: 40,
+        height: 40,
+        border: "1px solid rgba(255,255,255,0.12)",
+        borderRadius: 999,
+        background: "rgba(15, 23, 42, 0.72)",
+        color: "#e5eefb",
+        boxShadow: "0 12px 30px rgba(0,0,0,0.18)",
+        backdropFilter: "blur(10px)",
+        cursor: "pointer"
+      },
+      children: "≡"
+    }
+  ) : /* @__PURE__ */ k(W, { children: [
+    /* @__PURE__ */ k(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: e === "top-left" ? 16 : void 0,
+          bottom: e === "bottom-left" ? 16 : void 0,
+          left: 16,
+          zIndex: 5,
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 8,
+          maxWidth: "calc(100vw - 32px)"
+        },
+        children: [
+          /* @__PURE__ */ g(
+            "div",
+            {
+              style: {
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 8,
+                padding: 8,
+                borderRadius: 999,
+                background: "rgba(15, 23, 42, 0.72)",
+                border: "1px solid rgba(255,255,255,0.12)",
+                boxShadow: "0 12px 30px rgba(0,0,0,0.18)",
+                backdropFilter: "blur(10px)",
+                overflowX: "auto"
+              },
+              children: b.map((f) => {
+                const w = f === r;
+                return /* @__PURE__ */ k(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => a(f),
+                    "aria-pressed": w,
+                    title: A[f].label,
+                    style: {
+                      border: "none",
+                      borderRadius: 999,
+                      minWidth: 42,
+                      height: 42,
+                      padding: "0 12px",
+                      display: "inline-flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      gap: 8,
+                      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__ */ 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
+                );
+              })
+            }
+          ),
+          /* @__PURE__ */ g(
+            "button",
+            {
+              type: "button",
+              onClick: () => h(!0),
+              "aria-label": "Close media controls",
+              title: "Close media controls",
+              style: {
+                width: 40,
+                height: 40,
+                border: "1px solid rgba(255,255,255,0.12)",
+                borderRadius: 999,
+                background: "rgba(15, 23, 42, 0.72)",
+                color: "#e5eefb",
+                boxShadow: "0 12px 30px rgba(0,0,0,0.18)",
+                backdropFilter: "blur(10px)",
+                cursor: "pointer",
+                flex: "0 0 auto"
+              },
+              children: "×"
+            }
+          )
+        ]
+      }
+    ),
+    r === "image" && t.length > 0 && /* @__PURE__ */ g(
+      Y,
+      {
+        dock: e,
+        label: "Image Asset",
+        options: t,
+        value: n,
+        onChange: i
+      }
+    ),
+    r === "video" && c.length > 0 && /* @__PURE__ */ g(
+      Y,
+      {
+        dock: e,
+        label: "Video Asset",
+        options: c,
+        value: o,
+        onChange: s
+      }
+    )
+  ] }) : null;
+}, Ee = ({
+  containerRef: e,
+  displayCanvasRef: t,
+  imageOptions: n,
+  imageRef: r,
+  layout: o,
+  managesOwnMedia: i,
+  mediaDock: a,
+  mode: s,
+  overlayContent: l,
+  renderOutputs: c,
+  sceneContent: d,
+  selectedImageId: h,
+  selectedSource: b,
+  selectedVideoId: f,
+  setSceneRenderOutputs: w,
+  setSelectedImageId: p,
+  setSelectedSource: m,
+  setSelectedVideoId: y,
+  showMediaControls: F,
+  style: R,
+  videoOptions: v,
+  videoRef: I,
+  viewportSize: x,
+  mirrored: u
+}) => /* @__PURE__ */ k(
+  "div",
+  {
+    ref: e,
+    style: {
+      position: "fixed",
+      inset: 0,
+      overflow: "hidden",
+      background: "#000",
+      ...R
+    },
+    children: [
+      /* @__PURE__ */ g(Re, { imageRef: r, selectedSource: b, videoRef: I }),
+      s === "dom" && i && /* @__PURE__ */ g(
+        xe,
+        {
+          canvasRef: t,
+          imageRef: r,
+          videoRef: I,
+          layer: ye,
+          layout: o,
+          mirrored: u,
+          sourceKind: b === "image" ? "image" : "video"
+        }
+      ),
+      (s === "r3f" || s === "hybrid") && /* @__PURE__ */ g(B, { config: Se, children: /* @__PURE__ */ g(
+        ge,
+        {
+          onRenderOutputs: w,
+          renderOutputs: {
+            sceneColor: c.sceneColor || c.finalColor,
+            sceneDepth: c.sceneDepth
+          },
+          renderTargetSize: x,
+          style: { width: "100%", height: "100%" },
+          children: d
+        }
+      ) }),
+      /* @__PURE__ */ k(B, { config: Ce, children: [
+        i && /* @__PURE__ */ g(
+          Ie,
+          {
+            dock: a,
+            imageOptions: n,
+            selectedImageId: h,
+            selectedSource: b,
+            selectedVideoId: f,
+            setSelectedImageId: p,
+            setSelectedSource: m,
+            setSelectedVideoId: y,
+            showMediaControls: F,
+            videoOptions: v
+          }
+        ),
+        l
+      ] })
+    ]
+  }
+), Te = 5, Fe = 1, Me = (e, t) => t, ze = "brightness(2.2) contrast(1.5) saturate(1.25)", Xe = ({
+  enabled: e,
+  displayMirrored: t,
+  imageRef: n,
+  layout: r,
+  mode: o,
+  numFaces: i,
+  selectedSource: a,
+  sourceStream: s,
+  videoRef: l
+}) => {
+  const { session: c } = se(), d = X(null), h = X(!1), b = X(document.createElement("canvas")), {
+    ready: f,
+    node: w,
+    error: p
+  } = le(O.FACE_TRACKER, {
+    numFaces: i ?? (o === "head-binding" ? Fe : Te)
+  }), [m, y] = S("idle"), [F, R] = S(null), v = e && f && !!w, I = ee({
+    node: v ? w : null,
+    enabled: v,
+    selectedSource: a,
+    onFrame: de(() => {
+      R(null), y("ready");
+    }, [])
+  });
+  return M(() => {
+    if (!e || !r) return;
+    const x = () => {
+      const C = a === "image" ? n.current : l.current;
+      if (C) {
+        if (C instanceof HTMLImageElement) {
+          if (!C.complete || C.naturalWidth <= 0 || C.naturalHeight <= 0) return;
+        } else if (C.readyState < 2 || C.videoWidth <= 0 || C.videoHeight <= 0)
+          return;
+        q({
+          canvas: b.current,
+          layout: r,
+          media: C,
+          mirrored: t,
+          filter: a === "webcam" ? ze : void 0
+        });
+      }
+    };
+    if (a === "image") {
+      x();
+      return;
+    }
+    let u = 0;
+    const E = () => {
+      u = requestAnimationFrame(E), x();
+    };
+    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 (!r) {
+      y("initializing");
+      return;
+    }
+    const x = (s == null ? void 0 : s.id) ?? (((V = l.current) == null ? void 0 : V.srcObject) instanceof MediaStream ? l.current.srcObject.id : "none"), E = a === "webcam" ? `webcam:${x}` : a;
+    d.current !== E && (h.current = !1, d.current = E);
+    let C = !1;
+    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 (z) {
+        if (C) return;
+        y("error"), R(z instanceof Error ? z.message : "Failed to initialize SDK face tracking");
+      }
+    })(), () => {
+      C = !0;
+    };
+  }, [e, r, a, c, s, l]), M(() => {
+    !v && e && !p && y("initializing");
+  }, [v, e, p]), M(() => {
+    p && (y("error"), R(p.message));
+  }, [p]), M(() => () => {
+    h.current = !1, c.stop();
+  }, [c]), {
+    activeDelegate: "GPU",
+    faces: I,
+    status: m,
+    error: F
+  };
+}, ke = (e, t) => e === "auto" ? t === "webcam" ? "cover" : "contain" : e, Ae = ({
+  imageOptions: e,
+  initialImageId: t,
+  initialSource: n,
+  initialVideoId: r,
+  source: o,
+  videoOptions: i
+}) => {
+  var l, c, d, h;
+  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) ?? "" : r ?? ((h = i[0]) == null ? void 0 : h.id) ?? ""
+  };
+}, Le = (e, t, n) => {
+  if (e.width <= 0 || e.height <= 0 || t.width <= 0 || t.height <= 0)
+    return null;
+  const r = n === "contain" ? Math.min(t.width / e.width, t.height / e.height) : Math.max(t.width / e.width, t.height / e.height), o = e.width * r, i = e.height * r;
+  return {
+    source: e,
+    destination: t,
+    drawWidth: o,
+    drawHeight: i,
+    offsetX: (t.width - o) * 0.5,
+    offsetY: (t.height - i) * 0.5,
+    scale: r
+  };
+}, Ve = (e) => {
+  if (!e) return { width: 0, height: 0 };
+  const t = e.getBoundingClientRect();
+  return {
+    width: t.width || e.clientWidth,
+    height: t.height || e.clientHeight
+  };
+}, 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 = Ve(r);
+      n(
+        (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(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;
+}, Be = ({
+  enabled: e,
+  selectedSource: t
+}) => {
+  const n = ce(O.FACE_TRACKER);
+  return {
+    faces: ee({ node: n, enabled: e, selectedSource: t }),
+    trackerStatus: n ? "ready" : "idle"
+  };
+}, J = (e) => {
+  e && (e.pause(), e.removeAttribute("src"), e.srcObject = null, e.load());
+}, Q = (e) => {
+  e && e.removeAttribute("src");
+}, We = ({
+  enabled: e,
+  imageAsset: t,
+  selectedSource: n,
+  videoAsset: r
+}) => {
+  const o = X(null), i = X(null), [a, s] = S(null), [l, c] = S({ width: 0, height: 0 }), [d, h] = S("idle"), [b, f] = S(null);
+  return M(() => {
+    if (!e) {
+      J(o.current), Q(i.current), s(null), c({ width: 0, height: 0 }), h("idle"), f(null);
+      return;
+    }
+    let w = !1, p = null;
+    const m = (x, u) => {
+      w || (c({ width: x, height: u }), h("ready"), f(null));
+    }, y = () => {
+      J(o.current), Q(i.current), p == null || p.getTracks().forEach((x) => x.stop()), p = null, s(null);
+    }, F = async () => {
+      h("requesting");
+      const x = await navigator.mediaDevices.getUserMedia(ve);
+      if (w) {
+        x.getTracks().forEach((E) => E.stop());
+        return;
+      }
+      p = x, s(x);
+      const u = o.current;
+      u && (u.srcObject = x, u.muted = !0, u.playsInline = !0, u.autoplay = !0, await u.play(), m(u.videoWidth, u.videoHeight));
+    }, R = async (x) => {
+      h("requesting"), s(null);
+      const u = o.current;
+      u && (u.src = x, u.muted = !0, u.loop = !0, u.playsInline = !0, u.autoplay = !0, u.crossOrigin = "anonymous", await u.play(), m(u.videoWidth, u.videoHeight));
+    }, v = async (x) => {
+      h("requesting"), s(null);
+      const u = i.current;
+      u && (await new Promise((E, C) => {
+        u.onload = () => E(), u.onerror = () => C(new Error("Unable to load image")), u.src = x;
+      }), m(u.naturalWidth, u.naturalHeight));
+    };
+    return y(), (async () => {
+      try {
+        if (n === "webcam") {
+          await F();
+          return;
+        }
+        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 ${n}`);
+      }
+    })(), () => {
+      w = !0, y();
+    };
+  }, [e, t, n, r]), {
+    videoRef: o,
+    imageRef: i,
+    stream: a,
+    mediaSize: l,
+    status: d,
+    error: b
+  };
+}, _e = ({
+  enabled: e,
+  imageRef: t,
+  selectedSource: n,
+  status: r,
+  videoRef: o
+}) => {
+  const [i, a] = S(null);
+  return M(() => {
+    if (!e || r !== "ready") {
+      a((c) => (c == null || c.dispose(), null));
+      return;
+    }
+    const s = n === "image" ? t.current : o.current;
+    if (!s) return;
+    const l = n === "image" ? new L.Texture(s) : new L.VideoTexture(s);
+    return l.colorSpace = L.SRGBColorSpace, l.minFilter = L.LinearFilter, l.magFilter = L.LinearFilter, l.generateMipmaps = !1, l.needsUpdate = !0, a((c) => (c == null || c.dispose(), l)), () => {
+      l.dispose();
+    };
+  }, [e, t, n, r, o]), i;
+}, He = ({
+  externalTracker: e,
+  imageOptions: t,
+  layout: n,
+  managesOwnMedia: r,
+  mediaError: o,
+  mediaFitMode: i,
+  mediaSize: a,
+  mediaStatus: s,
+  mirrored: l,
+  selectedImage: c,
+  selectedImageId: d,
+  selectedSource: h,
+  selectedVideo: b,
+  selectedVideoId: f,
+  setMirrored: w,
+  setSelectedImageId: p,
+  setSelectedSource: m,
+  setSelectedVideoId: y,
+  setShowMediaControls: F,
+  showMediaControls: R,
+  tracker: v,
+  videoOptions: I,
+  viewportSize: x
+}) => {
+  const u = h === "image" ? `${A.image.label}: ${(c == null ? void 0 : c.label) ?? ""}` : h === "video" ? `${A.video.label}: ${(b == null ? void 0 : b.label) ?? ""}` : A.webcam.label;
+  return {
+    activeDelegate: r ? v.activeDelegate : null,
+    faces: r ? v.faces : e.faces,
+    imageOptions: t,
+    layout: n,
+    mediaError: o,
+    mediaFitMode: i,
+    mediaLabel: u,
+    mediaStatus: s,
+    mirrored: l,
+    selectedImageId: d,
+    selectedSource: h,
+    selectedVideoId: f,
+    setMirrored: w,
+    setSelectedImageId: p,
+    setSelectedSource: m,
+    setSelectedVideoId: y,
+    setShowMediaControls: F,
+    showMediaControls: R,
+    trackerError: r ? v.error : null,
+    trackerStatus: r ? v.status : e.trackerStatus,
+    videoOptions: I,
+    viewportSize: x,
+    mediaSize: a
+  };
+}, Pe = ({
+  mediaTexture: e,
+  previewMode: t,
+  renderOutputs: n,
+  sceneRenderOutputs: r
+}) => $(
+  () => ({
+    requested: n,
+    previewMode: t,
+    mediaColorTexture: e,
+    sceneColorTexture: r.sceneColorTexture,
+    finalColorTexture: n.finalColor ? r.sceneColorTexture : null,
+    sceneDepthTexture: r.sceneDepthTexture,
+    estimatedDepthTexture: null,
+    available: {
+      mediaColor: e !== null,
+      sceneColor: r.sceneColorTexture !== null,
+      finalColor: !!(n.finalColor && r.sceneColorTexture),
+      sceneDepth: r.sceneDepthTexture !== null,
+      estimatedDepth: !1
+    }
+  }),
+  [e, t, n, r]
+), $e = ({
+  fitMode: e,
+  imageOptions: t,
+  initialImageId: n,
+  initialMirrored: r,
+  initialSource: o,
+  initialVideoId: i,
+  mediaStrategy: a,
+  previewMode: s,
+  renderOutputs: l,
+  showMediaControlsByDefault: c,
+  source: d,
+  videoOptions: h
+}) => {
+  const b = X(null), f = X(null), w = De(b), p = $(
+    () => Ae({
+      imageOptions: t,
+      initialImageId: n,
+      initialSource: o,
+      initialVideoId: i,
+      source: d,
+      videoOptions: h
+    }),
+    [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
+  }), 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: G
+  }), _ = ke(e, v), D = $(
+    () => Le(T.mediaSize, w, _),
+    [T.mediaSize, _, w]
+  ), re = _e({
+    enabled: !!(l.mediaColor || l.finalColor),
+    imageRef: T.imageRef,
+    selectedSource: v,
+    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: T.stream,
+    videoRef: T.videoRef
+  }), oe = Be({
+    enabled: !z,
+    selectedSource: v
+  }), ie = He({
+    externalTracker: oe,
+    imageOptions: t,
+    layout: D,
+    managesOwnMedia: z,
+    mediaError: T.error,
+    mediaFitMode: _,
+    mediaSize: T.mediaSize,
+    mediaStatus: T.status,
+    mirrored: H,
+    selectedImage: K,
+    selectedImageId: x,
+    selectedSource: v,
+    selectedVideo: G,
+    selectedVideoId: E,
+    setMirrored: y,
+    setSelectedImageId: u,
+    setSelectedSource: I,
+    setSelectedVideoId: C,
+    setShowMediaControls: R,
+    showMediaControls: F,
+    tracker: ne,
+    videoOptions: h,
+    viewportSize: w
+  }), ae = Pe({
+    mediaTexture: re,
+    previewMode: s,
+    renderOutputs: l,
+    sceneRenderOutputs: j
+  });
+  return {
+    containerRef: b,
+    displayCanvasRef: f,
+    displayMirrored: H,
+    layout: D,
+    managesOwnMedia: z,
+    media: T,
+    renderOutputState: ae,
+    renderState: ie,
+    selectedImageId: x,
+    selectedSource: v,
+    selectedVideoId: E,
+    setSceneRenderOutputs: V,
+    setSelectedImageId: u,
+    setSelectedSource: I,
+    setSelectedVideoId: C,
+    showMediaControls: F,
+    viewportSize: w
+  };
+}, U = ({ children: e }) => /* @__PURE__ */ g(W, { children: e });
+U.displayName = "XRViewport.Scene";
+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 n = null, r = null;
+  const o = [];
+  return he.forEach(t, (i) => {
+    var s;
+    if (!me(i)) {
+      i != null && o.push(i);
+      return;
+    }
+    const a = (s = i.type) == null ? void 0 : s.displayName;
+    if (a === U.displayName) {
+      n = i.props.children;
+      return;
+    }
+    if (a === N.displayName) {
+      r = i.props.children;
+      return;
+    }
+    o.push(i);
+  }), !r && o.length > 0 && (r = o), {
+    sceneContent: n,
+    overlayContent: r
+  };
+}, Z = (e, t) => typeof e == "function" ? e(t) : e;
+function Ue(e) {
+  return e.Scene = U, e.Overlay = N, e;
+}
+const rt = Ue(({
+  children: e,
+  fitMode: t = "auto",
+  imageOptions: n = [],
+  initialImageId: r,
+  initialMirrored: o = !0,
+  initialSource: i = "webcam",
+  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: p = []
+}) => {
+  const m = $e({
+    fitMode: t,
+    imageOptions: n,
+    initialImageId: r,
+    initialMirrored: o,
+    initialSource: i,
+    initialVideoId: a,
+    mediaStrategy: s,
+    previewMode: d,
+    renderOutputs: h,
+    showMediaControlsByDefault: b,
+    source: f,
+    videoOptions: p
+  }), y = typeof e == "function" ? e(m.renderState) : e, { sceneContent: F, overlayContent: R } = qe(c, y), v = Z(
+    F,
+    m.renderState
+  ), I = Z(
+    R,
+    m.renderState
+  );
+  return /* @__PURE__ */ g(be.Provider, { value: m.renderState, children: /* @__PURE__ */ g(we.Provider, { value: m.renderOutputState, children: /* @__PURE__ */ g(
+    Ee,
+    {
+      containerRef: m.containerRef,
+      displayCanvasRef: m.displayCanvasRef,
+      imageOptions: n,
+      imageRef: m.media.imageRef,
+      layout: m.layout,
+      managesOwnMedia: m.managesOwnMedia,
+      mediaDock: l,
+      mirrored: m.displayMirrored,
+      mode: c,
+      overlayContent: I,
+      renderOutputs: h,
+      sceneContent: v,
+      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: p,
+      videoRef: m.media.videoRef,
+      viewportSize: m.viewportSize
+    }
+  ) }) });
+}), Ne = {
   position: "absolute",
   top: -28,
   left: 0,
@@ -19,13 +1051,13 @@ const x = {
   fontWeight: 700,
   padding: "4px 8px",
   whiteSpace: "nowrap"
-}, b = ({
+}, nt = ({
   boundingBox: e,
   label: t = "face bounding box",
-  color: o = "#22c55e",
-  style: s,
-  labelStyle: n
-}) => /* @__PURE__ */ u(
+  color: n = "#22c55e",
+  style: r,
+  labelStyle: o
+}) => /* @__PURE__ */ g(
   "div",
   {
     style: {
@@ -34,29 +1066,43 @@ const x = {
       top: `${e.top * 100}%`,
       width: `${e.width * 100}%`,
       height: `${e.height * 100}%`,
-      border: `3px solid ${o}`,
+      border: `3px solid ${n}`,
       boxSizing: "border-box",
       pointerEvents: "none",
       zIndex: 20,
-      ...s
+      ...r
     },
-    children: t !== null && /* @__PURE__ */ u("div", { style: { ...x, ...n }, children: t })
+    children: t !== null && /* @__PURE__ */ g("div", { style: { ...Ne, ...o }, children: t })
   }
-), v = (e) => {
-  const { makeDefault: t = !0, ...o } = e, s = {
-    position: [0, 0, 40],
-    fov: 30,
-    near: 0.1,
-    far: 1e3,
-    makeDefault: t,
-    ...o
-  };
-  return /* @__PURE__ */ u(h, { ...s });
-}, w = ({
+), ot = (e) => {
+  const [t, n] = S(null);
+  return M(() => {
+    let r = 0;
+    const o = () => {
+      var l, c;
+      r = requestAnimationFrame(o);
+      const i = (c = (l = e == null ? void 0 : e.detectionResults) == null ? void 0 : l.faceLandmarks) == null ? void 0 : c[0];
+      if (!i || i.length === 0) {
+        n(null);
+        return;
+      }
+      const a = fe(i), s = {
+        left: a.minX,
+        top: a.minY,
+        width: a.width,
+        height: a.height
+      };
+      n((d) => d && d.left === s.left && d.top === s.top && d.width === s.width && d.height === s.height ? d : s);
+    };
+    return o(), () => {
+      cancelAnimationFrame(r);
+    };
+  }, [e]), t;
+}, it = ({
   background: e = "#000",
   children: t,
-  style: o
-}) => /* @__PURE__ */ u(
+  style: n
+}) => /* @__PURE__ */ g(
   "div",
   {
     style: {
@@ -64,62 +1110,68 @@ const x = {
       inset: 0,
       overflow: "hidden",
       background: e,
-      ...o
+      ...n
     },
     children: t
   }
-), C = (e) => {
-  const [t, o] = d(null);
-  return m(() => {
-    let s = 0;
-    const n = () => {
-      var l, c;
-      s = requestAnimationFrame(n);
-      const p = (c = (l = e == null ? void 0 : e.detectionResults) == null ? void 0 : l.faceLandmarks) == null ? void 0 : c[0];
-      if (!p || p.length === 0) {
-        o(null);
-        return;
-      }
-      const i = f(p), a = {
-        left: i.minX,
-        top: i.minY,
-        width: i.width,
-        height: i.height
-      };
-      o((r) => r && r.left === a.left && r.top === a.top && r.width === a.width && r.height === a.height ? r : a);
-    };
-    return n(), () => {
-      cancelAnimationFrame(s);
-    };
-  }, [e]), t;
-}, y = ["fill", "contain"];
+), at = (e) => {
+  const { makeDefault: t = !0, ...n } = e;
+  return /* @__PURE__ */ g(
+    pe,
+    {
+      position: [0, 0, 40],
+      fov: 30,
+      near: 0.1,
+      far: 1e3,
+      makeDefault: t,
+      ...n
+    }
+  );
+}, st = ["fill", "contain"];
 export {
-  b as BoundingBoxOverlay,
-  T as HeadTracker,
-  v as PerspectiveCamera,
-  U as ScreenRectAspectContext,
-  y as TEXTURE_FITS,
-  w as XRCompositor,
-  D as XRLayer,
-  H as XRMediaSurface,
-  j as XRTrackingOverlay,
-  q as XRViewport,
-  f as computeLandmarkBounds,
-  W as computeScreenTransform,
-  Z as hasFullUnitUVBounds,
-  Y as resolveCalibrationFaceDisplayMirrored,
-  _ as useCalibrationFaceTracker,
-  C as useFaceBoundingBox,
-  G as useScreenSpace,
-  F as useTrackerContext,
-  E as useXRCameraTexture,
-  ee as useXRContext,
-  z as useXRError,
-  P as useXRModel,
-  L as useXRModelNode,
-  V as useXRPipelineSnapshot,
-  A as useXRReady,
-  I as useXRRenderSize,
-  J as useXRViewportRenderOutputs,
-  K as useXRViewportState
+  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,
+  Ut as useXRViewportState
 };