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

package/dist/components/sw-participants.js

@@ -0,0 +1,319 @@
+import { LitElement as p, html as l, css as h } from "lit";
+import { state as d, property as b, customElement as m } from "lit/decorators.js";
+import { consume as g } from "@lit/context";
+import { callStateContext as _ } from "../context/call-state-context.js";
+var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, a = (e, t, i, s) => {
+  for (var r = s > 1 ? void 0 : s ? y(t, i) : t, o = e.length - 1, c; o >= 0; o--)
+    (c = e[o]) && (r = (s ? c(t, i, r) : c(r)) || r);
+  return s && r && v(t, i, r), r;
+};
+let n = class extends p {
+  constructor() {
+    super(...arguments), this._directLayoutLayers = [], this._directParticipants = [], this._directSelf = null, this._directSubscriptions = [], this._openMenuId = null, this._handleOutsideClick = (e) => {
+      const t = e.target;
+      !t.closest(".menu-trigger") && !t.closest(".menu-dropdown") && (this._openMenuId = null);
+    }, this._handleEscape = (e) => {
+      e.key === "Escape" && this._openMenuId !== null && (this._openMenuId = null);
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this._handleOutsideClick), document.addEventListener("keydown", this._handleEscape);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this._handleOutsideClick), document.removeEventListener("keydown", this._handleEscape), this._teardownDirect();
+  }
+  updated(e) {
+    super.updated(e), e.has("call") && (this._teardownDirect(), this.call && this._directSubscriptions.push(
+      this.call.layoutLayers$.subscribe((t) => this._directLayoutLayers = t),
+      this.call.participants$.subscribe((t) => this._directParticipants = t),
+      this.call.self$.subscribe((t) => this._directSelf = t)
+    ));
+  }
+  _teardownDirect() {
+    this._directSubscriptions.forEach((e) => e.unsubscribe()), this._directSubscriptions = [], this._directLayoutLayers = [], this._directParticipants = [], this._directSelf = null;
+  }
+  // ── Helpers ────────────────────────────────────────────────────────
+  _toggleMenu(e, t) {
+    t.stopPropagation(), this._openMenuId = this._openMenuId === e ? null : e;
+  }
+  _getParticipant(e) {
+    var i;
+    return (this.call ? this._directParticipants : ((i = this._callState) == null ? void 0 : i.participants) ?? []).find((s) => s.id === e);
+  }
+  async _handleMuteAudio(e, t) {
+    t.stopPropagation();
+    const i = this._getParticipant(e);
+    if (i) {
+      try {
+        i.audioMuted ? await i.unmute() : await i.mute(), this.dispatchEvent(
+          new CustomEvent("sw-participant-mute-audio", {
+            detail: { participant: i, memberId: e },
+            bubbles: !0,
+            composed: !0
+          })
+        );
+      } catch {
+      }
+      this._openMenuId = null;
+    }
+  }
+  async _handleMuteVideo(e, t) {
+    t.stopPropagation();
+    const i = this._getParticipant(e);
+    if (i) {
+      try {
+        i.videoMuted ? await i.unmuteVideo() : await i.muteVideo(), this.dispatchEvent(
+          new CustomEvent("sw-participant-mute-video", {
+            detail: { participant: i, memberId: e },
+            bubbles: !0,
+            composed: !0
+          })
+        );
+      } catch {
+      }
+      this._openMenuId = null;
+    }
+  }
+  async _handleRemove(e, t) {
+    t.stopPropagation();
+    const i = this._getParticipant(e);
+    if (i != null && i.remove) {
+      try {
+        await i.remove(), this.dispatchEvent(
+          new CustomEvent("sw-participant-remove", {
+            detail: { participant: i, memberId: e },
+            bubbles: !0,
+            composed: !0
+          })
+        );
+      } catch {
+      }
+      this._openMenuId = null;
+    }
+  }
+  // ── Render ─────────────────────────────────────────────────────────
+  _renderMenuIcon() {
+    return l`
+      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+        <circle cx="12" cy="6" r="2" />
+        <circle cx="12" cy="12" r="2" />
+        <circle cx="12" cy="18" r="2" />
+      </svg>
+    `;
+  }
+  _renderMenuDropdown(e) {
+    const t = this._getParticipant(e), i = this._openMenuId === e;
+    return l`
+      <div
+        class="menu-dropdown ${i ? "open" : ""}"
+        role="menu"
+        aria-label="Participant actions"
+      >
+        <button
+          class="menu-item"
+          role="menuitem"
+          @click=${(s) => this._handleMuteAudio(e, s)}
+          aria-label="${t != null && t.audioMuted ? "Unmute audio" : "Mute audio"}"
+        >
+          ${t != null && t.audioMuted ? "Unmute" : "Mute"}
+        </button>
+        <button
+          class="menu-item"
+          role="menuitem"
+          @click=${(s) => this._handleMuteVideo(e, s)}
+          aria-label="${t != null && t.videoMuted ? "Enable video" : "Disable video"}"
+        >
+          ${t != null && t.videoMuted ? "Enable video" : "Disable video"}
+        </button>
+        <button
+          class="menu-item danger"
+          role="menuitem"
+          @click=${(s) => this._handleRemove(e, s)}
+          aria-label="Remove participant"
+        >
+          Remove
+        </button>
+      </div>
+    `;
+  }
+  _renderOverlay(e, t) {
+    const i = e.member_id, s = `member-overlay${t ? " is-self" : ""}`, r = `
+      position: absolute;
+      top: ${e.y}%;
+      left: ${e.x}%;
+      width: ${e.width}%;
+      height: ${e.height}%;
+      opacity: ${e.visible ? 1 : 0};
+      overflow: visible;
+      transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
+      pointer-events: auto;
+      z-index: 10;
+    `;
+    return l`
+      <div class="${s}" part="overlay" style="${r}">
+        ${t ? null : l`
+              <button
+                class="menu-trigger"
+                part="menu-trigger"
+                @click=${(o) => this._toggleMenu(i, o)}
+                aria-label="Participant menu"
+                aria-expanded="${this._openMenuId === i}"
+                aria-haspopup="menu"
+              >
+                ${this._renderMenuIcon()}
+              </button>
+              ${this._renderMenuDropdown(i)}
+            `}
+        <slot name="controls-${i}"></slot>
+      </div>
+    `;
+  }
+  render() {
+    var s, r, o, c;
+    const e = this.call ? this._directLayoutLayers : ((s = this._callState) == null ? void 0 : s.layoutLayers) ?? [], t = this.call ? (r = this._directSelf) == null ? void 0 : r.id : (c = (o = this._callState) == null ? void 0 : o.self) == null ? void 0 : c.id, i = e.filter((u) => u.member_id).map((u) => this._renderOverlay(u, u.member_id === t));
+    return l`
+      ${i}
+      <slot></slot>
+    `;
+  }
+};
+n.styles = h`
+    :host {
+      display: contents;
+    }
+
+    .member-overlay {
+      box-sizing: border-box;
+      box-shadow: inset 0 0 0 8px rgba(255, 0, 0, 0.8);
+      background-color: rgba(255, 0, 0, 0.1);
+    }
+
+    .member-overlay.is-self {
+      box-shadow: inset 0 0 0 8px rgba(0, 0, 255, 0.8);
+      background-color: rgba(0, 0, 255, 0.1);
+    }
+
+    .menu-trigger {
+      position: absolute;
+      top: 12px;
+      left: 12px;
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      background: rgba(0, 0, 0, 0.6);
+      border: 2px solid rgba(255, 255, 255, 0.3);
+      color: white;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition:
+        background 0.2s ease,
+        transform 0.2s ease,
+        border-color 0.2s ease;
+      z-index: 20;
+    }
+
+    .menu-trigger:hover {
+      background: rgba(0, 0, 0, 0.8);
+      border-color: rgba(255, 255, 255, 0.6);
+      transform: scale(1.1);
+    }
+
+    .menu-trigger:focus {
+      outline: none;
+      border-color: #044cf6;
+      box-shadow: 0 0 0 3px rgba(4, 78, 246, 0.4);
+    }
+
+    .menu-trigger svg {
+      width: 20px;
+      height: 20px;
+    }
+
+    .menu-dropdown {
+      position: absolute;
+      top: 12px;
+      left: 56px;
+      background: rgba(31, 41, 55, 0.95);
+      backdrop-filter: blur(8px);
+      border-radius: 8px;
+      padding: 8px 0;
+      min-width: 160px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+      z-index: 30;
+      opacity: 0;
+      visibility: hidden;
+      transform: translateX(-10px);
+      transition:
+        opacity 0.2s ease,
+        transform 0.2s ease,
+        visibility 0.2s ease;
+    }
+
+    .menu-dropdown.open {
+      opacity: 1;
+      visibility: visible;
+      transform: translateX(0);
+    }
+
+    .menu-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 16px;
+      color: white;
+      font-size: 14px;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      cursor: pointer;
+      transition: background 0.15s ease;
+      border: none;
+      background: none;
+      width: 100%;
+      text-align: left;
+    }
+
+    .menu-item:hover {
+      background: rgba(255, 255, 255, 0.1);
+    }
+
+    .menu-item svg {
+      width: 16px;
+      height: 16px;
+      flex-shrink: 0;
+    }
+
+    .menu-item.danger {
+      color: #ef4444;
+    }
+
+    .menu-item.danger:hover {
+      background: rgba(239, 68, 68, 0.2);
+    }
+  `;
+a([
+  g({ context: _, subscribe: !0 }),
+  d()
+], n.prototype, "_callState", 2);
+a([
+  b({ type: Object })
+], n.prototype, "call", 2);
+a([
+  d()
+], n.prototype, "_directLayoutLayers", 2);
+a([
+  d()
+], n.prototype, "_directParticipants", 2);
+a([
+  d()
+], n.prototype, "_directSelf", 2);
+a([
+  d()
+], n.prototype, "_openMenuId", 2);
+n = a([
+  m("sw-participants")
+], n);
+export {
+  n as SwParticipants
+};
+//# sourceMappingURL=sw-participants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sw-participants.js","sources":["../../src/components/sw-participants.ts"],"sourcesContent":["/**\n * SwParticipants Component\n *\n * Renders member overlays based on layoutLayers.\n * Excludes self member and provides slot for <self-media> child component.\n *\n * Input precedence (most specific wins): `.call` > context.\n *\n * @example\n * ```html\n * <sw-participants></sw-participants>\n * <sw-participants .call=${call}></sw-participants>\n * ```\n *\n * @slot - Default slot for overlay content.\n * @slot controls-{memberId} - Per-participant menu content (e.g. `sw-participant-controls`).\n *\n * @fires sw-participant-mute-audio - User muted/unmuted a participant's audio. Detail: `{ participant, memberId }`.\n * @fires sw-participant-mute-video - User muted/unmuted a participant's video. Detail: `{ participant, memberId }`.\n * @fires sw-participant-remove     - User removed a participant. Detail: `{ participant, memberId }`.\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 { CallParticipant, CallSelfParticipant } from '@signalwire/js';\nimport type { Call, LayoutLayer } from '../types/index.js';\nimport { callStateContext, type CallState } from '../context/call-state-context.js';\n\n@customElement('sw-participants')\nexport class SwParticipants extends LitElement {\n  static styles = css`\n    :host {\n      display: contents;\n    }\n\n    .member-overlay {\n      box-sizing: border-box;\n      box-shadow: inset 0 0 0 8px rgba(255, 0, 0, 0.8);\n      background-color: rgba(255, 0, 0, 0.1);\n    }\n\n    .member-overlay.is-self {\n      box-shadow: inset 0 0 0 8px rgba(0, 0, 255, 0.8);\n      background-color: rgba(0, 0, 255, 0.1);\n    }\n\n    .menu-trigger {\n      position: absolute;\n      top: 12px;\n      left: 12px;\n      width: 36px;\n      height: 36px;\n      border-radius: 50%;\n      background: rgba(0, 0, 0, 0.6);\n      border: 2px solid rgba(255, 255, 255, 0.3);\n      color: white;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition:\n        background 0.2s ease,\n        transform 0.2s ease,\n        border-color 0.2s ease;\n      z-index: 20;\n    }\n\n    .menu-trigger:hover {\n      background: rgba(0, 0, 0, 0.8);\n      border-color: rgba(255, 255, 255, 0.6);\n      transform: scale(1.1);\n    }\n\n    .menu-trigger:focus {\n      outline: none;\n      border-color: #044cf6;\n      box-shadow: 0 0 0 3px rgba(4, 78, 246, 0.4);\n    }\n\n    .menu-trigger svg {\n      width: 20px;\n      height: 20px;\n    }\n\n    .menu-dropdown {\n      position: absolute;\n      top: 12px;\n      left: 56px;\n      background: rgba(31, 41, 55, 0.95);\n      backdrop-filter: blur(8px);\n      border-radius: 8px;\n      padding: 8px 0;\n      min-width: 160px;\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n      z-index: 30;\n      opacity: 0;\n      visibility: hidden;\n      transform: translateX(-10px);\n      transition:\n        opacity 0.2s ease,\n        transform 0.2s ease,\n        visibility 0.2s ease;\n    }\n\n    .menu-dropdown.open {\n      opacity: 1;\n      visibility: visible;\n      transform: translateX(0);\n    }\n\n    .menu-item {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      color: white;\n      font-size: 14px;\n      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      cursor: pointer;\n      transition: background 0.15s ease;\n      border: none;\n      background: none;\n      width: 100%;\n      text-align: left;\n    }\n\n    .menu-item:hover {\n      background: rgba(255, 255, 255, 0.1);\n    }\n\n    .menu-item svg {\n      width: 16px;\n      height: 16px;\n      flex-shrink: 0;\n    }\n\n    .menu-item.danger {\n      color: #ef4444;\n    }\n\n    .menu-item.danger:hover {\n      background: rgba(239, 68, 68, 0.2);\n    }\n  `;\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 _directLayoutLayers: LayoutLayer[] = [];\n  @state() private _directParticipants: CallParticipant[] = [];\n  @state() private _directSelf: CallSelfParticipant | null = null;\n\n  private _directSubscriptions: Subscription[] = [];\n\n  @state()\n  private _openMenuId: string | null = null;\n\n  private _handleOutsideClick = (e: Event): void => {\n    const target = e.target as Element;\n    if (!target.closest('.menu-trigger') && !target.closest('.menu-dropdown')) {\n      this._openMenuId = null;\n    }\n  };\n\n  private _handleEscape = (e: KeyboardEvent): void => {\n    if (e.key === 'Escape' && this._openMenuId !== null) {\n      this._openMenuId = null;\n    }\n  };\n\n  connectedCallback() {\n    super.connectedCallback();\n    document.addEventListener('click', this._handleOutsideClick);\n    document.addEventListener('keydown', this._handleEscape);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this._handleOutsideClick);\n    document.removeEventListener('keydown', this._handleEscape);\n    this._teardownDirect();\n  }\n\n  protected updated(changed: Map<string, unknown>): void {\n    super.updated(changed);\n    if (changed.has('call')) {\n      this._teardownDirect();\n      if (this.call) {\n        this._directSubscriptions.push(\n          this.call.layoutLayers$.subscribe((l) => (this._directLayoutLayers = l)),\n          this.call.participants$.subscribe((p) => (this._directParticipants = p)),\n          this.call.self$.subscribe((s) => (this._directSelf = s))\n        );\n      }\n    }\n  }\n\n  private _teardownDirect(): void {\n    this._directSubscriptions.forEach((s) => s.unsubscribe());\n    this._directSubscriptions = [];\n    this._directLayoutLayers = [];\n    this._directParticipants = [];\n    this._directSelf = null;\n  }\n\n  // ── Helpers ────────────────────────────────────────────────────────\n\n  private _toggleMenu(memberId: string, e: Event): void {\n    e.stopPropagation();\n    this._openMenuId = this._openMenuId === memberId ? null : memberId;\n  }\n\n  private _getParticipant(memberId: string) {\n    const participants = this.call ? this._directParticipants : this._callState?.participants ?? [];\n    return participants.find((p) => p.id === memberId);\n  }\n\n  private async _handleMuteAudio(memberId: string, e: Event): Promise<void> {\n    e.stopPropagation();\n    const participant = this._getParticipant(memberId);\n    if (!participant) return;\n    try {\n      if (participant.audioMuted) {\n        await participant.unmute();\n      } else {\n        await participant.mute();\n      }\n      this.dispatchEvent(\n        new CustomEvent('sw-participant-mute-audio', {\n          detail: { participant, memberId },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    } catch {\n      // Silently handle error\n    }\n    this._openMenuId = null;\n  }\n\n  private async _handleMuteVideo(memberId: string, e: Event): Promise<void> {\n    e.stopPropagation();\n    const participant = this._getParticipant(memberId);\n    if (!participant) return;\n    try {\n      if (participant.videoMuted) {\n        await participant.unmuteVideo();\n      } else {\n        await participant.muteVideo();\n      }\n      this.dispatchEvent(\n        new CustomEvent('sw-participant-mute-video', {\n          detail: { participant, memberId },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    } catch {\n      // Silently handle error\n    }\n    this._openMenuId = null;\n  }\n\n  private async _handleRemove(memberId: string, e: Event): Promise<void> {\n    e.stopPropagation();\n    const participant = this._getParticipant(memberId);\n    if (!participant?.remove) return;\n    try {\n      await participant.remove();\n      this.dispatchEvent(\n        new CustomEvent('sw-participant-remove', {\n          detail: { participant, memberId },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    } catch {\n      // Silently handle error\n    }\n    this._openMenuId = null;\n  }\n\n  // ── Render ─────────────────────────────────────────────────────────\n\n  private _renderMenuIcon() {\n    return html`\n      <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n        <circle cx=\"12\" cy=\"6\" r=\"2\" />\n        <circle cx=\"12\" cy=\"12\" r=\"2\" />\n        <circle cx=\"12\" cy=\"18\" r=\"2\" />\n      </svg>\n    `;\n  }\n\n  private _renderMenuDropdown(memberId: string) {\n    const participant = this._getParticipant(memberId);\n    const isOpen = this._openMenuId === memberId;\n\n    return html`\n      <div\n        class=\"menu-dropdown ${isOpen ? 'open' : ''}\"\n        role=\"menu\"\n        aria-label=\"Participant actions\"\n      >\n        <button\n          class=\"menu-item\"\n          role=\"menuitem\"\n          @click=${(e: Event) => this._handleMuteAudio(memberId, e)}\n          aria-label=\"${participant?.audioMuted ? 'Unmute audio' : 'Mute audio'}\"\n        >\n          ${participant?.audioMuted ? 'Unmute' : 'Mute'}\n        </button>\n        <button\n          class=\"menu-item\"\n          role=\"menuitem\"\n          @click=${(e: Event) => this._handleMuteVideo(memberId, e)}\n          aria-label=\"${participant?.videoMuted ? 'Enable video' : 'Disable video'}\"\n        >\n          ${participant?.videoMuted ? 'Enable video' : 'Disable video'}\n        </button>\n        <button\n          class=\"menu-item danger\"\n          role=\"menuitem\"\n          @click=${(e: Event) => this._handleRemove(memberId, e)}\n          aria-label=\"Remove participant\"\n        >\n          Remove\n        </button>\n      </div>\n    `;\n  }\n\n  private _renderOverlay(layer: LayoutLayer, isSelf: boolean) {\n    const memberId = layer.member_id!;\n    const classes = `member-overlay${isSelf ? ' is-self' : ''}`;\n\n    const style = `\n      position: absolute;\n      top: ${layer.y}%;\n      left: ${layer.x}%;\n      width: ${layer.width}%;\n      height: ${layer.height}%;\n      opacity: ${layer.visible ? 1 : 0};\n      overflow: visible;\n      transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease, opacity 0.3s ease;\n      pointer-events: auto;\n      z-index: 10;\n    `;\n\n    return html`\n      <div class=\"${classes}\" part=\"overlay\" style=\"${style}\">\n        ${!isSelf\n          ? html`\n              <button\n                class=\"menu-trigger\"\n                part=\"menu-trigger\"\n                @click=${(e: Event) => this._toggleMenu(memberId, e)}\n                aria-label=\"Participant menu\"\n                aria-expanded=\"${this._openMenuId === memberId}\"\n                aria-haspopup=\"menu\"\n              >\n                ${this._renderMenuIcon()}\n              </button>\n              ${this._renderMenuDropdown(memberId)}\n            `\n          : null}\n        <slot name=\"controls-${memberId}\"></slot>\n      </div>\n    `;\n  }\n\n  render() {\n    const layers = this.call ? this._directLayoutLayers : this._callState?.layoutLayers ?? [];\n    const selfId = this.call ? this._directSelf?.id : this._callState?.self?.id;\n\n    const overlays = layers\n      .filter((layer) => layer.member_id)\n      .map((layer) => this._renderOverlay(layer, layer.member_id === selfId));\n\n    return html`\n      ${overlays}\n      <slot></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-participants': SwParticipants;\n  }\n}\n"],"names":["SwParticipants","LitElement","target","changed","l","p","s","memberId","e","_a","participant","html","isOpen","layer","isSelf","classes","style","layers","selfId","_b","_d","_c","overlays","css","__decorateClass","consume","callStateContext","state","property","customElement"],"mappings":"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"}

