@dxos/react-ui-canvas-compute 0.8.0 → 0.8.1-main.303c73a

package/dist/lib/node/index.cjs

@@ -161,6 +161,7 @@ __export(node_exports, {
   threadShape: () => threadShape,
   triggerShape: () => triggerShape,
   useComputeContext: () => useComputeContext,
+  useComputeGraphController: () => useComputeGraphController,
   useComputeNodeState: () => useComputeNodeState,
   useGraphMonitor: () => useGraphMonitor
 });
@@ -178,9 +179,10 @@ var import_invariant = require("@dxos/invariant");
 var import_react = require("react");
 var import_debug2 = require("@dxos/debug");
 var import_react2 = require("react");
+var import_react3 = require("react");
 var import_echo_schema2 = require("@dxos/echo-schema");
 var import_invariant2 = require("@dxos/invariant");
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_conductor3 = require("@dxos/conductor");
 var import_echo_schema3 = require("@dxos/echo-schema");
 var import_invariant3 = require("@dxos/invariant");
@@ -188,128 +190,128 @@ var import_keys = require("@dxos/keys");
 var import_echo = require("@dxos/react-client/echo");
 var import_util = require("@dxos/util");
 var import_react_ui_canvas_editor = require("@dxos/react-ui-canvas-editor");
-var import_react4 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 var import_invariant4 = require("@dxos/invariant");
 var import_react_ui = require("@dxos/react-ui");
 var import_react_ui_canvas_editor2 = require("@dxos/react-ui-canvas-editor");
 var import_react_ui_theme = require("@dxos/react-ui-theme");
-var import_react5 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 var import_conductor4 = require("@dxos/conductor");
 var import_echo_schema4 = require("@dxos/echo-schema");
 var import_react_ui_canvas = require("@dxos/react-ui-canvas");
 var import_react_ui_canvas_editor3 = require("@dxos/react-ui-canvas-editor");
-var import_schema = require("@effect/schema");
+var import_effect2 = require("effect");
 var import_conductor5 = require("@dxos/conductor");
 var import_echo_schema5 = require("@dxos/echo-schema");
 var import_react_ui_canvas_editor4 = require("@dxos/react-ui-canvas-editor");
-var import_react6 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 var import_conductor6 = require("@dxos/conductor");
 var import_react_ui2 = require("@dxos/react-ui");
-var import_react7 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 var import_conductor7 = require("@dxos/conductor");
 var import_echo_schema6 = require("@dxos/echo-schema");
-var import_react8 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 var import_conductor8 = require("@dxos/conductor");
 var import_echo_schema7 = require("@dxos/echo-schema");
-var import_react9 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 var import_echo_schema8 = require("@dxos/echo-schema");
 var import_react_ui3 = require("@dxos/react-ui");
 var import_react_ui_canvas_editor5 = require("@dxos/react-ui-canvas-editor");
-var import_react10 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_conductor9 = require("@dxos/conductor");
 var import_echo_schema9 = require("@dxos/echo-schema");
 var import_react_ui4 = require("@dxos/react-ui");
 var import_react_ui_canvas_editor6 = require("@dxos/react-ui-canvas-editor");
 var import_react_ui_theme2 = require("@dxos/react-ui-theme");
-var import_react11 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 var import_echo_schema10 = require("@dxos/echo-schema");
 var import_react_ui_canvas_editor7 = require("@dxos/react-ui-canvas-editor");
-var import_react12 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 var import_conductor10 = require("@dxos/conductor");
 var import_echo_schema11 = require("@dxos/echo-schema");
 var import_react_ui_canvas_editor8 = require("@dxos/react-ui-canvas-editor");
 var import_react_ui_canvas_editor9 = require("@dxos/react-ui-canvas-editor");
-var import_react13 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 var import_conductor11 = require("@dxos/conductor");
 var import_echo_schema12 = require("@dxos/echo-schema");
 var import_react_ui5 = require("@dxos/react-ui");
 var import_react_ui_canvas_editor10 = require("@dxos/react-ui-canvas-editor");
 var import_react_ui_canvas_editor11 = require("@dxos/react-ui-canvas-editor");
 var import_util2 = require("@dxos/util");
-var import_react14 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 var import_echo_schema13 = require("@dxos/echo-schema");
 var import_react_ui_canvas_editor12 = require("@dxos/react-ui-canvas-editor");
-var import_react15 = __toESM(require("react"));
+var import_react16 = __toESM(require("react"));
 var import_conductor12 = require("@dxos/conductor");
 var import_echo_schema14 = require("@dxos/echo-schema");
 var import_functions = require("@dxos/functions");
 var import_react_client = require("@dxos/react-client");
 var import_echo2 = require("@dxos/react-client/echo");
 var import_react_ui_canvas_editor13 = require("@dxos/react-ui-canvas-editor");
-var import_react16 = __toESM(require("react"));
+var import_react17 = __toESM(require("react"));
 var import_conductor13 = require("@dxos/conductor");
 var import_echo_schema15 = require("@dxos/echo-schema");
-var import_react17 = __toESM(require("react"));
+var import_react18 = __toESM(require("react"));
 var import_conductor14 = require("@dxos/conductor");
 var import_echo_schema16 = require("@dxos/echo-schema");
 var import_react_ui_canvas_editor14 = require("@dxos/react-ui-canvas-editor");
 var import_react_ui_syntax_highlighter = require("@dxos/react-ui-syntax-highlighter");
-var import_react18 = __toESM(require("react"));
+var import_react19 = __toESM(require("react"));
 var import_conductor15 = require("@dxos/conductor");
 var import_echo_schema17 = require("@dxos/echo-schema");
-var import_react19 = __toESM(require("react"));
+var import_react20 = __toESM(require("react"));
 var import_conductor16 = require("@dxos/conductor");
 var import_echo_schema18 = require("@dxos/echo-schema");
 var import_react_ui_theme3 = require("@dxos/react-ui-theme");
-var import_react20 = __toESM(require("react"));
+var import_react21 = __toESM(require("react"));
 var import_conductor17 = require("@dxos/conductor");
 var import_echo_schema19 = require("@dxos/echo-schema");
 var import_react_ui6 = require("@dxos/react-ui");
 var import_react_ui_canvas_editor15 = require("@dxos/react-ui-canvas-editor");
 var import_react_ui_theme4 = require("@dxos/react-ui-theme");
-var import_react21 = __toESM(require("react"));
+var import_react22 = __toESM(require("react"));
 var import_conductor18 = require("@dxos/conductor");
 var import_echo_schema20 = require("@dxos/echo-schema");
 var import_react_ui_canvas_editor16 = require("@dxos/react-ui-canvas-editor");
 var import_react_ui_sfx = require("@dxos/react-ui-sfx");
-var import_react22 = __toESM(require("react"));
+var import_react23 = __toESM(require("react"));
 var import_app_framework = require("@dxos/app-framework");
 var import_conductor19 = require("@dxos/conductor");
 var import_echo_schema21 = require("@dxos/echo-schema");
 var import_react_ui_canvas_editor17 = require("@dxos/react-ui-canvas-editor");
