@react-three/fiber 9.8.0 → 9.8.2

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

@@ -1,24 +1,16 @@
 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 { useFiber, useContextBridge, traverseFiber, useActivityBridge as useActivityBridge$1 } from 'its-fine';
 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';
 
 var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
-/**
- * Returns the instance's initial (outmost) root.
- */
-function findInitialRoot(instance) {
-  let root = instance.root;
-  while (root.getState().previousRoot) root = root.getState().previousRoot;
-  return root;
-}
 /**
  * Safely flush async effects when testing, simulating a legacy root.
  * @deprecated Import from React instead. import { act } from 'react'
@@ -26,9 +18,6 @@ function findInitialRoot(instance) {
 // Reference with computed key to break Webpack static analysis
 // https://github.com/webpack/webpack/issues/14814
 const act = React['act' + ''];
-const isOrthographicCamera = def => def && def.isOrthographicCamera;
-const isRef = obj => obj && obj.hasOwnProperty('current');
-const isColorRepresentation = value => value != null && (typeof value === 'string' || typeof value === 'number' || value.isColor);
 
 /**
  * An SSR-friendly useLayoutEffect.
@@ -45,7 +34,6 @@ function useMutableCallback(fn) {
   useIsomorphicLayoutEffect(() => void (ref.current = fn), [fn]);
   return ref;
 }
-const noop = () => {};
 function Gate({
   promise,
   onSettled
@@ -60,7 +48,7 @@ function useGate() {
   const [promise, setPromise] = React.useState(null);
   const onSettled = React.useCallback(() => setPromise(null), []);
   // Keep the first promise, or a repeated call would loop
-  const waitFor = React.useCallback(next => setPromise(current => current != null ? current : Promise.resolve(next).then(noop, noop)), []);
+  const waitFor = React.useCallback(next => setPromise(current => current != null ? current : Promise.resolve(next).then(() => {}, () => {})), []);
   const gate = promise ? /*#__PURE__*/jsx(React.Suspense, {
     fallback: null,
     children: /*#__PURE__*/jsx(Gate, {
@@ -70,23 +58,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
@@ -115,6 +109,19 @@ const ErrorBoundary = /* @__PURE__ */(_ErrorBoundary => (_ErrorBoundary = class
 }, _ErrorBoundary.getDerivedStateFromError = () => ({
   error: true
 }), _ErrorBoundary))();
+
+/**
+ * Returns the instance's initial (outmost) root.
+ */
+function findInitialRoot(instance) {
+  let root = instance.root;
+  while (root.getState().previousRoot) root = root.getState().previousRoot;
+  return root;
+}
+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);
+const noop = () => {};
 function calculateDpr(dpr) {
   var _window$devicePixelRa;
   // Err on the side of progress by assuming 2x dpr if we can't detect it
@@ -123,6 +130,43 @@ function calculateDpr(dpr) {
   return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], target), dpr[1]) : dpr;
 }
 
+/**
+ * Calls `onChange` whenever window.devicePixelRatio changes: moving to another display or zooming.
+ * Neither resizes the canvas, so resize observers won't see it. A resolution query only matches the
+ * current ratio, so it is re-created after every change. Returns the unsubscribe function.
+ */
+function watchDpr(onChange) {
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function' || !window.devicePixelRatio) {
+    return () => {};
+  }
+
+  // Partial matchMedia polyfills (test setups, older environments) may return no listener methods,
+  // or throw on a query they can't parse. Following the ratio is best-effort: it runs inside
+  // configuration, which must not fail because of it
+  let query;
+  const listen = () => {
+    try {
+      var _query, _query2;
+      query = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+      if (typeof ((_query = query) == null ? void 0 : _query.addEventListener) === 'function') query.addEventListener('change', handleChange);else (_query2 = query) == null ? void 0 : _query2.addListener == null ? void 0 : _query2.addListener(handleChange);
+    } catch {
+      query = undefined;
+    }
+  };
+  const unlisten = () => {
+    var _query3, _query4;
+    if (typeof ((_query3 = query) == null ? void 0 : _query3.removeEventListener) === 'function') query.removeEventListener('change', handleChange);else (_query4 = query) == null ? void 0 : _query4.removeListener == null ? void 0 : _query4.removeListener(handleChange);
+    query = undefined;
+  };
+  const handleChange = () => {
+    unlisten();
+    listen();
+    onChange();
+  };
+  listen();
+  return unlisten;
+}
+
 /**
  * Returns instance root state
  */
@@ -232,6 +276,7 @@ function prepare(target, root, type, props) {
       object,
       eventCount: 0,
       handlers: {},
+      previousVisible: undefined,
       isHidden: false
     };
     if (object) object.__r3f = instance;
@@ -415,6 +460,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,
@@ -565,11 +616,24 @@ function swapInteractivity(store, object, newObject) {
       internal.hovered.set(makeId(next), next);
     }
   });
