@octane-xplat/camera 0.8.0 → 0.10.0

package/README.md

@@ -0,0 +1,49 @@
+# `@octane-xplat/camera`
+
+```sh
+pnpm add @octane-xplat/camera
+```
+
+Live camera preview for Octane xplat apps: `getUserMedia` video on web,
+`AVCaptureSession` on iOS, CameraX on Android.
+
+```tsx
+import { CameraView } from '@octane-xplat/camera'
+
+export function Preview() {
+	return (
+		<CameraView
+			facing="back"
+			active
+			onReady={() => console.log('Preview running')}
+			onError={(error) => console.log(error.message)}
+		/>
+	)
+}
+```
+
+This is the preview surface only — for one-shot still capture and library
+picking use [`@octane-xplat/media`](../media/README.md). Permissions are
+requested when the session starts; `onError` is how a denial shows up.
+`ref` hands you the platform surface (`HTMLVideoElement` on web) for
+controls the shared props don't cover, and the `ios`/`android`/`web`
+escape props apply after the shared props.
+
+```tsx
+// Preview.web.tsx — browser properties belong in this platform file.
+import { CameraView } from '@octane-xplat/camera'
+
+export function Preview() {
+	return (
+		<CameraView
+			web={{ playsInline: true }}
+			ref={(handle) => console.log(handle.native)}
+			onError={(error) => console.log(error.message)}
+		/>
+	)
+}
+```
+
+Guide: [Building screens](../../docs/app/primitives.md) (leaf components);
+component index: [`docs/app/components.md`](../../docs/app/components.md).
+Exercised by [`CameraDemo`](../demos/src/CameraDemo.tsrx).

package/dist/native/CameraView.android.js

@@ -1,14 +1,15 @@
 import { cameraHardwarePresent, ensureCameraPermission } from "./camera-permission.mobile.js";
 import { applyEscapeProps, layoutChildProps, nativeAccessibilityRole, nativeAccessibilityState } from "./layout-child.js";
 import { cx } from "./cx.mobile.js";
-import { defineUniversalComponent, hookSlots, registerElement, universalPlan, universalProps, universalValue, useCallback, useEffect, useRef } from "@nativescript-community/octane";
+import { defineUniversalComponent, hookSlots, registerElement, universalPlan, universalProps, universalValue, useCallback, useEffect, useImperativeHandle, useRef } from "@nativescript-community/octane";
 import { Application, View } from "@nativescript/core";
 //#region src/CameraView.android.tsrx
-var _hs$ = /* @__PURE__ */ hookSlots(4);
+var _hs$ = /* @__PURE__ */ hookSlots(5);
 var _h$0 = /* @__PURE__ */ Symbol(_hs$);
 var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
 var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
 var _h$3 = /* @__PURE__ */ Symbol(_hs$ + 3);
+var _h$4 = /* @__PURE__ */ Symbol(_hs$ + 4);
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "host",
 	"type": "gridlayout",
