@react-three/fiber 10.0.0-canary.3f8df2b → 10.0.0-canary.42caa10

package/dist/shared/{fiber.BgxhptM_.mjs → fiber.BwymjkeO.mjs}

@@ -1,5 +1,5 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { n as notifyDepreciated, a as useThree, u as useStore, h as unstageTextures, i as stageTextures, j as detachRootExtensions, k as attachRootExtensions, d as useIsomorphicLayoutEffect, e as useMutableCallback, c as context, b as useFrame, f as useBridge, l as notifyAlpha, E as ErrorBoundary, B as Block, m as notifyRootExtensionsHmr } from './fiber.B0oukOFO.mjs';
+import { i as isDevelopment, n as notifyDepreciated, p as preserveAccessors, h as defineRendererAccessors, j as stateForScheduler, k as detachRootExtensions, l as attachRootExtensions, d as useIsomorphicLayoutEffect, c as context, a as useThree, u as useStore, m as unstageTextures, o as stageTextures, e as useMutableCallback, q as isAccessor, t as cloneState, v as keepAccessors, b as useFrame, f as useBridge, w as useGate, x as notifyAlpha, E as ErrorBoundary, B as Block, y as notifyRootExtensionsHmr } from './fiber.C-3TIsF8.mjs';
 import * as React from 'react';
 import React__default, { useRef, useMemo, useLayoutEffect, useEffect, useImperativeHandle, useCallback, useState } from 'react';
 import useMeasure from 'react-use-measure';
@@ -107,6 +107,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) {
@@ -174,6 +188,7 @@ function prepare(target, root, type, props) {
       object,
       eventCount: 0,
       handlers: {},
+      previousVisible: void 0,
       isHidden: false
     };
     if (object) object.__r3f = instance;
@@ -401,7 +416,19 @@ function assertNodeMaterialSupported(state, value) {
   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). Pass \`renderer\` to <Canvas> from @react-three/fiber, or import from @react-three/fiber/webgpu.`
+    `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" || !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).`
   );
 }
 
@@ -422,6 +449,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] };
@@ -452,6 +501,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);
   }
@@ -462,6 +512,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);
   }
