@scalemule/nextjs 0.1.18 → 0.1.20

package/README.md

@@ -34,6 +34,8 @@ This creates all auth endpoints automatically:
 
 API keys never reach the browser. Session tokens are HTTP-only cookies.
 
+Need the cookie/header lifecycle or the proxy-vs-direct decision tree? See [`docs/AUTH_PROXY_PATTERN.md`](./docs/AUTH_PROXY_PATTERN.md).
+
 ## Environment Variables
 
 ```bash
@@ -295,7 +297,7 @@ export const { GET, POST, DELETE, PATCH } = createAuthRoutes({
 
 ```ts
 // Read CSRF token from cookie and include in requests
-const csrfToken = document.cookie.match(/csrf_token=([^;]+)/)?.[1]
+const csrfToken = document.cookie.match(/sm_csrf=([^;]+)/)?.[1]
 
 fetch('/api/auth/login', {
   method: 'POST',

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ApiError, RealtimeService, StorageService, PhotoService, VideoService, AudioService, FileStatus } from '@scalemule/sdk';
+import { ApiError, RealtimeService, StorageService, PhotoService, VideoService, AudioService, TtsService, TtsJobStatus, FileStatus, TtsAudioInfo } from '@scalemule/sdk';
 import * as React from 'react';
 import { ReactNode, ReactElement } from 'react';
 import { MoneyClient } from '@scalemule/money';
@@ -166,6 +166,8 @@ interface ScaleMuleContextValue {
     video: VideoService;
     /** Base SDK audio service — exposed for `useMedia()` and `audio.uploadViaStorage()` */
     audio: AudioService;
+    /** Base SDK TTS service — exposed for `useTtsJob()` and direct narration requests */
+    tts: TtsService;
     /**
      * Default media policy for `useMedia()` calls. Set via
      * `<ScaleMuleProvider mediaPolicy="…">`; per-call overrides win.
@@ -360,6 +362,18 @@ interface UseAudioReturn {
 }
 declare function useAudio(): UseAudioReturn;
 
+interface UseTtsJobOptions {
+    enabled?: boolean;
+    pollIntervalMs?: number;
+}
+interface UseTtsJobReturn {
+    job: TtsJobStatus | null;
+    loading: boolean;
+    error: ApiError | null;
+    refresh: () => Promise<TtsJobStatus | null>;
+}
+declare function useTtsJob(jobId: string | null | undefined, options?: UseTtsJobOptions): UseTtsJobReturn;
+
 /**
  * Conversation kinds recognized by the chat realtime channel naming scheme.
  * Matches `broadcast_to_conversation` in `ms/scalemule-chat/src/realtime.rs`.
@@ -874,6 +888,21 @@ interface FeedbackWidgetProps {
  */
 declare function FeedbackWidget(props: FeedbackWidgetProps): ReactElement | null;
 
+type NarrationPlayerAudio = TtsAudioInfo & {
+    waveform_peaks?: number[] | null;
+    ai_generated?: boolean;
+};
+interface NarrationPlayerProps {
+    audio: NarrationPlayerAudio;
+    className?: string;
+    providerLabel?: string;
+    narrationLabel?: string;
+    refreshing?: boolean;
+    onRefresh?: () => void;
+    onPlaybackError?: () => void;
+}
+declare function NarrationPlayer({ audio, className, providerLabel, narrationLabel, refreshing, onRefresh, onPlaybackError, }: NarrationPlayerProps): react_jsx_runtime.JSX.Element | null;
+
 /**
  * Client-side validation helpers
  *
@@ -1032,4 +1061,4 @@ declare function createSafeLogger(prefix: string): {
     error: (message: string, data?: unknown) => void;
 };
 
-export { ApiError$1 as ApiError, type AudioFile, type AudioUploadResult, type ConversationKind, type FeatureFlagEvaluation, type FeatureFlagEvaluation as FeatureFlagResult, type FeedbackItem, type FeedbackItemInput, type FeedbackPriority, type FeedbackStatus, type FeedbackType, FeedbackWidget, type FeedbackWidgetConfig, type FeedbackWidgetProps, ListFilesParams, LoginResponse, type MediaPolicy, type MediaUploadResult, type PasswordValidationResult, type PhoneCountry, type PhoneValidationResult, type RealtimeEvent, type RealtimeMessage, type RealtimeStatus, ScaleMuleClient, ScaleMuleConfig, ScaleMuleMedia, type ScaleMuleMediaProps, ScaleMuleProvider, type ScaleMuleProviderProps, UseAnalyticsOptions, UseAnalyticsReturn, type UseAudioReturn, type UseAudioUploadOptions, UseAuthReturn, UseBillingReturn, UseContentReturn, type UseFeatureFlagsOptions, type UseFeatureFlagsReturn, type UseFeedbackOptions, type UseFeedbackResult, type UseFileStatusOptions, type UseFileStatusReturn, type UseFeatureFlagsOptions as UseFlagsOptions, type UseFeatureFlagsReturn as UseFlagsReturn, type UseMediaReturn, type UseMediaUploadOptions, type UsePushNotificationsOptions, type UsePushNotificationsReturn, type UseRealtimeOptions, type UseRealtimeReturn, type UseShareOptions, type UseShareReturn, UseUserReturn, User, type UsernameValidationResult, composePhone, createSafeLogger, normalizePhone, phoneCountries, sanitizeForLog, useAnalytics, useAudio, useAuth, useBilling, useContent, useFeatureFlags, useFeedback, useFileStatus, useMedia, useMoney, useMoneyClient, usePushNotifications, useRealtime, useScaleMule, useScaleMuleClient, useShare, useUser, validateForm, validators };
+export { ApiError$1 as ApiError, type AudioFile, type AudioUploadResult, type ConversationKind, type FeatureFlagEvaluation, type FeatureFlagEvaluation as FeatureFlagResult, type FeedbackItem, type FeedbackItemInput, type FeedbackPriority, type FeedbackStatus, type FeedbackType, FeedbackWidget, type FeedbackWidgetConfig, type FeedbackWidgetProps, ListFilesParams, LoginResponse, type MediaPolicy, type MediaUploadResult, NarrationPlayer, type NarrationPlayerAudio, type NarrationPlayerProps, type PasswordValidationResult, type PhoneCountry, type PhoneValidationResult, type RealtimeEvent, type RealtimeMessage, type RealtimeStatus, ScaleMuleClient, ScaleMuleConfig, ScaleMuleMedia, type ScaleMuleMediaProps, ScaleMuleProvider, type ScaleMuleProviderProps, UseAnalyticsOptions, UseAnalyticsReturn, type UseAudioReturn, type UseAudioUploadOptions, UseAuthReturn, UseBillingReturn, UseContentReturn, type UseFeatureFlagsOptions, type UseFeatureFlagsReturn, type UseFeedbackOptions, type UseFeedbackResult, type UseFileStatusOptions, type UseFileStatusReturn, type UseFeatureFlagsOptions as UseFlagsOptions, type UseFeatureFlagsReturn as UseFlagsReturn, type UseMediaReturn, type UseMediaUploadOptions, type UsePushNotificationsOptions, type UsePushNotificationsReturn, type UseRealtimeOptions, type UseRealtimeReturn, type UseShareOptions, type UseShareReturn, type UseTtsJobOptions, type UseTtsJobReturn, UseUserReturn, User, type UsernameValidationResult, composePhone, createSafeLogger, normalizePhone, phoneCountries, sanitizeForLog, useAnalytics, useAudio, useAuth, useBilling, useContent, useFeatureFlags, useFeedback, useFileStatus, useMedia, useMoney, useMoneyClient, usePushNotifications, useRealtime, useScaleMule, useScaleMuleClient, useShare, useTtsJob, useUser, validateForm, validators };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ApiError, RealtimeService, StorageService, PhotoService, VideoService, AudioService, FileStatus } from '@scalemule/sdk';
+import { ApiError, RealtimeService, StorageService, PhotoService, VideoService, AudioService, TtsService, TtsJobStatus, FileStatus, TtsAudioInfo } from '@scalemule/sdk';
 import * as React from 'react';
 import { ReactNode, ReactElement } from 'react';
 import { MoneyClient } from '@scalemule/money';
@@ -166,6 +166,8 @@ interface ScaleMuleContextValue {
     video: VideoService;
     /** Base SDK audio service — exposed for `useMedia()` and `audio.uploadViaStorage()` */
     audio: AudioService;
+    /** Base SDK TTS service — exposed for `useTtsJob()` and direct narration requests */
+    tts: TtsService;
     /**
      * Default media policy for `useMedia()` calls. Set via
      * `<ScaleMuleProvider mediaPolicy="…">`; per-call overrides win.
@@ -360,6 +362,18 @@ interface UseAudioReturn {
 }
 declare function useAudio(): UseAudioReturn;
 
+interface UseTtsJobOptions {
+    enabled?: boolean;
+    pollIntervalMs?: number;
+}
+interface UseTtsJobReturn {
+    job: TtsJobStatus | null;
+    loading: boolean;
+    error: ApiError | null;
+    refresh: () => Promise<TtsJobStatus | null>;
+}
+declare function useTtsJob(jobId: string | null | undefined, options?: UseTtsJobOptions): UseTtsJobReturn;
+
 /**
  * Conversation kinds recognized by the chat realtime channel naming scheme.
  * Matches `broadcast_to_conversation` in `ms/scalemule-chat/src/realtime.rs`.
@@ -874,6 +888,21 @@ interface FeedbackWidgetProps {
  */
 declare function FeedbackWidget(props: FeedbackWidgetProps): ReactElement | null;
 
+type NarrationPlayerAudio = TtsAudioInfo & {
+    waveform_peaks?: number[] | null;
+    ai_generated?: boolean;
+};
+interface NarrationPlayerProps {
+    audio: NarrationPlayerAudio;
+    className?: string;
+    providerLabel?: string;
+    narrationLabel?: string;
+    refreshing?: boolean;
+    onRefresh?: () => void;
+    onPlaybackError?: () => void;
+}
+declare function NarrationPlayer({ audio, className, providerLabel, narrationLabel, refreshing, onRefresh, onPlaybackError, }: NarrationPlayerProps): react_jsx_runtime.JSX.Element | null;
+
 /**
  * Client-side validation helpers
  *
@@ -1032,4 +1061,4 @@ declare function createSafeLogger(prefix: string): {
     error: (message: string, data?: unknown) => void;
 };
 
-export { ApiError$1 as ApiError, type AudioFile, type AudioUploadResult, type ConversationKind, type FeatureFlagEvaluation, type FeatureFlagEvaluation as FeatureFlagResult, type FeedbackItem, type FeedbackItemInput, type FeedbackPriority, type FeedbackStatus, type FeedbackType, FeedbackWidget, type FeedbackWidgetConfig, type FeedbackWidgetProps, ListFilesParams, LoginResponse, type MediaPolicy, type MediaUploadResult, type PasswordValidationResult, type PhoneCountry, type PhoneValidationResult, type RealtimeEvent, type RealtimeMessage, type RealtimeStatus, ScaleMuleClient, ScaleMuleConfig, ScaleMuleMedia, type ScaleMuleMediaProps, ScaleMuleProvider, type ScaleMuleProviderProps, UseAnalyticsOptions, UseAnalyticsReturn, type UseAudioReturn, type UseAudioUploadOptions, UseAuthReturn, UseBillingReturn, UseContentReturn, type UseFeatureFlagsOptions, type UseFeatureFlagsReturn, type UseFeedbackOptions, type UseFeedbackResult, type UseFileStatusOptions, type UseFileStatusReturn, type UseFeatureFlagsOptions as UseFlagsOptions, type UseFeatureFlagsReturn as UseFlagsReturn, type UseMediaReturn, type UseMediaUploadOptions, type UsePushNotificationsOptions, type UsePushNotificationsReturn, type UseRealtimeOptions, type UseRealtimeReturn, type UseShareOptions, type UseShareReturn, UseUserReturn, User, type UsernameValidationResult, composePhone, createSafeLogger, normalizePhone, phoneCountries, sanitizeForLog, useAnalytics, useAudio, useAuth, useBilling, useContent, useFeatureFlags, useFeedback, useFileStatus, useMedia, useMoney, useMoneyClient, usePushNotifications, useRealtime, useScaleMule, useScaleMuleClient, useShare, useUser, validateForm, validators };
+export { ApiError$1 as ApiError, type AudioFile, type AudioUploadResult, type ConversationKind, type FeatureFlagEvaluation, type FeatureFlagEvaluation as FeatureFlagResult, type FeedbackItem, type FeedbackItemInput, type FeedbackPriority, type FeedbackStatus, type FeedbackType, FeedbackWidget, type FeedbackWidgetConfig, type FeedbackWidgetProps, ListFilesParams, LoginResponse, type MediaPolicy, type MediaUploadResult, NarrationPlayer, type NarrationPlayerAudio, type NarrationPlayerProps, type PasswordValidationResult, type PhoneCountry, type PhoneValidationResult, type RealtimeEvent, type RealtimeMessage, type RealtimeStatus, ScaleMuleClient, ScaleMuleConfig, ScaleMuleMedia, type ScaleMuleMediaProps, ScaleMuleProvider, type ScaleMuleProviderProps, UseAnalyticsOptions, UseAnalyticsReturn, type UseAudioReturn, type UseAudioUploadOptions, UseAuthReturn, UseBillingReturn, UseContentReturn, type UseFeatureFlagsOptions, type UseFeatureFlagsReturn, type UseFeedbackOptions, type UseFeedbackResult, type UseFileStatusOptions, type UseFileStatusReturn, type UseFeatureFlagsOptions as UseFlagsOptions, type UseFeatureFlagsReturn as UseFlagsReturn, type UseMediaReturn, type UseMediaUploadOptions, type UsePushNotificationsOptions, type UsePushNotificationsReturn, type UseRealtimeOptions, type UseRealtimeReturn, type UseShareOptions, type UseShareReturn, type UseTtsJobOptions, type UseTtsJobReturn, UseUserReturn, User, type UsernameValidationResult, composePhone, createSafeLogger, normalizePhone, phoneCountries, sanitizeForLog, useAnalytics, useAudio, useAuth, useBilling, useContent, useFeatureFlags, useFeedback, useFileStatus, useMedia, useMoney, useMoneyClient, usePushNotifications, useRealtime, useScaleMule, useScaleMuleClient, useShare, useTtsJob, useUser, validateForm, validators };

package/dist/index.js

@@ -7804,6 +7804,7 @@ function ScaleMuleProvider({
       photo: baseClient.photo,
       video: baseClient.video,
       audio: baseClient.audio,
+      tts: baseClient.tts,
       mediaPolicy: effectiveMediaPolicy,
       user,
       setUser: handleSetUser,
@@ -9192,7 +9193,7 @@ function useAudio() {
           return null;
         }
         try {
-          const details = await client.get(`/v1/audios/${audioId}`);
+          const details = await client.get(`/v1/audio/${audioId}`);
           if (details.status === "ready" && details.url) {
             return details.url;
           }
@@ -9254,7 +9255,7 @@ function useAudio() {
       const enriched = await Promise.all(
         audioFiles.map(async (file) => {
           try {
-            const details = await client.get(`/v1/audios/${file.id}`);
+            const details = await client.get(`/v1/audio/${file.id}`);
             return {
               audio_id: details.id,
               file_id: file.id,
@@ -9290,7 +9291,7 @@ function useAudio() {
       setError(null);
       try {
         const [audioDeleteResult, storageDeleteResult] = await Promise.allSettled([
-          client.delete(`/v1/audios/${fileId}`),
+          client.delete(`/v1/audio/${fileId}`),
           client.delete(`/v1/storage/files/${fileId}`)
         ]);
         if (storageDeleteResult.status === "rejected" && !isNotFoundError(storageDeleteResult.reason)) {
@@ -9317,6 +9318,63 @@ function useAudio() {
     loading
   };
 }
+var DEFAULT_POLL_INTERVAL_MS = 2e3;
+var TERMINAL_STATUSES = /* @__PURE__ */ new Set(["ready", "failed"]);
+function useTtsJob(jobId, options) {
+  const { tts } = useScaleMule();
+  const [job, setJob] = React.useState(null);
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const refresh = React.useCallback(async () => {
+    if (!jobId) {
+      setJob(null);
+      return null;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await tts.getJob(jobId);
+      if (!result) {
+        const apiError = { code: "tts_job_error", message: "Failed to load TTS job", status: 500 };
+        setError(apiError);
+        return null;
+      }
+      if (result.error || !result.data) {
+        const apiError = result.error ?? { code: "tts_job_error", message: "Failed to load TTS job", status: 500 };
+        setError(apiError);
+        return null;
+      }
+      setJob(result.data);
+      return result.data;
+    } finally {
+      setLoading(false);
+    }
+  }, [jobId, tts]);
+  React.useEffect(() => {
+    if (!jobId || options?.enabled === false) {
+      setJob(null);
+      setLoading(false);
+      return;
+    }
+    let cancelled = false;
+    let timeoutId = null;
+    const poll = async () => {
+      const next = await refresh();
+      if (cancelled || !next || TERMINAL_STATUSES.has(next.status)) {
+        return;
+      }
+      timeoutId = window.setTimeout(poll, options?.pollIntervalMs ?? DEFAULT_POLL_INTERVAL_MS);
+    };
+    poll();
+    return () => {
+      cancelled = true;
+      if (timeoutId != null) {
+        window.clearTimeout(timeoutId);
+      }
+    };
+  }, [jobId, options?.enabled, options?.pollIntervalMs, refresh]);
+  return { job, loading, error, refresh };
+}
 function useMedia() {
   const { storage, photo, video, audio, mediaPolicy: providerDefaultPolicy } = useScaleMule();
   const [uploading, setUploading] = React.useState(false);
@@ -11230,6 +11288,230 @@ function FeedbackWidget(props) {
     ) })
   ] });
 }
