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

package/dist/{events-aef54ace.cjs.prod.js → events-b02714fc.cjs.dev.js}

@@ -4,11 +4,11 @@ var THREE = require('three');
 var React = require('react');
 var constants = require('react-reconciler/constants');
 var traditional = require('zustand/traditional');
+var Reconciler = require('react-reconciler');
+var scheduler = require('scheduler');
 var suspendReact = require('suspend-react');
 var jsxRuntime = require('react/jsx-runtime');
 var itsFine = require('its-fine');
-var Reconciler = require('react-reconciler');
-var scheduler = require('scheduler');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -38,855 +38,414 @@ var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
-// TODO: upstream to DefinitelyTyped for React 19
-// https://github.com/facebook/react/issues/28956
-
-const createReconciler = Reconciler__default["default"];
-
-// 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__namespace.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__namespace.useLayoutEffect : React__namespace.useEffect;
+function useMutableCallback(fn) {
+  const ref = React__namespace.useRef(fn);
+  useIsomorphicLayoutEffect(() => void (ref.current = fn), [fn]);
+  return ref;
+}
+/**
+ * Bridges renderer Context and StrictMode from a primary renderer.
+ */
+function useBridge() {
+  const fiber = itsFine.useFiber();
+  const ContextBridge = itsFine.useContextBridge();
+  return React__namespace.useMemo(() => ({
+    children
+  }) => {
+    const strict = !!itsFine.traverseFiber(fiber, true, node => node.type === React__namespace.StrictMode);
+    const Root = strict ? React__namespace.StrictMode : React__namespace.Fragment;
+    return /*#__PURE__*/jsxRuntime.jsx(Root, {
+      children: /*#__PURE__*/jsxRuntime.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__namespace.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 scheduler.unstable_scheduleCallback(scheduler.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 = constants.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() {
-    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 !== constants.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 constants.DiscreteEventPriority;
-      case 'pointermove':
-      case 'pointerout':
-      case 'pointerover':
-      case 'pointerenter':
-      case 'pointerleave':
-      case 'wheel':
-        return constants.ContinuousEventPriority;
-      default:
-        return constants.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__namespace.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__namespace.useLayoutEffect : React__namespace.useEffect;
-function useMutableCallback(fn) {
-  const ref = React__namespace.useRef(fn);
-  useIsomorphicLayoutEffect(() => void (ref.current = fn), [fn]);
-  return ref;
-}
-/**
- * Bridges renderer Context and StrictMode from a primary renderer.
- */
-function useBridge() {
-  const fiber = itsFine.useFiber();
-  const ContextBridge = itsFine.useContextBridge();
-  return React__namespace.useMemo(() => ({
-    children
-  }) => {
-    const strict = !!itsFine.traverseFiber(fiber, true, node => node.type === React__namespace.StrictMode);
-    const Root = strict ? React__namespace.StrictMode : React__namespace.Fragment;
-    return /*#__PURE__*/jsxRuntime.jsx(Root, {
-      children: /*#__PURE__*/jsxRuntime.jsx(ContextBridge, {
-        children: children
-      })
-    });
-  }, [fiber, ContextBridge]);
-}
-function Block({
-  set
-}) {
-  useIsomorphicLayoutEffect(() => {
-    set(new Promise(() => null));
-    return () => set(false);
-  }, [set]);
-  return null;
-}
-class ErrorBoundary extends React__namespace.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;
-}
-
-// 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__namespace.Layers && value instanceof THREE__namespace.Layers) {
+      target.mask = value.mask;
+    } else if (target instanceof THREE__namespace.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__namespace.Layers && value instanceof THREE__namespace.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__namespace.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__namespace.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__namespace.RGBAFormat && root[key].type === THREE__namespace.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__namespace.SRGBColorSpace;
       }
     }
   }
 
   // Register event handlers
-  if (instance != null && instance.parent && rootState != null && rootState.internal && instance.object instanceof THREE__namespace.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__namespace.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__namespace.BufferGeometry) instance.props.attach = 'geometry';else if (instance.object instanceof THREE__namespace.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
@@ -1058,7 +617,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,
@@ -1319,7 +890,7 @@ function createEvents(store) {
 }
 
 const isRenderer = def => !!(def != null && def.render);
-const context = /*#__PURE__*/React__namespace.createContext(null);
+const context = /* @__PURE__ */React__namespace.createContext(null);
 const createStore = (invalidate, advance) => {
   const rootStore = traditional.createWithEqualityFn((set, get) => {
     const position = new THREE__namespace.Vector3();
@@ -1333,7 +904,7 @@ const createStore = (invalidate, advance) => {
         left
       } = size;
       const aspect = width / height;
-      if (target instanceof THREE__namespace.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 {
@@ -1535,161 +1106,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__namespace.useRef(null);
+  React__namespace.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__namespace.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__namespace.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 = suspendReact.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 suspendReact.preload(loadingFn(extensions), [loader, ...keys]);
+};
+
+/**
+ * Removes a loaded asset from cache.
+ */
+useLoader.clear = function (loader, input) {
+  const keys = Array.isArray(input) ? input : [input];
+  return suspendReact.clear([loader, ...keys]);
+};
+
+// TODO: upstream to DefinitelyTyped for React 19
+// https://github.com/facebook/react/issues/28956
+
+function createReconciler(config) {
+  const reconciler = Reconciler__default["default"](config);
+  reconciler.injectIntoDevTools({
+    bundleType: typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' ? 1 : 0,
+    rendererPackageName: '@react-three/fiber',
+    version: React__namespace.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__namespace.useRef(null);
-  React__namespace.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__namespace.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 scheduler.unstable_scheduleCallback(scheduler.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__namespace.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);
+        }
+      }
+    }
+
+    // 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)];
 
-    // Construct and cache loader if constructor was passed
-    if (isConstructor(Proto)) {
-      loader = memoizedLoaders.get(Proto);
-      if (!loader) {
-        loader = new Proto();
-        memoizedLoaders.set(Proto, loader);
+      // 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 = suspendReact.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 suspendReact.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 suspendReact.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__namespace.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 constants.DiscreteEventPriority;
+      case 'pointermove':
+      case 'pointerout':
+      case 'pointerover':
+      case 'pointerenter':
+      case 'pointerleave':
+      case 'wheel':
+        return constants.ContinuousEventPriority;
+      default:
+        return constants.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__namespace.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,
@@ -1765,10 +1751,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,
@@ -1791,9 +1780,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__namespace.WebGLRenderer({
+            ...defaultProps,
+            ...glConfig
+          });
+        }
+        state.set({
+          gl
+        });
+      }
 
       // Set up raycaster (one time only!)
       let raycaster = state.raycaster;
@@ -1819,7 +1825,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__namespace.Camera;
+        const isCamera = cameraOptions == null ? void 0 : cameraOptions.isCamera;
         const camera = isCamera ? cameraOptions : orthographic ? new THREE__namespace.OrthographicCamera(0, 0, 0, 0, 0.1, 1000) : new THREE__namespace.PerspectiveCamera(75, 0, 0.1, 1000);
         if (!isCamera) {
           camera.position.z = 5;
@@ -1849,7 +1855,7 @@ function createRoot(canvas) {
       // Set up scene (one time only!)
       if (!state.scene) {
         let scene;
-        if (sceneOptions instanceof THREE__namespace.Scene) {
+        if (sceneOptions != null && sceneOptions.isScene) {
           scene = sceneOptions;
           prepare(scene, store, '', {});
         } else {
@@ -1862,8 +1868,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();
@@ -1894,7 +1926,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
         });
@@ -1921,22 +1953,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__namespace.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__namespace.NoToneMapping : THREE__namespace.ACESFilmicToneMapping
-        });
+        gl.outputColorSpace = linear ? THREE__namespace.LinearSRGBColorSpace : THREE__namespace.SRGBColorSpace;
+        gl.toneMapping = flat ? THREE__namespace.NoToneMapping : THREE__namespace.ACESFilmicToneMapping;
       }
 
       // Update color management state
@@ -1952,45 +1974,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__*/jsxRuntime.jsx(Provider, {
-        store: store,
-        children: children,
-        onCreated: onCreated,
-        rootElement: canvas
-      }), fiber, null, () => undefined);
+      if (!configured && !pending) this.configure();
+      pending.then(() => {
+        reconciler.updateContainer( /*#__PURE__*/jsxRuntime.jsx(Provider, {
+          store: store,
+          children: children,
+          onCreated: onCreated,
+          rootElement: canvas
+        }), fiber, null, () => undefined);
+      });
       return store;
     },
     unmount() {
@@ -1998,12 +1999,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,
@@ -2141,18 +2136,17 @@ function Portal({
     return store;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [previousRoot, container]);
-  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: reconciler.createPortal( /*#__PURE__*/jsxRuntime.jsx(context.Provider, {
-      value: usePortalStore,
-      children: children
-    }), usePortalStore, null)
-  });
+  return (
+    /*#__PURE__*/
+    // @ts-ignore, reconciler types are not maintained
+    jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: reconciler.createPortal( /*#__PURE__*/jsxRuntime.jsx(context.Provider, {
+        value: usePortalStore,
+        children: children
+      }), usePortalStore, null)
+    })
+  );
 }
-reconciler.injectIntoDevTools({
-  bundleType: 0 ,
-  rendererPackageName: '@react-three/fiber',
-  version: React__namespace.version
-});
 
 function createSubs(callback, subs) {
   const sub = {
@@ -2251,7 +2245,7 @@ function loop(timestamp) {
       repeat += update(timestamp, state);
     }
   }
-  useFrameInProgress = true;
+  useFrameInProgress = false;
 
   // Run after-effects
   flushGlobalEffects('after', timestamp);
@@ -2414,7 +2408,6 @@ exports.getRootState = getRootState;
 exports.invalidate = invalidate;
 exports.isRef = isRef;
 exports.reconciler = reconciler;
-exports.render = render;
 exports.threeTypes = threeTypes;
 exports.unmountComponentAtNode = unmountComponentAtNode;
 exports.useBridge = useBridge;