@vincentt-xr/sdk 2.0.0-alpha.0

package/dist/low-level.js

@@ -0,0 +1,941 @@
+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
+  }
+), $ = ({
+  children: e,
+  config: t,
+  style: n
+}) => /* @__PURE__ */ f(
+  "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
+  }
+), j = ({
+  canvas: e,
+  layout: t,
+  media: n,
+  mirrored: a,
+  filter: r
+}) => {
+  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));
+}, ne = ({
+  canvasRef: e,
+  enabled: t = !0,
+  fps: n = 30,
+  imageRef: a,
+  layout: r,
+  mirrored: i,
+  sourceKind: s,
+  videoRef: o
+}) => {
+  M(() => {
+    if (!t) {
+      const p = e.current, c = p == null ? void 0 : p.getContext("2d");
+      p && c && c.clearRect(0, 0, p.width, p.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)
+          return;
+        j({
+          canvas: c,
+          layout: r,
+          media: w,
+          mirrored: i
+        });
+        return;
+      }
+      const b = o.current;
+      !b || b.readyState < 2 || b.videoWidth <= 0 || b.videoHeight <= 0 || j({
+        canvas: c,
+        layout: r,
+        media: b,
+        mirrored: i
+      });
+    };
+    return h = requestAnimationFrame(g), () => {
+      cancelAnimationFrame(h);
+    };
+  }, [e, t, n, a, r, i, s, o]);
+}, Se = ({
+  canvasRef: e,
+  imageRef: t,
+  layer: n,
+  layout: a,
+  mirrored: r,
+  sourceKind: i,
+  videoRef: s
+}) => (ne({
+  canvasRef: e,
+  imageRef: t,
+  layout: a,
+  mirrored: r,
+  sourceKind: i,
+  videoRef: s
+}), /* @__PURE__ */ f($, { config: n, children: /* @__PURE__ */ f(
+  "canvas",
+  {
+    ref: e,
+    style: {
+      position: "absolute",
+      inset: 0,
+      width: "100%",
+      height: "100%",
+      display: "block",
+      background: "#000"
+    }
+  }
+) })), rt = ({
+  canvasRef: e,
+  controlInsetTop: t,
+  debugVisible: n,
+  fps: a = 15,
+  imageRef: r,
+  layer: i,
+  layout: s,
+  mirrored: o,
+  sourceKind: h,
+  videoRef: m,
+  viewportSize: d
+}) => {
+  ne({
+    canvasRef: e,
+    enabled: n,
+    fps: a,
+    imageRef: r,
+    layout: s,
+    mirrored: o,
+    sourceKind: h,
+    videoRef: m
+  });
+  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(
+    "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,
+        borderRadius: 10,
+        border: n ? "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 = {
+  audio: !1,
+  video: {
+    facingMode: "user",
+    frameRate: { ideal: 30, max: 60 }
+  }
+}, Xe = {
+  name: "viewport-live",
+  clearColor: "#000000",
+  pointerEvents: "none",
+  zIndex: 0
+}, Ae = {
+  name: "viewport-ui",
+  clearColor: "transparent",
+  pointerEvents: "auto",
+  zIndex: 5
+}, Le = {
+  name: "viewport-scene",
+  clearColor: "transparent",
+  pointerEvents: "auto",
+  zIndex: 1
+}, X = {
+  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 = ({
+  imageRef: e,
+  selectedSource: t,
+  videoRef: n
+}) => /* @__PURE__ */ z(q, { children: [
+  /* @__PURE__ */ f(
+    "video",
+    {
+      ref: n,
+      style: {
+        position: "absolute",
+        width: 1,
+        height: 1,
+        opacity: t === "image" ? 0 : 1e-3,
+        pointerEvents: "none"
+      }
+    }
+  ),
+  /* @__PURE__ */ f(
+    "img",
+    {
+      ref: e,
+      alt: "",
+      style: {
+        position: "absolute",
+        width: 1,
+        height: 1,
+        opacity: t === "image" ? 1e-3 : 0,
+        pointerEvents: "none"
+      }
+    }
+  )
+] }), ee = ({
+  dock: e,
+  label: t,
+  onChange: n,
+  options: a,
+  value: r
+}) => /* @__PURE__ */ f(
+  "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__ */ z(
+      "label",
+      {
+        style: {
+          display: "grid",
+          gap: 6,
+          color: "#e5eefb",
+          fontSize: 12,
+          fontWeight: 700
+        },
+        children: [
+          /* @__PURE__ */ f("span", { children: t }),
+          /* @__PURE__ */ f(
+            "select",
+            {
+              value: r,
+              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: a.map((i) => /* @__PURE__ */ f("option", { value: i.id, style: { color: "#111827" }, children: i.label }, i.id))
+            }
+          )
+        ]
+      }
+    )
+  }
+), Ne = ({
+  dock: e,
+  imageOptions: t,
+  selectedImageId: n,
+  selectedSource: a,
+  selectedVideoId: r,
+  setSelectedImageId: i,
+  setSelectedSource: s,
+  setSelectedVideoId: o,
+  showMediaControls: h,
+  videoOptions: m
+}) => {
+  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(
+    "button",
+    {
+      type: "button",
+      onClick: () => g(!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__ */ z(q, { children: [
+    /* @__PURE__ */ z(
+      "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__ */ f(
+            "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: p.map((c) => {
+                const b = c === a;
+                return /* @__PURE__ */ z(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => s(c),
+                    "aria-pressed": b,
+                    title: X[c].label,
+                    style: {
+                      border: "none",
+                      borderRadius: 999,
+                      minWidth: 42,
+                      height: 42,
+                      padding: "0 12px",
+                      display: "inline-flex",
+                      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)",
+                      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 })
+                    ]
+                  },
+                  c
+                );
+              })
+            }
+          ),
+          /* @__PURE__ */ f(
+            "button",
+            {
+              type: "button",
+              onClick: () => g(!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: "×"
+            }
+          )
+        ]
+      }
+    ),
+    a === "image" && t.length > 0 && /* @__PURE__ */ f(
+      ee,
+      {
+        dock: e,
+        label: "Image Asset",
+        options: t,
+        value: n,
+        onChange: i
+      }
+    ),
+    a === "video" && m.length > 0 && /* @__PURE__ */ f(
+      ee,
+      {
+        dock: e,
+        label: "Video Asset",
+        options: m,
+        value: r,
+        onChange: o
+      }
+    )
+  ] }) : null;
+}, Pe = ({
+  enabled: e,
+  selectedSource: t
+}) => {
+  const n = me(re.FACE_TRACKER);
+  return {
+    faces: te({ node: n, enabled: e, selectedSource: t }),
+    trackerStatus: n ? "ready" : "idle"
+  };
+}, oe = ({
+  children: e,
+  fitMode: t = "auto",
+  imageOptions: n = [],
+  initialImageId: a,
+  initialMirrored: r = !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 = []
+}) => {
+  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,
+    _
+  );
+  return /* @__PURE__ */ f(ie.Provider, { value: _, children: /* @__PURE__ */ z(
+    "div",
+    {
+      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
+        ] })
+      ]
+    }
+  ) });
+};
+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];
+      if (!i || i.length === 0) {
+        n(null);
+        return;
+      }
+      const s = xe(i), o = {
+        left: s.minX,
+        top: s.minY,
+        width: s.width,
+        height: s.height
+      };
+      n((d) => d && d.left === o.left && d.top === o.top && d.width === o.width && d.height === o.height ? d : o);
+    };
+    return r(), () => {
+      cancelAnimationFrame(a);
+    };
+  }, [e]), t;
+}, ot = ["fill", "contain"];
+export {
+  Ze as BoundingBoxOverlay,
+  lt as HeadTracker,
+  et as PerspectiveCamera,
+  vt as ScreenRectAspectContext,
+  ot as TEXTURE_FITS,
+  tt as XRCompositor,
+  $ 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,
+  he as useXRModel,
+  me as useXRModelNode,
+  mt as useXRPipelineSnapshot,
+  ft as useXRReady,
+  gt as useXRRenderSize,
+  nt as useXRViewportState
+};