feat: add DashVideo media element (html, react) with sandbox support (#940)

2026-08-05 05:37:21 +00:00 · 2026-03-16 12:21:19 -07:00
parent 7a5ce94bca
commit 5bdbbec8a0
16 changed files with 468 additions and 9 deletions
@@ -50,6 +50,7 @@
    "@videojs/spf": "workspace:*",
    "@videojs/store": "workspace:*",
    "@videojs/utils": "workspace:*",
+    "dashjs": "^5.0.0",
    "hls.js": "^1.6.7"
  },
  "devDependencies": {
@@ -0,0 +1,55 @@
+import * as dashjs from 'dashjs';
+
+import { type MediaDelegate, MediaDelegateMixin } from '../../../core/media/delegate';
+import { MediaProxyMixin } from '../../../core/media/proxy';
+import { CustomMediaMixin } from '../custom-media-element';
+
+export class DashMediaDelegateBase implements MediaDelegate {
+  #engine: dashjs.MediaPlayerClass;
+
+  constructor() {
+    this.#engine = dashjs.MediaPlayer().create();
+    this.#engine.initialize(undefined, undefined, false);
+  }
+
+  get engine(): dashjs.MediaPlayerClass {
+    return this.#engine;
+  }
+
+  attach(target: EventTarget): void {
+    this.#engine.attachView(target as HTMLMediaElement);
+  }
+
+  detach(): void {
+    // dash.js types don't reflect null support, but null is valid for detaching
+    this.#engine.attachView(null as unknown as HTMLMediaElement);
+  }
+
+  destroy(): void {
+    this.#engine.destroy();
+  }
+
+  set src(src: string) {
+    this.#engine.attachSource(src);
+  }
+
+  get src(): string {
+    return (this.#engine.getSource() as string) ?? '';
+  }
+}
+
+// This is used by the web component because it needs to extend HTMLElement!
+export class DashCustomMedia extends MediaDelegateMixin(
+  CustomMediaMixin(globalThis.HTMLElement ?? class {}, { tag: 'video' }),
+  DashMediaDelegateBase
+) {}
+
+// This is used by the React component.
+export class DashMedia extends MediaDelegateMixin(
+  MediaProxyMixin(
+    globalThis.HTMLVideoElement ?? class {},
+    globalThis.HTMLMediaElement ?? class {},
+    globalThis.EventTarget ?? class {}
+  ),
+  DashMediaDelegateBase
+) {}
@@ -9,6 +9,7 @@ const createConfig = (mode: BuildMode): UserConfig => ({
  entry: {
    index: './src/core/index.ts',
    dom: './src/dom/index.ts',
+    '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/simple-hls/index': './src/dom/media/simple-hls/index.ts',
@@ -0,0 +1 @@
+import '../../define/media/dash-video';
@@ -0,0 +1,14 @@
+import { DashVideo } from '../../media/dash-video';
+import { safeDefine } from '../safe-define';
+
+export class DashVideoElement extends DashVideo {
+  static readonly tagName = 'dash-video';
+}
+
+safeDefine(DashVideoElement);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [DashVideoElement.tagName]: DashVideoElement;
+  }
+}
@@ -0,0 +1,32 @@
+import { DashCustomMedia } from '@videojs/core/dom/media/dash';
+
+export class DashVideo extends 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);
+  }
+
+  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?.();
+
+    if (!this.hasAttribute('keep-alive')) {
+      this.destroy();
+    }
+  }
+}
@@ -0,0 +1,28 @@
+import { DashMedia } from '@videojs/core/dom/media/dash';
+import type { PropsWithChildren, VideoHTMLAttributes } from 'react';
+import { forwardRef, useMemo } from 'react';
+import { useMediaRegistration } from '../../player/context';
+import { attachMediaElement } from '../../utils/attach-media-element';
+import { mediaProps } from '../../utils/media-props';
+import { useComposedRefs } from '../../utils/use-composed-refs';
+import { useDestroy } from '../../utils/use-destroy';
+
+export type DashVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>>;
+
+export const DashVideo = forwardRef<HTMLVideoElement, DashVideoProps>(({ children, ...props }, ref) => {
+  const mediaApi = useMemo(() => new DashMedia(), []);
+  const setMedia = useMediaRegistration();
+
+  useDestroy(mediaApi, () => {
+    setMedia?.(mediaApi);
+  });
+
+  const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);
+  return (
+    <video ref={composedRef} {...mediaProps(mediaApi, props)}>
+      {children}
+    </video>
+  );
+});
+
+export default DashVideo;
@@ -1,4 +1,4 @@
 export const SKINS = ['default', 'minimal'] as const;
 export const PLATFORMS = ['html', 'react'] as const;
 export const STYLINGS = ['css', 'tailwind'] as const;