package/dist/components/sw-self-media.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Self Media Component
+ *
+ * Renders local video overlay with positioning from layoutLayers.
+ *
+ * Input precedence (most specific wins): `.call` > context.
+ * `.stream` is not applicable — this component requires `layoutLayers` and
+ * `self.id`, which only come from a Call.
+ *
+ * @example
+ * ```html
+ * <!-- Inside a context provider: -->
+ * <sw-self-media mirror></sw-self-media>
+ *
+ * <!-- Standalone with an explicit Call: -->
+ * <sw-self-media .call=${call} mirror></sw-self-media>
+ * ```
+ *
+ * @csspart container - Positioned overlay container matching the layout layer rect.
+ * @csspart video     - The `<video>` element rendering the local stream.
+ */
+import { LitElement } from 'lit';
+import type { Call } from '../types/index.js';
+export declare class SwSelfMedia extends LitElement {
+    static styles: import("lit").CSSResult;
+    mirror: boolean;
+    /** Explicit Call — when set, subscribes directly and bypasses context. */
+    call?: Call;
+    private _callState?;
+    private _directLocalStream;
+    private _directLayoutLayers;
+    private _directSelf;
+    private _directSubscriptions;
+    protected updated(changed: Map<string, unknown>): void;
+    disconnectedCallback(): void;
+    private _setupDirect;
+    private _teardownDirect;
+    private _getSelfLayer;
+    render(): import("lit-html").TemplateResult<1> | null;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sw-self-media': SwSelfMedia;
+    }
+}
+//# sourceMappingURL=sw-self-media.d.ts.map

