@scalemule/nextjs 0.1.24 → 0.1.26

package/dist/index.mjs

@@ -560,6 +560,7 @@ var ScaleMuleClient = class {
     this.anonymousId = null;
     this.sessionPool = /* @__PURE__ */ new Map();
     this.knownAccounts = /* @__PURE__ */ new Map();
+    this.refreshPromise = null;
     this.apiKey = config.apiKey;
     this.applicationId = config.applicationId || null;
     this.baseUrl = config.baseUrl || GATEWAY_URLS[config.environment || "prod"];
@@ -578,6 +579,9 @@ var ScaleMuleClient = class {
     this.multiSessionEnabled = config.enableMultiSession || false;
     this.accountSwitcherEnabled = config.enableAccountSwitcher || false;
     this.accountSwitcherPrivacy = config.accountSwitcherPrivacy || "full";
+    this.onRefreshStart = config.onRefreshStart;
+    this.onRefreshEnd = config.onRefreshEnd;
+    this.onAutoRefreshFailed = config.onAutoRefreshFailed;
   }
   // --------------------------------------------------------------------------
   // Session Management
@@ -863,34 +867,28 @@ var ScaleMuleClient = class {
     const method = (init.method || "GET").toUpperCase();
     const timeout = init.timeout || this.defaultTimeout;
     const maxRetries = init.skipRetry ? 0 : init.retries ?? this.maxRetries;
-    const headers = {
-      "x-api-key": this.apiKey,
-      "User-Agent": `ScaleMule-SDK-TypeScript/${SDK_VERSION}`,
-      ...init.headers
-    };
-    if (!init.skipAuth && this.sessionToken) {
-      headers["Authorization"] = `Bearer ${this.sessionToken}`;
-    }
-    if (this.workspaceId) {
-      headers["x-sm-workspace-id"] = this.workspaceId;
-    }
-    if (!this.sessionToken && this.anonymousId) {
-      headers["x-anonymous-id"] = this.anonymousId;
-    }
-    let bodyStr;
-    if (init.body !== void 0 && init.body !== null) {
-      bodyStr = typeof init.body === "string" ? init.body : JSON.stringify(init.body);
-      if (!headers["Content-Type"]) {
-        headers["Content-Type"] = "application/json";
-      }
-    }
-    if (this.debug) {
-      console.log(`[ScaleMule] ${method} ${path}`);
-    }
-    const idempotencyKey = method === "POST" ? generateIdempotencyKey() : void 0;
+    const bodyStr = init.body ? JSON.stringify(init.body) : void 0;
     let lastError = null;
+    let idempotencyKey = null;
     for (let attempt = 0; attempt <= maxRetries; attempt++) {
-      if (attempt > 0 && idempotencyKey) {
+      const headers = {
+        "x-api-key": this.apiKey,
+        "User-Agent": `ScaleMule-SDK-TypeScript/${SDK_VERSION}`,
+        ...init.headers
+      };
+      if (!init.skipAuth && this.sessionToken) {
+        headers["Authorization"] = `Bearer ${this.sessionToken}`;
+      }
+      if (this.workspaceId) {
+        headers["x-sm-workspace-id"] = this.workspaceId;
+      }
+      if (!this.sessionToken && this.anonymousId) {
+        headers["x-anonymous-id"] = this.anonymousId;
+      }
+      if (attempt > 0 && (method === "POST" || method === "PUT" || method === "PATCH")) {
+        if (!idempotencyKey) {
+          idempotencyKey = generateIdempotencyKey();
+        }
         headers["x-idempotency-key"] = idempotencyKey;
       }
       const controller = new AbortController();
@@ -910,6 +908,10 @@ var ScaleMuleClient = class {
           signal: controller.signal
         });
         clearTimeout(timeoutId);
+        const rotatedToken = response.headers.get("x-rotated-session-token");
+        if (rotatedToken && this.sessionToken && this.userId) {
+          this.setSession(rotatedToken, this.userId);
+        }
         if (this.rateLimitQueue) {
           this.rateLimitQueue.updateFromHeaders(response.headers);
         }
@@ -932,6 +934,45 @@ var ScaleMuleClient = class {
             status: response.status,
             details: responseData?.error?.details || responseData?.details
           };
+          if (response.status === 401 && this.sessionToken && !init.isAutoRefresh) {
+            if (this.debug) console.log("[ScaleMule] 401 received, attempting auto-refresh...");
+            let isPrimaryRefresh = false;
+            if (!this.refreshPromise) {
+              isPrimaryRefresh = true;
+              this.onRefreshStart?.();
+              this.refreshPromise = this.auth?.refreshSession ? this.auth.refreshSession() : this.post("/auth/refresh", {}, { isAutoRefresh: true });
+            }
+            const currentRefreshPromise = this.refreshPromise;
+            try {
+              const refreshResult = await currentRefreshPromise;
+              if (!refreshResult || refreshResult.error) {
+                if (this.debug) console.log("[ScaleMule] Auto-refresh failed:", refreshResult?.error);
+                const apiError = refreshResult?.error || {
+                  code: "refresh_failed",
+                  message: "Auto-refresh failed",
+                  status: 400
+                };
+                init.onAutoRefreshFailed?.(apiError);
+                this.onAutoRefreshFailed?.(apiError);
+                return { data: null, error };
+              }
+              if (this.debug) console.log("[ScaleMule] Auto-refresh succeeded, retrying original request...");
+              const newToken = refreshResult.data?.session_token || refreshResult.data?.access_token;
+              if (newToken) {
+                this.sessionToken = newToken;
+                if (this.userId) {
+                  await this.storage.setItem(SESSION_STORAGE_KEY, newToken);
+                }
+              }
+              attempt--;
+              continue;
+            } finally {
+              if (isPrimaryRefresh && this.refreshPromise === currentRefreshPromise) {
+                this.refreshPromise = null;
+                this.onRefreshEnd?.();
+              }
+            }
+          }
           if (response.status === 429) {
             const retryAfter = response.headers.get("Retry-After");
             if (retryAfter) {
@@ -5715,7 +5756,7 @@ var AudioService = class extends ServiceModule {
   constructor(client, storage) {
     super(client);
     this.storage = storage;
-    this.basePath = "/v1/audios";
+    this.basePath = "/v1/audio";
   }
   /**
    * Register a storage-uploaded audio asset with the audio service.
@@ -5772,6 +5813,32 @@ var AudioService = class extends ServiceModule {
     };
   }
 };
+var TtsService = class extends ServiceModule {
+  constructor() {
+    super(...arguments);
+    this.basePath = "/v1/tts";
+  }
+  async synthesize(params, options) {
+    return this.post(
+      "/synthesize",
+      {
+        text: params.text,
+        voice: params.voice,
+        model: params.model,
+        provider: params.provider,
+        async: params.async,
+        access_mode: params.accessMode
+      },
+      options
+    );
+  }
+  async getJob(id, options) {
+    return this._get(`/jobs/${id}`, options);
+  }
+  async listVoices(params, options) {
+    return this._get(this.withQuery("/voices", { provider: params?.provider }), options);
+  }
+};
 var DeadLetterApi = class extends ServiceModule {
   constructor() {
     super(...arguments);
@@ -6592,6 +6659,7 @@ var ScaleMule = class {
     this.functions = new FunctionsService(this._client);
     this.photo = new PhotoService(this._client, this.storage);
     this.audio = new AudioService(this._client, this.storage);
+    this.tts = new TtsService(this._client);
     this.flagContent = new FlagContentService(this._client);
     this.creatorMaker = new CreatorMakerService(this._client);
     this.compliance = new ComplianceService(this._client);
@@ -7158,6 +7226,24 @@ var ScaleMuleClient2 = class {
       console.log("[ScaleMule] Session set for user:", userId);
     }
   }
+  /**
+   * Token-only setter for member-auth surfaces.
+   *
+   * Unlike `setSession(token, userId)`, this does NOT persist a userId or
+   * write to local storage — useful when the host platform owns identity
+   * (e.g. ScaleMule's member dashboards use `MemberAuthProvider` and the
+   * token comes from a `${env}_member_access_token` cookie). The token is
+   * applied in-memory and used as a `Bearer` Authorization header on
+   * subsequent requests.
+   *
+   * Pass `null` to clear without touching userId/storage.
+   */
+  setSessionToken(token) {
+    this.sessionToken = token;
+    if (this.debug) {
+      console.log("[ScaleMule] Session token", token ? "set (token-only)" : "cleared (token-only)");
+    }
+  }
   /**
    * Clear session on logout
    */
@@ -7222,6 +7308,8 @@ var ScaleMuleClient2 = class {
       console.log(`[ScaleMule] ${options.method || "GET"} ${path}`);
     }
     let lastError = null;
+    const MAX_REFRESH_ATTEMPTS = 1;
+    let refreshAttempts = 0;
     for (let attempt = 0; attempt <= maxRetries; attempt++) {
       const controller = new AbortController();
       const timeoutId = setTimeout(() => controller.abort(), timeout);
@@ -7245,7 +7333,8 @@ var ScaleMuleClient2 = class {
         if (!response.ok) {
           const rawError = responseData?.error;
           const error = rawError && typeof rawError === "object" ? rawError : { code: `HTTP_${response.status}`, message: typeof rawError === "string" ? rawError : responseData?.message || text || response.statusText };
-          if (response.status === 401 && this.sessionToken && !options.isAutoRefresh) {
+          if (response.status === 401 && this.sessionToken && !options.isAutoRefresh && refreshAttempts < MAX_REFRESH_ATTEMPTS) {
+            refreshAttempts++;
             if (this.debug) console.log("[ScaleMule] 401 received, attempting auto-refresh...");
             if (!this.refreshPromise) {
               this.onRefreshStart?.();
@@ -7614,8 +7703,12 @@ function ScaleMuleProvider({
   onLogout,
   onAuthError,
   bootstrapFlags,
-  mediaPolicy
+  mediaPolicy,
+  getToken,
+  userResolver,
+  memberTokenPollMs
 }) {
+  const memberMode = typeof getToken === "function";
   const [user, setUser] = useState(null);
   const [initializing, setInitializing] = useState(true);
   const [error, setError] = useState(null);
@@ -7632,9 +7725,13 @@ function ScaleMuleProvider({
       gatewayUrl: resolvedGatewayUrl,
       debug,
       storage,
-      pendingSessionInit: !!authProxyUrl
+      // Make outbound API calls wait for the first token to land in any
+      // mode where the provider is responsible for populating the
+      // session asynchronously: auth-proxy fetch, or member-mode
+      // getToken() callback. Resolved in the init effect below.
+      pendingSessionInit: !!authProxyUrl || memberMode
     }),
-    [apiKey, applicationId, environment, resolvedGatewayUrl, debug, storage, authProxyUrl]
+    [apiKey, applicationId, environment, resolvedGatewayUrl, debug, storage, authProxyUrl, memberMode]
   );
   const money = useMemo(
     () => createMoneyClient({
@@ -7656,8 +7753,10 @@ function ScaleMuleProvider({
     });
   }, [apiKey, applicationId, environment, resolvedGatewayUrl, debug]);
   const [fetchedPolicy, setFetchedPolicy] = useState(void 0);
+  const [tokenVersion, setTokenVersion] = useState(0);
   useEffect(() => {
     if (mediaPolicy) return;
+    if (memberMode && tokenVersion === 0) return;
     let mounted = true;
     void (async () => {
       try {
@@ -7675,7 +7774,7 @@ function ScaleMuleProvider({
     return () => {
       mounted = false;
     };
-  }, [baseClient, mediaPolicy]);
+  }, [baseClient, mediaPolicy, memberMode, tokenVersion]);
   const effectiveMediaPolicy = mediaPolicy ?? fetchedPolicy;
   useEffect(() => {
     const token = client.getSessionToken();
@@ -7693,6 +7792,43 @@ function ScaleMuleProvider({
       try {
         await client.initialize();
         const cachedUser = getCachedUser();
+        if (memberMode) {
+          try {
+            const token = await Promise.resolve(getToken()) ?? null;
+            if (mounted) {
+              if (token) {
+                client.setSessionToken(token);
+                baseClient.setAccessToken(token);
+                money.setAccessToken(token);
+              } else {
+                client.setSessionToken(null);
+                baseClient.clearAccessToken();
+                money.setAccessToken(void 0);
+              }
+              setTokenVersion((v) => v + 1);
+            }
+            if (userResolver) {
+              try {
+                const resolvedUser = await userResolver();
+                if (mounted) {
+                  setUser(resolvedUser);
+                  setCachedUser(resolvedUser);
+                }
+              } catch (resolveErr) {
+                if (mounted && debug) {
+                  console.debug("[ScaleMule] userResolver() failed:", resolveErr);
+                }
+              }
+            }
+          } catch (memberErr) {
+            if (mounted && debug) {
+              console.debug("[ScaleMule] getToken() failed:", memberErr);
+            }
+          } finally {
+            client.resolveSessionPending();
+          }
+          return;
+        }
         if (authProxyUrl) {
           if (cachedUser && mounted) {
             setUser(cachedUser);
@@ -7764,7 +7900,43 @@ function ScaleMuleProvider({
     return () => {
       mounted = false;
     };
-  }, [client, debug, onAuthError, authProxyUrl]);
+  }, [client, baseClient, money, debug, onAuthError, authProxyUrl, memberMode, getToken, userResolver]);
+  useEffect(() => {
+    if (!memberMode) return;
+    if (memberTokenPollMs === null) return;
+    const interval = memberTokenPollMs ?? 6e4;
+    if (interval <= 0) return;
+    let cancelled = false;
+    const id = setInterval(async () => {
+      try {
+        const token = await Promise.resolve(getToken()) ?? null;
+        if (cancelled) return;
+        const current = client.getSessionToken();
+        if (token === current) return;
+        if (token) {
+          client.setSessionToken(token);
+          baseClient.setAccessToken(token);
+          money.setAccessToken(token);
+        } else {
+          client.setSessionToken(null);
+          baseClient.clearAccessToken();
+          money.setAccessToken(void 0);
+          if (debug) {
+            console.debug("[ScaleMule] Member token cleared on refresh");
+          }
+        }
+        setTokenVersion((v) => v + 1);
+      } catch (err) {
+        if (debug) {
+          console.debug("[ScaleMule] Member token refresh failed:", err);
+        }
+      }
+    }, interval);
+    return () => {
+      cancelled = true;
+      clearInterval(id);
+    };
+  }, [memberMode, memberTokenPollMs, getToken, client, baseClient, money, debug]);
   const handleSetUser = useCallback(
     (newUser) => {
       setUser(newUser);
@@ -8246,8 +8418,8 @@ function useAuth() {
   const getLinkedAccounts = useCallback(async () => {
     setError(null);
     try {
-      const data = await client.get("/v1/auth/oauth/accounts");
-      return data.accounts;
+      const data = await client.get("/v1/auth/oauth/providers");
+      return data.providers;
     } catch (err) {
       if (err instanceof ScaleMuleApiError) {
         setError(err);
@@ -8256,41 +8428,30 @@ function useAuth() {
     }
   }, [client, setError]);
   const linkAccount = useCallback(
-    async (config) => {
+    async (_config) => {
       setError(null);
       if (!user) {
-        const err = {
+        const err2 = {
           code: "NOT_AUTHENTICATED",
           message: "Must be logged in to link accounts"
         };
-        setError(err);
-        throw err;
-      }
-      let linkData;
-      try {
-        linkData = await client.post("/v1/auth/oauth/link", {
-          provider: config.provider,
-          redirect_url: config.redirectUrl,
-          scopes: config.scopes
-        });
-      } catch (err) {
-        if (err instanceof ScaleMuleApiError) {
-          setError(err);
-        }
-        throw err;
-      }
-      if (typeof sessionStorage !== "undefined") {
-        sessionStorage.setItem("scalemule_oauth_state", linkData.state);
+        setError(err2);
+        throw err2;
       }
-      return linkData;
+      const err = {
+        code: "NOT_IMPLEMENTED",
+        message: "OAuth account linking from a logged-in session is not yet supported. Use the standard OAuth sign-in flow instead."
+      };
+      setError(err);
+      throw err;
     },
-    [client, user, setError]
+    [user, setError]
   );
   const unlinkAccount = useCallback(
     async (provider) => {
       setError(null);
       try {
-        await client.delete(`/v1/auth/oauth/accounts/${provider}`);
+        await client.delete(`/v1/auth/oauth/providers/${encodeURIComponent(provider)}`);
       } catch (err) {
         if (err instanceof ScaleMuleApiError) {
           setError(err);
@@ -10900,6 +11061,75 @@ function useFeedback(options = {}) {
   );
   return { items, loading, error, submit, refresh };
 }
+var ZERO = { value: 0, up_count: 0, down_count: 0, score: 0 };
+function useVote({
+  targetType,
+  targetId,
+  initialState,
+  refetchOnMount = false,
+  enabled = true
+}) {
+  const { client } = useScaleMule();
+  const [state, setState] = useState(initialState ?? ZERO);
+  const [isLoading, setIsLoading] = useState(!initialState && enabled);
+  const [error, setError] = useState(null);
+  const inFlight = useRef(null);
+  const path = `/v1/social/${encodeURIComponent(targetType)}/${encodeURIComponent(targetId)}/vote`;
+  const refetch = useCallback(async () => {
+    if (!enabled) return;
+    setIsLoading(true);
+    setError(null);
+    try {
+      const data = await client.get(path);
+      setState(data);
+    } catch (e) {
+      setError(e);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [client, path, enabled]);
+  useEffect(() => {
+    if (!enabled) return;
+    if (initialState && !refetchOnMount) return;
+    void refetch();
+  }, [enabled, refetch, initialState, refetchOnMount]);
+  const cast = useCallback(
+    async (value) => {
+      const prev = state;
+      const optimistic = applyVote(prev, value);
+      setState(optimistic);
+      setError(null);
+      const send = async () => {
+        try {
+          const data = await client.put(path, { value });
+          setState(data);
+        } catch (e) {
+          setState(prev);
+          setError(e);
+        }
+      };
+      const p = inFlight.current ? inFlight.current.then(send) : send();
+      inFlight.current = p;
+      await p;
+      if (inFlight.current === p) inFlight.current = null;
+    },
+    [client, path, state]
+  );
+  return { state, isLoading, error, cast, refetch };
+}
+function applyVote(prev, next) {
+  let { up_count, down_count } = prev;
+  if (prev.value === 1) up_count = Math.max(0, up_count - 1);
+  if (prev.value === -1) down_count = Math.max(0, down_count - 1);
+  if (next === 1) up_count += 1;
+  if (next === -1) down_count += 1;
+  return {
+    value: next,
+    up_count,
+    down_count,
+    score: up_count - down_count
+  };
+}
 var TYPE_LABELS = {
   bug_report: "Bug",
   feature_request: "Feature request",
@@ -11268,449 +11498,128 @@ function FeedbackWidget(props) {
     ) })
   ] });
 }
-var SPEEDS = [1, 1.25, 1.5, 2];
-var EXPIRY_REFRESH_WINDOW_MS = 3e4;
-var styles = {
+var ARROW_UP = "\u25B2";
+var ARROW_DOWN = "\u25BC";
+var STYLES2 = {
   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,
+    display: "inline-flex",
     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"
+    gap: 6
   },
-  metaRow: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: "0.75rem",
-    fontSize: "0.8rem",
-    fontWeight: 500,
-    color: "#62748e"
-  },
-  metaRight: {
-    display: "flex",
+  rootStacked: {
+    display: "inline-flex",
+    flexDirection: "column",
     alignItems: "center",
-    gap: "0.75rem"
+    gap: 2
   },
-  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",
+  button: {
+    border: "1px solid rgba(255,255,255,0.12)",
+    background: "rgba(255,255,255,0.04)",
+    color: "inherit",
     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"
+    borderRadius: 9999,
+    padding: "6px 10px",
+    lineHeight: 1,
+    fontSize: 14
   },
-  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"
+  buttonCompact: {
+    padding: "3px 7px",
+    fontSize: 12
   },
-  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"
+  buttonActiveUp: {
+    background: "rgba(34,197,94,0.18)",
+    borderColor: "rgba(34,197,94,0.45)",
+    color: "#86efac"
   },
-  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"
+  buttonActiveDown: {
+    background: "rgba(239,68,68,0.18)",
+    borderColor: "rgba(239,68,68,0.45)",
+    color: "#fca5a5"
   },
-  disabled: {
-    cursor: "not-allowed",
-    opacity: 0.6
+  score: {
+    minWidth: 24,
+    textAlign: "center",
+    fontVariantNumeric: "tabular-nums",
+    fontWeight: 600
   }
 };
-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,
-  showRefreshButton = false,
-  onPlaybackError
+function VoteButton({
+  targetType,
+  targetId,
+  initialState,
+  layout = "horizontal",
+  size = "regular",
+  onSignInRequired,
+  onError,
+  classNames,
+  upLabel = "Upvote",
+  downLabel = "Downvote"
 }) {
-  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);
-  const [speed, setSpeed] = useState(1.5);
-  const peaks = 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]);
-  useEffect(() => {
-    const element = audioRef.current;
-    if (!element) return;
-    recoveredUrlRef.current = null;
-    const resumeTime = pendingResumeTimeRef.current;
-    setCurrentTime(resumeTime ?? 0);
-    setPlaying(false);
-    element.pause();
-    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;
-    if (!element) return;
-    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;
+  const { isAuthenticated } = useAuth();
+  const { state, cast, error } = useVote({
+    targetType,
+    targetId,
+    initialState: initialState ?? null,
+    enabled: isAuthenticated
+  });
+  const handleVote = useCallback(
+    async (next) => {
+      if (!isAuthenticated) {
+        onSignInRequired?.();
         return;
       }
-      if (onRefresh && isUrlExpiringSoon()) {
-        void refreshAndResume();
-        return;
+      const desired = state.value === next ? 0 : next;
+      try {
+        await cast(desired);
+      } catch (e) {
+        onError?.(e);
       }
-      element.play().catch(() => {
-        setPlaying(false);
-        onPlaybackError?.();
-      });
-      return;
+    },
+    [cast, isAuthenticated, onSignInRequired, onError, state.value]
+  );
+  useEffect(() => {
+    if (error) onError?.(error);
+  }, [error, onError]);
+  const compactStyle = size === "compact" ? STYLES2.buttonCompact : {};
+  const upActive = state.value === 1;
+  const downActive = state.value === -1;
+  const upBtn = /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": upLabel,
+      "aria-pressed": upActive,
+      title: isAuthenticated ? upLabel : "Sign in to vote",
+      className: [classNames?.upButton, upActive ? classNames?.upButtonActive : void 0].filter(Boolean).join(" ") || void 0,
+      onClick: () => void handleVote(1),
+      style: classNames?.upButton ? void 0 : { ...STYLES2.button, ...compactStyle, ...upActive ? STYLES2.buttonActiveUp : {} },
+      children: ARROW_UP
     }
-    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__ */ 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;
-          }
-          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(
-          "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",
-              {
-                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",
-                    {
-                      x: index,
-                      y,
-                      width: 0.82,
-                      height,
-                      rx: 0.4,
-                      fill: filled ? "#155dfc" : "#90c5ff"
-                    },
-                    `${audio.id}-${index}`
-                  );
-                })
-              }
-            ) : /* @__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
-          ] }),
-          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 && showRefreshButton && /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: onRefresh,
-            disabled: refreshing,
-            style: refreshing ? { ...styles.refreshButton, ...styles.disabled } : styles.refreshButton,
-            children: refreshing ? "Refreshing\u2026" : "Refresh"
-          }
-        )
-      ] })
-    ] })
+  );
+  const downBtn = /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": downLabel,
+      "aria-pressed": downActive,
+      title: isAuthenticated ? downLabel : "Sign in to vote",
+      className: [classNames?.downButton, downActive ? classNames?.downButtonActive : void 0].filter(Boolean).join(" ") || void 0,
+      onClick: () => void handleVote(-1),
+      style: classNames?.downButton ? void 0 : { ...STYLES2.button, ...compactStyle, ...downActive ? STYLES2.buttonActiveDown : {} },
+      children: ARROW_DOWN
+    }
+  );
+  const scoreClass = [
+    classNames?.score,
+    state.score > 0 ? classNames?.scorePositive : void 0,
+    state.score < 0 ? classNames?.scoreNegative : void 0
+  ].filter(Boolean).join(" ") || void 0;
+  const scoreEl = /* @__PURE__ */ jsx("span", { className: scoreClass, style: classNames?.score ? void 0 : STYLES2.score, children: state.score });
+  const rootStyle = layout === "stacked" ? STYLES2.rootStacked : STYLES2.root;
+  return /* @__PURE__ */ jsxs("div", { className: classNames?.root, style: classNames?.root ? void 0 : rootStyle, children: [
+    upBtn,
+    scoreEl,
+    downBtn
   ] });
 }
 
@@ -12005,4 +11914,4 @@ function createSafeLogger(prefix) {
   };
 }
 
-export { FeedbackWidget, NarrationPlayer, ScaleMuleApiError, ScaleMuleClient2 as ScaleMuleClient, ScaleMuleMedia, ScaleMuleProvider, composePhone, createClient, createSafeLogger, normalizePhone, phoneCountries, sanitizeForLog, useAnalytics, useAudio, useAuth, useBilling, useContent, useFeatureFlags, useFeedback, useFileStatus, useMedia, useMoney, useMoneyClient, usePushNotifications, useRealtime, useScaleMule, useScaleMuleClient, useShare, useTtsJob, useUser, validateForm, validators };
+export { FeedbackWidget, ScaleMuleApiError, ScaleMuleClient2 as ScaleMuleClient, ScaleMuleMedia, ScaleMuleProvider, VoteButton, composePhone, createClient, createSafeLogger, normalizePhone, phoneCountries, sanitizeForLog, useAnalytics, useAudio, useAuth, useBilling, useContent, useFeatureFlags, useFeedback, useFileStatus, useMedia, useMoney, useMoneyClient, usePushNotifications, useRealtime, useScaleMule, useScaleMuleClient, useShare, useTtsJob, useUser, useVote, validateForm, validators };