+var SPEEDS = [1, 1.25, 1.5, 2];
+function formatTime(seconds) {
+  if (!Number.isFinite(seconds) || seconds <= 0) {
+    return "0:00";
+  }
+  const wholeSeconds = Math.floor(seconds);
+  const minutes = Math.floor(wholeSeconds / 60);
+  const remainder = wholeSeconds % 60;
+  return `${minutes}:${remainder.toString().padStart(2, "0")}`;
+}
+function getNextSpeed(currentSpeed) {
+  const currentIndex = SPEEDS.findIndex((speed) => speed === currentSpeed);
+  if (currentIndex === -1) {
+    return SPEEDS[0];
+  }
+  return SPEEDS[(currentIndex + 1) % SPEEDS.length];
+}
+function NarrationPlayer({
+  audio,
+  className,
+  providerLabel = "ScaleMule",
+  narrationLabel = "AI-Narrated",
+  refreshing = false,
+  onRefresh,
+  onPlaybackError
+}) {
+  const audioRef = React.useRef(null);
+  const scrubRef = React.useRef(null);
+  const [playing, setPlaying] = React.useState(false);
+  const [currentTime, setCurrentTime] = React.useState(0);
+  const [duration, setDuration] = React.useState(audio.duration_ms ? audio.duration_ms / 1e3 : 0);
+  const [speed, setSpeed] = React.useState(1.5);
+  const peaks = React.useMemo(() => {
+    if (!Array.isArray(audio.waveform_peaks)) {
+      return [];
+    }
+    const sampled = audio.waveform_peaks.filter((_, index) => index % 3 === 0).slice(0, 220);
+    return sampled.length > 0 ? sampled : audio.waveform_peaks.slice(0, 220);
+  }, [audio.waveform_peaks]);
+  React.useEffect(() => {
+    const element = audioRef.current;
+    if (!element) return;
+    setCurrentTime(0);
+    setPlaying(false);
+    element.pause();
+    element.currentTime = 0;
+  }, [audio.url]);
+  React.useEffect(() => {
+    const element = audioRef.current;
+    if (!element) return;
+    element.playbackRate = speed;
+    element.preservesPitch = true;
+  }, [speed]);
+  function togglePlayback() {
+    const element = audioRef.current;
+    if (!element) return;
+    if (element.paused) {
+      element.play().catch(() => {
+        setPlaying(false);
+        onPlaybackError?.();
+      });
+      return;
+    }
+    element.pause();
+  }
+  function seekTo(clientX) {
+    const element = audioRef.current;
+    const scrubber = scrubRef.current;
+    if (!element || !scrubber || !duration) return;
+    const bounds = scrubber.getBoundingClientRect();
+    const ratio = Math.max(0, Math.min(1, (clientX - bounds.left) / bounds.width));
+    const nextTime = ratio * duration;
+    element.currentTime = nextTime;
+    setCurrentTime(nextTime);
+  }
+  const progress = duration > 0 ? Math.min(1, currentTime / duration) : 0;
+  const expiresLabel = audio.expires_at ? new Date(audio.expires_at).toLocaleTimeString([], {
+    hour: "numeric",
+    minute: "2-digit"
+  }) : null;
+  if (!audio.url) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "rounded-[1.75rem] border border-slate-200/80 bg-[linear-gradient(180deg,#f8fbff_0%,#edf4ff_100%)] p-4 text-slate-900 shadow-[0_22px_70px_rgba(4,12,24,0.28)] " + (className ?? ""),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "audio",
+          {
+            ref: audioRef,
+            src: audio.url ?? void 0,
+            preload: "metadata",
+            onLoadedMetadata: (event) => {
+              setDuration(event.currentTarget.duration || 0);
+            },
+            onTimeUpdate: (event) => {
+              setCurrentTime(event.currentTarget.currentTime);
+            },
+            onPlay: () => setPlaying(true),
+            onPause: () => setPlaying(false),
+            onEnded: () => setPlaying(false),
+            onError: () => onPlaybackError?.()
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 md:flex-row md:items-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: togglePlayback,
+              "aria-label": playing ? "Pause narration" : "Play narration",
+              className: "flex h-[4.5rem] w-[4.5rem] shrink-0 items-center justify-center rounded-full bg-slate-950 text-white shadow-[0_10px_28px_rgba(15,23,42,0.25)] transition hover:bg-slate-800",
+              children: playing ? /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", className: "h-7 w-7 fill-current", "aria-hidden": "true", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "6", y: "5", width: "4", height: "14", rx: "1.2" }),
+                /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "14", y: "5", width: "4", height: "14", rx: "1.2" })
+              ] }) : /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", className: "ml-1 h-7 w-7 fill-current", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 5.2c0-1.02 1.12-1.65 2-.98l10.2 7.78a1.24 1.24 0 0 1 0 1.98L9 21.76c-.88.67-2-.04-2-1.08V5.2Z" }) })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 text-[0.8rem] font-medium text-slate-500", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTime(currentTime / speed) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-blue-100 px-3 py-1 text-[0.65rem] font-semibold uppercase tracking-[0.24em] text-blue-700", children: narrationLabel }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTime(duration / speed) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                ref: scrubRef,
+                role: "slider",
+                "aria-label": "Narration progress",
+                "aria-valuemin": 0,
+                "aria-valuemax": Math.max(1, Math.floor(duration)),
+                "aria-valuenow": Math.floor(currentTime),
+                tabIndex: 0,
+                onClick: (event) => {
+                  seekTo(event.clientX);
+                },
+                className: "relative mt-4 h-12 cursor-pointer overflow-hidden rounded-[1rem] bg-slate-200/90 px-1",
+                children: peaks.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    viewBox: `0 0 ${peaks.length} 40`,
+                    preserveAspectRatio: "none",
+                    className: "pointer-events-none absolute inset-0 h-full w-full",
+                    children: peaks.map((peak, index) => {
+                      const height = Math.max(2, Math.round(Math.abs(peak) * 34));
+                      const y = (40 - height) / 2;
+                      const filled = index / peaks.length < progress;
+                      return /* @__PURE__ */ jsxRuntime.jsx(
+                        "rect",
+                        {
+                          x: index,
+                          y,
+                          width: 0.82,
+                          height,
+                          rx: 0.4,
+                          className: filled ? "fill-blue-600" : "fill-blue-300"
+                        },
+                        `${audio.id}-${index}`
+                      );
+                    })
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-slate-200/90" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: "absolute inset-y-0 left-0 bg-blue-600",
+                      style: { width: `${progress * 100}%` }
+                    }
+                  )
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex flex-wrap items-center gap-2 text-[0.72rem] font-medium text-slate-500", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "rounded-full border border-slate-200 bg-white/85 px-3 py-1 text-slate-700", children: [
+                "Provider: ",
+                providerLabel
+              ] }),
+              duration > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "rounded-full border border-slate-200 bg-white/65 px-3 py-1", children: [
+                "Length ",
+                formatTime(duration / speed)
+              ] }),
+              expiresLabel && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "rounded-full border border-slate-200 bg-white/65 px-3 py-1", children: [
+                "Expires ",
+                expiresLabel
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-2 self-start md:self-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  setSpeed((currentSpeed) => getNextSpeed(currentSpeed));
+                },
+                className: "rounded-full border border-slate-300 bg-white/90 px-4 py-2 text-base font-semibold text-slate-700 shadow-sm hover:bg-white",
+                children: [
+                  speed,
+                  "\xD7"
+                ]
+              }
+            ),
+            onRefresh && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onRefresh,
+                disabled: refreshing,
+                className: "rounded-full border border-slate-300 bg-white/75 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-white disabled:cursor-not-allowed disabled:opacity-60",
+                children: refreshing ? "Refreshing\u2026" : "Refresh"
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
 
 // src/validation.ts
 var phoneCountries = [
@@ -11531,6 +11813,7 @@ Object.defineProperty(exports, "createMoneyClient", {
   get: function () { return money.createMoneyClient; }
 });
 exports.FeedbackWidget = FeedbackWidget;
+exports.NarrationPlayer = NarrationPlayer;
 exports.ScaleMuleApiError = ScaleMuleApiError;
 exports.ScaleMuleClient = ScaleMuleClient2;
 exports.ScaleMuleMedia = ScaleMuleMedia;
@@ -11557,6 +11840,7 @@ exports.useRealtime = useRealtime;
 exports.useScaleMule = useScaleMule;
 exports.useScaleMuleClient = useScaleMuleClient;
 exports.useShare = useShare;
+exports.useTtsJob = useTtsJob;
 exports.useUser = useUser;
 exports.validateForm = validateForm;
 exports.validators = validators;