From 648aae7e31db02f6d69dba138b98e7cbfd398902 Mon Sep 17 00:00:00 2001
From: rahim <rahim.alwer@gmail.com>
Date: Tue, 6 Jan 2026 22:26:09 +1100
Subject: [PATCH] feat(store): lit bindings (#289)

---
 .claude/plans/store-bindings.md               | 211 ++----------
 CLAUDE.md                                     |  35 +-
 eslint.config.mjs                             |   7 +
 packages/core/src/dom/index.ts                |   1 -
 packages/core/src/dom/predicate.ts            |  20 --
 packages/core/src/dom/tests/predicate.test.ts |  77 -----
 packages/store/README.md                      |  36 +--
 packages/store/src/core/queue.ts              | 118 ++++---
 packages/store/src/core/request.ts            |   2 +-
 packages/store/src/core/store.ts              |  16 +-
 packages/store/src/core/tests/queue.test.ts   | 123 +++----
 .../store/src/core/tests/queue.types.test.ts  | 156 +++++++++
 packages/store/src/core/tests/request.test.ts |  16 +-
 .../store/src/core/tests/slice.types.test.ts  | 147 +++++++++
 .../store/src/core/tests/store.types.test.ts  | 253 +++++++++++++++
 packages/store/src/lit/controllers/index.ts   |  23 ++
 .../lit/controllers/mutation-controller.ts    | 139 ++++++++
 .../lit/controllers/optimistic-controller.ts  | 165 ++++++++++
 .../src/lit/controllers/request-controller.ts |  37 +++
 .../lit/controllers/selector-controller.ts    |  54 ++++
 .../src/lit/controllers/tasks-controller.ts   |  55 ++++
 .../tests/mutation-controller.test.ts         | 252 +++++++++++++++
 .../tests/optimistic-controller.test.ts       | 302 ++++++++++++++++++
 .../tests/request-controller.test.ts          |  45 +++
 .../tests/selector-controller.test.ts         | 117 +++++++
 .../tests/tasks-controller.test.ts            |  94 ++++++
 .../src/lit/controllers/tests/types.test.ts   | 143 +++++++++
 packages/store/src/lit/create-store.ts        | 134 ++++++++
 packages/store/src/lit/index.ts               |  20 ++
 packages/store/src/lit/mixins/attach-mixin.ts |  89 ++++++
 .../store/src/lit/mixins/combined-mixin.ts    |  41 +++
 packages/store/src/lit/mixins/index.ts        |   3 +
 .../store/src/lit/mixins/provider-mixin.ts    |  82 +++++
 .../src/lit/mixins/tests/attach-mixin.test.ts |  30 ++
 .../lit/mixins/tests/combined-mixin.test.ts   | 162 ++++++++++
 .../lit/mixins/tests/provider-mixin.test.ts   | 114 +++++++
 .../store/src/lit/mixins/tests/types.test.ts  |  32 ++
 .../store/src/lit/tests/create-store.test.ts  | 115 +++++++
 packages/store/src/lit/tests/test-utils.ts    | 163 ++++++++++
 packages/store/src/react/context.tsx          |   2 +
 packages/store/src/react/hooks.ts             |   1 +
 packages/utils/src/dom/index.ts               |   3 +
 packages/utils/src/dom/predicates.ts          |  11 +
 packages/utils/src/dom/slotted.ts             |  42 +++
 .../utils/src/dom/tests/predicates.test.ts    |  77 +++++
 packages/utils/src/dom/tests/slotted.test.ts  | 175 ++++++++++
 packages/utils/src/dom/types.ts               |  17 +
 packages/utils/src/function/index.ts          |   1 +
 packages/utils/src/function/noop.ts           |   1 +
 packages/utils/src/types/types.ts             |  14 +
 50 files changed, 3561 insertions(+), 412 deletions(-)
 delete mode 100644 packages/core/src/dom/predicate.ts
 delete mode 100644 packages/core/src/dom/tests/predicate.test.ts
 create mode 100644 packages/store/src/core/tests/queue.types.test.ts
 create mode 100644 packages/store/src/core/tests/slice.types.test.ts
 create mode 100644 packages/store/src/core/tests/store.types.test.ts
 create mode 100644 packages/store/src/lit/controllers/index.ts
 create mode 100644 packages/store/src/lit/controllers/mutation-controller.ts
 create mode 100644 packages/store/src/lit/controllers/optimistic-controller.ts
 create mode 100644 packages/store/src/lit/controllers/request-controller.ts
 create mode 100644 packages/store/src/lit/controllers/selector-controller.ts
 create mode 100644 packages/store/src/lit/controllers/tasks-controller.ts
 create mode 100644 packages/store/src/lit/controllers/tests/mutation-controller.test.ts
 create mode 100644 packages/store/src/lit/controllers/tests/optimistic-controller.test.ts
 create mode 100644 packages/store/src/lit/controllers/tests/request-controller.test.ts
 create mode 100644 packages/store/src/lit/controllers/tests/selector-controller.test.ts
 create mode 100644 packages/store/src/lit/controllers/tests/tasks-controller.test.ts
 create mode 100644 packages/store/src/lit/controllers/tests/types.test.ts
 create mode 100644 packages/store/src/lit/create-store.ts
 create mode 100644 packages/store/src/lit/mixins/attach-mixin.ts
 create mode 100644 packages/store/src/lit/mixins/combined-mixin.ts
 create mode 100644 packages/store/src/lit/mixins/index.ts
 create mode 100644 packages/store/src/lit/mixins/provider-mixin.ts
 create mode 100644 packages/store/src/lit/mixins/tests/attach-mixin.test.ts
 create mode 100644 packages/store/src/lit/mixins/tests/combined-mixin.test.ts
 create mode 100644 packages/store/src/lit/mixins/tests/provider-mixin.test.ts
 create mode 100644 packages/store/src/lit/mixins/tests/types.test.ts
 create mode 100644 packages/store/src/lit/tests/create-store.test.ts
 create mode 100644 packages/store/src/lit/tests/test-utils.ts
 create mode 100644 packages/utils/src/dom/predicates.ts
 create mode 100644 packages/utils/src/dom/slotted.ts
 create mode 100644 packages/utils/src/dom/tests/predicates.test.ts
 create mode 100644 packages/utils/src/dom/tests/slotted.test.ts
 create mode 100644 packages/utils/src/dom/types.ts
 create mode 100644 packages/utils/src/function/noop.ts

diff --git a/.claude/plans/store-bindings.md b/.claude/plans/store-bindings.md
index 098f0e01..e4ffeaa7 100644
--- a/.claude/plans/store-bindings.md
+++ b/.claude/plans/store-bindings.md
@@ -75,165 +75,20 @@ Types live next to implementations (no separate `types.ts`).
 
 ---
 
-## Phase 2: Lit Bindings (`@videojs/store/lit`)
+## Phase 2: Lit Bindings (`@videojs/store/lit`) [DONE]
 
-All DOM/Lit bindings live together since they all depend on `@lit/context`.
+> Refer to [PR #289](https://github.com/videojs/v10/pull/289) for implementation details.
 
-### 2.0 @lit/context Research
+Basic Lit bindings for the store:
 
-Key findings from analyzing `@lit/context@1.1.6`:
+- Controllers: `SelectorController`, `RequestController`, `TasksController` for reactive state
+- Mixins: `StoreProviderMixin`, `StoreAttachMixin`, `StoreMixin` (combined) for custom elements
+- `createStore()` factory returning typed mixins, context, and `create()` function
+- Auto-attach media elements via slot change observation
+- Proper cleanup on disconnect (slot listeners, subscriptions)
+- Sync controller values on reconnect to avoid stale state
 
-**Dynamic Value Updates:**
-
-- `ContextProvider.setValue(newValue, force?)` notifies all subscribed consumers
-- Uses `Object.is()` for equality - swapping store objects triggers updates automatically
-- `force = true` needed only for in-place mutations (same reference)
-
-**Subscription Model:**
-
-- Consumers must opt-in: `subscribe: true` in `@consume()` or `ContextConsumer`
-- Without subscription, consumers only receive initial value
-- Provider stores callbacks in `Map<ContextCallback, CallbackInfo>`
-- `updateObservers()` iterates all callbacks on value change
-
-**Store Swapping Pattern (validated):**
-
-```typescript
-class MySkin extends HTMLElement {
-  #provider = new ContextProvider(this, { context: storeContext });
-
-  set store(newStore: Store) {
-    this.#provider.setValue(newStore); // Notifies all subscribers
-  }
-}
-```
-
-### 2.1 `createStore`
-
-**File:** `packages/store/src/lit/create-store.ts`
-
-```typescript
-import type { Context } from '@lit/context';
-import type { ReactiveControllerHost } from '@lit/reactive-element';
-import type { AnySlice, InferSliceTarget, StoreConfig } from '../core';
-
-import { createContext } from '@lit/context';
-
-export interface CreateStoreConfig<Slices extends AnySlice[]> extends StoreConfig<
-  InferSliceTarget<Slices[number]>,
-  Slices
-> {}
-
-export interface CreateStoreResult<Slices extends AnySlice[]> {
-  /** Combined mixin: provides store via context AND auto-attaches slotted media */
-  StoreMixin: <T extends Constructor<HTMLElement>>(Base: T) => T;
-  /** Mixin that provides store via context (no auto-attach) */
-  StoreProviderMixin: <T extends Constructor<HTMLElement>>(Base: T) => T;
-  /** Mixin that auto-attaches slotted media elements (requires store from context) */
-  StoreAttachMixin: <T extends Constructor<HTMLElement>>(Base: T) => T;
-  /** Context for consuming store in controllers */
-  context: Context<Store<InferSliceTarget<Slices[number]>, Slices>>;
-  /** Creates a store instance for imperative access */
-  create: () => Store<InferSliceTarget<Slices[number]>, Slices>;
-}
-
-export function createStore<Slices extends AnySlice[]>(config: CreateStoreConfig<Slices>): CreateStoreResult<Slices>;
-```
-
-**Implementation details:**
-
-- Uses `@lit/context` for W3C Context Protocol
-- Context key auto-generated per `createStore()` call (unique Symbol)
-- `StoreMixin`: Combined mixin, equivalent to `StoreAttachMixin(StoreProviderMixin(Base))`
-- `StoreProviderMixin`: Mixin that:
-  - Creates store instance
-  - Uses `ContextProvider` internally
-  - Exposes `store` setter that calls `provider.setValue(newStore)`
-- `StoreAttachMixin`: Mixin that:
-  - Consumes store from context
-  - Observes slotted elements for `<video>` or `<audio>`
-  - Calls `store.attach(mediaElement)` when found
-  - Cleans up on disconnect
-- `create()`: Returns `new Store(config)` for imperative use
-
-### 2.2 Controllers
-
-**File:** `packages/store/src/lit/controllers.ts`
-
-Controllers mirror React hooks for consistency. All take `(host, store, ...)` pattern.
-
-```typescript
-import type { ReactiveController, ReactiveControllerHost } from '@lit/reactive-element';
-
-// SelectorController - like useSelector(store, selector)
-export class SelectorController<S extends AnyStore, T> implements ReactiveController {
-  constructor(host: ReactiveControllerHost, store: S, selector: (state: InferStoreState<S>) => T);
-  get value(): T;
-}
-
-// RequestController - like useRequest(store) or useRequest(store, selector)
-export class RequestController<S extends AnyStore> implements ReactiveController {
-  constructor(host: ReactiveControllerHost, store: S);
-  get value(): InferStoreRequests<S>;
-}
-
-export class RequestController<S extends AnyStore, T> implements ReactiveController {
-  constructor(host: ReactiveControllerHost, store: S, selector: (requests: InferStoreRequests<S>) => T);
-  get value(): T;
-}
-
-// TasksController - like useTasks(store)
-export class TasksController<S extends AnyStore> implements ReactiveController {
-  constructor(host: ReactiveControllerHost, store: S);
-  get value(): TasksRecord<InferStoreTasks<S>>;
-}
-
-// MutationController - like useMutation(store, selector)
-export class MutationController<S extends AnyStore, R extends (...args: any[]) => any> implements ReactiveController {
-  constructor(host: ReactiveControllerHost, store: S, selector: (requests: InferStoreRequests<S>) => R);
-  get value(): MutationResult<R>;
-}
-
-// OptimisticController - like useOptimistic(store, requestSelector, stateSelector)
-export class OptimisticController<
-  S extends AnyStore,
-  R extends (...args: any[]) => any,
-  T,
-> implements ReactiveController {
-  constructor(
-    host: ReactiveControllerHost,
-    store: S,
-    requestSelector: (requests: InferStoreRequests<S>) => R,
-    stateSelector: (state: InferStoreState<S>) => T
-  );
-  get value(): OptimisticResult<T, R>;
-}
-```
-
-**Implementation details:**
-
-- Controllers take store explicitly (base pattern, like React base hooks)
-- Subscribe to store/queue changes, call `host.requestUpdate()` on change
-- Cleanup on `hostDisconnected`
-
-### 2.3 Exports
-
-**File:** `packages/store/src/lit/index.ts`
-
-```typescript
-export {
-  MutationController,
-  OptimisticController,
-  RequestController,
-  SelectorController,
-  TasksController,
-} from './controllers';
-export { createStore } from './create-store';
-
-export type { CreateStoreConfig, CreateStoreResult, MutationResult, OptimisticResult } from './types';
-```
-
-**Note:** Mixins (`StoreMixin`, `StoreProviderMixin`, `StoreAttachMixin`) are accessed via the `createStore()` return object, not exported directly. This ensures each store has its own typed mixins.
+**Note:** `MutationController` and `OptimisticController` are NOT in this phase - they are Phase 4 and 5.
 
 ---
 
@@ -503,16 +358,16 @@ function App() {
 }
 
 function MyCustomControls() {
-  const currentTime = useSelector(s => s.currentTime);
-  const seek = useRequest(r => r.seek);
+  const currentTime = useSelector((s) => s.currentTime);
+  const seek = useRequest((r) => r.seek);
   return <button onClick={() => seek(0)}>Restart ({currentTime}s)</button>;
 }
 
 // With mutation status tracking
 function PlayButton() {
-  const paused = useSelector(s => s.paused);
-  const { mutate: play, isPending } = useMutation(r => r.play);
-  const { mutate: pause } = useMutation(r => r.pause);
+  const paused = useSelector((s) => s.paused);
+  const { mutate: play, isPending } = useMutation((r) => r.play);
+  const { mutate: pause } = useMutation((r) => r.pause);
 
   return (
     <button onClick={() => (paused ? play() : pause())} disabled={isPending}>
@@ -524,8 +379,8 @@ function PlayButton() {
 // With optimistic updates
 function VolumeSlider() {
   const { value, setValue, isPending, isError } = useOptimistic(
-    r => r.changeVolume,
-    s => s.volume
+    (r) => r.changeVolume,
+    (s) => s.volume
   );
 
   return (
@@ -533,7 +388,7 @@ function VolumeSlider() {
       <input
         type="range"
         value={value}
-        onChange={e => setValue(Number(e.target.value))}
+        onChange={(e) => setValue(Number(e.target.value))}
         style={{ opacity: isPending ? 0.5 : 1 }}
       />
       {isError && <span>Failed to change volume</span>}
@@ -545,10 +400,10 @@ function VolumeSlider() {
 ### React: Pre-created store instance (imperative access)
 
 ```tsx
-import { createStore, media, Video } from '@videojs/react';
-
 import { useState } from 'react';
 
+import { createStore, media, Video } from '@videojs/react';
+
 const { Provider, create, useSelector } = createStore({
   slices: [media.playback],
 });
@@ -780,10 +635,10 @@ packages/html/src/
    - `useStore`, `useSelector`, `useRequest`, `useTasks` ✓
    - Base hooks for testing/advanced use ✓
 
-4. **Phase 2**: Lit Bindings (basic)
-   - `createStore()` with mixins
-   - `SelectorController`, `RequestController`, `TasksController`
-   - `@lit/context` integration
+4. **Phase 2**: Lit Bindings (basic) **[DONE - PR #289]**
+   - `createStore()` with mixins ✓
+   - `SelectorController`, `RequestController`, `TasksController` ✓
+   - `@lit/context` integration ✓
 
 5. **Phase 3**: DOM Media Slices **[DONE - PR #292]**
    - Modular slices: `playbackSlice`, `timeSlice`, `bufferSlice`, `volumeSlice`, `sourceSlice` ✓
@@ -819,7 +674,7 @@ import { readdirSync } from 'node:fs';
 
 // Dynamically gather define/ entries
 const defineEntries = readdirSync('src/define')
-  .filter(f => f.endsWith('.ts'))
+  .filter((f) => f.endsWith('.ts'))
   .reduce(
     (acc, f) => {
       const name = f.replace('.ts', '');
@@ -962,16 +817,18 @@ PR #288: React Bindings (basic) [DONE]
 ├── References #218
 └── Closes #229
 
+PR #289: Lit Bindings (basic) [DONE]
+├── createStore with mixins ✓
+├── SelectorController, RequestController, TasksController ✓
+├── References #218
+└── Closes #230
+
 PR #292: DOM Media Slices [DONE]
 ├── Modular slices: playback, time, buffer, volume, source ✓
 ├── media namespace export ✓
 ├── Type guards and utilities ✓
 ├── References #218
 └── Closes #239
-
-PR C: Lit Bindings (basic)
-├── createStore with mixins
-├── SelectorController, RequestController, TasksController
 ├── References #218
 └── Closes #230
 
@@ -996,11 +853,11 @@ PR F: Skins
 
 ```
 PR #283 ───> PR #287 ───> PR #288 ───> PR D ───> PR E ───> PR F
-                     └──> PR #292 (done)                   │
-                     └──> PR C ────────────────────────────┘
+                     └──> PR #289 (done) ──────────────────┘
+                     └──> PR #292 (done) ──────────────────┘
 ```
 
-PRs are sequential. PR #288, C, #292 can technically parallel after PR #287, but we'll do them sequentially for easier review.
+PRs are sequential. PR #288, #289, #292 can technically parallel after PR #287, but we'll do them sequentially for easier review.
 
 ---
 
diff --git a/CLAUDE.md b/CLAUDE.md
index 7f25c92a..13128d2c 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -129,6 +129,18 @@ packages/utils/src/dom/
 - Follow the `act → assert` pattern.
 - Use `vi.fn()` for mocks and spies.
 
+### Test describe() Names
+
+Use the class or function name being tested:
+
+```ts
+// selector-controller.test.ts
+describe('SelectorController', () => { ... });
+
+// provider-mixin.test.ts
+describe('createStoreProviderMixin', () => { ... });
+```
+
 ## Guidelines
 
 When generating or editing code in this repository, follow these rules to ensure safe, high‑quality contributions:
@@ -244,6 +256,27 @@ destroy(): void {
 }
 ```
 
+### Cleanup Pattern
+
+Use `Disposer` from `@videojs/utils/events` when managing multiple cleanup functions:
+
+```ts
+import { Disposer } from '@videojs/utils/events';
+
+#disposer = new Disposer();
+
+connect(): void {
+  this.#disposer.add(store.subscribe(...));
+  this.#disposer.add(queue.subscribe(...));
+}
+
+disconnect(): void {
+  this.#disposer.dispose();
+}
+```
+
+For single cleanup, use a simple unsubscribe function.
+
 ### No Hungarian Type Notation
 
 Never prefix type parameters with `T`. Use descriptive names instead:
@@ -323,4 +356,4 @@ export function onEvent<K extends keyof HTMLElementEventMap>(...): Promise<...>;
 export function supportsIdleCallback(): boolean { ... }
 get size(): number { ... }
 add(cleanup: CleanupFn): void { ... }
-```
\ No newline at end of file
+```
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 4a912cf5..69ef3472 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -28,6 +28,7 @@ export default antfu(
       '**/.vercel/',
       '**/dist/',
       '**/styles/vjs.css',
+      'packages/__tech-preview__/**',
       // some files that make eslint/prettier panic
       'site/src/components/Posthog.astro',
       'site/src/components/ThemeInit.astro',
@@ -45,6 +46,12 @@ export default antfu(
       ...jsxA11y.configs.recommended.rules,
     },
   },
+  {
+    files: ['**/*.test.{ts,tsx}'],
+    rules: {
+      'vitest/prefer-lowercase-title': 'off',
+    },
+  },
   {
     files: ['**/*.md'],
     rules: {
diff --git a/packages/core/src/dom/index.ts b/packages/core/src/dom/index.ts
index 0cb36780..f2312a58 100644
--- a/packages/core/src/dom/index.ts
+++ b/packages/core/src/dom/index.ts
@@ -1,2 +1 @@
-export * from './predicate';
 export * from './store/slices';
diff --git a/packages/core/src/dom/predicate.ts b/packages/core/src/dom/predicate.ts
deleted file mode 100644
index 7d5918ae..00000000
--- a/packages/core/src/dom/predicate.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Type guard to check if a value is an HTMLVideoElement.
- */
-export function isHTMLVideo(target: unknown): target is HTMLVideoElement {
-  return target instanceof HTMLVideoElement;
-}
-
-/**
- * Type guard to check if a value is an HTMLAudioElement.
- */
-export function isHTMLAudio(target: unknown): target is HTMLAudioElement {
-  return target instanceof HTMLAudioElement;
-}
-
-/**
- * Type guard to check if a value is an HTMLMediaElement.
- */
-export function isHTMLMedia(target: unknown): target is HTMLMediaElement {
-  return target instanceof HTMLMediaElement;
-}
diff --git a/packages/core/src/dom/tests/predicate.test.ts b/packages/core/src/dom/tests/predicate.test.ts
deleted file mode 100644
index f807c315..00000000
--- a/packages/core/src/dom/tests/predicate.test.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import { isHTMLAudio, isHTMLMedia, isHTMLVideo } from '../predicate';
-
-describe('predicate', () => {
-  describe('isHTMLVideo', () => {
-    it('returns true for video elements', () => {
-      const video = document.createElement('video');
-      expect(isHTMLVideo(video)).toBe(true);
-    });
-
-    it('returns false for audio elements', () => {
-      const audio = document.createElement('audio');
-      expect(isHTMLVideo(audio)).toBe(false);
-    });
-
-    it('returns false for other elements', () => {
-      const div = document.createElement('div');
-      expect(isHTMLVideo(div)).toBe(false);
-    });
-
-    it('returns false for non-elements', () => {
-      expect(isHTMLVideo(null)).toBe(false);
-      expect(isHTMLVideo(undefined)).toBe(false);
-      expect(isHTMLVideo('video')).toBe(false);
-      expect(isHTMLVideo({})).toBe(false);
-    });
-  });
-
-  describe('isHTMLAudio', () => {
-    it('returns true for audio elements', () => {
-      const audio = document.createElement('audio');
-      expect(isHTMLAudio(audio)).toBe(true);
-    });
-
-    it('returns false for video elements', () => {
-      const video = document.createElement('video');
-      expect(isHTMLAudio(video)).toBe(false);
-    });
-
-    it('returns false for other elements', () => {
-      const div = document.createElement('div');
-      expect(isHTMLAudio(div)).toBe(false);
-    });
-
-    it('returns false for non-elements', () => {
-      expect(isHTMLAudio(null)).toBe(false);
-      expect(isHTMLAudio(undefined)).toBe(false);
-      expect(isHTMLAudio('audio')).toBe(false);
-      expect(isHTMLAudio({})).toBe(false);
-    });
-  });
-
-  describe('isHTMLMedia', () => {
-    it('returns true for video elements', () => {
-      const video = document.createElement('video');
-      expect(isHTMLMedia(video)).toBe(true);
-    });
-
-    it('returns true for audio elements', () => {
-      const audio = document.createElement('audio');
-      expect(isHTMLMedia(audio)).toBe(true);
-    });
-
-    it('returns false for other elements', () => {
-      const div = document.createElement('div');
-      expect(isHTMLMedia(div)).toBe(false);
-    });
-
-    it('returns false for non-elements', () => {
-      expect(isHTMLMedia(null)).toBe(false);
-      expect(isHTMLMedia(undefined)).toBe(false);
-      expect(isHTMLMedia('video')).toBe(false);
-      expect(isHTMLMedia({})).toBe(false);
-    });
-  });
-});
diff --git a/packages/store/README.md b/packages/store/README.md
index f685cff9..95ce00a4 100644
--- a/packages/store/README.md
+++ b/packages/store/README.md
@@ -263,26 +263,26 @@ const unsubscribe = store.subscribe((state) => {
 
 // Single value - only fires when volume changes
 store.subscribe(
-  s => s.volume,
-  volume => console.log('Volume:', volume)
+  (s) => s.volume,
+  (volume) => console.log('Volume:', volume)
 );
 
 // Multiple values - auto-optimized with key-based subscription
 store.subscribe(
-  s => ({ volume: s.volume, muted: s.muted }),
+  (s) => ({ volume: s.volume, muted: s.muted }),
   ({ volume, muted }) => updateAudioUI(volume, muted)
 );
 
 // Derived value
 store.subscribe(
-  s => Math.round(s.volume * 100),
-  percent => console.log(`${percent}%`)
+  (s) => Math.round(s.volume * 100),
+  (percent) => console.log(`${percent}%`)
 );
 
 // Custom equality function
 store.subscribe(
-  s => s.playlist,
-  playlist => renderPlaylist(playlist),
+  (s) => s.playlist,
+  (playlist) => renderPlaylist(playlist),
   { equalityFn: shallowEqual }
 );
 ```
@@ -350,13 +350,13 @@ request: {
 
 ### Cancels
 
-Requests can cancel other in-flight requests by key. Cancellation happens immediately when the
+Requests can cancel other in-flight requests by name. Cancellation happens immediately when the
 request is enqueued, before guards or scheduling.
 
 ```ts
 request: {
   stop: {
-    cancel: ['seek', 'preload'],
+    cancel: ['seek', 'preload'],  // Request names to cancel
     handler: (_, { target }) => target.pause(),
   },
 }
@@ -535,7 +535,7 @@ const store = createStore({
   ],
   queue: createQueue({
     // Default scheduler for requests without schedule
-    scheduler: flush => queueMicrotask(flush),
+    scheduler: (flush) => queueMicrotask(flush),
 
     // Lifecycle hooks
     onDispatch: (request) => {
@@ -558,28 +558,28 @@ const store = createStore({
 const queue = store.queue; // accessed on the store
 
 queue.queued; // tasks waiting to execute
-queue.tasks; // task lifecycle map (pending/success/error)
+queue.tasks; // task lifecycle map (pending/success/error) keyed by request name
 
-// Check task status
-queue.isPending('playback'); // true if currently executing
+// Check task status by request name
+queue.isPending('play'); // true if currently executing
 queue.isQueued('seek'); // true if waiting to execute
 queue.isSettled('seek'); // true if completed (success or error)
 
 // Cancel queued tasks (waiting to execute)
-queue.cancel('seek'); // cancel specific
+queue.cancel('seek'); // cancel specific request
 queue.cancel(); // cancel all queued
 
 // Abort tasks (queued + executing)
-queue.abort('playback'); // abort specific
+queue.abort('play'); // abort specific request
 queue.abort(); // abort all
 
 // Clear settled tasks (success/error results)
-queue.reset('seek'); // clear specific
+queue.reset('seek'); // clear specific request
 queue.reset(); // clear all settled
 
 // Execute queued tasks immediately
 queue.flush(); // execute all queued now
-queue.flush('playback'); // execute specific key now
+queue.flush('play'); // execute specific request now
 ```
 
 ### Direct Queue Usage
@@ -621,7 +621,7 @@ const store = createStore({
   slices: [
     /* ... */
   ],
-  state: initial => new VueStateAdapter(initial),
+  state: (initial) => new VueStateAdapter(initial),
 });
 ```
 
diff --git a/packages/store/src/core/queue.ts b/packages/store/src/core/queue.ts
index d5fcf6e5..98d7d47b 100644
--- a/packages/store/src/core/queue.ts
+++ b/packages/store/src/core/queue.ts
@@ -13,6 +13,13 @@ export type TaskKey<T = string | symbol> = T & (string | symbol);
 
 export type EnsureTaskKey<T> = T extends string | symbol ? T : never;
 
+/**
+ * Status for async operations (mutations, optimistic updates).
+ *
+ * Used by framework bindings (React, Lit) for tracking request lifecycle.
+ */
+export type AsyncStatus = 'idle' | 'pending' | 'success' | 'error';
+
 /**
  * A task scheduler controls when a task flushes.
  *
@@ -189,28 +196,32 @@ export class Queue<Tasks extends TaskRecord = DefaultTaskRecord> {
     return this.#destroyed;
   }
 
-  isPending(key: keyof Tasks): boolean {
-    return this.#tasks[key]?.status === 'pending';
+  isPending(name: keyof Tasks): boolean {
+    return this.#tasks[name]?.status === 'pending';
   }
 
-  isQueued(key: keyof Tasks): boolean {
-    return key in this.#queued;
+  isQueued(name: keyof Tasks): boolean {
+    // Note: #queued is keyed by key, but we need to search by name
+    for (const task of Object.values(this.#queued)) {
+      if (task?.name === name) return true;
+    }
+    return false;
   }
 
-  isSettled(key: keyof Tasks): boolean {
-    const task = this.#tasks[key];
+  isSettled(name: keyof Tasks): boolean {
+    const task = this.#tasks[name];
     return task?.status === 'success' || task?.status === 'error';
   }
 
   /**
-   * Clear settled task(s). If key provided, clears that task. If no key, clears all settled.
+   * Clear settled task(s). If name provided, clears that task. If no name, clears all settled.
    */
-  reset(key?: keyof Tasks): void {
-    if (!isUndefined(key)) {
-      const task = this.#tasks[key];
+  reset(name?: keyof Tasks): void {
+    if (!isUndefined(name)) {
+      const task = this.#tasks[name];
       if (!task || task.status === 'pending') return;
 
-      delete this.#tasks[key];
+      delete this.#tasks[name];
       this.#notifySubscribers();
 
       return;
@@ -259,18 +270,20 @@ export class Queue<Tasks extends TaskRecord = DefaultTaskRecord> {
       return Promise.reject(new StoreError('DESTROYED'));
     }
 
+    // Supersede any queued task with the same key
     const queued = this.#queued[key];
     queued?.invalidate?.();
     queued?.reject(new StoreError('SUPERSEDED'));
     delete this.#queued[key];
 
-    const existing = this.#tasks[key];
-    if (existing?.status === 'pending') {
-      existing.abort.abort(new StoreError('SUPERSEDED'));
+    // Supersede any pending task with the same key (may have different name)
+    // Don't delete - let error handler update status to 'error' so controllers can see it
+    for (const task of Object.values(this.#tasks)) {
+      if (task?.key === key && task.status === 'pending') {
+        task.abort.abort(new StoreError('SUPERSEDED'));
+      }
     }
 
-    delete this.#tasks[key];
-
     return new Promise<Tasks[K]['output']>((resolve, reject) => {
       const task: QueuedTask = {
         id: Symbol('@videojs/task'),
@@ -313,18 +326,20 @@ export class Queue<Tasks extends TaskRecord = DefaultTaskRecord> {
   }
 
   /**
-   * Cancel queued task(s). If key provided, cancels that task. If no key, cancels all.
+   * Cancel queued task(s). If name provided, cancels that task. If no name, cancels all.
    */
-  cancel(key?: keyof Tasks): boolean {
-    if (!isUndefined(key)) {
-      const queued = this.#queued[key];
-      if (!queued) return false;
-
-      queued.invalidate?.();
-      queued.reject(new StoreError('REMOVED'));
-      delete this.#queued[key];
-
-      return true;
+  cancel(name?: keyof Tasks): boolean {
+    if (!isUndefined(name)) {
+      // Find queued task by name (#queued is keyed by key)
+      for (const [key, queued] of Object.entries(this.#queued)) {
+        if (queued?.name === name) {
+          queued.invalidate?.();
+          queued.reject(new StoreError('REMOVED'));
+          delete this.#queued[key as keyof Tasks];
+          return true;
+        }
+      }
+      return false;
     }
 
     const hadQueued = Object.keys(this.#queued).length > 0;
@@ -338,9 +353,15 @@ export class Queue<Tasks extends TaskRecord = DefaultTaskRecord> {
     return hadQueued;
   }
 
-  async flush(key?: keyof Tasks): Promise<void> {
-    if (!isUndefined(key)) {
-      await this.#flushKey(key);
+  async flush(name?: keyof Tasks): Promise<void> {
+    if (!isUndefined(name)) {
+      // Find queued task by name and flush by its key
+      for (const [key, queued] of Object.entries(this.#queued)) {
+        if (queued?.name === name) {
+          await this.#flushKey(key as keyof Tasks);
+          return;
+        }
+      }
       return;
     }
 
@@ -349,16 +370,22 @@ export class Queue<Tasks extends TaskRecord = DefaultTaskRecord> {
   }
 
   /**
-   * Abort task(s). If key provided, aborts that task. If no key, aborts all.
+   * Abort task(s). If name provided, aborts that task. If no name, aborts all.
    */
-  abort(key?: keyof Tasks): void {
-    if (!isUndefined(key)) {
-      const queued = this.#queued[key];
-      queued?.invalidate?.();
-      queued?.reject(new StoreError('ABORTED'));
-      delete this.#queued[key];
+  abort(name?: keyof Tasks): void {
+    if (!isUndefined(name)) {
+      // Find and abort queued task by name
+      for (const [key, queued] of Object.entries(this.#queued)) {
+        if (queued?.name === name) {
+          queued.invalidate?.();
+          queued.reject(new StoreError('ABORTED'));
+          delete this.#queued[key as keyof Tasks];
+          break;
+        }
+      }
 
-      const task = this.#tasks[key];
+      // Abort pending task (stored by name)
+      const task = this.#tasks[name];
       if (task?.status === 'pending') {
         task.abort.abort(new StoreError('ABORTED'));
       }
@@ -421,7 +448,8 @@ export class Queue<Tasks extends TaskRecord = DefaultTaskRecord> {
       meta,
     };
 
-    this.#tasks[key as keyof Tasks] = pendingTask;
+    // Store tasks by name for controller access (different names can share same key)
+    this.#tasks[name as keyof Tasks] = pendingTask;
     this.#notifySubscribers();
     this.#onDispatch?.(pendingTask);
 
@@ -445,9 +473,9 @@ export class Queue<Tasks extends TaskRecord = DefaultTaskRecord> {
         output: result,
       };
 
-      // Only update if we're still the current task for this key
-      if (this.#tasks[key] === pendingTask) {
-        this.#tasks[key as keyof Tasks] = successTask;
+      // Only update if we're still the current task for this name
+      if (this.#tasks[name as keyof Tasks] === pendingTask) {
+        this.#tasks[name as keyof Tasks] = successTask;
         this.#notifySubscribers();
       }
 
@@ -463,9 +491,9 @@ export class Queue<Tasks extends TaskRecord = DefaultTaskRecord> {
         cancelled: abort.signal.aborted,
       };
 
-      // Only update if we're still the current task for this key
-      if (this.#tasks[key] === pendingTask) {
-        this.#tasks[key as keyof Tasks] = errorTask;
+      // Only update if we're still the current task for this name
+      if (this.#tasks[name as keyof Tasks] === pendingTask) {
+        this.#tasks[name as keyof Tasks] = errorTask;
         this.#notifySubscribers();
       }
 
diff --git a/packages/store/src/core/request.ts b/packages/store/src/core/request.ts
index d563df76..643c34bf 100644
--- a/packages/store/src/core/request.ts
+++ b/packages/store/src/core/request.ts
@@ -135,7 +135,7 @@ export function resolveRequestKey(keyConfig: RequestKey<any>, input: unknown): T
   return isFunction(keyConfig) ? keyConfig(input) : keyConfig;
 }
 
-export function resolveRequestCancelKeys(cancel: RequestCancel<any> | undefined, input: unknown): TaskKey[] {
+export function resolveRequestCancel(cancel: RequestCancel<any> | undefined, input: unknown): TaskKey[] {
   if (!cancel) return [];
   const result = isFunction(cancel) ? cancel(input) : cancel;
   return Array.isArray(result) ? result : [result];
diff --git a/packages/store/src/core/store.ts b/packages/store/src/core/store.ts
index 6f44eeb8..f12af1f2 100644
--- a/packages/store/src/core/store.ts
+++ b/packages/store/src/core/store.ts
@@ -15,7 +15,7 @@ import { isNull } from '@videojs/utils/predicate';
 
 import { StoreError } from './errors';
 import { Queue } from './queue';
-import { createRequestMeta, resolveRequestCancelKeys, resolveRequestKey } from './request';
+import { createRequestMeta, resolveRequestCancel, resolveRequestKey } from './request';
 import { State } from './state';
 
 export class Store<Target, Slices extends AnySlice<Target>[] = AnySlice<Target>[]> {
@@ -274,8 +274,8 @@ export class Store<Target, Slices extends AnySlice<Target>[] = AnySlice<Target>[
   ): Promise<unknown> {
     const key = resolveRequestKey(config.key, input);
 
-    for (const cancelKey of resolveRequestCancelKeys(config.cancel, input)) {
-      this.#queue.abort(cancelKey);
+    for (const requestName of resolveRequestCancel(config.cancel, input)) {
+      this.#queue.abort(requestName);
     }
 
     const handler = async ({ input, signal }: TaskContext) => {
@@ -311,7 +311,7 @@ export class Store<Target, Slices extends AnySlice<Target>[] = AnySlice<Target>[
       });
     } catch (error) {
       const tasks = this.#queue.tasks as Record<string | symbol, Task | undefined>;
-      const task = tasks[key];
+      const task = tasks[name];
 
       this.#handleError({
         request: task?.status === 'pending' ? task : undefined,
@@ -385,6 +385,14 @@ export interface StoreErrorContext<Target, Slices extends AnySlice<Target>[]> {
   error: unknown;
 }
 
+export interface StoreProvider<Slices extends AnySlice[]> {
+  store: Store<UnionSliceTarget<Slices>, Slices>;
+}
+
+export interface StoreConsumer<Slices extends AnySlice[]> {
+  readonly store: Store<UnionSliceTarget<Slices>, Slices> | null;
+}
+
 // ----------------------------------------
 // Type Inference
 // ----------------------------------------
diff --git a/packages/store/src/core/tests/queue.test.ts b/packages/store/src/core/tests/queue.test.ts
index f500bf69..0a4f0b92 100644
--- a/packages/store/src/core/tests/queue.test.ts
+++ b/packages/store/src/core/tests/queue.test.ts
@@ -164,7 +164,7 @@ describe('queue', () => {
     });
 
     describe('cancel', () => {
-      it('cancel(key) removes specific queued task', async () => {
+      it('cancel(name) removes specific queued task', async () => {
         const queue = createQueue({
           scheduler: delay(100),
         });
@@ -172,8 +172,8 @@ describe('queue', () => {
         const handler = vi.fn();
         const promise = queue.enqueue({ name: 'test', key: 'k', handler });
 
-        expect(queue.cancel('k')).toBe(true);
-        expect(queue.cancel('k')).toBe(false);
+        expect(queue.cancel('test')).toBe(true);
+        expect(queue.cancel('test')).toBe(false);
 
         vi.advanceTimersByTime(100);
         await expect(promise).rejects.toMatchObject({ code: 'REMOVED' });
@@ -214,7 +214,7 @@ describe('queue', () => {
         await expect(promise).resolves.toBe('ok');
       });
 
-      it('flush(key) executes specific task', async () => {
+      it('flush(name) executes specific task', async () => {
         vi.useRealTimers();
 
         const queue = createQueue({ scheduler: delay(1000) });
@@ -233,7 +233,7 @@ describe('queue', () => {
     });
 
     describe('abort', () => {
-      it('abort(key) cancels queued and aborts pending', async () => {
+      it('abort(name) cancels queued and aborts pending', async () => {
         vi.useRealTimers();
 
         const queue = createQueue();
@@ -254,7 +254,7 @@ describe('queue', () => {
         });
 
         await new Promise(r => setTimeout(r, 10));
-        queue.abort('k');
+        queue.abort('test');
 
         await expect(promise).rejects.toMatchObject({ code: 'ABORTED' });
         expect(aborted).toBe(true);
@@ -392,7 +392,7 @@ describe('queue', () => {
           handler: vi.fn().mockResolvedValue('result1'),
         });
 
-        // Queue should have the first task
+        // Queue should have the first task (#queued is keyed by key 'shared')
         expect(Reflect.ownKeys(queue.queued).length).toBe(1);
         expect(queue.queued.shared?.name).toBe('task1');
 
@@ -406,7 +406,7 @@ describe('queue', () => {
         // First should be superseded
         await expect(promise1).rejects.toMatchObject({ code: 'SUPERSEDED' });
 
-        // Queue should only have the second task (first was explicitly deleted)
+        // Queue should only have the second task (#queued keyed by key 'shared')
         expect(Reflect.ownKeys(queue.queued).length).toBe(1);
         expect(queue.queued.shared?.name).toBe('task2');
 
@@ -438,7 +438,7 @@ describe('queue', () => {
 
         // Wait for task to start
         await new Promise(r => setTimeout(r, 10));
-        expect(queue.tasks.k?.status).toBe('pending');
+        expect(queue.tasks.task?.status).toBe('pending');
 
         // Destroy queue
         queue.destroy();
@@ -449,7 +449,7 @@ describe('queue', () => {
         expect(cleanupSpy).toHaveBeenCalledWith('cleanup');
 
         // After destroy, all tasks are cleared for memory cleanup
-        expect(queue.tasks.k).toBeUndefined();
+        expect(queue.tasks.task).toBeUndefined();
       });
 
       it('handles scheduler error without double-cleanup when already flushed', async () => {
@@ -520,12 +520,12 @@ describe('queue', () => {
 
         await new Promise(r => setTimeout(r, 10));
 
-        expect(queue.isPending('test-key')).toBe(true);
-        expect(queue.isPending('other-key')).toBe(false);
+        expect(queue.isPending('test')).toBe(true);
+        expect(queue.isPending('other')).toBe(false);
 
         await promise;
 
-        expect(queue.isPending('test-key')).toBe(false);
+        expect(queue.isPending('test')).toBe(false);
       });
 
       it('isQueued returns true when task is waiting to execute', async () => {
@@ -537,13 +537,13 @@ describe('queue', () => {
           handler: vi.fn().mockResolvedValue('result'),
         });
 
-        expect(queue.isQueued('test-key')).toBe(true);
-        expect(queue.isQueued('other-key')).toBe(false);
+        expect(queue.isQueued('test')).toBe(true);
+        expect(queue.isQueued('other')).toBe(false);
 
         vi.advanceTimersByTime(100);
         await vi.runAllTimersAsync();
 
-        expect(queue.isQueued('test-key')).toBe(false);
+        expect(queue.isQueued('test')).toBe(false);
       });
     });
 
@@ -602,11 +602,11 @@ describe('queue', () => {
         // Wait for dispatch
         await new Promise(r => setTimeout(r, 10));
 
-        // First call should have pending task
+        // First call should have pending task (keyed by name 'test')
         expect(listener).toHaveBeenCalledTimes(1);
         const pendingSnapshot = listener.mock.calls[0]![0] as Record<string, { status: string }>;
         expect(Reflect.ownKeys(pendingSnapshot).length).toBe(1);
-        expect(pendingSnapshot['test-key']?.status).toBe('pending');
+        expect(pendingSnapshot.test?.status).toBe('pending');
 
         // Complete the handler
         resolveHandler!();
@@ -616,7 +616,7 @@ describe('queue', () => {
         expect(listener).toHaveBeenCalledTimes(2);
         const settledSnapshot = listener.mock.calls[1]![0] as Record<string, { status: string }>;
         expect(Reflect.ownKeys(settledSnapshot).length).toBe(1);
-        expect(settledSnapshot['test-key']?.status).toBe('success');
+        expect(settledSnapshot.test?.status).toBe('success');
       });
 
       it('unsubscribe stops notifications', async () => {
@@ -724,9 +724,9 @@ describe('queue', () => {
           },
         });
 
-        // Task should be pending
+        // Task should be pending (keyed by name 'task')
         await new Promise(r => setTimeout(r, 5));
-        const pendingTask = queue.tasks.k;
+        const pendingTask = queue.tasks.task;
         expect(pendingTask?.status).toBe('pending');
         expect(pendingTask?.name).toBe('task');
 
@@ -734,7 +734,7 @@ describe('queue', () => {
         await promise;
 
         // Task should be success
-        const successTask = queue.tasks.k;
+        const successTask = queue.tasks.task;
         expect(successTask?.status).toBe('success');
         if (successTask?.status === 'success') {
           expect(successTask.output).toBe('result');
@@ -759,13 +759,13 @@ describe('queue', () => {
 
         // Task should be pending
         await new Promise(r => setTimeout(r, 5));
-        expect(queue.tasks.k?.status).toBe('pending');
+        expect(queue.tasks.task?.status).toBe('pending');
 
         // Wait for failure
         await expect(promise).rejects.toThrow('test error');
 
         // Task should be error
-        const errorTask = queue.tasks.k;
+        const errorTask = queue.tasks.task;
         expect(errorTask?.status).toBe('error');
         if (errorTask?.status === 'error') {
           expect(errorTask.error).toBe(error);
@@ -791,14 +791,14 @@ describe('queue', () => {
 
         // Wait for task to start
         await new Promise(r => setTimeout(r, 10));
-        expect(queue.tasks.k?.status).toBe('pending');
+        expect(queue.tasks.task?.status).toBe('pending');
 
-        // Abort the task
-        queue.abort('k');
+        // Abort the task (by name)
+        queue.abort('task');
         await promise.catch(() => {});
 
         // Task should be error with cancelled=true
-        const errorTask = queue.tasks.k;
+        const errorTask = queue.tasks.task;
         expect(errorTask?.status).toBe('error');
         if (errorTask?.status === 'error') {
           expect(errorTask.cancelled).toBe(true);
@@ -817,22 +817,24 @@ describe('queue', () => {
           handler: async () => 'first-result',
         });
 
-        expect(queue.tasks.k?.status).toBe('success');
-        if (queue.tasks.k?.status === 'success') {
-          expect(queue.tasks.k.output).toBe('first-result');
+        // Keyed by name 'first'
+        expect(queue.tasks.first?.status).toBe('success');
+        if (queue.tasks.first?.status === 'success') {
+          expect(queue.tasks.first.output).toBe('first-result');
         }
 
-        // Second request replaces settled task
+        // Second request (different name, same key) - doesn't replace first since different name
         await queue.enqueue({
           name: 'second',
           key: 'k',
           handler: async () => 'second-result',
         });
 
-        expect(queue.tasks.k?.status).toBe('success');
-        if (queue.tasks.k?.status === 'success') {
-          expect(queue.tasks.k.output).toBe('second-result');
-          expect(queue.tasks.k.name).toBe('second');
+        // Both tasks exist at different keys (names)
+        expect(queue.tasks.second?.status).toBe('success');
+        if (queue.tasks.second?.status === 'success') {
+          expect(queue.tasks.second.output).toBe('second-result');
+          expect(queue.tasks.second.name).toBe('second');
         }
       });
     });
@@ -849,11 +851,11 @@ describe('queue', () => {
           handler: async () => 'result',
         });
 
-        expect(queue.tasks.k?.status).toBe('success');
+        expect(queue.tasks.task?.status).toBe('success');
 
-        queue.reset('k');
+        queue.reset('task');
 
-        expect(queue.tasks.k).toBeUndefined();
+        expect(queue.tasks.task).toBeUndefined();
       });
 
       it('is no-op when task is pending', async () => {
@@ -872,11 +874,11 @@ describe('queue', () => {
 
         // Wait for task to start
         await new Promise(r => setTimeout(r, 10));
-        expect(queue.tasks.k?.status).toBe('pending');
+        expect(queue.tasks.task?.status).toBe('pending');
 
         // Reset should be no-op
-        queue.reset('k');
-        expect(queue.tasks.k?.status).toBe('pending');
+        queue.reset('task');
+        expect(queue.tasks.task?.status).toBe('pending');
 
         await promise;
       });
@@ -904,11 +906,11 @@ describe('queue', () => {
 
         queue.subscribe(listener);
 
-        queue.reset('k');
+        queue.reset('task');
 
         expect(listener).toHaveBeenCalledTimes(1);
         const snapshot = listener.mock.calls[0]![0] as Record<string, unknown>;
-        expect(snapshot.k).toBeUndefined();
+        expect(snapshot.task).toBeUndefined();
       });
 
       it('does not notify subscribers when task does not exist', () => {
@@ -979,7 +981,7 @@ describe('queue', () => {
         const queue = createQueue();
         await queue.enqueue({ name: 'task', key: 'k', handler: async () => 'result' });
 
-        expect(queue.isSettled('k')).toBe(true);
+        expect(queue.isSettled('task')).toBe(true);
       });
 
       it('returns true for error task', async () => {
@@ -996,7 +998,7 @@ describe('queue', () => {
 
         await promise.catch(() => {});
 
-        expect(queue.isSettled('k')).toBe(true);
+        expect(queue.isSettled('task')).toBe(true);
       });
 
       it('returns false for pending task', async () => {
@@ -1014,7 +1016,7 @@ describe('queue', () => {
 
         await new Promise(r => setTimeout(r, 10));
 
-        expect(queue.isSettled('k')).toBe(false);
+        expect(queue.isSettled('task')).toBe(false);
 
         await promise;
       });
@@ -1033,7 +1035,7 @@ describe('queue', () => {
         const queue = createQueue();
 
         await queue.enqueue({ name: 'task', key: 'k', handler: async () => 'result' });
-        expect(queue.tasks.k?.status).toBe('success');
+        expect(queue.tasks.task?.status).toBe('success');
 
         queue.destroy();
 
@@ -1065,31 +1067,32 @@ describe('queue', () => {
 
         const snapshot2 = queue.tasks;
 
-        // Snapshots should be independent
+        // Tasks keyed by name - first and second are different entries
         expect(snapshot1).not.toBe(snapshot2);
-        if (snapshot1.k?.status === 'success' && snapshot2.k?.status === 'success') {
-          expect(snapshot1.k.output).toBe('first');
-          expect(snapshot2.k.output).toBe('second');
+        if (snapshot1.first?.status === 'success' && snapshot2.second?.status === 'success') {
+          expect(snapshot1.first.output).toBe('first');
+          expect(snapshot2.second.output).toBe('second');
         }
       });
     });
 
     describe('symbol keys', () => {
-      it('supports symbol keys', async () => {
+      it('supports symbol names', async () => {
         vi.useRealTimers();
 
         const queue = createQueue();
-        const key = Symbol('task');
+        const name = Symbol('task');
 
         await queue.enqueue({
-          name: 'task',
-          key,
+          name: name as unknown as string,
+          key: name,
           handler: async () => 'result',
         });
 
-        expect(queue.tasks[key]?.status).toBe('success');
-        if (queue.tasks[key]?.status === 'success') {
-          expect(queue.tasks[key].output).toBe('result');
+        const task = queue.tasks[name as unknown as string];
+        expect(task?.status).toBe('success');
+        if (task?.status === 'success') {
+          expect(task.output).toBe('result');
         }
       });
     });
@@ -1106,7 +1109,7 @@ describe('queue', () => {
           handler: async () => 'result',
         });
 
-        expect(queue.tasks.k?.meta).toBeNull();
+        expect(queue.tasks.task?.meta).toBeNull();
       });
     });
   });
diff --git a/packages/store/src/core/tests/queue.types.test.ts b/packages/store/src/core/tests/queue.types.test.ts
new file mode 100644
index 00000000..98345a22
--- /dev/null
+++ b/packages/store/src/core/tests/queue.types.test.ts
@@ -0,0 +1,156 @@
+import type { AsyncStatus, ErrorTask, PendingTask, SuccessTask, Task, TasksRecord } from '../queue';
+
+import { describe, expectTypeOf, it } from 'vitest';
+
+import { createQueue } from '../queue';
+
+describe('queue types', () => {
+  describe('AsyncStatus', () => {
+    it('includes all status values', () => {
+      const idle: AsyncStatus = 'idle';
+      const pending: AsyncStatus = 'pending';
+      const success: AsyncStatus = 'success';
+      const error: AsyncStatus = 'error';
+
+      expectTypeOf(idle).toExtend<AsyncStatus>();
+      expectTypeOf(pending).toExtend<AsyncStatus>();
+      expectTypeOf(success).toExtend<AsyncStatus>();
+      expectTypeOf(error).toExtend<AsyncStatus>();
+    });
+  });
+
+  describe('Task', () => {
+    it('is discriminated union of task states', () => {
+      const task: Task = {} as Task;
+
+      if (task.status === 'pending') {
+        expectTypeOf(task).toExtend<PendingTask>();
+        expectTypeOf(task.abort).toExtend<AbortController>();
+      }
+
+      if (task.status === 'success') {
+        expectTypeOf(task).toExtend<SuccessTask>();
+        expectTypeOf(task.output).toBeUnknown();
+        expectTypeOf(task.settledAt).toBeNumber();
+      }
+
+      if (task.status === 'error') {
+        expectTypeOf(task).toExtend<ErrorTask>();
+        expectTypeOf(task.error).toBeUnknown();
+        expectTypeOf(task.cancelled).toBeBoolean();
+        expectTypeOf(task.settledAt).toBeNumber();
+      }
+    });
+
+    it('has common properties across all states', () => {
+      const task: Task = {} as Task;
+
+      expectTypeOf(task.id).toEqualTypeOf<symbol>();
+      expectTypeOf(task.name).toEqualTypeOf<string>();
+      expectTypeOf(task.key).toExtend<string | symbol>();
+      expectTypeOf(task.startedAt).toBeNumber();
+    });
+  });
+
+  describe('createQueue', () => {
+    it('returns Queue with default task record', () => {
+      const queue = createQueue();
+
+      expectTypeOf(queue.tasks).toExtend<TasksRecord<any>>();
+      expectTypeOf(queue.destroyed).toBeBoolean();
+    });
+  });
+
+  describe('Queue methods', () => {
+    it('isPending takes name parameter', () => {
+      const queue = createQueue();
+
+      expectTypeOf(queue.isPending).toBeFunction();
+      expectTypeOf(queue.isPending).returns.toBeBoolean();
+    });
+
+    it('isQueued takes name parameter', () => {
+      const queue = createQueue();
+
+      expectTypeOf(queue.isQueued).toBeFunction();
+      expectTypeOf(queue.isQueued).returns.toBeBoolean();
+    });
+
+    it('isSettled takes name parameter', () => {
+      const queue = createQueue();
+
+      expectTypeOf(queue.isSettled).toBeFunction();
+      expectTypeOf(queue.isSettled).returns.toBeBoolean();
+    });
+
+    it('reset takes optional name parameter', () => {
+      const queue = createQueue();
+
+      expectTypeOf(queue.reset).toBeFunction();
+      expectTypeOf(queue.reset).returns.toBeVoid();
+    });
+
+    it('cancel takes optional name parameter and returns boolean', () => {
+      const queue = createQueue();
+
+      expectTypeOf(queue.cancel).toBeFunction();
+      expectTypeOf(queue.cancel).returns.toBeBoolean();
+    });
+
+    it('abort takes optional name parameter', () => {
+      const queue = createQueue();
+
+      expectTypeOf(queue.abort).toBeFunction();
+      expectTypeOf(queue.abort).returns.toBeVoid();
+    });
+
+    it('flush takes optional name parameter and returns promise', () => {
+      const queue = createQueue();
+
+      expectTypeOf(queue.flush).toBeFunction();
+      expectTypeOf(queue.flush).returns.toExtend<Promise<void>>();
+    });
+
+    it('subscribe takes listener and returns unsubscribe', () => {
+      const queue = createQueue();
+
+      expectTypeOf(queue.subscribe).toBeFunction();
+      expectTypeOf(queue.subscribe).returns.toExtend<() => void>();
+    });
+
+    it('destroy returns void', () => {
+      const queue = createQueue();
+
+      expectTypeOf(queue.destroy).toBeFunction();
+      expectTypeOf(queue.destroy).returns.toBeVoid();
+    });
+  });
+
+  describe('enqueue', () => {
+    it('returns promise', async () => {
+      const queue = createQueue();
+
+      const result = queue.enqueue({
+        name: 'test',
+        key: 'test',
+        handler: async () => 42,
+      });
+
+      // Verify it's a promise by checking it has then
+      expectTypeOf(result.then).toBeFunction();
+    });
+
+    it('handler receives TaskContext with signal', async () => {
+      const queue = createQueue();
+
+      await queue.enqueue({
+        name: 'test',
+        key: 'test',
+        handler: async (ctx) => {
+          expectTypeOf(ctx.signal).toEqualTypeOf<AbortSignal>();
+          return 'done';
+        },
+      });
+    });
+  });
+});
diff --git a/packages/store/src/core/tests/request.test.ts b/packages/store/src/core/tests/request.test.ts
index 30286e1b..2f335c8a 100644
--- a/packages/store/src/core/tests/request.test.ts
+++ b/packages/store/src/core/tests/request.test.ts
@@ -5,7 +5,7 @@ import {
   createRequestMetaFromEvent,
   isRequestMeta,
   REQUEST_META,
-  resolveRequestCancelKeys,
+  resolveRequestCancel,
   resolveRequestKey,
 } from '../request';
 
@@ -128,22 +128,22 @@ describe('request', () => {
     });
   });
 
-  describe('resolveRequestCancelKeys', () => {
+  describe('resolveRequestCancelNames', () => {
     it('returns empty array for undefined', () => {
-      expect(resolveRequestCancelKeys(undefined, null)).toEqual([]);
+      expect(resolveRequestCancel(undefined, null)).toEqual([]);
     });
 
-    it('wraps single key in array', () => {
-      expect(resolveRequestCancelKeys('key', null)).toEqual(['key']);
+    it('wraps single name in array', () => {
+      expect(resolveRequestCancel('seek', null)).toEqual(['seek']);
     });
 
     it('returns array directly', () => {
-      expect(resolveRequestCancelKeys(['a', 'b'], null)).toEqual(['a', 'b']);
+      expect(resolveRequestCancel(['seek', 'load'], null)).toEqual(['seek', 'load']);
     });
 
     it('calls function with input', () => {
-      const cancelFn = (type: string) => [`${type}-loading`, `${type}-fetch`];
-      expect(resolveRequestCancelKeys(cancelFn, 'video')).toEqual(['video-loading', 'video-fetch']);
+      const cancelFn = (type: string) => [`${type}Loading`, `${type}Fetch`];
+      expect(resolveRequestCancel(cancelFn, 'video')).toEqual(['videoLoading', 'videoFetch']);
     });
   });
 });
diff --git a/packages/store/src/core/tests/slice.types.test.ts b/packages/store/src/core/tests/slice.types.test.ts
new file mode 100644
index 00000000..b5e2f396
--- /dev/null
+++ b/packages/store/src/core/tests/slice.types.test.ts
@@ -0,0 +1,147 @@
+import type { InferSliceRequests, InferSliceState, Slice } from '../slice';
+
+import { describe, expectTypeOf, it } from 'vitest';
+
+import { createSlice } from '../slice';
+
+interface MockTarget {
+  volume: number;
+  muted: boolean;
+}
+
+describe('slice types', () => {
+  describe('createSlice', () => {
+    it('returns Slice type with inferred state', () => {
+      const slice = createSlice<MockTarget>()({
+        initialState: { volume: 1, muted: false },
+        getSnapshot: ({ target }) => ({ volume: target.volume, muted: target.muted }),
+        subscribe: () => {},
+        request: {},
+      });
+
+      expectTypeOf(slice).toExtend<Slice<MockTarget, {
+        volume: number;
+        muted: boolean;
+      }, object>>();
+    });
+
+    it('infers request handler types from simple handlers', () => {
+      const _slice = createSlice<MockTarget>()({
+        initialState: { volume: 1 },
+        getSnapshot: ({ target }) => ({ volume: target.volume }),
+        subscribe: () => {},
+        request: {
+          setVolume: (volume: number, { target }) => {
+            target.volume = volume;
+            return volume;
+          },
+        },
+      });
+
+      type Requests = InferSliceRequests<typeof _slice>;
+
+      expectTypeOf<Requests>().toHaveProperty('setVolume');
+
+      expectTypeOf<Requests['setVolume']>().toExtend<{ input: number; output: number }>();
+    });
+
+    it('infers async request handler types', () => {
+      const _slice = createSlice<MockTarget>()({
+        initialState: { volume: 1 },
+        getSnapshot: ({ target }) => ({ volume: target.volume }),
+        subscribe: () => {},
+        request: {
+          asyncSetVolume: async (volume: number, { target }): Promise<number> => {
+            target.volume = volume;
+            return volume;
+          },
+        },
+      });
+
+      type Requests = InferSliceRequests<typeof _slice>;
+
+      expectTypeOf<Requests['asyncSetVolume']>().toExtend<{ input: number; output: number }>();
+    });
+
+    it('infers request config with custom key', () => {
+      const _slice = createSlice<MockTarget>()({
+        initialState: { volume: 1, muted: false },
+        getSnapshot: ({ target }) => ({ volume: target.volume, muted: target.muted }),
+        subscribe: () => {},
+        request: {
+          setVolume: {
+            key: 'audio',
+            handler: (volume: number, { target }) => {
+              target.volume = volume;
+              return volume;
+            },
+          },
+          setMuted: {
+            key: 'audio',
+            handler: (muted: boolean, { target }) => {
+              target.muted = muted;
+              return muted;
+            },
+          },
+        },
+      });
+
+      type Requests = InferSliceRequests<typeof _slice>;
+
+      expectTypeOf<Requests['setVolume']>().toExtend<{ input: number; output: number }>();
+      expectTypeOf<Requests['setMuted']>().toExtend<{ input: boolean; output: boolean }>();
+    });
+
+    it('infers void input when handler takes no arguments', () => {
+      const _slice = createSlice<MockTarget>()({
+        initialState: { muted: false },
+        getSnapshot: ({ target }) => ({ muted: target.muted }),
+        subscribe: () => {},
+        request: {
+          toggleMute: ({ target }) => {
+            target.muted = !target.muted;
+            return target.muted;
+          },
+        },
+      });
+
+      type Requests = InferSliceRequests<typeof _slice>;
+
+      expectTypeOf<Requests['toggleMute']>().toExtend<{ input: void; output: boolean }>();
+    });
+  });
+
+  describe('InferSliceState', () => {
+    it('extracts state type from slice', () => {
+      const _slice = createSlice<MockTarget>()({
+        initialState: { volume: 1, muted: false, label: 'test' },
+        getSnapshot: ({ initialState }) => initialState,
+        subscribe: () => {},
+        request: {},
+      });
+
+      type State = InferSliceState<typeof _slice>;
+
+      expectTypeOf<State>().toEqualTypeOf<{ volume: number; muted: boolean; label: string }>();
+    });
+  });
+
+  describe('InferSliceRequests', () => {
+    it('extracts request types from slice', () => {
+      const _slice = createSlice<MockTarget>()({
+        initialState: { volume: 1 },
+        getSnapshot: ({ target }) => ({ volume: target.volume }),
+        subscribe: () => {},
+        request: {
+          setVolume: (v: number) => v,
+          reset: () => 1,
+        },
+      });
+
+      type Requests = InferSliceRequests<typeof _slice>;
+
+      expectTypeOf<Requests>().toHaveProperty('setVolume');
+      expectTypeOf<Requests>().toHaveProperty('reset');
+    });
+  });
+});
diff --git a/packages/store/src/core/tests/store.types.test.ts b/packages/store/src/core/tests/store.types.test.ts
new file mode 100644
index 00000000..a7c6ec5b
--- /dev/null
+++ b/packages/store/src/core/tests/store.types.test.ts
@@ -0,0 +1,253 @@
+import type { Queue, TasksRecord } from '../queue';
+import type { InferStoreRequests, InferStoreState, InferStoreTarget, InferStoreTasks } from '../store';
+
+import { describe, expectTypeOf, it } from 'vitest';
+
+import { createSlice } from '../slice';
+import { createStore } from '../store';
+
+interface MockTarget {
+  volume: number;
+  muted: boolean;
+}
+
+const audioSlice = createSlice<MockTarget>()({
+  initialState: { volume: 1, muted: false },
+  getSnapshot: ({ target }) => ({ volume: target.volume, muted: target.muted }),
+  subscribe: () => {},
+  request: {
+    setVolume: (volume: number, { target }) => {
+      target.volume = volume;
+      return volume;
+    },
+    setMuted: (muted: boolean, { target }) => {
+      target.muted = muted;
+      return muted;
+    },
+  },
+});
+
+const playbackSlice = createSlice<MockTarget>()({
+  initialState: { playing: false },
+  getSnapshot: () => ({ playing: false }),
+  subscribe: () => {},
+  request: {
+    play: () => true,
+    pause: () => false,
+  },
+});
+
+function createTestStore() {
+  return createStore({ slices: [audioSlice, playbackSlice] });
+}
+
+function createSingleSliceStore() {
+  return createStore({ slices: [audioSlice] });
+}
+
+describe('store types', () => {
+  describe('createStore', () => {
+    it('state has union of all slice states', () => {
+      const store = createTestStore();
+
+      expectTypeOf(store.state.volume).toEqualTypeOf<number>();
+      expectTypeOf(store.state.muted).toEqualTypeOf<boolean>();
+      expectTypeOf(store.state.playing).toEqualTypeOf<boolean>();
+    });
+
+    it('request has union of all slice requests', () => {
+      const store = createTestStore();
+
+      expectTypeOf(store.request).toHaveProperty('setVolume');
+      expectTypeOf(store.request).toHaveProperty('setMuted');
+      expectTypeOf(store.request).toHaveProperty('play');
+      expectTypeOf(store.request).toHaveProperty('pause');
+    });
+
+    it('request methods have correct signatures', () => {
+      const store = createSingleSliceStore();
+
+      expectTypeOf(store.request.setVolume).toBeFunction();
+      expectTypeOf(store.request.setVolume).parameter(0).toEqualTypeOf<number>();
+      expectTypeOf(store.request.setVolume).returns.toEqualTypeOf<Promise<number>>();
+
+      expectTypeOf(store.request.setMuted).toBeFunction();
+      expectTypeOf(store.request.setMuted).parameter(0).toEqualTypeOf<boolean>();
+      expectTypeOf(store.request.setMuted).returns.toEqualTypeOf<Promise<boolean>>();
+    });
+
+    it('queue has correctly typed tasks', () => {
+      const store = createSingleSliceStore();
+
+      expectTypeOf(store.queue).toExtend<Queue<any>>();
+      expectTypeOf(store.queue.tasks).toExtend<TasksRecord<any>>();
+    });
+
+    it('target is nullable before attach', () => {
+      const store = createSingleSliceStore();
+
+      expectTypeOf(store.target).toEqualTypeOf<MockTarget | null>();
+    });
+  });
+
+  describe('InferStoreTarget', () => {
+    it('extracts target type from store', () => {
+      const _store = createSingleSliceStore();
+      type Target = InferStoreTarget<typeof _store>;
+      const _target: Target = {} as Target;
+
+      expectTypeOf(_target).toEqualTypeOf<MockTarget>();
+    });
+  });
+
+  describe('InferStoreState', () => {
+    it('extracts state type from store', () => {
+      const _store = createTestStore();
+      type State = InferStoreState<typeof _store>;
+      const _state: State = {} as State;
+
+      expectTypeOf(_state.volume).toEqualTypeOf<number>();
+      expectTypeOf(_state.muted).toEqualTypeOf<boolean>();
+      expectTypeOf(_state.playing).toEqualTypeOf<boolean>();
+    });
+  });
+
+  describe('InferStoreRequests', () => {
+    it('extracts request types from store', () => {
+      const _store = createSingleSliceStore();
+      type Requests = InferStoreRequests<typeof _store>;
+
+      expectTypeOf<Requests>().toHaveProperty('setVolume');
+      expectTypeOf<Requests>().toHaveProperty('setMuted');
+    });
+  });
+
+  describe('InferStoreTasks', () => {
+    it('extracts task types from store', () => {
+      const _store = createSingleSliceStore();
+      type Tasks = InferStoreTasks<typeof _store>;
+
+      expectTypeOf<Tasks>().toHaveProperty('setVolume');
+      expectTypeOf<Tasks>().toHaveProperty('setMuted');
+    });
+  });
+
+  describe('subscribe', () => {
+    it('listener receives full state', () => {
+      const store = createSingleSliceStore();
+
+      store.subscribe((state) => {
+        expectTypeOf(state).toEqualTypeOf<{ volume: number; muted: boolean }>();
+      });
+    });
+
+    it('selector listener receives selected value', () => {
+      const store = createSingleSliceStore();
+
+      store.subscribe(
+        s => s.volume,
+        (volume) => {
+          expectTypeOf(volume).toEqualTypeOf<number>();
+        },
+      );
+    });
+  });
+
+  describe('store queue integration types', () => {
+    it('queue.tasks has keys matching request names', () => {
+      const store = createSingleSliceStore();
+
+      expectTypeOf(store.queue.tasks).toHaveProperty('setVolume');
+      expectTypeOf(store.queue.tasks).toHaveProperty('setMuted');
+    });
+
+    it('task input type matches request parameter', () => {
+      const store = createSingleSliceStore();
+      const task = store.queue.tasks.setVolume;
+
+      if (task) {
+        expectTypeOf(task.input).toEqualTypeOf<number>();
+      }
+    });
+
+    it('task output type matches request return on success', () => {
+      const store = createSingleSliceStore();
+      const task = store.queue.tasks.setVolume;
+
+      if (task?.status === 'success') {
+        expectTypeOf(task.output).toEqualTypeOf<number>();
+      }
+    });
+
+    it('multi-slice store has combined queue task types', () => {
+      const store = createTestStore();
+
+      expectTypeOf(store.queue.tasks).toHaveProperty('setVolume');
+      expectTypeOf(store.queue.tasks).toHaveProperty('setMuted');
+      expectTypeOf(store.queue.tasks).toHaveProperty('play');
+      expectTypeOf(store.queue.tasks).toHaveProperty('pause');
+    });
+
+    it('queue.isPending accepts request names', () => {
+      const store = createSingleSliceStore();
+
+      // Should compile - valid request names
+      store.queue.isPending('setVolume');
+      store.queue.isPending('setMuted');
+    });
+
+    it('queue.isQueued accepts request names', () => {
+      const store = createSingleSliceStore();
+
+      store.queue.isQueued('setVolume');
+      store.queue.isQueued('setMuted');
+    });
+
+    it('queue.isSettled accepts request names', () => {
+      const store = createSingleSliceStore();
+
+      store.queue.isSettled('setVolume');
+      store.queue.isSettled('setMuted');
+    });
+
+    it('queue.reset accepts request names', () => {
+      const store = createSingleSliceStore();
+
+      store.queue.reset('setVolume');
+      store.queue.reset('setMuted');
+      store.queue.reset(); // all
+    });
+
+    it('queue.cancel accepts request names', () => {
+      const store = createSingleSliceStore();
+
+      store.queue.cancel('setVolume');
+      store.queue.cancel('setMuted');
+      store.queue.cancel(); // all
+    });
+
+    it('queue.abort accepts request names', () => {
+      const store = createSingleSliceStore();
+
+      store.queue.abort('setVolume');
+      store.queue.abort('setMuted');
+      store.queue.abort(); // all
+    });
+
+    it('queue.flush accepts request names', () => {
+      const store = createSingleSliceStore();
+
+      store.queue.flush('setVolume');
+      store.queue.flush('setMuted');
+      store.queue.flush(); // all
+    });
+
+    it('InferStoreTasks matches queue task record keys', () => {
+      const _store = createSingleSliceStore();
+      type Tasks = InferStoreTasks<typeof _store>;
+
+      expectTypeOf<Tasks>().toHaveProperty('setVolume');
+      expectTypeOf<Tasks>().toHaveProperty('setMuted');
+    });
+  });
+});
diff --git a/packages/store/src/lit/controllers/index.ts b/packages/store/src/lit/controllers/index.ts
new file mode 100644
index 00000000..15a88be8
--- /dev/null
+++ b/packages/store/src/lit/controllers/index.ts
@@ -0,0 +1,23 @@
+export type { AsyncStatus } from '../../core/queue';
+
+export { MutationController } from './mutation-controller';
+export type {
+  MutationError,
+  MutationIdle,
+  MutationPending,
+  MutationResult,
+  MutationSuccess,
+} from './mutation-controller';
+
+export { OptimisticController } from './optimistic-controller';
+export type {
+  OptimisticError,
+  OptimisticIdle,
+  OptimisticPending,
+  OptimisticResult,
+  OptimisticSuccess,
+} from './optimistic-controller';
+
+export { RequestController } from './request-controller';
+export { SelectorController } from './selector-controller';
+export { TasksController } from './tasks-controller';
diff --git a/packages/store/src/lit/controllers/mutation-controller.ts b/packages/store/src/lit/controllers/mutation-controller.ts
new file mode 100644
index 00000000..91170b3f
--- /dev/null
+++ b/packages/store/src/lit/controllers/mutation-controller.ts
@@ -0,0 +1,139 @@
+import type { ReactiveController, ReactiveControllerHost } from '@lit/reactive-element';
+import type { EnsureFunction } from '@videojs/utils/types';
+import type { AsyncStatus, Task } from '../../core/queue';
+import type { AnyStore, InferStoreRequests } from '../../core/store';
+
+import { noop } from '@videojs/utils/function';
+
+// ----------------------------------------
+// Mutation Types
+// ----------------------------------------
+
+interface MutationBase<Mutate> {
+  status: AsyncStatus;
+  mutate: Mutate;
+  reset: () => void;
+}
+
+export interface MutationIdle<Mutate> extends MutationBase<Mutate> {
+  status: 'idle';
+}
+
+export interface MutationPending<Mutate> extends MutationBase<Mutate> {
+  status: 'pending';
+}
+
+export interface MutationSuccess<Mutate, Data> extends MutationBase<Mutate> {
+  status: 'success';
+  data: Data;
+}
+
+export interface MutationError<Mutate> extends MutationBase<Mutate> {
+  status: 'error';
+  error: unknown;
+}
+
+export type MutationResult<Mutate, Data>
+  = | MutationIdle<Mutate>
+    | MutationPending<Mutate>
+    | MutationSuccess<Mutate, Data>
+    | MutationError<Mutate>;
+
+// ----------------------------------------
+// Controller
+// ----------------------------------------
+
+/**
+ * Tracks a mutation's status with discriminated union result.
+ * Triggers host updates when the task status changes.
+ *
+ * @example
+ * ```ts
+ * class MyElement extends LitElement {
+ *   #playMutation = new MutationController(this, store, 'play');
+ *
+ *   render() {
+ *     const mutation = this.#playMutation.value;
+ *     return html`
+ *       <button
+ *         @click=${() => mutation.mutate()}
+ *         ?disabled=${mutation.status === 'pending'}
+ *       >
+ *        ...
+ *       </button>
+ *     `;
+ *   }
+ * }
+ * ```
+ */
+export class MutationController<
+  Store extends AnyStore,
+  Name extends keyof InferStoreRequests<Store>,
+  Mutate extends InferStoreRequests<Store>[Name] = InferStoreRequests<Store>[Name],
+> implements ReactiveController {
+  readonly #host: ReactiveControllerHost;
+  readonly #store: Store;
+  readonly #name: Name;
+
+  #task: Task | undefined;
+  #unsubscribe = noop;
+
+  constructor(host: ReactiveControllerHost, store: Store, name: Name) {
+    this.#host = host;
+    this.#store = store;
+    this.#name = name;
+    this.#task = store.queue.tasks[name];
+    host.addController(this);
+  }
+
+  get value(): MutationResult<Mutate, Awaited<ReturnType<EnsureFunction<Mutate>>>> {
+    const task = this.#task;
+
+    const base = {
+      mutate: this.#store.request[this.#name] as Mutate,
+      reset: this.#reset,
+    };
+
+    if (task?.status === 'success') {
+      return {
+        status: 'success',
+        ...base,
+        data: task.output as any,
+      };
+    }
+
+    if (task?.status === 'error') {
+      return {
+        status: 'error',
+        ...base,
+        error: task.error,
+      };
+    }
+
+    return {
+      status: task?.status ?? 'idle',
+      ...base,
+    };
+  }
+
+  #reset = () => {
+    this.#store.queue.reset(this.#name);
+  };
+
+  hostConnected() {
+    this.#task = this.#store.queue.tasks[this.#name];
+
+    this.#unsubscribe = this.#store.queue.subscribe((tasks) => {
+      const newTask = tasks[this.#name];
+      if (newTask !== this.#task) {
+        this.#task = newTask;
+        this.#host.requestUpdate();
+      }
+    });
+  }
+
+  hostDisconnected() {
+    this.#unsubscribe();
+    this.#unsubscribe = noop;
+  }
+}
diff --git a/packages/store/src/lit/controllers/optimistic-controller.ts b/packages/store/src/lit/controllers/optimistic-controller.ts
new file mode 100644
index 00000000..4602fd1c
--- /dev/null
+++ b/packages/store/src/lit/controllers/optimistic-controller.ts
@@ -0,0 +1,165 @@
+import type { ReactiveController, ReactiveControllerHost } from '@lit/reactive-element';
+import type { EnsureFunction } from '@videojs/utils/types';
+import type { Task } from '../../core/queue';
+import type { AnyStore, InferStoreRequests, InferStoreState } from '../../core/store';
+
+import { Disposer } from '@videojs/utils/events';
+
+// ----------------------------------------
+// Optimistic Types
+// ----------------------------------------
+
+interface OptimisticBase<Value, SetValue> {
+  value: Value;
+  setValue: SetValue;
+  reset: () => void;
+}
+
+export interface OptimisticIdle<Value, SetValue> extends OptimisticBase<Value, SetValue> {
+  status: 'idle';
+}
+
+export interface OptimisticPending<Value, SetValue> extends OptimisticBase<Value, SetValue> {
+  status: 'pending';
+}
+
+export interface OptimisticSuccess<Value, SetValue> extends OptimisticBase<Value, SetValue> {
+  status: 'success';
+}
+
+export interface OptimisticError<Value, SetValue> extends OptimisticBase<Value, SetValue> {
+  status: 'error';
+  error: unknown;
+}
+
+export type OptimisticResult<Value, SetValue>
+  = | OptimisticIdle<Value, SetValue>
+    | OptimisticPending<Value, SetValue>
+    | OptimisticSuccess<Value, SetValue>
+    | OptimisticError<Value, SetValue>;
+
+// ----------------------------------------
+// Controller
+// ----------------------------------------
+
+/**
+ * Shows optimistic value while mutation is pending, actual value otherwise.
+ * When setValue is called, immediately shows the new value while the request
+ * is in flight. Reverts to actual value if the request fails.
+ *
+ * @example
+ * ```ts
+ * class VolumeSlider extends LitElement {
+ *   #volume = new OptimisticController(this, store, 'setVolume', s => s.volume);
+ *
+ *   render() {
+ *     const { value, setValue, status } = this.#volume.value;
+ *     return html`
+ *       <input
+ *         type="range"
+ *         .value=${value}
+ *         @input=${(e) => setValue(Number(e.target.value))}
+ *         style="opacity: ${status === 'pending' ? 0.5 : 1}"
+ *       />
+ *     `;
+ *   }
+ * }
+ * ```
+ */
+export class OptimisticController<
+  Store extends AnyStore,
+  Name extends keyof InferStoreRequests<Store>,
+  Value,
+  Request extends InferStoreRequests<Store>[Name] = InferStoreRequests<Store>[Name],
+> implements ReactiveController {
+  readonly #host: ReactiveControllerHost;
+  readonly #store: Store;
+  readonly #name: Name;
+  readonly #selector: (state: InferStoreState<Store>) => Value;
+  readonly #disposer = new Disposer();
+
+  #optimistic: Value | null = null;
+  #task: Task | undefined;
+
+  constructor(
+    host: ReactiveControllerHost,
+    store: Store,
+    name: Name,
+    selector: (state: InferStoreState<Store>) => Value,
+  ) {
+    this.#host = host;
+    this.#store = store;
+    this.#name = name;
+    this.#selector = selector;
+    this.#task = store.queue.tasks[name];
+    host.addController(this);
+  }
+
+  get value(): OptimisticResult<Value, (value: Value) => ReturnType<EnsureFunction<Request>>> {
+    const task = this.#task;
+
+    // Show optimistic value when set (cleared on task settlement)
+    const value = this.#optimistic !== null ? this.#optimistic : this.#selector(this.#store.state);
+    const base = {
+      value,
+      setValue: this.#setValue,
+      reset: this.#reset,
+    };
+
+    if (task?.status === 'error') {
+      return {
+        status: 'error',
+        ...base,
+        error: task.error,
+      };
+    }
+
+    return {
+      status: task?.status ?? 'idle',
+      ...base,
+    };
+  }
+
+  #setValue = (newValue: Value): ReturnType<EnsureFunction<Request>> => {
+    this.#optimistic = newValue;
+    this.#host.requestUpdate();
+
+    const request = this.#store.request[this.#name] as (value: Value) => ReturnType<EnsureFunction<Request>>;
+
+    return request(newValue);
+  };
+
+  #reset = (): void => {
+    this.#optimistic = null;
+    this.#host.requestUpdate();
+
+    this.#task = this.#store.queue.tasks[this.#name];
+    if (this.#task) this.#store.queue.reset(this.#name);
+  };
+
+  hostConnected() {
+    this.#task = this.#store.queue.tasks[this.#name];
+
+    this.#disposer.add(this.#store.subscribe(this.#selector, () => this.#host.requestUpdate()));
+
+    this.#disposer.add(
+      this.#store.queue.subscribe((tasks) => {
+        const newTask = tasks[this.#name];
+        if (newTask !== this.#task) {
+          this.#task = newTask;
+
+          // Clear optimistic value when task settles
+          if (this.#optimistic !== null && newTask?.status !== 'pending') {
+            this.#optimistic = null;
+          }
+
+          this.#host.requestUpdate();
+        }
+      }),
+    );
+  }
+
+  hostDisconnected() {
+    this.#disposer.dispose();
+  }
+}
diff --git a/packages/store/src/lit/controllers/request-controller.ts b/packages/store/src/lit/controllers/request-controller.ts
new file mode 100644
index 00000000..a6380918
--- /dev/null
+++ b/packages/store/src/lit/controllers/request-controller.ts
@@ -0,0 +1,37 @@
+import type { ReactiveController, ReactiveControllerHost } from '@lit/reactive-element';
+import type { AnyStore, InferStoreRequests } from '../../core/store';
+
+/**
+ * Provides access to a store request by key.
+ *
+ * @example
+ * ```ts
+ * class MyElement extends LitElement {
+ *   #play = new RequestController(this, store, 'play');
+ *
+ *   render() {
+ *     return html`<button @click=${() => this.#play.value()}>Play</button>`;
+ *   }
+ * }
+ * ```
+ */
+export class RequestController<
+  Store extends AnyStore,
+  Name extends keyof InferStoreRequests<Store>,
+> implements ReactiveController {
+  readonly #store: Store;
+  readonly #name: Name;
+
+  constructor(host: ReactiveControllerHost, store: Store, name: Name) {
+    this.#store = store;
+    this.#name = name;
+    host.addController(this);
+  }
+
+  get value(): InferStoreRequests<Store>[Name] {
+    return this.#store.request[this.#name] as InferStoreRequests<Store>[Name];
+  }
+
+  // no-op to satisfy `ReactiveController` interface
+  hostConnected() {}
+}
diff --git a/packages/store/src/lit/controllers/selector-controller.ts b/packages/store/src/lit/controllers/selector-controller.ts
new file mode 100644
index 00000000..673407d2
--- /dev/null
+++ b/packages/store/src/lit/controllers/selector-controller.ts
@@ -0,0 +1,54 @@
+import type { ReactiveController, ReactiveControllerHost } from '@lit/reactive-element';
+import type { AnyStore, InferStoreState } from '../../core/store';
+
+import { noop } from '@videojs/utils/function';
+
+/**
+ * Subscribes to a selected portion of store state.
+ * Triggers host updates when the selected value changes.
+ *
+ * @example
+ * ```ts
+ * class MyElement extends LitElement {
+ *   #paused = new SelectorController(this, store, s => s.paused);
+ *
+ *   render() {
+ *     return html`<button>${this.#paused.value ? 'Play' : 'Pause'}</button>`;
+ *   }
+ * }
+ * ```
+ */
+export class SelectorController<Store extends AnyStore, Value> implements ReactiveController {
+  readonly #host: ReactiveControllerHost;
+  readonly #store: Store;
+  readonly #selector: (state: InferStoreState<Store>) => Value;
+
+  #value: Value;
+  #unsubscribe = noop;
+
+  constructor(host: ReactiveControllerHost, store: Store, selector: (state: InferStoreState<Store>) => Value) {
+    this.#host = host;
+    this.#store = store;
+    this.#selector = selector;
+    this.#value = selector(store.state);
+    host.addController(this);
+  }
+
+  get value(): Value {
+    return this.#value;
+  }
+
+  hostConnected() {
+    // Sync value on reconnect to avoid stale state
+    this.#value = this.#selector(this.#store.state);
+    this.#unsubscribe = this.#store.subscribe(this.#selector, (value) => {
+      this.#value = value;
+      this.#host.requestUpdate();
+    });
+  }
+
+  hostDisconnected() {
+    this.#unsubscribe();
+    this.#unsubscribe = noop;
+  }
+}
diff --git a/packages/store/src/lit/controllers/tasks-controller.ts b/packages/store/src/lit/controllers/tasks-controller.ts
new file mode 100644
index 00000000..924a824a
--- /dev/null
+++ b/packages/store/src/lit/controllers/tasks-controller.ts
@@ -0,0 +1,55 @@
+import type { ReactiveController, ReactiveControllerHost } from '@lit/reactive-element';
+import type { AnyStore } from '../../core/store';
+
+import { noop } from '@videojs/utils/function';
+
+/**
+ * Subscribes to task state changes.
+ *
+ * Triggers host updates when tasks change.
+ *
+ * @example
+ * ```ts
+ * class MyElement extends LitElement {
+ *   #tasks = new TasksController(this, store);
+ *
+ *   render() {
+ *     const playTask = this.#tasks.value.play;
+ *     const isPending = playTask?.status === 'pending';
+ *     return html`<button ?disabled=${isPending}>Play</button>`;
+ *   }
+ * }
+ * ```
+ */
+export class TasksController<Store extends AnyStore> implements ReactiveController {
+  readonly #host: ReactiveControllerHost;
+  readonly #store: Store;
+
+  #value: Store['queue']['tasks'];
+  #unsubscribe = noop;
+
+  constructor(host: ReactiveControllerHost, store: Store) {
+    this.#host = host;
+    this.#store = store;
+    this.#value = store.queue.tasks;
+    host.addController(this);
+  }
+
+  get value(): Store['queue']['tasks'] {
+    return this.#value;
+  }
+
+  hostConnected() {
+    // Sync value on reconnect to avoid stale state
+    this.#value = this.#store.queue.tasks;
+    this.#unsubscribe = this.#store.queue.subscribe((tasks) => {
+      this.#value = tasks;
+      this.#host.requestUpdate();
+    });
+  }
+
+  hostDisconnected() {
+    this.#unsubscribe();
+    this.#unsubscribe = noop;
+  }
+}
diff --git a/packages/store/src/lit/controllers/tests/mutation-controller.test.ts b/packages/store/src/lit/controllers/tests/mutation-controller.test.ts
new file mode 100644
index 00000000..8025c6f8
--- /dev/null
+++ b/packages/store/src/lit/controllers/tests/mutation-controller.test.ts
@@ -0,0 +1,252 @@
+import { noop } from '@videojs/utils/function';
+
+import { describe, expect, it } from 'vitest';
+import { createSlice } from '../../../core/slice';
+import { createStore as createCoreStore } from '../../../core/store';
+import { createCoreTestStore, createCustomKeyTestStore, createMockHost, MockMedia } from '../../tests/test-utils';
+import { MutationController } from '../mutation-controller';
+
+describe('MutationController', () => {
+  it('returns mutation result with idle status initially', () => {
+    const { store } = createCoreTestStore();
+    const host = createMockHost();
+
+    const controller = new MutationController(host, store, 'setVolume');
+
+    expect(controller.value.status).toBe('idle');
+  });
+
+  it('registers with host', () => {
+    const { store } = createCoreTestStore();
+    const host = createMockHost();
+
+    const controller = new MutationController(host, store, 'setVolume');
+
+    expect(host.controllers.has(controller)).toBe(true);
+  });
+
+  it('provides mutate function', () => {
+    const { store } = createCoreTestStore();
+    const host = createMockHost();
+
+    const controller = new MutationController(host, store, 'setVolume');
+
+    expect(typeof controller.value.mutate).toBe('function');
+  });
+
+  it('tracks success state with data', async () => {
+    const { store } = createCoreTestStore();
+    const host = createMockHost();
+
+    const controller = new MutationController(host, store, 'setVolume');
+    controller.hostConnected();
+
+    await controller.value.mutate(0.7);
+
+    expect(controller.value.status).toBe('success');
+    if (controller.value.status === 'success') {
+      expect(controller.value.data).toBe(0.7);
+    }
+    expect(host.updateCount).toBeGreaterThan(0);
+  });
+
+  it('reset clears settled state', async () => {
+    const { store } = createCoreTestStore();
+    const host = createMockHost();
+
+    const controller = new MutationController(host, store, 'setVolume');
+    controller.hostConnected();
+
+    await controller.value.mutate(0.5);
+    expect(controller.value.status).toBe('success');
+
+    controller.value.reset();
+
+    expect(controller.value.status).toBe('idle');
+  });
+
+  it('unsubscribes on hostDisconnected', async () => {
+    const { store } = createCoreTestStore();
+    const host = createMockHost();
+
+    const controller = new MutationController(host, store, 'setVolume');
+    controller.hostConnected();
+    controller.hostDisconnected();
+
+    const updateCountBefore = host.updateCount;
+    await store.request.setVolume!(0.5);
+
+    expect(host.updateCount).toBe(updateCountBefore);
+  });
+
+  it('tracks error with error object', async () => {
+    const host = createMockHost();
+
+    // Create a slice with a failing request for testing
+    const failingSlice = createSlice<MockMedia>()({
+      initialState: { volume: 1, muted: false },
+      getSnapshot: ({ target }) => ({
+        volume: target.volume,
+        muted: target.muted,
+      }),
+      subscribe: () => {},
+      request: {
+        failingRequest: async () => {
+          throw new Error('Test error');
+        },
+      },
+    });
+
+    const failingStore = createCoreStore({
+      slices: [failingSlice],
+      onError: noop,
+    });
+
+    const target = new MockMedia();
+    failingStore.attach(target);
+
+    const controller = new MutationController(host, failingStore, 'failingRequest');
+    controller.hostConnected();
+
+    try {
+      await controller.value.mutate();
+    } catch {
+      // Expected to throw
+    }
+
+    expect(controller.value.status).toBe('error');
+    if (controller.value.status === 'error') {
+      expect(controller.value.error).toBeInstanceOf(Error);
+      expect((controller.value.error as Error).message).toBe('Test error');
+    }
+  });
+
+  it('tracks pending status while mutation is in flight', async () => {
+    const { store } = createCoreTestStore();
+    const host = createMockHost();
+
+    const controller = new MutationController(host, store, 'slowSetVolume');
+    controller.hostConnected();
+
+    const promise = controller.value.mutate(0.5);
+
+    // Wait for task to start
+    await new Promise(resolve => setTimeout(resolve, 10));
+
+    expect(controller.value.status).toBe('pending');
+
+    await promise;
+
+    expect(controller.value.status).toBe('success');
+  });
+
+  it('syncs state on reconnect after disconnect', async () => {
+    const { store } = createCoreTestStore();
+    const host = createMockHost();
+
+    const controller = new MutationController(host, store, 'setVolume');
+    controller.hostConnected();
+
+    await controller.value.mutate(0.5);
+    expect(controller.value.status).toBe('success');
+
+    controller.hostDisconnected();
+
+    // Trigger another mutation while disconnected
+    await store.request.setVolume!(0.8);
+
+    // Reconnect - should sync to current task state
+    controller.hostConnected();
+
+    expect(controller.value.status).toBe('success');
+  });
+
+  describe('custom key (name !== key)', () => {
+    it('tracks task by name when key differs', async () => {
+      const { store } = createCustomKeyTestStore();
+      const host = createMockHost();
+
+      // adjustVolume has name='adjustVolume' but key='audio-settings'
+      const controller = new MutationController(host, store, 'adjustVolume');
+      controller.hostConnected();
+
+      const promise = controller.value.mutate(0.5);
+
+      // Wait for task to start
+      await new Promise(resolve => setTimeout(resolve, 5));
+
+      expect(controller.value.status).toBe('pending');
+
+      await promise;
+
+      expect(controller.value.status).toBe('success');
+      if (controller.value.status === 'success') {
+        expect(controller.value.data).toBe(0.5);
+      }
+    });
+
+    it('tracks correct task when multiple requests share same key', async () => {
+      const { store } = createCustomKeyTestStore();
+      const hostVolume = createMockHost();
+      const hostMute = createMockHost();
+
+      // Both adjustVolume and toggleMute have key='audio-settings'
+      const volumeController = new MutationController(hostVolume, store, 'adjustVolume');
+      const muteController = new MutationController(hostMute, store, 'toggleMute');
+      volumeController.hostConnected();
+      muteController.hostConnected();
+
+      // Start volume adjustment
+      const volumePromise = volumeController.value.mutate(0.5);
+
+      await new Promise(resolve => setTimeout(resolve, 5));
+
+      // Volume controller should be pending
+      expect(volumeController.value.status).toBe('pending');
+      // Mute controller should be idle (different name, even though same key)
+      expect(muteController.value.status).toBe('idle');
+
+      await volumePromise;
+
+      expect(volumeController.value.status).toBe('success');
+      expect(muteController.value.status).toBe('idle');
+    });
+
+    it('superseded task shows error status', async () => {
+      const { store } = createCustomKeyTestStore();
+      const hostVolume = createMockHost();
+      const hostMute = createMockHost();
+
+      const volumeController = new MutationController(hostVolume, store, 'adjustVolume');
+      const muteController = new MutationController(hostMute, store, 'toggleMute');
+      volumeController.hostConnected();
+      muteController.hostConnected();
+
+      // Start volume adjustment
+      const volumePromise = volumeController.value.mutate(0.5);
+
+      await new Promise(resolve => setTimeout(resolve, 5));
+
+      // Start mute toggle - this will supersede volume because same key
+      const mutePromise = muteController.value.mutate(true);
+
+      // Wait for superseding to happen
+      await new Promise(resolve => setTimeout(resolve, 5));
+
+      // Volume task was superseded
+      try {
+        await volumePromise;
+      } catch {
+        // Expected - task was superseded
+      }
+
+      // Tasks are keyed by name, so superseded task shows error status
+      expect(volumeController.value.status).toBe('error');
+      expect(muteController.value.status).toBe('pending');
+
+      await mutePromise;
+
+      expect(muteController.value.status).toBe('success');
+    });
+  });
+});
diff --git a/packages/store/src/lit/controllers/tests/optimistic-controller.test.ts b/packages/store/src/lit/controllers/tests/optimistic-controller.test.ts
new file mode 100644
index 00000000..0dcc5d21
--- /dev/null
+++ b/packages/store/src/lit/controllers/tests/optimistic-controller.test.ts
@@ -0,0 +1,302 @@
+import { noop } from '@videojs/utils/function';
+
+import { describe, expect, it } from 'vitest';
+import { createSlice } from '../../../core/slice';
+import { createStore as createCoreStore } from '../../../core/store';
+import { createCoreTestStore, createCustomKeyTestStore, createMockHost, MockMedia } from '../../tests/test-utils';
+import { OptimisticController } from '../optimistic-controller';
+
+describe('OptimisticController', () => {
+  it('returns actual value initially', () => {
+    const { store } = createCoreTestStore();
+    const host = createMockHost();
+
+    const controller = new OptimisticController(host, store, 'setVolume', s => s.volume);
+
+    expect(controller.value.value).toBe(1);
+    expect(controller.value.status).toBe('idle');
+  });
+
+  it('registers with host', () => {
+    const { store } = createCoreTestStore();
+    const host = createMockHost();
+
+    const controller = new OptimisticController(host, store, 'setVolume', s => s.volume);
+
+    expect(host.controllers.has(controller)).toBe(true);
+  });
+
+  it('provides setValue function', () => {
+    const { store } = createCoreTestStore();
+    const host = createMockHost();
+
+    const controller = new OptimisticController(host, store, 'setVolume', s => s.volume);
+
+    expect(typeof controller.value.setValue).toBe('function');
+  });
+
+  it('updates actual value after mutation completes', async () => {
+    const { store } = createCoreTestStore();
+    const host = createMockHost();
+
+    const controller = new OptimisticController(host, store, 'setVolume', s => s.volume);
+    controller.hostConnected();
+
+    await controller.value.setValue(0.3);
+
+    expect(controller.value.value).toBe(0.3);
+    expect(controller.value.status).toBe('success');
+  });
+
+  it('reset clears error state', async () => {
+    const { store } = createCoreTestStore();
+    const host = createMockHost();
+
+    const controller = new OptimisticController(host, store, 'setVolume', s => s.volume);
+    controller.hostConnected();
+
+    await controller.value.setValue(0.5);
+
+    controller.value.reset();
+
+    expect(controller.value.status).toBe('idle');
+  });
+
+  it('triggers host update when state changes', async () => {
+    const { store, target } = createCoreTestStore();
+    const host = createMockHost();
+
+    const controller = new OptimisticController(host, store, 'setVolume', s => s.volume);
+    controller.hostConnected();
+
+    target.volume = 0.8;
+    target.dispatchEvent(new Event('volumechange'));
+
+    expect(host.updateCount).toBeGreaterThan(0);
+    expect(controller.value.value).toBe(0.8);
+  });
+
+  it('unsubscribes on hostDisconnected', async () => {
+    const { store, target } = createCoreTestStore();
+    const host = createMockHost();
+
+    const controller = new OptimisticController(host, store, 'setVolume', s => s.volume);
+    controller.hostConnected();
+    controller.hostDisconnected();
+
+    const updateCountBefore = host.updateCount;
+    target.volume = 0.2;
+    target.dispatchEvent(new Event('volumechange'));
+
+    expect(host.updateCount).toBe(updateCountBefore);
+  });
+
+  it('shows optimistic value immediately while pending', async () => {
+    const { store } = createCoreTestStore();
+    const host = createMockHost();
+
+    const controller = new OptimisticController(host, store, 'slowSetVolume', s => s.volume);
+    controller.hostConnected();
+
+    const promise = controller.value.setValue(0.3);
+
+    // Optimistic value shown immediately
+    expect(controller.value.value).toBe(0.3);
+    expect(host.updateCount).toBeGreaterThan(0);
+
+    // Wait for task to start
+    await new Promise(resolve => setTimeout(resolve, 10));
+    expect(controller.value.status).toBe('pending');
+    expect(controller.value.value).toBe(0.3);
+
+    await promise;
+
+    // After completion, shows actual value
+    expect(controller.value.status).toBe('success');
+    expect(controller.value.value).toBe(0.3);
+  });
+
+  it('reverts to actual value on error', async () => {
+    const host = createMockHost();
+
+    const failingSlice = createSlice<MockMedia>()({
+      initialState: { volume: 1, muted: false },
+      getSnapshot: ({ target }) => ({
+        volume: target.volume,
+        muted: target.muted,
+      }),
+      subscribe: () => {},
+      request: {
+        failingSetVolume: async () => {
+          await new Promise(resolve => setTimeout(resolve, 10));
+          throw new Error('Test error');
+        },
+      },
+    });
+
+    const failingStore = createCoreStore({
+      slices: [failingSlice],
+      onError: noop,
+    });
+
+    const target = new MockMedia();
+    failingStore.attach(target);
+
+    const controller = new OptimisticController(host, failingStore, 'failingSetVolume', s => s.volume);
+    controller.hostConnected();
+
+    const promise = controller.value.setValue(0.5);
+
+    // Optimistic value shown immediately
+    expect(controller.value.value).toBe(0.5);
+
+    try {
+      await promise;
+    } catch {
+      // Expected
+    }
+
+    // After error, shows actual value (reverted)
+    expect(controller.value.status).toBe('error');
+    expect(controller.value.value).toBe(1); // Original value
+    if (controller.value.status === 'error') {
+      expect(controller.value.error).toBeInstanceOf(Error);
+    }
+  });
+
+  it('handles rapid setValue calls (superseding)', async () => {
+    const { store } = createCoreTestStore();
+    const host = createMockHost();
+
+    const controller = new OptimisticController(host, store, 'slowSetVolume', s => s.volume);
+    controller.hostConnected();
+
+    // Fire multiple rapid calls
+    const promise1 = controller.value.setValue(0.3);
+    const promise2 = controller.value.setValue(0.5);
+    const promise3 = controller.value.setValue(0.7);
+
+    // Should show latest optimistic value
+    expect(controller.value.value).toBe(0.7);
+
+    // First two get superseded
+    await expect(promise1).rejects.toMatchObject({ code: 'SUPERSEDED' });
+    await expect(promise2).rejects.toMatchObject({ code: 'SUPERSEDED' });
+    await promise3;
+
+    expect(controller.value.status).toBe('success');
+    expect(controller.value.value).toBe(0.7);
+  });
+
+  it('reset when already idle is safe', () => {
+    const { store } = createCoreTestStore();
+    const host = createMockHost();
+
+    const controller = new OptimisticController(host, store, 'setVolume', s => s.volume);
+    controller.hostConnected();
+
+    expect(controller.value.status).toBe('idle');
+
+    // Reset when idle should not throw
+    controller.value.reset();
+
+    expect(controller.value.status).toBe('idle');
+    expect(controller.value.value).toBe(1);
+  });
+
+  describe('custom key (name !== key)', () => {
+    it('tracks task by name when key differs', async () => {
+      const { store } = createCustomKeyTestStore();
+      const host = createMockHost();
+
+      // adjustVolume has name='adjustVolume' but key='audio-settings'
+      const controller = new OptimisticController(host, store, 'adjustVolume', s => s.volume);
+      controller.hostConnected();
+
+      const promise = controller.value.setValue(0.5);
+
+      // Optimistic value shown immediately
+      expect(controller.value.value).toBe(0.5);
+
+      // Wait for task to start
+      await new Promise(resolve => setTimeout(resolve, 5));
+
+      expect(controller.value.status).toBe('pending');
+
+      await promise;
+
+      expect(controller.value.status).toBe('success');
+      expect(controller.value.value).toBe(0.5);
+    });
+
+    it('tracks correct task when multiple requests share same key', async () => {
+      const { store } = createCustomKeyTestStore();
+      const hostVolume = createMockHost();
+      const hostMute = createMockHost();
+
+      // Both adjustVolume and toggleMute have key='audio-settings'
+      const volumeController = new OptimisticController(hostVolume, store, 'adjustVolume', s => s.volume);
+      const muteController = new OptimisticController(hostMute, store, 'toggleMute', s => s.muted);
+      volumeController.hostConnected();
+      muteController.hostConnected();
+
+      // Start volume adjustment
+      const volumePromise = volumeController.value.setValue(0.5);
+
+      await new Promise(resolve => setTimeout(resolve, 5));
+
+      // Volume controller should be pending
+      expect(volumeController.value.status).toBe('pending');
+      expect(volumeController.value.value).toBe(0.5); // Optimistic
+
+      // Mute controller should be idle (different name, even though same key)
+      expect(muteController.value.status).toBe('idle');
+      expect(muteController.value.value).toBe(false); // Actual
+
+      await volumePromise;
+
+      expect(volumeController.value.status).toBe('success');
+      expect(muteController.value.status).toBe('idle');
+    });
+
+    it('superseded task shows error status', async () => {
+      const { store } = createCustomKeyTestStore();
+      const hostVolume = createMockHost();
+      const hostMute = createMockHost();
+
+      const volumeController = new OptimisticController(hostVolume, store, 'adjustVolume', s => s.volume);
+      const muteController = new OptimisticController(hostMute, store, 'toggleMute', s => s.muted);
+      volumeController.hostConnected();
+      muteController.hostConnected();
+
+      // Start volume adjustment
+      const volumePromise = volumeController.value.setValue(0.5);
+
+      await new Promise(resolve => setTimeout(resolve, 5));
+
+      // Start mute toggle - this will supersede volume because same key
+      const mutePromise = muteController.value.setValue(true);
+
+      // Mute shows optimistic immediately
+      expect(muteController.value.value).toBe(true);
+
+      // Volume task was superseded
+      try {
+        await volumePromise;
+      } catch {
+        // Expected - task was superseded
+      }
+
+      // Wait for subscription callbacks to fire
+      await new Promise(resolve => setTimeout(resolve, 10));
+
+      // Tasks are keyed by name, so superseded task shows error status
+      expect(volumeController.value.status).toBe('error');
+
+      // Complete the mute operation
+      await mutePromise;
+
+      expect(muteController.value.status).toBe('success');
+    });
+  });
+});
diff --git a/packages/store/src/lit/controllers/tests/request-controller.test.ts b/packages/store/src/lit/controllers/tests/request-controller.test.ts
new file mode 100644
index 00000000..819f4503
--- /dev/null
+++ b/packages/store/src/lit/controllers/tests/request-controller.test.ts
@@ -0,0 +1,45 @@
+import { describe, expect, it } from 'vitest';
+
+import { createCoreTestStore, createMockHost } from '../../tests/test-utils';
+import { RequestController } from '../request-controller';
+
+describe('RequestController', () => {
+  it('returns request function', () => {
+    const { store } = createCoreTestStore();
+    const host = createMockHost();
+
+    const controller = new RequestController(host, store, 'setVolume');
+
+    expect(typeof controller.value).toBe('function');
+  });
+
+  it('registers with host', () => {
+    const { store } = createCoreTestStore();
+    const host = createMockHost();
+
+    const controller = new RequestController(host, store, 'setVolume');
+
+    expect(host.controllers.has(controller)).toBe(true);
+  });
+
+  it('returns stable reference', () => {
+    const { store } = createCoreTestStore();
+    const host = createMockHost();
+
+    const controller = new RequestController(host, store, 'setVolume');
+    const first = controller.value;
+    const second = controller.value;
+
+    expect(first).toBe(second);
+  });
+
+  it('request works correctly', async () => {
+    const { store, target } = createCoreTestStore();
+    const host = createMockHost();
+
+    const controller = new RequestController(host, store, 'setVolume');
+    await controller.value(0.7);
+
+    expect(target.volume).toBe(0.7);
+  });
+});
diff --git a/packages/store/src/lit/controllers/tests/selector-controller.test.ts b/packages/store/src/lit/controllers/tests/selector-controller.test.ts
new file mode 100644
index 00000000..78cc2018
--- /dev/null
+++ b/packages/store/src/lit/controllers/tests/selector-controller.test.ts
@@ -0,0 +1,117 @@
+import { describe, expect, it } from 'vitest';
+
+import { createCoreTestStore, createMockHost } from '../../tests/test-utils';
+import { SelectorController } from '../selector-controller';
+
+describe('SelectorController', () => {
+  it('returns selected state', () => {
+    const { store } = createCoreTestStore();
+    const host = createMockHost();
+
+    const controller = new SelectorController(host, store, s => s.volume);
+
+    expect(controller.value).toBe(1);
+  });
+
+  it('registers with host', () => {
+    const { store } = createCoreTestStore();
+    const host = createMockHost();
+
+    const controller = new SelectorController(host, store, s => s.volume);
+
+    expect(host.controllers.has(controller)).toBe(true);
+  });
+
+  it('subscribes on hostConnected', () => {
+    const { store, target } = createCoreTestStore();
+    const host = createMockHost();
+
+    const controller = new SelectorController(host, store, s => s.volume);
+    controller.hostConnected();
+
+    target.volume = 0.5;
+    target.dispatchEvent(new Event('volumechange'));
+
+    expect(controller.value).toBe(0.5);
+    expect(host.updateCount).toBe(1);
+  });
+
+  it('unsubscribes on hostDisconnected', () => {
+    const { store, target } = createCoreTestStore();
+    const host = createMockHost();
+
+    const controller = new SelectorController(host, store, s => s.volume);
+    controller.hostConnected();
+    controller.hostDisconnected();
+
+    const updateCountBefore = host.updateCount;
+    target.volume = 0.3;
+    target.dispatchEvent(new Event('volumechange'));
+
+    expect(host.updateCount).toBe(updateCountBefore);
+  });
+
+  it('syncs value on reconnect after state changed while disconnected', () => {
+    const { store, target } = createCoreTestStore();
+    const host = createMockHost();
+
+    const controller = new SelectorController(host, store, s => s.volume);
+    controller.hostConnected();
+
+    expect(controller.value).toBe(1);
+
+    controller.hostDisconnected();
+
+    target.volume = 0.3;
+    target.dispatchEvent(new Event('volumechange'));
+
+    // Value should still be stale (not subscribed)
+    expect(controller.value).toBe(1);
+
+    // Reconnect - should have current value
+    controller.hostConnected();
+
+    expect(controller.value).toBe(0.3);
+  });
+
+  it('does not trigger update when unrelated state changes', () => {
+    const { store, target } = createCoreTestStore();
+    const host = createMockHost();
+
+    const controller = new SelectorController(host, store, s => s.volume);
+    controller.hostConnected();
+
+    target.muted = true;
+    target.dispatchEvent(new Event('volumechange'));
+
+    // Volume didn't change, so no update should be triggered
+    expect(host.updateCount).toBe(0);
+  });
+
+  it('handles multiple reconnect cycles', () => {
+    const { store, target } = createCoreTestStore();
+    const host = createMockHost();
+
+    const controller = new SelectorController(host, store, s => s.volume);
+
+    // First connect/disconnect
+    controller.hostConnected();
+    target.volume = 0.5;
+    target.dispatchEvent(new Event('volumechange'));
+    expect(controller.value).toBe(0.5);
+    controller.hostDisconnected();
+
+    // Change while disconnected
+    target.volume = 0.3;
+    target.dispatchEvent(new Event('volumechange'));
+
+    // Second connect - should sync to current value
+    controller.hostConnected();
+    expect(controller.value).toBe(0.3);
+
+    // Changes should work again
+    target.volume = 0.8;
+    target.dispatchEvent(new Event('volumechange'));
+    expect(controller.value).toBe(0.8);
+  });
+});
diff --git a/packages/store/src/lit/controllers/tests/tasks-controller.test.ts b/packages/store/src/lit/controllers/tests/tasks-controller.test.ts
new file mode 100644
index 00000000..b862578d
--- /dev/null
+++ b/packages/store/src/lit/controllers/tests/tasks-controller.test.ts
@@ -0,0 +1,94 @@
+import { describe, expect, it } from 'vitest';
+
+import { createCoreTestStore, createMockHost } from '../../tests/test-utils';
+import { TasksController } from '../tasks-controller';
+
+describe('TasksController', () => {
+  it('returns tasks record', () => {
+    const { store } = createCoreTestStore();
+    const host = createMockHost();
+
+    const controller = new TasksController(host, store);
+
+    expect(controller.value).toEqual({});
+  });
+
+  it('registers with host', () => {
+    const { store } = createCoreTestStore();
+    const host = createMockHost();
+
+    const controller = new TasksController(host, store);
+
+    expect(host.controllers.has(controller)).toBe(true);
+  });
+
+  it('updates when task completes', async () => {
+    const { store } = createCoreTestStore();
+    const host = createMockHost();
+
+    const controller = new TasksController(host, store);
+    controller.hostConnected();
+
+    expect(controller.value.setVolume).toBeUndefined();
+
+    await store.request.setVolume!(0.5);
+
+    expect(controller.value.setVolume).toBeDefined();
+    expect(controller.value.setVolume?.status).toBe('success');
+    expect(host.updateCount).toBeGreaterThan(0);
+  });
+
+  it('unsubscribes on hostDisconnected', async () => {
+    const { store } = createCoreTestStore();
+    const host = createMockHost();
+
+    const controller = new TasksController(host, store);
+    controller.hostConnected();
+    controller.hostDisconnected();
+
+    const updateCountBefore = host.updateCount;
+    await store.request.setVolume!(0.5);
+
+    expect(host.updateCount).toBe(updateCountBefore);
+  });
+
+  it('handles multiple task updates', async () => {
+    const { store } = createCoreTestStore();
+    const host = createMockHost();
+
+    const controller = new TasksController(host, store);
+    controller.hostConnected();
+
+    // Fire multiple requests
+    await store.request.setVolume!(0.5);
+    await store.request.setMuted!(true);
+
+    // Both tasks should be tracked
+    expect(controller.value.setVolume).toBeDefined();
+    expect(controller.value.setMuted).toBeDefined();
+    expect(controller.value.setVolume?.status).toBe('success');
+    expect(controller.value.setMuted?.status).toBe('success');
+  });
+
+  it('syncs to current tasks on reconnect', async () => {
+    const { store } = createCoreTestStore();
+    const host = createMockHost();
+
+    const controller = new TasksController(host, store);
+    controller.hostConnected();
+
+    await store.request.setVolume!(0.5);
+    expect(controller.value.setVolume?.status).toBe('success');
+
+    controller.hostDisconnected();
+
+    // Trigger another task while disconnected
+    await store.request.setMuted!(true);
+
+    // Reconnect - should sync to current tasks
+    controller.hostConnected();
+
+    expect(controller.value.setVolume?.status).toBe('success');
+    expect(controller.value.setMuted?.status).toBe('success');
+  });
+});
diff --git a/packages/store/src/lit/controllers/tests/types.test.ts b/packages/store/src/lit/controllers/tests/types.test.ts
new file mode 100644
index 00000000..5c25c8b2
--- /dev/null
+++ b/packages/store/src/lit/controllers/tests/types.test.ts
@@ -0,0 +1,143 @@
+import type { MutationResult, OptimisticResult } from '../index';
+
+import { describe, expectTypeOf, it } from 'vitest';
+
+import { createCoreTestStore, createMockHost } from '../../tests/test-utils';
+import { MutationController } from '../mutation-controller';
+import { OptimisticController } from '../optimistic-controller';
+import { RequestController } from '../request-controller';
+import { SelectorController } from '../selector-controller';
+import { TasksController } from '../tasks-controller';
+
+describe('controller types', () => {
+  describe('SelectorController', () => {
+    it('value has selected type', () => {
+      const { store } = createCoreTestStore();
+      const host = createMockHost();
+
+      const controller = new SelectorController(host, store, s => s.volume);
+
+      expectTypeOf(controller.value).toEqualTypeOf<number>();
+    });
+
+    it('value type matches selector return type', () => {
+      const { store } = createCoreTestStore();
+      const host = createMockHost();
+
+      const controller = new SelectorController(host, store, s => ({
+        volume: s.volume,
+        muted: s.muted,
+      }));
+
+      expectTypeOf(controller.value).toEqualTypeOf<{ volume: number; muted: boolean }>();
+    });
+  });
+
+  describe('RequestController', () => {
+    it('value is the request function', () => {
+      const { store } = createCoreTestStore();
+      const host = createMockHost();
+
+      const controller = new RequestController(host, store, 'setVolume');
+
+      expectTypeOf(controller.value).toBeFunction();
+      expectTypeOf(controller.value).parameter(0).toEqualTypeOf<number>();
+    });
+  });
+
+  describe('MutationController', () => {
+    it('value is MutationResult', () => {
+      const { store } = createCoreTestStore();
+      const host = createMockHost();
+
+      const controller = new MutationController(host, store, 'setVolume');
+
+      expectTypeOf(controller.value).toExtend<MutationResult<unknown, unknown>>();
+    });
+
+    it('value has mutate function', () => {
+      const { store } = createCoreTestStore();
+      const host = createMockHost();
+
+      const controller = new MutationController(host, store, 'setVolume');
+
+      expectTypeOf(controller.value.mutate).toBeFunction();
+    });
+
+    it('value has reset function', () => {
+      const { store } = createCoreTestStore();
+      const host = createMockHost();
+
+      const controller = new MutationController(host, store, 'setVolume');
+
+      expectTypeOf(controller.value.reset).toEqualTypeOf<() => void>();
+    });
+
+    it('value has status property', () => {
+      const { store } = createCoreTestStore();
+      const host = createMockHost();
+
+      const controller = new MutationController(host, store, 'setVolume');
+
+      expectTypeOf(controller.value.status).toEqualTypeOf<'idle' | 'pending' | 'success' | 'error'>();
+    });
+  });
+
+  describe('OptimisticController', () => {
+    it('value is OptimisticResult', () => {
+      const { store } = createCoreTestStore();
+      const host = createMockHost();
+
+      const controller = new OptimisticController(host, store, 'setVolume', s => s.volume);
+
+      expectTypeOf(controller.value).toExtend<OptimisticResult<unknown, unknown>>();
+    });
+
+    it('value has selected type', () => {
+      const { store } = createCoreTestStore();
+      const host = createMockHost();
+
+      const controller = new OptimisticController(host, store, 'setVolume', s => s.volume);
+
+      expectTypeOf(controller.value.value).toEqualTypeOf<number>();
+    });
+
+    it('value has setValue function', () => {
+      const { store } = createCoreTestStore();
+      const host = createMockHost();
+
+      const controller = new OptimisticController(host, store, 'setVolume', s => s.volume);
+
+      expectTypeOf(controller.value.setValue).toBeFunction();
+    });
+
+    it('value has reset function', () => {
+      const { store } = createCoreTestStore();
+      const host = createMockHost();
+
+      const controller = new OptimisticController(host, store, 'setVolume', s => s.volume);
+
+      expectTypeOf(controller.value.reset).toEqualTypeOf<() => void>();
+    });
+
+    it('value has status property', () => {
+      const { store } = createCoreTestStore();
+      const host = createMockHost();
+
+      const controller = new OptimisticController(host, store, 'setVolume', s => s.volume);
+
+      expectTypeOf(controller.value.status).toEqualTypeOf<'idle' | 'pending' | 'success' | 'error'>();
+    });
+  });
+
+  describe('TasksController', () => {
+    it('value is tasks record', () => {
+      const { store } = createCoreTestStore();
+      const host = createMockHost();
+
+      const controller = new TasksController(host, store);
+
+      expectTypeOf(controller.value).toEqualTypeOf<typeof store.queue.tasks>();
+    });
+  });
+});
diff --git a/packages/store/src/lit/create-store.ts b/packages/store/src/lit/create-store.ts
new file mode 100644
index 00000000..49b38ee9
--- /dev/null
+++ b/packages/store/src/lit/create-store.ts
@@ -0,0 +1,134 @@
+import type { Context } from '@lit/context';
+import type { ReactiveElement } from '@lit/reactive-element';
+import type { Constructor } from '@videojs/utils/types';
+import type { AnySlice, UnionSliceTarget } from '../core/slice';
+
+import type { StoreConfig, StoreConsumer, StoreProvider } from '../core/store';
+
+import { createContext } from '@lit/context';
+import { Store } from '../core/store';
+import { createStoreAttachMixin, createStoreMixin, createStoreProviderMixin } from './mixins';
+
+export const contextKey = Symbol('@videojs/store');
+
+export interface CreateStoreConfig<Slices extends AnySlice[]> extends StoreConfig<UnionSliceTarget<Slices>, Slices> {}
+
+export interface CreateStoreResult<Slices extends AnySlice[]> {
+  /**
+   * Combined mixin: provides store via context AND auto-attaches slotted media.
+   *
+   * @example
+   * ```ts
+   * class MyPlayer extends StoreMixin(LitElement) {}
+   * ```
+   */
+  StoreMixin: <T extends Constructor<ReactiveElement>>(Base: T) => T & Constructor<StoreProvider<Slices>>;
+
+  /**
+   * Mixin that provides store via context (no auto-attach).
+   *
+   * Use when you need granular control over store provisioning.
+   *
+   * @example
+   * ```ts
+   * class MyProvider extends StoreProviderMixin(LitElement) {}
+   * ```
+   */
+  StoreProviderMixin: <T extends Constructor<ReactiveElement>>(Base: T) => T & Constructor<StoreProvider<Slices>>;
+
+  /**
+   * Mixin that auto-attaches slotted media elements (requires store from context).
+   *
+   * Use when inheriting store from a parent provider.
+   *
+   * @example
+   * ```ts
+   * class MyControls extends StoreAttachMixin(LitElement) {}
+   * ```
+   */
+  StoreAttachMixin: <T extends Constructor<ReactiveElement>>(Base: T) => T & Constructor<StoreConsumer<Slices>>;
+
+  /**
+   * Context for consuming store in controllers.
+   *
+   * Use this with Lit's `ContextConsumer` or the `@consume` decorator.
+   *
+   * @example
+   * ```ts
+   * class MyElement extends LitElement {
+   *   @consume({ context, subscribe: true })
+   *   readonly store!: ContextType<typeof context>;
+   * }
+   * ```
+   */
+  context: Context<typeof contextKey, Store<UnionSliceTarget<Slices>, Slices>>;
+
+  /**
+   * Creates a store instance for imperative access.
+   *
+   * Useful for creating a store before rendering or for testing.
+   *
+   * @example
+   * ```ts
+   * const store = create();
+   * store.attach(videoElement);
+   * ```
+   */
+  create: () => Store<UnionSliceTarget<Slices>, Slices>;
+}
+
+/**
+ * Creates a store factory that returns mixins, context, and a create function.
+ *
+ * @param config - Store configuration including slices and optional lifecycle hooks
+ * @returns An object containing mixins, context, and create function
+ *
+ * @example
+ * ```ts
+ * import { createStore } from '@videojs/store/lit';
+ * import { playbackSlice } from '@videojs/core/dom';
+ *
+ * const { StoreMixin } = createStore({
+ *   slices: [playbackSlice],
+ * });
+ *
+ * // Create a player element with store
+ * class MyPlayer extends StoreMixin(LitElement) {}
+ *
+ * customElements.define('my-player', MyPlayer);
+ * ```
+ *
+ * @example
+ * ```html
+ * <my-player>
+ *   <video src="video.mp4"></video>
+ * </my-player>
+ * ```
+ */
+export function createStore<Slices extends AnySlice[]>(config: CreateStoreConfig<Slices>): CreateStoreResult<Slices> {
+  type Target = UnionSliceTarget<Slices>;
+  type ProvidedStore = Store<Target, Slices>;
+
+  const context = createContext<ProvidedStore, typeof contextKey>(contextKey);
+
+  function create(): ProvidedStore {
+    return new Store(config);
+  }
+
+  const StoreProviderMixin = createStoreProviderMixin<Slices>(
+    context,
+    create,
+  );
+
+  const StoreAttachMixin = createStoreAttachMixin<Slices>(context);
+
+  const StoreMixin = createStoreMixin<Slices>(context, create);
+
+  return {
+    StoreMixin,
+    StoreProviderMixin,
+    StoreAttachMixin,
+    context,
+    create,
+  };
+}
diff --git a/packages/store/src/lit/index.ts b/packages/store/src/lit/index.ts
index e69de29b..2ae6dcef 100644
--- a/packages/store/src/lit/index.ts
+++ b/packages/store/src/lit/index.ts
@@ -0,0 +1,20 @@
+// Controllers
+export {
+  MutationController,
+  OptimisticController,
+  RequestController,
+  SelectorController,
+  TasksController,
+} from './controllers';
+export type {
+  AsyncStatus,
+  MutationResult,
+  OptimisticResult,
+} from './controllers';
+
+// createStore factory
+export { createStore } from './create-store';
+export type { contextKey, CreateStoreConfig, CreateStoreResult } from './create-store';
+
+// Mixin factories (for advanced use cases)
+export { createStoreAttachMixin, createStoreMixin, createStoreProviderMixin } from './mixins';
diff --git a/packages/store/src/lit/mixins/attach-mixin.ts b/packages/store/src/lit/mixins/attach-mixin.ts
new file mode 100644
index 00000000..4939ad44
--- /dev/null
+++ b/packages/store/src/lit/mixins/attach-mixin.ts
@@ -0,0 +1,89 @@
+import type { Context } from '@lit/context';
+import type { ReactiveElement } from '@lit/reactive-element';
+import type { Constructor, Mixin } from '@videojs/utils/types';
+import type { AnySlice, UnionSliceTarget } from '../../core/slice';
+import type { Store, StoreConsumer } from '../../core/store';
+
+import { ContextConsumer } from '@lit/context';
+import { getSlottedElement, isHTMLMediaElement, listen, querySlot } from '@videojs/utils/dom';
+import { Disposer } from '@videojs/utils/events';
+import { noop } from '@videojs/utils/function';
+import { isNull } from '@videojs/utils/predicate';
+
+/**
+ * Creates a mixin that consumes a store from context and auto-attaches media elements.
+ *
+ * - Requests store from context (must have a provider ancestor)
+ * - Observes slotted elements for `<video slot="media">` or `<audio slot="media">`
+ * - Falls back to light DOM children if no shadow root
+ * - Calls `store.attach(mediaElement)` when found
+ * - Cleans up on disconnect
+ *
+ * @example
+ * ```ts
+ * const { StoreAttachMixin } = createStore({ slices: [playbackSlice] });
+ *
+ * class MyControls extends StoreAttachMixin(LitElement) {}
+ * ```
+ */
+export function createStoreAttachMixin<Slices extends AnySlice[]>(
+  context: Context<unknown, Store<UnionSliceTarget<Slices>, Slices>>,
+): Mixin<ReactiveElement, StoreConsumer<Slices>> {
+  type ConsumedStore = Store<UnionSliceTarget<Slices>, Slices>;
+
+  return <Base extends Constructor<ReactiveElement>>(BaseClass: Base) => {
+    class StoreAttachElement extends BaseClass implements StoreConsumer<Slices> {
+      #disposer = new Disposer();
+      #detach = noop;
+
+      #consumer = new ContextConsumer(this, {
+        context,
+        callback: () => this.#attachMedia(),
+        subscribe: false,
+      });
+
+      get store(): ConsumedStore | null {
+        return this.#consumer.value ?? null;
+      }
+
+      override connectedCallback() {
+        super.connectedCallback();
+
+        const shadow = this.shadowRoot;
+        if (shadow) {
+          const slot = querySlot(shadow, 'media');
+          if (slot) this.#disposer.add(listen(slot, 'slotchange', () => this.#attachMedia()));
+        }
+
+        this.#attachMedia();
+      }
+
+      override disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#disposer.dispose();
+        this.#detach();
+      }
+
+      #attachMedia() {
+        const store = this.store;
+
+        if (isNull(store)) return;
+
+        // Check if element is media, or search inside for nested media
+        const findMedia = (el: Element): HTMLMediaElement | null =>
+          isHTMLMediaElement(el) ? el : el.querySelector('video, audio');
+
+        const media = this.shadowRoot
+          ? getSlottedElement(this.shadowRoot, 'media', findMedia)
+          : this.querySelector('video, audio');
+
+        if (store.target !== media) {
+          this.#detach();
+          this.#detach = store.attach(media as UnionSliceTarget<Slices>);
+        }
+      }
+    }
+
+    return StoreAttachElement;
+  };
+}
diff --git a/packages/store/src/lit/mixins/combined-mixin.ts b/packages/store/src/lit/mixins/combined-mixin.ts
new file mode 100644
index 00000000..f291474c
--- /dev/null
+++ b/packages/store/src/lit/mixins/combined-mixin.ts
@@ -0,0 +1,41 @@
+import type { Context } from '@lit/context';
+import type { ReactiveElement } from '@lit/reactive-element';
+import type { Constructor, Mixin } from '@videojs/utils/types';
+import type { AnySlice, UnionSliceTarget } from '../../core/slice';
+
+import type { Store, StoreProvider } from '../../core/store';
+
+import { createStoreAttachMixin } from './attach-mixin';
+import { createStoreProviderMixin } from './provider-mixin';
+
+/**
+ * Creates a combined mixin that both provides a store and auto-attaches media elements.
+ *
+ * Composes `StoreProviderMixin` and `StoreAttachMixin` - the provider mixin provides the store
+ * via context, and the attach mixin consumes it and auto-attaches media elements.
+ *
+ * @example
+ * ```ts
+ * const { StoreMixin } = createStore({ slices: [playbackSlice] });
+ *
+ * class MyPlayer extends StoreMixin(LitElement) {
+ *   render() {
+ *     return html`<slot></slot>`;
+ *   }
+ * }
+ * ```
+ */
+export function createStoreMixin<Slices extends AnySlice[]>(
+  context: Context<unknown, Store<UnionSliceTarget<Slices>, Slices>>,
+  factory: () => Store<UnionSliceTarget<Slices>, Slices>,
+): Mixin<ReactiveElement, StoreProvider<Slices>> {
+  const ProviderMixin = createStoreProviderMixin<Slices>(context, factory);
+  const AttachMixin = createStoreAttachMixin<Slices>(context);
+
+  return <Base extends Constructor<ReactiveElement>>(BaseClass: Base) => {
+    // ProviderMixin wraps AttachMixin so during connectedCallback:
+    // 1. ProviderMixin runs first (provides store via context)
+    // 2. AttachMixin runs second (consumes store from context)
+    return ProviderMixin(AttachMixin(BaseClass));
+  };
+}
diff --git a/packages/store/src/lit/mixins/index.ts b/packages/store/src/lit/mixins/index.ts
new file mode 100644
index 00000000..3c874593
--- /dev/null
+++ b/packages/store/src/lit/mixins/index.ts
@@ -0,0 +1,3 @@
+export { createStoreAttachMixin } from './attach-mixin';
+export { createStoreMixin } from './combined-mixin';
+export { createStoreProviderMixin } from './provider-mixin';
diff --git a/packages/store/src/lit/mixins/provider-mixin.ts b/packages/store/src/lit/mixins/provider-mixin.ts
new file mode 100644
index 00000000..229c6b4a
--- /dev/null
+++ b/packages/store/src/lit/mixins/provider-mixin.ts
@@ -0,0 +1,82 @@
+import type { Context } from '@lit/context';
+import type { ReactiveElement } from '@lit/reactive-element';
+import type { Constructor } from '@videojs/utils/types';
+
+import type { AnySlice, UnionSliceTarget } from '../../core/slice';
+import type { Store, StoreProvider } from '../../core/store';
+import { ContextProvider } from '@lit/context';
+import { isNull } from '@videojs/utils/predicate';
+
+/**
+ * Creates a mixin that provides a store via context.
+ *
+ * - Creates a store instance on first access
+ * - Provides the store to descendants via Lit Context Protocol
+ * - Allows store replacement via setter (notifies all consumers)
+ * - Destroys the store on disconnect (if not externally provided)
+ *
+ * @example
+ * ```ts
+ * const { StoreProviderMixin } = createStore({
+ *   slices: [playbackSlice]
+ * });
+ *
+ * class MyPlayer extends StoreProviderMixin(LitElement) {
+ *   render() {
+ *     return html`<slot></slot>`;
+ *   }
+ * }
+ * ```
+ */
+export function createStoreProviderMixin<Slices extends AnySlice[]>(
+  context: Context<unknown, Store<UnionSliceTarget<Slices>, Slices>>,
+  factory: () => Store<UnionSliceTarget<Slices>, Slices>,
+): <Base extends Constructor<ReactiveElement>>(BaseClass: Base) => Base & Constructor<StoreProvider<Slices>> {
+  type ProvidedStore = Store<UnionSliceTarget<Slices>, Slices>;
+
+  return <Base extends Constructor<ReactiveElement>>(BaseClass: Base) => {
+    class StoreProviderElement extends BaseClass implements StoreProvider<Slices> {
+      #store: ProvidedStore | null = null;
+      #isOwner = false;
+
+      #provider = new ContextProvider(this, {
+        context,
+        initialValue: this.store,
+      });
+
+      get store(): ProvidedStore {
+        if (isNull(this.#store)) {
+          this.#store = factory();
+          this.#isOwner = true;
+        }
+
+        return this.#store;
+      }
+
+      set store(newStore: ProvidedStore) {
+        const wasOwner = this.#isOwner;
+        const oldStore = this.#store;
+
+        this.#store = newStore;
+        this.#isOwner = false;
+
+        if (wasOwner && oldStore && oldStore !== newStore) {
+          oldStore.destroy();
+        }
+
+        this.#provider.setValue(newStore);
+      }
+
+      override disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.#isOwner && this.#store) {
+          this.#store.destroy();
+          this.#store = null;
+          this.#isOwner = false;
+        }
+      }
+    }
+
+    return StoreProviderElement;
+  };
+}
diff --git a/packages/store/src/lit/mixins/tests/attach-mixin.test.ts b/packages/store/src/lit/mixins/tests/attach-mixin.test.ts
new file mode 100644
index 00000000..75b63e10
--- /dev/null
+++ b/packages/store/src/lit/mixins/tests/attach-mixin.test.ts
@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest';
+
+import { createLitTestStore, setupDomCleanup, TestBaseElement, uniqueTag } from '../../tests/test-utils';
+
+setupDomCleanup();
+
+describe('createStoreAttachMixin', () => {
+  it('exposes store property (initially null without context)', async () => {
+    const { StoreAttachMixin } = createLitTestStore();
+    const tagName = uniqueTag('test-attach-standalone');
+
+    class TestElement extends StoreAttachMixin(TestBaseElement) {}
+    customElements.define(tagName, TestElement);
+
+    const el = document.createElement(tagName) as TestElement;
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    // Without a context provider ancestor, store is null
+    expect(el.store).toBeNull();
+  });
+
+  it('can be applied to TestBaseElement', () => {
+    const { StoreAttachMixin } = createLitTestStore();
+
+    class MixedElement extends StoreAttachMixin(TestBaseElement) {}
+
+    expect(MixedElement.prototype).toBeInstanceOf(TestBaseElement);
+  });
+});
diff --git a/packages/store/src/lit/mixins/tests/combined-mixin.test.ts b/packages/store/src/lit/mixins/tests/combined-mixin.test.ts
new file mode 100644
index 00000000..66871ba0
--- /dev/null
+++ b/packages/store/src/lit/mixins/tests/combined-mixin.test.ts
@@ -0,0 +1,162 @@
+import { describe, expect, it } from 'vitest';
+
+import { createLitTestStore, setupDomCleanup, TestBaseElement, uniqueTag } from '../../tests/test-utils';
+
+setupDomCleanup();
+
+// Helper to create shadow root with named media slot
+function createShadowWithSlot(el: HTMLElement): void {
+  const shadow = el.attachShadow({ mode: 'open' });
+  shadow.innerHTML = '<slot name="media"></slot>';
+}
+
+describe('createStoreMixin', () => {
+  it('provides store and attaches media', async () => {
+    const { StoreMixin } = createLitTestStore();
+    const tagName = uniqueTag('test-combined');
+
+    class TestElement extends StoreMixin(TestBaseElement) {
+      override createRenderRoot() {
+        createShadowWithSlot(this);
+        return this.shadowRoot!;
+      }
+    }
+    customElements.define(tagName, TestElement);
+
+    const el = document.createElement(tagName) as TestElement;
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    expect(el.store).toBeDefined();
+    expect(el.store.state).toEqual({ volume: 1, muted: false });
+  });
+
+  it('auto-attaches slotted video element', async () => {
+    const { StoreMixin } = createLitTestStore();
+    const tagName = uniqueTag('test-auto-attach');
+
+    class TestElement extends StoreMixin(TestBaseElement) {
+      override createRenderRoot() {
+        createShadowWithSlot(this);
+        return this.shadowRoot!;
+      }
+    }
+    customElements.define(tagName, TestElement);
+
+    const el = document.createElement(tagName) as TestElement;
+    const video = document.createElement('video');
+    video.slot = 'media';
+    el.appendChild(video);
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    // Wait for slotchange
+    await new Promise(resolve => requestAnimationFrame(resolve));
+
+    expect(el.store.target).toBe(video);
+  });
+
+  it('auto-attaches light DOM video when no shadow root', async () => {
+    const { StoreMixin } = createLitTestStore();
+    const tagName = uniqueTag('test-light-dom');
+
+    class TestElement extends StoreMixin(TestBaseElement) {
+      override createRenderRoot() {
+        return this; // Use light DOM
+      }
+    }
+    customElements.define(tagName, TestElement);
+
+    const el = document.createElement(tagName) as TestElement;
+    const video = document.createElement('video');
+    el.appendChild(video);
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    // Wait for attachment
+    await new Promise(resolve => requestAnimationFrame(resolve));
+
+    expect(el.store.target).toBe(video);
+  });
+
+  it('finds nested video element', async () => {
+    const { StoreMixin } = createLitTestStore();
+    const tagName = uniqueTag('test-nested');
+
+    class TestElement extends StoreMixin(TestBaseElement) {
+      override createRenderRoot() {
+        createShadowWithSlot(this);
+        return this.shadowRoot!;
+      }
+    }
+    customElements.define(tagName, TestElement);
+
+    const el = document.createElement(tagName) as TestElement;
+    const wrapper = document.createElement('div');
+    wrapper.slot = 'media';
+    const video = document.createElement('video');
+    wrapper.appendChild(video);
+    el.appendChild(wrapper);
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    // Wait for slotchange
+    await new Promise(resolve => requestAnimationFrame(resolve));
+
+    expect(el.store.target).toBe(video);
+  });
+
+  it('auto-attaches audio element', async () => {
+    const { StoreMixin } = createLitTestStore();
+    const tagName = uniqueTag('test-audio');
+
+    class TestElement extends StoreMixin(TestBaseElement) {
+      override createRenderRoot() {
+        createShadowWithSlot(this);
+        return this.shadowRoot!;
+      }
+    }
+    customElements.define(tagName, TestElement);
+
+    const el = document.createElement(tagName) as TestElement;
+    const audio = document.createElement('audio');
+    audio.slot = 'media';
+    el.appendChild(audio);
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    // Wait for slotchange
+    await new Promise(resolve => requestAnimationFrame(resolve));
+
+    expect(el.store.target).toBe(audio);
+  });
+
+  it('attaches only the first media element when multiple exist', async () => {
+    const { StoreMixin } = createLitTestStore();
+    const tagName = uniqueTag('test-multiple-media');
+
+    class TestElement extends StoreMixin(TestBaseElement) {
+      override createRenderRoot() {
+        createShadowWithSlot(this);
+        return this.shadowRoot!;
+      }
+    }
+    customElements.define(tagName, TestElement);
+
+    const el = document.createElement(tagName) as TestElement;
+    const video1 = document.createElement('video');
+    video1.slot = 'media';
+    const video2 = document.createElement('video');
+    video2.slot = 'media';
+    el.appendChild(video1);
+    el.appendChild(video2);
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    // Wait for slotchange
+    await new Promise(resolve => requestAnimationFrame(resolve));
+
+    // Should attach only the first one
+    expect(el.store.target).toBe(video1);
+  });
+});
diff --git a/packages/store/src/lit/mixins/tests/provider-mixin.test.ts b/packages/store/src/lit/mixins/tests/provider-mixin.test.ts
new file mode 100644
index 00000000..d2ec96ac
--- /dev/null
+++ b/packages/store/src/lit/mixins/tests/provider-mixin.test.ts
@@ -0,0 +1,114 @@
+import { describe, expect, it } from 'vitest';
+
+import { createLitTestStore, setupDomCleanup, TestBaseElement, uniqueTag } from '../../tests/test-utils';
+
+setupDomCleanup();
+
+describe('createStoreProviderMixin', () => {
+  it('creates store lazily on first access', async () => {
+    const { StoreProviderMixin } = createLitTestStore();
+    const tagName = uniqueTag('test-provider');
+
+    class TestElement extends StoreProviderMixin(TestBaseElement) {}
+    customElements.define(tagName, TestElement);
+
+    const el = document.createElement(tagName) as TestElement;
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    expect(el.store).toBeDefined();
+    expect(el.store.state).toEqual({ volume: 1, muted: false });
+  });
+
+  it('reuses same store instance', async () => {
+    const { StoreProviderMixin } = createLitTestStore();
+    const tagName = uniqueTag('test-provider-reuse');
+
+    class TestElement extends StoreProviderMixin(TestBaseElement) {}
+    customElements.define(tagName, TestElement);
+
+    const el = document.createElement(tagName) as TestElement;
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    const first = el.store;
+    const second = el.store;
+
+    expect(first).toBe(second);
+  });
+
+  it('destroys owned store on disconnect', async () => {
+    const { StoreProviderMixin } = createLitTestStore();
+    const tagName = uniqueTag('test-provider-destroy');
+
+    class TestElement extends StoreProviderMixin(TestBaseElement) {}
+    customElements.define(tagName, TestElement);
+
+    const el = document.createElement(tagName) as TestElement;
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    const store = el.store;
+    expect(store.destroyed).toBe(false);
+
+    el.remove();
+
+    expect(store.destroyed).toBe(true);
+  });
+
+  it('allows setting custom store via setter', async () => {
+    const { StoreProviderMixin, create } = createLitTestStore();
+    const tagName = uniqueTag('test-provider-setter');
+
+    class TestElement extends StoreProviderMixin(TestBaseElement) {}
+    customElements.define(tagName, TestElement);
+
+    const el = document.createElement(tagName) as TestElement;
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    const customStore = create();
+    el.store = customStore;
+
+    expect(el.store).toBe(customStore);
+  });
+
+  it('does not destroy externally provided store on disconnect', async () => {
+    const { StoreProviderMixin, create } = createLitTestStore();
+    const tagName = uniqueTag('test-provider-external');
+
+    class TestElement extends StoreProviderMixin(TestBaseElement) {}
+    customElements.define(tagName, TestElement);
+
+    const el = document.createElement(tagName) as TestElement;
+    const externalStore = create();
+    el.store = externalStore;
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    el.remove();
+
+    // External store should NOT be destroyed
+    expect(externalStore.destroyed).toBe(false);
+  });
+
+  it('destroys old owned store when setting new store', async () => {
+    const { StoreProviderMixin, create } = createLitTestStore();
+    const tagName = uniqueTag('test-provider-replace');
+
+    class TestElement extends StoreProviderMixin(TestBaseElement) {}
+    customElements.define(tagName, TestElement);
+
+    const el = document.createElement(tagName) as TestElement;
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    const ownedStore = el.store; // Creates owned store
+    const newStore = create();
+    el.store = newStore;
+
+    // Owned store should be destroyed
+    expect(ownedStore.destroyed).toBe(true);
+    expect(newStore.destroyed).toBe(false);
+  });
+});
diff --git a/packages/store/src/lit/mixins/tests/types.test.ts b/packages/store/src/lit/mixins/tests/types.test.ts
new file mode 100644
index 00000000..16020e53
--- /dev/null
+++ b/packages/store/src/lit/mixins/tests/types.test.ts
@@ -0,0 +1,32 @@
+import { describe, expectTypeOf, it } from 'vitest';
+
+import { createLitTestStore, TestBaseElement } from '../../tests/test-utils';
+
+describe('mixin types', () => {
+  it('storeMixin adds store property', () => {
+    const { StoreMixin } = createLitTestStore();
+    const _MixedElement = StoreMixin(TestBaseElement);
+    type Instance = InstanceType<typeof _MixedElement>;
+
+    // Verify store property exists on the mixed type
+    expectTypeOf<Instance>().toHaveProperty('store');
+  });
+
+  it('storeProviderMixin adds store property', () => {
+    const { StoreProviderMixin } = createLitTestStore();
+    const _MixedElement = StoreProviderMixin(TestBaseElement);
+    type Instance = InstanceType<typeof _MixedElement>;
+
+    // Verify store property exists on the mixed type
+    expectTypeOf<Instance>().toHaveProperty('store');
+  });
+
+  it('storeAttachMixin adds store property', () => {
+    const { StoreAttachMixin } = createLitTestStore();
+    const _MixedElement = StoreAttachMixin(TestBaseElement);
+    type Instance = InstanceType<typeof _MixedElement>;
+
+    // Verify store property exists on the mixed type
+    expectTypeOf<Instance>().toHaveProperty('store');
+  });
+});
diff --git a/packages/store/src/lit/tests/create-store.test.ts b/packages/store/src/lit/tests/create-store.test.ts
new file mode 100644
index 00000000..331cc8c2
--- /dev/null
+++ b/packages/store/src/lit/tests/create-store.test.ts
@@ -0,0 +1,115 @@
+import { describe, expect, it } from 'vitest';
+
+import { createSlice } from '../../core/slice';
+import { createStore } from '../create-store';
+import { TestBaseElement } from './test-utils';
+
+describe('createStore', () => {
+  // Mock target
+  class MockMedia extends EventTarget {
+    volume = 1;
+    muted = false;
+  }
+
+  const audioSlice = createSlice<MockMedia>()({
+    initialState: { volume: 1, muted: false },
+    getSnapshot: ({ target }) => ({
+      volume: target.volume,
+      muted: target.muted,
+    }),
+    subscribe: ({ target, update, signal }) => {
+      const handler = () => update();
+      target.addEventListener('volumechange', handler);
+      signal.addEventListener('abort', () => {
+        target.removeEventListener('volumechange', handler);
+      });
+    },
+    request: {
+      setVolume: (volume: number, { target }) => {
+        target.volume = volume;
+        target.dispatchEvent(new Event('volumechange'));
+        return volume;
+      },
+    },
+  });
+
+  describe('create', () => {
+    it('creates a store instance', () => {
+      const { create } = createStore({ slices: [audioSlice] });
+
+      const store = create();
+
+      expect(store).toBeDefined();
+      expect(store.state).toEqual({ volume: 1, muted: false });
+    });
+
+    it('creates independent store instances', () => {
+      const { create } = createStore({ slices: [audioSlice] });
+
+      const store1 = create();
+      const store2 = create();
+
+      expect(store1).not.toBe(store2);
+    });
+  });
+
+  describe('context', () => {
+    it('contexts share the same key for interoperability', () => {
+      const result1 = createStore({ slices: [audioSlice] });
+      const result2 = createStore({ slices: [audioSlice] });
+
+      // Contexts use a shared key so different store configurations can interoperate
+      expect(result1.context).toBe(result2.context);
+    });
+
+    it('context is defined', () => {
+      const { context } = createStore({ slices: [audioSlice] });
+
+      expect(context).toBeDefined();
+    });
+  });
+
+  describe('mixins', () => {
+    it('returns StoreMixin', () => {
+      const { StoreMixin } = createStore({ slices: [audioSlice] });
+
+      expect(typeof StoreMixin).toBe('function');
+    });
+
+    it('returns StoreProviderMixin', () => {
+      const { StoreProviderMixin } = createStore({ slices: [audioSlice] });
+
+      expect(typeof StoreProviderMixin).toBe('function');
+    });
+
+    it('returns StoreAttachMixin', () => {
+      const { StoreAttachMixin } = createStore({ slices: [audioSlice] });
+
+      expect(typeof StoreAttachMixin).toBe('function');
+    });
+
+    it('mixins can be applied to TestBaseElement', () => {
+      const { StoreMixin, StoreProviderMixin, StoreAttachMixin } = createStore({ slices: [audioSlice] });
+
+      const Mixed1 = StoreMixin(TestBaseElement);
+      const Mixed2 = StoreProviderMixin(TestBaseElement);
+      const Mixed3 = StoreAttachMixin(TestBaseElement);
+
+      expect(Mixed1.prototype).toBeInstanceOf(TestBaseElement);
+      expect(Mixed2.prototype).toBeInstanceOf(TestBaseElement);
+      expect(Mixed3.prototype).toBeInstanceOf(TestBaseElement);
+    });
+  });
+
+  describe('result object', () => {
+    it('returns all expected properties', () => {
+      const result = createStore({ slices: [audioSlice] });
+
+      expect(result).toHaveProperty('StoreMixin');
+      expect(result).toHaveProperty('StoreProviderMixin');
+      expect(result).toHaveProperty('StoreAttachMixin');
+      expect(result).toHaveProperty('context');
+      expect(result).toHaveProperty('create');
+    });
+  });
+});
diff --git a/packages/store/src/lit/tests/test-utils.ts b/packages/store/src/lit/tests/test-utils.ts
new file mode 100644
index 00000000..4fdf8a6b
--- /dev/null
+++ b/packages/store/src/lit/tests/test-utils.ts
@@ -0,0 +1,163 @@
+import type { ReactiveControllerHost } from '@lit/reactive-element';
+import type { AnySlice } from '../../core/slice';
+import type { Store } from '../../core/store';
+
+import { ReactiveElement } from '@lit/reactive-element';
+
+import { noop } from '@videojs/utils/function';
+
+import { afterEach } from 'vitest';
+import { createSlice } from '../../core/slice';
+import { createStore as createCoreStore } from '../../core/store';
+import { createStore as createLitStore } from '../create-store';
+
+/** Concrete base class for mixin tests (ReactiveElement is abstract). */
+export class TestBaseElement extends ReactiveElement {}
+
+export class MockMedia extends EventTarget {
+  volume = 1;
+  muted = false;
+}
+
+export const audioSlice = createSlice<MockMedia>()({
+  initialState: { volume: 1, muted: false },
+  getSnapshot: ({ target }) => ({
+    volume: target.volume,
+    muted: target.muted,
+  }),
+  subscribe: ({ target, update, signal }) => {
+    const handler = () => update();
+    target.addEventListener('volumechange', handler);
+    signal.addEventListener('abort', () => {
+      target.removeEventListener('volumechange', handler);
+    });
+  },
+  request: {
+    setVolume: (volume: number, { target }): number => {
+      target.volume = volume;
+      target.dispatchEvent(new Event('volumechange'));
+      return volume;
+    },
+    setMuted: (muted: boolean, { target }): boolean => {
+      target.muted = muted;
+      target.dispatchEvent(new Event('volumechange'));
+      return muted;
+    },
+    slowSetVolume: async (volume: number, { target }): Promise<number> => {
+      await new Promise(resolve => setTimeout(resolve, 50));
+      target.volume = volume;
+      target.dispatchEvent(new Event('volumechange'));
+      return volume;
+    },
+  },
+});
+
+/** Slice with custom keys (name !== key) for testing superseding behavior. */
+export const customKeySlice = createSlice<MockMedia>()({
+  initialState: { volume: 1, muted: false },
+  getSnapshot: ({ target }) => ({
+    volume: target.volume,
+    muted: target.muted,
+  }),
+  subscribe: ({ target, update, signal }) => {
+    const handler = () => update();
+    target.addEventListener('volumechange', handler);
+    signal.addEventListener('abort', () => {
+      target.removeEventListener('volumechange', handler);
+    });
+  },
+  request: {
+    // name='adjustVolume', key='audio-settings'
+    adjustVolume: {
+      key: 'audio-settings',
+      handler: async (volume: number, { target }): Promise<number> => {
+        await new Promise(resolve => setTimeout(resolve, 20));
+        target.volume = volume;
+        target.dispatchEvent(new Event('volumechange'));
+        return volume;
+      },
+    },
+    // name='toggleMute', key='audio-settings' (same key - will supersede adjustVolume)
+    toggleMute: {
+      key: 'audio-settings',
+      handler: async (muted: boolean, { target }): Promise<boolean> => {
+        await new Promise(resolve => setTimeout(resolve, 20));
+        target.muted = muted;
+        target.dispatchEvent(new Event('volumechange'));
+        return muted;
+      },
+    },
+  },
+});
+
+type TestSlice = typeof audioSlice;
+type CustomKeySlice = typeof customKeySlice;
+
+// For controller tests - creates core store with attached target
+export function createCoreTestStore(): { store: Store<MockMedia, [TestSlice]>; target: MockMedia } {
+  const store = createCoreStore({
+    slices: [audioSlice] as [AnySlice],
+    onError: noop,
+  });
+
+  const target = new MockMedia();
+  store.attach(target);
+
+  return { store, target };
+}
+
+/** Creates store with custom key slice (name !== key) for testing superseding. */
+export function createCustomKeyTestStore(): { store: Store<MockMedia, [CustomKeySlice]>; target: MockMedia } {
+  const store = createCoreStore({
+    slices: [customKeySlice] as [AnySlice],
+    onError: noop,
+  });
+
+  const target = new MockMedia();
+  store.attach(target);
+
+  return { store, target };
+}
+
+// For mixin tests - creates lit store factory
+export function createLitTestStore() {
+  return createLitStore({ slices: [audioSlice] });
+}
+
+// Mock ReactiveControllerHost for controller tests
+export interface MockHost extends ReactiveControllerHost {
+  controllers: Set<unknown>;
+  updateCount: number;
+}
+
+export function createMockHost(): MockHost {
+  const controllers = new Set<unknown>();
+  const host: MockHost = {
+    controllers,
+    updateCount: 0,
+    addController(controller: unknown): void {
+      controllers.add(controller);
+    },
+    removeController(controller: unknown): void {
+      controllers.delete(controller);
+    },
+    requestUpdate(): void {
+      host.updateCount++;
+    },
+    updateComplete: Promise.resolve(true),
+  };
+  return host;
+}
+
+// For mixin tests - unique custom element tags
+let tagCounter = 0;
+
+export function uniqueTag(base: string): string {
+  return `${base}-${Date.now()}-${tagCounter++}`;
+}
+
+export function setupDomCleanup(): void {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+}
diff --git a/packages/store/src/react/context.tsx b/packages/store/src/react/context.tsx
index dd3663e4..f45208e0 100644
--- a/packages/store/src/react/context.tsx
+++ b/packages/store/src/react/context.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable react-refresh/only-export-components */
+
 import type { ReactNode } from 'react';
 import type { AnyStore } from '../core/store';
 
diff --git a/packages/store/src/react/hooks.ts b/packages/store/src/react/hooks.ts
index 58c3e290..eee35847 100644
--- a/packages/store/src/react/hooks.ts
+++ b/packages/store/src/react/hooks.ts
@@ -25,6 +25,7 @@ export function useSelector<S extends AnyStore, T>(store: S, selector: (state: I
  */
 export function useRequest<S extends AnyStore>(store: S): InferStoreRequests<S>;
 export function useRequest<S extends AnyStore, T>(store: S, selector: (requests: InferStoreRequests<S>) => T): T;
+// eslint-disable-next-line react/no-unnecessary-use-prefix
 export function useRequest<S extends AnyStore, T>(
   store: S,
   selector?: (requests: InferStoreRequests<S>) => T,
diff --git a/packages/utils/src/dom/index.ts b/packages/utils/src/dom/index.ts
index af9d3bf3..c335d69e 100644
--- a/packages/utils/src/dom/index.ts
+++ b/packages/utils/src/dom/index.ts
@@ -2,5 +2,8 @@ export { animationFrame } from './animation-frame';
 export { onEvent, type OnEventOptions } from './event';
 export { idleCallback } from './idle-callback';
 export { listen } from './listen';
+export { isHTMLAudioElement, isHTMLMediaElement, isHTMLVideoElement } from './predicates';
+export { getSlottedElement, querySlot } from './slotted';
 export { supportsAnimationFrame, supportsIdleCallback } from './supports';
 export { serializeTimeRanges } from './time-ranges';
+export type { CustomElement, CustomElementCallbacks } from './types';
diff --git a/packages/utils/src/dom/predicates.ts b/packages/utils/src/dom/predicates.ts
new file mode 100644
index 00000000..ddb003af
--- /dev/null
+++ b/packages/utils/src/dom/predicates.ts
@@ -0,0 +1,11 @@
+export function isHTMLVideoElement(value: unknown): value is HTMLVideoElement {
+  return value instanceof HTMLVideoElement;
+}
+
+export function isHTMLAudioElement(value: unknown): value is HTMLAudioElement {
+  return value instanceof HTMLAudioElement;
+}
+
+export function isHTMLMediaElement(value: unknown): value is HTMLMediaElement {
+  return value instanceof HTMLMediaElement;
+}
diff --git a/packages/utils/src/dom/slotted.ts b/packages/utils/src/dom/slotted.ts
new file mode 100644
index 00000000..ec7fab4c
--- /dev/null
+++ b/packages/utils/src/dom/slotted.ts
@@ -0,0 +1,42 @@
+import type { Falsy } from '../types';
+
+/**
+ * Finds the first element in a slot's assigned elements that matches a predicate.
+ *
+ * @param shadowRoot - The shadow root containing the slot
+ * @param slotName - The slot name to search (empty string for default slot)
+ * @param predicate - Function that returns the element if it matches, or falsy if not
+ * @returns The first matching element, or null if not found
+ *
+ * @example
+ * ```ts
+ * // Find a video element in the default slot
+ * const video = getSlottedElement(
+ *   this.shadowRoot,
+ *   '',
+ *   el => el instanceof HTMLVideoElement,
+ * );
+ * ```
+ */
+export function getSlottedElement<T extends Element>(
+  shadowRoot: ShadowRoot,
+  slotName: string,
+  predicate: (el: Element) => Falsy<T>,
+): T | null {
+  const slot = querySlot(shadowRoot, slotName);
+  if (!slot) return null;
+
+  for (const el of slot.assignedElements({ flatten: true })) {
+    const result = predicate(el);
+    if (result) return result;
+  }
+
+  return null;
+}
+
+/**
+ * Queries a slot element by name in a shadow root.
+ */
+export function querySlot(shadowRoot: ShadowRoot, name: string): HTMLSlotElement | null {
+  return shadowRoot.querySelector<HTMLSlotElement>(name ? `slot[name="${name}"]` : 'slot:not([name])');
+}
diff --git a/packages/utils/src/dom/tests/predicates.test.ts b/packages/utils/src/dom/tests/predicates.test.ts
new file mode 100644
index 00000000..33f73375
--- /dev/null
+++ b/packages/utils/src/dom/tests/predicates.test.ts
@@ -0,0 +1,77 @@
+import { describe, expect, it } from 'vitest';
+
+import { isHTMLAudioElement, isHTMLMediaElement, isHTMLVideoElement } from '../predicates';
+
+describe('DOM predicates', () => {
+  describe('isHTMLVideoElement', () => {
+    it('returns true for video elements', () => {
+      const video = document.createElement('video');
+      expect(isHTMLVideoElement(video)).toBe(true);
+    });
+
+    it('returns false for audio elements', () => {
+      const audio = document.createElement('audio');
+      expect(isHTMLVideoElement(audio)).toBe(false);
+    });
+
+    it('returns false for other elements', () => {
+      const div = document.createElement('div');
+      expect(isHTMLVideoElement(div)).toBe(false);
+    });
+
+    it('returns false for non-elements', () => {
+      expect(isHTMLVideoElement(null)).toBe(false);
+      expect(isHTMLVideoElement(undefined)).toBe(false);
+      expect(isHTMLVideoElement('video')).toBe(false);
+      expect(isHTMLVideoElement({})).toBe(false);
+    });
+  });
+
+  describe('isHTMLAudioElement', () => {
+    it('returns true for audio elements', () => {
+      const audio = document.createElement('audio');
+      expect(isHTMLAudioElement(audio)).toBe(true);
+    });
+
+    it('returns false for video elements', () => {
+      const video = document.createElement('video');
+      expect(isHTMLAudioElement(video)).toBe(false);
+    });
+
+    it('returns false for other elements', () => {
+      const div = document.createElement('div');
+      expect(isHTMLAudioElement(div)).toBe(false);
+    });
+
+    it('returns false for non-elements', () => {
+      expect(isHTMLAudioElement(null)).toBe(false);
+      expect(isHTMLAudioElement(undefined)).toBe(false);
+      expect(isHTMLAudioElement('audio')).toBe(false);
+      expect(isHTMLAudioElement({})).toBe(false);
+    });
+  });
+
+  describe('isHTMLMediaElement', () => {
+    it('returns true for video elements', () => {
+      const video = document.createElement('video');
+      expect(isHTMLMediaElement(video)).toBe(true);
+    });
+
+    it('returns true for audio elements', () => {
+      const audio = document.createElement('audio');
+      expect(isHTMLMediaElement(audio)).toBe(true);
+    });
+
+    it('returns false for other elements', () => {
+      const div = document.createElement('div');
+      expect(isHTMLMediaElement(div)).toBe(false);
+    });
+
+    it('returns false for non-elements', () => {
+      expect(isHTMLMediaElement(null)).toBe(false);
+      expect(isHTMLMediaElement(undefined)).toBe(false);
+      expect(isHTMLMediaElement('video')).toBe(false);
+      expect(isHTMLMediaElement({})).toBe(false);
+    });
+  });
+});
diff --git a/packages/utils/src/dom/tests/slotted.test.ts b/packages/utils/src/dom/tests/slotted.test.ts
new file mode 100644
index 00000000..e039b834
--- /dev/null
+++ b/packages/utils/src/dom/tests/slotted.test.ts
@@ -0,0 +1,175 @@
+import { afterEach, describe, expect, it } from 'vitest';
+
+import { getSlottedElement } from '../slotted';
+
+describe('getSlottedElement', () => {
+  let tagCounter = 0;
+
+  function uniqueTag(base: string): string {
+    return `${base}-${Date.now()}-${tagCounter++}`;
+  }
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  describe('default slot', () => {
+    function createHost(slotHtml = '<slot></slot>'): HTMLElement {
+      const tagName = uniqueTag('test-host');
+
+      class TestHost extends HTMLElement {
+        constructor() {
+          super();
+          this.attachShadow({ mode: 'open' });
+          this.shadowRoot!.innerHTML = slotHtml;
+        }
+      }
+
+      customElements.define(tagName, TestHost);
+      const host = document.createElement(tagName);
+      document.body.appendChild(host);
+      return host;
+    }
+
+    it('finds slotted element matching predicate', () => {
+      const host = createHost();
+      const video = document.createElement('video');
+      host.appendChild(video);
+
+      const result = getSlottedElement(host.shadowRoot!, '', el => (el instanceof HTMLVideoElement ? el : null));
+
+      expect(result).toBe(video);
+    });
+
+    it('returns first match when multiple elements exist', () => {
+      const host = createHost();
+      const video1 = document.createElement('video');
+      const video2 = document.createElement('video');
+      host.appendChild(video1);
+      host.appendChild(video2);
+
+      const result = getSlottedElement(host.shadowRoot!, '', el => (el instanceof HTMLVideoElement ? el : null));
+
+      expect(result).toBe(video1);
+    });
+
+    it('returns null when no match found', () => {
+      const host = createHost();
+      const span = document.createElement('span');
+      host.appendChild(span);
+
+      const result = getSlottedElement(host.shadowRoot!, '', el => (el instanceof HTMLVideoElement ? el : null));
+
+      expect(result).toBeNull();
+    });
+
+    it('returns null when slot is empty', () => {
+      const host = createHost();
+
+      const result = getSlottedElement(host.shadowRoot!, '', el => (el instanceof HTMLVideoElement ? el : null));
+
+      expect(result).toBeNull();
+    });
+
+    it('supports predicates returning false', () => {
+      const host = createHost();
+      const div = document.createElement('div');
+      host.appendChild(div);
+
+      const result = getSlottedElement(host.shadowRoot!, '', el => (el instanceof HTMLVideoElement ? el : false));
+
+      expect(result).toBeNull();
+    });
+
+    it('works with type guard predicates', () => {
+      const host = createHost();
+      const video = document.createElement('video');
+      host.appendChild(video);
+
+      const isMedia = (el: Element): el is HTMLMediaElement => el instanceof HTMLMediaElement;
+
+      const result = getSlottedElement(host.shadowRoot!, '', el => (isMedia(el) ? el : null));
+
+      expect(result).toBe(video);
+      expect(result?.play).toBeDefined();
+    });
+  });
+
+  describe('named slot', () => {
+    function createHostWithNamedSlot(): HTMLElement {
+      const tagName = uniqueTag('test-named');
+
+      class TestHost extends HTMLElement {
+        constructor() {
+          super();
+          this.attachShadow({ mode: 'open' });
+          this.shadowRoot!.innerHTML = '<slot name="media"></slot><slot></slot>';
+        }
+      }
+
+      customElements.define(tagName, TestHost);
+      const host = document.createElement(tagName);
+      document.body.appendChild(host);
+      return host;
+    }
+
+    it('finds element in named slot', () => {
+      const host = createHostWithNamedSlot();
+      const video = document.createElement('video');
+      video.slot = 'media';
+      host.appendChild(video);
+
+      const result = getSlottedElement(host.shadowRoot!, 'media', el => (el instanceof HTMLVideoElement ? el : null));
+
+      expect(result).toBe(video);
+    });
+
+    it('ignores elements in other slots', () => {
+      const host = createHostWithNamedSlot();
+      const video = document.createElement('video');
+      // No slot attribute - goes to default slot
+      host.appendChild(video);
+
+      const result = getSlottedElement(host.shadowRoot!, 'media', el => (el instanceof HTMLVideoElement ? el : null));
+
+      expect(result).toBeNull();
+    });
+
+    it('returns null when named slot does not exist', () => {
+      const host = createHostWithNamedSlot();
+      const video = document.createElement('video');
+      video.slot = 'nonexistent';
+      host.appendChild(video);
+
+      const result = getSlottedElement(host.shadowRoot!, 'nonexistent', el =>
+        el instanceof HTMLVideoElement ? el : null);
+
+      expect(result).toBeNull();
+    });
+  });
+
+  describe('no slot in shadow root', () => {
+    it('returns null when shadow root has no matching slot', () => {
+      const tagName = uniqueTag('test-no-slot');
+
+      class TestHost extends HTMLElement {
+        constructor() {
+          super();
+          this.attachShadow({ mode: 'open' });
+          this.shadowRoot!.innerHTML = '<div>No slot here</div>';
+        }
+      }
+
+      customElements.define(tagName, TestHost);
+      const host = document.createElement(tagName);
+      document.body.appendChild(host);
+
+      const video = document.createElement('video');
+      host.appendChild(video);
+
+      const result = getSlottedElement(host.shadowRoot!, '', el => (el instanceof HTMLVideoElement ? el : null));
+
+      expect(result).toBeNull();
+    });
+  });
+});
diff --git a/packages/utils/src/dom/types.ts b/packages/utils/src/dom/types.ts
new file mode 100644
index 00000000..cf890273
--- /dev/null
+++ b/packages/utils/src/dom/types.ts
@@ -0,0 +1,17 @@
+/* eslint-disable ts/method-signature-style */
+// Method syntax is required here for TypeScript's class inheritance checking.
+// Using property syntax (e.g., `connectedCallback?: () => void`) causes TS2425
+// when a class extends a generic mixin that defines lifecycle callbacks.
+export interface CustomElementCallbacks {
+  connectedCallback?(): void;
+  disconnectedCallback?(): void;
+  adoptedCallback?(): void;
+  attributeChangedCallback?(name: string, oldValue: string | null, newValue: string | null): void;
+}
+/* eslint-enable ts/method-signature-style */
+
+export interface CustomElement extends HTMLElement, CustomElementCallbacks {}
+
+export interface CustomElementConstructor {
+  new (): CustomElement;
+}
diff --git a/packages/utils/src/function/index.ts b/packages/utils/src/function/index.ts
index 439ddf03..eb44c56b 100644
--- a/packages/utils/src/function/index.ts
+++ b/packages/utils/src/function/index.ts
@@ -1,2 +1,3 @@
 export { composeCallbacks } from './compose-callbacks';
+export { noop } from './noop';
 export { tryCatch } from './try-catch';
diff --git a/packages/utils/src/function/noop.ts b/packages/utils/src/function/noop.ts
new file mode 100644
index 00000000..89966dd3
--- /dev/null
+++ b/packages/utils/src/function/noop.ts
@@ -0,0 +1 @@
+export function noop(): void {}
diff --git a/packages/utils/src/types/types.ts b/packages/utils/src/types/types.ts
index b3dc1e9e..4f49830a 100644
--- a/packages/utils/src/types/types.ts
+++ b/packages/utils/src/types/types.ts
@@ -1 +1,15 @@
 export type UnionToIntersection<U> = (U extends any ? (x: U) => void : never) extends (x: infer I) => void ? I : never;
+
+export type Constructor<T, Arguments extends unknown[] = any[]> = new (...args: Arguments) => T;
+
+export type AbstractConstructor<T, Arguments extends unknown[] = any[]> = abstract new (...args: Arguments) => T;
+
+export type AnyConstructor<T, Arguments extends unknown[] = any[]>
+  = | Constructor<T, Arguments>
+    | AbstractConstructor<T, Arguments>;
+
+export type Mixin<Base, Result> = <T extends Constructor<Base>>(Base: T) => T & Constructor<Result>;
+
+export type Falsy<T> = T | false | null | undefined;
+
+export type EnsureFunction<T> = T extends (...args: any[]) => any ? T : never;