@octanejs/three 0.1.2 → 0.1.4

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@octanejs/three",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "license": "MIT",
   "type": "module",
+  "sideEffects": false,
   "engines": {
     "node": ">=22"
   },
@@ -50,7 +51,7 @@
   "peerDependencies": {
     "@types/three": ">=0.156.0",
     "three": ">=0.156.0",
-    "octane": "0.1.9"
+    "octane": "0.1.11"
   },
   "peerDependenciesMeta": {
     "@types/three": {
@@ -61,7 +62,7 @@
     "@react-three/fiber": "9.6.1",
     "@rsbuild/core": "^2.1.5",
     "@rspack/core": "^2.1.3",
-    "@tsrx/react": "^0.2.37",
+    "@tsrx/react": "^0.2.44",
     "@types/three": "0.172.0",
     "esbuild": "^0.28.1",
     "playwright": "^1.61.0",
@@ -71,10 +72,10 @@
     "typescript": "^5.9.3",
     "vite": "^8.0.16",
     "vitest": "^4.1.9",
-    "@octanejs/rsbuild-plugin": "0.1.4",
-    "@octanejs/rspack-plugin": "0.1.4",
-    "@octanejs/vite-plugin": "0.1.9",
-    "octane": "0.1.9"
+    "@octanejs/rsbuild-plugin": "0.1.6",
+    "@octanejs/rspack-plugin": "0.1.6",
+    "@octanejs/vite-plugin": "0.1.11",
+    "octane": "0.1.11"
   },
   "scripts": {
     "test": "pnpm upstream:check && vitest run --root ../.. --project three",

package/src/core/root.ts

@@ -15,6 +15,7 @@ import {
 	type UniversalComponent,
 	type UniversalRoot,
 } from 'octane/universal';
+import type { ThreeElement } from './catalogue.js';
 import { applyThreeProps } from './props.js';
 import {
 	createThreeContainer,
@@ -62,9 +63,20 @@ export type GLProps<TCanvas extends CanvasLike = CanvasLike> =
 	| ((defaults: DefaultGLProps<TCanvas>) => Renderer | Promise<Renderer>)
 	| (Partial<THREE.WebGLRendererParameters> & Record<string, unknown>);
 
-export type CameraProps =
+// R3F-shaped (fiber v9 renderer.ts): declarative camera options accept the
+// element-prop forms — math shorthands like `position: [x, y, z]` included —
+// not only fully-constructed THREE property values.
+export type CameraProps = (
 	| Camera
-	| (Partial<THREE.PerspectiveCamera & THREE.OrthographicCamera> & { manual?: boolean });
+	| Partial<
+			ThreeElement<typeof THREE.Camera> &
+				ThreeElement<typeof THREE.PerspectiveCamera> &
+				ThreeElement<typeof THREE.OrthographicCamera>
+	  >
+) & {
+	/** Flags the camera as manual, putting projection into your own hands. */
+	manual?: boolean;
+};
 
 export interface RenderProps<TCanvas extends CanvasLike = CanvasLike> {
 	gl?: GLProps<TCanvas>;

package/src/web/Canvas.tsrx

@@ -1,4 +1,5 @@
 import { useInsertionEffect, useLayoutEffect, useRef, useState } from 'octane';
+import type { OctaneNode } from 'octane';
 import { createUniversalHostBoundary } from 'octane/universal';
 import type { RendererRegion } from 'octane/universal';
 import type { ComputeFunction, DomEvent } from '../core/events.js';
@@ -27,8 +28,12 @@ export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'size'
 	string,
 	unknown
 > {
-	/** Compiler-owned Three renderer region. Application JSX is lowered into this payload. */
-	children?: RendererRegion;
+	/**
+ * Authored Three-scene JSX. The compiler lowers the authored children into a
+ * `RendererRegion` payload at the boundary, so the runtime only ever sees the
+ * region form; `OctaneNode` keeps the authoring side type-checkable.
+ */
+	children?: RendererRegion | OctaneNode;
 	/** Fallback content rendered as native canvas fallback DOM. */
 	fallback?: unknown;
 	/** DOM measurement options compatible with the R3F Canvas surface. */
@@ -118,7 +123,7 @@ function bindCanvasEvents(
 
 /** A measured DOM canvas whose authored children execute in the Three renderer. */
 export function Canvas({
-	ref,
+	ref = null,
 	children,
 	fallback,
 	resize,
@@ -220,8 +225,10 @@ export function Canvas({
 			raycaster,
 			camera,
 			scene,
-			onPointerMissed: pointerMissedHandlerRef.current,
-			onCreated: createdHandlerRef.current,
+			// Both handlers were lazily created during render; the `| null` only
+			// survives because TS cannot carry the narrowing into this closure.
+			onPointerMissed: pointerMissedHandlerRef.current ?? undefined,
+			onCreated: createdHandlerRef.current ?? undefined,
 			size,
 		}).then(() => {
 			if (cancelled) return;
@@ -268,7 +275,9 @@ export function Canvas({
 			? null
 			: {
 					...boundaryMount,
-					props: { ...boundaryMount.props, region: children },
+					// By this point the compiler has lowered the authored JSX children
+					// into the boundary's region payload.
+					props: { ...boundaryMount.props, region: children as RendererRegion | undefined },
 				};
 
 	const wrapperStyle: CanvasStyle = {

package/src/web/Canvas.tsrx.d.ts

@@ -1,3 +1,4 @@
+import type { OctaneNode } from 'octane';
 import type { RendererRegion } from 'octane/universal';
 import type { RenderProps } from '../core/root.js';
 import type { ResizeOptions } from './measure.js';
@@ -11,7 +12,7 @@ export type CanvasRef =
 
 export interface CanvasProps
 	extends Omit<RenderProps<HTMLCanvasElement>, 'size'>, Record<string, unknown> {
-	children?: RendererRegion;
+	children?: RendererRegion | OctaneNode;
 	fallback?: unknown;
 	resize?: ResizeOptions;
 	eventSource?: HTMLElement | { current: HTMLElement | null };