@react-three/fiber 9.0.0-alpha.2 → 9.0.0-alpha.3

package/dist/declarations/src/core/events.d.ts

@@ -1,69 +1,91 @@
-import * as THREE from 'three';
-import type { UseBoundStore } from 'zustand';
-import type { RootState } from './store';
-export interface Intersection extends THREE.Intersection {
-    eventObject: THREE.Object3D;
-}
-export interface IntersectionEvent<TSourceEvent> extends Intersection {
-    eventObject: THREE.Object3D;
-    intersections: Intersection[];
-    unprojectedPoint: THREE.Vector3;
-    pointer: THREE.Vector2;
-    delta: number;
-    ray: THREE.Ray;
-    camera: Camera;
-    stopPropagation: () => void;
-    nativeEvent: TSourceEvent;
-    stopped: boolean;
-}
-export declare type Camera = THREE.OrthographicCamera | THREE.PerspectiveCamera;
-export declare type ThreeEvent<TEvent> = IntersectionEvent<TEvent>;
-export declare type DomEvent = PointerEvent | MouseEvent | WheelEvent;
-export declare type Events = {
-    onClick: EventListener;
-    onContextMenu: EventListener;
-    onDoubleClick: EventListener;
-    onWheel: EventListener;
-    onPointerDown: EventListener;
-    onPointerUp: EventListener;
-    onPointerLeave: EventListener;
-    onPointerMove: EventListener;
-    onPointerCancel: EventListener;
-    onLostPointerCapture: EventListener;
-};
-export declare type EventHandlers = {
-    onClick?: (event: ThreeEvent<MouseEvent>) => void;
-    onContextMenu?: (event: ThreeEvent<MouseEvent>) => void;
-    onDoubleClick?: (event: ThreeEvent<MouseEvent>) => void;
-    onPointerUp?: (event: ThreeEvent<PointerEvent>) => void;
-    onPointerDown?: (event: ThreeEvent<PointerEvent>) => void;
-    onPointerOver?: (event: ThreeEvent<PointerEvent>) => void;
-    onPointerOut?: (event: ThreeEvent<PointerEvent>) => void;
-    onPointerEnter?: (event: ThreeEvent<PointerEvent>) => void;
-    onPointerLeave?: (event: ThreeEvent<PointerEvent>) => void;
-    onPointerMove?: (event: ThreeEvent<PointerEvent>) => void;
-    onPointerMissed?: (event: MouseEvent) => void;
-    onPointerCancel?: (event: ThreeEvent<PointerEvent>) => void;
-    onWheel?: (event: ThreeEvent<WheelEvent>) => void;
-};
-export declare type FilterFunction = (items: THREE.Intersection[], state: RootState) => THREE.Intersection[];
-export declare type ComputeFunction = (event: DomEvent, root: RootState, previous?: RootState) => void;
-export interface EventManager<TTarget> {
-    enabled: boolean;
-    priority: number;
-    compute?: ComputeFunction;
-    filter?: FilterFunction;
-    connected?: TTarget;
-    handlers?: Events;
-    connect?: (target: TTarget) => void;
-    disconnect?: () => void;
-}
-export interface PointerCaptureTarget {
-    intersection: Intersection;
-    target: Element;
-}
-export declare function getEventPriority(): 1 | 4 | 16;
-export declare function removeInteractivity(store: UseBoundStore<RootState>, object: THREE.Object3D): void;
-export declare function createEvents(store: UseBoundStore<RootState>): {
-    handlePointer: (name: string) => (event: DomEvent) => void;
-};
+import * as THREE from 'three';
+import type { RootState, RootStore } from "./store.js";
+import type { Properties } from "../three-types.js";
+export interface Intersection extends THREE.Intersection {
+    /** The event source (the object which registered the handler) */
+    eventObject: THREE.Object3D;
+}
+export interface IntersectionEvent<TSourceEvent> extends Intersection {
+    /** The event source (the object which registered the handler) */
+    eventObject: THREE.Object3D;
+    /** An array of intersections */
+    intersections: Intersection[];
+    /** vec3.set(pointer.x, pointer.y, 0).unproject(camera) */
+    unprojectedPoint: THREE.Vector3;
+    /** Normalized event coordinates */
+    pointer: THREE.Vector2;
+    /** Delta between first click and this event */
+    delta: number;
+    /** The ray that pierced it */
+    ray: THREE.Ray;
+    /** The camera that was used by the raycaster */
+    camera: Camera;
+    /** stopPropagation will stop underlying handlers from firing */
+    stopPropagation: () => void;
+    /** The original host event */
+    nativeEvent: TSourceEvent;
+    /** If the event was stopped by calling stopPropagation */
+    stopped: boolean;
+}
+export type Camera = THREE.OrthographicCamera | THREE.PerspectiveCamera;
+export type ThreeEvent<TEvent> = IntersectionEvent<TEvent> & Properties<TEvent>;
+export type DomEvent = PointerEvent | MouseEvent | WheelEvent;
+export interface Events {
+    onClick: EventListener;
+    onContextMenu: EventListener;
+    onDoubleClick: EventListener;
+    onWheel: EventListener;
+    onPointerDown: EventListener;
+    onPointerUp: EventListener;
+    onPointerLeave: EventListener;
+    onPointerMove: EventListener;
+    onPointerCancel: EventListener;
+    onLostPointerCapture: EventListener;
+}
+export interface EventHandlers {
+    onClick?: (event: ThreeEvent<MouseEvent>) => void;
+    onContextMenu?: (event: ThreeEvent<MouseEvent>) => void;
+    onDoubleClick?: (event: ThreeEvent<MouseEvent>) => void;
+    onPointerUp?: (event: ThreeEvent<PointerEvent>) => void;
+    onPointerDown?: (event: ThreeEvent<PointerEvent>) => void;
+    onPointerOver?: (event: ThreeEvent<PointerEvent>) => void;
+    onPointerOut?: (event: ThreeEvent<PointerEvent>) => void;
+    onPointerEnter?: (event: ThreeEvent<PointerEvent>) => void;
+    onPointerLeave?: (event: ThreeEvent<PointerEvent>) => void;
+    onPointerMove?: (event: ThreeEvent<PointerEvent>) => void;
+    onPointerMissed?: (event: MouseEvent) => void;
+    onPointerCancel?: (event: ThreeEvent<PointerEvent>) => void;
+    onWheel?: (event: ThreeEvent<WheelEvent>) => void;
+}
+export type FilterFunction = (items: THREE.Intersection[], state: RootState) => THREE.Intersection[];
+export type ComputeFunction = (event: DomEvent, root: RootState, previous?: RootState) => void;
+export interface EventManager<TTarget> {
+    /** Determines if the event layer is active */
+    enabled: boolean;
+    /** Event layer priority, higher prioritized layers come first and may stop(-propagate) lower layer  */
+    priority: number;
+    /** The compute function needs to set up the raycaster and an xy- pointer  */
+    compute?: ComputeFunction;
+    /** The filter can re-order or re-structure the intersections  */
+    filter?: FilterFunction;
+    /** The target node the event layer is tied to */
+    connected?: TTarget;
+    /** All the pointer event handlers through which the host forwards native events */
+    handlers?: Events;
+    /** Allows re-connecting to another target */
+    connect?: (target: TTarget) => void;
+    /** Removes all existing events handlers from the target */
+    disconnect?: () => void;
+    /** Triggers a onPointerMove with the last known event. This can be useful to enable raycasting without
+     *  explicit user interaction, for instance when the camera moves a hoverable object underneath the cursor.
+     */
+    update?: () => void;
+}
+export interface PointerCaptureTarget {
+    intersection: Intersection;
+    target: Element;
+}
+export declare function removeInteractivity(store: RootStore, object: THREE.Object3D): void;
+export declare function createEvents(store: RootStore): {
+    handlePointer: (name: string) => (event: DomEvent) => void;
+};

