@vincentt-xr/sdk 2.0.0-alpha.0

package/dist/main.cjs

@@ -0,0 +1 @@
+"use strict";var Y=Object.defineProperty;var K=(s,e,t)=>e in s?Y(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t;var E=(s,e,t)=>K(s,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),A=require("./index-PtFmD6B8.cjs"),W=require("./index-BVBVg96G.cjs"),f=require("react/jsx-runtime"),I=require("@react-three/fiber"),O=require("three"),N=require("./selectors-Bub0o3qy.cjs"),J=require("@react-three/drei");function Q(s){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const t in s)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(s,t);Object.defineProperty(e,t,n.get?n:{enumerable:!0,get:()=>s[t]})}}return e.default=s,Object.freeze(e)}const H=Q(O),q=9,B=16,ee=({children:s})=>{const[e,t]=u.useState({width:0,height:0});return u.useEffect(()=>{const n=()=>{const i=document.documentElement.clientWidth,c=document.documentElement.clientHeight,o=i/c,a=q/B;let r,d;o>a?(d=c,r=d*q/B):(r=i,d=r*B/q),t({width:r,height:d})};return n(),window.addEventListener("resize",n),()=>window.removeEventListener("resize",n)},[]),f.jsx("div",{style:{width:"100vw",height:`${window.innerHeight}px`,display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"#0d0d0d"},children:f.jsx("div",{style:{width:e.width,height:e.height,position:"relative"},children:s})})},te="rgba(20,40,110,0.88)",se=24,ne=512;function re({color:s=te,borderColor:e,borderWidth:t=0,borderRadius:n=se,resolution:i=ne,aspect:c=1,opacity:o=1,name:a,overlay:r=!0,position:d,rotation:M,scale:g,visible:l}){const x=u.useRef(null),T=u.useRef(null),S=u.useMemo(()=>ie({width:Math.round(i*Math.max(c,.05)),height:Math.round(i),color:s,borderColor:e,borderWidth:t,borderRadius:n}),[s,e,t,n,i,c]);u.useEffect(()=>()=>{S.dispose()},[S]);const y=u.useRef(null),b=u.useRef(o);return b.current!==o&&(b.current=o,y.current=null,T.current&&(T.current.opacity=o)),u.useEffect(()=>{const h=x.current;if(h)return h.userData.setOpacity=P=>{y.current=P,T.current&&(T.current.opacity=P)},()=>{delete h.userData.setOpacity}},[]),f.jsxs("mesh",{ref:x,name:a,position:d,rotation:M,scale:g,visible:l,children:[f.jsx("planeGeometry",{args:[1,1]}),f.jsx("meshBasicMaterial",{ref:T,map:S,transparent:!0,opacity:o,depthTest:!r,depthWrite:!r})]})}function ie(s){const{width:e,height:t,color:n,borderColor:i,borderWidth:c,borderRadius:o}=s,a=typeof OffscreenCanvas<"u"?new OffscreenCanvas(e,t):(()=>{const g=document.createElement("canvas");return g.width=e,g.height=t,g})(),r=a.getContext("2d");r.clearRect(0,0,e,t);const d=Math.min(o,Math.min(e,t)/2);r.beginPath(),r.moveTo(d,0),r.lineTo(e-d,0),r.quadraticCurveTo(e,0,e,d),r.lineTo(e,t-d),r.quadraticCurveTo(e,t,e-d,t),r.lineTo(d,t),r.quadraticCurveTo(0,t,0,t-d),r.lineTo(0,d),r.quadraticCurveTo(0,0,d,0),r.closePath(),r.fillStyle=n,r.fill(),i&&c>0&&(r.lineWidth=c,r.strokeStyle=i,r.stroke());const M=new H.CanvasTexture(a);return M.needsUpdate=!0,M}const oe=({children:s,depth:e=0})=>{const{camera:t,size:n}=I.useThree(),i=u.useMemo(()=>{if(!(t instanceof O.PerspectiveCamera))return{width:10,height:10};const c=Math.abs(t.position.z-e),o=t.fov*Math.PI/180,a=2*Math.tan(o/2)*c;return{width:a*(n.width/n.height),height:a}},[t,n,e]);return f.jsx(W.ScreenSpaceContext.Provider,{value:i,children:f.jsx("group",{position:[0,0,e],children:s})})};function Z(s,e){return!Number.isFinite(s)||!Number.isFinite(e)||s<=0||e<=0?[1,1,1]:Math.abs(s-e)<1e-6?[1,1,1]:s>e?[e/s,1,1]:[1,s/e,1]}const ae={left:-1,right:1,top:1,bottom:-1},ce=(s,e,t)=>{const n=s%e,i=Math.floor(s/e);return{x:n/e,y:(t-1-i)/t}},ue=({sheet:s,contentAspect:e,renderOrder:t,name:n})=>{const i=J.useTexture(s.url),c=u.useRef(0),o=u.useRef(-1),a=W.useScreenRectAspect(),[r,d]=e!=null?Z(a,e):[1,1];return I.useFrame((M,g)=>{i.wrapS=O.RepeatWrapping,i.wrapT=O.RepeatWrapping,i.magFilter=O.LinearFilter,i.minFilter=O.LinearFilter,i.generateMipmaps=!1,i.repeat.set(1/s.cols,1/s.rows),c.current+=g;const l=Math.floor(c.current*s.fps)%s.frames;if(l===o.current)return;o.current=l;const{x,y:T}=ce(l,s.cols,s.rows);i.offset.set(x,T)}),f.jsxs("mesh",{name:n,renderOrder:t,scale:[r,d,1],children:[f.jsx("planeGeometry",{args:[1,1]}),f.jsx("meshBasicMaterial",{map:i,transparent:!0,toneMapped:!1,depthWrite:!1})]})},le=({sheet:s,anchors:e=ae,contentAspect:t,renderOrder:n=10,name:i="spriteAnimation"})=>f.jsx(u.Suspense,{fallback:null,children:f.jsx(W.ScreenTransform,{anchors:e,children:f.jsx(ue,{sheet:s,contentAspect:t,renderOrder:n,name:i})})}),de={color:"#ffffff",fontWeight:"bold",fontFamily:"Arial, sans-serif",fontSize:48,bgColor:"rgba(20,40,110,0.88)",borderWidth:0,borderRadius:24,padding:32,aspect:2.5,resolution:512,opacity:1};function fe(s){const e={...de,...s},{text:t,color:n,fontWeight:i,fontFamily:c,fontSize:o,bgColor:a,borderColor:r,borderWidth:d,borderRadius:M,padding:g,aspect:l,resolution:x,opacity:T,name:S,overlay:y=!0,position:b,rotation:h,scale:P,visible:z}=e,[D,U]=u.useState(null),[_,F]=u.useState(null),p=u.useRef(t);p.current!==t&&(p.current=t,D!==null&&U(null));const v=u.useRef(a);v.current!==a&&(v.current=a,_!==null&&F(null));const m=u.useRef(null),C=D??t,k=_??a,j=u.useMemo(()=>he({text:C,color:n,fontWeight:i,fontFamily:c,fontSize:o,bgColor:k,borderColor:r,borderWidth:d,borderRadius:M,padding:g,height:x,width:Math.round(x*Math.max(l,.1))}),[C,n,i,c,o,k,r,d,M,g,l,x]);return u.useEffect(()=>{const R=m.current;if(R)return R.userData.setText=L=>U(L),R.userData.setBgColor=L=>F(L),()=>{delete R.userData.setText,delete R.userData.setBgColor}},[]),u.useEffect(()=>()=>{j.dispose()},[j]),f.jsxs("mesh",{ref:m,name:S,position:b,rotation:h,scale:P,visible:z,children:[f.jsx("planeGeometry",{args:[1,1]}),f.jsx("meshBasicMaterial",{map:j,transparent:!0,opacity:T,depthTest:!y,depthWrite:!y})]})}function he(s){const{width:e,height:t,text:n,color:i,fontFamily:c,fontWeight:o,padding:a}=s;let{fontSize:r,bgColor:d}=s,M;const g=typeof OffscreenCanvas<"u"?new OffscreenCanvas(e,t):(()=>{const h=document.createElement("canvas");return h.width=e,h.height=t,h})(),l=g.getContext("2d");if(l.clearRect(0,0,e,t),d!=="transparent"){const h=Math.min(s.borderRadius,Math.min(e,t)/2);l.beginPath(),l.moveTo(h,0),l.lineTo(e-h,0),l.quadraticCurveTo(e,0,e,h),l.lineTo(e,t-h),l.quadraticCurveTo(e,t,e-h,t),l.lineTo(h,t),l.quadraticCurveTo(0,t,0,t-h),l.lineTo(0,h),l.quadraticCurveTo(0,0,h,0),l.closePath(),l.fillStyle=d,l.fill(),s.borderColor&&s.borderWidth>0&&(l.lineWidth=s.borderWidth,l.strokeStyle=s.borderColor,l.stroke())}l.fillStyle=i,l.textAlign="center",l.textBaseline="middle";const x=e-a*2;let T=X(l,n,x,o,r,c);const S=Math.max(1,Math.floor((t-a*2)/(r*1.3)));T.length>S&&(r=Math.max(12,Math.round(r*.75)),T=X(l,n,x,o,r,c)),l.font=`${o} ${r}px ${c}`;const y=r*1.3,b=t/2-(T.length-1)*y/2;for(let h=0;h<T.length;h++)l.fillText(T[h],e/2,b+h*y);return M=new H.CanvasTexture(g),M.needsUpdate=!0,M}function X(s,e,t,n,i,c){s.font=`${n} ${i}px ${c}`;const o=e.split(" "),a=[];let r="";for(const d of o){const M=r?`${r} ${d}`:d;s.measureText(M).width>t&&r?(a.push(r),r=d):r=M}return r&&a.push(r),a}const pe=({segmentationMask:s,segmentation:e,invert:t=!1,customBackground:n,renderOrder:i=A.RENDER_LAYERS.BACKGROUND})=>{const{camera:c,size:o}=I.useThree(),a=N.useXRCameraTexture(),r=N.useXRModelNode(A.XRModel.BACKGROUND_SEGMENTATION),d=e?r==null?void 0:r.backgroundSegmentationMask:void 0,M=u.useRef(!1);u.useEffect(()=>{if(!e){M.current=!1;return}r===null&&!M.current&&(console.warn(`[VideoBackground] segmentation="${e}" set but no matching <Segmentation> component is mounted; rendering unmasked.`),M.current=!0)},[e,r]);const g=e?d:s,l=u.useMemo(()=>{if(!(c instanceof O.PerspectiveCamera))return[10,10];const S=(c.position.z||5)- -1,y=c.fov*Math.PI/180,b=2*Math.tan(y/2)*S;return[b*(o.width/o.height),b]},[c,o]);return a?f.jsx("group",{position:[0,0,-1],children:t?f.jsxs(f.Fragment,{children:[f.jsxs("mesh",{position:[0,0,-.01],renderOrder:i-1,children:[f.jsx("planeGeometry",{args:l}),f.jsx("meshBasicMaterial",{map:a,depthTest:!1,depthWrite:!1,toneMapped:!1})]}),n&&g&&f.jsxs("mesh",{position:[0,0,0],renderOrder:i,children:[f.jsx("planeGeometry",{args:l}),f.jsx("meshBasicMaterial",{map:typeof n=="string"?void 0:n,color:typeof n=="string"?n:void 0,alphaMap:g,transparent:!1,alphaTest:.5,depthTest:!1,depthWrite:!1,toneMapped:!1},"inverted-mask")]})]}):f.jsxs(f.Fragment,{children:[n&&g&&f.jsxs("mesh",{position:[0,0,-.01],renderOrder:i-1,children:[f.jsx("planeGeometry",{args:l}),f.jsx("meshBasicMaterial",{map:typeof n=="string"?void 0:n,color:typeof n=="string"?n:void 0,depthTest:!1,depthWrite:!1,toneMapped:!1})]}),f.jsxs("mesh",{position:[0,0,0],renderOrder:i,children:[f.jsx("planeGeometry",{args:l}),f.jsx("meshBasicMaterial",{map:a,alphaMap:g,transparent:!1,alphaTest:g?.5:void 0,depthTest:!1,depthWrite:!1,toneMapped:!1},g?"with-mask":"no-mask")]})]})}):null},me=["video/mp4","video/webm;codecs=vp9","video/webm;codecs=vp8","video/webm"];function ge(s={}){const{audio:e=!1,mimeType:t,bitsPerSecond:n,onData:i,onStop:c,passThroughStream:o}=s,a=u.useRef(null),r=u.useRef(null),d=u.useRef([]),[M,g]=u.useState(!1),[l,x]=u.useState(!1),[T,S]=u.useState(null),[y,b]=u.useState(null),h=u.useCallback(()=>{var v;const p=[t,...me].filter(Boolean);for(const m of p)if((v=MediaRecorder.isTypeSupported)!=null&&v.call(MediaRecorder,m))return m},[t]),P=u.useCallback(async p=>{const v=new MediaStream;if(p.getTracks().forEach(m=>v.addTrack(m)),e){let m;if(e instanceof MediaStream)m=e;else{const C=typeof e=="object"?{audio:e}:{audio:!0,video:!1};m=await navigator.mediaDevices.getUserMedia(C)}m.getAudioTracks().forEach(C=>v.addTrack(C))}if(!v.getTracks().length)throw new Error("No tracks available in combined stream.");return r.current=v,v},[e]),z=u.useCallback(async(p,v)=>{try{let m;o?(m=p,r.current=m):m=await P(p);const C=h(),k={};C&&(k.mimeType=C),n&&(k.bitsPerSecond=n);const j=new MediaRecorder(m,k);j.ondataavailable=R=>{var L;((L=R.data)==null?void 0:L.size)>0&&(d.current.push(R.data),i==null||i(R.data))},j.onstop=()=>{const R=new Blob(d.current,{type:C??"video/webm"});S(R),c==null||c(R),d.current=[]},a.current=j,j.start(v),g(!0),x(!1)}catch(m){console.error("start(stream) failed",m),b(m instanceof Error?m:new Error(String(m)))}},[P,h,n,i,c,o]),D=u.useCallback(()=>{const p=a.current;p&&p.state!=="inactive"&&p.stop(),g(!1),x(!1)},[]),U=u.useCallback(()=>{const p=a.current;(p==null?void 0:p.state)==="recording"&&(p.pause(),x(!0))},[]),_=u.useCallback(()=>{const p=a.current;(p==null?void 0:p.state)==="paused"&&(p.resume(),x(!1))},[]),F=u.useCallback(()=>{var p,v;try{(p=a.current)==null||p.stop(),a.current=null,(v=r.current)==null||v.getTracks().forEach(m=>m.stop()),r.current=null,S(null),g(!1),x(!1),d.current=[],b(null)}catch(m){console.error("clear failed",m)}},[]);return u.useEffect(()=>()=>F(),[]),{start:z,stop:D,pause:U,resume:_,clear:F,isRecording:M,isPaused:l,recordedBlob:T,error:y,getActiveStream:()=>r.current}}const Me=(s,e)=>{const t=s.split(","),n=t[0].match(/:(.*?);/),i=n?n[1]:"application/octet-stream",c=atob(t[t.length-1]);let o=c.length;const a=new Uint8Array(o);for(;o--;)a[o]=c.charCodeAt(o);return new File([a],e,{type:i})},xe=4,Te=50,ve=5e3,$=s=>new Promise(e=>{if(s.readyState>=4){e();return}let t=!1;const n=()=>{t||(t=!0,e())};s.addEventListener("canplaythrough",n,{once:!0}),s.addEventListener("error",n,{once:!0}),setTimeout(n,ve)}),G=(s,e)=>{const t=document.createElement("audio");return t.src=s,t.loop=e,t.preload="auto",t.setAttribute("playsinline",""),t.setAttribute("webkit-playsinline",""),t.load(),t},Se=s=>{s.muted=!0,s.play().then(()=>{s.pause(),s.currentTime=0,s.muted=!1}).catch(()=>{s.muted=!1})};class V{constructor(e={}){E(this,"sfxPoolSize");E(this,"coalesceMs");E(this,"muted",!0);E(this,"listeners",new Set);E(this,"music",null);E(this,"musicWanted",null);E(this,"pools",new Map);E(this,"lastPlayed",new Map);E(this,"ready",new Map);this.sfxPoolSize=e.sfxPoolSize??xe,this.coalesceMs=e.coalesceMs??Te}prefetchMusic(e,t=.4){this.musicWanted={url:e,volume:t};const n=`music:${e}`,i=this.ready.get(n);if(i)return i;this.music=G(e,!0),this.music.volume=t;const c=$(this.music);return this.ready.set(n,c),c}registerSound(e,t=1){const n=this.ready.get(e);if(n)return n;const i=[];for(let o=0;o<this.sfxPoolSize;o+=1){const a=G(e,!1);a.volume=t,a.addEventListener("ended",()=>{a.currentTime=0}),i.push(a)}this.pools.set(e,{els:i,next:0,volume:t});const c=$(i[0]);return this.ready.set(e,c),c}onMuteChange(e){return this.listeners.add(e),e(this.muted),()=>this.listeners.delete(e)}isMuted(){return this.muted}setMuted(e){e!==this.muted&&(this.muted=e,this.muted||this.pools.forEach(t=>t.els.forEach(Se)),this.applyMusic(),this.listeners.forEach(t=>t(this.muted)))}toggleMuted(){this.setMuted(!this.muted)}playOneShot(e,t){if(this.muted)return;const n=this.pools.get(e);if(!n)return;const i=performance.now();if(i-(this.lastPlayed.get(e)??-1/0)<this.coalesceMs)return;this.lastPlayed.set(e,i);const c=n.els.length;let o;for(let a=0;a<c;a+=1){const r=n.els[(n.next+a)%c];if(r.paused){o=r,n.next=(n.next+a+1)%c;break}}o||(o=n.els[n.next],n.next=(n.next+1)%c),o.muted=!1,o.volume=t??n.volume,o.currentTime!==0&&(o.currentTime=0),o.play().catch(()=>{})}startMusic(e,t=.4){this.musicWanted={url:e,volume:t},this.applyMusic()}stopMusic(){this.musicWanted=null,this.music&&(this.music.pause(),this.music.currentTime=0)}applyMusic(){!this.music||!this.musicWanted||(this.music.volume=this.musicWanted.volume,!this.muted&&this.music.paused&&this.music.play().catch(()=>{}),this.muted&&!this.music.paused&&this.music.pause())}}const w=new V,ye=(s,e)=>w.prefetchMusic(s,e),be=(s,e)=>w.registerSound(s,e),Re=(s,e)=>w.startMusic(s,e),we=()=>w.stopMusic(),Ce=(s,e)=>w.playOneShot(s,e),Ee=s=>w.setMuted(s),je=()=>w.toggleMuted(),Pe=()=>w.isMuted(),Oe=s=>w.onMuteChange(s),ke=()=>{const[s,e]=u.useState(w.isMuted());return u.useEffect(()=>w.onMuteChange(e),[]),s};exports.XRMediaSource=A.XRMediaSource;exports.XRModel=A.XRModel;exports.XRProvider=A.XRProvider;exports.ScreenTransform=W.ScreenTransform;exports.XRScene=W.XRScene;exports.useScreenRectAspect=W.useScreenRectAspect;exports.AspectRatioContainer=ee;exports.AudioEngine=V;exports.Panel=re;exports.ScreenSpaceUI=oe;exports.SpriteAnimation=le;exports.TextLabel=fe;exports.VideoBackground=pe;exports.audio=w;exports.computeContainScale=Z;exports.dataURLtoFile=Me;exports.isMuted=Pe;exports.onMuteChange=Oe;exports.playOneShot=Ce;exports.prefetchMusic=ye;exports.registerSound=be;exports.setMuted=Ee;exports.startMusic=Re;exports.stopMusic=we;exports.toggleMuted=je;exports.useMediaRecorder=ge;exports.useMuted=ke;

