@dialtribe/react-sdk 0.1.0-alpha.11 → 0.1.0-alpha.12

package/dist/{broadcast-player-DnnXgWin.d.ts → dialtribe-player-Rc9kfQiX.d.ts}

@@ -2,10 +2,10 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1, { Component, ReactNode, ErrorInfo } from 'react';
 
 /**
- * DialTribe SDK Context
+ * Dialtribe SDK Context
  * Manages session token and auto-refresh across all SDK components
  */
-interface DialTribeContextValue {
+interface DialtribeContextValue {
     /** Current session token */
     sessionToken: string | null;
     /** Update the session token (called automatically on refresh) */
@@ -17,7 +17,7 @@ interface DialTribeContextValue {
     /** Optional API base URL override */
     apiBaseUrl?: string;
 }
-interface DialTribeProviderProps {
+interface DialtribeProviderProps {
     /** Session token from your backend (required) */
     sessionToken: string;
     /** Called when the API returns a refreshed token via X-Session-Token header */
@@ -34,70 +34,70 @@ interface DialTribeProviderProps {
     children: React$1.ReactNode;
 }
 /**
- * DialTribe Provider
+ * Dialtribe Provider
  *
  * Wraps your app to provide session token authentication to all SDK components.
  *
  * @example
  * ```tsx
  * // Production (default)
- * <DialTribeProvider
+ * <DialtribeProvider
  *   sessionToken="sess_xxx..."
  *   onTokenRefresh={(newToken) => setToken(newToken)}
  *   onTokenExpired={() => router.push('/login')}
  * >
  *   <App />
- * </DialTribeProvider>
+ * </DialtribeProvider>
  *
  * // Local development (explicit)
- * <DialTribeProvider
+ * <DialtribeProvider
  *   sessionToken="sess_xxx..."
  *   apiBaseUrl="http://localhost:3001/api/public/v1"
  *   onTokenRefresh={(newToken) => setToken(newToken)}
  * >
  *   <App />
- * </DialTribeProvider>
+ * </DialtribeProvider>
  *
  * // Local development (via env var - recommended)
  * // Set NEXT_PUBLIC_DIALTRIBE_API_URL=http://localhost:3001/api/public/v1 in .env
- * <DialTribeProvider sessionToken="sess_xxx...">
+ * <DialtribeProvider sessionToken="sess_xxx...">
  *   <App />
- * </DialTribeProvider>
+ * </DialtribeProvider>
  * ```
  */
-declare function DialTribeProvider({ sessionToken: initialToken, onTokenRefresh, onTokenExpired, apiBaseUrl, children, }: DialTribeProviderProps): react_jsx_runtime.JSX.Element;
+declare function DialtribeProvider({ sessionToken: initialToken, onTokenRefresh, onTokenExpired, apiBaseUrl, children, }: DialtribeProviderProps): react_jsx_runtime.JSX.Element;
 /**
- * Hook to access DialTribe context
+ * Hook to access Dialtribe context
  *
- * @throws Error if used outside DialTribeProvider
+ * @throws Error if used outside DialtribeProvider
  *
  * @example
  * ```tsx
- * const { sessionToken, setSessionToken } = useDialTribe();
+ * const { sessionToken, setSessionToken } = useDialtribe();
  * ```
  */
-declare function useDialTribe(): DialTribeContextValue;
+declare function useDialtribe(): DialtribeContextValue;
 /**
- * Hook to optionally access DialTribe context
- * Returns null if not within a DialTribeProvider (doesn't throw)
+ * Hook to optionally access Dialtribe context
+ * Returns null if not within a DialtribeProvider (doesn't throw)
  *
  * @example
  * ```tsx
- * const context = useDialTribeOptional();
+ * const context = useDialtribeOptional();
  * const sessionToken = context?.sessionToken ?? propSessionToken;
  * ```
  */
-declare function useDialTribeOptional(): DialTribeContextValue | null;
+declare function useDialtribeOptional(): DialtribeContextValue | null;
 
 /**
- * DialTribe API Client
+ * Dialtribe API Client
  *
- * Handles all API communication with DialTribe endpoints.
+ * Handles all API communication with Dialtribe endpoints.
  * Automatically manages session token refresh via X-Session-Token headers.
  *
  * Supports configurable API base URL for development:
  * 1. Via environment variable: NEXT_PUBLIC_DIALTRIBE_API_URL
- * 2. Via apiBaseUrl prop on DialTribeProvider (takes precedence)
+ * 2. Via apiBaseUrl prop on DialtribeProvider (takes precedence)
  *
  * Defaults to production URL if neither is specified.
  */
@@ -128,17 +128,17 @@ interface ApiClientConfig {
     apiBaseUrl?: string;
 }
 /**
- * DialTribe API Client
+ * Dialtribe API Client
  *
- * Low-level client for making authenticated requests to DialTribe API.
+ * Low-level client for making authenticated requests to Dialtribe API.
  * Handles session token auto-refresh automatically.
  */
-declare class DialTribeClient {
+declare class DialtribeClient {
     private config;
     private endpoints;
     constructor(config: ApiClientConfig);
     /**
-     * Make an authenticated request to DialTribe API
+     * Make an authenticated request to Dialtribe API
      *
      * Automatically:
      * - Adds Authorization header with session token
@@ -304,8 +304,8 @@ interface TranscriptData {
     words?: TranscriptWord[];
 }
 
-interface BroadcastPlayerProps {
-    /** Broadcast data from DialTribe API */
+interface DialtribePlayerProps {
+    /** Broadcast data from Dialtribe API */
     broadcast: Broadcast;
     /** Optional: App ID for tracking */
     appId?: string;
@@ -335,72 +335,28 @@ interface BroadcastPlayerProps {
     enableKeyboardShortcuts?: boolean;
 }
 /**
- * BroadcastPlayer - Core media player component (no modal wrapper)
+ * DialtribePlayer - Media player component for Dialtribe broadcasts
  *
  * Plays video/audio broadcasts with transcript, waveform visualization, and clip creation.
- * Uses DialTribeClient for authenticated API calls.
+ * For modal or fullscreen display, wrap with the Overlay component.
  *
  * @example
  * ```tsx
- * <BroadcastPlayer
- *   broadcast={broadcast}
- *   appId="app_123"
- *   contentId={456}
- * />
- * ```
- */
-declare function BroadcastPlayer({ broadcast, appId, contentId, foreignId, foreignTier, renderClipCreator, onError, className, enableKeyboardShortcuts, }: BroadcastPlayerProps): react_jsx_runtime.JSX.Element;
-
-interface BroadcastPlayerModalProps {
-    /** Broadcast data from DialTribe API */
-    broadcast: Broadcast;
-    /** Whether modal is open */
-    isOpen: boolean;
-    /** Called when modal should close */
-    onClose: () => void;
-    /** Optional: App ID for tracking */
-    appId?: string;
-    /** Optional: Content ID for tracking */
-    contentId?: number;
-    /** Foreign user ID from partner system (any tier) */
-    foreignId?: string;
-    /** Tier name from partner system (e.g., 'guest', 'member', 'subscriber_gold') */
-    foreignTier?: string;
-    /**
-     * Optional render prop for clip creator
-     * If provided, the "Create Clip" button will be shown and this will be called when clicked
-     */
-    renderClipCreator?: (props: {
-        isOpen: boolean;
-        onClose: () => void;
-        sourceVideoUrl?: string;
-        sourceAudioUrl?: string;
-        sourceDuration: number;
-        onPauseParent: () => void;
-    }) => React.ReactNode;
-    /** Optional: Custom CSS classes for the player */
-    className?: string;
-    /** Optional: Enable keyboard shortcuts (Space, arrows, M, F, etc.). Default: false */
-    enableKeyboardShortcuts?: boolean;
-}
-/**
- * BroadcastPlayerModal - Modal wrapper for BroadcastPlayer
+ * // Inline (embedded in page)
+ * <DialtribePlayer broadcast={broadcast} />
  *
- * Provides a modal overlay with ESC key handling and backdrop click to close.
- * Uses the new BroadcastPlayer component for all player functionality.
+ * // Modal (wrap with Overlay)
+ * <Overlay mode="modal" isOpen={show} onClose={() => setShow(false)}>
+ *   <DialtribePlayer broadcast={broadcast} />
+ * </Overlay>
  *
- * @example
- * ```tsx
- * <BroadcastPlayerModal
- *   broadcast={broadcast}
- *   isOpen={showModal}
- *   onClose={() => setShowModal(false)}
- *   appId="app_123"
- *   contentId={456}
- * />
+ * // Fullscreen (wrap with Overlay)
+ * <Overlay mode="fullscreen" isOpen={show} onClose={() => setShow(false)}>
+ *   <DialtribePlayer broadcast={broadcast} />
+ * </Overlay>
  * ```
  */
-declare function BroadcastPlayerModal({ broadcast, isOpen, onClose, appId, contentId, foreignId, foreignTier, renderClipCreator, className, enableKeyboardShortcuts, }: BroadcastPlayerModalProps): react_jsx_runtime.JSX.Element | null;
+declare function DialtribePlayer({ broadcast, appId, contentId, foreignId, foreignTier, renderClipCreator, onError, className, enableKeyboardShortcuts, }: DialtribePlayerProps): react_jsx_runtime.JSX.Element;
 
 interface Props {
     children: ReactNode;
@@ -434,7 +390,7 @@ interface State {
  * - Logs errors for debugging
  * - Allows graceful recovery
  */
-declare class BroadcastPlayerErrorBoundary extends Component<Props, State> {
+declare class DialtribePlayerErrorBoundary extends Component<Props, State> {
     constructor(props: Props);
     static getDerivedStateFromError(error: Error): Partial<State>;
     componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
@@ -488,6 +444,50 @@ interface LoadingSpinnerProps {
  */
 declare function LoadingSpinner({ text, size, variant, }: LoadingSpinnerProps): react_jsx_runtime.JSX.Element;
 
+/** Display mode for the overlay */
+type DialtribeOverlayMode = "modal" | "fullscreen";
+interface DialtribeOverlayProps {
+    /** Whether the overlay is open */
+    isOpen: boolean;
+    /** Called when the overlay should close */
+    onClose: () => void;
+    /** Display mode: "modal" (centered with backdrop) or "fullscreen" (fills viewport) */
+    mode?: DialtribeOverlayMode;
+    /** Content to display inside the overlay */
+    children: React.ReactNode;
+    /** Optional: aria-label for accessibility */
+    ariaLabel?: string;
+    /** Optional: Show close button. Default: true */
+    showCloseButton?: boolean;
+    /** Optional: Close on backdrop click. Default: true */
+    closeOnBackdropClick?: boolean;
+    /** Optional: Close on ESC key. Default: true */
+    closeOnEsc?: boolean;
+}
+/**
+ * DialtribeOverlay - Reusable modal/fullscreen overlay component
+ *
+ * Provides a consistent overlay experience with:
+ * - Focus management (traps focus, restores on close)
+ * - ESC key to close
+ * - Backdrop click to close
+ * - Accessible with proper ARIA attributes
+ *
+ * @example
+ * ```tsx
+ * // Modal mode (centered with backdrop blur)
+ * <DialtribeOverlay isOpen={show} onClose={() => setShow(false)} mode="modal">
+ *   <MyContent />
+ * </DialtribeOverlay>
+ *
+ * // Fullscreen mode (fills entire viewport)
+ * <DialtribeOverlay isOpen={show} onClose={() => setShow(false)} mode="fullscreen">
+ *   <MyContent />
+ * </DialtribeOverlay>
+ * ```
+ */
+declare function DialtribeOverlay({ isOpen, onClose, mode, children, ariaLabel, showCloseButton, closeOnBackdropClick, closeOnEsc, }: DialtribeOverlayProps): react_jsx_runtime.JSX.Element | null;
+
 /**
  * Format seconds to time string (HH:MM:SS or MM:SS)
  *
@@ -557,4 +557,4 @@ declare const HTTP_STATUS: {
 };
 type HttpStatusCode = typeof HTTP_STATUS[keyof typeof HTTP_STATUS];
 
-export { type ApiClientConfig as A, BroadcastPlayer as B, CDN_DOMAIN as C, DialTribeProvider as D, ENDPOINTS as E, HTTP_STATUS as H, LoadingSpinner as L, type TranscriptWord as T, type DialTribeContextValue as a, type DialTribeProviderProps as b, DialTribeClient as c, DIALTRIBE_API_BASE as d, type BroadcastPlayerProps as e, BroadcastPlayerModal as f, type BroadcastPlayerModalProps as g, BroadcastPlayerErrorBoundary as h, AudioWaveform as i, type Broadcast as j, type TranscriptSegment as k, type TranscriptData as l, formatTime as m, buildBroadcastCdnUrl as n, buildBroadcastS3KeyPrefix as o, type HttpStatusCode as p, useDialTribeOptional as q, useDialTribe as u };
+export { type ApiClientConfig as A, type Broadcast as B, CDN_DOMAIN as C, DialtribeProvider as D, ENDPOINTS as E, HTTP_STATUS as H, LoadingSpinner as L, type TranscriptWord as T, type DialtribeContextValue as a, type DialtribeProviderProps as b, DialtribeClient as c, DIALTRIBE_API_BASE as d, DialtribePlayer as e, type DialtribePlayerProps as f, DialtribePlayerErrorBoundary as g, AudioWaveform as h, DialtribeOverlay as i, type DialtribeOverlayProps as j, type DialtribeOverlayMode as k, type TranscriptSegment as l, type TranscriptData as m, formatTime as n, buildBroadcastCdnUrl as o, buildBroadcastS3KeyPrefix as p, type HttpStatusCode as q, useDialtribeOptional as r, useDialtribe as u };

package/dist/dialtribe-player.d.mts

@@ -0,0 +1,3 @@
+export { A as ApiClientConfig, h as AudioWaveform, B as Broadcast, C as CDN_DOMAIN, d as DIALTRIBE_API_BASE, c as DialtribeClient, a as DialtribeContextValue, i as DialtribeOverlay, k as DialtribeOverlayMode, j as DialtribeOverlayProps, e as DialtribePlayer, g as DialtribePlayerErrorBoundary, f as DialtribePlayerProps, D as DialtribeProvider, b as DialtribeProviderProps, E as ENDPOINTS, H as HTTP_STATUS, q as HttpStatusCode, L as LoadingSpinner, m as TranscriptData, l as TranscriptSegment, T as TranscriptWord, o as buildBroadcastCdnUrl, p as buildBroadcastS3KeyPrefix, n as formatTime, u as useDialtribe } from './dialtribe-player-Rc9kfQiX.mjs';
+import 'react/jsx-runtime';
+import 'react';

package/dist/dialtribe-player.d.ts

@@ -0,0 +1,3 @@
+export { A as ApiClientConfig, h as AudioWaveform, B as Broadcast, C as CDN_DOMAIN, d as DIALTRIBE_API_BASE, c as DialtribeClient, a as DialtribeContextValue, i as DialtribeOverlay, k as DialtribeOverlayMode, j as DialtribeOverlayProps, e as DialtribePlayer, g as DialtribePlayerErrorBoundary, f as DialtribePlayerProps, D as DialtribeProvider, b as DialtribeProviderProps, E as ENDPOINTS, H as HTTP_STATUS, q as HttpStatusCode, L as LoadingSpinner, m as TranscriptData, l as TranscriptSegment, T as TranscriptWord, o as buildBroadcastCdnUrl, p as buildBroadcastS3KeyPrefix, n as formatTime, u as useDialtribe } from './dialtribe-player-Rc9kfQiX.js';
+import 'react/jsx-runtime';
+import 'react';

package/dist/{broadcast-player.js → dialtribe-player.js}

@@ -8,9 +8,9 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var ReactPlayer__default = /*#__PURE__*/_interopDefault(ReactPlayer);
 
-// src/context/DialTribeProvider.tsx
-var DialTribeContext = react.createContext(null);
-function DialTribeProvider({
+// src/context/DialtribeProvider.tsx
+var DialtribeContext = react.createContext(null);
+function DialtribeProvider({
   sessionToken: initialToken,
   onTokenRefresh,
   onTokenExpired,
@@ -46,19 +46,19 @@ function DialTribeProvider({
     markExpired,
     apiBaseUrl
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(DialTribeContext.Provider, { value, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(DialtribeContext.Provider, { value, children });
 }
-function useDialTribe() {
-  const context = react.useContext(DialTribeContext);
+function useDialtribe() {
+  const context = react.useContext(DialtribeContext);
   if (!context) {
     throw new Error(
-      'useDialTribe must be used within a DialTribeProvider. Wrap your app with <DialTribeProvider sessionToken="sess_xxx">...</DialTribeProvider>'
+      'useDialtribe must be used within a DialtribeProvider. Wrap your app with <DialtribeProvider sessionToken="sess_xxx">...</DialtribeProvider>'
     );
   }
   return context;
 }
 
-// src/client/DialTribeClient.ts
+// src/client/DialtribeClient.ts
 function getDefaultApiBaseUrl() {
   if (typeof process !== "undefined" && process.env?.NEXT_PUBLIC_DIALTRIBE_API_URL) {
     return process.env.NEXT_PUBLIC_DIALTRIBE_API_URL;
@@ -78,13 +78,13 @@ function getEndpoints(baseUrl = DIALTRIBE_API_BASE) {
   };
 }
 var ENDPOINTS = getEndpoints();
-var DialTribeClient = class {
+var DialtribeClient = class {
   constructor(config) {
     this.config = config;
     this.endpoints = config.apiBaseUrl ? getEndpoints(config.apiBaseUrl) : ENDPOINTS;
   }
   /**
-   * Make an authenticated request to DialTribe API
+   * Make an authenticated request to Dialtribe API
    *
    * Automatically:
    * - Adds Authorization header with session token
@@ -749,7 +749,7 @@ function getErrorMessage(error) {
   }
   return "Unable to play media. Please try refreshing the page or contact support if the problem persists.";
 }
-function BroadcastPlayer({
+function DialtribePlayer({
   broadcast,
   appId,
   contentId,
@@ -760,18 +760,18 @@ function BroadcastPlayer({
   className = "",
   enableKeyboardShortcuts = false
 }) {
-  const { sessionToken, setSessionToken, markExpired, apiBaseUrl } = useDialTribe();
+  const { sessionToken, setSessionToken, markExpired, apiBaseUrl } = useDialtribe();
   const clientRef = react.useRef(null);
   if (!clientRef.current && sessionToken) {
-    clientRef.current = new DialTribeClient({
+    clientRef.current = new DialtribeClient({
       sessionToken,
       apiBaseUrl,
       onTokenRefresh: (newToken, expiresAt) => {
-        debug.log(`[DialTribeClient] Token refreshed, expires at ${expiresAt}`);
+        debug.log(`[DialtribeClient] Token refreshed, expires at ${expiresAt}`);
         setSessionToken(newToken, expiresAt);
       },
       onTokenExpired: () => {
-        debug.error("[DialTribeClient] Token expired");
+        debug.error("[DialtribeClient] Token expired");
         markExpired();
       }
     });
@@ -1216,7 +1216,7 @@ function BroadcastPlayer({
         setAudioElement(internalPlayer);
       }
     } catch (error) {
-      debug.error("[BroadcastPlayer] Error getting internal player:", error);
+      debug.error("[DialtribePlayer] Error getting internal player:", error);
     }
   };
   react.useEffect(() => {
@@ -1424,7 +1424,7 @@ function BroadcastPlayer({
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center p-8", children: /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, { variant: "white", text: "Loading..." }) });
   }
   const hasTranscript = broadcast.transcriptStatus === 2 && transcriptData && (transcriptData.segments && transcriptData.segments.some((s) => s.words && s.words.length > 0) || transcriptData.words && transcriptData.words.length > 0);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `bg-black rounded-lg shadow-2xl w-full max-h-full flex flex-col overflow-hidden ${className}`, children: [
+  const playerContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `bg-black rounded-lg shadow-2xl w-full max-h-full flex flex-col overflow-hidden ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-zinc-900/50 backdrop-blur-sm border-b border-zinc-800 px-3 sm:px-4 md:px-6 py-2 sm:py-3 md:py-4 flex justify-between items-center rounded-t-lg shrink-0", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-white", children: broadcast.streamKeyRecord?.foreignName || "Broadcast" }),
@@ -1956,90 +1956,9 @@ function BroadcastPlayer({
         }
       ` })
   ] });
+  return playerContent;
 }
-function BroadcastPlayerModal({
-  broadcast,
-  isOpen,
-  onClose,
-  appId,
-  contentId,
-  foreignId,
-  foreignTier,
-  renderClipCreator,
-  className,
-  enableKeyboardShortcuts = false
-}) {
-  const closeButtonRef = react.useRef(null);
-  const previousActiveElement = react.useRef(null);
-  react.useEffect(() => {
-    if (!isOpen) return;
-    previousActiveElement.current = document.activeElement;
-    setTimeout(() => {
-      closeButtonRef.current?.focus();
-    }, 100);
-    return () => {
-      if (previousActiveElement.current) {
-        previousActiveElement.current.focus();
-      }
-    };
-  }, [isOpen]);
-  react.useEffect(() => {
-    if (!isOpen) return;
-    const handleKeyDown = (e) => {
-      if (e.key === "Escape") {
-        onClose();
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [isOpen, onClose]);
-  if (!isOpen) return null;
-  const handleBackdropClick = (e) => {
-    if (e.target === e.currentTarget) {
-      onClose();
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: "fixed inset-0 bg-black/70 backdrop-blur-xl flex items-center justify-center z-50 p-2 sm:p-4",
-      onClick: handleBackdropClick,
-      role: "dialog",
-      "aria-modal": "true",
-      "aria-label": "Broadcast player",
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full max-w-7xl max-h-[95vh] sm:max-h-[90vh] overflow-hidden", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            ref: closeButtonRef,
-            onClick: onClose,
-            className: "absolute top-2 right-2 sm:top-4 sm:right-4 z-10 text-gray-400 hover:text-white text-2xl leading-none transition-colors w-8 h-8 flex items-center justify-center bg-black/50 rounded-full",
-            title: "Close (ESC)",
-            "aria-label": "Close player",
-            children: "\xD7"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          BroadcastPlayer,
-          {
-            broadcast,
-            appId,
-            contentId,
-            foreignId,
-            foreignTier,
-            renderClipCreator,
-            className,
-            enableKeyboardShortcuts,
-            onError: (error) => {
-              debug.error("[BroadcastPlayerModal] Player error:", error);
-            }
-          }
-        )
-      ] })
-    }
-  );
-}
-var BroadcastPlayerErrorBoundary = class extends react.Component {
+var DialtribePlayerErrorBoundary = class extends react.Component {
   constructor(props) {
     super(props);
     this.handleReset = () => {
@@ -2165,21 +2084,99 @@ var BroadcastPlayerErrorBoundary = class extends react.Component {
     return this.props.children;
   }
 };
+var overlayStyles = {
+  modal: {
+    backdrop: "bg-black/70 backdrop-blur-xl p-2 sm:p-4",
+    container: "max-w-7xl max-h-[95vh] sm:max-h-[90vh]"
+  },
+  fullscreen: {
+    backdrop: "bg-black",
+    container: "h-full"
+  }
+};
+function DialtribeOverlay({
+  isOpen,
+  onClose,
+  mode = "modal",
+  children,
+  ariaLabel = "Dialog",
+  showCloseButton = true,
+  closeOnBackdropClick = true,
+  closeOnEsc = true
+}) {
+  const closeButtonRef = react.useRef(null);
+  const previousActiveElement = react.useRef(null);
+  react.useEffect(() => {
+    if (!isOpen) return;
+    previousActiveElement.current = document.activeElement;
+    setTimeout(() => {
+      closeButtonRef.current?.focus();
+    }, 100);
+    return () => {
+      if (previousActiveElement.current) {
+        previousActiveElement.current.focus();
+      }
+    };
+  }, [isOpen]);
+  react.useEffect(() => {
+    if (!isOpen || !closeOnEsc) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, onClose, closeOnEsc]);
+  if (!isOpen) {
+    return null;
+  }
+  const handleBackdropClick = (e) => {
+    if (closeOnBackdropClick && e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+  const styles = overlayStyles[mode];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `fixed inset-0 flex items-center justify-center z-50 ${styles.backdrop}`,
+      onClick: handleBackdropClick,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative w-full overflow-hidden ${styles.container}`, children: [
+        showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            ref: closeButtonRef,
+            onClick: onClose,
+            className: "absolute top-2 right-2 sm:top-4 sm:right-4 z-10 text-gray-400 hover:text-white text-2xl leading-none transition-colors w-8 h-8 flex items-center justify-center bg-black/50 rounded-full",
+            title: "Close (ESC)",
+            "aria-label": "Close",
+            children: "\xD7"
+          }
+        ),
+        children
+      ] })
+    }
+  );
+}
 
 exports.AudioWaveform = AudioWaveform;
-exports.BroadcastPlayer = BroadcastPlayer;
-exports.BroadcastPlayerErrorBoundary = BroadcastPlayerErrorBoundary;
-exports.BroadcastPlayerModal = BroadcastPlayerModal;
 exports.CDN_DOMAIN = CDN_DOMAIN;
 exports.DIALTRIBE_API_BASE = DIALTRIBE_API_BASE;
-exports.DialTribeClient = DialTribeClient;
-exports.DialTribeProvider = DialTribeProvider;
+exports.DialtribeClient = DialtribeClient;
+exports.DialtribeOverlay = DialtribeOverlay;
+exports.DialtribePlayer = DialtribePlayer;
+exports.DialtribePlayerErrorBoundary = DialtribePlayerErrorBoundary;
+exports.DialtribeProvider = DialtribeProvider;
 exports.ENDPOINTS = ENDPOINTS;
 exports.HTTP_STATUS = HTTP_STATUS;
 exports.LoadingSpinner = LoadingSpinner;
 exports.buildBroadcastCdnUrl = buildBroadcastCdnUrl;
 exports.buildBroadcastS3KeyPrefix = buildBroadcastS3KeyPrefix;
 exports.formatTime = formatTime;
-exports.useDialTribe = useDialTribe;
-//# sourceMappingURL=broadcast-player.js.map
-//# sourceMappingURL=broadcast-player.js.map
+exports.useDialtribe = useDialtribe;
+//# sourceMappingURL=dialtribe-player.js.map
+//# sourceMappingURL=dialtribe-player.js.map