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

package/dist/{index-47b7622a.esm.js → loop-b2aca207.esm.js}

@@ -1,30 +1,448 @@
 import * as THREE from 'three';
 import * as React from 'react';
-import { DefaultEventPriority, ContinuousEventPriority, DiscreteEventPriority, ConcurrentRoot } from 'react-reconciler/constants';
-import create from 'zustand';
+import { NoEventPriority, DefaultEventPriority, ContinuousEventPriority, DiscreteEventPriority, ConcurrentRoot } from 'react-reconciler/constants';
+import { create } from 'zustand';
+import { useFiber, useContextBridge, traverseFiber } from 'its-fine';
+import _extends from '@babel/runtime/helpers/esm/extends';
 import Reconciler from 'react-reconciler';
 import { unstable_scheduleCallback, unstable_IdlePriority } from 'scheduler';
 import { suspend, preload, clear } from 'suspend-react';
 
+var threeTypes = /*#__PURE__*/Object.freeze({
+  __proto__: null
+});
+
+// TODO: handle constructor overloads
+// https://github.com/pmndrs/react-three-fiber/pull/2931
+// https://github.com/microsoft/TypeScript/issues/37079
+
+const catalogue = {};
+let i = 0;
+const extend = objects => {
+  if (typeof objects === 'function') {
+    const Component = `${i++}`;
+    catalogue[Component] = objects;
+
+    // Returns a component whose name will be inferred in devtools
+    // @ts-ignore
+    return /*#__PURE__*/React.forwardRef({
+      [objects.name]: (props, ref) => /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+        ref: ref
+      }))
+    }[objects.name]);
+  } else {
+    return void Object.assign(catalogue, objects);
+  }
+};
+function createInstance(type, props, root) {
+  // Get target from catalogue
+  const name = `${type[0].toUpperCase()}${type.slice(1)}`;
+  const target = catalogue[name];
+
+  // Validate element target
+  if (type !== 'primitive' && !target) throw new Error(`R3F: ${name} is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively`);
+
+  // Validate primitives
+  if (type === 'primitive' && !props.object) throw new Error(`R3F: Primitives without 'object' are invalid!`);
+
+  // Throw if an object or literal was passed for args
+  if (props.args !== undefined && !Array.isArray(props.args)) throw new Error('R3F: The args prop must be an array!');
+
+  // Create instance
+  const instance = prepare(props.object, root, type, props);
+  return instance;
+}
+
+// https://github.com/facebook/react/issues/20271
+// This will make sure events and attach are only handled once when trees are complete
+function handleContainerEffects(parent, child, beforeChild) {
+  // Bail if tree isn't mounted or parent is not a container.
+  // This ensures that the tree is finalized and React won't discard results to Suspense
+  const state = child.root.getState();
+  if (!parent.parent && parent.object !== state.scene) return;
+
+  // Create & link object on first run
+  if (!child.object) {
+    var _child$props$object, _child$props$args;
+    // Get target from catalogue
+    const name = `${child.type[0].toUpperCase()}${child.type.slice(1)}`;
+    const target = catalogue[name];
+
+    // Create object
+    child.object = (_child$props$object = child.props.object) != null ? _child$props$object : new target(...((_child$props$args = child.props.args) != null ? _child$props$args : []));
+    child.object.__r3f = child;
+
+    // Set initial props
+    applyProps(child.object, child.props);
+  }
+
+  // Append instance
+  if (child.props.attach) {
+    attach(parent, child);
+  } else if (isObject3D(child.object) && isObject3D(parent.object)) {
+    const childIndex = parent.object.children.indexOf(beforeChild == null ? void 0 : beforeChild.object);
+    if (beforeChild && childIndex !== -1) {
+      child.object.parent = parent.object;
+      parent.object.children.splice(childIndex, 0, child.object);
+      child.object.dispatchEvent({
+        type: 'added'
+      });
+      parent.object.dispatchEvent({
+        type: 'childadded',
+        child: child.object
+      });
+    } else {
+      parent.object.add(child.object);
+    }
+  }
+
+  // Link subtree
+  for (const childInstance of child.children) handleContainerEffects(child, childInstance);
+
+  // Tree was updated, request a frame
+  invalidateInstance(child);
+}
+function appendChild(parent, child) {
+  if (!child) return;
+
+  // Link instances
+  child.parent = parent;
+  parent.children.push(child);
+
+  // Attach tree once complete
+  handleContainerEffects(parent, child);
+}
+function insertBefore(parent, child, beforeChild) {
+  if (!child || !beforeChild) return;
+
+  // Link instances
+  child.parent = parent;
+  const childIndex = parent.children.indexOf(beforeChild);
+  if (childIndex !== -1) parent.children.splice(childIndex, 0, child);else parent.children.push(child);
+
+  // Attach tree once complete
+  handleContainerEffects(parent, child, beforeChild);
+}
+function removeChild(parent, child, dispose, recursive) {
+  if (!child) return;
+
+  // Unlink instances
+  child.parent = null;
+  if (recursive === undefined) {
+    const childIndex = parent.children.indexOf(child);
+    if (childIndex !== -1) parent.children.splice(childIndex, 1);
+  }
+
+  // Eagerly tear down tree
+  if (child.props.attach) {
+    detach(parent, child);
+  } else if (isObject3D(child.object) && isObject3D(parent.object)) {
+    parent.object.remove(child.object);
+    removeInteractivity(findInitialRoot(child), child.object);
+  }
+
+  // Allow objects to bail out of unmount disposal with dispose={null}
+  const shouldDispose = child.props.dispose !== null && dispose !== false;
+
+  // Recursively remove instance children
+  if (recursive !== false) {
+    for (const node of child.children) removeChild(child, node, shouldDispose, true);
+    child.children.length = 0;
+  }
+
+  // Unlink instance object
+  delete child.object.__r3f;
+
+  // Dispose object whenever the reconciler feels like it.
+  // Never dispose of primitives because their state may be kept outside of React!
+  // In order for an object to be able to dispose it
+  //   - has a dispose method
+  //   - cannot be a <primitive object={...} />
+  //   - cannot be a THREE.Scene, because three has broken its own API
+  if (shouldDispose && child.type !== 'primitive' && child.object.type !== 'Scene') {
+    if (typeof child.object.dispose === 'function') {
+      const dispose = child.object.dispose.bind(child.object);
+      const handleDispose = () => {
+        try {
+          dispose();
+        } catch (e) {
+          // no-op
+        }
+      };
+
+      // In a testing environment, cleanup immediately
+      if (typeof IS_REACT_ACT_ENVIRONMENT !== 'undefined') handleDispose();
+      // Otherwise, using a real GPU so schedule cleanup to prevent stalls
+      else unstable_scheduleCallback(unstable_IdlePriority, handleDispose);
+    }
+  }
+
+  // Tree was updated, request a frame for top-level instance
+  if (dispose === undefined) invalidateInstance(child);
+}
+function setFiberInstance(fiber, instance) {
+  if (fiber !== null) {
+    fiber.stateNode = instance;
+    if (typeof fiber.ref === 'function') fiber.ref(instance.object);else if (fiber.ref) fiber.ref.current = instance.object;
+  }
+}
+function switchInstance(oldInstance, type, props, fiber) {
+  // Create a new instance
+  const newInstance = createInstance(type, props, oldInstance.root);
+
+  // Move children to new instance
+  for (const child of oldInstance.children) {
+    removeChild(oldInstance, child, false, false);
+    appendChild(newInstance, child);
+  }
+  oldInstance.children.length = 0;
+
+  // Link up new instance
+  const parent = oldInstance.parent;
+  if (parent) {
+    // Manually handle replace https://github.com/pmndrs/react-three-fiber/pull/2680
+
+    newInstance.autoRemovedBeforeAppend = !!newInstance.parent;
+    if (!oldInstance.autoRemovedBeforeAppend) removeChild(parent, oldInstance);
+    appendChild(parent, newInstance);
+
+    // if (!oldInstance.autoRemovedBeforeAppend) {
+    //   insertBefore(parent, newInstance, oldInstance)
+    //   removeChild(parent, oldInstance)
+    // } else {
+    //   appendChild(parent, newInstance)
+    // }
+  }
+
+  // This evil hack switches the react-internal fiber instance
+  // https://github.com/facebook/react/issues/14983
+  // TODO: investigate scheduling key prop change instead of switchInstance entirely
+  // https://github.com/facebook/react/pull/15021#issuecomment-480185369
+  setFiberInstance(fiber, newInstance);
+  setFiberInstance(fiber.alternate, newInstance);
+
+  // Tree was updated, request a frame
+  invalidateInstance(newInstance);
+  return newInstance;
+}
+
+// Don't handle text instances, warn on undefined behavior
+const handleTextInstance = () => console.warn('R3F: Text is not allowed in JSX! This could be stray whitespace or characters.');
+const NO_CONTEXT = {};
+let currentUpdatePriority = NoEventPriority;
+
+// Effectively removed to diff in commit phase
+// https://github.com/facebook/react/pull/27409
+function prepareUpdate(instance, _type, oldProps, newProps) {
+  var _newProps$args, _oldProps$args, _newProps$args2;
+  // Reconstruct primitives if object prop changes
+  if (instance.type === 'primitive' && oldProps.object !== newProps.object) return [true];
+
+  // Throw if an object or literal was passed for args
+  if (newProps.args !== undefined && !Array.isArray(newProps.args)) throw new Error('R3F: The args prop must be an array!');
+
+  // Reconstruct instance if args change
+  if (((_newProps$args = newProps.args) == null ? void 0 : _newProps$args.length) !== ((_oldProps$args = oldProps.args) == null ? void 0 : _oldProps$args.length)) return [true];
+  if ((_newProps$args2 = newProps.args) != null && _newProps$args2.some((value, index) => {
+    var _oldProps$args2;
+    return value !== ((_oldProps$args2 = oldProps.args) == null ? void 0 : _oldProps$args2[index]);
+  })) return [true];
+
+  // Create a diff-set, flag if there are any changes
+  const changedProps = diffProps(instance, newProps, true);
+  if (Object.keys(changedProps).length) return [false, changedProps];
+
+  // Otherwise do not touch the instance
+  return null;
+}
+const reconciler = Reconciler({
+  isPrimaryRenderer: false,
+  warnsIfNotActing: false,
+  supportsMutation: true,
+  supportsPersistence: false,
+  supportsHydration: false,
+  createInstance,
+  removeChild,
+  appendChild,
+  appendInitialChild: appendChild,
+  insertBefore,
+  appendChildToContainer(container, child) {
+    const scene = container.getState().scene.__r3f;
+    if (!child || !scene) return;
+    appendChild(scene, child);
+  },
+  removeChildFromContainer(container, child) {
+    const scene = container.getState().scene.__r3f;
+    if (!child || !scene) return;
+    removeChild(scene, child);
+  },
+  insertInContainerBefore(container, child, beforeChild) {
+    const scene = container.getState().scene.__r3f;
+    if (!child || !beforeChild || !scene) return;
+    insertBefore(scene, child, beforeChild);
+  },
+  getRootHostContext: () => NO_CONTEXT,
+  getChildHostContext: () => NO_CONTEXT,
+  // @ts-ignore prepareUpdate and updatePayload removed with React 19
+  commitUpdate(instance, type, oldProps, newProps, fiber) {
+    const diff = prepareUpdate(instance, type, oldProps, newProps);
+    if (diff === null) return;
+    const [reconstruct, changedProps] = diff;
+
+    // Reconstruct when args or <primitive object={...} have changes
+    if (reconstruct) return switchInstance(instance, type, newProps, fiber);
+
+    // Otherwise just overwrite props
+    Object.assign(instance.props, changedProps);
+    applyProps(instance.object, changedProps);
+  },
+  finalizeInitialChildren: () => false,
+  commitMount() {},
+  getPublicInstance: instance => instance == null ? void 0 : instance.object,
+  prepareForCommit: () => null,
+  preparePortalMount: container => prepare(container.getState().scene, container, '', {}),
+  resetAfterCommit: () => {},
+  shouldSetTextContent: () => false,
+  clearContainer: () => false,
+  hideInstance(instance) {
+    var _instance$parent;
+    if (instance.props.attach && (_instance$parent = instance.parent) != null && _instance$parent.object) {
+      detach(instance.parent, instance);
+    } else if (isObject3D(instance.object)) {
+      instance.object.visible = false;
+    }
+    instance.isHidden = true;
+    invalidateInstance(instance);
+  },
+  unhideInstance(instance) {
+    if (instance.isHidden) {
+      var _instance$parent2;
+      if (instance.props.attach && (_instance$parent2 = instance.parent) != null && _instance$parent2.object) {
+        attach(instance.parent, instance);
+      } else if (isObject3D(instance.object) && instance.props.visible !== false) {
+        instance.object.visible = true;
+      }
+    }
+    instance.isHidden = false;
+    invalidateInstance(instance);
+  },
+  createTextInstance: handleTextInstance,
+  hideTextInstance: handleTextInstance,
+  unhideTextInstance: handleTextInstance,
+  scheduleTimeout: typeof setTimeout === 'function' ? setTimeout : undefined,
+  cancelTimeout: typeof clearTimeout === 'function' ? clearTimeout : undefined,
+  noTimeout: -1,
+  getInstanceFromNode: () => null,
+  beforeActiveInstanceBlur() {},
+  afterActiveInstanceBlur() {},
+  detachDeletedInstance() {},
+  // @ts-ignore untyped react-experimental options inspired by react-art
+  // TODO: add shell types for these and upstream to DefinitelyTyped
+  // https://github.com/facebook/react/blob/main/packages/react-art/src/ReactFiberConfigART.js
+  shouldAttemptEagerTransition() {
+    return false;
+  },
+  requestPostPaintCallback() {},
+  maySuspendCommit() {
+    return false;
+  },
+  preloadInstance() {
+    return true; // true indicates already loaded
+  },
+  startSuspendingCommit() {},
+  suspendInstance() {},
+  waitForCommitToBeReady() {
+    return null;
+  },
+  NotPendingTransition: null,
+  setCurrentUpdatePriority(newPriority) {
+    currentUpdatePriority = newPriority;
+  },
+  getCurrentUpdatePriority() {
+    return currentUpdatePriority;
+  },
+  resolveUpdatePriority() {
+    var _window$event;
+    if (currentUpdatePriority !== NoEventPriority) return currentUpdatePriority;
+    switch (typeof window !== 'undefined' && ((_window$event = window.event) == null ? void 0 : _window$event.type)) {
+      case 'click':
+      case 'contextmenu':
+      case 'dblclick':
+      case 'pointercancel':
+      case 'pointerdown':
+      case 'pointerup':
+        return DiscreteEventPriority;
+      case 'pointermove':
+      case 'pointerout':
+      case 'pointerover':
+      case 'pointerenter':
+      case 'pointerleave':
+      case 'wheel':
+        return ContinuousEventPriority;
+      default:
+        return DefaultEventPriority;
+    }
+  }
+});
+
 var _window$document, _window$navigator;
