From d74e4e6701e5de2a03cf76e4ceff96d230790e3f Mon Sep 17 00:00:00 2001
From: rahim <rahim.alwer@gmail.com>
Date: Fri, 2 Jan 2026 14:41:58 +1100
Subject: [PATCH] feat(store): initial release (#279)

---
 .claude/agents/dx-reviewer.md                 | 117 +++
 .claude/settings.json                         |   3 +-
 .vscode/settings.json                         |   3 +-
 CLAUDE.md                                     |  43 +-
 commitlint.config.js                          |   1 +
 package.json                                  |   1 +
 packages/store/README.md                      | 671 +++++++++++++++++-
 packages/store/package.json                   |  22 +-
 packages/store/src/dom/index.ts               |   1 +
 packages/store/src/dom/schedulers.ts          |  75 ++
 packages/store/src/errors.ts                  |  17 +
 packages/store/src/guard.ts                   |  87 +++
 packages/store/src/index.ts                   |   7 +
 packages/store/src/lit/index.ts               |   1 +
 packages/store/src/lit/tsconfig.json          |   8 +
 packages/store/src/queue.ts                   | 428 +++++++++++
 packages/store/src/request.ts                 | 230 ++++++
 packages/store/src/slice.ts                   | 142 ++++
 packages/store/src/state.ts                   |  89 +++
 packages/store/src/store.ts                   | 381 ++++++++++
 packages/store/test/dom/schedulers.test.ts    | 176 +++++
 packages/store/test/errors.test.ts            |  28 +
 packages/store/test/guard.test.ts             | 154 ++++
 packages/store/test/integration/store.test.ts | 321 +++++++++
 packages/store/test/queue.test.ts             | 507 +++++++++++++
 packages/store/test/request.test.ts           | 151 ++++
 packages/store/test/slice.test.ts             |  74 ++
 packages/store/test/state.test.ts             | 144 ++++
 packages/store/test/store.test.ts             | 370 ++++++++++
 packages/store/tsconfig.json                  |   4 +-
 packages/store/tsdown.config.ts               |   1 +
 packages/store/vitest.config.ts               |  24 +
 packages/utils/package.json                   |   6 +-
 packages/utils/src/disposer.test.ts           | 212 ++++++
 packages/utils/src/disposer.ts                |  62 ++
 .../utils/src/dom/animation-frame.test.ts     |  83 +++
 packages/utils/src/dom/animation-frame.ts     |  20 +
 packages/utils/src/dom/event.test.ts          | 129 ++++
 packages/utils/src/dom/event.ts               | 124 ++++
 packages/utils/src/dom/idle-callback.test.ts  |  97 +++
 packages/utils/src/dom/idle-callback.ts       |  44 ++
 packages/utils/src/dom/index.ts               |   5 +
 packages/utils/src/dom/listen.test.ts         | 121 ++++
 packages/utils/src/dom/listen.ts              | 113 +++
 packages/utils/src/dom/supports.test.ts       |  25 +
 packages/utils/src/dom/supports.ts            |  17 +
 packages/utils/src/event-like.test.ts         |  77 ++
 packages/utils/src/event-like.ts              |  22 +
 packages/utils/src/index.ts                   |   3 +
 packages/utils/src/predicate.test.ts          | 203 ++++++
 packages/utils/src/predicate.ts               |  48 ++
 packages/utils/vitest.config.ts               |  24 +
 pnpm-lock.yaml                                | 395 +++++++++--
 turbo.json                                    |   2 +-
 54 files changed, 6047 insertions(+), 66 deletions(-)
 create mode 100644 .claude/agents/dx-reviewer.md
 create mode 100644 packages/store/src/dom/schedulers.ts
 create mode 100644 packages/store/src/errors.ts
 create mode 100644 packages/store/src/guard.ts
 create mode 100644 packages/store/src/lit/index.ts
 create mode 100644 packages/store/src/lit/tsconfig.json
 create mode 100644 packages/store/src/queue.ts
 create mode 100644 packages/store/src/request.ts
 create mode 100644 packages/store/src/slice.ts
 create mode 100644 packages/store/src/state.ts
 create mode 100644 packages/store/src/store.ts
 create mode 100644 packages/store/test/dom/schedulers.test.ts
 create mode 100644 packages/store/test/errors.test.ts
 create mode 100644 packages/store/test/guard.test.ts
 create mode 100644 packages/store/test/integration/store.test.ts
 create mode 100644 packages/store/test/queue.test.ts
 create mode 100644 packages/store/test/request.test.ts
 create mode 100644 packages/store/test/slice.test.ts
 create mode 100644 packages/store/test/state.test.ts
 create mode 100644 packages/store/test/store.test.ts
 create mode 100644 packages/store/vitest.config.ts
 create mode 100644 packages/utils/src/disposer.test.ts
 create mode 100644 packages/utils/src/disposer.ts
 create mode 100644 packages/utils/src/dom/animation-frame.test.ts
 create mode 100644 packages/utils/src/dom/animation-frame.ts
 create mode 100644 packages/utils/src/dom/event.test.ts
 create mode 100644 packages/utils/src/dom/event.ts
 create mode 100644 packages/utils/src/dom/idle-callback.test.ts
 create mode 100644 packages/utils/src/dom/idle-callback.ts
 create mode 100644 packages/utils/src/dom/listen.test.ts
 create mode 100644 packages/utils/src/dom/listen.ts
 create mode 100644 packages/utils/src/dom/supports.test.ts
 create mode 100644 packages/utils/src/dom/supports.ts
 create mode 100644 packages/utils/src/event-like.test.ts
 create mode 100644 packages/utils/src/event-like.ts
 create mode 100644 packages/utils/src/predicate.test.ts
 create mode 100644 packages/utils/src/predicate.ts
 create mode 100644 packages/utils/vitest.config.ts

diff --git a/.claude/agents/dx-reviewer.md b/.claude/agents/dx-reviewer.md
new file mode 100644
index 00000000..7b424ec7
--- /dev/null
+++ b/.claude/agents/dx-reviewer.md
@@ -0,0 +1,117 @@
+---
+name: dx-reviewer
+description: Reviews APIs for developer experience, consistency, and framework-agnostic design. Use when designing or finalizing public interfaces.
+tools: Glob, Grep, Read, WebFetch, TodoWrite, WebSearch, ListMcpResourcesTool, ReadMcpResourceTool
+model: opus
+color: purple
+---
+
+You review public APIs for developer experience, consistency, and framework-agnostic architecture.
+
+## Reference Points
+
+Study these before reviewing:
+
+- `packages/store/README.md` — our quality bar for API design
+- JavaScript/Web platform standards — naming conventions, patterns, APIs
+- TanStack ecosystem — framework-agnostic core + thin adapters
+- Zustand/nanostores — minimal reactive state
+- Base UI / Radix — headless component patterns, compound components
+- Zod — chainable configuration, inference-heavy APIs
+
+## JavaScript Ecosystem Alignment
+
+**Follow platform conventions first**: Before inventing, check how the web platform and established libraries solve it.
+
+- Event naming: `volumechange` not `onVolumeChange` in core
+- Method naming: `addEventListener`, `removeEventListener` patterns
+- Options objects: Web APIs use them (`fetch(url, options)`)
+- Promises: Standard async patterns, not callbacks
+- Iterators/generators: Where appropriate for sequences
+- AbortSignal: Standard cancellation pattern
+
+**Borrow from familiar libraries**: Users shouldn't need to learn new patterns.
+
+## Video.js 10 Architecture
+
+### Package Layout
+
+```text
+utils           ← shared utilities
+utils/dom       ← DOM-specific helpers
+
+core            ← runtime-agnostic logic
+core/dom        ← DOM bindings
+
+store           ← state management
+store/dom       ← DOM platform APIs
+store/react     ← React bindings
+
+html            ← Web player (DOM/Browser)
+react           ← React player
+react-native    ← React Native player
+```
+
+### Dependency Flow
+
+```text
+utils ← store ← core ← html / react / react-native
+```
+
+Core packages have no framework dependencies. Platform packages (`html`, `react`, `react-native`) are thin adapters.
+
+### Principles
+
+**Common core**: State logic in core, DOM in separate subpath. Core maps to Web, React, React Native.
+
+**Composition-first**: Compound component patterns. Render props for full control.
+
+```tsx
+<PlayButton
+  render={(attrs, state) => {
+    { /* ... */ }
+  }}
+/>
+```
+
+**Style-agnostic**: No CSS in core. Stable `data-*` attributes and CSS vars for theming.
+
+**Accessibility non-negotiable**: Core owns ARIA roles, labels, keyboard nav, focus management. WCAG 2.2 / CVAA compliance.
+
+**SSR/hydration safe**: No DOM assumptions in core. Hydration-optimized.
+
+**Tree-shakeable**: Modular exports. Users pay only for what they use.
+
+## TanStack Patterns
+
+**Core/Adapter split**: Pure logic in core, thin framework bindings.
+
+**Adapters are thin**: No logic duplication across frameworks.
+
+**Core is testable**: Business logic tested without framework overhead.
+
+**Consistent API across frameworks**: Same mental model, framework-native feel.
+
+## Review Checklist
+
+1. **Platform alignment**: Does it follow JS/Web conventions? Familiar to ecosystem?
+2. **Naming**: Match platform standards? Consistent internally?
+3. **Signatures**: Options objects where appropriate? Matches similar Web APIs?
+4. **Generics**: Minimal? Good inference?
+5. **Package boundaries**: Logic in core? `/dom` subpaths for DOM code? Adapters thin?
+6. **Composition**: Compound patterns? Render props where needed?
+7. **Styling hooks**: Data attributes? CSS vars? No baked-in styles?
+8. **Accessibility**: ARIA roles? Keyboard support? Focus management?
+9. **SSR safety**: DOM assumptions isolated to `/dom` subpaths?
+10. **Tree-shaking**: Modular exports? Dead code eliminable?
+
+## Output Format
+
+For each issue:
+
+- **What**: the problem
+- **Where**: file and line
+- **Why**: impact on users
+- **Fix**: concrete suggestion with code
+
+Prioritize by impact. Skip style nitpicks.
diff --git a/.claude/settings.json b/.claude/settings.json
index 6c8064d1..15a2cb1b 100644
--- a/.claude/settings.json
+++ b/.claude/settings.json
@@ -1,3 +1,4 @@
 {
-  "enabledMcpjsonServers": ["astro-docs"]
+  "enabledMcpjsonServers": ["astro-docs"],
+  "enableAllProjectMcpServers": true
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
index e38602d4..0f3b1612 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -50,5 +50,6 @@
     "postcss",
     "svg"
   ],
-  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+  "typescript.tsdk": "node_modules/typescript/lib"
 }
diff --git a/CLAUDE.md b/CLAUDE.md
index 69be436e..90007f94 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -9,21 +9,38 @@ Refer to **[`CONTRIBUTING.md`](./CONTRIBUTING.md)** for setup, development, and
 
 ## Package Layout
 
-| Package Path            | Purpose                                              |
-| ----------------------- | ---------------------------------------------------- |
-| `packages/core`         | Core runtime‑agnostic logic and state.               |
-| `packages/html`         | DOM/Browser‑specific implementations.                |
-| `packages/react`        | React package—adapts core state to React components. |
-| `packages/react-native` | React Native integration layer.                      |
-| `packages/utils`        | Shared utilities.                                    |
-| `examples/*`            | Demo apps for various runtimes.                      |
-| `site/`                 | Astro‑based docs and website.                        |
+| Package Path            | Purpose                                                            |
+| ----------------------- | ------------------------------------------------------------------ |
+| `packages/utils`        | Shared utilities (`/dom` subpath for DOM‑specific helpers).        |
+| `packages/core`         | Core runtime‑agnostic logic (`/dom` subpath for DOM bindings).     |
+| `packages/store`        | State management (`/dom` and `/react` subpaths for platform APIs). |
+| `packages/html`         | Web player—DOM/Browser‑specific implementation.                    |
+| `packages/react`        | React player—adapts core state to React components.                |
+| `packages/react-native` | React Native player integration layer.                             |
+| `examples/*`            | Demo apps for various runtimes.                                    |
+| `site/`                 | Astro‑based docs and website.                                      |
 
 ### Dependency Hierarchy
 
-- Core → (no internal deps)
-- HTML / React / React‑Native → depend only on Core
-- Prevents circular dependencies and maximizes reusability.
+```text
+utils           ← shared utilities
+utils/dom       ← DOM-specific helpers
+
+store           ← state management
+store/dom       ← DOM platform APIs
+store/react     ← React bindings
+
+core            ← runtime-agnostic logic
+core/dom        ← DOM bindings
+
+html            ← Web player (DOM/Browser)
+react           ← React player
+react-native    ← React Native player
+```
+
+```text
+utils ← store ← core ← html / react / react-native
+```
 
 ## Workspace
 
@@ -72,7 +89,7 @@ Examples:
 
 Breaking changes use `!`:
 
