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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"sw-local-camera.js","sources":["../../src/components/sw-local-camera.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { consume } from '@lit/context';\nimport { Subscription } from 'rxjs';\nimport { attachMediaStream, detachMediaStream } from '../utils/video.js';\nimport { callStateContext, type CallState } from '../context/call-state-context.js';\nimport { devicesContext, type DevicesState } from '../context/devices-context.js';\nimport type { Call } from '../types/index.js';\nimport './UI/icons/sw-ui-icon.js';\n\n/**\n * Local camera preview. Adapts its aspect-ratio to match the actual\n * video track (landscape or portrait).\n *\n * Input precedence : `.stream`/`.videoMuted` > `.call` > context.\n *\n * @prop {MediaStream|null} stream     - explicit stream (overrides .call and context)\n * @prop {boolean}          videoMuted - explicit muted flag (overrides context)\n * @prop {Call}             call       - explicit Call object (overrides context)\n * @prop {boolean}          mirror     - mirror the video horizontally\n *\n * @csspart video       - The `<video>` element.\n * @csspart placeholder - Camera-off overlay shown while muted.\n *\n * @cssprop [--sw-local-camera-aspect=16/9] - Aspect ratio; auto-set from track settings when available.\n */\n@customElement('sw-local-camera')\nexport class SwLocalCamera extends LitElement {\n  /** Explicit stream — highest precedence. */\n  @property({ attribute: false }) stream: MediaStream | null = null;\n\n  /** Explicit muted flag — overrides devicesContext.videoMuted. */\n  @property({ type: Boolean, reflect: true, attribute: 'video-muted' }) videoMuted?: boolean;\n\n  /** Explicit Call — used when `.stream` is not set. Bypasses context. */\n  @property({ type: Object }) call?: Call;\n\n  @property({ type: Boolean, reflect: true }) mirror = false;\n\n  @consume({ context: callStateContext, subscribe: true })\n  @state()\n  private _callState?: CallState;\n\n  @consume({ context: devicesContext, subscribe: true })\n  @state()\n  private _devicesState?: DevicesState;\n\n  @state() private _directLocalStream: MediaStream | null = null;\n\n  private _directSubscriptions: Subscription[] = [];\n\n  /** Detected aspect ratio from the video track, e.g. \"16 / 9\" or \"9 / 16\". */\n  @state() private _aspectRatio = '16 / 9';\n\n  /** Last stream reference attached to the video element — used to skip no-op re-attaches. */\n  private _attachedStream: MediaStream | null = null;\n\n  static styles = css`\n    :host {\n      display: block;\n      width: 100%;\n      aspect-ratio: var(--sw-local-camera-aspect, 16 / 9);\n      position: relative;\n      background: #000;\n      border-radius: inherit;\n    }\n\n    video {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      display: block;\n      border-radius: inherit;\n    }\n\n    :host([mirror]) video {\n      transform: scaleX(-1);\n    }\n\n    .muted-overlay {\n      position: absolute;\n      inset: 0;\n      z-index: 1;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: var(--bg-page);\n      border-radius: inherit;\n    }\n\n    .muted-overlay sw-ui-icon {\n      color: var(--bg-surface-raised);\n    }\n  `;\n\n  private get _effectiveStream(): MediaStream | null {\n    if (this.stream) return this.stream;\n    if (this.call) return this._directLocalStream;\n    return this._callState?.localStream ?? null;\n  }\n\n  private get _effectiveMuted(): boolean {\n    return this.videoMuted ?? this._devicesState?.videoMuted ?? false;\n  }\n\n  protected firstUpdated(): void {\n    // Mirror the anti-pause handler from createVideoElement so Safari/Firefox\n    // camera-switch pauses don't leave the preview stuck.\n    const video = this.shadowRoot?.querySelector('video') as HTMLVideoElement | null;\n    if (video) {\n      video.addEventListener('pause', () => {\n        if (!this._effectiveMuted) {\n          video.play().catch(() => {});\n        }\n      });\n    }\n  }\n\n  protected updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('call')) {\n      this._teardownDirect();\n      if (this.call) this._setupDirect(this.call);\n    }\n\n    const effectiveStream = this._effectiveStream;\n\n    // Only re-attach when the stream reference genuinely changes.\n    // The SDK mutates the same MediaStream object (adds/removes tracks) so\n    // setting srcObject to the same reference is a browser no-op and can\n    // cause a black frame flash on every unrelated context update.\n    const streamRefChanged =\n      changedProperties.has('stream') ||\n      changedProperties.has('call') ||\n      changedProperties.has('_directLocalStream') ||\n      (changedProperties.has('_callState') && effectiveStream !== this._attachedStream);\n\n    if (streamRefChanged) {\n      const video = this.shadowRoot?.querySelector('video') as HTMLVideoElement | null;\n      if (video) {\n        this._attachedStream = effectiveStream;\n        attachMediaStream(video, effectiveStream);\n        this._detectAspectRatio();\n      }\n    }\n\n    // Ensure playback resumes after unmute or after a new stream is attached.\n    // Do NOT guard with video.paused — after mute/unmute the element can be in\n    // a \"stalled\" or \"waiting\" state where paused===false but nothing plays.\n    if (\n      changedProperties.has('videoMuted') ||\n      changedProperties.has('_devicesState') ||\n      streamRefChanged\n    ) {\n      if (!this._effectiveMuted) {\n        const video = this.shadowRoot?.querySelector('video') as HTMLVideoElement | null;\n        if (video) {\n          video.play().catch(() => {});\n        }\n      }\n    }\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    const video = this.shadowRoot?.querySelector('video') as HTMLVideoElement | null;\n    if (video) detachMediaStream(video);\n    this._teardownDirect();\n  }\n\n  private _setupDirect(call: Call): void {\n    this._directSubscriptions.push(\n      call.localStream$.subscribe((s) => (this._directLocalStream = s))\n    );\n  }\n\n  private _teardownDirect(): void {\n    this._directSubscriptions.forEach((s) => s.unsubscribe());\n    this._directSubscriptions = [];\n    this._directLocalStream = null;\n  }\n\n  /** Read the video track settings and set the CSS custom property. */\n  private _detectAspectRatio(): void {\n    const stream = this._effectiveStream;\n    if (!stream) return;\n\n    const track = stream.getVideoTracks()[0];\n    if (!track) return;\n\n    const settings = track.getSettings();\n    const w = settings.width;\n    const h = settings.height;\n\n    if (w && h && w > 0 && h > 0) {\n      this._aspectRatio = `${w} / ${h}`;\n      this.style.setProperty('--sw-local-camera-aspect', this._aspectRatio);\n    }\n  }\n\n  render() {\n    return html`\n      <video part=\"video\" autoplay playsinline muted></video>\n      ${this._effectiveMuted\n        ? html`<div part=\"placeholder\" class=\"muted-overlay\">\n            <sw-ui-icon name=\"camera-off\" size=\"28\"></sw-ui-icon>\n          </div>`\n        : null}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-local-camera': SwLocalCamera;\n  }\n}\n"],"names":["SwLocalCamera","LitElement","_a","video","changedProperties","effectiveStream","streamRefChanged","attachMediaStream","_b","call","s","stream","track","settings","w","h","html","css","__decorateClass","property","consume","callStateContext","state","devicesContext","customElement"],"mappings":"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"}

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

