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

package/dist/components/XRViewport/index.d.ts

@@ -1,118 +1,3 @@
-import { CSSProperties, ReactNode } from 'react';
-import { CalibrationMediaSourceKind } from '../../hooks/useCalibrationFaceTracker';
-import { XRMediaLayout } from '../../types/compositor';
-import { FaceTrackingResult } from '../../types/face';
-import { XRModelNodeFaceTracking } from '../../types/nodes';
-import { RenderOutputKind } from '../../screen2d';
-import * as THREE from "three";
-export type XRViewportMode = "dom" | "r3f" | "hybrid";
-export type XRViewportSourceKind = "webcam" | "image" | "video";
-export type XRViewportFitMode = "auto" | "cover" | "contain";
-export type XRViewportMediaStrategy = "internal" | "external";
-export type XRViewportMediaAssetOption = {
-    id: string;
-    label: string;
-    src: string;
-};
-export type XRViewportSourceConfig = {
-    kind: "webcam";
-} | {
-    kind: "image";
-    assetId?: string;
-} | {
-    kind: "video";
-    assetId?: string;
-};
-export type XRViewportSize = {
-    width: number;
-    height: number;
-};
-export type XRViewportPreviewMode = "media" | "scene" | "finalColor" | "sceneDepth";
-export type XRViewportRenderOutputRequest = Partial<Record<RenderOutputKind, boolean>>;
-export type XRViewportRenderOutputs = {
-    requested: XRViewportRenderOutputRequest;
-    previewMode: XRViewportPreviewMode;
-    mediaColorTexture: THREE.Texture | null;
-    sceneColorTexture: THREE.Texture | null;
-    finalColorTexture: THREE.Texture | null;
-    sceneDepthTexture: THREE.Texture | null;
-    estimatedDepthTexture: THREE.Texture | null;
-    available: Record<RenderOutputKind, boolean>;
-};
-export type XRViewportRenderState = {
-    activeDelegate: "GPU" | "CPU" | null;
-    faces: FaceTrackingResult[];
-    imageOptions: XRViewportMediaAssetOption[];
-    layout: XRMediaLayout | null;
-    mediaError: string | null;
-    mediaFitMode: Exclude<XRViewportFitMode, "auto">;
-    mediaLabel: string;
-    mediaStatus: "idle" | "requesting" | "ready" | "error";
-    mirrored: boolean;
-    selectedImageId: string;
-    selectedSource: XRViewportSourceKind;
-    selectedVideoId: string;
-    setMirrored: (value: boolean) => void;
-    setSelectedImageId: (value: string) => void;
-    setSelectedSource: (value: XRViewportSourceKind) => void;
-    setSelectedVideoId: (value: string) => void;
-    setShowMediaControls: (value: boolean) => void;
-    showMediaControls: boolean;
-    trackerError: string | null;
-    trackerStatus: "idle" | "initializing" | "ready" | "error";
-    videoOptions: XRViewportMediaAssetOption[];
-    viewportSize: XRViewportSize;
-    mediaSize: XRViewportSize;
-};
-type XRViewportProps = {
-    children?: ReactNode | ((state: XRViewportRenderState) => ReactNode);
-    fitMode?: XRViewportFitMode;
-    imageOptions?: XRViewportMediaAssetOption[];
-    initialImageId?: string;
-    initialMirrored?: boolean;
-    initialSource?: XRViewportSourceKind;
-    initialVideoId?: string;
-    mediaStrategy?: XRViewportMediaStrategy;
-    mediaDock?: "top-left" | "bottom-left";
-    mode?: XRViewportMode;
-    previewMode?: XRViewportPreviewMode;
-    renderOutputs?: XRViewportRenderOutputRequest;
-    showMediaControlsByDefault?: boolean;
-    source?: XRViewportSourceConfig;
-    style?: CSSProperties;
-    videoOptions?: XRViewportMediaAssetOption[];
-};
-type XRViewportSlotProps = {
-    children?: ReactNode | ((state: XRViewportRenderState) => ReactNode);
-};
-type XRViewportComponent = ((props: XRViewportProps) => JSX.Element) & {
-    Scene: (props: XRViewportSlotProps) => JSX.Element;
-    Overlay: (props: XRViewportSlotProps) => JSX.Element;
-};
-export declare const resolveViewportFitMode: (fitMode: XRViewportFitMode, selectedSource: XRViewportSourceKind) => Exclude<XRViewportFitMode, "auto">;
-export declare const resolveViewportSourceSelection: ({ imageOptions, initialImageId, initialSource, initialVideoId, source, videoOptions, }: {
-    imageOptions: XRViewportMediaAssetOption[];
-    initialImageId?: string;
-    initialSource?: XRViewportSourceKind;
-    initialVideoId?: string;
-    source?: XRViewportSourceConfig;
-    videoOptions: XRViewportMediaAssetOption[];
-}) => {
-    selectedSource: XRViewportSourceKind;
-    selectedImageId: string;
-    selectedVideoId: string;
-};
-export declare const computeViewportLayout: (source: XRViewportSize, destination: XRViewportSize, fitMode: Exclude<XRViewportFitMode, "auto">) => XRMediaLayout | null;
-export declare const resolveViewportSlots: (mode: XRViewportMode, children: ReactNode) => {
-    sceneContent: ReactNode;
-    overlayContent: ReactNode;
-};
-export declare const resolveViewportSlotContent: (content: ReactNode | ((state: XRViewportRenderState) => ReactNode), state: XRViewportRenderState) => ReactNode;
-export declare const resolveViewportExternalFaces: ({ detectionResults, selectedSource, }: {
-    detectionResults: ReturnType<XRModelNodeFaceTracking["getDetectionResults"]> | null | undefined;
-    selectedSource: CalibrationMediaSourceKind;
-}) => FaceTrackingResult[];
-export declare const useXRViewportState: () => XRViewportRenderState | null;
-export declare const useXRViewportRenderOutputs: () => XRViewportRenderOutputs | null;
-export declare const XRViewport: XRViewportComponent;
-export {};
+export { XRViewport, resolveViewportExternalFaces, resolveViewportSlotContent, resolveViewportSlots, useXRViewportRenderOutputs, useXRViewportState, useViewportMediaSource, } from './XRViewport';
+export { computeViewportLayout, resolveViewportFitMode, resolveViewportSourceSelection, } from './layout';
+export type * from './types';

