@react-three/fiber 9.0.0-rc.1 → 9.0.0-rc.10

package/dist/{events-26d2636c.esm.js → events-aba3c3d1.esm.js}

@@ -1,863 +1,425 @@
 import * as THREE from 'three';
 import * as React from 'react';
-import { NoEventPriority, DefaultEventPriority, ContinuousEventPriority, DiscreteEventPriority, ConcurrentRoot } from 'react-reconciler/constants';
+import { DefaultEventPriority, ContinuousEventPriority, DiscreteEventPriority, ConcurrentRoot } from 'react-reconciler/constants';
 import { createWithEqualityFn } from 'zustand/traditional';
+import Reconciler from 'react-reconciler';
+import { unstable_scheduleCallback, unstable_IdlePriority } from 'scheduler';
 import { suspend, preload, clear } from 'suspend-react';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { useFiber, useContextBridge, traverseFiber } from 'its-fine';
-import Reconciler from 'react-reconciler';
-import { unstable_scheduleCallback, unstable_IdlePriority } from 'scheduler';
 
 var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
-// TODO: upstream to DefinitelyTyped for React 19
-// https://github.com/facebook/react/issues/28956
-
-const createReconciler = Reconciler;
-
-// 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 isConstructor$1 = object => typeof object === 'function';
-function extend(objects) {
-  if (isConstructor$1(objects)) {
-    const Component = `${i++}`;
-    catalogue[Component] = objects;
-    return Component;
-  } else {
-    Object.assign(catalogue, objects);
-  }
+/**
+ * Returns the instance's initial (outmost) root.
+ */
+function findInitialRoot(instance) {
+  let root = instance.root;
+  while (root.getState().previousRoot) root = root.getState().previousRoot;
+  return root;
 }
-function validateInstance(type, props) {
-  // 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`);
+/**
+ * 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');
+const isColorRepresentation = value => value != null && (typeof value === 'string' || typeof value === 'number' || value.isColor);
 
-  // Validate primitives
-  if (type === 'primitive' && !props.object) throw new Error(`R3F: Primitives without 'object' are invalid!`);
+/**
+ * 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 = /* @__PURE__ */((_window$document, _window$navigator) => typeof window !== 'undefined' && (((_window$document = window.document) == null ? void 0 : _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__*/jsx(Root, {
+      children: /*#__PURE__*/jsx(ContextBridge, {
+        children: children
+      })
+    });
+  }, [fiber, ContextBridge]);
+}
+function Block({
+  set
+}) {
+  useIsomorphicLayoutEffect(() => {
+    set(new Promise(() => null));
+    return () => set(false);
+  }, [set]);
+  return null;
+}
 
-  // 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!');
+// NOTE: static members get down-level transpiled to mutations which break tree-shaking
+const ErrorBoundary = /* @__PURE__ */(_ErrorBoundary => (_ErrorBoundary = class ErrorBoundary extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      error: false
+    };
+  }
+  componentDidCatch(err) {
+    this.props.set(err);
+  }
+  render() {
+    return this.state.error ? null : this.props.children;
+  }
+}, _ErrorBoundary.getDerivedStateFromError = () => ({
+  error: true
+}), _ErrorBoundary))();
+function calculateDpr(dpr) {
+  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;
 }