-export const PRESETS = ['video', 'hls-video', 'simple-hls-video', 'audio', 'background-video'] as const;
+export const PRESETS = ['video', 'hls-video', 'simple-hls-video', 'dash-video', 'audio', 'background-video'] as const;
@@ -34,13 +34,25 @@ export const SOURCES = {
    url: 'https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4',
    type: 'mp4',
  },
+  'dash-1': {
+    label: 'DASH - Big Buck Bunny',
+    url: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
+    type: 'dash',
+  },
+  'dash-2': {
+    label: 'DASH - Envivio Test Stream',
+    url: 'https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd',
+    type: 'dash',
+  },
 } as const;

 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 DEFAULT_SOURCE: SourceId = 'hls-1';
 export const DEFAULT_AUDIO_SOURCE: SourceId = 'mp4-1';
+export const DEFAULT_DASH_SOURCE: SourceId = 'dash-1';

 export const BACKGROUND_VIDEO_SRC = 'https://stream.mux.com/Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008/low.mp4';
@@ -1,6 +1,13 @@
 import { PLATFORMS, PRESETS, STYLINGS } from '@app/constants';
 import type { SourceId } from '@app/shared/sources';
-import { DEFAULT_AUDIO_SOURCE, MP4_SOURCE_IDS, SOURCE_IDS, SOURCES } from '@app/shared/sources';
+import {
+  DASH_SOURCE_IDS,
+  DEFAULT_AUDIO_SOURCE,
+  DEFAULT_DASH_SOURCE,
+  MP4_SOURCE_IDS,
+  SOURCE_IDS,
+  SOURCES,
+} from '@app/shared/sources';
 import type { Platform, Preset, Styling } from '@app/types';
 import { useSkinSwitcher } from '@app/utils/use-skin-switcher';
 import { useSourceSwitcher } from '@app/utils/use-source-switcher';
@@ -67,14 +74,21 @@ export function App() {
    }
  }, [preset, source, setSource]);

