@vincentt-xr/sdk 2.0.0-alpha.0

package/dist/internal-KOKJDxCG.js

@@ -0,0 +1,519 @@
+var B = Object.defineProperty;
+var K = (t, e, r) => e in t ? B(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
+var s = (t, e, r) => K(t, typeof e != "symbol" ? e + "" : e, r);
+import { jsx as f, jsxs as y } from "react/jsx-runtime";
+import O, { useState as p, useRef as g, useEffect as v, useCallback as T, createContext as W, Suspense as X, lazy as V } from "react";
+import { b as q } from "./selectors-BHO6TnoC.js";
+import { u as J } from "./index-CYMj26Ej.js";
+import { useFrame as G } from "@react-three/fiber";
+import "./hasFullUnitUVBounds-BGvcFsQM.js";
+const fe = ({
+  children: t,
+  defaultCollapsed: e = !0,
+  title: r,
+  width: i = 320
+}) => {
+  const [n, o] = p(e);
+  return n ? /* @__PURE__ */ f(
+    "button",
+    {
+      type: "button",
+      onClick: () => o(!1),
+      "aria-label": `Open ${r}`,
+      title: `Open ${r}`,
+      style: {
+        position: "absolute",
+        right: 16,
+        bottom: 16,
+        zIndex: 40,
+        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",
+        pointerEvents: "auto"
+      },
+      children: "◫"
+    }
+  ) : /* @__PURE__ */ y(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        right: 16,
+        bottom: 16,
+        zIndex: 40,
+        width: i,
+        maxWidth: "calc(100vw - 32px)",
+        padding: 14,
+        borderRadius: 14,
+        boxShadow: "0 12px 30px rgba(0,0,0,0.26)",
+        backdropFilter: "blur(10px)",
+        pointerEvents: "auto",
+        background: "rgba(15, 23, 42, 0.78)",
+        border: "1px solid rgba(255,255,255,0.12)",
+        color: "#e5eefb"
+      },
+      children: [
+        /* @__PURE__ */ y(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: 12,
+              marginBottom: 10
+            },
+            children: [
+              /* @__PURE__ */ f("div", { style: { fontSize: 13, fontWeight: 700 }, children: r }),
+              /* @__PURE__ */ f(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => o(!0),
+                  "aria-label": `Close ${r}`,
+                  title: `Close ${r}`,
+                  style: {
+                    width: 32,
+                    height: 32,
+                    border: "1px solid rgba(255,255,255,0.12)",
+                    borderRadius: 999,
+                    background: "rgba(255,255,255,0.04)",
+                    color: "#e5eefb",
+                    cursor: "pointer",
+                    flex: "0 0 auto"
+                  },
+                  children: "×"
+                }
+              )
+            ]
+          }
+        ),
+        t
+      ]
+    }
+  );
+};
+class Q {
+  // 500ms as per PRD
+  constructor() {
+    s(this, "frameTimestamps", []);
+    s(this, "lastUpdateTime", 0);
+    s(this, "currentFPS", 0);
+    s(this, "updateInterval", 500);
+    this.lastUpdateTime = performance.now();
+  }
+  /**
+   * Track a new frame
+   * Should be called on each camera frame from renderVideo loop
+   */
+  trackFrame() {
+    const e = performance.now();
+    this.frameTimestamps.push(e);
+    const r = e - this.updateInterval;
+    this.frameTimestamps = this.frameTimestamps.filter((i) => i > r), e - this.lastUpdateTime >= this.updateInterval && (this.currentFPS = this.frameTimestamps.length * 2, this.lastUpdateTime = e);
+  }
+  /**
+   * Get current FPS value
+   */
+  getFPS() {
+    return this.currentFPS;
+  }
+  /**
+   * Reset tracker state
+   */
+  reset() {
+    this.frameTimestamps = [], this.lastUpdateTime = performance.now(), this.currentFPS = 0;
+  }
+}
+function he(t, e = 1) {
+  return t.toFixed(e);
+}
+function _(t) {
+  return t / (1024 * 1024);
+}
+function Y(t, e) {
+  return e === 0 ? 0 : t / e * 100;
+}
+class Z {
+  constructor(e = 1e3) {
+    s(this, "intervalId", null);
+    s(this, "memoryUsage", null);
+    s(this, "updateInterval");
+    s(this, "isSupported", !1);
+    this.updateInterval = e, this.checkSupport();
+  }
+  /**
+   * Check if performance.memory is supported
+   */
+  checkSupport() {
+    const e = performance;
+    this.isSupported = "memory" in e && e.memory !== void 0, this.isSupported || console.warn("[MemoryTracker] performance.memory not available (Chrome-only API)");
+  }
+  /**
+   * Start tracking memory usage
+   */
+  start() {
+    if (this.intervalId !== null) {
+      console.warn("[MemoryTracker] Already running");
+      return;
+    }
+    if (!this.isSupported) {
+      this.memoryUsage = null;
+      return;
+    }
+    this.updateMemory(), this.intervalId = window.setInterval(() => {
+      this.updateMemory();
+    }, this.updateInterval);
+  }
+  /**
+   * Stop tracking memory usage
+   */
+  stop() {
+    this.intervalId !== null && (clearInterval(this.intervalId), this.intervalId = null);
+  }
+  /**
+   * Update memory measurements
+   */
+  updateMemory() {
+    if (!this.isSupported) return;
+    const e = performance;
+    if (!e.memory) return;
+    const r = e.memory.usedJSHeapSize, i = e.memory.jsHeapSizeLimit;
+    this.memoryUsage = {
+      used: _(r),
+      total: _(i),
+      percentage: Y(r, i)
+    };
+  }
+  /**
+   * Get current memory usage
+   * Returns null if performance.memory is not supported
+   */
+  getMemoryUsage() {
+    return this.memoryUsage;
+  }
+  /**
+   * Check if memory tracking is supported
+   */
+  isMemorySupported() {
+    return this.isSupported;
+  }
+}
+class ee {
+  constructor() {
+    s(this, "resolution", "N/A");
+    s(this, "videoElement", null);
+    s(this, "metadataListener", null);
+  }
+  /**
+   * Start tracking resolution from a video element
+   */
+  start(e) {
+    if (!e) {
+      this.resolution = "N/A";
+      return;
+    }
+    this.videoElement = e, e.videoWidth > 0 && e.videoHeight > 0 && this.updateResolution(), this.metadataListener = () => {
+      this.updateResolution();
+    }, e.addEventListener("loadedmetadata", this.metadataListener);
+  }
+  /**
+   * Stop tracking and clean up listeners
+   */
+  stop() {
+    this.videoElement && this.metadataListener && (this.videoElement.removeEventListener("loadedmetadata", this.metadataListener), this.metadataListener = null), this.videoElement = null, this.resolution = "N/A";
+  }
+  /**
+   * Update resolution from video element
+   */
+  updateResolution() {
+    if (!this.videoElement) {
+      this.resolution = "N/A";
+      return;
+    }
+    const e = this.videoElement.videoWidth, r = this.videoElement.videoHeight;
+    e > 0 && r > 0 ? this.resolution = `${e}x${r}` : this.resolution = "N/A";
+  }
+  /**
+   * Get current resolution string (e.g., "1280x720")
+   */
+  getResolution() {
+    return this.videoElement && this.updateResolution(), this.resolution;
+  }
+}
+class te {
+  constructor(e = {}) {
+    s(this, "options");
+    s(this, "isRunning", !1);
+    // Current metrics state
+    s(this, "metrics", {
+      cameraFPS: 0,
+      detectionTime: 0,
+      modelPerformance: [],
+      renderTime: 0,
+      effectiveFPS: 0,
+      memory: null,
+      resolution: "N/A"
+    });
+    // Trackers
+    s(this, "cameraFPSTracker");
+    s(this, "memoryTracker");
+    s(this, "resolutionTracker");
+    // For effective FPS calculation
+    s(this, "frameTimes", []);
+    s(this, "lastEffectiveFPSUpdate", 0);
+    this.options = {
+      enableMemoryTracking: e.enableMemoryTracking ?? !0,
+      memoryUpdateInterval: e.memoryUpdateInterval ?? 1e3
+    }, this.cameraFPSTracker = new Q(), this.memoryTracker = new Z(this.options.memoryUpdateInterval), this.resolutionTracker = new ee();
+  }
+  /**
+   * Start collecting metrics
+   * @param videoElement Optional video element for resolution tracking
+   */
+  start(e) {
+    if (this.isRunning) {
+      console.warn("[MetricsCollector] Already running");
+      return;
+    }
+    this.isRunning = !0, this.lastEffectiveFPSUpdate = performance.now(), this.options.enableMemoryTracking && this.memoryTracker.start(), e && this.resolutionTracker.start(e), this.setupCameraFPSHook(), console.log("[MetricsCollector] Started");
+  }
+  /**
+   * Stop collecting metrics and clean up
+   */
+  stop() {
+    this.isRunning && (this.isRunning = !1, this.memoryTracker.stop(), this.resolutionTracker.stop(), this.cameraFPSTracker.reset(), this.cleanupCameraFPSHook(), console.log("[MetricsCollector] Stopped"));
+  }
+  /**
+   * Setup global hook for camera FPS tracking
+   * This allows useXRSession to call trackFrame() without tight coupling
+   */
+  setupCameraFPSHook() {
+    const e = window;
+    e.__xr_debugger_metrics || (e.__xr_debugger_metrics = {
+      trackCameraFrame: () => {
+        this.cameraFPSTracker.trackFrame(), this.metrics.cameraFPS = this.cameraFPSTracker.getFPS();
+      }
+    });
+  }
+  /**
+   * Cleanup global hook
+   */
+  cleanupCameraFPSHook() {
+    const e = window;
+    e.__xr_debugger_metrics && delete e.__xr_debugger_metrics;
+  }
+  /**
+   * Get current metrics snapshot
+   * Updates metrics from all trackers before returning
+   */
+  getMetrics() {
+    return this.updateMetricsFromTrackers(), { ...this.metrics };
+  }
+  /**
+   * Update metrics from all trackers
+   */
+  updateMetricsFromTrackers() {
+    this.isRunning && (this.metrics.memory = this.memoryTracker.getMemoryUsage(), this.metrics.resolution = this.resolutionTracker.getResolution(), this.updateEffectiveFPS());
+  }
+  /**
+   * Update render time (called from RenderTimeTracker component)
+   */
+  updateRenderTime(e) {
+    this.metrics.renderTime = e, this.updateEffectiveFPS();
+  }
+  /**
+   * Update detection time from models
+   * Aggregates processing time from all active models in the XR pipeline
+   */
+  async updateDetectionTime(e) {
+    if (!e || !this.isRunning) {
+      this.metrics.detectionTime = 0, this.metrics.modelPerformance = [];
+      return;
+    }
+    try {
+      const r = Object.values(e).filter(Boolean);
+      if (r.length === 0) {
+        this.metrics.detectionTime = 0, this.metrics.modelPerformance = [];
+        return;
+      }
+      const i = r.map((a) => a && typeof a.getPerformanceData == "function" ? a.getPerformanceData() : Promise.resolve({ name: "unknown", processingTime: 0 })), n = await Promise.all(i);
+      this.metrics.modelPerformance = n.map((a) => ({
+        name: a.name,
+        processingTime: a.processingTime || 0
+      }));
+      const o = n.reduce((a, h) => a + (h.processingTime || 0), 0);
+      this.metrics.detectionTime = o, this.updateEffectiveFPS();
+    } catch (r) {
+      console.warn("[MetricsCollector] Error updating detection time:", r), this.metrics.detectionTime = 0, this.metrics.modelPerformance = [];
+    }
+  }
+  /**
+   * Update effective FPS calculation
+   * (will be implemented in Phase 6)
+   */
+  updateEffectiveFPS() {
+    const e = performance.now(), r = this.metrics.detectionTime + this.metrics.renderTime;
+    if (this.frameTimes.push(r), e - this.lastEffectiveFPSUpdate >= 1e3) {
+      if (this.frameTimes.length > 0) {
+        const i = this.frameTimes.reduce((n, o) => n + o, 0) / this.frameTimes.length;
+        this.metrics.effectiveFPS = i > 0 ? 1e3 / i : 0;
+      }
+      this.frameTimes = [], this.lastEffectiveFPSUpdate = e;
+    }
+  }
+  /**
+   * Check if collector is running
+   */
+  isActive() {
+    return this.isRunning;
+  }
+}
+const re = V(async () => ({ default: (await import("./DebuggerUI-Dgop6Q6o.js")).DebuggerUI })), F = W(null);
+function pe({
+  children: t,
+  keyboardShortcut: e = "ctrl+shift+d",
+  initialEnabled: r = !1,
+  position: i = "top-left"
+}) {
+  const [n, o] = p(r), [a, h] = p(!1), [S, R] = p({
+    cameraFPS: 0,
+    detectionTime: 0,
+    modelPerformance: [],
+    renderTime: 0,
+    effectiveFPS: 0,
+    memory: null,
+    resolution: "N/A"
+  }), d = g(null), l = g(null), { session: b } = J(), k = q();
+  v(() => (d.current || (d.current = new te(), window.__xr_metrics_collector = d.current), () => {
+    d.current && d.current.stop(), l.current && clearInterval(l.current), window.__xr_metrics_collector && delete window.__xr_metrics_collector;
+  }), []), v(() => {
+    const c = d.current;
+    if (c) {
+      if (n && k) {
+        const u = b._getVideoElement();
+        c.start(u), l.current = window.setInterval(async () => {
+          const x = Object.fromEntries(b.store.getSnapshot().pipeline);
+          await c.updateDetectionTime(x);
+          const m = c.getMetrics();
+          R(m);
+        }, 16);
+      } else
+        c.stop(), l.current && (clearInterval(l.current), l.current = null);
+      return () => {
+        l.current && (clearInterval(l.current), l.current = null);
+      };
+    }
+  }, [n, k, b]), v(() => {
+    const c = (u) => {
+      const m = e.toLowerCase().split("+"), D = m.includes("ctrl") || m.includes("control"), U = m.includes("shift"), L = m.includes("alt"), A = m[m.length - 1], N = D ? u.ctrlKey || u.metaKey : !0, H = U ? u.shiftKey : !0, z = L ? u.altKey : !0, j = u.key.toLowerCase() === A;
+      N && H && z && j && (u.preventDefault(), o(($) => !$));
+    };
+    return window.addEventListener("keydown", c), () => {
+      window.removeEventListener("keydown", c);
+    };
+  }, [e]);
+  const E = T(() => {
+    o((c) => !c);
+  }, []), M = T(() => {
+    o(!0);
+  }, []), P = T(() => {
+    o(!1);
+  }, []), I = {
+    state: {
+      enabled: n,
+      collapsed: a,
+      metrics: S
+    },
+    toggle: E,
+    setCollapsed: h,
+    enable: M,
+    disable: P
+  };
+  return /* @__PURE__ */ y(F.Provider, { value: I, children: [
+    t,
+    n && /* @__PURE__ */ f(X, { fallback: null, children: /* @__PURE__ */ f(
+      re,
+      {
+        metrics: S,
+        collapsed: a,
+        onCollapse: h,
+        onClose: P,
+        position: i,
+        keyboardShortcut: e
+      }
+    ) })
+  ] });
+}
+function ie() {
+  const t = O.useContext(F);
+  if (!t)
+    throw new Error("useDebuggerContext must be used within a DebuggerProvider");
+  return t;
+}
+function se({ onUpdate: t }) {
+  const e = g(0), r = g(!0);
+  return G(() => {
+    if (r.current)
+      r.current = !1;
+    else {
+      const n = performance.now() - e.current;
+      t(n);
+    }
+    e.current = performance.now();
+  }, -1e3), null;
+}
+function ne() {
+  const t = ie();
+  return {
+    metrics: t.state.metrics,
+    enabled: t.state.enabled,
+    collapsed: t.state.collapsed,
+    toggle: t.toggle,
+    setCollapsed: t.setCollapsed,
+    enable: t.enable,
+    disable: t.disable
+  };
+}
+function ge() {
+  const { enabled: t } = ne(), e = (r) => {
+    const i = window;
+    i.__xr_metrics_collector && i.__xr_metrics_collector.updateRenderTime(r);
+  };
+  return t ? /* @__PURE__ */ f(se, { onUpdate: e }) : null;
+}
+const w = 600;
+function C() {
+  if (typeof window > "u")
+    return;
+  const t = window;
+  return t.__xrCalibrationDebugState || (t.__xrCalibrationDebugState = { events: [] }), t.__xrCalibrationDebugState;
+}
+function be(t, e, r) {
+  const i = C();
+  i && (i.events.push({
+    source: t,
+    label: e,
+    payload: r,
+    ts: performance.now()
+  }), i.events.length > w && i.events.splice(0, i.events.length - w));
+}
+function ve(t = w) {
+  const e = C();
+  return e ? e.events.slice(Math.max(0, e.events.length - t)) : [];
+}
+export {
+  pe as D,
+  fe as X,
+  ge as a,
+  be as b,
+  he as f,
+  ve as r,
+  ne as u
+};

