@classytic/labs 0.4.0 → 0.5.0

package/dist/diagrams/magnetism/MagnetismDiagram.mjs

@@ -0,0 +1,1702 @@
+'use client';
+
+import { Figure, HUE, STROKE, alpha, shade, tint } from "../../kit/figure/figure.mjs";
+import { GAUGE } from "../../kit/figure/gauge.mjs";
+import { FigText } from "../../kit/figure/text.mjs";
+import { Arrow } from "../../kit/figure/beam.mjs";
+import { rich, richHtml } from "../rich.mjs";
+import { DEFAULT_SIZE, barEnds, blocked, chargeForce, chargeOrbit, coilCentreField, conductorForce, dirVec, facing, fieldDirAt, hallFace, inducedPoles, magnetGeometry, orbitPolyline, pageDir, railsCurrent, regionAt, sceneCurrents, solenoidNorth, textBox, traceSceneLines, wireRingTopDir } from "./core.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/diagrams/magnetism/MagnetismDiagram.tsx
+const FIELD = HUE[1];
+const CURRENT = HUE.warn;
+const FORCE = HUE.danger;
+const VELOCITY = HUE.good;
+const NORTH = HUE.danger;
+const SOUTH = HUE[1];
+const COPPER = HUE.copper;
+const COPPER_LIT = `color-mix(in oklab, ${HUE.copper} 55%, ${HUE.obsLit})`;
+const COPPER_DARK = `color-mix(in oklab, ${HUE.copper} 55%, ${HUE.obsDark})`;
+const pathOf = (points) => points.map((p, i) => `${i === 0 ? "M" : "L"}${p.x.toFixed(1)} ${p.y.toFixed(1)}`).join(" ");
+const CHIP_POS = `color-mix(in oklab, ${HUE.danger} 78%, ${HUE.obsDark})`;
+const CHIP_NEG = `color-mix(in oklab, ${HUE[1]} 78%, ${HUE.obsDark})`;
+function ChargeChip({ x, y, sign, r = 5.5 }) {
+	const d = r * .55;
+	return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("circle", {
+		cx: x,
+		cy: y,
+		r,
+		fill: sign === "+" ? CHIP_POS : CHIP_NEG
+	}), /* @__PURE__ */ jsx("path", {
+		d: sign === "+" ? `M${x - d} ${y} H${x + d} M${x} ${y - d} V${y + d}` : `M${x - d} ${y} H${x + d}`,
+		stroke: HUE.obsLit,
+		strokeWidth: STROKE.line,
+		strokeLinecap: "round"
+	})] });
+}
+/** A small filled arrowhead at `at`, pointing along `dir` (a page vector). */
+function Head({ at, dir, color, size = 6 }) {
+	const len = Math.hypot(dir.x, dir.y) || 1;
+	const ux = dir.x / len;
+	const uy = dir.y / len;
+	const back = {
+		x: at.x - ux * size,
+		y: at.y - uy * size
+	};
+	const px = -uy * size * .55;
+	const py = ux * size * .55;
+	return /* @__PURE__ */ jsx("path", {
+		d: `M${at.x} ${at.y} L${back.x + px} ${back.y + py} L${back.x - px} ${back.y - py} Z`,
+		fill: color
+	});
+}
+/** ⊙ or ⊗: a vector seen end-on. */
+function EndOn({ x, y, r, sense, color }) {
+	const d = r * .55;
+	return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("circle", {
+		cx: x,
+		cy: y,
+		r,
+		fill: HUE.paper,
+		stroke: color,
+		strokeWidth: STROKE.line
+	}), sense === "out" ? /* @__PURE__ */ jsx("circle", {
+		cx: x,
+		cy: y,
+		r: r * .28,
+		fill: color
+	}) : /* @__PURE__ */ jsx("path", {
+		d: `M${x - d} ${y - d} L${x + d} ${y + d} M${x + d} ${y - d} L${x - d} ${y + d}`,
+		stroke: color,
+		strokeWidth: STROKE.line
+	})] });
+}
+/** A vector drawn from a point: an arrow when in the page, a ⊙/⊗ marker when not. */
+function VectorFrom({ at, f, length, color, label }) {
+	if (f.kind === "zero") return null;
+	if (f.kind === "in" || f.kind === "out") return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx(EndOn, {
+		x: at.x + 16,
+		y: at.y - 16,
+		r: 7,
+		sense: f.kind,
+		color
+	}), label ? /* @__PURE__ */ jsx(FigText, {
+		x: at.x + 28,
+		y: at.y - 12,
+		size: "label",
+		tone: "ink",
+		children: label
+	}) : null] });
+	return /* @__PURE__ */ jsx(Arrow, {
+		x1: at.x,
+		y1: at.y,
+		x2: at.x + f.dir.x * length,
+		y2: at.y + f.dir.y * length,
+		color,
+		weight: "edge",
+		label
+	});
+}
+function FieldRegion({ item, obstacles }) {
+	const gap = 26;
+	const cols = Math.max(1, Math.floor((item.w - 8) / gap));
+	const rows = Math.max(1, Math.floor((item.h - 8) / gap));
+	const ox = item.x + (item.w - (cols - 1) * gap) / 2;
+	const oy = item.y + (item.h - (rows - 1) * gap) / 2;
+	const marks = [];
+	if (item.dir === "in" || item.dir === "out") for (let i = 0; i < cols; i += 1) for (let j = 0; j < rows; j += 1) {
+		const x = ox + i * gap;
+		const y = oy + j * gap;
+		if (blocked({
+			x,
+			y
+		}, obstacles)) continue;
+		marks.push(item.dir === "in" ? /* @__PURE__ */ jsx("path", {
+			d: `M${x - 3.6} ${y - 3.6} L${x + 3.6} ${y + 3.6} M${x + 3.6} ${y - 3.6} L${x - 3.6} ${y + 3.6}`,
+			stroke: alpha(FIELD, 70),
+			strokeWidth: STROKE.line
+		}, `${i}-${j}`) : /* @__PURE__ */ jsx("circle", {
+			cx: x,
+			cy: y,
+			r: 2.4,
+			fill: alpha(FIELD, 75)
+		}, `${i}-${j}`));
+	}
+	else {
+		const d = pageDir(dirVec(item.dir));
+		const horizontal = Math.abs(d.x) > .5;
+		const count = horizontal ? rows : cols;
+		for (let k = 0; k < count; k += 1) {
+			const a = horizontal ? {
+				x: item.x + 8,
+				y: oy + k * gap
+			} : {
+				x: ox + k * gap,
+				y: item.y + 8
+			};
+			const b = horizontal ? {
+				x: item.x + item.w - 8,
+				y: oy + k * gap
+			} : {
+				x: ox + k * gap,
+				y: item.y + item.h - 8
+			};
+			const [from, to] = (horizontal ? d.x > 0 : d.y > 0) ? [a, b] : [b, a];
+			const runs = [];
+			const steps = Math.max(2, Math.round(Math.hypot(to.x - from.x, to.y - from.y) / 2));
+			let start = null;
+			let last = null;
+			for (let t = 0; t <= steps; t += 1) {
+				const p = {
+					x: from.x + (to.x - from.x) * t / steps,
+					y: from.y + (to.y - from.y) * t / steps
+				};
+				if (blocked(p, obstacles, 3)) {
+					if (start && last) runs.push([start, last]);
+					start = null;
+				} else {
+					start ??= p;
+					last = p;
+				}
+			}
+			if (start && last) runs.push([start, last]);
+			const kept = runs.filter(([p, q]) => Math.hypot(q.x - p.x, q.y - p.y) > 14);
+			const longest = kept.reduce((best, r) => !best || Math.hypot(r[1].x - r[0].x, r[1].y - r[0].y) > Math.hypot(best[1].x - best[0].x, best[1].y - best[0].y) ? r : best, null);
+			marks.push(/* @__PURE__ */ jsxs("g", { children: [kept.map(([p, q], n) => /* @__PURE__ */ jsx("line", {
+				x1: p.x,
+				y1: p.y,
+				x2: q.x,
+				y2: q.y,
+				stroke: alpha(FIELD, 60),
+				strokeWidth: STROKE.line
+			}, n)), longest ? /* @__PURE__ */ jsx(Head, {
+				at: {
+					x: (longest[0].x + longest[1].x) / 2 + d.x * 4,
+					y: (longest[0].y + longest[1].y) / 2 + d.y * 4
+				},
+				dir: d,
+				color: alpha(FIELD, 80)
+			}) : null] }, k));
+		}
+	}
+	return /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx("rect", {
+			x: item.x,
+			y: item.y,
+			width: item.w,
+			height: item.h,
+			rx: 6,
+			fill: alpha(FIELD, 6),
+			stroke: alpha(FIELD, 30),
+			strokeWidth: STROKE.hair,
+			strokeDasharray: "4 3"
+		}),
+		marks,
+		item.label ? /* @__PURE__ */ jsx(FigText, {
+			x: item.x + item.w - 6,
+			y: item.y + 14,
+			size: "label",
+			tone: "hue-1",
+			anchor: "end",
+			children: rich(item.label)
+		}) : null
+	] });
+}
+function Wire({ item }) {
+	const rings = Math.max(0, Math.min(3, item.rings ?? 0));
+	const topDir = wireRingTopDir(item.current);
+	return /* @__PURE__ */ jsxs("g", { children: [
+		Array.from({ length: rings }, (_, k) => {
+			const r = 22 + k * 15;
+			return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("circle", {
+				cx: item.x,
+				cy: item.y,
+				r,
+				fill: "none",
+				stroke: alpha(FIELD, 65),
+				strokeWidth: STROKE.line
+			}), /* @__PURE__ */ jsx(Head, {
+				at: {
+					x: item.x + topDir.x * 3,
+					y: item.y - r
+				},
+				dir: topDir,
+				color: FIELD
+			})] }, k);
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: item.x,
+			cy: item.y,
+			r: 10,
+			fill: COPPER_LIT,
+			stroke: COPPER_DARK,
+			strokeWidth: STROKE.line
+		}),
+		item.current === "out" ? /* @__PURE__ */ jsx("circle", {
+			cx: item.x,
+			cy: item.y,
+			r: 3,
+			fill: COPPER_DARK
+		}) : /* @__PURE__ */ jsx("path", {
+			d: `M${item.x - 5} ${item.y - 5} L${item.x + 5} ${item.y + 5} M${item.x + 5} ${item.y - 5} L${item.x - 5} ${item.y + 5}`,
+			stroke: COPPER_DARK,
+			strokeWidth: STROKE.edge
+		}),
+		item.label ? /* @__PURE__ */ jsx(FigText, {
+			x: item.x,
+			y: item.y + 26 + (rings ? rings * 15 : 0),
+			size: "label",
+			anchor: "middle",
+			children: rich(item.label)
+		}) : null
+	] });
+}
+function Conductor({ item, items }) {
+	const mid = {
+		x: (item.x1 + item.x2) / 2,
+		y: (item.y1 + item.y2) / 2
+	};
+	const len = Math.hypot(item.x2 - item.x1, item.y2 - item.y1) || 1;
+	const along = {
+		x: (item.x2 - item.x1) / len,
+		y: (item.y2 - item.y1) / len
+	};
+	const f = item.force ? facing(conductorForce(item, items)) : null;
+	return /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx("line", {
+			x1: item.x1,
+			y1: item.y1,
+			x2: item.x2,
+			y2: item.y2,
+			stroke: COPPER_DARK,
+			strokeWidth: GAUGE.block,
+			strokeLinecap: "round"
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: item.x1,
+			y1: item.y1,
+			x2: item.x2,
+			y2: item.y2,
+			stroke: COPPER_LIT,
+			strokeWidth: GAUGE.cable,
+			strokeLinecap: "round"
+		}),
+		item.currentArrow !== false ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Head, {
+			at: {
+				x: mid.x + along.x * 22,
+				y: mid.y + along.y * 22
+			},
+			dir: along,
+			color: CURRENT,
+			size: 9
+		}), /* @__PURE__ */ jsx(FigText, {
+			x: mid.x + along.x * 22 - along.y * 14,
+			y: mid.y + along.y * 22 + along.x * 14 + 4,
+			size: "label",
+			anchor: "middle",
+			children: "I"
+		})] }) : null,
+		f && f.kind === "zero" ? /* @__PURE__ */ jsx(FigText, {
+			x: mid.x,
+			y: mid.y - 14,
+			size: "label",
+			tone: "soft",
+			anchor: "middle",
+			children: "F = 0"
+		}) : f ? /* @__PURE__ */ jsx(VectorFrom, {
+			at: mid,
+			f,
+			length: 44,
+			color: FORCE,
+			label: "F"
+		}) : null,
+		item.label ? /* @__PURE__ */ jsx(FigText, {
+			x: item.x2 + along.x * 8,
+			y: item.y2 + along.y * 8 + 16,
+			size: "label",
+			anchor: "middle",
+			tone: "soft",
+			children: rich(item.label)
+		}) : null
+	] });
+}
+function Magnet({ item }) {
+	const g = magnetGeometry(item);
+	const horizontal = Math.abs(g.axis.x) > .5;
+	const half = g.half;
+	const box = (end, color, letter, key) => {
+		const cx = (end.x + item.x) / 2;
+		const cy = (end.y + item.y) / 2;
+		const w = horizontal ? g.length / 2 : half * 2;
+		const h = horizontal ? half * 2 : g.length / 2;
+		return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
+			x: cx - w / 2,
+			y: cy - h / 2,
+			width: w,
+			height: h,
+			fill: tint(color, 40),
+			stroke: shade(color, 60),
+			strokeWidth: STROKE.line
+		}), /* @__PURE__ */ jsx(FigText, {
+			x: end.x + (item.x - end.x) / (g.length / 2) * 12,
+			y: end.y + (item.y - end.y) / (g.length / 2) * 12,
+			size: "label",
+			anchor: "middle",
+			baseline: "middle",
+			halo: false,
+			children: letter
+		})] }, key);
+	};
+	return /* @__PURE__ */ jsxs("g", { children: [box(g.north, NORTH, "N", "n"), box(g.south, SOUTH, "S", "s")] });
+}
+function Coil({ item, items }) {
+	if (item.view === "face") {
+		const sense = item.current;
+		const top = sense === "ccw" ? {
+			x: -1,
+			y: 0
+		} : {
+			x: 1,
+			y: 0
+		};
+		return /* @__PURE__ */ jsxs("g", { children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: item.x,
+				cy: item.y,
+				r: item.r,
+				fill: "none",
+				stroke: COPPER_DARK,
+				strokeWidth: GAUGE.cable
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: item.x,
+				cy: item.y,
+				r: item.r,
+				fill: "none",
+				stroke: COPPER_LIT,
+				strokeWidth: GAUGE.lead
+			}),
+			sense ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Head, {
+				at: {
+					x: item.x + top.x * 5,
+					y: item.y - item.r
+				},
+				dir: top,
+				color: CURRENT,
+				size: 9
+			}), /* @__PURE__ */ jsx(Head, {
+				at: {
+					x: item.x - top.x * 5,
+					y: item.y + item.r
+				},
+				dir: {
+					x: -top.x,
+					y: 0
+				},
+				color: CURRENT,
+				size: 9
+			})] }) : null,
+			item.centreField && sense ? /* @__PURE__ */ jsx(EndOn, {
+				x: item.x,
+				y: item.y,
+				r: 8,
+				sense: coilCentreField(sense),
+				color: FIELD
+			}) : null,
+			item.label ? /* @__PURE__ */ jsx(FigText, {
+				x: item.x,
+				y: item.y + item.r + 18,
+				size: "label",
+				anchor: "middle",
+				children: item.label
+			}) : null
+		] });
+	}
+	const region = regionAt(items, item);
+	const fieldDir = region ? facing(dirVec(region.dir)) : null;
+	const base = fieldDir && fieldDir.kind === "plane" ? Math.atan2(-fieldDir.dir.y, fieldDir.dir.x) : 0;
+	const theta = (item.normalDeg ?? 30) * Math.PI / 180;
+	const nAngle = base + theta;
+	const n = {
+		x: Math.cos(nAngle),
+		y: -Math.sin(nAngle)
+	};
+	const plane = {
+		x: -n.y,
+		y: n.x
+	};
+	const nLen = item.r + 18;
+	const arcR = 26;
+	const b = {
+		x: Math.cos(base),
+		y: -Math.sin(base)
+	};
+	return /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx("line", {
+			x1: item.x - plane.x * item.r,
+			y1: item.y - plane.y * item.r,
+			x2: item.x + plane.x * item.r,
+			y2: item.y + plane.y * item.r,
+			stroke: COPPER_DARK,
+			strokeWidth: GAUGE.beam,
+			strokeLinecap: "round"
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: item.x - plane.x * item.r,
+			y1: item.y - plane.y * item.r,
+			x2: item.x + plane.x * item.r,
+			y2: item.y + plane.y * item.r,
+			stroke: COPPER_LIT,
+			strokeWidth: GAUGE.rod,
+			strokeLinecap: "round"
+		}),
+		item.normal !== false ? /* @__PURE__ */ jsx(Arrow, {
+			x1: item.x,
+			y1: item.y,
+			x2: item.x + n.x * nLen,
+			y2: item.y + n.y * nLen,
+			color: HUE.ink,
+			dashed: true
+		}) : null,
+		item.normal !== false ? /* @__PURE__ */ jsx(FigText, {
+			x: item.x + n.x * (nLen + 10),
+			y: item.y + n.y * (nLen + 10) + 4,
+			size: "label",
+			anchor: n.x < -.2 ? "end" : n.x > .2 ? "start" : "middle",
+			children: "normal"
+		}) : null,
+		item.theta !== false && fieldDir?.kind === "plane" ? /* @__PURE__ */ jsxs("g", { children: [
+			/* @__PURE__ */ jsx("line", {
+				x1: item.x,
+				y1: item.y,
+				x2: item.x + b.x * 40,
+				y2: item.y + b.y * 40,
+				stroke: alpha(FIELD, 60),
+				strokeWidth: STROKE.hair,
+				strokeDasharray: "3 3"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: `M${item.x + b.x * arcR} ${item.y + b.y * arcR} A${arcR} ${arcR} 0 0 ${theta > 0 ? 0 : 1} ${item.x + n.x * arcR} ${item.y + n.y * arcR}`,
+				fill: "none",
+				stroke: HUE.ink,
+				strokeWidth: STROKE.line
+			}),
+			/* @__PURE__ */ jsx(FigText, {
+				x: item.x + Math.cos(base + theta / 2) * 38,
+				y: item.y - Math.sin(base + theta / 2) * 38 + 4,
+				size: "label",
+				anchor: "middle",
+				children: "θ"
+			})
+		] }) : null,
+		item.label ? /* @__PURE__ */ jsx(FigText, {
+			x: item.x + plane.x * (item.r + 10),
+			y: item.y + plane.y * (item.r + 10) + 14,
+			size: "label",
+			anchor: "middle",
+			tone: "soft",
+			children: rich(item.label)
+		}) : null
+	] });
+}
+function Solenoid({ item }) {
+	const turns = Math.max(3, Math.min(12, item.turns ?? 8));
+	const r = item.radius ?? 18;
+	const pitch = item.length / turns;
+	const north = solenoidNorth(item);
+	const up = item.current === "up";
+	const front = [];
+	const back = [];
+	for (let k = 0; k < turns; k += 1) {
+		const x = item.x - item.length / 2 + pitch * (k + .5);
+		const lean = pitch * .35;
+		front.push(/* @__PURE__ */ jsx("line", {
+			x1: x - lean,
+			y1: item.y + r,
+			x2: x + lean,
+			y2: item.y - r,
+			stroke: COPPER_DARK,
+			strokeWidth: GAUGE.bar,
+			strokeLinecap: "round"
+		}, k));
+		back.push(/* @__PURE__ */ jsx("line", {
+			x1: x + lean,
+			y1: item.y - r,
+			x2: x + pitch - lean,
+			y2: item.y + r,
+			stroke: alpha(COPPER, 35),
+			strokeWidth: GAUGE.wire,
+			strokeLinecap: "round"
+		}, k));
+	}
+	const arrowX = item.x - item.length / 2 + pitch * .5;
+	const endX = (side) => side === "left" ? item.x - item.length / 2 - 4 : item.x + item.length / 2 + 4;
+	const coreFill = item.core === "steel" ? HUE.device : HUE.deviceSoft;
+	return /* @__PURE__ */ jsxs("g", { children: [
+		item.core && item.core !== "none" ? /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx("rect", {
+			x: item.x - item.length / 2 - 6,
+			y: item.y - r * .55,
+			width: item.length + 12,
+			height: r * 1.1,
+			rx: 2,
+			fill: coreFill,
+			stroke: HUE.deviceEdge,
+			strokeWidth: STROKE.line
+		}) }) : null,
+		back,
+		front,
+		/* @__PURE__ */ jsx(Head, {
+			at: {
+				x: arrowX + (up ? 1 : -1) * pitch * .2,
+				y: item.y + (up ? -1 : 1) * r * .55
+			},
+			dir: {
+				x: 0,
+				y: up ? -1 : 1
+			},
+			color: CURRENT,
+			size: 9
+		}),
+		item.poles !== false ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FigText, {
+			x: endX(north),
+			y: item.y - r - 8,
+			size: "title",
+			anchor: "middle",
+			tone: "hot",
+			children: "N"
+		}), /* @__PURE__ */ jsx(FigText, {
+			x: endX(north === "left" ? "right" : "left"),
+			y: item.y - r - 8,
+			size: "title",
+			anchor: "middle",
+			tone: "hue-1",
+			children: "S"
+		})] }) : null,
+		item.label ? /* @__PURE__ */ jsx(FigText, {
+			x: item.x,
+			y: item.y + r + 18,
+			size: "label",
+			anchor: "middle",
+			tone: "soft",
+			children: rich(item.label)
+		}) : null
+	] });
+}
+/** Material colours for a plain bar. Pinned where the material is a real, recognisable colour. */
+const BAR_FILL = {
+	iron: {
+		fill: HUE.deviceSoft,
+		edge: HUE.deviceEdge
+	},
+	steel: {
+		fill: HUE.device,
+		edge: HUE.deviceEdge
+	},
+	copper: {
+		fill: COPPER_LIT,
+		edge: COPPER_DARK
+	},
+	aluminium: {
+		fill: HUE.solidWhite,
+		edge: HUE.deviceSoft
+	},
+	plastic: {
+		fill: HUE.solidCream,
+		edge: HUE.deviceSoft
+	},
+	wood: {
+		fill: HUE.wood,
+		edge: shade(HUE.wood, 60)
+	}
+};
+function Bar({ item, items }) {
+	const { axis, length } = barEnds(item);
+	const thick = 16;
+	const w = axis.x ? length : thick;
+	const h = axis.x ? thick : length;
+	const { fill, edge } = BAR_FILL[item.material];
+	const induced = item.poles ? inducedPoles(item, items) : null;
+	const letter = (at, text, tone) => /* @__PURE__ */ jsx(FigText, {
+		x: at.x + (item.x - at.x) * .22,
+		y: at.y + (item.y - at.y) * .22 + 4,
+		size: "label",
+		anchor: "middle",
+		tone,
+		children: text
+	});
+	return /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx("rect", {
+			x: item.x - w / 2,
+			y: item.y - h / 2,
+			width: w,
+			height: h,
+			rx: 3,
+			fill,
+			stroke: edge,
+			strokeWidth: STROKE.line
+		}),
+		induced ? /* @__PURE__ */ jsxs(Fragment, { children: [letter(induced.north, "N", "hot"), letter(induced.south, "S", "hue-1")] }) : null,
+		item.label ? /* @__PURE__ */ jsx(FigText, {
+			x: item.x,
+			y: axis.x ? item.y + thick / 2 + 16 : item.y + length / 2 + 16,
+			size: "label",
+			anchor: "middle",
+			tone: "soft",
+			children: rich(item.label)
+		}) : null
+	] });
+}
+/**
+* Where a charge's name goes: behind it (where neither v nor its path can be), and on the side AWAY
+* from its force, so "ion" and the "F" beside the force arrow never read as one word.
+*/
+function chargeLabelAt(item, items) {
+	const vel = pageDir(dirVec(item.v));
+	const f = item.force !== false ? facing(chargeForce(item, items)) : null;
+	const forceDown = f?.kind === "plane" ? f.dir.y > .3 : false;
+	const horizontal = Math.abs(vel.x) > .5;
+	return {
+		x: item.x - vel.x * 20,
+		y: item.y - vel.y * 20 + (horizontal ? forceDown ? -12 : 24 : 4),
+		anchor: vel.x > .5 ? "end" : vel.x < -.5 ? "start" : "middle"
+	};
+}
+/** Loops drawn for a winding: more turns, more loops, in proportion to the other winding. */
+function loopsFor(turns, other) {
+	const ratio = turns / Math.max(turns, other);
+	return Math.max(3, Math.round(3 + ratio * 9));
+}
+function Winding({ x, top, bottom, loops, w }) {
+	const pitch = (bottom - top) / loops;
+	return /* @__PURE__ */ jsx("g", { children: Array.from({ length: loops }, (_, i) => {
+		const y = top + pitch * (i + .5);
+		return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("ellipse", {
+			cx: x,
+			cy: y,
+			rx: w / 2,
+			ry: pitch * .42,
+			fill: "none",
+			stroke: COPPER_DARK,
+			strokeWidth: GAUGE.rod
+		}), /* @__PURE__ */ jsx("ellipse", {
+			cx: x,
+			cy: y,
+			rx: w / 2,
+			ry: pitch * .42,
+			fill: "none",
+			stroke: COPPER_LIT,
+			strokeWidth: GAUGE.fine
+		})] }, i);
+	}) });
+}
+function Transformer({ item }) {
+	const W = 150;
+	const H = 110;
+	const limb = 18;
+	const left = item.x - W / 2;
+	const top = item.y - H / 2;
+	const p = loopsFor(item.primaryTurns, item.secondaryTurns);
+	const s = loopsFor(item.secondaryTurns, item.primaryTurns);
+	const core = HUE.deviceSoft;
+	const lead = (x1, x2, y) => /* @__PURE__ */ jsx("line", {
+		x1,
+		y1: y,
+		x2,
+		y2: y,
+		stroke: COPPER_DARK,
+		strokeWidth: GAUGE.lead,
+		strokeLinecap: "round"
+	});
+	const tilde = (x, y) => /* @__PURE__ */ jsx("path", {
+		d: `M${x - 7} ${y} q3.5 -6 7 0 t7 0`,
+		fill: "none",
+		stroke: HUE.ink,
+		strokeWidth: STROKE.line
+	});
+	return /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx("rect", {
+			x: left,
+			y: top,
+			width: W,
+			height: H,
+			rx: 4,
+			fill: core,
+			stroke: HUE.deviceEdge,
+			strokeWidth: STROKE.line
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			x: left + limb,
+			y: top + limb,
+			width: 114,
+			height: 74,
+			rx: 2,
+			fill: "var(--fig-paper)",
+			stroke: HUE.deviceEdge,
+			strokeWidth: STROKE.line
+		}),
+		/* @__PURE__ */ jsx(Winding, {
+			x: left + limb / 2,
+			top: top + 10,
+			bottom: top + H - 10,
+			loops: p,
+			w: 32
+		}),
+		/* @__PURE__ */ jsx(Winding, {
+			x: left + W - limb / 2,
+			top: top + 10,
+			bottom: top + H - 10,
+			loops: s,
+			w: 32
+		}),
+		lead(left - 34, left - 7, top + 18),
+		lead(left - 34, left - 7, top + H - 18),
+		lead(left + W + 7, left + W + 34, top + 18),
+		lead(left + W + 7, left + W + 34, top + H - 18),
+		item.ac !== false ? tilde(left - 26, item.y) : null,
+		/* @__PURE__ */ jsx(FigText, {
+			x: left + limb / 2,
+			y: top - 8,
+			size: "label",
+			anchor: "middle",
+			tone: "soft",
+			children: "primary"
+		}),
+		/* @__PURE__ */ jsx(FigText, {
+			x: left + W - limb / 2,
+			y: top - 8,
+			size: "label",
+			anchor: "middle",
+			tone: "soft",
+			children: "secondary"
+		}),
+		item.primaryLabel ? /* @__PURE__ */ jsx(FigText, {
+			x: left - 12,
+			y: top + H + 18,
+			size: "label",
+			anchor: "middle",
+			children: rich(item.primaryLabel)
+		}) : null,
+		item.secondaryLabel ? /* @__PURE__ */ jsx(FigText, {
+			x: left + W + 12,
+			y: top + H + 18,
+			size: "label",
+			anchor: "middle",
+			children: rich(item.secondaryLabel)
+		}) : null
+	] });
+}
+function Relay({ item }) {
+	const coreW = 110;
+	const cx = item.x - 18;
+	const cy = item.y + 26;
+	const pivot = {
+		x: cx - coreW / 2 - 10,
+		y: cy - 34
+	};
+	const armLen = 186;
+	const rad = (item.energised ? 0 : -13) * Math.PI / 180;
+	const along = (d) => ({
+		x: pivot.x + d * Math.cos(rad),
+		y: pivot.y + d * Math.sin(rad)
+	});
+	const tip = along(armLen);
+	const springFoot = along(coreW * .55);
+	const bracketY = pivot.y - 46;
+	const fixed = {
+		x: tip.x + 2,
+		y: pivot.y + 20
+	};
+	const zig = Array.from({ length: 18 }, (_, i) => {
+		const t = (i + 1) / 19;
+		const y = springFoot.y - 3 + (bracketY + 4 - (springFoot.y - 3)) * t;
+		return `L${springFoot.x + (i % 2 ? 6 : -6)} ${y.toFixed(1)}`;
+	}).join(" ");
+	return /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx("line", {
+			x1: springFoot.x - 22,
+			y1: bracketY,
+			x2: springFoot.x + 22,
+			y2: bracketY,
+			stroke: HUE.deviceEdge,
+			strokeWidth: GAUGE.strut,
+			strokeLinecap: "round"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: `M${springFoot.x} ${springFoot.y - 3} ${zig} L${springFoot.x} ${bracketY}`,
+			fill: "none",
+			stroke: HUE.metal,
+			strokeWidth: GAUGE.wire,
+			strokeLinejoin: "round"
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			x: cx - coreW / 2,
+			y: cy - 12,
+			width: coreW,
+			height: 24,
+			rx: 3,
+			fill: HUE.deviceSoft,
+			stroke: HUE.deviceEdge,
+			strokeWidth: STROKE.line
+		}),
+		Array.from({ length: 10 }, (_, i) => {
+			const x = cx - coreW / 2 + 10 + i * 10;
+			return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+				x1: x - 4,
+				y1: cy + 18,
+				x2: x + 4,
+				y2: cy - 18,
+				stroke: COPPER_DARK,
+				strokeWidth: GAUGE.strut,
+				strokeLinecap: "round"
+			}), /* @__PURE__ */ jsx("line", {
+				x1: x - 4,
+				y1: cy + 18,
+				x2: x + 4,
+				y2: cy - 18,
+				stroke: COPPER_LIT,
+				strokeWidth: GAUGE.fine,
+				strokeLinecap: "round"
+			})] }, i);
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: pivot.x,
+			y1: pivot.y,
+			x2: pivot.x,
+			y2: cy + 18,
+			stroke: HUE.deviceEdge,
+			strokeWidth: GAUGE.strut,
+			strokeLinecap: "round"
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: pivot.x,
+			y1: pivot.y,
+			x2: tip.x,
+			y2: tip.y,
+			stroke: HUE.device,
+			strokeWidth: GAUGE.core,
+			strokeLinecap: "round"
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: pivot.x,
+			cy: pivot.y,
+			r: 4.5,
+			fill: HUE.deviceEdge
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: tip.x,
+			cy: tip.y + 6,
+			r: 5,
+			fill: HUE.metal,
+			stroke: HUE.deviceEdge,
+			strokeWidth: STROKE.hair
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: fixed.x,
+			y1: fixed.y + 6,
+			x2: fixed.x + 34,
+			y2: fixed.y + 6,
+			stroke: HUE.deviceEdge,
+			strokeWidth: GAUGE.strut,
+			strokeLinecap: "round"
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: fixed.x,
+			cy: fixed.y,
+			r: 5,
+			fill: HUE.metal,
+			stroke: HUE.deviceEdge,
+			strokeWidth: STROKE.hair
+		}),
+		/* @__PURE__ */ jsx(FigText, {
+			x: fixed.x + 36,
+			y: fixed.y + 26,
+			size: "label",
+			anchor: "end",
+			tone: item.energised ? "good" : "soft",
+			children: item.energised ? "contacts closed" : "contacts open"
+		}),
+		/* @__PURE__ */ jsx(FigText, {
+			x: springFoot.x - 12,
+			y: bracketY + 18,
+			size: "note",
+			tone: "soft",
+			anchor: "end",
+			children: "spring"
+		}),
+		/* @__PURE__ */ jsx(FigText, {
+			x: cx,
+			y: cy + 36,
+			size: "label",
+			anchor: "middle",
+			tone: "soft",
+			children: item.label ? rich(item.label) : "coil on an iron core"
+		})
+	] });
+}
+function Charge({ item, items }) {
+	const vel = pageDir(dirVec(item.v));
+	const path = item.path ?? "none";
+	const orbit = path === "none" ? null : chargeOrbit(item, items);
+	const points = path === "none" ? [] : orbitPolyline(item, items, path === "circle");
+	const color = item.sign === "+" ? HUE.danger : HUE[1];
+	const midIdx = Math.floor(points.length * .4);
+	return /* @__PURE__ */ jsxs("g", { children: [
+		points.length > 2 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("path", {
+				d: pathOf(points),
+				fill: "none",
+				stroke: alpha(HUE.ink, 55),
+				strokeWidth: STROKE.line,
+				strokeDasharray: "5 4"
+			}),
+			points[midIdx + 1] ? /* @__PURE__ */ jsx(Head, {
+				at: points[midIdx + 1],
+				dir: {
+					x: points[midIdx + 1].x - points[midIdx].x,
+					y: points[midIdx + 1].y - points[midIdx].y
+				},
+				color: alpha(HUE.ink, 70)
+			}) : null,
+			orbit && path === "circle" ? /* @__PURE__ */ jsx("circle", {
+				cx: orbit.centre.x,
+				cy: orbit.centre.y,
+				r: 2,
+				fill: alpha(HUE.ink, 50)
+			}) : null
+		] }) : null,
+		/* @__PURE__ */ jsx(Arrow, {
+			x1: item.x,
+			y1: item.y,
+			x2: item.x + vel.x * 38,
+			y2: item.y + vel.y * 38,
+			color: VELOCITY,
+			weight: "edge",
+			label: "v"
+		}),
+		item.force !== false ? /* @__PURE__ */ jsx(VectorFrom, {
+			at: item,
+			f: facing(chargeForce(item, items)),
+			length: 32,
+			color: FORCE,
+			label: "F"
+		}) : null,
+		/* @__PURE__ */ jsx("circle", {
+			cx: item.x,
+			cy: item.y,
+			r: 8,
+			fill: tint(color, 35),
+			stroke: shade(color, 60),
+			strokeWidth: STROKE.line
+		}),
+		/* @__PURE__ */ jsx(FigText, {
+			x: item.x,
+			y: item.y + .5,
+			size: "label",
+			anchor: "middle",
+			baseline: "middle",
+			halo: false,
+			children: item.sign === "+" ? "+" : "−"
+		}),
+		item.label ? /* @__PURE__ */ jsx(FigText, {
+			...chargeLabelAt(item, items),
+			size: "label",
+			children: rich(item.label)
+		}) : null
+	] });
+}
+const SLAB_TOP = `color-mix(in oklab, ${HUE.deviceSoft} 38%, ${HUE.obsLit})`;
+const SLAB_FRONT = `color-mix(in oklab, ${HUE.deviceSoft} 58%, ${HUE.obsLit})`;
+const SLAB_SIDE = `color-mix(in oklab, ${HUE.deviceSoft} 88%, ${HUE.obsLit})`;
+const SLAB_EDGE = `color-mix(in oklab, ${HUE.deviceEdge} 80%, ${HUE.obsLit})`;
+function Slab({ item, items }) {
+	const depth = 16;
+	const face = item.show === "charged" ? hallFace(item, items) : null;
+	const carrierSign = item.carriers === "electrons" ? "-" : "+";
+	const otherSign = item.carriers === "electrons" ? "+" : "-";
+	const signs = (y, sign, key) => {
+		const n = Math.max(3, Math.floor(item.w / 22));
+		return Array.from({ length: n }, (_, i) => /* @__PURE__ */ jsx(ChargeChip, {
+			x: item.x + (i + .5) * item.w / n,
+			y,
+			sign
+		}, `${key}${i}`));
+	};
+	const leadY = item.y + item.h / 2;
+	const right = item.current === "right";
+	return /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx("path", {
+			d: `M${item.x} ${item.y} L${item.x + depth} ${item.y - depth} L${item.x + item.w + depth} ${item.y - depth} L${item.x + item.w} ${item.y} Z`,
+			fill: SLAB_TOP,
+			stroke: SLAB_EDGE,
+			strokeWidth: STROKE.line,
+			strokeLinejoin: "round"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: `M${item.x + item.w} ${item.y} L${item.x + item.w + depth} ${item.y - depth} L${item.x + item.w + depth} ${item.y + item.h - depth} L${item.x + item.w} ${item.y + item.h} Z`,
+			fill: SLAB_SIDE,
+			stroke: SLAB_EDGE,
+			strokeWidth: STROKE.line,
+			strokeLinejoin: "round"
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			x: item.x,
+			y: item.y,
+			width: item.w,
+			height: item.h,
+			fill: SLAB_FRONT,
+			stroke: SLAB_EDGE,
+			strokeWidth: STROKE.line
+		}),
+		/* @__PURE__ */ jsx(Arrow, {
+			x1: right ? item.x - 34 : item.x + item.w + depth + 34,
+			y1: leadY,
+			x2: right ? item.x - 4 : item.x + item.w + depth + 4,
+			y2: leadY,
+			color: CURRENT,
+			weight: "edge",
+			label: "I"
+		}),
+		face ? /* @__PURE__ */ jsxs(Fragment, { children: [signs(face === "top" ? item.y + 10 : item.y + item.h - 10, carrierSign, "c"), signs(face === "top" ? item.y + item.h - 10 : item.y + 10, otherSign, "o")] }) : null,
+		item.voltage ? /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+			x1: right ? item.x + item.w + depth + 12 : item.x - 12,
+			y1: item.y - depth + 4,
+			x2: right ? item.x + item.w + depth + 12 : item.x - 12,
+			y2: item.y + item.h - 4,
+			stroke: HUE.ink,
+			strokeWidth: STROKE.hair
+		}), /* @__PURE__ */ jsxs(FigText, {
+			x: right ? item.x + item.w + depth + 18 : item.x - 18,
+			y: item.y + item.h / 2,
+			size: "label",
+			baseline: "middle",
+			anchor: right ? "start" : "end",
+			children: ["V", /* @__PURE__ */ jsx("tspan", {
+				baselineShift: "sub",
+				fontSize: "0.75em",
+				children: "H"
+			})]
+		})] }) : null,
+		item.label ? /* @__PURE__ */ jsx(FigText, {
+			x: item.x + item.w / 2,
+			y: item.y + item.h + 18,
+			size: "label",
+			anchor: "middle",
+			tone: "soft",
+			children: rich(item.label)
+		}) : null
+	] });
+}
+function Rails({ item, items }) {
+	const rodX = item.x + item.length * (item.rodAt ?? .6);
+	const top = item.y;
+	const bottom = item.y + item.gap;
+	const vel = pageDir(dirVec(item.v));
+	const induced = item.induced ? railsCurrent(item, items) : null;
+	return /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx("line", {
+			x1: item.x,
+			y1: top,
+			x2: item.x + item.length,
+			y2: top,
+			stroke: HUE.metal,
+			strokeWidth: GAUGE.strut,
+			strokeLinecap: "round"
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: item.x,
+			y1: bottom,
+			x2: item.x + item.length,
+			y2: bottom,
+			stroke: HUE.metal,
+			strokeWidth: GAUGE.strut,
+			strokeLinecap: "round"
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: item.x,
+			y1: top,
+			x2: item.x,
+			y2: bottom,
+			stroke: HUE.metal,
+			strokeWidth: GAUGE.bar
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: rodX,
+			y1: top - 8,
+			x2: rodX,
+			y2: bottom + 8,
+			stroke: COPPER_DARK,
+			strokeWidth: GAUGE.block,
+			strokeLinecap: "round"
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: rodX,
+			y1: top - 8,
+			x2: rodX,
+			y2: bottom + 8,
+			stroke: COPPER_LIT,
+			strokeWidth: GAUGE.strut,
+			strokeLinecap: "round"
+		}),
+		/* @__PURE__ */ jsx(Arrow, {
+			x1: rodX,
+			y1: (top + bottom) / 2,
+			x2: rodX + vel.x * 40,
+			y2: (top + bottom) / 2 + vel.y * 40,
+			color: VELOCITY,
+			weight: "edge",
+			label: "v"
+		}),
+		induced ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Head, {
+			at: {
+				x: rodX,
+				y: (top + bottom) / 2 + (induced === "up" ? -18 : 18)
+			},
+			dir: {
+				x: 0,
+				y: induced === "up" ? -1 : 1
+			},
+			color: CURRENT,
+			size: 10
+		}), /* @__PURE__ */ jsx(FigText, {
+			x: rodX - 12,
+			y: (top + bottom) / 2 + (induced === "up" ? -16 : 24),
+			size: "label",
+			anchor: "end",
+			children: "I"
+		})] }) : null,
+		item.label ? /* @__PURE__ */ jsx(FigText, {
+			x: rodX,
+			y: bottom + 24,
+			size: "label",
+			anchor: "middle",
+			tone: "soft",
+			children: rich(item.label)
+		}) : null
+	] });
+}
+function Vector({ item }) {
+	const color = item.kind === "force" ? FORCE : item.kind === "field" ? FIELD : item.kind === "current" ? CURRENT : item.kind === "velocity" ? VELOCITY : HUE.ink;
+	const f = facing(dirVec(item.dir));
+	if (f.kind === "in" || f.kind === "out") return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx(EndOn, {
+		x: item.x,
+		y: item.y,
+		r: 8,
+		sense: f.kind,
+		color
+	}), item.label ? /* @__PURE__ */ jsx(FigText, {
+		x: item.x + 14,
+		y: item.y + 4,
+		size: "label",
+		children: item.label
+	}) : null] });
+	return /* @__PURE__ */ jsx(VectorFrom, {
+		at: item,
+		f,
+		length: item.length ?? 44,
+		color,
+		label: item.label
+	});
+}
+function Compass({ item, items, paths }) {
+	const f = fieldDirAt(items, paths, item);
+	const d = f.kind === "plane" ? f.dir : {
+		x: 0,
+		y: -1
+	};
+	const n = 9;
+	const px = -d.y * 3;
+	const py = d.x * 3;
+	return /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx("circle", {
+			cx: item.x,
+			cy: item.y,
+			r: 12,
+			fill: HUE.paper,
+			stroke: HUE.ink,
+			strokeWidth: STROKE.line
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: `M${item.x + d.x * n} ${item.y + d.y * n} L${item.x + px} ${item.y + py} L${item.x - px} ${item.y - py} Z`,
+			fill: NORTH
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: `M${item.x - d.x * n} ${item.y - d.y * n} L${item.x + px} ${item.y + py} L${item.x - px} ${item.y - py} Z`,
+			fill: alpha(HUE.ink, 35)
+		})
+	] });
+}
+function Dim({ item }) {
+	const len = Math.hypot(item.x2 - item.x1, item.y2 - item.y1) || 1;
+	const nx = -(item.y2 - item.y1) / len;
+	const ny = (item.x2 - item.x1) / len;
+	return /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx("line", {
+			x1: item.x1,
+			y1: item.y1,
+			x2: item.x2,
+			y2: item.y2,
+			stroke: HUE.soft,
+			strokeWidth: STROKE.hair
+		}),
+		[[item.x1, item.y1], [item.x2, item.y2]].map(([x, y], i) => /* @__PURE__ */ jsx("line", {
+			x1: x + nx * 5,
+			y1: y + ny * 5,
+			x2: x - nx * 5,
+			y2: y - ny * 5,
+			stroke: HUE.soft,
+			strokeWidth: STROKE.hair
+		}, i)),
+		/* @__PURE__ */ jsx(FigText, {
+			x: (item.x1 + item.x2) / 2 + nx * 10,
+			y: (item.y1 + item.y2) / 2 + ny * 10 + 4,
+			size: "label",
+			anchor: "middle",
+			tone: "soft",
+			children: item.label
+		})
+	] });
+}
+function Angle({ item }) {
+	const r = item.r ?? 26;
+	const rad = (d) => d * Math.PI / 180;
+	const at = (d) => ({
+		x: item.x + r * Math.cos(rad(d)),
+		y: item.y - r * Math.sin(rad(d))
+	});
+	const a = at(item.from);
+	const b = at(item.to);
+	const sweep = item.to - item.from;
+	const large = Math.abs(sweep) > 180 ? 1 : 0;
+	const mid = (item.from + item.to) / 2;
+	return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("path", {
+		d: `M${a.x} ${a.y} A${r} ${r} 0 ${large} ${sweep > 0 ? 0 : 1} ${b.x} ${b.y}`,
+		fill: "none",
+		stroke: HUE.ink,
+		strokeWidth: STROKE.line
+	}), item.label ? /* @__PURE__ */ jsx(FigText, {
+		x: item.x + (r + 12) * Math.cos(rad(mid)),
+		y: item.y - (r + 12) * Math.sin(rad(mid)) + 4,
+		size: "label",
+		anchor: "middle",
+		children: rich(item.label)
+	}) : null] });
+}
+function PlainLine({ item }) {
+	return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+		x1: item.x1,
+		y1: item.y1,
+		x2: item.x2,
+		y2: item.y2,
+		stroke: item.dashed ? HUE.soft : HUE.ink,
+		strokeWidth: STROKE.line,
+		strokeDasharray: item.dashed ? "5 4" : void 0
+	}), item.label ? /* @__PURE__ */ jsx(FigText, {
+		x: item.x2 + 6,
+		y: item.y2 + 4,
+		size: "label",
+		tone: "soft",
+		children: rich(item.label)
+	}) : null] });
+}
+/**
+* What each item occupies on the page, mirroring where the functions above draw it and its label,
+* so the field marks can keep clear. Approximate by design: the aim is a clean gap, not a mask.
+*/
+function occupied(items) {
+	const out = [];
+	const seg = (a, b, r) => {
+		out.push({
+			kind: "seg",
+			a,
+			b,
+			r
+		});
+	};
+	for (const item of items) switch (item.type) {
+		case "field":
+			if (item.label) out.push(textBox(item.x + item.w - 6, item.y + 14, item.label, "end"));
+			break;
+		case "wire":
+			out.push({
+				kind: "circle",
+				x: item.x,
+				y: item.y,
+				r: 14
+			});
+			if (item.label) out.push(textBox(item.x, item.y + 26 + (item.rings ? item.rings * 15 : 0), item.label, "middle"));
+			break;
+		case "conductor": {
+			seg({
+				x: item.x1,
+				y: item.y1
+			}, {
+				x: item.x2,
+				y: item.y2
+			}, 8);
+			const len = Math.hypot(item.x2 - item.x1, item.y2 - item.y1) || 1;
+			const mid = {
+				x: (item.x1 + item.x2) / 2,
+				y: (item.y1 + item.y2) / 2
+			};
+			const along = {
+				x: (item.x2 - item.x1) / len,
+				y: (item.y2 - item.y1) / len
+			};
+			if (item.currentArrow !== false) out.push(textBox(mid.x + along.x * 22 - along.y * 14, mid.y + along.y * 22 + along.x * 14 + 4, "I", "middle"));
+			if (item.force) {
+				const f = facing(conductorForce(item, items));
+				if (f.kind === "plane") seg(mid, {
+					x: mid.x + f.dir.x * 50,
+					y: mid.y + f.dir.y * 50
+				}, 8);
+				else out.push({
+					kind: "circle",
+					x: mid.x + 16,
+					y: mid.y - 16,
+					r: 18
+				});
+			}
+			if (item.label) out.push(textBox(item.x2 + along.x * 8, item.y2 + along.y * 8 + 16, item.label, "middle"));
+			break;
+		}
+		case "magnet": {
+			const g = magnetGeometry(item);
+			seg(g.north, g.south, g.half + 2);
+			break;
+		}
+		case "bar": {
+			const { a, b, axis, length } = barEnds(item);
+			seg(a, b, 10);
+			if (item.label) out.push(textBox(item.x, axis.x ? item.y + 24 : item.y + length / 2 + 16, item.label, "middle"));
+			break;
+		}
+		case "coil":
+			if (item.view === "face") {
+				out.push({
+					kind: "circle",
+					x: item.x,
+					y: item.y,
+					r: item.r + 6
+				});
+				if (item.label) out.push(textBox(item.x, item.y + item.r + 18, item.label, "middle"));
+			} else out.push({
+				kind: "circle",
+				x: item.x,
+				y: item.y,
+				r: item.r + 10
+			});
+			break;
+		case "solenoid": {
+			const r = item.radius ?? 18;
+			out.push({
+				kind: "rect",
+				x: item.x - item.length / 2 - 18,
+				y: item.y - r - 26,
+				w: item.length + 36,
+				h: 2 * r + 30
+			});
+			if (item.label) out.push(textBox(item.x, item.y + r + 18, item.label, "middle"));
+			break;
+		}
+		case "charge": {
+			out.push({
+				kind: "circle",
+				x: item.x,
+				y: item.y,
+				r: 12
+			});
+			const v = pageDir(dirVec(item.v));
+			seg(item, {
+				x: item.x + v.x * 46,
+				y: item.y + v.y * 46
+			}, 15);
+			if (item.force !== false) {
+				const f = facing(chargeForce(item, items));
+				if (f.kind === "plane") seg(item, {
+					x: item.x + f.dir.x * 40,
+					y: item.y + f.dir.y * 40
+				}, 15);
+			}
+			if (item.label) {
+				const at = chargeLabelAt(item, items);
+				out.push(textBox(at.x, at.y, item.label, at.anchor));
+			}
+			break;
+		}
+		case "slab": {
+			const depth = 16;
+			const right = item.current === "right";
+			out.push({
+				kind: "rect",
+				x: item.x - 2,
+				y: item.y - depth - 2,
+				w: item.w + depth + 4,
+				h: item.h + depth + 4
+			});
+			seg({
+				x: right ? item.x - 40 : item.x + item.w + depth + 40,
+				y: item.y + item.h / 2
+			}, {
+				x: right ? item.x : item.x + item.w + depth,
+				y: item.y + item.h / 2
+			}, 10);
+			if (item.voltage) out.push({
+				kind: "rect",
+				x: right ? item.x + item.w + depth + 6 : item.x - 40,
+				y: item.y - depth,
+				w: 34,
+				h: item.h + depth
+			});
+			if (item.label) out.push(textBox(item.x + item.w / 2, item.y + item.h + 18, item.label, "middle"));
+			break;
+		}
+		case "rails": {
+			const rodX = item.x + item.length * (item.rodAt ?? .6);
+			seg({
+				x: item.x,
+				y: item.y
+			}, {
+				x: item.x + item.length,
+				y: item.y
+			}, 6);
+			seg({
+				x: item.x,
+				y: item.y + item.gap
+			}, {
+				x: item.x + item.length,
+				y: item.y + item.gap
+			}, 6);
+			seg({
+				x: item.x,
+				y: item.y
+			}, {
+				x: item.x,
+				y: item.y + item.gap
+			}, 5);
+			seg({
+				x: rodX,
+				y: item.y - 10
+			}, {
+				x: rodX,
+				y: item.y + item.gap + 10
+			}, 8);
+			const v = pageDir(dirVec(item.v));
+			const mid = {
+				x: rodX,
+				y: item.y + item.gap / 2
+			};
+			seg(mid, {
+				x: mid.x + v.x * 48,
+				y: mid.y + v.y * 48
+			}, 15);
+			if (item.label) out.push(textBox(rodX, item.y + item.gap + 24, item.label, "middle"));
+			break;
+		}
+		case "vector": {
+			const f = facing(dirVec(item.dir));
+			if (f.kind === "plane") {
+				const L = item.length ?? 44;
+				seg(item, {
+					x: item.x + f.dir.x * L,
+					y: item.y + f.dir.y * L
+				}, 15);
+			} else out.push({
+				kind: "circle",
+				x: item.x,
+				y: item.y,
+				r: 12
+			});
+			if (item.label) out.push(textBox(item.x + 14, item.y + 4, item.label));
+			break;
+		}
+		case "compass":
+			out.push({
+				kind: "circle",
+				x: item.x,
+				y: item.y,
+				r: 15
+			});
+			break;
+		case "transformer":
+			out.push({
+				kind: "rect",
+				x: item.x - 115,
+				y: item.y - 72,
+				w: 230,
+				h: 150
+			});
+			break;
+		case "relay":
+			out.push({
+				kind: "rect",
+				x: item.x - 110,
+				y: item.y - 60,
+				w: 220,
+				h: 130
+			});
+			break;
+		case "point":
+			out.push({
+				kind: "circle",
+				x: item.x,
+				y: item.y,
+				r: 5
+			});
+			out.push(textBox(item.x + 7, item.y - 6, item.label));
+			break;
+		case "text":
+			out.push(textBox(item.x, item.y, item.text, item.anchor ?? "start"));
+			break;
+		case "dim":
+			seg({
+				x: item.x1,
+				y: item.y1
+			}, {
+				x: item.x2,
+				y: item.y2
+			}, 5);
+			break;
+		case "line":
+			seg({
+				x: item.x1,
+				y: item.y1
+			}, {
+				x: item.x2,
+				y: item.y2
+			}, 4);
+			if (item.label) out.push(textBox(item.x2 + 6, item.y2 + 4, item.label));
+			break;
+		case "angle": if (item.label) {
+			const r = item.r ?? 26;
+			const m = (item.from + item.to) / 2 * Math.PI / 180;
+			out.push(textBox(item.x + (r + 12) * Math.cos(m), item.y - (r + 12) * Math.sin(m) + 4, item.label, "middle"));
+		}
+	}
+	return out;
+}
+/** Screen-reader text generated from the items when the author gives none. */
+function describe(scene) {
+	const parts = scene.items.flatMap((item) => {
+		switch (item.type) {
+			case "field": return [`a uniform magnetic field ${item.dir === "in" ? "into the page" : item.dir === "out" ? "out of the page" : `pointing ${item.dir}`}${item.label ? `, ${item.label}` : ""}`];
+			case "wire": return [`a long wire with current ${item.current === "in" ? "into" : "out of"} the page${item.label ? `, ${item.label}` : ""}`];
+			case "conductor": return [`a straight conductor${item.label ? `, ${item.label}` : ""}`];
+			case "magnet": return [`a bar magnet with its north pole to the ${item.north}`];
+			case "coil": return [item.view === "face" ? "a flat coil seen face on" : `a flat coil whose normal is at ${item.normalDeg ?? 30} degrees to the field`];
+			case "solenoid": return ["a solenoid"];
+			case "transformer": return [`a transformer with ${item.primaryTurns} primary turns and ${item.secondaryTurns} secondary turns`];
+			case "relay": return [`a relay, ${item.energised ? "energised with its contacts closed" : "switched off with its contacts open"}`];
+			case "charge": return [`a ${item.sign === "+" ? "positive" : "negative"} charge moving ${typeof item.v === "number" ? `at ${item.v} degrees` : item.v}`];
+			case "slab": return [`a slab carrying a current, with ${item.carriers} as carriers`];
+			case "rails": return [`a rod sliding ${item.v} along two rails`];
+			case "point": return [`point ${item.label}`];
+			default: return [];
+		}
+	});
+	return parts.length ? `Diagram: ${parts.join("; ")}.` : "Magnetism diagram.";
+}
+function MagnetismDiagram({ scene }) {
+	const [w, h] = scene.size ?? DEFAULT_SIZE;
+	const items = scene.items;
+	const paths = scene.fieldLines || items.some((i) => i.type === "compass") ? sceneCurrents(items) : [];
+	const lines = scene.fieldLines ? traceSceneLines(scene) : [];
+	const obstacles = occupied(items);
+	const layer = (types) => items.filter((i) => types.includes(i.type));
+	return /* @__PURE__ */ jsxs("figure", {
+		className: "lab-diagram",
+		"data-diagram": "magnetism",
+		children: [/* @__PURE__ */ jsxs(Figure, {
+			viewBox: [w, h],
+			domain: "physics",
+			label: scene.alt ?? describe(scene),
+			children: [
+				layer(["field"]).map((item, i) => /* @__PURE__ */ jsx(FieldRegion, {
+					item,
+					obstacles
+				}, `f${i}`)),
+				lines.map((line, i) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("path", {
+					d: pathOf(line.points),
+					fill: "none",
+					stroke: alpha(FIELD, 70),
+					strokeWidth: STROKE.line
+				}), line.arrows.map((k) => /* @__PURE__ */ jsx(Head, {
+					at: line.points[k],
+					dir: {
+						x: line.points[k + 1].x - line.points[k - 1].x,
+						y: line.points[k + 1].y - line.points[k - 1].y
+					},
+					color: FIELD
+				}, k))] }, `l${i}`)),
+				items.map((item, i) => {
+					switch (item.type) {
+						case "wire": return /* @__PURE__ */ jsx(Wire, { item }, i);
+						case "conductor": return /* @__PURE__ */ jsx(Conductor, {
+							item,
+							items
+						}, i);
+						case "magnet": return /* @__PURE__ */ jsx(Magnet, { item }, i);
+						case "coil": return /* @__PURE__ */ jsx(Coil, {
+							item,
+							items
+						}, i);
+						case "solenoid": return /* @__PURE__ */ jsx(Solenoid, { item }, i);
+						case "bar": return /* @__PURE__ */ jsx(Bar, {
+							item,
+							items
+						}, i);
+						case "transformer": return /* @__PURE__ */ jsx(Transformer, { item }, i);
+						case "relay": return /* @__PURE__ */ jsx(Relay, { item }, i);
+						case "charge": return /* @__PURE__ */ jsx(Charge, {
+							item,
+							items
+						}, i);
+						case "slab": return /* @__PURE__ */ jsx(Slab, {
+							item,
+							items
+						}, i);
+						case "rails": return /* @__PURE__ */ jsx(Rails, {
+							item,
+							items
+						}, i);
+						case "vector": return /* @__PURE__ */ jsx(Vector, { item }, i);
+						case "compass": return /* @__PURE__ */ jsx(Compass, {
+							item,
+							items,
+							paths
+						}, i);
+						case "dim": return /* @__PURE__ */ jsx(Dim, { item }, i);
+						case "angle": return /* @__PURE__ */ jsx(Angle, { item }, i);
+						case "line": return /* @__PURE__ */ jsx(PlainLine, { item }, i);
+						case "point": return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("circle", {
+							cx: item.x,
+							cy: item.y,
+							r: 3,
+							fill: HUE.ink
+						}), /* @__PURE__ */ jsx(FigText, {
+							x: item.x + 7,
+							y: item.y - 6,
+							size: "label",
+							children: item.label
+						})] }, i);
+						case "text": return /* @__PURE__ */ jsx(FigText, {
+							x: item.x,
+							y: item.y,
+							size: "label",
+							anchor: item.anchor ?? "start",
+							tone: item.tone ?? "ink",
+							children: rich(item.text)
+						}, i);
+						default: return null;
+					}
+				})
+			]
+		}), scene.caption ? /* @__PURE__ */ jsx("figcaption", {
+			className: "lab-diagram-caption",
+			children: richHtml(scene.caption)
+		}) : null]
+	});
+}
+
+//#endregion
+export { MagnetismDiagram };