package/dist/components/sw-self-media.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-self-media.d.ts","sourceRoot":"","sources":["../../src/components/sw-self-media.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,OAAO,KAAK,EAAE,IAAI,EAAe,MAAM,mBAAmB,CAAC;AAG3D,qBACa,WAAY,SAAQ,UAAU;IACzC,MAAM,CAAC,MAAM,0BAYX;IAE0C,MAAM,UAAS;IAE3D,0EAA0E;IAC9C,IAAI,CAAC,EAAE,IAAI,CAAC;IAIxC,OAAO,CAAC,UAAU,CAAC,CAAY;IAEtB,OAAO,CAAC,kBAAkB,CAA4B;IACtD,OAAO,CAAC,mBAAmB,CAAqB;IAChD,OAAO,CAAC,WAAW,CAAoC;IAEhE,OAAO,CAAC,oBAAoB,CAAsB;IAElD,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAQtD,oBAAoB;IAKpB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,aAAa;IAOrB,MAAM;CAyCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}

package/dist/components/sw-self-media.js

@@ -0,0 +1,106 @@
+import { LitElement as h, html as p, css as u } from "lit";
+import { property as d, state as n, customElement as y } from "lit/decorators.js";
+import { consume as _ } from "@lit/context";
+import { callStateContext as f } from "../context/call-state-context.js";
+var b = Object.defineProperty, m = Object.getOwnPropertyDescriptor, a = (t, e, l, r) => {
+  for (var s = r > 1 ? void 0 : r ? m(e, l) : e, i = t.length - 1, c; i >= 0; i--)
+    (c = t[i]) && (s = (r ? c(e, l, s) : c(s)) || s);
+  return r && s && b(e, l, s), s;
+};
+let o = class extends h {
+  constructor() {
+    super(...arguments), this.mirror = !1, this._directLocalStream = null, this._directLayoutLayers = [], this._directSelf = null, this._directSubscriptions = [];
+  }
+  updated(t) {
+    super.updated(t), t.has("call") && (this._teardownDirect(), this.call && this._setupDirect(this.call));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._teardownDirect();
+  }
+  _setupDirect(t) {
+    this._directSubscriptions.push(
+      t.localStream$.subscribe((e) => this._directLocalStream = e),
+      t.layoutLayers$.subscribe((e) => this._directLayoutLayers = e),
+      t.self$.subscribe((e) => this._directSelf = e)
+    );
+  }
+  _teardownDirect() {
+    this._directSubscriptions.forEach((t) => t.unsubscribe()), this._directSubscriptions = [], this._directLocalStream = null, this._directLayoutLayers = [], this._directSelf = null;
+  }
+  _getSelfLayer() {
+    var l, r, s, i;
+    const t = this.call ? (l = this._directSelf) == null ? void 0 : l.id : (s = (r = this._callState) == null ? void 0 : r.self) == null ? void 0 : s.id;
+    return t ? (this.call ? this._directLayoutLayers : ((i = this._callState) == null ? void 0 : i.layoutLayers) ?? []).find((c) => c.member_id === t) : void 0;
+  }
+  render() {
+    var i;
+    const t = this._getSelfLayer();
+    if (!t) return null;
+    const e = this.call ? this._directLocalStream : ((i = this._callState) == null ? void 0 : i.localStream) ?? null;
+    if (!(((e == null ? void 0 : e.getVideoTracks().length) ?? 0) > 0)) return null;
+    const r = `
+      position: absolute;
+      top: ${t.y}%;
+      left: ${t.x}%;
+      width: ${t.width}%;
+      height: ${t.height}%;
+      opacity: ${t.visible ? 1 : 0};
+      overflow: hidden;
+      transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
+      pointer-events: none;
+    `, s = this.mirror ? "transform: scale(-1, 1); -webkit-transform: scale(-1, 1);" : "";
+    return p`
+      <div class="local-overlay" part="container" style="${r}">
+        <video
+          class="local-video"
+          part="video"
+          style="width: 100%; height: 100%; object-fit: cover; ${s}"
+          autoplay
+          playsinline
+          muted
+          disablePictureInPicture
+          .srcObject=${e}
+        ></video>
+      </div>
+    `;
+  }
+};
+o.styles = u`
+    :host {
+      display: contents;
+    }
+
+    .local-overlay {
+      box-sizing: border-box;
+    }
+
+    video {
+      display: block;
+    }
+  `;
+a([
+  d({ type: Boolean, reflect: !0 })
+], o.prototype, "mirror", 2);
+a([
+  d({ type: Object })
+], o.prototype, "call", 2);
+a([
+  _({ context: f, subscribe: !0 }),
+  n()
+], o.prototype, "_callState", 2);
+a([
+  n()
+], o.prototype, "_directLocalStream", 2);
+a([
+  n()
+], o.prototype, "_directLayoutLayers", 2);
+a([
+  n()
+], o.prototype, "_directSelf", 2);
+o = a([
+  y("sw-self-media")
+], o);
+export {
+  o as SwSelfMedia
+};
+//# sourceMappingURL=sw-self-media.js.map

