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

package/dist/index.cjs

@@ -11,6 +11,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');
@@ -313,7 +314,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();
 }
@@ -529,8 +529,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;
@@ -544,6 +546,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",
@@ -553,7 +612,6 @@ const RESERVED_PROPS = [
   "dispose",
   "attach",
   "object",
-  "onUpdate",
   // Behavior flags
   "dispose"
 ];
@@ -631,11 +689,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;
@@ -647,6 +703,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];
@@ -752,682 +815,378 @@ function applyProps(object, props) {
   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))
-  };
+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 formatLocation(url, line) {
-  const clean = url.split("?")[0];
-  const file = clean.split("/").pop() ?? clean;
-  return `${file}:${line}`;
+function useThree(selector = (state) => state, equalityFn) {
+  return useStore()(selector, equalityFn);
 }
-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 memoizedLoaders = /* @__PURE__ */ new WeakMap();
+const isConstructor$1 = (value) => typeof value === "function" && value?.prototype?.constructor === value;
+function getLoader$1(Proto) {
+  if (isConstructor$1(Proto)) {
+    let loader = memoizedLoaders.get(Proto);
+    if (!loader) {
+      loader = new Proto();
+      memoizedLoaders.set(Proto, loader);
+    }
+    return loader;
   }
+  return Proto;
 }
-
-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));
+function loadingFn(extensions, onProgress) {
+  return function(Proto, input) {
+    const loader = getLoader$1(Proto);
+    if (extensions) extensions(loader);
+    if ("loadAsync" in loader && typeof loader.loadAsync === "function") {
+      return loader.loadAsync(input, onProgress).then((data) => {
+        if (isObject3D(data?.scene)) Object.assign(data, buildGraph(data.scene));
+        return data;
+      });
+    }
+    return new Promise(
+      (res, reject) => loader.load(
+        input,
+        (data) => {
+          if (isObject3D(data?.scene)) Object.assign(data, buildGraph(data.scene));
+          res(data);
+        },
+        onProgress,
+        (error) => reject(new Error(`Could not load ${input}: ${error?.message}`))
+      )
+    );
+  };
+}
+function useLoader(loader, input, extensions, onProgress, cacheKey) {
+  const inputs = Array.isArray(input) ? input : [input];
+  const cacheKeys = Array.isArray(cacheKey ?? input) ? cacheKey ?? input : [cacheKey ?? input];
+  const fn = loadingFn(extensions, onProgress);
+  const results = cacheKeys.map(
+    (key, index) => suspendReact.suspend(() => fn(loader, inputs[index]), [loader, key], { equal: is.equ })
+  );
+  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];
+  const cacheKeys = Array.isArray(cacheKey ?? input) ? cacheKey ?? input : [cacheKey ?? input];
+  cacheKeys.forEach(
+    (key, index) => suspendReact.preload(() => loadingFn(extensions, onProgress)(loader, inputs[index]), [loader, key])
+  );
+};
+useLoader.clear = function(loader, input, cacheKey) {
+  const cacheKeys = Array.isArray(cacheKey ?? input) ? cacheKey ?? input : [cacheKey ?? input];
+  cacheKeys.forEach((key) => suspendReact.clear([loader, key]));
+};
+useLoader.loader = getLoader$1;
 
