refactor: convert React Native packages to stubs and fix remaining build issues

- Convert @vjs-10/react-native packages to placeholder stubs for future implementation
- Move Video.tsx from @vjs-10/react-media-elements to @vjs-10/react package
- Fix React JSX compilation errors by changing jsx config from react-jsx to react
- Add React imports to all TSX files to resolve UMD global errors
- Remove React Native specific dependencies from package.json files
- Refactor @vjs-10/react-media-elements to export VideoElement/AudioElement with placeholders
- All packages now build successfully with monorepo architecture intact

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

packages/react-native/react-native-media-elements/src/index.tsx

@@ -1,7 +1,7 @@
-import React, { useRef, useImperativeHandle, forwardRef } from 'react';
-import { StyleSheet, ViewStyle } from 'react-native';
-import Video, { VideoRef, OnLoadData, OnProgressData } from 'react-native-video';
-import { MediaReadyState, MediaNetworkState, READY_STATE, NETWORK_STATE } from '@vjs-10/media';
+import * as React from 'react';
+
+// Placeholder exports for React Native Media Elements package
+// These will be implemented in a future step
 
 export interface MediaElementProps {
   source?: { uri: string };
@@ -12,11 +12,11 @@ export interface MediaElementProps {
   rate?: number;
   repeat?: boolean;
   resizeMode?: 'contain' | 'cover' | 'stretch';
-  onLoad?: (data: OnLoadData) => void;
-  onProgress?: (data: OnProgressData) => void;
+  onLoad?: (data: any) => void;
+  onProgress?: (data: any) => void;
   onEnd?: () => void;
   onError?: (error: any) => void;
-  style?: ViewStyle;
+  style?: any; // React Native ViewStyle
 }
 
 export interface MediaElementRef {
@@ -27,8 +27,8 @@ export interface MediaElementRef {
   volume: number;
   muted: boolean;
   playbackRate: number;
-  readyState: MediaReadyState;
-  networkState: MediaNetworkState;
+  readyState: number;
+  networkState: number;
   
   play(): Promise<void>;
   pause(): void;
@@ -36,146 +36,11 @@ export interface MediaElementRef {
   seek(time: number): void;
 }
 
-export const VideoElement = forwardRef<MediaElementRef, MediaElementProps>(
-  ({
-    source,
-    controls = false,
-    paused = true,
-    muted = false,
-    volume = 1.0,
-    rate = 1.0,
-    repeat = false,
-    resizeMode = 'contain',
-    onLoad,
-    onProgress,
-    onEnd,
-    onError,
-    style,
-  }, ref) => {
-    const videoRef = useRef<VideoRef>(null);
-    const stateRef = useRef({
-      currentTime: 0,
-      duration: 0,
-      paused: true,
-      ended: false,
-      volume: 1.0,
-      muted: false,
-      playbackRate: 1.0,
-      readyState: READY_STATE.HAVE_NOTHING,
-      networkState: NETWORK_STATE.EMPTY,
-    });
-
-    const handleLoad = (data: OnLoadData) => {
-      stateRef.current.duration = data.duration;
-      stateRef.current.readyState = READY_STATE.HAVE_METADATA;
-      stateRef.current.networkState = NETWORK_STATE.IDLE;
-      onLoad?.(data);
-    };
-
-    const handleProgress = (data: OnProgressData) => {
-      stateRef.current.currentTime = data.currentTime;
-      onProgress?.(data);
-    };
-
-    const handleEnd = () => {
-      stateRef.current.ended = true;
-      stateRef.current.paused = true;
-      onEnd?.();
-    };
-
-    const handleError = (error: any) => {
-      stateRef.current.networkState = NETWORK_STATE.NO_SOURCE;
-      onError?.(error);
-    };
-
-    useImperativeHandle(ref, () => ({
-      get currentTime() {
-        return stateRef.current.currentTime;
-      },
-      get duration() {
-        return stateRef.current.duration;
-      },
-      get paused() {
-        return stateRef.current.paused;
-      },
-      get ended() {
-        return stateRef.current.ended;
-      },
-      get volume() {
-        return stateRef.current.volume;
-      },
-      get muted() {
-        return stateRef.current.muted;
-      },
-      get playbackRate() {
-        return stateRef.current.playbackRate;
-      },
-      get readyState() {
-        return stateRef.current.readyState;
-      },
-      get networkState() {
-        return stateRef.current.networkState;
-      },
-      play: async () => {
-        stateRef.current.paused = false;
-        stateRef.current.ended = false;
-      },
-      pause: () => {
-        stateRef.current.paused = true;
-      },
-      load: () => {
-        stateRef.current.networkState = NETWORK_STATE.LOADING;
-      },
-      seek: (time: number) => {
-        videoRef.current?.seek(time);
-        stateRef.current.currentTime = time;
-      },
-    }), []);
-
-    React.useEffect(() => {
-      stateRef.current.paused = paused;
-    }, [paused]);
-
-    React.useEffect(() => {
-      stateRef.current.volume = volume;
-    }, [volume]);
-
-    React.useEffect(() => {
-      stateRef.current.muted = muted;
-    }, [muted]);
-
-    React.useEffect(() => {
-      stateRef.current.playbackRate = rate;
-    }, [rate]);
-
-    return (
-      <Video
-        ref={videoRef}
-        source={source}
-        controls={controls}
-        paused={paused}
-        muted={muted}
-        volume={volume}
-        rate={rate}
-        repeat={repeat}
-        resizeMode={resizeMode}
-        onLoad={handleLoad}
-        onProgress={handleProgress}
-        onEnd={handleEnd}
-        onError={handleError}
-        style={[styles.video, style]}
-      />
-    );
+// Placeholder component - will be implemented later
+export const VideoElement = React.forwardRef<MediaElementRef, MediaElementProps>(
+  (_, __) => {
+    return React.createElement('div', { children: 'React Native VideoElement - Coming Soon' });
   }
 );
 
-VideoElement.displayName = 'VideoElement';
-
-const styles = StyleSheet.create({
-  video: {
-    width: '100%',
-    height: 200,
-  },
-});
-
-export { MediaReadyState, MediaNetworkState, READY_STATE, NETWORK_STATE } from '@vjs-10/media';
+VideoElement.displayName = 'VideoElement';