@classytic/labs 0.1.0

package/dist/chem/battery.mjs

@@ -0,0 +1,311 @@
+'use client';
+
+import { clamp, num } from "../core/util.mjs";
+import { Tex as Tex$1 } from "../core/tex.mjs";
+import { Slider } from "../kit/controls.mjs";
+import { Callout, ControlBar, Field, LabFrame } from "../kit/frame.mjs";
+import { ResistorBox } from "../kit/diagram.mjs";
+import { PlayWrap, usePlayGate } from "../kit/play.mjs";
+import { useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Dot, Label, Polygon, Segment, Stage, useFrameLoop } from "@classytic/stage";
+
+//#region src/chem/battery.tsx
+/**
+* Battery — a galvanic (voltaic) cell. Two half-cells: at the anode a metal is
+* oxidized and releases electrons; they flow through the external wire to the
+* cathode, where ions are reduced. Watch the electrons stream, see the
+* half-reactions and the cell EMF.
+*
+* Now on the @classytic/stage engine (SVG schematic + flowing electrons,
+* accessible, themed).
+*/
+const VIEW = {
+	xMin: 0,
+	xMax: 100,
+	yMin: 0,
+	yMax: 60
+};
+const LX = 26, RX = 74, BBOT = 6, BTOP = 30, ETOP = 44, WIRE = 53;
+function rect(cx, halfW, y0, y1) {
+	return [
+		{
+			x: cx - halfW,
+			y: y0
+		},
+		{
+			x: cx + halfW,
+			y: y0
+		},
+		{
+			x: cx + halfW,
+			y: y1
+		},
+		{
+			x: cx - halfW,
+			y: y1
+		}
+	];
+}
+/** Electron position along the external wire path at fraction u∈[0,1). */
+function onWire(u) {
+	const pts = [
+		{
+			x: LX,
+			y: ETOP
+		},
+		{
+			x: LX,
+			y: WIRE
+		},
+		{
+			x: RX,
+			y: WIRE
+		},
+		{
+			x: RX,
+			y: ETOP
+		}
+	];
+	const segLen = (p, q) => Math.hypot(q.x - p.x, q.y - p.y);
+	let total = 0;
+	for (let s = 0; s < 3; s++) total += segLen(pts[s], pts[s + 1]);
+	let d = u * total;
+	for (let s = 0; s < 3; s++) {
+		const p = pts[s], q = pts[s + 1], ln = segLen(p, q);
+		if (d <= ln) {
+			const k = d / ln;
+			return {
+				x: p.x + (q.x - p.x) * k,
+				y: p.y + (q.y - p.y) * k
+			};
+		}
+		d -= ln;
+	}
+	return pts[3];
+}
+function Battery({ emf, title = "Galvanic cell: electrons on the move", height = 320 } = {}) {
+	const [E, setE] = useState(clamp(num(emf, 1.1), .1, 5));
+	const [load, setLoad] = useState(10);
+	const gate = usePlayGate();
+	const [t, setT] = useState(0);
+	useEffect(() => {
+		setE(clamp(num(emf, 1.1), .1, 5));
+	}, [emf]);
+	const current = E / load;
+	useFrameLoop((f) => setT((v) => v + f.dtMs / 1e3), { running: gate.running });
+	const N_E = 6;
+	const speed = clamp(current * .12, .02, .4);
+	const figure = /* @__PURE__ */ jsx(PlayWrap, {
+		gate,
+		children: /* @__PURE__ */ jsxs(Stage, {
+			view: VIEW,
+			height,
+			preserveAspect: false,
+			ariaLabel: `Galvanic cell, ${E.toFixed(2)} V, ${(current * 1e3).toFixed(0)} mA`,
+			children: [
+				/* @__PURE__ */ jsx(Polygon, {
+					points: rect(LX, 16, BBOT, BTOP),
+					color: "var(--stage-fg)",
+					fill: "var(--stage-accent)",
+					fillOpacity: .16,
+					weight: 1.5
+				}),
+				/* @__PURE__ */ jsx(Polygon, {
+					points: rect(RX, 16, BBOT, BTOP),
+					color: "var(--stage-fg)",
+					fill: "var(--stage-accent-2)",
+					fillOpacity: .16,
+					weight: 1.5
+				}),
+				/* @__PURE__ */ jsx(Segment, {
+					from: {
+						x: LX - 16,
+						y: BTOP - 1.2
+					},
+					to: {
+						x: 42,
+						y: BTOP - 1.2
+					},
+					color: "var(--stage-accent)",
+					opacity: .7,
+					weight: 1.5
+				}),
+				/* @__PURE__ */ jsx(Segment, {
+					from: {
+						x: RX - 16,
+						y: BTOP - 1.2
+					},
+					to: {
+						x: 90,
+						y: BTOP - 1.2
+					},
+					color: "var(--stage-accent-2)",
+					opacity: .7,
+					weight: 1.5
+				}),
+				/* @__PURE__ */ jsx(Label, {
+					x: LX,
+					y: BBOT,
+					text: "Zn²⁺",
+					color: "var(--stage-fg)",
+					size: 11,
+					dy: -8
+				}),
+				/* @__PURE__ */ jsx(Label, {
+					x: RX,
+					y: BBOT,
+					text: "Cu²⁺",
+					color: "var(--stage-fg)",
+					size: 11,
+					dy: -8
+				}),
+				/* @__PURE__ */ jsx(Polygon, {
+					points: rect(LX, 1.4, 16, ETOP),
+					color: "none",
+					fill: "var(--stage-fg)",
+					fillOpacity: .6,
+					weight: 0
+				}),
+				/* @__PURE__ */ jsx(Polygon, {
+					points: rect(RX, 1.4, 16, ETOP),
+					color: "none",
+					fill: "var(--stage-fg)",
+					fillOpacity: .6,
+					weight: 0
+				}),
+				/* @__PURE__ */ jsx(Label, {
+					x: LX,
+					y: ETOP,
+					text: "Zn (–) anode",
+					color: "var(--stage-fg)",
+					size: 11,
+					dy: -22
+				}),
+				/* @__PURE__ */ jsx(Label, {
+					x: RX,
+					y: ETOP,
+					text: "Cu (+) cathode",
+					color: "var(--stage-fg)",
+					size: 11,
+					dy: -22
+				}),
+				/* @__PURE__ */ jsx(Segment, {
+					from: {
+						x: LX,
+						y: ETOP
+					},
+					to: {
+						x: LX,
+						y: WIRE
+					},
+					color: "var(--stage-fg)",
+					opacity: .5,
+					weight: 2
+				}),
+				/* @__PURE__ */ jsx(Segment, {
+					from: {
+						x: LX,
+						y: WIRE
+					},
+					to: {
+						x: RX,
+						y: WIRE
+					},
+					color: "var(--stage-fg)",
+					opacity: .5,
+					weight: 2
+				}),
+				/* @__PURE__ */ jsx(Segment, {
+					from: {
+						x: RX,
+						y: WIRE
+					},
+					to: {
+						x: RX,
+						y: ETOP
+					},
+					color: "var(--stage-fg)",
+					opacity: .5,
+					weight: 2
+				}),
+				/* @__PURE__ */ jsx(ResistorBox, {
+					center: {
+						x: 50,
+						y: WIRE
+					},
+					w: 14,
+					h: 6,
+					color: "var(--stage-good)",
+					label: `${load}Ω`
+				}),
+				/* @__PURE__ */ jsx(Label, {
+					x: 50,
+					y: WIRE,
+					text: "e⁻ →",
+					color: "var(--stage-accent)",
+					size: 12,
+					dy: -16
+				}),
+				Array.from({ length: N_E }, (_, k) => {
+					const p = onWire((t * speed + k / N_E) % 1);
+					return /* @__PURE__ */ jsx(Dot, {
+						x: p.x,
+						y: p.y,
+						r: 3.2,
+						color: "var(--stage-accent)"
+					}, `e-${k}`);
+				})
+			]
+		})
+	});
+	const controls = /* @__PURE__ */ jsx(ControlBar, { children: /* @__PURE__ */ jsx(Field, {
+		label: "load",
+		value: `${load} Ω`,
+		children: /* @__PURE__ */ jsx(Slider, {
+			value: load,
+			min: 2,
+			max: 50,
+			step: 1,
+			onChange: (v) => setLoad(Math.round(v)),
+			ariaLabel: "external load",
+			style: { width: 120 }
+		})
+	}) });
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt: "Electrons leave the zinc anode, do work in the load, and arrive at the copper cathode.",
+		aside: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Callout, {
+			tone: "result",
+			children: /* @__PURE__ */ jsxs("span", {
+				style: {
+					display: "grid",
+					gap: 4,
+					fontVariantNumeric: "tabular-nums"
+				},
+				children: [/* @__PURE__ */ jsxs("span", { children: [
+					"EMF ",
+					E.toFixed(2),
+					" V"
+				] }), /* @__PURE__ */ jsxs("span", { children: [
+					"I ",
+					(current * 1e3).toFixed(0),
+					" mA"
+				] })]
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "grid",
+				gap: 6,
+				padding: "8px 2px 0",
+				fontSize: 14
+			},
+			children: [/* @__PURE__ */ jsx(Tex$1, { tex: "\\text{anode: } Zn \\to Zn^{2+} + 2e^-" }), /* @__PURE__ */ jsx(Tex$1, { tex: "\\text{cathode: } Cu^{2+} + 2e^- \\to Cu" })]
+		})] }),
+		controls,
+		children: figure
+	});
+}
+
+//#endregion
+export { Battery };