-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 };
+function useFrame(callback, priorityOrOptions) {
+  const store = React__namespace.useContext(context);
+  const isInsideCanvas = store !== null;
+  const scheduler$1 = scheduler.getScheduler();
+  const optionsKey = typeof priorityOrOptions === "number" ? `p:${priorityOrOptions}` : priorityOrOptions ? JSON.stringify({
+    id: priorityOrOptions.id,
+    phase: priorityOrOptions.phase,
+    priority: priorityOrOptions.priority,
+    fps: priorityOrOptions.fps,
+    drop: priorityOrOptions.drop,
+    enabled: priorityOrOptions.enabled,
+    before: priorityOrOptions.before,
+    after: priorityOrOptions.after
+  }) : "";
+  const options = React__namespace.useMemo(() => {
+    return typeof priorityOrOptions === "number" ? { priority: priorityOrOptions } : priorityOrOptions ?? {};
+  }, [optionsKey]);
+  const reactId = React__namespace.useId();
+  const id = options.id ?? reactId;
+  const callbackRef = useMutableCallback(callback);
+  const isLegacyPriority = typeof priorityOrOptions === "number" && priorityOrOptions > 0;
+  useIsomorphicLayoutEffect(() => {
+    if (!callback) return;
+    if (isInsideCanvas) {
+      const state = store.getState();
+      const rootId = state.internal.rootId;
+      if (isLegacyPriority) {
+        state.internal.priority++;
+        let parentRoot = state.previousRoot;
+        while (parentRoot) {
+          const parentState = parentRoot.getState();
+          if (parentState?.internal) parentState.internal.priority++;
+          parentRoot = parentState?.previousRoot;
+        }
+        notifyDepreciated({
+          heading: "useFrame with numeric priority is deprecated",
+          body: 'Using useFrame(callback, number) to control render order is deprecated.\n\nFor custom rendering, use: useFrame(callback, { phase: "render" })\nFor execution order within update phase, use: useFrame(callback, { priority: number })',
+          link: "https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe"
+        });
       }
-    }
-    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();
+      const wrappedCallback = (frameState, delta) => {
+        const localState = store.getState();
+        const mergedState = {
+          ...localState,
+          time: frameState.time,
+          delta: frameState.delta,
+          elapsed: frameState.elapsed,
+          frame: frameState.frame
+        };
+        callbackRef.current?.(mergedState, delta);
+      };
+      const unregister = scheduler$1.register(wrappedCallback, {
+        id,
+        rootId,
+        ...options
+      });
+      return () => {
+        unregister();
+        if (isLegacyPriority) {
+          const currentState = store.getState();
+          if (currentState.internal) {
+            currentState.internal.priority--;
+            let parentRoot = currentState.previousRoot;
+            while (parentRoot) {
+              const parentState = parentRoot.getState();
+              if (parentState?.internal) parentState.internal.priority--;
+              parentRoot = parentState?.previousRoot;
             }
           }
-          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();
+      };
+    } else {
+      return scheduler$1.register(
+        (state, delta) => {
+          const frameState = state;
+          if (!frameState.renderer) return;
+          callbackRef.current?.(frameState, delta);
+        },
+        { id, ...options }
+      );
+    }
+  }, [store, scheduler$1, id, optionsKey, isLegacyPriority, isInsideCanvas]);
+  const isPaused = React__namespace.useSyncExternalStore(
+    // Subscribe function
+    React__namespace.useCallback(
+      (onStoreChange) => {
+        return scheduler.getScheduler().subscribeJobState(id, onStoreChange);
       },
-      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;
+      [id]
+    ),
+    // getSnapshot function
+    React__namespace.useCallback(() => scheduler.getScheduler().isJobPaused(id), [id]),
+    // getServerSnapshot function (SSR)
+    React__namespace.useCallback(() => false, [])
+  );
+  const controls = React__namespace.useMemo(() => {
+    const scheduler2 = scheduler.getScheduler();
+    return {
+      /** The job's unique ID */
+      id,
+      /**
+       * Access to the global scheduler for frame loop control.
+       * 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);
       },
-      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
-      }
+      /**
+       * Manually step this job only.
+       * Bypasses FPS limiting - always runs.
+       * @param timestamp Optional timestamp (defaults to performance.now())
+       */
+      step: (timestamp) => {
+        scheduler.getScheduler().stepJob(id, timestamp);
+      },
+      /**
+       * Manually step ALL jobs in the scheduler.
+       * Useful for frameloop='never' mode.
+       * @param timestamp Optional timestamp (defaults to performance.now())
+       */
+      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.
+       */
+      pause: () => {
+        scheduler.getScheduler().pauseJob(id);
+      },
+      /**
+       * Resume this job (set enabled=true).
+       */
+      resume: () => {
+        scheduler.getScheduler().resumeJob(id);
+      },
+      /**
+       * Reactive paused state - automatically updates when pause/resume is called.
+       * No need for forceUpdate() in your components.
+       */
+      isPaused
     };
-    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);
-      }
-    }
-  });
-  rootStore.subscribe((state2) => invalidate(state2));
-  return rootStore;
-};
+  }, [id, isPaused]);
+  return controls;
+}
 