package/dist/components/sw-self-media.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-self-media.js","sources":["../../src/components/sw-self-media.ts"],"sourcesContent":["/**\n * Self Media Component\n *\n * Renders local video overlay with positioning from layoutLayers.\n *\n * Input precedence (most specific wins): `.call` > context.\n * `.stream` is not applicable — this component requires `layoutLayers` and\n * `self.id`, which only come from a Call.\n *\n * @example\n * ```html\n * <!-- Inside a context provider: -->\n * <sw-self-media mirror></sw-self-media>\n *\n * <!-- Standalone with an explicit Call: -->\n * <sw-self-media .call=${call} mirror></sw-self-media>\n * ```\n *\n * @csspart container - Positioned overlay container matching the layout layer rect.\n * @csspart video     - The `<video>` element rendering the local stream.\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 { callStateContext, type CallState } from '../context/call-state-context.js';\nimport type { Call, LayoutLayer } from '../types/index.js';\nimport type { CallSelfParticipant } from '@signalwire/js';\n\n@customElement('sw-self-media')\nexport class SwSelfMedia extends LitElement {\n  static styles = css`\n    :host {\n      display: contents;\n    }\n\n    .local-overlay {\n      box-sizing: border-box;\n    }\n\n    video {\n      display: block;\n    }\n  `;\n\n  @property({ type: Boolean, reflect: true }) mirror = false;\n\n  /** Explicit Call — when set, subscribes directly and bypasses context. */\n  @property({ type: Object }) call?: Call;\n\n  @consume({ context: callStateContext, subscribe: true })\n  @state()\n  private _callState?: CallState;\n\n  @state() private _directLocalStream: MediaStream | null = null;\n  @state() private _directLayoutLayers: LayoutLayer[] = [];\n  @state() private _directSelf: CallSelfParticipant | null = null;\n\n  private _directSubscriptions: Subscription[] = [];\n\n  protected updated(changed: Map<string, unknown>): void {\n    super.updated(changed);\n    if (changed.has('call')) {\n      this._teardownDirect();\n      if (this.call) this._setupDirect(this.call);\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._teardownDirect();\n  }\n\n  private _setupDirect(call: Call): void {\n    this._directSubscriptions.push(\n      call.localStream$.subscribe((s) => (this._directLocalStream = s)),\n      call.layoutLayers$.subscribe((l) => (this._directLayoutLayers = l)),\n      call.self$.subscribe((s) => (this._directSelf = s))\n    );\n  }\n\n  private _teardownDirect(): void {\n    this._directSubscriptions.forEach((s) => s.unsubscribe());\n    this._directSubscriptions = [];\n    this._directLocalStream = null;\n    this._directLayoutLayers = [];\n    this._directSelf = null;\n  }\n\n  private _getSelfLayer(): LayoutLayer | undefined {\n    const selfId = this.call ? this._directSelf?.id : this._callState?.self?.id;\n    if (!selfId) return undefined;\n    const layers = this.call ? this._directLayoutLayers : this._callState?.layoutLayers ?? [];\n    return layers.find((layer) => layer.member_id === selfId);\n  }\n\n  render() {\n    const layer = this._getSelfLayer();\n    if (!layer) return null;\n\n    const localStream = this.call\n      ? this._directLocalStream\n      : this._callState?.localStream ?? null;\n    const hasVideoTracks = (localStream?.getVideoTracks().length ?? 0) > 0;\n    if (!hasVideoTracks) return null;\n\n    const style = `\n      position: absolute;\n      top: ${layer.y}%;\n      left: ${layer.x}%;\n      width: ${layer.width}%;\n      height: ${layer.height}%;\n      opacity: ${layer.visible ? 1 : 0};\n      overflow: hidden;\n      transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease, opacity 0.3s ease;\n      pointer-events: none;\n    `;\n\n    const videoStyle = this.mirror\n      ? 'transform: scale(-1, 1); -webkit-transform: scale(-1, 1);'\n      : '';\n\n    return html`\n      <div class=\"local-overlay\" part=\"container\" style=\"${style}\">\n        <video\n          class=\"local-video\"\n          part=\"video\"\n          style=\"width: 100%; height: 100%; object-fit: cover; ${videoStyle}\"\n          autoplay\n          playsinline\n          muted\n          disablePictureInPicture\n          .srcObject=${localStream}\n        ></video>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-self-media': SwSelfMedia;\n  }\n}\n"],"names":["SwSelfMedia","LitElement","changed","call","s","l","selfId","_a","_c","_b","_d","layer","localStream","style","videoStyle","html","css","__decorateClass","property","consume","callStateContext","state","customElement"],"mappings":"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"}

package/dist/context/CallStateContextController.d.ts

@@ -0,0 +1,31 @@
+import type { Call } from '../types/index.js';
+import type { ContextHost } from './types.js';
+/**
+ * ReactiveController that flattens all Call observables into a plain CallState
+ * object provided via Lit context. Consumer components get automatic re-renders
+ * on any change.
+ *
+ * Usage in a provider component:
+ *
+ *   private _callState = new CallStateContextController(this);
+ *
+ *   // When a call arrives:
+ *   this._callState.connect(call);
+ *
+ *   // When the call ends:
+ *   this._callState.disconnect();
+ */
+export declare class CallStateContextController {
+    private _provider;
+    private _subscriptions;
+    private _state;
+    private _batching;
+    constructor(host: ContextHost);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    connect(call: Call): void;
+    disconnect(): void;
+    private _patch;
+    private _publish;
+}
+//# sourceMappingURL=CallStateContextController.d.ts.map

package/dist/context/CallStateContextController.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallStateContextController.d.ts","sourceRoot":"","sources":["../../src/context/CallStateContextController.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAG9C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAuC9C;;;;;;;;;;;;;;GAcG;AACH,qBAAa,0BAA0B;IACrC,OAAO,CAAC,SAAS,CAA2C;IAC5D,OAAO,CAAC,cAAc,CAAsB;IAC5C,OAAO,CAAC,MAAM,CAAsC;IACpD,OAAO,CAAC,SAAS,CAAS;gBAEd,IAAI,EAAE,WAAW;IAQ7B,aAAa;IACb,gBAAgB;IAIhB,OAAO,CAAC,IAAI,EAAE,IAAI;IAoFlB,UAAU;IAMV,OAAO,CAAC,MAAM;IAKd,OAAO,CAAC,QAAQ;CAGjB"}