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

package/dist/webgpu/index.cjs

@@ -13,6 +13,7 @@ const lite = require('dequal/lite');
 require('zustand/shallow');
 const tsl = require('three/tsl');
 
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
 
 function _interopNamespaceCompat(e) {
@@ -54,18 +55,21 @@ const WebGLRenderer = class WebGLRenderer2 {
     );
   }
 };
+const WebGLRenderTarget = null;
 
 const THREE = /*#__PURE__*/_mergeNamespaces({
   __proto__: null,
   Inspector: Inspector_js.Inspector,
   R3F_BUILD_LEGACY: R3F_BUILD_LEGACY,
   R3F_BUILD_WEBGPU: R3F_BUILD_WEBGPU,
+  RenderTargetCompat: webgpu.RenderTarget,
+  WebGLRenderTarget: WebGLRenderTarget,
   WebGLRenderer: WebGLRenderer
 }, [webgpu__namespace]);
 
-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__namespace["act"];
 const useIsomorphicLayoutEffect = /* @__PURE__ */ (() => typeof window !== "undefined" && (window.document?.createElement || window.navigator?.product === "ReactNative"))() ? React__namespace.useLayoutEffect : React__namespace.useEffect;
 function useMutableCallback(fn) {
@@ -97,7 +101,7 @@ const ErrorBoundary = /* @__PURE__ */ (() => {
   return _a = class extends React__namespace.Component {
     constructor() {
       super(...arguments);
-      __publicField$2(this, "state", { error: false });
+      __publicField$3(this, "state", { error: false });
     }
     componentDidCatch(err) {
       this.props.set(err);
@@ -105,7 +109,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 = {
@@ -168,6 +172,13 @@ function updateCamera(camera, size) {
   }
   camera.updateProjectionMatrix();
 }
+const frustumMatrix = new webgpu.Matrix4();
+function updateFrustum(camera, frustum) {
+  const target = frustum ?? new webgpu.Frustum();
+  frustumMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
+  target.setFromProjectionMatrix(frustumMatrix);
+  return target;
+}
 
 const REACT_INTERNAL_PROPS = ["children", "key", "ref"];
 function findInitialRoot(instance) {
@@ -248,6 +259,205 @@ function invalidateInstance(instance) {
   if (state && state.internal.frames === 0) state.invalidate();
 }
 
+const tempFrustum = new webgpu.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 webgpu.Node("float");
+  node.updateType = webgpu.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 webgpu.Group();
+    helperGroup.name = "__r3fInternal";
+    helperGroup.__r3fInternal = true;
+    rootScene.add(helperGroup);
+  }
+  const geometry = new webgpu.BoxGeometry(1, 1, 1);
+  const material = new webgpu.MeshBasicNodeMaterial({
+    transparent: true,
+    opacity: 0
+  });
+  const observerNode = nodeObject(createOcclusionObserverNode(store, uniform));
+  material.colorNode = observerNode;
+  material.needsUpdate = true;
+  const mesh = new webgpu.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",
@@ -262,6 +472,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"];
@@ -348,7 +559,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;
@@ -356,6 +567,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)) {
@@ -392,6 +609,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";
@@ -426,6 +654,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) {
@@ -482,13 +711,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);
       }
     }
@@ -518,12 +748,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,
@@ -808,8 +1038,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__namespace.createContext(null);
+const R3F_CONTEXT = Symbol.for("@react-three/fiber.context");
+const context = globalThis[R3F_CONTEXT] ?? (globalThis[R3F_CONTEXT] = React__namespace.createContext(null));
 const createStore = (invalidate, advance) => {
   const rootStore = traditional.createWithEqualityFn((set, get) => {
     const position = new webgpu.Vector3();
@@ -840,6 +1083,8 @@ const createStore = (invalidate, advance) => {
       gl: null,
       renderer: null,
       camera: null,
+      frustum: new webgpu.Frustum(),
+      autoUpdateFrustum: true,
       raycaster: null,
       events: { priority: 1, enabled: true, connected: false },
       scene: null,
@@ -891,10 +1136,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);
@@ -911,6 +1184,9 @@ const createStore = (invalidate, advance) => {
       textures: /* @__PURE__ */ new Map(),
       postProcessing: null,
       passes: {},
+      _hmrVersion: 0,
+      _sizeImperative: false,
+      _sizeProps: null,
       previousRoot: void 0,
       internal: {
         // Events
@@ -921,6 +1197,13 @@ const createStore = (invalidate, advance) => {
         initialHits: [],
         capturedMap: /* @__PURE__ */ new Map(),
         lastEvent: React__namespace.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,
@@ -1006,7 +1289,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));
@@ -1065,18 +1356,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 --------------------------------
@@ -1103,8 +1394,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`);
     }
@@ -1332,9 +1624,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;
@@ -1348,9 +1640,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,
@@ -1359,17 +1651,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.
@@ -1378,7 +1674,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") {
@@ -1392,6 +1688,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.
@@ -1440,29 +1742,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);
   }
@@ -1482,7 +1798,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 ================================
   /**
@@ -1842,9 +2211,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,
@@ -1854,6 +2223,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)));
     }
   }
   /**
@@ -1895,7 +2265,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
@@ -1907,10 +2277,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,
@@ -1923,7 +2292,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)));
       }
     }
   }
@@ -2008,8 +2377,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) {
@@ -2017,11 +2389,9 @@ if (hmrData) {
 }
 
 function useFrame(callback, priorityOrOptions) {
-  const store = useStore();
-  const getRootId = React__namespace.useCallback(() => {
-    const state = store.getState();
-    return state.internal.rootId;
-  }, [store]);
+  const store = React__namespace.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,
@@ -2041,55 +2411,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__namespace.useSyncExternalStore(
     // Subscribe function
     React__namespace.useCallback(
@@ -2104,7 +2490,7 @@ function useFrame(callback, priorityOrOptions) {
     React__namespace.useCallback(() => false, [])
   );
   const controls = React__namespace.useMemo(() => {
-    const scheduler = getScheduler();
+    const scheduler2 = getScheduler();
     return {
       /** The job's unique ID */
       id,
@@ -2112,7 +2498,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.
@@ -2360,6 +2746,16 @@ function useTextures() {
   }, [store]);
 }
 
+function useRenderTarget(width, height, options) {
+  const isLegacy = useThree((s) => s.isLegacy);
+  const size = useThree((s) => s.size);
+  return React.useMemo(() => {
+    const w = width ?? size.width;
+    const h = height ?? size.height;
+    return new webgpu.RenderTarget(w, h, options);
+  }, [width, height, size.width, size.height, options, isLegacy]);
+}
+
 function useStore() {
   const store = React.useContext(context);
   if (!store) throw new Error("R3F: Hooks can only be used within the Canvas component!");
@@ -2411,24 +2807,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) {
@@ -3500,7 +3886,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 {
           }
         };
       }
@@ -4154,7 +4539,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;
         }
@@ -6575,10 +6959,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__default, 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__default, 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;
@@ -6947,17 +7328,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) {
@@ -12724,10 +13095,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__default, 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__default, 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;
@@ -13695,15 +14063,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) {
@@ -13712,7 +14071,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;
@@ -13729,10 +14089,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!");
 }
@@ -14183,14 +14544,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,
@@ -14210,9 +14571,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
       };
@@ -14227,7 +14591,9 @@ function createRoot(canvas) {
       let renderer = state.internal.actualRenderer;
       if (!state.internal.actualRenderer) {
         renderer = await resolveRenderer(rendererConfig, defaultGPUProps, webgpu.WebGPURenderer);
-        await renderer.init();
+        if (!renderer.hasInitialized?.()) {
+          await renderer.init();
+        }
         const backend = renderer.backend;
         const isWebGPUBackend = backend && "isWebGPUBackend" in backend;
         state.internal.actualRenderer = renderer;
@@ -14237,8 +14603,9 @@ function createRoot(canvas) {
       if (!raycaster) state.set({ raycaster: raycaster = new webgpu.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;
@@ -14275,6 +14642,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) });
@@ -14287,9 +14656,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);
@@ -14302,6 +14676,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;
@@ -14355,15 +14733,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)) {
@@ -14374,7 +14754,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();
@@ -14402,6 +14812,8 @@ function createRoot(canvas) {
             rootId: newRootId,
             unregisterRoot: () => {
               unregisterRoot();
+              unregisterFrustum();
+              unregisterVisibility();
               unregisterRender();
             },
             scheduler
@@ -14459,6 +14871,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();
@@ -14598,6 +15011,9 @@ function CanvasImpl({
   onDragOverMissed,
   onDropMissed,
   onCreated,
+  hmr,
+  width,
+  height,
   ...props
 }) {
   React__namespace.useMemo(() => extend(THREE), []);
@@ -14618,7 +15034,16 @@ function CanvasImpl({
     };
   }, [resize, hasInitialSizeRef.current]);
   const [containerRef, containerRect] = useMeasure__default(measureConfig);
-  if (!hasInitialSizeRef.current && containerRect.width > 0 && containerRect.height > 0) {
+  const effectiveSize = React__namespace.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__namespace.useRef(null);
@@ -14637,8 +15062,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({
@@ -14656,7 +15096,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),
@@ -14679,15 +15121,9 @@ function CanvasImpl({
           }
         });
         if (!effectActiveRef.current || !root.current) return;
-        const store = root.current.render(
+        root.current.render(
           /* @__PURE__ */ jsxRuntime.jsx(Bridge, { children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { set: setError, children: /* @__PURE__ */ jsxRuntime.jsx(React__namespace.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.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();
     }
@@ -14708,6 +15144,33 @@ function CanvasImpl({
       };
     }
   }, []);
+  React__namespace.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 ({ url: (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href)) }) !== "undefined" && undefined) {
+      const hot = undefined;
+      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__ */ jsxRuntime.jsx(
     "div",
@@ -14730,6 +15193,72 @@ function Canvas(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(itsFine.FiberProvider, { children: /* @__PURE__ */ jsxRuntime.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);
@@ -14808,21 +15337,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 = React.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 = React.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 = React.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 = React.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 React.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 = React.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");
     }
@@ -14858,44 +15453,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 };
   });
 }
@@ -14909,9 +15509,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 };
   });
@@ -14986,21 +15584,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 React.useMemo(() => {
-    const state = store.getState();
-    const set = store.setState;
+  const removeNodes2 = React.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 = React.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 = React.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 = React.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) {
@@ -15009,9 +15668,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;
         }
@@ -15020,10 +15677,7 @@ function useNodes(creatorOrScope, scope) {
         set((s) => ({
           nodes: {
             ...s.nodes,
-            [scope]: {
-              ...s.nodes[scope],
-              ...result
-            }
+            [scope]: { ...s.nodes[scope], ...result }
           }
         }));
       }
@@ -15034,44 +15688,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 };
   });
 }
@@ -15085,9 +15747,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 };
   });
@@ -15099,7 +15759,12 @@ function useLocalNodes(creator) {
   const textures = useThree((s) => s.textures);
   return React.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]);
 }
 
@@ -15113,6 +15778,10 @@ function usePostProcessing(mainCB, setupCB) {
   mainCBRef.current = mainCB;
   setupCBRef.current = setupCB;
   const [rebuildVersion, setRebuildVersion] = React.useState(0);
+  React.useEffect(() => {
+    callbacksRanRef.current = false;
+    scenePassCacheRef.current = null;
+  }, []);
   const clearPasses = React.useCallback(() => {
     store.setState({ passes: {} });
   }, [store]);
@@ -15223,6 +15892,7 @@ exports.createEvents = createEvents;
 exports.createPointerEvents = createPointerEvents;
 exports.createPortal = createPortal;
 exports.createRoot = createRoot;
+exports.createScopedStore = createScopedStore;
 exports.createStore = createStore;
 exports.createTextureOperations = createTextureOperations;
 exports.detach = detach;
@@ -15249,6 +15919,8 @@ exports.isRenderer = isRenderer;
 exports.isTexture = isTexture;
 exports.isVectorLike = isVectorLike;
 exports.prepare = prepare;
+exports.rebuildAllNodes = rebuildAllNodes;
+exports.rebuildAllUniforms = rebuildAllUniforms;
 exports.reconciler = reconciler;
 exports.removeInteractivity = removeInteractivity;
 exports.removeNodes = removeNodes;
@@ -15256,6 +15928,7 @@ exports.removeUniforms = removeUniforms;
 exports.resolve = resolve;
 exports.unmountComponentAtNode = unmountComponentAtNode;
 exports.updateCamera = updateCamera;
+exports.updateFrustum = updateFrustum;
 exports.useBridge = useBridge;
 exports.useFrame = useFrame;
 exports.useGraph = useGraph;
@@ -15266,6 +15939,7 @@ exports.useLocalNodes = useLocalNodes;
 exports.useMutableCallback = useMutableCallback;
 exports.useNodes = useNodes;
 exports.usePostProcessing = usePostProcessing;
+exports.useRenderTarget = useRenderTarget;
 exports.useStore = useStore;
 exports.useTexture = useTexture;
 exports.useTextures = useTextures;