-const memoizedLoaders = /* @__PURE__ */ new WeakMap();
-const isConstructor$1 = (value) => typeof value === "function" && value?.prototype?.constructor === value;
-function getLoader$1(Proto) {
-  if (isConstructor$1(Proto)) {
-    let loader = memoizedLoaders.get(Proto);
-    if (!loader) {
-      loader = new Proto();
-      memoizedLoaders.set(Proto, loader);
+const IsObject = (url) => url === Object(url) && !Array.isArray(url) && typeof url !== "function";
+function getUrls(input) {
+  if (typeof input === "string") return [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));
+}
+function buildFromCache(input, textureCache) {
+  if (typeof input === "string") {
+    return textureCache.get(input);
+  } else if (Array.isArray(input)) {
+    return input.map((url) => textureCache.get(url));
+  } else {
+    const result = {};
+    const objInput = input;
+    for (const key in objInput) {
+      result[key] = textureCache.get(objInput[key]);
     }
-    return loader;
+    return result;
   }
-  return Proto;
 }
-function loadingFn(extensions, onProgress) {
-  return function(Proto, input) {
-    const loader = getLoader$1(Proto);
-    if (extensions) extensions(loader);
-    if ("loadAsync" in loader && typeof loader.loadAsync === "function") {
-      return loader.loadAsync(input, onProgress).then((data) => {
-        if (isObject3D(data?.scene)) Object.assign(data, buildGraph(data.scene));
-        return data;
+function useTexture(input, optionsOrOnLoad) {
+  const renderer = useThree((state) => state.internal.actualRenderer);
+  const store = useStore();
+  const options = typeof optionsOrOnLoad === "function" ? { onLoad: optionsOrOnLoad } : optionsOrOnLoad ?? {};
+  const { onLoad, cache = true } = options;
+  const onLoadRef = React.useRef(onLoad);
+  onLoadRef.current = onLoad;
+  const onLoadCalledForRef = React.useRef(null);
+  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(stableInput, textures);
+  }, [cache, urls, stableInput, store]);
+  const loadedTextures = useLoader(
+    webgpu.TextureLoader,
+    IsObject(stableInput) ? Object.values(stableInput) : stableInput
+  );
+  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?.(mappedTextures);
+  }, [cachedResult, mappedTextures, inputKey]);
+  React.useEffect(() => {
+    if (cachedResult) return;
+    if ("initTexture" in renderer) {
+      let textureArray = [];
+      if (Array.isArray(loadedTextures)) {
+        textureArray = loadedTextures;
+      } else if (loadedTextures instanceof webgpu.Texture) {
+        textureArray = [loadedTextures];
+      } else if (IsObject(loadedTextures)) {
+        textureArray = Object.values(loadedTextures);
+      }
+      textureArray.forEach((texture) => {
+        if (texture instanceof webgpu.Texture) {
+          renderer.initTexture(texture);
+        }
       });
     }
-    return new Promise(
-      (res, reject) => loader.load(
-        input,
-        (data) => {
-          if (isObject3D(data?.scene)) Object.assign(data, buildGraph(data.scene));
-          res(data);
-        },
-        onProgress,
-        (error) => reject(new Error(`Could not load ${input}: ${error?.message}`))
-      )
-    );
-  };
-}
-function useLoader(loader, input, extensions, onProgress, cacheKey) {
-  const inputs = Array.isArray(input) ? input : [input];
-  const cacheKeys = Array.isArray(cacheKey ?? input) ? cacheKey ?? input : [cacheKey ?? input];
-  const fn = loadingFn(extensions, onProgress);
-  const results = cacheKeys.map(
-    (key, index) => suspendReact.suspend(() => fn(loader, inputs[index]), [loader, key], { equal: is.equ })
-  );
-  return Array.isArray(input) ? results : results[0];
+  }, [renderer, loadedTextures, cachedResult]);
+  React.useEffect(() => {
+    if (!cache) return;
+    const urlTextureMap = [];
+    if (typeof stableInput === "string") {
+      urlTextureMap.push([stableInput, mappedTextures]);
+    } else if (Array.isArray(stableInput)) {
+      const textureArray = mappedTextures;
+      stableInput.forEach((url, i) => urlTextureMap.push([url, textureArray[i]]));
+    } else if (IsObject(stableInput)) {
+      const textureRecord = mappedTextures;
+      for (const key in stableInput) {
+        const url = stableInput[key];
+        urlTextureMap.push([url, textureRecord[key]]);
+      }
+    }
+    store.setState((state) => {
+      const refs = new Map(state._textureRefs);
+      let textures = state.textures;
+      let added = false;
+      for (const [url, texture] of urlTextureMap) {
+        if (!textures.has(url)) {
+          if (!added) {
+            textures = new Map(textures);
+            added = true;
+          }
+          textures.set(url, texture);
+        }
+        refs.set(url, (refs.get(url) ?? 0) + 1);
+      }
+      return added ? { textures, _textureRefs: refs } : { _textureRefs: refs };
+    });
+    return () => store.setState((state) => {
+      const refs = new Map(state._textureRefs);
+      for (const [url] of urlTextureMap) {
+        const next = (refs.get(url) ?? 0) - 1;
+        if (next <= 0) refs.delete(url);
+        else refs.set(url, next);
+      }
+      return { _textureRefs: refs };
+    });
+  }, [cache, stableInput, mappedTextures, store]);
+  return mappedTextures;
 }
-useLoader.preload = function(loader, input, extensions, onProgress, cacheKey) {
-  const inputs = Array.isArray(input) ? input : [input];
-  const cacheKeys = Array.isArray(cacheKey ?? input) ? cacheKey ?? input : [cacheKey ?? input];
-  cacheKeys.forEach(
-    (key, index) => suspendReact.preload(() => loadingFn(extensions, onProgress)(loader, inputs[index]), [loader, key])
-  );
-};
-useLoader.clear = function(loader, input, cacheKey) {
-  const cacheKeys = Array.isArray(cacheKey ?? input) ? cacheKey ?? input : [cacheKey ?? input];
-  cacheKeys.forEach((key) => suspendReact.clear([loader, key]));
-};
-useLoader.loader = getLoader$1;
-
-function useFrame(callback, priorityOrOptions) {
-  const store = React__namespace.useContext(context);
-  const isInsideCanvas = store !== null;
-  const scheduler$1 = scheduler.getScheduler();
-  const optionsKey = typeof priorityOrOptions === "number" ? `p:${priorityOrOptions}` : priorityOrOptions ? JSON.stringify({
-    id: priorityOrOptions.id,
-    phase: priorityOrOptions.phase,
-    priority: priorityOrOptions.priority,
-    fps: priorityOrOptions.fps,
-    drop: priorityOrOptions.drop,
-    enabled: priorityOrOptions.enabled,
-    before: priorityOrOptions.before,
-    after: priorityOrOptions.after
-  }) : "";
-  const options = React__namespace.useMemo(() => {
-    return typeof priorityOrOptions === "number" ? { priority: priorityOrOptions } : priorityOrOptions ?? {};
-  }, [optionsKey]);
-  const reactId = React__namespace.useId();
-  const id = options.id ?? reactId;
-  const callbackRef = useMutableCallback(callback);
-  const isLegacyPriority = typeof priorityOrOptions === "number" && priorityOrOptions > 0;
-  useIsomorphicLayoutEffect(() => {
-    if (!callback) return;
-    if (isInsideCanvas) {
-      const state = store.getState();
-      const rootId = state.internal.rootId;
-      if (isLegacyPriority) {
-        state.internal.priority++;
-        let parentRoot = state.previousRoot;
-        while (parentRoot) {
-          const parentState = parentRoot.getState();
-          if (parentState?.internal) parentState.internal.priority++;
-          parentRoot = parentState?.previousRoot;
-        }
-        notifyDepreciated({
-          heading: "useFrame with numeric priority is deprecated",
-          body: 'Using useFrame(callback, number) to control render order is deprecated.\n\nFor custom rendering, use: useFrame(callback, { phase: "render" })\nFor execution order within update phase, use: useFrame(callback, { priority: number })',
-          link: "https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe"
-        });
-      }
-      const wrappedCallback = (frameState, delta) => {
-        const localState = store.getState();
-        const mergedState = {
-          ...localState,
-          time: frameState.time,
-          delta: frameState.delta,
-          elapsed: frameState.elapsed,
-          frame: frameState.frame
-        };
-        callbackRef.current?.(mergedState, delta);
-      };
-      const unregister = scheduler$1.register(wrappedCallback, {
-        id,
-        rootId,
-        ...options
-      });
-      return () => {
-        unregister();
-        if (isLegacyPriority) {
-          const currentState = store.getState();
-          if (currentState.internal) {
-            currentState.internal.priority--;
-            let parentRoot = currentState.previousRoot;
-            while (parentRoot) {
-              const parentState = parentRoot.getState();
-              if (parentState?.internal) parentState.internal.priority--;
-              parentRoot = parentState?.previousRoot;
-            }
-          }
-        }
-      };
-    } else {
-      return scheduler$1.register(
-        (state, delta) => {
-          const frameState = state;
-          if (!frameState.renderer) return;
-          callbackRef.current?.(frameState, delta);
-        },
-        { id, ...options }
-      );
-    }
-  }, [store, scheduler$1, id, optionsKey, isLegacyPriority, isInsideCanvas]);
-  const isPaused = React__namespace.useSyncExternalStore(
-    // Subscribe function
-    React__namespace.useCallback(
-      (onStoreChange) => {
-        return scheduler.getScheduler().subscribeJobState(id, onStoreChange);
-      },
-      [id]
-    ),
-    // getSnapshot function
-    React__namespace.useCallback(() => scheduler.getScheduler().isJobPaused(id), [id]),
-    // getServerSnapshot function (SSR)
-    React__namespace.useCallback(() => false, [])
-  );
-  const controls = React__namespace.useMemo(() => {
-    const scheduler2 = scheduler.getScheduler();
-    return {
-      /** The job's unique ID */
-      id,
-      /**
-       * Access to the global scheduler for frame loop control.
-       * Use for controlling the entire frame loop, adding phases, etc.
-       */
-      scheduler: scheduler2,
-      /**
-       * Manually step this job only.
-       * Bypasses FPS limiting - always runs.
-       * @param timestamp Optional timestamp (defaults to performance.now())
-       */
-      step: (timestamp) => {
-        scheduler.getScheduler().stepJob(id, timestamp);
-      },
-      /**
-       * Manually step ALL jobs in the scheduler.
-       * Useful for frameloop='never' mode.
-       * @param timestamp Optional timestamp (defaults to performance.now())
-       */
-      stepAll: (timestamp) => {
-        scheduler.getScheduler().step(timestamp);
-      },
-      /**
-       * Pause this job (set enabled=false).
-       * Job remains registered but won't run.
-       */
-      pause: () => {
-        scheduler.getScheduler().pauseJob(id);
-      },
-      /**
-       * Resume this job (set enabled=true).
-       */
-      resume: () => {
-        scheduler.getScheduler().resumeJob(id);
-      },
-      /**
-       * Reactive paused state - automatically updates when pause/resume is called.
-       * No need for forceUpdate() in your components.
-       */
-      isPaused
-    };
-  }, [id, isPaused]);
-  return controls;
-}
-
-const IsObject = (url) => url === Object(url) && !Array.isArray(url) && typeof url !== "function";
-function getUrls(input) {
-  if (typeof input === "string") return [input];
-  if (Array.isArray(input)) return input;
-  return Object.values(input);
-}
-function allUrlsCached(urls, textureCache) {
-  return urls.every((url) => textureCache.has(url));
-}
-function buildFromCache(input, textureCache) {
-  if (typeof input === "string") {
-    return textureCache.get(input);
-  } else if (Array.isArray(input)) {
-    return input.map((url) => textureCache.get(url));
-  } else {
-    const result = {};
-    const objInput = input;
-    for (const key in objInput) {
-      result[key] = textureCache.get(objInput[key]);
-    }
-    return result;
-  }
-}
-function useTexture(input, optionsOrOnLoad) {
-  const renderer = useThree((state) => state.internal.actualRenderer);
-  const store = useStore();
-  const options = typeof optionsOrOnLoad === "function" ? { onLoad: optionsOrOnLoad } : optionsOrOnLoad ?? {};
-  const { onLoad, cache = true } = options;
-  const onLoadRef = React.useRef(onLoad);
-  onLoadRef.current = onLoad;
-  const onLoadCalledForRef = React.useRef(null);
-  const urls = React.useMemo(() => getUrls(input), [input]);
-  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]);
-  const loadedTextures = useLoader(
-    webgpu.TextureLoader,
-    IsObject(input) ? Object.values(input) : input
-  );
-  const inputKey = urls.join("\0");
-  React.useLayoutEffect(() => {
-    if (cachedResult) return;
-    if (onLoadCalledForRef.current === inputKey) return;
-    onLoadCalledForRef.current = inputKey;
-    onLoadRef.current?.(loadedTextures);
-  }, [cachedResult, loadedTextures, inputKey]);
-  React.useEffect(() => {
-    if (cachedResult) return;
-    if ("initTexture" in renderer) {
-      let textureArray = [];
-      if (Array.isArray(loadedTextures)) {
-        textureArray = loadedTextures;
-      } else if (loadedTextures instanceof webgpu.Texture) {
-        textureArray = [loadedTextures];
-      } else if (IsObject(loadedTextures)) {
-        textureArray = Object.values(loadedTextures);
-      }
-      textureArray.forEach((texture) => {
-        if (texture instanceof webgpu.Texture) {
-          renderer.initTexture(texture);
-        }
-      });
-    }
-  }, [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)) {
-      const textureArray = mappedTextures;
-      input.forEach((url, i) => urlTextureMap.push([url, textureArray[i]]));
-    } else if (IsObject(input)) {
-      const textureRecord = mappedTextures;
-      for (const key in input) {
-        const url = input[key];
-        urlTextureMap.push([url, textureRecord[key]]);
-      }
-    }
-    store.setState((state) => {
-      const refs = new Map(state._textureRefs);
-      let textures = state.textures;
-      let added = false;
-      for (const [url, texture] of urlTextureMap) {
-        if (!textures.has(url)) {
-          if (!added) {
-            textures = new Map(textures);
-            added = true;
-          }
-          textures.set(url, texture);
-        }
-        refs.set(url, (refs.get(url) ?? 0) + 1);
-      }
-      return added ? { textures, _textureRefs: refs } : { _textureRefs: refs };
-    });
-    return () => store.setState((state) => {
-      const refs = new Map(state._textureRefs);
-      for (const [url] of urlTextureMap) {
-        const next = (refs.get(url) ?? 0) - 1;
-        if (next <= 0) refs.delete(url);
-        else refs.set(url, next);
-      }
-      return { _textureRefs: refs };
-    });
-  }, [cache, input, mappedTextures, store]);
-  return mappedTextures;
-}
-useTexture.preload = (url) => useLoader.preload(webgpu.TextureLoader, url);
-useTexture.clear = (input) => useLoader.clear(webgpu.TextureLoader, input);
-const Texture = ({
-  children,
-  input,
-  onLoad,
-  cache
-}) => {
-  const options = typeof onLoad === "function" ? { onLoad, cache } : { ...onLoad, cache };
-  const ret = useTexture(input, options);
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children?.(ret) });
+useTexture.preload = (url) => useLoader.preload(webgpu.TextureLoader, url);
+useTexture.clear = (input) => useLoader.clear(webgpu.TextureLoader, input);
+const Texture = ({
+  children,
+  input,
+  onLoad,
+  cache
+}) => {
+  const options = typeof onLoad === "function" ? { onLoad, cache } : { ...onLoad, cache };
+  const ret = useTexture(input, options);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children?.(ret) });
 };
 
 function useTextures(selector) {
@@ -1577,7 +1336,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 = {
@@ -1630,22 +1389,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(selector = (state) => state, equalityFn) {
-  return useStore()(selector, equalityFn);
-}
 function useInstanceHandle(ref) {
   const instance = React.useRef(null);
   React.useImperativeHandle(instance, () => ref.current.__r3f, [ref]);
@@ -1685,13 +1437,19 @@ 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};
 
@@ -13550,7 +13308,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) {
@@ -13898,7 +13659,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;
@@ -13913,162 +13674,491 @@ const reconciler = /* @__PURE__ */ createReconciler({
       else delete instance.props.attach;
       if (Object.keys(changedProps).length) applyProps(instance.object, changedProps);
     }
-  },
-  finalizeInitialChildren: (instance) => {
-    for (const prop in instance.props) {
-      if (isFromRef(instance.props[prop])) return true;
+  },
+  finalizeInitialChildren: (instance) => {
+    for (const prop in instance.props) {
+      if (isFromRef(instance.props[prop])) return true;
+    }
+    return false;
+  },
+  commitMount(instance) {
+    const resolved = {};
+    for (const prop in instance.props) {
+      const value = instance.props[prop];
+      if (isFromRef(value)) {
+        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);
+  },
+  getPublicInstance: (instance) => instance?.object,
+  prepareForCommit: () => null,
+  preparePortalMount: (container) => {
+    const target = container.getState().internal.container ?? container.getState().scene;
+    return prepare(target, container, "", {});
+  },
+  // Reconstructed instances are swapped once all mutations are committed,
+  // before layout effects run so refs point to the new objects
+  resetAfterCommit: flushReconstructedInstances,
+  shouldSetTextContent: () => false,
+  clearContainer: () => false,
+  hideInstance,
+  unhideInstance,
+  createTextInstance: handleTextInstance,
+  hideTextInstance: handleTextInstance,
+  unhideTextInstance: handleTextInstance,
+  // Mirrors react-dom, which flushes discrete work in microtasks
+  supportsMicrotasks: true,
+  scheduleMicrotask,
+  scheduleTimeout: typeof setTimeout === "function" ? setTimeout : void 0,
+  cancelTimeout: typeof clearTimeout === "function" ? clearTimeout : void 0,
+  noTimeout: -1,
+  getInstanceFromNode: () => null,
+  beforeActiveInstanceBlur() {
+  },
+  afterActiveInstanceBlur() {
+  },
+  detachDeletedInstance() {
+  },
+  prepareScopeUpdate() {
+  },
+  getInstanceFromScope: () => null,
+  shouldAttemptEagerTransition: () => false,
+  trackSchedulerEvent: () => {
+  },
+  resolveEventType: () => null,
+  resolveEventTimeStamp: () => -1.1,
+  requestPostPaintCallback() {
+  },
+  maySuspendCommit: () => false,
+  preloadInstance: () => true,
+  // true indicates already loaded
+  suspendInstance() {
+  },
+  waitForCommitToBeReady: () => null,
+  NotPendingTransition: null,
+  // The reconciler types use the internal ReactContext with all the hidden properties
+  // so we have to cast from the public React.Context type
+  HostTransitionContext: /* @__PURE__ */ React__namespace.createContext(
+    null
+  ),
+  setCurrentUpdatePriority(newPriority) {
+    currentUpdatePriority = newPriority;
+  },
+  getCurrentUpdatePriority() {
+    return currentUpdatePriority;
+  },
+  resolveUpdatePriority() {
+    if (currentUpdatePriority !== NoEventPriority) return currentUpdatePriority;
+    const eventType = typeof window !== "undefined" ? window.event?.type : void 0;
+    if (eventType === void 0) return r;
+    return getEventPriority(eventType);
+  },
+  resetFormInstance() {
+  },
+  // @ts-ignore DefinitelyTyped is not up to date
+  rendererPackageName: "@react-three/fiber",
+  rendererVersion: packageData.version,
+  // 19.2 Reconciler
+  // https://github.com/facebook/react/pull/31975
+  // https://github.com/facebook/react/pull/31999
+  applyViewTransitionName(_instance, _name, _className) {
+  },
+  restoreViewTransitionName(_instance, _props) {
+  },
+  cancelViewTransitionName(_instance, _name, _props) {
+  },
+  cancelRootViewTransitionName(_rootContainer) {
+  },
+  restoreRootViewTransitionName(_rootContainer) {
+  },
+  InstanceMeasurement: null,
+  measureInstance: (_instance) => null,
+  wasInstanceInViewport: (_measurement) => true,
+  hasInstanceChanged: (_oldMeasurement, _newMeasurement) => false,
+  hasInstanceAffectedParent: (_oldMeasurement, _newMeasurement) => false,
+  // https://github.com/facebook/react/pull/32002
+  // https://github.com/facebook/react/pull/34486
+  suspendOnActiveViewTransition(_state, _container) {
+  },
+  // https://github.com/facebook/react/pull/32451
+  // https://github.com/facebook/react/pull/32760
+  startGestureTransition: () => null,
+  startViewTransition: () => null,
+  stopViewTransition(_transition) {
+  },
+  // https://github.com/facebook/react/pull/32038
+  createViewTransitionInstance: (_name) => null,
+  // https://github.com/facebook/react/pull/32379
+  // https://github.com/facebook/react/pull/32786
+  getCurrentGestureOffset(_provider) {
+    throw new Error("startGestureTransition is not yet supported in react-three-fiber.");
+  },
+  // https://github.com/facebook/react/pull/32500
+  cloneMutableInstance(instance, _keepChildren) {
+    return instance;
+  },
+  cloneMutableTextInstance(textInstance) {
+    return textInstance;
+  },
+  // React 19.2 added these for root-level view transitions. They only run for hosts that opt into
+  // view transitions by returning a container from cloneRootViewTransitionContainer; R3F renders
+  // into a WebGL/WebGPU canvas, where cloning the root has no meaning, so we never opt in and
+  // React never calls them. They stay as no-ops rather than throws: the host config is shared by
+  // every root, and a throw here would turn a React-internal probe into a hard crash for users.
+  // Guarded by a test asserting a full render + unmount never reaches them.
+  cloneRootViewTransitionContainer(_rootContainer) {
+  },
+  removeRootViewTransitionClone(_rootContainer, _clone) {
+  },
+  // https://github.com/facebook/react/pull/32465
+  createFragmentInstance: (_fiber) => null,
+  updateFragmentInstanceFiber(_fiber, _instance) {
+  },
+  commitNewChildToFragmentInstance(_child, _fragmentInstance) {
+  },
+  deleteChildFromFragmentInstance(_child, _fragmentInstance) {
+  },
+  // https://github.com/facebook/react/pull/32653
+  measureClonedInstance: (_instance) => null,
+  // https://github.com/facebook/react/pull/32819
+  maySuspendCommitOnUpdate: (_type, _oldProps, _newProps) => false,
+  maySuspendCommitInSyncRender: (_type, _props) => false,
+  // https://github.com/facebook/react/pull/34486
+  startSuspendingCommit: () => null,
+  // https://github.com/facebook/react/pull/34522
+  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;
     }
-    return false;
-  },
-  commitMount(instance) {
-    const resolved = {};
-    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;
+    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);
       }
     }
