@react-three/fiber 9.8.0 → 9.8.2

package/dist/{events-a79ef12b.cjs.prod.js → events-98e95d43.cjs.prod.js}

@@ -2,11 +2,11 @@
 
 var React = require('react');
 var THREE = require('three');
+var jsxRuntime = require('react/jsx-runtime');
 var traditional = require('zustand/traditional');
 var suspendReact = require('suspend-react');
-var w1 = require('scheduler');
-var jsxRuntime = require('react/jsx-runtime');
 var itsFine = require('its-fine');
+var w1 = require('scheduler');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -36,14 +36,6 @@ 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'
@@ -51,9 +43,6 @@ function findInitialRoot(instance) {
 // Reference with computed key to break Webpack static analysis
 // https://github.com/webpack/webpack/issues/14814
 const act = React__namespace['act' + ''];
-const isOrthographicCamera = def => def && def.isOrthographicCamera;
-const isRef = obj => obj && obj.hasOwnProperty('current');
-const isColorRepresentation = value => value != null && (typeof value === 'string' || typeof value === 'number' || value.isColor);
 
 /**
  * An SSR-friendly useLayoutEffect.
@@ -70,7 +59,6 @@ function useMutableCallback(fn) {
   useIsomorphicLayoutEffect(() => void (ref.current = fn), [fn]);
   return ref;
 }
-const noop = () => {};
 function Gate({
   promise,
   onSettled
@@ -85,7 +73,7 @@ function useGate() {
   const [promise, setPromise] = React__namespace.useState(null);
   const onSettled = React__namespace.useCallback(() => setPromise(null), []);
   // Keep the first promise, or a repeated call would loop
-  const waitFor = React__namespace.useCallback(next => setPromise(current => current != null ? current : Promise.resolve(next).then(noop, noop)), []);
+  const waitFor = React__namespace.useCallback(next => setPromise(current => current != null ? current : Promise.resolve(next).then(() => {}, () => {})), []);
   const gate = promise ? /*#__PURE__*/jsxRuntime.jsx(React__namespace.Suspense, {
     fallback: null,
     children: /*#__PURE__*/jsxRuntime.jsx(Gate, {
@@ -95,23 +83,29 @@ function useGate() {
   }) : null;
   return [gate, waitFor];
 }
+
+// Activity is optional on React 19.0/19.1. A computed key also supports strict ESM bundlers.
+const useActivityBridge = React__namespace['Activity' + ''] ? itsFine.useActivityBridge : () => React__namespace.Fragment;
 /**
- * Bridges renderer Context and StrictMode from a primary renderer.
+ * Bridges Context, StrictMode, and Activity visibility from a primary renderer.
  */
 function useBridge() {
   const fiber = itsFine.useFiber();
   const ContextBridge = itsFine.useContextBridge();
+  const ActivityBridge = useActivityBridge();
   return React__namespace.useMemo(() => ({
     children
   }) => {
     const strict = !!itsFine.traverseFiber(fiber, true, node => node.type === React__namespace.StrictMode);
     const Root = strict ? React__namespace.StrictMode : React__namespace.Fragment;
     return /*#__PURE__*/jsxRuntime.jsx(Root, {
-      children: /*#__PURE__*/jsxRuntime.jsx(ContextBridge, {
-        children: children
+      children: /*#__PURE__*/jsxRuntime.jsx(ActivityBridge, {
+        children: /*#__PURE__*/jsxRuntime.jsx(ContextBridge, {
+          children: children
+        })
       })
     });
-  }, [fiber, ContextBridge]);
+  }, [fiber, ContextBridge, ActivityBridge]);
 }
 function Block({
   set
@@ -140,6 +134,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
@@ -148,6 +155,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
  */
@@ -257,6 +301,7 @@ function prepare(target, root, type, props) {
       object,
       eventCount: 0,
       handlers: {},
+      previousVisible: undefined,
       isHidden: false
     };
     if (object) object.__r3f = instance;
@@ -440,6 +485,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,
@@ -590,11 +641,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
+        }
+      });
     }
   });
 }
