@signalwire/web-components 4.0.0-beta.10 → 4.0.0-beta.12

package/dist/components/UI/sw-ui-transcript-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-ui-transcript-view.js","sources":["../../../src/components/UI/sw-ui-transcript-view.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { highlight } from '../../utils/prism.js';\nimport { transcriptToMarkdown } from '../../utils/transcriptToMarkdown.js';\n\n/**\n * A single transcript entry rendered as a chat bubble.\n *\n * The optional `meta` field carries rich content from the AI.\n */\nexport interface TranscriptEntry {\n  id: string;\n  type: 'user' | 'agent' | 'system';\n  state: 'partial' | 'complete';\n  text: string;\n  meta?: TranscriptEntryMeta;\n}\n\n/** Rich content attached to a transcript entry. */\nexport interface TranscriptEntryMeta {\n  /** Clickable links. */\n  links?: { label: string; url: string }[];\n  /** Code snippet. */\n  code?: { language?: string; content: string };\n  /**\n   * Content that the agent pushed via a `display_content` user_event.\n   * Stored here so the download serializer can include the full payload.\n   */\n  displayContent?: {\n    title?: string;\n    content: string;\n    format: 'text' | 'markdown' | 'code' | 'html';\n    language?: string;\n  };\n}\n\n@customElement('sw-ui-transcript-view')\nexport class SwUiTranscriptView extends LitElement {\n  static styles = css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n        background: var(--bg-page);\n        color: var(--fg-default);\n        font-family: var(--type-family-body);\n        font-size: var(--type-size-small);\n        overflow: hidden;\n      }\n\n      .header {\n        flex: 0 0 auto;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: 8px 10px 8px 14px;\n        font-size: 11px;\n        font-weight: 600;\n        letter-spacing: 0.08em;\n        text-transform: uppercase;\n        color: color-mix(in srgb, var(--fg-default) 40%, transparent);\n        border-bottom: 1px solid var(--border-default);\n        user-select: none;\n      }\n\n      .download-btn {\n        all: unset;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 26px;\n        height: 26px;\n        border-radius: 5px;\n        cursor: pointer;\n        color: color-mix(in srgb, var(--fg-default) 50%, transparent);\n        transition:\n          background var(--transition-fast),\n          color var(--transition-fast);\n      }\n\n      .download-btn:hover {\n        background: var(--bg-surface-raised);\n        color: var(--fg-default);\n      }\n\n\n      .messages {\n        flex: 1;\n        overflow-y: auto;\n        overflow-x: hidden;\n        padding: 10px 12px 14px;\n        display: flex;\n        flex-direction: column;\n        gap: 8px;\n        scroll-behavior: smooth;\n      }\n\n      .messages::-webkit-scrollbar {\n        width: 4px;\n      }\n      .messages::-webkit-scrollbar-track {\n        background: transparent;\n      }\n      .messages::-webkit-scrollbar-thumb {\n        background: var(--bg-surface-raised);\n        border-radius: 2px;\n      }\n\n      .empty {\n        flex: 1;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-size: 13px;\n        color: rgba(255, 255, 255, 0.25);\n        padding: 20px;\n        text-align: center;\n      }\n\n      .bubble {\n        max-width: 85%;\n        padding: 8px 12px;\n        border-radius: 14px;\n        font-size: 0.8125rem;\n        line-height: 1.45;\n        word-break: break-word;\n        animation: pop-in 0.15s ease-out;\n      }\n\n      @keyframes pop-in {\n        from {\n          opacity: 0;\n          transform: scale(0.94) translateY(4px);\n        }\n        to {\n          opacity: 1;\n          transform: scale(1) translateY(0);\n        }\n      }\n\n      .user {\n        align-self: flex-end;\n        background: var(--interactive-button-primary-bg);\n        color: #fff;\n        border-bottom-right-radius: 4px;\n      }\n      .agent {\n        align-self: flex-start;\n        background: var(--bg-surface);\n        color: var(--fg-default);\n        border-bottom-left-radius: 4px;\n      }\n      .system {\n        align-self: center;\n        background: transparent;\n        border: 1px solid var(--border-default);\n        color: var(--fg-default);\n        font-size: 0.75rem;\n        max-width: 95%;\n      }\n\n      .partial {\n        opacity: 0.55;\n      }\n\n      /* ── Links ── */\n      .meta-links {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 6px;\n        margin-top: 6px;\n      }\n\n      .meta-links a {\n        color: var(--interactive-button-primary-bg);\n        text-decoration: none;\n        font-size: 0.75rem;\n        padding: 2px 8px;\n        border: 1px solid var(--interactive-button-primary-bg);\n        border-radius: 4px;\n        transition: background var(--transition-fast);\n      }\n\n      .meta-links a:hover {\n        background: var(--interactive-button-primary-bg);\n        color: #fff;\n      }\n\n      /* ── Code block ── */\n      .meta-code {\n        margin-top: 8px;\n        border-radius: 6px;\n        overflow: hidden;\n      }\n\n      .meta-code pre {\n        margin: 0;\n        padding: 10px 12px;\n        background: #1a1b26;\n        overflow-x: auto;\n        font-size: 0.72rem;\n        line-height: 1.5;\n      }\n\n      .meta-code code {\n        font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;\n        color: #f8f8f2;\n      }\n\n      /* ── Prism Okaidia theme ── */\n      .token.comment,\n      .token.prolog,\n      .token.doctype,\n      .token.cdata {\n        color: #8292a2;\n      }\n      .token.punctuation {\n        color: #f8f8f2;\n      }\n      .token.namespace {\n        opacity: 0.7;\n      }\n      .token.property,\n      .token.tag,\n      .token.constant,\n      .token.symbol,\n      .token.deleted {\n        color: #f92672;\n      }\n      .token.boolean,\n      .token.number {\n        color: #ae81ff;\n      }\n      .token.selector,\n      .token.attr-name,\n      .token.string,\n      .token.char,\n      .token.builtin,\n      .token.inserted {\n        color: #a6e22e;\n      }\n      .token.operator,\n      .token.entity,\n      .token.url,\n      .token.variable {\n        color: #f8f8f2;\n      }\n      .token.atrule,\n      .token.attr-value,\n      .token.function,\n      .token.class-name {\n        color: #e6db74;\n      }\n      .token.keyword {\n        color: #66d9ef;\n      }\n      .token.regex,\n      .token.important {\n        color: #fd971f;\n      }\n      .token.important,\n      .token.bold {\n        font-weight: bold;\n      }\n      .token.italic {\n        font-style: italic;\n      }\n    `;\n\n  @property({ attribute: false }) entries: TranscriptEntry[] = [];\n  @property({ type: String }) header = 'Transcript';\n  @property({ type: String, attribute: 'empty-text' }) emptyText = '';\n\n  // entry.id → highlighted HTML (populated asynchronously)\n  @state() private _codeCache = new Map<string, string>();\n\n  private _lastEntryCount = 0;\n\n  protected updated(changed: Map<string, unknown>): void {\n    super.updated(changed);\n    if (this.entries.length !== this._lastEntryCount) {\n      this._lastEntryCount = this.entries.length;\n      this._autoScroll();\n    }\n    if (changed.has('entries')) {\n      void this._highlightNewEntries();\n    }\n  }\n\n  private async _highlightNewEntries(): Promise<void> {\n    const toHighlight = this.entries.filter((e) => e.meta?.code && !this._codeCache.has(e.id));\n    if (toHighlight.length === 0) return;\n\n    await Promise.all(\n      toHighlight.map(async (e) => {\n        const { content, language = '' } = e.meta!.code!;\n        const html = await highlight(content, language);\n        this._codeCache = new Map(this._codeCache).set(e.id, html);\n      })\n    );\n\n    // The highlighted re-render extends the scroll height — scroll again\n    // now that the final DOM height is known.\n    await this.updateComplete;\n    this._autoScroll();\n  }\n\n  private _downloadTranscript(): void {\n    const md = transcriptToMarkdown(this.entries);\n    const blob = new Blob([md], { type: 'text/markdown;charset=utf-8' });\n    const url = URL.createObjectURL(blob);\n    const a = document.createElement('a');\n    a.href = url;\n    a.download = `transcript-${new Date().toISOString().slice(0, 10)}.md`;\n    a.click();\n    URL.revokeObjectURL(url);\n  }\n\n  private _autoScroll(): void {\n    const el = this.shadowRoot?.querySelector('.messages');\n    if (!el) return;\n    const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 120;\n    if (nearBottom) el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' });\n  }\n\n  private _renderCode(entry: TranscriptEntry) {\n    const code = entry.meta?.code;\n    if (!code) return nothing;\n    const cached = this._codeCache.get(entry.id);\n    return html`\n      <div class=\"meta-code\" part=\"code\">\n        <pre><code>${cached ? unsafeHTML(cached) : code.content}</code></pre>\n      </div>\n    `;\n  }\n\n  render() {\n    const hasEntries = this.entries.some((e) => e.state === 'complete');\n\n    return html`\n      <div class=\"header\" part=\"header\">\n        <span>${this.header}</span>\n        <button\n          class=\"download-btn\"\n          part=\"download-btn\"\n          title=\"Download transcript as Markdown\"\n          ?disabled=${!hasEntries}\n          @click=${this._downloadTranscript}\n        >\n          <sw-ui-icon name=\"download\" size=\"15\"></sw-ui-icon>\n        </button>\n      </div>\n\n      ${this.entries.length === 0\n        ? html`<div class=\"empty\" part=\"empty\">${this.emptyText}</div>`\n        : html`\n            <div class=\"messages\" part=\"messages\">\n              ${this.entries.map(\n                (e) => html`\n                  <div\n                    class=\"bubble ${e.type} ${e.state === 'partial' ? 'partial' : ''}\"\n                    part=\"bubble bubble-${e.type}\"\n                  >\n                    ${e.text}\n                    ${e.meta?.links?.length\n                      ? html`<div class=\"meta-links\">\n                          ${e.meta.links.map(\n                            (l) =>\n                              html`<a href=${l.url} target=\"_blank\" rel=\"noopener\">${l.label}</a>`\n                          )}\n                        </div>`\n                      : nothing}\n                    ${this._renderCode(e)}\n                  </div>\n                `\n              )}\n            </div>\n          `}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-ui-transcript-view': SwUiTranscriptView;\n  }\n}\n"],"names":["SwUiTranscriptView","LitElement","changed","toHighlight","e","_a","content","language","html","highlight","md","transcriptToMarkdown","blob","url","a","el","entry","code","nothing","cached","unsafeHTML","hasEntries","_b","l","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/{audio-level.d.ts → sw-audio-level.d.ts}

@@ -5,18 +5,41 @@
  * via Web Audio API. Displays configurable number of bars with color transitions
  * based on audio intensity.
  *
+ * Input precedence (most specific wins): `.stream` > `.call` (uses `localStream`)
+ * > context (uses `localStream`).
+ *
  * @example
  * ```html
  * <sw-audio-level .stream=${mediaStream} bars="5" orientation="vertical"></sw-audio-level>
+ * <sw-audio-level .call=${call}></sw-audio-level>
+ * <sw-audio-level></sw-audio-level> <!-- inside provider -->
  * ```
+ *
+ * @cssprop [--interactive-status-success=#22c55e] - Color for low audio levels.
+ * @cssprop [--interactive-status-warning=#ffd700] - Color for medium audio levels.
+ * @cssprop [--interactive-button-destructive-bg=#dc2626] - Color for high audio levels.
+ * @cssprop [--sw-audio-bar-width=4px] - Width of each audio level bar.
+ * @cssprop [--sw-audio-bar-gap=2px] - Gap between audio level bars.
+ * @cssprop [--sw-audio-bar-radius=2px] - Border radius of each bar.
+ * @cssprop [--sw-audio-bar-background=#404040] - Background color of inactive bars.
  */
 import { LitElement } from 'lit';
-export declare class AudioLevel extends LitElement {
+import type { Call } from '../types/index.js';
+export declare class SwAudioLevel extends LitElement {
     static styles: import("lit").CSSResult;
     /**
-     * MediaStream to analyze for audio levels
+     * Explicit MediaStream to analyze — highest precedence.
      */
     stream?: MediaStream;
+    /**
+     * Explicit Call — when set, analyzes the call's `localStream`.
+     * Bypassed by `.stream` if both are set.
+     */
+    call?: Call;
+    private _callState?;
+    private _directLocalStream;
+    private _directSubscriptions;
+    private get _effectiveStream();
     /**
      * Number of bars to display (default: 5)
      */
@@ -25,6 +48,11 @@ export declare class AudioLevel extends LitElement {
      * Orientation of the bars: 'vertical' or 'horizontal'
      */
     orientation: 'vertical' | 'horizontal';
+    /**
+     * When true, automatically calls getUserMedia({ audio: true }) to acquire
+     * a microphone stream instead of requiring the consumer to set `.stream`.
+     */
+    autoRequest: boolean;
     /**
      * Maximum height/width of bars in pixels
      */
@@ -53,10 +81,18 @@ export declare class AudioLevel extends LitElement {
      * Frequency data buffer
      */
     private _dataArray?;
+    /**
+     * Whether we own the stream and must stop its tracks on cleanup.
+     */
+    private _ownsStream;
+    /** Guard against concurrent getUserMedia calls (connectedCallback + first updated both fire). */
+    private _micRequested;
     /**
      * Lifecycle: Component connected to DOM
      */
     connectedCallback(): void;
+    /** Stream currently wired to the analyser — used to detect real changes. */
+    private _activeStream?;
     /**
      * Lifecycle: React to property changes
      */
@@ -70,6 +106,10 @@ export declare class AudioLevel extends LitElement {
      * Call this before stopping the MediaStream tracks to ensure proper cleanup
      */
     releaseResources(): void;
+    /**
+     * Request a microphone stream via getUserMedia for auto-request mode.
+     */
+    private _requestMicStream;
     /**
      * Setup Web Audio API for audio level analysis
      */
@@ -100,7 +140,7 @@ export declare class AudioLevel extends LitElement {
  */
 declare global {
     interface HTMLElementTagNameMap {
-        'sw-audio-level': AudioLevel;
+        'sw-audio-level': SwAudioLevel;
     }
 }
-//# sourceMappingURL=audio-level.d.ts.map
+//# sourceMappingURL=sw-audio-level.d.ts.map

package/dist/components/sw-audio-level.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-audio-level.d.ts","sourceRoot":"","sources":["../../src/components/sw-audio-level.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAM5C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAI9C,qBACa,YAAa,SAAQ,UAAU;IAC1C,MAAM,CAAC,MAAM,0BA6DX;IAEF;;OAEG;IACyB,MAAM,CAAC,EAAE,WAAW,CAAC;IAEjD;;;OAGG;IACyB,IAAI,CAAC,EAAE,IAAI,CAAC;IAIxC,OAAO,CAAC,UAAU,CAAC,CAAY;IAEtB,OAAO,CAAC,kBAAkB,CAA4B;IAE/D,OAAO,CAAC,oBAAoB,CAAsB;IAElD,OAAO,KAAK,gBAAgB,GAI3B;IAED;;OAEG;IACyB,IAAI,SAAK;IAErC;;OAEG;IACwC,WAAW,EAAE,UAAU,GAAG,YAAY,CAAc;IAE/F;;;OAGG;IACoE,WAAW,UAAS;IAE3F;;OAEG;IACyB,OAAO,SAAM;IAEzC;;OAEG;IACM,OAAO,CAAC,OAAO,CAAgB;IAExC;;OAEG;IACH,OAAO,CAAC,aAAa,CAAC,CAAe;IAErC;;OAEG;IACH,OAAO,CAAC,SAAS,CAAC,CAAe;IAEjC;;OAEG;IACH,OAAO,CAAC,OAAO,CAAC,CAA6B;IAE7C;;OAEG;IACH,OAAO,CAAC,iBAAiB,CAAC,CAAS;IAEnC;;OAEG;IACH,OAAO,CAAC,UAAU,CAAC,CAA0B;IAE7C;;OAEG;IACH,OAAO,CAAC,WAAW,CAAS;IAE5B,iGAAiG;IACjG,OAAO,CAAC,aAAa,CAAS;IAE9B;;OAEG;IACH,iBAAiB;IAYjB,4EAA4E;IAC5E,OAAO,CAAC,aAAa,CAAC,CAAc;IAEpC;;OAEG;IACH,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAsChE;;OAEG;IACH,oBAAoB;IAOpB;;;OAGG;IACI,gBAAgB,IAAI,IAAI;IAK/B;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAsBzB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAwC1B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IA0C5B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAyC1B;;OAEG;IACH,OAAO,CAAC,aAAa;IAOrB;;OAEG;IACH,OAAO,CAAC,QAAQ;IAIhB;;OAEG;IACH,MAAM;CAuCP;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/dist/components/sw-audio-level.js

@@ -0,0 +1,252 @@
+import { LitElement as b, html as p, css as y } from "lit";
+import { property as u, state as _, customElement as S } from "lit/decorators.js";
+import { consume as w } from "@lit/context";
+import { getLogger as A } from "@signalwire/js";
+import { callStateContext as g } from "../context/call-state-context.js";
+var x = Object.defineProperty, C = Object.getOwnPropertyDescriptor, o = (t, a, e, s) => {
+  for (var i = s > 1 ? void 0 : s ? C(a, e) : a, n = t.length - 1, l; n >= 0; n--)
+    (l = t[n]) && (i = (s ? l(a, e, i) : l(i)) || i);
+  return s && i && x(a, e, i), i;
+};
+const d = A();
+let r = class extends b {
+  constructor() {
+    super(...arguments), this._directLocalStream = null, this._directSubscriptions = [], this.bars = 5, this.orientation = "vertical", this.autoRequest = !1, this.maxSize = 32, this._levels = [], this._ownsStream = !1, this._micRequested = !1;
+  }
+  get _effectiveStream() {
+    var t;
+    return this.stream ? this.stream : this.call ? this._directLocalStream ?? void 0 : ((t = this._callState) == null ? void 0 : t.localStream) ?? void 0;
+  }
+  /**
+   * Lifecycle: Component connected to DOM
+   */
+  connectedCallback() {
+    super.connectedCallback(), this._levels = new Array(this.bars).fill(0);
+    const t = this._effectiveStream;
+    this.autoRequest && !t ? this._requestMicStream() : t && (this._activeStream = t, this.setupAudioAnalysis());
+  }
+  /**
+   * Lifecycle: React to property changes
+   */
+  updated(t) {
+    if (super.updated(t), t.has("call") && (this._directSubscriptions.forEach((e) => e.unsubscribe()), this._directSubscriptions = [], this._directLocalStream = null, this.call && this._directSubscriptions.push(
+      this.call.localStream$.subscribe((e) => this._directLocalStream = e)
+    )), t.has("autoRequest") && this.autoRequest && !this._effectiveStream && this._requestMicStream(), t.has("stream") || t.has("call") || t.has("_directLocalStream") || t.has("_callState")) {
+      const e = this._effectiveStream;
+      e !== this._activeStream && (this.cleanupAudioAnalysis(), this._activeStream = e, e && this.setupAudioAnalysis());
+    }
+    t.has("bars") && (this._levels = new Array(this.bars).fill(0));
+  }
+  /**
+   * Lifecycle: Component disconnected from DOM
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.cleanupAudioAnalysis(), this._directSubscriptions.forEach((t) => t.unsubscribe()), this._directSubscriptions = [];
+  }
+  /**
+   * Public method to release all audio resources immediately
+   * Call this before stopping the MediaStream tracks to ensure proper cleanup
+   */
+  releaseResources() {
+    this.cleanupAudioAnalysis(), this.stream = void 0;
+  }
+  /**
+   * Request a microphone stream via getUserMedia for auto-request mode.
+   */
+  _requestMicStream() {
+    this._micRequested || (this._micRequested = !0, navigator.mediaDevices.getUserMedia({ audio: !0 }).then((t) => {
+      if (!this.isConnected) {
+        t.getTracks().forEach((a) => a.stop());
+        return;
+      }
+      this._ownsStream = !0, this.stream = t;
+    }).catch((t) => {
+      this._micRequested = !1, d.error("[SwAudioLevel] Failed to acquire microphone:", t);
+    }));
+  }
+  /**
+   * Setup Web Audio API for audio level analysis
+   */
+  setupAudioAnalysis() {
+    const t = this._activeStream ?? this._effectiveStream;
+    if (!t) return;
+    if (t.getAudioTracks().length === 0) {
+      d.warn("[SwAudioLevel] MediaStream has no audio tracks");
+      return;
+    }
+    try {
+      this._audioContext = new AudioContext(), this._audioContext.state === "suspended" && this._audioContext.resume(), this._analyser = this._audioContext.createAnalyser(), this._analyser.fftSize = 256, this._analyser.smoothingTimeConstant = 0.8, this._source = this._audioContext.createMediaStreamSource(t), this._source.connect(this._analyser);
+      const e = this._analyser.frequencyBinCount;
+      this._dataArray = new Uint8Array(e), this.startAnimationLoop();
+    } catch (e) {
+      d.error("[SwAudioLevel] Failed to setup audio analysis:", e);
+    }
+  }
+  /**
+   * Cleanup Web Audio API resources
+   */
+  cleanupAudioAnalysis() {
+    this._animationFrameId !== void 0 && (cancelAnimationFrame(this._animationFrameId), this._animationFrameId = void 0), this._source && (this._source.disconnect(), this._source = void 0), this._analyser && (this._analyser.disconnect(), this._analyser = void 0), this._audioContext && this._audioContext.state !== "closed" && (this._audioContext.close().catch((t) => d.error("[SwAudioLevel] Close failed:", t)), this._audioContext = void 0), this._ownsStream && this.stream && (this.stream.getTracks().forEach((t) => t.stop()), this._ownsStream = !1), this._activeStream = void 0, this._micRequested = !1, this._dataArray = void 0, this._levels = new Array(this.bars).fill(0);
+  }
+  /**
+   * Start the animation loop for updating levels
+   */
+  startAnimationLoop() {
+    const t = () => {
+      const a = this._analyser, e = this._dataArray;
+      if (!a || !e)
+        return;
+      a.getByteFrequencyData(e);
+      const s = [], i = e.length, n = Math.floor(i / this.bars);
+      for (let l = 0; l < this.bars; l++) {
+        const c = l * n, h = Math.min(c + n, i);
+        let v = 0;
+        for (let m = c; m < h; m++)
+          v += e[m] ?? 0;
+        const f = v / (h - c);
+        s.push(f / 255);
+      }
+      this._levels = s, this.requestUpdate(), this._animationFrameId = requestAnimationFrame(t);
+    };
+    this._animationFrameId = requestAnimationFrame(t);
+  }
+  /**
+   * Get the color class based on level
+   */
+  getLevelClass(t) {
+    return t > 0.7 ? "level-high" : t > 0.4 ? "level-medium" : t > 0.05 ? "level-low" : "";
+  }
+  /**
+   * Get the active class if level is above threshold
+   */
+  isActive(t) {
+    return t > 0.05;
+  }
+  /**
+   * Render the component
+   */
+  render() {
+    const t = this._levels.length === this.bars ? this._levels : new Array(this.bars).fill(0), a = t.reduce((s, i) => Math.max(s, i), 0), e = Math.round(a * 100);
+    return p`
+      <div
+        class="container"
+        part="container"
+        role="meter"
+        aria-label="Audio input level"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-valuenow=${e}
+      >
+        ${t.map((s, i) => {
+      const n = this.isActive(s), l = this.getLevelClass(s), c = Math.max(4, s * this.maxSize), h = this.orientation === "horizontal" ? `width: ${c}px;` : `height: ${c}px;`;
+      return p`
+            <div
+              class="bar ${n ? "active" : ""} ${l}"
+              part="bar ${n ? "bar-active" : ""}"
+              style="${h}"
+              data-bar-index="${i}"
+              aria-hidden="true"
+            ></div>
+          `;
+    })}
+      </div>
+    `;
+  }
+};
+r.styles = y`
+    :host {
+      --sw-audio-bar-width: 4px;
+      --sw-audio-bar-gap: 2px;
+      --sw-audio-bar-radius: 2px;
+      --sw-audio-bar-background: rgba(255, 255, 255, 0.2);
+
+      display: inline-flex;
+    }
+
+    .container {
+      display: flex;
+      align-items: flex-end;
+      justify-content: center;
+      gap: var(--sw-audio-bar-gap);
+    }
+
+    :host([orientation='horizontal']) .container {
+      flex-direction: row;
+      align-items: center;
+    }
+
+    :host([orientation='vertical']) .container,
+    .container {
+      flex-direction: row;
+      align-items: flex-end;
+    }
+
+    .bar {
+      width: var(--sw-audio-bar-width);
+      background: var(--sw-audio-bar-background);
+      border-radius: var(--sw-audio-bar-radius);
+      transition:
+        height 0.05s ease-out,
+        width 0.05s ease-out,
+        background-color 0.1s ease;
+      min-height: 4px;
+    }
+
+    :host([orientation='horizontal']) .bar {
+      height: var(--sw-audio-bar-width);
+      width: 4px;
+      min-width: 4px;
+      min-height: auto;
+    }
+
+    .bar.active {
+      /* Color is set dynamically via inline style */
+    }
+
+    .bar.level-low {
+      background-color: var(--interactive-status-success);
+    }
+
+    .bar.level-medium {
+      background-color: var(--interactive-status-warning);
+    }
+
+    .bar.level-high {
+      background-color: var(--interactive-button-destructive-bg);
+    }
+  `;
+o([
+  u({ type: Object })
+], r.prototype, "stream", 2);
+o([
+  u({ type: Object })
+], r.prototype, "call", 2);
+o([
+  w({ context: g, subscribe: !0 }),
+  _()
+], r.prototype, "_callState", 2);
+o([
+  _()
+], r.prototype, "_directLocalStream", 2);
+o([
+  u({ type: Number })
+], r.prototype, "bars", 2);
+o([
+  u({ type: String, reflect: !0 })
+], r.prototype, "orientation", 2);
+o([
+  u({ type: Boolean, reflect: !0, attribute: "auto-request" })
+], r.prototype, "autoRequest", 2);
+o([
+  u({ type: Number })
+], r.prototype, "maxSize", 2);
+o([
+  _()
+], r.prototype, "_levels", 2);
+r = o([
+  S("sw-audio-level")
+], r);
+export {
+  r as SwAudioLevel
+};
+//# sourceMappingURL=sw-audio-level.js.map

package/dist/components/sw-audio-level.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-audio-level.js","sources":["../../src/components/sw-audio-level.ts"],"sourcesContent":["/**\n * Audio Level Component\n *\n * Visual audio level indicator that renders real-time audio levels from a MediaStream\n * via Web Audio API. Displays configurable number of bars with color transitions\n * based on audio intensity.\n *\n * Input precedence (most specific wins): `.stream` > `.call` (uses `localStream`)\n * > context (uses `localStream`).\n *\n * @example\n * ```html\n * <sw-audio-level .stream=${mediaStream} bars=\"5\" orientation=\"vertical\"></sw-audio-level>\n * <sw-audio-level .call=${call}></sw-audio-level>\n * <sw-audio-level></sw-audio-level> <!-- inside provider -->\n * ```\n *\n * @cssprop [--interactive-status-success=#22c55e] - Color for low audio levels.\n * @cssprop [--interactive-status-warning=#ffd700] - Color for medium audio levels.\n * @cssprop [--interactive-button-destructive-bg=#dc2626] - Color for high audio levels.\n * @cssprop [--sw-audio-bar-width=4px] - Width of each audio level bar.\n * @cssprop [--sw-audio-bar-gap=2px] - Gap between audio level bars.\n * @cssprop [--sw-audio-bar-radius=2px] - Border radius of each bar.\n * @cssprop [--sw-audio-bar-background=#404040] - Background color of inactive bars.\n */\n\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { consume } from '@lit/context';\nimport { Subscription } from 'rxjs';\nimport { getLogger } from '@signalwire/js';\nimport { callStateContext, type CallState } from '../context/call-state-context.js';\nimport type { Call } from '../types/index.js';\n\nconst logger = getLogger();\n\n@customElement('sw-audio-level')\nexport class SwAudioLevel extends LitElement {\n  static styles = css`\n    :host {\n      --sw-audio-bar-width: 4px;\n      --sw-audio-bar-gap: 2px;\n      --sw-audio-bar-radius: 2px;\n      --sw-audio-bar-background: rgba(255, 255, 255, 0.2);\n\n      display: inline-flex;\n    }\n\n    .container {\n      display: flex;\n      align-items: flex-end;\n      justify-content: center;\n      gap: var(--sw-audio-bar-gap);\n    }\n\n    :host([orientation='horizontal']) .container {\n      flex-direction: row;\n      align-items: center;\n    }\n\n    :host([orientation='vertical']) .container,\n    .container {\n      flex-direction: row;\n      align-items: flex-end;\n    }\n\n    .bar {\n      width: var(--sw-audio-bar-width);\n      background: var(--sw-audio-bar-background);\n      border-radius: var(--sw-audio-bar-radius);\n      transition:\n        height 0.05s ease-out,\n        width 0.05s ease-out,\n        background-color 0.1s ease;\n      min-height: 4px;\n    }\n\n    :host([orientation='horizontal']) .bar {\n      height: var(--sw-audio-bar-width);\n      width: 4px;\n      min-width: 4px;\n      min-height: auto;\n    }\n\n    .bar.active {\n      /* Color is set dynamically via inline style */\n    }\n\n    .bar.level-low {\n      background-color: var(--interactive-status-success);\n    }\n\n    .bar.level-medium {\n      background-color: var(--interactive-status-warning);\n    }\n\n    .bar.level-high {\n      background-color: var(--interactive-button-destructive-bg);\n    }\n  `;\n\n  /**\n   * Explicit MediaStream to analyze — highest precedence.\n   */\n  @property({ type: Object }) stream?: MediaStream;\n\n  /**\n   * Explicit Call — when set, analyzes the call's `localStream`.\n   * Bypassed by `.stream` if both are set.\n   */\n  @property({ type: Object }) call?: Call;\n\n  @consume({ context: callStateContext, subscribe: true })\n  @state()\n  private _callState?: CallState;\n\n  @state() private _directLocalStream: MediaStream | null = null;\n\n  private _directSubscriptions: Subscription[] = [];\n\n  private get _effectiveStream(): MediaStream | undefined {\n    if (this.stream) return this.stream;\n    if (this.call) return this._directLocalStream ?? undefined;\n    return this._callState?.localStream ?? undefined;\n  }\n\n  /**\n   * Number of bars to display (default: 5)\n   */\n  @property({ type: Number }) bars = 5;\n\n  /**\n   * Orientation of the bars: 'vertical' or 'horizontal'\n   */\n  @property({ type: String, reflect: true }) orientation: 'vertical' | 'horizontal' = 'vertical';\n\n  /**\n   * When true, automatically calls getUserMedia({ audio: true }) to acquire\n   * a microphone stream instead of requiring the consumer to set `.stream`.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'auto-request' }) autoRequest = false;\n\n  /**\n   * Maximum height/width of bars in pixels\n   */\n  @property({ type: Number }) maxSize = 32;\n\n  /**\n   * Current audio levels for each bar (0-1)\n   */\n  @state() private _levels: number[] = [];\n\n  /**\n   * Web Audio API context\n   */\n  private _audioContext?: AudioContext;\n\n  /**\n   * Analyser node for frequency data\n   */\n  private _analyser?: AnalyserNode;\n\n  /**\n   * Source node connected to the MediaStream\n   */\n  private _source?: MediaStreamAudioSourceNode;\n\n  /**\n   * Animation frame ID for cleanup\n   */\n  private _animationFrameId?: number;\n\n  /**\n   * Frequency data buffer\n   */\n  private _dataArray?: Uint8Array<ArrayBuffer>;\n\n  /**\n   * Whether we own the stream and must stop its tracks on cleanup.\n   */\n  private _ownsStream = false;\n\n  /** Guard against concurrent getUserMedia calls (connectedCallback + first updated both fire). */\n  private _micRequested = false;\n\n  /**\n   * Lifecycle: Component connected to DOM\n   */\n  connectedCallback() {\n    super.connectedCallback();\n    this._levels = new Array(this.bars).fill(0);\n    const eff = this._effectiveStream;\n    if (this.autoRequest && !eff) {\n      this._requestMicStream();\n    } else if (eff) {\n      this._activeStream = eff;\n      this.setupAudioAnalysis();\n    }\n  }\n\n  /** Stream currently wired to the analyser — used to detect real changes. */\n  private _activeStream?: MediaStream;\n\n  /**\n   * Lifecycle: React to property changes\n   */\n  protected updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('call')) {\n      this._directSubscriptions.forEach((s) => s.unsubscribe());\n      this._directSubscriptions = [];\n      this._directLocalStream = null;\n      if (this.call) {\n        this._directSubscriptions.push(\n          this.call.localStream$.subscribe((s) => (this._directLocalStream = s))\n        );\n      }\n    }\n\n    if (changedProperties.has('autoRequest') && this.autoRequest && !this._effectiveStream) {\n      this._requestMicStream();\n    }\n\n    const reactsToInput =\n      changedProperties.has('stream') ||\n      changedProperties.has('call') ||\n      changedProperties.has('_directLocalStream') ||\n      changedProperties.has('_callState');\n\n    if (reactsToInput) {\n      const next = this._effectiveStream;\n      if (next !== this._activeStream) {\n        this.cleanupAudioAnalysis();\n        this._activeStream = next;\n        if (next) this.setupAudioAnalysis();\n      }\n    }\n\n    if (changedProperties.has('bars')) {\n      this._levels = new Array(this.bars).fill(0);\n    }\n  }\n\n  /**\n   * Lifecycle: Component disconnected from DOM\n   */\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.cleanupAudioAnalysis();\n    this._directSubscriptions.forEach((s) => s.unsubscribe());\n    this._directSubscriptions = [];\n  }\n\n  /**\n   * Public method to release all audio resources immediately\n   * Call this before stopping the MediaStream tracks to ensure proper cleanup\n   */\n  public releaseResources(): void {\n    this.cleanupAudioAnalysis();\n    this.stream = undefined;\n  }\n\n  /**\n   * Request a microphone stream via getUserMedia for auto-request mode.\n   */\n  private _requestMicStream(): void {\n    if (this._micRequested) return;\n    this._micRequested = true;\n\n    navigator.mediaDevices\n      .getUserMedia({ audio: true })\n      .then((mediaStream) => {\n        // Component may have been removed while getUserMedia was pending.\n        // Stop the tracks immediately rather than leaking the mic capture.\n        if (!this.isConnected) {\n          mediaStream.getTracks().forEach((t) => t.stop());\n          return;\n        }\n        this._ownsStream = true;\n        this.stream = mediaStream;\n      })\n      .catch((err) => {\n        this._micRequested = false;\n        logger.error('[SwAudioLevel] Failed to acquire microphone:', err);\n      });\n  }\n\n  /**\n   * Setup Web Audio API for audio level analysis\n   */\n  private setupAudioAnalysis(): void {\n    const stream = this._activeStream ?? this._effectiveStream;\n    if (!stream) return;\n\n    // Check if stream has audio tracks\n    const audioTracks = stream.getAudioTracks();\n    if (audioTracks.length === 0) {\n      logger.warn('[SwAudioLevel] MediaStream has no audio tracks');\n      return;\n    }\n\n    try {\n      // Create AudioContext\n      this._audioContext = new AudioContext();\n\n      // Resume in case the browser started the context suspended (autoplay policy)\n      if (this._audioContext.state === 'suspended') {\n        void this._audioContext.resume();\n      }\n\n      // Create analyser node\n      this._analyser = this._audioContext.createAnalyser();\n      this._analyser.fftSize = 256;\n      this._analyser.smoothingTimeConstant = 0.8;\n\n      // Create source from MediaStream\n      this._source = this._audioContext.createMediaStreamSource(stream);\n      this._source.connect(this._analyser);\n\n      // Create data array for frequency data\n      const bufferLength = this._analyser.frequencyBinCount;\n      this._dataArray = new Uint8Array(bufferLength);\n\n      // Start animation loop\n      this.startAnimationLoop();\n    } catch (error) {\n      logger.error('[SwAudioLevel] Failed to setup audio analysis:', error);\n    }\n  }\n\n  /**\n   * Cleanup Web Audio API resources\n   */\n  private cleanupAudioAnalysis(): void {\n    // Cancel animation frame\n    if (this._animationFrameId !== undefined) {\n      cancelAnimationFrame(this._animationFrameId);\n      this._animationFrameId = undefined;\n    }\n\n    // Disconnect source\n    if (this._source) {\n      this._source.disconnect();\n      this._source = undefined;\n    }\n\n    // Disconnect analyser (not strictly necessary but good practice)\n    if (this._analyser) {\n      this._analyser.disconnect();\n      this._analyser = undefined;\n    }\n\n    // Close AudioContext\n    if (this._audioContext && this._audioContext.state !== 'closed') {\n      this._audioContext.close().catch((err) => logger.error('[SwAudioLevel] Close failed:', err));\n      this._audioContext = undefined;\n    }\n\n    // Stop tracks if we acquired the stream via auto-request\n    if (this._ownsStream && this.stream) {\n      this.stream.getTracks().forEach((t) => t.stop());\n      this._ownsStream = false;\n    }\n\n    this._activeStream = undefined;\n\n    this._micRequested = false;\n\n    // Clear data array\n    this._dataArray = undefined;\n\n    // Reset levels\n    this._levels = new Array(this.bars).fill(0);\n  }\n\n  /**\n   * Start the animation loop for updating levels\n   */\n  private startAnimationLoop(): void {\n    const updateLevels = () => {\n      const analyser = this._analyser;\n      const dataArray = this._dataArray;\n      if (!analyser || !dataArray) {\n        return;\n      }\n\n      // Get frequency data\n      analyser.getByteFrequencyData(dataArray);\n\n      // Calculate levels for each bar by sampling frequency ranges\n      const levels: number[] = [];\n      const binCount = dataArray.length;\n      const binsPerBar = Math.floor(binCount / this.bars);\n\n      for (let i = 0; i < this.bars; i++) {\n        const startBin = i * binsPerBar;\n        const endBin = Math.min(startBin + binsPerBar, binCount);\n\n        // Average the frequency values for this bar's range\n        let sum = 0;\n        for (let j = startBin; j < endBin; j++) {\n          sum += dataArray[j] ?? 0;\n        }\n        const average = sum / (endBin - startBin);\n\n        // Normalize to 0-1 range\n        levels.push(average / 255);\n      }\n\n      this._levels = levels;\n      this.requestUpdate();\n\n      // Schedule next frame\n      this._animationFrameId = requestAnimationFrame(updateLevels);\n    };\n\n    this._animationFrameId = requestAnimationFrame(updateLevels);\n  }\n\n  /**\n   * Get the color class based on level\n   */\n  private getLevelClass(level: number): string {\n    if (level > 0.7) return 'level-high';\n    if (level > 0.4) return 'level-medium';\n    if (level > 0.05) return 'level-low';\n    return '';\n  }\n\n  /**\n   * Get the active class if level is above threshold\n   */\n  private isActive(level: number): boolean {\n    return level > 0.05;\n  }\n\n  /**\n   * Render the component\n   */\n  render() {\n    // Ensure we have the right number of levels\n    const levels = this._levels.length === this.bars ? this._levels : new Array(this.bars).fill(0);\n\n    // Aggregate level (peak across bars), normalized 0–100 for aria-valuenow.\n    const peak = levels.reduce((a: number, b: number) => Math.max(a, b), 0);\n    const ariaValue = Math.round(peak * 100);\n\n    return html`\n      <div\n        class=\"container\"\n        part=\"container\"\n        role=\"meter\"\n        aria-label=\"Audio input level\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow=${ariaValue}\n      >\n        ${levels.map((level, index) => {\n          const isActive = this.isActive(level);\n          const levelClass = this.getLevelClass(level);\n          const size = Math.max(4, level * this.maxSize);\n\n          const style =\n            this.orientation === 'horizontal' ? `width: ${size}px;` : `height: ${size}px;`;\n\n          return html`\n            <div\n              class=\"bar ${isActive ? 'active' : ''} ${levelClass}\"\n              part=\"bar ${isActive ? 'bar-active' : ''}\"\n              style=\"${style}\"\n              data-bar-index=\"${index}\"\n              aria-hidden=\"true\"\n            ></div>\n          `;\n        })}\n      </div>\n    `;\n  }\n}\n\n/**\n * Declare global type for TypeScript\n */\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-audio-level': SwAudioLevel;\n  }\n}\n"],"names":["logger","getLogger","SwAudioLevel","LitElement","_a","eff","changedProperties","s","next","mediaStream","t","err","stream","bufferLength","error","updateLevels","analyser","dataArray","levels","binCount","binsPerBar","i","startBin","endBin","sum","j","average","level","peak","a","b","ariaValue","html","index","isActive","levelClass","size","style","css","__decorateClass","property","consume","callStateContext","state","customElement"],"mappings":"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"}

package/dist/components/sw-call-controls.d.ts

@@ -0,0 +1,58 @@
+import { LitElement } from 'lit';
+import type { Call } from '../types/index.js';
+/**
+ * Connected control bar that bridges `devicesContext` and `callStateContext`
+ * to the pure `sw-ui-control-bar` UI component.
+ *
+ * Input precedence (most specific wins): `.call` > context.
+ * When `.call` is set, the control bar drives screen-share / hand-raise /
+ * hang-up directly from the Call. Mic/camera/speaker toggles still require
+ * `devicesContext` — without it those buttons render in their default state.
+ *
+ * @prop {Call}    call             - explicit Call object (overrides context)
+ * @prop {boolean} showScreenShare  - show the screen-share button
+ * @prop {boolean} showHandRaise   - show the hand-raise button
+ * @prop {boolean} showTranscript  - show the transcript toggle button
+ * @prop {boolean} transcriptActive - current transcript panel visibility
+ *
+ * @fires sw-call-hangup - Re-dispatched when the user clicks hang-up so external
+ *                         consumers (e.g. React parents) can react. No detail.
+ */
+export declare class SwCallControls extends LitElement {
+    static styles: import("lit").CSSResult;
+    private _devices;
+    private _callState?;
+    /** Explicit Call — when set, drives call-state actions directly. */
+    call?: Call;
+    private _directSelf;
+    private _directSubscriptions;
+    private _fullscreen;
+    showScreenShare: boolean;
+    showHandRaise: boolean;
+    showTranscript: boolean;
+    transcriptActive: boolean;
+    showSettings: boolean;
+    showFullscreen: boolean;
+    protected updated(changed: Map<string, unknown>): void;
+    disconnectedCallback(): void;
+    private _teardownDirect;
+    private get _effectiveSelf();
+    private _toDropupOptions;
+    private _onMicToggle;
+    private _onCameraToggle;
+    private _onSpeakerToggle;
+    private _onFullscreenToggle;
+    private _onScreenShareToggle;
+    private _onHandRaiseToggle;
+    private _onHangUp;
+    private _onDeviceChange;
+    private _onSettingsChange;
+    private _buildSettingsItems;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sw-call-controls': SwCallControls;
+    }
+}
+//# sourceMappingURL=sw-call-controls.d.ts.map

package/dist/components/sw-call-controls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-call-controls.d.ts","sourceRoot":"","sources":["../../src/components/sw-call-controls.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAe5C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAI9C;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,MAAM,CAAC,MAAM,0BAIX;IAIF,OAAO,CAAC,QAAQ,CAAgB;IAIhC,OAAO,CAAC,UAAU,CAAC,CAAY;IAE/B,oEAAoE;IACxC,IAAI,CAAC,EAAE,IAAI,CAAC;IAE/B,OAAO,CAAC,WAAW,CAAoC;IAEhE,OAAO,CAAC,oBAAoB,CAAsB;IAEzC,OAAO,CAAC,WAAW,CAAS;IAGrC,eAAe,UAAQ;IAGvB,aAAa,UAAQ;IAGrB,cAAc,UAAS;IAGvB,gBAAgB,UAAS;IAGzB,YAAY,UAAQ;IAGpB,cAAc,UAAQ;IAItB,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAYtD,oBAAoB;IAKpB,OAAO,CAAC,eAAe;IAMvB,OAAO,KAAK,cAAc,GAEzB;IAID,OAAO,CAAC,gBAAgB;IAwBxB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,oBAAoB;IAe5B,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,SAAS;IASjB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,iBAAiB;IAczB,OAAO,CAAC,mBAAmB;IAU3B,MAAM;CAuCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}