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

package/dist/low-level.js

@@ -1,16 +1,14 @@
-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 = {
+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 = {
   position: "absolute",
   top: -28,
   left: 0,
@@ -21,13 +19,13 @@ const Ee = {
   fontWeight: 700,
   padding: "4px 8px",
   whiteSpace: "nowrap"
-}, Ze = ({
+}, b = ({
   boundingBox: e,
   label: t = "face bounding box",
-  color: n = "#22c55e",
-  style: a,
-  labelStyle: r
-}) => /* @__PURE__ */ f(
+  color: o = "#22c55e",
+  style: s,
+  labelStyle: n
+}) => /* @__PURE__ */ u(
   "div",
   {
     style: {
@@ -36,29 +34,29 @@ const Ee = {
       top: `${e.top * 100}%`,
       width: `${e.width * 100}%`,
       height: `${e.height * 100}%`,
-      border: `3px solid ${n}`,
+      border: `3px solid ${o}`,
       boxSizing: "border-box",
       pointerEvents: "none",
       zIndex: 20,
-      ...a
+      ...s
     },
-    children: t !== null && /* @__PURE__ */ f("div", { style: { ...Ee, ...r }, children: t })
+    children: t !== null && /* @__PURE__ */ u("div", { style: { ...x, ...n }, children: t })
   }
-), et = (e) => {
-  const { makeDefault: t = !0, ...n } = e, a = {
+), v = (e) => {
+  const { makeDefault: t = !0, ...o } = e, s = {
     position: [0, 0, 40],
     fov: 30,
     near: 0.1,
     far: 1e3,
     makeDefault: t,
-    ...n
+    ...o
   };
-  return /* @__PURE__ */ f(Re, { ...a });
-}, tt = ({
+  return /* @__PURE__ */ u(h, { ...s });
+}, w = ({
   background: e = "#000",
   children: t,
-  style: n
-}) => /* @__PURE__ */ f(
+  style: o
+}) => /* @__PURE__ */ u(
   "div",
   {
     style: {
@@ -66,876 +64,62 @@ const Ee = {
       inset: 0,
       overflow: "hidden",
       background: e,
-      ...n
+      ...o
     },
     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);
+), 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 s = xe(i), o = {
-        left: s.minX,
-        top: s.minY,
-        width: s.width,
-        height: s.height
+      const i = f(p), a = {
+        left: i.minX,
+        top: i.minY,
+        width: i.width,
+        height: i.height
       };
-      n((d) => d && d.left === o.left && d.top === o.top && d.width === o.width && d.height === o.height ? d : o);
+      o((r) => r && r.left === a.left && r.top === a.top && r.width === a.width && r.height === a.height ? r : a);
     };
-    return r(), () => {
-      cancelAnimationFrame(a);
+    return n(), () => {
+      cancelAnimationFrame(s);
     };
   }, [e]), t;
-}, ot = ["fill", "contain"];
+}, y = ["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
+  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
 };