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

package/dist/legacy.mjs

@@ -1,8 +1,8 @@
 import * as three from 'three';
-import { WebGLCubeRenderTarget, WebGLRenderTarget, Frustum, Matrix4, Group, BoxGeometry, MeshBasicNodeMaterial, Mesh, Node, NodeUpdateType, Layers, ShaderMaterial, Uniform, SRGBColorSpace, RGBAFormat, UnsignedByteType, Vector3, Vector2, TextureLoader, Texture as Texture$1, CubeReflectionMapping, EquirectangularReflectionMapping, CubeTextureLoader, Raycaster, OrthographicCamera, PerspectiveCamera, Scene, PCFShadowMap, VSMShadowMap, BasicShadowMap, ACESFilmicToneMapping, WebGLRenderer, HalfFloatType, Color } from 'three';
+import { WebGLCubeRenderTarget, WebGLRenderTarget, Frustum, Matrix4, Group, BoxGeometry, MeshBasicNodeMaterial, Mesh, Node, NodeUpdateType, Layers, ShaderMaterial, Uniform, SRGBColorSpace, RGBAFormat, UnsignedByteType, TextureLoader, Texture as Texture$1, CubeReflectionMapping, EquirectangularReflectionMapping, CubeTextureLoader, Vector3, Vector2, Raycaster, OrthographicCamera, PerspectiveCamera, Scene, PCFShadowMap, VSMShadowMap, BasicShadowMap, ACESFilmicToneMapping, WebGLRenderer, HalfFloatType, Color } from 'three';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { useRef, useMemo, useLayoutEffect, useEffect, useContext, useImperativeHandle, useCallback, useState } from 'react';
+import React__default, { useContext, useRef, useMemo, useLayoutEffect, useEffect, useImperativeHandle, useCallback, useState } from 'react';
 import useMeasure from 'react-use-measure';
 import { useFiber, useContextBridge, traverseFiber, FiberProvider } from 'its-fine';
 import { createWithEqualityFn } from 'zustand/traditional';
@@ -11,6 +11,7 @@ export { Scheduler, getScheduler } from '@pmndrs/scheduler';
 import Tb, { unstable_getCurrentPriorityLevel, unstable_IdlePriority, unstable_LowPriority, unstable_NormalPriority, unstable_UserBlockingPriority, unstable_ImmediatePriority, unstable_scheduleCallback } from 'scheduler';
 import { GroundedSkybox } from 'three/examples/jsm/objects/GroundedSkybox.js';
 import { HDRLoader } from 'three/examples/jsm/loaders/HDRLoader.js';
+import { HDRCubeTextureLoader } from 'three/examples/jsm/loaders/HDRCubeTextureLoader.js';
 import { EXRLoader } from 'three/examples/jsm/loaders/EXRLoader.js';
 import { UltraHDRLoader } from 'three/examples/jsm/loaders/UltraHDRLoader.js';
 import { GainMapLoader } from '@monogrid/gainmap-js';
@@ -33,11 +34,11 @@ const R3F_BUILD_WEBGPU = false;
 async function loadInspector() {
   throw new Error("Inspector is not available in legacy builds. Use @react-three/fiber/webgpu instead.");
 }
-const WebGPURenderer = class WebGPURenderer2 {
+class WebGPURenderer {
   constructor() {
     throw new Error("WebGPURenderer is not available in legacy builds. Use @react-three/fiber/webgpu instead.");
   }
-};
+}
 const RenderTarget = null;
 const CubeRenderTarget = null;
 
@@ -297,7 +298,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();
 }
@@ -513,8 +513,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;
@@ -528,6 +530,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",
@@ -537,7 +596,6 @@ const RESERVED_PROPS = [
   "dispose",
   "attach",
   "object",
-  "onUpdate",
   // Behavior flags
   "dispose"
 ];
@@ -615,11 +673,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;
@@ -631,6 +687,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];
@@ -736,1059 +799,754 @@ 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.createContext(null));
+
+function useStore() {
+  const store = 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$1(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) => suspend(() => fn(loader, inputs[index]), [loader, key], { equal: is.equ })
+  );
+  const stableRef = 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) => 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) => 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.createContext(null));
-const createStore = (invalidate, advance) => {
-  const rootStore = createWithEqualityFn((set, get) => {
-    const position = new Vector3();
-    const defaultTarget = new Vector3();
-    const tempTarget = new 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$1(callback, priorityOrOptions) {
+  const store = React.useContext(context);
+  const isInsideCanvas = store !== null;
+  const scheduler = getScheduler();
+  const optionsKey = typeof priorityOrOptions === "number" ? `p:${priorityOrOptions}` : priorityOrOptions ? JSON.stringify({
+    id: priorityOrOptions.id,
+    phase: priorityOrOptions.phase,
+    priority: priorityOrOptions.priority,
+    fps: priorityOrOptions.fps,
+    drop: priorityOrOptions.drop,
+    enabled: priorityOrOptions.enabled,
+    before: priorityOrOptions.before,
+    after: priorityOrOptions.after
+  }) : "";
+  const options = React.useMemo(() => {
+    return typeof priorityOrOptions === "number" ? { priority: priorityOrOptions } : priorityOrOptions ?? {};
+  }, [optionsKey]);
+  const reactId = React.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 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 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: 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) }
-              }));
-              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.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
-        }));
-        getScheduler().invalidate();
+      };
+    } else {
+      return scheduler.register(
+        (state, delta) => {
+          const frameState = state;
+          if (!frameState.renderer) return;
+          callbackRef.current?.(frameState, delta);
+        },
+        { id, ...options }
+      );
+    }
+  }, [store, scheduler, id, optionsKey, isLegacyPriority, isInsideCanvas]);
+  const isPaused = React.useSyncExternalStore(
+    // Subscribe function
+    React.useCallback(
+      (onStoreChange) => {
+        return 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 }));
-        getScheduler().frameloop = frameloop;
+      [id]
+    ),
+    // getSnapshot function
+    React.useCallback(() => getScheduler().isJobPaused(id), [id]),
+    // getServerSnapshot function (SSR)
+    React.useCallback(() => false, [])
+  );
+  const controls = React.useMemo(() => {
+    const scheduler2 = 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 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.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) => {
+        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) => {
+        getScheduler().step(timestamp);
+      },
+      /**
+       * Request frames for this job's owning root without waking sibling roots.
+       */
+      invalidate: (frames, stackFrames) => {
+        const scheduler3 = 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: () => {
+        getScheduler().pauseJob(id);
+      },
+      /**
+       * Resume this job (set enabled=true).
+       */
+      resume: () => {
+        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 });
-      }
+  }, [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 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]);
     }
