@react-three/fiber 8.0.9 → 8.0.12

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @react-three/fiber
 
+## 8.0.12
+
+### Patch Changes
+
+- 3d10413f: fix portal layers
+
+## 8.0.11
+
+### Patch Changes
+
+- 5167b1e4: memoized.args can be undefined
+
+## 8.0.10
+
+### Patch Changes
+
+- eb321afd: fix: remount bug, allow portals to inject custom size
+
 ## 8.0.9
 
 ### Patch Changes

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

@@ -62,7 +62,7 @@ export interface PointerCaptureTarget {
     intersection: Intersection;
     target: Element;
 }
-export declare function getEventPriority(): any;
+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;

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

@@ -3,11 +3,11 @@ import * as THREE from 'three';
 import * as React from 'react';
 import { UseBoundStore } from 'zustand';
 import * as ReactThreeFiber from '../three-types';
-import { Renderer, context, RootState, Size, Camera, Dpr, Performance } from './store';
+import { Renderer, context, RootState, Size, Dpr, Performance, PrivateKeys } from './store';
 import { extend, Root } from './renderer';
 import { addEffect, addAfterEffect, addTail } from './loop';
 import { EventManager, ComputeFunction } from './events';
-import { dispose, getRootState } from './utils';
+import { dispose, getRootState, Camera } from './utils';
 declare const roots: Map<Element, Root>;
 declare const invalidate: (state?: RootState | undefined) => void, advance: (timestamp: number, runGlobalEffects?: boolean, state?: RootState | undefined, frame?: THREE.XRFrame | undefined) => void;
 declare const reconciler: import("react-reconciler").Reconciler<unknown, unknown, unknown, unknown, unknown>, applyProps: typeof import("./utils").applyProps;
