@signalwire/web-components 4.0.0-beta.1 → 4.0.0-beta.11

package/dist/react.d.ts

@@ -0,0 +1,122 @@
+/**
+ * React JSX type declarations for SignalWire web components.
+ *
+ * Provides proper element types so `useRef<CallMedia>()` gives access
+ * to component properties like `.call` without type casting.
+ *
+ * Usage:
+ *   /// <reference types="@signalwire/web-components/react" />
+ *
+ * Or add to tsconfig.json:
+ *   { "compilerOptions": { "types": ["@signalwire/web-components/react"] } }
+ *
+ * Then in your component:
+ *   import type { CallMedia } from '@signalwire/web-components';
+ *   const ref = useRef<CallMedia>(null);
+ *   ref.current.call = call;  // fully typed, no cast needed
+ */
+
+import type { CallMedia } from './components/call-media.js';
+import type { SelfMedia } from './components/self-media.js';
+import type { CallControls } from './components/call-controls.js';
+import type { CallStatusComponent } from './components/call-status.js';
+import type { DeviceSelector } from './components/device-selector.js';
+import type { AudioLevel } from './components/audio-level.js';
+import type { DialpadComponent } from './components/dialpad.js';
+import type { ClickToCallComponent } from './components/click-to-call.js';
+import type { DirectoryComponent } from './components/directory.js';
+import type { ParticipantControlsComponent } from './components/participant-controls.js';
+import type { Participants } from './components/participants.js';
+
+export {};
+
+/**
+ * Helper: maps a Lit element class to a React JSX props type.
+ * Uses the actual element class for ref typing.
+ */
+type SWProps<E extends HTMLElement, A = object> = React.DetailedHTMLProps<
+  React.HTMLAttributes<E> & A,
+  E
+>;
+
+declare module 'react' {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface IntrinsicElements {
+      /** Remote video container and call context provider. */
+      'sw-call-media': SWProps<CallMedia>;
+
+      /** Local video overlay with optional mirror mode. */
+      'sw-self-media': SWProps<
+        SelfMedia,
+        {
+          mirror?: boolean;
+        }
+      >;
+
+      /** Mute, hangup, and screen-share controls. */
+      'sw-call-controls': SWProps<
+        CallControls,
+        {
+          orientation?: 'horizontal' | 'vertical';
+          'show-tooltips'?: boolean;
+        }
+      >;
+
+      /** Call status display with duration timer. */
+      'sw-call-status': SWProps<CallStatusComponent>;
+
+      /** Media device dropdowns with optional preview. */
+      'sw-device-selector': SWProps<
+        DeviceSelector,
+        {
+          'show-preview'?: boolean;
+        }
+      >;
+
+      /** Real-time audio level visualizer. */
+      'sw-audio-level': SWProps<
+        AudioLevel,
+        {
+          bars?: number;
+          orientation?: 'vertical' | 'horizontal';
+          'max-size'?: number;
+        }
+      >;
+
+      /** DTMF dialpad. */
+      'sw-dialpad': SWProps<
+        DialpadComponent,
+        {
+          'show-call-button'?: boolean;
+          placeholder?: string;
+        }
+      >;
+
+      /** Single-button call widget. */
+      'sw-click-to-call': SWProps<
+        ClickToCallComponent,
+        {
+          destination?: string;
+          label?: string;
+          'audio-only'?: boolean;
+        }
+      >;
+
+      /** Searchable contact directory. */
+      'sw-directory': SWProps<DirectoryComponent>;
+
+      /** Per-participant mute, volume, and remove controls. */
+      'sw-participant-controls': SWProps<
+        ParticipantControlsComponent,
+        {
+          'show-volume'?: boolean;
+          'show-pin'?: boolean;
+        }
+      >;
+
+      /** Remote participant overlay list. */
+      'sw-participants': SWProps<Participants>;
+    }
+  }
+}

package/dist/types/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Type definitions for call-media components.
+ *
+ * Types are imported directly from the SDK to stay in sync.
+ */
+import type { Call, CallParticipant, CallSelfParticipant, DeviceController, LayoutLayer } from '@signalwire/js';
+export type { Call, CallParticipant, CallSelfParticipant, DeviceController, LayoutLayer };
+export type Participant = CallParticipant;
+/**
+ * Helper to safely get self ID from a Call.
+ * Call.self is typed as CallSelfParticipant | null.
+ */
+export declare function getSelfId(call: Call | undefined): string | undefined;
+/**
+ * Type-safe cast for participants array.
+ * The SDK's Call.participants is typed as CallParticipant[], so this
+ * provides a semantic helper for web-components that receive unknown[].
+ */
+export declare function castParticipants(participants: unknown[]): Participant[];
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,eAAe,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAGhH,YAAY,EAAE,IAAI,EAAE,eAAe,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,WAAW,EAAE,CAAC;AAG1F,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC;AAE1C;;;GAGG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAEpE;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,YAAY,EAAE,OAAO,EAAE,GAAG,WAAW,EAAE,CAEvE"}

