@reactor-team/js-sdk 1.0.1

package/dist/index.mjs

@@ -0,0 +1,971 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/core/types.ts
+import { z } from "zod";
+var ApplicationMessageSchema = z.object({
+  type: z.literal("application"),
+  data: z.any()
+  // Can be any JSON-serializable data
+});
+var FPSMessageSchema = z.object({
+  type: z.literal("fps"),
+  data: z.number()
+});
+var GPUMachineReceiveMessageSchema = z.discriminatedUnion("type", [
+  ApplicationMessageSchema,
+  FPSMessageSchema
+]);
+var WelcomeMessageSchema = z.object({
+  type: z.literal("welcome"),
+  data: z.record(z.string(), z.any())
+});
+var GPUMachineAssignmentDataSchema = z.object({
+  livekitWsUrl: z.string(),
+  livekitJwtToken: z.string()
+});
+var GPUMachineAssignmentMessageSchema = z.object({
+  type: z.literal("gpu-machine-assigned"),
+  data: GPUMachineAssignmentDataSchema
+});
+var EchoMessageSchema = z.object({
+  type: z.literal("echo"),
+  data: z.record(z.string(), z.any())
+});
+var WaitingInfoDataSchema = z.object({
+  position: z.number().optional(),
+  estimatedWaitTime: z.number().optional(),
+  averageWaitTime: z.number().optional()
+});
+var WaitingInfoMessageSchema = z.object({
+  type: z.literal("waiting-info"),
+  data: WaitingInfoDataSchema
+});
+var CoordinatorMessageSchema = z.discriminatedUnion("type", [
+  WelcomeMessageSchema,
+  GPUMachineAssignmentMessageSchema,
+  EchoMessageSchema,
+  WaitingInfoMessageSchema
+]);
+var GPUMachineSendMessageSchema = z.discriminatedUnion("type", [
+  ApplicationMessageSchema
+]);
+var SessionSetupMessageSchema = z.object({
+  type: z.literal("sessionSetup"),
+  data: z.object({
+    modelName: z.string(),
+    modelVersion: z.string().default("latest")
+  })
+});
+
+// src/core/CoordinatorClient.ts
+import { z as z2 } from "zod";
+var OptionsSchema = z2.object({
+  wsUrl: z2.string().nonempty(),
+  jwtToken: z2.string().optional(),
+  insecureApiKey: z2.string().optional(),
+  modelName: z2.string(),
+  modelVersion: z2.string().default("latest")
+}).refine((data) => data.jwtToken || data.insecureApiKey, {
+  message: "At least one of jwtToken or insecureApiKey must be provided."
+});
+var CoordinatorClient = class {
+  constructor(options) {
+    this.eventListeners = /* @__PURE__ */ new Map();
+    const validatedOptions = OptionsSchema.parse(options);
+    this.wsUrl = validatedOptions.wsUrl;
+    this.protocols = validatedOptions.jwtToken ? [`jwt-token.${validatedOptions.jwtToken}`] : [`insecure-api-key.${validatedOptions.insecureApiKey}`];
+    this.modelName = validatedOptions.modelName;
+    this.modelVersion = validatedOptions.modelVersion;
+  }
+  // Event Emitter API
+  on(event, handler) {
+    if (!this.eventListeners.has(event)) {
+      this.eventListeners.set(event, /* @__PURE__ */ new Set());
+    }
+    this.eventListeners.get(event).add(handler);
+  }
+  off(event, handler) {
+    var _a;
+    (_a = this.eventListeners.get(event)) == null ? void 0 : _a.delete(handler);
+  }
+  emit(event, ...args) {
+    var _a;
+    (_a = this.eventListeners.get(event)) == null ? void 0 : _a.forEach((handler) => handler(...args));
+  }
+  sendMessage(message) {
+    var _a;
+    try {
+      const messageStr = typeof message === "string" ? message : JSON.stringify(message);
+      (_a = this.websocket) == null ? void 0 : _a.send(messageStr);
+    } catch (error) {
+      console.error("[CoordinatorClient] Failed to send message:", error);
+      this.emit("statusChanged", "error");
+    }
+  }
+  connect() {
+    return __async(this, null, function* () {
+      console.debug("[CoordinatorClient] Connecting to", this.wsUrl);
+      this.websocket = new WebSocket(this.wsUrl, this.protocols);
+      this.websocket.onopen = () => {
+        console.debug("[CoordinatorClient] WebSocket opened");
+        this.emit("statusChanged", "connected");
+      };
+      this.websocket.onmessage = (event) => {
+        try {
+          let parsedData;
+          if (typeof event.data === "string") {
+            parsedData = JSON.parse(event.data);
+          } else {
+            parsedData = event.data;
+          }
+          console.debug(
+            "[CoordinatorClient] Received message from coordinator:",
+            parsedData
+          );
+          const validatedData = CoordinatorMessageSchema.parse(parsedData);
+          this.emit(validatedData.type, validatedData.data);
+        } catch (error) {
+          console.error(
+            "[CoordinatorClient] Failed to parse WebSocket message from coordinator:",
+            error,
+            "message",
+            event.data
+          );
+          this.emit("statusChanged", "error");
+        }
+      };
+      this.websocket.onclose = (event) => {
+        console.debug("[CoordinatorClient] WebSocket closed", event);
+        this.websocket = void 0;
+        this.emit("statusChanged", "disconnected");
+      };
+      this.websocket.onerror = (error) => {
+        console.error("[CoordinatorClient] WebSocket error:", error);
+        this.websocket = void 0;
+        this.emit("statusChanged", "error");
+      };
+      yield new Promise((resolve, reject) => {
+        var _a, _b;
+        const onOpen = () => {
+          var _a2;
+          (_a2 = this.websocket) == null ? void 0 : _a2.removeEventListener("error", onError);
+          resolve();
+        };
+        const onError = (error) => {
+          var _a2;
+          (_a2 = this.websocket) == null ? void 0 : _a2.removeEventListener("open", onOpen);
+          reject(error);
+        };
+        (_a = this.websocket) == null ? void 0 : _a.addEventListener("open", onOpen);
+        (_b = this.websocket) == null ? void 0 : _b.addEventListener("error", onError);
+      });
+      console.log("[CoordinatorClient] WebSocket connected");
+      this.sendMessage({
+        type: "sessionSetup",
+        data: {
+          modelName: this.modelName,
+          modelVersion: this.modelVersion
+        }
+      });
+      console.debug("[CoordinatorClient] Setup session message sent");
+    });
+  }
+  /**
+   * Closes the WebSocket connection if it exists.
+   * This will trigger the onclose event handler.
+   */
+  disconnect() {
+    if (this.websocket) {
+      console.debug("[CoordinatorClient] Closing WebSocket connection");
+      this.websocket.close();
+      this.websocket = void 0;
+    }
+  }
+};
+
+// src/core/GPUMachineClient.ts
+import { Room, RoomEvent, Track } from "livekit-client";
+var GPUMachineClient = class {
+  constructor(token, liveKitUrl) {
+    this.eventListeners = /* @__PURE__ */ new Map();
+    this.token = token;
+    this.liveKitUrl = liveKitUrl;
+  }
+  // Event Emitter API
+  on(event, handler) {
+    if (!this.eventListeners.has(event)) {
+      this.eventListeners.set(event, /* @__PURE__ */ new Set());
+    }
+    this.eventListeners.get(event).add(handler);
+  }
+  off(event, handler) {
+    var _a;
+    (_a = this.eventListeners.get(event)) == null ? void 0 : _a.delete(handler);
+  }
+  emit(event, ...args) {
+    var _a;
+    (_a = this.eventListeners.get(event)) == null ? void 0 : _a.forEach((handler) => handler(...args));
+  }
+  sendMessage(message) {
+    try {
+      if (this.roomInstance) {
+        const messageStr = JSON.stringify(message);
+        this.roomInstance.localParticipant.sendText(messageStr, {
+          topic: "application"
+        });
+      } else {
+        console.warn(
+          "[GPUMachineClient] Cannot send message - not connected to room"
+        );
+      }
+    } catch (error) {
+      console.error("[GPUMachineClient] Failed to send message:", error);
+      this.emit("statusChanged", "error");
+    }
+  }
+  connect() {
+    return __async(this, null, function* () {
+      this.roomInstance = new Room({
+        adaptiveStream: true,
+        dynacast: true
+      });
+      this.roomInstance.on(RoomEvent.Connected, () => {
+        console.debug("[GPUMachineClient] Connected to room");
+        this.emit("statusChanged", "connected");
+      });
+      this.roomInstance.on(RoomEvent.Disconnected, () => {
+        console.debug("[GPUMachineClient] Disconnected from room");
+        this.emit("statusChanged", "disconnected");
+      });
+      this.roomInstance.on(
+        RoomEvent.TrackSubscribed,
+        (track, _publication, participant) => {
+          console.debug(
+            "[GPUMachineClient] Track subscribed:",
+            track.kind,
+            participant.identity
+          );
+          if (track.kind === Track.Kind.Video) {
+            const videoTrack = track;
+            this.emit("streamChanged", videoTrack);
+          }
+        }
+      );
+      this.roomInstance.on(
+        RoomEvent.TrackUnsubscribed,
+        (track, _publication, participant) => {
+          console.debug(
+            "[GPUMachineClient] Track unsubscribed:",
+            track.kind,
+            participant.identity
+          );
+          if (track.kind === Track.Kind.Video) {
+            this.emit("streamChanged", null);
+          }
+        }
+      );
+      this.roomInstance.registerTextStreamHandler(
+        "application",
+        (reader, participant) => __async(this, null, function* () {
+          const text = yield reader.readAll();
+          console.log("[GPUMachineClient] Received message:", text);
+          try {
+            const parsedData = JSON.parse(text);
+            const validatedMessage = GPUMachineReceiveMessageSchema.parse(parsedData);
+            if (validatedMessage.type === "fps") {
+              this.machineFPS = validatedMessage.data;
+            }
+            this.emit(validatedMessage.type, validatedMessage.data);
+          } catch (error) {
+            console.error(
+              "[GPUMachineClient] Failed to parse/validate message:",
+              error
+            );
+            this.emit("statusChanged", "error");
+          }
+        })
+      );
+      yield this.roomInstance.connect(this.liveKitUrl, this.token);
+      console.log("[GPUMachineClient] Room connected");
+    });
+  }
+  /**
+   * Closes the LiveKit connection if it exists.
+   * This will trigger the onclose event handler.
+   */
+  disconnect() {
+    return __async(this, null, function* () {
+      if (this.roomInstance) {
+        console.debug("[GPUMachineClient] Closing LiveKit connection");
+        yield this.roomInstance.disconnect();
+        this.roomInstance = void 0;
+      }
+      this.machineFPS = void 0;
+    });
+  }
+  /**
+   * Returns the current fps rate of the machine.
+   * @returns The current fps rate of the machine.
+   */
+  getFPS() {
+    return this.machineFPS;
+  }
+  /**
+   * Returns the current video stream from the GPU machine.
+   * @returns The current video stream or undefined if not available.
+   */
+  getVideoStream() {
+    return this.videoStream;
+  }
+};
+
+// src/core/Reactor.ts
+import { z as z3 } from "zod";
+var OptionsSchema2 = z3.object({
+  directConnection: z3.object({
+    livekitJwtToken: z3.string(),
+    livekitWsUrl: z3.string()
+  }).optional(),
+  insecureApiKey: z3.string().optional(),
+  jwtToken: z3.string().optional(),
+  coordinatorUrl: z3.string().optional(),
+  modelName: z3.string()
+}).refine(
+  (data) => data.directConnection || data.insecureApiKey || data.jwtToken,
+  {
+    message: "At least one of directConnection, insecureApiKey, or jwtToken must be provided."
+  }
+);
+var Reactor = class {
+  constructor(options) {
+    //client for the machine instance
+    this.status = "disconnected";
+    // Generic event map
+    this.eventListeners = /* @__PURE__ */ new Map();
+    const validatedOptions = OptionsSchema2.parse(options);
+    this.coordinatorUrl = validatedOptions.coordinatorUrl || "ws://localhost:8080/ws";
+    this.jwtToken = validatedOptions.jwtToken;
+    this.insecureApiKey = validatedOptions.insecureApiKey;
+    this.directConnection = validatedOptions.directConnection;
+    this.modelName = validatedOptions.modelName;
+    this.modelVersion = "1.0.0";
+  }
+  // Event Emitter API
+  on(event, handler) {
+    if (!this.eventListeners.has(event)) {
+      this.eventListeners.set(event, /* @__PURE__ */ new Set());
+    }
+    this.eventListeners.get(event).add(handler);
+  }
+  off(event, handler) {
+    var _a;
+    (_a = this.eventListeners.get(event)) == null ? void 0 : _a.delete(handler);
+  }
+  emit(event, ...args) {
+    var _a;
+    (_a = this.eventListeners.get(event)) == null ? void 0 : _a.forEach((handler) => handler(...args));
+  }
+  /**
+   * Public method to send a message to the machine.
+   * Automatically wraps the message in an application message.
+   * @param message The message to send to the machine.
+   * @throws Error if not in ready state
+   */
+  sendMessage(message) {
+    var _a;
+    if (process.env.NODE_ENV !== "development" && this.status !== "ready") {
+      const errorMessage = `Cannot send message, status is ${this.status}`;
+      console.error("[Reactor] Not ready, cannot send message");
+      throw new Error(errorMessage);
+    }
+    try {
+      const applicationMessage = {
+        type: "application",
+        data: message
+      };
+      (_a = this.machineClient) == null ? void 0 : _a.sendMessage(applicationMessage);
+    } catch (error) {
+      console.error("[Reactor] Failed to send message:", error);
+      this.createError(
+        "MESSAGE_SEND_FAILED",
+        `Failed to send message: ${error}`,
+        "gpu",
+        true
+      );
+    }
+  }
+  /**
+   * Connects to the machine via LiveKit and waits for the gpu machine to be ready.
+   * Once the machine is ready, the Reactor will establish the LiveKit connection.
+   * @param livekitJwtToken The JWT token for LiveKit authentication
+   * @param livekitWsUrl The WebSocket URL for LiveKit connection
+   */
+  connectToGPUMachine(livekitJwtToken, livekitWsUrl) {
+    return __async(this, null, function* () {
+      console.debug("[Reactor] Connecting to machine room...");
+      try {
+        this.machineClient = new GPUMachineClient(livekitJwtToken, livekitWsUrl);
+        this.machineClient.on("application", (message) => {
+          this.emit("newMessage", message);
+        });
+        this.machineClient.on(
+          "statusChanged",
+          (status) => {
+            switch (status) {
+              case "connected":
+                this.setStatus("ready");
+                break;
+              case "disconnected":
+                this.disconnect();
+                break;
+              case "error":
+                this.createError(
+                  "GPU_CONNECTION_ERROR",
+                  "GPU machine connection failed",
+                  "gpu",
+                  true
+                );
+                this.disconnect();
+                break;
+            }
+          }
+        );
+        this.machineClient.on("fps", (fps) => {
+          this.emit("fps", fps);
+        });
+        this.machineClient.on("streamChanged", (videoTrack) => {
+          this.emit("streamChanged", videoTrack);
+        });
+        console.debug("[Reactor] About to connect to machine");
+        yield this.machineClient.connect();
+      } catch (error) {
+        throw error;
+      }
+    });
+  }
+  /**
+   * Connects to the coordinator and waits for a GPU to be assigned.
+   * Once a GPU is assigned, the Reactor will connect to the gpu machine via LiveKit.
+   */
+  connect() {
+    return __async(this, null, function* () {
+      console.debug("[Reactor] Connecting, status:", this.status);
+      if (this.status !== "disconnected")
+        throw new Error("Already connected or connecting");
+      if (this.directConnection) {
+        return this.connectToGPUMachine(
+          this.directConnection.livekitJwtToken,
+          this.directConnection.livekitWsUrl
+        );
+      }
+      this.setStatus("connecting");
+      try {
+        console.debug(
+          "[Reactor] Connecting to coordinator with authenticated URL"
+        );
+        this.coordinatorClient = new CoordinatorClient({
+          wsUrl: this.coordinatorUrl,
+          jwtToken: this.jwtToken,
+          insecureApiKey: this.insecureApiKey,
+          modelName: this.modelName,
+          modelVersion: this.modelVersion
+        });
+        this.coordinatorClient.on(
+          "gpu-machine-assigned",
+          (assignmentData) => __async(this, null, function* () {
+            console.debug(
+              "[Reactor] GPU machine assigned by coordinator:",
+              assignmentData
+            );
+            try {
+              yield this.connectToGPUMachine(
+                assignmentData.livekitJwtToken,
+                assignmentData.livekitWsUrl
+              );
+            } catch (error) {
+              console.error("[Reactor] Failed to connect to GPU machine:", error);
+              this.createError(
+                "GPU_CONNECTION_FAILED",
+                `Failed to connect to GPU machine: ${error}`,
+                "gpu",
+                true
+              );
+              this.disconnect();
+            }
+          })
+        );
+        this.coordinatorClient.on(
+          "waiting-info",
+          (waitingData) => {
+            console.debug("[Reactor] Waiting info update received:", waitingData);
+            this.setWaitingInfo(__spreadValues(__spreadValues({}, this.waitingInfo), waitingData));
+          }
+        );
+        this.coordinatorClient.on(
+          "statusChanged",
+          (newStatus) => {
+            switch (newStatus) {
+              case "connected":
+                this.setStatus("waiting");
+                this.setWaitingInfo({
+                  position: void 0,
+                  estimatedWaitTime: void 0,
+                  averageWaitTime: void 0
+                });
+                break;
+              case "disconnected":
+                this.disconnect();
+                break;
+              case "error":
+                this.createError(
+                  "COORDINATOR_CONNECTION_ERROR",
+                  "Coordinator connection failed",
+                  "coordinator",
+                  true
+                );
+                this.disconnect();
+                break;
+            }
+          }
+        );
+        yield this.coordinatorClient.connect();
+      } catch (error) {
+        console.error("[Reactor] Authentication failed:", error);
+        this.createError(
+          "AUTHENTICATION_FAILED",
+          `Authentication failed: ${error}`,
+          "coordinator",
+          true
+        );
+        this.setStatus("disconnected");
+        throw error;
+      }
+    });
+  }
+  /**
+   * Disconnects from the coordinator and the gpu machine.
+   * Ensures cleanup completes even if individual disconnections fail.
+   */
+  disconnect() {
+    return __async(this, null, function* () {
+      if (this.status === "disconnected") return;
+      if (this.coordinatorClient) {
+        try {
+          this.coordinatorClient.disconnect();
+        } catch (error) {
+          console.error("[Reactor] Error disconnecting from coordinator:", error);
+        }
+        this.coordinatorClient = void 0;
+      }
+      if (this.machineClient) {
+        try {
+          yield this.machineClient.disconnect();
+        } catch (error) {
+          console.error("[Reactor] Error disconnecting from GPU machine:", error);
+        }
+        this.machineClient = void 0;
+      }
+      this.setStatus("disconnected");
+      this.waitingInfo = void 0;
+    });
+  }
+  setStatus(newStatus) {
+    console.debug("[Reactor] Setting status:", newStatus, "from", this.status);
+    if (this.status !== newStatus) {
+      this.status = newStatus;
+      this.emit("statusChanged", newStatus);
+    }
+  }
+  setWaitingInfo(newWaitingInfo) {
+    console.debug(
+      "[Reactor] Setting waiting info:",
+      newWaitingInfo,
+      "from",
+      this.waitingInfo
+    );
+    if (this.waitingInfo !== newWaitingInfo) {
+      this.waitingInfo = newWaitingInfo;
+      this.emit("waitingInfoChanged", newWaitingInfo);
+    }
+  }
+  getStatus() {
+    return this.status;
+  }
+  /**
+   * Get the current state including status, error, and waiting info
+   */
+  getState() {
+    return {
+      status: this.status,
+      waitingInfo: this.waitingInfo,
+      lastError: this.lastError
+    };
+  }
+  /**
+   * Get waiting information when status is 'waiting'
+   */
+  getWaitingInfo() {
+    return this.waitingInfo;
+  }
+  /**
+   * Get the last error that occurred
+   */
+  getLastError() {
+    return this.lastError;
+  }
+  /**
+   * Create and store an error
+   */
+  createError(code, message, component, recoverable, retryAfter) {
+    this.lastError = {
+      code,
+      message,
+      timestamp: Date.now(),
+      recoverable,
+      component,
+      retryAfter
+    };
+    this.emit("error", this.lastError);
+  }
+};
+
+// src/react/ReactorProvider.tsx
+import { useContext, useEffect, useRef } from "react";
+
+// src/core/store.ts
+import { create } from "zustand/react";
+import { createContext } from "react";
+var ReactorContext = createContext(
+  void 0
+);
+var defaultInitState = {
+  status: "disconnected",
+  videoTrack: null,
+  fps: void 0,
+  waitingInfo: void 0,
+  lastError: void 0
+};
+var initReactorStore = (props) => {
+  return __spreadValues(__spreadValues({}, defaultInitState), props);
+};
+var createReactorStore = (initProps, publicState = defaultInitState) => {
+  console.debug("[ReactorStore] Creating store", {
+    coordinatorUrl: initProps.coordinatorUrl,
+    initialState: publicState
+  });
+  return create()((set, get) => {
+    const reactor = new Reactor(initProps);
+    console.debug("[ReactorStore] Setting up event listeners");
+    reactor.on("statusChanged", (newStatus) => {
+      console.debug("[ReactorStore] Status changed", {
+        oldStatus: get().status,
+        newStatus
+      });
+      set({ status: newStatus });
+    });
+    reactor.on("waitingInfoChanged", (newWaitingInfo) => {
+      console.debug("[ReactorStore] Waiting info changed", {
+        oldWaitingInfo: get().waitingInfo,
+        newWaitingInfo
+      });
+      set({ waitingInfo: newWaitingInfo });
+    });
+    reactor.on("streamChanged", (videoTrack) => {
+      console.debug("[ReactorStore] Stream changed", {
+        hasVideoTrack: !!videoTrack,
+        videoTrackKind: videoTrack == null ? void 0 : videoTrack.kind,
+        videoTrackSid: videoTrack == null ? void 0 : videoTrack.sid
+      });
+      set({ videoTrack });
+    });
+    reactor.on("fps", (fps) => {
+      console.debug("[ReactorStore] FPS updated", { fps });
+      set({ fps });
+    });
+    reactor.on("error", (error) => {
+      console.debug("[ReactorStore] Error occurred", error);
+      set({ lastError: error });
+    });
+    return __spreadProps(__spreadValues({}, publicState), {
+      internal: { reactor },
+      // actions
+      onMessage: (handler) => {
+        console.debug("[ReactorStore] Registering message handler");
+        get().internal.reactor.on("newMessage", handler);
+        return () => {
+          console.debug("[ReactorStore] Cleaning up message handler");
+          get().internal.reactor.off("newMessage", handler);
+        };
+      },
+      sendMessage: (mess) => {
+        console.debug("[ReactorStore] Sending message", { message: mess });
+        try {
+          get().internal.reactor.sendMessage(mess);
+          console.debug("[ReactorStore] Message sent successfully");
+        } catch (error) {
+          console.error("[ReactorStore] Failed to send message:", error);
+          throw error;
+        }
+      },
+      connect: () => __async(null, null, function* () {
+        console.debug("[ReactorStore] Connect called");
+        try {
+          yield get().internal.reactor.connect();
+          console.debug("[ReactorStore] Connect completed successfully");
+        } catch (error) {
+          console.error("[ReactorStore] Connect failed:", error);
+          throw error;
+        }
+      }),
+      disconnect: () => __async(null, null, function* () {
+        console.debug("[ReactorStore] Disconnect called", {
+          currentStatus: get().status
+        });
+        try {
+          yield get().internal.reactor.disconnect();
+          console.debug("[ReactorStore] Disconnect completed successfully");
+        } catch (error) {
+          console.error("[ReactorStore] Disconnect failed:", error);
+          throw error;
+        }
+      })
+    });
+  });
+};
+
+// src/react/ReactorProvider.tsx
+import { useStore } from "zustand";
+import { jsx } from "react/jsx-runtime";
+function ReactorProvider(_a) {
+  var _b = _a, {
+    children,
+    autoConnect = true
+  } = _b, props = __objRest(_b, [
+    "children",
+    "autoConnect"
+  ]);
+  const storeRef = useRef(void 0);
+  const firstRender = useRef(true);
+  function attemptAutoConnect() {
+    var _a2, _b2;
+    const status = (_a2 = storeRef.current) == null ? void 0 : _a2.getState().status;
+    if (autoConnect && status === "disconnected") {
+      console.debug("[ReactorProvider] Starting autoconnect...");
+      (_b2 = storeRef.current) == null ? void 0 : _b2.getState().connect().then(() => {
+        console.debug("[ReactorProvider] Autoconnect successful");
+      }).catch((error) => {
+        console.error("[ReactorProvider] Failed to autoconnect:", error);
+      });
+    }
+  }
+  if (storeRef.current === void 0) {
+    console.debug("[ReactorProvider] Creating new reactor store");
+    storeRef.current = createReactorStore(initReactorStore(props));
+    console.debug("[ReactorProvider] Reactor store created successfully");
+    attemptAutoConnect();
+  }
+  useEffect(() => {
+    if (firstRender.current) {
+      firstRender.current = false;
+      return;
+    }
+    console.debug("[ReactorProvider] Updating reactor store");
+    storeRef.current = createReactorStore(initReactorStore(props));
+    console.debug("[ReactorProvider] Reactor store updated successfully");
+    attemptAutoConnect();
+  }, [props, autoConnect]);
+  return /* @__PURE__ */ jsx(ReactorContext.Provider, { value: storeRef.current, children });
+}
+function useReactorStore(selector) {
+  const ctx = useContext(ReactorContext);
+  if (!ctx) {
+    throw new Error("useReactor must be used within a ReactorProvider");
+  }
+  return useStore(ctx, selector);
+}
+
+// src/react/hooks.ts
+import { useShallow } from "zustand/shallow";
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+function useReactor(selector) {
+  return useReactorStore(useShallow(selector));
+}
+function useReactorMessage(handler) {
+  const reactor = useReactor((state) => state.internal.reactor);
+  const handlerRef = useRef2(handler);
+  useEffect2(() => {
+    handlerRef.current = handler;
+  }, [handler]);
+  useEffect2(() => {
+    console.debug("[useReactorMessage] Setting up message subscription");
+    const stableHandler = (message) => {
+      console.debug("[useReactorMessage] Message received", { message });
+      handlerRef.current(message);
+    };
+    reactor.on("newMessage", stableHandler);
+    console.debug("[useReactorMessage] Message handler registered");
+    return () => {
+      console.debug("[useReactorMessage] Cleaning up message subscription");
+      reactor.off("newMessage", stableHandler);
+    };
+  }, [reactor]);
+}
+
+// src/react/ReactorView.tsx
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function ReactorView({
+  width,
+  height,
+  className,
+  style
+}) {
+  const { videoTrack, status } = useReactor((state) => ({
+    videoTrack: state.videoTrack,
+    status: state.status
+  }));
+  const videoRef = useRef3(null);
+  console.debug("[ReactorView] Render", {
+    hasVideoTrack: !!videoTrack,
+    status,
+    hasVideoElement: !!videoRef.current
+  });
+  useEffect3(() => {
+    console.debug("[ReactorView] Video track effect triggered", {
+      hasVideoElement: !!videoRef.current,
+      hasVideoTrack: !!videoTrack,
+      videoTrackKind: videoTrack == null ? void 0 : videoTrack.kind
+    });
+    if (videoRef.current && videoTrack) {
+      console.debug("[ReactorView] Attaching video track to element");
+      try {
+        videoTrack.attach(videoRef.current);
+        console.debug("[ReactorView] Video track attached successfully");
+      } catch (error) {
+        console.error("[ReactorView] Failed to attach video track:", error);
+      }
+      return () => {
+        console.debug("[ReactorView] Detaching video track from element");
+        if (videoRef.current) {
+          try {
+            videoTrack.detach(videoRef.current);
+            console.debug("[ReactorView] Video track detached successfully");
+          } catch (error) {
+            console.error("[ReactorView] Failed to detach video track:", error);
+          }
+        }
+      };
+    } else {
+      console.debug("[ReactorView] No video track or element to attach");
+    }
+  }, [videoTrack]);
+  const showPlaceholder = !videoTrack;
+  console.debug("[ReactorView] Placeholder state", { showPlaceholder, status });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: __spreadValues(__spreadValues(__spreadValues({
+        position: "relative",
+        background: "#000"
+      }, width && { width }), height && { height }), style),
+      className,
+      children: [
+        /* @__PURE__ */ jsx2(
+          "video",
+          {
+            ref: videoRef,
+            style: {
+              width: "100%",
+              height: "100%",
+              objectFit: "contain",
+              display: showPlaceholder ? "none" : "block"
+            },
+            muted: true,
+            playsInline: true
+          }
+        ),
+        showPlaceholder && /* @__PURE__ */ jsx2(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "100%",
+              color: "#fff",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: "16px",
+              fontFamily: "monospace",
+              textAlign: "center",
+              padding: "20px",
+              boxSizing: "border-box"
+            },
+            children: status
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Reactor,
+  ReactorProvider,
+  ReactorView,
+  useReactor,
+  useReactorMessage,
+  useReactorStore
+};
+//# sourceMappingURL=index.mjs.map