@dxos/react-ui-canvas-compute 0.10.0 → 0.11.1

package/dist/lib/index.mjs

@@ -0,0 +1,2164 @@
+import * as Effect from "effect/Effect";
+import * as Either from "effect/Either";
+import * as Exit from "effect/Exit";
+import * as Layer from "effect/Layer";
+import * as Scope from "effect/Scope";
+import { Event, synchronized } from "@dxos/async";
+import { Operation, Script, Trace, Trigger, TriggerEvent } from "@dxos/compute";
+import { AnyOutput, AppendInput, ComputeBeginEvent, ComputeCustomEvent, ComputeEndEvent, ComputeGraphModel, ComputeInputEvent, ComputeNodeContext, ComputeOutputEvent, ComputeValueType, DEFAULT_INPUT, DEFAULT_OUTPUT, DefaultInput, DefaultOutput, FunctionInput, GptInput, GptOutput, GraphExecutor, IfElseInput, IfElseOutput, IfInput, IfOutput, JsonTransformInput, NODE_INPUT, NODE_OUTPUT, QueueInput, QueueOutput, ReducerInput, ReducerOutput, TemplateOutput, ValueBag, VoidInput, VoidOutput, createInputSchema, createOutputSchema, getTemplateInputSchema, isNotExecuted, isTruthy, registry } from "@dxos/conductor";
+import { Resource } from "@dxos/context";
+import { EffectEx } from "@dxos/effect";
+import { log } from "@dxos/log";
+import { Fragment, createContext, forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { raise } from "@dxos/debug";
+import * as Schema from "effect/Schema";
+import { invariant } from "@dxos/invariant";
+import { Filter, JsonSchema, Obj, Query, Ref, Type } from "@dxos/echo";
+import { isNonNullable, safeParseJson } from "@dxos/util";
+import { Polygon, ShapeLayout, TextBox, createAnchorMap, createAnchors, getAnchorPoints, getParentShapeElement, noteShape, rowHeight, useEditorContext, useShapeDef } from "@dxos/react-ui-canvas-editor";
+import * as SchemaAST from "effect/SchemaAST";
+import { Card, Icon, IconButton, Input, ScrollArea, Select } from "@dxos/react-ui";
+import { mx } from "@dxos/ui-theme";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCanvasContext } from "@dxos/react-ui-canvas";
+import { instanceOf } from "@dxos/echo/Obj";
+import { parseId } from "@dxos/keys";
+import { useClient, useConfig } from "@dxos/react-client";
+import { Syntax } from "@dxos/react-ui-syntax-highlighter";
+import { useAudioStream } from "@dxos/react-ui-audio";
+import { Chaos, shaderPresets } from "@dxos/react-ui-experimental";
+import { Surface } from "@dxos/app-framework/ui";
+import { AppSurface } from "@dxos/app-toolkit/ui";
+import { Message } from "@dxos/types";
+import { toEffectSchema, toJsonSchema } from "@dxos/echo/JsonSchema";
+import { useSpaces } from "@dxos/react-client/echo";
+//#region src/hooks/compute-context.ts
+var ComputeContext = createContext(null);
+var useComputeContext = () => {
+	return useContext(ComputeContext) ?? raise(/* @__PURE__ */ new Error("Missing ComputeContext"));
+};
+//#endregion
+//#region src/hooks/useComputeGraphController.ts
+var combine = (...cbs) => {
+	return () => {
+		for (const cb of cbs) cb();
+	};
+};
+var useComputeGraphController = ({ controller, graph, editorRef }) => {
+	const [, forceUpdate] = useState({});
+	useEffect(() => {
+		if (!controller || !graph) return;
+		controller.open();
+		const off = combine(controller.update.on(() => {
+			editorRef.current?.update();
+			forceUpdate({});
+		}), controller.output.on(({ nodeId, property, value }) => {
+			if (value.type === "not-executed") return;
+			const edge = graph.edges.find((edge) => {
+				return graph.getNode(edge.source).node === nodeId && edge.output === property;
+			});
+			if (edge) editorRef.current?.action?.({
+				type: "trigger",
+				edges: [edge]
+			});
+		}));
+		return () => {
+			controller.close();
+			off();
+		};
+	}, [graph, controller]);
+};
+//#endregion
+//#region src/hooks/useComputeNodeState.ts
+var __dxlog_file$6 = "/__w/dxos/dxos/packages/ui/react-ui-canvas-compute/src/hooks/useComputeNodeState.ts";
+/**
+* Runtime state of a compute node.
+*/
+var useComputeNodeState = (shape) => {
+	const { controller } = useComputeContext();
+	invariant(controller, void 0, {
+		"~LogMeta": "~LogMeta",
+		F: __dxlog_file$6,
+		L: 32,
+		S: void 0,
+		A: ["controller", ""]
+	});
+	const [meta, setMeta] = useState();
+	useEffect(() => {
+		let disposed = false;
+		queueMicrotask(async () => {
+			invariant(shape.node, "Node not specified", {
+				"~LogMeta": "~LogMeta",
+				F: __dxlog_file$6,
+				L: 38,
+				S: void 0,
+				A: ["shape.node", "'Node not specified'"]
+			});
+			const node = controller.getComputeNode(shape.node);
+			const meta = await controller.getMeta(node);
+			if (disposed) return;
+			setMeta(meta);
+		});
+		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: Schema.Struct({}),
+			output: Schema.Struct({})
+		},
+		runtime: {
+			inputs: controller.getInputs(shape.node),
+			outputs: controller.getOutputs(shape.node),
+			setOutput: (property, value) => {
+				controller.setOutput(shape.node, property, value);
+			},
+			evalNode,
+			subscribeToEventLog
+		}
+	};
+};
+//#endregion
+//#region src/hooks/useGraphMonitor.ts
+var __dxlog_file$5 = "/__w/dxos/dxos/packages/ui/react-ui-canvas-compute/src/hooks/useGraphMonitor.ts";
+/**
+* Map canvas edge to compute edge.
+*/
+var mapEdge = (graph, { source, target, output = DEFAULT_OUTPUT, input = DEFAULT_INPUT }) => {
+	const sourceNode = graph.findNode(source);
+	const targetNode = graph.findNode(target);
+	invariant(sourceNode?.node, void 0, {
+		"~LogMeta": "~LogMeta",
+		F: __dxlog_file$5,
+		L: 25,
+		S: void 0,
+		A: ["sourceNode?.node", ""]
+	});
+	invariant(targetNode?.node, void 0, {
+		"~LogMeta": "~LogMeta",
+		F: __dxlog_file$5,
+		L: 26,
+		S: void 0,
+		A: ["targetNode?.node", ""]
+	});
+	return {
+		id: Obj.ID.random(),
+		source: sourceNode.node,
+		target: targetNode.node,
+		output,
+		input
+	};
+};
+/**
+* Listens for changes to the graph and updates the compute graph.
+* @param model Compute graph to update on change.
+*/
+var useGraphMonitor = (model) => {
+	return useMemo(() => {
+		return {
+			onCreate: ({ node }) => {
+				if (!model) return;
+				invariant(node.type, void 0, {
+					"~LogMeta": "~LogMeta",
+					F: __dxlog_file$5,
+					L: 51,
+					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(isNonNullable);
+					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;
+	invariant(functionTrigger, void 0, {
+		"~LogMeta": "~LogMeta",
+		F: __dxlog_file$5,
+		L: 114,
+		S: void 0,
+		A: ["functionTrigger", ""]
+	});
+	Obj.update(functionTrigger, (functionTrigger) => {
+		functionTrigger.runnable = Ref.make(graph.root);
+		functionTrigger.inputNodeId = computeNode.id;
+	});
+};
+var deleteTriggerObjects = (computeGraph, deleted) => {
+	const db = Obj.getDatabase(computeGraph.root);
+	if (!db) return;
+	for (const node of deleted.nodes) if (node.type === "trigger") {
+		const trigger = node;
+		db.remove(trigger.functionTrigger.target);
+	}
+};
+//#endregion
+//#region src/graph/node-defs.ts
+var __dxlog_file$4 = "/__w/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}`, {
+		"~LogMeta": "~LogMeta",
+		F: __dxlog_file$4,
+		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(/* @__PURE__ */ new Error("Type not specified"));
+	return (nodeFactory[type] ?? raise(/* @__PURE__ */ new Error(`Unknown shape type: ${type}`)))(shape);
+};
+var nodeFactory = {
+	[NODE_INPUT]: () => createNode(NODE_INPUT),
+	[NODE_OUTPUT]: () => createNode(NODE_OUTPUT),
+	"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 }),
+	"make-queue": () => createNode("make-queue"),
+	"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 = structuredClone(JsonSchema.toJsonSchema(getTemplateInputSchema(node)));
+		return node;
+	},
+	"text": () => createNode("text"),
+	"thread": () => createNode("thread"),
+	"trigger": () => createNode(NODE_INPUT)
+};
+var createNode = (type, props) => ({
+	id: Obj.ID.random(),
+	type,
+	...props
+});
+//#endregion
+//#region \0@oxc-project+runtime@0.139.0/helpers/esm/decorate.js
+function __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;
+}
+//#endregion
+//#region src/graph/controller.ts
+var __dxlog_file$3 = "/__w/dxos/dxos/packages/ui/react-ui-canvas-compute/src/graph/controller.ts";
+var InvalidStateError = Error;
+/**
+* Nodes that will automatically trigger the execution of the graph on startup.
+*/
+var AUTO_TRIGGER_NODES = [
+	"chat",
+	"switch",
+	"constant"
+];
+var createComputeGraphController = (graph, computeRuntime) => {
+	return {
+		controller: new ComputeGraphController(computeRuntime, createComputeGraph(graph)),
+		graph
+	};
+};
+/**
+* Controller that manages compute graph state, execution, and service coordination.
+*/
+var ComputeGraphController = class extends Resource {
+	_computeRuntime;
+	_graph;
+	_executor = new GraphExecutor({ computeNodeResolver: (node) => resolveComputeNode(node) });
+	_diagnostics = [];
+	/**
+	* Canvas force-sets outputs of those nodes.
+	*/
+	_forcedOutputs = {};
+	/**
+	* Runtime state of the execution graph.
+	*/
+	_runtimeStateInputs = {};
+	_runtimeStateOutputs = {};
+	update = new Event();
+	/** Computed result. */
+	output = new Event();
+	events = new Event();
+	constructor(_computeRuntime, _graph) {
+		super();
+		this._computeRuntime = _computeRuntime;
+		this._graph = _graph;
+	}
+	toJSON() {
+		return {
+			graph: this._graph,
+			state: {
+				inputs: this._runtimeStateInputs,
+				outputs: this._runtimeStateOutputs
+			},
+			forcedOutputs: this._forcedOutputs
+		};
+	}
+	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, {
+					"~LogMeta": "~LogMeta",
+					F: __dxlog_file$3,
+					L: 245,
+					S: this
+				});
+			}
+		});
+	}
+	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 [nodeId, outputs] of Object.entries(this._forcedOutputs)) executor.setOutputs(nodeId, Effect.succeed(ValueBag.make(outputs)));
+		EffectEx.unwrapExit(await this._computeRuntime.runPromiseExit(Effect.gen(this, function* () {
+			const scope = yield* Scope.make();
+			const computingOutputs = (yield* Effect.promise(() => resolveComputeNode(this._graph.getNode(nodeId)))).exec != null;
+			yield* (computingOutputs ? executor.computeOutputs(nodeId) : executor.computeInputs(nodeId)).pipe(Effect.withSpan("runGraph"), Scope.extend(scope), Effect.provide(Layer.mergeAll(Layer.succeed(Trace.TraceService, this._createTraceWriter()), ComputeNodeContext.layerNoop)), 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* 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(ValueBag.make(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)))];
+		EffectEx.unwrapExit(await this._computeRuntime.runPromiseExit(Effect.gen(this, function* () {
+			const scope = yield* Scope.make();
+			const tasks = [];
+			for (const node of allAffectedNodes) {
+				const computingOutputs = (yield* Effect.promise(() => resolveComputeNode(this._graph.getNode(node)))).exec != null;
+				const effect = (computingOutputs ? executor.computeOutputs(node) : executor.computeInputs(node)).pipe(Effect.withSpan("runGraph"), Scope.extend(scope), Effect.flatMap(computeValueBag), Effect.provide(Layer.mergeAll(Layer.succeed(Trace.TraceService, this._createTraceWriter()), ComputeNodeContext.layerNoop)), 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();
+	}
+	_createTraceWriter() {
+		return { write: (eventType, payload) => {
+			const event = traceEventToComputeEvent(eventType.key, payload);
+			if (event) this._handleEvent(event);
+		} };
+	}
+	_handleEvent(event) {
+		log("handleEvent", { event }, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file$3,
+			L: 396,
+			S: this
+		});
+		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
+		});
+	}
+};
+__decorate([synchronized], ComputeGraphController.prototype, "checkGraph", null);
+__decorate([synchronized], ComputeGraphController.prototype, "exec", null);
+var traceEventToComputeEvent = (key, payload) => {
+	switch (key) {
+		case ComputeBeginEvent.key: return {
+			type: "begin-compute",
+			...payload
+		};
+		case ComputeEndEvent.key: return {
+			type: "end-compute",
+			...payload
+		};
+		case ComputeInputEvent.key: return {
+			type: "compute-input",
+			...payload
+		};
+		case ComputeOutputEvent.key: return {
+			type: "compute-output",
+			...payload
+		};
+		case ComputeCustomEvent.key: return {
+			type: "custom",
+			...payload
+		};
+		default: return;
+	}
+};
+/**
+* Waits for all effects in the bag to complete and returns the `RuntimeValue` for each property.
+*/
+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)));
+};
+//#endregion
+//#region src/shapes/common/box-defs.ts
+var headerHeight = 32;
+var footerHeight = 32;
+//#endregion
+//#region src/shapes/defs.ts
+var getProperties = (ast) => SchemaAST.getPropertySignatures(ast).map(({ name }) => ({ name: name.toString() }));
+var createAnchorId = (kind, property = kind === "input" ? DEFAULT_INPUT : DEFAULT_OUTPUT) => [kind, property].join(".");
+var parseAnchorId = (id) => {
+	const parts = id.match(/(input|output)\.(.+)/);
+	return parts ? parts.slice(1) : [void 0, id];
+};
+var ComputeShape = Schema.extend(Polygon, Schema.Struct({ node: Schema.optional(Obj.ID.annotations({ description: "Compute node id" })) }).pipe(Schema.mutable));
+var createShape = ({ id, ...rest }) => {
+	return {
+		id: id ?? Obj.ID.random(),
+		...rest
+	};
+};
+//#endregion
+//#region src/shapes/common/function-anchors.ts
+/** Vertical padding inside the function body; the height maths below depends on it. */
+var bodyPadding = 8;
+var getHeight = (input) => {
+	return 80 + SchemaAST.getPropertySignatures(input.ast).length * rowHeight + 2;
+};
+var createFunctionAnchors = (shape, input = VoidInput, output = VoidOutput) => {
+	return createAnchors({
+		shape,
+		inputs: SchemaAST.getPropertySignatures(input.ast).map(({ name }) => createAnchorId("input", name.toString())),
+		outputs: SchemaAST.getPropertySignatures(output.ast).map(({ name }) => createAnchorId("output", name.toString())),
+		center: {
+			x: 0,
+			y: 1
+		}
+	});
+};
+//#endregion
+//#region src/shapes/common/Box.tsx
+var __dxlog_file$2 = "/__w/dxos/dxos/packages/ui/react-ui-canvas-compute/src/shapes/common/Box.tsx";
+var Box = forwardRef(({ children, classNames, shape, title, status, open, onAction }, forwardedRef) => {
+	invariant(shape.type, void 0, {
+		"~LogMeta": "~LogMeta",
+		F: __dxlog_file$2,
+		L: 26,
+		S: void 0,
+		A: ["shape.type", ""]
+	});
+	const { icon, name, openable } = useShapeDef(shape.type) ?? { icon: "ph--circle-dashed--regular" };
+	const { debug } = useEditorContext();
+	return /* @__PURE__ */ jsxs("div", {
+		ref: forwardedRef,
+		className: "flex flex-col h-full w-full justify-between",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 w-full justify-between items-center h-[32px] dx-input-surface",
+				children: [
+					/* @__PURE__ */ jsx(Icon, {
+						icon,
+						classNames: "mx-2"
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "grow text-sm truncate",
+						children: debug ? shape.type : name ?? shape.text ?? title
+					}),
+					/* @__PURE__ */ jsx(IconButton, {
+						classNames: "p-1 text-green-500",
+						variant: "ghost",
+						icon: "ph--play--regular",
+						label: "run",
+						iconOnly: true,
+						onDoubleClick: (ev) => ev.stopPropagation(),
+						onClick: (ev) => {
+							ev.stopPropagation();
+							onAction?.("run");
+						}
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: mx("flex flex-col h-full grow overflow-hidden", classNames),
+				children
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 w-full justify-between items-center h-[32px] dx-input-surface",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "grow px-2 text-sm truncate",
+					children: debug ? shape.id : status
+				}), openable && /* @__PURE__ */ jsx(IconButton, {
+					classNames: "p-1",
+					variant: "ghost",
+					icon: open ? "ph--caret-up--regular" : "ph--caret-down--regular",
+					label: open ? "close" : "open",
+					iconOnly: true,
+					onClick: (ev) => {
+						ev.stopPropagation();
+						onAction?.(open ? "close" : "open");
+					}
+				})]
+			})
+		]
+	});
+});
+//#endregion
+//#region src/shapes/common/FunctionBody.tsx
+var expandedHeight = 200;
+var FunctionBody = ({ shape, name, content, inputSchema = VoidInput, outputSchema = VoidOutput, ...props }) => {
+	const { scale } = useCanvasContext();
+	const rootRef = useRef(null);
+	const [open, setOpen] = useState(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__ */ jsxs(Box, {
+		ref: rootRef,
+		shape,
+		title: name,
+		classNames: "divide-y divide-subdued-separator",
+		open,
+		onAction: handleAction,
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: `grid grid-cols-${columnCount} items-center`,
+			style: {
+				paddingTop: 8,
+				paddingBottom: 8
+			},
+			children: [(inputs?.length ?? 0) > 0 && /* @__PURE__ */ jsx("div", {
+				className: "flex flex-col",
+				children: inputs?.map(({ name }) => /* @__PURE__ */ jsx("div", {
+					className: "px-2 truncate text-sm font-mono items-center",
+					style: { height: rowHeight },
+					children: name
+				}, name))
+			}), (outputs?.length ?? 0) > 0 && /* @__PURE__ */ jsx("div", {
+				className: "flex flex-col",
+				children: outputs?.map(({ name }) => /* @__PURE__ */ jsx("div", {
+					className: "px-2 truncate text-sm font-mono items-center text-right",
+					style: { height: rowHeight },
+					children: name
+				}, name))
+			})]
+		}), open && /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col grow overflow-hidden",
+			children: content
+		})]
+	});
+};
+//#endregion
+//#region src/shapes/common/TypeSelect.tsx
+var TypeSelect = ({ value, onValueChange }) => {
+	return /* @__PURE__ */ jsxs(Select.Root, {
+		value,
+		onValueChange,
+		children: [/* @__PURE__ */ jsx(Select.TriggerButton, {
+			variant: "ghost",
+			classNames: "w-full px-0!"
+		}), /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsxs(Select.Content, { children: [
+			/* @__PURE__ */ jsx(Select.ScrollUpButton, {}),
+			/* @__PURE__ */ jsx(Select.Viewport, { children: ComputeValueType.literals.map((type) => /* @__PURE__ */ jsx(Select.Option, {
+				value: type,
+				children: type
+			}, type)) }),
+			/* @__PURE__ */ jsx(Select.ScrollDownButton, {}),
+			/* @__PURE__ */ jsx(Select.Arrow, {})
+		] }) })]
+	});
+};
+//#endregion
+//#region src/shapes/Append.tsx
+var AppendComponent = ({ shape }) => {
+	return /* @__PURE__ */ jsx(FunctionBody, {
+		shape,
+		inputSchema: AppendInput
+	});
+};
+//#endregion
+//#region src/shapes/append-def.ts
+var AppendShape = Schema.extend(ComputeShape, Schema.Struct({ type: Schema.Literal("append") }));
+var createAppend = (props) => createShape({
+	type: "append",
+	size: {
+		width: 128,
+		height: getHeight(AppendInput)
+	},
+	...props
+});
+var appendShape = {
+	type: "append",
+	name: "Append",
+	icon: "ph--list-plus--regular",
+	component: AppendComponent,
+	createShape: createAppend,
+	getAnchors: (shape) => createFunctionAnchors(shape, AppendInput)
+};
+//#endregion
+//#region src/shapes/Array.tsx
+var ReducerComponent = ({ shape }) => {
+	return /* @__PURE__ */ jsx(FunctionBody, {
+		shape,
+		inputSchema: ReducerInput,
+		outputSchema: ReducerOutput
+	});
+};
+//#endregion
+//#region src/shapes/array-def.ts
+var ReducerShape = Schema.extend(ComputeShape, Schema.Struct({ type: Schema.Literal("reducer") }));
+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: ReducerComponent,
+	createShape: createReducer,
+	getAnchors: (shape) => createFunctionAnchors(shape, ReducerInput, ReducerOutput)
+};
+//#endregion
+//#region src/shapes/Audio.tsx
+var AudioComponent = ({ shape }) => {
+	const { runtime } = useComputeNodeState(shape);
+	const [active, setActive] = useState(false);
+	useEffect(() => {
+		runtime.setOutput(DEFAULT_OUTPUT, active);
+	}, [active]);
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex w-full justify-center items-center",
+		children: /* @__PURE__ */ jsx(Icon, {
+			icon: active ? "ph--microphone--regular" : "ph--microphone-slash--regular",
+			classNames: ["transition opacity-20 duration-1000", active && "opacity-100 text-error-text"],
+			size: 8,
+			onClick: () => setActive(!active)
+		})
+	});
+};
+//#endregion
+//#region src/shapes/audio-def.ts
+var AudioShape = Schema.extend(ComputeShape, Schema.Struct({ type: Schema.Literal("audio") }));
+var createAudio = (props) => createShape({
+	type: "audio",
+	size: {
+		width: 64,
+		height: 64
+	},
+	...props
+});
+var audioShape = {
+	type: "audio",
+	name: "Audio",
+	icon: "ph--microphone--regular",
+	component: AudioComponent,
+	createShape: createAudio,
+	getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId("output")]: {
+		x: 1,
+		y: 0
+	} })
+};
+//#endregion
+//#region src/shapes/Beacon.tsx
+var BeaconComponent = ({ shape }) => {
+	const { runtime } = useComputeNodeState(shape);
+	const input = runtime.inputs[DEFAULT_INPUT];
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex w-full justify-center items-center",
+		children: /* @__PURE__ */ jsx(Icon, {
+			icon: "ph--sun--regular",
+			classNames: ["transition opacity-20 duration-1000", isTruthy(input?.type === "executed" ? input.value : false) && "opacity-100 text-yellow-500"],
+			size: 8
+		})
+	});
+};
+//#endregion
+//#region src/shapes/beacon-def.ts
+var BeaconShape = Schema.extend(ComputeShape, Schema.Struct({ type: Schema.Literal("beacon") }));
+var createBeacon = (props) => createShape({
+	type: "beacon",
+	size: {
+		width: 64,
+		height: 64
+	},
+	...props
+});
+var beaconShape = {
+	type: "beacon",
+	name: "Beacon",
+	icon: "ph--sun--regular",
+	component: BeaconComponent,
+	createShape: createBeacon,
+	getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId("input")]: {
+		x: -1,
+		y: 0
+	} })
+};
+//#endregion
+//#region src/shapes/Chat.tsx
+var TextInputComponent = ({ shape, title, ...props }) => {
+	const { runtime } = useComputeNodeState(shape);
+	const inputRef = useRef(null);
+	const handleEnter = (text) => {
+		const value = text.trim();
+		if (value.length) {
+			runtime.setOutput(DEFAULT_OUTPUT, value);
+			inputRef.current?.setText("");
+		}
+	};
+	return /* @__PURE__ */ jsx(Box, {
+		shape,
+		title,
+		children: /* @__PURE__ */ jsx(TextBox, {
+			ref: inputRef,
+			onEnter: handleEnter,
+			...props
+		})
+	});
+};
+//#endregion
+//#region src/shapes/chat-def.tsx
+var ChatShape = Schema.extend(ComputeShape, Schema.Struct({ type: Schema.Literal("chat") }));
+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__ */ jsx(TextInputComponent, {
+		...props,
+		title: "Prompt",
+		placeholder: "Message"
+	}),
+	createShape: createChat,
+	getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId("output")]: {
+		x: 1,
+		y: 0
+	} }),
+	resizable: true
+};
+//#endregion
+//#region src/shapes/Constant.tsx
+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] = useState(inferType(node.value) ?? ComputeValueType.literals[0]);
+	const inputRef = useRef(null);
+	const handleEnter = useCallback((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__ */ jsxs(Box, {
+		shape,
+		title,
+		status: /* @__PURE__ */ jsx(TypeSelect, {
+			value: type,
+			onValueChange: setType
+		}),
+		children: [
+			(type === "string" || type === "number") && /* @__PURE__ */ jsx(TextBox, {
+				...props,
+				ref: inputRef,
+				value: node.value,
+				onEnter: handleEnter
+			}),
+			type === "object" && /* @__PURE__ */ jsx(TextBox, {
+				...props,
+				ref: inputRef,
+				value: JSON.stringify(node.value, null, 2),
+				language: "json"
+			}),
+			type === "boolean" && /* @__PURE__ */ jsx("div", {
+				className: "flex grow justify-center items-center",
+				children: /* @__PURE__ */ jsx(Input.Root, { children: /* @__PURE__ */ jsx(Input.Switch, {
+					checked: node.value,
+					onCheckedChange: (value) => {
+						node.value = value;
+					}
+				}) })
+			})
+		]
+	});
+};
+//#endregion
+//#region src/shapes/constant-def.tsx
+var ConstantShape = Schema.extend(ComputeShape, Schema.Struct({
+	type: Schema.Literal("constant"),
+	value: Schema.optional(Schema.Any)
+}));
+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__ */ jsx(ConstantComponent, {
+		...props,
+		placeholder: "Constant"
+	}),
+	createShape: createConstant,
+	getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId("output")]: {
+		x: 1,
+		y: 0
+	} }),
+	resizable: true
+};
+//#endregion
+//#region src/shapes/Database.tsx
+var DatabaseComponent = ({ shape }) => {
+	return /* @__PURE__ */ jsx(Box, { shape });
+};
+//#endregion
+//#region src/shapes/database-def.ts
+var DatabaseShape = Schema.extend(ComputeShape, Schema.Struct({ type: Schema.Literal("database") }));
+var createDatabase = (props) => createShape({
+	type: "database",
+	size: {
+		width: 128,
+		height: 64
+	},
+	...props
+});
+var databaseShape = {
+	type: "database",
+	name: "ECHO",
+	icon: "ph--database--regular",
+	component: DatabaseComponent,
+	createShape: createDatabase,
+	getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId("output")]: {
+		x: 1,
+		y: 0
+	} })
+};
+//#endregion
+//#region src/shapes/Feed.tsx
+var FeedComponent = ({ shape }) => {
+	const { runtime } = useComputeNodeState(shape);
+	const items = runtime.outputs[DEFAULT_OUTPUT]?.type === "executed" ? runtime.outputs[DEFAULT_OUTPUT].value : [];
+	const handleAction = (action) => {
+		if (action === "run") runtime.evalNode();
+	};
+	return /* @__PURE__ */ jsx(Box, {
+		shape,
+		status: `${items.length} items`,
+		onAction: handleAction,
+		children: /* @__PURE__ */ jsx(ScrollArea.Root, {
+			orientation: "vertical",
+			children: /* @__PURE__ */ jsx(ScrollArea.Viewport, {
+				classNames: "divide-y divide-subdued-separator",
+				children: [...items].map((item, i) => /* @__PURE__ */ jsx(FeedItem, {
+					classNames: "p-1 px-2",
+					item
+				}, i))
+			})
+		})
+	});
+};
+var FeedItem = ({ classNames, item }) => {
+	if (typeof item !== "object") return /* @__PURE__ */ jsx("div", {
+		className: mx(classNames, "whitespace-pre-wrap"),
+		children: item
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: mx("grid grid-cols-[80px_1fr]", classNames),
+		children: Object.entries(item).map(([key, value]) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+			className: "p-1 text-xs text-subdued",
+			children: key
+		}), /* @__PURE__ */ jsx("div", { children: typeof value === "string" ? value : JSON.stringify(value) })] }, key))
+	});
+};
+//#endregion
+//#region src/shapes/feed-def.ts
+var FeedShape = Schema.extend(ComputeShape, Schema.Struct({ type: Schema.Literal("queue") }));
+var createFeed = (props) => createShape({
+	type: "queue",
+	size: {
+		width: 256,
+		height: 512
+	},
+	...props
+});
+var feedShape = {
+	type: "queue",
+	name: "Feed",
+	icon: "ph--queue--regular",
+	component: FeedComponent,
+	createShape: createFeed,
+	getAnchors: (shape) => createFunctionAnchors(shape, QueueInput, QueueOutput),
+	resizable: true
+};
+//#endregion
+//#region src/shapes/Function.tsx
+var FunctionShapeComponent = ({ shape, title, ...props }) => {
+	const client = useClient();
+	const { node, runtime } = useComputeNodeState(shape);
+	const inputRef = useRef(null);
+	const handleEnter = useCallback(async (text) => {
+		const value = text.trim();
+		const { spaceId, objectId } = parseId(value);
+		if (!spaceId || !objectId) return;
+		const space = client.spaces.get(spaceId);
+		const object = space?.db.query(Filter.id(objectId)).runSync()[0];
+		if (!space || !instanceOf(Script.Script, object)) return;
+		const [fn] = await space.db.query(Filter.type(Operation.PersistentOperation, { source: Ref.make(object) })).run();
+		if (!fn) return;
+		node.value = value;
+		node.function = Ref.make(fn);
+		node.inputSchema = fn.inputSchema;
+		node.outputSchema = fn.outputSchema;
+	}, [client, node]);
+	return /* @__PURE__ */ jsx(Box, {
+		shape,
+		title: "Function",
+		onAction: useCallback((action) => {
+			if (action !== "run") return;
+			runtime.evalNode();
+		}, [runtime]),
+		children: /* @__PURE__ */ jsx(TextBox, {
+			...props,
+			ref: inputRef,
+			value: node.value,
+			language: node.valueType === "object" ? "json" : void 0,
+			onBlur: handleEnter,
+			onEnter: handleEnter
+		})
+	});
+};
+//#endregion
+//#region src/shapes/function-def.ts
+var FunctionShape = Schema.extend(ComputeShape, Schema.Struct({ type: Schema.Literal("function") }));
+var createFunction = (props) => createShape({
+	type: "function",
+	size: {
+		width: 256,
+		height: 192
+	},
+	...props
+});
+var functionShape = {
+	type: "function",
+	name: "Function",
+	icon: "ph--function--regular",
+	component: FunctionShapeComponent,
+	createShape: createFunction,
+	getAnchors: (shape) => createFunctionAnchors(shape, FunctionInput, AnyOutput)
+};
+//#endregion
+//#region src/shapes/Gpt.tsx
+var GptComponent = ({ shape }) => {
+	const { meta, runtime } = useComputeNodeState(shape);
+	const [text, setText] = useState("");
+	const [tokens, setTokens] = useState(0);
+	useEffect(() => {
+		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 text = prev + delta;
+										setTokens(text.split(" ").length);
+										return text;
+									});
+									break;
+								}
+							}
+							break;
+					}
+					break;
+				}
+			}
+		});
+	}, [runtime?.subscribeToEventLog]);
+	return /* @__PURE__ */ jsx(FunctionBody, {
+		shape,
+		content: /* @__PURE__ */ jsx(ScrollArea.Root, {
+			orientation: "vertical",
+			thin: true,
+			children: /* @__PURE__ */ jsx(ScrollArea.Viewport, { children: text })
+		}),
+		status: `${tokens} tokens`,
+		inputSchema: meta.input,
+		outputSchema: meta.output
+	});
+};
+//#endregion
+//#region src/shapes/gpt-def.ts
+var GptShape = Schema.extend(ComputeShape, Schema.Struct({ type: Schema.Literal("gpt") }));
+var createGpt = (props) => createShape({
+	type: "gpt",
+	size: {
+		width: 256,
+		height: Math.max(getHeight(GptInput), getHeight(GptOutput))
+	},
+	...props
+});
+var gptShape = {
+	type: "gpt",
+	name: "GPT",
+	icon: "ph--brain--regular",
+	component: GptComponent,
+	createShape: createGpt,
+	getAnchors: (shape) => createFunctionAnchors(shape, GptInput, GptOutput),
+	openable: true
+};
+//#endregion
+//#region src/shapes/GptRealtime.tsx
+var __dxlog_file$1 = "/__w/dxos/dxos/packages/ui/react-ui-canvas-compute/src/shapes/GptRealtime.tsx";
+var GptRealtimeComponent = ({ shape }) => {
+	const [isLive, setIsLive] = useState(false);
+	const [isReady, setIsReady] = useState(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);
+			};
+			(await navigator.mediaDevices.getUserMedia({ audio: true })).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 answer = await (await fetch(AiServiceUrl, {
+				method: "POST",
+				body: offer.sdp,
+				headers: { "Content-Type": "application/sdp" }
+			})).text();
+			await peerConnection.setRemoteDescription({
+				sdp: answer,
+				type: "answer"
+			});
+			const dataChannel = peerConnection.createDataChannel("response");
+			const configureData = () => {
+				log.info("Configuring data channel", void 0, {
+					"~LogMeta": "~LogMeta",
+					F: __dxlog_file$1,
+					L: 71,
+					S: void 0
+				});
+				dataChannel.send(JSON.stringify({
+					type: "session.update",
+					session: {
+						modalities: ["text", "audio"],
+						tools: []
+					}
+				}));
+			};
+			dataChannel.addEventListener("open", (ev) => {
+				log.info("Opening data channel", { ev }, {
+					"~LogMeta": "~LogMeta",
+					F: __dxlog_file$1,
+					L: 84,
+					S: void 0
+				});
+				configureData();
+			});
+			dataChannel.addEventListener("message", async (ev) => {
+				if (JSON.parse(ev.data).type === "response.function_call_arguments.done") {}
+			});
+		} catch (error) {
+			log.error("Error in realtime session:", { error }, {
+				"~LogMeta": "~LogMeta",
+				F: __dxlog_file$1,
+				L: 124,
+				S: void 0
+			});
+			throw error;
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex w-full justify-center items-center",
+		children: /* @__PURE__ */ jsx(Icon, {
+			icon: isReady ? "ph--waveform--regular" : isLive ? "ph--pulse--regular" : "ph--play--regular",
+			size: 16,
+			classNames: !isLive && "cursor-pointer",
+			onClick: start
+		})
+	});
+};
+var DEFAULT_AI_SERVICE_URL = "http://localhost:8788";
+//#endregion
+//#region src/shapes/gpt-realtime-def.ts
+var GptRealtimeShape = Schema.extend(ComputeShape, Schema.Struct({ type: Schema.Literal("gpt-realtime") }));
+var createGptRealtime = (props) => createShape({
+	type: "gpt-realtime",
+	size: {
+		width: 256,
+		height: 256
+	},
+	...props
+});
+var gptRealtimeShape = {
+	type: "gpt-realtime",
+	name: "GPT Realtime",
+	icon: "ph--pulse--regular",
+	component: GptRealtimeComponent,
+	createShape: createGptRealtime,
+	getAnchors: (shape) => createFunctionAnchors(shape, Schema.Struct({ audio: Schema.Any }), Schema.Struct({})),
+	resizable: true
+};
+//#endregion
+//#region src/shapes/Json.tsx
+var JsonComponent = ({ shape, ...props }) => {
+	const { runtime } = useComputeNodeState(shape);
+	const input = runtime.inputs[DEFAULT_INPUT];
+	const value = input?.type === "executed" ? input.value : void 0;
+	return /* @__PURE__ */ jsx(Box, {
+		shape,
+		children: /* @__PURE__ */ jsx(Syntax.Root, {
+			data: value,
+			children: /* @__PURE__ */ jsxs(Syntax.Content, { children: [/* @__PURE__ */ jsx(Syntax.Filter, {}), /* @__PURE__ */ jsx(Syntax.Viewport, { children: /* @__PURE__ */ jsx(Syntax.Code, { classNames: "text-xs" }) })] })
+		})
+	});
+};
+var JsonTransformComponent = ({ shape, ...props }) => {
+	return /* @__PURE__ */ jsx(Box, { shape });
+};
+//#endregion
+//#region src/shapes/json-def.ts
+var JsonShape = Schema.extend(ComputeShape, Schema.Struct({ type: Schema.Literal("json") }));
+var JsonTransformShape = Schema.extend(ComputeShape, Schema.Struct({ type: Schema.Literal("json-transform") }));
+var createJson = (props) => createShape({
+	type: "json",
+	size: {
+		width: 256,
+		height: 256
+	},
+	...props
+});
+var jsonShape = {
+	type: "json",
+	name: "JSON",
+	icon: "ph--code--regular",
+	component: JsonComponent,
+	createShape: createJson,
+	getAnchors: (shape) => createAnchorMap(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: JsonTransformComponent,
+	createShape: createJsonTransform,
+	getAnchors: (shape) => createFunctionAnchors(shape, JsonTransformInput, DefaultOutput),
+	resizable: true
+};
+//#endregion
+//#region src/shapes/Logic.tsx
+var IfComponent = ({ shape, ...props }) => {
+	return /* @__PURE__ */ jsx(FunctionBody, {
+		shape,
+		inputSchema: IfInput,
+		outputSchema: IfOutput
+	});
+};
+var IfElseComponent = ({ shape, ...props }) => {
+	return /* @__PURE__ */ jsx(FunctionBody, {
+		shape,
+		inputSchema: IfElseInput,
+		outputSchema: IfElseOutput
+	});
+};
+//#endregion
+//#region src/shapes/logic-def.ts
+var IfShape = Schema.extend(ComputeShape, Schema.Struct({ type: Schema.Literal("if") }));
+var IfElseShape = Schema.extend(ComputeShape, Schema.Struct({ type: Schema.Literal("if-else") }));
+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: IfComponent,
+	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: IfElseComponent,
+	createShape: createIfElse,
+	getAnchors: (shape) => createFunctionAnchors(shape, IfElseInput, IfElseOutput)
+};
+//#endregion
+//#region src/shapes/RNG.tsx
+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] = useState(false);
+	const [icon, setIcon] = useState(pickIcon());
+	useEffect(() => {
+		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_OUTPUT, Math.random());
+		setSpin(true);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex grow items-center justify-center",
+		children: /* @__PURE__ */ jsx(Icon, {
+			icon,
+			classNames: spin && "animate-[spin_1s]",
+			size: 10,
+			onClick: handleClick
+		})
+	});
+};
+//#endregion
+//#region src/shapes/rng-def.ts
+var RandomShape = Schema.extend(ComputeShape, Schema.Struct({
+	type: Schema.Literal("rng"),
+	min: Schema.optional(Schema.Number),
+	max: Schema.optional(Schema.Number)
+}));
+var createRandom = (props) => createShape({
+	type: "rng",
+	size: {
+		width: 64,
+		height: 64
+	},
+	...props
+});
+var randomShape = {
+	type: "rng",
+	name: "Random",
+	icon: "ph--dice-six--regular",
+	component: RandomComponent,
+	createShape: createRandom,
+	getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId("output")]: {
+		x: 1,
+		y: 0
+	} })
+};
+//#endregion
+//#region src/shapes/Scope.tsx
+var ScopeComponent = ({ shape }) => {
+	const { runtime } = useComputeNodeState(shape);
+	const input = runtime.inputs[DEFAULT_INPUT];
+	const active = input?.type === "executed" ? input.value : false;
+	const { getAverage } = useAudioStream(active);
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex w-full justify-center items-center bg-black",
+		children: /* @__PURE__ */ jsx(Chaos, {
+			active,
+			getValue: getAverage,
+			options: {
+				...shaderPresets.heptapod,
+				zoom: 1.2
+			}
+		})
+	});
+};
+//#endregion
+//#region src/shapes/scope-def.ts
+var ScopeShape = Schema.extend(ComputeShape, Schema.Struct({ type: Schema.Literal("scope") }));
+var createScope = (props) => createShape({
+	type: "scope",
+	size: {
+		width: 128,
+		height: 128
+	},
+	classNames: "rounded-full border-primary-800",
+	...props
+});
+var scopeShape = {
+	type: "scope",
+	name: "Scope",
+	icon: "ph--waveform--regular",
+	component: ScopeComponent,
+	createShape: createScope,
+	getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId("input")]: {
+		x: -1,
+		y: 0
+	} })
+};
+//#endregion
+//#region src/shapes/Surface.tsx
+var SurfaceComponent = ({ shape }) => {
+	const { runtime } = useComputeNodeState(shape);
+	const input = runtime.inputs[DEFAULT_INPUT];
+	const value = input?.type === "executed" ? input.value : null;
+	const handleAction = (action) => {
+		if (action === "run") runtime.evalNode();
+	};
+	return /* @__PURE__ */ jsx(Box, {
+		shape,
+		onAction: handleAction,
+		children: /* @__PURE__ */ jsx(Card.Root, { children: value !== null && /* @__PURE__ */ jsx(Surface.Surface, {
+			type: AppSurface.CardContent,
+			data: { subject: value },
+			limit: 1
+		}) })
+	});
+};
+//#endregion
+//#region src/shapes/surface-def.ts
+var SurfaceShape = Schema.extend(ComputeShape, Schema.Struct({ type: Schema.Literal("surface") }));
+var createSurface = (props) => createShape({
+	type: "surface",
+	size: {
+		width: 384,
+		height: 384
+	},
+	...props
+});
+var surfaceShape = {
+	type: "surface",
+	name: "Surface",
+	icon: "ph--frame-corners--regular",
+	component: SurfaceComponent,
+	createShape: createSurface,
+	getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId("input")]: {
+		x: -1,
+		y: 0
+	} }),
+	resizable: true
+};
+//#endregion
+//#region src/shapes/Switch.tsx
+var SwitchComponent = ({ shape }) => {
+	const { runtime } = useComputeNodeState(shape);
+	const [value, setValue] = useState(false);
+	useEffect(() => {
+		runtime.setOutput(DEFAULT_OUTPUT, value);
+	}, [value]);
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex w-full justify-center items-center",
+		onClick: (ev) => ev.stopPropagation(),
+		children: /* @__PURE__ */ jsx(Input.Root, { children: /* @__PURE__ */ jsx(Input.Switch, {
+			checked: value,
+			onCheckedChange: (value) => setValue(value)
+		}) })
+	});
+};
+//#endregion
+//#region src/shapes/switch-def.ts
+var SwitchShape = Schema.extend(ComputeShape, Schema.Struct({ type: Schema.Literal("switch") }));
+var createSwitch = (props) => createShape({
+	type: "switch",
+	size: {
+		width: 64,
+		height: 64
+	},
+	...props
+});
+var switchShape = {
+	type: "switch",
+	name: "Switch",
+	icon: "ph--toggle-left--regular",
+	component: SwitchComponent,
+	createShape: createSwitch,
+	getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId("output")]: {
+		x: 1,
+		y: 0
+	} })
+};
+//#endregion
+//#region src/shapes/Table.tsx
+var TableComponent = ({ shape }) => {
+	return /* @__PURE__ */ jsx(Box, { shape });
+};
+//#endregion
+//#region src/shapes/table-def.ts
+var InputSchema$1 = createInputSchema(Type.getSchema(Message.Message));
+var OutputSchema$1 = createOutputSchema(Schema.mutable(Schema.Array(Type.getSchema(Message.Message))));
+var TableShape = Schema.extend(ComputeShape, Schema.Struct({ type: Schema.Literal("table") }));
+var createTable = (props) => createShape({
+	type: "table",
+	size: {
+		width: 320,
+		height: 512
+	},
+	...props
+});
+var tableShape = {
+	type: "table",
+	name: "Table",
+	icon: "ph--table--regular",
+	component: TableComponent,
+	createShape: createTable,
+	getAnchors: (shape) => createFunctionAnchors(shape, InputSchema$1, OutputSchema$1),
+	resizable: true
+};
+//#endregion
+//#region src/shapes/Template.tsx
+var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-canvas-compute/src/shapes/Template.tsx";
+var TextInputComponent$1 = ({ shape, title, ...props }) => {
+	const { node } = useComputeNodeState(shape);
+	const inputRef = useRef(null);
+	const handleEnter = (text) => {
+		const value = text.trim();
+		if (value.length) {
+			const schema = getTemplateInputSchema(node);
+			node.value = value;
+			node.inputSchema = toJsonSchema(schema);
+		}
+	};
+	const handleTypeChange = (newType) => {
+		invariant(Schema.is(ComputeValueType)(newType), "Invalid type", {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file,
+			L: 43,
+			S: void 0,
+			A: ["Schema.is(ComputeValueType)(newType)", "'Invalid type'"]
+		});
+		node.valueType = newType;
+		node.inputSchema = toJsonSchema(getTemplateInputSchema(node));
+	};
+	return /* @__PURE__ */ jsx(Box, {
+		shape,
+		title: "Template",
+		status: /* @__PURE__ */ jsx(TypeSelect, {
+			value: node.valueType ?? "string",
+			onValueChange: handleTypeChange
+		}),
+		children: /* @__PURE__ */ jsx(TextBox, {
+			...props,
+			ref: inputRef,
+			value: node.value,
+			language: node.valueType === "object" ? "json" : void 0,
+			onBlur: handleEnter,
+			onEnter: handleEnter
+		})
+	});
+};
+var TemplateComponent = (props) => /* @__PURE__ */ jsx(TextInputComponent$1, {
+	...props,
+	placeholder: "Prompt"
+});
+//#endregion
+//#region src/shapes/template-def.ts
+var TemplateShape = Schema.extend(ComputeShape, Schema.Struct({
+	type: Schema.Literal("template"),
+	valueType: Schema.optional(ComputeValueType)
+}));
+var createTemplate = (props) => createShape({
+	type: "template",
+	size: {
+		width: 256,
+		height: 384
+	},
+	...props
+});
+var templateShape = {
+	type: "template",
+	name: "Template",
+	icon: "ph--article--regular",
+	component: TemplateComponent,
+	createShape: createTemplate,
+	getAnchors: (shape) => createFunctionAnchors(shape, VoidInput, TemplateOutput),
+	resizable: true
+};
+//#endregion
+//#region src/shapes/Text.tsx
+var TextComponent = ({ shape }) => {
+	const { runtime } = useComputeNodeState(shape);
+	const input = runtime.inputs[DEFAULT_INPUT];
+	const value = input?.type === "executed" ? input.value : 0;
+	const handleAction = (action) => {
+		if (action === "run") runtime.evalNode();
+	};
+	return /* @__PURE__ */ jsx(Box, {
+		shape,
+		onAction: handleAction,
+		children: /* @__PURE__ */ jsx(TextBox, { value })
+	});
+};
+//#endregion
+//#region src/shapes/text-def.ts
+var TextShape = Schema.extend(ComputeShape, Schema.Struct({ type: Schema.Literal("text") }));
+var createText = (props) => createShape({
+	type: "text",
+	size: {
+		width: 384,
+		height: 384
+	},
+	...props
+});
+var textShape = {
+	type: "text",
+	name: "Text",
+	icon: "ph--article--regular",
+	component: TextComponent,
+	createShape: createText,
+	getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId("input")]: {
+		x: -1,
+		y: 0
+	} }),
+	resizable: true
+};
+//#endregion
+//#region src/shapes/TextToImage.tsx
+var TextToImageComponent = ({ shape }) => {
+	return /* @__PURE__ */ jsx(Box, { shape });
+};
+//#endregion
+//#region src/shapes/text-to-image-def.ts
+var TextToImageShape = Schema.extend(ComputeShape, Schema.Struct({ type: Schema.Literal("text-to-image") }));
+var createTextToImage = (props) => createShape({
+	type: "text-to-image",
+	size: {
+		width: 128,
+		height: 64
+	},
+	...props
+});
+var textToImageShape = {
+	type: "text-to-image",
+	name: "Image",
+	icon: "ph--image--regular",
+	component: TextToImageComponent,
+	createShape: createTextToImage,
+	getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId("output")]: {
+		x: 1,
+		y: 0
+	} })
+};
+//#endregion
+//#region src/shapes/Thread.tsx
+var ThreadComponent = ({ shape }) => {
+	const items = [];
+	const scrollRef = useRef(null);
+	useEffect(() => {
+		if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+	}, [items]);
+	return /* @__PURE__ */ jsx(Box, {
+		shape,
+		children: /* @__PURE__ */ jsx(ScrollArea.Root, {
+			orientation: "vertical",
+			children: /* @__PURE__ */ jsx(ScrollArea.Viewport, {
+				classNames: "gap-2 p-2",
+				ref: scrollRef,
+				children: [...items].map((item, i) => /* @__PURE__ */ jsx(ThreadItem, { item }, i))
+			})
+		})
+	});
+};
+var ThreadItem = ({ classNames, item }) => {
+	if (typeof item !== "object") return /* @__PURE__ */ jsx("div", {
+		className: mx(classNames),
+		children: item
+	});
+	const { role, message } = item;
+	return /* @__PURE__ */ jsx("div", {
+		className: mx("flex", classNames, role === "user" && "justify-end"),
+		children: /* @__PURE__ */ jsx("div", {
+			className: 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"),
+			children: message
+		})
+	});
+};
+//#endregion
+//#region src/shapes/thread-def.ts
+var InputSchema = createInputSchema(Type.getSchema(Message.Message));
+var OutputSchema = createOutputSchema(Schema.mutable(Schema.Array(Type.getSchema(Message.Message))));
+var ThreadShape = Schema.extend(ComputeShape, Schema.Struct({ type: Schema.Literal("thread") }));
+var createThread = (props) => createShape({
+	type: "thread",
+	size: {
+		width: 384,
+		height: 384
+	},
+	...props
+});
+var threadShape = {
+	type: "thread",
+	name: "Thread",
+	icon: "ph--chats-circle--regular",
+	component: ThreadComponent,
+	createShape: createThread,
+	getAnchors: (shape) => createFunctionAnchors(shape, InputSchema, OutputSchema),
+	resizable: true
+};
+//#endregion
+//#region src/shapes/trigger-spec.ts
+var createTriggerSpec = (props) => {
+	switch (props.triggerKind ?? "email") {
+		case "timer": return Trigger.specTimer("*/10 * * * * *");
+		case "webhook": return Trigger.specWebhook({ method: "POST" });
+		case "subscription": return Trigger.specSubscription(Query.select(Filter.nothing()));
+		case "email": return Trigger.specEmail();
+		case "feed": return { kind: "feed" };
+		case "direct": return Trigger.specDirect();
+	}
+};
+var getOutputSchema = (kind) => {
+	return {
+		["email"]: TriggerEvent.EmailEvent,
+		["subscription"]: TriggerEvent.SubscriptionEvent,
+		["timer"]: TriggerEvent.TimerEvent,
+		["webhook"]: TriggerEvent.WebhookEvent,
+		["feed"]: TriggerEvent.FeedEvent,
+		["direct"]: TriggerEvent.DirectEvent
+	}[kind];
+};
+//#endregion
+//#region src/shapes/Trigger.tsx
+var TriggerComponent = ({ shape }) => {
+	const [space] = useSpaces();
+	const functionTrigger = shape.functionTrigger?.target;
+	useEffect(() => {
+		if (functionTrigger && !functionTrigger.spec) Obj.update(functionTrigger, (functionTrigger) => {
+			functionTrigger.spec = createTriggerSpec({
+				triggerKind: "email",
+				spaceId: space?.id
+			});
+		});
+	}, [functionTrigger, functionTrigger?.spec]);
+	useEffect(() => {
+		shape.size.height = getHeight(getOutputSchema(functionTrigger?.spec?.kind ?? "email"));
+	}, [functionTrigger?.spec?.kind]);
+	const setKind = (kind) => {
+		if (functionTrigger?.spec?.kind !== kind) Obj.update(functionTrigger, (obj) => {
+			obj.spec = createTriggerSpec({
+				triggerKind: kind,
+				spaceId: space?.id
+			});
+		});
+	};
+	if (!functionTrigger?.spec) return;
+	return /* @__PURE__ */ jsx(FunctionBody, {
+		shape,
+		status: /* @__PURE__ */ jsx(TriggerKindSelect, {
+			value: functionTrigger.spec?.kind,
+			onValueChange: (kind) => setKind(kind)
+		}),
+		inputSchema: VoidInput,
+		outputSchema: getOutputSchema(functionTrigger.spec.kind)
+	});
+};
+var TriggerKindSelect = ({ value, onValueChange }) => {
+	return /* @__PURE__ */ jsxs(Select.Root, {
+		value,
+		onValueChange,
+		children: [/* @__PURE__ */ jsx(Select.TriggerButton, {
+			variant: "ghost",
+			classNames: "w-full px-0!"
+		}), /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsxs(Select.Content, { children: [
+			/* @__PURE__ */ jsx(Select.ScrollUpButton, {}),
+			/* @__PURE__ */ jsx(Select.Viewport, { children: Trigger.Kinds.map((kind) => /* @__PURE__ */ jsx(Select.Option, {
+				value: kind,
+				children: kind
+			}, kind)) }),
+			/* @__PURE__ */ jsx(Select.ScrollDownButton, {}),
+			/* @__PURE__ */ jsx(Select.Arrow, {})
+		] }) })]
+	});
+};
+var TriggerShape = Schema.extend(ComputeShape, Schema.Struct({
+	type: Schema.Literal("trigger"),
+	functionTrigger: Schema.optional(Ref.Ref(Trigger.Trigger))
+}));
+var createTrigger = (props) => {
+	const functionTrigger = Trigger.make({
+		enabled: true,
+		spec: createTriggerSpec(props)
+	});
+	return createShape({
+		type: "trigger",
+		functionTrigger: Ref.make(functionTrigger),
+		size: {
+			width: 192,
+			height: getHeight(TriggerEvent.EmailEvent)
+		},
+		...props
+	});
+};
+var triggerShape = {
+	type: "trigger",
+	name: "Trigger",
+	icon: "ph--lightning--regular",
+	component: TriggerComponent,
+	createShape: createTrigger,
+	getAnchors: (shape) => createFunctionAnchors(shape, VoidInput, getOutputSchema(shape.functionTrigger?.target?.spec?.kind ?? "email"))
+};
+//#endregion
+//#region src/shapes/Boolean.tsx
+var GateShape = Schema.extend(ComputeShape, Schema.Struct({ type: Schema.String }));
+var createGate = (props) => createShape({
+	size: {
+		width: 64,
+		height: 64
+	},
+	...props
+});
+var defineShape = ({ type, name, icon, symbol: Symbol, createShape, inputs, outputs = [createAnchorId("output")] }) => ({
+	type,
+	name,
+	icon,
+	component: () => {
+		return /* @__PURE__ */ jsx("div", {
+			className: "flex w-full justify-center items-center",
+			children: /* @__PURE__ */ jsx(Symbol, {})
+		});
+	},
+	createShape,
+	getAnchors: (shape) => createAnchors({
+		shape,
+		inputs,
+		outputs
+	})
+});
+var createSymbol = (pathConstructor, inputs) => ({ width = 64, height = 32, className = "fill-neutral-200 dark:fill-neutral-800 stroke-neutral-500", strokeWidth = 1 }) => {
+	const startX = width * .25;
+	const endX = width * .75;
+	const centerY = height / 2;
+	const paths = pathConstructor({
+		startX,
+		endX,
+		height
+	});
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: `0 0 ${width} ${height}`,
+		className: "h-full w-full",
+		children: [
+			getAnchorPoints({
+				x: 0,
+				y: centerY
+			}, inputs).map(({ x, y }, i) => /* @__PURE__ */ jsx("line", {
+				x1: x,
+				y1: y,
+				x2: startX * 1.3,
+				y2: y,
+				strokeWidth,
+				className
+			}, i)),
+			/* @__PURE__ */ jsx("line", {
+				x1: endX,
+				y1: centerY,
+				x2: width,
+				y2: centerY,
+				strokeWidth,
+				className
+			}),
+			paths.map((path, i) => /* @__PURE__ */ jsx("path", {
+				d: path,
+				strokeWidth,
+				className
+			}, i))
+		]
+	});
+};
+var AndSymbol = createSymbol(({ startX, endX, height }) => {
+	const arcRadius = (endX - startX) / 2;
+	return [`
+    M ${startX},${height * .1}
+    L ${endX - arcRadius},${height * .1}
+    A ${arcRadius},${height * .4} 0 0 1 ${endX - arcRadius},${height * .9}
+    L ${startX},${height * .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 = createSymbol(({ startX, endX, height }) => {
+	const arcRadius = (endX - startX) / 2;
+	return [`
+    M ${startX},${height * .1}
+    L ${endX - arcRadius},${height * .1}
+    A ${arcRadius},${height * .4} 0 0 1 ${endX - arcRadius},${height * .9}
+    L ${startX},${height * .9}
+    C ${startX * 1.4},${height * .5} ${startX * 1.4},${height * .5} ${startX},${height * .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 = createSymbol(({ startX, endX, height }) => {
+	return [`
+    M ${startX},${height * .1}
+    L ${endX * .9},${height * .5}
+    L ${startX},${height * .9}
+    Z
+    `, `
+    M ${endX - height * .2},${height * .5}
+    A ${height * .1} ${height * .1} 0 0 1 ${endX},${height * .5}
+    A ${height * .1} ${height * .1} 0 0 1 ${endX - height * .2},${height * .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")]
+});
+//#endregion
+//#region src/registry.ts
+/**
+* Order used by toolbar.
+*/
+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,
+			feedShape,
+			threadShape,
+			textShape,
+			surfaceShape,
+			beaconShape,
+			scopeShape
+		]
+	},
+	{
+		title: "Misc",
+		shapes: [noteShape]
+	}
+];
+//#endregion
+//#region src/compute-layout.ts
+var ComputeShapeLayout = class extends ShapeLayout {
+	_controller;
+	constructor(_controller, registry) {
+		super(registry);
+		this._controller = _controller;
+	}
+	getAnchors(shape) {
+		let anchors = this._registry.getShapeDef(shape.type)?.getAnchors?.(shape) ?? {};
+		if (shape.node) {
+			const node = this._controller.graph.getNode(shape.node);
+			if (node.inputSchema || node.outputSchema) anchors = createFunctionAnchors(shape, node.inputSchema ? toEffectSchema(node.inputSchema) : DefaultInput, node.outputSchema ? toEffectSchema(node.outputSchema) : DefaultOutput);
+		}
+		return anchors;
+	}
+};
+//#endregion
+export { AndShape, AppendComponent, AppendShape, AudioComponent, AudioShape, BeaconComponent, BeaconShape, Box, ChatShape, ComputeContext, ComputeGraphController, ComputeShape, ComputeShapeLayout, ConstantComponent, ConstantShape, DatabaseComponent, DatabaseShape, FeedComponent, FeedItem, FeedShape, FunctionBody, FunctionShape, FunctionShapeComponent, GptComponent, GptRealtimeComponent, GptRealtimeShape, GptShape, IfComponent, IfElseComponent, IfElseShape, IfShape, InvalidStateError, JsonComponent, JsonShape, JsonTransformComponent, JsonTransformShape, NotShape, OrShape, RandomComponent, RandomShape, ReducerComponent, ReducerShape, ScopeComponent, ScopeShape, SurfaceComponent, SurfaceShape, SwitchComponent, SwitchShape, TableComponent, TableShape, TemplateComponent, TemplateShape, TextComponent, TextInputComponent, TextShape, TextToImageComponent, TextToImageShape, ThreadComponent, ThreadItem, ThreadShape, TriggerComponent, TriggerShape, TypeSelect, andShape, appendShape, audioShape, beaconShape, bodyPadding, chatShape, computeShapes, constantShape, createAnchorId, createAnd, createAppend, createAudio, createBeacon, createChat, createComputeGraph, createComputeGraphController, createComputeNode, createConstant, createDatabase, createFeed, createFunction, createFunctionAnchors, createGpt, createGptRealtime, createIf, createIfElse, createJson, createJsonTransform, createNot, createOr, createRandom, createReducer, createScope, createShape, createSurface, createSwitch, createTable, createTemplate, createText, createTextToImage, createThread, createTrigger, databaseShape, feedShape, footerHeight, functionShape, getHeight, getProperties, gptRealtimeShape, gptShape, headerHeight, ifElseShape, ifShape, isValidComputeNode, jsonShape, jsonTransformShape, mapEdge, notShape, orShape, parseAnchorId, randomShape, reducerShape, resolveComputeNode, scopeShape, surfaceShape, switchShape, tableShape, templateShape, textShape, textToImageShape, threadShape, triggerShape, useComputeContext, useComputeGraphController, useComputeNodeState, useGraphMonitor };
+
+//# sourceMappingURL=index.mjs.map