package/dist/types/index.js

@@ -0,0 +1,12 @@
+function e(t) {
+  var n;
+  return (n = t == null ? void 0 : t.self) == null ? void 0 : n.id;
+}
+function r(t) {
+  return t;
+}
+export {
+  r as castParticipants,
+  e as getSelfId
+};
+//# sourceMappingURL=index.js.map

package/dist/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/types/index.ts"],"sourcesContent":["/**\n * Type definitions for call-media components.\n *\n * Types are imported directly from the SDK to stay in sync.\n */\n\nimport type { Call, CallParticipant, CallSelfParticipant, DeviceController, LayoutLayer } from '@signalwire/js';\n\n// Re-export SDK types for internal use\nexport type { Call, CallParticipant, CallSelfParticipant, DeviceController, LayoutLayer };\n\n// Use SDK's CallParticipant as the canonical Participant type\nexport type Participant = CallParticipant;\n\n/**\n * Helper to safely get self ID from a Call.\n * Call.self is typed as CallSelfParticipant | null.\n */\nexport function getSelfId(call: Call | undefined): string | undefined {\n  return call?.self?.id;\n}\n\n/**\n * Type-safe cast for participants array.\n * The SDK's Call.participants is typed as CallParticipant[], so this\n * provides a semantic helper for web-components that receive unknown[].\n */\nexport function castParticipants(participants: unknown[]): Participant[] {\n  return participants as Participant[];\n}\n"],"names":["getSelfId","call","_a","castParticipants","participants"],"mappings":"AAkBO,SAASA,EAAUC,GAA4C;AAA/D,MAAAC;AACL,UAAOA,IAAAD,KAAA,gBAAAA,EAAM,SAAN,gBAAAC,EAAY;AACrB;AAOO,SAASC,EAAiBC,GAAwC;AACvE,SAAOA;AACT;"}

package/dist/utils/debounce.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Creates a debounced function that delays invoking the provided function
+ * until after the specified wait time has elapsed since the last invocation.
+ *
+ * @param func - The function to debounce
+ * @param wait - The number of milliseconds to delay
+ * @returns A debounced version of the function
+ */
+export declare function debounce<T extends (...args: any[]) => any>(func: T, wait: number): (...args: Parameters<T>) => void;
+//# sourceMappingURL=debounce.d.ts.map

package/dist/utils/debounce.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"debounce.d.ts","sourceRoot":"","sources":["../../src/utils/debounce.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,EACxD,IAAI,EAAE,CAAC,EACP,IAAI,EAAE,MAAM,GACX,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAclC"}

package/dist/utils/debounce.js

@@ -0,0 +1,13 @@
+function c(t, n) {
+  let e = null;
+  return function(...u) {
+    const l = () => {
+      e = null, t(...u);
+    };
+    e !== null && clearTimeout(e), e = setTimeout(l, n);
+  };
+}
+export {
+  c as debounce
+};
+//# sourceMappingURL=debounce.js.map

package/dist/utils/debounce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"debounce.js","sources":["../../src/utils/debounce.ts"],"sourcesContent":["/**\n * Creates a debounced function that delays invoking the provided function\n * until after the specified wait time has elapsed since the last invocation.\n *\n * @param func - The function to debounce\n * @param wait - The number of milliseconds to delay\n * @returns A debounced version of the function\n */\nexport function debounce<T extends (...args: any[]) => any>(\n  func: T,\n  wait: number\n): (...args: Parameters<T>) => void {\n  let timeout: ReturnType<typeof setTimeout> | null = null;\n\n  return function executedFunction(...args: Parameters<T>) {\n    const later = () => {\n      timeout = null;\n      func(...args);\n    };\n\n    if (timeout !== null) {\n      clearTimeout(timeout);\n    }\n    timeout = setTimeout(later, wait);\n  };\n}\n"],"names":["debounce","func","wait","timeout","args","later"],"mappings":"AAQO,SAASA,EACdC,GACAC,GACkC;AAClC,MAAIC,IAAgD;AAEpD,SAAO,YAA6BC,GAAqB;AACvD,UAAMC,IAAQ,MAAM;AAClB,MAAAF,IAAU,MACVF,EAAK,GAAGG,CAAI;AAAA,IACd;AAEA,IAAID,MAAY,QACd,aAAaA,CAAO,GAEtBA,IAAU,WAAWE,GAAOH,CAAI;AAAA,EAClC;AACF;"}

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './video.js';
+export * from './debounce.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC"}

