@react-three/fiber 9.8.0 → 9.8.1

package/dist/{events-ce5e34e8.cjs.dev.js → events-21d8cd92.cjs.dev.js}

@@ -2,10 +2,10 @@
 
 var React = require('react');
 var THREE = require('three');
+var jsxRuntime = require('react/jsx-runtime');
 var traditional = require('zustand/traditional');
 var suspendReact = require('suspend-react');
 var w1 = require('scheduler');
-var jsxRuntime = require('react/jsx-runtime');
 var itsFine = require('its-fine');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -95,23 +95,29 @@ function useGate() {
   }) : null;
   return [gate, waitFor];
 }
+
+// Activity is optional on React 19.0/19.1. A computed key also supports strict ESM bundlers.
+const useActivityBridge = React__namespace['Activity' + ''] ? itsFine.useActivityBridge : () => React__namespace.Fragment;
 /**
- * Bridges renderer Context and StrictMode from a primary renderer.
+ * Bridges Context, StrictMode, and Activity visibility from a primary renderer.
  */
 function useBridge() {
   const fiber = itsFine.useFiber();
   const ContextBridge = itsFine.useContextBridge();
+  const ActivityBridge = useActivityBridge();
   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
+      children: /*#__PURE__*/jsxRuntime.jsx(ActivityBridge, {
+        children: /*#__PURE__*/jsxRuntime.jsx(ContextBridge, {
+          children: children
+        })
       })
     });
