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

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

@@ -9,6 +9,14 @@
  * ```html
  * <sw-audio-level .stream=${mediaStream} bars="5" orientation="vertical"></sw-audio-level>
  * ```
+ *
+ * @cssprop [--sw-color-success=#10b981] - Color for low audio levels.
+ * @cssprop [--sw-color-warning=#f59e0b] - Color for medium audio levels.
+ * @cssprop [--sw-color-danger=#ef4444] - 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 {

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

@@ -1 +1 @@
-{"version":3,"file":"audio-level.d.ts","sourceRoot":"","sources":["../../src/components/audio-level.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,qBACa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,MAAM,0BAiEX;IAEF;;OAEG;IACyB,MAAM,CAAC,EAAE,WAAW,CAAC;IAEjD;;OAEG;IACyB,IAAI,SAAK;IAErC;;OAEG;IACwC,WAAW,EAAE,UAAU,GAAG,YAAY,CAAc;IAE/F;;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,iBAAiB;IAQjB;;OAEG;IACH,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAehE;;OAEG;IACH,oBAAoB;IAKpB;;;OAGG;IACI,gBAAgB,IAAI,IAAI;IAK/B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAkC1B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAgC5B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAyC1B;;OAEG;IACH,OAAO,CAAC,aAAa;IAOrB;;OAEG;IACH,OAAO,CAAC,QAAQ;IAIhB;;OAEG;IACH,MAAM;CA0BP;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,UAAU,CAAC;KAC9B;CACF"}
+{"version":3,"file":"audio-level.d.ts","sourceRoot":"","sources":["../../src/components/audio-level.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,qBACa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,MAAM,0BAiEX;IAEF;;OAEG;IACyB,MAAM,CAAC,EAAE,WAAW,CAAC;IAEjD;;OAEG;IACyB,IAAI,SAAK;IAErC;;OAEG;IACwC,WAAW,EAAE,UAAU,GAAG,YAAY,CAAc;IAE/F;;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,iBAAiB;IAQjB;;OAEG;IACH,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAehE;;OAEG;IACH,oBAAoB;IAKpB;;;OAGG;IACI,gBAAgB,IAAI,IAAI;IAK/B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAkC1B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAgC5B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAyC1B;;OAEG;IACH,OAAO,CAAC,aAAa;IAOrB;;OAEG;IACH,OAAO,CAAC,QAAQ;IAIhB;;OAEG;IACH,MAAM;CA0BP;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,UAAU,CAAC;KAC9B;CACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"audio-level.js","sources":["../../src/components/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 * @example\n * ```html\n * <sw-audio-level .stream=${mediaStream} bars=\"5\" orientation=\"vertical\"></sw-audio-level>\n * ```\n */\n\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\n@customElement('sw-audio-level')\nexport class AudioLevel extends LitElement {\n  static styles = css`\n    :host {\n      /* CSS Custom Properties for theming */\n      --sw-color-success: #10b981;\n      --sw-color-warning: #f59e0b;\n      --sw-color-danger: #ef4444;\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(--sw-color-success);\n    }\n\n    .bar.level-medium {\n      background-color: var(--sw-color-warning);\n    }\n\n    .bar.level-high {\n      background-color: var(--sw-color-danger);\n    }\n  `;\n\n  /**\n   * MediaStream to analyze for audio levels\n   */\n  @property({ type: Object }) stream?: MediaStream;\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   * 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   * Lifecycle: Component connected to DOM\n   */\n  connectedCallback() {\n    super.connectedCallback();\n    this._levels = new Array(this.bars).fill(0);\n    if (this.stream) {\n      this.setupAudioAnalysis();\n    }\n  }\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('stream')) {\n      this.cleanupAudioAnalysis();\n      if (this.stream) {\n        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  }\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   * Setup Web Audio API for audio level analysis\n   */\n  private setupAudioAnalysis(): void {\n    if (!this.stream) return;\n\n    // Check if stream has audio tracks\n    const audioTracks = this.stream.getAudioTracks();\n    if (audioTracks.length === 0) {\n      console.warn('sw-audio-level: MediaStream has no audio tracks');\n      return;\n    }\n\n    try {\n      // Create AudioContext\n      this._audioContext = new AudioContext();\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(this.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      console.error('sw-audio-level: 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(console.error);\n      this._audioContext = undefined;\n    }\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    return html`\n      <div class=\"container\" part=\"container\">\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            ></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': AudioLevel;\n  }\n}\n"],"names":["AudioLevel","LitElement","changedProperties","bufferLength","error","updateLevels","analyser","dataArray","levels","binCount","binsPerBar","i","startBin","endBin","sum","j","average","level","html","index","isActive","levelClass","size","style","css","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"audio-level.js","sources":["../../src/components/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 * @example\n * ```html\n * <sw-audio-level .stream=${mediaStream} bars=\"5\" orientation=\"vertical\"></sw-audio-level>\n * ```\n *\n * @cssprop [--sw-color-success=#10b981] - Color for low audio levels.\n * @cssprop [--sw-color-warning=#f59e0b] - Color for medium audio levels.\n * @cssprop [--sw-color-danger=#ef4444] - 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';\n\n@customElement('sw-audio-level')\nexport class AudioLevel extends LitElement {\n  static styles = css`\n    :host {\n      /* CSS Custom Properties for theming */\n      --sw-color-success: #10b981;\n      --sw-color-warning: #f59e0b;\n      --sw-color-danger: #ef4444;\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(--sw-color-success);\n    }\n\n    .bar.level-medium {\n      background-color: var(--sw-color-warning);\n    }\n\n    .bar.level-high {\n      background-color: var(--sw-color-danger);\n    }\n  `;\n\n  /**\n   * MediaStream to analyze for audio levels\n   */\n  @property({ type: Object }) stream?: MediaStream;\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   * 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   * Lifecycle: Component connected to DOM\n   */\n  connectedCallback() {\n    super.connectedCallback();\n    this._levels = new Array(this.bars).fill(0);\n    if (this.stream) {\n      this.setupAudioAnalysis();\n    }\n  }\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('stream')) {\n      this.cleanupAudioAnalysis();\n      if (this.stream) {\n        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  }\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   * Setup Web Audio API for audio level analysis\n   */\n  private setupAudioAnalysis(): void {\n    if (!this.stream) return;\n\n    // Check if stream has audio tracks\n    const audioTracks = this.stream.getAudioTracks();\n    if (audioTracks.length === 0) {\n      console.warn('sw-audio-level: MediaStream has no audio tracks');\n      return;\n    }\n\n    try {\n      // Create AudioContext\n      this._audioContext = new AudioContext();\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(this.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      console.error('sw-audio-level: 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(console.error);\n      this._audioContext = undefined;\n    }\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    return html`\n      <div class=\"container\" part=\"container\">\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            ></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': AudioLevel;\n  }\n}\n"],"names":["AudioLevel","LitElement","changedProperties","bufferLength","error","updateLevels","analyser","dataArray","levels","binCount","binsPerBar","i","startBin","endBin","sum","j","average","level","html","index","isActive","levelClass","size","style","css","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -8,6 +8,30 @@
  * ```html
  * <sw-call-controls .call=${call}></sw-call-controls>
  * ```
+ *
+ * @fires sw-mute-audio - Fired when the mute audio button is clicked. Detail: `{ muted: boolean }`
+ * @fires sw-mute-video - Fired when the mute video button is clicked. Detail: `{ muted: boolean }`
+ * @fires sw-screen-share - Fired when the screen share button is clicked. Detail: `{ active: boolean }`
+ * @fires sw-hangup - Fired when the hangup button is clicked.
+ *
+ * @cssprop [--sw-color-primary=#044cf6] - Primary accent color.
+ * @cssprop [--sw-color-primary-hover=#0339c4] - Primary color on hover.
+ * @cssprop [--sw-color-danger=#ef4444] - Color for destructive actions.
+ * @cssprop [--sw-color-danger-hover=#dc2626] - Danger color on hover.
+ * @cssprop [--sw-color-background=#1a1a1a] - Component background.
+ * @cssprop [--sw-color-surface=#2a2a2a] - Button surface color.
+ * @cssprop [--sw-color-surface-hover=#3a3a3a] - Button surface on hover.
+ * @cssprop [--sw-color-text=#ffffff] - Text color.
+ * @cssprop [--sw-color-text-muted=#a0a0a0] - Muted text color.
+ * @cssprop [--sw-color-border=#404040] - Border color.
+ * @cssprop [--sw-color-active=#ef4444] - Active/toggled button color.
+ * @cssprop [--sw-border-radius=8px] - Border radius for buttons.
+ * @cssprop [--sw-font-family] - Font family stack.
+ * @cssprop [--sw-space-1=4px] - Smallest spacing unit.
+ * @cssprop [--sw-space-2=8px] - Small spacing.
+ * @cssprop [--sw-space-3=12px] - Medium spacing.
+ * @cssprop [--sw-space-4=16px] - Standard spacing.
+ * @cssprop [--sw-space-6=24px] - Large spacing.
  */
 import { LitElement } from 'lit';
 import type { Observable } from 'rxjs';
@@ -20,8 +44,8 @@ export type ScreenShareStatus = 'inactive' | 'pending' | 'active';
  */
 export interface SelfParticipant {
     id: string;
-    audioMuted$: Observable<boolean>;
-    videoMuted$: Observable<boolean>;
+    audioMuted$: Observable<boolean | undefined>;
+    videoMuted$: Observable<boolean | undefined>;
     screenShareStatus$?: Observable<string>;
     mute: () => Promise<void>;
     unmute: () => Promise<void>;
@@ -49,13 +73,9 @@ export declare class CallControls extends LitElement {
      * Consume call from context if not provided as property
      */
     private _contextCall?;
-    /**
-     * Orientation: horizontal (default) or vertical
-     */
+    /** Layout orientation: 'horizontal' or 'vertical'. */
     orientation: 'horizontal' | 'vertical';
-    /**
-     * Show tooltips on hover
-     */
+    /** Whether to display tooltip labels on buttons. */
     showTooltips: boolean;
     /**
      * Current audio muted state

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

@@ -1 +1 @@
-{"version":3,"file":"call-controls.d.ts","sourceRoot":"","sources":["../../src/components/call-controls.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAKrD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAGvC;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC;AAElE;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IACjC,WAAW,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IACjC,kBAAkB,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IACxC,IAAI,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,SAAS,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/B,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACjC,gBAAgB,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACvC,eAAe,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACvC;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAC9B,KAAK,CAAC,EAAE,UAAU,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC;IAC3C,aAAa,CAAC,EAAE,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC;IACrC,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC7B;AAOD,qBACa,YAAa,SAAQ,UAAU;IAC1C,MAAM,CAAC,MAAM,0BAmPX;IAEF;;OAEG;IACyB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IAEpD;;OAEG;IAGH,OAAO,CAAC,YAAY,CAAC,CAAmB;IAExC;;OAEG;IACyB,WAAW,EAAE,YAAY,GAAG,UAAU,CAAgB;IAElF;;OAEG;IACsD,YAAY,UAAQ;IAE7E;;OAEG;IACM,OAAO,CAAC,WAAW,CAAS;IAErC;;OAEG;IACM,OAAO,CAAC,WAAW,CAAS;IAErC;;OAEG;IACM,OAAO,CAAC,kBAAkB,CAAiC;IAEpE;;OAEG;IACM,OAAO,CAAC,aAAa,CAAgB;IAE9C;;OAEG;IACM,OAAO,CAAC,aAAa,CAAS;IAEvC;;OAEG;IACH,OAAO,CAAC,aAAa,CAAsB;IAE3C;;;;OAIG;IACM,OAAO,CAAC,eAAe,CAAC,CAAkB;IAEnD;;OAEG;IACH,OAAO,KAAK,aAAa,GAExB;IAED;;OAEG;IACH,iBAAiB;IAKjB;;OAEG;IACH,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAQhE;;OAEG;IACH,oBAAoB;IAKpB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAyE1B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAM5B;;OAEG;IACH,OAAO,CAAC,aAAa;IAQrB;;OAEG;YACW,eAAe;IA0B7B;;OAEG;YACW,eAAe;IA0B7B;;OAEG;YACW,iBAAiB;IA0B/B;;OAEG;YACW,YAAY;IAkB1B;;OAEG;IACH,OAAO,CAAC,cAAc;IAItB;;OAEG;IACH,OAAO,CAAC,cAAc;IAatB;;OAEG;IACH,OAAO,CAAC,UAAU;IAkDlB;;OAEG;IACH,OAAO,CAAC,YAAY;IA6BpB;;OAEG;IACH,MAAM;CAkFP;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,YAAY,CAAC;KAClC;CACF"}
+{"version":3,"file":"call-controls.d.ts","sourceRoot":"","sources":["../../src/components/call-controls.ts"],"names":[],"mappings":"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"}

package/dist/components/call-controls.js

@@ -49,11 +49,11 @@ let a = class extends b {
         ), s = e.pipe(
           d((o) => (this.selfParticipant = o, o.audioMuted$))
         ).subscribe((o) => {
-          this._audioMuted = o;
+          o !== void 0 && (this._audioMuted = o);
         });
         this.subscriptions.push(s);
         const r = e.pipe(d((o) => o.videoMuted$)).subscribe((o) => {
-          this._videoMuted = o;
+          o !== void 0 && (this._videoMuted = o);
         });
         this.subscriptions.push(r);
         const i = e.pipe(d((o) => o.screenShareStatus$ ?? g("inactive"))).subscribe((o) => {
@@ -62,11 +62,11 @@ let a = class extends b {
         this.subscriptions.push(i);
       } else t.self && (this.selfParticipant = t.self, t.self.audioMuted$ && this.subscriptions.push(
         t.self.audioMuted$.subscribe((e) => {
-          this._audioMuted = e;
+          e !== void 0 && (this._audioMuted = e);
         })
       ), t.self.videoMuted$ && this.subscriptions.push(
         t.self.videoMuted$.subscribe((e) => {
-          this._videoMuted = e;
+          e !== void 0 && (this._videoMuted = e);
         })
       ), t.self.screenShareStatus$ && this.subscriptions.push(
         t.self.screenShareStatus$.subscribe((e) => {

package/dist/components/call-controls.js.map

@@ -1 +1 @@
-{"version":3,"file":"call-controls.js","sources":["../../src/components/call-controls.ts"],"sourcesContent":["/**\n * Call Controls Component\n *\n * Responsive button bar for call actions. Displays mute audio, mute video,\n * screen share, and hangup buttons with states reflecting current call state.\n *\n * @example\n * ```html\n * <sw-call-controls .call=${call}></sw-call-controls>\n * ```\n */\n\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { consume } from '@lit/context';\nimport { Subscription, of } from 'rxjs';\nimport { switchMap, filter } from 'rxjs/operators';\nimport type { Observable } from 'rxjs';\nimport { callContext } from '../context/index.js';\n\n/**\n * Screen share status type\n */\nexport type ScreenShareStatus = 'inactive' | 'pending' | 'active';\n\n/**\n * SelfParticipant interface for call controls\n */\nexport interface SelfParticipant {\n  id: string;\n  audioMuted$: Observable<boolean>;\n  videoMuted$: Observable<boolean>;\n  screenShareStatus$?: Observable<string>;\n  mute: () => Promise<void>;\n  unmute: () => Promise<void>;\n  muteVideo: () => Promise<void>;\n  unmuteVideo: () => Promise<void>;\n  startScreenShare?: () => Promise<void>;\n  stopScreenShare?: () => Promise<void>;\n}\n\n/**\n * Call interface for call controls\n */\nexport interface CallControlsCall {\n  self?: SelfParticipant | null;\n  self$?: Observable<SelfParticipant | null>;\n  capabilities$?: Observable<string[]>;\n  hangup: () => Promise<void>;\n}\n\n/**\n * Button type for controls\n */\ntype ControlButtonType = 'mute-audio' | 'mute-video' | 'screen-share' | 'hangup';\n\n@customElement('sw-call-controls')\nexport class CallControls extends LitElement {\n  static styles = css`\n    :host {\n      /* CSS Custom Properties for theming */\n      --sw-color-primary: #044cf6;\n      --sw-color-primary-hover: #0339c4;\n      --sw-color-danger: #ef4444;\n      --sw-color-danger-hover: #dc2626;\n      --sw-color-background: #1a1a1a;\n      --sw-color-surface: #2a2a2a;\n      --sw-color-surface-hover: #3a3a3a;\n      --sw-color-text: #ffffff;\n      --sw-color-text-muted: #a0a0a0;\n      --sw-color-border: #404040;\n      --sw-color-active: #ef4444;\n      --sw-border-radius: 8px;\n      --sw-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      --sw-space-1: 4px;\n      --sw-space-2: 8px;\n      --sw-space-3: 12px;\n      --sw-space-4: 16px;\n      --sw-space-6: 24px;\n\n      display: block;\n      font-family: var(--sw-font-family);\n      color: var(--sw-color-text);\n    }\n\n    .container {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: var(--sw-space-3);\n      padding: var(--sw-space-3);\n      background: var(--sw-color-background);\n      border-radius: var(--sw-border-radius);\n      flex-wrap: wrap;\n    }\n\n    .container.vertical {\n      flex-direction: column;\n    }\n\n    .control-button {\n      position: relative;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 48px;\n      height: 48px;\n      min-width: 44px;\n      min-height: 44px;\n      padding: 0;\n      background: var(--sw-color-surface);\n      border: 1px solid var(--sw-color-border);\n      border-radius: 50%;\n      color: var(--sw-color-text);\n      cursor: pointer;\n      transition:\n        background-color 0.2s ease,\n        border-color 0.2s ease,\n        transform 0.1s ease;\n    }\n\n    .control-button:hover:not(:disabled) {\n      background: var(--sw-color-surface-hover);\n      border-color: var(--sw-color-text-muted);\n    }\n\n    .control-button:focus {\n      outline: none;\n      box-shadow:\n        0 0 0 2px var(--sw-color-background),\n        0 0 0 4px var(--sw-color-primary);\n    }\n\n    .control-button:focus-visible {\n      outline: 2px solid var(--sw-color-primary);\n      outline-offset: 2px;\n    }\n\n    .control-button:active:not(:disabled) {\n      transform: scale(0.95);\n    }\n\n    .control-button:disabled {\n      opacity: 0.4;\n      cursor: not-allowed;\n    }\n\n    .control-button.active {\n      background: var(--sw-color-active);\n      border-color: var(--sw-color-active);\n      color: white;\n    }\n\n    .control-button.active:hover:not(:disabled) {\n      background: var(--sw-color-danger-hover);\n      border-color: var(--sw-color-danger-hover);\n    }\n\n    .control-button.hangup {\n      background: var(--sw-color-danger);\n      border-color: var(--sw-color-danger);\n      color: white;\n    }\n\n    .control-button.hangup:hover:not(:disabled) {\n      background: var(--sw-color-danger-hover);\n      border-color: var(--sw-color-danger-hover);\n    }\n\n    .control-button.screen-share.active {\n      background: var(--sw-color-primary);\n      border-color: var(--sw-color-primary);\n    }\n\n    .control-button.screen-share.active:hover:not(:disabled) {\n      background: var(--sw-color-primary-hover);\n      border-color: var(--sw-color-primary-hover);\n    }\n\n    .button-icon {\n      width: 24px;\n      height: 24px;\n      flex-shrink: 0;\n    }\n\n    .tooltip {\n      position: absolute;\n      bottom: calc(100% + 8px);\n      left: 50%;\n      transform: translateX(-50%);\n      padding: var(--sw-space-1) var(--sw-space-2);\n      background: var(--sw-color-surface);\n      border: 1px solid var(--sw-color-border);\n      border-radius: 4px;\n      font-size: 12px;\n      white-space: nowrap;\n      opacity: 0;\n      visibility: hidden;\n      transition:\n        opacity 0.2s ease,\n        visibility 0.2s ease;\n      pointer-events: none;\n      z-index: 10;\n    }\n\n    .tooltip::after {\n      content: '';\n      position: absolute;\n      top: 100%;\n      left: 50%;\n      transform: translateX(-50%);\n      border: 6px solid transparent;\n      border-top-color: var(--sw-color-border);\n    }\n\n    .control-button:hover .tooltip,\n    .control-button:focus .tooltip {\n      opacity: 1;\n      visibility: visible;\n    }\n\n    /* Vertical orientation tooltip positioning */\n    .container.vertical .tooltip {\n      bottom: auto;\n      left: calc(100% + 8px);\n      top: 50%;\n      transform: translateY(-50%);\n    }\n\n    .container.vertical .tooltip::after {\n      top: 50%;\n      left: auto;\n      right: 100%;\n      transform: translateY(-50%);\n      border: 6px solid transparent;\n      border-right-color: var(--sw-color-border);\n    }\n\n    /* Overflow menu for responsive collapse */\n    .overflow-menu {\n      position: relative;\n    }\n\n    .overflow-button {\n      display: none;\n    }\n\n    .overflow-content {\n      display: none;\n      position: absolute;\n      bottom: calc(100% + 8px);\n      right: 0;\n      background: var(--sw-color-background);\n      border: 1px solid var(--sw-color-border);\n      border-radius: var(--sw-border-radius);\n      padding: var(--sw-space-2);\n      gap: var(--sw-space-2);\n      flex-direction: column;\n      z-index: 20;\n    }\n\n    .overflow-menu.open .overflow-content {\n      display: flex;\n    }\n\n    /* Responsive collapse at small widths */\n    @media (max-width: 320px) {\n      .container:not(.vertical) > .control-button:not(.hangup):not(.overflow-button) {\n        display: none;\n      }\n\n      .container:not(.vertical) .overflow-button {\n        display: flex;\n      }\n\n      /* Ensure overflow content buttons remain visible when menu is open */\n      .container:not(.vertical) .overflow-content .control-button {\n        display: flex;\n      }\n    }\n\n    /* Dark mode adjustments */\n    @media (prefers-color-scheme: light) {\n      :host {\n        --sw-color-background: #ffffff;\n        --sw-color-surface: #f5f5f5;\n        --sw-color-surface-hover: #e5e5e5;\n        --sw-color-text: #1a1a1a;\n        --sw-color-text-muted: #666666;\n        --sw-color-border: #d4d4d4;\n      }\n    }\n\n    :host([data-theme='light']) {\n      --sw-color-background: #ffffff;\n      --sw-color-surface: #f5f5f5;\n      --sw-color-surface-hover: #e5e5e5;\n      --sw-color-text: #1a1a1a;\n      --sw-color-text-muted: #666666;\n      --sw-color-border: #d4d4d4;\n    }\n  `;\n\n  /**\n   * The call object - can be provided via property or context\n   */\n  @property({ type: Object }) call?: CallControlsCall;\n\n  /**\n   * Consume call from context if not provided as property\n   */\n  @consume({ context: callContext, subscribe: true })\n  @state()\n  private _contextCall?: CallControlsCall;\n\n  /**\n   * Orientation: horizontal (default) or vertical\n   */\n  @property({ type: String }) orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Show tooltips on hover\n   */\n  @property({ type: Boolean, attribute: 'show-tooltips' }) showTooltips = true;\n\n  /**\n   * Current audio muted state\n   */\n  @state() private _audioMuted = false;\n\n  /**\n   * Current video muted state\n   */\n  @state() private _videoMuted = false;\n\n  /**\n   * Current screen share status\n   */\n  @state() private _screenShareStatus: ScreenShareStatus = 'inactive';\n\n  /**\n   * Available capabilities\n   */\n  @state() private _capabilities: string[] = [];\n\n  /**\n   * Is overflow menu open\n   */\n  @state() private _overflowOpen = false;\n\n  /**\n   * RxJS subscriptions for cleanup\n   */\n  private subscriptions: Subscription[] = [];\n\n  /**\n   * Cached self participant reference for button handlers.\n   * Marked as @state() to trigger re-render when self becomes available,\n   * enabling the control buttons.\n   */\n  @state() private selfParticipant?: SelfParticipant;\n\n  /**\n   * Get the effective call (property or context)\n   */\n  private get effectiveCall(): CallControlsCall | undefined {\n    return this.call || this._contextCall;\n  }\n\n  /**\n   * Lifecycle: Component connected to DOM\n   */\n  connectedCallback() {\n    super.connectedCallback();\n    this.setupSubscriptions();\n  }\n\n  /**\n   * Lifecycle: React to property changes\n   */\n  protected updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('call') || changedProperties.has('_contextCall')) {\n      this.cleanupSubscriptions();\n      this.setupSubscriptions();\n    }\n  }\n\n  /**\n   * Lifecycle: Component disconnected from DOM\n   */\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.cleanupSubscriptions();\n  }\n\n  /**\n   * Subscribe to call observables\n   */\n  private setupSubscriptions(): void {\n    const call = this.effectiveCall;\n    if (!call) return;\n\n    // Use self$ observable if available (recommended for real calls)\n    if (call.self$) {\n      // Subscribe to self$ and switch to audioMuted$ when self becomes available\n      const nonNullSelf$ = call.self$.pipe(\n        filter((self): self is SelfParticipant => self !== null)\n      );\n\n      const audioSub = nonNullSelf$\n        .pipe(\n          switchMap((self) => {\n            this.selfParticipant = self;\n            return self.audioMuted$;\n          })\n        )\n        .subscribe((muted) => {\n          this._audioMuted = muted;\n        });\n      this.subscriptions.push(audioSub);\n\n      // Subscribe to videoMuted$\n      const videoSub = nonNullSelf$.pipe(switchMap((self) => self.videoMuted$)).subscribe((muted) => {\n        this._videoMuted = muted;\n      });\n      this.subscriptions.push(videoSub);\n\n      // Subscribe to screenShareStatus$\n      const screenShareSub = nonNullSelf$\n        .pipe(switchMap((self) => self.screenShareStatus$ ?? of('inactive' as ScreenShareStatus)))\n        .subscribe((status) => {\n          this._screenShareStatus = status as ScreenShareStatus;\n        });\n      this.subscriptions.push(screenShareSub);\n    } else if (call.self) {\n      // Fallback for synchronous self (tests, mocks)\n      this.selfParticipant = call.self;\n\n      if (call.self.audioMuted$) {\n        this.subscriptions.push(\n          call.self.audioMuted$.subscribe((muted) => {\n            this._audioMuted = muted;\n          })\n        );\n      }\n      if (call.self.videoMuted$) {\n        this.subscriptions.push(\n          call.self.videoMuted$.subscribe((muted) => {\n            this._videoMuted = muted;\n          })\n        );\n      }\n      if (call.self.screenShareStatus$) {\n        this.subscriptions.push(\n          call.self.screenShareStatus$.subscribe((status) => {\n            this._screenShareStatus = status as ScreenShareStatus;\n          })\n        );\n      }\n    }\n\n    // Subscribe to capabilities\n    if (call.capabilities$) {\n      this.subscriptions.push(\n        call.capabilities$.subscribe((caps) => {\n          this._capabilities = caps;\n        })\n      );\n    }\n  }\n\n  /**\n   * Cleanup all subscriptions\n   */\n  private cleanupSubscriptions(): void {\n    this.subscriptions.forEach((sub) => sub.unsubscribe());\n    this.subscriptions = [];\n    this.selfParticipant = undefined;\n  }\n\n  /**\n   * Check if capability is available\n   */\n  private hasCapability(capability: string): boolean {\n    // If no capabilities defined, assume all available\n    if (!this._capabilities || this._capabilities.length === 0) {\n      return true;\n    }\n    return this._capabilities.includes(capability);\n  }\n\n  /**\n   * Handle mute audio toggle\n   */\n  private async handleMuteAudio(): Promise<void> {\n    const self = this.selfParticipant ?? this.effectiveCall?.self;\n    if (!self) return;\n\n    // Capture the intended new state before calling the SDK\n    const willBeMuted = !this._audioMuted;\n\n    try {\n      if (this._audioMuted) {\n        await self.unmute();\n      } else {\n        await self.mute();\n      }\n\n      this.dispatchEvent(\n        new CustomEvent('sw-mute-audio', {\n          detail: { muted: willBeMuted },\n          bubbles: true,\n          composed: true\n        })\n      );\n    } catch (error) {\n      console.error('Failed to toggle audio mute:', error);\n    }\n  }\n\n  /**\n   * Handle mute video toggle\n   */\n  private async handleMuteVideo(): Promise<void> {\n    const self = this.selfParticipant ?? this.effectiveCall?.self;\n    if (!self) return;\n\n    // Capture the intended new state before calling the SDK\n    const willBeMuted = !this._videoMuted;\n\n    try {\n      if (this._videoMuted) {\n        await self.unmuteVideo();\n      } else {\n        await self.muteVideo();\n      }\n\n      this.dispatchEvent(\n        new CustomEvent('sw-mute-video', {\n          detail: { muted: willBeMuted },\n          bubbles: true,\n          composed: true\n        })\n      );\n    } catch (error) {\n      console.error('Failed to toggle video mute:', error);\n    }\n  }\n\n  /**\n   * Handle screen share toggle\n   */\n  private async handleScreenShare(): Promise<void> {\n    const self = this.selfParticipant ?? this.effectiveCall?.self;\n    if (!self) return;\n\n    // Capture the intended new state before calling the SDK\n    const willBeActive = this._screenShareStatus !== 'active';\n\n    try {\n      if (this._screenShareStatus === 'active') {\n        await self.stopScreenShare?.();\n      } else {\n        await self.startScreenShare?.();\n      }\n\n      this.dispatchEvent(\n        new CustomEvent('sw-screen-share', {\n          detail: { active: willBeActive },\n          bubbles: true,\n          composed: true\n        })\n      );\n    } catch (error) {\n      console.error('Failed to toggle screen share:', error);\n    }\n  }\n\n  /**\n   * Handle hangup\n   */\n  private async handleHangup(): Promise<void> {\n    const call = this.effectiveCall;\n    if (!call) return;\n\n    try {\n      await call.hangup();\n\n      this.dispatchEvent(\n        new CustomEvent('sw-hangup', {\n          bubbles: true,\n          composed: true\n        })\n      );\n    } catch (error) {\n      console.error('Failed to hangup:', error);\n    }\n  }\n\n  /**\n   * Toggle overflow menu\n   */\n  private toggleOverflow(): void {\n    this._overflowOpen = !this._overflowOpen;\n  }\n\n  /**\n   * Get tooltip text for button\n   */\n  private getTooltipText(type: ControlButtonType): string {\n    switch (type) {\n      case 'mute-audio':\n        return this._audioMuted ? 'Unmute Audio' : 'Mute Audio';\n      case 'mute-video':\n        return this._videoMuted ? 'Turn On Camera' : 'Turn Off Camera';\n      case 'screen-share':\n        return this._screenShareStatus === 'active' ? 'Stop Sharing' : 'Share Screen';\n      case 'hangup':\n        return 'End Call';\n    }\n  }\n\n  /**\n   * Render button icon\n   */\n  private renderIcon(type: ControlButtonType) {\n    switch (type) {\n      case 'mute-audio':\n        return this._audioMuted\n          ? html`<svg class=\"button-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path\n                d=\"M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z\"\n              />\n            </svg>`\n          : html`<svg class=\"button-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path\n                d=\"M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.91-3c-.49 0-.9.36-.98.85C16.52 14.2 14.47 16 12 16s-4.52-1.8-4.93-4.15c-.08-.49-.49-.85-.98-.85-.61 0-1.09.54-1 1.14.49 3 2.89 5.35 5.91 5.78V20c0 .55.45 1 1 1s1-.45 1-1v-2.08c3.02-.43 5.42-2.78 5.91-5.78.1-.6-.39-1.14-1-1.14z\"\n              />\n            </svg>`;\n\n      case 'mute-video':\n        return this._videoMuted\n          ? html`<svg class=\"button-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path\n                d=\"M21 6.5l-4 4V7c0-.55-.45-1-1-1H9.82L21 17.18V6.5zM3.27 2L2 3.27 4.73 6H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.21 0 .39-.08.54-.18L19.73 21 21 19.73 3.27 2z\"\n              />\n            </svg>`\n          : html`<svg class=\"button-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path\n                d=\"M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z\"\n              />\n            </svg>`;\n\n      case 'screen-share':\n        return this._screenShareStatus === 'active'\n          ? html`<svg class=\"button-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path\n                d=\"M21.22 18.02l2 2H24v-2h-2.78zm.77-2l.01-10c0-1.11-.9-2-2-2H7.22l5.23 5.23c.18-.04.36-.07.55-.1V7.02l4 3.73-1.58 1.47 5.54 5.54c.61-.33 1.03-.99 1.03-1.74zM2.39 1.73L1.11 3l1.54 1.54c-.4.36-.65.89-.65 1.48v10c0 1.1.89 2 2 2H0v2h18.13l2.71 2.71 1.27-1.27L2.39 1.73zM7 15.02c.31-1.48.92-2.95 2.07-4.06l1.59 1.59c-1.54.38-2.7 1.18-3.66 2.47z\"\n              />\n            </svg>`\n          : html`<svg class=\"button-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path\n                d=\"M20 18c1.1 0 1.99-.9 1.99-2L22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6zm9 9v-4h3l-4-4-4 4h3v4h2z\"\n              />\n            </svg>`;\n\n      case 'hangup':\n        return html`<svg class=\"button-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n          <path\n            d=\"M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08c-.18-.17-.29-.42-.29-.7 0-.28.11-.53.29-.71C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.67c.18.18.29.43.29.71 0 .28-.11.53-.29.71l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.11-.7-.28-.79-.74-1.69-1.36-2.67-1.85-.33-.16-.56-.5-.56-.9v-3.1C15.15 9.25 13.6 9 12 9z\"\n          />\n        </svg>`;\n    }\n  }\n\n  /**\n   * Render a control button\n   */\n  private renderButton(\n    type: ControlButtonType,\n    options: {\n      onClick: () => void;\n      active?: boolean;\n      disabled?: boolean;\n      className?: string;\n    }\n  ) {\n    const { onClick, active = false, disabled = false, className = '' } = options;\n    const tooltipText = this.getTooltipText(type);\n\n    return html`\n      <button\n        class=\"control-button ${type} ${active ? 'active' : ''} ${className}\"\n        part=\"button ${active ? 'button-active' : ''} ${disabled ? 'button-disabled' : ''}\"\n        aria-label=\"${tooltipText}\"\n        aria-pressed=\"${type !== 'hangup' ? active : nothing}\"\n        ?disabled=${disabled}\n        @click=${onClick}\n      >\n        ${this.renderIcon(type)}\n        ${this.showTooltips\n          ? html` <span class=\"tooltip\" part=\"tooltip\">${tooltipText}</span> `\n          : nothing}\n      </button>\n    `;\n  }\n\n  /**\n   * Render the component\n   */\n  render() {\n    const call = this.effectiveCall;\n    const hasSelf = Boolean(this.selfParticipant ?? call?.self);\n\n    // Check capabilities - server sends: self, member, vmuted, layout, digit, screenshare, device, lock, end\n    // Having 'self' capability implies self-controls are available (mute audio/video)\n    const hasSelfCapability = this.hasCapability('self');\n    const canMuteAudio =\n      hasSelfCapability || this.hasCapability('selfMuteAudio') || this.hasCapability('muteAudio');\n    const canMuteVideo =\n      hasSelfCapability ||\n      this.hasCapability('vmuted') ||\n      this.hasCapability('selfMuteVideo') ||\n      this.hasCapability('muteVideo');\n    const canScreenShare =\n      (this.hasCapability('screenshare') || this.hasCapability('screenShare')) &&\n      Boolean(this.selfParticipant?.startScreenShare ?? call?.self?.startScreenShare);\n    const canHangup = true; // Always allow hangup\n\n    return html`\n      <div\n        class=\"container ${this.orientation === 'vertical' ? 'vertical' : ''}\"\n        part=\"container\"\n        role=\"toolbar\"\n        aria-label=\"Call controls\"\n      >\n        ${this.renderButton('mute-audio', {\n          onClick: () => this.handleMuteAudio(),\n          active: this._audioMuted,\n          disabled: !hasSelf || !canMuteAudio\n        })}\n        ${this.renderButton('mute-video', {\n          onClick: () => this.handleMuteVideo(),\n          active: this._videoMuted,\n          disabled: !hasSelf || !canMuteVideo\n        })}\n        ${this.renderButton('screen-share', {\n          onClick: () => this.handleScreenShare(),\n          active: this._screenShareStatus === 'active',\n          disabled: !hasSelf || !canScreenShare\n        })}\n        ${this.renderButton('hangup', {\n          onClick: () => this.handleHangup(),\n          disabled: !call || !canHangup,\n          className: 'hangup'\n        })}\n\n        <!-- Overflow menu for responsive collapse -->\n        <div class=\"overflow-menu ${this._overflowOpen ? 'open' : ''}\">\n          <button\n            class=\"control-button overflow-button\"\n            aria-label=\"More options\"\n            aria-expanded=\"${this._overflowOpen}\"\n            @click=${this.toggleOverflow}\n          >\n            <svg class=\"button-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path\n                d=\"M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\"\n              />\n            </svg>\n          </button>\n          <div class=\"overflow-content\">\n            ${this.renderButton('mute-audio', {\n              onClick: () => this.handleMuteAudio(),\n              active: this._audioMuted,\n              disabled: !hasSelf || !canMuteAudio\n            })}\n            ${this.renderButton('mute-video', {\n              onClick: () => this.handleMuteVideo(),\n              active: this._videoMuted,\n              disabled: !hasSelf || !canMuteVideo\n            })}\n            ${this.renderButton('screen-share', {\n              onClick: () => this.handleScreenShare(),\n              active: this._screenShareStatus === 'active',\n              disabled: !hasSelf || !canScreenShare\n            })}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\n/**\n * Declare global type for TypeScript\n */\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-call-controls': CallControls;\n  }\n}\n"],"names":["CallControls","LitElement","changedProperties","call","nonNullSelf$","filter","self","audioSub","switchMap","muted","videoSub","screenShareSub","of","status","caps","sub","capability","_a","willBeMuted","error","willBeActive","_b","_c","type","html","options","onClick","active","disabled","className","tooltipText","nothing","hasSelf","hasSelfCapability","canMuteAudio","canMuteVideo","canScreenShare","css","__decorateClass","property","consume","callContext","state","customElement"],"mappings":"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"}
+{"version":3,"file":"call-controls.js","sources":["../../src/components/call-controls.ts"],"sourcesContent":["/**\n * Call Controls Component\n *\n * Responsive button bar for call actions. Displays mute audio, mute video,\n * screen share, and hangup buttons with states reflecting current call state.\n *\n * @example\n * ```html\n * <sw-call-controls .call=${call}></sw-call-controls>\n * ```\n *\n * @fires sw-mute-audio - Fired when the mute audio button is clicked. Detail: `{ muted: boolean }`\n * @fires sw-mute-video - Fired when the mute video button is clicked. Detail: `{ muted: boolean }`\n * @fires sw-screen-share - Fired when the screen share button is clicked. Detail: `{ active: boolean }`\n * @fires sw-hangup - Fired when the hangup button is clicked.\n *\n * @cssprop [--sw-color-primary=#044cf6] - Primary accent color.\n * @cssprop [--sw-color-primary-hover=#0339c4] - Primary color on hover.\n * @cssprop [--sw-color-danger=#ef4444] - Color for destructive actions.\n * @cssprop [--sw-color-danger-hover=#dc2626] - Danger color on hover.\n * @cssprop [--sw-color-background=#1a1a1a] - Component background.\n * @cssprop [--sw-color-surface=#2a2a2a] - Button surface color.\n * @cssprop [--sw-color-surface-hover=#3a3a3a] - Button surface on hover.\n * @cssprop [--sw-color-text=#ffffff] - Text color.\n * @cssprop [--sw-color-text-muted=#a0a0a0] - Muted text color.\n * @cssprop [--sw-color-border=#404040] - Border color.\n * @cssprop [--sw-color-active=#ef4444] - Active/toggled button color.\n * @cssprop [--sw-border-radius=8px] - Border radius for buttons.\n * @cssprop [--sw-font-family] - Font family stack.\n * @cssprop [--sw-space-1=4px] - Smallest spacing unit.\n * @cssprop [--sw-space-2=8px] - Small spacing.\n * @cssprop [--sw-space-3=12px] - Medium spacing.\n * @cssprop [--sw-space-4=16px] - Standard spacing.\n * @cssprop [--sw-space-6=24px] - Large spacing.\n */\n\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { consume } from '@lit/context';\nimport { Subscription, of } from 'rxjs';\nimport { switchMap, filter } from 'rxjs/operators';\nimport type { Observable } from 'rxjs';\nimport { callContext } from '../context/index.js';\n\n/**\n * Screen share status type\n */\nexport type ScreenShareStatus = 'inactive' | 'pending' | 'active';\n\n/**\n * SelfParticipant interface for call controls\n */\nexport interface SelfParticipant {\n  id: string;\n  audioMuted$: Observable<boolean | undefined>;\n  videoMuted$: Observable<boolean | undefined>;\n  screenShareStatus$?: Observable<string>;\n  mute: () => Promise<void>;\n  unmute: () => Promise<void>;\n  muteVideo: () => Promise<void>;\n  unmuteVideo: () => Promise<void>;\n  startScreenShare?: () => Promise<void>;\n  stopScreenShare?: () => Promise<void>;\n}\n\n/**\n * Call interface for call controls\n */\nexport interface CallControlsCall {\n  self?: SelfParticipant | null;\n  self$?: Observable<SelfParticipant | null>;\n  capabilities$?: Observable<string[]>;\n  hangup: () => Promise<void>;\n}\n\n/**\n * Button type for controls\n */\ntype ControlButtonType = 'mute-audio' | 'mute-video' | 'screen-share' | 'hangup';\n\n@customElement('sw-call-controls')\nexport class CallControls extends LitElement {\n  static styles = css`\n    :host {\n      /* CSS Custom Properties for theming */\n      --sw-color-primary: #044cf6;\n      --sw-color-primary-hover: #0339c4;\n      --sw-color-danger: #ef4444;\n      --sw-color-danger-hover: #dc2626;\n      --sw-color-background: #1a1a1a;\n      --sw-color-surface: #2a2a2a;\n      --sw-color-surface-hover: #3a3a3a;\n      --sw-color-text: #ffffff;\n      --sw-color-text-muted: #a0a0a0;\n      --sw-color-border: #404040;\n      --sw-color-active: #ef4444;\n      --sw-border-radius: 8px;\n      --sw-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      --sw-space-1: 4px;\n      --sw-space-2: 8px;\n      --sw-space-3: 12px;\n      --sw-space-4: 16px;\n      --sw-space-6: 24px;\n\n      display: block;\n      font-family: var(--sw-font-family);\n      color: var(--sw-color-text);\n    }\n\n    .container {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: var(--sw-space-3);\n      padding: var(--sw-space-3);\n      background: var(--sw-color-background);\n      border-radius: var(--sw-border-radius);\n      flex-wrap: wrap;\n    }\n\n    .container.vertical {\n      flex-direction: column;\n    }\n\n    .control-button {\n      position: relative;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 48px;\n      height: 48px;\n      min-width: 44px;\n      min-height: 44px;\n      padding: 0;\n      background: var(--sw-color-surface);\n      border: 1px solid var(--sw-color-border);\n      border-radius: 50%;\n      color: var(--sw-color-text);\n      cursor: pointer;\n      transition:\n        background-color 0.2s ease,\n        border-color 0.2s ease,\n        transform 0.1s ease;\n    }\n\n    .control-button:hover:not(:disabled) {\n      background: var(--sw-color-surface-hover);\n      border-color: var(--sw-color-text-muted);\n    }\n\n    .control-button:focus {\n      outline: none;\n      box-shadow:\n        0 0 0 2px var(--sw-color-background),\n        0 0 0 4px var(--sw-color-primary);\n    }\n\n    .control-button:focus-visible {\n      outline: 2px solid var(--sw-color-primary);\n      outline-offset: 2px;\n    }\n\n    .control-button:active:not(:disabled) {\n      transform: scale(0.95);\n    }\n\n    .control-button:disabled {\n      opacity: 0.4;\n      cursor: not-allowed;\n    }\n\n    .control-button.active {\n      background: var(--sw-color-active);\n      border-color: var(--sw-color-active);\n      color: white;\n    }\n\n    .control-button.active:hover:not(:disabled) {\n      background: var(--sw-color-danger-hover);\n      border-color: var(--sw-color-danger-hover);\n    }\n\n    .control-button.hangup {\n      background: var(--sw-color-danger);\n      border-color: var(--sw-color-danger);\n      color: white;\n    }\n\n    .control-button.hangup:hover:not(:disabled) {\n      background: var(--sw-color-danger-hover);\n      border-color: var(--sw-color-danger-hover);\n    }\n\n    .control-button.screen-share.active {\n      background: var(--sw-color-primary);\n      border-color: var(--sw-color-primary);\n    }\n\n    .control-button.screen-share.active:hover:not(:disabled) {\n      background: var(--sw-color-primary-hover);\n      border-color: var(--sw-color-primary-hover);\n    }\n\n    .button-icon {\n      width: 24px;\n      height: 24px;\n      flex-shrink: 0;\n    }\n\n    .tooltip {\n      position: absolute;\n      bottom: calc(100% + 8px);\n      left: 50%;\n      transform: translateX(-50%);\n      padding: var(--sw-space-1) var(--sw-space-2);\n      background: var(--sw-color-surface);\n      border: 1px solid var(--sw-color-border);\n      border-radius: 4px;\n      font-size: 12px;\n      white-space: nowrap;\n      opacity: 0;\n      visibility: hidden;\n      transition:\n        opacity 0.2s ease,\n        visibility 0.2s ease;\n      pointer-events: none;\n      z-index: 10;\n    }\n\n    .tooltip::after {\n      content: '';\n      position: absolute;\n      top: 100%;\n      left: 50%;\n      transform: translateX(-50%);\n      border: 6px solid transparent;\n      border-top-color: var(--sw-color-border);\n    }\n\n    .control-button:hover .tooltip,\n    .control-button:focus .tooltip {\n      opacity: 1;\n      visibility: visible;\n    }\n\n    /* Vertical orientation tooltip positioning */\n    .container.vertical .tooltip {\n      bottom: auto;\n      left: calc(100% + 8px);\n      top: 50%;\n      transform: translateY(-50%);\n    }\n\n    .container.vertical .tooltip::after {\n      top: 50%;\n      left: auto;\n      right: 100%;\n      transform: translateY(-50%);\n      border: 6px solid transparent;\n      border-right-color: var(--sw-color-border);\n    }\n\n    /* Overflow menu for responsive collapse */\n    .overflow-menu {\n      position: relative;\n    }\n\n    .overflow-button {\n      display: none;\n    }\n\n    .overflow-content {\n      display: none;\n      position: absolute;\n      bottom: calc(100% + 8px);\n      right: 0;\n      background: var(--sw-color-background);\n      border: 1px solid var(--sw-color-border);\n      border-radius: var(--sw-border-radius);\n      padding: var(--sw-space-2);\n      gap: var(--sw-space-2);\n      flex-direction: column;\n      z-index: 20;\n    }\n\n    .overflow-menu.open .overflow-content {\n      display: flex;\n    }\n\n    /* Responsive collapse at small widths */\n    @media (max-width: 320px) {\n      .container:not(.vertical) > .control-button:not(.hangup):not(.overflow-button) {\n        display: none;\n      }\n\n      .container:not(.vertical) .overflow-button {\n        display: flex;\n      }\n\n      /* Ensure overflow content buttons remain visible when menu is open */\n      .container:not(.vertical) .overflow-content .control-button {\n        display: flex;\n      }\n    }\n\n    /* Dark mode adjustments */\n    @media (prefers-color-scheme: light) {\n      :host {\n        --sw-color-background: #ffffff;\n        --sw-color-surface: #f5f5f5;\n        --sw-color-surface-hover: #e5e5e5;\n        --sw-color-text: #1a1a1a;\n        --sw-color-text-muted: #666666;\n        --sw-color-border: #d4d4d4;\n      }\n    }\n\n    :host([data-theme='light']) {\n      --sw-color-background: #ffffff;\n      --sw-color-surface: #f5f5f5;\n      --sw-color-surface-hover: #e5e5e5;\n      --sw-color-text: #1a1a1a;\n      --sw-color-text-muted: #666666;\n      --sw-color-border: #d4d4d4;\n    }\n  `;\n\n  /**\n   * The call object - can be provided via property or context\n   */\n  @property({ type: Object }) call?: CallControlsCall;\n\n  /**\n   * Consume call from context if not provided as property\n   */\n  @consume({ context: callContext, subscribe: true })\n  @state()\n  private _contextCall?: CallControlsCall;\n\n  /** Layout orientation: 'horizontal' or 'vertical'. */\n  @property({ type: String }) orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /** Whether to display tooltip labels on buttons. */\n  @property({ type: Boolean, attribute: 'show-tooltips' }) showTooltips = true;\n\n  /**\n   * Current audio muted state\n   */\n  @state() private _audioMuted = false;\n\n  /**\n   * Current video muted state\n   */\n  @state() private _videoMuted = false;\n\n  /**\n   * Current screen share status\n   */\n  @state() private _screenShareStatus: ScreenShareStatus = 'inactive';\n\n  /**\n   * Available capabilities\n   */\n  @state() private _capabilities: string[] = [];\n\n  /**\n   * Is overflow menu open\n   */\n  @state() private _overflowOpen = false;\n\n  /**\n   * RxJS subscriptions for cleanup\n   */\n  private subscriptions: Subscription[] = [];\n\n  /**\n   * Cached self participant reference for button handlers.\n   * Marked as @state() to trigger re-render when self becomes available,\n   * enabling the control buttons.\n   */\n  @state() private selfParticipant?: SelfParticipant;\n\n  /**\n   * Get the effective call (property or context)\n   */\n  private get effectiveCall(): CallControlsCall | undefined {\n    return this.call || this._contextCall;\n  }\n\n  /**\n   * Lifecycle: Component connected to DOM\n   */\n  connectedCallback() {\n    super.connectedCallback();\n    this.setupSubscriptions();\n  }\n\n  /**\n   * Lifecycle: React to property changes\n   */\n  protected updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('call') || changedProperties.has('_contextCall')) {\n      this.cleanupSubscriptions();\n      this.setupSubscriptions();\n    }\n  }\n\n  /**\n   * Lifecycle: Component disconnected from DOM\n   */\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.cleanupSubscriptions();\n  }\n\n  /**\n   * Subscribe to call observables\n   */\n  private setupSubscriptions(): void {\n    const call = this.effectiveCall;\n    if (!call) return;\n\n    // Use self$ observable if available (recommended for real calls)\n    if (call.self$) {\n      // Subscribe to self$ and switch to audioMuted$ when self becomes available\n      const nonNullSelf$ = call.self$.pipe(\n        filter((self): self is SelfParticipant => self !== null)\n      );\n\n      const audioSub = nonNullSelf$\n        .pipe(\n          switchMap((self) => {\n            this.selfParticipant = self;\n            return self.audioMuted$;\n          })\n        )\n        .subscribe((muted) => {\n          if (muted !== undefined) this._audioMuted = muted;\n        });\n      this.subscriptions.push(audioSub);\n\n      // Subscribe to videoMuted$\n      const videoSub = nonNullSelf$\n        .pipe(switchMap((self) => self.videoMuted$))\n        .subscribe((muted) => {\n          if (muted !== undefined) this._videoMuted = muted;\n        });\n      this.subscriptions.push(videoSub);\n\n      // Subscribe to screenShareStatus$\n      const screenShareSub = nonNullSelf$\n        .pipe(switchMap((self) => self.screenShareStatus$ ?? of('inactive' as ScreenShareStatus)))\n        .subscribe((status) => {\n          this._screenShareStatus = status as ScreenShareStatus;\n        });\n      this.subscriptions.push(screenShareSub);\n    } else if (call.self) {\n      // Fallback for synchronous self (tests, mocks)\n      this.selfParticipant = call.self;\n\n      if (call.self.audioMuted$) {\n        this.subscriptions.push(\n          call.self.audioMuted$.subscribe((muted) => {\n            if (muted !== undefined) this._audioMuted = muted;\n          })\n        );\n      }\n      if (call.self.videoMuted$) {\n        this.subscriptions.push(\n          call.self.videoMuted$.subscribe((muted) => {\n            if (muted !== undefined) this._videoMuted = muted;\n          })\n        );\n      }\n      if (call.self.screenShareStatus$) {\n        this.subscriptions.push(\n          call.self.screenShareStatus$.subscribe((status) => {\n            this._screenShareStatus = status as ScreenShareStatus;\n          })\n        );\n      }\n    }\n\n    // Subscribe to capabilities\n    if (call.capabilities$) {\n      this.subscriptions.push(\n        call.capabilities$.subscribe((caps) => {\n          this._capabilities = caps;\n        })\n      );\n    }\n  }\n\n  /**\n   * Cleanup all subscriptions\n   */\n  private cleanupSubscriptions(): void {\n    this.subscriptions.forEach((sub) => sub.unsubscribe());\n    this.subscriptions = [];\n    this.selfParticipant = undefined;\n  }\n\n  /**\n   * Check if capability is available\n   */\n  private hasCapability(capability: string): boolean {\n    // If no capabilities defined, assume all available\n    if (!this._capabilities || this._capabilities.length === 0) {\n      return true;\n    }\n    return this._capabilities.includes(capability);\n  }\n\n  /**\n   * Handle mute audio toggle\n   */\n  private async handleMuteAudio(): Promise<void> {\n    const self = this.selfParticipant ?? this.effectiveCall?.self;\n    if (!self) return;\n\n    // Capture the intended new state before calling the SDK\n    const willBeMuted = !this._audioMuted;\n\n    try {\n      if (this._audioMuted) {\n        await self.unmute();\n      } else {\n        await self.mute();\n      }\n\n      this.dispatchEvent(\n        new CustomEvent('sw-mute-audio', {\n          detail: { muted: willBeMuted },\n          bubbles: true,\n          composed: true\n        })\n      );\n    } catch (error) {\n      console.error('Failed to toggle audio mute:', error);\n    }\n  }\n\n  /**\n   * Handle mute video toggle\n   */\n  private async handleMuteVideo(): Promise<void> {\n    const self = this.selfParticipant ?? this.effectiveCall?.self;\n    if (!self) return;\n\n    // Capture the intended new state before calling the SDK\n    const willBeMuted = !this._videoMuted;\n\n    try {\n      if (this._videoMuted) {\n        await self.unmuteVideo();\n      } else {\n        await self.muteVideo();\n      }\n\n      this.dispatchEvent(\n        new CustomEvent('sw-mute-video', {\n          detail: { muted: willBeMuted },\n          bubbles: true,\n          composed: true\n        })\n      );\n    } catch (error) {\n      console.error('Failed to toggle video mute:', error);\n    }\n  }\n\n  /**\n   * Handle screen share toggle\n   */\n  private async handleScreenShare(): Promise<void> {\n    const self = this.selfParticipant ?? this.effectiveCall?.self;\n    if (!self) return;\n\n    // Capture the intended new state before calling the SDK\n    const willBeActive = this._screenShareStatus !== 'active';\n\n    try {\n      if (this._screenShareStatus === 'active') {\n        await self.stopScreenShare?.();\n      } else {\n        await self.startScreenShare?.();\n      }\n\n      this.dispatchEvent(\n        new CustomEvent('sw-screen-share', {\n          detail: { active: willBeActive },\n          bubbles: true,\n          composed: true\n        })\n      );\n    } catch (error) {\n      console.error('Failed to toggle screen share:', error);\n    }\n  }\n\n  /**\n   * Handle hangup\n   */\n  private async handleHangup(): Promise<void> {\n    const call = this.effectiveCall;\n    if (!call) return;\n\n    try {\n      await call.hangup();\n\n      this.dispatchEvent(\n        new CustomEvent('sw-hangup', {\n          bubbles: true,\n          composed: true\n        })\n      );\n    } catch (error) {\n      console.error('Failed to hangup:', error);\n    }\n  }\n\n  /**\n   * Toggle overflow menu\n   */\n  private toggleOverflow(): void {\n    this._overflowOpen = !this._overflowOpen;\n  }\n\n  /**\n   * Get tooltip text for button\n   */\n  private getTooltipText(type: ControlButtonType): string {\n    switch (type) {\n      case 'mute-audio':\n        return this._audioMuted ? 'Unmute Audio' : 'Mute Audio';\n      case 'mute-video':\n        return this._videoMuted ? 'Turn On Camera' : 'Turn Off Camera';\n      case 'screen-share':\n        return this._screenShareStatus === 'active' ? 'Stop Sharing' : 'Share Screen';\n      case 'hangup':\n        return 'End Call';\n    }\n  }\n\n  /**\n   * Render button icon\n   */\n  private renderIcon(type: ControlButtonType) {\n    switch (type) {\n      case 'mute-audio':\n        return this._audioMuted\n          ? html`<svg class=\"button-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path\n                d=\"M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z\"\n              />\n            </svg>`\n          : html`<svg class=\"button-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path\n                d=\"M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.91-3c-.49 0-.9.36-.98.85C16.52 14.2 14.47 16 12 16s-4.52-1.8-4.93-4.15c-.08-.49-.49-.85-.98-.85-.61 0-1.09.54-1 1.14.49 3 2.89 5.35 5.91 5.78V20c0 .55.45 1 1 1s1-.45 1-1v-2.08c3.02-.43 5.42-2.78 5.91-5.78.1-.6-.39-1.14-1-1.14z\"\n              />\n            </svg>`;\n\n      case 'mute-video':\n        return this._videoMuted\n          ? html`<svg class=\"button-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path\n                d=\"M21 6.5l-4 4V7c0-.55-.45-1-1-1H9.82L21 17.18V6.5zM3.27 2L2 3.27 4.73 6H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.21 0 .39-.08.54-.18L19.73 21 21 19.73 3.27 2z\"\n              />\n            </svg>`\n          : html`<svg class=\"button-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path\n                d=\"M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z\"\n              />\n            </svg>`;\n\n      case 'screen-share':\n        return this._screenShareStatus === 'active'\n          ? html`<svg class=\"button-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path\n                d=\"M21.22 18.02l2 2H24v-2h-2.78zm.77-2l.01-10c0-1.11-.9-2-2-2H7.22l5.23 5.23c.18-.04.36-.07.55-.1V7.02l4 3.73-1.58 1.47 5.54 5.54c.61-.33 1.03-.99 1.03-1.74zM2.39 1.73L1.11 3l1.54 1.54c-.4.36-.65.89-.65 1.48v10c0 1.1.89 2 2 2H0v2h18.13l2.71 2.71 1.27-1.27L2.39 1.73zM7 15.02c.31-1.48.92-2.95 2.07-4.06l1.59 1.59c-1.54.38-2.7 1.18-3.66 2.47z\"\n              />\n            </svg>`\n          : html`<svg class=\"button-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path\n                d=\"M20 18c1.1 0 1.99-.9 1.99-2L22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6zm9 9v-4h3l-4-4-4 4h3v4h2z\"\n              />\n            </svg>`;\n\n      case 'hangup':\n        return html`<svg class=\"button-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n          <path\n            d=\"M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08c-.18-.17-.29-.42-.29-.7 0-.28.11-.53.29-.71C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.67c.18.18.29.43.29.71 0 .28-.11.53-.29.71l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.11-.7-.28-.79-.74-1.69-1.36-2.67-1.85-.33-.16-.56-.5-.56-.9v-3.1C15.15 9.25 13.6 9 12 9z\"\n          />\n        </svg>`;\n    }\n  }\n\n  /**\n   * Render a control button\n   */\n  private renderButton(\n    type: ControlButtonType,\n    options: {\n      onClick: () => void;\n      active?: boolean;\n      disabled?: boolean;\n      className?: string;\n    }\n  ) {\n    const { onClick, active = false, disabled = false, className = '' } = options;\n    const tooltipText = this.getTooltipText(type);\n\n    return html`\n      <button\n        class=\"control-button ${type} ${active ? 'active' : ''} ${className}\"\n        part=\"button ${active ? 'button-active' : ''} ${disabled ? 'button-disabled' : ''}\"\n        aria-label=\"${tooltipText}\"\n        aria-pressed=\"${type !== 'hangup' ? active : nothing}\"\n        ?disabled=${disabled}\n        @click=${onClick}\n      >\n        ${this.renderIcon(type)}\n        ${this.showTooltips\n          ? html` <span class=\"tooltip\" part=\"tooltip\">${tooltipText}</span> `\n          : nothing}\n      </button>\n    `;\n  }\n\n  /**\n   * Render the component\n   */\n  render() {\n    const call = this.effectiveCall;\n    const hasSelf = Boolean(this.selfParticipant ?? call?.self);\n\n    // Check capabilities - server sends: self, member, vmuted, layout, digit, screenshare, device, lock, end\n    // Having 'self' capability implies self-controls are available (mute audio/video)\n    const hasSelfCapability = this.hasCapability('self');\n    const canMuteAudio =\n      hasSelfCapability || this.hasCapability('selfMuteAudio') || this.hasCapability('muteAudio');\n    const canMuteVideo =\n      hasSelfCapability ||\n      this.hasCapability('vmuted') ||\n      this.hasCapability('selfMuteVideo') ||\n      this.hasCapability('muteVideo');\n    const canScreenShare =\n      (this.hasCapability('screenshare') || this.hasCapability('screenShare')) &&\n      Boolean(this.selfParticipant?.startScreenShare ?? call?.self?.startScreenShare);\n    const canHangup = true; // Always allow hangup\n\n    return html`\n      <div\n        class=\"container ${this.orientation === 'vertical' ? 'vertical' : ''}\"\n        part=\"container\"\n        role=\"toolbar\"\n        aria-label=\"Call controls\"\n      >\n        ${this.renderButton('mute-audio', {\n          onClick: () => this.handleMuteAudio(),\n          active: this._audioMuted,\n          disabled: !hasSelf || !canMuteAudio\n        })}\n        ${this.renderButton('mute-video', {\n          onClick: () => this.handleMuteVideo(),\n          active: this._videoMuted,\n          disabled: !hasSelf || !canMuteVideo\n        })}\n        ${this.renderButton('screen-share', {\n          onClick: () => this.handleScreenShare(),\n          active: this._screenShareStatus === 'active',\n          disabled: !hasSelf || !canScreenShare\n        })}\n        ${this.renderButton('hangup', {\n          onClick: () => this.handleHangup(),\n          disabled: !call || !canHangup,\n          className: 'hangup'\n        })}\n\n        <!-- Overflow menu for responsive collapse -->\n        <div class=\"overflow-menu ${this._overflowOpen ? 'open' : ''}\">\n          <button\n            class=\"control-button overflow-button\"\n            aria-label=\"More options\"\n            aria-expanded=\"${this._overflowOpen}\"\n            @click=${this.toggleOverflow}\n          >\n            <svg class=\"button-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path\n                d=\"M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\"\n              />\n            </svg>\n          </button>\n          <div class=\"overflow-content\">\n            ${this.renderButton('mute-audio', {\n              onClick: () => this.handleMuteAudio(),\n              active: this._audioMuted,\n              disabled: !hasSelf || !canMuteAudio\n            })}\n            ${this.renderButton('mute-video', {\n              onClick: () => this.handleMuteVideo(),\n              active: this._videoMuted,\n              disabled: !hasSelf || !canMuteVideo\n            })}\n            ${this.renderButton('screen-share', {\n              onClick: () => this.handleScreenShare(),\n              active: this._screenShareStatus === 'active',\n              disabled: !hasSelf || !canScreenShare\n            })}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\n/**\n * Declare global type for TypeScript\n */\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-call-controls': CallControls;\n  }\n}\n"],"names":["CallControls","LitElement","changedProperties","call","nonNullSelf$","filter","self","audioSub","switchMap","muted","videoSub","screenShareSub","of","status","caps","sub","capability","_a","willBeMuted","error","willBeActive","_b","_c","type","html","options","onClick","active","disabled","className","tooltipText","nothing","hasSelf","hasSelfCapability","canMuteAudio","canMuteVideo","canScreenShare","css","__decorateClass","property","consume","callContext","state","customElement"],"mappings":"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"}

package/dist/components/call-media.d.ts

@@ -13,6 +13,10 @@
  *   </participants>
  * </call-media>
  * ```
+ *
+ * @cssprop [--sw-color-primary=#044cf6] - Primary accent color used for theming.
+ * @cssprop [--sw-color-background=#000000] - Background color of the video container.
+ * @cssprop [--sw-border-radius=0px] - Border radius applied to the video container and wrapper.
  */
 import { LitElement } from 'lit';
 import type { Call } from '../types/index.js';

package/dist/components/call-media.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"call-media.d.ts","sourceRoot":"","sources":["../../src/components/call-media.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAK9C,qBACa,SAAU,SAAQ,UAAU;IACvC,MAAM,CAAC,MAAM,0BA4DX;IAEF;;OAEG;IACyB,IAAI,CAAC,EAAE,IAAI,CAAC;IAExC;;;OAGG;IAGH,OAAO,CAAC,aAAa,CAAC,CAAO;IAE7B;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAA4B;IAEtD;;OAEG;IACH,OAAO,CAAC,aAAa,CAAsB;IAE3C;;OAEG;IACH,OAAO,CAAC,cAAc,CAAC,CAAiB;IAExC;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAAC,CAAa;IAExC;;OAEG;IACH,OAAO,CAAC,mBAAmB,CAAC,CAAa;IAEzC;;OAEG;IACH,iBAAiB;IAMjB;;OAEG;IACH,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAYhE;;OAEG;IACH,oBAAoB;IAOpB;;OAEG;IACH,SAAS,CAAC,YAAY,IAAI,IAAI;IAW9B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAkB1B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAK5B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAwC3B;;OAEG;IACH,OAAO,CAAC,aAAa,CAAC,CAAmB;IAEzC;;OAEG;IACH,OAAO,CAAC,eAAe,CAAC,CAAiB;IAEzC;;;;;OAKG;IACH,OAAO,CAAC,qBAAqB;IAyF7B;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAkB7B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAO3B;;OAEG;IACH,MAAM;CAqBP;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,SAAS,CAAC;KAC5B;CACF"}
+{"version":3,"file":"call-media.d.ts","sourceRoot":"","sources":["../../src/components/call-media.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAK9C,qBACa,SAAU,SAAQ,UAAU;IACvC,MAAM,CAAC,MAAM,0BA4DX;IAEF;;OAEG;IACyB,IAAI,CAAC,EAAE,IAAI,CAAC;IAExC;;;OAGG;IAGH,OAAO,CAAC,aAAa,CAAC,CAAO;IAE7B;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAA4B;IAEtD;;OAEG;IACH,OAAO,CAAC,aAAa,CAAsB;IAE3C;;OAEG;IACH,OAAO,CAAC,cAAc,CAAC,CAAiB;IAExC;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAAC,CAAa;IAExC;;OAEG;IACH,OAAO,CAAC,mBAAmB,CAAC,CAAa;IAEzC;;OAEG;IACH,iBAAiB;IAMjB;;OAEG;IACH,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAYhE;;OAEG;IACH,oBAAoB;IAOpB;;OAEG;IACH,SAAS,CAAC,YAAY,IAAI,IAAI;IAW9B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAkB1B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAK5B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAwC3B;;OAEG;IACH,OAAO,CAAC,aAAa,CAAC,CAAmB;IAEzC;;OAEG;IACH,OAAO,CAAC,eAAe,CAAC,CAAiB;IAEzC;;;;;OAKG;IACH,OAAO,CAAC,qBAAqB;IAyF7B;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAkB7B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAO3B;;OAEG;IACH,MAAM;CAqBP;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,SAAS,CAAC;KAC5B;CACF"}

package/dist/components/call-media.js.map

@@ -1 +1 @@
-{"version":3,"file":"call-media.js","sources":["../../src/components/call-media.ts"],"sourcesContent":["/**\n * Call Media Component\n *\n * Root component that renders remote video stream and provides call context\n * to child components. Manages aspect ratio with ResizeObserver and handles\n * video stream lifecycle.\n *\n * @example\n * ```html\n * <call-media .call=${call}>\n *   <participants>\n *     <self-media mirror=${true}></self-media>\n *   </participants>\n * </call-media>\n * ```\n */\n\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { provide } from '@lit/context';\nimport { Subscription } from 'rxjs';\nimport type { Call } from '../types/index.js';\nimport { callContext } from '../context/call-context.js';\nimport { debounce } from '../utils/debounce.js';\nimport { waitForVideoReady, attachMediaStream, detachMediaStream } from '../utils/video.js';\n\n@customElement('sw-call-media')\nexport class CallMedia extends LitElement {\n  static styles = css`\n    :host {\n      /* CSS Custom Properties for theming */\n      --sw-color-primary: #044cf6;\n      --sw-color-background: #000000;\n      --sw-border-radius: 0px;\n\n      display: block;\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n    }\n\n    .mcu-content {\n      position: relative;\n      width: 100%;\n      height: 100%;\n      margin: 0 auto;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background-color: var(--sw-color-background);\n      border-radius: var(--sw-border-radius);\n      overflow: hidden;\n    }\n\n    .padding-wrapper {\n      position: relative;\n      max-width: 100%;\n      max-height: 100%;\n      transition:\n        width 0.3s ease,\n        height 0.3s ease;\n    }\n\n    .mcu-wrapper {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      border-radius: var(--sw-border-radius);\n      overflow: hidden;\n    }\n\n    .mcu-video {\n      width: 100%;\n      height: 100%;\n      display: block;\n      object-fit: contain;\n    }\n\n    .mcu-layers {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      pointer-events: none;\n    }\n  `;\n\n  /**\n   * Call object with observable streams and properties\n   */\n  @property({ type: Object }) call?: Call;\n\n  /**\n   * Provides call context to child components\n   * Note: Used by @provide decorator, TypeScript doesn't see the usage\n   */\n  @provide({ context: callContext })\n  // @ts-expect-error - Used by @provide decorator\n  private _providedCall?: Call;\n\n  /**\n   * Current remote stream value from observable\n   */\n  private _remoteStreamValue: MediaStream | null = null;\n\n  /**\n   * RxJS subscriptions for cleanup\n   */\n  private subscriptions: Subscription[] = [];\n\n  /**\n   * ResizeObserver instance for aspect ratio management\n   */\n  private resizeObserver?: ResizeObserver;\n\n  /**\n   * Video resize event handler reference for cleanup\n   */\n  private videoResizeHandler?: () => void;\n\n  /**\n   * Window resize event handler reference for cleanup\n   */\n  private windowResizeHandler?: () => void;\n\n  /**\n   * Lifecycle: Component connected to DOM\n   */\n  connectedCallback() {\n    super.connectedCallback();\n    this._providedCall = this.call;\n    this.setupSubscriptions();\n  }\n\n  /**\n   * Lifecycle: React to property changes\n   */\n  protected updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('call')) {\n      // Clean up old subscriptions first\n      this.cleanupSubscriptions();\n      // Update context for child components\n      this._providedCall = this.call;\n      // Set up new subscriptions\n      this.setupSubscriptions();\n    }\n  }\n\n  /**\n   * Lifecycle: Component disconnected from DOM\n   */\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.cleanupSubscriptions();\n    this.cleanupResizeObserver();\n    this.cleanupVideoElement();\n  }\n\n  /**\n   * Lifecycle: First update after render\n   */\n  protected firstUpdated(): void {\n    const video = this.shadowRoot?.querySelector('video.mcu-video') as HTMLVideoElement;\n    if (video) {\n      waitForVideoReady(video).then(() => {\n        if (this.isConnected) {\n          this.setupResizeObserver();\n        }\n      });\n    }\n  }\n\n  /**\n   * Subscribe to call observables\n   */\n  private setupSubscriptions(): void {\n    if (!this.call) return;\n\n    // Subscribe to remote stream\n    this.subscriptions.push(\n      this.call.remoteStream$.subscribe((stream: MediaStream | null) => {\n        this._remoteStreamValue = stream;\n        this.requestUpdate();\n\n        // Attach stream to video element\n        const video = this.shadowRoot?.querySelector('video.mcu-video') as HTMLVideoElement;\n        if (video) {\n          attachMediaStream(video, stream);\n        }\n      })\n    );\n  }\n\n  /**\n   * Cleanup all subscriptions\n   */\n  private cleanupSubscriptions(): void {\n    this.subscriptions.forEach((sub) => sub.unsubscribe());\n    this.subscriptions = [];\n  }\n\n  /**\n   * Setup ResizeObserver for aspect ratio management\n   */\n  private setupResizeObserver(): void {\n    const video = this.shadowRoot?.querySelector('video.mcu-video') as HTMLVideoElement;\n    const paddingWrapper = this.shadowRoot?.querySelector('.padding-wrapper') as HTMLDivElement;\n\n    if (!video || !paddingWrapper) return;\n\n    // Store references for the update function\n    this._videoElement = video;\n    this._paddingWrapper = paddingWrapper;\n\n    // Observe the host element for container size changes\n    this.resizeObserver = new ResizeObserver(\n      debounce(() => {\n        this.recalculateDimensions();\n      }, 50)\n    );\n\n    this.resizeObserver.observe(this);\n\n    // Listen for video intrinsic dimension changes (when media orientation flips)\n    this.videoResizeHandler = () => {\n      this.recalculateDimensions();\n    };\n\n    video.addEventListener('resize', this.videoResizeHandler);\n\n    // Listen for window/viewport resize changes\n    // Use requestAnimationFrame to ensure layout has settled before reading dimensions\n    this.windowResizeHandler = () => {\n      requestAnimationFrame(() => {\n        this.recalculateDimensions();\n      });\n    };\n\n    window.addEventListener('resize', this.windowResizeHandler);\n\n    // Initial calculation\n    this.recalculateDimensions();\n  }\n\n  /**\n   * Video element reference for dimension calculations\n   */\n  private _videoElement?: HTMLVideoElement;\n\n  /**\n   * Padding wrapper reference for dimension calculations\n   */\n  private _paddingWrapper?: HTMLDivElement;\n\n  /**\n   * Recalculate and apply dimensions based on viewport, container, and video sizes.\n   * Video should never grow bigger than the visible area.\n   * When container bleeds viewport, scale proportionally to maintain container's aspect ratio.\n   * Uses \"contain\" fitting algorithm - compares aspect ratios to determine constraint.\n   */\n  private recalculateDimensions(): void {\n    const video = this._videoElement;\n    const paddingWrapper = this._paddingWrapper;\n\n    if (!video || !paddingWrapper) return;\n\n    // Audio-only streams have no video dimensions.\n    // Fill the container and reset transform so the layout layers remain usable.\n    if (!video.videoWidth || !video.videoHeight) {\n      paddingWrapper.style.width = '100%';\n      paddingWrapper.style.height = '100%';\n      paddingWrapper.style.paddingBottom = '0';\n      paddingWrapper.style.transform = 'none';\n      return;\n    }\n\n    // Get viewport dimensions\n    const viewportWidth = window.innerWidth;\n    const viewportHeight = window.innerHeight;\n\n    // Get container's bounding rect (actual rendered position and size)\n    const containerRect = this.getBoundingClientRect();\n    const containerWidth = containerRect.width;\n    const containerHeight = containerRect.height;\n\n    if (containerWidth <= 0 || containerHeight <= 0) return;\n\n    // Calculate scale factors for each dimension\n    // This tells us how much the container would need to shrink to fit in viewport\n    const scaleX = Math.min(1, (viewportWidth - containerRect.left) / containerWidth);\n    const scaleY = Math.min(1, (viewportHeight - containerRect.top) / containerHeight);\n\n    // Use the minimum scale to maintain proportionality\n    // This ensures the container's aspect ratio is preserved when scaling down\n    const scale = Math.min(scaleX, scaleY);\n\n    // Calculate available space by applying scale to container dimensions\n    const maxWidth = containerWidth * scale;\n    const maxHeight = containerHeight * scale;\n\n    if (maxWidth <= 0 || maxHeight <= 0) return;\n\n    const videoWidth = video.videoWidth;\n    const videoHeight = video.videoHeight;\n\n    // Calculate aspect ratios\n    const videoAspectRatio = videoWidth / videoHeight;\n    const availableAspectRatio = maxWidth / maxHeight;\n\n    let finalWidth: number;\n    let finalHeight: number;\n\n    // \"Contain\" algorithm: compare aspect ratios to determine which dimension constrains\n    if (videoAspectRatio > availableAspectRatio) {\n      // Video is wider than available space - constrain by width\n      finalWidth = maxWidth;\n      finalHeight = finalWidth / videoAspectRatio;\n    } else {\n      // Video is taller than available space - constrain by height\n      finalHeight = maxHeight;\n      finalWidth = finalHeight * videoAspectRatio;\n    }\n\n    // Calculate offset to center video in the visible area of the container\n    // When container bleeds viewport, the visible center is different from container center\n    const visibleLeft = Math.max(0, containerRect.left);\n    const visibleTop = Math.max(0, containerRect.top);\n    const visibleRight = Math.min(viewportWidth, containerRect.right);\n    const visibleBottom = Math.min(viewportHeight, containerRect.bottom);\n\n    // Center of the visible area (in viewport coordinates)\n    const visibleCenterX = (visibleLeft + visibleRight) / 2;\n    const visibleCenterY = (visibleTop + visibleBottom) / 2;\n\n    // Center of the container (in viewport coordinates)\n    const containerCenterX = containerRect.left + containerWidth / 2;\n    const containerCenterY = containerRect.top + containerHeight / 2;\n\n    // Offset needed to shift from container center to visible center\n    const offsetX = visibleCenterX - containerCenterX;\n    const offsetY = visibleCenterY - containerCenterY;\n\n    // Apply the calculated dimensions and offset\n    paddingWrapper.style.width = `${finalWidth}px`;\n    paddingWrapper.style.height = `${finalHeight}px`;\n    paddingWrapper.style.paddingBottom = '0';\n    paddingWrapper.style.transform = `translate(${offsetX}px, ${offsetY}px)`;\n  }\n\n  /**\n   * Cleanup ResizeObserver and event listeners\n   */\n  private cleanupResizeObserver(): void {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n      this.resizeObserver = undefined;\n    }\n\n    const video = this.shadowRoot?.querySelector('video.mcu-video') as HTMLVideoElement;\n    if (video && this.videoResizeHandler) {\n      video.removeEventListener('resize', this.videoResizeHandler);\n      this.videoResizeHandler = undefined;\n    }\n\n    if (this.windowResizeHandler) {\n      window.removeEventListener('resize', this.windowResizeHandler);\n      this.windowResizeHandler = undefined;\n    }\n  }\n\n  /**\n   * Cleanup video element\n   */\n  private cleanupVideoElement(): void {\n    const video = this.shadowRoot?.querySelector('video.mcu-video') as HTMLVideoElement;\n    if (video) {\n      detachMediaStream(video);\n    }\n  }\n\n  /**\n   * Render the component\n   */\n  render() {\n    return html`\n      <div class=\"mcu-content\" part=\"container\">\n        <div class=\"padding-wrapper\">\n          <div class=\"mcu-wrapper\">\n            <video\n              class=\"mcu-video\"\n              part=\"video\"\n              autoplay\n              playsinline\n              muted\n              .srcObject=${this._remoteStreamValue}\n            ></video>\n          </div>\n          <div class=\"mcu-layers\">\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\n/**\n * Declare global type for TypeScript\n */\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-call-media': CallMedia;\n  }\n}\n"],"names":["CallMedia","LitElement","changedProperties","video","_a","waitForVideoReady","stream","attachMediaStream","sub","paddingWrapper","_b","debounce","viewportWidth","viewportHeight","containerRect","containerWidth","containerHeight","scaleX","scaleY","scale","maxWidth","maxHeight","videoWidth","videoHeight","videoAspectRatio","availableAspectRatio","finalWidth","finalHeight","visibleLeft","visibleTop","visibleRight","visibleBottom","visibleCenterX","visibleCenterY","containerCenterX","containerCenterY","offsetX","offsetY","detachMediaStream","html","css","__decorateClass","property","provide","callContext","customElement"],"mappings":"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"}
+{"version":3,"file":"call-media.js","sources":["../../src/components/call-media.ts"],"sourcesContent":["/**\n * Call Media Component\n *\n * Root component that renders remote video stream and provides call context\n * to child components. Manages aspect ratio with ResizeObserver and handles\n * video stream lifecycle.\n *\n * @example\n * ```html\n * <call-media .call=${call}>\n *   <participants>\n *     <self-media mirror=${true}></self-media>\n *   </participants>\n * </call-media>\n * ```\n *\n * @cssprop [--sw-color-primary=#044cf6] - Primary accent color used for theming.\n * @cssprop [--sw-color-background=#000000] - Background color of the video container.\n * @cssprop [--sw-border-radius=0px] - Border radius applied to the video container and wrapper.\n */\n\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { provide } from '@lit/context';\nimport { Subscription } from 'rxjs';\nimport type { Call } from '../types/index.js';\nimport { callContext } from '../context/call-context.js';\nimport { debounce } from '../utils/debounce.js';\nimport { waitForVideoReady, attachMediaStream, detachMediaStream } from '../utils/video.js';\n\n@customElement('sw-call-media')\nexport class CallMedia extends LitElement {\n  static styles = css`\n    :host {\n      /* CSS Custom Properties for theming */\n      --sw-color-primary: #044cf6;\n      --sw-color-background: #000000;\n      --sw-border-radius: 0px;\n\n      display: block;\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n    }\n\n    .mcu-content {\n      position: relative;\n      width: 100%;\n      height: 100%;\n      margin: 0 auto;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background-color: var(--sw-color-background);\n      border-radius: var(--sw-border-radius);\n      overflow: hidden;\n    }\n\n    .padding-wrapper {\n      position: relative;\n      max-width: 100%;\n      max-height: 100%;\n      transition:\n        width 0.3s ease,\n        height 0.3s ease;\n    }\n\n    .mcu-wrapper {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      border-radius: var(--sw-border-radius);\n      overflow: hidden;\n    }\n\n    .mcu-video {\n      width: 100%;\n      height: 100%;\n      display: block;\n      object-fit: contain;\n    }\n\n    .mcu-layers {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      pointer-events: none;\n    }\n  `;\n\n  /**\n   * Call object with observable streams and properties\n   */\n  @property({ type: Object }) call?: Call;\n\n  /**\n   * Provides call context to child components\n   * Note: Used by @provide decorator, TypeScript doesn't see the usage\n   */\n  @provide({ context: callContext })\n  // @ts-expect-error - Used by @provide decorator\n  private _providedCall?: Call;\n\n  /**\n   * Current remote stream value from observable\n   */\n  private _remoteStreamValue: MediaStream | null = null;\n\n  /**\n   * RxJS subscriptions for cleanup\n   */\n  private subscriptions: Subscription[] = [];\n\n  /**\n   * ResizeObserver instance for aspect ratio management\n   */\n  private resizeObserver?: ResizeObserver;\n\n  /**\n   * Video resize event handler reference for cleanup\n   */\n  private videoResizeHandler?: () => void;\n\n  /**\n   * Window resize event handler reference for cleanup\n   */\n  private windowResizeHandler?: () => void;\n\n  /**\n   * Lifecycle: Component connected to DOM\n   */\n  connectedCallback() {\n    super.connectedCallback();\n    this._providedCall = this.call;\n    this.setupSubscriptions();\n  }\n\n  /**\n   * Lifecycle: React to property changes\n   */\n  protected updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('call')) {\n      // Clean up old subscriptions first\n      this.cleanupSubscriptions();\n      // Update context for child components\n      this._providedCall = this.call;\n      // Set up new subscriptions\n      this.setupSubscriptions();\n    }\n  }\n\n  /**\n   * Lifecycle: Component disconnected from DOM\n   */\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.cleanupSubscriptions();\n    this.cleanupResizeObserver();\n    this.cleanupVideoElement();\n  }\n\n  /**\n   * Lifecycle: First update after render\n   */\n  protected firstUpdated(): void {\n    const video = this.shadowRoot?.querySelector('video.mcu-video') as HTMLVideoElement;\n    if (video) {\n      waitForVideoReady(video).then(() => {\n        if (this.isConnected) {\n          this.setupResizeObserver();\n        }\n      });\n    }\n  }\n\n  /**\n   * Subscribe to call observables\n   */\n  private setupSubscriptions(): void {\n    if (!this.call) return;\n\n    // Subscribe to remote stream\n    this.subscriptions.push(\n      this.call.remoteStream$.subscribe((stream: MediaStream | null) => {\n        this._remoteStreamValue = stream;\n        this.requestUpdate();\n\n        // Attach stream to video element\n        const video = this.shadowRoot?.querySelector('video.mcu-video') as HTMLVideoElement;\n        if (video) {\n          attachMediaStream(video, stream);\n        }\n      })\n    );\n  }\n\n  /**\n   * Cleanup all subscriptions\n   */\n  private cleanupSubscriptions(): void {\n    this.subscriptions.forEach((sub) => sub.unsubscribe());\n    this.subscriptions = [];\n  }\n\n  /**\n   * Setup ResizeObserver for aspect ratio management\n   */\n  private setupResizeObserver(): void {\n    const video = this.shadowRoot?.querySelector('video.mcu-video') as HTMLVideoElement;\n    const paddingWrapper = this.shadowRoot?.querySelector('.padding-wrapper') as HTMLDivElement;\n\n    if (!video || !paddingWrapper) return;\n\n    // Store references for the update function\n    this._videoElement = video;\n    this._paddingWrapper = paddingWrapper;\n\n    // Observe the host element for container size changes\n    this.resizeObserver = new ResizeObserver(\n      debounce(() => {\n        this.recalculateDimensions();\n      }, 50)\n    );\n\n    this.resizeObserver.observe(this);\n\n    // Listen for video intrinsic dimension changes (when media orientation flips)\n    this.videoResizeHandler = () => {\n      this.recalculateDimensions();\n    };\n\n    video.addEventListener('resize', this.videoResizeHandler);\n\n    // Listen for window/viewport resize changes\n    // Use requestAnimationFrame to ensure layout has settled before reading dimensions\n    this.windowResizeHandler = () => {\n      requestAnimationFrame(() => {\n        this.recalculateDimensions();\n      });\n    };\n\n    window.addEventListener('resize', this.windowResizeHandler);\n\n    // Initial calculation\n    this.recalculateDimensions();\n  }\n\n  /**\n   * Video element reference for dimension calculations\n   */\n  private _videoElement?: HTMLVideoElement;\n\n  /**\n   * Padding wrapper reference for dimension calculations\n   */\n  private _paddingWrapper?: HTMLDivElement;\n\n  /**\n   * Recalculate and apply dimensions based on viewport, container, and video sizes.\n   * Video should never grow bigger than the visible area.\n   * When container bleeds viewport, scale proportionally to maintain container's aspect ratio.\n   * Uses \"contain\" fitting algorithm - compares aspect ratios to determine constraint.\n   */\n  private recalculateDimensions(): void {\n    const video = this._videoElement;\n    const paddingWrapper = this._paddingWrapper;\n\n    if (!video || !paddingWrapper) return;\n\n    // Audio-only streams have no video dimensions.\n    // Fill the container and reset transform so the layout layers remain usable.\n    if (!video.videoWidth || !video.videoHeight) {\n      paddingWrapper.style.width = '100%';\n      paddingWrapper.style.height = '100%';\n      paddingWrapper.style.paddingBottom = '0';\n      paddingWrapper.style.transform = 'none';\n      return;\n    }\n\n    // Get viewport dimensions\n    const viewportWidth = window.innerWidth;\n    const viewportHeight = window.innerHeight;\n\n    // Get container's bounding rect (actual rendered position and size)\n    const containerRect = this.getBoundingClientRect();\n    const containerWidth = containerRect.width;\n    const containerHeight = containerRect.height;\n\n    if (containerWidth <= 0 || containerHeight <= 0) return;\n\n    // Calculate scale factors for each dimension\n    // This tells us how much the container would need to shrink to fit in viewport\n    const scaleX = Math.min(1, (viewportWidth - containerRect.left) / containerWidth);\n    const scaleY = Math.min(1, (viewportHeight - containerRect.top) / containerHeight);\n\n    // Use the minimum scale to maintain proportionality\n    // This ensures the container's aspect ratio is preserved when scaling down\n    const scale = Math.min(scaleX, scaleY);\n\n    // Calculate available space by applying scale to container dimensions\n    const maxWidth = containerWidth * scale;\n    const maxHeight = containerHeight * scale;\n\n    if (maxWidth <= 0 || maxHeight <= 0) return;\n\n    const videoWidth = video.videoWidth;\n    const videoHeight = video.videoHeight;\n\n    // Calculate aspect ratios\n    const videoAspectRatio = videoWidth / videoHeight;\n    const availableAspectRatio = maxWidth / maxHeight;\n\n    let finalWidth: number;\n    let finalHeight: number;\n\n    // \"Contain\" algorithm: compare aspect ratios to determine which dimension constrains\n    if (videoAspectRatio > availableAspectRatio) {\n      // Video is wider than available space - constrain by width\n      finalWidth = maxWidth;\n      finalHeight = finalWidth / videoAspectRatio;\n    } else {\n      // Video is taller than available space - constrain by height\n      finalHeight = maxHeight;\n      finalWidth = finalHeight * videoAspectRatio;\n    }\n\n    // Calculate offset to center video in the visible area of the container\n    // When container bleeds viewport, the visible center is different from container center\n    const visibleLeft = Math.max(0, containerRect.left);\n    const visibleTop = Math.max(0, containerRect.top);\n    const visibleRight = Math.min(viewportWidth, containerRect.right);\n    const visibleBottom = Math.min(viewportHeight, containerRect.bottom);\n\n    // Center of the visible area (in viewport coordinates)\n    const visibleCenterX = (visibleLeft + visibleRight) / 2;\n    const visibleCenterY = (visibleTop + visibleBottom) / 2;\n\n    // Center of the container (in viewport coordinates)\n    const containerCenterX = containerRect.left + containerWidth / 2;\n    const containerCenterY = containerRect.top + containerHeight / 2;\n\n    // Offset needed to shift from container center to visible center\n    const offsetX = visibleCenterX - containerCenterX;\n    const offsetY = visibleCenterY - containerCenterY;\n\n    // Apply the calculated dimensions and offset\n    paddingWrapper.style.width = `${finalWidth}px`;\n    paddingWrapper.style.height = `${finalHeight}px`;\n    paddingWrapper.style.paddingBottom = '0';\n    paddingWrapper.style.transform = `translate(${offsetX}px, ${offsetY}px)`;\n  }\n\n  /**\n   * Cleanup ResizeObserver and event listeners\n   */\n  private cleanupResizeObserver(): void {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n      this.resizeObserver = undefined;\n    }\n\n    const video = this.shadowRoot?.querySelector('video.mcu-video') as HTMLVideoElement;\n    if (video && this.videoResizeHandler) {\n      video.removeEventListener('resize', this.videoResizeHandler);\n      this.videoResizeHandler = undefined;\n    }\n\n    if (this.windowResizeHandler) {\n      window.removeEventListener('resize', this.windowResizeHandler);\n      this.windowResizeHandler = undefined;\n    }\n  }\n\n  /**\n   * Cleanup video element\n   */\n  private cleanupVideoElement(): void {\n    const video = this.shadowRoot?.querySelector('video.mcu-video') as HTMLVideoElement;\n    if (video) {\n      detachMediaStream(video);\n    }\n  }\n\n  /**\n   * Render the component\n   */\n  render() {\n    return html`\n      <div class=\"mcu-content\" part=\"container\">\n        <div class=\"padding-wrapper\">\n          <div class=\"mcu-wrapper\">\n            <video\n              class=\"mcu-video\"\n              part=\"video\"\n              autoplay\n              playsinline\n              muted\n              .srcObject=${this._remoteStreamValue}\n            ></video>\n          </div>\n          <div class=\"mcu-layers\">\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\n/**\n * Declare global type for TypeScript\n */\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-call-media': CallMedia;\n  }\n}\n"],"names":["CallMedia","LitElement","changedProperties","video","_a","waitForVideoReady","stream","attachMediaStream","sub","paddingWrapper","_b","debounce","viewportWidth","viewportHeight","containerRect","containerWidth","containerHeight","scaleX","scaleY","scale","maxWidth","maxHeight","videoWidth","videoHeight","videoAspectRatio","availableAspectRatio","finalWidth","finalHeight","visibleLeft","visibleTop","visibleRight","visibleBottom","visibleCenterX","visibleCenterY","containerCenterX","containerCenterY","offsetX","offsetY","detachMediaStream","html","css","__decorateClass","property","provide","callContext","customElement"],"mappings":"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"}

package/dist/components/call-status.d.ts

@@ -8,6 +8,21 @@
  * ```html
  * <sw-call-status .call=${call}></sw-call-status>
  * ```
+ *
+ * @cssprop [--sw-color-primary=#044cf6] - Primary brand color
+ * @cssprop [--sw-color-success=#10b981] - Success/connected indicator color
+ * @cssprop [--sw-color-warning=#f59e0b] - Warning/connecting indicator color
+ * @cssprop [--sw-color-danger=#ef4444] - Danger/disconnecting indicator color
+ * @cssprop [--sw-color-text=#1f2937] - Primary text color
+ * @cssprop [--sw-color-text-muted=#6b7280] - Secondary/muted text and duration color
+ * @cssprop [--sw-font-family=-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif] - Font family
+ * @cssprop [--sw-font-size-sm=14px] - Small font size for duration
+ * @cssprop [--sw-font-size-base=16px] - Base font size for status text
+ * @cssprop [--sw-font-size-lg=18px] - Large font size
+ * @cssprop [--sw-space-1=4px] - Smallest spacing unit
+ * @cssprop [--sw-space-2=8px] - Small spacing unit
+ * @cssprop [--sw-space-3=12px] - Medium spacing unit
+ * @cssprop [--sw-border-radius=8px] - Border radius for container
  */
 import { LitElement } from 'lit';
 import type { Observable } from 'rxjs';

package/dist/components/call-status.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"call-status.d.ts","sourceRoot":"","sources":["../../src/components/call-status.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AACvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGjD;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;CACjC;AAED,qBACa,mBAAoB,SAAQ,UAAU;IACjD,MAAM,CAAC,MAAM,0BAsIX;IAEF;;OAEG;IAEH,IAAI,EAAE,cAAc,GAAG,IAAI,CAAQ;IAEnC;;OAEG;IAGH,OAAO,CAAC,WAAW,CAAC,CAAiB;IAErC;;OAEG;IAEH,OAAO,CAAC,MAAM,CAAqB;IAEnC;;OAEG;IAEH,OAAO,CAAC,aAAa,CAAuB;IAE5C;;OAEG;IAEH,OAAO,CAAC,QAAQ,CAAkB;IAElC;;OAEG;IACH,OAAO,CAAC,aAAa,CAAsB;IAE3C;;OAEG;IACH,OAAO,CAAC,gBAAgB,CAAuB;IAE/C,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAO/C,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,CAAC,eAAe;IAmBvB,OAAO,CAAC,kBAAkB;IAY1B,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,OAAO;IAMf,OAAO,CAAC,aAAa;IA2BrB,MAAM;CAqBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}
+{"version":3,"file":"call-status.d.ts","sourceRoot":"","sources":["../../src/components/call-status.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AACvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGjD;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;CACjC;AAED,qBACa,mBAAoB,SAAQ,UAAU;IACjD,MAAM,CAAC,MAAM,0BAqIX;IAEF;;OAEG;IAEH,IAAI,EAAE,cAAc,GAAG,IAAI,CAAQ;IAEnC;;OAEG;IAGH,OAAO,CAAC,WAAW,CAAC,CAAiB;IAErC;;OAEG;IAEH,OAAO,CAAC,MAAM,CAAqB;IAEnC;;OAEG;IAEH,OAAO,CAAC,aAAa,CAAuB;IAE5C;;OAEG;IAEH,OAAO,CAAC,QAAQ,CAAkB;IAElC;;OAEG;IACH,OAAO,CAAC,aAAa,CAAsB;IAE3C;;OAEG;IACH,OAAO,CAAC,gBAAgB,CAAuB;IAE/C,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAO/C,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,CAAC,eAAe;IAmBvB,OAAO,CAAC,kBAAkB;IAY1B,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,OAAO;IAMf,OAAO,CAAC,aAAa;IA6BrB,MAAM;CAqBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}

package/dist/components/call-status.js

@@ -2,10 +2,10 @@ import { LitElement as d, html as u, css as p } from "lit";
 import { property as h, state as i, customElement as f } from "lit/decorators.js";
 import { consume as m } from "@lit/context";
 import { callContext as w } from "../context/call-context.js";
-var g = Object.defineProperty, x = Object.getOwnPropertyDescriptor, n = (t, s, e, a) => {
-  for (var o = a > 1 ? void 0 : a ? x(s, e) : s, c = t.length - 1, l; c >= 0; c--)
-    (l = t[c]) && (o = (a ? l(s, e, o) : l(o)) || o);
-  return a && o && g(s, e, o), o;
+var g = Object.defineProperty, x = Object.getOwnPropertyDescriptor, o = (t, s, e, a) => {
+  for (var n = a > 1 ? void 0 : a ? x(s, e) : s, c = t.length - 1, l; c >= 0; c--)
+    (l = t[c]) && (n = (a ? l(s, e, n) : l(n)) || n);
+  return a && n && g(s, e, n), n;
 };
 let r = class extends d {
   constructor() {
@@ -62,6 +62,8 @@ let r = class extends d {
         return "Ringing...";
       case "connected":
         return "Connected";
+      case "recovering":
+        return "Reconnecting...";
       case "disconnecting":
         return "Disconnecting...";
       case "disconnected":
@@ -227,25 +229,24 @@ r.styles = p`
       color: var(--sw-color-text-muted);
       font-size: var(--sw-font-size-sm);
     }
-
   `;
-n([
+o([
   h({ attribute: !1 })
 ], r.prototype, "call", 2);
-n([
+o([
   m({ context: w, subscribe: !0 }),
   i()
 ], r.prototype, "contextCall", 2);
-n([
+o([
   i()
 ], r.prototype, "status", 2);
-n([
+o([
   i()
 ], r.prototype, "callStartTime", 2);
-n([
+o([
   i()
 ], r.prototype, "duration", 2);
-r = n([
+r = o([
   f("sw-call-status")
 ], r);
 export {