@@ -541,6 +592,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}".`);
@@ -568,17 +623,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);
+      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
@@ -619,468 +681,390 @@ 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) => suspend(() => fn(loader, inputs[index]), [loader, key], { equal: is.equ })
-  );
-  const stableRef = 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) => 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) => 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 = useThree((state) => state.internal.actualRenderer);
-  const store = useStore();
-  const options = typeof optionsOrOnLoad === "function" ? { onLoad: optionsOrOnLoad } : optionsOrOnLoad ?? {};
-  const { onLoad, cache = true } = options;
-  const onLoadRef = useRef(onLoad);
-  onLoadRef.current = onLoad;
-  const onLoadCalledForRef = useRef(null);
-  const inputKey = useMemo(() => inputSignature(input), [input]);
-  const stableInput = useMemo(() => input, [inputKey]);
-  const urls = useMemo(() => getUrls(stableInput), [stableInput]);
-  const cachedResult = 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 = 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]);
-  useLayoutEffect(() => {
-    if (cachedResult) return;
-    if (onLoadCalledForRef.current === inputKey) return;
-    onLoadCalledForRef.current = inputKey;
-    onLoadRef.current?.(mappedTextures);
-  }, [cachedResult, mappedTextures, inputKey]);
-  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 = createWithEqualityFn((rawSet, get, api) => {
+    const set = api.setState = 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]);
-  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 };
-    });
-    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) 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__ */ jsx(Fragment, { children: children?.(ret) });
-};
-
-function useTextures(selector) {
-  const store = useStore();
-  const registry = 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) 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.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 = useThree(subscribe);
-  return selector ? selected : registry;
-}
-
-function useRenderTarget(widthOrOptions, heightOrOptions, options) {
-  const support = useThree((s) => s.internal.support);
-  const size = 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();
+  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 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 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, () => {
-    });
-  }
-};
-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 = useRef(null);
-  useImperativeHandle(instance, () => ref.current.__r3f, [ref]);
-  return instance;
-}
-function useGraph(object) {
-  return useMemo(() => buildGraph(object), [object]);
+const shallowLoose$1 = { objects: "shallow", strict: false };
+function configureScheduler(store, canvasId, schedulerConfig, previous) {
+  const state = store.getState();
+  const 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.generateRootId();
+    const unregisterRoot = scheduler.registerRoot(newRootId, {
+      // The scheduler spreads this into each frame state; see stateForScheduler
+      getState: () => stateForScheduler(store.getState()),
+      onError: (err) => store.getState().setError(err),
+      frameloop: store.getState().frameloop,
+      before: rootBefore,
+      after: rootAfter,
+      order: schedulerConfig?.order
+    });
+    const unregisterCanvasTarget = scheduler.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.register(
+      () => {
+        const state2 = store.getState();
+        state2.events.flush?.();
+      },
+      {
+        id: `${newRootId}_events`,
+        rootId: newRootId,
+        phase: "input",
+        system: true
+      }
+    );
+    const unregisterFrustum = scheduler.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.register(
+      () => {
+        const state2 = store.getState();
+        checkVisibility(state2);
+      },
+      {
+        id: `${newRootId}_visibility`,
+        rootId: newRootId,
+        before: "render",
+        system: true,
+        after: `${newRootId}_frustum`
+      }
+    );
+    const unregisterRender = scheduler.register(
+      () => {
+        const state2 = store.getState();
+        const renderer = state2.internal.actualRenderer;
+        const userHandlesRender = scheduler.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
+      }
+    }));
+  } else {
+    const constraintsChanged = !is.equ(schedulerConfig?.before, previous?.before, shallowLoose$1) || !is.equ(schedulerConfig?.after, previous?.after, shallowLoose$1);
+    if (constraintsChanged) {
+      scheduler.setRootConstraints(rootId, {
+        before: rootBefore,
+        after: rootAfter
+      });
+    }
+    if (schedulerConfig?.order !== previous?.order) {
+      scheduler.setRootOrder(rootId, schedulerConfig?.order ?? 0);
+    }
+  }
 }
-
 let effectId = 0;
 function addEffect(callback) {
   notifyDepreciated({
@@ -1121,6 +1105,790 @@ function advance(timestamp, runGlobalEffects, state) {
   else scheduler.step(timestamp);
 }
 
+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);
+}
+
+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() });
+}
+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);
+      }
+      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 || 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) && 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") && 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") {
+          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};
@@ -13319,15 +14087,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
         }
       });
     }
@@ -13856,10 +14625,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;
@@ -13867,15 +14637,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) {
@@ -13912,6 +14681,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;
@@ -13922,9 +14692,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);
   }
@@ -13937,6 +14708,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);
@@ -14429,945 +15201,738 @@ const reconciler = /* @__PURE__ */ createReconciler({
   // 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));
+function flushSync(fn) {
+  return reconciler.flushSyncFromReconciler(fn);
 }
 
-const createStore = (invalidate, advance) => {
-  const rootStore = 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 };
-      }
+const noop = () => {
+};
+const _roots = /* @__PURE__ */ new Map();
+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;
     }