+/**
+ * Returns the instance's initial (outmost) root.
+ */
+function findInitialRoot(instance) {
+  let root = instance.root;
+  // TODO: this needs testing https://github.com/pmndrs/react-three-fiber/commit/a4a31ed93c48d1e6dac91329bb5f2ca6a25e5f9c
+  // while (root.getState().previousRoot) root = root.getState().previousRoot!
+  return root;
+}
+
+/**
+ * Returns `true` with correct TS type inference if an object has a configurable color space (since r152).
+ */
+const hasColorSpace = object => 'colorSpace' in object || 'outputColorSpace' in object;
+/**
+ * The current THREE.ColorManagement instance, if present.
+ */
+const getColorManagement = () => {
+  var _ColorManagement;
+  return (_ColorManagement = catalogue.ColorManagement) != null ? _ColorManagement : null;
+};
+/**
+ * Safely flush async effects when testing, simulating a legacy root.
+ */
+const act = React.act;
 const isOrthographicCamera = def => def && def.isOrthographicCamera;
 const isRef = obj => obj && obj.hasOwnProperty('current');
-/**
- * An SSR-friendly useLayoutEffect.
- *
- * 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 elsewhere.
- *
- * @see https://github.com/facebook/react/issues/14927
- */
 
+/**
+ * An SSR-friendly useLayoutEffect.
+ *
+ * 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 elsewhere.
+ *
+ * @see https://github.com/facebook/react/issues/14927
+ */
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' && ((_window$document = window.document) != null && _window$document.createElement || ((_window$navigator = window.navigator) == null ? void 0 : _window$navigator.product) === 'ReactNative') ? React.useLayoutEffect : React.useEffect;
 function useMutableCallback(fn) {
   const ref = React.useRef(fn);
   useIsomorphicLayoutEffect(() => void (ref.current = fn), [fn]);
   return ref;
 }
+/**
+ * Bridges renderer Context and StrictMode from a primary renderer.
+ */
+function useBridge() {
+  const fiber = useFiber();
+  const ContextBridge = useContextBridge();
+  return React.useMemo(() => ({
+    children
+  }) => {
+    const strict = !!traverseFiber(fiber, true, node => node.type === React.StrictMode);
+    const Root = strict ? React.StrictMode : React.Fragment;
+    return /*#__PURE__*/React.createElement(Root, null, /*#__PURE__*/React.createElement(ContextBridge, null, children));
+  }, [fiber, ContextBridge]);
+}
 function Block({
   set
 }) {
@@ -41,34 +459,31 @@ class ErrorBoundary extends React.Component {
       error: false
     };
   }
-
   componentDidCatch(err) {
     this.props.set(err);
   }
-
   render() {
     return this.state.error ? null : this.props.children;
   }
-
 }
-
 ErrorBoundary.getDerivedStateFromError = () => ({
   error: true
 });
-
 function calculateDpr(dpr) {
-  const target = typeof window !== 'undefined' ? window.devicePixelRatio : 1;
+  var _window$devicePixelRa;
+  // Err on the side of progress by assuming 2x dpr if we can't detect it
+  // This will happen in workers where window is defined but dpr isn't.
+  const target = typeof window !== 'undefined' ? (_window$devicePixelRa = window.devicePixelRatio) != null ? _window$devicePixelRa : 2 : 1;
   return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], target), dpr[1]) : dpr;
 }
-/**
- * Returns instance root state
- */
 
-const getRootState = obj => {
+/**
+ * Returns instance root state
+ */
+function getRootState(obj) {
   var _r3f;
-
   return (_r3f = obj.__r3f) == null ? void 0 : _r3f.root.getState();
-};
+}
 // A collection of compare functions
 const is = {
   obj: a => a === Object(a) && !is.arr(a) && typeof a !== 'function',
@@ -78,81 +493,86 @@ const is = {
   boo: a => typeof a === 'boolean',
   und: a => a === void 0,
   arr: a => Array.isArray(a),
-
   equ(a, b, {
     arrays = 'shallow',
     objects = 'reference',
     strict = true
   } = {}) {
     // Wrong type or one of the two undefined, doesn't match
-    if (typeof a !== typeof b || !!a !== !!b) return false; // Atomic, just compare a against b
-
+    if (typeof a !== typeof b || !!a !== !!b) return false;
+    // Atomic, just compare a against b
     if (is.str(a) || is.num(a)) return a === b;
     const isObj = is.obj(a);
     if (isObj && objects === 'reference') return a === b;
     const isArr = is.arr(a);
-    if (isArr && arrays === 'reference') return a === b; // Array or Object, shallow compare first to see if it's a match
-
-    if ((isArr || isObj) && a === b) return true; // Last resort, go through keys
-
+    if (isArr && arrays === 'reference') return a === b;
+    // Array or Object, shallow compare first to see if it's a match
+    if ((isArr || isObj) && a === b) return true;
+    // Last resort, go through keys
     let i;
-
+    // Check if a has all the keys of b
     for (i in a) if (!(i in b)) return false;
-
-    for (i in strict ? b : a) if (a[i] !== b[i]) return false;
-
+    // Check if values between keys match
+    if (isObj && arrays === 'shallow' && objects === 'shallow') {
+      for (i in strict ? b : a) if (!is.equ(a[i], b[i], {
+        strict,
+        objects: 'reference'
+      })) return false;
+    } else {
+      for (i in strict ? b : a) if (a[i] !== b[i]) return false;
+    }
+    // If i is undefined
     if (is.und(i)) {
+      // If both arrays are empty we consider them equal
       if (isArr && a.length === 0 && b.length === 0) return true;
+      // If both objects are empty we consider them equal
       if (isObj && Object.keys(a).length === 0 && Object.keys(b).length === 0) return true;
+      // Otherwise match them by value
       if (a !== b) return false;
     }
-
     return true;
   }
+};
 
-}; // Collects nodes and materials from a THREE.Object3D
-
+// Collects nodes and materials from a THREE.Object3D
 function buildGraph(object) {
   const data = {
     nodes: {},
     materials: {}
   };
-
   if (object) {
     object.traverse(obj => {
       if (obj.name) data.nodes[obj.name] = obj;
       if (obj.material && !data.materials[obj.material.name]) data.materials[obj.material.name] = obj.material;
     });
   }
-
   return data;
 }
 // Disposes an object and all its properties
 function dispose(obj) {
   if (obj.type !== 'Scene') obj.dispose == null ? void 0 : obj.dispose();
-
   for (const p in obj) {
     const prop = obj[p];
     if ((prop == null ? void 0 : prop.type) !== 'Scene') prop == null ? void 0 : prop.dispose == null ? void 0 : prop.dispose();
   }
 }
-const REACT_INTERNAL_PROPS = ['children', 'key', 'ref']; // Gets only instance props from reconciler fibers
+const REACT_INTERNAL_PROPS = ['children', 'key', 'ref'];
 
+// Gets only instance props from reconciler fibers
 function getInstanceProps(queue) {
   const props = {};
-
   for (const key in queue) {
     if (!REACT_INTERNAL_PROPS.includes(key)) props[key] = queue[key];
   }
-
   return props;
-} // Each object in the scene carries a small LocalState descriptor
+}
 
+// Each object in the scene carries a small LocalState descriptor
 function prepare(target, root, type, props) {
-  const object = target; // Create instance descriptor
-
-  let instance = object.__r3f;
+  const object = target;
 
+  // Create instance descriptor
+  let instance = object == null ? void 0 : object.__r3f;
   if (!instance) {
     instance = {
       root,
@@ -165,33 +585,37 @@ function prepare(target, root, type, props) {
       handlers: {},
       isHidden: false
     };
-    object.__r3f = instance;
+    if (object) {
+      object.__r3f = instance;
+      if (type) applyProps(object, instance.props);
+    }
   }
-
   return instance;
 }
 function resolve(root, key) {
   var _target;
-
   let target = root[key];
   if (!key.includes('-')) return {
     root,
     key,
     target
-  }; // Resolve pierced target
+  };
 
+  // Resolve pierced target
   const chain = key.split('-');
   target = chain.reduce((acc, key) => acc[key], root);
-  key = chain.pop(); // Switch root if atomic
+  key = chain.pop();
 
+  // Switch root if atomic
   if (!((_target = target) != null && _target.set)) root = chain.reduce((acc, key) => acc[key], root);
   return {
     root,
     key,
     target
   };
-} // Checks if a dash-cased string ends with an integer
+}
 
+// Checks if a dash-cased string ends with an integer
 const INDEX_REGEX = /-\d+$/;
 function attach(parent, child) {
   if (is.str(child.props.attach)) {
@@ -204,7 +628,6 @@ function attach(parent, child) {
       } = resolve(parent.object, index);
       if (!Array.isArray(root[key])) root[key] = [];
     }
-
     const {
       root,
       key
@@ -221,483 +644,237 @@ function detach(parent, child) {
       root,
       key
     } = resolve(parent.object, child.props.attach);
-    const previous = child.previousAttach; // When the previous value was undefined, it means the value was never set to begin with
-
-    if (previous === undefined) delete root[key]; // Otherwise set the previous value
+    const previous = child.previousAttach;
+    // When the previous value was undefined, it means the value was never set to begin with
+    if (previous === undefined) delete root[key];
+    // Otherwise set the previous value
     else root[key] = previous;
   } else {
     child.previousAttach == null ? void 0 : child.previousAttach(parent.object, child.object);
   }
-
   delete child.previousAttach;
 }
-const RESERVED_PROPS = [...REACT_INTERNAL_PROPS, // Instance props
-'args', 'dispose', 'attach', 'object', // Behavior flags
-'dispose']; // This function prepares a set of changes to be applied to the instance
-
+const RESERVED_PROPS = [...REACT_INTERNAL_PROPS,
+// Instance props
+'args', 'dispose', 'attach', 'object',
+// Behavior flags
+'dispose'];
+const MEMOIZED_PROTOTYPES = new Map();
+
+// This function prepares a set of changes to be applied to the instance
 function diffProps(instance, newProps, resetRemoved = false) {
-  const changedProps = {}; // Sort through props
+  const changedProps = {};
 
+  // Sort through props
   for (const prop in newProps) {
     // Skip reserved keys
-    if (RESERVED_PROPS.includes(prop)) continue; // Skip if props match
-
-    if (is.equ(newProps[prop], instance.props[prop])) continue; // Props changed, add them
+    if (RESERVED_PROPS.includes(prop)) continue;
+    // Skip if props match
+    if (is.equ(newProps[prop], instance.props[prop])) continue;
 
+    // Props changed, add them
     changedProps[prop] = newProps[prop];
-  } // Reset removed props for HMR
 
+    // Reset pierced props
+    for (const other in newProps) {
+      if (other.startsWith(`${prop}-`)) changedProps[other] = newProps[other];
+    }
+  }
 
+  // Reset removed props for HMR
   if (resetRemoved) {
     for (const prop in instance.props) {
       if (RESERVED_PROPS.includes(prop) || newProps.hasOwnProperty(prop)) continue;
       const {
         root,
         key
-      } = resolve(instance.object, prop); // https://github.com/mrdoob/three.js/issues/21209
+      } = resolve(instance.object, prop);
+
+      // https://github.com/mrdoob/three.js/issues/21209
       // HMR/fast-refresh relies on the ability to cancel out props, but threejs
       // has no means to do this. Hence we curate a small collection of value-classes
       // with their respective constructor/set arguments
       // For removed props, try to set default values, if possible
-
-      if (root.constructor) {
-        var _root$__r3f$props$arg, _root$__r3f;
-
+      if (root.constructor && root.constructor.length === 0) {
         // create a blank slate of the instance and copy the particular parameter.
-        // @ts-ignore
-        const defaultClassCall = new root.constructor(...((_root$__r3f$props$arg = (_root$__r3f = root.__r3f) == null ? void 0 : _root$__r3f.props.args) != null ? _root$__r3f$props$arg : []));
-        changedProps[key] = defaultClassCall[key]; // destroy the instance
-
-        if (defaultClassCall.dispose) defaultClassCall.dispose();
+        let ctor = MEMOIZED_PROTOTYPES.get(root.constructor);
+        if (!ctor) {
+          ctor = new root.constructor();
+          MEMOIZED_PROTOTYPES.set(root.constructor, ctor);
+        }
+        changedProps[key] = ctor[key];
       } else {
         // instance does not have constructor, just set it to 0
         changedProps[key] = 0;
       }
     }
   }
-
   return changedProps;