package/dist/utils/video.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Video element utilities for creating and managing video elements
+ * with proper configuration for WebRTC streams.
+ */
+/**
+ * Creates a video element configured for WebRTC streams.
+ * The video is muted, autoplays, and plays inline (mobile Safari support).
+ * Prevents pause events which can occur on camera switches or PiP mode.
+ *
+ * @returns A configured HTMLVideoElement
+ */
+export declare function createVideoElement(): HTMLVideoElement;
+/**
+ * Waits for a video element to be ready for playback.
+ * Resolves when the video has metadata or when it can play.
+ *
+ * @param element - The video element to wait for
+ * @returns A promise that resolves when the video is ready
+ */
+export declare function waitForVideoReady(element: HTMLVideoElement): Promise<void>;
+/**
+ * Attaches a MediaStream to a video element.
+ *
+ * @param element - The video element to attach the stream to
+ * @param stream - The MediaStream to attach, or null to detach
+ */
+export declare function attachMediaStream(element: HTMLVideoElement, stream: MediaStream | null): void;
+/**
+ * Detaches any MediaStream from a video element.
+ *
+ * @param element - The video element to detach the stream from
+ */
+export declare function detachMediaStream(element: HTMLVideoElement): void;
+//# sourceMappingURL=video.d.ts.map

package/dist/utils/video.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../src/utils/video.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH;;;;;;GAMG;AACH,wBAAgB,kBAAkB,IAAI,gBAAgB,CAcrD;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,gBAAgB,GAAG,OAAO,CAAC,IAAI,CAAC,CAuB1E;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI,CAE7F;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAIjE"}

package/dist/utils/video.js

@@ -0,0 +1,26 @@
+import { VIDEO_READY_TIMEOUT_MS as n } from "../constants.js";
+function c(e) {
+  return new Promise((r) => {
+    if (e.readyState >= HTMLMediaElement.HAVE_METADATA) {
+      r();
+      return;
+    }
+    let i = !1;
+    const t = () => {
+      i || (i = !0, clearTimeout(a), e.removeEventListener("canplay", t), e.removeEventListener("resize", t), r());
+    }, a = setTimeout(t, n);
+    e.addEventListener("canplay", t), e.addEventListener("resize", t);
+  });
+}
+function d(e, r) {
+  e.srcObject = r;
+}
+function s(e) {
+  e.srcObject && (e.srcObject = null);
+}
+export {
+  d as attachMediaStream,
+  s as detachMediaStream,
+  c as waitForVideoReady
+};
+//# sourceMappingURL=video.js.map

package/dist/utils/video.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"video.js","sources":["../../src/utils/video.ts"],"sourcesContent":["/**\n * Video element utilities for creating and managing video elements\n * with proper configuration for WebRTC streams.\n */\n\nimport { VIDEO_READY_TIMEOUT_MS } from '../constants.js';\n\n/**\n * Creates a video element configured for WebRTC streams.\n * The video is muted, autoplays, and plays inline (mobile Safari support).\n * Prevents pause events which can occur on camera switches or PiP mode.\n *\n * @returns A configured HTMLVideoElement\n */\nexport function createVideoElement(): HTMLVideoElement {\n  const video = document.createElement('video');\n  video.muted = true;\n  video.autoplay = true;\n  video.playsInline = true;\n\n  // Prevent pause (Safari/Firefox pause on PiP, camera switch)\n  video.addEventListener('pause', () => {\n    video.play().catch((error) => {\n      console.error('Video Element Paused', error);\n    });\n  });\n\n  return video;\n}\n\n/**\n * Waits for a video element to be ready for playback.\n * Resolves when the video has metadata or when it can play.\n *\n * @param element - The video element to wait for\n * @returns A promise that resolves when the video is ready\n */\nexport function waitForVideoReady(element: HTMLVideoElement): Promise<void> {\n  return new Promise<void>((resolve) => {\n    if (element.readyState >= HTMLMediaElement.HAVE_METADATA) {\n      resolve();\n      return;\n    }\n\n    let resolved = false;\n\n    const done = () => {\n      if (resolved) return;\n      resolved = true;\n      clearTimeout(timeoutId);\n      element.removeEventListener('canplay', done);\n      element.removeEventListener('resize', done);\n      resolve();\n    };\n\n    // Timeout fallback for audio-only streams where resize/canplay may never fire\n    const timeoutId = setTimeout(done, VIDEO_READY_TIMEOUT_MS);\n    element.addEventListener('canplay', done);\n    element.addEventListener('resize', done);\n  });\n}\n\n/**\n * Attaches a MediaStream to a video element.\n *\n * @param element - The video element to attach the stream to\n * @param stream - The MediaStream to attach, or null to detach\n */\nexport function attachMediaStream(element: HTMLVideoElement, stream: MediaStream | null): void {\n  element.srcObject = stream;\n}\n\n/**\n * Detaches any MediaStream from a video element.\n *\n * @param element - The video element to detach the stream from\n */\nexport function detachMediaStream(element: HTMLVideoElement): void {\n  if (element.srcObject) {\n    element.srcObject = null;\n  }\n}\n"],"names":["waitForVideoReady","element","resolve","resolved","done","timeoutId","VIDEO_READY_TIMEOUT_MS","attachMediaStream","stream","detachMediaStream"],"mappings":";AAqCO,SAASA,EAAkBC,GAA0C;AAC1E,SAAO,IAAI,QAAc,CAACC,MAAY;AACpC,QAAID,EAAQ,cAAc,iBAAiB,eAAe;AACxD,MAAAC,EAAA;AACA;AAAA,IACF;AAEA,QAAIC,IAAW;AAEf,UAAMC,IAAO,MAAM;AACjB,MAAID,MACJA,IAAW,IACX,aAAaE,CAAS,GACtBJ,EAAQ,oBAAoB,WAAWG,CAAI,GAC3CH,EAAQ,oBAAoB,UAAUG,CAAI,GAC1CF,EAAA;AAAA,IACF,GAGMG,IAAY,WAAWD,GAAME,CAAsB;AACzD,IAAAL,EAAQ,iBAAiB,WAAWG,CAAI,GACxCH,EAAQ,iBAAiB,UAAUG,CAAI;AAAA,EACzC,CAAC;AACH;AAQO,SAASG,EAAkBN,GAA2BO,GAAkC;AAC7F,EAAAP,EAAQ,YAAYO;AACtB;AAOO,SAASC,EAAkBR,GAAiC;AACjE,EAAIA,EAAQ,cACVA,EAAQ,YAAY;AAExB;"}

