diff --git a/commitlint.config.js b/commitlint.config.js
index 85b5ba75..c2f85b9f 100644
--- a/commitlint.config.js
+++ b/commitlint.config.js
@@ -13,6 +13,7 @@ export default {
       2,
       'always',
       [
+        'build',
         'cd',
         'ci',
         'claude',
diff --git a/internal/design/media-api.md b/internal/design/media-api.md
index ac14a2bc..3bb9b929 100644
--- a/internal/design/media-api.md
+++ b/internal/design/media-api.md
@@ -158,66 +158,69 @@ interface MediaApi extends MediaBaseApi,
   // ...
 }
 
-export interface MediaApiProxyTarget extends EventTarget {}
-
-// Proxy mixin that creates a MediaApi from the passed classes and proxies the methods and properties to the attached target.
-export const MediaProxyMixin = <T extends EventTarget>(
-  ...MediaApiTargetClasses: AnyConstructor<T extends [unknown, ...unknown[]] ? T : any>[]
-) => class MediaApiProxy {
-  // Logic that proxies media API to the media target
-  // ...
-
-  // Attach media target to the media instance
-  target: MediaApiProxyTarget;
-  attach(target: MediaApiProxyTarget): void;
-  detach(): void;
-
-  // Proxy handlers
-  get(prop: keyof MediaApiProxyTarget): any;
-  set(prop: keyof MediaApiProxyTarget, val: any): void;
-  call(prop: keyof MediaApiProxyTarget, ...args: any[]): any;
+export interface Delegate {
+  attach?(target: EventTarget): void;
+  detach?(): void;
 }
 
-// Size optimized for the most common use case of proxying HTMLMediaElement.
-export class MediaApiProxy extends MediaProxyMixin<HTMLMediaElement>(HTMLMediaElement, EventTarget) {}
-export class VideoApiProxy extends MediaProxyMixin<HTMLVideoElement>(HTMLVideoElement, HTMLMediaElement, EventTarget) {}
-export class AudioApiProxy extends MediaProxyMixin<HTMLAudioElement>(HTMLAudioElement, HTMLMediaElement, EventTarget) {}
+// DelegateMixin intercepts get/set/call to route through a Delegate before falling through to the base class.
+export function DelegateMixin<Base extends Constructor, D extends Constructor<Delegate>>(
+  BaseClass: Base,
+  DelegateClass: D
+): Constructor<InstanceType<Base> & InstanceType<D>>;
+
+
+// ProxyMixin creates a class that proxies methods and properties to the attached target.
+export const ProxyMixin = <T extends EventTarget>(
+  PrimaryClass: AnyConstructor<T>,
+  ...AdditionalClasses: AnyConstructor<EventTarget>[]
+) => class MediaProxy {
+  target: EventTarget | null;
+  attach(target: EventTarget): void;
+  detach(): void;
+
+  get(prop: keyof EventTarget): any;
+  set(prop: keyof EventTarget, val: any): void;
+  call(prop: keyof EventTarget, ...args: any[]): any;
+}
+
+// Pre-built proxy for video elements.
+export const VideoProxy = ProxyMixin(HTMLVideoElement, HTMLMediaElement, EventTarget);
+
+// CustomVideoElement wraps a native <video> in a custom element.
+export const CustomVideoElement = CustomMediaMixin(HTMLElement, { tag: 'video' });
+export const CustomAudioElement = CustomMediaMixin(HTMLElement, { tag: 'audio' });
 ```
 
-### Example of using the media API Proxy
+### Example: HLS delegate
+
+A delegate intercepts property access for engine-specific behavior (e.g. `src`), while the base class (CustomVideoElement or VideoProxy) handles standard HTMLMediaElement properties.
 
 ```ts
-import type { MediaApiProxyTarget } from '@videojs/core';
-import type { AnyConstructor } from '@videojs/utils/types';
 import Hls from 'hls.js';
-import { VideoApiProxy } from './proxy';
+import { type Delegate, DelegateMixin } from '../core/media/delegate';
+import { CustomVideoElement } from './custom-media-element';
+import { VideoProxy } from './proxy';
 
-// This is used by the web component because it needs to extend HTMLElement!
-export const HlsMediaMixin = <T extends AnyConstructor<EventTarget>>(Super: T) => {
-  class HlsMedia extends Super {
-    engine = new Hls();
+class HlsMediaDelegateBase implements Delegate {
+  #engine = Hls.isSupported() ? new Hls() : null;
 
-    attach(target: MediaApiProxyTarget): void {
-      super.attach?.(target);
-      this.engine.attachMedia(target as HTMLMediaElement);
-    }
+  get engine(): Hls | null { return this.#engine; }
 
-    detach(): void {
-      super.detach?.();
-      this.engine.detachMedia();
-    }
-
-    set src(value: string) {
-      this.engine.loadSource(value);
-    }
-
-    get src(): string {
-      return this.engine.url ?? '';
-    }
+  attach(target: EventTarget): void {
+    this.#engine?.attachMedia(target as HTMLMediaElement);
   }
-  return HlsMedia as T & typeof HlsMedia;
-};
 
-// This is used by the React component.
-export class HlsMedia extends HlsMediaMixin(VideoApiProxy) {}
+  detach(): void { this.#engine?.detachMedia(); }
+  destroy(): void { this.#engine?.destroy(); }
+
+  set src(src: string) { this.#engine?.loadSource(src); }
+  get src(): string { return this.#engine?.url ?? ''; }
+}
+
+// Web component — extends HTMLElement via CustomVideoElement.
+export class HlsCustomMedia extends DelegateMixin(CustomVideoElement, HlsMediaDelegateBase) {}
+
+// React / framework — extends EventTarget via VideoProxy.
+export class HlsMedia extends DelegateMixin(VideoProxy, HlsMediaDelegateBase) {}
 ```
diff --git a/package.json b/package.json
index 3682804c..9ac8aa37 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "prettier-plugin-astro": "^0.14.1",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "react": "^18.0.0",
+    "rimraf": "^6.1.3",
     "react-compiler-runtime": "^1.0.0",
     "react-dom": "^18.0.0",
     "simple-git-hooks": "^2.13.1",
diff --git a/packages/core/package.json b/packages/core/package.json
index 2bed854f..f4d30e53 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -44,14 +44,15 @@
     "dev": "pnpm run build:watch",
     "test": "vitest run",
     "test:watch": "vitest",
-    "clean": "rm -rf dist types"
+    "clean": "rimraf --glob dist types '*.tsbuildinfo'"
   },
   "dependencies": {
     "@videojs/spf": "workspace:*",
     "@videojs/store": "workspace:*",
     "@videojs/utils": "workspace:*",
     "dashjs": "^5.0.0",
-    "hls.js": "^1.6.7"
+    "hls.js": "^1.6.7",
+    "mux-embed": "^5.17.10"
   },
   "devDependencies": {
     "jsdom": "^26.1.0",
diff --git a/packages/core/src/core/media/delegate.ts b/packages/core/src/core/media/delegate.ts
index 67633e72..e3a5d913 100644
--- a/packages/core/src/core/media/delegate.ts
+++ b/packages/core/src/core/media/delegate.ts
@@ -7,6 +7,21 @@ export interface Delegate {
   detach?(): void;
 }
 
+// Detects readonly vs writable properties via conditional type identity check.
+type IfEquals<X, Y, A, B> = (<T>() => T extends X ? 1 : 2) extends <T>() => T extends Y ? 1 : 2 ? A : B;
+
+type WritableKeys<T> = {
+  [K in keyof T]-?: IfEquals<{ [Q in K]: T[K] }, { -readonly [Q in K]: T[K] }, K, never>;
+}[keyof T];
+
+type SettableKeys<T> = {
+  [K in WritableKeys<T>]: T[K] extends (...args: any[]) => any ? never : K;
+}[WritableKeys<T>];
+
+export type InferDelegateProps<D extends abstract new (...args: any[]) => any> = Partial<
+  Pick<InstanceType<D>, SettableKeys<InstanceType<D>>>
+>;
+
 /**
  * Mixin that intercepts `get`, `set`, and `call` to delegate property access
  * and method calls to an instance of `DelegateClass` before falling through
diff --git a/packages/core/src/dom/media/dash/index.ts b/packages/core/src/dom/media/dash/index.ts
index c60f8763..7da7984c 100644
--- a/packages/core/src/dom/media/dash/index.ts
+++ b/packages/core/src/dom/media/dash/index.ts
@@ -1,10 +1,10 @@
 import * as dashjs from 'dashjs';
 
 import { type Delegate, DelegateMixin } from '../../../core/media/delegate';
-import { CustomMediaMixin } from '../custom-media-element';
-import { MediaProxyMixin } from '../proxy';
+import { CustomVideoElement } from '../custom-media-element';
+import { VideoProxy } from '../proxy';
 
-export class DashMediaDelegateBase implements Delegate {
+export class DashMediaDelegate implements Delegate {
   #engine: dashjs.MediaPlayerClass;
 
   constructor() {
@@ -39,10 +39,7 @@ export class DashMediaDelegateBase implements Delegate {
 }
 
 // This is used by the web component because it needs to extend HTMLElement!
-export class DashCustomMedia extends DelegateMixin(
-  CustomMediaMixin(globalThis.HTMLElement ?? class {}, { tag: 'video' }),
-  DashMediaDelegateBase
-) {}
+export class DashCustomMedia extends DelegateMixin(CustomVideoElement, DashMediaDelegate) {}
 
 // This is used by the React component.
-export class DashMedia extends DelegateMixin(MediaProxyMixin, DashMediaDelegateBase) {}
+export class DashMedia extends DelegateMixin(VideoProxy, DashMediaDelegate) {}
diff --git a/packages/core/src/dom/media/hls/index.ts b/packages/core/src/dom/media/hls/index.ts
index 2ae498a6..52ca984b 100644
--- a/packages/core/src/dom/media/hls/index.ts
+++ b/packages/core/src/dom/media/hls/index.ts
@@ -1,10 +1,25 @@
 import Hls from 'hls.js';
 
 import { type Delegate, DelegateMixin } from '../../../core/media/delegate';
-import { CustomMediaMixin } from '../custom-media-element';
-import { MediaProxyMixin } from '../proxy';
+import { CustomVideoElement } from '../custom-media-element';
+import { VideoProxy } from '../proxy';
 import { HlsMediaTextTracksMixin } from './text-tracks';
 
+export { Hls };
+
+export type PlaybackType = (typeof PlaybackTypes)[keyof typeof PlaybackTypes];
+export type SourceType = (typeof SourceTypes)[keyof typeof SourceTypes];
+
+export const PlaybackTypes = {
+  MSE: 'mse',
+  NATIVE: 'native',
+};
+
+export const SourceTypes = {
+  M3U8: 'application/vnd.apple.mpegurl',
+  MP4: 'video/mp4',
+};
+
 const defaultConfig = {
   backBufferLength: 30,
   renderTextTracksNatively: false,
@@ -14,40 +29,138 @@ const defaultConfig = {
 };
 
 export class HlsMediaDelegateBase implements Delegate {
-  #engine = Hls.isSupported() ? new Hls(defaultConfig) : null;
+  #target: EventTarget | null = null;
+  #engine: Hls | null = null;
+  #loadRequested?: Promise<void> | null;
+  #src: string = '';
+  #debug: boolean = false;
+  #type: SourceType | undefined;
+  #preferPlayback: PlaybackType | undefined = 'mse';
 
+  constructor() {
+    this.#initialize();
+  }
+
+  #initialize(): void {
+    this.#engine?.destroy();
+    this.#engine = null;
+
+    if (this.type !== SourceTypes.M3U8) return;
+    if (this.#preferPlayback === PlaybackTypes.NATIVE) return;
+    if (!Hls.isSupported()) return;
+
+    this.#engine = new Hls({
+      ...defaultConfig,
+      debug: this.#debug,
+    });
+
+    if (this.#target) {
+      this.#engine.attachMedia(this.#target as HTMLMediaElement);
+    }
+
+    if (this.#src) {
+      this.#requestLoad();
+    }
+  }
+
+  /** The target element, or `null` when not attached. */
+  get target(): EventTarget | null | undefined {
+    return this.#target ?? null;
+  }
+
+  /** The underlying hls.js instance, or `null` when using native playback. */
   get engine(): Hls | null {
     return this.#engine;
   }
 
+  /** Explicit source type. When unset, inferred from the source URL extension. */
+  get type(): SourceType | undefined {
+    return this.#type ?? inferSourceType(this.#src);
+  }
+
+  set type(value: SourceType | undefined) {
+    if (this.#type === value) return;
+    this.#type = value;
+    this.#initialize();
+  }
+
+  /** Enable hls.js debug logging. Re-initializes the engine when changed. */
+  get debug(): boolean {
+    return this.#debug;
+  }
+
+  set debug(value: boolean) {
+    if (this.#debug === value) return;
+    this.#debug = value;
+    this.#initialize();
+  }
+
+  /**
+   * Whether to prefer `'mse'` (hls.js) or `'native'` (browser-built-in) HLS
+   * playback. Changing this re-initializes the delegate.
+   */
+  get preferPlayback(): PlaybackType | undefined {
+    return this.#preferPlayback;
+  }
+
+  set preferPlayback(value: PlaybackType | undefined) {
+    if (this.#preferPlayback === value) return;
+    this.#preferPlayback = value;
+    this.#initialize();
+  }
+
+  /** The HLS source URL to load. */
+  set src(src: string) {
+    this.#src = src;
+    this.#requestLoad();
+  }
+
+  get src(): string {
+    return this.#src;
+  }
+
+  async #requestLoad() {
+    if (this.#loadRequested) return;
+    await (this.#loadRequested = Promise.resolve());
+    this.#loadRequested = null;
+    this.load();
+  }
+
+  load(): void {
+    if (this.#engine) {
+      this.#engine.loadSource(this.#src);
+    } else if (this.#target) {
+      (this.#target as HTMLMediaElement).src = this.#src;
+    }
+  }
+
   attach(target: EventTarget): void {
+    this.#target = target;
     this.#engine?.attachMedia(target as HTMLMediaElement);
   }
 
   detach(): void {
     this.#engine?.detachMedia();
+    this.#target = null;
   }
 
   destroy(): void {
     this.#engine?.destroy();
-  }
-
-  set src(src: string) {
-    this.#engine?.loadSource(src);
-  }
-
-  get src(): string {
-    return this.#engine?.url ?? '';
+    this.#engine = null;
+    this.#target = null;
   }
 }
 
-const HlsMediaDelegate = HlsMediaTextTracksMixin(HlsMediaDelegateBase);
+function inferSourceType(src: string): SourceType {
+  const path = src.split(/[?#]/)[0] ?? '';
+  if (path.endsWith('.mp4')) return SourceTypes.MP4;
+  return SourceTypes.M3U8;
+}
+
+export const HlsMediaDelegate = HlsMediaTextTracksMixin(HlsMediaDelegateBase);
 
 // This is used by the web component because it needs to extend HTMLElement!
-export class HlsCustomMedia extends DelegateMixin(
-  CustomMediaMixin(globalThis.HTMLElement ?? class {}, { tag: 'video' }),
-  HlsMediaDelegate
-) {}
+export class HlsCustomMedia extends DelegateMixin(CustomVideoElement, HlsMediaDelegate) {}
 
 // This is used by the React component.
-export class HlsMedia extends DelegateMixin(MediaProxyMixin, HlsMediaDelegate) {}
+export class HlsMedia extends DelegateMixin(VideoProxy, HlsMediaDelegate) {}
diff --git a/packages/core/src/dom/media/mux/env.ts b/packages/core/src/dom/media/mux/env.ts
new file mode 100644
index 00000000..d42a3346
--- /dev/null
+++ b/packages/core/src/dom/media/mux/env.ts
@@ -0,0 +1,11 @@
+const getEnvPlayerVersion = () => {
+  try {
+    // @ts-expect-error
+    return __PLAYER_VERSION__ as string;
+  } catch {}
+  return 'UNKNOWN';
+};
+
+const player_version: string = getEnvPlayerVersion();
+
+export const getPlayerVersion = () => player_version;
diff --git a/packages/core/src/dom/media/mux/index.ts b/packages/core/src/dom/media/mux/index.ts
new file mode 100644
index 00000000..c5a2b07d
--- /dev/null
+++ b/packages/core/src/dom/media/mux/index.ts
@@ -0,0 +1,224 @@
+import Mux from 'mux-embed';
+
+import { type Delegate, DelegateMixin } from '../../../core/media/delegate';
+import { CustomVideoElement } from '../custom-media-element';
+import { Hls, HlsMediaDelegate } from '../hls';
+import { VideoProxy } from '../proxy';
+import { getPlayerVersion } from './env';
+import type { MuxDataSdk } from './types';
+
+const MUX_VIDEO_DOMAIN = 'mux.com';
+
+export class MuxMediaDelegate extends HlsMediaDelegate implements Delegate {
+  static PLAYER_SOFTWARE_NAME = '';
+
+  #playbackId: string | null = null;
+  #customDomain: string = MUX_VIDEO_DOMAIN;
+  #MuxDataSdk: MuxDataSdk | undefined = Mux;
+  #beaconCollectionDomain: string | undefined;
+  #disableCookies: boolean = false;
+  #metadata: Record<string, any> | undefined;
+  #envKey: string | undefined;
+  #playerSoftwareName: string | undefined = (this.constructor as typeof MuxMediaDelegate).PLAYER_SOFTWARE_NAME;
+  #playerSoftwareVersion: string | undefined = getPlayerVersion();
+  #playerInitTime: number | undefined = this.#generatePlayerInitTime();
+
+  get playbackId() {
+    return this.#playbackId;
+  }
+
+  set playbackId(value: string | null) {
+    if (this.#playbackId === value) return;
+    this.#playbackId = value;
+    this.#syncSrc();
+  }
+
+  get customDomain(): string {
+    return this.#customDomain;
+  }
+
+  set customDomain(value: string) {
+    const normalized = value || MUX_VIDEO_DOMAIN;
+    if (this.#customDomain === normalized) return;
+    this.#customDomain = normalized;
+    this.#syncSrc();
+  }
+
+  get MuxDataSdk() {
+    return this.#MuxDataSdk;
+  }
+
+  set MuxDataSdk(value) {
+    this.#MuxDataSdk = value;
+  }
+
+  get beaconCollectionDomain(): string | undefined {
+    return this.#beaconCollectionDomain;
+  }
+
+  set beaconCollectionDomain(value: string | undefined) {
+    this.#beaconCollectionDomain = value;
+  }
+
+  get disableCookies(): boolean {
+    return this.#disableCookies;
+  }
+
+  set disableCookies(value: boolean) {
+    this.#disableCookies = value;
+  }
+
+  get envKey(): string | undefined {
+    return this.#envKey;
+  }
+
+  set envKey(value: string | undefined) {
+    this.#envKey = value;
+  }
+
+  get playerSoftwareName(): string | undefined {
+    return this.#playerSoftwareName;
+  }
+
+  set playerSoftwareName(value: string | undefined) {
+    this.#playerSoftwareName = value;
+  }
+
+  get playerSoftwareVersion(): string | undefined {
+    return this.#playerSoftwareVersion;
+  }
+
+  set playerSoftwareVersion(value: string | undefined) {
+    this.#playerSoftwareVersion = value;
+  }
+
+  get playerInitTime(): number | undefined {
+    return this.#playerInitTime;
+  }
+
+  set playerInitTime(value: number | undefined) {
+    this.#playerInitTime = value;
+  }
+
+  get metadata(): Record<string, any> | undefined {
+    return this.#metadata;
+  }
+
+  set metadata(value: Record<string, any> | undefined) {
+    this.#metadata = value;
+  }
+
+  attach(target: EventTarget): void {
+    super.attach(target);
+  }
+
+  detach(): void {
+    this.#MuxDataSdk?.destroyMonitor(this.target as HTMLMediaElement);
+
+    super.detach();
+  }
+
+  load(): void {
+    this.#initializeMuxDataSdk();
+    super.load();
+  }
+
+  #syncSrc(): void {
+    this.src = this.#playbackId ? toSrc(this.#playbackId, this.#customDomain) : '';
+  }
+
+  #initializeMuxDataSdk(): void {
+    const target = this.target as HTMLMediaElement;
+    if (!this.#MuxDataSdk || !target || target.mux) return;
+
+    const {
+      debug,
+      beaconCollectionDomain,
+      disableCookies,
+      engine: hlsjs,
+      envKey: env_key,
+      playerSoftwareName: player_software_name,
+      playerSoftwareVersion: player_software_version,
+      playerInitTime: player_init_time,
+      metadata = {},
+    } = this;
+
+    const { view_session_id = this.#MuxDataSdk?.utils.generateUUID() } = metadata;
+    const video_id = toVideoId(this);
+    metadata.view_session_id = view_session_id;
+    metadata.video_id = video_id;
+
+    this.#MuxDataSdk?.monitor(this.target as HTMLMediaElement, {
+      debug,
+      ...(beaconCollectionDomain ? { beaconCollectionDomain } : {}),
+      ...(disableCookies ? { disableCookies } : {}),
+      ...(hlsjs ? { hlsjs } : {}),
+      Hls,
+      data: {
+        ...(env_key ? { env_key } : {}),
+        ...(player_software_name ? { player_software_name } : {}),
+        // NOTE: Adding this because there appears to be some instability on whether
+        // player_software_name or player_software "wins" for Mux Data (CJP)
+        ...(player_software_name ? { player_software: player_software_name } : {}),
+        ...(player_software_version ? { player_software_version } : {}),
+        ...(player_init_time ? { player_init_time } : {}),
+        // Use any metadata passed in programmatically (which may override the defaults above)
+        ...metadata,
+      },
+    });
+  }
+
+  #generatePlayerInitTime(): number | undefined {
+    if (!this.#MuxDataSdk) return undefined;
+    return this.#MuxDataSdk.utils.now();
+  }
+}
+
+function toSrc(playbackId: string, customDomain: string): string {
+  return `https://stream.${customDomain}/${playbackId}.m3u8`;
+}
+
+type MuxSrcProps = Pick<MuxMediaDelegate, 'playbackId' | 'src' | 'customDomain'>;
+
+export function toVideoId(props: MuxSrcProps & Pick<MuxMediaDelegate, 'metadata'>): string | undefined {
+  if (props.metadata?.video_id) return props.metadata.video_id;
+  if (!isMuxVideoSrc(props)) return props.src;
+  return toPlaybackIdFromParameterized(props.playbackId) ?? toPlaybackIdFromSrc(props.src) ?? props.src;
+}
+
+function toPlaybackIdFromParameterized(playbackId: MuxMediaDelegate['playbackId']): string | undefined {
+  if (!playbackId) return undefined;
+  const [id] = playbackId.split('?');
+  return id || undefined;
+}
+
+export function toPlaybackIdFromSrc(src: MuxMediaDelegate['src']): string | undefined {
+  if (!src || !src.startsWith('https://stream.')) return undefined;
+  const [playbackId] = new URL(src).pathname.slice(1).split(/\.m3u8|\//);
+  return playbackId || undefined;
+}
+
+export function isMuxVideoSrc({ playbackId, src, customDomain }: MuxSrcProps): boolean {
+  if (playbackId) return true;
+  if (typeof src !== 'string') return false;
+  const base = window?.location.href;
+  const hostname = new URL(src, base).hostname.toLocaleLowerCase();
+
+  return hostname.includes(MUX_VIDEO_DOMAIN) || (!!customDomain && hostname.includes(customDomain.toLocaleLowerCase()));
+}
+
+export class MuxVideoDelegate extends MuxMediaDelegate {
+  static PLAYER_SOFTWARE_NAME = 'mux-video';
+}
+
+export class MuxAudioDelegate extends MuxMediaDelegate {
+  static PLAYER_SOFTWARE_NAME = 'mux-audio';
+}
+
+export class MuxCustomMedia extends DelegateMixin(CustomVideoElement, MuxMediaDelegate) {}
+
+export class MuxMedia extends DelegateMixin(VideoProxy, MuxMediaDelegate) {}
+
+export class MuxCustomVideo extends DelegateMixin(CustomVideoElement, MuxVideoDelegate) {}
+
+export class MuxVideo extends DelegateMixin(VideoProxy, MuxVideoDelegate) {}
diff --git a/packages/core/src/dom/media/mux/tests/index.test.ts b/packages/core/src/dom/media/mux/tests/index.test.ts
new file mode 100644
index 00000000..d3ba1e74
--- /dev/null
+++ b/packages/core/src/dom/media/mux/tests/index.test.ts
@@ -0,0 +1,76 @@
+import { describe, expect, it } from 'vitest';
+import { MuxMediaDelegate } from '..';
+
+describe('MuxMediaDelegate', () => {
+  it('defaults playbackId to null', () => {
+    const delegate = new MuxMediaDelegate();
+    expect(delegate.playbackId).toBeNull();
+  });
+
+  it('defaults customDomain to mux.com', () => {
+    const delegate = new MuxMediaDelegate();
+    expect(delegate.customDomain).toBe('mux.com');
+  });
+
+  it('sets src when playbackId is set', () => {
+    const delegate = new MuxMediaDelegate();
+    delegate.playbackId = 'abc123';
+
+    expect(delegate.src).toBe('https://stream.mux.com/abc123.m3u8');
+  });
+
+  it('uses customDomain in the generated src', () => {
+    const delegate = new MuxMediaDelegate();
+    delegate.customDomain = 'example.com';
+    delegate.playbackId = 'abc123';
+
+    expect(delegate.src).toBe('https://stream.example.com/abc123.m3u8');
+  });
+
+  it('updates src when customDomain changes after playbackId', () => {
+    const delegate = new MuxMediaDelegate();
+    delegate.playbackId = 'abc123';
+    expect(delegate.src).toBe('https://stream.mux.com/abc123.m3u8');
+
+    delegate.customDomain = 'custom.tv';
+    expect(delegate.src).toBe('https://stream.custom.tv/abc123.m3u8');
+  });
+
+  it('falls back to default domain when customDomain is set to empty', () => {
+    const delegate = new MuxMediaDelegate();
+    delegate.customDomain = 'custom.tv';
+    delegate.playbackId = 'abc123';
+    expect(delegate.src).toBe('https://stream.custom.tv/abc123.m3u8');
+
+    delegate.customDomain = '';
+    expect(delegate.src).toBe('https://stream.mux.com/abc123.m3u8');
+  });
+
+  it('does not update src when playbackId is set to the same value', () => {
+    const delegate = new MuxMediaDelegate();
+    delegate.playbackId = 'abc123';
+    expect(delegate.src).toBe('https://stream.mux.com/abc123.m3u8');
+
+    delegate.src = 'https://override.example.com/video.m3u8';
+    delegate.playbackId = 'abc123';
+    expect(delegate.src).toBe('https://override.example.com/video.m3u8');
+  });
+
+  it('does not trigger syncSrc when customDomain is set to empty while already default', () => {
+    const delegate = new MuxMediaDelegate();
+    delegate.playbackId = 'abc123';
+    expect(delegate.src).toBe('https://stream.mux.com/abc123.m3u8');
+
+    delegate.src = 'https://override.example.com/video.m3u8';
+    delegate.customDomain = '';
+    expect(delegate.src).toBe('https://override.example.com/video.m3u8');
+  });
+
+  it('clears src when playbackId is null and customDomain changes', () => {
+    const delegate = new MuxMediaDelegate();
+    delegate.src = 'https://manual.example.com/video.m3u8';
+    delegate.customDomain = 'custom.tv';
+
+    expect(delegate.src).toBe('');
+  });
+});
diff --git a/packages/core/src/dom/media/mux/types.ts b/packages/core/src/dom/media/mux/types.ts
new file mode 100644
index 00000000..d19dd5b0
--- /dev/null
+++ b/packages/core/src/dom/media/mux/types.ts
@@ -0,0 +1,2 @@
+/// <reference path="../../../../node_modules/mux-embed/dist/types/mux-embed.d.ts" preserve="true" />
+export type { Mux as MuxDataSdk } from 'mux-embed';
diff --git a/packages/core/src/dom/media/proxy.ts b/packages/core/src/dom/media/proxy.ts
index f685d91d..d8f34639 100644
--- a/packages/core/src/dom/media/proxy.ts
+++ b/packages/core/src/dom/media/proxy.ts
@@ -1,6 +1,6 @@
 import { ProxyMixin } from '../../core/media/proxy';
 
-export const MediaProxyMixin = ProxyMixin(
+export const VideoProxy = ProxyMixin(
   globalThis.HTMLVideoElement ?? class {},
   globalThis.HTMLMediaElement ?? class {},
   globalThis.EventTarget ?? class {}
diff --git a/packages/core/src/dom/media/simple-hls/index.ts b/packages/core/src/dom/media/simple-hls/index.ts
index 74910f4f..6cc75944 100644
--- a/packages/core/src/dom/media/simple-hls/index.ts
+++ b/packages/core/src/dom/media/simple-hls/index.ts
@@ -1,13 +1,10 @@
 import { SpfMedia as SpfMediaDelegate } from '@videojs/spf/dom';
 import { DelegateMixin } from '../../../core/media/delegate';
-import { CustomMediaMixin } from '../custom-media-element';
-import { MediaProxyMixin } from '../proxy';
+import { CustomVideoElement } from '../custom-media-element';
+import { VideoProxy } from '../proxy';
 
 // This is used by the web component because it needs to extend HTMLElement!
-export class SimpleHlsCustomMedia extends DelegateMixin(
-  CustomMediaMixin(globalThis.HTMLElement ?? class {}, { tag: 'video' }),
-  SpfMediaDelegate
-) {}
+export class SimpleHlsCustomMedia extends DelegateMixin(CustomVideoElement, SpfMediaDelegate) {}
 
 // This is used by the React component.
-export class SimpleHlsMedia extends DelegateMixin(MediaProxyMixin, SpfMediaDelegate) {}
+export class SimpleHlsMedia extends DelegateMixin(VideoProxy, SpfMediaDelegate) {}
diff --git a/packages/core/tsdown.config.ts b/packages/core/tsdown.config.ts
index 886703cc..70161f9a 100644
--- a/packages/core/tsdown.config.ts
+++ b/packages/core/tsdown.config.ts
@@ -1,5 +1,6 @@
 import type { UserConfig } from 'tsdown';
 import { defineConfig } from 'tsdown';
+import packageJson from './package.json' with { type: 'json' };
 
 type BuildMode = 'dev' | 'default';
 
@@ -12,6 +13,7 @@ const createConfig = (mode: BuildMode): UserConfig => ({
     'dom/media/dash/index': './src/dom/media/dash/index.ts',
     'dom/media/hls/index': './src/dom/media/hls/index.ts',
     'dom/media/custom-media-element/index': './src/dom/media/custom-media-element/index.ts',
+    'dom/media/mux/index': './src/dom/media/mux/index.ts',
     'dom/media/simple-hls/index': './src/dom/media/simple-hls/index.ts',
   },
   platform: 'neutral',
@@ -26,6 +28,7 @@ const createConfig = (mode: BuildMode): UserConfig => ({
   outDir: `dist/${mode}`,
   define: {
     __DEV__: mode === 'dev' ? 'true' : 'false',
+    __PLAYER_VERSION__: JSON.stringify(packageJson.version),
   },
   dts:
     mode === 'dev'
diff --git a/packages/element/package.json b/packages/element/package.json
index 920fe90b..bba08d3f 100644
--- a/packages/element/package.json
+++ b/packages/element/package.json
@@ -33,7 +33,7 @@
     "build:watch": "tsdown --watch ./src --no-clean",
     "dev": "pnpm run build:watch",
     "test": "vitest run",
-    "clean": "rm -rf dist types"
+    "clean": "rimraf --glob dist types '*.tsbuildinfo'"
   },
   "dependencies": {
     "@lit/context": "^1.1.0"
diff --git a/packages/html/package.json b/packages/html/package.json
index d21da978..046630be 100644
--- a/packages/html/package.json
+++ b/packages/html/package.json
@@ -97,7 +97,7 @@
     "build:watch": "tsdown --watch ./src --no-clean",
     "dev": "pnpm run build:watch",
     "test": "vitest run",
-    "clean": "rm -rf dist cdn types"
+    "clean": "rimraf --glob dist cdn types '*.tsbuildinfo'"
   },
   "dependencies": {
     "@videojs/core": "workspace:*",
diff --git a/packages/html/src/cdn/media/mux-video.ts b/packages/html/src/cdn/media/mux-video.ts
new file mode 100644
index 00000000..9ff14aa5
--- /dev/null
+++ b/packages/html/src/cdn/media/mux-video.ts
@@ -0,0 +1 @@
+import '../../define/media/mux-video';
diff --git a/packages/html/src/define/media/mux-video.ts b/packages/html/src/define/media/mux-video.ts
new file mode 100644
index 00000000..b8243924
--- /dev/null
+++ b/packages/html/src/define/media/mux-video.ts
@@ -0,0 +1,14 @@
+import { MuxVideo } from '../../media/mux-video';
+import { safeDefine } from '../safe-define';
+
+export class MuxVideoElement extends MuxVideo {
+  static readonly tagName = 'mux-video';
+}
+
+safeDefine(MuxVideoElement);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [MuxVideoElement.tagName]: MuxVideoElement;
+  }
+}
diff --git a/packages/html/src/media/dash-video/index.ts b/packages/html/src/media/dash-video/index.ts
index 4f2971cf..cf722041 100644
--- a/packages/html/src/media/dash-video/index.ts
+++ b/packages/html/src/media/dash-video/index.ts
@@ -1,28 +1,13 @@
-import { DashCustomMedia } from '@videojs/core/dom/media/dash';
+import { DashCustomMedia, DashMediaDelegate } from '@videojs/core/dom/media/dash';
 import { MediaAttachMixin } from '../../store/media-attach-mixin';
+import { MediaPropsMixin } from '../../utils/media-props-mixin';
 
-export class DashVideo extends MediaAttachMixin(DashCustomMedia) {
-  static getTemplateHTML(attrs: Record<string, string>): string {
-    const { src, ...rest } = attrs;
-    // biome-ignore lint/complexity/noThisInStatic: intentional use of super
-    return super.getTemplateHTML(rest);
-  }
-
+export class DashVideo extends MediaPropsMixin(MediaAttachMixin(DashCustomMedia), DashMediaDelegate) {
   constructor() {
     super();
     this.attach(this.target);
   }
 
-  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void {
-    if (attrName !== 'src') {
-      super.attributeChangedCallback(attrName, oldValue, newValue);
-    }
-
-    if (attrName === 'src' && oldValue !== newValue) {
-      this.src = newValue ?? '';
-    }
-  }
-
   disconnectedCallback(): void {
     super.disconnectedCallback?.();
 
diff --git a/packages/html/src/media/hls-video/index.ts b/packages/html/src/media/hls-video/index.ts
index c943232f..6c27c234 100644
--- a/packages/html/src/media/hls-video/index.ts
+++ b/packages/html/src/media/hls-video/index.ts
@@ -1,13 +1,8 @@
-import { HlsCustomMedia } from '@videojs/core/dom/media/hls';
+import { HlsCustomMedia, HlsMediaDelegate } from '@videojs/core/dom/media/hls';
 import { MediaAttachMixin } from '../../store/media-attach-mixin';
+import { MediaPropsMixin } from '../../utils/media-props-mixin';
 
-export class HlsVideo extends MediaAttachMixin(HlsCustomMedia) {
-  static getTemplateHTML(attrs: Record<string, string>): string {
-    const { src, ...rest } = attrs;
-    // biome-ignore lint/complexity/noThisInStatic: intentional use of super
-    return super.getTemplateHTML(rest);
-  }
-
+export class HlsVideo extends MediaPropsMixin(MediaAttachMixin(HlsCustomMedia), HlsMediaDelegate) {
   constructor() {
     super();
     // TODO: If we like to support native media elements that
@@ -17,16 +12,6 @@ export class HlsVideo extends MediaAttachMixin(HlsCustomMedia) {
     this.attach(this.target);
   }
 
-  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void {
-    if (attrName !== 'src') {
-      super.attributeChangedCallback(attrName, oldValue, newValue);
-    }
-
-    if (attrName === 'src' && oldValue !== newValue) {
-      this.src = newValue ?? '';
-    }
-  }
-
   disconnectedCallback(): void {
     super.disconnectedCallback?.();
 
diff --git a/packages/html/src/media/mux-video/index.ts b/packages/html/src/media/mux-video/index.ts
new file mode 100644
index 00000000..0539598a
--- /dev/null
+++ b/packages/html/src/media/mux-video/index.ts
@@ -0,0 +1,18 @@
+import { MuxCustomVideo, MuxMediaDelegate } from '@videojs/core/dom/media/mux';
+import { MediaAttachMixin } from '../../store/media-attach-mixin';
+import { MediaPropsMixin } from '../../utils/media-props-mixin';
+
+export class MuxVideo extends MediaPropsMixin(MediaAttachMixin(MuxCustomVideo), MuxMediaDelegate) {
+  constructor() {
+    super();
+    this.attach(this.target);
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback?.();
+
+    if (!this.hasAttribute('keep-alive')) {
+      this.destroy();
+    }
+  }
+}
diff --git a/packages/html/src/media/simple-hls-video/index.ts b/packages/html/src/media/simple-hls-video/index.ts
index 8ca00387..7bfecc2b 100644
--- a/packages/html/src/media/simple-hls-video/index.ts
+++ b/packages/html/src/media/simple-hls-video/index.ts
@@ -1,29 +1,11 @@
 import { SimpleHlsCustomMedia } from '@videojs/core/dom/media/simple-hls';
+import { SpfMedia } from '@videojs/spf/dom';
 import { MediaAttachMixin } from '../../store/media-attach-mixin';
+import { MediaPropsMixin } from '../../utils/media-props-mixin';
 
-export class SimpleHlsVideo extends MediaAttachMixin(SimpleHlsCustomMedia) {
-  static getTemplateHTML(attrs: Record<string, string>): string {
-    const { src, ...rest } = attrs;
-    // biome-ignore lint/complexity/noThisInStatic: intentional use of super
-    return super.getTemplateHTML(rest);
-  }
-
+export class SimpleHlsVideo extends MediaPropsMixin(MediaAttachMixin(SimpleHlsCustomMedia), SpfMedia) {
   constructor() {
     super();
     this.attach(this.target);
   }
-
-  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void {
-    if (attrName !== 'src') {
-      super.attributeChangedCallback(attrName, oldValue, newValue);
-    }
-
-    if (attrName === 'src' && oldValue !== newValue) {
-      this.src = newValue ?? '';
-    }
-
-    if (attrName === 'preload' && oldValue !== newValue) {
-      this.preload = (newValue ?? '') as '' | 'none' | 'metadata' | 'auto';
-    }
-  }
 }
diff --git a/packages/html/src/utils/media-props-mixin.ts b/packages/html/src/utils/media-props-mixin.ts
new file mode 100644
index 00000000..0815c5be
--- /dev/null
+++ b/packages/html/src/utils/media-props-mixin.ts
@@ -0,0 +1,61 @@
+import type { AnyConstructor } from '@videojs/utils/types';
+
+type AnyClass = abstract new (...args: any[]) => any;
+
+function camelToKebab(str: string): string {
+  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+}
+
+function buildAttrPropMap(DelegateClass: AnyClass): Map<string, string> {
+  const map = new Map<string, string>();
+  for (let proto = DelegateClass.prototype; proto && proto !== Object.prototype; proto = Object.getPrototypeOf(proto)) {
+    for (const key of Object.getOwnPropertyNames(proto)) {
+      const desc = Object.getOwnPropertyDescriptor(proto, key);
+      if (desc?.set) map.set(camelToKebab(key), key);
+    }
+  }
+  return map;
+}
+
+/**
+ * Mixin that intercepts `getTemplateHTML` and `attributeChangedCallback` to
+ * handle delegate-owned properties. Delegate props are stripped from template
+ * HTML attrs and routed through the property setter in `attributeChangedCallback`
+ * instead of being forwarded to the inner native element.
+ */
+export function MediaPropsMixin<Base extends AnyConstructor<HTMLElement>>(
+  BaseClass: Base,
+  DelegateClass: AnyClass
+): Base {
+  const attrToProp = buildAttrPropMap(DelegateClass);
+
+  class MediaPropsElement extends (BaseClass as any) {
+    static get observedAttributes(): string[] {
+      // biome-ignore lint/complexity/noThisInStatic: intentional use of super
+      return [...new Set([...(super.observedAttributes ?? []), ...attrToProp.keys()])];
+    }
+
+    static getTemplateHTML(attrs: Record<string, string>): string {
+      const filtered = { ...attrs };
+      for (const attr of attrToProp.keys()) {
+        delete filtered[attr];
+      }
+      // biome-ignore lint/complexity/noThisInStatic: intentional use of super
+      return super.getTemplateHTML(filtered);
+    }
+
+    attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void {
+      const prop = attrToProp.get(attrName);
+      if (prop) {
+        if (oldValue !== newValue) {
+          (this as any)[prop] = typeof (this as any)[prop] === 'boolean' ? newValue !== null : (newValue ?? '');
+        }
+        return;
+      }
+
+      super.attributeChangedCallback?.(attrName, oldValue, newValue);
+    }
+  }
+
+  return MediaPropsElement as unknown as Base;
+}
diff --git a/packages/html/tsdown.cdn.config.ts b/packages/html/tsdown.cdn.config.ts
index 115a37b4..4a251cae 100644
--- a/packages/html/tsdown.cdn.config.ts
+++ b/packages/html/tsdown.cdn.config.ts
@@ -13,7 +13,7 @@ const skinsDir = resolve(dirname(fileURLToPath(import.meta.url)), '../skins/src'
 const buildModes: BuildMode[] = ['dev', 'prod'];
 
 const presets = ['video', 'video-minimal', 'audio', 'audio-minimal', 'background'];
-const media = ['hls-video', 'simple-hls-video', 'dash-video'];
+const media = ['hls-video', 'mux-video', 'simple-hls-video', 'dash-video'];
 
 const entries = [
   ...presets.map((name) => ({ src: `src/cdn/${name}.ts`, name })),
diff --git a/packages/icons/package.json b/packages/icons/package.json
index ffd9b917..5952aae2 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -50,7 +50,7 @@
     "build": "node --import tsx scripts/build.ts",
     "build:watch": "pnpm run build -- --watch",
     "dev": "pnpm run build:watch",
-    "clean": "rm -rf dist"
+    "clean": "rimraf dist"
   },
   "dependencies": {
     "svgo": "^4.0.1"
diff --git a/packages/react/package.json b/packages/react/package.json
index 06bb92b5..794ff516 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -67,7 +67,7 @@
     "dev": "pnpm build:watch",
     "test": "vitest run",
     "test:watch": "vitest",
-    "clean": "rm -rf dist types"
+    "clean": "rimraf --glob dist types '*.tsbuildinfo'"
   },
   "peerDependencies": {
     "react": ">=16.8.0"
diff --git a/packages/react/src/media/dash-video/index.tsx b/packages/react/src/media/dash-video/index.tsx
index 97401990..fef05f19 100644
--- a/packages/react/src/media/dash-video/index.tsx
+++ b/packages/react/src/media/dash-video/index.tsx
@@ -1,4 +1,5 @@
-import { DashMedia } from '@videojs/core/dom/media/dash';
+import type { InferDelegateProps } from '@videojs/core';
+import { DashMedia, DashMediaDelegate } from '@videojs/core/dom/media/dash';
 import type { PropsWithChildren, VideoHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
 import { attachMediaElement } from '../../utils/attach-media-element';
@@ -6,7 +7,8 @@ import { mediaProps } from '../../utils/media-props';
 import { useComposedRefs } from '../../utils/use-composed-refs';
 import { useMediaInstance } from '../../utils/use-media-instance';
 
-export type DashVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>>;
+export type DashVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>> &
+  InferDelegateProps<typeof DashMediaDelegate>;
 
 export const DashVideo = forwardRef<HTMLVideoElement, DashVideoProps>(({ children, ...props }, ref) => {
   const mediaApi = useMediaInstance(DashMedia);
@@ -14,7 +16,7 @@ export const DashVideo = forwardRef<HTMLVideoElement, DashVideoProps>(({ childre
   const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);
 
   return (
-    <video ref={composedRef} {...mediaProps(mediaApi, props)}>
+    <video ref={composedRef} {...mediaProps(mediaApi, DashMediaDelegate, props)}>
       {children}
     </video>
   );
diff --git a/packages/react/src/media/hls-video/index.tsx b/packages/react/src/media/hls-video/index.tsx
index 635a1e4d..a4d0c06f 100644
--- a/packages/react/src/media/hls-video/index.tsx
+++ b/packages/react/src/media/hls-video/index.tsx
@@ -1,4 +1,5 @@
-import { HlsMedia } from '@videojs/core/dom/media/hls';
+import type { InferDelegateProps } from '@videojs/core';
+import { HlsMedia, HlsMediaDelegate } from '@videojs/core/dom/media/hls';
 import type { PropsWithChildren, VideoHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
 import { attachMediaElement } from '../../utils/attach-media-element';
@@ -6,7 +7,8 @@ import { mediaProps } from '../../utils/media-props';
 import { useComposedRefs } from '../../utils/use-composed-refs';
 import { useMediaInstance } from '../../utils/use-media-instance';
 
-export type HlsVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>>;
+export type HlsVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>> &
+  InferDelegateProps<typeof HlsMediaDelegate>;
 
 export const HlsVideo = forwardRef<HTMLVideoElement, HlsVideoProps>(({ children, ...props }, ref) => {
   const mediaApi = useMediaInstance(HlsMedia);
@@ -14,7 +16,7 @@ export const HlsVideo = forwardRef<HTMLVideoElement, HlsVideoProps>(({ children,
   const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);
 
   return (
-    <video ref={composedRef} {...mediaProps(mediaApi, props)}>
+    <video ref={composedRef} {...mediaProps(mediaApi, HlsMediaDelegate, props)}>
       {children}
     </video>
   );
diff --git a/packages/react/src/media/mux-video/index.tsx b/packages/react/src/media/mux-video/index.tsx
new file mode 100644
index 00000000..2bc57116
--- /dev/null
+++ b/packages/react/src/media/mux-video/index.tsx
@@ -0,0 +1,25 @@
+import type { InferDelegateProps } from '@videojs/core';
+import { MuxMediaDelegate, MuxVideo as MuxVideoApi } from '@videojs/core/dom/media/mux';
+import type { PropsWithChildren, VideoHTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+import { attachMediaElement } from '../../utils/attach-media-element';
+import { mediaProps } from '../../utils/media-props';
+import { useComposedRefs } from '../../utils/use-composed-refs';
+import { useMediaInstance } from '../../utils/use-media-instance';
+
+export type MuxVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>> &
+  InferDelegateProps<typeof MuxMediaDelegate>;
+
+export const MuxVideo = forwardRef<HTMLVideoElement, MuxVideoProps>(({ children, ...props }, ref) => {
+  const mediaApi = useMediaInstance(MuxVideoApi);
+
+  const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);
+
+  return (
+    <video ref={composedRef} {...mediaProps(mediaApi, MuxMediaDelegate, props)}>
+      {children}
+    </video>
+  );
+});
+
+export default MuxVideo;
diff --git a/packages/react/src/media/simple-hls-video/index.tsx b/packages/react/src/media/simple-hls-video/index.tsx
index 35567b9b..23a79585 100644
--- a/packages/react/src/media/simple-hls-video/index.tsx
+++ b/packages/react/src/media/simple-hls-video/index.tsx
@@ -1,4 +1,5 @@
 import { SimpleHlsMedia } from '@videojs/core/dom/media/simple-hls';
+import { SpfMedia } from '@videojs/spf/dom';
 import type { PropsWithChildren, VideoHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
 import { attachMediaElement } from '../../utils/attach-media-element';
@@ -14,7 +15,7 @@ export const SimpleHlsVideo = forwardRef<HTMLVideoElement, SimpleHlsVideoProps>(
   const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);
 
   return (
-    <video ref={composedRef} {...mediaProps(mediaApi, props)}>
+    <video ref={composedRef} {...mediaProps(mediaApi, SpfMedia, props)}>
       {children}
     </video>
   );
diff --git a/packages/react/src/utils/media-props.ts b/packages/react/src/utils/media-props.ts
index 73ac956c..0ec8df79 100644
--- a/packages/react/src/utils/media-props.ts
+++ b/packages/react/src/utils/media-props.ts
@@ -1,20 +1,32 @@
 import type { MediaApi } from '@videojs/core/dom';
-import type { VideoHTMLAttributes } from 'react';
 
-interface VideoProps extends VideoHTMLAttributes<HTMLVideoElement> {}
+type AnyClass = abstract new (...args: any[]) => any;
 
-export function mediaProps(media: MediaApi, props: VideoProps) {
-  const { src, ...remainingProps } = props;
-
-  // Preload can still be passed as a prop to the native media element
-  if (props.preload && media.preload !== props.preload) {
-    media.preload = props.preload as '' | 'none' | 'metadata' | 'auto';
+function getSettableProps(DelegateClass: AnyClass): Set<string> {
+  const props = new Set<string>();
+  for (let proto = DelegateClass.prototype; proto && proto !== Object.prototype; proto = Object.getPrototypeOf(proto)) {
+    for (const key of Object.getOwnPropertyNames(proto)) {
+      const desc = Object.getOwnPropertyDescriptor(proto, key);
+      if (desc?.set) props.add(key);
+    }
   }
+  return props;
+}
 
-  if (media.src !== src) {
-    media.src = src ?? '';
+export function mediaProps(media: MediaApi, DelegateClass: AnyClass, props: Record<string, any>) {
+  const delegateKeys = getSettableProps(DelegateClass);
+  const rest: Record<string, any> = {};
+
+  for (const key of Object.keys(props)) {
+    if (delegateKeys.has(key)) {
+      const value = props[key];
+      if ((media as any)[key] !== value) {
+        (media as any)[key] = value;
+      }
+    } else {
+      rest[key] = props[key];
+    }
   }
 
-  // The remaining props are passed to the native media element
-  return remainingProps;
+  return rest;
 }
diff --git a/packages/sandbox/app/constants.ts b/packages/sandbox/app/constants.ts
index a9bb3d91..59f1fd3d 100644
--- a/packages/sandbox/app/constants.ts
+++ b/packages/sandbox/app/constants.ts
@@ -1,4 +1,12 @@
 export const SKINS = ['default', 'minimal'] as const;
 export const PLATFORMS = ['html', 'react', 'cdn'] as const;
 export const STYLINGS = ['css', 'tailwind'] as const;
-export const PRESETS = ['video', 'hls-video', 'simple-hls-video', 'dash-video', 'audio', 'background-video'] as const;
+export const PRESETS = [
+  'video',
+  'hls-video',
+  'mux-video',
+  'simple-hls-video',
+  'dash-video',
+  'audio',
+  'background-video',
+] as const;
diff --git a/packages/sandbox/app/shared/sources.ts b/packages/sandbox/app/shared/sources.ts
index 8800bfe6..b1ee6ac0 100644
--- a/packages/sandbox/app/shared/sources.ts
+++ b/packages/sandbox/app/shared/sources.ts
@@ -4,46 +4,54 @@ export const SOURCES = {
   'hls-1': {
     label: 'HLS - Big Buck Bunny',
     url: 'https://stream.mux.com/VcmKA6aqzIzlg3MayLJDnbF55kX00mds028Z65QxvBYaA.m3u8',
+    playbackId: 'VcmKA6aqzIzlg3MayLJDnbF55kX00mds028Z65QxvBYaA',
     type: 'hls',
     subType: 'ts',
   },
   'hls-2': {
     label: 'HLS - Elephants Dream',
     url: 'https://stream.mux.com/Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008.m3u8',
+    playbackId: 'Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008',
     type: 'hls',
     subType: 'ts',
   },
   'hls-3': {
     label: 'HLS - Dancing Dude',
     url: 'https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4.m3u8',
+    playbackId: 'lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4',
     type: 'hls',
     subType: 'mp4',
   },
   'hls-4': {
     label: 'HLS - View From A Blue Moon Trailer',
     url: 'https://stream.mux.com/lyrKpPcGfqyzeI00jZAfW6MvP6GNPrkML.m3u8',
+    playbackId: 'lyrKpPcGfqyzeI00jZAfW6MvP6GNPrkML',
     type: 'hls',
     subType: 'mp4',
   },
   'hls-5': {
     label: 'HLS - Mad Max Fury Road Trailer',
     url: 'https://stream.mux.com/JX01bG8eB4uaoV3OpDuK602rBfvdSgrMObjwuUOBn4JrQ.m3u8',
+    playbackId: 'JX01bG8eB4uaoV3OpDuK602rBfvdSgrMObjwuUOBn4JrQ',
     type: 'hls',
     subType: 'mp4',
   },
   'mp4-1': {
     label: 'MP4 - Dancing Dude',
     url: 'https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4',
+    playbackId: 'lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4',
     type: 'mp4',
   },
   'dash-1': {
     label: 'DASH - Big Buck Bunny',
     url: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
+    playbackId: null,
     type: 'dash',
   },
   'dash-2': {
     label: 'DASH - Envivio Test Stream',
     url: 'https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd',
+    playbackId: null,
     type: 'dash',
   },
 } as const;
@@ -53,6 +61,7 @@ export type SourceId = keyof typeof SOURCES;
 export const SOURCE_IDS = Object.keys(SOURCES) as SourceId[];
 export const MP4_SOURCE_IDS = SOURCE_IDS.filter((id) => SOURCES[id].type === 'mp4');
 export const DASH_SOURCE_IDS = SOURCE_IDS.filter((id) => SOURCES[id].type === 'dash');
+export const MUX_SOURCE_IDS = SOURCE_IDS.filter((id) => !!SOURCES[id].playbackId);
 export const DEFAULT_SOURCE: SourceId = 'hls-1';
 export const DEFAULT_AUDIO_SOURCE: SourceId = 'mp4-1';
 export const DEFAULT_DASH_SOURCE: SourceId = 'dash-1';
diff --git a/packages/sandbox/app/shell/app.tsx b/packages/sandbox/app/shell/app.tsx
index 6e7cbdec..70189bb9 100644
--- a/packages/sandbox/app/shell/app.tsx
+++ b/packages/sandbox/app/shell/app.tsx
@@ -4,7 +4,9 @@ import {
   DASH_SOURCE_IDS,
   DEFAULT_AUDIO_SOURCE,
   DEFAULT_DASH_SOURCE,
+  DEFAULT_SOURCE,
   MP4_SOURCE_IDS,
+  MUX_SOURCE_IDS,
   SOURCE_IDS,
   SOURCES,
 } from '@app/shared/sources';
@@ -69,6 +71,13 @@ export function App() {
     }
   }, [preset, source, setSource]);
 
+  // Constrain source to Mux playbackId sources when switching to mux-video
+  useEffect(() => {
+    if (preset === 'mux-video' && !SOURCES[source].playbackId) {
+      setSource(DEFAULT_SOURCE);
+    }
+  }, [preset, source, setSource]);
+
   // CDN and background video do not have a Tailwind skin variant.
   useEffect(() => {
     if ((platform === 'cdn' || preset === 'background-video') && styling === 'tailwind') {
@@ -76,7 +85,14 @@ export function App() {
     }
   }, [platform, preset, styling]);
 
-  const availableSources = preset === 'audio' ? MP4_SOURCE_IDS : preset === 'dash-video' ? DASH_SOURCE_IDS : SOURCE_IDS;
+  const availableSources =
+    preset === 'audio'
+      ? MP4_SOURCE_IDS
+      : preset === 'dash-video'
+        ? DASH_SOURCE_IDS
+        : preset === 'mux-video'
+          ? MUX_SOURCE_IDS
+          : SOURCE_IDS;
 
   const handleSourceChange = useCallback((value: string) => setSource(value as SourceId), [setSource]);
 
@@ -96,6 +112,7 @@ export function App() {
         availableSources={availableSources}
         isBackgroundVideo={preset === 'background-video'}
         isSimpleHlsVideo={preset === 'simple-hls-video'}
+        isMuxVideo={preset === 'mux-video'}
         platforms={PLATFORMS}
         stylings={STYLINGS}
         presets={PRESETS}
diff --git a/packages/sandbox/app/shell/navbar.tsx b/packages/sandbox/app/shell/navbar.tsx
index 1f6434b2..f3f82c74 100644
--- a/packages/sandbox/app/shell/navbar.tsx
+++ b/packages/sandbox/app/shell/navbar.tsx
@@ -16,6 +16,7 @@ type NavbarProps = {
   availableSources: readonly SourceId[];
   isBackgroundVideo: boolean;
   isSimpleHlsVideo: boolean;
+  isMuxVideo: boolean;
   platforms: readonly Platform[];
   stylings: readonly Styling[];
   presets: readonly Preset[];
@@ -33,6 +34,7 @@ const PLATFORM_LABELS: Record<Platform, string> = {
 const PRESET_LABELS: Record<Preset, string> = {
   video: 'Video',
   'hls-video': 'HLS Video',
+  'mux-video': 'Mux Video',
   'simple-hls-video': 'Simple HLS Video',
   'dash-video': 'DASH Video',
   audio: 'Audio',
@@ -53,6 +55,7 @@ export function Navbar({
   availableSources,
   isBackgroundVideo,
   isSimpleHlsVideo,
+  isMuxVideo,
   platforms,
   stylings,
   presets,
@@ -104,13 +107,13 @@ export function Navbar({
           label="Source"
           value={source}
           onChange={onSourceChange}
-          options={
-            isSimpleHlsVideo
-              ? availableSources
-                  .filter((id) => sources[id].subType === 'mp4')
-                  .map((id) => ({ value: id, label: sources[id].label }))
-              : availableSources.map((id) => ({ value: id, label: sources[id].label }))
-          }
+          options={availableSources
+            .filter((id) => {
+              if (isSimpleHlsVideo) return sources[id].subType === 'mp4';
+              if (isMuxVideo) return sources[id].type !== 'dash';
+              return true;
+            })
+            .map((id) => ({ value: id, label: sources[id].label }))}
           disabled={isBackgroundVideo}
         />
       </div>
diff --git a/packages/sandbox/templates/html-mux-video/index.html b/packages/sandbox/templates/html-mux-video/index.html
new file mode 100644
index 00000000..f8a7fdc8
--- /dev/null
+++ b/packages/sandbox/templates/html-mux-video/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sandbox — HTML Mux Video</title>
+    <link rel="preconnect" href="https://rsms.me/" />
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+  </head>
+  <body class="font-sans">
+    <div id="root" class="flex justify-center items-center min-h-screen"></div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>
diff --git a/packages/sandbox/templates/html-mux-video/main.ts b/packages/sandbox/templates/html-mux-video/main.ts
new file mode 100644
index 00000000..546b42eb
--- /dev/null
+++ b/packages/sandbox/templates/html-mux-video/main.ts
@@ -0,0 +1,49 @@
+import '@app/styles.css';
+import '@videojs/html/video/player';
+import '@videojs/html/media/mux-video';
+import { createHtmlSandboxState, createLatestLoader } from '@app/shared/html/sandbox-state';
+import { loadVideoSkinTag } from '@app/shared/html/skins';
+import { renderStoryboard } from '@app/shared/html/storyboard';
+import { onSkinChange, onSourceChange } from '@app/shared/sandbox-listener';
+import { getPosterSrc, getStoryboardSrc, SOURCES } from '@app/shared/sources';
+
+const html = String.raw;
+
+const state = createHtmlSandboxState();
+const loadLatest = createLatestLoader();
+
+async function render() {
+  const tag = await loadLatest(() => loadVideoSkinTag(state.skin, state.styling));
+  if (!tag) return;
+
+  const storyboard = getStoryboardSrc(state.source);
+  const poster = getPosterSrc(state.source);
+
+  const sourceAttr =
+    SOURCES[state.source].type === 'mp4'
+      ? `src="${SOURCES[state.source].url}"`
+      : `playback-id="${SOURCES[state.source].playbackId}"`;
+
+  document.getElementById('root')!.innerHTML = html`
+    <video-player>
+      <${tag} class="w-full aspect-video max-w-4xl mx-auto">
+        <mux-video ${sourceAttr} debug playsinline crossorigin="anonymous">
+          ${renderStoryboard(storyboard)}
+        </mux-video>
+        ${poster ? html`<img slot="poster" src="${poster}" alt="Video poster" />` : ''}
+      </${tag}>
+    </video-player>
+  `;
+}
+
+render();
+
+onSkinChange((skin) => {
+  state.skin = skin;
+  render();
+});
+
+onSourceChange((source) => {
+  state.source = source;
+  render();
+});
diff --git a/packages/sandbox/templates/react-mux-video/index.html b/packages/sandbox/templates/react-mux-video/index.html
new file mode 100644
index 00000000..2596b060
--- /dev/null
+++ b/packages/sandbox/templates/react-mux-video/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sandbox — React Mux Video</title>
+    <link rel="preconnect" href="https://rsms.me/" />
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+  </head>
+  <body class="font-sans">
+    <div id="root" class="flex justify-center items-center min-h-screen"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
diff --git a/packages/sandbox/templates/react-mux-video/main.tsx b/packages/sandbox/templates/react-mux-video/main.tsx
new file mode 100644
index 00000000..039a192e
--- /dev/null
+++ b/packages/sandbox/templates/react-mux-video/main.tsx
@@ -0,0 +1,45 @@
+import '@app/styles.css';
+import { VideoProvider } from '@app/shared/react/providers';
+import { VideoSkinComponent } from '@app/shared/react/skins';
+import { Storyboard } from '@app/shared/react/storyboard';
+import { usePoster } from '@app/shared/react/use-poster';
+import { useSkin } from '@app/shared/react/use-skin';
+import { useSource } from '@app/shared/react/use-source';
+import { useStoryboard } from '@app/shared/react/use-storyboard';
+import { SOURCES } from '@app/shared/sources';
+import type { Styling } from '@app/types';
+import { MuxVideo } from '@videojs/react/media/mux-video';
+import { useMemo } from 'react';
+import { createRoot } from 'react-dom/client';
+
+function readStyling(): Styling {
+  return new URLSearchParams(location.search).get('styling') === 'tailwind' ? 'tailwind' : 'css';
+}
+
+function App() {
+  const skin = useSkin();
+  const source = useSource();
+  const styling = useMemo(readStyling, []);
+  const poster = usePoster();
+  const storyboard = useStoryboard();
+
+  const sourceAttr =
+    SOURCES[source].type === 'mp4' ? { src: SOURCES[source].url } : { playbackId: SOURCES[source].playbackId };
+
+  return (
+    <VideoProvider>
+      <VideoSkinComponent
+        poster={poster}
+        skin={skin}
+        styling={styling}
+        className="w-full aspect-video max-w-4xl mx-auto"
+      >
+        <MuxVideo {...sourceAttr} debug playsInline crossOrigin="anonymous">
+          <Storyboard src={storyboard} />
+        </MuxVideo>
+      </VideoSkinComponent>
+    </VideoProvider>
+  );
+}
+
+createRoot(document.getElementById('root')!).render(<App />);
diff --git a/packages/skins/package.json b/packages/skins/package.json
index 0b8e0ebe..85c3e6dc 100644
--- a/packages/skins/package.json
+++ b/packages/skins/package.json
@@ -29,7 +29,7 @@
     "build": "tsdown",
     "build:watch": "tsdown --watch ./src --no-clean",
     "dev": "pnpm run build:watch",
-    "clean": "rm -rf dist types"
+    "clean": "rimraf --glob dist types '*.tsbuildinfo'"
   },
   "dependencies": {
     "@videojs/utils": "workspace:*"
diff --git a/packages/spf/package.json b/packages/spf/package.json
index ffdba00d..f9bf65ec 100644
--- a/packages/spf/package.json
+++ b/packages/spf/package.json
@@ -45,7 +45,7 @@
     "dev": "pnpm run build:watch",
     "test": "vitest run",
     "test:watch": "vitest",
-    "clean": "rm -rf dist types",
+    "clean": "rimraf --glob dist types '*.tsbuildinfo'",
     "size": "node scripts/measure-size.js --playback-engine",
     "size:all": "node scripts/measure-size.js --all"
   },
diff --git a/packages/store/package.json b/packages/store/package.json
index de10cff3..bcc04df0 100644
--- a/packages/store/package.json
+++ b/packages/store/package.json
@@ -39,7 +39,7 @@
     "dev": "pnpm run build:watch",
     "test": "vitest run",
     "test:watch": "vitest",
-    "clean": "rm -rf dist types"
+    "clean": "rimraf --glob dist types '*.tsbuildinfo'"
   },
   "peerDependencies": {
     "@videojs/element": "workspace:*",
diff --git a/packages/utils/package.json b/packages/utils/package.json
index 9414bc92..dd38c1ff 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -65,7 +65,7 @@
     "dev": "pnpm run build:watch",
     "test": "vitest run",
     "test:watch": "vitest",
-    "clean": "rm -rf dist types"
+    "clean": "rimraf --glob dist types '*.tsbuildinfo'"
   },
   "devDependencies": {
     "tsdown": "^0.21.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b4877bd1..171bebae 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -59,6 +59,9 @@ importers:
       react-dom:
         specifier: ^18.0.0
         version: 18.3.1(react@18.3.1)
+      rimraf:
+        specifier: ^6.1.3
+        version: 6.1.3
       simple-git-hooks:
         specifier: ^2.13.1
         version: 2.13.1
@@ -89,6 +92,9 @@ importers:
       hls.js:
         specifier: ^1.6.7
         version: 1.6.15
+      mux-embed:
+        specifier: ^5.17.10
+        version: 5.17.10
     devDependencies:
       jsdom:
         specifier: ^26.1.0
@@ -927,24 +933,28 @@ packages:
     engines: {node: '>=14.21.3'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@biomejs/cli-linux-arm64@2.4.6':
     resolution: {integrity: sha512-kMLaI7OF5GN1Q8Doymjro1P8rVEoy7BKQALNz6fiR8IC1WKduoNyteBtJlHT7ASIL0Cx2jR6VUOBIbcB1B8pew==}
     engines: {node: '>=14.21.3'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@biomejs/cli-linux-x64-musl@2.4.6':
     resolution: {integrity: sha512-C9s98IPDu7DYarjlZNuzJKTjVHN03RUnmHV5htvqsx6vEUXCDSJ59DNwjKVD5XYoSS4N+BYhq3RTBAL8X6svEg==}
     engines: {node: '>=14.21.3'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@biomejs/cli-linux-x64@2.4.6':
     resolution: {integrity: sha512-oHXmUFEoH8Lql1xfc3QkFLiC1hGR7qedv5eKNlC185or+o4/4HiaU7vYODAH3peRCfsuLr1g6v2fK9dFFOYdyw==}
     engines: {node: '>=14.21.3'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@biomejs/cli-win32-arm64@2.4.6':
     resolution: {integrity: sha512-xzThn87Pf3YrOGTEODFGONmqXpTwUNxovQb72iaUOdcw8sBSY3+3WD8Hm9IhMYLnPi0n32s3L3NWU6+eSjfqFg==}
@@ -1715,89 +1725,105 @@ packages:
     resolution: {integrity: sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-arm@1.2.4':
     resolution: {integrity: sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-ppc64@1.2.4':
     resolution: {integrity: sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-riscv64@1.2.4':
     resolution: {integrity: sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-s390x@1.2.4':
     resolution: {integrity: sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-x64@1.2.4':
     resolution: {integrity: sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
     resolution: {integrity: sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-libvips-linuxmusl-x64@1.2.4':
     resolution: {integrity: sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-linux-arm64@0.34.5':
     resolution: {integrity: sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-arm@0.34.5':
     resolution: {integrity: sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-ppc64@0.34.5':
     resolution: {integrity: sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-riscv64@0.34.5':
     resolution: {integrity: sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-s390x@0.34.5':
     resolution: {integrity: sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-x64@0.34.5':
     resolution: {integrity: sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linuxmusl-arm64@0.34.5':
     resolution: {integrity: sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-linuxmusl-x64@0.34.5':
     resolution: {integrity: sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-wasm32@0.34.5':
     resolution: {integrity: sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==}
@@ -2384,36 +2410,42 @@ packages:
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-arm-musl@2.5.6':
     resolution: {integrity: sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-linux-arm64-glibc@2.5.6':
     resolution: {integrity: sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-arm64-musl@2.5.6':
     resolution: {integrity: sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-linux-x64-glibc@2.5.6':
     resolution: {integrity: sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-x64-musl@2.5.6':
     resolution: {integrity: sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-wasm@2.5.6':
     resolution: {integrity: sha512-byAiBZ1t3tXQvc8dMD/eoyE7lTXYorhn+6uVW5AC+JGI1KtJC/LvDche5cfUE+qiefH+Ybq0bUCJU0aB1cSHUA==}
@@ -2493,36 +2525,42 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rolldown/binding-linux-arm64-musl@1.0.0-rc.9':
     resolution: {integrity: sha512-JA1QRW31ogheAIRhIg9tjMfsYbglXXYGNPLdPEYrwFxdbkQCAzvpSCSHCDWNl4hTtrol8WeboCSEpjdZK8qrCg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.9':
     resolution: {integrity: sha512-aOKU9dJheda8Kj8Y3w9gnt9QFOO+qKPAl8SWd7JPHP+Cu0EuDAE5wokQubLzIDQWg2myXq2XhTpOVS07qqvT+w==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@rolldown/binding-linux-s390x-gnu@1.0.0-rc.9':
     resolution: {integrity: sha512-OalO94fqj7IWRn3VdXWty75jC5dk4C197AWEuMhIpvVv2lw9fiPhud0+bW2ctCxb3YoBZor71QHbY+9/WToadA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@rolldown/binding-linux-x64-gnu@1.0.0-rc.9':
     resolution: {integrity: sha512-cVEl1vZtBsBZna3YMjGXNvnYYrOJ7RzuWvZU0ffvJUexWkukMaDuGhUXn0rjnV0ptzGVkvc+vW9Yqy6h8YX4pg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rolldown/binding-linux-x64-musl@1.0.0-rc.9':
     resolution: {integrity: sha512-UzYnKCIIc4heAKgI4PZ3dfBGUZefGCJ1TPDuLHoCzgrMYPb5Rv6TLFuYtyM4rWyHM7hymNdsg5ik2C+UD9VDbA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rolldown/binding-openharmony-arm64@1.0.0-rc.9':
     resolution: {integrity: sha512-+6zoiF+RRyf5cdlFQP7nm58mq7+/2PFaY2DNQeD4B87N36JzfF/l9mdBkkmTvSYcYPE8tMh/o3cRlsx1ldLfog==}
@@ -2602,66 +2640,79 @@ packages:
     resolution: {integrity: sha512-t4ONHboXi/3E0rT6OZl1pKbl2Vgxf9vJfWgmUoCEVQVxhW6Cw/c8I6hbbu7DAvgp82RKiH7TpLwxnJeKv2pbsw==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.59.0':
     resolution: {integrity: sha512-CikFT7aYPA2ufMD086cVORBYGHffBo4K8MQ4uPS/ZnY54GKj36i196u8U+aDVT2LX4eSMbyHtyOh7D7Zvk2VvA==}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.59.0':
     resolution: {integrity: sha512-jYgUGk5aLd1nUb1CtQ8E+t5JhLc9x5WdBKew9ZgAXg7DBk0ZHErLHdXM24rfX+bKrFe+Xp5YuJo54I5HFjGDAA==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.59.0':
     resolution: {integrity: sha512-peZRVEdnFWZ5Bh2KeumKG9ty7aCXzzEsHShOZEFiCQlDEepP1dpUl/SrUNXNg13UmZl+gzVDPsiCwnV1uI0RUA==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-loong64-gnu@4.59.0':
     resolution: {integrity: sha512-gbUSW/97f7+r4gHy3Jlup8zDG190AuodsWnNiXErp9mT90iCy9NKKU0Xwx5k8VlRAIV2uU9CsMnEFg/xXaOfXg==}
     cpu: [loong64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-loong64-musl@4.59.0':
     resolution: {integrity: sha512-yTRONe79E+o0FWFijasoTjtzG9EBedFXJMl888NBEDCDV9I2wGbFFfJQQe63OijbFCUZqxpHz1GzpbtSFikJ4Q==}
     cpu: [loong64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-ppc64-gnu@4.59.0':
     resolution: {integrity: sha512-sw1o3tfyk12k3OEpRddF68a1unZ5VCN7zoTNtSn2KndUE+ea3m3ROOKRCZxEpmT9nsGnogpFP9x6mnLTCaoLkA==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-ppc64-musl@4.59.0':
     resolution: {integrity: sha512-+2kLtQ4xT3AiIxkzFVFXfsmlZiG5FXYW7ZyIIvGA7Bdeuh9Z0aN4hVyXS/G1E9bTP/vqszNIN/pUKCk/BTHsKA==}
     cpu: [ppc64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-riscv64-gnu@4.59.0':
     resolution: {integrity: sha512-NDYMpsXYJJaj+I7UdwIuHHNxXZ/b/N2hR15NyH3m2qAtb/hHPA4g4SuuvrdxetTdndfj9b1WOmy73kcPRoERUg==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.59.0':
     resolution: {integrity: sha512-nLckB8WOqHIf1bhymk+oHxvM9D3tyPndZH8i8+35p/1YiVoVswPid2yLzgX7ZJP0KQvnkhM4H6QZ5m0LzbyIAg==}
     cpu: [riscv64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.59.0':
     resolution: {integrity: sha512-oF87Ie3uAIvORFBpwnCvUzdeYUqi2wY6jRFWJAy1qus/udHFYIkplYRW+wo+GRUP4sKzYdmE1Y3+rY5Gc4ZO+w==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.59.0':
     resolution: {integrity: sha512-3AHmtQq/ppNuUspKAlvA8HtLybkDflkMuLK4DPo77DfthRb71V84/c4MlWJXixZz4uruIH4uaa07IqoAkG64fg==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.59.0':
     resolution: {integrity: sha512-2UdiwS/9cTAx7qIUZB/fWtToJwvt0Vbo0zmnYt7ED35KPg13Q0ym1g442THLC7VyI6JfYTP4PiSOWyoMdV2/xg==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-openbsd-x64@4.59.0':
     resolution: {integrity: sha512-M3bLRAVk6GOwFlPTIxVBSYKUaqfLrn8l0psKinkCFxl4lQvOSz8ZrKDz2gxcBwHFpci0B6rttydI4IpS4IS/jQ==}
@@ -3067,24 +3118,28 @@ packages:
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-arm64-musl@4.2.1':
     resolution: {integrity: sha512-WZA0CHRL/SP1TRbA5mp9htsppSEkWuQ4KsSUumYQnyl8ZdT39ntwqmz4IUHGN6p4XdSlYfJwM4rRzZLShHsGAQ==}
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-linux-x64-gnu@4.2.1':
     resolution: {integrity: sha512-qMFzxI2YlBOLW5PhblzuSWlWfwLHaneBE0xHzLrBgNtqN6mWfs+qYbhryGSXQjFYB1Dzf5w+LN5qbUTPhW7Y5g==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-x64-musl@4.2.1':
     resolution: {integrity: sha512-5r1X2FKnCMUPlXTWRYpHdPYUY6a1Ar/t7P24OuiEdEOmms5lyqjDRvVY1yy9Rmioh+AunQ0rWiOTPE8F9A3v5g==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-wasm32-wasi@4.2.1':
     resolution: {integrity: sha512-MGFB5cVPvshR85MTJkEvqDUnuNoysrsRxd6vnk1Lf2tbiqNlXpHYZqkqOQalydienEWOHHFyyuTSYRsLfxFJ2Q==}
@@ -5401,48 +5456,56 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-arm64-gnu@1.32.0:
     resolution: {integrity: sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.31.1:
     resolution: {integrity: sha512-mVZ7Pg2zIbe3XlNbZJdjs86YViQFoJSpc41CbVmKBPiGmC4YrfeOyz65ms2qpAobVd7WQsbW4PdsSJEMymyIMg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-linux-arm64-musl@1.32.0:
     resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.31.1:
     resolution: {integrity: sha512-xGlFWRMl+0KvUhgySdIaReQdB4FNudfUTARn7q0hh/V67PVGCs3ADFjw+6++kG1RNd0zdGRlEKa+T13/tQjPMA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-x64-gnu@1.32.0:
     resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.31.1:
     resolution: {integrity: sha512-eowF8PrKHw9LpoZii5tdZwnBcYDxRw2rRCyvAXLi34iyeYfqCQNA9rmUM0ce62NlPhCvof1+9ivRaTY6pSKDaA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-linux-x64-musl@1.32.0:
     resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.31.1:
     resolution: {integrity: sha512-aJReEbSEQzx1uBlQizAOBSjcmr9dCdL3XuC/6HLXAxmtErsj2ICo5yYggg1qOODQMtnjNQv2UHb9NpOuFtYe4w==}
@@ -5885,6 +5948,9 @@ packages:
   muggle-string@0.4.1:
     resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
 
+  mux-embed@5.17.10:
+    resolution: {integrity: sha512-i+eaoezVxIEliYGWPsjQztrWbA8A3Rzwqhwv1WGuRrl2npx85jFYJV5y+cjh7FASPOjT+7zJTYCJfxmcbgM7Hg==}
+
   nanoid@3.3.11:
     resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -10883,7 +10949,7 @@ snapshots:
       '@vitest/mocker': 4.1.0(vite@8.0.0(@types/node@22.19.15)(esbuild@0.27.3)(jiti@2.6.1)(tsx@4.21.0)(yaml@2.8.2))
       playwright: 1.58.2
       tinyrainbow: 3.1.0
-      vitest: 4.1.0(@opentelemetry/api@1.9.0)(@types/node@22.19.15)(@vitest/browser-playwright@4.1.0)(@vitest/ui@4.1.0)(happy-dom@18.0.1)(jsdom@27.4.0)(vite@8.0.0(@types/node@22.19.15)(esbuild@0.27.3)(jiti@2.6.1)(tsx@4.21.0)(yaml@2.8.2))
+      vitest: 4.1.0(@opentelemetry/api@1.9.0)(@types/node@22.19.15)(@vitest/browser-playwright@4.1.0)(@vitest/ui@4.1.0)(happy-dom@18.0.1)(jsdom@26.1.0)(vite@8.0.0(@types/node@22.19.15)(esbuild@0.27.3)(jiti@2.6.1)(tsx@4.21.0)(yaml@2.8.2))
     transitivePeerDependencies:
       - bufferutil
       - msw
@@ -10967,7 +11033,7 @@ snapshots:
       sirv: 3.0.2
       tinyglobby: 0.2.15
       tinyrainbow: 3.1.0
-      vitest: 4.1.0(@opentelemetry/api@1.9.0)(@types/node@22.19.15)(@vitest/browser-playwright@4.1.0)(@vitest/ui@4.1.0)(happy-dom@18.0.1)(jsdom@27.4.0)(vite@8.0.0(@types/node@22.19.15)(esbuild@0.27.3)(jiti@2.6.1)(tsx@4.21.0)(yaml@2.8.2))
+      vitest: 4.1.0(@opentelemetry/api@1.9.0)(@types/node@22.19.15)(@vitest/browser-playwright@4.1.0)(@vitest/ui@4.1.0)(happy-dom@18.0.1)(jsdom@26.1.0)(vite@8.0.0(@types/node@22.19.15)(esbuild@0.27.3)(jiti@2.6.1)(tsx@4.21.0)(yaml@2.8.2))
 
   '@vitest/utils@4.1.0':
     dependencies:
@@ -14081,6 +14147,8 @@ snapshots:
 
   muggle-string@0.4.1: {}
 
+  mux-embed@5.17.10: {}
+
   nanoid@3.3.11: {}
 
   nanostores@1.1.1: {}
diff --git a/turbo.json b/turbo.json
index 9c7edde3..229b70bb 100644
--- a/turbo.json
+++ b/turbo.json
@@ -6,7 +6,7 @@
   "tasks": {
     "build": {
       "dependsOn": ["^build", "^build:cdn"],
-      "outputs": ["dist/**", ".netlify/**"]
+      "outputs": ["dist/**", "types/**", "*.tsbuildinfo", ".netlify/**"]
     },
     "build:cdn": {
       "dependsOn": ["build"],