From a014699c95e957d6e708df5135de16c800f0f79a Mon Sep 17 00:00:00 2001
From: rahim <rahim.alwer@gmail.com>
Date: Mon, 5 Jan 2026 14:51:13 +1100
Subject: [PATCH] docs(plan): store bindings (#283)

---
 .claude/plans/store-bindings.md               | 1429 +++++++++++++++++
 commitlint.config.js                          |    1 +
 packages/store/src/core/extend-config.ts      |   50 +
 packages/store/src/core/index.ts              |    1 +
 packages/store/src/core/store.ts              |    2 +
 .../src/core/tests/extend-config.test.ts      |  230 +++
 packages/utils/package.json                   |   24 +-
 packages/utils/src/array/index.ts             |    1 +
 .../utils/src/array/tests/uniq-by.test.ts     |   59 +
 packages/utils/src/array/uniq-by.ts           |   16 +
 .../utils/src/function/compose-callbacks.ts   |   23 +
 packages/utils/src/function/index.ts          |    1 +
 .../function/tests/compose-callbacks.test.ts  |   79 +
 packages/utils/tsdown.config.ts               |    6 +-
 14 files changed, 1912 insertions(+), 10 deletions(-)
 create mode 100644 .claude/plans/store-bindings.md
 create mode 100644 packages/store/src/core/extend-config.ts
 create mode 100644 packages/store/src/core/tests/extend-config.test.ts
 create mode 100644 packages/utils/src/array/index.ts
 create mode 100644 packages/utils/src/array/tests/uniq-by.test.ts
 create mode 100644 packages/utils/src/array/uniq-by.ts
 create mode 100644 packages/utils/src/function/compose-callbacks.ts
 create mode 100644 packages/utils/src/function/index.ts
 create mode 100644 packages/utils/src/function/tests/compose-callbacks.test.ts

diff --git a/.claude/plans/store-bindings.md b/.claude/plans/store-bindings.md
new file mode 100644
index 00000000..c26e8b79
--- /dev/null
+++ b/.claude/plans/store-bindings.md
@@ -0,0 +1,1429 @@
+# Store React/DOM Bindings
+
+## Goal
+
+Implement React and DOM bindings for Video.js 10's store, enabling:
+
+- Simple `createStore()` API that returns Provider + hooks/controllers
+- Skins define their own store configs and export Provider + Skin + hooks
+- Consumers can extend skin configs with additional slices
+- Base hooks/controllers for testing and advanced use cases
+
+## Key Decisions
+
+| Decision            | Resolution                                                                            |
+| ------------------- | ------------------------------------------------------------------------------------- |
+| Store creation      | `createStore({ slices, displayName? })` - types inferred from slices                  |
+| Hook naming         | `useStore`, `useSelector`, `useRequest`, `usePending`, `useMutation`, `useOptimistic` |
+| Controller naming   | `SelectorController`, `RequestController`, `PendingController`, etc                   |
+| Selector hook       | `useSelector(selector)` - requires selector (Redux-style)                             |
+| Store hook          | `useStore()` - returns store instance                                                 |
+| Request hook        | `useRequest()` or `useRequest(r => r.foo)` - full map or single request               |
+| Pending hook        | `usePending()` - returns `store.queue.pending` (reactive)                             |
+| Mutation hook       | `useMutation(r => r.foo)` - status tracking (isPending, isError, error)               |
+| Optimistic hook     | `useOptimistic(r => r.foo, s => s.bar)` - optimistic value + status                   |
+| Settled state       | Core Queue tracks last result/error per key, cleared on next request                  |
+| Base hooks          | All take store as first arg: `useSelector(store, sel)`, etc                           |
+| createStore hooks   | Returns all hooks including `useMutation` and `useOptimistic`                         |
+| Slice hook return   | `{ state, request, isAvailable }` - state/request null when unavailable               |
+| Skin exports        | `Provider`, `Skin`, `extendConfig`                                                    |
+| Slice namespace     | `export * as media` → `media.playback`                                                |
+| Video component     | Generic, exported from `@videojs/react` (not from skins)                              |
+| Lit mixins          | `StoreMixin` (combined), `StoreProviderMixin`, `StoreAttachMixin`                     |
+| Primitives context  | `useStoreContext()` internal hook for primitive UI components                         |
+| displayName         | For React DevTools component naming                                                   |
+| Component types     | Namespace pattern: `Skin.Props` via `namespace Skin { export type Props }`            |
+| Element define      | `FrostedSkinElement.define(tagName, { mixins })` for declarative setup                |
+| Config extension    | `extendConfig()` uses `uniqBy` + `composeCallbacks` from utils                        |
+| Provider resolution | Isolated by default; `inherit` prop to use parent store from context                  |
+| Store instance      | `create()` method for imperative store creation                                       |
+| Package structure   | `store/react` and `store/lit` (no `store/dom`)                                        |
+
+---
+
+## Phase 0: Core Utilities [DONE]
+
+> Implemented in PR #283.
+
+- `uniqBy` - `packages/utils/src/array/uniq-by.ts`
+- `composeCallbacks` - `packages/utils/src/function/compose-callbacks.ts`
+- `extendConfig` - `packages/store/src/core/extend-config.ts`
+
+---
+
+## Phase 0.5: Queue Task Refactor
+
+Refactor Queue to use a unified `tasks` map with status discriminator. This enables `useMutation` and `useOptimistic` hooks to track request lifecycle.
+
+**File:** `packages/store/src/core/queue.ts`
+
+### Task Types (Discriminated Union)
+
+```typescript
+// Base fields shared by all task states
+interface TaskBase<Key, Input> {
+  id: symbol;
+  name: string;
+  key: Key;
+  input: Input;
+  startedAt: number;
+  meta: RequestMeta | null;
+}
+
+// Pending - request in flight
+interface PendingTask<Key, Input> extends TaskBase<Key, Input> {
+  status: 'pending';
+  abort: AbortController;
+}
+
+// Success - completed successfully
+interface SuccessTask<Key, Input, Output> extends TaskBase<Key, Input> {
+  status: 'success';
+  settledAt: number;
+  duration: number;
+  output: Output;
+}
+
+// Error - failed or cancelled
+interface ErrorTask<Key, Input> extends TaskBase<Key, Input> {
+  status: 'error';
+  settledAt: number;
+  duration: number;
+  error: unknown;
+  cancelled: boolean; // true if aborted, false if actual error
+}
+
+// Union types
+type Task<Key, Input, Output> = PendingTask<Key, Input> | SuccessTask<Key, Input, Output> | ErrorTask<Key, Input>;
+
+type SettledTask<Key, Input, Output> = SuccessTask<Key, Input, Output> | ErrorTask<Key, Input>;
+```
+
+### Queue API
+
+```typescript
+export class Queue<Tasks extends TaskRecord> {
+  // Single source of truth - one task per key (pending OR settled)
+  get tasks(): Readonly<TasksRecord<Tasks>>;
+
+  // Clear settled task for a key (no-op if pending)
+  reset(key: keyof Tasks): void;
+
+  // Subscribe to task changes
+  subscribe(listener: (tasks: TasksRecord<Tasks>) => void): () => void;
+}
+```
+
+### Lifecycle
+
+1. `enqueue()` → task added with `status: 'pending'`
+2. Task completes → same entry updated to `status: 'success'` or `status: 'error'`
+3. New request for same key → replaces previous (pending aborted, settled cleared)
+4. `reset(key)` → removes settled task
+
+### Usage
+
+```typescript
+const task = queue.tasks.changeVolume;
+
+// TypeScript narrows based on status
+if (task?.status === 'pending') {
+  task.abort; // available
+}
+if (task?.status === 'success') {
+  task.output; // available
+}
+if (task?.status === 'error') {
+  task.error; // available
+  task.cancelled; // true if aborted
+}
+```
+
+---
+
+## Phase 1: React Bindings (`@videojs/store/react`)
+
+### 1.1 Shared Context (Internal)
+
+**File:** `packages/store/src/react/context.ts`
+
+Internal shared context used by all Providers. Not exported publicly.
+
+```typescript
+import type { ReactNode } from 'react';
+import type { AnyStore } from '../core';
+
+import { createContext, useContext } from 'react';
+
+// Internal shared context - all Providers write to this
+const StoreContext = createContext<AnyStore | null>(null);
+
+/**
+ * Internal hook for primitive UI components.
+ * Accesses the nearest store from context without type information.
+ */
+export function useStoreContext(): AnyStore {
+  const store = useContext(StoreContext);
+  if (!store) {
+    throw new Error('useStoreContext must be used within a Provider');
+  }
+  return store;
+}
+
+/**
+ * Internal hook to get parent store (may be null).
+ * Used by Provider to check for existing store in tree.
+ */
+export function useParentStore(): AnyStore | null {
+  return useContext(StoreContext);
+}
+
+/**
+ * Internal provider component.
+ */
+export function StoreContextProvider({ store, children }: { store: AnyStore; children: ReactNode }) {
+  return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;
+}
+```
+
+### 1.2 `createStore`
+
+**File:** `packages/store/src/react/create-store.ts`
+
+```typescript
+import type { AnySlice, InferSliceTarget, StoreConfig } from '../core';
+import type { ReactNode } from 'react';
+
+import { useEffect, useState } from 'react';
+
+import { StoreContextProvider, useParentStore, useStoreContext } from './context';
+
+export interface CreateStoreConfig<Slices extends AnySlice[]> extends StoreConfig<
+  InferSliceTarget<Slices[number]>,
+  Slices
+> {
+  displayName?: string;
+}
+
+export interface ProviderProps {
+  children: ReactNode;
+  /** Optional pre-created store. If provided, uses this store. */
+  store?: Store<InferSliceTarget<Slices[number]>, Slices>;
+  /** If true, inherits store from parent context instead of creating new. Defaults to false (isolated). */
+  inherit?: boolean;
+}
+
+export interface CreateStoreResult<Slices extends AnySlice[]> {
+  Provider: FC<ProviderProps>;
+  useStore: () => Store<InferSliceTarget<Slices[number]>, Slices>;
+  useSelector: <T>(selector: (state: UnionSliceState<Slices>) => T) => T;
+  useRequest: {
+    (): UnionSliceRequests<Slices>;
+    <T>(selector: (requests: UnionSliceRequests<Slices>) => T): T;
+  };
+  usePending: () => PendingRecord<UnionSliceTasks<Slices>>;
+  useMutation: <K extends keyof UnionSliceRequests<Slices>>(
+    selector: (requests: UnionSliceRequests<Slices>) => UnionSliceRequests<Slices>[K]
+  ) => MutationResult<UnionSliceRequests<Slices>[K]>;
+  useOptimistic: <K extends keyof UnionSliceRequests<Slices>, T>(
+    requestSelector: (requests: UnionSliceRequests<Slices>) => UnionSliceRequests<Slices>[K],
+    stateSelector: (state: UnionSliceState<Slices>) => T
+  ) => OptimisticResult<T, UnionSliceRequests<Slices>[K]>;
+  /** Creates a store instance for imperative access (e.g., attach before render, testing). */
+  create: () => Store<InferSliceTarget<Slices[number]>, Slices>;
+}
+
+export function createStore<Slices extends AnySlice[]>(config: CreateStoreConfig<Slices>): CreateStoreResult<Slices>;
+```
+
+### 1.3 Types
+
+**File:** `packages/store/src/react/types.ts`
+
+```typescript
+export type SliceResult<S extends AnySlice> =
+  | { state: InferSliceState<S>; request: InferSliceRequests<S>; isAvailable: true }
+  | { state: null; request: null; isAvailable: false };
+
+export interface MutationResult<Request extends (...args: any[]) => any> {
+  /** Trigger the request */
+  mutate: Request;
+  /** Request is currently in flight */
+  isPending: boolean;
+  /** Last request failed */
+  isError: boolean;
+  /** Last request succeeded */
+  isSuccess: boolean;
+  /** No request has been made yet */
+  isIdle: boolean;
+  /** Current status */
+  status: 'idle' | 'pending' | 'success' | 'error';
+  /** Error from last failed request */
+  error: unknown;
+  /** Clear settled state (error/success) */
+  reset: () => void;
+}
+
+export interface OptimisticResult<Value, Request extends (...args: any[]) => any> extends MutationResult<Request> {
+  /** Current value (optimistic if pending, otherwise confirmed) */
+  value: Value;
+  /** Trigger request with optimistic update */
+  setValue: (value: Value) => void;
+}
+```
+
+### 1.4 Base hooks
+
+**File:** `packages/store/src/react/hooks.ts`
+
+```typescript
+// Base hooks - take store explicitly (for testing/advanced use)
+// All hooks take store as first argument for consistency
+
+export function useSelector<S extends AnyStore, T>(store: S, selector: (state: InferStoreState<S>) => T): T;
+
+export function useRequest<S extends AnyStore>(store: S): InferStoreRequests<S>;
+export function useRequest<S extends AnyStore, T>(store: S, selector: (requests: InferStoreRequests<S>) => T): T;
+
+export function usePending<S extends AnyStore>(store: S): PendingRecord<InferStoreTasks<S>>;
+
+export function useMutation<S extends AnyStore, R extends (...args: any[]) => any>(
+  store: S,
+  selector: (requests: InferStoreRequests<S>) => R
+): MutationResult<R>;
+
+export function useOptimistic<S extends AnyStore, R extends (...args: any[]) => any, T>(
+  store: S,
+  requestSelector: (requests: InferStoreRequests<S>) => R,
+  stateSelector: (state: InferStoreState<S>) => T
+): OptimisticResult<T, R>;
+```
+
+### 1.5 Implementation Details
+
+- `create()`: Returns `new Store(config)` - for creating store in `useState` or imperative use
+- `Provider`: Resolution order:
+  1. If `store` prop provided, uses that
+  2. Else if `inherit={true}` and parent store exists in context, uses that
+  3. Else, creates new store via `useState(() => new Store(config))`
+
+  **Note:** `inherit` defaults to `false` (isolated). This ensures most players are standalone by default.
+  Use `inherit` when intentionally sharing state (e.g., thumbnail preview inside main player).
+
+  Uses `StoreContextProvider` internally. Cleanup: `useEffect` calls `store.destroy()` on unmount (only if Provider created the store).
+
+  ```typescript
+  function Provider({ children, store: providedStore, inherit = false }: ProviderProps) {
+    const parentStore = useParentStore();
+    const shouldInherit = inherit && parentStore != null;
+    const [store] = useState(() => providedStore ?? (shouldInherit ? parentStore : new Store(config)));
+    const isOwner = !providedStore && !shouldInherit; // Only destroy if we created it
+
+    useEffect(() => {
+      return () => {
+        if (isOwner) store.destroy();
+      };
+    }, [store, isOwner]);
+
+    return <StoreContextProvider store={store}>{children}</StoreContextProvider>;
+  }
+  ```
+
+- `useStore()`: Returns typed store from `useStoreContext()`
+- `useSelector(selector)`: Uses `useSyncExternalStore` with selector
+- `useRequest()`: Returns stable `store.request` from context
+- `usePending()`: Subscribes to `store.queue`, returns `queue.pending`
+- `useSlice(slice)`: Returns `{ state, request, isAvailable }` with null narrowing
+
+### 1.6 Exports
+
+**File:** `packages/store/src/react/index.ts`
+
+```typescript
+export { createStore } from './create-store';
+// Base hooks for testing/advanced use (all take store as first arg)
+export { useMutation, useOptimistic, usePending, useRequest, useSelector } from './hooks';
+// Internal hook for primitive UI components
+export { useStoreContext } from './context';
+
+export type { CreateStoreConfig, CreateStoreResult, MutationResult, OptimisticResult, SliceResult } from './types';
+```
+
+---
+
+## Phase 2: Lit Bindings (`@videojs/store/lit`)
+
+All DOM/Lit bindings live together since they all depend on `@lit/context`.
+
+### 2.0 @lit/context Research
+
+Key findings from analyzing `@lit/context@1.1.6`:
+
+**Dynamic Value Updates:**
+
+- `ContextProvider.setValue(newValue, force?)` notifies all subscribed consumers
+- Uses `Object.is()` for equality - swapping store objects triggers updates automatically
+- `force = true` needed only for in-place mutations (same reference)
+
+**Subscription Model:**
+
+- Consumers must opt-in: `subscribe: true` in `@consume()` or `ContextConsumer`
+- Without subscription, consumers only receive initial value
+- Provider stores callbacks in `Map<ContextCallback, CallbackInfo>`
+- `updateObservers()` iterates all callbacks on value change
+
+**Store Swapping Pattern (validated):**
+
+```typescript
+class MySkin extends HTMLElement {
+  #provider = new ContextProvider(this, { context: storeContext });
+
+  set store(newStore: Store) {
+    this.#provider.setValue(newStore); // Notifies all subscribers
+  }
+}
+```
+
+### 2.1 `createStore`
+
+**File:** `packages/store/src/lit/create-store.ts`
+
+```typescript
+import type { AnySlice, InferSliceTarget, StoreConfig } from '../core';
+import type { Context } from '@lit/context';
+import type { ReactiveControllerHost } from '@lit/reactive-element';
+
+import { createContext } from '@lit/context';
+
+export interface CreateStoreConfig<Slices extends AnySlice[]> extends StoreConfig<
+  InferSliceTarget<Slices[number]>,
+  Slices
+> {}
+
+export interface CreateStoreResult<Slices extends AnySlice[]> {
+  /** Combined mixin: provides store via context AND auto-attaches slotted media */
+  StoreMixin: <T extends Constructor<HTMLElement>>(Base: T) => T;
+  /** Mixin that provides store via context (no auto-attach) */
+  StoreProviderMixin: <T extends Constructor<HTMLElement>>(Base: T) => T;
+  /** Mixin that auto-attaches slotted media elements (requires store from context) */
+  StoreAttachMixin: <T extends Constructor<HTMLElement>>(Base: T) => T;
+  /** Context for consuming store in controllers */
+  context: Context<Store<InferSliceTarget<Slices[number]>, Slices>>;
+  /** Creates a store instance for imperative access */
+  create: () => Store<InferSliceTarget<Slices[number]>, Slices>;
+}
+
+export function createStore<Slices extends AnySlice[]>(config: CreateStoreConfig<Slices>): CreateStoreResult<Slices>;
+```
+
+**Implementation details:**
+
+- Uses `@lit/context` for W3C Context Protocol
+- Context key auto-generated per `createStore()` call (unique Symbol)
+- `StoreMixin`: Combined mixin, equivalent to `StoreAttachMixin(StoreProviderMixin(Base))`
+- `StoreProviderMixin`: Mixin that:
+  - Creates store instance
+  - Uses `ContextProvider` internally
+  - Exposes `store` setter that calls `provider.setValue(newStore)`
+- `StoreAttachMixin`: Mixin that:
+  - Consumes store from context
+  - Observes slotted elements for `<video>` or `<audio>`
+  - Calls `store.attach(mediaElement)` when found
+  - Cleans up on disconnect
+- `create()`: Returns `new Store(config)` for imperative use
+
+### 2.2 Controllers
+
+**File:** `packages/store/src/lit/controllers.ts`
+
+Controllers mirror React hooks for consistency. All take `(host, store, ...)` pattern.
+
+```typescript
+import type { ReactiveController, ReactiveControllerHost } from '@lit/reactive-element';
+
+// SelectorController - like useSelector(store, selector)
+export class SelectorController<S extends AnyStore, T> implements ReactiveController {
+  constructor(host: ReactiveControllerHost, store: S, selector: (state: InferStoreState<S>) => T);
+  get value(): T;
+}
+
+// RequestController - like useRequest(store) or useRequest(store, selector)
+export class RequestController<S extends AnyStore> implements ReactiveController {
+  constructor(host: ReactiveControllerHost, store: S);
+  get value(): InferStoreRequests<S>;
+}
+
+export class RequestController<S extends AnyStore, T> implements ReactiveController {
+  constructor(host: ReactiveControllerHost, store: S, selector: (requests: InferStoreRequests<S>) => T);
+  get value(): T;
+}
+
+// PendingController - like usePending(store)
+export class PendingController<S extends AnyStore> implements ReactiveController {
+  constructor(host: ReactiveControllerHost, store: S);
+  get value(): PendingRecord<InferStoreTasks<S>>;
+}
+
+// MutationController - like useMutation(store, selector)
+export class MutationController<S extends AnyStore, R extends (...args: any[]) => any> implements ReactiveController {
+  constructor(host: ReactiveControllerHost, store: S, selector: (requests: InferStoreRequests<S>) => R);
+  get value(): MutationResult<R>;
+}
+
+// OptimisticController - like useOptimistic(store, requestSelector, stateSelector)
+export class OptimisticController<
+  S extends AnyStore,
+  R extends (...args: any[]) => any,
+  T,
+> implements ReactiveController {
+  constructor(
+    host: ReactiveControllerHost,
+    store: S,
+    requestSelector: (requests: InferStoreRequests<S>) => R,
+    stateSelector: (state: InferStoreState<S>) => T
+  );
+  get value(): OptimisticResult<T, R>;
+}
+```
+
+**Implementation details:**
+
+- Controllers take store explicitly (base pattern, like React base hooks)
+- Subscribe to store/queue changes, call `host.requestUpdate()` on change
+- Cleanup on `hostDisconnected`
+
+### 2.3 Exports
+
+**File:** `packages/store/src/lit/index.ts`
+
+```typescript
+export { createStore } from './create-store';
+export {
+  MutationController,
+  OptimisticController,
+  PendingController,
+  RequestController,
+  SelectorController,
+} from './controllers';
+
+export type { CreateStoreConfig, CreateStoreResult, MutationResult, OptimisticResult } from './types';
+```
+
+**Note:** Mixins (`StoreMixin`, `StoreProviderMixin`, `StoreAttachMixin`) are accessed via the `createStore()` return object, not exported directly. This ensures each store has its own typed mixins.
+
+---
+
+## Phase 3: Playback Slice (`@videojs/core/dom`)
+
+Based on [Issue #239](https://github.com/videojs/v10/issues/239).
+
+### 3.1 Playback slice
+
+**File:** `packages/core/src/dom/slices/playback.ts`
+
+State and requests are inferred from slice definition using `InferSliceState` and `InferSliceRequests`.
+
+For reference, the expected shape:
+
+**PlaybackState (inferred via `InferSliceState<typeof playback>`):**
+
+- `paused: boolean`
+- `ended: boolean`
+- `started: boolean`
+- `waiting: boolean`
+- `currentTime: number`
+- `duration: number`
+- `buffered: Array<[number, number]>`
+- `seekable: Array<[number, number]>`
+- `volume: number`
+- `muted: boolean`
+- `canPlay: boolean`
+- `source: unknown`
+- `streamType: 'on-demand' | 'live' | 'live-dvr' | 'unknown'`
+
+**PlaybackRequests (inferred via `InferSliceRequests<typeof playback>`):**
+
+- `play: () => Promise<void>`
+- `pause: () => Promise<void>`
+- `seek: (time: number) => Promise<void>`
+- `changeVolume: (volume: number) => Promise<void>`
+- `toggleMute: () => Promise<void>`
+- `changeSource: (src: string) => Promise<string>` (returns new src)
+
+```typescript
+import type { InferSliceRequests, InferSliceState } from '@videojs/store';
+
+import { createSlice } from '@videojs/store';
+
+export const playback = createSlice<HTMLMediaElement>()({
+  initialState: {
+    paused: true,
+    ended: false,
+    started: false,
+    waiting: false,
+    currentTime: 0,
+    duration: 0,
+    buffered: [] as Array<[number, number]>,
+    seekable: [] as Array<[number, number]>,
+    volume: 1,
+    muted: false,
+    canPlay: false,
+    source: null as unknown,
+    streamType: 'unknown' as 'on-demand' | 'live' | 'live-dvr' | 'unknown',
+  },
+  getSnapshot: ({ target }) => ({
+    paused: target.paused,
+    ended: target.ended,
+    // ... etc
+  }),
+  subscribe: ({ target, update, signal }) => {
+    // Listen to media events and call update()
+  },
+  request: {
+    play: {
+      handler: async (_input: void, { target }) => {
+        await target.play();
+      },
+    },
+    pause: {
+      handler: (_input: void, { target }) => {
+        target.pause();
+      },
+    },
+    seek: {
+      handler: (time: number, { target }) => {
+        target.currentTime = time;
+        return time;
+      },
+    },
+    changeVolume: {
+      handler: (volume: number, { target }) => {
+        target.volume = volume;
+        return volume;
+      },
+    },
+    toggleMute: {
+      handler: (_input: void, { target }) => {
+        target.muted = !target.muted;
+        return target.muted;
+      },
+    },
+    changeSource: {
+      handler: (src: string, { target }) => {
+        target.src = src;
+        return src;
+      },
+    },
+  },
+});
+
+// Types are inferred from slice - use these utilities
+export type PlaybackState = InferSliceState<typeof playback>;
+export type PlaybackRequests = InferSliceRequests<typeof playback>;
+```
+
+### 3.2 Namespace export
+
+**File:** `packages/core/src/dom/slices/index.parts.ts`
+
+```typescript
+// Parts file for namespace re-export
+export { playback } from './playback';
+```
+
+**File:** `packages/core/src/dom/slices/index.ts`
+
+```typescript
+// Namespace export (from parts to avoid circular reference)
+export * as media from './index.parts';
+
+// Standalone exports
+export { playback } from './playback';
+```
+
+Usage:
+
+```typescript
+import { media, playback } from '@videojs/core/dom';
+
+media.playback; // via namespace
+playback; // standalone export
+```
+
+### 3.3 Utilities
+
+**File:** `packages/core/src/dom/slices/utils.ts`
+
+```typescript
+export function serializeTimeRanges(ranges: TimeRanges): Array<[number, number]>;
+```
+
+### 3.4 Type guards
+
+**File:** `packages/core/src/dom/guards.ts`
+
+```typescript
+export function isHTMLVideo(target: unknown): target is HTMLVideoElement;
+export function isHTMLAudio(target: unknown): target is HTMLAudioElement;
+export function isHTMLMedia(target: unknown): target is HTMLMediaElement;
+```
+
+---
+
+## Phase 4: React Package Setup (`@videojs/react`)
+
+### 4.1 Video component
+
+**File:** `packages/react/src/media/video.tsx`
+
+```typescript
+import type { VideoHTMLAttributes, RefCallback } from 'react';
+import { useCallback } from 'react';
+import { useStore } from '../store';
+import { useComposedRefs } from '../utils/use-composed-refs';
+
+export interface VideoProps extends VideoHTMLAttributes<HTMLVideoElement> {
+  ref?: RefCallback<HTMLVideoElement> | React.RefObject<HTMLVideoElement>;
+}
+
+/**
+ * Video element that automatically attaches to the store.
+ * Uses React 19 ref cleanup pattern.
+ */
+export function Video({ children, ref, ...props }: VideoProps): JSX.Element {
+  const store = useStore();
+
+  const attachRef: RefCallback<HTMLVideoElement> = useCallback((el) => {
+    if (el) {
+      const detach = store.attach(el);
+      // React 19: return cleanup function
+      return detach;
+    }
+  }, [store]);
+
+  const composedRef = useComposedRefs(ref, attachRef);
+
+  return (
+    <video ref={composedRef} {...props}>
+      {children}
+    </video>
+  );
+}
+```
+
+### 4.2 Package exports
+
+**File:** `packages/react/src/index.ts`
+
+```typescript
+// Media elements
+export { Video } from './media/video';
+export type { VideoProps } from './media/video';
+
+// Re-export slices for convenience (users import from @videojs/react, not @videojs/core/dom)
+export { media } from '@videojs/core/dom';
+// Re-export for extension
+export { createStore } from '@videojs/store/react';
+```
+
+---
+
+## Phase 5: Frosted Skin (React)
+
+### 5.1 Store config
+
+**File:** `packages/react/src/skins/frosted/store.ts`
+
+```typescript
+import type { AnySlice, StoreConfig } from '@videojs/store';
+
+import { extendConfig as extendBaseConfig } from '@videojs/store';
+import { createStore } from '@videojs/store/react';
+
+import { media } from './slices'; // internal - re-exported from @videojs/react
+
+/** Base config for frosted skin. */
+const baseConfig = {
+  slices: [media.playback] as const,
+  displayName: 'FrostedSkin',
+};
+
+/**
+ * Extends frosted skin config with additional slices/hooks.
+ * Composes lifecycle hooks (both called, base first).
+ */
+export function extendConfig<S extends readonly AnySlice[] = readonly []>(extension?: Partial<StoreConfig<any, S>>) {
+  return extendBaseConfig(baseConfig, extension);
+}
+
+export const { Provider, create } = createStore(extendConfig());
+```
+
+### 5.2 Skin component
+
+**File:** `packages/react/src/skins/frosted/skin.tsx`
+
+```typescript
+import type { PropsWithChildren } from 'react';
+
+export type SkinProps = PropsWithChildren<{
+  className?: string;
+}>;
+
+export function Skin({ children, className }: SkinProps): JSX.Element {
+  return (
+    <div className={`vjs-frosted-skin ${className ?? ''}`}>
+      {children}
+      {/* Controls rendered here */}
+    </div>
+  );
+}
+
+/**
+ * Namespace pattern for component types.
+ * Allows: `Skin.Props` instead of importing `SkinProps` separately.
+ */
+export namespace Skin {
+  export type Props = SkinProps;
+}
+```
+
+### 5.3 Exports
+
+**File:** `packages/react/src/skins/frosted/index.ts`
+
+```typescript
+export { Skin } from './skin';
+export type { SkinProps } from './skin';
+export { extendConfig, Provider } from './store';
+```
+
+---
+
+## Phase 6: Frosted Skin (HTML)
+
+### 6.1 Store config
+
+**File:** `packages/html/src/skins/frosted/store.ts`
+
+```typescript
+import type { AnySlice, StoreConfig } from '@videojs/store';
+
+import { extendConfig as extendBaseConfig } from '@videojs/store';
+import { createStore } from '@videojs/store/lit';
+
+import { media } from './slices'; // internal - re-exported from @videojs/html
+
+/** Base config for frosted skin. */
+const baseConfig = {
+  slices: [media.playback] as const,
+};
+
+/**
+ * Extends frosted skin config with additional slices/hooks.
+ * Composes lifecycle hooks (both called, base first).
+ */
+export function extendConfig<S extends readonly AnySlice[] = readonly []>(extension?: Partial<StoreConfig<any, S>>) {
+  return extendBaseConfig(baseConfig, extension);
+}
+
+export const { StoreMixin, StoreProviderMixin, StoreAttachMixin, context } = createStore(extendConfig());
+```
+
+### 6.2 Skin component
+
+**File:** `packages/html/src/skins/frosted/skin.ts`
+
+```typescript
+import { StoreAttachMixin, StoreMixin, StoreProviderMixin } from './store';
+
+type Mixin = <T extends Constructor<HTMLElement>>(Base: T) => T;
+
+export interface DefineOptions {
+  /** Mixins to apply. Defaults to [StoreMixin] (combined provider + attach). */
+  mixins?: Mixin[];
+}
+
+/**
+ * Frosted skin element. Empty for now - controls will be added later.
+ * Uses shadow DOM with slot for video element.
+ */
+export class FrostedSkinElement extends HTMLElement {
+  /** Default tag name for this element. */
+  static tagName = 'vjs-frosted-skin';
+
+  /**
+   * Define this element with the custom elements registry.
+   *
+   * @example
+   * // Default: combined provider + attach
+   * FrostedSkinElement.define('vjs-frosted-skin');
+   *
+   * @example
+   * // Granular mixin control (e.g., attach only, inherit provider from parent)
+   * FrostedSkinElement.define('vjs-thumbnail', { mixins: [StoreAttachMixin] });
+   *
+   * @example
+   * // Custom store with extended slices
+   * const { StoreMixin } = createStore(extendConfig({ slices: [chaptersSlice] }));
+   * FrostedSkinElement.define('my-extended-player', { mixins: [StoreMixin] });
+   */
+  static define(tagName: string, options: DefineOptions = {}) {
+    const { mixins = [StoreMixin] } = options;
+
+    // Apply mixins in order (right to left composition)
+    const Mixed = mixins.reduceRight((Base, mixin) => mixin(Base), this as typeof FrostedSkinElement);
+    customElements.define(tagName, Mixed);
+  }
+
+  connectedCallback() {
+    const shadow = this.attachShadow({ mode: 'open' });
+    shadow.innerHTML = `<slot></slot>`;
+  }
+}
+```
+
+### 6.3 Define export
+
+**File:** `packages/html/src/define/vjs-frosted-skin.ts`
+
+```typescript
+import { FrostedSkinElement } from '../skins/frosted/skin';
+
+FrostedSkinElement.define('vjs-frosted-skin');
+```
+
+### 6.4 Exports
+
+**File:** `packages/html/src/skins/frosted/index.ts`
+
+```typescript
+export { FrostedSkinElement } from './skin';
+export type { DefineOptions } from './skin';
+export { context, extendConfig, StoreAttachMixin, StoreMixin, StoreProviderMixin } from './store';
+```
+
+---
+
+## Usage Examples
+
+### React: Custom UI
+
+```tsx
+import { createStore, media, Video } from '@videojs/react';
+
+// Note: media is re-exported from @videojs/react (not @videojs/core/dom)
+
+const { Provider, useSelector, useRequest, useMutation, useOptimistic } = createStore({
+  slices: [media.playback],
+});
+
+function App() {
+  return (
+    <Provider>
+      <Video src="video.mp4" />
+      <MyCustomControls />
+    </Provider>
+  );
+}
+
+function MyCustomControls() {
+  const currentTime = useSelector((s) => s.currentTime);
+  const seek = useRequest((r) => r.seek);
+  return <button onClick={() => seek(0)}>Restart ({currentTime}s)</button>;
+}
+
+// With mutation status tracking
+function PlayButton() {
+  const paused = useSelector((s) => s.paused);
+  const { mutate: play, isPending } = useMutation((r) => r.play);
+  const { mutate: pause } = useMutation((r) => r.pause);
+
+  return (
+    <button onClick={() => (paused ? play() : pause())} disabled={isPending}>
+      {paused ? 'Play' : 'Pause'}
+    </button>
+  );
+}
+
+// With optimistic updates
+function VolumeSlider() {
+  const { value, setValue, isPending, isError } = useOptimistic(
+    (r) => r.changeVolume,
+    (s) => s.volume
+  );
+
+  return (
+    <>
+      <input
+        type="range"
+        value={value}
+        onChange={(e) => setValue(Number(e.target.value))}
+        style={{ opacity: isPending ? 0.5 : 1 }}
+      />
+      {isError && <span>Failed to change volume</span>}
+    </>
+  );
+}
+```
+
+### React: Pre-created store instance (imperative access)
+
+```tsx
+import { useState } from 'react';
+
+import { createStore, media, Video } from '@videojs/react';
+
+const { Provider, create, useSelector } = createStore({
+  slices: [media.playback],
+});
+
+function App() {
+  // Create store instance in useState for stable reference
+  const [store] = useState(() => create());
+
+  return (
+    <Provider store={store}>
+      <Video src="video.mp4" />
+      <MyControls />
+    </Provider>
+  );
+}
+```
+
+### React: Frosted skin
+
+```tsx
+import { Video } from '@videojs/react';
+import { Provider, Skin } from '@videojs/react/skins/frosted';
+
+function App() {
+  return (
+    <Provider>
+      <Skin>
+        <Video src="video.mp4" />
+      </Skin>
+    </Provider>
+  );
+}
+```
+
+### React: Extending frosted with custom slices
+
+```tsx
+import { createStore, Video } from '@videojs/react';
+import { extendConfig, Skin } from '@videojs/react/skins/frosted';
+
+import { chaptersSlice } from './slices/chapters';
+
+// Extend frosted config with custom slice (merges with base slices)
+const { Provider, useSlice } = createStore(
+  extendConfig({ slices: [chaptersSlice] })
+);
+
+function App() {
+  return (
+    <Provider>
+      <Skin>
+        <Video src="video.mp4" />
+      </Skin>
+      <ChaptersPanel />
+    </Provider>
+  );
+}
+
+function ChaptersPanel() {
+  const chapters = useSlice(chaptersSlice);
+  if (!chapters.isAvailable) return null;
+  return <div>{chapters.state.markers.map(...)}</div>;
+}
+```
+
+### HTML: Frosted skin (CDN)
+
+```html
+<script type="module">
+  import 'https://cdn.jsdelivr.net/npm/@videojs/html/define/vjs-frosted-skin.js';
+</script>
+
+<vjs-frosted-skin>
+  <video src="video.mp4"></video>
+</vjs-frosted-skin>
+```
+
+### HTML: Custom provider element
+
+```html
+<script type="module" src="./my-player.js"></script>
+
+<my-player>
+  <video src="video.mp4"></video>
+  <!-- custom controls here -->
+</my-player>
+```
+
+Where `my-player.js` contains:
+
+```typescript
+import { createStore, media } from '@videojs/html';
+
+const { StoreMixin } = createStore({
+  slices: [media.playback],
+});
+
+// Create custom element with store provider and auto-attach
+class MyPlayer extends StoreMixin(HTMLElement) {
+  connectedCallback() {
+    const shadow = this.attachShadow({ mode: 'open' });
+    shadow.innerHTML = `<slot></slot>`;
+  }
+}
+
+customElements.define('my-player', MyPlayer);
+```
+
+### HTML: Extending frosted with custom slices
+
+```html
+<script type="module" src="./my-extended-skin.js"></script>
+
+<my-extended-skin>
+  <video src="video.mp4"></video>
+</my-extended-skin>
+```
+
+Where `my-extended-skin.js` contains:
+
+```typescript
+import { extendConfig, FrostedSkinElement } from '@videojs/html/skins/frosted';
+import { createStore } from '@videojs/store/lit';
+
+import { chaptersSlice } from './slices/chapters.js';
+
+// Extend frosted config with custom slice (merges with base slices)
+const { StoreMixin } = createStore(extendConfig({ slices: [chaptersSlice] }));
+
+FrostedSkinElement.define('my-extended-skin', { mixins: [StoreMixin] });
+```
+
+---
+
+## File Structure
+
+```
+packages/utils/src/
+├── array/
+│   ├── uniq-by.ts              # DONE
+│   ├── tests/
+│   │   └── uniq-by.test.ts     # DONE
+│   └── index.ts                # DONE
+└── function/
+    ├── compose-callbacks.ts    # DONE
+    ├── tests/
+    │   └── compose-callbacks.test.ts  # DONE
+    └── index.ts                # DONE
+
+packages/store/src/
+├── core/
+│   ├── store.ts                # existing
+│   ├── slice.ts                # existing
+│   ├── queue.ts                # existing
+│   ├── extend-config.ts        # DONE
+│   ├── tests/
+│   │   └── extend-config.test.ts # DONE
+│   └── index.ts                # DONE
+├── react/
+│   ├── context.ts              # NEW (internal shared context)
+│   ├── create-store.ts         # NEW
+│   ├── hooks.ts                # NEW (base hooks)
+│   ├── types.ts                # NEW
+│   └── index.ts
+└── lit/
+    ├── create-store.ts         # NEW (StoreMixin, StoreProviderMixin, StoreAttachMixin, context)
+    ├── controllers.ts          # NEW (SelectorController, RequestController, etc.)
+    ├── types.ts                # NEW
+    └── index.ts
+
+packages/core/src/dom/
+├── slices/
+│   ├── playback.ts             # NEW
+│   ├── utils.ts                # NEW
+│   └── index.ts                # NEW (+ media namespace)
+├── guards.ts                   # NEW
+└── index.ts
+
+packages/react/src/
+├── media/
+│   └── video.tsx               # NEW
+├── skins/
+│   ├── frosted/
+│   │   ├── store.ts            # NEW
+│   │   ├── skin.tsx            # NEW
+│   │   └── index.ts            # NEW
+│   └── minimal/
+│       └── ...
+└── index.ts
+
+packages/html/src/
+├── define/
+│   └── vjs-frosted-skin.ts     # NEW
+├── skins/
+│   ├── frosted/
+│   │   ├── store.ts            # NEW
+│   │   ├── skin.ts             # NEW
+│   │   ├── styles.css          # NEW
+│   │   └── index.ts            # NEW
+│   └── minimal/
+│       └── ...
+└── index.ts
+```
+
+---
+
+## Implementation Order
+
+1. **Phase 0**: Core utilities **[DONE - PR #283]**
+   - `uniqBy`, `composeCallbacks` utilities ✓
+   - `extendConfig` ✓
+
+2. **Phase 0.5**: Queue Task Refactor
+   - Unified `tasks` map with status discriminator
+   - `PendingTask`, `SuccessTask`, `ErrorTask` types
+   - `reset(key)` method
+   - Update existing tests
+
+3. **Phase 1**: React Bindings (basic)
+   - Shared context, `useStoreContext`
+   - `createStore()` with `inherit` prop
+   - `useStore`, `useSelector`, `useRequest`, `usePending`
+   - `Video` component, package exports
+
+4. **Phase 2**: Lit Bindings (basic)
+   - `createStore()` with mixins
+   - `SelectorController`, `RequestController`, `PendingController`
+   - `@lit/context` integration
+
+5. **Phase 3**: Mutation Hooks/Controllers
+   - React: `useMutation(store, selector)`
+   - Lit: `MutationController(host, store, selector)`
+
+6. **Phase 4**: Optimistic Hooks/Controllers
+   - React: `useOptimistic(store, reqSel, stateSel)`
+   - Lit: `OptimisticController(host, store, reqSel, stateSel)`
+
+7. **Phase 5**: Playback Slice
+   - `media.playback` slice in `@videojs/core/dom`
+
+8. **Phase 6**: Skins
+   - React skin (Provider, Skin, extendConfig)
+   - HTML skin (FrostedSkinElement, extendConfig)
+
+Each phase includes tests.
+
+---
+
+## Package Configuration
+
+### tsdown.config.ts Updates
+
+Each package with new subpaths needs tsdown entry points:
+
+**`packages/html/tsdown.config.ts`:**
+
+```typescript
+import { readdirSync } from 'node:fs';
+
+// Dynamically gather define/ entries
+const defineEntries = readdirSync('src/define')
+  .filter((f) => f.endsWith('.ts'))
+  .reduce(
+    (acc, f) => {
+      const name = f.replace('.ts', '');
+      acc[`define/${name}`] = `src/define/${f}`;
+      return acc;
+    },
+    {} as Record<string, string>
+  );
+
+export default {
+  entry: {
+    index: 'src/index.ts',
+    'skins/frosted': 'src/skins/frosted/index.ts',
+    ...defineEntries,
+  },
+};
+```
+
+**`packages/react/tsdown.config.ts`:**
+
+```typescript
+export default {
+  entry: {
+    index: 'src/index.ts',
+    'skins/frosted': 'src/skins/frosted/index.ts',
+  },
+};
+```
+
+**`packages/store/tsdown.config.ts`:**
+
+```typescript
+export default {
+  entry: {
+    index: 'src/index.ts',
+    react: 'src/react/index.ts',
+    lit: 'src/lit/index.ts',
+  },
+};
+```
+
+### package.json Exports Updates
+
+Use `types` + `default` format to match existing packages.
+
+**`packages/html/package.json`:**
+
+```json
+{
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./define/*": {
+      "default": "./dist/define/*.js"
+    },
+    "./skins/frosted": {
+      "types": "./dist/skins/frosted.d.ts",
+      "default": "./dist/skins/frosted.js"
+    }
+  }
+}
+```
+
+**`packages/react/package.json`:**
+
+```json
+{
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./skins/frosted": {
+      "types": "./dist/skins/frosted.d.ts",
+      "default": "./dist/skins/frosted.js"
+    }
+  }
+}
+```
+
+**`packages/store/package.json`:**
+
+```json
+{
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "default": "./dist/react.js"
+    },
+    "./lit": {
+      "types": "./dist/lit.d.ts",
+      "default": "./dist/lit.js"
+    }
+  }
+}
+```
+
+---
+
+## PR Coordination
+
+### Related Issues
+
+| Issue | Title               | Description                             |
+| ----- | ------------------- | --------------------------------------- |
+| #218  | Store               | Parent tracking issue                   |
+| #285  | Queue Task Refactor | Unified tasks map, status discriminator |
+| #228  | Optimistic Updates  | useMutation, useOptimistic              |
+| #229  | React Bindings      | createStore, hooks, context             |
+| #230  | Lit Bindings        | Controllers, mixins, context            |
+| #239  | Playback Slice      | media.playback slice                    |
+| #231  | Skin Stores         | Skin store configuration                |
+
+### Existing PR
+
+- **PR #281** (`videojs-store-lit`) - Draft with WIP Lit controllers
+  - Action: **Completely override** with new API design from this plan
+
+### PR Strategy
+
+```
+PR #283: Core Utilities [DONE]
+├── uniqBy, composeCallbacks (utils) ✓
+├── extendConfig (store/core) ✓
+└── Tests ✓
+
+PR A: Queue Task Refactor
+├── Unified Task type with status discriminator
+├── PendingTask, SuccessTask, ErrorTask
+├── Single `tasks` map, `reset(key)` method
+├── Update tests
+└── Closes #285
+
+PR B: React Bindings (basic)
+├── createStore, Provider, useStore
+├── useSelector, useRequest, usePending
+├── Video component
+├── References #218
+└── Closes #229
+
+PR C: Lit Bindings (basic)
+├── createStore with mixins
+├── SelectorController, RequestController, PendingController
+├── References #218
+└── Closes #230
+
+PR D: Mutation Hooks/Controllers
+├── React: useMutation
+├── Lit: MutationController
+└── References #228
+
+PR E: Optimistic Hooks/Controllers
+├── React: useOptimistic
+├── Lit: OptimisticController
+└── Closes #228
+
+PR F: Playback Slice
+├── media.playback (core/dom/slices)
+├── Utils, type guards
+├── References #218
+└── Closes #239
+
+PR G: Skins
+├── React skin (Provider, Skin, extendConfig)
+├── HTML skin (FrostedSkinElement, extendConfig)
+├── References #218
+└── Closes #231
+```
+
+### Dependency Graph
+
+```
+PR #283 ───> PR A ───> PR B ───> PR D ───> PR E ───> PR G
+                  └──> PR C ──────────────────────────┘
+                  └──> PR F ──────────────────────────┘
+```
+
+PRs are sequential. PR B, C, F can technically parallel after PR A, but we'll do them sequentially for easier review.
+
+---
+
+## Deferred
+
+- Testing utilities (`@videojs/store/testing`) - separate plan
+- Minimal skin implementation
diff --git a/commitlint.config.js b/commitlint.config.js
index 567afbdf..24854064 100644
--- a/commitlint.config.js
+++ b/commitlint.config.js
@@ -23,6 +23,7 @@ export default {
       'html',
       'icons',
       'packages',
+      'plan',
       'react-native',
       'react',
       'root',
diff --git a/packages/store/src/core/extend-config.ts b/packages/store/src/core/extend-config.ts
new file mode 100644
index 00000000..f656f0ca
--- /dev/null
+++ b/packages/store/src/core/extend-config.ts
@@ -0,0 +1,50 @@
+import type { AnySlice } from './slice';
+import type { StoreConfig } from './store';
+
+import { uniqBy } from '@videojs/utils/array';
+import { composeCallbacks } from '@videojs/utils/function';
+
+/**
+ * Extends a base store config with additional configuration.
+ *
+ * Both configs must have slices targeting the same type (e.g., HTMLMediaElement).
+ *
+ * - **slices**: Deduplicated by id, keeping last occurrence (extension wins)
+ * - **onSetup/onAttach/onError**: Both called (base first, then extension)
+ * - **queue/state**: Extension overrides base if provided
+ *
+ * @example
+ * ```ts
+ * const baseConfig = { slices: [media.playback] };
+ *
+ * // Extend with custom slice (must target same type)
+ * const extendedConfig = extendConfig(baseConfig, {
+ *   slices: [chaptersSlice],
+ *   onSetup: (ctx) => console.log('Extended setup'),
+ * });
+ * ```
+ */
+export function extendConfig<Target, BaseSlices extends AnySlice<Target>[], ExtSlices extends AnySlice<Target>[] = []>(
+  base: StoreConfig<Target, BaseSlices>,
+  extension?: Partial<StoreConfig<Target, ExtSlices>>,
+): StoreConfig<Target, [...BaseSlices, ...ExtSlices]> {
+  type MergedSlices = [...BaseSlices, ...ExtSlices];
+  type Result = StoreConfig<Target, MergedSlices>;
+
+  if (!extension) {
+    return base as unknown as Result;
+  }
+
+  return {
+    slices: uniqBy([...base.slices, ...(extension.slices ?? [])] as MergedSlices, slice => slice.id),
+
+    // Extension overrides if provided
+    queue: extension.queue ?? base.queue,
+    state: extension.state ?? base.state,
+
+    // Compose lifecycle hooks (both called, base first)
+    onSetup: composeCallbacks(base.onSetup, extension.onSetup as typeof base.onSetup),
+    onAttach: composeCallbacks(base.onAttach, extension.onAttach as typeof base.onAttach),
+    onError: composeCallbacks(base.onError, extension.onError as typeof base.onError),
+  } as unknown as Result;
+}
diff --git a/packages/store/src/core/index.ts b/packages/store/src/core/index.ts
index 3327aee3..076fa067 100644
--- a/packages/store/src/core/index.ts
+++ b/packages/store/src/core/index.ts
@@ -1,4 +1,5 @@
 export * from './errors';
+export * from './extend-config';
 export * from './guard';
 export * from './queue';
 export * from './request';
diff --git a/packages/store/src/core/store.ts b/packages/store/src/core/store.ts
index a0a7ea97..135ca973 100644
--- a/packages/store/src/core/store.ts
+++ b/packages/store/src/core/store.ts
@@ -374,6 +374,8 @@ export interface SubscribeOptions<T> {
   equalityFn?: (a: T, b: T) => boolean;
 }
 
+export type AnyStoreConfig = StoreConfig<any, AnySlice[]>;
+
 export interface StoreConfig<Target, Slices extends AnySlice<Target>[]> {
   slices: Slices;
   queue?: Queue<UnionSliceTasks<Slices>>;
diff --git a/packages/store/src/core/tests/extend-config.test.ts b/packages/store/src/core/tests/extend-config.test.ts
new file mode 100644
index 00000000..98ad34db
--- /dev/null
+++ b/packages/store/src/core/tests/extend-config.test.ts
@@ -0,0 +1,230 @@
+import type { StoreConfig } from '../store';
+
+import { describe, expect, it, vi } from 'vitest';
+
+import { extendConfig } from '../extend-config';
+import { Queue } from '../queue';
+import { createSlice } from '../slice';
+import { State } from '../state';
+
+// Test target type
+interface TestTarget {
+  value: number;
+}
+
+// Helper to create test slices with explicit id
+function createTestSlice(name: string, id?: symbol) {
+  const slice = createSlice<TestTarget>()({
+    initialState: { [`${name}State`]: 0 },
+    getSnapshot: () => ({ [`${name}State`]: 0 }),
+    subscribe: () => {},
+    request: {
+      [`${name}Action`]: () => {},
+    },
+  });
+
+  // Override id if provided (for deduplication tests)
+  if (id) {
+    return { ...slice, id };
+  }
+
+  return slice;
+}
+
+// Helper to create a typed base config
+function createBaseConfig<S extends ReturnType<typeof createTestSlice>[]>(
+  slices: S,
+  extra?: Partial<StoreConfig<TestTarget, S>>,
+): StoreConfig<TestTarget, S> {
+  return { slices, ...extra } as StoreConfig<TestTarget, S>;
+}
+
+describe('extendConfig', () => {
+  describe('no extension', () => {
+    it('returns base config unchanged when extension is undefined', () => {
+      const slice = createTestSlice('a');
+      const base = createBaseConfig([slice]);
+
+      const result = extendConfig(base);
+
+      expect(result).toBe(base);
+    });
+
+    it('returns base config unchanged when extension is empty object', () => {
+      const slice = createTestSlice('a');
+      const base = createBaseConfig([slice]);
+
+      const result = extendConfig(base, {});
+
+      expect(result.slices).toHaveLength(1);
+      expect(result.slices[0]).toBe(slice);
+    });
+  });
+
+  describe('slice merging', () => {
+    it('concatenates slices from base and extension', () => {
+      const sliceA = createTestSlice('a');
+      const sliceB = createTestSlice('b');
+
+      const base = createBaseConfig([sliceA]);
+      const extension = { slices: [sliceB] };
+
+      const result = extendConfig(base, extension);
+
+      expect(result.slices).toHaveLength(2);
+      expect(result.slices).toContain(sliceA);
+      expect(result.slices).toContain(sliceB);
+    });
+
+    it('deduplicates slices by id, keeping last occurrence', () => {
+      const sharedId = Symbol('shared');
+      const sliceA = createTestSlice('a', sharedId);
+      const sliceB = createTestSlice('b');
+
+      // Create a "new version" of sliceA with same id
+      const sliceAExtended = createTestSlice('aExtended', sharedId);
+
+      const base = createBaseConfig([sliceA, sliceB]);
+      const extension = { slices: [sliceAExtended] };
+
+      const result = extendConfig(base, extension);
+
+      // Should have sliceB and sliceAExtended (not original sliceA)
+      expect(result.slices).toHaveLength(2);
+      expect(result.slices).toContain(sliceB);
+      expect(result.slices).toContain(sliceAExtended);
+      expect(result.slices).not.toContain(sliceA);
+    });
+  });
+
+  describe('lifecycle hooks', () => {
+    it('composes onSetup hooks, calling base first', () => {
+      const order: string[] = [];
+      const baseOnSetup = vi.fn(() => order.push('base'));
+      const extOnSetup = vi.fn(() => order.push('ext'));
+
+      const slice = createTestSlice('a');
+      const base = createBaseConfig([slice], { onSetup: baseOnSetup });
+      const extension = { onSetup: extOnSetup };
+
+      const result = extendConfig(base, extension);
+      result.onSetup?.({} as any);
+
+      expect(order).toEqual(['base', 'ext']);
+      expect(baseOnSetup).toHaveBeenCalled();
+      expect(extOnSetup).toHaveBeenCalled();
+    });
+
+    it('composes onAttach hooks, calling base first', () => {
+      const order: string[] = [];
+      const baseOnAttach = vi.fn(() => order.push('base'));
+      const extOnAttach = vi.fn(() => order.push('ext'));
+
+      const slice = createTestSlice('a');
+      const base = createBaseConfig([slice], { onAttach: baseOnAttach });
+      const extension = { onAttach: extOnAttach };
+
+      const result = extendConfig(base, extension);
+      result.onAttach?.({} as any);
+
+      expect(order).toEqual(['base', 'ext']);
+    });
+
+    it('composes onError hooks, calling base first', () => {
+      const order: string[] = [];
+      const baseOnError = vi.fn(() => order.push('base'));
+      const extOnError = vi.fn(() => order.push('ext'));
+
+      const slice = createTestSlice('a');
+      const base = createBaseConfig([slice], { onError: baseOnError });
+      const extension = { onError: extOnError };
+
+      const result = extendConfig(base, extension);
+      result.onError?.({} as any);
+
+      expect(order).toEqual(['base', 'ext']);
+    });
+
+    it('returns base hook when extension has none', () => {
+      const baseOnSetup = vi.fn();
+
+      const slice = createTestSlice('a');
+      const base = createBaseConfig([slice], { onSetup: baseOnSetup });
+
+      const result = extendConfig(base, {});
+
+      expect(result.onSetup).toBe(baseOnSetup);
+    });
+
+    it('returns extension hook when base has none', () => {
+      const extOnSetup = vi.fn();
+
+      const slice = createTestSlice('a');
+      const base = createBaseConfig([slice]);
+      const extension = { onSetup: extOnSetup };
+
+      const result = extendConfig(base, extension);
+
+      expect(result.onSetup).toBe(extOnSetup);
+    });
+
+    it('returns undefined when neither has hook', () => {
+      const slice = createTestSlice('a');
+      const base = createBaseConfig([slice]);
+
+      const result = extendConfig(base, {});
+
+      expect(result.onSetup).toBeUndefined();
+    });
+  });
+
+  describe('queue and state', () => {
+    it('uses extension queue when provided', () => {
+      const baseQueue = new Queue();
+      const extQueue = new Queue();
+
+      const slice = createTestSlice('a');
+      const base = createBaseConfig([slice], { queue: baseQueue as any });
+      const extension = { queue: extQueue as any };
+
+      const result = extendConfig(base, extension);
+
+      expect(result.queue).toBe(extQueue);
+    });
+
+    it('falls back to base queue when extension has none', () => {
+      const baseQueue = new Queue();
+
+      const slice = createTestSlice('a');
+      const base = createBaseConfig([slice], { queue: baseQueue as any });
+
+      const result = extendConfig(base, {});
+
+      expect(result.queue).toBe(baseQueue);
+    });
+
+    it('uses extension state factory when provided', () => {
+      const baseState = (initial: any) => new State(initial);
+      const extState = (initial: any) => new State(initial);
+
+      const slice = createTestSlice('a');
+      const base = createBaseConfig([slice], { state: baseState });
+      const extension = { state: extState };
+
+      const result = extendConfig(base, extension);
+
+      expect(result.state).toBe(extState);
+    });
+
+    it('falls back to base state factory when extension has none', () => {
+      const baseState = (initial: any) => new State(initial);
+
+      const slice = createTestSlice('a');
+      const base = createBaseConfig([slice], { state: baseState });
+
+      const result = extendConfig(base, {});
+
+      expect(result.state).toBe(baseState);
+    });
+  });
+});
diff --git a/packages/utils/package.json b/packages/utils/package.json
index ac1a20a5..f10794b5 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -10,10 +10,26 @@
     "videojs"
   ],
   "exports": {
+    "./array": {
+      "types": "./dist/array.d.ts",
+      "default": "./dist/array.js"
+    },
+    "./dom": {
+      "types": "./dist/dom.d.ts",
+      "default": "./dist/dom.js"
+    },
     "./events": {
       "types": "./dist/events.d.ts",
       "default": "./dist/events.js"
     },
+    "./function": {
+      "types": "./dist/function.d.ts",
+      "default": "./dist/function.js"
+    },
+    "./object": {
+      "types": "./dist/object.d.ts",
+      "default": "./dist/object.js"
+    },
     "./predicate": {
       "types": "./dist/predicate.d.ts",
       "default": "./dist/predicate.js"
@@ -21,14 +37,6 @@
     "./types": {
       "types": "./dist/types.d.ts",
       "default": "./dist/types.js"
-    },
-    "./object": {
-      "types": "./dist/object.d.ts",
-      "default": "./dist/object.js"
-    },
-    "./dom": {
-      "types": "./dist/dom.d.ts",
-      "default": "./dist/dom.js"
     }
   },
   "files": [
diff --git a/packages/utils/src/array/index.ts b/packages/utils/src/array/index.ts
new file mode 100644
index 00000000..99cdb292
--- /dev/null
+++ b/packages/utils/src/array/index.ts
@@ -0,0 +1 @@
+export { uniqBy } from './uniq-by';
diff --git a/packages/utils/src/array/tests/uniq-by.test.ts b/packages/utils/src/array/tests/uniq-by.test.ts
new file mode 100644
index 00000000..48bc41d0
--- /dev/null
+++ b/packages/utils/src/array/tests/uniq-by.test.ts
@@ -0,0 +1,59 @@
+import { describe, expect, it } from 'vitest';
+
+import { uniqBy } from '../uniq-by';
+
+describe('uniqBy', () => {
+  it('removes duplicates keeping last occurrence', () => {
+    const arr = [
+      { id: 'a', v: 1 },
+      { id: 'b', v: 2 },
+      { id: 'a', v: 3 },
+    ];
+
+    const result = uniqBy(arr, item => item.id);
+
+    expect(result).toEqual([
+      { id: 'b', v: 2 },
+      { id: 'a', v: 3 },
+    ]);
+  });
+
+  it('returns empty array for empty input', () => {
+    const result = uniqBy([], item => item);
+    expect(result).toEqual([]);
+  });
+
+  it('returns same array when no duplicates', () => {
+    const arr = [{ id: 'a' }, { id: 'b' }, { id: 'c' }];
+
+    const result = uniqBy(arr, item => item.id);
+
+    expect(result).toEqual(arr);
+  });
+
+  it('works with primitive values', () => {
+    const arr = [1, 2, 3, 2, 1];
+
+    const result = uniqBy(arr, item => item);
+
+    expect(result).toEqual([3, 2, 1]);
+  });
+
+  it('preserves order with last occurrence winning', () => {
+    const arr = [
+      { id: 'x', order: 1 },
+      { id: 'y', order: 2 },
+      { id: 'z', order: 3 },
+      { id: 'x', order: 4 },
+      { id: 'y', order: 5 },
+    ];
+
+    const result = uniqBy(arr, item => item.id);
+
+    expect(result).toEqual([
+      { id: 'z', order: 3 },
+      { id: 'x', order: 4 },
+      { id: 'y', order: 5 },
+    ]);
+  });
+});
diff --git a/packages/utils/src/array/uniq-by.ts b/packages/utils/src/array/uniq-by.ts
new file mode 100644
index 00000000..bdb6d861
--- /dev/null
+++ b/packages/utils/src/array/uniq-by.ts
@@ -0,0 +1,16 @@
+/**
+ * Returns array with duplicates removed, keeping the LAST occurrence.
+ * Useful for slice merging where extensions should override base slices.
+ *
+ * @example
+ * ```ts
+ * const slices = [{ id: 'a', v: 1 }, { id: 'b', v: 2 }, { id: 'a', v: 3 }];
+ * uniqBy(slices, s => s.id);
+ * // => [{ id: 'b', v: 2 }, { id: 'a', v: 3 }]
+ * ```
+ */
+export function uniqBy<T, K>(arr: T[], mapper: (item: T) => K): T[] {
+  const seen = new Map<K, number>();
+  arr.forEach((item, i) => seen.set(mapper(item), i));
+  return arr.filter((_, i) => [...seen.values()].includes(i));
+}
diff --git a/packages/utils/src/function/compose-callbacks.ts b/packages/utils/src/function/compose-callbacks.ts
new file mode 100644
index 00000000..e8900f35
--- /dev/null
+++ b/packages/utils/src/function/compose-callbacks.ts
@@ -0,0 +1,23 @@
+import { isNil } from '../predicate';
+
+/**
+ * Composes multiple callbacks into one. All callbacks receive same args, no return value.
+ * Returns undefined if no callbacks provided.
+ *
+ * @example
+ * ```ts
+ * const onSetup = composeCallbacks(base.onSetup, extension.onSetup);
+ * onSetup?.(ctx); // Calls both if defined
+ * ```
+ */
+export function composeCallbacks<T extends (...args: any[]) => void>(...fns: (T | undefined | null)[]): T | undefined {
+  const defined = fns.filter((fn): fn is T => !isNil(fn));
+
+  if (defined.length === 0) return undefined;
+
+  if (defined.length === 1) return defined[0];
+
+  return ((...args: Parameters<T>) => {
+    defined.forEach(fn => fn(...args));
+  }) as T;
+}
diff --git a/packages/utils/src/function/index.ts b/packages/utils/src/function/index.ts
new file mode 100644
index 00000000..3ec15c10
--- /dev/null
+++ b/packages/utils/src/function/index.ts
@@ -0,0 +1 @@
+export { composeCallbacks } from './compose-callbacks';
diff --git a/packages/utils/src/function/tests/compose-callbacks.test.ts b/packages/utils/src/function/tests/compose-callbacks.test.ts
new file mode 100644
index 00000000..e7ffa6a6
--- /dev/null
+++ b/packages/utils/src/function/tests/compose-callbacks.test.ts
@@ -0,0 +1,79 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { composeCallbacks } from '../compose-callbacks';
+
+describe('composeCallbacks', () => {
+  it('returns undefined when no callbacks provided', () => {
+    const result = composeCallbacks();
+    expect(result).toBeUndefined();
+  });
+
+  it('returns undefined when all callbacks are null/undefined', () => {
+    const result = composeCallbacks(null, undefined, null);
+    expect(result).toBeUndefined();
+  });
+
+  it('returns single callback when only one provided', () => {
+    const fn = vi.fn();
+    const result = composeCallbacks(fn);
+
+    expect(result).toBe(fn);
+  });
+
+  it('returns single callback when others are null/undefined', () => {
+    const fn = vi.fn();
+    const result = composeCallbacks(null, fn, undefined);
+
+    expect(result).toBe(fn);
+  });
+
+  it('calls all callbacks with same args', () => {
+    const fn1 = vi.fn();
+    const fn2 = vi.fn();
+    const fn3 = vi.fn();
+
+    const composed = composeCallbacks(fn1, fn2, fn3);
+    composed?.('arg1', 'arg2');
+
+    expect(fn1).toHaveBeenCalledWith('arg1', 'arg2');
+    expect(fn2).toHaveBeenCalledWith('arg1', 'arg2');
+    expect(fn3).toHaveBeenCalledWith('arg1', 'arg2');
+  });
+
+  it('calls callbacks in order', () => {
+    const order: number[] = [];
+    const fn1 = () => order.push(1);
+    const fn2 = () => order.push(2);
+    const fn3 = () => order.push(3);
+
+    const composed = composeCallbacks(fn1, fn2, fn3);
+    composed?.();
+
+    expect(order).toEqual([1, 2, 3]);
+  });
+
+  it('skips null/undefined in the middle', () => {
+    const fn1 = vi.fn();
+    const fn2 = vi.fn();
+
+    const composed = composeCallbacks(fn1, null, undefined, fn2);
+    composed?.();
+
+    expect(fn1).toHaveBeenCalled();
+    expect(fn2).toHaveBeenCalled();
+  });
+
+  it('works with typed callbacks', () => {
+    type OnSetup = (ctx: { name: string }) => void;
+
+    const fn1: OnSetup = vi.fn();
+    const fn2: OnSetup = vi.fn();
+
+    const composed = composeCallbacks<OnSetup>(fn1, fn2);
+    const ctx = { name: 'test' };
+    composed?.(ctx);
+
+    expect(fn1).toHaveBeenCalledWith(ctx);
+    expect(fn2).toHaveBeenCalledWith(ctx);
+  });
+});
diff --git a/packages/utils/tsdown.config.ts b/packages/utils/tsdown.config.ts
index 15ea5f8a..168ee69f 100644
--- a/packages/utils/tsdown.config.ts
+++ b/packages/utils/tsdown.config.ts
@@ -2,11 +2,13 @@ import { defineConfig } from 'tsdown';
 
 export default defineConfig({
   entry: {
+    array: './src/array/index.ts',
+    dom: './src/dom/index.ts',
     events: './src/events/index.ts',
+    function: './src/function/index.ts',
+    object: './src/object/index.ts',
     predicate: './src/predicate/index.ts',
     types: './src/types/index.ts',
-    object: './src/object/index.ts',
-    dom: './src/dom/index.ts',
   },
   platform: 'neutral',
   format: 'es',