catalyst-core 0.2.0-beta.2 → 0.3.0-beta.1

package/dist/native/bridge/hooks/useVideoStream.js

@@ -1,6 +1,434 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.useVideoStream=void 0;var _react=require("react");var _NativeBridge=_interopRequireDefault(require("../utils/NativeBridge.js"));var _NativeInterfaces=require("../constants/NativeInterfaces.js");var _useBaseHook=require("../useBaseHook.js");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e};}/* eslint-disable react-compiler/react-compiler, react-hooks/exhaustive-deps */const STREAM_STATE_DEFAULT={zoom:null,minZoom:null,maxZoom:null,torchOn:false,fpsMin:null,fpsMax:null};const useVideoStream=({onQRDetected,webFallback}={})=>{const base=(0,_useBaseHook.useBaseHook)("useVideoStream",{hasWebFallback:true,webFallback});// Native stream state
-const[isStreaming,setIsStreaming]=(0,_react.useState)(false);const[streamState,setStreamState]=(0,_react.useState)(STREAM_STATE_DEFAULT);const onQRDetectedRef=(0,_react.useRef)(onQRDetected);onQRDetectedRef.current=onQRDetected;const viewfinderRef=(0,_react.useRef)(null);// Web fallback stream state — always declared (Rules of Hooks)
-const[isStreamingWeb,setIsStreamingWeb]=(0,_react.useState)(false);const[streamStateWeb,setStreamStateWeb]=(0,_react.useState)(STREAM_STATE_DEFAULT);const mediaStreamRef=(0,_react.useRef)(null);const facingModeRef=(0,_react.useRef)("environment");// Web fallback: stop active stream when webFallbackActive toggles off
-(0,_react.useEffect)(()=>{if(!base.webFallbackActive&&mediaStreamRef.current){mediaStreamRef.current.getTracks().forEach(t=>t.stop());mediaStreamRef.current=null;setIsStreamingWeb(false);setStreamStateWeb(STREAM_STATE_DEFAULT);}},[base.webFallbackActive]);// Web fallback: cleanup on unmount
-(0,_react.useEffect)(()=>{return()=>{if(mediaStreamRef.current){mediaStreamRef.current.getTracks().forEach(t=>t.stop());mediaStreamRef.current=null;}};},[]);const applyTrackConstraints=(0,_react.useCallback)(async constraints=>{const track=mediaStreamRef.current?.getVideoTracks()[0];if(!track)return;try{await track.applyConstraints(constraints);}catch(e){base.setError({message:`applyConstraints failed: ${e.message}`});}},[base]);const webStart=(0,_react.useCallback)(async(options={})=>{if(!window.isSecureContext){base.setError({message:"getUserMedia requires a secure context (HTTPS or localhost)"});return;}if(!navigator.mediaDevices?.getUserMedia){base.setError({message:"getUserMedia is not available in this browser"});return;}try{if(mediaStreamRef.current)return;base.setLoading(true);const constraints={video:{facingMode:{ideal:facingModeRef.current},...(options.fps?{frameRate:{ideal:options.fps}}:{})},audio:false};const stream=await navigator.mediaDevices.getUserMedia(constraints);mediaStreamRef.current=stream;setIsStreamingWeb(true);base.setLoading(false);const track=stream.getVideoTracks()[0];const caps=track?.getCapabilities?.()||{};setStreamStateWeb(prev=>({...prev,minZoom:caps.zoom?.min??null,maxZoom:caps.zoom?.max??null,zoom:caps.zoom?.min??null}));}catch(e){base.setLoading(false);base.setError({message:e.message||"getUserMedia failed"});}},[base]);const webStop=(0,_react.useCallback)(()=>{if(!mediaStreamRef.current)return;mediaStreamRef.current.getTracks().forEach(t=>t.stop());mediaStreamRef.current=null;setIsStreamingWeb(false);setStreamStateWeb(STREAM_STATE_DEFAULT);},[]);const webFlip=(0,_react.useCallback)(async()=>{facingModeRef.current=facingModeRef.current==="environment"?"user":"environment";if(mediaStreamRef.current){webStop();await webStart();}},[webStart,webStop]);const webSendCommand=(0,_react.useCallback)(async(type,value)=>{if(!isStreamingWeb){base.setError({message:`sendCommand('${type}') called but stream is not active`});return;}switch(type){case"zoom":{if(typeof value!=="number"||value<1.0){base.setError({message:`sendCommand zoom: value must be a multiplier >= 1.0, got ${value}`});return;}await applyTrackConstraints({advanced:[{zoom:value}]});setStreamStateWeb(prev=>({...prev,zoom:value}));break;}case"torch":{if(typeof value!=="boolean"){base.setError({message:`sendCommand torch: value must be boolean, got ${value}`});return;}await applyTrackConstraints({advanced:[{torch:value}]});setStreamStateWeb(prev=>({...prev,torchOn:value}));break;}case"fps":{if(typeof value!=="object"||value===null){base.setError({message:`sendCommand fps: value must be { min, max }, got ${value}`});return;}const{min=null,max=null}=value;const frameRate={};if(min!==null)frameRate.min=min;if(max!==null)frameRate.max=max;await applyTrackConstraints({frameRate});setStreamStateWeb(prev=>({...prev,fpsMin:min,fpsMax:max}));break;}default:base.setError({message:`sendCommand: unknown type '${type}'`});}},[isStreamingWeb,applyTrackConstraints,base]);// Native event registration — skipped on web (WebBridge absent or native bridge unavailable)
-(0,_react.useEffect)(()=>{if(typeof window==="undefined"||!window.WebBridge||!_NativeBridge.default.isAvailable())return;window.WebBridge.register(_NativeInterfaces.NATIVE_CALLBACKS.ON_VIDEO_STREAM_READY,()=>{console.log("📹 Video stream ready");setIsStreaming(true);});window.WebBridge.register(_NativeInterfaces.NATIVE_CALLBACKS.ON_VIDEO_STREAM_STOPPED,()=>{console.log("📹 Video stream stopped");setIsStreaming(false);});window.WebBridge.register(_NativeInterfaces.NATIVE_CALLBACKS.ON_QR_DETECTED,data=>{try{const result=typeof data==="string"?JSON.parse(data):data;console.log("📹 QR detected:",result);onQRDetectedRef.current?.(result);}catch(e){base.handleNativeError("Failed to parse QR data");}});window.WebBridge.register(_NativeInterfaces.NATIVE_CALLBACKS.ON_TORCH_CHANGED,data=>{try{const result=typeof data==="string"?JSON.parse(data):data;const enabled=result?.enabled??false;console.log("📹 Torch changed:",enabled);setStreamState(prev=>({...prev,torchOn:enabled}));}catch(e){console.warn("[useVideoStream] Failed to parse ON_TORCH_CHANGED data:",e);}});window.WebBridge.register(_NativeInterfaces.NATIVE_CALLBACKS.ON_ZOOM_CHANGED,data=>{try{const result=typeof data==="string"?JSON.parse(data):data;const zoom=result?.zoomLevel??null;const minZoom=result?.minZoom??null;const maxZoom=result?.maxZoom??null;console.log("📹 Zoom changed:",zoom,`(min=${minZoom} max=${maxZoom})`);setStreamState(prev=>({...prev,zoom,minZoom,maxZoom}));}catch(e){console.warn("[useVideoStream] Failed to parse ON_ZOOM_CHANGED data:",e);}});const handleBeforeUnload=()=>{_NativeBridge.default.videoStream.stop();};window.addEventListener("beforeunload",handleBeforeUnload);return()=>{window.WebBridge.unregister(_NativeInterfaces.NATIVE_CALLBACKS.ON_VIDEO_STREAM_READY);window.WebBridge.unregister(_NativeInterfaces.NATIVE_CALLBACKS.ON_VIDEO_STREAM_STOPPED);window.WebBridge.unregister(_NativeInterfaces.NATIVE_CALLBACKS.ON_QR_DETECTED);window.WebBridge.unregister(_NativeInterfaces.NATIVE_CALLBACKS.ON_TORCH_CHANGED);window.WebBridge.unregister(_NativeInterfaces.NATIVE_CALLBACKS.ON_ZOOM_CHANGED);window.removeEventListener("beforeunload",handleBeforeUnload);_NativeBridge.default.videoStream.stop();};},[base.handleNativeError]);const nativeStart=(0,_react.useCallback)((options={})=>{base.executeOperation(()=>{console.log("[useVideoStream] start() options:",JSON.stringify(options));_NativeBridge.default.videoStream.start(options);},"start video stream");},[base.executeOperation]);const nativeStop=(0,_react.useCallback)(()=>{console.log("[useVideoStream] stop()");_NativeBridge.default.videoStream.stop();setIsStreaming(false);},[]);const nativeFlip=(0,_react.useCallback)(()=>{console.log("[useVideoStream] flip()");_NativeBridge.default.videoStream.flip();},[]);const nativeSendCommand=(0,_react.useCallback)((type,value)=>{if(!isStreaming){base.setError({message:`sendCommand('${type}') called but stream is not active`});return;}console.log(`[useVideoStream] sendCommand(${type}, ${value})`);switch(type){case"zoom":{if(typeof value!=="number"||value<1.0){base.setError({message:`sendCommand zoom: value must be a multiplier >= 1.0 (e.g. 1.0=1x, 2.0=2x), got ${value}`});return;}_NativeBridge.default.videoStream.setZoom(value);break;}case"torch":{if(typeof value!=="boolean"){base.setError({message:`sendCommand torch: value must be boolean, got ${value}`});return;}_NativeBridge.default.videoStream.setTorch(value);break;}case"fps":{if(typeof value!=="object"||value===null){base.setError({message:`sendCommand fps: value must be { min, max }, got ${value}`});return;}const{min=null,max=null}=value;if(min!==null&&(typeof min!=="number"||min<1)){base.setError({message:`sendCommand fps: min must be a positive number, got ${min}`});return;}if(max!==null&&(typeof max!=="number"||max<1)){base.setError({message:`sendCommand fps: max must be a positive number, got ${max}`});return;}if(min!==null&&max!==null&&min>max){base.setError({message:`sendCommand fps: min (${min}) must be <= max (${max})`});return;}_NativeBridge.default.videoStream.setFps(min,max);setStreamState(prev=>({...prev,fpsMin:min,fpsMax:max}));break;}default:base.setError({message:`sendCommand: unknown type '${type}'`});}},[isStreaming,base.setError]);if(typeof window==="undefined"){return{isStreaming:false,streamState:STREAM_STATE_DEFAULT,error:null,isNative:false,webFallbackActive:false,webFallbackDisabled:false,setWebFallback:()=>{},start:()=>{},stop:()=>{},sendCommand:()=>{},flip:()=>{},clearError:()=>{}};}if(base.webFallbackDisabled){return{isStreaming:false,streamState:STREAM_STATE_DEFAULT,error:null,isNative:false,webFallbackActive:false,webFallbackDisabled:true,setWebFallback:base.setWebFallback,start:()=>{},stop:()=>{},sendCommand:()=>{},flip:()=>{},clearError:()=>{}};}if(base.webFallbackActive){return{isStreaming:isStreamingWeb,streamState:streamStateWeb,error:base.error,isNative:false,webFallbackActive:true,webFallbackDisabled:false,setWebFallback:base.setWebFallback,mediaStream:mediaStreamRef.current,viewfinderRef,start:webStart,stop:webStop,sendCommand:webSendCommand,flip:webFlip,clearError:base.clearError};}return{isStreaming,streamState,error:base.error,isNative:base.isNative,webFallbackActive:false,webFallbackDisabled:false,setWebFallback:base.setWebFallback,viewfinderRef,start:nativeStart,stop:nativeStop,sendCommand:nativeSendCommand,flip:nativeFlip,clearError:base.clearError};};exports.useVideoStream=useVideoStream;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useVideoStream = void 0;
+var _react = require("react");
+var _NativeBridge = _interopRequireDefault(require("../utils/NativeBridge.js"));
+var _NativeInterfaces = require("../constants/NativeInterfaces.js");
+var _useBaseHook = require("../useBaseHook.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/* eslint-disable react-compiler/react-compiler, react-hooks/exhaustive-deps */
+
+const STREAM_STATE_DEFAULT = {
+  zoom: null,
+  minZoom: null,
+  maxZoom: null,
+  torchOn: false,
+  fpsMin: null,
+  fpsMax: null
+};
+const useVideoStream = ({
+  onQRDetected,
+  webFallback
+} = {}) => {
+  const base = (0, _useBaseHook.useBaseHook)("useVideoStream", {
+    hasWebFallback: true,
+    webFallback
+  });
+
+  // Native stream state
+  const [isStreaming, setIsStreaming] = (0, _react.useState)(false);
+  const [streamState, setStreamState] = (0, _react.useState)(STREAM_STATE_DEFAULT);
+  const onQRDetectedRef = (0, _react.useRef)(onQRDetected);
+  onQRDetectedRef.current = onQRDetected;
+  const viewfinderRef = (0, _react.useRef)(null);
+
+  // Web fallback stream state — always declared (Rules of Hooks)
+  const [isStreamingWeb, setIsStreamingWeb] = (0, _react.useState)(false);
+  const [streamStateWeb, setStreamStateWeb] = (0, _react.useState)(STREAM_STATE_DEFAULT);
+  const mediaStreamRef = (0, _react.useRef)(null);
+  const facingModeRef = (0, _react.useRef)("environment");
+
+  // Web fallback: stop active stream when webFallbackActive toggles off
+  (0, _react.useEffect)(() => {
+    if (!base.webFallbackActive && mediaStreamRef.current) {
+      mediaStreamRef.current.getTracks().forEach(t => t.stop());
+      mediaStreamRef.current = null;
+      setIsStreamingWeb(false);
+      setStreamStateWeb(STREAM_STATE_DEFAULT);
+    }
+  }, [base.webFallbackActive]);
+
+  // Web fallback: cleanup on unmount
+  (0, _react.useEffect)(() => {
+    return () => {
+      if (mediaStreamRef.current) {
+        mediaStreamRef.current.getTracks().forEach(t => t.stop());
+        mediaStreamRef.current = null;
+      }
+    };
+  }, []);
+  const applyTrackConstraints = (0, _react.useCallback)(async constraints => {
+    const track = mediaStreamRef.current?.getVideoTracks()[0];
+    if (!track) return;
+    try {
+      await track.applyConstraints(constraints);
+    } catch (e) {
+      base.setError({
+        message: `applyConstraints failed: ${e.message}`
+      });
+    }
+  }, [base]);
+  const webStart = (0, _react.useCallback)(async (options = {}) => {
+    if (!window.isSecureContext) {
+      base.setError({
+        message: "getUserMedia requires a secure context (HTTPS or localhost)"
+      });
+      return;
+    }
+    if (!navigator.mediaDevices?.getUserMedia) {
+      base.setError({
+        message: "getUserMedia is not available in this browser"
+      });
+      return;
+    }
+    try {
+      if (mediaStreamRef.current) return;
+      base.setLoading(true);
+      const constraints = {
+        video: {
+          facingMode: {
+            ideal: facingModeRef.current
+          },
+          ...(options.fps ? {
+            frameRate: {
+              ideal: options.fps
+            }
+          } : {})
+        },
+        audio: false
+      };
+      const stream = await navigator.mediaDevices.getUserMedia(constraints);
+      mediaStreamRef.current = stream;
+      setIsStreamingWeb(true);
+      base.setLoading(false);
+      const track = stream.getVideoTracks()[0];
+      const caps = track?.getCapabilities?.() || {};
+      setStreamStateWeb(prev => ({
+        ...prev,
+        minZoom: caps.zoom?.min ?? null,
+        maxZoom: caps.zoom?.max ?? null,
+        zoom: caps.zoom?.min ?? null
+      }));
+    } catch (e) {
+      base.setLoading(false);
+      base.setError({
+        message: e.message || "getUserMedia failed"
+      });
+    }
+  }, [base]);
+  const webStop = (0, _react.useCallback)(() => {
+    if (!mediaStreamRef.current) return;
+    mediaStreamRef.current.getTracks().forEach(t => t.stop());
+    mediaStreamRef.current = null;
+    setIsStreamingWeb(false);
+    setStreamStateWeb(STREAM_STATE_DEFAULT);
+  }, []);
+  const webFlip = (0, _react.useCallback)(async () => {
+    facingModeRef.current = facingModeRef.current === "environment" ? "user" : "environment";
+    if (mediaStreamRef.current) {
+      webStop();
+      await webStart();
+    }
+  }, [webStart, webStop]);
+  const webSendCommand = (0, _react.useCallback)(async (type, value) => {
+    if (!isStreamingWeb) {
+      base.setError({
+        message: `sendCommand('${type}') called but stream is not active`
+      });
+      return;
+    }
+    switch (type) {
+      case "zoom":
+        {
+          if (typeof value !== "number" || value < 1.0) {
+            base.setError({
+              message: `sendCommand zoom: value must be a multiplier >= 1.0, got ${value}`
+            });
+            return;
+          }
+          await applyTrackConstraints({
+            advanced: [{
+              zoom: value
+            }]
+          });
+          setStreamStateWeb(prev => ({
+            ...prev,
+            zoom: value
+          }));
+          break;
+        }
+      case "torch":
+        {
+          if (typeof value !== "boolean") {
+            base.setError({
+              message: `sendCommand torch: value must be boolean, got ${value}`
+            });
+            return;
+          }
+          await applyTrackConstraints({
+            advanced: [{
+              torch: value
+            }]
+          });
+          setStreamStateWeb(prev => ({
+            ...prev,
+            torchOn: value
+          }));
+          break;
+        }
+      case "fps":
+        {
+          if (typeof value !== "object" || value === null) {
+            base.setError({
+              message: `sendCommand fps: value must be { min, max }, got ${value}`
+            });
+            return;
+          }
+          const {
+            min = null,
+            max = null
+          } = value;
+          const frameRate = {};
+          if (min !== null) frameRate.min = min;
+          if (max !== null) frameRate.max = max;
+          await applyTrackConstraints({
+            frameRate
+          });
+          setStreamStateWeb(prev => ({
+            ...prev,
+            fpsMin: min,
+            fpsMax: max
+          }));
+          break;
+        }
+      default:
+        base.setError({
+          message: `sendCommand: unknown type '${type}'`
+        });
+    }
+  }, [isStreamingWeb, applyTrackConstraints, base]);
+
+  // Native event registration — skipped on web (WebBridge absent or native bridge unavailable)
+  (0, _react.useEffect)(() => {
+    if (typeof window === "undefined" || !window.WebBridge || !_NativeBridge.default.isAvailable()) return;
+    window.WebBridge.register(_NativeInterfaces.NATIVE_CALLBACKS.ON_VIDEO_STREAM_READY, () => {
+      console.log("📹 Video stream ready");
+      setIsStreaming(true);
+    });
+    window.WebBridge.register(_NativeInterfaces.NATIVE_CALLBACKS.ON_VIDEO_STREAM_STOPPED, () => {
+      console.log("📹 Video stream stopped");
+      setIsStreaming(false);
+    });
+    window.WebBridge.register(_NativeInterfaces.NATIVE_CALLBACKS.ON_QR_DETECTED, data => {
+      try {
+        const result = typeof data === "string" ? JSON.parse(data) : data;
+        console.log("📹 QR detected:", result);
+        onQRDetectedRef.current?.(result);
+      } catch (e) {
+        base.handleNativeError("Failed to parse QR data");
+      }
+    });
+    window.WebBridge.register(_NativeInterfaces.NATIVE_CALLBACKS.ON_TORCH_CHANGED, data => {
+      try {
+        const result = typeof data === "string" ? JSON.parse(data) : data;
+        const enabled = result?.enabled ?? false;
+        console.log("📹 Torch changed:", enabled);
+        setStreamState(prev => ({
+          ...prev,
+          torchOn: enabled
+        }));
+      } catch (e) {
+        console.warn("[useVideoStream] Failed to parse ON_TORCH_CHANGED data:", e);
+      }
+    });
+    window.WebBridge.register(_NativeInterfaces.NATIVE_CALLBACKS.ON_ZOOM_CHANGED, data => {
+      try {
+        const result = typeof data === "string" ? JSON.parse(data) : data;
+        const zoom = result?.zoomLevel ?? null;
+        const minZoom = result?.minZoom ?? null;
+        const maxZoom = result?.maxZoom ?? null;
+        console.log("📹 Zoom changed:", zoom, `(min=${minZoom} max=${maxZoom})`);
+        setStreamState(prev => ({
+          ...prev,
+          zoom,
+          minZoom,
+          maxZoom
+        }));
+      } catch (e) {
+        console.warn("[useVideoStream] Failed to parse ON_ZOOM_CHANGED data:", e);
+      }
+    });
+    const handleBeforeUnload = () => {
+      _NativeBridge.default.videoStream.stop();
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => {
+      window.WebBridge.unregister(_NativeInterfaces.NATIVE_CALLBACKS.ON_VIDEO_STREAM_READY);
+      window.WebBridge.unregister(_NativeInterfaces.NATIVE_CALLBACKS.ON_VIDEO_STREAM_STOPPED);
+      window.WebBridge.unregister(_NativeInterfaces.NATIVE_CALLBACKS.ON_QR_DETECTED);
+      window.WebBridge.unregister(_NativeInterfaces.NATIVE_CALLBACKS.ON_TORCH_CHANGED);
+      window.WebBridge.unregister(_NativeInterfaces.NATIVE_CALLBACKS.ON_ZOOM_CHANGED);
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+      _NativeBridge.default.videoStream.stop();
+    };
+  }, [base.handleNativeError]);
+  const nativeStart = (0, _react.useCallback)((options = {}) => {
+    base.executeOperation(() => {
+      console.log("[useVideoStream] start() options:", JSON.stringify(options));
+      _NativeBridge.default.videoStream.start(options);
+    }, "start video stream");
+  }, [base.executeOperation]);
+  const nativeStop = (0, _react.useCallback)(() => {
+    console.log("[useVideoStream] stop()");
+    _NativeBridge.default.videoStream.stop();
+    setIsStreaming(false);
+  }, []);
+  const nativeFlip = (0, _react.useCallback)(() => {
+    console.log("[useVideoStream] flip()");
+    _NativeBridge.default.videoStream.flip();
+  }, []);
+  const nativeSendCommand = (0, _react.useCallback)((type, value) => {
+    if (!isStreaming) {
+      base.setError({
+        message: `sendCommand('${type}') called but stream is not active`
+      });
+      return;
+    }
+    console.log(`[useVideoStream] sendCommand(${type}, ${value})`);
+    switch (type) {
+      case "zoom":
+        {
+          if (typeof value !== "number" || value < 1.0) {
+            base.setError({
+              message: `sendCommand zoom: value must be a multiplier >= 1.0 (e.g. 1.0=1x, 2.0=2x), got ${value}`
+            });
+            return;
+          }
+          _NativeBridge.default.videoStream.setZoom(value);
+          break;
+        }
+      case "torch":
+        {
+          if (typeof value !== "boolean") {
+            base.setError({
+              message: `sendCommand torch: value must be boolean, got ${value}`
+            });
+            return;
+          }
+          _NativeBridge.default.videoStream.setTorch(value);
+          break;
+        }
+      case "fps":
+        {
+          if (typeof value !== "object" || value === null) {
+            base.setError({
+              message: `sendCommand fps: value must be { min, max }, got ${value}`
+            });
+            return;
+          }
+          const {
+            min = null,
+            max = null
+          } = value;
+          if (min !== null && (typeof min !== "number" || min < 1)) {
+            base.setError({
+              message: `sendCommand fps: min must be a positive number, got ${min}`
+            });
+            return;
+          }
+          if (max !== null && (typeof max !== "number" || max < 1)) {
+            base.setError({
+              message: `sendCommand fps: max must be a positive number, got ${max}`
+            });
+            return;
+          }
+          if (min !== null && max !== null && min > max) {
+            base.setError({
+              message: `sendCommand fps: min (${min}) must be <= max (${max})`
+            });
+            return;
+          }
+          _NativeBridge.default.videoStream.setFps(min, max);
+          setStreamState(prev => ({
+            ...prev,
+            fpsMin: min,
+            fpsMax: max
+          }));
+          break;
+        }
+      default:
+        base.setError({
+          message: `sendCommand: unknown type '${type}'`
+        });
+    }
+  }, [isStreaming, base.setError]);
+  if (typeof window === "undefined") {
+    return {
+      isStreaming: false,
+      streamState: STREAM_STATE_DEFAULT,
+      error: null,
+      isNative: false,
+      webFallbackActive: false,
+      webFallbackDisabled: false,
+      setWebFallback: () => {},
+      start: () => {},
+      stop: () => {},
+      sendCommand: () => {},
+      flip: () => {},
+      clearError: () => {}
+    };
+  }
+  if (base.webFallbackDisabled) {
+    return {
+      isStreaming: false,
+      streamState: STREAM_STATE_DEFAULT,
+      error: null,
+      isNative: false,
+      webFallbackActive: false,
+      webFallbackDisabled: true,
+      setWebFallback: base.setWebFallback,
+      start: () => {},
+      stop: () => {},
+      sendCommand: () => {},
+      flip: () => {},
+      clearError: () => {}
+    };
+  }
+  if (base.webFallbackActive) {
+    return {
+      isStreaming: isStreamingWeb,
+      streamState: streamStateWeb,
+      error: base.error,
+      isNative: false,
+      webFallbackActive: true,
+      webFallbackDisabled: false,
+      setWebFallback: base.setWebFallback,
+      mediaStream: mediaStreamRef.current,
+      viewfinderRef,
+      start: webStart,
+      stop: webStop,
+      sendCommand: webSendCommand,
+      flip: webFlip,
+      clearError: base.clearError
+    };
+  }
+  return {
+    isStreaming,
+    streamState,
+    error: base.error,
+    isNative: base.isNative,
+    webFallbackActive: false,
+    webFallbackDisabled: false,
+    setWebFallback: base.setWebFallback,
+    viewfinderRef,
+    start: nativeStart,
+    stop: nativeStop,
+    sendCommand: nativeSendCommand,
+    flip: nativeFlip,
+    clearError: base.clearError
+  };
+};
+exports.useVideoStream = useVideoStream;

package/dist/native/bridge/hooks/utils.js

@@ -1 +1,27 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.registerNativeHandlers=exports.parseNativePayload=exports.noop=exports.createSSRUnavailable=void 0;/* eslint-disable react-compiler/react-compiler, react-hooks/exhaustive-deps */const noop=()=>{};exports.noop=noop;const createSSRUnavailable=methodName=>async()=>{throw new Error(`${methodName} is not available in SSR environment`);};exports.createSSRUnavailable=createSSRUnavailable;const parseNativePayload=payload=>{if(payload==null)return null;if(typeof payload!=="string")return payload;return JSON.parse(payload);};exports.parseNativePayload=parseNativePayload;const registerNativeHandlers=handlers=>{handlers.forEach(([event,handler])=>window.WebBridge.register(event,handler));return()=>{handlers.forEach(([event])=>window.WebBridge.unregister(event));};};exports.registerNativeHandlers=registerNativeHandlers;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.registerNativeHandlers = exports.parseNativePayload = exports.noop = exports.createSSRUnavailable = void 0;
+/* eslint-disable react-compiler/react-compiler, react-hooks/exhaustive-deps */
+
+const noop = () => {};
+exports.noop = noop;
+const createSSRUnavailable = methodName => async () => {
+  throw new Error(`${methodName} is not available in SSR environment`);
+};
+exports.createSSRUnavailable = createSSRUnavailable;
+const parseNativePayload = payload => {
+  if (payload == null) return null;
+  if (typeof payload !== "string") return payload;
+  return JSON.parse(payload);
+};
+exports.parseNativePayload = parseNativePayload;
+const registerNativeHandlers = handlers => {
+  handlers.forEach(([event, handler]) => window.WebBridge.register(event, handler));
+  return () => {
+    handlers.forEach(([event]) => window.WebBridge.unregister(event));
+  };
+};
+exports.registerNativeHandlers = registerNativeHandlers;

package/dist/native/bridge/hooks.js

@@ -1 +1,16 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:true});var _index=require("./hooks/index.js");Object.keys(_index).forEach(function(key){if(key==="default"||key==="__esModule")return;if(key in exports&&exports[key]===_index[key])return;Object.defineProperty(exports,key,{enumerable:true,get:function(){return _index[key];}});});
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _index = require("./hooks/index.js");
+Object.keys(_index).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _index[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _index[key];
+    }
+  });
+});

