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

package/dist/MediaSourceSwitcher-Cq3g4IKw.cjs

@@ -0,0 +1,31 @@
+"use strict";const C=require("./index-D8fpPQkC.cjs"),t=require("react/jsx-runtime"),R=require("react-dom"),i=require("react"),s=require("./x-KC8E4Gaj.cjs"),b=(n,o)=>new URL(`/assets/sdk/debug-ui/v1/${n}/${o}`,C.libConfig.assetStorageEndpoint).href,k=n=>n.replace(/\.[^.]+$/,"").replace(/[_-]+/g," ").replace(/\s+/g," ").trim().replace(/\b\w/g,o=>o.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=(n,o)=>({id:`sdk-video-${o+1}`,kind:"video",label:k(n),url:b("videos",n)}),E=(n,o)=>({id:`sdk-image-${o+1}`,kind:"image",label:k(n),url:b("images",n)}),w=$.map(W),j=z.map(E),V=[{id:"webcam",kind:"webcam",label:"Webcam"},...w,...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 q=[["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"}]],D=s.createLucideIcon("camera",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=[["path",{d:"m6 9 6 6 6-6",key:"qrunsl"}]],P=s.createLucideIcon("chevron-down",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 U=[["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"}]],F=s.createLucideIcon("grip-vertical",U);/**
+ * @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=[["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"}]],K=s.createLucideIcon("image",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 O=[["path",{d:"M4 5h16",key:"1tepv9"}],["path",{d:"M4 12h16",key:"1lakjw"}],["path",{d:"M4 19h16",key:"1djgab"}]],X=s.createLucideIcon("menu",O);/**
+ * @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:"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"}]],G=s.createLucideIcon("video",A),H=n=>n==="webcam"?"📷 ":n==="image"?"🖼 ":"▶ ",T={position:"fixed",zIndex:2e4,pointerEvents:"none"},v={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"},Y={...v,width:34,height:34,borderRadius:17,alignItems:"center",justifyContent:"center",cursor:"pointer",transition:"transform 150ms ease"},J={...v,flexDirection:"column",borderRadius:12,overflow:"hidden",padding:4,gap:4},Q={display:"flex",alignItems:"center",gap:3},Z={width:1,height:12,background:"rgba(255, 255, 255, 0.12)",margin:"0 3px"},ee={display:"flex",width:16,height:24,alignItems:"center",justifyContent:"center",cursor:"grab",color:"rgba(148, 163, 184, 0.8)",flex:"0 0 auto"},x=(n=!1)=>({display:"flex",width:24,height:24,alignItems:"center",justifyContent:"center",borderRadius:8,border:`1px solid ${n?"rgba(255, 255, 255, 0.12)":"transparent"}`,background:n?"rgba(255, 255, 255, 0.08)":"transparent",color:n?"#f8fafc":"rgba(226, 232, 240, 0.72)",cursor:"pointer",flex:"0 0 auto",transition:"background 120ms ease, color 120ms ease"}),te={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"},re={pointerEvents:"none",position:"absolute",right:5,top:0,bottom:0,display:"flex",alignItems:"center",color:"rgba(148, 163, 184, 0.9)"},oe={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},f={width:14,height:14},ie=({value:n,onChange:o,sources:c,style:S})=>{const[_,p]=i.useState(!1),[u,M]=i.useState({x:16,y:16}),[a,g]=i.useState(n.kind),d=i.useRef(null),h=i.useMemo(()=>({webcam:c.filter(e=>e.kind==="webcam"),image:c.filter(e=>e.kind==="image"),video:c.filter(e=>e.kind==="video")}),[c]),y=h[a];i.useEffect(()=>{g(n.kind)},[n.kind]);const I=e=>{g(e);const r=h[e][0];r&&o(r)};i.useEffect(()=>{const e=l=>{d.current&&M({x:Math.max(8,l.clientX-d.current.x),y:Math.max(8,l.clientY-d.current.y)})},r=()=>{d.current=null,document.body.classList.remove("select-none")};return window.addEventListener("pointermove",e),window.addEventListener("pointerup",r),()=>{window.removeEventListener("pointermove",e),window.removeEventListener("pointerup",r)}},[]);const m=e=>{const r=e.currentTarget.getBoundingClientRect();d.current={x:e.clientX-r.left,y:e.clientY-r.top},document.body.classList.add("select-none"),e.currentTarget.setPointerCapture(e.pointerId)},L=()=>{if(y.length===0){const e=a==="webcam"?"No camera source":a==="image"?"No image preview":"No video preview";return t.jsx("div",{style:oe,children:e})}return t.jsxs("div",{style:te,children:[t.jsx("select",{value:n.id,onChange:e=>{const r=c.find(l=>l.id===e.target.value);r&&o(r)},style:ne,children:y.map(e=>t.jsxs("option",{value:e.id,children:[H(a),e.label]},e.id))}),t.jsx("div",{style:re,children:t.jsx("span",{style:{width:10,height:10},children:t.jsx(P,{size:10,strokeWidth:1.8})})})]})};return typeof document>"u"?null:R.createPortal(t.jsx("div",{style:{...T,left:u.x,top:u.y,...S},children:_?t.jsxs("div",{style:J,children:[t.jsxs("div",{style:Q,children:[t.jsx("div",{onPointerDown:m,style:ee,title:"Drag to move",children:t.jsx(F,{size:11,strokeWidth:2})}),t.jsx("button",{type:"button",onClick:()=>p(!1),style:x(!1),title:"Close Menu",children:t.jsx("span",{style:f,children:t.jsx(s.X,{size:14,strokeWidth:1.8})})}),t.jsx("div",{style:Z}),["webcam","image","video"].map(e=>t.jsx("button",{type:"button",onClick:()=>I(e),style:x(a===e),title:e.charAt(0).toUpperCase()+e.slice(1),children:t.jsx("span",{style:f,children:e==="webcam"?t.jsx(D,{size:14,strokeWidth:1.8}):e==="image"?t.jsx(K,{size:14,strokeWidth:1.8}):t.jsx(G,{size:14,strokeWidth:1.8})})},e))]}),L()]}):t.jsx("div",{style:Y,onClick:()=>p(!0),onPointerDown:m,title:"Open Media Menu",children:t.jsx("span",{style:{width:16,height:16},children:t.jsx(X,{size:14,strokeWidth:1.8})})})}),document.body)};exports.MediaSourceSwitcher=ie;exports.defaultMediaSources=V;exports.sdkImageMediaSources=j;exports.sdkVideoMediaSources=w;

package/dist/components/FaceMesh/canonical/CanonicalFaceMeshRenderer.d.ts

@@ -1,7 +1,9 @@
+import { FaceWarp3DSettings } from '../../FaceWarp3D';
 import { FaceMeshAlphaMap, FaceMeshBlendMode, FaceMeshMaskTextureSource, FaceMeshMaterialType, FaceMeshShaderPreset, FaceMeshSide, FaceMeshTextureMap } from '../material/types';
 import { ParsedCanonicalMesh } from './parseCanonicalFaceModel';
 export type CanonicalFaceMeshRendererProps = {
     faceIndex?: number;
+    baseColor?: string;
     color?: string;
     opacity?: number;
     materialType?: FaceMeshMaterialType;
@@ -11,6 +13,7 @@ export type CanonicalFaceMeshRendererProps = {
     alphaOpacity?: number;
     side?: FaceMeshSide;
     blendMode?: FaceMeshBlendMode;
+    blendOpacity?: number;
     showMouthMask?: boolean;
     showEyeMask?: boolean;
     showNoseMask?: boolean;
@@ -21,6 +24,8 @@ export type CanonicalFaceMeshRendererProps = {
     faceTextureStyle2Url?: string;
     faceAlphaMaskUrl?: string;
     compositeShading?: boolean;
+    faceWarp3D?: Partial<FaceWarp3DSettings>;
+    renderOrder?: number;
     /**
      * Pre-parsed canonical mesh. If omitted, the renderer lazily fetches
      * the default OBJ from `libConfig.sdkAssetsBaseUrl` and parses it.
@@ -31,4 +36,4 @@ export type CanonicalFaceMeshRendererProps = {
      */
     meshUrl?: string;
 };
-export declare const CanonicalFaceMeshRenderer: ({ faceIndex, color, opacity, materialType, shaderPreset, textureMap, alphaMap, alphaOpacity, side, blendMode, showMouthMask, showEyeMask, showNoseMask, maskTextureSource, maskColor, maskOpacity, faceTextureUrl, faceTextureStyle2Url, faceAlphaMaskUrl, compositeShading, mesh, meshUrl, }: CanonicalFaceMeshRendererProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CanonicalFaceMeshRenderer: ({ faceIndex, baseColor, color, opacity, materialType, shaderPreset, textureMap, alphaMap, alphaOpacity, side, blendMode, blendOpacity, showMouthMask, showEyeMask, showNoseMask, maskTextureSource, maskColor, maskOpacity, faceTextureUrl, faceTextureStyle2Url, faceAlphaMaskUrl, compositeShading, faceWarp3D, renderOrder, mesh, meshUrl, }: CanonicalFaceMeshRendererProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/FaceMesh/material/defaults.d.ts

@@ -1,3 +1,7 @@
 import { FaceMeshAppearance, FaceMeshMasking } from './types';
 export declare const DEFAULT_APPEARANCE: FaceMeshAppearance;
+export declare const FACE_PAINTING_PRESET: FaceMeshAppearance;
+export declare const FACE_MESH_PRESETS: {
+    readonly facePainting: FaceMeshAppearance;
+};
 export declare const DEFAULT_MASKING: FaceMeshMasking;

package/dist/components/FaceMesh/material/types.d.ts

@@ -13,8 +13,10 @@ export type FaceMeshAppearance = {
     alphaOpacity: number;
     side: FaceMeshSide;
     blendMode: FaceMeshBlendMode;
+    blendOpacity: number;
     baseColor: string;
     opacity: number;
+    compositeShading: boolean;
 };
 export type FaceMeshMasking = {
     mouth: boolean;

package/dist/components/FaceRetouch/Background.d.ts

@@ -4,13 +4,18 @@ export type FaceRetouchBackgroundProps = {
     mouthMask: THREE.Texture;
     retouchAmount: number;
     blurRadius: number;
+    detailPreservation?: number;
+    blemishReduction?: number;
+    rednessReduction?: number;
+    blemishRadius?: number;
     teethWhitening: number;
     previewMask: boolean;
     protectLandmarks: boolean;
+    renderOrder?: number;
 };
 /**
  * Full-screen plane that composites the live camera texture with a
  * landmark-driven retouch (skin smoothing + teeth whitening). Pair with
  * `useFaceRetouchMask` to drive the masks.
  */
-export declare const FaceRetouchBackground: ({ retouchMask, mouthMask, retouchAmount, blurRadius, teethWhitening, previewMask, protectLandmarks, }: FaceRetouchBackgroundProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const FaceRetouchBackground: ({ retouchMask, mouthMask, retouchAmount, blurRadius, detailPreservation, blemishReduction, rednessReduction, blemishRadius, teethWhitening, previewMask, protectLandmarks, renderOrder, }: FaceRetouchBackgroundProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/FaceRetouch/defaults.d.ts

@@ -0,0 +1,13 @@
+export type FaceRetouchSettings = {
+    retouchAmount: number;
+    blurRadius: number;
+    detailPreservation: number;
+    blemishReduction: number;
+    rednessReduction: number;
+    blemishRadius: number;
+    teethWhitening: number;
+    previewMask: boolean;
+    protectLandmarks: boolean;
+    foreheadCoverage: boolean;
+};
+export declare const FACE_RETOUCH_PRESET: FaceRetouchSettings;

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

@@ -1,6 +1,8 @@
 export { FaceRetouchBackground } from './Background';
 export type { FaceRetouchBackgroundProps } from './Background';
-export { drawFaceRetouchMask, drawMouthRetouchMask, FACE_MASK_SIZE, FACE_OVAL, LEFT_EYE, RIGHT_EYE, OUTER_LIPS, INNER_MOUTH, LEFT_EYEBROW, RIGHT_EYEBROW, } from './landmarkMask';
+export { FACE_RETOUCH_PRESET } from './defaults';
+export type { FaceRetouchSettings } from './defaults';
+export { drawFaceRetouchMask, drawMouthRetouchMask, FACE_MASK_SIZE, FACE_OVAL, LEFT_EYE, RIGHT_EYE, OUTER_LIPS, INNER_MOUTH, LEFT_EYEBROW, RIGHT_EYEBROW, type FaceRetouchMaskOptions, } from './landmarkMask';
 export { createFaceRetouchRegions, DEFAULT_FEATURE_GROUPS, DEFAULT_FEATURE_POINT_INDICES, type CreateFaceRetouchRegionsOptions, } from './retouchRegions';
 export { useFaceRetouchMask } from './useFaceRetouchMask';
 export { useFaceRetouchRegions } from './useFaceRetouchRegions';

package/dist/components/FaceRetouch/landmarkMask.d.ts

@@ -7,6 +7,9 @@ export declare const OUTER_LIPS: number[];
 export declare const INNER_MOUTH: number[];
 export declare const LEFT_EYEBROW: number[];
 export declare const RIGHT_EYEBROW: number[];
+export type FaceRetouchMaskOptions = {
+    foreheadCoverage?: boolean;
+};
 /**
  * Render the three-channel face retouch mask used by FaceRetouchBackground:
  *   - R: blurred face oval (soft retouch region)
@@ -15,7 +18,7 @@ export declare const RIGHT_EYEBROW: number[];
  *
  * `size` defaults to FACE_MASK_SIZE (512). The context must be sized to match.
  */
-export declare const drawFaceRetouchMask: (context: CanvasRenderingContext2D, landmarks: FaceLandmark2D[] | undefined, size?: number) => void;
+export declare const drawFaceRetouchMask: (context: CanvasRenderingContext2D, landmarks: FaceLandmark2D[] | undefined, size?: number, options?: FaceRetouchMaskOptions) => void;
 /**
  * Render a single-channel mouth mask (inner-lip polygon, lightly blurred).
  * Used for teeth-whitening regions.

package/dist/components/FaceRetouch/useFaceRetouchMask.d.ts

@@ -1,4 +1,5 @@
 import { XRModelNodeFaceTracking } from '../../types/nodes';
+import { FaceRetouchMaskOptions } from './landmarkMask';
 import * as THREE from "three";
 /**
  * Drive the two CanvasTexture masks consumed by `FaceRetouchBackground`
@@ -7,7 +8,7 @@ import * as THREE from "three";
  * `size` controls the mask resolution (default 512). Both masks share the
  * same size.
  */
-export declare const useFaceRetouchMask: (faceNode: XRModelNodeFaceTracking | null, size?: number) => {
+export declare const useFaceRetouchMask: (faceNode: XRModelNodeFaceTracking | null, size?: number, options?: FaceRetouchMaskOptions) => {
     canvas: HTMLCanvasElement;
     texture: THREE.CanvasTexture;
     mouthTexture: THREE.CanvasTexture;

package/dist/components/FaceWarp3D/FaceWarp3DHead.d.ts

@@ -0,0 +1,15 @@
+import { FaceWarp3DSettings } from './defaults';
+export type FaceWarp3DHeadProps = {
+    /** Effect House 3DHeadBinding_Mesh.fbx or a topology-compatible head. */
+    headMeshUrl: string;
+    /** Optional UV reference/base texture sampled with the FBX's authored UVs. */
+    uvTextureUrl?: string;
+    settings: Partial<FaceWarp3DSettings>;
+    faceIndex?: number;
+    opacity?: number;
+    renderOrder?: number;
+    visible?: boolean;
+    mirrorTextureX?: boolean;
+    baseColor?: string;
+};
+export declare const FaceWarp3DHead: ({ headMeshUrl, uvTextureUrl, settings, faceIndex, opacity, renderOrder, visible, baseColor, }: FaceWarp3DHeadProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/FaceWarp3D/defaults.d.ts

@@ -0,0 +1,37 @@
+export type FaceWarp3DSettings = {
+    enabled: boolean;
+    strength: number;
+    faceWidth: number;
+    faceHeight: number;
+    faceRoundness: number;
+    midfaceHeight: number;
+    foreheadHeight: number;
+    foreheadWidth: number;
+    cheekboneWidth: number;
+    cheekWidth: number;
+    cheekHollowness: number;
+    midfaceDepth: number;
+    scalpHeight: number;
+    headCurve: number;
+    faceTwist: number;
+    faceSwirl: number;
+    browDistance: number;
+    browHeight: number;
+    browDepth: number;
+    eyeSize: number;
+    leftEyeSize: number;
+    rightEyeSize: number;
+    eyeDistance: number;
+    leftEyeX: number;
+    rightEyeX: number;
+    leftEyeY: number;
+    rightEyeY: number;
+    noseSize: number;
+    noseLength: number;
+    mouthWidth: number;
+    mouthHeight: number;
+    jawWidth: number;
+    chinHeight: number;
+};
+export declare const DEFAULT_FACE_WARP_3D_SETTINGS: FaceWarp3DSettings;
+export declare const FACE_WARP_3D_PRESET: FaceWarp3DSettings;

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

@@ -0,0 +1,3 @@
+export { DEFAULT_FACE_WARP_3D_SETTINGS, FACE_WARP_3D_PRESET, type FaceWarp3DSettings, } from './defaults';
+export { applyFaceWarp3D, computeFaceWarp3DMetrics, hasFaceWarp3D, type FaceWarp3DMetrics, } from './warp';
+export { FaceWarp3DHead, type FaceWarp3DHeadProps } from './FaceWarp3DHead';

package/dist/components/FaceWarp3D/warp.d.ts

@@ -0,0 +1,13 @@
+import { NormalizedLandmark } from '@mediapipe/tasks-vision';
+import { FaceWarp3DSettings } from './defaults';
+type LandmarkLike = Pick<NormalizedLandmark, "x" | "y" | "z">;
+export type FaceWarp3DMetrics = {
+    centerX: number;
+    centerY: number;
+    width: number;
+    height: number;
+};
+export declare const computeFaceWarp3DMetrics: (landmarks: LandmarkLike[]) => FaceWarp3DMetrics;
+export declare const hasFaceWarp3D: (settings?: Partial<FaceWarp3DSettings>) => boolean;
+export declare const applyFaceWarp3D: (landmark: LandmarkLike, metrics: FaceWarp3DMetrics, settings: Partial<FaceWarp3DSettings>, out: LandmarkLike) => LandmarkLike;
+export {};

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

@@ -0,0 +1,6 @@
+import { HandJoints2DCountResult, HandJoints2DSettings } from '../../handJoints2d';
+export type HandJoints2DProps = {
+    settings?: HandJoints2DSettings;
+    onCountChange?: (result: HandJoints2DCountResult | null) => void;
+};
+export declare const HandJoints2D: ({ settings, onCountChange, }: HandJoints2DProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
 type HandTrackerProps = PropsWithChildren & {
-    /** Which hand to bind to. Currently informational — the model tracks one hand. */
+    /** Which hand to bind to. Prefers the named hand when present. */
     hand?: "left" | "right";
     /** Hand index in detection results. Defaults to 0. */
     handIndex?: number;
@@ -20,5 +20,5 @@ type HandTrackerProps = PropsWithChildren & {
      */
     active?: boolean;
 };
-export declare const HandTracker: ({ children, targetFps, active }: HandTrackerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const HandTracker: ({ children, hand, handIndex, targetFps, active, }: HandTrackerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/HandTracking2D/HandVisual.d.ts

@@ -0,0 +1,12 @@
+import { HandTracking2DHandFrame, HandTracking2DPoint, HandTracking2DSettings } from '../../handTracking2d';
+type RenderedHand = HandTracking2DHandFrame & {
+    key: string;
+    points: HandTracking2DPoint[];
+};
+export declare function HandVisual({ hand, index, settings, aspectScale, }: {
+    hand: RenderedHand;
+    index: number;
+    settings: HandTracking2DSettings;
+    aspectScale: number;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,5 @@
+import { HandTracking2DSettings } from '../../handTracking2d';
+export type HandTracking2DProps = {
+    settings?: HandTracking2DSettings;
+};
+export declare const HandTracking2D: ({ settings, }: HandTracking2DProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,5 @@
+import { HandTracking2DControllerSettings } from '../../handTracking2dController';
+export type HandTracking2DControllerProps = {
+    settings?: HandTracking2DControllerSettings;
+};
+export declare const HandTracking2DController: ({ settings, }: HandTracking2DControllerProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,6 @@
+import { HandTracking3DRenderedHandFrame, HandTracking3DSettings } from '../../handTracking3d';
+export type HandTracking3DProps = {
+    settings?: HandTracking3DSettings;
+    onHandsChange?: (hands: HandTracking3DRenderedHandFrame[]) => void;
+};
+export declare const HandTracking3D: ({ settings, onHandsChange, }: HandTracking3DProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,87 @@
+import { ScreenAnchorEdges, ScreenOffsetEdges } from '../ScreenSpaceUI';
+import { ScreenCanvasSize, ScreenCoordinateSpace } from '../../screen2d';
+import { default as defaultScreenImageUrl } from './assets/Default_square_image.png';
+import * as THREE from "three";
+export type ScreenImageFit = "stretch" | "contain" | "cover";
+export type ScreenImageStretchMode = "fit" | "fitWidth" | "fitHeight" | "stretch" | "fill" | "fillAndCut";
+export type ScreenImageMaterialType = "unlit" | "standardPBR" | "matcap";
+export type ScreenImageBlendMode = "normal" | "add" | "subtract" | "multiply" | "screen" | "lighten" | "darken" | "overlay" | "softLight" | "hardLight" | "difference" | "exclusion";
+export type ScreenImageSource = {
+    kind: "default";
+} | {
+    kind: "image";
+    src: string;
+} | {
+    kind: "texture";
+    texture: THREE.Texture;
+};
+export type ScreenImageProps = {
+    name?: string;
+    source?: ScreenImageSource;
+    src?: string;
+    anchors?: ScreenAnchorEdges;
+    coordinateSpace?: ScreenCoordinateSpace;
+    canvasSize?: ScreenCanvasSize;
+    position?: [number, number];
+    size?: [number, number];
+    rotation?: number;
+    offsets?: ScreenOffsetEdges;
+    pivot?: [number, number];
+    fit?: ScreenImageFit;
+    stretchMode?: ScreenImageStretchMode;
+    materialType?: ScreenImageMaterialType;
+    blendMode?: ScreenImageBlendMode;
+    backdropTexture?: THREE.Texture | null;
+    opacity?: number;
+    color?: THREE.ColorRepresentation;
+    flipX?: boolean;
+    flipY?: boolean;
+    renderOrder?: number;
+    transparent?: boolean;
+    alphaTest?: number;
+    overlay?: boolean;
+    visible?: boolean;
+    showFitGuides?: boolean;
+};
+export type ScreenImageFittedRectInput = {
+    rectSize: {
+        width: number;
+        height: number;
+    };
+    textureSize?: {
+        width: number;
+        height: number;
+    };
+    textureAspect?: number;
+    stretchMode?: ScreenImageStretchMode;
+    fit?: ScreenImageFit;
+    flipX?: boolean;
+    flipY?: boolean;
+};
+export type ScreenImageFittedRect = {
+    rectAspect: number;
+    textureAspect: number;
+    scale: {
+        x: number;
+        y: number;
+    };
+    size: {
+        width: number;
+        height: number;
+    };
+    uvRepeat: {
+        x: number;
+        y: number;
+    };
+    uvOffset: {
+        x: number;
+        y: number;
+    };
+};
+export declare const screenImageBlendModeOptions: Array<{
+    label: string;
+    value: ScreenImageBlendMode;
+}>;
+export declare const computeScreenImageFittedRect: ({ rectSize, textureSize, textureAspect: providedTextureAspect, stretchMode, fit, flipX, flipY, }: ScreenImageFittedRectInput) => ScreenImageFittedRect;
+export declare function ScreenImage({ anchors, coordinateSpace, canvasSize, position, size, offsets, pivot, rotation, ...bodyProps }: ScreenImageProps): import("react/jsx-runtime").JSX.Element;
+export { defaultScreenImageUrl };

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

@@ -0,0 +1,20 @@
+import { ScreenAnchorEdges } from '../ScreenSpaceUI';
+import { TextLabelProps } from '../TextLabel';
+import { ScreenCanvasSize, ScreenCoordinateSpace, ScreenTransform2D } from '../../screen2d';
+export type ScreenTextVerticalAlign = "top" | "center" | "bottom";
+export type ScreenTextProps = Omit<TextLabelProps, "aspect" | "position" | "rotation" | "scale"> & {
+    anchors?: ScreenAnchorEdges;
+    coordinateSpace?: ScreenCoordinateSpace;
+    canvasSize?: ScreenCanvasSize;
+    offsets?: ScreenTransform2D["offsets"];
+    pivot?: [number, number];
+    position?: [number, number];
+    rotation?: number;
+    size?: [number, number];
+    transform?: ScreenTransform2D;
+    verticalAlign?: ScreenTextVerticalAlign;
+    showTransformGuides?: boolean;
+};
+export declare const SCREEN_TEXT_ANCHORS: Record<ScreenTextVerticalAlign, Required<ScreenAnchorEdges>>;
+export declare function resolveScreenTextAnchors(verticalAlign?: ScreenTextVerticalAlign): Required<ScreenAnchorEdges>;
+export declare function ScreenText({ anchors, coordinateSpace, canvasSize, offsets, pivot, position, rotation, size, transform, verticalAlign, ...textLabelProps }: ScreenTextProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,5 @@
+export type TextAlign = "left" | "center" | "right";
+export type TextBendPreset = "arc" | "arc-lower" | "arc-upper" | "arch" | "bulge" | "shell-lower" | "shell-upper" | "flag" | "wave" | "fish" | "rise" | "fisheye" | "inflate" | "squeeze" | "twist";
 /**
  * `<TextLabel>` — a text label drawn into a CanvasTexture and rendered as
  * a single mesh. First-class scene-tree primitive so lifecycle scripts
@@ -14,10 +16,61 @@
 export type TextLabelProps = {
     /** The text to render. Required. */
     text: string;
+    /** Optional precomputed lines. When provided, these are rendered directly without word wrapping. */
+    lines?: string[];
     /** Text color. Default `#ffffff`. */
     color?: string;
+    /** Multiple stroke layers, drawn outer-to-inner. */
+    strokeLayers?: Array<{
+        color: string;
+        width: number;
+        opacity?: number;
+    }>;
+    /** Optional text stroke color. Omit or pair with `strokeWidth={0}` for no stroke. */
+    strokeColor?: string;
+    /** Text stroke thickness in canvas px. Default 0. */
+    strokeWidth?: number;
+    /** Stroke opacity multiplier. Default 1. */
+    strokeOpacity?: number;
+    /** Multiple shadow / glow layers, drawn back-to-front. */
+    shadowLayers?: Array<{
+        color: string;
+        blur: number;
+        offsetX?: number;
+        offsetY?: number;
+        opacity?: number;
+    }>;
+    /** Optional inner shadow rendered inside the glyphs. */
+    innerShadow?: {
+        color: string;
+        blur: number;
+        offsetX?: number;
+        offsetY?: number;
+        opacity?: number;
+    };
+    /** Optional glow rendered behind the glyphs. */
+    glow?: {
+        color: string;
+        style: "outward" | "contoured";
+        intensity?: number;
+        range?: number;
+        horizontalAngle?: number;
+        verticalAngle?: number;
+    };
+    /** Optional text shadow/glow color. Omit for none. */
+    shadowColor?: string;
+    /** Shadow blur radius in canvas px. Default 0. */
+    shadowBlur?: number;
+    /** Shadow X offset in canvas px. Default 0. */
+    shadowOffsetX?: number;
+    /** Shadow Y offset in canvas px. Default 0. */
+    shadowOffsetY?: number;
+    /** Shadow opacity multiplier. Default 1. */
+    shadowOpacity?: number;
     /** Font weight. Default `bold`. */
     fontWeight?: "normal" | "bold" | number;
+    /** Font style. Default `normal`. */
+    fontStyle?: "normal" | "italic";
     /** Font family. Default `Arial, sans-serif`. */
     fontFamily?: string;
     /**
@@ -25,8 +78,45 @@ export type TextLabelProps = {
      * to "10pt" → 28, "12pt" → 36, "16pt" → 48, etc. Default 48.
      */
     fontSize?: number;
+    /** Horizontal text alignment inside the available lane. Default `center`. */
+    textAlign?: TextAlign;
+    /** Overflow behavior. `clamp` keeps only full visible lines, `clip` allows canvas-edge clipping. */
+    overflow?: "clip" | "clamp" | "ellipsis" | "shrink";
+    /** When true, keep shrinking until the text fits or `minFontSize` is hit. */
+    resizeToFit?: boolean;
+    /** Minimum shrink target in canvas px. Default 12. */
+    minFontSize?: number;
+    /** Character spacing as a normalized ratio from 0 to 1. Default 0. */
+    letterSpacing?: number;
+    /** Line spacing as a normalized ratio from 0 to 1. Default 0.3. */
+    lineSpacing?: number;
     /** Panel background color. Use `'transparent'` for text-only. Default `rgba(20,40,110,0.88)`. */
     bgColor?: string;
+    /** Background fill mode. Default `solid`. */
+    bgFillMode?: "solid" | "gradient";
+    /** Background opacity multiplier. Default 1. */
+    bgOpacity?: number;
+    /** Background fit mode. `full` fills the label rect, `text` hugs the measured text block. */
+    bgFit?: "full" | "text";
+    /** When true, ignore explicit background width/height and size from the text block. */
+    bgAutoSize?: boolean;
+    /** Optional explicit background width in canvas px. */
+    bgWidth?: number;
+    /** Optional explicit background height in canvas px. */
+    bgHeight?: number;
+    /** Optional gradient stops when `bgFillMode` is `gradient`. */
+    bgGradientStops?: Array<{
+        color: string;
+        position: number;
+    }>;
+    /** Optional static texture URL when `bgFillMode` is `texture`. */
+    bgTextureUrl?: string;
+    /** Texture fit behavior. Default `cover`. */
+    bgTextureFit?: "cover" | "contain" | "stretch";
+    /** Mirror the background texture horizontally. Default false. */
+    bgTextureFlipX?: boolean;
+    /** Mirror the background texture vertically. Default false. */
+    bgTextureFlipY?: boolean;
     /** Optional border color. Omit for no border. */
     borderColor?: string;
     /** Border thickness. Default 0. */
@@ -46,6 +136,11 @@ export type TextLabelProps = {
     resolution?: number;
     /** Material opacity multiplier. Default 1. */
     opacity?: number;
+    /** Draw an underline beneath each rendered line. Default false. */
+    underline?: boolean;
+    /** Bend text along a shallow vertical curve. Range -100..100. Default 0. */
+    bendPreset?: TextBendPreset;
+    bendStrength?: number;
     /** Optional `name` for runtime `getObjectByName` lookups. */
     name?: string;
     /** Ignore depth — appropriate for overlay UI. Default true. */
@@ -58,5 +153,9 @@ export type TextLabelProps = {
     scale?: [number, number, number] | number;
     /** Mesh visibility, forwarded so descendants inherit correctly. */
     visible?: boolean;
+    /** Render ordering for overlay composition. */
+    renderOrder?: number;
 };
 export declare function TextLabel(props: TextLabelProps): import("react/jsx-runtime").JSX.Element;
+export declare function resolveTextLabelDrawX(width: number, padding: number, textAlign: TextAlign): number;
+export declare function resolveTextLabelPanelX(width: number, panelWidth: number, textAlign: TextAlign, bgFit: "full" | "text"): number;

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

@@ -1,6 +1,16 @@
 import { CanvasProps } from '@react-three/fiber';
 import { default as React, PropsWithChildren } from 'react';
-type XRSceneProps = PropsWithChildren & {
+import * as THREE from "three";
+export type XRSceneRenderOutputRequest = {
+    sceneColor?: boolean;
+    sceneDepth?: boolean;
+    excludeScreenUI?: boolean;
+};
+export type XRSceneRenderOutputs = {
+    sceneColorTexture: THREE.Texture | null;
+    sceneDepthTexture: THREE.Texture | null;
+};
+export type XRSceneProps = PropsWithChildren & {
     style?: React.CSSProperties;
     canvasProps?: CanvasProps & React.RefAttributes<HTMLCanvasElement>;
     loadingComponent?: React.ReactNode;
@@ -10,6 +20,7 @@ type XRSceneProps = PropsWithChildren & {
         width: number;
         height: number;
     };
+    renderOutputs?: XRSceneRenderOutputRequest;
+    onRenderOutputs?: (outputs: XRSceneRenderOutputs) => void;
 };
-export declare const XRScene: ({ style, canvasProps, children, loadingComponent, loadingTransitionDuration, errorComponent, renderTargetSize, }: XRSceneProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const XRScene: ({ style, canvasProps, children, loadingComponent, loadingTransitionDuration, errorComponent, renderTargetSize, renderOutputs, onRenderOutputs, }: XRSceneProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -3,6 +3,8 @@ import { CalibrationMediaSourceKind } from '../../hooks/useCalibrationFaceTracke
 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";
@@ -25,6 +27,18 @@ 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[];
@@ -61,6 +75,8 @@ type XRViewportProps = {
     mediaStrategy?: XRViewportMediaStrategy;
     mediaDock?: "top-left" | "bottom-left";
     mode?: XRViewportMode;
+    previewMode?: XRViewportPreviewMode;
+    renderOutputs?: XRViewportRenderOutputRequest;
     showMediaControlsByDefault?: boolean;
     source?: XRViewportSourceConfig;
     style?: CSSProperties;
@@ -97,5 +113,6 @@ export declare const resolveViewportExternalFaces: ({ detectionResults, selected
     selectedSource: CalibrationMediaSourceKind;
 }) => FaceTrackingResult[];
 export declare const useXRViewportState: () => XRViewportRenderState | null;
+export declare const useXRViewportRenderOutputs: () => XRViewportRenderOutputs | null;
 export declare const XRViewport: XRViewportComponent;
 export {};