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

package/dist/components/sw-call-widget/sw-call-widget.js

@@ -0,0 +1,250 @@
+import { LitElement as C, nothing as c, html as _ } from "lit";
+import { property as l, state as p, customElement as y } from "lit/decorators.js";
+import { getLogger as f, SignalWire as w } from "@signalwire/js";
+import { filter as g, first as m } from "rxjs/operators";
+import { CallStateContextController as b } from "../../context/CallStateContextController.js";
+import { IncomingCallController as v } from "../../context/call-state-context.js";
+import { DevicesContextController as E } from "../../context/DevicesContextController.js";
+import { TranscriptController as S } from "../../context/TranscriptController.js";
+import { UserEventController as L } from "../../context/UserEventController.js";
+import { showPrompt as h } from "../UI/sw-ui-alert.js";
+import { ensureSignalWireTheme as I, ensureSignalWireFonts as D } from "../../utils/theme-loader.js";
+import { withWidgetCapabilities as T, parseUserVariablesAttribute as F } from "../../utils/user-variables.js";
+import { buildCredentialProvider as $ } from "./client-factory.js";
+import { renderCallView as A, renderConnecting as k, widgetStyles as W } from "./sw-call-widget.templates.js";
+var U = Object.defineProperty, V = Object.getOwnPropertyDescriptor, s = (t, e, n, r) => {
+  for (var o = r > 1 ? void 0 : r ? V(e, n) : e, a = t.length - 1, u; a >= 0; a--)
+    (u = t[a]) && (o = (r ? u(e, n, o) : u(o)) || o);
+  return r && o && U(e, n, o), o;
+};
+const d = f();
+let i = class extends C {
+  constructor() {
+    super(...arguments), this.token = "", this.host = "", this.destination = "", this.modal = !1, this.transcription = !1, this.allowIncomingCalls = !1, this.audioOnly = !1, this.userVariables = "", this.disableAutoTheme = !1, this.disableAutoFonts = !1, this._call = null, this._connecting = !1, this._hasLayoutLayers = !1, this._drawer = null, this._callState = new b(this), this._devices = new E(this), this._transcript = new S(this), this._userEventCtrl = new L(this), this._incomingCalls = new v(this), this._client = null, this._subs = [], this._pendingIncoming = !1, this._handleIncomingCall = async (t) => {
+      if (!(this._call || this._connecting || this._pendingIncoming)) {
+        this._pendingIncoming = !0;
+        try {
+          const e = t.callerName || t.callerNumber || "Unknown Caller";
+          await h({
+            title: "Incoming Call",
+            description: `${e} is calling`,
+            type: "confirm"
+          }) ? (this._wireCall(t.call), t.call.answer()) : t.call.reject();
+        } finally {
+          this._pendingIncoming = !1;
+        }
+      }
+    }, this._onDisplayContent = (t) => {
+      this._drawer = t.detail, this._transcript.injectEntry({
+        id: crypto.randomUUID(),
+        type: "system",
+        state: "complete",
+        text: t.detail.title ?? "Agent shared content",
+        meta: { displayContent: t.detail }
+      });
+    }, this._onDrawerClose = () => {
+      this._drawer = null;
+    }, this._onModalClose = (t) => {
+      if (this._call || this._connecting) {
+        this.hangup();
+        return;
+      }
+      this.destination || t.preventDefault();
+    };
+  }
+  // ── Lifecycle ──────────────────────────────────────────────────────
+  connectedCallback() {
+    super.connectedCallback(), this.disableAutoTheme || I(), this.disableAutoFonts || D();
+  }
+  updated(t) {
+    super.updated(t), t.has("token") || t.has("host") ? this.token ? this._refreshClient() : t.has("host") && d.debug(
+      "[SwCallWidget] host changed but token is empty; skipping client refresh until token is set"
+    ) : t.has("allowIncomingCalls") && this._client && (this.allowIncomingCalls ? this._connectIncomingCalls() : this._incomingCalls.disconnect());
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._destroyClient();
+  }
+  // ── Client lifecycle ───────────────────────────────────────────────
+  _destroyClient() {
+    if (this._subs.forEach((t) => t.unsubscribe()), this._subs = [], this._incomingCalls.disconnect(), this._devices.disconnectCall(), this._devices.disconnect(), this._callState.disconnect(), this._transcript.setCall(void 0), this._client) {
+      try {
+        this._client.destroy();
+      } catch (t) {
+        d.error("[SwCallWidget] Error destroying client:", t);
+      }
+      this._client = null;
+    }
+    this._call = null, this._connecting = !1;
+  }
+  _refreshClient() {
+    this._destroyClient();
+    try {
+      this._client = new w(
+        $(this.token, this.host)
+      ), this._devices.connectDevices(this._client), this.allowIncomingCalls && this._connectIncomingCalls();
+    } catch (t) {
+      const e = t instanceof Error ? t.message : "Failed to initialise client";
+      d.error("[SwCallWidget] Failed to initialise client:", t), h({ title: "Client Error", description: e, type: "alert" });
+    }
+  }
+  // ── Public methods ─────────────────────────────────────────────────
+  async dial() {
+    if (!this._client || this._connecting || this._call) return;
+    if (!this.destination) {
+      h({ title: "Call Error", description: "No destination configured.", type: "alert" });
+      return;
+    }
+    this._connecting = !0, this.dispatchEvent(new CustomEvent("sw-dial", {
+      detail: { destination: this.destination },
+      bubbles: !0,
+      composed: !0
+    }));
+    const t = !this.audioOnly;
+    try {
+      const e = await new Promise((n, r) => {
+        const o = this._client.isConnected$.pipe(g((a) => a), m()).subscribe({
+          next: () => {
+            const a = T(
+              F(this.userVariables)
+            );
+            this._client.dial(this.destination, {
+              audio: !0,
+              video: t,
+              receiveAudio: !0,
+              receiveVideo: t,
+              userVariables: a
+            }).then(n).catch(r);
+          },
+          error: r
+        });
+        this._subs.push(o);
+      });
+      this._wireCall(e);
+    } catch (e) {
+      const n = e instanceof Error ? e.message : "Failed to connect call";
+      d.error("[SwCallWidget] Dial failed:", e), h({ title: "Call Failed", description: n, type: "alert" });
+    } finally {
+      this._connecting = !1;
+    }
+  }
+  async hangup() {
+    this._call && await this._call.hangup();
+  }
+  // ── Incoming calls ──────────────────────────────────────────────────
+  _connectIncomingCalls() {
+    this._client && (this._incomingCalls.onIncomingCall = this._handleIncomingCall, this._subs.push(
+      this._client.isConnected$.pipe(g(Boolean), m()).subscribe(() => {
+        this._client && this._incomingCalls.connect(this._client.session.incomingCalls$);
+      })
+    ));
+  }
+  // ── Call wiring ────────────────────────────────────────────────────
+  _wireCall(t) {
+    this._call = t, this._callState.connect(t), this._devices.connectCall(t), this._transcript.setCall(t), this._userEventCtrl.setCall(t), this.addEventListener("sw-display-content", this._onDisplayContent), this._devices.refreshDevices(), this._subs.push(
+      t.layoutLayers$.subscribe((e) => {
+        this._hasLayoutLayers = e.length > 0;
+      })
+    ), this._subs.push(
+      t.status$.subscribe((e) => {
+        (e === "disconnected" || e === "destroyed" || e === "failed") && this._unwireCall();
+      })
+    );
+  }
+  _unwireCall() {
+    const t = this._call, e = t == null ? void 0 : t.status;
+    this._callState.disconnect(), this._devices.disconnectCall(), this._transcript.setCall(void 0), this._userEventCtrl.setCall(void 0), this.removeEventListener("sw-display-content", this._onDisplayContent), this._call = null, this._connecting = !1, this._hasLayoutLayers = !1, this._drawer = null, t && this.dispatchEvent(new CustomEvent("sw-call-ended", {
+      detail: { status: e },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  // ── Slot trigger ───────────────────────────────────────────────────
+  _onSlotChange(t) {
+    t.target.assignedElements({ flatten: !0 }).forEach((n) => {
+      n instanceof HTMLElement && n.addEventListener("click", () => this.dial());
+    });
+  }
+  // ── Event handlers ─────────────────────────────────────────────────
+  _onHangUp() {
+    this.hangup();
+  }
+  _onFullscreenToggle() {
+    var e;
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("sw-ui-call-layout");
+    t && t.toggleFullscreen();
+  }
+  _onTranscriptToggle() {
+    this.transcription = !this.transcription;
+  }
+  // ── Render ─────────────────────────────────────────────────────────
+  render() {
+    const t = !!(this._call || this._connecting), e = this._call ? A({
+      transcription: this.transcription,
+      hasLayoutLayers: this._hasLayoutLayers,
+      drawer: this._drawer,
+      transcriptEntries: this._transcript.state.entries,
+      onHangUp: this._onHangUp,
+      onFullscreenToggle: this._onFullscreenToggle,
+      onTranscriptToggle: this._onTranscriptToggle,
+      onDrawerClose: this._onDrawerClose
+    }) : this._connecting ? k() : c;
+    return this.modal ? _`
+        <slot @slotchange=${this._onSlotChange}></slot>
+        <sw-ui-modal ?open=${t} @sw-modal-close=${this._onModalClose}>
+          <sw-ui-responsive-container>
+            ${e !== c ? e : c}
+          </sw-ui-responsive-container>
+        </sw-ui-modal>
+      ` : e !== c ? e : _`<slot @slotchange=${this._onSlotChange}></slot>`;
+  }
+};
+i.styles = W;
+s([
+  l({ type: String })
+], i.prototype, "token", 2);
+s([
+  l({ type: String })
+], i.prototype, "host", 2);
+s([
+  l({ type: String })
+], i.prototype, "destination", 2);
+s([
+  l({ type: Boolean, reflect: !0 })
+], i.prototype, "modal", 2);
+s([
+  l({ type: Boolean, reflect: !0 })
+], i.prototype, "transcription", 2);
+s([
+  l({ type: Boolean, reflect: !0, attribute: "allow-incoming-calls" })
+], i.prototype, "allowIncomingCalls", 2);
+s([
+  l({ type: Boolean, reflect: !0, attribute: "audio-only" })
+], i.prototype, "audioOnly", 2);
+s([
+  l({ type: String, attribute: "user-variables" })
+], i.prototype, "userVariables", 2);
+s([
+  l({ type: Boolean, reflect: !0, attribute: "disable-auto-theme" })
+], i.prototype, "disableAutoTheme", 2);
+s([
+  l({ type: Boolean, reflect: !0, attribute: "disable-auto-fonts" })
+], i.prototype, "disableAutoFonts", 2);
+s([
+  p()
+], i.prototype, "_call", 2);
+s([
+  p()
+], i.prototype, "_connecting", 2);
+s([
+  p()
+], i.prototype, "_hasLayoutLayers", 2);
+s([
+  p()
+], i.prototype, "_drawer", 2);
+i = s([
+  y("sw-call-widget")
+], i);
+export {
+  i as SwCallWidget
+};
+//# sourceMappingURL=sw-call-widget.js.map

package/dist/components/sw-call-widget/sw-call-widget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-call-widget.js","sources":["../../../src/components/sw-call-widget/sw-call-widget.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { SignalWire, getLogger } from '@signalwire/js';\nimport type { Call } from '../../types/index.js';\nimport { Subscription } from 'rxjs';\nimport { first, filter } from 'rxjs/operators';\n\nimport { CallStateContextController } from '../../context/CallStateContextController.js';\nimport { IncomingCallController } from '../../context/call-state-context.js';\nimport type { IncomingCallInfo } from '../../context/call-state-context.js';\nimport { DevicesContextController } from '../../context/DevicesContextController.js';\nimport { TranscriptController } from '../../context/TranscriptController.js';\nimport { UserEventController } from '../../context/UserEventController.js';\n\nimport '../sw-call-media.js';\nimport '../sw-local-camera.js';\nimport '../sw-call-controls.js';\nimport '../UI/layout/sw-ui-call-layout.js';\nimport '../UI/layout/sw-ui-responsive-container.js';\nimport '../UI/layout/sw-ui-modal.js';\nimport '../UI/layout/sw-ui-background.js';\nimport '../UI/layout/sw-ui-content-drawer.js';\nimport '../UI/sw-ui-transcript-view.js';\nimport { showPrompt } from '../UI/sw-ui-alert.js';\nimport type { DisplayContentPayload } from '../UI/layout/sw-ui-content-drawer.js';\nimport { ensureSignalWireTheme, ensureSignalWireFonts } from '../../utils/theme-loader.js';\nimport {\n  parseUserVariablesAttribute,\n  withWidgetCapabilities,\n} from '../../utils/user-variables.js';\nimport { buildCredentialProvider } from './client-factory.js';\nimport {\n  widgetStyles,\n  renderCallView,\n  renderConnecting,\n} from './sw-call-widget.templates.js';\n\nconst logger = getLogger();\n\n/**\n * All-in-one call widget. Handles client initialisation, dialling, media,\n * controls and optional AI transcript — in either inline or modal modes.\n *\n * Composes `sw-ui-call-layout`, `sw-call-media`, `sw-local-camera`,\n * `sw-call-controls`, and `sw-ui-transcript-view` under the hood.\n * All child components are wired via Lit context — no manual plumbing needed.\n *\n * @prop {string}  token         - SignalWire SAT or embed token\n * @prop {string}  host          - Optional server host\n * @prop {string}  destination   - Call destination (address or resource)\n * @prop {boolean} modal         - Render in a `<sw-ui-modal>` overlay\n * @prop {boolean} transcription - Show AI transcript panel\n *\n * @slot background - Background element (e.g. `<sw-ui-background default>`)\n * @slot (default)  - Trigger element (click to dial, shown when idle)\n *\n * @fires sw-dial                  - When `dial()` is invoked. Detail: `{ destination }`.\n * @fires sw-call-ended            - When the call reaches a terminal state (user hangup, remote disconnect, or failure). Detail: `{ status }`.\n * @fires sw-display-content       - From `display_content` user event. Detail: `DisplayContentPayload`.\n * @fires signalwire-address:event - Forwarded SignalWire custom user events.\n *\n * All inner events bubble.\n *\n * @method dial()   - Initiate call\n * @method hangup() - End active call\n */\n@customElement('sw-call-widget')\nexport class SwCallWidget extends LitElement {\n  static styles = widgetStyles;\n\n  // ── Public properties ──────────────────────────────────────────────\n\n  @property({ type: String }) token = '';\n  @property({ type: String }) host = '';\n  @property({ type: String }) destination = '';\n  @property({ type: Boolean, reflect: true }) modal = false;\n  @property({ type: Boolean, reflect: true }) transcription = false;\n  @property({ type: Boolean, reflect: true, attribute: 'allow-incoming-calls' }) allowIncomingCalls = false;\n  @property({ type: Boolean, reflect: true, attribute: 'audio-only' }) audioOnly = false;\n\n  /**\n   * Custom variables sent with the Verto invite as a JSON object.\n   *\n   * The widget always advertises `capabilities.display_content` and\n   * `metadata.widget.opened_at` so the agent can detect that the caller\n   * supports the content drawer; user-supplied keys are merged in and win\n   * on shallow conflict.\n   *\n   * Invalid JSON is logged and ignored — the call still dials.\n   *\n   * @example\n   *   <sw-call-widget user-variables='{\"customer_id\": \"abc-123\"}'></sw-call-widget>\n   */\n  @property({ type: String, attribute: 'user-variables' }) userVariables = '';\n\n  /**\n   * Skip auto-injecting the SignalWire `theme.css` design-token stylesheet.\n   * Set this when the host page already loads `@signalwire/web-components/theme.css`\n   * or a custom theme written against the same DTCG token names.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'disable-auto-theme' }) disableAutoTheme = false;\n\n  /**\n   * Skip auto-loading the SignalWire brand fonts (Lexend, Instrument Sans,\n   * JetBrains Mono) from Google Fonts. Set this when fonts are self-hosted\n   * or loaded elsewhere.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'disable-auto-fonts' }) disableAutoFonts = false;\n\n  // ── Internal state ─────────────────────────────────────────────────\n\n  @state() private _call: Call | null = null;\n  @state() private _connecting = false;\n  @state() private _hasLayoutLayers = false;\n  @state() private _drawer: DisplayContentPayload | null = null;\n\n  // ── Context providers ──────────────────────────────────────────────\n\n  private _callState = new CallStateContextController(this);\n  private _devices = new DevicesContextController(this);\n  private _transcript: TranscriptController = new TranscriptController(this);\n  private _userEventCtrl = new UserEventController(this);\n  private _incomingCalls = new IncomingCallController(this);\n\n  // ── Internals ──────────────────────────────────────────────────────\n\n  private _client: SignalWire | null = null;\n  private _subs: Subscription[] = [];\n  private _pendingIncoming = false;\n\n  // ── Lifecycle ──────────────────────────────────────────────────────\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    if (!this.disableAutoTheme) ensureSignalWireTheme();\n    if (!this.disableAutoFonts) ensureSignalWireFonts();\n  }\n\n  protected updated(changed: Map<string, unknown>): void {\n    super.updated(changed);\n    if (changed.has('token') || changed.has('host')) {\n      if (this.token) {\n        this._refreshClient();\n      } else if (changed.has('host')) {\n        // Host changed but no token configured yet — defer client init until\n        // the consumer sets `.token`. Surface this so misconfigurations\n        // (e.g. forgetting to bind token) don't fail silently.\n        logger.debug(\n          '[SwCallWidget] host changed but token is empty; skipping client refresh until token is set',\n        );\n      }\n    } else if (changed.has('allowIncomingCalls') && this._client) {\n      if (this.allowIncomingCalls) {\n        this._connectIncomingCalls();\n      } else {\n        this._incomingCalls.disconnect();\n      }\n    }\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._destroyClient();\n  }\n\n  // ── Client lifecycle ───────────────────────────────────────────────\n\n  private _destroyClient(): void {\n    this._subs.forEach((s) => s.unsubscribe());\n    this._subs = [];\n\n    this._incomingCalls.disconnect();\n    this._devices.disconnectCall();\n    this._devices.disconnect();\n    this._callState.disconnect();\n    this._transcript.setCall(undefined);\n\n\n    if (this._client) {\n      try {\n        this._client.destroy();\n      } catch (e) {\n        logger.error('[SwCallWidget] Error destroying client:', e);\n      }\n      this._client = null;\n    }\n\n    this._call = null;\n    this._connecting = false;\n  }\n\n  private _refreshClient(): void {\n    this._destroyClient();\n    try {\n      this._client = new SignalWire(\n        buildCredentialProvider(this.token, this.host),\n      );\n      this._devices.connectDevices(this._client as unknown as import('../../types/index.js').DeviceController);\n\n      if (this.allowIncomingCalls) {\n        this._connectIncomingCalls();\n      }\n    } catch (e) {\n      const message = e instanceof Error ? e.message : 'Failed to initialise client';\n      logger.error('[SwCallWidget] Failed to initialise client:', e);\n      void showPrompt({ title: 'Client Error', description: message, type: 'alert' });\n    }\n  }\n\n  // ── Public methods ─────────────────────────────────────────────────\n\n  async dial(): Promise<void> {\n    if (!this._client || this._connecting || this._call) return;\n    if (!this.destination) {\n      void showPrompt({ title: 'Call Error', description: 'No destination configured.', type: 'alert' });\n      return;\n    }\n\n    this._connecting = true;\n\n    this.dispatchEvent(new CustomEvent('sw-dial', {\n      detail: { destination: this.destination },\n      bubbles: true,\n      composed: true,\n    }));\n\n    const wantsVideo = !this.audioOnly;\n\n    try {\n      const call = await new Promise<Call>((resolve, reject) => {\n        const sub = this._client!.isConnected$\n          .pipe(filter((c) => c), first())\n          .subscribe({\n            next: () => {\n              const userVariables = withWidgetCapabilities(\n                parseUserVariablesAttribute(this.userVariables)\n              );\n              this._client!\n                .dial(this.destination, {\n                  audio: true,\n                  video: wantsVideo,\n                  receiveAudio: true,\n                  receiveVideo: wantsVideo,\n                  userVariables,\n                })\n                .then(resolve)\n                .catch(reject);\n            },\n            error: reject,\n          });\n        this._subs.push(sub);\n      });\n\n      this._wireCall(call);\n    } catch (e) {\n      const message = e instanceof Error ? e.message : 'Failed to connect call';\n      logger.error('[SwCallWidget] Dial failed:', e);\n      void showPrompt({ title: 'Call Failed', description: message, type: 'alert' });\n    } finally {\n      this._connecting = false;\n    }\n  }\n\n  async hangup(): Promise<void> {\n    if (this._call) {\n      await this._call.hangup();\n    }\n  }\n\n  // ── Incoming calls ──────────────────────────────────────────────────\n\n  private _connectIncomingCalls(): void {\n    if (!this._client) return;\n    this._incomingCalls.onIncomingCall = this._handleIncomingCall;\n    this._subs.push(\n      this._client.isConnected$\n        .pipe(filter(Boolean), first())\n        .subscribe(() => {\n          if (this._client) {\n            this._incomingCalls.connect(this._client.session.incomingCalls$);\n          }\n        })\n    );\n  }\n\n  private _handleIncomingCall = async (info: IncomingCallInfo): Promise<void> => {\n    if (this._call || this._connecting || this._pendingIncoming) return;\n    this._pendingIncoming = true;\n\n    try {\n      const callerDisplay = info.callerName || info.callerNumber || 'Unknown Caller';\n      // TODO(ringing-ux): the confirm dialog is a placeholder, not a real\n      // ringing UI. Missing: caller avatar, audible ringtone, distinction\n      // between \"ignore\" (let it keep ringing) and \"reject\" (decline now),\n      // and a timeout. Replace with a dedicated `<sw-ui-incoming-call>`.\n      const accepted = await showPrompt({\n        title: 'Incoming Call',\n        description: `${callerDisplay} is calling`,\n        type: 'confirm',\n      });\n\n      if (accepted) {\n        this._wireCall(info.call);\n        info.call.answer();\n      } else {\n        info.call.reject();\n      }\n    } finally {\n      this._pendingIncoming = false;\n    }\n  };\n\n  // ── Call wiring ────────────────────────────────────────────────────\n\n  private _wireCall(call: Call): void {\n    this._call = call;\n\n    // Wire contexts\n    this._callState.connect(call);\n    this._devices.connectCall(call);\n    this._transcript.setCall(call);\n\n    // Always subscribe to user_event for display_content and pass-through\n    this._userEventCtrl.setCall(call);\n    this.addEventListener('sw-display-content', this._onDisplayContent as EventListener);\n\n    // Re-enumerate devices now that getUserMedia has granted permission\n    this._devices.refreshDevices();\n\n    // Track layout layers to know when MCU composites local camera\n    this._subs.push(\n      call.layoutLayers$.subscribe((layers) => {\n        this._hasLayoutLayers = layers.length > 0;\n      })\n    );\n\n    // Watch for call end\n    this._subs.push(\n      call.status$.subscribe((status) => {\n        if (\n          status === 'disconnected' ||\n          status === 'destroyed' ||\n          status === 'failed'\n        ) {\n          this._unwireCall();\n        }\n      })\n    );\n  }\n\n  private _onDisplayContent = (e: CustomEvent<DisplayContentPayload>): void => {\n    this._drawer = e.detail;\n    this._transcript.injectEntry({\n      id: crypto.randomUUID(),\n      type: 'system',\n      state: 'complete',\n      text: e.detail.title ?? 'Agent shared content',\n      meta: { displayContent: e.detail },\n    });\n  };\n\n  private _onDrawerClose = (): void => {\n    this._drawer = null;\n  };\n\n  private _unwireCall(): void {\n    const endedCall = this._call;\n    const endedStatus = endedCall?.status;\n\n    this._callState.disconnect();\n    this._devices.disconnectCall();\n    this._transcript.setCall(undefined);\n    this._userEventCtrl.setCall(undefined);\n    this.removeEventListener('sw-display-content', this._onDisplayContent as EventListener);\n\n    this._call = null;\n    this._connecting = false;\n    this._hasLayoutLayers = false;\n    this._drawer = null;\n\n    if (endedCall) {\n      // Fires for any terminal transition — user hangup, remote disconnect,\n      // or failure. Distinct from `sw-call-hangup` which only fires when the\n      // user clicks the hangup button.\n      this.dispatchEvent(new CustomEvent('sw-call-ended', {\n        detail: { status: endedStatus },\n        bubbles: true,\n        composed: true,\n      }));\n    }\n  }\n\n  // ── Slot trigger ───────────────────────────────────────────────────\n\n  private _onSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    slot.assignedElements({ flatten: true }).forEach((el) => {\n      if (el instanceof HTMLElement) {\n        el.addEventListener('click', () => this.dial());\n      }\n    });\n  }\n\n  // ── Event handlers ─────────────────────────────────────────────────\n\n  private _onHangUp(): void {\n    this.hangup();\n  }\n\n  private _onModalClose = (e: Event): void => {\n    if (this._call || this._connecting) {\n      // Active call → hang up. Modal will close automatically once the\n      // call reaches a terminal state and `_unwireCall` clears `_call`.\n      this.hangup();\n      return;\n    }\n    if (!this.destination) {\n      // Pre-call dialpad state — no destination entered yet. Keep the\n      // modal open so the user doesn't lose their in-progress dialing.\n      e.preventDefault();\n    }\n  };\n\n  private _onFullscreenToggle(): void {\n    const layout = this.shadowRoot?.querySelector('sw-ui-call-layout');\n    if (layout) {\n      (layout as import('../UI/layout/sw-ui-call-layout.js').SwUiCallLayout).toggleFullscreen();\n    }\n  }\n\n  private _onTranscriptToggle(): void {\n    this.transcription = !this.transcription;\n  }\n\n  // ── Render ─────────────────────────────────────────────────────────\n\n  render() {\n    const isActive = !!(this._call || this._connecting);\n    const body = this._call\n      ? renderCallView({\n          transcription: this.transcription,\n          hasLayoutLayers: this._hasLayoutLayers,\n          drawer: this._drawer,\n          transcriptEntries: this._transcript.state.entries,\n          onHangUp: this._onHangUp,\n          onFullscreenToggle: this._onFullscreenToggle,\n          onTranscriptToggle: this._onTranscriptToggle,\n          onDrawerClose: this._onDrawerClose,\n        })\n      : this._connecting\n        ? renderConnecting()\n        : nothing;\n\n    if (this.modal) {\n      return html`\n        <slot @slotchange=${this._onSlotChange}></slot>\n        <sw-ui-modal ?open=${isActive} @sw-modal-close=${this._onModalClose}>\n          <sw-ui-responsive-container>\n            ${body !== nothing ? body : nothing}\n          </sw-ui-responsive-container>\n        </sw-ui-modal>\n      `;\n    }\n\n    if (body !== nothing) return body;\n\n    return html`<slot @slotchange=${this._onSlotChange}></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-call-widget': SwCallWidget;\n  }\n}\n"],"names":["logger","getLogger","SwCallWidget","LitElement","CallStateContextController","DevicesContextController","TranscriptController","UserEventController","IncomingCallController","info","callerDisplay","showPrompt","e","ensureSignalWireTheme","ensureSignalWireFonts","changed","s","SignalWire","buildCredentialProvider","message","wantsVideo","call","resolve","reject","sub","filter","c","first","userVariables","withWidgetCapabilities","parseUserVariablesAttribute","layers","status","endedCall","endedStatus","el","layout","_a","isActive","body","renderCallView","renderConnecting","nothing","html","widgetStyles","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/sw-call-widget/sw-call-widget.templates.d.ts

@@ -0,0 +1,17 @@
+import { type TemplateResult } from 'lit';
+import type { DisplayContentPayload } from '../UI/layout/sw-ui-content-drawer.js';
+import type { TranscriptEntry } from '../../context/transcript-context.js';
+export declare const widgetStyles: import("lit").CSSResult;
+export interface CallViewOpts {
+    transcription: boolean;
+    hasLayoutLayers: boolean;
+    drawer: DisplayContentPayload | null;
+    transcriptEntries: TranscriptEntry[];
+    onHangUp: () => void;
+    onFullscreenToggle: () => void;
+    onTranscriptToggle: () => void;
+    onDrawerClose: () => void;
+}
+export declare function renderCallView(opts: CallViewOpts): TemplateResult;
+export declare function renderConnecting(): TemplateResult;
+//# sourceMappingURL=sw-call-widget.templates.d.ts.map

package/dist/components/sw-call-widget/sw-call-widget.templates.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-call-widget.templates.d.ts","sourceRoot":"","sources":["../../../src/components/sw-call-widget/sw-call-widget.templates.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAC9D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAC;AAE3E,eAAO,MAAM,YAAY,yBAoBxB,CAAC;AAEF,MAAM,WAAW,YAAY;IAC3B,aAAa,EAAE,OAAO,CAAC;IACvB,eAAe,EAAE,OAAO,CAAC;IACzB,MAAM,EAAE,qBAAqB,GAAG,IAAI,CAAC;IACrC,iBAAiB,EAAE,eAAe,EAAE,CAAC;IACrC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,YAAY,GAAG,cAAc,CA2CjE;AAED,wBAAgB,gBAAgB,IAAI,cAAc,CAQjD"}

package/dist/components/sw-call-widget/sw-call-widget.templates.js

@@ -0,0 +1,80 @@
+import { nothing as o, html as a, css as s } from "lit";
+const c = s`
+  :host {
+    display: block;
+    height: 100%;
+    font-family: var(--type-family-body);
+
+    --sw-control-bar-bg: #000;
+    --sw-control-bar-padding: 6px 12px;
+    --sw-control-bar-gap: 6px;
+    --sw-control-bar-radius: 0;
+    --sw-split-button-width: 56px;
+    --sw-split-button-height: 36px;
+  }
+
+  .call-view-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+`;
+function w(r) {
+  var l, t, e, n;
+  return a`
+    <div class="call-view-wrapper">
+      <sw-ui-call-layout
+        ?transcript=${r.transcription}
+        shadow
+        style="--sw-call-layout-radius: 10px;"
+      >
+        <slot name="background" slot="background"></slot>
+
+        <sw-call-media slot="video"></sw-call-media>
+
+        ${r.hasLayoutLayers ? o : a`<sw-local-camera slot="floating-video" mirror></sw-local-camera>`}
+
+        <sw-call-controls
+          slot="controls"
+          show-screen-share
+          show-hand-raise
+          show-transcript
+          .transcriptActive=${r.transcription}
+          @sw-call-hangup=${r.onHangUp}
+          @sw-fullscreen-toggle=${r.onFullscreenToggle}
+          @sw-transcript-toggle=${r.onTranscriptToggle}
+        ></sw-call-controls>
+
+        <sw-ui-transcript-view
+          slot="transcript"
+          .entries=${r.transcriptEntries}
+        ></sw-ui-transcript-view>
+      </sw-ui-call-layout>
+
+      <sw-ui-content-drawer
+        ?open=${r.drawer !== null}
+        .title=${((l = r.drawer) == null ? void 0 : l.title) ?? ""}
+        .content=${((t = r.drawer) == null ? void 0 : t.content) ?? ""}
+        .format=${((e = r.drawer) == null ? void 0 : e.format) ?? "text"}
+        .language=${((n = r.drawer) == null ? void 0 : n.language) ?? ""}
+        @sw-content-drawer-close=${r.onDrawerClose}
+      ></sw-ui-content-drawer>
+    </div>
+  `;
+}
+function d() {
+  return a`
+    <div class="call-view-wrapper">
+      <sw-ui-call-layout loading shadow style="--sw-call-layout-radius: 10px;">
+        <slot name="background" slot="background"></slot>
+      </sw-ui-call-layout>
+    </div>
+  `;
+}
+export {
+  w as renderCallView,
+  d as renderConnecting,
+  c as widgetStyles
+};
+//# sourceMappingURL=sw-call-widget.templates.js.map

package/dist/components/sw-call-widget/sw-call-widget.templates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-call-widget.templates.js","sources":["../../../src/components/sw-call-widget/sw-call-widget.templates.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport type { DisplayContentPayload } from '../UI/layout/sw-ui-content-drawer.js';\nimport type { TranscriptEntry } from '../../context/transcript-context.js';\n\nexport const widgetStyles = css`\n  :host {\n    display: block;\n    height: 100%;\n    font-family: var(--type-family-body);\n\n    --sw-control-bar-bg: #000;\n    --sw-control-bar-padding: 6px 12px;\n    --sw-control-bar-gap: 6px;\n    --sw-control-bar-radius: 0;\n    --sw-split-button-width: 56px;\n    --sw-split-button-height: 36px;\n  }\n\n  .call-view-wrapper {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n  }\n`;\n\nexport interface CallViewOpts {\n  transcription: boolean;\n  hasLayoutLayers: boolean;\n  drawer: DisplayContentPayload | null;\n  transcriptEntries: TranscriptEntry[];\n  onHangUp: () => void;\n  onFullscreenToggle: () => void;\n  onTranscriptToggle: () => void;\n  onDrawerClose: () => void;\n}\n\nexport function renderCallView(opts: CallViewOpts): TemplateResult {\n  return html`\n    <div class=\"call-view-wrapper\">\n      <sw-ui-call-layout\n        ?transcript=${opts.transcription}\n        shadow\n        style=\"--sw-call-layout-radius: 10px;\"\n      >\n        <slot name=\"background\" slot=\"background\"></slot>\n\n        <sw-call-media slot=\"video\"></sw-call-media>\n\n        ${!opts.hasLayoutLayers\n          ? html`<sw-local-camera slot=\"floating-video\" mirror></sw-local-camera>`\n          : nothing}\n\n        <sw-call-controls\n          slot=\"controls\"\n          show-screen-share\n          show-hand-raise\n          show-transcript\n          .transcriptActive=${opts.transcription}\n          @sw-call-hangup=${opts.onHangUp}\n          @sw-fullscreen-toggle=${opts.onFullscreenToggle}\n          @sw-transcript-toggle=${opts.onTranscriptToggle}\n        ></sw-call-controls>\n\n        <sw-ui-transcript-view\n          slot=\"transcript\"\n          .entries=${opts.transcriptEntries}\n        ></sw-ui-transcript-view>\n      </sw-ui-call-layout>\n\n      <sw-ui-content-drawer\n        ?open=${opts.drawer !== null}\n        .title=${opts.drawer?.title ?? ''}\n        .content=${opts.drawer?.content ?? ''}\n        .format=${opts.drawer?.format ?? 'text'}\n        .language=${opts.drawer?.language ?? ''}\n        @sw-content-drawer-close=${opts.onDrawerClose}\n      ></sw-ui-content-drawer>\n    </div>\n  `;\n}\n\nexport function renderConnecting(): TemplateResult {\n  return html`\n    <div class=\"call-view-wrapper\">\n      <sw-ui-call-layout loading shadow style=\"--sw-call-layout-radius: 10px;\">\n        <slot name=\"background\" slot=\"background\"></slot>\n      </sw-ui-call-layout>\n    </div>\n  `;\n}\n"],"names":["widgetStyles","css","renderCallView","opts","html","nothing","_a","_b","_c","_d","renderConnecting"],"mappings":";AAIO,MAAMA,IAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiCrB,SAASC,EAAeC,GAAoC;;AACjE,SAAOC;AAAA;AAAA;AAAA,sBAGaD,EAAK,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQ7BA,EAAK,kBAEJE,IADAD,mEACO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAOWD,EAAK,aAAa;AAAA,4BACpBA,EAAK,QAAQ;AAAA,kCACPA,EAAK,kBAAkB;AAAA,kCACvBA,EAAK,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKpCA,EAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,gBAK3BA,EAAK,WAAW,IAAI;AAAA,mBACnBG,IAAAH,EAAK,WAAL,gBAAAG,EAAa,UAAS,EAAE;AAAA,qBACtBC,IAAAJ,EAAK,WAAL,gBAAAI,EAAa,YAAW,EAAE;AAAA,oBAC3BC,IAAAL,EAAK,WAAL,gBAAAK,EAAa,WAAU,MAAM;AAAA,sBAC3BC,IAAAN,EAAK,WAAL,gBAAAM,EAAa,aAAY,EAAE;AAAA,mCACZN,EAAK,aAAa;AAAA;AAAA;AAAA;AAIrD;AAEO,SAASO,IAAmC;AACjD,SAAON;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOT;"}

package/dist/components/sw-click-to-call.d.ts

@@ -0,0 +1,39 @@
+import { LitElement } from 'lit';
+import './sw-call-widget/sw-call-widget.js';
+import './UI/layout/sw-ui-background.js';
+import './UI/icons/sw-ui-icon.js';
+/**
+ * Click-to-call button that opens a full call widget.
+ *
+ * Thin wrapper around `sw-call-widget` in modal mode. Renders a styled
+ * call button; clicking it dials the preconfigured destination and opens
+ * the call UI in a modal overlay.
+ *
+ * @prop {string} token       - SignalWire SAT or embed token
+ * @prop {string} host        - Optional server host
+ * @prop {string} destination - Call destination (address or resource)
+ * @prop {string} label       - Button text (default "Call")
+ * @prop {boolean} audioOnly  - Audio-only mode (no video send/receive)
+ *
+ * @fires sw-dial        - Fired when the call is initiated. Detail: `{ destination }`.
+ * @fires sw-call-ended  - Fired when the call reaches a terminal state (any reason). Detail: `{ status }`.
+ * @fires sw-call-hangup - Fired when the user clicks the hangup button (does not fire on remote disconnect).
+ *
+ * Themed via the SignalWire DTCG tokens (`--interactive-status-success`,
+ * `--type-family-body`, `--type-size-body`, `--radius-md`, `--transition-fast`).
+ */
+export declare class SwClickToCall extends LitElement {
+    static styles: import("lit").CSSResult;
+    token: string;
+    host: string;
+    destination: string;
+    label: string;
+    audioOnly: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sw-click-to-call': SwClickToCall;
+    }
+}
+//# sourceMappingURL=sw-click-to-call.d.ts.map

package/dist/components/sw-click-to-call.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-click-to-call.d.ts","sourceRoot":"","sources":["../../src/components/sw-click-to-call.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,oCAAoC,CAAC;AAC5C,OAAO,iCAAiC,CAAC;AACzC,OAAO,0BAA0B,CAAC;AAElC;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,MAAM,CAAC,MAAM,0BAkCX;IAE0B,KAAK,SAAM;IACX,IAAI,SAAM;IACV,WAAW,SAAM;IACjB,KAAK,SAAU;IAC0B,SAAS,UAAS;IAEvF,MAAM;CAkBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,aAAa,CAAC;KACnC;CACF"}

package/dist/components/sw-click-to-call.js

@@ -0,0 +1,87 @@
+import { LitElement as p, html as u, css as d } from "lit";
+import { property as n, customElement as f } from "lit/decorators.js";
+var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (c, i, s, r) => {
+  for (var e = r > 1 ? void 0 : r ? b(i, s) : i, l = c.length - 1, a; l >= 0; l--)
+    (a = c[l]) && (e = (r ? a(i, s, e) : a(e)) || e);
+  return r && e && y(i, s, e), e;
+};
+let t = class extends p {
+  constructor() {
+    super(...arguments), this.token = "", this.host = "", this.destination = "", this.label = "Call", this.audioOnly = !1;
+  }
+  render() {
+    return u`
+      <sw-call-widget
+        modal
+        transcription
+        ?audio-only=${this.audioOnly}
+        .token=${this.token}
+        .host=${this.host}
+        .destination=${this.destination}
+      >
+        <sw-ui-background slot="background" default></sw-ui-background>
+        <button class="call-button" part="button">
+          <sw-ui-icon name="phone-call" size="20"></sw-ui-icon>
+          ${this.label}
+        </button>
+      </sw-call-widget>
+    `;
+  }
+};
+t.styles = d`
+    :host {
+      display: inline-block;
+      font-family: var(--type-family-body);
+    }
+
+    .call-button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      padding: 12px 20px;
+      background: var(--interactive-status-success);
+      color: #fff;
+      border: none;
+      border-radius: var(--radius-md);
+      font-family: inherit;
+      font-size: var(--type-size-body);
+      font-weight: 600;
+      cursor: pointer;
+      transition: filter var(--transition-fast), transform 0.1s ease;
+    }
+
+    .call-button:hover {
+      filter: brightness(0.9);
+    }
+
+    .call-button:active {
+      transform: scale(0.98);
+    }
+
+    .call-button sw-ui-icon {
+      pointer-events: none;
+    }
+  `;
+o([
+  n({ type: String })
+], t.prototype, "token", 2);
+o([
+  n({ type: String })
+], t.prototype, "host", 2);
+o([
+  n({ type: String })
+], t.prototype, "destination", 2);
+o([
+  n({ type: String })
+], t.prototype, "label", 2);
+o([
+  n({ type: Boolean, reflect: !0, attribute: "audio-only" })
+], t.prototype, "audioOnly", 2);
+t = o([
+  f("sw-click-to-call")
+], t);
+export {
+  t as SwClickToCall
+};
+//# sourceMappingURL=sw-click-to-call.js.map

package/dist/components/sw-click-to-call.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-click-to-call.js","sources":["../../src/components/sw-click-to-call.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport './sw-call-widget/sw-call-widget.js';\nimport './UI/layout/sw-ui-background.js';\nimport './UI/icons/sw-ui-icon.js';\n\n/**\n * Click-to-call button that opens a full call widget.\n *\n * Thin wrapper around `sw-call-widget` in modal mode. Renders a styled\n * call button; clicking it dials the preconfigured destination and opens\n * the call UI in a modal overlay.\n *\n * @prop {string} token       - SignalWire SAT or embed token\n * @prop {string} host        - Optional server host\n * @prop {string} destination - Call destination (address or resource)\n * @prop {string} label       - Button text (default \"Call\")\n * @prop {boolean} audioOnly  - Audio-only mode (no video send/receive)\n *\n * @fires sw-dial        - Fired when the call is initiated. Detail: `{ destination }`.\n * @fires sw-call-ended  - Fired when the call reaches a terminal state (any reason). Detail: `{ status }`.\n * @fires sw-call-hangup - Fired when the user clicks the hangup button (does not fire on remote disconnect).\n *\n * Themed via the SignalWire DTCG tokens (`--interactive-status-success`,\n * `--type-family-body`, `--type-size-body`, `--radius-md`, `--transition-fast`).\n */\n@customElement('sw-click-to-call')\nexport class SwClickToCall extends LitElement {\n  static styles = css`\n    :host {\n      display: inline-block;\n      font-family: var(--type-family-body);\n    }\n\n    .call-button {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      padding: 12px 20px;\n      background: var(--interactive-status-success);\n      color: #fff;\n      border: none;\n      border-radius: var(--radius-md);\n      font-family: inherit;\n      font-size: var(--type-size-body);\n      font-weight: 600;\n      cursor: pointer;\n      transition: filter var(--transition-fast), transform 0.1s ease;\n    }\n\n    .call-button:hover {\n      filter: brightness(0.9);\n    }\n\n    .call-button:active {\n      transform: scale(0.98);\n    }\n\n    .call-button sw-ui-icon {\n      pointer-events: none;\n    }\n  `;\n\n  @property({ type: String }) token = '';\n  @property({ type: String }) host = '';\n  @property({ type: String }) destination = '';\n  @property({ type: String }) label = 'Call';\n  @property({ type: Boolean, reflect: true, attribute: 'audio-only' }) audioOnly = false;\n\n  render() {\n    return html`\n      <sw-call-widget\n        modal\n        transcription\n        ?audio-only=${this.audioOnly}\n        .token=${this.token}\n        .host=${this.host}\n        .destination=${this.destination}\n      >\n        <sw-ui-background slot=\"background\" default></sw-ui-background>\n        <button class=\"call-button\" part=\"button\">\n          <sw-ui-icon name=\"phone-call\" size=\"20\"></sw-ui-icon>\n          ${this.label}\n        </button>\n      </sw-call-widget>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-click-to-call': SwClickToCall;\n  }\n}\n"],"names":["SwClickToCall","LitElement","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;;AA2BO,IAAMA,IAAN,cAA4BC,EAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA,GAqCuB,KAAA,QAAQ,IACR,KAAA,OAAO,IACP,KAAA,cAAc,IACd,KAAA,QAAQ,QACiC,KAAA,YAAY;AAAA,EAAA;AAAA,EAEjF,SAAS;AACP,WAAOC;AAAA;AAAA;AAAA;AAAA,sBAIW,KAAK,SAAS;AAAA,iBACnB,KAAK,KAAK;AAAA,gBACX,KAAK,IAAI;AAAA,uBACF,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,YAK3B,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA,EAIpB;AACF;AA7DaF,EACJ,SAASG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoCYC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GArCfL,EAqCiB,WAAA,SAAA,CAAA;AACAI,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAtCfL,EAsCiB,WAAA,QAAA,CAAA;AACAI,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAvCfL,EAuCiB,WAAA,eAAA,CAAA;AACAI,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAxCfL,EAwCiB,WAAA,SAAA,CAAA;AACyCI,EAAA;AAAA,EAApEC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM,WAAW,cAAc;AAAA,GAzCxDL,EAyC0D,WAAA,aAAA,CAAA;AAzC1DA,IAANI,EAAA;AAAA,EADNE,EAAc,kBAAkB;AAAA,GACpBN,CAAA;"}

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

@@ -0,0 +1,2 @@
+export { SwDeviceSelector } from './sw-device-selector.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/sw-device-selector/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC"}

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

@@ -0,0 +1,69 @@
+import { LitElement } from 'lit';
+import type { DeviceController } from '@signalwire/js';
+import '../UI/icons/sw-ui-icon.js';
+import '../sw-local-camera.js';
+import '../sw-audio-level.js';
+/**
+ * Single-button device settings popover. Opens a panel above the button
+ * with sections for Microphone, Camera, and Speaker selection.
+ *
+ * When `show-preview` is enabled, the open panel also renders a live
+ * camera preview, a microphone level meter for the currently selected
+ * input devices, and a "Test speaker" button that plays a short tone
+ * through the selected output.
+ *
+ * @fires sw-device-change - User picked a device. Detail: `{ type: 'microphone'|'camera'|'speaker', device: MediaDeviceInfo }`.
+ * @cssprop --ctrl-*  - all primitive ctrl tokens
+ */
+export declare class SwDeviceSelector extends LitElement {
+    static styles: import("lit").CSSResult;
+    deviceController?: DeviceController;
+    /**
+     * Render inline previews (camera video, mic level, speaker test) inside
+     * each section while the panel is open. Streams are acquired only while
+     * the panel is open and stopped when it closes.
+     */
+    showPreview: boolean;
+    private _videoStream;
+    private _audioStream;
+    private _testingSpeaker;
+    private _audioIn;
+    private _videoIn;
+    private _audioOut;
+    private _selAudioIn;
+    private _selVideoIn;
+    private _selAudioOut;
+    private _open;
+    private _subs;
+    private _onDocumentClick;
+    connectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: Map<string, unknown>): void;
+    private _subscribe;
+    private _unsubscribe;
+    private _toggle;
+    private _selectMic;
+    private _selectCamera;
+    private _selectSpeaker;
+    private _startVideoPreview;
+    private _stopVideoPreview;
+    private _startAudioPreview;
+    private _stopAudioPreview;
+    private static readonly _TEST_TONE_DATA_URI;
+    private _testAudio?;
+    private _testSpeaker;
+    private _stopTestTone;
+    private _emitChange;
+    private _renderSection;
+    private _renderCameraPreview;
+    private _renderMicPreview;
+    private _renderSpeakerPreview;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sw-device-selector': SwDeviceSelector;
+    }
+}
+//# sourceMappingURL=sw-device-selector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sw-device-selector.d.ts","sourceRoot":"","sources":["../../../src/components/sw-device-selector/sw-device-selector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAGhD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIvD,OAAO,2BAA2B,CAAC;AACnC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,sBAAsB,CAAC;AAQ9B;;;;;;;;;;;GAWG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,MAAM,CAAC,MAAM,0BAAwB;IAET,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IAEhE;;;;OAIG;IAEH,WAAW,UAAS;IAEX,OAAO,CAAC,YAAY,CAA4B;IAChD,OAAO,CAAC,YAAY,CAA4B;IAChD,OAAO,CAAC,eAAe,CAAS;IAEhC,OAAO,CAAC,QAAQ,CAAyB;IACzC,OAAO,CAAC,QAAQ,CAAyB;IACzC,OAAO,CAAC,SAAS,CAAyB;IAC1C,OAAO,CAAC,WAAW,CAAgC;IACnD,OAAO,CAAC,WAAW,CAAgC;IACnD,OAAO,CAAC,YAAY,CAAgC;IACpD,OAAO,CAAC,KAAK,CAAS;IAE/B,OAAO,CAAC,KAAK,CAAsB;IAEnC,OAAO,CAAC,gBAAgB,CAEtB;IAEF,iBAAiB;IAMjB,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAQtD,oBAAoB;IASpB,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IA+BzD,OAAO,CAAC,UAAU;IAgBlB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,OAAO;IAKf,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,cAAc;YASR,kBAAkB;IAYhC,OAAO,CAAC,iBAAiB;YAKX,kBAAkB;IAYhC,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,mBAAmB,CACwqC;IAEntC,OAAO,CAAC,UAAU,CAAC,CAAyB;YAE9B,YAAY;IA2B1B,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,cAAc;IAmCtB,OAAO,CAAC,oBAAoB;IAW5B,OAAO,CAAC,iBAAiB;IAgBzB,OAAO,CAAC,qBAAqB;IAmB7B,MAAM;CA8BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}