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

package/dist/index.cjs

@@ -11,6 +11,7 @@ const Tb = require('scheduler');
 const traditional = require('zustand/traditional');
 const suspendReact = require('suspend-react');
 
+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) {
@@ -51,6 +52,8 @@ const THREE = /*#__PURE__*/_mergeNamespaces({
   Inspector: Inspector_js.Inspector,
   R3F_BUILD_LEGACY: R3F_BUILD_LEGACY,
   R3F_BUILD_WEBGPU: R3F_BUILD_WEBGPU,
+  RenderTargetCompat: webgpu.RenderTarget,
+  WebGLRenderTarget: three.WebGLRenderTarget,
   WebGLRenderer: three.WebGLRenderer
 }, [webgpu__namespace]);
 
@@ -159,6 +162,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) {
@@ -239,6 +249,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",
@@ -253,6 +462,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"];
@@ -339,7 +549,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;
@@ -347,6 +557,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)) {
@@ -383,6 +599,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";
@@ -417,6 +644,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) {
@@ -473,13 +701,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);
       }
     }
@@ -509,12 +738,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,
@@ -799,8 +1028,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();
@@ -831,6 +1073,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,
@@ -882,10 +1126,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);
@@ -902,6 +1174,9 @@ const createStore = (invalidate, advance) => {
       textures: /* @__PURE__ */ new Map(),
       postProcessing: null,
       passes: {},
+      _hmrVersion: 0,
+      _sizeImperative: false,
+      _sizeProps: null,
       previousRoot: void 0,
       internal: {
         // Events
@@ -912,6 +1187,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,
@@ -997,7 +1279,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));
@@ -1094,8 +1384,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`);
     }
@@ -1361,6 +1652,10 @@ const _Scheduler = class _Scheduler {
     __publicField(this, "jobStateListeners", /* @__PURE__ */ new Map());
     __publicField(this, "pendingFrames", 0);
     __publicField(this, "_frameloop", "always");
+    //* Independent Mode & Error Handling State ================================
+    __publicField(this, "_independent", false);
+    __publicField(this, "errorHandler", null);
+    __publicField(this, "rootReadyCallbacks", /* @__PURE__ */ new Set());
     //* Core Loop Execution Methods ================================
     /**
      * Main RAF loop callback.
@@ -1383,6 +1678,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.
@@ -1431,29 +1732,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);
   }
@@ -1473,7 +1788,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 ================================
   /**
@@ -1833,9 +2201,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,
@@ -1845,6 +2213,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)));
     }
   }
   /**
@@ -1886,7 +2255,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
@@ -1898,10 +2267,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,
@@ -1914,7 +2282,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)));
       }
     }
   }
@@ -1999,8 +2367,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(_Scheduler, "INSTANCE_KEY", Symbol.for("@react-three/fiber.scheduler"));
 let Scheduler = _Scheduler;
 const getScheduler = () => Scheduler.get();
 if (hmrData) {
@@ -2008,11 +2379,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,
@@ -2032,55 +2401,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(
@@ -2095,7 +2480,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,
@@ -2103,7 +2488,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.
@@ -2351,6 +2736,18 @@ 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 isLegacy ? new three.WebGLRenderTarget(w, h, options) : 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!");
@@ -2402,24 +2799,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) {
@@ -3491,7 +3878,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 {
           }
         };
       }
@@ -4145,7 +4531,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;
         }
@@ -6566,10 +6951,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;
@@ -6938,17 +7320,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) {
@@ -12715,10 +13087,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;
@@ -13686,15 +14055,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) {
@@ -13703,7 +14063,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;
@@ -13720,10 +14081,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!");
 }
@@ -14174,14 +14536,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,
@@ -14201,9 +14563,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 defaultGLProps = {
         canvas,
         powerPreference: "high-performance",
@@ -14231,7 +14596,9 @@ function createRoot(canvas) {
         state.set({ isLegacy: true, gl: renderer, renderer });
       } else if (!wantsGL && !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;
@@ -14241,8 +14608,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;
@@ -14279,6 +14647,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) });
@@ -14291,9 +14661,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);
@@ -14306,6 +14681,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;
@@ -14359,20 +14738,22 @@ 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;
+        }
       }
       {
         const legacyChanged = legacy !== lastConfiguredProps.legacy;
         const linearChanged = linear !== lastConfiguredProps.linear;
         const flatChanged = flat !== lastConfiguredProps.flat;
         if (legacyChanged) {
-          if (legacy)
+          if (legacy) {
             notifyDepreciated({
               heading: "Legacy Color Management",
               body: "Legacy color management is deprecated and will be removed in a future version.",
               link: "https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe"
             });
+          }
         }
         if (legacyChanged) {
           webgpu.ColorManagement.enabled = !legacy;
@@ -14394,8 +14775,9 @@ function createRoot(canvas) {
         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)) {
@@ -14406,7 +14788,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();
@@ -14434,6 +14846,8 @@ function createRoot(canvas) {
             rootId: newRootId,
             unregisterRoot: () => {
               unregisterRoot();
+              unregisterFrustum();
+              unregisterVisibility();
               unregisterRender();
             },
             scheduler
@@ -14491,6 +14905,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();
@@ -14630,6 +15045,9 @@ function CanvasImpl({
   onDragOverMissed,
   onDropMissed,
   onCreated,
+  hmr,
+  width,
+  height,
   ...props
 }) {
   React__namespace.useMemo(() => extend(THREE), []);
@@ -14650,7 +15068,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);
@@ -14669,8 +15096,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({
@@ -14688,7 +15130,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),
@@ -14711,15 +15155,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();
     }
@@ -14740,6 +15178,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",
@@ -14819,6 +15284,7 @@ exports.removeInteractivity = removeInteractivity;
 exports.resolve = resolve;
 exports.unmountComponentAtNode = unmountComponentAtNode;
 exports.updateCamera = updateCamera;
+exports.updateFrustum = updateFrustum;
 exports.useBridge = useBridge;
 exports.useFrame = useFrame;
 exports.useGraph = useGraph;
@@ -14826,6 +15292,7 @@ exports.useInstanceHandle = useInstanceHandle;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.useLoader = useLoader;
 exports.useMutableCallback = useMutableCallback;
+exports.useRenderTarget = useRenderTarget;
 exports.useStore = useStore;
 exports.useTexture = useTexture;
 exports.useTextures = useTextures;