@@ -34,9 +35,10 @@ var CameraView = defineUniversalComponent("nativescript", function CameraView(pr
 	const host = useRef(null, _h$0);
 	const active = props.active !== false;
 	const facing = props.facing ?? "back";
+	useImperativeHandle(props.ref, () => ({ native: host.current.android }), [], _h$1);
 	const bindHost = useCallback((view) => {
 		host.current = view;
-	}, [], _h$1);
+	}, [], _h$2);
 	useEffect(() => {
 		const nativeView = host.current?.android;
 		if (!nativeView) return;
@@ -87,13 +89,12 @@ var CameraView = defineUniversalComponent("nativescript", function CameraView(pr
 				provider.unbind(preview);
 			} catch {}
 		};
-	}, [active, facing], _h$2);
+	}, [active, facing], _h$3);
 	useEffect(() => {
 		const view = host.current;
 		if (!view) return;
 		applyEscapeProps(view.android, props);
-		props.bind?.({ native: view.android });
-	}, [props.bind, props.android], _h$3);
+	}, [props.ref, props.android], _h$4);
 	return universalValue(__octaneUniversalPlan0, [universalProps([
 		[
 			"set",
@@ -113,7 +114,7 @@ var CameraView = defineUniversalComponent("nativescript", function CameraView(pr
 		[
 			"set",
 			"className",
-			cx("vx-stack", "vx-cameraview", props.className)
+			cx("vx-layers", "vx-cameraview", props.className)
 		],
 		[
 			"set",

package/dist/native/CameraView.ios.js

@@ -2,13 +2,14 @@ import { cameraHardwarePresent, ensureCameraPermission } from "./camera-permissi
 import { startCameraPreview } from "./camera-session.ios.js";
 import { applyEscapeProps, layoutChildProps, nativeAccessibilityRole, nativeAccessibilityState } from "./layout-child.js";
 import { cx } from "./cx.mobile.js";
-import { defineUniversalComponent, hookSlots, universalPlan, universalProps, universalValue, useCallback, useEffect, useRef } from "@nativescript-community/octane";
+import { defineUniversalComponent, hookSlots, universalPlan, universalProps, universalValue, useCallback, useEffect, useImperativeHandle, useRef } from "@nativescript-community/octane";
 //#region src/CameraView.ios.tsrx
-var _hs$ = /* @__PURE__ */ hookSlots(4);
+var _hs$ = /* @__PURE__ */ hookSlots(5);
 var _h$0 = /* @__PURE__ */ Symbol(_hs$);
 var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
 var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
 var _h$3 = /* @__PURE__ */ Symbol(_hs$ + 3);
+var _h$4 = /* @__PURE__ */ Symbol(_hs$ + 4);
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "host",
 	"type": "gridlayout",
@@ -18,9 +19,10 @@ var CameraView = defineUniversalComponent("nativescript", function CameraView(pr
 	const host = useRef(null, _h$0);
 	const active = props.active !== false;
 	const facing = props.facing ?? "back";
+	useImperativeHandle(props.ref, () => ({ native: host.current.ios ?? host.current.nativeViewProtected }), [], _h$1);
 	const bindHost = useCallback((view) => {
 		host.current = view;
-	}, [], _h$1);
+	}, [], _h$2);
 	useEffect(() => {
 		const view = host.current;
 		if (!view || !active) return;
@@ -47,13 +49,12 @@ var CameraView = defineUniversalComponent("nativescript", function CameraView(pr
 			disposed = true;
 			stopPreview?.();
 		};
-	}, [active, facing], _h$2);
+	}, [active, facing], _h$3);
 	useEffect(() => {
 		const view = host.current;
 		if (!view) return;
 		applyEscapeProps(view.ios ?? view.nativeViewProtected, props);
-		props.bind?.({ native: view.ios ?? view.nativeViewProtected });
-	}, [props.bind, props.ios], _h$3);
+	}, [props.ref, props.ios], _h$4);
 	return universalValue(__octaneUniversalPlan0, [universalProps([
 		[
 			"set",
@@ -78,7 +79,7 @@ var CameraView = defineUniversalComponent("nativescript", function CameraView(pr
 		[
 			"set",
 			"className",
-			cx("vx-stack", "vx-cameraview", props.className)
+			cx("vx-layers", "vx-cameraview", props.className)
 		],
 		[
 			"set",

package/dist/native/octane-client-build.json

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "buildId": "c93085be-bb7c-4211-99d9-a71af74da15d",
+  "buildId": "fea07a95-22b3-4c09-94ed-4d8a93f4e236",
   "mode": "production",
   "capabilities": {
     "independentHydration": false

package/dist/web/CameraView.web.tsrx.js

@@ -1,12 +1,12 @@
 import { applyEscapeProps, layoutChildProps } from "./layout-child.web.js";
-import { __s, bag15, bag5, child, clone, delegateEvents, evt2e, evt2u, hookSlots, ifBlock, markDangerouslySetInnerHTMLChildren, queueRefAttach, queueRefDetach, setStyleProperty, snapshotSpread, template, useEffect, useRef } from "octane";
+import { __s, bag15, bag5, child, clone, delegateEvents, evt2e, evt2u, hookSlots, ifBlock, markDangerouslySetInnerHTMLChildren, queueRefAttach, queueRefDetach, setStyleProperty, snapshotSpread, template, useEffect, useImperativeHandle, useRef } from "octane";
 import { bindSignalHostPropSources, enableSignalBindings, replaceRef, setAttributeIfChanged } from "octane/internal/client";
 //#region src/CameraView.web.tsrx
 enableSignalBindings(1, true);
 delegateEvents(["playing"]);
 var _t$0 = /* @__PURE__ */ template("<video autoplay=\"\" playsinline=\"\" style=\"display: block; width: 100%; height: 100%; object-fit: cover;\"></video>");
 var _t$1 = /* @__PURE__ */ template("<div><!></div>");
-var _hs$ = /* @__PURE__ */ hookSlots(3);
+var _hs$ = /* @__PURE__ */ hookSlots(5);
 var __event = (__eventArg, readyFired, props) => {
 	if (readyFired.current) return;
 	readyFired.current = true;
@@ -19,18 +19,19 @@ var _rm$1 = [
 ];
 function __then$0(__props, __s, __extra) {
 	const facing = __extra[0];
-	const props = __extra[1];
-	const readyFired = __extra[2];
-	const video = __extra[3];
+	const hostRef = __extra[1];
+	const props = __extra[2];
+	const readyFired = __extra[3];
+	const video = __extra[4];
 	let _b = __s.slots[0];
 	if (_b === void 0) {
 		let _m0, _m1, _m4;
 		const _root = clone(_t$0, void 0, "||");
 		queueRefAttach(__s, _m1 = (element) => {
+			hostRef.current = element;
 			video.current = element;
 			if (!element) return;
 			applyEscapeProps(element, props);
-			props.bind?.({ native: element });
 		}, _m0 = _root);
 		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
 		_m4 = evt2e(_root, "$$playing", __event, readyFired, props);
@@ -39,10 +40,10 @@ function __then$0(__props, __s, __extra) {
 	} else {
 		{
 			const _r = (element) => {
+				hostRef.current = element;
 				video.current = element;
 				if (!element) return;
 				applyEscapeProps(element, props);
-				props.bind?.({ native: element });
 			};
 			if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
 		}
@@ -63,10 +64,11 @@ var _rm$3 = [
 	"m"
 ];
 var CameraView = /* @__PURE__ */ __s(function CameraView(props, __s, __extra) {
-	const video = useRef(null, _hs$ + 0);
+	const hostRef = useRef(null, _hs$ + 0);
+	const video = useRef(null, _hs$ + 1);
 	const facing = props.facing ?? "back";
 	const active = props.active !== false;
-	const readyFired = useRef(false, _hs$ + 1);
+	const readyFired = useRef(false, _hs$ + 2);
 	useEffect(() => {
 		const element = video.current;
 		if (!element || !active) return;
@@ -97,14 +99,15 @@ var CameraView = /* @__PURE__ */ __s(function CameraView(props, __s, __extra) {
 			element.srcObject = null;
 			if (stream) for (const track of stream.getTracks()) track.stop();
 		};
-	}, [active, facing], _hs$ + 2);
+	}, [active, facing], _hs$ + 3);
+	useImperativeHandle(props.ref, () => ({ native: hostRef.current }), void 0, _hs$ + 4);
 	let _b = __s.slots[0];
 	if (_b === void 0) {
 		let _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7, _m8, _m9, _m10, _m11, _m12, _m13, _m14;
 		const _root = clone(_t$1);
 		_m0 = props.id;
 		_m1 = [
-			"vx-stack",
+			"vx-layers",
 			"vx-cameraview",
 			props.className
 		];
@@ -181,7 +184,7 @@ var CameraView = /* @__PURE__ */ __s(function CameraView(props, __s, __extra) {
 				"aria-live",
 				_m11
 			]
-		], "b:83c7570e", true);
+		], "b:25f1aaa9", true);
 		markDangerouslySetInnerHTMLChildren(_root);
 		_m14 = child(_root);
 		_b = bag15(__s, _root, _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7, _m8, _m9, _m10, _m11, _m12, _m13, _m14);
@@ -193,7 +196,7 @@ var CameraView = /* @__PURE__ */ __s(function CameraView(props, __s, __extra) {
 		}
 		{
 			const _v = [
-				"vx-stack",
+				"vx-layers",
 				"vx-cameraview",
 				props.className
 			];
@@ -298,12 +301,13 @@ var CameraView = /* @__PURE__ */ __s(function CameraView(props, __s, __extra) {
 				"aria-live",
 				_b.l
 			]
-		], "b:83c7570e", true);
+		], "b:25f1aaa9", true);
 	}
 	{
 		const __ifCondition = active;
 		ifBlock(__s, 1, _b.m, __ifCondition, __then$0, null, _b.o, __ifCondition ? [
 			facing,
+			hostRef,
 			props,
 			readyFired,
 			video

package/dist/web/octane-client-build.json

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "buildId": "ed138ddb-08ea-4ba2-9a34-4fc0cb7c0dd8",
+  "buildId": "cf0744c7-ee47-4aa9-9731-473938c42593",
   "mode": "production",
   "capabilities": {
     "independentHydration": false

package/package.json

@@ -1,25 +1,25 @@
 {
   "name": "@octane-xplat/camera",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "Live camera preview for Octane xplat — web getUserMedia + native capture (AVCapture / CameraX)",
   "keywords": [
-    "octane",
-    "xplat",
-    "cross-platform",
+    "android",
     "camera",
     "camera-preview",
+    "cross-platform",
+    "ios",
+    "nativescript",
+    "octane",
     "photo",
     "video-capture",
-    "nativescript",
-    "ios",
-    "android",
-    "web"
+    "web",
+    "xplat"
   ],
-  "license": "MIT",
   "homepage": "https://github.com/octane-xplat/octane-xplat/tree/main/packages/camera",
+  "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/octane-xplat/octane-xplat.git",
+    "url": "https://github.com/octane-xplat/octane-xplat",
     "directory": "packages/camera"
   },
   "files": [
@@ -29,12 +29,6 @@
     "platforms"
   ],
   "type": "module",
-  "nativescript": {
-    "platforms": {
-      "ios": "7.0.0",
-      "android": "7.0.0"
-    }
-  },
   "exports": {
     ".": {
       "types": "./types/index.d.ts",
@@ -51,7 +45,7 @@
     "@nativescript/core": "9.1.2",
     "@octanejs/vite-plugin": "0.1.61",
     "octane": "0.6.3",
-    "tsrx-typegen": "0.2.0",
+    "tsrx-typegen": "0.2.2",
     "typescript": "5.9.3",
     "vite": "8.3.0"
   },
@@ -71,6 +65,12 @@
       "optional": true
     }
   },
+  "nativescript": {
+    "platforms": {
+      "ios": "7.0.0",
+      "android": "7.0.0"
+    }
+  },
   "scripts": {
     "build": "vite build && vite build --mode native && pnpm typegen && node ../../scripts/check-native-dist.mjs",
     "typegen": "tsc -p tsconfig.types.json",

package/src/CameraView.android.tsrx

@@ -1,5 +1,5 @@
 /** @jsxImportSource @nativescript-community/octane */
-import { useCallback, useEffect, useRef } from 'octane'
+import { useImperativeHandle, useCallback, useEffect, useRef } from 'octane'
 import { Application, View } from '@nativescript/core'
 import { registerElement } from '@nativescript-community/octane'
 import type { Attributes } from '@nativescript-community/octane/intrinsics'
@@ -28,6 +28,8 @@ export function CameraView(props: CameraViewProps) @{
 	const host = useRef<any>(null)
 	const active = props.active !== false
 	const facing = props.facing ?? 'back'
+	useImperativeHandle(props.ref, () => ({ native: host.current.android }), []);
+
 	const bindHost = useCallback((view: any) => {
 		host.current = view
 	}, [])
@@ -102,14 +104,13 @@ export function CameraView(props: CameraViewProps) @{
 		const view = host.current
 		if (!view) return
 		applyEscapeProps(view.android, props)
-		props.bind?.({ native: view.android })
-	}, [props.bind, props.android])
+	}, [props.ref, props.android])
 
 	<gridlayout
 		id={props.id}
 		rows="*"
 		columns="*"
-		className={cx('vx-stack', 'vx-cameraview', props.className)}
+		className={cx('vx-layers', 'vx-cameraview', props.className)}
 		style={{ backgroundColor: '#000', ...props.style }}
 		{...layoutChildProps(props)}
 		accessible={props.accessible}

package/src/CameraView.ios.tsrx

@@ -1,5 +1,5 @@
 /** @jsxImportSource @nativescript-community/octane */
-import { useCallback, useEffect, useRef } from 'octane'
+import { useImperativeHandle, useCallback, useEffect, useRef } from 'octane'
 import type { CameraViewProps } from './props'
 import { cameraHardwarePresent, ensureCameraPermission } from './camera-permission.mobile'
 import { startCameraPreview } from './camera-session.ios'
@@ -11,6 +11,8 @@ export function CameraView(props: CameraViewProps) @{
 	const host = useRef<any>(null)
 	const active = props.active !== false
 	const facing = props.facing ?? 'back'
+	useImperativeHandle(props.ref, () => ({ native: host.current.ios ?? host.current.nativeViewProtected }), []);
+
 	const bindHost = useCallback((view: any) => {
 		host.current = view
 	}, [])
@@ -51,15 +53,14 @@ export function CameraView(props: CameraViewProps) @{
 		const view = host.current
 		if (!view) return
 		applyEscapeProps(view.ios ?? view.nativeViewProtected, props)
-		props.bind?.({ native: view.ios ?? view.nativeViewProtected })
-	}, [props.bind, props.ios])
+	}, [props.ref, props.ios])
 
 	<gridlayout
 		ref={bindHost}
 		id={props.id}
 		rows="*"
 		columns="*"
-		className={cx('vx-stack', 'vx-cameraview', props.className)}
+		className={cx('vx-layers', 'vx-cameraview', props.className)}
 		style={{ backgroundColor: '#000', ...props.style }}
 		{...layoutChildProps(props)}
 		accessible={props.accessible}

package/src/CameraView.web.tsrx

@@ -1,9 +1,10 @@
-import { useEffect, useRef } from 'octane'
+import { useImperativeHandle, useEffect, useRef } from 'octane'
 import type { CameraViewProps } from './props'
 import { applyEscapeProps, layoutChildProps } from './layout-child.web'
 
 /** Live web preview backed by getUserMedia. */
 export function CameraView(props: CameraViewProps) @{
+	const hostRef = useRef<any>(null);
 	const video = useRef<HTMLVideoElement | null>(null)
 	const facing = props.facing ?? 'back'
 	const active = props.active !== false
@@ -52,9 +53,11 @@ export function CameraView(props: CameraViewProps) @{
 		}
 	}, [active, facing])
 
+	useImperativeHandle(props.ref, () => ({ native: hostRef.current }), undefined);
+
 	<div
 		id={props.id}
-		className={['vx-stack', 'vx-cameraview', props.className]}
+		className={['vx-layers', 'vx-cameraview', props.className]}
 		{...layoutChildProps(props, {
 			position: 'relative',
 			overflow: 'hidden',
@@ -74,10 +77,10 @@ export function CameraView(props: CameraViewProps) @{
 		@if (active) {
 			<video
 				ref={(element: HTMLVideoElement | null) => {
+				hostRef.current = element;
 					video.current = element
 					if (!element) return
 					applyEscapeProps(element, props)
-					props.bind?.({ native: element })
 				}}
 				muted={true}
 				autoplay={true}

package/src/CameraView.windows.ts

@@ -0,0 +1,5 @@
+import type { UniversalComponent } from 'octane/universal'
+import type { CameraViewProps } from './props'
+
+/** TypeScript fallback — no Windows CameraView implementation exists yet. */
+export declare const CameraView: UniversalComponent<CameraViewProps>

package/src/camera-permission.mobile.ts

@@ -3,11 +3,17 @@ import { Application, isAndroid, isIOS } from '@nativescript/core'
 let requestCode = 7719
 
 export function cameraHardwarePresent(): boolean {
-	if (isIOS) {return typeof (globalThis as any).AVCaptureDevice !== 'undefined'}
-	if (!isAndroid) {return false}
+	if (isIOS) {
+		return typeof (globalThis as any).AVCaptureDevice !== 'undefined'
+	}
+
+	if (!isAndroid) {
+		return false
+	}
+
 	try {
 		const context = Application.android?.context ?? Application.android?.startActivity
-  return context?.getPackageManager()?.hasSystemFeature('android.hardware.camera.any') !== false
+		return context?.getPackageManager()?.hasSystemFeature('android.hardware.camera.any') !== false
 	} catch {
 		return true
 	}
@@ -19,8 +25,14 @@ export async function ensureCameraPermission(): Promise<boolean> {
 			const av = (globalThis as any).AVCaptureDevice
 			const mediaType = (globalThis as any).AVMediaTypeVideo ?? 'vide'
 			const status = av?.authorizationStatusForMediaType?.(mediaType)
-			if (status === 3) {return true}
-			if (status === 1 || status === 2) {return false}
+			if (status === 3) {
+				return true
+			}
+
+			if (status === 1 || status === 2) {
+				return false
+			}
+
 			return await new Promise<boolean>((resolve) =>
 				av.requestAccessForMediaTypeCompletionHandler(mediaType, resolve),
 			)
@@ -32,28 +44,27 @@ export async function ensureCameraPermission(): Promise<boolean> {
 			if (
 				activity?.checkSelfPermission?.(permission) ===
 				android.content.pm.PackageManager.PERMISSION_GRANTED
-			) {return true}
+			) {
+				return true
+			}
+
+			if (!activity) {
+				return false
+			}
 
-			if (!activity) {return false}
 			return await new Promise<boolean>((resolve) => {
 				const currentRequest = requestCode++
 				const onResult = (args: any) => {
-					if (args.requestCode !== currentRequest) {return}
-					Application.android.off(
-						Application.android.activityRequestPermissionsEvent,
-						onResult,
-					)
+					if (args.requestCode !== currentRequest) {
+						return
+					}
+
+					Application.android.off(Application.android.activityRequestPermissionsEvent, onResult)
 
-					resolve(
-						args.grantResults?.[0] ===
-							android.content.pm.PackageManager.PERMISSION_GRANTED,
-					)
+					resolve(args.grantResults?.[0] === android.content.pm.PackageManager.PERMISSION_GRANTED)
 				}
 
-				Application.android.on(
-					Application.android.activityRequestPermissionsEvent,
-					onResult,
-				)
+				Application.android.on(Application.android.activityRequestPermissionsEvent, onResult)
 
 				activity.requestPermissions([permission], currentRequest)
 			})

package/src/camera-session.ios.ts

@@ -6,9 +6,10 @@ export function startCameraPreview(
 ): () => void {
 	const av = globalThis as any
 	const mediaType = av.AVMediaTypeVideo ?? 'vide'
-	const desiredPosition = facing === 'front'
-		? av.AVCaptureDevicePositionFront ?? 2
-		: av.AVCaptureDevicePositionBack ?? 1
+	const desiredPosition =
+		facing === 'front'
+			? (av.AVCaptureDevicePositionFront ?? 2)
+			: (av.AVCaptureDevicePositionBack ?? 1)
 
 	const devices = av.AVCaptureDevice.devicesWithMediaType(mediaType)
 	let device: any = null
@@ -20,22 +21,32 @@ export function startCameraPreview(
 		}
 	}
 
-	if (!device) {throw new Error('camera unavailable')}
+	if (!device) {
+		throw new Error('camera unavailable')
+	}
 
 	const session = av.AVCaptureSession.new()
 	const input = av.AVCaptureDeviceInput.deviceInputWithDeviceError(device)
-	if (!input || !session.canAddInput(input)) {throw new Error('camera input unavailable')}
+	if (!input || !session.canAddInput(input)) {
+		throw new Error('camera input unavailable')
+	}
+
 	session.addInput(input)
 	const layer = av.AVCaptureVideoPreviewLayer.layerWithSession(session)
 	layer.videoGravity = 'resizeAspectFill'
 	const connection = layer.connection
 	if (connection) {
 		connection.automaticallyAdjustsVideoMirroring = false
-		if (connection.isVideoMirroringSupported) {connection.isVideoMirrored = facing === 'front'}
+		if (connection.isVideoMirroringSupported) {
+			connection.isVideoMirrored = facing === 'front'
+		}
 	}
 
 	const nativeView = view.ios ?? view.nativeViewProtected
-	if (!nativeView?.layer) {throw new Error('camera preview host unavailable')}
+	if (!nativeView?.layer) {
+		throw new Error('camera preview host unavailable')
+	}
+
 	nativeView.layer.addSublayer(layer)
 	const updateFrame = () => {
 		layer.frame = nativeView.bounds

package/src/layout-child.ts

@@ -17,16 +17,23 @@ export function layoutChildProps(props: CameraViewProps): Record<string, any> {
 		'alignSelf',
 		'order',
 	] as const) {
-		if (props[key] !== undefined) {result[key] = props[key]}
+		if (props[key] !== undefined) {
+			result[key] = props[key]
+		}
 	}
 
 	return result
 }
 
 export function applyEscapeProps(view: any, props: { ios?: any; android?: any }): void {
-	if (!view) {return}
+	if (!view) {
+		return
+	}
+
 	const bag = isIOS ? props.ios : props.android
-	if (bag) {Object.assign(view, bag)}
+	if (bag) {
+		Object.assign(view, bag)
+	}
 }
 
 const nativeRoles: Record<string, string> = {
@@ -51,12 +58,24 @@ export function nativeAccessibilityRole(role?: string): string | undefined {
 	return role ? nativeRoles[role] : undefined
 }
 
-export function nativeAccessibilityState(state?: CameraViewProps['accessibilityState']):
-	| string
-	| undefined {
-	if (state?.disabled) {return 'disabled'}
-	if (state?.selected) {return 'selected'}
-	if (state?.checked === true) {return 'checked'}
-	if (state?.checked === false) {return 'unchecked'}
+export function nativeAccessibilityState(
+	state?: CameraViewProps['accessibilityState'],
+): string | undefined {
+	if (state?.disabled) {
+		return 'disabled'
+	}
+
+	if (state?.selected) {
+		return 'selected'
+	}
+
+	if (state?.checked === true) {
+		return 'checked'
+	}
+
+	if (state?.checked === false) {
+		return 'unchecked'
+	}
+
 	return undefined
 }

package/src/layout-child.web.ts

@@ -14,21 +14,45 @@ export function layoutChildProps(props: CameraViewProps, baseStyle: any = props.
 		style.gridColumn = `span ${props.colSpan}`
 	}
 
-	if (props.left !== undefined) {style.left = props.left}
-	if (props.top !== undefined) {style.top = props.top}
-	if (props.flexGrow !== undefined) {style.flexGrow = props.flexGrow}
-	if (props.flexShrink !== undefined) {style.flexShrink = props.flexShrink}
-	if (props.alignSelf !== undefined) {style.alignSelf = props.alignSelf}
-	if (props.order !== undefined) {style.order = props.order}
+	if (props.left !== undefined) {
+		style.left = props.left
+	}
+
+	if (props.top !== undefined) {
+		style.top = props.top
+	}
+
+	if (props.flexGrow !== undefined) {
+		style.flexGrow = props.flexGrow
+	}
+
+	if (props.flexShrink !== undefined) {
+		style.flexShrink = props.flexShrink
+	}
+
+	if (props.alignSelf !== undefined) {
+		style.alignSelf = props.alignSelf
+	}
+
+	if (props.order !== undefined) {
+		style.order = props.order
+	}
+
 	return { style }
 }
 
 export function applyEscapeProps(element: any, props: { web?: any }): void {
-	if (!element || !props.web) {return}
+	if (!element || !props.web) {
+		return
+	}
+
 	for (const [key, value] of Object.entries(props.web)) {
 		if (key.includes('-')) {
-			if (value == null || value === false) {element.removeAttribute(key)}
-			else {element.setAttribute(key, value === true ? '' : String(value))}
+			if (value == null || value === false) {
+				element.removeAttribute(key)
+			} else {
+				element.setAttribute(key, value === true ? '' : String(value))
+			}
 		} else if (key in element) {
 			try {
 				element[key] = value

package/src/props.ts

@@ -1,3 +1,5 @@
+import type { Octane } from 'octane/jsx-runtime'
+
 export type CameraAccessibilityRole =
 	| 'button'
 	| 'link'
@@ -54,7 +56,7 @@ export interface CameraViewProps {
 	onReady?: () => void
 	onError?: (error: { message?: string }) => void
 	/** Native preview surface for platform-specific controls. */
-	bind?: (handle: CameraViewHandle) => void
+	ref?: Octane.Ref<CameraViewHandle>
 	/** Platform-specific properties applied to the preview surface. */
 	ios?: Record<string, any>
 	android?: Record<string, any>

package/types/props.d.ts

@@ -1,3 +1,4 @@
+import type { Octane } from 'octane/jsx-runtime';
 export type CameraAccessibilityRole = 'button' | 'link' | 'search' | 'image' | 'heading' | 'adjustable' | 'summary' | 'text' | 'none' | 'progressbar' | 'checkbox' | 'switch' | 'radio' | 'spinbutton' | 'tab';
 export interface CameraViewHandle {
     /** The native preview surface (`HTMLVideoElement` on web). */
@@ -39,7 +40,7 @@ export interface CameraViewProps {
         message?: string;
     }) => void;
     /** Native preview surface for platform-specific controls. */
-    bind?: (handle: CameraViewHandle) => void;
+    ref?: Octane.Ref<CameraViewHandle>;
     /** Platform-specific properties applied to the preview surface. */
     ios?: Record<string, any>;
     android?: Record<string, any>;