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

package/dist/components/sw-device-selector/sw-device-selector.js

@@ -0,0 +1,277 @@
+import { LitElement as v, nothing as l, html as n } from "lit";
+import { property as p, state as c, customElement as m } from "lit/decorators.js";
+import { getLogger as b } from "@signalwire/js";
+import { deviceSelectorStyles as w } from "./sw-device-selector.styles.js";
+var k = Object.defineProperty, I = Object.getOwnPropertyDescriptor, a = (e, i, t, s) => {
+  for (var o = s > 1 ? void 0 : s ? I(i, t) : i, h = e.length - 1, d; h >= 0; h--)
+    (d = e[h]) && (o = (s ? d(i, t, o) : d(o)) || o);
+  return s && o && k(i, t, o), o;
+};
+const u = b();
+let r = class extends v {
+  constructor() {
+    super(...arguments), this.showPreview = !1, this._videoStream = null, this._audioStream = null, this._testingSpeaker = !1, this._audioIn = [], this._videoIn = [], this._audioOut = [], this._selAudioIn = null, this._selVideoIn = null, this._selAudioOut = null, this._open = !1, this._subs = [], this._onDocumentClick = (e) => {
+      e.composedPath().includes(this) || (this._open = !1);
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this._onDocumentClick), this._subscribe();
+  }
+  updated(e) {
+    super.updated(e), e.has("deviceController") && (this._unsubscribe(), this._subscribe());
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this._onDocumentClick), this._unsubscribe(), this._stopVideoPreview(), this._stopAudioPreview(), this._stopTestTone();
+  }
+  willUpdate(e) {
+    if (!this.showPreview) {
+      (e.has("showPreview") || e.has("_open")) && (this._stopVideoPreview(), this._stopAudioPreview());
+      return;
+    }
+    const i = e.has("_open") && this._open, t = e.has("_open") && !this._open, s = e.has("_selVideoIn"), o = e.has("_selAudioIn");
+    if (t) {
+      this._stopVideoPreview(), this._stopAudioPreview(), this._stopTestTone();
+      return;
+    }
+    this._open && (i || s) && this._selVideoIn && this._startVideoPreview(this._selVideoIn.deviceId), this._open && (i || o) && this._selAudioIn && this._startAudioPreview(this._selAudioIn.deviceId);
+  }
+  // ── subscriptions ──────────────────────────────────────────────────
+  _subscribe() {
+    const e = this.deviceController;
+    e && (this._subs.push(e.audioInputDevices$.subscribe((i) => {
+      this._audioIn = i;
+    })), this._subs.push(e.videoInputDevices$.subscribe((i) => {
+      this._videoIn = i;
+    })), this._subs.push(e.audioOutputDevices$.subscribe((i) => {
+      this._audioOut = i;
+    })), e.selectedAudioInputDevice$ && this._subs.push(e.selectedAudioInputDevice$.subscribe((i) => {
+      this._selAudioIn = i;
+    })), e.selectedVideoInputDevice$ && this._subs.push(e.selectedVideoInputDevice$.subscribe((i) => {
+      this._selVideoIn = i;
+    })), e.selectedAudioOutputDevice$ && this._subs.push(e.selectedAudioOutputDevice$.subscribe((i) => {
+      this._selAudioOut = i;
+    })));
+  }
+  _unsubscribe() {
+    this._subs.forEach((e) => e.unsubscribe()), this._subs = [];
+  }
+  // ── handlers ──────────────────────────────────────────────────────
+  _toggle(e) {
+    e.stopPropagation(), this._open = !this._open;
+  }
+  _selectMic(e) {
+    var t, s;
+    const i = this._audioIn.find((o) => o.deviceId === e) ?? null;
+    this._selAudioIn = i, (s = (t = this.deviceController) == null ? void 0 : t.selectAudioInputDevice) == null || s.call(t, i), i && this._emitChange("microphone", i);
+  }
+  _selectCamera(e) {
+    var t, s;
+    const i = this._videoIn.find((o) => o.deviceId === e) ?? null;
+    this._selVideoIn = i, (s = (t = this.deviceController) == null ? void 0 : t.selectVideoInputDevice) == null || s.call(t, i), i && this._emitChange("camera", i);
+  }
+  _selectSpeaker(e) {
+    var t, s;
+    const i = this._audioOut.find((o) => o.deviceId === e) ?? null;
+    this._selAudioOut = i, (s = (t = this.deviceController) == null ? void 0 : t.selectAudioOutputDevice) == null || s.call(t, i), i && this._emitChange("speaker", i);
+  }
+  // ── preview streams ───────────────────────────────────────────────
+  async _startVideoPreview(e) {
+    this._stopVideoPreview();
+    try {
+      this._videoStream = await navigator.mediaDevices.getUserMedia({
+        video: { deviceId: { exact: e } }
+      });
+    } catch (i) {
+      u.error("sw-device-selector: failed to start camera preview", i), this._videoStream = null;
+    }
+  }
+  _stopVideoPreview() {
+    var e;
+    (e = this._videoStream) == null || e.getTracks().forEach((i) => i.stop()), this._videoStream = null;
+  }
+  async _startAudioPreview(e) {
+    this._stopAudioPreview();
+    try {
+      this._audioStream = await navigator.mediaDevices.getUserMedia({
+        audio: { deviceId: { exact: e } }
+      });
+    } catch (i) {
+      u.error("sw-device-selector: failed to start microphone preview", i), this._audioStream = null;
+    }
+  }
+  _stopAudioPreview() {
+    var e;
+    (e = this._audioStream) == null || e.getTracks().forEach((i) => i.stop()), this._audioStream = null;
+  }
+  async _testSpeaker() {
+    var t;
+    if (this._testingSpeaker) {
+      this._stopTestTone();
+      return;
+    }
+    const e = new Audio(r._TEST_TONE_DATA_URI);
+    e.loop = !0, this._testAudio = e;
+    const i = (t = this._selAudioOut) == null ? void 0 : t.deviceId;
+    if (i && typeof e.setSinkId == "function")
+      try {
+        await e.setSinkId(i);
+      } catch (s) {
+        u.error("sw-device-selector: setSinkId failed", s);
+      }
+    e.addEventListener("ended", () => this._stopTestTone());
+    try {
+      await e.play(), this._testingSpeaker = !0;
+    } catch (s) {
+      u.error("sw-device-selector: failed to play test tone", s), this._stopTestTone();
+    }
+  }
+  _stopTestTone() {
+    this._testAudio && (this._testAudio.pause(), this._testAudio.src = "", this._testAudio = void 0), this._testingSpeaker = !1;
+  }
+  _emitChange(e, i) {
+    this.dispatchEvent(new CustomEvent("sw-device-change", {
+      detail: { type: e, device: i },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  // ── render helpers ────────────────────────────────────────────────
+  _renderSection(e, i, t, s, o, h) {
+    return n`
+      <div class="section">
+        <div class="section-header">
+          <sw-ui-icon name=${e} size="13"></sw-ui-icon>
+          <span>${i}</span>
+        </div>
+        ${t.length === 0 ? n`<div class="no-devices">No devices found</div>` : t.map((d, _) => n`
+              <div
+                class="device-item ${d.deviceId === s ? "selected" : ""}"
+                role="option"
+                aria-selected=${d.deviceId === s}
+                @click=${() => o(d.deviceId)}
+              >
+                <svg class="check" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+                  <path d="M6.5 12L2 7.5l1.4-1.4 3.1 3.1 5.6-5.6 1.4 1.4z" />
+                </svg>
+                <span class="device-label">${d.label || `Device ${_ + 1}`}</span>
+              </div>
+            `)}
+        ${h ?? l}
+      </div>
+    `;
+  }
+  _renderCameraPreview() {
+    return this.showPreview ? n`
+      <div class="preview preview-camera" part="preview-camera">
+        ${this._videoStream ? n`<sw-local-camera .stream=${this._videoStream} mirror></sw-local-camera>` : n`<div class="preview-empty">Starting camera…</div>`}
+      </div>
+    ` : null;
+  }
+  _renderMicPreview() {
+    return this.showPreview ? n`
+      <div class="preview preview-mic" part="preview-mic">
+        ${this._audioStream ? n`<sw-audio-level
+              .stream=${this._audioStream}
+              bars="9"
+              orientation="horizontal"
+              maxSize="22"
+            ></sw-audio-level>` : n`<div class="preview-empty">Starting microphone…</div>`}
+      </div>
+    ` : null;
+  }
+  _renderSpeakerPreview() {
+    return this.showPreview ? n`
+      <div class="preview preview-speaker" part="preview-speaker">
+        <button
+          class="test-speaker"
+          part="test-speaker-button"
+          ?disabled=${!this._selAudioOut}
+          @click=${(e) => {
+      e.stopPropagation(), this._testSpeaker();
+    }}
+        >
+          <sw-ui-icon name=${this._testingSpeaker ? "speaker-off" : "speaker-on"} size="14"></sw-ui-icon>
+          <span>${this._testingSpeaker ? "Stop test" : "Test speaker"}</span>
+        </button>
+      </div>
+    ` : null;
+  }
+  // ── render ─────────────────────────────────────────────────────────
+  render() {
+    var i, t, s;
+    const e = this._audioIn.length > 0 || this._videoIn.length > 0 || this._audioOut.length > 0;
+    return n`
+      ${this._open ? n`
+        <div
+          class="panel"
+          role="listbox"
+          @keydown=${(o) => {
+      o.key === "Escape" && (this._open = !1);
+    }}
+        >
+          ${this._renderSection("mic-on", "Microphone", this._audioIn, (i = this._selAudioIn) == null ? void 0 : i.deviceId, (o) => this._selectMic(o), this._renderMicPreview())}
+          ${this._renderSection("camera-on", "Camera", this._videoIn, (t = this._selVideoIn) == null ? void 0 : t.deviceId, (o) => this._selectCamera(o), this._renderCameraPreview())}
+          ${this._renderSection("speaker-on", "Speaker", this._audioOut, (s = this._selAudioOut) == null ? void 0 : s.deviceId, (o) => this._selectSpeaker(o), this._renderSpeakerPreview())}
+        </div>
+      ` : l}
+
+      <button
+        class="trigger"
+        aria-label="Device settings"
+        aria-expanded=${this._open}
+        aria-haspopup="listbox"
+        ?disabled=${!e}
+        @click=${this._toggle}
+        part="button"
+      >
+        <sw-ui-icon name="settings" size="22"></sw-ui-icon>
+      </button>
+      <span class="label">Devices</span>
+    `;
+  }
+};
+r.styles = w;
+r._TEST_TONE_DATA_URI = "data:audio/wav;base64,UklGRrQEAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YZAEAACAh46Sl5qcm5mWko2HgXp1cGxqaWlsb3R5gIaNk5icnp2bl5OOiIJ8dnFtamhoam1xdnyChI+VmZ2enZqXkoyGgHt1cG1qaGhrbnJ4foSLkZianp6cmZWQioR+eHJuamloam1xdnyChI+VmZ2enZqXkoyGgHt1cG1qaGhrbnJ4foSLkZianp6cmZWQioR+eHJuamloam1xdnyChI+VmZ2enZqXkoyGgHt1cG1qaGhrbnJ4foSLkZianp6cmZWQioR+eHJuamloam1xdnyChI+VmZ2enZqXkoyGgHt1cG1qaGhrbnJ4foSLkZianp6cmZWQioR+eHJuamloam1xdnyChI+VmZ2enZqXkoyGgHt1cG1qaGhrbnJ4foSLkZianp6cmZWQioR+eHJuamloam1xdnyChI+VmZ2enZqXkoyGgHt1cG1qaGhrbnJ4foSLkZianp6cmZWQioR+eHJuamloam1xdnyChI+VmZ2enZqXkoyGgHt1cG1qaGhrbnJ4foSLkZianp6cmZWQioR+eHJuamloam1xdnyChI+VmZ2enZqXkoyGgHt1cG1qaGhrbnJ4foSLkZianp6cmZWQioR+eHJuamloam1xdnyChI+VmZ2enZqXkoyGgHt1cG1qaGhrbnJ4foSLkZianp6cmZWQioR+eHJuamloam1xdnyChI+VmZ2enZqXkoyGgHt1cG1qaGhrbnJ4foSLkZianp6cmZWQioR+eHJuamloam1xdnyChI+VmZ2enZqXkoyGgHt1cG1qaGhrbnJ4foSLkZianp6cmZWQioR+eHJuamloam1xdnyChI+VmZ2enZqXkoyGgHt1cG1qaGhrbnJ4foSLkZianp6cmZWQioR+eHJuamloam1xdnyChI+VmZ2enZqXkoyGgHt1cG1qaGhrbnJ4foSLkZianp6cmZWQioR+eHJuamloam1xdnyChI+VmZ2enZqXkoyGgHt1cG1qaGhrbnJ4foSLkZianp6cmZWQioR+eHJuamloam1xdnyChI+VmZ2enZqXkoyGgHt1cG1qaGhrbnJ4foSLkZianp6cmZWQioR+eHJuamloam1xdnyChI+VmZ2enZqXkoyGgHt1cG1qaGhrbnJ4foSLkZianp6cmZWQioR+eHJuamlo";
+a([
+  p({ type: Object })
+], r.prototype, "deviceController", 2);
+a([
+  p({ type: Boolean, reflect: !0, attribute: "show-preview" })
+], r.prototype, "showPreview", 2);
+a([
+  c()
+], r.prototype, "_videoStream", 2);
+a([
+  c()
+], r.prototype, "_audioStream", 2);
+a([
+  c()
+], r.prototype, "_testingSpeaker", 2);
+a([
+  c()
+], r.prototype, "_audioIn", 2);
+a([
+  c()
+], r.prototype, "_videoIn", 2);
+a([
+  c()
+], r.prototype, "_audioOut", 2);
+a([
+  c()
+], r.prototype, "_selAudioIn", 2);
+a([
+  c()
+], r.prototype, "_selVideoIn", 2);
+a([
+  c()
+], r.prototype, "_selAudioOut", 2);
+a([
+  c()
+], r.prototype, "_open", 2);
+r = a([
+  m("sw-device-selector")
+], r);
+export {
+  r as SwDeviceSelector
+};
+//# sourceMappingURL=sw-device-selector.js.map

package/dist/components/sw-device-selector/sw-device-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-device-selector.js","sources":["../../../src/components/sw-device-selector/sw-device-selector.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { Subscription } from 'rxjs';\nimport type { DeviceController } from '@signalwire/js';\nimport { getLogger } from '@signalwire/js';\nimport type { IconName } from '../UI/icons/icons.js';\nimport { deviceSelectorStyles } from './sw-device-selector.styles.js';\nimport '../UI/icons/sw-ui-icon.js';\nimport '../sw-local-camera.js';\nimport '../sw-audio-level.js';\n\nconst logger = getLogger();\n\ntype AudioElementWithSinkId = HTMLAudioElement & {\n  setSinkId?: (sinkId: string) => Promise<void>;\n};\n\n/**\n * Single-button device settings popover. Opens a panel above the button\n * with sections for Microphone, Camera, and Speaker selection.\n *\n * When `show-preview` is enabled, the open panel also renders a live\n * camera preview, a microphone level meter for the currently selected\n * input devices, and a \"Test speaker\" button that plays a short tone\n * through the selected output.\n *\n * @fires sw-device-change - User picked a device. Detail: `{ type: 'microphone'|'camera'|'speaker', device: MediaDeviceInfo }`.\n * @cssprop --ctrl-*  - all primitive ctrl tokens\n */\n@customElement('sw-device-selector')\nexport class SwDeviceSelector extends LitElement {\n  static styles = deviceSelectorStyles;\n\n  @property({ type: Object }) deviceController?: DeviceController;\n\n  /**\n   * Render inline previews (camera video, mic level, speaker test) inside\n   * each section while the panel is open. Streams are acquired only while\n   * the panel is open and stopped when it closes.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'show-preview' })\n  showPreview = false;\n\n  @state() private _videoStream: MediaStream | null = null;\n  @state() private _audioStream: MediaStream | null = null;\n  @state() private _testingSpeaker = false;\n\n  @state() private _audioIn: MediaDeviceInfo[] = [];\n  @state() private _videoIn: MediaDeviceInfo[] = [];\n  @state() private _audioOut: MediaDeviceInfo[] = [];\n  @state() private _selAudioIn: MediaDeviceInfo | null = null;\n  @state() private _selVideoIn: MediaDeviceInfo | null = null;\n  @state() private _selAudioOut: MediaDeviceInfo | null = null;\n  @state() private _open = false;\n\n  private _subs: Subscription[] = [];\n\n  private _onDocumentClick = (e: MouseEvent) => {\n    if (!e.composedPath().includes(this)) this._open = false;\n  };\n\n  connectedCallback() {\n    super.connectedCallback();\n    document.addEventListener('click', this._onDocumentClick);\n    this._subscribe();\n  }\n\n  protected updated(changed: Map<string, unknown>): void {\n    super.updated(changed);\n    if (changed.has('deviceController')) {\n      this._unsubscribe();\n      this._subscribe();\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this._onDocumentClick);\n    this._unsubscribe();\n    this._stopVideoPreview();\n    this._stopAudioPreview();\n    this._stopTestTone();\n  }\n\n  protected willUpdate(changed: Map<string, unknown>): void {\n    if (!this.showPreview) {\n      if (changed.has('showPreview') || changed.has('_open')) {\n        this._stopVideoPreview();\n        this._stopAudioPreview();\n      }\n      return;\n    }\n\n    const opened = changed.has('_open') && this._open;\n    const closed = changed.has('_open') && !this._open;\n    const cameraChanged = changed.has('_selVideoIn');\n    const micChanged = changed.has('_selAudioIn');\n\n    if (closed) {\n      this._stopVideoPreview();\n      this._stopAudioPreview();\n      this._stopTestTone();\n      return;\n    }\n\n    if (this._open && (opened || cameraChanged) && this._selVideoIn) {\n      this._startVideoPreview(this._selVideoIn.deviceId);\n    }\n    if (this._open && (opened || micChanged) && this._selAudioIn) {\n      this._startAudioPreview(this._selAudioIn.deviceId);\n    }\n  }\n\n  // ── subscriptions ──────────────────────────────────────────────────\n\n  private _subscribe(): void {\n    const dc = this.deviceController;\n    if (!dc) return;\n\n    this._subs.push(dc.audioInputDevices$.subscribe((d) => { this._audioIn = d; }));\n    this._subs.push(dc.videoInputDevices$.subscribe((d) => { this._videoIn = d; }));\n    this._subs.push(dc.audioOutputDevices$.subscribe((d) => { this._audioOut = d; }));\n\n    if (dc.selectedAudioInputDevice$)\n      this._subs.push(dc.selectedAudioInputDevice$.subscribe((d) => { this._selAudioIn = d; }));\n    if (dc.selectedVideoInputDevice$)\n      this._subs.push(dc.selectedVideoInputDevice$.subscribe((d) => { this._selVideoIn = d; }));\n    if (dc.selectedAudioOutputDevice$)\n      this._subs.push(dc.selectedAudioOutputDevice$.subscribe((d) => { this._selAudioOut = d; }));\n  }\n\n  private _unsubscribe(): void {\n    this._subs.forEach((s) => s.unsubscribe());\n    this._subs = [];\n  }\n\n  // ── handlers ──────────────────────────────────────────────────────\n\n  private _toggle(e: Event) {\n    e.stopPropagation();\n    this._open = !this._open;\n  }\n\n  private _selectMic(deviceId: string) {\n    const device = this._audioIn.find((d) => d.deviceId === deviceId) ?? null;\n    this._selAudioIn = device;\n    this.deviceController?.selectAudioInputDevice?.(device);\n    if (device) this._emitChange('microphone', device);\n  }\n\n  private _selectCamera(deviceId: string) {\n    const device = this._videoIn.find((d) => d.deviceId === deviceId) ?? null;\n    this._selVideoIn = device;\n    this.deviceController?.selectVideoInputDevice?.(device);\n    if (device) this._emitChange('camera', device);\n  }\n\n  private _selectSpeaker(deviceId: string) {\n    const device = this._audioOut.find((d) => d.deviceId === deviceId) ?? null;\n    this._selAudioOut = device;\n    this.deviceController?.selectAudioOutputDevice?.(device);\n    if (device) this._emitChange('speaker', device);\n  }\n\n  // ── preview streams ───────────────────────────────────────────────\n\n  private async _startVideoPreview(deviceId: string): Promise<void> {\n    this._stopVideoPreview();\n    try {\n      this._videoStream = await navigator.mediaDevices.getUserMedia({\n        video: { deviceId: { exact: deviceId } }\n      });\n    } catch (error) {\n      logger.error('sw-device-selector: failed to start camera preview', error);\n      this._videoStream = null;\n    }\n  }\n\n  private _stopVideoPreview(): void {\n    this._videoStream?.getTracks().forEach((t) => t.stop());\n    this._videoStream = null;\n  }\n\n  private async _startAudioPreview(deviceId: string): Promise<void> {\n    this._stopAudioPreview();\n    try {\n      this._audioStream = await navigator.mediaDevices.getUserMedia({\n        audio: { deviceId: { exact: deviceId } }\n      });\n    } catch (error) {\n      logger.error('sw-device-selector: failed to start microphone preview', error);\n      this._audioStream = null;\n    }\n  }\n\n  private _stopAudioPreview(): void {\n    this._audioStream?.getTracks().forEach((t) => t.stop());\n    this._audioStream = null;\n  }\n\n  // ── speaker test ──────────────────────────────────────────────────\n\n  private static readonly _TEST_TONE_DATA_URI =\n    'data:audio/wav;base64,UklGRrQEAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YZAEAACAh46Sl5qcm5mWko2HgXp1cGxqaWlsb3R5gIaNk5icnp2bl5OOiIJ8dnFtamhoam1xdnyChI+VmZ2enZqXkoyGgHt1cG1qaGhrbnJ4foSLkZianp6cmZWQioR+eHJuamloam1xdnyChI+VmZ2enZqXkoyGgHt1cG1qaGhrbnJ4foSLkZianp6cmZWQioR+eHJuamloam1xdnyChI+VmZ2enZqXkoyGgHt1cG1qaGhrbnJ4foSLkZianp6cmZWQioR+eHJuamloam1xdnyChI+VmZ2enZqXkoyGgHt1cG1qaGhrbnJ4foSLkZianp6cmZWQioR+eHJuamloam1xdnyChI+VmZ2enZqXkoyGgHt1cG1qaGhrbnJ4foSLkZianp6cmZWQioR+eHJuamloam1xdnyChI+VmZ2enZqXkoyGgHt1cG1qaGhrbnJ4foSLkZianp6cmZWQioR+eHJuamloam1xdnyChI+VmZ2enZqXkoyGgHt1cG1qaGhrbnJ4foSLkZianp6cmZWQioR+eHJuamloam1xdnyChI+VmZ2enZqXkoyGgHt1cG1qaGhrbnJ4foSLkZianp6cmZWQioR+eHJuamloam1xdnyChI+VmZ2enZqXkoyGgHt1cG1qaGhrbnJ4foSLkZianp6cmZWQioR+eHJuamloam1xdnyChI+VmZ2enZqXkoyGgHt1cG1qaGhrbnJ4foSLkZianp6cmZWQioR+eHJuamloam1xdnyChI+VmZ2enZqXkoyGgHt1cG1qaGhrbnJ4foSLkZianp6cmZWQioR+eHJuamloam1xdnyChI+VmZ2enZqXkoyGgHt1cG1qaGhrbnJ4foSLkZianp6cmZWQioR+eHJuamloam1xdnyChI+VmZ2enZqXkoyGgHt1cG1qaGhrbnJ4foSLkZianp6cmZWQioR+eHJuamloam1xdnyChI+VmZ2enZqXkoyGgHt1cG1qaGhrbnJ4foSLkZianp6cmZWQioR+eHJuamloam1xdnyChI+VmZ2enZqXkoyGgHt1cG1qaGhrbnJ4foSLkZianp6cmZWQioR+eHJuamloam1xdnyChI+VmZ2enZqXkoyGgHt1cG1qaGhrbnJ4foSLkZianp6cmZWQioR+eHJuamlo';\n\n  private _testAudio?: AudioElementWithSinkId;\n\n  private async _testSpeaker(): Promise<void> {\n    if (this._testingSpeaker) {\n      this._stopTestTone();\n      return;\n    }\n    const audio = new Audio(SwDeviceSelector._TEST_TONE_DATA_URI) as AudioElementWithSinkId;\n    audio.loop = true;\n    this._testAudio = audio;\n\n    const sinkId = this._selAudioOut?.deviceId;\n    if (sinkId && typeof audio.setSinkId === 'function') {\n      try {\n        await audio.setSinkId(sinkId);\n      } catch (error) {\n        logger.error('sw-device-selector: setSinkId failed', error);\n      }\n    }\n    audio.addEventListener('ended', () => this._stopTestTone());\n    try {\n      await audio.play();\n      this._testingSpeaker = true;\n    } catch (error) {\n      logger.error('sw-device-selector: failed to play test tone', error);\n      this._stopTestTone();\n    }\n  }\n\n  private _stopTestTone(): void {\n    if (this._testAudio) {\n      this._testAudio.pause();\n      this._testAudio.src = '';\n      this._testAudio = undefined;\n    }\n    this._testingSpeaker = false;\n  }\n\n  private _emitChange(type: 'microphone' | 'camera' | 'speaker', device: MediaDeviceInfo) {\n    this.dispatchEvent(new CustomEvent('sw-device-change', {\n      detail: { type, device },\n      bubbles: true,\n      composed: true\n    }));\n  }\n\n  // ── render helpers ────────────────────────────────────────────────\n\n  private _renderSection(\n    iconName: IconName,\n    title: string,\n    devices: MediaDeviceInfo[],\n    selectedId: string | undefined,\n    onSelect: (id: string) => void,\n    preview?: unknown\n  ) {\n    return html`\n      <div class=\"section\">\n        <div class=\"section-header\">\n          <sw-ui-icon name=${iconName} size=\"13\"></sw-ui-icon>\n          <span>${title}</span>\n        </div>\n        ${devices.length === 0\n          ? html`<div class=\"no-devices\">No devices found</div>`\n          : devices.map((d, i) => html`\n              <div\n                class=\"device-item ${d.deviceId === selectedId ? 'selected' : ''}\"\n                role=\"option\"\n                aria-selected=${d.deviceId === selectedId}\n                @click=${() => onSelect(d.deviceId)}\n              >\n                <svg class=\"check\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\n                  <path d=\"M6.5 12L2 7.5l1.4-1.4 3.1 3.1 5.6-5.6 1.4 1.4z\" />\n                </svg>\n                <span class=\"device-label\">${d.label || `Device ${i + 1}`}</span>\n              </div>\n            `)\n        }\n        ${preview ?? nothing}\n      </div>\n    `;\n  }\n\n  private _renderCameraPreview() {\n    if (!this.showPreview) return null;\n    return html`\n      <div class=\"preview preview-camera\" part=\"preview-camera\">\n        ${this._videoStream\n          ? html`<sw-local-camera .stream=${this._videoStream} mirror></sw-local-camera>`\n          : html`<div class=\"preview-empty\">Starting camera…</div>`}\n      </div>\n    `;\n  }\n\n  private _renderMicPreview() {\n    if (!this.showPreview) return null;\n    return html`\n      <div class=\"preview preview-mic\" part=\"preview-mic\">\n        ${this._audioStream\n          ? html`<sw-audio-level\n              .stream=${this._audioStream}\n              bars=\"9\"\n              orientation=\"horizontal\"\n              maxSize=\"22\"\n            ></sw-audio-level>`\n          : html`<div class=\"preview-empty\">Starting microphone…</div>`}\n      </div>\n    `;\n  }\n\n  private _renderSpeakerPreview() {\n    if (!this.showPreview) return null;\n    return html`\n      <div class=\"preview preview-speaker\" part=\"preview-speaker\">\n        <button\n          class=\"test-speaker\"\n          part=\"test-speaker-button\"\n          ?disabled=${!this._selAudioOut}\n          @click=${(e: Event) => { e.stopPropagation(); this._testSpeaker(); }}\n        >\n          <sw-ui-icon name=${this._testingSpeaker ? 'speaker-off' : 'speaker-on'} size=\"14\"></sw-ui-icon>\n          <span>${this._testingSpeaker ? 'Stop test' : 'Test speaker'}</span>\n        </button>\n      </div>\n    `;\n  }\n\n  // ── render ─────────────────────────────────────────────────────────\n\n  render() {\n    const hasDevices = this._audioIn.length > 0 || this._videoIn.length > 0 || this._audioOut.length > 0;\n\n    return html`\n      ${this._open ? html`\n        <div\n          class=\"panel\"\n          role=\"listbox\"\n          @keydown=${(e: KeyboardEvent) => { if (e.key === 'Escape') this._open = false; }}\n        >\n          ${this._renderSection('mic-on', 'Microphone', this._audioIn, this._selAudioIn?.deviceId, (id) => this._selectMic(id), this._renderMicPreview())}\n          ${this._renderSection('camera-on', 'Camera', this._videoIn, this._selVideoIn?.deviceId, (id) => this._selectCamera(id), this._renderCameraPreview())}\n          ${this._renderSection('speaker-on', 'Speaker', this._audioOut, this._selAudioOut?.deviceId, (id) => this._selectSpeaker(id), this._renderSpeakerPreview())}\n        </div>\n      ` : nothing}\n\n      <button\n        class=\"trigger\"\n        aria-label=\"Device settings\"\n        aria-expanded=${this._open}\n        aria-haspopup=\"listbox\"\n        ?disabled=${!hasDevices}\n        @click=${this._toggle}\n        part=\"button\"\n      >\n        <sw-ui-icon name=\"settings\" size=\"22\"></sw-ui-icon>\n      </button>\n      <span class=\"label\">Devices</span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-device-selector': SwDeviceSelector;\n  }\n}\n"],"names":["logger","getLogger","SwDeviceSelector","LitElement","changed","opened","closed","cameraChanged","micChanged","dc","d","s","deviceId","device","_b","_a","error","t","audio","sinkId","type","iconName","title","devices","selectedId","onSelect","preview","html","i","nothing","hasDevices","e","id","_c","deviceSelectorStyles","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/sw-device-selector/sw-device-selector.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const deviceSelectorStyles: import("lit").CSSResult;
+//# sourceMappingURL=sw-device-selector.styles.d.ts.map

package/dist/components/sw-device-selector/sw-device-selector.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-device-selector.styles.d.ts","sourceRoot":"","sources":["../../../src/components/sw-device-selector/sw-device-selector.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB,yBAwOhC,CAAC"}

package/dist/components/sw-device-selector/sw-device-selector.styles.js

@@ -0,0 +1,238 @@
+import { css as e } from "lit";
+const i = e`
+  :host {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    position: relative;
+
+    /* ctrl primitive defaults (overridden by parent theme) */
+    --sw-device-selector-size: 44px;
+    --sw-device-selector-radius: 50%;
+    --sw-device-selector-bg: rgba(255, 255, 255, 0.12);
+    --sw-device-selector-bg-hover: rgba(255, 255, 255, 0.22);
+    --sw-device-selector-fg: #ffffff;
+    --sw-device-selector-focus-ring: #044cf6;
+    --sw-device-selector-label-color: rgba(255, 255, 255, 0.55);
+    --sw-device-selector-label-size: 10px;
+    --sw-device-selector-menu-bg: #1e1e2e;
+    --sw-device-selector-menu-border: rgba(255, 255, 255, 0.14);
+    --sw-device-selector-menu-item-hover: rgba(255, 255, 255, 0.1);
+    --sw-device-selector-menu-item-active: rgba(4, 76, 246, 0.35);
+    --sw-device-selector-menu-radius: 10px;
+    --sw-device-selector-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+  }
+
+  /* ── trigger button ─────────────────────────────────────────────── */
+
+  .trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--sw-device-selector-size);
+    height: var(--sw-device-selector-size);
+    min-width: 36px;
+    min-height: 36px;
+    padding: 0;
+    background: var(--sw-device-selector-bg);
+    color: var(--sw-device-selector-fg);
+    border: none;
+    border-radius: var(--sw-device-selector-radius);
+    cursor: pointer;
+    transition: background 0.15s ease, transform 0.1s ease;
+  }
+
+  .trigger:hover:not(:disabled) {
+    background: var(--sw-device-selector-bg-hover);
+  }
+
+  .trigger[aria-expanded='true'] {
+    background: var(--sw-device-selector-bg-hover);
+  }
+
+  .trigger:active:not(:disabled) {
+    transform: scale(0.93);
+  }
+
+  .trigger:focus-visible {
+    outline: 2px solid var(--sw-device-selector-focus-ring);
+    outline-offset: 2px;
+  }
+
+  .trigger:disabled {
+    opacity: 0.38;
+    cursor: not-allowed;
+  }
+
+  .trigger sw-ui-icon {
+    flex-shrink: 0;
+    pointer-events: none;
+  }
+
+  .label {
+    font-size: var(--sw-device-selector-label-size);
+    color: var(--sw-device-selector-label-color);
+    white-space: nowrap;
+    user-select: none;
+    line-height: 1.2;
+  }
+
+  /* ── popover panel ──────────────────────────────────────────────── */
+
+  .panel {
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    min-width: 240px;
+    max-width: 320px;
+    background: var(--sw-device-selector-menu-bg);
+    border: 1px solid var(--sw-device-selector-menu-border);
+    border-radius: var(--sw-device-selector-menu-radius);
+    box-shadow: var(--sw-device-selector-menu-shadow);
+    padding: 6px;
+    z-index: 9999;
+    animation: panel-in 0.1s ease-out;
+  }
+
+  @keyframes panel-in {
+    from { opacity: 0; transform: translateX(-50%) translateY(4px); }
+    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
+  }
+
+  /* ── sections ───────────────────────────────────────────────────── */
+
+  .section {
+    padding: 4px 0;
+  }
+
+  .section + .section {
+    border-top: 1px solid var(--sw-device-selector-menu-border);
+    margin-top: 4px;
+    padding-top: 8px;
+  }
+
+  .section-header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 2px 8px 5px;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--sw-device-selector-label-color);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    user-select: none;
+  }
+
+  .section-header sw-ui-icon {
+    flex-shrink: 0;
+  }
+
+  /* ── device items ───────────────────────────────────────────────── */
+
+  .device-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 10px;
+    border-radius: calc(var(--sw-device-selector-menu-radius) - 2px);
+    cursor: pointer;
+    font-size: 13px;
+    color: var(--sw-device-selector-fg);
+    transition: background 0.1s ease;
+  }
+
+  .device-item:hover {
+    background: var(--sw-device-selector-menu-item-hover);
+  }
+
+  .device-item.selected {
+    background: var(--sw-device-selector-menu-item-active);
+  }
+
+  .check {
+    width: 14px;
+    height: 14px;
+    flex-shrink: 0;
+    opacity: 0;
+  }
+
+  .device-item.selected .check {
+    opacity: 1;
+  }
+
+  .device-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .no-devices {
+    padding: 6px 10px;
+    font-size: 12px;
+    color: var(--sw-device-selector-label-color);
+  }
+
+  /* ── previews (show-preview mode) ───────────────────────────────── */
+
+  :host([show-preview]) .panel {
+    min-width: 280px;
+  }
+
+  .preview {
+    margin: 8px 4px 2px;
+  }
+
+  .preview-camera sw-local-camera {
+    display: block;
+    width: 100%;
+    border-radius: 6px;
+    overflow: hidden;
+  }
+
+  .preview-mic {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 6px 8px;
+    background: rgba(255, 255, 255, 0.04);
+    border-radius: 6px;
+    min-height: 28px;
+  }
+
+  .preview-empty {
+    padding: 8px 4px;
+    font-size: 12px;
+    color: var(--sw-device-selector-label-color);
+    text-align: center;
+  }
+
+  .test-speaker {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 10px;
+    background: var(--sw-device-selector-menu-item-hover);
+    color: var(--sw-device-selector-fg);
+    border: 1px solid var(--sw-device-selector-menu-border);
+    border-radius: 6px;
+    font-size: 12px;
+    cursor: pointer;
+    transition: background 0.1s ease;
+  }
+
+  .test-speaker:hover:not(:disabled) {
+    background: var(--sw-device-selector-menu-item-active);
+  }
+
+  .test-speaker:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+`;
+export {
+  i as deviceSelectorStyles
+};
+//# sourceMappingURL=sw-device-selector.styles.js.map

package/dist/components/sw-device-selector/sw-device-selector.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-device-selector.styles.js","sources":["../../../src/components/sw-device-selector/sw-device-selector.styles.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const deviceSelectorStyles = css`\n  :host {\n    display: inline-flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n    position: relative;\n\n    /* ctrl primitive defaults (overridden by parent theme) */\n    --sw-device-selector-size: 44px;\n    --sw-device-selector-radius: 50%;\n    --sw-device-selector-bg: rgba(255, 255, 255, 0.12);\n    --sw-device-selector-bg-hover: rgba(255, 255, 255, 0.22);\n    --sw-device-selector-fg: #ffffff;\n    --sw-device-selector-focus-ring: #044cf6;\n    --sw-device-selector-label-color: rgba(255, 255, 255, 0.55);\n    --sw-device-selector-label-size: 10px;\n    --sw-device-selector-menu-bg: #1e1e2e;\n    --sw-device-selector-menu-border: rgba(255, 255, 255, 0.14);\n    --sw-device-selector-menu-item-hover: rgba(255, 255, 255, 0.1);\n    --sw-device-selector-menu-item-active: rgba(4, 76, 246, 0.35);\n    --sw-device-selector-menu-radius: 10px;\n    --sw-device-selector-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);\n  }\n\n  /* ── trigger button ─────────────────────────────────────────────── */\n\n  .trigger {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--sw-device-selector-size);\n    height: var(--sw-device-selector-size);\n    min-width: 36px;\n    min-height: 36px;\n    padding: 0;\n    background: var(--sw-device-selector-bg);\n    color: var(--sw-device-selector-fg);\n    border: none;\n    border-radius: var(--sw-device-selector-radius);\n    cursor: pointer;\n    transition: background 0.15s ease, transform 0.1s ease;\n  }\n\n  .trigger:hover:not(:disabled) {\n    background: var(--sw-device-selector-bg-hover);\n  }\n\n  .trigger[aria-expanded='true'] {\n    background: var(--sw-device-selector-bg-hover);\n  }\n\n  .trigger:active:not(:disabled) {\n    transform: scale(0.93);\n  }\n\n  .trigger:focus-visible {\n    outline: 2px solid var(--sw-device-selector-focus-ring);\n    outline-offset: 2px;\n  }\n\n  .trigger:disabled {\n    opacity: 0.38;\n    cursor: not-allowed;\n  }\n\n  .trigger sw-ui-icon {\n    flex-shrink: 0;\n    pointer-events: none;\n  }\n\n  .label {\n    font-size: var(--sw-device-selector-label-size);\n    color: var(--sw-device-selector-label-color);\n    white-space: nowrap;\n    user-select: none;\n    line-height: 1.2;\n  }\n\n  /* ── popover panel ──────────────────────────────────────────────── */\n\n  .panel {\n    position: absolute;\n    bottom: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n    min-width: 240px;\n    max-width: 320px;\n    background: var(--sw-device-selector-menu-bg);\n    border: 1px solid var(--sw-device-selector-menu-border);\n    border-radius: var(--sw-device-selector-menu-radius);\n    box-shadow: var(--sw-device-selector-menu-shadow);\n    padding: 6px;\n    z-index: 9999;\n    animation: panel-in 0.1s ease-out;\n  }\n\n  @keyframes panel-in {\n    from { opacity: 0; transform: translateX(-50%) translateY(4px); }\n    to   { opacity: 1; transform: translateX(-50%) translateY(0); }\n  }\n\n  /* ── sections ───────────────────────────────────────────────────── */\n\n  .section {\n    padding: 4px 0;\n  }\n\n  .section + .section {\n    border-top: 1px solid var(--sw-device-selector-menu-border);\n    margin-top: 4px;\n    padding-top: 8px;\n  }\n\n  .section-header {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 2px 8px 5px;\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--sw-device-selector-label-color);\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    user-select: none;\n  }\n\n  .section-header sw-ui-icon {\n    flex-shrink: 0;\n  }\n\n  /* ── device items ───────────────────────────────────────────────── */\n\n  .device-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 10px;\n    border-radius: calc(var(--sw-device-selector-menu-radius) - 2px);\n    cursor: pointer;\n    font-size: 13px;\n    color: var(--sw-device-selector-fg);\n    transition: background 0.1s ease;\n  }\n\n  .device-item:hover {\n    background: var(--sw-device-selector-menu-item-hover);\n  }\n\n  .device-item.selected {\n    background: var(--sw-device-selector-menu-item-active);\n  }\n\n  .check {\n    width: 14px;\n    height: 14px;\n    flex-shrink: 0;\n    opacity: 0;\n  }\n\n  .device-item.selected .check {\n    opacity: 1;\n  }\n\n  .device-label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .no-devices {\n    padding: 6px 10px;\n    font-size: 12px;\n    color: var(--sw-device-selector-label-color);\n  }\n\n  /* ── previews (show-preview mode) ───────────────────────────────── */\n\n  :host([show-preview]) .panel {\n    min-width: 280px;\n  }\n\n  .preview {\n    margin: 8px 4px 2px;\n  }\n\n  .preview-camera sw-local-camera {\n    display: block;\n    width: 100%;\n    border-radius: 6px;\n    overflow: hidden;\n  }\n\n  .preview-mic {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 6px 8px;\n    background: rgba(255, 255, 255, 0.04);\n    border-radius: 6px;\n    min-height: 28px;\n  }\n\n  .preview-empty {\n    padding: 8px 4px;\n    font-size: 12px;\n    color: var(--sw-device-selector-label-color);\n    text-align: center;\n  }\n\n  .test-speaker {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 10px;\n    background: var(--sw-device-selector-menu-item-hover);\n    color: var(--sw-device-selector-fg);\n    border: 1px solid var(--sw-device-selector-menu-border);\n    border-radius: 6px;\n    font-size: 12px;\n    cursor: pointer;\n    transition: background 0.1s ease;\n  }\n\n  .test-speaker:hover:not(:disabled) {\n    background: var(--sw-device-selector-menu-item-active);\n  }\n\n  .test-speaker:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n  }\n`;\n"],"names":["deviceSelectorStyles","css"],"mappings":";AAEO,MAAMA,IAAuBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

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

@@ -8,9 +8,23 @@
  * ```html
  * <sw-directory .directory=${directory}></sw-directory>
  * ```
+ *
+ * @fires sw-address-select - Fired when an address is selected. Detail: `{ address: Address }`
+ * @fires sw-dial - Fired when the call button on an address is clicked. Detail: `{ address: Address, channel: string }`
+ *
+ * @cssprop [--interactive-button-primary-bg=#044ef4] - Primary brand color
+ * @cssprop [--interactive-button-primary-hover=#0342cf] - Primary color on hover
+ * @cssprop [--interactive-status-success=#22c55e] - Success/positive color
+ * @cssprop [--fg-default=#f0f0f4] - Primary text color
+ * @cssprop [--fg-muted=#a0a0aa] - Secondary/muted text color
+ * @cssprop [--bg-surface=#181a28] - Component background color
+ * @cssprop [--bg-surface-raised=#222436] - Background color on hover
+ * @cssprop [--interactive-dropdown-hover=#333338] - Background color on active/press
+ * @cssprop [--border-default=rgba(255,255,255,0.12)] - Border color
  */
 import { LitElement } from 'lit';
 import type { Observable } from 'rxjs';
+import './UI/icons/sw-ui-icon.js';
 /**
  * Address type from SDK
  */
@@ -34,7 +48,7 @@ export interface DirectoryService {
     hasMore$?: Observable<boolean>;
     loadMore?(): Promise<void>;
 }
-export declare class DirectoryComponent extends LitElement {
+export declare class SwDirectory extends LitElement {
     static styles: import("lit").CSSResult;
     /**
      * Directory service with addresses$ observable
@@ -97,7 +111,7 @@ export declare class DirectoryComponent extends LitElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sw-directory': DirectoryComponent;
+        'sw-directory': SwDirectory;
     }
 }
-//# sourceMappingURL=directory.d.ts.map
+//# sourceMappingURL=sw-directory.d.ts.map

package/dist/components/sw-directory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-directory.d.ts","sourceRoot":"","sources":["../../src/components/sw-directory.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AACvC,OAAO,0BAA0B,CAAC;AAElC;;GAEG;AACH,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACzB,QAAQ,CAAC,EAAE;QACT,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,SAAS,CAAC,EAAE,OAAO,CAAC;KACrB,CAAC;CACH;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC/B,QAAQ,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;CAC5B;AAED,qBACa,WAAY,SAAQ,UAAU;IACzC,MAAM,CAAC,MAAM,0BA+MX;IAEF;;OAEG;IAEH,SAAS,EAAE,gBAAgB,GAAG,IAAI,CAAQ;IAE1C;;OAEG;IAEH,OAAO,CAAC,eAAe,CAAwB;IAE/C;;OAEG;IAEH,OAAO,CAAC,WAAW,CAAc;IAEjC;;OAEG;IAEH,OAAO,CAAC,SAAS,CAAiB;IAElC;;OAEG;IAEH,OAAO,CAAC,OAAO,CAAkB;IAEjC;;OAEG;IAEH,OAAO,CAAC,OAAO,CAAkB;IAEjC;;OAEG;IACH,OAAO,CAAC,aAAa,CAAsB;IAE3C;;OAEG;IACH,OAAO,CAAC,mBAAmB,CAAuB;IAElD;;OAEG;IACH,OAAO,CAAC,oBAAoB,CAAqC;IAEjE;;OAEG;IAEH,OAAO,CAAC,sBAAsB,CAAkB;IAEhD,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,oBAAoB;IAiC5B,OAAO,CAAC,OAAO;IAYf,SAAS,CAAC,YAAY;IAItB,OAAO,CAAC,mBAAmB;IAqB3B,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;YAyB3C,sBAAsB;IAiBpC,OAAO,KAAK,iBAAiB,GAU5B;IAED,OAAO,CAAC,iBAAiB;IAazB,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,UAAU;YAUJ,cAAc;IAM5B,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,kBAAkB;IAoB1B,OAAO,CAAC,sBAAsB;IAS9B,MAAM;CAuEP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}