-var import_react23 = __toESM(require("react"));
+var import_react24 = __toESM(require("react"));
 var import_conductor20 = require("@dxos/conductor");
 var import_echo_schema22 = require("@dxos/echo-schema");
 var import_react_ui7 = require("@dxos/react-ui");
 var import_react_ui_canvas_editor18 = require("@dxos/react-ui-canvas-editor");
-var import_react24 = __toESM(require("react"));
+var import_react25 = __toESM(require("react"));
 var import_conductor21 = require("@dxos/conductor");
 var import_echo_schema23 = require("@dxos/echo-schema");
-var import_react25 = __toESM(require("react"));
+var import_react26 = __toESM(require("react"));
 var import_conductor22 = require("@dxos/conductor");
 var import_echo_schema24 = require("@dxos/echo-schema");
 var import_invariant5 = require("@dxos/invariant");
 var import_react_ui_canvas_editor19 = require("@dxos/react-ui-canvas-editor");
-var import_react26 = __toESM(require("react"));
+var import_react27 = __toESM(require("react"));
 var import_conductor23 = require("@dxos/conductor");
 var import_echo_schema25 = require("@dxos/echo-schema");
 var import_react_ui_canvas_editor20 = require("@dxos/react-ui-canvas-editor");
 var import_react_ui_canvas_editor21 = require("@dxos/react-ui-canvas-editor");
-var import_react27 = __toESM(require("react"));
+var import_react28 = __toESM(require("react"));
 var import_conductor24 = require("@dxos/conductor");
 var import_echo_schema26 = require("@dxos/echo-schema");
 var import_react_ui_theme5 = require("@dxos/react-ui-theme");
-var import_react28 = __toESM(require("react"));
+var import_react29 = __toESM(require("react"));
 var import_echo_schema27 = require("@dxos/echo-schema");
 var import_react_ui_canvas_editor22 = require("@dxos/react-ui-canvas-editor");
-var import_react29 = __toESM(require("react"));
+var import_react30 = __toESM(require("react"));
 var import_conductor25 = require("@dxos/conductor");
 var import_echo_schema28 = require("@dxos/echo-schema");
 var import_functions2 = require("@dxos/functions");
 var import_keys2 = require("@dxos/keys");
 var import_echo3 = require("@dxos/react-client/echo");
 var import_react_ui8 = require("@dxos/react-ui");
-var import_react30 = __toESM(require("react"));
+var import_react31 = __toESM(require("react"));
 var import_echo_schema29 = require("@dxos/echo-schema");
 var import_log2 = require("@dxos/log");
 var import_react_client2 = require("@dxos/react-client");
@@ -390,6 +392,53 @@ var ComputeContext = (0, import_react.createContext)(null);
 var useComputeContext = () => {
   return (0, import_react.useContext)(ComputeContext) ?? (0, import_debug2.raise)(new Error("Missing ComputeContext"));
 };
+var combine = (...cbs) => {
+  return () => {
+    for (const cb of cbs) {
+      cb();
+    }
+  };
+};
+var useComputeGraphController = ({ controller, graph, editorRef }) => {
+  const [, forceUpdate] = (0, import_react2.useState)({});
+  (0, import_react2.useEffect)(() => {
+    if (!controller || !graph) {
+      return;
+    }
+    void controller.open();
+    const off = combine(
+      controller.update.on(() => {
+        void editorRef.current?.update();
+        forceUpdate({});
+      }),
+      // TODO(burdon): Every node is called on every update.
+      controller.output.on(({ nodeId, property, value }) => {
+        if (value.type === "not-executed") {
+          return;
+        }
+        const edge = graph.edges.find((edge2) => {
+          const source = graph.getNode(edge2.source);
+          return source.node === nodeId && edge2.output === property;
+        });
+        if (edge) {
+          void editorRef.current?.action?.({
+            type: "trigger",
+            edges: [
+              edge
+            ]
+          });
+        }
+      })
+    );
+    return () => {
+      void controller.close();
+      off();
+    };
+  }, [
+    graph,
+    controller
+  ]);
+};
 var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-canvas-compute/src/hooks/useComputeNodeState.ts";
 var useComputeNodeState = (shape) => {
   const { controller } = useComputeContext();
@@ -402,8 +451,8 @@ var useComputeNodeState = (shape) => {
       ""
     ]
   });
