feat(spf): basic audio only use case + use-case-composition doc-type + implementation skills (#1584)

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

packages/html/src/cdn/media/simple-hls-audio-only.ts

@@ -0,0 +1 @@
+import '../../define/media/simple-hls-audio-only';

packages/html/src/define/media/simple-hls-audio-only.ts

@@ -0,0 +1,14 @@
+import { SimpleHlsAudioOnly } from '../../media/simple-hls-audio-only';
+import { safeDefine } from '../safe-define';
+
+export class SimpleHlsAudioOnlyElement extends SimpleHlsAudioOnly {
+  static readonly tagName = 'simple-hls-audio-only';
+}
+
+safeDefine(SimpleHlsAudioOnlyElement);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [SimpleHlsAudioOnlyElement.tagName]: SimpleHlsAudioOnlyElement;
+  }
+}

packages/html/src/media/simple-hls-audio-only/index.ts

@@ -0,0 +1,5 @@
+import { CustomMediaElement } from '@videojs/core/dom/media/custom-media-element';
+import { SimpleHlsAudioOnlyMedia } from '@videojs/core/dom/media/simple-hls-audio-only';
+import { MediaAttachMixin } from '../../store/media-attach-mixin';
+
+export class SimpleHlsAudioOnly extends MediaAttachMixin(CustomMediaElement('audio', SimpleHlsAudioOnlyMedia)) {}

packages/html/tsdown.cdn.config.ts

@@ -26,7 +26,15 @@ const presets = [
   'audio-minimal-ui',
   'background',
 ];
-const media = ['hls-video', 'mux-audio', 'mux-video', 'native-hls-video', 'simple-hls-video', 'dash-video'];
+const media = [
+  'hls-video',
+  'mux-audio',
+  'mux-video',
+  'native-hls-video',
+  'simple-hls-audio-only',
+  'simple-hls-video',
+  'dash-video',
+];
 
 const entries = [
   ...presets.map((name) => ({ src: `src/cdn/${name}.ts`, name })),