@signalwire/web-components 4.0.0-beta.2 → 4.0.0-beta.4

package/dist/react.d.ts

@@ -0,0 +1,101 @@
+/**
+ * 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,67 @@
+/**
+ * Type definitions for call-media components.
+ *
+ * Call and LayoutLayer types are imported from the SDK.
+ * Other types are defined locally for web-component specific needs.
+ */
+import type { Observable } from 'rxjs';
+import type { Call, LayoutLayer } from '@signalwire/js';
+export type { Call, LayoutLayer };
+/**
+ * Type helper for accessing call.self with proper typing
+ * The SDK's Call.self is typed as unknown for flexibility
+ */
+export interface CallSelf {
+    id: string;
+}
+/**
+ * Helper to safely get self ID from a Call
+ */
+export declare function getSelfId(call: Call | undefined): string | undefined;
+/**
+ * Helper to cast participants from unknown[] to Participant[]
+ * The SDK uses unknown[] for flexibility, but web-components knows the shape
+ */
+export declare function castParticipants(participants: unknown[]): Participant[];
+/**
+ * Participant interface for call participants
+ * Web-component specific with optional methods
+ */
+export interface Participant {
+    id: string;
+    name?: string;
+    name$?: Observable<string>;
+    audioMuted?: boolean;
+    audioMuted$?: Observable<boolean>;
+    videoMuted?: boolean;
+    videoMuted$?: Observable<boolean>;
+    mute?(): Promise<void>;
+    unmute?(): Promise<void>;
+    muteVideo?(): Promise<void>;
+    unmuteVideo?(): Promise<void>;
+    remove?(): Promise<void>;
+}
+/**
+ * Device info interface matching MediaDeviceInfo structure
+ */
+export interface DeviceInfo {
+    deviceId: string;
+    label: string;
+    kind: 'audioinput' | 'audiooutput' | 'videoinput';
+}
+/**
+ * DeviceController interface for observing device lists
+ */
+export interface DeviceController {
+    audioInputDevices$: Observable<DeviceInfo[]>;
+    videoInputDevices$: Observable<DeviceInfo[]>;
+    audioOutputDevices$: Observable<DeviceInfo[]>;
+    selectedAudioInputDevice$?: Observable<DeviceInfo | null>;
+    selectedVideoInputDevice$?: Observable<DeviceInfo | null>;
+    selectedAudioOutputDevice$?: Observable<DeviceInfo | null>;
+    selectAudioInputDevice?: (device: DeviceInfo) => void;
+    selectVideoInputDevice?: (device: DeviceInfo) => void;
+    selectAudioOutputDevice?: (device: DeviceInfo) => void;
+    getLocalStream?: () => Promise<MediaStream>;
+}
+//# 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;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AACvC,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAGxD,YAAY,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;AAElC;;;GAGG;AACH,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;CACZ;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAGpE;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,YAAY,EAAE,OAAO,EAAE,GAAG,WAAW,EAAE,CAEvE;AAED;;;GAGG;AACH,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAClC,IAAI,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IACvB,MAAM,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IACzB,SAAS,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,WAAW,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,MAAM,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;CAC1B;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,YAAY,GAAG,aAAa,GAAG,YAAY,CAAC;CACnD;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,kBAAkB,EAAE,UAAU,CAAC,UAAU,EAAE,CAAC,CAAC;IAC7C,kBAAkB,EAAE,UAAU,CAAC,UAAU,EAAE,CAAC,CAAC;IAC7C,mBAAmB,EAAE,UAAU,CAAC,UAAU,EAAE,CAAC,CAAC;IAC9C,yBAAyB,CAAC,EAAE,UAAU,CAAC,UAAU,GAAG,IAAI,CAAC,CAAC;IAC1D,yBAAyB,CAAC,EAAE,UAAU,CAAC,UAAU,GAAG,IAAI,CAAC,CAAC;IAC1D,0BAA0B,CAAC,EAAE,UAAU,CAAC,UAAU,GAAG,IAAI,CAAC,CAAC;IAC3D,sBAAsB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACtD,sBAAsB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACtD,uBAAuB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACvD,cAAc,CAAC,EAAE,MAAM,OAAO,CAAC,WAAW,CAAC,CAAC;CAC7C"}

package/dist/types/index.js