-  const [meta, setMeta] = (0, import_react2.useState)();
-  (0, import_react2.useEffect)(() => {
+  const [meta, setMeta] = (0, import_react3.useState)();
+  (0, import_react3.useEffect)(() => {
     let disposed = false;
     queueMicrotask(async () => {
       (0, import_invariant2.invariant)(shape.node, "Node not specified", {
@@ -428,12 +477,12 @@ var useComputeNodeState = (shape) => {
   }, [
     shape.node
   ]);
-  const evalNode = (0, import_react2.useCallback)(() => {
+  const evalNode = (0, import_react3.useCallback)(() => {
     return controller.evalNode(shape.node);
   }, [
     shape.node
   ]);
-  const subscribeToEventLog = (0, import_react2.useCallback)((cb) => {
+  const subscribeToEventLog = (0, import_react3.useCallback)((cb) => {
     return controller.events.on((ev) => {
       if (ev.nodeId === shape.node) {
         cb(ev);
@@ -490,7 +539,7 @@ var mapEdge = (graph, { source, target, output = import_conductor3.DEFAULT_OUTPU
   };
 };
 var useGraphMonitor = (model) => {
-  return (0, import_react3.useMemo)(() => {
+  return (0, import_react4.useMemo)(() => {
     return {
       onCreate: ({ node }) => {
         if (!model) {
@@ -881,7 +930,7 @@ var computeValueBag = (bag) => {
 var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-canvas-compute/src/shapes/common/Box.tsx";
 var headerHeight = 32;
 var footerHeight = 32;
-var Box = /* @__PURE__ */ (0, import_react4.forwardRef)(({ children, classNames, shape, title, status, open, onAction }, forwardedRef) => {
+var Box = /* @__PURE__ */ (0, import_react5.forwardRef)(({ children, classNames, shape, title, status, open, onAction }, forwardedRef) => {
   (0, import_invariant4.invariant)(shape.type, void 0, {
     F: __dxlog_file5,
     L: 30,
@@ -895,17 +944,17 @@ var Box = /* @__PURE__ */ (0, import_react4.forwardRef)(({ children, classNames,
     icon: "ph--placeholder--regular"
   };
   const { debug } = (0, import_react_ui_canvas_editor2.useEditorContext)();
-  return /* @__PURE__ */ import_react4.default.createElement("div", {
+  return /* @__PURE__ */ import_react5.default.createElement("div", {
     ref: forwardedRef,
     className: "flex flex-col h-full w-full justify-between"
-  }, /* @__PURE__ */ import_react4.default.createElement("div", {
+  }, /* @__PURE__ */ import_react5.default.createElement("div", {
     className: "flex shrink-0 w-full justify-between items-center h-[32px] bg-hoverSurface"
-  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui.Icon, {
+  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui.Icon, {
     icon,
     classNames: "mx-2"
-  }), /* @__PURE__ */ import_react4.default.createElement("div", {
+  }), /* @__PURE__ */ import_react5.default.createElement("div", {
     className: "grow text-sm truncate"
-  }, debug ? shape.type : name ?? shape.text ?? title), /* @__PURE__ */ import_react4.default.createElement(import_react_ui.IconButton, {
+  }, debug ? shape.type : name ?? shape.text ?? title), /* @__PURE__ */ import_react5.default.createElement(import_react_ui.IconButton, {
     classNames: "p-1 text-green-500",
     variant: "ghost",
     icon: "ph--play--regular",
@@ -917,13 +966,13 @@ var Box = /* @__PURE__ */ (0, import_react4.forwardRef)(({ children, classNames,
       ev.stopPropagation();
       onAction?.("run");
     }
-  })), /* @__PURE__ */ import_react4.default.createElement("div", {
+  })), /* @__PURE__ */ import_react5.default.createElement("div", {
     className: (0, import_react_ui_theme.mx)("flex flex-col h-full grow overflow-hidden", classNames)
-  }, children), /* @__PURE__ */ import_react4.default.createElement("div", {
+  }, children), /* @__PURE__ */ import_react5.default.createElement("div", {
     className: "flex shrink-0 w-full justify-between items-center h-[32px] bg-hoverSurface"
-  }, /* @__PURE__ */ import_react4.default.createElement("div", {
+  }, /* @__PURE__ */ import_react5.default.createElement("div", {
     className: "grow px-2 text-sm truncate"
-  }, debug ? shape.id : status), openable && /* @__PURE__ */ import_react4.default.createElement(import_react_ui.IconButton, {
+  }, debug ? shape.id : status), openable && /* @__PURE__ */ import_react5.default.createElement(import_react_ui.IconButton, {
     classNames: "p-1",
     variant: "ghost",
     icon: open ? "ph--caret-up--regular" : "ph--caret-down--regular",
@@ -936,7 +985,7 @@ var Box = /* @__PURE__ */ (0, import_react4.forwardRef)(({ children, classNames,
     }
   })));
 });
-var getProperties = (ast) => import_schema.AST.getPropertySignatures(ast).map(({ name }) => ({
+var getProperties = (ast) => import_effect2.SchemaAST.getPropertySignatures(ast).map(({ name }) => ({
   name: name.toString()
 }));
 var createAnchorId = (kind, property = kind === "input" ? import_conductor5.DEFAULT_INPUT : import_conductor5.DEFAULT_OUTPUT) => [
@@ -953,7 +1002,7 @@ var parseAnchorId = (id) => {
 var ComputeShape = import_echo_schema5.S.extend(import_react_ui_canvas_editor4.Polygon, import_echo_schema5.S.Struct({
   // TODO(burdon): Rename computeNode?
   node: import_echo_schema5.S.optional(import_echo_schema5.ObjectId.annotations({
-    [import_schema.AST.DescriptionAnnotationId]: "Compute node id"
+    [import_effect2.SchemaAST.DescriptionAnnotationId]: "Compute node id"
   }))
 }).pipe(import_echo_schema5.S.mutable));
 var createShape = ({ id, ...rest }) => {
@@ -966,8 +1015,8 @@ var bodyPadding = 8;
 var expandedHeight = 200;
 var FunctionBody = ({ shape, name, content, inputSchema = import_conductor4.VoidInput, outputSchema = import_conductor4.VoidOutput, ...props }) => {
   const { scale } = (0, import_react_ui_canvas.useCanvasContext)();
-  const rootRef = (0, import_react5.useRef)(null);
-  const [open, setOpen] = (0, import_react5.useState)(false);
+  const rootRef = (0, import_react6.useRef)(null);
+  const [open, setOpen] = (0, import_react6.useState)(false);
   const handleAction = (action) => {
     if (!rootRef.current) {
       return;
@@ -991,7 +1040,7 @@ var FunctionBody = ({ shape, name, content, inputSchema = import_conductor4.Void
   const inputs = getProperties(inputSchema.ast);
   const outputs = getProperties(outputSchema.ast);
   const columnCount = inputs.length && outputs.length ? 2 : 1;
-  return /* @__PURE__ */ import_react5.default.createElement(Box, {
+  return /* @__PURE__ */ import_react6.default.createElement(Box, {
     ref: rootRef,
     shape,
     title: name,
@@ -999,29 +1048,29 @@ var FunctionBody = ({ shape, name, content, inputSchema = import_conductor4.Void
     open,
     onAction: handleAction,
     ...props
-  }, /* @__PURE__ */ import_react5.default.createElement("div", {
+  }, /* @__PURE__ */ import_react6.default.createElement("div", {
     className: `grid grid-cols-${columnCount} items-center`,
     style: {
       paddingTop: bodyPadding,
       paddingBottom: bodyPadding
     }
-  }, (inputs?.length ?? 0) > 0 && /* @__PURE__ */ import_react5.default.createElement("div", {
+  }, (inputs?.length ?? 0) > 0 && /* @__PURE__ */ import_react6.default.createElement("div", {
     className: "flex flex-col"
-  }, inputs?.map(({ name: name2 }) => /* @__PURE__ */ import_react5.default.createElement("div", {
+  }, inputs?.map(({ name: name2 }) => /* @__PURE__ */ import_react6.default.createElement("div", {
     key: name2,
     className: "px-2 truncate text-sm font-mono items-center",
     style: {
       height: import_react_ui_canvas_editor3.rowHeight
     }
-  }, name2))), (outputs?.length ?? 0) > 0 && /* @__PURE__ */ import_react5.default.createElement("div", {
+  }, name2))), (outputs?.length ?? 0) > 0 && /* @__PURE__ */ import_react6.default.createElement("div", {
     className: "flex flex-col"
-  }, outputs?.map(({ name: name2 }) => /* @__PURE__ */ import_react5.default.createElement("div", {
+  }, outputs?.map(({ name: name2 }) => /* @__PURE__ */ import_react6.default.createElement("div", {
     key: name2,
     className: "px-2 truncate text-sm font-mono items-center text-right",
     style: {
       height: import_react_ui_canvas_editor3.rowHeight
     }
-  }, name2)))), open && /* @__PURE__ */ import_react5.default.createElement("div", {
+  }, name2)))), open && /* @__PURE__ */ import_react6.default.createElement("div", {
     className: "flex flex-col grow overflow-hidden"
   }, content));
 };
@@ -1043,22 +1092,22 @@ var createFunctionAnchors = (shape, input = import_conductor4.VoidInput, output
   });
 };
 var TypeSelect = ({ value, onValueChange }) => {
-  return /* @__PURE__ */ import_react6.default.createElement(import_react_ui2.Select.Root, {
+  return /* @__PURE__ */ import_react7.default.createElement(import_react_ui2.Select.Root, {
     value,
     onValueChange
-  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui2.Select.TriggerButton, {
+  }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui2.Select.TriggerButton, {
     variant: "ghost",
     classNames: "w-full !px-0"
-  }), /* @__PURE__ */ import_react6.default.createElement(import_react_ui2.Select.Portal, null, /* @__PURE__ */ import_react6.default.createElement(import_react_ui2.Select.Content, null, /* @__PURE__ */ import_react6.default.createElement(import_react_ui2.Select.ScrollUpButton, null), /* @__PURE__ */ import_react6.default.createElement(import_react_ui2.Select.Viewport, null, import_conductor6.ComputeValueType.literals.map((type) => /* @__PURE__ */ import_react6.default.createElement(import_react_ui2.Select.Option, {
+  }), /* @__PURE__ */ import_react7.default.createElement(import_react_ui2.Select.Portal, null, /* @__PURE__ */ import_react7.default.createElement(import_react_ui2.Select.Content, null, /* @__PURE__ */ import_react7.default.createElement(import_react_ui2.Select.ScrollUpButton, null), /* @__PURE__ */ import_react7.default.createElement(import_react_ui2.Select.Viewport, null, import_conductor6.ComputeValueType.literals.map((type) => /* @__PURE__ */ import_react7.default.createElement(import_react_ui2.Select.Option, {
     key: type,
     value: type
-  }, type))), /* @__PURE__ */ import_react6.default.createElement(import_react_ui2.Select.ScrollDownButton, null), /* @__PURE__ */ import_react6.default.createElement(import_react_ui2.Select.Arrow, null))));
+  }, type))), /* @__PURE__ */ import_react7.default.createElement(import_react_ui2.Select.ScrollDownButton, null), /* @__PURE__ */ import_react7.default.createElement(import_react_ui2.Select.Arrow, null))));
 };
 var ReducerShape = import_echo_schema6.S.extend(ComputeShape, import_echo_schema6.S.Struct({
   type: import_echo_schema6.S.Literal("reducer")
 }));
 var ReducerComponent = ({ shape }) => {
-  return /* @__PURE__ */ import_react7.default.createElement(FunctionBody, {
+  return /* @__PURE__ */ import_react8.default.createElement(FunctionBody, {
     shape,
     inputSchema: import_conductor7.ReducerInput,
     outputSchema: import_conductor7.ReducerOutput
@@ -1076,7 +1125,7 @@ var reducerShape = {
   type: "reducer",
   name: "Reducer",
   icon: "ph--repeat--regular",
-  component: (props) => /* @__PURE__ */ import_react7.default.createElement(ReducerComponent, props),
+  component: (props) => /* @__PURE__ */ import_react8.default.createElement(ReducerComponent, props),
   createShape: createReducer,
   getAnchors: (shape) => createFunctionAnchors(shape, import_conductor7.ReducerInput, import_conductor7.ReducerOutput)
 };
@@ -1092,7 +1141,7 @@ var createAppend = (props) => createShape({
   ...props
 });
 var AppendComponent = ({ shape }) => {
-  return /* @__PURE__ */ import_react8.default.createElement(FunctionBody, {
+  return /* @__PURE__ */ import_react9.default.createElement(FunctionBody, {
     shape,
     inputSchema: import_conductor8.AppendInput
   });
@@ -1118,15 +1167,15 @@ var createAudio = (props) => createShape({
 });
 var AudioComponent = ({ shape }) => {
   const { node } = useComputeNodeState(shape);
-  const [active, setActive] = (0, import_react9.useState)(false);
-  (0, import_react9.useEffect)(() => {
+  const [active, setActive] = (0, import_react10.useState)(false);
+  (0, import_react10.useEffect)(() => {
     node.value = active;
   }, [
     active
   ]);
-  return /* @__PURE__ */ import_react9.default.createElement("div", {
+  return /* @__PURE__ */ import_react10.default.createElement("div", {
     className: "flex w-full justify-center items-center"
-  }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui3.Icon, {
+  }, /* @__PURE__ */ import_react10.default.createElement(import_react_ui3.Icon, {
     icon: active ? "ph--microphone--regular" : "ph--microphone-slash--regular",
     classNames: [
       "transition opacity-20 duration-1000",
@@ -1164,9 +1213,9 @@ var BeaconComponent = ({ shape }) => {
   const { runtime } = useComputeNodeState(shape);
   const input = runtime.inputs[import_conductor9.DEFAULT_INPUT];
   const value = input?.type === "executed" ? input.value : false;
-  return /* @__PURE__ */ import_react10.default.createElement("div", {
+  return /* @__PURE__ */ import_react11.default.createElement("div", {
     className: "flex w-full justify-center items-center"
-  }, /* @__PURE__ */ import_react10.default.createElement(import_react_ui4.Icon, {
+  }, /* @__PURE__ */ import_react11.default.createElement(import_react_ui4.Icon, {
     icon: "ph--sun--regular",
     classNames: (0, import_react_ui_theme2.mx)("transition opacity-20 duration-1000", (0, import_conductor9.isTruthy)(value) && "opacity-100 text-yellow-500"),
     size: 8
@@ -1196,9 +1245,9 @@ var createGate = (props) => createShape({
   ...props
 });
 var GateComponent = (Symbol22) => () => {
-  return /* @__PURE__ */ import_react11.default.createElement("div", {
+  return /* @__PURE__ */ import_react12.default.createElement("div", {
     className: "flex w-full justify-center items-center"
-  }, /* @__PURE__ */ import_react11.default.createElement(Symbol22, null));
+  }, /* @__PURE__ */ import_react12.default.createElement(Symbol22, null));
 };
 var defineShape = ({ type, name, icon, Symbol: Symbol22, createShape: createShape2, inputs, outputs = [
   createAnchorId("output")
@@ -1229,13 +1278,13 @@ var Symbol2 = (pathConstructor, inputs) => ({
     endX,
     height
   });
-  return /* @__PURE__ */ import_react11.default.createElement("svg", {
+  return /* @__PURE__ */ import_react12.default.createElement("svg", {
     viewBox: `0 0 ${width} ${height}`,
     className: "w-full h-full"
   }, (0, import_react_ui_canvas_editor7.getAnchorPoints)({
     x: 0,
     y: centerY
-  }, inputs).map(({ x, y }, i) => /* @__PURE__ */ import_react11.default.createElement("line", {
+  }, inputs).map(({ x, y }, i) => /* @__PURE__ */ import_react12.default.createElement("line", {
     key: i,
     x1: x,
     y1: y,
@@ -1243,14 +1292,14 @@ var Symbol2 = (pathConstructor, inputs) => ({
     y2: y,
     strokeWidth,
     className
-  })), /* @__PURE__ */ import_react11.default.createElement("line", {
+  })), /* @__PURE__ */ import_react12.default.createElement("line", {
     x1: endX,
     y1: centerY,
     x2: width,
     y2: centerY,
     strokeWidth,
     className
-  }), paths.map((path, i) => /* @__PURE__ */ import_react11.default.createElement("path", {
+  }), paths.map((path, i) => /* @__PURE__ */ import_react12.default.createElement("path", {
     key: i,
     d: path,
     strokeWidth,
@@ -1356,7 +1405,7 @@ var ChatShape = import_echo_schema11.S.extend(ComputeShape, import_echo_schema11
 }));
 var TextInputComponent = ({ shape, title, ...props }) => {
   const { runtime } = useComputeNodeState(shape);
-  const inputRef = (0, import_react12.useRef)(null);
+  const inputRef = (0, import_react13.useRef)(null);
   const handleEnter = (text) => {
     const value = text.trim();
     if (value.length) {
@@ -1364,10 +1413,10 @@ var TextInputComponent = ({ shape, title, ...props }) => {
       inputRef.current?.setText("");
     }
   };
-  return /* @__PURE__ */ import_react12.default.createElement(Box, {
+  return /* @__PURE__ */ import_react13.default.createElement(Box, {
     shape,
     title
-  }, /* @__PURE__ */ import_react12.default.createElement(import_react_ui_canvas_editor8.TextBox, {
+  }, /* @__PURE__ */ import_react13.default.createElement(import_react_ui_canvas_editor8.TextBox, {
     ref: inputRef,
     onEnter: handleEnter,
     ...props
@@ -1385,7 +1434,7 @@ var chatShape = {
   type: "chat",
   name: "Chat",
   icon: "ph--textbox--regular",
-  component: (props) => /* @__PURE__ */ import_react12.default.createElement(TextInputComponent, {
+  component: (props) => /* @__PURE__ */ import_react13.default.createElement(TextInputComponent, {
     ...props,
     title: "Prompt",
     placeholder: "Message"
@@ -1416,9 +1465,9 @@ var inferType = (value) => {
 };
 var ConstantComponent = ({ shape, title, chat, ...props }) => {
   const { node } = useComputeNodeState(shape);
-  const [type, setType] = (0, import_react13.useState)(inferType(node.value) ?? import_conductor11.ComputeValueType.literals[0]);
-  const inputRef = (0, import_react13.useRef)(null);
-  const handleEnter = (0, import_react13.useCallback)((text) => {
+  const [type, setType] = (0, import_react14.useState)(inferType(node.value) ?? import_conductor11.ComputeValueType.literals[0]);
+  const inputRef = (0, import_react14.useRef)(null);
+  const handleEnter = (0, import_react14.useCallback)((text) => {
     const value = text.trim();
     if (value.length) {
       if (type === "number") {
@@ -1436,26 +1485,26 @@ var ConstantComponent = ({ shape, title, chat, ...props }) => {
   }, [
     type
   ]);
-  return /* @__PURE__ */ import_react13.default.createElement(Box, {
+  return /* @__PURE__ */ import_react14.default.createElement(Box, {
     shape,
     title,
-    status: /* @__PURE__ */ import_react13.default.createElement(TypeSelect, {
+    status: /* @__PURE__ */ import_react14.default.createElement(TypeSelect, {
       value: type,
       onValueChange: setType
     })
-  }, (type === "string" || type === "number") && /* @__PURE__ */ import_react13.default.createElement(import_react_ui_canvas_editor10.TextBox, {
+  }, (type === "string" || type === "number") && /* @__PURE__ */ import_react14.default.createElement(import_react_ui_canvas_editor10.TextBox, {
     ...props,
     ref: inputRef,
     value: node.value,
     onEnter: handleEnter
-  }), type === "object" && /* @__PURE__ */ import_react13.default.createElement(import_react_ui_canvas_editor10.TextBox, {
+  }), type === "object" && /* @__PURE__ */ import_react14.default.createElement(import_react_ui_canvas_editor10.TextBox, {
     ...props,
     ref: inputRef,
     value: JSON.stringify(node.value, null, 2),
     language: "json"
-  }), type === "boolean" && /* @__PURE__ */ import_react13.default.createElement("div", {
+  }), type === "boolean" && /* @__PURE__ */ import_react14.default.createElement("div", {
     className: "flex grow justify-center items-center"
-  }, /* @__PURE__ */ import_react13.default.createElement(import_react_ui5.Input.Root, null, /* @__PURE__ */ import_react13.default.createElement(import_react_ui5.Input.Switch, {
+  }, /* @__PURE__ */ import_react14.default.createElement(import_react_ui5.Input.Root, null, /* @__PURE__ */ import_react14.default.createElement(import_react_ui5.Input.Switch, {
     checked: node.value,
     onCheckedChange: (value) => {
       node.value = value;
@@ -1474,7 +1523,7 @@ var constantShape = {
   type: "constant",
   name: "Value",
   icon: "ph--dots-three-circle--regular",
-  component: (props) => /* @__PURE__ */ import_react13.default.createElement(ConstantComponent, {
+  component: (props) => /* @__PURE__ */ import_react14.default.createElement(ConstantComponent, {
     ...props,
     placeholder: "Constant"
   }),
@@ -1499,7 +1548,7 @@ var createDatabase = (props) => createShape({
   ...props
 });
 var DatabaseComponent = ({ shape }) => {
-  return /* @__PURE__ */ import_react14.default.createElement(Box, {
+  return /* @__PURE__ */ import_react15.default.createElement(Box, {
     shape
   });
 };
@@ -1530,8 +1579,8 @@ var createFunction = (props) => createShape({
 var TextInputComponent2 = ({ shape, title, ...props }) => {
   const client = (0, import_react_client.useClient)();
   const { node, runtime } = useComputeNodeState(shape);
-  const inputRef = (0, import_react15.useRef)(null);
-  const handleEnter = (0, import_react15.useCallback)(async (text) => {
+  const inputRef = (0, import_react16.useRef)(null);
+  const handleEnter = (0, import_react16.useCallback)(async (text) => {
     const value = text.trim();
     const { spaceId, objectId } = (0, import_echo2.parseId)(value);
     if (!spaceId || !objectId) {
@@ -1556,7 +1605,7 @@ var TextInputComponent2 = ({ shape, title, ...props }) => {
     client,
     node
   ]);
-  const handleAction = (0, import_react15.useCallback)((action) => {
+  const handleAction = (0, import_react16.useCallback)((action) => {
     if (action !== "run") {
       return;
     }
@@ -1564,11 +1613,11 @@ var TextInputComponent2 = ({ shape, title, ...props }) => {
   }, [
     runtime
   ]);
-  return /* @__PURE__ */ import_react15.default.createElement(Box, {
+  return /* @__PURE__ */ import_react16.default.createElement(Box, {
     shape,
     title: "Function",
     onAction: handleAction
-  }, /* @__PURE__ */ import_react15.default.createElement(import_react_ui_canvas_editor13.TextBox, {
+  }, /* @__PURE__ */ import_react16.default.createElement(import_react_ui_canvas_editor13.TextBox, {
     ...props,
     ref: inputRef,
     value: node.value,
@@ -1598,9 +1647,9 @@ var createGpt = (props) => createShape({
 });
 var GptComponent = ({ shape }) => {
   const { meta, runtime } = useComputeNodeState(shape);
-  const [text, setText] = (0, import_react16.useState)("");
-  const [tokens, setTokens] = (0, import_react16.useState)(0);
-  (0, import_react16.useEffect)(() => {
+  const [text, setText] = (0, import_react17.useState)("");
+  const [tokens, setTokens] = (0, import_react17.useState)(0);
+  (0, import_react17.useEffect)(() => {
     return runtime.subscribeToEventLog((ev) => {
       switch (ev.type) {
         case "begin-compute": {
@@ -1631,9 +1680,9 @@ var GptComponent = ({ shape }) => {
   }, [
     runtime?.subscribeToEventLog
   ]);
-  return /* @__PURE__ */ import_react16.default.createElement(FunctionBody, {
+  return /* @__PURE__ */ import_react17.default.createElement(FunctionBody, {
     shape,
-    content: /* @__PURE__ */ import_react16.default.createElement("div", {
+    content: /* @__PURE__ */ import_react17.default.createElement("div", {
       className: "px-2 py-1 overflow-y-scroll"
     }, text),
     status: `${tokens} tokens`,
@@ -1660,15 +1709,15 @@ var JsonComponent = ({ shape, ...props }) => {
   const { runtime } = useComputeNodeState(shape);
   const input = runtime.inputs[import_conductor14.DEFAULT_INPUT];
   const value = input?.type === "executed" ? input.value : void 0;
-  return /* @__PURE__ */ import_react17.default.createElement(Box, {
+  return /* @__PURE__ */ import_react18.default.createElement(Box, {
     shape
-  }, /* @__PURE__ */ import_react17.default.createElement(import_react_ui_syntax_highlighter.JsonFilter, {
+  }, /* @__PURE__ */ import_react18.default.createElement(import_react_ui_syntax_highlighter.JsonFilter, {
     data: value,
     classNames: "text-xs"
   }));
 };
 var JsonTransformComponent = ({ shape, ...props }) => {
-  return /* @__PURE__ */ import_react17.default.createElement(Box, {
+  return /* @__PURE__ */ import_react18.default.createElement(Box, {
     shape
   });
 };
@@ -1684,7 +1733,7 @@ var jsonShape = {
   type: "json",
   name: "JSON",
   icon: "ph--code--regular",
-  component: (props) => /* @__PURE__ */ import_react17.default.createElement(JsonComponent, props),
+  component: (props) => /* @__PURE__ */ import_react18.default.createElement(JsonComponent, props),
   createShape: createJson,
   getAnchors: (shape) => (0, import_react_ui_canvas_editor14.createAnchorMap)(shape, {
     [createAnchorId("input")]: {
@@ -1710,7 +1759,7 @@ var jsonTransformShape = {
   type: "json-transform",
   name: "Transform",
   icon: "ph--shuffle-simple--regular",
-  component: (props) => /* @__PURE__ */ import_react17.default.createElement(JsonTransformComponent, props),
+  component: (props) => /* @__PURE__ */ import_react18.default.createElement(JsonTransformComponent, props),
   createShape: createJsonTransform,
   getAnchors: (shape) => createFunctionAnchors(shape, import_conductor14.JsonTransformInput, import_conductor14.DefaultOutput),
   resizable: true
@@ -1722,14 +1771,14 @@ var IfElseShape = import_echo_schema17.S.extend(ComputeShape, import_echo_schema
   type: import_echo_schema17.S.Literal("if-else")
 }));
 var IfComponent = ({ shape, ...props }) => {
-  return /* @__PURE__ */ import_react18.default.createElement(FunctionBody, {
+  return /* @__PURE__ */ import_react19.default.createElement(FunctionBody, {
     shape,
     inputSchema: import_conductor15.IfInput,
     outputSchema: import_conductor15.IfOutput
   });
 };
 var IfElseComponent = ({ shape, ...props }) => {
-  return /* @__PURE__ */ import_react18.default.createElement(FunctionBody, {
+  return /* @__PURE__ */ import_react19.default.createElement(FunctionBody, {
     shape,
     inputSchema: import_conductor15.IfElseInput,
     outputSchema: import_conductor15.IfElseOutput
@@ -1747,7 +1796,7 @@ var ifShape = {
   type: "if",
   name: "IF",
   icon: "ph--arrows-split--regular",
-  component: (props) => /* @__PURE__ */ import_react18.default.createElement(IfComponent, props),
+  component: (props) => /* @__PURE__ */ import_react19.default.createElement(IfComponent, props),
   createShape: createIf,
   getAnchors: (shape) => createFunctionAnchors(shape, import_conductor15.IfInput, import_conductor15.IfOutput)
 };
@@ -1763,7 +1812,7 @@ var ifElseShape = {
   type: "if-else",
   name: "IF/ELSE",
   icon: "ph--arrows-merge--regular",
-  component: (props) => /* @__PURE__ */ import_react18.default.createElement(IfElseComponent, props),
+  component: (props) => /* @__PURE__ */ import_react19.default.createElement(IfElseComponent, props),
   createShape: createIfElse,
   getAnchors: (shape) => createFunctionAnchors(shape, import_conductor15.IfElseInput, import_conductor15.IfElseOutput)
 };
@@ -1786,15 +1835,15 @@ var QueueComponent = ({ shape }) => {
       runtime.evalNode();
     }
   };
-  return /* @__PURE__ */ import_react19.default.createElement(Box, {
+  return /* @__PURE__ */ import_react20.default.createElement(Box, {
     shape,
     status: `${items.length} items`,
     onAction: handleAction
-  }, /* @__PURE__ */ import_react19.default.createElement("div", {
+  }, /* @__PURE__ */ import_react20.default.createElement("div", {
     className: "flex flex-col w-full overflow-y-scroll divide-y divide-separator"
   }, [
     ...items
-  ].map((item, i) => /* @__PURE__ */ import_react19.default.createElement(QueueItem, {
+  ].map((item, i) => /* @__PURE__ */ import_react20.default.createElement(QueueItem, {
     key: i,
     classNames: "p-1 px-2",
     item
@@ -1802,17 +1851,17 @@ var QueueComponent = ({ shape }) => {
 };
 var QueueItem = ({ classNames, item }) => {
   if (typeof item !== "object") {
-    return /* @__PURE__ */ import_react19.default.createElement("div", {
+    return /* @__PURE__ */ import_react20.default.createElement("div", {
       className: (0, import_react_ui_theme3.mx)(classNames, "whitespace-pre-wrap")
     }, item);
   }
-  return /* @__PURE__ */ import_react19.default.createElement("div", {
+  return /* @__PURE__ */ import_react20.default.createElement("div", {
     className: (0, import_react_ui_theme3.mx)("grid grid-cols-[80px,1fr]", classNames)
-  }, Object.entries(item).map(([key, value]) => /* @__PURE__ */ import_react19.default.createElement(import_react19.Fragment, {
+  }, Object.entries(item).map(([key, value]) => /* @__PURE__ */ import_react20.default.createElement(import_react20.Fragment, {
     key
-  }, /* @__PURE__ */ import_react19.default.createElement("div", {
+  }, /* @__PURE__ */ import_react20.default.createElement("div", {
     className: "p-1 text-xs text-subdued"
-  }, key), /* @__PURE__ */ import_react19.default.createElement("div", null, typeof value === "string" ? value : JSON.stringify(value)))));
+  }, key), /* @__PURE__ */ import_react20.default.createElement("div", null, typeof value === "string" ? value : JSON.stringify(value)))));
 };
 var queueShape = {
   type: "queue",
@@ -1847,9 +1896,9 @@ var icons = [
 var pickIcon = () => icons[Math.floor(Math.random() * icons.length)];
 var RandomComponent = ({ shape }) => {
   const { runtime } = useComputeNodeState(shape);
-  const [spin, setSpin] = (0, import_react20.useState)(false);
-  const [icon, setIcon] = (0, import_react20.useState)(pickIcon());
-  (0, import_react20.useEffect)(() => {
+  const [spin, setSpin] = (0, import_react21.useState)(false);
+  const [icon, setIcon] = (0, import_react21.useState)(pickIcon());
+  (0, import_react21.useEffect)(() => {
     if (!spin) {
       return;
     }
@@ -1869,9 +1918,9 @@ var RandomComponent = ({ shape }) => {
     runtime.setOutput(import_conductor17.DEFAULT_OUTPUT, Math.random());
     setSpin(true);
   };
-  return /* @__PURE__ */ import_react20.default.createElement("div", {
+  return /* @__PURE__ */ import_react21.default.createElement("div", {
     className: "flex grow items-center justify-center"
-  }, /* @__PURE__ */ import_react20.default.createElement(import_react_ui6.Icon, {
+  }, /* @__PURE__ */ import_react21.default.createElement(import_react_ui6.Icon, {
     icon,
     classNames: (0, import_react_ui_theme4.mx)(spin && "animate-[spin_1s]"),
     size: 10,
@@ -1908,9 +1957,9 @@ var ScopeComponent = ({ shape }) => {
   const input = runtime.inputs[import_conductor18.DEFAULT_INPUT];
   const active = input?.type === "executed" ? input.value : false;
   const { getAverage } = (0, import_react_ui_sfx.useAudioStream)(active);
-  return /* @__PURE__ */ import_react21.default.createElement("div", {
+  return /* @__PURE__ */ import_react22.default.createElement("div", {
     className: "flex w-full justify-center items-center bg-black"
-  }, /* @__PURE__ */ import_react21.default.createElement(import_react_ui_sfx.Chaos, {
+  }, /* @__PURE__ */ import_react22.default.createElement(import_react_ui_sfx.Chaos, {
     active,
     getValue: getAverage,
     options: {
@@ -1952,10 +2001,10 @@ var SurfaceComponent = ({ shape }) => {
       runtime.evalNode();
     }
   };
-  return /* @__PURE__ */ import_react22.default.createElement(Box, {
+  return /* @__PURE__ */ import_react23.default.createElement(Box, {
     shape,
     onAction: handleAction
-  }, value !== null && /* @__PURE__ */ import_react22.default.createElement(import_app_framework.Surface, {
+  }, value !== null && /* @__PURE__ */ import_react23.default.createElement(import_app_framework.Surface, {
     role: "canvas-node",
     data: {
       value
@@ -1990,16 +2039,16 @@ var createSwitch = (props) => createShape({
 });
 var SwitchComponent = ({ shape }) => {
   const { runtime } = useComputeNodeState(shape);
-  const [value, setValue] = (0, import_react23.useState)(false);
-  (0, import_react23.useEffect)(() => {
+  const [value, setValue] = (0, import_react24.useState)(false);
+  (0, import_react24.useEffect)(() => {
     runtime.setOutput(import_conductor20.DEFAULT_OUTPUT, value);
   }, [
     value
   ]);
-  return /* @__PURE__ */ import_react23.default.createElement("div", {
+  return /* @__PURE__ */ import_react24.default.createElement("div", {
     className: "flex w-full justify-center items-center",
     onClick: (ev) => ev.stopPropagation()
-  }, /* @__PURE__ */ import_react23.default.createElement(import_react_ui7.Input.Root, null, /* @__PURE__ */ import_react23.default.createElement(import_react_ui7.Input.Switch, {
+  }, /* @__PURE__ */ import_react24.default.createElement(import_react_ui7.Input.Root, null, /* @__PURE__ */ import_react24.default.createElement(import_react_ui7.Input.Switch, {
     checked: value,
     onCheckedChange: (value2) => setValue(value2)
   })));
@@ -2031,7 +2080,7 @@ var createTable = (props) => createShape({
   ...props
 });
 var TableComponent = ({ shape }) => {
-  return /* @__PURE__ */ import_react24.default.createElement(Box, {
+  return /* @__PURE__ */ import_react25.default.createElement(Box, {
     shape
   });
 };
@@ -2051,7 +2100,7 @@ var TemplateShape = import_echo_schema24.S.extend(ComputeShape, import_echo_sche
 }));
 var TextInputComponent3 = ({ shape, title, ...props }) => {
   const { node } = useComputeNodeState(shape);
-  const inputRef = (0, import_react25.useRef)(null);
+  const inputRef = (0, import_react26.useRef)(null);
   const handleEnter = (text) => {
     const value = text.trim();
     if (value.length) {
@@ -2073,14 +2122,14 @@ var TextInputComponent3 = ({ shape, title, ...props }) => {
     node.valueType = newType;
     node.inputSchema = (0, import_echo_schema24.toJsonSchema)((0, import_conductor22.getTemplateInputSchema)(node));
   };
-  return /* @__PURE__ */ import_react25.default.createElement(Box, {
+  return /* @__PURE__ */ import_react26.default.createElement(Box, {
     shape,
     title: "Template",
-    status: /* @__PURE__ */ import_react25.default.createElement(TypeSelect, {
+    status: /* @__PURE__ */ import_react26.default.createElement(TypeSelect, {
       value: node.valueType ?? "string",
       onValueChange: handleTypeChange
     })
-  }, /* @__PURE__ */ import_react25.default.createElement(import_react_ui_canvas_editor19.TextBox, {
+  }, /* @__PURE__ */ import_react26.default.createElement(import_react_ui_canvas_editor19.TextBox, {
     ...props,
     ref: inputRef,
     value: node.value,
@@ -2101,7 +2150,7 @@ var templateShape = {
   type: "template",
   name: "Template",
   icon: "ph--article--regular",
-  component: (props) => /* @__PURE__ */ import_react25.default.createElement(TextInputComponent3, {
+  component: (props) => /* @__PURE__ */ import_react26.default.createElement(TextInputComponent3, {
     ...props,
     placeholder: "Prompt"
   }),
@@ -2129,10 +2178,10 @@ var TextComponent = ({ shape }) => {
       runtime.evalNode();
     }
   };
-  return /* @__PURE__ */ import_react26.default.createElement(Box, {
+  return /* @__PURE__ */ import_react27.default.createElement(Box, {
     shape,
     onAction: handleAction
-  }, /* @__PURE__ */ import_react26.default.createElement(import_react_ui_canvas_editor20.TextBox, {
+  }, /* @__PURE__ */ import_react27.default.createElement(import_react_ui_canvas_editor20.TextBox, {
     value
   }));
 };
@@ -2165,36 +2214,36 @@ var createThread = (props) => createShape({
 });
 var ThreadComponent = ({ shape }) => {
   const items = [];
-  const scrollRef = (0, import_react27.useRef)(null);
-  (0, import_react27.useEffect)(() => {
+  const scrollRef = (0, import_react28.useRef)(null);
+  (0, import_react28.useEffect)(() => {
     if (scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }
   }, [
     items
   ]);
-  return /* @__PURE__ */ import_react27.default.createElement(Box, {
+  return /* @__PURE__ */ import_react28.default.createElement(Box, {
     shape
-  }, /* @__PURE__ */ import_react27.default.createElement("div", {
+  }, /* @__PURE__ */ import_react28.default.createElement("div", {
     ref: scrollRef,
     className: "flex flex-col w-full overflow-y-scroll gap-2 p-2"
   }, [
     ...items
-  ].map((item, i) => /* @__PURE__ */ import_react27.default.createElement(ThreadItem, {
+  ].map((item, i) => /* @__PURE__ */ import_react28.default.createElement(ThreadItem, {
     key: i,
     item
   }))));
 };
 var ThreadItem = ({ classNames, item }) => {
   if (typeof item !== "object") {
-    return /* @__PURE__ */ import_react27.default.createElement("div", {
+    return /* @__PURE__ */ import_react28.default.createElement("div", {
       className: (0, import_react_ui_theme5.mx)(classNames)
     }, item);
   }
   const { role, message } = item;
-  return /* @__PURE__ */ import_react27.default.createElement("div", {
+  return /* @__PURE__ */ import_react28.default.createElement("div", {
     className: (0, import_react_ui_theme5.mx)("flex", classNames, role === "user" && "justify-end")
-  }, /* @__PURE__ */ import_react27.default.createElement("div", {
+  }, /* @__PURE__ */ import_react28.default.createElement("div", {
     className: (0, import_react_ui_theme5.mx)("block rounded-md p-1 px-2 text-sm", role === "user" ? "bg-blue-100 dark:bg-blue-800" : role === "system" ? "bg-red-100, dark:bg-red-800" : "whitespace-pre-wrap bg-neutral-50 dark:bg-neutral-800")
   }, message));
 };
@@ -2219,7 +2268,7 @@ var createTextToImage = (props) => createShape({
   ...props
 });
 var TextToImageComponent = ({ shape }) => {
-  return /* @__PURE__ */ import_react28.default.createElement(Box, {
+  return /* @__PURE__ */ import_react29.default.createElement(Box, {
     shape
   });
 };
@@ -2258,7 +2307,7 @@ var createTrigger = (props) => {
 var TriggerComponent = ({ shape }) => {
   const space = (0, import_echo3.useSpace)();
   const functionTrigger = shape.functionTrigger?.target;
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (functionTrigger && !functionTrigger.spec) {
       functionTrigger.spec = createTriggerSpec({
         triggerKind: import_functions2.TriggerKind.Email,
@@ -2269,7 +2318,7 @@ var TriggerComponent = ({ shape }) => {
     functionTrigger,
     functionTrigger?.spec
   ]);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     shape.size.height = getHeight(getOutputSchema(functionTrigger?.spec?.type ?? import_functions2.TriggerKind.Email));
   }, [
     functionTrigger?.spec?.type
@@ -2285,9 +2334,9 @@ var TriggerComponent = ({ shape }) => {
   if (!functionTrigger?.spec) {
     return;
   }
-  return /* @__PURE__ */ import_react29.default.createElement(FunctionBody, {
+  return /* @__PURE__ */ import_react30.default.createElement(FunctionBody, {
     shape,
-    status: /* @__PURE__ */ import_react29.default.createElement(TriggerKindSelect, {
+    status: /* @__PURE__ */ import_react30.default.createElement(TriggerKindSelect, {
       value: functionTrigger.spec?.type,
       onValueChange: (kind) => setKind(kind)
     }),
@@ -2296,16 +2345,16 @@ var TriggerComponent = ({ shape }) => {
   });
 };
 var TriggerKindSelect = ({ value, onValueChange }) => {
-  return /* @__PURE__ */ import_react29.default.createElement(import_react_ui8.Select.Root, {
+  return /* @__PURE__ */ import_react30.default.createElement(import_react_ui8.Select.Root, {
     value,
     onValueChange
-  }, /* @__PURE__ */ import_react29.default.createElement(import_react_ui8.Select.TriggerButton, {
+  }, /* @__PURE__ */ import_react30.default.createElement(import_react_ui8.Select.TriggerButton, {
     variant: "ghost",
     classNames: "w-full !px-0"
-  }), /* @__PURE__ */ import_react29.default.createElement(import_react_ui8.Select.Portal, null, /* @__PURE__ */ import_react29.default.createElement(import_react_ui8.Select.Content, null, /* @__PURE__ */ import_react29.default.createElement(import_react_ui8.Select.ScrollUpButton, null), /* @__PURE__ */ import_react29.default.createElement(import_react_ui8.Select.Viewport, null, Object.values(import_functions2.TriggerKind).map((type) => /* @__PURE__ */ import_react29.default.createElement(import_react_ui8.Select.Option, {
+  }), /* @__PURE__ */ import_react30.default.createElement(import_react_ui8.Select.Portal, null, /* @__PURE__ */ import_react30.default.createElement(import_react_ui8.Select.Content, null, /* @__PURE__ */ import_react30.default.createElement(import_react_ui8.Select.ScrollUpButton, null), /* @__PURE__ */ import_react30.default.createElement(import_react_ui8.Select.Viewport, null, Object.values(import_functions2.TriggerKind).map((type) => /* @__PURE__ */ import_react30.default.createElement(import_react_ui8.Select.Option, {
     key: type,
     value: type
-  }, type))), /* @__PURE__ */ import_react29.default.createElement(import_react_ui8.Select.ScrollDownButton, null), /* @__PURE__ */ import_react29.default.createElement(import_react_ui8.Select.Arrow, null))));
+  }, type))), /* @__PURE__ */ import_react30.default.createElement(import_react_ui8.Select.ScrollDownButton, null), /* @__PURE__ */ import_react30.default.createElement(import_react_ui8.Select.Arrow, null))));
 };
 var createTriggerSpec = (props) => {
   const kind = props.triggerKind ?? import_functions2.TriggerKind.Email;
@@ -2373,8 +2422,8 @@ var createGptRealtime = (props) => createShape({
   ...props
 });
 var GptRealtimeComponent = ({ shape }) => {
-  const [isLive, setIsLive] = (0, import_react30.useState)(false);
-  const [isReady, setIsReady] = (0, import_react30.useState)(false);
+  const [isLive, setIsLive] = (0, import_react31.useState)(false);
+  const [isReady, setIsReady] = (0, import_react31.useState)(false);
   const config = (0, import_react_client2.useConfig)();
   const start = async () => {
     setIsLive(true);
@@ -2459,9 +2508,9 @@ var GptRealtimeComponent = ({ shape }) => {
       throw error;
     }
   };
-  return /* @__PURE__ */ import_react30.default.createElement("div", {
+  return /* @__PURE__ */ import_react31.default.createElement("div", {
     className: "flex w-full justify-center items-center"
-  }, /* @__PURE__ */ import_react30.default.createElement(import_react_ui9.Icon, {
+  }, /* @__PURE__ */ import_react31.default.createElement(import_react_ui9.Icon, {
     icon: isReady ? "ph--waveform--regular" : isLive ? "ph--pulse--regular" : "ph--play--regular",
     size: 16,
     classNames: !isLive && "cursor-pointer",
@@ -2696,6 +2745,7 @@ var ComputeShapeLayout = class extends import_react_ui_canvas_editor23.ShapeLayo
   threadShape,
   triggerShape,
   useComputeContext,
+  useComputeGraphController,
   useComputeNodeState,
   useGraphMonitor
 });