@dxos/react-ui-canvas-compute 0.13.0 → 0.14.0

package/dist/lib/index.mjs

@@ -1,3 +1,4 @@
+import { a as RectangleShape, c as Shape, i as Polygon, l as schema_exports, n as NoteShape, o as isPath, r as PathShape, s as isPolygon, t as EllipseShape, u as CanvasGraphModel } from "./chunk-types.mjs";
 import * as Effect from "effect/Effect";
 import * as Exit from "effect/Exit";
 import * as Layer from "effect/Layer";
@@ -9,19 +10,24 @@ import { AnyOutput, AppendInput, ComputeBeginEvent, ComputeCustomEvent, ComputeE
 import { Resource } from "@dxos/context";
 import * as EffectEx from "@dxos/effect/EffectEx";
 import { log } from "@dxos/log";
-import { Fragment, createContext, forwardRef, useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState } from "react";
+import { Fragment, createContext, forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useReducer, 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 { Polygon, ShapeLayout, TextBox, createAnchorMap, createAnchors, getAnchorPoints, getParentShapeElement, isPolygon, noteShape, rowHeight } from "@dxos/react-ui-canvas-editor";
-import { DEFAULT_GRID, LINK_TYPES, UnknownNodeView, createFreehandProjection, defaultNodeRegistry, endpointNode, initialKeys, reduceIntent, sortByZ } from "@dxos/react-ui-canvas/scene";
+import { DEFAULT_CELL, DEFAULT_GRID, LINK_TYPES, Point, Size, UnknownNodeView, createFreehandProjection, defaultNodeRegistry, endpointNode, initialKeys, nodeDef, reduceIntent, sortByZ } from "@dxos/react-ui-canvas/scene";
+import * as Icon from "@dxos/react-ui/Icon";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as SchemaAST from "@dxos/effect/SchemaAST";
 import * as Struct from "effect/Struct";
 import * as Button from "@dxos/react-ui/Button";
-import * as Icon from "@dxos/react-ui/Icon";
 import { mx } from "@dxos/ui-theme";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { json } from "@codemirror/lang-json";
+import { Prec } from "@codemirror/state";
+import { EditorView, keymap } from "@codemirror/view";
+import { useTextEditor } from "@dxos/react-ui-editor";
+import * as Hooks from "@dxos/react-ui/Hooks";
+import { createBasicExtensions, createMarkdownExtensions, createThemeExtensions, decorateMarkdown } from "@dxos/ui-editor";
 import * as Select from "@dxos/react-ui/Select";
 import * as Field from "@dxos/react-ui/Field";
 import * as Input from "@dxos/react-ui/Input";
@@ -51,37 +57,9 @@ 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]);
-};
+/** The definition of the node being rendered, from the registry the scene renders with, for the frame chrome. */
+var ComputeNodeDefContext = createContext(void 0);
+var useComputeNodeDef = () => useContext(ComputeNodeDefContext);
 //#endregion
 //#region src/hooks/useComputeNodeState.ts
 var __dxlog_file$7 = "/__w/dxos/dxos/packages/ui/react-ui-canvas-compute/src/hooks/useComputeNodeState.ts";
