@react-three/fiber 10.0.0-canary.611635d → 10.0.0-canary.6eb9584

package/dist/index.cjs

@@ -2,7 +2,6 @@
 
 const webgpu = require('three/webgpu');
 const three = require('three');
-const Inspector_js = require('three/addons/inspector/Inspector.js');
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const useMeasure = require('react-use-measure');
@@ -52,18 +51,22 @@ const Tb__default = /*#__PURE__*/_interopDefaultCompat(Tb);
 
 const R3F_BUILD_LEGACY = true;
 const R3F_BUILD_WEBGPU = true;
+async function loadInspector() {
+  const { Inspector } = await import('three/addons/inspector/Inspector.js');
+  return Inspector;
+}
 
 const THREE = /*#__PURE__*/_mergeNamespaces({
   __proto__: null,
   CubeRenderTarget: webgpu.CubeRenderTarget,
   CubeRenderTargetCompat: webgpu.CubeRenderTarget,
-  Inspector: Inspector_js.Inspector,
   R3F_BUILD_LEGACY: R3F_BUILD_LEGACY,
   R3F_BUILD_WEBGPU: R3F_BUILD_WEBGPU,
   RenderTargetCompat: webgpu.RenderTarget,
   WebGLCubeRenderTarget: three.WebGLCubeRenderTarget,
   WebGLRenderTarget: three.WebGLRenderTarget,
-  WebGLRenderer: three.WebGLRenderer
+  WebGLRenderer: three.WebGLRenderer,
+  loadInspector: loadInspector
 }, [webgpu__namespace]);
 
 const primaryRegistry = /* @__PURE__ */ new Map();

package/dist/index.d.cts

@@ -1,3 +1,4 @@
+import * as three_examples_jsm_inspector_Inspector_js from 'three/examples/jsm/inspector/Inspector.js';
 import * as three_webgpu from 'three/webgpu';
 import { CubeRenderTarget, RenderTarget, WebGPURenderer, Node, StorageTexture, Data3DTexture, CanvasTarget, ShaderNodeObject, Euler as Euler$2, Color as Color$2, ColorRepresentation as ColorRepresentation$1, Layers as Layers$1, Raycaster, Intersection as Intersection$1, BufferGeometry, Matrix4 as Matrix4$1, Quaternion as Quaternion$1, Vector2 as Vector2$1, Vector3 as Vector3$1, Vector4 as Vector4$1, Matrix3 as Matrix3$1, Loader as Loader$1, ColorSpace, Texture as Texture$1, CubeTexture, Scene, Object3D, Frustum, OrthographicCamera } from 'three/webgpu';
 import * as THREE$1 from 'three';