package/dist/main.js

@@ -0,0 +1,612 @@
+var Q = Object.defineProperty;
+var ee = (r, e, t) => e in r ? Q(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var R = (r, e, t) => ee(r, typeof e != "symbol" ? e + "" : e, t);
+import { useState as W, useEffect as k, useRef as y, useMemo as I, Suspense as te, useCallback as F } from "react";
+import { X as re, R as ne } from "./index-CYMj26Ej.js";
+import { b as rt, a as nt } from "./index-CYMj26Ej.js";
+import { S as se, a as ie, u as oe } from "./index-DtwHElmG.js";
+import { X as it } from "./index-DtwHElmG.js";
+import { jsx as p, jsxs as P, Fragment as X } from "react/jsx-runtime";
+import { useThree as Y, useFrame as ae } from "@react-three/fiber";
+import * as K from "three";
+import { PerspectiveCamera as J, RepeatWrapping as q, LinearFilter as H } from "three";
+import { u as ce, a as le } from "./selectors-BHO6TnoC.js";
+import { useTexture as ue } from "@react-three/drei";
+const $ = 9, G = 16, Ae = ({ children: r }) => {
+  const [e, t] = W({ width: 0, height: 0 });
+  return k(() => {
+    const n = () => {
+      const i = document.documentElement.clientWidth, c = document.documentElement.clientHeight, o = i / c, a = $ / G;
+      let s, u;
+      o > a ? (u = c, s = u * $ / G) : (s = i, u = s * G / $), t({ width: s, height: u });
+    };
+    return n(), window.addEventListener("resize", n), () => window.removeEventListener("resize", n);
+  }, []), /* @__PURE__ */ p(
+    "div",
+    {
+      style: {
+        width: "100vw",
+        height: `${window.innerHeight}px`,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "#0d0d0d"
+      },
+      children: /* @__PURE__ */ p("div", { style: { width: e.width, height: e.height, position: "relative" }, children: r })
+    }
+  );
+}, de = "rgba(20,40,110,0.88)", he = 24, fe = 512;
+function _e({
+  color: r = de,
+  borderColor: e,
+  borderWidth: t = 0,
+  borderRadius: n = he,
+  resolution: i = fe,
+  aspect: c = 1,
+  opacity: o = 1,
+  name: a,
+  overlay: s = !0,
+  position: u,
+  rotation: g,
+  scale: m,
+  visible: l
+}) {
+  const M = y(null), v = y(null), w = I(() => me({
+    width: Math.round(i * Math.max(c, 0.05)),
+    height: Math.round(i),
+    color: r,
+    borderColor: e,
+    borderWidth: t,
+    borderRadius: n
+  }), [r, e, t, n, i, c]);
+  k(() => () => {
+    w.dispose();
+  }, [w]);
+  const b = y(null), S = y(o);
+  return S.current !== o && (S.current = o, b.current = null, v.current && (v.current.opacity = o)), k(() => {
+    const d = M.current;
+    if (d)
+      return d.userData.setOpacity = (L) => {
+        b.current = L, v.current && (v.current.opacity = L);
+      }, () => {
+        delete d.userData.setOpacity;
+      };
+  }, []), /* @__PURE__ */ P(
+    "mesh",
+    {
+      ref: M,
+      name: a,
+      position: u,
+      rotation: g,
+      scale: m,
+      visible: l,
+      children: [
+        /* @__PURE__ */ p("planeGeometry", { args: [1, 1] }),
+        /* @__PURE__ */ p(
+          "meshBasicMaterial",
+          {
+            ref: v,
+            map: w,
+            transparent: !0,
+            opacity: o,
+            depthTest: !s,
+            depthWrite: !s
+          }
+        )
+      ]
+    }
+  );
+}
+function me(r) {
+  const { width: e, height: t, color: n, borderColor: i, borderWidth: c, borderRadius: o } = r, a = typeof OffscreenCanvas < "u" ? new OffscreenCanvas(e, t) : (() => {
+    const m = document.createElement("canvas");
+    return m.width = e, m.height = t, m;
+  })(), s = a.getContext("2d");
+  s.clearRect(0, 0, e, t);
+  const u = Math.min(o, Math.min(e, t) / 2);
+  s.beginPath(), s.moveTo(u, 0), s.lineTo(e - u, 0), s.quadraticCurveTo(e, 0, e, u), s.lineTo(e, t - u), s.quadraticCurveTo(e, t, e - u, t), s.lineTo(u, t), s.quadraticCurveTo(0, t, 0, t - u), s.lineTo(0, u), s.quadraticCurveTo(0, 0, u, 0), s.closePath(), s.fillStyle = n, s.fill(), i && c > 0 && (s.lineWidth = c, s.strokeStyle = i, s.stroke());
+  const g = new K.CanvasTexture(a);
+  return g.needsUpdate = !0, g;
+}
+const ze = ({ children: r, depth: e = 0 }) => {
+  const { camera: t, size: n } = Y(), i = I(() => {
+    if (!(t instanceof J))
+      return { width: 10, height: 10 };
+    const c = Math.abs(t.position.z - e), o = t.fov * Math.PI / 180, a = 2 * Math.tan(o / 2) * c;
+    return { width: a * (n.width / n.height), height: a };
+  }, [t, n, e]);
+  return /* @__PURE__ */ p(se.Provider, { value: i, children: /* @__PURE__ */ p("group", { position: [0, 0, e], children: r }) });
+};
+function pe(r, e) {
+  return !Number.isFinite(r) || !Number.isFinite(e) || r <= 0 || e <= 0 ? [1, 1, 1] : Math.abs(r - e) < 1e-6 ? [1, 1, 1] : r > e ? [e / r, 1, 1] : [1, r / e, 1];
+}
+const ge = { left: -1, right: 1, top: 1, bottom: -1 }, Me = (r, e, t) => {
+  const n = r % e, i = Math.floor(r / e);
+  return { x: n / e, y: (t - 1 - i) / t };
+}, ve = ({
+  sheet: r,
+  contentAspect: e,
+  renderOrder: t,
+  name: n
+}) => {
+  const i = ue(r.url), c = y(0), o = y(-1), a = oe(), [s, u] = e != null ? pe(a, e) : [1, 1];
+  return ae((g, m) => {
+    i.wrapS = q, i.wrapT = q, i.magFilter = H, i.minFilter = H, i.generateMipmaps = !1, i.repeat.set(1 / r.cols, 1 / r.rows), c.current += m;
+    const l = Math.floor(c.current * r.fps) % r.frames;
+    if (l === o.current) return;
+    o.current = l;
+    const { x: M, y: v } = Me(l, r.cols, r.rows);
+    i.offset.set(M, v);
+  }), /* @__PURE__ */ P("mesh", { name: n, renderOrder: t, scale: [s, u, 1], children: [
+    /* @__PURE__ */ p("planeGeometry", { args: [1, 1] }),
+    /* @__PURE__ */ p("meshBasicMaterial", { map: i, transparent: !0, toneMapped: !1, depthWrite: !1 })
+  ] });
+}, Be = ({
+  sheet: r,
+  anchors: e = ge,
+  contentAspect: t,
+  renderOrder: n = 10,
+  name: i = "spriteAnimation"
+}) => /* @__PURE__ */ p(te, { fallback: null, children: /* @__PURE__ */ p(ie, { anchors: e, children: /* @__PURE__ */ p(ve, { sheet: r, contentAspect: t, renderOrder: n, name: i }) }) }), Te = {
+  color: "#ffffff",
+  fontWeight: "bold",
+  fontFamily: "Arial, sans-serif",
+  fontSize: 48,
+  bgColor: "rgba(20,40,110,0.88)",
+  borderWidth: 0,
+  borderRadius: 24,
+  padding: 32,
+  aspect: 2.5,
+  resolution: 512,
+  opacity: 1
+};
+function Ie(r) {
+  const e = { ...Te, ...r }, {
+    text: t,
+    color: n,
+    fontWeight: i,
+    fontFamily: c,
+    fontSize: o,
+    bgColor: a,
+    borderColor: s,
+    borderWidth: u,
+    borderRadius: g,
+    padding: m,
+    aspect: l,
+    resolution: M,
+    opacity: v,
+    name: w,
+    overlay: b = !0,
+    position: S,
+    rotation: d,
+    scale: L,
+    visible: N
+  } = e, [_, z] = W(null), [B, A] = W(null), h = y(t);
+  h.current !== t && (h.current = t, _ !== null && z(null));
+  const T = y(a);
+  T.current !== a && (T.current = a, B !== null && A(null));
+  const f = y(null), E = _ ?? t, D = B ?? a, O = I(
+    () => ye({
+      text: E,
+      color: n,
+      fontWeight: i,
+      fontFamily: c,
+      fontSize: o,
+      bgColor: D,
+      borderColor: s,
+      borderWidth: u,
+      borderRadius: g,
+      padding: m,
+      height: M,
+      width: Math.round(M * Math.max(l, 0.1))
+    }),
+    [
+      E,
+      n,
+      i,
+      c,
+      o,
+      D,
+      s,
+      u,
+      g,
+      m,
+      l,
+      M
+    ]
+  );
+  return k(() => {
+    const x = f.current;
+    if (x)
+      return x.userData.setText = (U) => z(U), x.userData.setBgColor = (U) => A(U), () => {
+        delete x.userData.setText, delete x.userData.setBgColor;
+      };
+  }, []), k(() => () => {
+    O.dispose();
+  }, [O]), /* @__PURE__ */ P(
+    "mesh",
+    {
+      ref: f,
+      name: w,
+      position: S,
+      rotation: d,
+      scale: L,
+      visible: N,
+      children: [
+        /* @__PURE__ */ p("planeGeometry", { args: [1, 1] }),
+        /* @__PURE__ */ p(
+          "meshBasicMaterial",
+          {
+            map: O,
+            transparent: !0,
+            opacity: v,
+            depthTest: !b,
+            depthWrite: !b
+          }
+        )
+      ]
+    }
+  );
+}
+function ye(r) {
+  const { width: e, height: t, text: n, color: i, fontFamily: c, fontWeight: o, padding: a } = r;
+  let { fontSize: s, bgColor: u } = r, g;
+  const m = typeof OffscreenCanvas < "u" ? new OffscreenCanvas(e, t) : (() => {
+    const d = document.createElement("canvas");
+    return d.width = e, d.height = t, d;
+  })(), l = m.getContext("2d");
+  if (l.clearRect(0, 0, e, t), u !== "transparent") {
+    const d = Math.min(r.borderRadius, Math.min(e, t) / 2);
+    l.beginPath(), l.moveTo(d, 0), l.lineTo(e - d, 0), l.quadraticCurveTo(e, 0, e, d), l.lineTo(e, t - d), l.quadraticCurveTo(e, t, e - d, t), l.lineTo(d, t), l.quadraticCurveTo(0, t, 0, t - d), l.lineTo(0, d), l.quadraticCurveTo(0, 0, d, 0), l.closePath(), l.fillStyle = u, l.fill(), r.borderColor && r.borderWidth > 0 && (l.lineWidth = r.borderWidth, l.strokeStyle = r.borderColor, l.stroke());
+  }
+  l.fillStyle = i, l.textAlign = "center", l.textBaseline = "middle";
+  const M = e - a * 2;
+  let v = Z(l, n, M, o, s, c);
+  const w = Math.max(1, Math.floor((t - a * 2) / (s * 1.3)));
+  v.length > w && (s = Math.max(12, Math.round(s * 0.75)), v = Z(l, n, M, o, s, c)), l.font = `${o} ${s}px ${c}`;
+  const b = s * 1.3, S = t / 2 - (v.length - 1) * b / 2;
+  for (let d = 0; d < v.length; d++)
+    l.fillText(v[d], e / 2, S + d * b);
+  return g = new K.CanvasTexture(m), g.needsUpdate = !0, g;
+}
+function Z(r, e, t, n, i, c) {
+  r.font = `${n} ${i}px ${c}`;
+  const o = e.split(" "), a = [];
+  let s = "";
+  for (const u of o) {
+    const g = s ? `${s} ${u}` : u;
+    r.measureText(g).width > t && s ? (a.push(s), s = u) : s = g;
+  }
+  return s && a.push(s), a;
+}
+const Ne = ({
+  segmentationMask: r,
+  segmentation: e,
+  invert: t = !1,
+  customBackground: n,
+  renderOrder: i = ne.BACKGROUND
+}) => {
+  const { camera: c, size: o } = Y(), a = ce(), s = le(re.BACKGROUND_SEGMENTATION), u = e ? s == null ? void 0 : s.backgroundSegmentationMask : void 0, g = y(!1);
+  k(() => {
+    if (!e) {
+      g.current = !1;
+      return;
+    }
+    s === null && !g.current && (console.warn(
+      `[VideoBackground] segmentation="${e}" set but no matching <Segmentation> component is mounted; rendering unmasked.`
+    ), g.current = !0);
+  }, [e, s]);
+  const m = e ? u : r, l = I(() => {
+    if (!(c instanceof J))
+      return [10, 10];
+    const w = (c.position.z || 5) - -1, b = c.fov * Math.PI / 180, S = 2 * Math.tan(b / 2) * w;
+    return [S * (o.width / o.height), S];
+  }, [c, o]);
+  return a ? /* @__PURE__ */ p("group", { position: [0, 0, -1], children: t ? /* @__PURE__ */ P(X, { children: [
+    /* @__PURE__ */ P("mesh", { position: [0, 0, -0.01], renderOrder: i - 1, children: [
+      /* @__PURE__ */ p("planeGeometry", { args: l }),
+      /* @__PURE__ */ p(
+        "meshBasicMaterial",
+        {
+          map: a,
+          depthTest: !1,
+          depthWrite: !1,
+          toneMapped: !1
+        }
+      )
+    ] }),
+    n && m && /* @__PURE__ */ P("mesh", { position: [0, 0, 0], renderOrder: i, children: [
+      /* @__PURE__ */ p("planeGeometry", { args: l }),
+      /* @__PURE__ */ p(
+        "meshBasicMaterial",
+        {
+          map: typeof n == "string" ? void 0 : n,
+          color: typeof n == "string" ? n : void 0,
+          alphaMap: m,
+          transparent: !1,
+          alphaTest: 0.5,
+          depthTest: !1,
+          depthWrite: !1,
+          toneMapped: !1
+        },
+        "inverted-mask"
+      )
+    ] })
+  ] }) : /* @__PURE__ */ P(X, { children: [
+    n && m && /* @__PURE__ */ P("mesh", { position: [0, 0, -0.01], renderOrder: i - 1, children: [
+      /* @__PURE__ */ p("planeGeometry", { args: l }),
+      /* @__PURE__ */ p(
+        "meshBasicMaterial",
+        {
+          map: typeof n == "string" ? void 0 : n,
+          color: typeof n == "string" ? n : void 0,
+          depthTest: !1,
+          depthWrite: !1,
+          toneMapped: !1
+        }
+      )
+    ] }),
+    /* @__PURE__ */ P("mesh", { position: [0, 0, 0], renderOrder: i, children: [
+      /* @__PURE__ */ p("planeGeometry", { args: l }),
+      /* @__PURE__ */ p(
+        "meshBasicMaterial",
+        {
+          map: a,
+          alphaMap: m,
+          transparent: !1,
+          alphaTest: m ? 0.5 : void 0,
+          depthTest: !1,
+          depthWrite: !1,
+          toneMapped: !1
+        },
+        m ? "with-mask" : "no-mask"
+      )
+    ] })
+  ] }) }) : null;
+}, we = [
+  "video/mp4",
+  "video/webm;codecs=vp9",
+  "video/webm;codecs=vp8",
+  "video/webm"
+];
+function $e(r = {}) {
+  const { audio: e = !1, mimeType: t, bitsPerSecond: n, onData: i, onStop: c, passThroughStream: o } = r, a = y(null), s = y(null), u = y([]), [g, m] = W(!1), [l, M] = W(!1), [v, w] = W(null), [b, S] = W(null), d = F(() => {
+    var T;
+    const h = [t, ...we].filter(Boolean);
+    for (const f of h)
+      if ((T = MediaRecorder.isTypeSupported) != null && T.call(MediaRecorder, f)) return f;
+  }, [t]), L = F(
+    async (h) => {
+      const T = new MediaStream();
+      if (h.getTracks().forEach((f) => T.addTrack(f)), e) {
+        let f;
+        if (e instanceof MediaStream)
+          f = e;
+        else {
+          const E = typeof e == "object" ? { audio: e } : { audio: !0, video: !1 };
+          f = await navigator.mediaDevices.getUserMedia(E);
+        }
+        f.getAudioTracks().forEach((E) => T.addTrack(E));
+      }
+      if (!T.getTracks().length)
+        throw new Error("No tracks available in combined stream.");
+      return s.current = T, T;
+    },
+    [e]
+  ), N = F(
+    async (h, T) => {
+      try {
+        let f;
+        o ? (f = h, s.current = f) : f = await L(h);
+        const E = d(), D = {};
+        E && (D.mimeType = E), n && (D.bitsPerSecond = n);
+        const O = new MediaRecorder(f, D);
+        O.ondataavailable = (x) => {
+          var U;
+          ((U = x.data) == null ? void 0 : U.size) > 0 && (u.current.push(x.data), i == null || i(x.data));
+        }, O.onstop = () => {
+          const x = new Blob(u.current, {
+            type: E ?? "video/webm"
+          });
+          w(x), c == null || c(x), u.current = [];
+        }, a.current = O, O.start(T), m(!0), M(!1);
+      } catch (f) {
+        console.error("start(stream) failed", f), S(f instanceof Error ? f : new Error(String(f)));
+      }
+    },
+    [L, d, n, i, c, o]
+  ), _ = F(() => {
+    const h = a.current;
+    h && h.state !== "inactive" && h.stop(), m(!1), M(!1);
+  }, []), z = F(() => {
+    const h = a.current;
+    (h == null ? void 0 : h.state) === "recording" && (h.pause(), M(!0));
+  }, []), B = F(() => {
+    const h = a.current;
+    (h == null ? void 0 : h.state) === "paused" && (h.resume(), M(!1));
+  }, []), A = F(() => {
+    var h, T;
+    try {
+      (h = a.current) == null || h.stop(), a.current = null, (T = s.current) == null || T.getTracks().forEach((f) => f.stop()), s.current = null, w(null), m(!1), M(!1), u.current = [], S(null);
+    } catch (f) {
+      console.error("clear failed", f);
+    }
+  }, []);
+  return k(() => () => A(), []), {
+    start: N,
+    stop: _,
+    pause: z,
+    resume: B,
+    clear: A,
+    isRecording: g,
+    isPaused: l,
+    recordedBlob: v,
+    error: b,
+    getActiveStream: () => s.current
+  };
+}
+const Ge = (r, e) => {
+  const t = r.split(","), n = t[0].match(/:(.*?);/), i = n ? n[1] : "application/octet-stream", c = atob(t[t.length - 1]);
+  let o = c.length;
+  const a = new Uint8Array(o);
+  for (; o--; )
+    a[o] = c.charCodeAt(o);
+  return new File([a], e, { type: i });
+}, be = 4, Se = 50, xe = 5e3, j = (r) => new Promise((e) => {
+  if (r.readyState >= 4) {
+    e();
+    return;
+  }
+  let t = !1;
+  const n = () => {
+    t || (t = !0, e());
+  };
+  r.addEventListener("canplaythrough", n, { once: !0 }), r.addEventListener("error", n, { once: !0 }), setTimeout(n, xe);
+}), V = (r, e) => {
+  const t = document.createElement("audio");
+  return t.src = r, t.loop = e, t.preload = "auto", t.setAttribute("playsinline", ""), t.setAttribute("webkit-playsinline", ""), t.load(), t;
+}, Ce = (r) => {
+  r.muted = !0, r.play().then(() => {
+    r.pause(), r.currentTime = 0, r.muted = !1;
+  }).catch(() => {
+    r.muted = !1;
+  });
+};
+class Ee {
+  constructor(e = {}) {
+    R(this, "sfxPoolSize");
+    R(this, "coalesceMs");
+    R(this, "muted", !0);
+    R(this, "listeners", /* @__PURE__ */ new Set());
+    R(this, "music", null);
+    R(this, "musicWanted", null);
+    R(this, "pools", /* @__PURE__ */ new Map());
+    /** Last play time per SFX URL, for the coalesce window. */
+    R(this, "lastPlayed", /* @__PURE__ */ new Map());
+    /** Readiness promises so a loading gate can await decode/buffer. */
+    R(this, "ready", /* @__PURE__ */ new Map());
+    this.sfxPoolSize = e.sfxPoolSize ?? be, this.coalesceMs = e.coalesceMs ?? Se;
+  }
+  /**
+   * Create + buffer the looping music element. Await in the loading gate so the
+   * unmute tap is instant. Idempotent per URL (re-requesting the same track is
+   * a no-op that returns the in-flight promise).
+   */
+  prefetchMusic(e, t = 0.4) {
+    this.musicWanted = { url: e, volume: t };
+    const n = `music:${e}`, i = this.ready.get(n);
+    if (i) return i;
+    this.music = V(e, !0), this.music.volume = t;
+    const c = j(this.music);
+    return this.ready.set(n, c), c;
+  }
+  /**
+   * Create + buffer an SFX voice pool (round-robin so overlapping plays don't
+   * cut each other off). Returns a promise that resolves when the first element
+   * buffers. Idempotent per URL.
+   */
+  registerSound(e, t = 1) {
+    const n = this.ready.get(e);
+    if (n) return n;
+    const i = [];
+    for (let o = 0; o < this.sfxPoolSize; o += 1) {
+      const a = V(e, !1);
+      a.volume = t, a.addEventListener("ended", () => {
+        a.currentTime = 0;
+      }), i.push(a);
+    }
+    this.pools.set(e, { els: i, next: 0, volume: t });
+    const c = j(i[0]);
+    return this.ready.set(e, c), c;
+  }
+  /** Subscribe to mute-state changes (for a toggle UI). Fires immediately with
+   *  the current state. Returns an unsubscribe. */
+  onMuteChange(e) {
+    return this.listeners.add(e), e(this.muted), () => this.listeners.delete(e);
+  }
+  isMuted() {
+    return this.muted;
+  }
+  /**
+   * Toggle sound. The first unmute is a real user gesture that unlocks every
+   * preloaded element (iOS gates media playback on a gesture): touch each SFX
+   * element with a muted play/pause so later `playOneShot` calls are allowed,
+   * then start the music. All elements are already buffered, so this is instant.
+   */
+  setMuted(e) {
+    e !== this.muted && (this.muted = e, this.muted || this.pools.forEach((t) => t.els.forEach(Ce)), this.applyMusic(), this.listeners.forEach((t) => t(this.muted)));
+  }
+  toggleMuted() {
+    this.setMuted(!this.muted);
+  }
+  /**
+   * Play a preloaded SFX; no-op while muted. Cycles the voice pool so
+   * overlapping plays don't cut each other off, coalesces a rapid repeat of the
+   * same sound into one play, and does NO synchronous `currentTime` seek on a
+   * ready element (the pool rewinds on `ended`, off the hot path).
+   */
+  playOneShot(e, t) {
+    if (this.muted) return;
+    const n = this.pools.get(e);
+    if (!n) return;
+    const i = performance.now();
+    if (i - (this.lastPlayed.get(e) ?? -1 / 0) < this.coalesceMs) return;
+    this.lastPlayed.set(e, i);
+    const c = n.els.length;
+    let o;
+    for (let a = 0; a < c; a += 1) {
+      const s = n.els[(n.next + a) % c];
+      if (s.paused) {
+        o = s, n.next = (n.next + a + 1) % c;
+        break;
+      }
+    }
+    o || (o = n.els[n.next], n.next = (n.next + 1) % c), o.muted = !1, o.volume = t ?? n.volume, o.currentTime !== 0 && (o.currentTime = 0), o.play().catch(() => {
+    });
+  }
+  /** Request the looping background track (buffer it with prefetchMusic, which
+   *  a loading gate awaits). Remembered while muted; starts on unmute. */
+  startMusic(e, t = 0.4) {
+    this.musicWanted = { url: e, volume: t }, this.applyMusic();
+  }
+  stopMusic() {
+    this.musicWanted = null, this.music && (this.music.pause(), this.music.currentTime = 0);
+  }
+  applyMusic() {
+    !this.music || !this.musicWanted || (this.music.volume = this.musicWanted.volume, !this.muted && this.music.paused && this.music.play().catch(() => {
+    }), this.muted && !this.music.paused && this.music.pause());
+  }
+}
+const C = new Ee(), Xe = (r, e) => C.prefetchMusic(r, e), qe = (r, e) => C.registerSound(r, e), He = (r, e) => C.startMusic(r, e), Ze = () => C.stopMusic(), je = (r, e) => C.playOneShot(r, e), Ve = (r) => C.setMuted(r), Ye = () => C.toggleMuted(), Ke = () => C.isMuted(), Je = (r) => C.onMuteChange(r), Qe = () => {
+  const [r, e] = W(C.isMuted());
+  return k(() => C.onMuteChange(e), []), r;
+};
+export {
+  Ae as AspectRatioContainer,
+  Ee as AudioEngine,
+  _e as Panel,
+  ze as ScreenSpaceUI,
+  ie as ScreenTransform,
+  Be as SpriteAnimation,
+  Ie as TextLabel,
+  Ne as VideoBackground,
+  rt as XRMediaSource,
+  re as XRModel,
+  nt as XRProvider,
+  it as XRScene,
+  C as audio,
+  pe as computeContainScale,
+  Ge as dataURLtoFile,
+  Ke as isMuted,
+  Je as onMuteChange,
+  je as playOneShot,
+  Xe as prefetchMusic,
+  qe as registerSound,
+  Ve as setMuted,
+  He as startMusic,
+  Ze as stopMusic,
+  Ye as toggleMuted,
+  $e as useMediaRecorder,
+  Qe as useMuted,
+  oe as useScreenRectAspect
+};

package/dist/models/Base/index.d.ts

@@ -0,0 +1,25 @@
+import { RunModelParams } from '../../types';
+import { PerformanceData } from '../../types/common';
+export declare class BaseXRModel {
+    protected disposed: boolean;
+    protected paused: boolean;
+    protected rafId: number | null;
+    protected targetFrameIntervalMs: number;
+    protected lastInferenceMs: number;
+    /** Set the per-frame inference cap. fps <= 0 (or undefined) → uncapped. */
+    protected setTargetFps(fps: number | undefined): void;
+    /**
+     * True if enough time has elapsed to run inference this frame (and records
+     * the timestamp). Always true when uncapped. Call once per RAF tick, right
+     * before the detect call; skip the detect (but keep rescheduling RAF) when
+     * it returns false.
+     */
+    protected shouldRunInference(): boolean;
+    initialize(_options?: Record<string, unknown>): Promise<void>;
+    run(_params?: RunModelParams): Promise<void>;
+    getModelNode(): {};
+    getPerformanceData(): Promise<PerformanceData>;
+    pause(): void;
+    resume(): void;
+    dispose(): void;
+}

package/dist/models/Body/index.d.ts

@@ -0,0 +1,22 @@
+import { RunModelParams } from '../../types';
+import { BodyModelOptions } from '../../types/body';
+import { PerformanceData } from '../../types/common';
+import { XRModelNodeBodyTracking } from '../../types/nodes';
+import { BaseXRModel } from '../Base';
+export declare class BodyTrackingModel extends BaseXRModel {
+    private landmarker;
+    private processingTime;
+    private coordinates;
+    private sourceCanvas;
+    private readonly downscaler;
+    constructor();
+    private getBodyData;
+    private processBodyTracking;
+    resume(): void;
+    dispose(): void;
+    private getLandmarks2D;
+    initialize(options?: BodyModelOptions): Promise<void>;
+    run({ sourceCanvas }: RunModelParams): Promise<void>;
+    getModelNode(): XRModelNodeBodyTracking;
+    getPerformanceData(): Promise<PerformanceData>;
+}