-    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) 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.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";
-          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;
+    case "dispose":
+      if (state.status !== "closing" || state.token !== event.token) return false;
+      root.state = { status: "disposed" };
+      state.settle();
+      return true;
+  }
+}
+function createRoot(canvas, provider) {
+  const prevRoot = _roots.get(canvas);
+  const prevFiber = prevRoot?.fiber;
+  const prevStore = prevRoot?.store;
+  if (prevRoot) console.warn("R3F.createRoot should only be called once!");
+  const logRecoverableError = typeof reportError === "function" ? (
+    // In modern browsers, reportError will dispatch an error event,
+    // emulating an uncaught JavaScript error.
+    reportError
+  ) : (
+    // In older browsers and test environments, fallback to console.error.
+    console.error
+  );
+  const store = prevStore || createStore(invalidate, advance);
+  const fiber = prevFiber || reconciler.createContainer(
+    store,
+    // container
+    t,
+    // tag
+    null,
+    // hydration callbacks
+    false,
+    // isStrictMode
+    null,
+    // concurrentUpdatesByDefaultOverride
+    "",
+    // identifierPrefix
+    logRecoverableError,
+    // onUncaughtError
+    logRecoverableError,
+    // onCaughtError
+    logRecoverableError,
+    // onRecoverableError
+    null
+    // transitionCallbacks
+  );
+  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;
     },
-    enumerable: true,
-    configurable: true
-  });
-  Object.defineProperty(state, "renderer", {
-    get() {
-      return rootStore.getState().internal.actualRenderer;
+    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);
+            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;
     },
-    set(value) {
-      rootStore.getState().internal.actualRenderer = value;
+    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__ */ 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;
     },
-    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 });
-      }
+    unmount() {
+      if (_roots.get(canvas) === root) unmountComponentAtNode(canvas);
     }
+  };
+}
+function Provider({
+  store,
+  children,
+  onCreated,
+  rootElement
+}) {
+  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__ */ jsx(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();
+    });
   });
-  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;
+  function teardown() {
+    if (root.ready.status === "pending") {
+      root.ready.then(teardown, teardown);
+      return;
     }
-    if (camera !== oldCamera) {
-      oldCamera = camera;
-      const { rootScene } = rootStore.getState();
-      if (camera && rootScene && !camera.parent) {
-        rootScene.add(camera);
+    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);
       }
-      set((state2) => ({ viewport: { ...state2.viewport, ...state2.viewport.getCurrentViewport(camera) } }));
-      const currentState = rootStore.getState();
-      if (currentState.autoUpdateFrustum && camera) {
-        updateFrustum(camera, currentState.frustum);
+    };
+    attempt(() => internal.unwatchDpr?.());
+    internal.unwatchDpr = void 0;
+    attempt(() => internal.unregisterRoot?.());
+    internal.unregisterRoot = void 0;
+    attempt(() => 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);
       }
     }
-  });
-  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);
+}
+
+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 () => {
-    const currentEntry = primaryRegistry.get(id);
-    if (currentEntry?.renderer === renderer) {
-      primaryRegistry.delete(id);
+  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 getPrimary(id) {
-  return primaryRegistry.get(id);
+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) => suspend(() => fn(loader, inputs[index]), [loader, key], { equal: is.equ })
+  );
+  const stableRef = 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];
 }
-function waitForPrimary(id, timeout = 5e3) {
-  const existing = primaryRegistry.get(id);
-  if (existing) {
-    return Promise.resolve(existing);
+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) => 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) => 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;
   }
-  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);
+}
+function useTexture(input, optionsOrOnLoad) {
+  const renderer = useThree((state) => state.internal.actualRenderer);
+  const store = useStore();
+  const options = typeof optionsOrOnLoad === "function" ? { onLoad: optionsOrOnLoad } : optionsOrOnLoad ?? {};
+  const { onLoad, cache = true } = options;
+  const onLoadRef = useRef(onLoad);
+  onLoadRef.current = onLoad;
+  const onLoadCalledForRef = useRef(null);
+  const inputKey = useMemo(() => inputSignature(input), [input]);
+  const stableInput = useMemo(() => input, [inputKey]);
+  const urls = useMemo(() => getUrls(stableInput), [stableInput]);
+  const cachedResult = 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 = 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]);
+  useLayoutEffect(() => {
+    if (cachedResult) return;
+    if (onLoadCalledForRef.current === inputKey) return;
+    onLoadCalledForRef.current = inputKey;
+    onLoadRef.current?.(mappedTextures);
+  }, [cachedResult, mappedTextures, inputKey]);
+  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);
+      }
+      textureArray.forEach((texture) => {
+        if (texture?.isTexture) {
+          renderer.initTexture(texture);
+        }
+      });
+    }
+  }, [renderer, loadedTextures, cachedResult]);
+  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 };
+    });
+    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);
       }