package/dist/declarations/src/core/hooks.d.ts

@@ -1,27 +1,53 @@
-import * as THREE from 'three';
-import * as React from 'react';
-import { StateSelector, EqualityChecker } from 'zustand';
-import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader';
-import { RootState, RenderCallback, StageTypes } from './store';
-import { ObjectMap } from './utils';
-import { UpdateCallback } from './stages';
-import { LoadingManager } from 'three';
-import { Instance } from './renderer';
-export interface Loader<T> extends THREE.Loader {
-    load(url: string, onLoad?: (result: T) => void, onProgress?: (event: ProgressEvent) => void, onError?: (event: ErrorEvent) => void): unknown;
-}
-export declare type Extensions = (loader: THREE.Loader) => void;
-export declare type LoaderResult<T> = T extends any[] ? Loader<T[number]> : Loader<T>;
-export declare type ConditionalType<Child, Parent, Truthy, Falsy> = Child extends Parent ? Truthy : Falsy;
-export declare type BranchingReturn<T, Parent, Coerced> = ConditionalType<T, Parent, Coerced, T>;
-export declare function useInstanceHandle<O>(ref: React.MutableRefObject<O>): React.MutableRefObject<Instance>;
-export declare function useStore(): import("zustand").UseBoundStore<RootState, import("zustand").StoreApi<RootState>>;
-export declare function useThree<T = RootState>(selector?: StateSelector<RootState, T>, equalityFn?: EqualityChecker<T>): T;
-export declare function useFrame(callback: RenderCallback, renderPriority?: number): null;
-export declare function useUpdate(callback: UpdateCallback, stage?: StageTypes): void;
-export declare function useGraph(object: THREE.Object3D): ObjectMap;
-export declare function useLoader<T, U extends string | string[]>(Proto: new (manager?: LoadingManager) => LoaderResult<T>, input: U, extensions?: Extensions, onProgress?: (event: ProgressEvent<EventTarget>) => void): U extends any[] ? BranchingReturn<T, GLTF, GLTF & ObjectMap>[] : BranchingReturn<T, GLTF, GLTF & ObjectMap>;
-export declare namespace useLoader {
-    var preload: <T, U extends string | string[]>(Proto: new () => LoaderResult<T>, input: U, extensions?: Extensions | undefined) => undefined;
-    var clear: <T, U extends string | string[]>(Proto: new () => LoaderResult<T>, input: U) => void;
-}
+import * as THREE from 'three';
+import * as React from 'react';
+import { RootState, RenderCallback, UpdateCallback, StageTypes, RootStore } from "./store.js";
+import { ObjectMap } from "./utils.js";
+import type { Instance } from "./reconciler.js";
+/**
+ * Exposes an object's {@link Instance}.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useInstanceHandle
+ *
+ * **Note**: this is an escape hatch to react-internal fields. Expect this to change significantly between versions.
+ */
+export declare function useInstanceHandle<O>(ref: React.MutableRefObject<O>): React.MutableRefObject<Instance>;
+export declare function useStore(): RootStore;
+/**
+ * Accesses R3F's internal state, containing renderer, canvas, scene, etc.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree
+ */
+export declare function useThree<T = RootState>(selector?: (state: RootState) => T, equalityFn?: <T>(state: T, newState: T) => boolean): T;
+/**
+ * Executes a callback before render in a shared frame loop.
+ * Can order effects with render priority or manually render with a positive priority.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe
+ */
+export declare function useFrame(callback: RenderCallback, renderPriority?: number): null;
+/**
+ * Executes a callback in a given update stage.
+ * Uses the stage instance to indetify which stage to target in the lifecycle.
+ */
+export declare function useUpdate(callback: UpdateCallback, stage?: StageTypes): void;
+/**
+ * Returns a node graph of an object with named nodes & materials.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usegraph
+ */
+export declare function useGraph(object: THREE.Object3D): ObjectMap;
+export interface Loader<T> extends THREE.Loader {
+    load(url: string | string[] | string[][], onLoad?: (result: T, ...args: any[]) => void, onProgress?: (event: ProgressEvent) => void, onError?: (event: unknown) => void): unknown;
+}
+export type LoaderProto<T> = new (...args: any[]) => Loader<T>;
+export type LoaderResult<T> = T extends {
+    scene: THREE.Object3D;
+} ? T & ObjectMap : T;
+export type Extensions<T> = (loader: Loader<T>) => void;
+/**
+ * Synchronously loads and caches assets with a three loader.
+ *
+ * Note: this hook's caller must be wrapped with `React.Suspense`
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useloader
+ */
+export declare function useLoader<T, U extends string | string[] | string[][]>(loader: Loader<T> | LoaderProto<T>, input: U, extensions?: Extensions<T>, onProgress?: (event: ProgressEvent) => void): U extends any[] ? LoaderResult<T>[] : LoaderResult<T>;
+export declare namespace useLoader {
+    var preload: <T, U extends string | string[] | string[][]>(loader: Loader<T> | LoaderProto<T>, input: U, extensions?: Extensions<T> | undefined) => void;
+    var clear: <T, U extends string | string[] | string[][]>(loader: Loader<T> | LoaderProto<T>, input: U) => void;
+}

