@vincentt-xr/sdk 2.0.0-alpha.6 → 2.0.0-alpha.8

package/dist/components/SegmentationOverlay/SegmentationOverlay.d.ts

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+import { SemanticMask } from '../../segmentation2d/types';
+import { SegmentationOverlaySettings } from './settings';
+import * as THREE from "three";
+export type SegmentationOverlayMaterialContext = {
+    cameraTexture: THREE.Texture | null;
+    /**
+     * Class-index texture (red channel, 0..255 → index); nearest-filtered.
+     * Re-allocated when the mask changes size; the factory is re-run with the
+     * new texture, so read it from the context rather than caching it.
+     */
+    maskTexture: THREE.Texture;
+    /** Feed UV → mask UV, including the row flip, mirror and source cover-fit. */
+    maskTransform: THREE.Matrix3;
+    /** Class indices the overlay selects, resolved from `label` against the mask; empty until the mask has data. */
+    labelIndices: number[];
+    mask: SemanticMask | null;
+    settings: SegmentationOverlaySettings;
+};
+export type SegmentationOverlayMaterialSpec = ReactNode | THREE.Material | ((context: SegmentationOverlayMaterialContext) => ReactNode | THREE.Material);
+export type SegmentationOverlayProps = Partial<SegmentationOverlaySettings> & {
+    /** The mask to draw from: a provider hook's result or your own `SemanticMask`. */
+    mask: SemanticMask | null;
+    /** Optional image multiplied into the paint, sampled in screen UV (cover of the viewport). */
+    texture?: THREE.Texture | string;
+    /** Custom material (node, instance, or factory). Replaces the built-in look. */
+    material?: SegmentationOverlayMaterialSpec;
+    /** Default: just above the video background. */
+    renderOrder?: number;
+    visible?: boolean;
+};
+/**
+ * Draw one or more semantic regions of a mask as a screen-aligned 2D layer,
+ * tinted and composited over the camera feed. Covers the viewport exactly
+ * like `VideoBackground`, so feed-space masks need no coordinate work.
+ */
+export declare const SegmentationOverlay: ({ mask, texture, material, renderOrder, visible, ...settingsInput }: SegmentationOverlayProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/SegmentationOverlay/SegmentationOverlayMaterial.d.ts

@@ -0,0 +1,31 @@
+import { SemanticMask } from '../../segmentation2d/types';
+import { SegmentationOverlaySettings } from './settings';
+import * as THREE from "three";
+/** Up to this many labels can be selected by one overlay. */
+export declare const MAX_OVERLAY_LABELS = 4;
+export type SegmentationOverlayMaterialInputs = {
+    cameraTexture: THREE.Texture | null;
+    maskTexture: THREE.Texture;
+    mask: SemanticMask | null;
+    settings: SegmentationOverlaySettings;
+    /** Optional image sampled in screen UV and multiplied into the paint. */
+    designTexture?: THREE.Texture | null;
+    /** Feed (camera texture) size, for cover-fitting source-space masks. */
+    feedWidth?: number;
+    feedHeight?: number;
+};
+export declare const SEGMENTATION_OVERLAY_VERTEX_SHADER = "\nvarying vec2 vUv;\nvoid main() {\n  vUv = uv;\n  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n}";
+export declare const SEGMENTATION_OVERLAY_FRAGMENT_SHADER = "\nuniform sampler2D cameraTexture;\nuniform sampler2D maskTexture;\nuniform sampler2D designTexture;\nuniform float useDesign;\nuniform vec4 labels;\nuniform float labelCount;\nuniform float invert;\nuniform vec3 tint;\nuniform float opacity;\nuniform float blendMode;\nuniform float feather;\nuniform vec2 maskTexel;\nuniform mat3 maskTransform;\nvarying vec2 vUv;\n\nfloat member(vec2 uv) {\n  if (uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0) return 0.0;\n  float index = floor(texture2D(maskTexture, uv).r * 255.0 + 0.5);\n  float m = 0.0;\n  if (labelCount > 0.5 && abs(index - labels.x) < 0.5) m = 1.0;\n  if (labelCount > 1.5 && abs(index - labels.y) < 0.5) m = 1.0;\n  if (labelCount > 2.5 && abs(index - labels.z) < 0.5) m = 1.0;\n  if (labelCount > 3.5 && abs(index - labels.w) < 0.5) m = 1.0;\n  return invert > 0.5 ? 1.0 - m : m;\n}\n\nvoid main() {\n  vec2 maskUv = (maskTransform * vec3(vUv, 1.0)).xy;\n  float coverage;\n  if (feather > 0.0) {\n    vec2 step = maskTexel * feather;\n    coverage = 0.0;\n    for (int y = -1; y <= 1; y++) {\n      for (int x = -1; x <= 1; x++) {\n        coverage += member(maskUv + vec2(float(x), float(y)) * step);\n      }\n    }\n    coverage /= 9.0;\n  } else {\n    coverage = member(maskUv);\n  }\n\n  vec3 base = texture2D(cameraTexture, vUv).rgb;\n  vec4 design = useDesign > 0.5 ? texture2D(designTexture, vUv) : vec4(1.0);\n  vec3 paint = tint * design.rgb;\n  vec3 blended = blendMode < 0.5\n    ? paint\n    : blendMode < 1.5\n      ? base * paint\n      : blendMode < 2.5\n        ? 1.0 - (1.0 - base) * (1.0 - paint)\n        : mix(2.0 * base * paint, 1.0 - 2.0 * (1.0 - base) * (1.0 - paint), step(0.5, base));\n\n  gl_FragColor = vec4(blended, coverage * opacity * design.a);\n  #include <colorspace_fragment>\n}";
+/** The built-in overlay material as a plain three.js object (shareable across meshes). */
+export declare const createSegmentationOverlayMaterial: () => THREE.ShaderMaterial;
+/** Resolve the selected labels to class indices for a mask (unknown labels are skipped). */
+export declare const resolveOverlayLabelIndices: (mask: Pick<SemanticMask, "labels"> | null, label: string | readonly string[]) => number[];
+/**
+ * The class indices an overlay should draw right now: the resolved labels,
+ * or none while the mask is still at `version` 0 (no data yet). Shared by
+ * the built-in material and the custom-material context so both agree.
+ */
+export declare const resolveActiveOverlayLabelIndices: (mask: SemanticMask | null, label: string | readonly string[]) => number[];
+export declare const updateSegmentationOverlayMaterial: (material: THREE.ShaderMaterial, { cameraTexture, maskTexture, mask, settings, designTexture, feedWidth, feedHeight, }: SegmentationOverlayMaterialInputs) => THREE.ShaderMaterial;
+/** Own one overlay material and keep it in sync with the inputs on every render. */
+export declare const useSegmentationOverlayMaterial: (inputs: SegmentationOverlayMaterialInputs) => THREE.ShaderMaterial;

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

@@ -0,0 +1,9 @@
+export { SegmentationOverlay } from './SegmentationOverlay';
+export type { SegmentationOverlayMaterialContext, SegmentationOverlayMaterialSpec, SegmentationOverlayProps, } from './SegmentationOverlay';
+export { MAX_OVERLAY_LABELS, SEGMENTATION_OVERLAY_FRAGMENT_SHADER, SEGMENTATION_OVERLAY_VERTEX_SHADER, createSegmentationOverlayMaterial, resolveActiveOverlayLabelIndices, resolveOverlayLabelIndices, updateSegmentationOverlayMaterial, useSegmentationOverlayMaterial, } from './SegmentationOverlayMaterial';
+export type { SegmentationOverlayMaterialInputs } from './SegmentationOverlayMaterial';
+export { createSemanticMaskTexture, uploadSemanticMask, useSemanticMaskTexture, } from './maskTexture';
+export { PERSON_MASK_LABELS, resolveMaskSize, useFaceRegionMask, useHairMask, usePersonMask, useSemanticSegmentationMask, } from './providers';
+export type { SemanticSegmentationMaskResult, UseFaceRegionMaskOptions, UsePersonMaskOptions, UseSemanticSegmentationMaskOptions, } from './providers';
+export { DEFAULT_SEGMENTATION_OVERLAY_SETTINGS, SEGMENTATION_OVERLAY_BLEND_MODES, SEGMENTATION_OVERLAY_SETTINGS_FIELDS, parseOverlayLabels, patchSegmentationOverlaySettings, resolveSegmentationOverlaySettings, } from './settings';
+export type { SegmentationOverlayBlendMode, SegmentationOverlaySettings } from './settings';

package/dist/components/SegmentationOverlay/maskTexture.d.ts

@@ -0,0 +1,23 @@
+import { SemanticMask } from '../../segmentation2d/types';
+import * as THREE from "three";
+/** One red byte per pixel holding the class index; nearest filtering keeps classes crisp. */
+export declare const createSemanticMaskTexture: (width?: number, height?: number) => THREE.DataTexture;
+/**
+ * Copy a mask into the texture, re-allocating when its size changed. Returns
+ * the texture to use (a new one when re-allocated; dispose the old one).
+ */
+export declare const uploadSemanticMask: (texture: THREE.DataTexture, mask: SemanticMask) => THREE.DataTexture;
+type Uploaded = {
+    texture: THREE.DataTexture;
+    version: number;
+    mask: SemanticMask | null;
+};
+/**
+ * Keep a GPU copy of a mask in sync with its `version`. The returned holder
+ * is stable; call `sync()` once per frame (or render) before drawing.
+ */
+export declare const useSemanticMaskTexture: (mask: SemanticMask | null) => {
+    holder: Uploaded;
+    sync: () => THREE.DataTexture;
+};
+export {};

package/dist/components/SegmentationOverlay/providers.d.ts

@@ -0,0 +1,72 @@
+import { FaceRegionLabel } from '../../segmentation2d/faceRegions';
+import { SemanticMask } from '../../segmentation2d/types';
+import { SemanticSegmentationModelOptions, SemanticSegmentationStatus } from '../../types/segmentation';
+/** Mask size for a long edge, keeping the feed's aspect ratio. */
+export declare const resolveMaskSize: (feed: {
+    width: number;
+    height: number;
+}, longEdge: number) => {
+    width: number;
+    height: number;
+};
+export type UseFaceRegionMaskOptions = {
+    /** Which face, or `"all"` to stack every tracked face into one mask. Default `"all"`. */
+    faceIndex?: number | "all";
+    /** Only rasterize these regions. Default: all of `FACE_REGION_LABELS`. */
+    regions?: readonly FaceRegionLabel[];
+    /** Mask long edge in pixels. Default 256. */
+    resolution?: number;
+    /** Cap how often the mask is re-rasterized. Omit for every frame. */
+    maxUpdateFps?: number;
+    /**
+     * Keep a face's last mask for this long (ms) when the tracker drops it,
+     * bridging the brief dropouts small or fast faces cause. Default 250,
+     * matching `useFaceInfos`. 0 clears the mask on the first missing frame.
+     */
+    holdMs?: number;
+    /**
+     * While a face is held, move it along its last velocity for up to this
+     * long (ms) so the mask keeps up with a moving subject. Default 0.
+     */
+    predictMs?: number;
+};
+/**
+ * A semantic mask of `face_skin`, `brows`, `eyes`, `lips` and `mouth`
+ * rasterized from the face tracker's landmarks every frame. The returned
+ * object is stable and mutated in place; its `version` changes on updates.
+ * Requires a face tracker in the session.
+ */
+export declare const useFaceRegionMask: ({ faceIndex, regions, resolution, maxUpdateFps, holdMs, predictMs, }?: UseFaceRegionMaskOptions) => SemanticMask;
+export declare const PERSON_MASK_LABELS: readonly ["bg", "person"];
+export type UsePersonMaskOptions = {
+    /** Cap how often the mask is read back from the GPU. Default 15. */
+    maxUpdateFps?: number;
+    /** Keep the segmentation model running. Default true. */
+    active?: boolean;
+};
+/**
+ * The SDK's portrait segmentation as a semantic mask (`bg` / `person`) in
+ * feed space. Acquires the segmentation model itself. Each update is a
+ * GPU→CPU readback, so it is rate-limited by default.
+ */
+export declare const usePersonMask: ({ maxUpdateFps, active, }?: UsePersonMaskOptions) => SemanticMask;
+export type UseSemanticSegmentationMaskOptions = SemanticSegmentationModelOptions & {
+    /** Keep the model running. Default true. */
+    active?: boolean;
+};
+export type SemanticSegmentationMaskResult = {
+    /** Stable mask in feed space; `version` stays 0 until the first inference. */
+    mask: SemanticMask;
+    status: SemanticSegmentationStatus;
+    error: Error | null;
+    labels: readonly string[];
+};
+/**
+ * A category-segmentation mask from `XRModel.SEMANTIC_SEGMENTATION` (hair or
+ * multiclass). Acquires the model itself; the first acquirer in a session
+ * picks the preset and model URL. The mask is produced on the model's own
+ * loop at its `targetFps` (15 by default), so no extra throttle is needed.
+ */
+export declare const useSemanticSegmentationMask: ({ active, ...modelOptions }?: UseSemanticSegmentationMaskOptions) => SemanticSegmentationMaskResult;
+/** MediaPipe Hair Segmenter as a `bg` / `hair` mask in feed space. */
+export declare const useHairMask: (options?: Omit<UseSemanticSegmentationMaskOptions, "preset">) => SemanticSegmentationMaskResult;

package/dist/components/SegmentationOverlay/settings.d.ts

@@ -0,0 +1,65 @@
+export declare const SEGMENTATION_OVERLAY_BLEND_MODES: readonly ["normal", "multiply", "screen", "overlay"];
+export type SegmentationOverlayBlendMode = (typeof SEGMENTATION_OVERLAY_BLEND_MODES)[number];
+/** Serializable look of a `SegmentationOverlay`. */
+export type SegmentationOverlaySettings = {
+    /** Region label to show (comma-separate several, e.g. `"lips,mouth"`). */
+    label: string;
+    /** Show everything except the selected labels. */
+    invert: boolean;
+    color: string;
+    opacity: number;
+    /** How the paint combines with the camera pixels underneath. */
+    blendMode: SegmentationOverlayBlendMode;
+    /** Edge feather radius in mask texels (0 = hard class edges). */
+    feather: number;
+    /** Flip the mask horizontally (source-space masks on a mirrored feed). */
+    mirrored: boolean;
+};
+export declare const DEFAULT_SEGMENTATION_OVERLAY_SETTINGS: SegmentationOverlaySettings;
+export declare const resolveSegmentationOverlaySettings: (input?: Partial<SegmentationOverlaySettings>) => SegmentationOverlaySettings;
+export declare const patchSegmentationOverlaySettings: (current: SegmentationOverlaySettings, patch: Partial<SegmentationOverlaySettings>) => SegmentationOverlaySettings;
+/** Split a `label` setting into the individual labels it names. */
+export declare const parseOverlayLabels: (label: string | readonly string[]) => string[];
+export declare const SEGMENTATION_OVERLAY_SETTINGS_FIELDS: [{
+    readonly key: "label";
+    readonly label: "Region";
+    readonly type: "select";
+    readonly options: {
+        label: "bg" | "brows" | "eyes" | "face_skin" | "hair" | "lips" | "mouth" | "person";
+        value: "bg" | "brows" | "eyes" | "face_skin" | "hair" | "lips" | "mouth" | "person";
+    }[];
+}, {
+    readonly key: "invert";
+    readonly label: "Invert selection";
+    readonly type: "boolean";
+}, {
+    readonly key: "color";
+    readonly label: "Color";
+    readonly type: "color";
+}, {
+    readonly key: "opacity";
+    readonly label: "Opacity";
+    readonly type: "number";
+    readonly min: 0;
+    readonly max: 1;
+    readonly step: 0.01;
+}, {
+    readonly key: "blendMode";
+    readonly label: "Blend";
+    readonly type: "select";
+    readonly options: {
+        label: "multiply" | "overlay" | "screen" | "normal";
+        value: "multiply" | "overlay" | "screen" | "normal";
+    }[];
+}, {
+    readonly key: "feather";
+    readonly label: "Feather (texels)";
+    readonly type: "number";
+    readonly min: 0;
+    readonly max: 8;
+    readonly step: 0.5;
+}, {
+    readonly key: "mirrored";
+    readonly label: "Mirror mask";
+    readonly type: "boolean";
+}];

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

@@ -1,11 +1,12 @@
 import { RefObject } from 'react';
 import { XRLayerConfig, XRMediaLayout, XRMediaSourceKind } from '../../types/compositor';
-export declare const XRMediaSurface: ({ canvasRef, imageRef, layer, layout, mirrored, sourceKind, videoRef, }: {
+export declare const XRMediaSurface: ({ canvasRef, imageRef, layer, layout, mirrored, onCaptureTarget, sourceKind, videoRef, }: {
     canvasRef: RefObject<HTMLCanvasElement | null>;
     imageRef: RefObject<HTMLImageElement | null>;
     layer: XRLayerConfig;
     layout: XRMediaLayout | null;
     mirrored: boolean;
+    onCaptureTarget?: (canvas: HTMLCanvasElement | undefined) => void;
     sourceKind: XRMediaSourceKind;
     videoRef: RefObject<HTMLVideoElement | null>;
 }) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,13 +1,27 @@
 import { PropsWithChildren } from 'react';
 import { SessionFacade } from '../../hooks/useXRSession';
-import { XRPerfConfig } from '../../types';
+import { XRLifecycleConfig, XRPerfConfig } from '../../types';
+import { XRQualityConfigInput } from '../../quality/types';
 export type XRContextType = {
     session: SessionFacade;
 };
 export declare const useXRContext: () => XRContextType;
+/** The session facade when inside an `<XRProvider>`, else `null` (for components that work with or without a session). */
+export declare const useOptionalXRContext: () => XRContextType | null;
 export type XRProviderProps = PropsWithChildren<{
     /** Performance config: cap ML inference fps and camera resolution to reduce
      *  GPU/CPU load and heat. See {@link XRPerfConfig}. */
     perf?: XRPerfConfig;
+    /** Lifecycle behaviour (pause while hidden). See {@link XRLifecycleConfig}. */
+    lifecycle?: XRLifecycleConfig;
+    /**
+     * Adaptive quality. ON by default with `DEFAULT_QUALITY_TIERS` and
+     * `DEFAULT_PERFORMANCE_BUDGET`: tracker fps, analysis resolution and the
+     * render pixel ratio step down under load and back up when it clears.
+     * Pass a partial config ({@link XRQualityConfigInput}) to customise (tiers, budget,
+     * bounds, `adaptive: false` to pin), or `false` to mount no controller
+     * (mount `<XRQualityController>` yourself, or manage `perf` by hand).
+     */
+    quality?: XRQualityConfigInput | false;
 }>;
-export declare const XRProvider: ({ children, perf }: XRProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const XRProvider: ({ children, perf, lifecycle, quality }: XRProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/XRViewport/hooks/useViewportExternalFaces.d.ts

@@ -9,5 +9,5 @@ export declare const useViewportExternalFaces: ({ enabled, selectedSource, }: {
     selectedSource: CalibrationMediaSourceKind;
 }) => {
     faces: import('../../../types').FaceTrackingResult[];
-    trackerStatus: "idle" | "ready";
+    trackerStatus: "ready" | "idle";
 };

package/dist/components/XRViewport/hooks/useViewportMediaSource.d.ts

@@ -11,6 +11,6 @@ export declare const useViewportMediaSource: ({ enabled, imageAsset, selectedSou
     imageRef: import('react').RefObject<HTMLImageElement>;
     stream: MediaStream | null;
     mediaSize: XRViewportSize;
-    status: "idle" | "ready" | "error" | "requesting";
+    status: "ready" | "error" | "requesting" | "idle";
     error: string | null;
 };

package/dist/components/XRViewport/hooks/useViewportPipeline.d.ts

@@ -24,7 +24,7 @@ export declare const useViewportPipeline: ({ fitMode, imageOptions, initialImage
         imageRef: import('react').RefObject<HTMLImageElement>;
         stream: MediaStream | null;
         mediaSize: import('..').XRViewportSize;
-        status: "idle" | "ready" | "error" | "requesting";
+        status: "ready" | "error" | "requesting" | "idle";
         error: string | null;
     };
     renderOutputState: import('..').XRViewportRenderOutputs;

package/dist/components/index.d.ts

@@ -6,8 +6,11 @@ export * from './FaceMesh';
 export * from './FaceRetouch';
 export * from './FaceWarp3D';
 export * from './GestureTracker';
+export * from './GestureListener';
 export * from './GestureTrigger';
 export * from './HandTracker';
+export * from './IrisEffect';
+export * from './HolisticTracker';
 export * from './HandTracking3D';
 export * from './HandTracking2DController';
 export * from './HandTracking2D';

package/dist/constants/index.d.ts

@@ -8,7 +8,10 @@ export declare enum XRModel {
     GESTURE_TRACKER = "vincentt.xr.gesture-tracker",
     FACE_TRACKER = "vincentt.xr.face-tracker",
     BODY_TRACKER = "vincentt.xr.body-tracker",
-    BACKGROUND_SEGMENTATION = "vincentt.xr.background-segmentation"
+    /** One MediaPipe Holistic inference for face + both hands + pose (single person). */
+    HOLISTIC_TRACKER = "vincentt.xr.holistic-tracker",
+    BACKGROUND_SEGMENTATION = "vincentt.xr.background-segmentation",
+    SEMANTIC_SEGMENTATION = "vincentt.xr.semantic-segmentation"
 }
 export declare enum XRComponentEnum {
     CAMERA = "vincentt.component.camera",

package/dist/contexts-CO0sd4JQ.cjs

@@ -0,0 +1 @@
+"use strict";var Re=Object.defineProperty;var Ee=(e,t,n)=>t in e?Re(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n;var Q=(e,t,n)=>Ee(e,typeof t!="symbol"?t+"":t,n);const L=require("react/jsx-runtime"),J=require("@react-three/fiber"),A=require("react"),Te=require("three"),O=require("./selectors-Du_PsVnW.cjs"),fe=require("./index-CeVkgsag.cjs"),se=require("./index-DKBAh6hV.cjs");function Me(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const a=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,a.get?a:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const j=Me(Te),ue={display:"flex",alignItems:"center",justifyContent:"center",height:"100%",background:"#363636",color:"white",fontFamily:"monospace"},Ae=()=>L.jsx("div",{style:ue,children:"Loading..."}),Ce=e=>L.jsx("div",{style:ue,children:e.error}),Fe=e=>typeof e=="number"?e:Array.isArray(e)?e[1]:3,le={position:"absolute",top:0,left:0,width:"100%",height:"100%",zIndex:10},ce={sceneColorTexture:null,sceneDepthTexture:null},ke=({cap:e})=>{const t=J.useThree(o=>o.setDpr),n=O.useXRQualityState(),r=O.useXRQualityConfig()?(n==null?void 0:n.decision.tier.renderScale)??1:1;return A.useEffect(()=>{const o=Math.min(typeof window<"u"&&window.devicePixelRatio||1,e);t(Math.max(.5,o*r))},[t,e,r]),null},Ie=({onRenderOutputs:e,renderOutputs:t,size:n})=>{const{gl:a,scene:r,size:o}=J.useThree(),{session:c}=fe.useXRContext(),s=Math.max(1,Math.round((n==null?void 0:n.width)??o.width)),d=Math.max(1,Math.round((n==null?void 0:n.height)??o.height)),f=!!(t.sceneColor||t.sceneDepth),l=A.useMemo(()=>{if(!f)return null;const i=new j.WebGLRenderTarget(s,d,{colorSpace:j.SRGBColorSpace,depthBuffer:!0,stencilBuffer:!1});return t.sceneDepth&&(i.depthTexture=new j.DepthTexture(s,d),i.depthTexture.format=j.DepthFormat,i.depthTexture.type=j.UnsignedShortType),i},[f,d,t.sceneDepth,s]);return A.useEffect(()=>{if(!l){e==null||e(ce);return}return e==null||e({sceneColorTexture:t.sceneColor?l.texture:null,sceneDepthTexture:t.sceneDepth&&l.depthTexture?l.depthTexture:null}),()=>{var i;l.dispose(),(i=l.depthTexture)==null||i.dispose(),e==null||e(ce)}},[e,t.sceneColor,t.sceneDepth,l]),J.useFrame(()=>{if(!l)return;const i=[];t.excludeScreenUI!==!1&&r.traverse(x=>{x.visible&&x.renderOrder>=O.RENDER_LAYERS.SCREEN_UI&&(i.push(x),x.visible=!1)});const p=a.getRenderTarget(),v=a.xr.enabled;a.xr.enabled=!1,a.setRenderTarget(l),a.clear(),c._renderFrame(),a.setRenderTarget(p),a.xr.enabled=v,i.forEach(x=>{x.visible=!0})},-100),null},Le=({style:e,canvasProps:t,children:n,loadingComponent:a,loadingTransitionDuration:r,errorComponent:o,renderTargetSize:c,renderOutputs:s={},onRenderOutputs:d})=>{const f=A.useRef(null),l=A.useRef(null),i=A.useRef(null),p=A.useRef(!1),{session:v}=fe.useXRContext(),x=O.useXRReady(),u=O.useXRError(),[h,g]=A.useState(!0);return A.useEffect(()=>{if(c){v._setRenderSize(Math.round(c.width),Math.round(c.height));return}const y=(w,E)=>{w<=0||E<=0||v._setRenderSize(Math.round(w),Math.round(E))},m=()=>{!l.current||p.current||(p.current=!0,v._setRenderTarget(l.current))},C=(w,E)=>{i.current!==null&&cancelAnimationFrame(i.current),i.current=requestAnimationFrame(()=>{i.current=null,y(w,E)})},S=new ResizeObserver(w=>{const E=w[0];if(!E)return;const{width:B,height:I}=E.contentRect;m(),C(B,I)});return f.current&&S.observe(f.current),m(),()=>{S.disconnect(),i.current!==null&&(cancelAnimationFrame(i.current),i.current=null),p.current=!1}},[c,v]),A.useEffect(()=>{x&&(r?setTimeout(()=>{g(!1)},r):g(!1))},[x,r]),L.jsxs("div",{id:"vincentt-xr-container",ref:f,style:{width:"100%",height:"100%",...e,position:"relative"},children:[h&&L.jsx("div",{style:le,children:a||L.jsx(Ae,{})}),u&&L.jsx("div",{style:le,children:o||L.jsx(Ce,{error:u.message})}),L.jsxs(J.Canvas,{id:"vincentt-xr-canvas",ref:l,dpr:[1,3],gl:{alpha:!0,preserveDrawingBuffer:!1,antialias:!0,stencil:!0,premultipliedAlpha:!1,toneMapping:j.NoToneMapping},...t,onCreated:y=>{c?v._setRenderSize(Math.round(c.width),Math.round(c.height)):v._setRenderTarget(l.current),v._setR3FState({renderer:y.gl,scene:y.scene,camera:y.camera}),y.gl.outputColorSpace=j.SRGBColorSpace,t!=null&&t.onCreated&&t.onCreated(y)},children:[L.jsx(Ie,{onRenderOutputs:d,renderOutputs:s,size:c}),L.jsx(ke,{cap:Fe(t==null?void 0:t.dpr)}),n]})]})},xe=(e,t,n,a,r)=>{const o=e/2,c=t/2,s=n.left*o+a.left,d=n.right*o-a.right,f=n.bottom*c+a.bottom,l=n.top*c-a.top,i=d-s,p=l-f,v=(s+d)/2,x=(f+l)/2,u=r[0]*i/2,h=r[1]*p/2;return{centerX:v,centerY:x,width:i,height:p,pivotX:u,pivotY:h}},Xe={left:0,right:0,top:0,bottom:0},Be={left:0,right:0,top:0,bottom:0},Ge=[0,0],De=({anchors:e,offsets:t,pivot:n=Ge,children:a})=>{const{width:r,height:o}=se.useScreenSpace(),c=A.useMemo(()=>({anchors:{...Xe,...e??{}},offsets:{...Be,...t??{}}}),[e,t]),s=A.useMemo(()=>xe(r,o,c.anchors,c.offsets,n),[r,o,c,n]);A.useEffect(()=>{const i=c.anchors;i.left>i.right&&console.warn(`[ScreenTransform] inverted X axis: anchors.left (${i.left}) > anchors.right (${i.right})`),i.bottom>i.top&&console.warn(`[ScreenTransform] inverted Y axis: anchors.bottom (${i.bottom}) > anchors.top (${i.top})`),s.width<=0&&console.warn(`[ScreenTransform] zero or negative width (${s.width.toFixed(3)}) — anchors + offsets collapse the X extent`),s.height<=0&&console.warn(`[ScreenTransform] zero or negative height (${s.height.toFixed(3)}) — anchors + offsets collapse the Y extent`)},[c,s.width,s.height]);const d=n[0]!==0||n[1]!==0,f=d?[1,1,1]:[s.width,s.height,1],l=!d&&s.width>0&&s.height>0?s.width/s.height:null;return L.jsx("group",{position:[s.centerX-s.pivotX,s.centerY-s.pivotY,0],scale:f,renderOrder:O.RENDER_LAYERS.SCREEN_UI,children:L.jsx(se.ScreenRectAspectContext.Provider,{value:l,children:a})})};class ve{constructor(t,n){Q(this,"capabilities");Q(this,"snapshot");Q(this,"listeners",new Set);Q(this,"eventListeners",new Map);this.capabilities=t,this.snapshot={state:"idle",frame:0,time:0,playMode:"forward",loop:!0,loopCount:0,...n}}play(){const t=this.snapshot.state==="paused";this.update({state:"playing"}),this.emit(t?"Resume":"PlayBegin")}pause(){this.update({state:"paused"}),this.emit("Pause")}restart(){this.update({state:"playing",frame:0,time:0}),this.emit("PlayBegin")}setPlayMode(t){!this.capabilities.canReverse&&(t==="reverse"||t==="ping-pong"||t==="random")||this.update({playMode:t})}setLoop(t,n=0){this.update({loop:t,loopCount:n})}seek(t){this.capabilities.canSeek&&this.update({frame:Math.max(0,Math.floor(t)),time:Math.max(0,t)})}subscribe(t){return this.listeners.add(t),()=>this.listeners.delete(t)}on(t,n){const a=this.eventListeners.get(t)??new Set;return a.add(n),this.eventListeners.set(t,a),()=>this.off(t,n)}off(t,n){var a;(a=this.eventListeners.get(t))==null||a.delete(n)}getSnapshot(){return this.snapshot}dispose(){this.listeners.clear(),this.eventListeners.clear(),this.snapshot={...this.snapshot,state:"idle"}}updateSnapshot(t){this.update(t)}emit(t){var n;(n=this.eventListeners.get(t))==null||n.forEach(a=>a({type:t,snapshot:this.snapshot}))}update(t){this.snapshot={...this.snapshot,...t},this.listeners.forEach(n=>n(this.snapshot))}}const pe=(e,t,n,a,r)=>{const o=Math.max(1,Math.floor(t)),c=Math.max(0,Math.floor(e)),s=n==="ping-pong"&&o>1?o*2-2:o,d=Math.floor(c/s),f=r>0?d>=r:!a&&c>=s,l=f?s-1:c%s;return{frame:n==="reverse"?o-1-l%o:n==="random"?l*7919%o:n==="ping-pong"&&l>=o?s-l:l,ended:f,loop:d}},je=(e,t,n)=>{const a=Math.max(1,Math.floor(n));return Math.floor(Math.max(0,e)*Math.max(0,t))%a};var he={},ge,Ue;function $e(e,t,n,o){var r=0,o=o===void 0?{}:o,c=o.loop===void 0?null:o.loop,s=o.palette===void 0?null:o.palette;if(t<=0||n<=0||t>65535||n>65535)throw new Error("Width/Height invalid.");function d(h){var g=h.length;if(g<2||g>256||g&g-1)throw new Error("Invalid code/color length, must be power of 2 and 2 .. 256.");return g}e[r++]=71,e[r++]=73,e[r++]=70,e[r++]=56,e[r++]=57,e[r++]=97;var f=0,l=0;if(s!==null){for(var i=d(s);i>>=1;)++f;if(i=1<<f,--f,o.background!==void 0){if(l=o.background,l>=i)throw new Error("Background index out of range.");if(l===0)throw new Error("Background index explicitly passed as 0.")}}if(e[r++]=t&255,e[r++]=t>>8&255,e[r++]=n&255,e[r++]=n>>8&255,e[r++]=(s!==null?128:0)|f,e[r++]=l,e[r++]=0,s!==null)for(var p=0,v=s.length;p<v;++p){var x=s[p];e[r++]=x>>16&255,e[r++]=x>>8&255,e[r++]=x&255}if(c!==null){if(c<0||c>65535)throw new Error("Loop count invalid.");e[r++]=33,e[r++]=255,e[r++]=11,e[r++]=78,e[r++]=69,e[r++]=84,e[r++]=83,e[r++]=67,e[r++]=65,e[r++]=80,e[r++]=69,e[r++]=50,e[r++]=46,e[r++]=48,e[r++]=3,e[r++]=1,e[r++]=c&255,e[r++]=c>>8&255,e[r++]=0}var u=!1;this.addFrame=function(h,g,y,m,C,S){if(u===!0&&(--r,u=!1),S=S===void 0?{}:S,h<0||g<0||h>65535||g>65535)throw new Error("x/y invalid.");if(y<=0||m<=0||y>65535||m>65535)throw new Error("Width/Height invalid.");if(C.length<y*m)throw new Error("Not enough pixels for the frame size.");var w=!0,E=S.palette;if(E==null&&(w=!1,E=s),E==null)throw new Error("Must supply either a local or global palette.");for(var B=d(E),I=0;B>>=1;)++I;B=1<<I;var U=S.delay===void 0?0:S.delay,R=S.disposal===void 0?0:S.disposal;if(R<0||R>3)throw new Error("Disposal out of range.");var T=!1,k=0;if(S.transparent!==void 0&&S.transparent!==null&&(T=!0,k=S.transparent,k<0||k>=B))throw new Error("Transparent color index.");if((R!==0||T||U!==0)&&(e[r++]=33,e[r++]=249,e[r++]=4,e[r++]=R<<2|(T===!0?1:0),e[r++]=U&255,e[r++]=U>>8&255,e[r++]=k,e[r++]=0),e[r++]=44,e[r++]=h&255,e[r++]=h>>8&255,e[r++]=g&255,e[r++]=g>>8&255,e[r++]=y&255,e[r++]=y>>8&255,e[r++]=m&255,e[r++]=m>>8&255,e[r++]=w===!0?128|I-1:0,w===!0)for(var $=0,X=E.length;$<X;++$){var F=E[$];e[r++]=F>>16&255,e[r++]=F>>8&255,e[r++]=F&255}return r=qe(e,r,I<2?2:I,C),r},this.end=function(){return u===!1&&(e[r++]=59,u=!0),r},this.getOutputBuffer=function(){return e},this.setOutputBuffer=function(h){e=h},this.getOutputBufferPosition=function(){return r},this.setOutputBufferPosition=function(h){r=h}}function qe(e,t,n,a){e[t++]=n;var r=t++,o=1<<n,c=o-1,s=o+1,d=s+1,f=n+1,l=0,i=0;function p(S){for(;l>=S;)e[t++]=i&255,i>>=8,l-=8,t===r+256&&(e[r]=255,r=t++)}function v(S){i|=S<<l,l+=f,p(8)}var x=a[0]&c,u={};v(o);for(var h=1,g=a.length;h<g;++h){var y=a[h]&c,m=x<<8|y,C=u[m];if(C===void 0){for(i|=x<<l,l+=f;l>=8;)e[t++]=i&255,i>>=8,l-=8,t===r+256&&(e[r]=255,r=t++);d===4096?(v(o),d=s+1,f=n+1,u={}):(d>=1<<f&&++f,u[m]=d++),x=y}else x=C}return v(x),v(s),p(1),r+1===t?e[r]=0:(e[r]=t-r-1,e[t++]=0),t}function We(e){var t=0;if(e[t++]!==71||e[t++]!==73||e[t++]!==70||e[t++]!==56||(e[t++]+1&253)!==56||e[t++]!==97)throw new Error("Invalid GIF 87a/89a header.");var n=e[t++]|e[t++]<<8,a=e[t++]|e[t++]<<8,r=e[t++],o=r>>7,c=r&7,s=1<<c+1;e[t++],e[t++];var d=null,f=null;o&&(d=t,f=s,t+=s*3);var l=!0,i=[],p=0,v=null,x=0,u=null;for(this.width=n,this.height=a;l&&t<e.length;)switch(e[t++]){case 33:switch(e[t++]){case 255:if(e[t]!==11||e[t+1]==78&&e[t+2]==69&&e[t+3]==84&&e[t+4]==83&&e[t+5]==67&&e[t+6]==65&&e[t+7]==80&&e[t+8]==69&&e[t+9]==50&&e[t+10]==46&&e[t+11]==48&&e[t+12]==3&&e[t+13]==1&&e[t+16]==0)t+=14,u=e[t++]|e[t++]<<8,t++;else for(t+=12;;){var h=e[t++];if(!(h>=0))throw Error("Invalid block size");if(h===0)break;t+=h}break;case 249:if(e[t++]!==4||e[t+4]!==0)throw new Error("Invalid graphics extension block.");var g=e[t++];p=e[t++]|e[t++]<<8,v=e[t++],g&1||(v=null),x=g>>2&7,t++;break;case 254:for(;;){var h=e[t++];if(!(h>=0))throw Error("Invalid block size");if(h===0)break;t+=h}break;default:throw new Error("Unknown graphic control label: 0x"+e[t-1].toString(16))}break;case 44:var y=e[t++]|e[t++]<<8,m=e[t++]|e[t++]<<8,C=e[t++]|e[t++]<<8,S=e[t++]|e[t++]<<8,w=e[t++],E=w>>7,B=w>>6&1,I=w&7,U=1<<I+1,R=d,T=f,k=!1;if(E){var k=!0;R=t,T=U,t+=U*3}var $=t;for(t++;;){var h=e[t++];if(!(h>=0))throw Error("Invalid block size");if(h===0)break;t+=h}i.push({x:y,y:m,width:C,height:S,has_local_palette:k,palette_offset:R,palette_size:T,data_offset:$,data_length:t-$,transparent_index:v,interlaced:!!B,delay:p,disposal:x});break;case 59:l=!1;break;default:throw new Error("Unknown gif block: 0x"+e[t-1].toString(16))}this.numFrames=function(){return i.length},this.loopCount=function(){return u},this.frameInfo=function(X){if(X<0||X>=i.length)throw new Error("Frame index out of range.");return i[X]},this.decodeAndBlitFrameBGRA=function(X,F){var _=this.frameInfo(X),Z=_.width*_.height,q=new Uint8Array(Z);de(e,_.data_offset,q,Z);var W=_.palette_offset,P=_.transparent_index;P===null&&(P=256);var G=_.width,N=n-G,Y=G,K=(_.y*n+_.x)*4,ee=((_.y+_.height)*n+_.x)*4,M=K,V=N*4;_.interlaced===!0&&(V+=n*4*7);for(var H=8,z=0,te=q.length;z<te;++z){var D=q[z];if(Y===0&&(M+=V,Y=G,M>=ee&&(V=N*4+n*4*(H-1),M=K+(G+N)*(H<<1),H>>=1)),D===P)M+=4;else{var re=e[W+D*3],ne=e[W+D*3+1],ae=e[W+D*3+2];F[M++]=ae,F[M++]=ne,F[M++]=re,F[M++]=255}--Y}},this.decodeAndBlitFrameRGBA=function(X,F){var _=this.frameInfo(X),Z=_.width*_.height,q=new Uint8Array(Z);de(e,_.data_offset,q,Z);var W=_.palette_offset,P=_.transparent_index;P===null&&(P=256);var G=_.width,N=n-G,Y=G,K=(_.y*n+_.x)*4,ee=((_.y+_.height)*n+_.x)*4,M=K,V=N*4;_.interlaced===!0&&(V+=n*4*7);for(var H=8,z=0,te=q.length;z<te;++z){var D=q[z];if(Y===0&&(M+=V,Y=G,M>=ee&&(V=N*4+n*4*(H-1),M=K+(G+N)*(H<<1),H>>=1)),D===P)M+=4;else{var re=e[W+D*3],ne=e[W+D*3+1],ae=e[W+D*3+2];F[M++]=re,F[M++]=ne,F[M++]=ae,F[M++]=255}--Y}}}function de(e,t,n,a){for(var r=e[t++],o=1<<r,c=o+1,s=c+1,d=r+1,f=(1<<d)-1,l=0,i=0,p=0,v=e[t++],x=new Int32Array(4096),u=null;;){for(;l<16&&v!==0;)i|=e[t++]<<l,l+=8,v===1?v=e[t++]:--v;if(l<d)break;var h=i&f;if(i>>=d,l-=d,h===o){s=c+1,d=r+1,f=(1<<d)-1,u=null;continue}else if(h===c)break;for(var g=h<s?h:u,y=0,m=g;m>o;)m=x[m]>>8,++y;var C=m,S=p+y+(g!==h?1:0);if(S>a){console.log("Warning, gif stream longer than expected.");return}n[p++]=C,p+=y;var w=p;for(g!==h&&(n[p++]=C),m=g;y--;)m=x[m],n[--w]=m&255,m>>=8;u!==null&&s<4096&&(x[s++]=u<<8|C,s>=f+1&&d<12&&(++d,f=f<<1|1)),u=h}return p!==a&&console.log("Warning, gif stream shorter than expected."),n}try{Ue=he.GifWriter=$e,ge=he.GifReader=We}catch{}const Pe=ge;function Ne(e){return async(t,n)=>{const a=e.find(r=>r.canResolve(t));if(!a)throw new me("No texture provider matched source",t);return we(a.resolve.bind(a),t,n)}}class me extends Error{constructor(n,a){super(n);Q(this,"source");this.name="TextureSourceLoadError",this.source=a}}function b(e){if(e.aborted)throw new DOMException("Texture source load aborted","AbortError")}async function we(e,t,n){b(n);const a=await e(t,n);return n.aborted&&(a.dispose(),b(n)),a}function Ye(e){e==null||e.dispose()}const ye=5*1024*1024,oe=1e6,ie=180,Ve=(e,t,n)=>{for(let a=n.y;a<n.y+n.height;a+=1)e.fill(0,(a*t+n.x)*4,(a*t+n.x+n.width)*4)},He=(e,t,n,a,r)=>t.byteLength>ye?`file is ${(t.byteLength/1024/1024).toFixed(1)} MB; max is 5 MB`:n*a>oe?`canvas is ${n}x${a}; max area is ${oe}`:r>ie?`frame count is ${r}; max is ${ie}`:r===0?"frame count is 0":e?null:"source URL is empty",ze=e=>typeof e=="string"?e:e.src,Qe={canResolve:e=>typeof e=="string"?/\.gif(?:[?#].*)?$/i.test(e):e.kind==="gif",async resolve(e,t){const n=ze(e),a=await fetch(n,{signal:t});if(!a.ok)throw new Error(`GIF request failed with ${a.status}`);const r=new Uint8Array(await a.arrayBuffer());b(t);const o=new Pe(r),c=o.numFrames(),s=He(n,r,o.width,o.height,c);if(s)throw console.warn(`[xr-sdk] GIF ScreenImage source rejected: ${s}`,n),new Error(`GIF source rejected: ${s}`);const d=document.createElement("canvas");d.width=o.width,d.height=o.height;const f=d.getContext("2d");if(!f)throw new Error("Could not create GIF canvas context");const l=new j.CanvasTexture(d);l.colorSpace=j.SRGBColorSpace;const i=new Uint8Array(o.width*o.height*4),p=new ImageData(new Uint8ClampedArray(i.buffer),o.width,o.height),v=Array.from({length:c},(R,T)=>o.frameInfo(T)),x=v.reduce((R,T)=>R+Math.max(20,T.delay*10),0)/1e3,u=new ve({canSeek:!1,canReverse:!1,supportsLoopCount:!0},{state:"ready",duration:x,frameCount:c});let h=0,g=0,y=!1,m=!1,C=0,S=0,w=null;const E=(R,T=!1)=>{T&&(i.fill(0),w=null),(w==null?void 0:w.info.disposal)===2?Ve(i,o.width,w.info):w!=null&&w.restorePixels&&i.set(w.restorePixels);const k=v[R],$=k.disposal===3?new Uint8Array(i):null;return o.decodeAndBlitFrameRGBA(R,i),f.putImageData(p,0,0),l.needsUpdate=!0,w={info:k,restorePixels:$},m=!0,u.updateSnapshot({frame:R,time:v.slice(0,R).reduce((X,F)=>X+Math.max(20,F.delay*10),0)/1e3}),m=!1,u.emit("KeyFrameInSecond"),Math.max(20,k.delay*10)},B=R=>{g=window.setTimeout(()=>{h=requestAnimationFrame(I)},R)},I=()=>{if(y||u.getSnapshot().state!=="playing")return;const R=u.getSnapshot(),T=pe(C,c,R.playMode,R.loop,R.loopCount);if(T.ended){u.updateSnapshot({state:"ended",frame:T.frame,time:x}),u.emit("PlayEnd");return}const k=T.loop!==S;S=T.loop,C+=1,B(E(T.frame,k))},U=u.subscribe(R=>{m||(clearTimeout(g),cancelAnimationFrame(h),R.state==="playing"&&(h=requestAnimationFrame(I)))});return E(0),u.play(),{texture:l,controller:u,metadata:{width:o.width,height:o.height,duration:x,frameCount:c},dispose(){y=!0,U(),clearTimeout(g),cancelAnimationFrame(h),u.dispose(),l.dispose()}}}},Se=A.createContext(null),_e=A.createContext(null),Oe=()=>A.useContext(Se),Ze=()=>A.useContext(_e);exports.BasicAnimatedTextureController=ve;exports.MAX_GIF_BYTES=ye;exports.MAX_GIF_FRAMES=ie;exports.MAX_GIF_PIXELS=oe;exports.ScreenTransform=De;exports.TextureSourceLoadError=me;exports.XRScene=Le;exports.XRViewportRenderOutputsContext=_e;exports.XRViewportStateContext=Se;exports.computeScreenTransform=xe;exports.createTextureSourceResolver=Ne;exports.disposeResolvedTextureSource=Ye;exports.getPlaybackFrame=pe;exports.getSequenceFrame=je;exports.gifTextureSourceProvider=Qe;exports.resolveTextureSource=we;exports.throwIfAborted=b;exports.useXRViewportRenderOutputs=Ze;exports.useXRViewportState=Oe;