diff --git a/rfc/player-api/api.md b/rfc/player-api/api.md
index 42da787f..b9d39752 100644
--- a/rfc/player-api/api.md
+++ b/rfc/player-api/api.md
@@ -7,60 +7,74 @@ Surface API for React and HTML.
 ### React
 
 ```ts
-import { createPlayer, features } from '@videojs/react';
+import { createPlayer } from '@videojs/react';
+import { features } from '@videojs/core/dom';
 
-const { Provider, Container, usePlayer } = createPlayer({
-  features: [features.video]
+const { Provider, Container, usePlayer, useMedia } = createPlayer({
+  features: [...features.video],
 });
 ```
 
 **Returns:**
 
-| Export      | Purpose                                  |
-| ----------- | ---------------------------------------- |
-| `Provider`  | Creates stores, provides context         |
-| `Container` | Attaches container element to player store |
-| `usePlayer` | Access player state (typed to features)  |
+| Export      | Purpose                                      |
+| ----------- | -------------------------------------------- |
+| `Provider`  | Creates store, provides context              |
+| `Container` | Attaches container element, observes media   |
+| `usePlayer` | Access player state via selector             |
+| `useMedia`  | Access current media element                 |
 
 ### HTML
 
 ```ts
-import { createPlayer, features } from '@videojs/html';
+import { createPlayer } from '@videojs/html';
+import { features } from '@videojs/core/dom';
 
-const { PlayerElement, PlayerController } = createPlayer({
-  features: [features.video]
+const {
+  context,
+  create,
+  PlayerElement,
+  PlayerController,
+  PlayerMixin,
+  ProviderMixin,
+  ContainerMixin,
+} = createPlayer({
+  features: [...features.video],
 });
 
-customElements.define('my-video-player', PlayerElement);
+customElements.define('video-player', PlayerElement);
 ```
 
 **Returns:**
 
 | Export             | Purpose                                             |
 | ------------------ | --------------------------------------------------- |
+| `context`          | Player context for controllers                      |
+| `create`           | Factory to create store instance                    |
 | `PlayerElement`    | Combined provider + container element (common case) |
-| `PlayerController` | Reactive controller for accessing player state      |
-| `ProviderElement`  | Provider-only element (advanced, split cases)       |
-| `ContainerElement` | Container-only element (advanced, split cases)      |
-| `ProviderMixin`    | Mixin for custom provider elements                  |
-| `ContainerMixin`   | Mixin for custom container elements                 |
+| `PlayerController` | Controller for accessing player state               |
+| `PlayerMixin`      | Mixin for custom player elements                    |
+| `ProviderMixin`    | Mixin for provider-only elements                    |
+| `ContainerMixin`   | Mixin for container-only elements                   |
 
 ### Config
 
 ```ts
-// Individual features
-createPlayer({
-  features: [features.playback, features.volume, features.fullscreen]
-});
+import { features } from '@videojs/core/dom';
 
-// Feature bundles (sugar)
+// Feature bundles (recommended)
 createPlayer({
-  features: [features.video]
+  features: [...features.video],
 });
 
 // Extended bundle
 createPlayer({
-  features: [features.video, features.streaming]
+  features: [...features.video, ...features.streaming],
+});
+
+// Custom features
+createPlayer({
+  features: [...features.video, myCustomSlice],
 });
 ```
 
@@ -71,51 +85,50 @@ Access player state with selector-based subscriptions.
 ### Overloads
 
 ```ts
-// 1. Feature only — returns full feature slice
-usePlayer(feature): FeatureSlice | undefined
+// 1. No selector — returns full store (re-renders on any change)
+usePlayer(): Store
 
-// 2. Feature + selector — returns selected value from feature
-usePlayer(feature, selector): R | undefined
-
-// 3. Global selector — returns selected value from all state
+// 2. With selector — returns selected value (re-renders when selected value changes)
 usePlayer(selector): R
 ```
 
 ### Examples
 
 ```tsx
-// Get full playback feature slice
-const playback = usePlayer(features.playback);
+import { selectPlayback, selectVolume, selectTime } from '@videojs/core/dom';
+
+// Get playback state
+const playback = usePlayer(selectPlayback);
 if (!playback) return null;
-playback.paused;
-playback.play();
+playback.paused;  // boolean
+playback.ended;   // boolean
 
-// Get specific value from feature
-const paused = usePlayer(features.playback, s => s.paused);
+// Get specific value
+const paused = usePlayer((s) => s.paused);
 
-// Derive value from feature
-const isPlaying = usePlayer(features.playback, s => !s.paused && !s.ended);
+// Derive value
+const isPlaying = usePlayer((s) => !s.paused && !s.ended);
 
-// Select across multiple features (global selector)
-const state = usePlayer(s => ({
+// Select across multiple properties
+const state = usePlayer((s) => ({
   paused: s.paused,
-  volume: s.volume
+  volume: s.volume,
 }));
 ```
 
 ### Performance
 
-> **Warning:** Global selectors without feature scoping subscribe to all state changes. During playback, `currentTime` updates frequently (4-60 times/sec). Always scope to features or use specific selectors.
+> **Warning:** Selectors without scoping subscribe to all state changes. During playback, `currentTime` updates frequently (4-60 times/sec). Use feature selectors for optimal performance.
 
 ```tsx
 // Bad — re-renders on every currentTime update
-const state = usePlayer(s => s);
+const state = usePlayer((s) => s);
 
-// Good — only subscribes to playback feature
-const playback = usePlayer(features.playback);
+// Good — only re-renders when playback state changes
+const playback = usePlayer(selectPlayback);
 
-// Good — only subscribes to paused
-const paused = usePlayer(features.playback, s => s.paused);
+// Good — only re-renders when paused changes
+const paused = usePlayer((s) => s.paused);
 ```
 
 ### Selector Comparison
@@ -124,68 +137,55 @@ Selectors returning objects use `shallowEqual` comparison:
 
 ```tsx
 // Re-renders only when paused OR volume changes
-const state = usePlayer(s => ({
+const state = usePlayer((s) => ({
   paused: s.paused,
-  volume: s.volume
+  volume: s.volume,
 }));
 ```
 
 `shallowEqual` is exported from `@videojs/store` for custom use.
-## store.get / store.has
 
-Access features within feature context (subscribe/request handlers).
+## useMedia (React)
 
-### store.get(feature | key | name)
+Access the current media element.
 
-Returns typed feature slice or `undefined`.
+```tsx
+const media = useMedia();
 
-```ts
-// By feature reference
-store.get(features.playback)     // PlaybackSlice | undefined
-
-// By feature key (Symbol)
-store.get(playbackKey)           // PlaybackSlice | undefined
-
-// By name (string)
-store.get('playback')            // Slice | undefined (loose typing)
+if (media) {
+  console.log(media.currentTime);
+}
 ```
 
-### store.has(feature | key | name)
-
-Returns `boolean`.
-
-```ts
-store.has(features.playback)     // boolean
-store.has('playback')            // boolean
-```
-
-### Usage in Features
-
-```ts
-const keyboardFeature = createPlayerFeature({
-  subscribe: ({ store, update, signal }) => {
-    const playback = store.get(features.playback);
-
-    document.addEventListener('keydown', (e) => {
-      if (e.key === ' ') playback?.toggle();
-    }, { signal });
-  }
-});
-```
+Returns `Media | null` — null if no media element is registered.
 
 ## PlayerController (HTML)
 
 Reactive controller for accessing player state in custom elements.
 
-```ts
-import { createPlayer, features, MediaElement } from '@videojs/html';
+### Constructor Overloads
 