-} // This function applies a set of changes to the instance
-
+}
+const __DEV__ = typeof process !== 'undefined' && process.env.NODE_ENV !== 'production';
+
+// const LinearEncoding = 3000
+const sRGBEncoding = 3001;
+const SRGBColorSpace = 'srgb';
+const LinearSRGBColorSpace = 'srgb-linear';
+
+// https://github.com/mrdoob/three.js/pull/27042
+// https://github.com/mrdoob/three.js/pull/22748
+const colorMaps = ['map', 'emissiveMap', 'sheenTintMap',
+// <r134
+'sheenColorMap', 'specularTintMap',
+// <r134
+'specularColorMap', 'envMap'];
+const EVENT_REGEX = /^on(Pointer|Click|DoubleClick|ContextMenu|Wheel)/;
+
+// This function applies a set of changes to the instance
 function applyProps(object, props) {
   const instance = object.__r3f;
-  const rootState = instance == null ? void 0 : instance.root.getState();
+  const rootState = instance && findInitialRoot(instance).getState();
   const prevHandlers = instance == null ? void 0 : instance.eventCount;
-
   for (const prop in props) {
-    let value = props[prop]; // Don't mutate reserved keys
+    let value = props[prop];
 
-    if (RESERVED_PROPS.includes(prop)) continue; // Deal with pointer events ...
+    // Don't mutate reserved keys
+    if (RESERVED_PROPS.includes(prop)) continue;
 
-    if (instance && /^on(Pointer|Click|DoubleClick|ContextMenu|Wheel)/.test(prop)) {
+    // Deal with pointer events, including removing them if undefined
+    if (instance && EVENT_REGEX.test(prop)) {
       if (typeof value === 'function') instance.handlers[prop] = value;else delete instance.handlers[prop];
       instance.eventCount = Object.keys(instance.handlers).length;
     }
 
-    const {
+    // Ignore setting undefined props
+    // https://github.com/pmndrs/react-three-fiber/issues/274
+    if (value === undefined) continue;
+    let {
       root,
       key,
       target
-    } = resolve(object, prop); // Copy if properties match signatures
+    } = resolve(object, prop);
+
+    // Alias (output)encoding => (output)colorSpace (since r152)
+    // https://github.com/pmndrs/react-three-fiber/pull/2829
+    if (hasColorSpace(root)) {
+      if (key === 'encoding') {
+        key = 'colorSpace';
+        value = value === sRGBEncoding ? SRGBColorSpace : LinearSRGBColorSpace;
+      } else if (key === 'outputEncoding') {
+        key = 'outputColorSpace';
+        value = value === sRGBEncoding ? SRGBColorSpace : LinearSRGBColorSpace;
+      }
+    }
 
-    if (target != null && target.copy && (target == null ? void 0 : target.constructor) === (value == null ? void 0 : value.constructor)) {
+    // Copy if properties match signatures
+    if (target != null && target.copy && (
+    // Some environments may break strict identity checks by duplicating versions of three.js.
+    // Loosen to unminified names, ignoring descendents.
+    // https://github.com/pmndrs/react-three-fiber/issues/2856
+    // TODO: fix upstream and remove in v9
+    __DEV__ ? target.constructor.name === value.constructor.name : target.constructor === value.constructor)) {
       target.copy(value);
-    } // Layers have no copy function, we must therefore copy the mask property
+    }
+    // Layers have no copy function, we must therefore copy the mask property
     else if (target instanceof THREE.Layers && value instanceof THREE.Layers) {
       target.mask = value.mask;
-    } // Set array types
+    }
+    // Set array types
     else if (target != null && target.set && Array.isArray(value)) {
       if (target.fromArray) target.fromArray(value);else target.set(...value);
-    } // Set literal types, ignore undefined
-    // https://github.com/pmndrs/react-three-fiber/issues/274
+    }
+    // Set literal types
     else if (target != null && target.set && typeof value !== 'object') {
-      const isColor = target instanceof THREE.Color; // Allow setting array scalars
+      const isColor = target instanceof THREE.Color;
+      // Allow setting array scalars
+      if (!isColor && target.setScalar && typeof value === 'number') target.setScalar(value);
+      // Otherwise just set single value
+      else target.set(value);
 
-      if (!isColor && target.setScalar && typeof value === 'number') target.setScalar(value); // Otherwise just set ...
-      else if (value !== undefined) target.set(value);
-    } // Else, just overwrite the value
-    else {
-      root[key] = value; // Auto-convert sRGB textures, for now ...
+      // Emulate THREE.ColorManagement for older three.js versions
       // https://github.com/pmndrs/react-three-fiber/issues/344
+      if (!getColorManagement() && !(rootState != null && rootState.linear) && isColor) target.convertSRGBToLinear();
+    }
+    // Else, just overwrite the value
+    else {
+      root[key] = value;
 
-      if (!(rootState != null && rootState.linear) && root[key] instanceof THREE.Texture) {
-        root[key].encoding = THREE.sRGBEncoding;
+      // Auto-convert sRGB texture parameters for built-in materials
+      // https://github.com/pmndrs/react-three-fiber/issues/344
+      // https://github.com/mrdoob/three.js/pull/25857
+      if (rootState && !rootState.linear && colorMaps.includes(key) && root[key] instanceof THREE.Texture &&
+      // sRGB textures must be RGBA8 since r137 https://github.com/mrdoob/three.js/pull/23129
+      root[key].format === THREE.RGBAFormat && root[key].type === THREE.UnsignedByteType) {
+        // NOTE: this cannot be set from the renderer (e.g. sRGB source textures rendered to P3)
+        if (hasColorSpace(root[key])) root[key].colorSpace = 'srgb';else root[key].encoding = sRGBEncoding;
       }
     }
   }
 
+  // Register event handlers
   if (instance != null && instance.parent && rootState != null && rootState.internal && instance.object instanceof THREE.Object3D && prevHandlers !== instance.eventCount) {
     // Pre-emptively remove the instance from the interaction manager
     const index = rootState.internal.interaction.indexOf(instance.object);
-    if (index > -1) rootState.internal.interaction.splice(index, 1); // Add the instance to the interaction manager only when it has handlers
-
+    if (index > -1) rootState.internal.interaction.splice(index, 1);
+    // Add the instance to the interaction manager only when it has handlers
     if (instance.eventCount && instance.object.raycast !== null && instance.object instanceof THREE.Object3D) {
       rootState.internal.interaction.push(instance.object);
     }
   }
 
+  // Auto-attach geometries and materials
+  if (instance && instance.props.attach === undefined) {
+    if (instance.object instanceof THREE.BufferGeometry) instance.props.attach = 'geometry';else if (instance.object instanceof THREE.Material) instance.props.attach = 'material';
+  }
+
+  // Instance was updated, request a frame
   if (instance) invalidateInstance(instance);
   return object;
 }
 function invalidateInstance(instance) {
   var _instance$root;
-
   const state = (_instance$root = instance.root) == null ? void 0 : _instance$root.getState == null ? void 0 : _instance$root.getState();
   if (state && state.internal.frames === 0) state.invalidate();
 }
 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();
+  // https://github.com/pmndrs/react-three-fiber/issues/92
+  if (camera.manual) return;
+  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();
 }
-
-// Keys that shouldn't be copied between R3F stores
-const privateKeys = ['set', 'get', 'setSize', 'setFrameloop', 'setDpr', 'events', 'invalidate', 'advance', 'size', 'viewport'];
-const isRenderer = def => !!(def != null && def.render);
-const context = /*#__PURE__*/React.createContext(null);
-
-const createStore = (invalidate, advance) => {
-  const rootStore = create((set, get) => {
-    const position = new THREE.Vector3();
-    const defaultTarget = new THREE.Vector3();
-    const tempTarget = new THREE.Vector3();
-
-    function getCurrentViewport(camera = get().camera, target = defaultTarget, size = get().size) {
-      const {
-        width,
-        height,
-        top,
-        left
-      } = size;
-      const aspect = width / height;
-      if (target instanceof THREE.Vector3) tempTarget.copy(target);else tempTarget.set(...target);
-      const distance = camera.getWorldPosition(position).distanceTo(tempTarget);
-
-      if (isOrthographicCamera(camera)) {
-        return {
-          width: width / camera.zoom,
-          height: height / camera.zoom,
-          top,
-          left,
-          factor: 1,
-          distance,
-          aspect
-        };
-      } else {
-        const fov = camera.fov * Math.PI / 180; // convert vertical fov to radians
-
-        const h = 2 * Math.tan(fov / 2) * distance; // visible height
-
-        const w = h * (width / height);
-        return {
-          width: w,
-          height: h,
-          top,
-          left,
-          factor: width / w,
-          distance,
-          aspect
-        };
-      }
-    }
-
-    let performanceTimeout = undefined;
-
-    const setPerformanceCurrent = current => set(state => ({
-      performance: { ...state.performance,
-        current
-      }
-    }));
-
-    const pointer = new THREE.Vector2();
-    const rootState = {
-      set,
-      get,
-      // Mock objects that have to be configured
-      gl: null,
-      camera: null,
-      raycaster: null,
-      events: {
-        priority: 1,
-        enabled: true,
-        connected: false
-      },
-      xr: null,
-      invalidate: (frames = 1) => invalidate(get(), frames),
-      advance: (timestamp, runGlobalEffects) => advance(timestamp, runGlobalEffects, get()),
-      legacy: false,
-      linear: false,
-      flat: false,
-      scene: new THREE.Scene(),
-      controls: null,
-      clock: new THREE.Clock(),
-      pointer,
-      mouse: pointer,
-      frameloop: 'always',
-      onPointerMissed: undefined,
-      performance: {
-        current: 1,
-        min: 0.5,
-        max: 1,
-        debounce: 200,
-        regress: () => {
-          const state = get(); // Clear timeout
-
-          if (performanceTimeout) clearTimeout(performanceTimeout); // Set lower bound performance
-
-          if (state.performance.current !== state.performance.min) setPerformanceCurrent(state.performance.min); // Go back to upper bound performance after a while unless something regresses meanwhile
-
-          performanceTimeout = setTimeout(() => setPerformanceCurrent(get().performance.max), state.performance.debounce);
-        }
-      },
-      size: {
-        width: 0,
-        height: 0,
-        top: 0,
-        left: 0
-      },
-      viewport: {
-        initialDpr: 0,
-        dpr: 0,
-        width: 0,
-        height: 0,
-        top: 0,
-        left: 0,
-        aspect: 0,
-        distance: 0,
-        factor: 0,
-        getCurrentViewport
-      },
-      setEvents: events => set(state => ({ ...state,
-        events: { ...state.events,
-          ...events
-        }
-      })),
-      setSize: (width, height, top = 0, left = 0) => {
-        const camera = get().camera;
-        const size = {
-          width,
-          height,
-          top,
-          left
-        };
-        set(state => ({
-          size,
-          viewport: { ...state.viewport,
-            ...getCurrentViewport(camera, defaultTarget, size)
-          }
-        }));
-      },
-      setDpr: dpr => set(state => {
-        const resolved = calculateDpr(dpr);
-        return {
-          viewport: { ...state.viewport,
-            dpr: resolved,
-            initialDpr: state.viewport.initialDpr || resolved
-          }
-        };
-      }),
-      setFrameloop: frameloop => {
-        var _frameloop$mode, _frameloop$render, _frameloop$maxDelta;
-
-        const state = get();
-        const mode = typeof frameloop === 'string' ? frameloop : (frameloop == null ? void 0 : frameloop.mode) === 'auto' ? 'always' : (_frameloop$mode = frameloop == null ? void 0 : frameloop.mode) != null ? _frameloop$mode : state.frameloop;
-        const render = typeof frameloop === 'string' ? state.internal.render : (_frameloop$render = frameloop == null ? void 0 : frameloop.render) != null ? _frameloop$render : state.internal.render;
-        const maxDelta = typeof frameloop === 'string' ? state.internal.maxDelta : (_frameloop$maxDelta = frameloop == null ? void 0 : frameloop.maxDelta) != null ? _frameloop$maxDelta : state.internal.maxDelta;
-        const clock = state.clock; // if frameloop === "never" clock.elapsedTime is updated using advance(timestamp)
-
-        clock.stop();
-        clock.elapsedTime = 0;
-
-        if (frameloop !== 'never') {
-          clock.start();
-          clock.elapsedTime = 0;
-        }
-
-        set(() => ({
-          frameloop: mode,
-          internal: { ...state.internal,
-            render,
-            maxDelta
-          }
-        }));
-      },
-      previousRoot: undefined,
-      internal: {
-        // Events
-        interaction: [],
-        hovered: new Map(),
-        subscribers: [],
-        initialClick: [0, 0],
-        initialHits: [],
-        capturedMap: new Map(),
-        lastEvent: /*#__PURE__*/React.createRef(),
-        // Updates
-        active: false,
-        frames: 0,
-        stages: [],
-        render: 'auto',
-        maxDelta: 1 / 10,
-        priority: 0,
-        subscribe: (ref, priority, store) => {
-          const state = get();
-          const internal = state.internal; // If this subscription was given a priority, it takes rendering into its own hands
-          // For that reason we switch off automatic rendering and increase the manual flag
-          // As long as this flag is positive there can be no internal rendering at all
-          // because there could be multiple render subscriptions
-
-          internal.priority = internal.priority + (priority > 0 ? 1 : 0); // We use the render flag and deprecate priority
-
-          if (internal.priority && state.internal.render === 'auto') set(() => ({
-            internal: { ...state.internal,
-              render: 'manual'
-            }
-          }));
-          internal.subscribers.push({
-            ref,
-            priority,
-            store
-          }); // Register subscriber and sort layers from lowest to highest, meaning,
-          // highest priority renders last (on top of the other frames)
-
-          internal.subscribers = internal.subscribers.sort((a, b) => a.priority - b.priority);
-          return () => {
-            const state = get();
-            const internal = state.internal;
-
-            if (internal != null && internal.subscribers) {
-              // Decrease manual flag if this subscription had a priority
-              internal.priority = internal.priority - (priority > 0 ? 1 : 0); // We use the render flag and deprecate priority
-
-              if (!internal.priority && state.internal.render === 'manual') set(() => ({
-                internal: { ...state.internal,
-                  render: 'auto'
-                }
-              })); // Remove subscriber from list
-
-              internal.subscribers = internal.subscribers.filter(s => s.ref !== ref);
-            }
-          };
-        }
-      }
-    };
-    return rootState;
-  });
-  const state = rootStore.getState();
-  prepare(state.scene, rootStore, '', {});
-  let oldSize = state.size;
-  let oldDpr = state.viewport.dpr;
-  let oldCamera = state.camera;
-  rootStore.subscribe(() => {
-    const {
-      camera,
-      size,
-      viewport,
-      gl,
-      set
-    } = rootStore.getState(); // Resize camera and renderer on changes to size and pixelratio
-
-    if (size !== oldSize || viewport.dpr !== oldDpr) {
-      oldSize = size;
-      oldDpr = viewport.dpr; // Update camera & renderer
-
-      updateCamera(camera, size);
-      gl.setPixelRatio(viewport.dpr); // Play nice with offscreen canvas contexts
-
-      const updateStyle = gl.domElement instanceof HTMLCanvasElement;
-      gl.setSize(size.width, size.height, updateStyle);
-    } // Update viewport once the camera changes
-
-
-    if (camera !== oldCamera) {
-      oldCamera = camera; // Update viewport
-
-      set(state => ({
-        viewport: { ...state.viewport,
-          ...state.viewport.getCurrentViewport(camera)
-        }
-      }));
-    }
-  }); // Invalidate on any change
-
-  rootStore.subscribe(state => invalidate(state)); // Return root state
-
-  return rootStore;
-};
+const isObject3D = object => object == null ? void 0 : object.isObject3D;
 
 function makeId(event) {
   return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
-} // https://github.com/facebook/react/tree/main/packages/react-reconciler#getcurrenteventpriority
-// Gives React a clue as to how import the current interaction is
-
-
-function getEventPriority() {
-  var _globalScope$event;
-
-  // Get a handle to the current global scope in window and worker contexts if able
-  // https://github.com/pmndrs/react-three-fiber/pull/2493
-  const globalScope = typeof self !== 'undefined' && self || typeof window !== 'undefined' && window;
-  if (!globalScope) return DefaultEventPriority;
-  const name = (_globalScope$event = globalScope.event) == null ? void 0 : _globalScope$event.type;
-
-  switch (name) {
-    case 'click':
-    case 'contextmenu':
-    case 'dblclick':
-    case 'pointercancel':
-    case 'pointerdown':
-    case 'pointerup':
-      return DiscreteEventPriority;
-
-    case 'pointermove':
-    case 'pointerout':
-    case 'pointerover':
-    case 'pointerenter':
-    case 'pointerleave':
-    case 'wheel':
-      return ContinuousEventPriority;
-
-    default:
-      return DefaultEventPriority;
-  }
 }
-/**
- * Release pointer captures.
- * This is called by releasePointerCapture in the API, and when an object is removed.
- */
 
+/**
+ * Release pointer captures.
+ * This is called by releasePointerCapture in the API, and when an object is removed.
+ */
 function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
   const captureData = captures.get(obj);
-
   if (captureData) {
-    captures.delete(obj); // If this was the last capturing object for this pointer
-
+    captures.delete(obj);
+    // If this was the last capturing object for this pointer
     if (captures.size === 0) {
       capturedMap.delete(pointerId);
       captureData.target.releasePointerCapture(pointerId);
     }
   }
 }
