@react-three/fiber 10.0.0-canary.d202062 → 10.0.0-canary.d46ab63

package/dist/shared/{fiber.oKEFddXj.cjs → fiber.nDnBf1np.cjs}

@@ -1,7 +1,7 @@
 'use strict';
 
 const jsxRuntime = require('react/jsx-runtime');
-const extensions = require('./fiber.khFlPHPf.cjs');
+const textureStaging = require('./fiber.DfiCufha.cjs');
 const React = require('react');
 const useMeasure = require('react-use-measure');
 const itsFine = require('its-fine');
@@ -25,8 +25,8 @@ function _interopNamespaceCompat(e) {
   return n;
 }
 
-const React__default = /*#__PURE__*/_interopDefaultCompat(React);
 const React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
+const React__default = /*#__PURE__*/_interopDefaultCompat(React);
 const useMeasure__default = /*#__PURE__*/_interopDefaultCompat(useMeasure);
 const w1__default = /*#__PURE__*/_interopDefaultCompat(w1);
 
@@ -128,6 +128,20 @@ function updateFrustum(camera, frustum) {
   target.setFromProjectionMatrix(frustumMatrix);
   return target;
 }
+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 };
+}
 
 const REACT_INTERNAL_PROPS = ["children", "key", "ref"];
 function findInitialRoot(instance) {
@@ -195,6 +209,7 @@ function prepare(target, root, type, props) {
       object,
       eventCount: 0,
       handlers: {},
+      previousVisible: void 0,
       isHidden: false
     };
     if (object) object.__r3f = instance;
@@ -417,6 +432,27 @@ function isOnce(value) {
   return value !== null && typeof value === "object" && ONCE in value;
 }
 
+function assertNodeMaterialSupported(state, value) {
+  if (!state?.isLegacy) return;
+  const material = (Array.isArray(value) ? value : [value]).find((m) => m?.isNodeMaterial);
+  if (!material) return;
+  throw new Error(
+    `R3F: ${material.type ?? "Node material"} requires WebGPURenderer (it falls back to WebGL2 automatically). Import Canvas from @react-three/fiber or @react-three/fiber/webgpu instead of @react-three/fiber/legacy.`
+  );
+}
+const warnedGLSL = /* @__PURE__ */ new Set();
+function warnGLSLMaterialUnsupported(state, value) {
+  if (!state || state.isLegacy || state.internal?.support?.kind !== "webgpu" || !textureStaging.isDevelopment()) return;
+  const material = (Array.isArray(value) ? value : [value]).find((m) => m?.isShaderMaterial && !m.isNodeMaterial);
+  if (!material) return;
+  const type = material.type ?? "ShaderMaterial";
+  if (warnedGLSL.has(type)) return;
+  warnedGLSL.add(type);
+  console.warn(
+    `R3F: ${type} is a GLSL material, which WebGPURenderer cannot compile; three draws it with a blank default material. @react-three/fiber renders with WebGPU: import Canvas from @react-three/fiber/legacy to keep WebGLRenderer, or port the shader to a node material (TSL).`
+  );
+}
+
 const RESERVED_PROPS = [
   "children",
   "key",
@@ -434,6 +470,28 @@ const VISIBILITY_EVENT_REGEX = /^on(Framed|Occluded|Visible)$/;
 const INDEX_REGEX = /-\d+$/;
 const MEMOIZED_PROTOTYPES = /* @__PURE__ */ new Map();
 const colorMaps = ["map", "emissiveMap", "sheenColorMap", "specularColorMap", "envMap"];
+const programProps = /* @__PURE__ */ new Set([
+  "transparent",
+  "vertexColors",
+  "flatShading",
+  "fog",
+  // Culling is live, but DOUBLE_SIDED / FLIP_SIDED normal flipping is compiled in
+  "side",
+  "alphaHash",
+  "premultipliedAlpha",
+  // Both feed the OPAQUE define when the material is not transparent
+  "blending",
+  "alphaToCoverage",
+  "dithering",
+  "sizeAttenuation",
+  "combine",
+  "normalMapType",
+  "depthPacking"
+]);
+function changesProgram(root, key, previous, next) {
+  if (!root?.isMaterial || previous === next) return false;
+  return programProps.has(key) || isTexture(previous) !== isTexture(next);
+}
 function resolve(root, key) {
   if (!key.includes("-")) return { root, key, target: root[key] };
   if (key in root) return { root, key, target: root[key] };
@@ -464,6 +522,7 @@ function attach(parent, child) {
     const { root, key } = resolve(parent.object, child.props.attach);
     child.previousAttach = root[key];
     root[key] = child.object;
+    if (changesProgram(root, key, child.previousAttach, child.object)) root.needsUpdate = true;
   } else if (is.fun(child.props.attach)) {
     child.previousAttach = child.props.attach(parent.object, child.object);
   }
@@ -474,6 +533,7 @@ function detach(parent, child) {
     const previous = child.previousAttach;
     if (previous === void 0) delete root[key];
     else root[key] = previous;
+    if (changesProgram(root, key, child.object, previous)) root.needsUpdate = true;
   } else {
     child.previousAttach?.(parent.object, child.object);
   }
@@ -518,7 +578,7 @@ function applyProps(object, props) {
     const value = props[prop];
     if (RESERVED_PROPS.includes(prop)) continue;
     if (prop === "onUpdate") {
-      extensions.notifyDepreciated({
+      textureStaging.notifyDepreciated({
         heading: "onUpdate is no longer an R3F prop",
         body: "v10 removed the onUpdate hook: R3F no longer calls it after prop updates. The value is assigned to the object by name. On a Texture that sets three's Texture.onUpdate, which the renderer calls after a GPU upload, not after prop changes. On a node it replaces the Node.onUpdate() method. On other objects it is never called.\n\nUse an effect keyed on the props that change, read the object in useFrame, or use a ref callback.",
         link: "https://docs.pmnd.rs/react-three-fiber/migration/v10#onupdate-removed"
@@ -553,6 +613,10 @@ function applyProps(object, props) {
       }
       continue;
     }
+    if (prop === "visible" && instance?.isHidden && instance.previousVisible !== void 0) {
+      instance.previousVisible = value;
+      continue;
+    }
     let { root, key, target } = resolve(object, prop);
     if (target === void 0 && (typeof root !== "object" || root === null)) {
       throw Error(`R3F: Cannot set "${prop}". Ensure it is an object before setting "${key}".`);
@@ -580,16 +644,24 @@ function applyProps(object, props) {
       for (const name in nextUniforms) {
         const uniform = nextUniforms[name];
         const targetUniform = uniforms[name];
-        if (targetUniform) Object.assign(targetUniform, uniform);
-        else {
+        if (targetUniform) {
+          Object.assign(targetUniform, uniform);
+        } else {
           const nextUniform = isUniform(uniform) ? uniform.clone() : new (getThree()).Uniform(uniform.value);
           uniforms[name] = nextUniform;
         }
       }
     } else {
+      if (key === "material") {
+        assertNodeMaterialSupported(rootState, value);
+        warnGLSLMaterialUnsupported(rootState, value);
+      }
+      const previous = root[key];
       root[key] = value;
       if (key.endsWith("Node") && root.isMaterial) {
         root.needsUpdate = true;
+      } else if (changesProgram(root, key, previous, value)) {
+        root.needsUpdate = true;
       }
       const three = rootState && getThree();
       if (three && rootState.renderer?.outputColorSpace === three.SRGBColorSpace && colorMaps.includes(key) && isTexture(value) && root[key]?.isTexture && // sRGB textures must be RGBA8 since r137 https://github.com/mrdoob/three.js/pull/23129
@@ -630,471 +702,392 @@ function applyProps(object, props) {
   return object;
 }
 
-const memoizedLoaders = /* @__PURE__ */ new WeakMap();
-const isConstructor$1 = (value) => typeof value === "function" && value?.prototype?.constructor === value;
-function getLoader(Proto) {
-  if (isConstructor$1(Proto)) {
-    let loader = memoizedLoaders.get(Proto);
-    if (!loader) {
-      loader = new Proto();
-      memoizedLoaders.set(Proto, loader);
-    }
-    return loader;
-  }
-  return Proto;
-}
-function loadingFn(extensions, onProgress) {
-  return function(Proto, input) {
-    const loader = getLoader(Proto);
-    if (extensions) extensions(loader);
-    if ("loadAsync" in loader && typeof loader.loadAsync === "function") {
-      return loader.loadAsync(input, onProgress).then((data) => {
-        if (isObject3D(data?.scene)) Object.assign(data, buildGraph(data.scene));
-        return data;
-      });
-    }
-    return new Promise(
-      (res, reject) => loader.load(
-        input,
-        (data) => {
-          if (isObject3D(data?.scene)) Object.assign(data, buildGraph(data.scene));
-          res(data);
-        },
-        onProgress,
-        (error) => reject(new Error(`Could not load ${input}: ${error?.message}`))
-      )
-    );
-  };
-}
-function useLoader(loader, input, extensions, onProgress, cacheKey) {
-  const inputs = Array.isArray(input) ? input : [input];
-  const cacheKeys = Array.isArray(cacheKey ?? input) ? cacheKey ?? input : [cacheKey ?? input];
-  const fn = loadingFn(extensions, onProgress);
-  const results = cacheKeys.map(
-    (key, index) => suspendReact.suspend(() => fn(loader, inputs[index]), [loader, key], { equal: is.equ })
-  );
-  const stableRef = React.useRef(null);
-  const previous = stableRef.current;
-  const stable = previous !== null && previous.length === results.length && previous.every((value, i) => value === results[i]) ? previous : results;
-  stableRef.current = stable;
-  return Array.isArray(input) ? stable : stable[0];
-}
-useLoader.preload = function(loader, input, extensions, onProgress, cacheKey) {
-  const inputs = Array.isArray(input) ? input : [input];
-  const cacheKeys = Array.isArray(cacheKey ?? input) ? cacheKey ?? input : [cacheKey ?? input];
-  cacheKeys.forEach(
-    (key, index) => suspendReact.preload(() => loadingFn(extensions, onProgress)(loader, inputs[index]), [loader, key])
-  );
-};
-useLoader.clear = function(loader, input, cacheKey) {
-  const cacheKeys = Array.isArray(cacheKey ?? input) ? cacheKey ?? input : [cacheKey ?? input];
-  cacheKeys.forEach((key) => suspendReact.clear([loader, key]));
-};
-useLoader.loader = getLoader;
-
-const IsObject = (url) => url === Object(url) && !Array.isArray(url) && typeof url !== "function";
-function getUrls(input) {
-  if (typeof input === "string") return [input];
-  if (Array.isArray(input)) return input;
-  return Object.values(input);
-}
-function inputSignature(input) {
-  if (typeof input === "string") return input;
-  if (Array.isArray(input)) return input.join("\0");
-  return Object.keys(input).sort().map((key) => `${key}\0${input[key]}`).join("
");
-}
-function allUrlsCached(urls, textureCache) {
-  return urls.every((url) => textureCache.has(url));
+function updateSize(state, size, imperative) {
+  state.set((current) => ({
+    size,
+    viewport: { ...current.viewport, ...current.viewport.getCurrentViewport(current.camera, void 0, size) },
+    _sizeImperative: imperative
+  }));
+  state.invalidate();
 }
-function buildFromCache(input, textureCache) {
-  if (typeof input === "string") {
-    return textureCache.get(input);
-  } else if (Array.isArray(input)) {
-    return input.map((url) => textureCache.get(url));
-  } else {
-    const result = {};
-    const objInput = input;
-    for (const key in objInput) {
-      result[key] = textureCache.get(objInput[key]);
-    }
-    return result;
-  }
+function configureSize(store, size) {
+  const state = store.getState();
+  if (state._sizeImperative || is.equ(size, state.size, { objects: "shallow", strict: false })) return;
+  updateSize(state, size, false);
 }
-function useTexture(input, optionsOrOnLoad) {
-  const renderer = extensions.useThree((state) => state.internal.actualRenderer);
-  const store = extensions.useStore();
-  const options = typeof optionsOrOnLoad === "function" ? { onLoad: optionsOrOnLoad } : optionsOrOnLoad ?? {};
-  const { onLoad, cache = true } = options;
-  const onLoadRef = React.useRef(onLoad);
-  onLoadRef.current = onLoad;
-  const onLoadCalledForRef = React.useRef(null);
-  const inputKey = React.useMemo(() => inputSignature(input), [input]);
-  const stableInput = React.useMemo(() => input, [inputKey]);
-  const urls = React.useMemo(() => getUrls(stableInput), [stableInput]);
-  const cachedResult = React.useMemo(() => {
-    if (!cache) return null;
-    const textures = store.getState().textures;
-    if (!allUrlsCached(urls, textures)) return null;
-    return buildFromCache(stableInput, textures);
-  }, [cache, urls, stableInput, store]);
-  const loadedTextures = useLoader(
-    getThree().TextureLoader,
-    IsObject(stableInput) ? Object.values(stableInput) : stableInput
-  );
-  const mappedTextures = React.useMemo(() => {
-    if (cachedResult) return cachedResult;
-    if (IsObject(stableInput)) {
-      const keyed = {};
-      const textureArray = loadedTextures;
-      let i = 0;
-      for (const key in stableInput) keyed[key] = textureArray[i++];
-      return keyed;
-    } else {
-      return loadedTextures;
-    }
-  }, [stableInput, loadedTextures, cachedResult]);
-  React.useLayoutEffect(() => {
-    if (cachedResult) return;
-    if (onLoadCalledForRef.current === inputKey) return;
-    onLoadCalledForRef.current = inputKey;
-    onLoadRef.current?.(mappedTextures);
-  }, [cachedResult, mappedTextures, inputKey]);
-  React.useEffect(() => {
-    if (cachedResult) return;
-    if ("initTexture" in renderer) {
-      let textureArray = [];
-      if (Array.isArray(loadedTextures)) {
-        textureArray = loadedTextures;
-      } else if (loadedTextures.isTexture) {
-        textureArray = [loadedTextures];
-      } else if (IsObject(loadedTextures)) {
-        textureArray = Object.values(loadedTextures);
+const createStore = (invalidate, advance) => {
+  const rootStore = traditional.createWithEqualityFn((rawSet, get, api) => {
+    const set = api.setState = textureStaging.preserveAccessors(rawSet, get);
+    let position;
+    let defaultTarget;
+    let tempTarget;
+    function getCurrentViewport(camera = get().camera, target = void 0, size = get().size) {
+      const { Vector3 } = getThree();
+      position ?? (position = new Vector3());
+      defaultTarget ?? (defaultTarget = new Vector3());
+      tempTarget ?? (tempTarget = new Vector3());
+      target ?? (target = defaultTarget);
+      const { width, height, top, left } = size;
+      const aspect = width / height;
+      if (target.isVector3) tempTarget.copy(target);
+      else tempTarget.set(...target);
+      const distance = camera.getWorldPosition(position).distanceTo(tempTarget);
+      if (isOrthographicCamera(camera)) {
+        return { width: width / camera.zoom, height: height / camera.zoom, top, left, factor: 1, distance, aspect };
+      } else {
+        const fov = camera.fov * Math.PI / 180;
+        const h = 2 * Math.tan(fov / 2) * distance;
+        const w = h * (width / height);
+        return { width: w, height: h, top, left, factor: width / w, distance, aspect };
       }
-      textureArray.forEach((texture) => {
-        if (texture?.isTexture) {
-          renderer.initTexture(texture);
-        }
-      });
     }
-  }, [renderer, loadedTextures, cachedResult]);
-  React.useEffect(() => {
-    if (!cache) return;
-    const urlTextureMap = urlTextureEntries(stableInput, mappedTextures);
-    store.setState((state) => {
-      const refs = new Map(state._textureRefs);
-      let textures = state.textures;
-      let added = false;
-      for (const [url, texture] of urlTextureMap) {
-        if (!textures.has(url)) {
-          if (!added) {
-            textures = new Map(textures);
-            added = true;
-          }
-          textures.set(url, texture);
-        }
-        refs.set(url, (refs.get(url) ?? 0) + 1);
-      }
-      return added ? { textures, _textureRefs: refs } : { _textureRefs: refs };
-    });
-    extensions.unstageTextures(
-      store,
-      urlTextureMap.map(([url]) => url)
-    );
-    return () => store.setState((state) => {
-      const refs = new Map(state._textureRefs);
-      for (const [url] of urlTextureMap) {
-        const next = (refs.get(url) ?? 0) - 1;
-        if (next <= 0) refs.delete(url);
-        else refs.set(url, next);
-      }
-      return { _textureRefs: refs };
-    });
-  }, [cache, stableInput, mappedTextures, store]);
-  if (cache && !cachedResult) extensions.stageTextures(store, urlTextureEntries(stableInput, mappedTextures));
-  return mappedTextures;
-}
-function urlTextureEntries(input, textures) {
-  if (typeof input === "string") return [[input, textures]];
-  if (Array.isArray(input)) return input.map((url, i) => [url, textures[i]]);
-  const record = textures;
-  return Object.keys(input).map((key) => [input[key], record[key]]);
-}
-useTexture.preload = (url) => {
-  whenThree().then((three) => useLoader.preload(three.TextureLoader, url));
-};
-useTexture.clear = (input) => {
-  if (hasThree()) useLoader.clear(getThree().TextureLoader, input);
-};
-const Texture = ({
-  children,
-  input,
-  onLoad,
-  cache
-}) => {
-  const options = typeof onLoad === "function" ? { onLoad, cache } : { ...onLoad, cache };
-  const ret = useTexture(input, options);
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children?.(ret) });
-};
-
-function useTextures(selector) {
-  const store = extensions.useStore();
-  const registry = React.useMemo(() => {
-    const getState = store.getState;
-    const setState = store.setState;
-    const getOne = (key) => getState().textures.get(key);
-    return {
-      get all() {
-        return getState().textures;
+    let performanceTimeout = void 0;
+    const setPerformanceCurrent = (current) => set((state2) => ({ performance: { ...state2.performance, current } }));
+    const rootState = {
+      set,
+      get,
+      // Mock objects that have to be configured
+      // primaryStore is set after store creation (self-reference for primary, primary's store for secondary)
+      primaryStore: null,
+      gl: null,
+      renderer: null,
+      camera: null,
+      // frustum, pointer and mouse are three objects; configure() creates them with the renderer
+      frustum: null,
+      autoUpdateFrustum: true,
+      raycaster: null,
+      events: {
+        priority: 1,
+        enabled: true,
+        connected: false,
+        frameTimedRaycasts: true,
+        alwaysFireOnScroll: true,
+        updateOnFrame: false
       },
-      get(input) {
-        if (typeof input === "string") return getOne(input);
-        if (Array.isArray(input)) return input.map(getOne);
-        const out = {};
-        for (const name in input) out[name] = getOne(input[name]);
-        return out;
+      scene: null,
+      rootScene: null,
+      xr: null,
+      inspector: null,
+      invalidate: (frames = 1, stackFrames = false) => invalidate(get(), frames, stackFrames),
+      advance: (timestamp, runGlobalEffects) => advance(timestamp, runGlobalEffects, get()),
+      textureColorSpace: "srgb",
+      // THREE.SRGBColorSpace
+      isLegacy: false,
+      webGPUSupported: false,
+      isNative: false,
+      controls: null,
+      pointer: null,
+      mouse: null,
+      frameloop: "always",
+      onPointerMissed: void 0,
+      onDragOverMissed: void 0,
+      onDropMissed: void 0,
+      performance: {
+        current: 1,
+        min: 0.5,
+        max: 1,
+        debounce: 200,
+        regress: () => {
+          const state2 = get();
+          if (performanceTimeout) clearTimeout(performanceTimeout);
+          if (state2.performance.current !== state2.performance.min) setPerformanceCurrent(state2.performance.min);
+          performanceTimeout = setTimeout(
+            () => setPerformanceCurrent(get().performance.max),
+            state2.performance.debounce
+          );
+        }
       },
-      has: (key) => getState().textures.has(key),
-      add(keyOrRecord, texture) {
-        setState((state) => {
-          const textures = new Map(state.textures);
-          if (typeof keyOrRecord === "string") {
-            textures.set(keyOrRecord, texture);
-          } else {
-            for (const key in keyOrRecord) textures.set(key, keyOrRecord[key]);
-          }
-          return { textures };
-        });
+      size: { width: 0, height: 0, top: 0, left: 0 },
+      viewport: {
+        initialDpr: 0,
+        dpr: 0,
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0,
+        aspect: 0,
+        distance: 0,
+        factor: 0,
+        getCurrentViewport
       },
-      dispose(key, options) {
-        const state = getState();
-        const refs = state._textureRefs.get(key) ?? 0;
-        if (refs > 0 && !options?.force) {
-          console.warn(
-            `[useTextures] "${key}" still has ${refs} active reference(s); skipping dispose. Pass { force: true } to override.`
-          );
-          return false;
+      setEvents: (events) => set((state2) => ({ events: { ...state2.events, ...events } })),
+      setSize: (width, height, top, left) => {
+        const state2 = get();
+        if (width === void 0) {
+          if (state2._sizeProps) {
+            const { width: propW, height: propH } = state2._sizeProps;
+            if (propW !== void 0 || propH !== void 0) {
+              const currentSize = state2.size;
+              const newSize = {
+                width: propW ?? currentSize.width,
+                height: propH ?? currentSize.height,
+                top: currentSize.top,
+                left: currentSize.left
+              };
+              updateSize(state2, newSize, false);
+              return;
+            }
+          }
+          set({ _sizeImperative: false });
+          return;
         }
-        state.textures.get(key)?.dispose();
-        setState((s) => {
-          const textures = new Map(s.textures);
-          textures.delete(key);
-          const nextRefs = new Map(s._textureRefs);
-          nextRefs.delete(key);
-          return { textures, _textureRefs: nextRefs };
-        });
-        return true;
+        const w = width;
+        const h = height ?? width;
+        const t = top ?? state2.size.top;
+        const l = left ?? state2.size.left;
+        const size = { width: w, height: h, top: t, left: l };
+        updateSize(state2, size, true);
       },
-      disposeAll() {
-        for (const texture of getState().textures.values()) texture.dispose();
-        setState({ textures: /* @__PURE__ */ new Map(), _textureRefs: /* @__PURE__ */ new Map() });
+      setDpr: (dpr) => set((state2) => {
+        const resolved = calculateDpr(dpr);
+        return { viewport: { ...state2.viewport, dpr: resolved, initialDpr: state2.viewport.initialDpr || resolved } };
+      }),
+      setFrameloop: (frameloop = "always") => {
+        const rootId = get().internal.rootId;
+        if (rootId) scheduler.getScheduler().setRootFrameloop(rootId, frameloop);
+        set(() => ({ frameloop }));
+      },
+      setError: (error) => set(() => ({ error })),
+      error: null,
+      //* Texture registry (useTextures) ==============================
+      // TSL fields (uniforms, nodes, ..., renderPipeline) are added by @react-three/tsl's root extension.
+      textures: /* @__PURE__ */ new Map(),
+      _textureRefs: /* @__PURE__ */ new Map(),
+      _sizeImperative: false,
+      _sizeProps: null,
+      previousRoot: void 0,
+      internal: {
+        // Events
+        interaction: [],
+        subscribers: [],
+        // Per-pointer state (new unified structure)
+        pointerMap: /* @__PURE__ */ new Map(),
+        pointerDirty: /* @__PURE__ */ new Map(),
+        lastEvent: React__namespace.createRef(),
+        // Deprecated but kept for backwards compatibility
+        hovered: /* @__PURE__ */ new Map(),
+        initialClick: [0, 0],
+        initialHits: [],
+        capturedMap: /* @__PURE__ */ new Map(),
+        // Visibility tracking (onFramed, onOccluded, onVisible)
+        visibilityRegistry: /* @__PURE__ */ new Map(),
+        // Occlusion system (WebGPU only)
+        occlusionEnabled: false,
+        occlusionObserver: null,
+        occlusionCache: /* @__PURE__ */ new Map(),
+        helperGroup: null,
+        // Updates
+        active: false,
+        frames: 0,
+        priority: 0,
+        subscribe: (ref, priority, store) => {
+          const internal = get().internal;
+          internal.priority = internal.priority + (priority > 0 ? 1 : 0);
+          internal.subscribers.push({ ref, priority, store });
+          internal.subscribers = internal.subscribers.sort((a, b) => a.priority - b.priority);
+          return () => {
+            const internal2 = get().internal;
+            if (internal2?.subscribers) {
+              internal2.priority = internal2.priority - (priority > 0 ? 1 : 0);
+              internal2.subscribers = internal2.subscribers.filter((s) => s.ref !== ref);
+            }
+          };
+        },
+        // Renderer Storage (single source of truth)
+        actualRenderer: null,
+        // The renderer support configure() loads for this root
+        support: null,
+        // Scheduler for useFrameNext (initialized in loop.ts)
+        scheduler: null,
+        // Replaces the default render call when set (see setRenderOverride)
+        renderOverride: null
       }
     };
-  }, [store]);
-  const subscribe = selector ? () => selector(registry) : (state) => state.textures;
-  const selected = extensions.useThree(subscribe);
-  return selector ? selected : registry;
-}
-
-function useRenderTarget(widthOrOptions, heightOrOptions, options) {
-  const support = extensions.useThree((s) => s.internal.support);
-  const size = extensions.useThree((s) => s.size);
-  let width;
-  let height;
-  let opts;
-  if (typeof widthOrOptions === "object") {
-    opts = widthOrOptions;
-  } else if (typeof widthOrOptions === "number") {
-    width = widthOrOptions;
-    if (typeof heightOrOptions === "object") {
-      height = widthOrOptions;
-      opts = heightOrOptions;
-    } else if (typeof heightOrOptions === "number") {
-      height = heightOrOptions;
-      opts = options;
-    } else {
-      height = widthOrOptions;
+    return rootState;
+  });
+  const state = rootStore.getState();
+  textureStaging.defineRendererAccessors(state);
+  let oldScene = state.scene;
+  rootStore.subscribe(() => {
+    const currentState = rootStore.getState();
+    const { scene, rootScene, set } = currentState;
+    if (scene !== oldScene) {
+      oldScene = scene;
+      if (scene?.isScene && scene !== rootScene) {
+        set({ rootScene: scene });
+      }
     }
-  }
-  return React.useMemo(() => {
-    const w = width ?? size.width;
-    const h = height ?? size.height;
-    const Target = support.RenderTarget;
-    return new Target(w, h, opts);
-  }, [width, height, size.width, size.height, opts, support]);
-}
-
-const presetsObj = {
-  apartment: "lebombo_1k.hdr",
-  city: "potsdamer_platz_1k.hdr",
-  dawn: "kiara_1_dawn_1k.hdr",
-  forest: "forest_slope_1k.hdr",
-  lobby: "st_fagans_interior_1k.hdr",
-  night: "dikhololo_night_1k.hdr",
-  park: "rooitou_park_1k.hdr",
-  studio: "studio_small_03_1k.hdr",
-  sunset: "venice_sunset_1k.hdr",
-  warehouse: "empty_warehouse_01_1k.hdr"
-};
-
-const CUBEMAP_ROOT = "https://raw.githack.com/pmndrs/drei-assets/456060a26bbeb8fdf79326f224b6d99b8bcce736/hdri/";
-const isArray = (arr) => Array.isArray(arr);
-const defaultFiles = ["/px.png", "/nx.png", "/py.png", "/ny.png", "/pz.png", "/nz.png"];
-const loadedLoaders = /* @__PURE__ */ new Map();
-const pendingLoaders = /* @__PURE__ */ new Map();
-function loadLoader(format) {
-  let pending = pendingLoaders.get(format);
-  if (!pending) {
-    pending = importLoader(format).then(
-      (loader) => {
-        loadedLoaders.set(format, loader);
-        return loader;
-      },
-      (error) => {
-        pendingLoaders.delete(format);
-        throw error;
+  });
+  let oldSize = state.size;
+  let oldDpr = state.viewport.dpr;
+  let oldCamera = state.camera;
+  rootStore.subscribe(() => {
+    const { camera, size, viewport, set, internal } = rootStore.getState();
+    const actualRenderer = internal.actualRenderer;
+    const canvasTarget = internal.canvasTarget;
+    if (size.width !== oldSize.width || size.height !== oldSize.height || viewport.dpr !== oldDpr) {
+      oldSize = size;
+      oldDpr = viewport.dpr;
+      updateCamera(camera, size);
+      const resizeTarget = canvasTarget ?? actualRenderer;
+      if (viewport.dpr > 0) resizeTarget.setPixelRatio(viewport.dpr);
+      resizeTarget.setSize(size.width, size.height, false);
+      const activeTarget = actualRenderer.getCanvasTarget?.();
+      if (!canvasTarget || activeTarget !== canvasTarget) internal.canvasTargetSizeDirty = true;
+    }
+    if (camera !== oldCamera) {
+      oldCamera = camera;
+      const { rootScene } = rootStore.getState();
+      if (camera && rootScene && !camera.parent) {
+        rootScene.add(camera);
+      }
+      set((state2) => ({ viewport: { ...state2.viewport, ...state2.viewport.getCurrentViewport(camera) } }));
+      const currentState = rootStore.getState();
+      if (currentState.autoUpdateFrustum && camera) {
+        updateFrustum(camera, currentState.frustum);
       }
-    );
-    pendingLoaders.set(format, pending);
-  }
-  return pending;
-}
-async function importLoader(format) {
-  let loader;
-  switch (format) {
-    case "cube":
-      loader = getThree().CubeTextureLoader;
-      break;
-    case "hdr-cube":
-      loader = (await import('three/examples/jsm/loaders/HDRCubeTextureLoader.js')).HDRCubeTextureLoader;
-      break;
-    case "hdr":
-      loader = (await import('three/examples/jsm/loaders/HDRLoader.js')).HDRLoader;
-      break;
-    case "exr":
-      loader = (await import('three/examples/jsm/loaders/EXRLoader.js')).EXRLoader;
-      break;
-    case "jpg":
-      loader = (await import('three/examples/jsm/loaders/UltraHDRLoader.js')).UltraHDRLoader;
-      break;
-  }
-  return loader;
-}
-const LOADER_KEY = Symbol("r3f-environment-loader");
-function useEnvironmentLoader(format) {
-  return suspendReact.suspend(() => loadLoader(format), [LOADER_KEY, format]);
-}
-function useEnvironment({
-  files = defaultFiles,
-  path = "",
-  preset = void 0,
-  colorSpace = void 0,
-  extensions
-} = {}) {
-  if (preset) {
-    validatePreset(preset);
-    files = presetsObj[preset];
-    path = CUBEMAP_ROOT;
-  }
-  const multiFile = isArray(files);
-  const { format, isCubemap } = getFormat(files);
-  if (!format) throw new Error("useEnvironment: Unrecognized file extension: " + files);
-  const loader = useEnvironmentLoader(format);
-  const loaderResult = useLoader(
-    loader,
-    multiFile ? [files] : files,
-    (loader2) => {
-      loader2.setPath?.(path);
-      if (extensions) extensions(loader2);
     }
-  );
-  const texture = multiFile ? (
-    // @ts-ignore
-    loaderResult[0]
-  ) : loaderResult;
-  const three = getThree();
-  texture.mapping = isCubemap ? three.CubeReflectionMapping : three.EquirectangularReflectionMapping;
-  texture.colorSpace = colorSpace ?? (isCubemap && format !== "hdr-cube" ? "srgb" : "srgb-linear");
-  return texture;
-}
-const preloadDefaultOptions = {
-  files: defaultFiles,
-  path: "",
-  preset: void 0,
-  extensions: void 0
-};
-useEnvironment.preload = (preloadOptions) => {
-  const options = { ...preloadDefaultOptions, ...preloadOptions };
-  let { files, path = "" } = options;
-  const { preset, extensions } = options;
-  if (preset) {
-    validatePreset(preset);
-    files = presetsObj[preset];
-    path = CUBEMAP_ROOT;
-  }
-  const { format } = getFormat(files);
-  if (!format) throw new Error("useEnvironment: Unrecognized file extension: " + files);
-  const input = isArray(files) ? [files] : files;
-  loadLoader(format).then((loader) => {
-    useLoader.preload(loader, input, (loader2) => {
-      loader2.setPath?.(path);
-      if (extensions) extensions(loader2);
-    });
   });
+  rootStore.subscribe((state2) => {
+    if (state2.internal.active) invalidate(state2);
+  });
+  return rootStore;
 };
-const clearDefaultOptins = {
-  files: defaultFiles,
-  preset: void 0
-};
-useEnvironment.clear = (clearOptions) => {
-  const options = { ...clearDefaultOptins, ...clearOptions };
-  let { files } = options;
-  const { preset } = options;
-  if (preset) {
-    validatePreset(preset);
-    files = presetsObj[preset];
-  }
-  const { format } = getFormat(files);
-  if (!format) throw new Error("useEnvironment: Unrecognized file extension: " + files);
-  const input = isArray(files) ? [files] : files;
-  const clear = (loader2) => useLoader.clear(loader2, input);
-  const loader = loadedLoaders.get(format);
-  if (loader) {
-    clear(loader);
-  } else {
-    const pending = pendingLoaders.get(format);
-    if (pending) void pending.then(clear, () => {
+
+const shallowLoose$1 = { objects: "shallow", strict: false };
+function configureScheduler(store, canvasId, schedulerConfig, previous) {
+  const state = store.getState();
+  const scheduler$1 = scheduler.getScheduler();
+  const rootId = state.internal.rootId;
+  const ordersItself = schedulerConfig?.before !== void 0 || schedulerConfig?.after !== void 0;
+  const rootBefore = schedulerConfig?.before;
+  const rootAfter = ordersItself ? schedulerConfig?.after : state.internal.sharedAfter;
+  if (!rootId) {
+    const newRootId = state.internal.pendingRootId ?? canvasId ?? scheduler$1.generateRootId();
+    const unregisterRoot = scheduler$1.registerRoot(newRootId, {
+      getState: () => store.getState(),
+      onError: (err) => store.getState().setError(err),
+      frameloop: store.getState().frameloop,
+      before: rootBefore,
+      after: rootAfter,
+      order: schedulerConfig?.order
     });
+    const unregisterCanvasTarget = scheduler$1.register(
+      () => {
+        const state2 = store.getState();
+        const canvasTarget = state2.internal.canvasTarget;
+        if (canvasTarget) {
+          const renderer = state2.internal.actualRenderer;
+          if (renderer.getCanvasTarget() !== canvasTarget) renderer.setCanvasTarget(canvasTarget);
+          if (state2.internal.canvasTargetSizeDirty) {
+            state2.internal.canvasTargetSizeDirty = false;
+            renderer.backend?.updateSize?.();
+          }
+        }
+      },
+      {
+        id: `${newRootId}_canvasTarget`,
+        rootId: newRootId,
+        phase: "start",
+        system: true
+      }
+    );
+    const unregisterEventsFlush = scheduler$1.register(
+      () => {
+        const state2 = store.getState();
+        state2.events.flush?.();
+      },
+      {
+        id: `${newRootId}_events`,
+        rootId: newRootId,
+        phase: "input",
+        system: true
+      }
+    );
+    const unregisterFrustum = scheduler$1.register(
+      () => {
+        const state2 = store.getState();
+        if (state2.autoUpdateFrustum && state2.camera) {
+          updateFrustum(state2.camera, state2.frustum);
+        }
+      },
+      {
+        id: `${newRootId}_frustum`,
+        rootId: newRootId,
+        before: "render",
+        system: true
+      }
+    );
+    const unregisterVisibility = scheduler$1.register(
+      () => {
+        const state2 = store.getState();
+        checkVisibility(state2);
+      },
+      {
+        id: `${newRootId}_visibility`,
+        rootId: newRootId,
+        before: "render",
+        system: true,
+        after: `${newRootId}_frustum`
+      }
+    );
+    const unregisterRender = scheduler$1.register(
+      () => {
+        const state2 = store.getState();
+        const renderer = state2.internal.actualRenderer;
+        const userHandlesRender = scheduler$1.hasUserJobsInPhase("render", newRootId);
+        if (userHandlesRender || state2.internal.priority) return;
+        try {
+          const renderOverride = state2.internal.renderOverride;
+          if (renderOverride) renderOverride();
+          else if (renderer?.render) renderer.render(state2.scene, state2.camera);
+        } catch (error) {
+          state2.setError(error instanceof Error ? error : new Error(String(error)));
+        }
+      },
+      {
+        // Use canvas ID directly as job ID if available, otherwise use generated rootId
+        id: canvasId || `${newRootId}_render`,
+        rootId: newRootId,
+        phase: "render",
+        system: true,
+        // Internal flag: this is a system job, not user-controlled
+        // FPS throttles only the default render job; Canvas ordering belongs to the root.
+        ...schedulerConfig?.fps && { fps: schedulerConfig.fps }
+      }
+    );
+    state.set((state2) => ({
+      internal: {
+        ...state2.internal,
+        rootId: newRootId,
+        pendingRootId: void 0,
+        unregisterRoot: () => {
+          unregisterRoot();
+          unregisterCanvasTarget();
+          unregisterEventsFlush();
+          unregisterFrustum();
+          unregisterVisibility();
+          unregisterRender();
+        },
+        scheduler: scheduler$1
+      }
+    }));
+  } else {
+    const constraintsChanged = !is.equ(schedulerConfig?.before, previous?.before, shallowLoose$1) || !is.equ(schedulerConfig?.after, previous?.after, shallowLoose$1);
+    if (constraintsChanged) {
+      scheduler$1.setRootConstraints(rootId, {
+        before: rootBefore,
+        after: rootAfter
+      });
+    }
+    if (schedulerConfig?.order !== previous?.order) {
+      scheduler$1.setRootOrder(rootId, schedulerConfig?.order ?? 0);
+    }
   }
-};
-function validatePreset(preset) {
-  if (!(preset in presetsObj)) throw new Error("Preset must be one of: " + Object.keys(presetsObj).join(", "));
-}
-function getFormat(files) {
-  const isCubemap = isArray(files) && files.length === 6;
-  const firstEntry = isArray(files) ? files[0] : files;
-  const firstExtension = firstEntry.split(".").pop()?.split("?")?.shift()?.toLowerCase();
-  let format;
-  if (isCubemap) format = firstExtension === "hdr" ? "hdr-cube" : "cube";
-  else if (firstEntry.startsWith("data:application/exr")) format = "exr";
-  else if (firstEntry.startsWith("data:application/hdr")) format = "hdr";
-  else if (firstEntry.startsWith("data:image/jpeg")) format = "jpg";
-  else if (firstExtension === "hdr" || firstExtension === "exr") format = firstExtension;
-  else if (firstExtension === "jpg" || firstExtension === "jpeg") format = "jpg";
-  return { format, isCubemap };
-}
-
-function useInstanceHandle(ref) {
-  const instance = React.useRef(null);
-  React.useImperativeHandle(instance, () => ref.current.__r3f, [ref]);
-  return instance;
-}
-function useGraph(object) {
-  return React.useMemo(() => buildGraph(object), [object]);
 }
-
 let effectId = 0;
 function addEffect(callback) {
-  extensions.notifyDepreciated({
+  textureStaging.notifyDepreciated({
     heading: "addEffect is deprecated",
     body: 'Use useFrame(callback, { phase: "start" }) instead.\naddEffect will be removed in a future version.',
     link: "https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe"
@@ -1103,7 +1096,7 @@ function addEffect(callback) {
   return scheduler.getScheduler().registerGlobal("before", id, callback);
 }
 function addAfterEffect(callback) {
-  extensions.notifyDepreciated({
+  textureStaging.notifyDepreciated({
     heading: "addAfterEffect is deprecated",
     body: 'Use useFrame(callback, { phase: "finish" }) instead.\naddAfterEffect will be removed in a future version.',
     link: "https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe"
@@ -1112,7 +1105,7 @@ function addAfterEffect(callback) {
   return scheduler.getScheduler().registerGlobal("after", id, callback);
 }
 function addTail(callback) {
-  extensions.notifyDepreciated({
+  textureStaging.notifyDepreciated({
     heading: "addTail is deprecated",
     body: "Use scheduler.onIdle(callback) instead.\naddTail will be removed in a future version.",
     link: "https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe"
@@ -1132,39 +1125,823 @@ function advance(timestamp, runGlobalEffects, state) {
   else scheduler$1.step(timestamp);
 }
 
-const version = "10.0.0-alpha.5";
-const packageData = {
-	version: version};
+const isPromiseLike = (value) => typeof value?.then === "function";
+const fulfilled = (value) => Object.assign(Promise.resolve(value), { status: "fulfilled", value });
+const rejected = (reason) => {
+  const promise = Promise.reject(reason);
+  promise.catch(() => {
+  });
+  return Object.assign(promise, { status: "rejected", reason });
+};
+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(() => {
+  });
+  return { promise, resolve, reject };
+};
+function resolveThen(value, apply) {
+  return isPromiseLike(value) ? Promise.resolve(value).then(apply) : apply(value);
+}
 
-function $1(Ut) {
-  return Ut && Ut.__esModule && Object.prototype.hasOwnProperty.call(Ut, "default") ? Ut.default : Ut;
+const isRenderer = (def) => !!def?.render;
+function ensureStoreThreeObjects(store) {
+  const state = store.getState();
+  if (state.pointer) return;
+  const { Vector2, Frustum } = getThree();
+  const pointer = new Vector2();
+  state.set({ pointer, mouse: pointer, frustum: new Frustum() });
 }
-var S0 = { exports: {} }, Ob = { exports: {} }, P1;
-function Q1() {
-  return P1 || (P1 = 1, (function(Ut) {
-    Ut.exports = function(m) {
-      function et(t, r, a, l) {
-        return new Fe(t, r, a, l);
-      }
-      function zf() {
-      }
-      function F(t) {
-        var r = "https://react.dev/errors/" + t;
-        if (1 < arguments.length) {
-          r += "?args[]=" + encodeURIComponent(arguments[1]);
-          for (var a = 2; a < arguments.length; a++) r += "&args[]=" + encodeURIComponent(arguments[a]);
-        }
-        return "Minified React error #" + t + "; visit " + r + " for the full message or use the non-minified dev environment for full errors and additional helpful warnings.";
-      }
-      function Ef(t) {
-        for (var r = t, a = r; a && !a.alternate; ) r = a, (r.flags & 4098) !== 0 && (t = r.return), a = r.return;
-        for (; r.return; ) r = r.return;
-        return r.tag === 3 ? t : null;
-      }
-      function pc(t) {
-        if (Ef(t) !== t) throw Error(F(188));
+const R3F_RENDERER_SETTINGS = ["textureColorSpace", "shadows"];
+const NON_APPLIED_RENDERER_PROPS = /* @__PURE__ */ new Set([
+  ...R3F_RENDERER_SETTINGS,
+  "canvas",
+  "antialias",
+  "alpha",
+  "samples",
+  "powerPreference",
+  "depth",
+  "stencil",
+  "logarithmicDepthBuffer",
+  "reversedDepthBuffer",
+  // WebGPURenderer only
+  "forceWebGL",
+  "outputBufferType",
+  "multiview",
+  "getFallback",
+  "trackTimestamp"
+]);
+function settingsBag(config) {
+  return is.obj(config) && !isRenderer(config) ? config : void 0;
+}
+function isInstanceOrFactory(config) {
+  return is.fun(config) || isRenderer(config);
+}
+function assertNoRemovedConfig(props) {
+  if (props.primaryCanvas !== void 0) {
+    throw new Error(
+      'R3F: `primaryCanvas` was removed: mark the owner <Canvas primary> and other canvases share it automatically (or use share="id")'
+    );
+  }
+  if (props.shadows !== void 0) {
+    throw new Error(
+      "R3F: the `shadows` Canvas prop moved into the renderer settings: use `renderer={{ shadows }}` (or `gl={{ shadows }}` for WebGL and @react-three/fiber/legacy)"
+    );
+  }
+  for (const name of ["renderer", "gl"]) {
+    const bag = settingsBag(props[name]);
+    if (!bag) continue;
+    if ("primaryCanvas" in bag) {
+      throw new Error(
+        `R3F: \`${name}={{ primaryCanvas }}\` was removed: mark the owner <Canvas primary> and other canvases share it automatically (or use share="id")`
+      );
+    }
+    if ("scheduler" in bag) {
+      throw new Error(`R3F: \`${name}={{ scheduler }}\` moved to <Canvas scheduler>`);
+    }
+  }
+}
+function resolveRenderer(config, defaultProps, RendererClass) {
+  if (typeof config === "function") {
+    return resolveThen(config(defaultProps), (renderer) => ({
+      renderer,
+      owned: true
+    }));
+  }
+  if (isRenderer(config)) return { renderer: config, owned: false };
+  const params = { ...defaultProps };
+  for (const key in settingsBag(config)) if (!R3F_RENDERER_SETTINGS.includes(key)) params[key] = config[key];
+  return { renderer: new RendererClass(params), owned: true };
+}
+function createOwnedWebGPURenderer(rendererConfig, defaultGPUProps, canvas, propsSize, dpr, support) {
+  return resolveThen(resolveRenderer(rendererConfig, defaultGPUProps, support.Renderer), (resolved) => {
+    const renderer = resolved.renderer;
+    if (!renderer.hasInitialized?.()) {
+      const size = computeInitialSize(canvas, propsSize);
+      if (size.width > 0 && size.height > 0) {
+        renderer.setPixelRatio(calculateDpr(dpr));
+        renderer.setSize(size.width, size.height, false);
       }
-      function hc(t) {
+      return resolveThen(renderer.init(), () => ({ renderer, owned: resolved.owned }));
+    }
+    return { renderer, owned: resolved.owned };
+  });
+}
+function initializeRenderer(canvas, provider, store, props) {
+  const {
+    id: canvasId,
+    primary = false,
+    share,
+    gl: glConfig,
+    renderer: rendererConfig,
+    size: propsSize,
+    dpr = [1, 2],
+    _primaryToken
+  } = props;
+  assertNoRemovedConfig(props);
+  const rendererBag = settingsBag(rendererConfig);
+  const state = store.getState();
+  const { webgl, webgpu } = provider;
+  const defaultGLProps = {
+    canvas,
+    powerPreference: "high-performance",
+    antialias: true,
+    alpha: true
+  };
+  const defaultGPUProps = {
+    canvas,
+    antialias: true
+  };
+  if (glConfig && !webgl) {
+    throw new Error(
+      "R3F: the `gl` prop configures WebGLRenderer, which is only available on @react-three/fiber/legacy. Import Canvas from @react-three/fiber/legacy to keep WebGL, or move these settings to the `renderer` prop for WebGPU."
+    );
+  }
+  if (rendererConfig && !webgpu) {
+    throw new Error(
+      "WebGPURenderer (renderer prop) is not available on this entry. Use @react-three/fiber or @react-three/fiber/webgpu instead."
+    );
+  }
+  if (glConfig && rendererConfig) {
+    throw new Error("Cannot use both gl and renderer props at the same time");
+  }
+  if (primary && !webgpu) {
+    throw new Error(
+      "R3F: <Canvas primary> shares a WebGPU renderer and is not available on this entry. Use @react-three/fiber or @react-three/fiber/webgpu instead."
+    );
+  }
+  if (primary && glConfig) {
+    throw new Error(
+      "R3F: <Canvas primary> shares a WebGPU renderer and cannot be used with WebGL. Remove the `gl` prop or use the `renderer` prop."
+    );
+  }
+  if (primary && is.str(share)) {
+    throw new Error(`R3F: a <Canvas primary> owns its renderer; remove share="${share}" from it.`);
+  }
+  if (is.str(share)) {
+    if (!webgpu || glConfig) {
+      throw new Error(
+        `R3F: share="${share}" borrows a WebGPU renderer and cannot be used with WebGL. Remove the \`gl\` prop, or use @react-three/fiber or @react-three/fiber/webgpu.`
+      );
+    }
+    if (isInstanceOrFactory(rendererConfig)) {
+      throw new Error(
+        `R3F: share="${share}" borrows the primary's renderer, so it cannot be combined with a renderer instance or factory. Remove one of the two.`
+      );
+    }
+  }
+  const primaryKey = canvasId || DEFAULT_PRIMARY;
+  const primaryToken = _primaryToken ?? store;
+  if (primary && !state.internal.actualRenderer) {
+    announcePrimary(primaryKey, primaryToken);
+    state.internal.unregisterPrimary = () => withdrawPrimary(primaryKey, primaryToken);
+    if (primaryConflict(primaryKey, primaryToken)) {
+      throw new Error(
+        primaryKey === DEFAULT_PRIMARY ? 'R3F: two <Canvas primary> are mounted without ids. Give each primary a distinct `id`, and point the other canvases at one with share="id".' : `R3F: two <Canvas primary> use the id "${primaryKey}". Give each primary a distinct \`id\`.`
+      );
+    }
+  }
+  let shareKey;
+  if (!state.internal.actualRenderer && webgpu && !primary && !glConfig && !state.isLegacy) {
+    if (is.str(share)) {
+      shareKey = share;
+    } else if (share !== false && !isInstanceOrFactory(rendererConfig)) {
+      const live = livePrimaryKeys();
+      if (live.length > 1) {
+        throw new Error(
+          `R3F: ${live.length} primaries are mounted (${live.map(describePrimary).join(", ")}), so this canvas cannot pick one to share. Pass share="id" to name one, or share={false} for its own renderer.`
+        );
+      }
+      shareKey = live[0];
+    }
+  }
+  const explicitShare = is.str(share);
+  const wantsGL = !!webgl && (state.isLegacy || !!glConfig || !webgpu || !rendererConfig && !primary && shareKey === void 0);
+  let renderer = state.internal.actualRenderer;
+  if (!state.internal.actualRenderer) {
+    return resolveThen(wantsGL ? webgl() : webgpu(), (support) => {
+      registerThree(support.three);
+      state.internal.support = support;
+      ensureStoreThreeObjects(store);
+      if (support.kind === "webgl") {
+        return resolveThen(resolveRenderer(glConfig, defaultGLProps, support.Renderer), (resolved) => {
+          renderer = resolved.renderer;
+          state.internal.actualRenderer = renderer;
+          state.internal.releaseRenderer = leaseRenderer(renderer, resolved.owned);
+          state.set({ isLegacy: true, gl: renderer, renderer, primaryStore: store });
+        });
+      }
+      const primaryReady = shareKey === void 0 ? null : explicitShare ? waitForPrimary(shareKey) : waitForAnnouncedPrimary(shareKey);
+      return resolveThen(primaryReady, (primaryEntry) => {
+        if (primaryEntry && primaryEntry.store.getState().webGPUSupported) {
+          renderer = primaryEntry.renderer;
+          state.internal.actualRenderer = renderer;
+          state.internal.releaseRenderer = borrowRenderer(renderer);
+          state.internal.sharedAfter = primaryEntry.rootId;
+          const canvasTarget = new support.CanvasTarget(canvas);
+          primaryEntry.store.setState((prev) => ({
+            internal: { ...prev.internal, isMultiCanvas: true }
+          }));
+          state.set((prev) => ({
+            webGPUSupported: primaryEntry.store.getState().webGPUSupported,
+            renderer,
+            primaryStore: primaryEntry.store,
+            internal: {
+              ...prev.internal,
+              canvasTarget,
+              isMultiCanvas: true,
+              isSecondary: true,
+              targetId: shareKey === DEFAULT_PRIMARY ? void 0 : shareKey
+            }
+          }));
+          return;
+        }
+        if (primaryEntry) {
+          return resolveThen(
+            createOwnedWebGPURenderer(
+              { ...rendererBag, forceWebGL: true },
+              defaultGPUProps,
+              canvas,
+              propsSize,
+              dpr,
+              support
+            ),
+            (resolved) => {
+              renderer = resolved.renderer;
+              const backend = renderer.backend;
+              const isWebGPUBackend = backend && "isWebGPUBackend" in backend;
+              state.internal.actualRenderer = renderer;
+              state.internal.releaseRenderer = leaseRenderer(renderer, resolved.owned);
+              state.set((prev) => ({
+                webGPUSupported: isWebGPUBackend,
+                renderer,
+                primaryStore: store,
+                internal: {
+                  ...prev.internal,
+                  canvasTarget: renderer.getCanvasTarget?.(),
+                  sharedRendererFallback: true
+                }
+              }));
+            }
+          );
+        }
+        return resolveThen(
+          createOwnedWebGPURenderer(rendererConfig, defaultGPUProps, canvas, propsSize, dpr, support),
+          (resolved) => {
+            var _a;
+            renderer = resolved.renderer;
+            const backend = renderer.backend;
+            const isWebGPUBackend = backend && "isWebGPUBackend" in backend;
+            state.internal.actualRenderer = renderer;
+            state.internal.releaseRenderer = leaseRenderer(renderer, resolved.owned);
+            state.set({ webGPUSupported: isWebGPUBackend, renderer, primaryStore: store });
+            if (primary) {
+              const canvasTarget = renderer.getCanvasTarget?.();
+              (_a = state.internal).pendingRootId ?? (_a.pendingRootId = canvasId || scheduler.getScheduler().generateRootId());
+              registerPrimary(primaryKey, renderer, store, {
+                token: primaryToken,
+                rootId: state.internal.pendingRootId
+              });
+              state.set((prev) => ({ internal: { ...prev.internal, canvasTarget } }));
+            } else if (share !== false && !isInstanceOrFactory(rendererConfig)) {
+              state.internal.untrackStandalone = trackStandalone(store);
+            }
+          }
+        );
+      });
+    });
+  }
+}
+const records = /* @__PURE__ */ new WeakMap();
+function take(renderer, record) {
+  record.leases++;
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    if (--record.leases > 0) return;
+    records.delete(renderer);
+    if (record.owned) return disposeRenderer(renderer);
+  };
+}
+function leaseRenderer(renderer, owned) {
+  let record = records.get(renderer);
+  if (!record) records.set(renderer, record = { owned, leases: 0 });
+  return take(renderer, record);
+}
+function borrowRenderer(renderer) {
+  const record = records.get(renderer);
+  if (!record) throw new Error("R3F: cannot share a renderer whose canvas has already unmounted");
+  return take(renderer, record);
+}
+function disposeRenderer(renderer) {
+  if (renderer.hasInitialized?.() === false) return;
+  const warn = (error) => console.warn("[R3F] Error disposing renderer", error);
+  const loseContext = () => {
+    try {
+      ;
+      renderer.forceContextLoss?.();
+    } catch (error) {
+      warn(error);
+    }
+  };
+  let disposed;
+  try {
+    disposed = renderer.dispose ? renderer.dispose() : renderer.renderLists?.dispose?.();
+  } catch (error) {
+    warn(error);
+  }
+  if (typeof disposed?.then === "function") {
+    return Promise.resolve(disposed).then(loseContext, (error) => {
+      warn(error);
+      loseContext();
+    });
+  }
+  loseContext();
+}
+const DEFAULT_PRIMARY = "\0r3f:primary";
+const primaryRegistry = /* @__PURE__ */ new Map();
+const announcements = /* @__PURE__ */ new Map();
+const withdrawing = /* @__PURE__ */ new Set();
+const pendingSubscribers = /* @__PURE__ */ new Map();
+const standaloneRoots = /* @__PURE__ */ new Set();
+const warnedLatePrimary = /* @__PURE__ */ new WeakSet();
+function describePrimary(key) {
+  return key === DEFAULT_PRIMARY ? "<Canvas primary>" : `<Canvas id="${key}" primary>`;
+}
+function notify(key, entry) {
+  const subscribers = pendingSubscribers.get(key);
+  if (!subscribers) return;
+  pendingSubscribers.delete(key);
+  subscribers.forEach((callback) => callback(entry));
+}
+function isLive(key) {
+  const owners = announcements.get(key);
+  if (owners) {
+    for (const owner of owners) if (!withdrawing.has(owner)) return true;
+  }
+  const entry = primaryRegistry.get(key);
+  return !!entry && !(entry.token && withdrawing.has(entry.token));
+}
+function announcePrimary(key, owner) {
+  withdrawing.delete(owner);
+  let owners = announcements.get(key);
+  if (!owners) announcements.set(key, owners = /* @__PURE__ */ new Set());
+  if (owners.has(owner)) return;
+  owners.add(owner);
+  if (standaloneRoots.size > 0 && !warnedLatePrimary.has(owner) && textureStaging.isDevelopment()) {
+    warnedLatePrimary.add(owner);
+    console.warn(
+      `R3F: ${describePrimary(key)} mounted after ${standaloneRoots.size} other WebGPU canvas(es) had already created their own renderer; those keep it and do not share the primary. Mount the primary with or before the canvases that share it, or give them share="id" so they wait for it.`
+    );
+  }
+}
+function markWithdrawing(owner) {
+  withdrawing.add(owner);
+}
+function withdrawPrimary(key, owner) {
+  withdrawing.delete(owner);
+  const owners = announcements.get(key);
+  if (owners) {
+    owners.delete(owner);
+    if (owners.size === 0) announcements.delete(key);
+  }
+  const entry = primaryRegistry.get(key);
+  if (entry?.token === owner) primaryRegistry.delete(key);
+  if (!isLive(key)) notify(key, null);
+}
+function primaryConflict(key, owner) {
+  const owners = announcements.get(key);
+  if (owners) {
+    for (const other of owners) {
+      if (other === owner) break;
+      if (!withdrawing.has(other)) return true;
+    }
+  }
+  const entry = primaryRegistry.get(key);
+  return !!entry && entry.token !== owner && !(entry.token && withdrawing.has(entry.token));
+}
+function livePrimaryKeys() {
+  const keys = /* @__PURE__ */ new Set([...announcements.keys(), ...primaryRegistry.keys()]);
+  return [...keys].filter(isLive);
+}
+function trackStandalone(owner) {
+  standaloneRoots.add(owner);
+  return () => {
+    standaloneRoots.delete(owner);
+  };
+}
+function registerPrimary(id, renderer, store, options = {}) {
+  if (options.token && !announcements.get(id)?.has(options.token)) return () => {
+  };
+  if (primaryRegistry.has(id)) {
+    console.warn(`Canvas with id="${id}" already registered. Overwriting.`);
+  }
+  const entry = { renderer, store, rootId: options.rootId, token: options.token };
+  primaryRegistry.set(id, entry);
+  notify(id, entry);
+  return () => {
+    const currentEntry = primaryRegistry.get(id);
+    if (currentEntry?.renderer === renderer) {
+      primaryRegistry.delete(id);
+    }
+  };
+}
+function getPrimary(id) {
+  return primaryRegistry.get(id);
+}
+function subscribe(id, callback) {
+  if (!pendingSubscribers.has(id)) pendingSubscribers.set(id, []);
+  pendingSubscribers.get(id).push(callback);
+  return () => {
+    const subscribers = pendingSubscribers.get(id);
+    if (!subscribers) return;
+    const index = subscribers.indexOf(callback);
+    if (index !== -1) subscribers.splice(index, 1);
+    if (subscribers.length === 0) pendingSubscribers.delete(id);
+  };
+}
+function waitForPrimary(id, timeout = 5e3) {
+  const existing = primaryRegistry.get(id);
+  if (existing) {
+    return Promise.resolve(existing);
+  }
+  return new Promise((resolve, reject) => {
+    let unsubscribe = () => {
+    };
+    const timeoutId = setTimeout(() => {
+      unsubscribe();
+      reject(
+        new Error(
+          `Timeout waiting for canvas with id="${id}". Make sure a <Canvas id="${id}" primary> is mounted for share="${id}".`
+        )
+      );
+    }, timeout);
+    const callback = (entry) => {
+      if (!entry) {
+        unsubscribe = subscribe(id, callback);
+        return;
+      }
+      clearTimeout(timeoutId);
+      resolve(entry);
+    };
+    unsubscribe = subscribe(id, callback);
+  });
+}
+function waitForAnnouncedPrimary(key, timeout = 5e3) {
+  const existing = primaryRegistry.get(key);
+  if (existing && isLive(key)) return Promise.resolve(existing);
+  if (!isLive(key)) return Promise.resolve(null);
+  return new Promise((resolve, reject) => {
+    const timeoutId = setTimeout(() => {
+      unsubscribe();
+      reject(
+        new Error(
+          `Timeout waiting for ${describePrimary(key)} to create its renderer. A canvas mounted next to it shares its renderer automatically; pass share={false} to give it its own.`
+        )
+      );
+    }, timeout);
+    const unsubscribe = subscribe(key, (entry) => {
+      clearTimeout(timeoutId);
+      resolve(entry);
+    });
+  });
+}
+function hasPrimary(id) {
+  return primaryRegistry.has(id);
+}
+function unregisterPrimary(id) {
+  primaryRegistry.delete(id);
+}
+function getPrimaryIds() {
+  return Array.from(primaryRegistry.keys());
+}
+
+const shallowLoose = { objects: "shallow", strict: false };
+function watchDpr(onChange) {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function" || !window.devicePixelRatio) {
+    return () => {
+    };
+  }
+  let watching = true;
+  let query;
+  const listen = () => {
+    try {
+      query = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+      if (typeof query?.addEventListener === "function") query.addEventListener("change", handleChange);
+      else query?.addListener?.(handleChange);
+    } catch {
+      query = void 0;
+    }
+  };
+  const unlisten = () => {
+    if (typeof query?.removeEventListener === "function") query.removeEventListener("change", handleChange);
+    else query?.removeListener?.(handleChange);
+    query = void 0;
+  };
+  const handleChange = () => {
+    if (!watching) return;
+    unlisten();
+    listen();
+    onChange();
+  };
+  listen();
+  return () => {
+    watching = false;
+    unlisten();
+  };
+}
+function createRootConfiguration(store, canvas) {
+  let previous;
+  let lastCamera;
+  const lastConfiguredProps = {};
+  let resolvedDpr = 0;
+  let dprChangedInXR = false;
+  let unwatchDpr;
+  const resolveDpr = () => {
+    const state = store.getState();
+    const xr = state.internal.actualRenderer?.xr;
+    if (xr?.isPresenting || xr?.getSession?.()) {
+      dprChangedInXR = true;
+      return;
+    }
+    dprChangedInXR = false;
+    const dpr = lastConfiguredProps.dpr;
+    if (dpr === void 0 || state.viewport.dpr !== resolvedDpr || calculateDpr(dpr) === resolvedDpr) return;
+    state.setDpr(dpr);
+    resolvedDpr = store.getState().viewport.dpr;
+  };
+  let warnedSharedSettings = false;
+  let configured = false;
+  return (props) => {
+    const {
+      gl: glConfig,
+      renderer: rendererConfig,
+      size: propsSize,
+      scene: sceneOptions,
+      events,
+      orthographic = false,
+      frameloop = "always",
+      dpr = [1, 2],
+      performance,
+      raycaster: raycastOptions,
+      camera: cameraOptions,
+      onPointerMissed,
+      onDragOverMissed,
+      onDropMissed,
+      autoUpdateFrustum = true,
+      occlusion = false,
+      _sizeProps,
+      forceEven
+    } = props;
+    assertNoRemovedConfig(props);
+    const rendererBag = settingsBag(rendererConfig);
+    const settings = settingsBag(glConfig) ?? rendererBag;
+    const requestedTextureColorSpace = settings?.textureColorSpace || void 0;
+    const shadows = isInstanceOrFactory(glConfig ?? rendererConfig) ? void 0 : settings?.shadows ?? false;
+    const next = { ...props, shadows, frameloop, autoUpdateFrustum, occlusion };
+    const last = previous;
+    const changed = (key) => !last || !is.equ(next[key], last[key], { objects: "shallow" });
+    previous = void 0;
+    const state = store.getState();
+    const renderer = state.internal.actualRenderer;
+    const three = getThree();
+    const borrowsRenderer = state.internal.isSecondary === true;
+    if (borrowsRenderer && !warnedSharedSettings && rendererBag && Object.keys(rendererBag).some((key) => key !== "textureColorSpace") && textureStaging.isDevelopment()) {
+      warnedSharedSettings = true;
+      console.warn(
+        "R3F: renderer settings on a sharing canvas are ignored; set them on the <Canvas primary>. This canvas borrows the primary's renderer, so renderer-wide settings come from the primary. Pass share={false} to give this canvas its own renderer."
+      );
+    }
+    let raycaster = state.raycaster;
+    if (!raycaster) state.set({ raycaster: raycaster = new three.Raycaster() });
+    if (changed("raycaster")) {
+      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 } });
+      }
+    }
+    let tempCamera = state.camera;
+    if (!state.camera || state.camera === lastCamera && changed("camera")) {
+      lastCamera = cameraOptions;
+      const isCamera = cameraOptions?.isCamera;
+      const camera = isCamera ? cameraOptions : orthographic ? new three.OrthographicCamera(0, 0, 0, 0, 0.1, 1e3) : new three.PerspectiveCamera(50, 0, 0.1, 1e3);
+      if (!isCamera) {
+        camera.position.z = 5;
+        if (cameraOptions) {
+          applyProps(camera, cameraOptions);
+          if (!camera.manual) {
+            const projectionProps = ["aspect", "left", "right", "bottom", "top"];
+            if (projectionProps.some((prop) => prop in cameraOptions)) {
+              camera.manual = true;
+              camera.updateProjectionMatrix();
+            }
+          }
+        }
+        if (!state.camera && !cameraOptions?.rotation) camera.lookAt(0, 0, 0);
+      }
+      state.set({ camera });
+      tempCamera = camera;
+      raycaster.camera = camera;
+    }
+    if (!state.scene) {
+      let scene;
+      if (sceneOptions?.isScene) {
+        scene = sceneOptions;
+        prepare(scene, store, "", {});
+      } else {
+        scene = new three.Scene();
+        prepare(scene, store, "", {});
+        if (sceneOptions) applyProps(scene, sceneOptions);
+      }
+      state.set((prev) => ({
+        scene,
+        rootScene: scene,
+        internal: { ...prev.internal, container: scene }
+      }));
+      const camera = tempCamera;
+      if (camera && !camera.parent) scene.add(camera);
+    }
+    if (events && !state.events.handlers) {
+      state.set({ events: events(store) });
+      let wasEnabled = true;
+      store.subscribe((state2) => {
+        const { enabled } = state2.events;
+        if (enabled && !wasEnabled) {
+          state2.events.update?.();
+        }
+        wasEnabled = enabled;
+      });
+    }
+    if (_sizeProps !== void 0 && changed("_sizeProps")) {
+      state.set({ _sizeProps });
+    }
+    if (forceEven !== void 0 && state.internal.forceEven !== forceEven) {
+      state.set((prev) => ({ internal: { ...prev.internal, forceEven } }));
+    }
+    configureSize(store, computeInitialSize(canvas, propsSize));
+    if (dpr !== void 0 && (!last || !is.equ(dpr, lastConfiguredProps.dpr, shallowLoose))) {
+      state.setDpr(dpr);
+      lastConfiguredProps.dpr = dpr;
+      resolvedDpr = store.getState().viewport.dpr;
+    }
+    const internal = store.getState().internal;
+    if (Array.isArray(dpr) && (!unwatchDpr || internal.unwatchDpr !== unwatchDpr)) {
+      internal.unwatchDpr?.();
+      internal.unwatchDpr = unwatchDpr = watchDpr(resolveDpr);
+    }
+    resolveDpr();
+    if (frameloop !== void 0 && changed("frameloop")) {
+      state.setFrameloop(frameloop);
+    }
+    if (changed("onPointerMissed")) state.set({ onPointerMissed });
+    if (changed("onDragOverMissed")) state.set({ onDragOverMissed });
+    if (changed("onDropMissed")) state.set({ onDropMissed });
+    if (changed("autoUpdateFrustum") && state.autoUpdateFrustum !== autoUpdateFrustum) {
+      state.set({ autoUpdateFrustum });
+    }
+    if (occlusion && !state.internal.occlusionEnabled) {
+      enableOcclusion(store);
+    }
+    if (performance && changed("performance")) {
+      state.set((state2) => ({ performance: { ...state2.performance, ...performance } }));
+    }
+    if (!state.xr) {
+      const handleXRFrame = (timestamp, _frame) => {
+        const state2 = store.getState();
+        if (state2.frameloop === "never") return;
+        advance(timestamp, true, state2);
+      };
+      const actualRenderer = state.internal.actualRenderer;
+      const handleSessionChange = () => {
+        const state2 = store.getState();
+        const renderer2 = state2.internal.actualRenderer;
+        actualRenderer.xr.enabled = actualRenderer.xr.isPresenting;
+        renderer2.xr.setAnimationLoop(renderer2.xr.isPresenting ? handleXRFrame : null);
+        if (!renderer2.xr.isPresenting) {
+          if (dprChangedInXR) resolveDpr();
+          invalidate(state2);
+        }
+      };
+      const xr = {
+        connect() {
+          const xrManager = store.getState().renderer.xr;
+          xrManager.addEventListener("sessionstart", handleSessionChange);
+          xrManager.addEventListener("sessionend", handleSessionChange);
+        },
+        disconnect() {
+          const xrManager = store.getState().renderer.xr;
+          xrManager.removeEventListener("sessionstart", handleSessionChange);
+          xrManager.removeEventListener("sessionend", handleSessionChange);
+        }
+      };
+      if (!borrowsRenderer && typeof renderer.xr?.addEventListener === "function") xr.connect();
+      state.set({ xr });
+    }
+    if (!borrowsRenderer && shadows !== void 0 && renderer.shadowMap && changed("shadows")) {
+      const oldEnabled = renderer.shadowMap.enabled;
+      const oldType = renderer.shadowMap.type;
+      renderer.shadowMap.enabled = !!shadows;
+      if (is.boo(shadows)) {
+        renderer.shadowMap.type = three.PCFShadowMap;
+      } else if (is.str(shadows)) {
+        if (shadows === "soft") {
+          textureStaging.notifyDepreciated({
+            heading: 'shadows="soft" is deprecated',
+            body: "Three has depreciated soft and improved basic PCFShadows, we converted for you.",
+            link: "https://github.com/mrdoob/three.js/wiki/Migration-Guide?utm_source=chatgpt.com#181--182"
+          });
+        }
+        const types = {
+          basic: three.BasicShadowMap,
+          percentage: three.PCFShadowMap,
+          soft: three.PCFShadowMap,
+          variance: three.VSMShadowMap
+        };
+        renderer.shadowMap.type = types[shadows] ?? three.PCFShadowMap;
+      } else if (is.obj(shadows)) {
+        Object.assign(renderer.shadowMap, shadows);
+      }
+      if (oldEnabled !== renderer.shadowMap.enabled || oldType !== renderer.shadowMap.type) {
+        renderer.shadowMap.needsUpdate = true;
+      }
+    }
+    if (!configured && !borrowsRenderer) {
+      renderer.outputColorSpace = three.SRGBColorSpace;
+      renderer.toneMapping = three.ACESFilmicToneMapping;
+    }
+    const textureColorSpace = requestedTextureColorSpace ?? three.SRGBColorSpace;
+    if (textureColorSpace !== lastConfiguredProps.textureColorSpace) {
+      if (state.textureColorSpace !== textureColorSpace) state.set(() => ({ textureColorSpace }));
+      lastConfiguredProps.textureColorSpace = textureColorSpace;
+    }
+    if (glConfig && !is.fun(glConfig) && !isRenderer(glConfig) && changed("gl")) {
+      const glProps = {};
+      for (const key in glConfig) {
+        if (!NON_APPLIED_RENDERER_PROPS.has(key)) glProps[key] = glConfig[key];
+      }
+      applyProps(renderer, glProps);
+    }
+    if (rendererConfig && !is.fun(rendererConfig) && !isRenderer(rendererConfig) && state.renderer && !borrowsRenderer) {
+      const currentRenderer = state.renderer;
+      if (changed("renderer")) {
+        const rendererProps = {};
+        for (const key in rendererConfig) {
+          if (!NON_APPLIED_RENDERER_PROPS.has(key)) rendererProps[key] = rendererConfig[key];
+        }
+        applyProps(currentRenderer, rendererProps);
+      }
+    }
+    configured = true;
+    previous = next;
+  };
+}
+
+const version = "10.0.0-alpha.5";
+const packageData = {
+	version: version};
+
+function $1(Ut) {
+  return Ut && Ut.__esModule && Object.prototype.hasOwnProperty.call(Ut, "default") ? Ut.default : Ut;
+}
+var S0 = { exports: {} }, Ob = { exports: {} }, P1;
+function Q1() {
+  return P1 || (P1 = 1, (function(Ut) {
+    Ut.exports = function(m) {
+      function et(t, r, a, l) {
+        return new Fe(t, r, a, l);
+      }
+      function zf() {
+      }
+      function F(t) {
+        var r = "https://react.dev/errors/" + t;
+        if (1 < arguments.length) {
+          r += "?args[]=" + encodeURIComponent(arguments[1]);
+          for (var a = 2; a < arguments.length; a++) r += "&args[]=" + encodeURIComponent(arguments[a]);
+        }
+        return "Minified React error #" + t + "; visit " + r + " for the full message or use the non-minified dev environment for full errors and additional helpful warnings.";
+      }
+      function Ef(t) {
+        for (var r = t, a = r; a && !a.alternate; ) r = a, (r.flags & 4098) !== 0 && (t = r.return), a = r.return;
+        for (; r.return; ) r = r.return;
+        return r.tag === 3 ? t : null;
+      }
+      function pc(t) {
+        if (Ef(t) !== t) throw Error(F(188));
+      }
+      function hc(t) {
         var r = t.alternate;
         if (!r) {
           if (r = Ef(t), r === null) throw Error(F(188));
@@ -13330,15 +14107,16 @@ function swapInteractivity(store, object, newObject) {
         pointerState.hovered.set(makeId(next), next);
       }
     });
-    const captureData = pointerState.captured.get(object);
-    if (captureData) {
-      pointerState.captured.delete(object);
-      pointerState.captured.set(newObject, {
+    for (const [key, captureData] of Array.from(pointerState.captured)) {
+      const { intersection } = captureData;
+      if (key !== object && intersection.object !== object && intersection.eventObject !== object) continue;
+      if (key === object) pointerState.captured.delete(key);
+      pointerState.captured.set(key === object ? newObject : key, {
         ...captureData,
         intersection: {
-          ...captureData.intersection,
-          object: captureData.intersection.object === object ? newObject : captureData.intersection.object,
-          eventObject: captureData.intersection.eventObject === object ? newObject : captureData.intersection.eventObject
+          ...intersection,
+          object: intersection.object === object ? newObject : intersection.object,
+          eventObject: intersection.eventObject === object ? newObject : intersection.eventObject
         }
       });
     }
@@ -13867,10 +14645,11 @@ const catalogue = globalThis[R3F_CATALOGUE] ?? (globalThis[R3F_CATALOGUE] = {});
 const R3F_EXTEND_ID = Symbol.for("@react-three/fiber.extendId");
 const ids = globalThis;
 const toPascalCase = (type) => `${type[0].toUpperCase()}${type.slice(1)}`;
-const isConstructor = (object) => typeof object === "function";
+const isConstructor$1 = (object) => typeof object === "function";
 function extend(objects) {
-  if (isConstructor(objects)) {
-    const id = ids[R3F_EXTEND_ID] ?? 0;
+  if (isConstructor$1(objects)) {
+    let id = ids[R3F_EXTEND_ID] ?? 0;
+    while (`${id}` in catalogue) id++;
     ids[R3F_EXTEND_ID] = id + 1;
     const Component = `${id}`;
     catalogue[Component] = objects;
@@ -13878,15 +14657,14 @@ function extend(objects) {
   } else {
     for (const name in objects) {
       const object = objects[name];
-      if (isConstructor(object)) catalogue[name] = object;
+      if (isConstructor$1(object)) catalogue[name] = object;
     }
   }
 }
-
 function resolveConstructor(name, root) {
   if (Object.prototype.hasOwnProperty.call(catalogue, name)) return catalogue[name];
   const object = root.getState().internal.support?.three[name];
-  return isConstructor(object) ? object : void 0;
+  return isConstructor$1(object) ? object : void 0;
 }
 
 function createReconciler(config) {
@@ -13900,11 +14678,16 @@ function validateInstance(type, props, root) {
   const name = toPascalCase(type);
   const target = resolveConstructor(name, root);
   if (type !== "primitive" && !target) {
+    if (name.endsWith("NodeMaterial")) {
+      assertNodeMaterialSupported(root.getState(), { isNodeMaterial: true, type: name });
+    }
     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`
     );
   }
   if (type === "primitive" && !props.object) throw new Error(`R3F: Primitives without 'object' are invalid!`);
+  assertNodeMaterialSupported(root.getState(), props.object);
+  assertNodeMaterialSupported(root.getState(), props.material);
   if (props.args !== void 0 && !Array.isArray(props.args)) throw new Error("R3F: The args prop must be an array!");
 }
 function createInstance(type, props, root) {
@@ -13918,6 +14701,7 @@ function hideInstance(instance) {
     if (instance.props.attach && instance.parent?.object) {
       detach(instance.parent, instance);
     } else if (isObject3D(instance.object)) {
+      instance.previousVisible = instance.object.visible;
       instance.object.visible = false;
     }
     instance.isHidden = true;
@@ -13928,9 +14712,10 @@ function unhideInstance(instance) {
   if (instance.isHidden) {
     if (instance.props.attach && instance.parent?.object) {
       attach(instance.parent, instance);
-    } else if (isObject3D(instance.object) && instance.props.visible !== false) {
-      instance.object.visible = true;
+    } else if (isObject3D(instance.object)) {
+      instance.object.visible = instance.previousVisible ?? true;
     }
+    instance.previousVisible = void 0;
     instance.isHidden = false;
     invalidateInstance(instance);
   }
@@ -13943,6 +14728,7 @@ function handleContainerEffects(parent, child, beforeChild) {
     child.object = child.props.object ?? new target(...child.props.args ?? []);
     child.object.__r3f = child;
   }
+  warnGLSLMaterialUnsupported(state, child.object);
   applyProps(child.object, child.props);
   if (child.props.attach) {
     attach(parent, child);
@@ -14003,6 +14789,7 @@ function disposeOnIdle(object) {
 }
 function removeChild(parent, child, dispose) {
   if (!child) return;
+  const wasLinked = !!child.parent;
   child.parent = null;
   const childIndex = parent.children.indexOf(child);
   if (childIndex !== -1) parent.children.splice(childIndex, 1);
@@ -14022,7 +14809,10 @@ function removeChild(parent, child, dispose) {
   if (shouldDispose && child.type !== "primitive" && child.object.type !== "Scene") {
     disposeOnIdle(child.object);
   }
-  if (dispose === void 0) invalidateInstance(child);
+  if (dispose === void 0 && wasLinked) {
+    const state = findInitialRoot(child).getState();
+    if (state.internal.active && state.internal.frames === 0) state.invalidate();
+  }
 }
 function setFiberRef(fiber, publicInstance) {
   for (const _fiber of [fiber, fiber.alternate]) {
@@ -14343,462 +15133,125 @@ const reconciler = /* @__PURE__ */ createReconciler({
   rendererPackageName: "@react-three/fiber",
   rendererVersion: packageData.version,
   // 19.2 Reconciler
-  // https://github.com/facebook/react/pull/31975
-  // https://github.com/facebook/react/pull/31999
-  applyViewTransitionName(_instance, _name, _className) {
-  },
-  restoreViewTransitionName(_instance, _props) {
-  },
-  cancelViewTransitionName(_instance, _name, _props) {
-  },
-  cancelRootViewTransitionName(_rootContainer) {
-  },
-  restoreRootViewTransitionName(_rootContainer) {
-  },
-  InstanceMeasurement: null,
-  measureInstance: (_instance) => null,
-  wasInstanceInViewport: (_measurement) => true,
-  hasInstanceChanged: (_oldMeasurement, _newMeasurement) => false,
-  hasInstanceAffectedParent: (_oldMeasurement, _newMeasurement) => false,
-  // https://github.com/facebook/react/pull/32002
-  // https://github.com/facebook/react/pull/34486
-  suspendOnActiveViewTransition(_state, _container) {
-  },
-  // https://github.com/facebook/react/pull/32451
-  // https://github.com/facebook/react/pull/32760
-  // React hands the whole commit to the host when a transition touches a <ViewTransition> subtree.
-  // three.js has nothing to animate between commits, so this mirrors the react-dom fallback for
-  // browsers without document.startViewTransition and flushes the commit synchronously.
-  startViewTransition(_suspendedState, _rootContainer, _transitionTypes, mutationCallback, layoutCallback, _afterMutationCallback, spawnedWorkCallback, _passiveCallback, _errorCallback, _blockedCallback, finishedAnimation) {
-    mutationCallback();
-    layoutCallback();
-    finishedAnimation?.();
-    spawnedWorkCallback();
-    return null;
-  },
-  startGestureTransition(_suspendedState, _rootContainer, _timeline, _rangeStart, _rangeEnd, _transitionTypes, mutationCallback, animateCallback, _errorCallback, finishedAnimation) {
-    mutationCallback();
-    animateCallback();
-    finishedAnimation?.();
-    return null;
-  },
-  stopViewTransition(_transition) {
-  },
-  // https://github.com/facebook/react/pull/35564
-  // Only reached with a non-null transition from startViewTransition, which never returns one here
-  addViewTransitionFinishedListener(_transition, callback) {
-    callback();
-  },
-  // https://github.com/facebook/react/pull/32038
-  createViewTransitionInstance: (_name) => null,
-  // https://github.com/facebook/react/pull/32379
-  // https://github.com/facebook/react/pull/32786
-  getCurrentGestureOffset(_provider) {
-    throw new Error("startGestureTransition is not yet supported in react-three-fiber.");
-  },
-  // https://github.com/facebook/react/pull/32500
-  cloneMutableInstance(instance, _keepChildren) {
-    return instance;
-  },
-  cloneMutableTextInstance(textInstance) {
-    return textInstance;
-  },
-  // React 19.2 added these for root-level view transitions. They only run for hosts that opt into
-  // view transitions by returning a container from cloneRootViewTransitionContainer; R3F renders
-  // into a WebGL/WebGPU canvas, where cloning the root has no meaning, so we never opt in and
-  // React never calls them. They stay as no-ops rather than throws: the host config is shared by
-  // every root, and a throw here would turn a React-internal probe into a hard crash for users.
-  // Guarded by a test asserting a full render + unmount never reaches them.
-  cloneRootViewTransitionContainer(_rootContainer) {
-  },
-  removeRootViewTransitionClone(_rootContainer, _clone) {
-  },
-  // https://github.com/facebook/react/pull/32465
-  createFragmentInstance: (_fiber) => null,
-  updateFragmentInstanceFiber(_fiber, _instance) {
-  },
-  commitNewChildToFragmentInstance(_child, _fragmentInstance) {
-  },
-  deleteChildFromFragmentInstance(_child, _fragmentInstance) {
-  },
-  // https://github.com/facebook/react/pull/32653
-  measureClonedInstance: (_instance) => null,
-  // https://github.com/facebook/react/pull/32819
-  maySuspendCommitOnUpdate: (_type, _oldProps, _newProps) => false,
-  maySuspendCommitInSyncRender: (_type, _props) => false,
-  // https://github.com/facebook/react/pull/34486
-  startSuspendingCommit: () => null,
-  // https://github.com/facebook/react/pull/34522
-  getSuspendedCommitReason: (_state, _rootContainer) => null
-});
-
-const INTERNAL_LIB_MARKERS = ["zustand", "setState", "Object.assign"];
-function isInternalRendererAccess(stack, callerDepth = 2) {
-  if (!stack) return false;
-  const caller = stack.split("\n")[callerDepth] ?? "";
-  return INTERNAL_LIB_MARKERS.some((m) => caller.includes(m));
-}
-
-const createStore = (invalidate, advance) => {
-  const rootStore = traditional.createWithEqualityFn((set, get) => {
-    let position;
-    let defaultTarget;
-    let tempTarget;
-    function getCurrentViewport(camera = get().camera, target = void 0, size = get().size) {
-      const { Vector3 } = getThree();
-      position ?? (position = new Vector3());
-      defaultTarget ?? (defaultTarget = new Vector3());
-      tempTarget ?? (tempTarget = new Vector3());
-      target ?? (target = defaultTarget);
-      const { width, height, top, left } = size;
-      const aspect = width / height;
-      if (target.isVector3) tempTarget.copy(target);
-      else tempTarget.set(...target);
-      const distance = camera.getWorldPosition(position).distanceTo(tempTarget);
-      if (isOrthographicCamera(camera)) {
-        return { width: width / camera.zoom, height: height / camera.zoom, top, left, factor: 1, distance, aspect };
-      } else {
-        const fov = camera.fov * Math.PI / 180;
-        const h = 2 * Math.tan(fov / 2) * distance;
-        const w = h * (width / height);
-        return { width: w, height: h, top, left, factor: width / w, distance, aspect };
-      }
-    }
-    let performanceTimeout = void 0;
-    const setPerformanceCurrent = (current) => set((state2) => ({ performance: { ...state2.performance, current } }));
-    const rootState = {
-      set,
-      get,
-      // Mock objects that have to be configured
-      // primaryStore is set after store creation (self-reference for primary, primary's store for secondary)
-      primaryStore: null,
-      gl: null,
-      renderer: null,
-      camera: null,
-      // frustum, pointer and mouse are three objects; configure() creates them with the renderer
-      frustum: null,
-      autoUpdateFrustum: true,
-      raycaster: null,
-      events: {
-        priority: 1,
-        enabled: true,
-        connected: false,
-        frameTimedRaycasts: true,
-        alwaysFireOnScroll: true,
-        updateOnFrame: false
-      },
-      scene: null,
-      rootScene: null,
-      xr: null,
-      inspector: null,
-      invalidate: (frames = 1, stackFrames = false) => invalidate(get(), frames, stackFrames),
-      advance: (timestamp, runGlobalEffects) => advance(timestamp, runGlobalEffects, get()),
-      textureColorSpace: "srgb",
-      // THREE.SRGBColorSpace
-      isLegacy: false,
-      webGPUSupported: false,
-      isNative: false,
-      controls: null,
-      pointer: null,
-      mouse: null,
-      frameloop: "always",
-      onPointerMissed: void 0,
-      onDragOverMissed: void 0,
-      onDropMissed: void 0,
-      performance: {
-        current: 1,
-        min: 0.5,
-        max: 1,
-        debounce: 200,
-        regress: () => {
-          const state2 = get();
-          if (performanceTimeout) clearTimeout(performanceTimeout);
-          if (state2.performance.current !== state2.performance.min) setPerformanceCurrent(state2.performance.min);
-          performanceTimeout = setTimeout(
-            () => setPerformanceCurrent(get().performance.max),
-            state2.performance.debounce
-          );
-        }
-      },
-      size: { width: 0, height: 0, top: 0, left: 0 },
-      viewport: {
-        initialDpr: 0,
-        dpr: 0,
-        width: 0,
-        height: 0,
-        top: 0,
-        left: 0,
-        aspect: 0,
-        distance: 0,
-        factor: 0,
-        getCurrentViewport
-      },
-      setEvents: (events) => set((state2) => ({ ...state2, events: { ...state2.events, ...events } })),
-      setSize: (width, height, top, left) => {
-        const state2 = get();
-        if (width === void 0) {
-          set({ _sizeImperative: false });
-          if (state2._sizeProps) {
-            const { width: propW, height: propH } = state2._sizeProps;
-            if (propW !== void 0 || propH !== void 0) {
-              const currentSize = state2.size;
-              const newSize = {
-                width: propW ?? currentSize.width,
-                height: propH ?? currentSize.height,
-                top: currentSize.top,
-                left: currentSize.left
-              };
-              set((s) => ({
-                size: newSize,
-                viewport: { ...s.viewport, ...getCurrentViewport(state2.camera, defaultTarget, newSize) }
-              }));
-              get().invalidate();
-            }
-          }
-          return;
-        }
-        const w = width;
-        const h = height ?? width;
-        const t = top ?? state2.size.top;
-        const l = left ?? state2.size.left;
-        const size = { width: w, height: h, top: t, left: l };
-        set((s) => ({
-          size,
-          viewport: { ...s.viewport, ...getCurrentViewport(state2.camera, defaultTarget, size) },
-          _sizeImperative: true
-        }));
-        get().invalidate();
-      },
-      setDpr: (dpr) => set((state2) => {
-        const resolved = calculateDpr(dpr);
-        return { viewport: { ...state2.viewport, dpr: resolved, initialDpr: state2.viewport.initialDpr || resolved } };
-      }),
-      setFrameloop: (frameloop = "always") => {
-        const rootId = get().internal.rootId;
-        if (rootId) scheduler.getScheduler().setRootFrameloop(rootId, frameloop);
-        set(() => ({ frameloop }));
-      },
-      setError: (error) => set(() => ({ error })),
-      error: null,
-      //* Texture registry (useTextures) ==============================
-      // TSL fields (uniforms, nodes, ..., renderPipeline) are added by @react-three/tsl's root extension.
-      textures: /* @__PURE__ */ new Map(),
-      _textureRefs: /* @__PURE__ */ new Map(),
-      _sizeImperative: false,
-      _sizeProps: null,
-      previousRoot: void 0,
-      internal: {
-        // Events
-        interaction: [],
-        subscribers: [],
-        // Per-pointer state (new unified structure)
-        pointerMap: /* @__PURE__ */ new Map(),
-        pointerDirty: /* @__PURE__ */ new Map(),
-        lastEvent: React__namespace.createRef(),
-        // Deprecated but kept for backwards compatibility
-        hovered: /* @__PURE__ */ new Map(),
-        initialClick: [0, 0],
-        initialHits: [],
-        capturedMap: /* @__PURE__ */ new Map(),
-        // Visibility tracking (onFramed, onOccluded, onVisible)
-        visibilityRegistry: /* @__PURE__ */ new Map(),
-        // Occlusion system (WebGPU only)
-        occlusionEnabled: false,
-        occlusionObserver: null,
-        occlusionCache: /* @__PURE__ */ new Map(),
-        helperGroup: null,
-        // Updates
-        active: false,
-        frames: 0,
-        priority: 0,
-        subscribe: (ref, priority, store) => {
-          const internal = get().internal;
-          internal.priority = internal.priority + (priority > 0 ? 1 : 0);
-          internal.subscribers.push({ ref, priority, store });
-          internal.subscribers = internal.subscribers.sort((a, b) => a.priority - b.priority);
-          return () => {
-            const internal2 = get().internal;
-            if (internal2?.subscribers) {
-              internal2.priority = internal2.priority - (priority > 0 ? 1 : 0);
-              internal2.subscribers = internal2.subscribers.filter((s) => s.ref !== ref);
-            }
-          };
-        },
-        // Renderer Storage (single source of truth)
-        actualRenderer: null,
-        // The renderer support configure() loads for this root
-        support: null,
-        // Scheduler for useFrameNext (initialized in renderer.tsx)
-        scheduler: null,
-        // Replaces the default render call when set (see setRenderOverride)
-        renderOverride: null
-      }
-    };
-    return rootState;
-  });
-  const state = rootStore.getState();
-  Object.defineProperty(state, "gl", {
-    get() {
-      const currentState = rootStore.getState();
-      if (!currentState.isLegacy && currentState.internal.actualRenderer) {
-        const stack = new Error().stack || "";
-        if (!isInternalRendererAccess(stack)) {
-          const cleanedStack = stack.split("\n").slice(2).join("\n") || "Stack trace unavailable";
-          extensions.notifyDepreciated({
-            heading: "Accessing state.gl in WebGPU mode",
-            body: "Please use state.renderer instead. state.gl is deprecated and will be removed in future versions.\n\nFor backwards compatibility, state.gl currently maps to state.renderer, but this may cause issues with libraries expecting WebGLRenderer.\n\nAccessed from:\n" + cleanedStack
-          });
-        }
-      }
-      return currentState.internal.actualRenderer;
-    },
-    set(value) {
-      rootStore.getState().internal.actualRenderer = value;
-    },
-    enumerable: true,
-    configurable: true
-  });
-  Object.defineProperty(state, "renderer", {
-    get() {
-      return rootStore.getState().internal.actualRenderer;
-    },
-    set(value) {
-      rootStore.getState().internal.actualRenderer = value;
-    },
-    enumerable: true,
-    configurable: true
-  });
-  let oldScene = state.scene;
-  rootStore.subscribe(() => {
-    const currentState = rootStore.getState();
-    const { scene, rootScene, set } = currentState;
-    if (scene !== oldScene) {
-      oldScene = scene;
-      if (scene?.isScene && scene !== rootScene) {
-        set({ rootScene: scene });
-      }
-    }
-  });
-  let oldSize = state.size;
-  let oldDpr = state.viewport.dpr;
-  let oldCamera = state.camera;
-  rootStore.subscribe(() => {
-    const { camera, size, viewport, set, internal } = rootStore.getState();
-    const actualRenderer = internal.actualRenderer;
-    const canvasTarget = internal.canvasTarget;
-    if (size.width !== oldSize.width || size.height !== oldSize.height || viewport.dpr !== oldDpr) {
-      oldSize = size;
-      oldDpr = viewport.dpr;
-      updateCamera(camera, size);
-      const resizeTarget = canvasTarget ?? actualRenderer;
-      if (viewport.dpr > 0) resizeTarget.setPixelRatio(viewport.dpr);
-      resizeTarget.setSize(size.width, size.height, false);
-      const activeTarget = actualRenderer.getCanvasTarget?.();
-      if (!canvasTarget || activeTarget !== canvasTarget) internal.canvasTargetSizeDirty = true;
-    }
-    if (camera !== oldCamera) {
-      oldCamera = camera;
-      const { rootScene } = rootStore.getState();
-      if (camera && rootScene && !camera.parent) {
-        rootScene.add(camera);
-      }
-      set((state2) => ({ viewport: { ...state2.viewport, ...state2.viewport.getCurrentViewport(camera) } }));
-      const currentState = rootStore.getState();
-      if (currentState.autoUpdateFrustum && camera) {
-        updateFrustum(camera, currentState.frustum);
-      }
-    }
-  });
-  rootStore.subscribe((state2) => invalidate(state2));
-  return rootStore;
-};
-
-const primaryRegistry = /* @__PURE__ */ new Map();
-const pendingSubscribers = /* @__PURE__ */ new Map();
-function registerPrimary(id, renderer, store) {
-  if (primaryRegistry.has(id)) {
-    console.warn(`Canvas with id="${id}" already registered. Overwriting.`);
-  }
-  const entry = { renderer, store };
-  primaryRegistry.set(id, entry);
-  const subscribers = pendingSubscribers.get(id);
-  if (subscribers) {
-    subscribers.forEach((callback) => callback(entry));
-    pendingSubscribers.delete(id);
-  }
-  return () => {
-    const currentEntry = primaryRegistry.get(id);
-    if (currentEntry?.renderer === renderer) {
-      primaryRegistry.delete(id);
-    }
-  };
-}
-function getPrimary(id) {
-  return primaryRegistry.get(id);
-}
-function waitForPrimary(id, timeout = 5e3) {
-  const existing = primaryRegistry.get(id);
-  if (existing) {
-    return Promise.resolve(existing);
-  }
-  return new Promise((resolve, reject) => {
-    const timeoutId = setTimeout(() => {
-      const subscribers = pendingSubscribers.get(id);
-      if (subscribers) {
-        const index = subscribers.indexOf(callback);
-        if (index !== -1) subscribers.splice(index, 1);
-        if (subscribers.length === 0) pendingSubscribers.delete(id);
-      }
-      reject(new Error(`Timeout waiting for canvas with id="${id}". Make sure a <Canvas id="${id}"> is mounted.`));
-    }, timeout);
-    const callback = (entry) => {
-      clearTimeout(timeoutId);
-      resolve(entry);
-    };
-    if (!pendingSubscribers.has(id)) {
-      pendingSubscribers.set(id, []);
-    }
-    pendingSubscribers.get(id).push(callback);
-  });
-}
-function hasPrimary(id) {
-  return primaryRegistry.has(id);
-}
-function unregisterPrimary(id) {
-  primaryRegistry.delete(id);
-}
-function getPrimaryIds() {
-  return Array.from(primaryRegistry.keys());
+  // https://github.com/facebook/react/pull/31975
+  // https://github.com/facebook/react/pull/31999
+  applyViewTransitionName(_instance, _name, _className) {
+  },
+  restoreViewTransitionName(_instance, _props) {
+  },
+  cancelViewTransitionName(_instance, _name, _props) {
+  },
+  cancelRootViewTransitionName(_rootContainer) {
+  },
+  restoreRootViewTransitionName(_rootContainer) {
+  },
+  InstanceMeasurement: null,
+  measureInstance: (_instance) => null,
+  wasInstanceInViewport: (_measurement) => true,
+  hasInstanceChanged: (_oldMeasurement, _newMeasurement) => false,
+  hasInstanceAffectedParent: (_oldMeasurement, _newMeasurement) => false,
+  // https://github.com/facebook/react/pull/32002
+  // https://github.com/facebook/react/pull/34486
+  suspendOnActiveViewTransition(_state, _container) {
+  },
+  // https://github.com/facebook/react/pull/32451
+  // https://github.com/facebook/react/pull/32760
+  // React hands the whole commit to the host when a transition touches a <ViewTransition> subtree.
+  // three.js has nothing to animate between commits, so this mirrors the react-dom fallback for
+  // browsers without document.startViewTransition and flushes the commit synchronously.
+  startViewTransition(_suspendedState, _rootContainer, _transitionTypes, mutationCallback, layoutCallback, _afterMutationCallback, spawnedWorkCallback, _passiveCallback, _errorCallback, _blockedCallback, finishedAnimation) {
+    mutationCallback();
+    layoutCallback();
+    finishedAnimation?.();
+    spawnedWorkCallback();
+    return null;
+  },
+  startGestureTransition(_suspendedState, _rootContainer, _timeline, _rangeStart, _rangeEnd, _transitionTypes, mutationCallback, animateCallback, _errorCallback, finishedAnimation) {
+    mutationCallback();
+    animateCallback();
+    finishedAnimation?.();
+    return null;
+  },
+  stopViewTransition(_transition) {
+  },
+  // https://github.com/facebook/react/pull/35564
+  // Only reached with a non-null transition from startViewTransition, which never returns one here
+  addViewTransitionFinishedListener(_transition, callback) {
+    callback();
+  },
+  // https://github.com/facebook/react/pull/32038
+  createViewTransitionInstance: (_name) => null,
+  // https://github.com/facebook/react/pull/32379
+  // https://github.com/facebook/react/pull/32786
+  getCurrentGestureOffset(_provider) {
+    throw new Error("startGestureTransition is not yet supported in react-three-fiber.");
+  },
+  // https://github.com/facebook/react/pull/32500
+  cloneMutableInstance(instance, _keepChildren) {
+    return instance;
+  },
+  cloneMutableTextInstance(textInstance) {
+    return textInstance;
+  },
+  // React 19.2 added these for root-level view transitions. They only run for hosts that opt into
+  // view transitions by returning a container from cloneRootViewTransitionContainer; R3F renders
+  // into a WebGL/WebGPU canvas, where cloning the root has no meaning, so we never opt in and
+  // React never calls them. They stay as no-ops rather than throws: the host config is shared by
+  // every root, and a throw here would turn a React-internal probe into a hard crash for users.
+  // Guarded by a test asserting a full render + unmount never reaches them.
+  cloneRootViewTransitionContainer(_rootContainer) {
+  },
+  removeRootViewTransitionClone(_rootContainer, _clone) {
+  },
+  // https://github.com/facebook/react/pull/32465
+  createFragmentInstance: (_fiber) => null,
+  updateFragmentInstanceFiber(_fiber, _instance) {
+  },
+  commitNewChildToFragmentInstance(_child, _fragmentInstance) {
+  },
+  deleteChildFromFragmentInstance(_child, _fragmentInstance) {
+  },
+  // https://github.com/facebook/react/pull/32653
+  measureClonedInstance: (_instance) => null,
+  // https://github.com/facebook/react/pull/32819
+  maySuspendCommitOnUpdate: (_type, _oldProps, _newProps) => false,
+  maySuspendCommitInSyncRender: (_type, _props) => false,
+  // https://github.com/facebook/react/pull/34486
+  startSuspendingCommit: () => null,
+  // https://github.com/facebook/react/pull/34522
+  getSuspendedCommitReason: (_state, _rootContainer) => null
+});
+function flushSync(fn) {
+  return reconciler.flushSyncFromReconciler(fn);
 }
 
-const isRenderer = (def) => !!def?.render;
+const noop = () => {
+};
 const _roots = /* @__PURE__ */ new Map();
-function ensureStoreThreeObjects(store) {
-  const state = store.getState();
-  if (state.pointer) return;
-  const { Vector2, Frustum } = getThree();
-  const pointer = new Vector2();
-  state.set({ pointer, mouse: pointer, frustum: new Frustum() });
-}
-const shallowLoose = { objects: "shallow", strict: false };
-async function resolveRenderer(config, defaultProps, RendererClass) {
-  if (typeof config === "function") return await config(defaultProps);
-  if (isRenderer(config)) return config;
-  return new RendererClass({ ...defaultProps, ...config });
-}
-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
-    };
+function transitionRoot(root, event) {
+  const state = root.state;
+  switch (event.type) {
+    case "use":
+      if (state.status === "disposed") return false;
+      if (state.status === "closing") {
+        root.store.getState().internal.active = true;
+        state.settle();
+      }
+      root.state = { status: "open" };
+      return true;
+    case "unmount": {
+      if (state.status === "disposed") return false;
+      if (state.status === "closing") state.settle();
+      const { promise, resolve } = deferred();
+      root.state = { status: "closing", token: event.token, settled: promise, settle: resolve };
+      return true;
+    }
+    case "dispose":
+      if (state.status !== "closing" || state.token !== event.token) return false;
+      root.state = { status: "disposed" };
+      state.settle();
+      return true;
   }
-  return { width: 0, height: 0, top: 0, left: 0, ...size };
 }
 function createRoot(canvas, provider) {
   const prevRoot = _roots.get(canvas);
@@ -14836,540 +15289,670 @@ function createRoot(canvas, provider) {
     null
     // transitionCallbacks
   );
-  if (!prevRoot) _roots.set(canvas, { fiber, store });
-  let onCreated;
-  let lastCamera;
-  const lastConfiguredProps = {};
-  let configured = false;
-  let pending = null;
-  let rendererSetup = null;
-  return {
-    async configure(props = {}) {
-      let resolve;
-      pending = new Promise((_resolve) => resolve = _resolve);
-      const {
-        id: canvasId,
-        primaryCanvas,
-        scheduler: schedulerConfig,
-        gl: glConfig,
-        renderer: rendererConfig,
-        size: propsSize,
-        scene: sceneOptions,
-        events,
-        onCreated: onCreatedCallback,
-        shadows = false,
-        orthographic = false,
-        frameloop = "always",
-        dpr = [1, 2],
-        performance,
-        raycaster: raycastOptions,
-        camera: cameraOptions,
-        onPointerMissed,
-        onDragOverMissed,
-        onDropMissed,
-        autoUpdateFrustum = true,
-        occlusion = false,
-        _sizeProps,
-        forceEven
-      } = props;
-      const requestedTextureColorSpace = is.obj(glConfig) && !is.fun(glConfig) && !isRenderer(glConfig) && glConfig.textureColorSpace || is.obj(rendererConfig) && !is.fun(rendererConfig) && !isRenderer(rendererConfig) && rendererConfig.textureColorSpace || void 0;
-      let state = store.getState();
-      const { webgl, webgpu } = provider;
-      const defaultGLProps = {
-        canvas,
-        powerPreference: "high-performance",
-        antialias: true,
-        alpha: true
-      };
-      const defaultGPUProps = {
-        canvas,
-        antialias: true
-      };
-      if (glConfig && !webgl) {
-        throw new Error(
-          "WebGLRenderer (gl prop) is not available on this entry. Use @react-three/fiber or @react-three/fiber/legacy instead."
-        );
-      }
-      if (rendererConfig && !webgpu) {
-        throw new Error(
-          "WebGPURenderer (renderer prop) is not available on this entry. Use @react-three/fiber or @react-three/fiber/webgpu instead."
-        );
-      }
-      const wantsGL = !!webgl && (state.isLegacy || !!glConfig || !webgpu || !rendererConfig);
-      if (glConfig && rendererConfig) {
-        throw new Error("Cannot use both gl and renderer props at the same time");
-      }
-      if (webgl && webgpu && !state.isLegacy && wantsGL) {
-        extensions.notifyDepreciated({
-          heading: "WebGlRenderer Usage",
-          body: "WebGlRenderer usage is deprecated in favor of WebGPU. Import from /legacy directly or upgrade to WebGPU.",
-          link: "https://docs.pmnd.rs/react-three-fiber/api/renderer"
-        });
-      }
-      let renderer = state.internal.actualRenderer;
-      if (primaryCanvas && !webgpu) {
-        throw new Error(
-          "The `primaryCanvas` prop for multi-canvas rendering is only available with WebGPU. Use @react-three/fiber/webgpu instead."
-        );
-      }
-      if (primaryCanvas && wantsGL) {
-        throw new Error(
-          "The `primaryCanvas` prop for multi-canvas rendering cannot be used with WebGL. Remove the `gl` prop or use WebGPU."
-        );
+  const root = prevRoot || {
+    fiber,
+    store,
+    state: { status: "open" },
+    ready: fulfilled(void 0),
+    configuration: {}
+  };
+  if (!prevRoot) _roots.set(canvas, root);
+  if (!prevRoot) root.configuration.apply = createRootConfiguration(store, canvas);
+  let mounted = false;
+  return {
+    get ready() {
+      return root.ready;
+    },
+    configure(props = {}) {
+      if (!transitionRoot(root, { type: "use" })) {
+        return rejected(new Error("R3F: Cannot configure a root after it has unmounted (disposal has started)."));
+      }
+      const previous = root.ready;
+      const { promise, resolve, reject } = deferred();
+      root.ready = promise;
+      const run = () => {
+        try {
+          const initialized = initializeRenderer(canvas, provider, store, props);
+          const apply = () => {
+            if (props.id) {
+              for (const other of _roots.values()) {
+                if (other !== root && other.state.status === "closing" && other.store.getState().internal.rootId === props.id) {
+                  other.state.settled.then(apply).catch(reject);
+                  return;
+                }
+              }
+            }
+            const previous2 = root.configuration.previous;
+            root.configuration.apply(props);
+            configureScheduler(store, props.id, props.scheduler, previous2?.scheduler);
+            textureStaging.attachRootExtensions(store);
+            root.configuration.previous = props;
+            resolve(this);
+          };
+          if (isPromiseLike(initialized)) Promise.resolve(initialized).then(apply).catch(reject);
+          else apply();
+        } catch (error) {
+          reject(error);
+        }
+      };
+      if (previous.status === "pending") previous.then(run, reject);
+      else run();
+      return promise;
+    },
+    render(children) {
+      if (!transitionRoot(root, { type: "use" })) return store;
+      if (!store.getState().internal.actualRenderer && root.ready.status === "fulfilled") this.configure();
+      if (root.ready.status === "rejected") throw root.ready.reason;
+      const commit = () => {
+        if (root.state.status !== "open" || root.ready.status === "rejected") return;
+        if (root.ready.status === "pending") {
+          root.ready.then(commit, logRecoverableError);
+          return;
+        }
+        const onCreated = root.configuration.previous?.onCreated;
+        const element = /* @__PURE__ */ jsxRuntime.jsx(Provider, { store, children, onCreated, rootElement: canvas });
+        if (mounted) {
+          reconciler.updateContainer(element, fiber, null, noop);
+          return;
+        }
+        mounted = true;
+        reconciler.updateContainerSync(element, fiber, null, noop);
+        reconciler.flushSyncWork();
+      };
+      commit();
+      return store;
+    },
+    unmount() {
+      if (_roots.get(canvas) === root) unmountComponentAtNode(canvas);
+    }
+  };
+}
+function Provider({
+  store,
+  children,
+  onCreated,
+  rootElement
+}) {
+  textureStaging.useIsomorphicLayoutEffect(() => {
+    const state = store.getState();
+    state.set((state2) => ({ internal: { ...state2.internal, active: true } }));
+    if (onCreated) onCreated(state);
+    if (!store.getState().events.connected) state.events.connect?.(rootElement);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(textureStaging.context.Provider, { value: store, children });
+}
+function unmountComponentAtNode(canvas, callback) {
+  const claim = Symbol("unmount");
+  const root = _roots.get(canvas);
+  if (!root || !transitionRoot(root, { type: "unmount", token: claim })) return;
+  root.store.getState().internal.active = false;
+  reconciler.updateContainer(null, root.fiber, null, () => {
+    if (root.state.status !== "closing" || root.state.token !== claim) return;
+    reconciler.updateContainer(null, root.fiber, null, () => {
+      if (root.state.status !== "closing" || root.state.token !== claim) return;
+      if (root.ready.status === "pending") root.ready.then(teardown, teardown);
+      else teardown();
+    });
+  });
+  function teardown() {
+    if (root.ready.status === "pending") {
+      root.ready.then(teardown, teardown);
+      return;
+    }
+    if (!transitionRoot(root, { type: "dispose", token: claim })) return;
+    _roots.delete(canvas);
+    const state = root.store.getState();
+    const internal = state.internal;
+    internal.active = false;
+    const attempt = (step) => {
+      try {
+        return step();
+      } catch (error) {
+        console.warn("[R3F] Error while unmounting root; teardown may be incomplete:", error);
+      }
+    };
+    attempt(() => internal.unwatchDpr?.());
+    internal.unwatchDpr = void 0;
+    attempt(() => internal.unregisterRoot?.());
+    internal.unregisterRoot = void 0;
+    attempt(() => textureStaging.detachRootExtensions(root.store));
+    attempt(() => internal.unregisterPrimary?.());
+    attempt(() => internal.untrackStandalone?.());
+    attempt(() => state.events.disconnect?.());
+    if (!internal.isSecondary && internal.actualRenderer?.xr && state.xr) attempt(() => state.xr.disconnect());
+    attempt(() => cleanupHelperGroup(root.store));
+    if (state.scene) attempt(() => dispose(state.scene));
+    const canvasTarget = internal.canvasTarget;
+    if (internal.isSecondary && canvasTarget?.dispose) attempt(() => canvasTarget.dispose());
+    const released = attempt(() => internal.releaseRenderer?.());
+    internal.releaseRenderer = void 0;
+    if (callback) {
+      if (released) {
+        released.then(() => callback(canvas)).catch((error) => console.warn("[R3F] Error in unmount callback", error));
+      } else {
+        callback(canvas);
+      }
+    }
+  }
+}
+
+const memoizedLoaders = /* @__PURE__ */ new WeakMap();
+const isConstructor = (value) => typeof value === "function" && value?.prototype?.constructor === value;
+function getLoader(Proto) {
+  if (isConstructor(Proto)) {
+    let loader = memoizedLoaders.get(Proto);
+    if (!loader) {
+      loader = new Proto();
+      memoizedLoaders.set(Proto, loader);
+    }
+    return loader;
+  }
+  return Proto;
+}
+function loadingFn(extensions, onProgress) {
+  return function(Proto, input) {
+    const loader = getLoader(Proto);
+    if (extensions) extensions(loader);
+    if ("loadAsync" in loader && typeof loader.loadAsync === "function") {
+      return loader.loadAsync(input, onProgress).then((data) => {
+        if (isObject3D(data?.scene)) Object.assign(data, buildGraph(data.scene));
+        return data;
+      });
+    }
+    return new Promise(
+      (res, reject) => loader.load(
+        input,
+        (data) => {
+          if (isObject3D(data?.scene)) Object.assign(data, buildGraph(data.scene));
+          res(data);
+        },
+        onProgress,
+        (error) => reject(new Error(`Could not load ${input}: ${error?.message}`))
+      )
+    );
+  };
+}
+function useLoader(loader, input, extensions, onProgress, cacheKey) {
+  const inputs = Array.isArray(input) ? input : [input];
+  const cacheKeys = Array.isArray(cacheKey ?? input) ? cacheKey ?? input : [cacheKey ?? input];
+  const fn = loadingFn(extensions, onProgress);
+  const results = cacheKeys.map(
+    (key, index) => suspendReact.suspend(() => fn(loader, inputs[index]), [loader, key], { equal: is.equ })
+  );
+  const stableRef = React.useRef(null);
+  const previous = stableRef.current;
+  const stable = previous !== null && previous.length === results.length && previous.every((value, i) => value === results[i]) ? previous : results;
+  stableRef.current = stable;
+  return Array.isArray(input) ? stable : stable[0];
+}
+useLoader.preload = function(loader, input, extensions, onProgress, cacheKey) {
+  const inputs = Array.isArray(input) ? input : [input];
+  const cacheKeys = Array.isArray(cacheKey ?? input) ? cacheKey ?? input : [cacheKey ?? input];
+  cacheKeys.forEach(
+    (key, index) => suspendReact.preload(() => loadingFn(extensions, onProgress)(loader, inputs[index]), [loader, key])
+  );
+};
+useLoader.clear = function(loader, input, cacheKey) {
+  const cacheKeys = Array.isArray(cacheKey ?? input) ? cacheKey ?? input : [cacheKey ?? input];
+  cacheKeys.forEach((key) => suspendReact.clear([loader, key]));
+};
+useLoader.loader = getLoader;
+
+const IsObject = (url) => url === Object(url) && !Array.isArray(url) && typeof url !== "function";
+function getUrls(input) {
+  if (typeof input === "string") return [input];
+  if (Array.isArray(input)) return input;
+  return Object.values(input);
+}
+function inputSignature(input) {
+  if (typeof input === "string") return input;
+  if (Array.isArray(input)) return input.join("\0");
+  return Object.keys(input).sort().map((key) => `${key}\0${input[key]}`).join("
");
+}
+function allUrlsCached(urls, textureCache) {
+  return urls.every((url) => textureCache.has(url));
+}
+function buildFromCache(input, textureCache) {
+  if (typeof input === "string") {
+    return textureCache.get(input);
+  } else if (Array.isArray(input)) {
+    return input.map((url) => textureCache.get(url));
+  } else {
+    const result = {};
+    const objInput = input;
+    for (const key in objInput) {
+      result[key] = textureCache.get(objInput[key]);
+    }
+    return result;
+  }
+}
+function useTexture(input, optionsOrOnLoad) {
+  const renderer = textureStaging.useThree((state) => state.internal.actualRenderer);
+  const store = textureStaging.useStore();
+  const options = typeof optionsOrOnLoad === "function" ? { onLoad: optionsOrOnLoad } : optionsOrOnLoad ?? {};
+  const { onLoad, cache = true } = options;
+  const onLoadRef = React.useRef(onLoad);
+  onLoadRef.current = onLoad;
+  const onLoadCalledForRef = React.useRef(null);
+  const inputKey = React.useMemo(() => inputSignature(input), [input]);
+  const stableInput = React.useMemo(() => input, [inputKey]);
+  const urls = React.useMemo(() => getUrls(stableInput), [stableInput]);
+  const cachedResult = React.useMemo(() => {
+    if (!cache) return null;
+    const textures = store.getState().textures;
+    if (!allUrlsCached(urls, textures)) return null;
+    return buildFromCache(stableInput, textures);
+  }, [cache, urls, stableInput, store]);
+  const loadedTextures = useLoader(
+    getThree().TextureLoader,
+    IsObject(stableInput) ? Object.values(stableInput) : stableInput
+  );
+  const mappedTextures = React.useMemo(() => {
+    if (cachedResult) return cachedResult;
+    if (IsObject(stableInput)) {
+      const keyed = {};
+      const textureArray = loadedTextures;
+      let i = 0;
+      for (const key in stableInput) keyed[key] = textureArray[i++];
+      return keyed;
+    } else {
+      return loadedTextures;
+    }
+  }, [stableInput, loadedTextures, cachedResult]);
+  React.useLayoutEffect(() => {
+    if (cachedResult) return;
+    if (onLoadCalledForRef.current === inputKey) return;
+    onLoadCalledForRef.current = inputKey;
+    onLoadRef.current?.(mappedTextures);
+  }, [cachedResult, mappedTextures, inputKey]);
+  React.useEffect(() => {
+    if (cachedResult) return;
+    if ("initTexture" in renderer) {
+      let textureArray = [];
+      if (Array.isArray(loadedTextures)) {
+        textureArray = loadedTextures;
+      } else if (loadedTextures.isTexture) {
+        textureArray = [loadedTextures];
+      } else if (IsObject(loadedTextures)) {
+        textureArray = Object.values(loadedTextures);
       }
-      if (!state.internal.actualRenderer) {
-        if (!rendererSetup) {
-          rendererSetup = (async () => {
-            const support = wantsGL ? await webgl() : await webgpu();
-            registerThree(support.three);
-            state.internal.support = support;
-            ensureStoreThreeObjects(store);
-            if (support.kind === "webgl") {
-              renderer = await resolveRenderer(glConfig, defaultGLProps, support.Renderer);
-              state.internal.actualRenderer = renderer;
-              state.set({ isLegacy: true, gl: renderer, renderer, primaryStore: store });
-            } else if (primaryCanvas) {
-              const primary = await waitForPrimary(primaryCanvas);
-              renderer = primary.renderer;
-              state.internal.actualRenderer = renderer;
-              const canvasTarget = new support.CanvasTarget(canvas);
-              primary.store.setState((prev) => ({
-                internal: { ...prev.internal, isMultiCanvas: true }
-              }));
-              state.set((prev) => ({
-                webGPUSupported: primary.store.getState().webGPUSupported,
-                renderer,
-                primaryStore: primary.store,
-                internal: {
-                  ...prev.internal,
-                  canvasTarget,
-                  isMultiCanvas: true,
-                  isSecondary: true,
-                  targetId: primaryCanvas
-                }
-              }));
-            } else {
-              renderer = await resolveRenderer(rendererConfig, defaultGPUProps, support.Renderer);
-              if (!renderer.hasInitialized?.()) {
-                const size2 = computeInitialSize(canvas, propsSize);
-                if (size2.width > 0 && size2.height > 0) {
-                  renderer.setPixelRatio(calculateDpr(dpr));
-                  renderer.setSize(size2.width, size2.height, false);
-                }
-                await renderer.init();
-              }
-              const backend = renderer.backend;
-              const isWebGPUBackend = backend && "isWebGPUBackend" in backend;
-              state.internal.actualRenderer = renderer;
-              state.set({ webGPUSupported: isWebGPUBackend, renderer, primaryStore: store });
-              if (canvasId && !state.internal.isSecondary) {
-                const canvasTarget = renderer.getCanvasTarget?.();
-                const unregisterPrimary = registerPrimary(canvasId, renderer, store);
-                state.set((prev) => ({
-                  internal: {
-                    ...prev.internal,
-                    canvasTarget,
-                    unregisterPrimary
-                  }
-                }));
-              }
-            }
-          })().catch((err) => {
-            rendererSetup = null;
-            throw err;
-          });
+      textureArray.forEach((texture) => {
+        if (texture?.isTexture) {
+          renderer.initTexture(texture);
+        }
+      });
+    }
+  }, [renderer, loadedTextures, cachedResult]);
+  React.useEffect(() => {
+    if (!cache) return;
+    const urlTextureMap = urlTextureEntries(stableInput, mappedTextures);
+    store.setState((state) => {
+      const refs = new Map(state._textureRefs);
+      let textures = state.textures;
+      let added = false;
+      for (const [url, texture] of urlTextureMap) {
+        if (!textures.has(url)) {
+          if (!added) {
+            textures = new Map(textures);
+            added = true;
+          }
+          textures.set(url, texture);
         }
-        await rendererSetup;
-        state = store.getState();
-        renderer = state.internal.actualRenderer;
+        refs.set(url, (refs.get(url) ?? 0) + 1);
       }
-      const three = getThree();
-      let raycaster = state.raycaster;
-      if (!raycaster) state.set({ raycaster: raycaster = new three.Raycaster() });
-      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 } });
+      return added ? { textures, _textureRefs: refs } : { _textureRefs: refs };
+    });
+    textureStaging.unstageTextures(
+      store,
+      urlTextureMap.map(([url]) => url)
+    );
+    return () => store.setState((state) => {
+      const refs = new Map(state._textureRefs);
+      for (const [url] of urlTextureMap) {
+        const next = (refs.get(url) ?? 0) - 1;
+        if (next <= 0) refs.delete(url);
+        else refs.set(url, next);
       }
-      let tempCamera = state.camera;
-      if (!state.camera || state.camera === lastCamera && !is.equ(lastCamera, cameraOptions, shallowLoose)) {
-        lastCamera = cameraOptions;
-        const isCamera = cameraOptions?.isCamera;
-        const camera = isCamera ? cameraOptions : orthographic ? new three.OrthographicCamera(0, 0, 0, 0, 0.1, 1e3) : new three.PerspectiveCamera(50, 0, 0.1, 1e3);
-        if (!isCamera) {
-          camera.position.z = 5;
-          if (cameraOptions) {
-            applyProps(camera, cameraOptions);
-            if (!camera.manual) {
-              const projectionProps = ["aspect", "left", "right", "bottom", "top"];
-              if (projectionProps.some((prop) => prop in cameraOptions)) {
-                camera.manual = true;
-                camera.updateProjectionMatrix();
-              }
-            }
+      return { _textureRefs: refs };
+    });
+  }, [cache, stableInput, mappedTextures, store]);
+  if (cache && !cachedResult) textureStaging.stageTextures(store, urlTextureEntries(stableInput, mappedTextures));
+  return mappedTextures;
+}
+function urlTextureEntries(input, textures) {
+  if (typeof input === "string") return [[input, textures]];
+  if (Array.isArray(input)) return input.map((url, i) => [url, textures[i]]);
+  const record = textures;
+  return Object.keys(input).map((key) => [input[key], record[key]]);
+}
+useTexture.preload = (url) => {
+  whenThree().then((three) => useLoader.preload(three.TextureLoader, url));
+};
+useTexture.clear = (input) => {
+  if (hasThree()) useLoader.clear(getThree().TextureLoader, input);
+};
+const Texture = ({
+  children,
+  input,
+  onLoad,
+  cache
+}) => {
+  const options = typeof onLoad === "function" ? { onLoad, cache } : { ...onLoad, cache };
+  const ret = useTexture(input, options);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children?.(ret) });
+};
+
+function useTextures(selector) {
+  const store = textureStaging.useStore();
+  const registry = React.useMemo(() => {
+    const getState = store.getState;
+    const setState = store.setState;
+    const getOne = (key) => getState().textures.get(key);
+    return {
+      get all() {
+        return getState().textures;
+      },
+      get(input) {
+        if (typeof input === "string") return getOne(input);
+        if (Array.isArray(input)) return input.map(getOne);
+        const out = {};
+        for (const name in input) out[name] = getOne(input[name]);
+        return out;
+      },
+      has: (key) => getState().textures.has(key),
+      add(keyOrRecord, texture) {
+        setState((state) => {
+          const textures = new Map(state.textures);
+          if (typeof keyOrRecord === "string") {
+            textures.set(keyOrRecord, texture);
+          } else {
+            for (const key in keyOrRecord) textures.set(key, keyOrRecord[key]);
           }
-          if (!state.camera && !cameraOptions?.rotation) camera.lookAt(0, 0, 0);
+          return { textures };
+        });
+      },
+      dispose(key, options) {
+        const state = getState();
+        const refs = state._textureRefs.get(key) ?? 0;
+        if (refs > 0 && !options?.force) {
+          console.warn(
+            `[useTextures] "${key}" still has ${refs} active reference(s); skipping dispose. Pass { force: true } to override.`
+          );
+          return false;
         }
-        state.set({ camera });
-        tempCamera = camera;
-        raycaster.camera = camera;
-      }
-      if (!state.scene) {
-        let scene;
-        if (sceneOptions?.isScene) {
-          scene = sceneOptions;
-          prepare(scene, store, "", {});
-        } else {
-          scene = new three.Scene();
-          prepare(scene, store, "", {});
-          if (sceneOptions) applyProps(scene, sceneOptions);
-        }
-        state.set((prev) => ({
-          scene,
-          rootScene: scene,
-          internal: { ...prev.internal, container: scene }
-        }));
-        const camera = tempCamera;
-        if (camera && !camera.parent) scene.add(camera);
-      }
-      if (events && !state.events.handlers) {
-        state.set({ events: events(store) });
-        let wasEnabled = true;
-        store.subscribe((state2) => {
-          const { enabled } = state2.events;
-          if (enabled && !wasEnabled) {
-            state2.events.update?.();
-          }
-          wasEnabled = enabled;
+        state.textures.get(key)?.dispose();
+        setState((s) => {
+          const textures = new Map(s.textures);
+          textures.delete(key);
+          const nextRefs = new Map(s._textureRefs);
+          nextRefs.delete(key);
+          return { textures, _textureRefs: nextRefs };
         });
+        return true;
+      },
+      disposeAll() {
+        for (const texture of getState().textures.values()) texture.dispose();
+        setState({ textures: /* @__PURE__ */ new Map(), _textureRefs: /* @__PURE__ */ new Map() });
       }
-      if (_sizeProps !== void 0) {
-        state.set({ _sizeProps });
-      }
-      if (forceEven !== void 0 && state.internal.forceEven !== forceEven) {
-        state.set((prev) => ({ internal: { ...prev.internal, forceEven } }));
+    };
+  }, [store]);
+  const subscribe = selector ? () => selector(registry) : (state) => state.textures;
+  const selected = textureStaging.useThree(subscribe);
+  return selector ? selected : registry;
+}
+
+function useRenderTarget(widthOrOptions, heightOrOptions, options) {
+  const support = textureStaging.useThree((s) => s.internal.support);
+  const size = textureStaging.useThree((s) => s.size);
+  let width;
+  let height;
+  let opts;
+  if (typeof widthOrOptions === "object") {
+    opts = widthOrOptions;
+  } else if (typeof widthOrOptions === "number") {
+    width = widthOrOptions;
+    if (typeof heightOrOptions === "object") {
+      height = widthOrOptions;
+      opts = heightOrOptions;
+    } else if (typeof heightOrOptions === "number") {
+      height = heightOrOptions;
+      opts = options;
+    } else {
+      height = widthOrOptions;
+    }
+  }
+  return React.useMemo(() => {
+    const w = width ?? size.width;
+    const h = height ?? size.height;
+    const Target = support.RenderTarget;
+    return new Target(w, h, opts);
+  }, [width, height, size.width, size.height, opts, support]);
+}
+
+const presetsObj = {
+  apartment: "lebombo_1k.hdr",
+  city: "potsdamer_platz_1k.hdr",
+  dawn: "kiara_1_dawn_1k.hdr",
+  forest: "forest_slope_1k.hdr",
+  lobby: "st_fagans_interior_1k.hdr",
+  night: "dikhololo_night_1k.hdr",
+  park: "rooitou_park_1k.hdr",
+  studio: "studio_small_03_1k.hdr",
+  sunset: "venice_sunset_1k.hdr",
+  warehouse: "empty_warehouse_01_1k.hdr"
+};
+
+const CUBEMAP_ROOT = "https://raw.githack.com/pmndrs/drei-assets/456060a26bbeb8fdf79326f224b6d99b8bcce736/hdri/";
+const isArray = (arr) => Array.isArray(arr);
+const defaultFiles = ["/px.png", "/nx.png", "/py.png", "/ny.png", "/pz.png", "/nz.png"];
+const loadedLoaders = /* @__PURE__ */ new Map();
+const pendingLoaders = /* @__PURE__ */ new Map();
+function loadLoader(format) {
+  let pending = pendingLoaders.get(format);
+  if (!pending) {
+    pending = importLoader(format).then(
+      (loader) => {
+        loadedLoaders.set(format, loader);
+        return loader;
+      },
+      (error) => {
+        pendingLoaders.delete(format);
+        throw error;
       }
-      const size = computeInitialSize(canvas, propsSize);
-      if (!state._sizeImperative && !is.equ(size, state.size, shallowLoose)) {
-        const wasImperative = state._sizeImperative;
-        state.setSize(size.width, size.height, size.top, size.left);
-        if (!wasImperative) state.set({ _sizeImperative: false });
-      }
-      if (dpr !== void 0 && !is.equ(dpr, lastConfiguredProps.dpr, shallowLoose)) {
-        state.setDpr(dpr);
-        lastConfiguredProps.dpr = dpr;
-      }
-      if (frameloop !== void 0 && frameloop !== lastConfiguredProps.frameloop) {
-        state.setFrameloop(frameloop);
-        lastConfiguredProps.frameloop = frameloop;
-      }
-      if (!state.onPointerMissed) state.set({ onPointerMissed });
-      if (!state.onDragOverMissed) state.set({ onDragOverMissed });
-      if (!state.onDropMissed) state.set({ onDropMissed });
-      if (state.autoUpdateFrustum !== autoUpdateFrustum) state.set({ autoUpdateFrustum });
-      if (occlusion && !state.internal.occlusionEnabled) {
-        enableOcclusion(store);
-      }
-      if (performance && !is.equ(performance, lastConfiguredProps.performance, shallowLoose)) {
-        state.set((state2) => ({ performance: { ...state2.performance, ...performance } }));
-        lastConfiguredProps.performance = performance;
-      }
-      if (!state.xr) {
-        const handleXRFrame = (timestamp, _frame) => {
-          const state2 = store.getState();
-          if (state2.frameloop === "never") return;
-          advance(timestamp, true, state2);
-        };
-        const actualRenderer = state.internal.actualRenderer;
-        const handleSessionChange = () => {
-          const state2 = store.getState();
-          const renderer2 = state2.internal.actualRenderer;
-          actualRenderer.xr.enabled = actualRenderer.xr.isPresenting;
-          renderer2.xr.setAnimationLoop(renderer2.xr.isPresenting ? handleXRFrame : null);
-          if (!renderer2.xr.isPresenting) invalidate(state2);
-        };
-        const xr = {
-          connect() {
-            const { gl, renderer: renderer2 } = store.getState();
-            const xrManager = (renderer2 || gl).xr;
-            xrManager.addEventListener("sessionstart", handleSessionChange);
-            xrManager.addEventListener("sessionend", handleSessionChange);
-          },
-          disconnect() {
-            const { gl, renderer: renderer2 } = store.getState();
-            const xrManager = (renderer2 || gl).xr;
-            xrManager.removeEventListener("sessionstart", handleSessionChange);
-            xrManager.removeEventListener("sessionend", handleSessionChange);
-          }
-        };
-        if (typeof renderer.xr?.addEventListener === "function") xr.connect();
-        state.set({ xr });
-      }
-      if (renderer.shadowMap && !is.equ(shadows, lastConfiguredProps.shadows, shallowLoose)) {
-        lastConfiguredProps.shadows = shadows;
-        const oldEnabled = renderer.shadowMap.enabled;
-        const oldType = renderer.shadowMap.type;
-        renderer.shadowMap.enabled = !!shadows;
-        if (is.boo(shadows)) {
-          renderer.shadowMap.type = three.PCFShadowMap;
-        } else if (is.str(shadows)) {
-          if (shadows === "soft") {
-            extensions.notifyDepreciated({
-              heading: 'shadows="soft" is deprecated',
-              body: "Three has depreciated soft and improved basic PCFShadows, we converted for you.",
-              link: "https://github.com/mrdoob/three.js/wiki/Migration-Guide?utm_source=chatgpt.com#181--182"
+    );
+    pendingLoaders.set(format, pending);
+  }
+  return pending;
+}
+async function importLoader(format) {
+  let loader;
+  switch (format) {
+    case "cube":
+      loader = getThree().CubeTextureLoader;
+      break;
+    case "hdr-cube":
+      loader = (await import('three/examples/jsm/loaders/HDRCubeTextureLoader.js')).HDRCubeTextureLoader;
+      break;
+    case "hdr":
+      loader = (await import('three/examples/jsm/loaders/HDRLoader.js')).HDRLoader;
+      break;
+    case "exr":
+      loader = (await import('three/examples/jsm/loaders/EXRLoader.js')).EXRLoader;
+      break;
+    case "jpg":
+      loader = createJpegLoader((await import('three/examples/jsm/loaders/UltraHDRLoader.js')).UltraHDRLoader);
+      break;
+    case "ldr":
+      loader = getThree().TextureLoader;
+      break;
+  }
+  return loader;
+}
+function createJpegLoader(UltraHDR) {
+  return class JpegEnvironmentLoader extends UltraHDR {
+    // @ts-expect-error A plain JPEG resolves to a Texture, not the DataTexture UltraHDRLoader declares
+    load(url, onLoad, onProgress, onError) {
+      const three = getThree();
+      const file = new three.FileLoader(this.manager);
+      file.setResponseType("arraybuffer");
+      file.setRequestHeader(this.requestHeader);
+      file.setPath(this.path);
+      file.setWithCredentials(this.withCredentials);
+      file.load(
+        url,
+        (buffer) => {
+          try {
+            this.parse(buffer, (texData) => {
+              const { data } = texData;
+              const texture = new three.DataTexture(data, texData.width, texData.height, three.RGBAFormat, texData.type);
+              texture.minFilter = three.LinearMipMapLinearFilter;
+              texture.magFilter = three.LinearFilter;
+              texture.generateMipmaps = true;
+              texture.flipY = true;
+              texture.needsUpdate = true;
+              onLoad?.(texture);
             });
-          }
-          const types = {
-            basic: three.BasicShadowMap,
-            percentage: three.PCFShadowMap,
-            soft: three.PCFShadowMap,
-            variance: three.VSMShadowMap
-          };
-          renderer.shadowMap.type = types[shadows] ?? three.PCFShadowMap;
-        } else if (is.obj(shadows)) {
-          Object.assign(renderer.shadowMap, shadows);
-        }
-        if (oldEnabled !== renderer.shadowMap.enabled || oldType !== renderer.shadowMap.type) {
-          renderer.shadowMap.needsUpdate = true;
-        }
-      }
-      if (!configured) {
-        renderer.outputColorSpace = three.SRGBColorSpace;
-        renderer.toneMapping = three.ACESFilmicToneMapping;
-      }
-      const textureColorSpace = requestedTextureColorSpace ?? three.SRGBColorSpace;
-      if (textureColorSpace !== lastConfiguredProps.textureColorSpace) {
-        if (state.textureColorSpace !== textureColorSpace) state.set(() => ({ textureColorSpace }));
-        lastConfiguredProps.textureColorSpace = textureColorSpace;
-      }
-      const r3fProps = ["textureColorSpace"];
-      const constructorOnlyProps = ["samples", "antialias", "alpha", "canvas", "powerPreference"];
-      const nonApplyProps = [...r3fProps, ...constructorOnlyProps];
-      if (glConfig && !is.fun(glConfig) && !isRenderer(glConfig) && !is.equ(glConfig, renderer, shallowLoose)) {
-        const glProps = {};
-        for (const key in glConfig) {
-          if (!nonApplyProps.includes(key)) glProps[key] = glConfig[key];
-        }
-        applyProps(renderer, glProps);
-      }
-      if (rendererConfig && !is.fun(rendererConfig) && !isRenderer(rendererConfig) && state.renderer) {
-        const currentRenderer = state.renderer;
-        if (!is.equ(rendererConfig, currentRenderer, shallowLoose)) {
-          const rendererProps = {};
-          for (const key in rendererConfig) {
-            if (!nonApplyProps.includes(key)) rendererProps[key] = rendererConfig[key];
-          }
-          applyProps(currentRenderer, rendererProps);
-        }
-      }
-      const scheduler$1 = scheduler.getScheduler();
-      const rootId = state.internal.rootId;
-      if (!rootId) {
-        const newRootId = canvasId || scheduler$1.generateRootId();
-        const unregisterRoot = scheduler$1.registerRoot(newRootId, {
-          getState: () => store.getState(),
-          onError: (err) => store.getState().setError(err),
-          frameloop: store.getState().frameloop,
-          before: schedulerConfig?.before,
-          after: schedulerConfig?.after,
-          order: schedulerConfig?.order
-        });
-        const unregisterCanvasTarget = scheduler$1.register(
-          () => {
-            const state2 = store.getState();
-            const canvasTarget = state2.internal.canvasTarget;
-            if (canvasTarget) {
-              const renderer2 = state2.internal.actualRenderer;
-              if (renderer2.getCanvasTarget() !== canvasTarget) renderer2.setCanvasTarget(canvasTarget);
-              if (state2.internal.canvasTargetSizeDirty) {
-                state2.internal.canvasTargetSizeDirty = false;
-                renderer2.backend?.updateSize?.();
+          } catch {
+            const objectURL = URL.createObjectURL(new Blob([buffer], { type: "image/jpeg" }));
+            const settle = () => URL.revokeObjectURL(objectURL);
+            new three.ImageLoader().load(
+              objectURL,
+              (image) => {
+                settle();
+                const texture = new three.Texture(image);
+                texture.needsUpdate = true;
+                onLoad?.(texture);
+              },
+              void 0,
+              (error) => {
+                settle();
+                onError?.(error);
               }
-            }
-          },
-          {
-            id: `${newRootId}_canvasTarget`,
-            rootId: newRootId,
-            phase: "start",
-            system: true
-          }
-        );
-        const unregisterEventsFlush = scheduler$1.register(
-          () => {
-            const state2 = store.getState();
-            state2.events.flush?.();
-          },
-          {
-            id: `${newRootId}_events`,
-            rootId: newRootId,
-            phase: "input",
-            system: true
-          }
-        );
-        const unregisterFrustum = scheduler$1.register(
-          () => {
-            const state2 = store.getState();
-            if (state2.autoUpdateFrustum && state2.camera) {
-              updateFrustum(state2.camera, state2.frustum);
-            }
-          },
-          {
-            id: `${newRootId}_frustum`,
-            rootId: newRootId,
-            before: "render",
-            system: true
-          }
-        );
-        const unregisterVisibility = scheduler$1.register(
-          () => {
-            const state2 = store.getState();
-            checkVisibility(state2);
-          },
-          {
-            id: `${newRootId}_visibility`,
-            rootId: newRootId,
-            before: "render",
-            system: true,
-            after: `${newRootId}_frustum`
-          }
-        );
-        const unregisterRender = scheduler$1.register(
-          () => {
-            const state2 = store.getState();
-            const renderer2 = state2.internal.actualRenderer;
-            const userHandlesRender = scheduler$1.hasUserJobsInPhase("render", newRootId);
-            if (userHandlesRender || state2.internal.priority) return;
-            try {
-              const renderOverride = state2.internal.renderOverride;
-              if (renderOverride) renderOverride();
-              else if (renderer2?.render) renderer2.render(state2.scene, state2.camera);
-            } catch (error) {
-              state2.setError(error instanceof Error ? error : new Error(String(error)));
-            }
-          },
-          {
-            // Use canvas ID directly as job ID if available, otherwise use generated rootId
-            id: canvasId || `${newRootId}_render`,
-            rootId: newRootId,
-            phase: "render",
-            system: true,
-            // Internal flag: this is a system job, not user-controlled
-            // FPS throttles only the default render job; Canvas ordering belongs to the root.
-            ...schedulerConfig?.fps && { fps: schedulerConfig.fps }
-          }
-        );
-        state.set((state2) => ({
-          internal: {
-            ...state2.internal,
-            rootId: newRootId,
-            unregisterRoot: () => {
-              unregisterRoot();
-              unregisterCanvasTarget();
-              unregisterEventsFlush();
-              unregisterFrustum();
-              unregisterVisibility();
-              unregisterRender();
-            },
-            scheduler: scheduler$1
+            );
           }
-        }));
-      } else {
-        const constraintsChanged = !is.equ(schedulerConfig?.before, lastConfiguredProps.schedulerBefore, shallowLoose) || !is.equ(schedulerConfig?.after, lastConfiguredProps.schedulerAfter, shallowLoose);
-        if (constraintsChanged) {
-          scheduler$1.setRootConstraints(rootId, {
-            before: schedulerConfig?.before,
-            after: schedulerConfig?.after
-          });
-        }
-        if (schedulerConfig?.order !== lastConfiguredProps.schedulerOrder) {
-          scheduler$1.setRootOrder(rootId, schedulerConfig?.order ?? 0);
-        }
-      }
-      lastConfiguredProps.schedulerBefore = schedulerConfig?.before;
-      lastConfiguredProps.schedulerAfter = schedulerConfig?.after;
-      lastConfiguredProps.schedulerOrder = schedulerConfig?.order;
-      extensions.attachRootExtensions(store);
-      onCreated = onCreatedCallback;
-      configured = true;
-      resolve();
-      return this;
-    },
-    render(children) {
-      if (!configured && !pending) this.configure();
-      pending.then(() => {
-        reconciler.updateContainer(
-          /* @__PURE__ */ jsxRuntime.jsx(Provider, { store, children, onCreated, rootElement: canvas }),
-          fiber,
-          null,
-          () => void 0
-        );
-      });
-      return store;
-    },
-    unmount() {
-      unmountComponentAtNode(canvas);
+        },
+        onProgress,
+        onError
+      );
     }
   };
 }
-function Provider({
-  store,
-  children,
-  onCreated,
-  rootElement
-}) {
-  extensions.useIsomorphicLayoutEffect(() => {
-    const state = store.getState();
-    state.set((state2) => ({ internal: { ...state2.internal, active: true } }));
-    if (onCreated) onCreated(state);
-    if (!store.getState().events.connected) state.events.connect?.(rootElement);
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(extensions.context.Provider, { value: store, children });
+const LOADER_KEY = Symbol("r3f-environment-loader");
+function useEnvironmentLoader(format) {
+  return suspendReact.suspend(() => loadLoader(format), [LOADER_KEY, format]);
 }
-function unmountComponentAtNode(canvas, callback) {
-  const root = _roots.get(canvas);
-  const fiber = root?.fiber;
-  if (fiber) {
-    const state = root?.store.getState();
-    if (state) {
-      state.internal.active = false;
-      const unregisterRoot = state.internal.unregisterRoot;
-      if (unregisterRoot) {
-        unregisterRoot();
-        state.internal.unregisterRoot = void 0;
-      }
+function useEnvironment({
+  files = defaultFiles,
+  path = "",
+  preset = void 0,
+  colorSpace = void 0,
+  extensions
+} = {}) {
+  if (preset) {
+    validatePreset(preset);
+    files = presetsObj[preset];
+    path = CUBEMAP_ROOT;
+  }
+  const multiFile = isArray(files);
+  const { format, isCubemap } = getFormat(files);
+  if (!format) throw new Error("useEnvironment: Unrecognized file extension: " + files);
+  const loader = useEnvironmentLoader(format);
+  const loaderResult = useLoader(
+    loader,
+    multiFile ? [files] : files,
+    (loader2) => {
+      loader2.setPath?.(path);
+      if (extensions) extensions(loader2);
     }
-    reconciler.updateContainer(null, fiber, null, () => {
-      if (root?.store) extensions.detachRootExtensions(root.store);
-      if (state) {
-        setTimeout(() => {
-          try {
-            const renderer = state.internal.actualRenderer;
-            const unregisterPrimary = state.internal.unregisterPrimary;
-            if (unregisterPrimary) unregisterPrimary();
-            const canvasTarget = state.internal.canvasTarget;
-            if (state.internal.isSecondary && canvasTarget?.dispose) canvasTarget.dispose();
-            state.events.disconnect?.();
-            cleanupHelperGroup(root.store);
-            if (state.isLegacy && renderer) {
-              ;
-              renderer.renderLists?.dispose?.();
-              renderer.forceContextLoss?.();
-            }
-            if (!state.internal.isSecondary) {
-              if (renderer?.xr) state.xr.disconnect();
-            }
-            dispose(state.scene);
-            _roots.delete(canvas);
-            if (callback) callback(canvas);
-          } catch (error) {
-            console.warn("[R3F] Error while unmounting root; teardown may be incomplete:", error);
-          }
-        }, 500);
-      }
+  );
+  const texture = multiFile ? (
+    // @ts-ignore
+    loaderResult[0]
+  ) : loaderResult;
+  const three = getThree();
+  texture.mapping = isCubemap ? three.CubeReflectionMapping : three.EquirectangularReflectionMapping;
+  const hdr = format === "hdr-cube" || texture.isDataTexture === true;
+  texture.colorSpace = colorSpace ?? (hdr ? "srgb-linear" : "srgb");
+  return texture;
+}
+const preloadDefaultOptions = {
+  files: defaultFiles,
+  path: "",
+  preset: void 0,
+  extensions: void 0
+};
+useEnvironment.preload = (preloadOptions) => {
+  const options = { ...preloadDefaultOptions, ...preloadOptions };
+  let { files, path = "" } = options;
+  const { preset, extensions } = options;
+  if (preset) {
+    validatePreset(preset);
+    files = presetsObj[preset];
+    path = CUBEMAP_ROOT;
+  }
+  const { format } = getFormat(files);
+  if (!format) throw new Error("useEnvironment: Unrecognized file extension: " + files);
+  const input = isArray(files) ? [files] : files;
+  loadLoader(format).then((loader) => {
+    useLoader.preload(loader, input, (loader2) => {
+      loader2.setPath?.(path);
+      if (extensions) extensions(loader2);
+    });
+  });
+};
+const clearDefaultOptins = {
+  files: defaultFiles,
+  preset: void 0
+};
+useEnvironment.clear = (clearOptions) => {
+  const options = { ...clearDefaultOptins, ...clearOptions };
+  let { files } = options;
+  const { preset } = options;
+  if (preset) {
+    validatePreset(preset);
+    files = presetsObj[preset];
+  }
+  const { format } = getFormat(files);
+  if (!format) throw new Error("useEnvironment: Unrecognized file extension: " + files);
+  const input = isArray(files) ? [files] : files;
+  const clear = (loader2) => useLoader.clear(loader2, input);
+  const loader = loadedLoaders.get(format);
+  if (loader) {
+    clear(loader);
+  } else {
+    const pending = pendingLoaders.get(format);
+    if (pending) void pending.then(clear, () => {
     });
   }
+};
+function validatePreset(preset) {
+  if (!(preset in presetsObj)) throw new Error("Preset must be one of: " + Object.keys(presetsObj).join(", "));
+}
+function getFormat(files) {
+  const isCubemap = isArray(files) && files.length === 6;
+  const firstEntry = isArray(files) ? files[0] : files;
+  const firstExtension = firstEntry.split(/[?#]/)[0].split(".").pop()?.toLowerCase();
+  let format;
+  if (isCubemap) format = firstExtension === "hdr" ? "hdr-cube" : "cube";
+  else if (firstEntry.startsWith("data:application/exr")) format = "exr";
+  else if (firstEntry.startsWith("data:application/hdr")) format = "hdr";
+  else if (firstEntry.startsWith("data:image/jpeg")) format = "jpg";
+  else if (firstExtension === "hdr" || firstExtension === "exr") format = firstExtension;
+  else if (firstExtension === "jpg" || firstExtension === "jpeg") format = "jpg";
+  else if (/^data:image\/(png|webp|avif|gif)[;,]/.test(firstEntry)) format = "ldr";
+  else if (["png", "webp", "avif", "gif"].includes(firstExtension)) format = "ldr";
+  return { format, isCubemap };
+}
+
+function useInstanceHandle(ref) {
+  const instance = React.useRef(null);
+  React.useImperativeHandle(instance, () => ref.current.__r3f, [ref]);
+  return instance;
+}
+function useGraph(object) {
+  return React.useMemo(() => buildGraph(object), [object]);
 }
+
 function createPortal(children, container, state) {
   return /* @__PURE__ */ jsxRuntime.jsx(Portal, { children, container, state });
 }
@@ -15400,30 +15983,28 @@ function Portal({ children, container, state }) {
 }
 function PortalInner({ state = {}, children, container }) {
   const { events, size, injectScene = true, ...rest } = state;
-  const previousRoot = extensions.useStore();
+  const previousRoot = textureStaging.useStore();
   const [raycaster] = React.useState(() => new (getThree()).Raycaster());
   const [pointer] = React.useState(() => new (getThree()).Vector2());
   const [portalScene] = React.useState(() => {
     if ("isScene" in container && container.isScene) return container;
     if (!injectScene) return container;
-    const scene = new (getThree()).Scene();
-    container.add(scene);
-    return scene;
+    return new (getThree()).Scene();
   });
-  extensions.useIsomorphicLayoutEffect(() => {
+  textureStaging.useIsomorphicLayoutEffect(() => {
+    if (portalScene === container || !injectScene) return;
+    container.add(portalScene);
     return () => {
-      if (portalScene !== container && injectScene) {
-        container.remove(portalScene);
-        dispose(portalScene);
-      }
+      container.remove(portalScene);
     };
   }, [portalScene, container, injectScene]);
   const lastRootState = React.useRef(null);
-  const inject = extensions.useMutableCallback((rootState, injectState) => {
+  const inject = textureStaging.useMutableCallback((rootState, injectState) => {
     const followed = {};
     const lastRoot = lastRootState.current;
     if (lastRoot) {
       for (const key in rootState) {
+        if (textureStaging.isAccessor(rootState, key)) continue;
         const field = key;
         const changed = rootState[field] !== lastRoot[field];
         const inherited = !(key in rest) && injectState[field] === lastRoot[field];
@@ -15440,11 +16021,7 @@ function PortalInner({ state = {}, children, container }) {
       if (camera !== rootState.camera) updateCamera(camera, resolvedSize);
     }
     const set = injectState.set;
-    return {
-      // The intersect consists of the previous root state
-      ...rootState,
-      ...injectState,
-      ...followed,
+    return Object.assign(textureStaging.cloneState(rootState, injectState, followed), {
       // Portals have their own scene - always a real THREE.Scene (injected if needed)
       scene: portalScene,
       // rootScene always points to the actual THREE.Scene, even inside portals
@@ -15459,18 +16036,24 @@ function PortalInner({ state = {}, children, container }) {
       size: resolvedSize,
       viewport: { ...rootState.viewport, ...viewport },
       // Layers are allowed to override events
-      setEvents: (events2) => set((state2) => ({ ...state2, events: { ...state2.events, ...events2 } })),
-      // Container for child attachment - the portalScene (injected or container itself)
-      internal: { ...rootState.internal, ...injectState.internal, container: portalScene }
-    };
+      setEvents: (events2) => set((state2) => ({ events: { ...state2.events, ...events2 } })),
+      // Container for child attachment - the portalScene (injected or container itself). A portal
+      // renders with its parent's renderer, which `renderer` / `gl` read from `actualRenderer`
+      internal: {
+        ...rootState.internal,
+        ...injectState.internal,
+        actualRenderer: rootState.internal.actualRenderer,
+        container: portalScene
+      }
+    });
   });
   const usePortalStore = React.useMemo(() => {
-    const store = traditional.createWithEqualityFn((set, get) => ({ ...rest, set, get }));
+    const store = traditional.createWithEqualityFn(textureStaging.keepAccessors((set, get) => ({ ...rest, set, get })));
     const onMutate = (prev) => store.setState((state2) => inject.current(prev, state2));
     onMutate(previousRoot.getState());
     return store;
   }, [previousRoot, container]);
-  extensions.useIsomorphicLayoutEffect(() => {
+  textureStaging.useIsomorphicLayoutEffect(() => {
     const onMutate = (prev) => usePortalStore.setState((state2) => inject.current(prev, state2));
     const unsubscribe = previousRoot.subscribe(onMutate);
     return unsubscribe;
@@ -15478,15 +16061,12 @@ function PortalInner({ state = {}, children, container }) {
   return (
     // @ts-ignore, reconciler types are not maintained
     /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: reconciler.createPortal(
-      /* @__PURE__ */ jsxRuntime.jsx(extensions.context.Provider, { value: usePortalStore, children }),
+      /* @__PURE__ */ jsxRuntime.jsx(textureStaging.context.Provider, { value: usePortalStore, children }),
       usePortalStore,
       null
     ) })
   );
 }
-function flushSync(fn) {
-  return reconciler.flushSyncFromReconciler(fn);
-}
 
 const isRef = (obj) => obj.current && obj.current.isScene;
 const resolveScene = (scene) => isRef(scene) ? scene.current : scene;
@@ -15519,7 +16099,7 @@ function setEnvProps(background, scene, defaultScene, texture, sceneProps = {})
   };
 }
 function EnvironmentMap({ scene, background = false, map, ...config }) {
-  const defaultScene = extensions.useThree((state) => state.scene);
+  const defaultScene = textureStaging.useThree((state) => state.scene);
   React__namespace.useLayoutEffect(() => {
     if (map) return setEnvProps(background, scene, defaultScene, map, config);
   });
@@ -15537,7 +16117,7 @@ function EnvironmentCube({
   ...rest
 }) {
   const texture = useEnvironment(rest);
-  const defaultScene = extensions.useThree((state) => state.scene);
+  const defaultScene = textureStaging.useThree((state) => state.scene);
   React__namespace.useLayoutEffect(() => {
     return setEnvProps(background, scene, defaultScene, texture, {
       backgroundBlurriness: blur ?? backgroundBlurriness,
@@ -15572,11 +16152,11 @@ function EnvironmentPortal({
   files,
   path,
   preset = void 0,
-  extensions: extensions$1
+  extensions
 }) {
-  const renderer = extensions.useThree((state) => state.renderer);
-  const support = extensions.useThree((state) => state.internal.support);
-  const defaultScene = extensions.useThree((state) => state.scene);
+  const renderer = textureStaging.useThree((state) => state.renderer);
+  const support = textureStaging.useThree((state) => state.internal.support);
+  const defaultScene = textureStaging.useThree((state) => state.scene);
   const camera = React__namespace.useRef(null);
   const [virtualScene] = React__namespace.useState(() => new (getThree()).Scene());
   const fbo = React__namespace.useMemo(() => {
@@ -15620,7 +16200,7 @@ function EnvironmentPortal({
     environmentRotation
   ]);
   let count = 1;
-  extensions.useFrame(() => {
+  textureStaging.useFrame(() => {
     if (frames === Infinity || count < frames) {
       const autoClear = renderer.autoClear;
       renderer.autoClear = true;
@@ -15633,7 +16213,7 @@ function EnvironmentPortal({
     /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       children,
       /* @__PURE__ */ jsxRuntime.jsx("cubeCamera", { ref: camera, args: [near, far, fbo] }),
-      files || preset ? /* @__PURE__ */ jsxRuntime.jsx(EnvironmentCube, { background: true, files, preset, path, extensions: extensions$1 }) : map ? /* @__PURE__ */ jsxRuntime.jsx(EnvironmentMap, { background: true, map, extensions: extensions$1 }) : null
+      files || preset ? /* @__PURE__ */ jsxRuntime.jsx(EnvironmentCube, { background: true, files, preset, path, extensions }) : map ? /* @__PURE__ */ jsxRuntime.jsx(EnvironmentMap, { background: true, map, extensions }) : null
     ] }),
     virtualScene
   ) });
@@ -15663,7 +16243,7 @@ function EnvironmentGround(props) {
   ] });
 }
 function EnvironmentColor({ color, scene }) {
-  const defaultScene = extensions.useThree((state) => state.scene);
+  const defaultScene = textureStaging.useThree((state) => state.scene);
   React__namespace.useLayoutEffect(() => {
     if (color === void 0) return;
     const target = resolveScene(scene || defaultScene);
@@ -15678,12 +16258,12 @@ function EnvironmentColor({ color, scene }) {
 function EnvironmentDualSource(props) {
   const { backgroundFiles, ...envProps } = props;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(EnvironmentCube, { ...envProps, background: false }),
-    /* @__PURE__ */ jsxRuntime.jsx(EnvironmentCube, { ...props, files: backgroundFiles, background: "only" })
+    (envProps.files || envProps.preset) && /* @__PURE__ */ jsxRuntime.jsx(EnvironmentCube, { ...envProps, background: false }),
+    /* @__PURE__ */ jsxRuntime.jsx(EnvironmentCube, { ...props, files: backgroundFiles, preset: void 0, background: "only" })
   ] });
 }
 function Environment(props) {
-  if (props.color && !props.files && !props.preset && !props.map) {
+  if (props.color !== void 0 && !props.files && !props.preset && !props.map) {
     return /* @__PURE__ */ jsxRuntime.jsx(EnvironmentColor, { ...props });
   }
   if (props.backgroundFiles && props.backgroundFiles !== props.files) {
@@ -15693,7 +16273,7 @@ function Environment(props) {
 }
 
 function parseBackground(background) {
-  if (!background) return null;
+  if (background === void 0 || background === null || background === "") return null;
   if (typeof background === "object" && !background.isColor) {
     const { backgroundMap, envMap, files, preset, ...rest } = background;
     return {
@@ -15711,7 +16291,7 @@ function parseBackground(background) {
     if (background in presetsObj) {
       return { preset: background, background: true };
     }
-    if (/^(https?:\/\/|\/|\.\/|\.\.\/)|\.(hdr|exr|jpg|jpeg|png|webp|gif)$/i.test(background)) {
+    if (/^(https?:\/\/|\/|\.\/|\.\.\/|data:)|\.(hdr|exr|jpg|jpeg|png|webp|avif|gif)([?#].*)?$/i.test(background)) {
       return { files: background, background: true };
     }
     return { color: background, background: true };
@@ -15722,19 +16302,6 @@ function parseBackground(background) {
   return null;
 }
 
-function parseRendererConfig(rendererProp) {
-  const isRendererConfig = typeof rendererProp === "object" && rendererProp !== null && !("render" in rendererProp) && ("primaryCanvas" in rendererProp || "scheduler" in rendererProp);
-  if (isRendererConfig) {
-    const { primaryCanvas: pc, scheduler: sc, ...rest } = rendererProp;
-    return {
-      primaryCanvas: pc,
-      scheduler: sc,
-      renderer: Object.keys(rest).length > 0 ? rest : rendererProp
-    };
-  }
-  return { primaryCanvas: void 0, scheduler: void 0, renderer: rendererProp };
-}
-
 function CanvasImpl({
   ref,
   children,
@@ -15743,11 +16310,13 @@ function CanvasImpl({
   style,
   id,
   gl,
-  renderer: rendererProp,
+  renderer,
+  primary,
+  share,
+  scheduler,
   events = createPointerEvents,
   eventSource,
   eventPrefix,
-  shadows,
   orthographic,
   frameloop,
   dpr,
@@ -15769,8 +16338,12 @@ function CanvasImpl({
   provider,
   ...props
 }) {
-  const { primaryCanvas, scheduler, renderer } = parseRendererConfig(rendererProp);
-  const Bridge = extensions.useBridge();
+  const {
+    shadows: removedShadows,
+    primaryCanvas: removedPrimaryCanvas,
+    ...divProps
+  } = props;
+  const Bridge = textureStaging.useBridge();
   const backgroundProps = React__namespace.useMemo(() => parseBackground(background), [background]);
   const [hasInitialSize, setHasInitialSize] = React__namespace.useState(false);
   const measureConfig = React__namespace.useMemo(() => {
@@ -15806,119 +16379,145 @@ function CanvasImpl({
   const canvasRef = React__namespace.useRef(null);
   const divRef = React__namespace.useRef(null);
   React__namespace.useImperativeHandle(ref, () => canvasRef.current);
-  const handlePointerMissed = extensions.useMutableCallback(onPointerMissed);
-  const handleDragOverMissed = extensions.useMutableCallback(onDragOverMissed);
-  const handleDropMissed = extensions.useMutableCallback(onDropMissed);
+  const handlePointerMissed = textureStaging.useMutableCallback(onPointerMissed);
+  const handleDragOverMissed = textureStaging.useMutableCallback(onDragOverMissed);
+  const handleDropMissed = textureStaging.useMutableCallback(onDropMissed);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(false);
   const [fallbackVisible, setFallbackVisible] = React__namespace.useState(false);
   if (block) throw block;
   if (error) throw error;
   const root = React__namespace.useRef(null);
-  const effectActiveRef = React__namespace.useRef(true);
-  const unsubscribeErrorRef = React__namespace.useRef(null);
-  extensions.useIsomorphicLayoutEffect(() => {
-    effectActiveRef.current = true;
+  const [gate, waitFor] = textureStaging.useGate();
+  const rootState = React__namespace.useRef(null);
+  const eventTarget = () => eventSource ? isRef$1(eventSource) ? eventSource.current : eventSource : divRef.current;
+  const pointerMissed = React__namespace.useCallback(
+    (...args) => handlePointerMissed.current?.(...args),
+    [handlePointerMissed]
+  );
+  const dragOverMissed = React__namespace.useCallback(
+    (...args) => handleDragOverMissed.current?.(...args),
+    [handleDragOverMissed]
+  );
+  const dropMissed = React__namespace.useCallback(
+    (...args) => handleDropMissed.current?.(...args),
+    [handleDropMissed]
+  );
+  textureStaging.useIsomorphicLayoutEffect(() => {
     if (fallbackVisible) return;
     const canvas = canvasRef.current;
     if (effectiveSize.width > 0 && effectiveSize.height > 0 && canvas) {
       if (!root.current) {
         root.current = createRoot(canvas, provider);
-        extensions.notifyAlpha({
+        textureStaging.notifyAlpha({
           message: "React Three Fiber v10 is in ALPHA - expect breaking changes",
           link: "https://github.com/pmndrs/react-three-fiber/discussions"
         });
-        const rootEntry = _roots.get(canvas);
-        if (rootEntry?.store) {
-          if (unsubscribeErrorRef.current) unsubscribeErrorRef.current();
-          unsubscribeErrorRef.current = rootEntry.store.subscribe((state) => {
-            if (state.error && effectActiveRef.current) {
-              setError(state.error);
-            }
-          });
-        }
       }
-      async function run() {
-        if (!effectActiveRef.current || !root.current) return;
-        const configured = await root.current.configure({
-          id,
-          primaryCanvas,
-          scheduler,
-          gl,
-          renderer,
-          scene,
-          events,
-          shadows,
-          orthographic,
-          frameloop,
-          dpr,
-          performance,
-          raycaster,
-          camera,
-          autoUpdateFrustum,
-          occlusion,
-          size: effectiveSize,
-          // Store size props for reset functionality
-          _sizeProps: width !== void 0 || height !== void 0 ? { width, height } : null,
-          forceEven,
-          // Pass mutable reference to onPointerMissed so it's free to update
-          onPointerMissed: (...args) => handlePointerMissed.current?.(...args),
-          onDragOverMissed: (...args) => handleDragOverMissed.current?.(...args),
-          onDropMissed: (...args) => handleDropMissed.current?.(...args),
-          onCreated: (state) => {
-            state.events.connect?.(
-              eventSource ? isRef$1(eventSource) ? eventSource.current : eventSource : divRef.current
-            );
-            if (eventPrefix) {
-              state.setEvents({
-                compute: (event, state2) => {
-                  const x = event[eventPrefix + "X"];
-                  const y = event[eventPrefix + "Y"];
-                  state2.pointer.set(x / state2.size.width * 2 - 1, -(y / state2.size.height) * 2 + 1);
-                  state2.raycaster.setFromCamera(state2.pointer, state2.camera);
-                }
-              });
-            }
-            onCreated?.(state);
-          }
-        }).then(
-          () => true,
-          // Renderer setup failed (e.g. no WebGL/WebGPU support). The `fallback` prop lives
-          // inside <canvas>, which browsers don't display, so surface it as visible DOM
-          // instead; with no fallback, rethrow to an external error boundary. (#3757)
-          (setupError) => {
-            if (effectActiveRef.current) {
-              if (fallback != null) setFallbackVisible(true);
-              else setError(setupError);
-            }
-            return false;
+      const current = root.current;
+      current.configure({
+        id,
+        primary,
+        share,
+        scheduler,
+        gl,
+        renderer,
+        scene,
+        events,
+        _primaryToken: primaryToken,
+        ...{ shadows: removedShadows, primaryCanvas: removedPrimaryCanvas },
+        orthographic,
+        frameloop,
+        dpr,
+        performance,
+        raycaster,
+        camera,
+        autoUpdateFrustum,
+        occlusion,
+        size: effectiveSize,
+        // Store size props for reset functionality
+        _sizeProps: width !== void 0 || height !== void 0 ? { width, height } : null,
+        forceEven,
+        // Pass mutable reference to onPointerMissed so it's free to update
+        onPointerMissed: pointerMissed,
+        onDragOverMissed: dragOverMissed,
+        onDropMissed: dropMissed,
+        onCreated: (state) => {
+          rootState.current = state;
+          state.events.connect?.(eventTarget() ?? divRef.current);
+          if (eventPrefix) {
+            state.setEvents({
+              compute: (event, state2) => {
+                const x = event[eventPrefix + "X"];
+                const y = event[eventPrefix + "Y"];
+                state2.pointer.set(x / state2.size.width * 2 - 1, -(y / state2.size.height) * 2 + 1);
+                state2.raycaster.setFromCamera(state2.pointer, state2.camera);
+              }
+            });
           }
-        );
-        if (!configured || !effectActiveRef.current || !root.current) return;
-        root.current.render(
-          /* @__PURE__ */ jsxRuntime.jsx(Bridge, { children: /* @__PURE__ */ jsxRuntime.jsx(extensions.ErrorBoundary, { set: setError, children: /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(extensions.Block, { set: setBlock }), children: [
+          onCreated?.(state);
+        }
+      }).catch((setupError) => {
+        if (root.current !== current) return;
+        if (fallback != null) setFallbackVisible(true);
+        else setError(setupError);
+      });
+      if (current.ready.status === "fulfilled") {
+        current.render(
+          /* @__PURE__ */ jsxRuntime.jsx(Bridge, { children: /* @__PURE__ */ jsxRuntime.jsx(textureStaging.ErrorBoundary, { set: setError, children: /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(textureStaging.Block, { set: setBlock }), children: [
             backgroundProps && /* @__PURE__ */ jsxRuntime.jsx(Environment, { ...backgroundProps }),
             children ?? null
           ] }) }) })
         );
+      } else if (current.ready.status === "pending") {
+        waitFor(current.ready);
       }
-      run();
     }
-    return () => {
-      effectActiveRef.current = false;
-      if (unsubscribeErrorRef.current) {
-        unsubscribeErrorRef.current();
-        unsubscribeErrorRef.current = null;
-      }
+  });
+  textureStaging.useIsomorphicLayoutEffect(() => {
+    const store = canvasRef.current && _roots.get(canvasRef.current)?.store;
+    if (!store) return;
+    const report = () => {
+      const error2 = store.getState().error;
+      if (error2) setError(error2);
     };
+    report();
+    return store.subscribe(report);
+  });
+  React__namespace.useEffect(() => {
+    const state = rootState.current?.get();
+    const target = eventTarget();
+    if (state && target && state.events.connected !== target) state.events.connect?.(target);
   });
+  const insertionMounted = React__namespace.useRef(false);
+  const [primaryToken] = React__namespace.useState(() => ({}));
+  const primaryKey = React__namespace.useRef(null);
+  React__namespace.useInsertionEffect(() => {
+    insertionMounted.current = true;
+    if (primary && provider.webgpu) {
+      primaryKey.current ?? (primaryKey.current = id || DEFAULT_PRIMARY);
+      announcePrimary(primaryKey.current, primaryToken);
+    }
+    return () => {
+      insertionMounted.current = false;
+      if (primaryKey.current) markWithdrawing(primaryToken);
+      queueMicrotask(() => {
+        if (insertionMounted.current) return;
+        if (primaryKey.current) withdrawPrimary(primaryKey.current, primaryToken);
+        const current = root.current;
+        root.current = null;
+        current?.unmount();
+      });
+    };
+  }, []);
   React__namespace.useEffect(() => {
     const canvas = canvasRef.current;
     if (canvas) {
       return () => {
         if (canvas.isConnected) return;
-        unmountComponentAtNode(canvas);
+        const current = root.current;
         root.current = null;
+        current?.unmount();
       };
     }
   }, []);
@@ -15929,10 +16528,10 @@ function CanvasImpl({
     const handleHMR = () => {
       queueMicrotask(() => {
         const rootEntry = _roots.get(canvas);
-        if (rootEntry?.store) extensions.notifyRootExtensionsHmr(rootEntry.store);
+        if (rootEntry?.store) textureStaging.notifyRootExtensionsHmr(rootEntry.store);
       });
     };
-    if (typeof ({ url: (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('shared/fiber.oKEFddXj.cjs', document.baseURI).href)) }) !== "undefined" && undefined) {
+    if (typeof ({ url: (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('shared/fiber.nDnBf1np.cjs', document.baseURI).href)) }) !== "undefined" && undefined) {
       const hot = undefined;
       hot.on("vite:afterUpdate", handleHMR);
       return () => hot.off?.("vite:afterUpdate", handleHMR);
@@ -15945,7 +16544,7 @@ function CanvasImpl({
     }
   }, [hmr]);
   const pointerEvents = eventSource ? "none" : "auto";
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ref: divRef,
@@ -15957,21 +16556,24 @@ function CanvasImpl({
         pointerEvents,
         ...style
       },
-      ...props,
-      children: fallbackVisible ? (
-        // Renderer setup failed: render the fallback as visible DOM. Inside <canvas> (below)
-        // it exists in the tree but browsers never paint it, which is the whole bug (#3757).
-        fallback
-      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: "r3f-canvas-container", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
-        "canvas",
-        {
-          ref: canvasRef,
-          id,
-          className: "r3f-canvas",
-          style: { display: "block", width: "100%", height: "100%" },
-          children: fallback
-        }
-      ) })
+      ...divProps,
+      children: [
+        fallbackVisible ? (
+          // Renderer setup failed: render the fallback as visible DOM. Inside <canvas> (below)
+          // it exists in the tree but browsers never paint it, which is the whole bug (#3757).
+          fallback
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: "r3f-canvas-container", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "canvas",
+          {
+            ref: canvasRef,
+            id,
+            className: "r3f-canvas",
+            style: { display: "block", width: "100%", height: "100%" },
+            children: fallback
+          }
+        ) }),
+        gate
+      ]
     }
   );
 }