-```
+```text
 feat(core)!: remove deprecated playback API
 ```
 
diff --git a/commitlint.config.js b/commitlint.config.js
index bdf9fdce..567afbdf 100644
--- a/commitlint.config.js
+++ b/commitlint.config.js
@@ -28,6 +28,7 @@ export default {
       'root',
       'site',
       'skins',
+      'store',
       'test',
       'utils',
     ]],
diff --git a/package.json b/package.json
index 782851ac..78bb49df 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "react-compiler-runtime": "^1.0.0",
     "react-dom": "^18.0.0",
     "simple-git-hooks": "^2.13.1",
+    "tsx": "^4.21.0",
     "turbo": "^2.5.8",
     "typescript": "^5.9.3"
   },
diff --git a/packages/store/README.md b/packages/store/README.md
index a3713d72..3fd0b4be 100644
--- a/packages/store/README.md
+++ b/packages/store/README.md
@@ -4,9 +4,676 @@
 
 > **⚠️ Alpha - SUBJECT TO CHANGE** Not recommended for production use.
 
-## Overview
+A reactive store for managing state owned by external systems. Built for media players, streaming libraries, and real-time systems where you don't own the state.
 
-Coming soon.
+```bash
+npm install @videojs/store
+```
+
+## Why?
+
+[Traditional state management](#how-its-different) assumes you own the state. But when working with a `<video>` element, Web Sockets, streaming libraries, and real-time systems, the external system is the authority. You observe it, send requests to it, and react to its changes.
+
+`@videojs/store` embraces this model:
+
+- **Read Path**: Observe external state, sync to reactive store
+- **Write Path**: Send requests, coordinate execution, handle failures
+
+```ts
+import { createSlice, createStore } from '@videojs/store';
+
+const store = createStore({
+  slices: [playbackSlice, audioSlice],
+});
+
+store.attach(videoElement); // <video>
+
+// State is synced
+store.state.paused; // true
+store.state.volume; // 1
+
+// Requests are coordinated async operations
+await store.request.play();
+await store.request.setVolume(0.5);
+```
+
+## Core Concepts
+
+### Target
+
+The target contains a reference to an external systems. Slices read from and write to it.
+
+```ts
+const videoElement = document.querySelector('video');
+store.attach(videoElement);
+```
+
+### Slices
+
+A slice defines state, how to sync it from the target, and requests to modify the target.
+
+```ts
+// createSlice<Target>()() - curried form enables full type inference
+const audioSlice = createSlice<HTMLMediaElement>()({
+  initialState: { volume: 1, muted: false },
+
+  getSnapshot: ({ target }) => ({
+    volume: target.volume,
+    muted: target.muted,
+  }),
+
+  subscribe: ({ target, update, signal }) => {
+    target.addEventListener('volumechange', () => update(), { signal });
+  },
+
+  request: {
+    setVolume(volume: number, { target, meta, signal }) {
+      target.volume = volume;
+    },
+
+    setMuted(muted: boolean, { target, meta, signal }) {
+      target.muted = muted;
+    },
+  },
+});
+```
+
+### Explicit Types
+
+For shared type definitions, use `Request<Input, Output>`:
+
+```ts
+import type { Request } from '@videojs/store';
+
+import { createSlice } from '@videojs/store';
+
+interface AudioState {
+  volume: number;
+  muted: boolean;
+}
+
+interface AudioRequests {
+  setVolume: Request<number>; // (volume: number) => void
+  setMuted: Request<boolean>; // (muted: boolean) => void
+  play: Request; // () => void
+  getDuration: Request; // () => number
+}
+
+const audioSlice = createSlice<HTMLMediaElement, AudioState, AudioRequests>({
+  // Types enforced from interfaces
+});
+```
+
+### Requests
+
+Requests are operations against the target. Use function shorthand for simple cases, or full config for guards and scheduling.
+
+```ts
+request: {
+  // Shorthand - just the handler
+  setVolume(volume, { target }) {
+    target.volume = volume;
+  },
+
+  // Async shorthand
+  async seek(time, { target, signal }) {
+    target.currentTime = time;
+    await onEvent(target, 'seeked', { signal });
+  },
+
+  // Full config when needed
+  play: {
+    key: 'playback',
+    guard: [],
+    cancel: [],
+    // ...
+    async handler(_, { target, signal }) {
+      target.play();
+      await onEvent(target, 'play', { signal });
+    },
+  },
+}
+```
+
+Consumer API is consistent, all requests return a Promise:
+
+```ts
+await store.request.setVolume(0.5);
+await store.request.play();
+await store.request.seek(30);
+```
+
+### Request Metadata
+
+Every request accepts optional metadata as the last argument.
+
+```ts
+store.request.play(null, { source: 'user', reason: 'play-button' });
+store.request.seek(30, { source: 'user', reason: 'slider-scrub' });
+store.request.pause(null, { source: 'system', reason: 'ad-start' });
+
+// Infer metadata from DOM event
+store.request.play(null, createRequestMetaFromEvent(clickEvent)); // MouseEvent
+```
+
+Handlers receive metadata:
+
+```ts
+async handler(_, { target, signal, meta }) {
+  console.log(`[${meta.source}] play: ${meta.reason}`);
+  // ...
+}
+```
+
+## Store
+
+The store composes slices and manages the target connection.
+
+```ts
+const store = createStore({
+  slices: [playbackSlice, audioSlice],
+
+  onSetup: ({ store, signal }) => {
+    // Called when store is created
+  },
+
+  onAttach: ({ store, target, signal }) => {
+    // Called when target is attached
+  },
+
+  onError: ({ error, store }) => {
+    // Global error handler
+  },
+});
+```
+
+### Attaching a Target
+
+```ts
+const detach = store.attach(videoElement);
+
+// State syncs from target
+store.state.paused;
+store.state.volume;
+
+// Requests go to target
+store.request.play();
+
+// Detach when done
+detach();
+```
+
+### Subscribing to State
+
+```ts
+// Subscribe to all state changes
+const unsubscribe = store.subscribe((state) => {
+  console.log('State changed:', state);
+});
+
+// Subscribe with selector
+store.subscribe(
+  (state) => state.volume,
+  (volume) => console.log('Volume:', volume)
+);
+```
+
+### Keyed Subscriptions
+
+Subscribe to specific keys for high-frequency updates:
+
+```ts
+// Only fires when currentTime changes
+store.subscribe(['currentTime'], (state) => {
+  updatedTime(state.currentTime);
+});
+
+// Multiple keys
+store.subscribe(['volume', 'muted'], (state) => {
+  updatedVolume(state.volume, state.muted);
+});
+```
+
+Slices can push partial updates to avoid full syncs:
+
+```ts
+subscribe: ({ target, update, signal }) => {
+  // Partial - only update currentTime
+  target.addEventListener(
+    'timeupdate',
+    () => {
+      update({ currentTime: target.currentTime });
+    },
+    { signal }
+  );
+
+  // Full sync
+  target.addEventListener('durationchange', update, { signal });
+};
+```
+
+## Request Configuration
+
+### Keys
+
+Requests with the same key coordinate together. Default key is the request name.
+
+```ts
+request: {
+  play: {
+    key: 'playback',
+    handler: async (_, { target }) => { ... },
+  },
+  pause: {
+    key: 'playback',  // same key - coordinates with play
+    handler: async (_, { target }) => { ... },
+  },
+}
+```
+
+When a new request arrives with the same key:
+
+- Queued request with that key is dropped
+- Executing request with that key is aborted
+- New request takes over
+
+```ts
+store.request.play(); // queued
+store.request.pause(); // play dropped, pause queued
+store.request.play(); // pause dropped, play queued
+// only final play() executes
+```
+
+Dynamic keys for parallel execution:
+
+```ts
+request: {
+  // Each call gets unique key - no coordination
+  logEvent: {
+    key: () => Symbol(),
+    handler: (data) => analytics.log(data),
+  },
+
+  // Key based on input
+  loadTrack: {
+    key: (trackId) => `track-${trackId}`,
+    handler: (trackId, { target }) => target.loadTrack(trackId),
+  },
+}
+```
+
+### Cancels
+
+Requests can cancel other in-flight requests by key. Cancellation happens immediately when the
+request is enqueued, before guards or scheduling.
+
+```ts
+request: {
+  stop: {
+    cancel: ['seek', 'preload'],
+    handler: (_, { target }) => target.pause(),
+  },
+}
+```
+
+### Schedule
+
+Schedule controls _when_ a request executes. The schedule function receives a `flush` callback and
+optionally returns a cancel function. Default schedule is microtask (executes at end of current tick).
+
+```ts
+import { delay } from '@videojs/store';
+import { raf, idle } from '@videojs/store/dom';
+
+request: {
+  // Debounce 100ms - good for sliders
+  setVolume: {
+    schedule: delay(100),
+    handler: (volume, { target }) => { target.media.volume = volume; },
+  },
+
+  // Sync with animation frame
+  updateOverlay: {
+    schedule: raf(),
+    handler: () => { ... },
+  },
+
+  // Execute when browser is idle
+  preloadNext: {
+    schedule: idle(),
+    handler: () => { ... },
+  },
+
+  // Custom schedule
+  custom: {
+    schedule: (flush) => {
+      const id = setTimeout(flush, 200);
+      return () => clearTimeout(id);  // cancel function
+    },
+    handler: () => { ... },
+  },
+}
+```
+
+### Guards
+
+Guards gate request execution. A guard returns truthy to proceed, falsy to cancel.
+
+```ts
+import { timeout } from '@videojs/store';
+
+request: {
+  seek: {
+    guard: [hasMetadata, /* ... */],
+    handler: (time, { target }) => {
+      target.media.currentTime = time;
+    },
+  },
+
+  play: {
+    guard: timeout(isTargetReady, 5000),
+    handler: (_, { target }) => target.media.play(),
+  },
+}
+```
+
+**Custom guard:**
+
+```ts
+import type { Guard } from '@videojs/store';
+
+const canMediaPlay: Guard<HTMLMediaElement> = ({ target, signal }) => {
+  if (target.readyState >= HAVE_ENOUGH_DATA) return true;
+  return onEvent(target, 'canplay', { signal }); // wait for canplay
+};
+```
+
+**Combinators:**
+
+```ts
+// All must be truthy
+const canSeek = all(hasMedia, canMediaPlay, notMediaSeeking);
+
+// First truthy wins
+const ready = any(canMediaPlay, canMediaPlayThrough);
+
+// Reject if guard doesn't resolve in time
+const timedPlay = timeout(canMediaPlay, 5000);
+```
+
+## Error Handling
+
+Catch errors locally via the promise, or globally via `onError`:
+
+```ts
+// 1. Global Error Handling
+const store = createStore({
+  slices: [playbackSlice],
+  onError: ({ error, request }) => {
+    if (request) {
+      console.error(`${request.name} failed`);
+    }
+
+    console.error(error);
+  },
+});
+
+// 2. Local Error Handling
+try {
+  await store.request.play();
+} catch (error) {
+  // ...
+}
+```
+
+## Queue
+
+A default queue is created automatically. Provide a custom queue for lifecycle hooks or custom
+scheduling:
+
+```ts
+import { createQueue } from '@videojs/store';
+
+const store = createStore({
+  slices: [
+    /* ... */
+  ],
+  queue: createQueue({
+    // Default scheduler for requests without schedule
+    scheduler: (flush) => queueMicrotask(flush),
+
+    // Lifecycle hooks
+    onDispatch: (request) => {
+      console.log('Started:', request.name);
+    },
+
+    onSettled: (request, { status, duration }) => {
+      analytics.track(request.name, {
+        status,
+        duration,
+      });
+    },
+  }),
+});
+```
+
+### Queue API
+
+```ts
+const queue = store.queue; // accessed on the store
+
+queue.queued; // requests waiting to execute
+queue.pending; // requests currently executing
+
+queue.dequeue('seek'); // remove from queue without executing
+queue.clear(); // clear all queued
+
+queue.flush(); // execute all queued now
+queue.flush('playback'); // execute specific key now
+
+queue.abort('playback'); // abort executing request
+queue.abortAll(); // abort all executing
+```
+
+### Direct Queue Usage
+
+You can use the queue directly without a store:
+
+```ts
+await queue.enqueue({
+  name: 'myTask',
+  key: 'task-key',
+  input: { some: 'data' },
+  schedule: delay(100),
+  handler: async ({ signal }) => {
+    // do work, check signal.aborted
+    return result;
+  },
+});
+```
+
+## React
+
+```ts
+import { useStore, useSlice, useRequest, usePending } from '@videojs/store/react';
+
+// Full state - re-renders on any change
+function Player() {
+  const state = useStore(store);
+  return <div>{state.paused ? 'Paused' : 'Playing'}</div>;
+}
+
+// Selector - re-renders only when volume changes
+function VolumeDisplay() {
+  const volume = useStore(store, (s) => s.volume);
+  return <div>{Math.round(volume * 100)}%</div>;
+}
+
+// Multiple values
+function AudioControls() {
+  const { volume, muted } = useStore(store, (s) => ({
+    volume: s.volume,
+    muted: s.muted
+  }));
+
+  return <div>{volume} {muted ? '🔇' : '🔊'}</div>;
+}
+
+// Track request state
+function PlayButton() {
+  const { dispatch, isPending, error } = useRequest(store.request.play);
+
+  return (
+    <button onClick={dispatch} disabled={isPending}>
+      {isPending ? 'Starting...' : 'Play'}
+    </button>
+  );
+}
+
+// Check pending by key
+function SeekBar() {
+  const isSeeking = usePending(store, 'seek');
+  return <input type="range" disabled={isSeeking} />;
+}
+
+// Check if slice exists
+function QualityMenu() {
+  const quality = useSlice(store, qualitySlice);
+
+  if (!quality) return null;
+
+  return <Menu items={quality.state.levels} />;
+}
+```
+
+## Advanced
+
+### Custom State
+
+The store uses a simple state container by default. Provide a custom factory for
+framework-native reactivity:
+
+```ts
+import { createStore } from '@videojs/store';
+
+// Default
+const store = createStore({
+  slices: [
+    /* ... */
+  ],
+});
+
+// Custom
+const store = createStore({
+  slices: [
+    /* ... */
+  ],
+  state: (initial) => new VueStateAdapter(initial),
+});
+```
+
+Custom state must match the `State` class interface, where `K` is `keyof T`:
+
+```ts
+class State<T> {
+  get value(): T;
+  set(key: K, value: T[K]): void;
+  patch(partial: Partial<T>): void;
+  subscribe(listener: (state: T) => void): () => void;
+  subscribeKeys(keys: K[], listener: (state: Pick<T, K>) => void): () => void;
+}
+```
+
+### Capability Checking
+
+Slices can expose capability via state. UI components check before rendering.
+
+```ts
+const qualitySlice = createSlice<Media>({
+  initialState: {
+   supported: false ,
+   levels: [],
+   currentLevel: -1
+ },
+
+  getSnapshot: ({ target, initialState }) => {
+    if (target.canSetVideoQuality) {
+      return {
+        supported: true,
+        levels: target.levels,
+        currentLevel: target.currentLevel,
+      };
+    }
+
+    return initialState; // supported: false
+  },
+
+  // ...
+});
+
+// UI checks capability
+function QualityMenu() {
+  const { supported, levels } = useStore(store, (s) => ({
+    supported: s.supported,
+    levels: s.levels
+  }));
+
+  if (!supported) return null;
+
+  return <Menu items={levels} />;
+}
+```
+
+### Optional Slices
+
+Check if a slice exists at runtime:
+
+```tsx
+function QualityMenu() {
+  const quality = useSlice(store, qualitySlice);
+
+  if (!quality) return null;
+
+  return <Menu items={quality.state.levels} />;
+}
+```
+
+## Exports
+
+```md
+@videojs/store # Core: createStore, createSlice, createQueue, Request
+@videojs/store/dom # raf(), idle() schedulers
+@videojs/store/react # useStore, useSlice, useRequest, usePending
+```
+
+## How It's Different
+
+|                   | Redux/Zustand    | React Query           | @videojs/store             |
+| ----------------- | ---------------- | --------------------- | -------------------------- |
+| **Authority**     | You own state    | Server owns state     | External system owns state |
+| **Mutations**     | Sync reducers    | Async server requests | Async requests to target   |
+| **State source**  | Internal store   | HTTP cache            | `getSnapshot` from target  |
+| **Subscriptions** | To store changes | To query cache        | To target events           |
+| **Use case**      | App state        | Server data           | Media, WebSocket, hardware |
+
+**Redux/Zustand**: Great for state you control. But when a `<video>` element is the source of truth, you end up fighting the pattern—syncing external state into the store, handling race conditions between your state and the element's actual state.
+
+**React Query**: Perfect for server state with request/response. But media elements aren't request/response—they're live, event-driven systems with their own lifecycle.
+
+**@videojs/store**: Built for external authority. The target is the source of truth. You observe it, request changes, and react to its events.
+
+```ts
+// Redux approach - fighting the abstraction
+dispatch(play());
+
+// Hope the video actually plays...
+// Manually sync video.paused back to store...
+// Handle race conditions...
+
+// @videojs/store - working with the abstraction
+await store.request.play(); // Resolves when actually playing
+store.state.paused; // Always reflects video.paused
+```
 
 ## Community
 
diff --git a/packages/store/package.json b/packages/store/package.json
index b621c431..92b94fb9 100644
--- a/packages/store/package.json
+++ b/packages/store/package.json
@@ -20,6 +20,10 @@
       "types": "./dist/dom.d.ts",
       "default": "./dist/dom.js"
     },
+    "./lit": {
+      "types": "./dist/lit.d.ts",
+      "default": "./dist/lit.js"
+    },
     "./react": {
       "types": "./dist/react.d.ts",
       "default": "./dist/react.js"
@@ -35,12 +39,26 @@
     "build": "tsdown",
     "build:watch": "tsdown --watch --silent",
     "dev": "pnpm run build:watch",
-    "test": "echo \"No tests yet\"",
+    "test": "vitest --run",
+    "test:watch": "vitest",
     "clean": "rm -rf dist"
   },
+  "peerDependencies": {
+    "@lit/reactive-element": "^2.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@lit/reactive-element": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@videojs/utils": "workspace:*"
+  },
   "devDependencies": {
+    "@lit/reactive-element": "^2.1.0",
     "tsdown": "^0.15.9",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vitest": "^3.2.4"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/store/src/dom/index.ts b/packages/store/src/dom/index.ts
index e69de29b..32617e9c 100644
--- a/packages/store/src/dom/index.ts
+++ b/packages/store/src/dom/index.ts
@@ -0,0 +1 @@
+export { idle, raf } from './schedulers';
diff --git a/packages/store/src/dom/schedulers.ts b/packages/store/src/dom/schedulers.ts
new file mode 100644
index 00000000..9dba5a7e
--- /dev/null
+++ b/packages/store/src/dom/schedulers.ts
@@ -0,0 +1,75 @@
+import type { TaskScheduler } from '../queue';
+
+import { animationFrame, idleCallback } from '@videojs/utils/dom';
+
+/**
+ * Create a scheduler that delays task execution until the next animation frame.
+ *
+ * Uses `requestAnimationFrame` under the hood. Ideal for UI updates that should
+ * sync with the browser's repaint cycle.
+ *
+ * @returns A TaskScheduler for use with the queue
+ *
+ * @example
+ * ```ts
+ * import { createQueue } from '@videojs/store';
+ * import { raf } from '@videojs/store/dom';
+ *
+ * const queue = createQueue();
+ *
+ * queue.enqueue({
+ *   name: 'update-ui',
+ *   key: 'ui',
+ *   schedule: raf(),
+ *   handler: async () => {
+ *     // This runs on the next animation frame
+ *   },
+ * });
+ * ```
+ */
+export function raf(): TaskScheduler {
+  return flush => animationFrame(flush);
+}
+
+/**
+ * Create a scheduler that delays task execution until the browser is idle.
+ *
+ * Uses `requestIdleCallback` under the hood (with `setTimeout` fallback for Safari).
+ * Ideal for non-critical background work.
+ *
+ * @param options - Optional idle callback options (e.g., timeout)
+ * @returns A TaskScheduler for use with the queue
+ *
+ * @example
+ * ```ts
+ * import { createQueue } from '@videojs/store';
+ * import { idle } from '@videojs/store/dom';
+ *
+ * const queue = createQueue();
+ *
+ * queue.enqueue({
+ *   name: 'analytics',
+ *   key: 'analytics',
+ *   schedule: idle(),
+ *   handler: async () => {
+ *     // This runs when the browser is idle
+ *   },
+ * });
+ * ```
+ *
+ * @example
+ * ```ts
+ * // With timeout to ensure execution within 2 seconds
+ * queue.enqueue({
+ *   name: 'critical-background',
+ *   key: 'bg',
+ *   schedule: idle({ timeout: 2000 }),
+ *   handler: async () => {
+ *     // Runs when idle, or after 2 seconds
+ *   },
+ * });
+ * ```
+ */
+export function idle(options?: IdleRequestOptions): TaskScheduler {
+  return flush => idleCallback(flush, options);
+}
diff --git a/packages/store/src/errors.ts b/packages/store/src/errors.ts
new file mode 100644
index 00000000..5af6f2f0
--- /dev/null
+++ b/packages/store/src/errors.ts
@@ -0,0 +1,17 @@
+interface ErrorOptions {
+  cause?: unknown;
+}
+
+export class StoreError extends Error {
+  cause?: unknown;
+
+  constructor(message: string, options?: ErrorOptions) {
+    super(message);
+    this.name = 'StoreError';
+    this.cause = options?.cause;
+  }
+}
+
+export function isStoreError(error: unknown): error is StoreError {
+  return error instanceof StoreError;
+}
diff --git a/packages/store/src/guard.ts b/packages/store/src/guard.ts
new file mode 100644
index 00000000..5dddbcbd
--- /dev/null
+++ b/packages/store/src/guard.ts
@@ -0,0 +1,87 @@
+import { isBoolean } from '@videojs/utils';
+import { StoreError } from './errors';
+
+/**
+ * A guard gates request execution.
+ *
+ * - Truthy → proceed
+ * - Falsy → cancel
+ * - Promise resolves truthy → proceed
+ * - Promise resolves falsy → cancel
+ * - Promise rejects → cancel
+ */
+export type Guard<Target> = (ctx: {
+  target: Target;
+  signal: AbortSignal;
+}) => boolean | Promise<unknown>;
+
+/**
+ * Combine guards: All must pass (truthy).
+ */
+export function all<Target>(
+  ...guards: Guard<Target>[]
+): Guard<Target> {
+  return async (ctx) => {
+    for (const guard of guards) {
+      const result = await guard(ctx);
+      if (!result) return false;
+    }
+
+    return true;
+  };
+}
+
+/**
+ * Combine guards: Any must pass (first truthy wins).
+ */
+export function any<Target>(
+  ...guards: Guard<Target>[]
+): Guard<Target> {
+  return (ctx) => {
+    const results = guards.map(g => g(ctx));
+
+    // Check sync results first
+    if (results.includes(true)) return true;
+
+    // Filter to promises only
+    const promises = results.filter((r): r is Promise<unknown> => !isBoolean(r));
+
+    if (promises.length === 0) return false;
+
+    // Race: first truthy wins, all falsy = false
+    return new Promise((resolve, reject) => {
+      let pending = promises.length;
+      for (const p of promises) {
+        p.then((value) => {
+          if (value) resolve(value);
+          else if (--pending === 0) resolve(false);
+        }, reject);
+      }
+    });
+  };
+}
+
+/**
+ * Add timeout to a guard.
+ */
+export function timeout<Target>(
+  guard: Guard<Target>,
+  ms: number,
+  name = 'guard',
+): Guard<Target> {
+  return async (ctx) => {
+    const result = guard(ctx);
+
+    if (isBoolean(result)) {
+      return result;
+    }
+
+    return Promise.race([
+      result,
+      new Promise<never>((_, reject) => {
+        const timer = setTimeout(() => reject(new StoreError(`Timeout: ${name}`)), ms);
+        ctx.signal.addEventListener('abort', () => clearTimeout(timer));
+      }),
+    ]);
+  };
+}
diff --git a/packages/store/src/index.ts b/packages/store/src/index.ts
index e69de29b..3327aee3 100644
--- a/packages/store/src/index.ts
+++ b/packages/store/src/index.ts
@@ -0,0 +1,7 @@
+export * from './errors';
+export * from './guard';
+export * from './queue';
+export * from './request';
+export * from './slice';
+export * from './state';
+export * from './store';
diff --git a/packages/store/src/lit/index.ts b/packages/store/src/lit/index.ts
new file mode 100644
index 00000000..ca49b8c3
--- /dev/null
+++ b/packages/store/src/lit/index.ts
@@ -0,0 +1 @@
+export type { ReactiveController, ReactiveControllerHost } from '@lit/reactive-element';
diff --git a/packages/store/src/lit/tsconfig.json b/packages/store/src/lit/tsconfig.json
new file mode 100644
index 00000000..fdae4c67
--- /dev/null
+++ b/packages/store/src/lit/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"]
+  },
+  "include": ["./**/*.ts"]
+}
diff --git a/packages/store/src/queue.ts b/packages/store/src/queue.ts
new file mode 100644
index 00000000..3176b6d0
--- /dev/null
+++ b/packages/store/src/queue.ts
@@ -0,0 +1,428 @@
+import type { Request, RequestMeta } from './request';
+import { isFunction, isUndefined } from '@videojs/utils';
+import { StoreError } from './errors';
+
+// ----------------------------------------
+// Types
+// ----------------------------------------
+
+export type TaskKey<T = string | symbol> = T & (string | symbol);
+
+/**
+ * A task scheduler controls when a task flushes.
+ *
+ * Returns an optional cancel function.
+ */
+export type TaskScheduler = (flush: () => void) => (() => void) | void;
+
+/**
+ * Map of task key -> input/output types.
+ */
+export type TaskRecord = {
+  [K in TaskKey]: Request<any, any>
+};
+
+/**
+ * Default loose task types.
+ */
+export type DefaultTaskRecord = Record<TaskKey, Request<unknown, unknown>>;
+
+/**
+ * Ensure T is a TaskRecord.
+ */
+export type EnsureTaskRecord<T> = T extends TaskRecord ? T : never;
+
+/**
+ * Pending task info.
+ */
+export interface PendingTask<
+  Key extends TaskKey = TaskKey,
+  Input = unknown,
+> {
+  id: symbol;
+  name: string;
+  key: Key;
+  input: Input;
+  startedAt: number;
+  abort: AbortController;
+  meta: RequestMeta | null;
+}
+
+/**
+ * Context passed to task handler.
+ */
+export interface TaskContext<
+  Input = unknown,
+> {
+  input: Input;
+  signal: AbortSignal;
+}
+
+/**
+ * Queued task waiting to execute.
+ */
+interface QueuedTask<
+  Key extends TaskKey = TaskKey,
+  Input = unknown,
+  Output = unknown,
+> {
+  id: symbol;
+  name: string;
+  key: Key;
+  input: Input;
+  meta: RequestMeta | null;
+  schedule: TaskScheduler | undefined;
+  handler: (ctx: TaskContext<Input>) => Promise<Output>;
+  resolve: (value: Output) => void;
+  reject: (error: unknown) => void;
+  /* Cancel scheduled execution. */
+  invalidate?: () => void;
+}
+
+/**
+ * Queue configuration.
+ */
+export interface QueueConfig<Tasks extends TaskRecord = DefaultTaskRecord> {
+  /** Default scheduler when task has no schedule */
+  scheduler?: TaskScheduler;
+  onDispatch?: <K extends keyof Tasks>(
+    task: PendingTask<TaskKey<K>, Tasks[K]['input']>,
+  ) => void;
+  onSettled?: <K extends keyof Tasks>(
+    task: PendingTask<TaskKey<K>, Tasks[K]['input']>,
+    result: { status: 'success'; duration: number; result: Tasks[K]['output'] }
+      | { status: 'cancelled'; error: unknown; duration: number }
+      | { status: 'error'; error: unknown; duration: number },
+  ) => void;
+}
+
+/**
+ * Task to enqueue.
+ */
+export interface QueueTask<
+  Key extends TaskKey = TaskKey,
+  Input = unknown,
+  Output = unknown,
+> {
+  name: string;
+  key: Key;
+  input?: Input;
+  meta?: RequestMeta | null;
+  schedule?: TaskScheduler | undefined;
+  handler: (ctx: TaskContext<Input>) => Promise<Output>;
+}
+
+/**
+ * Queued task info (public).
+ */
+export interface QueuedTaskInfo<Key extends TaskKey = TaskKey> {
+  name: string;
+  key: Key;
+}
+
+// ----------------------------------------
+// Schedulers
+// ----------------------------------------
+
+/**
+ * Default scheduler, delay to next microtask.
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide}
+ */
+export const microtask: TaskScheduler = (flush) => {
+  let cancelled = false;
+
+  queueMicrotask(() => {
+    if (!cancelled) flush();
+  });
+
+  return () => {
+    cancelled = true;
+  };
+};
+
+/**
+ * Delay execution by ms. Resets on each new task.
+ *
+ * @param ms - Milliseconds to delay
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout}
+ */
+export function delay(ms: number): TaskScheduler {
+  return (flush) => {
+    const id = setTimeout(flush, ms);
+    return () => clearTimeout(id);
+  };
+}
+
+// ----------------------------------------
+// Implementation
+// ----------------------------------------
+
+export class Queue<Tasks extends TaskRecord = DefaultTaskRecord> {
+  readonly #scheduler: TaskScheduler;
+  readonly #onDispatch: QueueConfig<Tasks>['onDispatch'];
+  readonly #onSettled: QueueConfig<Tasks>['onSettled'];
+
+  readonly #queued = new Map<TaskKey, QueuedTask>();
+  readonly #pending = new Map<TaskKey, PendingTask>();
+
+  #destroyed = false;
+
+  constructor(config: QueueConfig<Tasks> = {}) {
+    this.#scheduler = config.scheduler ?? microtask;
+
+    // Wrap callbacks to catch errors and prevent breaking queue/scheduler
+    const safeCallback = <Args extends [PendingTask, ...unknown[]]>(callback: ((...args: Args) => unknown) | undefined) => {
+      if (!callback) return undefined;
+      return (...args: Args) => {
+        try {
+          callback(...args);
+        } catch (e) {
+          console.error('[vjs-queue]', e);
+        }
+      };
+    };
+
+    this.#onDispatch = safeCallback(config.onDispatch);
+    this.#onSettled = safeCallback(config.onSettled);
+  }
+
+  get queued(): ReadonlyMap<TaskKey<keyof Tasks>, QueuedTaskInfo<TaskKey<keyof Tasks>>> {
+    const result = new Map<TaskKey, QueuedTaskInfo>();
+
+    for (const [k, v] of this.#queued) {
+      result.set(k, { name: v.name, key: v.key });
+    }
+
+    return result;
+  }
+
+  get pending(): ReadonlyMap<TaskKey<keyof Tasks>, PendingTask<TaskKey<keyof Tasks>>> {
+    return new Map(this.#pending);
+  }
+
+  get destroyed(): boolean {
+    return this.#destroyed;
+  }
+
+  enqueue<K extends TaskKey<keyof Tasks>>(
+    task: QueueTask<K, Tasks[K]['input'], Tasks[K]['output']>,
+  ): Promise<Tasks[K]['output']> {
+    const { name, key, input, schedule, meta = null, handler } = task;
+
+    if (this.#destroyed) {
+      return Promise.reject(new StoreError('Queue destroyed'));
+    }
+
+    // Cancel any queued task with same key
+    const queued = this.#queued.get(key);
+    queued?.invalidate?.();
+    queued?.reject(new StoreError('Superseded'));
+    this.#queued.delete(key);
+
+    // Abort any pending task with same key
+    this.#pending.get(key)?.abort.abort(new StoreError('Superseded'));
+
+    return new Promise<Tasks[K]['output']>((resolve, reject) => {
+      const task: QueuedTask = {
+        id: Symbol('@videojs/task'),
+        name,
+        key,
+        input,
+        meta,
+        schedule,
+        handler,
+        resolve,
+        reject,
+      };
+
+      this.#queued.set(key, task);
+
+      let flushed = false;
+
+      try {
+        const scheduleFlush = schedule ?? this.#scheduler;
+
+        // Guard against multiple flushes
+        const safeFlush = () => {
+          if (flushed) return;
+          flushed = true;
+          this.#flushKey(key);
+        };
+
+        const cancel = scheduleFlush(safeFlush);
+
+        // Only set invalidate if we haven't already flushed
+        if (!flushed && isFunction(cancel)) {
+          task.invalidate = cancel;
+        }
+      } catch (err) {
+        if (!flushed) {
+          this.#queued.delete(key);
+        }
+        reject(err);
+      }
+    });
+  }
+
+  dequeue<K extends TaskKey<keyof Tasks>>(key: K): boolean {
+    const queued = this.#queued.get(key);
+    if (!queued) return false;
+
+    queued.invalidate?.();
+    queued.reject(new StoreError('Dequeued'));
+    this.#queued.delete(key);
+
+    return true;
+  }
+
+  clear(): void {
+    for (const queued of this.#queued.values()) {
+      queued.invalidate?.();
+      queued.reject(new StoreError('Cleared'));
+    }
+
+    this.#queued.clear();
+  }
+
+  flush(): Promise<void>;
+  flush<K extends TaskKey<keyof Tasks>>(key: K): Promise<void>;
+  async flush(key?: TaskKey): Promise<void> {
+    if (!isUndefined(key)) {
+      await this.#flushKey(key);
+      return;
+    }
+
+    // Flush all
+    const keys = [...this.#queued.keys()];
+    await Promise.allSettled(keys.map(k => this.#flushKey(k)));
+  }
+
+  abort<K extends TaskKey<keyof Tasks>>(key: K, reason = 'Aborted'): void {
+    // Reject queued
+    const queued = this.#queued.get(key);
+    queued?.invalidate?.();
+    queued?.reject(new StoreError(reason));
+    this.#queued.delete(key);
+
+    // Abort pending with reason
+    this.#pending.get(key)?.abort.abort(new StoreError(reason));
+  }
+
+  abortAll(reason = 'All requests aborted'): void {
+    const error = new StoreError(reason);
+
+    // Reject all queued
+    for (const queued of this.#queued.values()) {
+      queued.invalidate?.();
+      queued.reject(error);
+    }
+
+    this.#queued.clear();
+
+    // Abort all pending with reason
+    for (const pending of this.#pending.values()) {
+      pending.abort.abort(error);
+    }
+  }
+
+  destroy(): void {
+    if (this.#destroyed) return;
+
+    this.#destroyed = true;
+    this.abortAll('Queue destroyed');
+  }
+
+  async #flushKey(key: TaskKey): Promise<void> {
+    if (this.#destroyed) return;
+
+    const task = this.#queued.get(key);
+    if (!task) return;
+
+    this.#queued.delete(key);
+
+    await this.#executeNow(task);
+  }
+
+  async #executeNow(task: QueuedTask): Promise<void> {
+    const { id, name, key, input, meta, handler, resolve, reject } = task;
+
+    const abort = new AbortController();
+    const startedAt = Date.now();
+
+    const pending: PendingTask = {
+      id,
+      name,
+      key,
+      input,
+      startedAt,
+      abort,
+      meta,
+    };
+
+    this.#pending.set(key, pending);
+    this.#onDispatch?.(pending);
+
+    try {
+      if (abort.signal.aborted) {
+        throw abort.signal.reason || new StoreError('Aborted');
+      }
+
+      const result = await handler({ input, signal: abort.signal });
+
+      if (abort.signal.aborted) {
+        throw abort.signal.reason || new StoreError('Aborted');
+      }
+
+      resolve(result);
+
+      this.#onSettled?.(pending, {
+        status: 'success',
+        duration: Date.now() - startedAt,
+        result,
+      });
+    } catch (error) {
+      reject(error);
+
+      const cancelled = abort.signal.aborted;
+
+      this.#onSettled?.(pending, {
+        status: cancelled ? 'cancelled' : 'error',
+        duration: Date.now() - startedAt,
+        error,
+      });
+    } finally {
+      // Only remove if we're still the pending task for this key
+      if (this.#pending.get(key) === pending) {
+        this.#pending.delete(key);
+      }
+    }
+  }
+}
+
+// ----------------------------------------
+// Factory
+// ----------------------------------------
+
+/**
+ * Create a queue for managing task execution.
+ *
+ * - Same key = supersede previous (cancel queued, abort pending)
+ * - Tasks scheduled via schedule function (default: microtask)
+ *
+ * @example
+ * // Loose typing (default)
+ * const queue = createQueue();
+ *
+ * @example
+ * // Strongly typed keys
+ * const queue = createQueue<{
+ *   'playback': Request;
+ *   'volume': Request<number>;
+ * }>();
+ */
+export function createQueue<Tasks extends TaskRecord = DefaultTaskRecord>(
+  config: QueueConfig<Tasks> = {},
+): Queue<Tasks> {
+  return new Queue<Tasks>(config);
+}
diff --git a/packages/store/src/request.ts b/packages/store/src/request.ts
new file mode 100644
index 00000000..394377a6
--- /dev/null
+++ b/packages/store/src/request.ts
@@ -0,0 +1,230 @@
+import type { EventLike } from '@videojs/utils';
+import type { Guard } from './guard';
+import type { TaskKey, TaskScheduler } from './queue';
+import { isFunction, isObject } from '@videojs/utils';
+
+// ----------------------------------------
+// Symbols
+// ----------------------------------------
+
+export const REQUEST_META: unique symbol = Symbol.for('@videojs/request');
+
+// ----------------------------------------
+// Types
+// ----------------------------------------
+
+export interface Request<Input = void, Output = void> {
+  input: Input;
+  output: Output;
+}
+
+export type RequestRecord = {
+  [K in string]: Request<any, any>;
+};
+
+/**
+ * Default loose request types.
+ */
+export type DefaultRequestRecord = Record<string, Request>;
+
+/**
+ * Context passed to request handlers.
+ */
+export interface RequestContext<Target> {
+  target: Target;
+  signal: AbortSignal;
+  meta: RequestMeta | null;
+}
+
+/**
+ * Request key - static or derived from input.
+ */
+export type RequestKey<Input = unknown> = TaskKey | ((input: Input) => TaskKey);
+
+/**
+ * Request cancel config.
+ */
+export type RequestCancel<Input = unknown>
+  = | TaskKey
+    | TaskKey[]
+    | ((input: Input) => TaskKey | TaskKey[]);
+
+/**
+ * Request handler function.
+ */
+export type RequestHandler<Target, Input = unknown, Output = unknown>
+  = (input: Input, ctx: RequestContext<Target>) => Output | Promise<Output>;
+
+/**
+ * Full request config.
+ */
+export interface RequestConfig<Target, Input = unknown, Output = unknown> {
+  key?: RequestKey<Input>;
+  schedule?: TaskScheduler;
+  guard?: Guard<Target> | Guard<Target>[];
+  cancel?: RequestCancel<Input>;
+  handler: RequestHandler<Target, Input, Output>;
+}
+
+/**
+ * Resolved request config (after normalization).
+ */
+export interface ResolvedRequestConfig<Target, Input = unknown, Output = unknown> {
+  key: RequestKey<Input>;
+  schedule?: TaskScheduler | undefined;
+  guard: Guard<Target>[];
+  cancel?: RequestCancel<Input> | undefined;
+  handler: RequestHandler<Target, Input, Output>;
+}
+
+export type RequestHandlerRecord = {
+  [K in string]: RequestHandler<any, any, any>;
+};
+
+/**
+ * Map of request names to handlers or configs. This is the config passed to `createSlice`.
+ */
+export type RequestConfigMap<Target, Requests extends RequestRecord> = {
+  [K in keyof Requests]: Requests[K] extends Request<infer I, infer O>
+    ? RequestHandler<Target, I, O> | RequestConfig<Target, I, O>
+    : never;
+};
+
+/**
+ * Map of request config objects to resolved configs. This is the config stored internally in
+ * the store.
+ */
+export type ResolvedRequestConfigMap<Target, Requests extends RequestRecord> = {
+  [K in keyof Requests]: Requests[K] extends Request<infer I, infer O>
+    ? ResolvedRequestConfig<Target, I, O>
+    : never;
+};
+
+// ----------------------------------------
+// Type Inference
+// ----------------------------------------
+
+/**
+ * Infer the input type of a RequestHandler.
+ */
+export type InferRequestHandlerInput<Handler> = Handler extends (() => any)
+  ? void
+  : Handler extends (input: infer I, ctx?: any) => any
+    ? I
+    : Handler extends { handler: () => any }
+      ? void
+      : Handler extends { handler: (input: infer I, ctx?: any) => any }
+        ? I
+        : void;
+
+/**
+ * Infer the output type of a RequestHandler.
+ */
+export type InferRequestHandlerOutput<Handler> = Handler extends ((...args: any[]) => infer O)
+  ? Awaited<O>
+  : Handler extends { handler: (...args: any[]) => infer O }
+    ? Awaited<O>
+    : void;
+
+/**
+ * Resolve a RequestHandlerRecord to a RequestRecord.
+ */
+export type ResolveRequestMap<Requests> = {
+  [K in keyof Requests]: Request<InferRequestHandlerInput<Requests[K]>, InferRequestHandlerOutput<Requests[K]>>;
+};
+
+/**
+ * Resolve a Request (input/output) to its function signature.
+ */
+export type ResolveRequestHandler<R> = R extends Request<infer I, infer O>
+  ? [I] extends [void]
+      ? (input?: null, meta?: RequestMetaInit) => Promise<O>
+      : (input: I, meta?: RequestMetaInit) => Promise<O>
+  : never;
+
+// ----------------------------------------
+// Utilities
+// ----------------------------------------
+
+export function resolveRequests<Target, Requests extends RequestRecord>(
+  requests: RequestConfigMap<Target, Requests>,
+): ResolvedRequestConfigMap<Target, Requests> {
+  const resolved: Record<string, ResolvedRequestConfig<Target>> = {};
+
+  for (const [name, config] of Object.entries(requests)) {
+    if (isFunction(config)) {
+      resolved[name] = {
+        key: name,
+        guard: [],
+        handler: config,
+      };
+    } else {
+      resolved[name] = {
+        ...config,
+        guard: config.guard ? (Array.isArray(config.guard) ? config.guard : [config.guard]) : [],
+      };
+    }
+  }
+
+  return resolved as ResolvedRequestConfigMap<Target, Requests>;
+}
+
+export function resolveRequestKey(keyConfig: RequestKey<any>, input: unknown): TaskKey {
+  return isFunction(keyConfig) ? keyConfig(input) : keyConfig;
+}
+
+export function resolveRequestCancelKeys(
+  cancel: RequestCancel<any> | undefined,
+  input: unknown,
+): TaskKey[] {
+  if (!cancel) return [];
+  const result = isFunction(cancel) ? cancel(input) : cancel;
+  return Array.isArray(result) ? result : [result];
+}
+
+// ----------------------------------------
+// Request Meta
+// ----------------------------------------
+
+export type RequestMetaInit<Context = unknown> = Omit<RequestMeta<Context>, typeof REQUEST_META>;
+
+export interface RequestMeta<Context = unknown> {
+  [REQUEST_META]: true;
+  source?: string;
+  timestamp?: number;
+  reason?: string;
+  context?: Context | undefined;
+}
+
+export function createRequestMeta<Context = unknown>(
+  init: RequestMetaInit<Context>,
+): RequestMeta<Context> {
+  return {
+    [REQUEST_META]: true,
+    ...init,
+    timestamp: init.timestamp ?? Date.now(),
+  };
+}
+
+/**
+ * Check if a value is a RequestMeta object.
+ */
+export function isRequestMeta(value: unknown): value is RequestMeta {
+  return isObject(value) && REQUEST_META in value;
+}
+
+/**
+ * Convert an event-like object to RequestMeta.
+ */
+export function createRequestMetaFromEvent<Context = unknown>(
+  event: EventLike,
+  context?: Context,
+): RequestMeta<Context> {
+  return {
+    [REQUEST_META]: true,
+    source: event.isTrusted ? 'user' : 'system',
+    timestamp: event.timeStamp,
+    reason: event.type,
+    context,
+  };
+}
diff --git a/packages/store/src/slice.ts b/packages/store/src/slice.ts
new file mode 100644
index 00000000..f3632658
--- /dev/null
+++ b/packages/store/src/slice.ts
@@ -0,0 +1,142 @@
+import type { Request, RequestConfig, RequestConfigMap, RequestHandler, RequestRecord, ResolvedRequestConfigMap, ResolveRequestHandler, ResolveRequestMap } from './request';
+import { resolveRequests } from './request';
+
+// ----------------------------------------
+// Types
+// ----------------------------------------
+
+export interface Slice<Target, State extends object, Requests extends RequestRecord> {
+  readonly id: symbol;
+  readonly initialState: State;
+  readonly getSnapshot: SliceGetSnapshot<Target, State>;
+  readonly subscribe: SliceSubscribe<Target, State>;
+  readonly request: ResolvedRequestConfigMap<Target, Requests>;
+}
+
+export type SliceGetSnapshot<Target, State> = (ctx: SliceGetSnapshotContext<Target, State>) => State;
+
+export interface SliceGetSnapshotContext<Target, State> {
+  target: Target;
+  initialState: State;
+}
+
+export type SliceSubscribe<Target, State extends object> = (ctx: SliceSubscribeContext<Target, State>) => void;
+
+export interface SliceSubscribeContext<Target, State extends object> {
+  target: Target;
+  update: SliceUpdate<State>;
+  signal: AbortSignal;
+}
+
+export interface SliceUpdate<State extends object> {
+  (): void;
+  (state: Partial<State>): void;
+}
+
+export interface SliceConfig<Target, State extends object, Requests extends RequestRecord> {
+  initialState: State;
+  getSnapshot: SliceGetSnapshot<Target, State>;
+  subscribe: SliceSubscribe<Target, State>;
+  request: RequestConfigMap<Target, Requests>;
+}
+
+// ----------------------------------------
+// Type Inference
+// ----------------------------------------
+
+export type InferSliceTarget<S> = S extends Slice<infer T, any, any> ? T : never;
+
+export type InferSliceState<S> = S extends Slice<any, infer State, any> ? State : never;
+
+export type InferSliceRequests<S> = S extends Slice<any, any, infer R>
+  ? { [K in keyof R]: R[K] }
+  : never;
+
+export type ResolveSliceRequestHandlers<S> = S extends Slice<any, any, infer R>
+  ? { [K in keyof R]: ResolveRequestHandler<R[K]> }
+  : never;
+
+// ----------------------------------------
+// createSlice
+// ----------------------------------------
+
+export interface SliceFactory<Target> {
+  <
+    State extends object,
+    const Requests extends Record<string, RequestHandler<Target, any, any> | RequestConfig<Target, any, any>>,
+  >(config: {
+    initialState: State;
+    getSnapshot: (ctx: SliceGetSnapshotContext<Target, State>) => State;
+    subscribe: (ctx: SliceSubscribeContext<Target, State>) => void;
+    request: Requests;
+  }): Slice<Target, State, ResolveRequestMap<Requests>>;
+}
+
+export type SliceFactoryResult<Target, Config> = Config extends {
+  initialState: infer S extends object;
+  request: infer R;
+}
+  ? Slice<Target, S, ResolveRequestMap<R>>
+  : never;
+
+/**
+ * Create a slice for a target type.
+ *
+ * @example
+ * // Curried form - infers state and requests from config
+ * const audioSlice = createSlice<HTMLVideoElement>()({
+ *   ...
+ * });
+ *
+ * @example
+ * // Explicit types
+ * interface AudioState {
+ *   volume: number;
+ *   muted: boolean
+ * }
+ *
+ * interface AudioRequests {
+ *   setVolume: Request<number>;
+ *   setMuted: Request<boolean>;
+ * }
+ * const audioSlice = createSlice<HTMLVideoElement, AudioState, AudioRequests>({...});
+ */
+export function createSlice<Target>(): SliceFactory<Target>;
+
+export function createSlice<
+  Target,
+  State extends object,
+  Requests extends { [K in keyof Requests]: Request<any, any> },
+>(config: SliceConfig<Target, State, Requests>): Slice<Target, State, Requests>;
+
+export function createSlice<
+  Target,
+  State extends object = any,
+  Requests extends { [K in keyof Requests]: Request<any, any> } = any,
+>(
+  config?: SliceConfig<Target, State, Requests>,
+): Slice<Target, State, Requests> | SliceFactory<Target> {
+  if (arguments.length === 0) {
+    return (<
+      S extends object,
+      const R extends Record<string, RequestHandler<Target, any, any> | RequestConfig<Target, any, any>>,
+    >(config: {
+      initialState: S;
+      getSnapshot: (ctx: SliceGetSnapshotContext<Target, S>) => S;
+      subscribe: (ctx: SliceSubscribeContext<Target, S>) => void;
+      request: R;
+    }) => _createSlice(config)) as SliceFactory<Target>;
+  }
+
+  return _createSlice(config!);
+}
+
+function _createSlice<Target, State extends object, Requests extends RequestRecord>(
+  config: SliceConfig<Target, State, Requests>,
+): Slice<Target, State, Requests> {
+  return {
+    id: Symbol('@videojs/slice'),
+    ...config,
+    request: resolveRequests(config.request),
+  };
+}
diff --git a/packages/store/src/state.ts b/packages/store/src/state.ts
new file mode 100644
index 00000000..ae2347d0
--- /dev/null
+++ b/packages/store/src/state.ts
@@ -0,0 +1,89 @@
+/**
+ * Default state container.
+ *
+ * Extend or implement the same shape for custom state handling.
+ */
+export class State<T> {
+  #state: T;
+
+  readonly #listeners = new Set<(state: T) => void>();
+  readonly #keyListeners = new Map<keyof T, Set<(state: T) => void>>();
+
+  constructor(initial: T) {
+    this.#state = { ...initial };
+  }
+
+  get value(): T {
+    return this.#state;
+  }
+
+  set<K extends keyof T>(key: K, value: T[K]): void {
+    if (this.#state[key] === value) return;
+    this.#state = { ...this.#state, [key]: value };
+    this.#notify([key]);
+  }
+
+  patch(partial: Partial<T>): void {
+    const changedKeys: (keyof T)[] = [];
+
+    for (const [key, value] of Object.entries(partial)) {
+      if (this.#state[key as keyof T] !== value) {
+        changedKeys.push(key as keyof T);
+      }
+    }
+
+    if (changedKeys.length > 0) {
+      this.#state = { ...this.#state, ...partial };
+      this.#notify(changedKeys);
+    }
+  }
+
+  subscribe(listener: (state: T) => void): () => void {
+    this.#listeners.add(listener);
+    return () => this.#listeners.delete(listener);
+  }
+
+  subscribeKeys<K extends keyof T>(
+    keys: K[],
+    listener: (state: Pick<T, K>) => void,
+  ): () => void {
+    for (const key of keys) {
+      let set = this.#keyListeners.get(key);
+
+      if (!set) {
+        set = new Set();
+        this.#keyListeners.set(key, set);
+      }
+
+      set.add(listener);
+    }
+
+    return () => {
+      for (const key of keys) {
+        this.#keyListeners.get(key)?.delete(listener);
+      }
+    };
+  }
+
+  #notify(changedKeys: (keyof T)[]): void {
+    for (const listener of this.#listeners) {
+      listener(this.#state);
+    }
+
+    const notified = new Set<(state: T, changedKeys: (keyof T)[]) => void>();
+
+    for (const key of changedKeys) {
+      const set = this.#keyListeners.get(key);
+      if (!set) continue;
+
+      for (const listener of set) {
+        if (!notified.has(listener)) {
+          notified.add(listener);
+          listener(this.#state);
+        }
+      }
+    }
+  }
+}
+
+export type StateFactory<T> = (initial: T) => State<T>;
diff --git a/packages/store/src/store.ts b/packages/store/src/store.ts
new file mode 100644
index 00000000..d9145e6b
--- /dev/null
+++ b/packages/store/src/store.ts
@@ -0,0 +1,381 @@
+import type { EnsureTaskRecord, PendingTask, TaskContext, TaskRecord } from './queue';
+import type { RequestMeta, RequestMetaInit, ResolvedRequestConfig } from './request';
+import type { InferSliceRequests, InferSliceState, InferSliceTarget, ResolveSliceRequestHandlers, Slice } from './slice';
+import type { StateFactory } from './state';
+import { isNull } from '@videojs/utils';
+import { StoreError } from './errors';
+import { Queue } from './queue';
+import { createRequestMeta, resolveRequestCancelKeys, resolveRequestKey } from './request';
+import { State } from './state';
+
+export class Store<
+  Target,
+  Slices extends Slice<Target, any, any>[] = Slice<Target, any, any>[],
+  Tasks extends TaskRecord = InferStoreTasks<Slices>,
+> {
+  readonly #config: StoreConfig<Target, Slices, Tasks>;
+  readonly #slices: Slices;
+  readonly #queue: Queue<Tasks>;
+  readonly #state: State<InferStoreState<Slices>>;
+  readonly #request: InferStoreRequest<Slices>;
+  readonly #requestConfigs: Map<string, ResolvedRequestConfig<Target>>;
+  readonly #setupAbort = new AbortController();
+
+  #target: Target | null = null;
+  #attachAbort: AbortController | null = null;
+  #destroyed = false;
+
+  constructor(config: StoreConfig<Target, Slices, Tasks>) {
+    this.#config = config;
+    this.#slices = config.slices;
+
+    this.#queue = config.queue ?? new Queue<Tasks>();
+
+    // Use provided factory or default
+    const factory = config.state ?? (initial => new State(initial));
+    this.#state = factory(this.#createInitialState());
+
+    this.#requestConfigs = this.#buildRequestConfigs();
+    this.#request = this.#buildRequestProxy();
+
+    try {
+      config.onSetup?.({
+        store: this,
+        signal: this.#setupAbort.signal,
+      });
+    } catch (error) {
+      this.#handleError({ error });
+    }
+  }
+
+  // ----------------------------------------
+  // Public Getters
+  // ----------------------------------------
+
+  get target(): Target | null {
+    return this.#target;
+  }
+
+  get state(): InferStoreState<Slices> {
+    return this.#state.value;
+  }
+
+  get request(): InferStoreRequest<Slices> {
+    return this.#request;
+  }
+
+  get queue(): Queue<Tasks> {
+    return this.#queue;
+  }
+
+  get slices(): Slices {
+    return this.#slices;
+  }
+
+  get destroyed(): boolean {
+    return this.#destroyed;
+  }
+
+  // ----------------------------------------
+  // Attach / Detach
+  // ----------------------------------------
+
+  attach(newTarget: Target): () => void {
+    if (this.#destroyed) {
+      throw new StoreError('Store destroyed');
+    }
+
+    this.#attachAbort?.abort();
+
+    this.#target = newTarget;
+    this.#attachAbort = new AbortController();
+    const signal = this.#attachAbort.signal;
+
+    this.#resetState();
+
+    for (const slice of this.#slices) {
+      try {
+        const update = this.#createUpdate(slice);
+        slice.subscribe({ target: newTarget, update, signal });
+      } catch (error) {
+        this.#handleError({ error });
+      }
+    }
+
+    this.#syncAllSlices();
+
+    try {
+      this.#config.onAttach?.({
+        store: this,
+        target: newTarget,
+        signal,
+      });
+    } catch (error) {
+      this.#handleError({ error });
+    }
+
+    return () => this.#detach();
+  }
+
+  #createUpdate<State extends object>(slice: Slice<Target, State, any>) {
+    return (partial?: Partial<State>) => {
+      const target = this.#target;
+      if (!target) return;
+
+      try {
+        if (partial === undefined) {
+          this.#syncSlice(slice, target);
+        } else {
+          this.#state.patch(partial as Partial<InferStoreState<Slices>>);
+        }
+      } catch (error) {
+        this.#handleError({ error });
+      }
+    };
+  }
+
+  #detach(): void {
+    if (isNull(this.#target)) return;
+    this.#attachAbort?.abort();
+    this.#attachAbort = null;
+    this.#target = null;
+    this.#queue.abortAll('Target detached');
+    this.#resetState();
+  }
+
+  // ----------------------------------------
+  // Subscribe
+  // ----------------------------------------
+
+  subscribe(listener: (state: InferStoreState<Slices>) => void): () => void;
+  subscribe<K extends keyof InferStoreState<Slices>>(
+    keys: K[],
+    listener: (state: Pick<InferStoreState<Slices>, K>) => void,
+  ): () => void;
+  subscribe<K extends keyof InferStoreState<Slices>>(
+    keysOrListener: ((state: InferStoreState<Slices>) => void) | K[],
+    maybeListener?: (state: Pick<InferStoreState<Slices>, K>) => void,
+  ): () => void {
+    if (Array.isArray(keysOrListener)) {
+      return this.#state.subscribeKeys(keysOrListener, maybeListener!);
+    }
+
+    return this.#state.subscribe(keysOrListener);
+  }
+
+  // ----------------------------------------
+  // Destroy
+  // ----------------------------------------
+
+  destroy(): void {
+    if (this.#destroyed) return;
+    this.#destroyed = true;
+    this.#detach();
+    this.#setupAbort.abort();
+    this.#queue.destroy();
+  }
+
+  // ----------------------------------------
+  // State
+  // ----------------------------------------
+
+  #syncAllSlices(): void {
+    const target = this.#target;
+    if (!target) return;
+
+    for (const slice of this.#slices) {
+      this.#syncSlice(slice, target);
+    }
+  }
+
+  #syncSlice(slice: Slice<Target, any, any>, target: Target): void {
+    try {
+      const snapshot = slice.getSnapshot({
+        target,
+        initialState: slice.initialState,
+      });
+
+      this.#state.patch(snapshot);
+    } catch (error) {
+      this.#handleError({ error });
+    }
+  }
+
+  #createInitialState(): InferStoreState<Slices> {
+    const initialState: Record<string, unknown> = {};
+
+    for (const slice of this.#slices) {
+      Object.assign(initialState, slice.initialState);
+    }
+
+    return initialState as InferStoreState<Slices>;
+  }
+
+  #resetState(): void {
+    this.#state.patch(this.#createInitialState());
+  }
+
+  // ----------------------------------------
+  // Requests
+  // ----------------------------------------
+
+  #buildRequestConfigs(): Map<string, ResolvedRequestConfig<Target>> {
+    const configs = new Map<string, ResolvedRequestConfig<Target>>();
+
+    for (const slice of this.#slices) {
+      for (const [name, config] of Object.entries(slice.request)) {
+        configs.set(name, config as ResolvedRequestConfig<Target>);
+      }
+    }
+
+    return configs;
+  }
+
+  #buildRequestProxy(): InferStoreRequest<Slices> {
+    const proxy: Record<string, (...args: any[]) => Promise<unknown>> = {};
+
+    for (const [name, config] of this.#requestConfigs) {
+      proxy[name] = (input?: unknown, meta?: RequestMetaInit) => {
+        if (this.#destroyed) {
+          return Promise.reject(new StoreError('Store destroyed'));
+        }
+
+        return this.#execute(
+          name,
+          config,
+          input,
+          meta ? createRequestMeta(meta) : null,
+        );
+      };
+    }
+
+    return proxy as InferStoreRequest<Slices>;
+  }
+
+  async #execute(
+    name: string,
+    config: ResolvedRequestConfig<Target>,
+    input: unknown,
+    meta: RequestMeta | null,
+  ): Promise<unknown> {
+    const key = resolveRequestKey(config.key, input);
+
+    for (const cancelKey of resolveRequestCancelKeys(config.cancel, input)) {
+      this.#queue.abort(cancelKey, `Cancelled by ${name}`);
+    }
+
+    const handler = async ({ input, signal }: TaskContext) => {
+      const target = this.#target;
+
+      if (!target) {
+        throw new StoreError('No target attached');
+      }
+
+      for (const guard of config.guard) {
+        if (signal.aborted) {
+          throw new StoreError('Aborted');
+        }
+
+        const result = await guard({ target, signal });
+
+        if (!result) {
+          throw new StoreError('Rejected');
+        }
+      }
+
+      return config.handler(input, { target, signal, meta });
+    };
+
+    try {
+      return await this.#queue.enqueue({
+        name,
+        key,
+        input,
+        meta,
+        schedule: config.schedule,
+        handler,
+      });
+    } catch (error) {
+      this.#handleError({
+        request: this.#queue.pending.get(key),
+        error,
+      });
+
+      throw error;
+    }
+  }
+
+  // ----------------------------------------
+  // Errors
+  // ----------------------------------------
+
+  #handleError(context: Omit<StoreErrorContext<Target, Slices, Tasks>, 'store'>): void {
+    if (this.#config.onError) {
+      this.#config.onError({ ...context, store: this });
+    } else {
+      console.error('[vjs-store]', context.error);
+    }
+  }
+}
+
+// ----------------------------------------
+// Factory
+// ----------------------------------------
+
+export function createStore<Slices extends Slice<any, any, any>[]>(
+  config: StoreConfig<InferSliceTarget<Slices[number]>, Slices, InferStoreTasks<Slices>>,
+): Store<InferSliceTarget<Slices[number]>, Slices, InferStoreTasks<Slices>> {
+  return new Store(config);
+}
+
+// ----------------------------------------
+// Types
+// ----------------------------------------
+
+export interface StoreConfig<
+  Target,
+  Slices extends Slice<Target, any, any>[],
+  Tasks extends TaskRecord = InferStoreTasks<Slices>,
+> {
+  slices: Slices;
+  queue?: Queue<Tasks>;
+  state?: StateFactory<InferStoreState<Slices>>;
+  onSetup?: (ctx: StoreSetupContext<Target, Slices, Tasks>) => void;
+  onAttach?: (ctx: StoreAttachContext<Target, Slices, Tasks>) => void;
+  onError?: (ctx: StoreErrorContext<Target, Slices, Tasks>) => void;
+}
+
+export interface StoreSetupContext<Target, Slices extends Slice<Target, any, any>[], Tasks extends TaskRecord> {
+  store: Store<Target, Slices, Tasks>;
+  signal: AbortSignal;
+}
+
+export interface StoreAttachContext<Target, Slices extends Slice<Target, any, any>[], Tasks extends TaskRecord> {
+  store: Store<Target, Slices, Tasks>;
+  target: Target;
+  signal: AbortSignal;
+}
+
+export interface StoreErrorContext<Target, Slices extends Slice<Target, any, any>[], Tasks extends TaskRecord> {
+  request?: PendingTask | undefined;
+  error: unknown;
+  store: Store<Target, Slices, Tasks>;
+}
+
+// ----------------------------------------
+// Type Inference
+// ----------------------------------------
+
+type UnionToIntersection<U> = (U extends any ? (x: U) => void : never) extends (x: infer I) => void
+  ? I
+  : never;
+
+export type InferStoreState<Slices extends Slice<any, any, any>[]> = UnionToIntersection<
+  InferSliceState<Slices[number]>
+>;
+
+export type InferStoreRequest<Slices extends Slice<any, any, any>[]>
+  = UnionToIntersection<ResolveSliceRequestHandlers<Slices[number]>>;
+
+export type InferStoreTasks<Slices extends Slice<any, any, any>[]>
+  = EnsureTaskRecord<UnionToIntersection<InferSliceRequests<Slices[number]>>>;
diff --git a/packages/store/test/dom/schedulers.test.ts b/packages/store/test/dom/schedulers.test.ts
new file mode 100644
index 00000000..40fd5a33
--- /dev/null
+++ b/packages/store/test/dom/schedulers.test.ts
@@ -0,0 +1,176 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { idle, raf } from '../../src/dom/schedulers';
+import { createQueue } from '../../src/queue';
+
+describe('dom schedulers', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  describe('raf', () => {
+    it('creates a TaskScheduler', () => {
+      const scheduler = raf();
+      expect(scheduler).toBeTypeOf('function');
+    });
+
+    it('schedules flush on animation frame', async () => {
+      const flush = vi.fn();
+      const scheduler = raf();
+
+      scheduler(flush);
+
+      expect(flush).not.toHaveBeenCalled();
+      await vi.runAllTimersAsync();
+      expect(flush).toHaveBeenCalledOnce();
+    });
+
+    it('returns cancel function', async () => {
+      const flush = vi.fn();
+      const scheduler = raf();
+
+      const cancel = scheduler(flush);
+
+      expect(cancel).toBeTypeOf('function');
+      cancel!();
+      await vi.runAllTimersAsync();
+      expect(flush).not.toHaveBeenCalled();
+    });
+
+    it('works with queue', async () => {
+      const queue = createQueue();
+      const handler = vi.fn().mockResolvedValue('result');
+
+      const promise = queue.enqueue({
+        name: 'raf-task',
+        key: 'raf',
+        schedule: raf(),
+        handler,
+      });
+
+      expect(handler).not.toHaveBeenCalled();
+      await vi.runAllTimersAsync();
+      await expect(promise).resolves.toBe('result');
+    });
+  });
+
+  describe('idle', () => {
+    it('creates a TaskScheduler', () => {
+      const scheduler = idle();
+      expect(scheduler).toBeTypeOf('function');
+    });
+
+    it('schedules flush when idle', async () => {
+      const flush = vi.fn();
+      const scheduler = idle();
+
+      scheduler(flush);
+
+      expect(flush).not.toHaveBeenCalled();
+      await vi.runAllTimersAsync();
+      expect(flush).toHaveBeenCalledOnce();
+    });
+
+    it('returns cancel function', async () => {
+      const flush = vi.fn();
+      const scheduler = idle();
+
+      const cancel = scheduler(flush);
+
+      expect(cancel).toBeTypeOf('function');
+      cancel!();
+      await vi.runAllTimersAsync();
+      expect(flush).not.toHaveBeenCalled();
+    });
+
+    it('accepts options', async () => {
+      const flush = vi.fn();
+      const scheduler = idle({ timeout: 1000 });
+
+      scheduler(flush);
+
+      await vi.runAllTimersAsync();
+      expect(flush).toHaveBeenCalledOnce();
+    });
+
+    it('works with queue', async () => {
+      const queue = createQueue();
+      const handler = vi.fn().mockResolvedValue('idle-result');
+
+      const promise = queue.enqueue({
+        name: 'idle-task',
+        key: 'idle',
+        schedule: idle(),
+        handler,
+      });
+
+      expect(handler).not.toHaveBeenCalled();
+      await vi.runAllTimersAsync();
+      await expect(promise).resolves.toBe('idle-result');
+    });
+  });
+
+  describe('integration', () => {
+    it('different schedulers can coexist in same queue', async () => {
+      const queue = createQueue();
+      const order: string[] = [];
+
+      queue.enqueue({
+        name: 'raf-task',
+        key: 'raf',
+        schedule: raf(),
+        handler: async () => {
+          order.push('raf');
+        },
+      });
+
+      queue.enqueue({
+        name: 'idle-task',
+        key: 'idle',
+        schedule: idle(),
+        handler: async () => {
+          order.push('idle');
+        },
+      });
+
+      await vi.runAllTimersAsync();
+
+      expect(order).toContain('raf');
+      expect(order).toContain('idle');
+    });
+
+    it('superseding works with raf scheduler', async () => {
+      const queue = createQueue();
+      const first = vi.fn().mockResolvedValue('first');
+      const second = vi.fn().mockResolvedValue('second');
+
+      const promise1 = queue.enqueue({
+        name: 'first',
+        key: 'shared',
+        schedule: raf(),
+        handler: first,
+      });
+
+      const promise2 = queue.enqueue({
+        name: 'second',
+        key: 'shared',
+        schedule: raf(),
+        handler: second,
+      });
+
+      // Handle the rejection immediately to avoid unhandled rejection warning
+      promise1.catch(() => {});
+
+      await vi.runAllTimersAsync();
+
+      await expect(promise1).rejects.toThrow();
+      await expect(promise2).resolves.toBe('second');
+      expect(first).not.toHaveBeenCalled();
+      expect(second).toHaveBeenCalledOnce();
+    });
+  });
+});
diff --git a/packages/store/test/errors.test.ts b/packages/store/test/errors.test.ts
new file mode 100644
index 00000000..8be95e4b
--- /dev/null
+++ b/packages/store/test/errors.test.ts
@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest';
+import { isStoreError, StoreError } from '../src/errors';
+
+describe('errors', () => {
+  describe('storeError', () => {
+    it('creates error with message', () => {
+      const error = new StoreError('test message');
+      expect(error.message).toBe('test message');
+      expect(error.name).toBe('StoreError');
+      expect(error).toBeInstanceOf(Error);
+    });
+
+    it('supports cause for error chaining', () => {
+      const cause = new Error('original error');
+      const error = new StoreError('wrapped error', { cause });
+      expect(error.message).toBe('wrapped error');
+      expect(error.cause).toBe(cause);
+    });
+  });
+
+  describe('type guard', () => {
+    it('isStoreError identifies store errors', () => {
+      expect(isStoreError(new StoreError('test'))).toBe(true);
+      expect(isStoreError(new Error('regular'))).toBe(false);
+      expect(isStoreError(null)).toBe(false);
+    });
+  });
+});
diff --git a/packages/store/test/guard.test.ts b/packages/store/test/guard.test.ts
new file mode 100644
index 00000000..1113cd23
--- /dev/null
+++ b/packages/store/test/guard.test.ts
@@ -0,0 +1,154 @@
+import { describe, expect, it, vi } from 'vitest';
+import { StoreError } from '../src/errors';
+import { all, any, timeout } from '../src/guard';
+
+describe('guard', () => {
+  const createContext = () => ({
+    target: {},
+    signal: new AbortController().signal,
+  });
+
+  describe('all', () => {
+    it('passes when all guards return true', async () => {
+      const guard = all(
+        () => true,
+        () => true,
+        () => Promise.resolve(true),
+      );
+      expect(await guard(createContext())).toBe(true);
+    });
+
+    it('fails on first falsy guard', async () => {
+      const thirdGuard = vi.fn(() => true);
+      const guard = all(
+        () => true,
+        () => false,
+        thirdGuard,
+      );
+      expect(await guard(createContext())).toBe(false);
+      expect(thirdGuard).not.toHaveBeenCalled();
+    });
+
+    it('handles async guards', async () => {
+      const guard = all(
+        () => Promise.resolve(true),
+        async () => {
+          await new Promise(r => setTimeout(r, 10));
+          return true;
+        },
+      );
+      expect(await guard(createContext())).toBe(true);
+    });
+
+    it('fails on async falsy result', async () => {
+      const guard = all(
+        () => true,
+        () => Promise.resolve(false),
+      );
+      expect(await guard(createContext())).toBe(false);
+    });
+  });
+
+  describe('any', () => {
+    it('passes on first truthy sync result', () => {
+      const guard = any(
+        () => false,
+        () => true,
+        () => false,
+      );
+      expect(guard(createContext())).toBe(true);
+    });
+
+    it('returns false when all sync guards fail', () => {
+      const guard = any(
+        () => false,
+        () => false,
+      );
+      expect(guard(createContext())).toBe(false);
+    });
+
+    it('races async guards - first truthy wins', async () => {
+      const guard = any(
+        () => new Promise(r => setTimeout(() => r(false), 50)),
+        () => new Promise(r => setTimeout(() => r(true), 10)),
+        () => new Promise(r => setTimeout(() => r(false), 30)),
+      );
+      expect(await guard(createContext())).toBe(true);
+    });
+
+    it('returns false if all async guards resolve falsy', async () => {
+      const guard = any(
+        () => Promise.resolve(false),
+        () => Promise.resolve(0),
+        () => Promise.resolve(null),
+      );
+      expect(await guard(createContext())).toBe(false);
+    });
+
+    it('prefers sync truthy over pending async', () => {
+      const guard = any(
+        () => new Promise(() => {}), // never resolves
+        () => true,
+      );
+      expect(guard(createContext())).toBe(true);
+    });
+  });
+
+  describe('timeout', () => {
+    it('passes sync truthy immediately', async () => {
+      const guard = timeout(() => true, 1000);
+      expect(await guard(createContext())).toBe(true);
+    });
+
+    it('fails sync falsy immediately', async () => {
+      const guard = timeout(() => false, 1000);
+      expect(await guard(createContext())).toBe(false);
+    });
+
+    it('passes async within timeout', async () => {
+      const guard = timeout(
+        () => new Promise(r => setTimeout(() => r(true), 10)),
+        1000,
+      );
+      expect(await guard(createContext())).toBe(true);
+    });
+
+    it('throws StoreError on timeout', async () => {
+      vi.useFakeTimers();
+
+      const guard = timeout(
+        () => new Promise(() => {}), // never resolves
+        100,
+        'waitForReady',
+      );
+
+      const promise = guard(createContext());
+      vi.advanceTimersByTime(100);
+
+      await expect(promise).rejects.toThrow(StoreError);
+      await expect(promise).rejects.toMatchObject({
+        message: 'Timeout: waitForReady',
+      });
+
+      vi.useRealTimers();
+    });
+
+    it('clears timeout on abort', async () => {
+      vi.useFakeTimers();
+
+      const controller = new AbortController();
+      const guard = timeout(
+        () => new Promise(() => {}),
+        100,
+      );
+
+      guard({ target: {}, signal: controller.signal });
+      controller.abort();
+
+      // Should not throw - timeout was cleared
+      vi.advanceTimersByTime(200);
+
+      vi.useRealTimers();
+    });
+  });
+});
diff --git a/packages/store/test/integration/store.test.ts b/packages/store/test/integration/store.test.ts
new file mode 100644
index 00000000..60130965
--- /dev/null
+++ b/packages/store/test/integration/store.test.ts
@@ -0,0 +1,321 @@
+import { describe, expect, it, vi } from 'vitest';
+import { createSlice, createStore, delay } from '../../src';
+
+describe('store lifecycle integration', () => {
+  it('full lifecycle: create → attach → use → detach → destroy', async () => {
+    const events: string[] = [];
+
+    class Target extends EventTarget {
+      value = 0;
+    }
+
+    const slice = createSlice<Target>()({
+      initialState: { count: 0 },
+      getSnapshot: ({ target }) => ({ count: target.value }),
+      subscribe: ({ target, update, signal }) => {
+        events.push('subscribe');
+        target.addEventListener('change', () => update(), { signal });
+        signal.addEventListener('abort', () => events.push('unsubscribe'));
+      },
+      request: {
+        increment: (_, { target }) => {
+          target.value++;
+          target.dispatchEvent(new Event('change'));
+          events.push('increment');
+        },
+      },
+    });
+
+    const store = createStore({
+      slices: [slice],
+      onSetup: () => events.push('setup'),
+      onAttach: () => events.push('attach'),
+    });
+
+    expect(events).toEqual(['setup']);
+
+    const target = new Target();
+    target.value = 5;
+    const detach = store.attach(target);
+
+    expect(events).toEqual(['setup', 'subscribe', 'attach']);
+    expect(store.state.count).toBe(5);
+
+    await store.request.increment();
+    expect(store.state.count).toBe(6);
+    expect(events).toContain('increment');
+
+    detach();
+    expect(events).toContain('unsubscribe');
+    expect(store.target).toBeNull();
+
+    store.destroy();
+    expect(store.destroyed).toBe(true);
+  });
+
+  it('request with guards and scheduling', async () => {
+    vi.useFakeTimers();
+
+    let ready = false;
+    const isReady = () => ready;
+
+    const slice = createSlice<unknown>()({
+      initialState: {},
+      getSnapshot: () => ({}),
+      subscribe: () => {},
+      request: {
+        delayedAction: {
+          schedule: delay(100),
+          guard: [isReady],
+          handler: (_, _ctx) => 'completed',
+        },
+      },
+    });
+
+    const store = createStore({
+      slices: [slice],
+      onError: () => {},
+    });
+
+    store.attach({});
+
+    // Test 1: Guard rejects when not ready
+    const failPromise = store.request.delayedAction().catch(e => e);
+    await vi.runAllTimersAsync();
+    await expect(failPromise).resolves.toMatchObject({ message: 'Rejected' });
+
+    // Test 2: Guard passes when ready
+    ready = true;
+    const successPromise = store.request.delayedAction();
+    await vi.runAllTimersAsync();
+    await expect(successPromise).resolves.toBe('completed');
+
+    vi.useRealTimers();
+  });
+});
+
+describe('request coordination', () => {
+  it('cancel option aborts related requests', async () => {
+    const events: string[] = [];
+
+    const slice = createSlice<unknown>()({
+      initialState: {},
+      getSnapshot: () => ({}),
+      subscribe: () => {},
+      request: {
+        load: {
+          key: 'load',
+          async handler(_, { signal }) {
+            events.push('load-start');
+            await new Promise((resolve, reject) => {
+              const timeout = setTimeout(() => {
+                events.push('load-complete');
+                resolve('loaded');
+              }, 100);
+              signal.addEventListener('abort', () => {
+                clearTimeout(timeout);
+                events.push('load-aborted');
+                reject(new Error('aborted'));
+              });
+            });
+          },
+        },
+        stop: {
+          cancel: ['load'],
+          handler: (_, _ctx) => {
+            events.push('stop');
+          },
+        },
+      },
+    });
+
+    const store = createStore({
+      slices: [slice],
+      onError: () => {},
+    });
+
+    store.attach({});
+
+    const loadPromise = store.request.load();
+    await new Promise(r => setTimeout(r, 10));
+
+    await store.request.stop();
+
+    await loadPromise.catch(() => {});
+
+    expect(events).toContain('load-start');
+    expect(events).toContain('load-aborted');
+    expect(events).toContain('stop');
+    expect(events).not.toContain('load-complete');
+  });
+
+  it('dynamic keys enable parallel execution', async () => {
+    const completionOrder: number[] = [];
+
+    const slice = createSlice<unknown>()({
+      initialState: {},
+      getSnapshot: () => ({}),
+      subscribe: () => {},
+      request: {
+        fetchTrack: {
+          key: (id: number) => `track-${id}`,
+          async handler(id: number, _ctx) {
+            await new Promise(r => setTimeout(r, 10 * id));
+            completionOrder.push(id);
+            return id;
+          },
+        },
+      },
+    });
+
+    const store = createStore({
+      slices: [slice],
+    });
+
+    store.attach({});
+
+    // All should run in parallel with different keys
+    const [r3, r1, r2] = await Promise.all([
+      store.request.fetchTrack(3),
+      store.request.fetchTrack(1),
+      store.request.fetchTrack(2),
+    ]);
+
+    expect(r1).toBe(1);
+    expect(r2).toBe(2);
+    expect(r3).toBe(3);
+    expect(completionOrder).toEqual([1, 2, 3]); // Complete in duration order
+  });
+
+  it('same key requests supersede each other', async () => {
+    const executed: string[] = [];
+
+    const slice = createSlice<unknown>()({
+      initialState: {},
+      getSnapshot: () => ({}),
+      subscribe: () => {},
+      request: {
+        action: {
+          key: 'shared',
+          async handler(name: string, _ctx) {
+            executed.push(`${name}-start`);
+            await new Promise(r => setTimeout(r, 50));
+            executed.push(`${name}-end`);
+            return name;
+          },
+        },
+      },
+    });
+
+    const store = createStore({
+      slices: [slice],
+      onError: () => {},
+    });
+
+    store.attach({});
+
+    const p1 = store.request.action('first');
+    const p2 = store.request.action('second');
+    const p3 = store.request.action('third');
+
+    await expect(p1).rejects.toThrow();
+    await expect(p2).rejects.toThrow();
+    await expect(p3).resolves.toBe('third');
+
+    expect(executed).toContain('third-start');
+    expect(executed).toContain('third-end');
+    expect(executed).not.toContain('first-end');
+    expect(executed).not.toContain('second-end');
+  });
+});
+
+describe('state syncing', () => {
+  it('partial updates only trigger relevant subscriptions', async () => {
+    const volumeUpdates: number[] = [];
+    const mutedUpdates: boolean[] = [];
+
+    class Target extends EventTarget {
+      volume = 1;
+      muted = false;
+    }
+
+    const slice = createSlice<Target>()({
+      initialState: {
+        volume: 1,
+        muted: false,
+      },
+      getSnapshot: ({ target }) => ({
+        volume: target.volume,
+        muted: target.muted,
+      }),
+      subscribe: ({ target, update, signal }) => {
+        target.addEventListener('volumechange', () => {
+          update({ volume: target.volume });
+        }, { signal });
+
+        target.addEventListener('mutechange', () => {
+          update({ muted: target.muted });
+        }, { signal });
+      },
+      request: {
+        setVolume: (volume: number, { target }) => {
+          target.volume = volume;
+          target.dispatchEvent(new Event('volumechange'));
+        },
+        setMuted: (muted: boolean, { target }) => {
+          target.muted = muted;
+          target.dispatchEvent(new Event('mutechange'));
+        },
+      },
+    });
+
+    const store = createStore({
+      slices: [slice],
+    });
+
+    store.attach(new Target());
+
+    store.subscribe(['volume'], (state) => {
+      volumeUpdates.push(state.volume);
+    });
+
+    store.subscribe(['muted'], (state) => {
+      mutedUpdates.push(state.muted);
+    });
+
+    await store.request.setVolume(0.5);
+    await store.request.setMuted(true);
+    await store.request.setVolume(0.8);
+
+    expect(volumeUpdates).toEqual([0.5, 0.8]);
+    expect(mutedUpdates).toEqual([true]);
+  });
+
+  it('multiple slices merge state correctly', () => {
+    const audioSlice = createSlice<{ volume: number; rate: number }>()({
+      initialState: { volume: 1 },
+      getSnapshot: ({ target }) => ({ volume: target.volume }),
+      subscribe: () => {},
+      request: {},
+    });
+
+    const playbackSlice = createSlice<{ volume: number; rate: number }>()({
+      initialState: { rate: 1 },
+      getSnapshot: ({ target }) => ({ rate: target.rate }),
+      subscribe: () => {},
+      request: {},
+    });
+
+    const store = createStore({
+      slices: [audioSlice, playbackSlice],
+    });
+
+    const target = { volume: 0.5, rate: 1.5 };
+    store.attach(target);
+
+    expect(store.state).toEqual({
+      volume: 0.5,
+      rate: 1.5,
+    });
+  });
+});
diff --git a/packages/store/test/queue.test.ts b/packages/store/test/queue.test.ts
new file mode 100644
index 00000000..d5e7404c
--- /dev/null
+++ b/packages/store/test/queue.test.ts
@@ -0,0 +1,507 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { StoreError } from '../src/errors';
+import { createQueue, delay } from '../src/queue';
+
+describe('queue', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  describe('delay scheduler', () => {
+    it('delays execution', async () => {
+      const handler = vi.fn();
+      const schedule = delay(100);
+
+      const cancel = schedule(handler);
+
+      expect(handler).not.toHaveBeenCalled();
+      vi.advanceTimersByTime(99);
+      expect(handler).not.toHaveBeenCalled();
+      vi.advanceTimersByTime(1);
+      expect(handler).toHaveBeenCalledOnce();
+
+      expect(cancel).toBeTypeOf('function');
+    });
+
+    it('cancel prevents execution', () => {
+      const handler = vi.fn();
+      const schedule = delay(100);
+
+      const cancel = schedule(handler);
+      vi.advanceTimersByTime(50);
+      cancel!();
+      vi.advanceTimersByTime(100);
+
+      expect(handler).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('queue', () => {
+    describe('enqueue', () => {
+      it('executes task via default microtask scheduler', async () => {
+        const queue = createQueue();
+        const handler = vi.fn().mockResolvedValue('result');
+
+        const promise = queue.enqueue({
+          name: 'test',
+          key: 'test-key',
+          handler,
+        });
+
+        expect(handler).not.toHaveBeenCalled();
+        await vi.runAllTimersAsync();
+        await expect(promise).resolves.toBe('result');
+      });
+
+      it('executes with custom scheduler', async () => {
+        const queue = createQueue({
+          scheduler: (flush) => {
+            const id = setTimeout(flush, 50);
+            return () => clearTimeout(id);
+          },
+        });
+
+        const handler = vi.fn().mockResolvedValue('done');
+        const promise = queue.enqueue({
+          name: 'delayed',
+          key: 'key',
+          handler,
+        });
+
+        expect(handler).not.toHaveBeenCalled();
+        vi.advanceTimersByTime(50);
+        await vi.runAllTimersAsync();
+        await expect(promise).resolves.toBe('done');
+      });
+
+      it('supersedes queued task with same key', async () => {
+        vi.useRealTimers(); // Use real timers for microtasks
+
+        const queue = createQueue();
+        const first = vi.fn().mockResolvedValue('first');
+        const second = vi.fn().mockResolvedValue('second');
+
+        const promise1 = queue.enqueue({ name: 'a', key: 'same', handler: first });
+        const promise2 = queue.enqueue({ name: 'b', key: 'same', handler: second });
+
+        await expect(promise1).rejects.toThrow(StoreError);
+        await expect(promise2).resolves.toBe('second');
+        expect(first).not.toHaveBeenCalled();
+        expect(second).toHaveBeenCalledOnce();
+      });
+
+      it('aborts pending task with same key', async () => {
+        vi.useRealTimers();
+
+        const queue = createQueue();
+        let aborted = false;
+
+        const longRunning = queue.enqueue({
+          name: 'long',
+          key: 'shared',
+          handler: async ({ signal }) => {
+            await new Promise((resolve, reject) => {
+              const timeout = setTimeout(resolve, 1000);
+              signal.addEventListener('abort', () => {
+                clearTimeout(timeout);
+                aborted = true;
+                reject(new Error('aborted'));
+              });
+            });
+          },
+        });
+
+        // Let first task start
+        await new Promise(r => setTimeout(r, 10));
+
+        const superseding = queue.enqueue({
+          name: 'supersede',
+          key: 'shared',
+          handler: async () => 'new result',
+        });
+
+        await expect(longRunning).rejects.toThrow();
+        await expect(superseding).resolves.toBe('new result');
+        expect(aborted).toBe(true);
+      });
+
+      it('parallel execution with different keys', async () => {
+        vi.useRealTimers();
+
+        const queue = createQueue();
+        const results: string[] = [];
+
+        const task1 = queue.enqueue({
+          name: 'task1',
+          key: 'key-a',
+          handler: async () => {
+            results.push('a-start');
+            await new Promise(r => setTimeout(r, 20));
+            results.push('a-end');
+            return 'a';
+          },
+        });
+
+        const task2 = queue.enqueue({
+          name: 'task2',
+          key: 'key-b',
+          handler: async () => {
+            results.push('b-start');
+            await new Promise(r => setTimeout(r, 10));
+            results.push('b-end');
+            return 'b';
+          },
+        });
+
+        await Promise.all([task1, task2]);
+
+        expect(results).toEqual(['a-start', 'b-start', 'b-end', 'a-end']);
+      });
+    });
+
+    describe('dequeue', () => {
+      it('removes queued task', async () => {
+        const queue = createQueue({
+          scheduler: delay(100),
+        });
+
+        const handler = vi.fn();
+        const promise = queue.enqueue({ name: 'test', key: 'k', handler });
+
+        expect(queue.dequeue('k')).toBe(true);
+        expect(queue.dequeue('k')).toBe(false);
+
+        vi.advanceTimersByTime(100);
+        await expect(promise).rejects.toThrow(StoreError);
+        expect(handler).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('clear', () => {
+      it('clears all queued tasks', async () => {
+        const queue = createQueue({ scheduler: delay(100) });
+
+        const p1 = queue.enqueue({ name: 'a', key: 'a', handler: vi.fn() });
+        const p2 = queue.enqueue({ name: 'b', key: 'b', handler: vi.fn() });
+
+        queue.clear();
+        vi.advanceTimersByTime(100);
+
+        await expect(p1).rejects.toThrow(StoreError);
+        await expect(p2).rejects.toThrow(StoreError);
+        expect(queue.queued.size).toBe(0);
+      });
+    });
+
+    describe('flush', () => {
+      it('flush() executes all queued immediately', async () => {
+        vi.useRealTimers();
+
+        const queue = createQueue({ scheduler: delay(1000) });
+        const handler = vi.fn().mockResolvedValue('ok');
+
+        const promise = queue.enqueue({ name: 't', key: 'k', handler });
+
+        queue.flush();
+        await expect(promise).resolves.toBe('ok');
+      });
+
+      it('flush(key) executes specific task', async () => {
+        vi.useRealTimers();
+
+        const queue = createQueue({ scheduler: delay(1000) });
+        const handlerA = vi.fn().mockResolvedValue('a');
+        const handlerB = vi.fn().mockResolvedValue('b');
+
+        queue.enqueue({ name: 'a', key: 'a', handler: handlerA });
+        queue.enqueue({ name: 'b', key: 'b', handler: handlerB });
+
+        queue.flush('a');
+        await new Promise(r => setTimeout(r, 10));
+
+        expect(handlerA).toHaveBeenCalled();
+        expect(handlerB).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('abort', () => {
+      it('abort(key) cancels queued and aborts pending', async () => {
+        vi.useRealTimers();
+
+        const queue = createQueue();
+        let aborted = false;
+
+        const promise = queue.enqueue({
+          name: 'test',
+          key: 'k',
+          handler: async ({ signal }) => {
+            await new Promise((_, reject) => {
+              signal.addEventListener('abort', () => {
+                aborted = true;
+                reject(new Error('aborted'));
+              });
+              setTimeout(() => {}, 1000);
+            });
+          },
+        });
+
+        await new Promise(r => setTimeout(r, 10));
+        queue.abort('k', 'test abort');
+
+        await expect(promise).rejects.toThrow();
+        expect(aborted).toBe(true);
+      });
+    });
+
+    describe('lifecycle hooks', () => {
+      it('onDispatch called when task starts', async () => {
+        vi.useRealTimers();
+
+        const onDispatch = vi.fn();
+        const queue = createQueue({ onDispatch });
+
+        await queue.enqueue({
+          name: 'myTask',
+          key: 'k',
+          input: { value: 42 },
+          handler: async () => 'result',
+        });
+
+        expect(onDispatch).toHaveBeenCalledWith(
+          expect.objectContaining({
+            name: 'myTask',
+            key: 'k',
+            input: { value: 42 },
+          }),
+        );
+      });
+
+      it('onSettled called with success', async () => {
+        vi.useRealTimers();
+
+        const onSettled = vi.fn();
+        const queue = createQueue({ onSettled });
+
+        await queue.enqueue({
+          name: 'task',
+          key: 'k',
+          handler: async () => 'done',
+        });
+
+        expect(onSettled).toHaveBeenCalledWith(
+          expect.objectContaining({ name: 'task' }),
+          expect.objectContaining({ status: 'success' }),
+        );
+      });
+
+      it('onSettled called with error status', async () => {
+        vi.useRealTimers();
+
+        const onSettled = vi.fn();
+        const queue = createQueue({ onSettled });
+
+        const promise = queue.enqueue({
+          name: 'failing',
+          key: 'k',
+          handler: async () => {
+            throw new Error('oops');
+          },
+        });
+
+        await expect(promise).rejects.toThrow('oops');
+        expect(onSettled).toHaveBeenCalledWith(
+          expect.anything(),
+          expect.objectContaining({ status: 'error' }),
+        );
+      });
+
+      it('onSettled called with cancelled status', async () => {
+        vi.useRealTimers();
+
+        const onSettled = vi.fn();
+        const queue = createQueue({ onSettled });
+
+        const promise = queue.enqueue({
+          name: 'first',
+          key: 'k',
+          handler: async () => new Promise(r => setTimeout(r, 100)),
+        });
+
+        await new Promise(r => setTimeout(r, 10));
+
+        queue.enqueue({
+          name: 'second',
+          key: 'k',
+          handler: async () => 'done',
+        });
+
+        await promise.catch(() => {});
+
+        expect(onSettled).toHaveBeenCalledWith(
+          expect.objectContaining({ name: 'first' }),
+          expect.objectContaining({ status: 'cancelled' }),
+        );
+      });
+    });
+
+    describe('destroy', () => {
+      it('rejects after destroy', async () => {
+        const queue = createQueue();
+        queue.destroy();
+
+        await expect(
+          queue.enqueue({ name: 't', key: 'k', handler: vi.fn() }),
+        ).rejects.toThrow('Queue destroyed');
+      });
+
+      it('aborts all pending on destroy', async () => {
+        vi.useRealTimers();
+
+        const queue = createQueue();
+        const aborted = vi.fn();
+
+        const promise = queue.enqueue({
+          name: 'task',
+          key: 'k',
+          handler: async ({ signal }) => {
+            signal.addEventListener('abort', aborted);
+            await new Promise(r => setTimeout(r, 100));
+          },
+        });
+
+        await new Promise(r => setTimeout(r, 10));
+        queue.destroy();
+
+        await expect(promise).rejects.toThrow();
+        expect(aborted).toHaveBeenCalled();
+        expect(queue.destroyed).toBe(true);
+      });
+    });
+
+    describe('cleanup edge cases', () => {
+      it('explicitly removes superseded task from queue before adding new one', async () => {
+        const queue = createQueue({ scheduler: delay(100) });
+
+        // Enqueue first task
+        const promise1 = queue.enqueue({
+          name: 'task1',
+          key: 'shared',
+          handler: vi.fn().mockResolvedValue('result1'),
+        });
+
+        // Queue should have the first task
+        expect(queue.queued.size).toBe(1);
+        expect(queue.queued.get('shared')?.name).toBe('task1');
+
+        // Immediately enqueue second task with same key (supersedes first)
+        const promise2 = queue.enqueue({
+          name: 'task2',
+          key: 'shared',
+          handler: vi.fn().mockResolvedValue('result2'),
+        });
+
+        // First should be superseded
+        await expect(promise1).rejects.toMatchObject({ message: 'Superseded' });
+
+        // Queue should only have the second task (first was explicitly deleted)
+        expect(queue.queued.size).toBe(1);
+        expect(queue.queued.get('shared')?.name).toBe('task2');
+
+        // Second should succeed
+        await vi.runAllTimersAsync();
+        await expect(promise2).resolves.toBe('result2');
+      });
+
+      it('allows pending tasks to self-cleanup after destroy', async () => {
+        vi.useRealTimers();
+
+        const queue = createQueue();
+        const cleanupSpy = vi.fn();
+
+        const promise = queue.enqueue({
+          name: 'task',
+          key: 'k',
+          handler: async ({ signal }) => {
+            signal.addEventListener('abort', () => cleanupSpy('aborted'));
+            try {
+              await new Promise((_, reject) => {
+                signal.addEventListener('abort', () => reject(signal.reason));
+              });
+            } finally {
+              cleanupSpy('cleanup');
+            }
+          },
+        });
+
+        // Wait for task to start
+        await new Promise(r => setTimeout(r, 10));
+        expect(queue.pending.size).toBe(1);
+
+        // Destroy queue
+        queue.destroy();
+
+        // Task should self-cleanup
+        await promise.catch(() => {});
+        expect(cleanupSpy).toHaveBeenCalledWith('aborted');
+        expect(cleanupSpy).toHaveBeenCalledWith('cleanup');
+
+        // Pending map should be empty (self-cleaned)
+        expect(queue.pending.size).toBe(0);
+      });
+
+      it('handles scheduler error without double-cleanup when already flushed', async () => {
+        const queue = createQueue();
+        let flushCalled = false;
+
+        // Scheduler that flushes synchronously then throws
+        const faultyScheduler = (flush: () => void) => {
+          flush(); // Synchronous flush
+          flushCalled = true;
+          throw new Error('Scheduler error');
+        };
+
+        const promise = queue.enqueue({
+          name: 'task',
+          key: 'k',
+          schedule: faultyScheduler,
+          handler: vi.fn().mockResolvedValue('result'),
+        });
+
+        // Task was flushed despite scheduler error
+        expect(flushCalled).toBe(true);
+
+        // Promise should reject with scheduler error
+        await expect(promise).rejects.toThrow('Scheduler error');
+
+        // Task should not be in queued map (wasn't double-deleted)
+        expect(queue.queued.size).toBe(0);
+      });
+
+      it('handles scheduler error with cleanup when not yet flushed', async () => {
+        const queue = createQueue();
+
+        // Scheduler that throws before flushing
+        const faultyScheduler = () => {
+          throw new Error('Scheduler error');
+        };
+
+        const promise = queue.enqueue({
+          name: 'task',
+          key: 'k',
+          schedule: faultyScheduler,
+          handler: vi.fn().mockResolvedValue('result'),
+        });
+
+        // Promise should reject with scheduler error
+        await expect(promise).rejects.toThrow('Scheduler error');
+
+        // Task should be removed from queue
+        expect(queue.queued.size).toBe(0);
+      });
+    });
+  });
+});
diff --git a/packages/store/test/request.test.ts b/packages/store/test/request.test.ts
new file mode 100644
index 00000000..041615f8
--- /dev/null
+++ b/packages/store/test/request.test.ts
@@ -0,0 +1,151 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+  createRequestMeta,
+  createRequestMetaFromEvent,
+  isRequestMeta,
+  REQUEST_META,
+  resolveRequestCancelKeys,
+  resolveRequestKey,
+} from '../src/request';
+
+describe('request', () => {
+  describe('meta', () => {
+    beforeEach(() => {
+      vi.useFakeTimers();
+      vi.setSystemTime(new Date('2025-01-01T00:00:00Z'));
+    });
+
+    afterEach(() => {
+      vi.useRealTimers();
+    });
+
+    describe('createRequestMeta', () => {
+      it('creates meta with required fields', () => {
+        const meta = createRequestMeta({
+          source: 'user',
+          context: undefined,
+        });
+
+        expect(meta[REQUEST_META]).toBe(true);
+        expect(meta.source).toBe('user');
+        expect(meta.timestamp).toBe(Date.now());
+      });
+
+      it('preserves provided timestamp', () => {
+        const meta = createRequestMeta({
+          source: 'system',
+          timestamp: 12345,
+          context: undefined,
+        });
+
+        expect(meta.timestamp).toBe(12345);
+      });
+
+      it('includes optional reason', () => {
+        const meta = createRequestMeta({
+          source: 'user',
+          reason: 'button-click',
+          context: { buttonId: 'play' },
+        });
+
+        expect(meta.reason).toBe('button-click');
+        expect(meta.context).toEqual({ buttonId: 'play' });
+      });
+    });
+
+    describe('isRequestMeta', () => {
+      it('returns true for valid RequestMeta', () => {
+        const meta = createRequestMeta({ source: 'test', context: undefined });
+        expect(isRequestMeta(meta)).toBe(true);
+      });
+
+      it('returns false for plain objects', () => {
+        expect(isRequestMeta({ source: 'test' })).toBe(false);
+        expect(isRequestMeta({})).toBe(false);
+      });
+
+      it('returns false for non-objects', () => {
+        expect(isRequestMeta(null)).toBe(false);
+        expect(isRequestMeta(undefined)).toBe(false);
+        expect(isRequestMeta('string')).toBe(false);
+        expect(isRequestMeta(123)).toBe(false);
+      });
+    });
+
+    describe('createRequestMetaFromEvent', () => {
+      it('creates meta from trusted event', () => {
+        const event = {
+          type: 'click',
+          timeStamp: 1000,
+          isTrusted: true,
+        };
+
+        const meta = createRequestMetaFromEvent(event);
+
+        expect(meta[REQUEST_META]).toBe(true);
+        expect(meta.source).toBe('user');
+        expect(meta.timestamp).toBe(1000);
+        expect(meta.reason).toBe('click');
+      });
+
+      it('creates meta from synthetic event', () => {
+        const event = {
+          type: 'play',
+          timeStamp: 2000,
+          isTrusted: false,
+        };
+
+        const meta = createRequestMetaFromEvent(event);
+
+        expect(meta.source).toBe('system');
+      });
+
+      it('includes context', () => {
+        const event = { type: 'test', timeStamp: 0 };
+        const context = { extra: 'data' };
+
+        const meta = createRequestMetaFromEvent(event, context);
+
+        expect(meta.context).toEqual({ extra: 'data' });
+      });
+    });
+  });
+
+  describe('resolveRequestKey', () => {
+    it('returns string key directly', () => {
+      expect(resolveRequestKey('my-key', undefined)).toBe('my-key');
+    });
+
+    it('calls function with input', () => {
+      const keyFn = (id: string) => `track-${id}`;
+      expect(resolveRequestKey(keyFn, 'abc')).toBe('track-abc');
+    });
+
+    it('handles symbol keys', () => {
+      const sym = Symbol('@videojs/unique');
+      expect(resolveRequestKey(sym, undefined)).toBe(sym);
+    });
+  });
+
+  describe('resolveRequestCancelKeys', () => {
+    it('returns empty array for undefined', () => {
+      expect(resolveRequestCancelKeys(undefined, null)).toEqual([]);
+    });
+
+    it('wraps single key in array', () => {
+      expect(resolveRequestCancelKeys('key', null)).toEqual(['key']);
+    });
+
+    it('returns array directly', () => {
+      expect(resolveRequestCancelKeys(['a', 'b'], null)).toEqual(['a', 'b']);
+    });
+
+    it('calls function with input', () => {
+      const cancelFn = (type: string) => [`${type}-loading`, `${type}-fetch`];
+      expect(resolveRequestCancelKeys(cancelFn, 'video')).toEqual([
+        'video-loading',
+        'video-fetch',
+      ]);
+    });
+  });
+});
diff --git a/packages/store/test/slice.test.ts b/packages/store/test/slice.test.ts
new file mode 100644
index 00000000..1ac5c82f
--- /dev/null
+++ b/packages/store/test/slice.test.ts
@@ -0,0 +1,74 @@
+import { describe, expect, it, vi } from 'vitest';
+import { createSlice } from '../src/slice';
+
+describe('slice', () => {
+  describe('createSlice', () => {
+    it('creates slice with all required properties', () => {
+      interface Target {
+        value: number;
+      }
+
+      const slice = createSlice<Target>()({
+        initialState: { count: 0 },
+        getSnapshot: ({ target }) => ({ count: target.value }),
+        subscribe: vi.fn(),
+        request: {
+          increment: (amount: number, { target }) => {
+            target.value += amount;
+          },
+        },
+      });
+
+      expect(slice.id).toBeTypeOf('symbol');
+      expect(slice.initialState).toEqual({ count: 0 });
+      expect(slice.getSnapshot).toBeTypeOf('function');
+      expect(slice.subscribe).toBeTypeOf('function');
+      expect(slice.request.increment).toMatchObject({
+        key: 'increment',
+        guard: [],
+        handler: expect.any(Function),
+      });
+    });
+
+    it('resolves shorthand handlers', () => {
+      const slice = createSlice({
+        initialState: {},
+        getSnapshot: () => ({}),
+        subscribe: () => {},
+        request: {
+          simple: () => 'result',
+        },
+      });
+
+      expect(slice.request.simple.key).toBe('simple');
+      expect(slice.request.simple.guard).toEqual([]);
+      expect(slice.request.simple.cancel).toBeUndefined();
+    });
+
+    it('preserves full config options', () => {
+      const guard = () => true;
+
+      const schedule = (flush: () => void) => {
+        setTimeout(flush, 100);
+      };
+
+      const slice = createSlice({
+        initialState: {},
+        getSnapshot: () => ({}),
+        subscribe: () => {},
+        request: {
+          configured: {
+            key: 'custom-key',
+            guard: [guard],
+            schedule,
+            handler: () => {},
+          },
+        },
+      });
+
+      expect(slice.request.configured.key).toBe('custom-key');
+      expect(slice.request.configured.guard).toEqual([guard]);
+      expect(slice.request.configured.schedule).toBe(schedule);
+    });
+  });
+});
diff --git a/packages/store/test/state.test.ts b/packages/store/test/state.test.ts
new file mode 100644
index 00000000..6f4dadd3
--- /dev/null
+++ b/packages/store/test/state.test.ts
@@ -0,0 +1,144 @@
+import { describe, expect, it, vi } from 'vitest';
+import { State } from '../src/state';
+
+describe('state', () => {
+  interface TestState {
+    volume: number;
+    muted: boolean;
+    currentTime: number;
+  }
+
+  const createState = () =>
+    new State<TestState>({
+      volume: 1,
+      muted: false,
+      currentTime: 0,
+    });
+
+  describe('value', () => {
+    it('returns current state', () => {
+      const state = createState();
+      expect(state.value).toEqual({
+        volume: 1,
+        muted: false,
+        currentTime: 0,
+      });
+    });
+
+    it('value is immutable reference', () => {
+      const state = createState();
+      const first = state.value;
+      state.set('volume', 0.5);
+      expect(first).not.toBe(state.value);
+      expect(first.volume).toBe(1);
+    });
+  });
+
+  describe('set', () => {
+    it('updates single key', () => {
+      const state = createState();
+      state.set('volume', 0.5);
+      expect(state.value.volume).toBe(0.5);
+    });
+
+    it('does not notify on same value', () => {
+      const state = createState();
+      const listener = vi.fn();
+      state.subscribe(listener);
+
+      state.set('volume', 1); // same as initial
+      expect(listener).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('patch', () => {
+    it('updates multiple keys', () => {
+      const state = createState();
+      state.patch({ volume: 0.5, muted: true });
+
+      expect(state.value).toMatchObject({
+        volume: 0.5,
+        muted: true,
+      });
+    });
+
+    it('only notifies for changed keys', () => {
+      const state = createState();
+      const listener = vi.fn();
+      state.subscribeKeys(['volume'], listener);
+
+      state.patch({ volume: 1, muted: true }); // volume unchanged
+      expect(listener).not.toHaveBeenCalled();
+
+      state.patch({ volume: 0.5 });
+      expect(listener).toHaveBeenCalledOnce();
+    });
+  });
+
+  describe('subscribe', () => {
+    it('calls listener on any change', () => {
+      const state = createState();
+      const listener = vi.fn();
+      state.subscribe(listener);
+
+      state.set('volume', 0.5);
+      expect(listener).toHaveBeenCalledWith(state.value);
+
+      state.set('muted', true);
+      expect(listener).toHaveBeenCalledTimes(2);
+    });
+
+    it('returns unsubscribe function', () => {
+      const state = createState();
+      const listener = vi.fn();
+
+      const unsub = state.subscribe(listener);
+      state.set('volume', 0.5);
+      expect(listener).toHaveBeenCalledOnce();
+
+      unsub();
+      state.set('volume', 0.3);
+      expect(listener).toHaveBeenCalledOnce();
+    });
+  });
+
+  describe('subscribeKeys', () => {
+    it('only notifies for specified keys', () => {
+      const state = createState();
+      const volumeListener = vi.fn();
+      const mutedListener = vi.fn();
+
+      state.subscribeKeys(['volume'], volumeListener);
+      state.subscribeKeys(['muted'], mutedListener);
+
+      state.set('volume', 0.5);
+      expect(volumeListener).toHaveBeenCalledOnce();
+      expect(mutedListener).not.toHaveBeenCalled();
+
+      state.set('muted', true);
+      expect(volumeListener).toHaveBeenCalledOnce();
+      expect(mutedListener).toHaveBeenCalledOnce();
+    });
+
+    it('notifies once per change even with multiple keys', () => {
+      const state = createState();
+      const listener = vi.fn();
+      state.subscribeKeys(['volume', 'muted'], listener);
+
+      state.patch({ volume: 0.5, muted: true });
+      expect(listener).toHaveBeenCalledOnce();
+    });
+
+    it('unsubscribes from all keys', () => {
+      const state = createState();
+      const listener = vi.fn();
+
+      const unsub = state.subscribeKeys(['volume', 'muted'], listener);
+      unsub();
+
+      state.set('volume', 0.5);
+      state.set('muted', true);
+      expect(listener).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/packages/store/test/store.test.ts b/packages/store/test/store.test.ts
new file mode 100644
index 00000000..117e6849
--- /dev/null
+++ b/packages/store/test/store.test.ts
@@ -0,0 +1,370 @@
+import { describe, expect, it, vi } from 'vitest';
+import { StoreError } from '../src/errors';
+import { createQueue } from '../src/queue';
+import { createSlice } from '../src/slice';
+import { createStore } from '../src/store';
+
+describe('store', () => {
+  // Mock target that mimics HTMLVideoElement
+  class MockMedia extends EventTarget {
+    volume = 1;
+    muted = false;
+    paused = true;
+    play = vi.fn();
+    pause = vi.fn();
+  }
+
+  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'));
+      },
+      setMuted: (muted: boolean, { target }) => {
+        target.muted = muted;
+        target.dispatchEvent(new Event('volumechange'));
+      },
+    },
+  });
+
+  const playbackSlice = createSlice<MockMedia>()({
+    initialState: { paused: true },
+    getSnapshot: ({ target }) => ({ paused: target.paused }),
+    subscribe: () => {},
+    request: {
+      play: {
+        key: 'playback',
+        async handler(_, { target }) {
+          target.play();
+          target.paused = false;
+        },
+      },
+      pause: {
+        key: 'playback',
+        async handler(_, { target }) {
+          target.pause();
+          target.paused = true;
+        },
+      },
+    },
+  });
+
+  describe('creation', () => {
+    it('creates store with merged initial state', () => {
+      const store = createStore({
+        slices: [audioSlice, playbackSlice],
+      });
+
+      expect(store.state).toEqual({
+        volume: 1,
+        muted: false,
+        paused: true,
+      });
+    });
+
+    it('creates store with default queue', () => {
+      const store = createStore({
+        slices: [audioSlice],
+      });
+
+      expect(store.queue).toBeDefined();
+    });
+
+    it('accepts custom queue', () => {
+      const queue = createQueue<any>();
+
+      const store = createStore({
+        slices: [audioSlice],
+        queue,
+      });
+
+      expect(store.queue).toBe(queue);
+    });
+
+    it('calls onSetup', () => {
+      const onSetup = vi.fn();
+      const store = createStore({
+        slices: [audioSlice],
+        onSetup,
+      });
+
+      expect(onSetup).toHaveBeenCalledWith({
+        store,
+        signal: expect.any(AbortSignal),
+      });
+    });
+  });
+
+  describe('attach', () => {
+    it('syncs state from target', () => {
+      const store = createStore({
+        slices: [audioSlice],
+      });
+
+      const media = new MockMedia();
+      media.volume = 0.5;
+      media.muted = true;
+
+      store.attach(media);
+
+      expect(store.state).toEqual({ volume: 0.5, muted: true });
+      expect(store.target).toBe(media);
+    });
+
+    it('calls onAttach', () => {
+      const onAttach = vi.fn();
+      const store = createStore({
+        slices: [audioSlice],
+        onAttach,
+      });
+
+      const media = new MockMedia();
+      store.attach(media);
+
+      expect(onAttach).toHaveBeenCalledWith({
+        store,
+        target: media,
+        signal: expect.any(AbortSignal),
+      });
+    });
+
+    it('sets up subscriptions', () => {
+      const store = createStore({
+        slices: [audioSlice],
+      });
+
+      const media = new MockMedia();
+      const addListenerSpy = vi.spyOn(media, 'addEventListener');
+
+      store.attach(media);
+
+      expect(addListenerSpy).toHaveBeenCalledWith(
+        'volumechange',
+        expect.any(Function),
+      );
+    });
+
+    it('detach cleans up', () => {
+      const store = createStore({
+        slices: [audioSlice],
+      });
+
+      const media = new MockMedia();
+      const removeListenerSpy = vi.spyOn(media, 'removeEventListener');
+
+      const detach = store.attach(media);
+      detach();
+
+      expect(store.target).toBeNull();
+      expect(removeListenerSpy).toHaveBeenCalled();
+    });
+
+    it('reattach cleans up previous', () => {
+      const store = createStore({
+        slices: [audioSlice],
+      });
+
+      const media1 = new MockMedia();
+      const m1RemoveListenerSpy = vi.spyOn(media1, 'removeEventListener');
+
+      const media2 = new MockMedia();
+
+      media2.volume = 0.3;
+
+      store.attach(media1);
+      store.attach(media2);
+
+      expect(store.target).toBe(media2);
+      expect(store.state.volume).toBe(0.3);
+      expect(m1RemoveListenerSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe('request', () => {
+    it('executes request on target', async () => {
+      const store = createStore({
+        slices: [audioSlice],
+      });
+
+      const media = new MockMedia();
+      store.attach(media);
+
+      await store.request.setVolume(0.5);
+
+      expect(media.volume).toBe(0.5);
+    });
+
+    it('throws StoreError without target', async () => {
+      const store = createStore({
+        slices: [audioSlice],
+        onError: () => {}, // silence errors
+      });
+
+      await expect(store.request.setVolume(0.5)).rejects.toThrow(StoreError);
+    });
+
+    it('coordinates requests with same key', async () => {
+      const store = createStore({
+        slices: [playbackSlice],
+        onError: () => {}, // silence errors
+      });
+
+      const media = new MockMedia();
+      store.attach(media);
+
+      const playPromise = store.request.play();
+      const pausePromise = store.request.pause();
+
+      await expect(playPromise).rejects.toThrow(StoreError);
+      await pausePromise;
+
+      expect(media.paused).toBe(true);
+    });
+
+    it('accepts metadata', async () => {
+      const handlerSpy = vi.fn();
+
+      const slice = createSlice<MockMedia>()({
+        initialState: {},
+        getSnapshot: () => ({}),
+        subscribe: () => {},
+        request: {
+          action: {
+            handler: (_, ctx) => {
+              handlerSpy(ctx.meta);
+            },
+          },
+        },
+      });
+
+      const store = createStore({
+        slices: [slice],
+      });
+
+      store.attach(new MockMedia());
+
+      await store.request.action(null, {
+        source: 'user',
+        reason: 'test',
+      });
+
+      expect(handlerSpy).toHaveBeenCalledWith(
+        expect.objectContaining({
+          source: 'user',
+          reason: 'test',
+        }),
+      );
+    });
+  });
+
+  describe('subscribe', () => {
+    it('notifies on state change', async () => {
+      const store = createStore({
+        slices: [audioSlice],
+      });
+
+      const media = new MockMedia();
+      store.attach(media);
+
+      const listener = vi.fn();
+      store.subscribe(listener);
+
+      await store.request.setVolume(0.5);
+
+      const calls = listener.mock.calls;
+      const lastState = calls[calls.length - 1][0];
+      expect(lastState.volume).toBe(0.5);
+    });
+
+    it('keyed subscription only notifies for those keys', async () => {
+      const store = createStore({
+        slices: [audioSlice],
+      });
+
+      const media = new MockMedia();
+      store.attach(media);
+
+      const volumeListener = vi.fn();
+      store.subscribe(['volume'], volumeListener);
+
+      // Reset after attach sync
+      volumeListener.mockClear();
+
+      await store.request.setMuted(true);
+      expect(volumeListener).not.toHaveBeenCalled();
+
+      await store.request.setVolume(0.7);
+      expect(volumeListener).toHaveBeenCalled();
+    });
+  });
+
+  describe('destroy', () => {
+    it('cleans up everything', () => {
+      const store = createStore({
+        slices: [audioSlice],
+      });
+
+      const media = new MockMedia();
+      store.attach(media);
+      store.destroy();
+
+      expect(store.destroyed).toBe(true);
+      expect(store.target).toBeNull();
+      expect(store.queue.destroyed).toBe(true);
+    });
+
+    it('rejects requests after destroy', async () => {
+      const store = createStore({
+        slices: [audioSlice],
+      });
+
+      store.attach(new MockMedia());
+      store.destroy();
+
+      await expect(store.request.setVolume(0.5)).rejects.toThrow();
+    });
+  });
+
+  describe('error handling', () => {
+    it('calls onError for request errors', async () => {
+      const onError = vi.fn();
+
+      const failingSlice = createSlice<MockMedia>()({
+        initialState: {},
+        getSnapshot: () => ({}),
+        subscribe: () => {},
+        request: {
+          fail: () => {
+            throw new Error('request failed');
+          },
+        },
+      });
+
+      const store = createStore({
+        slices: [failingSlice],
+        onError,
+      });
+
+      store.attach(new MockMedia());
+
+      await store.request.fail().catch(() => {});
+
+      expect(onError).toHaveBeenCalledWith({
+        error: expect.any(Error),
+        store,
+      });
+    });
+  });
+});
diff --git a/packages/store/tsconfig.json b/packages/store/tsconfig.json
index 94653caf..7b709bf2 100644
--- a/packages/store/tsconfig.json
+++ b/packages/store/tsconfig.json
@@ -7,7 +7,7 @@
       "@/*": ["src/*"]
     }
   },
-  "references": [{ "path": "./src/dom" }, { "path": "./src/react" }],
+  "references": [{ "path": "./src/dom" }, { "path": "./src/lit" }, { "path": "./src/react" }],
   "include": ["src"],
-  "exclude": ["src/dom", "src/react"]
+  "exclude": ["src/dom", "src/lit", "src/react"]
 }
diff --git a/packages/store/tsdown.config.ts b/packages/store/tsdown.config.ts
index 26af9495..b7652436 100644
--- a/packages/store/tsdown.config.ts
+++ b/packages/store/tsdown.config.ts
@@ -4,6 +4,7 @@ export default defineConfig({
   entry: {
     index: './src/index.ts',
     dom: './src/dom/index.ts',
+    lit: './src/lit/index.ts',
     react: './src/react/index.ts',
   },
   platform: 'neutral',
diff --git a/packages/store/vitest.config.ts b/packages/store/vitest.config.ts
new file mode 100644
index 00000000..854bf289
--- /dev/null
+++ b/packages/store/vitest.config.ts
@@ -0,0 +1,24 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    projects: [
+      {
+        extends: true,
+        test: {
+          name: 'store',
+          include: ['test/**/*.test.ts'],
+          exclude: ['test/dom/**/*.test.ts'],
+        },
+      },
+      {
+        extends: true,
+        test: {
+          name: 'store/dom',
+          include: ['test/dom/**/*.test.ts'],
+          environment: 'jsdom',
+        },
+      },
+    ],
+  },
+});
diff --git a/packages/utils/package.json b/packages/utils/package.json
index c3a35e23..1d28f36d 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -29,12 +29,14 @@
     "build": "tsdown",
     "build:watch": "tsdown --watch --silent",
     "dev": "pnpm run build:watch",
-    "test": "echo \"No tests yet\"",
+    "test": "vitest --run",
+    "test:watch": "vitest",
     "clean": "rm -rf dist"
   },
   "devDependencies": {
     "tsdown": "^0.15.9",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vitest": "^3.2.4"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/utils/src/disposer.test.ts b/packages/utils/src/disposer.test.ts
new file mode 100644
index 00000000..b3219483
--- /dev/null
+++ b/packages/utils/src/disposer.test.ts
@@ -0,0 +1,212 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { Disposer } from './disposer';
+
+describe('disposer', () => {
+  describe('constructor', () => {
+    it('creates a disposer with size 0', () => {
+      const disposer = new Disposer();
+      expect(disposer.size).toBe(0);
+    });
+
+    it('tracks size as cleanups are added', () => {
+      const disposer = new Disposer();
+      disposer.add(() => {});
+      expect(disposer.size).toBe(1);
+      disposer.add(() => {});
+      expect(disposer.size).toBe(2);
+    });
+  });
+
+  describe('add', () => {
+    it('adds cleanup functions', () => {
+      const disposer = new Disposer();
+      const cleanup1 = vi.fn();
+      const cleanup2 = vi.fn();
+
+      disposer.add(cleanup1);
+      disposer.add(cleanup2);
+
+      expect(disposer.size).toBe(2);
+    });
+
+    it('does not call cleanups when adding', () => {
+      const disposer = new Disposer();
+      const cleanup = vi.fn();
+
+      disposer.add(cleanup);
+
+      expect(cleanup).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('dispose', () => {
+    it('calls all cleanup functions', () => {
+      const disposer = new Disposer();
+      const cleanup1 = vi.fn();
+      const cleanup2 = vi.fn();
+      const cleanup3 = vi.fn();
+
+      disposer.add(cleanup1);
+      disposer.add(cleanup2);
+      disposer.add(cleanup3);
+
+      disposer.dispose();
+
+      expect(cleanup1).toHaveBeenCalledOnce();
+      expect(cleanup2).toHaveBeenCalledOnce();
+      expect(cleanup3).toHaveBeenCalledOnce();
+    });
+
+    it('clears the disposer after dispose', () => {
+      const disposer = new Disposer();
+      disposer.add(() => {});
+      disposer.add(() => {});
+
+      expect(disposer.size).toBe(2);
+      disposer.dispose();
+      expect(disposer.size).toBe(0);
+    });
+
+    it('can be called multiple times safely', () => {
+      const disposer = new Disposer();
+      const cleanup = vi.fn();
+
+      disposer.add(cleanup);
+      disposer.dispose();
+      disposer.dispose();
+
+      expect(cleanup).toHaveBeenCalledOnce();
+    });
+
+    it('allows adding new cleanups after dispose', () => {
+      const disposer = new Disposer();
+      const cleanup1 = vi.fn();
+      const cleanup2 = vi.fn();
+
+      disposer.add(cleanup1);
+      disposer.dispose();
+
+      disposer.add(cleanup2);
+      disposer.dispose();
+
+      expect(cleanup1).toHaveBeenCalledOnce();
+      expect(cleanup2).toHaveBeenCalledOnce();
+    });
+  });
+
+  describe('disposeAsync', () => {
+    it('calls all cleanup functions', async () => {
+      const disposer = new Disposer();
+      const cleanup1 = vi.fn();
+      const cleanup2 = vi.fn();
+
+      disposer.add(cleanup1);
+      disposer.add(cleanup2);
+
+      await disposer.disposeAsync();
+
+      expect(cleanup1).toHaveBeenCalledOnce();
+      expect(cleanup2).toHaveBeenCalledOnce();
+    });
+
+    it('awaits async cleanup functions', async () => {
+      const disposer = new Disposer();
+      const order: string[] = [];
+
+      disposer.add(async () => {
+        await Promise.resolve();
+        order.push('async1');
+      });
+
+      disposer.add(() => {
+        order.push('sync');
+      });
+
+      disposer.add(async () => {
+        await Promise.resolve();
+        order.push('async2');
+      });
+
+      await disposer.disposeAsync();
+
+      expect(order).toContain('async1');
+      expect(order).toContain('sync');
+      expect(order).toContain('async2');
+    });
+
+    it('clears the disposer after disposeAsync', async () => {
+      const disposer = new Disposer();
+      disposer.add(async () => {});
+
+      expect(disposer.size).toBe(1);
+      await disposer.disposeAsync();
+      expect(disposer.size).toBe(0);
+    });
+
+    it('handles mixed sync and async cleanups', async () => {
+      const disposer = new Disposer();
+      const results: number[] = [];
+
+      disposer.add(() => {
+        results.push(1);
+      });
+      disposer.add(async () => {
+        await new Promise(r => setTimeout(r, 10));
+        results.push(2);
+      });
+      disposer.add(() => {
+        results.push(3);
+      });
+
+      await disposer.disposeAsync();
+
+      expect(results).toHaveLength(3);
+      expect(results).toContain(1);
+      expect(results).toContain(2);
+      expect(results).toContain(3);
+    });
+  });
+
+  describe('integration', () => {
+    it('works with real-world cleanup patterns', () => {
+      const disposer = new Disposer();
+
+      // Simulating event listener cleanup
+      const listeners = new Map<string, () => void>();
+      const addEventListener = (type: string, handler: () => void) => {
+        listeners.set(type, handler);
+        return () => {
+          listeners.delete(type);
+        };
+      };
+
+      disposer.add(addEventListener('click', () => {}));
+      disposer.add(addEventListener('keydown', () => {}));
+
+      expect(listeners.size).toBe(2);
+      disposer.dispose();
+      expect(listeners.size).toBe(0);
+    });
+
+    it('works with timer cleanup patterns', () => {
+      vi.useFakeTimers();
+
+      const disposer = new Disposer();
+      let timerFired = false;
+
+      const id = setTimeout(() => {
+        timerFired = true;
+      }, 1000);
+
+      disposer.add(() => clearTimeout(id));
+
+      disposer.dispose();
+      vi.advanceTimersByTime(2000);
+
+      expect(timerFired).toBe(false);
+
+      vi.useRealTimers();
+    });
+  });
+});
diff --git a/packages/utils/src/disposer.ts b/packages/utils/src/disposer.ts
new file mode 100644
index 00000000..390a5baa
--- /dev/null
+++ b/packages/utils/src/disposer.ts
@@ -0,0 +1,62 @@
+/**
+ * A cleanup function that may be sync or async.
+ */
+export type CleanupFn = () => void | Promise<void>;
+
+/**
+ * A collector for cleanup functions.
+ *
+ * Allows registering multiple cleanup functions and disposing them all at once.
+ *
+ * @example
+ * ```ts
+ * const disposer = new Disposer();
+ *
+ * disposer.add(listen(video, 'play', handlePlay));
+ * disposer.add(listen(video, 'pause', handlePause));
+ * disposer.add(animationFrame(render));
+ *
+ * // Later, clean up everything at once
+ * disposer.dispose();
+ * // or for async cleanups:
+ * await disposer.disposeAsync();
+ * ```
+ */
+export class Disposer {
+  #cleanups = new Set<CleanupFn>();
+
+  /**
+   * Number of registered cleanup functions.
+   */
+  get size(): number {
+    return this.#cleanups.size;
+  }
+
+  /**
+   * Add a cleanup function to the collection.
+   */
+  add(cleanup: CleanupFn): void {
+    this.#cleanups.add(cleanup);
+  }
+
+  /**
+   * Run all cleanup functions synchronously.
+   *
+   * Note: If any cleanup functions return promises, they will not be awaited.
+   * Use `disposeAsync()` if you have async cleanup functions.
+   */
+  dispose(): void {
+    for (const cleanup of this.#cleanups) {
+      cleanup();
+    }
+    this.#cleanups.clear();
+  }
+
+  /**
+   * Run all cleanup functions, awaiting any promises.
+   */
+  async disposeAsync(): Promise<void> {
+    await Promise.all([...this.#cleanups].map(cleanup => cleanup()));
+    this.#cleanups.clear();
+  }
+}
diff --git a/packages/utils/src/dom/animation-frame.test.ts b/packages/utils/src/dom/animation-frame.test.ts
new file mode 100644
index 00000000..f1c0e6d6
--- /dev/null
+++ b/packages/utils/src/dom/animation-frame.test.ts
@@ -0,0 +1,83 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { animationFrame } from './animation-frame';
+
+describe('animationFrame', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('calls the callback on next animation frame', async () => {
+    const callback = vi.fn();
+
+    animationFrame(callback);
+
+    expect(callback).not.toHaveBeenCalled();
+
+    await vi.runAllTimersAsync();
+
+    expect(callback).toHaveBeenCalledOnce();
+  });
+
+  it('passes timestamp to callback', async () => {
+    const callback = vi.fn();
+
+    animationFrame(callback);
+    await vi.runAllTimersAsync();
+
+    expect(callback).toHaveBeenCalledWith(expect.any(Number));
+  });
+
+  it('returns a cleanup function', () => {
+    const callback = vi.fn();
+
+    const cancel = animationFrame(callback);
+
+    expect(cancel).toBeTypeOf('function');
+  });
+
+  it('cancel prevents callback from being called', async () => {
+    const callback = vi.fn();
+
+    const cancel = animationFrame(callback);
+    cancel();
+
+    await vi.runAllTimersAsync();
+
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it('cancel can be called multiple times safely', async () => {
+    const callback = vi.fn();
+
+    const cancel = animationFrame(callback);
+    cancel();
+    cancel();
+    cancel();
+
+    await vi.runAllTimersAsync();
+
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it('allows multiple independent animation frames', async () => {
+    const callback1 = vi.fn();
+    const callback2 = vi.fn();
+    const callback3 = vi.fn();
+
+    animationFrame(callback1);
+    animationFrame(callback2);
+    const cancel3 = animationFrame(callback3);
+
+    cancel3();
+    await vi.runAllTimersAsync();
+
+    expect(callback1).toHaveBeenCalledOnce();
+    expect(callback2).toHaveBeenCalledOnce();
+    expect(callback3).not.toHaveBeenCalled();
+  });
+});
diff --git a/packages/utils/src/dom/animation-frame.ts b/packages/utils/src/dom/animation-frame.ts
new file mode 100644
index 00000000..fc2860a4
--- /dev/null
+++ b/packages/utils/src/dom/animation-frame.ts
@@ -0,0 +1,20 @@
+/**
+ * Request an animation frame and return a cleanup function to cancel it.
+ *
+ * @param callback - The callback to invoke on the next animation frame
+ * @returns A cleanup function that cancels the animation frame request
+ *
+ * @example
+ * ```ts
+ * const cancel = animationFrame((time) => {
+ *   console.log('Frame at', time);
+ * });
+ *
+ * // Later, cancel if needed
+ * cancel();
+ * ```
+ */
+export function animationFrame(callback: FrameRequestCallback): () => void {
+  const id = requestAnimationFrame(callback);
+  return () => cancelAnimationFrame(id);
+}
diff --git a/packages/utils/src/dom/event.test.ts b/packages/utils/src/dom/event.test.ts
new file mode 100644
index 00000000..5bd7328d
--- /dev/null
+++ b/packages/utils/src/dom/event.test.ts
@@ -0,0 +1,129 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { onEvent } from './event';
+
+describe('onEvent', () => {
+  it('returns a promise', () => {
+    const target = new EventTarget();
+    const promise = onEvent(target, 'click');
+
+    expect(promise).toBeInstanceOf(Promise);
+
+    // Dispatch to resolve
+    target.dispatchEvent(new Event('click'));
+  });
+
+  it('resolves with the event when it fires', async () => {
+    const target = new EventTarget();
+    const event = new Event('click');
+
+    const promise = onEvent(target, 'click');
+    target.dispatchEvent(event);
+
+    await expect(promise).resolves.toBe(event);
+  });
+
+  it('only listens for the first occurrence (once)', async () => {
+    const target = new EventTarget();
+
+    const promise = onEvent(target, 'click');
+
+    target.dispatchEvent(new Event('click'));
+    target.dispatchEvent(new Event('click'));
+
+    const result = await promise;
+    expect(result).toBeInstanceOf(Event);
+  });
+
+  it('rejects when signal is already aborted', async () => {
+    const target = new EventTarget();
+    const controller = new AbortController();
+    controller.abort();
+
+    const promise = onEvent(target, 'click', { signal: controller.signal });
+
+    await expect(promise).rejects.toThrow();
+  });
+
+  it('rejects with AbortError when signal is aborted', async () => {
+    const target = new EventTarget();
+    const controller = new AbortController();
+
+    const promise = onEvent(target, 'click', { signal: controller.signal });
+    controller.abort();
+
+    await expect(promise).rejects.toMatchObject({
+      name: 'AbortError',
+    });
+  });
+
+  it('rejects with custom abort reason', async () => {
+    const target = new EventTarget();
+    const controller = new AbortController();
+    const reason = new Error('Custom reason');
+
+    const promise = onEvent(target, 'click', { signal: controller.signal });
+    controller.abort(reason);
+
+    await expect(promise).rejects.toBe(reason);
+  });
+
+  it('cleans up abort listener when event fires', async () => {
+    const target = new EventTarget();
+    const controller = new AbortController();
+
+    const promise = onEvent(target, 'click', { signal: controller.signal });
+    target.dispatchEvent(new Event('click'));
+
+    await promise;
+
+    // Aborting after resolution should not cause issues
+    controller.abort();
+  });
+
+  it('passes options to addEventListener', async () => {
+    const target = new EventTarget();
+    const addSpy = vi.spyOn(target, 'addEventListener');
+
+    const promise = onEvent(target, 'click', { passive: true, capture: true });
+    target.dispatchEvent(new Event('click'));
+
+    await promise;
+
+    expect(addSpy).toHaveBeenCalledWith(
+      'click',
+      expect.any(Function),
+      expect.objectContaining({
+        passive: true,
+        capture: true,
+        once: true,
+      }),
+    );
+  });
+
+  it('works with HTMLMediaElement events', async () => {
+    const video = document.createElement('video');
+
+    const promise = onEvent(video, 'play');
+    video.dispatchEvent(new Event('play'));
+
+    const event = await promise;
+    expect(event.type).toBe('play');
+  });
+
+  it('works with Window events', async () => {
+    const promise = onEvent(window, 'resize');
+    window.dispatchEvent(new Event('resize'));
+
+    const event = await promise;
+    expect(event.type).toBe('resize');
+  });
+
+  it('works with Document events', async () => {
+    const promise = onEvent(document, 'visibilitychange');
+    document.dispatchEvent(new Event('visibilitychange'));
+
+    const event = await promise;
+    expect(event.type).toBe('visibilitychange');
+  });
+});
diff --git a/packages/utils/src/dom/event.ts b/packages/utils/src/dom/event.ts
new file mode 100644
index 00000000..cc8b5b0c
--- /dev/null
+++ b/packages/utils/src/dom/event.ts
@@ -0,0 +1,124 @@
+export interface OnEventOptions extends AddEventListenerOptions {
+  /**
+   * An AbortSignal to cancel waiting for the event.
+   *
+   * If aborted, the returned promise will reject with an `AbortError`.
+   */
+  signal?: AbortSignal;
+}
+
+/**
+ * Wait for an event to occur on a target.
+ *
+ * @param target - The event target (HTMLMediaElement)
+ * @param type - The event type to wait for
+ * @param options - Optional event options including AbortSignal
+ * @returns A promise that resolves with the event
+ */
+export function onEvent<K extends keyof HTMLMediaElementEventMap>(
+  target: HTMLMediaElement,
+  type: K,
+  options?: OnEventOptions,
+): Promise<HTMLMediaElementEventMap[K]>;
+
+/**
+ * Wait for an event to occur on a target.
+ *
+ * @param target - The event target (HTMLElement)
+ * @param type - The event type to wait for
+ * @param options - Optional event options including AbortSignal
+ * @returns A promise that resolves with the event
+ */
+export function onEvent<K extends keyof HTMLElementEventMap>(
+  target: HTMLElement,
+  type: K,
+  options?: OnEventOptions,
+): Promise<HTMLElementEventMap[K]>;
+
+/**
+ * Wait for an event to occur on a target.
+ *
+ * @param target - The event target (Window)
+ * @param type - The event type to wait for
+ * @param options - Optional event options including AbortSignal
+ * @returns A promise that resolves with the event
+ */
+export function onEvent<K extends keyof WindowEventMap>(
+  target: Window,
+  type: K,
+  options?: OnEventOptions,
+): Promise<WindowEventMap[K]>;
+
+/**
+ * Wait for an event to occur on a target.
+ *
+ * @param target - The event target (Document)
+ * @param type - The event type to wait for
+ * @param options - Optional event options including AbortSignal
+ * @returns A promise that resolves with the event
+ */
+export function onEvent<K extends keyof DocumentEventMap>(
+  target: Document,
+  type: K,
+  options?: OnEventOptions,
+): Promise<DocumentEventMap[K]>;
+
+/**
+ * Wait for an event to occur on a target.
+ *
+ * @param target - The event target
+ * @param type - The event type to wait for
+ * @param options - Optional event options including AbortSignal
+ * @returns A promise that resolves with the event
+ *
+ * @example
+ * ```ts
+ * // Wait for video to be seeked
+ * const event = await onEvent(video, 'seeked');
+ * ```
+ *
+ * @example
+ * ```ts
+ * // With AbortSignal for cancellation
+ * const controller = new AbortController();
+ *
+ * try {
+ *   const event = await onEvent(video, 'seeked', { signal: controller.signal });
+ * } catch (e) {
+ *   if (e.name === 'AbortError') {
+ *     console.log('Cancelled waiting for event');
+ *   }
+ * }
+ *
+ * // Cancel from elsewhere
+ * controller.abort();
+ * ```
+ */
+export function onEvent(target: EventTarget, type: string, options?: OnEventOptions): Promise<Event>;
+
+export function onEvent(target: EventTarget, type: string, options?: OnEventOptions): Promise<Event> {
+  return new Promise((resolve, reject) => {
+    const handleAbort = () => {
+      reject(options?.signal?.reason ?? new DOMException('Aborted', 'AbortError'));
+    };
+
+    // If already aborted, reject immediately
+    if (options?.signal?.aborted) {
+      handleAbort();
+      return;
+    }
+
+    // Listen for abort
+    options?.signal?.addEventListener('abort', handleAbort, { once: true });
+
+    // Listen for the event
+    target.addEventListener(
+      type,
+      (event) => {
+        options?.signal?.removeEventListener('abort', handleAbort);
+        resolve(event);
+      },
+      { ...options, once: true },
+    );
+  });
+}
diff --git a/packages/utils/src/dom/idle-callback.test.ts b/packages/utils/src/dom/idle-callback.test.ts
new file mode 100644
index 00000000..26737929
--- /dev/null
+++ b/packages/utils/src/dom/idle-callback.test.ts
@@ -0,0 +1,97 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { idleCallback } from './idle-callback';
+
+describe('idleCallback', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('calls the callback when idle', async () => {
+    const callback = vi.fn();
+
+    idleCallback(callback);
+
+    expect(callback).not.toHaveBeenCalled();
+
+    await vi.runAllTimersAsync();
+
+    expect(callback).toHaveBeenCalledOnce();
+  });
+
+  it('passes deadline object to callback', async () => {
+    const callback = vi.fn();
+
+    idleCallback(callback);
+    await vi.runAllTimersAsync();
+
+    expect(callback).toHaveBeenCalledWith(
+      expect.objectContaining({
+        didTimeout: expect.any(Boolean),
+        timeRemaining: expect.any(Function),
+      }),
+    );
+  });
+
+  it('returns a cleanup function', () => {
+    const callback = vi.fn();
+
+    const cancel = idleCallback(callback);
+
+    expect(cancel).toBeTypeOf('function');
+  });
+
+  it('cancel prevents callback from being called', async () => {
+    const callback = vi.fn();
+
+    const cancel = idleCallback(callback);
+    cancel();
+
+    await vi.runAllTimersAsync();
+
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it('cancel can be called multiple times safely', async () => {
+    const callback = vi.fn();
+
+    const cancel = idleCallback(callback);
+    cancel();
+    cancel();
+    cancel();
+
+    await vi.runAllTimersAsync();
+
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it('allows multiple independent idle callbacks', async () => {
+    const callback1 = vi.fn();
+    const callback2 = vi.fn();
+    const callback3 = vi.fn();
+
+    idleCallback(callback1);
+    idleCallback(callback2);
+    const cancel3 = idleCallback(callback3);
+
+    cancel3();
+    await vi.runAllTimersAsync();
+
+    expect(callback1).toHaveBeenCalledOnce();
+    expect(callback2).toHaveBeenCalledOnce();
+    expect(callback3).not.toHaveBeenCalled();
+  });
+
+  it('accepts options parameter', async () => {
+    const callback = vi.fn();
+
+    idleCallback(callback, { timeout: 1000 });
+    await vi.runAllTimersAsync();
+
+    expect(callback).toHaveBeenCalledOnce();
+  });
+});
diff --git a/packages/utils/src/dom/idle-callback.ts b/packages/utils/src/dom/idle-callback.ts
new file mode 100644
index 00000000..60bed0b9
--- /dev/null
+++ b/packages/utils/src/dom/idle-callback.ts
@@ -0,0 +1,44 @@
+import { supportsIdleCallback } from './supports';
+
+/**
+ * Request an idle callback and return a cleanup function to cancel it.
+ *
+ * Falls back to `setTimeout` with 1ms delay in environments that don't
+ * support `requestIdleCallback` (e.g., Safari).
+ *
+ * @param callback - The callback to invoke when the browser is idle
+ * @param options - Optional idle callback options (timeout, etc.)
+ * @returns A cleanup function that cancels the idle callback request
+ *
+ * @example
+ * ```ts
+ * const cancel = idleCallback((deadline) => {
+ *   console.log('Time remaining:', deadline.timeRemaining());
+ * });
+ *
+ * // Later, cancel if needed
+ * cancel();
+ * ```
+ *
+ * @example
+ * ```ts
+ * // With timeout option
+ * const cancel = idleCallback(doWork, { timeout: 1000 });
+ * ```
+ */
+export function idleCallback(callback: IdleRequestCallback, options?: IdleRequestOptions): () => void {
+  if (supportsIdleCallback()) {
+    const id = requestIdleCallback(callback, options);
+    return () => cancelIdleCallback(id);
+  }
+
+  // Fallback for Safari and other browsers without requestIdleCallback
+  const id = setTimeout(() => {
+    callback({
+      didTimeout: false,
+      timeRemaining: () => 50, // Approximate idle time
+    });
+  }, 1);
+
+  return () => clearTimeout(id);
+}
diff --git a/packages/utils/src/dom/index.ts b/packages/utils/src/dom/index.ts
index e69de29b..46e68ae2 100644
--- a/packages/utils/src/dom/index.ts
+++ b/packages/utils/src/dom/index.ts
@@ -0,0 +1,5 @@
+export { animationFrame } from './animation-frame';
+export { onEvent, type OnEventOptions } from './event';
+export { idleCallback } from './idle-callback';
+export { listen } from './listen';
+export { supportsAnimationFrame, supportsIdleCallback } from './supports';
diff --git a/packages/utils/src/dom/listen.test.ts b/packages/utils/src/dom/listen.test.ts
new file mode 100644
index 00000000..4f7321e8
--- /dev/null
+++ b/packages/utils/src/dom/listen.test.ts
@@ -0,0 +1,121 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { listen } from './listen';
+
+describe('listen', () => {
+  it('adds an event listener', () => {
+    const target = new EventTarget();
+    const handler = vi.fn();
+
+    listen(target, 'click', handler);
+    target.dispatchEvent(new Event('click'));
+
+    expect(handler).toHaveBeenCalledOnce();
+  });
+
+  it('returns a cleanup function', () => {
+    const target = new EventTarget();
+    const handler = vi.fn();
+
+    const cleanup = listen(target, 'click', handler);
+
+    expect(cleanup).toBeTypeOf('function');
+  });
+
+  it('cleanup removes the listener', () => {
+    const target = new EventTarget();
+    const handler = vi.fn();
+
+    const cleanup = listen(target, 'click', handler);
+    cleanup();
+    target.dispatchEvent(new Event('click'));
+
+    expect(handler).not.toHaveBeenCalled();
+  });
+
+  it('passes options to addEventListener', () => {
+    const target = new EventTarget();
+    const handler = vi.fn();
+
+    listen(target, 'click', handler, { once: true });
+
+    target.dispatchEvent(new Event('click'));
+    target.dispatchEvent(new Event('click'));
+
+    expect(handler).toHaveBeenCalledOnce();
+  });
+
+  it('passes capture option correctly', () => {
+    const parent = document.createElement('div');
+    const child = document.createElement('span');
+    parent.appendChild(child);
+
+    const order: string[] = [];
+
+    listen(parent, 'click', () => order.push('parent-capture'), { capture: true });
+    listen(child, 'click', () => order.push('child'));
+    listen(parent, 'click', () => order.push('parent-bubble'));
+
+    child.dispatchEvent(new Event('click', { bubbles: true }));
+
+    expect(order).toEqual(['parent-capture', 'child', 'parent-bubble']);
+  });
+
+  it('cleanup works with options', () => {
+    const target = new EventTarget();
+    const handler = vi.fn();
+
+    const cleanup = listen(target, 'click', handler, { passive: true });
+    cleanup();
+    target.dispatchEvent(new Event('click'));
+
+    expect(handler).not.toHaveBeenCalled();
+  });
+
+  it('works with AbortSignal in options', () => {
+    const target = new EventTarget();
+    const handler = vi.fn();
+    const controller = new AbortController();
+
+    listen(target, 'click', handler, { signal: controller.signal });
+
+    target.dispatchEvent(new Event('click'));
+    expect(handler).toHaveBeenCalledOnce();
+
+    controller.abort();
+    target.dispatchEvent(new Event('click'));
+    expect(handler).toHaveBeenCalledOnce();
+  });
+
+  it('provides correct event type for typed targets', () => {
+    const video = document.createElement('video');
+    const handler = vi.fn((event: Event) => {
+      expect(event.type).toBe('play');
+    });
+
+    listen(video, 'play', handler);
+    video.dispatchEvent(new Event('play'));
+
+    expect(handler).toHaveBeenCalledOnce();
+  });
+
+  it('works with Window', () => {
+    const handler = vi.fn();
+    const cleanup = listen(window, 'resize', handler);
+
+    window.dispatchEvent(new Event('resize'));
+    expect(handler).toHaveBeenCalledOnce();
+
+    cleanup();
+  });
+
+  it('works with Document', () => {
+    const handler = vi.fn();
+    const cleanup = listen(document, 'visibilitychange', handler);
+
+    document.dispatchEvent(new Event('visibilitychange'));
+    expect(handler).toHaveBeenCalledOnce();
+
+    cleanup();
+  });
+});
diff --git a/packages/utils/src/dom/listen.ts b/packages/utils/src/dom/listen.ts
new file mode 100644
index 00000000..ee49a66c
--- /dev/null
+++ b/packages/utils/src/dom/listen.ts
@@ -0,0 +1,113 @@
+/**
+ * Add an event listener and return a cleanup function to remove it.
+ *
+ * @param target - The event target (HTMLMediaElement)
+ * @param type - The event type
+ * @param listener - The event listener
+ * @param options - Optional event listener options
+ * @returns A cleanup function that removes the event listener
+ */
+export function listen<K extends keyof HTMLMediaElementEventMap>(
+  target: HTMLMediaElement,
+  type: K,
+  listener: (event: HTMLMediaElementEventMap[K]) => void,
+  options?: AddEventListenerOptions,
+): () => void;
+
+/**
+ * Add an event listener and return a cleanup function to remove it.
+ *
+ * @param target - The event target (HTMLElement)
+ * @param type - The event type
+ * @param listener - The event listener
+ * @param options - Optional event listener options
+ * @returns A cleanup function that removes the event listener
+ */
+export function listen<K extends keyof HTMLElementEventMap>(
+  target: HTMLElement,
+  type: K,
+  listener: (event: HTMLElementEventMap[K]) => void,
+  options?: AddEventListenerOptions,
+): () => void;
+
+/**
+ * Add an event listener and return a cleanup function to remove it.
+ *
+ * @param target - The event target (Window)
+ * @param type - The event type
+ * @param listener - The event listener
+ * @param options - Optional event listener options
+ * @returns A cleanup function that removes the event listener
+ */
+export function listen<K extends keyof WindowEventMap>(
+  target: Window,
+  type: K,
+  listener: (event: WindowEventMap[K]) => void,
+  options?: AddEventListenerOptions,
+): () => void;
+
+/**
+ * Add an event listener and return a cleanup function to remove it.
+ *
+ * @param target - The event target (Document)
+ * @param type - The event type
+ * @param listener - The event listener
+ * @param options - Optional event listener options
+ * @returns A cleanup function that removes the event listener
+ */
+export function listen<K extends keyof DocumentEventMap>(
+  target: Document,
+  type: K,
+  listener: (event: DocumentEventMap[K]) => void,
+  options?: AddEventListenerOptions,
+): () => void;
+
+/**
+ * Add an event listener and return a cleanup function to remove it.
+ *
+ * @param target - The event target
+ * @param type - The event type
+ * @param listener - The event listener
+ * @param options - Optional event listener options
+ * @returns A cleanup function that removes the event listener
+ *
+ * @example
+ * ```ts
+ * const cleanup = listen(video, 'play', () => console.log('playing'));
+ *
+ * // Later, remove the listener
+ * cleanup();
+ * ```
+ *
+ * @example
+ * ```ts
+ * // With options
+ * const cleanup = listen(video, 'play', handler, { once: true, passive: true });
+ * ```
+ *
+ * @example
+ * ```ts
+ * // With AbortSignal (native browser support)
+ * const controller = new AbortController();
+ * listen(video, 'play', handler, { signal: controller.signal });
+ *
+ * // Later, abort to remove the listener
+ * controller.abort();
+ * ```
+ */
+export function listen(
+  target: EventTarget,
+  type: string,
+  listener: EventListenerOrEventListenerObject,
+  options?: AddEventListenerOptions,
+): () => void;
+
+export function listen(
+  target: EventTarget,
+  type: string,
+  listener: EventListenerOrEventListenerObject,
+  options?: AddEventListenerOptions,
+): () => void {
+  target.addEventListener(type, listener, options);
+  return () => target.removeEventListener(type, listener, options);
+}
diff --git a/packages/utils/src/dom/supports.test.ts b/packages/utils/src/dom/supports.test.ts
new file mode 100644
index 00000000..a0f7ca58
--- /dev/null
+++ b/packages/utils/src/dom/supports.test.ts
@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'vitest';
+
+import { supportsAnimationFrame, supportsIdleCallback } from './supports';
+
+describe('supports', () => {
+  describe('supportsAnimationFrame', () => {
+    it('returns a boolean', () => {
+      const result = supportsAnimationFrame();
+      expect(typeof result).toBe('boolean');
+    });
+
+    it('returns true in browser environment', () => {
+      expect(supportsAnimationFrame()).toBe(true);
+    });
+  });
+
+  describe('supportsIdleCallback', () => {
+    it('returns a boolean', () => {
+      const result = supportsIdleCallback();
+      // Note: requestIdleCallback may or may not be available in jsdom
+      // depending on the version, so we just check it returns a boolean
+      expect(typeof result).toBe('boolean');
+    });
+  });
+});
diff --git a/packages/utils/src/dom/supports.ts b/packages/utils/src/dom/supports.ts
new file mode 100644
index 00000000..62848a44
--- /dev/null
+++ b/packages/utils/src/dom/supports.ts
@@ -0,0 +1,17 @@
+/**
+ * Check if `requestIdleCallback` is supported.
+ *
+ * @returns `true` if `requestIdleCallback` is available
+ */
+export function supportsIdleCallback(): boolean {
+  return typeof requestIdleCallback === 'function';
+}
+
+/**
+ * Check if `requestAnimationFrame` is supported.
+ *
+ * @returns `true` if `requestAnimationFrame` is available
+ */
+export function supportsAnimationFrame(): boolean {
+  return typeof requestAnimationFrame === 'function';
+}
diff --git a/packages/utils/src/event-like.test.ts b/packages/utils/src/event-like.test.ts
new file mode 100644
index 00000000..e84e8a15
--- /dev/null
+++ b/packages/utils/src/event-like.test.ts
@@ -0,0 +1,77 @@
+import { describe, expect, it } from 'vitest';
+
+import { isEventLike } from './event-like';
+
+describe('event-like', () => {
+  describe('isEventLike', () => {
+    it('returns true for objects with type and timeStamp', () => {
+      expect(isEventLike({ type: 'click', timeStamp: 123 })).toBe(true);
+      expect(isEventLike({ type: 'play', timeStamp: 0 })).toBe(true);
+      expect(isEventLike({ type: '', timeStamp: Date.now() })).toBe(true);
+    });
+
+    it('returns true for objects with additional properties', () => {
+      expect(
+        isEventLike({
+          type: 'click',
+          timeStamp: 123,
+          isTrusted: true,
+          target: null,
+        }),
+      ).toBe(true);
+    });
+
+    it('returns true for DOM Events', () => {
+      const event = new Event('click');
+      expect(isEventLike(event)).toBe(true);
+    });
+
+    it('returns true for CustomEvent', () => {
+      const event = new CustomEvent('custom', { detail: { foo: 'bar' } });
+      expect(isEventLike(event)).toBe(true);
+    });
+
+    it('returns false for missing type', () => {
+      expect(isEventLike({ timeStamp: 123 })).toBe(false);
+    });
+
+    it('returns false for missing timeStamp', () => {
+      expect(isEventLike({ type: 'click' })).toBe(false);
+    });
+
+    it('returns false for non-string type', () => {
+      expect(isEventLike({ type: 123, timeStamp: 123 })).toBe(false);
+      expect(isEventLike({ type: null, timeStamp: 123 })).toBe(false);
+      expect(isEventLike({ type: undefined, timeStamp: 123 })).toBe(false);
+    });
+
+    it('returns false for non-number timeStamp', () => {
+      expect(isEventLike({ type: 'click', timeStamp: '123' })).toBe(false);
+      expect(isEventLike({ type: 'click', timeStamp: null })).toBe(false);
+      expect(isEventLike({ type: 'click', timeStamp: undefined })).toBe(false);
+    });
+
+    it('returns false for null', () => {
+      expect(isEventLike(null)).toBe(false);
+    });
+
+    it('returns false for undefined', () => {
+      expect(isEventLike(undefined)).toBe(false);
+    });
+
+    it('returns false for primitives', () => {
+      expect(isEventLike('event')).toBe(false);
+      expect(isEventLike(123)).toBe(false);
+      expect(isEventLike(true)).toBe(false);
+    });
+
+    it('returns false for arrays', () => {
+      expect(isEventLike([])).toBe(false);
+      expect(isEventLike(['click', 123])).toBe(false);
+    });
+
+    it('returns false for functions', () => {
+      expect(isEventLike(() => {})).toBe(false);
+    });
+  });
+});
diff --git a/packages/utils/src/event-like.ts b/packages/utils/src/event-like.ts
new file mode 100644
index 00000000..321181b1
--- /dev/null
+++ b/packages/utils/src/event-like.ts
@@ -0,0 +1,22 @@
+import { isNumber, isObject, isString } from './predicate';
+
+export interface EventLike {
+  type: string;
+  timeStamp: number;
+  isTrusted?: boolean;
+}
+
+/**
+ * Check if a value looks like an Event (has type and timeStamp).
+ *
+ * Works with DOM Events, React SyntheticEvents, and RN events.
+ */
+export function isEventLike(value: unknown): value is EventLike {
+  return (
+    isObject(value)
+    && 'type' in value
+    && isString(value.type)
+    && 'timeStamp' in value
+    && isNumber(value.timeStamp)
+  );
+}
diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
index e69de29b..72202918 100644
--- a/packages/utils/src/index.ts
+++ b/packages/utils/src/index.ts
@@ -0,0 +1,3 @@
+export * from './disposer';
+export * from './event-like';
+export * from './predicate';
diff --git a/packages/utils/src/predicate.test.ts b/packages/utils/src/predicate.test.ts
new file mode 100644
index 00000000..de86593f
--- /dev/null
+++ b/packages/utils/src/predicate.test.ts
@@ -0,0 +1,203 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  isAbortError,
+  isBoolean,
+  isFunction,
+  isNil,
+  isNull,
+  isNumber,
+  isObject,
+  isPromise,
+  isString,
+  isUndefined,
+} from './predicate';
+
+describe('predicate', () => {
+  describe('isString', () => {
+    it('returns true for strings', () => {
+      expect(isString('')).toBe(true);
+      expect(isString('hello')).toBe(true);
+      expect(isString('123')).toBe(true);
+    });
+
+    it('returns false for non-strings', () => {
+      expect(isString(123)).toBe(false);
+      expect(isString(null)).toBe(false);
+      expect(isString(undefined)).toBe(false);
+      expect(isString({})).toBe(false);
+      expect(isString([])).toBe(false);
+      expect(isString(true)).toBe(false);
+    });
+  });
+
+  describe('isNumber', () => {
+    it('returns true for numbers', () => {
+      expect(isNumber(0)).toBe(true);
+      expect(isNumber(123)).toBe(true);
+      expect(isNumber(-1)).toBe(true);
+      expect(isNumber(3.14)).toBe(true);
+      expect(isNumber(Number.NaN)).toBe(true);
+      expect(isNumber(Infinity)).toBe(true);
+    });
+
+    it('returns false for non-numbers', () => {
+      expect(isNumber('123')).toBe(false);
+      expect(isNumber(null)).toBe(false);
+      expect(isNumber(undefined)).toBe(false);
+      expect(isNumber({})).toBe(false);
+      expect(isNumber([])).toBe(false);
+      expect(isNumber(true)).toBe(false);
+    });
+  });
+
+  describe('isBoolean', () => {
+    it('returns true for booleans', () => {
+      expect(isBoolean(true)).toBe(true);
+      expect(isBoolean(false)).toBe(true);
+    });
+
+    it('returns false for non-booleans', () => {
+      expect(isBoolean(0)).toBe(false);
+      expect(isBoolean(1)).toBe(false);
+      expect(isBoolean('true')).toBe(false);
+      expect(isBoolean(null)).toBe(false);
+      expect(isBoolean(undefined)).toBe(false);
+      expect(isBoolean({})).toBe(false);
+    });
+  });
+
+  describe('isFunction', () => {
+    it('returns true for functions', () => {
+      expect(isFunction(() => {})).toBe(true);
+      expect(isFunction(() => {})).toBe(true);
+      expect(isFunction(async () => {})).toBe(true);
+      expect(isFunction(class {})).toBe(true);
+      expect(isFunction(Array.isArray)).toBe(true);
+    });
+
+    it('returns false for non-functions', () => {
+      expect(isFunction({})).toBe(false);
+      expect(isFunction([])).toBe(false);
+      expect(isFunction('function')).toBe(false);
+      expect(isFunction(null)).toBe(false);
+      expect(isFunction(undefined)).toBe(false);
+    });
+  });
+
+  describe('isNull', () => {
+    it('returns true for null', () => {
+      expect(isNull(null)).toBe(true);
+    });
+
+    it('returns false for non-null', () => {
+      expect(isNull(undefined)).toBe(false);
+      expect(isNull(0)).toBe(false);
+      expect(isNull('')).toBe(false);
+      expect(isNull(false)).toBe(false);
+      expect(isNull({})).toBe(false);
+    });
+  });
+
+  describe('isUndefined', () => {
+    it('returns true for undefined', () => {
+      expect(isUndefined(undefined)).toBe(true);
+      expect(isUndefined(void 0)).toBe(true);
+    });
+
+    it('returns false for non-undefined', () => {
+      expect(isUndefined(null)).toBe(false);
+      expect(isUndefined(0)).toBe(false);
+      expect(isUndefined('')).toBe(false);
+      expect(isUndefined(false)).toBe(false);
+      expect(isUndefined({})).toBe(false);
+    });
+  });
+
+  describe('isNil', () => {
+    it('returns true for null and undefined', () => {
+      expect(isNil(null)).toBe(true);
+      expect(isNil(undefined)).toBe(true);
+    });
+
+    it('returns false for non-nil values', () => {
+      expect(isNil(0)).toBe(false);
+      expect(isNil('')).toBe(false);
+      expect(isNil(false)).toBe(false);
+      expect(isNil({})).toBe(false);
+      expect(isNil([])).toBe(false);
+      expect(isNil(Number.NaN)).toBe(false);
+    });
+  });
+
+  describe('isPromise', () => {
+    it('returns true for promises', () => {
+      expect(isPromise(Promise.resolve())).toBe(true);
+      // eslint-disable-next-line prefer-promise-reject-errors
+      expect(isPromise(Promise.reject().catch(() => {}))).toBe(true);
+      expect(isPromise(new Promise(() => {}))).toBe(true);
+    });
+
+    it('returns false for non-promises', () => {
+      expect(isPromise({})).toBe(false);
+      expect(isPromise({ then: () => {} })).toBe(false); // thenable but not Promise
+      expect(isPromise(null)).toBe(false);
+      expect(isPromise(undefined)).toBe(false);
+      expect(isPromise(() => {})).toBe(false);
+    });
+  });
+
+  describe('isObject', () => {
+    it('returns true for objects', () => {
+      expect(isObject({})).toBe(true);
+      expect(isObject([])).toBe(true);
+      expect(isObject(new Date())).toBe(true);
+      expect(isObject(/regex/)).toBe(true);
+      expect(isObject(new Map())).toBe(true);
+      expect(isObject(new Set())).toBe(true);
+    });
+
+    it('returns false for null', () => {
+      expect(isObject(null)).toBe(false);
+    });
+
+    it('returns false for primitives', () => {
+      expect(isObject(undefined)).toBe(false);
+      expect(isObject('string')).toBe(false);
+      expect(isObject(123)).toBe(false);
+      expect(isObject(true)).toBe(false);
+      // eslint-disable-next-line symbol-description
+      expect(isObject(Symbol())).toBe(false);
+    });
+
+    it('returns false for functions', () => {
+      expect(isObject(() => {})).toBe(false);
+    });
+  });
+
+  describe('isAbortError', () => {
+    it('returns true for AbortError', () => {
+      const error = new DOMException('Aborted', 'AbortError');
+      expect(isAbortError(error)).toBe(true);
+    });
+
+    it('returns true for custom AbortError', () => {
+      const error = new Error('Aborted');
+      error.name = 'AbortError';
+      expect(isAbortError(error)).toBe(true);
+    });
+
+    it('returns false for other errors', () => {
+      expect(isAbortError(new Error('test'))).toBe(false);
+      expect(isAbortError(new TypeError('test'))).toBe(false);
+      expect(isAbortError(new RangeError('test'))).toBe(false);
+    });
+
+    it('returns false for non-errors', () => {
+      expect(isAbortError(null)).toBe(false);
+      expect(isAbortError(undefined)).toBe(false);
+      expect(isAbortError('AbortError')).toBe(false);
+      expect(isAbortError({ name: 'AbortError' })).toBe(false);
+    });
+  });
+});
diff --git a/packages/utils/src/predicate.ts b/packages/utils/src/predicate.ts
new file mode 100644
index 00000000..622c2bdc
--- /dev/null
+++ b/packages/utils/src/predicate.ts
@@ -0,0 +1,48 @@
+export function isString(value: unknown): value is string {
+  return typeof value === 'string';
+}
+
+export function isNumber(value: unknown): value is number {
+  return typeof value === 'number';
+}
+
+export function isBoolean(value: unknown): value is boolean {
+  return typeof value === 'boolean';
+}
+
+export function isFunction(value: unknown): value is (...args: any[]) => any {
+  return typeof value === 'function';
+}
+
+export function isNull(value: unknown): value is null {
+  return value === null;
+}
+
+export function isUndefined(value: unknown): value is undefined {
+  return typeof value === 'undefined';
+}
+
+export function isNil(value: unknown): value is null | undefined {
+  return value == null;
+}
+
+export function isPromise(value: unknown): value is Promise<any> {
+  return value instanceof Promise;
+}
+
+/**
+ * Check if a value is an object, excluding null.
+ */
+export function isObject(value: unknown): value is object {
+  return value !== null && typeof value === 'object';
+}
+
+/**
+ * Check if a value is an AbortError.
+ */
+export function isAbortError(value: unknown): value is Error {
+  return (
+    value instanceof Error
+    && value.name === 'AbortError'
+  );
+}
diff --git a/packages/utils/vitest.config.ts b/packages/utils/vitest.config.ts
new file mode 100644
index 00000000..eb949ca8
--- /dev/null
+++ b/packages/utils/vitest.config.ts
@@ -0,0 +1,24 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    projects: [
+      {
+        extends: true,
+        test: {
+          name: 'utils',
+          include: ['src/**/*.test.ts'],
+          exclude: ['src/dom/**/*.test.ts'],
+        },
+      },
+      {
+        extends: true,
+        test: {
+          name: 'utils/dom',
+          include: ['src/dom/**/*.test.ts'],
+          environment: 'jsdom',
+        },
+      },
+    ],
+  },
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 83080b1d..a8ed71d1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -77,6 +77,9 @@ importers:
       simple-git-hooks:
         specifier: ^2.13.1
         version: 2.13.1
+      tsx:
+        specifier: ^4.21.0
+        version: 4.21.0
       turbo:
         specifier: ^2.5.8
         version: 2.6.3
@@ -95,7 +98,7 @@ importers:
         version: 5.9.3
       vite:
         specifier: ^7.2.4
-        version: 7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2)
+        version: 7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)
 
   examples/next:
     dependencies:
@@ -175,7 +178,7 @@ importers:
     devDependencies:
       '@tailwindcss/vite':
         specifier: ^4.1.17
-        version: 4.1.18(vite@7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2))
+        version: 4.1.18(vite@7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2))
       '@types/react':
         specifier: ^19.2.7
         version: 19.2.7
@@ -184,13 +187,13 @@ importers:
         version: 19.2.3(@types/react@19.2.7)
       '@vitejs/plugin-react':
         specifier: ^5.1.2
-        version: 5.1.2(vite@7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2))
+        version: 5.1.2(vite@7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2))
       typescript:
         specifier: ^5.9.3
         version: 5.9.3
       vite:
         specifier: ^7.2.4
-        version: 7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2)
+        version: 7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)
 
   packages/__tech-preview__/core:
     dependencies:
@@ -370,13 +373,23 @@ importers:
         version: 5.9.3
 
   packages/store:
+    dependencies:
+      '@videojs/utils':
+        specifier: workspace:*
+        version: link:../utils
     devDependencies:
+      '@lit/reactive-element':
+        specifier: ^2.1.0
+        version: 2.1.2
       tsdown:
         specifier: ^0.15.9
         version: 0.15.12(typescript@5.9.3)
       typescript:
         specifier: ^5.9.3
         version: 5.9.3
+      vitest:
+        specifier: ^3.2.4
+        version: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.3)(@vitest/ui@3.2.4)(jiti@2.6.1)(jsdom@27.3.0(postcss@8.5.6))(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)
 
   packages/utils:
     devDependencies:
@@ -386,15 +399,18 @@ importers:
       typescript:
         specifier: ^5.9.3
         version: 5.9.3
+      vitest:
+        specifier: ^3.2.4
+        version: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.3)(@vitest/ui@3.2.4)(jiti@2.6.1)(jsdom@27.3.0(postcss@8.5.6))(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)
 
   site:
     dependencies:
       '@astrojs/mdx':
         specifier: ^4.3.7
-        version: 4.3.13(astro@5.16.5(@types/node@22.19.3)(@vercel/functions@2.2.13)(jiti@2.6.1)(lightningcss@1.30.2)(rollup@4.53.3)(typescript@5.9.3)(yaml@2.8.2))
+        version: 4.3.13(astro@5.16.5(@types/node@22.19.3)(@vercel/functions@2.2.13)(jiti@2.6.1)(lightningcss@1.30.2)(rollup@4.53.3)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.2))
       '@astrojs/react':
         specifier: ^4.4.0
-        version: 4.4.2(@types/node@22.19.3)(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(jiti@2.6.1)(lightningcss@1.30.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(yaml@2.8.2)
+        version: 4.4.2(@types/node@22.19.3)(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(jiti@2.6.1)(lightningcss@1.30.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tsx@4.21.0)(yaml@2.8.2)
       '@astrojs/rss':
         specifier: ^4.0.12
         version: 4.0.14
@@ -403,7 +419,7 @@ importers:
         version: 3.6.0
       '@astrojs/vercel':
         specifier: ^8.2.9
-        version: 8.2.11(astro@5.16.5(@types/node@22.19.3)(@vercel/functions@2.2.13)(jiti@2.6.1)(lightningcss@1.30.2)(rollup@4.53.3)(typescript@5.9.3)(yaml@2.8.2))(next@16.0.10(@babel/core@7.28.5)(babel-plugin-react-compiler@1.0.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(rollup@4.53.3)
+        version: 8.2.11(astro@5.16.5(@types/node@22.19.3)(@vercel/functions@2.2.13)(jiti@2.6.1)(lightningcss@1.30.2)(rollup@4.53.3)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.2))(next@16.0.10(@babel/core@7.28.5)(babel-plugin-react-compiler@1.0.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(rollup@4.53.3)
       '@base-ui-components/react':
         specifier: 1.0.0-beta.4
         version: 1.0.0-beta.4(@types/react@19.2.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -415,7 +431,7 @@ importers:
         version: 1.4.0
       '@tailwindcss/vite':
         specifier: ^4.1.17
-        version: 4.1.18(vite@7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2))
+        version: 4.1.18(vite@7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2))
       '@videojs/html-preview':
         specifier: workspace:*
         version: link:../packages/__tech-preview__/html
@@ -424,7 +440,7 @@ importers:
         version: link:../packages/__tech-preview__/react
       astro:
         specifier: ^5.14.4
-        version: 5.16.5(@types/node@22.19.3)(@vercel/functions@2.2.13)(jiti@2.6.1)(lightningcss@1.30.2)(rollup@4.53.3)(typescript@5.9.3)(yaml@2.8.2)
+        version: 5.16.5(@types/node@22.19.3)(@vercel/functions@2.2.13)(jiti@2.6.1)(lightningcss@1.30.2)(rollup@4.53.3)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.2)
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
@@ -497,7 +513,7 @@ importers:
         version: 5.0.6
       '@vitejs/plugin-react':
         specifier: ^5.0.3
-        version: 5.1.2(vite@7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2))
+        version: 5.1.2(vite@7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2))
       '@vitest/coverage-v8':
         specifier: ^3.2.4
         version: 3.2.4(vitest@3.2.4)
@@ -518,7 +534,7 @@ importers:
         version: 7.2.2
       vitest:
         specifier: ^3.2.4
-        version: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.3)(@vitest/ui@3.2.4)(jiti@2.6.1)(jsdom@27.3.0(postcss@8.5.6))(lightningcss@1.30.2)(yaml@2.8.2)
+        version: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.3)(@vitest/ui@3.2.4)(jiti@2.6.1)(jsdom@27.3.0(postcss@8.5.6))(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)
 
 packages:
 
@@ -935,156 +951,312 @@ packages:
     cpu: [ppc64]
     os: [aix]
 
+  '@esbuild/aix-ppc64@0.27.2':
+    resolution: {integrity: sha512-GZMB+a0mOMZs4MpDbj8RJp4cw+w1WV5NYD6xzgvzUJ5Ek2jerwfO2eADyI6ExDSUED+1X8aMbegahsJi+8mgpw==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
   '@esbuild/android-arm64@0.25.12':
     resolution: {integrity: sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [android]
 
+  '@esbuild/android-arm64@0.27.2':
+    resolution: {integrity: sha512-pvz8ZZ7ot/RBphf8fv60ljmaoydPU12VuXHImtAs0XhLLw+EXBi2BLe3OYSBslR4rryHvweW5gmkKFwTiFy6KA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
   '@esbuild/android-arm@0.25.12':
     resolution: {integrity: sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [android]
 
+  '@esbuild/android-arm@0.27.2':
+    resolution: {integrity: sha512-DVNI8jlPa7Ujbr1yjU2PfUSRtAUZPG9I1RwW4F4xFB1Imiu2on0ADiI/c3td+KmDtVKNbi+nffGDQMfcIMkwIA==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
   '@esbuild/android-x64@0.25.12':
     resolution: {integrity: sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [android]
 
+  '@esbuild/android-x64@0.27.2':
+    resolution: {integrity: sha512-z8Ank4Byh4TJJOh4wpz8g2vDy75zFL0TlZlkUkEwYXuPSgX8yzep596n6mT7905kA9uHZsf/o2OJZubl2l3M7A==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
   '@esbuild/darwin-arm64@0.25.12':
     resolution: {integrity: sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [darwin]
 
+  '@esbuild/darwin-arm64@0.27.2':
+    resolution: {integrity: sha512-davCD2Zc80nzDVRwXTcQP/28fiJbcOwvdolL0sOiOsbwBa72kegmVU0Wrh1MYrbuCL98Omp5dVhQFWRKR2ZAlg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
   '@esbuild/darwin-x64@0.25.12':
     resolution: {integrity: sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [darwin]
 
+  '@esbuild/darwin-x64@0.27.2':
+    resolution: {integrity: sha512-ZxtijOmlQCBWGwbVmwOF/UCzuGIbUkqB1faQRf5akQmxRJ1ujusWsb3CVfk/9iZKr2L5SMU5wPBi1UWbvL+VQA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
   '@esbuild/freebsd-arm64@0.25.12':
     resolution: {integrity: sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [freebsd]
 
+  '@esbuild/freebsd-arm64@0.27.2':
+    resolution: {integrity: sha512-lS/9CN+rgqQ9czogxlMcBMGd+l8Q3Nj1MFQwBZJyoEKI50XGxwuzznYdwcav6lpOGv5BqaZXqvBSiB/kJ5op+g==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
   '@esbuild/freebsd-x64@0.25.12':
     resolution: {integrity: sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [freebsd]
 
+  '@esbuild/freebsd-x64@0.27.2':
+    resolution: {integrity: sha512-tAfqtNYb4YgPnJlEFu4c212HYjQWSO/w/h/lQaBK7RbwGIkBOuNKQI9tqWzx7Wtp7bTPaGC6MJvWI608P3wXYA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
   '@esbuild/linux-arm64@0.25.12':
     resolution: {integrity: sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [linux]
 
+  '@esbuild/linux-arm64@0.27.2':
+    resolution: {integrity: sha512-hYxN8pr66NsCCiRFkHUAsxylNOcAQaxSSkHMMjcpx0si13t1LHFphxJZUiGwojB1a/Hd5OiPIqDdXONia6bhTw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
   '@esbuild/linux-arm@0.25.12':
     resolution: {integrity: sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [linux]
 
+  '@esbuild/linux-arm@0.27.2':
+    resolution: {integrity: sha512-vWfq4GaIMP9AIe4yj1ZUW18RDhx6EPQKjwe7n8BbIecFtCQG4CfHGaHuh7fdfq+y3LIA2vGS/o9ZBGVxIDi9hw==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
   '@esbuild/linux-ia32@0.25.12':
     resolution: {integrity: sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [linux]
 
+  '@esbuild/linux-ia32@0.27.2':
+    resolution: {integrity: sha512-MJt5BRRSScPDwG2hLelYhAAKh9imjHK5+NE/tvnRLbIqUWa+0E9N4WNMjmp/kXXPHZGqPLxggwVhz7QP8CTR8w==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
   '@esbuild/linux-loong64@0.25.12':
     resolution: {integrity: sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==}
     engines: {node: '>=18'}
     cpu: [loong64]
     os: [linux]
 
+  '@esbuild/linux-loong64@0.27.2':
+    resolution: {integrity: sha512-lugyF1atnAT463aO6KPshVCJK5NgRnU4yb3FUumyVz+cGvZbontBgzeGFO1nF+dPueHD367a2ZXe1NtUkAjOtg==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
   '@esbuild/linux-mips64el@0.25.12':
     resolution: {integrity: sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==}
     engines: {node: '>=18'}
     cpu: [mips64el]
     os: [linux]
 
+  '@esbuild/linux-mips64el@0.27.2':
+    resolution: {integrity: sha512-nlP2I6ArEBewvJ2gjrrkESEZkB5mIoaTswuqNFRv/WYd+ATtUpe9Y09RnJvgvdag7he0OWgEZWhviS1OTOKixw==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
   '@esbuild/linux-ppc64@0.25.12':
     resolution: {integrity: sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==}
     engines: {node: '>=18'}
     cpu: [ppc64]
     os: [linux]
 
+  '@esbuild/linux-ppc64@0.27.2':
+    resolution: {integrity: sha512-C92gnpey7tUQONqg1n6dKVbx3vphKtTHJaNG2Ok9lGwbZil6DrfyecMsp9CrmXGQJmZ7iiVXvvZH6Ml5hL6XdQ==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
   '@esbuild/linux-riscv64@0.25.12':
     resolution: {integrity: sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==}
     engines: {node: '>=18'}
     cpu: [riscv64]
     os: [linux]
 
+  '@esbuild/linux-riscv64@0.27.2':
+    resolution: {integrity: sha512-B5BOmojNtUyN8AXlK0QJyvjEZkWwy/FKvakkTDCziX95AowLZKR6aCDhG7LeF7uMCXEJqwa8Bejz5LTPYm8AvA==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
   '@esbuild/linux-s390x@0.25.12':
     resolution: {integrity: sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==}
     engines: {node: '>=18'}
     cpu: [s390x]
     os: [linux]
 
+  '@esbuild/linux-s390x@0.27.2':
+    resolution: {integrity: sha512-p4bm9+wsPwup5Z8f4EpfN63qNagQ47Ua2znaqGH6bqLlmJ4bx97Y9JdqxgGZ6Y8xVTixUnEkoKSHcpRlDnNr5w==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
   '@esbuild/linux-x64@0.25.12':
     resolution: {integrity: sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [linux]
 
+  '@esbuild/linux-x64@0.27.2':
+    resolution: {integrity: sha512-uwp2Tip5aPmH+NRUwTcfLb+W32WXjpFejTIOWZFw/v7/KnpCDKG66u4DLcurQpiYTiYwQ9B7KOeMJvLCu/OvbA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
   '@esbuild/netbsd-arm64@0.25.12':
     resolution: {integrity: sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [netbsd]
 
+  '@esbuild/netbsd-arm64@0.27.2':
+    resolution: {integrity: sha512-Kj6DiBlwXrPsCRDeRvGAUb/LNrBASrfqAIok+xB0LxK8CHqxZ037viF13ugfsIpePH93mX7xfJp97cyDuTZ3cw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
   '@esbuild/netbsd-x64@0.25.12':
     resolution: {integrity: sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [netbsd]
 
+  '@esbuild/netbsd-x64@0.27.2':
+    resolution: {integrity: sha512-HwGDZ0VLVBY3Y+Nw0JexZy9o/nUAWq9MlV7cahpaXKW6TOzfVno3y3/M8Ga8u8Yr7GldLOov27xiCnqRZf0tCA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
   '@esbuild/openbsd-arm64@0.25.12':
     resolution: {integrity: sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [openbsd]
 
+  '@esbuild/openbsd-arm64@0.27.2':
+    resolution: {integrity: sha512-DNIHH2BPQ5551A7oSHD0CKbwIA/Ox7+78/AWkbS5QoRzaqlev2uFayfSxq68EkonB+IKjiuxBFoV8ESJy8bOHA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
   '@esbuild/openbsd-x64@0.25.12':
     resolution: {integrity: sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [openbsd]
 
+  '@esbuild/openbsd-x64@0.27.2':
+    resolution: {integrity: sha512-/it7w9Nb7+0KFIzjalNJVR5bOzA9Vay+yIPLVHfIQYG/j+j9VTH84aNB8ExGKPU4AzfaEvN9/V4HV+F+vo8OEg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
   '@esbuild/openharmony-arm64@0.25.12':
     resolution: {integrity: sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [openharmony]
 
+  '@esbuild/openharmony-arm64@0.27.2':
+    resolution: {integrity: sha512-LRBbCmiU51IXfeXk59csuX/aSaToeG7w48nMwA6049Y4J4+VbWALAuXcs+qcD04rHDuSCSRKdmY63sruDS5qag==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
   '@esbuild/sunos-x64@0.25.12':
     resolution: {integrity: sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [sunos]
 
+  '@esbuild/sunos-x64@0.27.2':
+    resolution: {integrity: sha512-kMtx1yqJHTmqaqHPAzKCAkDaKsffmXkPHThSfRwZGyuqyIeBvf08KSsYXl+abf5HDAPMJIPnbBfXvP2ZC2TfHg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
   '@esbuild/win32-arm64@0.25.12':
     resolution: {integrity: sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [win32]
 
+  '@esbuild/win32-arm64@0.27.2':
+    resolution: {integrity: sha512-Yaf78O/B3Kkh+nKABUF++bvJv5Ijoy9AN1ww904rOXZFLWVc5OLOfL56W+C8F9xn5JQZa3UX6m+IktJnIb1Jjg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
   '@esbuild/win32-ia32@0.25.12':
     resolution: {integrity: sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [win32]
 
+  '@esbuild/win32-ia32@0.27.2':
+    resolution: {integrity: sha512-Iuws0kxo4yusk7sw70Xa2E2imZU5HoixzxfGCdxwBdhiDgt9vX9VUCBhqcwY7/uh//78A1hMkkROMJq9l27oLQ==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
   '@esbuild/win32-x64@0.25.12':
     resolution: {integrity: sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [win32]
 
+  '@esbuild/win32-x64@0.27.2':
+    resolution: {integrity: sha512-sRdU18mcKf7F+YgheI/zGf5alZatMUTKj/jNS6l744f9u3WFu4v7twcUI9vu4mknF4Y9aDlblIie0IM+5xxaqQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
   '@eslint-community/eslint-plugin-eslint-comments@4.5.0':
     resolution: {integrity: sha512-MAhuTKlr4y/CE3WYX26raZjy+I/kS2PLKSzvfmDCGrBLTFHOYwqROZdr4XwPgXwX3K9rjzMr4pSmUWGnzsUyMg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -1422,6 +1594,12 @@ packages:
   '@kwsites/promise-deferred@1.1.1':
     resolution: {integrity: sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==}
 
+  '@lit-labs/ssr-dom-shim@1.5.0':
+    resolution: {integrity: sha512-HLomZXMmrCFHSRKESF5vklAKsDY7/fsT/ZhqCu3V0UoW/Qbv8wxmO4W9bx4KnCCF2Zak4yuk+AGraK/bPmI4kA==}
+
+  '@lit/reactive-element@2.1.2':
+    resolution: {integrity: sha512-pbCDiVMnne1lYUIaYNN5wrwQXDtHaYtg7YEFPeW+hws6U47WeFvISGUWekPGKWOP1ygrs0ef0o1VJMk1exos5A==}
+
   '@mapbox/node-pre-gyp@2.0.3':
     resolution: {integrity: sha512-uwPAhccfFJlsfCxMYTwOdVfOz3xqyj8xYL3zJj8f0pb30tLohnnFPhLuqp4/qoEz8sNxe4SESZedcBojRefIzg==}
     engines: {node: '>=18'}
@@ -3323,6 +3501,11 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
+  esbuild@0.27.2:
+    resolution: {integrity: sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   escalade@3.2.0:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
@@ -3544,6 +3727,7 @@ packages:
 
   eslint-plugin-react-refresh@0.4.25:
     resolution: {integrity: sha512-dRUD2LOdEqI4zXHqbQ442blQAzdSuShAaiSq5Vtyy6LT08YUf0oOjBDo4VPx0dCPgiPWh1WB4dtbLOd0kOlDPQ==}
+    deprecated: This version introduced false positive. This was reverted in 0.4.26
     peerDependencies:
       eslint: '>=8.40'
 
@@ -5986,6 +6170,11 @@ packages:
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
+  tsx@4.21.0:
+    resolution: {integrity: sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==}
+    engines: {node: '>=18.0.0'}
+    hasBin: true
+
   turbo-darwin-64@2.6.3:
     resolution: {integrity: sha512-BlJJDc1CQ7SK5Y5qnl7AzpkvKSnpkfPmnA+HeU/sgny3oHZckPV2776ebO2M33CYDSor7+8HQwaodY++IINhYg==}
     cpu: [x64]
@@ -6684,12 +6873,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@astrojs/mdx@4.3.13(astro@5.16.5(@types/node@22.19.3)(@vercel/functions@2.2.13)(jiti@2.6.1)(lightningcss@1.30.2)(rollup@4.53.3)(typescript@5.9.3)(yaml@2.8.2))':
+  '@astrojs/mdx@4.3.13(astro@5.16.5(@types/node@22.19.3)(@vercel/functions@2.2.13)(jiti@2.6.1)(lightningcss@1.30.2)(rollup@4.53.3)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.2))':
     dependencies:
       '@astrojs/markdown-remark': 6.3.10
       '@mdx-js/mdx': 3.1.1
       acorn: 8.15.0
-      astro: 5.16.5(@types/node@22.19.3)(@vercel/functions@2.2.13)(jiti@2.6.1)(lightningcss@1.30.2)(rollup@4.53.3)(typescript@5.9.3)(yaml@2.8.2)
+      astro: 5.16.5(@types/node@22.19.3)(@vercel/functions@2.2.13)(jiti@2.6.1)(lightningcss@1.30.2)(rollup@4.53.3)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.2)
       es-module-lexer: 1.7.0
       estree-util-visit: 2.0.0
       hast-util-to-html: 9.0.5
@@ -6707,15 +6896,15 @@ snapshots:
     dependencies:
       prismjs: 1.30.0
 
-  '@astrojs/react@4.4.2(@types/node@22.19.3)(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(jiti@2.6.1)(lightningcss@1.30.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(yaml@2.8.2)':
+  '@astrojs/react@4.4.2(@types/node@22.19.3)(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(jiti@2.6.1)(lightningcss@1.30.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tsx@4.21.0)(yaml@2.8.2)':
     dependencies:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.3(@types/react@19.2.7)
-      '@vitejs/plugin-react': 4.7.0(vite@6.4.1(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2))
+      '@vitejs/plugin-react': 4.7.0(vite@6.4.1(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2))
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       ultrahtml: 1.6.0
-      vite: 6.4.1(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2)
+      vite: 6.4.1(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -6753,14 +6942,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@astrojs/vercel@8.2.11(astro@5.16.5(@types/node@22.19.3)(@vercel/functions@2.2.13)(jiti@2.6.1)(lightningcss@1.30.2)(rollup@4.53.3)(typescript@5.9.3)(yaml@2.8.2))(next@16.0.10(@babel/core@7.28.5)(babel-plugin-react-compiler@1.0.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(rollup@4.53.3)':
+  '@astrojs/vercel@8.2.11(astro@5.16.5(@types/node@22.19.3)(@vercel/functions@2.2.13)(jiti@2.6.1)(lightningcss@1.30.2)(rollup@4.53.3)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.2))(next@16.0.10(@babel/core@7.28.5)(babel-plugin-react-compiler@1.0.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(rollup@4.53.3)':
     dependencies:
       '@astrojs/internal-helpers': 0.7.4
       '@vercel/analytics': 1.6.1(next@16.0.10(@babel/core@7.28.5)(babel-plugin-react-compiler@1.0.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
       '@vercel/functions': 2.2.13
       '@vercel/nft': 0.30.3(rollup@4.53.3)
       '@vercel/routing-utils': 5.3.1
-      astro: 5.16.5(@types/node@22.19.3)(@vercel/functions@2.2.13)(jiti@2.6.1)(lightningcss@1.30.2)(rollup@4.53.3)(typescript@5.9.3)(yaml@2.8.2)
+      astro: 5.16.5(@types/node@22.19.3)(@vercel/functions@2.2.13)(jiti@2.6.1)(lightningcss@1.30.2)(rollup@4.53.3)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.2)
       esbuild: 0.25.12
       tinyglobby: 0.2.15
     transitivePeerDependencies:
@@ -7134,81 +7323,159 @@ snapshots:
   '@esbuild/aix-ppc64@0.25.12':
     optional: true
 
+  '@esbuild/aix-ppc64@0.27.2':
+    optional: true
+
   '@esbuild/android-arm64@0.25.12':
     optional: true
 
+  '@esbuild/android-arm64@0.27.2':
+    optional: true
+
   '@esbuild/android-arm@0.25.12':
     optional: true
 
+  '@esbuild/android-arm@0.27.2':
+    optional: true
+
   '@esbuild/android-x64@0.25.12':
     optional: true
 
+  '@esbuild/android-x64@0.27.2':
+    optional: true
+
   '@esbuild/darwin-arm64@0.25.12':
     optional: true
 
+  '@esbuild/darwin-arm64@0.27.2':
+    optional: true
+
   '@esbuild/darwin-x64@0.25.12':
     optional: true
 
+  '@esbuild/darwin-x64@0.27.2':
+    optional: true
+
   '@esbuild/freebsd-arm64@0.25.12':
     optional: true
 
+  '@esbuild/freebsd-arm64@0.27.2':
+    optional: true
+
   '@esbuild/freebsd-x64@0.25.12':
     optional: true
 
+  '@esbuild/freebsd-x64@0.27.2':
+    optional: true
+
   '@esbuild/linux-arm64@0.25.12':
     optional: true
 
+  '@esbuild/linux-arm64@0.27.2':
+    optional: true
+
   '@esbuild/linux-arm@0.25.12':
     optional: true
 
+  '@esbuild/linux-arm@0.27.2':
+    optional: true
+
   '@esbuild/linux-ia32@0.25.12':
     optional: true
 
+  '@esbuild/linux-ia32@0.27.2':
+    optional: true
+
   '@esbuild/linux-loong64@0.25.12':
     optional: true
 
+  '@esbuild/linux-loong64@0.27.2':
+    optional: true
+
   '@esbuild/linux-mips64el@0.25.12':
     optional: true
 
+  '@esbuild/linux-mips64el@0.27.2':
+    optional: true
+
   '@esbuild/linux-ppc64@0.25.12':
     optional: true
 
+  '@esbuild/linux-ppc64@0.27.2':
+    optional: true
+
   '@esbuild/linux-riscv64@0.25.12':
     optional: true
 
+  '@esbuild/linux-riscv64@0.27.2':
+    optional: true
+
   '@esbuild/linux-s390x@0.25.12':
     optional: true
 
+  '@esbuild/linux-s390x@0.27.2':
+    optional: true
+
   '@esbuild/linux-x64@0.25.12':
     optional: true
 
+  '@esbuild/linux-x64@0.27.2':
+    optional: true
+
   '@esbuild/netbsd-arm64@0.25.12':
     optional: true
 
+  '@esbuild/netbsd-arm64@0.27.2':
+    optional: true
+
   '@esbuild/netbsd-x64@0.25.12':
     optional: true
 
+  '@esbuild/netbsd-x64@0.27.2':
+    optional: true
+
   '@esbuild/openbsd-arm64@0.25.12':
     optional: true
 
+  '@esbuild/openbsd-arm64@0.27.2':
+    optional: true
+
   '@esbuild/openbsd-x64@0.25.12':
     optional: true
 
+  '@esbuild/openbsd-x64@0.27.2':
+    optional: true
+
   '@esbuild/openharmony-arm64@0.25.12':
     optional: true
 
+  '@esbuild/openharmony-arm64@0.27.2':
+    optional: true
+
   '@esbuild/sunos-x64@0.25.12':
     optional: true
 
+  '@esbuild/sunos-x64@0.27.2':
+    optional: true
+
   '@esbuild/win32-arm64@0.25.12':
     optional: true
 
+  '@esbuild/win32-arm64@0.27.2':
+    optional: true
+
   '@esbuild/win32-ia32@0.25.12':
     optional: true
 
+  '@esbuild/win32-ia32@0.27.2':
+    optional: true
+
   '@esbuild/win32-x64@0.25.12':
     optional: true
 
+  '@esbuild/win32-x64@0.27.2':
+    optional: true
+
   '@eslint-community/eslint-plugin-eslint-comments@4.5.0(eslint@9.39.2(jiti@2.6.1))':
     dependencies:
       escape-string-regexp: 4.0.0
@@ -7543,6 +7810,12 @@ snapshots:
 
   '@kwsites/promise-deferred@1.1.1': {}
 
+  '@lit-labs/ssr-dom-shim@1.5.0': {}
+
+  '@lit/reactive-element@2.1.2':
+    dependencies:
+      '@lit-labs/ssr-dom-shim': 1.5.0
+
   '@mapbox/node-pre-gyp@2.0.3':
     dependencies:
       consola: 3.4.2
@@ -8094,12 +8367,12 @@ snapshots:
       postcss: 8.5.6
       tailwindcss: 4.1.18
 
-  '@tailwindcss/vite@4.1.18(vite@7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2))':
+  '@tailwindcss/vite@4.1.18(vite@7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       '@tailwindcss/node': 4.1.18
       '@tailwindcss/oxide': 4.1.18
       tailwindcss: 4.1.18
-      vite: 7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2)
+      vite: 7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)
 
   '@testing-library/dom@10.4.1':
     dependencies:
@@ -8461,7 +8734,7 @@ snapshots:
     optionalDependencies:
       ajv: 6.12.6
 
-  '@vitejs/plugin-react@4.7.0(vite@6.4.1(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2))':
+  '@vitejs/plugin-react@4.7.0(vite@6.4.1(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       '@babel/core': 7.28.5
       '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.5)
@@ -8469,11 +8742,11 @@ snapshots:
       '@rolldown/pluginutils': 1.0.0-beta.27
       '@types/babel__core': 7.20.5
       react-refresh: 0.17.0
-      vite: 6.4.1(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2)
+      vite: 6.4.1(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-react@5.1.2(vite@7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2))':
+  '@vitejs/plugin-react@5.1.2(vite@7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       '@babel/core': 7.28.5
       '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.5)
@@ -8481,7 +8754,7 @@ snapshots:
       '@rolldown/pluginutils': 1.0.0-beta.53
       '@types/babel__core': 7.20.5
       react-refresh: 0.18.0
-      vite: 7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2)
+      vite: 7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)
     transitivePeerDependencies:
       - supports-color
 
@@ -8500,7 +8773,7 @@ snapshots:
       std-env: 3.10.0
       test-exclude: 7.0.1
       tinyrainbow: 2.0.0
-      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.3)(@vitest/ui@3.2.4)(jiti@2.6.1)(jsdom@27.3.0(postcss@8.5.6))(lightningcss@1.30.2)(yaml@2.8.2)
+      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.3)(@vitest/ui@3.2.4)(jiti@2.6.1)(jsdom@27.3.0(postcss@8.5.6))(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)
     transitivePeerDependencies:
       - supports-color
 
@@ -8511,7 +8784,7 @@ snapshots:
       eslint: 9.39.2(jiti@2.6.1)
     optionalDependencies:
       typescript: 5.9.3
-      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.3)(@vitest/ui@3.2.4)(jiti@2.6.1)(jsdom@27.3.0(postcss@8.5.6))(lightningcss@1.30.2)(yaml@2.8.2)
+      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.3)(@vitest/ui@3.2.4)(jiti@2.6.1)(jsdom@27.3.0(postcss@8.5.6))(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)
     transitivePeerDependencies:
       - supports-color
 
@@ -8523,13 +8796,13 @@ snapshots:
       chai: 5.3.3
       tinyrainbow: 2.0.0
 
-  '@vitest/mocker@3.2.4(vite@7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2))':
+  '@vitest/mocker@3.2.4(vite@7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       '@vitest/spy': 3.2.4
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      vite: 7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2)
+      vite: 7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)
 
   '@vitest/pretty-format@3.2.4':
     dependencies:
@@ -8560,7 +8833,7 @@ snapshots:
       sirv: 3.0.2
       tinyglobby: 0.2.15
       tinyrainbow: 2.0.0
-      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.3)(@vitest/ui@3.2.4)(jiti@2.6.1)(jsdom@27.3.0(postcss@8.5.6))(lightningcss@1.30.2)(yaml@2.8.2)
+      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.3)(@vitest/ui@3.2.4)(jiti@2.6.1)(jsdom@27.3.0(postcss@8.5.6))(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)
 
   '@vitest/utils@3.2.4':
     dependencies:
@@ -8785,7 +9058,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  astro@5.16.5(@types/node@22.19.3)(@vercel/functions@2.2.13)(jiti@2.6.1)(lightningcss@1.30.2)(rollup@4.53.3)(typescript@5.9.3)(yaml@2.8.2):
+  astro@5.16.5(@types/node@22.19.3)(@vercel/functions@2.2.13)(jiti@2.6.1)(lightningcss@1.30.2)(rollup@4.53.3)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.2):
     dependencies:
       '@astrojs/compiler': 2.13.0
       '@astrojs/internal-helpers': 0.7.5
@@ -8842,8 +9115,8 @@ snapshots:
       unist-util-visit: 5.0.0
       unstorage: 1.17.3(@vercel/functions@2.2.13)
       vfile: 6.0.3
-      vite: 6.4.1(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2)
-      vitefu: 1.1.1(vite@6.4.1(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2))
+      vite: 6.4.1(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)
+      vitefu: 1.1.1(vite@6.4.1(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2))
       xxhash-wasm: 1.1.0
       yargs-parser: 21.1.1
       yocto-spinner: 0.2.3
@@ -9561,6 +9834,35 @@ snapshots:
       '@esbuild/win32-ia32': 0.25.12
       '@esbuild/win32-x64': 0.25.12
 
+  esbuild@0.27.2:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.27.2
+      '@esbuild/android-arm': 0.27.2
+      '@esbuild/android-arm64': 0.27.2
+      '@esbuild/android-x64': 0.27.2
+      '@esbuild/darwin-arm64': 0.27.2
+      '@esbuild/darwin-x64': 0.27.2
+      '@esbuild/freebsd-arm64': 0.27.2
+      '@esbuild/freebsd-x64': 0.27.2
+      '@esbuild/linux-arm': 0.27.2
+      '@esbuild/linux-arm64': 0.27.2
+      '@esbuild/linux-ia32': 0.27.2
+      '@esbuild/linux-loong64': 0.27.2
+      '@esbuild/linux-mips64el': 0.27.2
+      '@esbuild/linux-ppc64': 0.27.2
+      '@esbuild/linux-riscv64': 0.27.2
+      '@esbuild/linux-s390x': 0.27.2
+      '@esbuild/linux-x64': 0.27.2
+      '@esbuild/netbsd-arm64': 0.27.2
+      '@esbuild/netbsd-x64': 0.27.2
+      '@esbuild/openbsd-arm64': 0.27.2
+      '@esbuild/openbsd-x64': 0.27.2
+      '@esbuild/openharmony-arm64': 0.27.2
+      '@esbuild/sunos-x64': 0.27.2
+      '@esbuild/win32-arm64': 0.27.2
+      '@esbuild/win32-ia32': 0.27.2
+      '@esbuild/win32-x64': 0.27.2
+
   escalade@3.2.0: {}
 
   escape-string-regexp@1.0.5: {}
@@ -13033,6 +13335,13 @@ snapshots:
 
   tslib@2.8.1: {}
 
+  tsx@4.21.0:
+    dependencies:
+      esbuild: 0.27.2
+      get-tsconfig: 4.13.0
+    optionalDependencies:
+      fsevents: 2.3.3
+
   turbo-darwin-64@2.6.3:
     optional: true
 
@@ -13338,13 +13647,13 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.3
 
-  vite-node@3.2.4(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2):
+  vite-node@3.2.4(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2):
     dependencies:
       cac: 6.7.14
       debug: 4.4.3
       es-module-lexer: 1.7.0
       pathe: 2.0.3
-      vite: 7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2)
+      vite: 7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -13359,7 +13668,7 @@ snapshots:
       - tsx
       - yaml
 
-  vite@6.4.1(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2):
+  vite@6.4.1(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2):
     dependencies:
       esbuild: 0.25.12
       fdir: 6.5.0(picomatch@4.0.3)
@@ -13372,9 +13681,10 @@ snapshots:
       fsevents: 2.3.3
       jiti: 2.6.1
       lightningcss: 1.30.2
+      tsx: 4.21.0
       yaml: 2.8.2
 
-  vite@7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2):
+  vite@7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2):
     dependencies:
       esbuild: 0.25.12
       fdir: 6.5.0(picomatch@4.0.3)
@@ -13387,17 +13697,18 @@ snapshots:
       fsevents: 2.3.3
       jiti: 2.6.1
       lightningcss: 1.30.2
+      tsx: 4.21.0
       yaml: 2.8.2
 
-  vitefu@1.1.1(vite@6.4.1(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2)):
+  vitefu@1.1.1(vite@6.4.1(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)):
     optionalDependencies:
-      vite: 6.4.1(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2)
+      vite: 6.4.1(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)
 
-  vitest@3.2.4(@types/debug@4.1.12)(@types/node@22.19.3)(@vitest/ui@3.2.4)(jiti@2.6.1)(jsdom@27.3.0(postcss@8.5.6))(lightningcss@1.30.2)(yaml@2.8.2):
+  vitest@3.2.4(@types/debug@4.1.12)(@types/node@22.19.3)(@vitest/ui@3.2.4)(jiti@2.6.1)(jsdom@27.3.0(postcss@8.5.6))(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2):
     dependencies:
       '@types/chai': 5.2.3
       '@vitest/expect': 3.2.4
-      '@vitest/mocker': 3.2.4(vite@7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2))
+      '@vitest/mocker': 3.2.4(vite@7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2))
       '@vitest/pretty-format': 3.2.4
       '@vitest/runner': 3.2.4
       '@vitest/snapshot': 3.2.4
@@ -13415,8 +13726,8 @@ snapshots:
       tinyglobby: 0.2.15
       tinypool: 1.1.1
       tinyrainbow: 2.0.0
-      vite: 7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2)
-      vite-node: 3.2.4(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2)
+      vite: 7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)
+      vite-node: 3.2.4(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/debug': 4.1.12
diff --git a/turbo.json b/turbo.json
index 65a254d1..f665c5d6 100644
--- a/turbo.json
+++ b/turbo.json
@@ -16,7 +16,7 @@
       "cache": false
     },
     "test": {
-      "outputs": ["coverage/**"]
+      "outputs": []
     },
     "lint": {
       "outputs": []