@react-three/fiber 10.0.0-canary.da7a768 → 10.0.0-canary.dc0ec15

package/dist/webgpu/index.cjs

@@ -10,6 +10,7 @@ const scheduler = require('@pmndrs/scheduler');
 const Tb = require('scheduler');
 const GroundedSkybox_js = require('three/examples/jsm/objects/GroundedSkybox.js');
 const HDRLoader_js = require('three/examples/jsm/loaders/HDRLoader.js');
+const HDRCubeTextureLoader_js = require('three/examples/jsm/loaders/HDRCubeTextureLoader.js');
 const EXRLoader_js = require('three/examples/jsm/loaders/EXRLoader.js');
 const UltraHDRLoader_js = require('three/examples/jsm/loaders/UltraHDRLoader.js');
 const gainmapJs = require('@monogrid/gainmap-js');
@@ -323,7 +324,6 @@ function prepare(target, root, type, props) {
 }
 function invalidateInstance(instance) {
   if (!instance.parent) return;
-  instance.props.onUpdate?.(instance.object);
   const state = instance.root?.getState?.();
   if (state && state.internal.frames === 0) state.invalidate();
 }
@@ -539,8 +539,10 @@ function hasVisibilityHandlers(handlers) {
 }
 
 const FROM_REF = Symbol.for("@react-three/fiber.fromRef");
