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

package/dist/screen2d/types.d.ts

@@ -0,0 +1,90 @@
+import type * as THREE from "three";
+export type ScreenTransformMode = "basic" | "advanced";
+export type ScreenCoordinateSpace = "normalized" | "canvas";
+export type ScreenCanvasSize = {
+    width: number;
+    height: number;
+};
+export type ScreenTransform2D = {
+    mode?: ScreenTransformMode;
+    coordinateSpace?: ScreenCoordinateSpace;
+    canvasSize?: ScreenCanvasSize;
+    position?: [number, number];
+    size?: [number, number];
+    rotation?: number;
+    pivot?: [number, number];
+    anchors?: {
+        left?: number;
+        right?: number;
+        top?: number;
+        bottom?: number;
+    };
+    offsets?: {
+        left?: number;
+        right?: number;
+        top?: number;
+        bottom?: number;
+    };
+};
+export type MaterialKind = "image" | "surface" | "text";
+export type MaterialType = "unlit" | "standardPBR" | "matcap";
+export type BlendMode = "normal" | "add" | "subtract" | "multiply" | "screen" | "lighten" | "darken";
+export type TextureSource = {
+    kind: "none";
+} | {
+    kind: "asset";
+    id: string;
+    url?: string;
+    width?: number;
+    height?: number;
+} | {
+    kind: "image";
+    src: string;
+    width?: number;
+    height?: number;
+} | {
+    kind: "texture";
+    texture: THREE.Texture;
+    width?: number;
+    height?: number;
+} | {
+    kind: "video";
+    src: string;
+    width?: number;
+    height?: number;
+} | {
+    kind: "camera";
+    width?: number;
+    height?: number;
+} | {
+    kind: "renderTexture";
+    id: string;
+    texture?: THREE.Texture;
+    width?: number;
+    height?: number;
+} | {
+    kind: "depthTexture";
+    id: string;
+    texture?: THREE.Texture;
+    width?: number;
+    height?: number;
+};
+export type Material = {
+    kind: MaterialKind;
+    type?: MaterialType;
+    texture?: TextureSource;
+    color?: THREE.ColorRepresentation;
+    opacity?: number;
+    blendMode?: BlendMode;
+    alphaTest?: number;
+    flipX?: boolean;
+    flipY?: boolean;
+};
+export type ImageStretchMode = "fit" | "fitWidth" | "fitHeight" | "stretch" | "fill" | "fillAndCut";
+export type RenderOutputKind = "mediaColor" | "sceneColor" | "finalColor" | "sceneDepth" | "estimatedDepth";
+export type RenderTextureSource = Extract<TextureSource, {
+    kind: "renderTexture";
+}>;
+export type DepthTextureSource = Extract<TextureSource, {
+    kind: "depthTexture";
+}>;

package/dist/{selectors-Bub0o3qy.cjs → selectors-2QvO5RYY.cjs}

@@ -1 +1 @@
-"use strict";const s=require("react"),u=require("./index-PtFmD6B8.cjs"),o=()=>u.useXRContext().session.store,n=e=>t=>e.subscribe(t),c=()=>{const e=o();return s.useSyncExternalStore(n(e),()=>e.getSnapshot().ready,()=>!1)},a=()=>{const e=o();return s.useSyncExternalStore(n(e),()=>e.getSnapshot().error,()=>{})},i=()=>{const e=o();return s.useSyncExternalStore(n(e),()=>e.getSnapshot().cameraTexture,()=>{})},S=()=>{const e=o(),t=s.useSyncExternalStore(n(e),()=>e.getSnapshot().renderWidth,()=>0),r=s.useSyncExternalStore(n(e),()=>e.getSnapshot().renderHeight,()=>0);return s.useMemo(()=>({width:t,height:r}),[t,r])},l=e=>{const t=o(),r=s.useSyncExternalStore(n(t),()=>t.getSnapshot().pipeline.get(e)??null,()=>null);return s.useMemo(()=>r?r.getModelNode():null,[r])},p=()=>{const e=o(),t=s.useSyncExternalStore(n(e),()=>e.getSnapshot().pipeline,()=>e.getSnapshot().pipeline);return s.useMemo(()=>Array.from(t.keys()),[t])};exports.useXRCameraTexture=i;exports.useXRError=a;exports.useXRModelNode=l;exports.useXRPipelineSnapshot=p;exports.useXRReady=c;exports.useXRRenderSize=S;
+"use strict";const s=require("react"),u=require("./index-D4bLzBr6.cjs"),o=()=>u.useXRContext().session.store,n=e=>t=>e.subscribe(t),c=()=>{const e=o();return s.useSyncExternalStore(n(e),()=>e.getSnapshot().ready,()=>!1)},a=()=>{const e=o();return s.useSyncExternalStore(n(e),()=>e.getSnapshot().error,()=>{})},i=()=>{const e=o();return s.useSyncExternalStore(n(e),()=>e.getSnapshot().cameraTexture,()=>{})},S=()=>{const e=o(),t=s.useSyncExternalStore(n(e),()=>e.getSnapshot().renderWidth,()=>0),r=s.useSyncExternalStore(n(e),()=>e.getSnapshot().renderHeight,()=>0);return s.useMemo(()=>({width:t,height:r}),[t,r])},l=e=>{const t=o(),r=s.useSyncExternalStore(n(t),()=>t.getSnapshot().pipeline.get(e)??null,()=>null);return s.useMemo(()=>r?r.getModelNode():null,[r])},p=()=>{const e=o(),t=s.useSyncExternalStore(n(e),()=>e.getSnapshot().pipeline,()=>e.getSnapshot().pipeline);return s.useMemo(()=>Array.from(t.keys()),[t])};exports.useXRCameraTexture=i;exports.useXRError=a;exports.useXRModelNode=l;exports.useXRPipelineSnapshot=p;exports.useXRReady=c;exports.useXRRenderSize=S;

