@dxos/react-ui-canvas-compute 0.7.5-labs.071a3e2

package/dist/lib/node-esm/index.mjs

@@ -0,0 +1,2535 @@
+import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
+
+// packages/ui/react-ui-canvas-compute/src/graph/controller.ts
+import { Effect, Either, Exit, Layer, Scope } from "effect";
+import { Event, synchronized } from "@dxos/async";
+import { isNotExecuted, makeValueBag, EventLogger, GptService, GraphExecutor, MockGpt, QueueService, SpaceService } from "@dxos/conductor";
+import { Resource } from "@dxos/context";
+import { log } from "@dxos/log";
+
+// packages/ui/react-ui-canvas-compute/src/graph/node-defs.ts
+import { NODE_INPUT, NODE_OUTPUT, registry, getTemplateInputSchema } from "@dxos/conductor";
+import { raise } from "@dxos/debug";
+import { ObjectId, toJsonSchema } from "@dxos/echo-schema";
+import { invariant } from "@dxos/invariant";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-canvas-compute/src/graph/node-defs.ts";
+var resolveComputeNode = async (node) => {
+  const impl = registry[node.type];
+  invariant(impl, `Unknown node type: ${node.type}`, {
+    F: __dxlog_file,
+    L: 22,
+    S: void 0,
+    A: [
+      "impl",
+      "`Unknown node type: ${node.type}`"
+    ]
+  });
+  return impl;
+};
+var isValidComputeNode = (type) => {
+  return nodeFactory[type] !== void 0;
+};
+var createComputeNode = (shape) => {
+  const type = shape.type ?? raise(new Error("Type not specified"));
+  const factory = nodeFactory[type] ?? raise(new Error(`Unknown shape type: ${type}`));
+  return factory(shape);
+};
+var nodeFactory = {
+  // System.
+  [NODE_INPUT]: () => createNode(NODE_INPUT),
+  [NODE_OUTPUT]: () => createNode(NODE_OUTPUT),
+  // Extensions.
+  ["text-to-image"]: () => createNode("text-to-image"),
+  ["and"]: () => createNode("and"),
+  ["append"]: () => createNode("append"),
+  ["audio"]: () => createNode("audio"),
+  ["beacon"]: () => createNode("beacon"),
+  ["chat"]: () => createNode("chat"),
+  ["constant"]: (shape) => createNode("constant", {
+    value: shape.value
+  }),
+  ["database"]: () => createNode("database"),
+  ["gpt"]: () => createNode("gpt"),
+  ["gpt-realtime"]: () => createNode("gpt-realtime"),
+  ["if"]: () => createNode("if"),
+  ["if-else"]: () => createNode("if-else"),
+  ["function"]: () => createNode("function"),
+  ["json"]: () => createNode("json"),
+  ["json-transform"]: () => createNode("json-transform"),
+  ["not"]: () => createNode("not"),
+  ["or"]: () => createNode("or"),
+  ["queue"]: () => createNode("queue"),
+  ["rng"]: () => createNode("rng"),
+  ["reducer"]: () => createNode("reducer"),
+  ["scope"]: () => createNode("scope"),
+  ["surface"]: () => createNode("surface"),
+  ["switch"]: () => createNode("switch"),
+  ["template"]: (shape) => {
+    const node = createNode("template", {
+      valueType: shape.valueType,
+      value: shape.text
+    });
+    node.inputSchema = toJsonSchema(getTemplateInputSchema(node));
+    return node;
+  },
+  ["text"]: () => createNode("text"),
+  ["thread"]: () => createNode("thread"),
+  ["trigger"]: () => createNode(NODE_INPUT)
+};
+var createNode = (type, props) => ({
+  id: ObjectId.random(),
+  type,
+  ...props
+});
+
+// packages/ui/react-ui-canvas-compute/src/hooks/compute-context.ts
+import { createContext, useContext } from "react";
+import { raise as raise2 } from "@dxos/debug";
+var ComputeContext = createContext(null);
+var useComputeContext = () => {
+  return useContext(ComputeContext) ?? raise2(new Error("Missing ComputeContext"));
+};
+
+// packages/ui/react-ui-canvas-compute/src/hooks/useComputeNodeState.ts
+import { useCallback, useEffect, useState } from "react";
+import { S } from "@dxos/echo-schema";
+import { invariant as invariant2 } from "@dxos/invariant";
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-canvas-compute/src/hooks/useComputeNodeState.ts";
+var useComputeNodeState = (shape) => {
+  const { controller } = useComputeContext();
+  invariant2(controller, void 0, {
+    F: __dxlog_file2,
+    L: 32,
+    S: void 0,
+    A: [
+      "controller",
+      ""
+    ]
+  });
+  const [meta, setMeta] = useState();
+  useEffect(() => {
+    let disposed = false;
+    queueMicrotask(async () => {
+      invariant2(shape.node, "Node not specified", {
+        F: __dxlog_file2,
+        L: 38,
+        S: void 0,
+        A: [
+          "shape.node",
+          "'Node not specified'"
+        ]
+      });
+      const node = controller.getComputeNode(shape.node);
+      const meta2 = await controller.getMeta(node);
+      if (disposed) {
+        return;
+      }
+      setMeta(meta2);
+    });
+    return () => {
+      disposed = true;
+    };
+  }, [
+    shape.node
+  ]);
+  const evalNode = useCallback(() => {
+    return controller.evalNode(shape.node);
+  }, [
+    shape.node
+  ]);
+  const subscribeToEventLog = useCallback((cb) => {
+    return controller.events.on((ev) => {
+      if (ev.nodeId === shape.node) {
+        cb(ev);
+      }
+    });
+  }, [
+    shape.node
+  ]);
+  return {
+    node: controller.getComputeNode(shape.node),
+    meta: meta ?? {
+      input: S.Struct({}),
+      output: S.Struct({})
+    },
+    runtime: {
+      inputs: controller.getInputs(shape.node),
+      outputs: controller.getOutputs(shape.node),
+      setOutput: (property, value) => {
+        controller.setOutput(shape.node, property, value);
+      },
+      evalNode,
+      subscribeToEventLog
+    }
+  };
+};
+
+// packages/ui/react-ui-canvas-compute/src/hooks/useGraphMonitor.ts
+import { useMemo } from "react";
+import { ComputeGraphModel, DEFAULT_INPUT, DEFAULT_OUTPUT } from "@dxos/conductor";
+import { ObjectId as ObjectId2 } from "@dxos/echo-schema";
+import { invariant as invariant3 } from "@dxos/invariant";
+import { DXN } from "@dxos/keys";
+import { getSpace } from "@dxos/react-client/echo";
+import { nonNullable } from "@dxos/util";
+var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-canvas-compute/src/hooks/useGraphMonitor.ts";
+var mapEdge = (graph, { source, target, output = DEFAULT_OUTPUT, input = DEFAULT_INPUT }) => {
+  const sourceNode = graph.findNode(source);
+  const targetNode = graph.findNode(target);
+  invariant3(sourceNode?.node, void 0, {
+    F: __dxlog_file3,
+    L: 27,
+    S: void 0,
+    A: [
+      "sourceNode?.node",
+      ""
+    ]
+  });
+  invariant3(targetNode?.node, void 0, {
+    F: __dxlog_file3,
+    L: 28,
+    S: void 0,
+    A: [
+      "targetNode?.node",
+      ""
+    ]
+  });
+  return {
+    id: ObjectId2.random(),
+    source: sourceNode.node,
+    target: targetNode.node,
+    output,
+    input
+  };
+};
+var useGraphMonitor = (model) => {
+  return useMemo(() => {
+    return {
+      onCreate: ({ node }) => {
+        if (!model) {
+          return;
+        }
+        invariant3(node.type, void 0, {
+          F: __dxlog_file3,
+          L: 53,
+          S: void 0,
+          A: [
+            "node.type",
+            ""
+          ]
+        });
+        if (!isValidComputeNode(node.type)) {
+          return;
+        }
+        const computeNode = createComputeNode(node);
+        if (node.type === "trigger") {
+          linkTriggerToCompute(model, computeNode, node);
+        }
+        model.addNode(computeNode);
+        node.node = computeNode.id;
+      },
+      onLink: ({ graph, edge }) => {
+        if (model) {
+          model.addEdge(mapEdge(graph, edge));
+        }
+      },
+      onDelete: ({ subgraph }) => {
+        if (model) {
+          const nodeIds = subgraph.nodes.map((shape) => shape.node);
+          const edgeIds = subgraph.edges.map(({ source, target, output = DEFAULT_OUTPUT, input = DEFAULT_INPUT }) => {
+            return model.edges.find((computeEdge) => computeEdge.input === input && computeEdge.output === output)?.id;
+          }).filter(nonNullable);
+          model.removeNodes(nodeIds);
+          model.removeEdges(edgeIds);
+          deleteTriggerObjects(model, subgraph);
+        }
+      }
+    };
+  }, [
+    model
+  ]);
+};
+var createComputeGraph = (graph) => {
+  const computeGraph = ComputeGraphModel.create();
+  if (graph) {
+    for (const shape of graph.nodes) {
+      if (isValidComputeNode(shape.type)) {
+        const node = createComputeNode(shape);
+        computeGraph.addNode(node);
+        shape.node = node.id;
+      }
+    }
+    for (const edge of graph.edges) {
+      computeGraph.addEdge(mapEdge(graph, edge));
+    }
+  }
+  return computeGraph;
+};
+var linkTriggerToCompute = (graph, computeNode, triggerData) => {
+  const functionTrigger = triggerData.functionTrigger?.target;
+  invariant3(functionTrigger, void 0, {
+    F: __dxlog_file3,
+    L: 116,
+    S: void 0,
+    A: [
+      "functionTrigger",
+      ""
+    ]
+  });
+  functionTrigger.function = DXN.fromLocalObjectId(graph.root.id).toString();
+  functionTrigger.meta ??= {};
+  functionTrigger.meta.computeNodeId = computeNode.id;
+};
+var deleteTriggerObjects = (computeGraph, deleted) => {
+  const space = getSpace(computeGraph.root);
+  if (!space) {
+    return;
+  }
+  for (const node of deleted.nodes) {
+    if (node.type === "trigger") {
+      const trigger = node;
+      space.db.remove(trigger.functionTrigger.target);
+    }
+  }
+};
+
+// packages/ui/react-ui-canvas-compute/src/graph/controller.ts
+function _ts_decorate(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-canvas-compute/src/graph/controller.ts";
+var InvalidStateError = Error;
+var AUTO_TRIGGER_NODES = [
+  "chat",
+  "switch",
+  "constant"
+];
+var createComputeGraphController = (graph, services) => {
+  const computeGraph = createComputeGraph(graph);
+  const controller = new ComputeGraphController(computeGraph);
+  controller.setServices(services ?? {});
+  return {
+    controller,
+    graph
+  };
+};
+var ComputeGraphController = class extends Resource {
+  constructor(_graph) {
+    super();
+    this._graph = _graph;
+    this._executor = new GraphExecutor({
+      computeNodeResolver: (node) => resolveComputeNode(node)
+    });
+    this._diagnostics = [];
+    this._services = {};
+    this._forcedOutputs = {};
+    this._runtimeStateInputs = {};
+    this._runtimeStateOutputs = {};
+    this.update = new Event();
+    this.output = new Event();
+    this.events = new Event();
+  }
+  toJSON() {
+    return {
+      graph: this._graph,
+      state: {
+        inputs: this._runtimeStateInputs,
+        outputs: this._runtimeStateOutputs
+      },
+      forcedOutputs: this._forcedOutputs
+    };
+  }
+  setServices(services) {
+    Object.assign(this._services, services);
+  }
+  get graph() {
+    return this._graph;
+  }
+  get diagnostics() {
+    return this._diagnostics;
+  }
+  get userState() {
+    return this._forcedOutputs;
+  }
+  get inputStates() {
+    return this._runtimeStateInputs;
+  }
+  get outputStates() {
+    return this._runtimeStateOutputs;
+  }
+  /**
+  * Inputs and outputs for all nodes.
+  */
+  get state() {
+    const ids = [
+      .../* @__PURE__ */ new Set([
+        ...Object.keys(this._runtimeStateInputs),
+        ...Object.keys(this._runtimeStateOutputs)
+      ])
+    ];
+    return Object.fromEntries(ids.map((id) => [
+      id,
+      {
+        node: this._graph.getNode(id),
+        input: this._runtimeStateInputs[id],
+        output: this._runtimeStateOutputs[id]
+      }
+    ]));
+  }
+  addNode(node) {
+    this._graph.addNode(node);
+  }
+  addEdge(edge) {
+    this._graph.addEdge(edge);
+  }
+  getComputeNode(nodeId) {
+    return this._graph.getNode(nodeId);
+  }
+  getInputs(nodeId) {
+    return this._runtimeStateInputs[nodeId] ?? {};
+  }
+  getOutputs(nodeId) {
+    return this._runtimeStateOutputs[nodeId] ?? {};
+  }
+  setOutput(nodeId, property, value) {
+    this._forcedOutputs[nodeId] ??= {};
+    this._forcedOutputs[nodeId][property] = value;
+    queueMicrotask(async () => {
+      try {
+        await this.exec(nodeId);
+      } catch (err) {
+        log.catch(err, void 0, {
+          F: __dxlog_file4,
+          L: 215,
+          S: this,
+          C: (f, a) => f(...a)
+        });
+      }
+    });
+  }
+  async getMeta(node) {
+    const { meta } = await resolveComputeNode(node);
+    return meta;
+  }
+  async checkGraph() {
+    const executor = this._executor.clone();
+    await executor.load(this._graph);
+    this._diagnostics = executor.getDiagnostics();
+  }
+  async evalNode(nodeId) {
+    const executor = this._executor.clone();
+    await executor.load(this._graph);
+    for (const [nodeId2, outputs] of Object.entries(this._forcedOutputs)) {
+      executor.setOutputs(nodeId2, Effect.succeed(makeValueBag(outputs)));
+    }
+    const services = this._createServiceLayer();
+    await Effect.runPromise(Effect.gen(this, function* () {
+      const scope = yield* Scope.make();
+      const executable = yield* Effect.promise(() => resolveComputeNode(this._graph.getNode(nodeId)));
+      const computingOutputs = executable.exec != null;
+      const effect = (computingOutputs ? executor.computeOutputs(nodeId) : executor.computeInputs(nodeId)).pipe(Effect.withSpan("runGraph"), Effect.provide(services), Scope.extend(scope), Effect.flatMap(computeValueBag), Effect.withSpan("test"), Effect.tap((values) => {
+        for (const [key, value] of Object.entries(values)) {
+          if (computingOutputs) {
+            this._onOutputComputed(nodeId, key, value);
+          } else {
+            this._onInputComputed(nodeId, key, value);
+          }
+        }
+      }));
+      yield* effect;
+      yield* Scope.close(scope, Exit.void);
+    }));
+    this.update.emit();
+  }
+  /**
+  * Executes the graph.
+  * @param startFromNode - Node to start from, otherwise all {@link AUTO_TRIGGER_NODES} are executed.
+  */
+  async exec(startFromNode) {
+    this._runtimeStateInputs = {};
+    this._runtimeStateOutputs = {};
+    const executor = this._executor.clone();
+    await executor.load(this._graph);
+    for (const [nodeId, outputs] of Object.entries(this._forcedOutputs)) {
+      executor.setOutputs(nodeId, Effect.succeed(makeValueBag(outputs)));
+    }
+    const triggerNodes = startFromNode != null ? [
+      this._graph.getNode(startFromNode)
+    ] : this._graph.nodes.filter((node) => node.type != null && AUTO_TRIGGER_NODES.includes(node.type));
+    const allAffectedNodes = [
+      ...new Set(triggerNodes.flatMap((node) => executor.getAllDependantNodes(node.id)))
+    ];
+    const services = this._createServiceLayer();
+    await Effect.runPromise(Effect.gen(this, function* () {
+      const scope = yield* Scope.make();
+      const tasks = [];
+      for (const node of allAffectedNodes) {
+        const executable = yield* Effect.promise(() => resolveComputeNode(this._graph.getNode(node)));
+        const computingOutputs = executable.exec != null;
+        const effect = (computingOutputs ? executor.computeOutputs(node) : executor.computeInputs(node)).pipe(Effect.withSpan("runGraph"), Effect.provide(services), Scope.extend(scope), Effect.flatMap(computeValueBag), Effect.withSpan("test"), Effect.tap((values) => {
+          for (const [key, value] of Object.entries(values)) {
+            if (computingOutputs) {
+              this._onOutputComputed(node, key, value);
+            } else {
+              this._onInputComputed(node, key, value);
+            }
+          }
+        }));
+        tasks.push(effect);
+      }
+      yield* Effect.all(tasks);
+      yield* Scope.close(scope, Exit.void);
+    }));
+    this.update.emit();
+  }
+  _createServiceLayer() {
+    const services = {
+      ...DEFAULT_SERVICES,
+      ...this._services
+    };
+    const logLayer = Layer.succeed(EventLogger, this._createLogger());
+    const gptLayer = Layer.succeed(GptService, services.gpt);
+    const queueLayer = services.edgeHttpClient != null ? QueueService.fromClient(services.edgeHttpClient) : QueueService.notAvailable;
+    const spaceLayer = services.spaceService != null ? Layer.succeed(SpaceService, services.spaceService) : SpaceService.empty;
+    return Layer.mergeAll(logLayer, gptLayer, queueLayer, spaceLayer);
+  }
+  _createLogger() {
+    return {
+      log: (event) => {
+        this._handleEvent(event);
+      },
+      nodeId: void 0
+    };
+  }
+  _handleEvent(event) {
+    log("handleEvent", {
+      event
+    }, {
+      F: __dxlog_file4,
+      L: 365,
+      S: this,
+      C: (f, a) => f(...a)
+    });
+    switch (event.type) {
+      case "compute-input": {
+        this._onInputComputed(event.nodeId, event.property, {
+          type: "executed",
+          value: event.value
+        });
+        break;
+      }
+      case "compute-output": {
+        this._onOutputComputed(event.nodeId, event.property, {
+          type: "executed",
+          value: event.value
+        });
+        break;
+      }
+    }
+    this.events.emit(event);
+  }
+  _onInputComputed(nodeId, property, value) {
+    this._runtimeStateInputs[nodeId] ??= {};
+    this._runtimeStateInputs[nodeId][property] = value;
+  }
+  _onOutputComputed(nodeId, property, value) {
+    this._runtimeStateOutputs[nodeId] ??= {};
+    this._runtimeStateOutputs[nodeId][property] = value;
+    this.output.emit({
+      nodeId,
+      property,
+      value
+    });
+  }
+};
+_ts_decorate([
+  synchronized
+], ComputeGraphController.prototype, "checkGraph", null);
+_ts_decorate([
+  synchronized
+], ComputeGraphController.prototype, "exec", null);
+var DEFAULT_SERVICES = {
+  gpt: new MockGpt()
+};
+var computeValueBag = (bag) => {
+  return Effect.all(Object.entries(bag.values).map(([key, eff]) => Effect.either(eff).pipe(Effect.map((value) => {
+    if (Either.isLeft(value)) {
+      if (isNotExecuted(value.left)) {
+        return [
+          key,
+          {
+            type: "not-executed"
+          }
+        ];
+      } else {
+        return [
+          key,
+          {
+            type: "error",
+            error: value.left
+          }
+        ];
+      }
+    } else {
+      return [
+        key,
+        {
+          type: "executed",
+          value: value.right
+        }
+      ];
+    }
+  })))).pipe(Effect.map((entries) => Object.fromEntries(entries)));
+};
+
+// packages/ui/react-ui-canvas-compute/src/registry.ts
+import { noteShape } from "@dxos/react-ui-canvas-editor";
+
+// packages/ui/react-ui-canvas-compute/src/shapes/common/Box.tsx
+import React, { forwardRef } from "react";
+import { invariant as invariant4 } from "@dxos/invariant";
+import { Icon, IconButton } from "@dxos/react-ui";
+import { useEditorContext, useShapeDef } from "@dxos/react-ui-canvas-editor";
+import { mx } from "@dxos/react-ui-theme";
+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__ */ forwardRef(({ children, classNames, shape, title, status, open, onAction }, forwardedRef) => {
+  invariant4(shape.type, void 0, {
+    F: __dxlog_file5,
+    L: 30,
+    S: void 0,
+    A: [
+      "shape.type",
+      ""
+    ]
+  });
+  const { icon, name, openable } = useShapeDef(shape.type) ?? {
+    icon: "ph--placeholder--regular"
+  };
+  const { debug } = useEditorContext();
+  return /* @__PURE__ */ React.createElement("div", {
+    ref: forwardedRef,
+    className: "flex flex-col h-full w-full justify-between"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "flex shrink-0 w-full justify-between items-center h-[32px] bg-hoverSurface"
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    icon,
+    classNames: "mx-2"
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: "grow text-sm truncate"
+  }, debug ? shape.type : name ?? shape.text ?? title), /* @__PURE__ */ React.createElement(IconButton, {
+    classNames: "p-1 text-green-500",
+    variant: "ghost",
+    icon: "ph--play--regular",
+    size: 4,
+    label: "run",
+    iconOnly: true,
+    onDoubleClick: (ev) => ev.stopPropagation(),
+    onClick: (ev) => {
+      ev.stopPropagation();
+      onAction?.("run");
+    }
+  })), /* @__PURE__ */ React.createElement("div", {
+    className: mx("flex flex-col h-full grow overflow-hidden", classNames)
+  }, children), /* @__PURE__ */ React.createElement("div", {
+    className: "flex shrink-0 w-full justify-between items-center h-[32px] bg-hoverSurface"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "grow px-2 text-sm truncate"
+  }, debug ? shape.id : status), openable && /* @__PURE__ */ React.createElement(IconButton, {
+    classNames: "p-1",
+    variant: "ghost",
+    icon: open ? "ph--caret-up--regular" : "ph--caret-down--regular",
+    size: 4,
+    label: open ? "close" : "open",
+    iconOnly: true,
+    onClick: (ev) => {
+      ev.stopPropagation();
+      onAction?.(open ? "close" : "open");
+    }
+  })));
+});
+
+// packages/ui/react-ui-canvas-compute/src/shapes/common/FunctionBody.tsx
+import React2, { useRef, useState as useState2 } from "react";
+import { VoidInput, VoidOutput } from "@dxos/conductor";
+import { AST as AST2 } from "@dxos/echo-schema";
+import { useCanvasContext } from "@dxos/react-ui-canvas";
+import { getParentShapeElement, createAnchors, rowHeight } from "@dxos/react-ui-canvas-editor";
+
+// packages/ui/react-ui-canvas-compute/src/shapes/defs.ts
+import { AST } from "@effect/schema";
+import { DEFAULT_INPUT as DEFAULT_INPUT2, DEFAULT_OUTPUT as DEFAULT_OUTPUT2 } from "@dxos/conductor";
+import { ObjectId as ObjectId3, S as S2 } from "@dxos/echo-schema";
+import { Polygon } from "@dxos/react-ui-canvas-editor";
+var getProperties = (ast) => AST.getPropertySignatures(ast).map(({ name }) => ({
+  name: name.toString()
+}));
+var createAnchorId = (kind, property = kind === "input" ? DEFAULT_INPUT2 : DEFAULT_OUTPUT2) => [
+  kind,
+  property
+].join(".");
+var parseAnchorId = (id) => {
+  const parts = id.match(/(input|output)\.(.+)/);
+  return parts ? parts.slice(1) : [
+    void 0,
+    id
+  ];
+};
+var ComputeShape = S2.extend(Polygon, S2.Struct({
+  // TODO(burdon): Rename computeNode?
+  node: S2.optional(ObjectId3.annotations({
+    [AST.DescriptionAnnotationId]: "Compute node id"
+  }))
+}).pipe(S2.mutable));
+var createShape = ({ id, ...rest }) => {
+  return {
+    id: id ?? ObjectId3.random(),
+    ...rest
+  };
+};
+
+// packages/ui/react-ui-canvas-compute/src/shapes/common/FunctionBody.tsx
+var bodyPadding = 8;
+var expandedHeight = 200;
+var FunctionBody = ({ shape, name, content, inputSchema = VoidInput, outputSchema = VoidOutput, ...props }) => {
+  const { scale } = useCanvasContext();
+  const rootRef = useRef(null);
+  const [open, setOpen] = useState2(false);
+  const handleAction = (action) => {
+    if (!rootRef.current) {
+      return;
+    }
+    switch (action) {
+      case "open": {
+        const el = getParentShapeElement(rootRef.current, shape.id);
+        const { height } = el.getBoundingClientRect();
+        el.style.height = `${height / scale + expandedHeight}px`;
+        setOpen(true);
+        break;
+      }
+      case "close": {
+        const el = getParentShapeElement(rootRef.current, shape.id);
+        el.style.height = "";
+        setOpen(false);
+        break;
+      }
+    }
+  };
+  const inputs = getProperties(inputSchema.ast);
+  const outputs = getProperties(outputSchema.ast);
+  const columnCount = inputs.length && outputs.length ? 2 : 1;
+  return /* @__PURE__ */ React2.createElement(Box, {
+    ref: rootRef,
+    shape,
+    title: name,
+    classNames: "divide-y divide-separator",
+    open,
+    onAction: handleAction,
+    ...props
+  }, /* @__PURE__ */ React2.createElement("div", {
+    className: `grid grid-cols-${columnCount} items-center`,
+    style: {
+      paddingTop: bodyPadding,
+      paddingBottom: bodyPadding
+    }
+  }, (inputs?.length ?? 0) > 0 && /* @__PURE__ */ React2.createElement("div", {
+    className: "flex flex-col"
+  }, inputs?.map(({ name: name2 }) => /* @__PURE__ */ React2.createElement("div", {
+    key: name2,
+    className: "px-2 truncate text-sm font-mono items-center",
+    style: {
+      height: rowHeight
+    }
+  }, name2))), (outputs?.length ?? 0) > 0 && /* @__PURE__ */ React2.createElement("div", {
+    className: "flex flex-col"
+  }, outputs?.map(({ name: name2 }) => /* @__PURE__ */ React2.createElement("div", {
+    key: name2,
+    className: "px-2 truncate text-sm font-mono items-center text-right",
+    style: {
+      height: rowHeight
+    }
+  }, name2)))), open && /* @__PURE__ */ React2.createElement("div", {
+    className: "flex flex-col grow overflow-hidden"
+  }, content));
+};
+var getHeight = (input) => {
+  const properties = AST2.getPropertySignatures(input.ast);
+  return headerHeight + footerHeight + bodyPadding * 2 + properties.length * rowHeight + 2;
+};
+var createFunctionAnchors = (shape, input = VoidInput, output = VoidOutput) => {
+  const inputs = AST2.getPropertySignatures(input.ast).map(({ name }) => createAnchorId("input", name.toString()));
+  const outputs = AST2.getPropertySignatures(output.ast).map(({ name }) => createAnchorId("output", name.toString()));
+  return createAnchors({
+    shape,
+    inputs,
+    outputs,
+    center: {
+      x: 0,
+      y: (headerHeight - footerHeight) / 2 + 1
+    }
+  });
+};
+
+// packages/ui/react-ui-canvas-compute/src/shapes/common/TypeSelect.tsx
+import React3 from "react";
+import { ComputeValueType } from "@dxos/conductor";
+import { Select } from "@dxos/react-ui";
+var TypeSelect = ({ value, onValueChange }) => {
+  return /* @__PURE__ */ React3.createElement(Select.Root, {
+    value,
+    onValueChange
+  }, /* @__PURE__ */ React3.createElement(Select.TriggerButton, {
+    variant: "ghost",
+    classNames: "w-full !px-0"
+  }), /* @__PURE__ */ React3.createElement(Select.Portal, null, /* @__PURE__ */ React3.createElement(Select.Content, null, /* @__PURE__ */ React3.createElement(Select.ScrollUpButton, null), /* @__PURE__ */ React3.createElement(Select.Viewport, null, ComputeValueType.literals.map((type) => /* @__PURE__ */ React3.createElement(Select.Option, {
+    key: type,
+    value: type
+  }, type))), /* @__PURE__ */ React3.createElement(Select.ScrollDownButton, null), /* @__PURE__ */ React3.createElement(Select.Arrow, null))));
+};
+
+// packages/ui/react-ui-canvas-compute/src/shapes/Array.tsx
+import React4 from "react";
+import { ReducerInput, ReducerOutput } from "@dxos/conductor";
+import { S as S3 } from "@dxos/echo-schema";
+var ReducerShape = S3.extend(ComputeShape, S3.Struct({
+  type: S3.Literal("reducer")
+}));
+var ReducerComponent = ({ shape }) => {
+  return /* @__PURE__ */ React4.createElement(FunctionBody, {
+    shape,
+    inputSchema: ReducerInput,
+    outputSchema: ReducerOutput
+  });
+};
+var createReducer = ({ id, size = {
+  width: 192,
+  height: getHeight(ReducerInput)
+}, ...rest }) => createShape({
+  type: "reducer",
+  size,
+  ...rest
+});
+var reducerShape = {
+  type: "reducer",
+  name: "Reducer",
+  icon: "ph--repeat--regular",
+  component: (props) => /* @__PURE__ */ React4.createElement(ReducerComponent, props),
+  createShape: createReducer,
+  getAnchors: (shape) => createFunctionAnchors(shape, ReducerInput, ReducerOutput)
+};
+
+// packages/ui/react-ui-canvas-compute/src/shapes/Append.tsx
+import React5 from "react";
+import { AppendInput } from "@dxos/conductor";
+import { S as S4 } from "@dxos/echo-schema";
+var AppendShape = S4.extend(ComputeShape, S4.Struct({
+  type: S4.Literal("append")
+}));
+var createAppend = (props) => createShape({
+  type: "append",
+  size: {
+    width: 128,
+    height: getHeight(AppendInput)
+  },
+  ...props
+});
+var AppendComponent = ({ shape }) => {
+  return /* @__PURE__ */ React5.createElement(FunctionBody, {
+    shape,
+    inputSchema: AppendInput
+  });
+};
+var appendShape = {
+  type: "append",
+  name: "Append",
+  icon: "ph--list-plus--regular",
+  component: AppendComponent,
+  createShape: createAppend,
+  getAnchors: (shape) => createFunctionAnchors(shape, AppendInput)
+};
+
+// packages/ui/react-ui-canvas-compute/src/shapes/Audio.tsx
+import React6, { useEffect as useEffect2, useState as useState3 } from "react";
+import { S as S5 } from "@dxos/echo-schema";
+import { Icon as Icon2 } from "@dxos/react-ui";
+import { createAnchorMap } from "@dxos/react-ui-canvas-editor";
+var AudioShape = S5.extend(ComputeShape, S5.Struct({
+  type: S5.Literal("audio")
+}));
+var createAudio = (props) => createShape({
+  type: "audio",
+  size: {
+    width: 64,
+    height: 64
+  },
+  ...props
+});
+var AudioComponent = ({ shape }) => {
+  const { node } = useComputeNodeState(shape);
+  const [active, setActive] = useState3(false);
+  useEffect2(() => {
+    node.value = active;
+  }, [
+    active
+  ]);
+  return /* @__PURE__ */ React6.createElement("div", {
+    className: "flex w-full justify-center items-center"
+  }, /* @__PURE__ */ React6.createElement(Icon2, {
+    icon: active ? "ph--microphone--regular" : "ph--microphone-slash--regular",
+    classNames: [
+      "transition opacity-20 duration-1000",
+      active && "opacity-100 text-red-500"
+    ],
+    size: 8,
+    onClick: () => setActive(!active)
+  }));
+};
+var audioShape = {
+  type: "audio",
+  name: "Audio",
+  icon: "ph--microphone--regular",
+  component: AudioComponent,
+  createShape: createAudio,
+  getAnchors: (shape) => createAnchorMap(shape, {
+    [createAnchorId("output")]: {
+      x: 1,
+      y: 0
+    }
+  })
+};
+
+// packages/ui/react-ui-canvas-compute/src/shapes/Beacon.tsx
+import React7 from "react";
+import { DEFAULT_INPUT as DEFAULT_INPUT3, isTruthy } from "@dxos/conductor";
+import { S as S6 } from "@dxos/echo-schema";
+import { Icon as Icon3 } from "@dxos/react-ui";
+import { createAnchorMap as createAnchorMap2 } from "@dxos/react-ui-canvas-editor";
+import { mx as mx2 } from "@dxos/react-ui-theme";
+var BeaconShape = S6.extend(ComputeShape, S6.Struct({
+  type: S6.Literal("beacon")
+}));
+var createBeacon = (props) => createShape({
+  type: "beacon",
+  size: {
+    width: 64,
+    height: 64
+  },
+  ...props
+});
+var BeaconComponent = ({ shape }) => {
+  const { runtime } = useComputeNodeState(shape);
+  const input = runtime.inputs[DEFAULT_INPUT3];
+  const value = input?.type === "executed" ? input.value : false;
+  return /* @__PURE__ */ React7.createElement("div", {
+    className: "flex w-full justify-center items-center"
+  }, /* @__PURE__ */ React7.createElement(Icon3, {
+    icon: "ph--sun--regular",
+    classNames: mx2("transition opacity-20 duration-1000", isTruthy(value) && "opacity-100 text-yellow-500"),
+    size: 8
+  }));
+};
+var beaconShape = {
+  type: "beacon",
+  name: "Beacon",
+  icon: "ph--sun--regular",
+  component: BeaconComponent,
+  createShape: createBeacon,
+  getAnchors: (shape) => createAnchorMap2(shape, {
+    [createAnchorId("input")]: {
+      x: -1,
+      y: 0
+    }
+  })
+};
+
+// packages/ui/react-ui-canvas-compute/src/shapes/Boolean.tsx
+import React8 from "react";
+import { S as S7 } from "@dxos/echo-schema";
+import { createAnchors as createAnchors2, getAnchorPoints } from "@dxos/react-ui-canvas-editor";
+var GateShape = S7.extend(ComputeShape, S7.Struct({
+  type: S7.String
+}));
+var createGate = (props) => createShape({
+  size: {
+    width: 64,
+    height: 64
+  },
+  ...props
+});
+var GateComponent = (Symbol2) => () => {
+  return /* @__PURE__ */ React8.createElement("div", {
+    className: "flex w-full justify-center items-center"
+  }, /* @__PURE__ */ React8.createElement(Symbol2, null));
+};
+var defineShape = ({ type, name, icon, Symbol: Symbol2, createShape: createShape2, inputs, outputs = [
+  createAnchorId("output")
+] }) => ({
+  type,
+  name,
+  icon,
+  component: GateComponent(Symbol2),
+  createShape: createShape2,
+  getAnchors: (shape) => createAnchors2({
+    shape,
+    inputs,
+    outputs
+  })
+});
+var Symbol = (pathConstructor, inputs) => ({
+  width = 64,
+  height = 32,
+  // TODO(burdon): Same as line color.
+  className = "fill-neutral-200 dark:fill-neutral-800 stroke-neutral-500",
+  strokeWidth = 1
+}) => {
+  const startX = width * 0.25;
+  const endX = width * 0.75;
+  const centerY = height / 2;
+  const paths = pathConstructor({
+    startX,
+    endX,
+    height
+  });
+  return /* @__PURE__ */ React8.createElement("svg", {
+    viewBox: `0 0 ${width} ${height}`,
+    className: "w-full h-full"
+  }, getAnchorPoints({
+    x: 0,
+    y: centerY
+  }, inputs).map(({ x, y }, i) => /* @__PURE__ */ React8.createElement("line", {
+    key: i,
+    x1: x,
+    y1: y,
+    x2: startX * 1.3,
+    y2: y,
+    strokeWidth,
+    className
+  })), /* @__PURE__ */ React8.createElement("line", {
+    x1: endX,
+    y1: centerY,
+    x2: width,
+    y2: centerY,
+    strokeWidth,
+    className
+  }), paths.map((path, i) => /* @__PURE__ */ React8.createElement("path", {
+    key: i,
+    d: path,
+    strokeWidth,
+    className
+  })));
+};
+var AndSymbol = Symbol(({ startX, endX, height }) => {
+  const arcRadius = (endX - startX) / 2;
+  return [
+    `
+    M ${startX},${height * 0.1}
+    L ${endX - arcRadius},${height * 0.1}
+    A ${arcRadius},${height * 0.4} 0 0 1 ${endX - arcRadius},${height * 0.9}
+    L ${startX},${height * 0.9}
+    Z
+  `
+  ];
+}, 2);
+var AndShape = GateShape;
+var createAnd = (props) => {
+  return createGate({
+    ...props,
+    type: "and"
+  });
+};
+var andShape = defineShape({
+  type: "and",
+  name: "AND",
+  icon: "ph--intersection--regular",
+  Symbol: AndSymbol,
+  createShape: createAnd,
+  inputs: [
+    "input.a",
+    "input.b"
+  ]
+});
+var OrSymbol = Symbol(({ startX, endX, height }) => {
+  const arcRadius = (endX - startX) / 2;
+  return [
+    `
+    M ${startX},${height * 0.1}
+    L ${endX - arcRadius},${height * 0.1}
+    A ${arcRadius},${height * 0.4} 0 0 1 ${endX - arcRadius},${height * 0.9}
+    L ${startX},${height * 0.9}
+    C ${startX * 1.4},${height * 0.5} ${startX * 1.4},${height * 0.5} ${startX},${height * 0.1}
+    Z
+  `
+  ];
+}, 2);
+var OrShape = GateShape;
+var createOr = (props) => {
+  return createGate({
+    ...props,
+    type: "or"
+  });
+};
+var orShape = defineShape({
+  type: "or",
+  name: "OR",
+  icon: "ph--union--regular",
+  Symbol: OrSymbol,
+  createShape: createOr,
+  inputs: [
+    "input.a",
+    "input.b"
+  ]
+});
+var NotSymbol = Symbol(({ startX, endX, height }) => {
+  return [
+    `
+    M ${startX},${height * 0.1}
+    L ${endX * 0.9},${height * 0.5}
+    L ${startX},${height * 0.9}
+    Z
+    `,
+    `
+    M ${endX - height * 0.2},${height * 0.5}
+    A ${height * 0.1} ${height * 0.1} 0 0 1 ${endX},${height * 0.5}
+    A ${height * 0.1} ${height * 0.1} 0 0 1 ${endX - height * 0.2},${height * 0.5}
+    Z
+  `
+  ];
+}, 1);
+var NotShape = GateShape;
+var createNot = (props) => {
+  return createGate({
+    ...props,
+    type: "not"
+  });
+};
+var notShape = defineShape({
+  type: "not",
+  name: "NOT",
+  icon: "ph--x--regular",
+  Symbol: NotSymbol,
+  createShape: createNot,
+  inputs: [
+    createAnchorId("input")
+  ]
+});
+
+// packages/ui/react-ui-canvas-compute/src/shapes/Chat.tsx
+import React9, { useRef as useRef2 } from "react";
+import { DEFAULT_OUTPUT as DEFAULT_OUTPUT3 } from "@dxos/conductor";
+import { S as S8 } from "@dxos/echo-schema";
+import { TextBox } from "@dxos/react-ui-canvas-editor";
+import { createAnchorMap as createAnchorMap3 } from "@dxos/react-ui-canvas-editor";
+var ChatShape = S8.extend(ComputeShape, S8.Struct({
+  type: S8.Literal("chat")
+}));
+var TextInputComponent = ({ shape, title, ...props }) => {
+  const { runtime } = useComputeNodeState(shape);
+  const inputRef = useRef2(null);
+  const handleEnter = (text) => {
+    const value = text.trim();
+    if (value.length) {
+      runtime.setOutput(DEFAULT_OUTPUT3, value);
+      inputRef.current?.setText("");
+    }
+  };
+  return /* @__PURE__ */ React9.createElement(Box, {
+    shape,
+    title
+  }, /* @__PURE__ */ React9.createElement(TextBox, {
+    ref: inputRef,
+    onEnter: handleEnter,
+    ...props
+  }));
+};
+var createChat = (props) => createShape({
+  type: "chat",
+  size: {
+    width: 256,
+    height: 128
+  },
+  ...props
+});
+var chatShape = {
+  type: "chat",
+  name: "Chat",
+  icon: "ph--textbox--regular",
+  component: (props) => /* @__PURE__ */ React9.createElement(TextInputComponent, {
+    ...props,
+    title: "Prompt",
+    placeholder: "Message"
+  }),
+  createShape: createChat,
+  getAnchors: (shape) => createAnchorMap3(shape, {
+    [createAnchorId("output")]: {
+      x: 1,
+      y: 0
+    }
+  }),
+  resizable: true
+};
+
+// packages/ui/react-ui-canvas-compute/src/shapes/Constant.tsx
+import React10, { useCallback as useCallback2, useRef as useRef3, useState as useState4 } from "react";
+import { ComputeValueType as ComputeValueType2 } from "@dxos/conductor";
+import { S as S9 } from "@dxos/echo-schema";
+import { Input } from "@dxos/react-ui";
+import { TextBox as TextBox2 } from "@dxos/react-ui-canvas-editor";
+import { createAnchorMap as createAnchorMap4 } from "@dxos/react-ui-canvas-editor";
+import { safeParseJson } from "@dxos/util";
+var ConstantShape = S9.extend(ComputeShape, S9.Struct({
+  type: S9.Literal("constant"),
+  value: S9.optional(S9.Any)
+}));
+var inferType = (value) => {
+  if (typeof value === "string") {
+    return "string";
+  } else if (typeof value === "number") {
+    return "number";
+  } else if (typeof value === "boolean") {
+    return "boolean";
+  } else if (typeof value === "object") {
+    return "object";
+  }
+};
+var ConstantComponent = ({ shape, title, chat, ...props }) => {
+  const { node } = useComputeNodeState(shape);
+  const [type, setType] = useState4(inferType(node.value) ?? ComputeValueType2.literals[0]);
+  const inputRef = useRef3(null);
+  const handleEnter = useCallback2((text) => {
+    const value = text.trim();
+    if (value.length) {
+      if (type === "number") {
+        const floatValue = parseFloat(value);
+        if (!isNaN(floatValue)) {
+          node.value = floatValue;
+        }
+      } else if (type === "object") {
+        node.value = safeParseJson(value, {});
+      } else {
+        node.value = value;
+      }
+      inputRef.current?.focus();
+    }
+  }, [
+    type
+  ]);
+  return /* @__PURE__ */ React10.createElement(Box, {
+    shape,
+    title,
+    status: /* @__PURE__ */ React10.createElement(TypeSelect, {
+      value: type,
+      onValueChange: setType
+    })
+  }, (type === "string" || type === "number") && /* @__PURE__ */ React10.createElement(TextBox2, {
+    ...props,
+    ref: inputRef,
+    value: node.value,
+    onEnter: handleEnter
+  }), type === "object" && /* @__PURE__ */ React10.createElement(TextBox2, {
+    ...props,
+    ref: inputRef,
+    value: JSON.stringify(node.value, null, 2),
+    language: "json"
+  }), type === "boolean" && /* @__PURE__ */ React10.createElement("div", {
+    className: "flex grow justify-center items-center"
+  }, /* @__PURE__ */ React10.createElement(Input.Root, null, /* @__PURE__ */ React10.createElement(Input.Switch, {
+    checked: node.value,
+    onCheckedChange: (value) => {
+      node.value = value;
+    }
+  }))));
+};
+var createConstant = (props) => createShape({
+  type: "constant",
+  size: {
+    width: 192,
+    height: 128
+  },
+  ...props
+});
+var constantShape = {
+  type: "constant",
+  name: "Value",
+  icon: "ph--dots-three-circle--regular",
+  component: (props) => /* @__PURE__ */ React10.createElement(ConstantComponent, {
+    ...props,
+    placeholder: "Constant"
+  }),
+  createShape: createConstant,
+  getAnchors: (shape) => createAnchorMap4(shape, {
+    [createAnchorId("output")]: {
+      x: 1,
+      y: 0
+    }
+  }),
+  resizable: true
+};
+
+// packages/ui/react-ui-canvas-compute/src/shapes/Database.tsx
+import React11 from "react";
+import { S as S10 } from "@dxos/echo-schema";
+import { createAnchorMap as createAnchorMap5 } from "@dxos/react-ui-canvas-editor";
+var DatabaseShape = S10.extend(ComputeShape, S10.Struct({
+  type: S10.Literal("database")
+}));
+var createDatabase = (props) => createShape({
+  type: "database",
+  size: {
+    width: 128,
+    height: 64
+  },
+  ...props
+});
+var DatabaseComponent = ({ shape }) => {
+  return /* @__PURE__ */ React11.createElement(Box, {
+    shape
+  });
+};
+var databaseShape = {
+  type: "database",
+  name: "ECHO",
+  icon: "ph--database--regular",
+  component: DatabaseComponent,
+  createShape: createDatabase,
+  getAnchors: (shape) => createAnchorMap5(shape, {
+    [createAnchorId("output")]: {
+      x: 1,
+      y: 0
+    }
+  })
+};
+
+// packages/ui/react-ui-canvas-compute/src/shapes/Function.tsx
+import React12 from "react";
+import { AnyOutput, FunctionInput } from "@dxos/conductor";
+import { S as S11 } from "@dxos/echo-schema";
+var FunctionShape = S11.extend(ComputeShape, S11.Struct({
+  type: S11.Literal("function")
+}));
+var createFunction = (props) => createShape({
+  type: "function",
+  size: {
+    width: 192,
+    height: getHeight(FunctionInput)
+  },
+  ...props
+});
+var FunctionComponent = ({ shape }) => {
+  return /* @__PURE__ */ React12.createElement(FunctionBody, {
+    shape,
+    inputSchema: FunctionInput,
+    outputSchema: AnyOutput
+  });
+};
+var functionShape = {
+  type: "function",
+  name: "Function",
+  icon: "ph--function--regular",
+  component: FunctionComponent,
+  createShape: createFunction,
+  // TODO(burdon): Get dynamic schema.
+  getAnchors: (shape) => createFunctionAnchors(shape, FunctionInput, AnyOutput)
+};
+
+// packages/ui/react-ui-canvas-compute/src/shapes/Gpt.tsx
+import React13, { useEffect as useEffect3, useState as useState5 } from "react";
+import { GptInput, GptOutput } from "@dxos/conductor";
+import { S as S12 } from "@dxos/echo-schema";
+var GptShape = S12.extend(ComputeShape, S12.Struct({
+  type: S12.Literal("gpt")
+}));
+var createGpt = (props) => createShape({
+  type: "gpt",
+  size: {
+    width: 256,
+    height: Math.max(getHeight(GptInput), getHeight(GptOutput))
+  },
+  ...props
+});
+var GptComponent = ({ shape }) => {
+  const { meta, runtime } = useComputeNodeState(shape);
+  const [text, setText] = useState5("");
+  const [tokens, setTokens] = useState5(0);
+  useEffect3(() => {
+    return runtime.subscribeToEventLog((ev) => {
+      switch (ev.type) {
+        case "begin-compute": {
+          setText("");
+          break;
+        }
+        case "custom": {
+          const token = ev.event;
+          switch (token.type) {
+            case "content_block_delta":
+              switch (token.delta.type) {
+                case "text_delta": {
+                  const delta = token.delta.text;
+                  setText((prev) => {
+                    const text2 = prev + delta;
+                    setTokens(text2.split(" ").length);
+                    return text2;
+                  });
+                  break;
+                }
+              }
+              break;
+          }
+          break;
+        }
+      }
+    });
+  }, [
+    runtime?.subscribeToEventLog
+  ]);
+  return /* @__PURE__ */ React13.createElement(FunctionBody, {
+    shape,
+    content: /* @__PURE__ */ React13.createElement("div", {
+      className: "px-2 py-1 overflow-y-scroll"
+    }, text),
+    status: `${tokens} tokens`,
+    inputSchema: meta.input,
+    outputSchema: meta.output
+  });
+};
+var gptShape = {
+  type: "gpt",
+  name: "GPT",
+  icon: "ph--brain--regular",
+  component: GptComponent,
+  createShape: createGpt,
+  getAnchors: (shape) => createFunctionAnchors(shape, GptInput, GptOutput),
+  openable: true
+};
+
+// packages/ui/react-ui-canvas-compute/src/shapes/Json.tsx
+import React14 from "react";
+import { DEFAULT_INPUT as DEFAULT_INPUT4, DefaultOutput, JsonTransformInput } from "@dxos/conductor";
+import { S as S13 } from "@dxos/echo-schema";
+import { createAnchorMap as createAnchorMap6 } from "@dxos/react-ui-canvas-editor";
+import { JsonFilter } from "@dxos/react-ui-syntax-highlighter";
+var JsonShape = S13.extend(ComputeShape, S13.Struct({
+  type: S13.Literal("json")
+}));
+var JsonTransformShape = S13.extend(ComputeShape, S13.Struct({
+  type: S13.Literal("json-transform")
+}));
+var JsonComponent = ({ shape, ...props }) => {
+  const { runtime } = useComputeNodeState(shape);
+  const input = runtime.inputs[DEFAULT_INPUT4];
+  const value = input?.type === "executed" ? input.value : void 0;
+  return /* @__PURE__ */ React14.createElement(Box, {
+    shape
+  }, /* @__PURE__ */ React14.createElement(JsonFilter, {
+    data: value,
+    classNames: "text-xs"
+  }));
+};
+var JsonTransformComponent = ({ shape, ...props }) => {
+  return /* @__PURE__ */ React14.createElement(Box, {
+    shape
+  });
+};
+var createJson = (props) => createShape({
+  type: "json",
+  size: {
+    width: 256,
+    height: 256
+  },
+  ...props
+});
+var jsonShape = {
+  type: "json",
+  name: "JSON",
+  icon: "ph--code--regular",
+  component: (props) => /* @__PURE__ */ React14.createElement(JsonComponent, props),
+  createShape: createJson,
+  getAnchors: (shape) => createAnchorMap6(shape, {
+    [createAnchorId("input")]: {
+      x: -1,
+      y: 0
+    },
+    [createAnchorId("output")]: {
+      x: 1,
+      y: 0
+    }
+  }),
+  resizable: true
+};
+var createJsonTransform = (props) => createShape({
+  type: "json-transform",
+  size: {
+    width: 128,
+    height: getHeight(JsonTransformInput)
+  },
+  ...props
+});
+var jsonTransformShape = {
+  type: "json-transform",
+  name: "Transform",
+  icon: "ph--shuffle-simple--regular",
+  component: (props) => /* @__PURE__ */ React14.createElement(JsonTransformComponent, props),
+  createShape: createJsonTransform,
+  getAnchors: (shape) => createFunctionAnchors(shape, JsonTransformInput, DefaultOutput),
+  resizable: true
+};
+
+// packages/ui/react-ui-canvas-compute/src/shapes/Logic.tsx
+import React15 from "react";
+import { IfElseInput, IfElseOutput, IfInput, IfOutput } from "@dxos/conductor";
+import { S as S14 } from "@dxos/echo-schema";
+var IfShape = S14.extend(ComputeShape, S14.Struct({
+  type: S14.Literal("if")
+}));
+var IfElseShape = S14.extend(ComputeShape, S14.Struct({
+  type: S14.Literal("if-else")
+}));
+var IfComponent = ({ shape, ...props }) => {
+  return /* @__PURE__ */ React15.createElement(FunctionBody, {
+    shape,
+    inputSchema: IfInput,
+    outputSchema: IfOutput
+  });
+};
+var IfElseComponent = ({ shape, ...props }) => {
+  return /* @__PURE__ */ React15.createElement(FunctionBody, {
+    shape,
+    inputSchema: IfElseInput,
+    outputSchema: IfElseOutput
+  });
+};
+var createIf = (props) => createShape({
+  type: "if",
+  size: {
+    width: 192,
+    height: getHeight(IfInput)
+  },
+  ...props
+});
+var ifShape = {
+  type: "if",
+  name: "IF",
+  icon: "ph--arrows-split--regular",
+  component: (props) => /* @__PURE__ */ React15.createElement(IfComponent, props),
+  createShape: createIf,
+  getAnchors: (shape) => createFunctionAnchors(shape, IfInput, IfOutput)
+};
+var createIfElse = (props) => createShape({
+  type: "if-else",
+  size: {
+    width: 192,
+    height: getHeight(IfElseInput)
+  },
+  ...props
+});
+var ifElseShape = {
+  type: "if-else",
+  name: "IF/ELSE",
+  icon: "ph--arrows-merge--regular",
+  component: (props) => /* @__PURE__ */ React15.createElement(IfElseComponent, props),
+  createShape: createIfElse,
+  getAnchors: (shape) => createFunctionAnchors(shape, IfElseInput, IfElseOutput)
+};
+
+// packages/ui/react-ui-canvas-compute/src/shapes/Queue.tsx
+import React16, { Fragment } from "react";
+import { DEFAULT_OUTPUT as DEFAULT_OUTPUT4, QueueInput, QueueOutput } from "@dxos/conductor";
+import { S as S15 } from "@dxos/echo-schema";
+import { mx as mx3 } from "@dxos/react-ui-theme";
+var QueueShape = S15.extend(ComputeShape, S15.Struct({
+  type: S15.Literal("queue")
+}));
+var createQueue = (props) => createShape({
+  type: "queue",
+  size: {
+    width: 256,
+    height: 512
+  },
+  ...props
+});
+var QueueComponent = ({ shape }) => {
+  const { runtime } = useComputeNodeState(shape);
+  const items = runtime.outputs[DEFAULT_OUTPUT4]?.type === "executed" ? runtime.outputs[DEFAULT_OUTPUT4].value : [];
+  const handleAction = (action) => {
+    if (action === "run") {
+      runtime.evalNode();
+    }
+  };
+  return /* @__PURE__ */ React16.createElement(Box, {
+    shape,
+    status: `${items.length} items`,
+    onAction: handleAction
+  }, /* @__PURE__ */ React16.createElement("div", {
+    className: "flex flex-col w-full overflow-y-scroll divide-y divide-separator"
+  }, [
+    ...items
+  ].map((item, i) => /* @__PURE__ */ React16.createElement(QueueItem, {
+    key: i,
+    classNames: "p-1 px-2",
+    item
+  }))));
+};
+var QueueItem = ({ classNames, item }) => {
+  if (typeof item !== "object") {
+    return /* @__PURE__ */ React16.createElement("div", {
+      className: mx3(classNames, "whitespace-pre-wrap")
+    }, item);
+  }
+  return /* @__PURE__ */ React16.createElement("div", {
+    className: mx3("grid grid-cols-[80px,1fr]", classNames)
+  }, Object.entries(item).map(([key, value]) => /* @__PURE__ */ React16.createElement(Fragment, {
+    key
+  }, /* @__PURE__ */ React16.createElement("div", {
+    className: "p-1 text-xs text-subdued"
+  }, key), /* @__PURE__ */ React16.createElement("div", null, typeof value === "string" ? value : JSON.stringify(value)))));
+};
+var queueShape = {
+  type: "queue",
+  name: "Queue",
+  icon: "ph--queue--regular",
+  component: QueueComponent,
+  createShape: createQueue,
+  getAnchors: (shape) => createFunctionAnchors(shape, QueueInput, QueueOutput),
+  resizable: true
+};
+
+// packages/ui/react-ui-canvas-compute/src/shapes/RNG.tsx
+import React17, { useEffect as useEffect4, useState as useState6 } from "react";
+import { DEFAULT_OUTPUT as DEFAULT_OUTPUT5 } from "@dxos/conductor";
+import { S as S16 } from "@dxos/echo-schema";
+import { Icon as Icon4 } from "@dxos/react-ui";
+import { createAnchorMap as createAnchorMap7 } from "@dxos/react-ui-canvas-editor";
+import { mx as mx4 } from "@dxos/react-ui-theme";
+var RandomShape = S16.extend(ComputeShape, S16.Struct({
+  type: S16.Literal("rng"),
+  min: S16.optional(S16.Number),
+  max: S16.optional(S16.Number)
+}));
+var createRandom = (props) => createShape({
+  type: "rng",
+  size: {
+    width: 64,
+    height: 64
+  },
+  ...props
+});
+var icons = [
+  "ph--dice-one--regular",
+  "ph--dice-two--regular",
+  "ph--dice-three--regular",
+  "ph--dice-four--regular",
+  "ph--dice-five--regular",
+  "ph--dice-six--regular"
+];
+var pickIcon = () => icons[Math.floor(Math.random() * icons.length)];
+var RandomComponent = ({ shape }) => {
+  const { runtime } = useComputeNodeState(shape);
+  const [spin, setSpin] = useState6(false);
+  const [icon, setIcon] = useState6(pickIcon());
+  useEffect4(() => {
+    if (!spin) {
+      return;
+    }
+    const i = setInterval(() => setIcon(pickIcon()), 250);
+    const t1 = setTimeout(() => clearInterval(i), 900);
+    const t2 = setTimeout(() => setSpin(false), 1100);
+    return () => {
+      clearInterval(i);
+      clearTimeout(t1);
+      clearTimeout(t2);
+    };
+  }, [
+    spin
+  ]);
+  const handleClick = (ev) => {
+    ev.stopPropagation();
+    runtime.setOutput(DEFAULT_OUTPUT5, Math.random());
+    setSpin(true);
+  };
+  return /* @__PURE__ */ React17.createElement("div", {
+    className: "flex grow items-center justify-center"
+  }, /* @__PURE__ */ React17.createElement(Icon4, {
+    icon,
+    classNames: mx4(spin && "animate-[spin_1s]"),
+    size: 10,
+    onClick: handleClick
+  }));
+};
+var randomShape = {
+  type: "rng",
+  name: "Random",
+  icon: "ph--dice-six--regular",
+  component: RandomComponent,
+  createShape: createRandom,
+  getAnchors: (shape) => createAnchorMap7(shape, {
+    [createAnchorId("output")]: {
+      x: 1,
+      y: 0
+    }
+  })
+};
+
+// packages/ui/react-ui-canvas-compute/src/shapes/Scope.tsx
+import React18 from "react";
+import { DEFAULT_INPUT as DEFAULT_INPUT5 } from "@dxos/conductor";
+import { S as S17 } from "@dxos/echo-schema";
+import { createAnchorMap as createAnchorMap8 } from "@dxos/react-ui-canvas-editor";
+import { useAudioStream, Chaos, shaderPresets } from "@dxos/react-ui-sfx";
+var ScopeShape = S17.extend(ComputeShape, S17.Struct({
+  type: S17.Literal("scope")
+}));
+var createScope = (props) => createShape({
+  type: "scope",
+  size: {
+    width: 128,
+    height: 128
+  },
+  classNames: "rounded-full border-primary-800",
+  ...props
+});
+var ScopeComponent = ({ shape }) => {
+  const { runtime } = useComputeNodeState(shape);
+  const input = runtime.inputs[DEFAULT_INPUT5];
+  const active = input?.type === "executed" ? input.value : false;
+  const { getAverage } = useAudioStream(active);
+  return /* @__PURE__ */ React18.createElement("div", {
+    className: "flex w-full justify-center items-center bg-black"
+  }, /* @__PURE__ */ React18.createElement(Chaos, {
+    active,
+    getValue: getAverage,
+    options: {
+      ...shaderPresets.heptapod,
+      zoom: 1.2
+    }
+  }));
+};
+var scopeShape = {
+  type: "scope",
+  name: "Scope",
+  icon: "ph--waveform--regular",
+  component: ScopeComponent,
+  createShape: createScope,
+  getAnchors: (shape) => createAnchorMap8(shape, {
+    [createAnchorId("input")]: {
+      x: -1,
+      y: 0
+    }
+  })
+};
+
+// packages/ui/react-ui-canvas-compute/src/shapes/Surface.tsx
+import React19 from "react";
+import { Surface } from "@dxos/app-framework";
+import { DEFAULT_INPUT as DEFAULT_INPUT6 } from "@dxos/conductor";
+import { S as S18 } from "@dxos/echo-schema";
+import { createAnchorMap as createAnchorMap9 } from "@dxos/react-ui-canvas-editor";
+var SurfaceShape = S18.extend(ComputeShape, S18.Struct({
+  type: S18.Literal("surface")
+}));
+var createSurface = (props) => createShape({
+  type: "surface",
+  size: {
+    width: 384,
+    height: 384
+  },
+  ...props
+});
+var SurfaceComponent = ({ shape }) => {
+  const { runtime } = useComputeNodeState(shape);
+  const input = runtime.inputs[DEFAULT_INPUT6];
+  const value = input?.type === "executed" ? input.value : null;
+  const handleAction = (action) => {
+    if (action === "run") {
+      runtime.evalNode();
+    }
+  };
+  return /* @__PURE__ */ React19.createElement(Box, {
+    shape,
+    onAction: handleAction
+  }, value !== null && /* @__PURE__ */ React19.createElement(Surface, {
+    role: "canvas-node",
+    data: {
+      value
+    },
+    limit: 1
+  }));
+};
+var surfaceShape = {
+  type: "surface",
+  name: "Surface",
+  icon: "ph--frame-corners--regular",
+  component: SurfaceComponent,
+  createShape: createSurface,
+  getAnchors: (shape) => createAnchorMap9(shape, {
+    [createAnchorId("input")]: {
+      x: -1,
+      y: 0
+    }
+  }),
+  resizable: true
+};
+
+// packages/ui/react-ui-canvas-compute/src/shapes/Switch.tsx
+import React20, { useEffect as useEffect5, useState as useState7 } from "react";
+import { DEFAULT_OUTPUT as DEFAULT_OUTPUT6 } from "@dxos/conductor";
+import { S as S19 } from "@dxos/echo-schema";
+import { Input as Input2 } from "@dxos/react-ui";
+import { createAnchorMap as createAnchorMap10 } from "@dxos/react-ui-canvas-editor";
+var SwitchShape = S19.extend(ComputeShape, S19.Struct({
+  type: S19.Literal("switch")
+}));
+var createSwitch = (props) => createShape({
+  type: "switch",
+  size: {
+    width: 64,
+    height: 64
+  },
+  ...props
+});
+var SwitchComponent = ({ shape }) => {
+  const { runtime } = useComputeNodeState(shape);
+  const [value, setValue] = useState7(false);
+  useEffect5(() => {
+    runtime.setOutput(DEFAULT_OUTPUT6, value);
+  }, [
+    value
+  ]);
+  return /* @__PURE__ */ React20.createElement("div", {
+    className: "flex w-full justify-center items-center",
+    onClick: (ev) => ev.stopPropagation()
+  }, /* @__PURE__ */ React20.createElement(Input2.Root, null, /* @__PURE__ */ React20.createElement(Input2.Switch, {
+    checked: value,
+    onCheckedChange: (value2) => setValue(value2)
+  })));
+};
+var switchShape = {
+  type: "switch",
+  name: "Switch",
+  icon: "ph--toggle-left--regular",
+  component: SwitchComponent,
+  createShape: createSwitch,
+  getAnchors: (shape) => createAnchorMap10(shape, {
+    [createAnchorId("output")]: {
+      x: 1,
+      y: 0
+    }
+  })
+};
+
+// packages/ui/react-ui-canvas-compute/src/shapes/Table.tsx
+import React21 from "react";
+import { createInputSchema, createOutputSchema, GptMessage } from "@dxos/conductor";
+import { S as S20 } from "@dxos/echo-schema";
+var InputSchema = createInputSchema(GptMessage);
+var OutputSchema = createOutputSchema(S20.mutable(S20.Array(GptMessage)));
+var TableShape = S20.extend(ComputeShape, S20.Struct({
+  type: S20.Literal("table")
+}));
+var createTable = (props) => createShape({
+  type: "table",
+  size: {
+    width: 320,
+    height: 512
+  },
+  ...props
+});
+var TableComponent = ({ shape }) => {
+  return /* @__PURE__ */ React21.createElement(Box, {
+    shape
+  });
+};
+var tableShape = {
+  type: "table",
+  name: "Table",
+  icon: "ph--table--regular",
+  component: TableComponent,
+  createShape: createTable,
+  getAnchors: (shape) => createFunctionAnchors(shape, InputSchema, OutputSchema),
+  resizable: true
+};
+
+// packages/ui/react-ui-canvas-compute/src/shapes/Template.tsx
+import React22, { useRef as useRef4 } from "react";
+import { ComputeValueType as ComputeValueType3, getTemplateInputSchema as getTemplateInputSchema2, TemplateOutput, VoidInput as VoidInput2 } from "@dxos/conductor";
+import { S as S21, toJsonSchema as toJsonSchema2 } from "@dxos/echo-schema";
+import { invariant as invariant5 } from "@dxos/invariant";
+import { TextBox as TextBox3 } from "@dxos/react-ui-canvas-editor";
+var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-canvas-compute/src/shapes/Template.tsx";
+var TemplateShape = S21.extend(ComputeShape, S21.Struct({
+  type: S21.Literal("template"),
+  valueType: S21.optional(ComputeValueType3)
+}));
+var TextInputComponent2 = ({ shape, title, ...props }) => {
+  const { node } = useComputeNodeState(shape);
+  const inputRef = useRef4(null);
+  const handleEnter = (text) => {
+    const value = text.trim();
+    if (value.length) {
+      const schema = getTemplateInputSchema2(node);
+      node.value = value;
+      node.inputSchema = toJsonSchema2(schema);
+    }
+  };
+  const handleTypeChange = (newType) => {
+    invariant5(S21.is(ComputeValueType3)(newType), "Invalid type", {
+      F: __dxlog_file6,
+      L: 57,
+      S: void 0,
+      A: [
+        "S.is(ComputeValueType)(newType)",
+        "'Invalid type'"
+      ]
+    });
+    node.valueType = newType;
+    node.inputSchema = toJsonSchema2(getTemplateInputSchema2(node));
+  };
+  return /* @__PURE__ */ React22.createElement(Box, {
+    shape,
+    title: "Template",
+    status: /* @__PURE__ */ React22.createElement(TypeSelect, {
+      value: node.valueType ?? "string",
+      onValueChange: handleTypeChange
+    })
+  }, /* @__PURE__ */ React22.createElement(TextBox3, {
+    ...props,
+    ref: inputRef,
+    value: node.value,
+    language: node.valueType === "object" ? "json" : void 0,
+    onBlur: handleEnter,
+    onEnter: handleEnter
+  }));
+};
+var createTemplate = (props) => createShape({
+  type: "template",
+  size: {
+    width: 256,
+    height: 384
+  },
+  ...props
+});
+var templateShape = {
+  type: "template",
+  name: "Template",
+  icon: "ph--article--regular",
+  component: (props) => /* @__PURE__ */ React22.createElement(TextInputComponent2, {
+    ...props,
+    placeholder: "Prompt"
+  }),
+  createShape: createTemplate,
+  getAnchors: (shape) => createFunctionAnchors(shape, VoidInput2, TemplateOutput),
+  resizable: true
+};
+
+// packages/ui/react-ui-canvas-compute/src/shapes/Text.tsx
+import React23 from "react";
+import { DEFAULT_INPUT as DEFAULT_INPUT7 } from "@dxos/conductor";
+import { S as S22 } from "@dxos/echo-schema";
+import { TextBox as TextBox4 } from "@dxos/react-ui-canvas-editor";
+import { createAnchorMap as createAnchorMap11 } from "@dxos/react-ui-canvas-editor";
+var TextShape = S22.extend(ComputeShape, S22.Struct({
+  type: S22.Literal("text")
+}));
+var createText = (props) => createShape({
+  type: "text",
+  size: {
+    width: 384,
+    height: 384
+  },
+  ...props
+});
+var TextComponent = ({ shape }) => {
+  const { runtime } = useComputeNodeState(shape);
+  const input = runtime.inputs[DEFAULT_INPUT7];
+  const value = input?.type === "executed" ? input.value : 0;
+  const handleAction = (action) => {
+    if (action === "run") {
+      runtime.evalNode();
+    }
+  };
+  return /* @__PURE__ */ React23.createElement(Box, {
+    shape,
+    onAction: handleAction
+  }, /* @__PURE__ */ React23.createElement(TextBox4, {
+    value
+  }));
+};
+var textShape = {
+  type: "text",
+  name: "Text",
+  icon: "ph--article--regular",
+  component: TextComponent,
+  createShape: createText,
+  getAnchors: (shape) => createAnchorMap11(shape, {
+    [createAnchorId("input")]: {
+      x: -1,
+      y: 0
+    }
+  }),
+  resizable: true
+};
+
+// packages/ui/react-ui-canvas-compute/src/shapes/Thread.tsx
+import React24, { useEffect as useEffect6, useRef as useRef5 } from "react";
+import { createInputSchema as createInputSchema2, createOutputSchema as createOutputSchema2, GptMessage as GptMessage2 } from "@dxos/conductor";
+import { S as S23 } from "@dxos/echo-schema";
+import { mx as mx5 } from "@dxos/react-ui-theme";
+var InputSchema2 = createInputSchema2(GptMessage2);
+var OutputSchema2 = createOutputSchema2(S23.mutable(S23.Array(GptMessage2)));
+var ThreadShape = S23.extend(ComputeShape, S23.Struct({
+  type: S23.Literal("thread")
+}));
+var createThread = (props) => createShape({
+  type: "thread",
+  size: {
+    width: 384,
+    height: 384
+  },
+  ...props
+});
+var ThreadComponent = ({ shape }) => {
+  const items = [];
+  const scrollRef = useRef5(null);
+  useEffect6(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [
+    items
+  ]);
+  return /* @__PURE__ */ React24.createElement(Box, {
+    shape
+  }, /* @__PURE__ */ React24.createElement("div", {
+    ref: scrollRef,
+    className: "flex flex-col w-full overflow-y-scroll gap-2 p-2"
+  }, [
+    ...items
+  ].map((item, i) => /* @__PURE__ */ React24.createElement(ThreadItem, {
+    key: i,
+    item
+  }))));
+};
+var ThreadItem = ({ classNames, item }) => {
+  if (typeof item !== "object") {
+    return /* @__PURE__ */ React24.createElement("div", {
+      className: mx5(classNames)
+    }, item);
+  }
+  const { role, message } = item;
+  return /* @__PURE__ */ React24.createElement("div", {
+    className: mx5("flex", classNames, role === "user" && "justify-end")
+  }, /* @__PURE__ */ React24.createElement("div", {
+    className: mx5("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));
+};
+var threadShape = {
+  type: "thread",
+  name: "Thread",
+  icon: "ph--chats-circle--regular",
+  component: ThreadComponent,
+  createShape: createThread,
+  getAnchors: (shape) => createFunctionAnchors(shape, InputSchema2, OutputSchema2),
+  resizable: true
+};
+
+// packages/ui/react-ui-canvas-compute/src/shapes/TextToImage.tsx
+import React25 from "react";
+import { S as S24 } from "@dxos/echo-schema";
+import { createAnchorMap as createAnchorMap12 } from "@dxos/react-ui-canvas-editor";
+var TextToImageShape = S24.extend(ComputeShape, S24.Struct({
+  type: S24.Literal("text-to-image")
+}));
+var createTextToImage = (props) => createShape({
+  type: "text-to-image",
+  size: {
+    width: 128,
+    height: 64
+  },
+  ...props
+});
+var TextToImageComponent = ({ shape }) => {
+  return /* @__PURE__ */ React25.createElement(Box, {
+    shape
+  });
+};
+var textToImageShape = {
+  type: "text-to-image",
+  name: "Image",
+  icon: "ph--image--regular",
+  component: TextToImageComponent,
+  createShape: createTextToImage,
+  getAnchors: (shape) => createAnchorMap12(shape, {
+    [createAnchorId("output")]: {
+      x: 1,
+      y: 0
+    }
+  })
+};
+
+// packages/ui/react-ui-canvas-compute/src/shapes/Trigger.tsx
+import React26, { useEffect as useEffect7 } from "react";
+import { EmailTriggerOutput, SubscriptionTriggerOutput, TimerTriggerOutput, VoidInput as VoidInput3, WebhookTriggerOutput } from "@dxos/conductor";
+import { Ref, S as S25 } from "@dxos/echo-schema";
+import { FunctionTrigger, TriggerKind } from "@dxos/functions";
+import { create, makeRef } from "@dxos/react-client/echo";
+import { Select as Select2 } from "@dxos/react-ui";
+var TriggerShape = S25.extend(ComputeShape, S25.Struct({
+  type: S25.Literal("trigger"),
+  functionTrigger: S25.optional(Ref(FunctionTrigger))
+}));
+var createTrigger = (props) => {
+  const functionTrigger = create(FunctionTrigger, {
+    enabled: true,
+    spec: createTriggerSpec(props.triggerKind ?? TriggerKind.Email)
+  });
+  return createShape({
+    type: "trigger",
+    functionTrigger: makeRef(functionTrigger),
+    size: {
+      width: 192,
+      height: getHeight(EmailTriggerOutput)
+    },
+    ...props
+  });
+};
+var TriggerComponent = ({ shape }) => {
+  const functionTrigger = shape.functionTrigger?.target;
+  useEffect7(() => {
+    if (functionTrigger && !functionTrigger.spec) {
+      functionTrigger.spec = createTriggerSpec(TriggerKind.Email);
+    }
+  }, [
+    functionTrigger,
+    functionTrigger?.spec
+  ]);
+  useEffect7(() => {
+    shape.size.height = getHeight(getOutputSchema(functionTrigger?.spec?.type ?? TriggerKind.Email));
+  }, [
+    functionTrigger?.spec?.type
+  ]);
+  const setKind = (kind) => {
+    if (functionTrigger?.spec?.type !== kind) {
+      functionTrigger.spec = createTriggerSpec(kind);
+    }
+  };
+  if (!functionTrigger?.spec) {
+    return;
+  }
+  return /* @__PURE__ */ React26.createElement(FunctionBody, {
+    shape,
+    status: /* @__PURE__ */ React26.createElement(TriggerKindSelect, {
+      value: functionTrigger.spec?.type,
+      onValueChange: (kind) => setKind(kind)
+    }),
+    inputSchema: VoidInput3,
+    outputSchema: getOutputSchema(functionTrigger.spec.type)
+  });
+};
+var TriggerKindSelect = ({ value, onValueChange }) => {
+  return /* @__PURE__ */ React26.createElement(Select2.Root, {
+    value,
+    onValueChange
+  }, /* @__PURE__ */ React26.createElement(Select2.TriggerButton, {
+    variant: "ghost",
+    classNames: "w-full !px-0"
+  }), /* @__PURE__ */ React26.createElement(Select2.Portal, null, /* @__PURE__ */ React26.createElement(Select2.Content, null, /* @__PURE__ */ React26.createElement(Select2.ScrollUpButton, null), /* @__PURE__ */ React26.createElement(Select2.Viewport, null, Object.values(TriggerKind).map((type) => /* @__PURE__ */ React26.createElement(Select2.Option, {
+    key: type,
+    value: type
+  }, type))), /* @__PURE__ */ React26.createElement(Select2.ScrollDownButton, null), /* @__PURE__ */ React26.createElement(Select2.Arrow, null))));
+};
+var createTriggerSpec = (kind) => {
+  switch (kind) {
+    case TriggerKind.Timer:
+      return {
+        type: TriggerKind.Timer,
+        cron: "0 0 * * *"
+      };
+    case TriggerKind.Webhook:
+      return {
+        type: TriggerKind.Webhook,
+        method: "POST"
+      };
+    case TriggerKind.Subscription:
+      return {
+        type: TriggerKind.Subscription,
+        filter: {}
+      };
+    case TriggerKind.Email:
+      return {
+        type: TriggerKind.Email
+      };
+  }
+};
+var getOutputSchema = (kind) => {
+  const kindToSchema = {
+    [TriggerKind.Email]: EmailTriggerOutput,
+    [TriggerKind.Subscription]: SubscriptionTriggerOutput,
+    [TriggerKind.Timer]: TimerTriggerOutput,
+    [TriggerKind.Webhook]: WebhookTriggerOutput
+  };
+  return kindToSchema[kind];
+};
+var triggerShape = {
+  type: "trigger",
+  name: "Trigger",
+  icon: "ph--lightning--regular",
+  component: TriggerComponent,
+  createShape: createTrigger,
+  getAnchors: (shape) => createFunctionAnchors(shape, VoidInput3, getOutputSchema(shape.functionTrigger?.target?.spec?.type ?? TriggerKind.Email))
+};
+
+// packages/ui/react-ui-canvas-compute/src/shapes/GptRealtime.tsx
+import React27, { useState as useState8 } from "react";
+import { S as S26 } from "@dxos/echo-schema";
+import { log as log2 } from "@dxos/log";
+import { useConfig } from "@dxos/react-client";
+import { Icon as Icon5 } from "@dxos/react-ui";
+var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-canvas-compute/src/shapes/GptRealtime.tsx";
+var GptRealtimeShape = S26.extend(ComputeShape, S26.Struct({
+  type: S26.Literal("gpt-realtime")
+}));
+var createGptRealtime = (props) => createShape({
+  type: "gpt-realtime",
+  size: {
+    width: 256,
+    height: 256
+  },
+  ...props
+});
+var GptRealtimeComponent = ({ shape }) => {
+  const [isLive, setIsLive] = useState8(false);
+  const [isReady, setIsReady] = useState8(false);
+  const config = useConfig();
+  const start = async () => {
+    setIsLive(true);
+    try {
+      const peerConnection = new RTCPeerConnection();
+      peerConnection.ontrack = (event) => {
+        const audioElement = document.createElement("audio");
+        audioElement.srcObject = event.streams[0];
+        audioElement.autoplay = true;
+        audioElement.controls = false;
+        audioElement.style.display = "none";
+        document.body.appendChild(audioElement);
+        setIsReady(true);
+      };
+      const stream = await navigator.mediaDevices.getUserMedia({
+        audio: true
+      });
+      stream.getTracks().forEach((track) => peerConnection.addTransceiver(track, {
+        direction: "sendrecv"
+      }));
+      const offer = await peerConnection.createOffer();
+      await peerConnection.setLocalDescription(offer);
+      const aiServiceUrl = new URL("/rtc-connect", config.values.runtime?.services?.ai?.server ?? DEFAULT_AI_SERVICE_URL);
+      const response = await fetch(aiServiceUrl, {
+        method: "POST",
+        body: offer.sdp,
+        headers: {
+          "Content-Type": "application/sdp"
+        }
+      });
+      const answer = await response.text();
+      await peerConnection.setRemoteDescription({
+        sdp: answer,
+        type: "answer"
+      });
+      const dataChannel = peerConnection.createDataChannel("response");
+      const configureData = () => {
+        log2.info("Configuring data channel", void 0, {
+          F: __dxlog_file7,
+          L: 87,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        const event = {
+          type: "session.update",
+          session: {
+            modalities: [
+              "text",
+              "audio"
+            ],
+            // Provide the tools. Note they match the keys in the `fns` object above
+            tools: []
+          }
+        };
+        dataChannel.send(JSON.stringify(event));
+      };
+      dataChannel.addEventListener("open", (ev) => {
+        log2.info("Opening data channel", {
+          ev
+        }, {
+          F: __dxlog_file7,
+          L: 100,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        configureData();
+      });
+      dataChannel.addEventListener("message", async (ev) => {
+        const msg = JSON.parse(ev.data);
+        if (msg.type === "response.function_call_arguments.done") {
+        }
+      });
+    } catch (error) {
+      log2.error("Error in realtime session:", {
+        error
+      }, {
+        F: __dxlog_file7,
+        L: 140,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      throw error;
+    }
+  };
+  return /* @__PURE__ */ React27.createElement("div", {
+    className: "flex w-full justify-center items-center"
+  }, /* @__PURE__ */ React27.createElement(Icon5, {
+    icon: isReady ? "ph--waveform--regular" : isLive ? "ph--pulse--regular" : "ph--play--regular",
+    size: 16,
+    classNames: !isLive && "cursor-pointer",
+    onClick: start
+  }));
+};
+var gptRealtimeShape = {
+  type: "gpt-realtime",
+  name: "GPT Realtime",
+  icon: "ph--pulse--regular",
+  component: GptRealtimeComponent,
+  createShape: createGptRealtime,
+  // TODO(dmaretskyi): Can we fetch the schema dynamically?
+  getAnchors: (shape) => createFunctionAnchors(shape, S26.Struct({
+    audio: S26.Any
+  }), S26.Struct({})),
+  resizable: true
+};
+var DEFAULT_AI_SERVICE_URL = "http://localhost:8788";
+
+// packages/ui/react-ui-canvas-compute/src/registry.ts
+var computeShapes = [
+  {
+    title: "Inputs",
+    shapes: [
+      //
+      constantShape,
+      templateShape,
+      chatShape,
+      switchShape,
+      audioShape,
+      triggerShape,
+      randomShape
+    ]
+  },
+  {
+    title: "Transform",
+    shapes: [
+      //
+      gptShape,
+      gptRealtimeShape,
+      functionShape,
+      databaseShape,
+      textToImageShape,
+      appendShape
+    ]
+  },
+  {
+    title: "Operations",
+    shapes: [
+      //
+      ifShape,
+      ifElseShape,
+      andShape,
+      orShape,
+      notShape,
+      reducerShape,
+      jsonTransformShape
+    ]
+  },
+  {
+    title: "Outputs",
+    shapes: [
+      //
+      jsonShape,
+      queueShape,
+      threadShape,
+      textShape,
+      surfaceShape,
+      beaconShape,
+      scopeShape
+    ]
+  },
+  {
+    title: "Misc",
+    shapes: [
+      //
+      noteShape
+    ]
+  }
+];
+
+// packages/ui/react-ui-canvas-compute/src/compute-layout.ts
+import { DefaultInput, DefaultOutput as DefaultOutput2 } from "@dxos/conductor";
+import { toEffectSchema } from "@dxos/echo-schema";
+import { ShapeLayout } from "@dxos/react-ui-canvas-editor";
+var ComputeShapeLayout = class extends ShapeLayout {
+  constructor(_controller, registry2) {
+    super(registry2);
+    this._controller = _controller;
+  }
+  // TODO(burdon): Doesn't update.
+  getAnchors(shape) {
+    const shapeDef = this._registry.getShapeDef(shape.type);
+    let anchors = shapeDef?.getAnchors?.(shape) ?? {};
+    if (shape.node) {
+      const node = this._controller.graph.getNode(shape.node);
+      if (node.inputSchema || node.outputSchema) {
+        const inputSchema = node.inputSchema ? toEffectSchema(node.inputSchema) : DefaultInput;
+        const outputSchema = node.outputSchema ? toEffectSchema(node.outputSchema) : DefaultOutput2;
+        anchors = createFunctionAnchors(shape, inputSchema, outputSchema);
+      }
+    }
+    return anchors;
+  }
+};
+export {
+  AndShape,
+  AppendComponent,
+  AppendShape,
+  AudioComponent,
+  AudioShape,
+  BeaconComponent,
+  BeaconShape,
+  Box,
+  ChatShape,
+  ComputeContext,
+  ComputeGraphController,
+  ComputeShape,
+  ComputeShapeLayout,
+  ConstantComponent,
+  ConstantShape,
+  DatabaseComponent,
+  DatabaseShape,
+  FunctionBody,
+  FunctionComponent,
+  FunctionShape,
+  GptComponent,
+  GptRealtimeComponent,
+  GptRealtimeShape,
+  GptShape,
+  IfComponent,
+  IfElseComponent,
+  IfElseShape,
+  IfShape,
+  InvalidStateError,
+  JsonComponent,
+  JsonShape,
+  JsonTransformComponent,
+  JsonTransformShape,
+  NotShape,
+  OrShape,
+  QueueComponent,
+  QueueItem,
+  QueueShape,
+  RandomComponent,
+  RandomShape,
+  ReducerComponent,
+  ReducerShape,
+  ScopeComponent,
+  ScopeShape,
+  SurfaceComponent,
+  SurfaceShape,
+  SwitchComponent,
+  SwitchShape,
+  TableComponent,
+  TableShape,
+  TemplateShape,
+  TextComponent,
+  TextInputComponent,
+  TextShape,
+  TextToImageComponent,
+  TextToImageShape,
+  ThreadComponent,
+  ThreadItem,
+  ThreadShape,
+  TriggerComponent,
+  TriggerShape,
+  TypeSelect,
+  andShape,
+  appendShape,
+  audioShape,
+  beaconShape,
+  chatShape,
+  computeShapes,
+  constantShape,
+  createAnchorId,
+  createAnd,
+  createAppend,
+  createAudio,
+  createBeacon,
+  createChat,
+  createComputeGraph,
+  createComputeGraphController,
+  createComputeNode,
+  createConstant,
+  createDatabase,
+  createFunction,
+  createFunctionAnchors,
+  createGpt,
+  createGptRealtime,
+  createIf,
+  createIfElse,
+  createJson,
+  createJsonTransform,
+  createNot,
+  createOr,
+  createQueue,
+  createRandom,
+  createReducer,
+  createScope,
+  createShape,
+  createSurface,
+  createSwitch,
+  createTable,
+  createTemplate,
+  createText,
+  createTextToImage,
+  createThread,
+  createTrigger,
+  databaseShape,
+  footerHeight,
+  functionShape,
+  getHeight,
+  getProperties,
+  gptRealtimeShape,
+  gptShape,
+  headerHeight,
+  ifElseShape,
+  ifShape,
+  isValidComputeNode,
+  jsonShape,
+  jsonTransformShape,
+  mapEdge,
+  notShape,
+  orShape,
+  parseAnchorId,
+  queueShape,
+  randomShape,
+  reducerShape,
+  resolveComputeNode,
+  scopeShape,
+  surfaceShape,
+  switchShape,
+  tableShape,
+  templateShape,
+  textShape,
+  textToImageShape,
+  threadShape,
+  triggerShape,
+  useComputeContext,
+  useComputeNodeState,
+  useGraphMonitor
+};
+//# sourceMappingURL=index.mjs.map