package/dist/declarations/src/core/index.d.ts

@@ -1,60 +1,15 @@
-/// <reference types="webxr" />
-import * as THREE from 'three';
-import * as React from 'react';
-import { UseBoundStore } from 'zustand';
-import { ThreeElement } from '../three-types';
-import { Renderer, context, RootState, Size, Dpr, Performance, PrivateKeys, Frameloop } from './store';
-import { reconciler, extend, Root } from './renderer';
-import { addEffect, addAfterEffect, addTail } from './loop';
-import { EventManager, ComputeFunction } from './events';
-import { dispose, getRootState, Camera, applyProps } from './utils';
-import { Stage } from './stages';
-declare const roots: Map<Element, Root>;
-declare const invalidate: (state?: RootState | undefined, frames?: number) => void, advance: (timestamp: number, runGlobalEffects?: boolean, state?: RootState | undefined, frame?: XRFrame | undefined) => void;
-declare type Properties<T> = Pick<T, {
-    [K in keyof T]: T[K] extends (_: any) => any ? never : K;
-}[keyof T]>;
-declare type GLProps = Renderer | ((canvas: HTMLCanvasElement) => Renderer) | Partial<Properties<THREE.WebGLRenderer> | THREE.WebGLRendererParameters> | undefined;
-export declare type RenderProps<TCanvas extends Element> = {
-    gl?: GLProps;
-    size?: Size;
-    shadows?: boolean | Partial<THREE.WebGLShadowMap>;
-    legacy?: boolean;
-    linear?: boolean;
-    flat?: boolean;
-    orthographic?: boolean;
-    frameloop?: Frameloop;
-    performance?: Partial<Omit<Performance, 'regress'>>;
-    dpr?: Dpr;
-    raycaster?: Partial<THREE.Raycaster>;
-    camera?: (Camera | Partial<ThreeElement<typeof THREE.Camera> & ThreeElement<typeof THREE.PerspectiveCamera> & ThreeElement<typeof THREE.OrthographicCamera>>) & {
-        manual?: boolean;
-    };
-    events?: (store: UseBoundStore<RootState>) => EventManager<HTMLElement>;
-    onCreated?: (state: RootState) => void;
-    onPointerMissed?: (event: MouseEvent) => void;
-    stages?: Stage[];
-    render?: 'auto' | 'manual';
-};
-export declare type ReconcilerRoot<TCanvas extends Element> = {
-    configure: (config?: RenderProps<TCanvas>) => ReconcilerRoot<TCanvas>;
-    render: (element: React.ReactNode) => UseBoundStore<RootState>;
-    unmount: () => void;
-};
-declare function createRoot<TCanvas extends Element>(canvas: TCanvas): ReconcilerRoot<TCanvas>;
-declare function render<TCanvas extends Element>(children: React.ReactNode, canvas: TCanvas, config: RenderProps<TCanvas>): UseBoundStore<RootState>;
-declare function unmountComponentAtNode<TElement extends Element>(canvas: TElement, callback?: (canvas: TElement) => void): void;
-export declare type InjectState = Partial<Omit<RootState, PrivateKeys> & {
-    events?: {
-        enabled?: boolean;
-        priority?: number;
-        compute?: ComputeFunction;
-        connected?: any;
-    };
-    size?: Size;
-}>;
-declare function createPortal(children: React.ReactNode, container: THREE.Object3D, state?: InjectState): React.ReactNode;
-declare type Act = <T = any>(cb: () => Promise<T>) => Promise<T>;
-declare const act: Act;
-export * from './hooks';
-export { context, render, createRoot, unmountComponentAtNode, createPortal, reconciler, applyProps, dispose, invalidate, advance, extend, addEffect, addAfterEffect, addTail, getRootState, Act, act, roots as _roots, };
+export type { Intersection, ThreeEvent, DomEvent, Events, EventHandlers, FilterFunction, ComputeFunction, EventManager, } from "./events.js";
+export { createEvents } from "./events.js";
+export * from "./hooks.js";
+export type { GlobalRenderCallback, GlobalEffectType } from "./loop.js";
+export { flushGlobalEffects, addEffect, addAfterEffect, addTail, invalidate, advance } from "./loop.js";
+export type { AttachFnType, AttachType, ConstructorRepresentation, Catalogue, Args, InstanceProps, Instance, } from "./reconciler.js";
+export { extend, reconciler } from "./reconciler.js";
+export type { ReconcilerRoot, GLProps, CameraProps, RenderProps, InjectState } from "./renderer.js";
+export { _roots, render, createRoot, unmountComponentAtNode, createPortal } from "./renderer.js";
+export type { UpdateSubscription } from "./stages.js";
+export { Stage, FixedStage, Stages } from "./stages.js";
+export type { Subscription, Dpr, Size, Viewport, RenderCallback, UpdateCallback, LegacyAlways, FrameloopMode, FrameloopRender, FrameloopLegacy, Frameloop, Performance, Renderer, StageTypes, XRManager, RootState, RootStore, } from "./store.js";
+export { context } from "./store.js";
+export type { ObjectMap, Camera, Disposable, Act } from "./utils.js";
+export { applyProps, getRootState, dispose, act, buildGraph } from "./utils.js";