package/dist/{selectors-BHO6TnoC.js → selectors-Dw3C-gSk.js}

@@ -1,5 +1,5 @@
 import { useSyncExternalStore as s, useMemo as a } from "react";
-import { u } from "./index-CYMj26Ej.js";
+import { u } from "./index-JygePOwo.js";
 const r = () => u().session.store, o = (e) => (t) => e.subscribe(t), p = () => {
   const e = r();
   return s(
@@ -50,10 +50,10 @@ const r = () => u().session.store, o = (e) => (t) => e.subscribe(t), p = () => {
   return a(() => Array.from(t.keys()), [t]);
 };
 export {
-  S as a,
-  p as b,
-  l as c,
+  l as a,
+  d as b,
+  S as c,
   h as d,
   g as e,
-  d as u
+  p as u
 };

package/dist/services/MetricsCollector/index.d.ts

@@ -1,5 +1,11 @@
 import { DebuggerMetrics } from '../../types/debugger';
 import { MetricsCollectorOptions } from './types';
+type PerformanceModel = {
+    getPerformanceData?: () => Promise<{
+        name: string;
+        processingTime?: number | null;
+    }>;
+};
 export declare class MetricsCollector {
     private options;
     private isRunning;
@@ -45,7 +51,7 @@ export declare class MetricsCollector {
      * Update detection time from models
      * Aggregates processing time from all active models in the XR pipeline
      */
-    updateDetectionTime(pipeline?: Partial<Record<string, any>>): Promise<void>;
+    updateDetectionTime(pipeline?: Partial<Record<string, PerformanceModel>>): Promise<void>;
     /**
      * Update effective FPS calculation
      * (will be implemented in Phase 6)

package/dist/services/MetricsCollector/utils.d.ts

@@ -45,7 +45,7 @@ export declare function smoothValue(currentValue: number, newValue: number, smoo
  * @param func Function to throttle
  * @param wait Minimum time between executions in milliseconds
  */
-export declare function throttle<T extends (...args: any[]) => any>(func: T, wait: number): (...args: Parameters<T>) => void;
+export declare function throttle<T extends (...args: never[]) => unknown>(func: T, wait: number): (...args: Parameters<T>) => void;
 /**
  * Format number to fixed decimal places
  * @param value Number to format

package/dist/session-BChR4TgK.cjs

@@ -0,0 +1,31 @@
+"use strict";const p=require("./index-D4bLzBr6.cjs"),n=require("react/jsx-runtime"),L=require("react-dom"),c=require("react"),d=require("./x-KC8E4Gaj.cjs"),v=(t,e)=>new URL(`/assets/sdk/debug-ui/v1/${t}/${e}`,p.libConfig.assetStorageEndpoint).href,j=t=>t.replace(/\.[^.]+$/,"").replace(/[_-]+/g," ").replace(/\s+/g," ").trim().replace(/\b\w/g,e=>e.toUpperCase()),$=["person_fullbody.mp4","person_looking.mp4","person_shaking_head.mp4","person_thumbUp.mp4","two_people_smiling.mp4"],z=["person_fist_sign.jpg","person_fullbody.jpg","person_peace_sign.jpg","person_portrait.jpg","person_side_portrait.jpg","three_people_smiling.jpg","two_people_smiling.jpg"],W=(t,e)=>({id:`sdk-video-${e+1}`,kind:"video",label:j(t),url:v("videos",t)}),F=(t,e)=>({id:`sdk-image-${e+1}`,kind:"image",label:j(t),url:v("images",t)}),M=$.map(W),_=z.map(F),V=[{id:"webcam",kind:"webcam",label:"Webcam"},...M,..._];/**
+ * @license lucide-react v1.17.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const X=[["path",{d:"M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z",key:"18u6gg"}],["circle",{cx:"12",cy:"13",r:"3",key:"1vg3eu"}]],P=d.createLucideIcon("camera",X);/**
+ * @license lucide-react v1.17.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const T=[["path",{d:"m6 9 6 6 6-6",key:"qrunsl"}]],U=d.createLucideIcon("chevron-down",T);/**
+ * @license lucide-react v1.17.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const q=[["circle",{cx:"9",cy:"12",r:"1",key:"1vctgf"}],["circle",{cx:"9",cy:"5",r:"1",key:"hp0tcf"}],["circle",{cx:"9",cy:"19",r:"1",key:"fkjjf6"}],["circle",{cx:"15",cy:"12",r:"1",key:"1tmaij"}],["circle",{cx:"15",cy:"5",r:"1",key:"19l28e"}],["circle",{cx:"15",cy:"19",r:"1",key:"f4zoj3"}]],D=d.createLucideIcon("grip-vertical",q);/**
+ * @license lucide-react v1.17.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const N=[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",ry:"2",key:"1m3agn"}],["circle",{cx:"9",cy:"9",r:"2",key:"af1f0g"}],["path",{d:"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21",key:"1xmnt7"}]],A=d.createLucideIcon("image",N);/**
+ * @license lucide-react v1.17.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const K=[["path",{d:"M4 5h16",key:"1tepv9"}],["path",{d:"M4 12h16",key:"1lakjw"}],["path",{d:"M4 19h16",key:"1djgab"}]],B=d.createLucideIcon("menu",K);/**
+ * @license lucide-react v1.17.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const O=[["path",{d:"m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5",key:"ftymec"}],["rect",{x:"2",y:"6",width:"14",height:"12",rx:"2",key:"158x01"}]],H=d.createLucideIcon("video",O),G=t=>t==="webcam"?"📷 ":t==="image"?"🖼 ":"▶ ",Y={position:"fixed",zIndex:2e4,pointerEvents:"none"},I={pointerEvents:"auto",border:"1px solid rgba(255, 255, 255, 0.12)",background:"rgba(8, 15, 28, 0.58)",boxShadow:"0 12px 32px rgba(0, 0, 0, 0.28)",backdropFilter:"blur(20px) saturate(1.15)",WebkitBackdropFilter:"blur(20px) saturate(1.15)",color:"#f8fafc",display:"flex"},J={...I,width:34,height:34,borderRadius:17,alignItems:"center",justifyContent:"center",cursor:"pointer",transition:"transform 150ms ease"},Q={...I,flexDirection:"column",borderRadius:12,overflow:"hidden",padding:4,gap:4},Z={display:"flex",alignItems:"center",gap:3},ee={width:1,height:12,background:"rgba(255, 255, 255, 0.12)",margin:"0 3px"},te={display:"flex",width:16,height:24,alignItems:"center",justifyContent:"center",cursor:"grab",color:"rgba(148, 163, 184, 0.8)",flex:"0 0 auto"},k=(t=!1)=>({display:"flex",width:24,height:24,alignItems:"center",justifyContent:"center",borderRadius:8,border:`1px solid ${t?"rgba(255, 255, 255, 0.12)":"transparent"}`,background:t?"rgba(255, 255, 255, 0.08)":"transparent",color:t?"#f8fafc":"rgba(226, 232, 240, 0.72)",cursor:"pointer",flex:"0 0 auto",transition:"background 120ms ease, color 120ms ease"}),re={position:"relative",display:"flex",alignItems:"center"},ne={width:"100%",minWidth:140,height:24,borderRadius:8,border:"1px solid rgba(255, 255, 255, 0.10)",background:"rgba(15, 23, 42, 0.65)",color:"#f8fafc",fontSize:11,outline:"none",paddingLeft:7,paddingRight:20,appearance:"none",cursor:"pointer"},ie={pointerEvents:"none",position:"absolute",right:5,top:0,bottom:0,display:"flex",alignItems:"center",color:"rgba(148, 163, 184, 0.9)"},se={height:24,display:"flex",alignItems:"center",padding:"0 8px",borderRadius:8,border:"1px solid rgba(255, 255, 255, 0.08)",background:"rgba(255, 255, 255, 0.04)",color:"rgba(226, 232, 240, 0.72)",fontSize:11},S={width:14,height:14},oe=({value:t,onChange:e,sources:i,style:a})=>{const[l,m]=c.useState(!1),[o,y]=c.useState({x:16,y:16}),[u,f]=c.useState(t.kind),g=c.useRef(null),x=c.useMemo(()=>({webcam:i.filter(r=>r.kind==="webcam"),image:i.filter(r=>r.kind==="image"),video:i.filter(r=>r.kind==="video")}),[i]),b=x[u];c.useEffect(()=>{f(t.kind)},[t.kind]);const E=r=>{f(r);const s=x[r][0];s&&e(s)};c.useEffect(()=>{const r=h=>{g.current&&y({x:Math.max(8,h.clientX-g.current.x),y:Math.max(8,h.clientY-g.current.y)})},s=()=>{g.current=null,document.body.classList.remove("select-none")};return window.addEventListener("pointermove",r),window.addEventListener("pointerup",s),()=>{window.removeEventListener("pointermove",r),window.removeEventListener("pointerup",s)}},[]);const w=r=>{const s=r.currentTarget.getBoundingClientRect();g.current={x:r.clientX-s.left,y:r.clientY-s.top},document.body.classList.add("select-none"),r.currentTarget.setPointerCapture(r.pointerId)},C=()=>{if(b.length===0){const r=u==="webcam"?"No camera source":u==="image"?"No image preview":"No video preview";return n.jsx("div",{style:se,children:r})}return n.jsxs("div",{style:re,children:[n.jsx("select",{value:t.id,onChange:r=>{const s=i.find(h=>h.id===r.target.value);s&&e(s)},style:ne,children:b.map(r=>n.jsxs("option",{value:r.id,children:[G(u),r.label]},r.id))}),n.jsx("div",{style:ie,children:n.jsx("span",{style:{width:10,height:10},children:n.jsx(U,{size:10,strokeWidth:1.8})})})]})};return typeof document>"u"?null:L.createPortal(n.jsx("div",{style:{...Y,left:o.x,top:o.y,...a},children:l?n.jsxs("div",{style:Q,children:[n.jsxs("div",{style:Z,children:[n.jsx("div",{onPointerDown:w,style:te,title:"Drag to move",children:n.jsx(D,{size:11,strokeWidth:2})}),n.jsx("button",{type:"button",onClick:()=>m(!1),style:k(!1),title:"Close Menu",children:n.jsx("span",{style:S,children:n.jsx(d.X,{size:14,strokeWidth:1.8})})}),n.jsx("div",{style:ee}),["webcam","image","video"].map(r=>n.jsx("button",{type:"button",onClick:()=>E(r),style:k(u===r),title:r.charAt(0).toUpperCase()+r.slice(1),children:n.jsx("span",{style:S,children:r==="webcam"?n.jsx(P,{size:14,strokeWidth:1.8}):r==="image"?n.jsx(A,{size:14,strokeWidth:1.8}):n.jsx(H,{size:14,strokeWidth:1.8})})},r))]}),C()]}):n.jsx("div",{style:J,onClick:()=>m(!0),onPointerDown:w,title:"Open Media Menu",children:n.jsx("span",{style:{width:16,height:16},children:n.jsx(B,{size:14,strokeWidth:1.8})})})}),document.body)},ce=async t=>{const e=new Image;e.crossOrigin="anonymous",e.src=t,await e.decode();const i=document.createElement("canvas");i.width=e.naturalWidth,i.height=e.naturalHeight;const a=i.getContext("2d");if(!a)throw new Error("Unable to create image media canvas");return a.drawImage(e,0,0,i.width,i.height),i.captureStream(30)},ae=async t=>{const e=document.createElement("video");return e.src=t,e.loop=!0,e.muted=!0,e.playsInline=!0,e.crossOrigin="anonymous",await e.play(),e.captureStream()},R=(t,e)=>{const{session:i}=p.useXRContext();c.useEffect(()=>{let a=!1,l=null;return(async()=>{try{if(t.kind==="webcam")await i.setMediaSource({source:p.XRMediaSource.WEBCAM});else{if(!t.url)throw new Error(`Missing media URL for ${t.id}`);const o=t.kind==="image"?await ce(t.url):await ae(t.url);if(l=o,a){o.getTracks().forEach(y=>y.stop());return}await i.setMediaSource({source:p.XRMediaSource.STREAM,stream:o,sourceKind:t.kind})}await i.registerXRPipeline((e==null?void 0:e.pipeline)??[{model:p.XRModel.FACE_TRACKER,options:{numFaces:(e==null?void 0:e.numFaces)??1}}]),await i.start()}catch(o){console.error("[MediaSourceSession] Error initializing XR session:",o)}})(),()=>{a=!0,l==null||l.getTracks().forEach(o=>o.stop())}},[t,e==null?void 0:e.numFaces,e==null?void 0:e.pipeline,i])},de=R;exports.MediaSourceSwitcher=oe;exports.defaultMediaSources=V;exports.sdkImageMediaSources=_;exports.sdkVideoMediaSources=M;exports.useFaceTrackingMediaSourceSession=de;exports.useMediaSourceSession=R;

package/dist/session-C1StwN0f.js

@@ -0,0 +1,363 @@
+import { l as j, u as z, c as v, X as L } from "./index-JygePOwo.js";
+import { jsx as n, jsxs as u } from "react/jsx-runtime";
+import { createPortal as W } from "react-dom";
+import { useState as y, useRef as $, useMemo as F, useEffect as f } from "react";
+import { c as d, X } from "./x-Co8jPhP0.js";
+const M = (t, e) => new URL(`/assets/sdk/debug-ui/v1/${t}/${e}`, j.assetStorageEndpoint).href, C = (t) => t.replace(/\.[^.]+$/, "").replace(/[_-]+/g, " ").replace(/\s+/g, " ").trim().replace(/\b\w/g, (e) => e.toUpperCase()), P = [
+  "person_fullbody.mp4",
+  "person_looking.mp4",
+  "person_shaking_head.mp4",
+  "person_thumbUp.mp4",
+  "two_people_smiling.mp4"
+], U = [
+  "person_fist_sign.jpg",
+  "person_fullbody.jpg",
+  "person_peace_sign.jpg",
+  "person_portrait.jpg",
+  "person_side_portrait.jpg",
+  "three_people_smiling.jpg",
+  "two_people_smiling.jpg"
+], V = (t, e) => ({
+  id: `sdk-video-${e + 1}`,
+  kind: "video",
+  label: C(t),
+  url: M("videos", t)
+}), D = (t, e) => ({
+  id: `sdk-image-${e + 1}`,
+  kind: "image",
+  label: C(t),
+  url: M("images", t)
+}), N = P.map(V), T = U.map(D), ke = [
+  { id: "webcam", kind: "webcam", label: "Webcam" },
+  ...N,
+  ...T
+];
+/**
+ * @license lucide-react v1.17.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const A = [
+  [
+    "path",
+    {
+      d: "M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z",
+      key: "18u6gg"
+    }
+  ],
+  ["circle", { cx: "12", cy: "13", r: "3", key: "1vg3eu" }]
+], K = d("camera", A);
+/**
+ * @license lucide-react v1.17.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const B = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]], O = d("chevron-down", B);
+/**
+ * @license lucide-react v1.17.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const H = [
+  ["circle", { cx: "9", cy: "12", r: "1", key: "1vctgf" }],
+  ["circle", { cx: "9", cy: "5", r: "1", key: "hp0tcf" }],
+  ["circle", { cx: "9", cy: "19", r: "1", key: "fkjjf6" }],
+  ["circle", { cx: "15", cy: "12", r: "1", key: "1tmaij" }],
+  ["circle", { cx: "15", cy: "5", r: "1", key: "19l28e" }],
+  ["circle", { cx: "15", cy: "19", r: "1", key: "f4zoj3" }]
+], G = d("grip-vertical", H);
+/**
+ * @license lucide-react v1.17.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Y = [
+  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2", key: "1m3agn" }],
+  ["circle", { cx: "9", cy: "9", r: "2", key: "af1f0g" }],
+  ["path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21", key: "1xmnt7" }]
+], q = d("image", Y);
+/**
+ * @license lucide-react v1.17.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const J = [
+  ["path", { d: "M4 5h16", key: "1tepv9" }],
+  ["path", { d: "M4 12h16", key: "1lakjw" }],
+  ["path", { d: "M4 19h16", key: "1djgab" }]
+], Q = d("menu", J);
+/**
+ * @license lucide-react v1.17.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Z = [
+  [
+    "path",
+    {
+      d: "m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5",
+      key: "ftymec"
+    }
+  ],
+  ["rect", { x: "2", y: "6", width: "14", height: "12", rx: "2", key: "158x01" }]
+], ee = d("video", Z), te = (t) => t === "webcam" ? "📷 " : t === "image" ? "🖼 " : "▶ ", re = {
+  position: "fixed",
+  zIndex: 2e4,
+  pointerEvents: "none"
+}, E = {
+  pointerEvents: "auto",
+  border: "1px solid rgba(255, 255, 255, 0.12)",
+  background: "rgba(8, 15, 28, 0.58)",
+  boxShadow: "0 12px 32px rgba(0, 0, 0, 0.28)",
+  backdropFilter: "blur(20px) saturate(1.15)",
+  WebkitBackdropFilter: "blur(20px) saturate(1.15)",
+  color: "#f8fafc",
+  display: "flex"
+}, ne = {
+  ...E,
+  width: 34,
+  height: 34,
+  borderRadius: 17,
+  alignItems: "center",
+  justifyContent: "center",
+  cursor: "pointer",
+  transition: "transform 150ms ease"
+}, ie = {
+  ...E,
+  flexDirection: "column",
+  borderRadius: 12,
+  overflow: "hidden",
+  padding: 4,
+  gap: 4
+}, oe = {
+  display: "flex",
+  alignItems: "center",
+  gap: 3
+}, ae = {
+  width: 1,
+  height: 12,
+  background: "rgba(255, 255, 255, 0.12)",
+  margin: "0 3px"
+}, se = {
+  display: "flex",
+  width: 16,
+  height: 24,
+  alignItems: "center",
+  justifyContent: "center",
+  cursor: "grab",
+  color: "rgba(148, 163, 184, 0.8)",
+  flex: "0 0 auto"
+}, S = (t = !1) => ({
+  display: "flex",
+  width: 24,
+  height: 24,
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: 8,
+  border: `1px solid ${t ? "rgba(255, 255, 255, 0.12)" : "transparent"}`,
+  background: t ? "rgba(255, 255, 255, 0.08)" : "transparent",
+  color: t ? "#f8fafc" : "rgba(226, 232, 240, 0.72)",
+  cursor: "pointer",
+  flex: "0 0 auto",
+  transition: "background 120ms ease, color 120ms ease"
+}), ce = {
+  position: "relative",
+  display: "flex",
+  alignItems: "center"
+}, de = {
+  width: "100%",
+  minWidth: 140,
+  height: 24,
+  borderRadius: 8,
+  border: "1px solid rgba(255, 255, 255, 0.10)",
+  background: "rgba(15, 23, 42, 0.65)",
+  color: "#f8fafc",
+  fontSize: 11,
+  outline: "none",
+  paddingLeft: 7,
+  paddingRight: 20,
+  appearance: "none",
+  cursor: "pointer"
+}, le = {
+  pointerEvents: "none",
+  position: "absolute",
+  right: 5,
+  top: 0,
+  bottom: 0,
+  display: "flex",
+  alignItems: "center",
+  color: "rgba(148, 163, 184, 0.9)"
+}, pe = {
+  height: 24,
+  display: "flex",
+  alignItems: "center",
+  padding: "0 8px",
+  borderRadius: 8,
+  border: "1px solid rgba(255, 255, 255, 0.08)",
+  background: "rgba(255, 255, 255, 0.04)",
+  color: "rgba(226, 232, 240, 0.72)",
+  fontSize: 11
+}, _ = { width: 14, height: 14 }, xe = ({
+  value: t,
+  onChange: e,
+  sources: i,
+  style: s
+}) => {
+  const [c, m] = y(!1), [a, h] = y({ x: 16, y: 16 }), [l, b] = y(t.kind), p = $(null), w = F(
+    () => ({
+      webcam: i.filter((r) => r.kind === "webcam"),
+      image: i.filter((r) => r.kind === "image"),
+      video: i.filter((r) => r.kind === "video")
+    }),
+    [i]
+  ), k = w[l];
+  f(() => {
+    b(t.kind);
+  }, [t.kind]);
+  const R = (r) => {
+    b(r);
+    const o = w[r][0];
+    o && e(o);
+  };
+  f(() => {
+    const r = (g) => {
+      p.current && h({
+        x: Math.max(8, g.clientX - p.current.x),
+        y: Math.max(8, g.clientY - p.current.y)
+      });
+    }, o = () => {
+      p.current = null, document.body.classList.remove("select-none");
+    };
+    return window.addEventListener("pointermove", r), window.addEventListener("pointerup", o), () => {
+      window.removeEventListener("pointermove", r), window.removeEventListener("pointerup", o);
+    };
+  }, []);
+  const x = (r) => {
+    const o = r.currentTarget.getBoundingClientRect();
+    p.current = {
+      x: r.clientX - o.left,
+      y: r.clientY - o.top
+    }, document.body.classList.add("select-none"), r.currentTarget.setPointerCapture(r.pointerId);
+  }, I = () => k.length === 0 ? /* @__PURE__ */ n("div", { style: pe, children: l === "webcam" ? "No camera source" : l === "image" ? "No image preview" : "No video preview" }) : /* @__PURE__ */ u("div", { style: ce, children: [
+    /* @__PURE__ */ n(
+      "select",
+      {
+        value: t.id,
+        onChange: (r) => {
+          const o = i.find((g) => g.id === r.target.value);
+          o && e(o);
+        },
+        style: de,
+        children: k.map((r) => /* @__PURE__ */ u("option", { value: r.id, children: [
+          te(l),
+          r.label
+        ] }, r.id))
+      }
+    ),
+    /* @__PURE__ */ n("div", { style: le, children: /* @__PURE__ */ n("span", { style: { width: 10, height: 10 }, children: /* @__PURE__ */ n(O, { size: 10, strokeWidth: 1.8 }) }) })
+  ] });
+  return typeof document > "u" ? null : W(
+    /* @__PURE__ */ n("div", { style: { ...re, left: a.x, top: a.y, ...s }, children: c ? (
+      // --- Expanded State ---
+      /* @__PURE__ */ u("div", { style: ie, children: [
+        /* @__PURE__ */ u("div", { style: oe, children: [
+          /* @__PURE__ */ n("div", { onPointerDown: x, style: se, title: "Drag to move", children: /* @__PURE__ */ n(G, { size: 11, strokeWidth: 2 }) }),
+          /* @__PURE__ */ n(
+            "button",
+            {
+              type: "button",
+              onClick: () => m(!1),
+              style: S(!1),
+              title: "Close Menu",
+              children: /* @__PURE__ */ n("span", { style: _, children: /* @__PURE__ */ n(X, { size: 14, strokeWidth: 1.8 }) })
+            }
+          ),
+          /* @__PURE__ */ n("div", { style: ae }),
+          ["webcam", "image", "video"].map((r) => /* @__PURE__ */ n(
+            "button",
+            {
+              type: "button",
+              onClick: () => R(r),
+              style: S(l === r),
+              title: r.charAt(0).toUpperCase() + r.slice(1),
+              children: /* @__PURE__ */ n("span", { style: _, children: r === "webcam" ? /* @__PURE__ */ n(K, { size: 14, strokeWidth: 1.8 }) : r === "image" ? /* @__PURE__ */ n(q, { size: 14, strokeWidth: 1.8 }) : /* @__PURE__ */ n(ee, { size: 14, strokeWidth: 1.8 }) })
+            },
+            r
+          ))
+        ] }),
+        I()
+      ] })
+    ) : (
+      // --- Collapsed State (Minimal FAB) ---
+      /* @__PURE__ */ n(
+        "div",
+        {
+          style: ne,
+          onClick: () => m(!0),
+          onPointerDown: x,
+          title: "Open Media Menu",
+          children: /* @__PURE__ */ n("span", { style: { width: 16, height: 16 }, children: /* @__PURE__ */ n(Q, { size: 14, strokeWidth: 1.8 }) })
+        }
+      )
+    ) }),
+    document.body
+  );
+}, ge = async (t) => {
+  const e = new Image();
+  e.crossOrigin = "anonymous", e.src = t, await e.decode();
+  const i = document.createElement("canvas");
+  i.width = e.naturalWidth, i.height = e.naturalHeight;
+  const s = i.getContext("2d");
+  if (!s) throw new Error("Unable to create image media canvas");
+  return s.drawImage(e, 0, 0, i.width, i.height), i.captureStream(30);
+}, ue = async (t) => {
+  const e = document.createElement("video");
+  return e.src = t, e.loop = !0, e.muted = !0, e.playsInline = !0, e.crossOrigin = "anonymous", await e.play(), e.captureStream();
+}, me = (t, e) => {
+  const { session: i } = z();
+  f(() => {
+    let s = !1, c = null;
+    return (async () => {
+      try {
+        if (t.kind === "webcam")
+          await i.setMediaSource({ source: v.WEBCAM });
+        else {
+          if (!t.url) throw new Error(`Missing media URL for ${t.id}`);
+          const a = t.kind === "image" ? await ge(t.url) : await ue(t.url);
+          if (c = a, s) {
+            a.getTracks().forEach((h) => h.stop());
+            return;
+          }
+          await i.setMediaSource({
+            source: v.STREAM,
+            stream: a,
+            sourceKind: t.kind
+          });
+        }
+        await i.registerXRPipeline(
+          (e == null ? void 0 : e.pipeline) ?? [
+            { model: L.FACE_TRACKER, options: { numFaces: (e == null ? void 0 : e.numFaces) ?? 1 } }
+          ]
+        ), await i.start();
+      } catch (a) {
+        console.error("[MediaSourceSession] Error initializing XR session:", a);
+      }
+    })(), () => {
+      s = !0, c == null || c.getTracks().forEach((a) => a.stop());
+    };
+  }, [t, e == null ? void 0 : e.numFaces, e == null ? void 0 : e.pipeline, i]);
+}, ve = me;
+export {
+  xe as M,
+  N as a,
+  me as b,
+  ke as d,
+  T as s,
+  ve as u
+};

package/dist/texture/animatedTexture.d.ts

@@ -0,0 +1,61 @@
+export type AnimatedTextureState = "idle" | "loading" | "ready" | "playing" | "paused" | "ended" | "error";
+export type AnimatedTexturePlayMode = "forward" | "reverse" | "ping-pong" | "random";
+export type AnimatedTextureEventType = "KeyFrameInSecond" | "Pause" | "PlayBegin" | "PlayEnd" | "Resume" | "Stop";
+export type AnimatedTextureCapabilities = {
+    canSeek: boolean;
+    canReverse: boolean;
+    supportsLoopCount: boolean;
+};
+export type AnimatedTextureSnapshot = {
+    state: AnimatedTextureState;
+    frame: number;
+    time: number;
+    duration?: number;
+    frameCount?: number;
+    error?: Error;
+    playMode: AnimatedTexturePlayMode;
+    loop: boolean;
+    loopCount: number;
+};
+export type AnimatedTextureListener = (snapshot: AnimatedTextureSnapshot) => void;
+export type AnimatedTextureEvent = {
+    type: AnimatedTextureEventType;
+    snapshot: AnimatedTextureSnapshot;
+};
+export type AnimatedTextureEventListener = (event: AnimatedTextureEvent) => void;
+export interface AnimatedTextureController {
+    readonly capabilities: AnimatedTextureCapabilities;
+    play(): Promise<void> | void;
+    pause(): void;
+    restart(): Promise<void> | void;
+    seek?(value: number): void;
+    setPlayMode(mode: AnimatedTexturePlayMode): void;
+    setLoop(loop: boolean, count?: number): void;
+    subscribe(listener: AnimatedTextureListener): () => void;
+    on(type: AnimatedTextureEventType, listener: AnimatedTextureEventListener): () => void;
+    off(type: AnimatedTextureEventType, listener: AnimatedTextureEventListener): void;
+    /** Provider hook for frame/ended/stop events not caused by controller commands. */
+    emit(type: AnimatedTextureEventType): void;
+    getSnapshot(): AnimatedTextureSnapshot;
+    dispose(): void;
+}
+export declare class BasicAnimatedTextureController implements AnimatedTextureController {
+    readonly capabilities: AnimatedTextureCapabilities;
+    private snapshot;
+    private listeners;
+    private eventListeners;
+    constructor(capabilities: AnimatedTextureCapabilities, initial?: Partial<AnimatedTextureSnapshot>);
+    play(): void;
+    pause(): void;
+    restart(): void;
+    setPlayMode(playMode: AnimatedTexturePlayMode): void;
+    setLoop(loop: boolean, loopCount?: number): void;
+    seek(value: number): void;
+    subscribe(listener: AnimatedTextureListener): () => boolean;
+    on(type: AnimatedTextureEventType, listener: AnimatedTextureEventListener): () => void;
+    off(type: AnimatedTextureEventType, listener: AnimatedTextureEventListener): void;
+    getSnapshot(): AnimatedTextureSnapshot;
+    dispose(): void;
+    emit(type: AnimatedTextureEventType): void;
+    private update;
+}

package/dist/texture/animationMath.d.ts

@@ -0,0 +1,8 @@
+import { AnimatedTexturePlayMode } from './animatedTexture';
+export type PlaybackFrameResult = {
+    frame: number;
+    ended: boolean;
+    loop: number;
+};
+export declare const getPlaybackFrame: (tick: number, frameCount: number, mode: AnimatedTexturePlayMode, loop: boolean, loopCount: number) => PlaybackFrameResult;
+export declare const getSequenceFrame: (elapsedSeconds: number, fps: number, frameCount: number) => number;

package/dist/texture/sourceResolver.d.ts

@@ -0,0 +1,30 @@
+import { AnimatedTextureController } from './animatedTexture';
+import type * as THREE from "three";
+export type ResolvedTextureSource = {
+    texture: THREE.Texture;
+    controller?: AnimatedTextureController;
+    metadata?: {
+        width?: number;
+        height?: number;
+        duration?: number;
+        frameCount?: number;
+    };
+    dispose(): void;
+};
+export type TextureSourceResolver<TSource> = (source: TSource, signal: AbortSignal) => Promise<ResolvedTextureSource>;
+export type TextureSourceProvider<TSource> = {
+    canResolve(source: TSource): boolean;
+    resolve(source: TSource, signal: AbortSignal): Promise<ResolvedTextureSource>;
+};
+/** Compose image/video/GIF/sequence providers without coupling ScreenImage to loaders. */
+export declare function createTextureSourceResolver<TSource>(providers: readonly TextureSourceProvider<TSource>[]): TextureSourceResolver<TSource>;
+export declare class TextureSourceLoadError extends Error {
+    readonly source: unknown;
+    constructor(message: string, source: unknown);
+}
+/** Throw when an async provider finishes after its source was replaced. */
+export declare function throwIfAborted(signal: AbortSignal): void;
+/** Resolve a provider while guaranteeing late results are not accepted. */
+export declare function resolveTextureSource<TSource>(resolver: TextureSourceResolver<TSource>, source: TSource, signal: AbortSignal): Promise<ResolvedTextureSource>;
+/** Dispose a resolved source exactly once. Safe for source-switch cleanup. */
+export declare function disposeResolvedTextureSource(source: ResolvedTextureSource | undefined): void;