package/dist/chem/bohr-atom.d.mts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+
+//#region src/chem/bohr-atom.d.ts
+interface BohrAtomProps {
+  /** Atomic number Z (protons). 1–20. Default 6 (carbon). */
+  protons?: number | string;
+  title?: string;
+  height?: number;
+}
+declare function BohrAtom({
+  protons,
+  title,
+  height
+}?: BohrAtomProps): ReactNode;
+//#endregion
+export { BohrAtom, BohrAtomProps };

package/dist/chem/bohr-atom.mjs

@@ -0,0 +1,212 @@
+'use client';
+
+import { clamp, num } from "../core/util.mjs";
+import { Slider } from "../kit/controls.mjs";
+import { Callout, ControlBar, Field, LabFrame } from "../kit/frame.mjs";
+import { PlayWrap, usePlayGate } from "../kit/play.mjs";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Circle, Dot, Label, Stage, useFrameLoop } from "@classytic/stage";
+
+//#region src/chem/bohr-atom.tsx
+/**
+* BohrAtom — the classic shell model of an atom, animated.
+*
+* Nucleus (Z protons) ringed by electron shells filled 2, 8, 8, 18…; electrons
+* orbit at a steady clip via the engine clock. Drag the proton count to walk the
+* first 20 elements and watch shells fill and close.
+*
+* Now on the @classytic/stage engine (SVG, accessible, themed) — shells are
+* Circles, electrons are Dots, the nucleus is a labelled Circle.
+*/
+const SYMBOLS = [
+	"",
+	"H",
+	"He",
+	"Li",
+	"Be",
+	"B",
+	"C",
+	"N",
+	"O",
+	"F",
+	"Ne",
+	"Na",
+	"Mg",
+	"Al",
+	"Si",
+	"P",
+	"S",
+	"Cl",
+	"Ar",
+	"K",
+	"Ca"
+];
+const SHELL_CAP = [
+	2,
+	8,
+	8,
+	18
+];
+const NUCLEONS = [
+	{
+		dx: 0,
+		dy: 0,
+		p: true
+	},
+	{
+		dx: .6,
+		dy: .25,
+		p: false
+	},
+	{
+		dx: -.55,
+		dy: .35,
+		p: true
+	},
+	{
+		dx: .3,
+		dy: -.55,
+		p: false
+	},
+	{
+		dx: -.4,
+		dy: -.5,
+		p: true
+	},
+	{
+		dx: .7,
+		dy: -.25,
+		p: true
+	},
+	{
+		dx: -.7,
+		dy: -.1,
+		p: false
+	},
+	{
+		dx: .1,
+		dy: .6,
+		p: false
+	}
+];
+function shellsFor(z) {
+	const shells = [];
+	let left = z;
+	for (const cap of SHELL_CAP) {
+		if (left <= 0) break;
+		const n = Math.min(cap, left);
+		shells.push(n);
+		left -= n;
+	}
+	return shells;
+}
+const VIEW = {
+	xMin: -10,
+	xMax: 10,
+	yMin: -10,
+	yMax: 10
+};
+function BohrAtom({ protons, title = "Bohr model of the atom", height = 340 } = {}) {
+	const [z, setZ] = useState(clamp(Math.round(num(protons, 6)), 1, 20));
+	const [spin, setSpin] = useState(0);
+	const gate = usePlayGate();
+	useEffect(() => {
+		setZ(clamp(Math.round(num(protons, 6)), 1, 20));
+	}, [protons]);
+	useFrameLoop((f) => setSpin((s) => s + f.dtMs / 1e3 * Math.PI), { running: gate.running });
+	const shells = shellsFor(z);
+	const baseR = 2.6;
+	const gap = shells.length > 1 ? (9 - baseR) / (shells.length - 1) : 0;
+	const figure = /* @__PURE__ */ jsx(PlayWrap, {
+		gate,
+		children: /* @__PURE__ */ jsxs(Stage, {
+			view: VIEW,
+			height,
+			ariaLabel: `Bohr model of ${SYMBOLS[z] ?? z} (Z=${z}), configuration ${shells.join(", ")}`,
+			children: [
+				shells.map((_count, i) => /* @__PURE__ */ jsx(Circle, {
+					center: {
+						x: 0,
+						y: 0
+					},
+					r: shells.length === 1 ? 4.800000000000001 : baseR + i * gap,
+					color: "var(--stage-fg)",
+					opacity: .25,
+					weight: 1,
+					fill: "none"
+				}, `s-${i}`)),
+				shells.flatMap((count, i) => {
+					const r = shells.length === 1 ? 4.800000000000001 : baseR + i * gap;
+					const dir = i % 2 === 0 ? 1 : -1;
+					const speed = .6 / (i + 1);
+					return Array.from({ length: count }, (_, e) => {
+						const a = e / count * Math.PI * 2 + dir * spin * speed;
+						return /* @__PURE__ */ jsx(Dot, {
+							x: r * Math.cos(a),
+							y: r * Math.sin(a),
+							r: 4,
+							color: "var(--stage-accent)"
+						}, `e-${i}-${e}`);
+					});
+				}),
+				NUCLEONS.map((nuc, i) => /* @__PURE__ */ jsx(Circle, {
+					center: {
+						x: nuc.dx,
+						y: nuc.dy
+					},
+					r: .62,
+					color: "none",
+					fill: nuc.p ? "var(--stage-warn)" : "var(--stage-muted)",
+					fillOpacity: 1,
+					weight: 0
+				}, `nuc-${i}`)),
+				/* @__PURE__ */ jsx(Label, {
+					x: 0,
+					y: 0,
+					text: SYMBOLS[z] ?? String(z),
+					color: "var(--stage-fg)",
+					size: 15,
+					weight: 700
+				})
+			]
+		})
+	});
+	const controls = /* @__PURE__ */ jsx(ControlBar, { children: /* @__PURE__ */ jsx(Field, {
+		label: "protons (Z)",
+		value: z,
+		children: /* @__PURE__ */ jsx(Slider, {
+			value: z,
+			min: 1,
+			max: 20,
+			step: 1,
+			onChange: (v) => setZ(Math.round(v)),
+			ariaLabel: "proton count",
+			style: { width: 130 }
+		})
+	}) });
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt: "Drag the proton count to walk the first 20 elements — watch the shells fill (2, 8, 8, …).",
+		aside: /* @__PURE__ */ jsx(Callout, {
+			tone: "result",
+			children: /* @__PURE__ */ jsxs("span", {
+				style: {
+					display: "grid",
+					gap: 4,
+					fontVariantNumeric: "tabular-nums"
+				},
+				children: [
+					/* @__PURE__ */ jsxs("span", { children: ["element ", SYMBOLS[z] ?? "—"] }),
+					/* @__PURE__ */ jsxs("span", { children: ["Z ", z] }),
+					/* @__PURE__ */ jsxs("span", { children: ["config ", shells.join(", ")] })
+				]
+			})
+		}),
+		controls,
+		children: figure
+	});
+}
+
+//#endregion
+export { BohrAtom };

