@djangocfg/ui-tools 2.1.310 → 2.1.313

package/README.md

@@ -40,7 +40,7 @@ This package contains heavy components that are loaded lazily to keep your initi
 | `JsonForm` | ~300KB | JSON Schema form generator |
 | `MarkdownEditor` | ~200KB | WYSIWYG markdown editor with Tiptap, `@`-mentions (auto-flip popup), customizable markdown serialization via presets |
 | `LottiePlayer` | ~200KB | Lottie animation player |
-| `AudioPlayer` | ~200KB | Audio player with WaveSurfer.js |
+| `AudioPlayer` | ~80KB | WebView-safe audio player (v6) — static peaks waveform + clip-path playhead |
 | `VideoPlayer` | ~150KB | Professional video player with Vidstack |
 | `MarkdownMessage` | ~120KB | Read-only chat-tuned markdown renderer — GFM + soft line breaks + smart typography + emoji shortcodes + sanitized HTML + syntax-highlighted code fences + mermaid + declarative `linkRules` for custom URL schemes. See [MarkdownMessage/README.md](src/components/markdown/MarkdownMessage/README.md) for the plugin pipeline. |
 | `JsonTree` | ~100KB | JSON visualization with modes (full/compact/inline) |
@@ -249,31 +249,49 @@ import { VideoPlayer } from '@djangocfg/ui-tools';
 
 ## Audio Player
 
-Three components for different use cases:
+WebView-safe v6 player. Single component, two layouts (`default` / `compact`),
+container-query auto-switching, waveform doubles as the seek bar. Designed for
+60 fps in WKWebView (Wails / Electron) and Tauri-style WebView2.
 
 ```tsx
-import {
-  LazyHybridSimplePlayer,   // Full player: cover art + reactive effects + controls
-  LazyHybridCompactPlayer,  // Single-row: play/pause + waveform + timer
-  LazyHybridAudioPlayer,    // Controls only (requires HybridAudioProvider)
-} from '@djangocfg/ui-tools';
-
-// Full player with reactive cover art
-<LazyHybridSimplePlayer
-  src="https://example.com/audio.mp3"
-  title="Track Title"
-  reactiveCover
-  variant="spotlight"
-/>
+import { LazyAudioPlayer } from '@djangocfg/ui-tools';
 
-// Compact single-row — for lists and tight spaces
-<LazyHybridCompactPlayer
-  src="https://example.com/audio.mp3"
+<LazyAudioPlayer
+  src="/audio/track.mp3"
   title="Track Title"
-  autoPlay
+  artist="Artist"
+  cover="/cover.jpg"
 />
 ```
 
+Highlights:
+
+- **Static peaks waveform** by default (decoded once, cached per `src`); zero
+  canvas paints during playback — playhead animates via `clip-path` + a single
+  CSS variable on the GPU thread.
+- Five waveform modes: `peaks` (default), `live` (AnalyserNode), `bars`
+  (CSS-only decoration), `progress` (plain scrubber, no animation), `none`.
+  Decode failure quietly degrades `peaks` → `progress`.
+- **Slot composition**: drop `<PlayerProvider>` + import the parts you need
+  (`Cover`, `Title`, `Waveform`, `PlayButton`, …) to build any custom layout.
+- **Click on the waveform = seek + play** (configurable via
+  `seekStartsPlayback`); drag to scrub.
+- **One active player at a time** by default — `exclusive` prop, coordinated
+  same-tab + cross-tab via `BroadcastChannel`.
+- **Persistent volume / mute** in `localStorage`, synced across all uncontrolled
+  players (and tabs). Pass `initialVolume` / `muted` to opt out per-player.
+- **Mobile-aware**: auto-switches to `compact` on phone viewports, volume
+  popover toggles on tap, hover affordances disabled on touch, iOS Safari
+  hides the volume slider (read-only there).
+- **Keyboard**: Space/K toggle, ←/→ seek 5s, ↑/↓ volume, M mute, L loop.
+  Active only when focus is in the player.
+- **Selector hooks** — `usePlayerState`, `usePlayerControls`, `usePlayerLevels`,
+  `useActivePlayer`, `useLastActivePlayer`, `useIsActivePlayer`,
+  `usePlayerPreferences` — for custom toolbars / "now playing" UIs.
+
+See [`AudioPlayer/README.md`](src/tools/AudioPlayer/README.md) for the full API
+and the docs at `@dev/@refactoring6-audioplayer/` for architecture / ADRs.
+
 ## Mermaid Diagrams
 
 Render Mermaid diagrams with fullscreen zoom support and type-safe declarative builders.
@@ -829,9 +847,7 @@ import {
   LazyOpenapiViewer,     // ~400KB
   LazyJsonSchemaForm,    // ~300KB
   LazyLottiePlayer,      // ~200KB
-  LazyHybridAudioPlayer,        // ~200KB — controls only
-  LazyHybridSimplePlayer,       // ~200KB — full player with cover & effects
-  LazyHybridCompactPlayer,      // ~200KB — compact single-row player
+  LazyAudioPlayer,       // ~80KB — WebView-safe v6 player
   LazyVideoPlayer,       // ~150KB
   LazyJsonTree,          // ~100KB
   LazyImageViewer,       // ~50KB

package/dist/{DocsLayout-W5JLRNSZ.mjs → DocsLayout-ESVQZO3V.mjs}

@@ -1,4 +1,4 @@
-import { deduplicateEndpoints, dereferenceSchema, resolveBaseUrl, usePlaygroundContext, toMarkdown, toCompactJson, toRawJson, formatBytes, MarkdownMessage, CODE_SAMPLE_TARGETS, buildHarRequest, resolveAbsolute, renderSnippet, PrettyCode_default, relativePath, endpointToMarkdown, isValidJson, findApiKeyById, parseRequestHeaders, UrlBuilder, sampleSchemaJson, joinUrl } from './chunk-6HNAPVZ2.mjs';
+import { deduplicateEndpoints, dereferenceSchema, resolveBaseUrl, usePlaygroundContext, toMarkdown, toCompactJson, toRawJson, formatBytes, MarkdownMessage, CODE_SAMPLE_TARGETS, buildHarRequest, resolveAbsolute, renderSnippet, PrettyCode_default, relativePath, endpointToMarkdown, isValidJson, findApiKeyById, parseRequestHeaders, UrlBuilder, sampleSchemaJson, joinUrl } from './chunk-GBLQTHWT.mjs';
 import { JsonTree_default } from './chunk-LFWQ36LJ.mjs';
 import './chunk-SSUOENAZ.mjs';
 import { __name } from './chunk-CGILA3WO.mjs';
@@ -3459,5 +3459,5 @@ var DocsLayout = /* @__PURE__ */ __name(() => {
 }, "DocsLayout");
 
 export { DocsLayout };
-//# sourceMappingURL=DocsLayout-W5JLRNSZ.mjs.map
-//# sourceMappingURL=DocsLayout-W5JLRNSZ.mjs.map
+//# sourceMappingURL=DocsLayout-ESVQZO3V.mjs.map
+//# sourceMappingURL=DocsLayout-ESVQZO3V.mjs.map