@signalwire/web-components 4.0.0-beta.9 → 4.0.0-dev-20260515133934

package/dist/components/sw-call-provider.d.ts

@@ -0,0 +1,41 @@
+import { LitElement } from 'lit';
+import type { Call, DeviceController } from '../types/index.js';
+/**
+ * Context provider element that bridges an external `Call` and/or
+ * `DeviceController` into Lit context so any descendant web component
+ * (sw-call-media, sw-call-controls, sw-participants, etc.) receives live
+ * state without manual property wiring.
+ *
+ * Usage:
+ *   ```html
+ *   <sw-call-provider id="provider">
+ *     <sw-call-media></sw-call-media>
+ *     <sw-call-controls></sw-call-controls>
+ *   </sw-call-provider>
+ *   ```
+ *   ```js
+ *   provider.call = activeCall;
+ *   provider.deviceController = signalWireClient;
+ *   ```
+ *
+ * @prop {Call}             call             - Active call object
+ * @prop {DeviceController} deviceController - Device controller for input/output device management
+ *
+ * @slot - Default slot. Descendants consume the provided contexts.
+ */
+export declare class SwCallProvider extends LitElement {
+    static styles: import("lit").CSSResult;
+    call: Call | undefined;
+    deviceController: DeviceController | undefined;
+    private _callState;
+    private _devices;
+    protected updated(changed: Map<string, unknown>): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sw-call-provider': SwCallProvider;
+    }
+}
+//# sourceMappingURL=sw-call-provider.d.ts.map

package/dist/components/sw-call-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-call-provider.d.ts","sourceRoot":"","sources":["../../src/components/sw-call-provider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,KAAK,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAIhE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,MAAM,CAAC,MAAM,0BAAqC;IAElB,IAAI,EAAE,IAAI,GAAG,SAAS,CAAa;IACnC,gBAAgB,EAAE,gBAAgB,GAAG,SAAS,CAAa;IAE3F,OAAO,CAAC,UAAU,CAAwC;IAC1D,OAAO,CAAC,QAAQ,CAAsC;IAEtD,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAkBtD,oBAAoB,IAAI,IAAI;IAM5B,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

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

@@ -0,0 +1,37 @@
+import { LitElement as d, html as p, css as v } from "lit";
+import { property as a, customElement as h } from "lit/decorators.js";
+import { CallStateContextController as C } from "../context/CallStateContextController.js";
+import { DevicesContextController as _ } from "../context/DevicesContextController.js";
+var f = Object.defineProperty, m = Object.getOwnPropertyDescriptor, n = (t, s, r, o) => {
+  for (var e = o > 1 ? void 0 : o ? m(s, r) : s, i = t.length - 1, c; i >= 0; i--)
+    (c = t[i]) && (e = (o ? c(s, r, e) : c(e)) || e);
+  return o && e && f(s, r, e), e;
+};
+let l = class extends d {
+  constructor() {
+    super(...arguments), this.call = void 0, this.deviceController = void 0, this._callState = new C(this), this._devices = new _(this);
+  }
+  updated(t) {
+    super.updated(t), t.has("call") && (this.call ? (this._callState.connect(this.call), this._devices.connectCall(this.call)) : (this._callState.disconnect(), this._devices.disconnectCall())), t.has("deviceController") && this.deviceController && this._devices.connectDevices(this.deviceController);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._callState.disconnect(), this._devices.disconnect();
+  }
+  render() {
+    return p`<slot></slot>`;
+  }
+};
+l.styles = v`:host { display: contents; }`;
+n([
+  a({ attribute: !1 })
+], l.prototype, "call", 2);
+n([
+  a({ attribute: !1 })
+], l.prototype, "deviceController", 2);
+l = n([
+  h("sw-call-provider")
+], l);
+export {
+  l as SwCallProvider
+};
+//# sourceMappingURL=sw-call-provider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sw-call-provider.js","sources":["../../src/components/sw-call-provider.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type { Call, DeviceController } from '../types/index.js';\nimport { CallStateContextController } from '../context/CallStateContextController.js';\nimport { DevicesContextController } from '../context/DevicesContextController.js';\n\n/**\n * Context provider element that bridges an external `Call` and/or\n * `DeviceController` into Lit context so any descendant web component\n * (sw-call-media, sw-call-controls, sw-participants, etc.) receives live\n * state without manual property wiring.\n *\n * Usage:\n *   ```html\n *   <sw-call-provider id=\"provider\">\n *     <sw-call-media></sw-call-media>\n *     <sw-call-controls></sw-call-controls>\n *   </sw-call-provider>\n *   ```\n *   ```js\n *   provider.call = activeCall;\n *   provider.deviceController = signalWireClient;\n *   ```\n *\n * @prop {Call}             call             - Active call object\n * @prop {DeviceController} deviceController - Device controller for input/output device management\n *\n * @slot - Default slot. Descendants consume the provided contexts.\n */\n@customElement('sw-call-provider')\nexport class SwCallProvider extends LitElement {\n  static styles = css`:host { display: contents; }`;\n\n  @property({ attribute: false }) call: Call | undefined = undefined;\n  @property({ attribute: false }) deviceController: DeviceController | undefined = undefined;\n\n  private _callState = new CallStateContextController(this);\n  private _devices = new DevicesContextController(this);\n\n  protected updated(changed: Map<string, unknown>): void {\n    super.updated(changed);\n\n    if (changed.has('call')) {\n      if (this.call) {\n        this._callState.connect(this.call);\n        this._devices.connectCall(this.call);\n      } else {\n        this._callState.disconnect();\n        this._devices.disconnectCall();\n      }\n    }\n\n    if (changed.has('deviceController') && this.deviceController) {\n      this._devices.connectDevices(this.deviceController);\n    }\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._callState.disconnect();\n    this._devices.disconnect();\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-call-provider': SwCallProvider;\n  }\n}\n"],"names":["SwCallProvider","LitElement","CallStateContextController","DevicesContextController","changed","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;;AA8BO,IAAMA,IAAN,cAA6BC,EAAW;AAAA,EAAxC,cAAA;AAAA,UAAA,GAAA,SAAA,GAG2B,KAAA,OAAyB,QACzB,KAAA,mBAAiD,QAEjF,KAAQ,aAAa,IAAIC,EAA2B,IAAI,GACxD,KAAQ,WAAW,IAAIC,EAAyB,IAAI;AAAA,EAAA;AAAA,EAE1C,QAAQC,GAAqC;AACrD,UAAM,QAAQA,CAAO,GAEjBA,EAAQ,IAAI,MAAM,MAChB,KAAK,QACP,KAAK,WAAW,QAAQ,KAAK,IAAI,GACjC,KAAK,SAAS,YAAY,KAAK,IAAI,MAEnC,KAAK,WAAW,WAAA,GAChB,KAAK,SAAS,eAAA,KAIdA,EAAQ,IAAI,kBAAkB,KAAK,KAAK,oBAC1C,KAAK,SAAS,eAAe,KAAK,gBAAgB;AAAA,EAEtD;AAAA,EAEA,uBAA6B;AAC3B,UAAM,qBAAA,GACN,KAAK,WAAW,WAAA,GAChB,KAAK,SAAS,WAAA;AAAA,EAChB;AAAA,EAEA,SAAS;AACP,WAAOC;AAAA,EACT;AACF;AApCaL,EACJ,SAASM;AAEgBC,EAAA;AAAA,EAA/BC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GAHnBR,EAGqB,WAAA,QAAA,CAAA;AACAO,EAAA;AAAA,EAA/BC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GAJnBR,EAIqB,WAAA,oBAAA,CAAA;AAJrBA,IAANO,EAAA;AAAA,EADNE,EAAc,kBAAkB;AAAA,GACpBT,CAAA;"}

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