-      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);
+      return { _textureRefs: refs };
+    });
+  }, [cache, stableInput, mappedTextures, store]);
+  if (cache && !cachedResult) stageTextures(store, urlTextureEntries(stableInput, mappedTextures));
+  return mappedTextures;
 }
-function getPrimaryIds() {
-  return Array.from(primaryRegistry.keys());
+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__ */ jsx(Fragment, { children: children?.(ret) });
+};
 
-const isRenderer = (def) => !!def?.render;
-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) {
+function useTextures(selector) {
+  const store = useStore();
+  const registry = useMemo(() => {
+    const getState = store.getState;
+    const setState = store.setState;
+    const getOne = (key) => getState().textures.get(key);
     return {
-      width: canvas.width,
-      height: canvas.height,
-      top: 0,
-      left: 0
+      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]);
+          }
+          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.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() });
+      }
     };
+  }, [store]);
+  const subscribe = selector ? () => selector(registry) : (state) => state.textures;
+  const selected = useThree(subscribe);
+  return selector ? selected : registry;
+}
+
+function useRenderTarget(widthOrOptions, heightOrOptions, options) {
+  const support = useThree((s) => s.internal.support);
+  const size = 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 { width: 0, height: 0, top: 0, left: 0, ...size };
+  return 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]);
 }
-function createRoot(canvas, provider) {
-  const prevRoot = _roots.get(canvas);
-  const prevFiber = prevRoot?.fiber;
-  const prevStore = prevRoot?.store;
-  if (prevRoot) console.warn("R3F.createRoot should only be called once!");
-  const logRecoverableError = typeof reportError === "function" ? (
-    // In modern browsers, reportError will dispatch an error event,
-    // emulating an uncaught JavaScript error.
-    reportError
-  ) : (
-    // In older browsers and test environments, fallback to console.error.
-    console.error
-  );
-  const store = prevStore || createStore(invalidate, advance);
-  const fiber = prevFiber || reconciler.createContainer(
-    store,
-    // container
-    t,
-    // tag
-    null,
-    // hydration callbacks
-    false,
-    // isStrictMode
-    null,
-    // concurrentUpdatesByDefaultOverride
-    "",
-    // identifierPrefix
-    logRecoverableError,
-    // onUncaughtError
-    logRecoverableError,
-    // onCaughtError
-    logRecoverableError,
-    // onRecoverableError
-    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) {
-        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."
-        );
-      }
-      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;
-          });
-        }
-        await rendererSetup;
-        state = store.getState();
-        renderer = state.internal.actualRenderer;
+
+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;
       }
