@classytic/labs 0.1.0 → 0.2.0

package/dist/logic/LogicEditScene.mjs

@@ -0,0 +1,276 @@
+'use client';
+
+import { JunctionDot, Wire, orthPoints } from "../kit/electronics.mjs";
+import { GateGlyph, Lamp, ToggleSwitch, gatePorts } from "../kit/logic-gates.mjs";
+import { getGate } from "./registry.mjs";
+import { evaluate } from "./evaluate.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/logic/LogicEditScene.tsx
+const SW_W = 52;
+const SW_H = 28;
+const GATE = 50;
+const LED_R = 15;
+const glyphOf = (kind) => getGate(kind)?.glyph ?? "AND";
+const xy = (n, dx, dy) => ({
+	x: n.x ?? dx,
+	y: n.y ?? dy
+});
+function LogicEditScene({ doc, selectedId, wireStart, previewCursor, onNodePointerDown, onPortPointerDown, onBackground, ariaLabel }) {
+	const sol = evaluate(doc);
+	const W = doc.size?.w ?? 640, H = doc.size?.h ?? 360;
+	const pos = /* @__PURE__ */ new Map();
+	doc.inputs.forEach((n, i) => pos.set(n.id, xy(n, 40, 40 + i * 56)));
+	doc.gates.forEach((n, i) => pos.set(n.id, xy(n, 260, 60 + i * 80)));
+	doc.outputs.forEach((n, i) => pos.set(n.id, xy(n, W - 80, 60 + i * 70)));
+	const outPort = (id) => {
+		const p = pos.get(id);
+		if (!p) return null;
+		if (doc.inputs.some((n) => n.id === id)) return {
+			x: p.x + 52,
+			y: p.y + 28 / 2
+		};
+		const g = doc.gates.find((n) => n.id === id);
+		if (g) return gatePorts(glyphOf(g.kind), p.x, p.y, 50).output;
+		return null;
+	};
+	const gateInPorts = (id) => {
+		const p = pos.get(id);
+		const g = doc.gates.find((n) => n.id === id);
+		if (!p || !g) return [];
+		return gatePorts(glyphOf(g.kind), p.x, p.y, 50).inputs;
+	};
+	const outInPort = (id) => {
+		const p = pos.get(id);
+		return p ? {
+			x: p.x,
+			y: p.y + 15
+		} : null;
+	};
+	const wires = [];
+	const wire = (key, a, b, on) => {
+		if (!a || !b) return;
+		wires.push(/* @__PURE__ */ jsx(Wire, {
+			points: orthPoints(a, b),
+			live: on
+		}, key));
+	};
+	doc.gates.forEach((g) => g.in.forEach((src, i) => {
+		if (src) wire(`w-${g.id}-${i}`, outPort(src), gateInPorts(g.id)[i] ?? null, sol.high(src));
+	}));
+	doc.outputs.forEach((o) => {
+		if (o.in) wire(`wo-${o.id}`, outPort(o.in), outInPort(o.id), sol.high(o.in));
+	});
+	const fanout = /* @__PURE__ */ new Map();
+	const bump = (id) => {
+		if (id) fanout.set(id, (fanout.get(id) ?? 0) + 1);
+	};
+	doc.gates.forEach((g) => g.in.forEach(bump));
+	doc.outputs.forEach((o) => bump(o.in));
+	const junctions = [];
+	fanout.forEach((n, src) => {
+		if (n >= 2) {
+			const sp = outPort(src);
+			if (sp) junctions.push(/* @__PURE__ */ jsx(JunctionDot, {
+				x: sp.x,
+				y: sp.y,
+				r: 3.5,
+				live: sol.high(src)
+			}, `j-${src}`));
+		}
+	});
+	const isStart = (r) => !!wireStart && wireStart.nodeId === r.nodeId && wireStart.dir === r.dir && wireStart.slot === r.slot;
+	const portDot = (ref, at, on) => {
+		if (!at) return null;
+		const start = isStart(ref);
+		return /* @__PURE__ */ jsxs("g", {
+			onPointerDown: (e) => {
+				e.stopPropagation();
+				onPortPointerDown?.(ref, e);
+			},
+			style: { cursor: "crosshair" },
+			children: [
+				/* @__PURE__ */ jsx("circle", {
+					cx: at.x,
+					cy: at.y,
+					r: 9,
+					fill: "transparent"
+				}),
+				start && /* @__PURE__ */ jsx("circle", {
+					cx: at.x,
+					cy: at.y,
+					r: 7,
+					fill: "none",
+					stroke: "var(--stage-accent)",
+					strokeWidth: 2
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: at.x,
+					cy: at.y,
+					r: 4,
+					fill: on ? "var(--stage-live)" : "var(--stage-metal)",
+					stroke: "var(--stage-bg)",
+					strokeWidth: 1
+				})
+			]
+		}, `p-${ref.nodeId}-${ref.dir}-${ref.slot ?? "x"}`);
+	};
+	const selRing = (id, x, y, w, h) => selectedId === id ? /* @__PURE__ */ jsx("rect", {
+		x: x - 5,
+		y: y - 5,
+		width: w + 10,
+		height: h + 10,
+		rx: 7,
+		fill: "none",
+		stroke: "var(--stage-accent)",
+		strokeWidth: 1.5,
+		strokeDasharray: "4 3"
+	}) : null;
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: `0 0 ${W} ${H}`,
+		width: "100%",
+		style: {
+			maxWidth: W,
+			display: "block",
+			background: "var(--stage-bg)",
+			borderRadius: 10,
+			touchAction: "none"
+		},
+		role: "img",
+		"aria-label": ariaLabel ?? "logic circuit builder canvas",
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				x: 0,
+				y: 0,
+				width: W,
+				height: H,
+				fill: "transparent",
+				onPointerDown: () => onBackground?.()
+			}),
+			wires,
+			junctions,
+			wireStart && previewCursor && (() => {
+				const a = outPort(wireStart.nodeId);
+				if (!a) return null;
+				let target = null, bd = 18;
+				const consider = (pt) => {
+					if (pt) {
+						const d = Math.hypot(previewCursor.x - pt.x, previewCursor.y - pt.y);
+						if (d < bd) {
+							bd = d;
+							target = pt;
+						}
+					}
+				};
+				doc.gates.forEach((g) => gateInPorts(g.id).forEach((pt) => consider(pt)));
+				doc.outputs.forEach((o) => consider(outInPort(o.id)));
+				const b = target ?? previewCursor;
+				const dx = Math.max(18, Math.abs(b.x - a.x) * .45);
+				return /* @__PURE__ */ jsxs("g", {
+					style: { pointerEvents: "none" },
+					children: [/* @__PURE__ */ jsx("path", {
+						d: `M${a.x},${a.y} C${a.x + dx},${a.y} ${b.x - dx},${b.y} ${b.x},${b.y}`,
+						fill: "none",
+						stroke: "var(--stage-accent)",
+						strokeWidth: 2.5,
+						strokeDasharray: "5 4",
+						strokeLinecap: "round",
+						opacity: .9
+					}), /* @__PURE__ */ jsx("circle", {
+						cx: b.x,
+						cy: b.y,
+						r: target ? 6 : 4,
+						fill: target ? "var(--stage-accent)" : "var(--stage-bg)",
+						stroke: "var(--stage-accent)",
+						strokeWidth: 2
+					})]
+				});
+			})(),
+			doc.inputs.map((inp) => {
+				const p = pos.get(inp.id);
+				return /* @__PURE__ */ jsxs("g", { children: [
+					selRing(inp.id, p.x, p.y, 52, 28),
+					/* @__PURE__ */ jsx("g", {
+						onPointerDown: (e) => onNodePointerDown?.(inp.id, e),
+						style: { cursor: "grab" },
+						children: /* @__PURE__ */ jsx(ToggleSwitch, {
+							x: p.x,
+							y: p.y,
+							w: 52,
+							h: 28,
+							on: sol.value(inp.id),
+							label: inp.label
+						})
+					}),
+					portDot({
+						nodeId: inp.id,
+						dir: "out"
+					}, outPort(inp.id), sol.high(inp.id))
+				] }, inp.id);
+			}),
+			doc.gates.map((g) => {
+				const p = pos.get(g.id);
+				const ins = gateInPorts(g.id);
+				return /* @__PURE__ */ jsxs("g", { children: [
+					selRing(g.id, p.x, p.y, 50, 50),
+					/* @__PURE__ */ jsx("g", {
+						onPointerDown: (e) => onNodePointerDown?.(g.id, e),
+						style: { cursor: "grab" },
+						children: /* @__PURE__ */ jsx(GateGlyph, {
+							x: p.x,
+							y: p.y,
+							size: 50,
+							type: glyphOf(g.kind),
+							live: sol.high(g.id),
+							label: g.label ?? getGate(g.kind)?.label
+						})
+					}),
+					ins.map((_, i) => portDot({
+						nodeId: g.id,
+						dir: "in",
+						slot: i
+					}, ins[i] ?? null, !!g.in[i] && sol.high(g.in[i]))),
+					portDot({
+						nodeId: g.id,
+						dir: "out"
+					}, outPort(g.id), sol.high(g.id))
+				] }, g.id);
+			}),
+			doc.outputs.map((o) => {
+				const p = pos.get(o.id);
+				const lit = !!o.in && sol.high(o.in);
+				const met = o.goal !== void 0 && (sol.outputs[o.id] ?? false) === o.goal;
+				return /* @__PURE__ */ jsxs("g", { children: [
+					selRing(o.id, p.x, p.y, 15 * 2, 15 * 2),
+					/* @__PURE__ */ jsx("g", {
+						onPointerDown: (e) => onNodePointerDown?.(o.id, e),
+						style: { cursor: "grab" },
+						children: /* @__PURE__ */ jsx(Lamp, {
+							cx: p.x + 15,
+							cy: p.y + 15,
+							r: 15,
+							on: lit,
+							color: o.color,
+							label: o.label
+						})
+					}),
+					o.goal !== void 0 && /* @__PURE__ */ jsx("circle", {
+						cx: p.x + 15,
+						cy: p.y + 15,
+						r: 20,
+						fill: "none",
+						stroke: met ? "var(--stage-good)" : "var(--stage-danger, #e03131)",
+						strokeWidth: 2
+					}),
+					portDot({
+						nodeId: o.id,
+						dir: "in"
+					}, outInPort(o.id), lit)
+				] }, o.id);
+			})
+		]
+	});
+}
+
+//#endregion
+export { LogicEditScene };