package/dist/declarations/src/core/loop.d.ts

@@ -1,15 +1,31 @@
-/// <reference types="webxr" />
-import { Root } from './renderer';
-import { RootState } from './store';
-declare type GlobalRenderCallback = (timeStamp: number) => void;
-export declare const addEffect: (callback: GlobalRenderCallback) => () => void;
-export declare const addAfterEffect: (callback: GlobalRenderCallback) => () => void;
-export declare const addTail: (callback: GlobalRenderCallback) => () => void;
-export declare type GlobalEffectType = 'before' | 'after' | 'tail';
-export declare function flushGlobalEffects(type: GlobalEffectType, timestamp: number): void;
-export declare function createLoop<TCanvas>(roots: Map<TCanvas, Root>): {
-    loop: (timestamp: number) => void;
-    invalidate: (state?: RootState | undefined, frames?: number) => void;
-    advance: (timestamp: number, runGlobalEffects?: boolean, state?: RootState | undefined, frame?: XRFrame | undefined) => void;
-};
-export {};
+/// <reference types="webxr" />
+import type { RootState } from "./store.js";
+export type GlobalRenderCallback = (timestamp: number) => void;
+/**
+ * Adds a global render callback which is called each frame.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
+ */
+export declare const addEffect: (callback: GlobalRenderCallback) => () => void;
+/**
+ * Adds a global after-render callback which is called each frame.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addAfterEffect
+ */
+export declare const addAfterEffect: (callback: GlobalRenderCallback) => () => void;
+/**
+ * Adds a global callback which is called when rendering stops.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addTail
+ */
+export declare const addTail: (callback: GlobalRenderCallback) => () => void;
+export type GlobalEffectType = 'before' | 'after' | 'tail';
+export declare function flushGlobalEffects(type: GlobalEffectType, timestamp: number): void;
+export declare function loop(timestamp: number): void;
+/**
+ * Invalidates the view, requesting a frame to be rendered. Will globally invalidate unless passed a root's state.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#invalidate
+ */
+export declare function invalidate(state?: RootState, frames?: number): void;
+/**
+ * Advances the frameloop and runs render effects, useful for when manually rendering via `frameloop="never"`.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#advance
+ */
+export declare function advance(timestamp: number, runGlobalEffects?: boolean, state?: RootState, frame?: XRFrame): void;