@@ -0,0 +1,58 @@
+/**
+ * Per-participant control panel.
+ *
+ * Takes a `participant-id` and looks up the participant.
+ * Shows mute audio, mute video, volume, pin, and remove actions based on
+ * the `capabilities` list from the call state.
+ *
+ * Input precedence (most specific wins): `.call` > context.
+ *
+ * @prop {string} participantId - ID of the participant to control
+ * @prop {Call}    call         - explicit Call object (overrides context)
+ * @prop {boolean} showVolume   - show volume slider
+ * @prop {boolean} showPin      - show pin/spotlight button
+ *
+ * @fires sw-participant-volume-change - Volume slider changed. Detail: `{ participantId: string, volume: number }`.
+ * @fires sw-participant-pin-toggle    - Pin/unpin clicked. Detail: `{ participantId: string, pinned: boolean }`.
+ *
+ * Themed via the SignalWire DTCG tokens (`--bg-page`, `--bg-surface`, `--bg-surface-raised`,
+ * `--fg-default`, `--border-default`, `--radius-md`, `--shadow-md`, `--type-family-body`,
+ * `--type-size-small`, `--interactive-button-destructive-bg`,
+ * `--interactive-button-destructive-hover`, `--transition-fast`).
+ */
+import { LitElement } from 'lit';
+import type { Call } from '../types/index.js';
+import './UI/icons/sw-ui-icon.js';
+export declare class SwParticipantControls extends LitElement {
+    static styles: import("lit").CSSResult[];
+    participantId: string;
+    showVolume: boolean;
+    showPin: boolean;
+    private _callState?;
+    /** Explicit Call — when set, subscribes directly and bypasses context. */
+    call?: Call;
+    private _directParticipants;
+    private _directCapabilities;
+    private _directSubscriptions;
+    private _volume;
+    private _isPinned;
+    protected updated(changed: Map<string, unknown>): void;
+    disconnectedCallback(): void;
+    private get _participant();
+    private get _capabilities();
+    private get _canMuteAudio();
+    private get _canMuteVideo();
+    private get _canRemove();
+    private _toggleAudioMute;
+    private _toggleVideoMute;
+    private _remove;
+    private _onVolumeChange;
+    private _togglePin;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sw-participant-controls': SwParticipantControls;
+    }
+}
+//# sourceMappingURL=sw-participant-controls.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sw-participant-controls.d.ts","sourceRoot":"","sources":["../../src/components/sw-participant-controls.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAMrD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAE9C,OAAO,0BAA0B,CAAC;AAKlC,qBACa,qBAAsB,SAAQ,UAAU;IACnD,MAAM,CAAC,MAAM,4BAyHV;IAGH,aAAa,SAAM;IAGnB,UAAU,UAAS;IAGnB,OAAO,UAAS;IAIhB,OAAO,CAAC,UAAU,CAAC,CAAY;IAE/B,0EAA0E;IAC9C,IAAI,CAAC,EAAE,IAAI,CAAC;IAE/B,OAAO,CAAC,mBAAmB,CAAyB;IACpD,OAAO,CAAC,mBAAmB,CAAgB;IAEpD,OAAO,CAAC,oBAAoB,CAAsB;IAEzC,OAAO,CAAC,OAAO,CAAO;IACtB,OAAO,CAAC,SAAS,CAAS;IAEnC,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAgBtD,oBAAoB;IAQpB,OAAO,KAAK,YAAY,GAGvB;IAED,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,KAAK,UAAU,GAErB;YAIa,gBAAgB;YAchB,gBAAgB;YAchB,OAAO;IAUrB,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,UAAU;IAalB,MAAM;CAsEP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,qBAAqB,CAAC;KAClD;CACF"}

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