package/dist/internal.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./internal-DH5d1Xnq.cjs"),r=require("./hasFullUnitUVBounds-p1Dl0ejX.cjs"),n=require("./index-PtFmD6B8.cjs");exports.DebuggerOverlay=e.DebuggerOverlay;exports.DebuggerProvider=e.DebuggerProvider;exports.XRDebugView=e.XRDebugView;exports.readCalibrationDebugEvents=e.readCalibrationDebugEvents;exports.recordCalibrationDebugEvent=e.recordCalibrationDebugEvent;exports.useDebugger=e.useDebugger;exports._resetUVBoundsWarnings=r._resetUVBoundsWarnings;exports.logUVBoundsWarningOnce=r.logUVBoundsWarningOnce;exports.RENDER_LAYERS=n.RENDER_LAYERS;

package/dist/internal.js

@@ -0,0 +1,14 @@
+import { a, D as s, X as o, r as g, b as n, u } from "./internal-KOKJDxCG.js";
+import { _ as i, l as t } from "./hasFullUnitUVBounds-BGvcFsQM.js";
+import { R as d } from "./index-CYMj26Ej.js";
+export {
+  a as DebuggerOverlay,
+  s as DebuggerProvider,
+  d as RENDER_LAYERS,
+  o as XRDebugView,
+  i as _resetUVBoundsWarnings,
+  t as logUVBoundsWarningOnce,
+  g as readCalibrationDebugEvents,
+  n as recordCalibrationDebugEvent,
+  u as useDebugger
+};