package/dist/components/XRViewport/layout.d.ts

@@ -0,0 +1,16 @@
+import { XRMediaLayout } from '../../types/compositor';
+import { XRViewportFitMode, XRViewportMediaAssetOption, XRViewportSize, XRViewportSourceConfig, XRViewportSourceKind } from './types';
+export declare const resolveViewportFitMode: (fitMode: XRViewportFitMode, selectedSource: XRViewportSourceKind) => Exclude<XRViewportFitMode, "auto">;
+export declare const resolveViewportSourceSelection: ({ imageOptions, initialImageId, initialSource, initialVideoId, source, videoOptions, }: {
+    imageOptions: XRViewportMediaAssetOption[];
+    initialImageId?: string;
+    initialSource?: XRViewportSourceKind;
+    initialVideoId?: string;
+    source?: XRViewportSourceConfig;
+    videoOptions: XRViewportMediaAssetOption[];
+}) => {
+    selectedSource: XRViewportSourceKind;
+    selectedImageId: string;
+    selectedVideoId: string;
+};
+export declare const computeViewportLayout: (source: XRViewportSize, destination: XRViewportSize, fitMode: Exclude<XRViewportFitMode, "auto">) => XRMediaLayout | null;

package/dist/components/XRViewport/slots.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { XRViewportComponent, XRViewportMode, XRViewportRenderState, XRViewportSlotProps } from './types';
+export declare const XRViewportSceneSlot: {
+    ({ children }: XRViewportSlotProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const XRViewportOverlaySlot: {
+    ({ children }: XRViewportSlotProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const resolveViewportSlots: (mode: XRViewportMode, children: ReactNode) => {
+    sceneContent: ReactNode;
+    overlayContent: ReactNode;
+};
+export declare const resolveViewportSlotContent: (content: ReactNode | ((state: XRViewportRenderState) => ReactNode), state: XRViewportRenderState) => ReactNode;
+export declare function attachXRViewportSlots(component: XRViewportComponent): XRViewportComponent;

package/dist/components/XRViewport/types.d.ts

@@ -0,0 +1,89 @@
+import { CSSProperties, ReactNode } from 'react';
+import { XRMediaLayout } from '../../types/compositor';
+import { FaceTrackingResult } from '../../types/face';
+import { RenderOutputKind } from '../../screen2d';
+import type * as THREE from "three";
+export type XRViewportMode = "dom" | "r3f" | "hybrid";
+export type XRViewportSourceKind = "webcam" | "image" | "video";
+export type XRViewportFitMode = "auto" | "cover" | "contain";
+export type XRViewportMediaStrategy = "internal" | "external";
+export type XRViewportMediaAssetOption = {
+    id: string;
+    label: string;
+    src: string;
+};
+export type XRViewportSourceConfig = {
+    kind: "webcam";
+} | {
+    kind: "image";
+    assetId?: string;
+} | {
+    kind: "video";
+    assetId?: string;
+};
+export type XRViewportSize = {
+    width: number;
+    height: number;
+};
+export type XRViewportPreviewMode = "media" | "scene" | "finalColor" | "sceneDepth";
+export type XRViewportRenderOutputRequest = Partial<Record<RenderOutputKind, boolean>>;
+export type XRViewportRenderOutputs = {
+    requested: XRViewportRenderOutputRequest;
+    previewMode: XRViewportPreviewMode;
+    mediaColorTexture: THREE.Texture | null;
+    sceneColorTexture: THREE.Texture | null;
+    finalColorTexture: THREE.Texture | null;
+    sceneDepthTexture: THREE.Texture | null;
+    estimatedDepthTexture: THREE.Texture | null;
+    available: Record<RenderOutputKind, boolean>;
+};
+export type XRViewportRenderState = {
+    activeDelegate: "GPU" | "CPU" | null;
+    faces: FaceTrackingResult[];
+    imageOptions: XRViewportMediaAssetOption[];
+    layout: XRMediaLayout | null;
+    mediaError: string | null;
+    mediaFitMode: Exclude<XRViewportFitMode, "auto">;
+    mediaLabel: string;
+    mediaStatus: "idle" | "requesting" | "ready" | "error";
+    mirrored: boolean;
+    selectedImageId: string;
+    selectedSource: XRViewportSourceKind;
+    selectedVideoId: string;
+    setMirrored: (value: boolean) => void;
+    setSelectedImageId: (value: string) => void;
+    setSelectedSource: (value: XRViewportSourceKind) => void;
+    setSelectedVideoId: (value: string) => void;
+    setShowMediaControls: (value: boolean) => void;
+    showMediaControls: boolean;
+    trackerError: string | null;
+    trackerStatus: "idle" | "initializing" | "ready" | "error";
+    videoOptions: XRViewportMediaAssetOption[];
+    viewportSize: XRViewportSize;
+    mediaSize: XRViewportSize;
+};
+export type XRViewportProps = {
+    children?: ReactNode | ((state: XRViewportRenderState) => ReactNode);
+    fitMode?: XRViewportFitMode;
+    imageOptions?: XRViewportMediaAssetOption[];
+    initialImageId?: string;
+    initialMirrored?: boolean;
+    initialSource?: XRViewportSourceKind;
+    initialVideoId?: string;
+    mediaStrategy?: XRViewportMediaStrategy;
+    mediaDock?: "top-left" | "bottom-left";
+    mode?: XRViewportMode;
+    previewMode?: XRViewportPreviewMode;
+    renderOutputs?: XRViewportRenderOutputRequest;
+    showMediaControlsByDefault?: boolean;
+    source?: XRViewportSourceConfig;
+    style?: CSSProperties;
+    videoOptions?: XRViewportMediaAssetOption[];
+};
+export type XRViewportSlotProps = {
+    children?: ReactNode | ((state: XRViewportRenderState) => ReactNode);
+};
+export type XRViewportComponent = ((props: XRViewportProps) => JSX.Element) & {
+    Scene: (props: XRViewportSlotProps) => JSX.Element;
+    Overlay: (props: XRViewportSlotProps) => JSX.Element;
+};

package/dist/components/XRViewport/useViewportSize.d.ts

@@ -0,0 +1,3 @@
+import { RefObject } from 'react';
+import { XRViewportSize } from './types';
+export declare const useViewportSize: <T extends HTMLElement>(ref: RefObject<T>) => XRViewportSize;

package/dist/components/index.d.ts

@@ -1,4 +1,5 @@
 export * from './AspectRatioContainer';
+export * from './Axes';
 export * from './BodyTracker';
 export * from './FaceTracker';
 export * from './FaceMesh';
@@ -14,15 +15,26 @@ export * from './HandJoints2D';
 export * from './HeadBinding';
 export * from './HeadBindingOccluder';
 export * from './HeadOccluder';
+export * from './MeshRenderer';
+export * from './LightObject';
+export * from './LookAt';
 export * from './Panel';
+export * from './PinToMesh';
 export * from './PerspectiveCamera';
+export * from './RenderGroupLayer';
 export * from './ScreenImage';
+export * from './ScreenGradient';
+export * from './ScreenGlass';
+export * from './ScreenShape';
+export * from './SceneObjectRenderer';
+export * from './SequentialRenderPasses';
 export * from './ScreenSpaceUI';
 export * from './ScreenText';
 export * from './Segmentation';
 export * from './SpriteAnimation';
 export * from './TextLabel';
 export * from './TrackingAnchor';
+export * from './Transform3D';
 export * from './VideoBackground';
 export * from './XRProvider';
 export * from './XRCompositor';

package/dist/contexts-BKvTIayr.cjs

@@ -0,0 +1 @@
+"use strict";const p=require("react/jsx-runtime"),y=require("@react-three/fiber"),l=require("react"),N=require("three"),M=require("./renderLayers-lDtL0_43.cjs"),X=require("./selectors-2QvO5RYY.cjs"),j=require("./index-D4bLzBr6.cjs"),D=require("./index-CEc1CAmB.cjs");function U(t){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const o in t)if(o!=="default"){const c=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(n,o,c.get?c:{enumerable:!0,get:()=>t[o]})}}return n.default=t,Object.freeze(n)}const S=U(N),A={display:"flex",alignItems:"center",justifyContent:"center",height:"100%",background:"#363636",color:"white",fontFamily:"monospace"},$=()=>p.jsx("div",{style:A,children:"Loading..."}),H=t=>p.jsx("div",{style:A,children:t.error}),_={position:"absolute",top:0,left:0,width:"100%",height:"100%",zIndex:10},F={sceneColorTexture:null,sceneDepthTexture:null},G=({onRenderOutputs:t,renderOutputs:n,size:o})=>{const{gl:c,scene:a,size:x}=y.useThree(),{session:s}=j.useXRContext(),r=Math.max(1,Math.round((o==null?void 0:o.width)??x.width)),h=Math.max(1,Math.round((o==null?void 0:o.height)??x.height)),u=!!(n.sceneColor||n.sceneDepth),i=l.useMemo(()=>{if(!u)return null;const e=new S.WebGLRenderTarget(r,h,{colorSpace:S.SRGBColorSpace,depthBuffer:!0,stencilBuffer:!1});return n.sceneDepth&&(e.depthTexture=new S.DepthTexture(r,h),e.depthTexture.format=S.DepthFormat,e.depthTexture.type=S.UnsignedShortType),e},[u,h,n.sceneDepth,r]);return l.useEffect(()=>{if(!i){t==null||t(F);return}return t==null||t({sceneColorTexture:n.sceneColor?i.texture:null,sceneDepthTexture:n.sceneDepth&&i.depthTexture?i.depthTexture:null}),()=>{var e;i.dispose(),(e=i.depthTexture)==null||e.dispose(),t==null||t(F)}},[t,n.sceneColor,n.sceneDepth,i]),y.useFrame(()=>{if(!i)return;const e=[];n.excludeScreenUI!==!1&&a.traverse(d=>{d.visible&&d.renderOrder>=M.RENDER_LAYERS.SCREEN_UI&&(e.push(d),d.visible=!1)});const g=c.getRenderTarget(),f=c.xr.enabled;c.xr.enabled=!1,c.setRenderTarget(i),c.clear(),s._renderFrame(),c.setRenderTarget(g),c.xr.enabled=f,e.forEach(d=>{d.visible=!0})},-100),null},W=({style:t,canvasProps:n,children:o,loadingComponent:c,loadingTransitionDuration:a,errorComponent:x,renderTargetSize:s,renderOutputs:r={},onRenderOutputs:h})=>{const u=l.useRef(null),i=l.useRef(null),e=l.useRef(null),g=l.useRef(!1),{session:f}=j.useXRContext(),d=X.useXRReady(),T=X.useXRError(),[C,v]=l.useState(!0);return l.useEffect(()=>{if(s){f._setRenderSize(Math.round(s.width),Math.round(s.height));return}const m=(w,R)=>{w<=0||R<=0||f._setRenderSize(Math.round(w),Math.round(R))},b=()=>{!i.current||g.current||(g.current=!0,f._setRenderTarget(i.current))},B=(w,R)=>{e.current!==null&&cancelAnimationFrame(e.current),e.current=requestAnimationFrame(()=>{e.current=null,m(w,R)})},E=new ResizeObserver(w=>{const R=w[0];if(!R)return;const{width:Y,height:I}=R.contentRect;b(),B(Y,I)});return u.current&&E.observe(u.current),b(),()=>{E.disconnect(),e.current!==null&&(cancelAnimationFrame(e.current),e.current=null),g.current=!1}},[s,f]),l.useEffect(()=>{d&&(a?setTimeout(()=>{v(!1)},a):v(!1))},[d,a]),p.jsxs("div",{id:"vincentt-xr-container",ref:u,style:{width:"100%",height:"100%",...t,position:"relative"},children:[C&&p.jsx("div",{style:_,children:c||p.jsx($,{})}),T&&p.jsx("div",{style:_,children:x||p.jsx(H,{error:T.message})}),p.jsxs(y.Canvas,{id:"vincentt-xr-canvas",ref:i,dpr:[1,3],gl:{alpha:!0,preserveDrawingBuffer:!1,antialias:!0,premultipliedAlpha:!1,toneMapping:S.NoToneMapping},...n,onCreated:m=>{s?f._setRenderSize(Math.round(s.width),Math.round(s.height)):f._setRenderTarget(i.current),f._setR3FState({renderer:m.gl,scene:m.scene,camera:m.camera}),m.gl.outputColorSpace=S.SRGBColorSpace,n!=null&&n.onCreated&&n.onCreated(m)},children:[p.jsx(G,{onRenderOutputs:h,renderOutputs:r,size:s}),o]})]})},L=(t,n,o,c,a)=>{const x=t/2,s=n/2,r=o.left*x+c.left,h=o.right*x-c.right,u=o.bottom*s+c.bottom,i=o.top*s-c.top,e=h-r,g=i-u,f=(r+h)/2,d=(u+i)/2,T=a[0]*e/2,C=a[1]*g/2;return{centerX:f,centerY:d,width:e,height:g,pivotX:T,pivotY:C}},k={left:0,right:0,top:0,bottom:0},J={left:0,right:0,top:0,bottom:0},K=[0,0],Q=({anchors:t,offsets:n,pivot:o=K,children:c})=>{const{width:a,height:x}=D.useScreenSpace(),s=l.useMemo(()=>({anchors:{...k,...t??{}},offsets:{...J,...n??{}}}),[t,n]),r=l.useMemo(()=>L(a,x,s.anchors,s.offsets,o),[a,x,s,o]);l.useEffect(()=>{const e=s.anchors;e.left>e.right&&console.warn(`[ScreenTransform] inverted X axis: anchors.left (${e.left}) > anchors.right (${e.right})`),e.bottom>e.top&&console.warn(`[ScreenTransform] inverted Y axis: anchors.bottom (${e.bottom}) > anchors.top (${e.top})`),r.width<=0&&console.warn(`[ScreenTransform] zero or negative width (${r.width.toFixed(3)}) — anchors + offsets collapse the X extent`),r.height<=0&&console.warn(`[ScreenTransform] zero or negative height (${r.height.toFixed(3)}) — anchors + offsets collapse the Y extent`)},[s,r.width,r.height]);const h=o[0]!==0||o[1]!==0,u=h?[1,1,1]:[r.width,r.height,1],i=!h&&r.width>0&&r.height>0?r.width/r.height:null;return p.jsx("group",{position:[r.centerX-r.pivotX,r.centerY-r.pivotY,0],scale:u,renderOrder:M.RENDER_LAYERS.SCREEN_UI,children:p.jsx(D.ScreenRectAspectContext.Provider,{value:i,children:c})})},q=l.createContext(null),V=l.createContext(null),Z=()=>l.useContext(q),P=()=>l.useContext(V);exports.ScreenTransform=Q;exports.XRScene=W;exports.XRViewportRenderOutputsContext=V;exports.XRViewportStateContext=q;exports.computeScreenTransform=L;exports.useXRViewportRenderOutputs=P;exports.useXRViewportState=Z;

package/dist/contexts-Bk5zz_VR.js

@@ -0,0 +1,214 @@
+import { jsx as p, jsxs as F } from "react/jsx-runtime";
+import { Canvas as N, useThree as V, useFrame as H } from "@react-three/fiber";
+import { useRef as T, useState as G, useEffect as v, useMemo as y, useContext as _, createContext as A } from "react";
+import * as S from "three";
+import { R as L } from "./renderLayers-zrK2pv5O.js";
+import { u as W, a as j } from "./selectors-Dw3C-gSk.js";
+import { u as B } from "./index-JygePOwo.js";
+import { u as k, S as q } from "./index-CTHeBQOs.js";
+const I = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  height: "100%",
+  background: "#363636",
+  color: "white",
+  fontFamily: "monospace"
+}, J = () => /* @__PURE__ */ p("div", { style: I, children: "Loading..." }), K = (n) => /* @__PURE__ */ p("div", { style: I, children: n.error }), D = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  width: "100%",
+  height: "100%",
+  zIndex: 10
+}, M = {
+  sceneColorTexture: null,
+  sceneDepthTexture: null
+}, Q = ({
+  onRenderOutputs: n,
+  renderOutputs: r,
+  size: s
+}) => {
+  const { gl: i, scene: a, size: u } = V(), { session: o } = B(), t = Math.max(1, Math.round((s == null ? void 0 : s.width) ?? u.width)), l = Math.max(1, Math.round((s == null ? void 0 : s.height) ?? u.height)), h = !!(r.sceneColor || r.sceneDepth), c = y(() => {
+    if (!h) return null;
+    const e = new S.WebGLRenderTarget(t, l, {
+      colorSpace: S.SRGBColorSpace,
+      depthBuffer: !0,
+      stencilBuffer: !1
+    });
+    return r.sceneDepth && (e.depthTexture = new S.DepthTexture(t, l), e.depthTexture.format = S.DepthFormat, e.depthTexture.type = S.UnsignedShortType), e;
+  }, [h, l, r.sceneDepth, t]);
+  return v(() => {
+    if (!c) {
+      n == null || n(M);
+      return;
+    }
+    return n == null || n({
+      sceneColorTexture: r.sceneColor ? c.texture : null,
+      sceneDepthTexture: r.sceneDepth && c.depthTexture ? c.depthTexture : null
+    }), () => {
+      var e;
+      c.dispose(), (e = c.depthTexture) == null || e.dispose(), n == null || n(M);
+    };
+  }, [n, r.sceneColor, r.sceneDepth, c]), H(() => {
+    if (!c) return;
+    const e = [];
+    r.excludeScreenUI !== !1 && a.traverse((f) => {
+      f.visible && f.renderOrder >= L.SCREEN_UI && (e.push(f), f.visible = !1);
+    });
+    const m = i.getRenderTarget(), d = i.xr.enabled;
+    i.xr.enabled = !1, i.setRenderTarget(c), i.clear(), o._renderFrame(), i.setRenderTarget(m), i.xr.enabled = d, e.forEach((f) => {
+      f.visible = !0;
+    });
+  }, -100), null;
+}, le = ({
+  style: n,
+  canvasProps: r,
+  children: s,
+  loadingComponent: i,
+  loadingTransitionDuration: a,
+  errorComponent: u,
+  renderTargetSize: o,
+  renderOutputs: t = {},
+  onRenderOutputs: l
+}) => {
+  const h = T(null), c = T(null), e = T(null), m = T(!1), { session: d } = B(), f = W(), w = j(), [C, b] = G(!0);
+  return v(() => {
+    if (o) {
+      d._setRenderSize(
+        Math.round(o.width),
+        Math.round(o.height)
+      );
+      return;
+    }
+    const g = (R, x) => {
+      R <= 0 || x <= 0 || d._setRenderSize(Math.round(R), Math.round(x));
+    }, E = () => {
+      !c.current || m.current || (m.current = !0, d._setRenderTarget(c.current));
+    }, U = (R, x) => {
+      e.current !== null && cancelAnimationFrame(e.current), e.current = requestAnimationFrame(() => {
+        e.current = null, g(R, x);
+      });
+    }, X = new ResizeObserver((R) => {
+      const x = R[0];
+      if (!x) return;
+      const { width: Y, height: $ } = x.contentRect;
+      E(), U(Y, $);
+    });
+    return h.current && X.observe(h.current), E(), () => {
+      X.disconnect(), e.current !== null && (cancelAnimationFrame(e.current), e.current = null), m.current = !1;
+    };
+  }, [o, d]), v(() => {
+    f && (a ? setTimeout(() => {
+      b(!1);
+    }, a) : b(!1));
+  }, [f, a]), /* @__PURE__ */ F(
+    "div",
+    {
+      id: "vincentt-xr-container",
+      ref: h,
+      style: {
+        width: "100%",
+        height: "100%",
+        ...n,
+        position: "relative"
+      },
+      children: [
+        C && /* @__PURE__ */ p("div", { style: D, children: i || /* @__PURE__ */ p(J, {}) }),
+        w && /* @__PURE__ */ p("div", { style: D, children: u || /* @__PURE__ */ p(K, { error: w.message }) }),
+        /* @__PURE__ */ F(
+          N,
+          {
+            id: "vincentt-xr-canvas",
+            ref: c,
+            dpr: [1, 3],
+            gl: {
+              alpha: !0,
+              // Keep the framebuffer transient by default so resize/layout changes
+              // do not leave an old frame hanging around. Apps that need capture
+              // can opt back in via `canvasProps.gl`.
+              preserveDrawingBuffer: !1,
+              antialias: !0,
+              premultipliedAlpha: !1,
+              // Disable alpha premultiplication
+              toneMapping: S.NoToneMapping
+              // Disable tone mapping for accurate video colors
+            },
+            ...r,
+            onCreated: (g) => {
+              o ? d._setRenderSize(
+                Math.round(o.width),
+                Math.round(o.height)
+              ) : d._setRenderTarget(c.current), d._setR3FState({
+                renderer: g.gl,
+                scene: g.scene,
+                camera: g.camera
+              }), g.gl.outputColorSpace = S.SRGBColorSpace, r != null && r.onCreated && r.onCreated(g);
+            },
+            children: [
+              /* @__PURE__ */ p(
+                Q,
+                {
+                  onRenderOutputs: l,
+                  renderOutputs: t,
+                  size: o
+                }
+              ),
+              s
+            ]
+          }
+        )
+      ]
+    }
+  );
+}, Z = (n, r, s, i, a) => {
+  const u = n / 2, o = r / 2, t = s.left * u + i.left, l = s.right * u - i.right, h = s.bottom * o + i.bottom, c = s.top * o - i.top, e = l - t, m = c - h, d = (t + l) / 2, f = (h + c) / 2, w = a[0] * e / 2, C = a[1] * m / 2;
+  return { centerX: d, centerY: f, width: e, height: m, pivotX: w, pivotY: C };
+}, z = { left: 0, right: 0, top: 0, bottom: 0 }, P = { left: 0, right: 0, top: 0, bottom: 0 }, O = [0, 0], he = ({
+  anchors: n,
+  offsets: r,
+  pivot: s = O,
+  children: i
+}) => {
+  const { width: a, height: u } = k(), o = y(
+    () => ({
+      anchors: { ...z, ...n ?? {} },
+      offsets: { ...P, ...r ?? {} }
+    }),
+    [n, r]
+  ), t = y(
+    () => Z(a, u, o.anchors, o.offsets, s),
+    [a, u, o, s]
+  );
+  v(() => {
+    const e = o.anchors;
+    e.left > e.right && console.warn(
+      `[ScreenTransform] inverted X axis: anchors.left (${e.left}) > anchors.right (${e.right})`
+    ), e.bottom > e.top && console.warn(
+      `[ScreenTransform] inverted Y axis: anchors.bottom (${e.bottom}) > anchors.top (${e.top})`
+    ), t.width <= 0 && console.warn(
+      `[ScreenTransform] zero or negative width (${t.width.toFixed(3)}) — anchors + offsets collapse the X extent`
+    ), t.height <= 0 && console.warn(
+      `[ScreenTransform] zero or negative height (${t.height.toFixed(3)}) — anchors + offsets collapse the Y extent`
+    );
+  }, [o, t.width, t.height]);
+  const l = s[0] !== 0 || s[1] !== 0, h = l ? [1, 1, 1] : [t.width, t.height, 1], c = !l && t.width > 0 && t.height > 0 ? t.width / t.height : null;
+  return /* @__PURE__ */ p(
+    "group",
+    {
+      position: [t.centerX - t.pivotX, t.centerY - t.pivotY, 0],
+      scale: h,
+      renderOrder: L.SCREEN_UI,
+      children: /* @__PURE__ */ p(q.Provider, { value: c, children: i })
+    }
+  );
+}, ee = A(null), te = A(null), de = () => _(ee), fe = () => _(te);
+export {
+  he as S,
+  le as X,
+  ee as a,
+  te as b,
+  Z as c,
+  fe as d,
+  de as u
+};

