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

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

@@ -1,6 +1,18 @@
 import { PropsWithChildren } from 'react';
-import { TrackingTarget } from '../../types/tracking';
+import { FaceCustomAnchorPoint, FaceTarget, TrackingTarget } from '../../types/tracking';
 import * as THREE from "three";
+export type TrackingAnchorSettings = {
+    target: FaceTarget;
+    customAnchorPoint: FaceCustomAnchorPoint;
+    offset: {
+        x: number;
+        y: number;
+        z: number;
+    };
+    smoothing: number;
+    followFaceRoll: boolean;
+};
+export declare const DEFAULT_TRACKING_ANCHOR: TrackingAnchorSettings;
 /**
  * Frame-rate-independent lerp factor for a given smoothing rate and frame
  * delta: `alpha = 1 - e^(-smoothing*dt)`. Same rate produces the same visual
@@ -45,6 +57,8 @@ export type OneEuroState = {
  * each axis independently. On the first sample it seeds without smoothing.
  */
 export declare const stepOneEuro: (state: OneEuroState, sample: THREE.Vector3, dt: number, minCutoff: number, beta: number, dcutoff: number) => OneEuroState;
+/** Apply the SDK's tuned One Euro parameters for a public smoothing value. */
+export declare const stepTrackingSmoothing: (state: OneEuroState, sample: THREE.Vector3, dt: number, smoothing: number) => OneEuroState;
 type TrackingAnchorProps = PropsWithChildren & {
     /**
      * Landmark/joint to attach to. The namespace prefix (`face.`, `hand.`,
@@ -52,6 +66,8 @@ type TrackingAnchorProps = PropsWithChildren & {
      * mismatched anchors render `null` and emit a console warning.
      */
     target: TrackingTarget;
+    /** Face-local point used only when target is `face.custom`. */
+    customAnchorPoint?: FaceCustomAnchorPoint;
     /** Optional offset applied in the tracker's local frame after resolution. */
     offset?: [number, number, number];
     /**
@@ -70,5 +86,5 @@ type TrackingAnchorProps = PropsWithChildren & {
      */
     smoothing?: number;
 };
-export declare const TrackingAnchor: ({ target, offset, smoothing, children, }: TrackingAnchorProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const TrackingAnchor: ({ target, customAnchorPoint, offset, smoothing, children, }: TrackingAnchorProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { Group } from 'three';
+export type Transform3DVector = {
+    x: number;
+    y: number;
+    z: number;
+};
+export type Transform3DSettings = {
+    enabled: boolean;
+    linked: {
+        position: boolean;
+        rotation: boolean;
+        scale: boolean;
+    };
+    showTransformControls: boolean;
+    transformControlMode: "translate" | "rotate" | "scale";
+    transformControlSpace: "local" | "world";
+    position: Transform3DVector;
+    rotation: Transform3DVector;
+    scale: Transform3DVector;
+    visible: boolean;
+};
+export type Transform3DProps = {
+    children: ReactNode;
+    objectRef?: (object: Group | null) => void;
+    onChange?: (next: Transform3DSettings) => void;
+    value: Transform3DSettings;
+};
+export declare const DEFAULT_TRANSFORM_3D: Transform3DSettings;
+export declare const Transform3D: ({ children, objectRef, onChange, value }: Transform3DProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,25 +1,25 @@
 import { RefObject } from 'react';
 import { XRLayerConfig, XRMediaLayout, XRMediaSourceKind } from '../../types/compositor';
 export declare const XRMediaSurface: ({ canvasRef, imageRef, layer, layout, mirrored, sourceKind, videoRef, }: {
-    canvasRef: RefObject<HTMLCanvasElement>;
-    imageRef: RefObject<HTMLImageElement>;
+    canvasRef: RefObject<HTMLCanvasElement | null>;
+    imageRef: RefObject<HTMLImageElement | null>;
     layer: XRLayerConfig;
     layout: XRMediaLayout | null;
     mirrored: boolean;
     sourceKind: XRMediaSourceKind;
-    videoRef: RefObject<HTMLVideoElement>;
+    videoRef: RefObject<HTMLVideoElement | null>;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const XRTrackingOverlay: ({ canvasRef, controlInsetTop, debugVisible, fps, imageRef, layer, layout, mirrored, sourceKind, videoRef, viewportSize, }: {
-    canvasRef: RefObject<HTMLCanvasElement>;
+    canvasRef: RefObject<HTMLCanvasElement | null>;
     controlInsetTop?: number;
     debugVisible: boolean;
     fps?: number;
-    imageRef: RefObject<HTMLImageElement>;
+    imageRef: RefObject<HTMLImageElement | null>;
     layer: XRLayerConfig;
     layout: XRMediaLayout | null;
     mirrored: boolean;
     sourceKind: XRMediaSourceKind;
-    videoRef: RefObject<HTMLVideoElement>;
+    videoRef: RefObject<HTMLVideoElement | null>;
     viewportSize: {
         width: number;
         height: 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/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: "idle" | "ready";
+};

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: "idle" | "ready" | "error" | "requesting";
+    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: "idle" | "ready" | "error" | "requesting";
+        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,101 +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';
-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 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;
-    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 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;