@reactor-team/js-sdk 1.0.16 → 1.0.17

package/dist/index.d.mts

@@ -169,6 +169,12 @@ interface ReactorViewProps {
 }
 declare function ReactorView({ width, height, className, style, videoObjectFit, }: ReactorViewProps): react_jsx_runtime.JSX.Element;
 
+interface ReactorControllerProps {
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare function ReactorController({ className, style, }: ReactorControllerProps): react_jsx_runtime.JSX.Element;
+
 interface Props {
     className?: string;
     style?: React.CSSProperties;
@@ -192,4 +198,4 @@ declare function useReactor<T>(selector: (state: ReactorStore) => T): T;
  */
 declare function useReactorMessage(handler: (message: any) => void): void;
 
-export { type Options, Reactor, type ReactorError, type ReactorEvent, ReactorProvider, type ReactorSessionExpiration, type ReactorState$1 as ReactorState, type ReactorStatus, ReactorView, type ReactorViewProps, type ReactorWaitingInfo, WebcamStream, useReactor, useReactorMessage, useReactorStore };
+export { type Options, Reactor, ReactorController, type ReactorControllerProps, type ReactorError, type ReactorEvent, ReactorProvider, type ReactorSessionExpiration, type ReactorState$1 as ReactorState, type ReactorStatus, ReactorView, type ReactorViewProps, type ReactorWaitingInfo, WebcamStream, useReactor, useReactorMessage, useReactorStore };

package/dist/index.d.ts

@@ -169,6 +169,12 @@ interface ReactorViewProps {
 }
 declare function ReactorView({ width, height, className, style, videoObjectFit, }: ReactorViewProps): react_jsx_runtime.JSX.Element;
 
+interface ReactorControllerProps {
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare function ReactorController({ className, style, }: ReactorControllerProps): react_jsx_runtime.JSX.Element;
+
 interface Props {
     className?: string;
     style?: React.CSSProperties;
@@ -192,4 +198,4 @@ declare function useReactor<T>(selector: (state: ReactorStore) => T): T;
  */
 declare function useReactorMessage(handler: (message: any) => void): void;
 
-export { type Options, Reactor, type ReactorError, type ReactorEvent, ReactorProvider, type ReactorSessionExpiration, type ReactorState$1 as ReactorState, type ReactorStatus, ReactorView, type ReactorViewProps, type ReactorWaitingInfo, WebcamStream, useReactor, useReactorMessage, useReactorStore };
+export { type Options, Reactor, ReactorController, type ReactorControllerProps, type ReactorError, type ReactorEvent, ReactorProvider, type ReactorSessionExpiration, type ReactorState$1 as ReactorState, type ReactorStatus, ReactorView, type ReactorViewProps, type ReactorWaitingInfo, WebcamStream, useReactor, useReactorMessage, useReactorStore };

package/dist/index.js

@@ -1,10 +1,12 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
 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;
@@ -44,6 +46,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
@@ -70,6 +80,7 @@ var __async = (__this, __arguments, generator) => {
 var index_exports = {};
 __export(index_exports, {
   Reactor: () => Reactor,
+  ReactorController: () => ReactorController,
   ReactorProvider: () => ReactorProvider,
   ReactorView: () => ReactorView,
   WebcamStream: () => WebcamStream,
@@ -1321,9 +1332,454 @@ function ReactorView({
   );
 }
 
-// src/react/WebcamStream.tsx
-var import_react6 = require("react");
+// src/react/ReactorController.tsx
+var import_react6 = __toESM(require("react"));
 var import_jsx_runtime3 = require("react/jsx-runtime");
+function ReactorController({
+  className,
+  style
+}) {
+  const { sendMessage, status } = useReactor((state) => ({
+    sendMessage: state.sendMessage,
+    status: state.status
+  }));
+  const [commands, setCommands] = (0, import_react6.useState)({});
+  const [formValues, setFormValues] = (0, import_react6.useState)({});
+  const [expandedCommands, setExpandedCommands] = (0, import_react6.useState)({});
+  import_react6.default.useEffect(() => {
+    if (status === "disconnected") {
+      setCommands({});
+      setFormValues({});
+      setExpandedCommands({});
+    }
+  }, [status]);
+  import_react6.default.useEffect(() => {
+    if (status === "ready") {
+      sendMessage({
+        type: "requestCapabilities",
+        data: {}
+      });
+    }
+  }, [status, sendMessage]);
+  useReactorMessage((message) => {
+    if (message && typeof message === "object" && "commands" in message) {
+      const commandsMessage = message;
+      setCommands(commandsMessage.commands);
+      const initialValues = {};
+      const initialExpanded = {};
+      Object.entries(commandsMessage.commands).forEach(
+        ([commandName, commandSchema]) => {
+          initialValues[commandName] = {};
+          initialExpanded[commandName] = false;
+          Object.entries(commandSchema.schema).forEach(
+            ([paramName, paramSchema]) => {
+              var _a, _b;
+              if (paramSchema.type === "number") {
+                initialValues[commandName][paramName] = (_a = paramSchema.minimum) != null ? _a : 0;
+              } else if (paramSchema.type === "string") {
+                initialValues[commandName][paramName] = "";
+              } else if (paramSchema.type === "boolean") {
+                initialValues[commandName][paramName] = false;
+              } else if (paramSchema.type === "integer") {
+                initialValues[commandName][paramName] = (_b = paramSchema.minimum) != null ? _b : 0;
+              }
+            }
+          );
+        }
+      );
+      setFormValues(initialValues);
+      setExpandedCommands(initialExpanded);
+    }
+  });
+  const handleInputChange = (0, import_react6.useCallback)(
+    (commandName, paramName, value) => {
+      setFormValues((prev) => __spreadProps(__spreadValues({}, prev), {
+        [commandName]: __spreadProps(__spreadValues({}, prev[commandName]), {
+          [paramName]: value
+        })
+      }));
+    },
+    []
+  );
+  const toggleCommandExpanded = (0, import_react6.useCallback)((commandName) => {
+    setExpandedCommands((prev) => __spreadProps(__spreadValues({}, prev), {
+      [commandName]: !prev[commandName]
+    }));
+  }, []);
+  const handleCommandSubmit = (0, import_react6.useCallback)(
+    (commandName) => __async(null, null, function* () {
+      const commandSchema = commands[commandName];
+      const formData = formValues[commandName] || {};
+      const data = {};
+      Object.keys(commandSchema.schema).forEach((paramName) => {
+        var _a, _b;
+        const paramSchema = commandSchema.schema[paramName];
+        let value = formData[paramName];
+        if (paramSchema.type === "number" && typeof value === "string") {
+          value = parseFloat(value) || 0;
+        } else if (paramSchema.type === "integer" && typeof value === "string") {
+          value = parseInt(value) || 0;
+        } else if (paramSchema.type === "boolean" && typeof value !== "boolean") {
+          value = Boolean(value);
+        }
+        if (value !== void 0 && value !== "" && value !== null) {
+          data[paramName] = value;
+        } else if (paramSchema.required) {
+          if (paramSchema.type === "number") {
+            data[paramName] = (_a = paramSchema.minimum) != null ? _a : 0;
+          } else if (paramSchema.type === "integer") {
+            data[paramName] = (_b = paramSchema.minimum) != null ? _b : 0;
+          } else if (paramSchema.type === "string") {
+            data[paramName] = "";
+          } else if (paramSchema.type === "boolean") {
+            data[paramName] = false;
+          }
+        }
+      });
+      console.log(`Executing command: ${commandName}`, data);
+      yield sendMessage({
+        type: commandName,
+        data
+      });
+    }),
+    [formValues, sendMessage, commands]
+  );
+  const renderInput = (commandName, paramName, paramSchema) => {
+    var _a, _b;
+    const value = (_b = (_a = formValues[commandName]) == null ? void 0 : _a[paramName]) != null ? _b : "";
+    if (paramSchema.type === "number" || paramSchema.type === "integer") {
+      const isInteger = paramSchema.type === "integer";
+      const step = isInteger ? 1 : 0.1;
+      const parseValue = isInteger ? parseInt : parseFloat;
+      if (typeof paramSchema.minimum === "number" && typeof paramSchema.maximum === "number") {
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "8px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "label",
+            {
+              style: { fontSize: "12px", color: "#666", display: "block" },
+              children: [
+                paramName,
+                " (",
+                paramSchema.minimum,
+                " - ",
+                paramSchema.maximum,
+                ")",
+                paramSchema.description && ` - ${paramSchema.description}`,
+                paramSchema.required && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: "red" }, children: " *" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "input",
+            {
+              type: "range",
+              min: paramSchema.minimum,
+              max: paramSchema.maximum,
+              step,
+              value,
+              onChange: (e) => {
+                const newValue = parseValue(e.target.value) || 0;
+                handleInputChange(commandName, paramName, newValue);
+                handleCommandSubmit(commandName);
+              },
+              style: { width: "100%", marginBottom: "4px" }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { fontSize: "11px", color: "#888" }, children: [
+            "Value: ",
+            value
+          ] })
+        ] });
+      } else {
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "8px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "label",
+            {
+              style: { fontSize: "12px", color: "#666", display: "block" },
+              children: [
+                paramName,
+                paramSchema.description && ` - ${paramSchema.description}`,
+                paramSchema.required && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: "red" }, children: " *" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "input",
+            {
+              type: "number",
+              value,
+              min: paramSchema.minimum,
+              max: paramSchema.maximum,
+              step,
+              inputMode: "numeric",
+              onChange: (e) => {
+                const val = e.target.value;
+                if (val === "" || val === "-") {
+                  handleInputChange(commandName, paramName, val);
+                } else {
+                  const parsed = parseValue(val);
+                  if (!isNaN(parsed)) {
+                    handleInputChange(commandName, paramName, parsed);
+                  }
+                }
+              },
+              onBlur: (e) => {
+                const val = e.target.value;
+                if (val === "" || val === "-") {
+                  handleInputChange(commandName, paramName, 0);
+                }
+              },
+              style: {
+                width: "100%",
+                padding: "4px",
+                fontSize: "12px",
+                border: "1px solid #ccc",
+                borderRadius: "2px"
+              }
+            }
+          )
+        ] });
+      }
+    } else if (paramSchema.type === "string") {
+      if (paramSchema.enum) {
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "8px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "label",
+            {
+              style: { fontSize: "12px", color: "#666", display: "block" },
+              children: [
+                paramName,
+                paramSchema.description && ` - ${paramSchema.description}`,
+                paramSchema.required && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: "red" }, children: " *" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "select",
+            {
+              value,
+              onChange: (e) => handleInputChange(commandName, paramName, e.target.value),
+              style: {
+                width: "100%",
+                padding: "4px",
+                fontSize: "12px",
+                border: "1px solid #ccc",
+                borderRadius: "2px"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "", children: "Select..." }),
+                paramSchema.enum.map((option) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: option, children: option }, option))
+              ]
+            }
+          )
+        ] });
+      } else {
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "8px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "label",
+            {
+              style: { fontSize: "12px", color: "#666", display: "block" },
+              children: [
+                paramName,
+                paramSchema.description && ` - ${paramSchema.description}`,
+                paramSchema.required && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: "red" }, children: " *" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "input",
+            {
+              type: "text",
+              value,
+              onChange: (e) => handleInputChange(commandName, paramName, e.target.value),
+              style: {
+                width: "100%",
+                padding: "4px",
+                fontSize: "12px",
+                border: "1px solid #ccc",
+                borderRadius: "2px"
+              }
+            }
+          )
+        ] });
+      }
+    } else if (paramSchema.type === "boolean") {
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { marginBottom: "8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "label",
+        {
+          style: {
+            fontSize: "12px",
+            color: "#666",
+            display: "flex",
+            alignItems: "center"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "input",
+              {
+                type: "checkbox",
+                checked: value,
+                onChange: (e) => handleInputChange(commandName, paramName, e.target.checked),
+                style: { marginRight: "6px" }
+              }
+            ),
+            paramName,
+            paramSchema.description && ` - ${paramSchema.description}`,
+            paramSchema.required && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: "red" }, children: " *" })
+          ]
+        }
+      ) });
+    }
+    return null;
+  };
+  const renderCommand = (commandName, commandSchema) => {
+    const hasParams = Object.keys(commandSchema.schema).length > 0;
+    const isExpanded = expandedCommands[commandName];
+    const hasSliderInputs = Object.values(commandSchema.schema).some(
+      (paramSchema) => (paramSchema.type === "number" || paramSchema.type === "integer") && typeof paramSchema.minimum === "number" && typeof paramSchema.maximum === "number"
+    );
+    const showExecuteButton = !hasSliderInputs;
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        style: {
+          border: "1px solid #ddd",
+          borderRadius: "4px",
+          marginBottom: "8px",
+          backgroundColor: "#fafafa"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "div",
+            {
+              onClick: () => toggleCommandExpanded(commandName),
+              style: {
+                padding: "8px 12px",
+                cursor: "pointer",
+                borderBottom: isExpanded ? "1px solid #ddd" : "none",
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "h4",
+                    {
+                      style: {
+                        margin: "0",
+                        fontSize: "13px",
+                        fontWeight: "bold"
+                      },
+                      children: commandName
+                    }
+                  ),
+                  isExpanded && commandSchema.description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "p",
+                    {
+                      style: { margin: "4px 0 0 0", fontSize: "11px", color: "#666" },
+                      children: commandSchema.description
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "10px",
+                      color: "#999",
+                      transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
+                      transition: "transform 0.2s"
+                    },
+                    children: "\u25BC"
+                  }
+                )
+              ]
+            }
+          ),
+          isExpanded && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { padding: "12px", paddingTop: "0" }, children: [
+            hasParams && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: showExecuteButton ? "12px" : "0" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "div",
+                {
+                  style: {
+                    marginBottom: "8px",
+                    fontSize: "12px",
+                    fontWeight: "bold",
+                    color: "#555"
+                  },
+                  children: "Parameters:"
+                }
+              ),
+              Object.entries(commandSchema.schema).map(
+                ([paramName, paramSchema]) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "div",
+                  {
+                    style: { marginLeft: "8px" },
+                    children: renderInput(commandName, paramName, paramSchema)
+                  },
+                  `${commandName}-${paramName}`
+                )
+              )
+            ] }),
+            !hasParams && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "div",
+              {
+                style: {
+                  marginBottom: showExecuteButton ? "12px" : "0",
+                  marginTop: "2px",
+                  fontSize: "11px",
+                  color: "#666",
+                  fontStyle: "italic"
+                },
+                children: "No parameters required"
+              }
+            ),
+            showExecuteButton && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              "button",
+              {
+                onClick: () => handleCommandSubmit(commandName),
+                style: {
+                  padding: "8px 16px",
+                  fontSize: "12px",
+                  backgroundColor: "#007bff",
+                  color: "white",
+                  border: "none",
+                  borderRadius: "4px",
+                  cursor: "pointer",
+                  fontWeight: "bold"
+                },
+                children: [
+                  "Execute ",
+                  commandName
+                ]
+              }
+            )
+          ] })
+        ]
+      },
+      commandName
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontFamily: "monospace", fontSize: "12px" }, children: Object.keys(commands).length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { padding: "12px", color: "#666", fontStyle: "italic" }, children: "Waiting for commands schema..." }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "h3",
+      {
+        style: {
+          margin: "0 0 16px 0",
+          fontSize: "16px",
+          fontWeight: "bold"
+        },
+        children: "Reactor Commands"
+      }
+    ),
+    Object.entries(commands).map(([commandName, commandSchema]) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: renderCommand(commandName, commandSchema) }, commandName))
+  ] }) }) });
+}
+
+// src/react/WebcamStream.tsx
+var import_react7 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function WebcamStream({
   className,
   style,
@@ -1334,16 +1790,16 @@ function WebcamStream({
   showWebcam = true,
   videoObjectFit = "contain"
 }) {
-  const [stream, setStream] = (0, import_react6.useState)(null);
-  const [isPublishing, setIsPublishing] = (0, import_react6.useState)(false);
-  const [permissionDenied, setPermissionDenied] = (0, import_react6.useState)(false);
+  const [stream, setStream] = (0, import_react7.useState)(null);
+  const [isPublishing, setIsPublishing] = (0, import_react7.useState)(false);
+  const [permissionDenied, setPermissionDenied] = (0, import_react7.useState)(false);
   const { status, publishVideoStream, unpublishVideoStream, reactor } = useReactor((state) => ({
     status: state.status,
     publishVideoStream: state.publishVideoStream,
     unpublishVideoStream: state.unpublishVideoStream,
     reactor: state.internal.reactor
   }));
-  const videoRef = (0, import_react6.useRef)(null);
+  const videoRef = (0, import_react7.useRef)(null);
   const startWebcam = () => __async(null, null, function* () {
     console.debug("[WebcamPublisher] Starting webcam");
     try {
@@ -1378,7 +1834,7 @@ function WebcamStream({
     setStream(null);
     console.debug("[WebcamPublisher] Webcam stopped");
   });
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     console.debug("[WebcamPublisher] Stream effect triggered", {
       hasVideoElement: !!videoRef.current,
       hasStream: !!stream
@@ -1395,7 +1851,7 @@ function WebcamStream({
       videoRef.current.srcObject = null;
     }
   }, [stream]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!stream) {
       return;
     }
@@ -1419,7 +1875,7 @@ function WebcamStream({
       });
     }
   }, [status, stream, isPublishing, publishVideoStream, unpublishVideoStream]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const handleError = (error) => {
       console.debug("[WebcamPublisher] Received error event:", error);
       if (error.code === "VIDEO_PUBLISH_FAILED") {
@@ -1434,7 +1890,7 @@ function WebcamStream({
       reactor.off("error", handleError);
     };
   }, [reactor]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (status !== "ready") {
       console.debug(
         "[WebcamPublisher] Status changed to",
@@ -1444,7 +1900,7 @@ function WebcamStream({
       setIsPublishing(false);
     }
   }, [status, isPublishing]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     console.debug("[WebcamPublisher] Auto-starting webcam");
     startWebcam();
     return () => {
@@ -1453,7 +1909,7 @@ function WebcamStream({
     };
   }, []);
   const showPlaceholder = !stream;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
       style: __spreadValues({
@@ -1463,7 +1919,7 @@ function WebcamStream({
       }, style),
       className,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "video",
           {
             ref: videoRef,
@@ -1478,7 +1934,7 @@ function WebcamStream({
             autoPlay: true
           }
         ),
-        showPlaceholder && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        showPlaceholder && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "div",
           {
             style: {
@@ -1499,11 +1955,11 @@ function WebcamStream({
               flexDirection: "column",
               gap: "12px"
             },
-            children: permissionDenied ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { fontSize: "12px", fontFamily: "monospace" }, children: [
+            children: permissionDenied ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { fontSize: "12px", fontFamily: "monospace" }, children: [
               "Camera access denied.",
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("br", {}),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("br", {}),
               "Please allow access in your browser settings."
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontSize: "12px", fontFamily: "monospace" }, children: "Starting camera..." })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: "12px", fontFamily: "monospace" }, children: "Starting camera..." })
           }
         )
       ]
@@ -1513,6 +1969,7 @@ function WebcamStream({
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Reactor,
+  ReactorController,
   ReactorProvider,
   ReactorView,
   WebcamStream,