@react-three/fiber 9.8.0 → 9.8.1

package/dist/{events-803f4abc.esm.js → events-9ce18a08.esm.js}

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import React__default from 'react';
 import * as THREE from 'three';
+import { jsx, Fragment } from 'react/jsx-runtime';
 import { createWithEqualityFn } from 'zustand/traditional';
 import { suspend, preload, clear } from 'suspend-react';
 import w1, { unstable_getCurrentPriorityLevel, unstable_IdlePriority, unstable_LowPriority, unstable_NormalPriority, unstable_UserBlockingPriority, unstable_ImmediatePriority, unstable_scheduleCallback } from 'scheduler';
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { useFiber, useContextBridge, traverseFiber } from 'its-fine';
+import { useFiber, useContextBridge, traverseFiber, useActivityBridge as useActivityBridge$1 } from 'its-fine';
 
 var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
@@ -70,23 +70,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['Activity' + ''] ? useActivityBridge$1 : () => React.Fragment;
 /**
- * Bridges renderer Context and StrictMode from a primary renderer.
+ * Bridges Context, StrictMode, and Activity visibility from a primary renderer.
  */
 function useBridge() {
   const fiber = useFiber();
   const ContextBridge = useContextBridge();
+  const ActivityBridge = useActivityBridge();
   return React.useMemo(() => ({
     children
   }) => {
     const strict = !!traverseFiber(fiber, true, node => node.type === React.StrictMode);
     const Root = strict ? React.StrictMode : React.Fragment;
     return /*#__PURE__*/jsx(Root, {
-      children: /*#__PURE__*/jsx(ContextBridge, {
-        children: children
+      children: /*#__PURE__*/jsx(ActivityBridge, {
+        children: /*#__PURE__*/jsx(ContextBridge, {
+          children: children
+        })
       })
     });
-  }, [fiber, ContextBridge]);
+  }, [fiber, ContextBridge, ActivityBridge]);
 }
 function Block({
   set
@@ -232,6 +238,7 @@ function prepare(target, root, type, props) {
       object,
       eventCount: 0,
       handlers: {},
+      previousVisible: undefined,
       isHidden: false
     };
     if (object) object.__r3f = instance;
@@ -415,6 +422,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,
@@ -1339,9 +1352,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.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.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.OrthographicCamera(0, 0, 0, 0, 0.1, 1000) : new THREE.PerspectiveCamera(75, 0, 0.1, 1000);
+    if (!isCamera) {
+      camera.position.z = 5;
+      if (cameraOptions) {
+        applyProps(camera, cameraOptions);
+        // 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.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.PCFSoftShadowMap;
+    } else if (is.str(shadows)) {
+      var _types$shadows;
+      const types = {
+        basic: THREE.BasicShadowMap,
+        percentage: THREE.PCFShadowMap,
+        soft: THREE.PCFSoftShadowMap,
+        variance: THREE.VSMShadowMap
+      };
+      gl.shadowMap.type = (_types$shadows = types[shadows]) != null ? _types$shadows : THREE.PCFSoftShadowMap;
+    } else if (is.obj(shadows)) {
+      Object.assign(gl.shadowMap, shadows);
+    }
+    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.ColorManagement.enabled = !legacy;
+    state.set({
+      legacy
+    });
+  }
+  if (changed('linear')) {
+    if ((glProps == null ? void 0 : glProps.outputColorSpace) === undefined) {
+      gl.outputColorSpace = linear ? THREE.LinearSRGBColorSpace : THREE.SRGBColorSpace;
+    }
+    state.set({
+      linear
+    });
+  }
+  if (changed('flat')) {
+    if ((glProps == null ? void 0 : glProps.toneMapping) === undefined) gl.toneMapping = flat ? THREE.NoToneMapping : THREE.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",
@@ -1392,7 +1722,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",
@@ -16170,6 +16500,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;
@@ -16181,9 +16512,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);
   }
@@ -16728,76 +17061,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
@@ -16842,286 +17148,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.WebGLRenderer({
-            ...defaultProps,
-            ...glConfig
-          });
-          state.set({
-            gl
-          });
-        }
-
-        // Set up raycaster (one time only!)
-        let raycaster = state.raycaster;
-        if (!raycaster) state.set({
-          raycaster: raycaster = new THREE.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.OrthographicCamera(0, 0, 0, 0, 0.1, 1000) : new THREE.PerspectiveCamera(75, 0, 0.1, 1000);
-          if (!isCamera) {
-            camera.position.z = 5;
-            if (cameraOptions) {
-              applyProps(camera, cameraOptions);
-              // 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.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.PCFSoftShadowMap;
-          } else if (is.str(shadows)) {
-            var _types$shadows;
-            const types = {
-              basic: THREE.BasicShadowMap,
-              percentage: THREE.PCFShadowMap,
-              soft: THREE.PCFSoftShadowMap,
-              variance: THREE.VSMShadowMap
-            };
-            gl.shadowMap.type = (_types$shadows = types[shadows]) != null ? _types$shadows : THREE.PCFSoftShadowMap;
-          } else if (is.obj(shadows)) {
-            Object.assign(gl.shadowMap, shadows);
-          }
-          if (oldEnabled !== gl.shadowMap.enabled || oldType !== gl.shadowMap.type) gl.shadowMap.needsUpdate = true;
-        }
-        THREE.ColorManagement.enabled = !legacy;
-
-        // Set color space and tonemapping preferences
-        if (first) {
-          gl.outputColorSpace = linear ? THREE.LinearSRGBColorSpace : THREE.SRGBColorSpace;
-          gl.toneMapping = flat ? THREE.NoToneMapping : THREE.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__*/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__*/jsx(Provider, {
+          store: store,
+          children: children,
+          onCreated: onCreated,
+          rootElement: canvas
+        });
         if (mounted) {
           reconciler.updateContainer(element, fiber, null, noop);
           return;
@@ -17133,22 +17237,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);
     }
   };
 }