@@ -154,14 +132,14 @@ var mapEdge = (graph, { source, target, output = DEFAULT_OUTPUT, input = DEFAULT
 	invariant(sourceNode?.node, void 0, {
 		"~LogMeta": "~LogMeta",
 		F: __dxlog_file$6,
-		L: 23,
+		L: 32,
 		S: void 0,
 		A: ["sourceNode?.node", ""]
 	});
 	invariant(targetNode?.node, void 0, {
 		"~LogMeta": "~LogMeta",
 		F: __dxlog_file$6,
-		L: 24,
+		L: 33,
 		S: void 0,
 		A: ["targetNode?.node", ""]
 	});
@@ -641,6 +619,78 @@ var deleteTriggerObjects = (computeGraph, shapes) => {
 var headerHeight = 2 * DEFAULT_GRID;
 var footerHeight = 2 * DEFAULT_GRID;
 //#endregion
+//#region src/shapes/common/node-def.tsx
+/**
+* A size in scene px as nominal units (major cells) to the nearest half cell, so a new node lands close to that px
+* size and its edges on the grid.
+*/
+var toNominal = ({ width, height }) => ({
+	width: Math.round(width / DEFAULT_CELL * 2) / 2,
+	height: Math.round(height / DEFAULT_CELL * 2) / 2
+});
+/** A compute shape's node definition. */
+var defineComputeNode = ({ schema, component, create, defaultSize, ports, ...rest }) => {
+	const isShape = Schema.is(schema);
+	return {
+		...rest,
+		schema,
+		component: computeNodeView(isShape, component),
+		create: ({ id, z, center, size }) => ({
+			...create({
+				id,
+				center
+			}),
+			z,
+			size
+		}),
+		defaultSize: toNominal(defaultSize ?? create({
+			id: "default",
+			center: {
+				x: 0,
+				y: 0
+			}
+		}).size),
+		ports: (node) => isShape(node) ? ports(node) : []
+	};
+};
+/**
+* The shape's component under the engine's view props, re-rendered on every controller update since the
+* runtime state it reads is not reactive; a node that is not the shape renders as an unknown node.
+*/
+var computeNodeView = (isShape, Component) => {
+	const View = (props) => {
+		const { node, registry } = props;
+		const { controller } = useComputeContext();
+		useControllerUpdates(controller);
+		if (!isShape(node)) return /* @__PURE__ */ jsx(UnknownNodeView, { ...props });
+		if (!node.node) {
+			const def = nodeDef(registry, node);
+			return /* @__PURE__ */ jsxs("div", {
+				className: "dx-cover flex flex-col items-center justify-center gap-1 text-fg-muted",
+				children: [def?.icon && /* @__PURE__ */ jsx(Icon.Icon, {
+					icon: def.icon,
+					size: "lg"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-sm truncate",
+					children: def?.name ?? node.type
+				})]
+			});
+		}
+		return /* @__PURE__ */ jsx(ComputeNodeDefContext.Provider, {
+			value: nodeDef(registry, node),
+			children: /* @__PURE__ */ jsx("div", {
+				className: "dx-cover flex",
+				children: /* @__PURE__ */ jsx(Component, {
+					...props,
+					node
+				})
+			})
+		});
+	};
+	View.displayName = `ComputeNodeView(${Component.displayName ?? Component.name})`;
+	return View;
+};
+//#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(".");
@@ -648,7 +698,12 @@ var parseAnchorId = (id) => {
 	const parts = id.match(/(input|output)\.(.+)/);
 	return parts ? parts.slice(1) : [void 0, id];
 };
-var ComputeShape = Polygon.mapFields(Struct.assign({ node: Schema.mutableKey(Schema.optional(Obj.ID.annotate({ description: "Compute node id" }))) }));
+var ComputeShape = Shape.mapFields(Struct.assign({
+	center: Point,
+	size: Size.mapFields(Struct.map(Schema.mutableKey))
+})).mapFields(Struct.map(Schema.mutableKey)).mapFields(Struct.assign({ node: Schema.mutableKey(Schema.optional(Obj.ID.annotate({ description: "Compute node id" }))) }));
+/** The shape's schema with the engine's z-order key, so it is a node schema. */
+var withZ = (shape) => shape.mapFields(Struct.assign({ z: Schema.String }));
 var createShape = ({ id, ...rest }) => {
 	return {
 		id: id ?? Obj.ID.random(),
@@ -656,28 +711,79 @@ var createShape = ({ id, ...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;
+//#region src/shapes/common/ports.ts
 /**
-* A function shape's height: the chrome plus a body grown to a whole number of grid cells. One row per
-* input is a floor on the body rather than its height, so the box lands on the grid whatever its schema
-* declares — the rows used to set it exactly, and `rowHeight` divides into no grid cell.
+* Height of one property row, two minor grid cells: with the rows centred in a body that is a whole number of rows,
+* every row's centre, and so every port, lands on a minor grid line.
 */
-var getHeight = (input, unit = DEFAULT_GRID) => {
-	const minBody = 16 + SchemaAST.getPropertySignatures(input.ast).length * rowHeight + 2;
-	return headerHeight + footerHeight + Math.ceil(minBody / unit) * unit;
-};
-var createFunctionAnchors = (shape, input = VoidInput, output = VoidOutput) => {
-	const inputs = SchemaAST.getPropertySignatures(input.ast).map(({ name }) => createAnchorId("input", name.toString()));
-	const outputs = SchemaAST.getPropertySignatures(output.ast).map(({ name }) => createAnchorId("output", name.toString()));
-	return createAnchors({
-		shape,
-		inputs,
-		outputs,
+var rowHeight = 2 * DEFAULT_GRID;
+/** A function shape's height: the chrome plus one row per input (at least one), each a whole number of rows. */
+var getHeight = (input) => {
+	const properties = SchemaAST.getPropertySignatures(input.ast);
+	return headerHeight + footerHeight + Math.max(properties.length, 1) * rowHeight;
+};
+/** `n` points one row apart, centred on `center`. */
+var getRowPoints = (center, n) => {
+	const span = (n - 1) * rowHeight;
+	return [...Array(n)].map((_, index) => ({
+		x: center.x,
+		y: center.y - span / 2 + index * rowHeight
+	}));
+};
+/**
+* The ports at the given points: each sits on whichever edge it is nearer to, at its offset along it; the
+* id's `input.` / `output.` prefix says which way a link may run.
+*/
+var pointsToPorts = (points, size) => points.map(({ id, pos }) => {
+	const [kind] = parseAnchorId(id);
+	const half = {
+		x: size.width / 2,
+		y: size.height / 2
+	};
+	const vertical = Math.abs(Math.abs(pos.x) - half.x) <= Math.abs(Math.abs(pos.y) - half.y);
+	const side = vertical ? pos.x < 0 ? "w" : "e" : pos.y < 0 ? "n" : "s";
+	const along = vertical ? (pos.y + half.y) / size.height : (pos.x + half.x) / size.width;
+	return {
+		id,
+		side,
+		offset: Math.min(Math.max(along, 0), 1),
+		...kind === "input" ? { accepts: "in" } : kind === "output" ? { accepts: "out" } : {}
+	};
+});
+/** Ports at points given in half-sizes from the centre (`{ x: 1, y: 0 }` is the middle of the east side). */
+var createPorts = (size, points) => pointsToPorts(Object.entries(points).map(([id, { x, y }]) => ({
+	id,
+	pos: {
+		x: x * size.width / 2,
+		y: y * size.height / 2
+	}
+})), size);
+/** Inputs stacked one row apart down the west side and outputs down the east, centred on `center`. */
+var createRowPorts = ({ size, inputs, outputs, center = {
+	x: 0,
+	y: 0
+} }) => pointsToPorts([...getRowPoints({
+	x: center.x - size.width / 2,
+	y: center.y
+}, inputs.length).map((pos, index) => ({
+	id: inputs[index],
+	pos
+})), ...getRowPoints({
+	x: center.x + size.width / 2,
+	y: center.y
+}, outputs.length).map((pos, index) => ({
+	id: outputs[index],
+	pos
+}))], size);
+/** A function shape's ports: one per property of its input and output schemas, level with the body's rows. */
+var createFunctionPorts = (size, input = VoidInput, output = VoidOutput) => {
+	return createRowPorts({
+		size,
+		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: (headerHeight - footerHeight) / 2 + 1
+			y: (headerHeight - footerHeight) / 2
 		}
 	});
 };
@@ -692,14 +798,17 @@ var Box = forwardRef(({ children, classNames, shape, title, status, open, onActi
 		S: void 0,
 		A: ["shape.type", ""]
 	});
-	const { controller, registry, debug = false } = useComputeContext();
-	const { icon, name, openable } = registry?.getShapeDef(shape.type) ?? { icon: "ph--circle-dashed--regular" };
+	const { controller, debug = false } = useComputeContext();
+	const def = useComputeNodeDef();
+	const icon = def?.icon ?? "ph--circle-dashed--regular";
+	const name = def?.name;
+	const openable = def?.openable;
 	const nodeId = shape.node;
 	const handleRun = () => {
 		controller.exec(nodeId).catch((err) => log.catch(err, void 0, {
 			"~LogMeta": "~LogMeta",
 			F: __dxlog_file$2,
-			L: 40,
+			L: 43,
 			S: void 0
 		}));
 	};
@@ -762,22 +871,16 @@ var Box = forwardRef(({ children, classNames, shape, title, status, open, onActi
 var expandedHeight = 200;
 var FunctionBody = ({ shape, name, content, inputSchema = VoidInput, outputSchema = VoidOutput, ...props }) => {
 	const { resize } = useComputeContext();
-	const rootRef = useRef(null);
 	const [open, setOpen] = useState(false);
 	const handleAction = (action) => {
 		const opening = action === "open";
-		if (resize) resize(shape.id, opening ? expandedHeight : -200);
-		else if (rootRef.current) {
-			const element = getParentShapeElement(rootRef.current, shape.id);
-			if (element) element.style.height = opening ? `${element.offsetHeight + expandedHeight}px` : "";
-		}
+		resize?.(shape.id, opening ? expandedHeight : -200);
 		setOpen(opening);
 	};
 	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-separator-subtle",
@@ -785,24 +888,26 @@ var FunctionBody = ({ shape, name, content, inputSchema = VoidInput, outputSchem
 		onAction: handleAction,
 		...props,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: `grid grid-cols-${columnCount} items-center`,
-			style: {
-				paddingTop: 8,
-				paddingBottom: 8
-			},
+			className: mx(`grid grid-cols-${columnCount}`, !open && "grow"),
 			children: [(inputs?.length ?? 0) > 0 && /* @__PURE__ */ jsx("div", {
-				className: "flex flex-col",
+				className: "flex flex-col justify-center",
 				children: inputs?.map(({ name }) => /* @__PURE__ */ jsx("div", {
-					className: "px-2 truncate text-sm font-mono items-center",
+					className: "flex items-center px-2 text-sm font-mono",
 					style: { height: rowHeight },
-					children: name
+					children: /* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						children: name
+					})
 				}, name))
 			}), (outputs?.length ?? 0) > 0 && /* @__PURE__ */ jsx("div", {
-				className: "flex flex-col",
+				className: "flex flex-col justify-center",
 				children: outputs?.map(({ name }) => /* @__PURE__ */ jsx("div", {
-					className: "px-2 truncate text-sm font-mono items-center text-right",
+					className: "flex items-center justify-end px-2 text-sm font-mono",
 					style: { height: rowHeight },
-					children: name
+					children: /* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						children: name
+					})
 				}, name))
 			})]
 		}), open && /* @__PURE__ */ jsx("div", {
@@ -812,6 +917,91 @@ var FunctionBody = ({ shape, name, content, inputSchema = VoidInput, outputSchem
 	});
 };
 //#endregion
+//#region src/shapes/common/TextBox.tsx
+var TextBox = forwardRef(({ classNames, value = "", centered, onEnter, onCancel, language, ...rest }, forwardedRef) => {
+	const themeMode = Hooks.useThemeMode();
+	const modified = useRef(false);
+	const doc = useRef(value);
+	useEffect(() => {
+		modified.current = false;
+		doc.current = value;
+	}, [value]);
+	const { parentRef, view, focusAttributes } = useTextEditor(() => {
+		return {
+			id: "text",
+			initialValue: value,
+			extensions: [
+				createBasicExtensions({
+					lineWrapping: !centered,
+					...rest
+				}),
+				...language === "json" ? [json()] : language === "markdown" ? [createMarkdownExtensions(), decorateMarkdown()] : [],
+				createThemeExtensions({
+					themeMode,
+					syntaxHighlighting: !!language,
+					slots: {
+						editor: { className: "h-full w-full [&>.cm-scroller]:scrollbar-none p-2" },
+						content: { className: mx(centered && "text-center") }
+					}
+				}),
+				EditorView.updateListener.of((update) => {
+					if (update.docChanged) modified.current = doc.current !== update.state.doc.toString();
+				}),
+				EditorView.focusChangeEffect.of((state, focusing) => {
+					if (!focusing && modified.current) onEnter?.(state.doc.toString());
+					return null;
+				}),
+				Prec.highest(keymap.of([
+					{
+						key: "Enter",
+						preventDefault: true,
+						run: (view) => {
+							onEnter?.(view.state.doc.toString());
+							modified.current = false;
+							return true;
+						}
+					},
+					{
+						key: "Shift-Enter",
+						run: (view) => {
+							view.dispatch(view.state.replaceSelection("\n"));
+							return true;
+						}
+					},
+					{
+						key: "Escape",
+						run: () => {
+							onCancel?.();
+							modified.current = false;
+							return true;
+						}
+					}
+				]))
+			]
+		};
+	}, [value, language]);
+	useImperativeHandle(forwardedRef, () => ({
+		setText: (text) => {
+			view?.dispatch({ changes: {
+				from: 0,
+				to: view.state.doc.length,
+				insert: text
+			} });
+		},
+		focus: () => {
+			view?.focus();
+		}
+	}), [view]);
+	useEffect(() => {
+		view?.dispatch({ selection: { anchor: view.state.doc.length } });
+	}, [view]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: parentRef,
+		...focusAttributes,
+		className: mx("dx-fill overflow-hidden", classNames)
+	});
+});
+//#endregion
 //#region src/shapes/common/TypeSelect.tsx
 var TypeSelect = ({ value, onValueChange }) => {
 	return /* @__PURE__ */ jsxs(Select.Root, {
@@ -832,7 +1022,7 @@ var TypeSelect = ({ value, onValueChange }) => {
 };
 //#endregion
 //#region src/shapes/Append.tsx
-var AppendComponent = ({ shape }) => {
+var AppendComponent = ({ node: shape }) => {
 	return /* @__PURE__ */ jsx(FunctionBody, {
 		shape,
 		inputSchema: AppendInput
@@ -849,17 +1039,19 @@ var createAppend = (props) => createShape({
 	},
 	...props
 });
-var appendShape = {
+var appendNodeDef = defineComputeNode({
 	type: "append",
 	name: "Append",
 	icon: "ph--list-plus--regular",
+	group: "Transform",
+	schema: withZ(AppendShape),
 	component: AppendComponent,
-	createShape: createAppend,
-	getAnchors: (shape) => createFunctionAnchors(shape, AppendInput)
-};
+	create: createAppend,
+	ports: (shape) => createFunctionPorts(shape.size, AppendInput)
+});
 //#endregion
 //#region src/shapes/Array.tsx
-var ReducerComponent = ({ shape }) => {
+var ReducerComponent = ({ node: shape }) => {
 	return /* @__PURE__ */ jsx(FunctionBody, {
 		shape,
 		inputSchema: ReducerInput,
@@ -869,7 +1061,7 @@ var ReducerComponent = ({ shape }) => {
 //#endregion
 //#region src/shapes/array-def.ts
 var ReducerShape = ComputeShape.mapFields(Struct.assign({ type: Schema.Literal("reducer") }));
-var createReducer = ({ id, size = {
+var createReducer = ({ size = {
 	width: 192,
 	height: getHeight(ReducerInput)
 }, ...rest }) => createShape({
@@ -877,17 +1069,19 @@ var createReducer = ({ id, size = {
 	size,
 	...rest
 });
-var reducerShape = {
+var reducerNodeDef = defineComputeNode({
 	type: "reducer",
 	name: "Reducer",
 	icon: "ph--repeat--regular",
+	group: "Operations",
+	schema: withZ(ReducerShape),
 	component: ReducerComponent,
-	createShape: createReducer,
-	getAnchors: (shape) => createFunctionAnchors(shape, ReducerInput, ReducerOutput)
-};
+	create: createReducer,
+	ports: (shape) => createFunctionPorts(shape.size, ReducerInput, ReducerOutput)
+});
 //#endregion
 //#region src/shapes/Audio.tsx
-var AudioComponent = ({ shape }) => {
+var AudioComponent = ({ node: shape }) => {
 	const { runtime } = useComputeNodeState(shape);
 	const [active, setActive] = useState(false);
 	useEffect(() => {
@@ -915,20 +1109,22 @@ var createAudio = (props) => createShape({
 	},
 	...props
 });
-var audioShape = {
+var audioNodeDef = defineComputeNode({
 	type: "audio",
 	name: "Audio",
 	icon: "ph--microphone--regular",
+	group: "Inputs",
+	schema: withZ(AudioShape),
 	component: AudioComponent,
-	createShape: createAudio,
-	getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId("output")]: {
+	create: createAudio,
+	ports: (shape) => createPorts(shape.size, { [createAnchorId("output")]: {
 		x: 1,
 		y: 0
 	} })
-};
+});
 //#endregion
 //#region src/shapes/Beacon.tsx
-var BeaconComponent = ({ shape }) => {
+var BeaconComponent = ({ node: shape }) => {
 	const { runtime } = useComputeNodeState(shape);
 	const input = runtime.inputs[DEFAULT_INPUT];
 	const value = input?.type === "executed" ? input.value : false;
@@ -952,20 +1148,22 @@ var createBeacon = (props) => createShape({
 	},
 	...props
 });
-var beaconShape = {
+var beaconNodeDef = defineComputeNode({
 	type: "beacon",
 	name: "Beacon",
 	icon: "ph--sun--regular",
+	group: "Outputs",
+	schema: withZ(BeaconShape),
 	component: BeaconComponent,
-	createShape: createBeacon,
-	getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId("input")]: {
+	create: createBeacon,
+	ports: (shape) => createPorts(shape.size, { [createAnchorId("input")]: {
 		x: -1,
 		y: 0
 	} })
-};
+});
 //#endregion
 //#region src/shapes/Chat.tsx
-var TextInputComponent = ({ shape, title, ...props }) => {
+var TextInputComponent = ({ node: shape, title, placeholder }) => {
 	const { runtime } = useComputeNodeState(shape);
 	const inputRef = useRef(null);
 	const handleEnter = (text) => {
@@ -981,7 +1179,7 @@ var TextInputComponent = ({ shape, title, ...props }) => {
 		children: /* @__PURE__ */ jsx(TextBox, {
 			ref: inputRef,
 			onEnter: handleEnter,
-			...props
+			placeholder
 		})
 	});
 };
@@ -996,22 +1194,24 @@ var createChat = (props) => createShape({
 	},
 	...props
 });
-var chatShape = {
+var chatNodeDef = defineComputeNode({
 	type: "chat",
 	name: "Chat",
 	icon: "ph--textbox--regular",
+	group: "Inputs",
+	schema: withZ(ChatShape),
 	component: (props) => /* @__PURE__ */ jsx(TextInputComponent, {
 		...props,
 		title: "Prompt",
 		placeholder: "Message"
 	}),
-	createShape: createChat,
-	getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId("output")]: {
+	create: createChat,
+	ports: (shape) => createPorts(shape.size, { [createAnchorId("output")]: {
 		x: 1,
 		y: 0
 	} }),
 	resizable: true
-};
+});
 //#endregion
 //#region src/shapes/Constant.tsx
 var inferType = (value) => {
@@ -1020,7 +1220,7 @@ var inferType = (value) => {
 	else if (typeof value === "boolean") return "boolean";
 	else if (typeof value === "object") return "object";
 };
-var ConstantComponent = ({ shape, title, chat, ...props }) => {
+var ConstantComponent = ({ node: shape, title, placeholder }) => {
 	const { node } = useComputeNodeState(shape);
 	const [type, setType] = useState(inferType(node.value) ?? ComputeValueType.literals[0]);
 	const inputRef = useRef(null);
@@ -1044,16 +1244,17 @@ var ConstantComponent = ({ shape, title, chat, ...props }) => {
 		}),
 		children: [
 			(type === "string" || type === "number") && /* @__PURE__ */ jsx(TextBox, {
-				...props,
+				placeholder,
 				ref: inputRef,
 				value: node.value,
 				onEnter: handleEnter
 			}),
 			type === "object" && /* @__PURE__ */ jsx(TextBox, {
-				...props,
+				placeholder,
 				ref: inputRef,
 				value: JSON.stringify(node.value, null, 2),
-				language: "json"
+				language: "json",
+				onEnter: handleEnter
 			}),
 			type === "boolean" && /* @__PURE__ */ jsx("div", {
 				className: "flex grow justify-center items-center",
@@ -1081,24 +1282,26 @@ var createConstant = (props) => createShape({
 	},
 	...props
 });
-var constantShape = {
+var constantNodeDef = defineComputeNode({
 	type: "constant",
 	name: "Value",
 	icon: "ph--dots-three-circle--regular",
+	group: "Inputs",
+	schema: withZ(ConstantShape),
 	component: (props) => /* @__PURE__ */ jsx(ConstantComponent, {
 		...props,
 		placeholder: "Constant"
 	}),
-	createShape: createConstant,
-	getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId("output")]: {
+	create: createConstant,
+	ports: (shape) => createPorts(shape.size, { [createAnchorId("output")]: {
 		x: 1,
 		y: 0
 	} }),
 	resizable: true
-};
+});
 //#endregion
 //#region src/shapes/Database.tsx
-var DatabaseComponent = ({ shape }) => {
+var DatabaseComponent = ({ node: shape }) => {
 	return /* @__PURE__ */ jsx(Box, { shape });
 };
 //#endregion
@@ -1112,20 +1315,22 @@ var createDatabase = (props) => createShape({
 	},
 	...props
 });
-var databaseShape = {
+var databaseNodeDef = defineComputeNode({
 	type: "database",
 	name: "ECHO",
 	icon: "ph--database--regular",
+	group: "Transform",
+	schema: withZ(DatabaseShape),
 	component: DatabaseComponent,
-	createShape: createDatabase,
-	getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId("output")]: {
+	create: createDatabase,
+	ports: (shape) => createPorts(shape.size, { [createAnchorId("output")]: {
 		x: 1,
 		y: 0
 	} })
-};
+});
 //#endregion
 //#region src/shapes/Feed.tsx
-var FeedComponent = ({ shape }) => {
+var FeedComponent = ({ node: shape }) => {
 	const { runtime } = useComputeNodeState(shape);
 	const items = runtime.outputs[DEFAULT_OUTPUT]?.type === "executed" ? runtime.outputs[DEFAULT_OUTPUT].value : [];
 	return /* @__PURE__ */ jsx(Box, {
@@ -1167,18 +1372,20 @@ var createFeed = (props) => createShape({
 	},
 	...props
 });
-var feedShape = {
+var feedNodeDef = defineComputeNode({
 	type: "queue",
 	name: "Feed",
 	icon: "ph--queue--regular",
+	group: "Outputs",
+	schema: withZ(FeedShape),
 	component: FeedComponent,
-	createShape: createFeed,
-	getAnchors: (shape) => createFunctionAnchors(shape, QueueInput, QueueOutput),
+	create: createFeed,
+	ports: (shape) => createFunctionPorts(shape.size, QueueInput, QueueOutput),
 	resizable: true
-};
+});
 //#endregion
 //#region src/shapes/Function.tsx
-var FunctionShapeComponent = ({ shape, title, ...props }) => {
+var FunctionShapeComponent = ({ node: shape, placeholder }) => {
 	const client = useClient();
 	const { node, runtime } = useComputeNodeState(shape);
 	const inputRef = useRef(null);
@@ -1205,7 +1412,7 @@ var FunctionShapeComponent = ({ shape, title, ...props }) => {
 		title: "Function",
 		onAction: handleAction,
 		children: /* @__PURE__ */ jsx(TextBox, {
-			...props,
+			placeholder,
 			ref: inputRef,
 			value: node.value,
 			language: node.valueType === "object" ? "json" : void 0,
@@ -1225,17 +1432,19 @@ var createFunction = (props) => createShape({
 	},
 	...props
 });
-var functionShape = {
+var functionNodeDef = defineComputeNode({
 	type: "function",
 	name: "Function",
 	icon: "ph--function--regular",
+	group: "Transform",
+	schema: withZ(FunctionShape),
 	component: FunctionShapeComponent,
-	createShape: createFunction,
-	getAnchors: (shape) => createFunctionAnchors(shape, FunctionInput, AnyOutput)
-};
+	create: createFunction,
+	ports: (shape) => createFunctionPorts(shape.size, FunctionInput, AnyOutput)
+});
 //#endregion
 //#region src/shapes/Gpt.tsx
-var GptComponent = ({ shape }) => {
+var GptComponent = ({ node: shape }) => {
 	const { meta, runtime } = useComputeNodeState(shape);
 	const [text, setText] = useState("");
 	const [tokens, setTokens] = useState(0);
@@ -1287,19 +1496,21 @@ var createGpt = (props) => createShape({
 	},
 	...props
 });
-var gptShape = {
+var gptNodeDef = defineComputeNode({
 	type: "gpt",
 	name: "GPT",
 	icon: "ph--brain--regular",
+	group: "Transform",
+	schema: withZ(GptShape),
 	component: GptComponent,
-	createShape: createGpt,
-	getAnchors: (shape) => createFunctionAnchors(shape, GptInput, GptOutput),
+	create: createGpt,
+	ports: (shape) => createFunctionPorts(shape.size, 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 }) => {
+var GptRealtimeComponent = ({ node: shape }) => {
 	const [isLive, setIsLive] = useState(false);
 	const [isReady, setIsReady] = useState(false);
 	const config = useConfig();
@@ -1400,18 +1611,20 @@ var createGptRealtime = (props) => createShape({
 	},
 	...props
 });
-var gptRealtimeShape = {
+var gptRealtimeNodeDef = defineComputeNode({
 	type: "gpt-realtime",
 	name: "GPT Realtime",
 	icon: "ph--pulse--regular",
+	group: "Transform",
+	schema: withZ(GptRealtimeShape),
 	component: GptRealtimeComponent,
-	createShape: createGptRealtime,
-	getAnchors: (shape) => createFunctionAnchors(shape, Schema.Struct({ audio: Schema.Any }), Schema.Struct({})),
+	create: createGptRealtime,
+	ports: (shape) => createFunctionPorts(shape.size, Schema.Struct({ audio: Schema.Any }), Schema.Struct({})),
 	resizable: true
-};
+});
 //#endregion
 //#region src/shapes/Json.tsx
-var JsonComponent = ({ shape, ...props }) => {
+var JsonComponent = ({ node: shape }) => {
 	const { runtime } = useComputeNodeState(shape);
 	const input = runtime.inputs[DEFAULT_INPUT];
 	const value = input?.type === "executed" ? input.value : void 0;
@@ -1423,7 +1636,7 @@ var JsonComponent = ({ shape, ...props }) => {
 		})
 	});
 };
-var JsonTransformComponent = ({ shape, ...props }) => {
+var JsonTransformComponent = ({ node: shape }) => {
 	return /* @__PURE__ */ jsx(Box, { shape });
 };
 //#endregion
@@ -1438,13 +1651,15 @@ var createJson = (props) => createShape({
 	},
 	...props
 });
-var jsonShape = {
+var jsonNodeDef = defineComputeNode({
 	type: "json",
 	name: "JSON",
 	icon: "ph--code--regular",
+	group: "Outputs",
+	schema: withZ(JsonShape),
 	component: JsonComponent,
-	createShape: createJson,
-	getAnchors: (shape) => createAnchorMap(shape, {
+	create: createJson,
+	ports: (shape) => createPorts(shape.size, {
 		[createAnchorId("input")]: {
 			x: -1,
 			y: 0
@@ -1455,7 +1670,7 @@ var jsonShape = {
 		}
 	}),
 	resizable: true
-};
+});
 var createJsonTransform = (props) => createShape({
 	type: "json-transform",
 	size: {
@@ -1464,25 +1679,27 @@ var createJsonTransform = (props) => createShape({
 	},
 	...props
 });
-var jsonTransformShape = {
+var jsonTransformNodeDef = defineComputeNode({
 	type: "json-transform",
 	name: "Transform",
 	icon: "ph--shuffle-simple--regular",
+	group: "Operations",
+	schema: withZ(JsonTransformShape),
 	component: JsonTransformComponent,
-	createShape: createJsonTransform,
-	getAnchors: (shape) => createFunctionAnchors(shape, JsonTransformInput, DefaultOutput),
+	create: createJsonTransform,
+	ports: (shape) => createFunctionPorts(shape.size, JsonTransformInput, DefaultOutput),
 	resizable: true
-};
+});
 //#endregion
 //#region src/shapes/Logic.tsx
-var IfComponent = ({ shape, ...props }) => {
+var IfComponent = ({ node: shape }) => {
 	return /* @__PURE__ */ jsx(FunctionBody, {
 		shape,
 		inputSchema: IfInput,
 		outputSchema: IfOutput
 	});
 };
-var IfElseComponent = ({ shape, ...props }) => {
+var IfElseComponent = ({ node: shape }) => {
 	return /* @__PURE__ */ jsx(FunctionBody, {
 		shape,
 		inputSchema: IfElseInput,
@@ -1501,14 +1718,16 @@ var createIf = (props) => createShape({
 	},
 	...props
 });
-var ifShape = {
+var ifNodeDef = defineComputeNode({
 	type: "if",
 	name: "IF",
 	icon: "ph--arrows-split--regular",
+	group: "Operations",
+	schema: withZ(IfShape),
 	component: IfComponent,
-	createShape: createIf,
-	getAnchors: (shape) => createFunctionAnchors(shape, IfInput, IfOutput)
-};
+	create: createIf,
+	ports: (shape) => createFunctionPorts(shape.size, IfInput, IfOutput)
+});
 var createIfElse = (props) => createShape({
 	type: "if-else",
 	size: {
@@ -1517,14 +1736,16 @@ var createIfElse = (props) => createShape({
 	},
 	...props
 });
-var ifElseShape = {
+var ifElseNodeDef = defineComputeNode({
 	type: "if-else",
 	name: "IF/ELSE",
 	icon: "ph--arrows-merge--regular",
+	group: "Operations",
+	schema: withZ(IfElseShape),
 	component: IfElseComponent,
-	createShape: createIfElse,
-	getAnchors: (shape) => createFunctionAnchors(shape, IfElseInput, IfElseOutput)
-};
+	create: createIfElse,
+	ports: (shape) => createFunctionPorts(shape.size, IfElseInput, IfElseOutput)
+});
 //#endregion
 //#region src/shapes/RNG.tsx
 var icons = [
@@ -1536,7 +1757,7 @@ var icons = [
 	"ph--dice-six--regular"
 ];
 var pickIcon = () => icons[Math.floor(Math.random() * icons.length)];
-var RandomComponent = ({ shape }) => {
+var RandomComponent = ({ node: shape }) => {
 	const { runtime } = useComputeNodeState(shape);
 	const [spin, setSpin] = useState(false);
 	const [icon, setIcon] = useState(pickIcon());
@@ -1583,20 +1804,22 @@ var createRandom = (props) => createShape({
 	},
 	...props
 });
-var randomShape = {
+var randomNodeDef = defineComputeNode({
 	type: "rng",
 	name: "Random",
 	icon: "ph--dice-six--regular",
+	group: "Inputs",
+	schema: withZ(RandomShape),
 	component: RandomComponent,
-	createShape: createRandom,
-	getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId("output")]: {
+	create: createRandom,
+	ports: (shape) => createPorts(shape.size, { [createAnchorId("output")]: {
 		x: 1,
 		y: 0
 	} })
-};
+});
 //#endregion
 //#region src/shapes/Scope.tsx
-var ScopeComponent = ({ shape }) => {
+var ScopeComponent = ({ node: shape }) => {
 	const { runtime } = useComputeNodeState(shape);
 	const input = runtime.inputs[DEFAULT_INPUT];
 	const active = input?.type === "executed" ? input.value : false;
@@ -1625,28 +1848,32 @@ var createScope = (props) => createShape({
 	classNames: "rounded-full border-primary-800",
 	...props
 });
-var scopeShape = {
+var scopeNodeDef = defineComputeNode({
 	type: "scope",
 	name: "Scope",
 	icon: "ph--waveform--regular",
+	group: "Outputs",
+	schema: withZ(ScopeShape),
 	component: ScopeComponent,
-	createShape: createScope,
-	getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId("input")]: {
+	create: createScope,
+	ports: (shape) => createPorts(shape.size, { [createAnchorId("input")]: {
 		x: -1,
 		y: 0
 	} })
-};
+});
 //#endregion
 //#region src/shapes/Surface.tsx
-var SurfaceComponent = ({ shape }) => {
+var SurfaceComponent = ({ node: shape }) => {
 	const { runtime } = useComputeNodeState(shape);
 	const input = runtime.inputs[DEFAULT_INPUT];
 	const value = input?.type === "executed" ? input.value : null;
 	return /* @__PURE__ */ jsx(Box, {
 		shape,
-		children: /* @__PURE__ */ jsx(Card.Root, {
+		children: value !== null && /* @__PURE__ */ jsx(Card.Root, {
 			grid: true,
-			children: value !== null && /* @__PURE__ */ jsx(Surface.Surface, {
+			border: false,
+			classNames: "dx-grow",
+			children: /* @__PURE__ */ jsx(Surface.Surface, {
 				type: AppSurface.CardContent,
 				data: { subject: value },
 				limit: 1
@@ -1665,21 +1892,23 @@ var createSurface = (props) => createShape({
 	},
 	...props
 });
-var surfaceShape = {
+var surfaceNodeDef = defineComputeNode({
 	type: "surface",
 	name: "Surface",
 	icon: "ph--frame-corners--regular",
+	group: "Outputs",
+	schema: withZ(SurfaceShape),
 	component: SurfaceComponent,
-	createShape: createSurface,
-	getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId("input")]: {
+	create: createSurface,
+	ports: (shape) => createPorts(shape.size, { [createAnchorId("input")]: {
 		x: -1,
 		y: 0
 	} }),
 	resizable: true
-};
+});
 //#endregion
 //#region src/shapes/Switch.tsx
-var SwitchComponent = ({ shape }) => {
+var SwitchComponent = ({ node: shape }) => {
 	const { runtime } = useComputeNodeState(shape);
 	const [value, setValue] = useState(false);
 	useEffect(() => {
@@ -1687,12 +1916,15 @@ var SwitchComponent = ({ shape }) => {
 	}, [value]);
 	return /* @__PURE__ */ jsx("div", {
 		className: "flex w-full justify-center items-center",
-		onPointerDown: (ev) => ev.stopPropagation(),
-		onClick: (ev) => ev.stopPropagation(),
-		children: /* @__PURE__ */ jsx(Field.Root, { children: /* @__PURE__ */ jsx(Input.Switch, {
-			checked: value,
-			onCheckedChange: ({ checked: value }) => setValue(value)
-		}) })
+		children: /* @__PURE__ */ jsx("div", {
+			className: "inline-flex",
+			onPointerDown: (ev) => ev.stopPropagation(),
+			onClick: (ev) => ev.stopPropagation(),
+			children: /* @__PURE__ */ jsx(Field.Root, { children: /* @__PURE__ */ jsx(Input.Switch, {
+				checked: value,
+				onCheckedChange: ({ checked: value }) => setValue(value)
+			}) })
+		})
 	});
 };
 //#endregion
@@ -1706,20 +1938,22 @@ var createSwitch = (props) => createShape({
 	},
 	...props
 });
-var switchShape = {
+var switchNodeDef = defineComputeNode({
 	type: "switch",
 	name: "Switch",
 	icon: "ph--toggle-left--regular",
+	group: "Inputs",
+	schema: withZ(SwitchShape),
 	component: SwitchComponent,
-	createShape: createSwitch,
-	getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId("output")]: {
+	create: createSwitch,
+	ports: (shape) => createPorts(shape.size, { [createAnchorId("output")]: {
 		x: 1,
 		y: 0
 	} })
-};
+});
 //#endregion
 //#region src/shapes/Table.tsx
-var TableComponent = ({ shape }) => {
+var TableComponent = ({ node: shape }) => {
 	return /* @__PURE__ */ jsx(Box, { shape });
 };
 //#endregion
@@ -1735,19 +1969,20 @@ var createTable = (props) => createShape({
 	},
 	...props
 });
-var tableShape = {
+var tableNodeDef = defineComputeNode({
 	type: "table",
 	name: "Table",
 	icon: "ph--table--regular",
+	schema: withZ(TableShape),
 	component: TableComponent,
-	createShape: createTable,
-	getAnchors: (shape) => createFunctionAnchors(shape, InputSchema$1, OutputSchema$1),
+	create: createTable,
+	ports: (shape) => createFunctionPorts(shape.size, 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 }) => {
+var TextInputComponent$1 = ({ node: shape, placeholder }) => {
 	const { node } = useComputeNodeState(shape);
 	const inputRef = useRef(null);
 	const handleEnter = (text) => {
@@ -1762,7 +1997,7 @@ var TextInputComponent$1 = ({ shape, title, ...props }) => {
 		invariant(Schema.is(ComputeValueType)(newType), "Invalid type", {
 			"~LogMeta": "~LogMeta",
 			F: __dxlog_file,
-			L: 43,
+			L: 44,
 			S: void 0,
 			A: ["Schema.is(ComputeValueType)(newType)", "'Invalid type'"]
 		});
@@ -1777,7 +2012,7 @@ var TextInputComponent$1 = ({ shape, title, ...props }) => {
 			onValueChange: handleTypeChange
 		}),
 		children: /* @__PURE__ */ jsx(TextBox, {
-			...props,
+			placeholder,
 			ref: inputRef,
 			value: node.value,
 			language: node.valueType === "object" ? "json" : void 0,
@@ -1804,18 +2039,20 @@ var createTemplate = (props) => createShape({
 	},
 	...props
 });
-var templateShape = {
+var templateNodeDef = defineComputeNode({
 	type: "template",
 	name: "Template",
 	icon: "ph--article--regular",
+	group: "Inputs",
+	schema: withZ(TemplateShape),
 	component: TemplateComponent,
-	createShape: createTemplate,
-	getAnchors: (shape) => createFunctionAnchors(shape, VoidInput, TemplateOutput),
+	create: createTemplate,
+	ports: (shape) => createFunctionPorts(shape.size, VoidInput, TemplateOutput),
 	resizable: true
-};
+});
 //#endregion
 //#region src/shapes/Text.tsx
-var TextComponent = ({ shape }) => {
+var TextComponent = ({ node: shape }) => {
 	const { runtime } = useComputeNodeState(shape);
 	const input = runtime.inputs[DEFAULT_INPUT];
 	const value = input?.type === "executed" ? input.value : 0;
@@ -1835,21 +2072,23 @@ var createText = (props) => createShape({
 	},
 	...props
 });
-var textShape = {
+var textNodeDef = defineComputeNode({
 	type: "text",
 	name: "Text",
 	icon: "ph--article--regular",
+	group: "Outputs",
+	schema: withZ(TextShape),
 	component: TextComponent,
-	createShape: createText,
-	getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId("input")]: {
+	create: createText,
+	ports: (shape) => createPorts(shape.size, { [createAnchorId("input")]: {
 		x: -1,
 		y: 0
 	} }),
 	resizable: true
-};
+});
 //#endregion
 //#region src/shapes/TextToImage.tsx
-var TextToImageComponent = ({ shape }) => {
+var TextToImageComponent = ({ node: shape }) => {
 	return /* @__PURE__ */ jsx(Box, { shape });
 };
 //#endregion
@@ -1863,20 +2102,22 @@ var createTextToImage = (props) => createShape({
 	},
 	...props
 });
-var textToImageShape = {
+var textToImageNodeDef = defineComputeNode({
 	type: "text-to-image",
 	name: "Image",
 	icon: "ph--image--regular",
+	group: "Transform",
+	schema: withZ(TextToImageShape),
 	component: TextToImageComponent,
-	createShape: createTextToImage,
-	getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId("output")]: {
+	create: createTextToImage,
+	ports: (shape) => createPorts(shape.size, { [createAnchorId("output")]: {
 		x: 1,
 		y: 0
 	} })
-};
+});
 //#endregion
 //#region src/shapes/Thread.tsx
-var ThreadComponent = ({ shape }) => {
+var ThreadComponent = ({ node: shape }) => {
 	const items = [];
 	const scrollRef = useRef(null);
 	useEffect(() => {
@@ -1921,15 +2162,17 @@ var createThread = (props) => createShape({
 	},
 	...props
 });
-var threadShape = {
+var threadNodeDef = defineComputeNode({
 	type: "thread",
 	name: "Thread",
 	icon: "ph--chats-circle--regular",
+	group: "Outputs",
+	schema: withZ(ThreadShape),
 	component: ThreadComponent,
-	createShape: createThread,
-	getAnchors: (shape) => createFunctionAnchors(shape, InputSchema, OutputSchema),
+	create: createThread,
+	ports: (shape) => createFunctionPorts(shape.size, InputSchema, OutputSchema),
 	resizable: true
-};
+});
 //#endregion
 //#region src/shapes/trigger-spec.ts
 var createTriggerSpec = (props) => {
@@ -1954,7 +2197,7 @@ var getOutputSchema = (kind) => {
 };
 //#endregion
 //#region src/shapes/Trigger.tsx
-var TriggerComponent = ({ shape }) => {
+var TriggerComponent = ({ node: shape }) => {
 	const [space] = useSpaces();
 	const functionTrigger = useResolveRef(shape.functionTrigger);
 	useEffect(() => {
@@ -2027,14 +2270,20 @@ var createTrigger = (props) => {
 		...props
 	});
 };
-var triggerShape = {
+var triggerNodeDef = defineComputeNode({
 	type: "trigger",
 	name: "Trigger",
 	icon: "ph--lightning--regular",
+	group: "Inputs",
+	schema: withZ(TriggerShapeSchema),
 	component: TriggerComponent,
-	createShape: createTrigger,
-	getAnchors: (shape) => createFunctionAnchors(shape, VoidInput, getOutputSchema(shape.functionTrigger?.target?.spec?.kind ?? "email"))
-};
+	create: createTrigger,
+	defaultSize: {
+		width: 192,
+		height: getHeight(TriggerEvent.EmailEvent)
+	},
+	ports: (shape) => createFunctionPorts(shape.size, VoidInput, getOutputSchema(shape.functionTrigger?.target?.spec?.kind ?? "email"))
+});
 //#endregion
 //#region src/shapes/Boolean.tsx
 var GateShape = ComputeShape.mapFields(Struct.assign({ type: Schema.String }));
@@ -2045,19 +2294,21 @@ var createGate = (props) => createShape({
 	},
 	...props
 });
-var defineShape = ({ type, name, icon, symbol: Symbol, createShape, inputs, outputs = [createAnchorId("output")] }) => ({
+var defineGate = ({ type, name, icon, symbol: Symbol, create, inputs, outputs = [createAnchorId("output")] }) => defineComputeNode({
 	type,
 	name,
 	icon,
+	group: "Operations",
+	schema: withZ(GateShape),
 	component: () => {
 		return /* @__PURE__ */ jsx("div", {
 			className: "flex w-full justify-center items-center",
 			children: /* @__PURE__ */ jsx(Symbol, {})
 		});
 	},
-	createShape,
-	getAnchors: (shape) => createAnchors({
-		shape,
+	create,
+	ports: (shape) => createRowPorts({
+		size: shape.size,
 		inputs,
 		outputs
 	})
@@ -2075,7 +2326,7 @@ var createSymbol = (pathConstructor, inputs) => ({ width = 64, height = 32, clas
 		viewBox: `0 0 ${width} ${height}`,
 		className: "dx-fill",
 		children: [
-			getAnchorPoints({
+			getRowPoints({
 				x: 0,
 				y: centerY
 			}, inputs).map(({ x, y }, i) => /* @__PURE__ */ jsx("line", {
@@ -2119,12 +2370,12 @@ var createAnd = (props) => {
 		type: "and"
 	});
 };
-var andShape = defineShape({
+var andNodeDef = defineGate({
 	type: "and",
 	name: "AND",
 	icon: "ph--intersection--regular",
 	symbol: AndSymbol,
-	createShape: createAnd,
+	create: createAnd,
 	inputs: ["input.a", "input.b"]
 });
 var OrSymbol = createSymbol(({ startX, endX, height }) => {
@@ -2145,12 +2396,12 @@ var createOr = (props) => {
 		type: "or"
 	});
 };
-var orShape = defineShape({
+var orNodeDef = defineGate({
 	type: "or",
 	name: "OR",
 	icon: "ph--union--regular",
 	symbol: OrSymbol,
-	createShape: createOr,
+	create: createOr,
 	inputs: ["input.a", "input.b"]
 });
 var NotSymbol = createSymbol(({ startX, endX, height }) => {
@@ -2173,72 +2424,54 @@ var createNot = (props) => {
 		type: "not"
 	});
 };
-var notShape = defineShape({
+var notNodeDef = defineGate({
 	type: "not",
 	name: "NOT",
 	icon: "ph--x--regular",
 	symbol: NotSymbol,
-	createShape: createNot,
+	create: 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]
-	}
+/** The compute types in palette order, each under its group (Inputs, Transform, Operations, Outputs). */
+var computeNodeDefs = [
+	constantNodeDef,
+	templateNodeDef,
+	chatNodeDef,
+	switchNodeDef,
+	audioNodeDef,
+	triggerNodeDef,
+	randomNodeDef,
+	gptNodeDef,
+	gptRealtimeNodeDef,
+	functionNodeDef,
+	databaseNodeDef,
+	textToImageNodeDef,
+	appendNodeDef,
+	ifNodeDef,
+	ifElseNodeDef,
+	andNodeDef,
+	orNodeDef,
+	notNodeDef,
+	reducerNodeDef,
+	jsonTransformNodeDef,
+	jsonNodeDef,
+	feedNodeDef,
+	threadNodeDef,
+	textNodeDef,
+	surfaceNodeDef,
+	beaconNodeDef,
+	scopeNodeDef
 ];
+/** The compute types plus the engine's note under a `Misc` group. */
+var computeNodeRegistry = {
+	...Object.fromEntries(computeNodeDefs.map((def) => [def.type, def])),
+	note: {
+		...defaultNodeRegistry.note,
+		group: "Misc"
+	}
+};
 //#endregion
 //#region src/scene/Bullets.tsx
 var RADIUS = 3;
@@ -2292,124 +2525,6 @@ var fireBullet = (layer, path) => {
 	requestAnimationFrame(step);
 };
 //#endregion
-//#region src/scene/NodeView.tsx
-/**
-* The shape component under the engine's view props: the node is the shape (it carries the same fields
-* plus `z`), re-rendered on every controller update since the runtime state it reads is not reactive.
-*/
-var computeNodeView = (schema, Component) => {
-	const isShape = Schema.is(schema);
-	const View = (props) => {
-		const { node, selected } = props;
-		const { controller } = useComputeContext();
-		useControllerUpdates(controller);
-		if (!isShape(node)) return /* @__PURE__ */ jsx(UnknownNodeView, { ...props });
-		return /* @__PURE__ */ jsx("div", {
-			className: "dx-cover flex",
-			children: /* @__PURE__ */ jsx(Component, {
-				shape: node,
-				selected
-			})
-		});
-	};
-	View.displayName = `ComputeNodeView(${Component.displayName ?? Component.name})`;
-	return View;
-};
-//#endregion
-//#region src/scene/ports.ts
-/** The ports of a shape from its anchors; a port's direction comes from the `input.` / `output.` prefix. */
-var anchorsToPorts = (anchors, size) => Object.values(anchors).map(({ id, pos }) => {
-	const [kind] = parseAnchorId(id);
-	const half = {
-		x: size.width / 2,
-		y: size.height / 2
-	};
-	const vertical = Math.abs(Math.abs(pos.x) - half.x) <= Math.abs(Math.abs(pos.y) - half.y);
-	const side = vertical ? pos.x < 0 ? "w" : "e" : pos.y < 0 ? "n" : "s";
-	const along = vertical ? (pos.y + half.y) / size.height : (pos.x + half.x) / size.width;
-	return {
-		id,
-		side,
-		offset: Math.min(Math.max(along, 0), 1),
-		...kind === "input" ? { accepts: "in" } : kind === "output" ? { accepts: "out" } : {}
-	};
-});
-//#endregion
-//#region src/scene/defs.ts
-/** The shape's schema with the engine's z-order key, so it is a node schema. */
-var withZ = (shape) => shape.mapFields(Struct.assign({ z: Schema.String }));
-/** `schema` is the shape's with `z` (`withZ`), applied at the call site so each stays a concrete struct. */
-var entry = (group, shape, schema, defaultSize = shape.createShape({
-	id: "default",
-	center: {
-		x: 0,
-		y: 0
-	}
-}).size) => ({
-	group,
-	def: {
-		type: shape.type,
-		name: shape.name,
-		icon: shape.icon,
-		group,
-		schema,
-		component: computeNodeView(schema, shape.component),
-		create: ({ id, z, center, size }) => ({
-			...shape.createShape({
-				id,
-				center
-			}),
-			z,
-			size
-		}),
-		defaultSize,
-		ports: (node) => isShapeOf(schema, node) ? anchorsToPorts(shape.getAnchors?.(node) ?? {}, node.size) : [],
-		resizable: shape.resizable,
-		openable: shape.openable
-	}
-});
-var isShapeOf = (schema, node) => Schema.is(schema)(node);
-var computeNodeDefs = [
-	entry("Inputs", constantShape, withZ(ConstantShape)),
-	entry("Inputs", templateShape, withZ(TemplateShape)),
-	entry("Inputs", chatShape, withZ(ChatShape)),
-	entry("Inputs", switchShape, withZ(SwitchShape)),
-	entry("Inputs", audioShape, withZ(AudioShape)),
-	entry("Inputs", triggerShape, withZ(TriggerShapeSchema), {
-		width: 192,
-		height: getHeight(TriggerEvent.EmailEvent)
-	}),
-	entry("Inputs", randomShape, withZ(RandomShape)),
-	entry("Transform", gptShape, withZ(GptShape)),
-	entry("Transform", gptRealtimeShape, withZ(GptRealtimeShape)),
-	entry("Transform", functionShape, withZ(FunctionShape)),
-	entry("Transform", databaseShape, withZ(DatabaseShape)),
-	entry("Transform", textToImageShape, withZ(TextToImageShape)),
-	entry("Transform", appendShape, withZ(AppendShape)),
-	entry("Operations", ifShape, withZ(IfShape)),
-	entry("Operations", ifElseShape, withZ(IfElseShape)),
-	entry("Operations", andShape, withZ(AndShape)),
-	entry("Operations", orShape, withZ(OrShape)),
-	entry("Operations", notShape, withZ(NotShape)),
-	entry("Operations", reducerShape, withZ(ReducerShape)),
-	entry("Operations", jsonTransformShape, withZ(JsonTransformShape)),
-	entry("Outputs", jsonShape, withZ(JsonShape)),
-	entry("Outputs", feedShape, withZ(FeedShape)),
-	entry("Outputs", threadShape, withZ(ThreadShape)),
-	entry("Outputs", textShape, withZ(TextShape)),
-	entry("Outputs", surfaceShape, withZ(SurfaceShape)),
-	entry("Outputs", beaconShape, withZ(BeaconShape)),
-	entry("Outputs", scopeShape, withZ(ScopeShape))
-].map(({ def }) => def);
-/** The compute types plus the engine's note under a `Misc` group. */
-var computeNodeRegistry = {
-	...Object.fromEntries(computeNodeDefs.map((def) => [def.type, def])),
-	note: {
-		...defaultNodeRegistry.note,
-		group: "Misc"
-	}
-};
-//#endregion
 //#region src/scene/echo-store.ts
 /** The scene id a board's own layout takes; a board holds one scene, so it is the board's id. */
 var boardSceneId = (board) => board.id;
@@ -2442,7 +2557,7 @@ var sceneFromLayout = (id, layout, name) => {
 	};
 };
 var nodeFromShape = (shape, z) => {
-	const { guide: _guide, classNames: _classNames, ...rest } = shape;
+	const { guide: _guide, ...rest } = shape;
 	const style = styleFromShape(shape);
 	return {
 		...rest,
@@ -2450,12 +2565,11 @@ var nodeFromShape = (shape, z) => {
 		...style ? { style } : {}
 	};
 };
-/** A shape's look: its own `style` when the engine wrote one, else the editor's two top-level fields. */
+/** A shape's look: its own `style` when the engine wrote one, else the editor's top-level `guide`. */
 var styleFromShape = (shape) => {
-	const { style, guide, classNames } = shape;
+	const { style, guide } = shape;
 	const merged = {
 		...guide !== void 0 ? { guide } : {},
-		...classNames !== void 0 ? { className: classNames } : {},
 		...style
 	};
 	return Object.keys(merged).length > 0 ? merged : void 0;
@@ -2522,8 +2636,7 @@ var shapeFromNode = (node) => {
 	return {
 		...rest,
 		...style ? { style } : {},
-		...style?.guide !== void 0 ? { guide: style.guide } : {},
-		...style?.className !== void 0 ? { classNames: style.className } : {}
+		...style?.guide !== void 0 ? { guide: style.guide } : {}
 	};
 };
 var edgeFromLink = (link) => {
@@ -2723,14 +2836,14 @@ var withRuntimePorts = (controller, node) => {
 	const outputSchema = computeNode.outputSchema ? JsonSchema$1.toEffectSchema(computeNode.outputSchema) : DefaultOutput;
 	return {
 		...node,
-		ports: anchorsToPorts(createFunctionAnchors(node, inputSchema, outputSchema), node.size)
+		ports: createFunctionPorts(node.size, inputSchema, outputSchema)
 	};
 };
 var model = (controller) => controller.graph;
 //#endregion
 //#region src/scene/scene.ts
 var sceneFromCircuit = (model, id = "circuit", name) => {
-	const shapes = model.nodes.filter(isPolygon);
+	const shapes = model.nodes.filter(Schema.is(ComputeShape));
 	const keys = initialKeys(shapes.length + model.edges.length);
 	const nodes = {};
 	shapes.forEach((shape, index) => {
@@ -2761,7 +2874,7 @@ var sceneFromCircuit = (model, id = "circuit", name) => {
 				node: edge.target,
 				port: createAnchorId("input", edge.input ?? DEFAULT_INPUT)
 			},
-			directed: true
+			ends: { end: "arrow" }
 		};
 	});
 	return {
@@ -2772,23 +2885,6 @@ var sceneFromCircuit = (model, id = "circuit", name) => {
 	};
 };
 //#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 ? JsonSchema$1.toEffectSchema(node.inputSchema) : DefaultInput, node.outputSchema ? JsonSchema$1.toEffectSchema(node.outputSchema) : DefaultOutput);
-		}
-		return anchors;
-	}
-};
-//#endregion
-export { AndShape, AppendComponent, AppendShape, AudioComponent, AudioShape, BeaconComponent, BeaconShape, Box, Bullets, 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, TriggerShapeSchema, TypeSelect, anchorsToPorts, andShape, appendShape, applySceneToLayout, audioShape, beaconShape, boardSceneId, bodyPadding, chatShape, computeNodeDefs, computeNodeRegistry, computeNodeView, computeShapes, constantShape, createAnchorId, createAnd, createAppend, createAudio, createBeacon, createChat, createComputeGraph, createComputeGraphController, createComputeNode, createComputeProjection, createConstant, createDatabase, createEchoStore, createFeed, createFunction, createFunctionAnchors, createGpt, createGptRealtime, createIf, createIfElse, createJson, createJsonTransform, createNot, createOr, createRandom, createReducer, createScope, createShape, createSurface, createSwitch, createTable, createTemplate, createText, createTextToImage, createThread, createTrigger, databaseShape, deleteTriggerObjects, feedShape, findEdge, findEdges, footerHeight, functionShape, getHeight, getProperties, gptRealtimeShape, gptShape, headerHeight, ifElseShape, ifShape, isValidComputeNode, jsonShape, jsonTransformShape, mapEdge, notShape, orShape, parseAnchorId, randomShape, reducerShape, resolveComputeNode, sceneFromCircuit, sceneFromLayout, scopeShape, surfaceShape, switchShape, syncCreate, syncDelete, syncLink, tableShape, templateShape, textShape, textToImageShape, threadShape, triggerShape, useComputeContext, useComputeGraphController, useComputeNodeState, useControllerUpdates, useGraphMonitor };
+export { AndShape, AppendComponent, AppendShape, AudioComponent, AudioShape, BeaconComponent, BeaconShape, Box, Bullets, schema_exports as CanvasBoard, CanvasGraphModel, ChatShape, ComputeContext, ComputeGraphController, ComputeNodeDefContext, ComputeShape, ConstantComponent, ConstantShape, DatabaseComponent, DatabaseShape, EllipseShape, FeedComponent, FeedItem, FeedShape, FunctionBody, FunctionShape, FunctionShapeComponent, GptComponent, GptRealtimeComponent, GptRealtimeShape, GptShape, IfComponent, IfElseComponent, IfElseShape, IfShape, InvalidStateError, JsonComponent, JsonShape, JsonTransformComponent, JsonTransformShape, NotShape, NoteShape, OrShape, PathShape, Polygon, RandomComponent, RandomShape, RectangleShape, ReducerComponent, ReducerShape, ScopeComponent, ScopeShape, SurfaceComponent, SurfaceShape, SwitchComponent, SwitchShape, TableComponent, TableShape, TemplateComponent, TemplateShape, TextBox, TextComponent, TextInputComponent, TextShape, TextToImageComponent, TextToImageShape, ThreadComponent, ThreadItem, ThreadShape, TriggerComponent, TriggerShape, TriggerShapeSchema, TypeSelect, andNodeDef, appendNodeDef, applySceneToLayout, audioNodeDef, beaconNodeDef, boardSceneId, chatNodeDef, computeNodeDefs, computeNodeRegistry, constantNodeDef, createAnchorId, createAnd, createAppend, createAudio, createBeacon, createChat, createComputeGraph, createComputeGraphController, createComputeNode, createComputeProjection, createConstant, createDatabase, createEchoStore, createFeed, createFunction, createFunctionPorts, createGpt, createGptRealtime, createIf, createIfElse, createJson, createJsonTransform, createNot, createOr, createPorts, createRandom, createReducer, createRowPorts, createScope, createShape, createSurface, createSwitch, createTable, createTemplate, createText, createTextToImage, createThread, createTrigger, databaseNodeDef, defineComputeNode, deleteTriggerObjects, feedNodeDef, findEdge, findEdges, footerHeight, functionNodeDef, getHeight, getProperties, getRowPoints, gptNodeDef, gptRealtimeNodeDef, headerHeight, ifElseNodeDef, ifNodeDef, isPath, isPolygon, isValidComputeNode, jsonNodeDef, jsonTransformNodeDef, mapEdge, notNodeDef, orNodeDef, parseAnchorId, pointsToPorts, randomNodeDef, reducerNodeDef, resolveComputeNode, rowHeight, sceneFromCircuit, sceneFromLayout, scopeNodeDef, surfaceNodeDef, switchNodeDef, syncCreate, syncDelete, syncLink, tableNodeDef, templateNodeDef, textNodeDef, textToImageNodeDef, threadNodeDef, triggerNodeDef, useComputeContext, useComputeNodeDef, useComputeNodeState, useControllerUpdates, useGraphMonitor, withZ };
 
 //# sourceMappingURL=index.mjs.map