@react-three/fiber 10.0.0-alpha.1 → 10.0.0-canary.b0fafc8

package/dist/webgpu/index.cjs

@@ -6,6 +6,12 @@ const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const useMeasure = require('react-use-measure');
 const itsFine = require('its-fine');
+const fiber = require('@react-three/fiber');
+const GroundedSkybox_js = require('three/examples/jsm/objects/GroundedSkybox.js');
+const HDRLoader_js = require('three/examples/jsm/loaders/HDRLoader.js');
+const EXRLoader_js = require('three/examples/jsm/loaders/EXRLoader.js');
+const UltraHDRLoader_js = require('three/examples/jsm/loaders/UltraHDRLoader.js');
+const gainmapJs = require('@monogrid/gainmap-js');
 const Tb = require('scheduler');
 const traditional = require('zustand/traditional');
 const suspendReact = require('suspend-react');
@@ -13,6 +19,7 @@ const lite = require('dequal/lite');
 require('zustand/shallow');
 const tsl = require('three/tsl');
 
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
 
 function _interopNamespaceCompat(e) {
@@ -66,9 +73,377 @@ const THREE = /*#__PURE__*/_mergeNamespaces({
   WebGLRenderer: WebGLRenderer
 }, [webgpu__namespace]);
 
-var __defProp$2 = Object.defineProperty;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$2 = (obj, key, value) => __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
+const primaryRegistry = /* @__PURE__ */ new Map();
+const pendingSubscribers = /* @__PURE__ */ new Map();
+function registerPrimary(id, renderer, store) {
+  if (primaryRegistry.has(id)) {
+    console.warn(`Canvas with id="${id}" already registered. Overwriting.`);
+  }
+  const entry = { renderer, store };
+  primaryRegistry.set(id, entry);
+  const subscribers = pendingSubscribers.get(id);
+  if (subscribers) {
+    subscribers.forEach((callback) => callback(entry));
+    pendingSubscribers.delete(id);
+  }
+  return () => {
+    const currentEntry = primaryRegistry.get(id);
+    if (currentEntry?.renderer === renderer) {
+      primaryRegistry.delete(id);
+    }
+  };
+}
+function getPrimary(id) {
+  return primaryRegistry.get(id);
+}
+function waitForPrimary(id, timeout = 5e3) {
+  const existing = primaryRegistry.get(id);
+  if (existing) {
+    return Promise.resolve(existing);
+  }
+  return new Promise((resolve, reject) => {
+    const timeoutId = setTimeout(() => {
+      const subscribers = pendingSubscribers.get(id);
+      if (subscribers) {
+        const index = subscribers.indexOf(callback);
+        if (index !== -1) subscribers.splice(index, 1);
+        if (subscribers.length === 0) pendingSubscribers.delete(id);
+      }
+      reject(new Error(`Timeout waiting for canvas with id="${id}". Make sure a <Canvas id="${id}"> is mounted.`));
+    }, timeout);
+    const callback = (entry) => {
+      clearTimeout(timeoutId);
+      resolve(entry);
+    };
+    if (!pendingSubscribers.has(id)) {
+      pendingSubscribers.set(id, []);
+    }
+    pendingSubscribers.get(id).push(callback);
+  });
+}
+function hasPrimary(id) {
+  return primaryRegistry.has(id);
+}
+function unregisterPrimary(id) {
+  primaryRegistry.delete(id);
+}
+function getPrimaryIds() {
+  return Array.from(primaryRegistry.keys());
+}
+
+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$1(extension);
+  if (!loader) throw new Error("useEnvironment: Unrecognized file extension: " + files);
+  const renderer = fiber.useThree((state) => state.renderer);
+  React.useLayoutEffect(() => {
+    if (extension !== "webp" && extension !== "jpg" && extension !== "jpeg") return;
+    function clearGainmapTexture() {
+      fiber.useLoader.clear(loader, multiFile ? [files] : files);
+    }
+    renderer.domElement.addEventListener("webglcontextlost", clearGainmapTexture, { once: true });
+  }, [files, renderer.domElement]);
+  const loaderResult = fiber.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 ? webgpu.CubeReflectionMapping : webgpu.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$1(extension);
+  if (!loader) throw new Error("useEnvironment: Unrecognized file extension: " + files);
+  fiber.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$1(extension);
+  if (!loader) throw new Error("useEnvironment: Unrecognized file extension: " + files);
+  fiber.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$1(extension) {
+  const loader = extension === "cube" ? webgpu.CubeTextureLoader : extension === "hdr" ? HDRLoader_js.HDRLoader : extension === "exr" ? EXRLoader_js.EXRLoader : extension === "jpg" || extension === "jpeg" ? UltraHDRLoader_js.UltraHDRLoader : extension === "webp" ? gainmapJs.GainMapLoader : null;
+  return loader;
+}
+
+const isRef$1 = (obj) => obj.current && obj.current.isScene;
+const resolveScene = (scene) => isRef$1(scene) ? scene.current : scene;
+function setEnvProps(background, scene, defaultScene, texture, sceneProps = {}) {
+  sceneProps = {
+    backgroundBlurriness: 0,
+    backgroundIntensity: 1,
+    backgroundRotation: [0, 0, 0],
+    environmentIntensity: 1,
+    environmentRotation: [0, 0, 0],
+    ...sceneProps
+  };
+  const target = resolveScene(scene || defaultScene);
+  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
+    environmentIntensity: target.environmentIntensity,
+    // @ts-ignore
+    environmentRotation: target.environmentRotation?.clone?.() ?? [0, 0, 0]
+  };
+  if (background !== "only") target.environment = texture;
+  if (background) target.background = texture;
+  fiber.applyProps(target, sceneProps);
+  return () => {
+    if (background !== "only") target.environment = oldenv;
+    if (background) target.background = oldbg;
+    fiber.applyProps(target, oldSceneProps);
+  };
+}
+function EnvironmentMap({ scene, background = false, map, ...config }) {
+  const defaultScene = fiber.useThree((state) => state.scene);
+  React__namespace.useLayoutEffect(() => {
+    if (map) return setEnvProps(background, scene, defaultScene, map, config);
+  });
+  return null;
+}
+function EnvironmentCube({
+  background = false,
+  scene,
+  blur,
+  backgroundBlurriness,
+  backgroundIntensity,
+  backgroundRotation,
+  environmentIntensity,
+  environmentRotation,
+  ...rest
+}) {
+  const texture = useEnvironment(rest);
+  const defaultScene = fiber.useThree((state) => state.scene);
+  React__namespace.useLayoutEffect(() => {
+    return setEnvProps(background, scene, defaultScene, texture, {
+      backgroundBlurriness: blur ?? backgroundBlurriness,
+      backgroundIntensity,
+      backgroundRotation,
+      environmentIntensity,
+      environmentRotation
+    });
+  });
+  React__namespace.useEffect(() => {
+    return () => {
+      texture.dispose();
+    };
+  }, [texture]);
+  return null;
+}
+function EnvironmentPortal({
+  children,
+  near = 0.1,
+  far = 1e3,
+  resolution = 256,
+  frames = 1,
+  map,
+  background = false,
+  blur,
+  backgroundBlurriness,
+  backgroundIntensity,
+  backgroundRotation,
+  environmentIntensity,
+  environmentRotation,
+  scene,
+  files,
+  path,
+  preset = void 0,
+  extensions
+}) {
+  const gl = fiber.useThree((state) => state.gl);
+  const defaultScene = fiber.useThree((state) => state.scene);
+  const camera = React__namespace.useRef(null);
+  const [virtualScene] = React__namespace.useState(() => new webgpu.Scene());
+  const fbo = React__namespace.useMemo(() => {
+    const fbo2 = new webgpu.WebGLCubeRenderTarget(resolution);
+    fbo2.texture.type = webgpu.HalfFloatType;
+    return fbo2;
+  }, [resolution]);
+  React__namespace.useEffect(() => {
+    return () => {
+      fbo.dispose();
+    };
+  }, [fbo]);
+  React__namespace.useLayoutEffect(() => {
+    if (frames === 1) {
+      const autoClear = gl.autoClear;
+      gl.autoClear = true;
+      camera.current.update(gl, virtualScene);
+      gl.autoClear = autoClear;
+    }
+    return setEnvProps(background, scene, defaultScene, fbo.texture, {
+      backgroundBlurriness: blur ?? backgroundBlurriness,
+      backgroundIntensity,
+      backgroundRotation,
+      environmentIntensity,
+      environmentRotation
+    });
+  }, [children, virtualScene, fbo.texture, scene, defaultScene, background, frames, gl]);
+  let count = 1;
+  fiber.useFrame(() => {
+    if (frames === Infinity || count < frames) {
+      const autoClear = gl.autoClear;
+      gl.autoClear = true;
+      camera.current.update(gl, virtualScene);
+      gl.autoClear = autoClear;
+      count++;
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fiber.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      children,
+      /* @__PURE__ */ jsxRuntime.jsx("cubeCamera", { ref: camera, args: [near, far, fbo] }),
+      files || preset ? /* @__PURE__ */ jsxRuntime.jsx(EnvironmentCube, { background: true, files, preset, path, extensions }) : map ? /* @__PURE__ */ jsxRuntime.jsx(EnvironmentMap, { background: true, map, extensions }) : null
+    ] }),
+    virtualScene
+  ) });
+}
+function EnvironmentGround(props) {
+  const textureDefault = useEnvironment(props);
+  const texture = props.map || textureDefault;
+  React__namespace.useMemo(() => fiber.extend({ GroundProjectedEnvImpl: GroundedSkybox_js.GroundedSkybox }), []);
+  React__namespace.useEffect(() => {
+    return () => {
+      textureDefault.dispose();
+    };
+  }, [textureDefault]);
+  const height = props.ground?.height ?? 15;
+  const radius = props.ground?.radius ?? 60;
+  const scale = props.ground?.scale ?? 1e3;
+  const args = React__namespace.useMemo(
+    () => [texture, height, radius],
+    [texture, height, radius]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(EnvironmentMap, { ...props, map: texture }),
+    /* @__PURE__ */ jsxRuntime.jsx("groundProjectedEnvImpl", { args, scale })
+  ] });
+}
+function EnvironmentColor({ color, scene }) {
+  const defaultScene = fiber.useThree((state) => state.scene);
+  React__namespace.useLayoutEffect(() => {
+    if (color === void 0) return;
+    const target = resolveScene(scene || defaultScene);
+    const oldBg = target.background;
+    target.background = new webgpu.Color(color);
+    return () => {
+      target.background = oldBg;
+    };
+  });
+  return null;
+}
+function EnvironmentDualSource(props) {
+  const { backgroundFiles, ...envProps } = props;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(EnvironmentCube, { ...envProps, background: false }),
+    /* @__PURE__ */ jsxRuntime.jsx(EnvironmentCube, { ...props, files: backgroundFiles, background: "only" })
+  ] });
+}
+function Environment(props) {
+  if (props.color && !props.files && !props.preset && !props.map) {
+    return /* @__PURE__ */ jsxRuntime.jsx(EnvironmentColor, { ...props });
+  }
+  if (props.backgroundFiles && props.backgroundFiles !== props.files) {
+    return /* @__PURE__ */ jsxRuntime.jsx(EnvironmentDualSource, { ...props });
+  }
+  return props.ground ? /* @__PURE__ */ jsxRuntime.jsx(EnvironmentGround, { ...props }) : props.map ? /* @__PURE__ */ jsxRuntime.jsx(EnvironmentMap, { ...props }) : props.children ? /* @__PURE__ */ jsxRuntime.jsx(EnvironmentPortal, { ...props }) : /* @__PURE__ */ jsxRuntime.jsx(EnvironmentCube, { ...props });
+}
+
+var __defProp$3 = Object.defineProperty;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$3 = (obj, key, value) => __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
 const act = React__namespace["act"];
 const useIsomorphicLayoutEffect = /* @__PURE__ */ (() => typeof window !== "undefined" && (window.document?.createElement || window.navigator?.product === "ReactNative"))() ? React__namespace.useLayoutEffect : React__namespace.useEffect;
 function useMutableCallback(fn) {
@@ -100,7 +475,7 @@ const ErrorBoundary = /* @__PURE__ */ (() => {
   return _a = class extends React__namespace.Component {
     constructor() {
       super(...arguments);
-      __publicField$2(this, "state", { error: false });
+      __publicField$3(this, "state", { error: false });
     }
     componentDidCatch(err) {
       this.props.set(err);
@@ -108,7 +483,7 @@ const ErrorBoundary = /* @__PURE__ */ (() => {
     render() {
       return this.state.error ? null : this.props.children;
     }
-  }, __publicField$2(_a, "getDerivedStateFromError", () => ({ error: true })), _a;
+  }, __publicField$3(_a, "getDerivedStateFromError", () => ({ error: true })), _a;
 })();
 
 const is = {
@@ -245,7 +620,8 @@ function prepare(target, root, type, props) {
       object,
       eventCount: 0,
       handlers: {},
-      isHidden: false
+      isHidden: false,
+      deferredRefs: []
     };
     if (object) object.__r3f = instance;
   }
@@ -294,7 +670,7 @@ function createOcclusionObserverNode(store, uniform) {
 let occlusionSetupPromise = null;
 function enableOcclusion(store) {
   const state = store.getState();
-  const { internal, renderer, rootScene } = state;
+  const { internal, renderer } = state;
   if (internal.occlusionEnabled || occlusionSetupPromise) return;
   const hasOcclusionSupport = typeof renderer?.isOccluded === "function";
   if (!hasOcclusionSupport) {
@@ -457,6 +833,22 @@ function hasVisibilityHandlers(handlers) {
   return !!(handlers.onFramed || handlers.onOccluded || handlers.onVisible);
 }
 
+const FROM_REF = Symbol.for("@react-three/fiber.fromRef");
+function fromRef(ref) {
+  return { [FROM_REF]: ref };
+}
+function isFromRef(value) {
+  return value !== null && typeof value === "object" && FROM_REF in value;
+}
+
+const ONCE = Symbol.for("@react-three/fiber.once");
+function once(...args) {
+  return { [ONCE]: args.length ? args : true };
+}
+function isOnce(value) {
+  return value !== null && typeof value === "object" && ONCE in value;
+}
+
 const RESERVED_PROPS = [
   "children",
   "key",
@@ -527,7 +919,7 @@ function getMemoizedPrototype(root) {
       ctor = new root.constructor();
       MEMOIZED_PROTOTYPES.set(root.constructor, ctor);
     }
-  } catch (e) {
+  } catch {
   }
   return ctor;
 }
@@ -558,7 +950,7 @@ function applyProps(object, props) {
   const rootState = instance && findInitialRoot(instance).getState();
   const prevHandlers = instance?.eventCount;
   for (const prop in props) {
-    let value = props[prop];
+    const value = props[prop];
     if (RESERVED_PROPS.includes(prop)) continue;
     if (instance && EVENT_REGEX.test(prop)) {
       if (typeof value === "function") instance.handlers[prop] = value;
@@ -573,6 +965,25 @@ function applyProps(object, props) {
       continue;
     }
     if (value === void 0) continue;
+    if (isFromRef(value)) {
+      instance?.deferredRefs?.push({ prop, ref: value[FROM_REF] });
+      continue;
+    }
+    if (isOnce(value)) {
+      if (instance?.appliedOnce?.has(prop)) continue;
+      if (instance) {
+        instance.appliedOnce ?? (instance.appliedOnce = /* @__PURE__ */ new Set());
+        instance.appliedOnce.add(prop);
+      }
+      const { root: targetRoot, key: targetKey } = resolve(object, prop);
+      const args = value[ONCE];
+      if (typeof targetRoot[targetKey] === "function") {
+        targetRoot[targetKey](...args === true ? [] : args);
+      } else if (args !== true && args.length > 0) {
+        targetRoot[targetKey] = args[0];
+      }
+      continue;
+    }
     let { root, key, target } = resolve(object, prop);
     if (target === void 0 && (typeof root !== "object" || root === null)) {
       throw Error(`R3F: Cannot set "${prop}". Ensure it is an object before setting "${key}".`);
@@ -595,7 +1006,7 @@ function applyProps(object, props) {
       else target.set(value);
     } else {
       root[key] = value;
-      if (rootState && !rootState.linear && colorMaps.includes(key) && isTexture(value) && root[key]?.isTexture && // sRGB textures must be RGBA8 since r137 https://github.com/mrdoob/three.js/pull/23129
+      if (rootState && rootState.renderer?.outputColorSpace === webgpu.SRGBColorSpace && colorMaps.includes(key) && isTexture(value) && root[key]?.isTexture && // sRGB textures must be RGBA8 since r137 https://github.com/mrdoob/three.js/pull/23129
       root[key].format === webgpu.RGBAFormat && root[key].type === webgpu.UnsignedByteType) {
         root[key].colorSpace = rootState.textureColorSpace;
       }
@@ -710,13 +1121,14 @@ function createEvents(store) {
     for (const hit of hits) {
       let eventObject = hit.object;
       while (eventObject) {
-        if (eventObject.__r3f?.eventCount)
+        if (eventObject.__r3f?.eventCount) {
           intersections.push({ ...hit, eventObject });
+        }
         eventObject = eventObject.parent;
       }
     }
     if ("pointerId" in event && state.internal.capturedMap.has(event.pointerId)) {
-      for (let captureData of state.internal.capturedMap.get(event.pointerId).values()) {
+      for (const captureData of state.internal.capturedMap.get(event.pointerId).values()) {
         if (!duplicates.has(makeId(captureData.intersection))) intersections.push(captureData.intersection);
       }
     }
@@ -746,12 +1158,12 @@ function createEvents(store) {
               releaseInternalPointerCapture(internal.capturedMap, hit.eventObject, captures, id);
             }
           };
-          let extractEventProps = {};
-          for (let prop in event) {
-            let property = event[prop];
+          const extractEventProps = {};
+          for (const prop in event) {
+            const property = event[prop];
             if (typeof property !== "function") extractEventProps[prop] = property;
           }
-          let raycastEvent = {
+          const raycastEvent = {
             ...hit,
             ...extractEventProps,
             pointer,
@@ -951,7 +1363,7 @@ function createPointerEvents(store) {
   return {
     priority: 1,
     enabled: true,
-    compute(event, state, previous) {
+    compute(event, state) {
       state.pointer.set(event.offsetX / state.size.width * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
       state.raycaster.setFromCamera(state.pointer, state.camera);
     },
@@ -1010,331 +1422,57 @@ function notifyDepreciated({ heading, body, link }) {
   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 R3F_CONTEXT = Symbol.for("@react-three/fiber.context");
-const context = globalThis[R3F_CONTEXT] ?? (globalThis[R3F_CONTEXT] = React__namespace.createContext(null));
-const createStore = (invalidate, advance) => {
-  const rootStore = traditional.createWithEqualityFn((set, get) => {
-    const position = new webgpu.Vector3();
-    const defaultTarget = new webgpu.Vector3();
-    const tempTarget = new webgpu.Vector3();
-    function getCurrentViewport(camera = get().camera, target = defaultTarget, size = get().size) {
-      const { width, height, top, left } = size;
-      const aspect = width / height;
-      if (target.isVector3) tempTarget.copy(target);
-      else tempTarget.set(...target);
-      const distance = camera.getWorldPosition(position).distanceTo(tempTarget);
-      if (isOrthographicCamera(camera)) {
-        return { width: width / camera.zoom, height: height / camera.zoom, top, left, factor: 1, distance, aspect };
-      } else {
-        const fov = camera.fov * Math.PI / 180;
-        const h = 2 * Math.tan(fov / 2) * distance;
-        const w = h * (width / height);
-        return { width: w, height: h, top, left, factor: width / w, distance, aspect };
-      }
-    }
-    let performanceTimeout = void 0;
-    const setPerformanceCurrent = (current) => set((state2) => ({ performance: { ...state2.performance, current } }));
-    const pointer = new webgpu.Vector2();
-    const rootState = {
-      set,
-      get,
-      // Mock objects that have to be configured
-      gl: null,
-      renderer: null,
-      camera: null,
-      frustum: new webgpu.Frustum(),
-      autoUpdateFrustum: true,
-      raycaster: null,
-      events: { priority: 1, enabled: true, connected: 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()),
-      legacy: false,
-      linear: false,
-      flat: false,
-      textureColorSpace: "srgb",
-      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 = 0, left = 0) => {
-        const camera = get().camera;
-        const size = { width, height, top, left };
-        set((state2) => ({ size, viewport: { ...state2.viewport, ...getCurrentViewport(camera, defaultTarget, size) } }));
-      },
-      setDpr: (dpr) => set((state2) => {
-        const resolved = calculateDpr(dpr);
-        return { viewport: { ...state2.viewport, dpr: resolved, initialDpr: state2.viewport.initialDpr || resolved } };
-      }),
-      setFrameloop: (frameloop = "always") => {
-        set(() => ({ frameloop }));
-      },
-      setError: (error) => set(() => ({ error })),
-      error: null,
-      //* TSL State (managed via hooks: useUniforms, useNodes, useTextures, usePostProcessing) ==============================
-      uniforms: {},
-      nodes: {},
-      textures: /* @__PURE__ */ new Map(),
-      postProcessing: null,
-      passes: {},
-      previousRoot: void 0,
-      internal: {
-        // Events
-        interaction: [],
-        hovered: /* @__PURE__ */ new Map(),
-        subscribers: [],
-        initialClick: [0, 0],
-        initialHits: [],
-        capturedMap: /* @__PURE__ */ new Map(),
-        lastEvent: React__namespace.createRef(),
-        // Visibility tracking (onFramed, onOccluded, onVisible)
-        visibilityRegistry: /* @__PURE__ */ new Map(),
-        // Occlusion system (WebGPU only)
-        occlusionEnabled: false,
-        occlusionObserver: null,
-        occlusionCache: /* @__PURE__ */ new Map(),
-        helperGroup: null,
-        // Updates
-        active: false,
-        frames: 0,
-        priority: 0,
-        subscribe: (ref, priority, store) => {
-          const internal = get().internal;
-          internal.priority = internal.priority + (priority > 0 ? 1 : 0);
-          internal.subscribers.push({ ref, priority, store });
-          internal.subscribers = internal.subscribers.sort((a, b) => a.priority - b.priority);
-          return () => {
-            const internal2 = get().internal;
-            if (internal2?.subscribers) {
-              internal2.priority = internal2.priority - (priority > 0 ? 1 : 0);
-              internal2.subscribers = internal2.subscribers.filter((s) => s.ref !== ref);
-            }
-          };
-        },
-        // Renderer Storage (single source of truth)
-        actualRenderer: null,
-        // Scheduler for useFrameNext (initialized in renderer.tsx)
-        scheduler: null
-      }
-    };
-    return rootState;
-  });
-  const state = rootStore.getState();
-  Object.defineProperty(state, "gl", {
-    get() {
-      const currentState = rootStore.getState();
-      if (!currentState.isLegacy && currentState.internal.actualRenderer) {
-        const stack = new Error().stack || "";
-        const isInternalAccess = stack.includes("zustand") || stack.includes("setState") || stack.includes("Object.assign") || stack.includes("react-three-fiber/packages/fiber/src/core");
-        if (!isInternalAccess) {
-          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;
-    if (size.width !== oldSize.width || size.height !== oldSize.height || viewport.dpr !== oldDpr) {
-      oldSize = size;
-      oldDpr = viewport.dpr;
-      updateCamera(camera, size);
-      if (viewport.dpr > 0) actualRenderer.setPixelRatio(viewport.dpr);
-      const updateStyle = typeof HTMLCanvasElement !== "undefined" && actualRenderer.domElement instanceof HTMLCanvasElement;
-      actualRenderer.setSize(size.width, size.height, updateStyle);
-    }
-    if (camera !== oldCamera) {
-      oldCamera = camera;
-      const { rootScene } = rootStore.getState();
-      if (camera && rootScene && !camera.parent) {
-        rootScene.add(camera);
-      }
-      set((state2) => ({ viewport: { ...state2.viewport, ...state2.viewport.getCurrentViewport(camera) } }));
-      const currentState = rootStore.getState();
-      if (currentState.autoUpdateFrustum && camera) {
-        updateFrustum(camera, currentState.frustum);
-      }
-    }
-  });
-  rootStore.subscribe((state2) => invalidate(state2));
-  return rootStore;
-};
-
-const memoizedLoaders = /* @__PURE__ */ new WeakMap();
-const isConstructor$1 = (value) => typeof value === "function" && value?.prototype?.constructor === value;
-function getLoader(Proto) {
-  if (isConstructor$1(Proto)) {
-    let loader = memoizedLoaders.get(Proto);
-    if (!loader) {
-      loader = new Proto();
-      memoizedLoaders.set(Proto, loader);
-    }
-    return loader;
-  }
-  return Proto;
-}
-function loadingFn(extensions, onProgress) {
-  return function(Proto, input) {
-    const loader = getLoader(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}`))
-      )
-    );
+    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 useLoader(loader, input, extensions, onProgress) {
-  const keys = Array.isArray(input) ? input : [input];
-  const fn = loadingFn(extensions, onProgress);
-  const results = keys.map((key) => suspendReact.suspend(fn, [loader, key], { equal: is.equ }));
-  return Array.isArray(input) ? results : results[0];
+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;");
+  }
 }
-useLoader.preload = function(loader, input, extensions, onProgress) {
-  const keys = Array.isArray(input) ? input : [input];
-  keys.forEach((key) => suspendReact.preload(loadingFn(extensions, onProgress), [loader, key]));
-};
-useLoader.clear = function(loader, input) {
-  const keys = Array.isArray(input) ? input : [input];
-  keys.forEach((key) => suspendReact.clear([loader, key]));
-};
-useLoader.loader = getLoader;
 
-var __defProp$1 = Object.defineProperty;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$1 = (obj, key, value) => __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$2 = Object.defineProperty;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$2 = (obj, key, value) => __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
 const DEFAULT_PHASES = ["start", "input", "physics", "update", "render", "finish"];
 class PhaseGraph {
   constructor() {
     /** Ordered list of phase nodes */
-    __publicField$1(this, "phases", []);
+    __publicField$2(this, "phases", []);
     /** Quick lookup by name */
-    __publicField$1(this, "phaseMap", /* @__PURE__ */ new Map());
+    __publicField$2(this, "phaseMap", /* @__PURE__ */ new Map());
     /** Cached ordered names (invalidated on changes) */
-    __publicField$1(this, "orderedNamesCache", null);
+    __publicField$2(this, "orderedNamesCache", null);
     this.initializeDefaultPhases();
   }
   //* Initialization --------------------------------
@@ -1361,8 +1499,9 @@ class PhaseGraph {
     const node = { name, isAutoGenerated: false };
     let insertIndex = this.phases.length;
     const targetIndex = this.getPhaseIndex(before ?? after);
-    if (targetIndex !== -1) insertIndex = before ? targetIndex : targetIndex + 1;
-    else {
+    if (targetIndex !== -1) {
+      insertIndex = before ? targetIndex : targetIndex + 1;
+    } else {
       const constraintType = before ? "before" : "after";
       console.warn(`[useFrame] Phase "${before ?? after}" not found for '${constraintType}' constraint`);
     }
@@ -1590,9 +1729,9 @@ function resetJobTiming(job) {
   job.lastRun = void 0;
 }
 
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$1 = Object.defineProperty;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$1 = (obj, key, value) => __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
 const hmrData = (() => {
   if (typeof process !== "undefined" && process.env.NODE_ENV === "test") return void 0;
   if (typeof import_meta_hot !== "undefined") return import_meta_hot;
@@ -1606,9 +1745,9 @@ const _Scheduler = class _Scheduler {
   //* Constructor ================================
   constructor() {
     //* Critical State ================================
-    __publicField(this, "roots", /* @__PURE__ */ new Map());
-    __publicField(this, "phaseGraph");
-    __publicField(this, "loopState", {
+    __publicField$1(this, "roots", /* @__PURE__ */ new Map());
+    __publicField$1(this, "phaseGraph");
+    __publicField$1(this, "loopState", {
       running: false,
       rafHandle: null,
       lastTime: null,
@@ -1617,21 +1756,21 @@ const _Scheduler = class _Scheduler {
       elapsedTime: 0,
       createdAt: performance.now()
     });
-    __publicField(this, "stoppedTime", 0);
+    __publicField$1(this, "stoppedTime", 0);
     //* Private State ================================
-    __publicField(this, "nextRootIndex", 0);
-    __publicField(this, "globalBeforeJobs", /* @__PURE__ */ new Map());
-    __publicField(this, "globalAfterJobs", /* @__PURE__ */ new Map());
-    __publicField(this, "nextGlobalIndex", 0);
-    __publicField(this, "idleCallbacks", /* @__PURE__ */ new Set());
-    __publicField(this, "nextJobIndex", 0);
-    __publicField(this, "jobStateListeners", /* @__PURE__ */ new Map());
-    __publicField(this, "pendingFrames", 0);
-    __publicField(this, "_frameloop", "always");
+    __publicField$1(this, "nextRootIndex", 0);
+    __publicField$1(this, "globalBeforeJobs", /* @__PURE__ */ new Map());
+    __publicField$1(this, "globalAfterJobs", /* @__PURE__ */ new Map());
+    __publicField$1(this, "nextGlobalIndex", 0);
+    __publicField$1(this, "idleCallbacks", /* @__PURE__ */ new Set());
+    __publicField$1(this, "nextJobIndex", 0);
+    __publicField$1(this, "jobStateListeners", /* @__PURE__ */ new Map());
+    __publicField$1(this, "pendingFrames", 0);
+    __publicField$1(this, "_frameloop", "always");
     //* Independent Mode & Error Handling State ================================
-    __publicField(this, "_independent", false);
-    __publicField(this, "errorHandler", null);
-    __publicField(this, "rootReadyCallbacks", /* @__PURE__ */ new Set());
+    __publicField$1(this, "_independent", false);
+    __publicField$1(this, "errorHandler", null);
+    __publicField$1(this, "rootReadyCallbacks", /* @__PURE__ */ new Set());
     //* Core Loop Execution Methods ================================
     /**
      * Main RAF loop callback.
@@ -1640,7 +1779,7 @@ const _Scheduler = class _Scheduler {
      * @returns {void}
      * @private
      */
-    __publicField(this, "loop", (timestamp) => {
+    __publicField$1(this, "loop", (timestamp) => {
       if (!this.loopState.running) return;
       this.executeFrame(timestamp);
       if (this._frameloop === "demand") {
@@ -2343,16 +2482,329 @@ const _Scheduler = class _Scheduler {
     return /* @__PURE__ */ new Set([value]);
   }
 };
-//* Static State & Methods (Singleton Usage) ================================
-//* Cross-Bundle Singleton Key ==============================
-// Use Symbol.for() to ensure scheduler is shared across bundle boundaries
-// This prevents issues when mixing imports from @react-three/fiber and @react-three/fiber/webgpu
-__publicField(_Scheduler, "INSTANCE_KEY", Symbol.for("@react-three/fiber.scheduler"));
-let Scheduler = _Scheduler;
-const getScheduler = () => Scheduler.get();
-if (hmrData) {
-  hmrData.accept?.();
+//* Static State & Methods (Singleton Usage) ================================
+//* Cross-Bundle Singleton Key ==============================
+// Use Symbol.for() to ensure scheduler is shared across bundle boundaries
+// This prevents issues when mixing imports from @react-three/fiber and @react-three/fiber/webgpu
+__publicField$1(_Scheduler, "INSTANCE_KEY", Symbol.for("@react-three/fiber.scheduler"));
+let Scheduler = _Scheduler;
+const getScheduler = () => Scheduler.get();
+if (hmrData) {
+  hmrData.accept?.();
+}
+
+const R3F_CONTEXT = Symbol.for("@react-three/fiber.context");
+const context = globalThis[R3F_CONTEXT] ?? (globalThis[R3F_CONTEXT] = React__namespace.createContext(null));
+const createStore = (invalidate, advance) => {
+  const rootStore = traditional.createWithEqualityFn((set, get) => {
+    const position = new webgpu.Vector3();
+    const defaultTarget = new webgpu.Vector3();
+    const tempTarget = new webgpu.Vector3();
+    function getCurrentViewport(camera = get().camera, target = defaultTarget, size = get().size) {
+      const { width, height, top, left } = size;
+      const aspect = width / height;
+      if (target.isVector3) tempTarget.copy(target);
+      else tempTarget.set(...target);
+      const distance = camera.getWorldPosition(position).distanceTo(tempTarget);
+      if (isOrthographicCamera(camera)) {
+        return { width: width / camera.zoom, height: height / camera.zoom, top, left, factor: 1, distance, aspect };
+      } else {
+        const fov = camera.fov * Math.PI / 180;
+        const h = 2 * Math.tan(fov / 2) * distance;
+        const w = h * (width / height);
+        return { width: w, height: h, top, left, factor: width / w, distance, aspect };
+      }
+    }
+    let performanceTimeout = void 0;
+    const setPerformanceCurrent = (current) => set((state2) => ({ performance: { ...state2.performance, current } }));
+    const pointer = new webgpu.Vector2();
+    const rootState = {
+      set,
+      get,
+      // Mock objects that have to be configured
+      // primaryStore is set after store creation (self-reference for primary, primary's store for secondary)
+      primaryStore: null,
+      gl: null,
+      renderer: null,
+      camera: null,
+      frustum: new webgpu.Frustum(),
+      autoUpdateFrustum: true,
+      raycaster: null,
+      events: { priority: 1, enabled: true, connected: false },
+      scene: null,
+      rootScene: null,
+      xr: null,
+      inspector: null,
+      invalidate: (frames = 1, stackFrames = false) => invalidate(get(), frames, stackFrames),
+      advance: (timestamp, runGlobalEffects) => advance(timestamp, runGlobalEffects, get()),
+      textureColorSpace: webgpu.SRGBColorSpace,
+      isLegacy: false,
+      webGPUSupported: false,
+      isNative: false,
+      controls: null,
+      pointer,
+      mouse: pointer,
+      frameloop: "always",
+      onPointerMissed: void 0,
+      onDragOverMissed: void 0,
+      onDropMissed: void 0,
+      performance: {
+        current: 1,
+        min: 0.5,
+        max: 1,
+        debounce: 200,
+        regress: () => {
+          const state2 = get();
+          if (performanceTimeout) clearTimeout(performanceTimeout);
+          if (state2.performance.current !== state2.performance.min) setPerformanceCurrent(state2.performance.min);
+          performanceTimeout = setTimeout(
+            () => setPerformanceCurrent(get().performance.max),
+            state2.performance.debounce
+          );
+        }
+      },
+      size: { width: 0, height: 0, top: 0, left: 0 },
+      viewport: {
+        initialDpr: 0,
+        dpr: 0,
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0,
+        aspect: 0,
+        distance: 0,
+        factor: 0,
+        getCurrentViewport
+      },
+      setEvents: (events) => set((state2) => ({ ...state2, events: { ...state2.events, ...events } })),
+      setSize: (width, height, top, left) => {
+        const state2 = get();
+        if (width === void 0) {
+          set({ _sizeImperative: false });
+          if (state2._sizeProps) {
+            const { width: propW, height: propH } = state2._sizeProps;
+            if (propW !== void 0 || propH !== void 0) {
+              const currentSize = state2.size;
+              const newSize = {
+                width: propW ?? currentSize.width,
+                height: propH ?? currentSize.height,
+                top: currentSize.top,
+                left: currentSize.left
+              };
+              set((s) => ({
+                size: newSize,
+                viewport: { ...s.viewport, ...getCurrentViewport(state2.camera, defaultTarget, newSize) }
+              }));
+              getScheduler().invalidate();
+            }
+          }
+          return;
+        }
+        const w = width;
+        const h = height ?? width;
+        const t = top ?? state2.size.top;
+        const l = left ?? state2.size.left;
+        const size = { width: w, height: h, top: t, left: l };
+        set((s) => ({
+          size,
+          viewport: { ...s.viewport, ...getCurrentViewport(state2.camera, defaultTarget, size) },
+          _sizeImperative: true
+        }));
+        getScheduler().invalidate();
+      },
+      setDpr: (dpr) => set((state2) => {
+        const resolved = calculateDpr(dpr);
+        return { viewport: { ...state2.viewport, dpr: resolved, initialDpr: state2.viewport.initialDpr || resolved } };
+      }),
+      setFrameloop: (frameloop = "always") => {
+        set(() => ({ frameloop }));
+      },
+      setError: (error) => set(() => ({ error })),
+      error: null,
+      //* TSL State (managed via hooks: useUniforms, useNodes, useTextures, usePostProcessing) ==============================
+      uniforms: {},
+      nodes: {},
+      textures: /* @__PURE__ */ new Map(),
+      postProcessing: null,
+      passes: {},
+      _hmrVersion: 0,
+      _sizeImperative: false,
+      _sizeProps: null,
+      previousRoot: void 0,
+      internal: {
+        // Events
+        interaction: [],
+        hovered: /* @__PURE__ */ new Map(),
+        subscribers: [],
+        initialClick: [0, 0],
+        initialHits: [],
+        capturedMap: /* @__PURE__ */ new Map(),
+        lastEvent: React__namespace.createRef(),
+        // Visibility tracking (onFramed, onOccluded, onVisible)
+        visibilityRegistry: /* @__PURE__ */ new Map(),
+        // Occlusion system (WebGPU only)
+        occlusionEnabled: false,
+        occlusionObserver: null,
+        occlusionCache: /* @__PURE__ */ new Map(),
+        helperGroup: null,
+        // Updates
+        active: false,
+        frames: 0,
+        priority: 0,
+        subscribe: (ref, priority, store) => {
+          const internal = get().internal;
+          internal.priority = internal.priority + (priority > 0 ? 1 : 0);
+          internal.subscribers.push({ ref, priority, store });
+          internal.subscribers = internal.subscribers.sort((a, b) => a.priority - b.priority);
+          return () => {
+            const internal2 = get().internal;
+            if (internal2?.subscribers) {
+              internal2.priority = internal2.priority - (priority > 0 ? 1 : 0);
+              internal2.subscribers = internal2.subscribers.filter((s) => s.ref !== ref);
+            }
+          };
+        },
+        // Renderer Storage (single source of truth)
+        actualRenderer: null,
+        // Scheduler for useFrameNext (initialized in renderer.tsx)
+        scheduler: null
+      }
+    };
+    return rootState;
+  });
+  const state = rootStore.getState();
+  Object.defineProperty(state, "gl", {
+    get() {
+      const currentState = rootStore.getState();
+      if (!currentState.isLegacy && currentState.internal.actualRenderer) {
+        const stack = new Error().stack || "";
+        const isInternalAccess = stack.includes("zustand") || stack.includes("setState") || stack.includes("Object.assign") || stack.includes("react-three-fiber/packages/fiber/src/core");
+        if (!isInternalAccess) {
+          const cleanedStack = stack.split("\n").slice(2).join("\n") || "Stack trace unavailable";
+          notifyDepreciated({
+            heading: "Accessing state.gl in WebGPU mode",
+            body: "Please use state.renderer instead. state.gl is deprecated and will be removed in future versions.\n\nFor backwards compatibility, state.gl currently maps to state.renderer, but this may cause issues with libraries expecting WebGLRenderer.\n\nAccessed from:\n" + cleanedStack
+          });
+        }
+      }
+      return currentState.internal.actualRenderer;
+    },
+    set(value) {
+      rootStore.getState().internal.actualRenderer = value;
+    },
+    enumerable: true,
+    configurable: true
+  });
+  Object.defineProperty(state, "renderer", {
+    get() {
+      return rootStore.getState().internal.actualRenderer;
+    },
+    set(value) {
+      rootStore.getState().internal.actualRenderer = value;
+    },
+    enumerable: true,
+    configurable: true
+  });
+  let oldScene = state.scene;
+  rootStore.subscribe(() => {
+    const currentState = rootStore.getState();
+    const { scene, rootScene, set } = currentState;
+    if (scene !== oldScene) {
+      oldScene = scene;
+      if (scene?.isScene && scene !== rootScene) {
+        set({ rootScene: scene });
+      }
+    }
+  });
+  let oldSize = state.size;
+  let oldDpr = state.viewport.dpr;
+  let oldCamera = state.camera;
+  rootStore.subscribe(() => {
+    const { camera, size, viewport, set, internal } = rootStore.getState();
+    const actualRenderer = internal.actualRenderer;
+    const canvasTarget = internal.canvasTarget;
+    if (size.width !== oldSize.width || size.height !== oldSize.height || viewport.dpr !== oldDpr) {
+      oldSize = size;
+      oldDpr = viewport.dpr;
+      updateCamera(camera, size);
+      if (canvasTarget) {
+        if (viewport.dpr > 0) canvasTarget.setPixelRatio(viewport.dpr);
+        const updateStyle = typeof HTMLCanvasElement !== "undefined" && canvasTarget.domElement instanceof HTMLCanvasElement;
+        canvasTarget.setSize(size.width, size.height, updateStyle);
+      } else {
+        if (viewport.dpr > 0) actualRenderer.setPixelRatio(viewport.dpr);
+        const updateStyle = typeof HTMLCanvasElement !== "undefined" && actualRenderer.domElement instanceof HTMLCanvasElement;
+        actualRenderer.setSize(size.width, size.height, updateStyle);
+      }
+    }
+    if (camera !== oldCamera) {
+      oldCamera = camera;
+      const { rootScene } = rootStore.getState();
+      if (camera && rootScene && !camera.parent) {
+        rootScene.add(camera);
+      }
+      set((state2) => ({ viewport: { ...state2.viewport, ...state2.viewport.getCurrentViewport(camera) } }));
+      const currentState = rootStore.getState();
+      if (currentState.autoUpdateFrustum && camera) {
+        updateFrustum(camera, currentState.frustum);
+      }
+    }
+  });
+  rootStore.subscribe((state2) => invalidate(state2));
+  return rootStore;
+};
+
+const memoizedLoaders = /* @__PURE__ */ new WeakMap();
+const isConstructor$1 = (value) => typeof value === "function" && value?.prototype?.constructor === value;
+function getLoader(Proto) {
+  if (isConstructor$1(Proto)) {
+    let loader = memoizedLoaders.get(Proto);
+    if (!loader) {
+      loader = new Proto();
+      memoizedLoaders.set(Proto, loader);
+    }
+    return loader;
+  }
+  return Proto;
+}
+function loadingFn(extensions, onProgress) {
+  return function(Proto, input) {
+    const loader = getLoader(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) {
+  const keys = Array.isArray(input) ? input : [input];
+  const fn = loadingFn(extensions, onProgress);
+  const results = keys.map((key) => suspendReact.suspend(fn, [loader, key], { equal: is.equ }));
+  return Array.isArray(input) ? results : results[0];
 }
+useLoader.preload = function(loader, input, extensions, onProgress) {
+  const keys = Array.isArray(input) ? input : [input];
+  keys.forEach((key) => suspendReact.preload(loadingFn(extensions, onProgress), [loader, key]));
+};
+useLoader.clear = function(loader, input) {
+  const keys = Array.isArray(input) ? input : [input];
+  keys.forEach((key) => suspendReact.clear([loader, key]));
+};
+useLoader.loader = getLoader;
 
 function useFrame(callback, priorityOrOptions) {
   const store = React__namespace.useContext(context);
@@ -2533,6 +2985,9 @@ function useTexture(input, optionsOrOnLoad) {
   const textureCache = useThree((state) => state.textures);
   const options = typeof optionsOrOnLoad === "function" ? { onLoad: optionsOrOnLoad } : optionsOrOnLoad ?? {};
   const { onLoad, cache = false } = options;
+  const onLoadRef = React.useRef(onLoad);
+  onLoadRef.current = onLoad;
+  const onLoadCalledForRef = React.useRef(null);
   const urls = React.useMemo(() => getUrls(input), [input]);
   const cachedResult = React.useMemo(() => {
     if (!cache) return null;
@@ -2543,9 +2998,13 @@ function useTexture(input, optionsOrOnLoad) {
     webgpu.TextureLoader,
     IsObject(input) ? Object.values(input) : input
   );
+  const inputKey = urls.join("\0");
   React.useLayoutEffect(() => {
-    if (!cachedResult) onLoad?.(loadedTextures);
-  }, [onLoad, cachedResult, loadedTextures]);
+    if (cachedResult) return;
+    if (onLoadCalledForRef.current === inputKey) return;
+    onLoadCalledForRef.current = inputKey;
+    onLoadRef.current?.(loadedTextures);
+  }, [cachedResult, loadedTextures, inputKey]);
   React.useEffect(() => {
     if (cachedResult) return;
     if ("initTexture" in renderer) {
@@ -2712,14 +3171,31 @@ function useTextures() {
   }, [store]);
 }
 
-function useRenderTarget(width, height, options) {
+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 React.useMemo(() => {
     const w = width ?? size.width;
     const h = height ?? size.height;
-    return new webgpu.RenderTarget(w, h, options);
-  }, [width, height, size.width, size.height, options, isLegacy]);
+    return new webgpu.RenderTarget(w, h, opts);
+  }, [width, height, size.width, size.height, opts, isLegacy]);
 }
 
 function useStore() {
@@ -2769,28 +3245,18 @@ function addTail(callback) {
 function invalidate(state, frames = 1, stackFrames = false) {
   getScheduler().invalidate(frames, stackFrames);
 }
-function advance(timestamp, runGlobalEffects = true, state, frame) {
+function advance(timestamp) {
   getScheduler().step(timestamp);
 }
 
-const version = "10.0.0-alpha.1";
+const version = "10.0.0-alpha.2";
 const packageData = {
 	version: version};
 
 function Xb(Tt) {
   return Tt && Tt.__esModule && Object.prototype.hasOwnProperty.call(Tt, "default") ? Tt.default : Tt;
 }
-var Rm = { exports: {} }, Og = { exports: {} };
-/**
-* @license React
-* react-reconciler.production.js
-*
-* Copyright (c) Meta Platforms, Inc. and affiliates.
-*
-* This source code is licensed under the MIT license found in the
-* LICENSE file in the root directory of this source tree.
-*/
-var _b;
+var Rm = { exports: {} }, Og = { exports: {} }, _b;
 function Kb() {
   return _b || (_b = 1, (function(Tt) {
     Tt.exports = function(m) {
@@ -3862,7 +4328,6 @@ Error generating stack: ` + l.message + `
             if (J === cl || J === jc) throw J;
             var Ge = Yn(29, J, null, P.mode);
             return Ge.lanes = H, Ge.return = P, Ge;
-          } finally {
           }
         };
       }
@@ -4516,7 +4981,6 @@ Error generating stack: ` + l.message + `
             var h = r.lastRenderedState, y = d(h, a);
             if (c.hasEagerState = true, c.eagerState = y, jn(y, h)) return go(t, r, c, 0), Ne === null && Bn(), false;
           } catch {
-          } finally {
           }
           if (a = yo(t, r, c, l), a !== null) return nt(a, t, l), ns(a, r, l), true;
         }
@@ -6937,10 +7401,7 @@ Error generating stack: ` + l.message + `
       function vr(t, r) {
         Sf(t, r), (t = t.alternate) && Sf(t, r);
       }
-      var ie = {}, Fm = React__default, tt = Tb__default, Lt = Object.assign, hc = Symbol.for("react.element"), zs = Symbol.for("react.transitional.element"), sa = Symbol.for("react.portal"), $a = Symbol.for("react.fragment"), kf = Symbol.for("react.strict_mode"), Cs = Symbol.for("react.profiler"), mc = Symbol.for("react.consumer"), Io = Symbol.for("react.context"), Zi = Symbol.for("react.forward_ref"), Va = Symbol.for("react.suspense"), Te = Symbol.for("react.suspense_list"), wf = Symbol.for("react.memo"), ua = Symbol.for("react.lazy");
-      var gc = Symbol.for("react.activity");
-      var $r = Symbol.for("react.memo_cache_sentinel");
-      var Pf = Symbol.iterator, xf = Symbol.for("react.client.reference"), ca = Array.isArray, M = Fm.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Yp = m.rendererVersion, zf = m.rendererPackageName, Cf = m.extraDevToolsConfig, Ts = m.getPublicInstance, Hm = m.getRootHostContext, Xp = m.getChildHostContext, Am = m.prepareForCommit, _s = m.resetAfterCommit, Vr = m.createInstance;
+      var ie = {}, Fm = React__default, tt = Tb__default, Lt = Object.assign, hc = Symbol.for("react.element"), zs = Symbol.for("react.transitional.element"), sa = Symbol.for("react.portal"), $a = Symbol.for("react.fragment"), kf = Symbol.for("react.strict_mode"), Cs = Symbol.for("react.profiler"), mc = Symbol.for("react.consumer"), Io = Symbol.for("react.context"), Zi = Symbol.for("react.forward_ref"), Va = Symbol.for("react.suspense"), Te = Symbol.for("react.suspense_list"), wf = Symbol.for("react.memo"), ua = Symbol.for("react.lazy"), gc = Symbol.for("react.activity"), $r = Symbol.for("react.memo_cache_sentinel"), Pf = Symbol.iterator, xf = Symbol.for("react.client.reference"), ca = Array.isArray, M = Fm.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Yp = m.rendererVersion, zf = m.rendererPackageName, Cf = m.extraDevToolsConfig, Ts = m.getPublicInstance, Hm = m.getRootHostContext, Xp = m.getChildHostContext, Am = m.prepareForCommit, _s = m.resetAfterCommit, Vr = m.createInstance;
       m.cloneMutableInstance;
       var yc = m.appendInitialChild, Kp = m.finalizeInitialChildren, Rs = m.shouldSetTextContent, bc = m.createTextInstance;
       m.cloneMutableTextInstance;
@@ -7309,17 +7770,7 @@ No matching component was found for:
     }, Tt.exports.default = Tt.exports, Object.defineProperty(Tt.exports, "__esModule", { value: true });
   })(Og)), Og.exports;
 }
-var Mg = { exports: {} };
-/**
-* @license React
-* react-reconciler.development.js
-*
-* Copyright (c) Meta Platforms, Inc. and affiliates.
-*
-* This source code is licensed under the MIT license found in the
-* LICENSE file in the root directory of this source tree.
-*/
-var Rb;
+var Mg = { exports: {} }, Rb;
 function e0() {
   return Rb || (Rb = 1, (function(Tt) {
     process.env.NODE_ENV !== "production" && (Tt.exports = function(m) {
@@ -13086,10 +13537,7 @@ Check the render method of %s.`, G(di) || "Unknown")), i = zo(n), i.payload = {
       function Ic() {
         return di;
       }
-      var le = {}, qm = React__default, St = Tb__default, ze = Object.assign, Uh = Symbol.for("react.element"), Ho = Symbol.for("react.transitional.element"), Ao = Symbol.for("react.portal"), ol = Symbol.for("react.fragment"), Lc = Symbol.for("react.strict_mode"), Uf = Symbol.for("react.profiler"), ei = Symbol.for("react.consumer"), on = Symbol.for("react.context"), jn = Symbol.for("react.forward_ref"), Nc = Symbol.for("react.suspense"), Bf = Symbol.for("react.suspense_list"), al = Symbol.for("react.memo"), kt = Symbol.for("react.lazy");
-      var Ds = Symbol.for("react.activity");
-      var Bh = Symbol.for("react.memo_cache_sentinel");
-      var ni = Symbol.iterator, il = Symbol.for("react.client.reference"), fn = Array.isArray, x = qm.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Jt = m.rendererVersion, Zt = m.rendererPackageName, jo = m.extraDevToolsConfig, ot = m.getPublicInstance, Zr = m.getRootHostContext, Dn = m.getChildHostContext, Ws = m.prepareForCommit, pa = m.resetAfterCommit, Fc = m.createInstance;
+      var le = {}, qm = React__default, St = Tb__default, ze = Object.assign, Uh = Symbol.for("react.element"), Ho = Symbol.for("react.transitional.element"), Ao = Symbol.for("react.portal"), ol = Symbol.for("react.fragment"), Lc = Symbol.for("react.strict_mode"), Uf = Symbol.for("react.profiler"), ei = Symbol.for("react.consumer"), on = Symbol.for("react.context"), jn = Symbol.for("react.forward_ref"), Nc = Symbol.for("react.suspense"), Bf = Symbol.for("react.suspense_list"), al = Symbol.for("react.memo"), kt = Symbol.for("react.lazy"), Ds = Symbol.for("react.activity"), Bh = Symbol.for("react.memo_cache_sentinel"), ni = Symbol.iterator, il = Symbol.for("react.client.reference"), fn = Array.isArray, x = qm.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Jt = m.rendererVersion, Zt = m.rendererPackageName, jo = m.extraDevToolsConfig, ot = m.getPublicInstance, Zr = m.getRootHostContext, Dn = m.getChildHostContext, Ws = m.prepareForCommit, pa = m.resetAfterCommit, Fc = m.createInstance;
       m.cloneMutableInstance;
       var bn = m.appendInitialChild, Ue = m.finalizeInitialChildren, ue = m.shouldSetTextContent, Do = m.createTextInstance;
       m.cloneMutableTextInstance;
@@ -14057,15 +14505,6 @@ function n0() {
 var t0 = n0();
 const r0 = Xb(t0);
 
-/**
- * @license React
- * react-reconciler-constants.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
 const t = 1, o = 8, r = 32, e = 2;
 
 function createReconciler(config) {
@@ -14092,10 +14531,11 @@ function extend(objects) {
 function validateInstance(type, props) {
   const name = toPascalCase(type);
   const target = catalogue[name];
-  if (type !== "primitive" && !target)
+  if (type !== "primitive" && !target) {
     throw new Error(
       `R3F: ${name} is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively`
     );
+  }
   if (type === "primitive" && !props.object) throw new Error(`R3F: Primitives without 'object' are invalid!`);
   if (props.args !== void 0 && !Array.isArray(props.args)) throw new Error("R3F: The args prop must be an array!");
 }
@@ -14259,6 +14699,7 @@ function swapInstances() {
       instance.object = instance.props.object ?? new target(...instance.props.args ?? []);
       instance.object.__r3f = instance;
       setFiberRef(fiber, instance.object);
+      delete instance.appliedOnce;
       applyProps(instance.object, instance.props);
       if (instance.props.attach) {
         attach(parent, instance);
@@ -14332,8 +14773,22 @@ const reconciler = /* @__PURE__ */ createReconciler({
     const isTailSibling = fiber.sibling === null || (fiber.flags & Update) === NoFlags;
     if (isTailSibling) swapInstances();
   },
-  finalizeInitialChildren: () => false,
-  commitMount() {
+  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 ref = value[FROM_REF];
+        if (ref.current != null) resolved[prop] = ref.current;
+      }
+    }
+    if (Object.keys(resolved).length) applyProps(instance.object, resolved);
   },
   getPublicInstance: (instance) => instance?.object,
   prepareForCommit: () => null,
@@ -14546,14 +15001,17 @@ function createRoot(canvas) {
   if (!prevRoot) _roots.set(canvas, { fiber, store });
   let onCreated;
   let lastCamera;
-  let lastConfiguredProps = {};
+  const lastConfiguredProps = {};
   let configured = false;
   let pending = null;
   return {
     async configure(props = {}) {
       let resolve;
       pending = new Promise((_resolve) => resolve = _resolve);
-      let {
+      const {
+        id: canvasId,
+        primaryCanvas,
+        scheduler: schedulerConfig,
         gl: glConfig,
         renderer: rendererConfig,
         size: propsSize,
@@ -14561,10 +15019,7 @@ function createRoot(canvas) {
         events,
         onCreated: onCreatedCallback,
         shadows = false,
-        linear = false,
-        flat = false,
         textureColorSpace = webgpu.SRGBColorSpace,
-        legacy = false,
         orthographic = false,
         frameloop = "always",
         dpr = [1, 2],
@@ -14575,11 +15030,14 @@ function createRoot(canvas) {
         onDragOverMissed,
         onDropMissed,
         autoUpdateFrustum = true,
-        occlusion = false
+        occlusion = false,
+        _sizeProps,
+        forceEven
       } = props;
-      let state = store.getState();
+      const state = store.getState();
       const defaultGPUProps = {
-        canvas
+        canvas,
+        antialias: true
       };
       if (glConfig && !R3F_BUILD_LEGACY) {
         throw new Error(
@@ -14590,7 +15048,27 @@ function createRoot(canvas) {
         throw new Error("Cannot use both gl and renderer props at the same time");
       }
       let renderer = state.internal.actualRenderer;
-      if (!state.internal.actualRenderer) {
+      if (primaryCanvas && !state.internal.actualRenderer) {
+        const primary = await waitForPrimary(primaryCanvas);
+        renderer = primary.renderer;
+        state.internal.actualRenderer = renderer;
+        const canvasTarget = new webgpu.CanvasTarget(canvas);
+        primary.store.setState((prev) => ({
+          internal: { ...prev.internal, isMultiCanvas: true }
+        }));
+        state.set((prev) => ({
+          webGPUSupported: primary.store.getState().webGPUSupported,
+          renderer,
+          primaryStore: primary.store,
+          internal: {
+            ...prev.internal,
+            canvasTarget,
+            isMultiCanvas: true,
+            isSecondary: true,
+            targetId: primaryCanvas
+          }
+        }));
+      } else if (!state.internal.actualRenderer) {
         renderer = await resolveRenderer(rendererConfig, defaultGPUProps, webgpu.WebGPURenderer);
         if (!renderer.hasInitialized?.()) {
           await renderer.init();
@@ -14598,14 +15076,27 @@ function createRoot(canvas) {
         const backend = renderer.backend;
         const isWebGPUBackend = backend && "isWebGPUBackend" in backend;
         state.internal.actualRenderer = renderer;
-        state.set({ webGPUSupported: isWebGPUBackend, renderer });
+        state.set({ webGPUSupported: isWebGPUBackend, renderer, primaryStore: store });
+        if (canvasId && !state.internal.isSecondary) {
+          const canvasTarget = new webgpu.CanvasTarget(canvas);
+          const unregisterPrimary = registerPrimary(canvasId, renderer, store);
+          state.set((prev) => ({
+            internal: {
+              ...prev.internal,
+              canvasTarget,
+              unregisterPrimary
+            }
+          }));
+        }
       }
       let raycaster = state.raycaster;
       if (!raycaster) state.set({ raycaster: raycaster = new webgpu.Raycaster() });
       const { params, ...options } = raycastOptions || {};
       if (!is.equ(options, raycaster, shallowLoose)) applyProps(raycaster, { ...options });
-      if (!is.equ(params, raycaster.params, shallowLoose))
+      if (!is.equ(params, raycaster.params, shallowLoose)) {
         applyProps(raycaster, { params: { ...raycaster.params, ...params } });
+      }
+      let tempCamera = state.camera;
       if (!state.camera || state.camera === lastCamera && !is.equ(lastCamera, cameraOptions, shallowLoose)) {
         lastCamera = cameraOptions;
         const isCamera = cameraOptions?.isCamera;
@@ -14625,6 +15116,7 @@ function createRoot(canvas) {
           if (!state.camera && !cameraOptions?.rotation) camera.lookAt(0, 0, 0);
         }
         state.set({ camera });
+        tempCamera = camera;
         raycaster.camera = camera;
       }
       if (!state.scene) {
@@ -14642,7 +15134,7 @@ function createRoot(canvas) {
           rootScene: scene,
           internal: { ...prev.internal, container: scene }
         }));
-        const camera = state.camera;
+        const camera = tempCamera;
         if (camera && !camera.parent) scene.add(camera);
       }
       if (events && !state.events.handlers) {
@@ -14656,9 +15148,17 @@ function createRoot(canvas) {
           wasEnabled = enabled;
         });
       }
+      if (_sizeProps !== void 0) {
+        state.set({ _sizeProps });
+      }
+      if (forceEven !== void 0 && state.internal.forceEven !== forceEven) {
+        state.set((prev) => ({ internal: { ...prev.internal, forceEven } }));
+      }
       const size = computeInitialSize(canvas, propsSize);
-      if (!is.equ(size, state.size, shallowLoose)) {
+      if (!state._sizeImperative && !is.equ(size, state.size, shallowLoose)) {
+        const wasImperative = state._sizeImperative;
         state.setSize(size.width, size.height, size.top, size.left);
+        if (!wasImperative) state.set({ _sizeImperative: false });
       }
       if (dpr !== void 0 && !is.equ(dpr, lastConfiguredProps.dpr, shallowLoose)) {
         state.setDpr(dpr);
@@ -14683,7 +15183,7 @@ function createRoot(canvas) {
         const handleXRFrame = (timestamp, frame) => {
           const state2 = store.getState();
           if (state2.frameloop === "never") return;
-          advance(timestamp, true);
+          advance(timestamp);
         };
         const actualRenderer = state.internal.actualRenderer;
         const handleSessionChange = () => {
@@ -14695,16 +15195,16 @@ function createRoot(canvas) {
         };
         const xr = {
           connect() {
-            const { gl, renderer: renderer2, isLegacy } = store.getState();
-            const actualRenderer2 = renderer2 || gl;
-            actualRenderer2.xr.addEventListener("sessionstart", handleSessionChange);
-            actualRenderer2.xr.addEventListener("sessionend", handleSessionChange);
+            const { gl, renderer: renderer2 } = store.getState();
+            const xrManager = (renderer2 || gl).xr;
+            xrManager.addEventListener("sessionstart", handleSessionChange);
+            xrManager.addEventListener("sessionend", handleSessionChange);
           },
           disconnect() {
-            const { gl, renderer: renderer2, isLegacy } = store.getState();
-            const actualRenderer2 = renderer2 || gl;
-            actualRenderer2.xr.removeEventListener("sessionstart", handleSessionChange);
-            actualRenderer2.xr.removeEventListener("sessionend", handleSessionChange);
+            const { gl, renderer: renderer2 } = store.getState();
+            const xrManager = (renderer2 || gl).xr;
+            xrManager.removeEventListener("sessionstart", handleSessionChange);
+            xrManager.removeEventListener("sessionend", handleSessionChange);
           }
         };
         if (typeof renderer.xr?.addEventListener === "function") xr.connect();
@@ -14728,15 +15228,21 @@ function createRoot(canvas) {
         } else if (is.obj(shadows)) {
           Object.assign(renderer.shadowMap, shadows);
         }
-        if (oldEnabled !== renderer.shadowMap.enabled || oldType !== renderer.shadowMap.type)
+        if (oldEnabled !== renderer.shadowMap.enabled || oldType !== renderer.shadowMap.type) {
           renderer.shadowMap.needsUpdate = true;
+        }
+      }
+      if (!configured) {
+        renderer.outputColorSpace = webgpu.SRGBColorSpace;
+        renderer.toneMapping = webgpu.ACESFilmicToneMapping;
       }
       if (textureColorSpace !== lastConfiguredProps.textureColorSpace) {
         if (state.textureColorSpace !== textureColorSpace) state.set(() => ({ textureColorSpace }));
         lastConfiguredProps.textureColorSpace = textureColorSpace;
       }
-      if (glConfig && !is.fun(glConfig) && !isRenderer(glConfig) && !is.equ(glConfig, renderer, shallowLoose))
+      if (glConfig && !is.fun(glConfig) && !isRenderer(glConfig) && !is.equ(glConfig, renderer, shallowLoose)) {
         applyProps(renderer, glConfig);
+      }
       if (rendererConfig && !is.fun(rendererConfig) && !isRenderer(rendererConfig) && state.renderer) {
         const currentRenderer = state.renderer;
         if (!is.equ(rendererConfig, currentRenderer, shallowLoose)) {
@@ -14746,11 +15252,26 @@ function createRoot(canvas) {
       const scheduler = getScheduler();
       const rootId = state.internal.rootId;
       if (!rootId) {
-        const newRootId = scheduler.generateRootId();
+        const newRootId = canvasId || scheduler.generateRootId();
         const unregisterRoot = scheduler.registerRoot(newRootId, {
           getState: () => store.getState(),
           onError: (err) => store.getState().setError(err)
         });
+        const unregisterCanvasTarget = scheduler.register(
+          () => {
+            const state2 = store.getState();
+            if (state2.internal.isMultiCanvas && state2.internal.canvasTarget) {
+              const renderer2 = state2.internal.actualRenderer;
+              renderer2.setCanvasTarget(state2.internal.canvasTarget);
+            }
+          },
+          {
+            id: `${newRootId}_canvasTarget`,
+            rootId: newRootId,
+            phase: "start",
+            system: true
+          }
+        );
         const unregisterFrustum = scheduler.register(
           () => {
             const state2 = store.getState();
@@ -14792,11 +15313,15 @@ function createRoot(canvas) {
             }
           },
           {
-            id: `${newRootId}_render`,
+            // Use canvas ID directly as job ID if available, otherwise use generated rootId
+            id: canvasId || `${newRootId}_render`,
             rootId: newRootId,
             phase: "render",
-            system: true
+            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 },
+            ...schedulerConfig?.fps && { fps: schedulerConfig.fps }
           }
         );
         state.set((state2) => ({
@@ -14805,6 +15330,7 @@ function createRoot(canvas) {
             rootId: newRootId,
             unregisterRoot: () => {
               unregisterRoot();
+              unregisterCanvasTarget();
               unregisterFrustum();
               unregisterVisibility();
               unregisterRender();
@@ -14863,15 +15389,24 @@ function unmountComponentAtNode(canvas, callback) {
             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();
             state.events.disconnect?.();
             cleanupHelperGroup(root.store);
-            renderer?.renderLists?.dispose?.();
-            renderer?.forceContextLoss?.();
-            if (renderer?.xr) state.xr.disconnect();
+            if (state.isLegacy && renderer) {
+              ;
+              renderer.renderLists?.dispose?.();
+              renderer.forceContextLoss?.();
+            }
+            if (!state.internal.isSecondary) {
+              if (renderer?.xr) state.xr.disconnect();
+            }
             dispose(state.scene);
             _roots.delete(canvas);
             if (callback) callback(canvas);
-          } catch (e) {
+          } catch {
           }
         }, 500);
       }
@@ -14879,36 +15414,34 @@ function unmountComponentAtNode(canvas, callback) {
   }
 }
 function createPortal(children, container, state) {
-  return /* @__PURE__ */ jsxRuntime.jsx(PortalWrapper, { children, container, state });
+  return /* @__PURE__ */ jsxRuntime.jsx(Portal, { children, container, state });
 }
-function PortalWrapper({ children, container, state }) {
+function Portal({ children, container, state }) {
   const isRef = React.useCallback((obj) => obj && "current" in obj, []);
-  const [resolvedContainer, setResolvedContainer] = React.useState(() => {
+  const [resolvedContainer, _setResolvedContainer] = React.useState(() => {
     if (isRef(container)) return container.current ?? null;
     return container;
   });
+  const setResolvedContainer = React.useCallback(
+    (newContainer) => {
+      if (!newContainer || newContainer === resolvedContainer) return;
+      _setResolvedContainer(isRef(newContainer) ? newContainer.current : newContainer);
+    },
+    [resolvedContainer, _setResolvedContainer, isRef]
+  );
   React.useMemo(() => {
-    if (isRef(container)) {
-      const current = container.current;
-      if (!current) {
-        queueMicrotask(() => {
-          const updated = container.current;
-          if (updated && updated !== resolvedContainer) {
-            setResolvedContainer(updated);
-          }
-        });
-      } else if (current !== resolvedContainer) {
-        setResolvedContainer(current);
-      }
-    } else if (container !== resolvedContainer) {
-      setResolvedContainer(container);
+    if (isRef(container) && !container.current) {
+      return queueMicrotask(() => {
+        setResolvedContainer(container.current);
+      });
     }
-  }, [container, resolvedContainer, isRef]);
+    setResolvedContainer(container);
+  }, [container, isRef, setResolvedContainer]);
   if (!resolvedContainer) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
   const portalKey = resolvedContainer.uuid ?? `portal-${resolvedContainer.id ?? "unknown"}`;
-  return /* @__PURE__ */ jsxRuntime.jsx(Portal, { children, container: resolvedContainer, state }, portalKey);
+  return /* @__PURE__ */ jsxRuntime.jsx(PortalInner, { children, container: resolvedContainer, state }, portalKey);
 }
-function Portal({ state = {}, children, container }) {
+function PortalInner({ state = {}, children, container }) {
   const { events, size, injectScene = true, ...rest } = state;
   const previousRoot = useStore();
   const [raycaster] = React.useState(() => new webgpu.Raycaster());
@@ -14929,11 +15462,12 @@ function Portal({ state = {}, children, container }) {
     };
   }, [portalScene, container, injectScene]);
   const inject = useMutableCallback((rootState, injectState) => {
+    const resolvedSize = { ...rootState.size, ...injectState.size, ...size };
     let viewport = void 0;
-    if (injectState.camera && size) {
+    if (injectState.camera && (size || injectState.size)) {
       const camera = injectState.camera;
-      viewport = rootState.viewport.getCurrentViewport(camera, new webgpu.Vector3(), size);
-      if (camera !== rootState.camera) updateCamera(camera, size);
+      viewport = rootState.viewport.getCurrentViewport(camera, new webgpu.Vector3(), resolvedSize);
+      if (camera !== rootState.camera) updateCamera(camera, resolvedSize);
     }
     return {
       // The intersect consists of the previous root state
@@ -14950,7 +15484,7 @@ function Portal({ state = {}, children, container }) {
       previousRoot,
       // Events, size and viewport can be overridden by the inject layer
       events: { ...rootState.events, ...injectState.events, ...events },
-      size: { ...rootState.size, ...size },
+      size: resolvedSize,
       viewport: { ...rootState.viewport, ...viewport },
       // Layers are allowed to override events
       setEvents: (events2) => injectState.set((state2) => ({ ...state2, events: { ...state2.events, ...events2 } })),
@@ -14984,15 +15518,13 @@ function CanvasImpl({
   fallback,
   resize,
   style,
+  id,
   gl,
-  renderer,
+  renderer: rendererProp,
   events = createPointerEvents,
   eventSource,
   eventPrefix,
   shadows,
-  linear,
-  flat,
-  legacy,
   orthographic,
   frameloop,
   dpr,
@@ -15004,10 +15536,46 @@ function CanvasImpl({
   onDragOverMissed,
   onDropMissed,
   onCreated,
+  hmr,
+  width,
+  height,
+  background,
+  forceEven,
   ...props
 }) {
+  const { primaryCanvas, scheduler, ...rendererConfig } = typeof rendererProp === "object" && rendererProp !== null && !("render" in rendererProp) && ("primaryCanvas" in rendererProp || "scheduler" in rendererProp) ? rendererProp : { primaryCanvas: void 0, scheduler: void 0 };
+  const renderer = Object.keys(rendererConfig).length > 0 ? rendererConfig : rendererProp;
   React__namespace.useMemo(() => extend(THREE), []);
   const Bridge = useBridge();
+  const backgroundProps = React__namespace.useMemo(() => {
+    if (!background) return null;
+    if (typeof background === "object" && !background.isColor) {
+      const { backgroundMap, envMap, files, preset, ...rest } = background;
+      return {
+        ...rest,
+        preset,
+        files: envMap || files,
+        backgroundFiles: backgroundMap,
+        background: true
+      };
+    }
+    if (typeof background === "number") {
+      return { color: background, background: true };
+    }
+    if (typeof background === "string") {
+      if (background in presetsObj) {
+        return { preset: background, background: true };
+      }
+      if (/^(https?:\/\/|\/|\.\/|\.\.\/)|\\.(hdr|exr|jpg|jpeg|png|webp|gif)$/i.test(background)) {
+        return { files: background, background: true };
+      }
+      return { color: background, background: true };
+    }
+    if (background.isColor) {
+      return { color: background, background: true };
+    }
+    return null;
+  }, [background]);
   const hasInitialSizeRef = React__namespace.useRef(false);
   const measureConfig = React__namespace.useMemo(() => {
     if (!hasInitialSizeRef.current) {
@@ -15024,7 +15592,21 @@ function CanvasImpl({
     };
   }, [resize, hasInitialSizeRef.current]);
   const [containerRef, containerRect] = useMeasure__default(measureConfig);
-  if (!hasInitialSizeRef.current && containerRect.width > 0 && containerRect.height > 0) {
+  const effectiveSize = React__namespace.useMemo(() => {
+    let w = width ?? containerRect.width;
+    let h = height ?? containerRect.height;
+    if (forceEven) {
+      w = Math.ceil(w / 2) * 2;
+      h = Math.ceil(h / 2) * 2;
+    }
+    return {
+      width: w,
+      height: h,
+      top: containerRect.top,
+      left: containerRect.left
+    };
+  }, [width, height, containerRect, forceEven]);
+  if (!hasInitialSizeRef.current && effectiveSize.width > 0 && effectiveSize.height > 0) {
     hasInitialSizeRef.current = true;
   }
   const canvasRef = React__namespace.useRef(null);
@@ -15043,7 +15625,7 @@ function CanvasImpl({
   useIsomorphicLayoutEffect(() => {
     effectActiveRef.current = true;
     const canvas = canvasRef.current;
-    if (containerRect.width > 0 && containerRect.height > 0 && canvas) {
+    if (effectiveSize.width > 0 && effectiveSize.height > 0 && canvas) {
       if (!root.current) {
         root.current = createRoot(canvas);
         notifyAlpha({
@@ -15063,21 +15645,24 @@ function CanvasImpl({
       async function run() {
         if (!effectActiveRef.current || !root.current) return;
         await root.current.configure({
+          id,
+          primaryCanvas,
+          scheduler,
           gl,
           renderer,
           scene,
           events,
           shadows,
-          linear,
-          flat,
-          legacy,
           orthographic,
           frameloop,
           dpr,
           performance,
           raycaster,
           camera,
-          size: containerRect,
+          size: effectiveSize,
+          // Store size props for reset functionality
+          _sizeProps: width !== void 0 || height !== void 0 ? { width, height } : null,
+          forceEven,
           // Pass mutable reference to onPointerMissed so it's free to update
           onPointerMissed: (...args) => handlePointerMissed.current?.(...args),
           onDragOverMissed: (...args) => handleDragOverMissed.current?.(...args),
@@ -15101,7 +15686,10 @@ function CanvasImpl({
         });
         if (!effectActiveRef.current || !root.current) return;
         root.current.render(
-          /* @__PURE__ */ jsxRuntime.jsx(Bridge, { children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { set: setError, children: /* @__PURE__ */ jsxRuntime.jsx(React__namespace.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(Block, { set: setBlock }), children: children ?? null }) }) })
+          /* @__PURE__ */ jsxRuntime.jsx(Bridge, { children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { set: setError, children: /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(Block, { set: setBlock }), children: [
+            backgroundProps && /* @__PURE__ */ jsxRuntime.jsx(Environment, { ...backgroundProps }),
+            children ?? null
+          ] }) }) })
         );
       }
       run();
@@ -15123,6 +15711,35 @@ function CanvasImpl({
       };
     }
   }, []);
+  React__namespace.useEffect(() => {
+    if (hmr === false) return;
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const handleHMR = () => {
+      queueMicrotask(() => {
+        const rootEntry = _roots.get(canvas);
+        if (rootEntry?.store) {
+          rootEntry.store.setState((state) => ({
+            nodes: {},
+            uniforms: {},
+            _hmrVersion: state._hmrVersion + 1
+          }));
+        }
+      });
+    };
+    if (typeof ({ url: (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href)) }) !== "undefined" && undefined) {
+      const hot = undefined;
+      hot.on("vite:afterUpdate", handleHMR);
+      return () => hot.dispose?.(() => {
+      });
+    }
+    if (typeof module !== "undefined" && module.hot) {
+      const hot = module.hot;
+      hot.addStatusHandler((status) => {
+        if (status === "idle") handleHMR();
+      });
+    }
+  }, [hmr]);
   const pointerEvents = eventSource ? "none" : "auto";
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -15137,7 +15754,7 @@ function CanvasImpl({
         ...style
       },
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: "r3f-canvas-container", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx("canvas", { ref: canvasRef, className: "r3f-canvas", style: { display: "block" }, children: fallback }) })
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: "r3f-canvas-container", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx("canvas", { ref: canvasRef, id, className: "r3f-canvas", style: { display: "block" }, children: fallback }) })
     }
   );
 }
@@ -15145,6 +15762,88 @@ function Canvas(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(itsFine.FiberProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(CanvasImpl, { ...props }) });
 }
 
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var _a;
+const INTERNAL_DATA = Symbol("ScopedStore.data");
+_a = INTERNAL_DATA;
+const _ScopedStore = class _ScopedStore {
+  constructor(data) {
+    __publicField(this, _a);
+    this[INTERNAL_DATA] = data;
+    return new Proxy(this, {
+      get(target, prop, receiver) {
+        if (typeof prop === "string") {
+          if (prop === "scope" || prop === "has" || prop === "keys") {
+            return Reflect.get(target, prop, receiver);
+          }
+          return target[INTERNAL_DATA][prop];
+        }
+        return Reflect.get(target, prop, receiver);
+      },
+      has(target, prop) {
+        return typeof prop === "string" ? prop in target[INTERNAL_DATA] : Reflect.has(target, prop);
+      },
+      ownKeys(target) {
+        return Reflect.ownKeys(target[INTERNAL_DATA]);
+      },
+      getOwnPropertyDescriptor(target, prop) {
+        if (typeof prop === "string" && prop in target[INTERNAL_DATA]) {
+          return {
+            configurable: true,
+            enumerable: true,
+            value: target[INTERNAL_DATA][prop]
+          };
+        }
+        return void 0;
+      }
+    });
+  }
+  /**
+   * Access a nested scope by key.
+   * If the key doesn't exist or isn't a scope object, returns an empty ScopedStore.
+   */
+  scope(key) {
+    const data = this[INTERNAL_DATA][key];
+    return new _ScopedStore(
+      data && typeof data === "object" ? data : {}
+    );
+  }
+  /**
+   * Check if a key exists in the store.
+   */
+  has(key) {
+    return key in this[INTERNAL_DATA];
+  }
+  /**
+   * Get all keys in the store.
+   */
+  keys() {
+    return Object.keys(this[INTERNAL_DATA]);
+  }
+};
+let ScopedStore = _ScopedStore;
+function createScopedStore(data) {
+  return new ScopedStore(data);
+}
+function createLazyCreatorState(state) {
+  let _uniforms = null;
+  let _nodes = null;
+  return Object.create(state, {
+    uniforms: {
+      get() {
+        return _uniforms ?? (_uniforms = createScopedStore(state.uniforms));
+      }
+    },
+    nodes: {
+      get() {
+        return _nodes ?? (_nodes = createScopedStore(state.nodes));
+      }
+    }
+  });
+}
+
 function addTexture(set, key, value) {
   set((state) => {
     const newMap = new Map(state.textures);
@@ -15184,6 +15883,27 @@ function createTextureOperations(set) {
     removeMultiple: (keys) => removeTextures(set, keys)
   };
 }
+function extractTSLValue(value) {
+  if (value === null || value === void 0) return value;
+  if (typeof value !== "object") return value;
+  const node = value;
+  if (!node.isNode) return value;
+  if (node.isConstNode) {
+    return node.value;
+  }
+  if ("value" in node) {
+    let extractedValue = node.value;
+    if (typeof node.traverse === "function") {
+      node.traverse((n) => {
+        if (n.isConstNode) {
+          extractedValue = n.value;
+        }
+      });
+    }
+    return extractedValue;
+  }
+  return value;
+}
 function vectorize(inObject) {
   if (inObject === null || inObject === void 0) return inObject;
   if (typeof inObject === "string") {
@@ -15196,6 +15916,9 @@ function vectorize(inObject) {
   }
   if (typeof inObject !== "object") return inObject;
   const obj = inObject;
+  if (obj.isNode) {
+    return extractTSLValue(inObject);
+  }
   if (obj.isVector2 || obj.isVector3 || obj.isVector4) return inObject;
   if (obj.isMatrix3 || obj.isMatrix4) return inObject;
   if (obj.isColor || obj.isEuler || obj.isQuaternion || obj.isSpherical) return inObject;
@@ -15258,21 +15981,55 @@ function useUniforms(creatorOrScope, scope) {
     },
     [store]
   );
+  const rebuildUniforms = React.useCallback(
+    (targetScope) => {
+      store.setState((state) => {
+        let newUniforms = {};
+        if (targetScope && targetScope !== "root") {
+          const { [targetScope]: _, ...rest } = state.uniforms;
+          newUniforms = rest;
+        } else if (targetScope === "root") {
+          for (const [key, value] of Object.entries(state.uniforms)) {
+            if (!isUniformNode$1(value)) newUniforms[key] = value;
+          }
+        }
+        return { uniforms: newUniforms, _hmrVersion: state._hmrVersion + 1 };
+      });
+    },
+    [store]
+  );
   const inputForMemoization = React.useMemo(() => {
-    return is.fun(creatorOrScope) ? creatorOrScope(store.getState()) : creatorOrScope;
+    let raw = creatorOrScope;
+    if (is.fun(creatorOrScope)) {
+      const wrappedState = createLazyCreatorState(store.getState());
+      raw = creatorOrScope(wrappedState);
+    }
+    if (raw && typeof raw === "object" && !Array.isArray(raw)) {
+      const normalized = {};
+      for (const [key, value] of Object.entries(raw)) {
+        normalized[key] = vectorize(value);
+      }
+      return normalized;
+    }
+    return raw;
   }, [creatorOrScope, store]);
   const memoizedInput = useCompareMemoize(inputForMemoization);
+  const isReader = memoizedInput === void 0 || typeof memoizedInput === "string";
+  const storeUniforms = useThree((s) => s.uniforms);
+  const hmrVersion = useThree((s) => s._hmrVersion);
+  const readerDep = isReader ? storeUniforms : null;
+  const creatorDep = isReader ? null : hmrVersion;
   const uniforms = React.useMemo(() => {
-    const state = store.getState();
-    const set = store.setState;
     if (memoizedInput === void 0) {
-      return state.uniforms;
+      return storeUniforms;
     }
     if (typeof memoizedInput === "string") {
-      const scopeData = state.uniforms[memoizedInput];
+      const scopeData = storeUniforms[memoizedInput];
       if (scopeData && !isUniformNode$1(scopeData)) return scopeData;
       return {};
     }
+    const state = store.getState();
+    const set = store.setState;
     if (typeof memoizedInput !== "object" || memoizedInput === null) {
       throw new Error("Invalid uniform input");
     }
@@ -15316,8 +16073,22 @@ function useUniforms(creatorOrScope, scope) {
       }
     }
     return result;
-  }, [store, memoizedInput, scope]);
-  return { ...uniforms, removeUniforms: removeUniforms2, clearUniforms };
+  }, [store, memoizedInput, scope, readerDep, creatorDep]);
+  return { ...uniforms, removeUniforms: removeUniforms2, clearUniforms, rebuildUniforms };
+}
+function rebuildAllUniforms(store, scope) {
+  store.setState((state) => {
+    let newUniforms = {};
+    if (scope && scope !== "root") {
+      const { [scope]: _, ...rest } = state.uniforms;
+      newUniforms = rest;
+    } else if (scope === "root") {
+      for (const [key, value] of Object.entries(state.uniforms)) {
+        if (!isUniformNode$1(value)) newUniforms[key] = value;
+      }
+    }
+    return { uniforms: newUniforms, _hmrVersion: state._hmrVersion + 1 };
+  });
 }
 function removeUniforms(set, names, scope) {
   set((state) => {
@@ -15382,15 +16153,17 @@ function isSameThreeType(a, b) {
 }
 
 const isUniformNode = (value) => value !== null && typeof value === "object" && "value" in value && "uuid" in value;
+const isTSLNode$1 = (value) => value !== null && typeof value === "object" && "uuid" in value && "nodeType" in value;
 function useUniform(name, value) {
   const store = useStore();
+  const hmrVersion = useThree((s) => s._hmrVersion);
   return React.useMemo(() => {
     const state = store.getState();
     const set = store.setState;
     const existing = state.uniforms[name];
     if (existing && isUniformNode(existing)) {
-      if (value !== void 0) {
-        existing.value = value;
+      if (value !== void 0 && !isTSLNode$1(value) && !isUniformNode(value)) {
+        existing.value = typeof value === "string" ? new webgpu.Color(value) : value;
       }
       return existing;
     }
@@ -15399,7 +16172,24 @@ function useUniform(name, value) {
         `[useUniform] Uniform "${name}" not found. Create it first with: useUniform('${name}', initialValue)`
       );
     }
-    const node = tsl.uniform(value);
+    if (isUniformNode(value)) {
+      const node2 = value;
+      if (typeof node2.setName === "function") {
+        node2.setName(name);
+      }
+      set((s) => ({
+        uniforms: { ...s.uniforms, [name]: node2 }
+      }));
+      return node2;
+    }
+    let node;
+    if (isTSLNode$1(value)) {
+      node = tsl.uniform(value);
+    } else if (typeof value === "string") {
+      node = tsl.uniform(new webgpu.Color(value));
+    } else {
+      node = tsl.uniform(value);
+    }
     if (typeof node.setName === "function") {
       node.setName(name);
     }
@@ -15410,7 +16200,7 @@ function useUniform(name, value) {
       }
     }));
     return node;
-  }, [store, name]);
+  }, [store, name, hmrVersion]);
 }
 
 const isTSLNode = (value) => value !== null && typeof value === "object" && ("uuid" in value || "nodeType" in value);
@@ -15451,19 +16241,46 @@ function useNodes(creatorOrScope, scope) {
     },
     [store]
   );
+  const rebuildNodes = React.useCallback(
+    (targetScope) => {
+      store.setState((state) => {
+        let newNodes = state.nodes;
+        if (targetScope && targetScope !== "root") {
+          const { [targetScope]: _, ...rest } = state.nodes;
+          newNodes = rest;
+        } else if (targetScope === "root") {
+          newNodes = {};
+          for (const [key, value] of Object.entries(state.nodes)) {
+            if (!isTSLNode(value)) newNodes[key] = value;
+          }
+        } else {
+          newNodes = {};
+        }
+        return { nodes: newNodes, _hmrVersion: state._hmrVersion + 1 };
+      });
+    },
+    [store]
+  );
+  const isReader = creatorOrScope === void 0 || typeof creatorOrScope === "string";
+  const storeNodes = useThree((s) => s.nodes);
+  const hmrVersion = useThree((s) => s._hmrVersion);
+  const scopeDep = typeof creatorOrScope === "string" ? creatorOrScope : scope;
+  const readerDep = isReader ? storeNodes : null;
+  const creatorDep = isReader ? null : hmrVersion;
   const nodes = React.useMemo(() => {
-    const state = store.getState();
-    const set = store.setState;
     if (creatorOrScope === void 0) {
-      return state.nodes;
+      return storeNodes;
     }
     if (typeof creatorOrScope === "string") {
-      const scopeData = state.nodes[creatorOrScope];
+      const scopeData = storeNodes[creatorOrScope];
       if (scopeData && !isTSLNode(scopeData)) return scopeData;
       return {};
     }
+    const state = store.getState();
+    const set = store.setState;
     const creator = creatorOrScope;
-    const created = creator(state);
+    const wrappedState = createLazyCreatorState(state);
+    const created = creator(wrappedState);
     const result = {};
     let hasNewNodes = false;
     if (scope) {
@@ -15472,7 +16289,7 @@ function useNodes(creatorOrScope, scope) {
         if (currentScope[name]) {
           result[name] = currentScope[name];
         } else {
-          if (typeof node.label === "function") node.setName(`${scope}.${name}`);
+          node.setName?.(`${scope}.${name}`);
           result[name] = node;
           hasNewNodes = true;
         }
@@ -15492,7 +16309,7 @@ function useNodes(creatorOrScope, scope) {
       if (existing && isTSLNode(existing)) {
         result[name] = existing;
       } else {
-        if (typeof node.label === "function") node.setName(name);
+        node.setName?.(name);
         result[name] = node;
         hasNewNodes = true;
       }
@@ -15501,8 +16318,25 @@ function useNodes(creatorOrScope, scope) {
       set((s) => ({ nodes: { ...s.nodes, ...result } }));
     }
     return result;
-  }, [store, typeof creatorOrScope === "string" ? creatorOrScope : scope]);
-  return { ...nodes, removeNodes: removeNodes2, clearNodes };
+  }, [store, scopeDep, readerDep, creatorDep]);
+  return { ...nodes, removeNodes: removeNodes2, clearNodes, rebuildNodes };
+}
+function rebuildAllNodes(store, scope) {
+  store.setState((state) => {
+    let newNodes = state.nodes;
+    if (scope && scope !== "root") {
+      const { [scope]: _, ...rest } = state.nodes;
+      newNodes = rest;
+    } else if (scope === "root") {
+      newNodes = {};
+      for (const [key, value] of Object.entries(state.nodes)) {
+        if (!isTSLNode(value)) newNodes[key] = value;
+      }
+    } else {
+      newNodes = {};
+    }
+    return { nodes: newNodes, _hmrVersion: state._hmrVersion + 1 };
+  });
 }
 function removeNodes(set, names, scope) {
   set((state) => {
@@ -15536,10 +16370,11 @@ function useLocalNodes(creator) {
   const uniforms = useThree((s) => s.uniforms);
   const nodes = useThree((s) => s.nodes);
   const textures = useThree((s) => s.textures);
+  const hmrVersion = useThree((s) => s._hmrVersion);
   return React.useMemo(() => {
-    const state = store.getState();
-    return creator(state);
-  }, [store, creator, uniforms, nodes, textures]);
+    const wrappedState = createLazyCreatorState(store.getState());
+    return creator(wrappedState);
+  }, [store, creator, uniforms, nodes, textures, hmrVersion]);
 }
 
 function usePostProcessing(mainCB, setupCB) {
@@ -15552,6 +16387,10 @@ function usePostProcessing(mainCB, setupCB) {
   mainCBRef.current = mainCB;
   setupCBRef.current = setupCB;
   const [rebuildVersion, setRebuildVersion] = React.useState(0);
+  React.useEffect(() => {
+    callbacksRanRef.current = false;
+    scenePassCacheRef.current = null;
+  }, []);
   const clearPasses = React.useCallback(() => {
     store.setState({ passes: {} });
   }, [store]);
@@ -15635,8 +16474,15 @@ extend(THREE);
 
 exports.Block = Block;
 exports.Canvas = Canvas;
+exports.Environment = Environment;
+exports.EnvironmentCube = EnvironmentCube;
+exports.EnvironmentMap = EnvironmentMap;
+exports.EnvironmentPortal = EnvironmentPortal;
 exports.ErrorBoundary = ErrorBoundary;
+exports.FROM_REF = FROM_REF;
 exports.IsObject = IsObject;
+exports.ONCE = ONCE;
+exports.Portal = Portal;
 exports.R3F_BUILD_LEGACY = R3F_BUILD_LEGACY;
 exports.R3F_BUILD_WEBGPU = R3F_BUILD_WEBGPU;
 exports.REACT_INTERNAL_PROPS = REACT_INTERNAL_PROPS;
@@ -15662,6 +16508,7 @@ exports.createEvents = createEvents;
 exports.createPointerEvents = createPointerEvents;
 exports.createPortal = createPortal;
 exports.createRoot = createRoot;
+exports.createScopedStore = createScopedStore;
 exports.createStore = createStore;
 exports.createTextureOperations = createTextureOperations;
 exports.detach = detach;
@@ -15671,32 +16518,45 @@ exports.events = createPointerEvents;
 exports.extend = extend;
 exports.findInitialRoot = findInitialRoot;
 exports.flushSync = flushSync;
+exports.fromRef = fromRef;
 exports.getInstanceProps = getInstanceProps;
+exports.getPrimary = getPrimary;
+exports.getPrimaryIds = getPrimaryIds;
 exports.getRootState = getRootState;
 exports.getScheduler = getScheduler;
 exports.getUuidPrefix = getUuidPrefix;
 exports.hasConstructor = hasConstructor;
+exports.hasPrimary = hasPrimary;
 exports.invalidate = invalidate;
 exports.invalidateInstance = invalidateInstance;
 exports.is = is;
 exports.isColorRepresentation = isColorRepresentation;
 exports.isCopyable = isCopyable;
+exports.isFromRef = isFromRef;
 exports.isObject3D = isObject3D;
+exports.isOnce = isOnce;
 exports.isOrthographicCamera = isOrthographicCamera;
 exports.isRef = isRef;
 exports.isRenderer = isRenderer;
 exports.isTexture = isTexture;
 exports.isVectorLike = isVectorLike;
+exports.once = once;
 exports.prepare = prepare;
+exports.presetsObj = presetsObj;
+exports.rebuildAllNodes = rebuildAllNodes;
+exports.rebuildAllUniforms = rebuildAllUniforms;
 exports.reconciler = reconciler;
+exports.registerPrimary = registerPrimary;
 exports.removeInteractivity = removeInteractivity;
 exports.removeNodes = removeNodes;
 exports.removeUniforms = removeUniforms;
 exports.resolve = resolve;
 exports.unmountComponentAtNode = unmountComponentAtNode;
+exports.unregisterPrimary = unregisterPrimary;
 exports.updateCamera = updateCamera;
 exports.updateFrustum = updateFrustum;
 exports.useBridge = useBridge;
+exports.useEnvironment = useEnvironment;
 exports.useFrame = useFrame;
 exports.useGraph = useGraph;
 exports.useInstanceHandle = useInstanceHandle;
@@ -15713,3 +16573,4 @@ exports.useTextures = useTextures;
 exports.useThree = useThree;
 exports.useUniform = useUniform;
 exports.useUniforms = useUniforms;
+exports.waitForPrimary = waitForPrimary;