-
 function removeInteractivity(store, object) {
   const {
     internal
-  } = store.getState(); // Removes every trace of an object from the data store
-
+  } = store.getState();
+  // Removes every trace of an object from the data store
   internal.interaction = internal.interaction.filter(o => o !== object);
   internal.initialHits = internal.initialHits.filter(o => o !== object);
   internal.hovered.forEach((value, key) => {
@@ -720,106 +897,103 @@ function createEvents(store) {
     const dy = event.offsetY - internal.initialClick[1];
     return Math.round(Math.sqrt(dx * dx + dy * dy));
   }
-  /** Returns true if an instance has a valid pointer-event registered, this excludes scroll, clicks etc */
-
 
+  /** Returns true if an instance has a valid pointer-event registered, this excludes scroll, clicks etc */
   function filterPointerEvents(objects) {
     return objects.filter(obj => ['Move', 'Over', 'Enter', 'Out', 'Leave'].some(name => {
       var _r3f;
-
       return (_r3f = obj.__r3f) == null ? void 0 : _r3f.handlers['onPointer' + name];
     }));
   }
-
   function intersect(event, filter) {
     const state = store.getState();
     const duplicates = new Set();
-    const intersections = []; // Allow callers to eliminate event objects
-
-    const eventsObjects = filter ? filter(state.internal.interaction) : state.internal.interaction; // Reset all raycaster cameras to undefined
-
-    eventsObjects.forEach(obj => {
-      const state = getRootState(obj);
-
+    const intersections = [];
+    // Allow callers to eliminate event objects
+    const eventsObjects = filter ? filter(state.internal.interaction) : state.internal.interaction;
+    // Reset all raycaster cameras to undefined
+    for (let i = 0; i < eventsObjects.length; i++) {
+      const state = getRootState(eventsObjects[i]);
       if (state) {
         state.raycaster.camera = undefined;
       }
-    });
-
+    }
     if (!state.previousRoot) {
       // Make sure root-level pointer and ray are set up
       state.events.compute == null ? void 0 : state.events.compute(event, state);
-    } // Collect events
-
-
-    let hits = eventsObjects // Intersect objects
-    .flatMap(obj => {
-      const state = getRootState(obj); // Skip event handling when noEvents is set, or when the raycasters camera is null
-
-      if (!state || !state.events.enabled || state.raycaster.camera === null) return []; // When the camera is undefined we have to call the event layers update function
+    }
+    function handleRaycast(obj) {
+      const state = getRootState(obj);
+      // Skip event handling when noEvents is set, or when the raycasters camera is null
+      if (!state || !state.events.enabled || state.raycaster.camera === null) return [];
 
+      // When the camera is undefined we have to call the event layers update function
       if (state.raycaster.camera === undefined) {
         var _state$previousRoot;
-
-        state.events.compute == null ? void 0 : state.events.compute(event, state, (_state$previousRoot = state.previousRoot) == null ? void 0 : _state$previousRoot.getState()); // If the camera is still undefined we have to skip this layer entirely
-
+        state.events.compute == null ? void 0 : state.events.compute(event, state, (_state$previousRoot = state.previousRoot) == null ? void 0 : _state$previousRoot.getState());
+        // If the camera is still undefined we have to skip this layer entirely
         if (state.raycaster.camera === undefined) state.raycaster.camera = null;
-      } // Intersect object by object
-
+      }
 
+      // Intersect object by object
       return state.raycaster.camera ? state.raycaster.intersectObject(obj, true) : [];
-    }) // Sort by event priority and distance
+    }
+
+    // Collect events
+    let hits = eventsObjects
+    // Intersect objects
+    .flatMap(handleRaycast)
+    // Sort by event priority and distance
     .sort((a, b) => {
       const aState = getRootState(a.object);
       const bState = getRootState(b.object);
-      if (!aState || !bState) return 0;
+      if (!aState || !bState) return a.distance - b.distance;
       return bState.events.priority - aState.events.priority || a.distance - b.distance;
-    }) // Filter out duplicates
+    })
+    // Filter out duplicates
     .filter(item => {
       const id = makeId(item);
       if (duplicates.has(id)) return false;
       duplicates.add(id);
       return true;
-    }); // https://github.com/mrdoob/three.js/issues/16031
-    // Allow custom userland intersect sort order, this likely only makes sense on the root filter
+    });
 
-    if (state.events.filter) hits = state.events.filter(hits, state); // Bubble up the events, find the event source (eventObject)
+    // https://github.com/mrdoob/three.js/issues/16031
+    // Allow custom userland intersect sort order, this likely only makes sense on the root filter
+    if (state.events.filter) hits = state.events.filter(hits, state);
 
+    // Bubble up the events, find the event source (eventObject)
     for (const hit of hits) {
-      let eventObject = hit.object; // Bubble event up
-
+      let eventObject = hit.object;
+      // Bubble event up
       while (eventObject) {
         var _r3f2;
-
-        if ((_r3f2 = eventObject.__r3f) != null && _r3f2.eventCount) intersections.push({ ...hit,
+        if ((_r3f2 = eventObject.__r3f) != null && _r3f2.eventCount) intersections.push({
+          ...hit,
           eventObject
         });
         eventObject = eventObject.parent;
       }
-    } // If the interaction is captured, make all capturing targets part of the intersect.
-
+    }
 
+    // If the interaction is captured, make all capturing targets part of the intersect.
     if ('pointerId' in event && state.internal.capturedMap.has(event.pointerId)) {
       for (let captureData of state.internal.capturedMap.get(event.pointerId).values()) {
-        intersections.push(captureData.intersection);
+        if (!duplicates.has(makeId(captureData.intersection))) intersections.push(captureData.intersection);
       }
     }
-
     return intersections;
   }
-  /**  Handles intersections by forwarding them to handlers */
-
 