-  // Constrain styling when switching to background-video
+  // Constrain source to DASH when switching to dash-video
  useEffect(() => {
-    if (preset === 'background-video' && styling === 'tailwind') {
+    if (preset === 'dash-video' && SOURCES[source].type !== 'dash') {
+      setSource(DEFAULT_DASH_SOURCE);
+    }
+  }, [preset, source, setSource]);
+
+  // Constrain styling when switching to a preset that has no tailwind template
+  useEffect(() => {
+    if ((preset === 'background-video' || preset === 'dash-video') && styling === 'tailwind') {
      setStyling('css');
    }
  }, [preset, styling]);

-  const availableSources = preset === 'audio' ? MP4_SOURCE_IDS : SOURCE_IDS;
+  const availableSources = preset === 'audio' ? MP4_SOURCE_IDS : preset === 'dash-video' ? DASH_SOURCE_IDS : SOURCE_IDS;

  const handleSourceChange = useCallback((value: string) => setSource(value as SourceId), [setSource]);

@@ -94,6 +108,7 @@ export function App() {
        availableSources={availableSources}
        isBackgroundVideo={preset === 'background-video'}
        isSimpleHlsVideo={preset === 'simple-hls-video'}
+        isDashVideo={preset === 'dash-video'}
        platforms={PLATFORMS}
        stylings={STYLINGS}
        presets={PRESETS}
@@ -16,6 +16,7 @@ type NavbarProps = {
  availableSources: readonly SourceId[];
  isBackgroundVideo: boolean;
  isSimpleHlsVideo: boolean;
+  isDashVideo: boolean;
  platforms: readonly Platform[];
  stylings: readonly Styling[];
  presets: readonly Preset[];
@@ -33,6 +34,7 @@ const PRESET_LABELS: Record<Preset, string> = {
  video: 'Video',
  'hls-video': 'HLS Video',
  'simple-hls-video': 'Simple HLS Video',
+  'dash-video': 'DASH Video',
  audio: 'Audio',
  'background-video': 'Background Video',
 };
@@ -51,6 +53,7 @@ export function Navbar({
  availableSources,
  isBackgroundVideo,
  isSimpleHlsVideo,
+  isDashVideo,
  platforms,
  stylings,
  presets,
@@ -79,7 +82,7 @@ export function Navbar({
          options={stylings.map((s) => ({
            value: s,
            label: s === 'css' ? 'CSS' : 'Tailwind',
-            disabled: s === 'tailwind' && isBackgroundVideo,
+            disabled: s === 'tailwind' && (isBackgroundVideo || isDashVideo),
          }))}
        />

@@ -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 DASH 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>
@@ -0,0 +1,42 @@
+import '@app/styles.css';
+import '@videojs/html/video/player';
+import '@videojs/html/media/dash-video';
+import '@videojs/html/video/skin';
+import '@videojs/html/video/minimal-skin';
+import { CSS_SKIN_TAGS } from '@app/shared/html/skin-tags';
+import { loadVideoStylesheets } from '@app/shared/html/stylesheets';
+import { getInitialSkin, getInitialSource, onSkinChange, onSourceChange } from '@app/shared/sandbox-listener';
+import type { SourceId } from '@app/shared/sources';
+import { SOURCES } from '@app/shared/sources';
+import type { Skin } from '@app/types';
+
+const html = String.raw;
+
+let currentSkin: Skin = getInitialSkin();
+let currentSource: SourceId = getInitialSource();
+
+function render() {
+  const tag = CSS_SKIN_TAGS[currentSkin].video;
+
+  loadVideoStylesheets(currentSkin);
+
+  document.getElementById('root')!.innerHTML = html`
+    <video-player>
+      <${tag} class="w-full aspect-video max-w-4xl mx-auto">
+        <dash-video slot="media" src="${SOURCES[currentSource].url}" playsinline></dash-video>
+      </${tag}>
+    </video-player>
+  `;
+}
+
+render();
+
+onSkinChange((skin) => {
+  currentSkin = skin;
+  render();
+});
+
+onSourceChange((source) => {
+  currentSource = source;
+  render();
+});
@@ -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 DASH 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>
@@ -0,0 +1,25 @@
+import '@app/styles.css';
+import '@videojs/react/video/skin.css';
+import '@videojs/react/video/minimal-skin.css';
+import { VideoProvider } from '@app/shared/react/providers';
+import { VideoSkinComponent } from '@app/shared/react/skins';
+import { useSkin } from '@app/shared/react/use-skin';
+import { useSource } from '@app/shared/react/use-source';
+import { SOURCES } from '@app/shared/sources';
+import { DashVideo } from '@videojs/react/media/dash-video';
+import { createRoot } from 'react-dom/client';
+
+function App() {
+  const skin = useSkin();
+  const source = useSource();
+
+  return (
+    <VideoProvider>
+      <VideoSkinComponent skin={skin} styling="css" className="w-full aspect-video max-w-4xl mx-auto">
+        <DashVideo src={SOURCES[source].url} playsInline />
+      </VideoSkinComponent>
+    </VideoProvider>
+  );
+}
+
+createRoot(document.getElementById('root')!).render(<App />);
@@ -83,6 +83,9 @@ importers:
      '@videojs/utils':
        specifier: workspace:*
        version: link:../utils
+      dashjs:
+        specifier: ^5.0.0
+        version: 5.1.1(@svta/cml-cta@1.0.1(@svta/cml-structured-field-values@1.0.1(@svta/cml-utils@1.0.1))(@svta/cml-utils@1.0.1))(@svta/cml-structured-field-values@1.0.1(@svta/cml-utils@1.0.1))(@svta/cml-utils@1.0.1)
      hls.js:
        specifier: ^1.6.7
        version: 1.6.15
@@ -3072,6 +3075,68 @@ packages:
    peerDependencies:
      '@svgr/core': '*'

+  '@svta/cml-608@1.0.1':
+    resolution: {integrity: sha512-Y/Ier9VPUSOBnf0bJqdDyTlPrt4dDB+jk5mYHa1bnD2kcRl8qn7KkW3PRuj4w1aVN+BS2eHmsLxodt7P2hylUg==}
+    engines: {node: '>=20'}
+
+  '@svta/cml-cmcd@1.0.1':
+    resolution: {integrity: sha512-eox305g+QUJgXqOLVrbgxeQHCgl90ewwQ9O2bIoo7m+hanR8Xswu5CknFnT5qqIbLOHfw80ug+raycoAFHTQ+w==}
+    engines: {node: '>=20'}
+    peerDependencies:
+      '@svta/cml-cta': 1.0.1
+      '@svta/cml-structured-field-values': 1.0.1
+      '@svta/cml-utils': 1.0.1
+
+  '@svta/cml-cmsd@1.0.1':
+    resolution: {integrity: sha512-+nIB8PuSfb/qw+xGaArPhNqPm84tBJUbe3H1DnPL5QUsjSUI7mUIUQwAtRV1ZdEu0+80g9i0op79woB0OIwr/g==}
+    engines: {node: '>=20'}
+    peerDependencies:
+      '@svta/cml-cta': 1.0.1
+      '@svta/cml-structured-field-values': 1.0.1
+      '@svta/cml-utils': 1.0.1
+
+  '@svta/cml-cta@1.0.1':
+    resolution: {integrity: sha512-jcXqNIPv26bmFxIOFh8/c3+6WLH4qBjKpq9qTQcggDPoHuV1YBydMsJLOnYPDeK8rNMKcAkFLbnDRvyJthu5yw==}
+    engines: {node: '>=20'}
+    peerDependencies:
+      '@svta/cml-structured-field-values': 1.0.1
+      '@svta/cml-utils': 1.0.1
+
+  '@svta/cml-dash@1.0.1':
+    resolution: {integrity: sha512-lYnD1I7FUbbQND+xICI+kcRaRXuT+whKk27R8m8me5VMVu2sMsAMc7Yui6l9sxw2cBKt8pSETPYRm/1+n4LZkw==}
+    engines: {node: '>=20'}
+    peerDependencies:
+      '@svta/cml-utils': 1.0.1
+
+  '@svta/cml-id3@1.0.1':
+    resolution: {integrity: sha512-90fGlL1qRI88CcaB89k6NG6cC3kky4Eu2jwqU4HefqK+S5k2OASUxf8JXkGz+DsdaiY7sh51vGPYdolfBZS7ug==}
+    engines: {node: '>=20'}
+    peerDependencies:
+      '@svta/cml-utils': 1.0.1
+
+  '@svta/cml-request@1.0.1':
+    resolution: {integrity: sha512-enL19BuXUjFkDDDF9jdNwUclMNPRsagnjGAetVC7xcmpDMpEx+ZLgsDip6BFNg5p6izSEk/OyujTWW1r8bDNiA==}
+    engines: {node: '>=20'}
+    peerDependencies:
+      '@svta/cml-utils': 1.0.1
+      '@svta/cml-xml': 1.0.1
+
+  '@svta/cml-structured-field-values@1.0.1':
+    resolution: {integrity: sha512-Kibciki59Pon3Pn/sl5uyrbJcSpZQDKqdCfDrokBvOdLoqqcd0oFrkEPsZBiuuIODX1CB80612xe8hopeFDyBA==}
+    engines: {node: '>=20'}
+    peerDependencies:
+      '@svta/cml-utils': 1.0.1
+
+  '@svta/cml-utils@1.0.1':
+    resolution: {integrity: sha512-kso3curTJfp00I1mKFoBliBApjn4aPE+wF8cPucf7TrSDVWZDeLLuF14ASmUE9m7rnrqTTK4878VvmXaXcCCfQ==}
+    engines: {node: '>=20'}
+
+  '@svta/cml-xml@1.0.1':
+    resolution: {integrity: sha512-11LkJa5kDEcsRMWkVI1ABH3KLCxGoiSVe4kQ293ItVj8ncTTQ7htmCGiJDjS+Cmy35UgF3e/vc0ysJIiWRTx2g==}
+    engines: {node: '>=20'}
+    peerDependencies:
+      '@svta/cml-utils': 1.0.1
+
  '@tailwindcss/node@4.2.1':
    resolution: {integrity: sha512-jlx6sLk4EOwO6hHe1oCGm1Q4AN/s0rSrTTPBGPM0/RQ6Uylwq17FuU8IeJJKEjtc6K6O07zsvP+gDO6MMWo7pg==}

@@ -3734,6 +3799,15 @@ packages:
    engines: {node: '>=6.0.0'}
    hasBin: true

+  bcp-47-match@2.0.3:
+    resolution: {integrity: sha512-JtTezzbAibu8G0R9op9zb3vcWZd9JF6M0xOYGPn0fNCd7wOpRB1mU2mH9T8gaBGbAAyIIVgB2G7xG0GP98zMAQ==}
+
+  bcp-47-normalize@2.3.0:
+    resolution: {integrity: sha512-8I/wfzqQvttUFz7HVJgIZ7+dj3vUaIyIxYXaTRP1YWoSDfzt6TUmxaKZeuXR62qBmYr+nvuWINFRl6pZ5DlN4Q==}
+
+  bcp-47@2.1.0:
+    resolution: {integrity: sha512-9IIS3UPrvIa1Ej+lVDdDwO7zLehjqsaByECw0bu2RRGP73jALm6FYbzI5gWbgHLvNdkvfXB5YrSbocZdOS0c0w==}
+
  before-after-hook@4.0.0:
    resolution: {integrity: sha512-q6tR3RPqIB1pMiTRMFcZwuG5T8vwp+vUvEG0vuI6B+Rikh5BfPp2fQ82c925FOs+b0lcFQ8CFrL+KbilfZFhOQ==}

@@ -3911,6 +3985,9 @@ packages:
    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
    engines: {node: '>=6'}

+  codem-isoboxer@0.3.10:
+    resolution: {integrity: sha512-eNk3TRV+xQMJ1PEj0FQGY8KD4m0GPxT487XJ+Iftm7mVa9WpPFDMWqPt+46buiP5j5Wzqe5oMIhqBcAeKfygSA==}
+
  collapse-white-space@2.1.0:
    resolution: {integrity: sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==}

@@ -4122,6 +4199,9 @@ packages:
    resolution: {integrity: sha512-wAV9QHOsNbwnWdNW2FYvE1P56wtgSbM+3SZcdGiWQILwVjACCXDCI3Ai8QlCjMDB8YK5zySiXZYBiwGmNY3lnw==}
    engines: {node: '>=12'}

+  dashjs@5.1.1:
+    resolution: {integrity: sha512-BzNXlUgzEjhuZ5M5hlSp1qIyQHZ7NpXAR0loP9DAAFVZj/ntL1DHeZ7qp/L3bvI4rq50X5indkAZQ3zEHWJoCA==}
+
  data-uri-to-buffer@4.0.1:
    resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==}
    engines: {node: '>= 12'}
@@ -4909,6 +4989,9 @@ packages:
    resolution: {integrity: sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==}
    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}

+  html-entities@2.6.0:
+    resolution: {integrity: sha512-kig+rMn/QOVRvr7c86gQ8lWXq+Hkv6CbAH1hLu+RG338StTpE8Z0b44SDVaqVu7HGKf27frdmUYEs9hTUX/cLQ==}
+
  html-escaper@2.0.2:
    resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}

@@ -4963,6 +5046,9 @@ packages:
    engines: {node: '>=16.x'}
    hasBin: true

+  immediate@3.0.6:
+    resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
+
  import-fresh@3.3.1:
    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
    engines: {node: '>=6'}
@@ -4980,6 +5066,9 @@ packages:
    resolution: {integrity: sha512-B6Lc2s6yApwnD2/pMzFh/d5AVjdsDXjgkeJ766FmFuJELIGHNycKRj+l3A39yZPM4CchqNCB4RITEAYB1KUM6A==}
    engines: {node: '>=20.19.0'}

+  imsc@1.1.5:
+    resolution: {integrity: sha512-V8je+CGkcvGhgl2C1GlhqFFiUOIEdwXbXLiu1Fcubvvbo+g9inauqT3l0pNYXGoLPBj3jxtZz9t+wCopMkwadQ==}
+
  imurmurhash@0.1.4:
    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
    engines: {node: '>=0.8.19'}
@@ -5365,6 +5454,9 @@ packages:
    resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==}
    engines: {node: '>=6'}

+  lie@3.1.1:
+    resolution: {integrity: sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==}
+
  lightningcss-android-arm64@1.31.1:
    resolution: {integrity: sha512-HXJF3x8w9nQ4jbXRiNppBCqeZPIAfUo8zE/kOEGbW5NZvGc/K7nMxbhIr+YlFlHW5mpbg/YFPdbnCh1wAXCKFg==}
    engines: {node: '>= 12.0.0'}
@@ -5529,6 +5621,9 @@ packages:
    resolution: {integrity: sha512-ME4Fb83LgEgwNw96RKNvKV4VTLuXfoKudAmm2lP8Kk87KaMK0/Xrx/aAkMWmT8mDb+3MlFDspfbCs7adjRxA2g==}
    engines: {node: '>=20.0.0'}

+  localforage@1.10.0:
+    resolution: {integrity: sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==}
+
  locate-path@6.0.0:
    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
    engines: {node: '>=10'}
@@ -6740,6 +6835,9 @@ packages:
  sass-formatter@0.7.9:
    resolution: {integrity: sha512-CWZ8XiSim+fJVG0cFLStwDvft1VI7uvXdCNJYXhDvowiv+DsbD1nXLiQ4zrE5UBvj5DWZJ93cwN0NX5PMsr1Pw==}

+  sax@1.2.1:
+    resolution: {integrity: sha512-8I2a3LovHTOpm7NV5yOyO8IHqgVsfK4+UuySrXU8YXkSRX7k6hCV9b3HrkKCr3nMpgj+0bmocaJJWpvp1oc7ZA==}
+
  sax@1.5.0:
    resolution: {integrity: sha512-21IYA3Q5cQf089Z6tgaUTr7lDAyzoTPx5HRtbhsME8Udispad8dC/+sziTNugOEx54ilvatQ9YCzl4KQLPcRHA==}
    engines: {node: '>=11.0.0'}
@@ -7292,6 +7390,10 @@ packages:
    engines: {node: '>=14.17'}
    hasBin: true

+  ua-parser-js@1.0.41:
+    resolution: {integrity: sha512-LbBDqdIC5s8iROCUjMbW1f5dJQTEFB1+KO9ogbvlb3nm9n4YHa5p4KTvFPWvh2Hs8gZMBuiB1/8+pdfe/tDPug==}
+    hasBin: true
+
  ufo@1.6.3:
    resolution: {integrity: sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q==}

@@ -10463,6 +10565,48 @@ snapshots:
    transitivePeerDependencies:
      - typescript

+  '@svta/cml-608@1.0.1': {}
+
+  '@svta/cml-cmcd@1.0.1(@svta/cml-cta@1.0.1(@svta/cml-structured-field-values@1.0.1(@svta/cml-utils@1.0.1))(@svta/cml-utils@1.0.1))(@svta/cml-structured-field-values@1.0.1(@svta/cml-utils@1.0.1))(@svta/cml-utils@1.0.1)':
+    dependencies:
+      '@svta/cml-cta': 1.0.1(@svta/cml-structured-field-values@1.0.1(@svta/cml-utils@1.0.1))(@svta/cml-utils@1.0.1)
+      '@svta/cml-structured-field-values': 1.0.1(@svta/cml-utils@1.0.1)
+      '@svta/cml-utils': 1.0.1
+
+  '@svta/cml-cmsd@1.0.1(@svta/cml-cta@1.0.1(@svta/cml-structured-field-values@1.0.1(@svta/cml-utils@1.0.1))(@svta/cml-utils@1.0.1))(@svta/cml-structured-field-values@1.0.1(@svta/cml-utils@1.0.1))(@svta/cml-utils@1.0.1)':
+    dependencies:
+      '@svta/cml-cta': 1.0.1(@svta/cml-structured-field-values@1.0.1(@svta/cml-utils@1.0.1))(@svta/cml-utils@1.0.1)
+      '@svta/cml-structured-field-values': 1.0.1(@svta/cml-utils@1.0.1)
+      '@svta/cml-utils': 1.0.1
+
+  '@svta/cml-cta@1.0.1(@svta/cml-structured-field-values@1.0.1(@svta/cml-utils@1.0.1))(@svta/cml-utils@1.0.1)':
+    dependencies:
+      '@svta/cml-structured-field-values': 1.0.1(@svta/cml-utils@1.0.1)
+      '@svta/cml-utils': 1.0.1
+
+  '@svta/cml-dash@1.0.1(@svta/cml-utils@1.0.1)':
+    dependencies:
+      '@svta/cml-utils': 1.0.1
+
+  '@svta/cml-id3@1.0.1(@svta/cml-utils@1.0.1)':
+    dependencies:
+      '@svta/cml-utils': 1.0.1
+
+  '@svta/cml-request@1.0.1(@svta/cml-utils@1.0.1)(@svta/cml-xml@1.0.1(@svta/cml-utils@1.0.1))':
+    dependencies:
+      '@svta/cml-utils': 1.0.1
+      '@svta/cml-xml': 1.0.1(@svta/cml-utils@1.0.1)
+
+  '@svta/cml-structured-field-values@1.0.1(@svta/cml-utils@1.0.1)':
+    dependencies:
+      '@svta/cml-utils': 1.0.1
+
+  '@svta/cml-utils@1.0.1': {}
+
+  '@svta/cml-xml@1.0.1(@svta/cml-utils@1.0.1)':
+    dependencies:
+      '@svta/cml-utils': 1.0.1
+
  '@tailwindcss/node@4.2.1':
    dependencies:
      '@jridgewell/remapping': 2.3.5
@@ -10822,7 +10966,7 @@ snapshots:
      magic-string: 0.30.21
      sirv: 3.0.2
      tinyrainbow: 2.0.0
-      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.15)(@vitest/browser@3.2.4)(@vitest/ui@3.2.4)(happy-dom@18.0.1)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.32.0)(tsx@4.21.0)(yaml@2.8.2)
+      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.15)(@vitest/browser@3.2.4)(@vitest/ui@3.2.4)(happy-dom@18.0.1)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.32.0)(tsx@4.21.0)(yaml@2.8.2)
      ws: 8.19.0
    optionalDependencies:
      playwright: 1.58.2