@@ -47,6 +48,9 @@ function _mergeNamespaces(n, m) {
 declare const R3F_BUILD_LEGACY = true;
 declare const R3F_BUILD_WEBGPU = true;
 
+/** Lazily load the three Inspector. Keeps it out of the eager module graph — see note above. */
+declare function loadInspector(): Promise<typeof three_examples_jsm_inspector_Inspector_js.Inspector>;
+
 var THREE = /*#__PURE__*/_mergeNamespaces({
   __proto__: null,
   CubeRenderTarget: CubeRenderTarget,
@@ -58,7 +62,8 @@ var THREE = /*#__PURE__*/_mergeNamespaces({
   WebGLCubeRenderTarget: WebGLCubeRenderTarget,
   WebGLRenderTarget: WebGLRenderTarget,
   WebGLRenderer: WebGLRenderer,
-  WebGLRendererParameters: WebGLRendererParameters
+  WebGLRendererParameters: WebGLRendererParameters,
+  loadInspector: loadInspector
 }, [three_webgpu]);
 
 //* Utility Types ==============================

package/dist/index.d.mts

@@ -1,3 +1,4 @@
+import * as three_examples_jsm_inspector_Inspector_js from 'three/examples/jsm/inspector/Inspector.js';
 import * as three_webgpu from 'three/webgpu';
 import { CubeRenderTarget, RenderTarget, WebGPURenderer, Node, StorageTexture, Data3DTexture, CanvasTarget, ShaderNodeObject, Euler as Euler$2, Color as Color$2, ColorRepresentation as ColorRepresentation$1, Layers as Layers$1, Raycaster, Intersection as Intersection$1, BufferGeometry, Matrix4 as Matrix4$1, Quaternion as Quaternion$1, Vector2 as Vector2$1, Vector3 as Vector3$1, Vector4 as Vector4$1, Matrix3 as Matrix3$1, Loader as Loader$1, ColorSpace, Texture as Texture$1, CubeTexture, Scene, Object3D, Frustum, OrthographicCamera } from 'three/webgpu';
 import * as THREE$1 from 'three';
@@ -47,6 +48,9 @@ function _mergeNamespaces(n, m) {
 declare const R3F_BUILD_LEGACY = true;
 declare const R3F_BUILD_WEBGPU = true;
 
+/** Lazily load the three Inspector. Keeps it out of the eager module graph — see note above. */
+declare function loadInspector(): Promise<typeof three_examples_jsm_inspector_Inspector_js.Inspector>;
+
 var THREE = /*#__PURE__*/_mergeNamespaces({
   __proto__: null,
   CubeRenderTarget: CubeRenderTarget,
@@ -58,7 +62,8 @@ var THREE = /*#__PURE__*/_mergeNamespaces({
   WebGLCubeRenderTarget: WebGLCubeRenderTarget,
   WebGLRenderTarget: WebGLRenderTarget,
   WebGLRenderer: WebGLRenderer,
-  WebGLRendererParameters: WebGLRendererParameters
+  WebGLRendererParameters: WebGLRendererParameters,
+  loadInspector: loadInspector
 }, [three_webgpu]);
 
 //* Utility Types ==============================

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import * as three_examples_jsm_inspector_Inspector_js from 'three/examples/jsm/inspector/Inspector.js';
 import * as three_webgpu from 'three/webgpu';
 import { CubeRenderTarget, RenderTarget, WebGPURenderer, Node, StorageTexture, Data3DTexture, CanvasTarget, ShaderNodeObject, Euler as Euler$2, Color as Color$2, ColorRepresentation as ColorRepresentation$1, Layers as Layers$1, Raycaster, Intersection as Intersection$1, BufferGeometry, Matrix4 as Matrix4$1, Quaternion as Quaternion$1, Vector2 as Vector2$1, Vector3 as Vector3$1, Vector4 as Vector4$1, Matrix3 as Matrix3$1, Loader as Loader$1, ColorSpace, Texture as Texture$1, CubeTexture, Scene, Object3D, Frustum, OrthographicCamera } from 'three/webgpu';
 import * as THREE$1 from 'three';
@@ -47,6 +48,9 @@ function _mergeNamespaces(n, m) {
 declare const R3F_BUILD_LEGACY = true;
 declare const R3F_BUILD_WEBGPU = true;
 
+/** Lazily load the three Inspector. Keeps it out of the eager module graph — see note above. */
+declare function loadInspector(): Promise<typeof three_examples_jsm_inspector_Inspector_js.Inspector>;
+
 var THREE = /*#__PURE__*/_mergeNamespaces({
   __proto__: null,
   CubeRenderTarget: CubeRenderTarget,
@@ -58,7 +62,8 @@ var THREE = /*#__PURE__*/_mergeNamespaces({
   WebGLCubeRenderTarget: WebGLCubeRenderTarget,
   WebGLRenderTarget: WebGLRenderTarget,
   WebGLRenderer: WebGLRenderer,
-  WebGLRendererParameters: WebGLRendererParameters
+  WebGLRendererParameters: WebGLRendererParameters,
+  loadInspector: loadInspector
 }, [three_webgpu]);
 
 //* Utility Types ==============================

package/dist/index.mjs

@@ -1,7 +1,6 @@
 import * as webgpu from 'three/webgpu';
 import { CubeRenderTarget, RenderTarget, Frustum, Matrix4, Group, BoxGeometry, MeshBasicNodeMaterial, Mesh, Node, NodeUpdateType, Layers, ShaderMaterial, Uniform, SRGBColorSpace, RGBAFormat, UnsignedByteType, Vector3, Vector2, TextureLoader, Texture as Texture$1, CubeReflectionMapping, EquirectangularReflectionMapping, CubeTextureLoader, CanvasTarget, Raycaster, OrthographicCamera, PerspectiveCamera, Scene, PCFShadowMap, VSMShadowMap, BasicShadowMap, ACESFilmicToneMapping, WebGPURenderer, HalfFloatType, Color } from 'three/webgpu';
 import { WebGLCubeRenderTarget, WebGLRenderTarget, WebGLRenderer } from 'three';
-import { Inspector } from 'three/addons/inspector/Inspector.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { useRef, useMemo, useLayoutEffect, useEffect, useContext, useImperativeHandle, useCallback, useState } from 'react';
@@ -32,18 +31,22 @@ function _mergeNamespaces(n, m) {
 
 const R3F_BUILD_LEGACY = true;
 const R3F_BUILD_WEBGPU = true;
+async function loadInspector() {
+  const { Inspector } = await import('three/addons/inspector/Inspector.js');
+  return Inspector;
+}
 
 const THREE = /*#__PURE__*/_mergeNamespaces({
   __proto__: null,
   CubeRenderTarget: CubeRenderTarget,
   CubeRenderTargetCompat: CubeRenderTarget,
-  Inspector: Inspector,
   R3F_BUILD_LEGACY: R3F_BUILD_LEGACY,
   R3F_BUILD_WEBGPU: R3F_BUILD_WEBGPU,
   RenderTargetCompat: RenderTarget,
   WebGLCubeRenderTarget: WebGLCubeRenderTarget,
   WebGLRenderTarget: WebGLRenderTarget,
-  WebGLRenderer: WebGLRenderer
+  WebGLRenderer: WebGLRenderer,
+  loadInspector: loadInspector
 }, [webgpu]);
 
 const primaryRegistry = /* @__PURE__ */ new Map();

package/dist/legacy.cjs

@@ -50,11 +50,9 @@ const Tb__default = /*#__PURE__*/_interopDefaultCompat(Tb);
 
 const R3F_BUILD_LEGACY = true;
 const R3F_BUILD_WEBGPU = false;
-const Inspector = class Inspector2 {
-  constructor() {
-    throw new Error("Inspector is not available in legacy builds. Use @react-three/fiber/webgpu instead.");
-  }
-};
+async function loadInspector() {
+  throw new Error("Inspector is not available in legacy builds. Use @react-three/fiber/webgpu instead.");
+}
 const WebGPURenderer = class WebGPURenderer2 {
   constructor() {
     throw new Error("WebGPURenderer is not available in legacy builds. Use @react-three/fiber/webgpu instead.");
@@ -67,12 +65,12 @@ const THREE = /*#__PURE__*/_mergeNamespaces({
   __proto__: null,
   CubeRenderTarget: CubeRenderTarget,
   CubeRenderTargetCompat: three.WebGLCubeRenderTarget,
-  Inspector: Inspector,
   R3F_BUILD_LEGACY: R3F_BUILD_LEGACY,
   R3F_BUILD_WEBGPU: R3F_BUILD_WEBGPU,
   RenderTarget: RenderTarget,
   RenderTargetCompat: three.WebGLRenderTarget,
-  WebGPURenderer: WebGPURenderer
+  WebGPURenderer: WebGPURenderer,
+  loadInspector: loadInspector
 }, [three__namespace]);
 
 const primaryRegistry = /* @__PURE__ */ new Map();

package/dist/legacy.d.cts

@@ -38,9 +38,9 @@ function _mergeNamespaces(n, m) {
 declare const R3F_BUILD_LEGACY = true;
 declare const R3F_BUILD_WEBGPU = false;
 
-declare const Inspector: {
-    new (): {};
-};
+type Inspector = never;
+/** Not available on the legacy (WebGL-only) entry. */
+declare function loadInspector(): Promise<never>;
 declare const WebGPURenderer: {
     new (): {};
 };
@@ -58,7 +58,8 @@ var THREE = /*#__PURE__*/_mergeNamespaces({
   R3F_BUILD_WEBGPU: R3F_BUILD_WEBGPU,
   RenderTarget: RenderTarget,
   RenderTargetCompat: WebGLRenderTarget,
-  WebGPURenderer: WebGPURenderer
+  WebGPURenderer: WebGPURenderer,
+  loadInspector: loadInspector
 }, [THREE$1]);
 
 //* Utility Types ==============================

package/dist/legacy.d.mts

@@ -38,9 +38,9 @@ function _mergeNamespaces(n, m) {
 declare const R3F_BUILD_LEGACY = true;
 declare const R3F_BUILD_WEBGPU = false;
 
-declare const Inspector: {
-    new (): {};
-};
+type Inspector = never;
+/** Not available on the legacy (WebGL-only) entry. */
+declare function loadInspector(): Promise<never>;
 declare const WebGPURenderer: {
     new (): {};
 };
@@ -58,7 +58,8 @@ var THREE = /*#__PURE__*/_mergeNamespaces({
   R3F_BUILD_WEBGPU: R3F_BUILD_WEBGPU,
   RenderTarget: RenderTarget,
   RenderTargetCompat: WebGLRenderTarget,
-  WebGPURenderer: WebGPURenderer
+  WebGPURenderer: WebGPURenderer,
+  loadInspector: loadInspector
 }, [THREE$1]);
 
 //* Utility Types ==============================

package/dist/legacy.d.ts

@@ -38,9 +38,9 @@ function _mergeNamespaces(n, m) {
 declare const R3F_BUILD_LEGACY = true;
 declare const R3F_BUILD_WEBGPU = false;
 
-declare const Inspector: {
-    new (): {};
-};
+type Inspector = never;
+/** Not available on the legacy (WebGL-only) entry. */
+declare function loadInspector(): Promise<never>;
 declare const WebGPURenderer: {
     new (): {};
 };
@@ -58,7 +58,8 @@ var THREE = /*#__PURE__*/_mergeNamespaces({
   R3F_BUILD_WEBGPU: R3F_BUILD_WEBGPU,
   RenderTarget: RenderTarget,
   RenderTargetCompat: WebGLRenderTarget,
-  WebGPURenderer: WebGPURenderer
+  WebGPURenderer: WebGPURenderer,
+  loadInspector: loadInspector
 }, [THREE$1]);
 
 //* Utility Types ==============================

package/dist/legacy.mjs

@@ -30,11 +30,9 @@ function _mergeNamespaces(n, m) {
 
 const R3F_BUILD_LEGACY = true;
 const R3F_BUILD_WEBGPU = false;
-const Inspector = class Inspector2 {
-  constructor() {
-    throw new Error("Inspector is not available in legacy builds. Use @react-three/fiber/webgpu instead.");
-  }
-};
+async function loadInspector() {
+  throw new Error("Inspector is not available in legacy builds. Use @react-three/fiber/webgpu instead.");
+}
 const WebGPURenderer = class WebGPURenderer2 {
   constructor() {
     throw new Error("WebGPURenderer is not available in legacy builds. Use @react-three/fiber/webgpu instead.");
@@ -47,12 +45,12 @@ const THREE = /*#__PURE__*/_mergeNamespaces({
   __proto__: null,
   CubeRenderTarget: CubeRenderTarget,
   CubeRenderTargetCompat: WebGLCubeRenderTarget,
-  Inspector: Inspector,
   R3F_BUILD_LEGACY: R3F_BUILD_LEGACY,
   R3F_BUILD_WEBGPU: R3F_BUILD_WEBGPU,
   RenderTarget: RenderTarget,
   RenderTargetCompat: WebGLRenderTarget,
-  WebGPURenderer: WebGPURenderer
+  WebGPURenderer: WebGPURenderer,
+  loadInspector: loadInspector
 }, [three]);
 
 const primaryRegistry = /* @__PURE__ */ new Map();

package/dist/webgpu/index.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
 const webgpu = require('three/webgpu');
-const Inspector_js = require('three/addons/inspector/Inspector.js');
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const useMeasure = require('react-use-measure');
@@ -54,6 +53,10 @@ const Tb__default = /*#__PURE__*/_interopDefaultCompat(Tb);
 
 const R3F_BUILD_LEGACY = false;
 const R3F_BUILD_WEBGPU = true;
+async function loadInspector() {
+  const { Inspector } = await import('three/addons/inspector/Inspector.js');
+  return Inspector;
+}
 const WebGLRenderer = class WebGLRenderer2 {
   constructor() {
     throw new Error(
@@ -67,13 +70,13 @@ const WebGLCubeRenderTarget = null;
 const THREE = /*#__PURE__*/_mergeNamespaces({
   __proto__: null,
   CubeRenderTargetCompat: webgpu.CubeRenderTarget,
-  Inspector: Inspector_js.Inspector,
   R3F_BUILD_LEGACY: R3F_BUILD_LEGACY,
   R3F_BUILD_WEBGPU: R3F_BUILD_WEBGPU,
   RenderTargetCompat: webgpu.RenderTarget,
   WebGLCubeRenderTarget: WebGLCubeRenderTarget,
   WebGLRenderTarget: WebGLRenderTarget,
-  WebGLRenderer: WebGLRenderer
+  WebGLRenderer: WebGLRenderer,
+  loadInspector: loadInspector
 }, [webgpu__namespace]);
 
 const primaryRegistry = /* @__PURE__ */ new Map();
@@ -1158,7 +1161,7 @@ useLoader.clear = function(loader, input, cacheKey) {
 };
 useLoader.loader = getLoader$1;
 
-function useFrame(callback, priorityOrOptions) {
+function useFrame$1(callback, priorityOrOptions) {
   const store = React__namespace.useContext(context);
   const isInsideCanvas = store !== null;
   const scheduler$1 = scheduler.getScheduler();
@@ -1326,7 +1329,7 @@ function buildFromCache(input, textureCache) {
   }
 }
 function useTexture(input, optionsOrOnLoad) {
-  const renderer = useThree((state) => state.internal.actualRenderer);
+  const renderer = useThree$1((state) => state.internal.actualRenderer);
   const store = useStore();
   const options = typeof optionsOrOnLoad === "function" ? { onLoad: optionsOrOnLoad } : optionsOrOnLoad ?? {};
   const { onLoad, cache = true } = options;
@@ -1492,13 +1495,13 @@ function useTextures(selector) {
     };
   }, [store]);
   const subscribe = selector ? () => selector(registry) : (state) => state.textures;
-  const selected = useThree(subscribe);
+  const selected = useThree$1(subscribe);
   return selector ? selected : registry;
 }
 
 function useRenderTarget(widthOrOptions, heightOrOptions, options) {
-  const isLegacy = useThree((s) => s.isLegacy);
-  const size = useThree((s) => s.size);
+  const isLegacy = useThree$1((s) => s.isLegacy);
+  const size = useThree$1((s) => s.size);
   let width;
   let height;
   let opts;
@@ -1555,7 +1558,7 @@ function useEnvironment({
   const { extension, isCubemap } = getExtension(files);
   const loader = getLoader(extension);
   if (!loader) throw new Error("useEnvironment: Unrecognized file extension: " + files);
-  const renderer = useThree((state) => state.renderer);
+  const renderer = useThree$1((state) => state.renderer);
   React.useLayoutEffect(() => {
     if (extension !== "webp" && extension !== "jpg" && extension !== "jpeg") return;
     function clearGainmapTexture() {
@@ -1648,7 +1651,7 @@ function useStore() {
   if (!store) throw new Error("R3F: Hooks can only be used within the Canvas component!");
   return store;
 }
-function useThree(selector = (state) => state, equalityFn) {
+function useThree$1(selector = (state) => state, equalityFn) {
   return useStore()(selector, equalityFn);
 }
 function useInstanceHandle(ref) {
@@ -14739,7 +14742,7 @@ function setEnvProps(background, scene, defaultScene, texture, sceneProps = {})
   };
 }
 function EnvironmentMap({ scene, background = false, map, ...config }) {
-  const defaultScene = useThree((state) => state.scene);
+  const defaultScene = useThree$1((state) => state.scene);
   React__namespace.useLayoutEffect(() => {
     if (map) return setEnvProps(background, scene, defaultScene, map, config);
   });
@@ -14757,7 +14760,7 @@ function EnvironmentCube({
   ...rest
 }) {
   const texture = useEnvironment(rest);
-  const defaultScene = useThree((state) => state.scene);
+  const defaultScene = useThree$1((state) => state.scene);
   React__namespace.useLayoutEffect(() => {
     return setEnvProps(background, scene, defaultScene, texture, {
       backgroundBlurriness: blur ?? backgroundBlurriness,
@@ -14794,9 +14797,9 @@ function EnvironmentPortal({
   preset = void 0,
   extensions
 }) {
-  const renderer = useThree((state) => state.renderer);
-  const isLegacy = useThree((state) => state.isLegacy);
-  const defaultScene = useThree((state) => state.scene);
+  const renderer = useThree$1((state) => state.renderer);
+  const isLegacy = useThree$1((state) => state.isLegacy);
+  const defaultScene = useThree$1((state) => state.scene);
   const camera = React__namespace.useRef(null);
   const [virtualScene] = React__namespace.useState(() => new webgpu.Scene());
   const fbo = React__namespace.useMemo(() => {
@@ -14840,7 +14843,7 @@ function EnvironmentPortal({
     environmentRotation
   ]);
   let count = 1;
-  useFrame(() => {
+  useFrame$1(() => {
     if (frames === Infinity || count < frames) {
       const autoClear = renderer.autoClear;
       renderer.autoClear = true;
@@ -14880,7 +14883,7 @@ function EnvironmentGround(props) {
   ] });
 }
 function EnvironmentColor({ color, scene }) {
-  const defaultScene = useThree((state) => state.scene);
+  const defaultScene = useThree$1((state) => state.scene);
   React__namespace.useLayoutEffect(() => {
     if (color === void 0) return;
     const target = resolveScene(scene || defaultScene);
@@ -15474,6 +15477,11 @@ function createTextureOperations(set) {
     removeMultiple: (keys) => removeTextures(set, keys)
   };
 }
+function scopedNodeName(scope, name) {
+  const raw = scope ? `${scope}_${name}` : name;
+  const safe = raw.replace(/[^A-Za-z0-9_]/g, "_");
+  return /^[A-Za-z_]/.test(safe) ? safe : `_${safe}`;
+}
 function extractTSLValue(value) {
   if (value === null || value === void 0) return value;
   if (typeof value !== "object") return value;
@@ -15672,8 +15680,7 @@ function createUniform(inName, node, scope) {
   const inValue = vectorize(node);
   const newUniform = tsl.uniform(inValue);
   if (typeof newUniform.setName === "function") {
-    const name = scope ? `${scope}_${inName}` : inName;
-    newUniform.setName(name);
+    newUniform.setName(scopedNodeName(scope, inName));
   }
   return newUniform;
 }
@@ -15772,7 +15779,7 @@ function useNodes(creatorOrScope, scope) {
       return creatorOrScope(createLazyCreatorState(store.getState(), store));
     },
     prepare: (name, node) => {
-      node.setName?.(scope ? `${scope}.${name}` : name);
+      node.setName?.(scopedNodeName(scope, name));
       return node;
     }
   });
@@ -15881,7 +15888,7 @@ function useBuffers(creatorOrScope, scope) {
     },
     prepare: (name, buffer) => {
       if ("setName" in buffer && typeof buffer.setName === "function") {
-        buffer.setName(scope ? `${scope}.${name}` : name);
+        buffer.setName(scopedNodeName(scope, name));
       }
       return buffer;
     }
@@ -15952,7 +15959,7 @@ function useGPUStorage(creatorOrScope, scope) {
       return creatorOrScope(createLazyCreatorState(store.getState(), store));
     },
     prepare: (name, storage) => {
-      const label = scope ? `${scope}.${name}` : name;
+      const label = scopedNodeName(scope, name);
       if ("setName" in storage && typeof storage.setName === "function") {
         storage.setName(label);
       }
@@ -15983,7 +15990,7 @@ function rebuildAllStorage(store, scope) {
 
 function useRenderPipeline(mainCB, setupCB) {
   const store = useStore();
-  const { scene, camera, renderer, isLegacy } = useThree();
+  const { scene, camera, renderer, isLegacy } = useThree$1();
   const callbacksRanRef = React.useRef(false);
   const scenePassCacheRef = React.useRef(null);
   const mainCBRef = React.useRef(mainCB);
@@ -16061,8 +16068,8 @@ function useRenderPipeline(mainCB, setupCB) {
       console.warn("[useRenderPipeline] Setup failed; the render pipeline was not configured:", error);
     }
   }, [store, renderer, scene, camera, isLegacy, rebuildVersion]);
-  const passes = useThree((s) => s.passes);
-  const renderPipeline = useThree((s) => s.renderPipeline);
+  const passes = useThree$1((s) => s.passes);
+  const renderPipeline = useThree$1((s) => s.renderPipeline);
   return {
     passes,
     renderPipeline,
@@ -16075,6 +16082,8 @@ function useRenderPipeline(mainCB, setupCB) {
 }
 
 extend(THREE);
+const useThree = useThree$1;
+const useFrame = useFrame$1;
 
 exports.Scheduler = scheduler.Scheduler;
 exports.getScheduler = scheduler.getScheduler;

package/dist/webgpu/index.d.cts

@@ -1,3 +1,4 @@
+import * as three_examples_jsm_inspector_Inspector_js from 'three/examples/jsm/inspector/Inspector.js';
 import * as three_webgpu from 'three/webgpu';
 import { CubeRenderTarget, RenderTarget, WebGPURenderer, Node, StorageTexture, Data3DTexture, CanvasTarget, ShaderNodeObject, Euler as Euler$2, Color as Color$2, ColorRepresentation as ColorRepresentation$1, Layers as Layers$1, Raycaster, Intersection as Intersection$1, BufferGeometry, Matrix4 as Matrix4$1, Quaternion as Quaternion$1, Vector2 as Vector2$1, Vector3 as Vector3$1, Vector4 as Vector4$1, Matrix3 as Matrix3$1, Loader as Loader$1, ColorSpace, Texture as Texture$1, CubeTexture, Scene, Object3D, Frustum, OrthographicCamera, WebGPURendererParameters } from 'three/webgpu';
 import { Inspector } from 'three/addons/inspector/Inspector.js';
@@ -40,6 +41,8 @@ function _mergeNamespaces(n, m) {
 declare const R3F_BUILD_LEGACY = false;
 declare const R3F_BUILD_WEBGPU = true;
 
+/** Lazily load the three Inspector. Keeps it out of the eager module graph — see note above. */
+declare function loadInspector(): Promise<typeof three_examples_jsm_inspector_Inspector_js.Inspector>;
 declare const WebGLRenderer: {
     new (): {};
 };
@@ -61,7 +64,8 @@ var THREE = /*#__PURE__*/_mergeNamespaces({
   WebGLRenderTarget: WebGLRenderTarget,
   WebGLRenderer: WebGLRenderer,
   WebGLRendererParameters: WebGLRendererParameters,
-  WebGLShadowMap: WebGLShadowMap
+  WebGLShadowMap: WebGLShadowMap,
+  loadInspector: loadInspector
 }, [three_webgpu]);
 
 //* Utility Types ==============================
@@ -1868,50 +1872,6 @@ declare namespace useLoader {
     var loader: typeof getLoader;
 }
 
-/**
- * Frame hook with phase-based ordering, priority, and FPS throttling.
- *
- * Always delivers full RootState — works both inside and outside Canvas context:
- * - Inside Canvas: Full RootState (renderer, scene, camera, etc.)
- * - Outside Canvas: The job registers immediately but the callback is held until a
- *   Canvas adopts it, then runs with full RootState. For hostless / standalone
- *   frame loops with no Canvas, use `@pmndrs/scheduler` directly.
- *
- * Returns a controls object for manual stepping, pausing, and resuming.
- *
- * @param callback - Function called each frame with (state, delta). Optional if you only need scheduler access.
- * @param priorityOrOptions - Either a priority number (backwards compat) or options object
- * @returns Controls object with step(), stepAll(), pause(), resume(), isPaused, id, scheduler
- *
- * @example
- * // Simple priority (backwards compat)
- * useFrame((state, delta) => { ... }, 5)
- *
- * @example
- * // With phase-based ordering
- * useFrame((state, delta) => { ... }, { phase: 'physics' })
- *
- * @example
- * // Outside Canvas - callback waits for a Canvas, then always has full state
- * function UI() {
- *   useFrame((state, delta) => { syncUI(state.camera) });
- *   return <button>...</button>;
- * }
- *
- * @example
- * // Hostless / standalone loop (no Canvas) - use @pmndrs/scheduler directly
- * import { getScheduler } from '@pmndrs/scheduler'
- * getScheduler().register((state, delta) => { updateGame(delta) })
- *
- * @example
- * // Scheduler-only access (no callback)
- * const { scheduler } = useFrame()
- * scheduler.pauseJob('some-job-id')
- *
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe
- */
-declare function useFrame(callback?: FrameNextCallback, priorityOrOptions?: number | UseFrameNextOptions): FrameNextControls;
-
 declare const IsObject: (url: unknown) => url is Record<string, string>;
 type TextureArray<T> = T extends string[] ? Texture$1[] : never;
 type TextureRecord<T> = T extends Record<string, string> ? {
@@ -2097,11 +2057,6 @@ declare function useRenderTarget(width: number, height: number, options?: Render
  * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usestore
  */
 declare function useStore(): RootStore;
-/**
- * Accesses R3F's internal state, containing renderer, canvas, scene, etc.
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree
- */
-declare function useThree<T = RootState>(selector?: (state: RootState) => T, equalityFn?: <T>(state: T, newState: T) => boolean): T;
 /**
  * Exposes an object's {@link Instance}.
  * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useInstanceHandle
@@ -4163,5 +4118,23 @@ interface WebGPURootState extends Omit<RootState, 'renderer' | 'gl' | 'internal'
   internal: WebGPUInternalState
 }
 
+/**
+ * @fileoverview WebGPU entry point - WebGPU only, no legacy WebGL
+ *
+ * This entry point is for apps that want to use ONLY WebGPURenderer.
+ * Includes WebGPU-specific hooks (useUniforms, useNodes, useTextures).
+ * Auto-extends THREE with WebGPU node materials (MeshBasicNodeMaterial, etc.)
+ *
+ * Usage:
+ *   import { Canvas, useFrame, useUniforms } from '@react-three/fiber/webgpu'
+ */
+
+/** `useThree` narrowed to WebGPU state — `state.renderer` is a `WebGPURenderer`. */
+type UseThreeWebGPU = <T = WebGPURootState>(selector?: (state: WebGPURootState) => T, equalityFn?: <U>(state: U, newState: U) => boolean) => T;
+/** `useFrame` narrowed to WebGPU state — the callback's `state.renderer` is a `WebGPURenderer`. */
+type UseFrameWebGPU = (callback?: FrameCallback$1<WebGPURootState>, priorityOrOptions?: number | UseFrameNextOptions) => FrameNextControls;
+declare const useThree: UseThreeWebGPU;
+declare const useFrame: UseFrameWebGPU;
+
 export { Block, Canvas, Environment, EnvironmentCube, EnvironmentMap, EnvironmentPortal, ErrorBoundary, FROM_REF, IsObject, ONCE, Portal, R3F_BUILD_LEGACY, R3F_BUILD_WEBGPU, REACT_INTERNAL_PROPS, RESERVED_PROPS, three_d as ReactThreeFiber, Texture, _roots, addAfterEffect, addEffect, addTail, advance, applyProps, attach, buildGraph, calculateDpr, clearNodeScope, clearRootNodes, clearRootUniforms, clearScope, context, createEvents, createPointerEvents, createPortal, createRoot, createScopedStore, createStore, createTextureOperations, detach, diffProps, dispose, createPointerEvents as events, extend, findInitialRoot, flushSync, fromRef, getInstanceProps, getPrimary, getPrimaryIds, getRootState, getUuidPrefix, hasConstructor, hasPrimary, invalidate, invalidateInstance, is, isColorRepresentation, isCopyable, isFromRef, isObject3D, isOnce, isOrthographicCamera, isRef, isRenderer, isTexture, isVectorLike, once, prepare, presetsObj, rebuildAllBuffers, rebuildAllNodes, rebuildAllStorage, rebuildAllUniforms, reconciler, registerPrimary, removeInteractivity, removeNodes, removeUniforms, resolve, swapInteractivity, unmountComponentAtNode, unregisterPrimary, updateCamera, updateFrustum, useBridge, useBuffers, useEnvironment, useFrame, useGPUStorage, useGraph, useInstanceHandle, useIsomorphicLayoutEffect, useLoader, useLocalNodes, useMutableCallback, useNodes, useRenderPipeline, useRenderTarget, useStore, useTexture, useTextures, useThree, useUniform, useUniforms, waitForPrimary };
-export type { Act, Args, ArgsProp, AttachFnType, AttachType, BackgroundConfig, BackgroundProp, BaseRendererProps, Bridge, BufferCreator, BufferLike, BufferRecord, BufferStore, BuffersWithUtils, Camera, CameraProps, CanvasProps, CanvasSchedulerConfig, Catalogue, ClearBuffersFn, ClearNodesFn, ClearStorageFn, ClearUniformsFn, Color, ColorManagementConfig, ComputeFunction, ConstructorRepresentation, CreatorState, DefaultGLProps, DefaultRendererProps, Disposable, DisposeBuffersFn, DisposeOptions, DisposeStorageFn, DomEvent, Dpr, ElementProps, EnvironmentLoaderProps, EnvironmentProps, EquConfig, Euler, EventHandlers, EventManager, EventProps, Events, Extensions, FiberRoot, FilterFunction, FrameCallback, FrameNextCallback, FrameNextState, FrameState, Frameloop, GLProps, GLTFLike, GeometryProps, GeometryTransformProps, GlobalEffectType, GlobalRenderCallback, HostConfig, InferLoadResult, InjectState, InputLike, Instance, InstanceProps, WebGPUInternalState as InternalState, Intersection, IntersectionEvent, IsAllOptional, IsOptional, Layers, LegacyInternalState, LegacyRenderer, LegacyRootState, LoaderInstance, LoaderLike, LoaderResult, LocalNodeCreator, MappedTextureType, MathProps, MathRepresentation, MathType, MathTypes, Matrix3, Matrix4, Mutable, MutableOrReadonlyParameters, NodeCreator, NodeProps, NodeRecord, NodesWithUtils, NonFunctionKeys, ObjectMap, OffscreenCanvas$1 as OffscreenCanvas, Overwrite, Performance, PointerCaptureTarget, PointerState, PresetsType, PrimaryCanvasEntry, Properties, Quaternion, WebGPUR3FRenderer as R3FRenderer, RaycastableRepresentation, ReactProps, RebuildBuffersFn, RebuildNodesFn, RebuildStorageFn, RebuildUniformsFn, ReconcilerRoot, RemoveBuffersFn, RemoveNodesFn, RemoveStorageFn, RemoveUniformsFn, RenderCallback, RenderProps, RenderTargetOptions, Renderer, RendererConfigExtended, RendererFactory, RendererProps, Root, WebGPURootState as RootState, RootStore, ScopedStoreType, SetBlock, Size, StorageCreator, StorageLike, StorageRecord, StorageStore, StorageWithUtils, Subscription, TSLNode, TSLNodeInput, TextureEntry, TextureInput, TextureNode, TextureOperations, TextureResult, ThreeCamera, ThreeElement, ThreeElements, ThreeElementsImpl, ThreeEvent, ThreeExports, ThreeToJSXElements, UnblockProps, UniformCreator, UniformValue, UniformsWithUtils, UseTextureOptions, UseTexturesReturn, Vector2, Vector3, Vector4, VectorRepresentation, Viewport, VisibilityEntry, WebGLDefaultProps, WebGLProps, WebGLShadowConfig, WebGPUDefaultProps, WebGPUProps, WebGPUShadowConfig, XRManager, XRPointerConfig };
+export type { Act, Args, ArgsProp, AttachFnType, AttachType, BackgroundConfig, BackgroundProp, BaseRendererProps, Bridge, BufferCreator, BufferLike, BufferRecord, BufferStore, BuffersWithUtils, Camera, CameraProps, CanvasProps, CanvasSchedulerConfig, Catalogue, ClearBuffersFn, ClearNodesFn, ClearStorageFn, ClearUniformsFn, Color, ColorManagementConfig, ComputeFunction, ConstructorRepresentation, CreatorState, DefaultGLProps, DefaultRendererProps, Disposable, DisposeBuffersFn, DisposeOptions, DisposeStorageFn, DomEvent, Dpr, ElementProps, EnvironmentLoaderProps, EnvironmentProps, EquConfig, Euler, EventHandlers, EventManager, EventProps, Events, Extensions, FiberRoot, FilterFunction, FrameCallback, FrameNextCallback, FrameNextState, FrameState, Frameloop, GLProps, GLTFLike, GeometryProps, GeometryTransformProps, GlobalEffectType, GlobalRenderCallback, HostConfig, InferLoadResult, InjectState, InputLike, Instance, InstanceProps, WebGPUInternalState as InternalState, Intersection, IntersectionEvent, IsAllOptional, IsOptional, Layers, LegacyInternalState, LegacyRenderer, LegacyRootState, LoaderInstance, LoaderLike, LoaderResult, LocalNodeCreator, MappedTextureType, MathProps, MathRepresentation, MathType, MathTypes, Matrix3, Matrix4, Mutable, MutableOrReadonlyParameters, NodeCreator, NodeProps, NodeRecord, NodesWithUtils, NonFunctionKeys, ObjectMap, OffscreenCanvas$1 as OffscreenCanvas, Overwrite, Performance, PointerCaptureTarget, PointerState, PresetsType, PrimaryCanvasEntry, Properties, Quaternion, WebGPUR3FRenderer as R3FRenderer, RaycastableRepresentation, ReactProps, RebuildBuffersFn, RebuildNodesFn, RebuildStorageFn, RebuildUniformsFn, ReconcilerRoot, RemoveBuffersFn, RemoveNodesFn, RemoveStorageFn, RemoveUniformsFn, RenderCallback, RenderProps, RenderTargetOptions, Renderer, RendererConfigExtended, RendererFactory, RendererProps, Root, WebGPURootState as RootState, RootStore, ScopedStoreType, SetBlock, Size, StorageCreator, StorageLike, StorageRecord, StorageStore, StorageWithUtils, Subscription, TSLNode, TSLNodeInput, TextureEntry, TextureInput, TextureNode, TextureOperations, TextureResult, ThreeCamera, ThreeElement, ThreeElements, ThreeElementsImpl, ThreeEvent, ThreeExports, ThreeToJSXElements, UnblockProps, UniformCreator, UniformValue, UniformsWithUtils, UseFrameWebGPU, UseTextureOptions, UseTexturesReturn, UseThreeWebGPU, Vector2, Vector3, Vector4, VectorRepresentation, Viewport, VisibilityEntry, WebGLDefaultProps, WebGLProps, WebGLShadowConfig, WebGPUDefaultProps, WebGPUProps, WebGPUShadowConfig, XRManager, XRPointerConfig };

package/dist/webgpu/index.d.mts

@@ -1,3 +1,4 @@
+import * as three_examples_jsm_inspector_Inspector_js from 'three/examples/jsm/inspector/Inspector.js';
 import * as three_webgpu from 'three/webgpu';
 import { CubeRenderTarget, RenderTarget, WebGPURenderer, Node, StorageTexture, Data3DTexture, CanvasTarget, ShaderNodeObject, Euler as Euler$2, Color as Color$2, ColorRepresentation as ColorRepresentation$1, Layers as Layers$1, Raycaster, Intersection as Intersection$1, BufferGeometry, Matrix4 as Matrix4$1, Quaternion as Quaternion$1, Vector2 as Vector2$1, Vector3 as Vector3$1, Vector4 as Vector4$1, Matrix3 as Matrix3$1, Loader as Loader$1, ColorSpace, Texture as Texture$1, CubeTexture, Scene, Object3D, Frustum, OrthographicCamera, WebGPURendererParameters } from 'three/webgpu';
 import { Inspector } from 'three/addons/inspector/Inspector.js';
@@ -40,6 +41,8 @@ function _mergeNamespaces(n, m) {
 declare const R3F_BUILD_LEGACY = false;
 declare const R3F_BUILD_WEBGPU = true;
 
+/** Lazily load the three Inspector. Keeps it out of the eager module graph — see note above. */
+declare function loadInspector(): Promise<typeof three_examples_jsm_inspector_Inspector_js.Inspector>;
 declare const WebGLRenderer: {
     new (): {};
 };
@@ -61,7 +64,8 @@ var THREE = /*#__PURE__*/_mergeNamespaces({
   WebGLRenderTarget: WebGLRenderTarget,
   WebGLRenderer: WebGLRenderer,
   WebGLRendererParameters: WebGLRendererParameters,
-  WebGLShadowMap: WebGLShadowMap
+  WebGLShadowMap: WebGLShadowMap,
+  loadInspector: loadInspector
 }, [three_webgpu]);
 
 //* Utility Types ==============================
@@ -1868,50 +1872,6 @@ declare namespace useLoader {
     var loader: typeof getLoader;
 }
 
-/**
- * Frame hook with phase-based ordering, priority, and FPS throttling.
- *
- * Always delivers full RootState — works both inside and outside Canvas context:
- * - Inside Canvas: Full RootState (renderer, scene, camera, etc.)
- * - Outside Canvas: The job registers immediately but the callback is held until a
- *   Canvas adopts it, then runs with full RootState. For hostless / standalone
- *   frame loops with no Canvas, use `@pmndrs/scheduler` directly.
- *
- * Returns a controls object for manual stepping, pausing, and resuming.
- *
- * @param callback - Function called each frame with (state, delta). Optional if you only need scheduler access.
- * @param priorityOrOptions - Either a priority number (backwards compat) or options object
- * @returns Controls object with step(), stepAll(), pause(), resume(), isPaused, id, scheduler
- *
- * @example
- * // Simple priority (backwards compat)
- * useFrame((state, delta) => { ... }, 5)
- *
- * @example
- * // With phase-based ordering
- * useFrame((state, delta) => { ... }, { phase: 'physics' })
- *
- * @example
- * // Outside Canvas - callback waits for a Canvas, then always has full state
- * function UI() {
- *   useFrame((state, delta) => { syncUI(state.camera) });
- *   return <button>...</button>;
- * }
- *
- * @example
- * // Hostless / standalone loop (no Canvas) - use @pmndrs/scheduler directly
- * import { getScheduler } from '@pmndrs/scheduler'
- * getScheduler().register((state, delta) => { updateGame(delta) })
- *
- * @example
- * // Scheduler-only access (no callback)
- * const { scheduler } = useFrame()
- * scheduler.pauseJob('some-job-id')
- *
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe
- */
-declare function useFrame(callback?: FrameNextCallback, priorityOrOptions?: number | UseFrameNextOptions): FrameNextControls;
-
 declare const IsObject: (url: unknown) => url is Record<string, string>;
 type TextureArray<T> = T extends string[] ? Texture$1[] : never;
 type TextureRecord<T> = T extends Record<string, string> ? {
@@ -2097,11 +2057,6 @@ declare function useRenderTarget(width: number, height: number, options?: Render
  * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usestore
  */
 declare function useStore(): RootStore;
-/**
- * Accesses R3F's internal state, containing renderer, canvas, scene, etc.
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree
- */
-declare function useThree<T = RootState>(selector?: (state: RootState) => T, equalityFn?: <T>(state: T, newState: T) => boolean): T;
 /**
  * Exposes an object's {@link Instance}.
  * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useInstanceHandle
@@ -4163,5 +4118,23 @@ interface WebGPURootState extends Omit<RootState, 'renderer' | 'gl' | 'internal'
   internal: WebGPUInternalState
 }
 
+/**
+ * @fileoverview WebGPU entry point - WebGPU only, no legacy WebGL
+ *
+ * This entry point is for apps that want to use ONLY WebGPURenderer.
+ * Includes WebGPU-specific hooks (useUniforms, useNodes, useTextures).
+ * Auto-extends THREE with WebGPU node materials (MeshBasicNodeMaterial, etc.)
+ *
+ * Usage:
+ *   import { Canvas, useFrame, useUniforms } from '@react-three/fiber/webgpu'
+ */
+
+/** `useThree` narrowed to WebGPU state — `state.renderer` is a `WebGPURenderer`. */
+type UseThreeWebGPU = <T = WebGPURootState>(selector?: (state: WebGPURootState) => T, equalityFn?: <U>(state: U, newState: U) => boolean) => T;
+/** `useFrame` narrowed to WebGPU state — the callback's `state.renderer` is a `WebGPURenderer`. */
+type UseFrameWebGPU = (callback?: FrameCallback$1<WebGPURootState>, priorityOrOptions?: number | UseFrameNextOptions) => FrameNextControls;
+declare const useThree: UseThreeWebGPU;
+declare const useFrame: UseFrameWebGPU;
+
 export { Block, Canvas, Environment, EnvironmentCube, EnvironmentMap, EnvironmentPortal, ErrorBoundary, FROM_REF, IsObject, ONCE, Portal, R3F_BUILD_LEGACY, R3F_BUILD_WEBGPU, REACT_INTERNAL_PROPS, RESERVED_PROPS, three_d as ReactThreeFiber, Texture, _roots, addAfterEffect, addEffect, addTail, advance, applyProps, attach, buildGraph, calculateDpr, clearNodeScope, clearRootNodes, clearRootUniforms, clearScope, context, createEvents, createPointerEvents, createPortal, createRoot, createScopedStore, createStore, createTextureOperations, detach, diffProps, dispose, createPointerEvents as events, extend, findInitialRoot, flushSync, fromRef, getInstanceProps, getPrimary, getPrimaryIds, getRootState, getUuidPrefix, hasConstructor, hasPrimary, invalidate, invalidateInstance, is, isColorRepresentation, isCopyable, isFromRef, isObject3D, isOnce, isOrthographicCamera, isRef, isRenderer, isTexture, isVectorLike, once, prepare, presetsObj, rebuildAllBuffers, rebuildAllNodes, rebuildAllStorage, rebuildAllUniforms, reconciler, registerPrimary, removeInteractivity, removeNodes, removeUniforms, resolve, swapInteractivity, unmountComponentAtNode, unregisterPrimary, updateCamera, updateFrustum, useBridge, useBuffers, useEnvironment, useFrame, useGPUStorage, useGraph, useInstanceHandle, useIsomorphicLayoutEffect, useLoader, useLocalNodes, useMutableCallback, useNodes, useRenderPipeline, useRenderTarget, useStore, useTexture, useTextures, useThree, useUniform, useUniforms, waitForPrimary };
-export type { Act, Args, ArgsProp, AttachFnType, AttachType, BackgroundConfig, BackgroundProp, BaseRendererProps, Bridge, BufferCreator, BufferLike, BufferRecord, BufferStore, BuffersWithUtils, Camera, CameraProps, CanvasProps, CanvasSchedulerConfig, Catalogue, ClearBuffersFn, ClearNodesFn, ClearStorageFn, ClearUniformsFn, Color, ColorManagementConfig, ComputeFunction, ConstructorRepresentation, CreatorState, DefaultGLProps, DefaultRendererProps, Disposable, DisposeBuffersFn, DisposeOptions, DisposeStorageFn, DomEvent, Dpr, ElementProps, EnvironmentLoaderProps, EnvironmentProps, EquConfig, Euler, EventHandlers, EventManager, EventProps, Events, Extensions, FiberRoot, FilterFunction, FrameCallback, FrameNextCallback, FrameNextState, FrameState, Frameloop, GLProps, GLTFLike, GeometryProps, GeometryTransformProps, GlobalEffectType, GlobalRenderCallback, HostConfig, InferLoadResult, InjectState, InputLike, Instance, InstanceProps, WebGPUInternalState as InternalState, Intersection, IntersectionEvent, IsAllOptional, IsOptional, Layers, LegacyInternalState, LegacyRenderer, LegacyRootState, LoaderInstance, LoaderLike, LoaderResult, LocalNodeCreator, MappedTextureType, MathProps, MathRepresentation, MathType, MathTypes, Matrix3, Matrix4, Mutable, MutableOrReadonlyParameters, NodeCreator, NodeProps, NodeRecord, NodesWithUtils, NonFunctionKeys, ObjectMap, OffscreenCanvas$1 as OffscreenCanvas, Overwrite, Performance, PointerCaptureTarget, PointerState, PresetsType, PrimaryCanvasEntry, Properties, Quaternion, WebGPUR3FRenderer as R3FRenderer, RaycastableRepresentation, ReactProps, RebuildBuffersFn, RebuildNodesFn, RebuildStorageFn, RebuildUniformsFn, ReconcilerRoot, RemoveBuffersFn, RemoveNodesFn, RemoveStorageFn, RemoveUniformsFn, RenderCallback, RenderProps, RenderTargetOptions, Renderer, RendererConfigExtended, RendererFactory, RendererProps, Root, WebGPURootState as RootState, RootStore, ScopedStoreType, SetBlock, Size, StorageCreator, StorageLike, StorageRecord, StorageStore, StorageWithUtils, Subscription, TSLNode, TSLNodeInput, TextureEntry, TextureInput, TextureNode, TextureOperations, TextureResult, ThreeCamera, ThreeElement, ThreeElements, ThreeElementsImpl, ThreeEvent, ThreeExports, ThreeToJSXElements, UnblockProps, UniformCreator, UniformValue, UniformsWithUtils, UseTextureOptions, UseTexturesReturn, Vector2, Vector3, Vector4, VectorRepresentation, Viewport, VisibilityEntry, WebGLDefaultProps, WebGLProps, WebGLShadowConfig, WebGPUDefaultProps, WebGPUProps, WebGPUShadowConfig, XRManager, XRPointerConfig };
+export type { Act, Args, ArgsProp, AttachFnType, AttachType, BackgroundConfig, BackgroundProp, BaseRendererProps, Bridge, BufferCreator, BufferLike, BufferRecord, BufferStore, BuffersWithUtils, Camera, CameraProps, CanvasProps, CanvasSchedulerConfig, Catalogue, ClearBuffersFn, ClearNodesFn, ClearStorageFn, ClearUniformsFn, Color, ColorManagementConfig, ComputeFunction, ConstructorRepresentation, CreatorState, DefaultGLProps, DefaultRendererProps, Disposable, DisposeBuffersFn, DisposeOptions, DisposeStorageFn, DomEvent, Dpr, ElementProps, EnvironmentLoaderProps, EnvironmentProps, EquConfig, Euler, EventHandlers, EventManager, EventProps, Events, Extensions, FiberRoot, FilterFunction, FrameCallback, FrameNextCallback, FrameNextState, FrameState, Frameloop, GLProps, GLTFLike, GeometryProps, GeometryTransformProps, GlobalEffectType, GlobalRenderCallback, HostConfig, InferLoadResult, InjectState, InputLike, Instance, InstanceProps, WebGPUInternalState as InternalState, Intersection, IntersectionEvent, IsAllOptional, IsOptional, Layers, LegacyInternalState, LegacyRenderer, LegacyRootState, LoaderInstance, LoaderLike, LoaderResult, LocalNodeCreator, MappedTextureType, MathProps, MathRepresentation, MathType, MathTypes, Matrix3, Matrix4, Mutable, MutableOrReadonlyParameters, NodeCreator, NodeProps, NodeRecord, NodesWithUtils, NonFunctionKeys, ObjectMap, OffscreenCanvas$1 as OffscreenCanvas, Overwrite, Performance, PointerCaptureTarget, PointerState, PresetsType, PrimaryCanvasEntry, Properties, Quaternion, WebGPUR3FRenderer as R3FRenderer, RaycastableRepresentation, ReactProps, RebuildBuffersFn, RebuildNodesFn, RebuildStorageFn, RebuildUniformsFn, ReconcilerRoot, RemoveBuffersFn, RemoveNodesFn, RemoveStorageFn, RemoveUniformsFn, RenderCallback, RenderProps, RenderTargetOptions, Renderer, RendererConfigExtended, RendererFactory, RendererProps, Root, WebGPURootState as RootState, RootStore, ScopedStoreType, SetBlock, Size, StorageCreator, StorageLike, StorageRecord, StorageStore, StorageWithUtils, Subscription, TSLNode, TSLNodeInput, TextureEntry, TextureInput, TextureNode, TextureOperations, TextureResult, ThreeCamera, ThreeElement, ThreeElements, ThreeElementsImpl, ThreeEvent, ThreeExports, ThreeToJSXElements, UnblockProps, UniformCreator, UniformValue, UniformsWithUtils, UseFrameWebGPU, UseTextureOptions, UseTexturesReturn, UseThreeWebGPU, Vector2, Vector3, Vector4, VectorRepresentation, Viewport, VisibilityEntry, WebGLDefaultProps, WebGLProps, WebGLShadowConfig, WebGPUDefaultProps, WebGPUProps, WebGPUShadowConfig, XRManager, XRPointerConfig };

package/dist/webgpu/index.d.ts

@@ -1,3 +1,4 @@
+import * as three_examples_jsm_inspector_Inspector_js from 'three/examples/jsm/inspector/Inspector.js';
 import * as three_webgpu from 'three/webgpu';
 import { CubeRenderTarget, RenderTarget, WebGPURenderer, Node, StorageTexture, Data3DTexture, CanvasTarget, ShaderNodeObject, Euler as Euler$2, Color as Color$2, ColorRepresentation as ColorRepresentation$1, Layers as Layers$1, Raycaster, Intersection as Intersection$1, BufferGeometry, Matrix4 as Matrix4$1, Quaternion as Quaternion$1, Vector2 as Vector2$1, Vector3 as Vector3$1, Vector4 as Vector4$1, Matrix3 as Matrix3$1, Loader as Loader$1, ColorSpace, Texture as Texture$1, CubeTexture, Scene, Object3D, Frustum, OrthographicCamera, WebGPURendererParameters } from 'three/webgpu';
 import { Inspector } from 'three/addons/inspector/Inspector.js';
@@ -40,6 +41,8 @@ function _mergeNamespaces(n, m) {
 declare const R3F_BUILD_LEGACY = false;
 declare const R3F_BUILD_WEBGPU = true;
 
+/** Lazily load the three Inspector. Keeps it out of the eager module graph — see note above. */
+declare function loadInspector(): Promise<typeof three_examples_jsm_inspector_Inspector_js.Inspector>;
 declare const WebGLRenderer: {
     new (): {};
 };
@@ -61,7 +64,8 @@ var THREE = /*#__PURE__*/_mergeNamespaces({
   WebGLRenderTarget: WebGLRenderTarget,
   WebGLRenderer: WebGLRenderer,
   WebGLRendererParameters: WebGLRendererParameters,
-  WebGLShadowMap: WebGLShadowMap
+  WebGLShadowMap: WebGLShadowMap,
+  loadInspector: loadInspector
 }, [three_webgpu]);
 
 //* Utility Types ==============================
@@ -1868,50 +1872,6 @@ declare namespace useLoader {
     var loader: typeof getLoader;
 }
 
-/**
- * Frame hook with phase-based ordering, priority, and FPS throttling.
- *
- * Always delivers full RootState — works both inside and outside Canvas context:
- * - Inside Canvas: Full RootState (renderer, scene, camera, etc.)
- * - Outside Canvas: The job registers immediately but the callback is held until a
- *   Canvas adopts it, then runs with full RootState. For hostless / standalone
- *   frame loops with no Canvas, use `@pmndrs/scheduler` directly.
- *
- * Returns a controls object for manual stepping, pausing, and resuming.
- *
- * @param callback - Function called each frame with (state, delta). Optional if you only need scheduler access.
- * @param priorityOrOptions - Either a priority number (backwards compat) or options object
- * @returns Controls object with step(), stepAll(), pause(), resume(), isPaused, id, scheduler
- *
- * @example
- * // Simple priority (backwards compat)
- * useFrame((state, delta) => { ... }, 5)
- *
- * @example
- * // With phase-based ordering
- * useFrame((state, delta) => { ... }, { phase: 'physics' })
- *
- * @example
- * // Outside Canvas - callback waits for a Canvas, then always has full state
- * function UI() {
- *   useFrame((state, delta) => { syncUI(state.camera) });
- *   return <button>...</button>;
- * }
- *
- * @example
- * // Hostless / standalone loop (no Canvas) - use @pmndrs/scheduler directly
- * import { getScheduler } from '@pmndrs/scheduler'
- * getScheduler().register((state, delta) => { updateGame(delta) })
- *
- * @example
- * // Scheduler-only access (no callback)
- * const { scheduler } = useFrame()
- * scheduler.pauseJob('some-job-id')
- *
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe
- */
-declare function useFrame(callback?: FrameNextCallback, priorityOrOptions?: number | UseFrameNextOptions): FrameNextControls;
-
 declare const IsObject: (url: unknown) => url is Record<string, string>;
 type TextureArray<T> = T extends string[] ? Texture$1[] : never;
 type TextureRecord<T> = T extends Record<string, string> ? {
@@ -2097,11 +2057,6 @@ declare function useRenderTarget(width: number, height: number, options?: Render
  * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usestore
  */
 declare function useStore(): RootStore;
-/**
- * Accesses R3F's internal state, containing renderer, canvas, scene, etc.
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree
- */
-declare function useThree<T = RootState>(selector?: (state: RootState) => T, equalityFn?: <T>(state: T, newState: T) => boolean): T;
 /**
  * Exposes an object's {@link Instance}.
  * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useInstanceHandle
@@ -4163,5 +4118,23 @@ interface WebGPURootState extends Omit<RootState, 'renderer' | 'gl' | 'internal'
   internal: WebGPUInternalState
 }
 
+/**
+ * @fileoverview WebGPU entry point - WebGPU only, no legacy WebGL
+ *
+ * This entry point is for apps that want to use ONLY WebGPURenderer.
+ * Includes WebGPU-specific hooks (useUniforms, useNodes, useTextures).
+ * Auto-extends THREE with WebGPU node materials (MeshBasicNodeMaterial, etc.)
+ *
+ * Usage:
+ *   import { Canvas, useFrame, useUniforms } from '@react-three/fiber/webgpu'
+ */
+
+/** `useThree` narrowed to WebGPU state — `state.renderer` is a `WebGPURenderer`. */
+type UseThreeWebGPU = <T = WebGPURootState>(selector?: (state: WebGPURootState) => T, equalityFn?: <U>(state: U, newState: U) => boolean) => T;
+/** `useFrame` narrowed to WebGPU state — the callback's `state.renderer` is a `WebGPURenderer`. */
+type UseFrameWebGPU = (callback?: FrameCallback$1<WebGPURootState>, priorityOrOptions?: number | UseFrameNextOptions) => FrameNextControls;
+declare const useThree: UseThreeWebGPU;
+declare const useFrame: UseFrameWebGPU;
+
 export { Block, Canvas, Environment, EnvironmentCube, EnvironmentMap, EnvironmentPortal, ErrorBoundary, FROM_REF, IsObject, ONCE, Portal, R3F_BUILD_LEGACY, R3F_BUILD_WEBGPU, REACT_INTERNAL_PROPS, RESERVED_PROPS, three_d as ReactThreeFiber, Texture, _roots, addAfterEffect, addEffect, addTail, advance, applyProps, attach, buildGraph, calculateDpr, clearNodeScope, clearRootNodes, clearRootUniforms, clearScope, context, createEvents, createPointerEvents, createPortal, createRoot, createScopedStore, createStore, createTextureOperations, detach, diffProps, dispose, createPointerEvents as events, extend, findInitialRoot, flushSync, fromRef, getInstanceProps, getPrimary, getPrimaryIds, getRootState, getUuidPrefix, hasConstructor, hasPrimary, invalidate, invalidateInstance, is, isColorRepresentation, isCopyable, isFromRef, isObject3D, isOnce, isOrthographicCamera, isRef, isRenderer, isTexture, isVectorLike, once, prepare, presetsObj, rebuildAllBuffers, rebuildAllNodes, rebuildAllStorage, rebuildAllUniforms, reconciler, registerPrimary, removeInteractivity, removeNodes, removeUniforms, resolve, swapInteractivity, unmountComponentAtNode, unregisterPrimary, updateCamera, updateFrustum, useBridge, useBuffers, useEnvironment, useFrame, useGPUStorage, useGraph, useInstanceHandle, useIsomorphicLayoutEffect, useLoader, useLocalNodes, useMutableCallback, useNodes, useRenderPipeline, useRenderTarget, useStore, useTexture, useTextures, useThree, useUniform, useUniforms, waitForPrimary };
-export type { Act, Args, ArgsProp, AttachFnType, AttachType, BackgroundConfig, BackgroundProp, BaseRendererProps, Bridge, BufferCreator, BufferLike, BufferRecord, BufferStore, BuffersWithUtils, Camera, CameraProps, CanvasProps, CanvasSchedulerConfig, Catalogue, ClearBuffersFn, ClearNodesFn, ClearStorageFn, ClearUniformsFn, Color, ColorManagementConfig, ComputeFunction, ConstructorRepresentation, CreatorState, DefaultGLProps, DefaultRendererProps, Disposable, DisposeBuffersFn, DisposeOptions, DisposeStorageFn, DomEvent, Dpr, ElementProps, EnvironmentLoaderProps, EnvironmentProps, EquConfig, Euler, EventHandlers, EventManager, EventProps, Events, Extensions, FiberRoot, FilterFunction, FrameCallback, FrameNextCallback, FrameNextState, FrameState, Frameloop, GLProps, GLTFLike, GeometryProps, GeometryTransformProps, GlobalEffectType, GlobalRenderCallback, HostConfig, InferLoadResult, InjectState, InputLike, Instance, InstanceProps, WebGPUInternalState as InternalState, Intersection, IntersectionEvent, IsAllOptional, IsOptional, Layers, LegacyInternalState, LegacyRenderer, LegacyRootState, LoaderInstance, LoaderLike, LoaderResult, LocalNodeCreator, MappedTextureType, MathProps, MathRepresentation, MathType, MathTypes, Matrix3, Matrix4, Mutable, MutableOrReadonlyParameters, NodeCreator, NodeProps, NodeRecord, NodesWithUtils, NonFunctionKeys, ObjectMap, OffscreenCanvas$1 as OffscreenCanvas, Overwrite, Performance, PointerCaptureTarget, PointerState, PresetsType, PrimaryCanvasEntry, Properties, Quaternion, WebGPUR3FRenderer as R3FRenderer, RaycastableRepresentation, ReactProps, RebuildBuffersFn, RebuildNodesFn, RebuildStorageFn, RebuildUniformsFn, ReconcilerRoot, RemoveBuffersFn, RemoveNodesFn, RemoveStorageFn, RemoveUniformsFn, RenderCallback, RenderProps, RenderTargetOptions, Renderer, RendererConfigExtended, RendererFactory, RendererProps, Root, WebGPURootState as RootState, RootStore, ScopedStoreType, SetBlock, Size, StorageCreator, StorageLike, StorageRecord, StorageStore, StorageWithUtils, Subscription, TSLNode, TSLNodeInput, TextureEntry, TextureInput, TextureNode, TextureOperations, TextureResult, ThreeCamera, ThreeElement, ThreeElements, ThreeElementsImpl, ThreeEvent, ThreeExports, ThreeToJSXElements, UnblockProps, UniformCreator, UniformValue, UniformsWithUtils, UseTextureOptions, UseTexturesReturn, Vector2, Vector3, Vector4, VectorRepresentation, Viewport, VisibilityEntry, WebGLDefaultProps, WebGLProps, WebGLShadowConfig, WebGPUDefaultProps, WebGPUProps, WebGPUShadowConfig, XRManager, XRPointerConfig };
+export type { Act, Args, ArgsProp, AttachFnType, AttachType, BackgroundConfig, BackgroundProp, BaseRendererProps, Bridge, BufferCreator, BufferLike, BufferRecord, BufferStore, BuffersWithUtils, Camera, CameraProps, CanvasProps, CanvasSchedulerConfig, Catalogue, ClearBuffersFn, ClearNodesFn, ClearStorageFn, ClearUniformsFn, Color, ColorManagementConfig, ComputeFunction, ConstructorRepresentation, CreatorState, DefaultGLProps, DefaultRendererProps, Disposable, DisposeBuffersFn, DisposeOptions, DisposeStorageFn, DomEvent, Dpr, ElementProps, EnvironmentLoaderProps, EnvironmentProps, EquConfig, Euler, EventHandlers, EventManager, EventProps, Events, Extensions, FiberRoot, FilterFunction, FrameCallback, FrameNextCallback, FrameNextState, FrameState, Frameloop, GLProps, GLTFLike, GeometryProps, GeometryTransformProps, GlobalEffectType, GlobalRenderCallback, HostConfig, InferLoadResult, InjectState, InputLike, Instance, InstanceProps, WebGPUInternalState as InternalState, Intersection, IntersectionEvent, IsAllOptional, IsOptional, Layers, LegacyInternalState, LegacyRenderer, LegacyRootState, LoaderInstance, LoaderLike, LoaderResult, LocalNodeCreator, MappedTextureType, MathProps, MathRepresentation, MathType, MathTypes, Matrix3, Matrix4, Mutable, MutableOrReadonlyParameters, NodeCreator, NodeProps, NodeRecord, NodesWithUtils, NonFunctionKeys, ObjectMap, OffscreenCanvas$1 as OffscreenCanvas, Overwrite, Performance, PointerCaptureTarget, PointerState, PresetsType, PrimaryCanvasEntry, Properties, Quaternion, WebGPUR3FRenderer as R3FRenderer, RaycastableRepresentation, ReactProps, RebuildBuffersFn, RebuildNodesFn, RebuildStorageFn, RebuildUniformsFn, ReconcilerRoot, RemoveBuffersFn, RemoveNodesFn, RemoveStorageFn, RemoveUniformsFn, RenderCallback, RenderProps, RenderTargetOptions, Renderer, RendererConfigExtended, RendererFactory, RendererProps, Root, WebGPURootState as RootState, RootStore, ScopedStoreType, SetBlock, Size, StorageCreator, StorageLike, StorageRecord, StorageStore, StorageWithUtils, Subscription, TSLNode, TSLNodeInput, TextureEntry, TextureInput, TextureNode, TextureOperations, TextureResult, ThreeCamera, ThreeElement, ThreeElements, ThreeElementsImpl, ThreeEvent, ThreeExports, ThreeToJSXElements, UnblockProps, UniformCreator, UniformValue, UniformsWithUtils, UseFrameWebGPU, UseTextureOptions, UseTexturesReturn, UseThreeWebGPU, Vector2, Vector3, Vector4, VectorRepresentation, Viewport, VisibilityEntry, WebGLDefaultProps, WebGLProps, WebGLShadowConfig, WebGPUDefaultProps, WebGPUProps, WebGPUShadowConfig, XRManager, XRPointerConfig };

package/dist/webgpu/index.mjs

@@ -1,6 +1,5 @@
 import * as webgpu from 'three/webgpu';
 import { CubeRenderTarget, RenderTarget, Frustum, Matrix4, Group, BoxGeometry, MeshBasicNodeMaterial, Mesh, Node, NodeUpdateType, Layers, ShaderMaterial, Uniform, SRGBColorSpace, RGBAFormat, UnsignedByteType, Vector3, Vector2, TextureLoader, Texture as Texture$1, CubeReflectionMapping, EquirectangularReflectionMapping, CubeTextureLoader, CanvasTarget, Raycaster, OrthographicCamera, PerspectiveCamera, Scene, PCFShadowMap, VSMShadowMap, BasicShadowMap, ACESFilmicToneMapping, WebGPURenderer, HalfFloatType, Color, Vector4, RenderPipeline } from 'three/webgpu';
-import { Inspector } from 'three/addons/inspector/Inspector.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { useRef, useMemo, useLayoutEffect, useEffect, useContext, useImperativeHandle, useCallback, useState } from 'react';
@@ -34,6 +33,10 @@ function _mergeNamespaces(n, m) {
 
 const R3F_BUILD_LEGACY = false;
 const R3F_BUILD_WEBGPU = true;
+async function loadInspector() {
+  const { Inspector } = await import('three/addons/inspector/Inspector.js');
+  return Inspector;
+}
 const WebGLRenderer = class WebGLRenderer2 {
   constructor() {
     throw new Error(
@@ -47,13 +50,13 @@ const WebGLCubeRenderTarget = null;
 const THREE = /*#__PURE__*/_mergeNamespaces({
   __proto__: null,
   CubeRenderTargetCompat: CubeRenderTarget,
-  Inspector: Inspector,
   R3F_BUILD_LEGACY: R3F_BUILD_LEGACY,
   R3F_BUILD_WEBGPU: R3F_BUILD_WEBGPU,
   RenderTargetCompat: RenderTarget,
   WebGLCubeRenderTarget: WebGLCubeRenderTarget,
   WebGLRenderTarget: WebGLRenderTarget,
-  WebGLRenderer: WebGLRenderer
+  WebGLRenderer: WebGLRenderer,
+  loadInspector: loadInspector
 }, [webgpu]);
 
 const primaryRegistry = /* @__PURE__ */ new Map();
@@ -1138,7 +1141,7 @@ useLoader.clear = function(loader, input, cacheKey) {
 };
 useLoader.loader = getLoader$1;
 
-function useFrame(callback, priorityOrOptions) {
+function useFrame$1(callback, priorityOrOptions) {
   const store = React.useContext(context);
   const isInsideCanvas = store !== null;
   const scheduler = getScheduler();
@@ -1306,7 +1309,7 @@ function buildFromCache(input, textureCache) {
   }
 }
 function useTexture(input, optionsOrOnLoad) {
-  const renderer = useThree((state) => state.internal.actualRenderer);
+  const renderer = useThree$1((state) => state.internal.actualRenderer);
   const store = useStore();
   const options = typeof optionsOrOnLoad === "function" ? { onLoad: optionsOrOnLoad } : optionsOrOnLoad ?? {};
   const { onLoad, cache = true } = options;
@@ -1472,13 +1475,13 @@ function useTextures(selector) {
     };
   }, [store]);
   const subscribe = selector ? () => selector(registry) : (state) => state.textures;
-  const selected = useThree(subscribe);
+  const selected = useThree$1(subscribe);
   return selector ? selected : registry;
 }
 
 function useRenderTarget(widthOrOptions, heightOrOptions, options) {
-  const isLegacy = useThree((s) => s.isLegacy);
-  const size = useThree((s) => s.size);
+  const isLegacy = useThree$1((s) => s.isLegacy);
+  const size = useThree$1((s) => s.size);
   let width;
   let height;
   let opts;
@@ -1535,7 +1538,7 @@ function useEnvironment({
   const { extension, isCubemap } = getExtension(files);
   const loader = getLoader(extension);
   if (!loader) throw new Error("useEnvironment: Unrecognized file extension: " + files);
-  const renderer = useThree((state) => state.renderer);
+  const renderer = useThree$1((state) => state.renderer);
   useLayoutEffect(() => {
     if (extension !== "webp" && extension !== "jpg" && extension !== "jpeg") return;
     function clearGainmapTexture() {
@@ -1628,7 +1631,7 @@ function useStore() {
   if (!store) throw new Error("R3F: Hooks can only be used within the Canvas component!");
   return store;
 }
-function useThree(selector = (state) => state, equalityFn) {
+function useThree$1(selector = (state) => state, equalityFn) {
   return useStore()(selector, equalityFn);
 }
 function useInstanceHandle(ref) {
@@ -14719,7 +14722,7 @@ function setEnvProps(background, scene, defaultScene, texture, sceneProps = {})
   };
 }
 function EnvironmentMap({ scene, background = false, map, ...config }) {
-  const defaultScene = useThree((state) => state.scene);
+  const defaultScene = useThree$1((state) => state.scene);
   React.useLayoutEffect(() => {
     if (map) return setEnvProps(background, scene, defaultScene, map, config);
   });
@@ -14737,7 +14740,7 @@ function EnvironmentCube({
   ...rest
 }) {
   const texture = useEnvironment(rest);
-  const defaultScene = useThree((state) => state.scene);
+  const defaultScene = useThree$1((state) => state.scene);
   React.useLayoutEffect(() => {
     return setEnvProps(background, scene, defaultScene, texture, {
       backgroundBlurriness: blur ?? backgroundBlurriness,
@@ -14774,9 +14777,9 @@ function EnvironmentPortal({
   preset = void 0,
   extensions
 }) {
-  const renderer = useThree((state) => state.renderer);
-  const isLegacy = useThree((state) => state.isLegacy);
-  const defaultScene = useThree((state) => state.scene);
+  const renderer = useThree$1((state) => state.renderer);
+  const isLegacy = useThree$1((state) => state.isLegacy);
+  const defaultScene = useThree$1((state) => state.scene);
   const camera = React.useRef(null);
   const [virtualScene] = React.useState(() => new Scene());
   const fbo = React.useMemo(() => {
@@ -14820,7 +14823,7 @@ function EnvironmentPortal({
     environmentRotation
   ]);
   let count = 1;
-  useFrame(() => {
+  useFrame$1(() => {
     if (frames === Infinity || count < frames) {
       const autoClear = renderer.autoClear;
       renderer.autoClear = true;
@@ -14860,7 +14863,7 @@ function EnvironmentGround(props) {
   ] });
 }
 function EnvironmentColor({ color, scene }) {
-  const defaultScene = useThree((state) => state.scene);
+  const defaultScene = useThree$1((state) => state.scene);
   React.useLayoutEffect(() => {
     if (color === void 0) return;
     const target = resolveScene(scene || defaultScene);
@@ -15454,6 +15457,11 @@ function createTextureOperations(set) {
     removeMultiple: (keys) => removeTextures(set, keys)
   };
 }
+function scopedNodeName(scope, name) {
+  const raw = scope ? `${scope}_${name}` : name;
+  const safe = raw.replace(/[^A-Za-z0-9_]/g, "_");
+  return /^[A-Za-z_]/.test(safe) ? safe : `_${safe}`;
+}
 function extractTSLValue(value) {
   if (value === null || value === void 0) return value;
   if (typeof value !== "object") return value;
@@ -15652,8 +15660,7 @@ function createUniform(inName, node, scope) {
   const inValue = vectorize(node);
   const newUniform = uniform(inValue);
   if (typeof newUniform.setName === "function") {
-    const name = scope ? `${scope}_${inName}` : inName;
-    newUniform.setName(name);
+    newUniform.setName(scopedNodeName(scope, inName));
   }
   return newUniform;
 }
@@ -15752,7 +15759,7 @@ function useNodes(creatorOrScope, scope) {
       return creatorOrScope(createLazyCreatorState(store.getState(), store));
     },
     prepare: (name, node) => {
-      node.setName?.(scope ? `${scope}.${name}` : name);
+      node.setName?.(scopedNodeName(scope, name));
       return node;
     }
   });
@@ -15861,7 +15868,7 @@ function useBuffers(creatorOrScope, scope) {
     },
     prepare: (name, buffer) => {
       if ("setName" in buffer && typeof buffer.setName === "function") {
-        buffer.setName(scope ? `${scope}.${name}` : name);
+        buffer.setName(scopedNodeName(scope, name));
       }
       return buffer;
     }
@@ -15932,7 +15939,7 @@ function useGPUStorage(creatorOrScope, scope) {
       return creatorOrScope(createLazyCreatorState(store.getState(), store));
     },
     prepare: (name, storage) => {
-      const label = scope ? `${scope}.${name}` : name;
+      const label = scopedNodeName(scope, name);
       if ("setName" in storage && typeof storage.setName === "function") {
         storage.setName(label);
       }
@@ -15963,7 +15970,7 @@ function rebuildAllStorage(store, scope) {
 
 function useRenderPipeline(mainCB, setupCB) {
   const store = useStore();
-  const { scene, camera, renderer, isLegacy } = useThree();
+  const { scene, camera, renderer, isLegacy } = useThree$1();
   const callbacksRanRef = useRef(false);
   const scenePassCacheRef = useRef(null);
   const mainCBRef = useRef(mainCB);
@@ -16041,8 +16048,8 @@ function useRenderPipeline(mainCB, setupCB) {
       console.warn("[useRenderPipeline] Setup failed; the render pipeline was not configured:", error);
     }
   }, [store, renderer, scene, camera, isLegacy, rebuildVersion]);
-  const passes = useThree((s) => s.passes);
-  const renderPipeline = useThree((s) => s.renderPipeline);
+  const passes = useThree$1((s) => s.passes);
+  const renderPipeline = useThree$1((s) => s.renderPipeline);
   return {
     passes,
     renderPipeline,
@@ -16055,5 +16062,7 @@ function useRenderPipeline(mainCB, setupCB) {
 }
 
 extend(THREE);
+const useThree = useThree$1;
+const useFrame = useFrame$1;
 
 export { Block, Canvas, Environment, EnvironmentCube, EnvironmentMap, EnvironmentPortal, ErrorBoundary, FROM_REF, IsObject, ONCE, Portal, R3F_BUILD_LEGACY, R3F_BUILD_WEBGPU, REACT_INTERNAL_PROPS, RESERVED_PROPS, Texture, _roots, addAfterEffect, addEffect, addTail, advance, applyProps, attach, buildGraph, calculateDpr, clearNodeScope, clearRootNodes, clearRootUniforms, clearScope, context, createEvents, createPointerEvents, createPortal, createRoot, createScopedStore, createStore, createTextureOperations, detach, diffProps, dispose, createPointerEvents as events, extend, findInitialRoot, flushSync, fromRef, getInstanceProps, getPrimary, getPrimaryIds, getRootState, getUuidPrefix, hasConstructor, hasPrimary, invalidate, invalidateInstance, is, isColorRepresentation, isCopyable, isFromRef, isObject3D, isOnce, isOrthographicCamera, isRef$1 as isRef, isRenderer, isTexture, isVectorLike, once, prepare, presetsObj, rebuildAllBuffers, rebuildAllNodes, rebuildAllStorage, rebuildAllUniforms, reconciler, registerPrimary, removeInteractivity, removeNodes, removeUniforms, resolve, swapInteractivity, unmountComponentAtNode, unregisterPrimary, updateCamera, updateFrustum, useBridge, useBuffers, useEnvironment, useFrame, useGPUStorage, useGraph, useInstanceHandle, useIsomorphicLayoutEffect, useLoader, useLocalNodes, useMutableCallback, useNodes, useRenderPipeline, useRenderTarget, useStore, useTexture, useTextures, useThree, useUniform, useUniforms, waitForPrimary };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "10.0.0-canary.611635d",
+  "version": "10.0.0-canary.6eb9584",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",