@xmaxai/sdk 1.0.0 → 1.0.2

package/dist/react/index.cjs

@@ -280,148 +280,13 @@ function createSDKI18n(input) {
   };
 }
 
-// src/shared/browser-toast.ts
-var TOAST_ROOT_ID = "Xmax-sdk-toast-root";
-var TOAST_DURATION_MS = 3e3;
-var toastSeed = 0;
-var timeoutMap = /* @__PURE__ */ new Map();
-var elementMap = /* @__PURE__ */ new Map();
-function ensureToastRoot() {
-  if (typeof document === "undefined") {
-    return null;
-  }
-  let root = document.getElementById(TOAST_ROOT_ID);
-  if (root) {
-    return root;
-  }
-  root = document.createElement("div");
-  root.id = TOAST_ROOT_ID;
-  root.setAttribute("aria-live", "polite");
-  Object.assign(root.style, {
-    position: "fixed",
-    left: "50%",
-    top: "24px",
-    transform: "translateX(-50%)",
-    zIndex: "3000",
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    gap: "12px",
-    pointerEvents: "none"
-  });
-  document.body.appendChild(root);
-  return root;
-}
-function createIcon(type) {
-  const icon = document.createElement("span");
-  icon.setAttribute("aria-hidden", "true");
-  icon.innerHTML = type === "success" ? '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M10 3L4.5 8.5 2 6" stroke="#4ade80" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>' : '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"><circle cx="6" cy="6" r="5" stroke="#f87171" stroke-width="1.5"/><path d="M4 4l4 4M8 4L4 8" stroke="#f87171" stroke-width="1.5" stroke-linecap="round"/></svg>';
-  Object.assign(icon.style, {
-    display: "inline-flex",
-    width: "12px",
-    height: "12px",
-    flexShrink: "0"
-  });
-  return icon;
-}
-function clearToastTimer(id) {
-  const timer = timeoutMap.get(id);
-  if (timer) {
-    window.clearTimeout(timer);
-    timeoutMap.delete(id);
-  }
-}
-function destroyToast(id) {
-  if (!id) {
-    timeoutMap.forEach((timer) => window.clearTimeout(timer));
-    timeoutMap.clear();
-    elementMap.forEach((element2) => element2.remove());
-    elementMap.clear();
-    const root2 = typeof document !== "undefined" ? document.getElementById(TOAST_ROOT_ID) : null;
-    root2?.remove();
-    return;
-  }
-  clearToastTimer(id);
-  const element = elementMap.get(id);
-  element?.remove();
-  elementMap.delete(id);
-  const root = typeof document !== "undefined" ? document.getElementById(TOAST_ROOT_ID) : null;
-  if (root && !root.childElementCount) {
-    root.remove();
-  }
-}
-function showToast(type, message, options) {
-  const root = ensureToastRoot();
-  if (!root) {
-    return "";
-  }
-  const id = options?.key || `toast-${Date.now()}-${++toastSeed}`;
-  clearToastTimer(id);
-  elementMap.get(id)?.remove();
-  const isMobile = typeof window !== "undefined" && window.matchMedia("(max-width: 768px)").matches;
-  const textSize = isMobile ? "12px" : "14px";
-  const toast = document.createElement("div");
-  toast.setAttribute("role", "status");
-  Object.assign(toast.style, {
-    pointerEvents: "auto",
-    display: "flex",
-    alignItems: "center",
-    gap: "12px",
-    minWidth: "240px",
-    padding: "16px",
-    borderRadius: "12px",
-    border: "1px solid rgba(255, 255, 255, 0.20)",
-    background: "rgba(0, 0, 0, 0.80)",
-    boxShadow: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
-    fontFamily: "Rubik, ui-sans-serif, system-ui, sans-serif",
-    fontSize: textSize,
-    fontWeight: "400",
-    lineHeight: "14px"
-  });
-  const content = document.createElement("span");
-  content.textContent = message;
-  Object.assign(content.style, {
-    paddingRight: "0px",
-    textAlign: "center",
-    color: "#ffffff",
-    fontFamily: "Rubik, ui-sans-serif, system-ui, sans-serif",
-    fontSize: textSize,
-    fontWeight: "400",
-    lineHeight: "14px"
-  });
-  toast.appendChild(createIcon(type));
-  toast.appendChild(content);
-  root.appendChild(toast);
-  elementMap.set(id, toast);
-  const timer = window.setTimeout(() => {
-    destroyToast(id);
-  }, options?.duration ?? TOAST_DURATION_MS);
-  timeoutMap.set(id, timer);
-  return id;
-}
-var browserToast = {
-  success(message, options) {
-    return showToast("success", message, options);
-  },
-  error(message, options) {
-    return showToast("error", message, options);
-  },
-  destroy(id) {
-    destroyToast(id);
-  }
-};
-
 // src/shared/error-utils.ts
 function notifyError(error, notifier, fallbackMessage) {
   const resolved = error instanceof Error ? error : Object.assign(new Error(fallbackMessage), { cause: error });
-  if (!resolved.__XmaxNotified) {
+  if (!resolved.__XmaxNotified && notifier) {
     resolved.__XmaxNotified = true;
     const message = resolved.message || fallbackMessage;
-    if (notifier) {
-      notifier(message, error);
-    } else if (typeof window !== "undefined" && typeof document !== "undefined") {
-      browserToast.error(message);
-    }
+    notifier(message, error);
   }
   return resolved;
 }
@@ -483,7 +348,7 @@ var XmaxOpenClient = class {
     }
     throw notifyError(error, this.onError, message);
   }
