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

package/dist/index-O-2crZ3M.js

@@ -1,1102 +0,0 @@
-import { jsx as m, jsxs as k, Fragment as j } from "react/jsx-runtime";
-import { createContext as K, useContext as G, useMemo as W, useEffect as T, useRef as M, useState as E, useCallback as Ie, useLayoutEffect as Me, Children as De, isValidElement as Ae } from "react";
-import { R as de, u as ue, X as he } from "./index-safCs_af.js";
-import * as I from "three";
-import { u as fe } from "./useFaceResults-cpsSmKKc.js";
-import { u as ke } from "./useXRModel-BMJE1hrk.js";
-import { u as Le, a as Xe, d as _e } from "./selectors-CXd_x-6t.js";
-import { Canvas as ze, useThree as We, useFrame as Ne } from "@react-three/fiber";
-const Ve = K(null), Be = () => {
-  const e = G(Ve);
-  if (!e)
-    throw new Error("useScreenSpace must be used within ScreenSpaceUI");
-  return e;
-}, me = K(null), St = () => G(me) ?? 1, He = (e, t, o, l, n) => {
-  const i = e / 2, s = t / 2, r = o.left * i + l.left, c = o.right * i - l.right, d = o.bottom * s + l.bottom, u = o.top * s - l.top, a = c - r, g = u - d, h = (r + c) / 2, p = (d + u) / 2, w = n[0] * a / 2, F = n[1] * g / 2;
-  return { centerX: h, centerY: p, width: a, height: g, pivotX: w, pivotY: F };
-}, Ue = { left: 0, right: 0, top: 0, bottom: 0 }, qe = { left: 0, right: 0, top: 0, bottom: 0 }, $e = [0, 0], Rt = ({
-  anchors: e,
-  offsets: t,
-  pivot: o = $e,
-  children: l
-}) => {
-  const { width: n, height: i } = Be(), s = W(
-    () => ({
-      anchors: { ...Ue, ...e ?? {} },
-      offsets: { ...qe, ...t ?? {} }
-    }),
-    [e, t]
-  ), r = W(
-    () => He(n, i, s.anchors, s.offsets, o),
-    [n, i, s, o]
-  );
-  T(() => {
-    const a = s.anchors;
-    a.left > a.right && console.warn(
-      `[ScreenTransform] inverted X axis: anchors.left (${a.left}) > anchors.right (${a.right})`
-    ), a.bottom > a.top && console.warn(
-      `[ScreenTransform] inverted Y axis: anchors.bottom (${a.bottom}) > anchors.top (${a.top})`
-    ), r.width <= 0 && console.warn(
-      `[ScreenTransform] zero or negative width (${r.width.toFixed(3)}) — anchors + offsets collapse the X extent`
-    ), r.height <= 0 && console.warn(
-      `[ScreenTransform] zero or negative height (${r.height.toFixed(3)}) — anchors + offsets collapse the Y extent`
-    );
-  }, [s, r.width, r.height]);
-  const c = o[0] !== 0 || o[1] !== 0, d = c ? [1, 1, 1] : [r.width, r.height, 1], u = !c && r.width > 0 && r.height > 0 ? r.width / r.height : null;
-  return /* @__PURE__ */ m(
-    "group",
-    {
-      position: [r.centerX - r.pivotX, r.centerY - r.pivotY, 0],
-      scale: d,
-      renderOrder: de.SCREEN_UI,
-      children: /* @__PURE__ */ m(me.Provider, { value: u, children: l })
-    }
-  );
-}, ee = ({
-  canvas: e,
-  layout: t,
-  media: o,
-  mirrored: l,
-  filter: n
-}) => {
-  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 r = e.getContext("2d");
-  r && (r.setTransform(1, 0, 0, 1, 0, 0), r.clearRect(0, 0, i, s), l && (r.translate(i, 0), r.scale(-1, 1)), n && (r.filter = n), r.drawImage(o, t.offsetX, t.offsetY, t.drawWidth, t.drawHeight), n && (r.filter = "none"), r.setTransform(1, 0, 0, 1, 0, 0));
-}, Ye = 5, je = 1, Ke = (e, t) => t, Ge = "brightness(2.2) contrast(1.5) saturate(1.25)", Pe = ({
-  enabled: e,
-  displayMirrored: t,
-  imageRef: o,
-  layout: l,
-  mode: n,
-  numFaces: i,
-  selectedSource: s,
-  sourceStream: r,
-  videoRef: c
-}) => {
-  const { session: d } = ue(), u = M(null), a = M(!1), g = M(document.createElement("canvas")), {
-    ready: h,
-    node: p,
-    error: w
-  } = ke(he.FACE_TRACKER, {
-    numFaces: i ?? (n === "head-binding" ? je : Ye)
-  }), [F, C] = E("idle"), [S, y] = E(null), D = e && h && !!p, L = fe({
-    node: D ? p : null,
-    enabled: D,
-    selectedSource: s,
-    onFrame: Ie(() => {
-      y(null), C("ready");
-    }, [])
-  });
-  return T(() => {
-    if (!e || !l) return;
-    const b = () => {
-      const v = s === "image" ? o.current : c.current;
-      if (v) {
-        if (v instanceof HTMLImageElement) {
-          if (!v.complete || v.naturalWidth <= 0 || v.naturalHeight <= 0) return;
-        } else if (v.readyState < 2 || v.videoWidth <= 0 || v.videoHeight <= 0)
-          return;
-        ee({
-          canvas: g.current,
-          layout: l,
-          media: v,
-          mirrored: t,
-          filter: s === "webcam" ? Ge : void 0
-        });
-      }
-    };
-    if (s === "image") {
-      b();
-      return;
-    }
-    let f = 0;
-    const x = () => {
-      f = requestAnimationFrame(x), b();
-    };
-    return f = requestAnimationFrame(x), () => cancelAnimationFrame(f);
-  }, [t, e, o, l, s, c]), T(() => {
-    var _;
-    if (!e) {
-      C("idle"), y(null), a.current = !1, u.current = null;
-      return;
-    }
-    if (!l) {
-      C("initializing");
-      return;
-    }
-    const b = (r == null ? void 0 : r.id) ?? (((_ = c.current) == null ? void 0 : _.srcObject) instanceof MediaStream ? c.current.srcObject.id : "none"), x = s === "webcam" ? `webcam:${b}` : s;
-    u.current !== x && (a.current = !1, u.current = x);
-    let v = !1;
-    return (async () => {
-      try {
-        if (C("initializing"), a.current || (await d.setFrameSource({
-          canvas: g.current,
-          sourceKind: s
-        }), await d.start(), a.current = !0), v) return;
-        y(null), C("initializing");
-      } catch (z) {
-        if (v) return;
-        C("error"), y(z instanceof Error ? z.message : "Failed to initialize SDK face tracking");
-      }
-    })(), () => {
-      v = !0;
-    };
-  }, [e, l, s, d, r, c]), T(() => {
-    !D && e && !w && C("initializing");
-  }, [D, e, w]), T(() => {
-    w && (C("error"), y(w.message));
-  }, [w]), T(() => () => {
-    a.current = !1, d.stop();
-  }, [d]), {
-    activeDelegate: "GPU",
-    faces: L,
-    status: F,
-    error: S
-  };
-}, Y = ({
-  children: e,
-  config: t,
-  style: o
-}) => /* @__PURE__ */ m(
-  "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,
-      ...o
-    },
-    children: e
-  }
-), ge = ({
-  canvasRef: e,
-  enabled: t = !0,
-  fps: o = 30,
-  imageRef: l,
-  layout: n,
-  mirrored: i,
-  sourceKind: s,
-  videoRef: r
-}) => {
-  T(() => {
-    if (!t) {
-      const g = e.current, h = g == null ? void 0 : g.getContext("2d");
-      g && h && h.clearRect(0, 0, g.width, g.height);
-      return;
-    }
-    let c = 0, d = 0;
-    const u = o > 0 ? 1e3 / o : 0, a = (g) => {
-      if (c = requestAnimationFrame(a), u > 0 && g - d < u) return;
-      d = g;
-      const h = e.current;
-      if (!h || !n) return;
-      if (s === "image") {
-        const w = l.current;
-        if (!w || !w.complete || w.naturalWidth <= 0 || w.naturalHeight <= 0)
-          return;
-        ee({
-          canvas: h,
-          layout: n,
-          media: w,
-          mirrored: i
-        });
-        return;
-      }
-      const p = r.current;
-      !p || p.readyState < 2 || p.videoWidth <= 0 || p.videoHeight <= 0 || ee({
-        canvas: h,
-        layout: n,
-        media: p,
-        mirrored: i
-      });
-    };
-    return c = requestAnimationFrame(a), () => {
-      cancelAnimationFrame(c);
-    };
-  }, [e, t, o, l, n, i, s, r]);
-}, Je = ({
-  canvasRef: e,
-  imageRef: t,
-  layer: o,
-  layout: l,
-  mirrored: n,
-  sourceKind: i,
-  videoRef: s
-}) => (ge({
-  canvasRef: e,
-  imageRef: t,
-  layout: l,
-  mirrored: n,
-  sourceKind: i,
-  videoRef: s
-}), /* @__PURE__ */ m(Y, { config: o, children: /* @__PURE__ */ m(
-  "canvas",
-  {
-    ref: e,
-    style: {
-      position: "absolute",
-      inset: 0,
-      width: "100%",
-      height: "100%",
-      display: "block",
-      background: "#000"
-    }
-  }
-) })), Et = ({
-  canvasRef: e,
-  controlInsetTop: t,
-  debugVisible: o,
-  fps: l = 15,
-  imageRef: n,
-  layer: i,
-  layout: s,
-  mirrored: r,
-  sourceKind: c,
-  videoRef: d,
-  viewportSize: u
-}) => {
-  ge({
-    canvasRef: e,
-    enabled: o,
-    fps: l,
-    imageRef: n,
-    layout: s,
-    mirrored: r,
-    sourceKind: c,
-    videoRef: d
-  });
-  const a = Math.min(220, Math.max(120, u.width * 0.22)), g = u.width > 0 && u.height > 0 ? u.width / u.height : 1, h = Math.min(u.height - 24, Math.max(t ?? 16, 16));
-  return /* @__PURE__ */ m(Y, { config: i, children: /* @__PURE__ */ m(
-    "canvas",
-    {
-      ref: e,
-      style: {
-        position: "absolute",
-        left: 16,
-        top: h,
-        width: o ? a : 1,
-        height: o ? "auto" : 1,
-        aspectRatio: `${g}`,
-        opacity: o ? 0.85 : 0,
-        borderRadius: 10,
-        border: o ? "1px solid rgba(255,255,255,0.16)" : "none",
-        pointerEvents: "none",
-        objectFit: "contain",
-        background: "#000"
-      }
-    }
-  ) });
-}, pe = {
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  height: "100%",
-  background: "#363636",
-  color: "white",
-  fontFamily: "monospace"
-}, Qe = () => /* @__PURE__ */ m("div", { style: pe, children: "Loading..." }), Ze = (e) => /* @__PURE__ */ m("div", { style: pe, children: e.error }), oe = {
-  position: "absolute",
-  top: 0,
-  left: 0,
-  width: "100%",
-  height: "100%",
-  zIndex: 10
-}, ie = {
-  sceneColorTexture: null,
-  sceneDepthTexture: null
-}, Oe = ({
-  onRenderOutputs: e,
-  renderOutputs: t,
-  size: o
-}) => {
-  const { camera: l, gl: n, scene: i, size: s } = We(), r = Math.max(1, Math.round((o == null ? void 0 : o.width) ?? s.width)), c = Math.max(1, Math.round((o == null ? void 0 : o.height) ?? s.height)), d = !!(t.sceneColor || t.sceneDepth), u = W(() => {
-    if (!d) return null;
-    const a = new I.WebGLRenderTarget(r, c, {
-      colorSpace: I.SRGBColorSpace,
-      depthBuffer: !0,
-      stencilBuffer: !1
-    });
-    return t.sceneDepth && (a.depthTexture = new I.DepthTexture(r, c), a.depthTexture.format = I.DepthFormat, a.depthTexture.type = I.UnsignedShortType), a;
-  }, [d, c, t.sceneDepth, r]);
-  return T(() => {
-    if (!u) {
-      e == null || e(ie);
-      return;
-    }
-    return e == null || e({
-      sceneColorTexture: t.sceneColor ? u.texture : null,
-      sceneDepthTexture: t.sceneDepth && u.depthTexture ? u.depthTexture : null
-    }), () => {
-      var a;
-      u.dispose(), (a = u.depthTexture) == null || a.dispose(), e == null || e(ie);
-    };
-  }, [e, t.sceneColor, t.sceneDepth, u]), Ne(() => {
-    if (!u) return;
-    const a = [];
-    t.excludeScreenUI !== !1 && i.traverse((p) => {
-      p.visible && p.renderOrder >= de.SCREEN_UI && (a.push(p), p.visible = !1);
-    });
-    const g = n.getRenderTarget(), h = n.xr.enabled;
-    n.xr.enabled = !1, n.setRenderTarget(u), n.clear(), n.render(i, l), n.setRenderTarget(g), n.xr.enabled = h, a.forEach((p) => {
-      p.visible = !0;
-    });
-  }, -100), null;
-}, et = ({
-  style: e,
-  canvasProps: t,
-  children: o,
-  loadingComponent: l,
-  loadingTransitionDuration: n,
-  errorComponent: i,
-  renderTargetSize: s,
-  renderOutputs: r = {},
-  onRenderOutputs: c
-}) => {
-  const d = M(null), u = M(null), a = M(null), g = M(!1), { session: h } = ue(), p = Le(), w = Xe(), [F, C] = E(!0);
-  return T(() => {
-    if (s) {
-      h._setRenderSize(
-        Math.round(s.width),
-        Math.round(s.height)
-      );
-      return;
-    }
-    const S = (b, f) => {
-      b <= 0 || f <= 0 || h._setRenderSize(Math.round(b), Math.round(f));
-    }, y = () => {
-      !u.current || g.current || (g.current = !0, h._setRenderTarget(u.current));
-    }, D = (b, f) => {
-      a.current !== null && cancelAnimationFrame(a.current), a.current = requestAnimationFrame(() => {
-        a.current = null, S(b, f);
-      });
-    }, L = new ResizeObserver((b) => {
-      const f = b[0];
-      if (!f) return;
-      const { width: x, height: v } = f.contentRect;
-      y(), D(x, v);
-    });
-    return d.current && L.observe(d.current), y(), () => {
-      L.disconnect(), a.current !== null && (cancelAnimationFrame(a.current), a.current = null), g.current = !1;
-    };
-  }, [s, h]), T(() => {
-    p && (n ? setTimeout(() => {
-      C(!1);
-    }, n) : C(!1));
-  }, [p, n]), /* @__PURE__ */ k(
-    "div",
-    {
-      id: "vincentt-xr-container",
-      ref: d,
-      style: {
-        width: "100%",
-        height: "100%",
-        ...e,
-        position: "relative"
-      },
-      children: [
-        F && /* @__PURE__ */ m("div", { style: oe, children: l || /* @__PURE__ */ m(Qe, {}) }),
-        w && /* @__PURE__ */ m("div", { style: oe, children: i || /* @__PURE__ */ m(Ze, { error: w.message }) }),
-        /* @__PURE__ */ k(
-          ze,
-          {
-            id: "vincentt-xr-canvas",
-            ref: u,
-            dpr: [1, 3],
-            gl: {
-              alpha: !0,
-              // Keep the framebuffer transient by default so resize/layout changes
-              // do not leave an old frame hanging around. Apps that need capture
-              // can opt back in via `canvasProps.gl`.
-              preserveDrawingBuffer: !1,
-              antialias: !0,
-              premultipliedAlpha: !1,
-              // Disable alpha premultiplication
-              toneMapping: I.NoToneMapping
-              // Disable tone mapping for accurate video colors
-            },
-            ...t,
-            onCreated: (S) => {
-              s ? h._setRenderSize(
-                Math.round(s.width),
-                Math.round(s.height)
-              ) : h._setRenderTarget(u.current), h._setR3FState({
-                renderer: S.gl,
-                scene: S.scene,
-                camera: S.camera
-              }), S.gl.outputColorSpace = I.SRGBColorSpace, t != null && t.onCreated && t.onCreated(S);
-            },
-            children: [
-              /* @__PURE__ */ m(
-                Oe,
-                {
-                  onRenderOutputs: c,
-                  renderOutputs: r,
-                  size: s
-                }
-              ),
-              o
-            ]
-          }
-        )
-      ]
-    }
-  );
-}, be = K(null), we = K(null), tt = {
-  audio: !1,
-  video: {
-    facingMode: "user",
-    frameRate: { ideal: 30, max: 60 }
-  }
-}, rt = {
-  name: "viewport-live",
-  clearColor: "#000000",
-  pointerEvents: "none",
-  zIndex: 0
-}, nt = {
-  name: "viewport-ui",
-  clearColor: "transparent",
-  pointerEvents: "auto",
-  zIndex: 5
-}, ot = {
-  name: "viewport-scene",
-  clearColor: "transparent",
-  pointerEvents: "auto",
-  zIndex: 1
-}, N = {
-  webcam: { icon: "◉", label: "Webcam" },
-  image: { icon: "▣", label: "Images" },
-  video: { icon: "▶", label: "Videos" }
-}, te = ({ children: e }) => /* @__PURE__ */ m(j, { children: e });
-te.displayName = "XRViewport.Scene";
-const re = ({ children: e }) => /* @__PURE__ */ m(j, { children: e });
-re.displayName = "XRViewport.Overlay";
-const it = (e) => {
-  if (!e)
-    return { width: 0, height: 0 };
-  const t = e.getBoundingClientRect();
-  return {
-    width: t.width || e.clientWidth,
-    height: t.height || e.clientHeight
-  };
-}, at = (e) => {
-  const [t, o] = E({ width: 0, height: 0 });
-  return Me(() => {
-    const l = e.current;
-    if (!l) return;
-    let n = 0;
-    const i = () => {
-      const d = it(l);
-      o(
-        (u) => u.width === d.width && u.height === d.height ? u : d
-      );
-    };
-    i(), n = requestAnimationFrame(i);
-    const s = new ResizeObserver(() => {
-      i(), n && cancelAnimationFrame(n), n = requestAnimationFrame(i);
-    });
-    s.observe(l);
-    const r = window.visualViewport, c = () => {
-      i(), n && cancelAnimationFrame(n), n = requestAnimationFrame(i);
-    };
-    return window.addEventListener("resize", c), window.addEventListener("orientationchange", c), r == null || r.addEventListener("resize", c), r == null || r.addEventListener("scroll", c), () => {
-      n && cancelAnimationFrame(n), s.disconnect(), window.removeEventListener("resize", c), window.removeEventListener("orientationchange", c), r == null || r.removeEventListener("resize", c), r == null || r.removeEventListener("scroll", c);
-    };
-  }, [e]), t;
-}, ae = (e) => {
-  e && (e.pause(), e.removeAttribute("src"), e.srcObject = null, e.load());
-}, se = (e) => {
-  e && e.removeAttribute("src");
-}, st = ({
-  enabled: e,
-  imageAsset: t,
-  selectedSource: o,
-  videoAsset: l
-}) => {
-  const n = M(null), i = M(null), [s, r] = E(null), [c, d] = E({ width: 0, height: 0 }), [u, a] = E("idle"), [g, h] = E(null);
-  return T(() => {
-    if (!e) {
-      ae(n.current), se(i.current), r(null), d({ width: 0, height: 0 }), a("idle"), h(null);
-      return;
-    }
-    let p = !1, w = null;
-    const F = (b, f) => {
-      p || (d({ width: b, height: f }), a("ready"), h(null));
-    }, C = () => {
-      ae(n.current), se(i.current), w == null || w.getTracks().forEach((b) => b.stop()), w = null, r(null);
-    }, S = async () => {
-      a("requesting");
-      const b = await navigator.mediaDevices.getUserMedia(tt);
-      if (p) {
-        b.getTracks().forEach((x) => x.stop());
-        return;
-      }
-      w = b, r(b);
-      const f = n.current;
-      f && (f.srcObject = b, f.muted = !0, f.playsInline = !0, f.autoplay = !0, await f.play(), F(f.videoWidth, f.videoHeight));
-    }, y = async (b) => {
-      a("requesting"), r(null);
-      const f = n.current;
-      f && (f.src = b, f.muted = !0, f.loop = !0, f.playsInline = !0, f.autoplay = !0, f.crossOrigin = "anonymous", await f.play(), F(f.videoWidth, f.videoHeight));
-    }, D = async (b) => {
-      a("requesting"), r(null);
-      const f = i.current;
-      f && (await new Promise((x, v) => {
-        f.onload = () => x(), f.onerror = () => v(new Error("Unable to load image")), f.src = b;
-      }), F(f.naturalWidth, f.naturalHeight));
-    };
-    return C(), (async () => {
-      try {
-        if (o === "webcam") {
-          await S();
-          return;
-        }
-        if (o === "video") {
-          if (!(l != null && l.src))
-            throw new Error("Missing video source");
-          await y(l.src);
-          return;
-        }
-        if (!(t != null && t.src))
-          throw new Error("Missing image source");
-        await D(t.src);
-      } catch (b) {
-        if (p) return;
-        a("error"), h(b instanceof Error ? b.message : `Unable to initialize ${o}`);
-      }
-    })(), () => {
-      p = !0, C();
-    };
-  }, [e, t, o, l]), {
-    videoRef: n,
-    imageRef: i,
-    stream: s,
-    mediaSize: c,
-    status: u,
-    error: g
-  };
-}, lt = ({
-  enabled: e,
-  imageRef: t,
-  selectedSource: o,
-  status: l,
-  videoRef: n
-}) => {
-  const [i, s] = E(null);
-  return T(() => {
-    if (!e || l !== "ready") {
-      s((d) => (d == null || d.dispose(), null));
-      return;
-    }
-    const r = o === "image" ? t.current : n.current;
-    if (!r) return;
-    const c = o === "image" ? new I.Texture(r) : new I.VideoTexture(r);
-    return c.colorSpace = I.SRGBColorSpace, c.minFilter = I.LinearFilter, c.magFilter = I.LinearFilter, c.generateMipmaps = !1, c.needsUpdate = !0, s((d) => (d == null || d.dispose(), c)), () => {
-      c.dispose();
-    };
-  }, [e, t, o, l, n]), i;
-}, ct = (e, t) => e === "auto" ? t === "webcam" ? "cover" : "contain" : e, dt = ({
-  imageOptions: e,
-  initialImageId: t,
-  initialSource: o,
-  initialVideoId: l,
-  source: n,
-  videoOptions: i
-}) => {
-  var u, a, g, h;
-  const s = (n == null ? void 0 : n.kind) ?? o ?? "webcam", r = s === "image" && e.length === 0 || s === "video" && i.length === 0 ? "webcam" : s, c = (n == null ? void 0 : n.kind) === "image" ? n.assetId ?? ((u = e[0]) == null ? void 0 : u.id) ?? "" : t ?? ((a = e[0]) == null ? void 0 : a.id) ?? "", d = (n == null ? void 0 : n.kind) === "video" ? n.assetId ?? ((g = i[0]) == null ? void 0 : g.id) ?? "" : l ?? ((h = i[0]) == null ? void 0 : h.id) ?? "";
-  return {
-    selectedSource: r,
-    selectedImageId: c,
-    selectedVideoId: d
-  };
-}, ut = (e, t, o) => {
-  if (e.width <= 0 || e.height <= 0 || t.width <= 0 || t.height <= 0)
-    return null;
-  const l = o === "contain" ? Math.min(t.width / e.width, t.height / e.height) : Math.max(t.width / e.width, t.height / e.height), n = e.width * l, i = e.height * l, s = (t.width - n) * 0.5, r = (t.height - i) * 0.5;
-  return {
-    source: e,
-    destination: t,
-    drawWidth: n,
-    drawHeight: i,
-    offsetX: s,
-    offsetY: r,
-    scale: l
-  };
-}, ht = (e, t) => {
-  if (e === "dom")
-    return {
-      sceneContent: null,
-      overlayContent: t
-    };
-  let o = null, l = null;
-  const n = [];
-  return De.forEach(t, (i) => {
-    var r;
-    if (!Ae(i)) {
-      i != null && n.push(i);
-      return;
-    }
-    const s = (r = i.type) == null ? void 0 : r.displayName;
-    if (s === te.displayName) {
-      o = i.props.children;
-      return;
-    }
-    if (s === re.displayName) {
-      l = i.props.children;
-      return;
-    }
-    n.push(i);
-  }), !l && n.length > 0 && (l = n), {
-    sceneContent: o,
-    overlayContent: l
-  };
-}, le = (e, t) => typeof e == "function" ? e(t) : e, Tt = () => G(be), Ft = () => G(we), ft = ({
-  imageRef: e,
-  selectedSource: t,
-  videoRef: o
-}) => /* @__PURE__ */ k(j, { children: [
-  /* @__PURE__ */ m(
-    "video",
-    {
-      ref: o,
-      style: {
-        position: "absolute",
-        width: 1,
-        height: 1,
-        opacity: t === "image" ? 0 : 1e-3,
-        pointerEvents: "none"
-      }
-    }
-  ),
-  /* @__PURE__ */ m(
-    "img",
-    {
-      ref: e,
-      alt: "",
-      style: {
-        position: "absolute",
-        width: 1,
-        height: 1,
-        opacity: t === "image" ? 1e-3 : 0,
-        pointerEvents: "none"
-      }
-    }
-  )
-] }), ce = ({
-  dock: e,
-  label: t,
-  onChange: o,
-  options: l,
-  value: n
-}) => /* @__PURE__ */ m(
-  "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__ */ m("span", { children: t }),
-          /* @__PURE__ */ m(
-            "select",
-            {
-              value: n,
-              onChange: (i) => o(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: l.map((i) => /* @__PURE__ */ m("option", { value: i.id, style: { color: "#111827" }, children: i.label }, i.id))
-            }
-          )
-        ]
-      }
-    )
-  }
-), mt = ({
-  dock: e,
-  imageOptions: t,
-  selectedImageId: o,
-  selectedSource: l,
-  selectedVideoId: n,
-  setSelectedImageId: i,
-  setSelectedSource: s,
-  setSelectedVideoId: r,
-  showMediaControls: c,
-  videoOptions: d
-}) => {
-  const [u, a] = E(!1), g = ["webcam", "image", "video"].filter((h) => h === "image" ? t.length > 0 : h === "video" ? d.length > 0 : !0);
-  return c ? u ? /* @__PURE__ */ m(
-    "button",
-    {
-      type: "button",
-      onClick: () => a(!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(j, { 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__ */ m(
-            "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: g.map((h) => {
-                const p = h === l;
-                return /* @__PURE__ */ k(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => s(h),
-                    "aria-pressed": p,
-                    title: N[h].label,
-                    style: {
-                      border: "none",
-                      borderRadius: 999,
-                      minWidth: 42,
-                      height: 42,
-                      padding: "0 12px",
-                      display: "inline-flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      gap: 8,
-                      background: p ? "rgba(56, 189, 248, 0.18)" : "rgba(255,255,255,0.04)",
-                      color: p ? "#e0f2fe" : "rgba(229,238,251,0.82)",
-                      cursor: "pointer",
-                      flex: "0 0 auto"
-                    },
-                    children: [
-                      /* @__PURE__ */ m("span", { style: { fontSize: 14, lineHeight: 1 }, children: N[h].icon }),
-                      /* @__PURE__ */ m("span", { style: { fontSize: 12, fontWeight: 700, letterSpacing: "0.01em" }, children: N[h].label })
-                    ]
-                  },
-                  h
-                );
-              })
-            }
-          ),
-          /* @__PURE__ */ m(
-            "button",
-            {
-              type: "button",
-              onClick: () => a(!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: "×"
-            }
-          )
-        ]
-      }
-    ),
-    l === "image" && t.length > 0 && /* @__PURE__ */ m(
-      ce,
-      {
-        dock: e,
-        label: "Image Asset",
-        options: t,
-        value: o,
-        onChange: i
-      }
-    ),
-    l === "video" && d.length > 0 && /* @__PURE__ */ m(
-      ce,
-      {
-        dock: e,
-        label: "Video Asset",
-        options: d,
-        value: n,
-        onChange: r
-      }
-    )
-  ] }) : null;
-}, gt = ({
-  enabled: e,
-  selectedSource: t
-}) => {
-  const o = _e(he.FACE_TRACKER);
-  return {
-    faces: fe({ node: o, enabled: e, selectedSource: t }),
-    trackerStatus: o ? "ready" : "idle"
-  };
-}, xe = ({
-  children: e,
-  fitMode: t = "auto",
-  imageOptions: o = [],
-  initialImageId: l,
-  initialMirrored: n = !0,
-  initialSource: i = "webcam",
-  initialVideoId: s,
-  mediaStrategy: r = "internal",
-  mediaDock: c = "bottom-left",
-  mode: d = "dom",
-  previewMode: u = "finalColor",
-  renderOutputs: a = {},
-  showMediaControlsByDefault: g = !0,
-  source: h,
-  style: p,
-  videoOptions: w = []
-}) => {
-  const F = M(null), C = M(null), S = at(F), y = W(
-    () => dt({
-      imageOptions: o,
-      initialImageId: l,
-      initialSource: i,
-      initialVideoId: s,
-      source: h,
-      videoOptions: w
-    }),
-    [o, l, i, s, h, w]
-  ), [D, L] = E(n), [b, f] = E(g), [x, v] = E(
-    y.selectedSource
-  ), [V, _] = E(y.selectedImageId), [z, P] = E(y.selectedVideoId), [X, ve] = E({
-    sceneColorTexture: null,
-    sceneDepthTexture: null
-  }), A = r === "internal";
-  T(() => {
-    h && (v(y.selectedSource), _(y.selectedImageId), P(y.selectedVideoId));
-  }, [y, h]);
-  const B = o.find((O) => O.id === V) ?? o[0], H = w.find((O) => O.id === z) ?? w[0], R = st({
-    enabled: A,
-    imageAsset: B,
-    selectedSource: x,
-    videoAsset: H
-  }), J = ct(t, x), U = W(
-    () => ut(R.mediaSize, S, J),
-    [R.mediaSize, J, S]
-  ), Q = lt({
-    enabled: !!(a.mediaColor || a.finalColor),
-    imageRef: R.imageRef,
-    selectedSource: x,
-    status: R.status,
-    videoRef: R.videoRef
-  }), Z = Ke(x, D), q = Pe({
-    displayMirrored: Z,
-    enabled: A && R.status === "ready" && U !== null,
-    imageRef: R.imageRef,
-    layout: U,
-    selectedSource: x,
-    sourceStream: R.stream,
-    videoRef: R.videoRef
-  }), ne = gt({
-    enabled: !A,
-    selectedSource: x
-  }), ye = x === "image" ? `${N.image.label}: ${(B == null ? void 0 : B.label) ?? ""}` : x === "video" ? `${N.video.label}: ${(H == null ? void 0 : H.label) ?? ""}` : N.webcam.label, $ = {
-    activeDelegate: A ? q.activeDelegate : null,
-    faces: A ? q.faces : ne.faces,
-    imageOptions: o,
-    layout: U,
-    mediaError: R.error,
-    mediaFitMode: J,
-    mediaLabel: ye,
-    mediaStatus: R.status,
-    mirrored: Z,
-    selectedImageId: V,
-    selectedSource: x,
-    selectedVideoId: z,
-    setMirrored: L,
-    setSelectedImageId: _,
-    setSelectedSource: v,
-    setSelectedVideoId: P,
-    setShowMediaControls: f,
-    showMediaControls: b,
-    trackerError: A ? q.error : null,
-    trackerStatus: A ? q.status : ne.trackerStatus,
-    videoOptions: w,
-    viewportSize: S,
-    mediaSize: R.mediaSize
-  }, Ce = W(
-    () => ({
-      requested: a,
-      previewMode: u,
-      mediaColorTexture: Q,
-      sceneColorTexture: X.sceneColorTexture,
-      finalColorTexture: a.finalColor ? X.sceneColorTexture : null,
-      sceneDepthTexture: X.sceneDepthTexture,
-      estimatedDepthTexture: null,
-      available: {
-        mediaColor: Q !== null,
-        sceneColor: X.sceneColorTexture !== null,
-        finalColor: !!(a.finalColor && X.sceneColorTexture),
-        sceneDepth: X.sceneDepthTexture !== null,
-        estimatedDepth: !1
-      }
-    }),
-    [Q, u, a, X]
-  ), Se = typeof e == "function" ? e($) : e, { sceneContent: Re, overlayContent: Ee } = ht(d, Se), Te = le(
-    Re,
-    $
-  ), Fe = le(
-    Ee,
-    $
-  );
-  return /* @__PURE__ */ m(be.Provider, { value: $, children: /* @__PURE__ */ m(we.Provider, { value: Ce, children: /* @__PURE__ */ k(
-    "div",
-    {
-      ref: F,
-      style: {
-        position: "fixed",
-        inset: 0,
-        overflow: "hidden",
-        background: "#000",
-        ...p
-      },
-      children: [
-        /* @__PURE__ */ m(
-          ft,
-          {
-            imageRef: R.imageRef,
-            selectedSource: x,
-            videoRef: R.videoRef
-          }
-        ),
-        d === "dom" && A && /* @__PURE__ */ m(
-          Je,
-          {
-            canvasRef: C,
-            imageRef: R.imageRef,
-            videoRef: R.videoRef,
-            layer: rt,
-            layout: U,
-            mirrored: Z,
-            sourceKind: x === "image" ? "image" : "video"
-          }
-        ),
-        (d === "r3f" || d === "hybrid") && /* @__PURE__ */ m(Y, { config: ot, children: /* @__PURE__ */ m(
-          et,
-          {
-            onRenderOutputs: ve,
-            renderOutputs: {
-              sceneColor: a.sceneColor || a.finalColor,
-              sceneDepth: a.sceneDepth
-            },
-            renderTargetSize: S,
-            style: { width: "100%", height: "100%" },
-            children: Te
-          }
-        ) }),
-        /* @__PURE__ */ k(Y, { config: nt, children: [
-          A && /* @__PURE__ */ m(
-            mt,
-            {
-              dock: c,
-              imageOptions: o,
-              selectedImageId: V,
-              selectedSource: x,
-              selectedVideoId: z,
-              setSelectedImageId: _,
-              setSelectedSource: v,
-              setSelectedVideoId: P,
-              showMediaControls: b,
-              videoOptions: w
-            }
-          ),
-          Fe
-        ] })
-      ]
-    }
-  ) }) });
-};
-xe.Scene = te;
-xe.Overlay = re;
-export {
-  me as S,
-  Y as X,
-  Je as a,
-  xe as b,
-  He as c,
-  Et as d,
-  Tt as e,
-  Ft as f,
-  Pe as g,
-  Ve as h,
-  St as i,
-  Rt as j,
-  et as k,
-  Ke as r,
-  Be as u
-};