package/dist/low-level.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const H=require("./index-B5J4gzn2.cjs"),M=require("./selectors-Bub0o3qy.cjs"),c=require("react"),_=require("./useFaceResults-hVUJYSEY.cjs"),D=require("./index-PtFmD6B8.cjs"),fe=require("./hasFullUnitUVBounds-p1Dl0ejX.cjs"),U=require("./index-BVBVg96G.cjs"),l=require("react/jsx-runtime"),me=require("@react-three/drei"),ge={position:"absolute",top:-28,left:0,background:"rgba(34, 197, 94, 0.9)",color:"#04130a",fontFamily:"Menlo, Monaco, Consolas, monospace",fontSize:12,fontWeight:700,padding:"4px 8px",whiteSpace:"nowrap"},pe=({boundingBox:e,label:t="face bounding box",color:r="#22c55e",style:o,labelStyle:n})=>l.jsx("div",{style:{position:"absolute",left:`${e.left*100}%`,top:`${e.top*100}%`,width:`${e.width*100}%`,height:`${e.height*100}%`,border:`3px solid ${r}`,boxSizing:"border-box",pointerEvents:"none",zIndex:20,...o},children:t!==null&&l.jsx("div",{style:{...ge,...n},children:t})}),be=e=>{const{makeDefault:t=!0,...r}=e,o={position:[0,0,40],fov:30,near:.1,far:1e3,makeDefault:t,...r};return l.jsx(me.PerspectiveCamera,{...o})},xe=({background:e="#000",children:t,style:r})=>l.jsx("div",{style:{position:"fixed",inset:0,overflow:"hidden",background:e,...r},children:t}),T=({children:e,config:t,style:r})=>l.jsx("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,...r},children:e}),K=({canvas:e,layout:t,media:r,mirrored:o,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 a=e.getContext("2d");a&&(a.setTransform(1,0,0,1,0,0),a.clearRect(0,0,i,s),o&&(a.translate(i,0),a.scale(-1,1)),n&&(a.filter=n),a.drawImage(r,t.offsetX,t.offsetY,t.drawWidth,t.drawHeight),n&&(a.filter="none"),a.setTransform(1,0,0,1,0,0))},ne=({canvasRef:e,enabled:t=!0,fps:r=30,imageRef:o,layout:n,mirrored:i,sourceKind:s,videoRef:a})=>{c.useEffect(()=>{if(!t){const b=e.current,u=b==null?void 0:b.getContext("2d");b&&u&&u.clearRect(0,0,b.width,b.height);return}let m=0,g=0;const h=r>0?1e3/r:0,p=b=>{if(m=requestAnimationFrame(p),h>0&&b-g<h)return;g=b;const u=e.current;if(!u||!n)return;if(s==="image"){const w=o.current;if(!w||!w.complete||w.naturalWidth<=0||w.naturalHeight<=0)return;K({canvas:u,layout:n,media:w,mirrored:i});return}const x=a.current;!x||x.readyState<2||x.videoWidth<=0||x.videoHeight<=0||K({canvas:u,layout:n,media:x,mirrored:i})};return m=requestAnimationFrame(p),()=>{cancelAnimationFrame(m)}},[e,t,r,o,n,i,s,a])},re=({canvasRef:e,imageRef:t,layer:r,layout:o,mirrored:n,sourceKind:i,videoRef:s})=>(ne({canvasRef:e,imageRef:t,layout:o,mirrored:n,sourceKind:i,videoRef:s}),l.jsx(T,{config:r,children:l.jsx("canvas",{ref:e,style:{position:"absolute",inset:0,width:"100%",height:"100%",display:"block",background:"#000"}})})),we=({canvasRef:e,controlInsetTop:t,debugVisible:r,fps:o=15,imageRef:n,layer:i,layout:s,mirrored:a,sourceKind:m,videoRef:g,viewportSize:h})=>{ne({canvasRef:e,enabled:r,fps:o,imageRef:n,layout:s,mirrored:a,sourceKind:m,videoRef:g});const p=Math.min(220,Math.max(120,h.width*.22)),b=h.width>0&&h.height>0?h.width/h.height:1,u=Math.min(h.height-24,Math.max(t??16,16));return l.jsx(T,{config:i,children:l.jsx("canvas",{ref:e,style:{position:"absolute",left:16,top:u,width:r?p:1,height:r?"auto":1,aspectRatio:`${b}`,opacity:r?.85:0,borderRadius:10,border:r?"1px solid rgba(255,255,255,0.16)":"none",pointerEvents:"none",objectFit:"contain",background:"#000"}})})},ve=5,Re=1,ie=(e,t)=>t,ye="brightness(2.2) contrast(1.5) saturate(1.25)",ae=({enabled:e,displayMirrored:t,imageRef:r,layout:o,mode:n,numFaces:i,selectedSource:s,sourceStream:a,videoRef:m})=>{const{session:g}=D.useXRContext(),h=c.useRef(null),p=c.useRef(!1),b=c.useRef(document.createElement("canvas")),{ready:u,node:x,error:w}=H.useXRModel(D.XRModel.FACE_TRACKER,{numFaces:i??(n==="head-binding"?Re:ve)}),[E,v]=c.useState("idle"),[k,F]=c.useState(null),I=e&&u&&!!x,z=_.useFaceResults({node:I?x:null,enabled:I,selectedSource:s,onFrame:c.useCallback(()=>{F(null),v("ready")},[])});return c.useEffect(()=>{if(!e||!o)return;const f=()=>{const R=s==="image"?r.current:m.current;if(R){if(R instanceof HTMLImageElement){if(!R.complete||R.naturalWidth<=0||R.naturalHeight<=0)return}else if(R.readyState<2||R.videoWidth<=0||R.videoHeight<=0)return;K({canvas:b.current,layout:o,media:R,mirrored:t,filter:s==="webcam"?ye:void 0})}};if(s==="image"){f();return}let d=0;const y=()=>{d=requestAnimationFrame(y),f()};return d=requestAnimationFrame(y),()=>cancelAnimationFrame(d)},[t,e,r,o,s,m]),c.useEffect(()=>{var j;if(!e){v("idle"),F(null),p.current=!1,h.current=null;return}if(!o){v("initializing");return}const f=(a==null?void 0:a.id)??(((j=m.current)==null?void 0:j.srcObject)instanceof MediaStream?m.current.srcObject.id:"none"),y=s==="webcam"?`webcam:${f}`:s;h.current!==y&&(p.current=!1,h.current=y);let R=!1;return(async()=>{try{if(v("initializing"),p.current||(await g.setFrameSource({canvas:b.current,sourceKind:s}),await g.start(),p.current=!0),R)return;F(null),v("initializing")}catch(C){if(R)return;v("error"),F(C instanceof Error?C.message:"Failed to initialize SDK face tracking")}})(),()=>{R=!0}},[e,o,s,g,a,m]),c.useEffect(()=>{!I&&e&&!w&&v("initializing")},[I,e,w]),c.useEffect(()=>{w&&(v("error"),F(w.message))},[w]),c.useEffect(()=>()=>{p.current=!1,g.stop()},[g]),{activeDelegate:"GPU",faces:z,status:E,error:k}},oe=c.createContext(null),Se={audio:!1,video:{facingMode:"user",frameRate:{ideal:30,max:60}}},Ce={name:"viewport-live",clearColor:"#000000",pointerEvents:"none",zIndex:0},Ee={name:"viewport-ui",clearColor:"transparent",pointerEvents:"auto",zIndex:5},Fe={name:"viewport-scene",clearColor:"transparent",pointerEvents:"auto",zIndex:1},X={webcam:{icon:"◉",label:"Webcam"},image:{icon:"▣",label:"Images"},video:{icon:"▶",label:"Videos"}},O=({children:e})=>l.jsx(l.Fragment,{children:e});O.displayName="XRViewport.Scene";const Y=({children:e})=>l.jsx(l.Fragment,{children:e});Y.displayName="XRViewport.Overlay";const Ie=e=>{if(!e)return{width:0,height:0};const t=e.getBoundingClientRect();return{width:t.width||e.clientWidth,height:t.height||e.clientHeight}},Me=e=>{const[t,r]=c.useState({width:0,height:0});return c.useLayoutEffect(()=>{const o=e.current;if(!o)return;let n=0;const i=()=>{const g=Ie(o);r(h=>h.width===g.width&&h.height===g.height?h:g)};i(),n=requestAnimationFrame(i);const s=new ResizeObserver(()=>{i(),n&&cancelAnimationFrame(n),n=requestAnimationFrame(i)});s.observe(o);const a=window.visualViewport,m=()=>{i(),n&&cancelAnimationFrame(n),n=requestAnimationFrame(i)};return window.addEventListener("resize",m),window.addEventListener("orientationchange",m),a==null||a.addEventListener("resize",m),a==null||a.addEventListener("scroll",m),()=>{n&&cancelAnimationFrame(n),s.disconnect(),window.removeEventListener("resize",m),window.removeEventListener("orientationchange",m),a==null||a.removeEventListener("resize",m),a==null||a.removeEventListener("scroll",m)}},[e]),t},Q=e=>{e&&(e.pause(),e.removeAttribute("src"),e.srcObject=null,e.load())},Z=e=>{e&&e.removeAttribute("src")},je=({enabled:e,imageAsset:t,selectedSource:r,videoAsset:o})=>{const n=c.useRef(null),i=c.useRef(null),[s,a]=c.useState(null),[m,g]=c.useState({width:0,height:0}),[h,p]=c.useState("idle"),[b,u]=c.useState(null);return c.useEffect(()=>{if(!e){Q(n.current),Z(i.current),a(null),g({width:0,height:0}),p("idle"),u(null);return}let x=!1,w=null;const E=(f,d)=>{x||(g({width:f,height:d}),p("ready"),u(null))},v=()=>{Q(n.current),Z(i.current),w==null||w.getTracks().forEach(f=>f.stop()),w=null,a(null)},k=async()=>{p("requesting");const f=await navigator.mediaDevices.getUserMedia(Se);if(x){f.getTracks().forEach(y=>y.stop());return}w=f,a(f);const d=n.current;d&&(d.srcObject=f,d.muted=!0,d.playsInline=!0,d.autoplay=!0,await d.play(),E(d.videoWidth,d.videoHeight))},F=async f=>{p("requesting"),a(null);const d=n.current;d&&(d.src=f,d.muted=!0,d.loop=!0,d.playsInline=!0,d.autoplay=!0,d.crossOrigin="anonymous",await d.play(),E(d.videoWidth,d.videoHeight))},I=async f=>{p("requesting"),a(null);const d=i.current;d&&(await new Promise((y,R)=>{d.onload=()=>y(),d.onerror=()=>R(new Error("Unable to load image")),d.src=f}),E(d.naturalWidth,d.naturalHeight))};return v(),(async()=>{try{if(r==="webcam"){await k();return}if(r==="video"){if(!(o!=null&&o.src))throw new Error("Missing video source");await F(o.src);return}if(!(t!=null&&t.src))throw new Error("Missing image source");await I(t.src)}catch(f){if(x)return;p("error"),u(f instanceof Error?f.message:`Unable to initialize ${r}`)}})(),()=>{x=!0,v()}},[e,t,r,o]),{videoRef:n,imageRef:i,stream:s,mediaSize:m,status:h,error:b}},Xe=(e,t)=>e==="auto"?t==="webcam"?"cover":"contain":e,ke=({imageOptions:e,initialImageId:t,initialSource:r,initialVideoId:o,source:n,videoOptions:i})=>{var h,p,b,u;const s=(n==null?void 0:n.kind)??r??"webcam",a=s==="image"&&e.length===0||s==="video"&&i.length===0?"webcam":s,m=(n==null?void 0:n.kind)==="image"?n.assetId??((h=e[0])==null?void 0:h.id)??"":t??((p=e[0])==null?void 0:p.id)??"",g=(n==null?void 0:n.kind)==="video"?n.assetId??((b=i[0])==null?void 0:b.id)??"":o??((u=i[0])==null?void 0:u.id)??"";return{selectedSource:a,selectedImageId:m,selectedVideoId:g}},Te=(e,t,r)=>{if(e.width<=0||e.height<=0||t.width<=0||t.height<=0)return null;const o=r==="contain"?Math.min(t.width/e.width,t.height/e.height):Math.max(t.width/e.width,t.height/e.height),n=e.width*o,i=e.height*o,s=(t.width-n)*.5,a=(t.height-i)*.5;return{source:e,destination:t,drawWidth:n,drawHeight:i,offsetX:s,offsetY:a,scale:o}},ze=(e,t)=>{if(e==="dom")return{sceneContent:null,overlayContent:t};let r=null,o=null;const n=[];return c.Children.forEach(t,i=>{var a;if(!c.isValidElement(i)){i!=null&&n.push(i);return}const s=(a=i.type)==null?void 0:a.displayName;if(s===O.displayName){r=i.props.children;return}if(s===Y.displayName){o=i.props.children;return}n.push(i)}),!o&&n.length>0&&(o=n),{sceneContent:r,overlayContent:o}},ee=(e,t)=>typeof e=="function"?e(t):e,Ae=()=>c.useContext(oe),Le=({imageRef:e,selectedSource:t,videoRef:r})=>l.jsxs(l.Fragment,{children:[l.jsx("video",{ref:r,style:{position:"absolute",width:1,height:1,opacity:t==="image"?0:.001,pointerEvents:"none"}}),l.jsx("img",{ref:e,alt:"",style:{position:"absolute",width:1,height:1,opacity:t==="image"?.001:0,pointerEvents:"none"}})]}),te=({dock:e,label:t,onChange:r,options:o,value:n})=>l.jsx("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:l.jsxs("label",{style:{display:"grid",gap:6,color:"#e5eefb",fontSize:12,fontWeight:700},children:[l.jsx("span",{children:t}),l.jsx("select",{value:n,onChange:i=>r(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:o.map(i=>l.jsx("option",{value:i.id,style:{color:"#111827"},children:i.label},i.id))})]})}),Be=({dock:e,imageOptions:t,selectedImageId:r,selectedSource:o,selectedVideoId:n,setSelectedImageId:i,setSelectedSource:s,setSelectedVideoId:a,showMediaControls:m,videoOptions:g})=>{const[h,p]=c.useState(!1),b=["webcam","image","video"].filter(u=>u==="image"?t.length>0:u==="video"?g.length>0:!0);return m?h?l.jsx("button",{type:"button",onClick:()=>p(!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:"≡"}):l.jsxs(l.Fragment,{children:[l.jsxs("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:[l.jsx("div",{style:{display:"inline-flex",alignItems:"center",gap:8,padding:8,borderRadius:999,background:"rgba(15, 23, 42, 0.72)",border:"1px solid rgba(255,255,255,0.12)",boxShadow:"0 12px 30px rgba(0,0,0,0.18)",backdropFilter:"blur(10px)",overflowX:"auto"},children:b.map(u=>{const x=u===o;return l.jsxs("button",{type:"button",onClick:()=>s(u),"aria-pressed":x,title:X[u].label,style:{border:"none",borderRadius:999,minWidth:42,height:42,padding:"0 12px",display:"inline-flex",alignItems:"center",justifyContent:"center",gap:8,background:x?"rgba(56, 189, 248, 0.18)":"rgba(255,255,255,0.04)",color:x?"#e0f2fe":"rgba(229,238,251,0.82)",cursor:"pointer",flex:"0 0 auto"},children:[l.jsx("span",{style:{fontSize:14,lineHeight:1},children:X[u].icon}),l.jsx("span",{style:{fontSize:12,fontWeight:700,letterSpacing:"0.01em"},children:X[u].label})]},u)})}),l.jsx("button",{type:"button",onClick:()=>p(!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:"×"})]}),o==="image"&&t.length>0&&l.jsx(te,{dock:e,label:"Image Asset",options:t,value:r,onChange:i}),o==="video"&&g.length>0&&l.jsx(te,{dock:e,label:"Video Asset",options:g,value:n,onChange:a})]}):null},We=({enabled:e,selectedSource:t})=>{const r=M.useXRModelNode(D.XRModel.FACE_TRACKER);return{faces:_.useFaceResults({node:r,enabled:e,selectedSource:t}),trackerStatus:r?"ready":"idle"}},G=({children:e,fitMode:t="auto",imageOptions:r=[],initialImageId:o,initialMirrored:n=!0,initialSource:i="webcam",initialVideoId:s,mediaStrategy:a="internal",mediaDock:m="bottom-left",mode:g="dom",showMediaControlsByDefault:h=!0,source:p,style:b,videoOptions:u=[]})=>{const x=c.useRef(null),w=c.useRef(null),E=Me(x),v=c.useMemo(()=>ke({imageOptions:r,initialImageId:o,initialSource:i,initialVideoId:s,source:p,videoOptions:u}),[r,o,i,s,p,u]),[k,F]=c.useState(n),[I,z]=c.useState(h),[f,d]=c.useState(v.selectedSource),[y,R]=c.useState(v.selectedImageId),[A,j]=c.useState(v.selectedVideoId),C=a==="internal";c.useEffect(()=>{p&&(d(v.selectedSource),R(v.selectedImageId),j(v.selectedVideoId))},[v,p]);const L=r.find(P=>P.id===y)??r[0],B=u.find(P=>P.id===A)??u[0],S=je({enabled:C,imageAsset:L,selectedSource:f,videoAsset:B}),$=Xe(t,f),W=c.useMemo(()=>Te(S.mediaSize,E,$),[S.mediaSize,$,E]),N=ie(f,k),q=ae({displayMirrored:N,enabled:C&&S.status==="ready"&&W!==null,imageRef:S.imageRef,layout:W,selectedSource:f,sourceStream:S.stream,videoRef:S.videoRef}),J=We({enabled:!C,selectedSource:f}),se=f==="image"?`${X.image.label}: ${(L==null?void 0:L.label)??""}`:f==="video"?`${X.video.label}: ${(B==null?void 0:B.label)??""}`:X.webcam.label,V={activeDelegate:C?q.activeDelegate:null,faces:C?q.faces:J.faces,imageOptions:r,layout:W,mediaError:S.error,mediaFitMode:$,mediaLabel:se,mediaStatus:S.status,mirrored:N,selectedImageId:y,selectedSource:f,selectedVideoId:A,setMirrored:F,setSelectedImageId:R,setSelectedSource:d,setSelectedVideoId:j,setShowMediaControls:z,showMediaControls:I,trackerError:C?q.error:null,trackerStatus:C?q.status:J.trackerStatus,videoOptions:u,viewportSize:E,mediaSize:S.mediaSize},le=typeof e=="function"?e(V):e,{sceneContent:ce,overlayContent:de}=ze(g,le),ue=ee(ce,V),he=ee(de,V);return l.jsx(oe.Provider,{value:V,children:l.jsxs("div",{ref:x,style:{position:"fixed",inset:0,overflow:"hidden",background:"#000",...b},children:[l.jsx(Le,{imageRef:S.imageRef,selectedSource:f,videoRef:S.videoRef}),g==="dom"&&C&&l.jsx(re,{canvasRef:w,imageRef:S.imageRef,videoRef:S.videoRef,layer:Ce,layout:W,mirrored:N,sourceKind:f==="image"?"image":"video"}),(g==="r3f"||g==="hybrid")&&l.jsx(T,{config:Fe,children:l.jsx(U.XRScene,{renderTargetSize:E,style:{width:"100%",height:"100%"},children:ue})}),l.jsxs(T,{config:Ee,children:[C&&l.jsx(Be,{dock:m,imageOptions:r,selectedImageId:y,selectedSource:f,selectedVideoId:A,setSelectedImageId:R,setSelectedSource:d,setSelectedVideoId:j,showMediaControls:I,videoOptions:u}),he]})]})})};G.Scene=O;G.Overlay=Y;const qe=e=>{const[t,r]=c.useState(null);return c.useEffect(()=>{let o=0;const n=()=>{var m,g;o=requestAnimationFrame(n);const i=(g=(m=e==null?void 0:e.detectionResults)==null?void 0:m.faceLandmarks)==null?void 0:g[0];if(!i||i.length===0){r(null);return}const s=_.computeLandmarkBounds(i),a={left:s.minX,top:s.minY,width:s.width,height:s.height};r(h=>h&&h.left===a.left&&h.top===a.top&&h.width===a.width&&h.height===a.height?h:a)};return n(),()=>{cancelAnimationFrame(o)}},[e]),t},Ve=["fill","contain"];exports.HeadTracker=H.HeadTracker;exports.useTrackerContext=H.useTrackerContext;exports.useXRModel=H.useXRModel;exports.useXRCameraTexture=M.useXRCameraTexture;exports.useXRError=M.useXRError;exports.useXRModelNode=M.useXRModelNode;exports.useXRPipelineSnapshot=M.useXRPipelineSnapshot;exports.useXRReady=M.useXRReady;exports.useXRRenderSize=M.useXRRenderSize;exports.computeLandmarkBounds=_.computeLandmarkBounds;exports.useXRContext=D.useXRContext;exports.hasFullUnitUVBounds=fe.hasFullUnitUVBounds;exports.ScreenRectAspectContext=U.ScreenRectAspectContext;exports.computeScreenTransform=U.computeScreenTransform;exports.useScreenSpace=U.useScreenSpace;exports.BoundingBoxOverlay=pe;exports.PerspectiveCamera=be;exports.TEXTURE_FITS=Ve;exports.XRCompositor=xe;exports.XRLayer=T;exports.XRMediaSurface=re;exports.XRTrackingOverlay=we;exports.XRViewport=G;exports.resolveCalibrationFaceDisplayMirrored=ie;exports.useCalibrationFaceTracker=ae;exports.useFaceBoundingBox=qe;exports.useXRViewportState=Ae;