@react-three/fiber 10.0.0-alpha.0 → 10.0.0-alpha.2

package/dist/webgpu/index.mjs

@@ -1,5 +1,5 @@
 import * as webgpu from 'three/webgpu';
-import { Layers, RGBAFormat, UnsignedByteType, Vector3, Vector2, TextureLoader, Texture as Texture$1, SRGBColorSpace, Raycaster, OrthographicCamera, PerspectiveCamera, Scene, PCFSoftShadowMap, VSMShadowMap, PCFShadowMap, BasicShadowMap, WebGPURenderer, Color, Vector4, PostProcessing } from 'three/webgpu';
+import { RenderTarget, Frustum, Matrix4, Group, BoxGeometry, MeshBasicNodeMaterial, Mesh, Node, NodeUpdateType, Layers, RGBAFormat, UnsignedByteType, Vector3, Vector2, TextureLoader, Texture as Texture$1, SRGBColorSpace, Raycaster, OrthographicCamera, PerspectiveCamera, Scene, PCFSoftShadowMap, VSMShadowMap, PCFShadowMap, BasicShadowMap, WebGPURenderer, Color, Vector4, PostProcessing } from 'three/webgpu';
 import { Inspector } from 'three/addons/inspector/Inspector.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
@@ -34,18 +34,21 @@ const WebGLRenderer = class WebGLRenderer2 {
     );
   }
 };
+const WebGLRenderTarget = null;
 
 const THREE = /*#__PURE__*/_mergeNamespaces({
   __proto__: null,
   Inspector: Inspector,
   R3F_BUILD_LEGACY: R3F_BUILD_LEGACY,
   R3F_BUILD_WEBGPU: R3F_BUILD_WEBGPU,
+  RenderTargetCompat: RenderTarget,
+  WebGLRenderTarget: WebGLRenderTarget,
   WebGLRenderer: WebGLRenderer
 }, [webgpu]);
 
