@classytic/labs 0.2.0 → 0.3.0

package/dist/build/CircuitScene.d.mts

@@ -17,7 +17,9 @@ interface CircuitEditorBag {
   onPartPointerDown?: (partId: string, e: PointerEvent) => void;
   /** pointer went down on a pin: a click wires it, a drag moves the part (click-vs-drag). */
   onPinPointerDown?: (partId: string, pin: string, e: PointerEvent) => void;
-  /** a wire edge was clicked (select / branch / delete — the editor decides). */
+  /** keyboard-activate a pin (Enter/Space): start a wire, or finish one to this pin. */
+  onPinActivate?: (partId: string, pin: string) => void;
+  /** a wire edge was clicked (select / branch / delete, the editor decides). */
   onWireClick?: (wireId: string) => void;
   /** highlight one wire as selected. */
   selectedWireId?: string;
@@ -48,6 +50,10 @@ interface CircuitSceneProps {
   selectedId?: string;
   /** authoring affordances; omit for the read-only / learner view. */
   editor?: CircuitEditorBag;
+  /** pan/zoom viewBox override (from useCanvasViewport). Omit for the fixed default view. */
+  viewBox?: string;
+  /** render just the bare <svg> (the editor supplies its own framed, dot-gridded host). */
+  bare?: boolean;
 }
 declare function CircuitScene({
   doc,
@@ -55,7 +61,9 @@ declare function CircuitScene({
   ariaLabel,
   onPartTap,
   selectedId,
-  editor
+  editor,
+  viewBox,
+  bare
 }: CircuitSceneProps): ReactNode;
 //#endregion
 export { CircuitEditorBag, CircuitScene, CircuitSceneProps };

package/dist/build/CircuitScene.mjs

@@ -1,7 +1,7 @@
 'use client';
 
-import { FlowDots, JunctionDot, Wire } from "../kit/electronics.mjs";
 import { useReducedMotion } from "../kit/anim.mjs";
+import { FlowDots, JunctionDot, Wire } from "../kit/electronics/wire.mjs";
 import { getPart } from "./registry.mjs";
 import { registerBuiltinParts } from "./parts/index.mjs";
 import { partState, solveCircuit } from "./solve.mjs";
@@ -33,15 +33,41 @@ function orthRoute(a, b) {
 		[b.x, b.y]
 	];
 }
-function CircuitScene({ doc, flow = true, ariaLabel = "circuit diagram", onPartTap, selectedId, editor }) {
+function CircuitScene({ doc, flow = true, ariaLabel = "circuit diagram", onPartTap, selectedId, editor, viewBox, bare }) {
 	const [phase, setPhase] = useState(0);
 	const reduce = useReducedMotion();
 	const W = doc.size?.w ?? 520;
 	const H = doc.size?.h ?? 220;
+	const [vbx, vby, vbw, vbh] = viewBox ? viewBox.split(" ").map(Number) : [
+		0,
+		0,
+		W,
+		H
+	];
 	const sol = solveCircuit(doc);
 	const states = new Map(doc.parts.map((p) => [p.id, partState(p, sol)]));
 	const anyLive = [...states.values()].some((s) => s.live);
 	const wf = wireCurrents(doc, sol);
+	const selNets = /* @__PURE__ */ new Set();
+	const selPart = selectedId ? doc.parts.find((x) => x.id === selectedId) : void 0;
+	if (selPart) {
+		const d = getPart(selPart.kind);
+		if (d) for (const pin of d.pins) selNets.add(sol.net(selPart.id, pin));
+	}
+	if (editor?.selectedWireId) {
+		const w = (doc.wires ?? []).find((x) => x.id === editor.selectedWireId);
+		if (w) selNets.add(sol.net(w.a.partId, w.a.pin));
+	}
+	const onNet = (partId, pin) => selNets.size > 0 && selNets.has(sol.net(partId, pin));
+	const hilite = (pts, key) => /* @__PURE__ */ jsx("polyline", {
+		points: pts.map((q) => `${q[0]},${q[1]}`).join(" "),
+		fill: "none",
+		stroke: "var(--stage-accent)",
+		strokeWidth: 7,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		opacity: .2
+	}, key);
 	const termOf = (partId, pin) => {
 		const p = doc.parts.find((x) => x.id === partId);
 		const def = p && getPart(p.kind);
@@ -89,6 +115,7 @@ function CircuitScene({ doc, flow = true, ariaLabel = "circuit diagram", onPartT
 			const seg = orthRoute(def.terminalAt(p, pin), nodePos(nid));
 			const I = wf.current(pinKey(p.id, pin), nodeKey(nid));
 			const isLive = Math.abs(I) > FLOW_EPS;
+			if (onNet(p.id, pin)) wires.push(hilite(seg, `hl-stub-${p.id}-${pin}`));
 			wires.push(/* @__PURE__ */ jsx(Wire, {
 				points: seg,
 				live: isLive
@@ -106,12 +133,13 @@ function CircuitScene({ doc, flow = true, ariaLabel = "circuit diagram", onPartT
 		const I = wf.current(pinKey(w.a.partId, w.a.pin), pinKey(w.b.partId, w.b.pin));
 		const isLive = Math.abs(I) > FLOW_EPS;
 		wires.push(/* @__PURE__ */ jsxs("g", {
-			style: { cursor: editor?.onWireClick ? "pointer" : "default" },
+			className: editor?.onWireClick ? "circuit-scene-wire-target" : void 0,
 			onClick: editor?.onWireClick ? (e) => {
 				e.stopPropagation();
 				editor.onWireClick(w.id);
 			} : void 0,
 			children: [
+				!isSel && (onNet(w.a.partId, w.a.pin) || onNet(w.b.partId, w.b.pin)) && hilite(seg, `hl-w-${w.id}`),
 				isSel && /* @__PURE__ */ jsx("polyline", {
 					points: ptStr,
 					fill: "none",
@@ -132,10 +160,9 @@ function CircuitScene({ doc, flow = true, ariaLabel = "circuit diagram", onPartT
 					strokeWidth: isSel ? 20 : 14,
 					strokeLinecap: "round",
 					strokeLinejoin: "round",
-					style: {
-						cursor: isSel ? "move" : "pointer",
-						pointerEvents: "stroke"
-					},
+					className: "circuit-scene-wire-hit",
+					"data-selected": isSel || void 0,
+					pointerEvents: "stroke",
 					onPointerDown: isSel && editor.onWireBodyDown ? (e) => {
 						e.stopPropagation();
 						editor.onWireBodyDown(w.id, e);
@@ -150,7 +177,7 @@ function CircuitScene({ doc, flow = true, ariaLabel = "circuit diagram", onPartT
 					fill: "var(--stage-bg)",
 					stroke: "var(--stage-accent)",
 					strokeWidth: 2,
-					style: { cursor: "move" },
+					className: "circuit-scene-move-handle",
 					onPointerDown: editor.onWireWaypointDown ? (e) => {
 						e.stopPropagation();
 						editor.onWireWaypointDown(w.id, i, e);
@@ -162,220 +189,282 @@ function CircuitScene({ doc, flow = true, ariaLabel = "circuit diagram", onPartT
 		bump(`${w.a.partId} ${w.a.pin}`);
 		bump(`${w.b.partId} ${w.b.pin}`);
 	}
-	if (editor?.showPins) for (const p of doc.parts) {
-		const def = getPart(p.kind);
-		if (!def) continue;
-		for (const pin of def.pins) {
-			const t = def.terminalAt(p, pin);
-			const armed = editor.wireStart?.partId === p.id && editor.wireStart?.pin === pin;
-			pinHandles.push(/* @__PURE__ */ jsx("circle", {
-				cx: t.x,
-				cy: t.y,
-				r: armed ? 7 : 5.5,
-				fill: armed ? "var(--stage-accent)" : "var(--stage-bg)",
-				stroke: "var(--stage-accent)",
-				strokeWidth: 2,
-				style: { cursor: "crosshair" },
-				role: "button",
-				"aria-label": `${pin} of ${def.label}`,
-				onPointerDown: (e) => {
-					e.stopPropagation();
-					editor.onPinPointerDown?.(p.id, pin, e);
-				}
-			}, `pin-${p.id}-${pin}`));
+	if (editor?.showPins) {
+		const anyArmed = !!editor.wireStart;
+		const pinConnected = (partId, pin) => {
+			if ((wireEndpoints.get(`${partId} ${pin}`) ?? 0) > 0) return true;
+			const nid = doc.parts.find((x) => x.id === partId)?.pins?.[pin];
+			if (!nid) return false;
+			return nid === "gnd" || (termsByNode.get(nid)?.length ?? 0) >= 2;
+		};
+		for (const p of doc.parts) {
+			const def = getPart(p.kind);
+			if (!def) continue;
+			for (const pin of def.pins) {
+				const t = def.terminalAt(p, pin);
+				const armed = editor.wireStart?.partId === p.id && editor.wireStart?.pin === pin;
+				const connected = pinConnected(p.id, pin);
+				pinHandles.push(/* @__PURE__ */ jsxs("g", {
+					className: "lab-pin",
+					"data-armed": armed ? "true" : void 0,
+					"data-target": anyArmed && !armed ? "true" : void 0,
+					role: "button",
+					tabIndex: editor.onPinActivate ? 0 : void 0,
+					"aria-label": armed ? `wiring from ${pin} of ${def.label}: activate another pin to finish` : `${pin} of ${def.label}: activate to start a wire`,
+					onPointerDown: (e) => {
+						e.stopPropagation();
+						editor.onPinPointerDown?.(p.id, pin, e);
+					},
+					onKeyDown: editor.onPinActivate ? (e) => {
+						if (e.key === "Enter" || e.key === " ") {
+							e.preventDefault();
+							editor.onPinActivate(p.id, pin);
+						}
+					} : void 0,
+					children: [
+						/* @__PURE__ */ jsx("circle", {
+							cx: t.x,
+							cy: t.y,
+							r: 13,
+							fill: "transparent"
+						}),
+						/* @__PURE__ */ jsx("circle", {
+							className: "lab-pin-dot",
+							cx: t.x,
+							cy: t.y,
+							r: armed ? 7.5 : 5.5,
+							fill: armed ? "var(--stage-accent)" : connected ? "color-mix(in oklab, var(--stage-accent) 30%, var(--stage-bg))" : "var(--stage-bg)",
+							stroke: "var(--stage-accent)",
+							strokeWidth: 2
+						}),
+						/* @__PURE__ */ jsx("title", { children: armed ? "Click another pin to finish the wire (Esc to cancel)" : "Click to start a wire" })
+					]
+				}, `pin-${p.id}-${pin}`));
+			}
 		}
 	}
 	const dots = [];
-	for (const [nid, ts] of termsByNode) if (drawnNode(nid) && ts.length > 2) {
-		const np = nodePos(nid);
-		dots.push(/* @__PURE__ */ jsx(JunctionDot, {
-			x: np.x,
-			y: np.y,
-			live: false
-		}, `j-${nid}`));
+	if (!editor?.showPins) {
+		for (const [nid, ts] of termsByNode) if (drawnNode(nid) && ts.length > 2) {
+			const np = nodePos(nid);
+			dots.push(/* @__PURE__ */ jsx(JunctionDot, {
+				x: np.x,
+				y: np.y,
+				live: false
+			}, `j-${nid}`));
+		}
+		for (const [key, n] of wireEndpoints) if (n >= 2) {
+			const [partId, pin] = key.split(" ");
+			const t = partId && pin ? termOf(partId, pin) : void 0;
+			if (t) dots.push(/* @__PURE__ */ jsx(JunctionDot, {
+				x: t.x,
+				y: t.y,
+				live: false
+			}, `jw-${key}`));
+		}
 	}
-	for (const [key, n] of wireEndpoints) if (n >= 2) {
-		const [partId, pin] = key.split(" ");
-		const t = partId && pin ? termOf(partId, pin) : void 0;
-		if (t) dots.push(/* @__PURE__ */ jsx(JunctionDot, {
-			x: t.x,
-			y: t.y,
-			live: false
-		}, `jw-${key}`));
+	const warnMarks = [];
+	for (const p of doc.parts) {
+		if (p.kind !== "node") continue;
+		if ((wireEndpoints.get(`${p.id} p`) ?? 0) >= 2) continue;
+		const t = termOf(p.id, "p");
+		if (t) warnMarks.push(/* @__PURE__ */ jsxs("g", {
+			pointerEvents: "none",
+			children: [/* @__PURE__ */ jsx("circle", {
+				cx: t.x,
+				cy: t.y,
+				r: 8.5,
+				fill: "none",
+				stroke: "var(--stage-danger, #e03131)",
+				strokeWidth: 2,
+				strokeDasharray: "3.2 2.6",
+				opacity: .9
+			}), /* @__PURE__ */ jsx("title", { children: "Not connected: this junction needs at least two wires to complete a connection." })]
+		}, `de-${p.id}`));
 	}
-	return /* @__PURE__ */ jsx("div", {
-		style: {
-			borderRadius: 14,
-			overflow: "hidden",
-			background: "var(--stage-bg)",
-			border: "1px solid var(--stage-grid)"
-		},
-		children: /* @__PURE__ */ jsxs("svg", {
-			viewBox: `0 0 ${W} ${H}`,
-			width: "100%",
-			role: "img",
-			"aria-label": ariaLabel,
-			children: [
-				editor?.onBackground && /* @__PURE__ */ jsx("rect", {
-					x: 0,
-					y: 0,
-					width: W,
-					height: H,
-					fill: "transparent",
-					onPointerDown: (e) => editor.onBackground(e)
-				}),
-				wires,
-				flow && !reduce && live.map((seg, k) => /* @__PURE__ */ jsx(FlowDots, {
-					points: seg,
-					phase,
-					spacing: 54,
-					r: 2.3
-				}, `f${k}`)),
-				dots,
-				editor?.wirePreview && (() => {
-					const { from, mids = [], to, valid } = editor.wirePreview;
-					const pts = [
-						from,
-						...mids,
-						to
-					];
-					const col = "var(--stage-accent)";
-					return /* @__PURE__ */ jsxs("g", {
-						style: { pointerEvents: "none" },
-						children: [
-							/* @__PURE__ */ jsx("polyline", {
-								points: pts.map((q) => `${q.x},${q.y}`).join(" "),
-								fill: "none",
-								stroke: col,
-								strokeWidth: 2.5,
-								strokeDasharray: "5 4",
-								strokeLinecap: "round",
-								strokeLinejoin: "round",
-								opacity: .9
-							}),
-							mids.map((m, i) => /* @__PURE__ */ jsx("circle", {
-								cx: m.x,
-								cy: m.y,
-								r: 3.5,
-								fill: col
-							}, i)),
-							/* @__PURE__ */ jsx("circle", {
-								cx: to.x,
-								cy: to.y,
-								r: valid ? 6 : 5,
-								fill: valid ? col : "var(--stage-bg)",
-								stroke: col,
-								strokeWidth: 2
-							})
-						]
-					});
-				})(),
-				doc.parts.map((p) => {
-					const def = getPart(p.kind);
-					if (!def) return null;
-					const glyph = def.render(p, states.get(p.id));
-					const tappable = !!onPartTap && (def.tap?.(p) ?? null) !== null;
-					const selectable = !!editor?.onSelect;
-					const selected = selectedId === p.id;
-					if (!tappable && !selectable && !selected) return glyph;
-					const onActivate = selectable ? () => editor.onSelect(p.id) : tappable ? () => onPartTap(p.id) : void 0;
-					const label = !selectable && tappable ? `toggle ${def.label.toLowerCase()}` : `select ${def.label.toLowerCase()}`;
-					return /* @__PURE__ */ jsxs("g", {
-						role: onActivate ? "button" : void 0,
-						tabIndex: onActivate ? 0 : void 0,
-						"aria-label": onActivate ? label : void 0,
-						style: { cursor: editor?.onPartPointerDown ? "move" : onActivate ? "pointer" : "default" },
-						onPointerDown: editor?.onPartPointerDown ? (e) => editor.onPartPointerDown(p.id, e) : void 0,
-						onClick: onActivate ? (e) => {
-							e.stopPropagation();
+	const svg = /* @__PURE__ */ jsxs("svg", {
+		viewBox: viewBox ?? `0 0 ${W} ${H}`,
+		width: "100%",
+		height: bare ? "100%" : void 0,
+		preserveAspectRatio: viewBox ? "none" : "xMidYMid meet",
+		className: bare ? "circuit-scene-svg" : void 0,
+		role: "img",
+		"aria-label": ariaLabel,
+		children: [
+			editor?.onBackground && /* @__PURE__ */ jsx("rect", {
+				x: vbx,
+				y: vby,
+				width: vbw,
+				height: vbh,
+				fill: "transparent",
+				onPointerDown: (e) => editor.onBackground(e)
+			}),
+			wires,
+			flow && !reduce && live.map((seg, k) => /* @__PURE__ */ jsx(FlowDots, {
+				points: seg,
+				phase,
+				spacing: 54,
+				r: 2.3
+			}, `f${k}`)),
+			dots,
+			warnMarks,
+			editor?.wirePreview && (() => {
+				const { from, mids = [], to, valid } = editor.wirePreview;
+				const pts = [
+					from,
+					...mids,
+					to
+				];
+				const col = "var(--stage-accent)";
+				return /* @__PURE__ */ jsxs("g", {
+					pointerEvents: "none",
+					children: [
+						/* @__PURE__ */ jsx("polyline", {
+							points: pts.map((q) => `${q.x},${q.y}`).join(" "),
+							fill: "none",
+							stroke: col,
+							strokeWidth: 2.5,
+							strokeDasharray: "5 4",
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							opacity: .9
+						}),
+						mids.map((m, i) => /* @__PURE__ */ jsx("circle", {
+							cx: m.x,
+							cy: m.y,
+							r: 3.5,
+							fill: col
+						}, i)),
+						/* @__PURE__ */ jsx("circle", {
+							cx: to.x,
+							cy: to.y,
+							r: valid ? 6 : 5,
+							fill: valid ? col : "var(--stage-bg)",
+							stroke: col,
+							strokeWidth: 2
+						})
+					]
+				});
+			})(),
+			doc.parts.map((p) => {
+				const def = getPart(p.kind);
+				if (!def) return null;
+				const glyph = def.render(p, states.get(p.id));
+				const tappable = !!onPartTap && (def.tap?.(p) ?? null) !== null;
+				const selectable = !!editor?.onSelect;
+				const selected = selectedId === p.id;
+				if (!tappable && !selectable && !selected) return glyph;
+				const onActivate = selectable ? () => editor.onSelect(p.id) : tappable ? () => onPartTap(p.id) : void 0;
+				const label = !selectable && tappable ? `toggle ${def.label.toLowerCase()}` : `select ${def.label.toLowerCase()}`;
+				return /* @__PURE__ */ jsxs("g", {
+					role: onActivate ? "button" : void 0,
+					tabIndex: onActivate ? 0 : void 0,
+					"aria-label": onActivate ? label : void 0,
+					className: editor?.onPartPointerDown ? "circuit-scene-part-target" : onActivate ? "circuit-scene-activate-target" : void 0,
+					onPointerDown: editor?.onPartPointerDown ? (e) => editor.onPartPointerDown(p.id, e) : void 0,
+					onClick: onActivate ? (e) => {
+						e.stopPropagation();
+						onActivate();
+					} : void 0,
+					onKeyDown: onActivate ? (e) => {
+						if (e.key === "Enter" || e.key === " ") {
+							e.preventDefault();
 							onActivate();
-						} : void 0,
-						onKeyDown: onActivate ? (e) => {
-							if (e.key === "Enter" || e.key === " ") {
-								e.preventDefault();
-								onActivate();
-							}
-						} : void 0,
-						children: [
-							selected && /* @__PURE__ */ jsx("rect", {
+						}
+					} : void 0,
+					children: [
+						selected && /* @__PURE__ */ jsxs("g", {
+							pointerEvents: "none",
+							children: [/* @__PURE__ */ jsx("rect", {
+								x: p.at.x - 40,
+								y: p.at.y - 30,
+								width: 80,
+								height: 60,
+								rx: 12,
+								fill: "var(--stage-accent)",
+								opacity: .1
+							}), /* @__PURE__ */ jsx("rect", {
 								x: p.at.x - 40,
 								y: p.at.y - 30,
 								width: 80,
 								height: 60,
-								rx: 8,
+								rx: 12,
 								fill: "none",
 								stroke: "var(--stage-accent)",
-								strokeWidth: 1.5,
-								strokeDasharray: "4 3"
-							}),
-							(tappable || selectable) && /* @__PURE__ */ jsx("rect", {
-								x: p.at.x - 38,
-								y: p.at.y - 28,
-								width: 76,
-								height: 56,
-								rx: 8,
-								fill: "transparent"
-							}),
-							glyph
-						]
-					}, `hit-${p.id}`);
-				}),
-				doc.parts.map((p) => {
-					const dmg = states.get(p.id)?.damage;
-					if (!dmg) return null;
-					const c = "var(--stage-danger, #e03131)";
-					return /* @__PURE__ */ jsxs("g", {
-						style: { pointerEvents: "none" },
-						children: [/* @__PURE__ */ jsx("rect", {
-							x: p.at.x - 34,
-							y: p.at.y - 24,
-							width: 68,
-							height: 48,
+								strokeWidth: 2
+							})]
+						}),
+						(tappable || selectable) && /* @__PURE__ */ jsx("rect", {
+							x: p.at.x - 38,
+							y: p.at.y - 28,
+							width: 76,
+							height: 56,
 							rx: 8,
-							fill: "color-mix(in oklab, var(--stage-danger, #e03131) 14%, transparent)",
-							stroke: c,
-							strokeWidth: 2,
-							strokeDasharray: "3 3"
-						}), /* @__PURE__ */ jsx("text", {
-							x: p.at.x,
-							y: p.at.y - 30,
-							fill: c,
-							fontSize: 14,
-							fontWeight: 800,
-							textAnchor: "middle",
-							dominantBaseline: "auto",
-							children: dmg === "overpower" ? "🔥" : "⚡"
-						})]
-					}, `dmg-${p.id}`);
-				}),
-				pinHandles,
-				editor?.selectedWireId && editor.onWireEndDown && (() => {
-					const w = (doc.wires ?? []).find((x) => x.id === editor.selectedWireId);
-					if (!w) return null;
-					return [{
-						end: "a",
-						t: termOf(w.a.partId, w.a.pin)
-					}, {
-						end: "b",
-						t: termOf(w.b.partId, w.b.pin)
-					}].map(({ end, t }) => t && /* @__PURE__ */ jsx("circle", {
-						cx: t.x,
-						cy: t.y,
-						r: 7.5,
-						fill: "var(--stage-bg)",
-						stroke: "var(--stage-accent)",
-						strokeWidth: 2.5,
-						style: { cursor: "grab" },
-						role: "button",
-						"aria-label": `wire end ${end}`,
-						onPointerDown: (e) => {
-							e.stopPropagation();
-							editor.onWireEndDown(w.id, end, e);
-						}
-					}, `we-${end}`));
-				})()
-			]
-		})
+							fill: "transparent"
+						}),
+						glyph
+					]
+				}, `hit-${p.id}`);
+			}),
+			doc.parts.map((p) => {
+				const dmg = states.get(p.id)?.damage;
+				if (!dmg) return null;
+				const c = "var(--stage-danger, #e03131)";
+				return /* @__PURE__ */ jsxs("g", {
+					pointerEvents: "none",
+					children: [/* @__PURE__ */ jsx("rect", {
+						x: p.at.x - 34,
+						y: p.at.y - 24,
+						width: 68,
+						height: 48,
+						rx: 8,
+						fill: "color-mix(in oklab, var(--stage-danger, #e03131) 14%, transparent)",
+						stroke: c,
+						strokeWidth: 2,
+						strokeDasharray: "3 3"
+					}), /* @__PURE__ */ jsx("text", {
+						x: p.at.x,
+						y: p.at.y - 30,
+						fill: c,
+						fontSize: 14,
+						fontWeight: 800,
+						textAnchor: "middle",
+						dominantBaseline: "auto",
+						children: dmg === "overpower" ? "🔥" : "⚡"
+					})]
+				}, `dmg-${p.id}`);
+			}),
+			pinHandles,
+			editor?.selectedWireId && editor.onWireEndDown && (() => {
+				const w = (doc.wires ?? []).find((x) => x.id === editor.selectedWireId);
+				if (!w) return null;
+				return [{
+					end: "a",
+					t: termOf(w.a.partId, w.a.pin)
+				}, {
+					end: "b",
+					t: termOf(w.b.partId, w.b.pin)
+				}].map(({ end, t }) => t && /* @__PURE__ */ jsx("circle", {
+					cx: t.x,
+					cy: t.y,
+					r: 7.5,
+					fill: "var(--stage-bg)",
+					stroke: "var(--stage-accent)",
+					strokeWidth: 2.5,
+					className: "circuit-scene-wire-handle",
+					role: "button",
+					"aria-label": `wire end ${end}`,
+					onPointerDown: (e) => {
+						e.stopPropagation();
+						editor.onWireEndDown(w.id, end, e);
+					}
+				}, `we-${end}`));
+			})()
+		]
+	});
+	return bare ? svg : /* @__PURE__ */ jsx("div", {
+		className: "circuit-scene-frame",
+		children: svg
 	});
 }
 

package/dist/build/editor/index.d.mts

@@ -0,0 +1,4 @@
+import { CircuitDoc } from "../contract.mjs";
+import { CircuitEditor, CircuitEditorProps } from "../CircuitEditor.mjs";
+import { addJunction, addPart, addWire, connect, deletePart, disconnectWire, movePart, pruneJunctions, removeWire, retargetWire, rotatePart, setGround, setWireWaypoints, spliceIntoWire, tapWire, terminalOf, updateProps, wirePolyline } from "../editor-ops.mjs";
+export { type CircuitDoc, CircuitEditor, type CircuitEditorProps, addJunction, addPart, addWire, connect, deletePart, disconnectWire, movePart, pruneJunctions, removeWire, retargetWire, rotatePart, setGround, setWireWaypoints, spliceIntoWire, tapWire, terminalOf, updateProps, wirePolyline };

package/dist/build/editor/index.mjs

@@ -0,0 +1,6 @@
+'use client';
+
+import { addJunction, addPart, addWire, connect, deletePart, disconnectWire, movePart, pruneJunctions, removeWire, retargetWire, rotatePart, setGround, setWireWaypoints, spliceIntoWire, tapWire, terminalOf, updateProps, wirePolyline } from "../editor-ops.mjs";
+import { CircuitEditor } from "../CircuitEditor.mjs";
+
+export { CircuitEditor, addJunction, addPart, addWire, connect, deletePart, disconnectWire, movePart, pruneJunctions, removeWire, retargetWire, rotatePart, setGround, setWireWaypoints, spliceIntoWire, tapWire, terminalOf, updateProps, wirePolyline };