-function createInstance(type, props, root) {
-  var _props$object;
-  validateInstance(type, props);
 
-  // Regenerate the R3F instance for primitives to simulate a new object
-  if (type === 'primitive' && (_props$object = props.object) != null && _props$object.__r3f) delete props.object.__r3f;
-  return prepare(props.object, root, type, props);
+/**
+ * Returns instance root state
+ */
+function getRootState(obj) {
+  var _r3f;
+  return (_r3f = obj.__r3f) == null ? void 0 : _r3f.root.getState();
 }
-function hideInstance(instance) {
-  if (!instance.isHidden) {
-    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;
+// A collection of compare functions
+const is = {
+  obj: a => a === Object(a) && !is.arr(a) && typeof a !== 'function',
+  fun: a => typeof a === 'function',
+  str: a => typeof a === 'string',
+  num: a => typeof a === 'number',
+  boo: a => typeof a === 'boolean',
+  und: a => a === void 0,
+  nul: a => a === null,
+  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 (is.str(a) || is.num(a) || is.boo(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
+    let i;
+    // Check if a has all the keys of b
+    for (i in a) if (!(i in b)) 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;
     }
-    instance.isHidden = true;
-    invalidateInstance(instance);
+    // 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
+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;
 }
-function 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);
+// 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'];
 
-// 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];
+// 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;
+}
 
-    // 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;
+// Each object in the scene carries a small LocalState descriptor
+function prepare(target, root, type, props) {
+  const object = target;
 
-    // Set initial props
-    applyProps(child.object, child.props);
+  // Create instance descriptor
+  let instance = object == null ? void 0 : object.__r3f;
+  if (!instance) {
+    instance = {
+      root,
+      type,
+      parent: null,
+      children: [],
+      props: getInstanceProps(props),
+      object,
+      eventCount: 0,
+      handlers: {},
+      isHidden: false
+    };
+    if (object) object.__r3f = instance;
   }
+  return instance;
+}
+function resolve(root, key) {
+  var _target;
+  let target = root[key];
+  if (!key.includes('-')) return {
+    root,
+    key,
+    target
+  };
 
-  // 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);
+  // Resolve pierced target
+  const chain = key.split('-');
+  target = chain.reduce((acc, key) => acc[key], root);
+  key = chain.pop();
 
-  // Tree was updated, request a frame
-  invalidateInstance(child);
+  // Switch root if atomic
+  if (!((_target = target) != null && _target.set)) root = chain.reduce((acc, key) => acc[key], root);
+  return {
+    root,
+    key,
+    target
+  };
 }
-function appendChild(parent, child) {
-  if (!child) return;
-
-  // Link instances
-  child.parent = parent;
-  parent.children.push(child);
 
-  // Attach tree once complete
-  handleContainerEffects(parent, child);
+// Checks if a dash-cased string ends with an integer
+const INDEX_REGEX = /-\d+$/;
+function attach(parent, child) {
+  if (is.str(child.props.attach)) {
+    // If attaching into an array (foo-0), create one
+    if (INDEX_REGEX.test(child.props.attach)) {
+      const index = child.props.attach.replace(INDEX_REGEX, '');
+      const {
+        root,
+        key
+      } = resolve(parent.object, index);
+      if (!Array.isArray(root[key])) root[key] = [];
+    }
+    const {
+      root,
+      key
+    } = resolve(parent.object, child.props.attach);
+    child.previousAttach = root[key];
+    root[key] = child.object;
+  } else if (is.fun(child.props.attach)) {
+    child.previousAttach = child.props.attach(parent.object, child.object);
+  }
 }
-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 detach(parent, child) {
+  if (is.str(child.props.attach)) {
+    const {
+      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
+    else root[key] = previous;
+  } else {
+    child.previousAttach == null ? void 0 : child.previousAttach(parent.object, child.object);
+  }
+  delete child.previousAttach;
 }
-function disposeOnIdle(object) {
-  if (typeof object.dispose === 'function') {
-    const handleDispose = () => {
-      try {
-        object.dispose();
-      } catch {
-        // 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);
+const RESERVED_PROPS = [...REACT_INTERNAL_PROPS,
+// Instance props
+'args', 'dispose', 'attach', 'object', 'onUpdate',
+// Behavior flags
+'dispose'];
+const MEMOIZED_PROTOTYPES = new Map();
+function getMemoizedPrototype(root) {
+  let ctor = MEMOIZED_PROTOTYPES.get(root.constructor);
+  try {
+    if (!ctor) {
+      ctor = new root.constructor();
+      MEMOIZED_PROTOTYPES.set(root.constructor, ctor);
+    }
+  } catch (e) {
+    // ...
   }
+  return ctor;
 }
-function removeChild(parent, child, dispose) {
-  if (!child) return;
 
-  // Unlink instances
-  child.parent = null;
-  const childIndex = parent.children.indexOf(child);
-  if (childIndex !== -1) parent.children.splice(childIndex, 1);
+// This function prepares a set of changes to be applied to the instance
+function diffProps(instance, newProps) {
+  const changedProps = {};
 
-  // 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);
-  }
+  // 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;
 
-  // Allow objects to bail out of unmount disposal with dispose={null}
-  const shouldDispose = child.props.dispose !== null && dispose !== false;
+    // Props changed, add them
+    changedProps[prop] = newProps[prop];
 
-  // Recursively remove instance children
-  for (let i = child.children.length - 1; i >= 0; i--) {
-    const node = child.children[i];
-    removeChild(child, node, shouldDispose);
+    // Reset pierced props
+    for (const other in newProps) {
+      if (other.startsWith(`${prop}-`)) changedProps[other] = newProps[other];
+    }
   }
-  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') {
-    disposeOnIdle(child.object);
-  }
+  // Reset removed props for HMR
+  for (const prop in instance.props) {
+    if (RESERVED_PROPS.includes(prop) || newProps.hasOwnProperty(prop)) continue;
+    const {
+      root,
+      key
+    } = resolve(instance.object, prop);
 
-  // Tree was updated, request a frame for top-level instance
-  if (dispose === undefined) invalidateInstance(child);
-}
-function setFiberRef(fiber, publicInstance) {
-  for (const _fiber of [fiber, fiber.alternate]) {
-    if (_fiber !== null) {
-      if (typeof _fiber.ref === 'function') {
-        _fiber.refCleanup == null ? void 0 : _fiber.refCleanup();
-        const cleanup = _fiber.ref(publicInstance);
-        if (typeof cleanup === 'function') _fiber.refCleanup = cleanup;
-      } else if (_fiber.ref) {
-        _fiber.ref.current = publicInstance;
-      }
+    // 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 && root.constructor.length === 0) {
+      // create a blank slate of the instance and copy the particular parameter.
+      const ctor = getMemoizedPrototype(root);
+      if (!is.und(ctor)) changedProps[key] = ctor[key];
+    } else {
+      // instance does not have constructor, just set it to 0
+      changedProps[key] = 0;
     }
   }
+  return changedProps;
 }
-const reconstructed = [];
-function swapInstances() {
-  // Detach instance
-  for (const [instance] of reconstructed) {
-    const parent = instance.parent;
-    if (parent) {
-      if (instance.props.attach) {
-        detach(parent, instance);
-      } else if (isObject3D(instance.object) && isObject3D(parent.object)) {
-        parent.object.remove(instance.object);
-      }
-      for (const child of instance.children) {
-        if (child.props.attach) {
-          detach(instance, child);
-        } else if (isObject3D(child.object) && isObject3D(instance.object)) {
-          instance.object.remove(child.object);
-        }
-      }
-    }
 
-    // If the old instance is hidden, we need to unhide it.
-    // React assumes it can discard instances since they're pure for DOM.
-    // This isn't true for us since our lifetimes are impure and longliving.
-    // So, we manually check if an instance was hidden and unhide it.
-    if (instance.isHidden) unhideInstance(instance);
+// https://github.com/mrdoob/three.js/pull/27042
+// https://github.com/mrdoob/three.js/pull/22748
+const colorMaps = ['map', 'emissiveMap', 'sheenColorMap', '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) {
+  var _instance$object;
+  const instance = object.__r3f;
+  const rootState = instance && findInitialRoot(instance).getState();
+  const prevHandlers = instance == null ? void 0 : instance.eventCount;
+  for (const prop in props) {
+    let value = props[prop];
 
-    // Dispose of old object if able
-    if (instance.object.__r3f) delete instance.object.__r3f;
-    if (instance.type !== 'primitive') disposeOnIdle(instance.object);
-  }
+    // Don't mutate reserved keys
+    if (RESERVED_PROPS.includes(prop)) continue;
 
-  // Update instance
-  for (const [instance, props, fiber] of reconstructed) {
-    instance.props = props;
-    const parent = instance.parent;
-    if (parent) {
-      var _instance$props$objec, _instance$props$args;
-      // Get target from catalogue
-      const name = `${instance.type[0].toUpperCase()}${instance.type.slice(1)}`;
-      const target = catalogue[name];
+    // 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;
+      continue;
+    }
 
-      // Create object
-      instance.object = (_instance$props$objec = instance.props.object) != null ? _instance$props$objec : new target(...((_instance$props$args = instance.props.args) != null ? _instance$props$args : []));
-      instance.object.__r3f = instance;
-      setFiberRef(fiber, instance.object);
+    // Ignore setting undefined props
+    // https://github.com/pmndrs/react-three-fiber/issues/274
+    if (value === undefined) continue;
+    let {
+      root,
+      key,
+      target
+    } = resolve(object, prop);
 
-      // Set initial props
-      applyProps(instance.object, instance.props);
-      if (instance.props.attach) {
-        attach(parent, instance);
-      } else if (isObject3D(instance.object) && isObject3D(parent.object)) {
-        parent.object.add(instance.object);
-      }
-      for (const child of instance.children) {
-        if (child.props.attach) {
-          attach(instance, child);
-        } else if (isObject3D(child.object) && isObject3D(instance.object)) {
-          instance.object.add(child.object);
-        }
-      }
-
-      // Tree was updated, request a frame
-      invalidateInstance(instance);
-    }
-  }
-  reconstructed.length = 0;
-}
-
-// Don't handle text instances, make it no-op
-const handleTextInstance = () => {};
-const NO_CONTEXT = {};
-let currentUpdatePriority = NoEventPriority;
-
-// https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberFlags.js
-const NoFlags = 0;
-const Update = 4;
-const reconciler = createReconciler({
-  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,
-  commitUpdate(instance, type, oldProps, newProps, fiber) {
-    var _newProps$args, _oldProps$args, _newProps$args2;
-    validateInstance(type, newProps);
-    let reconstruct = false;
-
-    // Reconstruct primitives if object prop changes
-    if (instance.type === 'primitive' && oldProps.object !== newProps.object) reconstruct = true;
-    // Reconstruct instance if args were added or removed
-    else if (((_newProps$args = newProps.args) == null ? void 0 : _newProps$args.length) !== ((_oldProps$args = oldProps.args) == null ? void 0 : _oldProps$args.length)) reconstruct = true;
-    // Reconstruct instance if args were changed
-    else 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]);
-    })) reconstruct = true;
-
-    // Reconstruct when args or <primitive object={...} have changes
-    if (reconstruct) {
-      reconstructed.push([instance, {
-        ...newProps
-      }, fiber]);
-    } else {
-      // Create a diff-set, flag if there are any changes
-      const changedProps = diffProps(instance, newProps);
-      if (Object.keys(changedProps).length) {
-        Object.assign(instance.props, changedProps);
-        applyProps(instance.object, changedProps);
-      }
-    }
-
-    // Flush reconstructed siblings when we hit the last updated child in a sequence
-    const isTailSibling = fiber.sibling === null || (fiber.flags & Update) === NoFlags;
-    if (isTailSibling) swapInstances();
-  },
-  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,
-  unhideInstance,
-  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() {},
-  prepareScopeUpdate() {},
-  getInstanceFromScope: () => null,
-  shouldAttemptEagerTransition: () => false,
-  trackSchedulerEvent: () => {},
-  resolveEventType: () => null,
-  resolveEventTimeStamp: () => -1.1,
-  requestPostPaintCallback() {},
-  maySuspendCommit: () => false,
-  preloadInstance: () => true,
-  // true indicates already loaded
-  startSuspendingCommit() {},
-  suspendInstance() {},
-  waitForCommitToBeReady: () => 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;
-    }
-  },
-  resetFormInstance() {}
-});
-
-var _window$document, _window$navigator;
-/**
- * Returns the instance's initial (outmost) root.
- */
-function findInitialRoot(instance) {
-  let root = instance.root;
-  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
- */
-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__*/jsx(Root, {
-      children: /*#__PURE__*/jsx(ContextBridge, {
-        children: children
-      })
-    });
-  }, [fiber, ContextBridge]);
-}
-function Block({
-  set
-}) {
-  useIsomorphicLayoutEffect(() => {
-    set(new Promise(() => null));
-    return () => set(false);
-  }, [set]);
-  return null;
-}
-class ErrorBoundary extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      error: false
-    };
-  }
-  componentDidCatch(err) {
-    this.props.set(err);
-  }
-  render() {
-    return this.state.error ? null : this.props.children;
-  }
-}
-ErrorBoundary.getDerivedStateFromError = () => ({
-  error: true
-});
-function calculateDpr(dpr) {
-  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
- */
-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',
-  fun: a => typeof a === 'function',
-  str: a => typeof a === 'string',
-  num: a => typeof a === 'number',
-  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 (is.str(a) || is.num(a) || is.boo(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
-    let i;
-    // Check if a has all the keys of b
-    for (i in a) if (!(i in b)) 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
-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
-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
-function prepare(target, root, type, props) {
-  const object = target;
-
-  // Create instance descriptor
-  let instance = object == null ? void 0 : object.__r3f;
-  if (!instance) {
-    instance = {
-      root,
-      type,
-      parent: null,
-      children: [],
-      props: getInstanceProps(props),
-      object,
-      eventCount: 0,
-      handlers: {},
-      isHidden: false
-    };
-    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
-  const chain = key.split('-');
-  target = chain.reduce((acc, key) => acc[key], root);
-  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
-const INDEX_REGEX = /-\d+$/;
-function attach(parent, child) {
-  if (is.str(child.props.attach)) {
-    // If attaching into an array (foo-0), create one
-    if (INDEX_REGEX.test(child.props.attach)) {
-      const index = child.props.attach.replace(INDEX_REGEX, '');
-      const {
-        root,
-        key
-      } = resolve(parent.object, index);
-      if (!Array.isArray(root[key])) root[key] = [];
-    }
-    const {
-      root,
-      key
-    } = resolve(parent.object, child.props.attach);
-    child.previousAttach = root[key];
-    root[key] = child.object;
-  } else if (is.fun(child.props.attach)) {
-    child.previousAttach = child.props.attach(parent.object, child.object);
-  }
-}
-function detach(parent, child) {
-  if (is.str(child.props.attach)) {
-    const {
-      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
-    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', 'onUpdate',
-// 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) {
-  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
-    changedProps[prop] = newProps[prop];
-
-    // Reset pierced props
-    for (const other in newProps) {
-      if (other.startsWith(`${prop}-`)) changedProps[other] = newProps[other];
-    }
-  }
-
-  // Reset removed props for HMR
-  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
-    // 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 && root.constructor.length === 0) {
-      // create a blank slate of the instance and copy the particular parameter.
-      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;
-}
-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 && 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
-    if (RESERVED_PROPS.includes(prop)) continue;
-
-    // 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;
-    }
-
-    // Ignore setting undefined props
-    // https://github.com/pmndrs/react-three-fiber/issues/274
-    if (value === undefined) continue;
-    let {
-      root,
-      key,
-      target
-    } = 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;
-      }
+    // Layers must be written to the mask property
+    if (target instanceof THREE.Layers && value instanceof THREE.Layers) {
+      target.mask = value.mask;
+    } else if (target instanceof THREE.Color && isColorRepresentation(value)) {
+      target.set(value);
     }
-
-    // Copy if properties match signatures
-    if (typeof (target == null ? void 0 : target.copy) === 'function' && target.copy === value.copy) {
+    // Copy if properties match signatures and implement math interface (likely read-only)
+    else if (target && typeof target.set === 'function' && typeof target.copy === 'function' && value != null && value.constructor && target.constructor === value.constructor) {
       target.copy(value);
     }
-    // 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
-    else if (target != null && target.set && Array.isArray(value)) {
-      if (target.fromArray) target.fromArray(value);else target.set(...value);
+    else if (target && typeof target.set === 'function' && Array.isArray(value)) {
+      if (typeof target.fromArray === 'function') target.fromArray(value);else target.set(...value);
     }
     // Set literal types
-    else if (target != null && target.set && typeof value !== 'object') {
-      const isColor = target instanceof THREE.Color;
+    else if (target && typeof target.set === 'function' && typeof value === 'number') {
       // Allow setting array scalars
-      if (!isColor && target.setScalar && typeof value === 'number') target.setScalar(value);
+      if (typeof target.setScalar === 'function') target.setScalar(value);
       // Otherwise just set single value
       else target.set(value);
-
-      // 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 {
+      var _root$key;
       root[key] = value;
 
       // 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 &&
+      if (rootState && !rootState.linear && colorMaps.includes(key) && (_root$key = root[key]) != null && _root$key.isTexture &&
       // 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;
+        root[key].colorSpace = THREE.SRGBColorSpace;
       }
     }
   }
 
   // Register event handlers
-  if (instance != null && instance.parent && rootState != null && rootState.internal && instance.object instanceof THREE.Object3D && prevHandlers !== instance.eventCount) {
+  if (instance != null && instance.parent && rootState != null && rootState.internal && (_instance$object = instance.object) != null && _instance$object.isObject3D && prevHandlers !== instance.eventCount) {
+    const object = instance.object;
     // Pre-emptively remove the instance from the interaction manager
-    const index = rootState.internal.interaction.indexOf(instance.object);
+    const index = rootState.internal.interaction.indexOf(object);
     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);
+    if (instance.eventCount && object.raycast !== null) {
+      rootState.internal.interaction.push(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';
+    if (instance.object.isBufferGeometry) instance.props.attach = 'geometry';else if (instance.object.isMaterial) instance.props.attach = 'material';
   }
 
   // Instance was updated, request a frame
@@ -1029,7 +591,19 @@ function createEvents(store) {
         stopped: false
       };
       for (const hit of intersections) {
-        const state = getRootState(hit.object);
+        let state = getRootState(hit.object);
+
+        // If the object is not managed by R3F, it might be parented to an element which is.
+        // Traverse upwards until we find a managed parent and use its state instead.
+        if (!state) {
+          hit.object.traverseAncestors(obj => {
+            const parentState = getRootState(obj);
+            if (parentState) {
+              state = parentState;
+              return false;
+            }
+          });
+        }
         if (state) {
           const {
             raycaster,
@@ -1290,7 +864,7 @@ function createEvents(store) {
 }
 
 const isRenderer = def => !!(def != null && def.render);
-const context = /*#__PURE__*/React.createContext(null);
+const context = /* @__PURE__ */React.createContext(null);
 const createStore = (invalidate, advance) => {
   const rootStore = createWithEqualityFn((set, get) => {
     const position = new THREE.Vector3();
@@ -1304,7 +878,7 @@ const createStore = (invalidate, advance) => {
         left
       } = size;
       const aspect = width / height;
-      if (target instanceof THREE.Vector3) tempTarget.copy(target);else tempTarget.set(...target);
+      if (target.isVector3) tempTarget.copy(target);else tempTarget.set(...target);
       const distance = camera.getWorldPosition(position).distanceTo(tempTarget);
       if (isOrthographicCamera(camera)) {
         return {
@@ -1506,161 +1080,576 @@ const createStore = (invalidate, advance) => {
       oldDpr = viewport.dpr;
       // Update camera & renderer
       updateCamera(camera, size);
-      gl.setPixelRatio(viewport.dpr);
+      if (viewport.dpr > 0) gl.setPixelRatio(viewport.dpr);
       const updateStyle = typeof HTMLCanvasElement !== 'undefined' && 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)
-        }
-      }));
+
+    // 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;
+};
+
+/**
+ * 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);
+  React.useImperativeHandle(instance, () => ref.current.__r3f, [ref]);
+  return instance;
+}
+
+/**
+ * Returns the R3F Canvas' Zustand store. Useful for [transient updates](https://github.com/pmndrs/zustand#transient-updates-for-often-occurring-state-changes).
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usestore
+ */
+function useStore() {
+  const store = React.useContext(context);
+  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
+ */
+function useThree(selector = state => state, equalityFn) {
+  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
+ */
+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
+  useIsomorphicLayoutEffect(() => subscribe(ref, renderPriority, store), [renderPriority, subscribe, store]);
+  return null;
+}
+
+/**
+ * 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$1 = 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) {
+    let loader;
+
+    // Construct and cache loader if constructor was passed
+    if (isConstructor$1(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 => {
+      if (isObject3D(data == null ? void 0 : data.scene)) Object.assign(data, buildGraph(data.scene));
+      res(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
+ */
+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), [loader, ...keys], {
+    equal: is.equ
+  });
+  // Return the object(s)
+  return Array.isArray(input) ? results : results[0];
+}
+
+/**
+ * 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), [loader, ...keys]);
+};
+
+/**
+ * Removes a loaded asset from cache.
+ */
+useLoader.clear = function (loader, input) {
+  const keys = Array.isArray(input) ? input : [input];
+  return clear([loader, ...keys]);
+};
+
+// TODO: upstream to DefinitelyTyped for React 19
+// https://github.com/facebook/react/issues/28956
+
+function createReconciler(config) {
+  const reconciler = Reconciler(config);
+  reconciler.injectIntoDevTools({
+    bundleType: typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' ? 1 : 0,
+    rendererPackageName: '@react-three/fiber',
+    version: React.version
+  });
+  return reconciler;
+}
+const NoEventPriority = 0;
+
+// TODO: handle constructor overloads
+// https://github.com/pmndrs/react-three-fiber/pull/2931
+// https://github.com/microsoft/TypeScript/issues/37079
+
+const catalogue = {};
+const PREFIX_REGEX = /^three(?=[A-Z])/;
+const toPascalCase = type => `${type[0].toUpperCase()}${type.slice(1)}`;
+let i = 0;
+const isConstructor = object => typeof object === 'function';
+function extend(objects) {
+  if (isConstructor(objects)) {
+    const Component = `${i++}`;
+    catalogue[Component] = objects;
+    return Component;
+  } else {
+    Object.assign(catalogue, objects);
+  }
+}
+function validateInstance(type, props) {
+  // 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!');
+}
+function createInstance(type, props, root) {
+  var _props$object;
+  // Remove three* prefix from elements
+  type = type.replace(PREFIX_REGEX, '');
+  validateInstance(type, props);
+
+  // Regenerate the R3F instance for primitives to simulate a new object
+  if (type === 'primitive' && (_props$object = props.object) != null && _props$object.__r3f) delete props.object.__r3f;
+  return prepare(props.object, root, type, props);
+}
+function hideInstance(instance) {
+  if (!instance.isHidden) {
+    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);
+  }
+}
+function 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);
+  }
+}
 
-  // Invalidate on any change
-  rootStore.subscribe(state => invalidate(state));
+// 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;
 
-  // Return root state
-  return rootStore;
-};
+  // Create & link object on first run
+  if (!child.object) {
+    var _child$props$object, _child$props$args;
+    // Get target from catalogue
+    const target = catalogue[toPascalCase(child.type)];
 
-/**
- * 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);
-  React.useImperativeHandle(instance, () => ref.current.__r3f, [ref]);
-  return instance;
+    // 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;
 
-/**
- * Returns the R3F Canvas' Zustand store. Useful for [transient updates](https://github.com/pmndrs/zustand#transient-updates-for-often-occurring-state-changes).
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usestore
- */
-function useStore() {
-  const store = React.useContext(context);
-  if (!store) throw new Error('R3F: Hooks can only be used within the Canvas component!');
-  return store;
+  // 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;
 
-/**
- * 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) {
-  return useStore()(selector, equalityFn);
+  // 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 disposeOnIdle(object) {
+  if (typeof object.dispose === 'function') {
+    const handleDispose = () => {
+      try {
+        object.dispose();
+      } catch {
+        // no-op
+      }
+    };
 
-/**
- * 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
-  useIsomorphicLayoutEffect(() => subscribe(ref, renderPriority, store), [renderPriority, subscribe, store]);
-  return null;
+    // 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);
+  }
 }
+function removeChild(parent, child, dispose) {
+  if (!child) return;
 
-/**
- * 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]);
+  // Unlink instances
+  child.parent = null;
+  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
+  for (let i = child.children.length - 1; i >= 0; i--) {
+    const node = child.children[i];
+    removeChild(child, node, shouldDispose);
+  }
+  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') {
+    disposeOnIdle(child.object);
+  }
+
+  // Tree was updated, request a frame for top-level instance
+  if (dispose === undefined) invalidateInstance(child);
 }
-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 async function (Proto, ...input) {
-    let loader;
+function setFiberRef(fiber, publicInstance) {
+  for (const _fiber of [fiber, fiber.alternate]) {
+    if (_fiber !== null) {
+      if (typeof _fiber.ref === 'function') {
+        _fiber.refCleanup == null ? void 0 : _fiber.refCleanup();
+        const cleanup = _fiber.ref(publicInstance);
+        if (typeof cleanup === 'function') _fiber.refCleanup = cleanup;
+      } else if (_fiber.ref) {
+        _fiber.ref.current = publicInstance;
+      }
+    }
+  }
+}
+const reconstructed = [];
+function swapInstances() {
+  // Detach instance
+  for (const [instance] of reconstructed) {
+    const parent = instance.parent;
+    if (parent) {
+      if (instance.props.attach) {
+        detach(parent, instance);
+      } else if (isObject3D(instance.object) && isObject3D(parent.object)) {
+        parent.object.remove(instance.object);
+      }
+      for (const child of instance.children) {
+        if (child.props.attach) {
+          detach(instance, child);
+        } else if (isObject3D(child.object) && isObject3D(instance.object)) {
+          instance.object.remove(child.object);
+        }
+      }
+    }
 
-    // Construct and cache loader if constructor was passed
-    if (isConstructor(Proto)) {
-      loader = memoizedLoaders.get(Proto);
-      if (!loader) {
-        loader = new Proto();
-        memoizedLoaders.set(Proto, loader);
+    // If the old instance is hidden, we need to unhide it.
+    // React assumes it can discard instances since they're pure for DOM.
+    // This isn't true for us since our lifetimes are impure and longliving.
+    // So, we manually check if an instance was hidden and unhide it.
+    if (instance.isHidden) unhideInstance(instance);
+
+    // Dispose of old object if able
+    if (instance.object.__r3f) delete instance.object.__r3f;
+    if (instance.type !== 'primitive') disposeOnIdle(instance.object);
+  }
+
+  // Update instance
+  for (const [instance, props, fiber] of reconstructed) {
+    instance.props = props;
+    const parent = instance.parent;
+    if (parent) {
+      var _instance$props$objec, _instance$props$args;
+      // Get target from catalogue
+      const target = catalogue[toPascalCase(instance.type)];
+
+      // Create object
+      instance.object = (_instance$props$objec = instance.props.object) != null ? _instance$props$objec : new target(...((_instance$props$args = instance.props.args) != null ? _instance$props$args : []));
+      instance.object.__r3f = instance;
+      setFiberRef(fiber, instance.object);
+
+      // Set initial props
+      applyProps(instance.object, instance.props);
+      if (instance.props.attach) {
+        attach(parent, instance);
+      } else if (isObject3D(instance.object) && isObject3D(parent.object)) {
+        parent.object.add(instance.object);
       }
-    } else {
-      loader = Proto;
+      for (const child of instance.children) {
+        if (child.props.attach) {
+          attach(instance, child);
+        } else if (isObject3D(child.object) && isObject3D(instance.object)) {
+          instance.object.add(child.object);
+        }
+      }
+
+      // Tree was updated, request a frame
+      invalidateInstance(instance);
     }
+  }
+  reconstructed.length = 0;
+}
 
-    // Apply loader extensions
-    if (extensions) extensions(loader);
+// Don't handle text instances, make it no-op
+const handleTextInstance = () => {};
+const NO_CONTEXT = {};
+let currentUpdatePriority = NoEventPriority;
 
-    // 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}`))))));
-  };
-}
+// https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberFlags.js
+const NoFlags = 0;
+const Update = 4;
+const reconciler = /* @__PURE__ */createReconciler({
+  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,
+  commitUpdate(instance, type, oldProps, newProps, fiber) {
+    var _newProps$args, _oldProps$args, _newProps$args2;
+    validateInstance(type, newProps);
+    let reconstruct = false;
 
-/**
- * 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(loader, input, extensions, onProgress) {
-  // Use suspense to load async assets
-  const keys = Array.isArray(input) ? input : [input];
-  const results = suspend(loadingFn(extensions, onProgress), [loader, ...keys], {
-    equal: is.equ
-  });
-  // Return the object(s)
-  return Array.isArray(input) ? results : results[0];
-}
+    // Reconstruct primitives if object prop changes
+    if (instance.type === 'primitive' && oldProps.object !== newProps.object) reconstruct = true;
+    // Reconstruct instance if args were added or removed
+    else if (((_newProps$args = newProps.args) == null ? void 0 : _newProps$args.length) !== ((_oldProps$args = oldProps.args) == null ? void 0 : _oldProps$args.length)) reconstruct = true;
+    // Reconstruct instance if args were changed
+    else 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]);
+    })) reconstruct = true;
 
-/**
- * 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), [loader, ...keys]);
-};
+    // Reconstruct when args or <primitive object={...} have changes
+    if (reconstruct) {
+      reconstructed.push([instance, {
+        ...newProps
+      }, fiber]);
+    } else {
+      // Create a diff-set, flag if there are any changes
+      const changedProps = diffProps(instance, newProps);
+      if (Object.keys(changedProps).length) {
+        Object.assign(instance.props, changedProps);
+        applyProps(instance.object, changedProps);
+      }
+    }
 
-/**
- * Removes a loaded asset from cache.
- */
-useLoader.clear = function (loader, input) {
-  const keys = Array.isArray(input) ? input : [input];
-  return clear([loader, ...keys]);
-};
+    // Flush reconstructed siblings when we hit the last updated child in a sequence
+    const isTailSibling = fiber.sibling === null || (fiber.flags & Update) === NoFlags;
+    if (isTailSibling) swapInstances();
+  },
+  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,
+  unhideInstance,
+  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() {},
+  prepareScopeUpdate() {},
+  getInstanceFromScope: () => null,
+  shouldAttemptEagerTransition: () => false,
+  trackSchedulerEvent: () => {},
+  resolveEventType: () => null,
+  resolveEventTimeStamp: () => -1.1,
+  requestPostPaintCallback() {},
+  maySuspendCommit: () => false,
+  preloadInstance: () => true,
+  // true indicates already loaded
+  startSuspendingCommit() {},
+  suspendInstance() {},
+  waitForCommitToBeReady: () => null,
+  NotPendingTransition: null,
+  HostTransitionContext: /* @__PURE__ */React.createContext(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;
+    }
+  },
+  resetFormInstance() {}
+});
 
 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;
-  return new THREE.WebGLRenderer({
-    powerPreference: 'high-performance',
-    canvas: canvas,
-    antialias: true,
-    alpha: true,
-    ...gl
-  });
-};
 function computeInitialSize(canvas, size) {
-  if (!size && canvas instanceof HTMLCanvasElement && canvas.parentElement) {
+  if (!size && typeof HTMLCanvasElement !== 'undefined' && canvas instanceof HTMLCanvasElement && canvas.parentElement) {
     const {
       width,
       height,
@@ -1736,10 +1725,13 @@ function createRoot(canvas) {
 
   // Locals
   let onCreated;
-  let configured = false;
   let lastCamera;
+  let configured = false;
+  let pending = null;
   return {
-    configure(props = {}) {
+    async configure(props = {}) {
+      let resolve;
+      pending = new Promise(_resolve => resolve = _resolve);
       let {
         gl: glConfig,
         size: propsSize,
@@ -1762,9 +1754,26 @@ function createRoot(canvas) {
 
       // Set up renderer (one time only!)
       let gl = state.gl;
-      if (!state.gl) state.set({
-        gl: gl = createRendererInstance(glConfig, canvas)
-      });
+      if (!state.gl) {
+        const defaultProps = {
+          canvas: canvas,
+          powerPreference: 'high-performance',
+          antialias: true,
+          alpha: true
+        };
+        const customRenderer = typeof glConfig === 'function' ? await glConfig(defaultProps) : glConfig;
+        if (isRenderer(customRenderer)) {
+          gl = customRenderer;
+        } else {
+          gl = new THREE.WebGLRenderer({
+            ...defaultProps,
+            ...glConfig
+          });
+        }
+        state.set({
+          gl
+        });
+      }
 
       // Set up raycaster (one time only!)
       let raycaster = state.raycaster;
@@ -1790,7 +1799,7 @@ function createRoot(canvas) {
       // 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 isCamera = cameraOptions == null ? void 0 : cameraOptions.isCamera;
         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;
@@ -1820,7 +1829,7 @@ function createRoot(canvas) {
       // Set up scene (one time only!)
       if (!state.scene) {
         let scene;
-        if (sceneOptions instanceof THREE.Scene) {
+        if (sceneOptions != null && sceneOptions.isScene) {
           scene = sceneOptions;
           prepare(scene, store, '', {});
         } else {
@@ -1833,8 +1842,34 @@ function createRoot(canvas) {
         });
       }
 
+      // Store events internally
+      if (events && !state.events.handlers) state.set({
+        events: events(store)
+      });
+      // 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 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
+      if (performance && !is.equ(performance, state.performance, shallowLoose)) state.set(state => ({
+        performance: {
+          ...state.performance,
+          ...performance
+        }
+      }));
+
       // Set up XR (one time only!)
       if (!state.xr) {
+        var _gl$xr;
         // Handle frame behavior in WebXR
         const handleXRFrame = (timestamp, frame) => {
           const state = store.getState();
@@ -1865,7 +1900,7 @@ function createRoot(canvas) {
         };
 
         // Subscribe to WebXR session events
-        if (gl.xr) xr.connect();
+        if (typeof ((_gl$xr = gl.xr) == null ? void 0 : _gl$xr.addEventListener) === 'function') xr.connect();
         state.set({
           xr
         });
@@ -1892,22 +1927,12 @@ function createRoot(canvas) {
         }
         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;
-      }
+      THREE.ColorManagement.enabled = !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
-        });
+        gl.outputColorSpace = linear ? THREE.LinearSRGBColorSpace : THREE.SRGBColorSpace;
+        gl.toneMapping = flat ? THREE.NoToneMapping : THREE.ACESFilmicToneMapping;
       }
 
       // Update color management state
@@ -1923,45 +1948,24 @@ function createRoot(canvas) {
 
       // 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 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 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
-      if (performance && !is.equ(performance, state.performance, shallowLoose)) state.set(state => ({
-        performance: {
-          ...state.performance,
-          ...performance
-        }
-      }));
 
       // Set locals
       onCreated = onCreatedCallback;
       configured = true;
+      resolve();
       return this;
     },
     render(children) {
       // The root has to be configured before it can be rendered
-      if (!configured) this.configure();
-      reconciler.updateContainer( /*#__PURE__*/jsx(Provider, {
-        store: store,
-        children: children,
-        onCreated: onCreated,
-        rootElement: canvas
-      }), fiber, null, () => undefined);
+      if (!configured && !pending) this.configure();
+      pending.then(() => {
+        reconciler.updateContainer( /*#__PURE__*/jsx(Provider, {
+          store: store,
+          children: children,
+          onCreated: onCreated,
+          rootElement: canvas
+        }), fiber, null, () => undefined);
+      });
       return store;
     },
     unmount() {
@@ -1969,12 +1973,6 @@ function createRoot(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,
@@ -2112,18 +2110,17 @@ function Portal({
     return store;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [previousRoot, container]);
-  return /*#__PURE__*/jsx(Fragment, {
-    children: reconciler.createPortal( /*#__PURE__*/jsx(context.Provider, {
-      value: usePortalStore,
-      children: children
-    }), usePortalStore, null)
-  });
+  return (
+    /*#__PURE__*/
+    // @ts-ignore, reconciler types are not maintained
+    jsx(Fragment, {
+      children: reconciler.createPortal( /*#__PURE__*/jsx(context.Provider, {
+        value: usePortalStore,
+        children: children
+      }), usePortalStore, null)
+    })
+  );
 }
-reconciler.injectIntoDevTools({
-  bundleType: process.env.NODE_ENV === 'production' ? 0 : 1,
-  rendererPackageName: '@react-three/fiber',
-  version: React.version
-});
 
 function createSubs(callback, subs) {
   const sub = {
@@ -2222,7 +2219,7 @@ function loop(timestamp) {
       repeat += update(timestamp, state);
     }
   }
-  useFrameInProgress = true;
+  useFrameInProgress = false;
 
   // Run after-effects
   flushGlobalEffects('after', timestamp);
@@ -2363,4 +2360,4 @@ function createPointerEvents(store) {
   };
 }
 
-export { useStore as A, Block as B, useThree as C, useFrame as D, ErrorBoundary as E, useGraph as F, useLoader as G, _roots as _, useMutableCallback as a, useIsomorphicLayoutEffect as b, createRoot as c, unmountComponentAtNode as d, extend as e, createPointerEvents as f, createEvents as g, flushGlobalEffects as h, isRef as i, addEffect as j, addAfterEffect as k, addTail as l, invalidate as m, advance as n, render as o, createPortal 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 };
+export { useThree as A, Block as B, useFrame as C, useGraph as D, ErrorBoundary as E, useLoader as F, _roots as _, useMutableCallback as a, useIsomorphicLayoutEffect as b, createRoot as c, unmountComponentAtNode as d, extend as e, createPointerEvents as f, createEvents as g, flushGlobalEffects as h, isRef as i, addEffect as j, addAfterEffect as k, addTail as l, invalidate as m, advance as n, createPortal as o, context as p, applyProps as q, reconciler as r, getRootState as s, threeTypes as t, useBridge as u, dispose as v, act as w, buildGraph as x, useInstanceHandle as y, useStore as z };