-var __defProp$2 = Object.defineProperty;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$2 = (obj, key, value) => __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$3 = Object.defineProperty;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$3 = (obj, key, value) => __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
 const act = React["act"];
 const useIsomorphicLayoutEffect = /* @__PURE__ */ (() => typeof window !== "undefined" && (window.document?.createElement || window.navigator?.product === "ReactNative"))() ? React.useLayoutEffect : React.useEffect;
 function useMutableCallback(fn) {
@@ -77,7 +80,7 @@ const ErrorBoundary = /* @__PURE__ */ (() => {
   return _a = class extends React.Component {
     constructor() {
       super(...arguments);
-      __publicField$2(this, "state", { error: false });
+      __publicField$3(this, "state", { error: false });
     }
     componentDidCatch(err) {
       this.props.set(err);
@@ -85,7 +88,7 @@ const ErrorBoundary = /* @__PURE__ */ (() => {
     render() {
       return this.state.error ? null : this.props.children;
     }
-  }, __publicField$2(_a, "getDerivedStateFromError", () => ({ error: true })), _a;
+  }, __publicField$3(_a, "getDerivedStateFromError", () => ({ error: true })), _a;
 })();
 
 const is = {
@@ -148,6 +151,13 @@ function updateCamera(camera, size) {
   }
   camera.updateProjectionMatrix();
 }
+const frustumMatrix = new Matrix4();
+function updateFrustum(camera, frustum) {
+  const target = frustum ?? new Frustum();
+  frustumMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
+  target.setFromProjectionMatrix(frustumMatrix);
+  return target;
+}
 
 const REACT_INTERNAL_PROPS = ["children", "key", "ref"];
 function findInitialRoot(instance) {
@@ -228,6 +238,205 @@ function invalidateInstance(instance) {
   if (state && state.internal.frames === 0) state.invalidate();
 }
 
+const tempFrustum = new Frustum();
+let hasWarnedWebGL = false;
+let tslModule = null;
+async function loadTSL() {
+  if (tslModule) return tslModule;
+  try {
+    const tsl = await import('three/tsl');
+    tslModule = { uniform: tsl.uniform, nodeObject: tsl.nodeObject };
+    return tslModule;
+  } catch {
+    return null;
+  }
+}
+function createOcclusionObserverNode(store, uniform) {
+  const node = new Node("float");
+  node.updateType = NodeUpdateType.OBJECT;
+  node.update = function(frame) {
+    const { internal } = store.getState();
+    const registry = internal.visibilityRegistry;
+    const cache = internal.occlusionCache;
+    for (const entry of registry.values()) {
+      const { object, handlers } = entry;
+      if (handlers.onOccluded || handlers.onVisible) {
+        const isOccluded = frame.renderer.isOccluded(object);
+        cache.set(object, isOccluded);
+      }
+    }
+  };
+  node.setup = function() {
+    return uniform(0);
+  };
+  return node;
+}
+let occlusionSetupPromise = null;
+function enableOcclusion(store) {
+  const state = store.getState();
+  const { internal, renderer, rootScene } = state;
+  if (internal.occlusionEnabled || occlusionSetupPromise) return;
+  const hasOcclusionSupport = typeof renderer?.isOccluded === "function";
+  if (!hasOcclusionSupport) {
+    if (!hasWarnedWebGL) {
+      console.warn(
+        "[R3F] Warning: onOccluded/onVisible occlusion queries require WebGPU renderer. Occlusion events will not fire on WebGL."
+      );
+      hasWarnedWebGL = true;
+    }
+    return;
+  }
+  occlusionSetupPromise = setupOcclusion(store);
+}
+async function setupOcclusion(store) {
+  const state = store.getState();
+  const { internal, rootScene, set } = state;
+  const tsl = await loadTSL();
+  if (!tsl) {
+    console.warn("[R3F] Warning: TSL module not available. Occlusion queries disabled.");
+    occlusionSetupPromise = null;
+    return;
+  }
+  const { uniform, nodeObject } = tsl;
+  let helperGroup = internal.helperGroup;
+  if (!helperGroup) {
+    helperGroup = new Group();
+    helperGroup.name = "__r3fInternal";
+    helperGroup.__r3fInternal = true;
+    rootScene.add(helperGroup);
+  }
+  const geometry = new BoxGeometry(1, 1, 1);
+  const material = new MeshBasicNodeMaterial({
+    transparent: true,
+    opacity: 0
+  });
+  const observerNode = nodeObject(createOcclusionObserverNode(store, uniform));
+  material.colorNode = observerNode;
+  material.needsUpdate = true;
+  const mesh = new Mesh(geometry, material);
+  mesh.name = "__r3fOcclusionObserver";
+  mesh.scale.setScalar(1e-4);
+  mesh.frustumCulled = false;
+  mesh.__r3fInternal = true;
+  helperGroup.add(mesh);
+  set((state2) => ({
+    internal: {
+      ...state2.internal,
+      helperGroup,
+      occlusionObserver: mesh,
+      occlusionEnabled: true
+    }
+  }));
+  occlusionSetupPromise = null;
+}
+function disableOcclusion(store) {
+  const { internal, set } = store.getState();
+  if (!internal.occlusionEnabled) return;
+  if (internal.occlusionObserver) {
+    internal.occlusionObserver.removeFromParent();
+    internal.occlusionObserver.geometry.dispose();
+    internal.occlusionObserver.material.dispose();
+  }
+  internal.occlusionCache.clear();
+  set((state) => ({
+    internal: {
+      ...state.internal,
+      occlusionObserver: null,
+      occlusionEnabled: false
+    }
+  }));
+}
+function cleanupHelperGroup(store) {
+  const { internal, set } = store.getState();
+  disableOcclusion(store);
+  if (internal.helperGroup) {
+    internal.helperGroup.removeFromParent();
+    set((state) => ({
+      internal: {
+        ...state.internal,
+        helperGroup: null
+      }
+    }));
+  }
+}
+function registerVisibility(store, object, handlers) {
+  const { internal } = store.getState();
+  const registry = internal.visibilityRegistry;
+  const entry = {
+    object,
+    handlers,
+    lastFramedState: null,
+    lastOccludedState: null,
+    lastVisibleState: null
+  };
+  registry.set(object.uuid, entry);
+  if (handlers.onOccluded || handlers.onVisible) {
+    object.occlusionTest = true;
+    if (!internal.occlusionEnabled) {
+      enableOcclusion(store);
+    }
+  }
+}
+function unregisterVisibility(store, object) {
+  const { internal } = store.getState();
+  internal.visibilityRegistry.delete(object.uuid);
+  internal.occlusionCache.delete(object);
+}
+function checkVisibility(state) {
+  const { internal, camera } = state;
+  const registry = internal.visibilityRegistry;
+  if (registry.size === 0) return;
+  updateFrustum(camera, tempFrustum);
+  for (const entry of registry.values()) {
+    const { object, handlers, lastFramedState, lastOccludedState, lastVisibleState } = entry;
+    let inFrustum = null;
+    const computeFrustum = () => {
+      if (inFrustum === null) {
+        if (object.geometry?.boundingSphere === null) {
+          object.geometry?.computeBoundingSphere();
+        }
+        inFrustum = tempFrustum.intersectsObject(object);
+      }
+      return inFrustum;
+    };
+    if (handlers.onFramed) {
+      const currentInFrustum = computeFrustum();
+      if (currentInFrustum !== lastFramedState) {
+        entry.lastFramedState = currentInFrustum;
+        handlers.onFramed(currentInFrustum);
+      }
+    }
+    let currentOcclusion = null;
+    if (handlers.onOccluded && internal.occlusionEnabled) {
+      currentOcclusion = internal.occlusionCache.get(object) ?? null;
+      if (currentOcclusion !== null && currentOcclusion !== lastOccludedState) {
+        entry.lastOccludedState = currentOcclusion;
+        handlers.onOccluded(currentOcclusion);
+      }
+    }
+    if (handlers.onVisible) {
+      const currentInFrustum = computeFrustum();
+      if (!handlers.onFramed && currentInFrustum !== lastFramedState) {
+        entry.lastFramedState = currentInFrustum;
+      }
+      let isOccluded = currentOcclusion;
+      if (isOccluded === null && internal.occlusionEnabled) {
+        isOccluded = internal.occlusionCache.get(object) ?? null;
+      }
+      if (isOccluded === null) isOccluded = false;
+      const isVisible = currentInFrustum && !isOccluded && object.visible;
+      if (isVisible !== lastVisibleState) {
+        entry.lastVisibleState = isVisible;
+        handlers.onVisible(isVisible);
+      }
+    }
+  }
+}
+function hasVisibilityHandlers(handlers) {
+  if (!handlers) return false;
+  return !!(handlers.onFramed || handlers.onOccluded || handlers.onVisible);
+}
+
 const RESERVED_PROPS = [
   "children",
   "key",
@@ -242,6 +451,7 @@ const RESERVED_PROPS = [
   "dispose"
 ];
 const EVENT_REGEX = /^on(Pointer|Drag|Drop|Click|DoubleClick|ContextMenu|Wheel)/;
+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"];
@@ -328,7 +538,7 @@ function applyProps(object, props) {
   const rootState = instance && findInitialRoot(instance).getState();
   const prevHandlers = instance?.eventCount;
   for (const prop in props) {
-    let value = props[prop];
+    const value = props[prop];
     if (RESERVED_PROPS.includes(prop)) continue;
     if (instance && EVENT_REGEX.test(prop)) {
       if (typeof value === "function") instance.handlers[prop] = value;
@@ -336,6 +546,12 @@ function applyProps(object, props) {
       instance.eventCount = Object.keys(instance.handlers).length;
       continue;
     }
+    if (instance && VISIBILITY_EVENT_REGEX.test(prop)) {
+      if (typeof value === "function") instance.handlers[prop] = value;
+      else delete instance.handlers[prop];
+      instance.eventCount = Object.keys(instance.handlers).length;
+      continue;
+    }
     if (value === void 0) continue;
     let { root, key, target } = resolve(object, prop);
     if (target === void 0 && (typeof root !== "object" || root === null)) {
@@ -372,6 +588,17 @@ function applyProps(object, props) {
     if (instance.eventCount && object2.raycast !== null) {
       rootState.internal.interaction.push(object2);
     }
+    const root = findInitialRoot(instance);
+    const visibilityHandlers = {
+      onFramed: instance.handlers.onFramed,
+      onOccluded: instance.handlers.onOccluded,
+      onVisible: instance.handlers.onVisible
+    };
+    if (hasVisibilityHandlers(visibilityHandlers)) {
+      registerVisibility(root, object2, visibilityHandlers);
+    } else {
+      unregisterVisibility(root, object2);
+    }
   }
   if (instance && instance.props.attach === void 0) {
     if (instance.object.isBufferGeometry) instance.props.attach = "geometry";
@@ -406,6 +633,7 @@ function removeInteractivity(store, object) {
   internal.capturedMap.forEach((captures, pointerId) => {
     releaseInternalPointerCapture(internal.capturedMap, object, captures, pointerId);
   });
+  unregisterVisibility(store, object);
 }
 function createEvents(store) {
   function calculateDistance(event) {
@@ -462,13 +690,14 @@ function createEvents(store) {
     for (const hit of hits) {
       let eventObject = hit.object;
       while (eventObject) {
-        if (eventObject.__r3f?.eventCount)
+        if (eventObject.__r3f?.eventCount) {
           intersections.push({ ...hit, eventObject });
+        }
         eventObject = eventObject.parent;
       }
     }
     if ("pointerId" in event && state.internal.capturedMap.has(event.pointerId)) {
-      for (let captureData of state.internal.capturedMap.get(event.pointerId).values()) {
+      for (const captureData of state.internal.capturedMap.get(event.pointerId).values()) {
         if (!duplicates.has(makeId(captureData.intersection))) intersections.push(captureData.intersection);
       }
     }
@@ -498,12 +727,12 @@ function createEvents(store) {
               releaseInternalPointerCapture(internal.capturedMap, hit.eventObject, captures, id);
             }
           };
-          let extractEventProps = {};
-          for (let prop in event) {
-            let property = event[prop];
+          const extractEventProps = {};
+          for (const prop in event) {
+            const property = event[prop];
             if (typeof property !== "function") extractEventProps[prop] = property;
           }
-          let raycastEvent = {
+          const raycastEvent = {
             ...hit,
             ...extractEventProps,
             pointer,
@@ -788,8 +1017,21 @@ function formatLocation(url, line) {
   const file = clean.split("/").pop() ?? clean;
   return `${file}:${line}`;
 }
+function notifyAlpha({ message, link }) {
+  if (typeof process !== "undefined" && (process.env.NODE_ENV === "test" || process.env.JEST_WORKER_ID !== void 0) && process.env.R3F_SHOW_ALPHA_WARNINGS !== "true") {
+    return;
+  }
+  if (shownNotices.has(message)) return;
+  shownNotices.add(message);
+  const boxStyle = "background: #6366f1; color: #ffffff; padding: 6px 10px; border-radius: 4px; font-weight: 500;";
+  console.log(`%c\u{1F52C} ${message}`, boxStyle);
+  {
+    console.log(`%cMore info: ${link}`, "color: #6366f1; font-weight: normal;");
+  }
+}
 
-const context = /* @__PURE__ */ React.createContext(null);
+const R3F_CONTEXT = Symbol.for("@react-three/fiber.context");
+const context = globalThis[R3F_CONTEXT] ?? (globalThis[R3F_CONTEXT] = React.createContext(null));
 const createStore = (invalidate, advance) => {
   const rootStore = createWithEqualityFn((set, get) => {
     const position = new Vector3();
@@ -820,6 +1062,8 @@ const createStore = (invalidate, advance) => {
       gl: null,
       renderer: null,
       camera: null,
+      frustum: new Frustum(),
+      autoUpdateFrustum: true,
       raycaster: null,
       events: { priority: 1, enabled: true, connected: false },
       scene: null,
@@ -871,10 +1115,38 @@ const createStore = (invalidate, advance) => {
         getCurrentViewport
       },
       setEvents: (events) => set((state2) => ({ ...state2, events: { ...state2.events, ...events } })),
-      setSize: (width, height, top = 0, left = 0) => {
-        const camera = get().camera;
-        const size = { width, height, top, left };
-        set((state2) => ({ size, viewport: { ...state2.viewport, ...getCurrentViewport(camera, defaultTarget, size) } }));
+      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) }
+              }));
+            }
+          }
+          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
+        }));
       },
       setDpr: (dpr) => set((state2) => {
         const resolved = calculateDpr(dpr);
@@ -891,6 +1163,9 @@ const createStore = (invalidate, advance) => {
       textures: /* @__PURE__ */ new Map(),
       postProcessing: null,
       passes: {},
+      _hmrVersion: 0,
+      _sizeImperative: false,
+      _sizeProps: null,
       previousRoot: void 0,
       internal: {
         // Events
@@ -901,6 +1176,13 @@ const createStore = (invalidate, advance) => {
         initialHits: [],
         capturedMap: /* @__PURE__ */ new Map(),
         lastEvent: React.createRef(),
+        // 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,
@@ -986,7 +1268,15 @@ const createStore = (invalidate, advance) => {
     }
     if (camera !== oldCamera) {
       oldCamera = camera;
+      const { rootScene } = rootStore.getState();
+      if (camera && rootScene && !camera.parent) {
+        rootScene.add(camera);
+      }
       set((state2) => ({ viewport: { ...state2.viewport, ...state2.viewport.getCurrentViewport(camera) } }));
+      const currentState = rootStore.getState();
+      if (currentState.autoUpdateFrustum && camera) {
+        updateFrustum(camera, currentState.frustum);
+      }
     }
   });
   rootStore.subscribe((state2) => invalidate(state2));
@@ -1045,18 +1335,18 @@ useLoader.clear = function(loader, input) {
 };
 useLoader.loader = getLoader;
 
-var __defProp$1 = Object.defineProperty;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$1 = (obj, key, value) => __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$2 = Object.defineProperty;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$2 = (obj, key, value) => __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
 const DEFAULT_PHASES = ["start", "input", "physics", "update", "render", "finish"];
 class PhaseGraph {
   constructor() {
     /** Ordered list of phase nodes */
-    __publicField$1(this, "phases", []);
+    __publicField$2(this, "phases", []);
     /** Quick lookup by name */
-    __publicField$1(this, "phaseMap", /* @__PURE__ */ new Map());
+    __publicField$2(this, "phaseMap", /* @__PURE__ */ new Map());
     /** Cached ordered names (invalidated on changes) */
-    __publicField$1(this, "orderedNamesCache", null);
+    __publicField$2(this, "orderedNamesCache", null);
     this.initializeDefaultPhases();
   }
   //* Initialization --------------------------------
@@ -1083,8 +1373,9 @@ class PhaseGraph {
     const node = { name, isAutoGenerated: false };
     let insertIndex = this.phases.length;
     const targetIndex = this.getPhaseIndex(before ?? after);
-    if (targetIndex !== -1) insertIndex = before ? targetIndex : targetIndex + 1;
-    else {
+    if (targetIndex !== -1) {
+      insertIndex = before ? targetIndex : targetIndex + 1;
+    } else {
       const constraintType = before ? "before" : "after";
       console.warn(`[useFrame] Phase "${before ?? after}" not found for '${constraintType}' constraint`);
     }
@@ -1312,9 +1603,9 @@ function resetJobTiming(job) {
   job.lastRun = void 0;
 }
 
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$1 = Object.defineProperty;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$1 = (obj, key, value) => __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
 const hmrData = (() => {
   if (typeof process !== "undefined" && process.env.NODE_ENV === "test") return void 0;
   if (typeof import_meta_hot !== "undefined") return import_meta_hot;
@@ -1328,9 +1619,9 @@ const _Scheduler = class _Scheduler {
   //* Constructor ================================
   constructor() {
     //* Critical State ================================
-    __publicField(this, "roots", /* @__PURE__ */ new Map());
-    __publicField(this, "phaseGraph");
-    __publicField(this, "loopState", {
+    __publicField$1(this, "roots", /* @__PURE__ */ new Map());
+    __publicField$1(this, "phaseGraph");
+    __publicField$1(this, "loopState", {
       running: false,
       rafHandle: null,
       lastTime: null,
@@ -1339,17 +1630,21 @@ const _Scheduler = class _Scheduler {
       elapsedTime: 0,
       createdAt: performance.now()
     });
-    __publicField(this, "stoppedTime", 0);
+    __publicField$1(this, "stoppedTime", 0);
     //* Private State ================================
-    __publicField(this, "nextRootIndex", 0);
-    __publicField(this, "globalBeforeJobs", /* @__PURE__ */ new Map());
-    __publicField(this, "globalAfterJobs", /* @__PURE__ */ new Map());
-    __publicField(this, "nextGlobalIndex", 0);
-    __publicField(this, "idleCallbacks", /* @__PURE__ */ new Set());
-    __publicField(this, "nextJobIndex", 0);
-    __publicField(this, "jobStateListeners", /* @__PURE__ */ new Map());
-    __publicField(this, "pendingFrames", 0);
-    __publicField(this, "_frameloop", "always");
+    __publicField$1(this, "nextRootIndex", 0);
+    __publicField$1(this, "globalBeforeJobs", /* @__PURE__ */ new Map());
+    __publicField$1(this, "globalAfterJobs", /* @__PURE__ */ new Map());
+    __publicField$1(this, "nextGlobalIndex", 0);
+    __publicField$1(this, "idleCallbacks", /* @__PURE__ */ new Set());
+    __publicField$1(this, "nextJobIndex", 0);
+    __publicField$1(this, "jobStateListeners", /* @__PURE__ */ new Map());
+    __publicField$1(this, "pendingFrames", 0);
+    __publicField$1(this, "_frameloop", "always");
+    //* Independent Mode & Error Handling State ================================
+    __publicField$1(this, "_independent", false);
+    __publicField$1(this, "errorHandler", null);
+    __publicField$1(this, "rootReadyCallbacks", /* @__PURE__ */ new Set());
     //* Core Loop Execution Methods ================================
     /**
      * Main RAF loop callback.
@@ -1358,7 +1653,7 @@ const _Scheduler = class _Scheduler {
      * @returns {void}
      * @private
      */
-    __publicField(this, "loop", (timestamp) => {
+    __publicField$1(this, "loop", (timestamp) => {
       if (!this.loopState.running) return;
       this.executeFrame(timestamp);
       if (this._frameloop === "demand") {
@@ -1372,6 +1667,12 @@ const _Scheduler = class _Scheduler {
     });
     this.phaseGraph = new PhaseGraph();
   }
+  static get instance() {
+    return globalThis[_Scheduler.INSTANCE_KEY] ?? null;
+  }
+  static set instance(value) {
+    globalThis[_Scheduler.INSTANCE_KEY] = value;
+  }
   /**
    * Get the global scheduler instance (creates if doesn't exist).
    * Uses HMR data to preserve instance across hot reloads.
@@ -1420,29 +1721,43 @@ const _Scheduler = class _Scheduler {
   get isRunning() {
     return this.loopState.running;
   }
+  get isReady() {
+    return this.roots.size > 0;
+  }
+  get independent() {
+    return this._independent;
+  }
+  set independent(value) {
+    this._independent = value;
+    if (value) this.ensureDefaultRoot();
+  }
   //* Root Management Methods ================================
   /**
    * Register a root (Canvas) with the scheduler.
    * The first root to register starts the RAF loop (if frameloop='always').
    * @param {string} id - Unique identifier for this root
-   * @param {() => RootState} getState - Function to get the root's current state
+   * @param {RootOptions} [options] - Optional configuration with getState and onError callbacks
    * @returns {() => void} Unsubscribe function to remove this root
    */
-  registerRoot(id, getState) {
+  registerRoot(id, options = {}) {
     if (this.roots.has(id)) {
       console.warn(`[Scheduler] Root "${id}" already registered`);
       return () => this.unregisterRoot(id);
     }
     const entry = {
       id,
-      getState,
+      getState: options.getState ?? (() => ({})),
       jobs: /* @__PURE__ */ new Map(),
       sortedJobs: [],
       needsRebuild: false
     };
+    if (options.onError) {
+      this.errorHandler = options.onError;
+    }
     this.roots.set(id, entry);
-    if (this.roots.size === 1 && this._frameloop === "always") {
-      this.start();
+    if (this.roots.size === 1) {
+      this.notifyRootReady();
+      if (this._frameloop === "always") this.start();
     }
     return () => this.unregisterRoot(id);
   }
@@ -1462,7 +1777,60 @@ const _Scheduler = class _Scheduler {
     this.roots.delete(id);
     if (this.roots.size === 0) {
       this.stop();
+      this.errorHandler = null;
+    }
+  }
+  /**
+   * Subscribe to be notified when a root becomes available.
+   * Fires immediately if a root already exists.
+   * @param {() => void} callback - Function called when first root registers
+   * @returns {() => void} Unsubscribe function
+   */
+  onRootReady(callback) {
+    if (this.roots.size > 0) {
+      callback();
+      return () => {
+      };
     }
+    this.rootReadyCallbacks.add(callback);
+    return () => this.rootReadyCallbacks.delete(callback);
+  }
+  /**
+   * Notify all registered root-ready callbacks.
+   * Called when the first root registers.
+   * @returns {void}
+   * @private
+   */
+  notifyRootReady() {
+    for (const cb of this.rootReadyCallbacks) {
+      try {
+        cb();
+      } catch (error) {
+        console.error("[Scheduler] Error in root-ready callback:", error);
+      }
+    }
+    this.rootReadyCallbacks.clear();
+  }
+  /**
+   * Ensure a default root exists for independent mode.
+   * Creates a minimal root with no state provider.
+   * @returns {void}
+   * @private
+   */
+  ensureDefaultRoot() {
+    if (!this.roots.has("__default__")) {
+      this.registerRoot("__default__");
+    }
+  }
+  /**
+   * Trigger error handling for job errors.
+   * Uses the bound error handler if available, otherwise logs to console.
+   * @param {Error} error - The error to handle
+   * @returns {void}
+   */
+  triggerError(error) {
+    if (this.errorHandler) this.errorHandler(error);
+    else console.error("[Scheduler]", error);
   }
   //* Phase Management Methods ================================
   /**
@@ -1822,9 +2190,9 @@ const _Scheduler = class _Scheduler {
     const deltaMs = this.loopState.lastTime !== null ? now - this.loopState.lastTime : 0;
     const delta = deltaMs / 1e3;
     const elapsed = now - this.loopState.createdAt;
-    const rootState = root.getState();
+    const providedState = root.getState?.() ?? {};
     const frameState = {
-      ...rootState,
+      ...providedState,
       time: now,
       delta,
       elapsed,
@@ -1834,6 +2202,7 @@ const _Scheduler = class _Scheduler {
       job.callback(frameState, delta);
     } catch (error) {
       console.error(`[Scheduler] Error in job "${job.id}":`, error);
+      this.triggerError(error instanceof Error ? error : new Error(String(error)));
     }
   }
   /**
@@ -1875,7 +2244,7 @@ const _Scheduler = class _Scheduler {
   /**
    * Execute all jobs for a single root in sorted order.
    * Rebuilds sorted job list if needed, then dispatches each job.
-   * Errors are caught and propagated to the root's error boundary.
+   * Errors are caught and propagated via triggerError.
    * @param {RootEntry} root - The root entry to tick
    * @param {number} timestamp - RAF timestamp in milliseconds
    * @param {number} delta - Time since last frame in seconds
@@ -1887,10 +2256,9 @@ const _Scheduler = class _Scheduler {
       root.sortedJobs = rebuildSortedJobs(root.jobs, this.phaseGraph);
       root.needsRebuild = false;
     }
-    const rootState = root.getState();
-    if (!rootState) return;
+    const providedState = root.getState?.() ?? {};
     const frameState = {
-      ...rootState,
+      ...providedState,
       time: timestamp,
       delta,
       elapsed: this.loopState.elapsedTime / 1e3,
@@ -1903,7 +2271,7 @@ const _Scheduler = class _Scheduler {
         job.callback(frameState, delta);
       } catch (error) {
         console.error(`[Scheduler] Error in job "${job.id}":`, error);
-        rootState.setError(error instanceof Error ? error : new Error(String(error)));
+        this.triggerError(error instanceof Error ? error : new Error(String(error)));
       }
     }
   }
@@ -1988,8 +2356,11 @@ const _Scheduler = class _Scheduler {
     return /* @__PURE__ */ new Set([value]);
   }
 };
-//* Static State & Methods (Singlton Usage) ================================
-__publicField(_Scheduler, "instance", null);
+//* Static State & Methods (Singleton Usage) ================================
+//* Cross-Bundle Singleton Key ==============================
+// Use Symbol.for() to ensure scheduler is shared across bundle boundaries
+// This prevents issues when mixing imports from @react-three/fiber and @react-three/fiber/webgpu
+__publicField$1(_Scheduler, "INSTANCE_KEY", Symbol.for("@react-three/fiber.scheduler"));
 let Scheduler = _Scheduler;
 const getScheduler = () => Scheduler.get();
 if (hmrData) {
@@ -1997,11 +2368,9 @@ if (hmrData) {
 }
 
 function useFrame(callback, priorityOrOptions) {
-  const store = useStore();
-  const getRootId = React.useCallback(() => {
-    const state = store.getState();
-    return state.internal.rootId;
-  }, [store]);
+  const store = React.useContext(context);
+  const isInsideCanvas = store !== null;
+  const scheduler = getScheduler();
   const optionsKey = typeof priorityOrOptions === "number" ? `p:${priorityOrOptions}` : priorityOrOptions ? JSON.stringify({
     id: priorityOrOptions.id,
     phase: priorityOrOptions.phase,
@@ -2021,55 +2390,71 @@ function useFrame(callback, priorityOrOptions) {
   const isLegacyPriority = typeof priorityOrOptions === "number" && priorityOrOptions > 0;
   useIsomorphicLayoutEffect(() => {
     if (!callback) return;
-    const scheduler = getScheduler();
-    const rootId = getRootId();
-    const state = store.getState();
-    if (isLegacyPriority) {
-      state.internal.priority++;
-      let parentRoot = state.previousRoot;
-      while (parentRoot) {
-        const parentState = parentRoot.getState();
-        if (parentState?.internal) parentState.internal.priority++;
-        parentRoot = parentState?.previousRoot;
-      }
-      notifyDepreciated({
-        heading: "useFrame with numeric priority is deprecated",
-        body: 'Using useFrame(callback, number) to control render order is deprecated.\n\nFor custom rendering, use: useFrame(callback, { phase: "render" })\nFor execution order within update phase, use: useFrame(callback, { priority: number })',
-        link: "https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe"
-      });
-    }
-    const wrappedCallback = (frameState, delta) => {
-      const localState = store.getState();
-      const mergedState = {
-        ...localState,
-        time: frameState.time,
-        delta: frameState.delta,
-        elapsed: frameState.elapsed,
-        frame: frameState.frame
-      };
-      callbackRef.current?.(mergedState, delta);
-    };
-    const unregister = scheduler.register(wrappedCallback, {
-      id,
-      rootId,
-      ...options
-    });
-    return () => {
-      unregister();
+    if (isInsideCanvas) {
+      const state = store.getState();
+      const rootId = state.internal.rootId;
       if (isLegacyPriority) {
-        const currentState = store.getState();
-        if (currentState.internal) {
-          currentState.internal.priority--;
-          let parentRoot = currentState.previousRoot;
-          while (parentRoot) {
-            const parentState = parentRoot.getState();
-            if (parentState?.internal) parentState.internal.priority--;
-            parentRoot = parentState?.previousRoot;
+        state.internal.priority++;
+        let parentRoot = state.previousRoot;
+        while (parentRoot) {
+          const parentState = parentRoot.getState();
+          if (parentState?.internal) parentState.internal.priority++;
+          parentRoot = parentState?.previousRoot;
+        }
+        notifyDepreciated({
+          heading: "useFrame with numeric priority is deprecated",
+          body: 'Using useFrame(callback, number) to control render order is deprecated.\n\nFor custom rendering, use: useFrame(callback, { phase: "render" })\nFor execution order within update phase, use: useFrame(callback, { priority: number })',
+          link: "https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe"
+        });
+      }
+      const wrappedCallback = (frameState, delta) => {
+        const localState = store.getState();
+        const mergedState = {
+          ...localState,
+          time: frameState.time,
+          delta: frameState.delta,
+          elapsed: frameState.elapsed,
+          frame: frameState.frame
+        };
+        callbackRef.current?.(mergedState, delta);
+      };
+      const unregister = scheduler.register(wrappedCallback, {
+        id,
+        rootId,
+        ...options
+      });
+      return () => {
+        unregister();
+        if (isLegacyPriority) {
+          const currentState = store.getState();
+          if (currentState.internal) {
+            currentState.internal.priority--;
+            let parentRoot = currentState.previousRoot;
+            while (parentRoot) {
+              const parentState = parentRoot.getState();
+              if (parentState?.internal) parentState.internal.priority--;
+              parentRoot = parentState?.previousRoot;
+            }
           }
         }
+      };
+    } else {
+      const registerOutside = () => {
+        return scheduler.register((state, delta) => callbackRef.current?.(state, delta), { id, ...options });
+      };
+      if (scheduler.independent || scheduler.isReady) {
+        return registerOutside();
       }
-    };
-  }, [store, id, optionsKey, isLegacyPriority]);
+      let unregisterJob = null;
+      const unsubReady = scheduler.onRootReady(() => {
+        unregisterJob = registerOutside();
+      });
+      return () => {
+        unsubReady();
+        unregisterJob?.();
+      };
+    }
+  }, [store, scheduler, id, optionsKey, isLegacyPriority, isInsideCanvas]);
   const isPaused = React.useSyncExternalStore(
     // Subscribe function
     React.useCallback(
@@ -2084,7 +2469,7 @@ function useFrame(callback, priorityOrOptions) {
     React.useCallback(() => false, [])
   );
   const controls = React.useMemo(() => {
-    const scheduler = getScheduler();
+    const scheduler2 = getScheduler();
     return {
       /** The job's unique ID */
       id,
@@ -2092,7 +2477,7 @@ function useFrame(callback, priorityOrOptions) {
        * Access to the global scheduler for frame loop control.
        * Use for controlling the entire frame loop, adding phases, etc.
        */
-      scheduler,
+      scheduler: scheduler2,
       /**
        * Manually step this job only.
        * Bypasses FPS limiting - always runs.
@@ -2340,6 +2725,16 @@ function useTextures() {
   }, [store]);
 }
 
+function useRenderTarget(width, height, options) {
+  const isLegacy = useThree((s) => s.isLegacy);
+  const size = useThree((s) => s.size);
+  return useMemo(() => {
+    const w = width ?? size.width;
+    const h = height ?? size.height;
+    return new RenderTarget(w, h, options);
+  }, [width, height, size.width, size.height, options, isLegacy]);
+}
+
 function useStore() {
   const store = useContext(context);
   if (!store) throw new Error("R3F: Hooks can only be used within the Canvas component!");
@@ -2391,24 +2786,14 @@ function advance(timestamp, runGlobalEffects = true, state, frame) {
   getScheduler().step(timestamp);
 }
 
-const version = "10.0.0-alpha.0";
+const version = "10.0.0-alpha.2";
 const packageData = {
 	version: version};
 
 function Xb(Tt) {
   return Tt && Tt.__esModule && Object.prototype.hasOwnProperty.call(Tt, "default") ? Tt.default : Tt;
 }
-var Rm = { exports: {} }, Og = { exports: {} };
-/**
-* @license React
-* react-reconciler.production.js
-*
-* Copyright (c) Meta Platforms, Inc. and affiliates.
-*
-* This source code is licensed under the MIT license found in the
-* LICENSE file in the root directory of this source tree.
-*/
-var _b;
+var Rm = { exports: {} }, Og = { exports: {} }, _b;
 function Kb() {
   return _b || (_b = 1, (function(Tt) {
     Tt.exports = function(m) {
@@ -3480,7 +3865,6 @@ Error generating stack: ` + l.message + `
             if (J === cl || J === jc) throw J;
             var Ge = Yn(29, J, null, P.mode);
             return Ge.lanes = H, Ge.return = P, Ge;
-          } finally {
           }
         };
       }
@@ -4134,7 +4518,6 @@ Error generating stack: ` + l.message + `
             var h = r.lastRenderedState, y = d(h, a);
             if (c.hasEagerState = true, c.eagerState = y, jn(y, h)) return go(t, r, c, 0), Ne === null && Bn(), false;
           } catch {
-          } finally {
           }
           if (a = yo(t, r, c, l), a !== null) return nt(a, t, l), ns(a, r, l), true;
         }
@@ -6555,10 +6938,7 @@ Error generating stack: ` + l.message + `
       function vr(t, r) {
         Sf(t, r), (t = t.alternate) && Sf(t, r);
       }
-      var ie = {}, Fm = React__default, tt = Tb, Lt = Object.assign, hc = Symbol.for("react.element"), zs = Symbol.for("react.transitional.element"), sa = Symbol.for("react.portal"), $a = Symbol.for("react.fragment"), kf = Symbol.for("react.strict_mode"), Cs = Symbol.for("react.profiler"), mc = Symbol.for("react.consumer"), Io = Symbol.for("react.context"), Zi = Symbol.for("react.forward_ref"), Va = Symbol.for("react.suspense"), Te = Symbol.for("react.suspense_list"), wf = Symbol.for("react.memo"), ua = Symbol.for("react.lazy");
-      var gc = Symbol.for("react.activity");
-      var $r = Symbol.for("react.memo_cache_sentinel");
-      var Pf = Symbol.iterator, xf = Symbol.for("react.client.reference"), ca = Array.isArray, M = Fm.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Yp = m.rendererVersion, zf = m.rendererPackageName, Cf = m.extraDevToolsConfig, Ts = m.getPublicInstance, Hm = m.getRootHostContext, Xp = m.getChildHostContext, Am = m.prepareForCommit, _s = m.resetAfterCommit, Vr = m.createInstance;
+      var ie = {}, Fm = React__default, tt = Tb, Lt = Object.assign, hc = Symbol.for("react.element"), zs = Symbol.for("react.transitional.element"), sa = Symbol.for("react.portal"), $a = Symbol.for("react.fragment"), kf = Symbol.for("react.strict_mode"), Cs = Symbol.for("react.profiler"), mc = Symbol.for("react.consumer"), Io = Symbol.for("react.context"), Zi = Symbol.for("react.forward_ref"), Va = Symbol.for("react.suspense"), Te = Symbol.for("react.suspense_list"), wf = Symbol.for("react.memo"), ua = Symbol.for("react.lazy"), gc = Symbol.for("react.activity"), $r = Symbol.for("react.memo_cache_sentinel"), Pf = Symbol.iterator, xf = Symbol.for("react.client.reference"), ca = Array.isArray, M = Fm.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Yp = m.rendererVersion, zf = m.rendererPackageName, Cf = m.extraDevToolsConfig, Ts = m.getPublicInstance, Hm = m.getRootHostContext, Xp = m.getChildHostContext, Am = m.prepareForCommit, _s = m.resetAfterCommit, Vr = m.createInstance;
       m.cloneMutableInstance;
       var yc = m.appendInitialChild, Kp = m.finalizeInitialChildren, Rs = m.shouldSetTextContent, bc = m.createTextInstance;
       m.cloneMutableTextInstance;
@@ -6927,17 +7307,7 @@ No matching component was found for:
     }, Tt.exports.default = Tt.exports, Object.defineProperty(Tt.exports, "__esModule", { value: true });
   })(Og)), Og.exports;
 }
-var Mg = { exports: {} };
-/**
-* @license React
-* react-reconciler.development.js
-*
-* Copyright (c) Meta Platforms, Inc. and affiliates.
-*
-* This source code is licensed under the MIT license found in the
-* LICENSE file in the root directory of this source tree.
-*/
-var Rb;
+var Mg = { exports: {} }, Rb;
 function e0() {
   return Rb || (Rb = 1, (function(Tt) {
     process.env.NODE_ENV !== "production" && (Tt.exports = function(m) {
@@ -12704,10 +13074,7 @@ Check the render method of %s.`, G(di) || "Unknown")), i = zo(n), i.payload = {
       function Ic() {
         return di;
       }
-      var le = {}, qm = React__default, St = Tb, ze = Object.assign, Uh = Symbol.for("react.element"), Ho = Symbol.for("react.transitional.element"), Ao = Symbol.for("react.portal"), ol = Symbol.for("react.fragment"), Lc = Symbol.for("react.strict_mode"), Uf = Symbol.for("react.profiler"), ei = Symbol.for("react.consumer"), on = Symbol.for("react.context"), jn = Symbol.for("react.forward_ref"), Nc = Symbol.for("react.suspense"), Bf = Symbol.for("react.suspense_list"), al = Symbol.for("react.memo"), kt = Symbol.for("react.lazy");
-      var Ds = Symbol.for("react.activity");
-      var Bh = Symbol.for("react.memo_cache_sentinel");
-      var ni = Symbol.iterator, il = Symbol.for("react.client.reference"), fn = Array.isArray, x = qm.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Jt = m.rendererVersion, Zt = m.rendererPackageName, jo = m.extraDevToolsConfig, ot = m.getPublicInstance, Zr = m.getRootHostContext, Dn = m.getChildHostContext, Ws = m.prepareForCommit, pa = m.resetAfterCommit, Fc = m.createInstance;
+      var le = {}, qm = React__default, St = Tb, ze = Object.assign, Uh = Symbol.for("react.element"), Ho = Symbol.for("react.transitional.element"), Ao = Symbol.for("react.portal"), ol = Symbol.for("react.fragment"), Lc = Symbol.for("react.strict_mode"), Uf = Symbol.for("react.profiler"), ei = Symbol.for("react.consumer"), on = Symbol.for("react.context"), jn = Symbol.for("react.forward_ref"), Nc = Symbol.for("react.suspense"), Bf = Symbol.for("react.suspense_list"), al = Symbol.for("react.memo"), kt = Symbol.for("react.lazy"), Ds = Symbol.for("react.activity"), Bh = Symbol.for("react.memo_cache_sentinel"), ni = Symbol.iterator, il = Symbol.for("react.client.reference"), fn = Array.isArray, x = qm.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Jt = m.rendererVersion, Zt = m.rendererPackageName, jo = m.extraDevToolsConfig, ot = m.getPublicInstance, Zr = m.getRootHostContext, Dn = m.getChildHostContext, Ws = m.prepareForCommit, pa = m.resetAfterCommit, Fc = m.createInstance;
       m.cloneMutableInstance;
       var bn = m.appendInitialChild, Ue = m.finalizeInitialChildren, ue = m.shouldSetTextContent, Do = m.createTextInstance;
       m.cloneMutableTextInstance;
@@ -13675,15 +14042,6 @@ function n0() {
 var t0 = n0();
 const r0 = Xb(t0);
 
-/**
- * @license React
- * react-reconciler-constants.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
 const t = 1, o = 8, r = 32, e = 2;
 
 function createReconciler(config) {
@@ -13692,7 +14050,8 @@ function createReconciler(config) {
   return reconciler2;
 }
 const NoEventPriority = 0;
-const catalogue = {};
+const R3F_CATALOGUE = Symbol.for("@react-three/fiber.catalogue");
+const catalogue = globalThis[R3F_CATALOGUE] ?? (globalThis[R3F_CATALOGUE] = {});
 const PREFIX_REGEX = /^three(?=[A-Z])/;
 const toPascalCase = (type) => `${type[0].toUpperCase()}${type.slice(1)}`;
 let i = 0;
@@ -13709,10 +14068,11 @@ function extend(objects) {
 function validateInstance(type, props) {
   const name = toPascalCase(type);
   const target = catalogue[name];
-  if (type !== "primitive" && !target)
+  if (type !== "primitive" && !target) {
     throw new Error(
       `R3F: ${name} is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively`
     );
+  }
   if (type === "primitive" && !props.object) throw new Error(`R3F: Primitives without 'object' are invalid!`);
   if (props.args !== void 0 && !Array.isArray(props.args)) throw new Error("R3F: The args prop must be an array!");
 }
@@ -14163,14 +14523,14 @@ function createRoot(canvas) {
   if (!prevRoot) _roots.set(canvas, { fiber, store });
   let onCreated;
   let lastCamera;
-  let lastConfiguredProps = {};
+  const lastConfiguredProps = {};
   let configured = false;
   let pending = null;
   return {
     async configure(props = {}) {
       let resolve;
       pending = new Promise((_resolve) => resolve = _resolve);
-      let {
+      const {
         gl: glConfig,
         renderer: rendererConfig,
         size: propsSize,
@@ -14190,9 +14550,12 @@ function createRoot(canvas) {
         camera: cameraOptions,
         onPointerMissed,
         onDragOverMissed,
-        onDropMissed
+        onDropMissed,
+        autoUpdateFrustum = true,
+        occlusion = false,
+        _sizeProps
       } = props;
-      let state = store.getState();
+      const state = store.getState();
       const defaultGPUProps = {
         canvas
       };
@@ -14207,7 +14570,9 @@ function createRoot(canvas) {
       let renderer = state.internal.actualRenderer;
       if (!state.internal.actualRenderer) {
         renderer = await resolveRenderer(rendererConfig, defaultGPUProps, WebGPURenderer);
-        await renderer.init();
+        if (!renderer.hasInitialized?.()) {
+          await renderer.init();
+        }
         const backend = renderer.backend;
         const isWebGPUBackend = backend && "isWebGPUBackend" in backend;
         state.internal.actualRenderer = renderer;
@@ -14217,8 +14582,9 @@ function createRoot(canvas) {
       if (!raycaster) state.set({ raycaster: raycaster = new Raycaster() });
       const { params, ...options } = raycastOptions || {};
       if (!is.equ(options, raycaster, shallowLoose)) applyProps(raycaster, { ...options });
-      if (!is.equ(params, raycaster.params, shallowLoose))
+      if (!is.equ(params, raycaster.params, shallowLoose)) {
         applyProps(raycaster, { params: { ...raycaster.params, ...params } });
+      }
       if (!state.camera || state.camera === lastCamera && !is.equ(lastCamera, cameraOptions, shallowLoose)) {
         lastCamera = cameraOptions;
         const isCamera = cameraOptions?.isCamera;
@@ -14255,6 +14621,8 @@ function createRoot(canvas) {
           rootScene: scene,
           internal: { ...prev.internal, container: scene }
         }));
+        const camera = state.camera;
+        if (camera && !camera.parent) scene.add(camera);
       }
       if (events && !state.events.handlers) {
         state.set({ events: events(store) });
@@ -14267,9 +14635,14 @@ function createRoot(canvas) {
           wasEnabled = enabled;
         });
       }
+      if (_sizeProps !== void 0) {
+        state.set({ _sizeProps });
+      }
       const size = computeInitialSize(canvas, propsSize);
-      if (!is.equ(size, state.size, shallowLoose)) {
+      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);
@@ -14282,6 +14655,10 @@ function createRoot(canvas) {
       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;
@@ -14335,15 +14712,17 @@ function createRoot(canvas) {
         } else if (is.obj(shadows)) {
           Object.assign(renderer.shadowMap, shadows);
         }
-        if (oldEnabled !== renderer.shadowMap.enabled || oldType !== renderer.shadowMap.type)
+        if (oldEnabled !== renderer.shadowMap.enabled || oldType !== renderer.shadowMap.type) {
           renderer.shadowMap.needsUpdate = true;
+        }
       }
       if (textureColorSpace !== lastConfiguredProps.textureColorSpace) {
         if (state.textureColorSpace !== textureColorSpace) state.set(() => ({ textureColorSpace }));
         lastConfiguredProps.textureColorSpace = textureColorSpace;
       }
-      if (glConfig && !is.fun(glConfig) && !isRenderer(glConfig) && !is.equ(glConfig, renderer, shallowLoose))
+      if (glConfig && !is.fun(glConfig) && !isRenderer(glConfig) && !is.equ(glConfig, renderer, shallowLoose)) {
         applyProps(renderer, glConfig);
+      }
       if (rendererConfig && !is.fun(rendererConfig) && !isRenderer(rendererConfig) && state.renderer) {
         const currentRenderer = state.renderer;
         if (!is.equ(rendererConfig, currentRenderer, shallowLoose)) {
@@ -14354,7 +14733,37 @@ function createRoot(canvas) {
       const rootId = state.internal.rootId;
       if (!rootId) {
         const newRootId = scheduler.generateRootId();
-        const unregisterRoot = scheduler.registerRoot(newRootId, () => store.getState());
+        const unregisterRoot = scheduler.registerRoot(newRootId, {
+          getState: () => store.getState(),
+          onError: (err) => store.getState().setError(err)
+        });
+        const unregisterFrustum = scheduler.register(
+          () => {
+            const state2 = store.getState();
+            if (state2.autoUpdateFrustum && state2.camera) {
+              updateFrustum(state2.camera, state2.frustum);
+            }
+          },
+          {
+            id: `${newRootId}_frustum`,
+            rootId: newRootId,
+            phase: "preRender",
+            system: true
+          }
+        );
+        const unregisterVisibility = scheduler.register(
+          () => {
+            const state2 = store.getState();
+            checkVisibility(state2);
+          },
+          {
+            id: `${newRootId}_visibility`,
+            rootId: newRootId,
+            phase: "preRender",
+            system: true,
+            after: `${newRootId}_frustum`
+          }
+        );
         const unregisterRender = scheduler.register(
           () => {
             const state2 = store.getState();
@@ -14382,6 +14791,8 @@ function createRoot(canvas) {
             rootId: newRootId,
             unregisterRoot: () => {
               unregisterRoot();
+              unregisterFrustum();
+              unregisterVisibility();
               unregisterRender();
             },
             scheduler
@@ -14439,6 +14850,7 @@ function unmountComponentAtNode(canvas, callback) {
             const unregisterRoot = state.internal.unregisterRoot;
             if (unregisterRoot) unregisterRoot();
             state.events.disconnect?.();
+            cleanupHelperGroup(root.store);
             renderer?.renderLists?.dispose?.();
             renderer?.forceContextLoss?.();
             if (renderer?.xr) state.xr.disconnect();
@@ -14578,6 +14990,9 @@ function CanvasImpl({
   onDragOverMissed,
   onDropMissed,
   onCreated,
+  hmr,
+  width,
+  height,
   ...props
 }) {
   React.useMemo(() => extend(THREE), []);
@@ -14598,7 +15013,16 @@ function CanvasImpl({
     };
   }, [resize, hasInitialSizeRef.current]);
   const [containerRef, containerRect] = useMeasure(measureConfig);
-  if (!hasInitialSizeRef.current && containerRect.width > 0 && containerRect.height > 0) {
+  const effectiveSize = React.useMemo(
+    () => ({
+      width: width ?? containerRect.width,
+      height: height ?? containerRect.height,
+      top: containerRect.top,
+      left: containerRect.left
+    }),
+    [width, height, containerRect]
+  );
+  if (!hasInitialSizeRef.current && effectiveSize.width > 0 && effectiveSize.height > 0) {
     hasInitialSizeRef.current = true;
   }
   const canvasRef = React.useRef(null);
@@ -14617,8 +15041,23 @@ function CanvasImpl({
   useIsomorphicLayoutEffect(() => {
     effectActiveRef.current = true;
     const canvas = canvasRef.current;
-    if (containerRect.width > 0 && containerRect.height > 0 && canvas) {
-      if (!root.current) root.current = createRoot(canvas);
+    if (effectiveSize.width > 0 && effectiveSize.height > 0 && canvas) {
+      if (!root.current) {
+        root.current = createRoot(canvas);
+        notifyAlpha({
+          message: "React Three Fiber v10 is in ALPHA - expect breaking changes",
+          link: "https://github.com/pmndrs/react-three-fiber/discussions"
+        });
+        const rootEntry = _roots.get(canvas);
+        if (rootEntry?.store) {
+          if (unsubscribeErrorRef.current) unsubscribeErrorRef.current();
+          unsubscribeErrorRef.current = rootEntry.store.subscribe((state) => {
+            if (state.error && effectActiveRef.current) {
+              setError(state.error);
+            }
+          });
+        }
+      }
       async function run() {
         if (!effectActiveRef.current || !root.current) return;
         await root.current.configure({
@@ -14636,7 +15075,9 @@ function CanvasImpl({
           performance,
           raycaster,
           camera,
-          size: containerRect,
+          size: effectiveSize,
+          // Store size props for reset functionality
+          _sizeProps: width !== void 0 || height !== void 0 ? { width, height } : null,
           // Pass mutable reference to onPointerMissed so it's free to update
           onPointerMissed: (...args) => handlePointerMissed.current?.(...args),
           onDragOverMissed: (...args) => handleDragOverMissed.current?.(...args),
@@ -14659,15 +15100,9 @@ function CanvasImpl({
           }
         });
         if (!effectActiveRef.current || !root.current) return;
-        const store = root.current.render(
+        root.current.render(
           /* @__PURE__ */ jsx(Bridge, { children: /* @__PURE__ */ jsx(ErrorBoundary, { set: setError, children: /* @__PURE__ */ jsx(React.Suspense, { fallback: /* @__PURE__ */ jsx(Block, { set: setBlock }), children: children ?? null }) }) })
         );
-        if (unsubscribeErrorRef.current) unsubscribeErrorRef.current();
-        unsubscribeErrorRef.current = store.subscribe((state) => {
-          if (state.error && effectActiveRef.current) {
-            setError(state.error);
-          }
-        });
       }
       run();
     }
@@ -14688,6 +15123,33 @@ function CanvasImpl({
       };
     }
   }, []);
+  React.useEffect(() => {
+    if (hmr === false) return;
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const handleHMR = () => {
+      const rootEntry = _roots.get(canvas);
+      if (rootEntry?.store) {
+        rootEntry.store.setState((state) => ({
+          nodes: {},
+          uniforms: {},
+          _hmrVersion: state._hmrVersion + 1
+        }));
+      }
+    };
+    if (typeof import.meta !== "undefined" && import.meta.hot) {
+      const hot = import.meta.hot;
+      hot.on("vite:afterUpdate", handleHMR);
+      return () => hot.dispose?.(() => {
+      });
+    }
+    if (typeof module !== "undefined" && module.hot) {
+      const hot = module.hot;
+      hot.addStatusHandler((status) => {
+        if (status === "idle") handleHMR();
+      });
+    }
+  }, [hmr]);
   const pointerEvents = eventSource ? "none" : "auto";
   return /* @__PURE__ */ jsx(
     "div",
@@ -14710,6 +15172,72 @@ function Canvas(props) {
   return /* @__PURE__ */ jsx(FiberProvider, { children: /* @__PURE__ */ jsx(CanvasImpl, { ...props }) });
 }
 
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var _a;
+const INTERNAL_DATA = Symbol("ScopedStore.data");
+_a = INTERNAL_DATA;
+const _ScopedStore = class _ScopedStore {
+  constructor(data) {
+    __publicField(this, _a);
+    this[INTERNAL_DATA] = data;
+    return new Proxy(this, {
+      get(target, prop, receiver) {
+        if (typeof prop === "string") {
+          if (prop === "scope" || prop === "has" || prop === "keys") {
+            return Reflect.get(target, prop, receiver);
+          }
+          return target[INTERNAL_DATA][prop];
+        }
+        return Reflect.get(target, prop, receiver);
+      },
+      has(target, prop) {
+        return typeof prop === "string" ? prop in target[INTERNAL_DATA] : Reflect.has(target, prop);
+      },
+      ownKeys(target) {
+        return Reflect.ownKeys(target[INTERNAL_DATA]);
+      },
+      getOwnPropertyDescriptor(target, prop) {
+        if (typeof prop === "string" && prop in target[INTERNAL_DATA]) {
+          return {
+            configurable: true,
+            enumerable: true,
+            value: target[INTERNAL_DATA][prop]
+          };
+        }
+        return void 0;
+      }
+    });
+  }
+  /**
+   * Access a nested scope by key.
+   * If the key doesn't exist or isn't a scope object, returns an empty ScopedStore.
+   */
+  scope(key) {
+    const data = this[INTERNAL_DATA][key];
+    return new _ScopedStore(
+      data && typeof data === "object" ? data : {}
+    );
+  }
+  /**
+   * Check if a key exists in the store.
+   */
+  has(key) {
+    return key in this[INTERNAL_DATA];
+  }
+  /**
+   * Get all keys in the store.
+   */
+  keys() {
+    return Object.keys(this[INTERNAL_DATA]);
+  }
+};
+let ScopedStore = _ScopedStore;
+function createScopedStore(data) {
+  return new ScopedStore(data);
+}
+
 function addTexture(set, key, value) {
   set((state) => {
     const newMap = new Map(state.textures);
@@ -14788,21 +15316,87 @@ function useCompareMemoize(value, deep) {
 const isUniformNode$1 = (value) => value !== null && typeof value === "object" && "value" in value && "uuid" in value;
 function useUniforms(creatorOrScope, scope) {
   const store = useStore();
+  const removeUniforms2 = useCallback(
+    (names, targetScope) => {
+      const nameArray = Array.isArray(names) ? names : [names];
+      store.setState((state) => {
+        if (targetScope) {
+          const currentScope = { ...state.uniforms[targetScope] };
+          for (const name of nameArray) delete currentScope[name];
+          return { uniforms: { ...state.uniforms, [targetScope]: currentScope } };
+        }
+        const uniforms2 = { ...state.uniforms };
+        for (const name of nameArray) if (isUniformNode$1(uniforms2[name])) delete uniforms2[name];
+        return { uniforms: uniforms2 };
+      });
+    },
+    [store]
+  );
+  const clearUniforms = useCallback(
+    (targetScope) => {
+      store.setState((state) => {
+        if (targetScope && targetScope !== "root") {
+          const { [targetScope]: _, ...rest } = state.uniforms;
+          return { uniforms: rest };
+        }
+        if (targetScope === "root") {
+          const uniforms2 = {};
+          for (const [key, value] of Object.entries(state.uniforms)) {
+            if (!isUniformNode$1(value)) uniforms2[key] = value;
+          }
+          return { uniforms: uniforms2 };
+        }
+        return { uniforms: {} };
+      });
+    },
+    [store]
+  );
+  const rebuildUniforms = useCallback(
+    (targetScope) => {
+      store.setState((state) => {
+        let newUniforms = state.uniforms;
+        if (targetScope && targetScope !== "root") {
+          const { [targetScope]: _, ...rest } = state.uniforms;
+          newUniforms = rest;
+        } else if (targetScope === "root") {
+          newUniforms = {};
+          for (const [key, value] of Object.entries(state.uniforms)) {
+            if (!isUniformNode$1(value)) newUniforms[key] = value;
+          }
+        } else {
+          newUniforms = {};
+        }
+        return { uniforms: newUniforms, _hmrVersion: state._hmrVersion + 1 };
+      });
+    },
+    [store]
+  );
   const inputForMemoization = useMemo(() => {
-    return is.fun(creatorOrScope) ? creatorOrScope(store.getState()) : creatorOrScope;
+    if (is.fun(creatorOrScope)) {
+      const state = store.getState();
+      const wrappedState = {
+        ...state,
+        uniforms: createScopedStore(state.uniforms),
+        nodes: createScopedStore(state.nodes)
+      };
+      return creatorOrScope(wrappedState);
+    }
+    return creatorOrScope;
   }, [creatorOrScope, store]);
   const memoizedInput = useCompareMemoize(inputForMemoization);
-  return useMemo(() => {
-    const state = store.getState();
-    const set = store.setState;
+  const isReader = memoizedInput === void 0 || typeof memoizedInput === "string";
+  const storeUniforms = useThree((s) => s.uniforms);
+  const uniforms = useMemo(() => {
     if (memoizedInput === void 0) {
-      return state.uniforms;
+      return storeUniforms;
     }
     if (typeof memoizedInput === "string") {
-      const scopeData = state.uniforms[memoizedInput];
+      const scopeData = storeUniforms[memoizedInput];
       if (scopeData && !isUniformNode$1(scopeData)) return scopeData;
       return {};
     }
+    const state = store.getState();
+    const set = store.setState;
     if (typeof memoizedInput !== "object" || memoizedInput === null) {
       throw new Error("Invalid uniform input");
     }
@@ -14838,44 +15432,49 @@ function useUniforms(creatorOrScope, scope) {
         set((s) => ({
           uniforms: {
             ...s.uniforms,
-            [scope]: {
-              ...s.uniforms[scope],
-              ...result
-            }
+            [scope]: { ...s.uniforms[scope], ...result }
           }
         }));
       } else {
-        set((s) => ({
-          uniforms: {
-            ...s.uniforms,
-            ...result
-          }
-        }));
+        set((s) => ({ uniforms: { ...s.uniforms, ...result } }));
       }
     }
     return result;
-  }, [store, memoizedInput, scope]);
+  }, [
+    store,
+    memoizedInput,
+    scope,
+    // Only include storeUniforms in deps for reader modes to enable reactivity
+    isReader ? storeUniforms : null
+  ]);
+  return { ...uniforms, removeUniforms: removeUniforms2, clearUniforms, rebuildUniforms };
+}
+function rebuildAllUniforms(store, scope) {
+  store.setState((state) => {
+    let newUniforms = state.uniforms;
+    if (scope && scope !== "root") {
+      const { [scope]: _, ...rest } = state.uniforms;
+      newUniforms = rest;
+    } else if (scope === "root") {
+      newUniforms = {};
+      for (const [key, value] of Object.entries(state.uniforms)) {
+        if (!isUniformNode$1(value)) newUniforms[key] = value;
+      }
+    } else {
+      newUniforms = {};
+    }
+    return { uniforms: newUniforms, _hmrVersion: state._hmrVersion + 1 };
+  });
 }
 function removeUniforms(set, names, scope) {
   set((state) => {
     if (scope) {
       const currentScope = { ...state.uniforms[scope] };
-      for (const name of names) {
-        delete currentScope[name];
-      }
-      return {
-        uniforms: {
-          ...state.uniforms,
-          [scope]: currentScope
-        }
-      };
+      for (const name of names) delete currentScope[name];
+      return { uniforms: { ...state.uniforms, [scope]: currentScope } };
     }
     const uniforms = { ...state.uniforms };
-    for (const name of names) {
-      if (isUniformNode$1(uniforms[name])) {
-        delete uniforms[name];
-      }
-    }
+    for (const name of names) if (isUniformNode$1(uniforms[name])) delete uniforms[name];
     return { uniforms };
   });
 }
@@ -14889,9 +15488,7 @@ function clearRootUniforms(set) {
   set((state) => {
     const uniforms = {};
     for (const [key, value] of Object.entries(state.uniforms)) {
-      if (!isUniformNode$1(value)) {
-        uniforms[key] = value;
-      }
+      if (!isUniformNode$1(value)) uniforms[key] = value;
     }
     return { uniforms };
   });
@@ -14966,21 +15563,82 @@ function useUniform(name, value) {
 const isTSLNode = (value) => value !== null && typeof value === "object" && ("uuid" in value || "nodeType" in value);
 function useNodes(creatorOrScope, scope) {
   const store = useStore();
-  return useMemo(() => {
-    const state = store.getState();
-    const set = store.setState;
+  const removeNodes2 = useCallback(
+    (names, targetScope) => {
+      const nameArray = Array.isArray(names) ? names : [names];
+      store.setState((state) => {
+        if (targetScope) {
+          const currentScope = { ...state.nodes[targetScope] };
+          for (const name of nameArray) delete currentScope[name];
+          return { nodes: { ...state.nodes, [targetScope]: currentScope } };
+        }
+        const nodes2 = { ...state.nodes };
+        for (const name of nameArray) if (isTSLNode(nodes2[name])) delete nodes2[name];
+        return { nodes: nodes2 };
+      });
+    },
+    [store]
+  );
+  const clearNodes = useCallback(
+    (targetScope) => {
+      store.setState((state) => {
+        if (targetScope && targetScope !== "root") {
+          const { [targetScope]: _, ...rest } = state.nodes;
+          return { nodes: rest };
+        }
+        if (targetScope === "root") {
+          const nodes2 = {};
+          for (const [key, value] of Object.entries(state.nodes)) {
+            if (!isTSLNode(value)) nodes2[key] = value;
+          }
+          return { nodes: nodes2 };
+        }
+        return { nodes: {} };
+      });
+    },
+    [store]
+  );
+  const rebuildNodes = useCallback(
+    (targetScope) => {
+      store.setState((state) => {
+        let newNodes = state.nodes;
+        if (targetScope && targetScope !== "root") {
+          const { [targetScope]: _, ...rest } = state.nodes;
+          newNodes = rest;
+        } else if (targetScope === "root") {
+          newNodes = {};
+          for (const [key, value] of Object.entries(state.nodes)) {
+            if (!isTSLNode(value)) newNodes[key] = value;
+          }
+        } else {
+          newNodes = {};
+        }
+        return { nodes: newNodes, _hmrVersion: state._hmrVersion + 1 };
+      });
+    },
+    [store]
+  );
+  const isReader = creatorOrScope === void 0 || typeof creatorOrScope === "string";
+  const storeNodes = useThree((s) => s.nodes);
+  const hmrVersion = useThree((s) => s._hmrVersion);
+  const nodes = useMemo(() => {
     if (creatorOrScope === void 0) {
-      return state.nodes;
+      return storeNodes;
     }
     if (typeof creatorOrScope === "string") {
-      const scopeData = state.nodes[creatorOrScope];
-      if (scopeData && !isTSLNode(scopeData)) {
-        return scopeData;
-      }
+      const scopeData = storeNodes[creatorOrScope];
+      if (scopeData && !isTSLNode(scopeData)) return scopeData;
       return {};
     }
+    const state = store.getState();
+    const set = store.setState;
     const creator = creatorOrScope;
-    const created = creator(state);
+    const wrappedState = {
+      ...state,
+      uniforms: createScopedStore(state.uniforms),
+      nodes: createScopedStore(state.nodes)
+    };
+    const created = creator(wrappedState);
     const result = {};
     let hasNewNodes = false;
     if (scope) {
@@ -14989,9 +15647,7 @@ function useNodes(creatorOrScope, scope) {
         if (currentScope[name]) {
           result[name] = currentScope[name];
         } else {
-          if (typeof node.label === "function") {
-            node.setName(`${scope}.${name}`);
-          }
+          if (typeof node.label === "function") node.setName(`${scope}.${name}`);
           result[name] = node;
           hasNewNodes = true;
         }
@@ -15000,10 +15656,7 @@ function useNodes(creatorOrScope, scope) {
         set((s) => ({
           nodes: {
             ...s.nodes,
-            [scope]: {
-              ...s.nodes[scope],
-              ...result
-            }
+            [scope]: { ...s.nodes[scope], ...result }
           }
         }));
       }
@@ -15014,44 +15667,52 @@ function useNodes(creatorOrScope, scope) {
       if (existing && isTSLNode(existing)) {
         result[name] = existing;
       } else {
-        if (typeof node.label === "function") {
-          node.setName(name);
-        }
+        if (typeof node.label === "function") node.setName(name);
         result[name] = node;
         hasNewNodes = true;
       }
     }
     if (hasNewNodes) {
-      set((s) => ({
-        nodes: {
-          ...s.nodes,
-          ...result
-        }
-      }));
+      set((s) => ({ nodes: { ...s.nodes, ...result } }));
     }
     return result;
-  }, [store, typeof creatorOrScope === "string" ? creatorOrScope : scope]);
+  }, [
+    store,
+    typeof creatorOrScope === "string" ? creatorOrScope : scope,
+    // Only include storeNodes in deps for reader modes to enable reactivity
+    // Creator mode intentionally excludes it to avoid re-running creator on unrelated changes
+    isReader ? storeNodes : null,
+    // Include hmrVersion for creator modes to allow rebuildNodes() to bust the cache
+    isReader ? null : hmrVersion
+  ]);
+  return { ...nodes, removeNodes: removeNodes2, clearNodes, rebuildNodes };
+}
+function rebuildAllNodes(store, scope) {
+  store.setState((state) => {
+    let newNodes = state.nodes;
+    if (scope && scope !== "root") {
+      const { [scope]: _, ...rest } = state.nodes;
+      newNodes = rest;
+    } else if (scope === "root") {
+      newNodes = {};
+      for (const [key, value] of Object.entries(state.nodes)) {
+        if (!isTSLNode(value)) newNodes[key] = value;
+      }
+    } else {
+      newNodes = {};
+    }
+    return { nodes: newNodes, _hmrVersion: state._hmrVersion + 1 };
+  });
 }
 function removeNodes(set, names, scope) {
   set((state) => {
     if (scope) {
       const currentScope = { ...state.nodes[scope] };
-      for (const name of names) {
-        delete currentScope[name];
-      }
-      return {
-        nodes: {
-          ...state.nodes,
-          [scope]: currentScope
-        }
-      };
+      for (const name of names) delete currentScope[name];
+      return { nodes: { ...state.nodes, [scope]: currentScope } };
     }
     const nodes = { ...state.nodes };
-    for (const name of names) {
-      if (isTSLNode(nodes[name])) {
-        delete nodes[name];
-      }
-    }
+    for (const name of names) if (isTSLNode(nodes[name])) delete nodes[name];
     return { nodes };
   });
 }
@@ -15065,9 +15726,7 @@ function clearRootNodes(set) {
   set((state) => {
     const nodes = {};
     for (const [key, value] of Object.entries(state.nodes)) {
-      if (!isTSLNode(value)) {
-        nodes[key] = value;
-      }
+      if (!isTSLNode(value)) nodes[key] = value;
     }
     return { nodes };
   });
@@ -15079,7 +15738,12 @@ function useLocalNodes(creator) {
   const textures = useThree((s) => s.textures);
   return useMemo(() => {
     const state = store.getState();
-    return creator(state);
+    const wrappedState = {
+      ...state,
+      uniforms: createScopedStore(state.uniforms),
+      nodes: createScopedStore(state.nodes)
+    };
+    return creator(wrappedState);
   }, [store, creator, uniforms, nodes, textures]);
 }
 
@@ -15093,6 +15757,10 @@ function usePostProcessing(mainCB, setupCB) {
   mainCBRef.current = mainCB;
   setupCBRef.current = setupCB;
   const [rebuildVersion, setRebuildVersion] = useState(0);
+  useEffect(() => {
+    callbacksRanRef.current = false;
+    scenePassCacheRef.current = null;
+  }, []);
   const clearPasses = useCallback(() => {
     store.setState({ passes: {} });
   }, [store]);
@@ -15174,4 +15842,4 @@ function usePostProcessing(mainCB, setupCB) {
 
 extend(THREE);
 
-export { Block, Canvas, ErrorBoundary, IsObject, R3F_BUILD_LEGACY, R3F_BUILD_WEBGPU, REACT_INTERNAL_PROPS, RESERVED_PROPS, Scheduler, Texture, _roots, act, addAfterEffect, addEffect, addTail, advance, applyProps, attach, buildGraph, calculateDpr, clearNodeScope, clearRootNodes, clearRootUniforms, clearScope, context, createEvents, createPointerEvents, createPortal, createRoot, createStore, createTextureOperations, detach, diffProps, dispose, createPointerEvents as events, extend, findInitialRoot, flushSync, getInstanceProps, getRootState, getScheduler, getUuidPrefix, hasConstructor, invalidate, invalidateInstance, is, isColorRepresentation, isCopyable, isObject3D, isOrthographicCamera, isRef, isRenderer, isTexture, isVectorLike, prepare, reconciler, removeInteractivity, removeNodes, removeUniforms, resolve, unmountComponentAtNode, updateCamera, useBridge, useFrame, useGraph, useInstanceHandle, useIsomorphicLayoutEffect, useLoader, useLocalNodes, useMutableCallback, useNodes, usePostProcessing, useStore, useTexture, useTextures, useThree, useUniform, useUniforms };
+export { Block, Canvas, ErrorBoundary, IsObject, R3F_BUILD_LEGACY, R3F_BUILD_WEBGPU, REACT_INTERNAL_PROPS, RESERVED_PROPS, Scheduler, Texture, _roots, act, addAfterEffect, addEffect, addTail, advance, applyProps, attach, buildGraph, calculateDpr, clearNodeScope, clearRootNodes, clearRootUniforms, clearScope, context, createEvents, createPointerEvents, createPortal, createRoot, createScopedStore, createStore, createTextureOperations, detach, diffProps, dispose, createPointerEvents as events, extend, findInitialRoot, flushSync, getInstanceProps, getRootState, getScheduler, getUuidPrefix, hasConstructor, invalidate, invalidateInstance, is, isColorRepresentation, isCopyable, isObject3D, isOrthographicCamera, isRef, isRenderer, isTexture, isVectorLike, prepare, rebuildAllNodes, rebuildAllUniforms, reconciler, removeInteractivity, removeNodes, removeUniforms, resolve, unmountComponentAtNode, updateCamera, updateFrustum, useBridge, useFrame, useGraph, useInstanceHandle, useIsomorphicLayoutEffect, useLoader, useLocalNodes, useMutableCallback, useNodes, usePostProcessing, useRenderTarget, useStore, useTexture, useTextures, useThree, useUniform, useUniforms };