npm - @scalemule/nextjs - Versions diffs - 0.1.21 → 0.1.22 - Mend

@scalemule/nextjs 0.1.21 → 0.1.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/index.js CHANGED Viewed

@@ -11289,6 +11289,156 @@ function FeedbackWidget(props) {
   ] });
 }
 var SPEEDS = [1, 1.25, 1.5, 2];
+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";
@@ -11371,146 +11521,147 @@ 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: [
+  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: () => 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",
+            {
+              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", { 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(
-          "audio",
+          "div",
           {
-            ref: audioRef,
-            src: audio.url ?? void 0,
-            preload: "metadata",
-            onLoadedMetadata: (event) => {
-              setDuration(event.currentTarget.duration || 0);
-            },
-            onTimeUpdate: (event) => {
-              setCurrentTime(event.currentTarget.currentTime);
+            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);
             },
-            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",
+            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 CHANGED Viewed

@@ -11269,6 +11269,156 @@ function FeedbackWidget(props) {
   ] });
 }
 var SPEEDS = [1, 1.25, 1.5, 2];
+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";
@@ -11351,146 +11501,147 @@ 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: [
+  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: () => 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",
+            {
+              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", { 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(
-          "audio",
+          "div",
           {
-            ref: audioRef,
-            src: audio.url ?? void 0,
-            preload: "metadata",
-            onLoadedMetadata: (event) => {
-              setDuration(event.currentTarget.duration || 0);
-            },
-            onTimeUpdate: (event) => {
-              setCurrentTime(event.currentTarget.currentTime);
+            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);
             },
-            onPlay: () => setPlaying(true),
-            onPause: () => setPlaying(false),
-            onEnded: () => setPlaying(false),
-            onError: () => onPlaybackError?.()
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 md:flex-row md:items-center", children: [
-          /* @__PURE__ */ 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__ */ 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" }) })
-            }
-          ),
-          /* @__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",
+            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 CHANGED Viewed

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