package/dist/declarations/src/core/reconciler.d.ts

@@ -0,0 +1,43 @@
+import * as THREE from 'three';
+import * as React from 'react';
+import Reconciler from 'react-reconciler';
+import type { RootStore } from "./store.js";
+import { type EventHandlers } from "./events.js";
+import type { ThreeElement } from "../three-types.js";
+export interface Root {
+    fiber: Reconciler.FiberRoot;
+    store: RootStore;
+}
+export type AttachFnType<O = any> = (parent: any, self: O) => () => void;
+export type AttachType<O = any> = string | AttachFnType<O>;
+export type ConstructorRepresentation<T = any> = new (...args: any[]) => T;
+export interface Catalogue {
+    [name: string]: ConstructorRepresentation;
+}
+export type Args<T> = T extends ConstructorRepresentation ? T extends typeof THREE.Color ? [r: number, g: number, b: number] | [color: THREE.ColorRepresentation] : ConstructorParameters<T> : any[];
+export interface InstanceProps<T = any, P = any> {
+    args?: Args<P>;
+    object?: T;
+    visible?: boolean;
+    dispose?: null;
+    attach?: AttachType<T>;
+}
+export interface Instance<O = any> {
+    root: RootStore;
+    type: string;
+    parent: Instance | null;
+    children: Instance[];
+    props: InstanceProps<O> & Record<string, unknown>;
+    object: O & {
+        __r3f?: Instance<O>;
+    };
+    eventCount: number;
+    handlers: Partial<EventHandlers>;
+    attach?: AttachType<O>;
+    previousAttach?: any;
+    isHidden: boolean;
+    autoRemovedBeforeAppend?: boolean;
+}
+export declare const catalogue: Catalogue;
+export declare const extend: <T extends Catalogue | ConstructorRepresentation<any>>(objects: T) => T extends ConstructorRepresentation<any> ? React.ExoticComponent<import("../three-types.js").Mutable<import("../three-types.js").Overwrite<Partial<import("../three-types.js").Overwrite<import("../three-types.js").WithMathProps<InstanceType<T>>, import("../three-types.js").ReactProps<InstanceType<T>> & import("../three-types.js").EventProps<InstanceType<T>>>>, Omit<InstanceProps<InstanceType<T>, T>, "object">>>> : void;
+export declare const reconciler: Reconciler.Reconciler<RootStore, Instance<any>, void, Instance<any>, any>;