+
+  // A capture is keyed by its eventObject, but it also carries the intersection that is replayed into
+  // every subsequent event. Both must follow the new instance, or the capture resolves to the discarded object.
   internal.capturedMap.forEach(captures => {
-    const captureData = captures.get(object);
-    if (captureData) {
-      captures.delete(object);
-      captures.set(newObject, captureData);
+    for (const [key, captureData] of Array.from(captures)) {
+      const {
+        intersection
+      } = captureData;
+      if (key !== object && intersection.object !== object && intersection.eventObject !== object) continue;
+      if (key === object) captures.delete(key);
+      captures.set(key === object ? newObject : key, {
+        ...captureData,
+        intersection: {
+          ...intersection,
+          object: intersection.object === object ? newObject : intersection.object,
+          eventObject: intersection.eventObject === object ? newObject : intersection.eventObject
+        }
+      });
     }
   });
 }
@@ -968,7 +1032,109 @@ function createEvents(store) {
   };
 }
 
+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
+  };
+};
+
+/** Renderer creation and resource release. Root lifetime decides when release is safe. */
 const isRenderer = def => !!(def != null && def.render);
+
+/** 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
+  });
+}
+
+/**
+ * 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$1(() => {
+    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$1(() => gl.forceContextLoss == null ? void 0 : gl.forceContextLoss()));
+  }
+  attempt$1(() => gl.forceContextLoss == null ? void 0 : gl.forceContextLoss());
+}
+
+/** Owned renderers are disposed. Caller-provided renderers release caches and their context. */
+function releaseRenderer(gl, owned) {
+  if (!gl) return;
+  if (owned) return disposeRenderer(gl);
+  attempt$1(() => {
+    var _gl$renderLists2;
+    return (_gl$renderLists2 = gl.renderLists) == null ? void 0 : _gl$renderLists2.dispose == null ? void 0 : _gl$renderLists2.dispose();
+  });
+  attempt$1(() => gl.forceContextLoss == null ? void 0 : gl.forceContextLoss());
+}
+function attempt$1(step) {
+  try {
+    return step();
+  } catch (error) {
+    console.warn('[R3F] Error while unmounting root; teardown may be incomplete:', error);
+  }
+}
+
 const context = /* @__PURE__ */React.createContext(null);
 const createStore = (invalidate, advance) => {
   const rootStore = createWithEqualityFn((set, get) => {
@@ -1263,7 +1429,7 @@ function useGraph(object) {
   return React.useMemo(() => buildGraph(object), [object]);
 }
 const memoizedLoaders = new WeakMap();
-const isConstructor$1 = value => {
+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;
 };
@@ -1272,7 +1438,7 @@ function loadingFn(extensions, onProgress) {
     let loader;
 
     // Construct and cache loader if constructor was passed
-    if (isConstructor$1(Proto)) {
+    if (isConstructor(Proto)) {
       loader = memoizedLoaders.get(Proto);
       if (!loader) {
         loader = new Proto();
@@ -1339,9 +1505,298 @@ 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'
+};
+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;
+}
+
+/**
+ * Moving to another display or zooming changes window.devicePixelRatio without resizing the canvas,
+ * so nothing configures the root again. Resolves the ratio the way configuration does, from the last
+ * applied dpr. Returns the function that stops following.
+ */
+function followDpr(root) {
+  const xr = () => {
+    var _root$store$getState$;
+    return (_root$store$getState$ = root.store.getState().gl) == null ? void 0 : _root$store$getState$.xr;
+  };
+  const follow = () => {
+    var _xr, _xr2, _xr3, _last$dpr;
+    const state = root.store.getState();
+    // three doesn't resize during XR and restores its own pixel ratio once the session ends. It holds
+    // the session before it sets isPresenting. Listeners are deduplicated, so this waits once
+    if ((_xr = xr()) != null && _xr.isPresenting || (_xr2 = xr()) != null && _xr2.getSession != null && _xr2.getSession()) {
+      xr().addEventListener('sessionend', follow);
+      return;
+    }
+    (_xr3 = xr()) == null ? void 0 : _xr3.removeEventListener == null ? void 0 : _xr3.removeEventListener('sessionend', follow);
+    // A failed configuration applies everything on the next one
+    const last = root.configuration.previous;
+    if (!last) return;
+    const dpr = (_last$dpr = last.dpr) != null ? _last$dpr : [1, 2];
+    if (state.viewport.dpr !== calculateDpr(dpr)) state.setDpr(dpr);
+  };
+  const unwatch = watchDpr(follow);
+  return () => {
+    var _xr4;
+    unwatch();
+    (_xr4 = xr()) == null ? void 0 : _xr4.removeEventListener == null ? void 0 : _xr4.removeEventListener('sessionend', follow);
+  };
+}
+
 var packageData = {
 	name: "@react-three/fiber",
-	version: "9.8.0",
+	version: "9.8.2",
 	description: "A React renderer for Threejs",
 	keywords: [
 		"react",
@@ -1373,6 +1828,12 @@ var packageData = {
 	module: "dist/react-three-fiber.esm.js",
 	types: "dist/react-three-fiber.cjs.d.ts",
 	"react-native": "native/dist/react-three-fiber-native.cjs.js",
+	files: [
+		"dist",
+		"native",
+		"react-reconciler",
+		"CHANGELOG.md"
+	],
 	sideEffects: false,
 	preconstruct: {
 		entrypoints: [
@@ -1392,7 +1853,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",
@@ -16113,6 +16574,27 @@ function G1() {
 var J1 = G1();
 const Z1 = $1(J1);
 
+/** Constructor registration and lookup for JSX elements. */
+
+const catalogue = {};
+let i = 0;
+const toPascalCase = type => `${type[0].toUpperCase()}${type.slice(1)}`;
+function hasConstructor(name) {
+  return name in catalogue;
+}
+function resolveConstructor(name) {
+  return catalogue[name];
+}
+function extend(objects) {
+  if (typeof objects === 'function') {
+    const Component = `${i++}`;
+    catalogue[Component] = objects;
+    return Component;
+  } else {
+    Object.assign(catalogue, objects);
+  }
+}
+
 function createReconciler(config) {
   const reconciler = Z1(config);
 
@@ -16126,24 +16608,11 @@ const NoEventPriority = 0;
 // 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 = toPascalCase(type);
-  const target = catalogue[name];
+  const target = resolveConstructor(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`);
@@ -16157,7 +16626,7 @@ function validateInstance(type, props) {
 function createInstance(type, props, root) {
   var _props$object;
   // Remove three* prefix from elements if native element not present
-  type = toPascalCase(type) in catalogue ? type : type.replace(PREFIX_REGEX, '');
+  type = hasConstructor(toPascalCase(type)) ? type : type.replace(PREFIX_REGEX, '');
   validateInstance(type, props);
 
   // Regenerate the R3F instance for primitives to simulate a new object
@@ -16170,6 +16639,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 +16651,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);
   }
@@ -16201,7 +16673,7 @@ function handleContainerEffects(parent, child, beforeChild) {
   if (!child.object) {
     var _child$props$object, _child$props$args;
     // Get target from catalogue
-    const target = catalogue[toPascalCase(child.type)];
+    const target = resolveConstructor(toPascalCase(child.type));
 
     // 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 : []));
@@ -16298,6 +16770,9 @@ function disposeOnIdle(object) {
 function removeChild(parent, child, dispose) {
   if (!child) return;
 
+  // Unlinking clears the parent, which invalidateInstance checks, so remember it
+  const wasLinked = !!child.parent;
+
   // Unlink instances
   child.parent = null;
   const childIndex = parent.children.indexOf(child);
@@ -16335,7 +16810,11 @@ function removeChild(parent, child, dispose) {
   }
 
   // Tree was updated, request a frame for top-level instance
-  if (dispose === undefined) invalidateInstance(child);
+  if (dispose === undefined && wasLinked) {
+    var _child$root;
+    const state = (_child$root = child.root) == null ? void 0 : _child$root.getState == null ? void 0 : _child$root.getState();
+    if (state && state.internal.frames === 0) state.invalidate();
+  }
 }
 function setFiberRef(fiber, publicInstance) {
   for (const _fiber of [fiber, fiber.alternate]) {
@@ -16396,7 +16875,7 @@ function swapReconstructedInstances() {
     if (parent) {
       var _instance$props$objec, _instance$props$args;
       // Get target from catalogue
-      const target = catalogue[toPascalCase(instance.type)];
+      const target = resolveConstructor(toPascalCase(instance.type));
 
       // Create object
       const prevObject = instance.object;
@@ -16728,76 +17207,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 +17294,86 @@ 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);
-          }
-          state.set({
-            scene
-          });
-        }
-
-        // 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();
+        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({
-            xr
+            gl: gl
           });
         }
-
-        // 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);
+        // Only a range, including the default one, follows the display: a fixed dpr never touches matchMedia
+        if (!root.unwatchDpr && (props.dpr === undefined || Array.isArray(props.dpr))) root.unwatchDpr = followDpr(root);
+        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 +17385,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 +17420,51 @@ function Provider({
     children: children
   });
 }
+function attempt(step) {
+  try {
+    return step();
+  } catch (error) {
+    console.warn('[R3F] Error while unmounting root; teardown may be incomplete:', error);
+  }
+}
 function unmountComponentAtNode(canvas, callback) {
   const root = _roots.get(canvas);
-  if (!root) return;
+  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;
+    }
+    // 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;
 
-  // Cleared by configure and render, which cancels the teardown
-  const claim = root.unmountClaim = Symbol('unmount');
+    // Release what uses the renderer before the renderer itself
+    attempt(() => root.unwatchDpr == null ? void 0 : root.unwatchDpr());
+    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 disposal = attempt(() => releaseRenderer(state.gl, root.ownsRenderer));
+    if (isPromiseLike(disposal)) disposal.then(() => callback == null ? void 0 : callback(canvas));else callback == null ? void 0 : callback(canvas);
+  };
   reconciler.updateContainer(null, root.fiber, null, () => {
-    if (root.unmountClaim !== claim) return;
-
+    // 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, () => {
-      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();
-    });
-  });
-}
-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
-        }
-      }))
-    };
+    reconciler.updateContainer(null, root.fiber, null, teardown);
   });
-  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)
-    })
-  );
-}
-
-/**
- * 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);
 }
 
 function createSubs(callback, subs) {
@@ -17474,6 +17619,141 @@ 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 initializePortal(options, initialState) {
+  const {
+    parentStore,
+    container
+  } = options;
+  const portalStore = createWithEqualityFn((set, get) => ({
+    ...initialState,
+    set,
+    get,
+    // Create once with the store's setter, without retaining a state snapshot.
+    setEvents: events => set(state => ({
+      ...state,
+      events: {
+        ...state.events,
+        ...events
+      }
+    }))
+  }));
+  const parentStateRef = {
+    current: parentStore.getState()
+  };
+  portalStore.setState(portalState => inject(parentStateRef.current, portalState, options));
+  return {
+    parentStore,
+    container,
+    portalStore,
+    parentStateRef
+  };
+}
+function Portal({
+  state = {},
+  children,
+  container
+}) {
+  const parentStore = useStore();
+  const {
+    events,
+    size,
+    ...rest
+  } = state;
+  const [raycaster] = React.useState(() => new THREE.Raycaster());
+  const [pointer] = React.useState(() => new THREE.Vector2());
+  const options = {
+    parentStore,
+    container,
+    raycaster,
+    pointer,
+    events,
+    size
+  };
+  const injectRef = useMutableCallback((parentState, portalState) => inject(parentState, portalState, options));
+
+  // Initialize during render. Keep the store in state so Activity can preserve it.
+  const [portal, setPortal] = React.useState(() => initializePortal(options, rest));
+  if (portal.parentStore !== parentStore || portal.container !== container) {
+    setPortal(initializePortal(options, rest));
+  }
+  const {
+    portalStore,
+    parentStateRef
+  } = portal;
+
+  // Subscribe after commit and update the portal on each parent change.
+  useIsomorphicLayoutEffect(() => {
+    const update = parentState => {
+      parentStateRef.current = parentState;
+      portalStore.setState(portalState => injectRef.current(parentState, portalState));
+    };
+    const unsubscribe = parentStore.subscribe(update);
+
+    // Catch up on changes made before subscribing or while Activity was hidden.
+    const parentState = parentStore.getState();
+    if (parentState !== parentStateRef.current) update(parentState);
+
+    // Clean up when hidden, unmounted or switching stores.
+    return unsubscribe;
+  }, [parentStore, portalStore, parentStateRef]);
+  return /*#__PURE__*/jsx(Fragment, {
+    children: reconciler.createPortal( /*#__PURE__*/jsx(context.Provider, {
+      value: portalStore,
+      children: children
+    }), portalStore, null)
+  });
+}
+function inject(parentState, portalState, options) {
+  const {
+    parentStore,
+    container,
+    raycaster,
+    pointer,
+    events,
+    size
+  } = options;
+  let viewport = undefined;
+  if (portalState.camera && size) {
+    const camera = portalState.camera;
+    // Calculate the override viewport, if present
+    viewport = parentState.viewport.getCurrentViewport(camera, new THREE.Vector3(), size);
+    // Update the portal camera, if it differs from the previous layer
+    if (camera !== parentState.camera) updateCamera(camera, size);
+  }
+  return {
+    // Inherit parent values and preserve the portal's own state.
+    ...parentState,
+    ...portalState,
+    // Portals have their own scene, raycaster and pointer.
+    scene: container,
+    raycaster,
+    pointer,
+    mouse: pointer,
+    previousRoot: parentStore,
+    // Apply the portal's event, size and viewport overrides.
+    events: {
+      ...parentState.events,
+      ...portalState.events,
+      ...events
+    },
+    size: {
+      ...parentState.size,
+      ...size
+    },
+    viewport: {
+      ...parentState.viewport,
+      ...viewport
+    }
+  };
+}
+
 const DOM_EVENTS = {
   onClick: ['click', false],
   onContextMenu: ['contextmenu', false],
@@ -17560,4 +17840,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 };