@@ -0,0 +1,306 @@
+import { LitElement as b, html as r, nothing as s, css as m } from "lit";
+import { property as l, state as c, customElement as v } from "lit/decorators.js";
+import { consume as g } from "@lit/context";
+import { callStateContext as f } from "../context/call-state-context.js";
+import { getLogger as _ } from "@signalwire/js";
+import { hostReset as w } from "./UI/host-reset.js";
+var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, a = (t, i, n, p) => {
+  for (var o = p > 1 ? void 0 : p ? x(i, n) : i, u = t.length - 1, d; u >= 0; u--)
+    (d = t[u]) && (o = (p ? d(i, n, o) : d(o)) || o);
+  return p && o && y(i, n, o), o;
+};
+const h = _();
+let e = class extends b {
+  constructor() {
+    super(...arguments), this.participantId = "", this.showVolume = !1, this.showPin = !1, this._directParticipants = [], this._directCapabilities = [], this._directSubscriptions = [], this._volume = 100, this._isPinned = !1;
+  }
+  updated(t) {
+    super.updated(t), t.has("call") && (this._directSubscriptions.forEach((i) => i.unsubscribe()), this._directSubscriptions = [], this._directParticipants = [], this._directCapabilities = [], this.call && this._directSubscriptions.push(
+      this.call.participants$.subscribe((i) => this._directParticipants = i),
+      this.call.capabilities$.subscribe((i) => this._directCapabilities = i)
+    ));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._directSubscriptions.forEach((t) => t.unsubscribe()), this._directSubscriptions = [];
+  }
+  // ── Derived state ──────────────────────────────────────────────────
+  get _participant() {
+    var i;
+    return (this.call ? this._directParticipants : ((i = this._callState) == null ? void 0 : i.participants) ?? []).find((n) => n.id === this.participantId);
+  }
+  get _capabilities() {
+    var t;
+    return this.call ? this._directCapabilities : ((t = this._callState) == null ? void 0 : t.capabilities) ?? [];
+  }
+  get _canMuteAudio() {
+    return this._capabilities.includes("memberMuteAudio");
+  }
+  get _canMuteVideo() {
+    return this._capabilities.includes("memberMuteVideo");
+  }
+  get _canRemove() {
+    return this._capabilities.includes("memberRemove");
+  }
+  // ── Actions ────────────────────────────────────────────────────────
+  async _toggleAudioMute() {
+    const t = this._participant;
+    if (t)
+      try {
+        t.audioMuted ? await t.unmute() : await t.mute();
+      } catch (i) {
+        h.error("[ParticipantControls] Toggle audio failed:", i);
+      }
+  }
+  async _toggleVideoMute() {
+    const t = this._participant;
+    if (t)
+      try {
+        t.videoMuted ? await t.unmuteVideo() : await t.muteVideo();
+      } catch (i) {
+        h.error("[ParticipantControls] Toggle video failed:", i);
+      }
+  }
+  async _remove() {
+    const t = this._participant;
+    if (t != null && t.remove)
+      try {
+        await t.remove();
+      } catch (i) {
+        h.error("[ParticipantControls] Remove failed:", i);
+      }
+  }
+  _onVolumeChange(t) {
+    this._volume = parseInt(t.target.value, 10), this.dispatchEvent(
+      new CustomEvent("sw-participant-volume-change", {
+        detail: { participantId: this.participantId, volume: this._volume },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _togglePin() {
+    this._isPinned = !this._isPinned, this.dispatchEvent(
+      new CustomEvent("sw-participant-pin-toggle", {
+        detail: { participantId: this.participantId, pinned: this._isPinned },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  // ── Render ─────────────────────────────────────────────────────────
+  render() {
+    const t = this._participant;
+    if (!t) return r`<div class="panel"><div class="empty">Participant not found</div></div>`;
+    const i = this._canMuteAudio || this._canMuteVideo || this._canRemove || this.showVolume || this.showPin;
+    return r`
+      <div class="panel" part="panel">
+        <div class="name" part="name">${t.name ?? "Participant"}</div>
+
+        <div class="actions">
+          ${i ? s : r`<div class="empty">No actions available</div>`}
+
+          ${this._canMuteAudio ? r`
+                <button class=${t.audioMuted ? "active" : ""} @click=${this._toggleAudioMute}>
+                  <sw-ui-icon name=${t.audioMuted ? "mic-off" : "mic-on"} size="14"></sw-ui-icon>
+                  ${t.audioMuted ? "Unmute" : "Mute"}
+                </button>
+              ` : s}
+
+          ${this._canMuteVideo ? r`
+                <button class=${t.videoMuted ? "active" : ""} @click=${this._toggleVideoMute}>
+                  <sw-ui-icon name=${t.videoMuted ? "camera-off" : "camera-on"} size="14"></sw-ui-icon>
+                  ${t.videoMuted ? "Enable video" : "Disable video"}
+                </button>
+              ` : s}
+
+          ${this.showVolume ? r`
+                <div class="volume-control">
+                  <label class="volume-label">
+                    <sw-ui-icon name="speaker-on" size="14"></sw-ui-icon>
+                    Volume: ${this._volume}%
+                  </label>
+                  <input
+                    type="range"
+                    min="0"
+                    max="100"
+                    .value=${String(this._volume)}
+                    @input=${this._onVolumeChange}
+                  />
+                </div>
+              ` : s}
+
+          ${this.showPin ? r`
+                <button class=${this._isPinned ? "active" : ""} @click=${this._togglePin}>
+                  <sw-ui-icon name="settings" size="14"></sw-ui-icon>
+                  ${this._isPinned ? "Unpin" : "Pin"}
+                </button>
+              ` : s}
+
+          ${this._canRemove ? r`
+                <button class="danger" @click=${this._remove}>
+                  <sw-ui-icon name="close" size="14"></sw-ui-icon>
+                  Remove
+                </button>
+              ` : s}
+        </div>
+      </div>
+    `;
+  }
+};
+e.styles = [w, m`
+    :host {
+      display: block;
+      font-family: var(--type-family-body);
+      font-size: var(--type-size-small);
+    }
+
+    .panel {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      padding: 10px;
+      background: var(--bg-page);
+      border: 1px solid var(--border-default);
+      border-radius: var(--radius-md);
+      min-width: 180px;
+      box-shadow: var(--shadow-md);
+      color: var(--fg-default);
+    }
+
+    .name {
+      font-size: 0.8125rem;
+      font-weight: 500;
+      padding-bottom: 6px;
+      border-bottom: 1px solid var(--border-default);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .actions {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    button {
+      all: unset;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 10px;
+      border-radius: var(--radius-md);
+      font-size: 0.75rem;
+      cursor: pointer;
+      background: var(--bg-surface);
+      color: var(--fg-default);
+      transition: background var(--transition-fast);
+    }
+
+    button:hover {
+      background: var(--bg-surface-raised);
+    }
+
+    button.active {
+      background: var(--interactive-button-destructive-bg);
+      color: #fff;
+    }
+
+    button.active:hover {
+      background: var(--interactive-button-destructive-hover);
+    }
+
+    button.danger {
+      color: var(--interactive-button-destructive-bg);
+    }
+
+    button.danger:hover {
+      background: var(--interactive-button-destructive-bg);
+      color: #fff;
+    }
+
+    .volume-control {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      padding: 4px 0;
+    }
+
+    .volume-label {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 0.7rem;
+      color: color-mix(in srgb, var(--fg-default) 50%, transparent);
+    }
+
+    input[type='range'] {
+      width: 100%;
+      height: 4px;
+      appearance: none;
+      background: var(--border-default);
+      border-radius: 2px;
+      outline: none;
+      cursor: pointer;
+    }
+
+    input[type='range']::-webkit-slider-thumb {
+      appearance: none;
+      width: 12px;
+      height: 12px;
+      background: #3b82f6;
+      border-radius: 50%;
+      cursor: pointer;
+    }
+
+    input[type='range']::-moz-range-thumb {
+      width: 12px;
+      height: 12px;
+      background: #3b82f6;
+      border-radius: 50%;
+      border: none;
+      cursor: pointer;
+    }
+
+    .empty {
+      font-size: 0.7rem;
+      color: color-mix(in srgb, var(--fg-default) 50%, transparent);
+      text-align: center;
+      padding: 6px;
+    }
+  `];
+a([
+  l({ type: String, attribute: "participant-id" })
+], e.prototype, "participantId", 2);
+a([
+  l({ type: Boolean, reflect: !0, attribute: "show-volume" })
+], e.prototype, "showVolume", 2);
+a([
+  l({ type: Boolean, reflect: !0, attribute: "show-pin" })
+], e.prototype, "showPin", 2);
+a([
+  g({ context: f, subscribe: !0 }),
+  c()
+], e.prototype, "_callState", 2);
+a([
+  l({ type: Object })
+], e.prototype, "call", 2);
+a([
+  c()
+], e.prototype, "_directParticipants", 2);
+a([
+  c()
+], e.prototype, "_directCapabilities", 2);
+a([
+  c()
+], e.prototype, "_volume", 2);
+a([
+  c()
+], e.prototype, "_isPinned", 2);
+e = a([
+  v("sw-participant-controls")
+], e);
+export {
+  e as SwParticipantControls
+};
+//# sourceMappingURL=sw-participant-controls.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sw-participant-controls.js","sources":["../../src/components/sw-participant-controls.ts"],"sourcesContent":["/**\n * Per-participant control panel.\n *\n * Takes a `participant-id` and looks up the participant.\n * Shows mute audio, mute video, volume, pin, and remove actions based on\n * the `capabilities` list from the call state.\n *\n * Input precedence (most specific wins): `.call` > context.\n *\n * @prop {string} participantId - ID of the participant to control\n * @prop {Call}    call         - explicit Call object (overrides context)\n * @prop {boolean} showVolume   - show volume slider\n * @prop {boolean} showPin      - show pin/spotlight button\n *\n * @fires sw-participant-volume-change - Volume slider changed. Detail: `{ participantId: string, volume: number }`.\n * @fires sw-participant-pin-toggle    - Pin/unpin clicked. Detail: `{ participantId: string, pinned: boolean }`.\n *\n * Themed via the SignalWire DTCG tokens (`--bg-page`, `--bg-surface`, `--bg-surface-raised`,\n * `--fg-default`, `--border-default`, `--radius-md`, `--shadow-md`, `--type-family-body`,\n * `--type-size-small`, `--interactive-button-destructive-bg`,\n * `--interactive-button-destructive-hover`, `--transition-fast`).\n */\n\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { consume } from '@lit/context';\nimport { Subscription } from 'rxjs';\nimport type { CallParticipant } from '@signalwire/js';\nimport { callStateContext, type CallState } from '../context/call-state-context.js';\nimport type { Call } from '../types/index.js';\nimport { getLogger } from '@signalwire/js';\nimport './UI/icons/sw-ui-icon.js';\nimport { hostReset } from './UI/host-reset.js';\n\nconst logger = getLogger();\n\n@customElement('sw-participant-controls')\nexport class SwParticipantControls extends LitElement {\n  static styles = [hostReset, css`\n    :host {\n      display: block;\n      font-family: var(--type-family-body);\n      font-size: var(--type-size-small);\n    }\n\n    .panel {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n      padding: 10px;\n      background: var(--bg-page);\n      border: 1px solid var(--border-default);\n      border-radius: var(--radius-md);\n      min-width: 180px;\n      box-shadow: var(--shadow-md);\n      color: var(--fg-default);\n    }\n\n    .name {\n      font-size: 0.8125rem;\n      font-weight: 500;\n      padding-bottom: 6px;\n      border-bottom: 1px solid var(--border-default);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .actions {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    button {\n      all: unset;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 6px 10px;\n      border-radius: var(--radius-md);\n      font-size: 0.75rem;\n      cursor: pointer;\n      background: var(--bg-surface);\n      color: var(--fg-default);\n      transition: background var(--transition-fast);\n    }\n\n    button:hover {\n      background: var(--bg-surface-raised);\n    }\n\n    button.active {\n      background: var(--interactive-button-destructive-bg);\n      color: #fff;\n    }\n\n    button.active:hover {\n      background: var(--interactive-button-destructive-hover);\n    }\n\n    button.danger {\n      color: var(--interactive-button-destructive-bg);\n    }\n\n    button.danger:hover {\n      background: var(--interactive-button-destructive-bg);\n      color: #fff;\n    }\n\n    .volume-control {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n      padding: 4px 0;\n    }\n\n    .volume-label {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      font-size: 0.7rem;\n      color: color-mix(in srgb, var(--fg-default) 50%, transparent);\n    }\n\n    input[type='range'] {\n      width: 100%;\n      height: 4px;\n      appearance: none;\n      background: var(--border-default);\n      border-radius: 2px;\n      outline: none;\n      cursor: pointer;\n    }\n\n    input[type='range']::-webkit-slider-thumb {\n      appearance: none;\n      width: 12px;\n      height: 12px;\n      background: #3b82f6;\n      border-radius: 50%;\n      cursor: pointer;\n    }\n\n    input[type='range']::-moz-range-thumb {\n      width: 12px;\n      height: 12px;\n      background: #3b82f6;\n      border-radius: 50%;\n      border: none;\n      cursor: pointer;\n    }\n\n    .empty {\n      font-size: 0.7rem;\n      color: color-mix(in srgb, var(--fg-default) 50%, transparent);\n      text-align: center;\n      padding: 6px;\n    }\n  `];\n\n  @property({ type: String, attribute: 'participant-id' })\n  participantId = '';\n\n  @property({ type: Boolean, reflect: true, attribute: 'show-volume' })\n  showVolume = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'show-pin' })\n  showPin = false;\n\n  @consume({ context: callStateContext, subscribe: true })\n  @state()\n  private _callState?: CallState;\n\n  /** Explicit Call — when set, subscribes directly and bypasses context. */\n  @property({ type: Object }) call?: Call;\n\n  @state() private _directParticipants: CallParticipant[] = [];\n  @state() private _directCapabilities: string[] = [];\n\n  private _directSubscriptions: Subscription[] = [];\n\n  @state() private _volume = 100;\n  @state() private _isPinned = false;\n\n  protected updated(changed: Map<string, unknown>): void {\n    super.updated(changed);\n    if (changed.has('call')) {\n      this._directSubscriptions.forEach((s) => s.unsubscribe());\n      this._directSubscriptions = [];\n      this._directParticipants = [];\n      this._directCapabilities = [];\n      if (this.call) {\n        this._directSubscriptions.push(\n          this.call.participants$.subscribe((p) => (this._directParticipants = p)),\n          this.call.capabilities$.subscribe((c) => (this._directCapabilities = c))\n        );\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._directSubscriptions.forEach((s) => s.unsubscribe());\n    this._directSubscriptions = [];\n  }\n\n  // ── Derived state ──────────────────────────────────────────────────\n\n  private get _participant() {\n    const participants = this.call ? this._directParticipants : this._callState?.participants ?? [];\n    return participants.find((p) => p.id === this.participantId);\n  }\n\n  private get _capabilities(): string[] {\n    return this.call ? this._directCapabilities : this._callState?.capabilities ?? [];\n  }\n\n  private get _canMuteAudio(): boolean {\n    return this._capabilities.includes('memberMuteAudio');\n  }\n\n  private get _canMuteVideo(): boolean {\n    return this._capabilities.includes('memberMuteVideo');\n  }\n\n  private get _canRemove(): boolean {\n    return this._capabilities.includes('memberRemove');\n  }\n\n  // ── Actions ────────────────────────────────────────────────────────\n\n  private async _toggleAudioMute() {\n    const p = this._participant;\n    if (!p) return;\n    try {\n      if (p.audioMuted) {\n        await p.unmute();\n      } else {\n        await p.mute();\n      }\n    } catch (err) {\n      logger.error('[ParticipantControls] Toggle audio failed:', err);\n    }\n  }\n\n  private async _toggleVideoMute() {\n    const p = this._participant;\n    if (!p) return;\n    try {\n      if (p.videoMuted) {\n        await p.unmuteVideo();\n      } else {\n        await p.muteVideo();\n      }\n    } catch (err) {\n      logger.error('[ParticipantControls] Toggle video failed:', err);\n    }\n  }\n\n  private async _remove() {\n    const p = this._participant;\n    if (!p?.remove) return;\n    try {\n      await p.remove();\n    } catch (err) {\n      logger.error('[ParticipantControls] Remove failed:', err);\n    }\n  }\n\n  private _onVolumeChange(e: Event) {\n    this._volume = parseInt((e.target as HTMLInputElement).value, 10);\n    this.dispatchEvent(\n      new CustomEvent('sw-participant-volume-change', {\n        detail: { participantId: this.participantId, volume: this._volume },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private _togglePin() {\n    this._isPinned = !this._isPinned;\n    this.dispatchEvent(\n      new CustomEvent('sw-participant-pin-toggle', {\n        detail: { participantId: this.participantId, pinned: this._isPinned },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  // ── Render ─────────────────────────────────────────────────────────\n\n  render() {\n    const p = this._participant;\n    if (!p) return html`<div class=\"panel\"><div class=\"empty\">Participant not found</div></div>`;\n\n    const hasActions = this._canMuteAudio || this._canMuteVideo || this._canRemove || this.showVolume || this.showPin;\n\n    return html`\n      <div class=\"panel\" part=\"panel\">\n        <div class=\"name\" part=\"name\">${p.name ?? 'Participant'}</div>\n\n        <div class=\"actions\">\n          ${!hasActions ? html`<div class=\"empty\">No actions available</div>` : nothing}\n\n          ${this._canMuteAudio\n            ? html`\n                <button class=${p.audioMuted ? 'active' : ''} @click=${this._toggleAudioMute}>\n                  <sw-ui-icon name=${p.audioMuted ? 'mic-off' : 'mic-on'} size=\"14\"></sw-ui-icon>\n                  ${p.audioMuted ? 'Unmute' : 'Mute'}\n                </button>\n              `\n            : nothing}\n\n          ${this._canMuteVideo\n            ? html`\n                <button class=${p.videoMuted ? 'active' : ''} @click=${this._toggleVideoMute}>\n                  <sw-ui-icon name=${p.videoMuted ? 'camera-off' : 'camera-on'} size=\"14\"></sw-ui-icon>\n                  ${p.videoMuted ? 'Enable video' : 'Disable video'}\n                </button>\n              `\n            : nothing}\n\n          ${this.showVolume\n            ? html`\n                <div class=\"volume-control\">\n                  <label class=\"volume-label\">\n                    <sw-ui-icon name=\"speaker-on\" size=\"14\"></sw-ui-icon>\n                    Volume: ${this._volume}%\n                  </label>\n                  <input\n                    type=\"range\"\n                    min=\"0\"\n                    max=\"100\"\n                    .value=${String(this._volume)}\n                    @input=${this._onVolumeChange}\n                  />\n                </div>\n              `\n            : nothing}\n\n          ${this.showPin\n            ? html`\n                <button class=${this._isPinned ? 'active' : ''} @click=${this._togglePin}>\n                  <sw-ui-icon name=\"settings\" size=\"14\"></sw-ui-icon>\n                  ${this._isPinned ? 'Unpin' : 'Pin'}\n                </button>\n              `\n            : nothing}\n\n          ${this._canRemove\n            ? html`\n                <button class=\"danger\" @click=${this._remove}>\n                  <sw-ui-icon name=\"close\" size=\"14\"></sw-ui-icon>\n                  Remove\n                </button>\n              `\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-participant-controls': SwParticipantControls;\n  }\n}\n"],"names":["logger","getLogger","SwParticipantControls","LitElement","changed","s","p","c","_a","err","e","html","hasActions","nothing","hostReset","css","__decorateClass","property","consume","callStateContext","state","customElement"],"mappings":";;;;;;;;;;;AAkCA,MAAMA,IAASC,EAAA;AAGR,IAAMC,IAAN,cAAoCC,EAAW;AAAA,EAA/C,cAAA;AAAA,UAAA,GAAA,SAAA,GA6HL,KAAA,gBAAgB,IAGhB,KAAA,aAAa,IAGb,KAAA,UAAU,IASD,KAAQ,sBAAyC,CAAA,GACjD,KAAQ,sBAAgC,CAAA,GAEjD,KAAQ,uBAAuC,CAAA,GAEtC,KAAQ,UAAU,KAClB,KAAQ,YAAY;AAAA,EAAA;AAAA,EAEnB,QAAQC,GAAqC;AACrD,UAAM,QAAQA,CAAO,GACjBA,EAAQ,IAAI,MAAM,MACpB,KAAK,qBAAqB,QAAQ,CAACC,MAAMA,EAAE,aAAa,GACxD,KAAK,uBAAuB,CAAA,GAC5B,KAAK,sBAAsB,CAAA,GAC3B,KAAK,sBAAsB,CAAA,GACvB,KAAK,QACP,KAAK,qBAAqB;AAAA,MACxB,KAAK,KAAK,cAAc,UAAU,CAACC,MAAO,KAAK,sBAAsBA,CAAE;AAAA,MACvE,KAAK,KAAK,cAAc,UAAU,CAACC,MAAO,KAAK,sBAAsBA,CAAE;AAAA,IAAA;AAAA,EAI/E;AAAA,EAEA,uBAAuB;AACrB,UAAM,qBAAA,GACN,KAAK,qBAAqB,QAAQ,CAACF,MAAMA,EAAE,aAAa,GACxD,KAAK,uBAAuB,CAAA;AAAA,EAC9B;AAAA;AAAA,EAIA,IAAY,eAAe;;AAEzB,YADqB,KAAK,OAAO,KAAK,wBAAsBG,IAAA,KAAK,eAAL,gBAAAA,EAAiB,iBAAgB,CAAA,GACzE,KAAK,CAACF,MAAMA,EAAE,OAAO,KAAK,aAAa;AAAA,EAC7D;AAAA,EAEA,IAAY,gBAA0B;;AACpC,WAAO,KAAK,OAAO,KAAK,wBAAsBE,IAAA,KAAK,eAAL,gBAAAA,EAAiB,iBAAgB,CAAA;AAAA,EACjF;AAAA,EAEA,IAAY,gBAAyB;AACnC,WAAO,KAAK,cAAc,SAAS,iBAAiB;AAAA,EACtD;AAAA,EAEA,IAAY,gBAAyB;AACnC,WAAO,KAAK,cAAc,SAAS,iBAAiB;AAAA,EACtD;AAAA,EAEA,IAAY,aAAsB;AAChC,WAAO,KAAK,cAAc,SAAS,cAAc;AAAA,EACnD;AAAA;AAAA,EAIA,MAAc,mBAAmB;AAC/B,UAAMF,IAAI,KAAK;AACf,QAAKA;AACL,UAAI;AACF,QAAIA,EAAE,aACJ,MAAMA,EAAE,OAAA,IAER,MAAMA,EAAE,KAAA;AAAA,MAEZ,SAASG,GAAK;AACZ,QAAAT,EAAO,MAAM,8CAA8CS,CAAG;AAAA,MAChE;AAAA,EACF;AAAA,EAEA,MAAc,mBAAmB;AAC/B,UAAMH,IAAI,KAAK;AACf,QAAKA;AACL,UAAI;AACF,QAAIA,EAAE,aACJ,MAAMA,EAAE,YAAA,IAER,MAAMA,EAAE,UAAA;AAAA,MAEZ,SAASG,GAAK;AACZ,QAAAT,EAAO,MAAM,8CAA8CS,CAAG;AAAA,MAChE;AAAA,EACF;AAAA,EAEA,MAAc,UAAU;AACtB,UAAMH,IAAI,KAAK;AACf,QAAKA,KAAA,QAAAA,EAAG;AACR,UAAI;AACF,cAAMA,EAAE,OAAA;AAAA,MACV,SAASG,GAAK;AACZ,QAAAT,EAAO,MAAM,wCAAwCS,CAAG;AAAA,MAC1D;AAAA,EACF;AAAA,EAEQ,gBAAgBC,GAAU;AAChC,SAAK,UAAU,SAAUA,EAAE,OAA4B,OAAO,EAAE,GAChE,KAAK;AAAA,MACH,IAAI,YAAY,gCAAgC;AAAA,QAC9C,QAAQ,EAAE,eAAe,KAAK,eAAe,QAAQ,KAAK,QAAA;AAAA,QAC1D,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAAA,EAEQ,aAAa;AACnB,SAAK,YAAY,CAAC,KAAK,WACvB,KAAK;AAAA,MACH,IAAI,YAAY,6BAA6B;AAAA,QAC3C,QAAQ,EAAE,eAAe,KAAK,eAAe,QAAQ,KAAK,UAAA;AAAA,QAC1D,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA,EAIA,SAAS;AACP,UAAMJ,IAAI,KAAK;AACf,QAAI,CAACA,EAAG,QAAOK;AAEf,UAAMC,IAAa,KAAK,iBAAiB,KAAK,iBAAiB,KAAK,cAAc,KAAK,cAAc,KAAK;AAE1G,WAAOD;AAAA;AAAA,wCAE6BL,EAAE,QAAQ,aAAa;AAAA;AAAA;AAAA,YAGlDM,IAAmEC,IAAtDF,gDAA6D;AAAA;AAAA,YAE3E,KAAK,gBACHA;AAAA,gCACkBL,EAAE,aAAa,WAAW,EAAE,WAAW,KAAK,gBAAgB;AAAA,qCACvDA,EAAE,aAAa,YAAY,QAAQ;AAAA,oBACpDA,EAAE,aAAa,WAAW,MAAM;AAAA;AAAA,kBAGtCO,CAAO;AAAA;AAAA,YAET,KAAK,gBACHF;AAAA,gCACkBL,EAAE,aAAa,WAAW,EAAE,WAAW,KAAK,gBAAgB;AAAA,qCACvDA,EAAE,aAAa,eAAe,WAAW;AAAA,oBAC1DA,EAAE,aAAa,iBAAiB,eAAe;AAAA;AAAA,kBAGrDO,CAAO;AAAA;AAAA,YAET,KAAK,aACHF;AAAA;AAAA;AAAA;AAAA,8BAIgB,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAMb,OAAO,KAAK,OAAO,CAAC;AAAA,6BACpB,KAAK,eAAe;AAAA;AAAA;AAAA,kBAInCE,CAAO;AAAA;AAAA,YAET,KAAK,UACHF;AAAA,gCACkB,KAAK,YAAY,WAAW,EAAE,WAAW,KAAK,UAAU;AAAA;AAAA,oBAEpE,KAAK,YAAY,UAAU,KAAK;AAAA;AAAA,kBAGtCE,CAAO;AAAA;AAAA,YAET,KAAK,aACHF;AAAA,gDACkC,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA,kBAK9CE,CAAO;AAAA;AAAA;AAAA;AAAA,EAInB;AACF;AAvUaX,EACJ,SAAS,CAACY,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAyH3B;AAGDC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,kBAAkB;AAAA,GA5H5Cf,EA6HX,WAAA,iBAAA,CAAA;AAGAc,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM,WAAW,eAAe;AAAA,GA/HzDf,EAgIX,WAAA,cAAA,CAAA;AAGAc,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM,WAAW,YAAY;AAAA,GAlItDf,EAmIX,WAAA,WAAA,CAAA;AAIQc,EAAA;AAAA,EAFPE,EAAQ,EAAE,SAASC,GAAkB,WAAW,IAAM;AAAA,EACtDC,EAAA;AAAM,GAtIIlB,EAuIH,WAAA,cAAA,CAAA;AAGoBc,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1Iff,EA0IiB,WAAA,QAAA,CAAA;AAEXc,EAAA;AAAA,EAAhBI,EAAA;AAAM,GA5IIlB,EA4IM,WAAA,uBAAA,CAAA;AACAc,EAAA;AAAA,EAAhBI,EAAA;AAAM,GA7IIlB,EA6IM,WAAA,uBAAA,CAAA;AAIAc,EAAA;AAAA,EAAhBI,EAAA;AAAM,GAjJIlB,EAiJM,WAAA,WAAA,CAAA;AACAc,EAAA;AAAA,EAAhBI,EAAA;AAAM,GAlJIlB,EAkJM,WAAA,aAAA,CAAA;AAlJNA,IAANc,EAAA;AAAA,EADNK,EAAc,yBAAyB;AAAA,GAC3BnB,CAAA;"}

package/dist/components/sw-participants.d.ts

@@ -0,0 +1,55 @@
+/**
+ * SwParticipants Component
+ *
+ * Renders member overlays based on layoutLayers.
+ * Excludes self member and provides slot for <self-media> child component.
+ *
+ * Input precedence (most specific wins): `.call` > context.
+ *
+ * @example
+ * ```html
+ * <sw-participants></sw-participants>
+ * <sw-participants .call=${call}></sw-participants>
+ * ```
+ *
+ * @slot - Default slot for overlay content.
+ * @slot controls-{memberId} - Per-participant menu content (e.g. `sw-participant-controls`).
+ *
+ * @fires sw-participant-mute-audio - User muted/unmuted a participant's audio. Detail: `{ participant, memberId }`.
+ * @fires sw-participant-mute-video - User muted/unmuted a participant's video. Detail: `{ participant, memberId }`.
+ * @fires sw-participant-remove     - User removed a participant. Detail: `{ participant, memberId }`.
+ */
+import { LitElement } from 'lit';
+import type { Call } from '../types/index.js';
+export declare class SwParticipants extends LitElement {
+    static styles: import("lit").CSSResult[];
+    private _callState?;
+    /** Explicit Call — when set, subscribes directly and bypasses context. */
+    call?: Call;
+    private _directLayoutLayers;
+    private _directParticipants;
+    private _directSelf;
+    private _directSubscriptions;
+    private _openMenuId;
+    private _handleOutsideClick;
+    private _handleEscape;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private _teardownDirect;
+    private _toggleMenu;
+    private _getParticipant;
+    private _handleMuteAudio;
+    private _handleMuteVideo;
+    private _handleRemove;
+    private _renderMenuIcon;
+    private _renderMenuDropdown;
+    private _renderOverlay;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sw-participants': SwParticipants;
+    }
+}
+//# sourceMappingURL=sw-participants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sw-participants.d.ts","sourceRoot":"","sources":["../../src/components/sw-participants.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,OAAO,KAAK,EAAE,IAAI,EAAe,MAAM,mBAAmB,CAAC;AAI3D,qBACa,cAAe,SAAQ,UAAU;IAC5C,MAAM,CAAC,MAAM,4BAiHV;IAIH,OAAO,CAAC,UAAU,CAAC,CAAY;IAE/B,0EAA0E;IAC9C,IAAI,CAAC,EAAE,IAAI,CAAC;IAE/B,OAAO,CAAC,mBAAmB,CAAqB;IAChD,OAAO,CAAC,mBAAmB,CAAyB;IACpD,OAAO,CAAC,WAAW,CAAoC;IAEhE,OAAO,CAAC,oBAAoB,CAAsB;IAGlD,OAAO,CAAC,WAAW,CAAuB;IAE1C,OAAO,CAAC,mBAAmB,CAKzB;IAEF,OAAO,CAAC,aAAa,CAInB;IAEF,iBAAiB;IAMjB,oBAAoB;IAOpB,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IActD,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,eAAe;YAKT,gBAAgB;YAuBhB,gBAAgB;YAuBhB,aAAa;IAqB3B,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,mBAAmB;IAsC3B,OAAO,CAAC,cAAc;IAuCtB,MAAM;CAaP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,cAAc,CAAC;KACnC;CACF"}