@@ -0,0 +1,50 @@
+/**
+ * Call Status Component
+ *
+ * Displays current call state with status text and duration timer.
+ *
+ * Input precedence (most specific wins): `.call` > context.
+ *
+ * @example
+ * ```html
+ * <!-- Inside a context provider: -->
+ * <sw-call-status></sw-call-status>
+ *
+ * <!-- Standalone with an explicit Call: -->
+ * <sw-call-status .call=${call}></sw-call-status>
+ * ```
+ *
+ * @csspart container   - Outer status container.
+ * @csspart status-text - Text label of the current status.
+ * @csspart duration    - Elapsed-time label (only rendered when connected).
+ */
+import { LitElement } from 'lit';
+import type { Call } from '../types/index.js';
+export declare class SwCallStatus extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Explicit Call — when set, subscribes directly to its observables and bypasses context. */
+    call?: Call;
+    private _callState?;
+    /** Status from a directly-subscribed `.call` — `null` when context is the source. */
+    private _directStatus;
+    private _callStartTime;
+    private _duration;
+    private _durationInterval;
+    private _prevStatus;
+    private _directSubscriptions;
+    private get _effectiveStatus();
+    protected updated(changed: Map<string, unknown>): void;
+    disconnectedCallback(): void;
+    private _setupDirect;
+    private _teardownDirect;
+    private _startDurationTimer;
+    private _stopDurationTimer;
+    private getStatusText;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sw-call-status': SwCallStatus;
+    }
+}
+//# sourceMappingURL=sw-call-status.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sw-call-status.d.ts","sourceRoot":"","sources":["../../src/components/sw-call-status.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAI9C,qBACa,YAAa,SAAQ,UAAU;IAC1C,MAAM,CAAC,MAAM,4BA4FR;IAEL,6FAA6F;IACjE,IAAI,CAAC,EAAE,IAAI,CAAC;IAIxC,OAAO,CAAC,UAAU,CAAC,CAAY;IAE/B,qFAAqF;IAC5E,OAAO,CAAC,aAAa,CAA2B;IAEhD,OAAO,CAAC,cAAc,CAAuB;IAC7C,OAAO,CAAC,SAAS,CAAU;IAEpC,OAAO,CAAC,iBAAiB,CAAuB;IAChD,OAAO,CAAC,WAAW,CAAqB;IACxC,OAAO,CAAC,oBAAoB,CAAsB;IAElD,OAAO,KAAK,gBAAgB,GAE3B;IAED,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAqBtD,oBAAoB;IAMpB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,mBAAmB;IAiB3B,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,aAAa;IA8BrB,MAAM;CAgBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

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