package/dist/declarations/src/core/renderer.d.ts

@@ -1,40 +1,85 @@
-import { UseBoundStore } from 'zustand';
-import Reconciler from 'react-reconciler';
-import { RootState } from './store';
-import { EventHandlers } from './events';
-export interface Root {
-    fiber: Reconciler.FiberRoot;
-    store: UseBoundStore<RootState>;
-}
-export declare type AttachFnType<O = any> = (parent: any, self: O) => () => void;
-export declare type AttachType<O = any> = string | AttachFnType<O>;
-export declare type ConstructorRepresentation = new (...args: any[]) => any;
-export interface Catalogue {
-    [name: string]: ConstructorRepresentation;
-}
-export declare type Args<T> = T extends ConstructorRepresentation ? ConstructorParameters<T> : any[];
-export interface InstanceProps<T = any> {
-    args?: Args<T>;
-    object?: T;
-    visible?: boolean;
-    dispose?: null;
-    attach?: AttachType<T>;
-}
-export interface Instance<O = any> {
-    root: UseBoundStore<RootState>;
-    type: string;
-    parent: Instance | null;
-    children: Instance[];
-    props: InstanceProps<O> & Record<string, unknown>;
-    object: O & {
-        __r3f?: Instance<O>;
-    };
-    eventCount: number;
-    handlers: Partial<EventHandlers>;
-    attach?: AttachType<O>;
-    previousAttach?: any;
-    isHidden: boolean;
-}
-declare const extend: (objects: Partial<Catalogue>) => void;
-declare const reconciler: Reconciler.Reconciler<UseBoundStore<RootState, import("zustand").StoreApi<RootState>>, Instance<any>, void, Instance<any>, any>;
-export { extend, reconciler };
+import * as THREE from 'three';
+import * as React from 'react';
+import type { Properties, ThreeElement } from "../three-types.js";
+import { Renderer, RootState, Size, Dpr, Performance, Frameloop, RootStore } from "./store.js";
+import { Root } from "./reconciler.js";
+import { EventManager, ComputeFunction } from "./events.js";
+import { Camera } from "./utils.js";
+import { Stage } from "./stages.js";
+declare var OffscreenCanvas: any;
+type OffscreenCanvas = any;
+type Canvas = HTMLCanvasElement | OffscreenCanvas;
+export declare const _roots: Map<any, Root>;
+export type GLProps = Renderer | ((canvas: Canvas) => Renderer) | Partial<Properties<THREE.WebGLRenderer> | THREE.WebGLRendererParameters>;
+export type CameraProps = (Camera | Partial<ThreeElement<typeof THREE.Camera> & ThreeElement<typeof THREE.PerspectiveCamera> & ThreeElement<typeof THREE.OrthographicCamera>>) & {
+    /** Flags the camera as manual, putting projection into your own hands */
+    manual?: boolean;
+};
+export interface RenderProps<TCanvas extends Canvas> {
+    /** A threejs renderer instance or props that go into the default renderer */
+    gl?: GLProps;
+    /** Dimensions to fit the renderer to. Will measure canvas dimensions if omitted */
+    size?: Size;
+    /**
+     * Enables shadows (by default PCFsoft). Can accept `gl.shadowMap` options for fine-tuning,
+     * but also strings: 'basic' | 'percentage' | 'soft' | 'variance'.
+     * @see https://threejs.org/docs/#api/en/renderers/WebGLRenderer.shadowMap
+     */
+    shadows?: boolean | 'basic' | 'percentage' | 'soft' | 'variance' | Partial<THREE.WebGLShadowMap>;
+    /**
+     * Disables three r139 color management.
+     * @see https://threejs.org/docs/#manual/en/introduction/Color-management
+     */
+    legacy?: boolean;
+    /** Switch off automatic sRGB encoding and gamma correction */
+    linear?: boolean;
+    /** Use `THREE.NoToneMapping` instead of `THREE.ACESFilmicToneMapping` */
+    flat?: boolean;
+    /** Creates an orthographic camera */
+    orthographic?: boolean;
+    /**
+     * R3F's render mode. Set to `demand` to only render on state change or `never` to take control.
+     * @see https://docs.pmnd.rs/react-three-fiber/advanced/scaling-performance#on-demand-rendering
+     */
+    frameloop?: Frameloop;
+    /**
+     * R3F performance options for adaptive performance.
+     * @see https://docs.pmnd.rs/react-three-fiber/advanced/scaling-performance#movement-regression
+     */
+    performance?: Partial<Omit<Performance, 'regress'>>;
+    /** Target pixel ratio. Can clamp between a range: `[min, max]` */
+    dpr?: Dpr;
+    /** Props that go into the default raycaster */
+    raycaster?: Partial<THREE.Raycaster>;
+    /** A `THREE.Scene` instance or props that go into the default scene */
+    scene?: THREE.Scene | Partial<THREE.Scene>;
+    /** A `THREE.Camera` instance or props that go into the default camera */
+    camera?: CameraProps;
+    /** An R3F event manager to manage elements' pointer events */
+    events?: (store: RootStore) => EventManager<HTMLElement>;
+    /** Callback after the canvas has rendered (but not yet committed) */
+    onCreated?: (state: RootState) => void;
+    /** Response for pointer clicks that have missed any target */
+    onPointerMissed?: (event: MouseEvent) => void;
+    /** Create a custom lifecycle of stages */
+    stages?: Stage[];
+    render?: 'auto' | 'manual';
+}
+export interface ReconcilerRoot<TCanvas extends Canvas> {
+    configure: (config?: RenderProps<TCanvas>) => ReconcilerRoot<TCanvas>;
+    render: (element: React.ReactNode) => RootStore;
+    unmount: () => void;
+}
+export declare function createRoot<TCanvas extends Canvas>(canvas: TCanvas): ReconcilerRoot<TCanvas>;
+export declare function render<TCanvas extends Canvas>(children: React.ReactNode, canvas: TCanvas, config: RenderProps<TCanvas>): RootStore;
+export declare function unmountComponentAtNode<TCanvas extends Canvas>(canvas: TCanvas, callback?: (canvas: TCanvas) => void): void;
+export type InjectState = Partial<Omit<RootState, 'events'> & {
+    events?: {
+        enabled?: boolean;
+        priority?: number;
+        compute?: ComputeFunction;
+        connected?: any;
+    };
+}>;
+export declare function createPortal(children: React.ReactNode, container: THREE.Object3D, state?: InjectState): JSX.Element;
+export {};