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

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/XRScene/renderOutputTarget.d.ts

@@ -0,0 +1,12 @@
+import * as THREE from "three";
+/**
+ * The render target `XRScene` captures the scene into for `renderOutputs`
+ * (scene colour and/or depth). It has a stencil buffer, as the canvas does:
+ * the captured frame must match the screen, and face effects use stencil
+ * bits (the mouth cut-out 0x01, the face surface's self-occlusion 0x80).
+ * With `sceneDepth` a depth texture replaces the depth renderbuffer, so it
+ * carries the stencil too (DEPTH24_STENCIL8); sampling it still reads depth.
+ */
+export declare const createXRSceneRenderOutputTarget: (width: number, height: number, { sceneDepth }?: {
+    sceneDepth?: boolean;
+}) => THREE.WebGLRenderTarget;

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

@@ -0,0 +1,11 @@
+import { XRViewportComponent } from './types';
+export { computeViewportLayout, resolveViewportFitMode, resolveViewportSourceSelection, } from './layout';
+export { useXRViewportRenderOutputs, useXRViewportState } from './contexts';
+export { resolveViewportExternalFaces } from './hooks/useViewportExternalFaces';
+export { resolveViewportSlotContent, resolveViewportSlots } from './slots';
+export { useViewportMediaSource } from './hooks/useViewportMediaSource';
+export { useViewportMediaTexture } from './hooks/useViewportMediaTexture';
+export { useViewportPipeline } from './hooks/useViewportPipeline';
+export { useViewportRenderOutputs, useViewportRenderState } from './hooks/useViewportRenderState';
+export type { XRViewportFitMode, XRViewportMediaAssetOption, XRViewportMediaStrategy, XRViewportMode, XRViewportPreviewMode, XRViewportRenderOutputRequest, XRViewportRenderOutputs, XRViewportRenderState, XRViewportSize, XRViewportSourceConfig, XRViewportSourceKind, } from './types';
+export declare const XRViewport: XRViewportComponent;

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

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+import { XRViewportSourceKind } from '../types';
+export declare const HiddenMedia: ({ imageRef, selectedSource, videoRef, }: {
+    imageRef: RefObject<HTMLImageElement>;
+    selectedSource: XRViewportSourceKind;
+    videoRef: RefObject<HTMLVideoElement>;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,8 @@
+import { XRViewportMediaAssetOption } from '../types';
+export declare const MediaAssetPicker: ({ dock, label, onChange, options, value, }: {
+    dock: "top-left" | "bottom-left";
+    label: string;
+    onChange: (value: string) => void;
+    options: XRViewportMediaAssetOption[];
+    value: string;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,13 @@
+import { XRViewportMediaAssetOption, XRViewportSourceKind } from '../types';
+export declare const MediaControlStack: ({ dock, imageOptions, selectedImageId, selectedSource, selectedVideoId, setSelectedImageId, setSelectedSource, setSelectedVideoId, showMediaControls, videoOptions, }: {
+    dock: "top-left" | "bottom-left";
+    imageOptions: XRViewportMediaAssetOption[];
+    selectedImageId: string;
+    selectedSource: XRViewportSourceKind;
+    selectedVideoId: string;
+    setSelectedImageId: (value: string) => void;
+    setSelectedSource: (value: XRViewportSourceKind) => void;
+    setSelectedVideoId: (value: string) => void;
+    showMediaControls: boolean;
+    videoOptions: XRViewportMediaAssetOption[];
+}) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,30 @@
+import { CSSProperties, ReactNode, RefObject } from 'react';
+import { XRSceneRenderOutputs } from '../../XRScene';
+import { XRViewportMediaAssetOption, XRViewportMode, XRViewportRenderOutputRequest, XRViewportSize, XRViewportSourceKind } from '../types';
+import { XRMediaLayout } from '../../../types/compositor';
+export declare const XRViewportLayers: ({ containerRef, displayCanvasRef, imageOptions, imageRef, layout, managesOwnMedia, mediaDock, mode, overlayContent, renderOutputs, sceneContent, selectedImageId, selectedSource, selectedVideoId, setSceneRenderOutputs, setSelectedImageId, setSelectedSource, setSelectedVideoId, showMediaControls, style, videoOptions, videoRef, viewportSize, mirrored, }: {
+    containerRef: RefObject<HTMLDivElement>;
+    displayCanvasRef: RefObject<HTMLCanvasElement>;
+    imageOptions: XRViewportMediaAssetOption[];
+    imageRef: RefObject<HTMLImageElement>;
+    layout: XRMediaLayout | null;
+    managesOwnMedia: boolean;
+    mediaDock: "top-left" | "bottom-left";
+    mode: XRViewportMode;
+    mirrored: boolean;
+    overlayContent: ReactNode;
+    renderOutputs: XRViewportRenderOutputRequest;
+    sceneContent: ReactNode;
+    selectedImageId: string;
+    selectedSource: XRViewportSourceKind;
+    selectedVideoId: string;
+    setSceneRenderOutputs: (outputs: XRSceneRenderOutputs) => void;
+    setSelectedImageId: (value: string) => void;
+    setSelectedSource: (value: XRViewportSourceKind) => void;
+    setSelectedVideoId: (value: string) => void;
+    showMediaControls: boolean;
+    style?: CSSProperties;
+    videoOptions: XRViewportMediaAssetOption[];
+    videoRef: RefObject<HTMLVideoElement>;
+    viewportSize: XRViewportSize;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,24 @@
+import { XRViewportSourceKind } from './types';
+export declare const DEFAULT_VIDEO_CONSTRAINTS: MediaStreamConstraints;
+export declare const liveLayer: {
+    name: string;
+    clearColor: string;
+    pointerEvents: "none";
+    zIndex: number;
+};
+export declare const uiLayer: {
+    name: string;
+    clearColor: string;
+    pointerEvents: "auto";
+    zIndex: number;
+};
+export declare const sceneLayer: {
+    name: string;
+    clearColor: string;
+    pointerEvents: "auto";
+    zIndex: number;
+};
+export declare const MEDIA_OPTION_META: Record<XRViewportSourceKind, {
+    icon: string;
+    label: string;
+}>;

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

@@ -0,0 +1,6 @@
+import { Context } from 'react';
+import { XRViewportRenderOutputs, XRViewportRenderState } from './types';
+export declare const XRViewportStateContext: Context<XRViewportRenderState | null>;
+export declare const XRViewportRenderOutputsContext: Context<XRViewportRenderOutputs | null>;
+export declare const useXRViewportState: () => XRViewportRenderState | null;
+export declare const useXRViewportRenderOutputs: () => XRViewportRenderOutputs | null;

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

@@ -0,0 +1,13 @@
+import { CalibrationMediaSourceKind } from '../../../hooks/useCalibrationFaceTracker';
+import { XRModelNodeFaceTracking } from '../../../types/nodes';
+export declare const resolveViewportExternalFaces: ({ detectionResults, selectedSource, }: {
+    detectionResults: ReturnType<XRModelNodeFaceTracking["getDetectionResults"]> | null | undefined;
+    selectedSource: CalibrationMediaSourceKind;
+}) => import('../../../types').FaceTrackingResult[];
+export declare const useViewportExternalFaces: ({ enabled, selectedSource, }: {
+    enabled: boolean;
+    selectedSource: CalibrationMediaSourceKind;
+}) => {
+    faces: import('../../../types').FaceTrackingResult[];
+    trackerStatus: "ready" | "idle";
+};

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

@@ -0,0 +1,16 @@
+import { XRViewportMediaAssetOption, XRViewportSize, XRViewportSourceKind } from '../types';
+export declare const clearVideoElement: (video: HTMLVideoElement | null) => void;
+export declare const clearImageElement: (image: HTMLImageElement | null) => void;
+export declare const useViewportMediaSource: ({ enabled, imageAsset, selectedSource, videoAsset, }: {
+    enabled: boolean;
+    imageAsset?: XRViewportMediaAssetOption;
+    selectedSource: XRViewportSourceKind;
+    videoAsset?: XRViewportMediaAssetOption;
+}) => {
+    videoRef: import('react').RefObject<HTMLVideoElement>;
+    imageRef: import('react').RefObject<HTMLImageElement>;
+    stream: MediaStream | null;
+    mediaSize: XRViewportSize;
+    status: "ready" | "error" | "requesting" | "idle";
+    error: string | null;
+};

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

@@ -0,0 +1,10 @@
+import { RefObject } from 'react';
+import { XRViewportSourceKind } from '../types';
+import * as THREE from "three";
+export declare const useViewportMediaTexture: ({ enabled, imageRef, selectedSource, status, videoRef, }: {
+    enabled: boolean;
+    imageRef: RefObject<HTMLImageElement>;
+    selectedSource: XRViewportSourceKind;
+    status: "idle" | "requesting" | "ready" | "error";
+    videoRef: RefObject<HTMLVideoElement>;
+}) => THREE.Texture | null;

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

@@ -0,0 +1,41 @@
+import { XRSceneRenderOutputs } from '../../XRScene';
+import { XRViewportFitMode, XRViewportMediaAssetOption, XRViewportMediaStrategy, XRViewportPreviewMode, XRViewportRenderOutputRequest, XRViewportSourceConfig, XRViewportSourceKind } from '../types';
+export declare const useViewportPipeline: ({ fitMode, imageOptions, initialImageId, initialMirrored, initialSource, initialVideoId, mediaStrategy, previewMode, renderOutputs, showMediaControlsByDefault, source, videoOptions, }: {
+    fitMode: XRViewportFitMode;
+    imageOptions: XRViewportMediaAssetOption[];
+    initialImageId?: string;
+    initialMirrored: boolean;
+    initialSource: XRViewportSourceKind;
+    initialVideoId?: string;
+    mediaStrategy: XRViewportMediaStrategy;
+    previewMode: XRViewportPreviewMode;
+    renderOutputs: XRViewportRenderOutputRequest;
+    showMediaControlsByDefault: boolean;
+    source?: XRViewportSourceConfig;
+    videoOptions: XRViewportMediaAssetOption[];
+}) => {
+    containerRef: import('react').RefObject<HTMLDivElement>;
+    displayCanvasRef: import('react').RefObject<HTMLCanvasElement>;
+    displayMirrored: boolean;
+    layout: import('../../../types').XRMediaLayout | null;
+    managesOwnMedia: boolean;
+    media: {
+        videoRef: import('react').RefObject<HTMLVideoElement>;
+        imageRef: import('react').RefObject<HTMLImageElement>;
+        stream: MediaStream | null;
+        mediaSize: import('..').XRViewportSize;
+        status: "ready" | "error" | "requesting" | "idle";
+        error: string | null;
+    };
+    renderOutputState: import('..').XRViewportRenderOutputs;
+    renderState: import('..').XRViewportRenderState;
+    selectedImageId: string;
+    selectedSource: XRViewportSourceKind;
+    selectedVideoId: string;
+    setSceneRenderOutputs: import('react').Dispatch<import('react').SetStateAction<XRSceneRenderOutputs>>;
+    setSelectedImageId: import('react').Dispatch<import('react').SetStateAction<string>>;
+    setSelectedSource: import('react').Dispatch<import('react').SetStateAction<XRViewportSourceKind>>;
+    setSelectedVideoId: import('react').Dispatch<import('react').SetStateAction<string>>;
+    showMediaControls: boolean;
+    viewportSize: import('..').XRViewportSize;
+};

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

@@ -0,0 +1,47 @@
+import { XRViewportMediaAssetOption, XRViewportPreviewMode, XRViewportRenderOutputRequest, XRViewportRenderOutputs, XRViewportRenderState, XRViewportSize, XRViewportSourceKind } from '../types';
+import { XRMediaLayout } from '../../../types/compositor';
+import { FaceTrackingResult } from '../../../types/face';
+import { XRSceneRenderOutputs } from '../../XRScene';
+import type * as THREE from "three";
+type InternalTrackerState = {
+    activeDelegate: "GPU" | "CPU" | null;
+    error: string | null;
+    faces: FaceTrackingResult[];
+    status: "idle" | "initializing" | "ready" | "error";
+};
+type ExternalTrackerState = {
+    faces: FaceTrackingResult[];
+    trackerStatus: "idle" | "ready";
+};
+export declare const useViewportRenderState: ({ externalTracker, imageOptions, layout, managesOwnMedia, mediaError, mediaFitMode, mediaSize, mediaStatus, mirrored, selectedImage, selectedImageId, selectedSource, selectedVideo, selectedVideoId, setMirrored, setSelectedImageId, setSelectedSource, setSelectedVideoId, setShowMediaControls, showMediaControls, tracker, videoOptions, viewportSize, }: {
+    externalTracker: ExternalTrackerState;
+    imageOptions: XRViewportMediaAssetOption[];
+    layout: XRMediaLayout | null;
+    managesOwnMedia: boolean;
+    mediaError: string | null;
+    mediaFitMode: Exclude<XRViewportRenderState["mediaFitMode"], "auto">;
+    mediaSize: XRViewportSize;
+    mediaStatus: XRViewportRenderState["mediaStatus"];
+    mirrored: boolean;
+    selectedImage?: XRViewportMediaAssetOption;
+    selectedImageId: string;
+    selectedSource: XRViewportSourceKind;
+    selectedVideo?: XRViewportMediaAssetOption;
+    selectedVideoId: string;
+    setMirrored: (value: boolean) => void;
+    setSelectedImageId: (value: string) => void;
+    setSelectedSource: (value: XRViewportSourceKind) => void;
+    setSelectedVideoId: (value: string) => void;
+    setShowMediaControls: (value: boolean) => void;
+    showMediaControls: boolean;
+    tracker: InternalTrackerState;
+    videoOptions: XRViewportMediaAssetOption[];
+    viewportSize: XRViewportSize;
+}) => XRViewportRenderState;
+export declare const useViewportRenderOutputs: ({ mediaTexture, previewMode, renderOutputs, sceneRenderOutputs, }: {
+    mediaTexture: THREE.Texture | null;
+    previewMode: XRViewportPreviewMode;
+    renderOutputs: XRViewportRenderOutputRequest;
+    sceneRenderOutputs: XRSceneRenderOutputs;
+}) => XRViewportRenderOutputs;
+export {};

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,12 +1,19 @@
 export * from './AspectRatioContainer';
+export * from './Axes';
 export * from './BodyTracker';
 export * from './FaceTracker';
 export * from './FaceMesh';
 export * from './FaceRetouch';
 export * from './FaceWarp3D';
+export * from './FaceInset';
+export * from './FaceLiquify';
+export * from './Faceless';
 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';
@@ -14,15 +21,32 @@ export * from './HandJoints2D';
 export * from './HeadBinding';
 export * from './HeadBindingOccluder';
 export * from './HeadOccluder';
+export { HandEffect } from './HandEffect';
+export * from './ShoulderOccluder';
+export * from './SpringSwing';
+export * from './Necklace';
+export * from './HairLock';
+export * from './MeshRenderer';
+export * from './LightObject';
+export * from './LookAt';
 export * from './Panel';
+export * from './PinToMesh';
+export * from './ParticleEmitter';
 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/components/occluder/skinnedOccluder.d.ts

@@ -0,0 +1,39 @@
+import * as THREE from "three";
+/** Drawn before everything in the scene so its depth is in place for what it hides. */
+export declare const SKINNED_OCCLUDER_RENDER_ORDER = -1;
+/**
+ * Pushes every vertex along its (skinned) normal by the `inflate` uniform, in
+ * model units, after skinning — so the posed model grows or shrinks evenly.
+ *
+ * Coupled to three's MeshBasicMaterial vertex shader text (pinned
+ * `three@0.173.0`; the test patches the real shader): it needs the
+ * `void main() {` and `#include <skinning_vertex>` tokens. If either is missing
+ * it returns the shader UNCHANGED (no inflate) rather than half-patched — a
+ * uniform used but never declared would fail to compile and lose the occluder.
+ */
+export declare const patchOccluderInflate: (vertexShader: string) => string;
+/**
+ * A depth-only material for a skinned model (a hand, a body), with an
+ * `inflate` (model units) uniform in `userData.inflate`. With colour writes on
+ * it draws as a translucent grey (the debug view).
+ */
+export declare const createSkinnedOccluderMaterial: () => THREE.MeshBasicMaterial;
+export type SkinnedOccluderOptions = {
+    /** Grow (+) or shrink (−) along the normals, model units. Default `0`. */
+    inflate?: number;
+    /** Draw the occluder (translucent grey) instead of depth only — for calibration. */
+    showDebugMaterial?: boolean;
+    /** Debug material opacity. Default `0.5`. */
+    opacity?: number;
+};
+/**
+ * The occluder material of a rig component (`HandOccluder`, `BodyOccluder`),
+ * kept in step with its options, and an `onModel` that draws the model's own
+ * meshes (marked `userData[modelMeshFlag]`) first — the content riding on its
+ * bones keeps its own order, or it could be drawn before the occluder and
+ * never be hidden.
+ */
+export declare const useSkinnedOccluder: ({ inflate, showDebugMaterial, opacity }: SkinnedOccluderOptions, modelMeshFlag: string, onModel?: (clone: THREE.Object3D) => void) => {
+    material: THREE.MeshBasicMaterial;
+    onModel: (clone: THREE.Object3D) => void;
+};

package/dist/config/index.d.ts

@@ -1,7 +1,7 @@
 export declare const libConfig: {
-    apiBaseUrl: string;
     assetStorageEndpoint: string;
     sdkAssetsBaseUrl: string;
+    debugMediaBaseUrl: string;
     loggerPrefix: string;
     sessionCheckInterval: number;
 };