@classytic/labs 0.2.0 → 0.4.0

package/dist/kit/cycle.mjs

@@ -14,11 +14,11 @@ const TONES = [
 	"var(--stage-muted)"
 ];
 const r2 = (n) => Math.round(n * 100) / 100;
+const hits = (a, b) => a.l < b.r && b.l < a.r && a.t < b.b && b.t < a.b;
 function CycleDiagram({ nodes, edges, size = 340, activeId = null, litEdges = null, edgeSlot, onNodeClick, ariaLabel }) {
 	const c = size / 2;
 	const R = size * .33;
 	const nodeR = Math.max(16, Math.min(26, size * .075));
-	const PAD = 46;
 	const n = nodes.length || 1;
 	const pos = /* @__PURE__ */ new Map();
 	nodes.forEach((nd, i) => {
@@ -33,6 +33,75 @@ function CycleDiagram({ nodes, edges, size = 340, activeId = null, litEdges = nu
 	const idx = new Map(nodes.map((nd, i) => [nd.id, i]));
 	const interactive = !!onNodeClick;
 	const lit = litEdges ?? (activeId ? new Set(edges.filter((e) => e.from === activeId).map(edgeKey)) : null);
+	/**
+	* Where each process pill goes.
+	*
+	* The middle of the curve is the natural spot, and on a busy cycle it is also where a chord
+	* passes a node, or where a reciprocal pair crosses (photosynthesis printed over respiration).
+	* So a pill is tried at the middle first and then further along the curve either way, and it
+	* takes the first spot clear of the nodes, their names, and the pills already placed. A cycle
+	* with room ends up exactly where it was before.
+	*/
+	const boxAt = (p, w, h) => ({
+		l: p.x - w / 2,
+		r: p.x + w / 2,
+		t: p.y - h / 2,
+		b: p.y + h / 2
+	});
+	const taken = [];
+	nodes.forEach((nd) => {
+		const p = pos.get(nd.id);
+		taken.push({
+			l: p.x - nodeR,
+			r: p.x + nodeR,
+			t: p.y - nodeR,
+			b: p.y + nodeR
+		});
+		taken.push(boxAt({
+			x: p.x,
+			y: p.y + nodeR + 12
+		}, nd.label.length * 5.8 + 4, 13));
+	});
+	const spotOn = (start, ctrl, end, w) => {
+		const at = (t, off = 0) => {
+			const x = (1 - t) * (1 - t) * start.x + 2 * t * (1 - t) * ctrl.x + t * t * end.x;
+			const y = (1 - t) * (1 - t) * start.y + 2 * t * (1 - t) * ctrl.y + t * t * end.y;
+			if (!off) return {
+				x: r2(x),
+				y: r2(y)
+			};
+			const tx = 2 * (1 - t) * (ctrl.x - start.x) + 2 * t * (end.x - ctrl.x);
+			const ty = 2 * (1 - t) * (ctrl.y - start.y) + 2 * t * (end.y - ctrl.y);
+			const tl = Math.hypot(tx, ty) || 1;
+			return {
+				x: r2(x - ty / tl * off),
+				y: r2(y + tx / tl * off)
+			};
+		};
+		for (const off of [
+			0,
+			15,
+			-15,
+			30,
+			-30
+		]) for (const t of [
+			.5,
+			.36,
+			.64,
+			.26,
+			.74
+		]) {
+			const p = at(t, off);
+			const box = boxAt(p, w, 18);
+			if (!taken.some((o) => hits(box, o))) {
+				taken.push(box);
+				return p;
+			}
+		}
+		const p = at(.5);
+		taken.push(boxAt(p, w, 18));
+		return p;
+	};
 	const edgePaths = [];
 	const slots = [];
 	edges.forEach((e) => {
@@ -94,16 +163,14 @@ function CycleDiagram({ nodes, edges, size = 340, activeId = null, litEdges = nu
 				fill: col
 			})]
 		}, key));
-		const bm = {
-			x: r2(.25 * start.x + .5 * ctrl.x + .25 * end.x),
-			y: r2(.25 * start.y + .5 * ctrl.y + .25 * end.y)
-		};
+		const pillW = e.label ? e.label.length * 5.7 + 14 : 96;
+		const bm = spotOn(start, ctrl, end, pillW);
 		if (edgeSlot) slots.push(/* @__PURE__ */ jsx("g", {
 			opacity: dim ? .25 : 1,
 			children: edgeSlot(e, key, bm)
 		}, `s-${key}`));
 		else if (e.label) {
-			const w = e.label.length * 5.7 + 14;
+			const w = pillW;
 			slots.push(/* @__PURE__ */ jsxs("g", {
 				opacity: dim ? .3 : 1,
 				children: [/* @__PURE__ */ jsx("rect", {
@@ -135,7 +202,14 @@ function CycleDiagram({ nodes, edges, size = 340, activeId = null, litEdges = nu
 			opacity: (activeId ? !active : false) ? .45 : 1,
 			style: { cursor: interactive ? "pointer" : "default" },
 			onClick: interactive ? () => onNodeClick(nd.id) : void 0,
+			onKeyDown: interactive ? (event) => {
+				if (event.key === "Enter" || event.key === " ") {
+					event.preventDefault();
+					onNodeClick(nd.id);
+				}
+			} : void 0,
 			role: interactive ? "button" : void 0,
+			tabIndex: interactive ? 0 : void 0,
 			"aria-label": interactive ? nd.label : void 0,
 			children: [
 				active && /* @__PURE__ */ jsx("circle", {
@@ -162,19 +236,25 @@ function CycleDiagram({ nodes, edges, size = 340, activeId = null, litEdges = nu
 					fontSize: 11,
 					fontWeight: 700,
 					textAnchor: "middle",
+					style: {
+						paintOrder: "stroke",
+						stroke: "var(--stage-bg)",
+						strokeWidth: 3.5,
+						strokeLinejoin: "round"
+					},
 					children: p.label
 				})
 			]
 		}, nd.id);
 	});
 	return /* @__PURE__ */ jsxs("svg", {
-		viewBox: `-46 -46 ${size + 2 * PAD} ${size + 2 * PAD}`,
+		viewBox: `-46 -46 ${size + 92} ${size + 92}`,
 		width: "100%",
 		role: "img",
 		"aria-label": ariaLabel,
 		style: {
 			display: "block",
-			maxHeight: size + 2 * PAD
+			maxHeight: size + 92
 		},
 		children: [
 			edgePaths,

package/dist/kit/data-scene.d.mts

@@ -1,5 +1,4 @@
 import { SceneMeta } from "./scenes.mjs";
-
 //#region src/kit/data-scene.d.ts
 type DataSceneSpec = {
   name: string;

package/dist/kit/data-scene.mjs

@@ -6,11 +6,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/kit/data-scene.tsx
 const clamp01 = (n) => Math.max(0, Math.min(1, n));
 const Cap = ({ label }) => label ? /* @__PURE__ */ jsx("span", {
-	style: {
-		fontSize: 12,
-		fontWeight: 700,
-		color: "var(--stage-fg)"
-	},
+	className: "text-xs font-bold text-[var(--stage-fg)]",
 	children: label
 }) : null;
 /** N icons, wrapped to fit; the last `highlight` stay vivid, the rest desaturate. */
@@ -21,38 +17,26 @@ function iconCountRender(icon) {
 		const w = q.width ?? 120, h = q.height ?? 130;
 		const size = Math.max(12, Math.min(30, Math.sqrt(w * (h - 24) * .62 / Math.max(1, n))));
 		return /* @__PURE__ */ jsxs("div", {
-			style: {
-				display: "grid",
-				justifyItems: "center",
-				gap: 4
-			},
-			children: [
-				/* @__PURE__ */ jsx("div", {
-					role: "img",
-					"aria-label": `${n} ${icon}`,
+			className: "grid justify-items-center gap-1",
+			children: [/* @__PURE__ */ jsx("div", {
+				role: "img",
+				"aria-label": `${n} ${icon}`,
+				className: "flex flex-wrap content-center justify-center gap-0.5",
+				style: {
+					width: w,
+					minHeight: h - (q.label ? 22 : 6)
+				},
+				children: Array.from({ length: n }).map((_, i) => /* @__PURE__ */ jsx("span", {
 					style: {
-						width: w,
-						minHeight: h - (q.label ? 22 : 6),
-						display: "flex",
-						flexWrap: "wrap",
-						alignContent: "center",
-						justifyContent: "center",
-						gap: 2
+						fontSize: size,
+						lineHeight: 1,
+						opacity: i >= n - hl ? 1 : .92,
+						filter: i < n - hl ? "saturate(0.5)" : "none",
+						animation: `scene-pop 0.3s ease-out ${i * .03}s backwards`
 					},
-					children: Array.from({ length: n }).map((_, i) => /* @__PURE__ */ jsx("span", {
-						style: {
-							fontSize: size,
-							lineHeight: 1,
-							opacity: i >= n - hl ? 1 : .92,
-							filter: i < n - hl ? "saturate(0.5)" : "none",
-							animation: `data-pop 0.3s ease-out ${i * .03}s backwards`
-						},
-						children: icon
-					}, i))
-				}),
-				/* @__PURE__ */ jsx(Cap, { label: q.label }),
-				/* @__PURE__ */ jsx("style", { children: `@keyframes data-pop{from{opacity:0;transform:scale(0.4)}to{opacity:1}}` })
-			]
+					children: icon
+				}, i))
+			}), /* @__PURE__ */ jsx(Cap, { label: q.label })]
 		});
 	};
 }
@@ -62,21 +46,12 @@ function iconLevelRender(icon, slots) {
 		const lit = Math.round(clamp01(q.frac ?? 0) * slots);
 		const w = q.width ?? 120;
 		return /* @__PURE__ */ jsxs("div", {
-			style: {
-				display: "grid",
-				justifyItems: "center",
-				gap: 6
-			},
+			className: "grid justify-items-center gap-1.5",
 			children: [/* @__PURE__ */ jsx("div", {
 				role: "img",
 				"aria-label": `${lit} of ${slots}`,
-				style: {
-					width: w,
-					display: "flex",
-					flexWrap: "wrap",
-					justifyContent: "center",
-					gap: 4
-				},
+				className: "flex flex-wrap justify-center gap-1",
+				style: { width: w },
 				children: Array.from({ length: slots }).map((_, i) => /* @__PURE__ */ jsx("span", {
 					style: {
 						fontSize: 26,
@@ -96,7 +71,11 @@ function shapeLevelRender(shape, color) {
 		const w = q.width ?? 120, h = q.height ?? 150;
 		const f = clamp01(q.frac ?? 0);
 		const c = color ?? q.color ?? "var(--stage-accent)";
-		const FG = "var(--stage-fg)", MUTED = "var(--stage-muted)";
+		const FG = "var(--stage-fg)";
+		const RIM = "color-mix(in oklab, var(--stage-fg) 14%, transparent)";
+		const GLASS = "color-mix(in oklab, var(--stage-fg) 5%, transparent)";
+		const SHEEN = "var(--stage-sheen)";
+		const fillTrans = { transition: "y 0.5s ease-out, height 0.5s ease-out" };
 		const aria = `${shape} ${f * 100 | 0}% full`;
 		const lbl = q.label ? /* @__PURE__ */ jsx("text", {
 			x: w / 2,
@@ -122,14 +101,30 @@ function shapeLevelRender(shape, color) {
 						cx,
 						cy,
 						r,
-						fill: "color-mix(in oklab, var(--stage-fg) 10%, transparent)",
-						stroke: MUTED,
-						strokeWidth: 1.5
+						fill: GLASS,
+						stroke: RIM,
+						strokeWidth: 1.25
 					}),
 					d && /* @__PURE__ */ jsx("path", {
 						d,
-						fill: c,
-						fillOpacity: .85
+						fill: c
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						cx,
+						cy,
+						r: r - .5,
+						fill: "none",
+						stroke: "#000",
+						strokeOpacity: .1,
+						strokeWidth: 1
+					}),
+					/* @__PURE__ */ jsx("ellipse", {
+						cx: cx - r * .3,
+						cy: cy - r * .4,
+						rx: r * .52,
+						ry: r * .3,
+						fill: SHEEN,
+						opacity: .18
 					}),
 					lbl
 				]
@@ -138,7 +133,9 @@ function shapeLevelRender(shape, color) {
 		const bw = shape === "cup" ? Math.min(w - 24, 78) : w - 36, bx = (w - bw) / 2;
 		const top = 12, bot = h - (q.label ? 28 : 12);
 		const fillTop = bot - f * (bot - top);
-		const outline = shape === "cup" ? `M ${bx + 5} ${top} L ${bx} ${bot} L ${bx + bw} ${bot} L ${bx + bw - 5} ${top}` : `M ${bx} ${top} L ${bx} ${bot} L ${bx + bw} ${bot} L ${bx + bw} ${top}`;
+		const rb = 9;
+		const outline = shape === "cup" ? `M ${bx + 5} ${top} L ${bx + rb * .4} ${bot - rb} Q ${bx} ${bot} ${bx + rb} ${bot} L ${bx + bw - rb} ${bot} Q ${bx + bw} ${bot} ${bx + bw - rb * .4} ${bot - rb} L ${bx + bw - 5} ${top}` : `M ${bx} ${top} L ${bx} ${bot - rb} Q ${bx} ${bot} ${bx + rb} ${bot} L ${bx + bw - rb} ${bot} Q ${bx + bw} ${bot} ${bx + bw} ${bot - rb} L ${bx + bw} ${top}`;
+		const fh = Math.max(0, bot - fillTop);
 		return /* @__PURE__ */ jsxs("svg", {
 			width: w,
 			height: h,
@@ -146,21 +143,37 @@ function shapeLevelRender(shape, color) {
 			role: "img",
 			"aria-label": aria,
 			children: [
+				/* @__PURE__ */ jsx("path", {
+					d: `${outline} Z`,
+					fill: GLASS
+				}),
 				/* @__PURE__ */ jsx("rect", {
-					x: bx,
+					x: bx + 1,
 					y: fillTop,
-					width: bw,
-					height: Math.max(0, bot - fillTop),
+					width: bw - 2,
+					height: Math.max(0, fh - 1),
+					rx: Math.min(7, fh / 2),
 					fill: c,
-					fillOpacity: .5,
-					style: { transition: "y 0.5s ease-out, height 0.5s ease-out" }
+					fillOpacity: .62,
+					style: fillTrans
+				}),
+				/* @__PURE__ */ jsx("rect", {
+					x: bx + 1,
+					y: fillTop,
+					width: Math.max(3, (bw - 2) * .24),
+					height: Math.max(0, fh - 1),
+					rx: Math.min(7, fh / 2),
+					fill: SHEEN,
+					opacity: .2,
+					style: fillTrans
 				}),
 				/* @__PURE__ */ jsx("path", {
 					d: outline,
 					fill: "none",
-					stroke: MUTED,
-					strokeWidth: 2.5,
-					strokeLinejoin: "round"
+					stroke: RIM,
+					strokeWidth: 1.75,
+					strokeLinejoin: "round",
+					strokeLinecap: "round"
 				}),
 				lbl
 			]

package/dist/kit/diagram/annotations.mjs

@@ -0,0 +1,134 @@
+'use client';
+
+import { Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Label, Segment, Vector, useCoords } from "@classytic/stage";
+
+//#region src/kit/diagram/annotations.tsx
+/**
+* Geometry / vector annotations built on @classytic/stage primitives (angle arcs,
+* right-angle marks, labelled vectors). Pure stage — NO electronics import — so a
+* math/vector lab that only annotates never drags in the circuit-glyph library.
+* Render these INSIDE a `<Stage>` (they read the coordinate context).
+*/
+function AngleArc({ at, from, to, rPx = 26, color = "var(--stage-fg)", label }) {
+	const c = useCoords();
+	const o = c.toPx(at.x, at.y);
+	const p1 = c.toPx(at.x + from.x, at.y + from.y);
+	const p2 = c.toPx(at.x + to.x, at.y + to.y);
+	const a1 = Math.atan2(p1[1] - o[1], p1[0] - o[0]);
+	const a2 = Math.atan2(p2[1] - o[1], p2[0] - o[0]);
+	let da = a2 - a1;
+	while (da <= -Math.PI) da += 2 * Math.PI;
+	while (da > Math.PI) da -= 2 * Math.PI;
+	const sweep = da > 0 ? 1 : 0;
+	const sx = o[0] + rPx * Math.cos(a1), sy = o[1] + rPx * Math.sin(a1);
+	const ex = o[0] + rPx * Math.cos(a2), ey = o[1] + rPx * Math.sin(a2);
+	const am = a1 + da / 2;
+	const lx = o[0] + (rPx + 13) * Math.cos(am), ly = o[1] + (rPx + 13) * Math.sin(am);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", {
+		d: `M ${sx} ${sy} A ${rPx} ${rPx} 0 0 ${sweep} ${ex} ${ey}`,
+		fill: "none",
+		stroke: color,
+		strokeWidth: 1.6,
+		opacity: .85
+	}), label && /* @__PURE__ */ jsx("text", {
+		x: lx,
+		y: ly,
+		fill: color,
+		fontSize: 13,
+		fontWeight: 600,
+		textAnchor: "middle",
+		dominantBaseline: "middle",
+		style: {
+			paintOrder: "stroke",
+			stroke: "var(--stage-bg)",
+			strokeWidth: 3.5,
+			strokeLinejoin: "round"
+		},
+		children: label
+	})] });
+}
+/** A small right-angle square at `at`, between unit-ish directions `u` and `v`. */
+function RightAngleMark({ at, u, v, sizePx = 12, color = "var(--stage-muted)" }) {
+	const c = useCoords();
+	const o = c.toPx(at.x, at.y);
+	const dir = (d) => {
+		const p = c.toPx(at.x + d.x, at.y + d.y);
+		const dx = p[0] - o[0], dy = p[1] - o[1];
+		const m = Math.hypot(dx, dy) || 1;
+		return [dx / m, dy / m];
+	};
+	const [ux, uy] = dir(u);
+	const [vx, vy] = dir(v);
+	const a = [o[0] + ux * sizePx, o[1] + uy * sizePx];
+	const b = [o[0] + (ux + vx) * sizePx, o[1] + (uy + vy) * sizePx];
+	const d = [o[0] + vx * sizePx, o[1] + vy * sizePx];
+	return /* @__PURE__ */ jsx("path", {
+		d: `M ${a[0]} ${a[1]} L ${b[0]} ${b[1]} L ${d[0]} ${d[1]}`,
+		fill: "none",
+		stroke: color,
+		strokeWidth: 1.4,
+		opacity: .8
+	});
+}
+/**
+* An arrow (tail → tail+comp) with an optional tip label and optional dashed x/y
+* component decomposition, the SVG equivalent of the old canvas
+* `drawVector(..., { label, components })`.
+*/
+function LabeledVector({ tail = {
+	x: 0,
+	y: 0
+}, comp, color = "var(--stage-accent)", weight = 2.5, label, components = false }) {
+	const tip = {
+		x: tail.x + comp.x,
+		y: tail.y + comp.y
+	};
+	const corner = {
+		x: tip.x,
+		y: tail.y
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		components && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Segment, {
+			from: tail,
+			to: corner,
+			color,
+			opacity: .4,
+			weight: 1,
+			dashed: true
+		}), /* @__PURE__ */ jsx(Segment, {
+			from: corner,
+			to: tip,
+			color,
+			opacity: .4,
+			weight: 1,
+			dashed: true
+		})] }),
+		/* @__PURE__ */ jsx(Vector, {
+			tail,
+			tip,
+			color,
+			weight
+		}),
+		label && (() => {
+			const len = Math.hypot(comp.x, comp.y) || 1;
+			const ux = comp.x / len, uy = -comp.y / len;
+			const off = 15;
+			const anchor = ux < -.35 ? "end" : ux > .35 ? "start" : "middle";
+			return /* @__PURE__ */ jsx(Label, {
+				x: tip.x,
+				y: tip.y,
+				text: label,
+				color,
+				dx: ux * off,
+				dy: uy * off,
+				size: 13,
+				anchor
+			});
+		})()
+	] });
+}
+
+//#endregion
+export { AngleArc, LabeledVector, RightAngleMark };

package/dist/kit/diagram/circuit-box.mjs

@@ -0,0 +1,76 @@
+'use client';
+
+import { CellGlyph, ResistorGlyph } from "../electronics/basics.mjs";
+import { Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Label, useCoords } from "@classytic/stage";
+
+//#region src/kit/diagram/circuit-box.tsx
+/**
+* Math-coordinate ADAPTERS over the canonical pixel-space electronics glyph library
+* (kit/electronics). A lab drawing on a math-unit <Stage> places a real schematic
+* symbol by giving a `center` in view units; the adapter projects to pixels and
+* renders the ONE canonical glyph, so there is a single definition of each symbol
+* across every circuit lab. This module carries the electronics dependency, kept out
+* of ./annotations so pure geometry labs don't pull it.
+*/
+/** Resistor at a math `center`; `w` (units) → body reach, projected to the canonical glyph. */
+function ResistorBox({ center, w, color = "var(--stage-fg)", label, reading, live }) {
+	const c = useCoords();
+	const [cx, cy] = c.toPx(center.x, center.y);
+	const half = Math.max(c.sx(w / 2), 24);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ResistorGlyph, {
+		cx,
+		cy,
+		half,
+		live,
+		label
+	}), reading && /* @__PURE__ */ jsx(Label, {
+		x: center.x,
+		y: center.y,
+		text: reading,
+		color,
+		size: 11,
+		dy: 22
+	})] });
+}
+/** Rotate a glyph 90° for a vertical wire, keeping its label horizontal (rendered separately). */
+function Oriented({ cx, cy, orient, label, glyph }) {
+	if (orient === "h") return /* @__PURE__ */ jsx(Fragment, { children: glyph(true) });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("g", {
+		transform: `rotate(90 ${cx} ${cy})`,
+		children: glyph(false)
+	}), label && /* @__PURE__ */ jsx("text", {
+		x: cx + 16,
+		y: cy + 4,
+		fill: "var(--stage-fg)",
+		fontSize: 11,
+		fontWeight: 600,
+		textAnchor: "start",
+		style: { pointerEvents: "none" },
+		children: label
+	})] });
+}
+/** Cell / battery at a math `center`; `half` (units) → terminal reach. `cells` > 1 = a battery. */
+function CellBox({ center, half, live, label, cells, orient = "h" }) {
+	const c = useCoords();
+	const [cx, cy] = c.toPx(center.x, center.y);
+	const h = Math.max(c.sx(half), 22);
+	return /* @__PURE__ */ jsx(Oriented, {
+		cx,
+		cy,
+		orient,
+		label,
+		glyph: (s) => /* @__PURE__ */ jsx(CellGlyph, {
+			cx,
+			cy,
+			half: h,
+			live,
+			label: s ? label : void 0,
+			cells
+		})
+	});
+}
+
+//#endregion
+export { CellBox, ResistorBox };

package/dist/kit/electronics/_shared.mjs

@@ -0,0 +1,83 @@
+'use client';
+
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/kit/electronics/_shared.tsx
+const WIRE = "var(--stage-wire)";
+const LIVE = "var(--stage-accent)";
+const METAL = "var(--stage-metal)";
+const WARN = "var(--stage-warn, oklch(0.72 0.14 75))";
+const BG = "var(--stage-bg)";
+const FG = "var(--stage-fg)";
+const CHARGE = "var(--stage-charge)";
+const SHEEN = "color-mix(in oklab, var(--stage-sheen) 45%, transparent)";
+const C_RESISTOR = "var(--stage-resistor, oklch(0.74 0.09 70))";
+const C_CAP = "var(--stage-capacitor, oklch(0.6 0.14 250))";
+const C_DIODE = "var(--stage-diode, oklch(0.56 0.16 290))";
+const C_CELL = "var(--stage-cell, oklch(0.58 0.18 28))";
+const C_LAMP = "var(--stage-warn, oklch(0.78 0.15 75))";
+const C_SWITCH = "var(--stage-switch, oklch(0.6 0.04 250))";
+const C_MOS = "var(--stage-mosfet, oklch(0.57 0.13 300))";
+const C_BAND = [
+	"oklch(0.45 0.08 50)",
+	"oklch(0.55 0.18 28)",
+	"oklch(0.6 0.15 75)"
+];
+const tint = (c, pct = 12) => `color-mix(in oklab, ${c} ${pct}%, ${BG})`;
+/** The two clean leads from each terminal to the body edge at ±bodyHalf (no nubs, no bloat). */
+function Leads({ cx, cy, half, bodyHalf, live }) {
+	const wire = live ? LIVE : WIRE;
+	return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+		x1: cx - half,
+		y1: cy,
+		x2: cx - bodyHalf,
+		y2: cy,
+		stroke: wire,
+		strokeWidth: 2,
+		strokeLinecap: "round"
+	}), /* @__PURE__ */ jsx("line", {
+		x1: cx + bodyHalf,
+		y1: cy,
+		x2: cx + half,
+		y2: cy,
+		stroke: wire,
+		strokeWidth: 2,
+		strokeLinecap: "round"
+	})] });
+}
+/**
+* Tag — an SVG text label with a background HALO (a stroke in the bg colour painted under
+* the fill). ALWAYS use this instead of a bare <text> in a schematic: it keeps labels
+* readable wherever they land, so a label crossing a wire or sitting on a fill never turns
+* into mud. (This is the same paint-order trick the stage axis labels use.)
+*/
+function Tag({ x, y, text, color = FG, size = 11, weight = 600, anchor = "middle", halo = BG }) {
+	return /* @__PURE__ */ jsx("text", {
+		x,
+		y,
+		fill: color,
+		fontSize: size,
+		fontWeight: weight,
+		textAnchor: anchor,
+		style: {
+			pointerEvents: "none",
+			paintOrder: "stroke",
+			stroke: halo,
+			strokeWidth: 3.5,
+			strokeLinejoin: "round"
+		},
+		children: text
+	});
+}
+/** Value/name label above a body of half-height `bodyH` (haloed via Tag). */
+function GlyphLabel({ cx, cy, bodyH, label }) {
+	if (!label) return null;
+	return /* @__PURE__ */ jsx(Tag, {
+		x: cx,
+		y: cy - bodyH - 7,
+		text: label
+	});
+}
+
+//#endregion
+export { BG, CHARGE, C_BAND, C_CAP, C_CELL, C_DIODE, C_LAMP, C_MOS, C_RESISTOR, C_SWITCH, FG, GlyphLabel, LIVE, Leads, METAL, SHEEN, Tag, WARN, WIRE, tint };