+    );
+    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();
-      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 } });
-      }
-      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();
-              }
-            }
-          }
-          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) {
-        state.set({ _sizeProps });
-      }
-      if (forceEven !== void 0 && state.internal.forceEven !== forceEven) {
-        state.set((prev) => ({ internal: { ...prev.internal, forceEven } }));
-      }
-      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") {
-            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 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 = getScheduler();
-      const rootId = state.internal.rootId;
-      if (!rootId) {
-        const newRootId = canvasId || scheduler.generateRootId();
-        const unregisterRoot = scheduler.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.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.register(
-          () => {
-            const state2 = store.getState();
-            state2.events.flush?.();
-          },
-          {
-            id: `${newRootId}_events`,
-            rootId: newRootId,
-            phase: "input",
-            system: true
-          }
-        );
-        const unregisterFrustum = scheduler.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.register(
-          () => {
-            const state2 = store.getState();
-            checkVisibility(state2);
-          },
-          {
-            id: `${newRootId}_visibility`,
-            rootId: newRootId,
-            before: "render",
-            system: true,
-            after: `${newRootId}_frustum`
-          }
-        );
-        const unregisterRender = scheduler.register(
-          () => {
-            const state2 = store.getState();
-            const renderer2 = state2.internal.actualRenderer;
-            const userHandlesRender = scheduler.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
+            );
           }
-        }));
-      } else {
-        const constraintsChanged = !is.equ(schedulerConfig?.before, lastConfiguredProps.schedulerBefore, shallowLoose) || !is.equ(schedulerConfig?.after, lastConfiguredProps.schedulerAfter, shallowLoose);
-        if (constraintsChanged) {
-          scheduler.setRootConstraints(rootId, {
-            before: schedulerConfig?.before,
-            after: schedulerConfig?.after
-          });
-        }
-        if (schedulerConfig?.order !== lastConfiguredProps.schedulerOrder) {
-          scheduler.setRootOrder(rootId, schedulerConfig?.order ?? 0);
-        }
-      }
-      lastConfiguredProps.schedulerBefore = schedulerConfig?.before;
-      lastConfiguredProps.schedulerAfter = schedulerConfig?.after;
-      lastConfiguredProps.schedulerOrder = schedulerConfig?.order;
-      attachRootExtensions(store);
-      onCreated = onCreatedCallback;
-      configured = true;
-      resolve();
-      return this;
-    },
-    render(children) {
-      if (!configured && !pending) this.configure();
-      pending.then(() => {
-        reconciler.updateContainer(
-          /* @__PURE__ */ jsx(Provider, { store, children, onCreated, rootElement: canvas }),
-          fiber,
-          null,
-          () => void 0
-        );
-      });
-      return store;
-    },
-    unmount() {
-      unmountComponentAtNode(canvas);
+        },
+        onProgress,
+        onError
+      );
     }
   };
 }
-function Provider({
-  store,
-  children,
-  onCreated,
-  rootElement
-}) {
-  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__ */ jsx(context.Provider, { value: store, children });
+const LOADER_KEY = Symbol("r3f-environment-loader");
+function useEnvironmentLoader(format) {
+  return 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) 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 = useRef(null);
+  useImperativeHandle(instance, () => ref.current.__r3f, [ref]);
+  return instance;
+}
+function useGraph(object) {
+  return useMemo(() => buildGraph(object), [object]);
 }
+
 function createPortal(children, container, state) {
   return /* @__PURE__ */ jsx(Portal, { children, container, state });
 }
@@ -15404,16 +15969,13 @@ function PortalInner({ state = {}, children, container }) {
   const [portalScene] = 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();
   });
   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 = useRef(null);
