@classytic/labs 0.1.0 → 0.2.0

package/dist/circuits/circuit-builder.mjs

@@ -3,14 +3,15 @@
 import { clamp, num } from "../core/util.mjs";
 import { Chip, Slider } from "../kit/controls.mjs";
 import { Callout, ControlBar, Field, LabFrame } from "../kit/frame.mjs";
-import { ResistorBox } from "../kit/diagram.mjs";
+import { BulbBox, CellBox, ResistorBox, SwitchBox } from "../kit/diagram.mjs";
 import { useEffect, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { Circle, Dot, Label, Polyline, Segment, Stage, useFrameLoop, useInView } from "@classytic/stage";
+import { Dot, Segment, Stage, useFrameLoop, useInView } from "@classytic/stage";
+import { solveDC } from "@classytic/stage/circuit";
 
 //#region src/circuits/circuit-builder.tsx
 /**
-* CircuitBuilder — a circuit you BUILD and PLAY with, not a walkthrough.
+* CircuitBuilder, a circuit you BUILD and PLAY with, not a walkthrough.
 *
 * A creator declares the components in a series loop (battery + any mix of
 * resistors, bulbs, switches); the learner flips switches, tunes the battery, and
@@ -22,7 +23,7 @@ import { Circle, Dot, Label, Polyline, Segment, Stage, useFrameLoop, useInView }
 * are primitives (accessible, themed); switches toggle via real buttons (keyboard-
 * operable) instead of canvas hit-testing.
 *
-* (Single series loop — the canonical "flashlight" circuit. Parallel topologies
+* (Single series loop, the canonical "flashlight" circuit. Parallel topologies
 * are a future extension of the same model.)
 */
 const DEFAULT = [{
@@ -96,7 +97,30 @@ function CircuitBuilder({ battery, components, title = "Build a circuit", height
 	}, [comps.map((c) => c.type + ("ohms" in c && c.ohms || "")).join("|")]);
 	const allClosed = comps.every((c, i) => c.type !== "switch" || closed[i]);
 	const totalR = comps.reduce((s, c) => s + ("ohms" in c ? c.ohms : 0), 0);
-	const current = allClosed ? emf / Math.max(totalR, .5) : 0;
+	const current = (() => {
+		if (!allClosed) return 0;
+		const elems = [{
+			kind: "V",
+			n1: 1,
+			n2: 0,
+			value: emf,
+			id: "b"
+		}];
+		let prev = 1;
+		let node = 2;
+		const withR = comps.filter((c) => "ohms" in c);
+		withR.forEach((c, idx) => {
+			const nb = idx === withR.length - 1 ? 0 : node++;
+			elems.push({
+				kind: "R",
+				n1: prev,
+				n2: nb,
+				value: Math.max(.5, c.ohms)
+			});
+			prev = nb;
+		});
+		return Math.abs(solveDC(elems).current["b"] ?? 0);
+	})();
 	useFrameLoop((f) => setT((v) => v + f.dtMs / 1e3), { running: current > 1e-4 && inView });
 	const n = comps.length;
 	const segW = (R - L) / n;
@@ -113,7 +137,7 @@ function CircuitBuilder({ battery, components, title = "Build a circuit", height
 			view: VIEW,
 			height,
 			preserveAspect: false,
-			ariaLabel: `Series circuit, ${emf}V battery, ${(current * 1e3).toFixed(0)} mA${allClosed ? "" : " — open, no current"}`,
+			ariaLabel: `Series circuit, ${emf}V battery, ${(current * 1e3).toFixed(0)} mA${allClosed ? "" : ", open, no current"}`,
 			children: [
 				/* @__PURE__ */ jsx(Segment, {
 					from: {
@@ -167,37 +191,15 @@ function CircuitBuilder({ battery, components, title = "Build a circuit", height
 					opacity: .5,
 					weight: 2.5
 				}),
-				/* @__PURE__ */ jsx(Segment, {
-					from: {
-						x: L - 5,
-						y: 35
-					},
-					to: {
-						x: 17,
-						y: 35
-					},
-					color: "var(--stage-accent-2)",
-					weight: 2.5
-				}),
-				/* @__PURE__ */ jsx(Segment, {
-					from: {
-						x: L - 3,
-						y: cyMid - 6
-					},
-					to: {
-						x: 15,
-						y: cyMid - 6
+				/* @__PURE__ */ jsx(CellBox, {
+					center: {
+						x: L,
+						y: cyMid
 					},
-					color: "var(--stage-accent-2)",
-					weight: 2.5
-				}),
-				/* @__PURE__ */ jsx(Label, {
-					x: 20,
-					y: cyMid,
-					text: `${emf.toFixed(0)} V`,
-					color: "var(--stage-accent-2)",
-					anchor: "start",
-					size: 12
+					half: 6,
+					orient: "v",
+					live: current > 1e-4,
+					label: `${emf.toFixed(0)} V`
 				}),
 				comps.map((c, i) => {
 					const cx = L + (i + .5) * segW;
@@ -230,6 +232,7 @@ function CircuitBuilder({ battery, components, title = "Build a circuit", height
 						opacity: .5,
 						weight: 2.5
 					})] });
+					const energized = current > 1e-4;
 					if (c.type === "resistor") return /* @__PURE__ */ jsxs("g", { children: [wires, /* @__PURE__ */ jsx(ResistorBox, {
 						center: {
 							x: cx,
@@ -237,108 +240,33 @@ function CircuitBuilder({ battery, components, title = "Build a circuit", height
 						},
 						w: 2 * half,
 						h: 7,
-						color: "var(--stage-accent)",
+						live: energized,
 						label: `${label} ${c.ohms}Ω`
 					})] }, i);
 					if (c.type === "bulb") {
 						const bright = clamp(current * 1.2, 0, 1) * (c.ohms / Math.max(totalR, 1));
-						const lit = bright > .02;
-						const rad = half * .95;
-						return /* @__PURE__ */ jsxs("g", { children: [
-							wires,
-							lit && /* @__PURE__ */ jsx(Circle, {
-								center: {
-									x: cx,
-									y: TOP
-								},
-								r: rad * 2,
-								color: "none",
-								fill: "var(--stage-warn)",
-								fillOpacity: .5 * bright,
-								weight: 0
-							}),
-							/* @__PURE__ */ jsx(Circle, {
-								center: {
-									x: cx,
-									y: TOP
-								},
-								r: rad,
-								color: lit ? "var(--stage-warn)" : "var(--stage-fg)",
-								fill: lit ? "var(--stage-warn)" : "var(--stage-bg)",
-								fillOpacity: lit ? .25 + .5 * bright : 1,
-								weight: 2
-							}),
-							/* @__PURE__ */ jsx(Polyline, {
-								points: [
-									{
-										x: cx - rad * .5,
-										y: TOP
-									},
-									{
-										x: cx - rad * .15,
-										y: TOP + rad * .4
-									},
-									{
-										x: cx + rad * .15,
-										y: TOP - rad * .4
-									},
-									{
-										x: cx + rad * .5,
-										y: TOP
-									}
-								],
-								color: lit ? "var(--stage-warn)" : "var(--stage-fg)",
-								weight: 1.5
-							}),
-							/* @__PURE__ */ jsx(Label, {
+						return /* @__PURE__ */ jsxs("g", { children: [wires, /* @__PURE__ */ jsx(BulbBox, {
+							center: {
 								x: cx,
-								y: TOP,
-								text: label,
-								color: "var(--stage-fg)",
-								size: 11,
-								dy: -16
-							})
-						] }, i);
-					}
-					const open = !closed[i];
-					return /* @__PURE__ */ jsxs("g", { children: [
-						wires,
-						/* @__PURE__ */ jsx(Dot, {
-							x: cx - half,
-							y: TOP,
-							r: 3.5,
-							color: "var(--stage-good)"
-						}),
-						/* @__PURE__ */ jsx(Dot, {
-							x: cx + half,
-							y: TOP,
-							r: 3.5,
-							color: "var(--stage-good)"
-						}),
-						/* @__PURE__ */ jsx(Segment, {
-							from: {
-								x: cx - half,
 								y: TOP
 							},
-							to: open ? {
-								x: cx + half * .55,
-								y: TOP + half * .9
-							} : {
-								x: cx + half,
-								y: TOP
-							},
-							color: open ? "var(--stage-warn)" : "var(--stage-good)",
-							weight: 2.5
-						}),
-						/* @__PURE__ */ jsx(Label, {
+							half,
+							live: energized,
+							brightness: bright,
+							label
+						})] }, i);
+					}
+					const open = !closed[i];
+					return /* @__PURE__ */ jsxs("g", { children: [wires, /* @__PURE__ */ jsx(SwitchBox, {
+						center: {
 							x: cx,
-							y: TOP,
-							text: `${label} (${open ? "open" : "closed"})`,
-							color: "var(--stage-fg)",
-							size: 11,
-							dy: -16
-						})
-					] }, i);
+							y: TOP
+						},
+						half,
+						live: energized && !open,
+						closed: !open,
+						label
+					})] }, i);
 				}),
 				current > 1e-4 && Array.from({ length: N_DOTS }, (_, k) => {
 					const p = onPerimeter((t * speed + k / N_DOTS) % 1);
@@ -385,7 +313,7 @@ function CircuitBuilder({ battery, components, title = "Build a circuit", height
 				fontVariantNumeric: "tabular-nums"
 			},
 			children: [
-				/* @__PURE__ */ jsx("span", { children: allClosed ? "closed" : "open — no current" }),
+				/* @__PURE__ */ jsx("span", { children: allClosed ? "closed" : "open, no current" }),
 				/* @__PURE__ */ jsxs("span", { children: [
 					"R ",
 					totalR.toFixed(0),
@@ -401,7 +329,7 @@ function CircuitBuilder({ battery, components, title = "Build a circuit", height
 	});
 	return /* @__PURE__ */ jsx(LabFrame, {
 		title,
-		prompt: switches.length ? "Flip a switch to open/close it. Tune the battery and watch the current — and the bulb." : "Tune the battery and watch the current flow.",
+		prompt: switches.length ? "Flip a switch to open/close it. Tune the battery and watch the current, and the bulb." : "Tune the battery and watch the current flow.",
 		aside,
 		controls,
 		children: figure

package/dist/circuits/circuit-lab.mjs

@@ -4,14 +4,15 @@ import { clamp, num } from "../core/util.mjs";
 import { Tex as Tex$1 } from "../core/tex.mjs";
 import { Chip, Slider } from "../kit/controls.mjs";
 import { Callout, ControlBar, Field, LabFrame } from "../kit/frame.mjs";
-import { ResistorBox } from "../kit/diagram.mjs";
+import { CellBox, ResistorBox } from "../kit/diagram.mjs";
 import { useEffect, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { Label, Segment, Stage } from "@classytic/stage";
+import { Segment, Stage } from "@classytic/stage";
+import { solveDC } from "@classytic/stage/circuit";
 
 //#region src/circuits/circuit-lab.tsx
 /**
-* CircuitLab — two resistors driven by a battery, in series or parallel, with the
+* CircuitLab, two resistors driven by a battery, in series or parallel, with the
 * voltage- and current-divider rules made visible. Drag V, R₁, R₂; flip series
 * ↔ parallel; step through: total resistance → total current → how it divides.
 *
@@ -58,12 +59,53 @@ function CircuitLab({ voltage, r1, r2, mode: modeInit = "series", height = 320 }
 	useEffect(() => {
 		setParallel(modeInit === "parallel");
 	}, [modeInit]);
-	const Rtot = parallel ? R1 * R2 / (R1 + R2) : R1 + R2;
-	const Itot = V / Rtot;
-	const v1 = parallel ? V : V * R1 / (R1 + R2);
-	const v2 = parallel ? V : V * R2 / (R1 + R2);
-	const i1 = parallel ? V / R1 : Itot;
-	const i2 = parallel ? V / R2 : Itot;
+	const sol = solveDC(parallel ? [
+		{
+			kind: "V",
+			n1: 1,
+			n2: 0,
+			value: V,
+			id: "b"
+		},
+		{
+			kind: "R",
+			n1: 1,
+			n2: 0,
+			value: R1
+		},
+		{
+			kind: "R",
+			n1: 1,
+			n2: 0,
+			value: R2
+		}
+	] : [
+		{
+			kind: "V",
+			n1: 1,
+			n2: 0,
+			value: V,
+			id: "b"
+		},
+		{
+			kind: "R",
+			n1: 1,
+			n2: 2,
+			value: R1
+		},
+		{
+			kind: "R",
+			n1: 2,
+			n2: 0,
+			value: R2
+		}
+	]);
+	const Itot = Math.abs(sol.current["b"] ?? 0);
+	const Rtot = Itot > 1e-12 ? V / Itot : Infinity;
+	const v1 = parallel ? V : (sol.nodeV[1] ?? 0) - (sol.nodeV[2] ?? 0);
+	const v2 = parallel ? V : sol.nodeV[2] ?? 0;
+	const i1 = v1 / R1;
+	const i2 = v2 / R2;
 	const steps = parallel ? STEPS_PARALLEL : STEPS_SERIES;
 	const clampedStep = Math.min(step, steps.length - 1);
 	const W = (a, b, key) => /* @__PURE__ */ jsx(Segment, {
@@ -94,37 +136,15 @@ function CircuitLab({ voltage, r1, r2, mode: modeInit = "series", height = 320 }
 				x: BX,
 				y: BOT
 			}, "b-dn"),
-			/* @__PURE__ */ jsx(Segment, {
-				from: {
-					x: BX - 5,
-					y: 35
-				},
-				to: {
-					x: 14,
-					y: 35
-				},
-				color: "var(--stage-accent-2)",
-				weight: 2.5
-			}),
-			/* @__PURE__ */ jsx(Segment, {
-				from: {
-					x: BX - 3,
-					y: cyMid - 6
-				},
-				to: {
-					x: 12,
-					y: cyMid - 6
+			/* @__PURE__ */ jsx(CellBox, {
+				center: {
+					x: BX,
+					y: cyMid
 				},
-				color: "var(--stage-accent-2)",
-				weight: 2.5
-			}),
-			/* @__PURE__ */ jsx(Label, {
-				x: 17,
-				y: cyMid,
-				text: `${V.toFixed(0)} V`,
-				color: "var(--stage-accent-2)",
-				anchor: "start",
-				size: 12
+				half: 6,
+				orient: "v",
+				live: true,
+				label: `${V.toFixed(0)} V`
 			}),
 			!parallel ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				W({
@@ -388,7 +408,7 @@ function CircuitLab({ voltage, r1, r2, mode: modeInit = "series", height = 320 }
 		children: parallel ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Tex$1, { tex: `\\frac{1}{R}=\\frac{1}{R_1}+\\frac{1}{R_2}\\Rightarrow R=${Rtot.toFixed(1)}\\,\\Omega` }), /* @__PURE__ */ jsx(Tex$1, { tex: `I_1=I\\cdot\\frac{R_2}{R_1+R_2}=${(i1 * 1e3).toFixed(1)}\\,\\text{mA}` })] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Tex$1, { tex: `R=R_1+R_2=${Rtot.toFixed(0)}\\,\\Omega,\\quad I=\\frac{V}{R}=${(Itot * 1e3).toFixed(1)}\\,\\text{mA}` }), /* @__PURE__ */ jsx(Tex$1, { tex: `V_1=V\\cdot\\frac{R_1}{R_1+R_2}=${v1.toFixed(2)}\\,\\text{V}` })] })
 	})] });
 	return /* @__PURE__ */ jsx(LabFrame, {
-		title: parallel ? "Parallel — current divides" : "Series — voltage divides",
+		title: parallel ? "Parallel, current divides" : "Series, voltage divides",
 		prompt: steps[clampedStep],
 		aside,
 		controls,

package/dist/circuits/cmos-gate/index.d.mts

@@ -0,0 +1 @@
+import { CmosInverterLab, CmosInverterProps, CmosNandLab, CmosNandProps, CmosNorLab, CmosNorProps, RNmosNotLab, RNmosNotProps } from "./preset.mjs";

package/dist/circuits/cmos-gate/preset.d.mts

@@ -0,0 +1,75 @@
+import { LabAskSpec } from "../../kit/ask.mjs";
+import { ReactNode } from "react";
+
+//#region src/circuits/cmos-gate/preset.d.ts
+interface CmosInverterProps {
+  vdd?: number;
+  vth?: number;
+  show?: 'both' | 'circuit' | 'graph';
+  title?: string;
+  prompt?: string;
+  ask?: LabAskSpec;
+  activity?: string;
+}
+declare function CmosInverterLab({
+  vdd,
+  vth,
+  show,
+  title,
+  prompt,
+  ask,
+  activity
+}?: CmosInverterProps): ReactNode;
+interface RNmosNotProps {
+  vdd?: number;
+  vth?: number;
+  /** pull-up resistance (Ω). */
+  rpull?: number;
+  title?: string;
+  prompt?: string;
+  ask?: LabAskSpec;
+  activity?: string;
+}
+declare function RNmosNotLab({
+  vdd,
+  vth,
+  rpull,
+  title,
+  prompt,
+  ask,
+  activity
+}?: RNmosNotProps): ReactNode;
+interface CmosNandProps {
+  vdd?: number;
+  vth?: number;
+  title?: string;
+  prompt?: string;
+  ask?: LabAskSpec;
+  activity?: string;
+}
+declare function CmosNandLab({
+  vdd,
+  vth,
+  title,
+  prompt,
+  ask,
+  activity
+}?: CmosNandProps): ReactNode;
+interface CmosNorProps {
+  vdd?: number;
+  vth?: number;
+  title?: string;
+  prompt?: string;
+  ask?: LabAskSpec;
+  activity?: string;
+}
+declare function CmosNorLab({
+  vdd,
+  vth,
+  title,
+  prompt,
+  ask,
+  activity
+}?: CmosNorProps): ReactNode;
+//#endregion
+export { CmosInverterLab, CmosInverterProps, CmosNandLab, CmosNandProps, CmosNorLab, CmosNorProps, RNmosNotLab, RNmosNotProps };