@octanejs/drei 0.0.20 → 0.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/drei",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "description": "Octane port of @react-three/drei",
   "type": "module",
   "sideEffects": false,
@@ -38,16 +38,16 @@
     "three-mesh-bvh": "^0.8.3",
     "three-stdlib": "^2.35.6",
     "troika-three-text": "^0.52.4",
-    "@octanejs/zustand": "0.1.52"
+    "@octanejs/zustand": "0.1.54"
   },
   "engines": {
     "node": ">=22.22.2"
   },
   "peerDependencies": {
     "@types/three": ">=0.159",
-    "octane": "^0.1.51 || ^0.2.0",
     "three": ">=0.159",
-    "@octanejs/three": "0.1.46"
+    "@octanejs/three": "0.1.47",
+    "octane": "^0.3.0"
   },
   "peerDependenciesMeta": {
     "@types/three": {
@@ -70,7 +70,7 @@
   "devDependencies": {
     "@react-three/drei": "10.7.7",
     "@react-three/fiber": "9.6.1",
-    "@tsrx/react": "^0.2.71",
+    "@tsrx/react": "^0.3.0",
     "@types/react": "^19.2.17",
     "@types/stats.js": "^0.17.4",
     "@types/three": "0.172.0",
@@ -81,9 +81,9 @@
     "typescript": "^5.9.3",
     "vite": "^8.1.5",
     "vitest": "^4.1.10",
-    "@octanejs/three": "0.1.46",
-    "@octanejs/zustand": "0.1.52",
-    "octane": "0.2.11"
+    "@octanejs/three": "0.1.47",
+    "@octanejs/zustand": "0.1.54",
+    "octane": "0.3.0"
   },
   "scripts": {
     "upstream:generate": "node scripts/generate-upstream-crosswalk.mjs",

package/src/core/AccumulativeShadows.three.tsrx

@@ -52,6 +52,7 @@ type SoftShadowMaterial = THREE.ShaderMaterial & {
 };
 
 export const accumulativeContext = createContext<AccumulativeContext>(null!);
+const AccumulativeContextProvider = accumulativeContext;
 
 const SoftShadowMaterialImpl = shaderMaterial(
 	{ color: new THREE.Color(), blend: 2, alphaTest: 0.75, opacity: 0, map: null },
@@ -234,7 +235,7 @@ export function AccumulativeShadows({
 	});
 	<group {...props}>
 		<group {...({ traverse: () => null } as any)} ref={lights}>
-			<accumulativeContext.Provider value={api}>{children}</accumulativeContext.Provider>
+			<AccumulativeContextProvider value={api}>{children}</AccumulativeContextProvider>
 		</group>
 		<mesh receiveShadow ref={plane as any} scale={scale} rotation={[-Math.PI / 2, 0, 0]}>
 			<planeGeometry />

package/src/core/Bounds.three.tsrx

@@ -314,7 +314,7 @@ export function Bounds({
 		}
 	});
 	<group ref={ref}>
-		<BoundsContext.Provider value={api}>{children as OctaneNode}</BoundsContext.Provider>
+		<BoundsContext value={api}>{children as OctaneNode}</BoundsContext>
 	</group>
 }
 

package/src/core/Cloud.three.tsrx

@@ -190,7 +190,7 @@ export function Clouds({
 	const maximum = Math.max(imageBounds[0]!, imageBounds[1]!);
 	imageBounds = [imageBounds[0]! / maximum, imageBounds[1]! / maximum];
 	<group ref={mergedRef} {...props}>
-		<CloudsContext.Provider value={cloudsRef}>
+		<CloudsContext value={cloudsRef}>
 			{children}
 			<instancedMesh
 				matrixAutoUpdate={false}
@@ -204,7 +204,7 @@ export function Clouds({
 				</planeGeometry>
 				<CloudMaterialElement map={cloudTexture} transparent={true} depthWrite={false} />
 			</instancedMesh>
-		</CloudsContext.Provider>
+		</CloudsContext>
 	</group>
 }
 

package/src/core/GizmoHelper.three.tsrx

@@ -107,9 +107,9 @@ export function GizmoHelper({
 	const x = alignment.endsWith('-center') ? 0 : alignment.endsWith('-left') ? -size.width / 2 + marginX : size.width / 2 - marginX;
 	const y = alignment.startsWith('center-') ? 0 : alignment.startsWith('top-') ? size.height / 2 - marginY : -size.height / 2 + marginY;
 	<Hud renderPriority={renderPriority}>
-		<GizmoContext.Provider value={context}>
+		<GizmoContext value={context}>
 			<OrthographicCamera makeDefault ref={virtualCamera} position={[0, 0, 200]} />
 			<group ref={gizmo} position={[x, y, 0]}>{children}</group>
-		</GizmoContext.Provider>
+		</GizmoContext>
 	</Hud>
 }

package/src/core/MarchingCubes.three.tsrx

@@ -51,7 +51,7 @@ export function MarchingCubes({
 		marchingCubes.reset();
 	}, -1);
 	<primitive object={marchingCubes} ref={mergedRef as any} {...props as any}>
-		<MarchingContext.Provider value={api}>{children}</MarchingContext.Provider>
+		<MarchingContext value={api}>{children}</MarchingContext>
 	</primitive>
 }
 

package/src/core/MotionPathControls.three.tsrx

@@ -129,11 +129,11 @@ export function MotionPathControls({
 		}
 	});
 	<group ref={group as any} {...props}>
-		<MotionContext.Provider value={state}>
+		<MotionContext value={state}>
 			{children}
 			@if (debug) {
 				<Debug color={debugColor} />
 			}
-		</MotionContext.Provider>
+		</MotionContext>
 	</group>
 }

package/src/core/PerformanceMonitor.three.tsrx

@@ -44,7 +44,7 @@ export type PerformanceMonitorProps = {
 	children?: OctaneNode;
 };
 
-const context = createContext<PerformanceMonitorApi>(null!);
+const PerformanceMonitorContext = createContext<PerformanceMonitorApi>(null!);
 
 export function PerformanceMonitor({
 	iterations = 10,
@@ -123,7 +123,7 @@ export function PerformanceMonitor({
 			}
 		}
 	});
-	<context.Provider value={api}>{children}</context.Provider>
+	<PerformanceMonitorContext value={api}>{children}</PerformanceMonitorContext>
 }
 
 export function usePerformanceMonitor({
@@ -132,7 +132,7 @@ export function usePerformanceMonitor({
 	onChange,
 	onFallback,
 }: Partial<PerformanceMonitorHookApi>): void {
-	const api = useContext(context);
+	const api = useContext(PerformanceMonitorContext);
 	const ref = useRef({ onIncline, onDecline, onChange, onFallback });
 	useLayoutEffect(() => {
 		ref.current.onIncline = onIncline;

package/src/core/Points.three.tsrx

@@ -156,7 +156,7 @@ function PointsInstances({
 			<bufferAttribute attach="attributes-color" args={[colors, 3]} usage={THREE.DynamicDrawUsage} />
 			<bufferAttribute attach="attributes-size" args={[sizes, 1]} usage={THREE.DynamicDrawUsage} />
 		</bufferGeometry>
-		<PointsContext.Provider value={api}>{children}</PointsContext.Provider>
+		<PointsContext value={api}>{children}</PointsContext>
 	</points>
 }
 

package/src/core/Segments.three.tsrx

@@ -80,7 +80,7 @@ export function Segments({
 			linewidth={lineWidth}
 			{...rest as any}
 		/>
-		<SegmentsContext.Provider value={api}>{children}</SegmentsContext.Provider>
+		<SegmentsContext value={api}>{children}</SegmentsContext>
 	</primitive>
 }
 

package/src/core/SpotLight.three.tsrx

@@ -343,8 +343,8 @@ export function SpotLight({
 				/>
 			}
 		</spotLight>
-		<SpotLightShadowContext.Provider value={{ spotlightRef: spotlight, debug }}>
+		<SpotLightShadowContext value={{ spotlightRef: spotlight, debug }}>
 			{children}
-		</SpotLightShadowContext.Provider>
+		</SpotLightShadowContext>
 	</group>
 }

package/src/core/SpriteAnimator.three.tsrx

@@ -72,10 +72,10 @@ type SpriteAnimatorState = {
 
 type Scale = Vector3;
 
-const context = createContext<SpriteAnimatorState | null>(null);
+const SpriteAnimatorContext = createContext<SpriteAnimatorState | null>(null);
 
 export function useSpriteAnimator(): SpriteAnimatorState | null {
-	return useContext(context);
+	return useContext(SpriteAnimatorContext);
 }
 
 function isSpriteData(data: SpriteData | null): data is SpriteData {
@@ -317,7 +317,7 @@ export function SpriteAnimator({
 	}
 
 	<group {...props as any} ref={ref} scale={multiplyScale(aspect, props.scale as Scale | undefined)}>
-		<context.Provider value={state}>
+		<SpriteAnimatorContext value={state}>
 			@if (asSprite) {
 				<Billboard>
 					<mesh ref={spriteRef as any} scale={1} geometry={geometry} {...meshProps as any}>
@@ -333,6 +333,6 @@ export function SpriteAnimator({
 				</Instances>
 			}
 			{children}
-		</context.Provider>
+		</SpriteAnimatorContext>
 	</group>
 }

package/src/web/FaceControls.three.tsrx

@@ -151,7 +151,7 @@ export function FaceControls({
 	const faceBlendshapes = result?.faceBlendshapes?.[0];
 	const videoTextureProps = { onVideoFrame, ...videoTexture };
 	const facemeshChildren = facemesh?.children ?? <meshNormalMaterial side={THREE.DoubleSide} />;
-	<FaceControlsContext.Provider value={api}>
+	<FaceControlsContext value={api}>
 		{!manualDetect &&
 			('src' in videoTextureProps
 				? <VideoTexture ref={videoTextureRef} {...videoTextureProps as VideoTextureProps} />
@@ -172,7 +172,7 @@ export function FaceControls({
 			visible={debug}
 			children={facemeshChildren}
 		/>
-	</FaceControlsContext.Provider>
+	</FaceControlsContext>
 }
 
 export const useFaceControls = (): FaceControlsApi => useContext(FaceControlsContext);

package/src/web/FaceLandmarker.three.tsrx

@@ -40,7 +40,7 @@ export function FaceLandmarker({
 		clearResource(keys);
 	}, [faceLandmarker, basePath, serializedOptions]);
 	useImperativeHandle((ref ?? null) as any, () => faceLandmarker, [faceLandmarker]);
-	<FaceLandmarkerContext.Provider value={faceLandmarker}>{children}</FaceLandmarkerContext.Provider>
+	<FaceLandmarkerContext value={faceLandmarker}>{children}</FaceLandmarkerContext>
 }
 
 export function useFaceLandmarker(): FaceLandmarkerImpl | undefined {

package/src/web/KeyboardControls.three.tsrx

@@ -79,7 +79,7 @@ export function KeyboardControls({ map, children, onChange, domElement }: Keyboa
 			source.removeEventListener('keyup', upHandler as EventListener);
 		};
 	}, [domElement, key]);
-	<KeyboardContext.Provider value={api}>{children}</KeyboardContext.Provider>
+	<KeyboardContext value={api}>{children}</KeyboardContext>
 }
 
 type Selector<T extends string = string> = (state: KeyboardControlsState<T>) => boolean;

package/src/web/ScrollControls.three.tsrx

@@ -20,9 +20,9 @@ export type ScrollControlsState = {
 	visible(from: number, distance: number, margin?: number): boolean;
 };
 
-const context = createContext<ScrollControlsState>(null as unknown as ScrollControlsState);
-setScrollControlsStateProvider(context.Provider);
-export function useScroll(): ScrollControlsState { return useContext(context); }
+const ScrollControlsContext = createContext<ScrollControlsState>(null as unknown as ScrollControlsState);
+setScrollControlsStateProvider(ScrollControlsContext);
+export function useScroll(): ScrollControlsState { return useContext(ScrollControlsContext); }
 
 export function ScrollControls({ eps = 0.00001, enabled = true, infinite, horizontal, pages = 1,
 	distance = 1, damping = 0.25, maxSpeed = Infinity, prepend = false, style = {}, children }: ScrollControlsProps) @{
@@ -89,7 +89,7 @@ export function ScrollControls({ eps = 0.00001, enabled = true, infinite, horizo
 
 	let last = 0;
 	useFrame((_, delta) => { last = state.offset; easing.damp(state, 'offset', scroll.current, damping, delta, maxSpeed, undefined, eps); easing.damp(state, 'delta', Math.abs(last - state.offset), damping, delta, maxSpeed, undefined, eps); if (state.delta > eps) invalidate(); });
-	<context.Provider value={state}>{children}</context.Provider>
+	<ScrollControlsContext value={state}>{children}</ScrollControlsContext>
 }
 
 export type ScrollProps = { children?: OctaneNode; html?: false; style?: never } | { children?: OctaneNode; html: true; style?: Partial<CSSStyleDeclaration>; [key: string]: unknown };

package/src/web/Select.three.tsrx

@@ -146,7 +146,7 @@ export function Select({
 		onPointerMissed={onPointerMissed}
 		{...props}
 	>
-		<SelectionContext.Provider value={active}>{children}</SelectionContext.Provider>
+		<SelectionContext value={active}>{children}</SelectionContext>
 	</group>
 }
 

package/src/web/pivotControls/index.three.tsrx

@@ -21,7 +21,7 @@ import { Html } from '@octanejs/drei';
 import { Line } from '../../core/lines.three.tsrx';
 import { calculateScaleFactor } from '../../core/calculateScaleFactor.js';
 import { PivotAnnotation } from './annotation.tsrx';
-import { context, type Limits, type OnDragStartProps, type PivotContext } from './context.js';
+import { context as PivotControlsContext, type Limits, type OnDragStartProps, type PivotContext } from './context.js';
 
 const mL0 = new THREE.Matrix4(), mW0 = new THREE.Matrix4(), mP = new THREE.Matrix4(), mPInv = new THREE.Matrix4();
 const mW = new THREE.Matrix4(), mL = new THREE.Matrix4(), mL0Inv = new THREE.Matrix4(), mdL = new THREE.Matrix4(), mG = new THREE.Matrix4();
@@ -111,7 +111,7 @@ export function calculateOffset(
 }
 
 function AxisArrow({ direction, axis }: { direction: THREE.Vector3; axis: 0 | 1 | 2 }) @{
-	const config = useContext(context), controls = useThree((state) => state.controls) as {
+	const config = useContext(PivotControlsContext), controls = useThree((state) => state.controls) as {
 		enabled: boolean;
 	} | undefined;
 	const divRef = useRef<HTMLDivElement | null>(null), objectRef = useRef<THREE.Group | null>(null);
@@ -250,7 +250,7 @@ function PlaneSlider({
 	dir2: THREE.Vector3;
 	axis: 0 | 1 | 2;
 }) @{
-	const config = useContext(context), controls = useThree((state) => state.controls) as {
+	const config = useContext(PivotControlsContext), controls = useThree((state) => state.controls) as {
 		enabled: boolean;
 	} | undefined;
 	const divRef = useRef<HTMLDivElement | null>(null), objectRef = useRef<THREE.Group | null>(
@@ -422,7 +422,7 @@ function AxisRotator({
 	dir2: THREE.Vector3;
 	axis: 0 | 1 | 2;
 }) @{
-	const config = useContext(context), controls = useThree((state) => state.controls) as {
+	const config = useContext(PivotControlsContext), controls = useThree((state) => state.controls) as {
 		enabled: boolean;
 	} | undefined;
 	const divRef = useRef<HTMLDivElement | null>(null), objectRef = useRef<THREE.Group | null>(
@@ -560,7 +560,7 @@ function AxisRotator({
 }
 
 function ScalingSphere({ direction, axis }: { direction: THREE.Vector3; axis: 0 | 1 | 2 }) @{
-	const config = useContext(context), size = useThree((state) => state.size), controls = useThree(
+	const config = useContext(PivotControlsContext), size = useThree((state) => state.size), controls = useThree(
 		(state) => state.controls,
 	) as { enabled: boolean } | undefined;
 	const divRef = useRef<HTMLDivElement | null>(null), objectRef = useRef<THREE.Group | null>(
@@ -827,7 +827,7 @@ export function PivotControls({
 		}
 	});
 	useImperativeHandle((forwardedRef ?? null) as any, () => ref.current!, []);
-	<context.Provider value={config}>
+	<PivotControlsContext value={config}>
 		<group ref={parentRef}>
 			<group ref={ref} matrix={matrix} matrixAutoUpdate={false} {...props}>
 				<group visible={visible} ref={gizmoRef} position={offset} rotation={rotation}>
@@ -871,7 +871,7 @@ export function PivotControls({
 				<group ref={childrenRef}>{children}</group>
 			</group>
 		</group>
-	</context.Provider>
+	</PivotControlsContext>
 }
 
 export type { OnDragStartProps, PivotContext } from './context.js';

package/src/web/scroll-html-root.tsrx

@@ -4,7 +4,7 @@ import type { ScrollControlsState } from './ScrollControls.three.tsrx';
 
 // The Three context is registered with Octane's renderer bridge, so this DOM-owned
 // root must expose that same provider through the DOM Context call signature.
-const DomThreeContextProvider = threeContext.Provider as unknown as Context<RootStore | null>['Provider'];
+const DomThreeContextProvider = threeContext as unknown as Context<RootStore | null>;
 
 function ScrollHtmlContent({ state, fiberState, children }: {
 	state: ScrollControlsState;