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

package/dist/components/sw-directory.js

@@ -0,0 +1,434 @@
+import { LitElement as u, html as a, css as p } from "lit";
+import { property as m, state as l, customElement as b } from "lit/decorators.js";
+var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, n = (e, i, o, t) => {
+  for (var s = t > 1 ? void 0 : t ? f(i, o) : i, c = e.length - 1, d; c >= 0; c--)
+    (d = e[c]) && (s = (t ? d(i, o, s) : d(s)) || s);
+  return t && s && v(i, o, s), s;
+};
+let r = class extends u {
+  constructor() {
+    super(...arguments), this.directory = null, this.selectedAddress = null, this.searchQuery = "", this.addresses = [], this.loading = !1, this.hasMore = !1, this.subscriptions = [], this.searchDebounceTimer = null, this.intersectionObserver = null, this.isAutoLoadingForSearch = !1;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.subscribeToDirectory();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.cleanup();
+  }
+  subscribeToDirectory() {
+    if (this.directory) {
+      if (this.directory.addresses$) {
+        const e = this.directory.addresses$.subscribe((i) => {
+          this.addresses = i;
+        });
+        this.subscriptions.push(e);
+      }
+      if (this.directory.loading$) {
+        const e = this.directory.loading$.subscribe((i) => {
+          this.loading = i;
+        });
+        this.subscriptions.push(e);
+      }
+      if (this.directory.hasMore$) {
+        const e = this.directory.hasMore$.subscribe((i) => {
+          this.hasMore = i;
+        });
+        this.subscriptions.push(e);
+      }
+      this.directory.loadMore && this.directory.loadMore();
+    }
+  }
+  cleanup() {
+    this.subscriptions.forEach((e) => e.unsubscribe()), this.subscriptions = [], this.searchDebounceTimer && clearTimeout(this.searchDebounceTimer), this.intersectionObserver && (this.intersectionObserver.disconnect(), this.intersectionObserver = null);
+  }
+  firstUpdated() {
+    this.setupInfiniteScroll();
+  }
+  setupInfiniteScroll() {
+    var i, o;
+    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".scroll-sentinel");
+    e && (this.intersectionObserver = new IntersectionObserver(
+      (t) => {
+        const s = t[0];
+        s != null && s.isIntersecting && this.hasMore && !this.loading && this.handleLoadMore();
+      },
+      {
+        root: (o = this.shadowRoot) == null ? void 0 : o.querySelector(".list"),
+        rootMargin: "100px",
+        threshold: 0
+      }
+    ), this.intersectionObserver.observe(e));
+  }
+  updated(e) {
+    super.updated(e), e.has("directory") && (this.cleanup(), this.subscribeToDirectory()), this.intersectionObserver || this.setupInfiniteScroll(), (e.has("addresses") || e.has("searchQuery") || e.has("loading")) && this.checkAutoLoadForSearch();
+  }
+  async checkAutoLoadForSearch() {
+    this.searchQuery.trim() && this.filteredAddresses.length === 0 && this.hasMore && !this.loading ? (this.isAutoLoadingForSearch = !0, await this.handleLoadMore()) : (this.filteredAddresses.length > 0 || !this.hasMore) && (this.isAutoLoadingForSearch = !1);
+  }
+  get filteredAddresses() {
+    if (!this.searchQuery.trim())
+      return this.addresses;
+    const e = this.searchQuery.toLowerCase();
+    return this.addresses.filter(
+      (i) => i.name.toLowerCase().includes(e) || i.displayName && i.displayName.toLowerCase().includes(e)
+    );
+  }
+  handleSearchInput(e) {
+    const i = e.target;
+    this.searchDebounceTimer && clearTimeout(this.searchDebounceTimer), this.searchDebounceTimer = window.setTimeout(() => {
+      this.searchQuery = i.value;
+    }, 200);
+  }
+  handleItemClick(e) {
+    this.selectedAddress = e, this.dispatchEvent(
+      new CustomEvent("sw-address-select", {
+        detail: { address: e },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  handleItemDoubleClick(e) {
+    this.handleDial(e);
+  }
+  handleDial(e) {
+    this.dispatchEvent(
+      new CustomEvent("sw-dial", {
+        detail: { address: e },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  async handleLoadMore() {
+    var e;
+    (e = this.directory) != null && e.loadMore && await this.directory.loadMore();
+  }
+  renderAddressIcon(e) {
+    const i = e.type === "room" ? "room" : "person";
+    return a`<sw-ui-icon name=${i} size="20"></sw-ui-icon>`;
+  }
+  renderChannelIcons(e) {
+    const i = e.channels || {};
+    return a`
+      <div class="item-channels">
+        <sw-ui-icon
+          name="mic-on"
+          size="16"
+          class="${i.audio ? "active" : ""}"
+          title="Audio"
+        ></sw-ui-icon>
+        <sw-ui-icon
+          name="camera-on"
+          size="16"
+          class="${i.video ? "active" : ""}"
+          title="Video"
+        ></sw-ui-icon>
+      </div>
+    `;
+  }
+  renderLoadingIndicator() {
+    return a`
+      <div class="scroll-loading">
+        <div class="spinner"></div>
+        <span>${this.isAutoLoadingForSearch ? "Searching..." : "Loading more..."}</span>
+      </div>
+    `;
+  }
+  render() {
+    const e = this.loading && this.addresses.length === 0, i = !this.loading && this.filteredAddresses.length === 0 && !this.hasMore, o = this.isAutoLoadingForSearch && this.filteredAddresses.length === 0;
+    return a`
+      <div class="container" part="container">
+        <div class="search" part="search">
+          <input
+            type="text"
+            class="search-input"
+            placeholder="Search addresses..."
+            @input=${this.handleSearchInput}
+            aria-label="Search addresses"
+          />
+        </div>
+
+        <div class="list" part="list" role="listbox">
+          ${e ? a`<div class="loading">Loading...</div>` : o ? this.renderLoadingIndicator() : i ? a`<div class="empty">No addresses found</div>` : a`
+                    ${this.filteredAddresses.map(
+      (t) => {
+        var s, c, d;
+        return a`
+                        <div
+                          class="item ${((s = this.selectedAddress) == null ? void 0 : s.id) === t.id ? "selected" : ""}"
+                          part="item ${((c = this.selectedAddress) == null ? void 0 : c.id) === t.id ? "item-selected" : ""}"
+                          role="option"
+                          aria-selected="${((d = this.selectedAddress) == null ? void 0 : d.id) === t.id}"
+                          @click=${() => this.handleItemClick(t)}
+                          @dblclick=${() => this.handleItemDoubleClick(t)}
+                        >
+                          <div class="item-icon">${this.renderAddressIcon(t)}</div>
+                          <div class="item-content">
+                            <div class="item-name" part="item-name">
+                              ${t.displayName || t.name}
+                            </div>
+                            <div class="item-type" part="item-type">
+                              ${t.type || "address"}
+                            </div>
+                          </div>
+                          ${this.renderChannelIcons(t)}
+                          <button
+                            class="dial-button"
+                            @click=${(h) => {
+          h.stopPropagation(), this.handleDial(t);
+        }}
+                            aria-label="Call ${t.displayName || t.name}"
+                          >
+                            <sw-ui-icon name="phone-call" size="18"></sw-ui-icon>
+                          </button>
+                        </div>
+                      `;
+      }
+    )}
+                    <!-- Scroll sentinel for infinite scroll -->
+                    <div class="scroll-sentinel">
+                      ${this.loading && !this.isAutoLoadingForSearch ? this.renderLoadingIndicator() : null}
+                    </div>
+                  `}
+        </div>
+      </div>
+    `;
+  }
+};
+r.styles = p`
+    :host {
+      display: block;
+      font-family: var(--type-family-body);
+      color: var(--fg-default);
+    }
+
+    .container {
+      display: flex;
+      flex-direction: column;
+      background: var(--bg-surface);
+      border: 1px solid var(--border-default);
+      border-radius: var(--radius-md);
+      overflow: hidden;
+    }
+
+    .search {
+      display: flex;
+      align-items: center;
+      gap: var(--sp-2);
+      padding: var(--sp-3);
+      border-bottom: 1px solid var(--border-default);
+    }
+
+    .search-input {
+      flex: 1;
+      padding: var(--sp-2) var(--sp-3);
+      border: 1px solid var(--border-default);
+      border-radius: var(--radius-md);
+      background: var(--bg-surface);
+      color: var(--fg-default);
+      font-family: var(--type-family-body);
+      font-size: var(--type-size-small);
+      outline: none;
+      transition: border-color 0.15s ease;
+    }
+
+    .search-input:focus {
+      border-color: var(--interactive-button-primary-bg);
+    }
+
+    .search-input::placeholder {
+      color: var(--fg-muted);
+    }
+
+    .list {
+      display: flex;
+      flex-direction: column;
+      max-height: 400px;
+      overflow-y: auto;
+    }
+
+    .item {
+      display: flex;
+      align-items: center;
+      gap: var(--sp-3);
+      padding: var(--sp-3) var(--sp-4);
+      border-bottom: 1px solid var(--border-default);
+      cursor: pointer;
+      transition: background-color 0.15s ease;
+    }
+
+    .item:last-child {
+      border-bottom: none;
+    }
+
+    .item:hover {
+      background: var(--bg-surface-raised);
+    }
+
+    .item:active {
+      background: var(--interactive-dropdown-hover);
+    }
+
+    .item.selected {
+      background: var(--interactive-button-primary-bg);
+      color: white;
+    }
+
+    .item.selected .item-type,
+    .item.selected .item-channels {
+      color: rgba(255, 255, 255, 0.8);
+    }
+
+    .item-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: var(--bg-surface-raised);
+      color: var(--fg-muted);
+      flex-shrink: 0;
+    }
+
+    .item.selected .item-icon {
+      background: rgba(255, 255, 255, 0.2);
+      color: white;
+    }
+
+    .item-icon svg,
+    .item-icon sw-ui-icon {
+      width: 20px;
+      height: 20px;
+    }
+
+    .item-content {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .item-name {
+      font-size: var(--type-size-small);
+      font-weight: 500;
+      color: inherit;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .item-type {
+      font-size: var(--type-size-caption);
+      color: var(--fg-muted);
+      text-transform: capitalize;
+    }
+
+    .item-channels {
+      display: flex;
+      gap: var(--sp-1);
+      color: var(--fg-muted);
+    }
+
+    .item-channels sw-ui-icon {
+      width: 16px;
+      height: 16px;
+    }
+
+    .item-channels sw-ui-icon.active {
+      color: var(--interactive-status-success);
+    }
+
+    .loading,
+    .empty {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: var(--sp-4);
+      color: var(--fg-muted);
+      font-size: var(--type-size-small);
+    }
+
+    .scroll-sentinel {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: var(--sp-3);
+      min-height: 1px;
+    }
+
+    .scroll-loading {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--sp-2);
+      padding: var(--sp-3);
+      color: var(--fg-muted);
+      font-size: var(--type-size-caption);
+    }
+
+    .spinner {
+      width: 16px;
+      height: 16px;
+      border: 2px solid var(--border-default);
+      border-top-color: var(--interactive-button-primary-bg);
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    .dial-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 36px;
+      height: 36px;
+      background: var(--interactive-status-success);
+      border: none;
+      border-radius: 50%;
+      color: white;
+      cursor: pointer;
+      flex-shrink: 0;
+      transition: background-color 0.15s ease;
+    }
+
+    .dial-button:hover {
+      background: #0ea472;
+    }
+
+    .dial-button sw-ui-icon {
+      pointer-events: none;
+    }
+  `;
+n([
+  m({ type: Object })
+], r.prototype, "directory", 2);
+n([
+  l()
+], r.prototype, "selectedAddress", 2);
+n([
+  l()
+], r.prototype, "searchQuery", 2);
+n([
+  l()
+], r.prototype, "addresses", 2);
+n([
+  l()
+], r.prototype, "loading", 2);
+n([
+  l()
+], r.prototype, "hasMore", 2);
+n([
+  l()
+], r.prototype, "isAutoLoadingForSearch", 2);
+r = n([
+  b("sw-directory")
+], r);
+export {
+  r as SwDirectory
+};
+//# sourceMappingURL=sw-directory.js.map

package/dist/components/sw-directory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-directory.js","sources":["../../src/components/sw-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 [--interactive-button-primary-bg=#044ef4] - Primary brand color\n * @cssprop [--interactive-button-primary-hover=#0342cf] - Primary color on hover\n * @cssprop [--interactive-status-success=#22c55e] - Success/positive color\n * @cssprop [--fg-default=#f0f0f4] - Primary text color\n * @cssprop [--fg-muted=#a0a0aa] - Secondary/muted text color\n * @cssprop [--bg-surface=#181a28] - Component background color\n * @cssprop [--bg-surface-raised=#222436] - Background color on hover\n * @cssprop [--interactive-dropdown-hover=#333338] - Background color on active/press\n * @cssprop [--border-default=rgba(255,255,255,0.12)] - Border color\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';\nimport './UI/icons/sw-ui-icon.js';\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 SwDirectory extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      font-family: var(--type-family-body);\n      color: var(--fg-default);\n    }\n\n    .container {\n      display: flex;\n      flex-direction: column;\n      background: var(--bg-surface);\n      border: 1px solid var(--border-default);\n      border-radius: var(--radius-md);\n      overflow: hidden;\n    }\n\n    .search {\n      display: flex;\n      align-items: center;\n      gap: var(--sp-2);\n      padding: var(--sp-3);\n      border-bottom: 1px solid var(--border-default);\n    }\n\n    .search-input {\n      flex: 1;\n      padding: var(--sp-2) var(--sp-3);\n      border: 1px solid var(--border-default);\n      border-radius: var(--radius-md);\n      background: var(--bg-surface);\n      color: var(--fg-default);\n      font-family: var(--type-family-body);\n      font-size: var(--type-size-small);\n      outline: none;\n      transition: border-color 0.15s ease;\n    }\n\n    .search-input:focus {\n      border-color: var(--interactive-button-primary-bg);\n    }\n\n    .search-input::placeholder {\n      color: var(--fg-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(--sp-3);\n      padding: var(--sp-3) var(--sp-4);\n      border-bottom: 1px solid var(--border-default);\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(--bg-surface-raised);\n    }\n\n    .item:active {\n      background: var(--interactive-dropdown-hover);\n    }\n\n    .item.selected {\n      background: var(--interactive-button-primary-bg);\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(--bg-surface-raised);\n      color: var(--fg-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    .item-icon sw-ui-icon {\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(--type-size-small);\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(--type-size-caption);\n      color: var(--fg-muted);\n      text-transform: capitalize;\n    }\n\n    .item-channels {\n      display: flex;\n      gap: var(--sp-1);\n      color: var(--fg-muted);\n    }\n\n    .item-channels sw-ui-icon {\n      width: 16px;\n      height: 16px;\n    }\n\n    .item-channels sw-ui-icon.active {\n      color: var(--interactive-status-success);\n    }\n\n    .loading,\n    .empty {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: var(--sp-4);\n      color: var(--fg-muted);\n      font-size: var(--type-size-small);\n    }\n\n    .scroll-sentinel {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: var(--sp-3);\n      min-height: 1px;\n    }\n\n    .scroll-loading {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: var(--sp-2);\n      padding: var(--sp-3);\n      color: var(--fg-muted);\n      font-size: var(--type-size-caption);\n    }\n\n    .spinner {\n      width: 16px;\n      height: 16px;\n      border: 2px solid var(--border-default);\n      border-top-color: var(--interactive-button-primary-bg);\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(--interactive-status-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 sw-ui-icon {\n      pointer-events: none;\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    const name = address.type === 'room' ? 'room' : 'person';\n    return html`<sw-ui-icon name=${name} size=\"20\"></sw-ui-icon>`;\n  }\n\n  private renderChannelIcons(address: Address) {\n    const channels = address.channels || {};\n    return html`\n      <div class=\"item-channels\">\n        <sw-ui-icon\n          name=\"mic-on\"\n          size=\"16\"\n          class=\"${channels.audio ? 'active' : ''}\"\n          title=\"Audio\"\n        ></sw-ui-icon>\n        <sw-ui-icon\n          name=\"camera-on\"\n          size=\"16\"\n          class=\"${channels.video ? 'active' : ''}\"\n          title=\"Video\"\n        ></sw-ui-icon>\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                            <sw-ui-icon name=\"phone-call\" size=\"18\"></sw-ui-icon>\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': SwDirectory;\n  }\n}\n"],"names":["SwDirectory","LitElement","addressesSub","addresses","loadingSub","loading","hasMoreSub","hasMore","sub","sentinel","_a","entries","entry","_b","changedProperties","query","addr","input","address","name","html","channels","showInitialLoading","showEmptyState","showSearchingState","_c","e","css","__decorateClass","property","state","customElement"],"mappings":";;;;;;;AAyDO,IAAMA,IAAN,cAA0BC,EAAW;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA,GAsNL,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,UAAMC,IAAOD,EAAQ,SAAS,SAAS,SAAS;AAChD,WAAOE,qBAAwBD,CAAI;AAAA,EACrC;AAAA,EAEQ,mBAAmBD,GAAkB;AAC3C,UAAMG,IAAWH,EAAQ,YAAY,CAAA;AACrC,WAAOE;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKQC,EAAS,QAAQ,WAAW,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAM9BA,EAAS,QAAQ,WAAW,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,EAK/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,CAACF,MAAA;;AAAY,eAAAE;AAAA;AAAA,0CAEKV,IAAA,KAAK,oBAAL,gBAAAA,EAAsB,QAAOQ,EAAQ,KAAK,aAAa,EAAE;AAAA,yCAC1DL,IAAA,KAAK,oBAAL,gBAAAA,EAAsB,QAAOK,EAAQ,KAC9C,kBACA,EAAE;AAAA;AAAA,6CAEWO,IAAA,KAAK,oBAAL,gBAAAA,EAAsB,QAAOP,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,CAACQ,MAAa;AACrB,UAAAA,EAAE,gBAAA,GACF,KAAK,WAAWR,CAAO;AAAA,QACzB,CAAC;AAAA,+CACkBA,EAAQ,eAAeA,EAAQ,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA,CAM7D;AAAA;AAAA;AAAA,wBAGG,KAAK,WAAW,CAAC,KAAK,yBACpB,KAAK,uBAAA,IACL,IAAI;AAAA;AAAA,mBAEX;AAAA;AAAA;AAAA;AAAA,EAIjB;AACF;AAviBalB,EACJ,SAAS2B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqNhBC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GArNf7B,EAsNX,WAAA,aAAA,CAAA;AAMQ4B,EAAA;AAAA,EADPE,EAAA;AAAM,GA3NI9B,EA4NH,WAAA,mBAAA,CAAA;AAMA4B,EAAA;AAAA,EADPE,EAAA;AAAM,GAjOI9B,EAkOH,WAAA,eAAA,CAAA;AAMA4B,EAAA;AAAA,EADPE,EAAA;AAAM,GAvOI9B,EAwOH,WAAA,aAAA,CAAA;AAMA4B,EAAA;AAAA,EADPE,EAAA;AAAM,GA7OI9B,EA8OH,WAAA,WAAA,CAAA;AAMA4B,EAAA;AAAA,EADPE,EAAA;AAAM,GAnPI9B,EAoPH,WAAA,WAAA,CAAA;AAqBA4B,EAAA;AAAA,EADPE,EAAA;AAAM,GAxQI9B,EAyQH,WAAA,0BAAA,CAAA;AAzQGA,IAAN4B,EAAA;AAAA,EADNG,EAAc,cAAc;AAAA,GAChB/B,CAAA;"}

package/dist/components/sw-local-camera.d.ts

@@ -0,0 +1,53 @@
+import { LitElement } from 'lit';
+import type { Call } from '../types/index.js';
+import './UI/icons/sw-ui-icon.js';
+/**
+ * Local camera preview. Adapts its aspect-ratio to match the actual
+ * video track (landscape or portrait).
+ *
+ * Input precedence : `.stream`/`.videoMuted` > `.call` > context.
+ *
+ * @prop {MediaStream|null} stream     - explicit stream (overrides .call and context)
+ * @prop {boolean}          videoMuted - explicit muted flag (overrides context)
+ * @prop {Call}             call       - explicit Call object (overrides context)
+ * @prop {boolean}          mirror     - mirror the video horizontally
+ *
+ * @csspart video       - The `<video>` element.
+ * @csspart placeholder - Camera-off overlay shown while muted.
+ *
+ * @cssprop [--sw-local-camera-aspect=16/9] - Aspect ratio; auto-set from track settings when available.
+ */
+export declare class SwLocalCamera extends LitElement {
+    /** Explicit stream — highest precedence. */
+    stream: MediaStream | null;
+    /** Explicit muted flag — overrides devicesContext.videoMuted. */
+    videoMuted?: boolean;
+    /** Explicit Call — used when `.stream` is not set. Bypasses context. */
+    call?: Call;
+    mirror: boolean;
+    private _callState?;
+    private _devicesState?;
+    private _directLocalStream;
+    private _directSubscriptions;
+    /** Detected aspect ratio from the video track, e.g. "16 / 9" or "9 / 16". */
+    private _aspectRatio;
+    /** Last stream reference attached to the video element — used to skip no-op re-attaches. */
+    private _attachedStream;
+    static styles: import("lit").CSSResult;
+    private get _effectiveStream();
+    private get _effectiveMuted();
+    protected firstUpdated(): void;
+    protected updated(changedProperties: Map<string, unknown>): void;
+    disconnectedCallback(): void;
+    private _setupDirect;
+    private _teardownDirect;
+    /** Read the video track settings and set the CSS custom property. */
+    private _detectAspectRatio;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sw-local-camera': SwLocalCamera;
+    }
+}
+//# sourceMappingURL=sw-local-camera.d.ts.map

package/dist/components/sw-local-camera.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-local-camera.d.ts","sourceRoot":"","sources":["../../src/components/sw-local-camera.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAO5C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,0BAA0B,CAAC;AAElC;;;;;;;;;;;;;;;GAeG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,4CAA4C;IACZ,MAAM,EAAE,WAAW,GAAG,IAAI,CAAQ;IAElE,iEAAiE;IACK,UAAU,CAAC,EAAE,OAAO,CAAC;IAE3F,wEAAwE;IAC5C,IAAI,CAAC,EAAE,IAAI,CAAC;IAEI,MAAM,UAAS;IAI3D,OAAO,CAAC,UAAU,CAAC,CAAY;IAI/B,OAAO,CAAC,aAAa,CAAC,CAAe;IAE5B,OAAO,CAAC,kBAAkB,CAA4B;IAE/D,OAAO,CAAC,oBAAoB,CAAsB;IAElD,6EAA6E;IACpE,OAAO,CAAC,YAAY,CAAY;IAEzC,4FAA4F;IAC5F,OAAO,CAAC,eAAe,CAA4B;IAEnD,MAAM,CAAC,MAAM,0BAoCX;IAEF,OAAO,KAAK,gBAAgB,GAI3B;IAED,OAAO,KAAK,eAAe,GAE1B;IAED,SAAS,CAAC,YAAY,IAAI,IAAI;IAa9B,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IA8ChE,oBAAoB,IAAI,IAAI;IAO5B,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,eAAe;IAMvB,qEAAqE;IACrE,OAAO,CAAC,kBAAkB;IAiB1B,MAAM;CAUP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/components/sw-local-camera.js

@@ -0,0 +1,147 @@
+import { LitElement as p, html as n, css as m } from "lit";
+import { property as l, state as d, customElement as f } from "lit/decorators.js";
+import { consume as h } from "@lit/context";
+import { attachMediaStream as v, detachMediaStream as _ } from "../utils/video.js";
+import { callStateContext as S } from "../context/call-state-context.js";
+import { devicesContext as b } from "../context/devices-context.js";
+var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, c = (t, e, s, r) => {
+  for (var i = r > 1 ? void 0 : r ? w(e, s) : e, o = t.length - 1, u; o >= 0; o--)
+    (u = t[o]) && (i = (r ? u(e, s, i) : u(i)) || i);
+  return r && i && y(e, s, i), i;
+};
+let a = class extends p {
+  constructor() {
+    super(...arguments), this.stream = null, this.mirror = !1, this._directLocalStream = null, this._directSubscriptions = [], this._aspectRatio = "16 / 9", this._attachedStream = null;
+  }
+  get _effectiveStream() {
+    var t;
+    return this.stream ? this.stream : this.call ? this._directLocalStream : ((t = this._callState) == null ? void 0 : t.localStream) ?? null;
+  }
+  get _effectiveMuted() {
+    var t;
+    return this.videoMuted ?? ((t = this._devicesState) == null ? void 0 : t.videoMuted) ?? !1;
+  }
+  firstUpdated() {
+    var e;
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("video");
+    t && t.addEventListener("pause", () => {
+      this._effectiveMuted || t.play().catch(() => {
+      });
+    });
+  }
+  updated(t) {
+    var r, i;
+    super.updated(t), t.has("call") && (this._teardownDirect(), this.call && this._setupDirect(this.call));
+    const e = this._effectiveStream, s = t.has("stream") || t.has("call") || t.has("_directLocalStream") || t.has("_callState") && e !== this._attachedStream;
+    if (s) {
+      const o = (r = this.shadowRoot) == null ? void 0 : r.querySelector("video");
+      o && (this._attachedStream = e, v(o, e), this._detectAspectRatio());
+    }
+    if ((t.has("videoMuted") || t.has("_devicesState") || s) && !this._effectiveMuted) {
+      const o = (i = this.shadowRoot) == null ? void 0 : i.querySelector("video");
+      o && o.play().catch(() => {
+      });
+    }
+  }
+  disconnectedCallback() {
+    var e;
+    super.disconnectedCallback();
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("video");
+    t && _(t), this._teardownDirect();
+  }
+  _setupDirect(t) {
+    this._directSubscriptions.push(
+      t.localStream$.subscribe((e) => this._directLocalStream = e)
+    );
+  }
+  _teardownDirect() {
+    this._directSubscriptions.forEach((t) => t.unsubscribe()), this._directSubscriptions = [], this._directLocalStream = null;
+  }
+  /** Read the video track settings and set the CSS custom property. */
+  _detectAspectRatio() {
+    const t = this._effectiveStream;
+    if (!t) return;
+    const e = t.getVideoTracks()[0];
+    if (!e) return;
+    const s = e.getSettings(), r = s.width, i = s.height;
+    r && i && r > 0 && i > 0 && (this._aspectRatio = `${r} / ${i}`, this.style.setProperty("--sw-local-camera-aspect", this._aspectRatio));
+  }
+  render() {
+    return n`
+      <video part="video" autoplay playsinline muted></video>
+      ${this._effectiveMuted ? n`<div part="placeholder" class="muted-overlay">
+            <sw-ui-icon name="camera-off" size="28"></sw-ui-icon>
+          </div>` : null}
+    `;
+  }
+};
+a.styles = m`
+    :host {
+      display: block;
+      width: 100%;
+      aspect-ratio: var(--sw-local-camera-aspect, 16 / 9);
+      position: relative;
+      background: #000;
+      border-radius: inherit;
+    }
+
+    video {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+      border-radius: inherit;
+    }
+
+    :host([mirror]) video {
+      transform: scaleX(-1);
+    }
+
+    .muted-overlay {
+      position: absolute;
+      inset: 0;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--bg-page);
+      border-radius: inherit;
+    }
+
+    .muted-overlay sw-ui-icon {
+      color: var(--bg-surface-raised);
+    }
+  `;
+c([
+  l({ attribute: !1 })
+], a.prototype, "stream", 2);
+c([
+  l({ type: Boolean, reflect: !0, attribute: "video-muted" })
+], a.prototype, "videoMuted", 2);
+c([
+  l({ type: Object })
+], a.prototype, "call", 2);
+c([
+  l({ type: Boolean, reflect: !0 })
+], a.prototype, "mirror", 2);
+c([
+  h({ context: S, subscribe: !0 }),
+  d()
+], a.prototype, "_callState", 2);
+c([
+  h({ context: b, subscribe: !0 }),
+  d()
+], a.prototype, "_devicesState", 2);
+c([
+  d()
+], a.prototype, "_directLocalStream", 2);
+c([
+  d()
+], a.prototype, "_aspectRatio", 2);
+a = c([
+  f("sw-local-camera")
+], a);
+export {
+  a as SwLocalCamera
+};
+//# sourceMappingURL=sw-local-camera.js.map