package/dist/native/bridge/perf/collectors/ApiCollector.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ApiCollector = void 0;
+var _constants = require("../core/constants.js");
+/**
+ * ApiCollector.js
+ *
+ * Instruments native API call timing — how long each @JavascriptInterface
+ * method takes from native receipt until its immediate native handler work is
+ * dispatched. It does not measure JS-to-native transport, JS callback delivery,
+ * or UI completion.
+ *
+ * Native events received (via __catalystPerfBatch drain):
+ *   api-call { callId, method, nativeStartMs, nativeEndMs, durationMs, thread }
+ *
+ * Spans emitted (one per call, on Catalyst > Native API track):
+ *   catalyst:api/<method>  — nativeStart → nativeEnd
+ *                            color: primary-dark (<50ms), secondary (<200ms), error (>200ms)
+ *   properties: method, durationMs, callId, thread, simulatorValid: false
+ *
+ * Reading the track:
+ *   Blue  = fast native call (<50ms)   — expected for sync APIs (getDeviceInfo, haptic)
+ *   Grey  = medium native call (<200ms) — native work worth inspecting
+ *   Red   = slow native call (>200ms)  — native work worth inspecting
+ */
+
+class ApiCollector {
+  constructor(measure, nativeToWeb) {
+    this._measure = measure;
+    this._nativeToWeb = nativeToWeb;
+  }
+  init() {
+    // No web-side observers — all events come from native buffer drain
+  }
+
+  /** Called by index.js to feed the normalized perf store. */
+  setWaterfallSource(fn) {
+    this._notifyWaterfall = fn;
+  }
+  setInteractionSource(fn) {
+    this._getInteraction = fn;
+  }
+  onBatchEvent(event) {
+    if (event.type !== "api-call") return;
+    const {
+      method,
+      callId,
+      nativeStartMs,
+      nativeEndMs,
+      durationMs,
+      thread
+    } = event;
+    const startTime = this._nativeToWeb(nativeStartMs);
+    const endTime = this._nativeToWeb(nativeEndMs);
+    const interactionId = this._getInteraction?.()?.interactionIdForRange(startTime, endTime) ?? null;
+    const color = durationMs > 200 ? _constants.COLOR.ERROR : durationMs > 50 ? _constants.COLOR.SECONDARY : _constants.COLOR.PRIMARY_DARK;
+    const startMark = `${_constants.PREFIX.NATIVE_API}:${method}:start:${Math.round(startTime)}`;
+    performance.mark(startMark, {
+      startTime
+    });
+    this._notifyWaterfall?.({
+      method,
+      durationMs,
+      callId,
+      thread: thread ?? null,
+      startTime,
+      endTime,
+      sessionId: interactionId,
+      parentOperation: `Native execution: ${method}`
+    });
+    this._measure.emit(`${interactionId ? `[${interactionId}] ` : ""}Native API: ${method} - ${durationMs}ms`, startMark, endTime, {
+      interactionId,
+      parentOperation: `Native execution: ${method}`,
+      method,
+      durationMs,
+      callId,
+      thread: thread ?? null,
+      simulatorValid: false
+    }, _constants.TRACK.NATIVE_API, color);
+  }
+}
+exports.ApiCollector = ApiCollector;