package/dist/logic/LogicEditor.d.mts

@@ -0,0 +1,14 @@
+import { LogicDoc } from "./contract.mjs";
+import { ReactNode } from "react";
+
+//#region src/logic/LogicEditor.d.ts
+interface LogicEditorProps {
+  value: LogicDoc;
+  onChange: (doc: LogicDoc) => void;
+}
+declare function LogicEditor({
+  value,
+  onChange
+}: LogicEditorProps): ReactNode;
+//#endregion
+export { LogicEditor, LogicEditorProps };

package/dist/logic/LogicEditor.mjs

@@ -0,0 +1,413 @@
+'use client';
+
+import { GateGlyph } from "../kit/logic-gates.mjs";
+import { EBtn, Field, Panel, TextInput } from "../build/editor-ui.mjs";
+import { listGates } from "./registry.mjs";
+import { LogicEditScene } from "./LogicEditScene.mjs";
+import { addNode, connect, deleteNode, disconnect, moveNode, relabel, setGoal, toggleInput } from "./edit-ops.mjs";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/logic/LogicEditor.tsx
+/**
+* LogicEditor — the drag-and-drop digital-logic canvas (the gate-circuit counterpart of the
+* analog CircuitEditor, reusing its editor-UI kit and click-vs-drag interaction). Drop a
+* source, an LED, or any gate from the palette; drag nodes to lay them out; click an OUTPUT
+* dot then an INPUT slot to wire them; toggle a source by clicking it. The doc evaluates live,
+* so wires glow and LEDs light as you build. Emits the LogicDoc via `onChange`.
+*/
+const SNAP = 10;
+const snap = (n) => Math.round(n / SNAP) * SNAP;
+const emptyDoc = {
+	inputs: [],
+	gates: [],
+	outputs: [],
+	size: {
+		w: 640,
+		h: 360
+	}
+};
+function PaletteThumb({ glyph }) {
+	if (!glyph) return /* @__PURE__ */ jsx("span", {
+		style: {
+			width: 30,
+			textAlign: "center",
+			fontSize: 16
+		},
+		"aria-hidden": true,
+		children: "●"
+	});
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 34 34",
+		width: 30,
+		height: 22,
+		"aria-hidden": true,
+		style: { flexShrink: 0 },
+		children: /* @__PURE__ */ jsx(GateGlyph, {
+			x: 2,
+			y: 2,
+			size: 30,
+			type: glyph
+		})
+	});
+}
+function LogicEditor({ value, onChange }) {
+	const doc = value ?? emptyDoc;
+	const W = doc.size?.w ?? 640;
+	const [selected, setSelected] = useState(null);
+	const [wireStart, setWireStart] = useState(null);
+	const [cursor, setCursor] = useState(null);
+	const [full, setFull] = useState(false);
+	const hostRef = useRef(null);
+	const docRef = useRef(doc);
+	docRef.current = doc;
+	const onChangeRef = useRef(onChange);
+	onChangeRef.current = onChange;
+	const wireRef = useRef(wireStart);
+	wireRef.current = wireStart;
+	const toCanvas = (cx, cy) => {
+		const host = hostRef.current;
+		if (!host) return {
+			x: 0,
+			y: 0
+		};
+		const r = host.getBoundingClientRect();
+		const scale = r.width / W;
+		return {
+			x: (cx - r.left) / scale,
+			y: (cy - r.top) / scale
+		};
+	};
+	useEffect(() => {
+		if (!wireStart) {
+			setCursor(null);
+			return;
+		}
+		const move = (ev) => setCursor(toCanvas(ev.clientX, ev.clientY));
+		const key = (ev) => {
+			if (ev.key === "Escape") setWireStart(null);
+		};
+		window.addEventListener("pointermove", move);
+		window.addEventListener("keydown", key);
+		return () => {
+			window.removeEventListener("pointermove", move);
+			window.removeEventListener("keydown", key);
+		};
+	}, [wireStart]);
+	const palette = [
+		{
+			kind: "input",
+			label: "Source (switch)"
+		},
+		...listGates().map((g) => ({
+			kind: g.kind,
+			label: g.label,
+			glyph: g.glyph
+		})),
+		{
+			kind: "output",
+			label: "LED (output)"
+		}
+	];
+	const sel = [
+		...doc.inputs,
+		...doc.gates,
+		...doc.outputs
+	].find((n) => n.id === selected) ?? null;
+	const selKind = !sel ? null : doc.inputs.some((n) => n.id === sel.id) ? "input" : doc.gates.some((n) => n.id === sel.id) ? "gate" : "output";
+	const selOutput = selKind === "output" ? doc.outputs.find((o) => o.id === sel.id) ?? null : null;
+	const selInput = selKind === "input" ? doc.inputs.find((i) => i.id === sel.id) ?? null : null;
+	const place = (kind, at) => {
+		const { doc: next, id } = addNode(docRef.current, kind, at);
+		onChangeRef.current(next);
+		setSelected(id);
+	};
+	const dropAt = (kind, clientX, clientY) => {
+		const host = hostRef.current;
+		const n = docRef.current.gates.length + docRef.current.inputs.length;
+		const fallback = {
+			x: snap(120 + n % 3 * 140),
+			y: snap(70 + Math.floor(n / 3) * 80)
+		};
+		if (!host) return place(kind, fallback);
+		const r = host.getBoundingClientRect();
+		if (clientX < r.left || clientX > r.right || clientY < r.top || clientY > r.bottom) return place(kind, fallback);
+		const sc = r.width / W;
+		place(kind, {
+			x: snap((clientX - r.left) / sc),
+			y: snap((clientY - r.top) / sc)
+		});
+	};
+	const startPaletteDrag = (kind) => {
+		const up = (ev) => {
+			window.removeEventListener("pointerup", up);
+			dropAt(kind, ev.clientX, ev.clientY);
+		};
+		window.addEventListener("pointerup", up);
+	};
+	const portClick = (ref) => {
+		if (ref.dir === "out") {
+			setWireStart((prev) => prev && prev.nodeId === ref.nodeId ? null : ref);
+			return;
+		}
+		const start = wireRef.current;
+		if (start) {
+			onChangeRef.current(connect(docRef.current, start.nodeId, {
+				nodeId: ref.nodeId,
+				slot: ref.slot
+			}));
+			setWireStart(null);
+		} else onChangeRef.current(disconnect(docRef.current, {
+			nodeId: ref.nodeId,
+			slot: ref.slot
+		}));
+	};
+	const nodeClick = (id) => {
+		setSelected(id);
+		if (docRef.current.inputs.some((i) => i.id === id)) onChangeRef.current(toggleInput(docRef.current, id));
+	};
+	const beginDrag = (id, e, onClick) => {
+		const node = [
+			...docRef.current.inputs,
+			...docRef.current.gates,
+			...docRef.current.outputs
+		].find((n) => n.id === id);
+		const host = hostRef.current;
+		if (!node || !host) return;
+		e.preventDefault();
+		const scale = host.getBoundingClientRect().width / W;
+		const sx = e.clientX, sy = e.clientY, ox = node.x ?? 0, oy = node.y ?? 0;
+		let moved = false;
+		const move = (ev) => {
+			if (!moved && Math.abs(ev.clientX - sx) + Math.abs(ev.clientY - sy) > 4) {
+				moved = true;
+				setSelected(id);
+			}
+			if (moved) onChangeRef.current(moveNode(docRef.current, id, {
+				x: snap(ox + (ev.clientX - sx) / scale),
+				y: snap(oy + (ev.clientY - sy) / scale)
+			}));
+		};
+		const up = () => {
+			window.removeEventListener("pointermove", move);
+			window.removeEventListener("pointerup", up);
+			if (!moved) onClick();
+		};
+		window.addEventListener("pointermove", move);
+		window.addEventListener("pointerup", up);
+	};
+	const onNodePointerDown = (id, e) => beginDrag(id, e, () => nodeClick(id));
+	const onPortPointerDown = (ref, e) => beginDrag(ref.nodeId, e, () => portClick(ref));
+	return /* @__PURE__ */ jsxs("div", {
+		style: full ? {
+			position: "fixed",
+			inset: 0,
+			zIndex: 60,
+			background: "var(--background, #fff)",
+			padding: 18,
+			overflow: "auto",
+			display: "grid",
+			gridTemplateColumns: "188px 1fr 240px",
+			gap: 16,
+			alignItems: "start"
+		} : {
+			display: "grid",
+			gridTemplateColumns: "180px 1fr 224px",
+			gap: 14,
+			alignItems: "start"
+		},
+		children: [
+			/* @__PURE__ */ jsx(Panel, {
+				title: "Add",
+				children: /* @__PURE__ */ jsx("div", {
+					style: {
+						display: "flex",
+						flexDirection: "column",
+						gap: 4
+					},
+					children: palette.map((it) => /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						onPointerDown: () => startPaletteDrag(it.kind),
+						title: `add ${it.label} (or drag onto the canvas)`,
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: 9,
+							width: "100%",
+							textAlign: "left",
+							padding: "6px 9px",
+							fontSize: 13,
+							fontWeight: 600,
+							color: "var(--foreground, #1c1c1c)",
+							background: "transparent",
+							border: "1px solid transparent",
+							borderRadius: "calc(var(--radius, 0.6rem) - 2px)",
+							cursor: "pointer"
+						},
+						onMouseEnter: (e) => {
+							e.currentTarget.style.background = "var(--accent, #f1f1f3)";
+							e.currentTarget.style.borderColor = "var(--border, #e4e4e7)";
+						},
+						onMouseLeave: (e) => {
+							e.currentTarget.style.background = "transparent";
+							e.currentTarget.style.borderColor = "transparent";
+						},
+						children: [
+							/* @__PURE__ */ jsx(PaletteThumb, { glyph: it.glyph }),
+							/* @__PURE__ */ jsx("span", {
+								style: { flex: 1 },
+								children: it.label
+							}),
+							/* @__PURE__ */ jsx("span", {
+								style: {
+									color: "var(--muted-foreground, #999)",
+									fontSize: 15,
+									lineHeight: 1
+								},
+								children: "+"
+							})
+						]
+					}, it.kind))
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					gap: 8
+				},
+				children: [/* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: 10,
+						fontSize: 12,
+						color: "var(--muted-foreground, #777)"
+					},
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							style: { flex: 1 },
+							children: wireStart ? "Now click an input slot to connect (the wire follows your cursor). Press Esc or click empty space to cancel." : "Drag to arrange. Wire: click an output dot ● then an input slot. Click a source to flip it. Click a filled input slot to unwire it."
+						}),
+						wireStart && /* @__PURE__ */ jsx(EBtn, {
+							variant: "ghost",
+							onClick: () => setWireStart(null),
+							children: "cancel wire"
+						}),
+						/* @__PURE__ */ jsx(EBtn, {
+							variant: "ghost",
+							onClick: () => setFull((f) => !f),
+							children: full ? "⤡ exit fullscreen" : "⤢ fullscreen"
+						})
+					]
+				}), /* @__PURE__ */ jsx("div", {
+					ref: hostRef,
+					children: /* @__PURE__ */ jsx(LogicEditScene, {
+						doc,
+						selectedId: selected ?? void 0,
+						wireStart: wireStart ?? void 0,
+						previewCursor: wireStart ? cursor ?? void 0 : void 0,
+						onNodePointerDown,
+						onPortPointerDown,
+						onBackground: () => {
+							setSelected(null);
+							setWireStart(null);
+						},
+						ariaLabel: "logic circuit builder canvas"
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx(Panel, {
+				title: "Inspector",
+				children: !sel ? /* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: 13,
+						color: "var(--muted-foreground, #777)",
+						lineHeight: 1.5
+					},
+					children: "Select a node to edit it, or add one from the palette."
+				}) : /* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						flexDirection: "column",
+						gap: 12
+					},
+					children: [
+						/* @__PURE__ */ jsx(Field, {
+							label: "label",
+							children: /* @__PURE__ */ jsx(TextInput, {
+								value: sel.label ?? "",
+								onChange: (v) => onChange(relabel(doc, sel.id, v)),
+								ariaLabel: "node label"
+							})
+						}),
+						selInput && /* @__PURE__ */ jsx(Field, {
+							label: "value",
+							children: /* @__PURE__ */ jsx(EBtn, {
+								active: !!selInput.value,
+								onClick: () => onChange(toggleInput(doc, sel.id)),
+								children: selInput.value ? "1 (HIGH)" : "0 (LOW)"
+							})
+						}),
+						selOutput && /* @__PURE__ */ jsxs("div", {
+							style: {
+								display: "flex",
+								flexDirection: "column",
+								gap: 8
+							},
+							children: [/* @__PURE__ */ jsx("span", {
+								style: {
+									fontSize: 10.5,
+									fontWeight: 700,
+									letterSpacing: "0.04em",
+									textTransform: "uppercase",
+									color: "var(--muted-foreground, #999)"
+								},
+								children: "Goal (this LED)"
+							}), /* @__PURE__ */ jsxs("div", {
+								style: {
+									display: "flex",
+									gap: 6,
+									flexWrap: "wrap"
+								},
+								children: [
+									/* @__PURE__ */ jsx(EBtn, {
+										active: selOutput.goal === void 0,
+										onClick: () => onChange(setGoal(doc, sel.id, void 0)),
+										children: "none"
+									}),
+									/* @__PURE__ */ jsx(EBtn, {
+										active: selOutput.goal === false,
+										onClick: () => onChange(setGoal(doc, sel.id, false)),
+										children: "want 0"
+									}),
+									/* @__PURE__ */ jsx(EBtn, {
+										active: selOutput.goal === true,
+										onClick: () => onChange(setGoal(doc, sel.id, true)),
+										children: "want 1"
+									})
+								]
+							})]
+						}),
+						/* @__PURE__ */ jsx("div", { style: {
+							height: 1,
+							background: "var(--border, #e4e4e7)"
+						} }),
+						/* @__PURE__ */ jsx(EBtn, {
+							variant: "danger",
+							title: "delete node",
+							onClick: () => {
+								onChange(deleteNode(doc, sel.id));
+								setSelected(null);
+							},
+							children: "🗑 delete"
+						})
+					]
+				})
+			})
+		]
+	});
+}
+
+//#endregion
+export { LogicEditor };