-const { PlayerController } = createPlayer({
-  features: [features.video]
+```ts
+// Without selector — store access only, no subscription
+new PlayerController(host, context)
+
+// With selector — subscribes, triggers update on change
+new PlayerController(host, context, selector)
+```
+
+### Examples
+
+```ts
+import { createPlayer, MediaElement } from '@videojs/html';
+import { features, selectPlayback } from '@videojs/core/dom';
+
+const { context, PlayerController } = createPlayer({
+  features: [...features.video],
 });
 
 class MediaPlayButton extends MediaElement {
-  #playback = new PlayerController(this, features.playback);
+  // With selector: subscribes, .value is selected state
+  #playback = new PlayerController(this, context, selectPlayback);
 
   override connectedCallback() {
     super.connectedCallback();
@@ -199,42 +199,102 @@ class MediaPlayButton extends MediaElement {
   override update() {
     const playback = this.#playback.value;
     if (!playback) return;
-    // ...
+
+    this.setAttribute('aria-pressed', String(!playback.paused));
   }
 }
 ```
 
 ### Controller API
 
-| Property | Returns              | Description                                     |
-| -------- | -------------------- | ----------------------------------------------- |
-| `value`  | `FeatureSlice \| undefined` | Feature slice, triggers update on change        |
+| Property | Type                      | Description                              |
+| -------- | ------------------------- | ---------------------------------------- |
+| `store`  | `Store`                   | Direct store access                      |
+| `value`  | `R \| undefined`          | Selected state (with selector) or state snapshot (without) |
+
+### Without Selector
+
+When no selector is provided, the controller provides store access without subscribing:
+
+```ts
+class SomeElement extends MediaElement {
+  // No subscription, just store access
+  #ctrl = new PlayerController(this, context);
+
+  someMethod() {
+    // Read current state (not reactive)
+    const state = this.#ctrl.store.state;
+
+    // Call actions
+    this.#ctrl.store.play();
+  }
+}
+```
+
+## Feature Selectors
+
+Pre-built selectors for standard features:
+
+```ts
+import {
+  selectPlayback,
+  selectVolume,
+  selectTime,
+  selectSource,
+  selectBuffer,
+} from '@videojs/core/dom';
+```
+
+### Creating Custom Selectors
+
+```ts
+import { createSliceSelector } from '@videojs/store';
+
+const selectMyFeature = createSliceSelector(mySlice);
+```
+
 ## Type Exports
 
 ### From `@videojs/store`
 
 ```ts
-import { shallowEqual } from '@videojs/store';
+import { shallowEqual, createSliceSelector } from '@videojs/store';
 ```
 
-| Export         | Purpose                          |
-| -------------- | -------------------------------- |
-| `shallowEqual` | Shallow comparison for selectors |
+| Export                | Purpose                          |
+| --------------------- | -------------------------------- |
+| `shallowEqual`        | Shallow comparison for selectors |
+| `createSliceSelector` | Create selector from slice       |
+
+### From `@videojs/core/dom`
+
+```ts
+import {
+  features,
+  selectPlayback,
+  selectVolume,
+  selectTime,
+} from '@videojs/core/dom';
+```
+
+| Export           | Purpose                    |
+| ---------------- | -------------------------- |
+| `features`       | Feature bundles            |
+| `select*`        | Pre-built feature selectors |
 
 ### From `@videojs/react`
 
 ```ts
-import { createPlayer, features, usePlayer } from '@videojs/react';
+import { createPlayer } from '@videojs/react';
 ```
 
 ### From `@videojs/html`
 
 ```ts
-import { createPlayer, features, MediaElement } from '@videojs/html';
+import { createPlayer, MediaElement } from '@videojs/html';
 ```
 
 | Export          | Purpose                           |
 | --------------- | --------------------------------- |
 | `createPlayer`  | Factory for player infrastructure |
-| `features`      | Feature definitions and bundles   |
 | `MediaElement`  | Base class for UI primitives      |
diff --git a/rfc/player-api/architecture.md b/rfc/player-api/architecture.md
index a3fae373..15f4cd33 100644
--- a/rfc/player-api/architecture.md
+++ b/rfc/player-api/architecture.md
@@ -7,146 +7,176 @@ Internal structure of the Player API. Implementation detail for feature authors.
 ```
                           createPlayer()
                                │
-                     filters by feature.type
+                    creates Store<PlayerTarget>
                                │
-                   ┌───────────┴───────────┐
-                   ▼                       ▼
-       ┌───────────────────┐   ┌───────────────────┐
-       │   Media Store     │   │   Player Store    │
-       │  target: <video>  │◄──│  target: container│
-       │                   │   │                   │
-       │  playback, volume │   │  fullscreen, idle │
-       │  time, etc.       │   │  keyboard, etc.   │
-       └───────────────────┘   └───────────────────┘
-                                        │
-                                 store.get(feature)
-                                        │
-                              Cross-feature access
+                               ▼
+                   ┌───────────────────────┐
+                   │        Store          │
+                   │  target: PlayerTarget │
+                   │                       │
+                   │  playback, volume,    │
+                   │  time, fullscreen...  │
+                   └───────────────────────┘
+                               │
+                        store.state
+                               │
+                    ┌──────────┴──────────┐
+                    ▼                     ▼
+              selectPlayback()      selectVolume()
+                    │                     │
+                    ▼                     ▼
+              PlaybackState         VolumeState
 ```
 
-**Key insight:** Player store holds reference to media store. Features use `store.get()` for cross-feature access, abstracting away which store a feature lives on.
+**Key insight:** Single store with composite target. Features define slices that are combined. Selectors extract typed state for UI components.
 
-## Two Stores
+## PlayerTarget
 
-### Why Two Stores
-
-| Reason                | Explanation                                                            |
-| --------------------- | ---------------------------------------------------------------------- |
-| **Different targets** | Media features target `HTMLMediaElement`. Player features target container. |
-| **Attachment timing** | Video element and container mount at different times.                  |
-| **Type safety**       | Features declare which target they need. TypeScript catches mismatches. |
-| **Standalone media**  | Headless player, audio-only, programmatic control. Media store works alone. |
-
-### Media Store
-
-```ts
-interface MediaTarget {
-  element: HTMLMediaElement;
-}
-```
-
-Media features observe and control the `<video>` or `<audio>` element directly.
-
-### Player Store
+All features receive a composite target containing both media element and container:
 
 ```ts
 interface PlayerTarget {
-  container: HTMLElement;
-  mediaStore: MediaStore;
+  media: Media;                    // HTMLMediaElement
+  container: MediaContainer | null; // Container element (optional)
 }
 ```
 
-Player features can:
+This allows features to:
 
-- Control the container element (fullscreen, focus)
-- Access media features via `store.get()` for coordination
+- Observe and control the media element directly
+- Access the container for UI concerns (fullscreen, focus)
+- Work with media-only scenarios (headless, audio)
 
-## Feature Registry
-
-Each store maintains a feature registry:
+## Store Type
 
 ```ts
-interface Store {
-  features: Map<symbol, Feature>;
-
-  get(feature: Feature | FeatureKey | string): Slice | undefined;
-  has(feature: Feature | FeatureKey | string): boolean;
-}
+type Store<Target, State> = {
+  readonly target: Target | null;
+  readonly state: State;
+  attach(target: Target): () => void;
+  subscribe(callback: () => void): () => void;
+  destroy(): void;
+} & State;  // Direct state access via intersection
 ```
 
-Features are keyed by their `feature.key` (symbol).
+The store provides:
 
-## Cross-Feature Access
+- **Direct access** — `store.paused` works for quick reads
+- **State snapshot** — `store.state` for selectors
+- **Attachment** — `store.attach(target)` connects to media element
+- **Subscriptions** — `store.subscribe(callback)` for reactive updates
 
-Features access other features via `store.get()`:
+## Slices and Combine
+
+Features are defined as slices and combined into a single store:
 
 ```ts
-const keyboardFeature = createPlayerFeature({
-  subscribe: ({ store, update, signal }) => {
-    // Access playback feature (might be on media store)
-    const playback = store.get(features.playback);
+import { defineSlice, combine, createStore } from '@videojs/store';
 
-    document.addEventListener('keydown', (e) => {
-      if (e.key === ' ') playback?.toggle();
-    }, { signal });
+const playbackSlice = defineSlice<PlayerTarget>()({
+  state: () => ({ paused: true, ended: false }),
+  attach: ({ target, set, signal }) => {
+    const sync = () => set({ paused: target.media.paused, ended: target.media.ended });
+    target.media.addEventListener('play', sync, { signal });
+    target.media.addEventListener('pause', sync, { signal });
+    sync();
   },
 });
+
+// Combine slices
+const playerSlice = combine(playbackSlice, volumeSlice, timeSlice);
+
+// Create store
+const store = createStore<PlayerTarget>()(playerSlice);
 ```
 
-The store handles looking up features across both stores transparently.
+## Selectors
+
+Selectors extract typed state from the store. They enable:
+
+- **Type-safe access** — TypeScript knows the shape of selected state
+- **Subscription scoping** — Only re-render when selected state changes
+- **Composition** — Derive values from multiple state properties
+
+```ts
+import { createSliceSelector } from '@videojs/store';
+
+// Create selector from slice
+const selectPlayback = createSliceSelector(playbackSlice);
+
+// Usage in React
+const playback = usePlayer(selectPlayback);
+// Type: { paused: boolean; ended: boolean; ... } | undefined
+
+// Usage in HTML
+const ctrl = new PlayerController(this, context, selectPlayback);
+// ctrl.value: { paused: boolean; ended: boolean; ... } | undefined
+```
+
+### Pre-built Selectors
+
+Standard selectors are exported from `@videojs/core/dom`:
+
+```ts
+import {
+  selectPlayback,
+  selectVolume,
+  selectTime,
+  selectSource,
+  selectBuffer,
+} from '@videojs/core/dom';
+```
 
 ## Reactive System
 
-Selector-based subscriptions via `useSyncExternalStore` (React) or ReactiveElement's update cycle (HTML).
+Selector-based subscriptions via `useSyncExternalStore` (React) or controller update cycle (HTML).
 
 ### Subscription Flow
 
-1. **Subscribe** — `usePlayer(feature, selector)` subscribes to store
-2. **Snapshot** — On change, `feature.getSnapshot()` called
-3. **Compare** — Selector result compared with `shallowEqual`
-4. **Update** — If different, trigger re-render
+1. **Subscribe** — `usePlayer(selector)` subscribes to store
+2. **Snapshot** — On change, `store.state` provides current state
+3. **Select** — Selector extracts relevant state
+4. **Compare** — Result compared with `shallowEqual`
+5. **Update** — If different, trigger re-render
 
-### Feature Subscriptions
+### Performance
 
-When using `usePlayer(feature)`:
+Selectors with `shallowEqual` comparison prevent unnecessary re-renders:
 
-1. Subscribe scoped to that feature's state keys
-2. Only re-render when that feature's state changes
-3. Other features updating don't cause re-render
+```tsx
+// Only re-renders when paused OR ended changes
+const playback = usePlayer(selectPlayback);
 
-```ts
-// Only subscribes to playback state
-const playback = usePlayer(features.playback);
-
-// currentTime updates (time feature) don't affect this component
+// currentTime updates (60fps during playback) don't affect this component
 ```
 
 ## File Structure
 
-| Path                                     | Purpose                                      |
-| ---------------------------------------- | -------------------------------------------- |
-| `packages/store/src/`                    | Core store, features, selectors              |
-| `packages/core/src/dom/features/media/`  | Media features (playback, volume, time)      |
-| `packages/core/src/dom/features/player/` | Player features (fullscreen, keyboard, idle) |
-| `packages/html/src/`                     | HTML player + skins                          |
-| `packages/react/src/`                    | React player + skins                         |
+| Path                                  | Purpose                             |
+| ------------------------------------- | ----------------------------------- |
+| `packages/store/src/core/`            | Core store, slices, selectors       |
+| `packages/store/src/react/`           | React hooks (`useStore`)            |
+| `packages/store/src/lit/`             | Lit controllers (`StoreController`) |
+| `packages/core/src/dom/`              | PlayerTarget, features, selectors   |
+| `packages/html/src/`                  | HTML player, mixins, elements       |
+| `packages/react/src/`                 | React player, context, hooks        |
 
 ## Progressive Complexity
 
-| Level           | Example                                         | Sees internal stores? |
-| --------------- | ----------------------------------------------- | --------------------- |
-| Use skin        | `<VideoSkin>`                                   | No                    |
-| Use features    | `createPlayer({ features: [features.video] })`    | No                    |
-| Custom features | `createPlayer({ features: [..., myFeature] })`  | No                    |
-| Use hooks       | `usePlayer(features.playback)`                  | No                    |
-| Write feature   | `createPlayerFeature({ ... })`                  | Yes (store.get)       |
+| Level           | Example                                        | Sees internals? |
+| --------------- | ---------------------------------------------- | --------------- |
+| Use skin        | `<VideoSkin>`                                  | No              |
+| Use features    | `createPlayer({ features: [...] })`            | No              |
+| Custom features | `createPlayer({ features: [..., mySlice] })`   | No              |
+| Use hooks       | `usePlayer(selectPlayback)`                    | No              |
+| Write slice     | `defineSlice<PlayerTarget>()({ ... })`         | Yes (attach)    |
 
-Internal stores are implementation details until you author features.
+Store internals are implementation details until you author slices.
 
 ## Constraints
 
-- Media features live in `@videojs/core/dom/features/media`
-- Player features live in `@videojs/core/dom/features/player`
+- Features target `PlayerTarget` (composite of media + container)
+- Slices live in `@videojs/core/dom`
 - `createPlayer` lives in `@videojs/html` and `@videojs/react`
-- Two stores internally, one API externally
-- `store.get()` and `store.has()` are the feature access primitives
+- Single store, selectors for typed access
+- `shallowEqual` comparison in React hooks and Lit controllers
diff --git a/rfc/player-api/decisions.md b/rfc/player-api/decisions.md
index cc5d73a1..42ebba8b 100644
--- a/rfc/player-api/decisions.md
+++ b/rfc/player-api/decisions.md
@@ -40,29 +40,63 @@ Player is simple. Features are additive. Skins adapt.
 
 Features match the mental model: start simple, add what you need.
 
-## Selectors (No Proxy Tracking)
+## Single Store with PlayerTarget
+
+**Decision:** Use a single store with composite `PlayerTarget`.
+
+```ts
+interface PlayerTarget {
+  media: Media;                    // HTMLMediaElement
+  container: MediaContainer | null; // Container element (optional)
+}
+```
+
+### Why Single Store
+
+| Reason                | Explanation                                                     |
+| --------------------- | --------------------------------------------------------------- |
+| **Simpler mental model** | One store, one target, one subscription flow                 |
+| **Unified state**     | All state in one place, selectors work across all slices        |
+| **Easier debugging**  | Single state tree to inspect                                    |
+| **Composite target**  | `PlayerTarget` gives features access to both media and container |
+| **Optional container** | `container: null` for headless/audio-only use cases            |
+
+### Trade-off
+
+Features that only need the media element still receive the full `PlayerTarget`. This is acceptable because:
+
+- Type narrowing via `target.media` is straightforward
+- No runtime overhead — just property access
+- Consistent API for all features
+
+## Selector-Based Access
 
 **Decision:** Use explicit selectors for state subscriptions.
 
 ```tsx
 // Selector-based
-const paused = usePlayer(features.playback, s => s.paused);
+const playback = usePlayer(selectPlayback);
+const paused = usePlayer((s) => s.paused);
 ```
 
-**Rationale:**
+### Why Selectors over Feature-Scoped Hooks
 
-- **Explicit** — You control what you subscribe to
-- **Predictable** — No magic tracking, clear performance characteristics
-- **Standard** — Matches Zustand, Redux Toolkit patterns
+| Reason                | Explanation                                                |
+| --------------------- | ---------------------------------------------------------- |
+| **Simpler API**       | One hook pattern, not multiple hook variants               |
+| **Matches ecosystem** | Zustand, Redux Toolkit use same pattern                    |
+| **Explicit**          | You control what you subscribe to                          |
+| **Composable**        | Selectors can derive, combine, filter                      |
+| **No magic**          | No proxy tracking, clear performance characteristics       |
 
-**Trade-off:** More ceremony than proxy tracking, but no surprises.
+**Trade-off:** Requires importing selectors separately from `@videojs/core/dom`.
 
 ## shallowEqual for Object Selectors
 
 **Decision:** Object selector results compared with `shallowEqual`.
 
 ```tsx
-const state = usePlayer(s => ({ paused: s.paused, volume: s.volume }));
+const state = usePlayer((s) => ({ paused: s.paused, volume: s.volume }));
 // Re-renders only when paused OR volume changes
 ```
 
@@ -72,83 +106,67 @@ const state = usePlayer(s => ({ paused: s.paused, volume: s.volume }));
 - Without shallow comparison, new object = new reference = re-render
 - `shallowEqual` exported from `@videojs/store` for custom use
 
-## Feature Keys
+## Selector Returns Undefined, Not Throws
 
-**Decision:** Features can have custom symbol keys with type-carrying.
-
-```ts
-const PLAYBACK_KEY = Symbol.for('@videojs/playback');
-export const playbackKey: FeatureKey<typeof playbackFeature> = PLAYBACK_KEY;
-```
+**Decision:** Selectors return `T | undefined`, don't throw.
 
 **Rationale:**
 
-- **Smaller imports** — Import just the key, not the feature definition
-- **Cross-realm** — `Symbol.for()` works across module boundaries
-- **Type inference** — `FeatureKey<F>` carries feature type for `store.get()`
-
-## usePlayer Overloads
-
-**Decision:** Single hook with multiple overloads.
-
-```tsx
-usePlayer(feature)           // Full feature slice
-usePlayer(feature, selector) // Selected value from feature
-usePlayer(selector)          // Selected value from all state
-```
-
-**Rationale:**
-
-- **Single hook** — Less API surface to learn
-- **Progressive** — Start simple, add selector for performance
-- **Consistent** — Same pattern for feature access and selection
-
-**Why no array support?** Call `usePlayer` multiple times. Simpler, explicit.
-
-```tsx
-const playback = usePlayer(features.playback);
-const volume = usePlayer(features.volume);
-```
-
-## Feature Returns Undefined, Not Throws
-
-**Decision:** `usePlayer(feature)` returns `Slice | undefined`, doesn't throw.
-
-**Rationale:**
-
-- Primitives need graceful handling — they don't know user's feature config
-- Throwing would break apps when features are misconfigured
+- Primitives need graceful handling — they don't know user's slice config
+- Throwing would break apps when slices are misconfigured
 - Caller decides how to handle: return null, show fallback, throw themselves
 
-## store.get / store.has
-
-**Decision:** Use `store.get()` and `store.has()` for feature access in feature context.
-
-```ts
-subscribe: ({ store }) => {
-  const playback = store.get(features.playback);
-  if (store.has('time')) { /* ... */ }
-}
+```tsx
+const playback = usePlayer(selectPlayback);
+if (!playback) return null; // Graceful handling
 ```
 
-**Rationale:**
+## createPlayer Factory
 
-- **Map-like** — Familiar pattern, `.get()` returns `T | undefined`
-- **Unified** — Same API for feature reference, key, or name
-- **Cross-store** — Abstracts which store a feature lives on
+**Decision:** Use `createPlayer()` factory that returns typed infrastructure.
 
-## No Store Merge
+```ts
+const { Provider, Container, usePlayer } = createPlayer({
+  features: [...features.video],
+});
+```
 
-**Decision:** Keep two stores internally (media + player).
+### Why Factory
 
-**Rationale:**
+| Reason                | Explanation                                                |
+| --------------------- | ---------------------------------------------------------- |
+| **Type inference**    | Return types inferred from features array                  |
+| **Scoped context**    | Each `createPlayer` call creates isolated context          |
+| **Explicit config**   | Features declared upfront, not discovered at runtime       |
+| **Tree-shakeable**    | Unused features not bundled                                |
 
-- Different targets (media element vs container)
-- Different attachment timing
-- `store.get()` abstracts cross-store access
-- Feature authors use same API regardless of store
+### Why Not Global Registration
 
-**Trade-off:** Internal complexity, but hidden from users.
+Global registration (like side-effect imports) works for HTML but doesn't fit React's component model. The factory provides:
+
+- Type safety from features to hooks
+- Multiple players with different features
+- Clear dependency graph
+
+## PlayerElement vs Mixins
+
+**Decision:** Provide both `PlayerElement` (simple) and mixins (advanced).
+
+```ts
+// Simple — complete player element
+customElements.define('video-player', PlayerElement);
+
+// Advanced — custom behavior
+class MyPlayer extends PlayerMixin(MediaElement) {}
+```
+
+### Why Both
+
+| Use Case        | Solution       | When to Use                        |
+| --------------- | -------------- | ---------------------------------- |
+| Standard player | `PlayerElement` | Most cases, just works            |
+| Custom behavior | `PlayerMixin`  | Need to extend lifecycle, add logic |
+| Split concerns  | `ProviderMixin` + `ContainerMixin` | Media and controls in different DOM locations |
 
 ## Naming
 
@@ -160,9 +178,9 @@ subscribe: ({ store }) => {
 
 ### features (not slices)
 
-- "Slice" implies Redux mental model (store owns state, reducers modify)
-- Our pattern: target owns state, features observe and request
+- "Slice" implies Redux mental model
 - "Feature" matches user mental model: "I want the fullscreen feature"
+- Slices are the implementation, features are the concept
 
 ### MediaElement (not VjsElement)
 
@@ -207,7 +225,7 @@ subscribe: ({ store }) => {
 ```ts
 // These are equivalent:
 features.video
-[features.playback, features.volume, features.time, features.presentation, features.userActivity, /* ... */]
+[playbackSlice, volumeSlice, timeSlice, sourceSlice, bufferSlice]
 ```
 
 **Rationale:**
@@ -215,3 +233,25 @@ features.video
 - Bundles reduce API surface — fewer imports for common cases
 - Granular still available — full control when needed
 - Upgrade path — add to bundle, users get it automatically
+
+## Future Work Deferred
+
+Some patterns were considered but deferred:
+
+### Feature Keys
+
+```ts
+const playbackKey: FeatureKey<typeof playbackSlice> = PLAYBACK_KEY;
+store.get(playbackKey); // Typed access without importing slice
+```
+
+**Deferred:** `createSliceSelector` provides equivalent type-safe access without the complexity of symbol-based keys.
+
+### store.get / store.has
+
+```ts
+store.get(feature); // Direct feature access
+store.has(feature); // Check if feature exists
+```
+
+**Deferred:** Selectors provide the same capability with better composition and TypeScript inference.
diff --git a/rfc/player-api/examples.md b/rfc/player-api/examples.md
index 87303173..e5e2d2a3 100644
--- a/rfc/player-api/examples.md
+++ b/rfc/player-api/examples.md
@@ -7,10 +7,11 @@ Progressive journey from simple to fully custom.
 ### React
 
 ```tsx
-import { createPlayer, features } from '@videojs/react';
+import { createPlayer } from '@videojs/react';
+import { features } from '@videojs/core/dom';
 
-const { Provider: VideoProvider, Container: VideoContainer, usePlayer } = createPlayer({
-  features: [features.video]
+const { Provider: VideoProvider, Container: VideoContainer } = createPlayer({
+  features: [...features.video],
 });
 
 function App() {
@@ -28,7 +29,7 @@ function App() {
 ### HTML
 
 ```ts
-import '@videojs/html/player/video'; // includes features.video
+import '@videojs/html/player/video';
 ```
 
 ```html
@@ -45,11 +46,12 @@ import '@videojs/html/player/video'; // includes features.video
 ```tsx
 import '@videojs/react/skin/video.css';
 
-import { createPlayer, features } from '@videojs/react';
+import { createPlayer } from '@videojs/react';
+import { features } from '@videojs/core/dom';
 import { VideoSkin } from '@videojs/react/skin/video';
 
 const { Provider: VideoProvider } = createPlayer({
-  features: [features.video]
+  features: [...features.video],
 });
 
 function App() {
@@ -86,12 +88,14 @@ Skin detects chapters feature, shows chapter menu.
 ### React
 
 ```tsx
-import { createPlayer, features } from '@videojs/react';
 import '@videojs/react/skin/video.css';
+
+import { createPlayer } from '@videojs/react';
+import { features, chaptersSlice } from '@videojs/core/dom';
 import { VideoSkin } from '@videojs/react/skin/video';
 
 const { Provider: VideoProvider } = createPlayer({
-  features: [features.video, features.chapters]
+  features: [...features.video, chaptersSlice],
 });
 
 function App() {
@@ -129,13 +133,15 @@ Skin detects streaming features, shows quality/tracks menus.
 ### React
 
 ```tsx
-import { createPlayer, features } from '@videojs/react';
-import { HlsVideo } from '@videojs/react/media/hls';
 import '@videojs/react/skin/video.css';
+
+import { createPlayer } from '@videojs/react';
+import { features } from '@videojs/core/dom';
+import { HlsVideo } from '@videojs/react/media/hls';
 import { VideoSkin } from '@videojs/react/skin/video';
 
 const { Provider: VideoProvider } = createPlayer({
-  features: [features.video, features.streaming]
+  features: [...features.video, ...features.streaming],
 });
 
 function App() {
@@ -174,13 +180,15 @@ Same skin adapts to show ad UI.
 ### React
 
 ```tsx
-import { createPlayer, features } from '@videojs/react';
-import { HlsVideo } from '@videojs/react/media/hls';
 import '@videojs/react/skin/video.css';
+
+import { createPlayer } from '@videojs/react';
+import { features } from '@videojs/core/dom';
+import { HlsVideo } from '@videojs/react/media/hls';
 import { VideoSkin } from '@videojs/react/skin/video';
 
 const { Provider: VideoProvider } = createPlayer({
-  features: [features.video, features.streaming, features.ads]
+  features: [...features.video, ...features.streaming, ...features.ads],
 });
 
 function App() {
@@ -210,22 +218,21 @@ import '@videojs/html/skin/video';
 ### React
 
 ```tsx
-import { createPlayer, features } from '@videojs/react';
+import { createPlayer } from '@videojs/react';
+import { defineSlice } from '@videojs/store';
+import { features, selectPlayback, selectTime, type PlayerTarget } from '@videojs/core/dom';
 import { HlsVideo } from '@videojs/react/media/hls';
 
-const myAnalytics = createMediaFeature({
-  name: 'analytics',
-  initialState: {},
-  subscribe: ({ store, signal }) => {
-    // Custom analytics logic
-  },
-  request: {
-    trackEvent: (name) => console.log(name),
-  },
+const analyticsSlice = defineSlice<PlayerTarget>()({
+  state: ({ task }) => ({
+    trackEvent: task('trackEvent', ({ get }, name: string) => {
+      console.log('track', name, get());
+    }),
+  }),
 });
 
 const { Provider: VideoProvider, Container: VideoContainer, usePlayer } = createPlayer({
-  features: [features.video, features.streaming, myAnalytics]
+  features: [...features.video, ...features.streaming, analyticsSlice],
 });
 
 function App() {
@@ -240,9 +247,8 @@ function App() {
 }
 
 function MyCustomSkin() {
-  const playback = usePlayer(features.playback);
-  const time = usePlayer(features.time);
-  const analytics = usePlayer(myAnalytics);
+  const playback = usePlayer(selectPlayback);
+  const time = usePlayer(selectTime);
 
   if (!playback || !time) return null;
 
@@ -260,18 +266,19 @@ function MyCustomSkin() {
 ### HTML
 
 ```ts
-import { createPlayer, features, MediaElement } from '@videojs/html';
+import { createPlayer, MediaElement } from '@videojs/html';
+import { features, selectPlayback } from '@videojs/core/dom';
 
-const { PlayerElement, PlayerController } = createPlayer({
-  features: [features.video, features.streaming, myCustomFeature]
+const { PlayerElement, PlayerController, context } = createPlayer({
+  features: [...features.video, ...features.streaming, myCustomSlice],
 });
 
 // Define player element
 customElements.define('my-video-player', PlayerElement);
 
-// Custom play button — host is the button
+// Custom play button
 class MyPlayButton extends MediaElement {
-  #playback = new PlayerController(this, features.playback);
+  #playback = new PlayerController(this, context, selectPlayback);
 
   override connectedCallback() {
     super.connectedCallback();
@@ -328,22 +335,23 @@ customElements.define('my-play-button', MyPlayButton);
 ### React
 
 ```tsx
-import { createPlayer, features } from '@videojs/react';
+import { createPlayer } from '@videojs/react';
+import { features, selectPlayback, selectTime } from '@videojs/core/dom';
 
-const { Provider: VideoProvider, usePlayer } = createPlayer({
-  features: [features.playback, features.time]
+const { Provider: AudioProvider, usePlayer } = createPlayer({
+  features: [...features.audio],
 });
 
 function AudioController() {
-  const playback = usePlayer(features.playback);
-  const time = usePlayer(features.time);
+  const playback = usePlayer(selectPlayback);
+  const time = usePlayer(selectTime);
 
   // Programmatic control, no UI
   useEffect(() => {
     if (time && time.currentTime > 60) {
       playback?.pause();
     }
-  }, [time?.currentTime]);
+  }, [time?.currentTime, playback]);
 
   return <audio src="audio.mp3" />;
 }
@@ -356,7 +364,7 @@ function AudioController() {
 ```tsx
 function TimeDisplay() {
   // Only re-renders when currentTime changes
-  const currentTime = usePlayer(features.time, s => s.currentTime);
+  const currentTime = usePlayer((s) => s.currentTime);
 
   if (currentTime === undefined) return null;
 
@@ -369,7 +377,7 @@ function TimeDisplay() {
 ```tsx
 function PlayState() {
   // Derived value, re-renders when paused OR ended changes
-  const isPlaying = usePlayer(features.playback, s => !s.paused && !s.ended);
+  const isPlaying = usePlayer((s) => !s.paused && !s.ended);
 
   if (isPlaying === undefined) return null;
 
@@ -381,8 +389,8 @@ function PlayState() {
 
 ```tsx
 function DebugPanel() {
-  // Global selector across all features
-  const debug = usePlayer(s => ({
+  // Select across multiple properties
+  const debug = usePlayer((s) => ({
     paused: s.paused,
     currentTime: s.currentTime,
     volume: s.volume,
@@ -390,3 +398,32 @@ function DebugPanel() {
 
   return <pre>{JSON.stringify(debug, null, 2)}</pre>;
 }
+```
+
+## 10. Using Mixins (HTML)
+
+When you need custom player behavior:
+
+```ts
+import { createPlayer, MediaElement } from '@videojs/html';
+import { features } from '@videojs/core/dom';
+
+const { PlayerMixin } = createPlayer({
+  features: [...features.video],
+});
+
+class MyVideoPlayer extends PlayerMixin(MediaElement) {
+  override connectedCallback() {
+    super.connectedCallback();
+
+    // Custom initialization
+    this.addEventListener('fullscreenchange', this.#onFullscreen);
+  }
+
+  #onFullscreen = () => {
+    // Custom fullscreen handling
+  };
+}
+
+customElements.define('my-video-player', MyVideoPlayer);
+```
diff --git a/rfc/player-api/features.md b/rfc/player-api/features.md
index 4f6cfb1c..d428bb49 100644
--- a/rfc/player-api/features.md
+++ b/rfc/player-api/features.md
@@ -1,206 +1,285 @@
 # Features
 
-Features are the primary abstraction. They bundle related state and requests.
+Features are the primary abstraction. They bundle related state and actions as slices.
 
-## Feature Definition
+## Slice Definition
 
-### createFeature
+### defineSlice
 
 ```ts
-import { createFeature } from '@videojs/store';
+import { defineSlice } from '@videojs/store';
+import type { PlayerTarget } from '@videojs/core/dom';
 
-const playbackFeature = createFeature<HTMLMediaElement>()({
-  name: 'playback',
-
-  initialState: { 
-    paused: true, 
-    ended: false 
-  },
-
-  getSnapshot: ({ target }) => ({
-    paused: target.paused,
-    ended: target.ended,
+const playbackSlice = defineSlice<PlayerTarget>()({
+  state: ({ task }) => ({
+    paused: true,
+    ended: false,
+    play: task('play', async ({ target }) => {
+      await target.media.play();
+    }),
+    pause: task('pause', ({ target }) => {
+      target.media.pause();
+    }),
+    toggle: task('toggle', async ({ target }) => {
+      if (target.media.paused) {
+        await target.media.play();
+      } else {
+        target.media.pause();
+      }
+    }),
   }),
 
-  subscribe: ({ target, update, signal }) => {
-    target.addEventListener('play', update, { signal });
-    target.addEventListener('pause', update, { signal });
-    target.addEventListener('ended', update, { signal });
-  },
+  attach: ({ target, set, signal }) => {
+    const { media } = target;
 
-  request: {
-    play: (_, { target }) => target.play(),
-    pause: (_, { target }) => target.pause(),
-    toggle: (_, { target }) => target.paused ? target.play() : target.pause(),
+    const sync = () => set({
+      paused: media.paused,
+      ended: media.ended,
+    });
+
+    media.addEventListener('play', sync, { signal });
+    media.addEventListener('pause', sync, { signal });
+    media.addEventListener('ended', sync, { signal });
+    sync();
   },
 });
 ```
 
 ### Config Properties
 
-| Property       | Type                          | Description                              |
-| -------------- | ----------------------------- | ---------------------------------------- |
-| `key`          | `symbol` (optional)           | Unique identifier. Auto-generated if not provided. |
-| `name`         | `string`                      | Human-readable name for debugging        |
-| `initialState` | `object`                      | Initial state before target attached     |
-| `getSnapshot`  | `(ctx) => State`              | Derive state from target                 |
-| `subscribe`    | `(ctx) => void`               | Set up subscriptions, call `update()` on changes |
-| `request`      | `Record<string, RequestHandler>` | Actions that modify target           |
+| Property | Type                     | Description                              |
+| -------- | ------------------------ | ---------------------------------------- |
+| `state`  | `(ctx) => State`         | Initial state factory with task helper   |
+| `attach` | `(ctx) => void`          | Set up subscriptions when target attached |
 
-### Context Object
+### State Context
 
-Both `getSnapshot`, `subscribe`, and `request` handlers receive a context:
+The `state` function receives a context for defining tasks:
 
 ```ts
-interface FeatureContext {
-  target: Target;        // HTMLMediaElement or PlayerTarget
-  store: Store;          // Access other features via store.get()
-  signal: AbortSignal;   // For cleanup (subscribe only)
-  update: () => void;    // Trigger re-snapshot (subscribe only)
+interface StateContext<Target> {
+  task: TaskFactory<Target>;  // Create async actions
+  target: () => Target;       // Get current target (throws if not attached)
 }
 ```
 
-## Feature Keys
+### Attach Context
 
-Features can define a custom key for identity and type-carrying.
-
-### Pattern
+The `attach` function receives a context for syncing state:
 
 ```ts
-// Define key
-const PLAYBACK_KEY = Symbol.for('@videojs/playback');
+interface AttachContext<Target, State> {
+  target: Target;                       // The attached target
+  signal: AbortSignal;                  // Cleanup signal
+  get: () => State;                     // Read current state
+  set: (partial: Partial<State>) => void; // Update state
+  store: { state: State; subscribe: ... }; // Store access
+}
+```
 
-// Create feature with key
-const playbackFeature = createFeature({
-  key: PLAYBACK_KEY,
-  name: 'playback',
-  // ...
-});
+## Combining Slices
 
-// Export typed key
-export const playbackKey: FeatureKey<typeof playbackFeature> = PLAYBACK_KEY;
+Slices are combined into a single store:
 
-// Export feature
-export { playbackFeature };
+```ts
+import { combine, createStore } from '@videojs/store';
+
+const playerSlice = combine(
+  playbackSlice,
+  volumeSlice,
+  timeSlice,
+  sourceSlice,
+  bufferSlice,
+);
+
+const store = createStore<PlayerTarget>()(playerSlice);
+```
+
+## Feature Bundles
+
+Bundles are pre-composed arrays of slices for common use cases.
+
+### Base Bundles
+
+```ts
+import { features } from '@videojs/core/dom';
+
+// Video player base
+features.video = [
+  playbackSlice,
+  volumeSlice,
+  timeSlice,
+  sourceSlice,
+  bufferSlice,
+];
+
+// Audio player base
+features.audio = [
+  playbackSlice,
+  volumeSlice,
+  timeSlice,
+  sourceSlice,
+  bufferSlice,
+];
 ```
 
 ### Usage
 
 ```ts
-// Import just the key (smaller bundle, no feature code)
-import { playbackKey } from '@videojs/core/features';
+import { createPlayer } from '@videojs/react';
+import { features } from '@videojs/core/dom';
 
-// Typed access
-const playback = store.get(playbackKey); // PlaybackSlice | undefined
+// Use bundle (spread required)
+createPlayer({
+  features: [...features.video],
+});
+
+// Extend bundle
+createPlayer({
+  features: [...features.video, myCustomSlice],
+});
 ```
 
-### FeatureKey Type
-
-```ts
-// Type carrier — key holds the feature's type info
-type FeatureKey<F extends Feature> = symbol & { __feature?: F };
-```
-
-### Why Keys?
-
-1. **Smaller imports** — Import just the key when you don't need the feature definition
-2. **Cross-realm identity** — `Symbol.for()` works across module boundaries
-3. **Type inference** — `FeatureKey<F>` carries the feature type for `store.get()`
-## Feature Bundles
-
-Bundles are sugar for common feature combinations.
-
-### Base Bundles
-
-```ts
-// Video player base
-features.video = [
-  features.playback,
-  features.volume,
-  features.time,
-  features.presentation,
-  features.userActivity,
-];
-
-// Audio player base
-features.audio = [
-  features.playback,
-  features.volume,
-  features.time,
-];
-```
-
-### Additional Bundles (Beta+)
+### Additional Bundles (Future)
 
 ```ts
 features.streaming = [
-  features.qualitySelection,
-  features.audioTracks,
-  features.textTracks,
+  qualitySelectionSlice,
+  audioTracksSlice,
+  textTracksSlice,
 ];
 
 features.ads = [
-  features.adMarkers,
-  features.adSkip,
-  features.adCountdown,
+  adMarkersSlice,
+  adSkipSlice,
+  adCountdownSlice,
 ];
 
 features.live = [
-  features.liveIndicator,
-  features.lowLatency,
-  features.seekToLive,
-  features.dvr,
+  liveIndicatorSlice,
+  seekToLiveSlice,
+  dvrSlice,
 ];
 ```
 
-### Granular vs Bundled
+## Feature Selectors
+
+Each slice has a corresponding selector for typed access:
 
 ```ts
-// Granular — import individual features
-import '@videojs/html/feature/quality-selection';
-import '@videojs/html/feature/audio-tracks';
+import { createSliceSelector } from '@videojs/store';
 
-// Bundled — sugar for above + more
-import '@videojs/html/feature/streaming';
+export const selectPlayback = createSliceSelector(playbackSlice);
+export const selectVolume = createSliceSelector(volumeSlice);
+export const selectTime = createSliceSelector(timeSlice);
 ```
 
-### Extending Bundles
+### Pre-built Selectors
+
+Standard selectors are exported from `@videojs/core/dom`:
 
 ```ts
-createPlayer({
-  features: [features.video, features.streaming, myCustomFeature]
-});
+import {
+  selectPlayback,
+  selectVolume,
+  selectTime,
+  selectSource,
+  selectBuffer,
+} from '@videojs/core/dom';
 ```
 
-## Media vs Player Features
+### Usage
 
-### Media Features
+```tsx
+import { selectPlayback } from '@videojs/core/dom';
 
-Target `HTMLMediaElement`. Handle playback, volume, time, etc.
+function PlayButton() {
+  const playback = usePlayer(selectPlayback);
+
+  if (!playback) return null;
+
+  return (
+    <button onClick={playback.toggle}>
+      {playback.paused ? 'Play' : 'Pause'}
+    </button>
+  );
+}
+```
+
+## Feature Availability
+
+Features may target capabilities the platform doesn't support.
 
 ```ts
-const volumeFeature = createMediaFeature({
-  name: 'volume',
-  initialState: { 
-    volume: 1, 
-    muted: false 
-  },
-  getSnapshot: ({ target }) => ({
-    volume: target.volume,
-    muted: target.muted,
+const volumeSlice = defineSlice<PlayerTarget>()({
+  state: () => ({
+    volume: 1,
+    muted: false,
+    volumeAvailability: 'unsupported' as FeatureAvailability,
+    // ...
   }),
-  // ...
+
+  attach: ({ target, set, signal }) => {
+    const { media } = target;
+
+    // Check platform capability
+    set({ volumeAvailability: canSetVolume(media) });
+
+    // ...
+  },
 });
 ```
 
-### Player Features
-
-Target the container element. Have access to media store via `store.get()`.
+### FeatureAvailability Type
 
 ```ts
-createPlayerFeature({
-  subscribe: ({ store, target, update, signal }) => {
-    // Access media features from player store
-    const playback = store.get(features.playback);
-});
-```
\ No newline at end of file
+type FeatureAvailability = 'available' | 'unavailable' | 'unsupported';
+```
+
+| Value           | Meaning                                                |
+| --------------- | ------------------------------------------------------ |
+| `'unsupported'` | Platform can never do this (e.g., iOS volume)          |
+| `'unavailable'` | Could work, not ready yet (e.g., waiting for manifest) |
+| `'available'`   | Ready to use                                           |
+
+### Handling Unavailable Features
+
+```tsx
+function VolumeSlider() {
+  const volume = usePlayer(selectVolume);
+
+  if (!volume) return null;
+
+  // Hide if platform doesn't support volume control
+  if (volume.volumeAvailability === 'unsupported') return null;
+
+  // Disable if temporarily unavailable
+  const disabled = volume.volumeAvailability !== 'available';
+
+  return (
+    <input
+      type="range"
+      value={volume.volume}
+      onChange={(e) => volume.setVolume(Number(e.target.value))}
+      disabled={disabled}
+    />
+  );
+}
+```
+
+## Future Work
+
+### Feature Keys
+
+Typed symbols for feature identity (not yet implemented):
+
+```ts
+const PLAYBACK_KEY = Symbol.for('@videojs/playback');
+export const playbackKey: FeatureKey<typeof playbackSlice> = PLAYBACK_KEY;
+
+// Usage: smaller imports when you don't need the slice
+import { playbackKey } from '@videojs/core/dom';
+const playback = store.get(playbackKey);
+```
+
+**Deferred:** `createSliceSelector` provides equivalent type-safe access without the complexity.
diff --git a/rfc/player-api/html.md b/rfc/player-api/html.md
index 122c3df8..00561692 100644
--- a/rfc/player-api/html.md
+++ b/rfc/player-api/html.md
@@ -93,15 +93,16 @@ import '@videojs/html/skin/video';
 </video-player>
 ```
 
-### createPlayer (Escape Hatch)
+### createPlayer (Programmatic)
 
 For custom element names or full control:
 
 ```ts
-import { createPlayer, features } from '@videojs/html';
+import { createPlayer } from '@videojs/html';
+import { features } from '@videojs/core/dom';
 
-const { PlayerElement, PlayerController } = createPlayer({
-  features: [features.video, myCustomFeature]
+const { PlayerElement, PlayerController, context } = createPlayer({
+  features: [...features.video],
 });
 
 customElements.define('my-video-player', PlayerElement);
@@ -113,30 +114,50 @@ customElements.define('my-video-player', PlayerElement);
 </my-video-player>
 ```
 
-### Split Provider/Container (Advanced)
+### Mixins (Advanced)
 
-When media element and container need different DOM locations:
+When you need to extend behavior or split provider/container:
 
 ```ts
-import { createPlayer, features } from '@videojs/html';
+import { createPlayer, MediaElement } from '@videojs/html';
+import { features } from '@videojs/core/dom';
 
-const { ProviderElement, ContainerElement } = createPlayer({
-  features: [features.video]
+const { PlayerMixin, ProviderMixin, ContainerMixin } = createPlayer({
+  features: [...features.video],
 });
 
-customElements.define('my-video-provider', ProviderElement);
-customElements.define('my-video-container', ContainerElement);
+// Combined player (provider + container)
+class MyPlayer extends PlayerMixin(MediaElement) {
+  // Custom logic
+}
+
+// Or split for advanced cases
+class MyProvider extends ProviderMixin(MediaElement) {}
+class MyContainer extends ContainerMixin(MediaElement) {}
 ```
 
-```html
-<my-video-provider>
-  <video src="video.mp4">
-  <my-video-container>
-    <!-- Controls here, separate from media -->
-  </my-video-container>
-</my-video-provider>
+## PlayerElement
+
+The simplest way to create a player element:
+
+```ts
+import { createPlayer } from '@videojs/html';
+import { features } from '@videojs/core/dom';
+
+const { PlayerElement } = createPlayer({
+  features: [...features.video],
+});
+
+customElements.define('video-player', PlayerElement);
 ```
 
+`PlayerElement` is a complete player that:
+
+- Creates and manages the store
+- Provides context to descendants
+- Auto-attaches media elements
+- Handles cleanup on disconnect
+
 ## Skins
 
 ### Adaptive Skins
@@ -150,7 +171,7 @@ import '@videojs/html/skin/video';
 ```
 
 ```html
-<video-skin>  <!-- adapts to used features -->
+<video-skin>  <!-- adapts to registered features -->
 ```
 
 ### Named Skins
@@ -177,29 +198,16 @@ skin/
     features.ts
 ```
 
-**features.ts:**
-
-```ts
-import { features } from '@videojs/html';
-
-// Lazy-define element for a feature
-// Shell element registers immediately, loads implementation when feature available
-features.lazy(
-  'qualitySelection',
-  () => import('./ui/quality-menu')
-);
-```
-
 ## MediaElement Base Class
 
-Base class for UI primitives. The host element IS the control (e.g., `<media-play-button>` extends button behavior).
+Base class for UI primitives. No shadow DOM — the host element IS the control.
 
 ```ts
-// src/ui/media-play-button.ts
-import { MediaElement, PlayerController, features } from '@videojs/html';
+import { MediaElement, PlayerController } from '@videojs/html';
+import { selectPlayback } from '@videojs/core/dom';
 
 export class MediaPlayButton extends MediaElement {
-  #playback = new PlayerController(this, features.playback);
+  #playback = new PlayerController(this, context, selectPlayback);
 
   override connectedCallback() {
     super.connectedCallback();
@@ -234,13 +242,26 @@ import '@videojs/html/ui/media-play-button';
 
 ## PlayerController
 
-Reactive controller for accessing player state. Triggers `update()` when subscribed feature changes.
+Reactive controller for accessing player state. Triggers `update()` when subscribed state changes.
+
+### Constructor
 
 ```ts
-import { PlayerController, features, MediaElement } from '@videojs/html';
+// Without selector — store access only, no subscription
+new PlayerController(host, context)
+
+// With selector — subscribes, triggers update on change
+new PlayerController(host, context, selector)
+```
+
+### Example
+
+```ts
+import { MediaElement, PlayerController } from '@videojs/html';
+import { selectVolume } from '@videojs/core/dom';
 
 export class MediaVolumeSlider extends MediaElement {
-  #volume = new PlayerController(this, features.volume);
+  #volume = new PlayerController(this, context, selectVolume);
 
   override connectedCallback() {
     super.connectedCallback();
@@ -255,7 +276,6 @@ export class MediaVolumeSlider extends MediaElement {
     const volume = this.#volume.value;
     if (!volume) return;
 
-    // Host is the slider — update its value
     (this as unknown as HTMLInputElement).value = String(volume.volume);
   }
 }
@@ -263,20 +283,36 @@ export class MediaVolumeSlider extends MediaElement {
 
 ### Controller API
 
-| Property | Returns              | Description                                |
-| -------- | -------------------- | ------------------------------------------ |
-| `value`  | `Slice \| undefined` | Feature slice, triggers update on change   |
+| Property | Type             | Description                                          |
+| -------- | ---------------- | ---------------------------------------------------- |
+| `store`  | `Store`          | Direct store access                                  |
+| `value`  | `R \| undefined` | Selected state (with selector) or snapshot (without) |
+
 ## Mixins
 
 For advanced customization when you need to extend behavior.
 
-### ProviderMixin
+### PlayerMixin
+
+Combined provider + container in one element:
 
 ```ts
-import { createPlayer, features, MediaElement } from '@videojs/html';
+const { PlayerMixin } = createPlayer({
+  features: [...features.video],
+});
 
+class MyPlayer extends PlayerMixin(MediaElement) {
+  // Custom player logic
+}
+```
+
+### ProviderMixin
+
+Provider-only — creates store and provides context:
+
+```ts
 const { ProviderMixin } = createPlayer({
-  features: [features.video]
+  features: [...features.video],
 });
 
 class MyProvider extends ProviderMixin(MediaElement) {
@@ -286,9 +322,11 @@ class MyProvider extends ProviderMixin(MediaElement) {
 
 ### ContainerMixin
 
+Container-only — consumes context and auto-attaches media:
+
 ```ts
 const { ContainerMixin } = createPlayer({
-  features: [features.video]
+  features: [...features.video],
 });
 
 class MyContainer extends ContainerMixin(MediaElement) {
@@ -296,6 +334,19 @@ class MyContainer extends ContainerMixin(MediaElement) {
 }
 ```
 
+### Split Provider/Container
+
+When media element and container need different DOM locations:
+
+```html
+<my-provider>
+  <video src="video.mp4">
+  <my-container>
+    <!-- Controls here, separate from media -->
+  </my-container>
+</my-provider>
+```
+
 ## Full Example
 
 ```ts
@@ -321,3 +372,4 @@ import '@videojs/html/skin/video';
   </video-player>
 </body>
 </html>
+```
diff --git a/rfc/player-api/index.md b/rfc/player-api/index.md
index 29344808..2e615219 100644
--- a/rfc/player-api/index.md
+++ b/rfc/player-api/index.md
@@ -1,20 +1,20 @@
 ---
-status: draft
+status: accepted
 ---
 
 # Player API Design
 
-| Document                           | Purpose                                    |
-| ---------------------------------- | ------------------------------------------ |
-| [index.md](index.md)               | Overview, principles, model                |
-| [api.md](api.md)                   | Surface API (usePlayer, store, controller) |
-| [features.md](features.md)         | Feature definition, keys, bundles          |
-| [primitives.md](primitives.md)     | Library author patterns                    |
-| [architecture.md](architecture.md) | Two-store internals                        |
-| [decisions.md](decisions.md)       | Problem statement, design rationale        |
-| [examples.md](examples.md)         | Progressive journey examples               |
-| [html.md](html.md)                 | HTML elements, imports, skins              |
-| [feedback.md](feedback.md)         | Collected feedback                         |
+| Document                           | Purpose                                   |
+| ---------------------------------- | ----------------------------------------- |
+| [index.md](index.md)               | Overview, principles, model               |
+| [api.md](api.md)                   | Surface API (usePlayer, controller)       |
+| [features.md](features.md)         | Feature definition, slices, bundles       |
+| [primitives.md](primitives.md)     | Library author patterns                   |
+| [architecture.md](architecture.md) | Single-store internals                    |
+| [decisions.md](decisions.md)       | Problem statement, design rationale       |
+| [examples.md](examples.md)         | Progressive journey examples              |
+| [html.md](html.md)                 | HTML elements, imports, skins             |
+| [feedback.md](feedback.md)         | Collected feedback                        |
 
 ## Principles
 
@@ -76,11 +76,12 @@ Start simple                          Add as needed
 ```tsx
 import '@videojs/react/skin/video.css';
 
-import { createPlayer, features } from '@videojs/react';
+import { createPlayer } from '@videojs/react';
+import { features } from '@videojs/core/dom';
 import { VideoSkin } from '@videojs/react/skin/video';
 
-const { Provider: VideoProvider, usePlayer } = createPlayer({
-  features: [features.video]
+const { Provider: VideoProvider } = createPlayer({
+  features: [...features.video],
 });
 
 function App() {
diff --git a/rfc/player-api/primitives.md b/rfc/player-api/primitives.md
index 0285fdba..14d626ac 100644
--- a/rfc/player-api/primitives.md
+++ b/rfc/player-api/primitives.md
@@ -10,7 +10,7 @@ Primitives don't know which features the user configured:
 // Inside @videojs/react — shipped to users
 export function PlayButton() {
   // User might use features.video or a custom subset
-  // We don't know if playback feature is included
+  // We don't know if playback slice is included
 }
 ```
 
@@ -20,21 +20,21 @@ They need:
 2. A way to check if a feature exists
 3. Type narrowing when the feature is present
 
-## Solution: Feature Access Pattern
+## Solution: Selector-Based Access
 
 ### React
 
 ```tsx
-import { usePlayer, features } from '@videojs/react';
+import { selectPlayback } from '@videojs/core/dom';
 
 export function PlayButton() {
-  const playback = usePlayer(features.playback);
+  const playback = usePlayer(selectPlayback);
 
   if (!playback) return null;
 
-  // TypeScript knows playback is PlaybackSlice
+  // TypeScript knows playback shape
   return (
-    <button onClick={playback.paused ? playback.play : playback.pause}>
+    <button onClick={playback.toggle}>
       {playback.paused ? 'Play' : 'Pause'}
     </button>
   );
@@ -44,10 +44,11 @@ export function PlayButton() {
 ### HTML
 
 ```ts
-import { features, MediaElement, PlayerController } from '@videojs/html';
+import { MediaElement } from '@videojs/html';
+import { selectPlayback } from '@videojs/core/dom';
 
 class MediaPlayButton extends MediaElement {
-  #playback = new PlayerController(this, features.playback);
+  #playback = new PlayerController(this, context, selectPlayback);
 
   override connectedCallback() {
     super.connectedCallback();
@@ -57,35 +58,28 @@ class MediaPlayButton extends MediaElement {
   #handleClick = () => {
     this.#playback.value?.toggle();
   };
+
+  override update() {
+    const playback = this.#playback.value;
+    if (!playback) return;
+
+    this.setAttribute('aria-pressed', String(!playback.paused));
+  }
 }
 ```
 
-## Types
+## Selector Types
 
-### FeatureKey
-
-Type carrier for feature keys:
+Selectors extract typed state from the store:
 
 ```ts
-type FeatureKey<F extends Feature> = symbol & { __feature?: F };
+import { createSliceSelector } from '@videojs/store';
+
+const selectPlayback = createSliceSelector(playbackSlice);
+// Type: (state: Record<string, unknown>) => PlaybackState | undefined
 ```
 
-Use with `store.get()` for typed access:
-
-```ts
-import { playbackKey } from '@videojs/core/features';
-
-const playback = store.get(playbackKey); // PlaybackSlice | undefined
-```
-
-### InferFeatureSlice
-
-Infer the slice type from a feature:
-
-```ts
-type PlaybackSlice = InferFeatureSlice<typeof playbackFeature>;
-// { paused: boolean; ended: boolean; play(): void; pause(): void; toggle(): void }
-```
+Returns `undefined` when the slice isn't configured.
 
 ## Patterns
 
@@ -95,12 +89,18 @@ If a primitive requires a feature to function:
 
 ```tsx
 export function VolumeSlider() {
-  const volume = usePlayer(features.volume);
+  const volume = usePlayer(selectVolume);
 
   // Return nothing if feature not available
   if (!volume) return null;
 
-  return <Slider value={volume.volume} onChange={volume.setVolume} />;
+  return (
+    <input
+      type="range"
+      value={volume.volume}
+      onChange={(e) => volume.setVolume(Number(e.target.value))}
+    />
+  );
 }
 ```
 
@@ -110,19 +110,20 @@ If a primitive works without a feature but enhances with it:
 
 ```tsx
 export function TimeSlider() {
-  const time = usePlayer(features.time);
-  const playback = usePlayer(features.playback);
+  const time = usePlayer(selectTime);
+  const playback = usePlayer(selectPlayback);
 
   if (!time) return null;
 
   return (
-    <Slider
+    <input
+      type="range"
       value={time.currentTime}
       max={time.duration}
-      onChange={time.seek}
+      onChange={(e) => time.seek(Number(e.target.value))}
       // Optional: pause during drag
-      onDragStart={playback?.pause}
-      onDragEnd={playback?.play}
+      onMouseDown={() => playback?.pause()}
+      onMouseUp={() => playback?.play()}
     />
   );
 }
@@ -132,9 +133,9 @@ export function TimeSlider() {
 
 ```tsx
 export function Controls() {
-  const playback = usePlayer(features.playback);
-  const volume = usePlayer(features.volume);
-  const fullscreen = usePlayer(features.fullscreen);
+  const playback = usePlayer(selectPlayback);
+  const volume = usePlayer(selectVolume);
+  const fullscreen = usePlayer(selectFullscreen);
 
   // All required
   if (!playback || !volume || !fullscreen) return null;
@@ -149,53 +150,42 @@ export function Controls() {
 }
 ```
 
+### Custom Selectors
+
+Derive values from state:
+
+```tsx
+// Select specific value
+const paused = usePlayer((s) => s.paused);
+
+// Derive value
+const isPlaying = usePlayer((s) => !s.paused && !s.ended);
+
+// Combine multiple properties
+const state = usePlayer((s) => ({
+  paused: s.paused,
+  volume: s.volume,
+}));
+```
+
 ## Cross-Framework Consistency
 
 Same pattern works in React and HTML:
 
-| Concept         | React                | HTML                                        |
-| --------------- | -------------------- | ------------------------------------------- |
-| Hook/Controller | `usePlayer(feature)` | `new PlayerController(this, feature)`       |
-| Get slice       | returns slice        | `controller.value`                          |
-| Check existence | `if (!slice)`        | `if (!slice)`                               |
-| Access state    | `slice.paused`       | `slice.paused`                              |
-| Call request    | `slice.play()`       | `slice.play()`                              |
-## Package Exports
-
-### @videojs/store
-
-```ts
-import { shallowEqual } from '@videojs/store';
-```
-
-### @videojs/core
-
-```ts
-import { 
-  features, createMediaFeature, createPlayerFeature,  
-  playbackKey, volumeKey, timeKey  
-} from '@videojs/core/dom';
-```
-
-### @videojs/react
-
-```ts
-import { createPlayer, usePlayer, features } from '@videojs/react';
-```
-
-### @videojs/html
-
-```ts
-import { createPlayer, features, MediaElement, PlayerController } from '@videojs/html';
-```
+| Concept         | React                      | HTML                                         |
+| --------------- | -------------------------- | -------------------------------------------- |
+| Hook/Controller | `usePlayer(selector)`      | `new PlayerController(this, ctx, selector)`  |
+| Get state       | returns state              | `controller.value`                           |
+| Check existence | `if (!state)`              | `if (!value)`                                |
+| Access state    | `state.paused`             | `value.paused`                               |
+| Call action     | `state.play()`             | `value.play()`                               |
 
 ## Feature Availability
 
 Features may target capabilities the platform doesn't support.
 
-```ts
-// iOS Safari doesn't allow programmatic volume control
-const volume = usePlayer(features.volume);
+```tsx
+const volume = usePlayer(selectVolume);
 volume?.volumeAvailability; // 'available' | 'unavailable' | 'unsupported'
 ```
 
@@ -209,7 +199,7 @@ volume?.volumeAvailability; // 'available' | 'unavailable' | 'unsupported'
 
 ```tsx
 export function VolumeSlider() {
-  const volume = usePlayer(features.volume);
+  const volume = usePlayer(selectVolume);
 
   if (!volume) return null;
 
@@ -219,5 +209,59 @@ export function VolumeSlider() {
   // Disable if temporarily unavailable
   const disabled = volume.volumeAvailability !== 'available';
 
-  return <Slider value={volume.volume} onChange={volume.setVolume} disabled={disabled} />;
+  return (
+    <input
+      type="range"
+      value={volume.volume}
+      onChange={(e) => volume.setVolume(Number(e.target.value))}
+      disabled={disabled}
+    />
+  );
 }
+```
+
+## Package Exports
+
+### @videojs/store
+
+```ts
+import { shallowEqual, createSliceSelector } from '@videojs/store';
+```
+
+### @videojs/core/dom
+
+```ts
+import {
+  features,
+  selectPlayback,
+  selectVolume,
+  selectTime,
+  selectSource,
+  selectBuffer,
+} from '@videojs/core/dom';
+```
+
+### @videojs/react
+
+```ts
+import { createPlayer } from '@videojs/react';
+
+// From createPlayer result
+const { Provider, Container, usePlayer, useMedia } = createPlayer({ ... });
+```
+
+### @videojs/html
+
+```ts
+import { createPlayer, MediaElement } from '@videojs/html';
+
+// From createPlayer result
+const {
+  context,
+  PlayerElement,
+  PlayerController,
+  PlayerMixin,
+  ProviderMixin,
+  ContainerMixin,
+} = createPlayer({ ... });
+```