@signalwire/web-components 1.0.0-dev-20260324190414 → 1.0.0-dev-20260326210326

package/dist/components/directory.js.map

@@ -1 +1 @@
-{"version":3,"file":"directory.js","sources":["../../src/components/directory.ts"],"sourcesContent":["/**\n * Directory Component\n *\n * A searchable list of addresses from the directory service.\n * Supports filtering, selection, and pagination.\n *\n * @example\n * ```html\n * <sw-directory .directory=${directory}></sw-directory>\n * ```\n */\n\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { Subscription } from 'rxjs';\nimport type { Observable } from 'rxjs';\n\n/**\n * Address type from SDK\n */\nexport interface Address {\n  id: string;\n  name: string;\n  displayName?: string;\n  type?: 'room' | 'person';\n  channels?: {\n    audio?: boolean;\n    video?: boolean;\n    messaging?: boolean;\n  };\n}\n\n/**\n * Directory interface for component\n */\nexport interface DirectoryService {\n  addresses$: Observable<Address[]>;\n  loading$?: Observable<boolean>;\n  hasMore$?: Observable<boolean>;\n  loadMore?(): Promise<void>;\n}\n\n@customElement('sw-directory')\nexport class DirectoryComponent 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-success: #10b981;\n      --sw-color-text: #1f2937;\n      --sw-color-text-muted: #6b7280;\n      --sw-color-background: #ffffff;\n      --sw-color-background-hover: #f3f4f6;\n      --sw-color-background-active: #e5e7eb;\n      --sw-color-border: #e5e7eb;\n      --sw-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      --sw-font-size-sm: 12px;\n      --sw-font-size-base: 14px;\n      --sw-font-size-lg: 16px;\n      --sw-space-1: 4px;\n      --sw-space-2: 8px;\n      --sw-space-3: 12px;\n      --sw-space-4: 16px;\n      --sw-border-radius: 8px;\n\n      display: block;\n      font-family: var(--sw-font-family);\n    }\n\n    /* Dark mode support */\n    :host([data-theme='dark']) {\n      --sw-color-text: #f9fafb;\n      --sw-color-text-muted: #9ca3af;\n      --sw-color-background: #1f2937;\n      --sw-color-background-hover: #374151;\n      --sw-color-background-active: #4b5563;\n      --sw-color-border: #374151;\n    }\n\n    @media (prefers-color-scheme: dark) {\n      :host(:not([data-theme='light'])) {\n        --sw-color-text: #f9fafb;\n        --sw-color-text-muted: #9ca3af;\n        --sw-color-background: #1f2937;\n        --sw-color-background-hover: #374151;\n        --sw-color-background-active: #4b5563;\n        --sw-color-border: #374151;\n      }\n    }\n\n    .container {\n      display: flex;\n      flex-direction: column;\n      background: var(--sw-color-background);\n      border: 1px solid var(--sw-color-border);\n      border-radius: var(--sw-border-radius);\n      overflow: hidden;\n    }\n\n    .search {\n      display: flex;\n      align-items: center;\n      gap: var(--sw-space-2);\n      padding: var(--sw-space-3);\n      border-bottom: 1px solid var(--sw-color-border);\n    }\n\n    .search-input {\n      flex: 1;\n      padding: var(--sw-space-2) var(--sw-space-3);\n      border: 1px solid var(--sw-color-border);\n      border-radius: var(--sw-border-radius);\n      background: var(--sw-color-background);\n      color: var(--sw-color-text);\n      font-family: var(--sw-font-family);\n      font-size: var(--sw-font-size-base);\n      outline: none;\n      transition: border-color 0.15s ease;\n    }\n\n    .search-input:focus {\n      border-color: var(--sw-color-primary);\n    }\n\n    .search-input::placeholder {\n      color: var(--sw-color-text-muted);\n    }\n\n    .list {\n      display: flex;\n      flex-direction: column;\n      max-height: 400px;\n      overflow-y: auto;\n    }\n\n    .item {\n      display: flex;\n      align-items: center;\n      gap: var(--sw-space-3);\n      padding: var(--sw-space-3) var(--sw-space-4);\n      border-bottom: 1px solid var(--sw-color-border);\n      cursor: pointer;\n      transition: background-color 0.15s ease;\n    }\n\n    .item:last-child {\n      border-bottom: none;\n    }\n\n    .item:hover {\n      background: var(--sw-color-background-hover);\n    }\n\n    .item:active {\n      background: var(--sw-color-background-active);\n    }\n\n    .item.selected {\n      background: var(--sw-color-primary);\n      color: white;\n    }\n\n    .item.selected .item-type,\n    .item.selected .item-channels {\n      color: rgba(255, 255, 255, 0.8);\n    }\n\n    .item-icon {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 40px;\n      height: 40px;\n      border-radius: 50%;\n      background: var(--sw-color-background-hover);\n      color: var(--sw-color-text-muted);\n      flex-shrink: 0;\n    }\n\n    .item.selected .item-icon {\n      background: rgba(255, 255, 255, 0.2);\n      color: white;\n    }\n\n    .item-icon svg {\n      width: 20px;\n      height: 20px;\n    }\n\n    .item-content {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .item-name {\n      font-size: var(--sw-font-size-base);\n      font-weight: 500;\n      color: inherit;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .item-type {\n      font-size: var(--sw-font-size-sm);\n      color: var(--sw-color-text-muted);\n      text-transform: capitalize;\n    }\n\n    .item-channels {\n      display: flex;\n      gap: var(--sw-space-1);\n      color: var(--sw-color-text-muted);\n    }\n\n    .item-channels svg {\n      width: 16px;\n      height: 16px;\n    }\n\n    .item-channels .active {\n      color: var(--sw-color-success);\n    }\n\n    .loading,\n    .empty {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: var(--sw-space-4);\n      color: var(--sw-color-text-muted);\n      font-size: var(--sw-font-size-base);\n    }\n\n    .scroll-sentinel {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: var(--sw-space-3);\n      min-height: 1px;\n    }\n\n    .scroll-loading {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: var(--sw-space-2);\n      padding: var(--sw-space-3);\n      color: var(--sw-color-text-muted);\n      font-size: var(--sw-font-size-sm);\n    }\n\n    .spinner {\n      width: 16px;\n      height: 16px;\n      border: 2px solid var(--sw-color-border);\n      border-top-color: var(--sw-color-primary);\n      border-radius: 50%;\n      animation: spin 0.8s linear infinite;\n    }\n\n    @keyframes spin {\n      to {\n        transform: rotate(360deg);\n      }\n    }\n\n    .dial-button {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 36px;\n      height: 36px;\n      background: var(--sw-color-success);\n      border: none;\n      border-radius: 50%;\n      color: white;\n      cursor: pointer;\n      flex-shrink: 0;\n      transition: background-color 0.15s ease;\n    }\n\n    .dial-button:hover {\n      background: #0ea472;\n    }\n\n    .dial-button svg {\n      width: 18px;\n      height: 18px;\n    }\n  `;\n\n  /**\n   * Directory service with addresses$ observable\n   */\n  @property({ type: Object })\n  directory: DirectoryService | null = null;\n\n  /**\n   * Currently selected address\n   */\n  @state()\n  private selectedAddress: Address | null = null;\n\n  /**\n   * Search filter query\n   */\n  @state()\n  private searchQuery: string = '';\n\n  /**\n   * List of addresses from directory\n   */\n  @state()\n  private addresses: Address[] = [];\n\n  /**\n   * Loading state\n   */\n  @state()\n  private loading: boolean = false;\n\n  /**\n   * Has more addresses to load\n   */\n  @state()\n  private hasMore: boolean = false;\n\n  /**\n   * RxJS subscriptions for cleanup\n   */\n  private subscriptions: Subscription[] = [];\n\n  /**\n   * Debounce timer for search\n   */\n  private searchDebounceTimer: number | null = null;\n\n  /**\n   * IntersectionObserver for infinite scroll\n   */\n  private intersectionObserver: IntersectionObserver | null = null;\n\n  /**\n   * Flag to track if we're auto-loading for search\n   */\n  @state()\n  private isAutoLoadingForSearch: boolean = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.subscribeToDirectory();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.cleanup();\n  }\n\n  private subscribeToDirectory() {\n    if (!this.directory) return;\n\n    // Subscribe to addresses\n    if (this.directory.addresses$) {\n      const addressesSub = this.directory.addresses$.subscribe((addresses) => {\n        this.addresses = addresses;\n      });\n      this.subscriptions.push(addressesSub);\n    }\n\n    // Subscribe to loading state\n    if (this.directory.loading$) {\n      const loadingSub = this.directory.loading$.subscribe((loading) => {\n        this.loading = loading;\n      });\n      this.subscriptions.push(loadingSub);\n    }\n\n    // Subscribe to hasMore\n    if (this.directory.hasMore$) {\n      const hasMoreSub = this.directory.hasMore$.subscribe((hasMore) => {\n        this.hasMore = hasMore;\n      });\n      this.subscriptions.push(hasMoreSub);\n    }\n\n    // Load initial data\n    if (this.directory.loadMore) {\n      this.directory.loadMore();\n    }\n  }\n\n  private cleanup() {\n    this.subscriptions.forEach((sub) => sub.unsubscribe());\n    this.subscriptions = [];\n    if (this.searchDebounceTimer) {\n      clearTimeout(this.searchDebounceTimer);\n    }\n    if (this.intersectionObserver) {\n      this.intersectionObserver.disconnect();\n      this.intersectionObserver = null;\n    }\n  }\n\n  protected firstUpdated() {\n    this.setupInfiniteScroll();\n  }\n\n  private setupInfiniteScroll() {\n    const sentinel = this.shadowRoot?.querySelector('.scroll-sentinel');\n    if (!sentinel) return;\n\n    this.intersectionObserver = new IntersectionObserver(\n      (entries) => {\n        const entry = entries[0];\n        if (entry?.isIntersecting && this.hasMore && !this.loading) {\n          this.handleLoadMore();\n        }\n      },\n      {\n        root: this.shadowRoot?.querySelector('.list'),\n        rootMargin: '100px',\n        threshold: 0\n      }\n    );\n\n    this.intersectionObserver.observe(sentinel);\n  }\n\n  protected updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n\n    // Handle directory property changes\n    if (changedProperties.has('directory')) {\n      this.cleanup();\n      this.subscribeToDirectory();\n    }\n\n    // Re-setup infinite scroll if needed\n    if (!this.intersectionObserver) {\n      this.setupInfiniteScroll();\n    }\n\n    // Auto-load more when searching and no results found but more available\n    // Also check when loading state changes so we can trigger subsequent loads\n    if (\n      changedProperties.has('addresses') ||\n      changedProperties.has('searchQuery') ||\n      changedProperties.has('loading')\n    ) {\n      this.checkAutoLoadForSearch();\n    }\n  }\n\n  private async checkAutoLoadForSearch() {\n    // If we have a search query, no filtered results, but more to load, keep loading\n    // Note: !this.loading prevents concurrent loads, isAutoLoadingForSearch is for UI state only\n    if (\n      this.searchQuery.trim() &&\n      this.filteredAddresses.length === 0 &&\n      this.hasMore &&\n      !this.loading\n    ) {\n      this.isAutoLoadingForSearch = true;\n      await this.handleLoadMore();\n      // The updated() will be called again when addresses/loading change, continuing the loop\n    } else if (this.filteredAddresses.length > 0 || !this.hasMore) {\n      this.isAutoLoadingForSearch = false;\n    }\n  }\n\n  private get filteredAddresses(): Address[] {\n    if (!this.searchQuery.trim()) {\n      return this.addresses;\n    }\n    const query = this.searchQuery.toLowerCase();\n    return this.addresses.filter(\n      (addr) =>\n        addr.name.toLowerCase().includes(query) ||\n        (addr.displayName && addr.displayName.toLowerCase().includes(query))\n    );\n  }\n\n  private handleSearchInput(e: Event) {\n    const input = e.target as HTMLInputElement;\n\n    // Debounce search\n    if (this.searchDebounceTimer) {\n      clearTimeout(this.searchDebounceTimer);\n    }\n\n    this.searchDebounceTimer = window.setTimeout(() => {\n      this.searchQuery = input.value;\n    }, 200);\n  }\n\n  private handleItemClick(address: Address) {\n    this.selectedAddress = address;\n\n    this.dispatchEvent(\n      new CustomEvent('sw-address-select', {\n        detail: { address },\n        bubbles: true,\n        composed: true\n      })\n    );\n  }\n\n  private handleItemDoubleClick(address: Address) {\n    this.handleDial(address);\n  }\n\n  private handleDial(address: Address) {\n    this.dispatchEvent(\n      new CustomEvent('sw-dial', {\n        detail: { address },\n        bubbles: true,\n        composed: true\n      })\n    );\n  }\n\n  private async handleLoadMore() {\n    if (this.directory?.loadMore) {\n      await this.directory.loadMore();\n    }\n  }\n\n  private renderAddressIcon(address: Address) {\n    if (address.type === 'room') {\n      return html`\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n          <path\n            d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 3c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm7 13H5v-.23c0-.62.28-1.2.76-1.58C7.47 15.82 9.64 15 12 15s4.53.82 6.24 2.19c.48.38.76.97.76 1.58V19z\"\n          />\n        </svg>\n      `;\n    }\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n        <path\n          d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\"\n        />\n      </svg>\n    `;\n  }\n\n  private renderChannelIcons(address: Address) {\n    const channels = address.channels || {};\n    return html`\n      <div class=\"item-channels\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"currentColor\"\n          class=\"${channels.audio ? 'active' : ''}\"\n          title=\"Audio\"\n        >\n          <path\n            d=\"M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z\"\n          />\n        </svg>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"currentColor\"\n          class=\"${channels.video ? 'active' : ''}\"\n          title=\"Video\"\n        >\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      </div>\n    `;\n  }\n\n  private renderLoadingIndicator() {\n    return html`\n      <div class=\"scroll-loading\">\n        <div class=\"spinner\"></div>\n        <span>${this.isAutoLoadingForSearch ? 'Searching...' : 'Loading more...'}</span>\n      </div>\n    `;\n  }\n\n  render() {\n    const showInitialLoading = this.loading && this.addresses.length === 0;\n    const showEmptyState = !this.loading && this.filteredAddresses.length === 0 && !this.hasMore;\n    const showSearchingState = this.isAutoLoadingForSearch && this.filteredAddresses.length === 0;\n\n    return html`\n      <div class=\"container\" part=\"container\">\n        <div class=\"search\" part=\"search\">\n          <input\n            type=\"text\"\n            class=\"search-input\"\n            placeholder=\"Search addresses...\"\n            @input=${this.handleSearchInput}\n            aria-label=\"Search addresses\"\n          />\n        </div>\n\n        <div class=\"list\" part=\"list\" role=\"listbox\">\n          ${showInitialLoading\n            ? html`<div class=\"loading\">Loading...</div>`\n            : showSearchingState\n              ? this.renderLoadingIndicator()\n              : showEmptyState\n                ? html`<div class=\"empty\">No addresses found</div>`\n                : html`\n                    ${this.filteredAddresses.map(\n                      (address) => html`\n                        <div\n                          class=\"item ${this.selectedAddress?.id === address.id ? 'selected' : ''}\"\n                          part=\"item ${this.selectedAddress?.id === address.id\n                            ? 'item-selected'\n                            : ''}\"\n                          role=\"option\"\n                          aria-selected=\"${this.selectedAddress?.id === address.id}\"\n                          @click=${() => this.handleItemClick(address)}\n                          @dblclick=${() => this.handleItemDoubleClick(address)}\n                        >\n                          <div class=\"item-icon\">${this.renderAddressIcon(address)}</div>\n                          <div class=\"item-content\">\n                            <div class=\"item-name\" part=\"item-name\">\n                              ${address.displayName || address.name}\n                            </div>\n                            <div class=\"item-type\" part=\"item-type\">\n                              ${address.type || 'address'}\n                            </div>\n                          </div>\n                          ${this.renderChannelIcons(address)}\n                          <button\n                            class=\"dial-button\"\n                            @click=${(e: Event) => {\n                              e.stopPropagation();\n                              this.handleDial(address);\n                            }}\n                            aria-label=\"Call ${address.displayName || address.name}\"\n                          >\n                            <svg\n                              xmlns=\"http://www.w3.org/2000/svg\"\n                              viewBox=\"0 0 24 24\"\n                              fill=\"currentColor\"\n                            >\n                              <path\n                                d=\"M6.62 10.79c1.44 2.83 3.76 5.15 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z\"\n                              />\n                            </svg>\n                          </button>\n                        </div>\n                      `\n                    )}\n                    <!-- Scroll sentinel for infinite scroll -->\n                    <div class=\"scroll-sentinel\">\n                      ${this.loading && !this.isAutoLoadingForSearch\n                        ? this.renderLoadingIndicator()\n                        : null}\n                    </div>\n                  `}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-directory': DirectoryComponent;\n  }\n}\n"],"names":["DirectoryComponent","LitElement","addressesSub","addresses","loadingSub","loading","hasMoreSub","hasMore","sub","sentinel","_a","entries","entry","_b","changedProperties","query","addr","input","address","html","channels","showInitialLoading","showEmptyState","showSearchingState","_c","e","css","__decorateClass","property","state","customElement"],"mappings":";;;;;;;AA2CO,IAAMA,IAAN,cAAiCC,EAAW;AAAA,EAA5C,cAAA;AAAA,UAAA,GAAA,SAAA,GA8PL,KAAA,YAAqC,MAMrC,KAAQ,kBAAkC,MAM1C,KAAQ,cAAsB,IAM9B,KAAQ,YAAuB,CAAA,GAM/B,KAAQ,UAAmB,IAM3B,KAAQ,UAAmB,IAK3B,KAAQ,gBAAgC,CAAA,GAKxC,KAAQ,sBAAqC,MAK7C,KAAQ,uBAAoD,MAM5D,KAAQ,yBAAkC;AAAA,EAAA;AAAA,EAE1C,oBAAoB;AAClB,UAAM,kBAAA,GACN,KAAK,qBAAA;AAAA,EACP;AAAA,EAEA,uBAAuB;AACrB,UAAM,qBAAA,GACN,KAAK,QAAA;AAAA,EACP;AAAA,EAEQ,uBAAuB;AAC7B,QAAK,KAAK,WAGV;AAAA,UAAI,KAAK,UAAU,YAAY;AAC7B,cAAMC,IAAe,KAAK,UAAU,WAAW,UAAU,CAACC,MAAc;AACtE,eAAK,YAAYA;AAAA,QACnB,CAAC;AACD,aAAK,cAAc,KAAKD,CAAY;AAAA,MACtC;AAGA,UAAI,KAAK,UAAU,UAAU;AAC3B,cAAME,IAAa,KAAK,UAAU,SAAS,UAAU,CAACC,MAAY;AAChE,eAAK,UAAUA;AAAA,QACjB,CAAC;AACD,aAAK,cAAc,KAAKD,CAAU;AAAA,MACpC;AAGA,UAAI,KAAK,UAAU,UAAU;AAC3B,cAAME,IAAa,KAAK,UAAU,SAAS,UAAU,CAACC,MAAY;AAChE,eAAK,UAAUA;AAAA,QACjB,CAAC;AACD,aAAK,cAAc,KAAKD,CAAU;AAAA,MACpC;AAGA,MAAI,KAAK,UAAU,YACjB,KAAK,UAAU,SAAA;AAAA;AAAA,EAEnB;AAAA,EAEQ,UAAU;AAChB,SAAK,cAAc,QAAQ,CAACE,MAAQA,EAAI,aAAa,GACrD,KAAK,gBAAgB,CAAA,GACjB,KAAK,uBACP,aAAa,KAAK,mBAAmB,GAEnC,KAAK,yBACP,KAAK,qBAAqB,WAAA,GAC1B,KAAK,uBAAuB;AAAA,EAEhC;AAAA,EAEU,eAAe;AACvB,SAAK,oBAAA;AAAA,EACP;AAAA,EAEQ,sBAAsB;;AAC5B,UAAMC,KAAWC,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAAc;AAChD,IAAKD,MAEL,KAAK,uBAAuB,IAAI;AAAA,MAC9B,CAACE,MAAY;AACX,cAAMC,IAAQD,EAAQ,CAAC;AACvB,QAAIC,KAAA,QAAAA,EAAO,kBAAkB,KAAK,WAAW,CAAC,KAAK,WACjD,KAAK,eAAA;AAAA,MAET;AAAA,MACA;AAAA,QACE,OAAMC,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAAc;AAAA,QACrC,YAAY;AAAA,QACZ,WAAW;AAAA,MAAA;AAAA,IACb,GAGF,KAAK,qBAAqB,QAAQJ,CAAQ;AAAA,EAC5C;AAAA,EAEU,QAAQK,GAAyC;AACzD,UAAM,QAAQA,CAAiB,GAG3BA,EAAkB,IAAI,WAAW,MACnC,KAAK,QAAA,GACL,KAAK,qBAAA,IAIF,KAAK,wBACR,KAAK,oBAAA,IAMLA,EAAkB,IAAI,WAAW,KACjCA,EAAkB,IAAI,aAAa,KACnCA,EAAkB,IAAI,SAAS,MAE/B,KAAK,uBAAA;AAAA,EAET;AAAA,EAEA,MAAc,yBAAyB;AAGrC,IACE,KAAK,YAAY,KAAA,KACjB,KAAK,kBAAkB,WAAW,KAClC,KAAK,WACL,CAAC,KAAK,WAEN,KAAK,yBAAyB,IAC9B,MAAM,KAAK,eAAA,MAEF,KAAK,kBAAkB,SAAS,KAAK,CAAC,KAAK,aACpD,KAAK,yBAAyB;AAAA,EAElC;AAAA,EAEA,IAAY,oBAA+B;AACzC,QAAI,CAAC,KAAK,YAAY;AACpB,aAAO,KAAK;AAEd,UAAMC,IAAQ,KAAK,YAAY,YAAA;AAC/B,WAAO,KAAK,UAAU;AAAA,MACpB,CAACC,MACCA,EAAK,KAAK,YAAA,EAAc,SAASD,CAAK,KACrCC,EAAK,eAAeA,EAAK,YAAY,YAAA,EAAc,SAASD,CAAK;AAAA,IAAA;AAAA,EAExE;AAAA,EAEQ,kBAAkB,GAAU;AAClC,UAAME,IAAQ,EAAE;AAGhB,IAAI,KAAK,uBACP,aAAa,KAAK,mBAAmB,GAGvC,KAAK,sBAAsB,OAAO,WAAW,MAAM;AACjD,WAAK,cAAcA,EAAM;AAAA,IAC3B,GAAG,GAAG;AAAA,EACR;AAAA,EAEQ,gBAAgBC,GAAkB;AACxC,SAAK,kBAAkBA,GAEvB,KAAK;AAAA,MACH,IAAI,YAAY,qBAAqB;AAAA,QACnC,QAAQ,EAAE,SAAAA,EAAA;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAAA,EAEQ,sBAAsBA,GAAkB;AAC9C,SAAK,WAAWA,CAAO;AAAA,EACzB;AAAA,EAEQ,WAAWA,GAAkB;AACnC,SAAK;AAAA,MACH,IAAI,YAAY,WAAW;AAAA,QACzB,QAAQ,EAAE,SAAAA,EAAA;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAAA,EAEA,MAAc,iBAAiB;;AAC7B,KAAIR,IAAA,KAAK,cAAL,QAAAA,EAAgB,YAClB,MAAM,KAAK,UAAU,SAAA;AAAA,EAEzB;AAAA,EAEQ,kBAAkBQ,GAAkB;AAC1C,WAAIA,EAAQ,SAAS,SACZC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQFA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOT;AAAA,EAEQ,mBAAmBD,GAAkB;AAC3C,UAAME,IAAWF,EAAQ,YAAY,CAAA;AACrC,WAAOC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAMQC,EAAS,QAAQ,WAAW,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAW9BA,EAAS,QAAQ,WAAW,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS/C;AAAA,EAEQ,yBAAyB;AAC/B,WAAOD;AAAA;AAAA;AAAA,gBAGK,KAAK,yBAAyB,iBAAiB,iBAAiB;AAAA;AAAA;AAAA,EAG9E;AAAA,EAEA,SAAS;AACP,UAAME,IAAqB,KAAK,WAAW,KAAK,UAAU,WAAW,GAC/DC,IAAiB,CAAC,KAAK,WAAW,KAAK,kBAAkB,WAAW,KAAK,CAAC,KAAK,SAC/EC,IAAqB,KAAK,0BAA0B,KAAK,kBAAkB,WAAW;AAE5F,WAAOJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAOU,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAM/BE,IACEF,2CACAI,IACE,KAAK,uBAAA,IACLD,IACEH,iDACAA;AAAA,sBACI,KAAK,kBAAkB;AAAA,MACvB,CAACD,MAAA;;AAAY,eAAAC;AAAA;AAAA,0CAEKT,IAAA,KAAK,oBAAL,gBAAAA,EAAsB,QAAOQ,EAAQ,KAAK,aAAa,EAAE;AAAA,yCAC1DL,IAAA,KAAK,oBAAL,gBAAAA,EAAsB,QAAOK,EAAQ,KAC9C,kBACA,EAAE;AAAA;AAAA,6CAEWM,IAAA,KAAK,oBAAL,gBAAAA,EAAsB,QAAON,EAAQ,EAAE;AAAA,mCAC/C,MAAM,KAAK,gBAAgBA,CAAO,CAAC;AAAA,sCAChC,MAAM,KAAK,sBAAsBA,CAAO,CAAC;AAAA;AAAA,mDAE5B,KAAK,kBAAkBA,CAAO,CAAC;AAAA;AAAA;AAAA,gCAGlDA,EAAQ,eAAeA,EAAQ,IAAI;AAAA;AAAA;AAAA,gCAGnCA,EAAQ,QAAQ,SAAS;AAAA;AAAA;AAAA,4BAG7B,KAAK,mBAAmBA,CAAO,CAAC;AAAA;AAAA;AAAA,qCAGvB,CAACO,MAAa;AACrB,UAAAA,EAAE,gBAAA,GACF,KAAK,WAAWP,CAAO;AAAA,QACzB,CAAC;AAAA,+CACkBA,EAAQ,eAAeA,EAAQ,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA,CAc7D;AAAA;AAAA;AAAA,wBAGG,KAAK,WAAW,CAAC,KAAK,yBACpB,KAAK,uBAAA,IACL,IAAI;AAAA;AAAA,mBAEX;AAAA;AAAA;AAAA;AAAA,EAIjB;AACF;AA/mBalB,EACJ,SAAS0B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6PhBC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA7Pf5B,EA8PX,WAAA,aAAA,CAAA;AAMQ2B,EAAA;AAAA,EADPE,EAAA;AAAM,GAnQI7B,EAoQH,WAAA,mBAAA,CAAA;AAMA2B,EAAA;AAAA,EADPE,EAAA;AAAM,GAzQI7B,EA0QH,WAAA,eAAA,CAAA;AAMA2B,EAAA;AAAA,EADPE,EAAA;AAAM,GA/QI7B,EAgRH,WAAA,aAAA,CAAA;AAMA2B,EAAA;AAAA,EADPE,EAAA;AAAM,GArRI7B,EAsRH,WAAA,WAAA,CAAA;AAMA2B,EAAA;AAAA,EADPE,EAAA;AAAM,GA3RI7B,EA4RH,WAAA,WAAA,CAAA;AAqBA2B,EAAA;AAAA,EADPE,EAAA;AAAM,GAhTI7B,EAiTH,WAAA,0BAAA,CAAA;AAjTGA,IAAN2B,EAAA;AAAA,EADNG,EAAc,cAAc;AAAA,GAChB9B,CAAA;"}
+{"version":3,"file":"directory.js","sources":["../../src/components/directory.ts"],"sourcesContent":["/**\n * Directory Component\n *\n * A searchable list of addresses from the directory service.\n * Supports filtering, selection, and pagination.\n *\n * @example\n * ```html\n * <sw-directory .directory=${directory}></sw-directory>\n * ```\n *\n * @fires sw-address-select - Fired when an address is selected. Detail: `{ address: Address }`\n * @fires sw-dial - Fired when the call button on an address is clicked. Detail: `{ address: Address, channel: string }`\n *\n * @cssprop [--sw-color-primary=#044cf6] - Primary brand color\n * @cssprop [--sw-color-primary-hover=#0339c4] - Primary color on hover\n * @cssprop [--sw-color-success=#10b981] - Success/positive color\n * @cssprop [--sw-color-text=#1f2937] - Primary text color\n * @cssprop [--sw-color-text-muted=#6b7280] - Secondary/muted text color\n * @cssprop [--sw-color-background=#ffffff] - Component background color\n * @cssprop [--sw-color-background-hover=#f3f4f6] - Background color on hover\n * @cssprop [--sw-color-background-active=#e5e7eb] - Background color on active/press\n * @cssprop [--sw-color-border=#e5e7eb] - Border color\n * @cssprop [--sw-font-family=-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif] - Font family\n * @cssprop [--sw-font-size-sm=12px] - Small font size\n * @cssprop [--sw-font-size-base=14px] - Base font size\n * @cssprop [--sw-font-size-lg=16px] - Large font size\n * @cssprop [--sw-space-1=4px] - Smallest spacing unit\n * @cssprop [--sw-space-2=8px] - Small spacing unit\n * @cssprop [--sw-space-3=12px] - Medium spacing unit\n * @cssprop [--sw-space-4=16px] - Large spacing unit\n * @cssprop [--sw-border-radius=8px] - Border radius for containers and inputs\n */\n\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { Subscription } from 'rxjs';\nimport type { Observable } from 'rxjs';\n\n/**\n * Address type from SDK\n */\nexport interface Address {\n  id: string;\n  name: string;\n  displayName?: string;\n  type?: 'room' | 'person';\n  channels?: {\n    audio?: boolean;\n    video?: boolean;\n    messaging?: boolean;\n  };\n}\n\n/**\n * Directory interface for component\n */\nexport interface DirectoryService {\n  addresses$: Observable<Address[]>;\n  loading$?: Observable<boolean>;\n  hasMore$?: Observable<boolean>;\n  loadMore?(): Promise<void>;\n}\n\n@customElement('sw-directory')\nexport class DirectoryComponent 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-success: #10b981;\n      --sw-color-text: #1f2937;\n      --sw-color-text-muted: #6b7280;\n      --sw-color-background: #ffffff;\n      --sw-color-background-hover: #f3f4f6;\n      --sw-color-background-active: #e5e7eb;\n      --sw-color-border: #e5e7eb;\n      --sw-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      --sw-font-size-sm: 12px;\n      --sw-font-size-base: 14px;\n      --sw-font-size-lg: 16px;\n      --sw-space-1: 4px;\n      --sw-space-2: 8px;\n      --sw-space-3: 12px;\n      --sw-space-4: 16px;\n      --sw-border-radius: 8px;\n\n      display: block;\n      font-family: var(--sw-font-family);\n    }\n\n    /* Dark mode support */\n    :host([data-theme='dark']) {\n      --sw-color-text: #f9fafb;\n      --sw-color-text-muted: #9ca3af;\n      --sw-color-background: #1f2937;\n      --sw-color-background-hover: #374151;\n      --sw-color-background-active: #4b5563;\n      --sw-color-border: #374151;\n    }\n\n    @media (prefers-color-scheme: dark) {\n      :host(:not([data-theme='light'])) {\n        --sw-color-text: #f9fafb;\n        --sw-color-text-muted: #9ca3af;\n        --sw-color-background: #1f2937;\n        --sw-color-background-hover: #374151;\n        --sw-color-background-active: #4b5563;\n        --sw-color-border: #374151;\n      }\n    }\n\n    .container {\n      display: flex;\n      flex-direction: column;\n      background: var(--sw-color-background);\n      border: 1px solid var(--sw-color-border);\n      border-radius: var(--sw-border-radius);\n      overflow: hidden;\n    }\n\n    .search {\n      display: flex;\n      align-items: center;\n      gap: var(--sw-space-2);\n      padding: var(--sw-space-3);\n      border-bottom: 1px solid var(--sw-color-border);\n    }\n\n    .search-input {\n      flex: 1;\n      padding: var(--sw-space-2) var(--sw-space-3);\n      border: 1px solid var(--sw-color-border);\n      border-radius: var(--sw-border-radius);\n      background: var(--sw-color-background);\n      color: var(--sw-color-text);\n      font-family: var(--sw-font-family);\n      font-size: var(--sw-font-size-base);\n      outline: none;\n      transition: border-color 0.15s ease;\n    }\n\n    .search-input:focus {\n      border-color: var(--sw-color-primary);\n    }\n\n    .search-input::placeholder {\n      color: var(--sw-color-text-muted);\n    }\n\n    .list {\n      display: flex;\n      flex-direction: column;\n      max-height: 400px;\n      overflow-y: auto;\n    }\n\n    .item {\n      display: flex;\n      align-items: center;\n      gap: var(--sw-space-3);\n      padding: var(--sw-space-3) var(--sw-space-4);\n      border-bottom: 1px solid var(--sw-color-border);\n      cursor: pointer;\n      transition: background-color 0.15s ease;\n    }\n\n    .item:last-child {\n      border-bottom: none;\n    }\n\n    .item:hover {\n      background: var(--sw-color-background-hover);\n    }\n\n    .item:active {\n      background: var(--sw-color-background-active);\n    }\n\n    .item.selected {\n      background: var(--sw-color-primary);\n      color: white;\n    }\n\n    .item.selected .item-type,\n    .item.selected .item-channels {\n      color: rgba(255, 255, 255, 0.8);\n    }\n\n    .item-icon {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 40px;\n      height: 40px;\n      border-radius: 50%;\n      background: var(--sw-color-background-hover);\n      color: var(--sw-color-text-muted);\n      flex-shrink: 0;\n    }\n\n    .item.selected .item-icon {\n      background: rgba(255, 255, 255, 0.2);\n      color: white;\n    }\n\n    .item-icon svg {\n      width: 20px;\n      height: 20px;\n    }\n\n    .item-content {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .item-name {\n      font-size: var(--sw-font-size-base);\n      font-weight: 500;\n      color: inherit;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .item-type {\n      font-size: var(--sw-font-size-sm);\n      color: var(--sw-color-text-muted);\n      text-transform: capitalize;\n    }\n\n    .item-channels {\n      display: flex;\n      gap: var(--sw-space-1);\n      color: var(--sw-color-text-muted);\n    }\n\n    .item-channels svg {\n      width: 16px;\n      height: 16px;\n    }\n\n    .item-channels .active {\n      color: var(--sw-color-success);\n    }\n\n    .loading,\n    .empty {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: var(--sw-space-4);\n      color: var(--sw-color-text-muted);\n      font-size: var(--sw-font-size-base);\n    }\n\n    .scroll-sentinel {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: var(--sw-space-3);\n      min-height: 1px;\n    }\n\n    .scroll-loading {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: var(--sw-space-2);\n      padding: var(--sw-space-3);\n      color: var(--sw-color-text-muted);\n      font-size: var(--sw-font-size-sm);\n    }\n\n    .spinner {\n      width: 16px;\n      height: 16px;\n      border: 2px solid var(--sw-color-border);\n      border-top-color: var(--sw-color-primary);\n      border-radius: 50%;\n      animation: spin 0.8s linear infinite;\n    }\n\n    @keyframes spin {\n      to {\n        transform: rotate(360deg);\n      }\n    }\n\n    .dial-button {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 36px;\n      height: 36px;\n      background: var(--sw-color-success);\n      border: none;\n      border-radius: 50%;\n      color: white;\n      cursor: pointer;\n      flex-shrink: 0;\n      transition: background-color 0.15s ease;\n    }\n\n    .dial-button:hover {\n      background: #0ea472;\n    }\n\n    .dial-button svg {\n      width: 18px;\n      height: 18px;\n    }\n  `;\n\n  /**\n   * Directory service with addresses$ observable\n   */\n  @property({ type: Object })\n  directory: DirectoryService | null = null;\n\n  /**\n   * Currently selected address\n   */\n  @state()\n  private selectedAddress: Address | null = null;\n\n  /**\n   * Search filter query\n   */\n  @state()\n  private searchQuery: string = '';\n\n  /**\n   * List of addresses from directory\n   */\n  @state()\n  private addresses: Address[] = [];\n\n  /**\n   * Loading state\n   */\n  @state()\n  private loading: boolean = false;\n\n  /**\n   * Has more addresses to load\n   */\n  @state()\n  private hasMore: boolean = false;\n\n  /**\n   * RxJS subscriptions for cleanup\n   */\n  private subscriptions: Subscription[] = [];\n\n  /**\n   * Debounce timer for search\n   */\n  private searchDebounceTimer: number | null = null;\n\n  /**\n   * IntersectionObserver for infinite scroll\n   */\n  private intersectionObserver: IntersectionObserver | null = null;\n\n  /**\n   * Flag to track if we're auto-loading for search\n   */\n  @state()\n  private isAutoLoadingForSearch: boolean = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.subscribeToDirectory();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.cleanup();\n  }\n\n  private subscribeToDirectory() {\n    if (!this.directory) return;\n\n    // Subscribe to addresses\n    if (this.directory.addresses$) {\n      const addressesSub = this.directory.addresses$.subscribe((addresses) => {\n        this.addresses = addresses;\n      });\n      this.subscriptions.push(addressesSub);\n    }\n\n    // Subscribe to loading state\n    if (this.directory.loading$) {\n      const loadingSub = this.directory.loading$.subscribe((loading) => {\n        this.loading = loading;\n      });\n      this.subscriptions.push(loadingSub);\n    }\n\n    // Subscribe to hasMore\n    if (this.directory.hasMore$) {\n      const hasMoreSub = this.directory.hasMore$.subscribe((hasMore) => {\n        this.hasMore = hasMore;\n      });\n      this.subscriptions.push(hasMoreSub);\n    }\n\n    // Load initial data\n    if (this.directory.loadMore) {\n      this.directory.loadMore();\n    }\n  }\n\n  private cleanup() {\n    this.subscriptions.forEach((sub) => sub.unsubscribe());\n    this.subscriptions = [];\n    if (this.searchDebounceTimer) {\n      clearTimeout(this.searchDebounceTimer);\n    }\n    if (this.intersectionObserver) {\n      this.intersectionObserver.disconnect();\n      this.intersectionObserver = null;\n    }\n  }\n\n  protected firstUpdated() {\n    this.setupInfiniteScroll();\n  }\n\n  private setupInfiniteScroll() {\n    const sentinel = this.shadowRoot?.querySelector('.scroll-sentinel');\n    if (!sentinel) return;\n\n    this.intersectionObserver = new IntersectionObserver(\n      (entries) => {\n        const entry = entries[0];\n        if (entry?.isIntersecting && this.hasMore && !this.loading) {\n          this.handleLoadMore();\n        }\n      },\n      {\n        root: this.shadowRoot?.querySelector('.list'),\n        rootMargin: '100px',\n        threshold: 0\n      }\n    );\n\n    this.intersectionObserver.observe(sentinel);\n  }\n\n  protected updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n\n    // Handle directory property changes\n    if (changedProperties.has('directory')) {\n      this.cleanup();\n      this.subscribeToDirectory();\n    }\n\n    // Re-setup infinite scroll if needed\n    if (!this.intersectionObserver) {\n      this.setupInfiniteScroll();\n    }\n\n    // Auto-load more when searching and no results found but more available\n    // Also check when loading state changes so we can trigger subsequent loads\n    if (\n      changedProperties.has('addresses') ||\n      changedProperties.has('searchQuery') ||\n      changedProperties.has('loading')\n    ) {\n      this.checkAutoLoadForSearch();\n    }\n  }\n\n  private async checkAutoLoadForSearch() {\n    // If we have a search query, no filtered results, but more to load, keep loading\n    // Note: !this.loading prevents concurrent loads, isAutoLoadingForSearch is for UI state only\n    if (\n      this.searchQuery.trim() &&\n      this.filteredAddresses.length === 0 &&\n      this.hasMore &&\n      !this.loading\n    ) {\n      this.isAutoLoadingForSearch = true;\n      await this.handleLoadMore();\n      // The updated() will be called again when addresses/loading change, continuing the loop\n    } else if (this.filteredAddresses.length > 0 || !this.hasMore) {\n      this.isAutoLoadingForSearch = false;\n    }\n  }\n\n  private get filteredAddresses(): Address[] {\n    if (!this.searchQuery.trim()) {\n      return this.addresses;\n    }\n    const query = this.searchQuery.toLowerCase();\n    return this.addresses.filter(\n      (addr) =>\n        addr.name.toLowerCase().includes(query) ||\n        (addr.displayName && addr.displayName.toLowerCase().includes(query))\n    );\n  }\n\n  private handleSearchInput(e: Event) {\n    const input = e.target as HTMLInputElement;\n\n    // Debounce search\n    if (this.searchDebounceTimer) {\n      clearTimeout(this.searchDebounceTimer);\n    }\n\n    this.searchDebounceTimer = window.setTimeout(() => {\n      this.searchQuery = input.value;\n    }, 200);\n  }\n\n  private handleItemClick(address: Address) {\n    this.selectedAddress = address;\n\n    this.dispatchEvent(\n      new CustomEvent('sw-address-select', {\n        detail: { address },\n        bubbles: true,\n        composed: true\n      })\n    );\n  }\n\n  private handleItemDoubleClick(address: Address) {\n    this.handleDial(address);\n  }\n\n  private handleDial(address: Address) {\n    this.dispatchEvent(\n      new CustomEvent('sw-dial', {\n        detail: { address },\n        bubbles: true,\n        composed: true\n      })\n    );\n  }\n\n  private async handleLoadMore() {\n    if (this.directory?.loadMore) {\n      await this.directory.loadMore();\n    }\n  }\n\n  private renderAddressIcon(address: Address) {\n    if (address.type === 'room') {\n      return html`\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n          <path\n            d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 3c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm7 13H5v-.23c0-.62.28-1.2.76-1.58C7.47 15.82 9.64 15 12 15s4.53.82 6.24 2.19c.48.38.76.97.76 1.58V19z\"\n          />\n        </svg>\n      `;\n    }\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n        <path\n          d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\"\n        />\n      </svg>\n    `;\n  }\n\n  private renderChannelIcons(address: Address) {\n    const channels = address.channels || {};\n    return html`\n      <div class=\"item-channels\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"currentColor\"\n          class=\"${channels.audio ? 'active' : ''}\"\n          title=\"Audio\"\n        >\n          <path\n            d=\"M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z\"\n          />\n        </svg>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"currentColor\"\n          class=\"${channels.video ? 'active' : ''}\"\n          title=\"Video\"\n        >\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      </div>\n    `;\n  }\n\n  private renderLoadingIndicator() {\n    return html`\n      <div class=\"scroll-loading\">\n        <div class=\"spinner\"></div>\n        <span>${this.isAutoLoadingForSearch ? 'Searching...' : 'Loading more...'}</span>\n      </div>\n    `;\n  }\n\n  render() {\n    const showInitialLoading = this.loading && this.addresses.length === 0;\n    const showEmptyState = !this.loading && this.filteredAddresses.length === 0 && !this.hasMore;\n    const showSearchingState = this.isAutoLoadingForSearch && this.filteredAddresses.length === 0;\n\n    return html`\n      <div class=\"container\" part=\"container\">\n        <div class=\"search\" part=\"search\">\n          <input\n            type=\"text\"\n            class=\"search-input\"\n            placeholder=\"Search addresses...\"\n            @input=${this.handleSearchInput}\n            aria-label=\"Search addresses\"\n          />\n        </div>\n\n        <div class=\"list\" part=\"list\" role=\"listbox\">\n          ${showInitialLoading\n            ? html`<div class=\"loading\">Loading...</div>`\n            : showSearchingState\n              ? this.renderLoadingIndicator()\n              : showEmptyState\n                ? html`<div class=\"empty\">No addresses found</div>`\n                : html`\n                    ${this.filteredAddresses.map(\n                      (address) => html`\n                        <div\n                          class=\"item ${this.selectedAddress?.id === address.id ? 'selected' : ''}\"\n                          part=\"item ${this.selectedAddress?.id === address.id\n                            ? 'item-selected'\n                            : ''}\"\n                          role=\"option\"\n                          aria-selected=\"${this.selectedAddress?.id === address.id}\"\n                          @click=${() => this.handleItemClick(address)}\n                          @dblclick=${() => this.handleItemDoubleClick(address)}\n                        >\n                          <div class=\"item-icon\">${this.renderAddressIcon(address)}</div>\n                          <div class=\"item-content\">\n                            <div class=\"item-name\" part=\"item-name\">\n                              ${address.displayName || address.name}\n                            </div>\n                            <div class=\"item-type\" part=\"item-type\">\n                              ${address.type || 'address'}\n                            </div>\n                          </div>\n                          ${this.renderChannelIcons(address)}\n                          <button\n                            class=\"dial-button\"\n                            @click=${(e: Event) => {\n                              e.stopPropagation();\n                              this.handleDial(address);\n                            }}\n                            aria-label=\"Call ${address.displayName || address.name}\"\n                          >\n                            <svg\n                              xmlns=\"http://www.w3.org/2000/svg\"\n                              viewBox=\"0 0 24 24\"\n                              fill=\"currentColor\"\n                            >\n                              <path\n                                d=\"M6.62 10.79c1.44 2.83 3.76 5.15 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z\"\n                              />\n                            </svg>\n                          </button>\n                        </div>\n                      `\n                    )}\n                    <!-- Scroll sentinel for infinite scroll -->\n                    <div class=\"scroll-sentinel\">\n                      ${this.loading && !this.isAutoLoadingForSearch\n                        ? this.renderLoadingIndicator()\n                        : null}\n                    </div>\n                  `}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-directory': DirectoryComponent;\n  }\n}\n"],"names":["DirectoryComponent","LitElement","addressesSub","addresses","loadingSub","loading","hasMoreSub","hasMore","sub","sentinel","_a","entries","entry","_b","changedProperties","query","addr","input","address","html","channels","showInitialLoading","showEmptyState","showSearchingState","_c","e","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/example-button.d.ts

@@ -2,6 +2,7 @@ import { LitElement } from 'lit';
 /**
  * An example button component built with Lit
  *
+ * @fires sw-click - Fired when the button is clicked (and not disabled). Detail: `{ originalEvent: MouseEvent }`
  * @slot - Default slot for button content
  * @csspart button - The button element
  */

package/dist/components/example-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"example-button.d.ts","sourceRoot":"","sources":["../../src/components/example-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C;;;;;GAKG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,MAAM,CAAC,MAAM,0BA4BX;IAGF,QAAQ,UAAS;IAGjB,OAAO,EAAE,SAAS,GAAG,WAAW,CAAa;IAE7C,OAAO,CAAC,YAAY;IAgBpB,MAAM;CAOP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,aAAa,CAAC;KACpC;CACF"}
+{"version":3,"file":"example-button.d.ts","sourceRoot":"","sources":["../../src/components/example-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C;;;;;;GAMG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,MAAM,CAAC,MAAM,0BA4BX;IAGF,QAAQ,UAAS;IAGjB,OAAO,EAAE,SAAS,GAAG,WAAW,CAAa;IAE7C,OAAO,CAAC,YAAY;IAgBpB,MAAM;CAOP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,aAAa,CAAC;KACpC;CACF"}

package/dist/components/example-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"example-button.js","sources":["../../src/components/example-button.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n/**\n * An example button component built with Lit\n *\n * @slot - Default slot for button content\n * @csspart button - The button element\n */\n@customElement('sw-example-button')\nexport class ExampleButton extends LitElement {\n  static styles = css`\n    :host {\n      display: inline-block;\n    }\n\n    button {\n      padding: 0.5rem 1rem;\n      font-size: 1rem;\n      border: none;\n      border-radius: 4px;\n      background-color: #0066cc;\n      color: white;\n      cursor: pointer;\n      transition: background-color 0.2s;\n    }\n\n    button:hover {\n      background-color: #0052a3;\n    }\n\n    button:active {\n      background-color: #003d7a;\n    }\n\n    button:disabled {\n      background-color: #cccccc;\n      cursor: not-allowed;\n    }\n  `;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: String })\n  variant: 'primary' | 'secondary' = 'primary';\n\n  private _handleClick(e: MouseEvent) {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('sw-click', {\n        detail: { originalEvent: e },\n        bubbles: true,\n        composed: true\n      })\n    );\n  }\n\n  render() {\n    return html`\n      <button part=\"button\" ?disabled=${this.disabled} @click=${this._handleClick}>\n        <slot></slot>\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-example-button': ExampleButton;\n  }\n}\n"],"names":["ExampleButton","LitElement","e","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;;AAUO,IAAMA,IAAN,cAA4BC,EAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA,GAgCL,KAAA,WAAW,IAGX,KAAA,UAAmC;AAAA,EAAA;AAAA,EAE3B,aAAaC,GAAe;AAClC,QAAI,KAAK,UAAU;AACjB,MAAAA,EAAE,eAAA,GACFA,EAAE,gBAAA;AACF;AAAA,IACF;AAEA,SAAK;AAAA,MACH,IAAI,YAAY,YAAY;AAAA,QAC1B,QAAQ,EAAE,eAAeA,EAAA;AAAA,QACzB,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAAA,EAEA,SAAS;AACP,WAAOC;AAAA,wCAC6B,KAAK,QAAQ,WAAW,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA,EAI/E;AACF;AA5DaH,EACJ,SAASI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BhBC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GA/BhBN,EAgCX,WAAA,YAAA,CAAA;AAGAK,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAlCfN,EAmCX,WAAA,WAAA,CAAA;AAnCWA,IAANK,EAAA;AAAA,EADNE,EAAc,mBAAmB;AAAA,GACrBP,CAAA;"}
+{"version":3,"file":"example-button.js","sources":["../../src/components/example-button.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n/**\n * An example button component built with Lit\n *\n * @fires sw-click - Fired when the button is clicked (and not disabled). Detail: `{ originalEvent: MouseEvent }`\n * @slot - Default slot for button content\n * @csspart button - The button element\n */\n@customElement('sw-example-button')\nexport class ExampleButton extends LitElement {\n  static styles = css`\n    :host {\n      display: inline-block;\n    }\n\n    button {\n      padding: 0.5rem 1rem;\n      font-size: 1rem;\n      border: none;\n      border-radius: 4px;\n      background-color: #0066cc;\n      color: white;\n      cursor: pointer;\n      transition: background-color 0.2s;\n    }\n\n    button:hover {\n      background-color: #0052a3;\n    }\n\n    button:active {\n      background-color: #003d7a;\n    }\n\n    button:disabled {\n      background-color: #cccccc;\n      cursor: not-allowed;\n    }\n  `;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: String })\n  variant: 'primary' | 'secondary' = 'primary';\n\n  private _handleClick(e: MouseEvent) {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('sw-click', {\n        detail: { originalEvent: e },\n        bubbles: true,\n        composed: true\n      })\n    );\n  }\n\n  render() {\n    return html`\n      <button part=\"button\" ?disabled=${this.disabled} @click=${this._handleClick}>\n        <slot></slot>\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-example-button': ExampleButton;\n  }\n}\n"],"names":["ExampleButton","LitElement","e","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;;AAWO,IAAMA,IAAN,cAA4BC,EAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA,GAgCL,KAAA,WAAW,IAGX,KAAA,UAAmC;AAAA,EAAA;AAAA,EAE3B,aAAaC,GAAe;AAClC,QAAI,KAAK,UAAU;AACjB,MAAAA,EAAE,eAAA,GACFA,EAAE,gBAAA;AACF;AAAA,IACF;AAEA,SAAK;AAAA,MACH,IAAI,YAAY,YAAY;AAAA,QAC1B,QAAQ,EAAE,eAAeA,EAAA;AAAA,QACzB,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAAA,EAEA,SAAS;AACP,WAAOC;AAAA,wCAC6B,KAAK,QAAQ,WAAW,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA,EAI/E;AACF;AA5DaH,EACJ,SAASI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BhBC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GA/BhBN,EAgCX,WAAA,YAAA,CAAA;AAGAK,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAlCfN,EAmCX,WAAA,WAAA,CAAA;AAnCWA,IAANK,EAAA;AAAA,EADNE,EAAc,mBAAmB;AAAA,GACrBP,CAAA;"}

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

@@ -11,6 +11,35 @@
  *   .capabilities=${['memberMuteAudio', 'memberRemove']}
  * ></sw-participant-controls>
  * ```
+ *
+ * @fires sw-participant-mute-audio - Fired to toggle a participant's audio. Detail: `{ participantId: string, muted: boolean }`
+ * @fires sw-participant-mute-video - Fired to toggle a participant's video. Detail: `{ participantId: string, muted: boolean }`
+ * @fires sw-participant-remove - Fired to remove a participant. Detail: `{ participantId: string }`
+ * @fires sw-participant-volume - Fired when a participant's volume changes. Detail: `{ participantId: string, volume: number }`
+ * @fires sw-participant-pin - Fired to pin/unpin a participant. Detail: `{ participantId: string, pinned: boolean }`
+ *
+ * @cssprop [--sw-color-primary=#044cf6] - Primary brand color
+ * @cssprop [--sw-color-primary-hover=#0339c4] - Primary color on hover
+ * @cssprop [--sw-color-success=#10b981] - Success/positive color
+ * @cssprop [--sw-color-danger=#ef4444] - Danger/destructive color
+ * @cssprop [--sw-color-danger-hover=#dc2626] - Danger color on hover
+ * @cssprop [--sw-color-warning=#f59e0b] - Warning color
+ * @cssprop [--sw-color-text=#1f2937] - Primary text color
+ * @cssprop [--sw-color-text-muted=#6b7280] - Secondary/muted text color
+ * @cssprop [--sw-color-text-inverse=#ffffff] - Inverse text color for active buttons
+ * @cssprop [--sw-color-background=#ffffff] - Component background color
+ * @cssprop [--sw-color-background-hover=#f3f4f6] - Background color on hover
+ * @cssprop [--sw-color-background-active=#e5e7eb] - Background color on active/press
+ * @cssprop [--sw-color-border=#e5e7eb] - Border color
+ * @cssprop [--sw-font-family=-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif] - Font family
+ * @cssprop [--sw-font-size-xs=11px] - Extra-small font size
+ * @cssprop [--sw-font-size-sm=12px] - Small font size
+ * @cssprop [--sw-font-size-base=14px] - Base 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-space-4=16px] - Large spacing unit
+ * @cssprop [--sw-border-radius=8px] - Border radius for containers and buttons
  */
 import { LitElement } from 'lit';
 import type { Observable } from 'rxjs';

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

@@ -1 +1 @@
-{"version":3,"file":"participant-controls.d.ts","sourceRoot":"","sources":["../../src/components/participant-controls.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAEvC;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IAC3B,WAAW,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAClC,WAAW,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAClC,IAAI,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IACvB,MAAM,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IACzB,SAAS,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,WAAW,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,MAAM,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;CAC1B;AAED,qBACa,4BAA6B,SAAQ,UAAU;IAC1D,MAAM,CAAC,MAAM,0BAoMX;IAEF;;OAEG;IAEH,WAAW,EAAE,kBAAkB,GAAG,IAAI,CAAQ;IAE9C;;OAEG;IAEH,YAAY,EAAE,MAAM,EAAE,CAAM;IAE5B;;OAEG;IAEH,UAAU,EAAE,OAAO,CAAS;IAE5B;;OAEG;IAEH,OAAO,EAAE,OAAO,CAAS;IAEzB;;OAEG;IAEH,OAAO,CAAC,MAAM,CAAe;IAE7B;;OAEG;IAEH,OAAO,CAAC,eAAe,CAAyB;IAEhD;;OAEG;IAEH,OAAO,CAAC,UAAU,CAAkB;IAEpC;;OAEG;IAEH,OAAO,CAAC,UAAU,CAAkB;IAEpC;;OAEG;IAEH,OAAO,CAAC,QAAQ,CAAkB;IAElC;;OAEG;IACH,OAAO,CAAC,aAAa,CAAsB;IAE3C,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAO/C,OAAO,CAAC,sBAAsB;IAyB9B,OAAO,CAAC,OAAO;IAKf,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,KAAK,SAAS,GAEpB;IAED,OAAO,KAAK,gBAAgB,GAI3B;YAEa,qBAAqB;YAsBrB,qBAAqB;YAsBrB,YAAY;IAkB1B,OAAO,CAAC,kBAAkB;IAa1B,OAAO,CAAC,eAAe;IAYvB,MAAM;CAqIP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,4BAA4B,CAAC;KACzD;CACF"}
+{"version":3,"file":"participant-controls.d.ts","sourceRoot":"","sources":["../../src/components/participant-controls.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAEvC;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IAC3B,WAAW,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAClC,WAAW,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAClC,IAAI,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IACvB,MAAM,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IACzB,SAAS,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,WAAW,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,MAAM,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;CAC1B;AAED,qBACa,4BAA6B,SAAQ,UAAU;IAC1D,MAAM,CAAC,MAAM,0BAoMX;IAEF;;OAEG;IAEH,WAAW,EAAE,kBAAkB,GAAG,IAAI,CAAQ;IAE9C;;OAEG;IAEH,YAAY,EAAE,MAAM,EAAE,CAAM;IAE5B;;OAEG;IAEH,UAAU,EAAE,OAAO,CAAS;IAE5B;;OAEG;IAEH,OAAO,EAAE,OAAO,CAAS;IAEzB;;OAEG;IAEH,OAAO,CAAC,MAAM,CAAe;IAE7B;;OAEG;IAEH,OAAO,CAAC,eAAe,CAAyB;IAEhD;;OAEG;IAEH,OAAO,CAAC,UAAU,CAAkB;IAEpC;;OAEG;IAEH,OAAO,CAAC,UAAU,CAAkB;IAEpC;;OAEG;IAEH,OAAO,CAAC,QAAQ,CAAkB;IAElC;;OAEG;IACH,OAAO,CAAC,aAAa,CAAsB;IAE3C,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAO/C,OAAO,CAAC,sBAAsB;IAyB9B,OAAO,CAAC,OAAO;IAKf,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,KAAK,SAAS,GAEpB;IAED,OAAO,KAAK,gBAAgB,GAI3B;YAEa,qBAAqB;YAsBrB,qBAAqB;YAsBrB,YAAY;IAkB1B,OAAO,CAAC,kBAAkB;IAa1B,OAAO,CAAC,eAAe;IAYvB,MAAM;CAqIP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,4BAA4B,CAAC;KACzD;CACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"participant-controls.js","sources":["../../src/components/participant-controls.ts"],"sourcesContent":["/**\n * Participant Controls Component\n *\n * Individual participant control panel with actions like mute, remove,\n * volume control, and pin/spotlight.\n *\n * @example\n * ```html\n * <sw-participant-controls\n *   .participant=${participant}\n *   .capabilities=${['memberMuteAudio', 'memberRemove']}\n * ></sw-participant-controls>\n * ```\n */\n\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { Subscription } from 'rxjs';\nimport type { Observable } from 'rxjs';\n\n/**\n * Participant interface for controls component\n */\nexport interface ControlParticipant {\n  id: string;\n  name$?: Observable<string>;\n  audioMuted$?: Observable<boolean>;\n  videoMuted$?: Observable<boolean>;\n  mute?(): Promise<void>;\n  unmute?(): Promise<void>;\n  muteVideo?(): Promise<void>;\n  unmuteVideo?(): Promise<void>;\n  remove?(): Promise<void>;\n}\n\n@customElement('sw-participant-controls')\nexport class ParticipantControlsComponent 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-success: #10b981;\n      --sw-color-danger: #ef4444;\n      --sw-color-danger-hover: #dc2626;\n      --sw-color-warning: #f59e0b;\n      --sw-color-text: #1f2937;\n      --sw-color-text-muted: #6b7280;\n      --sw-color-text-inverse: #ffffff;\n      --sw-color-background: #ffffff;\n      --sw-color-background-hover: #f3f4f6;\n      --sw-color-background-active: #e5e7eb;\n      --sw-color-border: #e5e7eb;\n      --sw-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      --sw-font-size-xs: 11px;\n      --sw-font-size-sm: 12px;\n      --sw-font-size-base: 14px;\n      --sw-space-1: 4px;\n      --sw-space-2: 8px;\n      --sw-space-3: 12px;\n      --sw-space-4: 16px;\n      --sw-border-radius: 8px;\n\n      display: block;\n      font-family: var(--sw-font-family);\n    }\n\n    /* Dark mode support */\n    :host([data-theme='dark']) {\n      --sw-color-text: #f9fafb;\n      --sw-color-text-muted: #9ca3af;\n      --sw-color-background: #1f2937;\n      --sw-color-background-hover: #374151;\n      --sw-color-background-active: #4b5563;\n      --sw-color-border: #374151;\n    }\n\n    @media (prefers-color-scheme: dark) {\n      :host(:not([data-theme='light'])) {\n        --sw-color-text: #f9fafb;\n        --sw-color-text-muted: #9ca3af;\n        --sw-color-background: #1f2937;\n        --sw-color-background-hover: #374151;\n        --sw-color-background-active: #4b5563;\n        --sw-color-border: #374151;\n      }\n    }\n\n    .container {\n      display: flex;\n      flex-direction: column;\n      gap: var(--sw-space-2);\n      padding: var(--sw-space-3);\n      background: var(--sw-color-background);\n      border: 1px solid var(--sw-color-border);\n      border-radius: var(--sw-border-radius);\n      min-width: 200px;\n      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n    }\n\n    .header {\n      display: flex;\n      align-items: center;\n      gap: var(--sw-space-2);\n      padding-bottom: var(--sw-space-2);\n      border-bottom: 1px solid var(--sw-color-border);\n    }\n\n    .participant-name {\n      flex: 1;\n      font-size: var(--sw-font-size-base);\n      font-weight: 500;\n      color: var(--sw-color-text);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .actions {\n      display: flex;\n      flex-direction: column;\n      gap: var(--sw-space-2);\n    }\n\n    .action-button {\n      display: flex;\n      align-items: center;\n      gap: var(--sw-space-2);\n      padding: var(--sw-space-2) var(--sw-space-3);\n      background: var(--sw-color-background-hover);\n      border: none;\n      border-radius: var(--sw-border-radius);\n      color: var(--sw-color-text);\n      font-family: var(--sw-font-family);\n      font-size: var(--sw-font-size-sm);\n      cursor: pointer;\n      transition: background-color 0.15s ease;\n      text-align: left;\n    }\n\n    .action-button:hover {\n      background: var(--sw-color-background-active);\n    }\n\n    .action-button:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .action-button.active {\n      background: var(--sw-color-danger);\n      color: var(--sw-color-text-inverse);\n    }\n\n    .action-button.active:hover {\n      background: var(--sw-color-danger-hover);\n    }\n\n    .action-button.danger {\n      color: var(--sw-color-danger);\n    }\n\n    .action-button.danger:hover {\n      background: var(--sw-color-danger);\n      color: var(--sw-color-text-inverse);\n    }\n\n    .action-button svg {\n      width: 16px;\n      height: 16px;\n      flex-shrink: 0;\n    }\n\n    .volume-control {\n      display: flex;\n      flex-direction: column;\n      gap: var(--sw-space-1);\n    }\n\n    .volume-label {\n      display: flex;\n      align-items: center;\n      gap: var(--sw-space-2);\n      font-size: var(--sw-font-size-sm);\n      color: var(--sw-color-text-muted);\n    }\n\n    .volume-label svg {\n      width: 14px;\n      height: 14px;\n    }\n\n    .volume-slider {\n      width: 100%;\n      height: 4px;\n      -webkit-appearance: none;\n      appearance: none;\n      background: var(--sw-color-border);\n      border-radius: 2px;\n      outline: none;\n      cursor: pointer;\n    }\n\n    .volume-slider::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      appearance: none;\n      width: 14px;\n      height: 14px;\n      background: var(--sw-color-primary);\n      border-radius: 50%;\n      cursor: pointer;\n      transition: transform 0.1s ease;\n    }\n\n    .volume-slider::-webkit-slider-thumb:hover {\n      transform: scale(1.2);\n    }\n\n    .volume-slider::-moz-range-thumb {\n      width: 14px;\n      height: 14px;\n      background: var(--sw-color-primary);\n      border-radius: 50%;\n      border: none;\n      cursor: pointer;\n    }\n\n    .no-actions {\n      color: var(--sw-color-text-muted);\n      font-size: var(--sw-font-size-sm);\n      text-align: center;\n      padding: var(--sw-space-2);\n    }\n  `;\n\n  /**\n   * Participant object to control\n   */\n  @property({ attribute: false })\n  participant: ControlParticipant | null = null;\n\n  /**\n   * Available capabilities (actions user can perform)\n   */\n  @property({ attribute: false })\n  capabilities: string[] = [];\n\n  /**\n   * Whether to show volume slider\n   */\n  @property({ type: Boolean, attribute: 'show-volume' })\n  showVolume: boolean = false;\n\n  /**\n   * Whether to show pin/spotlight button\n   */\n  @property({ type: Boolean, attribute: 'show-pin' })\n  showPin: boolean = false;\n\n  /**\n   * Current volume (0-100)\n   */\n  @state()\n  private volume: number = 100;\n\n  /**\n   * Participant name\n   */\n  @state()\n  private participantName: string = 'Participant';\n\n  /**\n   * Audio mute state\n   */\n  @state()\n  private audioMuted: boolean = false;\n\n  /**\n   * Video mute state\n   */\n  @state()\n  private videoMuted: boolean = false;\n\n  /**\n   * Is pinned/spotlighted\n   */\n  @state()\n  private isPinned: boolean = false;\n\n  /**\n   * RxJS subscriptions for cleanup\n   */\n  private subscriptions: Subscription[] = [];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.subscribeToParticipant();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.cleanup();\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has('participant')) {\n      this.cleanup();\n      this.subscribeToParticipant();\n    }\n  }\n\n  private subscribeToParticipant() {\n    if (!this.participant) return;\n\n    if (this.participant.name$) {\n      const nameSub = this.participant.name$.subscribe((name) => {\n        this.participantName = name;\n      });\n      this.subscriptions.push(nameSub);\n    }\n\n    if (this.participant.audioMuted$) {\n      const audioSub = this.participant.audioMuted$.subscribe((muted) => {\n        this.audioMuted = muted;\n      });\n      this.subscriptions.push(audioSub);\n    }\n\n    if (this.participant.videoMuted$) {\n      const videoSub = this.participant.videoMuted$.subscribe((muted) => {\n        this.videoMuted = muted;\n      });\n      this.subscriptions.push(videoSub);\n    }\n  }\n\n  private cleanup() {\n    this.subscriptions.forEach((sub) => sub.unsubscribe());\n    this.subscriptions = [];\n  }\n\n  private get canMuteAudio(): boolean {\n    return this.capabilities.includes('memberMuteAudio');\n  }\n\n  private get canMuteVideo(): boolean {\n    return this.capabilities.includes('memberMuteVideo');\n  }\n\n  private get canRemove(): boolean {\n    return this.capabilities.includes('memberRemove');\n  }\n\n  private get hasAnyCapability(): boolean {\n    return (\n      this.canMuteAudio || this.canMuteVideo || this.canRemove || this.showVolume || this.showPin\n    );\n  }\n\n  private async handleToggleAudioMute() {\n    if (!this.participant) return;\n\n    try {\n      if (this.audioMuted && this.participant.unmute) {\n        await this.participant.unmute();\n      } else if (!this.audioMuted && this.participant.mute) {\n        await this.participant.mute();\n      }\n\n      this.dispatchEvent(\n        new CustomEvent('sw-participant-mute-audio', {\n          detail: { participant: this.participant, muted: !this.audioMuted },\n          bubbles: true,\n          composed: true\n        })\n      );\n    } catch (error) {\n      console.error('Failed to toggle audio mute:', error);\n    }\n  }\n\n  private async handleToggleVideoMute() {\n    if (!this.participant) return;\n\n    try {\n      if (this.videoMuted && this.participant.unmuteVideo) {\n        await this.participant.unmuteVideo();\n      } else if (!this.videoMuted && this.participant.muteVideo) {\n        await this.participant.muteVideo();\n      }\n\n      this.dispatchEvent(\n        new CustomEvent('sw-participant-mute-video', {\n          detail: { participant: this.participant, muted: !this.videoMuted },\n          bubbles: true,\n          composed: true\n        })\n      );\n    } catch (error) {\n      console.error('Failed to toggle video mute:', error);\n    }\n  }\n\n  private async handleRemove() {\n    if (!this.participant?.remove) return;\n\n    try {\n      await this.participant.remove();\n\n      this.dispatchEvent(\n        new CustomEvent('sw-participant-remove', {\n          detail: { participant: this.participant },\n          bubbles: true,\n          composed: true\n        })\n      );\n    } catch (error) {\n      console.error('Failed to remove participant:', error);\n    }\n  }\n\n  private handleVolumeChange(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.volume = parseInt(input.value, 10);\n\n    this.dispatchEvent(\n      new CustomEvent('sw-participant-volume', {\n        detail: { participant: this.participant, volume: this.volume },\n        bubbles: true,\n        composed: true\n      })\n    );\n  }\n\n  private handleTogglePin() {\n    this.isPinned = !this.isPinned;\n\n    this.dispatchEvent(\n      new CustomEvent('sw-participant-pin', {\n        detail: { participant: this.participant, pinned: this.isPinned },\n        bubbles: true,\n        composed: true\n      })\n    );\n  }\n\n  render() {\n    return html`\n      <div class=\"container\" part=\"container\">\n        <div class=\"header\">\n          <span class=\"participant-name\">${this.participantName}</span>\n        </div>\n\n        <div class=\"actions\">\n          ${!this.hasAnyCapability\n            ? html`<div class=\"no-actions\">No actions available</div>`\n            : null}\n          ${this.canMuteAudio\n            ? html`\n                <button\n                  class=\"action-button ${this.audioMuted ? 'active' : ''}\"\n                  part=\"action-button\"\n                  @click=${this.handleToggleAudioMute}\n                  aria-label=\"${this.audioMuted ? 'Unmute audio' : 'Mute audio'}\"\n                >\n                  ${this.audioMuted\n                    ? html`<svg\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                      >\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\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                      >\n                        <path\n                          d=\"M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z\"\n                        />\n                      </svg>`}\n                  ${this.audioMuted ? 'Unmute' : 'Mute'}\n                </button>\n              `\n            : null}\n          ${this.canMuteVideo\n            ? html`\n                <button\n                  class=\"action-button ${this.videoMuted ? 'active' : ''}\"\n                  part=\"action-button\"\n                  @click=${this.handleToggleVideoMute}\n                  aria-label=\"${this.videoMuted ? 'Unmute video' : 'Mute video'}\"\n                >\n                  ${this.videoMuted\n                    ? html`<svg\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                      >\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\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                      >\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                  ${this.videoMuted ? 'Enable video' : 'Disable video'}\n                </button>\n              `\n            : null}\n          ${this.showVolume\n            ? html`\n                <div class=\"volume-control\" part=\"slider\">\n                  <label class=\"volume-label\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                      <path\n                        d=\"M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z\"\n                      />\n                    </svg>\n                    Volume: ${this.volume}%\n                  </label>\n                  <input\n                    type=\"range\"\n                    class=\"volume-slider\"\n                    min=\"0\"\n                    max=\"100\"\n                    .value=${String(this.volume)}\n                    @input=${this.handleVolumeChange}\n                    aria-label=\"Participant volume\"\n                  />\n                </div>\n              `\n            : null}\n          ${this.showPin\n            ? html`\n                <button\n                  class=\"action-button ${this.isPinned ? 'active' : ''}\"\n                  part=\"action-button\"\n                  @click=${this.handleTogglePin}\n                  aria-label=\"${this.isPinned ? 'Unpin' : 'Pin'}\"\n                  aria-pressed=\"${this.isPinned}\"\n                >\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                    <path d=\"M16 12V4h1V2H7v2h1v8l-2 2v2h5.2v6h1.6v-6H18v-2l-2-2z\" />\n                  </svg>\n                  ${this.isPinned ? 'Unpin' : 'Pin'}\n                </button>\n              `\n            : null}\n          ${this.canRemove\n            ? html`\n                <button\n                  class=\"action-button danger\"\n                  part=\"action-button\"\n                  @click=${this.handleRemove}\n                  aria-label=\"Remove participant\"\n                >\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                    <path\n                      d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\n                    />\n                  </svg>\n                  Remove\n                </button>\n              `\n            : null}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-participant-controls': ParticipantControlsComponent;\n  }\n}\n"],"names":["ParticipantControlsComponent","LitElement","changedProperties","nameSub","name","audioSub","muted","videoSub","sub","error","_a","e","input","html","css","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"participant-controls.js","sources":["../../src/components/participant-controls.ts"],"sourcesContent":["/**\n * Participant Controls Component\n *\n * Individual participant control panel with actions like mute, remove,\n * volume control, and pin/spotlight.\n *\n * @example\n * ```html\n * <sw-participant-controls\n *   .participant=${participant}\n *   .capabilities=${['memberMuteAudio', 'memberRemove']}\n * ></sw-participant-controls>\n * ```\n *\n * @fires sw-participant-mute-audio - Fired to toggle a participant's audio. Detail: `{ participantId: string, muted: boolean }`\n * @fires sw-participant-mute-video - Fired to toggle a participant's video. Detail: `{ participantId: string, muted: boolean }`\n * @fires sw-participant-remove - Fired to remove a participant. Detail: `{ participantId: string }`\n * @fires sw-participant-volume - Fired when a participant's volume changes. Detail: `{ participantId: string, volume: number }`\n * @fires sw-participant-pin - Fired to pin/unpin a participant. Detail: `{ participantId: string, pinned: boolean }`\n *\n * @cssprop [--sw-color-primary=#044cf6] - Primary brand color\n * @cssprop [--sw-color-primary-hover=#0339c4] - Primary color on hover\n * @cssprop [--sw-color-success=#10b981] - Success/positive color\n * @cssprop [--sw-color-danger=#ef4444] - Danger/destructive color\n * @cssprop [--sw-color-danger-hover=#dc2626] - Danger color on hover\n * @cssprop [--sw-color-warning=#f59e0b] - Warning color\n * @cssprop [--sw-color-text=#1f2937] - Primary text color\n * @cssprop [--sw-color-text-muted=#6b7280] - Secondary/muted text color\n * @cssprop [--sw-color-text-inverse=#ffffff] - Inverse text color for active buttons\n * @cssprop [--sw-color-background=#ffffff] - Component background color\n * @cssprop [--sw-color-background-hover=#f3f4f6] - Background color on hover\n * @cssprop [--sw-color-background-active=#e5e7eb] - Background color on active/press\n * @cssprop [--sw-color-border=#e5e7eb] - Border color\n * @cssprop [--sw-font-family=-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif] - Font family\n * @cssprop [--sw-font-size-xs=11px] - Extra-small font size\n * @cssprop [--sw-font-size-sm=12px] - Small font size\n * @cssprop [--sw-font-size-base=14px] - Base font size\n * @cssprop [--sw-space-1=4px] - Smallest spacing unit\n * @cssprop [--sw-space-2=8px] - Small spacing unit\n * @cssprop [--sw-space-3=12px] - Medium spacing unit\n * @cssprop [--sw-space-4=16px] - Large spacing unit\n * @cssprop [--sw-border-radius=8px] - Border radius for containers and buttons\n */\n\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { Subscription } from 'rxjs';\nimport type { Observable } from 'rxjs';\n\n/**\n * Participant interface for controls component\n */\nexport interface ControlParticipant {\n  id: string;\n  name$?: Observable<string>;\n  audioMuted$?: Observable<boolean>;\n  videoMuted$?: Observable<boolean>;\n  mute?(): Promise<void>;\n  unmute?(): Promise<void>;\n  muteVideo?(): Promise<void>;\n  unmuteVideo?(): Promise<void>;\n  remove?(): Promise<void>;\n}\n\n@customElement('sw-participant-controls')\nexport class ParticipantControlsComponent 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-success: #10b981;\n      --sw-color-danger: #ef4444;\n      --sw-color-danger-hover: #dc2626;\n      --sw-color-warning: #f59e0b;\n      --sw-color-text: #1f2937;\n      --sw-color-text-muted: #6b7280;\n      --sw-color-text-inverse: #ffffff;\n      --sw-color-background: #ffffff;\n      --sw-color-background-hover: #f3f4f6;\n      --sw-color-background-active: #e5e7eb;\n      --sw-color-border: #e5e7eb;\n      --sw-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      --sw-font-size-xs: 11px;\n      --sw-font-size-sm: 12px;\n      --sw-font-size-base: 14px;\n      --sw-space-1: 4px;\n      --sw-space-2: 8px;\n      --sw-space-3: 12px;\n      --sw-space-4: 16px;\n      --sw-border-radius: 8px;\n\n      display: block;\n      font-family: var(--sw-font-family);\n    }\n\n    /* Dark mode support */\n    :host([data-theme='dark']) {\n      --sw-color-text: #f9fafb;\n      --sw-color-text-muted: #9ca3af;\n      --sw-color-background: #1f2937;\n      --sw-color-background-hover: #374151;\n      --sw-color-background-active: #4b5563;\n      --sw-color-border: #374151;\n    }\n\n    @media (prefers-color-scheme: dark) {\n      :host(:not([data-theme='light'])) {\n        --sw-color-text: #f9fafb;\n        --sw-color-text-muted: #9ca3af;\n        --sw-color-background: #1f2937;\n        --sw-color-background-hover: #374151;\n        --sw-color-background-active: #4b5563;\n        --sw-color-border: #374151;\n      }\n    }\n\n    .container {\n      display: flex;\n      flex-direction: column;\n      gap: var(--sw-space-2);\n      padding: var(--sw-space-3);\n      background: var(--sw-color-background);\n      border: 1px solid var(--sw-color-border);\n      border-radius: var(--sw-border-radius);\n      min-width: 200px;\n      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n    }\n\n    .header {\n      display: flex;\n      align-items: center;\n      gap: var(--sw-space-2);\n      padding-bottom: var(--sw-space-2);\n      border-bottom: 1px solid var(--sw-color-border);\n    }\n\n    .participant-name {\n      flex: 1;\n      font-size: var(--sw-font-size-base);\n      font-weight: 500;\n      color: var(--sw-color-text);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .actions {\n      display: flex;\n      flex-direction: column;\n      gap: var(--sw-space-2);\n    }\n\n    .action-button {\n      display: flex;\n      align-items: center;\n      gap: var(--sw-space-2);\n      padding: var(--sw-space-2) var(--sw-space-3);\n      background: var(--sw-color-background-hover);\n      border: none;\n      border-radius: var(--sw-border-radius);\n      color: var(--sw-color-text);\n      font-family: var(--sw-font-family);\n      font-size: var(--sw-font-size-sm);\n      cursor: pointer;\n      transition: background-color 0.15s ease;\n      text-align: left;\n    }\n\n    .action-button:hover {\n      background: var(--sw-color-background-active);\n    }\n\n    .action-button:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .action-button.active {\n      background: var(--sw-color-danger);\n      color: var(--sw-color-text-inverse);\n    }\n\n    .action-button.active:hover {\n      background: var(--sw-color-danger-hover);\n    }\n\n    .action-button.danger {\n      color: var(--sw-color-danger);\n    }\n\n    .action-button.danger:hover {\n      background: var(--sw-color-danger);\n      color: var(--sw-color-text-inverse);\n    }\n\n    .action-button svg {\n      width: 16px;\n      height: 16px;\n      flex-shrink: 0;\n    }\n\n    .volume-control {\n      display: flex;\n      flex-direction: column;\n      gap: var(--sw-space-1);\n    }\n\n    .volume-label {\n      display: flex;\n      align-items: center;\n      gap: var(--sw-space-2);\n      font-size: var(--sw-font-size-sm);\n      color: var(--sw-color-text-muted);\n    }\n\n    .volume-label svg {\n      width: 14px;\n      height: 14px;\n    }\n\n    .volume-slider {\n      width: 100%;\n      height: 4px;\n      -webkit-appearance: none;\n      appearance: none;\n      background: var(--sw-color-border);\n      border-radius: 2px;\n      outline: none;\n      cursor: pointer;\n    }\n\n    .volume-slider::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      appearance: none;\n      width: 14px;\n      height: 14px;\n      background: var(--sw-color-primary);\n      border-radius: 50%;\n      cursor: pointer;\n      transition: transform 0.1s ease;\n    }\n\n    .volume-slider::-webkit-slider-thumb:hover {\n      transform: scale(1.2);\n    }\n\n    .volume-slider::-moz-range-thumb {\n      width: 14px;\n      height: 14px;\n      background: var(--sw-color-primary);\n      border-radius: 50%;\n      border: none;\n      cursor: pointer;\n    }\n\n    .no-actions {\n      color: var(--sw-color-text-muted);\n      font-size: var(--sw-font-size-sm);\n      text-align: center;\n      padding: var(--sw-space-2);\n    }\n  `;\n\n  /**\n   * Participant object to control\n   */\n  @property({ attribute: false })\n  participant: ControlParticipant | null = null;\n\n  /**\n   * Available capabilities (actions user can perform)\n   */\n  @property({ attribute: false })\n  capabilities: string[] = [];\n\n  /**\n   * Whether to show volume slider\n   */\n  @property({ type: Boolean, attribute: 'show-volume' })\n  showVolume: boolean = false;\n\n  /**\n   * Whether to show pin/spotlight button\n   */\n  @property({ type: Boolean, attribute: 'show-pin' })\n  showPin: boolean = false;\n\n  /**\n   * Current volume (0-100)\n   */\n  @state()\n  private volume: number = 100;\n\n  /**\n   * Participant name\n   */\n  @state()\n  private participantName: string = 'Participant';\n\n  /**\n   * Audio mute state\n   */\n  @state()\n  private audioMuted: boolean = false;\n\n  /**\n   * Video mute state\n   */\n  @state()\n  private videoMuted: boolean = false;\n\n  /**\n   * Is pinned/spotlighted\n   */\n  @state()\n  private isPinned: boolean = false;\n\n  /**\n   * RxJS subscriptions for cleanup\n   */\n  private subscriptions: Subscription[] = [];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.subscribeToParticipant();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.cleanup();\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has('participant')) {\n      this.cleanup();\n      this.subscribeToParticipant();\n    }\n  }\n\n  private subscribeToParticipant() {\n    if (!this.participant) return;\n\n    if (this.participant.name$) {\n      const nameSub = this.participant.name$.subscribe((name) => {\n        this.participantName = name;\n      });\n      this.subscriptions.push(nameSub);\n    }\n\n    if (this.participant.audioMuted$) {\n      const audioSub = this.participant.audioMuted$.subscribe((muted) => {\n        this.audioMuted = muted;\n      });\n      this.subscriptions.push(audioSub);\n    }\n\n    if (this.participant.videoMuted$) {\n      const videoSub = this.participant.videoMuted$.subscribe((muted) => {\n        this.videoMuted = muted;\n      });\n      this.subscriptions.push(videoSub);\n    }\n  }\n\n  private cleanup() {\n    this.subscriptions.forEach((sub) => sub.unsubscribe());\n    this.subscriptions = [];\n  }\n\n  private get canMuteAudio(): boolean {\n    return this.capabilities.includes('memberMuteAudio');\n  }\n\n  private get canMuteVideo(): boolean {\n    return this.capabilities.includes('memberMuteVideo');\n  }\n\n  private get canRemove(): boolean {\n    return this.capabilities.includes('memberRemove');\n  }\n\n  private get hasAnyCapability(): boolean {\n    return (\n      this.canMuteAudio || this.canMuteVideo || this.canRemove || this.showVolume || this.showPin\n    );\n  }\n\n  private async handleToggleAudioMute() {\n    if (!this.participant) return;\n\n    try {\n      if (this.audioMuted && this.participant.unmute) {\n        await this.participant.unmute();\n      } else if (!this.audioMuted && this.participant.mute) {\n        await this.participant.mute();\n      }\n\n      this.dispatchEvent(\n        new CustomEvent('sw-participant-mute-audio', {\n          detail: { participant: this.participant, muted: !this.audioMuted },\n          bubbles: true,\n          composed: true\n        })\n      );\n    } catch (error) {\n      console.error('Failed to toggle audio mute:', error);\n    }\n  }\n\n  private async handleToggleVideoMute() {\n    if (!this.participant) return;\n\n    try {\n      if (this.videoMuted && this.participant.unmuteVideo) {\n        await this.participant.unmuteVideo();\n      } else if (!this.videoMuted && this.participant.muteVideo) {\n        await this.participant.muteVideo();\n      }\n\n      this.dispatchEvent(\n        new CustomEvent('sw-participant-mute-video', {\n          detail: { participant: this.participant, muted: !this.videoMuted },\n          bubbles: true,\n          composed: true\n        })\n      );\n    } catch (error) {\n      console.error('Failed to toggle video mute:', error);\n    }\n  }\n\n  private async handleRemove() {\n    if (!this.participant?.remove) return;\n\n    try {\n      await this.participant.remove();\n\n      this.dispatchEvent(\n        new CustomEvent('sw-participant-remove', {\n          detail: { participant: this.participant },\n          bubbles: true,\n          composed: true\n        })\n      );\n    } catch (error) {\n      console.error('Failed to remove participant:', error);\n    }\n  }\n\n  private handleVolumeChange(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.volume = parseInt(input.value, 10);\n\n    this.dispatchEvent(\n      new CustomEvent('sw-participant-volume', {\n        detail: { participant: this.participant, volume: this.volume },\n        bubbles: true,\n        composed: true\n      })\n    );\n  }\n\n  private handleTogglePin() {\n    this.isPinned = !this.isPinned;\n\n    this.dispatchEvent(\n      new CustomEvent('sw-participant-pin', {\n        detail: { participant: this.participant, pinned: this.isPinned },\n        bubbles: true,\n        composed: true\n      })\n    );\n  }\n\n  render() {\n    return html`\n      <div class=\"container\" part=\"container\">\n        <div class=\"header\">\n          <span class=\"participant-name\">${this.participantName}</span>\n        </div>\n\n        <div class=\"actions\">\n          ${!this.hasAnyCapability\n            ? html`<div class=\"no-actions\">No actions available</div>`\n            : null}\n          ${this.canMuteAudio\n            ? html`\n                <button\n                  class=\"action-button ${this.audioMuted ? 'active' : ''}\"\n                  part=\"action-button\"\n                  @click=${this.handleToggleAudioMute}\n                  aria-label=\"${this.audioMuted ? 'Unmute audio' : 'Mute audio'}\"\n                >\n                  ${this.audioMuted\n                    ? html`<svg\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                      >\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\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                      >\n                        <path\n                          d=\"M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z\"\n                        />\n                      </svg>`}\n                  ${this.audioMuted ? 'Unmute' : 'Mute'}\n                </button>\n              `\n            : null}\n          ${this.canMuteVideo\n            ? html`\n                <button\n                  class=\"action-button ${this.videoMuted ? 'active' : ''}\"\n                  part=\"action-button\"\n                  @click=${this.handleToggleVideoMute}\n                  aria-label=\"${this.videoMuted ? 'Unmute video' : 'Mute video'}\"\n                >\n                  ${this.videoMuted\n                    ? html`<svg\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                      >\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\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                      >\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                  ${this.videoMuted ? 'Enable video' : 'Disable video'}\n                </button>\n              `\n            : null}\n          ${this.showVolume\n            ? html`\n                <div class=\"volume-control\" part=\"slider\">\n                  <label class=\"volume-label\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                      <path\n                        d=\"M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z\"\n                      />\n                    </svg>\n                    Volume: ${this.volume}%\n                  </label>\n                  <input\n                    type=\"range\"\n                    class=\"volume-slider\"\n                    min=\"0\"\n                    max=\"100\"\n                    .value=${String(this.volume)}\n                    @input=${this.handleVolumeChange}\n                    aria-label=\"Participant volume\"\n                  />\n                </div>\n              `\n            : null}\n          ${this.showPin\n            ? html`\n                <button\n                  class=\"action-button ${this.isPinned ? 'active' : ''}\"\n                  part=\"action-button\"\n                  @click=${this.handleTogglePin}\n                  aria-label=\"${this.isPinned ? 'Unpin' : 'Pin'}\"\n                  aria-pressed=\"${this.isPinned}\"\n                >\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                    <path d=\"M16 12V4h1V2H7v2h1v8l-2 2v2h5.2v6h1.6v-6H18v-2l-2-2z\" />\n                  </svg>\n                  ${this.isPinned ? 'Unpin' : 'Pin'}\n                </button>\n              `\n            : null}\n          ${this.canRemove\n            ? html`\n                <button\n                  class=\"action-button danger\"\n                  part=\"action-button\"\n                  @click=${this.handleRemove}\n                  aria-label=\"Remove participant\"\n                >\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                    <path\n                      d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\n                    />\n                  </svg>\n                  Remove\n                </button>\n              `\n            : null}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-participant-controls': ParticipantControlsComponent;\n  }\n}\n"],"names":["ParticipantControlsComponent","LitElement","changedProperties","nameSub","name","audioSub","muted","videoSub","sub","error","_a","e","input","html","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/participants.d.ts

@@ -10,6 +10,10 @@
  *   <self-media mirror=${true}></self-media>
  * </participants>
  * ```
+ *
+ * @fires sw-participant-mute-audio - Fired to toggle a participant's audio. Detail: `{ participantId: string, muted: boolean }`
+ * @fires sw-participant-mute-video - Fired to toggle a participant's video. Detail: `{ participantId: string, muted: boolean }`
+ * @fires sw-participant-remove - Fired to remove a participant. Detail: `{ participantId: string }`
  */
 import { LitElement } from 'lit';
 import type { Call } from '../types/index.js';

package/dist/components/participants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"participants.d.ts","sourceRoot":"","sources":["../../src/components/participants.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,IAAI,EAA4B,MAAM,mBAAmB,CAAC;AAIxE,qBACa,YAAa,SAAQ,UAAU;IAC1C,MAAM,CAAC,MAAM,0BAqHX;IAEF;;OAEG;IAGH,OAAO,CAAC,KAAK,CAAC,CAAO;IAErB;;OAEG;IACH,IACI,IAAI,CAAC,KAAK,EAAE,IAAI,GAAG,SAAS,EAI/B;IACD,IAAI,IAAI,IAAI,IAAI,GAAG,SAAS,CAE3B;IAED;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAAqB;IAE/C;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAAqB;IAE/C;;OAEG;IAEH,OAAO,CAAC,WAAW,CAAuB;IAE1C;;OAEG;IACH,OAAO,CAAC,aAAa,CAAsB;IAE3C;;OAEG;IACH,iBAAiB;IAKjB;;OAEG;IACH,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAUhE;;OAEG;IACH,oBAAoB;IAKpB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IA2B1B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAO3B;;OAEG;IACH,OAAO,CAAC,WAAW;IAKnB;;OAEG;IACH,OAAO,CAAC,eAAe;IAIvB;;OAEG;YACW,gBAAgB;IAwB9B;;OAEG;YACW,gBAAgB;IAwB9B;;OAEG;YACW,aAAa;IAoB3B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAM5B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAa5B;;OAEG;IACH,OAAO,CAAC,cAAc;IAUtB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IA0D1B;;OAEG;IACH,OAAO,CAAC,aAAa;IA0CrB;;OAEG;IACH,MAAM;CAMP;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,YAAY,CAAC;KACjC;CACF"}
+{"version":3,"file":"participants.d.ts","sourceRoot":"","sources":["../../src/components/participants.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,IAAI,EAA4B,MAAM,mBAAmB,CAAC;AAIxE,qBACa,YAAa,SAAQ,UAAU;IAC1C,MAAM,CAAC,MAAM,0BAqHX;IAEF;;OAEG;IAGH,OAAO,CAAC,KAAK,CAAC,CAAO;IAErB;;OAEG;IACH,IACI,IAAI,CAAC,KAAK,EAAE,IAAI,GAAG,SAAS,EAI/B;IACD,IAAI,IAAI,IAAI,IAAI,GAAG,SAAS,CAE3B;IAED;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAAqB;IAE/C;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAAqB;IAE/C;;OAEG;IAEH,OAAO,CAAC,WAAW,CAAuB;IAE1C;;OAEG;IACH,OAAO,CAAC,aAAa,CAAsB;IAE3C;;OAEG;IACH,iBAAiB;IAKjB;;OAEG;IACH,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAUhE;;OAEG;IACH,oBAAoB;IAKpB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IA2B1B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAO3B;;OAEG;IACH,OAAO,CAAC,WAAW;IAKnB;;OAEG;IACH,OAAO,CAAC,eAAe;IAIvB;;OAEG;YACW,gBAAgB;IAwB9B;;OAEG;YACW,gBAAgB;IAwB9B;;OAEG;YACW,aAAa;IAoB3B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAM5B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAa5B;;OAEG;IACH,OAAO,CAAC,cAAc;IAUtB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IA0D1B;;OAEG;IACH,OAAO,CAAC,aAAa;IA0CrB;;OAEG;IACH,MAAM;CAMP;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,YAAY,CAAC;KACjC;CACF"}

package/dist/components/participants.js.map

@@ -1 +1 @@
-{"version":3,"file":"participants.js","sources":["../../src/components/participants.ts"],"sourcesContent":["/**\n * Participants Component\n *\n * Renders member overlays based on layoutLayers from the call context.\n * Excludes self member and provides slot for <self-media> child component.\n *\n * @example\n * ```html\n * <participants>\n *   <self-media mirror=${true}></self-media>\n * </participants>\n * ```\n */\n\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { consume } from '@lit/context';\nimport { Subscription } from 'rxjs';\nimport type { Call, LayoutLayer, Participant } from '../types/index.js';\nimport { getSelfId, castParticipants } from '../types/index.js';\nimport { callContext } from '../context/call-context.js';\n\n@customElement('sw-participants')\nexport class Participants extends LitElement {\n  static styles = css`\n    :host {\n      display: contents; /* Doesn't create a box, children inherit positioning */\n    }\n\n    .member-overlay {\n      box-sizing: border-box;\n      /* Thick inset box-shadow with semi-transparent background for debugging */\n      box-shadow: inset 0 0 0 8px rgba(255, 0, 0, 0.8);\n      background-color: rgba(255, 0, 0, 0.1);\n    }\n\n    .member-overlay.is-self {\n      /* Self overlay uses blue border to distinguish from other participants */\n      box-shadow: inset 0 0 0 8px rgba(0, 0, 255, 0.8);\n      background-color: rgba(0, 0, 255, 0.1);\n    }\n\n    /* Circular menu trigger button */\n    .menu-trigger {\n      position: absolute;\n      top: 12px;\n      left: 12px;\n      width: 36px;\n      height: 36px;\n      border-radius: 50%;\n      background: rgba(0, 0, 0, 0.6);\n      border: 2px solid rgba(255, 255, 255, 0.3);\n      color: white;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition:\n        background 0.2s ease,\n        transform 0.2s ease,\n        border-color 0.2s ease;\n      z-index: 20;\n    }\n\n    .menu-trigger:hover {\n      background: rgba(0, 0, 0, 0.8);\n      border-color: rgba(255, 255, 255, 0.6);\n      transform: scale(1.1);\n    }\n\n    .menu-trigger:focus {\n      outline: none;\n      border-color: #044cf6;\n      box-shadow: 0 0 0 3px rgba(4, 78, 246, 0.4);\n    }\n\n    .menu-trigger svg {\n      width: 20px;\n      height: 20px;\n    }\n\n    /* Dropdown menu */\n    .menu-dropdown {\n      position: absolute;\n      top: 12px;\n      left: 56px;\n      background: rgba(31, 41, 55, 0.95);\n      backdrop-filter: blur(8px);\n      border-radius: 8px;\n      padding: 8px 0;\n      min-width: 160px;\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n      z-index: 30;\n      opacity: 0;\n      visibility: hidden;\n      transform: translateX(-10px);\n      transition:\n        opacity 0.2s ease,\n        transform 0.2s ease,\n        visibility 0.2s ease;\n    }\n\n    .menu-dropdown.open {\n      opacity: 1;\n      visibility: visible;\n      transform: translateX(0);\n    }\n\n    .menu-item {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      color: white;\n      font-size: 14px;\n      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      cursor: pointer;\n      transition: background 0.15s ease;\n      border: none;\n      background: none;\n      width: 100%;\n      text-align: left;\n    }\n\n    .menu-item:hover {\n      background: rgba(255, 255, 255, 0.1);\n    }\n\n    .menu-item svg {\n      width: 16px;\n      height: 16px;\n      flex-shrink: 0;\n    }\n\n    .menu-item.danger {\n      color: #ef4444;\n    }\n\n    .menu-item.danger:hover {\n      background: rgba(239, 68, 68, 0.2);\n    }\n  `;\n\n  /**\n   * Consumes call context from parent call-media component\n   */\n  @consume({ context: callContext, subscribe: true })\n  @property({ attribute: false })\n  private _call?: Call;\n\n  /**\n   * Public call property for direct assignment (when not nested in sw-call-media)\n   */\n  @property({ attribute: false })\n  set call(value: Call | undefined) {\n    this._call = value;\n    this.cleanupSubscriptions();\n    this.setupSubscriptions();\n  }\n  get call(): Call | undefined {\n    return this._call;\n  }\n\n  /**\n   * Current layout layers value from observable\n   */\n  private _layoutLayersValue: LayoutLayer[] = [];\n\n  /**\n   * Current participants from observable\n   */\n  private _participantsValue: Participant[] = [];\n\n  /**\n   * ID of participant with open menu\n   */\n  @state()\n  private _openMenuId: string | null = null;\n\n  /**\n   * RxJS subscriptions for cleanup\n   */\n  private subscriptions: Subscription[] = [];\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/context changes\n   */\n  protected updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('_call') && this._call) {\n      // Clean up old subscriptions first\n      this.cleanupSubscriptions();\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  }\n\n  /**\n   * Subscribe to call observables\n   */\n  private setupSubscriptions(): void {\n    // Continue observing even if _call is undefined initially\n    // This allows component to react when call becomes available\n    if (!this._call) return;\n\n    this.subscriptions.push(\n      this._call.layoutLayers$.subscribe((layers: LayoutLayer[]) => {\n        this._layoutLayersValue = layers;\n        this.requestUpdate();\n      })\n    );\n\n    // Subscribe to participants for menu actions\n    if (this._call.participants$) {\n      this.subscriptions.push(\n        this._call.participants$.subscribe((participants: unknown[]) => {\n          this._participantsValue = castParticipants(participants);\n          this.requestUpdate();\n        })\n      );\n    }\n\n    // Close menu on outside click\n    this._handleOutsideClick = this._handleOutsideClick.bind(this);\n    document.addEventListener('click', this._handleOutsideClick);\n  }\n\n  /**\n   * Handle click outside menu to close it\n   */\n  private _handleOutsideClick(e: Event): void {\n    const target = e.target as Element;\n    if (!target.closest('.menu-trigger') && !target.closest('.menu-dropdown')) {\n      this._openMenuId = null;\n    }\n  }\n\n  /**\n   * Toggle menu for a participant\n   */\n  private _toggleMenu(memberId: string, e: Event): void {\n    e.stopPropagation();\n    this._openMenuId = this._openMenuId === memberId ? null : memberId;\n  }\n\n  /**\n   * Get participant by member ID\n   */\n  private _getParticipant(memberId: string): Participant | undefined {\n    return this._participantsValue.find((p) => p.id === memberId);\n  }\n\n  /**\n   * Handle mute audio action\n   */\n  private async _handleMuteAudio(memberId: string, e: Event): Promise<void> {\n    e.stopPropagation();\n    const participant = this._getParticipant(memberId);\n    if (!participant) return;\n\n    try {\n      if (participant.audioMuted && participant.unmute) {\n        await participant.unmute();\n      } else if (!participant.audioMuted && participant.mute) {\n        await participant.mute();\n      }\n      this.dispatchEvent(\n        new CustomEvent('sw-participant-mute-audio', {\n          detail: { participant, memberId },\n          bubbles: true,\n          composed: true\n        })\n      );\n    } catch {\n      // Silently handle error\n    }\n    this._openMenuId = null;\n  }\n\n  /**\n   * Handle mute video action\n   */\n  private async _handleMuteVideo(memberId: string, e: Event): Promise<void> {\n    e.stopPropagation();\n    const participant = this._getParticipant(memberId);\n    if (!participant) return;\n\n    try {\n      if (participant.videoMuted && participant.unmuteVideo) {\n        await participant.unmuteVideo();\n      } else if (!participant.videoMuted && participant.muteVideo) {\n        await participant.muteVideo();\n      }\n      this.dispatchEvent(\n        new CustomEvent('sw-participant-mute-video', {\n          detail: { participant, memberId },\n          bubbles: true,\n          composed: true\n        })\n      );\n    } catch {\n      // Silently handle error\n    }\n    this._openMenuId = null;\n  }\n\n  /**\n   * Handle remove participant action\n   */\n  private async _handleRemove(memberId: string, e: Event): Promise<void> {\n    e.stopPropagation();\n    const participant = this._getParticipant(memberId);\n    if (!participant?.remove) return;\n\n    try {\n      await participant.remove();\n      this.dispatchEvent(\n        new CustomEvent('sw-participant-remove', {\n          detail: { participant, memberId },\n          bubbles: true,\n          composed: true\n        })\n      );\n    } catch {\n      // Silently handle error\n    }\n    this._openMenuId = null;\n  }\n\n  /**\n   * Cleanup all subscriptions\n   */\n  private cleanupSubscriptions(): void {\n    this.subscriptions.forEach((sub) => sub.unsubscribe());\n    this.subscriptions = [];\n    document.removeEventListener('click', this._handleOutsideClick);\n  }\n\n  /**\n   * Render member overlays for all participants\n   */\n  private renderMemberOverlays() {\n    if (!this._layoutLayersValue || this._layoutLayersValue.length === 0) {\n      return null;\n    }\n\n    // Get selfId dynamically from call.self to handle cases where self is available after subscription setup\n    const selfId = getSelfId(this._call);\n\n    return this._layoutLayersValue\n      .filter((layer) => layer.member_id)\n      .map((layer) => this.renderOverlay(layer, layer.member_id === selfId));\n  }\n\n  /**\n   * Render menu button SVG icon (three dots)\n   */\n  private renderMenuIcon() {\n    return html`\n      <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n        <circle cx=\"12\" cy=\"6\" r=\"2\" />\n        <circle cx=\"12\" cy=\"12\" r=\"2\" />\n        <circle cx=\"12\" cy=\"18\" r=\"2\" />\n      </svg>\n    `;\n  }\n\n  /**\n   * Render menu dropdown for a participant\n   */\n  private renderMenuDropdown(memberId: string) {\n    const participant = this._getParticipant(memberId);\n    const isOpen = this._openMenuId === memberId;\n\n    return html`\n      <div class=\"menu-dropdown ${isOpen ? 'open' : ''}\">\n        <button\n          class=\"menu-item\"\n          @click=${(e: Event) => this._handleMuteAudio(memberId, e)}\n          aria-label=\"${participant?.audioMuted ? 'Unmute audio' : 'Mute audio'}\"\n        >\n          ${participant?.audioMuted\n            ? html`<svg 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 viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                <path\n                  d=\"M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z\"\n                />\n              </svg>`}\n          ${participant?.audioMuted ? 'Unmute' : 'Mute'}\n        </button>\n        <button\n          class=\"menu-item\"\n          @click=${(e: Event) => this._handleMuteVideo(memberId, e)}\n          aria-label=\"${participant?.videoMuted ? 'Enable video' : 'Disable video'}\"\n        >\n          ${participant?.videoMuted\n            ? html`<svg 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 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          ${participant?.videoMuted ? 'Enable video' : 'Disable video'}\n        </button>\n        <button\n          class=\"menu-item danger\"\n          @click=${(e: Event) => this._handleRemove(memberId, e)}\n          aria-label=\"Remove participant\"\n        >\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path\n              d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\n            />\n          </svg>\n          Remove\n        </button>\n      </div>\n    `;\n  }\n\n  /**\n   * Render individual member overlay\n   */\n  private renderOverlay(layer: LayoutLayer, isSelf: boolean = false) {\n    const style = `\n      position: absolute;\n      top: ${layer.y}%;\n      left: ${layer.x}%;\n      width: ${layer.width}%;\n      height: ${layer.height}%;\n      opacity: ${layer.visible ? 1 : 0};\n      overflow: visible;\n      transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease, opacity 0.3s ease;\n      pointer-events: auto;\n      z-index: 10;\n    `;\n\n    // member_id is guaranteed to exist by the filter in renderMemberOverlays\n    const memberId = layer.member_id!;\n    const classes = `member-overlay member-overlay-${memberId}${isSelf ? ' is-self' : ''}`;\n\n    return html`\n      <div class=\"${classes}\" part=\"overlay\" style=\"${style}\">\n        ${!isSelf\n          ? html`\n              <button\n                class=\"menu-trigger\"\n                part=\"menu-trigger\"\n                @click=${(e: Event) => this._toggleMenu(memberId, e)}\n                aria-label=\"Participant menu\"\n                aria-expanded=\"${this._openMenuId === memberId}\"\n                aria-haspopup=\"menu\"\n              >\n                ${this.renderMenuIcon()}\n              </button>\n              ${this.renderMenuDropdown(memberId)}\n            `\n          : null}\n        <span class=\"member-name\" part=\"name\"></span>\n        <span class=\"member-indicators\" part=\"indicators\"></span>\n        <slot name=\"controls-${memberId}\"></slot>\n      </div>\n    `;\n  }\n\n  /**\n   * Render the component\n   */\n  render() {\n    return html`\n      ${this.renderMemberOverlays()}\n      <slot></slot>\n    `;\n  }\n}\n\n/**\n * Declare global type for TypeScript\n */\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-participants': Participants;\n  }\n}\n"],"names":["Participants","LitElement","value","changedProperties","layers","participants","castParticipants","target","memberId","e","p","participant","sub","selfId","getSelfId","layer","html","isOpen","isSelf","style","classes","css","__decorateClass","consume","callContext","property","state","customElement"],"mappings":";;;;;;;;;;AAuBO,IAAMA,IAAN,cAA2BC,EAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GA+IL,KAAQ,qBAAoC,CAAA,GAK5C,KAAQ,qBAAoC,CAAA,GAM5C,KAAQ,cAA6B,MAKrC,KAAQ,gBAAgC,CAAA;AAAA,EAAC;AAAA,EA5BzC,IAAI,KAAKC,GAAyB;AAChC,SAAK,QAAQA,GACb,KAAK,qBAAA,GACL,KAAK,mBAAA;AAAA,EACP;AAAA,EACA,IAAI,OAAyB;AAC3B,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA,EA0BA,oBAAoB;AAClB,UAAM,kBAAA,GACN,KAAK,mBAAA;AAAA,EACP;AAAA;AAAA;AAAA;AAAA,EAKU,QAAQC,GAA+C;AAC/D,UAAM,QAAQA,CAAiB,GAC3BA,EAAkB,IAAI,OAAO,KAAK,KAAK,UAEzC,KAAK,qBAAA,GAEL,KAAK,mBAAA;AAAA,EAET;AAAA;AAAA;AAAA;AAAA,EAKA,uBAAuB;AACrB,UAAM,qBAAA,GACN,KAAK,qBAAA;AAAA,EACP;AAAA;AAAA;AAAA;AAAA,EAKQ,qBAA2B;AAGjC,IAAK,KAAK,UAEV,KAAK,cAAc;AAAA,MACjB,KAAK,MAAM,cAAc,UAAU,CAACC,MAA0B;AAC5D,aAAK,qBAAqBA,GAC1B,KAAK,cAAA;AAAA,MACP,CAAC;AAAA,IAAA,GAIC,KAAK,MAAM,iBACb,KAAK,cAAc;AAAA,MACjB,KAAK,MAAM,cAAc,UAAU,CAACC,MAA4B;AAC9D,aAAK,qBAAqBC,EAAiBD,CAAY,GACvD,KAAK,cAAA;AAAA,MACP,CAAC;AAAA,IAAA,GAKL,KAAK,sBAAsB,KAAK,oBAAoB,KAAK,IAAI,GAC7D,SAAS,iBAAiB,SAAS,KAAK,mBAAmB;AAAA,EAC7D;AAAA;AAAA;AAAA;AAAA,EAKQ,oBAAoB,GAAgB;AAC1C,UAAME,IAAS,EAAE;AACjB,IAAI,CAACA,EAAO,QAAQ,eAAe,KAAK,CAACA,EAAO,QAAQ,gBAAgB,MACtE,KAAK,cAAc;AAAA,EAEvB;AAAA;AAAA;AAAA;AAAA,EAKQ,YAAYC,GAAkBC,GAAgB;AACpD,IAAAA,EAAE,gBAAA,GACF,KAAK,cAAc,KAAK,gBAAgBD,IAAW,OAAOA;AAAA,EAC5D;AAAA;AAAA;AAAA;AAAA,EAKQ,gBAAgBA,GAA2C;AACjE,WAAO,KAAK,mBAAmB,KAAK,CAACE,MAAMA,EAAE,OAAOF,CAAQ;AAAA,EAC9D;AAAA;AAAA;AAAA;AAAA,EAKA,MAAc,iBAAiBA,GAAkBC,GAAyB;AACxE,IAAAA,EAAE,gBAAA;AACF,UAAME,IAAc,KAAK,gBAAgBH,CAAQ;AACjD,QAAKG,GAEL;AAAA,UAAI;AACF,QAAIA,EAAY,cAAcA,EAAY,SACxC,MAAMA,EAAY,OAAA,IACT,CAACA,EAAY,cAAcA,EAAY,QAChD,MAAMA,EAAY,KAAA,GAEpB,KAAK;AAAA,UACH,IAAI,YAAY,6BAA6B;AAAA,YAC3C,QAAQ,EAAE,aAAAA,GAAa,UAAAH,EAAA;AAAA,YACvB,SAAS;AAAA,YACT,UAAU;AAAA,UAAA,CACX;AAAA,QAAA;AAAA,MAEL,QAAQ;AAAA,MAER;AACA,WAAK,cAAc;AAAA;AAAA,EACrB;AAAA;AAAA;AAAA;AAAA,EAKA,MAAc,iBAAiBA,GAAkBC,GAAyB;AACxE,IAAAA,EAAE,gBAAA;AACF,UAAME,IAAc,KAAK,gBAAgBH,CAAQ;AACjD,QAAKG,GAEL;AAAA,UAAI;AACF,QAAIA,EAAY,cAAcA,EAAY,cACxC,MAAMA,EAAY,YAAA,IACT,CAACA,EAAY,cAAcA,EAAY,aAChD,MAAMA,EAAY,UAAA,GAEpB,KAAK;AAAA,UACH,IAAI,YAAY,6BAA6B;AAAA,YAC3C,QAAQ,EAAE,aAAAA,GAAa,UAAAH,EAAA;AAAA,YACvB,SAAS;AAAA,YACT,UAAU;AAAA,UAAA,CACX;AAAA,QAAA;AAAA,MAEL,QAAQ;AAAA,MAER;AACA,WAAK,cAAc;AAAA;AAAA,EACrB;AAAA;AAAA;AAAA;AAAA,EAKA,MAAc,cAAcA,GAAkBC,GAAyB;AACrE,IAAAA,EAAE,gBAAA;AACF,UAAME,IAAc,KAAK,gBAAgBH,CAAQ;AACjD,QAAKG,KAAA,QAAAA,EAAa,QAElB;AAAA,UAAI;AACF,cAAMA,EAAY,OAAA,GAClB,KAAK;AAAA,UACH,IAAI,YAAY,yBAAyB;AAAA,YACvC,QAAQ,EAAE,aAAAA,GAAa,UAAAH,EAAA;AAAA,YACvB,SAAS;AAAA,YACT,UAAU;AAAA,UAAA,CACX;AAAA,QAAA;AAAA,MAEL,QAAQ;AAAA,MAER;AACA,WAAK,cAAc;AAAA;AAAA,EACrB;AAAA;AAAA;AAAA;AAAA,EAKQ,uBAA6B;AACnC,SAAK,cAAc,QAAQ,CAACI,MAAQA,EAAI,aAAa,GACrD,KAAK,gBAAgB,CAAA,GACrB,SAAS,oBAAoB,SAAS,KAAK,mBAAmB;AAAA,EAChE;AAAA;AAAA;AAAA;AAAA,EAKQ,uBAAuB;AAC7B,QAAI,CAAC,KAAK,sBAAsB,KAAK,mBAAmB,WAAW;AACjE,aAAO;AAIT,UAAMC,IAASC,EAAU,KAAK,KAAK;AAEnC,WAAO,KAAK,mBACT,OAAO,CAACC,MAAUA,EAAM,SAAS,EACjC,IAAI,CAACA,MAAU,KAAK,cAAcA,GAAOA,EAAM,cAAcF,CAAM,CAAC;AAAA,EACzE;AAAA;AAAA;AAAA;AAAA,EAKQ,iBAAiB;AACvB,WAAOG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOT;AAAA;AAAA;AAAA;AAAA,EAKQ,mBAAmBR,GAAkB;AAC3C,UAAMG,IAAc,KAAK,gBAAgBH,CAAQ,GAC3CS,IAAS,KAAK,gBAAgBT;AAEpC,WAAOQ;AAAA,kCACuBC,IAAS,SAAS,EAAE;AAAA;AAAA;AAAA,mBAGnC,CAACR,MAAa,KAAK,iBAAiBD,GAAUC,CAAC,CAAC;AAAA,wBAC3CE,KAAA,QAAAA,EAAa,aAAa,iBAAiB,YAAY;AAAA;AAAA,YAEnEA,KAAA,QAAAA,EAAa,aACXK;AAAA;AAAA;AAAA;AAAA,wBAKAA;AAAA;AAAA;AAAA;AAAA,qBAIO;AAAA,YACTL,KAAA,QAAAA,EAAa,aAAa,WAAW,MAAM;AAAA;AAAA;AAAA;AAAA,mBAIpC,CAACF,MAAa,KAAK,iBAAiBD,GAAUC,CAAC,CAAC;AAAA,wBAC3CE,KAAA,QAAAA,EAAa,aAAa,iBAAiB,eAAe;AAAA;AAAA,YAEtEA,KAAA,QAAAA,EAAa,aACXK;AAAA;AAAA;AAAA;AAAA,wBAKAA;AAAA;AAAA;AAAA;AAAA,qBAIO;AAAA,YACTL,KAAA,QAAAA,EAAa,aAAa,iBAAiB,eAAe;AAAA;AAAA;AAAA;AAAA,mBAInD,CAACF,MAAa,KAAK,cAAcD,GAAUC,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAY9D;AAAA;AAAA;AAAA;AAAA,EAKQ,cAAcM,GAAoBG,IAAkB,IAAO;AACjE,UAAMC,IAAQ;AAAA;AAAA,aAELJ,EAAM,CAAC;AAAA,cACNA,EAAM,CAAC;AAAA,eACNA,EAAM,KAAK;AAAA,gBACVA,EAAM,MAAM;AAAA,iBACXA,EAAM,UAAU,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,OAQ5BP,IAAWO,EAAM,WACjBK,IAAU,iCAAiCZ,CAAQ,GAAGU,IAAS,aAAa,EAAE;AAEpF,WAAOF;AAAA,oBACSI,CAAO,2BAA2BD,CAAK;AAAA,UAChDD,IAcC,OAbAF;AAAA;AAAA;AAAA;AAAA,yBAIa,CAACP,MAAa,KAAK,YAAYD,GAAUC,CAAC,CAAC;AAAA;AAAA,iCAEnC,KAAK,gBAAgBD,CAAQ;AAAA;AAAA;AAAA,kBAG5C,KAAK,gBAAgB;AAAA;AAAA,gBAEvB,KAAK,mBAAmBA,CAAQ,CAAC;AAAA,aAEjC;AAAA;AAAA;AAAA,+BAGeA,CAAQ;AAAA;AAAA;AAAA,EAGrC;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS;AACP,WAAOQ;AAAA,QACH,KAAK,sBAAsB;AAAA;AAAA;AAAA,EAGjC;AACF;AA3dahB,EACJ,SAASqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4HRC,EAAA;AAAA,EAFPC,EAAQ,EAAE,SAASC,GAAa,WAAW,IAAM;AAAA,EACjDC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GA5HnBzB,EA6HH,WAAA,SAAA,CAAA;AAMJsB,EAAA;AAAA,EADHG,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GAlInBzB,EAmIP,WAAA,QAAA,CAAA;AAuBIsB,EAAA;AAAA,EADPI,EAAA;AAAM,GAzJI1B,EA0JH,WAAA,eAAA,CAAA;AA1JGA,IAANsB,EAAA;AAAA,EADNK,EAAc,iBAAiB;AAAA,GACnB3B,CAAA;"}
+{"version":3,"file":"participants.js","sources":["../../src/components/participants.ts"],"sourcesContent":["/**\n * Participants Component\n *\n * Renders member overlays based on layoutLayers from the call context.\n * Excludes self member and provides slot for <self-media> child component.\n *\n * @example\n * ```html\n * <participants>\n *   <self-media mirror=${true}></self-media>\n * </participants>\n * ```\n *\n * @fires sw-participant-mute-audio - Fired to toggle a participant's audio. Detail: `{ participantId: string, muted: boolean }`\n * @fires sw-participant-mute-video - Fired to toggle a participant's video. Detail: `{ participantId: string, muted: boolean }`\n * @fires sw-participant-remove - Fired to remove a participant. Detail: `{ participantId: string }`\n */\n\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { consume } from '@lit/context';\nimport { Subscription } from 'rxjs';\nimport type { Call, LayoutLayer, Participant } from '../types/index.js';\nimport { getSelfId, castParticipants } from '../types/index.js';\nimport { callContext } from '../context/call-context.js';\n\n@customElement('sw-participants')\nexport class Participants extends LitElement {\n  static styles = css`\n    :host {\n      display: contents; /* Doesn't create a box, children inherit positioning */\n    }\n\n    .member-overlay {\n      box-sizing: border-box;\n      /* Thick inset box-shadow with semi-transparent background for debugging */\n      box-shadow: inset 0 0 0 8px rgba(255, 0, 0, 0.8);\n      background-color: rgba(255, 0, 0, 0.1);\n    }\n\n    .member-overlay.is-self {\n      /* Self overlay uses blue border to distinguish from other participants */\n      box-shadow: inset 0 0 0 8px rgba(0, 0, 255, 0.8);\n      background-color: rgba(0, 0, 255, 0.1);\n    }\n\n    /* Circular menu trigger button */\n    .menu-trigger {\n      position: absolute;\n      top: 12px;\n      left: 12px;\n      width: 36px;\n      height: 36px;\n      border-radius: 50%;\n      background: rgba(0, 0, 0, 0.6);\n      border: 2px solid rgba(255, 255, 255, 0.3);\n      color: white;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition:\n        background 0.2s ease,\n        transform 0.2s ease,\n        border-color 0.2s ease;\n      z-index: 20;\n    }\n\n    .menu-trigger:hover {\n      background: rgba(0, 0, 0, 0.8);\n      border-color: rgba(255, 255, 255, 0.6);\n      transform: scale(1.1);\n    }\n\n    .menu-trigger:focus {\n      outline: none;\n      border-color: #044cf6;\n      box-shadow: 0 0 0 3px rgba(4, 78, 246, 0.4);\n    }\n\n    .menu-trigger svg {\n      width: 20px;\n      height: 20px;\n    }\n\n    /* Dropdown menu */\n    .menu-dropdown {\n      position: absolute;\n      top: 12px;\n      left: 56px;\n      background: rgba(31, 41, 55, 0.95);\n      backdrop-filter: blur(8px);\n      border-radius: 8px;\n      padding: 8px 0;\n      min-width: 160px;\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n      z-index: 30;\n      opacity: 0;\n      visibility: hidden;\n      transform: translateX(-10px);\n      transition:\n        opacity 0.2s ease,\n        transform 0.2s ease,\n        visibility 0.2s ease;\n    }\n\n    .menu-dropdown.open {\n      opacity: 1;\n      visibility: visible;\n      transform: translateX(0);\n    }\n\n    .menu-item {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      color: white;\n      font-size: 14px;\n      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      cursor: pointer;\n      transition: background 0.15s ease;\n      border: none;\n      background: none;\n      width: 100%;\n      text-align: left;\n    }\n\n    .menu-item:hover {\n      background: rgba(255, 255, 255, 0.1);\n    }\n\n    .menu-item svg {\n      width: 16px;\n      height: 16px;\n      flex-shrink: 0;\n    }\n\n    .menu-item.danger {\n      color: #ef4444;\n    }\n\n    .menu-item.danger:hover {\n      background: rgba(239, 68, 68, 0.2);\n    }\n  `;\n\n  /**\n   * Consumes call context from parent call-media component\n   */\n  @consume({ context: callContext, subscribe: true })\n  @property({ attribute: false })\n  private _call?: Call;\n\n  /**\n   * Public call property for direct assignment (when not nested in sw-call-media)\n   */\n  @property({ attribute: false })\n  set call(value: Call | undefined) {\n    this._call = value;\n    this.cleanupSubscriptions();\n    this.setupSubscriptions();\n  }\n  get call(): Call | undefined {\n    return this._call;\n  }\n\n  /**\n   * Current layout layers value from observable\n   */\n  private _layoutLayersValue: LayoutLayer[] = [];\n\n  /**\n   * Current participants from observable\n   */\n  private _participantsValue: Participant[] = [];\n\n  /**\n   * ID of participant with open menu\n   */\n  @state()\n  private _openMenuId: string | null = null;\n\n  /**\n   * RxJS subscriptions for cleanup\n   */\n  private subscriptions: Subscription[] = [];\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/context changes\n   */\n  protected updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('_call') && this._call) {\n      // Clean up old subscriptions first\n      this.cleanupSubscriptions();\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  }\n\n  /**\n   * Subscribe to call observables\n   */\n  private setupSubscriptions(): void {\n    // Continue observing even if _call is undefined initially\n    // This allows component to react when call becomes available\n    if (!this._call) return;\n\n    this.subscriptions.push(\n      this._call.layoutLayers$.subscribe((layers: LayoutLayer[]) => {\n        this._layoutLayersValue = layers;\n        this.requestUpdate();\n      })\n    );\n\n    // Subscribe to participants for menu actions\n    if (this._call.participants$) {\n      this.subscriptions.push(\n        this._call.participants$.subscribe((participants: unknown[]) => {\n          this._participantsValue = castParticipants(participants);\n          this.requestUpdate();\n        })\n      );\n    }\n\n    // Close menu on outside click\n    this._handleOutsideClick = this._handleOutsideClick.bind(this);\n    document.addEventListener('click', this._handleOutsideClick);\n  }\n\n  /**\n   * Handle click outside menu to close it\n   */\n  private _handleOutsideClick(e: Event): void {\n    const target = e.target as Element;\n    if (!target.closest('.menu-trigger') && !target.closest('.menu-dropdown')) {\n      this._openMenuId = null;\n    }\n  }\n\n  /**\n   * Toggle menu for a participant\n   */\n  private _toggleMenu(memberId: string, e: Event): void {\n    e.stopPropagation();\n    this._openMenuId = this._openMenuId === memberId ? null : memberId;\n  }\n\n  /**\n   * Get participant by member ID\n   */\n  private _getParticipant(memberId: string): Participant | undefined {\n    return this._participantsValue.find((p) => p.id === memberId);\n  }\n\n  /**\n   * Handle mute audio action\n   */\n  private async _handleMuteAudio(memberId: string, e: Event): Promise<void> {\n    e.stopPropagation();\n    const participant = this._getParticipant(memberId);\n    if (!participant) return;\n\n    try {\n      if (participant.audioMuted && participant.unmute) {\n        await participant.unmute();\n      } else if (!participant.audioMuted && participant.mute) {\n        await participant.mute();\n      }\n      this.dispatchEvent(\n        new CustomEvent('sw-participant-mute-audio', {\n          detail: { participant, memberId },\n          bubbles: true,\n          composed: true\n        })\n      );\n    } catch {\n      // Silently handle error\n    }\n    this._openMenuId = null;\n  }\n\n  /**\n   * Handle mute video action\n   */\n  private async _handleMuteVideo(memberId: string, e: Event): Promise<void> {\n    e.stopPropagation();\n    const participant = this._getParticipant(memberId);\n    if (!participant) return;\n\n    try {\n      if (participant.videoMuted && participant.unmuteVideo) {\n        await participant.unmuteVideo();\n      } else if (!participant.videoMuted && participant.muteVideo) {\n        await participant.muteVideo();\n      }\n      this.dispatchEvent(\n        new CustomEvent('sw-participant-mute-video', {\n          detail: { participant, memberId },\n          bubbles: true,\n          composed: true\n        })\n      );\n    } catch {\n      // Silently handle error\n    }\n    this._openMenuId = null;\n  }\n\n  /**\n   * Handle remove participant action\n   */\n  private async _handleRemove(memberId: string, e: Event): Promise<void> {\n    e.stopPropagation();\n    const participant = this._getParticipant(memberId);\n    if (!participant?.remove) return;\n\n    try {\n      await participant.remove();\n      this.dispatchEvent(\n        new CustomEvent('sw-participant-remove', {\n          detail: { participant, memberId },\n          bubbles: true,\n          composed: true\n        })\n      );\n    } catch {\n      // Silently handle error\n    }\n    this._openMenuId = null;\n  }\n\n  /**\n   * Cleanup all subscriptions\n   */\n  private cleanupSubscriptions(): void {\n    this.subscriptions.forEach((sub) => sub.unsubscribe());\n    this.subscriptions = [];\n    document.removeEventListener('click', this._handleOutsideClick);\n  }\n\n  /**\n   * Render member overlays for all participants\n   */\n  private renderMemberOverlays() {\n    if (!this._layoutLayersValue || this._layoutLayersValue.length === 0) {\n      return null;\n    }\n\n    // Get selfId dynamically from call.self to handle cases where self is available after subscription setup\n    const selfId = getSelfId(this._call);\n\n    return this._layoutLayersValue\n      .filter((layer) => layer.member_id)\n      .map((layer) => this.renderOverlay(layer, layer.member_id === selfId));\n  }\n\n  /**\n   * Render menu button SVG icon (three dots)\n   */\n  private renderMenuIcon() {\n    return html`\n      <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n        <circle cx=\"12\" cy=\"6\" r=\"2\" />\n        <circle cx=\"12\" cy=\"12\" r=\"2\" />\n        <circle cx=\"12\" cy=\"18\" r=\"2\" />\n      </svg>\n    `;\n  }\n\n  /**\n   * Render menu dropdown for a participant\n   */\n  private renderMenuDropdown(memberId: string) {\n    const participant = this._getParticipant(memberId);\n    const isOpen = this._openMenuId === memberId;\n\n    return html`\n      <div class=\"menu-dropdown ${isOpen ? 'open' : ''}\">\n        <button\n          class=\"menu-item\"\n          @click=${(e: Event) => this._handleMuteAudio(memberId, e)}\n          aria-label=\"${participant?.audioMuted ? 'Unmute audio' : 'Mute audio'}\"\n        >\n          ${participant?.audioMuted\n            ? html`<svg 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 viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                <path\n                  d=\"M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z\"\n                />\n              </svg>`}\n          ${participant?.audioMuted ? 'Unmute' : 'Mute'}\n        </button>\n        <button\n          class=\"menu-item\"\n          @click=${(e: Event) => this._handleMuteVideo(memberId, e)}\n          aria-label=\"${participant?.videoMuted ? 'Enable video' : 'Disable video'}\"\n        >\n          ${participant?.videoMuted\n            ? html`<svg 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 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          ${participant?.videoMuted ? 'Enable video' : 'Disable video'}\n        </button>\n        <button\n          class=\"menu-item danger\"\n          @click=${(e: Event) => this._handleRemove(memberId, e)}\n          aria-label=\"Remove participant\"\n        >\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path\n              d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\n            />\n          </svg>\n          Remove\n        </button>\n      </div>\n    `;\n  }\n\n  /**\n   * Render individual member overlay\n   */\n  private renderOverlay(layer: LayoutLayer, isSelf: boolean = false) {\n    const style = `\n      position: absolute;\n      top: ${layer.y}%;\n      left: ${layer.x}%;\n      width: ${layer.width}%;\n      height: ${layer.height}%;\n      opacity: ${layer.visible ? 1 : 0};\n      overflow: visible;\n      transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease, opacity 0.3s ease;\n      pointer-events: auto;\n      z-index: 10;\n    `;\n\n    // member_id is guaranteed to exist by the filter in renderMemberOverlays\n    const memberId = layer.member_id!;\n    const classes = `member-overlay member-overlay-${memberId}${isSelf ? ' is-self' : ''}`;\n\n    return html`\n      <div class=\"${classes}\" part=\"overlay\" style=\"${style}\">\n        ${!isSelf\n          ? html`\n              <button\n                class=\"menu-trigger\"\n                part=\"menu-trigger\"\n                @click=${(e: Event) => this._toggleMenu(memberId, e)}\n                aria-label=\"Participant menu\"\n                aria-expanded=\"${this._openMenuId === memberId}\"\n                aria-haspopup=\"menu\"\n              >\n                ${this.renderMenuIcon()}\n              </button>\n              ${this.renderMenuDropdown(memberId)}\n            `\n          : null}\n        <span class=\"member-name\" part=\"name\"></span>\n        <span class=\"member-indicators\" part=\"indicators\"></span>\n        <slot name=\"controls-${memberId}\"></slot>\n      </div>\n    `;\n  }\n\n  /**\n   * Render the component\n   */\n  render() {\n    return html`\n      ${this.renderMemberOverlays()}\n      <slot></slot>\n    `;\n  }\n}\n\n/**\n * Declare global type for TypeScript\n */\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-participants': Participants;\n  }\n}\n"],"names":["Participants","LitElement","value","changedProperties","layers","participants","castParticipants","target","memberId","e","p","participant","sub","selfId","getSelfId","layer","html","isOpen","isSelf","style","classes","css","__decorateClass","consume","callContext","property","state","customElement"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@signalwire/web-components",
-  "version": "1.0.0-dev-20260324190414",
+  "version": "1.0.0-dev-20260326210326",
   "description": "UI components library built with Lit",
   "type": "module",
   "main": "./dist/index.js",
@@ -115,7 +115,7 @@
     "rxjs": "^7.8.2"
   },
   "peerDependencies": {
-    "@signalwire/js": "4.0.0-dev-20260324190414"
+    "@signalwire/js": "4.0.0-dev-20260326210326"
   },
   "devDependencies": {
     "@playwright/test": "^1.56.1",