@scalemule/nextjs 0.1.21 → 0.1.23

package/dist/index.d.mts

@@ -898,7 +898,7 @@ interface NarrationPlayerProps {
     providerLabel?: string;
     narrationLabel?: string;
     refreshing?: boolean;
-    onRefresh?: () => void;
+    onRefresh?: () => void | Promise<void>;
     onPlaybackError?: () => void;
 }
 declare function NarrationPlayer({ audio, className, providerLabel, narrationLabel, refreshing, onRefresh, onPlaybackError, }: NarrationPlayerProps): react_jsx_runtime.JSX.Element | null;

package/dist/index.d.ts

@@ -898,7 +898,7 @@ interface NarrationPlayerProps {
     providerLabel?: string;
     narrationLabel?: string;
     refreshing?: boolean;
-    onRefresh?: () => void;
+    onRefresh?: () => void | Promise<void>;
     onPlaybackError?: () => void;
 }
 declare function NarrationPlayer({ audio, className, providerLabel, narrationLabel, refreshing, onRefresh, onPlaybackError, }: NarrationPlayerProps): react_jsx_runtime.JSX.Element | null;

package/dist/index.js

@@ -11289,6 +11289,157 @@ function FeedbackWidget(props) {
   ] });
 }
 var SPEEDS = [1, 1.25, 1.5, 2];
