feat(components): add large set of new UI components and demos, reorganize groups, and bump a few dependencies

ts_web/elements/00group-media/dees-audio-viewer/demo.ts

@@ -0,0 +1,69 @@
+import { html, cssManager } from '@design.estate/dees-element';
+
+export const demo = () => html`
+  <style>
+    .demo-container {
+      padding: 48px;
+      background: ${cssManager.bdTheme('#f8f9fa', '#0a0a0a')};
+      display: flex;
+      flex-direction: column;
+      gap: 32px;
+    }
+
+    .section {
+      max-width: 600px;
+      width: 100%;
+      margin: 0 auto;
+    }
+
+    .section-title {
+      font-size: 18px;
+      font-weight: 600;
+      margin-bottom: 8px;
+      color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+    }
+
+    .section-description {
+      font-size: 14px;
+      color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+      margin-bottom: 16px;
+    }
+
+    dees-audio-viewer {
+      height: 200px;
+      border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+      border-radius: 8px;
+      overflow: hidden;
+    }
+  </style>
+
+  <div class="demo-container">
+    <div class="section">
+      <div class="section-title">Audio with Waveform</div>
+      <div class="section-description">Audio player with waveform visualization and full transport controls.</div>
+      <dees-audio-viewer
+        src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
+        title="SoundHelix Song 1"
+        artist="T. Schuerger"
+      ></dees-audio-viewer>
+    </div>
+
+    <div class="section">
+      <div class="section-title">Audio without Waveform</div>
+      <div class="section-description">Simple audio player with a seekbar instead of a waveform.</div>
+      <dees-audio-viewer
+        src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3"
+        title="SoundHelix Song 2"
+        .showWaveform=${false}
+      ></dees-audio-viewer>
+    </div>
+
+    <div class="section">
+      <div class="section-title">Minimal Audio Player</div>
+      <div class="section-description">No title or artist metadata — just the player.</div>
+      <dees-audio-viewer
+        src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3"
+      ></dees-audio-viewer>
+    </div>
+  </div>
+`;