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

package/dist/webgpu/index.mjs

@@ -46,9 +46,9 @@ const THREE = /*#__PURE__*/_mergeNamespaces({
   WebGLRenderer: WebGLRenderer
 }, [webgpu]);
 
-var __defProp$2 = Object.defineProperty;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$2 = (obj, key, value) => __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$3 = Object.defineProperty;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$3 = (obj, key, value) => __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
 const act = React["act"];
 const useIsomorphicLayoutEffect = /* @__PURE__ */ (() => typeof window !== "undefined" && (window.document?.createElement || window.navigator?.product === "ReactNative"))() ? React.useLayoutEffect : React.useEffect;
 function useMutableCallback(fn) {
@@ -80,7 +80,7 @@ const ErrorBoundary = /* @__PURE__ */ (() => {
   return _a = class extends React.Component {
     constructor() {
       super(...arguments);
-      __publicField$2(this, "state", { error: false });
+      __publicField$3(this, "state", { error: false });
     }
     componentDidCatch(err) {
       this.props.set(err);
@@ -88,7 +88,7 @@ const ErrorBoundary = /* @__PURE__ */ (() => {
     render() {
       return this.state.error ? null : this.props.children;
     }
-  }, __publicField$2(_a, "getDerivedStateFromError", () => ({ error: true })), _a;
+  }, __publicField$3(_a, "getDerivedStateFromError", () => ({ error: true })), _a;
 })();
 
 const is = {
@@ -538,7 +538,7 @@ function applyProps(object, props) {
   const rootState = instance && findInitialRoot(instance).getState();
   const prevHandlers = instance?.eventCount;
   for (const prop in props) {
-    let value = props[prop];
+    const value = props[prop];
     if (RESERVED_PROPS.includes(prop)) continue;
     if (instance && EVENT_REGEX.test(prop)) {
       if (typeof value === "function") instance.handlers[prop] = value;
@@ -690,13 +690,14 @@ function createEvents(store) {
     for (const hit of hits) {
       let eventObject = hit.object;
       while (eventObject) {
-        if (eventObject.__r3f?.eventCount)
+        if (eventObject.__r3f?.eventCount) {
           intersections.push({ ...hit, eventObject });
+        }
         eventObject = eventObject.parent;
       }
     }
     if ("pointerId" in event && state.internal.capturedMap.has(event.pointerId)) {
-      for (let captureData of state.internal.capturedMap.get(event.pointerId).values()) {
+      for (const captureData of state.internal.capturedMap.get(event.pointerId).values()) {
         if (!duplicates.has(makeId(captureData.intersection))) intersections.push(captureData.intersection);
       }
     }
@@ -726,12 +727,12 @@ function createEvents(store) {
               releaseInternalPointerCapture(internal.capturedMap, hit.eventObject, captures, id);
             }
           };
-          let extractEventProps = {};
-          for (let prop in event) {
-            let property = event[prop];
+          const extractEventProps = {};
+          for (const prop in event) {
+            const property = event[prop];
             if (typeof property !== "function") extractEventProps[prop] = property;
           }
-          let raycastEvent = {
+          const raycastEvent = {
             ...hit,
             ...extractEventProps,
             pointer,
@@ -1114,10 +1115,38 @@ const createStore = (invalidate, advance) => {
         getCurrentViewport
       },
       setEvents: (events) => set((state2) => ({ ...state2, events: { ...state2.events, ...events } })),
-      setSize: (width, height, top = 0, left = 0) => {
-        const camera = get().camera;
-        const size = { width, height, top, left };
-        set((state2) => ({ size, viewport: { ...state2.viewport, ...getCurrentViewport(camera, defaultTarget, size) } }));
+      setSize: (width, height, top, left) => {
+        const state2 = get();
+        if (width === void 0) {
+          set({ _sizeImperative: false });
+          if (state2._sizeProps) {
+            const { width: propW, height: propH } = state2._sizeProps;
+            if (propW !== void 0 || propH !== void 0) {
+              const currentSize = state2.size;
+              const newSize = {
+                width: propW ?? currentSize.width,
+                height: propH ?? currentSize.height,
+                top: currentSize.top,
+                left: currentSize.left
+              };
+              set((s) => ({
+                size: newSize,
+                viewport: { ...s.viewport, ...getCurrentViewport(state2.camera, defaultTarget, newSize) }
+              }));
+            }
+          }
+          return;
+        }
+        const w = width;
+        const h = height ?? width;
+        const t = top ?? state2.size.top;
+        const l = left ?? state2.size.left;
+        const size = { width: w, height: h, top: t, left: l };
+        set((s) => ({
+          size,
+          viewport: { ...s.viewport, ...getCurrentViewport(state2.camera, defaultTarget, size) },
+          _sizeImperative: true
+        }));
       },
       setDpr: (dpr) => set((state2) => {
         const resolved = calculateDpr(dpr);
@@ -1134,6 +1163,9 @@ const createStore = (invalidate, advance) => {
       textures: /* @__PURE__ */ new Map(),
       postProcessing: null,
       passes: {},
+      _hmrVersion: 0,
+      _sizeImperative: false,
+      _sizeProps: null,
       previousRoot: void 0,
       internal: {
         // Events
@@ -1303,18 +1335,18 @@ useLoader.clear = function(loader, input) {
 };
 useLoader.loader = getLoader;
 
-var __defProp$1 = Object.defineProperty;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$1 = (obj, key, value) => __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$2 = Object.defineProperty;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$2 = (obj, key, value) => __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
 const DEFAULT_PHASES = ["start", "input", "physics", "update", "render", "finish"];
 class PhaseGraph {
   constructor() {
     /** Ordered list of phase nodes */
-    __publicField$1(this, "phases", []);
+    __publicField$2(this, "phases", []);
     /** Quick lookup by name */
-    __publicField$1(this, "phaseMap", /* @__PURE__ */ new Map());
+    __publicField$2(this, "phaseMap", /* @__PURE__ */ new Map());
     /** Cached ordered names (invalidated on changes) */
-    __publicField$1(this, "orderedNamesCache", null);
+    __publicField$2(this, "orderedNamesCache", null);
     this.initializeDefaultPhases();
   }
   //* Initialization --------------------------------
@@ -1341,8 +1373,9 @@ class PhaseGraph {
     const node = { name, isAutoGenerated: false };
     let insertIndex = this.phases.length;
     const targetIndex = this.getPhaseIndex(before ?? after);
-    if (targetIndex !== -1) insertIndex = before ? targetIndex : targetIndex + 1;
-    else {
+    if (targetIndex !== -1) {
+      insertIndex = before ? targetIndex : targetIndex + 1;
+    } else {
       const constraintType = before ? "before" : "after";
       console.warn(`[useFrame] Phase "${before ?? after}" not found for '${constraintType}' constraint`);
     }
@@ -1570,9 +1603,9 @@ function resetJobTiming(job) {
   job.lastRun = void 0;
 }
 
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$1 = Object.defineProperty;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$1 = (obj, key, value) => __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
 const hmrData = (() => {
   if (typeof process !== "undefined" && process.env.NODE_ENV === "test") return void 0;
   if (typeof import_meta_hot !== "undefined") return import_meta_hot;
@@ -1586,9 +1619,9 @@ const _Scheduler = class _Scheduler {
   //* Constructor ================================
   constructor() {
     //* Critical State ================================
-    __publicField(this, "roots", /* @__PURE__ */ new Map());
-    __publicField(this, "phaseGraph");
-    __publicField(this, "loopState", {
+    __publicField$1(this, "roots", /* @__PURE__ */ new Map());
+    __publicField$1(this, "phaseGraph");
+    __publicField$1(this, "loopState", {
       running: false,
       rafHandle: null,
       lastTime: null,
@@ -1597,21 +1630,21 @@ const _Scheduler = class _Scheduler {
       elapsedTime: 0,
       createdAt: performance.now()
     });
-    __publicField(this, "stoppedTime", 0);
+    __publicField$1(this, "stoppedTime", 0);
     //* Private State ================================
-    __publicField(this, "nextRootIndex", 0);
-    __publicField(this, "globalBeforeJobs", /* @__PURE__ */ new Map());
-    __publicField(this, "globalAfterJobs", /* @__PURE__ */ new Map());
-    __publicField(this, "nextGlobalIndex", 0);
-    __publicField(this, "idleCallbacks", /* @__PURE__ */ new Set());
-    __publicField(this, "nextJobIndex", 0);
-    __publicField(this, "jobStateListeners", /* @__PURE__ */ new Map());
-    __publicField(this, "pendingFrames", 0);
-    __publicField(this, "_frameloop", "always");
+    __publicField$1(this, "nextRootIndex", 0);
+    __publicField$1(this, "globalBeforeJobs", /* @__PURE__ */ new Map());
+    __publicField$1(this, "globalAfterJobs", /* @__PURE__ */ new Map());
+    __publicField$1(this, "nextGlobalIndex", 0);
+    __publicField$1(this, "idleCallbacks", /* @__PURE__ */ new Set());
+    __publicField$1(this, "nextJobIndex", 0);
+    __publicField$1(this, "jobStateListeners", /* @__PURE__ */ new Map());
+    __publicField$1(this, "pendingFrames", 0);
+    __publicField$1(this, "_frameloop", "always");
     //* Independent Mode & Error Handling State ================================
-    __publicField(this, "_independent", false);
-    __publicField(this, "errorHandler", null);
-    __publicField(this, "rootReadyCallbacks", /* @__PURE__ */ new Set());
+    __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.
@@ -1620,7 +1653,7 @@ const _Scheduler = class _Scheduler {
      * @returns {void}
      * @private
      */
-    __publicField(this, "loop", (timestamp) => {
+    __publicField$1(this, "loop", (timestamp) => {
       if (!this.loopState.running) return;
       this.executeFrame(timestamp);
       if (this._frameloop === "demand") {
@@ -2327,7 +2360,7 @@ const _Scheduler = class _Scheduler {
 //* 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"));
+__publicField$1(_Scheduler, "INSTANCE_KEY", Symbol.for("@react-three/fiber.scheduler"));
 let Scheduler = _Scheduler;
 const getScheduler = () => Scheduler.get();
 if (hmrData) {
@@ -2753,24 +2786,14 @@ function advance(timestamp, runGlobalEffects = true, state, frame) {
   getScheduler().step(timestamp);
 }
 
-const version = "10.0.0-alpha.1";
+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) {
@@ -3842,7 +3865,6 @@ Error generating stack: ` + l.message + `
             if (J === cl || J === jc) throw J;
             var Ge = Yn(29, J, null, P.mode);
             return Ge.lanes = H, Ge.return = P, Ge;
-          } finally {
           }
         };
       }
@@ -4496,7 +4518,6 @@ Error generating stack: ` + l.message + `
             var h = r.lastRenderedState, y = d(h, a);
             if (c.hasEagerState = true, c.eagerState = y, jn(y, h)) return go(t, r, c, 0), Ne === null && Bn(), false;
           } catch {
-          } finally {
           }
           if (a = yo(t, r, c, l), a !== null) return nt(a, t, l), ns(a, r, l), true;
         }
@@ -6917,10 +6938,7 @@ Error generating stack: ` + l.message + `
       function vr(t, r) {
         Sf(t, r), (t = t.alternate) && Sf(t, r);
       }
-      var ie = {}, Fm = React__default, tt = Tb, Lt = Object.assign, hc = Symbol.for("react.element"), zs = Symbol.for("react.transitional.element"), sa = Symbol.for("react.portal"), $a = Symbol.for("react.fragment"), kf = Symbol.for("react.strict_mode"), Cs = Symbol.for("react.profiler"), mc = Symbol.for("react.consumer"), Io = Symbol.for("react.context"), Zi = Symbol.for("react.forward_ref"), Va = Symbol.for("react.suspense"), Te = Symbol.for("react.suspense_list"), wf = Symbol.for("react.memo"), ua = Symbol.for("react.lazy");
-      var gc = Symbol.for("react.activity");
-      var $r = Symbol.for("react.memo_cache_sentinel");
-      var Pf = Symbol.iterator, xf = Symbol.for("react.client.reference"), ca = Array.isArray, M = Fm.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Yp = m.rendererVersion, zf = m.rendererPackageName, Cf = m.extraDevToolsConfig, Ts = m.getPublicInstance, Hm = m.getRootHostContext, Xp = m.getChildHostContext, Am = m.prepareForCommit, _s = m.resetAfterCommit, Vr = m.createInstance;
+      var ie = {}, Fm = React__default, tt = Tb, Lt = Object.assign, hc = Symbol.for("react.element"), zs = Symbol.for("react.transitional.element"), sa = Symbol.for("react.portal"), $a = Symbol.for("react.fragment"), kf = Symbol.for("react.strict_mode"), Cs = Symbol.for("react.profiler"), mc = Symbol.for("react.consumer"), Io = Symbol.for("react.context"), Zi = Symbol.for("react.forward_ref"), Va = Symbol.for("react.suspense"), Te = Symbol.for("react.suspense_list"), wf = Symbol.for("react.memo"), ua = Symbol.for("react.lazy"), gc = Symbol.for("react.activity"), $r = Symbol.for("react.memo_cache_sentinel"), Pf = Symbol.iterator, xf = Symbol.for("react.client.reference"), ca = Array.isArray, M = Fm.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Yp = m.rendererVersion, zf = m.rendererPackageName, Cf = m.extraDevToolsConfig, Ts = m.getPublicInstance, Hm = m.getRootHostContext, Xp = m.getChildHostContext, Am = m.prepareForCommit, _s = m.resetAfterCommit, Vr = m.createInstance;
       m.cloneMutableInstance;
       var yc = m.appendInitialChild, Kp = m.finalizeInitialChildren, Rs = m.shouldSetTextContent, bc = m.createTextInstance;
       m.cloneMutableTextInstance;
@@ -7289,17 +7307,7 @@ No matching component was found for:
     }, Tt.exports.default = Tt.exports, Object.defineProperty(Tt.exports, "__esModule", { value: true });
   })(Og)), Og.exports;
 }
-var Mg = { exports: {} };
-/**
-* @license React
-* react-reconciler.development.js
-*
-* Copyright (c) Meta Platforms, Inc. and affiliates.
-*
-* This source code is licensed under the MIT license found in the
-* LICENSE file in the root directory of this source tree.
-*/
-var Rb;
+var Mg = { exports: {} }, Rb;
 function e0() {
   return Rb || (Rb = 1, (function(Tt) {
     process.env.NODE_ENV !== "production" && (Tt.exports = function(m) {
@@ -13066,10 +13074,7 @@ Check the render method of %s.`, G(di) || "Unknown")), i = zo(n), i.payload = {
       function Ic() {
         return di;
       }
-      var le = {}, qm = React__default, St = Tb, ze = Object.assign, Uh = Symbol.for("react.element"), Ho = Symbol.for("react.transitional.element"), Ao = Symbol.for("react.portal"), ol = Symbol.for("react.fragment"), Lc = Symbol.for("react.strict_mode"), Uf = Symbol.for("react.profiler"), ei = Symbol.for("react.consumer"), on = Symbol.for("react.context"), jn = Symbol.for("react.forward_ref"), Nc = Symbol.for("react.suspense"), Bf = Symbol.for("react.suspense_list"), al = Symbol.for("react.memo"), kt = Symbol.for("react.lazy");
-      var Ds = Symbol.for("react.activity");
-      var Bh = Symbol.for("react.memo_cache_sentinel");
-      var ni = Symbol.iterator, il = Symbol.for("react.client.reference"), fn = Array.isArray, x = qm.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Jt = m.rendererVersion, Zt = m.rendererPackageName, jo = m.extraDevToolsConfig, ot = m.getPublicInstance, Zr = m.getRootHostContext, Dn = m.getChildHostContext, Ws = m.prepareForCommit, pa = m.resetAfterCommit, Fc = m.createInstance;
+      var le = {}, qm = React__default, St = Tb, ze = Object.assign, Uh = Symbol.for("react.element"), Ho = Symbol.for("react.transitional.element"), Ao = Symbol.for("react.portal"), ol = Symbol.for("react.fragment"), Lc = Symbol.for("react.strict_mode"), Uf = Symbol.for("react.profiler"), ei = Symbol.for("react.consumer"), on = Symbol.for("react.context"), jn = Symbol.for("react.forward_ref"), Nc = Symbol.for("react.suspense"), Bf = Symbol.for("react.suspense_list"), al = Symbol.for("react.memo"), kt = Symbol.for("react.lazy"), Ds = Symbol.for("react.activity"), Bh = Symbol.for("react.memo_cache_sentinel"), ni = Symbol.iterator, il = Symbol.for("react.client.reference"), fn = Array.isArray, x = qm.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Jt = m.rendererVersion, Zt = m.rendererPackageName, jo = m.extraDevToolsConfig, ot = m.getPublicInstance, Zr = m.getRootHostContext, Dn = m.getChildHostContext, Ws = m.prepareForCommit, pa = m.resetAfterCommit, Fc = m.createInstance;
       m.cloneMutableInstance;
       var bn = m.appendInitialChild, Ue = m.finalizeInitialChildren, ue = m.shouldSetTextContent, Do = m.createTextInstance;
       m.cloneMutableTextInstance;
@@ -14037,15 +14042,6 @@ function n0() {
 var t0 = n0();
 const r0 = Xb(t0);
 
-/**
- * @license React
- * react-reconciler-constants.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
 const t = 1, o = 8, r = 32, e = 2;
 
 function createReconciler(config) {
@@ -14072,10 +14068,11 @@ function extend(objects) {
 function validateInstance(type, props) {
   const name = toPascalCase(type);
   const target = catalogue[name];
-  if (type !== "primitive" && !target)
+  if (type !== "primitive" && !target) {
     throw new Error(
       `R3F: ${name} is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively`
     );
+  }
   if (type === "primitive" && !props.object) throw new Error(`R3F: Primitives without 'object' are invalid!`);
   if (props.args !== void 0 && !Array.isArray(props.args)) throw new Error("R3F: The args prop must be an array!");
 }
@@ -14526,14 +14523,14 @@ function createRoot(canvas) {
   if (!prevRoot) _roots.set(canvas, { fiber, store });
   let onCreated;
   let lastCamera;
-  let lastConfiguredProps = {};
+  const lastConfiguredProps = {};
   let configured = false;
   let pending = null;
   return {
     async configure(props = {}) {
       let resolve;
       pending = new Promise((_resolve) => resolve = _resolve);
-      let {
+      const {
         gl: glConfig,
         renderer: rendererConfig,
         size: propsSize,
@@ -14555,9 +14552,10 @@ function createRoot(canvas) {
         onDragOverMissed,
         onDropMissed,
         autoUpdateFrustum = true,
-        occlusion = false
+        occlusion = false,
+        _sizeProps
       } = props;
-      let state = store.getState();
+      const state = store.getState();
       const defaultGPUProps = {
         canvas
       };
@@ -14584,8 +14582,9 @@ function createRoot(canvas) {
       if (!raycaster) state.set({ raycaster: raycaster = new Raycaster() });
       const { params, ...options } = raycastOptions || {};
       if (!is.equ(options, raycaster, shallowLoose)) applyProps(raycaster, { ...options });
-      if (!is.equ(params, raycaster.params, shallowLoose))
+      if (!is.equ(params, raycaster.params, shallowLoose)) {
         applyProps(raycaster, { params: { ...raycaster.params, ...params } });
+      }
       if (!state.camera || state.camera === lastCamera && !is.equ(lastCamera, cameraOptions, shallowLoose)) {
         lastCamera = cameraOptions;
         const isCamera = cameraOptions?.isCamera;
@@ -14636,9 +14635,14 @@ function createRoot(canvas) {
           wasEnabled = enabled;
         });
       }
+      if (_sizeProps !== void 0) {
+        state.set({ _sizeProps });
+      }
       const size = computeInitialSize(canvas, propsSize);
-      if (!is.equ(size, state.size, shallowLoose)) {
+      if (!state._sizeImperative && !is.equ(size, state.size, shallowLoose)) {
+        const wasImperative = state._sizeImperative;
         state.setSize(size.width, size.height, size.top, size.left);
+        if (!wasImperative) state.set({ _sizeImperative: false });
       }
       if (dpr !== void 0 && !is.equ(dpr, lastConfiguredProps.dpr, shallowLoose)) {
         state.setDpr(dpr);
@@ -14708,15 +14712,17 @@ function createRoot(canvas) {
         } else if (is.obj(shadows)) {
           Object.assign(renderer.shadowMap, shadows);
         }
-        if (oldEnabled !== renderer.shadowMap.enabled || oldType !== renderer.shadowMap.type)
+        if (oldEnabled !== renderer.shadowMap.enabled || oldType !== renderer.shadowMap.type) {
           renderer.shadowMap.needsUpdate = true;
+        }
       }
       if (textureColorSpace !== lastConfiguredProps.textureColorSpace) {
         if (state.textureColorSpace !== textureColorSpace) state.set(() => ({ textureColorSpace }));
         lastConfiguredProps.textureColorSpace = textureColorSpace;
       }
-      if (glConfig && !is.fun(glConfig) && !isRenderer(glConfig) && !is.equ(glConfig, renderer, shallowLoose))
+      if (glConfig && !is.fun(glConfig) && !isRenderer(glConfig) && !is.equ(glConfig, renderer, shallowLoose)) {
         applyProps(renderer, glConfig);
+      }
       if (rendererConfig && !is.fun(rendererConfig) && !isRenderer(rendererConfig) && state.renderer) {
         const currentRenderer = state.renderer;
         if (!is.equ(rendererConfig, currentRenderer, shallowLoose)) {
@@ -14984,6 +14990,9 @@ function CanvasImpl({
   onDragOverMissed,
   onDropMissed,
   onCreated,
+  hmr,
+  width,
+  height,
   ...props
 }) {
   React.useMemo(() => extend(THREE), []);
@@ -15004,7 +15013,16 @@ function CanvasImpl({
     };
   }, [resize, hasInitialSizeRef.current]);
   const [containerRef, containerRect] = useMeasure(measureConfig);
-  if (!hasInitialSizeRef.current && containerRect.width > 0 && containerRect.height > 0) {
+  const effectiveSize = React.useMemo(
+    () => ({
+      width: width ?? containerRect.width,
+      height: height ?? containerRect.height,
+      top: containerRect.top,
+      left: containerRect.left
+    }),
+    [width, height, containerRect]
+  );
+  if (!hasInitialSizeRef.current && effectiveSize.width > 0 && effectiveSize.height > 0) {
     hasInitialSizeRef.current = true;
   }
   const canvasRef = React.useRef(null);
@@ -15023,7 +15041,7 @@ function CanvasImpl({
   useIsomorphicLayoutEffect(() => {
     effectActiveRef.current = true;
     const canvas = canvasRef.current;
-    if (containerRect.width > 0 && containerRect.height > 0 && canvas) {
+    if (effectiveSize.width > 0 && effectiveSize.height > 0 && canvas) {
       if (!root.current) {
         root.current = createRoot(canvas);
         notifyAlpha({
@@ -15057,7 +15075,9 @@ function CanvasImpl({
           performance,
           raycaster,
           camera,
-          size: containerRect,
+          size: effectiveSize,
+          // Store size props for reset functionality
+          _sizeProps: width !== void 0 || height !== void 0 ? { width, height } : null,
           // Pass mutable reference to onPointerMissed so it's free to update
           onPointerMissed: (...args) => handlePointerMissed.current?.(...args),
           onDragOverMissed: (...args) => handleDragOverMissed.current?.(...args),
@@ -15103,6 +15123,33 @@ function CanvasImpl({
       };
     }
   }, []);
+  React.useEffect(() => {
+    if (hmr === false) return;
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const handleHMR = () => {
+      const rootEntry = _roots.get(canvas);
+      if (rootEntry?.store) {
+        rootEntry.store.setState((state) => ({
+          nodes: {},
+          uniforms: {},
+          _hmrVersion: state._hmrVersion + 1
+        }));
+      }
+    };
+    if (typeof import.meta !== "undefined" && import.meta.hot) {
+      const hot = import.meta.hot;
+      hot.on("vite:afterUpdate", handleHMR);
+      return () => hot.dispose?.(() => {
+      });
+    }
+    if (typeof module !== "undefined" && module.hot) {
+      const hot = module.hot;
+      hot.addStatusHandler((status) => {
+        if (status === "idle") handleHMR();
+      });
+    }
+  }, [hmr]);
   const pointerEvents = eventSource ? "none" : "auto";
   return /* @__PURE__ */ jsx(
     "div",
@@ -15125,6 +15172,72 @@ function Canvas(props) {
   return /* @__PURE__ */ jsx(FiberProvider, { children: /* @__PURE__ */ jsx(CanvasImpl, { ...props }) });
 }
 
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var _a;
+const INTERNAL_DATA = Symbol("ScopedStore.data");
+_a = INTERNAL_DATA;
+const _ScopedStore = class _ScopedStore {
+  constructor(data) {
+    __publicField(this, _a);
+    this[INTERNAL_DATA] = data;
+    return new Proxy(this, {
+      get(target, prop, receiver) {
+        if (typeof prop === "string") {
+          if (prop === "scope" || prop === "has" || prop === "keys") {
+            return Reflect.get(target, prop, receiver);
+          }
+          return target[INTERNAL_DATA][prop];
+        }
+        return Reflect.get(target, prop, receiver);
+      },
+      has(target, prop) {
+        return typeof prop === "string" ? prop in target[INTERNAL_DATA] : Reflect.has(target, prop);
+      },
+      ownKeys(target) {
+        return Reflect.ownKeys(target[INTERNAL_DATA]);
+      },
+      getOwnPropertyDescriptor(target, prop) {
+        if (typeof prop === "string" && prop in target[INTERNAL_DATA]) {
+          return {
+            configurable: true,
+            enumerable: true,
+            value: target[INTERNAL_DATA][prop]
+          };
+        }
+        return void 0;
+      }
+    });
+  }
+  /**
+   * Access a nested scope by key.
+   * If the key doesn't exist or isn't a scope object, returns an empty ScopedStore.
+   */
+  scope(key) {
+    const data = this[INTERNAL_DATA][key];
+    return new _ScopedStore(
+      data && typeof data === "object" ? data : {}
+    );
+  }
+  /**
+   * Check if a key exists in the store.
+   */
+  has(key) {
+    return key in this[INTERNAL_DATA];
+  }
+  /**
+   * Get all keys in the store.
+   */
+  keys() {
+    return Object.keys(this[INTERNAL_DATA]);
+  }
+};
+let ScopedStore = _ScopedStore;
+function createScopedStore(data) {
+  return new ScopedStore(data);
+}
+
 function addTexture(set, key, value) {
   set((state) => {
     const newMap = new Map(state.textures);
@@ -15238,21 +15351,52 @@ function useUniforms(creatorOrScope, scope) {
     },
     [store]
   );
+  const rebuildUniforms = useCallback(
+    (targetScope) => {
+      store.setState((state) => {
+        let newUniforms = state.uniforms;
+        if (targetScope && targetScope !== "root") {
+          const { [targetScope]: _, ...rest } = state.uniforms;
+          newUniforms = rest;
+        } else if (targetScope === "root") {
+          newUniforms = {};
+          for (const [key, value] of Object.entries(state.uniforms)) {
+            if (!isUniformNode$1(value)) newUniforms[key] = value;
+          }
+        } else {
+          newUniforms = {};
+        }
+        return { uniforms: newUniforms, _hmrVersion: state._hmrVersion + 1 };
+      });
+    },
+    [store]
+  );
   const inputForMemoization = useMemo(() => {
-    return is.fun(creatorOrScope) ? creatorOrScope(store.getState()) : creatorOrScope;
+    if (is.fun(creatorOrScope)) {
+      const state = store.getState();
+      const wrappedState = {
+        ...state,
+        uniforms: createScopedStore(state.uniforms),
+        nodes: createScopedStore(state.nodes)
+      };
+      return creatorOrScope(wrappedState);
+    }
+    return creatorOrScope;
   }, [creatorOrScope, store]);
   const memoizedInput = useCompareMemoize(inputForMemoization);
+  const isReader = memoizedInput === void 0 || typeof memoizedInput === "string";
+  const storeUniforms = useThree((s) => s.uniforms);
   const uniforms = useMemo(() => {
-    const state = store.getState();
-    const set = store.setState;
     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");
     }
@@ -15296,8 +15440,31 @@ function useUniforms(creatorOrScope, scope) {
       }
     }
     return result;
-  }, [store, memoizedInput, scope]);
-  return { ...uniforms, removeUniforms: removeUniforms2, clearUniforms };
+  }, [
+    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) => {
@@ -15431,19 +15598,47 @@ function useNodes(creatorOrScope, scope) {
     },
     [store]
   );
+  const rebuildNodes = useCallback(
+    (targetScope) => {
+      store.setState((state) => {
+        let newNodes = state.nodes;
+        if (targetScope && targetScope !== "root") {
+          const { [targetScope]: _, ...rest } = state.nodes;
+          newNodes = rest;
+        } else if (targetScope === "root") {
+          newNodes = {};
+          for (const [key, value] of Object.entries(state.nodes)) {
+            if (!isTSLNode(value)) newNodes[key] = value;
+          }
+        } else {
+          newNodes = {};
+        }
+        return { nodes: newNodes, _hmrVersion: state._hmrVersion + 1 };
+      });
+    },
+    [store]
+  );
+  const isReader = creatorOrScope === void 0 || typeof creatorOrScope === "string";
+  const storeNodes = useThree((s) => s.nodes);
+  const hmrVersion = useThree((s) => s._hmrVersion);
   const nodes = useMemo(() => {
-    const state = store.getState();
-    const set = store.setState;
     if (creatorOrScope === void 0) {
-      return state.nodes;
+      return storeNodes;
     }
     if (typeof creatorOrScope === "string") {
-      const scopeData = state.nodes[creatorOrScope];
+      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) {
@@ -15481,8 +15676,33 @@ function useNodes(creatorOrScope, scope) {
       set((s) => ({ nodes: { ...s.nodes, ...result } }));
     }
     return result;
-  }, [store, typeof creatorOrScope === "string" ? creatorOrScope : scope]);
-  return { ...nodes, removeNodes: removeNodes2, clearNodes };
+  }, [
+    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) => {
@@ -15518,7 +15738,12 @@ function useLocalNodes(creator) {
   const textures = useThree((s) => s.textures);
   return useMemo(() => {
     const state = store.getState();
-    return creator(state);
+    const wrappedState = {
+      ...state,
+      uniforms: createScopedStore(state.uniforms),
+      nodes: createScopedStore(state.nodes)
+    };
+    return creator(wrappedState);
   }, [store, creator, uniforms, nodes, textures]);
 }
 
@@ -15532,6 +15757,10 @@ function usePostProcessing(mainCB, setupCB) {
   mainCBRef.current = mainCB;
   setupCBRef.current = setupCB;
   const [rebuildVersion, setRebuildVersion] = useState(0);
+  useEffect(() => {
+    callbacksRanRef.current = false;
+    scenePassCacheRef.current = null;
+  }, []);
   const clearPasses = useCallback(() => {
     store.setState({ passes: {} });
   }, [store]);
@@ -15613,4 +15842,4 @@ function usePostProcessing(mainCB, setupCB) {
 
 extend(THREE);
 
-export { Block, Canvas, ErrorBoundary, IsObject, R3F_BUILD_LEGACY, R3F_BUILD_WEBGPU, REACT_INTERNAL_PROPS, RESERVED_PROPS, Scheduler, Texture, _roots, act, addAfterEffect, addEffect, addTail, advance, applyProps, attach, buildGraph, calculateDpr, clearNodeScope, clearRootNodes, clearRootUniforms, clearScope, context, createEvents, createPointerEvents, createPortal, createRoot, createStore, createTextureOperations, detach, diffProps, dispose, createPointerEvents as events, extend, findInitialRoot, flushSync, getInstanceProps, getRootState, getScheduler, getUuidPrefix, hasConstructor, invalidate, invalidateInstance, is, isColorRepresentation, isCopyable, isObject3D, isOrthographicCamera, isRef, isRenderer, isTexture, isVectorLike, prepare, reconciler, removeInteractivity, removeNodes, removeUniforms, resolve, unmountComponentAtNode, updateCamera, updateFrustum, useBridge, useFrame, useGraph, useInstanceHandle, useIsomorphicLayoutEffect, useLoader, useLocalNodes, useMutableCallback, useNodes, usePostProcessing, useRenderTarget, useStore, useTexture, useTextures, useThree, useUniform, useUniforms };
+export { Block, Canvas, ErrorBoundary, IsObject, R3F_BUILD_LEGACY, R3F_BUILD_WEBGPU, REACT_INTERNAL_PROPS, RESERVED_PROPS, Scheduler, Texture, _roots, act, addAfterEffect, addEffect, addTail, advance, applyProps, attach, buildGraph, calculateDpr, clearNodeScope, clearRootNodes, clearRootUniforms, clearScope, context, createEvents, createPointerEvents, createPortal, createRoot, createScopedStore, createStore, createTextureOperations, detach, diffProps, dispose, createPointerEvents as events, extend, findInitialRoot, flushSync, getInstanceProps, getRootState, getScheduler, getUuidPrefix, hasConstructor, invalidate, invalidateInstance, is, isColorRepresentation, isCopyable, isObject3D, isOrthographicCamera, isRef, isRenderer, isTexture, isVectorLike, prepare, rebuildAllNodes, rebuildAllUniforms, reconciler, removeInteractivity, removeNodes, removeUniforms, resolve, unmountComponentAtNode, updateCamera, updateFrustum, useBridge, useFrame, useGraph, useInstanceHandle, useIsomorphicLayoutEffect, useLoader, useLocalNodes, useMutableCallback, useNodes, usePostProcessing, useRenderTarget, useStore, useTexture, useTextures, useThree, useUniform, useUniforms };