-function fromRef(ref) {
-  return { [FROM_REF]: ref };
+function fromRef(ref, transform) {
+  const marker = { [FROM_REF]: ref };
+  if (transform) marker.transform = transform;
+  return marker;
 }
 function isFromRef(value) {
   return value !== null && typeof value === "object" && FROM_REF in value;
@@ -554,6 +556,63 @@ function isOnce(value) {
   return value !== null && typeof value === "object" && ONCE in value;
 }
 
+const shownNotices = /* @__PURE__ */ new Set();
+function notifyDepreciated({ heading, body, link }) {
+  if (typeof process !== "undefined" && (process.env.NODE_ENV === "test" || process.env.JEST_WORKER_ID !== void 0) && process.env.R3F_SHOW_DEPRECATION_WARNINGS !== "true") {
+    return;
+  }
+  if (shownNotices.has(heading)) return;
+  shownNotices.add(heading);
+  const caller = getCallerFrame();
+  if (caller) {
+    console.log();
+  }
+  const boxStyle = "background: #ff9800; color: #1a1a1a; padding: 8px 12px; border-radius: 4px; font-weight: 500;";
+  if (caller) {
+    console.log(`%c\u26A0\uFE0F ${heading}`, boxStyle);
+  }
+  if (body || link) {
+    let message = "";
+    if (body) message += body;
+    if (link) message += (body ? "\n\n" : "") + `More info: ${link}`;
+    console.warn(`%c${message}`, "font-weight: bold;");
+  }
+}
+function getCallerFrame(depth = 3) {
+  const stack = new Error().stack;
+  if (!stack) return null;
+  const lines = stack.split("\n");
+  const frame = lines[depth];
+  if (!frame) return null;
+  let match = frame.match(/^\s*at (?:(.+?) )?\(?(.+?):(\d+):(\d+)\)?$/);
+  if (!match) {
+    match = frame.match(/^(?:(.+?)@)?(.+?):(\d+):(\d+)$/);
+  }
+  if (!match) return null;
+  const [, fn, url, line] = match;
+  return {
+    functionName: fn ?? "<anonymous>",
+    location: formatLocation(url, Number(line))
+  };
+}
+function formatLocation(url, line) {
+  const clean = url.split("?")[0];
+  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 RESERVED_PROPS = [
   "children",
   "key",
@@ -563,7 +622,6 @@ const RESERVED_PROPS = [
   "dispose",
   "attach",
   "object",
-  "onUpdate",
   // Behavior flags
   "dispose"
 ];
@@ -641,11 +699,9 @@ function diffProps(instance, newProps) {
   for (const prop in instance.props) {
     if (RESERVED_PROPS.includes(prop) || newProps.hasOwnProperty(prop)) continue;
     const { root, key } = resolve(instance.object, prop);
-    if (root.constructor && root.constructor.length === 0) {
+    if (typeof root?.constructor === "function") {
       const ctor = getMemoizedPrototype(root);
       if (!is.und(ctor)) changedProps[prop] = ctor[key];
-    } else {
-      changedProps[prop] = 0;
     }
   }
   return changedProps;
@@ -657,6 +713,13 @@ function applyProps(object, props) {
   for (const prop in props) {
     const value = props[prop];
     if (RESERVED_PROPS.includes(prop)) continue;
+    if (prop === "onUpdate") {
+      notifyDepreciated({
+        heading: "onUpdate is no longer an R3F prop",
+        body: "v10 removed the onUpdate hook: R3F no longer calls it after prop updates. The value is assigned to the object by name. On a Texture that sets three's Texture.onUpdate, which the renderer calls after a GPU upload, not after prop changes. On a node it replaces the Node.onUpdate() method. On other objects it is never called.\n\nUse an effect keyed on the props that change, read the object in useFrame, or use a ref callback.",
+        link: "https://docs.pmnd.rs/react-three-fiber/migration/v10#onupdate-removed"
+      });
+    }
     if (instance && EVENT_REGEX.test(prop)) {
       if (typeof value === "function") instance.handlers[prop] = value;
       else delete instance.handlers[prop];
@@ -731,377 +794,48 @@ function applyProps(object, props) {
     }
   }
   if (instance?.parent && rootState?.internal && instance.object?.isObject3D && prevHandlers !== instance.eventCount) {
-    const object2 = instance.object;
-    const index = rootState.internal.interaction.indexOf(object2);
-    if (index > -1) rootState.internal.interaction.splice(index, 1);
-    if (instance.eventCount && object2.raycast !== null) {
-      rootState.internal.interaction.push(object2);
-    }
-  }
-  if (instance?.parent && rootState?.internal && instance.object?.isObject3D) {
-    const object2 = instance.object;
-    const root = findInitialRoot(instance);
-    const visibilityHandlers = {
-      onFramed: instance.handlers.onFramed,
-      onOccluded: instance.handlers.onOccluded,
-      onVisible: instance.handlers.onVisible
-    };
-    if (hasVisibilityHandlers(visibilityHandlers)) {
-      if (!updateVisibilityHandlers(root, object2, visibilityHandlers)) {
-        registerVisibility(root, object2, visibilityHandlers);
-      }
-    } else {
-      unregisterVisibility(root, object2);
-    }
-  }
-  if (instance && instance.props.attach === void 0) {
-    if (instance.object.isBufferGeometry) instance.props.attach = "geometry";
-    else if (instance.object.isMaterial) instance.props.attach = "material";
-  }
-  if (instance) invalidateInstance(instance);
-  return object;
-}
-
-const shownNotices = /* @__PURE__ */ new Set();
-function notifyDepreciated({ heading, body, link }) {
-  if (typeof process !== "undefined" && (process.env.NODE_ENV === "test" || process.env.JEST_WORKER_ID !== void 0) && process.env.R3F_SHOW_DEPRECATION_WARNINGS !== "true") {
-    return;
-  }
-  if (shownNotices.has(heading)) return;
-  shownNotices.add(heading);
-  const caller = getCallerFrame();
-  if (caller) {
-    console.log();
-  }
-  const boxStyle = "background: #ff9800; color: #1a1a1a; padding: 8px 12px; border-radius: 4px; font-weight: 500;";
-  if (caller) {
-    console.log(`%c\u26A0\uFE0F ${heading}`, boxStyle);
-  }
-  if (body || link) {
-    let message = "";
-    if (body) message += body;
-    if (link) message += (body ? "\n\n" : "") + `More info: ${link}`;
-    console.warn(`%c${message}`, "font-weight: bold;");
-  }
-}
-function getCallerFrame(depth = 3) {
-  const stack = new Error().stack;
-  if (!stack) return null;
-  const lines = stack.split("\n");
-  const frame = lines[depth];
-  if (!frame) return null;
-  let match = frame.match(/^\s*at (?:(.+?) )?\(?(.+?):(\d+):(\d+)\)?$/);
-  if (!match) {
-    match = frame.match(/^(?:(.+?)@)?(.+?):(\d+):(\d+)$/);
-  }
-  if (!match) return null;
-  const [, fn, url, line] = match;
-  return {
-    functionName: fn ?? "<anonymous>",
-    location: formatLocation(url, Number(line))
-  };
-}
-function formatLocation(url, line) {
-  const clean = url.split("?")[0];
-  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 INTERNAL_LIB_MARKERS = ["zustand", "setState", "Object.assign"];
-function isInternalRendererAccess(stack, callerDepth = 2) {
-  if (!stack) return false;
-  const caller = stack.split("\n")[callerDepth] ?? "";
-  return INTERNAL_LIB_MARKERS.some((m) => caller.includes(m));
-}
-
-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();
-    const defaultTarget = new webgpu.Vector3();
-    const tempTarget = new webgpu.Vector3();
-    function getCurrentViewport(camera = get().camera, target = defaultTarget, size = get().size) {
-      const { width, height, top, left } = size;
-      const aspect = width / height;
-      if (target.isVector3) tempTarget.copy(target);
-      else tempTarget.set(...target);
-      const distance = camera.getWorldPosition(position).distanceTo(tempTarget);
-      if (isOrthographicCamera(camera)) {
-        return { width: width / camera.zoom, height: height / camera.zoom, top, left, factor: 1, distance, aspect };
-      } else {
-        const fov = camera.fov * Math.PI / 180;
-        const h = 2 * Math.tan(fov / 2) * distance;
-        const w = h * (width / height);
-        return { width: w, height: h, top, left, factor: width / w, distance, aspect };
-      }
-    }
-    let performanceTimeout = void 0;
-    const setPerformanceCurrent = (current) => set((state2) => ({ performance: { ...state2.performance, current } }));
-    const pointer = new webgpu.Vector2();
-    const rootState = {
-      set,
-      get,
-      // Mock objects that have to be configured
-      // primaryStore is set after store creation (self-reference for primary, primary's store for secondary)
-      primaryStore: null,
-      gl: null,
-      renderer: null,
-      camera: null,
-      frustum: new webgpu.Frustum(),
-      autoUpdateFrustum: true,
-      raycaster: null,
-      events: {
-        priority: 1,
-        enabled: true,
-        connected: false,
-        frameTimedRaycasts: true,
-        alwaysFireOnScroll: true,
-        updateOnFrame: false
-      },
-      scene: null,
-      rootScene: null,
-      xr: null,
-      inspector: null,
-      invalidate: (frames = 1, stackFrames = false) => invalidate(get(), frames, stackFrames),
-      advance: (timestamp, runGlobalEffects) => advance(timestamp, runGlobalEffects, get()),
-      textureColorSpace: webgpu.SRGBColorSpace,
-      isLegacy: false,
-      webGPUSupported: false,
-      isNative: false,
-      controls: null,
-      pointer,
-      mouse: pointer,
-      frameloop: "always",
-      onPointerMissed: void 0,
-      onDragOverMissed: void 0,
-      onDropMissed: void 0,
-      performance: {
-        current: 1,
-        min: 0.5,
-        max: 1,
-        debounce: 200,
-        regress: () => {
-          const state2 = get();
-          if (performanceTimeout) clearTimeout(performanceTimeout);
-          if (state2.performance.current !== state2.performance.min) setPerformanceCurrent(state2.performance.min);
-          performanceTimeout = setTimeout(
-            () => setPerformanceCurrent(get().performance.max),
-            state2.performance.debounce
-          );
-        }
-      },
-      size: { width: 0, height: 0, top: 0, left: 0 },
-      viewport: {
-        initialDpr: 0,
-        dpr: 0,
-        width: 0,
-        height: 0,
-        top: 0,
-        left: 0,
-        aspect: 0,
-        distance: 0,
-        factor: 0,
-        getCurrentViewport
-      },
-      setEvents: (events) => set((state2) => ({ ...state2, events: { ...state2.events, ...events } })),
-      setSize: (width, height, top, left) => {
-        const state2 = get();
-        if (width === void 0) {
-          set({ _sizeImperative: false });
-          if (state2._sizeProps) {
-            const { width: propW, height: propH } = state2._sizeProps;
-            if (propW !== void 0 || propH !== void 0) {
-              const currentSize = state2.size;
-              const newSize = {
-                width: propW ?? currentSize.width,
-                height: propH ?? currentSize.height,
-                top: currentSize.top,
-                left: currentSize.left
-              };
-              set((s) => ({
-                size: newSize,
-                viewport: { ...s.viewport, ...getCurrentViewport(state2.camera, defaultTarget, newSize) }
-              }));
-              scheduler.getScheduler().invalidate();
-            }
-          }
-          return;
-        }
-        const w = width;
-        const h = height ?? width;
-        const t = top ?? state2.size.top;
-        const l = left ?? state2.size.left;
-        const size = { width: w, height: h, top: t, left: l };
-        set((s) => ({
-          size,
-          viewport: { ...s.viewport, ...getCurrentViewport(state2.camera, defaultTarget, size) },
-          _sizeImperative: true
-        }));
-        scheduler.getScheduler().invalidate();
-      },
-      setDpr: (dpr) => set((state2) => {
-        const resolved = calculateDpr(dpr);
-        return { viewport: { ...state2.viewport, dpr: resolved, initialDpr: state2.viewport.initialDpr || resolved } };
-      }),
-      setFrameloop: (frameloop = "always") => {
-        set(() => ({ frameloop }));
-        scheduler.getScheduler().frameloop = frameloop;
-      },
-      setError: (error) => set(() => ({ error })),
-      error: null,
-      //* TSL State (managed via hooks: useUniforms, useNodes, useBuffers, useGPUStorage, useTextures, useRenderPipeline) ==============================
-      uniforms: {},
-      nodes: {},
-      buffers: {},
-      gpuStorage: {},
-      textures: /* @__PURE__ */ new Map(),
-      _textureRefs: /* @__PURE__ */ new Map(),
-      renderPipeline: null,
-      passes: {},
-      _hmrVersion: 0,
-      _sizeImperative: false,
-      _sizeProps: null,
-      previousRoot: void 0,
-      internal: {
-        // Events
-        interaction: [],
-        subscribers: [],
-        // Per-pointer state (new unified structure)
-        pointerMap: /* @__PURE__ */ new Map(),
-        pointerDirty: /* @__PURE__ */ new Map(),
-        lastEvent: React__namespace.createRef(),
-        // Deprecated but kept for backwards compatibility
-        hovered: /* @__PURE__ */ new Map(),
-        initialClick: [0, 0],
-        initialHits: [],
-        capturedMap: /* @__PURE__ */ new Map(),
-        // Visibility tracking (onFramed, onOccluded, onVisible)
-        visibilityRegistry: /* @__PURE__ */ new Map(),
-        // Occlusion system (WebGPU only)
-        occlusionEnabled: false,
-        occlusionObserver: null,
-        occlusionCache: /* @__PURE__ */ new Map(),
-        helperGroup: null,
-        // Updates
-        active: false,
-        frames: 0,
-        priority: 0,
-        subscribe: (ref, priority, store) => {
-          const internal = get().internal;
-          internal.priority = internal.priority + (priority > 0 ? 1 : 0);
-          internal.subscribers.push({ ref, priority, store });
-          internal.subscribers = internal.subscribers.sort((a, b) => a.priority - b.priority);
-          return () => {
-            const internal2 = get().internal;
-            if (internal2?.subscribers) {
-              internal2.priority = internal2.priority - (priority > 0 ? 1 : 0);
-              internal2.subscribers = internal2.subscribers.filter((s) => s.ref !== ref);
-            }
-          };
-        },
-        // Renderer Storage (single source of truth)
-        actualRenderer: null,
-        // Scheduler for useFrameNext (initialized in renderer.tsx)
-        scheduler: null
-      }
-    };
-    return rootState;
-  });
-  const state = rootStore.getState();
-  Object.defineProperty(state, "gl", {
-    get() {
-      const currentState = rootStore.getState();
-      if (!currentState.isLegacy && currentState.internal.actualRenderer) {
-        const stack = new Error().stack || "";
-        if (!isInternalRendererAccess(stack)) {
-          const cleanedStack = stack.split("\n").slice(2).join("\n") || "Stack trace unavailable";
-          notifyDepreciated({
-            heading: "Accessing state.gl in WebGPU mode",
-            body: "Please use state.renderer instead. state.gl is deprecated and will be removed in future versions.\n\nFor backwards compatibility, state.gl currently maps to state.renderer, but this may cause issues with libraries expecting WebGLRenderer.\n\nAccessed from:\n" + cleanedStack
-          });
-        }
-      }
-      return currentState.internal.actualRenderer;
-    },
-    set(value) {
-      rootStore.getState().internal.actualRenderer = value;
-    },
-    enumerable: true,
-    configurable: true
-  });
-  Object.defineProperty(state, "renderer", {
-    get() {
-      return rootStore.getState().internal.actualRenderer;
-    },
-    set(value) {
-      rootStore.getState().internal.actualRenderer = value;
-    },
-    enumerable: true,
-    configurable: true
-  });
-  let oldScene = state.scene;
-  rootStore.subscribe(() => {
-    const currentState = rootStore.getState();
-    const { scene, rootScene, set } = currentState;
-    if (scene !== oldScene) {
-      oldScene = scene;
-      if (scene?.isScene && scene !== rootScene) {
-        set({ rootScene: scene });
-      }
-    }
-  });
-  let oldSize = state.size;
-  let oldDpr = state.viewport.dpr;
-  let oldCamera = state.camera;
-  rootStore.subscribe(() => {
-    const { camera, size, viewport, set, internal } = rootStore.getState();
-    const actualRenderer = internal.actualRenderer;
-    const canvasTarget = internal.canvasTarget;
-    if (size.width !== oldSize.width || size.height !== oldSize.height || viewport.dpr !== oldDpr) {
-      oldSize = size;
-      oldDpr = viewport.dpr;
-      updateCamera(camera, size);
-      if (internal.isSecondary && canvasTarget) {
-        if (viewport.dpr > 0) canvasTarget.setPixelRatio(viewport.dpr);
-        canvasTarget.setSize(size.width, size.height, false);
-      } else {
-        if (viewport.dpr > 0) actualRenderer.setPixelRatio(viewport.dpr);
-        actualRenderer.setSize(size.width, size.height, false);
-        if (canvasTarget) {
-          if (viewport.dpr > 0) canvasTarget.setPixelRatio(viewport.dpr);
-          canvasTarget.setSize(size.width, size.height, false);
-        }
-      }
-    }
-    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);
+    const object2 = instance.object;
+    const index = rootState.internal.interaction.indexOf(object2);
+    if (index > -1) rootState.internal.interaction.splice(index, 1);
+    if (instance.eventCount && object2.raycast !== null) {
+      rootState.internal.interaction.push(object2);
+    }
+  }
+  if (instance?.parent && rootState?.internal && instance.object?.isObject3D) {
+    const object2 = instance.object;
+    const root = findInitialRoot(instance);
+    const visibilityHandlers = {
+      onFramed: instance.handlers.onFramed,
+      onOccluded: instance.handlers.onOccluded,
+      onVisible: instance.handlers.onVisible
+    };
+    if (hasVisibilityHandlers(visibilityHandlers)) {
+      if (!updateVisibilityHandlers(root, object2, visibilityHandlers)) {
+        registerVisibility(root, object2, visibilityHandlers);
       }
+    } else {
+      unregisterVisibility(root, object2);
     }
-  });
-  rootStore.subscribe((state2) => invalidate(state2));
-  return rootStore;
-};
+  }
+  if (instance && instance.props.attach === void 0) {
+    if (instance.object.isBufferGeometry) instance.props.attach = "geometry";
+    else if (instance.object.isMaterial) instance.props.attach = "material";
+  }
+  if (instance) invalidateInstance(instance);
+  return object;
+}
+
+const R3F_CONTEXT = Symbol.for("@react-three/fiber.context");
+const context = globalThis[R3F_CONTEXT] ?? (globalThis[R3F_CONTEXT] = React__namespace.createContext(null));
+
+function useStore() {
+  const store = React.useContext(context);
+  if (!store) throw new Error("R3F: Hooks can only be used within the Canvas component!");
+  return store;
+}
+function useThree$1(selector = (state) => state, equalityFn) {
+  return useStore()(selector, equalityFn);
+}
 
 const memoizedLoaders = /* @__PURE__ */ new WeakMap();
 const isConstructor$1 = (value) => typeof value === "function" && value?.prototype?.constructor === value;
@@ -1146,7 +880,11 @@ function useLoader(loader, input, extensions, onProgress, cacheKey) {
   const results = cacheKeys.map(
     (key, index) => suspendReact.suspend(() => fn(loader, inputs[index]), [loader, key], { equal: is.equ })
   );
-  return Array.isArray(input) ? results : results[0];
+  const stableRef = React.useRef(null);
+  const previous = stableRef.current;
+  const stable = previous !== null && previous.length === results.length && previous.every((value, i) => value === results[i]) ? previous : results;
+  stableRef.current = stable;
+  return Array.isArray(input) ? stable : stable[0];
 }
 useLoader.preload = function(loader, input, extensions, onProgress, cacheKey) {
   const inputs = Array.isArray(input) ? input : [input];
@@ -1266,6 +1004,13 @@ function useFrame$1(callback, priorityOrOptions) {
        * Use for controlling the entire frame loop, adding phases, etc.
        */
       scheduler: scheduler2,
+      /**
+       * The root that currently owns this job. Resolve on access because ambient
+       * jobs can be adopted by a Canvas after the controls object is created.
+       */
+      get rootId() {
+        return scheduler.getScheduler().getJobRootId(id);
+      },
       /**
        * Manually step this job only.
        * Bypasses FPS limiting - always runs.
@@ -1282,6 +1027,14 @@ function useFrame$1(callback, priorityOrOptions) {
       stepAll: (timestamp) => {
         scheduler.getScheduler().step(timestamp);
       },
+      /**
+       * Request frames for this job's owning root without waking sibling roots.
+       */
+      invalidate: (frames, stackFrames) => {
+        const scheduler3 = scheduler.getScheduler();
+        const rootId = scheduler3.getJobRootId(id);
+        if (rootId) scheduler3.invalidateRoot(rootId, frames, stackFrames);
+      },
       /**
        * Pause this job (set enabled=false).
        * Job remains registered but won't run.
@@ -1311,6 +1064,11 @@ function getUrls(input) {
   if (Array.isArray(input)) return input;
   return Object.values(input);
 }
+function inputSignature(input) {
+  if (typeof input === "string") return input;
+  if (Array.isArray(input)) return input.join("\0");
+  return Object.keys(input).sort().map((key) => `${key}\0${input[key]}`).join("
");
+}
 function allUrlsCached(urls, textureCache) {
   return urls.every((url) => textureCache.has(url));
 }
@@ -1336,24 +1094,37 @@ function useTexture(input, optionsOrOnLoad) {
   const onLoadRef = React.useRef(onLoad);
   onLoadRef.current = onLoad;
   const onLoadCalledForRef = React.useRef(null);
-  const urls = React.useMemo(() => getUrls(input), [input]);
+  const inputKey = React.useMemo(() => inputSignature(input), [input]);
+  const stableInput = React.useMemo(() => input, [inputKey]);
+  const urls = React.useMemo(() => getUrls(stableInput), [stableInput]);
   const cachedResult = React.useMemo(() => {
     if (!cache) return null;
     const textures = store.getState().textures;
     if (!allUrlsCached(urls, textures)) return null;
-    return buildFromCache(input, textures);
-  }, [cache, urls, input, store]);
+    return buildFromCache(stableInput, textures);
+  }, [cache, urls, stableInput, store]);
   const loadedTextures = useLoader(
     webgpu.TextureLoader,
-    IsObject(input) ? Object.values(input) : input
+    IsObject(stableInput) ? Object.values(stableInput) : stableInput
   );
-  const inputKey = urls.join("\0");
+  const mappedTextures = React.useMemo(() => {
+    if (cachedResult) return cachedResult;
+    if (IsObject(stableInput)) {
+      const keyed = {};
+      const textureArray = loadedTextures;
+      let i = 0;
+      for (const key in stableInput) keyed[key] = textureArray[i++];
+      return keyed;
+    } else {
+      return loadedTextures;
+    }
+  }, [stableInput, loadedTextures, cachedResult]);
   React.useLayoutEffect(() => {
     if (cachedResult) return;
     if (onLoadCalledForRef.current === inputKey) return;
     onLoadCalledForRef.current = inputKey;
-    onLoadRef.current?.(loadedTextures);
-  }, [cachedResult, loadedTextures, inputKey]);
+    onLoadRef.current?.(mappedTextures);
+  }, [cachedResult, mappedTextures, inputKey]);
   React.useEffect(() => {
     if (cachedResult) return;
     if ("initTexture" in renderer) {
@@ -1372,30 +1143,18 @@ function useTexture(input, optionsOrOnLoad) {
       });
     }
   }, [renderer, loadedTextures, cachedResult]);
-  const mappedTextures = React.useMemo(() => {
-    if (cachedResult) return cachedResult;
-    if (IsObject(input)) {
-      const keyed = {};
-      const textureArray = loadedTextures;
-      let i = 0;
-      for (const key in input) keyed[key] = textureArray[i++];
-      return keyed;
-    } else {
-      return loadedTextures;
-    }
-  }, [input, loadedTextures, cachedResult]);
   React.useEffect(() => {
     if (!cache) return;
     const urlTextureMap = [];
-    if (typeof input === "string") {
-      urlTextureMap.push([input, mappedTextures]);
-    } else if (Array.isArray(input)) {
+    if (typeof stableInput === "string") {
+      urlTextureMap.push([stableInput, mappedTextures]);
+    } else if (Array.isArray(stableInput)) {
       const textureArray = mappedTextures;
-      input.forEach((url, i) => urlTextureMap.push([url, textureArray[i]]));
-    } else if (IsObject(input)) {
+      stableInput.forEach((url, i) => urlTextureMap.push([url, textureArray[i]]));
+    } else if (IsObject(stableInput)) {
       const textureRecord = mappedTextures;
-      for (const key in input) {
-        const url = input[key];
+      for (const key in stableInput) {
+        const url = stableInput[key];
         urlTextureMap.push([url, textureRecord[key]]);
       }
     }
@@ -1424,7 +1183,7 @@ function useTexture(input, optionsOrOnLoad) {
       }
       return { _textureRefs: refs };
     });
-  }, [cache, input, mappedTextures, store]);
+  }, [cache, stableInput, mappedTextures, store]);
   return mappedTextures;
 }
 useTexture.preload = (url) => useLoader.preload(webgpu.TextureLoader, url);
@@ -1585,7 +1344,7 @@ function useEnvironment({
     texture = texture.renderTarget?.texture;
   }
   texture.mapping = isCubemap ? webgpu.CubeReflectionMapping : webgpu.EquirectangularReflectionMapping;
-  texture.colorSpace = colorSpace ?? (isCubemap ? "srgb" : "srgb-linear");
+  texture.colorSpace = colorSpace ?? (isCubemap && extension !== "hdr-cube" ? "srgb" : "srgb-linear");
   return texture;
 }
 const preloadDefaultOptions = {
@@ -1638,22 +1397,15 @@ function getExtension(files) {
   const isCubemap = isArray(files) && files.length === 6;
   const isGainmap = isArray(files) && files.length === 3 && files.some((file) => file.endsWith("json"));
   const firstEntry = isArray(files) ? files[0] : files;
-  const extension = isCubemap ? "cube" : isGainmap ? "webp" : firstEntry.startsWith("data:application/exr") ? "exr" : firstEntry.startsWith("data:application/hdr") ? "hdr" : firstEntry.startsWith("data:image/jpeg") ? "jpg" : firstEntry.split(".").pop()?.split("?")?.shift()?.toLowerCase();
+  const firstExtension = firstEntry.split(".").pop()?.split("?")?.shift()?.toLowerCase();
+  const extension = isCubemap ? firstExtension === "hdr" ? "hdr-cube" : "cube" : isGainmap ? "webp" : firstEntry.startsWith("data:application/exr") ? "exr" : firstEntry.startsWith("data:application/hdr") ? "hdr" : firstEntry.startsWith("data:image/jpeg") ? "jpg" : firstExtension;
   return { extension, isCubemap, isGainmap };
 }
 function getLoader(extension) {
-  const loader = extension === "cube" ? webgpu.CubeTextureLoader : extension === "hdr" ? HDRLoader_js.HDRLoader : extension === "exr" ? EXRLoader_js.EXRLoader : extension === "jpg" || extension === "jpeg" ? UltraHDRLoader_js.UltraHDRLoader : extension === "webp" ? gainmapJs.GainMapLoader : null;
+  const loader = extension === "cube" ? webgpu.CubeTextureLoader : extension === "hdr-cube" ? HDRCubeTextureLoader_js.HDRCubeTextureLoader : extension === "hdr" ? HDRLoader_js.HDRLoader : extension === "exr" ? EXRLoader_js.EXRLoader : extension === "jpg" || extension === "jpeg" ? UltraHDRLoader_js.UltraHDRLoader : extension === "webp" ? gainmapJs.GainMapLoader : null;
   return loader;
 }
 
-function useStore() {
-  const store = React.useContext(context);
-  if (!store) throw new Error("R3F: Hooks can only be used within the Canvas component!");
-  return store;
-}
-function useThree$1(selector = (state) => state, equalityFn) {
-  return useStore()(selector, equalityFn);
-}
 function useInstanceHandle(ref) {
   const instance = React.useRef(null);
   React.useImperativeHandle(instance, () => ref.current.__r3f, [ref]);
@@ -1693,22 +1445,28 @@ function addTail(callback) {
   return scheduler.getScheduler().onIdle(callback);
 }
 function invalidate(state, frames = 1, stackFrames = false) {
-  scheduler.getScheduler().invalidate(frames, stackFrames);
+  const rootId = state?.internal?.rootId;
+  const scheduler$1 = scheduler.getScheduler();
+  if (rootId) scheduler$1.invalidateRoot(rootId, frames, stackFrames);
+  else scheduler$1.invalidate(frames, stackFrames);
 }
-function advance(timestamp) {
-  scheduler.getScheduler().step(timestamp);
+function advance(timestamp, runGlobalEffects, state) {
+  const rootId = state?.internal?.rootId;
+  const scheduler$1 = scheduler.getScheduler();
+  if (rootId) scheduler$1.stepRoot(rootId, timestamp);
+  else scheduler$1.step(timestamp);
 }
 
-const version = "10.0.0-alpha.3";
+const version = "10.0.0-alpha.5";
 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: {} }, _b;
+var Rm = { exports: {} }, Og = { exports: {} }, _b$1;
 function Kb() {
-  return _b || (_b = 1, (function(Tt) {
+  return _b$1 || (_b$1 = 1, (function(Tt) {
     Tt.exports = function(m) {
       function Yn(t, r, a, l) {
         return new uc(t, r, a, l);
@@ -13558,7 +13316,10 @@ function extend(objects) {
     catalogue[Component] = objects;
     return Component;
   } else {
-    Object.assign(catalogue, objects);
+    for (const name in objects) {
+      const object = objects[name];
+      if (isConstructor(object)) catalogue[name] = object;
+    }
   }
 }
 function validateInstance(type, props) {
@@ -13906,7 +13667,7 @@ const reconciler = /* @__PURE__ */ createReconciler({
   getRootHostContext: () => NO_CONTEXT,
   getChildHostContext: () => NO_CONTEXT,
   commitUpdate(instance, type, oldProps, newProps, fiber) {
-    validateInstance(type, newProps);
+    validateInstance(instance.type, newProps);
     let reconstruct = false;
     if (instance.type === "primitive" && oldProps.object !== newProps.object) reconstruct = true;
     else if (newProps.args?.length !== oldProps.args?.length) reconstruct = true;
@@ -13933,8 +13694,8 @@ const reconciler = /* @__PURE__ */ createReconciler({
     for (const prop in instance.props) {
       const value = instance.props[prop];
       if (isFromRef(value)) {
-        const ref = value[FROM_REF];
-        if (ref.current != null) resolved[prop] = ref.current;
+        const { [FROM_REF]: ref, transform } = value;
+        if (ref.current != null) resolved[prop] = transform ? transform(ref.current) : ref.current;
       }
     }
     if (Object.keys(resolved).length) applyProps(instance.object, resolved);
@@ -14078,6 +13839,335 @@ const reconciler = /* @__PURE__ */ createReconciler({
   getSuspendedCommitReason: (_state, _rootContainer) => null
 });
 
+const INTERNAL_LIB_MARKERS = ["zustand", "setState", "Object.assign"];
+function isInternalRendererAccess(stack, callerDepth = 2) {
+  if (!stack) return false;
+  const caller = stack.split("\n")[callerDepth] ?? "";
+  return INTERNAL_LIB_MARKERS.some((m) => caller.includes(m));
+}
+
+const createStore = (invalidate, advance) => {
+  const rootStore = traditional.createWithEqualityFn((set, get) => {
+    const position = new webgpu.Vector3();
+    const defaultTarget = new webgpu.Vector3();
+    const tempTarget = new webgpu.Vector3();
+    function getCurrentViewport(camera = get().camera, target = defaultTarget, size = get().size) {
+      const { width, height, top, left } = size;
+      const aspect = width / height;
+      if (target.isVector3) tempTarget.copy(target);
+      else tempTarget.set(...target);
+      const distance = camera.getWorldPosition(position).distanceTo(tempTarget);
+      if (isOrthographicCamera(camera)) {
+        return { width: width / camera.zoom, height: height / camera.zoom, top, left, factor: 1, distance, aspect };
+      } else {
+        const fov = camera.fov * Math.PI / 180;
+        const h = 2 * Math.tan(fov / 2) * distance;
+        const w = h * (width / height);
+        return { width: w, height: h, top, left, factor: width / w, distance, aspect };
+      }
+    }
+    let performanceTimeout = void 0;
+    const setPerformanceCurrent = (current) => set((state2) => ({ performance: { ...state2.performance, current } }));
+    const pointer = new webgpu.Vector2();
+    const rootState = {
+      set,
+      get,
+      // Mock objects that have to be configured
+      // primaryStore is set after store creation (self-reference for primary, primary's store for secondary)
+      primaryStore: null,
+      gl: null,
+      renderer: null,
+      camera: null,
+      frustum: new webgpu.Frustum(),
+      autoUpdateFrustum: true,
+      raycaster: null,
+      events: {
+        priority: 1,
+        enabled: true,
+        connected: false,
+        frameTimedRaycasts: true,
+        alwaysFireOnScroll: true,
+        updateOnFrame: false
+      },
+      scene: null,
+      rootScene: null,
+      xr: null,
+      inspector: null,
+      invalidate: (frames = 1, stackFrames = false) => invalidate(get(), frames, stackFrames),
+      advance: (timestamp, runGlobalEffects) => advance(timestamp, runGlobalEffects, get()),
+      textureColorSpace: webgpu.SRGBColorSpace,
+      isLegacy: false,
+      webGPUSupported: false,
+      isNative: false,
+      controls: null,
+      pointer,
+      mouse: pointer,
+      frameloop: "always",
+      onPointerMissed: void 0,
+      onDragOverMissed: void 0,
+      onDropMissed: void 0,
+      performance: {
+        current: 1,
+        min: 0.5,
+        max: 1,
+        debounce: 200,
+        regress: () => {
+          const state2 = get();
+          if (performanceTimeout) clearTimeout(performanceTimeout);
+          if (state2.performance.current !== state2.performance.min) setPerformanceCurrent(state2.performance.min);
+          performanceTimeout = setTimeout(
+            () => setPerformanceCurrent(get().performance.max),
+            state2.performance.debounce
+          );
+        }
+      },
+      size: { width: 0, height: 0, top: 0, left: 0 },
+      viewport: {
+        initialDpr: 0,
+        dpr: 0,
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0,
+        aspect: 0,
+        distance: 0,
+        factor: 0,
+        getCurrentViewport
+      },
+      setEvents: (events) => set((state2) => ({ ...state2, events: { ...state2.events, ...events } })),
+      setSize: (width, height, top, left) => {
+        const state2 = get();
+        if (width === void 0) {
+          set({ _sizeImperative: false });
+          if (state2._sizeProps) {
+            const { width: propW, height: propH } = state2._sizeProps;
+            if (propW !== void 0 || propH !== void 0) {
+              const currentSize = state2.size;
+              const newSize = {
+                width: propW ?? currentSize.width,
+                height: propH ?? currentSize.height,
+                top: currentSize.top,
+                left: currentSize.left
+              };
+              set((s) => ({
+                size: newSize,
+                viewport: { ...s.viewport, ...getCurrentViewport(state2.camera, defaultTarget, newSize) }
+              }));
+              get().invalidate();
+            }
+          }
+          return;
+        }
+        const w = width;
+        const h = height ?? width;
+        const t = top ?? state2.size.top;
+        const l = left ?? state2.size.left;
+        const size = { width: w, height: h, top: t, left: l };
+        set((s) => ({
+          size,
+          viewport: { ...s.viewport, ...getCurrentViewport(state2.camera, defaultTarget, size) },
+          _sizeImperative: true
+        }));
+        get().invalidate();
+      },
+      setDpr: (dpr) => set((state2) => {
+        const resolved = calculateDpr(dpr);
+        return { viewport: { ...state2.viewport, dpr: resolved, initialDpr: state2.viewport.initialDpr || resolved } };
+      }),
+      setFrameloop: (frameloop = "always") => {
+        const rootId = get().internal.rootId;
+        if (rootId) scheduler.getScheduler().setRootFrameloop(rootId, frameloop);
+        set(() => ({ frameloop }));
+      },
+      setError: (error) => set(() => ({ error })),
+      error: null,
+      //* TSL State (managed via hooks: useUniforms, useNodes, useBuffers, useGPUStorage, useTextures, useRenderPipeline) ==============================
+      uniforms: {},
+      nodes: {},
+      buffers: {},
+      gpuStorage: {},
+      textures: /* @__PURE__ */ new Map(),
+      _textureRefs: /* @__PURE__ */ new Map(),
+      renderPipeline: null,
+      passes: {},
+      _hmrVersion: 0,
+      _sizeImperative: false,
+      _sizeProps: null,
+      previousRoot: void 0,
+      internal: {
+        // Events
+        interaction: [],
+        subscribers: [],
+        // Per-pointer state (new unified structure)
+        pointerMap: /* @__PURE__ */ new Map(),
+        pointerDirty: /* @__PURE__ */ new Map(),
+        lastEvent: React__namespace.createRef(),
+        // Deprecated but kept for backwards compatibility
+        hovered: /* @__PURE__ */ new Map(),
+        initialClick: [0, 0],
+        initialHits: [],
+        capturedMap: /* @__PURE__ */ new Map(),
+        // Visibility tracking (onFramed, onOccluded, onVisible)
+        visibilityRegistry: /* @__PURE__ */ new Map(),
+        // Occlusion system (WebGPU only)
+        occlusionEnabled: false,
+        occlusionObserver: null,
+        occlusionCache: /* @__PURE__ */ new Map(),
+        helperGroup: null,
+        // Updates
+        active: false,
+        frames: 0,
+        priority: 0,
+        subscribe: (ref, priority, store) => {
+          const internal = get().internal;
+          internal.priority = internal.priority + (priority > 0 ? 1 : 0);
+          internal.subscribers.push({ ref, priority, store });
+          internal.subscribers = internal.subscribers.sort((a, b) => a.priority - b.priority);
+          return () => {
+            const internal2 = get().internal;
+            if (internal2?.subscribers) {
+              internal2.priority = internal2.priority - (priority > 0 ? 1 : 0);
+              internal2.subscribers = internal2.subscribers.filter((s) => s.ref !== ref);
+            }
+          };
+        },
+        // Renderer Storage (single source of truth)
+        actualRenderer: null,
+        // Scheduler for useFrameNext (initialized in renderer.tsx)
+        scheduler: null,
+        // Replaces the default render call when set (see setRenderOverride)
+        renderOverride: null
+      }
+    };
+    return rootState;
+  });
+  const state = rootStore.getState();
+  Object.defineProperty(state, "gl", {
+    get() {
+      const currentState = rootStore.getState();
+      if (!currentState.isLegacy && currentState.internal.actualRenderer) {
+        const stack = new Error().stack || "";
+        if (!isInternalRendererAccess(stack)) {
+          const cleanedStack = stack.split("\n").slice(2).join("\n") || "Stack trace unavailable";
+          notifyDepreciated({
+            heading: "Accessing state.gl in WebGPU mode",
+            body: "Please use state.renderer instead. state.gl is deprecated and will be removed in future versions.\n\nFor backwards compatibility, state.gl currently maps to state.renderer, but this may cause issues with libraries expecting WebGLRenderer.\n\nAccessed from:\n" + cleanedStack
+          });
+        }
+      }
+      return currentState.internal.actualRenderer;
+    },
+    set(value) {
+      rootStore.getState().internal.actualRenderer = value;
+    },
+    enumerable: true,
+    configurable: true
+  });
+  Object.defineProperty(state, "renderer", {
+    get() {
+      return rootStore.getState().internal.actualRenderer;
+    },
+    set(value) {
+      rootStore.getState().internal.actualRenderer = value;
+    },
+    enumerable: true,
+    configurable: true
+  });
+  let oldScene = state.scene;
+  rootStore.subscribe(() => {
+    const currentState = rootStore.getState();
+    const { scene, rootScene, set } = currentState;
+    if (scene !== oldScene) {
+      oldScene = scene;
+      if (scene?.isScene && scene !== rootScene) {
+        set({ rootScene: scene });
+      }
+    }
+  });
+  let oldSize = state.size;
+  let oldDpr = state.viewport.dpr;
+  let oldCamera = state.camera;
+  rootStore.subscribe(() => {
+    const { camera, size, viewport, set, internal } = rootStore.getState();
+    const actualRenderer = internal.actualRenderer;
+    const canvasTarget = internal.canvasTarget;
+    if (size.width !== oldSize.width || size.height !== oldSize.height || viewport.dpr !== oldDpr) {
+      oldSize = size;
+      oldDpr = viewport.dpr;
+      updateCamera(camera, size);
+      const resizeTarget = canvasTarget ?? actualRenderer;
+      if (viewport.dpr > 0) resizeTarget.setPixelRatio(viewport.dpr);
+      resizeTarget.setSize(size.width, size.height, false);
+      const activeTarget = actualRenderer.getCanvasTarget?.();
+      if (!canvasTarget || activeTarget !== canvasTarget) internal.canvasTargetSizeDirty = true;
+    }
+    if (camera !== oldCamera) {
+      oldCamera = camera;
+      const { rootScene } = rootStore.getState();
+      if (camera && rootScene && !camera.parent) {
+        rootScene.add(camera);
+      }
+      set((state2) => ({ viewport: { ...state2.viewport, ...state2.viewport.getCurrentViewport(camera) } }));
+      const currentState = rootStore.getState();
+      if (currentState.autoUpdateFrustum && camera) {
+        updateFrustum(camera, currentState.frustum);
+      }
+    }
+  });
+  rootStore.subscribe((state2) => invalidate(state2));
+  return rootStore;
+};
+
+const R3F_EXTENSIONS = Symbol.for("@react-three/fiber.extensions");
+function getRegistry() {
+  return globalThis[R3F_EXTENSIONS] ?? (globalThis[R3F_EXTENSIONS] = {
+    extensions: /* @__PURE__ */ new Map(),
+    roots: /* @__PURE__ */ new Set(),
+    applied: /* @__PURE__ */ new WeakMap()
+  });
+}
+function setupRoot(registry, store, extension) {
+  let applied = registry.applied.get(store);
+  if (!applied) registry.applied.set(store, applied = /* @__PURE__ */ new Map());
+  if (applied.has(extension.name)) return;
+  applied.set(extension.name, extension);
+  const patch = extension.setup?.(store);
+  if (patch) store.setState(patch);
+}
+function registerRootExtension(extension) {
+  const registry = getRegistry();
+  registry.extensions.set(extension.name, extension);
+  for (const store of registry.roots) setupRoot(registry, store, extension);
+  return () => {
+    if (registry.extensions.get(extension.name) === extension) registry.extensions.delete(extension.name);
+  };
+}
+function setRenderOverride(store, render) {
+  store.getState().internal.renderOverride = render;
+}
+function attachRootExtensions(store) {
+  const registry = getRegistry();
+  registry.roots.add(store);
+  for (const extension of registry.extensions.values()) setupRoot(registry, store, extension);
+}
+function current(registry, setUpBy) {
+  return registry.extensions.get(setUpBy.name) ?? setUpBy;
+}
+function detachRootExtensions(store) {
+  const registry = getRegistry();
+  if (!registry.roots.delete(store)) return;
+  const applied = registry.applied.get(store);
+  registry.applied.delete(store);
+  if (!applied) return;
+  for (const setUpBy of applied.values()) current(registry, setUpBy).dispose?.(store);
+}
+function notifyRootExtensionsHmr(store) {
+  const registry = getRegistry();
+  const applied = registry.applied.get(store);
+  if (!applied) return;
+  for (const setUpBy of applied.values()) current(registry, setUpBy).hmr?.(store);
+}
+
 const isRenderer = (def) => !!def?.render;
 const _roots = /* @__PURE__ */ new Map();
 const shallowLoose = { objects: "shallow", strict: false };
@@ -14215,9 +14305,8 @@ function createRoot(canvas) {
               if (!renderer.hasInitialized?.()) {
                 const size2 = computeInitialSize(canvas, propsSize);
                 if (size2.width > 0 && size2.height > 0) {
-                  const pixelRatio = calculateDpr(dpr);
-                  canvas.width = size2.width * pixelRatio;
-                  canvas.height = size2.height * pixelRatio;
+                  renderer.setPixelRatio(calculateDpr(dpr));
+                  renderer.setSize(size2.width, size2.height, false);
                 }
                 await renderer.init();
               }
@@ -14226,7 +14315,7 @@ function createRoot(canvas) {
               state.internal.actualRenderer = renderer;
               state.set({ webGPUSupported: isWebGPUBackend, renderer, primaryStore: store });
               if (canvasId && !state.internal.isSecondary) {
-                const canvasTarget = new webgpu.CanvasTarget(canvas);
+                const canvasTarget = renderer.getCanvasTarget?.();
                 const unregisterPrimary = registerPrimary(canvasId, renderer, store);
                 state.set((prev) => ({
                   internal: {
@@ -14340,7 +14429,7 @@ function createRoot(canvas) {
         const handleXRFrame = (timestamp, _frame) => {
           const state2 = store.getState();
           if (state2.frameloop === "never") return;
-          advance(timestamp);
+          advance(timestamp, true, state2);
         };
         const actualRenderer = state.internal.actualRenderer;
         const handleSessionChange = () => {
@@ -14348,7 +14437,7 @@ function createRoot(canvas) {
           const renderer2 = state2.internal.actualRenderer;
           actualRenderer.xr.enabled = actualRenderer.xr.isPresenting;
           renderer2.xr.setAnimationLoop(renderer2.xr.isPresenting ? handleXRFrame : null);
-          if (!renderer2.xr.isPresenting) invalidate();
+          if (!renderer2.xr.isPresenting) invalidate(state2);
         };
         const xr = {
           connect() {
@@ -14430,14 +14519,23 @@ function createRoot(canvas) {
         const newRootId = canvasId || scheduler$1.generateRootId();
         const unregisterRoot = scheduler$1.registerRoot(newRootId, {
           getState: () => store.getState(),
-          onError: (err) => store.getState().setError(err)
+          onError: (err) => store.getState().setError(err),
+          frameloop: store.getState().frameloop,
+          before: schedulerConfig?.before,
+          after: schedulerConfig?.after,
+          order: schedulerConfig?.order
         });
         const unregisterCanvasTarget = scheduler$1.register(
           () => {
             const state2 = store.getState();
-            if (state2.internal.isMultiCanvas && state2.internal.canvasTarget) {
+            const canvasTarget = state2.internal.canvasTarget;
+            if (canvasTarget) {
               const renderer2 = state2.internal.actualRenderer;
-              renderer2.setCanvasTarget(state2.internal.canvasTarget);
+              if (renderer2.getCanvasTarget() !== canvasTarget) renderer2.setCanvasTarget(canvasTarget);
+              if (state2.internal.canvasTargetSizeDirty) {
+                state2.internal.canvasTargetSizeDirty = false;
+                renderer2.backend?.updateSize?.();
+              }
             }
           },
           {
@@ -14493,7 +14591,8 @@ function createRoot(canvas) {
             const userHandlesRender = scheduler$1.hasUserJobsInPhase("render", newRootId);
             if (userHandlesRender || state2.internal.priority) return;
             try {
-              if (state2.renderPipeline?.render) state2.renderPipeline.render();
+              const renderOverride = state2.internal.renderOverride;
+              if (renderOverride) renderOverride();
               else if (renderer2?.render) renderer2.render(state2.scene, state2.camera);
             } catch (error) {
               state2.setError(error instanceof Error ? error : new Error(String(error)));
@@ -14506,8 +14605,7 @@ function createRoot(canvas) {
             phase: "render",
             system: true,
             // Internal flag: this is a system job, not user-controlled
-            // Apply scheduler config for render ordering and rate limiting
-            ...schedulerConfig?.after && { after: schedulerConfig.after },
+            // FPS throttles only the default render job; Canvas ordering belongs to the root.
             ...schedulerConfig?.fps && { fps: schedulerConfig.fps }
           }
         );
@@ -14526,8 +14624,22 @@ function createRoot(canvas) {
             scheduler: scheduler$1
           }
         }));
+      } else {
+        const constraintsChanged = !is.equ(schedulerConfig?.before, lastConfiguredProps.schedulerBefore, shallowLoose) || !is.equ(schedulerConfig?.after, lastConfiguredProps.schedulerAfter, shallowLoose);
+        if (constraintsChanged) {
+          scheduler$1.setRootConstraints(rootId, {
+            before: schedulerConfig?.before,
+            after: schedulerConfig?.after
+          });
+        }
+        if (schedulerConfig?.order !== lastConfiguredProps.schedulerOrder) {
+          scheduler$1.setRootOrder(rootId, schedulerConfig?.order ?? 0);
+        }
       }
-      scheduler$1.frameloop = frameloop;
+      lastConfiguredProps.schedulerBefore = schedulerConfig?.before;
+      lastConfiguredProps.schedulerAfter = schedulerConfig?.after;
+      lastConfiguredProps.schedulerOrder = schedulerConfig?.order;
+      attachRootExtensions(store);
       onCreated = onCreatedCallback;
       configured = true;
       resolve();
@@ -14569,18 +14681,24 @@ function unmountComponentAtNode(canvas, callback) {
   const fiber = root?.fiber;
   if (fiber) {
     const state = root?.store.getState();
-    if (state) state.internal.active = false;
+    if (state) {
+      state.internal.active = false;
+      const unregisterRoot = state.internal.unregisterRoot;
+      if (unregisterRoot) {
+        unregisterRoot();
+        state.internal.unregisterRoot = void 0;
+      }
+    }
     reconciler.updateContainer(null, fiber, null, () => {
+      if (root?.store) detachRootExtensions(root.store);
       if (state) {
         setTimeout(() => {
           try {
             const renderer = state.internal.actualRenderer;
-            const unregisterRoot = state.internal.unregisterRoot;
-            if (unregisterRoot) unregisterRoot();
             const unregisterPrimary = state.internal.unregisterPrimary;
             if (unregisterPrimary) unregisterPrimary();
             const canvasTarget = state.internal.canvasTarget;
-            if (canvasTarget?.dispose) canvasTarget.dispose();
+            if (state.internal.isSecondary && canvasTarget?.dispose) canvasTarget.dispose();
             state.events.disconnect?.();
             cleanupHelperGroup(root.store);
             if (state.isLegacy && renderer) {
@@ -14650,11 +14768,24 @@ function PortalInner({ state = {}, children, container }) {
       }
     };
   }, [portalScene, container, injectScene]);
+  const lastRootState = React.useRef(null);
   const inject = useMutableCallback((rootState, injectState) => {
+    const followed = {};
+    const lastRoot = lastRootState.current;
+    if (lastRoot) {
+      for (const key in rootState) {
+        const field = key;
+        const changed = rootState[field] !== lastRoot[field];
+        const inherited = !(key in rest) && injectState[field] === lastRoot[field];
+        if (changed && inherited) followed[field] = rootState[field];
+      }
+    }
+    lastRootState.current = rootState;
     const resolvedSize = { ...rootState.size, ...injectState.size, ...size };
     let viewport = void 0;
-    if (injectState.camera && (size || injectState.size)) {
-      const camera = injectState.camera;
+    const portalCamera = followed.camera ?? injectState.camera;
+    if (portalCamera && (size || injectState.size)) {
+      const camera = portalCamera;
       viewport = rootState.viewport.getCurrentViewport(camera, new webgpu.Vector3(), resolvedSize);
       if (camera !== rootState.camera) updateCamera(camera, resolvedSize);
     }
@@ -14663,6 +14794,7 @@ function PortalInner({ state = {}, children, container }) {
       // The intersect consists of the previous root state
       ...rootState,
       ...injectState,
+      ...followed,
       // Portals have their own scene - always a real THREE.Scene (injected if needed)
       scene: portalScene,
       // rootScene always points to the actual THREE.Scene, even inside portals
@@ -14721,16 +14853,11 @@ function setEnvProps(background, scene, defaultScene, texture, sceneProps = {})
   const oldbg = target.background;
   const oldenv = target.environment;
   const oldSceneProps = {
-    // @ts-ignore
     backgroundBlurriness: target.backgroundBlurriness,
-    // @ts-ignore
     backgroundIntensity: target.backgroundIntensity,
-    // @ts-ignore
-    backgroundRotation: target.backgroundRotation?.clone?.() ?? [0, 0, 0],
-    // @ts-ignore
+    backgroundRotation: target.backgroundRotation.clone(),
     environmentIntensity: target.environmentIntensity,
-    // @ts-ignore
-    environmentRotation: target.environmentRotation?.clone?.() ?? [0, 0, 0]
+    environmentRotation: target.environmentRotation.clone()
   };
   if (background !== "only") target.environment = texture;
   if (background) target.background = texture;
@@ -14937,151 +15064,22 @@ function parseBackground(background) {
     return { color: background, background: true };
   }
   if (background.isColor) {
-    return { color: background, background: true };
-  }
-  return null;
-}
-
-function parseRendererConfig(rendererProp) {
-  const isRendererConfig = typeof rendererProp === "object" && rendererProp !== null && !("render" in rendererProp) && ("primaryCanvas" in rendererProp || "scheduler" in rendererProp);
-  if (isRendererConfig) {
-    const { primaryCanvas: pc, scheduler: sc, ...rest } = rendererProp;
-    return {
-      primaryCanvas: pc,
-      scheduler: sc,
-      renderer: Object.keys(rest).length > 0 ? rest : rendererProp
-    };
-  }
-  return { primaryCanvas: void 0, scheduler: void 0, renderer: rendererProp };
-}
-
-const RESOURCE_KINDS = ["nodes", "uniforms", "buffers", "gpuStorage"];
-const ROOT_SCOPE = "";
-const registries = /* @__PURE__ */ new WeakMap();
-function getKindRegistry(store, kind) {
-  let registry = registries.get(store);
-  if (!registry) {
-    registry = {
-      nodes: { valid: /* @__PURE__ */ new Set(), staged: /* @__PURE__ */ new Map() },
-      uniforms: { valid: /* @__PURE__ */ new Set(), staged: /* @__PURE__ */ new Map() },
-      buffers: { valid: /* @__PURE__ */ new Set(), staged: /* @__PURE__ */ new Map() },
-      gpuStorage: { valid: /* @__PURE__ */ new Set(), staged: /* @__PURE__ */ new Map() }
-    };
-    registries.set(store, registry);
-  }
-  return registry[kind];
-}
-function resolvePrimary$1(store) {
-  return store.getState().primaryStore ?? store;
-}
-function isScopeValid(store, kind, scopeKey) {
-  return getKindRegistry(store, kind).valid.has(scopeKey);
-}
-function peekStaged(store, kind, scopeKey) {
-  return getKindRegistry(store, kind).staged.get(scopeKey);
-}
-function stageEntries(store, kind, scopeKey, entries) {
-  const { staged } = getKindRegistry(store, kind);
-  const current = staged.get(scopeKey);
-  if (current) Object.assign(current, entries);
-  else staged.set(scopeKey, { ...entries });
-}
-function readCommittedScope(map, scopeKey, isLeaf) {
-  if (scopeKey === ROOT_SCOPE) {
-    const leaves = {};
-    for (const [key, value] of Object.entries(map)) if (isLeaf(value)) leaves[key] = value;
-    return leaves;
-  }
-  const scopeData = map[scopeKey];
-  if (scopeData && typeof scopeData === "object" && !isLeaf(scopeData)) return scopeData;
-  return {};
-}
-function withStagedOverlay(store, kind, committed) {
-  const { staged } = getKindRegistry(store, kind);
-  if (staged.size === 0) return committed;
-  const view = { ...committed };
-  for (const [scopeKey, entries] of staged) {
-    if (scopeKey === ROOT_SCOPE) Object.assign(view, entries);
-    else view[scopeKey] = { ...view[scopeKey], ...entries };
-  }
-  return view;
-}
-function flushStagedScope(store, kind, scopeKey, isLeaf) {
-  const registry = getKindRegistry(store, kind);
-  const staged = registry.staged.get(scopeKey);
-  if (!staged) return;
-  registry.staged.delete(scopeKey);
-  const replace = !registry.valid.has(scopeKey);
-  store.setState((state) => {
-    const map = state[kind];
-    if (scopeKey === ROOT_SCOPE) {
-      if (!replace) return { [kind]: { ...map, ...staged } };
-      const next = {};
-      for (const [key, value] of Object.entries(map)) if (!isLeaf(value)) next[key] = value;
-      return { [kind]: { ...next, ...staged } };
-    }
-    const current = replace ? {} : map[scopeKey] ?? {};
-    return { [kind]: { ...map, [scopeKey]: { ...current, ...staged } } };
-  });
-  registry.valid.add(scopeKey);
-}
-function invalidateResource(store, kind, scopeKey) {
-  const registry = getKindRegistry(store, kind);
-  if (scopeKey === void 0) {
-    registry.valid.clear();
-    registry.staged.clear();
-  } else {
-    registry.valid.delete(scopeKey);
-    registry.staged.delete(scopeKey);
-  }
-}
-function rebuildResource(store, kind, userScope) {
-  const primary = resolvePrimary$1(store);
-  invalidateResource(primary, kind, userScope === "root" ? ROOT_SCOPE : userScope);
-  primary.setState((state) => ({ _hmrVersion: state._hmrVersion + 1 }));
-}
-function invalidateAllResources(store) {
-  for (const kind of RESOURCE_KINDS) invalidateResource(store, kind);
-}
-function removeResourceEntries(store, kind, names, scope, isLeaf) {
-  const staged = peekStaged(store, kind, scope ?? ROOT_SCOPE);
-  if (staged) for (const name of names) delete staged[name];
-  store.setState((state) => {
-    const map = state[kind];
-    if (scope) {
-      const currentScope = { ...map[scope] };
-      for (const name of names) delete currentScope[name];
-      return { [kind]: { ...map, [scope]: currentScope } };
-    }
-    const next = { ...map };
-    for (const name of names) if (isLeaf(next[name])) delete next[name];
-    return { [kind]: next };
-  });
-}
-function clearResourceEntries(store, kind, scope, isLeaf) {
-  const registry = getKindRegistry(store, kind);
-  if (scope && scope !== "root") registry.staged.delete(scope);
-  else if (scope === "root") registry.staged.delete(ROOT_SCOPE);
-  else registry.staged.clear();
-  store.setState((state) => {
-    const map = state[kind];
-    if (scope && scope !== "root") {
-      const { [scope]: _, ...rest } = map;
-      return { [kind]: rest };
-    }
-    if (scope === "root") {
-      const next = {};
-      for (const [key, value] of Object.entries(map)) if (!isLeaf(value)) next[key] = value;
-      return { [kind]: next };
-    }
-    return { [kind]: {} };
-  });
+    return { color: background, background: true };
+  }
+  return null;
 }
 
-function clearHmrCaches(store) {
-  const primary = store.getState().primaryStore ?? store;
-  invalidateAllResources(primary);
-  primary.setState((state) => ({ _hmrVersion: state._hmrVersion + 1 }));
+function parseRendererConfig(rendererProp) {
+  const isRendererConfig = typeof rendererProp === "object" && rendererProp !== null && !("render" in rendererProp) && ("primaryCanvas" in rendererProp || "scheduler" in rendererProp);
+  if (isRendererConfig) {
+    const { primaryCanvas: pc, scheduler: sc, ...rest } = rendererProp;
+    return {
+      primaryCanvas: pc,
+      scheduler: sc,
+      renderer: Object.keys(rest).length > 0 ? rest : rendererProp
+    };
+  }
+  return { primaryCanvas: void 0, scheduler: void 0, renderer: rendererProp };
 }
 
 function CanvasImpl({
@@ -15121,9 +15119,9 @@ function CanvasImpl({
   React__namespace.useMemo(() => extend(THREE), []);
   const Bridge = useBridge();
   const backgroundProps = React__namespace.useMemo(() => parseBackground(background), [background]);
-  const hasInitialSizeRef = React__namespace.useRef(false);
+  const [hasInitialSize, setHasInitialSize] = React__namespace.useState(false);
   const measureConfig = React__namespace.useMemo(() => {
-    if (!hasInitialSizeRef.current) {
+    if (!hasInitialSize) {
       return {
         ...resize,
         scroll: resize?.scroll ?? true,
@@ -15135,7 +15133,7 @@ function CanvasImpl({
       debounce: { scroll: 50, resize: 0 },
       ...resize
     };
-  }, [resize, hasInitialSizeRef.current]);
+  }, [hasInitialSize, resize]);
   const [containerRef, containerRect] = useMeasure__default(measureConfig);
   const effectiveSize = React__namespace.useMemo(() => {
     let w = width ?? containerRect.width;
@@ -15151,9 +15149,7 @@ function CanvasImpl({
       left: containerRect.left
     };
   }, [width, height, containerRect, forceEven]);
-  if (!hasInitialSizeRef.current && effectiveSize.width > 0 && effectiveSize.height > 0) {
-    hasInitialSizeRef.current = true;
-  }
+  if (!hasInitialSize && effectiveSize.width > 0 && effectiveSize.height > 0) setHasInitialSize(true);
   const canvasRef = React__namespace.useRef(null);
   const divRef = React__namespace.useRef(null);
   React__namespace.useImperativeHandle(ref, () => canvasRef.current);
@@ -15267,6 +15263,7 @@ function CanvasImpl({
     const canvas = canvasRef.current;
     if (canvas) {
       return () => {
+        if (canvas.isConnected) return;
         unmountComponentAtNode(canvas);
         root.current = null;
       };
@@ -15279,7 +15276,7 @@ function CanvasImpl({
     const handleHMR = () => {
       queueMicrotask(() => {
         const rootEntry = _roots.get(canvas);
-        if (rootEntry?.store) clearHmrCaches(rootEntry.store);
+        if (rootEntry?.store) notifyRootExtensionsHmr(rootEntry.store);
       });
     };
     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) {
@@ -15325,20 +15322,159 @@ function CanvasImpl({
     }
   );
 }
-function Canvas(props) {
+function Canvas$1(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(itsFine.FiberProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(CanvasImpl, { ...props }) });
 }
 
+const RESOURCE_KINDS = ["nodes", "uniforms", "buffers", "gpuStorage"];
+const ROOT_SCOPE = "";
+const registries = /* @__PURE__ */ new WeakMap();
+function getKindRegistry(store, kind) {
+  let registry = registries.get(store);
+  if (!registry) {
+    registry = {
+      nodes: { valid: /* @__PURE__ */ new Set(), staged: /* @__PURE__ */ new Map() },
+      uniforms: { valid: /* @__PURE__ */ new Set(), staged: /* @__PURE__ */ new Map() },
+      buffers: { valid: /* @__PURE__ */ new Set(), staged: /* @__PURE__ */ new Map() },
+      gpuStorage: { valid: /* @__PURE__ */ new Set(), staged: /* @__PURE__ */ new Map() }
+    };
+    registries.set(store, registry);
+  }
+  return registry[kind];
+}
+function resolvePrimary$1(store) {
+  return store.getState().primaryStore ?? store;
+}
+function isScopeValid(store, kind, scopeKey) {
+  return getKindRegistry(store, kind).valid.has(scopeKey);
+}
+function peekStaged(store, kind, scopeKey) {
+  return getKindRegistry(store, kind).staged.get(scopeKey);
+}
+function stageEntries(store, kind, scopeKey, entries) {
+  const { staged } = getKindRegistry(store, kind);
+  const current = staged.get(scopeKey);
+  if (current) Object.assign(current, entries);
+  else staged.set(scopeKey, { ...entries });
+}
+function readCommittedScope(map, scopeKey, isLeaf) {
+  if (scopeKey === ROOT_SCOPE) {
+    const leaves = {};
+    for (const [key, value] of Object.entries(map)) if (isLeaf(value)) leaves[key] = value;
+    return leaves;
+  }
+  const scopeData = map[scopeKey];
+  if (scopeData && typeof scopeData === "object" && !isLeaf(scopeData)) return scopeData;
+  return {};
+}
+function withStagedOverlay(store, kind, committed) {
+  const { staged } = getKindRegistry(store, kind);
+  if (staged.size === 0) return committed;
+  const view = { ...committed };
+  for (const [scopeKey, entries] of staged) {
+    if (scopeKey === ROOT_SCOPE) Object.assign(view, entries);
+    else view[scopeKey] = { ...view[scopeKey], ...entries };
+  }
+  return view;
+}
+function flushStagedScope(store, kind, scopeKey, isLeaf) {
+  const registry = getKindRegistry(store, kind);
+  const staged = registry.staged.get(scopeKey);
+  if (!staged) return;
+  registry.staged.delete(scopeKey);
+  const replace = !registry.valid.has(scopeKey);
+  store.setState((state) => {
+    const map = state[kind];
+    if (scopeKey === ROOT_SCOPE) {
+      if (!replace) return { [kind]: { ...map, ...staged } };
+      const next = {};
+      for (const [key, value] of Object.entries(map)) if (!isLeaf(value)) next[key] = value;
+      return { [kind]: { ...next, ...staged } };
+    }
+    const current = replace ? {} : map[scopeKey] ?? {};
+    return { [kind]: { ...map, [scopeKey]: { ...current, ...staged } } };
+  });
+  registry.valid.add(scopeKey);
+}
+function invalidateResource(store, kind, scopeKey) {
+  const registry = getKindRegistry(store, kind);
+  if (scopeKey === void 0) {
+    registry.valid.clear();
+    registry.staged.clear();
+  } else {
+    registry.valid.delete(scopeKey);
+    registry.staged.delete(scopeKey);
+  }
+}
+function rebuildResource(store, kind, userScope) {
+  const primary = resolvePrimary$1(store);
+  invalidateResource(primary, kind, userScope === "root" ? ROOT_SCOPE : userScope);
+  primary.setState((state) => ({ _hmrVersion: state._hmrVersion + 1 }));
+}
+function invalidateAllResources(store) {
+  for (const kind of RESOURCE_KINDS) invalidateResource(store, kind);
+}
+function removeResourceEntries(store, kind, names, scope, isLeaf) {
+  const staged = peekStaged(store, kind, scope ?? ROOT_SCOPE);
+  if (staged) for (const name of names) delete staged[name];
+  store.setState((state) => {
+    const map = state[kind];
+    if (scope) {
+      const currentScope = { ...map[scope] };
+      for (const name of names) delete currentScope[name];
+      return { [kind]: { ...map, [scope]: currentScope } };
+    }
+    const next = { ...map };
+    for (const name of names) if (isLeaf(next[name])) delete next[name];
+    return { [kind]: next };
+  });
+}
+function clearResourceEntries(store, kind, scope, isLeaf) {
+  const registry = getKindRegistry(store, kind);
+  if (scope && scope !== "root") registry.staged.delete(scope);
+  else if (scope === "root") registry.staged.delete(ROOT_SCOPE);
+  else registry.staged.clear();
+  store.setState((state) => {
+    const map = state[kind];
+    if (scope && scope !== "root") {
+      const { [scope]: _, ...rest } = map;
+      return { [kind]: rest };
+    }
+    if (scope === "root") {
+      const next = {};
+      for (const [key, value] of Object.entries(map)) if (!isLeaf(value)) next[key] = value;
+      return { [kind]: next };
+    }
+    return { [kind]: {} };
+  });
+}
+
+const isObjectLike = (value) => value !== null && (typeof value === "object" || typeof value === "function");
+const hasValidLegacyNodeMarkers = (value) => {
+  const hasUuid = "uuid" in value;
+  const hasNodeType = "nodeType" in value;
+  const uuid = Reflect.get(value, "uuid");
+  const nodeType = Reflect.get(value, "nodeType");
+  return (hasUuid || hasNodeType) && (!hasUuid || uuid === void 0 || typeof uuid === "string") && (!hasNodeType || nodeType === void 0 || nodeType === null || typeof nodeType === "string");
+};
+const isUniformNode = (value) => isObjectLike(value) && "isUniformNode" in value && value.isUniformNode === true;
+const isTSLNode = (value) => isObjectLike(value) && (Reflect.get(value, "isNode") === true || Reflect.get(value, "shaderNode") !== void 0 && typeof Reflect.get(value, "id") === "number" || hasValidLegacyNodeMarkers(value));
+const isBufferLike = (value) => ArrayBuffer.isView(value) && !(value instanceof DataView) || isObjectLike(value) && ("isBufferAttribute" in value || "isInterleavedBufferAttribute" in value || isTSLNode(value));
+const isStorageLike = (value) => isObjectLike(value) && ("isTexture" in value || "isData3DTexture" in value || isTSLNode(value));
+
 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;
+var _a, _b;
 const INTERNAL_DATA = Symbol("ScopedStore.data");
-_a = INTERNAL_DATA;
+const INTERNAL_IS_LEAF = Symbol("ScopedStore.isLeaf");
+_b = INTERNAL_DATA, _a = INTERNAL_IS_LEAF;
 const _ScopedStore = class _ScopedStore {
-  constructor(data) {
+  constructor(data, isLeaf) {
+    __publicField(this, _b);
     __publicField(this, _a);
     this[INTERNAL_DATA] = data;
+    this[INTERNAL_IS_LEAF] = isLeaf;
     return new Proxy(this, {
       get(target, prop, receiver) {
         if (typeof prop === "string") {
@@ -15372,10 +15508,10 @@ const _ScopedStore = class _ScopedStore {
    * 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 : {}
-    );
+    const value = this[INTERNAL_DATA][key];
+    const isLeaf = this[INTERNAL_IS_LEAF];
+    const scope = value && typeof value === "object" && !isLeaf(value) ? value : {};
+    return new _ScopedStore(scope, isLeaf);
   }
   /**
    * Check if a key exists in the store.
@@ -15391,8 +15527,8 @@ const _ScopedStore = class _ScopedStore {
   }
 };
 let ScopedStore = _ScopedStore;
-function createScopedStore(data) {
-  return new ScopedStore(data);
+function createScopedStore(data, isLeaf) {
+  return new ScopedStore(data, isLeaf);
 }
 function createLazyCreatorState(state, store) {
   let _uniforms = null;
@@ -15403,22 +15539,22 @@ function createLazyCreatorState(state, store) {
   return Object.create(state, {
     uniforms: {
       get() {
-        return _uniforms ?? (_uniforms = createScopedStore(view("uniforms")));
+        return _uniforms ?? (_uniforms = createScopedStore(view("uniforms"), isUniformNode));
       }
     },
     nodes: {
       get() {
-        return _nodes ?? (_nodes = createScopedStore(view("nodes")));
+        return _nodes ?? (_nodes = createScopedStore(view("nodes"), isTSLNode));
       }
     },
     buffers: {
       get() {
-        return _buffers ?? (_buffers = createScopedStore(view("buffers")));
+        return _buffers ?? (_buffers = createScopedStore(view("buffers"), isBufferLike));
       }
     },
     gpuStorage: {
       get() {
-        return _gpuStorage ?? (_gpuStorage = createScopedStore(view("gpuStorage")));
+        return _gpuStorage ?? (_gpuStorage = createScopedStore(view("gpuStorage"), isStorageLike));
       }
     }
   });
@@ -15438,44 +15574,10 @@ function usePrimaryThree(selector = (state) => state, equalityFn) {
   return primary(selector, equalityFn);
 }
 
-function addTexture(set, key, value) {
-  set((state) => {
-    const newMap = new Map(state.textures);
-    newMap.set(key, value);
-    return { textures: newMap };
-  });
-}
-function addTextures(set, items) {
-  set((state) => {
-    const newMap = new Map(state.textures);
-    const entries = items instanceof Map ? items.entries() : Object.entries(items);
-    for (const [key, value] of entries) {
-      newMap.set(key, value);
-    }
-    return { textures: newMap };
-  });
-}
-function removeTexture(set, key) {
-  set((state) => {
-    const newMap = new Map(state.textures);
-    newMap.delete(key);
-    return { textures: newMap };
-  });
-}
-function removeTextures(set, keys) {
-  set((state) => {
-    const newMap = new Map(state.textures);
-    for (const key of keys) newMap.delete(key);
-    return { textures: newMap };
-  });
-}
-function createTextureOperations(set) {
-  return {
-    add: (key, value) => addTexture(set, key, value),
-    addMultiple: (items) => addTextures(set, items),
-    remove: (key) => removeTexture(set, key),
-    removeMultiple: (keys) => removeTextures(set, keys)
-  };
+function scopedNodeName(scope, name) {
+  const raw = scope ? `${scope}_${name}` : name;
+  const safe = raw.replace(/[^A-Za-z0-9_]/g, "_");
+  return /^[A-Za-z_]/.test(safe) ? safe : `_${safe}`;
 }
 function extractTSLValue(value) {
   if (value === null || value === void 0) return value;
@@ -15514,7 +15616,7 @@ function vectorize(inObject) {
     return extractTSLValue(inObject);
   }
   if (obj.isVector2 || obj.isVector3 || obj.isVector4) return inObject;
-  if (obj.isMatrix3 || obj.isMatrix4) return inObject;
+  if (obj.isMatrix2 || obj.isMatrix3 || obj.isMatrix4) return inObject;
   if (obj.isColor || obj.isEuler || obj.isQuaternion || obj.isSpherical) return inObject;
   if ("r" in obj && "g" in obj && "b" in obj && typeof obj.r === "number" && typeof obj.g === "number" && typeof obj.b === "number") {
     const scale = obj.r > 1 || obj.g > 1 || obj.b > 1 ? 1 / 255 : 1;
@@ -15541,6 +15643,47 @@ function useCompareMemoize(value, deep) {
   return ref.current;
 }
 
+function clearHmrCaches(store) {
+  const primary = store.getState().primaryStore ?? store;
+  invalidateAllResources(primary);
+  primary.setState((state) => ({ _hmrVersion: state._hmrVersion + 1 }));
+}
+
+const SHARED_KEYS = ["uniforms", "nodes", "buffers", "gpuStorage", "_hmrVersion"];
+const following = /* @__PURE__ */ new WeakMap();
+function followPrimary(store) {
+  const primary = store.getState().primaryStore;
+  if (!primary || primary === store) return;
+  const sync = () => {
+    const source = primary.getState();
+    const target = store.getState();
+    let patch = null;
+    for (const key of SHARED_KEYS) {
+      if (target[key] !== source[key]) (patch ?? (patch = {}))[key] = source[key];
+    }
+    if (patch) store.setState(patch);
+  };
+  sync();
+  following.set(store, primary.subscribe(sync));
+}
+function stopFollowing(store) {
+  following.get(store)?.();
+  following.delete(store);
+}
+let registered = false;
+function ensureTSLExtension() {
+  if (registered) return;
+  registered = true;
+  registerRootExtension({
+    name: "@react-three/tsl",
+    setup: followPrimary,
+    dispose: stopFollowing,
+    // Resolves primaryStore itself, so every canvas sharing a renderer refreshes the same resources.
+    hmr: clearHmrCaches
+  });
+}
+
+ensureTSLExtension();
 function useScopedResource(options) {
   const { store, kind, scope, isLeaf, create, prepare, reconcile, input } = options;
   const scopeKey = scope ?? ROOT_SCOPE;
@@ -15572,22 +15715,21 @@ function useScopedResource(options) {
   return entries;
 }
 
-const isUniformNode$1 = (value) => value !== null && typeof value === "object" && "value" in value && "uuid" in value;
 function useUniforms(creatorOrScope, scope) {
   const store = usePrimaryStore();
   const removeUniforms2 = React.useCallback(
-    (names, targetScope) => removeResourceEntries(store, "uniforms", Array.isArray(names) ? names : [names], targetScope, isUniformNode$1),
+    (names, targetScope) => removeResourceEntries(store, "uniforms", Array.isArray(names) ? names : [names], targetScope, isUniformNode),
     [store]
   );
   const clearUniforms = React.useCallback(
-    (targetScope) => clearResourceEntries(store, "uniforms", targetScope, isUniformNode$1),
+    (targetScope) => clearResourceEntries(store, "uniforms", targetScope, isUniformNode),
     [store]
   );
   const rebuildUniforms = React.useCallback(
     (targetScope) => rebuildResource(store, "uniforms", targetScope),
     [store]
   );
-  const inputForMemoization = React.useMemo(() => {
+  const processedInput = React.useMemo(() => {
     let raw = creatorOrScope;
     if (is.fun(creatorOrScope)) {
       const wrappedState = createLazyCreatorState(store.getState(), store);
@@ -15598,23 +15740,24 @@ function useUniforms(creatorOrScope, scope) {
       for (const [key, value] of Object.entries(raw)) {
         normalized[key] = vectorize(value);
       }
-      return normalized;
+      return { candidates: raw, normalized };
     }
-    return raw;
+    return { candidates: raw, normalized: raw };
   }, [creatorOrScope, store]);
-  const memoizedInput = useCompareMemoize(inputForMemoization);
+  const memoizedInput = useCompareMemoize(processedInput.normalized);
   const isReader = memoizedInput === void 0 || typeof memoizedInput === "string";
   const storeUniforms = usePrimaryThree((s) => s.uniforms);
   const created = useScopedResource({
     store,
     kind: "uniforms",
     scope: isReader ? void 0 : scope,
-    isLeaf: isUniformNode$1,
+    isLeaf: isUniformNode,
     input: memoizedInput,
     create: () => {
       if (isReader) return {};
-      if (typeof memoizedInput !== "object" || memoizedInput === null) throw new Error("Invalid uniform input");
-      return memoizedInput;
+      if (typeof processedInput.candidates !== "object" || processedInput.candidates === null)
+        throw new Error("Invalid uniform input");
+      return processedInput.candidates;
     },
     prepare: (name, candidate) => createUniform(name, candidate, scope),
     reconcile: (existing, candidate) => {
@@ -15636,7 +15779,7 @@ function useUniforms(creatorOrScope, scope) {
     uniforms = storeUniforms;
   } else if (typeof memoizedInput === "string") {
     const scopeData = storeUniforms[memoizedInput];
-    uniforms = scopeData && !isUniformNode$1(scopeData) ? scopeData : {};
+    uniforms = scopeData && !isUniformNode(scopeData) ? scopeData : {};
   }
   return { ...uniforms, removeUniforms: removeUniforms2, clearUniforms, rebuildUniforms };
 }
@@ -15651,7 +15794,7 @@ function removeUniforms(set, names, scope) {
       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(uniforms[name])) delete uniforms[name];
     return { uniforms };
   });
 }
@@ -15665,7 +15808,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(value)) uniforms[key] = value;
     }
     return { uniforms };
   });
@@ -15675,8 +15818,7 @@ function createUniform(inName, node, scope) {
   const inValue = vectorize(node);
   const newUniform = tsl.uniform(inValue);
   if (typeof newUniform.setName === "function") {
-    const name = scope ? `${scope}_${inName}` : inName;
-    newUniform.setName(name);
+    newUniform.setName(scopedNodeName(scope, inName));
   }
   return newUniform;
 }
@@ -15702,14 +15844,12 @@ function hasEqualsMethod(value) {
 function isSameThreeType(a, b) {
   const obj_a = a;
   const obj_b = b;
-  return obj_a.isColor && obj_b.isColor || obj_a.isMatrix3 && obj_b.isMatrix3 || obj_a.isMatrix4 && obj_b.isMatrix4 || obj_a.isEuler && obj_b.isEuler || obj_a.isQuaternion && obj_b.isQuaternion;
+  return obj_a.isColor && obj_b.isColor || obj_a.isMatrix2 && obj_b.isMatrix2 || obj_a.isMatrix3 && obj_b.isMatrix3 || obj_a.isMatrix4 && obj_b.isMatrix4 || obj_a.isEuler && obj_b.isEuler || obj_a.isQuaternion && obj_b.isQuaternion;
 }
 
 const uniformOf = tsl.uniform;
-const isUniformNode = (value) => value !== null && typeof value === "object" && "value" in value && "uuid" in value;
-const isTSLNode$1 = (value) => value !== null && typeof value === "object" && "uuid" in value && "nodeType" in value;
 function useUniform(name, value) {
-  const store = useStore();
+  const store = usePrimaryStore();
   const registered = useScopedResource({
     store,
     kind: "uniforms",
@@ -15719,7 +15859,7 @@ function useUniform(name, value) {
     create: () => value === void 0 ? {} : { [name]: value },
     prepare: createNamedUniform,
     reconcile: (existing2) => {
-      if (value !== void 0 && !isTSLNode$1(value) && !isUniformNode(value)) {
+      if (value !== void 0 && !isTSLNode(value) && !isUniformNode(value)) {
         existing2.value = typeof value === "string" ? new webgpu.Color(value) : value;
       }
     }
@@ -15735,7 +15875,7 @@ function createNamedUniform(name, value) {
   let node;
   if (isUniformNode(value)) {
     node = value;
-  } else if (isTSLNode$1(value)) {
+  } else if (isTSLNode(value)) {
     node = uniformOf(value);
   } else if (typeof value === "string") {
     node = tsl.uniform(new webgpu.Color(value));
@@ -15748,7 +15888,6 @@ function createNamedUniform(name, value) {
   return node;
 }
 
-const isTSLNode = (value) => value !== null && typeof value === "object" && ("uuid" in value || "nodeType" in value);
 function useNodes(creatorOrScope, scope) {
   const store = usePrimaryStore();
   const removeNodes2 = React.useCallback(
@@ -15775,7 +15914,8 @@ function useNodes(creatorOrScope, scope) {
       return creatorOrScope(createLazyCreatorState(store.getState(), store));
     },
     prepare: (name, node) => {
-      node.setName?.(scope ? `${scope}.${name}` : name);
+      const setName = Reflect.get(node, "setName");
+      if (typeof setName === "function") setName.call(node, scopedNodeName(scope, name));
       return node;
     }
   });
@@ -15830,13 +15970,6 @@ function useLocalNodes(creator) {
   }, [store, creator, uniforms, nodes, textures, hmrVersion]);
 }
 
-const isBufferLike = (value) => {
-  if (value === null || typeof value !== "object") return false;
-  if (ArrayBuffer.isView(value)) return true;
-  if ("isBufferAttribute" in value) return true;
-  if ("uuid" in value || "nodeType" in value) return true;
-  return false;
-};
 const disposeBuffer = (buffer) => {
   if (buffer === null || typeof buffer !== "object") return;
   if ("dispose" in buffer && typeof buffer.dispose === "function") {
@@ -15883,9 +16016,8 @@ function useBuffers(creatorOrScope, scope) {
       return creatorOrScope(createLazyCreatorState(store.getState(), store));
     },
     prepare: (name, buffer) => {
-      if ("setName" in buffer && typeof buffer.setName === "function") {
-        buffer.setName(scope ? `${scope}.${name}` : name);
-      }
+      const setName = Reflect.get(buffer, "setName");
+      if (typeof setName === "function") setName.call(buffer, scopedNodeName(scope, name));
       return buffer;
     }
   });
@@ -15902,13 +16034,6 @@ function rebuildAllBuffers(store, scope) {
   rebuildResource(store, "buffers", scope);
 }
 
-const isStorageLike = (value) => {
-  if (value === null || typeof value !== "object") return false;
-  if ("isTexture" in value) return true;
-  if ("isData3DTexture" in value) return true;
-  if ("uuid" in value || "nodeType" in value) return true;
-  return false;
-};
 const disposeStorage = (storage) => {
   if (storage === null || typeof storage !== "object") return;
   if ("dispose" in storage && typeof storage.dispose === "function") {
@@ -15955,10 +16080,9 @@ function useGPUStorage(creatorOrScope, scope) {
       return creatorOrScope(createLazyCreatorState(store.getState(), store));
     },
     prepare: (name, storage) => {
-      const label = scope ? `${scope}.${name}` : name;
-      if ("setName" in storage && typeof storage.setName === "function") {
-        storage.setName(label);
-      }
+      const label = scopedNodeName(scope, name);
+      const setName = Reflect.get(storage, "setName");
+      if (typeof setName === "function") setName.call(storage, label);
       if ("name" in storage && typeof storage.name === "string") {
         storage.name = label;
       }
@@ -15984,11 +16108,58 @@ function rebuildAllStorage(store, scope) {
   rebuildResource(store, "gpuStorage", scope);
 }
 
+function addTexture(set, key, value) {
+  set((state) => {
+    const newMap = new Map(state.textures);
+    newMap.set(key, value);
+    return { textures: newMap };
+  });
+}
+function addTextures(set, items) {
+  set((state) => {
+    const newMap = new Map(state.textures);
+    const entries = items instanceof Map ? items.entries() : Object.entries(items);
+    for (const [key, value] of entries) {
+      newMap.set(key, value);
+    }
+    return { textures: newMap };
+  });
+}
+function removeTexture(set, key) {
+  set((state) => {
+    const newMap = new Map(state.textures);
+    newMap.delete(key);
+    return { textures: newMap };
+  });
+}
+function removeTextures(set, keys) {
+  set((state) => {
+    const newMap = new Map(state.textures);
+    for (const key of keys) newMap.delete(key);
+    return { textures: newMap };
+  });
+}
+function createTextureOperations(set) {
+  return {
+    add: (key, value) => addTexture(set, key, value),
+    addMultiple: (items) => addTextures(set, items),
+    remove: (key) => removeTexture(set, key),
+    removeMultiple: (keys) => removeTextures(set, keys)
+  };
+}
+
+function renderThroughPipeline(store) {
+  return () => {
+    const pipeline = store.getState().renderPipeline;
+    if (pipeline?.render) pipeline.render();
+  };
+}
 function useRenderPipeline(mainCB, setupCB) {
   const store = useStore();
   const { scene, camera, renderer, isLegacy } = useThree$1();
   const callbacksRanRef = React.useRef(false);
   const scenePassCacheRef = React.useRef(null);
+  const forceScenePassRebuildRef = React.useRef(false);
   const mainCBRef = React.useRef(mainCB);
   const setupCBRef = React.useRef(setupCB);
   mainCBRef.current = mainCB;
@@ -15996,7 +16167,7 @@ function useRenderPipeline(mainCB, setupCB) {
   const [rebuildVersion, setRebuildVersion] = React.useState(0);
   React.useEffect(() => {
     callbacksRanRef.current = false;
-    scenePassCacheRef.current = null;
+    forceScenePassRebuildRef.current = true;
   }, []);
   const clearPasses = React.useCallback(() => {
     store.setState({ passes: {} });
@@ -16006,12 +16177,15 @@ function useRenderPipeline(mainCB, setupCB) {
       renderPipeline: null,
       passes: {}
     });
+    setRenderOverride(store, null);
+    scenePassCacheRef.current?.scenePass.dispose();
     callbacksRanRef.current = false;
     scenePassCacheRef.current = null;
+    forceScenePassRebuildRef.current = false;
   }, [store]);
   const rebuild = React.useCallback(() => {
     callbacksRanRef.current = false;
-    scenePassCacheRef.current = null;
+    forceScenePassRebuildRef.current = true;
     setRebuildVersion((v) => v + 1);
   }, []);
   React.useLayoutEffect(() => {
@@ -16019,6 +16193,9 @@ function useRenderPipeline(mainCB, setupCB) {
       throw new Error("useRenderPipeline is only available with WebGPU renderer. Set renderer prop on Canvas.");
     }
     if (!renderer || !scene || !camera) return;
+    if (!("isWebGPURenderer" in renderer)) {
+      throw new Error("useRenderPipeline: renderer is not a WebGPURenderer but isLegacy is false.");
+    }
     const state = store.getState();
     const set = store.setState;
     try {
@@ -16029,21 +16206,34 @@ function useRenderPipeline(mainCB, setupCB) {
         pipeline = new webgpu.RenderPipeline(renderer);
         justCreatedPipeline = true;
       }
-      const cacheValid = scenePassCacheRef.current && scenePassCacheRef.current.sceneUuid === scene.uuid && scenePassCacheRef.current.cameraUuid === camera.uuid;
+      const cacheValid = !forceScenePassRebuildRef.current && scenePassCacheRef.current && scenePassCacheRef.current.sceneUuid === scene.uuid && scenePassCacheRef.current.cameraUuid === camera.uuid;
+      let outgoingScenePass = null;
       let scenePass;
       if (cacheValid) {
         scenePass = scenePassCacheRef.current.scenePass;
       } else {
+        outgoingScenePass = scenePassCacheRef.current?.scenePass ?? null;
         scenePass = tsl.pass(scene, camera);
         scenePassCacheRef.current = { sceneUuid: scene.uuid, cameraUuid: camera.uuid, scenePass };
+        forceScenePassRebuildRef.current = false;
       }
       currentPasses.scenePass = scenePass;
-      if (!pipeline.outputNode || justCreatedPipeline) pipeline.outputNode = scenePass;
+      let outputNodeChanged = false;
+      if (!pipeline.outputNode || justCreatedPipeline || pipeline.outputNode === outgoingScenePass) {
+        pipeline.outputNode = scenePass;
+        outputNodeChanged = true;
+      }
       set({ renderPipeline: pipeline, passes: currentPasses });
+      setRenderOverride(store, renderThroughPipeline(store));
       const shouldRunCallbacks = justCreatedPipeline || !callbacksRanRef.current || !cacheValid;
       if (shouldRunCallbacks) {
         if (setupCBRef.current) {
-          const freshState = store.getState();
+          const freshState = Object.assign({}, store.getState(), {
+            renderPipeline: pipeline,
+            passes: { ...currentPasses, scenePass },
+            renderer,
+            isLegacy: false
+          });
           const setupResult = setupCBRef.current(freshState);
           if (setupResult && typeof setupResult === "object") {
             currentPasses = { ...currentPasses, ...setupResult };
@@ -16051,35 +16241,38 @@ function useRenderPipeline(mainCB, setupCB) {
           }
         }
         if (mainCBRef.current) {
-          const freshState = store.getState();
+          const freshState = Object.assign({}, store.getState(), {
+            renderPipeline: pipeline,
+            passes: { ...currentPasses, scenePass },
+            renderer,
+            isLegacy: false
+          });
           const mainResult = mainCBRef.current(freshState);
           if (mainResult && typeof mainResult === "object") {
             currentPasses = { ...currentPasses, ...mainResult };
             set({ passes: currentPasses });
           }
         }
+        outputNodeChanged = true;
         callbacksRanRef.current = true;
       }
+      if (outputNodeChanged) pipeline.needsUpdate = true;
+      if (outgoingScenePass && outgoingScenePass !== scenePass) outgoingScenePass.dispose();
     } catch (error) {
       console.warn("[useRenderPipeline] Setup failed; the render pipeline was not configured:", error);
     }
   }, [store, renderer, scene, camera, isLegacy, rebuildVersion]);
   const passes = useThree$1((s) => s.passes);
   const renderPipeline = useThree$1((s) => s.renderPipeline);
-  return {
-    passes,
-    renderPipeline,
-    clearPasses,
-    reset,
-    rebuild,
-    // isReady indicates if RenderPipeline is configured and ready for rendering
-    isReady: renderPipeline !== null
-  };
+  const actions = { passes, clearPasses, reset, rebuild };
+  if (renderPipeline) return { ...actions, isReady: true, renderPipeline };
+  return { ...actions, isReady: false, renderPipeline: null };
 }
 
 extend(THREE);
 const useThree = useThree$1;
 const useFrame = useFrame$1;
+const Canvas = Canvas$1;
 
 exports.Scheduler = scheduler.Scheduler;
 exports.getScheduler = scheduler.getScheduler;
@@ -16157,10 +16350,12 @@ exports.rebuildAllStorage = rebuildAllStorage;
 exports.rebuildAllUniforms = rebuildAllUniforms;
 exports.reconciler = reconciler;
 exports.registerPrimary = registerPrimary;
+exports.registerRootExtension = registerRootExtension;
 exports.removeInteractivity = removeInteractivity;
 exports.removeNodes = removeNodes;
 exports.removeUniforms = removeUniforms;
 exports.resolve = resolve;
+exports.setRenderOverride = setRenderOverride;
 exports.swapInteractivity = swapInteractivity;
 exports.unmountComponentAtNode = unmountComponentAtNode;
 exports.unregisterPrimary = unregisterPrimary;