@@ -10847,7 +10991,7 @@ snapshots:
      std-env: 3.10.0
      test-exclude: 7.0.2
      tinyrainbow: 2.0.0
-      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.15)(@vitest/browser@3.2.4)(@vitest/ui@3.2.4)(happy-dom@18.0.1)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.32.0)(tsx@4.21.0)(yaml@2.8.2)
+      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.15)(@vitest/browser@3.2.4)(@vitest/ui@3.2.4)(happy-dom@18.0.1)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.32.0)(tsx@4.21.0)(yaml@2.8.2)
    optionalDependencies:
      '@vitest/browser': 3.2.4(playwright@1.58.2)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.32.0)(tsx@4.21.0)(yaml@2.8.2))(vitest@3.2.4)
    transitivePeerDependencies:
@@ -10898,7 +11042,7 @@ snapshots:
      sirv: 3.0.2
      tinyglobby: 0.2.15
      tinyrainbow: 2.0.0
-      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.15)(@vitest/browser@3.2.4)(@vitest/ui@3.2.4)(happy-dom@18.0.1)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.32.0)(tsx@4.21.0)(yaml@2.8.2)
+      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.15)(@vitest/browser@3.2.4)(@vitest/ui@3.2.4)(happy-dom@18.0.1)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.32.0)(tsx@4.21.0)(yaml@2.8.2)

  '@vitest/utils@3.2.4':
    dependencies:
@@ -11337,6 +11481,19 @@ snapshots:

  baseline-browser-mapping@2.10.0: {}

+  bcp-47-match@2.0.3: {}
+
+  bcp-47-normalize@2.3.0:
+    dependencies:
+      bcp-47: 2.1.0
+      bcp-47-match: 2.0.3
+
+  bcp-47@2.1.0:
+    dependencies:
+      is-alphabetical: 2.0.1
+      is-alphanumerical: 2.0.1
+      is-decimal: 2.0.1
+
  before-after-hook@4.0.0: {}

  better-ajv-errors@1.2.0(ajv@8.18.0):
@@ -11512,6 +11669,8 @@ snapshots:

  clsx@2.1.1: {}

+  codem-isoboxer@0.3.10: {}
+
  collapse-white-space@2.1.0: {}

  color-convert@2.0.1:
@@ -11703,6 +11862,29 @@ snapshots:

  dargs@8.1.0: {}

+  dashjs@5.1.1(@svta/cml-cta@1.0.1(@svta/cml-structured-field-values@1.0.1(@svta/cml-utils@1.0.1))(@svta/cml-utils@1.0.1))(@svta/cml-structured-field-values@1.0.1(@svta/cml-utils@1.0.1))(@svta/cml-utils@1.0.1):
+    dependencies:
+      '@svta/cml-608': 1.0.1
+      '@svta/cml-cmcd': 1.0.1(@svta/cml-cta@1.0.1(@svta/cml-structured-field-values@1.0.1(@svta/cml-utils@1.0.1))(@svta/cml-utils@1.0.1))(@svta/cml-structured-field-values@1.0.1(@svta/cml-utils@1.0.1))(@svta/cml-utils@1.0.1)
+      '@svta/cml-cmsd': 1.0.1(@svta/cml-cta@1.0.1(@svta/cml-structured-field-values@1.0.1(@svta/cml-utils@1.0.1))(@svta/cml-utils@1.0.1))(@svta/cml-structured-field-values@1.0.1(@svta/cml-utils@1.0.1))(@svta/cml-utils@1.0.1)
+      '@svta/cml-dash': 1.0.1(@svta/cml-utils@1.0.1)
+      '@svta/cml-id3': 1.0.1(@svta/cml-utils@1.0.1)
+      '@svta/cml-request': 1.0.1(@svta/cml-utils@1.0.1)(@svta/cml-xml@1.0.1(@svta/cml-utils@1.0.1))
+      '@svta/cml-xml': 1.0.1(@svta/cml-utils@1.0.1)
+      bcp-47-match: 2.0.3
+      bcp-47-normalize: 2.3.0
+      codem-isoboxer: 0.3.10
+      fast-deep-equal: 3.1.3
+      html-entities: 2.6.0
+      imsc: 1.1.5
+      localforage: 1.10.0
+      path-browserify: 1.0.1
+      ua-parser-js: 1.0.41
+    transitivePeerDependencies:
+      - '@svta/cml-cta'
+      - '@svta/cml-structured-field-values'
+      - '@svta/cml-utils'
+
  data-uri-to-buffer@4.0.1: {}

  data-urls@5.0.0:
@@ -12710,6 +12892,8 @@ snapshots:
    transitivePeerDependencies:
      - '@noble/hashes'

+  html-entities@2.6.0: {}
+
  html-escaper@2.0.2: {}

  html-escaper@3.0.3: {}
@@ -12759,6 +12943,8 @@ snapshots:

  image-size@2.0.2: {}

+  immediate@3.0.6: {}
+
  import-fresh@3.3.1:
    dependencies:
      parent-module: 1.0.1
@@ -12782,6 +12968,10 @@ snapshots:

  import-without-cache@0.2.5: {}

+  imsc@1.1.5:
+    dependencies:
+      sax: 1.2.1
+
  imurmurhash@0.1.4: {}

  indent-string@4.0.0: {}
@@ -13198,6 +13388,10 @@ snapshots:

  leven@3.1.0: {}

+  lie@3.1.1:
+    dependencies:
+      immediate: 3.0.6
+
  lightningcss-android-arm64@1.31.1:
    optional: true

@@ -13337,6 +13531,10 @@ snapshots:
      rfdc: 1.4.1
      wrap-ansi: 9.0.2

+  localforage@1.10.0:
+    dependencies:
+      lie: 3.1.1
+
  locate-path@6.0.0:
    dependencies:
      p-locate: 5.0.0
@@ -14879,6 +15077,8 @@ snapshots:
    dependencies:
      suf-log: 2.5.3

+  sax@1.2.1: {}
+
  sax@1.5.0: {}

  saxes@6.0.0:
@@ -15493,6 +15693,8 @@ snapshots:

  typescript@5.9.3: {}

+  ua-parser-js@1.0.41: {}
+
  ufo@1.6.3: {}

  ulid@3.0.2: {}