@classytic/labs 0.2.0 → 0.3.0

package/dist/build/CircuitEditor.mjs

@@ -1,12 +1,17 @@
 'use client';
 
+import { Activity } from "../kit/activity.mjs";
 import { getPart, listParts } from "./registry.mjs";
 import { partState, solveCircuit } from "./solve.mjs";
 import { addPart, addWire, deletePart, disconnectWire, movePart, retargetWire, rotatePart, setGround, setWireWaypoints, spliceIntoWire, tapWire, terminalOf, updateProps, wirePolyline } from "./editor-ops.mjs";
 import { CircuitScene } from "./CircuitScene.mjs";
-import { EBtn, Field, NumInput, Panel, TextInput } from "./editor-ui.mjs";
+import { EBtn, Field, NumInput, TextInput, ZoomBar } from "./editor-ui.mjs";
+import { boundsOf, useCanvasViewport } from "./viewport.mjs";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@/components/ui/button";
+import { Plus, Redo2, RotateCw, Trash2, Undo2 } from "lucide-react";
+import { Checkbox } from "@/components/ui/checkbox";
 
 //#region src/build/CircuitEditor.tsx
 /**
@@ -94,7 +99,7 @@ function PartThumb({ kind }) {
 		width: 46,
 		height: 20,
 		"aria-hidden": true,
-		style: { flexShrink: 0 },
+		className: "circuit-editor-part-thumb",
 		children: def.render(inst, {
 			live: false,
 			i: 0,
@@ -112,16 +117,65 @@ function CircuitEditor({ value, onChange }) {
 	const [pending, setPending] = useState(null);
 	const [preview, setPreview] = useState(null);
 	const [endDrag, setEndDrag] = useState(null);
-	const [full, setFull] = useState(false);
-	const hostRef = useRef(null);
+	const vp = useCanvasViewport({ world: {
+		w: W,
+		h: doc.size?.h ?? 300
+	} });
+	const hostRef = vp.hostRef;
 	const docRef = useRef(doc);
 	docRef.current = doc;
-	const onChangeRef = useRef(onChange);
-	onChangeRef.current = onChange;
 	const pendingRef = useRef(pending);
 	pendingRef.current = pending;
 	const previewRef = useRef(preview);
 	previewRef.current = preview;
+	const [past, setPast] = useState([]);
+	const [future, setFuture] = useState([]);
+	const pastRef = useRef(past);
+	pastRef.current = past;
+	const futureRef = useRef(future);
+	futureRef.current = future;
+	const lastEdit = useRef({
+		key: null,
+		t: 0
+	});
+	const commit = (next, key) => {
+		const now = Date.now();
+		if (!(!!key && key === lastEdit.current.key && now - lastEdit.current.t < 600)) setPast((p) => [...p, docRef.current].slice(-80));
+		lastEdit.current = {
+			key: key ?? null,
+			t: now
+		};
+		setFuture([]);
+		onChange(next);
+	};
+	const commitRef = useRef(commit);
+	commitRef.current = commit;
+	const undo = () => {
+		const p = pastRef.current;
+		if (!p.length) return;
+		lastEdit.current = {
+			key: null,
+			t: 0
+		};
+		setFuture((f) => [docRef.current, ...f].slice(0, 80));
+		setPast((pp) => pp.slice(0, -1));
+		onChange(p[p.length - 1]);
+	};
+	const redo = () => {
+		const f = futureRef.current;
+		if (!f.length) return;
+		lastEdit.current = {
+			key: null,
+			t: 0
+		};
+		setPast((pp) => [...pp, docRef.current].slice(-80));
+		setFuture((ff) => ff.slice(1));
+		onChange(f[0]);
+	};
+	const undoRef = useRef(undo);
+	undoRef.current = undo;
+	const redoRef = useRef(redo);
+	redoRef.current = redo;
 	const sel = doc.parts.find((p) => p.id === selected) ?? null;
 	const selDef = sel ? getPart(sel.kind) : null;
 	const sol = solveCircuit(doc);
@@ -137,7 +191,7 @@ function CircuitEditor({ value, onChange }) {
 			x: snap(120 + n % 3 * 150),
 			y: snap(80 + Math.floor(n / 3) * 90)
 		});
-		onChangeRef.current(next);
+		commitRef.current(next);
 		setSelected(next.parts[next.parts.length - 1]?.id ?? null);
 	};
 	const dropAt = (kind, clientX, clientY) => {
@@ -151,21 +205,21 @@ function CircuitEditor({ value, onChange }) {
 			place(kind);
 			return;
 		}
-		const sc = r.width / W;
+		const p = vp.toScene(clientX, clientY);
 		const at = {
-			x: snap((clientX - r.left) / sc),
-			y: snap((clientY - r.top) / sc)
+			x: snap(p.x),
+			y: snap(p.y)
 		};
 		const d = docRef.current;
 		const wid = wireAt(d, at);
 		if (wid && kind === "node") {
 			const { doc: next, pin } = tapWire(d, wid, at);
-			onChangeRef.current(next);
+			commitRef.current(next);
 			setSelected(pin.partId);
 			return;
 		}
 		const next = wid ? spliceIntoWire(d, wid, kind, at) : addPart(d, kind, at);
-		onChangeRef.current(next);
+		commitRef.current(next);
 		setSelected(next.parts[next.parts.length - 1]?.id ?? null);
 	};
 	const startPaletteDrag = (kind) => {
@@ -175,19 +229,46 @@ function CircuitEditor({ value, onChange }) {
 		};
 		window.addEventListener("pointerup", up);
 	};
-	const toCanvas = (cx, cy) => {
-		const host = hostRef.current;
-		if (!host) return {
-			x: 0,
-			y: 0
+	const toCanvas = (cx, cy) => vp.toScene(cx, cy);
+	useEffect(() => {
+		const onKey = (e) => {
+			if (e.key !== "Delete" && e.key !== "Backspace") return;
+			const el = e.target;
+			if (el && (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.isContentEditable)) return;
+			if (selectedWire) {
+				e.preventDefault();
+				commitRef.current(disconnectWire(docRef.current, selectedWire));
+				setSelectedWire(null);
+			} else if (selected) {
+				e.preventDefault();
+				commitRef.current(deletePart(docRef.current, selected));
+				setSelected(null);
+			}
 		};
-		const r = host.getBoundingClientRect();
-		const scale = r.width / W;
-		return {
-			x: (cx - r.left) / scale,
-			y: (cy - r.top) / scale
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, [
+		selected,
+		selectedWire,
+		onChange
+	]);
+	useEffect(() => {
+		const onKey = (e) => {
+			if (!(e.metaKey || e.ctrlKey)) return;
+			const el = e.target;
+			if (el && (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.isContentEditable)) return;
+			const k = e.key.toLowerCase();
+			if (k === "z" && !e.shiftKey) {
+				e.preventDefault();
+				undoRef.current();
+			} else if (k === "z" && e.shiftKey || k === "y") {
+				e.preventDefault();
+				redoRef.current();
+			}
 		};
-	};
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, []);
 	useEffect(() => {
 		if (!pending) {
 			setPreview(null);
@@ -229,7 +310,7 @@ function CircuitEditor({ value, onChange }) {
 			setPending(null);
 			return;
 		}
-		onChangeRef.current(connectWithMids(docRef.current, p.from, from, p.mids));
+		commitRef.current(connectWithMids(docRef.current, p.from, from, p.mids));
 		setPending(null);
 		setSelected(from.partId);
 	};
@@ -238,15 +319,15 @@ function CircuitEditor({ value, onChange }) {
 		const host = hostRef.current;
 		if (!part || !host) return;
 		e.preventDefault();
-		const scale = host.getBoundingClientRect().width / W;
+		const scale = vp.scale();
 		const sx = e.clientX, sy = e.clientY, ox = part.at.x, oy = part.at.y;
 		let moved = false;
 		const move = (ev) => {
 			if (!moved && Math.abs(ev.clientX - sx) + Math.abs(ev.clientY - sy) > 4) moved = true;
-			if (moved) onChangeRef.current(movePart(docRef.current, partId, {
+			if (moved) commitRef.current(movePart(docRef.current, partId, {
 				x: snap(ox + (ev.clientX - sx) / scale),
 				y: snap(oy + (ev.clientY - sy) / scale)
-			}));
+			}), `move:${partId}`);
 		};
 		const up = () => {
 			window.removeEventListener("pointermove", move);
@@ -294,7 +375,7 @@ function CircuitEditor({ value, onChange }) {
 				y: 0
 			};
 			const { doc: d2, pin: jp } = tapWire(docRef.current, wireId, at);
-			onChangeRef.current(connectWithMids(d2, p.from, jp, p.mids));
+			commitRef.current(connectWithMids(d2, p.from, jp, p.mids));
 			setPending(null);
 			setSelected(jp.partId);
 		} else {
@@ -342,12 +423,12 @@ function CircuitEditor({ value, onChange }) {
 			moved = true;
 			const at = snapPt(toCanvas(ev.clientX, ev.clientY));
 			mids = mids.map((m, i) => i === index ? at : m);
-			onChangeRef.current(setWireWaypoints(docRef.current, wireId, mids));
+			commitRef.current(setWireWaypoints(docRef.current, wireId, mids), `wp:${wireId}`);
 		};
 		const up = () => {
 			window.removeEventListener("pointermove", move);
 			window.removeEventListener("pointerup", up);
-			if (moved) onChangeRef.current(setWireWaypoints(docRef.current, wireId, pruneCollinear(ta, mids, tb)));
+			if (moved) commitRef.current(setWireWaypoints(docRef.current, wireId, pruneCollinear(ta, mids, tb)), `wp:${wireId}`);
 		};
 		window.addEventListener("pointermove", move);
 		window.addEventListener("pointerup", up);
@@ -415,13 +496,13 @@ function CircuitEditor({ value, onChange }) {
 			if (!moved) return;
 			const pin = pinAt(docRef.current, last);
 			if (pin) {
-				onChangeRef.current(retargetWire(docRef.current, wireId, end, pin));
+				commitRef.current(retargetWire(docRef.current, wireId, end, pin));
 				return;
 			}
 			const wid = wireAt(docRef.current, last);
 			if (wid && wid !== wireId) {
 				const { doc: d2, pin: jp } = tapWire(docRef.current, wid, last);
-				onChangeRef.current(retargetWire(d2, wireId, end, jp));
+				commitRef.current(retargetWire(d2, wireId, end, jp));
 				return;
 			}
 		};
@@ -429,356 +510,286 @@ function CircuitEditor({ value, onChange }) {
 		window.addEventListener("pointerup", up);
 	};
 	const set = (patch) => {
-		if (sel) onChange(updateProps(doc, sel.id, patch));
+		if (sel) commit(updateProps(doc, sel.id, patch), `prop:${sel.id}`);
 	};
-	return /* @__PURE__ */ jsxs("div", {
-		style: full ? {
-			position: "fixed",
-			inset: 0,
-			zIndex: 60,
-			background: "var(--background, #fff)",
-			padding: 18,
-			overflow: "auto",
-			display: "grid",
-			gridTemplateColumns: "180px 1fr 264px",
-			gap: 16,
-			alignItems: "start"
-		} : {
-			display: "grid",
-			gridTemplateColumns: "172px 1fr 244px",
-			gap: 14,
-			alignItems: "start"
-		},
+	return /* @__PURE__ */ jsxs(Activity.Root, {
+		className: "circuit-editor-activity",
+		focusLayout: "immersive",
 		children: [
-			/* @__PURE__ */ jsx(Panel, {
-				title: "Parts",
-				children: /* @__PURE__ */ jsx("div", {
-					style: {
-						display: "flex",
-						flexDirection: "column",
-						gap: 4
-					},
-					children: listParts().map((d) => /* @__PURE__ */ jsxs("button", {
-						type: "button",
-						onPointerDown: () => startPaletteDrag(d.kind),
-						title: `add ${d.label} — or drag onto a wire to splice it in`,
-						style: {
-							display: "flex",
-							alignItems: "center",
-							gap: 10,
-							width: "100%",
-							textAlign: "left",
-							padding: "7px 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(PartThumb, { kind: d.kind }),
-							/* @__PURE__ */ jsx("span", {
-								style: { flex: 1 },
-								children: d.label
-							}),
-							/* @__PURE__ */ jsx("span", {
-								style: {
-									color: "var(--muted-foreground, #999)",
-									fontSize: 15,
-									lineHeight: 1
-								},
-								children: "+"
-							})
-						]
-					}, d.kind))
+			/* @__PURE__ */ jsxs(Activity.Header, { children: [/* @__PURE__ */ jsx(Activity.Heading, {
+				eyebrow: "Circuit studio",
+				title: "Build and test a circuit",
+				description: "Place components, connect their pins, and inspect the live electrical behavior."
+			}), /* @__PURE__ */ jsx(Activity.FocusButton, {})] }),
+			/* @__PURE__ */ jsxs(Activity.Status, { children: [
+				/* @__PURE__ */ jsxs("strong", { children: [doc.parts.length, " parts"] }),
+				/* @__PURE__ */ jsxs("span", { children: [(doc.wires ?? []).length, " wires"] }),
+				/* @__PURE__ */ jsx("span", {
+					className: "circuit-editor-status-hint",
+					children: pending ? "Wiring: choose another pin, wire, or bend point" : selectedWire ? "Wire selected" : selDef ? `${selDef.label} selected` : "Select a part or add one"
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "circuit-editor-history",
+					children: [/* @__PURE__ */ jsxs(EBtn, {
+						variant: "ghost",
+						title: "undo (⌘/Ctrl-Z)",
+						disabled: past.length === 0,
+						onClick: undo,
+						children: [/* @__PURE__ */ jsx(Undo2, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", { children: "Undo" })]
+					}), /* @__PURE__ */ jsxs(EBtn, {
+						variant: "ghost",
+						title: "redo (⌘/Ctrl-Shift-Z)",
+						disabled: future.length === 0,
+						onClick: redo,
+						children: [/* @__PURE__ */ jsx(Redo2, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", { children: "Redo" })]
+					})]
 				})
-			}),
-			/* @__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: pending ? "Click another pin to finish the wire (or a wire to branch off it). Click empty space to drop a bend and keep routing. Press Esc to cancel." : "Click a pin dot to start a wire, then click another pin to finish (no need to hold). Drag a part or junction to move it. Click a wire to select it (delete it in the inspector)."
-						}), /* @__PURE__ */ jsx(EBtn, {
+			] }),
+			/* @__PURE__ */ jsxs(Activity.Workspace, { children: [
+				/* @__PURE__ */ jsxs(Activity.Inspector, {
+					label: "Add components",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "circuit-editor-panel-head",
+						children: "Components"
+					}), /* @__PURE__ */ jsx("div", {
+						className: "circuit-editor-palette",
+						children: listParts().map((d) => /* @__PURE__ */ jsxs(Button, {
+							type: "button",
+							onPointerDown: () => startPaletteDrag(d.kind),
+							title: `add ${d.label}, or drag onto a wire to splice it in`,
 							variant: "ghost",
-							onClick: () => setFull((f) => !f),
-							children: full ? "⤡ exit fullscreen" : "⤢ fullscreen"
-						})]
-					}),
-					shorted.length > 0 && /* @__PURE__ */ jsxs("div", {
-						role: "alert",
-						style: {
-							fontSize: 12.5,
-							lineHeight: 1.4,
-							padding: "8px 11px",
-							borderRadius: "var(--radius, 8px)",
-							color: "var(--destructive-foreground, #fff)",
-							background: "var(--destructive, oklch(0.58 0.22 27))"
-						},
-						children: [
-							"⚠ Short circuit: ",
-							shorted.map((p) => getPart(p.kind)?.label ?? p.kind).join(", "),
-							" ",
-							shorted.length > 1 ? "have" : "has",
-							" both terminals on the same net. To clear it: select the part and un-ground a terminal (the ⏚ grounded button), or click the shorting wire to delete it. A source needs a component (bulb, resistor) in the loop between + and −."
-						]
-					}),
-					damaged.length > 0 && /* @__PURE__ */ jsxs("div", {
-						role: "alert",
-						style: {
-							fontSize: 12.5,
-							lineHeight: 1.4,
-							padding: "8px 11px",
-							borderRadius: "var(--radius, 8px)",
-							color: "var(--destructive-foreground, #fff)",
-							background: "var(--destructive, oklch(0.58 0.22 27))"
-						},
-						children: [
-							"🔥 Overload: ",
-							damaged.map((d) => `${getPart(d.p.kind)?.label ?? d.p.kind} (${d.st.damage === "overvoltage" ? `${Math.abs(d.st.v).toFixed(1)} V across` : `${d.st.power.toFixed(2)} W`})`).join(", "),
-							" ",
-							damaged.length > 1 ? "exceed their ratings" : "exceeds its rating",
-							" and would burn out. Lower the supply voltage, raise the resistance, or increase the part's rating in the inspector."
-						]
-					}),
-					/* @__PURE__ */ jsx("div", {
-						ref: hostRef,
-						style: { touchAction: "none" },
-						children: /* @__PURE__ */ jsx(CircuitScene, {
-							doc,
-							ariaLabel: "circuit editor canvas",
-							selectedId: selected ?? void 0,
-							editor: {
-								showPins: true,
-								onPinPointerDown,
-								onSelect: (id) => {
-									setSelected(id);
-									setSelectedWire(null);
-								},
-								onPartPointerDown,
-								onBackground,
-								onWireClick,
-								selectedWireId: selectedWire ?? void 0,
-								onWireBodyDown,
-								onWireWaypointDown,
-								onWireEndDown,
-								wirePreview: endDrag ? {
-									from: endDrag.fixedPos,
-									to: endDrag.to,
-									valid: endDrag.valid
-								} : pending && preview ? {
-									from: terminalOf(doc, pending.from) ?? preview.to,
-									mids: pending.mids,
-									to: preview.to,
-									valid: preview.valid
-								} : void 0
-							}
-						})
-					})
-				]
-			}),
-			/* @__PURE__ */ jsx(Panel, {
-				title: "Inspector",
-				children: selectedWire ? /* @__PURE__ */ jsxs("div", {
-					style: {
-						display: "flex",
-						flexDirection: "column",
-						gap: 12
-					},
+							className: "circuit-editor-palette-item",
+							children: [
+								/* @__PURE__ */ jsx(PartThumb, { kind: d.kind }),
+								/* @__PURE__ */ jsx("span", {
+									className: "circuit-editor-palette-label",
+									children: d.label
+								}),
+								/* @__PURE__ */ jsx(Plus, { "aria-hidden": "true" })
+							]
+						}, d.kind))
+					})]
+				}),
+				/* @__PURE__ */ jsxs(Activity.Canvas, {
+					label: "Circuit editor canvas",
 					children: [
-						/* @__PURE__ */ jsx("span", {
-							style: {
-								fontSize: 14,
-								fontWeight: 700,
-								color: "var(--foreground, #1c1c1c)"
-							},
-							children: "Wire"
-						}),
 						/* @__PURE__ */ jsx("div", {
-							style: {
-								fontSize: 13,
-								color: "var(--muted-foreground, #777)",
-								lineHeight: 1.5
-							},
-							children: "Drag the wire (or a square bend handle) to position its path. Drag an end ring off its pin to detach / re-attach it. Drag a bend onto the straight line to remove it."
-						}),
-						/* @__PURE__ */ jsx(EBtn, {
-							variant: "danger",
-							title: "delete wire",
-							onClick: () => {
-								onChange(disconnectWire(doc, selectedWire));
-								setSelectedWire(null);
-							},
-							children: "🗑 delete wire"
-						})
-					]
-				}) : !sel || !selDef ? /* @__PURE__ */ jsx("div", {
-					style: {
-						fontSize: 13,
-						color: "var(--muted-foreground, #777)",
-						lineHeight: 1.5
-					},
-					children: "Select a part or wire on the canvas to edit it, or add a part from the palette."
-				}) : /* @__PURE__ */ jsxs("div", {
-					style: {
-						display: "flex",
-						flexDirection: "column",
-						gap: 14
-					},
-					children: [
-						/* @__PURE__ */ jsxs("div", {
-							style: {
-								display: "flex",
-								alignItems: "center",
-								gap: 10
-							},
-							children: [/* @__PURE__ */ jsx(PartThumb, { kind: sel.kind }), /* @__PURE__ */ jsx("span", {
-								style: {
-									fontSize: 14,
-									fontWeight: 700,
-									color: "var(--foreground, #1c1c1c)"
-								},
-								children: selDef.label
-							})]
+							className: "circuit-editor-guidance",
+							children: /* @__PURE__ */ jsx("span", { children: pending ? "Click another pin to finish the wire (or a wire to branch off it). Click empty space to drop a bend and keep routing. Press Esc to cancel." : "Click a pin dot to start a wire, then click another pin to finish. Drag a part to move it. Scroll to pan, ⌘/Ctrl-scroll or Space-drag to zoom/pan." })
 						}),
-						(selDef.controls?.length || Object.keys(selDef.defaultProps ?? {}).length > 0) && /* @__PURE__ */ jsxs("div", {
-							style: {
-								display: "flex",
-								flexDirection: "column",
-								gap: 9
-							},
-							children: [selDef.controls?.map((c) => {
-								const cur = Number(sel.props?.[c.key] ?? selDef.defaultProps?.[c.key] ?? 0);
-								const clamp = (v) => Math.min(c.max ?? Infinity, Math.max(c.min ?? -Infinity, v));
-								return /* @__PURE__ */ jsx(Field, {
-									label: c.unit ? `${c.label} (${c.unit})` : c.label,
-									children: /* @__PURE__ */ jsx(NumInput, {
-										value: cur,
-										onChange: (v) => set({ [c.key]: clamp(v) }),
-										step: c.step ?? 1,
-										min: c.min,
-										ariaLabel: c.label
-									})
-								}, c.key);
-							}), Object.entries(selDef.defaultProps ?? {}).filter(([key]) => !selDef.controls?.some((c) => c.key === key)).map(([key, dflt]) => {
-								const cur = sel.props?.[key] ?? dflt;
-								if (typeof dflt === "boolean") return /* @__PURE__ */ jsx(Field, {
-									label: key,
-									children: /* @__PURE__ */ jsx("input", {
-										type: "checkbox",
-										checked: !!cur,
-										onChange: (e) => set({ [key]: e.target.checked }),
-										"aria-label": key
-									})
-								}, key);
-								if (typeof dflt === "string") return /* @__PURE__ */ jsx(Field, {
-									label: key,
-									children: /* @__PURE__ */ jsx(TextInput, {
-										value: String(cur),
-										onChange: (v) => set({ [key]: v }),
-										ariaLabel: key
-									})
-								}, key);
-								return /* @__PURE__ */ jsx(Field, {
-									label: key,
-									children: /* @__PURE__ */ jsx(NumInput, {
-										value: Number(cur),
-										onChange: (v) => set({ [key]: v }),
-										step: key === "k" || key === "farads" ? .1 : 1,
-										ariaLabel: key
-									})
-								}, key);
-							})]
+						shorted.length > 0 && /* @__PURE__ */ jsxs("div", {
+							role: "alert",
+							className: "circuit-editor-alert",
+							children: [
+								"⚠ Short circuit: ",
+								shorted.map((p) => getPart(p.kind)?.label ?? p.kind).join(", "),
+								" ",
+								shorted.length > 1 ? "have" : "has",
+								" both terminals on the same net. To clear it: select the part and un-ground a terminal (the ⏚ grounded button), or click the shorting wire to delete it. A source needs a component (bulb, resistor) in the loop between + and −."
+							]
 						}),
-						/* @__PURE__ */ jsx("div", { style: {
-							height: 1,
-							background: "var(--border, #e4e4e7)"
-						} }),
-						/* @__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: "Ground"
-							}), /* @__PURE__ */ jsx("div", {
-								style: {
-									display: "flex",
-									gap: 6,
-									flexWrap: "wrap"
-								},
-								children: selDef.pins.map((pin) => {
-									const grounded = sel.props && sel.pins[pin] === "gnd";
-									return /* @__PURE__ */ jsxs(EBtn, {
-										active: !!grounded,
-										title: grounded ? `disconnect ${pin} from ground` : `tie ${pin} to ground`,
-										onClick: () => onChange(setGround(doc, {
-											partId: sel.id,
-											pin
-										})),
-										children: [
-											pin,
-											" ",
-											grounded ? "⏚" : "→ gnd"
-										]
-									}, pin);
-								})
-							})]
+						damaged.length > 0 && /* @__PURE__ */ jsxs("div", {
+							role: "alert",
+							className: "circuit-editor-alert",
+							children: [
+								"🔥 Overload:",
+								" ",
+								damaged.map((d) => `${getPart(d.p.kind)?.label ?? d.p.kind} (${d.st.damage === "overvoltage" ? `${Math.abs(d.st.v).toFixed(1)} V across` : `${d.st.power.toFixed(2)} W`})`).join(", "),
+								" ",
+								damaged.length > 1 ? "exceed their ratings" : "exceeds its rating",
+								" and would burn out. Lower the supply voltage, raise the resistance, or increase the part's rating in the inspector."
+							]
 						}),
 						/* @__PURE__ */ jsxs("div", {
+							ref: hostRef,
+							onPointerDown: vp.onHostPointerDown,
+							className: "circuit-editor-viewport",
 							style: {
-								display: "flex",
-								gap: 6,
-								flexWrap: "wrap"
+								...vp.gridStyle,
+								...vp.hostStyle
 							},
-							children: [/* @__PURE__ */ jsx(EBtn, {
-								variant: "ghost",
-								title: "rotate 90°",
-								onClick: () => onChange(rotatePart(doc, sel.id)),
-								children: "⟳ rotate"
-							}), /* @__PURE__ */ jsx(EBtn, {
-								variant: "danger",
-								title: "delete part",
-								onClick: () => {
-									onChange(deletePart(doc, sel.id));
-									setSelected(null);
-								},
-								children: "🗑 delete"
+							children: [/* @__PURE__ */ jsx(CircuitScene, {
+								doc,
+								ariaLabel: "circuit editor canvas",
+								selectedId: selected ?? void 0,
+								viewBox: vp.viewBox,
+								bare: true,
+								editor: {
+									showPins: true,
+									wireStart: pending?.from,
+									onPinPointerDown,
+									onPinActivate: (partId, pin) => handlePinClick({
+										partId,
+										pin
+									}),
+									onSelect: (id) => {
+										setSelected(id);
+										setSelectedWire(null);
+									},
+									onPartPointerDown,
+									onBackground,
+									onWireClick,
+									selectedWireId: selectedWire ?? void 0,
+									onWireBodyDown,
+									onWireWaypointDown,
+									onWireEndDown,
+									wirePreview: endDrag ? {
+										from: endDrag.fixedPos,
+										to: endDrag.to,
+										valid: endDrag.valid
+									} : pending && preview ? {
+										from: terminalOf(doc, pending.from) ?? preview.to,
+										mids: pending.mids,
+										to: preview.to,
+										valid: preview.valid
+									} : void 0
+								}
+							}), /* @__PURE__ */ jsx(ZoomBar, {
+								zoom: vp.zoom,
+								onZoomIn: vp.zoomIn,
+								onZoomOut: vp.zoomOut,
+								onFit: () => vp.fit(boundsOf(doc.parts.map((p) => ({
+									x: p.at.x - 30,
+									y: p.at.y - 24
+								}))) ?? void 0)
 							})]
 						})
 					]
+				}),
+				/* @__PURE__ */ jsxs(Activity.Inspector, {
+					label: "Properties",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "circuit-editor-panel-head",
+						children: "Properties"
+					}), /* @__PURE__ */ jsx("div", {
+						className: "circuit-editor-properties",
+						children: selectedWire ? /* @__PURE__ */ jsxs("div", {
+							className: "circuit-editor-property-stack",
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "circuit-editor-property-title",
+									children: "Wire"
+								}),
+								/* @__PURE__ */ jsx("div", {
+									className: "circuit-editor-property-copy",
+									children: "Drag the wire or a square bend handle to position its path. Drag an end ring off its pin to reconnect it. Drag a bend onto the straight line to remove it."
+								}),
+								/* @__PURE__ */ jsxs(EBtn, {
+									variant: "danger",
+									title: "delete wire",
+									onClick: () => {
+										commit(disconnectWire(doc, selectedWire));
+										setSelectedWire(null);
+									},
+									children: [/* @__PURE__ */ jsx(Trash2, { "aria-hidden": "true" }), "Delete wire"]
+								})
+							]
+						}) : !sel || !selDef ? /* @__PURE__ */ jsx("div", {
+							className: "circuit-editor-property-copy",
+							children: "Select a part or wire on the canvas to edit it, or add a part from the palette."
+						}) : /* @__PURE__ */ jsxs("div", {
+							className: "circuit-editor-property-stack",
+							"data-spacious": "true",
+							children: [
+								/* @__PURE__ */ jsxs("div", {
+									className: "circuit-editor-property-heading",
+									children: [/* @__PURE__ */ jsx(PartThumb, { kind: sel.kind }), /* @__PURE__ */ jsx("span", {
+										className: "circuit-editor-property-title",
+										children: selDef.label
+									})]
+								}),
+								(selDef.controls?.length || Object.keys(selDef.defaultProps ?? {}).length > 0) && /* @__PURE__ */ jsxs("div", {
+									className: "circuit-editor-field-list",
+									children: [selDef.controls?.map((c) => {
+										const cur = Number(sel.props?.[c.key] ?? selDef.defaultProps?.[c.key] ?? 0);
+										const clamp = (v) => Math.min(c.max ?? Infinity, Math.max(c.min ?? -Infinity, v));
+										return /* @__PURE__ */ jsx(Field, {
+											label: c.unit ? `${c.label} (${c.unit})` : c.label,
+											children: /* @__PURE__ */ jsx(NumInput, {
+												value: cur,
+												onChange: (v) => set({ [c.key]: clamp(v) }),
+												step: c.step ?? 1,
+												min: c.min,
+												ariaLabel: c.label
+											})
+										}, c.key);
+									}), Object.entries(selDef.defaultProps ?? {}).filter(([key]) => !selDef.controls?.some((c) => c.key === key)).map(([key, dflt]) => {
+										const cur = sel.props?.[key] ?? dflt;
+										if (typeof dflt === "boolean") return /* @__PURE__ */ jsx(Field, {
+											label: key,
+											children: /* @__PURE__ */ jsx(Checkbox, {
+												checked: !!cur,
+												onCheckedChange: (value) => set({ [key]: value === true }),
+												"aria-label": key
+											})
+										}, key);
+										if (typeof dflt === "string") return /* @__PURE__ */ jsx(Field, {
+											label: key,
+											children: /* @__PURE__ */ jsx(TextInput, {
+												value: String(cur),
+												onChange: (v) => set({ [key]: v }),
+												ariaLabel: key
+											})
+										}, key);
+										return /* @__PURE__ */ jsx(Field, {
+											label: key,
+											children: /* @__PURE__ */ jsx(NumInput, {
+												value: Number(cur),
+												onChange: (v) => set({ [key]: v }),
+												step: key === "k" || key === "farads" ? .1 : 1,
+												ariaLabel: key
+											})
+										}, key);
+									})]
+								}),
+								/* @__PURE__ */ jsx("div", { className: "circuit-editor-separator" }),
+								/* @__PURE__ */ jsxs("div", {
+									className: "circuit-editor-property-section",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "circuit-editor-section-label",
+										children: "Ground"
+									}), /* @__PURE__ */ jsx("div", {
+										className: "circuit-editor-action-row",
+										children: selDef.pins.map((pin) => {
+											const grounded = sel.props && sel.pins[pin] === "gnd";
+											return /* @__PURE__ */ jsxs(EBtn, {
+												active: !!grounded,
+												title: grounded ? `disconnect ${pin} from ground` : `tie ${pin} to ground`,
+												onClick: () => commit(setGround(doc, {
+													partId: sel.id,
+													pin
+												})),
+												children: [
+													pin,
+													" ",
+													grounded ? "⏚" : "→ gnd"
+												]
+											}, pin);
+										})
+									})]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "circuit-editor-action-row",
+									children: [/* @__PURE__ */ jsxs(EBtn, {
+										variant: "ghost",
+										title: "rotate 90°",
+										onClick: () => commit(rotatePart(doc, sel.id)),
+										children: [/* @__PURE__ */ jsx(RotateCw, { "aria-hidden": "true" }), "Rotate"]
+									}), /* @__PURE__ */ jsxs(EBtn, {
+										variant: "danger",
+										title: "delete part",
+										onClick: () => {
+											commit(deletePart(doc, sel.id));
+											setSelected(null);
+										},
+										children: [/* @__PURE__ */ jsx(Trash2, { "aria-hidden": "true" }), "Delete"]
+									})]
+								})
+							]
+						})
+					})]
 				})
-			})
+			] })
 		]
 	});
 }