@@ -42,13 +42,17 @@ export declare type ReconcilerRoot<TCanvas extends Element> = {
 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, 'set' | 'get' | 'setSize' | 'setFrameloop' | 'setDpr' | 'events' | 'invalidate' | 'advance' | 'performance' | 'internal'> & {
-    events: {
+export declare type InjectState = Partial<Omit<RootState, PrivateKeys> & {
+    events?: {
         enabled?: boolean;
         priority?: number;
         compute?: ComputeFunction;
         connected?: any;
     };
+    size?: {
+        width: number;
+        height: number;
+    };
 }>;
 declare function createPortal(children: React.ReactNode, container: THREE.Object3D, state?: InjectState): React.ReactNode;
 declare const act: any;

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

@@ -2,6 +2,9 @@ import * as THREE from 'three';
 import * as React from 'react';
 import { GetState, SetState, StoreApi, UseBoundStore } from 'zustand';
 import { DomEvent, EventManager, PointerCaptureTarget, ThreeEvent } from './events';
+import { Camera } from './utils';
+export declare const privateKeys: readonly ["set", "get", "setSize", "setFrameloop", "setDpr", "events", "invalidate", "advance", "size", "viewport"];
+export declare type PrivateKeys = typeof privateKeys[number];
 export interface Intersection extends THREE.Intersection {
     eventObject: THREE.Object3D;
 }
@@ -22,7 +25,6 @@ export declare type Viewport = Size & {
     distance: number;
     aspect: number;
 };
-export declare type Camera = THREE.OrthographicCamera | THREE.PerspectiveCamera;
 export declare type RenderCallback = (state: RootState, delta: number, frame?: THREE.XRFrame) => void;
 export declare type Performance = {
     current: number;
@@ -35,7 +37,6 @@ export declare type Renderer = {
     render: (scene: THREE.Scene, camera: THREE.Camera) => any;
 };
 export declare const isRenderer: (def: any) => boolean;
-export declare const isOrthographicCamera: (def: any) => def is THREE.OrthographicCamera;
 export declare type InternalState = {
     active: boolean;
     priority: number;

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

@@ -1,7 +1,9 @@
 import * as THREE from 'three';
 import * as React from 'react';
 import { AttachType, Instance, InstanceProps, LocalState } from './renderer';
-import { Dpr, RootState } from './store';
+import { Dpr, RootState, Size } from './store';
+export declare type Camera = THREE.OrthographicCamera | THREE.PerspectiveCamera;
+export declare const isOrthographicCamera: (def: Camera) => def is THREE.OrthographicCamera;
 export declare const useIsomorphicLayoutEffect: typeof React.useEffect;
 export declare function useMutableCallback<T>(fn: T): React.MutableRefObject<T>;
 export declare type SetBlock = false | Promise<null> | null;
@@ -12,6 +14,7 @@ export declare type UnblockProps = {
 export declare function Block({ set }: Omit<UnblockProps, 'children'>): null;
 export declare class ErrorBoundary extends React.Component<{
     set: React.Dispatch<any>;
+    children: React.ReactNode;
 }, {
     error: boolean;
 }> {
@@ -45,11 +48,6 @@ export declare type ObjectMap = {
 };
 export declare function calculateDpr(dpr: Dpr): number;
 export declare const getRootState: (obj: THREE.Object3D) => RootState | undefined;
-export declare function filterKeys<TObj extends {
-    [key: string]: any;
-}, TOmit extends boolean, TKey extends keyof TObj>(obj: TObj, omit: TOmit, ...keys: TKey[]): TOmit extends true ? Omit<TObj, TKey> : Pick<TObj, TKey>;
-export declare const pick: <TObj>(obj: Partial<TObj>, keys: (keyof TObj)[]) => Pick<Partial<TObj>, keyof TObj>;
-export declare const omit: <TObj>(obj: Partial<TObj>, keys: (keyof TObj)[]) => Omit<Partial<TObj>, keyof TObj>;
 export declare type EquConfig = {
     arrays?: 'reference' | 'shallow';
     objects?: 'reference' | 'shallow';
@@ -78,3 +76,6 @@ export declare function diffProps(instance: Instance, { children: cN, key: kN, r
 export declare function applyProps(instance: Instance, data: InstanceProps | DiffSet): Instance;
 export declare function invalidateInstance(instance: Instance): void;
 export declare function updateInstance(instance: Instance): void;
+export declare function updateCamera(camera: Camera & {
+    manual?: boolean;
+}, size: Size): void;

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

@@ -2,9 +2,9 @@ export * from './three-types';
 import * as ReactThreeFiber from './three-types';
 export { ReactThreeFiber };
 export type { BaseInstance, LocalState } from './core/renderer';
-export type { Intersection, Subscription, Dpr, Size, Viewport, Camera, RenderCallback, Performance, RootState, } from './core/store';
-export type { ThreeEvent, Events, EventManager } from './core/events';
-export type { ObjectMap } from './core/utils';
+export type { Intersection, Subscription, Dpr, Size, Viewport, RenderCallback, Performance, RootState, } from './core/store';
+export type { ThreeEvent, Events, EventManager, ComputeFunction } from './core/events';
+export type { ObjectMap, Camera } from './core/utils';
 export * from './web/Canvas';
 export { createPointerEvents as events } from './web/events';
 export * from './core';

package/dist/declarations/src/native/Canvas.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { View, ViewProps, ViewStyle } from 'react-native';
 import { RenderProps } from '../core';
-export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size'>, ViewProps {
+export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size' | 'dpr'>, ViewProps {
     children: React.ReactNode;
     style?: ViewStyle;
 }

package/dist/declarations/src/native.d.ts

@@ -2,9 +2,9 @@ export * from './three-types';
 import * as ReactThreeFiber from './three-types';
 export { ReactThreeFiber };
 export type { BaseInstance, LocalState } from './core/renderer';
-export type { Intersection, Subscription, Dpr, Size, Viewport, Camera, RenderCallback, Performance, RootState, } from './core/store';
-export type { ThreeEvent, Events, EventManager } from './core/events';
-export type { ObjectMap } from './core/utils';
+export type { Intersection, Subscription, Dpr, Size, Viewport, RenderCallback, Performance, RootState, } from './core/store';
+export type { ThreeEvent, Events, EventManager, ComputeFunction } from './core/events';
+export type { ObjectMap, Camera } from './core/utils';
 export * from './native/Canvas';
 export { createTouchEvents as events } from './native/events';
 export * from './core';

package/dist/declarations/src/three-types.d.ts

@@ -21,7 +21,7 @@ export interface NodeProps<T, P> {
     attach?: AttachType;
     args?: Args<P>;
     children?: React.ReactNode;
-    ref?: React.RefCallback<T> | React.RefObject<React.ReactNode> | null;
+    ref?: React.Ref<T>;
     key?: React.Key;
     onUpdate?: (self: T) => void;
 }
@@ -102,6 +102,7 @@ export declare type ConeGeometryProps = BufferGeometryNode<THREE.ConeGeometry, t
 export declare type CylinderGeometryProps = BufferGeometryNode<THREE.CylinderGeometry, typeof THREE.CylinderGeometry>;
 export declare type CircleGeometryProps = BufferGeometryNode<THREE.CircleGeometry, typeof THREE.CircleGeometry>;
 export declare type BoxGeometryProps = BufferGeometryNode<THREE.BoxGeometry, typeof THREE.BoxGeometry>;
+export declare type CapsuleGeometryProps = BufferGeometryNode<THREE.CapsuleBufferGeometry, typeof THREE.CapsuleBufferGeometry>;
 export declare type MaterialProps = MaterialNode<THREE.Material, [THREE.MaterialParameters]>;
 export declare type ShadowMaterialProps = MaterialNode<THREE.ShadowMaterial, [THREE.ShaderMaterialParameters]>;
 export declare type SpriteMaterialProps = MaterialNode<THREE.SpriteMaterial, [THREE.SpriteMaterialParameters]>;
@@ -245,6 +246,7 @@ declare global {
             cylinderGeometry: CylinderGeometryProps;
             circleGeometry: CircleGeometryProps;
             boxGeometry: BoxGeometryProps;
+            capsuleGeometry: CapsuleGeometryProps;
             material: MaterialProps;
             shadowMaterial: ShadowMaterialProps;
             spriteMaterial: SpriteMaterialProps;

package/dist/{index-4e14a95b.esm.js → index-38c121a8.esm.js}

@@ -10,9 +10,10 @@ var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
-// React currently throws a warning when using useLayoutEffect on the server.
+const isOrthographicCamera = def => def && def.isOrthographicCamera; // React currently throws a warning when using useLayoutEffect on the server.
 // To get around it, we can conditionally useEffect on the server (no-op) and
 // useLayoutEffect on the client.
+
 const isSSR = typeof window === 'undefined' || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent);
 const useIsomorphicLayoutEffect = isSSR ? React.useEffect : React.useLayoutEffect;
 function useMutableCallback(fn) {
@@ -65,29 +66,6 @@ const getRootState = obj => {
 
   return (_r3f = obj.__r3f) == null ? void 0 : _r3f.root.getState();
 };
-/**
- * Picks or omits keys from an object
- * `omit` will filter out keys, and otherwise cherry-pick them.
- */
-
-function filterKeys(obj, omit, ...keys) {
-  const keysToSelect = new Set(keys);
-  return Object.entries(obj).reduce((acc, [key, value]) => {
-    const shouldInclude = !omit;
-    if (keysToSelect.has(key) === shouldInclude) acc[key] = value;
-    return acc;
-  }, {});
-}
-/**
- * Clones an object and cherry-picks keys.
- */
-
-const pick = (obj, keys) => filterKeys(obj, false, ...keys);
-/**
- * Clones an object and prunes or omits keys.
- */
-
-const omit = (obj, keys) => filterKeys(obj, true, ...keys);
 // A collection of compare functions
 const is = {
   obj: a => a === Object(a) && !is.arr(a) && typeof a !== 'function',
@@ -313,12 +291,16 @@ function applyProps$1(instance, data) {
 
     if (value === DEFAULT + 'remove') {
       if (targetProp && targetProp.constructor) {
+        var _memoized$args;
+
         // use the prop constructor to find the default it should be
-        value = new targetProp.constructor(...memoized.args);
+        value = new targetProp.constructor(...((_memoized$args = memoized.args) != null ? _memoized$args : []));
       } else if (currentInstance.constructor) {
+        var _currentInstance$__r;
+
         // create a blank slate of the instance and copy the particular parameter.
         // @ts-ignore
-        const defaultClassCall = new currentInstance.constructor(...currentInstance.__r3f.memoizedProps.args);
+        const defaultClassCall = new currentInstance.constructor(...((_currentInstance$__r = currentInstance.__r3f.memoizedProps.args) != null ? _currentInstance$__r : []));
         value = defaultClassCall[targetProp]; // destory the instance
 
         if (defaultClassCall.dispose) defaultClassCall.dispose(); // instance does not have constructor, just set it to 0
@@ -333,35 +315,35 @@ function applyProps$1(instance, data) {
       localState.eventCount = Object.keys(localState.handlers).length;
     } // Special treatment for objects with support for set/copy, and layers
     else if (targetProp && targetProp.set && (targetProp.copy || targetProp instanceof THREE.Layers)) {
-        // If value is an array
-        if (Array.isArray(value)) {
-          if (targetProp.fromArray) targetProp.fromArray(value);else targetProp.set(...value);
-        } // Test again target.copy(class) next ...
-        else if (targetProp.copy && value && value.constructor && targetProp.constructor.name === value.constructor.name) {
-            targetProp.copy(value);
-          } // If nothing else fits, just set the single value, ignore undefined
-          // https://github.com/pmndrs/react-three-fiber/issues/274
-          else if (value !== undefined) {
-              const isColor = targetProp instanceof THREE.Color; // Allow setting array scalars
-
-              if (!isColor && targetProp.setScalar) targetProp.setScalar(value); // Layers have no copy function, we must therefore copy the mask property
-              else if (targetProp instanceof THREE.Layers && value instanceof THREE.Layers) targetProp.mask = value.mask; // Otherwise just set ...
-                else targetProp.set(value); // For versions of three which don't support THREE.ColorManagement,
-              // Auto-convert sRGB colors
-              // https://github.com/pmndrs/react-three-fiber/issues/344
-
-              const supportsColorManagement = THREE.ColorManagement;
-              if (!supportsColorManagement && !rootState.linear && isColor) targetProp.convertSRGBToLinear();
-            } // Else, just overwrite the value
-
-      } else {
-        currentInstance[key] = value; // Auto-convert sRGB textures, for now ...
+      // If value is an array
+      if (Array.isArray(value)) {
+        if (targetProp.fromArray) targetProp.fromArray(value);else targetProp.set(...value);
+      } // Test again target.copy(class) next ...
+      else if (targetProp.copy && value && value.constructor && targetProp.constructor.name === value.constructor.name) {
+        targetProp.copy(value);
+      } // If nothing else fits, just set the single value, ignore undefined
+      // https://github.com/pmndrs/react-three-fiber/issues/274
+      else if (value !== undefined) {
+        const isColor = targetProp instanceof THREE.Color; // Allow setting array scalars
+
+        if (!isColor && targetProp.setScalar) targetProp.setScalar(value); // Layers have no copy function, we must therefore copy the mask property
+        else if (targetProp instanceof THREE.Layers && value instanceof THREE.Layers) targetProp.mask = value.mask; // Otherwise just set ...
+        else targetProp.set(value); // For versions of three which don't support THREE.ColorManagement,
+        // Auto-convert sRGB colors
         // https://github.com/pmndrs/react-three-fiber/issues/344
 
-        if (!rootState.linear && currentInstance[key] instanceof THREE.Texture) {
-          currentInstance[key].encoding = THREE.sRGBEncoding;
-        }
+        const supportsColorManagement = THREE.ColorManagement;
+        if (!supportsColorManagement && !rootState.linear && isColor) targetProp.convertSRGBToLinear();
+      } // Else, just overwrite the value
+
+    } else {
+      currentInstance[key] = value; // Auto-convert sRGB textures, for now ...
+      // https://github.com/pmndrs/react-three-fiber/issues/344
+
+      if (!rootState.linear && currentInstance[key] instanceof THREE.Texture) {
+        currentInstance[key].encoding = THREE.sRGBEncoding;
       }
+    }
 
     invalidateInstance(instance);
   });
@@ -387,6 +369,25 @@ function invalidateInstance(instance) {
 function updateInstance(instance) {
   instance.onUpdate == null ? void 0 : instance.onUpdate(instance);
 }
+function updateCamera(camera, size) {
+  // https://github.com/pmndrs/react-three-fiber/issues/92
+  // Do not mess with the camera if it belongs to the user
+  if (!camera.manual) {
+    if (isOrthographicCamera(camera)) {
+      camera.left = size.width / -2;
+      camera.right = size.width / 2;
+      camera.top = size.height / 2;
+      camera.bottom = size.height / -2;
+    } else {
+      camera.aspect = size.width / size.height;
+    }
+
+    camera.updateProjectionMatrix(); // https://github.com/pmndrs/react-three-fiber/issues/178
+    // Update matrix world since the renderer is a frame late
+
+    camera.updateMatrixWorld();
+  }
+}
 
 function makeId(event) {
   return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
@@ -1159,8 +1160,8 @@ function createRenderer(roots, getEventPriority) {
   };
 }
 
+const privateKeys = ['set', 'get', 'setSize', 'setFrameloop', 'setDpr', 'events', 'invalidate', 'advance', 'size', 'viewport'];
 const isRenderer = def => !!(def != null && def.render);
-const isOrthographicCamera = def => def && def.isOrthographicCamera;
 const context = /*#__PURE__*/React.createContext(null);
 
 const createStore = (invalidate, advance) => {
@@ -1367,24 +1368,7 @@ const createStore = (invalidate, advance) => {
     } = rootState.getState();
 
     if (size !== oldSize || viewport.dpr !== oldDpr) {
-      // https://github.com/pmndrs/react-three-fiber/issues/92
-      // Do not mess with the camera if it belongs to the user
-      if (!camera.manual) {
-        if (isOrthographicCamera(camera)) {
-          camera.left = size.width / -2;
-          camera.right = size.width / 2;
-          camera.top = size.height / 2;
-          camera.bottom = size.height / -2;
-        } else {
-          camera.aspect = size.width / size.height;
-        }
-
-        camera.updateProjectionMatrix(); // https://github.com/pmndrs/react-three-fiber/issues/178
-        // Update matrix world since the renderer is a frame late
-
-        camera.updateMatrixWorld();
-      } // Update renderer
-
+      updateCamera(camera, size); // Update renderer
 
       gl.setPixelRatio(viewport.dpr);
       gl.setSize(size.width, size.height);
@@ -1923,56 +1907,101 @@ function Portal({
    *    {createPortal(...)} */
   const {
     events,
+    size,
     ...rest
   } = state;
   const previousRoot = useStore();
   const [raycaster] = React.useState(() => new THREE.Raycaster());
   const [pointer] = React.useState(() => new THREE.Vector2());
-  const inject = React.useCallback((state, injectState) => {
-    const intersect = { ...state
-    };
+  const inject = React.useCallback((rootState, injectState) => {
+    const intersect = { ...rootState
+    }; // all prev state props
+    // Only the fields of "rootState" that do not differ from injectState
+    // Some props should be off-limits
+    // Otherwise filter out the props that are different and let the inject layer take precedence
+
+    Object.keys(rootState).forEach(key => {
+      if ( // Some props should be off-limits
+      privateKeys.includes(key) || // Otherwise filter out the props that are different and let the inject layer take precedence
+      rootState[key] !== injectState[key]) {
+        delete intersect[key];
+      }
+    });
+    let viewport = undefined;
 
-    if (injectState) {
-      // Only the fields of "state" that do not differ from injectState
-      Object.keys(state).forEach(key => {
-        if ( // Some props should be off-limits
-        !['size', 'viewport', 'internal', 'performance'].includes(key) && // Otherwise filter out the props that are different and let the inject layer take precedence
-        state[key] !== injectState[key]) delete intersect[key];
-      });
+    if (injectState && size) {
+      const camera = injectState.camera; // Calculate the override viewport, if present
+
+      viewport = rootState.viewport.getCurrentViewport(camera, new THREE.Vector3(), size); // Update the portal camera, if it differs from the previous layer
+
+      if (camera !== rootState.camera) updateCamera(camera, size);
     }
 
-    return { ...intersect,
+    return { // The intersect consists of the previous root state
+      ...intersect,
+      // Portals have their own scene, which forms the root, a raycaster and a pointer
       scene: container,
-      previousRoot,
       raycaster,
-      events: { ...state.events,
+      pointer,
+      mouse: pointer,
+      // Their previous root is the layer before it
+      previousRoot,
+      // Events, size and viewport can be overridden by the inject layer
+      events: { ...rootState.events,
         ...(injectState == null ? void 0 : injectState.events),
-        pointer,
-        mouse: pointer,
         ...events
       },
+      size: { ...rootState.size,
+        ...size
+      },
+      viewport: { ...rootState.viewport,
+        ...viewport
+      },
       ...rest
     };
   }, [state]);
-  const [useInjectStore] = React.useState(() => {
-    const store = create((set, get) => ({ ...inject(previousRoot.getState()),
+  const [usePortalStore] = React.useState(() => {
+    // Create a mirrored store, based on the previous root with a few overrides ...
+    const previousState = previousRoot.getState();
+    const store = create((set, get) => ({ ...previousState,
+      scene: container,
+      raycaster,
+      pointer,
+      mouse: pointer,
+      previousRoot,
+      events: { ...previousState.events,
+        ...events
+      },
+      size: { ...previousState.size,
+        ...size
+      },
+      ...rest,
+      // Set and get refer to this root-state
       set,
       get,
+      // Layers are allowed to override events
       setEvents: events => set(state => ({ ...state,
         events: { ...state.events,
           ...events
         }
       }))
     }));
-    previousRoot.subscribe(state => useInjectStore.setState(injectState => inject(state, injectState)));
     return store;
   });
   React.useEffect(() => {
-    useInjectStore.setState(injectState => inject(previousRoot.getState(), injectState));
+    // Subscribe to previous root-state and copy changes over to the mirrored portal-state
+    const unsub = previousRoot.subscribe(prev => usePortalStore.setState(state => inject(prev, state)));
+    return () => {
+      unsub();
+      usePortalStore.destroy();
+    };
+  }, []);
+  React.useEffect(() => {
+    usePortalStore.setState(injectState => inject(previousRoot.getState(), injectState));
   }, [inject]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, reconciler.createPortal( /*#__PURE__*/React.createElement(context.Provider, {
-    value: useInjectStore
-  }, children), useInjectStore, null));
+    value: usePortalStore
+  }, children), usePortalStore, null));
 }
 
 reconciler.injectIntoDevTools({
@@ -1982,4 +2011,4 @@ reconciler.injectIntoDevTools({
 });
 const act = React.unstable_act;
 
-export { useGraph as A, Block as B, useLoader as C, ErrorBoundary as E, createRoot as a, useIsomorphicLayoutEffect as b, createEvents as c, unmountComponentAtNode as d, extend as e, context as f, createPortal as g, reconciler as h, applyProps as i, dispose as j, invalidate as k, advance as l, addEffect as m, addAfterEffect as n, omit as o, pick as p, addTail as q, render as r, getRootState as s, threeTypes as t, useMutableCallback as u, act as v, roots as w, useStore as x, useThree as y, useFrame as z };
+export { Block as B, ErrorBoundary as E, createRoot as a, useIsomorphicLayoutEffect as b, createEvents as c, unmountComponentAtNode as d, extend as e, context as f, createPortal as g, reconciler as h, applyProps as i, dispose as j, invalidate as k, advance as l, addEffect as m, addAfterEffect as n, addTail as o, getRootState as p, act as q, render as r, roots as s, threeTypes as t, useMutableCallback as u, useStore as v, useThree as w, useFrame as x, useGraph as y, useLoader as z };