-    if (Object.keys(resolved).length) applyProps(instance.object, resolved);
-  },
-  getPublicInstance: (instance) => instance?.object,
-  prepareForCommit: () => null,
-  preparePortalMount: (container) => {
-    const target = container.getState().internal.container ?? container.getState().scene;
-    return prepare(target, container, "", {});
-  },
-  // Reconstructed instances are swapped once all mutations are committed,
-  // before layout effects run so refs point to the new objects
-  resetAfterCommit: flushReconstructedInstances,
-  shouldSetTextContent: () => false,
-  clearContainer: () => false,
-  hideInstance,
-  unhideInstance,
-  createTextInstance: handleTextInstance,
-  hideTextInstance: handleTextInstance,
-  unhideTextInstance: handleTextInstance,
-  // Mirrors react-dom, which flushes discrete work in microtasks
-  supportsMicrotasks: true,
-  scheduleMicrotask,
-  scheduleTimeout: typeof setTimeout === "function" ? setTimeout : void 0,
-  cancelTimeout: typeof clearTimeout === "function" ? clearTimeout : void 0,
-  noTimeout: -1,
-  getInstanceFromNode: () => null,
-  beforeActiveInstanceBlur() {
-  },
-  afterActiveInstanceBlur() {
-  },
-  detachDeletedInstance() {
-  },
-  prepareScopeUpdate() {
-  },
-  getInstanceFromScope: () => null,
-  shouldAttemptEagerTransition: () => false,
-  trackSchedulerEvent: () => {
-  },
-  resolveEventType: () => null,
-  resolveEventTimeStamp: () => -1.1,
-  requestPostPaintCallback() {
-  },
-  maySuspendCommit: () => false,
-  preloadInstance: () => true,
-  // true indicates already loaded
-  suspendInstance() {
-  },
-  waitForCommitToBeReady: () => null,
-  NotPendingTransition: null,
-  // The reconciler types use the internal ReactContext with all the hidden properties
-  // so we have to cast from the public React.Context type
-  HostTransitionContext: /* @__PURE__ */ React__namespace.createContext(
-    null
-  ),
-  setCurrentUpdatePriority(newPriority) {
-    currentUpdatePriority = newPriority;
-  },
-  getCurrentUpdatePriority() {
-    return currentUpdatePriority;
-  },
-  resolveUpdatePriority() {
-    if (currentUpdatePriority !== NoEventPriority) return currentUpdatePriority;
-    const eventType = typeof window !== "undefined" ? window.event?.type : void 0;
-    if (eventType === void 0) return r;
-    return getEventPriority(eventType);
-  },
-  resetFormInstance() {
-  },
-  // @ts-ignore DefinitelyTyped is not up to date
-  rendererPackageName: "@react-three/fiber",
-  rendererVersion: packageData.version,
-  // 19.2 Reconciler
-  // https://github.com/facebook/react/pull/31975
-  // https://github.com/facebook/react/pull/31999
-  applyViewTransitionName(_instance, _name, _className) {
-  },
-  restoreViewTransitionName(_instance, _props) {
-  },
-  cancelViewTransitionName(_instance, _name, _props) {
-  },
-  cancelRootViewTransitionName(_rootContainer) {
-  },
-  restoreRootViewTransitionName(_rootContainer) {
-  },
-  InstanceMeasurement: null,
-  measureInstance: (_instance) => null,
-  wasInstanceInViewport: (_measurement) => true,
-  hasInstanceChanged: (_oldMeasurement, _newMeasurement) => false,
-  hasInstanceAffectedParent: (_oldMeasurement, _newMeasurement) => false,
-  // https://github.com/facebook/react/pull/32002
-  // https://github.com/facebook/react/pull/34486
-  suspendOnActiveViewTransition(_state, _container) {
-  },
-  // https://github.com/facebook/react/pull/32451
-  // https://github.com/facebook/react/pull/32760
-  startGestureTransition: () => null,
-  startViewTransition: () => null,
-  stopViewTransition(_transition) {
-  },
-  // https://github.com/facebook/react/pull/32038
-  createViewTransitionInstance: (_name) => null,
-  // https://github.com/facebook/react/pull/32379
-  // https://github.com/facebook/react/pull/32786
-  getCurrentGestureOffset(_provider) {
-    throw new Error("startGestureTransition is not yet supported in react-three-fiber.");
-  },
-  // https://github.com/facebook/react/pull/32500
-  cloneMutableInstance(instance, _keepChildren) {
-    return instance;
-  },
-  cloneMutableTextInstance(textInstance) {
-    return textInstance;
-  },
-  // React 19.2 added these for root-level view transitions. They only run for hosts that opt into
-  // view transitions by returning a container from cloneRootViewTransitionContainer; R3F renders
-  // into a WebGL/WebGPU canvas, where cloning the root has no meaning, so we never opt in and
-  // React never calls them. They stay as no-ops rather than throws: the host config is shared by
-  // every root, and a throw here would turn a React-internal probe into a hard crash for users.
-  // Guarded by a test asserting a full render + unmount never reaches them.
-  cloneRootViewTransitionContainer(_rootContainer) {
-  },
-  removeRootViewTransitionClone(_rootContainer, _clone) {
-  },
-  // https://github.com/facebook/react/pull/32465
-  createFragmentInstance: (_fiber) => null,
-  updateFragmentInstanceFiber(_fiber, _instance) {
-  },
-  commitNewChildToFragmentInstance(_child, _fragmentInstance) {
-  },
-  deleteChildFromFragmentInstance(_child, _fragmentInstance) {
-  },
-  // https://github.com/facebook/react/pull/32653
-  measureClonedInstance: (_instance) => null,
-  // https://github.com/facebook/react/pull/32819
-  maySuspendCommitOnUpdate: (_type, _oldProps, _newProps) => false,
-  maySuspendCommitInSyncRender: (_type, _props) => false,
-  // https://github.com/facebook/react/pull/34486
-  startSuspendingCommit: () => null,
-  // https://github.com/facebook/react/pull/34522
-  getSuspendedCommitReason: (_state, _rootContainer) => null
-});
+  });
+  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();
@@ -14225,9 +14315,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();
               }