@@ -0,0 +1,12 @@
+function r(t) {
+  const n = t == null ? void 0 : t.self;
+  return n == null ? void 0 : n.id;
+}
+function e(t) {
+  return t;
+}
+export {
+  e as castParticipants,
+  r 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 * Call and LayoutLayer types are imported from the SDK.\n * Other types are defined locally for web-component specific needs.\n */\n\nimport type { Observable } from 'rxjs';\nimport type { Call, LayoutLayer } from '@signalwire/js';\n\n// Re-export SDK types for internal use\nexport type { Call, LayoutLayer };\n\n/**\n * Type helper for accessing call.self with proper typing\n * The SDK's Call.self is typed as unknown for flexibility\n */\nexport interface CallSelf {\n  id: string;\n}\n\n/**\n * Helper to safely get self ID from a Call\n */\nexport function getSelfId(call: Call | undefined): string | undefined {\n  const self = call?.self as CallSelf | undefined;\n  return self?.id;\n}\n\n/**\n * Helper to cast participants from unknown[] to Participant[]\n * The SDK uses unknown[] for flexibility, but web-components knows the shape\n */\nexport function castParticipants(participants: unknown[]): Participant[] {\n  return participants as Participant[];\n}\n\n/**\n * Participant interface for call participants\n * Web-component specific with optional methods\n */\nexport interface Participant {\n  id: string;\n  name?: string;\n  name$?: Observable<string>;\n  audioMuted?: boolean;\n  audioMuted$?: Observable<boolean>;\n  videoMuted?: boolean;\n  videoMuted$?: Observable<boolean>;\n  mute?(): Promise<void>;\n  unmute?(): Promise<void>;\n  muteVideo?(): Promise<void>;\n  unmuteVideo?(): Promise<void>;\n  remove?(): Promise<void>;\n}\n\n/**\n * Device info interface matching MediaDeviceInfo structure\n */\nexport interface DeviceInfo {\n  deviceId: string;\n  label: string;\n  kind: 'audioinput' | 'audiooutput' | 'videoinput';\n}\n\n/**\n * DeviceController interface for observing device lists\n */\nexport interface DeviceController {\n  audioInputDevices$: Observable<DeviceInfo[]>;\n  videoInputDevices$: Observable<DeviceInfo[]>;\n  audioOutputDevices$: Observable<DeviceInfo[]>;\n  selectedAudioInputDevice$?: Observable<DeviceInfo | null>;\n  selectedVideoInputDevice$?: Observable<DeviceInfo | null>;\n  selectedAudioOutputDevice$?: Observable<DeviceInfo | null>;\n  selectAudioInputDevice?: (device: DeviceInfo) => void;\n  selectVideoInputDevice?: (device: DeviceInfo) => void;\n  selectAudioOutputDevice?: (device: DeviceInfo) => void;\n  getLocalStream?: () => Promise<MediaStream>;\n}\n"],"names":["getSelfId","call","self","castParticipants","participants"],"mappings":"AAwBO,SAASA,EAAUC,GAA4C;AACpE,QAAMC,IAAOD,KAAA,gBAAAA,EAAM;AACnB,SAAOC,KAAA,gBAAAA,EAAM;AACf;AAMO,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;AAEH;;;;;;GAMG;AACH,wBAAgB,kBAAkB,IAAI,gBAAgB,CAcrD;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,gBAAgB,GAAG,OAAO,CAAC,IAAI,CAAC,CAsB1E;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 @@
+function a(e) {
+  return new Promise((t) => {
+    if (e.readyState >= HTMLMediaElement.HAVE_METADATA) {
+      t();
+      return;
+    }
+    const n = () => {
+      e.removeEventListener("canplay", n), e.removeEventListener("resize", r), t();
+    }, r = () => {
+      e.removeEventListener("canplay", n), e.removeEventListener("resize", r), t();
+    };
+    e.addEventListener("canplay", n), e.addEventListener("resize", r);
+  });
+}
+function i(e, t) {
+  e.srcObject = t;
+}
+function c(e) {
+  e.srcObject && (e.srcObject = null);
+}
+export {
+  i as attachMediaStream,
+  c as detachMediaStream,
+  a 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\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    const onCanPlay = () => {\n      element.removeEventListener('canplay', onCanPlay);\n      element.removeEventListener('resize', onResize);\n      resolve();\n    };\n\n    const onResize = () => {\n      element.removeEventListener('canplay', onCanPlay);\n      element.removeEventListener('resize', onResize);\n      resolve();\n    };\n\n    element.addEventListener('canplay', onCanPlay);\n    element.addEventListener('resize', onResize);\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","onCanPlay","onResize","attachMediaStream","stream","detachMediaStream"],"mappings":"AAmCO,SAASA,EAAkBC,GAA0C;AAC1E,SAAO,IAAI,QAAc,CAACC,MAAY;AACpC,QAAID,EAAQ,cAAc,iBAAiB,eAAe;AACxD,MAAAC,EAAA;AACA;AAAA,IACF;AAEA,UAAMC,IAAY,MAAM;AACtB,MAAAF,EAAQ,oBAAoB,WAAWE,CAAS,GAChDF,EAAQ,oBAAoB,UAAUG,CAAQ,GAC9CF,EAAA;AAAA,IACF,GAEME,IAAW,MAAM;AACrB,MAAAH,EAAQ,oBAAoB,WAAWE,CAAS,GAChDF,EAAQ,oBAAoB,UAAUG,CAAQ,GAC9CF,EAAA;AAAA,IACF;AAEA,IAAAD,EAAQ,iBAAiB,WAAWE,CAAS,GAC7CF,EAAQ,iBAAiB,UAAUG,CAAQ;AAAA,EAC7C,CAAC;AACH;AAQO,SAASC,EAAkBJ,GAA2BK,GAAkC;AAC7F,EAAAL,EAAQ,YAAYK;AACtB;AAOO,SAASC,EAAkBN,GAAiC;AACjE,EAAIA,EAAQ,cACVA,EAAQ,YAAY;AAExB;"}

package/package.json

@@ -1,16 +1,83 @@
 {
   "name": "@signalwire/web-components",
-  "version": "4.0.0-beta.2",
+  "version": "4.0.0-beta.4",
   "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.2"
+    "@signalwire/js": "4.0.0-beta.4"
   },
   "devDependencies": {
     "@playwright/test": "^1.56.1",