-  });
-  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);
+    return result;
+  }
+}
+function useTexture(input, optionsOrOnLoad) {
+  const renderer = useThree$1((state) => state.internal.actualRenderer);
+  const store = useStore();
+  const options = typeof optionsOrOnLoad === "function" ? { onLoad: optionsOrOnLoad } : optionsOrOnLoad ?? {};
+  const { onLoad, cache = true } = options;
+  const onLoadRef = useRef(onLoad);
+  onLoadRef.current = onLoad;
+  const onLoadCalledForRef = useRef(null);
+  const inputKey = useMemo(() => inputSignature(input), [input]);
+  const stableInput = useMemo(() => input, [inputKey]);
+  const urls = useMemo(() => getUrls(stableInput), [stableInput]);
+  const cachedResult = 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(
+    TextureLoader,
+    IsObject(stableInput) ? Object.values(stableInput) : stableInput
+  );
+  const mappedTextures = 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]);
+  useLayoutEffect(() => {
+    if (cachedResult) return;
+    if (onLoadCalledForRef.current === inputKey) return;
+    onLoadCalledForRef.current = inputKey;
+    onLoadRef.current?.(mappedTextures);
+  }, [cachedResult, mappedTextures, inputKey]);
+  useEffect(() => {
+    if (cachedResult) return;
+    if ("initTexture" in renderer) {
+      let textureArray = [];
+      if (Array.isArray(loadedTextures)) {
+        textureArray = loadedTextures;
+      } else if (loadedTextures instanceof Texture$1) {
+        textureArray = [loadedTextures];
+      } else if (IsObject(loadedTextures)) {
+        textureArray = Object.values(loadedTextures);
+      }
+      textureArray.forEach((texture) => {
+        if (texture instanceof Texture$1) {
+          renderer.initTexture(texture);
         }
+      });
+    }
+  }, [renderer, loadedTextures, cachedResult]);
+  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]]);
       }
     }
-    if (camera !== oldCamera) {
-      oldCamera = camera;
-      const { rootScene } = rootStore.getState();
-      if (camera && rootScene && !camera.parent) {
-        rootScene.add(camera);
+    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);
       }
-      set((state2) => ({ viewport: { ...state2.viewport, ...state2.viewport.getCurrentViewport(camera) } }));
-      const currentState = rootStore.getState();
-      if (currentState.autoUpdateFrustum && camera) {
-        updateFrustum(camera, currentState.frustum);
+      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);
       }
-    }
-  });
-  rootStore.subscribe((state2) => invalidate(state2));
-  return rootStore;
+      return { _textureRefs: refs };
+    });
+  }, [cache, stableInput, mappedTextures, store]);
+  return mappedTextures;
+}
+useTexture.preload = (url) => useLoader.preload(TextureLoader, url);
+useTexture.clear = (input) => useLoader.clear(TextureLoader, input);
+const Texture = ({
+  children,
+  input,
+  onLoad,
+  cache
+}) => {
+  const options = typeof onLoad === "function" ? { onLoad, cache } : { ...onLoad, cache };
+  const ret = useTexture(input, options);
+  return /* @__PURE__ */ jsx(Fragment, { children: children?.(ret) });
 };
 