@@ -14236,7 +14325,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: {
@@ -14350,7 +14439,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 = () => {
@@ -14358,7 +14447,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() {
@@ -14440,14 +14529,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?.();
+              }
             }
           },
           {
@@ -14503,7 +14601,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)));
@@ -14516,8 +14615,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 }
           }
         );
@@ -14536,8 +14634,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();
@@ -14579,18 +14691,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) {
@@ -14660,11 +14778,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);
     }
@@ -14673,6 +14804,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
@@ -14731,16 +14863,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;
@@ -14965,38 +15092,6 @@ function parseRendererConfig(rendererProp) {
   return { primaryCanvas: void 0, scheduler: void 0, renderer: rendererProp };
 }
 
-const RESOURCE_KINDS = ["nodes", "uniforms", "buffers", "gpuStorage"];
-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 invalidateResource(store, kind, scopeKey) {
-  const registry = getKindRegistry(store, kind);
-  {
-    registry.valid.clear();
-    registry.staged.clear();
-  }
-}
-function invalidateAllResources(store) {
-  for (const kind of RESOURCE_KINDS) invalidateResource(store, kind);
-}
-
-function clearHmrCaches(store) {
-  const primary = store.getState().primaryStore ?? store;
-  invalidateAllResources(primary);
-  primary.setState((state) => ({ _hmrVersion: state._hmrVersion + 1 }));
-}
-
 function CanvasImpl({
   ref,
   children,
@@ -15034,9 +15129,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,
@@ -15048,7 +15143,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;
@@ -15064,9 +15159,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);
@@ -15180,6 +15273,7 @@ function CanvasImpl({
     const canvas = canvasRef.current;
     if (canvas) {
       return () => {
+        if (canvas.isConnected) return;
         unmountComponentAtNode(canvas);
         root.current = null;
       };
@@ -15192,7 +15286,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) {
@@ -15310,8 +15404,10 @@ exports.prepare = prepare;
 exports.presetsObj = presetsObj;
 exports.reconciler = reconciler;
 exports.registerPrimary = registerPrimary;
+exports.registerRootExtension = registerRootExtension;
 exports.removeInteractivity = removeInteractivity;
 exports.resolve = resolve;
+exports.setRenderOverride = setRenderOverride;
 exports.swapInteractivity = swapInteractivity;
 exports.unmountComponentAtNode = unmountComponentAtNode;
 exports.unregisterPrimary = unregisterPrimary;