package/dist/chem/diffusion/asset.mjs

@@ -0,0 +1,76 @@
+'use client';
+
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCoords } from "@classytic/stage";
+
+//#region src/chem/diffusion/asset.tsx
+const numOr = (v, d) => typeof v === "number" && Number.isFinite(v) ? v : d;
+const arr = (v) => Array.isArray(v) ? v : [];
+const A = "var(--stage-accent)";
+const B = "var(--stage-danger, #e03131)";
+function resolver({ sim, params }) {
+	return {
+		kind: "asset-geom",
+		parts: {},
+		meta: {
+			px: arr(sim?.px),
+			py: arr(sim?.py),
+			group: arr(sim?.group),
+			w: numOr(params?.w, 12),
+			h: numOr(params?.h, 6),
+			mixed: numOr(sim?.mixed, 0)
+		}
+	};
+}
+function Component({ geom }) {
+	const c = useCoords();
+	const m = geom.meta ?? {};
+	const P = (x, y) => c.toPx(x, y);
+	const [bx0, by0] = P(0, 0);
+	const [bx1, by1] = P(m.w, m.h);
+	const x = Math.min(bx0, bx1), y = Math.min(by0, by1);
+	const w = Math.abs(bx1 - bx0), h = Math.abs(by1 - by0);
+	const pct = Math.round(m.mixed * 100);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("rect", {
+			x,
+			y,
+			width: w,
+			height: h,
+			rx: 8,
+			fill: "color-mix(in oklab, var(--stage-accent) 4%, var(--stage-bg))",
+			stroke: "var(--stage-grid)",
+			strokeWidth: 1.5
+		}),
+		m.px.map((_, i) => {
+			const [cx, cy] = P(m.px[i], m.py[i]);
+			return /* @__PURE__ */ jsx("circle", {
+				cx,
+				cy,
+				r: 4.5,
+				fill: m.group[i] === 0 ? A : B,
+				opacity: .92
+			}, i);
+		}),
+		/* @__PURE__ */ jsxs("text", {
+			x: x + 12,
+			y: y + 20,
+			fontSize: 13,
+			fontWeight: 700,
+			fill: "var(--stage-fg)",
+			style: { fontVariantNumeric: "tabular-nums" },
+			children: [
+				"mixed: ",
+				pct,
+				"%"
+			]
+		})
+	] });
+}
+const DIFFUSION_ASSET = {
+	resolver,
+	Component
+};
+
+//#endregion
+export { DIFFUSION_ASSET };

package/dist/chem/diffusion/index.d.mts

@@ -0,0 +1 @@
+import { DiffusionLab, DiffusionProps } from "./preset.mjs";

package/dist/chem/diffusion/preset.d.mts

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+
+//#region src/chem/diffusion/preset.d.ts
+interface DiffusionProps {
+  title?: string;
+  prompt?: string;
+  objectives?: string[];
+}
+declare function DiffusionLab({
+  title,
+  prompt,
+  objectives
+}?: DiffusionProps): ReactNode;
+//#endregion
+export { DiffusionLab, DiffusionProps };