@xmaxai/sdk 0.1.0

package/dist/react/index.js

@@ -0,0 +1,817 @@
+import { browserToast, notifyError, RtcManager, XmaxOpenClient, ACTIVE_STATUS, createStopRtcRoomEvent, models, requestCameraMediaStream, createNativeCameraStream, createTaskUid, createStartRtcRoomEvent, createTracksRtcRoomEvent, createDragTrackController } from '../chunk-67XSD3QJ.js';
+import { createVideoFileStream } from '../chunk-EGNRAZ5U.js';
+import { createSDKI18n, resolveUploadVideoSize, isMobilePublishEnvironment, resolveSessionTargetSize, DEFAULT_SESSION_TARGET_SIZE } from '../chunk-PLU2YVAS.js';
+import { createContext, useMemo, useRef, useCallback, useState, useEffect, useContext } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/shared/session-debug.ts
+function createSessionDebugLogger(enabled, onLog) {
+  return (category, level, message, data) => {
+    if (!enabled || !onLog) {
+      return;
+    }
+    const scope = category === "rtc" || category === "sei" ? "rtc" : "client";
+    onLog({
+      scope,
+      level,
+      message: `[${category}] ${message}`,
+      data
+    });
+  };
+}
+function seiGateChanged(prev, next) {
+  if (!prev) {
+    return true;
+  }
+  return prev.matched !== next.matched || prev.expectedSei !== next.expectedSei || prev.sei !== next.sei || prev.userId !== next.userId;
+}
+function outputVisibilityChanged(prev, next) {
+  if (!prev) {
+    return true;
+  }
+  return prev.showOutputVideo !== next.showOutputVideo || prev.outputEnabled !== next.outputEnabled || prev.hasResult !== next.hasResult || prev.remoteVideoUserId !== next.remoteVideoUserId || prev.localVideoPublished !== next.localVideoPublished || prev.inputSource !== next.inputSource || prev.seiMatched !== next.seiMatched;
+}
+function isVideoInputUnhealthy(health) {
+  return health.stalled || health.paused || health.ended || health.trackReadyState === "ended";
+}
+function videoInputHealthChanged(prev, next) {
+  if (!prev) {
+    return isVideoInputUnhealthy(next);
+  }
+  const prevBad = isVideoInputUnhealthy(prev);
+  const nextBad = isVideoInputUnhealthy(next);
+  if (prevBad !== nextBad) {
+    return true;
+  }
+  if (nextBad) {
+    return prev.stalled !== next.stalled || prev.paused !== next.paused || prev.ended !== next.ended || prev.trackReadyState !== next.trackReadyState;
+  }
+  return false;
+}
+var XmaxContext = createContext(null);
+var createDefaultRtcSnapshot = () => ({
+  roomId: null,
+  userId: null,
+  appId: null,
+  botUserId: null,
+  joined: false,
+  localVideoPublished: false,
+  remoteVideoUserId: null,
+  users: []
+});
+var createDefaultSeiGateState = () => ({
+  expectedSei: null,
+  sei: null,
+  userId: null,
+  matched: true
+});
+function XmaxProvider({ config, children }) {
+  const sdkI18n = useMemo(() => config.i18n ?? createSDKI18n({ locale: config.locale }), [config.i18n, config.locale]);
+  const debugEnabled = config.debug ?? false;
+  const debugLog = useMemo(
+    () => createSessionDebugLogger(debugEnabled, config.onLog),
+    [config.onLog, debugEnabled]
+  );
+  const debugLogRef = useRef(debugLog);
+  debugLogRef.current = debugLog;
+  const debugEnabledRef = useRef(debugEnabled);
+  debugEnabledRef.current = debugEnabled;
+  const prevSeiGateRef = useRef(null);
+  const prevOutputVisibilityRef = useRef(null);
+  const prevVideoHealthRef = useRef(null);
+  const resetDebugSnapshots = useCallback(() => {
+    prevSeiGateRef.current = null;
+    prevOutputVisibilityRef.current = null;
+    prevVideoHealthRef.current = null;
+  }, []);
+  const externalOnError = config.onError;
+  const clientRef = useRef(null);
+  const sessionUidRef = useRef(null);
+  const taskUidRef = useRef(null);
+  const lastStartPromptRef = useRef(void 0);
+  const lastStartModelRef = useRef("");
+  const lastStartRefImageRef = useRef(void 0);
+  const videoFileStreamRef = useRef(null);
+  const cameraStreamRef = useRef(null);
+  const localVideoSizeRef = useRef(null);
+  const inputSourceRef = useRef("none");
+  const disconnectRef = useRef(null);
+  const disconnectPromiseRef = useRef(null);
+  const localContainerRef = useRef(null);
+  const remoteContainerRef = useRef(null);
+  const outputEnabledRef = useRef(false);
+  const activeModeCodeRef = useRef(null);
+  const onRemoteOutputStalledRef = useRef(null);
+  const [rtcState, setRtcState] = useState(createDefaultRtcSnapshot);
+  const [inputSource, setInputSource] = useState("none");
+  const [isCameraOn, setIsCameraOn] = useState(false);
+  const [isRecording, setIsRecording] = useState(false);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [hasResult, setHasResult] = useState(false);
+  const [outputEnabled, setOutputEnabled] = useState(false);
+  const [activeModeCode, setActiveModeCode] = useState(null);
+  const [localVideoSize, setLocalVideoSize] = useState(null);
+  const [sessionTargetSize, setSessionTargetSize] = useState(null);
+  const [seiGate, setSeiGate] = useState(createDefaultSeiGateState);
+  inputSourceRef.current = inputSource;
+  localVideoSizeRef.current = localVideoSize;
+  outputEnabledRef.current = outputEnabled;
+  activeModeCodeRef.current = activeModeCode;
+  const ensureLocalVideoContainer = useCallback(() => {
+    const rtc = rtcManagerRef.current;
+    const container = localContainerRef.current;
+    if (!rtc || !container) {
+      return;
+    }
+    rtc.setLocalVideoContainer(container);
+  }, []);
+  const bindRemoteContainer = useCallback(() => {
+    const rtc = rtcManagerRef.current;
+    const container = remoteContainerRef.current;
+    if (!rtc || !container) {
+      return;
+    }
+    rtc.setRemoteVideoContainer(container);
+    void rtc.refreshRemoteVideoBinding();
+  }, []);
+  const detachRemoteContainer = useCallback(() => {
+    rtcManagerRef.current?.setRemoteVideoContainer(null);
+  }, []);
+  const notifyUserError = useCallback((message, error) => {
+    if (externalOnError) {
+      externalOnError(message, error);
+      return;
+    }
+    if (typeof window !== "undefined" && typeof document !== "undefined") {
+      browserToast.error(message);
+    }
+  }, [externalOnError]);
+  const reportError = useCallback((error, fallbackMessage) => {
+    return notifyError(error, notifyUserError, fallbackMessage ?? sdkI18n.t("errors.requestFailed"));
+  }, [notifyUserError, sdkI18n]);
+  const rtcManagerRef = useRef(null);
+  if (!rtcManagerRef.current) {
+    rtcManagerRef.current = new RtcManager({
+      onStateChange: (state) => setRtcState(state),
+      onSeiGateChange: (state) => {
+        setSeiGate(state);
+        if (debugEnabledRef.current && seiGateChanged(prevSeiGateRef.current, state)) {
+          debugLogRef.current("sei", state.matched ? "success" : "warn", "gate change", state);
+          prevSeiGateRef.current = state;
+        }
+      },
+      onLog: (entry) => config.onLog?.({ scope: "rtc", ...entry }),
+      onRemoteOutputStalled: (info) => onRemoteOutputStalledRef.current?.(info),
+      debug: debugEnabled,
+      i18n: sdkI18n
+    });
+  }
+  const getClient = useCallback(() => {
+    const existing = clientRef.current;
+    if (existing) {
+      return existing;
+    }
+    const created = new XmaxOpenClient({
+      apiKey: config.apiKey,
+      authToken: config.authToken,
+      baseUrl: config.baseUrl,
+      locale: config.locale,
+      i18n: sdkI18n,
+      onError: notifyUserError
+    });
+    clientRef.current = created;
+    return created;
+  }, [config.apiKey, config.authToken, config.baseUrl, config.locale, notifyUserError, sdkI18n]);
+  const ensureConnected = useCallback(async () => {
+    const client = getClient();
+    const rtc = rtcManagerRef.current;
+    if (!rtc) {
+      return;
+    }
+    if (rtc.snapshot.joined && sessionUidRef.current) {
+      return;
+    }
+    const model = config.model ?? "x2.0";
+    const session = await client.createSession(model);
+    if (!session.sessionUid?.trim()) {
+      throw new Error(sdkI18n.t("errors.sessionUidMissing"));
+    }
+    sessionUidRef.current = session.sessionUid;
+    client.startHeartbeat(
+      session.sessionUid,
+      config.heartbeatIntervalMs ?? 1e4,
+      (heartbeatSession) => {
+        if (heartbeatSession.status !== ACTIVE_STATUS) {
+          void disconnectRef.current?.();
+        }
+      },
+      () => {
+        void disconnectRef.current?.();
+      }
+    );
+    const joinInfo = client.getRtcJoinInfo(session);
+    await rtc.join(joinInfo);
+    ensureLocalVideoContainer();
+  }, [config.heartbeatIntervalMs, config.model, ensureLocalVideoContainer, getClient, sdkI18n]);
+  const connect = useCallback(async () => {
+    try {
+      await ensureConnected();
+    } catch (error) {
+      throw reportError(error);
+    }
+  }, [ensureConnected, reportError]);
+  const stopPublishing = useCallback(async () => {
+    const rtc = rtcManagerRef.current;
+    if (!rtc) {
+      return;
+    }
+    try {
+      await rtc.stopVideoPublishing();
+    } catch {
+    }
+    rtc.clearRemoteVideo();
+    detachRemoteContainer();
+    setOutputEnabled(false);
+    setHasResult(false);
+    if (videoFileStreamRef.current) {
+      videoFileStreamRef.current.destroy();
+      videoFileStreamRef.current = null;
+    }
+    if (cameraStreamRef.current) {
+      cameraStreamRef.current.destroy();
+      cameraStreamRef.current = null;
+    }
+    setInputSource("none");
+    setIsCameraOn(false);
+    setIsRecording(false);
+    setLocalVideoSize(null);
+    localVideoSizeRef.current = null;
+    setSessionTargetSize(null);
+    setSeiGate(createDefaultSeiGateState());
+    resetDebugSnapshots();
+    debugLogRef.current("lifecycle", "info", "stopPublishing", { inputSource: inputSourceRef.current });
+  }, [detachRemoteContainer, resetDebugSnapshots]);
+  const stop = useCallback(async () => {
+    try {
+      const rtc = rtcManagerRef.current;
+      taskUidRef.current = null;
+      rtc?.configureSessionSei(null);
+      setSeiGate(createDefaultSeiGateState());
+      resetDebugSnapshots();
+      debugLogRef.current("lifecycle", "info", "stop", {});
+      if (!rtc?.snapshot.joined) {
+        rtc?.clearRemoteVideo();
+        detachRemoteContainer();
+        setHasResult(false);
+        setOutputEnabled(false);
+        return;
+      }
+      try {
+        const stopEvent = createStopRtcRoomEvent({
+          userId: rtc.snapshot.userId ?? void 0,
+          sessionUid: sessionUidRef.current ?? void 0
+        });
+        await rtc.sendRoomEvent(stopEvent);
+      } finally {
+        rtc.clearRemoteVideo();
+        detachRemoteContainer();
+        setHasResult(false);
+        setOutputEnabled(false);
+      }
+    } catch (error) {
+      throw reportError(error);
+    }
+  }, [detachRemoteContainer, reportError, resetDebugSnapshots]);
+  const disconnect = useCallback(async () => {
+    if (disconnectPromiseRef.current) {
+      return disconnectPromiseRef.current;
+    }
+    const run = async () => {
+      const client = clientRef.current;
+      const rtc = rtcManagerRef.current;
+      const activeSessionUid = sessionUidRef.current;
+      client?.beginTeardown();
+      rtc?.configureSessionSei(null);
+      setSeiGate(createDefaultSeiGateState());
+      taskUidRef.current = null;
+      resetDebugSnapshots();
+      rtc?.clearRemoteVideo();
+      try {
+        await stop();
+      } catch {
+      }
+      await stopPublishing();
+      if (rtc) {
+        try {
+          rtc.configureSessionSei(null);
+          await rtc.leave();
+        } catch {
+        }
+      }
+      if (client && activeSessionUid) {
+        try {
+          await client.closeSession(activeSessionUid);
+        } catch {
+        }
+      }
+      client?.endTeardown();
+      sessionUidRef.current = null;
+      taskUidRef.current = null;
+      setHasResult(false);
+      setOutputEnabled(false);
+      setActiveModeCode(null);
+      setSessionTargetSize(null);
+      setIsRecording(false);
+      detachRemoteContainer();
+      setRtcState(createDefaultRtcSnapshot());
+      setSeiGate(createDefaultSeiGateState());
+    };
+    const promise = run().finally(() => {
+      if (disconnectPromiseRef.current === promise) {
+        disconnectPromiseRef.current = null;
+      }
+    });
+    disconnectPromiseRef.current = promise;
+    return promise;
+  }, [detachRemoteContainer, stop, stopPublishing, resetDebugSnapshots]);
+  disconnectRef.current = disconnect;
+  useEffect(() => {
+    return () => {
+      void disconnectRef.current?.();
+    };
+  }, []);
+  useEffect(() => {
+    if (!debugEnabled) {
+      return;
+    }
+    const snapshot = {
+      outputEnabled,
+      hasResult,
+      showOutputVideo: outputEnabled && (hasResult || !!rtcState.remoteVideoUserId),
+      remoteVideoUserId: rtcState.remoteVideoUserId,
+      localVideoPublished: rtcState.localVideoPublished,
+      inputSource,
+      seiMatched: seiGate.matched,
+      expectedSei: seiGate.expectedSei,
+      lastSei: seiGate.sei
+    };
+    if (!outputVisibilityChanged(prevOutputVisibilityRef.current, snapshot)) {
+      return;
+    }
+    const level = snapshot.showOutputVideo ? "info" : "warn";
+    debugLog("output", level, "visibility change", snapshot);
+    prevOutputVisibilityRef.current = snapshot;
+  }, [
+    debugEnabled,
+    debugLog,
+    outputEnabled,
+    hasResult,
+    rtcState.remoteVideoUserId,
+    rtcState.localVideoPublished,
+    inputSource,
+    seiGate.matched,
+    seiGate.expectedSei,
+    seiGate.sei
+  ]);
+  useEffect(() => {
+    const rtc = rtcManagerRef.current;
+    if (!rtc) {
+      return;
+    }
+    if (!outputEnabled) {
+      rtc.clearRemoteVideo();
+      detachRemoteContainer();
+      return;
+    }
+    bindRemoteContainer();
+  }, [bindRemoteContainer, detachRemoteContainer, outputEnabled]);
+  const openCamera = useCallback(async (options) => {
+    try {
+      await ensureConnected();
+      const rtc = rtcManagerRef.current;
+      if (!rtc) {
+        return;
+      }
+      await stopPublishing();
+      ensureLocalVideoContainer();
+      const defaultCamera = models.realtime("x2.0");
+      const cameraHint = options?.size ?? [defaultCamera.width, defaultCamera.height];
+      const precomputedSize = resolveUploadVideoSize(cameraHint[0], cameraHint[1]);
+      setSessionTargetSize(precomputedSize);
+      const rawStream = await requestCameraMediaStream({
+        width: cameraHint[0],
+        height: cameraHint[1],
+        frameRate: 30,
+        facingMode: "user"
+      });
+      const publishStream = await createNativeCameraStream(rawStream);
+      cameraStreamRef.current = publishStream;
+      await rtc.startExternalVideoPublishing(publishStream.videoTrack, precomputedSize, {
+        mobile: isMobilePublishEnvironment(),
+        highQuality: true
+      });
+      const sessionDims = { width: publishStream.width, height: publishStream.height };
+      setLocalVideoSize(sessionDims);
+      localVideoSizeRef.current = sessionDims;
+      setSessionTargetSize([sessionDims.width, sessionDims.height]);
+      setIsCameraOn(true);
+      setIsRecording(true);
+      setInputSource("camera");
+    } catch (error) {
+      throw reportError(error);
+    }
+  }, [ensureConnected, ensureLocalVideoContainer, reportError, sdkI18n, stopPublishing]);
+  const closeCamera = useCallback(async () => {
+    await disconnect();
+  }, [disconnect]);
+  const loadVideoFile = useCallback(async (file, options) => {
+    try {
+      await ensureConnected();
+      const rtc = rtcManagerRef.current;
+      if (!rtc) {
+        return null;
+      }
+      await stopPublishing();
+      ensureLocalVideoContainer();
+      prevVideoHealthRef.current = null;
+      const stream = await createVideoFileStream(file, {
+        muted: true,
+        loop: true,
+        mobile: isMobilePublishEnvironment(),
+        targetSize: options?.size,
+        i18n: sdkI18n,
+        onHealthReport: debugEnabled ? (health) => {
+          if (!videoInputHealthChanged(prevVideoHealthRef.current, health)) {
+            return;
+          }
+          prevVideoHealthRef.current = health;
+          const level = health.stalled || health.paused || health.ended ? "warn" : "info";
+          debugLogRef.current("video-input", level, "health change", health);
+        } : void 0
+      });
+      if (videoFileStreamRef.current) {
+        videoFileStreamRef.current.destroy();
+      }
+      videoFileStreamRef.current = stream;
+      await rtc.startExternalVideoPublishing(stream.videoTrack, [stream.width, stream.height], {
+        mobile: isMobilePublishEnvironment(),
+        fps: stream.fps,
+        highQuality: true
+      });
+      setInputSource("video");
+      setIsCameraOn(true);
+      setIsRecording(true);
+      debugLogRef.current("lifecycle", "info", "loadVideoFile", {
+        width: stream.width,
+        height: stream.height,
+        fileName: file.name
+      });
+      if (stream.width && stream.height) {
+        const size = { width: stream.width, height: stream.height };
+        setLocalVideoSize(size);
+        localVideoSizeRef.current = size;
+        setSessionTargetSize([stream.width, stream.height]);
+      } else {
+        setLocalVideoSize(null);
+        localVideoSizeRef.current = null;
+      }
+      const targetSize = [stream.width, stream.height];
+      return {
+        url: stream.url,
+        width: stream.width,
+        height: stream.height,
+        previewStream: stream.previewStream,
+        videoEl: stream.videoEl,
+        targetSize
+      };
+    } catch (error) {
+      throw reportError(error);
+    }
+  }, [ensureConnected, ensureLocalVideoContainer, reportError, sdkI18n, stopPublishing, debugEnabled]);
+  const clearInput = useCallback(async () => {
+    await disconnect();
+  }, [disconnect]);
+  const uploadImage = useCallback(async (file) => {
+    try {
+      const client = getClient();
+      return await client.uploadImage(file);
+    } catch (error) {
+      throw reportError(error);
+    }
+  }, [getClient, reportError]);
+  const setRefImage = useCallback(async (input) => {
+    try {
+      if (typeof input !== "string") {
+        const result2 = await uploadImage(input);
+        return result2.url;
+      }
+      const raw = input.trim();
+      if (!raw) {
+        return "";
+      }
+      if (/^https?:\/\//i.test(raw)) {
+        return raw;
+      }
+      const res = await fetch(raw);
+      if (!res.ok) {
+        throw new Error(`Failed to load ref image: ${res.status}`);
+      }
+      const blob = await res.blob();
+      const mime = blob.type || "image/png";
+      const ext = mime === "image/jpeg" ? "jpg" : mime === "image/webp" ? "webp" : mime === "image/gif" ? "gif" : "png";
+      const file = new File([blob], `ref.${ext}`, { type: mime });
+      const result = await uploadImage(file);
+      return result.url;
+    } catch (error) {
+      throw reportError(error);
+    }
+  }, [reportError, uploadImage]);
+  const start = useCallback(async (options) => {
+    try {
+      await ensureConnected();
+      const rtc = rtcManagerRef.current;
+      if (!rtc?.snapshot.joined) {
+        return;
+      }
+      const refForEvent = options.refImage;
+      const resolvedPrompt = options.prompt?.trim() ?? "";
+      setIsGenerating(true);
+      rtc.clearRemoteVideo();
+      rtc.setRemoteVideoContainer(null);
+      setHasResult(false);
+      setOutputEnabled(true);
+      outputEnabledRef.current = true;
+      const size = resolveSessionTargetSize({
+        localVideoSize: localVideoSizeRef.current,
+        overrideSize: options.size
+      });
+      setSessionTargetSize(size);
+      const taskUid = createTaskUid();
+      taskUidRef.current = taskUid;
+      lastStartPromptRef.current = resolvedPrompt || void 0;
+      lastStartModelRef.current = options.model;
+      lastStartRefImageRef.current = refForEvent?.trim() || void 0;
+      prevSeiGateRef.current = null;
+      rtc.configureSessionSei(taskUid);
+      debugLogRef.current("lifecycle", "info", "start", {
+        taskUid,
+        size,
+        inputSource: inputSourceRef.current
+      });
+      const startEvent = createStartRtcRoomEvent({
+        userId: rtc.snapshot.userId ?? void 0,
+        uid: taskUid,
+        sessionUid: taskUid,
+        model: options.model,
+        size,
+        prompt: resolvedPrompt || void 0,
+        extraParams: options.extraParams,
+        refImagePath: refForEvent?.trim() || void 0
+      });
+      if (remoteContainerRef.current) {
+        rtc.setRemoteVideoContainer(remoteContainerRef.current);
+      }
+      await rtc.ensurePublishedInputBeforeStart();
+      await rtc.sendRoomEvent(startEvent);
+      await rtc.refreshRemoteVideoBinding({ force: true });
+      setHasResult(true);
+    } catch (error) {
+      setOutputEnabled(false);
+      throw reportError(error);
+    } finally {
+      setIsGenerating(false);
+    }
+  }, [ensureConnected, reportError]);
+  const sendTracks = useCallback(async (options) => {
+    const rtc = rtcManagerRef.current;
+    if (!rtc?.snapshot.joined) {
+      return;
+    }
+    const activeTaskUid = taskUidRef.current;
+    if (!activeTaskUid) {
+      return;
+    }
+    console.log("[Xmax] sendTracks", {
+      taskUid: activeTaskUid,
+      targetSize: sessionTargetSize,
+      tracks: options.tracks
+    });
+    try {
+      const event = createTracksRtcRoomEvent({
+        userId: rtc.snapshot.userId ?? void 0,
+        uid: activeTaskUid,
+        sessionUid: activeTaskUid,
+        tracks: options.tracks
+      });
+      await rtc.sendRoomEvent(event);
+    } catch {
+    }
+  }, [sessionTargetSize]);
+  useCallback(async () => {
+    const rtc = rtcManagerRef.current;
+    if (!rtc?.snapshot.joined || !outputEnabledRef.current) {
+      return;
+    }
+    try {
+      debugLogRef.current("lifecycle", "warn", "recoverGeneration", {
+        inputSource: inputSourceRef.current
+      });
+      const taskUid = createTaskUid();
+      taskUidRef.current = taskUid;
+      prevSeiGateRef.current = null;
+      const size = resolveSessionTargetSize({
+        localVideoSize: localVideoSizeRef.current
+      });
+      const startEvent = createStartRtcRoomEvent({
+        userId: rtc.snapshot.userId ?? void 0,
+        uid: taskUid,
+        sessionUid: taskUid,
+        model: lastStartModelRef.current,
+        size,
+        prompt: lastStartPromptRef.current,
+        refImagePath: lastStartRefImageRef.current
+      });
+      if (remoteContainerRef.current) {
+        rtc.setRemoteVideoContainer(remoteContainerRef.current);
+      }
+      await rtc.sendRoomEvent(startEvent);
+      if (remoteContainerRef.current) {
+        rtc.setRemoteVideoContainer(remoteContainerRef.current);
+      }
+      await rtc.refreshRemoteVideoBinding({ force: true });
+    } catch (error) {
+      reportError(error);
+    }
+  }, [reportError]);
+  useEffect(() => {
+    onRemoteOutputStalledRef.current = (info) => {
+      debugLogRef.current("lifecycle", "warn", "remote output stalled", info);
+    };
+  }, []);
+  const changeModel = useCallback(async () => {
+    return;
+  }, []);
+  const bindLocalView = useCallback((el) => {
+    localContainerRef.current = el;
+    rtcManagerRef.current?.setLocalVideoContainer(el);
+  }, []);
+  const bindRemoteView = useCallback((el) => {
+    remoteContainerRef.current = el;
+    if (!el) {
+      detachRemoteContainer();
+      return;
+    }
+    if (outputEnabledRef.current) {
+      bindRemoteContainer();
+    }
+  }, [bindRemoteContainer, detachRemoteContainer]);
+  const value = useMemo(() => ({
+    snapshot: {
+      sessionUid: sessionUidRef.current,
+      rtc: rtcState,
+      inputSource,
+      isCameraOn,
+      isRecording,
+      isGenerating,
+      isOutputVerifying: !!seiGate.expectedSei && !seiGate.matched,
+      hasResult,
+      outputEnabled,
+      dragEnabled: outputEnabled && isRecording,
+      showOutputVideo: outputEnabled && (hasResult || !!rtcState.remoteVideoUserId),
+      localVideoSize,
+      sessionTargetSize,
+      seiGate
+    },
+    connect,
+    disconnect,
+    openCamera,
+    closeCamera,
+    loadVideoFile,
+    clearInput,
+    uploadImage,
+    setRefImage,
+    start,
+    sendTracks,
+    stop,
+    changeModel,
+    bindLocalView,
+    bindRemoteView
+  }), [
+    rtcState,
+    inputSource,
+    isCameraOn,
+    isRecording,
+    isGenerating,
+    seiGate,
+    hasResult,
+    outputEnabled,
+    localVideoSize,
+    sessionTargetSize,
+    connect,
+    disconnect,
+    openCamera,
+    closeCamera,
+    loadVideoFile,
+    clearInput,
+    uploadImage,
+    setRefImage,
+    start,
+    sendTracks,
+    stop,
+    changeModel,
+    bindLocalView,
+    bindRemoteView
+  ]);
+  return /* @__PURE__ */ jsx(XmaxContext.Provider, { value, children });
+}
+function useXmax() {
+  const ctx = useContext(XmaxContext);
+  if (!ctx) {
+    throw new Error("useXmax must be used within XmaxProvider");
+  }
+  return ctx;
+}
+function DragTrackSurface({
+  enabled,
+  targetSize,
+  onTracks,
+  className,
+  style,
+  fitMode = "cover"
+}) {
+  const containerRef = useRef(null);
+  const controllerRef = useRef(null);
+  const onTracksRef = useRef(onTracks);
+  onTracksRef.current = onTracks;
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    const controller = createDragTrackController(container, {
+      targetSize,
+      fitMode,
+      enabled,
+      onTracks: (tracks) => onTracksRef.current(tracks)
+    });
+    controllerRef.current = controller;
+    return () => {
+      controller.destroy();
+      controllerRef.current = null;
+    };
+  }, []);
+  useEffect(() => {
+    controllerRef.current?.setEnabled(enabled);
+  }, [enabled]);
+  useEffect(() => {
+    controllerRef.current?.setTargetSize(targetSize);
+  }, [targetSize]);
+  useEffect(() => {
+    controllerRef.current?.setFitMode(fitMode);
+  }, [fitMode]);
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, className, style });
+}
+function XmaxView({
+  kind,
+  className,
+  style
+}) {
+  const ref = useRef(null);
+  const { bindLocalView, bindRemoteView, snapshot, sendTracks } = useXmax();
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) {
+      return;
+    }
+    if (kind === "local") {
+      bindLocalView(el);
+      return () => bindLocalView(null);
+    }
+    bindRemoteView(el);
+    return () => bindRemoteView(null);
+  }, [bindLocalView, bindRemoteView, kind]);
+  if (kind === "remote") {
+    const dragTargetSize = snapshot.sessionTargetSize ?? DEFAULT_SESSION_TARGET_SIZE;
+    return /* @__PURE__ */ jsxs("div", { className, style: { position: "relative", ...style }, children: [
+      /* @__PURE__ */ jsx("div", { ref, style: { width: "100%", height: "100%" } }),
+      /* @__PURE__ */ jsx(
+        DragTrackSurface,
+        {
+          enabled: snapshot.dragEnabled,
+          targetSize: dragTargetSize,
+          fitMode: "contain",
+          onTracks: (tracks) => {
+            void sendTracks({ tracks });
+          },
+          className: "absolute inset-0 touch-none",
+          style: { zIndex: 10 }
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { ref, className, style });
+}
+
+export { DragTrackSurface, XmaxProvider, XmaxView, useXmax };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map