package/dist/debug-ui/component-editor/index.d.ts

@@ -0,0 +1,19 @@
+import { ComponentType } from 'react';
+import { SceneComponent, SceneComponentId, SceneComponentType } from '../../scene-object';
+export type ComponentEditorProps<TType extends SceneComponentType = SceneComponentType> = {
+    component: SceneComponent<TType>;
+    onChange?: (next: SceneComponent<TType>) => void;
+};
+export type ComponentEditorRegistry = Partial<{
+    [TType in SceneComponentType]: ComponentType<ComponentEditorProps<TType>>;
+}>;
+export type ComponentEditorPropsForLookup = {
+    component: SceneComponent;
+    editors?: ComponentEditorRegistry;
+    onChange?: (next: SceneComponent) => void;
+};
+export declare const ComponentEditorFallback: ({ component }: {
+    component: SceneComponent;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ComponentEditor: ({ component, editors, onChange, }: ComponentEditorPropsForLookup) => import("react/jsx-runtime").JSX.Element;
+export declare const createComponentIdLabel: (componentId: SceneComponentId) => string;

package/dist/debug-ui/face-mesh-renderer-settings/index.d.ts

@@ -0,0 +1,8 @@
+import { FaceMeshRendererSettings } from '../../components/FaceMesh';
+import { ComponentEditorProps } from '../component-editor';
+export type FaceMeshRendererSettingsPanelProps = {
+    value: FaceMeshRendererSettings;
+    onChange: (next: FaceMeshRendererSettings) => void;
+};
+export declare const FaceMeshRendererSettingsPanel: ({ onChange, value, }: FaceMeshRendererSettingsPanelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FaceMeshRendererComponentEditor: ({ component, onChange, }: ComponentEditorProps<"FaceMeshRenderer">) => import("react/jsx-runtime").JSX.Element;

package/dist/debug-ui/face-retouch/index.d.ts

@@ -0,0 +1,11 @@
+import { FaceRetouchControls } from '../../components/FaceRetouch';
+export type FaceRetouchSettingsPanelProps = {
+    title?: string;
+    value: Partial<FaceRetouchControls>;
+    onChange: (next: FaceRetouchControls) => void;
+    initialPosition?: {
+        x: number;
+        y: number;
+    };
+};
+export declare const FaceRetouchSettingsPanel: ({ title, value, onChange, initialPosition, }: FaceRetouchSettingsPanelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/debug-ui/hand-joints-2d/index.d.ts

@@ -1,4 +1,4 @@
-import { HandJoints2DSettings } from '../../handJoints2d';
+import { HandJoints2DSettings } from '../../hand/handJoints2d';
 export type HandJoints2DSettingsPanelProps = {
     value: HandJoints2DSettings;
     onChange: (next: HandJoints2DSettings) => void;

package/dist/debug-ui/hand-tracking-2d/index.d.ts

@@ -1,4 +1,4 @@
-import { HandTracking2DSettings } from '../../handTracking2d';
+import { HandTracking2DSettings } from '../../hand/handTracking2d';
 export type HandTracking2DSettingsPanelProps = {
     value: HandTracking2DSettings;
     onChange: (next: HandTracking2DSettings) => void;

package/dist/debug-ui/hand-tracking-2d-controller/index.d.ts

@@ -1,4 +1,4 @@
-import { HandTracking2DControllerSettings } from '../../handTracking2dController';
+import { HandTracking2DControllerSettings } from '../../hand/handTracking2dController';
 export type HandTracking2DControllerSettingsPanelProps = {
     value: HandTracking2DControllerSettings;
     onChange: (next: HandTracking2DControllerSettings) => void;

package/dist/debug-ui/hand-tracking-3d/index.d.ts

@@ -1,4 +1,4 @@
-import { HandTracking3DSettings } from '../../handTracking3d';
+import { HandTracking3DSettings } from '../../hand/handTracking3d';
 export type HandTracking3DSettingsPanelProps = {
     value: HandTracking3DSettings;
     onChange: (next: HandTracking3DSettings) => void;

package/dist/debug-ui/hierarchy-panel/index.d.ts

@@ -0,0 +1,29 @@
+import { RenderGroup, RenderGroupId } from '../../render/renderGroups';
+import { SceneObject, SceneObjectId, SceneObjectStore } from '../../scene-object';
+export type HierarchyPanelProps = {
+    groups: RenderGroup[];
+    objects: Record<SceneObjectId, SceneObject>;
+    selectedObjectId?: SceneObjectId;
+    onSelectObject: (objectId: SceneObjectId) => void;
+    onReorderGroup: (groupId: RenderGroupId, nextIndex: number) => void;
+    onReorderObject: (groupId: RenderGroupId, objectId: SceneObjectId, nextIndex: number) => void;
+    onMoveObject: (objectId: SceneObjectId, targetGroupId: RenderGroupId, nextIndex: number) => boolean;
+    onSetObjectParent?: (objectId: SceneObjectId, parentObjectId: SceneObjectId | null, nextIndex?: number, targetGroupId?: RenderGroupId) => boolean;
+    onToggleGroupEnabled: (groupId: RenderGroupId, enabled: boolean) => void;
+    onToggleObjectVisible?: (objectId: SceneObjectId, visible: boolean) => void;
+    copyConfig?: HierarchyPanelCopyConfig;
+    initialPosition?: {
+        x: number;
+        y: number;
+    };
+    title?: string;
+};
+export type HierarchyPanelCopyConfig = {
+    kind: "scene";
+    version: 1;
+    renderGroupOrder: RenderGroupId[];
+    renderGroups: Record<RenderGroupId, RenderGroup>;
+    objects: Record<SceneObjectId, SceneObject>;
+    components: SceneObjectStore["components"];
+};
+export declare const HierarchyPanel: ({ groups, objects, selectedObjectId, onSelectObject, onReorderGroup, onReorderObject, onMoveObject, onSetObjectParent, onToggleGroupEnabled, onToggleObjectVisible, copyConfig, initialPosition, title, }: HierarchyPanelProps) => import('react').ReactPortal | null;

package/dist/debug-ui/index.d.ts

@@ -1,12 +1,18 @@
 export { defaultMediaSources, sdkImageMediaSources, sdkVideoMediaSources } from './media-source';
-export type { MediaSourcePreset, MediaSourceSwitcherProps } from './media-source';
-export { MediaSourceSwitcher } from './media-source';
+export type { MediaSourcePreset, MediaSourceSessionPipeline, MediaSourceSwitcherProps, UseMediaSourceSessionOptions, } from './media-source';
+export { MediaSourceSwitcher, useFaceTrackingMediaSourceSession, useMediaSourceSession, } from './media-source';
 export type { DefaultSettingPanelProps } from './default-setting';
 export { DefaultSettingPanel } from './default-setting';
 export type { ScreenTextArtPreset, ScreenTextSettings, ScreenTextSceneSettings, ScreenTextSettingsPanelProps, } from './screen-text-settings';
 export { ScreenTextSettingsPanel } from './screen-text-settings';
 export type { ScreenImageSettingsPanelProps } from './screen-image-settings';
 export { ScreenImageSettingsPanel } from './screen-image-settings';
+export type { ScreenGradientSettingsPanelProps } from './screen-gradient-settings';
+export { ScreenGradientSettingsPanel } from './screen-gradient-settings';
+export type { ScreenGlassSettingsPanelProps } from './screen-glass-settings';
+export { ScreenGlassSettingsPanel } from './screen-glass-settings';
+export type { ScreenShapeSettingsPanelProps } from './screen-shape-settings';
+export { ScreenShapeSettingsPanel } from './screen-shape-settings';
 export type { HandTracking2DSettingsPanelProps } from './hand-tracking-2d';
 export { HandTracking2DSettingsPanel } from './hand-tracking-2d';
 export type { HandTracking2DControllerSettingsPanelProps } from './hand-tracking-2d-controller';
@@ -17,7 +23,24 @@ export type { HandTracking3DSettingsPanelProps } from './hand-tracking-3d';
 export { HandTracking3DSettingsPanel } from './hand-tracking-3d';
 export type { LayerDomain, LayerNode, LayerPanelProps } from './layer-panel';
 export { LayerPanel } from './layer-panel';
+export type { HierarchyPanelCopyConfig, HierarchyPanelProps } from './hierarchy-panel';
+export { HierarchyPanel } from './hierarchy-panel';
+export { PinToMeshSettingsPanel } from './pin-to-mesh-settings';
+export type { PinToMeshSettingsPanelProps } from './pin-to-mesh-settings';
 export type { SettingsPanelField, SettingsPanelOption, SettingsPanelProps, SettingsPanelValue, } from './settings-panel';
 export { SettingsPanel } from './settings-panel';
 export type { FaceWarp3DSettingsPanelProps } from './face-warp-3d';
 export { FaceWarp3DSettingsPanel } from './face-warp-3d';
+export type { FaceRetouchSettingsPanelProps } from './face-retouch';
+export { FaceRetouchSettingsPanel } from './face-retouch';
+export type { Transform3DSettingsPanelProps } from './transform-3d-settings';
+export { Transform3DSettingsPanel, Transform3DSettingsSection } from './transform-3d-settings';
+export type { MeshRendererSettingsPanelProps } from './mesh-renderer-settings';
+export { MeshRendererSettingsPanel } from './mesh-renderer-settings';
+export type { FaceMeshRendererSettingsPanelProps } from './face-mesh-renderer-settings';
+export { FaceMeshRendererComponentEditor, FaceMeshRendererSettingsPanel, } from './face-mesh-renderer-settings';
+export type { ObjectInspectorPanelProps } from './object-inspector-panel';
+export { ObjectInspectorPanel } from './object-inspector-panel';
+export * from './scene-editor';
+export type { ComponentEditorProps, ComponentEditorPropsForLookup, ComponentEditorRegistry, } from './component-editor';
+export { ComponentEditor, ComponentEditorFallback, createComponentIdLabel, } from './component-editor';