feat(monorepo): migrate prototype code to organized package structure

Migrate all prototype code from vjs10-prototype repository into the
monorepo structure following established dependency hierarchy and
package organization patterns.

Core packages migrated:
- @vjs-10/media-store: Complete media store with nanostores integration
- @vjs-10/playback-engine: HLS.js playback engine implementation
- @vjs-10/media: Core media state owner and interfaces

HTML packages migrated:
- @vjs-10/html-icons: Web component icons with proper base classes
- @vjs-10/html-media-elements: Context provider integration
- @vjs-10/html: Main HTML UI components, skins, and utilities

React packages migrated:
- @vjs-10/react-icons: React icon components
- @vjs-10/react-media-elements: Video component with state integration
- @vjs-10/react-media-store: MediaProvider and React hooks
- @vjs-10/react: Main React UI components and skins

Changes made:
- Updated all imports to use monorepo package names (@vjs-10/*)
- Distributed dependencies to specific packages that use them
- Preserved all prototype functionality and component structure
- Created proper index files for all packages
- Fixed workspace protocol usage for npm compatibility

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

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

packages/react/react-media-elements/src/Video.tsx

@@ -0,0 +1,86 @@
+// NOTE: This is just a thin wrapper around the "skeletal" connected component that also applies a default (but overridable) definition of the
+// "BaseComponent" that defines the actual UI.
+// NOTE: Definitions like this should be able to be autogenerated via codegen, defined via a factory function (HoC or higher order component), or both.
+// import BaseComponent from '../ui/PlayerUI';
+import {
+  DetailedHTMLProps,
+  ElementType,
+  Ref,
+  useImperativeHandle,
+  useRef,
+  VideoHTMLAttributes,
+} from 'react';
+/** @TODO Improve types crud (CJP) */
+import ConnectedComponent from '../connected/Video';
+import { createMediaStateOwner } from '@vjs-10/media';
+
+// These are the first steps/WIP POC of decoupling the Media State Owner from the DOM.
+// Note that everything will still work if you use:
+// 1. an audio/video element directly
+// 2. a custom element a la media-elements
+type CreateMediaStateOwner = typeof createMediaStateOwner;
+const useMediaStateOwner = (
+  ref: Ref<any>,
+  createMediaStateOwner: CreateMediaStateOwner /*, props? */
+) => {
+  const mediaStateOwnerRef = useRef(createMediaStateOwner(/* props? */));
+  useImperativeHandle(ref, () => mediaStateOwnerRef.current, []);
+  /** @TODO Parameterize this (CJP) */
+  type ComponentProps = DetailedHTMLProps<
+    VideoHTMLAttributes<HTMLVideoElement>,
+    HTMLVideoElement
+  >;
+  return {
+    updateMediaElement(
+      mediaEl: HTMLMediaElement | null,
+      props: ComponentProps
+    ) {
+      // NOTE: The details here will almost definitely change for a less "bare bones"/"POC" implementation of Media State Owner impl. (CJP)
+      mediaStateOwnerRef.current.mediaElement = mediaEl ?? undefined;
+      mediaStateOwnerRef.current.src = props.src as string;
+      if (props.muted) {
+        mediaStateOwnerRef.current.muted = props.muted;
+      }
+    },
+  };
+};
+
+const BaseComponent: ElementType<
+  Omit<
+    DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>,
+    'ref'
+  > & { ref: Ref<any> }
+> = ({ children, ref, ...props }) => {
+  const { updateMediaElement } = useMediaStateOwner(ref, createMediaStateOwner);
+  return (
+    <video {...props} ref={(mediaEl) => {
+        /** @TODO In later iterations/non-POC, we should be able to have a function that can be used directly for the `ref` prop (CJP) */
+        updateMediaElement(mediaEl, props);
+      }}>
+      {children}
+    </video>
+  );
+};
+
+// NOTE: Assuming FC or "functional component" here for type expediency (though may be fine for our use cases).
+type ConnectedComponentProps = Parameters<typeof ConnectedComponent>[0];
+type ConnectedComponentReturnType = ReturnType<typeof ConnectedComponent>;
+type DefaultedProps = 'component';
+type ConnectedComponentWithDefaults = (
+  props: Omit<ConnectedComponentProps, DefaultedProps> &
+    Partial<Pick<ConnectedComponentProps, DefaultedProps>>,
+) => ConnectedComponentReturnType;
+
+const Component: ConnectedComponentWithDefaults = ({
+  component = BaseComponent,
+  children,
+  ...props
+}) => {
+  return (
+    <ConnectedComponent {...props} component={component}>
+      {children}
+    </ConnectedComponent>
+  );
+};
+
+export default Component;

packages/react/react-media-elements/src/index.ts

@@ -0,0 +1 @@
+export { default as Video } from './Video';