@@ -993,7 +1057,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__namespace.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__namespace.createContext(null);
 const createStore = (invalidate, advance) => {
   const rootStore = traditional.createWithEqualityFn((set, get) => {
@@ -1288,7 +1454,7 @@ function useGraph(object) {
   return React__namespace.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;
 };
@@ -1297,7 +1463,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();
@@ -1364,9 +1530,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__namespace.Raycaster()
+  });
+  if (changed('raycaster')) {
+    var _props$raycaster;
+    const {
+      params,
+      ...options
+    } = (_props$raycaster = props.raycaster) != null ? _props$raycaster : {};
+    applyProps(raycaster, {
+      ...options,
+      params: {
+        ...raycaster.params,
+        ...params
+      }
+    });
+  }
+
+  // Create default camera, don't overwrite any user-set state
+  if (!state.camera || state.camera === configuration.camera && changed('camera')) {
+    configuration.camera = cameraOptions;
+    const isCamera = cameraOptions == null ? void 0 : cameraOptions.isCamera;
+    const camera = isCamera ? cameraOptions : props.orthographic ? new THREE__namespace.OrthographicCamera(0, 0, 0, 0, 0.1, 1000) : new THREE__namespace.PerspectiveCamera(75, 0, 0.1, 1000);
+    if (!isCamera) {
+      camera.position.z = 5;
+      if (cameraOptions) {
+        applyProps(camera, cameraOptions);
+        // Preserve user-defined frustum if possible
+        // https://github.com/pmndrs/react-three-fiber/issues/3160
+        if (!camera.manual) {
+          if ('aspect' in cameraOptions || 'left' in cameraOptions || 'right' in cameraOptions || 'bottom' in cameraOptions || 'top' in cameraOptions) {
+            camera.manual = true;
+            camera.updateProjectionMatrix();
+          }
+        }
+      }
+      // Always look at center by default
+      if (!state.camera && !(cameraOptions != null && cameraOptions.rotation)) camera.lookAt(0, 0, 0);
+    }
+    state.set({
+      camera
+    });
+
+    // Configure raycaster
+    // https://github.com/pmndrs/react-xr/issues/300
+    raycaster.camera = camera;
+  }
+
+  // Set up scene (one time only!)
+  if (!state.scene) {
+    let scene;
+    if (sceneOptions != null && sceneOptions.isScene) {
+      scene = sceneOptions;
+      prepare(scene, store, '', {});
+    } else {
+      scene = new THREE__namespace.Scene();
+      prepare(scene, store, '', {});
+      if (sceneOptions) applyProps(scene, sceneOptions);
+    }
+    state.set({
+      scene
+    });
+  }
+
+  // Store events internally
+  if (props.events && !state.events.handlers) state.set({
+    events: props.events(store)
+  });
+  if (changed('size')) state.setSize(size.width, size.height, size.top, size.left);
+  // The ratio follows window.devicePixelRatio, which changes with browser zoom or another display
+  if (state.viewport.dpr !== calculateDpr(dpr)) state.setDpr(dpr);
+  if (changed('frameloop')) state.setFrameloop(frameloop);
+  if (changed('onPointerMissed')) state.set({
+    onPointerMissed
+  });
+  // Performance options merge, so removing them keeps the current settings
+  if (performance && changed('performance')) {
+    state.set(state => ({
+      performance: {
+        ...state.performance,
+        ...performance
+      }
+    }));
+  }
+
+  // Set up XR (one time only!)
+  if (!state.xr) {
+    var _gl$xr;
+    // Handle frame behavior in WebXR
+    const handleXRFrame = (timestamp, frame) => {
+      const state = store.getState();
+      if (state.frameloop === 'never') return;
+      advance(timestamp, true, state, frame);
+    };
+
+    // Toggle render switching on session
+    const handleSessionChange = () => {
+      const state = store.getState();
+      state.gl.xr.enabled = state.gl.xr.isPresenting;
+      state.gl.xr.setAnimationLoop(state.gl.xr.isPresenting ? handleXRFrame : null);
+      if (!state.gl.xr.isPresenting) invalidate(state);
+    };
+
+    // WebXR session manager
+    const xr = {
+      connect() {
+        const gl = store.getState().gl;
+        gl.xr.addEventListener('sessionstart', handleSessionChange);
+        gl.xr.addEventListener('sessionend', handleSessionChange);
+      },
+      disconnect() {
+        const gl = store.getState().gl;
+        gl.xr.removeEventListener('sessionstart', handleSessionChange);
+        gl.xr.removeEventListener('sessionend', handleSessionChange);
+      }
+    };
+
+    // Subscribe to WebXR session events
+    if (typeof ((_gl$xr = gl.xr) == null ? void 0 : _gl$xr.addEventListener) === 'function') xr.connect();
+    state.set({
+      xr
+    });
+  }
+
+  // Set shadowmap
+  if (gl.shadowMap && changed('shadows')) {
+    const oldEnabled = gl.shadowMap.enabled;
+    const oldType = gl.shadowMap.type;
+    gl.shadowMap.enabled = !!shadows;
+    if (is.boo(shadows)) {
+      gl.shadowMap.type = THREE__namespace.PCFSoftShadowMap;
+    } else if (is.str(shadows)) {
+      var _types$shadows;
+      const types = {
+        basic: THREE__namespace.BasicShadowMap,
+        percentage: THREE__namespace.PCFShadowMap,
+        soft: THREE__namespace.PCFSoftShadowMap,
+        variance: THREE__namespace.VSMShadowMap
+      };
+      gl.shadowMap.type = (_types$shadows = types[shadows]) != null ? _types$shadows : THREE__namespace.PCFSoftShadowMap;
+    } else if (is.obj(shadows)) {
+      Object.assign(gl.shadowMap, shadows);
+    }
+    if (oldEnabled !== gl.shadowMap.enabled || oldType !== gl.shadowMap.type) gl.shadowMap.needsUpdate = true;
+  }
+
+  // Explicit renderer options take precedence over the color shorthands
+  const glProps = glConfig && !is.fun(glConfig) && !isRenderer(glConfig) ? glConfig : undefined;
+  if (changed('legacy')) {
+    THREE__namespace.ColorManagement.enabled = !legacy;
+    state.set({
+      legacy
+    });
+  }
+  if (changed('linear')) {
+    if ((glProps == null ? void 0 : glProps.outputColorSpace) === undefined) {
+      gl.outputColorSpace = linear ? THREE__namespace.LinearSRGBColorSpace : THREE__namespace.SRGBColorSpace;
+    }
+    state.set({
+      linear
+    });
+  }
+  if (changed('flat')) {
+    if ((glProps == null ? void 0 : glProps.toneMapping) === undefined) gl.toneMapping = flat ? THREE__namespace.NoToneMapping : THREE__namespace.ACESFilmicToneMapping;
+    state.set({
+      flat
+    });
+  }
+
+  // Set gl props
+  if (glProps && changed('gl')) applyProps(gl, glProps);
+  configuration.previous = next;
+}
+
+/**
+ * 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",
@@ -1398,6 +1853,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: [
@@ -1417,7 +1878,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",
@@ -7359,6 +7820,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);
 
@@ -7372,24 +7854,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`);
@@ -7403,7 +7872,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
@@ -7416,6 +7885,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;
@@ -7427,9 +7897,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);
   }
@@ -7447,7 +7919,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 : []));
@@ -7544,6 +8016,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);
@@ -7581,7 +8056,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]) {
@@ -7642,7 +8121,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;
@@ -7974,76 +8453,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
@@ -8088,286 +8540,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__namespace.WebGLRenderer({
-            ...defaultProps,
-            ...glConfig
-          });
-          state.set({
-            gl
-          });
-        }
-
-        // Set up raycaster (one time only!)
-        let raycaster = state.raycaster;
-        if (!raycaster) state.set({
-          raycaster: raycaster = new THREE__namespace.Raycaster()
-        });
-
-        // Set raycaster options
-        const {
-          params,
-          ...options
-        } = raycastOptions || {};
-        if (!is.equ(options, raycaster, shallowLoose)) applyProps(raycaster, {
-          ...options
-        });
-        if (!is.equ(params, raycaster.params, shallowLoose)) applyProps(raycaster, {
-          params: {
-            ...raycaster.params,
-            ...params
-          }
-        });
-
-        // Create default camera, don't overwrite any user-set state
-        if (!state.camera || state.camera === lastCamera && !is.equ(lastCamera, cameraOptions, shallowLoose)) {
-          lastCamera = cameraOptions;
-          const isCamera = cameraOptions == null ? void 0 : cameraOptions.isCamera;
-          const camera = isCamera ? cameraOptions : orthographic ? new THREE__namespace.OrthographicCamera(0, 0, 0, 0, 0.1, 1000) : new THREE__namespace.PerspectiveCamera(75, 0, 0.1, 1000);
-          if (!isCamera) {
-            camera.position.z = 5;
-            if (cameraOptions) {
-              applyProps(camera, cameraOptions);
-              // Preserve user-defined frustum if possible
-              // https://github.com/pmndrs/react-three-fiber/issues/3160
-              if (!camera.manual) {
-                if ('aspect' in cameraOptions || 'left' in cameraOptions || 'right' in cameraOptions || 'bottom' in cameraOptions || 'top' in cameraOptions) {
-                  camera.manual = true;
-                  camera.updateProjectionMatrix();
-                }
-              }
-            }
-            // Always look at center by default
-            if (!state.camera && !(cameraOptions != null && cameraOptions.rotation)) camera.lookAt(0, 0, 0);
-          }
-          state.set({
-            camera
-          });
-
-          // Configure raycaster
-          // https://github.com/pmndrs/react-xr/issues/300
-          raycaster.camera = camera;
-        }
-
-        // Set up scene (one time only!)
-        if (!state.scene) {
-          let scene;
-          if (sceneOptions != null && sceneOptions.isScene) {
-            scene = sceneOptions;
-            prepare(scene, store, '', {});
-          } else {
-            scene = new THREE__namespace.Scene();
-            prepare(scene, store, '', {});
-            if (sceneOptions) applyProps(scene, sceneOptions);
-          }
-          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__namespace.PCFSoftShadowMap;
-          } else if (is.str(shadows)) {
-            var _types$shadows;
-            const types = {
-              basic: THREE__namespace.BasicShadowMap,
-              percentage: THREE__namespace.PCFShadowMap,
-              soft: THREE__namespace.PCFSoftShadowMap,
-              variance: THREE__namespace.VSMShadowMap
-            };
-            gl.shadowMap.type = (_types$shadows = types[shadows]) != null ? _types$shadows : THREE__namespace.PCFSoftShadowMap;
-          } else if (is.obj(shadows)) {
-            Object.assign(gl.shadowMap, shadows);
-          }
-          if (oldEnabled !== gl.shadowMap.enabled || oldType !== gl.shadowMap.type) gl.shadowMap.needsUpdate = true;
-        }
-        THREE__namespace.ColorManagement.enabled = !legacy;
-
-        // Set color space and tonemapping preferences
-        if (first) {
-          gl.outputColorSpace = linear ? THREE__namespace.LinearSRGBColorSpace : THREE__namespace.SRGBColorSpace;
-          gl.toneMapping = flat ? THREE__namespace.NoToneMapping : THREE__namespace.ACESFilmicToneMapping;
-        }
-
-        // Update color management state
-        if (state.legacy !== legacy) state.set(() => ({
-          legacy
-        }));
-        if (state.linear !== linear) state.set(() => ({
-          linear
-        }));
-        if (state.flat !== flat) state.set(() => ({
-          flat
-        }));
-
-        // Set gl props
-        if (glConfig && !is.fun(glConfig) && !isRenderer(glConfig) && !is.equ(glConfig, gl, shallowLoose)) applyProps(gl, glConfig);
-
-        // Set locals
-        onCreated = onCreatedCallback;
-      };
-      const fail = error => {
-        const failure = rejected(error);
-        root.ready = failure;
-        return failure;
+        applyRootConfiguration(root, canvas, props);
+        // 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__*/jsxRuntime.jsx(Provider, {
-        store: store,
-        children: children,
-        onCreated: onCreated,
-        rootElement: canvas
-      });
+      if (!transitionRoot(root, {
+        type: 'use'
+      })) return store;
+
+      // The root has to be configured before it can be rendered
+      if (!store.getState().gl && root.ready.status === 'fulfilled') this.configure();
+      if (root.ready.status === 'rejected') throw root.ready.reason;
       const commit = () => {
-        // The root may have been unmounted or claimed while we waited
-        if (_roots.get(canvas) !== root || root.unmountClaim) return;
+        var _root$configuration$p;
+        if (root.state.status !== 'open' || root.ready.status === 'rejected') return;
+        // Wait for all queued configuration, including any queued while waiting
+        if (root.ready.status === 'pending') {
+          root.ready.then(commit, logRecoverableError);
+          return;
+        }
+        const onCreated = (_root$configuration$p = root.configuration.previous) == null ? void 0 : _root$configuration$p.onCreated;
+        const element = /*#__PURE__*/jsxRuntime.jsx(Provider, {
+          store: store,
+          children: children,
+          onCreated: onCreated,
+          rootElement: canvas
+        });
         if (mounted) {
           reconciler.updateContainer(element, fiber, null, noop);
           return;
@@ -8379,22 +8631,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);
     }
   };
 }