-  }, [fiber, ContextBridge]);
+  }, [fiber, ContextBridge, ActivityBridge]);
 }
 function Block({
   set
@@ -257,6 +263,7 @@ function prepare(target, root, type, props) {
       object,
       eventCount: 0,
       handlers: {},
+      previousVisible: undefined,
       isHidden: false
     };
     if (object) object.__r3f = instance;
@@ -440,6 +447,12 @@ function applyProps(object, props) {
     // Ignore setting undefined props
     // https://github.com/pmndrs/react-three-fiber/issues/274
     if (value === undefined) continue;
+
+    // Update the visibility to restore without revealing a hidden instance.
+    if (prop === 'visible' && instance != null && instance.isHidden && instance.previousVisible !== undefined) {
+      instance.previousVisible = value;
+      continue;
+    }
     let {
       root,
       key,
@@ -1364,9 +1377,326 @@ useLoader.clear = function (loader, input) {
   e = 2,
   i$1 = 268435456;
 
+// Shim for OffscreenCanvas since it was removed from DOM types
+// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/54988
+
+/** What a root has applied, so its next configuration applies only what changed */
+
+const shallow = {
+  objects: 'shallow'
+};
+
+/** The renderer to configure, or a promise for one from an async factory */
+function createRenderer(canvas, gl) {
+  const defaults = {
+    canvas,
+    powerPreference: 'high-performance',
+    antialias: true,
+    alpha: true
+  };
+  if (typeof gl === 'function') return gl(defaults);
+  if (isRenderer(gl)) return gl;
+  return new THREE__namespace.WebGLRenderer({
+    ...defaults,
+    ...gl
+  });
+}
+function computeInitialSize(canvas, size) {
+  if (!size && typeof HTMLCanvasElement !== 'undefined' && canvas instanceof HTMLCanvasElement && canvas.parentElement) {
+    const {
+      width,
+      height,
+      top,
+      left
+    } = canvas.parentElement.getBoundingClientRect();
+    return {
+      width,
+      height,
+      top,
+      left
+    };
+  } else if (!size && typeof OffscreenCanvas !== 'undefined' && canvas instanceof OffscreenCanvas) {
+    return {
+      width: canvas.width,
+      height: canvas.height,
+      top: 0,
+      left: 0
+    };
+  }
+  return {
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0,
+    ...size
+  };
+}
+
+/**
+ * Applies the inputs that changed since the last configuration applied in full, to a root whose
+ * renderer is installed. A runtime change, such as setFrameloop or an edit to gl.shadowMap, lasts
+ * until its input changes. The pixel ratio instead follows the device on every call. Objects and
+ * arrays compare shallowly, so an equal inline value is unchanged.
+ */
+function applyRootConfiguration({
+  store,
+  configuration
+}, canvas, props) {
+  const {
+    gl: glConfig,
+    scene: sceneOptions,
+    camera: cameraOptions,
+    shadows = false,
+    linear = false,
+    flat = false,
+    legacy = false,
+    frameloop = 'always',
+    dpr = [1, 2],
+    performance,
+    onPointerMissed
+  } = props;
+  const size = computeInitialSize(canvas, props.size);
+  const next = {
+    ...props,
+    shadows,
+    linear,
+    flat,
+    legacy,
+    frameloop,
+    size
+  };
+  const state = store.getState();
+  const gl = state.gl;
+  const last = configuration.previous;
+  const changed = key => !last || !is.equ(next[key], last[key], shallow);
+  // A failure can leave inputs partly applied, so the next configuration applies all of them
+  configuration.previous = undefined;
+
+  // Set up raycaster (one time only!)
+  let raycaster = state.raycaster;
+  if (!raycaster) state.set({
+    raycaster: raycaster = new THREE__namespace.Raycaster()
+  });
+  if (changed('raycaster')) {
+    var _props$raycaster;
+    const {
+      params,
+      ...options
+    } = (_props$raycaster = props.raycaster) != null ? _props$raycaster : {};
+    applyProps(raycaster, {
+      ...options,
+      params: {
+        ...raycaster.params,
+        ...params
+      }
+    });
+  }
+
+  // Create default camera, don't overwrite any user-set state
+  if (!state.camera || state.camera === configuration.camera && changed('camera')) {
+    configuration.camera = cameraOptions;
+    const isCamera = cameraOptions == null ? void 0 : cameraOptions.isCamera;
+    const camera = isCamera ? cameraOptions : props.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;
+      if (cameraOptions) {
+        applyProps(camera, cameraOptions);
+        // Preserve user-defined frustum if possible
+        // https://github.com/pmndrs/react-three-fiber/issues/3160
+        if (!camera.manual) {
+          if ('aspect' in cameraOptions || 'left' in cameraOptions || 'right' in cameraOptions || 'bottom' in cameraOptions || 'top' in cameraOptions) {
+            camera.manual = true;
+            camera.updateProjectionMatrix();
+          }
+        }
+      }
+      // Always look at center by default
+      if (!state.camera && !(cameraOptions != null && cameraOptions.rotation)) camera.lookAt(0, 0, 0);
+    }
+    state.set({
+      camera
+    });
+
+    // Configure raycaster
+    // https://github.com/pmndrs/react-xr/issues/300
+    raycaster.camera = camera;
+  }
+
+  // Set up scene (one time only!)
+  if (!state.scene) {
+    let scene;
+    if (sceneOptions != null && sceneOptions.isScene) {
+      scene = sceneOptions;
+      prepare(scene, store, '', {});
+    } else {
+      scene = new THREE__namespace.Scene();
+      prepare(scene, store, '', {});
+      if (sceneOptions) applyProps(scene, sceneOptions);
+    }
+    state.set({
+      scene
+    });
+  }
+
+  // Store events internally
+  if (props.events && !state.events.handlers) state.set({
+    events: props.events(store)
+  });
+  if (changed('size')) state.setSize(size.width, size.height, size.top, size.left);
+  // The ratio follows window.devicePixelRatio, which changes with browser zoom or another display
+  if (state.viewport.dpr !== calculateDpr(dpr)) state.setDpr(dpr);
+  if (changed('frameloop')) state.setFrameloop(frameloop);
+  if (changed('onPointerMissed')) state.set({
+    onPointerMissed
+  });
+  // Performance options merge, so removing them keeps the current settings
+  if (performance && changed('performance')) {
+    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();
+      if (state.frameloop === 'never') return;
+      advance(timestamp, true, state, frame);
+    };
+
+    // Toggle render switching on session
+    const handleSessionChange = () => {
+      const state = store.getState();
+      state.gl.xr.enabled = state.gl.xr.isPresenting;
+      state.gl.xr.setAnimationLoop(state.gl.xr.isPresenting ? handleXRFrame : null);
+      if (!state.gl.xr.isPresenting) invalidate(state);
+    };
+
+    // WebXR session manager
+    const xr = {
+      connect() {
+        const gl = store.getState().gl;
+        gl.xr.addEventListener('sessionstart', handleSessionChange);
+        gl.xr.addEventListener('sessionend', handleSessionChange);
+      },
+      disconnect() {
+        const gl = store.getState().gl;
+        gl.xr.removeEventListener('sessionstart', handleSessionChange);
+        gl.xr.removeEventListener('sessionend', handleSessionChange);
+      }
+    };
+
+    // Subscribe to WebXR session events
+    if (typeof ((_gl$xr = gl.xr) == null ? void 0 : _gl$xr.addEventListener) === 'function') xr.connect();
+    state.set({
+      xr
+    });
+  }
+
+  // Set shadowmap
+  if (gl.shadowMap && changed('shadows')) {
+    const oldEnabled = gl.shadowMap.enabled;
+    const oldType = gl.shadowMap.type;
+    gl.shadowMap.enabled = !!shadows;
+    if (is.boo(shadows)) {
+      gl.shadowMap.type = THREE__namespace.PCFSoftShadowMap;
+    } else if (is.str(shadows)) {
+      var _types$shadows;
+      const types = {
+        basic: THREE__namespace.BasicShadowMap,
+        percentage: THREE__namespace.PCFShadowMap,
+        soft: THREE__namespace.PCFSoftShadowMap,
+        variance: THREE__namespace.VSMShadowMap
+      };
+      gl.shadowMap.type = (_types$shadows = types[shadows]) != null ? _types$shadows : THREE__namespace.PCFSoftShadowMap;
+    } else if (is.obj(shadows)) {
+      Object.assign(gl.shadowMap, shadows);
+    }
+    if (oldEnabled !== gl.shadowMap.enabled || oldType !== gl.shadowMap.type) gl.shadowMap.needsUpdate = true;
+  }
+
+  // Explicit renderer options take precedence over the color shorthands
+  const glProps = glConfig && !is.fun(glConfig) && !isRenderer(glConfig) ? glConfig : undefined;
+  if (changed('legacy')) {
+    THREE__namespace.ColorManagement.enabled = !legacy;
+    state.set({
+      legacy
+    });
+  }
+  if (changed('linear')) {
+    if ((glProps == null ? void 0 : glProps.outputColorSpace) === undefined) {
+      gl.outputColorSpace = linear ? THREE__namespace.LinearSRGBColorSpace : THREE__namespace.SRGBColorSpace;
+    }
+    state.set({
+      linear
+    });
+  }
+  if (changed('flat')) {
+    if ((glProps == null ? void 0 : glProps.toneMapping) === undefined) gl.toneMapping = flat ? THREE__namespace.NoToneMapping : THREE__namespace.ACESFilmicToneMapping;
+    state.set({
+      flat
+    });
+  }
+
+  // Set gl props
+  if (glProps && changed('gl')) applyProps(gl, glProps);
+  configuration.previous = next;
+}
+
+const isPromiseLike = value => typeof (value == null ? void 0 : value.then) === 'function';
+
+/** A promise tagged with its state, the protocol React's `use` reads */
+
+const fulfilled = value => Object.assign(Promise.resolve(value), {
+  status: 'fulfilled',
+  value
+});
+const rejected = reason => {
+  const promise = Promise.reject(reason);
+  promise.catch(() => {}); // the reason is read from `status`
+  return Object.assign(promise, {
+    status: 'rejected',
+    reason
+  });
+};
+
+/** A pending promise, settled once from outside. Its `status` updates the moment it settles */
+const deferred = () => {
+  let resolve;
+  let reject;
+  const promise = new Promise((yes, no) => {
+    resolve = value => {
+      Object.assign(promise, {
+        status: 'fulfilled',
+        value
+      });
+      yes(value);
+    };
+    reject = reason => {
+      Object.assign(promise, {
+        status: 'rejected',
+        reason
+      });
+      no(reason);
+    };
+  });
+  promise.status = 'pending';
+  promise.catch(() => {}); // the reason is read from `status`
+  return {
+    promise,
+    resolve,
+    reject
+  };
+};
+
 var packageData = {
 	name: "@react-three/fiber",
-	version: "9.8.0",
+	version: "9.8.1",
 	description: "A React renderer for Threejs",
 	keywords: [
 		"react",
@@ -1417,7 +1747,7 @@ var packageData = {
 		"@types/webxr": "*",
 		"base64-js": "^1.5.1",
 		buffer: "^6.0.3",
-		"its-fine": "^2.0.0",
+		"its-fine": "^2.1.1",
 		"react-use-measure": "^2.1.7",
 		scheduler: "^0.28.0",
 		"suspend-react": "^0.1.3",
@@ -16195,6 +16525,7 @@ function hideInstance(instance) {
     if (instance.props.attach && (_instance$parent = instance.parent) != null && _instance$parent.object) {
       detach(instance.parent, instance);
     } else if (isObject3D(instance.object)) {
+      instance.previousVisible = instance.object.visible;
       instance.object.visible = false;
     }
     instance.isHidden = true;
@@ -16206,9 +16537,11 @@ function unhideInstance(instance) {
     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;
+    } else if (isObject3D(instance.object)) {
+      var _instance$previousVis;
+      instance.object.visible = (_instance$previousVis = instance.previousVisible) != null ? _instance$previousVis : true;
     }
+    instance.previousVisible = undefined;
     instance.isHidden = false;
     invalidateInstance(instance);
   }
@@ -16753,76 +17086,49 @@ const reconciler = /* @__PURE__ */createReconciler({
   getSuspendedCommitReason: (_state, _rootContainer) => null
 });
 
-const isPromiseLike = value => typeof (value == null ? void 0 : value.then) === 'function';
-
-/** A promise tagged with its state, the protocol React's `use` reads */
-
-const fulfilled = value => Object.assign(Promise.resolve(value), {
-  status: 'fulfilled',
-  value
-});
-const rejected = reason => {
-  const promise = Promise.reject(reason);
-  promise.catch(() => {}); // the reason is read from `status`
-  return Object.assign(promise, {
-    status: 'rejected',
-    reason
-  });
-};
-
-/** Tags `promise` in place once it settles. */
-const tracked = promise => {
-  const result = Promise.resolve(promise);
-  result.status = 'pending';
-  // Statement bodies: returning `result` would make this derived promise adopt its rejection
-  result.then(value => {
-    Object.assign(result, {
-      status: 'fulfilled',
-      value
-    });
-  }, reason => {
-    Object.assign(result, {
-      status: 'rejected',
-      reason
-    });
-  });
-  return result;
-};
+/**
+ * Force React to flush any updates inside the provided callback synchronously and immediately.
+ * All the same caveats documented for react-dom's `flushSync` apply here (see https://react.dev/reference/react-dom/flushSync).
+ * Nevertheless, sometimes one needs to render synchronously, for example to keep DOM and 3D changes in lock-step without
+ * having to revert to a non-React solution. Note: this will only flush updates within the `Canvas` root.
+ */
+function flushSync(fn) {
+  // @ts-ignore - reconciler types are not maintained
+  return reconciler.flushSyncFromReconciler(fn);
+}
 
 const _roots = new Map();
-const shallowLoose = {
-  objects: 'shallow',
-  strict: false
-};
-function computeInitialSize(canvas, size) {
-  if (!size && typeof HTMLCanvasElement !== 'undefined' && canvas instanceof HTMLCanvasElement && canvas.parentElement) {
-    const {
-      width,
-      height,
-      top,
-      left
-    } = canvas.parentElement.getBoundingClientRect();
-    return {
-      width,
-      height,
-      top,
-      left
-    };
-  } else if (!size && typeof OffscreenCanvas !== 'undefined' && canvas instanceof OffscreenCanvas) {
-    return {
-      width: canvas.width,
-      height: canvas.height,
-      top: 0,
-      left: 0
-    };
+/**
+ * open -> closing -> disposed
+ *          | use
+ *          v
+ *         open
+ *
+ * Only closing can be cancelled. Each unmount carries a token, so only the latest one can dispose.
+ */
+function transitionRoot(root, event) {
+  const state = root.state;
+  switch (event.type) {
+    case 'use':
+      if (state.status === 'disposed') return false;
+      root.state = {
+        status: 'open'
+      };
+      return true;
+    case 'unmount':
+      if (state.status === 'disposed') return false;
+      root.state = {
+        status: 'closing',
+        token: event.token
+      };
+      return true;
+    case 'dispose':
+      if (state.status !== 'closing' || state.token !== event.token) return false;
+      root.state = {
+        status: 'disposed'
+      };
+      return true;
   }
-  return {
-    width: 0,
-    height: 0,
-    top: 0,
-    left: 0,
-    ...size
-  };
 }
 function createRoot(canvas) {
   // Check against mistaken use of createRoot
@@ -16867,286 +17173,84 @@ function createRoot(canvas) {
   const root = prevRoot || {
     fiber,
     store,
-    unmountClaim: null,
-    ready: fulfilled(undefined)
+    state: {
+      status: 'open'
+    },
+    ready: fulfilled(undefined),
+    configuration: {},
+    ownsRenderer: false
   };
   if (!prevRoot) _roots.set(canvas, root);
-
-  // Locals
-  let onCreated;
-  let lastCamera;
   let mounted = false;
   return {
     get ready() {
       return root.ready;
     },
     configure(props = {}) {
-      root.unmountClaim = null;
-      const {
-        gl: glConfig,
-        size: propsSize,
-        scene: sceneOptions,
-        events,
-        onCreated: onCreatedCallback,
-        shadows = false,
-        linear = false,
-        flat = false,
-        legacy = false,
-        orthographic = false,
-        frameloop = 'always',
-        dpr = [1, 2],
-        performance,
-        raycaster: raycastOptions,
-        camera: cameraOptions,
-        onPointerMissed
-      } = props;
-      const defaultProps = {
-        canvas: canvas,
-        powerPreference: 'high-performance',
-        antialias: true,
-        alpha: true
-      };
+      if (!transitionRoot(root, {
+        type: 'use'
+      })) {
+        return rejected(new Error('R3F: Cannot configure a root after disposal has started.'));
+      }
 
-      // Synchronous, and needs the renderer to exist
-      const apply = customRenderer => {
+      // Configuration applies in call order. Publishing first queues calls made while this one runs
+      const previous = root.ready;
+      const {
+        promise,
+        resolve,
+        reject
+      } = deferred();
+      root.ready = promise;
+      const apply = gl => {
         const state = store.getState();
-
         // Set up renderer (one time only!)
-        const first = !state.gl;
-        let gl = state.gl;
-        if (first) {
-          gl = isRenderer(customRenderer) ? customRenderer : new THREE__namespace.WebGLRenderer({
-            ...defaultProps,
-            ...glConfig
-          });
-          state.set({
-            gl
-          });
-        }
-
-        // Set up raycaster (one time only!)
-        let raycaster = state.raycaster;
-        if (!raycaster) state.set({
-          raycaster: raycaster = new THREE__namespace.Raycaster()
-        });
-
-        // Set raycaster options
-        const {
-          params,
-          ...options
-        } = raycastOptions || {};
-        if (!is.equ(options, raycaster, shallowLoose)) applyProps(raycaster, {
-          ...options
-        });
-        if (!is.equ(params, raycaster.params, shallowLoose)) applyProps(raycaster, {
-          params: {
-            ...raycaster.params,
-            ...params
-          }
-        });
-
-        // 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 == 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;
-            if (cameraOptions) {
-              applyProps(camera, cameraOptions);
-              // Preserve user-defined frustum if possible
-              // https://github.com/pmndrs/react-three-fiber/issues/3160
-              if (!camera.manual) {
-                if ('aspect' in cameraOptions || 'left' in cameraOptions || 'right' in cameraOptions || 'bottom' in cameraOptions || 'top' in cameraOptions) {
-                  camera.manual = true;
-                  camera.updateProjectionMatrix();
-                }
-              }
-            }
-            // Always look at center by default
-            if (!state.camera && !(cameraOptions != null && cameraOptions.rotation)) camera.lookAt(0, 0, 0);
-          }
-          state.set({
-            camera
-          });
-
-          // Configure raycaster
-          // https://github.com/pmndrs/react-xr/issues/300
-          raycaster.camera = camera;
-        }
-
-        // Set up scene (one time only!)
-        if (!state.scene) {
-          let scene;
-          if (sceneOptions != null && sceneOptions.isScene) {
-            scene = sceneOptions;
-            prepare(scene, store, '', {});
-          } else {
-            scene = new THREE__namespace.Scene();
-            prepare(scene, store, '', {});
-            if (sceneOptions) applyProps(scene, sceneOptions);
-          }
+        if (!state.gl) {
+          // R3F owns what it builds, a factory's result included, since it calls the factory
+          // once per root. A renderer instance belongs to the caller
+          root.ownsRenderer = !isRenderer(props.gl);
           state.set({
-            scene
+            gl: gl
           });
         }
-
-        // 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();
-            if (state.frameloop === 'never') return;
-            advance(timestamp, true, state, frame);
-          };
-
-          // Toggle render switching on session
-          const handleSessionChange = () => {
-            const state = store.getState();
-            state.gl.xr.enabled = state.gl.xr.isPresenting;
-            state.gl.xr.setAnimationLoop(state.gl.xr.isPresenting ? handleXRFrame : null);
-            if (!state.gl.xr.isPresenting) invalidate(state);
-          };
-
-          // WebXR session manager
-          const xr = {
-            connect() {
-              const gl = store.getState().gl;
-              gl.xr.addEventListener('sessionstart', handleSessionChange);
-              gl.xr.addEventListener('sessionend', handleSessionChange);
-            },
-            disconnect() {
-              const gl = store.getState().gl;
-              gl.xr.removeEventListener('sessionstart', handleSessionChange);
-              gl.xr.removeEventListener('sessionend', handleSessionChange);
-            }
-          };
-
-          // Subscribe to WebXR session events
-          if (typeof ((_gl$xr = gl.xr) == null ? void 0 : _gl$xr.addEventListener) === 'function') xr.connect();
-          state.set({
-            xr
-          });
-        }
-
-        // Set shadowmap
-        if (gl.shadowMap) {
-          const oldEnabled = gl.shadowMap.enabled;
-          const oldType = gl.shadowMap.type;
-          gl.shadowMap.enabled = !!shadows;
-          if (is.boo(shadows)) {
-            gl.shadowMap.type = THREE__namespace.PCFSoftShadowMap;
-          } else if (is.str(shadows)) {
-            var _types$shadows;
-            const types = {
-              basic: THREE__namespace.BasicShadowMap,
-              percentage: THREE__namespace.PCFShadowMap,
-              soft: THREE__namespace.PCFSoftShadowMap,
-              variance: THREE__namespace.VSMShadowMap
-            };
-            gl.shadowMap.type = (_types$shadows = types[shadows]) != null ? _types$shadows : THREE__namespace.PCFSoftShadowMap;
-          } else if (is.obj(shadows)) {
-            Object.assign(gl.shadowMap, shadows);
-          }
-          if (oldEnabled !== gl.shadowMap.enabled || oldType !== gl.shadowMap.type) gl.shadowMap.needsUpdate = true;
-        }
-        THREE__namespace.ColorManagement.enabled = !legacy;
-
-        // Set color space and tonemapping preferences
-        if (first) {
-          gl.outputColorSpace = linear ? THREE__namespace.LinearSRGBColorSpace : THREE__namespace.SRGBColorSpace;
-          gl.toneMapping = flat ? THREE__namespace.NoToneMapping : THREE__namespace.ACESFilmicToneMapping;
-        }
-
-        // Update color management state
-        if (state.legacy !== legacy) state.set(() => ({
-          legacy
-        }));
-        if (state.linear !== linear) state.set(() => ({
-          linear
-        }));
-        if (state.flat !== flat) state.set(() => ({
-          flat
-        }));
-
-        // Set gl props
-        if (glConfig && !is.fun(glConfig) && !isRenderer(glConfig) && !is.equ(glConfig, gl, shallowLoose)) applyProps(gl, glConfig);
-
-        // Set locals
-        onCreated = onCreatedCallback;
-      };
-      const fail = error => {
-        const failure = rejected(error);
-        root.ready = failure;
-        return failure;
+        applyRootConfiguration(root, canvas, props);
+        resolve(this);
       };
-      const run = customRenderer => {
+      const run = () => {
         try {
-          apply(customRenderer);
-          root.ready = fulfilled(undefined);
-          return fulfilled(this);
+          var _store$getState$gl;
+          const gl = (_store$getState$gl = store.getState().gl) != null ? _store$getState$gl : createRenderer(canvas, props.gl);
+          // Only an async renderer factory makes configuration asynchronous
+          if (isPromiseLike(gl)) Promise.resolve(gl).then(apply).catch(reject);else apply(gl);
         } catch (error) {
-          return fail(error);
+          reject(error);
         }
       };
-
-      // The renderer exists, so applying props is synchronous
-      if (store.getState().gl) return run();
-
-      // Another configure is creating it. Chaining keeps them in call order
-      if (root.ready.status === 'pending') return tracked(root.ready.then(() => run()));
-
-      // Only an async factory makes configure asynchronous
-      let customRenderer;
-      try {
-        customRenderer = typeof glConfig === 'function' ? glConfig(defaultProps) : glConfig;
-      } catch (error) {
-        return fail(error);
-      }
-      if (!isPromiseLike(customRenderer)) return run(customRenderer);
-      const configuring = tracked(customRenderer.then(run, fail));
-      root.ready = configuring;
-      return configuring;
+      if (previous.status === 'pending') previous.then(run, reject);else run();
+      return promise;
     },
     render(children) {
-      if (_roots.get(canvas) !== root) return store;
-      // Using the root cancels a teardown waiting on React
-      root.unmountClaim = null;
-      const element = /*#__PURE__*/jsxRuntime.jsx(Provider, {
-        store: store,
-        children: children,
-        onCreated: onCreated,
-        rootElement: canvas
-      });
+      if (!transitionRoot(root, {
+        type: 'use'
+      })) return store;
+
+      // The root has to be configured before it can be rendered
+      if (!store.getState().gl && root.ready.status === 'fulfilled') this.configure();
+      if (root.ready.status === 'rejected') throw root.ready.reason;
       const commit = () => {
-        // The root may have been unmounted or claimed while we waited
-        if (_roots.get(canvas) !== root || root.unmountClaim) return;
+        var _root$configuration$p;
+        if (root.state.status !== 'open' || root.ready.status === 'rejected') return;
+        // Wait for all queued configuration, including any queued while waiting
+        if (root.ready.status === 'pending') {
+          root.ready.then(commit, logRecoverableError);
+          return;
+        }
+        const onCreated = (_root$configuration$p = root.configuration.previous) == null ? void 0 : _root$configuration$p.onCreated;
+        const element = /*#__PURE__*/jsxRuntime.jsx(Provider, {
+          store: store,
+          children: children,
+          onCreated: onCreated,
+          rootElement: canvas
+        });
         if (mounted) {
           reconciler.updateContainer(element, fiber, null, noop);
           return;
@@ -17158,22 +17262,11 @@ function createRoot(canvas) {
         // @ts-ignore - reconciler types are not maintained
         reconciler.flushSyncWork();
       };
-
-      // The root has to be configured before it can be rendered
-      if (!store.getState().gl && root.ready.status === 'fulfilled') this.configure();
-      switch (root.ready.status) {
-        case 'pending':
-          root.ready.then(commit, logRecoverableError);
-          break;
-        case 'rejected':
-          throw root.ready.reason;
-        default:
-          commit();
-      }
+      commit();
       return store;
     },
     unmount() {
-      unmountComponentAtNode(canvas);
+      if (_roots.get(canvas) === root) unmountComponentAtNode(canvas);
     }
   };
 }
@@ -17204,147 +17297,81 @@ function Provider({
     children: children
   });
 }
-function unmountComponentAtNode(canvas, callback) {
-  const root = _roots.get(canvas);
-  if (!root) return;
-
-  // Cleared by configure and render, which cancels the teardown
-  const claim = root.unmountClaim = Symbol('unmount');
-  reconciler.updateContainer(null, root.fiber, null, () => {
-    if (root.unmountClaim !== claim) return;
-
-    // Effect cleanups flush before the next update
-    reconciler.updateContainer(null, root.fiber, null, () => {
-      if (root.unmountClaim !== claim) return;
-      const teardown = () => {
-        if (root.unmountClaim !== claim) return;
-        root.unmountClaim = null;
-        const state = root.store.getState();
-        state.internal.active = false;
-        try {
-          var _state$gl, _state$gl$renderLists, _state$gl2, _state$gl3;
-          state.events.disconnect == null ? void 0 : state.events.disconnect();
-          (_state$gl = state.gl) == null ? void 0 : (_state$gl$renderLists = _state$gl.renderLists) == null ? void 0 : _state$gl$renderLists.dispose == null ? void 0 : _state$gl$renderLists.dispose();
-          (_state$gl2 = state.gl) == null ? void 0 : _state$gl2.forceContextLoss == null ? void 0 : _state$gl2.forceContextLoss();
-          if ((_state$gl3 = state.gl) != null && _state$gl3.xr) state.xr.disconnect();
-          dispose(state.scene);
-        } catch (e) {
-          /* ... */
-        }
-        _roots.delete(canvas);
-        if (callback) callback(canvas);
-      };
 
-      // A renderer still being created has to exist before it can be disposed
-      if (root.ready.status === 'pending') root.ready.then(teardown, teardown);else teardown();
-    });
+/**
+ * Frees a renderer R3F built. WebGLRenderer.dispose() releases programs and caches but keeps its
+ * context until garbage collection, and browsers cap live WebGL contexts, so the context is lost
+ * after it. A WebGPURenderer (from a factory) releases its device and context inside dispose().
+ */
+function disposeRenderer(gl) {
+  // Avoid starting initialization through three's dispose(). A factory must await init()
+  // before returning its renderer so readiness includes initialization and teardown can wait.
+  if ((gl.hasInitialized == null ? void 0 : gl.hasInitialized()) === false) return;
+  const disposed = attempt(() => {
+    var _gl$renderLists;
+    return gl.dispose ? gl.dispose() : (_gl$renderLists = gl.renderLists) == null ? void 0 : _gl$renderLists.dispose == null ? void 0 : _gl$renderLists.dispose();
   });
+  // WebGPURenderer.dispose() is async from three r186
+  if (isPromiseLike(disposed)) {
+    return Promise.resolve(disposed).catch(error => console.warn('[R3F] Error disposing renderer', error)).then(() => attempt(() => gl.forceContextLoss == null ? void 0 : gl.forceContextLoss()));
+  }
+  attempt(() => gl.forceContextLoss == null ? void 0 : gl.forceContextLoss());
 }
-function createPortal(children, container, state) {
-  return /*#__PURE__*/jsxRuntime.jsx(Portal, {
-    children: children,
-    container: container,
-    state: state
-  });
+function attempt(step) {
+  try {
+    return step();
+  } catch (error) {
+    console.warn('[R3F] Error while unmounting root; teardown may be incomplete:', error);
+  }
 }
-function Portal({
-  state = {},
-  children,
-  container
-}) {
-  /** This has to be a component because it would not be able to call useThree/useStore otherwise since
-   *  if this is our environment, then we are not in r3f's renderer but in react-dom, it would trigger
-   *  the "R3F hooks can only be used within the Canvas component!" warning:
-   *  <Canvas>
-   *    {createPortal(...)} */
-  const {
-    events,
-    size,
-    ...rest
-  } = state;
-  const previousRoot = useStore();
-  const [raycaster] = React__namespace.useState(() => new THREE__namespace.Raycaster());
-  const [pointer] = React__namespace.useState(() => new THREE__namespace.Vector2());
-  const inject = useMutableCallback((rootState, injectState) => {
-    let viewport = undefined;
-    if (injectState.camera && size) {
-      const camera = injectState.camera;
-      // Calculate the override viewport, if present
-      viewport = rootState.viewport.getCurrentViewport(camera, new THREE__namespace.Vector3(), size);
-      // Update the portal camera, if it differs from the previous layer
-      if (camera !== rootState.camera) updateCamera(camera, size);
+function unmountComponentAtNode(canvas, callback) {
+  const root = _roots.get(canvas);
+  const token = Symbol('unmount');
+  if (!root || !transitionRoot(root, {
+    type: 'unmount',
+    token
+  })) return;
+  const teardown = () => {
+    var _state$gl;
+    // Configuration accepted before the unmount finishes first, so a renderer it creates is released too
+    if (root.ready.status === 'pending') {
+      root.ready.then(teardown, teardown);
+      return;
     }
-    return {
-      // The intersect consists of the previous root state
-      ...rootState,
-      ...injectState,
-      // Portals have their own scene, which forms the root, a raycaster and a pointer
-      scene: container,
-      raycaster,
-      pointer,
-      mouse: pointer,
-      // Their previous root is the layer before it
-      previousRoot,
-      // Events, size and viewport can be overridden by the inject layer
-      events: {
-        ...rootState.events,
-        ...injectState.events,
-        ...events
-      },
-      size: {
-        ...rootState.size,
-        ...size
-      },
-      viewport: {
-        ...rootState.viewport,
-        ...viewport
-      },
-      // Layers are allowed to override events
-      setEvents: events => injectState.set(state => ({
-        ...state,
-        events: {
-          ...state.events,
-          ...events
-        }
-      }))
-    };
-  });
-  const usePortalStore = React__namespace.useMemo(() => {
-    // Create a mirrored store, based on the previous root with a few overrides ...
-    const store = traditional.createWithEqualityFn((set, get) => ({
-      ...rest,
-      set,
-      get
-    }));
-
-    // Subscribe to previous root-state and copy changes over to the mirrored portal-state
-    const onMutate = prev => store.setState(state => inject.current(prev, state));
-    onMutate(previousRoot.getState());
-    previousRoot.subscribe(onMutate);
-    return store;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [previousRoot, container]);
-  return (
-    /*#__PURE__*/
-    // @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)
-    })
-  );
-}
+    // Refused when the root was used again since this unmount
+    if (!transitionRoot(root, {
+      type: 'dispose',
+      token
+    })) return;
+    // Close the gates before invoking user cleanup code.
+    _roots.delete(canvas);
+    const state = root.store.getState();
+    state.internal.active = false;
 
-/**
- * Force React to flush any updates inside the provided callback synchronously and immediately.
- * All the same caveats documented for react-dom's `flushSync` apply here (see https://react.dev/reference/react-dom/flushSync).
- * Nevertheless, sometimes one needs to render synchronously, for example to keep DOM and 3D changes in lock-step without
- * having to revert to a non-React solution. Note: this will only flush updates within the `Canvas` root.
- */
-function flushSync(fn) {
-  // @ts-ignore - reconciler types are not maintained
-  return reconciler.flushSyncFromReconciler(fn);
+    // Release what uses the renderer before the renderer itself
+    attempt(() => state.events.disconnect == null ? void 0 : state.events.disconnect());
+    if ((_state$gl = state.gl) != null && _state$gl.xr) attempt(() => state.xr.disconnect());
+    if (state.scene) attempt(() => dispose(state.scene));
+    const gl = state.gl;
+    let disposal = undefined;
+    if (gl && root.ownsRenderer) {
+      disposal = attempt(() => disposeRenderer(gl));
+    } else if (gl) {
+      // A renderer passed in keeps its 9.x teardown: its context is lost but it is not disposed
+      attempt(() => {
+        var _gl$renderLists2;
+        return (_gl$renderLists2 = gl.renderLists) == null ? void 0 : _gl$renderLists2.dispose == null ? void 0 : _gl$renderLists2.dispose();
+      });
+      attempt(() => gl.forceContextLoss == null ? void 0 : gl.forceContextLoss());
+    }
+    if (isPromiseLike(disposal)) disposal.then(() => callback == null ? void 0 : callback(canvas));else callback == null ? void 0 : callback(canvas);
+  };
+  reconciler.updateContainer(null, root.fiber, null, () => {
+    // A root used again since the unmount keeps its new children
+    if (root.state.status !== 'closing' || root.state.token !== token) return;
+    // Effect cleanups flush before the next update
+    reconciler.updateContainer(null, root.fiber, null, teardown);
+  });
 }
 
 function createSubs(callback, subs) {
@@ -17499,6 +17526,102 @@ function advance(timestamp, runGlobalEffects = true, state, frame) {
   if (runGlobalEffects) flushGlobalEffects('after', timestamp);
 }
 
+function createPortal(children, container, state) {
+  return /*#__PURE__*/jsxRuntime.jsx(Portal, {
+    children: children,
+    container: container,
+    state: state
+  });
+}
+function Portal({
+  state = {},
+  children,
+  container
+}) {
+  /** This has to be a component because it would not be able to call useThree/useStore otherwise since
+   *  if this is our environment, then we are not in r3f's renderer but in react-dom, it would trigger
+   *  the "R3F hooks can only be used within the Canvas component!" warning:
+   *  <Canvas>
+   *    {createPortal(...)} */
+  const {
+    events,
+    size,
+    ...rest
+  } = state;
+  const previousRoot = useStore();
+  const [raycaster] = React__namespace.useState(() => new THREE__namespace.Raycaster());
+  const [pointer] = React__namespace.useState(() => new THREE__namespace.Vector2());
+  const inject = useMutableCallback((rootState, injectState) => {
+    let viewport = undefined;
+    if (injectState.camera && size) {
+      const camera = injectState.camera;
+      // Calculate the override viewport, if present
+      viewport = rootState.viewport.getCurrentViewport(camera, new THREE__namespace.Vector3(), size);
+      // Update the portal camera, if it differs from the previous layer
+      if (camera !== rootState.camera) updateCamera(camera, size);
+    }
+    return {
+      // The intersect consists of the previous root state
+      ...rootState,
+      ...injectState,
+      // Portals have their own scene, which forms the root, a raycaster and a pointer
+      scene: container,
+      raycaster,
+      pointer,
+      mouse: pointer,
+      // Their previous root is the layer before it
+      previousRoot,
+      // Events, size and viewport can be overridden by the inject layer
+      events: {
+        ...rootState.events,
+        ...injectState.events,
+        ...events
+      },
+      size: {
+        ...rootState.size,
+        ...size
+      },
+      viewport: {
+        ...rootState.viewport,
+        ...viewport
+      },
+      // Layers are allowed to override events
+      setEvents: events => injectState.set(state => ({
+        ...state,
+        events: {
+          ...state.events,
+          ...events
+        }
+      }))
+    };
+  });
+  const usePortalStore = React__namespace.useMemo(() => {
+    // Create a mirrored store, based on the previous root with a few overrides ...
+    const store = traditional.createWithEqualityFn((set, get) => ({
+      ...rest,
+      set,
+      get
+    }));
+
+    // Subscribe to previous root-state and copy changes over to the mirrored portal-state
+    const onMutate = prev => store.setState(state => inject.current(prev, state));
+    onMutate(previousRoot.getState());
+    previousRoot.subscribe(onMutate);
+    return store;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [previousRoot, container]);
+  return (
+    /*#__PURE__*/
+    // @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)
+    })
+  );
+}
+
 const DOM_EVENTS = {
   onClick: ['click', false],
   onContextMenu: ['contextmenu', false],