-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);
+function useTextures(selector) {
+  const store = useStore();
+  const registry = useMemo(() => {
+    const getState = store.getState;
+    const setState = store.setState;
+    const getOne = (key) => getState().textures.get(key);
+    return {
+      get all() {
+        return getState().textures;
+      },
+      get(input) {
+        if (typeof input === "string") return getOne(input);
+        if (Array.isArray(input)) return input.map(getOne);
+        const out = {};
+        for (const name in input) out[name] = getOne(input[name]);
+        return out;
+      },
+      has: (key) => getState().textures.has(key),
+      add(keyOrRecord, texture) {
+        setState((state) => {
+          const textures = new Map(state.textures);
+          if (typeof keyOrRecord === "string") {
+            textures.set(keyOrRecord, texture);
+          } else {
+            for (const key in keyOrRecord) textures.set(key, keyOrRecord[key]);
+          }
+          return { textures };
+        });
+      },
+      dispose(key, options) {
+        const state = getState();
+        const refs = state._textureRefs.get(key) ?? 0;
+        if (refs > 0 && !options?.force) {
+          console.warn(
+            `[useTextures] "${key}" still has ${refs} active reference(s); skipping dispose. Pass { force: true } to override.`
+          );
+          return false;
+        }
+        state.textures.get(key)?.dispose();
+        setState((s) => {
+          const textures = new Map(s.textures);
+          textures.delete(key);
+          const nextRefs = new Map(s._textureRefs);
+          nextRefs.delete(key);
+          return { textures, _textureRefs: nextRefs };
+        });
+        return true;
+      },
+      disposeAll() {
+        for (const texture of getState().textures.values()) texture.dispose();
+        setState({ textures: /* @__PURE__ */ new Map(), _textureRefs: /* @__PURE__ */ new Map() });
+      }
+    };
+  }, [store]);
+  const subscribe = selector ? () => selector(registry) : (state) => state.textures;
+  const selected = useThree$1(subscribe);
+  return selector ? selected : registry;
+}
+
+function useRenderTarget(widthOrOptions, heightOrOptions, options) {
+  const isLegacy = useThree$1((s) => s.isLegacy);
+  const size = useThree$1((s) => s.size);
+  let width;
+  let height;
+  let opts;
+  if (typeof widthOrOptions === "object") {
+    opts = widthOrOptions;
+  } else if (typeof widthOrOptions === "number") {
+    width = widthOrOptions;
+    if (typeof heightOrOptions === "object") {
+      height = widthOrOptions;
+      opts = heightOrOptions;
+    } else if (typeof heightOrOptions === "number") {
+      height = heightOrOptions;
+      opts = options;
+    } else {
+      height = widthOrOptions;
     }
-    return loader;
   }
-  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;
-      });
-    }
-    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}`))
-      )
-    );
-  };
+  return useMemo(() => {
+    const w = width ?? size.width;
+    const h = height ?? size.height;
+    return new WebGLRenderTarget(w, h, opts);
+  }, [width, height, size.width, size.height, opts, isLegacy]);
 }
-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) => suspend(() => fn(loader, inputs[index]), [loader, key], { equal: is.equ })
+
+const presetsObj = {
+  apartment: "lebombo_1k.hdr",
+  city: "potsdamer_platz_1k.hdr",
+  dawn: "kiara_1_dawn_1k.hdr",
+  forest: "forest_slope_1k.hdr",
+  lobby: "st_fagans_interior_1k.hdr",
+  night: "dikhololo_night_1k.hdr",
+  park: "rooitou_park_1k.hdr",
+  studio: "studio_small_03_1k.hdr",
+  sunset: "venice_sunset_1k.hdr",
+  warehouse: "empty_warehouse_01_1k.hdr"
+};
+
+const CUBEMAP_ROOT = "https://raw.githack.com/pmndrs/drei-assets/456060a26bbeb8fdf79326f224b6d99b8bcce736/hdri/";
+const isArray = (arr) => Array.isArray(arr);
+const defaultFiles = ["/px.png", "/nx.png", "/py.png", "/ny.png", "/pz.png", "/nz.png"];
+function useEnvironment({
+  files = defaultFiles,
+  path = "",
+  preset = void 0,
+  colorSpace = void 0,
+  extensions
+} = {}) {
+  if (preset) {
+    validatePreset(preset);
+    files = presetsObj[preset];
+    path = CUBEMAP_ROOT;
+  }
+  const multiFile = isArray(files);
+  const { extension, isCubemap } = getExtension(files);
+  const loader = getLoader(extension);
+  if (!loader) throw new Error("useEnvironment: Unrecognized file extension: " + files);
+  const renderer = useThree$1((state) => state.renderer);
+  useLayoutEffect(() => {
+    if (extension !== "webp" && extension !== "jpg" && extension !== "jpeg") return;
+    function clearGainmapTexture() {
+      useLoader.clear(loader, multiFile ? [files] : files);
+    }
+    renderer.domElement.addEventListener("webglcontextlost", clearGainmapTexture, { once: true });
+  }, [extension, files, loader, multiFile, renderer.domElement]);
+  const loaderResult = useLoader(
+    loader,
+    multiFile ? [files] : files,
+    (loader2) => {
+      if (extension === "webp" || extension === "jpg" || extension === "jpeg") {
+        loader2.setRenderer?.(renderer);
+      }
+      loader2.setPath?.(path);
+      if (extensions) extensions(loader2);
+    }
   );
-  return Array.isArray(input) ? results : results[0];
+  let texture = multiFile ? (
+    // @ts-ignore
+    loaderResult[0]
+  ) : loaderResult;
+  if (extension === "jpg" || extension === "jpeg" || extension === "webp") {
+    texture = texture.renderTarget?.texture;
+  }
+  texture.mapping = isCubemap ? CubeReflectionMapping : EquirectangularReflectionMapping;
+  texture.colorSpace = colorSpace ?? (isCubemap && extension !== "hdr-cube" ? "srgb" : "srgb-linear");
+  return texture;
 }
-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) => preload(() => loadingFn(extensions, onProgress)(loader, inputs[index]), [loader, key])
-  );
+const preloadDefaultOptions = {
+  files: defaultFiles,
+  path: "",
+  preset: void 0,
+  extensions: void 0
 };
-useLoader.clear = function(loader, input, cacheKey) {
-  const cacheKeys = Array.isArray(cacheKey ?? input) ? cacheKey ?? input : [cacheKey ?? input];
-  cacheKeys.forEach((key) => clear([loader, key]));
+useEnvironment.preload = (preloadOptions) => {
+  const options = { ...preloadDefaultOptions, ...preloadOptions };
+  let { files, path = "" } = options;
+  const { preset, extensions } = options;
+  if (preset) {
+    validatePreset(preset);
+    files = presetsObj[preset];
+    path = CUBEMAP_ROOT;
+  }
+  const { extension } = getExtension(files);
+  if (extension === "webp" || extension === "jpg" || extension === "jpeg") {
+    throw new Error("useEnvironment: Preloading gainmaps is not supported");
+  }
+  const loader = getLoader(extension);
+  if (!loader) throw new Error("useEnvironment: Unrecognized file extension: " + files);
+  useLoader.preload(loader, isArray(files) ? [files] : files, (loader2) => {
+    loader2.setPath?.(path);
+    if (extensions) extensions(loader2);
+  });
 };
-useLoader.loader = getLoader$1;
+const clearDefaultOptins = {
+  files: defaultFiles,
+  preset: void 0
+};
+useEnvironment.clear = (clearOptions) => {
+  const options = { ...clearDefaultOptins, ...clearOptions };
+  let { files } = options;
+  const { preset } = options;
+  if (preset) {
+    validatePreset(preset);
+    files = presetsObj[preset];
+  }
+  const { extension } = getExtension(files);
+  const loader = getLoader(extension);
+  if (!loader) throw new Error("useEnvironment: Unrecognized file extension: " + files);
+  useLoader.clear(loader, isArray(files) ? [files] : files);
+};
+function validatePreset(preset) {
+  if (!(preset in presetsObj)) throw new Error("Preset must be one of: " + Object.keys(presetsObj).join(", "));
+}
+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 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" ? CubeTextureLoader : extension === "hdr-cube" ? HDRCubeTextureLoader : extension === "hdr" ? HDRLoader : extension === "exr" ? EXRLoader : extension === "jpg" || extension === "jpeg" ? UltraHDRLoader : extension === "webp" ? GainMapLoader : null;
+  return loader;
+}
 
-function useFrame(callback, priorityOrOptions) {
-  const store = React.useContext(context);
-  const isInsideCanvas = store !== null;
+function useInstanceHandle(ref) {
+  const instance = useRef(null);
+  useImperativeHandle(instance, () => ref.current.__r3f, [ref]);
+  return instance;
+}
+function useGraph(object) {
+  return useMemo(() => buildGraph(object), [object]);
+}
+
+const t = 1, o = 8, r = 32, e = 2, i$1 = 268435456;
+
+let effectId = 0;
+function addEffect(callback) {
+  notifyDepreciated({
+    heading: "addEffect is deprecated",
+    body: 'Use useFrame(callback, { phase: "start" }) instead.\naddEffect will be removed in a future version.',
+    link: "https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe"
+  });
+  const id = `legacy_effect_${effectId++}`;
+  return getScheduler().registerGlobal("before", id, callback);
+}
+function addAfterEffect(callback) {
+  notifyDepreciated({
+    heading: "addAfterEffect is deprecated",
+    body: 'Use useFrame(callback, { phase: "finish" }) instead.\naddAfterEffect will be removed in a future version.',
+    link: "https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe"
+  });
+  const id = `legacy_afterEffect_${effectId++}`;
+  return getScheduler().registerGlobal("after", id, callback);
+}
+function addTail(callback) {
+  notifyDepreciated({
+    heading: "addTail is deprecated",
+    body: "Use scheduler.onIdle(callback) instead.\naddTail will be removed in a future version.",
+    link: "https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe"
+  });
+  return getScheduler().onIdle(callback);
+}
+function invalidate(state, frames = 1, stackFrames = false) {
+  const rootId = state?.internal?.rootId;
   const 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.useMemo(() => {
-    return typeof priorityOrOptions === "number" ? { priority: priorityOrOptions } : priorityOrOptions ?? {};
-  }, [optionsKey]);
-  const reactId = React.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;
+  if (rootId) scheduler.invalidateRoot(rootId, frames, stackFrames);
+  else scheduler.invalidate(frames, stackFrames);
+}
+function advance(timestamp, runGlobalEffects, state) {
+  const rootId = state?.internal?.rootId;
+  const scheduler = getScheduler();
+  if (rootId) scheduler.stepRoot(rootId, timestamp);
+  else scheduler.step(timestamp);
+}
+
+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;
+function Kb() {
+  return _b || (_b = 1, (function(Tt) {
+    Tt.exports = function(m) {
+      function Yn(t, r, a, l) {
+        return new uc(t, r, a, l);
+      }
+      function _d() {
+      }
+      function F(t) {
+        var r = "https://react.dev/errors/" + t;
+        if (1 < arguments.length) {
+          r += "?args[]=" + encodeURIComponent(arguments[1]);
+          for (var a = 2; a < arguments.length; a++) r += "&args[]=" + encodeURIComponent(arguments[a]);
         }
-        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"
-        });
+        return "Minified React error #" + t + "; visit " + r + " for the full message or use the non-minified dev environment for full errors and additional helpful warnings.";
       }
-      const wrappedCallback = (frameState, delta) => {
-        const localState = store.getState();
-        const mergedState = {
-          ...localState,
-          time: frameState.time,
-          delta: frameState.delta,
-          elapsed: frameState.elapsed,
-          frame: frameState.frame
-        };
-        callbackRef.current?.(mergedState, delta);
-      };
-      const unregister = scheduler.register(wrappedCallback, {
-        id,
-        rootId,
-        ...options
-      });
-      return () => {
-        unregister();
-        if (isLegacyPriority) {
-          const currentState = store.getState();
-          if (currentState.internal) {
-            currentState.internal.priority--;
-            let parentRoot = currentState.previousRoot;
-            while (parentRoot) {
-              const parentState = parentRoot.getState();
-              if (parentState?.internal) parentState.internal.priority--;
-              parentRoot = parentState?.previousRoot;
-            }
-          }
+      function Rd(t) {
+        var r = t, a = t;
+        if (t.alternate) for (; r.return; ) r = r.return;
+        else {
+          t = r;
+          do
+            r = t, (r.flags & 4098) !== 0 && (a = r.return), t = r.return;
+          while (t);
         }
-      };
-    } else {
-      return scheduler.register(
-        (state, delta) => {
-          const frameState = state;
-          if (!frameState.renderer) return;
-          callbackRef.current?.(frameState, delta);
-        },
-        { id, ...options }
-      );
-    }
-  }, [store, scheduler, id, optionsKey, isLegacyPriority, isInsideCanvas]);
-  const isPaused = React.useSyncExternalStore(
-    // Subscribe function
-    React.useCallback(
-      (onStoreChange) => {
-        return getScheduler().subscribeJobState(id, onStoreChange);
-      },
-      [id]
-    ),
-    // getSnapshot function
-    React.useCallback(() => getScheduler().isJobPaused(id), [id]),
-    // getServerSnapshot function (SSR)
-    React.useCallback(() => false, [])
-  );
-  const controls = React.useMemo(() => {
-    const scheduler2 = 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) => {
-        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) => {
-        getScheduler().step(timestamp);
-      },
-      /**
-       * Pause this job (set enabled=false).
-       * Job remains registered but won't run.
-       */
-      pause: () => {
-        getScheduler().pauseJob(id);
-      },
-      /**
-       * Resume this job (set enabled=true).
-       */
-      resume: () => {
-        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 = useRef(onLoad);
-  onLoadRef.current = onLoad;
-  const onLoadCalledForRef = useRef(null);
-  const urls = useMemo(() => getUrls(input), [input]);
-  const cachedResult = 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(
-    TextureLoader,
-    IsObject(input) ? Object.values(input) : input
-  );
-  const inputKey = urls.join("\0");
-  useLayoutEffect(() => {
-    if (cachedResult) return;
-    if (onLoadCalledForRef.current === inputKey) return;
-    onLoadCalledForRef.current = inputKey;
-    onLoadRef.current?.(loadedTextures);
-  }, [cachedResult, loadedTextures, inputKey]);
-  useEffect(() => {
-    if (cachedResult) return;
-    if ("initTexture" in renderer) {
-      let textureArray = [];
-      if (Array.isArray(loadedTextures)) {
-        textureArray = loadedTextures;
-      } else if (loadedTextures instanceof Texture$1) {
-        textureArray = [loadedTextures];
-      } else if (IsObject(loadedTextures)) {
-        textureArray = Object.values(loadedTextures);
+        return r.tag === 3 ? a : null;
       }
-      textureArray.forEach((texture) => {
-        if (texture instanceof Texture$1) {
-          renderer.initTexture(texture);
-        }
-      });
-    }
-  }, [renderer, loadedTextures, cachedResult]);
-  const mappedTextures = 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]);
-  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]]);
+      function du(t) {
+        if (Rd(t) !== t) throw Error(F(188));
       }
-    }
-    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;
+      function fu(t) {
+        var r = t.alternate;
+        if (!r) {
+          if (r = Rd(t), r === null) throw Error(F(188));
+          return r !== t ? null : t;
+        }
+        for (var a = t, l = r; ; ) {
+          var c = a.return;
+          if (c === null) break;
+          var d = c.alternate;
+          if (d === null) {
+            if (l = c.return, l !== null) {
+              a = l;
+              continue;
+            }
+            break;
           }
-          textures.set(url, texture);
+          if (c.child === d.child) {
+            for (d = c.child; d; ) {
+              if (d === a) return du(c), t;
+              if (d === l) return du(c), r;
+              d = d.sibling;
+            }
+            throw Error(F(188));
+          }
+          if (a.return !== l.return) a = c, l = d;
+          else {
+            for (var h = false, y = c.child; y; ) {
+              if (y === a) {
+                h = true, a = c, l = d;
+                break;
+              }
+              if (y === l) {
+                h = true, l = c, a = d;
+                break;
+              }
+              y = y.sibling;
+            }
+            if (!h) {
+              for (y = d.child; y; ) {
+                if (y === a) {
+                  h = true, a = d, l = c;
+                  break;
+                }
+                if (y === l) {
+                  h = true, l = d, a = c;
+                  break;
+                }
+                y = y.sibling;
+              }
+              if (!h) throw Error(F(189));
+            }
+          }
+          if (a.alternate !== l) throw Error(F(190));
         }
-        refs.set(url, (refs.get(url) ?? 0) + 1);
+        if (a.tag !== 3) throw Error(F(188));
+        return a.stateNode.current === a ? t : r;
       }
-      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);
+      function pu(t) {
+        var r = t.tag;
+        if (r === 5 || r === 26 || r === 27 || r === 6) return t;
+        for (t = t.child; t !== null; ) {
+          if (r = pu(t), r !== null) return r;
+          t = t.sibling;
+        }
+        return null;
       }
-      return { _textureRefs: refs };
-    });
-  }, [cache, input, mappedTextures, store]);
-  return mappedTextures;
-}
-useTexture.preload = (url) => useLoader.preload(TextureLoader, url);
-useTexture.clear = (input) => useLoader.clear(TextureLoader, input);
-const Texture = ({
-  children,
-  input,
-  onLoad,
-  cache
-}) => {
-  const options = typeof onLoad === "function" ? { onLoad, cache } : { ...onLoad, cache };
-  const ret = useTexture(input, options);
-  return /* @__PURE__ */ jsx(Fragment, { children: children?.(ret) });
-};
-
-function useTextures(selector) {
-  const store = useStore();
-  const registry = useMemo(() => {
-    const getState = store.getState;
-    const setState = store.setState;
-    const getOne = (key) => getState().textures.get(key);
-    return {
-      get all() {
-        return getState().textures;
-      },
-      get(input) {
-        if (typeof input === "string") return getOne(input);
-        if (Array.isArray(input)) return input.map(getOne);
-        const out = {};
-        for (const name in input) out[name] = getOne(input[name]);
-        return out;
-      },
-      has: (key) => getState().textures.has(key),
-      add(keyOrRecord, texture) {
-        setState((state) => {
-          const textures = new Map(state.textures);
-          if (typeof keyOrRecord === "string") {
-            textures.set(keyOrRecord, texture);
-          } else {
-            for (const key in keyOrRecord) textures.set(key, keyOrRecord[key]);
-          }
-          return { textures };
-        });
-      },
-      dispose(key, options) {
-        const state = getState();
-        const refs = state._textureRefs.get(key) ?? 0;
-        if (refs > 0 && !options?.force) {
-          console.warn(
-            `[useTextures] "${key}" still has ${refs} active reference(s); skipping dispose. Pass { force: true } to override.`
-          );
-          return false;
+      function lt(t) {
+        var r = t.tag;
+        if (r === 5 || r === 26 || r === 27 || r === 6) return t;
+        for (t = t.child; t !== null; ) {
+          if (t.tag !== 4 && (r = lt(t), r !== null)) return r;
+          t = t.sibling;
         }
-        state.textures.get(key)?.dispose();
-        setState((s) => {
-          const textures = new Map(s.textures);
-          textures.delete(key);
-          const nextRefs = new Map(s._textureRefs);
-          nextRefs.delete(key);
-          return { textures, _textureRefs: nextRefs };
-        });
-        return true;
-      },
-      disposeAll() {
-        for (const texture of getState().textures.values()) texture.dispose();
-        setState({ textures: /* @__PURE__ */ new Map(), _textureRefs: /* @__PURE__ */ new Map() });
+        return null;
       }
-    };
-  }, [store]);
-  const subscribe = selector ? () => selector(registry) : (state) => state.textures;
-  const selected = useThree(subscribe);
-  return selector ? selected : registry;
-}
-
-function useRenderTarget(widthOrOptions, heightOrOptions, options) {
-  const isLegacy = useThree((s) => s.isLegacy);
-  const size = useThree((s) => s.size);
-  let width;
-  let height;
-  let opts;
-  if (typeof widthOrOptions === "object") {
-    opts = widthOrOptions;
-  } else if (typeof widthOrOptions === "number") {
-    width = widthOrOptions;
-    if (typeof heightOrOptions === "object") {
-      height = widthOrOptions;
-      opts = heightOrOptions;
-    } else if (typeof heightOrOptions === "number") {
-      height = heightOrOptions;
-      opts = options;
-    } else {
-      height = widthOrOptions;
-    }
-  }
-  return useMemo(() => {
-    const w = width ?? size.width;
-    const h = height ?? size.height;
-    return new WebGLRenderTarget(w, h, opts);
-  }, [width, height, size.width, size.height, opts, isLegacy]);
-}
-
-const presetsObj = {
-  apartment: "lebombo_1k.hdr",
-  city: "potsdamer_platz_1k.hdr",
-  dawn: "kiara_1_dawn_1k.hdr",
-  forest: "forest_slope_1k.hdr",
-  lobby: "st_fagans_interior_1k.hdr",
-  night: "dikhololo_night_1k.hdr",
-  park: "rooitou_park_1k.hdr",
-  studio: "studio_small_03_1k.hdr",
-  sunset: "venice_sunset_1k.hdr",
-  warehouse: "empty_warehouse_01_1k.hdr"
-};
-
-const CUBEMAP_ROOT = "https://raw.githack.com/pmndrs/drei-assets/456060a26bbeb8fdf79326f224b6d99b8bcce736/hdri/";
-const isArray = (arr) => Array.isArray(arr);
-const defaultFiles = ["/px.png", "/nx.png", "/py.png", "/ny.png", "/pz.png", "/nz.png"];
-function useEnvironment({
-  files = defaultFiles,
-  path = "",
-  preset = void 0,
-  colorSpace = void 0,
-  extensions
-} = {}) {
-  if (preset) {
-    validatePreset(preset);
-    files = presetsObj[preset];
-    path = CUBEMAP_ROOT;
-  }
-  const multiFile = isArray(files);
-  const { extension, isCubemap } = getExtension(files);
-  const loader = getLoader(extension);
-  if (!loader) throw new Error("useEnvironment: Unrecognized file extension: " + files);
-  const renderer = useThree((state) => state.renderer);
-  useLayoutEffect(() => {
-    if (extension !== "webp" && extension !== "jpg" && extension !== "jpeg") return;
-    function clearGainmapTexture() {
-      useLoader.clear(loader, multiFile ? [files] : files);
-    }
-    renderer.domElement.addEventListener("webglcontextlost", clearGainmapTexture, { once: true });
-  }, [extension, files, loader, multiFile, renderer.domElement]);
-  const loaderResult = useLoader(
-    loader,
-    multiFile ? [files] : files,
-    (loader2) => {
-      if (extension === "webp" || extension === "jpg" || extension === "jpeg") {
-        loader2.setRenderer?.(renderer);
-      }
-      loader2.setPath?.(path);
-      if (extensions) extensions(loader2);
-    }
-  );
-  let texture = multiFile ? (
-    // @ts-ignore
-    loaderResult[0]
-  ) : loaderResult;
-  if (extension === "jpg" || extension === "jpeg" || extension === "webp") {
-    texture = texture.renderTarget?.texture;
-  }
-  texture.mapping = isCubemap ? CubeReflectionMapping : EquirectangularReflectionMapping;
-  texture.colorSpace = colorSpace ?? (isCubemap ? "srgb" : "srgb-linear");
-  return texture;
-}
-const preloadDefaultOptions = {
-  files: defaultFiles,
-  path: "",
-  preset: void 0,
-  extensions: void 0
-};
-useEnvironment.preload = (preloadOptions) => {
-  const options = { ...preloadDefaultOptions, ...preloadOptions };
-  let { files, path = "" } = options;
-  const { preset, extensions } = options;
-  if (preset) {
-    validatePreset(preset);
-    files = presetsObj[preset];
-    path = CUBEMAP_ROOT;
-  }
-  const { extension } = getExtension(files);
-  if (extension === "webp" || extension === "jpg" || extension === "jpeg") {
-    throw new Error("useEnvironment: Preloading gainmaps is not supported");
-  }
-  const loader = getLoader(extension);
-  if (!loader) throw new Error("useEnvironment: Unrecognized file extension: " + files);
-  useLoader.preload(loader, isArray(files) ? [files] : files, (loader2) => {
-    loader2.setPath?.(path);
-    if (extensions) extensions(loader2);
-  });
-};
-const clearDefaultOptins = {
-  files: defaultFiles,
-  preset: void 0
-};
-useEnvironment.clear = (clearOptions) => {
-  const options = { ...clearDefaultOptins, ...clearOptions };
-  let { files } = options;
-  const { preset } = options;
-  if (preset) {
-    validatePreset(preset);
-    files = presetsObj[preset];
-  }
-  const { extension } = getExtension(files);
-  const loader = getLoader(extension);
-  if (!loader) throw new Error("useEnvironment: Unrecognized file extension: " + files);
-  useLoader.clear(loader, isArray(files) ? [files] : files);
-};
-function validatePreset(preset) {
-  if (!(preset in presetsObj)) throw new Error("Preset must be one of: " + Object.keys(presetsObj).join(", "));
-}
-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();
-  return { extension, isCubemap, isGainmap };
-}
-function getLoader(extension) {
-  const loader = extension === "cube" ? CubeTextureLoader : extension === "hdr" ? HDRLoader : extension === "exr" ? EXRLoader : extension === "jpg" || extension === "jpeg" ? UltraHDRLoader : extension === "webp" ? GainMapLoader : null;
-  return loader;
-}
-
-function useStore() {
-  const store = 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 = useRef(null);
-  useImperativeHandle(instance, () => ref.current.__r3f, [ref]);
-  return instance;
-}
-function useGraph(object) {
-  return useMemo(() => buildGraph(object), [object]);
-}
-
-const t = 1, o = 8, r = 32, e = 2, i$1 = 268435456;
-
-let effectId = 0;
-function addEffect(callback) {
-  notifyDepreciated({
-    heading: "addEffect is deprecated",
-    body: 'Use useFrame(callback, { phase: "start" }) instead.\naddEffect will be removed in a future version.',
-    link: "https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe"
-  });
-  const id = `legacy_effect_${effectId++}`;
-  return getScheduler().registerGlobal("before", id, callback);
-}
-function addAfterEffect(callback) {
-  notifyDepreciated({
-    heading: "addAfterEffect is deprecated",
-    body: 'Use useFrame(callback, { phase: "finish" }) instead.\naddAfterEffect will be removed in a future version.',
-    link: "https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe"
-  });
-  const id = `legacy_afterEffect_${effectId++}`;
-  return getScheduler().registerGlobal("after", id, callback);
-}
-function addTail(callback) {
-  notifyDepreciated({
-    heading: "addTail is deprecated",
-    body: "Use scheduler.onIdle(callback) instead.\naddTail will be removed in a future version.",
-    link: "https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe"
-  });
-  return getScheduler().onIdle(callback);
-}
-function invalidate(state, frames = 1, stackFrames = false) {
-  getScheduler().invalidate(frames, stackFrames);
-}
-function advance(timestamp) {
-  getScheduler().step(timestamp);
-}
-
-const version = "10.0.0-alpha.3";
-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;
-function Kb() {
-  return _b || (_b = 1, (function(Tt) {
-    Tt.exports = function(m) {
-      function Yn(t, r, a, l) {
-        return new uc(t, r, a, l);
-      }
-      function _d() {
-      }
-      function F(t) {
-        var r = "https://react.dev/errors/" + t;
-        if (1 < arguments.length) {
-          r += "?args[]=" + encodeURIComponent(arguments[1]);
-          for (var a = 2; a < arguments.length; a++) r += "&args[]=" + encodeURIComponent(arguments[a]);
-        }
-        return "Minified React error #" + t + "; visit " + r + " for the full message or use the non-minified dev environment for full errors and additional helpful warnings.";
-      }
-      function Rd(t) {
-        var r = t, a = t;
-        if (t.alternate) for (; r.return; ) r = r.return;
-        else {
-          t = r;
-          do
-            r = t, (r.flags & 4098) !== 0 && (a = r.return), t = r.return;
-          while (t);
-        }
-        return r.tag === 3 ? a : null;
-      }
-      function du(t) {
-        if (Rd(t) !== t) throw Error(F(188));
-      }
-      function fu(t) {
-        var r = t.alternate;
-        if (!r) {
-          if (r = Rd(t), r === null) throw Error(F(188));
-          return r !== t ? null : t;
-        }
-        for (var a = t, l = r; ; ) {
-          var c = a.return;
-          if (c === null) break;
-          var d = c.alternate;
-          if (d === null) {
-            if (l = c.return, l !== null) {
-              a = l;
-              continue;
-            }
-            break;
-          }
-          if (c.child === d.child) {
-            for (d = c.child; d; ) {
-              if (d === a) return du(c), t;
-              if (d === l) return du(c), r;
-              d = d.sibling;
-            }
-            throw Error(F(188));
-          }
-          if (a.return !== l.return) a = c, l = d;
-          else {
-            for (var h = false, y = c.child; y; ) {
-              if (y === a) {
-                h = true, a = c, l = d;
-                break;
-              }
-              if (y === l) {
-                h = true, l = c, a = d;
-                break;
-              }
-              y = y.sibling;
-            }
-            if (!h) {
-              for (y = d.child; y; ) {
-                if (y === a) {
-                  h = true, a = d, l = c;
-                  break;
-                }
-                if (y === l) {
-                  h = true, l = d, a = c;
-                  break;
-                }
-                y = y.sibling;
-              }
-              if (!h) throw Error(F(189));
-            }
-          }
-          if (a.alternate !== l) throw Error(F(190));
-        }
-        if (a.tag !== 3) throw Error(F(188));
-        return a.stateNode.current === a ? t : r;
-      }
-      function pu(t) {
-        var r = t.tag;
-        if (r === 5 || r === 26 || r === 27 || r === 6) return t;
-        for (t = t.child; t !== null; ) {
-          if (r = pu(t), r !== null) return r;
-          t = t.sibling;
-        }
-        return null;
-      }
-      function lt(t) {
-        var r = t.tag;
-        if (r === 5 || r === 26 || r === 27 || r === 6) return t;
-        for (t = t.child; t !== null; ) {
-          if (t.tag !== 4 && (r = lt(t), r !== null)) return r;
-          t = t.sibling;
-        }
-        return null;
-      }
-      function Fl(t) {
-        return t === null || typeof t != "object" ? null : (t = Pf && t[Pf] || t["@@iterator"], typeof t == "function" ? t : null);
+      function Fl(t) {
+        return t === null || typeof t != "object" ? null : (t = Pf && t[Pf] || t["@@iterator"], typeof t == "function" ? t : null);
       }
       function hu(t) {
         if (t == null) return null;
@@ -13532,7 +13290,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) {
@@ -13880,7 +13641,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;
@@ -13895,162 +13656,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.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 = createWithEqualityFn((set, get) => {
+    const position = new Vector3();
+    const defaultTarget = new Vector3();
+    const tempTarget = new 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 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 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: 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) 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.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.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();
@@ -14285,7 +14375,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 = () => {
@@ -14293,7 +14383,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() {
@@ -14375,14 +14465,23 @@ function createRoot(canvas) {
         const newRootId = canvasId || scheduler.generateRootId();
         const unregisterRoot = scheduler.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.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?.();
+              }
             }
           },
           {
@@ -14438,7 +14537,8 @@ function createRoot(canvas) {
             const userHandlesRender = scheduler.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)));
@@ -14451,8 +14551,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 }
           }
         );
@@ -14471,8 +14570,22 @@ function createRoot(canvas) {
             scheduler
           }
         }));
+      } else {
+        const constraintsChanged = !is.equ(schedulerConfig?.before, lastConfiguredProps.schedulerBefore, shallowLoose) || !is.equ(schedulerConfig?.after, lastConfiguredProps.schedulerAfter, shallowLoose);
+        if (constraintsChanged) {
+          scheduler.setRootConstraints(rootId, {
+            before: schedulerConfig?.before,
+            after: schedulerConfig?.after
+          });
+        }
+        if (schedulerConfig?.order !== lastConfiguredProps.schedulerOrder) {
+          scheduler.setRootOrder(rootId, schedulerConfig?.order ?? 0);
+        }
       }
-      scheduler.frameloop = frameloop;
+      lastConfiguredProps.schedulerBefore = schedulerConfig?.before;
+      lastConfiguredProps.schedulerAfter = schedulerConfig?.after;
+      lastConfiguredProps.schedulerOrder = schedulerConfig?.order;
+      attachRootExtensions(store);
       onCreated = onCreatedCallback;
       configured = true;
       resolve();
@@ -14514,18 +14627,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) {
@@ -14595,11 +14714,24 @@ function PortalInner({ state = {}, children, container }) {
       }
     };
   }, [portalScene, container, injectScene]);
+  const lastRootState = 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 Vector3(), resolvedSize);
       if (camera !== rootState.camera) updateCamera(camera, resolvedSize);
     }
@@ -14608,6 +14740,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
@@ -14666,16 +14799,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;
@@ -14687,7 +14815,7 @@ function setEnvProps(background, scene, defaultScene, texture, sceneProps = {})
   };
 }
 function EnvironmentMap({ scene, background = false, map, ...config }) {
-  const defaultScene = useThree((state) => state.scene);
+  const defaultScene = useThree$1((state) => state.scene);
   React.useLayoutEffect(() => {
     if (map) return setEnvProps(background, scene, defaultScene, map, config);
   });
@@ -14705,7 +14833,7 @@ function EnvironmentCube({
   ...rest
 }) {
   const texture = useEnvironment(rest);
-  const defaultScene = useThree((state) => state.scene);
+  const defaultScene = useThree$1((state) => state.scene);
   React.useLayoutEffect(() => {
     return setEnvProps(background, scene, defaultScene, texture, {
       backgroundBlurriness: blur ?? backgroundBlurriness,
@@ -14742,9 +14870,9 @@ function EnvironmentPortal({
   preset = void 0,
   extensions
 }) {
-  const renderer = useThree((state) => state.renderer);
-  const isLegacy = useThree((state) => state.isLegacy);
-  const defaultScene = useThree((state) => state.scene);
+  const renderer = useThree$1((state) => state.renderer);
+  const isLegacy = useThree$1((state) => state.isLegacy);
+  const defaultScene = useThree$1((state) => state.scene);
   const camera = React.useRef(null);
   const [virtualScene] = React.useState(() => new Scene());
   const fbo = React.useMemo(() => {
@@ -14788,7 +14916,7 @@ function EnvironmentPortal({
     environmentRotation
   ]);
   let count = 1;
-  useFrame(() => {
+  useFrame$1(() => {
     if (frames === Infinity || count < frames) {
       const autoClear = renderer.autoClear;
       renderer.autoClear = true;
@@ -14828,7 +14956,7 @@ function EnvironmentGround(props) {
   ] });
 }
 function EnvironmentColor({ color, scene }) {
-  const defaultScene = useThree((state) => state.scene);
+  const defaultScene = useThree$1((state) => state.scene);
   React.useLayoutEffect(() => {
     if (color === void 0) return;
     const target = resolveScene(scene || defaultScene);
@@ -14900,38 +15028,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,
@@ -14969,9 +15065,9 @@ function CanvasImpl({
   React.useMemo(() => extend(THREE), []);
   const Bridge = useBridge();
   const backgroundProps = React.useMemo(() => parseBackground(background), [background]);
-  const hasInitialSizeRef = React.useRef(false);
+  const [hasInitialSize, setHasInitialSize] = React.useState(false);
   const measureConfig = React.useMemo(() => {
-    if (!hasInitialSizeRef.current) {
+    if (!hasInitialSize) {
       return {
         ...resize,
         scroll: resize?.scroll ?? true,
@@ -14983,7 +15079,7 @@ function CanvasImpl({
       debounce: { scroll: 50, resize: 0 },
       ...resize
     };
-  }, [resize, hasInitialSizeRef.current]);
+  }, [hasInitialSize, resize]);
   const [containerRef, containerRect] = useMeasure(measureConfig);
   const effectiveSize = React.useMemo(() => {
     let w = width ?? containerRect.width;
@@ -14999,9 +15095,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.useRef(null);
   const divRef = React.useRef(null);
   React.useImperativeHandle(ref, () => canvasRef.current);
@@ -15115,6 +15209,7 @@ function CanvasImpl({
     const canvas = canvasRef.current;
     if (canvas) {
       return () => {
+        if (canvas.isConnected) return;
         unmountComponentAtNode(canvas);
         root.current = null;
       };
@@ -15127,7 +15222,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 import.meta !== "undefined" && import.meta.hot) {
@@ -15173,10 +15268,13 @@ function CanvasImpl({
     }
   );
 }
-function Canvas(props) {
+function Canvas$1(props) {
   return /* @__PURE__ */ jsx(FiberProvider, { children: /* @__PURE__ */ jsx(CanvasImpl, { ...props }) });
 }
 
 extend(THREE);
+const useThree = useThree$1;
+const useFrame = useFrame$1;
+const Canvas = Canvas$1;
 
-export { Block, Canvas, Environment, EnvironmentCube, EnvironmentMap, EnvironmentPortal, ErrorBoundary, FROM_REF, IsObject, ONCE, Portal, R3F_BUILD_LEGACY, R3F_BUILD_WEBGPU, REACT_INTERNAL_PROPS, RESERVED_PROPS, Texture, _roots, addAfterEffect, addEffect, addTail, advance, applyProps, attach, buildGraph, calculateDpr, context, createEvents, createPointerEvents, createPortal, createRoot, createStore, detach, diffProps, dispose, createPointerEvents as events, extend, findInitialRoot, flushSync, fromRef, getInstanceProps, getPrimary, getPrimaryIds, getRootState, getUuidPrefix, hasConstructor, hasPrimary, invalidate, invalidateInstance, is, isColorRepresentation, isCopyable, isFromRef, isObject3D, isOnce, isOrthographicCamera, isRef$1 as isRef, isRenderer, isTexture, isVectorLike, once, prepare, presetsObj, reconciler, registerPrimary, removeInteractivity, resolve, swapInteractivity, unmountComponentAtNode, unregisterPrimary, updateCamera, updateFrustum, useBridge, useEnvironment, useFrame, useGraph, useInstanceHandle, useIsomorphicLayoutEffect, useLoader, useMutableCallback, useRenderTarget, useStore, useTexture, useTextures, useThree, waitForPrimary };
+export { Block, Canvas, Environment, EnvironmentCube, EnvironmentMap, EnvironmentPortal, ErrorBoundary, FROM_REF, IsObject, ONCE, Portal, R3F_BUILD_LEGACY, R3F_BUILD_WEBGPU, REACT_INTERNAL_PROPS, RESERVED_PROPS, Texture, _roots, addAfterEffect, addEffect, addTail, advance, applyProps, attach, buildGraph, calculateDpr, context, createEvents, createPointerEvents, createPortal, createRoot, createStore, detach, diffProps, dispose, createPointerEvents as events, extend, findInitialRoot, flushSync, fromRef, getInstanceProps, getPrimary, getPrimaryIds, getRootState, getUuidPrefix, hasConstructor, hasPrimary, invalidate, invalidateInstance, is, isColorRepresentation, isCopyable, isFromRef, isObject3D, isOnce, isOrthographicCamera, isRef$1 as isRef, isRenderer, isTexture, isVectorLike, once, prepare, presetsObj, reconciler, registerPrimary, registerRootExtension, removeInteractivity, resolve, setRenderOverride, swapInteractivity, unmountComponentAtNode, unregisterPrimary, updateCamera, updateFrustum, useBridge, useEnvironment, useFrame, useGraph, useInstanceHandle, useIsomorphicLayoutEffect, useLoader, useMutableCallback, useRenderTarget, useStore, useTexture, useTextures, useThree, waitForPrimary };