package/package.json

@@ -1,16 +1,83 @@
 {
   "name": "@signalwire/web-components",
-  "version": "4.0.0-beta.1",
+  "version": "4.0.0-beta.11",
   "description": "UI components library built with Lit",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "./dist/index.js",
+    "./dist/components/*.js"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "default": "./dist/index.js"
+    },
+    "./call-media": {
+      "types": "./dist/components/call-media.d.ts",
+      "import": "./dist/components/call-media.js"
+    },
+    "./self-media": {
+      "types": "./dist/components/self-media.d.ts",
+      "import": "./dist/components/self-media.js"
+    },
+    "./participants": {
+      "types": "./dist/components/participants.d.ts",
+      "import": "./dist/components/participants.js"
+    },
+    "./call-controls": {
+      "types": "./dist/components/call-controls.d.ts",
+      "import": "./dist/components/call-controls.js"
+    },
+    "./call-status": {
+      "types": "./dist/components/call-status.d.ts",
+      "import": "./dist/components/call-status.js"
+    },
+    "./audio-level": {
+      "types": "./dist/components/audio-level.d.ts",
+      "import": "./dist/components/audio-level.js"
+    },
+    "./device-selector": {
+      "types": "./dist/components/device-selector.d.ts",
+      "import": "./dist/components/device-selector.js"
+    },
+    "./dialpad": {
+      "types": "./dist/components/dialpad.d.ts",
+      "import": "./dist/components/dialpad.js"
+    },
+    "./click-to-call": {
+      "types": "./dist/components/click-to-call.d.ts",
+      "import": "./dist/components/click-to-call.js"
+    },
+    "./directory": {
+      "types": "./dist/components/directory.d.ts",
+      "import": "./dist/components/directory.js"
+    },
+    "./participant-controls": {
+      "types": "./dist/components/participant-controls.d.ts",
+      "import": "./dist/components/participant-controls.js"
+    },
+    "./example-button": {
+      "types": "./dist/components/example-button.d.ts",
+      "import": "./dist/components/example-button.js"
+    },
+    "./context": {
+      "types": "./dist/context/index.d.ts",
+      "import": "./dist/context/index.js"
+    },
+    "./types": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/types/index.js"
+    },
+    "./utils": {
+      "types": "./dist/utils/index.d.ts",
+      "import": "./dist/utils/index.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts"
     }
   },
   "files": [
@@ -19,7 +86,7 @@
   "scripts": {
     "dev": "vite",
     "dev:test": "vite --port 3000",
-    "build": "tsc --project tsconfig.build.json && vite build",
+    "build": "vite build && tsc --project tsconfig.build.json && cp src/react.d.ts dist/",
     "preview": "vite preview",
     "type-check": "tsc --noEmit",
     "lint": "eslint src --ext .ts",
@@ -48,7 +115,7 @@
     "rxjs": "^7.8.2"
   },
   "peerDependencies": {
-    "@signalwire/js": "4.0.0-beta.1"
+    "@signalwire/js": "4.0.0-beta.11"
   },
   "devDependencies": {
     "@playwright/test": "^1.56.1",