@@ -15422,6 +15984,7 @@ function PortalInner({ state = {}, children, container }) {
     const lastRoot = lastRootState.current;
     if (lastRoot) {
       for (const key in rootState) {
+        if (isAccessor(rootState, key)) continue;
         const field = key;
         const changed = rootState[field] !== lastRoot[field];
         const inherited = !(key in rest) && injectState[field] === lastRoot[field];
@@ -15438,11 +16001,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(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
@@ -15457,13 +16016,19 @@ 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 = useMemo(() => {
-    const store = createWithEqualityFn((set, get) => ({ ...rest, set, get }));
+    const store = createWithEqualityFn(keepAccessors((set, get) => ({ ...rest, set, get })));
     const onMutate = (prev) => store.setState((state2) => inject.current(prev, state2));
     onMutate(previousRoot.getState());
     return store;
@@ -15482,9 +16047,6 @@ function PortalInner({ state = {}, children, container }) {
     ) })
   );
 }
-function flushSync(fn) {
-  return reconciler.flushSyncFromReconciler(fn);
-}
 
 const isRef = (obj) => obj.current && obj.current.isScene;
 const resolveScene = (scene) => isRef(scene) ? scene.current : scene;
@@ -15676,12 +16238,12 @@ function EnvironmentColor({ color, scene }) {
 function EnvironmentDualSource(props) {
   const { backgroundFiles, ...envProps } = props;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(EnvironmentCube, { ...envProps, background: false }),
-    /* @__PURE__ */ jsx(EnvironmentCube, { ...props, files: backgroundFiles, background: "only" })
+    (envProps.files || envProps.preset) && /* @__PURE__ */ jsx(EnvironmentCube, { ...envProps, background: false }),
+    /* @__PURE__ */ 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__ */ jsx(EnvironmentColor, { ...props });
   }
   if (props.backgroundFiles && props.backgroundFiles !== props.files) {
@@ -15691,7 +16253,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 {
@@ -15709,7 +16271,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 };
@@ -15720,19 +16282,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,
@@ -15741,11 +16290,13 @@ function CanvasImpl({
   style,
   id,
   gl,
-  renderer: rendererProp,
+  renderer,
+  primary,
+  share,
+  scheduler,
   events = createPointerEvents,
   eventSource,
   eventPrefix,
-  shadows,
   orthographic,
   frameloop,
   dpr,
@@ -15767,7 +16318,11 @@ function CanvasImpl({
   provider,
   ...props
 }) {
-  const { primaryCanvas, scheduler, renderer } = parseRendererConfig(rendererProp);
+  const {
+    shadows: removedShadows,
+    primaryCanvas: removedPrimaryCanvas,
+    ...divProps
+  } = props;
   const Bridge = useBridge();
   const backgroundProps = React.useMemo(() => parseBackground(background), [background]);
   const [hasInitialSize, setHasInitialSize] = React.useState(false);
@@ -15813,10 +16368,22 @@ function CanvasImpl({
   if (block) throw block;
   if (error) throw error;
   const root = React.useRef(null);
-  const effectActiveRef = React.useRef(true);
-  const unsubscribeErrorRef = React.useRef(null);
+  const [gate, waitFor] = useGate();
+  const rootState = React.useRef(null);
+  const eventTarget = () => eventSource ? isRef$1(eventSource) ? eventSource.current : eventSource : divRef.current;
+  const pointerMissed = React.useCallback(
+    (...args) => handlePointerMissed.current?.(...args),
+    [handlePointerMissed]
+  );
+  const dragOverMissed = React.useCallback(
+    (...args) => handleDragOverMissed.current?.(...args),
+    [handleDragOverMissed]
+  );
+  const dropMissed = React.useCallback(
+    (...args) => handleDropMissed.current?.(...args),
+    [handleDropMissed]
+  );
   useIsomorphicLayoutEffect(() => {
-    effectActiveRef.current = true;
     if (fallbackVisible) return;
     const canvas = canvasRef.current;
     if (effectiveSize.width > 0 && effectiveSize.height > 0 && canvas) {
@@ -15826,97 +16393,97 @@ function CanvasImpl({
           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(
+          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__ */ jsx(Bridge, { children: /* @__PURE__ */ jsx(ErrorBoundary, { set: setError, children: /* @__PURE__ */ jsxs(React.Suspense, { fallback: /* @__PURE__ */ jsx(Block, { set: setBlock }), children: [
             backgroundProps && /* @__PURE__ */ 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;
-      }
+  });
+  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.useEffect(() => {
+    const state = rootState.current?.get();
+    const target = eventTarget();
+    if (state && target && state.events.connected !== target) state.events.connect?.(target);
   });
   const insertionMounted = React.useRef(false);
+  const [primaryToken] = React.useState(() => ({}));
+  const primaryKey = React.useRef(null);
   React.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();
@@ -15957,7 +16524,7 @@ function CanvasImpl({
     }
   }, [hmr]);
   const pointerEvents = eventSource ? "none" : "auto";
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: divRef,
@@ -15969,21 +16536,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__ */ jsx("div", { ref: containerRef, className: "r3f-canvas-container", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ 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__ */ jsx("div", { ref: containerRef, className: "r3f-canvas-container", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx(
+          "canvas",
+          {
+            ref: canvasRef,
+            id,
+            className: "r3f-canvas",
+            style: { display: "block", width: "100%", height: "100%" },
+            children: fallback
+          }
+        ) }),
+        gate
+      ]
     }
   );
 }
@@ -15991,4 +16561,4 @@ function Canvas(props) {
   return /* @__PURE__ */ jsx(FiberProvider, { children: /* @__PURE__ */ jsx(CanvasImpl, { ...props }) });
 }
 
-export { attach as $, addAfterEffect as A, addTail as B, Canvas as C, invalidate as D, EnvironmentMap as E, advance as F, extend as G, reconciler as H, IsObject as I, isRenderer as J, unmountComponentAtNode as K, createPortal as L, flushSync as M, createStore as N, findInitialRoot as O, Portal as P, getRootState as Q, REACT_INTERNAL_PROPS as R, buildGraph as S, Texture as T, dispose as U, getInstanceProps as V, prepare as W, invalidateInstance as X, RESERVED_PROPS as Y, resolve as Z, _roots as _, createPointerEvents as a, detach as a0, diffProps as a1, applyProps as a2, calculateDpr as a3, getUuidPrefix as a4, updateCamera as a5, updateFrustum as a6, is as a7, isOrthographicCamera as a8, isRef$1 as a9, isColorRepresentation as aa, isObject3D as ab, isTexture as ac, isLayers as ad, isUniform as ae, isVectorLike as af, isCopyable as ag, hasConstructor as ah, FROM_REF as ai, fromRef as aj, isFromRef as ak, ONCE as al, once as am, isOnce as an, getPrimary as b, createRoot as c, waitForPrimary as d, hasPrimary as e, getPrimaryIds as f, getThree as g, hasThree as h, EnvironmentCube as i, EnvironmentPortal as j, Environment as k, removeInteractivity as l, createEvents as m, useInstanceHandle as n, useGraph as o, presetsObj as p, useLoader as q, registerPrimary as r, swapInteractivity as s, useTexture as t, unregisterPrimary as u, useTextures as v, whenThree as w, useRenderTarget as x, useEnvironment as y, addEffect as z };
+export { invalidateInstance as $, useGraph as A, useLoader as B, Canvas as C, useTexture as D, EnvironmentMap as E, useTextures as F, useEnvironment as G, extend as H, IsObject as I, reconciler as J, flushSync as K, unmountComponentAtNode as L, createPortal as M, calculateDpr as N, getUuidPrefix as O, Portal as P, updateCamera as Q, updateFrustum as R, REACT_INTERNAL_PROPS as S, Texture as T, findInitialRoot as U, getRootState as V, buildGraph as W, dispose as X, getInstanceProps as Y, prepare as Z, _roots as _, createPointerEvents as a, RESERVED_PROPS as a0, resolve as a1, attach as a2, detach as a3, diffProps as a4, applyProps as a5, is as a6, isOrthographicCamera as a7, isRef$1 as a8, isColorRepresentation as a9, isObject3D as aa, isTexture as ab, isLayers as ac, isUniform as ad, isVectorLike as ae, isCopyable as af, hasConstructor as ag, FROM_REF as ah, fromRef as ai, isFromRef as aj, ONCE as ak, once as al, isOnce as am, useRenderTarget as an, addEffect as b, createRoot as c, addAfterEffect as d, addTail as e, advance as f, isRenderer as g, getPrimary as h, invalidate as i, hasPrimary as j, getPrimaryIds as k, createStore as l, getThree as m, hasThree as n, whenThree as o, EnvironmentCube as p, EnvironmentPortal as q, registerPrimary as r, Environment as s, presetsObj as t, unregisterPrimary as u, swapInteractivity as v, waitForPrimary as w, removeInteractivity as x, createEvents as y, useInstanceHandle as z };