-  /** Stop heartbeat, abort in-flight API requests, and suppress error toasts during teardown. */
+  /** Stop heartbeat, abort in-flight API requests, and suppress error notifications during teardown. */
   beginTeardown() {
     this.suppressErrorNotification = true;
     this.stopHeartbeat();
@@ -539,7 +404,8 @@ var XmaxOpenClient = class {
         return p.data;
       }
       const mappedMessage = resolveApiErrorMessage(p.code, this.i18n.locale);
-      const errorMessage = mappedMessage ?? this.i18n.t("errors.requestRetry");
+      const backendMessage = typeof p.message === "string" && p.message.trim() ? p.message.trim() : void 0;
+      const errorMessage = mappedMessage ?? backendMessage ?? this.i18n.t("errors.requestRetry");
       throw new Error(errorMessage);
     } catch (error) {
       if (this.isAbortError(error)) {
@@ -691,6 +557,7 @@ function createStartRtcRoomEvent(input) {
   const resolvedPrompt = input.prompt?.trim() ?? "";
   const refImagePath = input.refImagePath?.trim() || input.refImage?.trim() || void 0;
   const useRefImage = !!refImagePath;
+  const staticImagePath = input.staticImagePath?.trim() || void 0;
   return {
     event: "start",
     user_id: input.userId?.trim() || void 0,
@@ -702,7 +569,9 @@ function createStartRtcRoomEvent(input) {
       prompt: resolvedPrompt,
       ref_image_path: useRefImage ? refImagePath : void 0,
       ref_image: useRefImage ? refImagePath : void 0,
-      static_generate: input.staticGenerate === void 0 ? void 0 : input.staticGenerate,
+      // Instant-only — omit when false/undefined so non-instant starts never carry leftover flags.
+      static_generate: input.staticGenerate === true ? true : void 0,
+      static_image_path: staticImagePath,
       ...input.extraParams ?? {}
     }
   };
@@ -1103,7 +972,7 @@ var _RtcManager = class _RtcManager {
     this.lastRemoteSei = null;
     this.lastRemoteSeiUserId = null;
     this.hasLoggedSeiSendFailure = false;
-    if (previousExpectedRemoteSei !== this.expectedRemoteSei && this.remoteVideoUserId) {
+    if (previousExpectedRemoteSei !== this.expectedRemoteSei && this.remoteVideoUserId && !this.preserveRemoteDom) {
       this.pendingRemoteVideoUserId = this.remoteVideoUserId;
       this.remoteVideoUserId = null;
     }
@@ -1451,45 +1320,6 @@ var _RtcManager = class _RtcManager {
       sentFrameRate: this.lastObservedSentFrameRate
     });
   }
-  /** @deprecated Use {@link ensurePublishedInputBeforeStart}. */
-  async waitForRtcOutboundBeforeStart(options) {
-    const timeoutMs = options?.timeoutMs ?? PUBLISH_READY_TIMEOUT_MS;
-    const publishAgeMs = this.publishStartedAtMs > 0 ? performance.now() - this.publishStartedAtMs : 0;
-    const localFramesPromise = publishAgeMs >= PUBLISH_WARM_SKIP_MS ? Promise.resolve({ ready: true, frameCount: 0, elapsedMs: 0 }) : this.waitForPublishedInputFrames({
-      minFrames: PUBLISH_START_MIN_FRAMES,
-      timeoutMs: PUBLISH_START_FRAME_TIMEOUT_MS
-    });
-    const [, rtcReady] = await Promise.all([
-      localFramesPromise,
-      this.waitForLocalPublishReady({ timeoutMs })
-    ]);
-    return rtcReady;
-  }
-  /** @deprecated Use {@link waitForRtcOutboundBeforeStart}. */
-  async waitForPublishedInputFramesBeforeStart() {
-    const waitOptions = this.resolveInputFrameWaitOptions();
-    const waitTasks = [
-      this.waitForLocalPublishReady({ timeoutMs: PUBLISH_READY_TIMEOUT_MS })
-    ];
-    if (waitOptions) {
-      waitTasks.push(
-        this.waitForMinPublishDuration(waitOptions.minPublishMs),
-        this.waitForPublishedInputFrames({
-          minFrames: waitOptions.minFrames,
-          timeoutMs: waitOptions.timeoutMs
-        })
-      );
-    }
-    const [rtcResult, ...rest] = await Promise.all(waitTasks);
-    const rtcSend = rtcResult;
-    const frameResult = waitOptions ? rest[1] : { ready: true, frameCount: 0, elapsedMs: 0 };
-    return {
-      ...frameResult,
-      rtcSendReady: rtcSend.ready,
-      rtcSendReason: rtcSend.reason,
-      rtcSendElapsedMs: rtcSend.elapsedSincePublishMs
-    };
-  }
   async waitForMinPublishDuration(minMs) {
     if (minMs <= 0 || this.publishStartedAtMs <= 0) {
       return;
@@ -2453,17 +2283,6 @@ function shouldSampleAtMediaTime(lastMediaTimeS, mediaTimeS) {
   }
   return mediaTimeS > lastMediaTimeS + MEDIA_TIME_EPSILON_S;
 }
-function sampleCanvasFingerprint(ctx, width, height) {
-  const points = [
-    [0, 0],
-    [Math.max(0, (width >> 1) - 1), Math.max(0, (height >> 1) - 1)],
-    [Math.max(0, width - 1), Math.max(0, height - 1)]
-  ];
-  return points.map(([x, y]) => {
-    const data = ctx.getImageData(x, y, 1, 1).data;
-    return `${data[0]},${data[1]},${data[2]}`;
-  }).join("|");
-}
 async function applyPublishTrackConstraints(track, width, height) {
   if (typeof track.applyConstraints !== "function") {
     return;
@@ -2536,12 +2355,6 @@ async function createVideoFileStream(fileOrUrl, options = {}) {
   let lastDrawMediaTimeS = -1;
   let videoFrameCallbackId = null;
   let rafId = null;
-  const logPublishFrames = options.logPublishFrames ?? false;
-  let publishFrameIndex = 0;
-  let lastPublishWallMs = 0;
-  let lastPublishMediaTimeS = -1;
-  let publishFramesInWindow = 0;
-  let publishWindowStartMs = 0;
   const drawFrame = () => {
     if (destroyed) {
       return;
@@ -2555,52 +2368,13 @@ async function createVideoFileStream(fileOrUrl, options = {}) {
       sourceHeight
     );
   };
-  const logPublishedFrame = (mediaTimeS, presentedFrames) => {
-    if (!logPublishFrames) {
-      return;
-    }
-    publishFrameIndex += 1;
-    const wallNowMs = performance.now();
-    const wallDeltaMs = lastPublishWallMs > 0 ? wallNowMs - lastPublishWallMs : 0;
-    const mediaDeltaS = lastPublishMediaTimeS >= 0 ? mediaTimeS - lastPublishMediaTimeS : 0;
-    lastPublishWallMs = wallNowMs;
-    lastPublishMediaTimeS = mediaTimeS;
-    publishFramesInWindow += 1;
-    if (publishWindowStartMs === 0) {
-      publishWindowStartMs = wallNowMs;
-    }
-    const fingerprint = sampleCanvasFingerprint(ctx, outputWidth, outputHeight);
-    console.warn("[upload-video \u2192 publishFrame]", {
-      frameIndex: publishFrameIndex,
-      mediaTimeS: Number(mediaTimeS.toFixed(4)),
-      mediaDeltaS: Number(mediaDeltaS.toFixed(4)),
-      wallDeltaMs: Number(wallDeltaMs.toFixed(1)),
-      effectiveFps: wallDeltaMs > 0 ? Number((1e3 / wallDeltaMs).toFixed(1)) : null,
-      presentedFrames,
-      size: `${outputWidth}\xD7${outputHeight}`,
-      fingerprint
-    });
-    const windowElapsedMs = wallNowMs - publishWindowStartMs;
-    if (windowElapsedMs >= 1e3) {
-      console.warn("[upload-video \u2192 publishFps]", {
-        framesInLast1s: publishFramesInWindow,
-        avgFps: Number((publishFramesInWindow / (windowElapsedMs / 1e3)).toFixed(2)),
-        videoCurrentTime: Number(videoEl.currentTime.toFixed(4)),
-        videoPaused: videoEl.paused,
-        videoReadyState: videoEl.readyState
-      });
-      publishFramesInWindow = 0;
-      publishWindowStartMs = wallNowMs;
-    }
-  };
-  const onPlaybackSample = (mediaTimeS, presentedFrames) => {
+  const onPlaybackSample = (mediaTimeS) => {
     if (destroyed || !shouldSampleAtMediaTime(lastDrawMediaTimeS, mediaTimeS)) {
       return;
     }
     lastDrawMediaTimeS = mediaTimeS;
     lastAdvanceAt = Date.now();
     drawFrame();
-    logPublishedFrame(mediaTimeS, presentedFrames);
   };
   const schedulePlaybackWatch = () => {
     if (destroyed) {
@@ -2609,7 +2383,7 @@ async function createVideoFileStream(fileOrUrl, options = {}) {
     const video = videoEl;
     if (video.requestVideoFrameCallback) {
       videoFrameCallbackId = video.requestVideoFrameCallback((_now, metadata) => {
-        onPlaybackSample(metadata.mediaTime, metadata.presentedFrames);
+        onPlaybackSample(metadata.mediaTime);
         schedulePlaybackWatch();
       });
       return;
@@ -2620,7 +2394,6 @@ async function createVideoFileStream(fileOrUrl, options = {}) {
     });
   };
   drawFrame();
-  logPublishedFrame(videoEl.currentTime);
   schedulePlaybackWatch();
   const ensurePlaying = () => {
     if (destroyed) {
@@ -2642,18 +2415,6 @@ async function createVideoFileStream(fileOrUrl, options = {}) {
   videoEl.addEventListener("ended", ensurePlaying);
   videoEl.addEventListener("stalled", ensurePlaying);
   videoEl.addEventListener("waiting", ensurePlaying);
-  if (logPublishFrames) {
-    const logPlaybackEvent = (eventName) => {
-      console.warn("[upload-video \u2192 playbackEvent]", {
-        event: eventName,
-        currentTime: Number(videoEl.currentTime.toFixed(4)),
-        readyState: videoEl.readyState,
-        paused: videoEl.paused
-      });
-    };
-    videoEl.addEventListener("waiting", () => logPlaybackEvent("waiting"));
-    videoEl.addEventListener("stalled", () => logPlaybackEvent("stalled"));
-  }
   const healthIntervalMs = options.healthIntervalMs ?? 3e3;
   let healthTimer = null;
   if (options.onHealthReport) {
@@ -3151,18 +2912,9 @@ function XmaxProvider({ config, children }) {
   const detachRemoteContainer = react.useCallback(() => {
     rtcManagerRef.current?.setRemoteVideoContainer(null);
   }, []);
-  const notifyUserError = react.useCallback((message, error) => {
-    if (externalOnError) {
-      externalOnError(message, error);
-      return;
-    }
-    if (typeof window !== "undefined" && typeof document !== "undefined") {
-      browserToast.error(message);
-    }
-  }, [externalOnError]);
   const reportError = react.useCallback((error, fallbackMessage) => {
-    return notifyError(error, notifyUserError, fallbackMessage ?? sdkI18n.t("errors.requestFailed"));
-  }, [notifyUserError, sdkI18n]);
+    return notifyError(error, externalOnError, fallbackMessage ?? sdkI18n.t("errors.requestFailed"));
+  }, [externalOnError, sdkI18n]);
   const rtcManagerRef = react.useRef(null);
   if (!rtcManagerRef.current) {
     rtcManagerRef.current = new RtcManager({
@@ -3191,11 +2943,11 @@ function XmaxProvider({ config, children }) {
       baseUrl: config.baseUrl,
       locale: config.locale,
       i18n: sdkI18n,
-      onError: notifyUserError
+      onError: externalOnError
     });
     clientRef.current = created;
     return created;
-  }, [config.apiKey, config.authToken, config.baseUrl, config.locale, notifyUserError, sdkI18n]);
+  }, [config.apiKey, config.authToken, config.baseUrl, config.locale, externalOnError, sdkI18n]);
   const ensureConnected = react.useCallback(async () => {
     const client = getClient();
     const rtc = rtcManagerRef.current;
@@ -3605,11 +3357,6 @@ function XmaxProvider({ config, children }) {
     if (!activeTaskUid) {
       return;
     }
-    console.log("[Xmax] sendTracks", {
-      taskUid: activeTaskUid,
-      targetSize: sessionTargetSize,
-      tracks: options.tracks
-    });
     try {
       const event = createTracksRtcRoomEvent({
         userId: rtc.snapshot.userId ?? void 0,
@@ -3662,9 +3409,6 @@ function XmaxProvider({ config, children }) {
       debugLogRef.current("lifecycle", "warn", "remote output stalled", info);
     };
   }, []);
-  const changeModel = react.useCallback(async () => {
-    return;
-  }, []);
   const bindLocalView = react.useCallback((el) => {
     localContainerRef.current = el;
     rtcManagerRef.current?.setLocalVideoContainer(el);
@@ -3707,7 +3451,6 @@ function XmaxProvider({ config, children }) {
     start,
     sendTracks,
     stop,
-    changeModel,
     bindLocalView,
     bindRemoteView
   }), [
@@ -3732,7 +3475,6 @@ function XmaxProvider({ config, children }) {
     start,
     sendTracks,
     stop,
-    changeModel,
     bindLocalView,
     bindRemoteView
   ]);
@@ -3935,6 +3677,7 @@ function drawNeon(ctx, segs, container, targetSize, dpr, fitMode, mirrored) {
 }
 var DragTrackController = class {
   constructor(container, options) {
+    this.strokeActive = false;
     this.activePointers = /* @__PURE__ */ new Map();
     this.lastTargetPoints = /* @__PURE__ */ new Map();
     this.segQueue = [];
@@ -3944,6 +3687,8 @@ var DragTrackController = class {
     this.resizeObserver = null;
     this.container = container;
     this.onTracks = options.onTracks;
+    this.onStrokeStart = options.onStrokeStart;
+    this.onStrokeEnd = options.onStrokeEnd;
     this.targetSize = options.targetSize;
     this.fitMode = options.fitMode ?? "cover";
     this.mirrored = options.mirrored ?? false;
@@ -4114,11 +3859,17 @@ var DragTrackController = class {
       this.flushTracks();
     }, 30);
   }
-  finishStroke() {
+  finishStroke(emitEnd = false) {
+    const wasActive = this.strokeActive;
+    this.strokeActive = false;
     this.stopSampling();
     this.stopDrawLoop();
     this.segQueue.length = 0;
     this.clearCanvas();
+    if (emitEnd && wasActive && this.onStrokeEnd) {
+      Promise.resolve(this.onStrokeEnd()).catch(() => {
+      });
+    }
   }
   handlePointerDown(e) {
     if (!this.enabled) {
@@ -4142,6 +3893,12 @@ var DragTrackController = class {
     if (targetPoint) {
       this.lastTargetPoints.set(e.pointerId, targetPoint);
     }
+    const strokeWasActive = this.strokeActive;
+    this.strokeActive = true;
+    if (!strokeWasActive && this.onStrokeStart) {
+      Promise.resolve(this.onStrokeStart()).catch(() => {
+      });
+    }
     this.startDrawLoop();
     this.startSampling();
   }
@@ -4174,7 +3931,7 @@ var DragTrackController = class {
     } catch {
     }
     if (this.activePointers.size === 0) {
-      this.finishStroke();
+      this.finishStroke(true);
     }
   }
   handlePointerCancel(e) {
@@ -4184,7 +3941,7 @@ var DragTrackController = class {
     this.activePointers.delete(e.pointerId);
     this.lastTargetPoints.delete(e.pointerId);
     if (this.activePointers.size === 0) {
-      this.finishStroke();
+      this.finishStroke(true);
     }
   }
 };