@@ -17179,147 +17272,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__*/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.useState(() => new THREE.Raycaster());
-  const [pointer] = React.useState(() => new THREE.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.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.useMemo(() => {
-    // Create a mirrored store, based on the previous root with a few overrides ...
-    const store = 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
-    jsx(Fragment, {
-      children: reconciler.createPortal( /*#__PURE__*/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) {
@@ -17474,6 +17501,102 @@ function advance(timestamp, runGlobalEffects = true, state, frame) {
   if (runGlobalEffects) flushGlobalEffects('after', timestamp);
 }
 
+function createPortal(children, container, state) {
+  return /*#__PURE__*/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.useState(() => new THREE.Raycaster());
+  const [pointer] = React.useState(() => new THREE.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.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.useMemo(() => {
+    // Create a mirrored store, based on the previous root with a few overrides ...
+    const store = 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
+    jsx(Fragment, {
+      children: reconciler.createPortal( /*#__PURE__*/jsx(context.Provider, {
+        value: usePortalStore,
+        children: children
+      }), usePortalStore, null)
+    })
+  );
+}
+
 const DOM_EVENTS = {
   onClick: ['click', false],
   onContextMenu: ['contextmenu', false],
@@ -17560,4 +17683,4 @@ function createPointerEvents(store) {
   };
 }
 
-export { useInstanceHandle as A, Block as B, useStore as C, useThree as D, ErrorBoundary as E, useFrame as F, useGraph as G, useLoader as H, _roots as _, useMutableCallback as a, useGate as b, useIsomorphicLayoutEffect as c, createRoot as d, extend as e, unmountComponentAtNode as f, createPointerEvents as g, createEvents as h, isRef as i, flushGlobalEffects as j, addEffect as k, addAfterEffect as l, addTail as m, invalidate as n, advance as o, createPortal as p, flushSync as q, reconciler as r, context as s, threeTypes as t, useBridge as u, applyProps as v, getRootState as w, dispose as x, act as y, buildGraph as z };
+export { useInstanceHandle as A, Block as B, useStore as C, useThree as D, ErrorBoundary as E, useFrame as F, useGraph as G, useLoader as H, _roots as _, useMutableCallback as a, useGate as b, useIsomorphicLayoutEffect as c, createRoot as d, extend as e, createPointerEvents as f, createEvents as g, flushGlobalEffects as h, isRef as i, addEffect as j, addAfterEffect as k, addTail as l, invalidate as m, advance as n, flushSync as o, unmountComponentAtNode as p, createPortal as q, reconciler as r, context as s, threeTypes as t, useBridge as u, applyProps as v, getRootState as w, dispose as x, act as y, buildGraph as z };