@ghchinoy/lit-audio-ui 0.4.16 → 0.4.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/AGENT_SKILL.md +28 -0
  2. package/README.md +8 -0
  3. package/custom-elements.json +1561 -1514
  4. package/dist/components/atoms/ui-audio-next-button.js +9 -13
  5. package/dist/components/atoms/ui-audio-play-button.js +10 -14
  6. package/dist/components/atoms/ui-audio-player-error.js +10 -14
  7. package/dist/components/atoms/ui-audio-prev-button.js +9 -13
  8. package/dist/components/atoms/ui-audio-progress-slider.js +4 -1
  9. package/dist/components/atoms/ui-audio-time-display.js +13 -17
  10. package/dist/components/atoms/ui-audio-volume-slider.js +110 -15
  11. package/dist/components/atoms/ui-message-bubble.js +11 -15
  12. package/dist/components/atoms/ui-shimmering-text.js +11 -15
  13. package/dist/components/atoms/ui-speech-cancel-button.js +12 -16
  14. package/dist/components/atoms/ui-speech-record-button.js +16 -20
  15. package/dist/components/atoms/ui-timed-text.js +14 -18
  16. package/dist/components/atoms/ui-typing-dot.js +9 -13
  17. package/dist/components/atoms/ui-voice-waveform.js +15 -19
  18. package/dist/components/molecules/scream-voice-button.js +9 -13
  19. package/dist/components/molecules/ui-3d-flip.js +11 -15
  20. package/dist/components/molecules/ui-chat-item.js +11 -15
  21. package/dist/components/molecules/ui-chat-list.js +9 -13
  22. package/dist/components/molecules/ui-conversation-bar.js +9 -13
  23. package/dist/components/molecules/ui-live-waveform.js +19 -23
  24. package/dist/components/molecules/ui-mic-selector.js +14 -18
  25. package/dist/components/molecules/ui-orb.js +24 -28
  26. package/dist/components/molecules/ui-playlist.js +15 -19
  27. package/dist/components/molecules/ui-scrolling-waveform.js +4 -4
  28. package/dist/components/molecules/ui-showcase-card.js +11 -15
  29. package/dist/components/molecules/ui-spectrum-visualizer.js +19 -23
  30. package/dist/components/molecules/ui-speech-preview.js +16 -20
  31. package/dist/components/molecules/ui-typing-indicator.js +7 -11
  32. package/dist/components/molecules/ui-voice-button.js +25 -29
  33. package/dist/components/molecules/ui-voice-picker.js +21 -25
  34. package/dist/components/molecules/ui-voice-pill.js +16 -20
  35. package/dist/components/molecules/ui-waveform.js +4 -4
  36. package/dist/components/organisms/ui-audio-player.js +7 -11
  37. package/dist/components/providers/ui-audio-provider.js +14 -17
  38. package/dist/components/providers/ui-speech-provider.js +13 -17
  39. package/dist/scream-audio-ui.umd.js +133 -40
  40. package/dist/src/components/atoms/ui-audio-volume-slider.d.ts +2 -0
  41. package/dist/src/components/molecules/ui-scrolling-waveform.d.ts +2 -0
  42. package/dist/src/components/molecules/ui-waveform.d.ts +2 -0
  43. package/dist/standalone/scream-audio-ui.standalone.js +1476 -1358
  44. package/dist/tsconfig.tsbuildinfo +1 -1
  45. package/dist/utils/audio-utils.js +0 -15
  46. package/package.json +1 -1
package/AGENT_SKILL.md CHANGED
@@ -55,3 +55,31 @@ For development without microphone access, enable the `simulation` property on `
55
55
  - **CORS:** Ensure `crossorigin="anonymous"` is set on audio/video tags.
56
56
  - **Layout:** Use `positioning="popover"` for `md-menu` inside 3D containers.
57
57
  - **Performance:** In plain HTML projects, prefer the single-file `.es.js` bundle to minimize network waterfall.
58
+
59
+ ### 7. Explicit Typings for Strict Mode (GTS)
60
+ When integrating into strict TypeScript environments, explicitly type your providers to avoid `Unexpected any` errors.
61
+ ```ts
62
+ import type { AudioProviderElement, SpeechProviderElement } from '@ghchinoy/lit-audio-ui';
63
+
64
+ const audioEl = document.querySelector('ui-audio-provider') as AudioProviderElement;
65
+ if (audioEl.state.isPlaying) {
66
+ audioEl.pause();
67
+ }
68
+ ```
69
+
70
+ ### 8. Required Fonts & Icons
71
+ Do not forget to inject the Material Symbols font into the host document's `<head>`, otherwise icons (play, pause, volume) will render as fallback text:
72
+ ```html
73
+ <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
74
+ ```
75
+
76
+
77
+ ### 9. Component API Enhancements (v0.4.17+)
78
+ - **Streaming Audio Waveforms:** For long/streamed audio where the browser cannot decode the full buffer, use the `peaks` property on `<ui-waveform>` and `<ui-scrolling-waveform>`. Provide a lightweight array of floats (0.0 to 1.0) generated by your backend to bypass client-side decoding.
79
+ - **Vertical Volume Slider:** Use `<ui-audio-volume-slider variant="popover">` to conserve horizontal space in compact music players.
80
+
81
+
82
+ ### 10. Advanced Styling with CSS Parts (v0.4.18+)
83
+ - **Transparent Progress Overlays:** The `<ui-audio-progress-slider>` exposes its internal Material slider via `part="slider"`. This allows you to create "Producer Bar" layouts by setting `--md-slider-inactive-track-color: transparent` and layering it directly over a `<ui-waveform>`.
84
+ - **Waveform Alignment:** Use `align="bottom"` on static or scrolling waveforms to draw bars upwards from the bottom of the container, rather than the default vertically-centered mirrored style.
85
+
package/README.md CHANGED
@@ -34,6 +34,14 @@ import '@ghchinoy/lit-audio-ui/atoms/ui-audio-play-button.js';
34
34
  import '@ghchinoy/lit-audio-ui/molecules/ui-live-waveform.js';
35
35
  ```
36
36
 
37
+ ### 4. Required Fonts & Icons
38
+ This library utilizes [Material Symbols](https://fonts.google.com/icons) for iconography. Ensure you include the font in your document `<head>`:
39
+
40
+ ```html
41
+ <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
42
+ ```
43
+
44
+
37
45
  ### 3. Use in HTML
38
46
  Once imported, custom elements are registered and used like standard HTML tags:
39
47