+var EXPIRY_REFRESH_WINDOW_MS = 3e4;
+var styles = {
+  root: {
+    borderRadius: "1.75rem",
+    border: "1px solid rgba(226, 232, 240, 0.8)",
+    background: "linear-gradient(180deg, #f8fbff 0%, #edf4ff 100%)",
+    padding: "1rem",
+    color: "#0f172b",
+    boxShadow: "0 22px 70px rgba(4, 12, 24, 0.28)"
+  },
+  layout: {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: "1rem"
+  },
+  playButton: {
+    display: "flex",
+    height: "4.5rem",
+    width: "4.5rem",
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "9999px",
+    border: "none",
+    backgroundColor: "#020618",
+    color: "#ffffff",
+    boxShadow: "0 10px 28px rgba(15, 23, 42, 0.25)",
+    cursor: "pointer"
+  },
+  playIcon: {
+    display: "block",
+    width: "1.75rem",
+    height: "1.75rem",
+    fill: "currentColor"
+  },
+  playIconOffset: {
+    marginLeft: "0.25rem"
+  },
+  content: {
+    minWidth: "16rem",
+    flex: "1 1 18rem"
+  },
+  metaRow: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "0.75rem",
+    fontSize: "0.8rem",
+    fontWeight: 500,
+    color: "#62748e"
+  },
+  metaRight: {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.75rem"
+  },
+  badge: {
+    borderRadius: "9999px",
+    backgroundColor: "#dbeafe",
+    padding: "0.25rem 0.75rem",
+    fontSize: "0.65rem",
+    fontWeight: 600,
+    letterSpacing: "0.24em",
+    textTransform: "uppercase",
+    color: "#1447e6"
+  },
+  scrubber: {
+    position: "relative",
+    marginTop: "1rem",
+    height: "3rem",
+    cursor: "pointer",
+    overflow: "hidden",
+    borderRadius: "1rem",
+    backgroundColor: "rgba(226, 232, 240, 0.9)",
+    paddingInline: "0.25rem"
+  },
+  waveform: {
+    pointerEvents: "none",
+    position: "absolute",
+    inset: 0,
+    height: "100%",
+    width: "100%"
+  },
+  fallbackTrack: {
+    position: "absolute",
+    inset: 0,
+    backgroundColor: "rgba(226, 232, 240, 0.9)"
+  },
+  fallbackProgress: {
+    position: "absolute",
+    insetBlock: 0,
+    left: 0,
+    backgroundColor: "#155dfc"
+  },
+  chipsRow: {
+    marginTop: "1rem",
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: "0.5rem",
+    fontSize: "0.72rem",
+    fontWeight: 500,
+    color: "#62748e"
+  },
+  chipStrong: {
+    borderRadius: "9999px",
+    border: "1px solid #e2e8f0",
+    backgroundColor: "rgba(255, 255, 255, 0.85)",
+    padding: "0.25rem 0.75rem",
+    color: "#334155"
+  },
+  chipMuted: {
+    borderRadius: "9999px",
+    border: "1px solid #e2e8f0",
+    backgroundColor: "rgba(255, 255, 255, 0.65)",
+    padding: "0.25rem 0.75rem"
+  },
+  controls: {
+    display: "flex",
+    flexShrink: 0,
+    alignItems: "center",
+    gap: "0.5rem",
+    alignSelf: "flex-start"
+  },
+  secondaryButton: {
+    borderRadius: "9999px",
+    border: "1px solid #cad5e2",
+    backgroundColor: "rgba(255, 255, 255, 0.9)",
+    padding: "0.5rem 1rem",
+    fontSize: "1rem",
+    fontWeight: 600,
+    color: "#334155",
+    boxShadow: "0 1px 3px rgba(15, 23, 42, 0.08)",
+    cursor: "pointer"
+  },
+  refreshButton: {
+    borderRadius: "9999px",
+    border: "1px solid #cad5e2",
+    backgroundColor: "rgba(255, 255, 255, 0.75)",
+    padding: "0.5rem 1rem",
+    fontSize: "0.875rem",
+    fontWeight: 600,
+    color: "#334155",
+    cursor: "pointer"
+  },
+  disabled: {
+    cursor: "not-allowed",
+    opacity: 0.6
+  }
+};
 function formatTime(seconds) {
   if (!Number.isFinite(seconds) || seconds <= 0) {
     return "0:00";
@@ -11316,6 +11467,9 @@ function NarrationPlayer({
 }) {
   const audioRef = React.useRef(null);
   const scrubRef = React.useRef(null);
+  const pendingResumeRef = React.useRef(false);
+  const pendingResumeTimeRef = React.useRef(null);
+  const recoveredUrlRef = 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);
@@ -11330,10 +11484,26 @@ function NarrationPlayer({
   React.useEffect(() => {
     const element = audioRef.current;
     if (!element) return;
-    setCurrentTime(0);
+    recoveredUrlRef.current = null;
+    const resumeTime = pendingResumeTimeRef.current;
+    setCurrentTime(resumeTime ?? 0);
     setPlaying(false);
     element.pause();
-    element.currentTime = 0;
+    try {
+      element.currentTime = resumeTime ?? 0;
+    } catch {
+      element.currentTime = 0;
+    }
+    if (pendingResumeRef.current) {
+      pendingResumeRef.current = false;
+      pendingResumeTimeRef.current = null;
+      element.play().catch(() => {
+        setPlaying(false);
+        onPlaybackError?.();
+      });
+      return;
+    }
+    pendingResumeTimeRef.current = null;
   }, [audio.url]);
   React.useEffect(() => {
     const element = audioRef.current;
@@ -11341,10 +11511,49 @@ function NarrationPlayer({
     element.playbackRate = speed;
     element.preservesPitch = true;
   }, [speed]);
+  function isUrlExpiringSoon() {
+    if (!audio.expires_at) {
+      return false;
+    }
+    const expiresAtMs = Date.parse(audio.expires_at);
+    if (!Number.isFinite(expiresAtMs)) {
+      return false;
+    }
+    return expiresAtMs - Date.now() <= EXPIRY_REFRESH_WINDOW_MS;
+  }
+  async function refreshAndResume() {
+    if (!onRefresh || refreshing) {
+      return false;
+    }
+    if (recoveredUrlRef.current === (audio.url ?? null)) {
+      return false;
+    }
+    recoveredUrlRef.current = audio.url ?? null;
+    pendingResumeRef.current = true;
+    pendingResumeTimeRef.current = currentTime;
+    try {
+      await Promise.resolve(onRefresh());
+      return true;
+    } catch {
+      pendingResumeRef.current = false;
+      pendingResumeTimeRef.current = null;
+      onPlaybackError?.();
+      return false;
+    }
+  }
   function togglePlayback() {
     const element = audioRef.current;
     if (!element) return;
     if (element.paused) {
+      if (refreshing) {
+        pendingResumeRef.current = true;
+        pendingResumeTimeRef.current = currentTime;
+        return;
+      }
+      if (onRefresh && isUrlExpiringSoon()) {
+        void refreshAndResume();
+        return;
+      }
       element.play().catch(() => {
         setPlaying(false);
         onPlaybackError?.();
@@ -11371,146 +11580,157 @@ function NarrationPlayer({
   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?.()
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: styles.root, 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: () => {
+          if (onRefresh) {
+            void refreshAndResume().then((didRefresh) => {
+              if (!didRefresh) {
+                onPlaybackError?.();
+              }
+            });
+            return;
           }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 md:flex-row md:items-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
+          onPlaybackError?.();
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.layout, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: togglePlayback,
+          "aria-label": playing ? "Pause narration" : "Play narration",
+          style: styles.playButton,
+          children: playing ? /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", style: styles.playIcon, "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",
             {
-              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" }) })
+              viewBox: "0 0 24 24",
+              style: { ...styles.playIcon, ...styles.playIconOffset },
+              "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",
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.content, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.metaRow, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTime(currentTime / speed) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.metaRight, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles.badge, 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);
+            },
+            style: styles.scrubber,
+            children: peaks.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
               {
-                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",
+                viewBox: `0 0 ${peaks.length} 40`,
+                preserveAspectRatio: "none",
+                style: styles.waveform,
+                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",
                     {
-                      className: "absolute inset-y-0 left-0 bg-blue-600",
-                      style: { width: `${progress * 100}%` }
-                    }
-                  )
-                ] })
+                      x: index,
+                      y,
+                      width: 0.82,
+                      height,
+                      rx: 0.4,
+                      fill: filled ? "#155dfc" : "#90c5ff"
+                    },
+                    `${audio.id}-${index}`
+                  );
+                })
               }
-            ),
-            /* @__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(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.fallbackTrack }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  style: { ...styles.fallbackProgress, width: `${progress * 100}%` }
+                }
+              )
             ] })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.chipsRow, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: styles.chipStrong, children: [
+            "Provider: ",
+            providerLabel
           ] }),
-          /* @__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"
-              }
-            )
+          duration > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: styles.chipMuted, children: [
+            "Length ",
+            formatTime(duration / speed)
+          ] }),
+          expiresLabel && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: styles.chipMuted, children: [
+            "Expires ",
+            expiresLabel
           ] })
         ] })
-      ]
-    }
-  );
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.controls, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              setSpeed((currentSpeed) => getNextSpeed(currentSpeed));
+            },
+            style: styles.secondaryButton,
+            children: [
+              speed,
+              "\xD7"
+            ]
+          }
+        ),
+        onRefresh && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onRefresh,
+            disabled: refreshing,
+            style: refreshing ? { ...styles.refreshButton, ...styles.disabled } : styles.refreshButton,
+            children: refreshing ? "Refreshing\u2026" : "Refresh"
+          }
+        )
+      ] })
+    ] })
+  ] });
 }
 
 // src/validation.ts

package/dist/index.mjs

@@ -11269,6 +11269,157 @@ function FeedbackWidget(props) {
   ] });
 }
 var SPEEDS = [1, 1.25, 1.5, 2];
+var EXPIRY_REFRESH_WINDOW_MS = 3e4;
+var styles = {
+  root: {
+    borderRadius: "1.75rem",
+    border: "1px solid rgba(226, 232, 240, 0.8)",
+    background: "linear-gradient(180deg, #f8fbff 0%, #edf4ff 100%)",
+    padding: "1rem",
+    color: "#0f172b",
+    boxShadow: "0 22px 70px rgba(4, 12, 24, 0.28)"
+  },
+  layout: {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: "1rem"
+  },
+  playButton: {
+    display: "flex",
+    height: "4.5rem",
+    width: "4.5rem",
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "9999px",
+    border: "none",
+    backgroundColor: "#020618",
+    color: "#ffffff",
+    boxShadow: "0 10px 28px rgba(15, 23, 42, 0.25)",
+    cursor: "pointer"
+  },
+  playIcon: {
+    display: "block",
+    width: "1.75rem",
+    height: "1.75rem",
+    fill: "currentColor"
+  },
+  playIconOffset: {
+    marginLeft: "0.25rem"
+  },
+  content: {
+    minWidth: "16rem",
+    flex: "1 1 18rem"
+  },
+  metaRow: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "0.75rem",
+    fontSize: "0.8rem",
+    fontWeight: 500,
+    color: "#62748e"
+  },
+  metaRight: {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.75rem"
+  },
+  badge: {
+    borderRadius: "9999px",
+    backgroundColor: "#dbeafe",
+    padding: "0.25rem 0.75rem",
+    fontSize: "0.65rem",
+    fontWeight: 600,
+    letterSpacing: "0.24em",
+    textTransform: "uppercase",
+    color: "#1447e6"
+  },
+  scrubber: {
+    position: "relative",
+    marginTop: "1rem",
+    height: "3rem",
+    cursor: "pointer",
+    overflow: "hidden",
+    borderRadius: "1rem",
+    backgroundColor: "rgba(226, 232, 240, 0.9)",
+    paddingInline: "0.25rem"
+  },
+  waveform: {
+    pointerEvents: "none",
+    position: "absolute",
+    inset: 0,
+    height: "100%",
+    width: "100%"
+  },
+  fallbackTrack: {
+    position: "absolute",
+    inset: 0,
+    backgroundColor: "rgba(226, 232, 240, 0.9)"
+  },
+  fallbackProgress: {
+    position: "absolute",
+    insetBlock: 0,
+    left: 0,
+    backgroundColor: "#155dfc"
+  },
+  chipsRow: {
+    marginTop: "1rem",
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: "0.5rem",
+    fontSize: "0.72rem",
+    fontWeight: 500,
+    color: "#62748e"
+  },
+  chipStrong: {
+    borderRadius: "9999px",
+    border: "1px solid #e2e8f0",
+    backgroundColor: "rgba(255, 255, 255, 0.85)",
+    padding: "0.25rem 0.75rem",
+    color: "#334155"
+  },
+  chipMuted: {
+    borderRadius: "9999px",
+    border: "1px solid #e2e8f0",
+    backgroundColor: "rgba(255, 255, 255, 0.65)",
+    padding: "0.25rem 0.75rem"
+  },
+  controls: {
+    display: "flex",
+    flexShrink: 0,
+    alignItems: "center",
+    gap: "0.5rem",
+    alignSelf: "flex-start"
+  },
+  secondaryButton: {
+    borderRadius: "9999px",
+    border: "1px solid #cad5e2",
+    backgroundColor: "rgba(255, 255, 255, 0.9)",
+    padding: "0.5rem 1rem",
+    fontSize: "1rem",
+    fontWeight: 600,
+    color: "#334155",
+    boxShadow: "0 1px 3px rgba(15, 23, 42, 0.08)",
+    cursor: "pointer"
+  },
+  refreshButton: {
+    borderRadius: "9999px",
+    border: "1px solid #cad5e2",
+    backgroundColor: "rgba(255, 255, 255, 0.75)",
+    padding: "0.5rem 1rem",
+    fontSize: "0.875rem",
+    fontWeight: 600,
+    color: "#334155",
+    cursor: "pointer"
+  },
+  disabled: {
+    cursor: "not-allowed",
+    opacity: 0.6
+  }
+};
 function formatTime(seconds) {
   if (!Number.isFinite(seconds) || seconds <= 0) {
     return "0:00";
@@ -11296,6 +11447,9 @@ function NarrationPlayer({
 }) {
   const audioRef = useRef(null);
   const scrubRef = useRef(null);
+  const pendingResumeRef = useRef(false);
+  const pendingResumeTimeRef = useRef(null);
+  const recoveredUrlRef = useRef(null);
   const [playing, setPlaying] = useState(false);
   const [currentTime, setCurrentTime] = useState(0);
   const [duration, setDuration] = useState(audio.duration_ms ? audio.duration_ms / 1e3 : 0);
@@ -11310,10 +11464,26 @@ function NarrationPlayer({
   useEffect(() => {
     const element = audioRef.current;
     if (!element) return;
-    setCurrentTime(0);
+    recoveredUrlRef.current = null;
+    const resumeTime = pendingResumeTimeRef.current;
+    setCurrentTime(resumeTime ?? 0);
     setPlaying(false);
     element.pause();
-    element.currentTime = 0;
+    try {
+      element.currentTime = resumeTime ?? 0;
+    } catch {
+      element.currentTime = 0;
+    }
+    if (pendingResumeRef.current) {
+      pendingResumeRef.current = false;
+      pendingResumeTimeRef.current = null;
+      element.play().catch(() => {
+        setPlaying(false);
+        onPlaybackError?.();
+      });
+      return;
+    }
+    pendingResumeTimeRef.current = null;
   }, [audio.url]);
   useEffect(() => {
     const element = audioRef.current;
@@ -11321,10 +11491,49 @@ function NarrationPlayer({
     element.playbackRate = speed;
     element.preservesPitch = true;
   }, [speed]);
+  function isUrlExpiringSoon() {
+    if (!audio.expires_at) {
+      return false;
+    }
+    const expiresAtMs = Date.parse(audio.expires_at);
+    if (!Number.isFinite(expiresAtMs)) {
+      return false;
+    }
+    return expiresAtMs - Date.now() <= EXPIRY_REFRESH_WINDOW_MS;
+  }
+  async function refreshAndResume() {
+    if (!onRefresh || refreshing) {
+      return false;
+    }
+    if (recoveredUrlRef.current === (audio.url ?? null)) {
+      return false;
+    }
+    recoveredUrlRef.current = audio.url ?? null;
+    pendingResumeRef.current = true;
+    pendingResumeTimeRef.current = currentTime;
+    try {
+      await Promise.resolve(onRefresh());
+      return true;
+    } catch {
+      pendingResumeRef.current = false;
+      pendingResumeTimeRef.current = null;
+      onPlaybackError?.();
+      return false;
+    }
+  }
   function togglePlayback() {
     const element = audioRef.current;
     if (!element) return;
     if (element.paused) {
+      if (refreshing) {
+        pendingResumeRef.current = true;
+        pendingResumeTimeRef.current = currentTime;
+        return;
+      }
+      if (onRefresh && isUrlExpiringSoon()) {
+        void refreshAndResume();
+        return;
+      }
       element.play().catch(() => {
         setPlaying(false);
         onPlaybackError?.();
@@ -11351,146 +11560,157 @@ function NarrationPlayer({
   if (!audio.url) {
     return null;
   }
-  return /* @__PURE__ */ 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__ */ 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?.()
+  return /* @__PURE__ */ jsxs("div", { className, style: styles.root, children: [
+    /* @__PURE__ */ 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: () => {
+          if (onRefresh) {
+            void refreshAndResume().then((didRefresh) => {
+              if (!didRefresh) {
+                onPlaybackError?.();
+              }
+            });
+            return;
           }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 md:flex-row md:items-center", children: [
-          /* @__PURE__ */ jsx(
-            "button",
+          onPlaybackError?.();
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: styles.layout, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: togglePlayback,
+          "aria-label": playing ? "Pause narration" : "Play narration",
+          style: styles.playButton,
+          children: playing ? /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", style: styles.playIcon, "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx("rect", { x: "6", y: "5", width: "4", height: "14", rx: "1.2" }),
+            /* @__PURE__ */ jsx("rect", { x: "14", y: "5", width: "4", height: "14", rx: "1.2" })
+          ] }) : /* @__PURE__ */ jsx(
+            "svg",
             {
-              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__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "h-7 w-7 fill-current", "aria-hidden": "true", children: [
-                /* @__PURE__ */ jsx("rect", { x: "6", y: "5", width: "4", height: "14", rx: "1.2" }),
-                /* @__PURE__ */ jsx("rect", { x: "14", y: "5", width: "4", height: "14", rx: "1.2" })
-              ] }) : /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "ml-1 h-7 w-7 fill-current", "aria-hidden": "true", children: /* @__PURE__ */ 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" }) })
+              viewBox: "0 0 24 24",
+              style: { ...styles.playIcon, ...styles.playIconOffset },
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 text-[0.8rem] font-medium text-slate-500", children: [
-              /* @__PURE__ */ jsx("span", { children: formatTime(currentTime / speed) }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-                /* @__PURE__ */ 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__ */ jsx("span", { children: formatTime(duration / speed) })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx(
-              "div",
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { style: styles.content, children: [
+        /* @__PURE__ */ jsxs("div", { style: styles.metaRow, children: [
+          /* @__PURE__ */ jsx("span", { children: formatTime(currentTime / speed) }),
+          /* @__PURE__ */ jsxs("div", { style: styles.metaRight, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.badge, children: narrationLabel }),
+            /* @__PURE__ */ jsx("span", { children: formatTime(duration / speed) })
+          ] })
+        ] }),
+        /* @__PURE__ */ 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);
+            },
+            style: styles.scrubber,
+            children: peaks.length > 0 ? /* @__PURE__ */ jsx(
+              "svg",
               {
-                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__ */ 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__ */ jsx(
-                        "rect",
-                        {
-                          x: index,
-                          y,
-                          width: 0.82,
-                          height,
-                          rx: 0.4,
-                          className: filled ? "fill-blue-600" : "fill-blue-300"
-                        },
-                        `${audio.id}-${index}`
-                      );
-                    })
-                  }
-                ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-slate-200/90" }),
-                  /* @__PURE__ */ jsx(
-                    "div",
+                viewBox: `0 0 ${peaks.length} 40`,
+                preserveAspectRatio: "none",
+                style: styles.waveform,
+                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__ */ jsx(
+                    "rect",
                     {
-                      className: "absolute inset-y-0 left-0 bg-blue-600",
-                      style: { width: `${progress * 100}%` }
-                    }
-                  )
-                ] })
+                      x: index,
+                      y,
+                      width: 0.82,
+                      height,
+                      rx: 0.4,
+                      fill: filled ? "#155dfc" : "#90c5ff"
+                    },
+                    `${audio.id}-${index}`
+                  );
+                })
               }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: "mt-4 flex flex-wrap items-center gap-2 text-[0.72rem] font-medium text-slate-500", children: [
-              /* @__PURE__ */ 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__ */ jsxs("span", { className: "rounded-full border border-slate-200 bg-white/65 px-3 py-1", children: [
-                "Length ",
-                formatTime(duration / speed)
-              ] }),
-              expiresLabel && /* @__PURE__ */ jsxs("span", { className: "rounded-full border border-slate-200 bg-white/65 px-3 py-1", children: [
-                "Expires ",
-                expiresLabel
-              ] })
+            ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("div", { style: styles.fallbackTrack }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: { ...styles.fallbackProgress, width: `${progress * 100}%` }
+                }
+              )
             ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: styles.chipsRow, children: [
+          /* @__PURE__ */ jsxs("span", { style: styles.chipStrong, children: [
+            "Provider: ",
+            providerLabel
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2 self-start md:self-center", children: [
-            /* @__PURE__ */ 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__ */ 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"
-              }
-            )
+          duration > 0 && /* @__PURE__ */ jsxs("span", { style: styles.chipMuted, children: [
+            "Length ",
+            formatTime(duration / speed)
+          ] }),
+          expiresLabel && /* @__PURE__ */ jsxs("span", { style: styles.chipMuted, children: [
+            "Expires ",
+            expiresLabel
           ] })
         ] })
-      ]
-    }
-  );
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: styles.controls, children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              setSpeed((currentSpeed) => getNextSpeed(currentSpeed));
+            },
+            style: styles.secondaryButton,
+            children: [
+              speed,
+              "\xD7"
+            ]
+          }
+        ),
+        onRefresh && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onRefresh,
+            disabled: refreshing,
+            style: refreshing ? { ...styles.refreshButton, ...styles.disabled } : styles.refreshButton,
+            children: refreshing ? "Refreshing\u2026" : "Refresh"
+          }
+        )
+      ] })
+    ] })
+  ] });
 }
 
 // src/validation.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalemule/nextjs",
-  "version": "0.1.21",
+  "version": "0.1.23",
   "description": "ScaleMule SDK for Next.js applications - authentication, storage, and user management",
   "main": "dist/index.js",
   "module": "dist/index.mjs",