+  /**  Handles intersections by forwarding them to handlers */
   function handleIntersects(intersections, event, delta, callback) {
     // If anything has been found, forward it to the event listeners
     if (intersections.length) {
       const localState = {
         stopped: false
       };
-
       for (const hit of intersections) {
         const state = getRootState(hit.object);
-
         if (state) {
           const {
             raycaster,
@@ -828,19 +1002,15 @@ function createEvents(store) {
             internal
           } = state;
           const unprojectedPoint = new THREE.Vector3(pointer.x, pointer.y, 0).unproject(camera);
-
           const hasPointerCapture = id => {
             var _internal$capturedMap, _internal$capturedMap2;
-
             return (_internal$capturedMap = (_internal$capturedMap2 = internal.capturedMap.get(id)) == null ? void 0 : _internal$capturedMap2.has(hit.eventObject)) != null ? _internal$capturedMap : false;
           };
-
           const setPointerCapture = id => {
             const captureData = {
               intersection: hit,
               target: event.target
             };
-
             if (internal.capturedMap.has(id)) {
               // if the pointerId was previously captured, we add the hit to the
               // event capturedMap.
@@ -850,29 +1020,27 @@ function createEvents(store) {
               // containing the hitObject, and the hit. hitObject is used for
               // faster access.
               internal.capturedMap.set(id, new Map([[hit.eventObject, captureData]]));
-            } // Call the original event now
+            }
             event.target.setPointerCapture(id);
           };
-
           const releasePointerCapture = id => {
             const captures = internal.capturedMap.get(id);
-
             if (captures) {
               releaseInternalPointerCapture(internal.capturedMap, hit.eventObject, captures, id);
             }
-          }; // Add native event props
-
-
-          let extractEventProps = {}; // This iterates over the event's properties including the inherited ones. Native PointerEvents have most of their props as getters which are inherited, but polyfilled PointerEvents have them all as their own properties (i.e. not inherited). We can't use Object.keys() or Object.entries() as they only return "own" properties; nor Object.getPrototypeOf(event) as that *doesn't* return "own" properties, only inherited ones.
+          };
 
+          // Add native event props
+          let extractEventProps = {};
+          // This iterates over the event's properties including the inherited ones. Native PointerEvents have most of their props as getters which are inherited, but polyfilled PointerEvents have them all as their own properties (i.e. not inherited). We can't use Object.keys() or Object.entries() as they only return "own" properties; nor Object.getPrototypeOf(event) as that *doesn't* return "own" properties, only inherited ones.
           for (let prop in event) {
-            let property = event[prop]; // Only copy over atomics, leave functions alone as these should be
+            let property = event[prop];
+            // Only copy over atomics, leave functions alone as these should be
             // called as event.nativeEvent.fn()
-
             if (typeof property !== 'function') extractEventProps[prop] = property;
           }
-
-          let raycastEvent = { ...hit,
+          let raycastEvent = {
+            ...hit,
             ...extractEventProps,
             pointer,
             intersections,
@@ -882,17 +1050,20 @@ function createEvents(store) {
             ray: raycaster.ray,
             camera: camera,
             // Hijack stopPropagation, which just sets a flag
-            stopPropagation: () => {
+            stopPropagation() {
               // https://github.com/pmndrs/react-three-fiber/issues/596
               // Events are not allowed to stop propagation if the pointer has been captured
-              const capturesForPointer = 'pointerId' in event && internal.capturedMap.get(event.pointerId); // We only authorize stopPropagation...
+              const capturesForPointer = 'pointerId' in event && internal.capturedMap.get(event.pointerId);
 
-              if ( // ...if this pointer hasn't been captured
-              !capturesForPointer || // ... or if the hit object is capturing the pointer
+              // We only authorize stopPropagation...
+              if (
+              // ...if this pointer hasn't been captured
+              !capturesForPointer ||
+              // ... or if the hit object is capturing the pointer
               capturesForPointer.has(hit.eventObject)) {
-                raycastEvent.stopped = localState.stopped = true; // Propagation is stopped, remove all other hover records
+                raycastEvent.stopped = localState.stopped = true;
+                // Propagation is stopped, remove all other hover records
                 // An event handler is only allowed to flush other handlers if it is hovered itself
-
                 if (internal.hovered.size && Array.from(internal.hovered.values()).find(i => i.eventObject === hit.eventObject)) {
                   // Objects cannot flush out higher up objects that have already caught the event
                   const higher = intersections.slice(0, intersections.indexOf(hit));
@@ -912,111 +1083,136 @@ function createEvents(store) {
               releasePointerCapture
             },
             nativeEvent: event
-          }; // Call subscribers
-
-          callback(raycastEvent); // Event bubbling may be interrupted by stopPropagation
+          };
 
+          // Call subscribers
+          callback(raycastEvent);
+          // Event bubbling may be interrupted by stopPropagation
           if (localState.stopped === true) break;
         }
       }
     }
-
     return intersections;
   }
-
   function cancelPointer(intersections) {
     const {
       internal
     } = store.getState();
-    Array.from(internal.hovered.values()).forEach(hoveredObj => {
+    for (const hoveredObj of internal.hovered.values()) {
       // When no objects were hit or the the hovered object wasn't found underneath the cursor
       // we call onPointerOut and delete the object from the hovered-elements map
       if (!intersections.length || !intersections.find(hit => hit.object === hoveredObj.object && hit.index === hoveredObj.index && hit.instanceId === hoveredObj.instanceId)) {
         const eventObject = hoveredObj.eventObject;
         const instance = eventObject.__r3f;
         internal.hovered.delete(makeId(hoveredObj));
-
         if (instance != null && instance.eventCount) {
-          const handlers = instance.handlers; // Clear out intersects, they are outdated by now
-
-          const data = { ...hoveredObj,
+          const handlers = instance.handlers;
+          // Clear out intersects, they are outdated by now
+          const data = {
+            ...hoveredObj,
             intersections
           };
           handlers.onPointerOut == null ? void 0 : handlers.onPointerOut(data);
           handlers.onPointerLeave == null ? void 0 : handlers.onPointerLeave(data);
         }
       }
-    });
+    }
   }
-
-  const handlePointer = name => {
+  function pointerMissed(event, objects) {
+    for (let i = 0; i < objects.length; i++) {
+      const instance = objects[i].__r3f;
+      instance == null ? void 0 : instance.handlers.onPointerMissed == null ? void 0 : instance.handlers.onPointerMissed(event);
+    }
+  }
+  function handlePointer(name) {
     // Deal with cancelation
     switch (name) {
       case 'onPointerLeave':
       case 'onPointerCancel':
         return () => cancelPointer([]);
-
       case 'onLostPointerCapture':
         return event => {
           const {
             internal
           } = store.getState();
-
-          if ('pointerId' in event && !internal.capturedMap.has(event.pointerId)) {
+          if ('pointerId' in event && internal.capturedMap.has(event.pointerId)) {
             // If the object event interface had onLostPointerCapture, we'd call it here on every
-            // object that's getting removed.
-            internal.capturedMap.delete(event.pointerId);
-            cancelPointer([]);
+            // object that's getting removed. We call it on the next frame because onLostPointerCapture
+            // fires before onPointerUp. Otherwise pointerUp would never be called if the event didn't
+            // happen in the object it originated from, leaving components in a in-between state.
+            requestAnimationFrame(() => {
+              // Only release if pointer-up didn't do it already
+              if (internal.capturedMap.has(event.pointerId)) {
+                internal.capturedMap.delete(event.pointerId);
+                cancelPointer([]);
+              }
+            });
           }
         };
-    } // Any other pointer goes here ...
-
+    }
 
-    return event => {
+    // Any other pointer goes here ...
+    return function handleEvent(event) {
       const {
         onPointerMissed,
         internal
-      } = store.getState(); //prepareRay(event)
+      } = store.getState();
 
-      internal.lastEvent.current = event; // Get fresh intersects
+      // prepareRay(event)
+      internal.lastEvent.current = event;
 
+      // Get fresh intersects
       const isPointerMove = name === 'onPointerMove';
       const isClickEvent = name === 'onClick' || name === 'onContextMenu' || name === 'onDoubleClick';
-      const filter = isPointerMove ? filterPointerEvents : undefined; //const hits = patchIntersects(intersect(filter), event)
-
+      const filter = isPointerMove ? filterPointerEvents : undefined;
       const hits = intersect(event, filter);
-      const delta = isClickEvent ? calculateDistance(event) : 0; // Save initial coordinates on pointer-down
+      const delta = isClickEvent ? calculateDistance(event) : 0;
 
+      // Save initial coordinates on pointer-down
       if (name === 'onPointerDown') {
         internal.initialClick = [event.offsetX, event.offsetY];
         internal.initialHits = hits.map(hit => hit.eventObject);
-      } // If a click yields no results, pass it back to the user as a miss
-      // Missed events have to come first in order to establish user-land side-effect clean up
-
+      }
 
+      // If a click yields no results, pass it back to the user as a miss
+      // Missed events have to come first in order to establish user-land side-effect clean up
       if (isClickEvent && !hits.length) {
         if (delta <= 2) {
           pointerMissed(event, internal.interaction);
           if (onPointerMissed) onPointerMissed(event);
         }
-      } // Take care of unhover
-
-
+      }
+      // Take care of unhover
       if (isPointerMove) cancelPointer(hits);
-      handleIntersects(hits, event, delta, data => {
+      function onIntersect(data) {
         const eventObject = data.eventObject;
-        const instance = eventObject.__r3f; // Check presence of handlers
+        const instance = eventObject.__r3f;
 
+        // Check presence of handlers
         if (!(instance != null && instance.eventCount)) return;
         const handlers = instance.handlers;
 
+        /*
+        MAYBE TODO, DELETE IF NOT: 
+          Check if the object is captured, captured events should not have intersects running in parallel
+          But wouldn't it be better to just replace capturedMap with a single entry?
+          Also, are we OK with straight up making picking up multiple objects impossible?
+          
+        const pointerId = (data as ThreeEvent<PointerEvent>).pointerId        
+        if (pointerId !== undefined) {
+          const capturedMeshSet = internal.capturedMap.get(pointerId)
+          if (capturedMeshSet) {
+            const captured = capturedMeshSet.get(eventObject)
+            if (captured && captured.localState.stopped) return
+          }
+        }*/
+
         if (isPointerMove) {
           // Move event ...
           if (handlers.onPointerOver || handlers.onPointerEnter || handlers.onPointerOut || handlers.onPointerLeave) {
             // When enter or out is present take care of hover-state
             const id = makeId(data);
             const hoveredItem = internal.hovered.get(id);
-
             if (!hoveredItem) {
               // If the object wasn't previously hovered, book it and call its handler
               internal.hovered.set(id, data);
@@ -1026,21 +1222,19 @@ function createEvents(store) {
               // If the object was previously hovered and stopped, we shouldn't allow other items to proceed
               data.stopPropagation();
             }
-          } // Call mouse move
-
-
+          }
+          // Call mouse move
           handlers.onPointerMove == null ? void 0 : handlers.onPointerMove(data);
         } else {
           // All other events ...
           const handler = handlers[name];
-
           if (handler) {
             // Forward all events back to their respective handlers with the exception of click events,
             // which must use the initial target
             if (!isClickEvent || internal.initialHits.includes(eventObject)) {
               // Missed events have to come first
-              pointerMissed(event, internal.interaction.filter(object => !internal.initialHits.includes(object))); // Now call the handler
-
+              pointerMissed(event, internal.interaction.filter(object => !internal.initialHits.includes(object)));
+              // Now call the handler
               handler(data);
             }
           } else {
@@ -1050,489 +1244,317 @@ function createEvents(store) {
             }
           }
         }
-      });
+      }
+      handleIntersects(hits, event, delta, onIntersect);
     };
-  };
-
-  function pointerMissed(event, objects) {
-    objects.forEach(object => {
-      var _r3f3;
-
-      return (_r3f3 = object.__r3f) == null ? void 0 : _r3f3.handlers.onPointerMissed == null ? void 0 : _r3f3.handlers.onPointerMissed(event);
-    });
   }
-
   return {
     handlePointer
   };
 }
 
-const catalogue = {};
-
-const extend = objects => void Object.assign(catalogue, objects);
-
-function createInstance(type, props, root) {
-  var _props$object, _props$args;
-
-  // Get target from catalogue
-  const name = `${type[0].toUpperCase()}${type.slice(1)}`;
-  const target = catalogue[name]; // Validate element target
-
-  if (type !== 'primitive' && !target) throw new Error(`R3F: ${name} is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively`); // Validate primitives
-
-  if (type === 'primitive' && !props.object) throw new Error(`R3F: Primitives without 'object' are invalid!`); // Throw if an object or literal was passed for args
-
-  if (props.args !== undefined && !Array.isArray(props.args)) throw new Error('R3F: The args prop must be an array!'); // Create instance
-
-  const object = (_props$object = props.object) != null ? _props$object : new target(...((_props$args = props.args) != null ? _props$args : []));
-  const instance = prepare(object, root, type, props); // Auto-attach geometries and materials
-
-  if (instance.props.attach === undefined) {
-    if (instance.object instanceof THREE.BufferGeometry) instance.props.attach = 'geometry';else if (instance.object instanceof THREE.Material) instance.props.attach = 'material';
-  } // Set initial props
-
-
-  applyProps(instance.object, props);
-  return instance;
-} // https://github.com/facebook/react/issues/20271
-// This will make sure events and attach are only handled once when trees are complete
-
-
-function handleContainerEffects(parent, child) {
-  // Bail if tree isn't mounted or parent is not a container.
-  // This ensures that the tree is finalized and React won't discard results to Suspense
-  const state = child.root.getState();
-  if (!parent.parent && parent.object !== state.scene) return; // Handle interactivity
-
-  if (child.eventCount > 0 && child.object.raycast !== null && child.object instanceof THREE.Object3D) {
-    state.internal.interaction.push(child.object);
-  } // Handle attach
-
-
-  if (child.props.attach) attach(parent, child);
-
-  for (const childInstance of child.children) handleContainerEffects(child, childInstance);
-}
-
-function appendChild(parent, child) {
-  if (!child) return; // Link instances
-
-  child.parent = parent;
-  parent.children.push(child); // Add Object3Ds if able
-
-  if (!child.props.attach && parent.object instanceof THREE.Object3D && child.object instanceof THREE.Object3D) {
-    parent.object.add(child.object);
-  } // Attach tree once complete
-
-
-  handleContainerEffects(parent, child); // Tree was updated, request a frame
-
-  invalidateInstance(child);
-}
-
-function insertBefore(parent, child, beforeChild, replace = false) {
-  if (!child || !beforeChild) return; // Link instances
-
-  child.parent = parent;
-  const childIndex = parent.children.indexOf(beforeChild);
-  if (childIndex !== -1) parent.children.splice(childIndex, replace ? 1 : 0, child);
-  if (replace) beforeChild.parent = null; // Manually splice Object3Ds
-
-  if (!child.props.attach && parent.object instanceof THREE.Object3D && child.object instanceof THREE.Object3D && beforeChild.object instanceof THREE.Object3D) {
-    child.object.parent = parent.object;
-    parent.object.children.splice(parent.object.children.indexOf(beforeChild.object), 0, child.object);
-    child.object.dispatchEvent({
-      type: 'added'
-    });
-  } // Attach tree once complete
-
-
-  handleContainerEffects(parent, child); // Tree was updated, request a frame
-
-  invalidateInstance(child);
-}
-
-function removeChild(parent, child, dispose, recursive) {
-  if (!child) return; // Unlink instances
-
-  child.parent = null;
-
-  if (recursive === undefined) {
-    const childIndex = parent.children.indexOf(child);
-    if (childIndex !== -1) parent.children.splice(childIndex, 1);
-  } // Eagerly tear down tree
-
-
-  if (child.props.attach) {
-    detach(parent, child);
-  } else if (child.object instanceof THREE.Object3D && parent.object instanceof THREE.Object3D) {
-    parent.object.remove(child.object);
-    removeInteractivity(child.root, child.object);
-  } // Allow objects to bail out of unmount disposal with dispose={null}
-
-
-  const shouldDispose = child.props.dispose !== null && dispose !== false; // Recursively remove instance children
-
-  if (recursive !== false) {
-    for (const node of child.children) removeChild(child, node, shouldDispose, true);
-
-    child.children = [];
-  } // Unlink instance object
-
-
-  delete child.object.__r3f; // Dispose object whenever the reconciler feels like it.
-  // Never dispose of primitives because their state may be kept outside of React!
-  // In order for an object to be able to dispose it
-  //   - has a dispose method
-  //   - cannot be a <primitive object={...} />
-  //   - cannot be a THREE.Scene, because three has broken its own API
-
-  if (shouldDispose && child.type !== 'primitive' && child.object.type !== 'Scene') {
-    const dispose = child.object.dispose;
-
-    if (typeof dispose === 'function') {
-      unstable_scheduleCallback(unstable_IdlePriority, () => {
-        try {
-          dispose();
-        } catch (e) {
-          /* ... */
-        }
-      });
-    }
-  } // Tree was updated, request a frame for top-level instance
-
-
-  if (dispose === undefined) invalidateInstance(child);
-}
-
-function switchInstance(oldInstance, type, props, fiber) {
-  // Create a new instance
-  const newInstance = createInstance(type, props, oldInstance.root); // Move children to new instance
-
-  for (const child of oldInstance.children) {
-    removeChild(oldInstance, child, false, false);
-    appendChild(newInstance, child);
-  }
-
-  oldInstance.children = []; // Link up new instance
-
-  const parent = oldInstance.parent;
-
-  if (parent) {
-    insertBefore(parent, newInstance, oldInstance, true);
-  } // This evil hack switches the react-internal fiber node
-  [fiber, fiber.alternate].forEach(fiber => {
-    if (fiber !== null) {
-      fiber.stateNode = newInstance;
-
-      if (fiber.ref) {
-        if (typeof fiber.ref === 'function') fiber.ref(newInstance.object);else fiber.ref.current = newInstance.object;
+const isRenderer = def => !!(def != null && def.render);
+const context = /*#__PURE__*/React.createContext(null);
+const createStore = (invalidate, advance) => {
+  const rootStore = create((set, get) => {
+    const position = new THREE.Vector3();
+    const defaultTarget = new THREE.Vector3();
+    const tempTarget = new THREE.Vector3();
+    function getCurrentViewport(camera = get().camera, target = defaultTarget, size = get().size) {
+      const {
+        width,
+        height,
+        top,
+        left
+      } = size;
+      const aspect = width / height;
+      if (target instanceof THREE.Vector3) tempTarget.copy(target);else tempTarget.set(...target);
+      const distance = camera.getWorldPosition(position).distanceTo(tempTarget);
+      if (isOrthographicCamera(camera)) {
+        return {
+          width: width / camera.zoom,
+          height: height / camera.zoom,
+          top,
+          left,
+          factor: 1,
+          distance,
+          aspect
+        };
+      } else {
+        const fov = camera.fov * Math.PI / 180; // convert vertical fov to radians
+        const h = 2 * Math.tan(fov / 2) * distance; // visible height
+        const w = h * (width / height);
+        return {
+          width: w,
+          height: h,
+          top,
+          left,
+          factor: width / w,
+          distance,
+          aspect
+        };
       }
     }
-  }); // Tree was updated, request a frame
-
-  invalidateInstance(newInstance);
-  return newInstance;
-} // Don't handle text instances, warn on undefined behavior
-
-
-const handleTextInstance = () => console.warn('R3F: Text is not allowed in JSX! This could be stray whitespace or characters.');
-
-const reconciler = Reconciler({
-  supportsMutation: true,
-  isPrimaryRenderer: false,
-  supportsPersistence: false,
-  supportsHydration: false,
-  noTimeout: -1,
-  createInstance,
-  removeChild,
-  appendChild,
-  appendInitialChild: appendChild,
-  insertBefore,
-
-  appendChildToContainer(container, child) {
-    const scene = container.getState().scene.__r3f;
-
-    if (!child || !scene) return;
-    appendChild(scene, child);
-  },
-
-  removeChildFromContainer(container, child) {
-    const scene = container.getState().scene.__r3f;
-
-    if (!child || !scene) return;
-    removeChild(scene, child);
-  },
-
-  insertInContainerBefore(container, child, beforeChild) {
-    const scene = container.getState().scene.__r3f;
-
-    if (!child || !beforeChild || !scene) return;
-    insertBefore(scene, child, beforeChild);
-  },
-
-  getRootHostContext: () => null,
-  getChildHostContext: parentHostContext => parentHostContext,
-
-  prepareUpdate(instance, _type, oldProps, newProps) {
-    var _newProps$args, _oldProps$args, _newProps$args2;
-
-    // Reconstruct primitives if object prop changes
-    if (instance.type === 'primitive' && oldProps.object !== newProps.object) return [true]; // Throw if an object or literal was passed for args
-
-    if (newProps.args !== undefined && !Array.isArray(newProps.args)) throw new Error('R3F: The args prop must be an array!'); // Reconstruct instance if args change
-
-    if (((_newProps$args = newProps.args) == null ? void 0 : _newProps$args.length) !== ((_oldProps$args = oldProps.args) == null ? void 0 : _oldProps$args.length)) return [true];
-    if ((_newProps$args2 = newProps.args) != null && _newProps$args2.some((value, index) => {
-      var _oldProps$args2;
-
-      return value !== ((_oldProps$args2 = oldProps.args) == null ? void 0 : _oldProps$args2[index]);
-    })) return [true]; // Create a diff-set, flag if there are any changes
-
-    const changedProps = diffProps(instance, newProps, true);
-    if (Object.keys(changedProps).length) return [false, changedProps]; // Otherwise do not touch the instance
-
-    return null;
-  },
-
-  commitUpdate(instance, diff, type, _oldProps, newProps, fiber) {
-    const [reconstruct, changedProps] = diff; // Reconstruct when args or <primitive object={...} have changes
-
-    if (reconstruct) return switchInstance(instance, type, newProps, fiber); // Otherwise just overwrite props
-
-    Object.assign(instance.props, changedProps);
-    applyProps(instance.object, changedProps);
-  },
-
-  finalizeInitialChildren: () => false,
-
-  commitMount() {},
-
-  getPublicInstance: instance => instance == null ? void 0 : instance.object,
-  prepareForCommit: () => null,
-  preparePortalMount: container => prepare(container.getState().scene, container, '', {}),
-  resetAfterCommit: () => {},
-  shouldSetTextContent: () => false,
-  clearContainer: () => false,
-
-  hideInstance(instance) {
-    var _instance$parent;
-
-    if (instance.props.attach && (_instance$parent = instance.parent) != null && _instance$parent.object) {
-      detach(instance.parent, instance);
-    } else if (instance.object instanceof THREE.Object3D) {
-      instance.object.visible = false;
-    }
-
-    instance.isHidden = true;
-    invalidateInstance(instance);
-  },
-
-  unhideInstance(instance) {
-    if (instance.isHidden) {
-      var _instance$parent2;
-
-      if (instance.props.attach && (_instance$parent2 = instance.parent) != null && _instance$parent2.object) {
-        attach(instance.parent, instance);
-      } else if (instance.object instanceof THREE.Object3D && instance.props.visible !== false) {
-        instance.object.visible = true;
+    let performanceTimeout = undefined;
+    const setPerformanceCurrent = current => set(state => ({
+      performance: {
+        ...state.performance,
+        current
       }
-    }
-
-    instance.isHidden = false;
-    invalidateInstance(instance);
-  },
-
-  createTextInstance: handleTextInstance,
-  hideTextInstance: handleTextInstance,
-  unhideTextInstance: handleTextInstance,
-  // https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r916356874
-  // @ts-ignore
-  getCurrentEventPriority: () => getEventPriority(),
-  beforeActiveInstanceBlur: () => {},
-  afterActiveInstanceBlur: () => {},
-  detachDeletedInstance: () => {},
-  now: typeof performance !== 'undefined' && is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : () => 0,
-  // https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r920883503
-  scheduleTimeout: is.fun(setTimeout) ? setTimeout : undefined,
-  cancelTimeout: is.fun(clearTimeout) ? clearTimeout : undefined
-});
-
-function createSubs(callback, subs) {
-  const sub = {
-    callback
-  };
-  subs.add(sub);
-  return () => void subs.delete(sub);
-}
-let globalEffects = new Set();
-let globalAfterEffects = new Set();
-let globalTailEffects = new Set();
-/**
- * Adds a global render callback which is called each frame.
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
- */
-
-const addEffect = callback => createSubs(callback, globalEffects);
-/**
- * Adds a global after-render callback which is called each frame.
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addAfterEffect
- */
-
-const addAfterEffect = callback => createSubs(callback, globalAfterEffects);
-/**
- * Adds a global callback which is called when rendering stops.
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addTail
- */
-
-const addTail = callback => createSubs(callback, globalTailEffects);
-
-function run(effects, timestamp) {
-  if (!effects.size) return;
-  effects.forEach(({
-    callback
-  }) => callback(timestamp));
-}
-
-function flushGlobalEffects(type, timestamp) {
-  switch (type) {
-    case 'before':
-      return run(globalEffects, timestamp);
-
-    case 'after':
-      return run(globalAfterEffects, timestamp);
-
-    case 'tail':
-      return run(globalTailEffects, timestamp);
-  }
-}
-
-function update(timestamp, state, frame) {
-  // Run local effects
-  let delta = state.clock.getDelta(); // In frameloop='never' mode, clock times are updated using the provided timestamp
-
-  if (state.frameloop === 'never' && typeof timestamp === 'number') {
-    delta = timestamp - state.clock.elapsedTime;
-    state.clock.oldTime = state.clock.elapsedTime;
-    state.clock.elapsedTime = timestamp;
-  } else {
-    delta = Math.max(Math.min(delta, state.internal.maxDelta), 0);
-  } // Call subscribers (useUpdate)
-
-
-  for (const stage of state.internal.stages) {
-    stage.frame(delta, frame);
-  }
-
-  state.internal.frames = Math.max(0, state.internal.frames - 1);
-  return state.frameloop === 'always' ? 1 : state.internal.frames;
-}
-
-function createLoop(roots) {
-  let running = false;
-  let repeat;
-  let frame;
-  let state;
-
-  function loop(timestamp) {
-    frame = requestAnimationFrame(loop);
-    running = true;
-    repeat = 0; // Run effects
-
-    flushGlobalEffects('before', timestamp); // Render all roots
-
-    roots.forEach(root => {
-      var _state$gl$xr;
-
-      state = root.store.getState(); // If the frameloop is invalidated, do not run another frame
-
-      if (state.internal.active && (state.frameloop === 'always' || state.internal.frames > 0) && !((_state$gl$xr = state.gl.xr) != null && _state$gl$xr.isPresenting)) {
-        repeat += update(timestamp, state);
+    }));
+    const pointer = new THREE.Vector2();
+    const rootState = {
+      set,
+      get,
+      // Mock objects that have to be configured
+      gl: null,
+      camera: null,
+      raycaster: null,
+      events: {
+        priority: 1,
+        enabled: true,
+        connected: false
+      },
+      scene: null,
+      xr: null,
+      invalidate: (frames = 1) => invalidate(get(), frames),
+      advance: (timestamp, runGlobalEffects) => advance(timestamp, runGlobalEffects, get()),
+      legacy: false,
+      linear: false,
+      flat: false,
+      controls: null,
+      clock: new THREE.Clock(),
+      pointer,
+      mouse: pointer,
+      frameloop: 'always',
+      onPointerMissed: undefined,
+      performance: {
+        current: 1,
+        min: 0.5,
+        max: 1,
+        debounce: 200,
+        regress: () => {
+          const state = get();
+          // Clear timeout
+          if (performanceTimeout) clearTimeout(performanceTimeout);
+          // Set lower bound performance
+          if (state.performance.current !== state.performance.min) setPerformanceCurrent(state.performance.min);
+          // Go back to upper bound performance after a while unless something regresses meanwhile
+          performanceTimeout = setTimeout(() => setPerformanceCurrent(get().performance.max), state.performance.debounce);
+        }
+      },
+      size: {
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0
+      },
+      viewport: {
+        initialDpr: 0,
+        dpr: 0,
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0,
+        aspect: 0,
+        distance: 0,
+        factor: 0,
+        getCurrentViewport
+      },
+      setEvents: events => set(state => ({
+        ...state,
+        events: {
+          ...state.events,
+          ...events
+        }
+      })),
+      setSize: (width, height, top = 0, left = 0) => {
+        const camera = get().camera;
+        const size = {
+          width,
+          height,
+          top,
+          left
+        };
+        set(state => ({
+          size,
+          viewport: {
+            ...state.viewport,
+            ...getCurrentViewport(camera, defaultTarget, size)
+          }
+        }));
+      },
+      setDpr: dpr => set(state => {
+        const resolved = calculateDpr(dpr);
+        return {
+          viewport: {
+            ...state.viewport,
+            dpr: resolved,
+            initialDpr: state.viewport.initialDpr || resolved
+          }
+        };
+      }),
+      setFrameloop: frameloop => {
+        var _frameloop$mode, _frameloop$render, _frameloop$maxDelta;
+        const state = get();
+        const mode = typeof frameloop === 'string' ? frameloop : (frameloop == null ? void 0 : frameloop.mode) === 'auto' ? 'always' : (_frameloop$mode = frameloop == null ? void 0 : frameloop.mode) != null ? _frameloop$mode : state.frameloop;
+        const render = typeof frameloop === 'string' ? state.internal.render : (_frameloop$render = frameloop == null ? void 0 : frameloop.render) != null ? _frameloop$render : state.internal.render;
+        const maxDelta = typeof frameloop === 'string' ? state.internal.maxDelta : (_frameloop$maxDelta = frameloop == null ? void 0 : frameloop.maxDelta) != null ? _frameloop$maxDelta : state.internal.maxDelta;
+        const clock = state.clock;
+        // if frameloop === "never" clock.elapsedTime is updated using advance(timestamp)
+        clock.stop();
+        clock.elapsedTime = 0;
+        if (frameloop !== 'never') {
+          clock.start();
+          clock.elapsedTime = 0;
+        }
+        set(() => ({
+          frameloop: mode,
+          internal: {
+            ...state.internal,
+            render,
+            maxDelta
+          }
+        }));
+      },
+      previousRoot: undefined,
+      internal: {
+        // Events
+        interaction: [],
+        hovered: new Map(),
+        subscribers: [],
+        initialClick: [0, 0],
+        initialHits: [],
+        capturedMap: new Map(),
+        lastEvent: /*#__PURE__*/React.createRef(),
+        // Updates
+        active: false,
+        frames: 0,
+        stages: [],
+        render: 'auto',
+        maxDelta: 1 / 10,
+        priority: 0,
+        subscribe: (ref, priority, store) => {
+          const state = get();
+          const internal = state.internal;
+          // If this subscription was given a priority, it takes rendering into its own hands
+          // For that reason we switch off automatic rendering and increase the manual flag
+          // As long as this flag is positive there can be no internal rendering at all
+          // because there could be multiple render subscriptions
+          internal.priority = internal.priority + (priority > 0 ? 1 : 0);
+          // We use the render flag and deprecate priority
+          if (internal.priority && state.internal.render === 'auto') set(() => ({
+            internal: {
+              ...state.internal,
+              render: 'manual'
+            }
+          }));
+          internal.subscribers.push({
+            ref,
+            priority,
+            store
+          });
+          // Register subscriber and sort layers from lowest to highest, meaning,
+          // highest priority renders last (on top of the other frames)
+          internal.subscribers = internal.subscribers.sort((a, b) => a.priority - b.priority);
+          return () => {
+            const state = get();
+            const internal = state.internal;
+            if (internal != null && internal.subscribers) {
+              // Decrease manual flag if this subscription had a priority
+              internal.priority = internal.priority - (priority > 0 ? 1 : 0);
+              // We use the render flag and deprecate priority
+              if (!internal.priority && state.internal.render === 'manual') set(() => ({
+                internal: {
+                  ...state.internal,
+                  render: 'auto'
+                }
+              }));
+              // Remove subscriber from list
+              internal.subscribers = internal.subscribers.filter(s => s.ref !== ref);
+            }
+          };
+        }
       }
-    }); // Run after-effects
-
-    flushGlobalEffects('after', timestamp); // Stop the loop if nothing invalidates it
-
-    if (repeat === 0) {
-      // Tail call effects, they are called when rendering stops
-      flushGlobalEffects('tail', timestamp); // Flag end of operation
+    };
+    return rootState;
+  });
+  const state = rootStore.getState();
+  let oldSize = state.size;
+  let oldDpr = state.viewport.dpr;
+  let oldCamera = state.camera;
+  rootStore.subscribe(() => {
+    const {
+      camera,
+      size,
+      viewport,
+      gl,
+      set
+    } = rootStore.getState();
 
-      running = false;
-      return cancelAnimationFrame(frame);
+    // Resize camera and renderer on changes to size and pixelratio
+    if (size.width !== oldSize.width || size.height !== oldSize.height || viewport.dpr !== oldDpr) {
+      oldSize = size;
+      oldDpr = viewport.dpr;
+      // Update camera & renderer
+      updateCamera(camera, size);
+      gl.setPixelRatio(viewport.dpr);
+      const updateStyle = typeof HTMLCanvasElement !== 'undefined' && gl.domElement instanceof HTMLCanvasElement;
+      gl.setSize(size.width, size.height, updateStyle);
     }
-  }
-
-  function invalidate(state, frames = 1) {
-    var _state$gl$xr2;
-
-    if (!state) return roots.forEach(root => invalidate(root.store.getState()), frames);
-    if ((_state$gl$xr2 = state.gl.xr) != null && _state$gl$xr2.isPresenting || !state.internal.active || state.frameloop === 'never') return; // Increase frames, do not go higher than 60
-
-    state.internal.frames = Math.min(60, state.internal.frames + frames); // If the render-loop isn't active, start it
 
-    if (!running) {
-      running = true;
-      requestAnimationFrame(loop);
+    // Update viewport once the camera changes
+    if (camera !== oldCamera) {
+      oldCamera = camera;
+      // Update viewport
+      set(state => ({
+        viewport: {
+          ...state.viewport,
+          ...state.viewport.getCurrentViewport(camera)
+        }
+      }));
     }
-  }
+  });
 
-  function advance(timestamp, runGlobalEffects = true, state, frame) {
-    if (runGlobalEffects) flushGlobalEffects('before', timestamp);
-    if (!state) roots.forEach(root => update(timestamp, root.store.getState()));else update(timestamp, state, frame);
-    if (runGlobalEffects) flushGlobalEffects('after', timestamp);
-  }
+  // Invalidate on any change
+  rootStore.subscribe(state => invalidate(state));
 
-  return {
-    loop,
-
-    /**
-     * 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
-     */
-    invalidate,
-
-    /**
-     * 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
-     */
-    advance
-  };
-}
+  // Return root state
+  return rootStore;
+};
+
+// TODO: Remove deprecated fields in `Subscription`
 
-/**
- * Class representing a stage that updates every frame.
- * Stages are used to build a lifecycle of effects for an app's frameloop.
+/**
+ * Class representing a stage that updates every frame.
+ * Stages are used to build a lifecycle of effects for an app's frameloop.
  */
 class Stage {
   constructor() {
     this.subscribers = [];
     this._frameTime = 0;
   }
-  /**
-   * Executes all callback subscriptions on the stage.
-   * @param delta - Delta time between frame calls.
-   * @param [frame] - The XR frame if it exists.
-   */
-
 
+  /**
+   * Executes all callback subscriptions on the stage.
+   * @param delta - Delta time between frame calls.
+   * @param [frame] - The XR frame if it exists.
+   */
   frame(delta, frame) {
     const subs = this.subscribers;
     const initialTime = performance.now();
-
     for (let i = 0; i < subs.length; i++) {
       subs[i].ref.current(subs[i].store.getState(), delta, frame);
     }
-
     this._frameTime = performance.now() - initialTime;
   }
-  /**
-   * Adds a callback subscriber to the stage.
-   * @param ref - The mutable callback reference.
-   * @param store - The store to be used with the callback execution.
-   * @returns A function to remove the subscription.
-   */
-
 
+  /**
+   * Adds a callback subscriber to the stage.
+   * @param ref - The mutable callback reference.
+   * @param store - The store to be used with the callback execution.
+   * @returns A function to remove the subscription.
+   */
   add(ref, store) {
     this.subscribers.push({
       ref,
@@ -1544,21 +1566,20 @@ class Stage {
       });
     };
   }
-
   get frameTime() {
     return this._frameTime;
   }
+}
 
-} // Using Unity's fixedStep default.
-
+// Using Unity's fixedStep default.
 const FPS_50 = 1 / 50;
-/**
- * Class representing a stage that updates every frame at a fixed rate.
- * @param name - Name of the stage.
- * @param [fixedStep] - Fixed step rate.
- * @param [maxSubsteps] - Maximum number of substeps.
- */
 
+/**
+ * Class representing a stage that updates every frame at a fixed rate.
+ * @param name - Name of the stage.
+ * @param [fixedStep] - Fixed step rate.
+ * @param [maxSubsteps] - Maximum number of substeps.
+ */
 class FixedStage extends Stage {
   constructor(fixedStep, maxSubSteps) {
     super();
@@ -1569,74 +1590,62 @@ class FixedStage extends Stage {
     this._fixedFrameTime = 0;
     this._substepTimes = [];
   }
-  /**
-   * Executes all callback subscriptions on the stage.
-   * @param delta - Delta time between frame calls.
-   * @param [frame] - The XR frame if it exists.
-   */
-
 
+  /**
+   * Executes all callback subscriptions on the stage.
+   * @param delta - Delta time between frame calls.
+   * @param [frame] - The XR frame if it exists.
+   */
   frame(delta, frame) {
     const initialTime = performance.now();
     let substeps = 0;
     this._substepTimes = [];
     this._accumulator += delta;
-
     while (this._accumulator >= this._fixedStep && substeps < this._maxSubsteps) {
       this._accumulator -= this._fixedStep;
       substeps++;
       super.frame(this._fixedStep, frame);
-
       this._substepTimes.push(super.frameTime);
     }
+    this._fixedFrameTime = performance.now() - initialTime;
 
-    this._fixedFrameTime = performance.now() - initialTime; // The accumulator will only be larger than the fixed step if we had to
+    // The accumulator will only be larger than the fixed step if we had to
     // bail early due to hitting the max substep limit or execution time lagging.
     // In that case, we want to shave off the excess so we don't fall behind next frame.
-
     this._accumulator = this._accumulator % this._fixedStep;
     this._alpha = this._accumulator / this._fixedStep;
   }
-
   get frameTime() {
     return this._fixedFrameTime;
   }
-
   get substepTimes() {
     return this._substepTimes;
   }
-
   get fixedStep() {
     return this._fixedStep;
   }
-
   set fixedStep(fixedStep) {
     this._fixedStep = fixedStep;
   }
-
   get maxSubsteps() {
     return this._maxSubsteps;
   }
-
   set maxSubsteps(maxSubsteps) {
     this._maxSubsteps = maxSubsteps;
   }
-
   get accumulator() {
     return this._accumulator;
   }
-
   get alpha() {
     return this._alpha;
   }
-
 }
-const Early = new Stage();
-const Fixed = new FixedStage();
-const Update = new Stage();
-const Late = new Stage();
-const Render = new Stage();
-const After = new Stage();
+const Early = /*#__PURE__*/new Stage();
+const Fixed = /*#__PURE__*/new FixedStage();
+const Update = /*#__PURE__*/new Stage();
+const Late = /*#__PURE__*/new Stage();
+const Render = /*#__PURE__*/new Stage();
+const After = /*#__PURE__*/new Stage();
 const Stages = {
   Early,
   Fixed,
@@ -1647,11 +1656,11 @@ const Stages = {
 };
 const Lifecycle = [Early, Fixed, Update, Late, Render, After];
 
-/**
- * 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.
+/**
+ * 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.
  */
 function useInstanceHandle(ref) {
   const instance = React.useRef(null);
@@ -1663,113 +1672,123 @@ function useStore() {
   if (!store) throw new Error('R3F: Hooks can only be used within the Canvas component!');
   return store;
 }
-/**
- * Accesses R3F's internal state, containing renderer, canvas, scene, etc.
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree
- */
 
+/**
+ * Accesses R3F's internal state, containing renderer, canvas, scene, etc.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree
+ */
 function useThree(selector = state => state, equalityFn) {
+  // TODO: fix this type
   return useStore()(selector, equalityFn);
 }
-/**
- * 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
- */
 
+/**
+ * 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
+ */
 function useFrame(callback, renderPriority = 0) {
   const store = useStore();
-  const subscribe = store.getState().internal.subscribe; // Memoize ref
-
-  const ref = useMutableCallback(callback); // Subscribe on mount, unsubscribe on unmount
-
+  const subscribe = store.getState().internal.subscribe;
+  // Memoize ref
+  const ref = useMutableCallback(callback);
+  // Subscribe on mount, unsubscribe on unmount
   useIsomorphicLayoutEffect(() => subscribe(ref, renderPriority, store), [renderPriority, subscribe, store]);
   return null;
 }
-/**
- * Executes a callback in a given update stage.
- * Uses the stage instance to indetify which stage to target in the lifecycle.
- */
 
+/**
+ * Executes a callback in a given update stage.
+ * Uses the stage instance to indetify which stage to target in the lifecycle.
+ */
 function useUpdate(callback, stage = Stages.Update) {
   const store = useStore();
-  const stages = store.getState().internal.stages; // Memoize ref
-
-  const ref = useMutableCallback(callback); // Throw an error if a stage does not exist in the lifecycle
-
-  if (!stages.includes(stage)) throw new Error(`An invoked stage does not exist in the lifecycle.`); // Subscribe on mount, unsubscribe on unmount
-
+  const stages = store.getState().internal.stages;
+  // Memoize ref
+  const ref = useMutableCallback(callback);
+  // Throw an error if a stage does not exist in the lifecycle
+  if (!stages.includes(stage)) throw new Error(`An invoked stage does not exist in the lifecycle.`);
+  // Subscribe on mount, unsubscribe on unmount
   useIsomorphicLayoutEffect(() => stage.add(ref, store), [stage]);
 }
-/**
- * Returns a node graph of an object with named nodes & materials.
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usegraph
- */
 
+/**
+ * Returns a node graph of an object with named nodes & materials.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usegraph
+ */
 function useGraph(object) {
   return React.useMemo(() => buildGraph(object), [object]);
 }
-
+const memoizedLoaders = new WeakMap();
+const isConstructor = value => {
+  var _value$prototype;
+  return typeof value === 'function' && (value == null ? void 0 : (_value$prototype = value.prototype) == null ? void 0 : _value$prototype.constructor) === value;
+};
 function loadingFn(extensions, onProgress) {
-  return function (Proto, ...input) {
-    // Construct new loader and run extensions
-    const loader = new Proto();
-    if (extensions) extensions(loader); // Go through the urls and load them
-
-    return Promise.all(input.map(input => new Promise((res, reject) => loader.load(input, data => {
-      if (data.scene) Object.assign(data, buildGraph(data.scene));
-      res(data);
-    }, onProgress, error => reject(new Error(`Could not load ${input}: ${error.message})`))))));
+  return async function (Proto, ...input) {
+    let loader;
+
+    // Construct and cache loader if constructor was passed
+    if (isConstructor(Proto)) {
+      loader = memoizedLoaders.get(Proto);
+      if (!loader) {
+        loader = new Proto();
+        memoizedLoaders.set(Proto, loader);
+      }
+    } else {
+      loader = Proto;
+    }
+
+    // Apply loader extensions
+    if (extensions) extensions(loader);
+
+    // Go through the urls and load them
+    return Promise.all(input.map(input => new Promise((res, reject) => loader.load(input, data => res(isObject3D(data == null ? void 0 : data.scene) ? Object.assign(data, buildGraph(data.scene)) : data), onProgress, error => reject(new Error(`Could not load ${input}: ${error == null ? void 0 : error.message}`))))));
   };
 }
-/**
- * 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
+/**
+ * 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
  */
-
-
-function useLoader(Proto, input, extensions, onProgress) {
+function useLoader(loader, input, extensions, onProgress) {
   // Use suspense to load async assets
   const keys = Array.isArray(input) ? input : [input];
-  const results = suspend(loadingFn(extensions, onProgress), [Proto, ...keys], {
+  const results = suspend(loadingFn(extensions, onProgress), [loader, ...keys], {
     equal: is.equ
-  }); // Return the object/s
-
+  });
+  // Return the object(s)
   return Array.isArray(input) ? results : results[0];
 }
-/**
- * Preloads an asset into cache as a side-effect.
- */
 
-useLoader.preload = function (Proto, input, extensions) {
+/**
+ * Preloads an asset into cache as a side-effect.
+ */
+useLoader.preload = function (loader, input, extensions) {
   const keys = Array.isArray(input) ? input : [input];
-  return preload(loadingFn(extensions), [Proto, ...keys]);
+  return preload(loadingFn(extensions), [loader, ...keys]);
 };
-/**
- * Removes a loaded asset from cache.
- */
-
 
-useLoader.clear = function (Proto, input) {
+/**
+ * Removes a loaded asset from cache.
+ */
+useLoader.clear = function (loader, input) {
   const keys = Array.isArray(input) ? input : [input];
-  return clear([Proto, ...keys]);
+  return clear([loader, ...keys]);
 };
 
-const roots = new Map();
-const {
-  invalidate,
-  advance
-} = createLoop(roots);
+// TODO: fix type resolve
+
+const _roots = new Map();
 const shallowLoose = {
   objects: 'shallow',
   strict: false
 };
-
 const createRendererInstance = (gl, canvas) => {
   const customRenderer = typeof gl === 'function' ? gl(canvas) : gl;
-  if (isRenderer(customRenderer)) return customRenderer;else return new THREE.WebGLRenderer({
+  if (isRenderer(customRenderer)) return customRenderer;
+  return new THREE.WebGLRenderer({
     powerPreference: 'high-performance',
     canvas: canvas,
     antialias: true,
@@ -1777,44 +1796,42 @@ const createRendererInstance = (gl, canvas) => {
     ...gl
   });
 };
-
 const createStages = (stages, store) => {
   const state = store.getState();
   let subscribers;
   let subscription;
-
   const _stages = stages != null ? stages : Lifecycle;
-
   if (!_stages.includes(Stages.Update)) throw 'The Stages.Update stage is required for R3F.';
   if (!_stages.includes(Stages.Render)) throw 'The Stages.Render stage is required for R3F.';
   state.set(({
     internal
   }) => ({
-    internal: { ...internal,
+    internal: {
+      ...internal,
       stages: _stages
     }
-  })); // Add useFrame loop to update stage
+  }));
 
+  // Add useFrame loop to update stage
   const frameCallback = {
-    current: (state, delta, frame) => {
+    current(state, delta, frame) {
       subscribers = state.internal.subscribers;
-
       for (let i = 0; i < subscribers.length; i++) {
         subscription = subscribers[i];
         subscription.ref.current(subscription.store.getState(), delta, frame);
       }
     }
   };
-  Stages.Update.add(frameCallback, store); // Add render callback to render stage
+  Stages.Update.add(frameCallback, store);
 
+  // Add render callback to render stage
   const renderCallback = {
-    current: state => {
+    current(state) {
       if (state.internal.render === 'auto' && state.gl.render) state.gl.render(state.scene, state.camera);
     }
   };
   Stages.Render.add(renderCallback, store);
 };
-
 function computeInitialSize(canvas, size) {
   if (!size && canvas instanceof HTMLCanvasElement && canvas.parentElement) {
     const {
@@ -1829,8 +1846,14 @@ function computeInitialSize(canvas, size) {
       top,
       left
     };
+  } else if (!size && typeof OffscreenCanvas !== 'undefined' && canvas instanceof OffscreenCanvas) {
+    return {
+      width: canvas.width,
+      height: canvas.height,
+      top: 0,
+      left: 0
+    };
   }
-
   return {
     width: 0,
     height: 0,
@@ -1839,36 +1862,61 @@ function computeInitialSize(canvas, size) {
     ...size
   };
 }
-
 function createRoot(canvas) {
   // Check against mistaken use of createRoot
-  const prevRoot = roots.get(canvas);
+  const prevRoot = _roots.get(canvas);
   const prevFiber = prevRoot == null ? void 0 : prevRoot.fiber;
   const prevStore = prevRoot == null ? void 0 : prevRoot.store;
-  if (prevRoot) console.warn('R3F.createRoot should only be called once!'); // Report when an error was detected in a previous render
-  // https://github.com/pmndrs/react-three-fiber/pull/2261
+  if (prevRoot) console.warn('R3F.createRoot should only be called once!');
 
-  const logRecoverableError = typeof reportError === 'function' ? // In modern browsers, reportError will dispatch an error event,
+  // Report when an error was detected in a previous render
+  // https://github.com/pmndrs/react-three-fiber/pull/2261
+  const logRecoverableError = typeof reportError === 'function' ?
+  // In modern browsers, reportError will dispatch an error event,
   // emulating an uncaught JavaScript error.
-  reportError : // In older browsers and test environments, fallback to console.error.
-  console.error; // Create store
-
-  const store = prevStore || createStore(invalidate, advance); // Create renderer
-
-  const fiber = prevFiber || reconciler.createContainer(store, ConcurrentRoot, null, false, null, '', logRecoverableError, null); // Map it
-
-  if (!prevRoot) roots.set(canvas, {
+  reportError :
+  // In older browsers and test environments, fallback to console.error.
+  console.error;
+
+  // Create store
+  const store = prevStore || createStore(invalidate, advance);
+  // Create renderer
+  const fiber = prevFiber || reconciler.createContainer(store,
+  // container
+  ConcurrentRoot,
+  // tag
+  null,
+  // hydration callbacks
+  false,
+  // isStrictMode
+  null,
+  // concurrentUpdatesByDefaultOverride
+  '',
+  // identifierPrefix
+  logRecoverableError,
+  // onUncaughtError
+  logRecoverableError,
+  // onCaughtError
+  logRecoverableError,
+  // onRecoverableError
+  null // transitionCallbacks
+  );
+  // Map it
+  if (!prevRoot) _roots.set(canvas, {
     fiber,
     store
-  }); // Locals
+  });
 
+  // Locals
   let onCreated;
   let configured = false;
+  let lastCamera;
   return {
     configure(props = {}) {
       let {
         gl: glConfig,
         size: propsSize,
+        scene: sceneOptions,
         events,
         onCreated: onCreatedCallback,
         shadows = false,
@@ -1884,102 +1932,149 @@ function createRoot(canvas) {
         onPointerMissed,
         stages
       } = props;
-      let state = store.getState(); // Set up renderer (one time only!)
+      let state = store.getState();
 
+      // Set up renderer (one time only!)
       let gl = state.gl;
       if (!state.gl) state.set({
         gl: gl = createRendererInstance(glConfig, canvas)
-      }); // Set up raycaster (one time only!)
+      });
 
+      // Set up raycaster (one time only!)
       let raycaster = state.raycaster;
       if (!raycaster) state.set({
         raycaster: raycaster = new THREE.Raycaster()
-      }); // Set raycaster options
+      });
 
+      // Set raycaster options
       const {
         params,
         ...options
       } = raycastOptions || {};
-      if (!is.equ(options, raycaster, shallowLoose)) applyProps(raycaster, { ...options
+      if (!is.equ(options, raycaster, shallowLoose)) applyProps(raycaster, {
+        ...options
       });
       if (!is.equ(params, raycaster.params, shallowLoose)) applyProps(raycaster, {
-        params: { ...raycaster.params,
+        params: {
+          ...raycaster.params,
           ...params
         }
-      }); // Create default camera (one time only!)
+      });
 
-      if (!state.camera) {
+      // Create default camera, don't overwrite any user-set state
+      if (!state.camera || state.camera === lastCamera && !is.equ(lastCamera, cameraOptions, shallowLoose)) {
+        lastCamera = cameraOptions;
         const isCamera = cameraOptions instanceof THREE.Camera;
         const camera = isCamera ? cameraOptions : orthographic ? new THREE.OrthographicCamera(0, 0, 0, 0, 0.1, 1000) : new THREE.PerspectiveCamera(75, 0, 0.1, 1000);
-
         if (!isCamera) {
           camera.position.z = 5;
-          if (cameraOptions) applyProps(camera, cameraOptions); // Always look at center by default
-
-          if (!(cameraOptions != null && cameraOptions.rotation)) camera.lookAt(0, 0, 0);
+          if (cameraOptions) applyProps(camera, cameraOptions);
+          // Always look at center by default
+          if (!state.camera && !(cameraOptions != null && cameraOptions.rotation)) camera.lookAt(0, 0, 0);
         }
-
         state.set({
           camera
         });
-      } // Set up XR (one time only!)
 
+        // Configure raycaster
+        // https://github.com/pmndrs/react-xr/issues/300
+        raycaster.camera = camera;
+      }
+
+      // Set up scene (one time only!)
+      if (!state.scene) {
+        let scene;
+        if (sceneOptions instanceof THREE.Scene) {
+          scene = sceneOptions;
+          prepare(scene, store, '', {});
+        } else {
+          scene = new THREE.Scene();
+          prepare(scene, store, '', {});
+          if (sceneOptions) applyProps(scene, sceneOptions);
+        }
+        state.set({
+          scene
+        });
+      }
 
+      // Set up XR (one time only!)
       if (!state.xr) {
         // Handle frame behavior in WebXR
         const handleXRFrame = (timestamp, frame) => {
           const state = store.getState();
           if (state.frameloop === 'never') return;
           advance(timestamp, true, state, frame);
-        }; // Toggle render switching on session
-
+        };
 
+        // Toggle render switching on session
         const handleSessionChange = () => {
           const state = store.getState();
           state.gl.xr.enabled = state.gl.xr.isPresenting;
           state.gl.xr.setAnimationLoop(state.gl.xr.isPresenting ? handleXRFrame : null);
           if (!state.gl.xr.isPresenting) invalidate(state);
-        }; // WebXR session manager
-
+        };
 
+        // WebXR session manager
         const xr = {
           connect() {
             const gl = store.getState().gl;
             gl.xr.addEventListener('sessionstart', handleSessionChange);
             gl.xr.addEventListener('sessionend', handleSessionChange);
           },
-
           disconnect() {
             const gl = store.getState().gl;
             gl.xr.removeEventListener('sessionstart', handleSessionChange);
             gl.xr.removeEventListener('sessionend', handleSessionChange);
           }
+        };
 
-        }; // Subscribe to WebXR session events
-
+        // Subscribe to WebXR session events
         if (gl.xr) xr.connect();
         state.set({
           xr
         });
-      } // Set shadowmap
-
+      }
 
+      // Set shadowmap
       if (gl.shadowMap) {
-        const isBoolean = is.boo(shadows);
-
-        if (isBoolean && gl.shadowMap.enabled !== shadows || !is.equ(shadows, gl.shadowMap, shallowLoose)) {
-          const old = gl.shadowMap.enabled;
-          gl.shadowMap.enabled = !!shadows;
-          if (!isBoolean) Object.assign(gl.shadowMap, shadows);else gl.shadowMap.type = THREE.PCFSoftShadowMap;
-          if (old !== gl.shadowMap.enabled) gl.shadowMap.needsUpdate = true;
+        const oldEnabled = gl.shadowMap.enabled;
+        const oldType = gl.shadowMap.type;
+        gl.shadowMap.enabled = !!shadows;
+        if (is.boo(shadows)) {
+          gl.shadowMap.type = THREE.PCFSoftShadowMap;
+        } else if (is.str(shadows)) {
+          var _types$shadows;
+          const types = {
+            basic: THREE.BasicShadowMap,
+            percentage: THREE.PCFShadowMap,
+            soft: THREE.PCFSoftShadowMap,
+            variance: THREE.VSMShadowMap
+          };
+          gl.shadowMap.type = (_types$shadows = types[shadows]) != null ? _types$shadows : THREE.PCFSoftShadowMap;
+        } else if (is.obj(shadows)) {
+          Object.assign(gl.shadowMap, shadows);
         }
-      } // Set color management
-      THREE.ColorManagement.legacyMode = legacy;
-      const outputEncoding = linear ? THREE.LinearEncoding : THREE.sRGBEncoding;
-      const toneMapping = flat ? THREE.NoToneMapping : THREE.ACESFilmicToneMapping;
-      if (gl.outputEncoding !== outputEncoding) gl.outputEncoding = outputEncoding;
-      if (gl.toneMapping !== toneMapping) gl.toneMapping = toneMapping; // Update color management state
+        if (oldEnabled !== gl.shadowMap.enabled || oldType !== gl.shadowMap.type) gl.shadowMap.needsUpdate = true;
+      }
+
+      // Safely set color management if available.
+      // Avoid accessing THREE.ColorManagement to play nice with older versions
+      const ColorManagement = getColorManagement();
+      if (ColorManagement) {
+        if ('enabled' in ColorManagement) ColorManagement.enabled = !legacy;else if ('legacyMode' in ColorManagement) ColorManagement.legacyMode = legacy;
+      }
 
+      // Set color space and tonemapping preferences
+      if (!configured) {
+        const LinearEncoding = 3000;
+        const sRGBEncoding = 3001;
+        applyProps(gl, {
+          outputEncoding: linear ? LinearEncoding : sRGBEncoding,
+          toneMapping: flat ? THREE.NoToneMapping : THREE.ACESFilmicToneMapping
+        });
+      }
+
+      // Update color management state
       if (state.legacy !== legacy) state.set(() => ({
         legacy
       }));
@@ -1988,42 +2083,43 @@ function createRoot(canvas) {
       }));
       if (state.flat !== flat) state.set(() => ({
         flat
-      })); // Set gl props
-
-      if (glConfig && !is.fun(glConfig) && !isRenderer(glConfig) && !is.equ(glConfig, gl, shallowLoose)) applyProps(gl, glConfig); // Store events internally
+      }));
 
+      // Set gl props
+      if (glConfig && !is.fun(glConfig) && !isRenderer(glConfig) && !is.equ(glConfig, gl, shallowLoose)) applyProps(gl, glConfig);
+      // Store events internally
       if (events && !state.events.handlers) state.set({
         events: events(store)
-      }); // Check pixelratio
-
-      if (dpr && state.viewport.dpr !== calculateDpr(dpr)) state.setDpr(dpr); // Check size, allow it to take on container bounds initially
-
+      });
+      // Check size, allow it to take on container bounds initially
       const size = computeInitialSize(canvas, propsSize);
-
       if (!is.equ(size, state.size, shallowLoose)) {
         state.setSize(size.width, size.height, size.top, size.left);
-      } // Check frameloop
-
-
-      if (state.frameloop !== frameloop) state.setFrameloop(frameloop); // Check pointer missed
-
+      }
+      // Check pixelratio
+      if (dpr && state.viewport.dpr !== calculateDpr(dpr)) state.setDpr(dpr);
+      // Check frameloop
+      if (state.frameloop !== frameloop) state.setFrameloop(frameloop);
+      // Check pointer missed
       if (!state.onPointerMissed) state.set({
         onPointerMissed
-      }); // Check performance
-
+      });
+      // Check performance
       if (performance && !is.equ(performance, state.performance, shallowLoose)) state.set(state => ({
-        performance: { ...state.performance,
+        performance: {
+          ...state.performance,
           ...performance
         }
-      })); // Create update stages. Only do this once on init
+      }));
 
-      if (state.internal.stages.length === 0) createStages(stages, store); // Set locals
+      // Create update stages. Only do this once on init
+      if (state.internal.stages.length === 0) createStages(stages, store);
 
+      // Set locals
       onCreated = onCreatedCallback;
       configured = true;
       return this;
     },
-
     render(children) {
       // The root has to be configured before it can be rendered
       if (!configured) this.configure();
@@ -2035,21 +2131,17 @@ function createRoot(canvas) {
       }), fiber, null, () => undefined);
       return store;
     },
-
     unmount() {
       unmountComponentAtNode(canvas);
     }
-
   };
 }
-
 function render(children, canvas, config) {
   console.warn('R3F.render is no longer supported in React 18. Use createRoot instead!');
   const root = createRoot(canvas);
   root.configure(config);
   return root.render(children);
 }
-
 function Provider({
   store,
   children,
@@ -2057,28 +2149,28 @@ function Provider({
   rootElement
 }) {
   useIsomorphicLayoutEffect(() => {
-    const state = store.getState(); // Flag the canvas active, rendering will now begin
-
+    const state = store.getState();
+    // Flag the canvas active, rendering will now begin
     state.set(state => ({
-      internal: { ...state.internal,
+      internal: {
+        ...state.internal,
         active: true
       }
-    })); // Notifiy that init is completed, the scene graph exists, but nothing has yet rendered
-
-    if (onCreated) onCreated(state); // Connect events to the targets parent, this is done to ensure events are registered on
+    }));
+    // Notifiy that init is completed, the scene graph exists, but nothing has yet rendered
+    if (onCreated) onCreated(state);
+    // Connect events to the targets parent, this is done to ensure events are registered on
     // a shared target, and not on the canvas itself
-
-    if (!store.getState().events.connected) state.events.connect == null ? void 0 : state.events.connect(rootElement); // eslint-disable-next-line react-hooks/exhaustive-deps
+    if (!store.getState().events.connected) state.events.connect == null ? void 0 : state.events.connect(rootElement);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return /*#__PURE__*/React.createElement(context.Provider, {
     value: store
   }, children);
 }
-
 function unmountComponentAtNode(canvas, callback) {
-  const root = roots.get(canvas);
+  const root = _roots.get(canvas);
   const fiber = root == null ? void 0 : root.fiber;
-
   if (fiber) {
     const state = root == null ? void 0 : root.store.getState();
     if (state) state.internal.active = false;
@@ -2087,13 +2179,12 @@ function unmountComponentAtNode(canvas, callback) {
         setTimeout(() => {
           try {
             var _state$gl, _state$gl$renderLists, _state$gl2, _state$gl3;
-
             state.events.disconnect == null ? void 0 : state.events.disconnect();
             (_state$gl = state.gl) == null ? void 0 : (_state$gl$renderLists = _state$gl.renderLists) == null ? void 0 : _state$gl$renderLists.dispose == null ? void 0 : _state$gl$renderLists.dispose();
             (_state$gl2 = state.gl) == null ? void 0 : _state$gl2.forceContextLoss == null ? void 0 : _state$gl2.forceContextLoss();
             if ((_state$gl3 = state.gl) != null && _state$gl3.xr) state.xr.disconnect();
             dispose(state.scene);
-            roots.delete(canvas);
+            _roots.delete(canvas);
             if (callback) callback(canvas);
           } catch (e) {
             /* ... */
@@ -2103,25 +2194,22 @@ function unmountComponentAtNode(canvas, callback) {
     });
   }
 }
-
 function createPortal(children, container, state) {
   return /*#__PURE__*/React.createElement(Portal, {
-    key: container.uuid,
     children: children,
     container: container,
     state: state
   });
 }
-
 function Portal({
   state = {},
   children,
   container
 }) {
-  /** This has to be a component because it would not be able to call useThree/useStore otherwise since
-   *  if this is our environment, then we are not in r3f's renderer but in react-dom, it would trigger
-   *  the "R3F hooks can only be used within the Canvas component!" warning:
-   *  <Canvas>
+  /** This has to be a component because it would not be able to call useThree/useStore otherwise since
+   *  if this is our environment, then we are not in r3f's renderer but in react-dom, it would trigger
+   *  the "R3F hooks can only be used within the Canvas component!" warning:
+   *  <Canvas>
    *    {createPortal(...)} */
   const {
     events,
@@ -2131,32 +2219,20 @@ function Portal({
   const previousRoot = useStore();
   const [raycaster] = React.useState(() => new THREE.Raycaster());
   const [pointer] = React.useState(() => new THREE.Vector2());
-  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 && 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
-
+  const inject = useMutableCallback((rootState, injectState) => {
+    let viewport;
+    if (injectState.camera && 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 { // The intersect consists of the previous root state
-      ...intersect,
+    return {
+      // The intersect consists of the previous root state
+      ...rootState,
+      get: injectState.get,
+      set: injectState.set,
       // Portals have their own scene, which forms the root, a raycaster and a pointer
       scene: container,
       raycaster,
@@ -2165,72 +2241,194 @@ function Portal({
       // 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),
+      events: {
+        ...rootState.events,
+        ...injectState.events,
         ...events
       },
-      size: { ...rootState.size,
+      size: {
+        ...rootState.size,
         ...size
       },
-      viewport: { ...rootState.viewport,
+      viewport: {
+        ...rootState.viewport,
         ...viewport
       },
-      ...rest
-    };
-  }, [state]);
-  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,
+      setEvents: events => injectState.set(state => ({
+        ...state,
+        events: {
+          ...state.events,
           ...events
         }
       }))
-    }));
-    return store;
+    };
   });
-  React.useEffect(() => {
+  const usePortalStore = React.useMemo(() => {
+    const store = create((set, get) => ({
+      ...rest,
+      set,
+      get
+    }));
+
     // 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]);
+    const onMutate = prev => store.setState(state => inject.current(prev, state));
+    onMutate(previousRoot.getState());
+    previousRoot.subscribe(onMutate);
+    return store;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [previousRoot, container]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, reconciler.createPortal( /*#__PURE__*/React.createElement(context.Provider, {
     value: usePortalStore
   }, children), usePortalStore, null));
 }
-
 reconciler.injectIntoDevTools({
   bundleType: process.env.NODE_ENV === 'production' ? 0 : 1,
   rendererPackageName: '@react-three/fiber',
   version: React.version
 });
 
-/**
- * Safely flush async effects when testing, simulating a legacy root.
+function createSubs(callback, subs) {
+  const sub = {
+    callback
+  };
+  subs.add(sub);
+  return () => void subs.delete(sub);
+}
+const globalEffects = new Set();
+const globalAfterEffects = new Set();
+const globalTailEffects = new Set();
+
+/**
+ * Adds a global render callback which is called each frame.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
+ */
+const addEffect = callback => createSubs(callback, globalEffects);
+
+/**
+ * Adds a global after-render callback which is called each frame.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addAfterEffect
+ */
+const addAfterEffect = callback => createSubs(callback, globalAfterEffects);
+
+/**
+ * Adds a global callback which is called when rendering stops.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addTail
+ */
+const addTail = callback => createSubs(callback, globalTailEffects);
+function run(effects, timestamp) {
+  if (!effects.size) return;
+  for (const {
+    callback
+  } of effects.values()) {
+    callback(timestamp);
+  }
+}
+function flushGlobalEffects(type, timestamp) {
+  switch (type) {
+    case 'before':
+      return run(globalEffects, timestamp);
+    case 'after':
+      return run(globalAfterEffects, timestamp);
+    case 'tail':
+      return run(globalTailEffects, timestamp);
+  }
+}
+function update(timestamp, state, frame) {
+  // Run local effects
+  let delta = state.clock.getDelta();
+  // In frameloop='never' mode, clock times are updated using the provided timestamp
+  if (state.frameloop === 'never' && typeof timestamp === 'number') {
+    delta = timestamp - state.clock.elapsedTime;
+    state.clock.oldTime = state.clock.elapsedTime;
+    state.clock.elapsedTime = timestamp;
+  } else {
+    delta = Math.max(Math.min(delta, state.internal.maxDelta), 0);
+  }
+  // Call subscribers (useUpdate)
+  for (const stage of state.internal.stages) {
+    stage.frame(delta, frame);
+  }
+  state.internal.frames = Math.max(0, state.internal.frames - 1);
+  return state.frameloop === 'always' ? 1 : state.internal.frames;
+}
+let running = false;
+let useFrameInProgress = false;
+let repeat;
+let frame;
+let state;
+function loop(timestamp) {
+  frame = requestAnimationFrame(loop);
+  running = true;
+  repeat = 0;
+
+  // Run effects
+  flushGlobalEffects('before', timestamp);
+
+  // Render all roots
+  useFrameInProgress = true;
+  for (const root of _roots.values()) {
+    var _state$gl$xr;
+    state = root.store.getState();
+
+    // If the frameloop is invalidated, do not run another frame
+    if (state.internal.active && (state.frameloop === 'always' || state.internal.frames > 0) && !((_state$gl$xr = state.gl.xr) != null && _state$gl$xr.isPresenting)) {
+      repeat += update(timestamp, state);
+    }
+  }
+  useFrameInProgress = true;
+
+  // Run after-effects
+  flushGlobalEffects('after', timestamp);
+
+  // Stop the loop if nothing invalidates it
+  if (repeat === 0) {
+    // Tail call effects, they are called when rendering stops
+    flushGlobalEffects('tail', timestamp);
+
+    // Flag end of operation
+    running = false;
+    return cancelAnimationFrame(frame);
+  }
+}
+
+/**
+ * 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
+ */
+function invalidate(state, frames = 1) {
+  var _state$gl$xr2;
+  if (!state) return _roots.forEach(root => invalidate(root.store.getState(), frames));
+  if ((_state$gl$xr2 = state.gl.xr) != null && _state$gl$xr2.isPresenting || !state.internal.active || state.frameloop === 'never') return;
+  if (frames > 1) {
+    // legacy support for people using frames parameters
+    // Increase frames, do not go higher than 60
+    state.internal.frames = Math.min(60, state.internal.frames + frames);
+  } else {
+    if (useFrameInProgress) {
+      //called from within a useFrame, it means the user wants an additional frame
+      state.internal.frames = 2;
+    } else {
+      //the user need a new frame, no need to increment further than 1
+      state.internal.frames = 1;
+    }
+  }
+
+  // If the render-loop isn't active, start it
+  if (!running) {
+    running = true;
+    requestAnimationFrame(loop);
+  }
+}
+
+/**
+ * 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
  */
-const act = React.unstable_act;
+function advance(timestamp, runGlobalEffects = true, state, frame) {
+  if (runGlobalEffects) flushGlobalEffects('before', timestamp);
+  if (!state) for (const root of _roots.values()) update(timestamp, root.store.getState());else update(timestamp, state, frame);
+  if (runGlobalEffects) flushGlobalEffects('after', timestamp);
+}
 
-export { useUpdate as A, Block as B, useGraph as C, useLoader as D, ErrorBoundary as E, FixedStage as F, Stage as S, createRoot as a, useIsomorphicLayoutEffect as b, createEvents as c, unmountComponentAtNode as d, extend as e, Stages as f, context as g, createPortal as h, isRef as i, reconciler as j, applyProps as k, dispose as l, invalidate as m, advance as n, addEffect as o, addAfterEffect as p, addTail as q, render as r, getRootState as s, act as t, useMutableCallback as u, roots as v, useInstanceHandle as w, useStore as x, useThree as y, useFrame as z };
+export { useStore as A, Block as B, useThree as C, useFrame as D, ErrorBoundary as E, FixedStage as F, useUpdate as G, useGraph as H, useLoader as I, Stage as S, _roots as _, useMutableCallback as a, useIsomorphicLayoutEffect as b, createEvents as c, createRoot as d, extend as e, unmountComponentAtNode as f, flushGlobalEffects as g, addEffect as h, isRef as i, addAfterEffect as j, addTail as k, invalidate as l, advance as m, render as n, createPortal as o, Stages as p, context as q, reconciler as r, applyProps as s, threeTypes as t, useBridge as u, getRootState as v, dispose as w, act as x, buildGraph as y, useInstanceHandle as z };