@@ -0,0 +1,204 @@
+import { LitElement as d, html as l, css as p } from "lit";
+import { property as h, state as c, customElement as v } from "lit/decorators.js";
+import { consume as _ } from "@lit/context";
+import { callStateContext as f } from "../context/call-state-context.js";
+import { hostReset as g } from "./UI/host-reset.js";
+var m = Object.defineProperty, S = Object.getOwnPropertyDescriptor, n = (t, e, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? S(e, r) : e, o = t.length - 1, u; o >= 0; o--)
+    (u = t[o]) && (a = (i ? u(e, r, a) : u(a)) || a);
+  return i && a && m(e, r, a), a;
+};
+let s = class extends d {
+  constructor() {
+    super(...arguments), this._directStatus = null, this._callStartTime = null, this._duration = "0:00", this._durationInterval = null, this._prevStatus = "new", this._directSubscriptions = [];
+  }
+  get _effectiveStatus() {
+    var t;
+    return this.call ? this._directStatus ?? "new" : ((t = this._callState) == null ? void 0 : t.status) ?? "new";
+  }
+  updated(t) {
+    if (super.updated(t), t.has("call") && (this._teardownDirect(), this.call && this._setupDirect(this.call)), t.has("call") || t.has("_callState") || t.has("_directStatus")) {
+      const e = this._effectiveStatus;
+      e !== this._prevStatus && (e === "connected" && this._prevStatus !== "connected" ? this._startDurationTimer() : e !== "connected" && this._stopDurationTimer(), this._prevStatus = e);
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._stopDurationTimer(), this._teardownDirect();
+  }
+  _setupDirect(t) {
+    this._directSubscriptions.push(
+      t.status$.subscribe((e) => {
+        this._directStatus = e;
+      })
+    );
+  }
+  _teardownDirect() {
+    this._directSubscriptions.forEach((t) => t.unsubscribe()), this._directSubscriptions = [], this._directStatus = null;
+  }
+  _startDurationTimer() {
+    this._callStartTime = Date.now(), this._duration = "0:00", this._durationInterval = window.setInterval(() => {
+      if (this._callStartTime) {
+        const t = Math.floor((Date.now() - this._callStartTime) / 1e3), e = Math.floor(t / 3600), r = Math.floor(t % 3600 / 60), i = t % 60;
+        this._duration = e > 0 ? `${e}:${r.toString().padStart(2, "0")}:${i.toString().padStart(2, "0")}` : `${r}:${i.toString().padStart(2, "0")}`;
+      }
+    }, 1e3);
+  }
+  _stopDurationTimer() {
+    this._durationInterval && (clearInterval(this._durationInterval), this._durationInterval = null), this._callStartTime = null, this._duration = "0:00";
+  }
+  getStatusText() {
+    const t = this._effectiveStatus;
+    switch (t) {
+      case "new":
+        return "Ready";
+      case "trying":
+        return "Trying...";
+      case "connecting":
+        return "Connecting...";
+      case "ringing":
+        return "Ringing...";
+      case "connected":
+        return "Connected";
+      case "recovering":
+        return "Reconnecting...";
+      case "disconnecting":
+        return "Disconnecting...";
+      case "disconnected":
+        return "Disconnected";
+      case "failed":
+        return "Failed";
+      case "destroyed":
+        return "Ended";
+      default:
+        return String(t);
+    }
+  }
+  render() {
+    const t = this._effectiveStatus, e = this.getStatusText();
+    return l`
+      <div class="container" part="container">
+        <span class="status-indicator ${t}" aria-hidden="true"></span>
+        <span class="status-text ${t}" part="status-text" role="status" aria-live="polite">
+          ${e}
+        </span>
+        ${t === "connected" ? l`<span class="duration" part="duration">${this._duration}</span>` : null}
+      </div>
+    `;
+  }
+};
+s.styles = [g, p`
+      :host {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        font-family: var(--type-family-body);
+        font-size: var(--type-size-small);
+      }
+
+      .container {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 12px;
+        border-radius: var(--radius-md);
+        color: var(--fg-default);
+      }
+
+      .status-indicator {
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        flex-shrink: 0;
+      }
+
+      .status-indicator.new {
+        background-color: var(--bg-surface-raised);
+      }
+      .status-indicator.connecting,
+      .status-indicator.ringing,
+      .status-indicator.trying,
+      .status-indicator.recovering {
+        background-color: var(--interactive-status-warning);
+        animation: pulse 1.5s ease-in-out infinite;
+      }
+      .status-indicator.connected {
+        background-color: var(--interactive-status-success);
+      }
+      .status-indicator.disconnecting {
+        background-color: var(--interactive-button-destructive-bg);
+        animation: pulse 1s ease-in-out infinite;
+      }
+      .status-indicator.disconnected,
+      .status-indicator.failed {
+        background-color: var(--interactive-button-destructive-bg);
+      }
+      .status-indicator.destroyed {
+        background-color: var(--bg-surface-raised);
+      }
+
+      @keyframes pulse {
+        0%,
+        100% {
+          opacity: 1;
+          transform: scale(1);
+        }
+        50% {
+          opacity: 0.5;
+          transform: scale(1.1);
+        }
+      }
+
+      .status-text {
+        font-weight: 500;
+        white-space: nowrap;
+      }
+      .status-text.trying,
+      .status-text.connecting,
+      .status-text.ringing,
+      .status-text.recovering {
+        color: var(--interactive-status-warning);
+      }
+      .status-text.disconnecting {
+        color: var(--interactive-button-destructive-bg);
+      }
+      .status-text.connected {
+        color: var(--interactive-status-success);
+      }
+      .status-text.disconnected,
+      .status-text.failed {
+        color: var(--interactive-button-destructive-bg);
+      }
+      .status-text.new,
+      .status-text.destroyed {
+        color: var(--bg-surface-raised);
+      }
+
+      .duration {
+        font-variant-numeric: tabular-nums;
+        opacity: 0.6;
+        font-size: 0.85em;
+      }
+    `];
+n([
+  h({ type: Object })
+], s.prototype, "call", 2);
+n([
+  _({ context: f, subscribe: !0 }),
+  c()
+], s.prototype, "_callState", 2);
+n([
+  c()
+], s.prototype, "_directStatus", 2);
+n([
+  c()
+], s.prototype, "_callStartTime", 2);
+n([
+  c()
+], s.prototype, "_duration", 2);
+s = n([
+  v("sw-call-status")
+], s);
+export {
+  s as SwCallStatus
+};
+//# sourceMappingURL=sw-call-status.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sw-call-status.js","sources":["../../src/components/sw-call-status.ts"],"sourcesContent":["/**\n * Call Status Component\n *\n * Displays current call state with status text and duration timer.\n *\n * Input precedence (most specific wins): `.call` > context.\n *\n * @example\n * ```html\n * <!-- Inside a context provider: -->\n * <sw-call-status></sw-call-status>\n *\n * <!-- Standalone with an explicit Call: -->\n * <sw-call-status .call=${call}></sw-call-status>\n * ```\n *\n * @csspart container   - Outer status container.\n * @csspart status-text - Text label of the current status.\n * @csspart duration    - Elapsed-time label (only rendered when connected).\n */\n\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { consume } from '@lit/context';\nimport { Subscription } from 'rxjs';\nimport type { CallStatus } from '@signalwire/js';\nimport type { Call } from '../types/index.js';\nimport { callStateContext, type CallState } from '../context/call-state-context.js';\nimport { hostReset } from './UI/host-reset.js';\n\n@customElement('sw-call-status')\nexport class SwCallStatus extends LitElement {\n  static styles = [hostReset, css`\n      :host {\n        display: inline-flex;\n        align-items: center;\n        gap: 8px;\n        font-family: var(--type-family-body);\n        font-size: var(--type-size-small);\n      }\n\n      .container {\n        display: inline-flex;\n        align-items: center;\n        gap: 8px;\n        padding: 8px 12px;\n        border-radius: var(--radius-md);\n        color: var(--fg-default);\n      }\n\n      .status-indicator {\n        width: 10px;\n        height: 10px;\n        border-radius: 50%;\n        flex-shrink: 0;\n      }\n\n      .status-indicator.new {\n        background-color: var(--bg-surface-raised);\n      }\n      .status-indicator.connecting,\n      .status-indicator.ringing,\n      .status-indicator.trying,\n      .status-indicator.recovering {\n        background-color: var(--interactive-status-warning);\n        animation: pulse 1.5s ease-in-out infinite;\n      }\n      .status-indicator.connected {\n        background-color: var(--interactive-status-success);\n      }\n      .status-indicator.disconnecting {\n        background-color: var(--interactive-button-destructive-bg);\n        animation: pulse 1s ease-in-out infinite;\n      }\n      .status-indicator.disconnected,\n      .status-indicator.failed {\n        background-color: var(--interactive-button-destructive-bg);\n      }\n      .status-indicator.destroyed {\n        background-color: var(--bg-surface-raised);\n      }\n\n      @keyframes pulse {\n        0%,\n        100% {\n          opacity: 1;\n          transform: scale(1);\n        }\n        50% {\n          opacity: 0.5;\n          transform: scale(1.1);\n        }\n      }\n\n      .status-text {\n        font-weight: 500;\n        white-space: nowrap;\n      }\n      .status-text.trying,\n      .status-text.connecting,\n      .status-text.ringing,\n      .status-text.recovering {\n        color: var(--interactive-status-warning);\n      }\n      .status-text.disconnecting {\n        color: var(--interactive-button-destructive-bg);\n      }\n      .status-text.connected {\n        color: var(--interactive-status-success);\n      }\n      .status-text.disconnected,\n      .status-text.failed {\n        color: var(--interactive-button-destructive-bg);\n      }\n      .status-text.new,\n      .status-text.destroyed {\n        color: var(--bg-surface-raised);\n      }\n\n      .duration {\n        font-variant-numeric: tabular-nums;\n        opacity: 0.6;\n        font-size: 0.85em;\n      }\n    `];\n\n  /** Explicit Call — when set, subscribes directly to its observables and bypasses context. */\n  @property({ type: Object }) call?: Call;\n\n  @consume({ context: callStateContext, subscribe: true })\n  @state()\n  private _callState?: CallState;\n\n  /** Status from a directly-subscribed `.call` — `null` when context is the source. */\n  @state() private _directStatus: CallStatus | null = null;\n\n  @state() private _callStartTime: number | null = null;\n  @state() private _duration = '0:00';\n\n  private _durationInterval: number | null = null;\n  private _prevStatus: CallStatus = 'new';\n  private _directSubscriptions: Subscription[] = [];\n\n  private get _effectiveStatus(): CallStatus {\n    return this.call ? this._directStatus ?? 'new' : this._callState?.status ?? 'new';\n  }\n\n  protected updated(changed: Map<string, unknown>): void {\n    super.updated(changed);\n\n    if (changed.has('call')) {\n      this._teardownDirect();\n      if (this.call) this._setupDirect(this.call);\n    }\n\n    if (changed.has('call') || changed.has('_callState') || changed.has('_directStatus')) {\n      const status = this._effectiveStatus;\n      if (status !== this._prevStatus) {\n        if (status === 'connected' && this._prevStatus !== 'connected') {\n          this._startDurationTimer();\n        } else if (status !== 'connected') {\n          this._stopDurationTimer();\n        }\n        this._prevStatus = status;\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._stopDurationTimer();\n    this._teardownDirect();\n  }\n\n  private _setupDirect(call: Call): void {\n    this._directSubscriptions.push(\n      call.status$.subscribe((s) => {\n        this._directStatus = s;\n      })\n    );\n  }\n\n  private _teardownDirect(): void {\n    this._directSubscriptions.forEach((s) => s.unsubscribe());\n    this._directSubscriptions = [];\n    this._directStatus = null;\n  }\n\n  private _startDurationTimer(): void {\n    this._callStartTime = Date.now();\n    this._duration = '0:00';\n    this._durationInterval = window.setInterval(() => {\n      if (this._callStartTime) {\n        const elapsed = Math.floor((Date.now() - this._callStartTime) / 1000);\n        const hours = Math.floor(elapsed / 3600);\n        const minutes = Math.floor((elapsed % 3600) / 60);\n        const secs = elapsed % 60;\n        this._duration =\n          hours > 0\n            ? `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`\n            : `${minutes}:${secs.toString().padStart(2, '0')}`;\n      }\n    }, 1000);\n  }\n\n  private _stopDurationTimer(): void {\n    if (this._durationInterval) {\n      clearInterval(this._durationInterval);\n      this._durationInterval = null;\n    }\n    this._callStartTime = null;\n    this._duration = '0:00';\n  }\n\n  private getStatusText(): string {\n    const status = this._effectiveStatus;\n    switch (status) {\n      case 'new':\n        return 'Ready';\n      case 'trying':\n        return 'Trying...';\n      case 'connecting':\n        return 'Connecting...';\n      case 'ringing':\n        return 'Ringing...';\n      case 'connected':\n        return 'Connected';\n      case 'recovering':\n        return 'Reconnecting...';\n      case 'disconnecting':\n        return 'Disconnecting...';\n      case 'disconnected':\n        return 'Disconnected';\n      case 'failed':\n        return 'Failed';\n      case 'destroyed':\n        return 'Ended';\n      default: {\n        const _exhaustive: never = status;\n        return String(_exhaustive);\n      }\n    }\n  }\n\n  render() {\n    const status = this._effectiveStatus;\n    const statusText = this.getStatusText();\n\n    return html`\n      <div class=\"container\" part=\"container\">\n        <span class=\"status-indicator ${status}\" aria-hidden=\"true\"></span>\n        <span class=\"status-text ${status}\" part=\"status-text\" role=\"status\" aria-live=\"polite\">\n          ${statusText}\n        </span>\n        ${status === 'connected'\n          ? html`<span class=\"duration\" part=\"duration\">${this._duration}</span>`\n          : null}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-call-status': SwCallStatus;\n  }\n}\n"],"names":["SwCallStatus","LitElement","_a","changed","status","call","s","elapsed","hours","minutes","secs","statusText","html","hostReset","css","__decorateClass","property","consume","callStateContext","state","customElement"],"mappings":";;;;;;;;;;AA+BO,IAAMA,IAAN,cAA2BC,EAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GAuGI,KAAQ,gBAAmC,MAE3C,KAAQ,iBAAgC,MACxC,KAAQ,YAAY,QAE7B,KAAQ,oBAAmC,MAC3C,KAAQ,cAA0B,OAClC,KAAQ,uBAAuC,CAAA;AAAA,EAAC;AAAA,EAEhD,IAAY,mBAA+B;;AACzC,WAAO,KAAK,OAAO,KAAK,iBAAiB,UAAQC,IAAA,KAAK,eAAL,gBAAAA,EAAiB,WAAU;AAAA,EAC9E;AAAA,EAEU,QAAQC,GAAqC;AAQrD,QAPA,MAAM,QAAQA,CAAO,GAEjBA,EAAQ,IAAI,MAAM,MACpB,KAAK,gBAAA,GACD,KAAK,QAAM,KAAK,aAAa,KAAK,IAAI,IAGxCA,EAAQ,IAAI,MAAM,KAAKA,EAAQ,IAAI,YAAY,KAAKA,EAAQ,IAAI,eAAe,GAAG;AACpF,YAAMC,IAAS,KAAK;AACpB,MAAIA,MAAW,KAAK,gBACdA,MAAW,eAAe,KAAK,gBAAgB,cACjD,KAAK,oBAAA,IACIA,MAAW,eACpB,KAAK,mBAAA,GAEP,KAAK,cAAcA;AAAA,IAEvB;AAAA,EACF;AAAA,EAEA,uBAAuB;AACrB,UAAM,qBAAA,GACN,KAAK,mBAAA,GACL,KAAK,gBAAA;AAAA,EACP;AAAA,EAEQ,aAAaC,GAAkB;AACrC,SAAK,qBAAqB;AAAA,MACxBA,EAAK,QAAQ,UAAU,CAACC,MAAM;AAC5B,aAAK,gBAAgBA;AAAA,MACvB,CAAC;AAAA,IAAA;AAAA,EAEL;AAAA,EAEQ,kBAAwB;AAC9B,SAAK,qBAAqB,QAAQ,CAACA,MAAMA,EAAE,aAAa,GACxD,KAAK,uBAAuB,CAAA,GAC5B,KAAK,gBAAgB;AAAA,EACvB;AAAA,EAEQ,sBAA4B;AAClC,SAAK,iBAAiB,KAAK,IAAA,GAC3B,KAAK,YAAY,QACjB,KAAK,oBAAoB,OAAO,YAAY,MAAM;AAChD,UAAI,KAAK,gBAAgB;AACvB,cAAMC,IAAU,KAAK,OAAO,KAAK,QAAQ,KAAK,kBAAkB,GAAI,GAC9DC,IAAQ,KAAK,MAAMD,IAAU,IAAI,GACjCE,IAAU,KAAK,MAAOF,IAAU,OAAQ,EAAE,GAC1CG,IAAOH,IAAU;AACvB,aAAK,YACHC,IAAQ,IACJ,GAAGA,CAAK,IAAIC,EAAQ,SAAA,EAAW,SAAS,GAAG,GAAG,CAAC,IAAIC,EAAK,SAAA,EAAW,SAAS,GAAG,GAAG,CAAC,KACnF,GAAGD,CAAO,IAAIC,EAAK,SAAA,EAAW,SAAS,GAAG,GAAG,CAAC;AAAA,MACtD;AAAA,IACF,GAAG,GAAI;AAAA,EACT;AAAA,EAEQ,qBAA2B;AACjC,IAAI,KAAK,sBACP,cAAc,KAAK,iBAAiB,GACpC,KAAK,oBAAoB,OAE3B,KAAK,iBAAiB,MACtB,KAAK,YAAY;AAAA,EACnB;AAAA,EAEQ,gBAAwB;AAC9B,UAAMN,IAAS,KAAK;AACpB,YAAQA,GAAA;AAAA,MACN,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT;AAEE,eAAO,OADoBA,CACF;AAAA,IAC3B;AAAA,EAEJ;AAAA,EAEA,SAAS;AACP,UAAMA,IAAS,KAAK,kBACdO,IAAa,KAAK,cAAA;AAExB,WAAOC;AAAA;AAAA,wCAE6BR,CAAM;AAAA,mCACXA,CAAM;AAAA,YAC7BO,CAAU;AAAA;AAAA,UAEZP,MAAW,cACTQ,2CAA8C,KAAK,SAAS,YAC5D,IAAI;AAAA;AAAA;AAAA,EAGd;AACF;AArOaZ,EACJ,SAAS,CAACa,GAAWC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KA4FzB;AAGyBC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhGfhB,EAgGiB,WAAA,QAAA,CAAA;AAIpBe,EAAA;AAAA,EAFPE,EAAQ,EAAE,SAASC,GAAkB,WAAW,IAAM;AAAA,EACtDC,EAAA;AAAM,GAnGInB,EAoGH,WAAA,cAAA,CAAA;AAGSe,EAAA;AAAA,EAAhBI,EAAA;AAAM,GAvGInB,EAuGM,WAAA,iBAAA,CAAA;AAEAe,EAAA;AAAA,EAAhBI,EAAA;AAAM,GAzGInB,EAyGM,WAAA,kBAAA,CAAA;AACAe,EAAA;AAAA,EAAhBI,EAAA;AAAM,GA1GInB,EA0GM,WAAA,aAAA,CAAA;AA1GNA,IAANe,EAAA;AAAA,EADNK,EAAc,gBAAgB;AAAA,GAClBpB,CAAA;"}

package/dist/components/sw-call-widget/client-factory.d.ts

@@ -0,0 +1,6 @@
+import { StaticCredentialProvider, EmbedTokenCredentialProvider } from '@signalwire/js';
+export declare const DEFAULT_EMBED_HOST = "embeds.signalwire.com";
+export declare function normalizeHost(h: string): string;
+export declare function isEmbedToken(t: string): boolean;
+export declare function buildCredentialProvider(token: string, host: string): EmbedTokenCredentialProvider | StaticCredentialProvider;
+//# sourceMappingURL=client-factory.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"client-factory.d.ts","sourceRoot":"","sources":["../../../src/components/sw-call-widget/client-factory.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,wBAAwB,EACxB,4BAA4B,EAC7B,MAAM,gBAAgB,CAAC;AAGxB,eAAO,MAAM,kBAAkB,0BAA0B,CAAC;AAE1D,wBAAgB,aAAa,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAO/C;AAED,wBAAgB,YAAY,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAE/C;AAED,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,2DAQlE"}

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

@@ -0,0 +1,25 @@
+import { EmbedTokenCredentialProvider as t, StaticCredentialProvider as n } from "@signalwire/js";
+const i = ["c2c_", "c2t_"], o = "embeds.signalwire.com";
+function c(r) {
+  try {
+    return new URL(r.includes("://") ? r : `https://${r}`).hostname;
+  } catch {
+    return r;
+  }
+}
+function s(r) {
+  return i.some((e) => r.startsWith(e));
+}
+function d(r, e) {
+  return s(r) ? new t(
+    c(e || o),
+    r
+  ) : new n({ token: r });
+}
+export {
+  o as DEFAULT_EMBED_HOST,
+  d as buildCredentialProvider,
+  s as isEmbedToken,
+  c as normalizeHost
+};
+//# sourceMappingURL=client-factory.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"client-factory.js","sources":["../../../src/components/sw-call-widget/client-factory.ts"],"sourcesContent":["import {\n  StaticCredentialProvider,\n  EmbedTokenCredentialProvider,\n} from '@signalwire/js';\n\nconst EMBED_TOKEN_PREFIXES = ['c2c_', 'c2t_'] as const;\nexport const DEFAULT_EMBED_HOST = 'embeds.signalwire.com';\n\nexport function normalizeHost(h: string): string {\n  try {\n    const url = new URL(h.includes('://') ? h : `https://${h}`);\n    return url.hostname;\n  } catch {\n    return h;\n  }\n}\n\nexport function isEmbedToken(t: string): boolean {\n  return EMBED_TOKEN_PREFIXES.some((p) => t.startsWith(p));\n}\n\nexport function buildCredentialProvider(token: string, host: string) {\n  if (isEmbedToken(token)) {\n    return new EmbedTokenCredentialProvider(\n      normalizeHost(host || DEFAULT_EMBED_HOST),\n      token,\n    );\n  }\n  return new StaticCredentialProvider({ token });\n}\n"],"names":["EMBED_TOKEN_PREFIXES","DEFAULT_EMBED_HOST","normalizeHost","h","isEmbedToken","t","p","buildCredentialProvider","token","host","EmbedTokenCredentialProvider","StaticCredentialProvider"],"mappings":";AAKA,MAAMA,IAAuB,CAAC,QAAQ,MAAM,GAC/BC,IAAqB;AAE3B,SAASC,EAAcC,GAAmB;AAC/C,MAAI;AAEF,WADY,IAAI,IAAIA,EAAE,SAAS,KAAK,IAAIA,IAAI,WAAWA,CAAC,EAAE,EAC/C;AAAA,EACb,QAAQ;AACN,WAAOA;AAAA,EACT;AACF;AAEO,SAASC,EAAaC,GAAoB;AAC/C,SAAOL,EAAqB,KAAK,CAACM,MAAMD,EAAE,WAAWC,CAAC,CAAC;AACzD;AAEO,SAASC,EAAwBC,GAAeC,GAAc;AACnE,SAAIL,EAAaI,CAAK,IACb,IAAIE;AAAA,IACTR,EAAcO,KAAQR,CAAkB;AAAA,IACxCO;AAAA,EAAA,IAGG,IAAIG,EAAyB,EAAE,OAAAH,GAAO;AAC/C;"}

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

@@ -0,0 +1,110 @@
+import { LitElement } from 'lit';
+import '../sw-call-media.js';
+import '../sw-local-camera.js';
+import '../sw-call-controls.js';
+import '../UI/layout/sw-ui-call-layout.js';
+import '../UI/layout/sw-ui-responsive-container.js';
+import '../UI/layout/sw-ui-modal.js';
+import '../UI/layout/sw-ui-background.js';
+import '../UI/layout/sw-ui-content-drawer.js';
+import '../UI/sw-ui-transcript-view.js';
+/**
+ * All-in-one call widget. Handles client initialisation, dialling, media,
+ * controls and optional AI transcript — in either inline or modal modes.
+ *
+ * Composes `sw-ui-call-layout`, `sw-call-media`, `sw-local-camera`,
+ * `sw-call-controls`, and `sw-ui-transcript-view` under the hood.
+ * All child components are wired via Lit context — no manual plumbing needed.
+ *
+ * @prop {string}  token         - SignalWire SAT or embed token
+ * @prop {string}  host          - Optional server host
+ * @prop {string}  destination   - Call destination (address or resource)
+ * @prop {boolean} modal         - Render in a `<sw-ui-modal>` overlay
+ * @prop {boolean} transcription - Show AI transcript panel
+ *
+ * @slot background - Background element (e.g. `<sw-ui-background default>`)
+ * @slot (default)  - Trigger element (click to dial, shown when idle)
+ *
+ * @fires sw-dial                  - When `dial()` is invoked. Detail: `{ destination }`.
+ * @fires sw-call-ended            - When the call reaches a terminal state (user hangup, remote disconnect, or failure). Detail: `{ status }`.
+ * @fires sw-display-content       - From `display_content` user event. Detail: `DisplayContentPayload`.
+ * @fires signalwire-address:event - Forwarded SignalWire custom user events.
+ *
+ * All inner events bubble.
+ *
+ * @method dial()   - Initiate call
+ * @method hangup() - End active call
+ */
+export declare class SwCallWidget extends LitElement {
+    static styles: import("lit").CSSResult[];
+    token: string;
+    host: string;
+    destination: string;
+    modal: boolean;
+    transcription: boolean;
+    allowIncomingCalls: boolean;
+    audioOnly: boolean;
+    /**
+     * Custom variables sent with the Verto invite as a JSON object.
+     *
+     * The widget always advertises `capabilities.display_content` and
+     * `metadata.widget.opened_at` so the agent can detect that the caller
+     * supports the content drawer; user-supplied keys are merged in and win
+     * on shallow conflict.
+     *
+     * Invalid JSON is logged and ignored — the call still dials.
+     *
+     * @example
+     *   <sw-call-widget user-variables='{"customer_id": "abc-123"}'></sw-call-widget>
+     */
+    userVariables: string;
+    /**
+     * Skip auto-injecting the SignalWire `theme.css` design-token stylesheet.
+     * Set this when the host page already loads `@signalwire/web-components/theme.css`
+     * or a custom theme written against the same DTCG token names.
+     */
+    disableAutoTheme: boolean;
+    /**
+     * Skip auto-loading the SignalWire brand fonts (Lexend, Instrument Sans,
+     * JetBrains Mono) from Google Fonts. Set this when fonts are self-hosted
+     * or loaded elsewhere.
+     */
+    disableAutoFonts: boolean;
+    private _call;
+    private _connecting;
+    private _hasLayoutLayers;
+    private _drawer;
+    private _callState;
+    private _devices;
+    private _transcript;
+    private _userEventCtrl;
+    private _incomingCalls;
+    private _client;
+    private _subs;
+    private _pendingIncoming;
+    connectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    disconnectedCallback(): void;
+    private _destroyClient;
+    private _refreshClient;
+    dial(): Promise<void>;
+    hangup(): Promise<void>;
+    private _connectIncomingCalls;
+    private _handleIncomingCall;
+    private _wireCall;
+    private _onDisplayContent;
+    private _onDrawerClose;
+    private _unwireCall;
+    private _onSlotChange;
+    private _onHangUp;
+    private _onModalClose;
+    private _onFullscreenToggle;
+    private _onTranscriptToggle;
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sw-call-widget': SwCallWidget;
+    }
+}
+//# sourceMappingURL=sw-call-widget.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sw-call-widget.d.ts","sourceRoot":"","sources":["../../../src/components/sw-call-widget/sw-call-widget.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAchD,OAAO,qBAAqB,CAAC;AAC7B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,4CAA4C,CAAC;AACpD,OAAO,6BAA6B,CAAC;AACrC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,sCAAsC,CAAC;AAC9C,OAAO,gCAAgC,CAAC;AAkBxC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,MAAM,CAAC,MAAM,4BAA6B;IAId,KAAK,SAAM;IACX,IAAI,SAAM;IACV,WAAW,SAAM;IACD,KAAK,UAAS;IACd,aAAa,UAAS;IACa,kBAAkB,UAAS;IACrC,SAAS,UAAS;IAEvF;;;;;;;;;;;;OAYG;IACsD,aAAa,SAAM;IAE5E;;;;OAIG;IAC0E,gBAAgB,UAAS;IAEtG;;;;OAIG;IAC0E,gBAAgB,UAAS;IAI7F,OAAO,CAAC,KAAK,CAAqB;IAClC,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,gBAAgB,CAAS;IACjC,OAAO,CAAC,OAAO,CAAsC;IAI9D,OAAO,CAAC,UAAU,CAAwC;IAC1D,OAAO,CAAC,QAAQ,CAAsC;IACtD,OAAO,CAAC,WAAW,CAAwD;IAC3E,OAAO,CAAC,cAAc,CAAiC;IACvD,OAAO,CAAC,cAAc,CAAoC;IAI1D,OAAO,CAAC,OAAO,CAA2B;IAC1C,OAAO,CAAC,KAAK,CAAsB;IACnC,OAAO,CAAC,gBAAgB,CAAS;IAIjC,iBAAiB,IAAI,IAAI;IAMzB,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAsBtD,oBAAoB,IAAI,IAAI;IAO5B,OAAO,CAAC,cAAc;IAwBtB,OAAO,CAAC,cAAc;IAoBhB,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;IAoDrB,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;IAQ7B,OAAO,CAAC,qBAAqB;IAc7B,OAAO,CAAC,mBAAmB,CAyBzB;IAIF,OAAO,CAAC,SAAS;IAoCjB,OAAO,CAAC,iBAAiB,CASvB;IAEF,OAAO,CAAC,cAAc,CAEpB;IAEF,OAAO,CAAC,WAAW;IA6BnB,OAAO,CAAC,aAAa;IAWrB,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,aAAa,CAYnB;IAEF,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,mBAAmB;IAM3B,MAAM;CAgCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}