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

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

@@ -0,0 +1,1102 @@
+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
+};