@@ -8425,147 +8666,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;
-
-  // Cleared by configure and render, which cancels the teardown
-  const claim = root.unmountClaim = Symbol('unmount');
+  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;
+
+    // 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__*/jsxRuntime.jsx(Portal, {
-    children: children,
-    container: container,
-    state: state
-  });
-}
-function Portal({
-  state = {},
-  children,
-  container
-}) {
-  /** This has to be a component because it would not be able to call useThree/useStore otherwise since
-   *  if this is our environment, then we are not in r3f's renderer but in react-dom, it would trigger
-   *  the "R3F hooks can only be used within the Canvas component!" warning:
-   *  <Canvas>
-   *    {createPortal(...)} */
-  const {
-    events,
-    size,
-    ...rest
-  } = state;
-  const previousRoot = useStore();
-  const [raycaster] = React__namespace.useState(() => new THREE__namespace.Raycaster());
-  const [pointer] = React__namespace.useState(() => new THREE__namespace.Vector2());
-  const inject = useMutableCallback((rootState, injectState) => {
-    let viewport = undefined;
-    if (injectState.camera && size) {
-      const camera = injectState.camera;
-      // Calculate the override viewport, if present
-      viewport = rootState.viewport.getCurrentViewport(camera, new THREE__namespace.Vector3(), size);
-      // Update the portal camera, if it differs from the previous layer
-      if (camera !== rootState.camera) updateCamera(camera, size);
-    }
-    return {
-      // The intersect consists of the previous root state
-      ...rootState,
-      ...injectState,
-      // Portals have their own scene, which forms the root, a raycaster and a pointer
-      scene: container,
-      raycaster,
-      pointer,
-      mouse: pointer,
-      // Their previous root is the layer before it
-      previousRoot,
-      // Events, size and viewport can be overridden by the inject layer
-      events: {
-        ...rootState.events,
-        ...injectState.events,
-        ...events
-      },
-      size: {
-        ...rootState.size,
-        ...size
-      },
-      viewport: {
-        ...rootState.viewport,
-        ...viewport
-      },
-      // Layers are allowed to override events
-      setEvents: events => injectState.set(state => ({
-        ...state,
-        events: {
-          ...state.events,
-          ...events
-        }
-      }))
-    };
+    reconciler.updateContainer(null, root.fiber, null, teardown);
   });
-  const usePortalStore = React__namespace.useMemo(() => {
-    // Create a mirrored store, based on the previous root with a few overrides ...
-    const store = traditional.createWithEqualityFn((set, get) => ({
-      ...rest,
-      set,
-      get
-    }));
-
-    // Subscribe to previous root-state and copy changes over to the mirrored portal-state
-    const onMutate = prev => store.setState(state => inject.current(prev, state));
-    onMutate(previousRoot.getState());
-    previousRoot.subscribe(onMutate);
-    return store;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [previousRoot, container]);
-  return (
-    /*#__PURE__*/
-    // @ts-ignore, reconciler types are not maintained
-    jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children: reconciler.createPortal( /*#__PURE__*/jsxRuntime.jsx(context.Provider, {
-        value: usePortalStore,
-        children: children
-      }), usePortalStore, null)
-    })
-  );
-}
-
-/**
- * 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) {
@@ -8720,6 +8865,141 @@ function advance(timestamp, runGlobalEffects = true, state, frame) {
   if (runGlobalEffects) flushGlobalEffects('after', timestamp);
 }
 
+function createPortal(children, container, state) {
+  return /*#__PURE__*/jsxRuntime.jsx(Portal, {
+    children: children,
+    container: container,
+    state: state
+  });
+}
+function initializePortal(options, initialState) {
+  const {
+    parentStore,
+    container
+  } = options;
+  const portalStore = traditional.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__namespace.useState(() => new THREE__namespace.Raycaster());
+  const [pointer] = React__namespace.useState(() => new THREE__namespace.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__namespace.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__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: reconciler.createPortal( /*#__PURE__*/jsxRuntime.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__namespace.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],