diff --git a/.claude/plans/player-api-implementation.md b/.claude/plans/player-api-implementation.md
index 8c172912..0d03fe73 100644
--- a/.claude/plans/player-api-implementation.md
+++ b/.claude/plans/player-api-implementation.md
@@ -1202,19 +1202,15 @@ export function createPlayer<const Features extends AnyFeature<PlayerTarget>[]>(
 
 ## Phase 5: Cleanup
 
-### PR 15: refactor(store): remove createStore from react and lit
+### PR 15: refactor(store): remove createStore from lit
 
 Remove deprecated exports, update package indexes.
 
+**Note:** React cleanup (`createStore`, `useStoreContext`, etc.) was done in Phase 3 (PR 11).
+
 **Files:**
 
 ```
-packages/store/src/react/create-store.tsx (delete)
-packages/store/src/react/context.tsx (delete)
-packages/store/src/react/index.ts (update)
-packages/store/src/react/tests/create-store.test.tsx (delete)
-packages/store/src/react/tests/context.test.tsx (delete)
-
 packages/store/src/lit/create-store.ts (delete)
 packages/store/src/lit/mixins/provider-mixin.ts (delete)
 packages/store/src/lit/mixins/container-mixin.ts (delete)
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index c442bc3d..72f6f4d2 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -1,8 +1,50 @@
 'use client';
 
-// Features (re-export for convenience)
-export { media } from '@videojs/core/dom';
-// Store
-export * from '@videojs/store/react';
-// Media
+// Re-exports from core/dom
+export {
+  type BufferState,
+  type FeatureAvailability,
+  features,
+  type Media,
+  type MediaContainer,
+  type PlaybackState,
+  type PlayerTarget,
+  type SourceState,
+  selectBuffer,
+  selectPlayback,
+  selectSource,
+  selectTime,
+  selectVolume,
+  type TimeState,
+  type VolumeState,
+} from '@videojs/core/dom';
+
+export type { AnyFeature, Feature, InferFeatureState } from '@videojs/store';
+
+// Re-exports (for custom features)
+export { createFeatureSelector, defineFeature } from '@videojs/store';
+export type { Comparator, Selector } from '@videojs/store/react';
+
+// Re-exports (for advanced store access)
+export { useSelector, useStore } from '@videojs/store/react';
+
+// Media primitives
+export { Audio, type AudioProps } from './media/audio';
 export { Video, type VideoProps } from './media/video';
+export {
+  Container,
+  type ContainerProps,
+  type PlayerContextValue,
+  useMedia,
+  useMediaRegistration,
+  usePlayer,
+  usePlayerContext,
+} from './player/context';
+
+// Player API
+export {
+  type CreatePlayerConfig,
+  type CreatePlayerResult,
+  createPlayer,
+  type ProviderProps,
+} from './player/create-player';
diff --git a/packages/react/src/media/audio.tsx b/packages/react/src/media/audio.tsx
new file mode 100644
index 00000000..d1f31dd1
--- /dev/null
+++ b/packages/react/src/media/audio.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import type { AudioHTMLAttributes } from 'react';
+import { forwardRef, useCallback } from 'react';
+
+import { useMediaRegistration } from '../player/context';
+import { useComposedRefs } from '../utils/use-composed-refs';
+
+export interface AudioProps extends AudioHTMLAttributes<HTMLAudioElement> {}
+
+export const Audio = forwardRef<HTMLAudioElement, AudioProps>(function Audio({ children, ...props }, ref) {
+  const setMedia = useMediaRegistration();
+
+  const mediaRef = useCallback(
+    (el: HTMLAudioElement | null) => {
+      setMedia?.(el);
+    },
+    [setMedia]
+  );
+
+  const composedRef = useComposedRefs(ref, mediaRef);
+
+  return (
+    <audio ref={composedRef} {...props}>
+      {children}
+    </audio>
+  );
+});
+
+export namespace Audio {
+  export type Props = AudioProps;
+}
diff --git a/packages/react/src/media/tests/audio.test.tsx b/packages/react/src/media/tests/audio.test.tsx
new file mode 100644
index 00000000..bb28163e
--- /dev/null
+++ b/packages/react/src/media/tests/audio.test.tsx
@@ -0,0 +1,97 @@
+import { render } from '@testing-library/react';
+import type { ReactNode } from 'react';
+import { createRef } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { PlayerContextProvider, type PlayerContextValue } from '../../player/context';
+import { Audio } from '../audio';
+
+describe('Audio', () => {
+  function createMockStore() {
+    return {
+      state: { volume: 1, muted: false },
+      attach: vi.fn(() => vi.fn()),
+      subscribe: vi.fn(() => vi.fn()),
+      destroy: vi.fn(),
+    };
+  }
+
+  function createWrapper(value: PlayerContextValue) {
+    return function Wrapper({ children }: { children: ReactNode }) {
+      return <PlayerContextProvider value={value}>{children}</PlayerContextProvider>;
+    };
+  }
+
+  describe('standalone (without Provider)', () => {
+    it('renders without error', () => {
+      const { container } = render(<Audio data-testid="audio" />);
+      const audio = container.querySelector('audio');
+      expect(audio).toBeTruthy();
+      expect(audio?.getAttribute('data-testid')).toBe('audio');
+    });
+
+    it('passes props to audio element', () => {
+      const { container } = render(<Audio src="test.mp3" controls autoPlay />);
+
+      const audio = container.querySelector('audio') as HTMLAudioElement;
+      expect(audio?.getAttribute('src')).toBe('test.mp3');
+      expect(audio?.hasAttribute('controls')).toBe(true);
+      expect(audio?.hasAttribute('autoplay')).toBe(true);
+    });
+
+    it('renders children', () => {
+      const { container } = render(
+        <Audio>
+          <source src="test.mp3" type="audio/mpeg" />
+        </Audio>
+      );
+
+      const audio = container.querySelector('audio');
+      expect(audio?.querySelector('source')).toBeTruthy();
+    });
+
+    it('forwards ref correctly', () => {
+      const ref = createRef<HTMLAudioElement>();
+      render(<Audio ref={ref} />);
+
+      expect(ref.current).toBeInstanceOf(HTMLAudioElement);
+    });
+  });
+
+  describe('with Provider', () => {
+    it('calls setMedia on mount', () => {
+      const setMedia = vi.fn();
+      const store = createMockStore();
+      const value: PlayerContextValue = { store: store as any, media: null, setMedia };
+
+      render(<Audio />, { wrapper: createWrapper(value) });
+
+      expect(setMedia).toHaveBeenCalledWith(expect.any(HTMLAudioElement));
+    });
+
+    it('calls setMedia with null on unmount', () => {
+      const setMedia = vi.fn();
+      const store = createMockStore();
+      const value: PlayerContextValue = { store: store as any, media: null, setMedia };
+
+      const { unmount } = render(<Audio />, { wrapper: createWrapper(value) });
+
+      setMedia.mockClear();
+      unmount();
+
+      expect(setMedia).toHaveBeenCalledWith(null);
+    });
+
+    it('forwards ref while also registering media', () => {
+      const setMedia = vi.fn();
+      const store = createMockStore();
+      const value: PlayerContextValue = { store: store as any, media: null, setMedia };
+
+      const ref = createRef<HTMLAudioElement>();
+      render(<Audio ref={ref} />, { wrapper: createWrapper(value) });
+
+      expect(ref.current).toBeInstanceOf(HTMLAudioElement);
+      expect(setMedia).toHaveBeenCalledWith(ref.current);
+    });
+  });
+});
diff --git a/packages/react/src/media/tests/video.test.tsx b/packages/react/src/media/tests/video.test.tsx
index 1285bbc7..c91bfcab 100644
--- a/packages/react/src/media/tests/video.test.tsx
+++ b/packages/react/src/media/tests/video.test.tsx
@@ -1,140 +1,100 @@
 import { render } from '@testing-library/react';
-
-import { defineFeature } from '@videojs/store';
-import { createStore, useStoreContext } from '@videojs/store/react';
+import type { ReactNode } from 'react';
+import { createRef } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 
+import { PlayerContextProvider, type PlayerContextValue } from '../../player/context';
 import { Video } from '../video';
 
-describe('video', () => {
-  class MockMedia extends EventTarget {
-    volume = 1;
-    muted = false;
+describe('Video', () => {
+  function createMockStore() {
+    return {
+      state: { volume: 1, muted: false },
+      attach: vi.fn(() => vi.fn()),
+      subscribe: vi.fn(() => vi.fn()),
+      destroy: vi.fn(),
+    };
   }
 
-  const mockFeature = defineFeature<MockMedia>()({
-    state: () => ({
-      volume: 1,
-      muted: false,
-    }),
-    getSnapshot: ({ target }) => ({
-      volume: target.volume,
-      muted: target.muted,
-    }),
-    subscribe: () => {},
-  });
-
-  function createTestStore() {
-    return createStore({ features: [mockFeature] });
+  function createWrapper(value: PlayerContextValue) {
+    return function Wrapper({ children }: { children: ReactNode }) {
+      return <PlayerContextProvider value={value}>{children}</PlayerContextProvider>;
+    };
   }
 
-  it('renders a video element', () => {
-    const { Provider } = createTestStore();
+  describe('standalone (without Provider)', () => {
+    it('renders without error', () => {
+      const { container } = render(<Video data-testid="video" />);
+      const video = container.querySelector('video');
+      expect(video).toBeTruthy();
+      expect(video?.getAttribute('data-testid')).toBe('video');
+    });
 
-    const { container } = render(
-      <Provider>
-        <Video data-testid="test-video" />
-      </Provider>
-    );
+    it('passes props to video element', () => {
+      const { container } = render(<Video src="test.mp4" controls autoPlay playsInline />);
 
-    const video = container.querySelector('video');
-    expect(video).toBeTruthy();
-    expect(video?.getAttribute('data-testid')).toBe('test-video');
-  });
+      const video = container.querySelector('video') as HTMLVideoElement;
+      expect(video?.getAttribute('src')).toBe('test.mp4');
+      expect(video?.hasAttribute('controls')).toBe(true);
+      expect(video?.hasAttribute('autoplay')).toBe(true);
+      expect(video?.hasAttribute('playsinline')).toBe(true);
+    });
 
-  it('passes props to video element', () => {
-    const { Provider } = createTestStore();
-
-    const { container } = render(
-      <Provider>
-        <Video src="test.mp4" controls autoPlay playsInline />
-      </Provider>
-    );
-
-    const video = container.querySelector('video') as HTMLVideoElement;
-    expect(video?.getAttribute('src')).toBe('test.mp4');
-    expect(video?.hasAttribute('controls')).toBe(true);
-    expect(video?.hasAttribute('autoplay')).toBe(true);
-    // playsInline becomes playsinline attribute
-    expect(video?.hasAttribute('playsinline')).toBe(true);
-  });
-
-  it('renders children', () => {
-    const { Provider } = createTestStore();
-
-    const { container } = render(
-      <Provider>
+    it('renders children', () => {
+      const { container } = render(
         <Video>
           <source src="test.mp4" type="video/mp4" />
           <track kind="captions" src="captions.vtt" />
         </Video>
-      </Provider>
-    );
-
-    const video = container.querySelector('video');
-    expect(video?.querySelector('source')).toBeTruthy();
-    expect(video?.querySelector('track')).toBeTruthy();
-  });
-
-  it('attaches video to store on mount', () => {
-    const { Provider } = createTestStore();
-
-    let attachCalled = false;
-
-    function TestComponent() {
-      const store = useStoreContext();
-
-      // Spy on attach
-      const originalAttach = store.attach.bind(store);
-
-      store.attach = (target) => {
-        attachCalled = true;
-        return originalAttach(target);
-      };
-
-      return <Video />;
-    }
-
-    render(
-      <Provider>
-        <TestComponent />
-      </Provider>
-    );
-
-    expect(attachCalled).toBe(true);
-  });
-
-  it('works with external ref', () => {
-    const { Provider } = createTestStore();
-    let capturedElement: HTMLVideoElement | null = null;
-
-    function TestComponent() {
-      return (
-        <Video
-          ref={(el) => {
-            capturedElement = el;
-          }}
-        />
       );
-    }
 
-    render(
-      <Provider>
-        <TestComponent />
-      </Provider>
-    );
+      const video = container.querySelector('video');
+      expect(video?.querySelector('source')).toBeTruthy();
+      expect(video?.querySelector('track')).toBeTruthy();
+    });
 
-    expect(capturedElement).toBeInstanceOf(HTMLVideoElement);
+    it('forwards ref correctly', () => {
+      const ref = createRef<HTMLVideoElement>();
+      render(<Video ref={ref} />);
+
+      expect(ref.current).toBeInstanceOf(HTMLVideoElement);
+    });
   });
 
-  it('throws when used outside Provider', () => {
-    // Suppress console.error for this test
-    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+  describe('with Provider', () => {
+    it('calls setMedia on mount', () => {
+      const setMedia = vi.fn();
+      const store = createMockStore();
+      const value: PlayerContextValue = { store: store as any, media: null, setMedia };
 
-    expect(() => {
-      render(<Video />);
-    }).toThrow('useStoreContext must be used within a Provider');
+      render(<Video />, { wrapper: createWrapper(value) });
 
-    consoleSpy.mockRestore();
+      expect(setMedia).toHaveBeenCalledWith(expect.any(HTMLVideoElement));
+    });
+
+    it('calls setMedia with null on unmount', () => {
+      const setMedia = vi.fn();
+      const store = createMockStore();
+      const value: PlayerContextValue = { store: store as any, media: null, setMedia };
+
+      const { unmount } = render(<Video />, { wrapper: createWrapper(value) });
+
+      setMedia.mockClear();
+      unmount();
+
+      expect(setMedia).toHaveBeenCalledWith(null);
+    });
+
+    it('forwards ref while also registering media', () => {
+      const setMedia = vi.fn();
+      const store = createMockStore();
+      const value: PlayerContextValue = { store: store as any, media: null, setMedia };
+
+      const ref = createRef<HTMLVideoElement>();
+      render(<Video ref={ref} />, { wrapper: createWrapper(value) });
+
+      expect(ref.current).toBeInstanceOf(HTMLVideoElement);
+      expect(setMedia).toHaveBeenCalledWith(ref.current);
+    });
   });
 });
diff --git a/packages/react/src/media/video.tsx b/packages/react/src/media/video.tsx
index 10464efb..c3097a0d 100644
--- a/packages/react/src/media/video.tsx
+++ b/packages/react/src/media/video.tsx
@@ -1,57 +1,31 @@
 'use client';
 
-import { useStoreContext } from '@videojs/store/react';
-import type { Ref, VideoHTMLAttributes } from 'react';
-
-import { useCallback } from 'react';
+import type { VideoHTMLAttributes } from 'react';
+import { forwardRef, useCallback } from 'react';
 
+import { useMediaRegistration } from '../player/context';
 import { useComposedRefs } from '../utils/use-composed-refs';
 
-export interface VideoProps extends VideoHTMLAttributes<HTMLVideoElement> {
-  ref?: Ref<HTMLVideoElement> | React.RefObject<HTMLVideoElement>;
-}
+export interface VideoProps extends VideoHTMLAttributes<HTMLVideoElement> {}
 
-/**
- * Video element that automatically attaches to the nearest store context.
- *
- * Must be used within a Provider created by `createStore()`.
- *
- * @example
- * ```tsx
- * import { createStore, media } from '@videojs/react';
- *
- * const { Provider } = createStore({
- *   features: media.all
- * });
- *
- * function App() {
- *   return (
- *     <Provider>
- *       <Video src="video.mp4" controls />
- *     </Provider>
- *   );
- * }
- * ```
- */
-export function Video({ children, ref: refProp, ...props }: VideoProps): React.JSX.Element {
-  const store = useStoreContext();
+export const Video = forwardRef<HTMLVideoElement, VideoProps>(function Video({ children, ...props }, ref) {
+  const setMedia = useMediaRegistration();
 
-  const attachRef = useCallback(
-    (el: HTMLVideoElement): (() => void) | void => {
-      if (!el) return;
-      return store.attach(el);
+  const mediaRef = useCallback(
+    (el: HTMLVideoElement | null) => {
+      setMedia?.(el);
     },
-    [store]
+    [setMedia]
   );
 
-  const ref = useComposedRefs(refProp, attachRef);
+  const composedRef = useComposedRefs(ref, mediaRef);
 
   return (
-    <video ref={ref} {...props}>
+    <video ref={composedRef} {...props}>
       {children}
     </video>
   );
-}
+});
 
 export namespace Video {
   export type Props = VideoProps;
diff --git a/packages/react/src/player/context.tsx b/packages/react/src/player/context.tsx
new file mode 100644
index 00000000..bd22f655
--- /dev/null
+++ b/packages/react/src/player/context.tsx
@@ -0,0 +1,75 @@
+'use client';
+
+import type { Media } from '@videojs/core/dom';
+import type { UnknownState, UnknownStore } from '@videojs/store';
+import { useStore } from '@videojs/store/react';
+import type { Dispatch, HTMLAttributes, ReactNode, SetStateAction } from 'react';
+import { createContext, forwardRef, useContext, useEffect, useRef } from 'react';
+
+import { useComposedRefs } from '../utils/use-composed-refs';
+
+export interface PlayerContextValue {
+  store: UnknownStore;
+  media: Media | null;
+  setMedia: Dispatch<SetStateAction<Media | null>>;
+}
+
+const PlayerContext = createContext<PlayerContextValue | null>(null);
+
+export function PlayerContextProvider({
+  value,
+  children,
+}: {
+  value: PlayerContextValue;
+  children: ReactNode;
+}): ReactNode {
+  return <PlayerContext.Provider value={value}>{children}</PlayerContext.Provider>;
+}
+
+export function usePlayerContext(): PlayerContextValue {
+  const ctx = useContext(PlayerContext);
+  if (!ctx) throw new Error('usePlayerContext must be used within a Player Provider');
+  return ctx;
+}
+
+export function usePlayer(): UnknownStore;
+export function usePlayer<R>(selector: (state: UnknownState) => R): R;
+export function usePlayer<R>(selector?: (state: UnknownState) => R) {
+  const { store } = usePlayerContext();
+  return useStore(store, selector as any);
+}
+
+export function useMedia(): Media | null {
+  const { media } = usePlayerContext();
+  return media;
+}
+
+export function useMediaRegistration(): Dispatch<SetStateAction<Media | null>> | undefined {
+  const ctx = useContext(PlayerContext);
+  return ctx?.setMedia;
+}
+
+export interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+}
+
+export const Container = forwardRef<HTMLDivElement, ContainerProps>(function Container({ children, ...props }, ref) {
+  const { store, media } = usePlayerContext();
+  const internalRef = useRef<HTMLDivElement>(null);
+  const composedRef = useComposedRefs(ref, internalRef);
+
+  useEffect(() => {
+    if (!media) return;
+    return store.attach({ media, container: internalRef.current });
+  }, [media, store]);
+
+  return (
+    <div ref={composedRef} {...props}>
+      {children}
+    </div>
+  );
+});
+
+export namespace Container {
+  export type Props = ContainerProps;
+}
diff --git a/packages/react/src/player/create-player.tsx b/packages/react/src/player/create-player.tsx
new file mode 100644
index 00000000..4b7042ed
--- /dev/null
+++ b/packages/react/src/player/create-player.tsx
@@ -0,0 +1,65 @@
+'use client';
+
+import type { Media, PlayerTarget } from '@videojs/core/dom';
+import type { AnyFeature, FeatureStore, UnionFeatureState } from '@videojs/store';
+import { createStore } from '@videojs/store';
+import { useStore } from '@videojs/store/react';
+import type { ReactNode } from 'react';
+import { useEffect, useState } from 'react';
+
+import { Container, PlayerContextProvider, useMedia, usePlayerContext } from './context';
+
+export interface CreatePlayerConfig<Features extends AnyFeature[]> {
+  features: Features;
+  displayName?: string;
+}
+
+export interface ProviderProps {
+  children: ReactNode;
+}
+
+export interface CreatePlayerResult<Features extends AnyFeature[]> {
+  Provider: (props: ProviderProps) => ReactNode;
+  Container: typeof Container;
+  usePlayer: UsePlayerHook<Features>;
+  useMedia: () => Media | null;
+}
+
+type UsePlayerHook<Features extends AnyFeature[]> = {
+  (): FeatureStore<Features>;
+  <R>(selector: (state: UnionFeatureState<Features>) => R): R;
+};
+
+export function createPlayer<const Features extends AnyFeature<PlayerTarget>[]>(
+  config: CreatePlayerConfig<Features>
+): CreatePlayerResult<Features> {
+  type Store = FeatureStore<Features>;
+  type State = UnionFeatureState<Features>;
+
+  function Provider({ children }: ProviderProps): ReactNode {
+    const [store] = useState(() => createStore({ features: config.features }));
+    const [media, setMedia] = useState<Media | null>(null);
+
+    useEffect(() => () => store.destroy(), [store]);
+
+    return <PlayerContextProvider value={{ store, media, setMedia }}>{children}</PlayerContextProvider>;
+  }
+
+  if (config.displayName) {
+    Provider.displayName = `${config.displayName}.Provider`;
+  }
+
+  function usePlayer(): Store;
+  function usePlayer<R>(selector: (state: State) => R): R;
+  function usePlayer<R>(selector?: (state: State) => R): Store | R {
+    const { store } = usePlayerContext();
+    return useStore(store, selector as any);
+  }
+
+  return {
+    Provider,
+    Container,
+    usePlayer: usePlayer as UsePlayerHook<Features>,
+    useMedia,
+  };
+}
diff --git a/packages/react/src/player/tests/context.test.tsx b/packages/react/src/player/tests/context.test.tsx
new file mode 100644
index 00000000..66ae6501
--- /dev/null
+++ b/packages/react/src/player/tests/context.test.tsx
@@ -0,0 +1,156 @@
+import { render, renderHook } from '@testing-library/react';
+import type { ReactNode } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
+import {
+  Container,
+  PlayerContextProvider,
+  type PlayerContextValue,
+  useMedia,
+  useMediaRegistration,
+  usePlayer,
+  usePlayerContext,
+} from '../context';
+
+function createMockStore() {
+  return {
+    state: { paused: true, volume: 1 },
+    attach: vi.fn(() => vi.fn()),
+    subscribe: vi.fn(() => vi.fn()),
+    destroy: vi.fn(),
+  };
+}
+
+function createWrapper(value: PlayerContextValue) {
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return <PlayerContextProvider value={value}>{children}</PlayerContextProvider>;
+  };
+}
+
+describe('usePlayerContext', () => {
+  it('throws outside Provider', () => {
+    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+    expect(() => {
+      renderHook(() => usePlayerContext());
+    }).toThrow('usePlayerContext must be used within a Player Provider');
+
+    consoleSpy.mockRestore();
+  });
+
+  it('returns context value inside Provider', () => {
+    const store = createMockStore();
+    const value: PlayerContextValue = { store: store as any, media: null, setMedia: vi.fn() };
+
+    const { result } = renderHook(() => usePlayerContext(), {
+      wrapper: createWrapper(value),
+    });
+
+    expect(result.current.store).toBe(store);
+    expect(result.current.media).toBe(null);
+  });
+});
+
+describe('useMediaRegistration', () => {
+  it('returns undefined outside Provider', () => {
+    const { result } = renderHook(() => useMediaRegistration());
+    expect(result.current).toBeUndefined();
+  });
+
+  it('returns setMedia inside Provider', () => {
+    const setMedia = vi.fn();
+    const store = createMockStore();
+    const value: PlayerContextValue = { store: store as any, media: null, setMedia };
+
+    const { result } = renderHook(() => useMediaRegistration(), {
+      wrapper: createWrapper(value),
+    });
+
+    expect(result.current).toBe(setMedia);
+  });
+});
+
+describe('usePlayer', () => {
+  it('returns store without selector', () => {
+    const store = createMockStore();
+    const value: PlayerContextValue = { store: store as any, media: null, setMedia: vi.fn() };
+
+    const { result } = renderHook(() => usePlayer(), {
+      wrapper: createWrapper(value),
+    });
+
+    expect(result.current).toBe(store);
+  });
+});
+
+describe('useMedia', () => {
+  it('returns media from context', () => {
+    const store = createMockStore();
+    const media = document.createElement('video');
+    const value: PlayerContextValue = { store: store as any, media, setMedia: vi.fn() };
+
+    const { result } = renderHook(() => useMedia(), {
+      wrapper: createWrapper(value),
+    });
+
+    expect(result.current).toBe(media);
+  });
+
+  it('returns null when no media', () => {
+    const store = createMockStore();
+    const value: PlayerContextValue = { store: store as any, media: null, setMedia: vi.fn() };
+
+    const { result } = renderHook(() => useMedia(), {
+      wrapper: createWrapper(value),
+    });
+
+    expect(result.current).toBeNull();
+  });
+});
+
+describe('Container', () => {
+  it('renders children', () => {
+    const store = createMockStore();
+    const value: PlayerContextValue = { store: store as any, media: null, setMedia: vi.fn() };
+
+    const { container } = render(
+      <PlayerContextProvider value={value}>
+        <Container>
+          <span>test</span>
+        </Container>
+      </PlayerContextProvider>
+    );
+
+    expect(container.querySelector('span')).toBeTruthy();
+  });
+
+  it('attaches media to store when media is set', () => {
+    const store = createMockStore();
+    const media = document.createElement('video');
+    const value: PlayerContextValue = { store: store as any, media, setMedia: vi.fn() };
+
+    render(
+      <PlayerContextProvider value={value}>
+        <Container />
+      </PlayerContextProvider>
+    );
+
+    expect(store.attach).toHaveBeenCalledWith({
+      media,
+      container: expect.any(HTMLDivElement),
+    });
+  });
+
+  it('does not attach when media is null', () => {
+    const store = createMockStore();
+    const value: PlayerContextValue = { store: store as any, media: null, setMedia: vi.fn() };
+
+    render(
+      <PlayerContextProvider value={value}>
+        <Container />
+      </PlayerContextProvider>
+    );
+
+    expect(store.attach).not.toHaveBeenCalled();
+  });
+});
diff --git a/packages/react/src/player/tests/create-player.test.tsx b/packages/react/src/player/tests/create-player.test.tsx
new file mode 100644
index 00000000..c8dedacf
--- /dev/null
+++ b/packages/react/src/player/tests/create-player.test.tsx
@@ -0,0 +1,163 @@
+import { render, renderHook } from '@testing-library/react';
+import { defineFeature } from '@videojs/store';
+import type { ReactNode } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { createPlayer } from '../create-player';
+
+describe('createPlayer', () => {
+  // Create a mock feature that works with any target
+  const mockFeature = defineFeature<any>()({
+    state: () => ({
+      volume: 1,
+      muted: false,
+      paused: true,
+    }),
+  });
+
+  describe('Provider', () => {
+    it('creates store on mount', () => {
+      const { Provider, usePlayer } = createPlayer({ features: [mockFeature] as any });
+
+      let store: unknown;
+
+      function TestComponent() {
+        store = usePlayer();
+        return null;
+      }
+
+      render(
+        <Provider>
+          <TestComponent />
+        </Provider>
+      );
+
+      expect(store).toBeDefined();
+      expect(typeof (store as any).subscribe).toBe('function');
+      expect(typeof (store as any).attach).toBe('function');
+      expect(typeof (store as any).destroy).toBe('function');
+    });
+
+    it('destroys store on unmount', () => {
+      const { Provider, usePlayer } = createPlayer({ features: [mockFeature] as any });
+
+      let store: any;
+
+      function TestComponent() {
+        store = usePlayer();
+        return null;
+      }
+
+      const { unmount } = render(
+        <Provider>
+          <TestComponent />
+        </Provider>
+      );
+
+      const destroySpy = vi.spyOn(store, 'destroy');
+      unmount();
+
+      expect(destroySpy).toHaveBeenCalled();
+    });
+
+    it('uses displayName when provided', () => {
+      const { Provider } = createPlayer({
+        features: [mockFeature] as any,
+        displayName: 'VideoPlayer',
+      });
+
+      expect((Provider as any).displayName).toBe('VideoPlayer.Provider');
+    });
+
+    it('renders children', () => {
+      const { Provider } = createPlayer({ features: [mockFeature] as any });
+
+      const { container } = render(
+        <Provider>
+          <span data-testid="child">test</span>
+        </Provider>
+      );
+
+      expect(container.querySelector('[data-testid="child"]')).toBeTruthy();
+    });
+  });
+
+  describe('usePlayer', () => {
+    it('returns store without selector', () => {
+      const { Provider, usePlayer } = createPlayer({ features: [mockFeature] as any });
+
+      const wrapper = ({ children }: { children: ReactNode }) => <Provider>{children}</Provider>;
+
+      const { result } = renderHook(() => usePlayer(), { wrapper });
+
+      expect(result.current).toBeDefined();
+      expect(typeof result.current.subscribe).toBe('function');
+      expect(typeof result.current.attach).toBe('function');
+    });
+
+    it('returns selected state with selector', () => {
+      const { Provider, usePlayer } = createPlayer({ features: [mockFeature] as any });
+
+      const wrapper = ({ children }: { children: ReactNode }) => <Provider>{children}</Provider>;
+
+      const { result } = renderHook(() => usePlayer((state: any) => state.volume), { wrapper });
+
+      expect(result.current).toBe(1);
+    });
+
+    it('throws outside Provider', () => {
+      const { usePlayer } = createPlayer({ features: [mockFeature] as any });
+
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+      expect(() => {
+        renderHook(() => usePlayer());
+      }).toThrow('usePlayerContext must be used within a Player Provider');
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('Container', () => {
+    it('is exported from createPlayer result', () => {
+      const { Container } = createPlayer({ features: [mockFeature] as any });
+      expect(Container).toBeDefined();
+    });
+  });
+
+  describe('full integration', () => {
+    it('Provider → Container → media attach flow', () => {
+      const { Provider, Container, usePlayer } = createPlayer({ features: [mockFeature] as any });
+
+      let store: any;
+
+      function TestComponent() {
+        store = usePlayer();
+        return (
+          <Container data-testid="container">
+            <video data-testid="video">
+              <track kind="captions" />
+            </video>
+          </Container>
+        );
+      }
+
+      const { container } = render(
+        <Provider>
+          <TestComponent />
+        </Provider>
+      );
+
+      // Store should exist
+      expect(store).toBeDefined();
+
+      // Container should render
+      const containerEl = container.querySelector('[data-testid="container"]');
+      expect(containerEl).toBeTruthy();
+
+      // Video should render inside container
+      const videoEl = container.querySelector('[data-testid="video"]');
+      expect(videoEl).toBeTruthy();
+    });
+  });
+});
diff --git a/packages/store/src/react/context.tsx b/packages/store/src/react/context.tsx
deleted file mode 100644
index a900c9b1..00000000
--- a/packages/store/src/react/context.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { ReactNode } from 'react';
-import { createContext, useContext } from 'react';
-import type { AnyStore } from '../core/store';
-
-/**
- * Internal shared context for store instances.
- * All Providers write to this context.
- */
-const StoreContext = createContext<AnyStore | null>(null);
-
-/**
- * Internal hook for primitive UI components.
- * Accesses the nearest store from context without type information.
- *
- * @throws If used outside of a Provider
- */
-export function useStoreContext(): AnyStore {
-  const store = useContext(StoreContext);
-
-  if (!store) {
-    throw new Error('useStoreContext must be used within a Provider');
-  }
-
-  return store;
-}
-
-/**
- * Internal provider component that wraps children with store context.
- */
-export function StoreContextProvider({ store, children }: { store: AnyStore; children: ReactNode }): ReactNode {
-  return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;
-}
diff --git a/packages/store/src/react/create-store.tsx b/packages/store/src/react/create-store.tsx
deleted file mode 100644
index 928262a8..00000000
--- a/packages/store/src/react/create-store.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { isUndefined } from '@videojs/utils/predicate';
-import type { FC, ReactNode } from 'react';
-import { useEffect, useState } from 'react';
-import type { StoreConfig } from '../core/config';
-import type { AnyFeature } from '../core/feature';
-import type { AnyStore, FeatureStore } from '../core/store';
-import { createStore as createCoreStore } from '../core/store';
-import { StoreContextProvider, useStoreContext } from './context';
-import { useStore as useStoreBase } from './hooks/use-store';
-
-export interface CreateStoreConfig<Features extends AnyFeature[]> extends StoreConfig<Features> {
-  displayName?: string;
-}
-
-export interface ProviderProps<S extends AnyStore> {
-  children: ReactNode;
-  store?: S;
-}
-
-export interface CreateStoreResult<S extends AnyStore> {
-  /** Provider component that creates and manages the store lifecycle. */
-  Provider: FC<ProviderProps<S>>;
-
-  /**
-   * Access store state and actions.
-   * Returns the store without subscribing to changes.
-   * Use selectors via `useSelector` for reactive updates.
-   */
-  useStore: () => S;
-
-  /**
-   * Creates a new store instance.
-   * Useful for imperative access or creating a store before render.
-   */
-  create: () => S;
-}
-
-// ----------------------------------------
-// Implementation
-// ----------------------------------------
-
-/**
- * Creates a store factory that returns a Provider and typed hooks.
- *
- * @param config - Store configuration including features and optional lifecycle hooks
- * @returns An object containing Provider, hooks, and a create function
- *
- * @example
- * ```tsx
- * const { Provider, useStore, useQueue, create } = createStore({
- *   features: [playbackFeature, presentationFeature],
- * });
- * ```
- */
-export function createStore<Features extends AnyFeature[]>(
-  config: CreateStoreConfig<Features>
-): CreateStoreResult<FeatureStore<Features>> {
-  type Store = FeatureStore<Features>;
-
-  function create(): Store {
-    return createCoreStore(config);
-  }
-
-  /**
-   * Provider component that manages store lifecycle.
-   *
-   * If `store` prop is provided, uses that store (no cleanup on unmount).
-   * Otherwise, creates a new store and destroys it on unmount.
-   */
-  function Provider({ children, store: providedStore }: ProviderProps<Store>): ReactNode {
-    const [store] = useState<Store>(() => {
-      if (!isUndefined(providedStore)) {
-        return providedStore;
-      }
-
-      return create();
-    });
-
-    const isOwner = isUndefined(providedStore);
-
-    useEffect(() => {
-      if (isOwner) {
-        return () => store.destroy();
-      }
-
-      return undefined;
-    }, [store, isOwner]);
-
-    return <StoreContextProvider store={store}>{children}</StoreContextProvider>;
-  }
-
-  // Set display name for React DevTools
-  if (config.displayName) {
-    Provider.displayName = `${config.displayName}.Provider`;
-  }
-
-  function useStore(): Store {
-    const store = useStoreContext();
-    return useStoreBase(store) as Store;
-  }
-
-  return {
-    Provider,
-    useStore,
-    create,
-  };
-}
diff --git a/packages/store/src/react/index.ts b/packages/store/src/react/index.ts
index 923432b8..f83385fa 100644
--- a/packages/store/src/react/index.ts
+++ b/packages/store/src/react/index.ts
@@ -1,9 +1,2 @@
-export { useStoreContext } from './context';
-export type {
-  CreateStoreConfig,
-  CreateStoreResult,
-  ProviderProps,
-} from './create-store';
-export { createStore } from './create-store';
-
-export { useStore } from './hooks';
+export { type Comparator, type Selector, useSelector } from './hooks/use-selector';
+export { useStore } from './hooks/use-store';
diff --git a/packages/store/src/react/tests/context.test.tsx b/packages/store/src/react/tests/context.test.tsx
deleted file mode 100644
index 2b1de2a2..00000000
--- a/packages/store/src/react/tests/context.test.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import type { ReactNode } from 'react';
-
-import { describe, expect, it } from 'vitest';
-
-import { defineFeature } from '../../core/feature';
-import { createStore as createCoreStore } from '../../core/store';
-import { StoreContextProvider, useStoreContext } from '../context';
-
-describe('context', () => {
-  // Mock target
-  class MockMedia extends EventTarget {
-    volume = 1;
-  }
-
-  const audioFeature = defineFeature<MockMedia>()({
-    state: () => ({
-      volume: 1,
-    }),
-    attach({ target, set }) {
-      set({ volume: target.volume });
-    },
-  });
-
-  describe('useStoreContext', () => {
-    it('throws when used outside of Provider', () => {
-      expect(() => {
-        renderHook(() => useStoreContext());
-      }).toThrow('useStoreContext must be used within a Provider');
-    });
-
-    it('returns store from context', () => {
-      const store = createCoreStore({ features: [audioFeature] });
-
-      const { result } = renderHook(() => useStoreContext(), {
-        wrapper: ({ children }: { children: ReactNode }) => (
-          <StoreContextProvider store={store}>{children}</StoreContextProvider>
-        ),
-      });
-
-      expect(result.current).toBe(store);
-    });
-  });
-});
diff --git a/packages/store/src/react/tests/create-store.test.tsx b/packages/store/src/react/tests/create-store.test.tsx
deleted file mode 100644
index 4e940893..00000000
--- a/packages/store/src/react/tests/create-store.test.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import type { ReactNode } from 'react';
-
-import { describe, expect, it } from 'vitest';
-
-import { defineFeature } from '../../core/feature';
-import { createStore } from '../create-store';
-
-interface AudioState {
-  volume: number;
-  muted: boolean;
-  setVolume: (volume: number) => Promise<number>;
-}
-
-describe('createStore', () => {
-  // Mock target
-  class MockMedia extends EventTarget {
-    volume = 1;
-    muted = false;
-  }
-
-  const audioFeature = defineFeature<MockMedia>()({
-    state: ({ task }) => ({
-      volume: 1,
-      muted: false,
-      setVolume(volume: number) {
-        return task(({ target }) => {
-          target.volume = volume;
-          target.dispatchEvent(new Event('volumechange'));
-          return volume;
-        });
-      },
-    }),
-    attach({ target, signal, set }) {
-      const sync = () =>
-        set({
-          volume: target.volume,
-          muted: target.muted,
-        });
-
-      sync();
-
-      target.addEventListener('volumechange', sync);
-      signal.addEventListener('abort', () => {
-        target.removeEventListener('volumechange', sync);
-      });
-    },
-  });
-
-  describe('create', () => {
-    it('creates a store instance', () => {
-      const { create } = createStore({ features: [audioFeature] });
-
-      const store = create();
-
-      expect(store).toBeDefined();
-      expect(store.state).toMatchObject({ volume: 1, muted: false });
-    });
-  });
-
-  describe('provider', () => {
-    it('creates store on mount', () => {
-      const { Provider, useStore } = createStore({ features: [audioFeature] });
-
-      const { result } = renderHook(() => useStore() as AudioState, {
-        wrapper: ({ children }: { children: ReactNode }) => <Provider>{children}</Provider>,
-      });
-
-      expect(result.current).toBeDefined();
-      expect(result.current.volume).toBe(1);
-      expect(typeof result.current.setVolume).toBe('function');
-    });
-
-    it('uses provided store prop without destroying on unmount', () => {
-      const { Provider, useStore, create } = createStore({
-        features: [audioFeature],
-      });
-      const providedStore = create();
-
-      const { unmount } = renderHook(() => useStore(), {
-        wrapper: ({ children }: { children: ReactNode }) => <Provider store={providedStore}>{children}</Provider>,
-      });
-
-      unmount();
-
-      // Store should NOT be destroyed because it was provided
-      expect(providedStore.destroyed).toBe(false);
-    });
-
-    it('sets displayName on Provider', () => {
-      const { Provider } = createStore({
-        features: [audioFeature],
-        displayName: 'TestStore',
-      });
-
-      expect(Provider.displayName).toBe('TestStore.Provider');
-    });
-  });
-
-  describe('useStore', () => {
-    it('returns state and action functions from context', () => {
-      const { Provider, useStore, create } = createStore({
-        features: [audioFeature],
-      });
-      const store = create();
-      const target = new MockMedia();
-      store.attach(target);
-
-      const { result } = renderHook(() => useStore() as AudioState, {
-        wrapper: ({ children }: { children: ReactNode }) => <Provider store={store}>{children}</Provider>,
-      });
-
-      expect(result.current.volume).toBe(1);
-      expect(result.current.muted).toBe(false);
-      expect(typeof result.current.setVolume).toBe('function');
-    });
-
-    it('does not re-render on state change (no subscription)', async () => {
-      const { Provider, useStore, create } = createStore({
-        features: [audioFeature],
-      });
-      const store = create();
-      const target = new MockMedia();
-      store.attach(target);
-      let renderCount = 0;
-
-      const { result } = renderHook(
-        () => {
-          renderCount++;
-          return useStore() as AudioState;
-        },
-        {
-          wrapper: ({ children }: { children: ReactNode }) => <Provider store={store}>{children}</Provider>,
-        }
-      );
-
-      expect(renderCount).toBe(1);
-      expect(result.current.volume).toBe(1);
-
-      await act(async () => {
-        target.volume = 0.5;
-        target.dispatchEvent(new Event('volumechange'));
-      });
-
-      // Should NOT have re-rendered
-      expect(renderCount).toBe(1);
-      // But store state DID change
-      expect(store.state.volume).toBe(0.5);
-    });
-  });
-});