@classytic/labs 0.1.0

package/dist/physics/magnetism/preset.mjs

@@ -0,0 +1,334 @@
+'use client';
+
+import { Chip } from "../../kit/controls.mjs";
+import { ControlBar, Field, LabFrame } from "../../kit/frame.mjs";
+import { ChallengeCard, useChallenge, useCheckpoint } from "../../kit/pedagogy.mjs";
+import { useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { MovableDot, Stage, useCoords } from "@classytic/stage";
+import { barMagnet, fieldAt, fieldLines } from "@classytic/stage/field";
+
+//#region src/physics/magnetism/preset.tsx
+/**
+* MagnetismLab — a magnetic field you can SEE and probe (the "magnetism visualized"
+* gap). Drag a bar magnet (and its ends to rotate), or switch to a current-carrying
+* wire, and the FIELD LINES retrace live on the @classytic/stage `field` kernel —
+* radial dipole lines N→S for the magnet, circular loops for the wire. Drag the
+* compass anywhere and its needle snaps to the field there. Interactive, not a
+* timed sim (no Play needed): the field is recomputed on every drag.
+*/
+const VIEW = {
+	xMin: -6.5,
+	xMax: 6.5,
+	yMin: -4.2,
+	yMax: 4.2
+};
+const MAGNETISM_CHALLENGE = [{
+	id: "lines",
+	prompt: "Outside a bar magnet, the field lines point…",
+	choices: [{
+		value: "ns",
+		label: "from N to S"
+	}, {
+		value: "sn",
+		label: "from S to N"
+	}],
+	answer: "ns",
+	explain: "Outside the magnet field lines run N → S (they close back through the magnet, S → N, inside)."
+}, {
+	id: "compass",
+	prompt: "Drop the compass into the field. Its needle…",
+	choices: [
+		{
+			value: "along",
+			label: "lines up along the field there"
+		},
+		{
+			value: "perp",
+			label: "sits across the field"
+		},
+		{
+			value: "north",
+			label: "always points to true N"
+		}
+	],
+	answer: "along",
+	explain: "A compass needle aligns to the LOCAL field, tracing the field line wherever you drop it."
+}];
+const RED = "var(--stage-danger, #e03131)";
+const BLUE = "var(--stage-accent, #3b82f6)";
+const sub = (a, b) => ({
+	x: a.x - b.x,
+	y: a.y - b.y
+});
+const mag = (v) => Math.hypot(v.x, v.y);
+/** All the visuals (field lines + magnet/wire + compass needle), projected to px. */
+function FieldFigure({ sources, lines, mode, center, northOff, compass, current }) {
+	const c = useCoords();
+	const P = (v) => c.toPx(v.x, v.y);
+	const arrow = (a, b, key, color) => {
+		const [ax, ay] = P(a), [bx, by] = P(b);
+		const ang = Math.atan2(by - ay, bx - ax);
+		const s = 6;
+		const p1 = [bx - s * Math.cos(ang - .5), by - s * Math.sin(ang - .5)];
+		const p2 = [bx - s * Math.cos(ang + .5), by - s * Math.sin(ang + .5)];
+		return /* @__PURE__ */ jsx("polygon", {
+			points: `${bx},${by} ${p1[0]},${p1[1]} ${p2[0]},${p2[1]}`,
+			fill: color,
+			opacity: .65
+		}, key);
+	};
+	const lineColor = "color-mix(in oklab, var(--stage-accent) 70%, transparent)";
+	const nPole = {
+		x: center.x + northOff.x,
+		y: center.y + northOff.y
+	};
+	const sPole = {
+		x: center.x - northOff.x,
+		y: center.y - northOff.y
+	};
+	const [cnx, cny] = P(nPole);
+	const [csx, csy] = P(sPole);
+	const [ccx, ccy] = P(center);
+	const fv = fieldAt(sources, compass);
+	const fm = mag(fv) || 1;
+	const ndir = {
+		x: fv.x / fm,
+		y: fv.y / fm
+	};
+	const nTip = {
+		x: compass.x + ndir.x * .85,
+		y: compass.y + ndir.y * .85
+	};
+	const nTail = {
+		x: compass.x - ndir.x * .85,
+		y: compass.y - ndir.y * .85
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		lines.map((ln, i) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("polyline", {
+			points: ln.points.map((pt) => P(pt).join(",")).join(" "),
+			fill: "none",
+			stroke: lineColor,
+			strokeWidth: 1.6,
+			strokeLinejoin: "round",
+			strokeLinecap: "round"
+		}), ln.points.length > 24 && (() => {
+			const j = Math.floor(ln.points.length * .45);
+			const rev = mode === "wire" && current < 0;
+			return arrow(ln.points[rev ? j + 2 : j], ln.points[rev ? j : j + 2], `a${i}`, "var(--stage-accent)");
+		})()] }, `l${i}`)),
+		mode === "magnet" ? /* @__PURE__ */ jsxs("g", { children: [
+			/* @__PURE__ */ jsx("line", {
+				x1: csx,
+				y1: csy,
+				x2: ccx,
+				y2: ccy,
+				stroke: BLUE,
+				strokeWidth: 16,
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ jsx("line", {
+				x1: ccx,
+				y1: ccy,
+				x2: cnx,
+				y2: cny,
+				stroke: RED,
+				strokeWidth: 16,
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ jsx("text", {
+				x: cnx,
+				y: cny + 4,
+				textAnchor: "middle",
+				fontSize: 12,
+				fontWeight: 800,
+				fill: "white",
+				children: "N"
+			}),
+			/* @__PURE__ */ jsx("text", {
+				x: csx,
+				y: csy + 4,
+				textAnchor: "middle",
+				fontSize: 12,
+				fontWeight: 800,
+				fill: "white",
+				children: "S"
+			})
+		] }) : /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("circle", {
+			cx: ccx,
+			cy: ccy,
+			r: 13,
+			fill: "var(--stage-bg)",
+			stroke: "var(--stage-metal)",
+			strokeWidth: 2.5
+		}), current >= 0 ? /* @__PURE__ */ jsx("circle", {
+			cx: ccx,
+			cy: ccy,
+			r: 3.5,
+			fill: "var(--stage-metal)"
+		}) : /* @__PURE__ */ jsxs("g", {
+			stroke: "var(--stage-metal)",
+			strokeWidth: 2,
+			children: [/* @__PURE__ */ jsx("line", {
+				x1: ccx - 7,
+				y1: ccy - 7,
+				x2: ccx + 7,
+				y2: ccy + 7
+			}), /* @__PURE__ */ jsx("line", {
+				x1: ccx - 7,
+				y1: ccy + 7,
+				x2: ccx + 7,
+				y2: ccy - 7
+			})]
+		})] }),
+		/* @__PURE__ */ jsxs("g", {
+			style: { pointerEvents: "none" },
+			children: [
+				/* @__PURE__ */ jsx("line", {
+					x1: P(nTail)[0],
+					y1: P(nTail)[1],
+					x2: P(nTip)[0],
+					y2: P(nTip)[1],
+					stroke: "var(--stage-metal)",
+					strokeWidth: 3,
+					strokeLinecap: "round"
+				}),
+				/* @__PURE__ */ jsx("line", {
+					x1: ccx,
+					y1: ccy,
+					x2: P(nTip)[0],
+					y2: P(nTip)[1],
+					stroke: RED,
+					strokeWidth: 3,
+					strokeLinecap: "round",
+					opacity: 0
+				}),
+				arrow(compass, nTip, "compassN", RED)
+			]
+		})
+	] });
+}
+function MagnetismLab({ title = "Magnetism — field you can see", prompt = "Drag the magnet (and its ends to turn it), or switch to a wire. The compass snaps to the field wherever you drop it.", objectives = [
+	"Read a magnetic field as field lines",
+	"Field lines run N → S; a compass aligns with them",
+	"A current makes circular field loops"
+] } = {}) {
+	const [mode, setMode] = useState("magnet");
+	const [center, setCenter] = useState({
+		x: -.5,
+		y: 0
+	});
+	const [northOff, setNorthOff] = useState({
+		x: 1.8,
+		y: 0
+	});
+	const [compass, setCompass] = useState({
+		x: 3.2,
+		y: 1.6
+	});
+	const [current, setCurrent] = useState(1);
+	const challenge = useChallenge(MAGNETISM_CHALLENGE);
+	useCheckpoint({
+		solved: challenge.allCorrect,
+		activity: "magnetism"
+	});
+	const sources = useMemo(() => mode === "magnet" ? barMagnet(center, northOff, 1, 2 * mag(northOff)) : [{
+		kind: "wire",
+		at: center,
+		i: current
+	}], [
+		mode,
+		center,
+		northOff,
+		current
+	]);
+	const lines = useMemo(() => fieldLines(sources, {
+		perSource: 16,
+		step: .07,
+		maxSteps: 700,
+		bounds: VIEW,
+		seed: .35
+	}), [sources]);
+	const nPole = {
+		x: center.x + northOff.x,
+		y: center.y + northOff.y
+	};
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt,
+		objectives,
+		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [/* @__PURE__ */ jsx(Field, {
+			label: "source",
+			children: /* @__PURE__ */ jsxs("span", {
+				className: "lab-field-row",
+				children: [/* @__PURE__ */ jsx(Chip, {
+					selected: mode === "magnet",
+					onClick: () => setMode("magnet"),
+					children: "bar magnet"
+				}), /* @__PURE__ */ jsx(Chip, {
+					selected: mode === "wire",
+					onClick: () => setMode("wire"),
+					children: "current wire"
+				})]
+			})
+		}), mode === "wire" && /* @__PURE__ */ jsx(Field, {
+			label: "current",
+			children: /* @__PURE__ */ jsxs("span", {
+				className: "lab-field-row",
+				children: [/* @__PURE__ */ jsx(Chip, {
+					selected: current >= 0,
+					onClick: () => setCurrent(1),
+					children: "⊙ out"
+				}), /* @__PURE__ */ jsx(Chip, {
+					selected: current < 0,
+					onClick: () => setCurrent(-1),
+					children: "⊗ in"
+				})]
+			})
+		})] }),
+		footer: /* @__PURE__ */ jsx(ChallengeCard, {
+			questions: MAGNETISM_CHALLENGE,
+			state: challenge,
+			title: "Predict"
+		}),
+		children: /* @__PURE__ */ jsxs(Stage, {
+			view: VIEW,
+			height: 420,
+			ariaLabel: "Magnetic field lines with a draggable magnet and compass",
+			children: [
+				/* @__PURE__ */ jsx(FieldFigure, {
+					sources,
+					lines,
+					mode,
+					center,
+					northOff,
+					compass,
+					current
+				}),
+				/* @__PURE__ */ jsx(MovableDot, {
+					value: center,
+					onMove: (p) => setCenter(p),
+					ariaLabel: mode === "magnet" ? "magnet position" : "wire position",
+					r: 9
+				}),
+				mode === "magnet" && /* @__PURE__ */ jsx(MovableDot, {
+					value: nPole,
+					onMove: (p) => setNorthOff(sub(p, center)),
+					color: RED,
+					ariaLabel: "magnet orientation (north pole)",
+					r: 8
+				}),
+				/* @__PURE__ */ jsx(MovableDot, {
+					value: compass,
+					onMove: (p) => setCompass(p),
+					color: "var(--stage-good)",
+					ariaLabel: "compass",
+					r: 8
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+export { MagnetismLab };

package/dist/physics/optics/asset.d.mts

@@ -0,0 +1,6 @@
+import { AssetSpec } from "@classytic/stage";
+
+//#region src/physics/optics/asset.d.ts
+declare const OPTICS_RAY_ASSET: AssetSpec;
+//#endregion
+export { OPTICS_RAY_ASSET };

package/dist/physics/optics/asset.mjs

@@ -0,0 +1,234 @@
+'use client';
+
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isLineVal, isVec2, registerAsset, useCoords, vec } from "@classytic/stage";
+
+//#region src/physics/optics/asset.tsx
+const n = (v, d) => typeof v === "number" && Number.isFinite(v) ? v : d;
+const asVec = (v, d) => isVec2(v) ? v : d;
+const cross = (a, b) => a.x * b.y - a.y * b.x;
+function rayHitsSegment(P, d, m) {
+	const s = vec.sub(m.b, m.a);
+	const denom = cross(d, s);
+	if (Math.abs(denom) < 1e-9) return null;
+	const qp = vec.sub(m.a, P);
+	const t = cross(qp, s) / denom;
+	const u = cross(qp, d) / denom;
+	if (t > 1e-6 && u >= 0 && u <= 1) return t;
+	return null;
+}
+function rayHitsTarget(P, d, target, R, maxT) {
+	const tProj = Math.max(0, Math.min(maxT, vec.dot(vec.sub(target, P), d)));
+	const cp = {
+		x: P.x + d.x * tProj,
+		y: P.y + d.y * tProj
+	};
+	return vec.dist(cp, target) <= R ? cp : null;
+}
+function resolver({ params, bound }) {
+	const source = asVec(bound.source, {
+		x: -5,
+		y: -2
+	});
+	const aim = isVec2(bound.aim) ? bound.aim : null;
+	const target = isVec2(bound.target) ? bound.target : null;
+	const dir0 = aim ? vec.normalize(vec.sub(aim, source)) : vec.normalize(asVec(params.dir, {
+		x: 1,
+		y: 0
+	}));
+	const maxBounces = n(params.maxBounces, 8);
+	const targetR = n(params.targetR, .5);
+	const far = n(params.far, 60);
+	const mirrors = Object.keys(bound).filter((k) => /^m\d+$/.test(k)).map((k) => bound[k]).filter(isLineVal);
+	const pts = [source];
+	let P = source;
+	let d = dir0;
+	let hit = false;
+	let bounces = 0;
+	for (let b = 0; b <= maxBounces; b++) {
+		let bestT = Infinity;
+		let bestMirror = null;
+		for (const m of mirrors) {
+			const t = rayHitsSegment(P, d, m);
+			if (t != null && t < bestT) {
+				bestT = t;
+				bestMirror = m;
+			}
+		}
+		const maxT = bestMirror ? bestT : far;
+		if (target) {
+			const th = rayHitsTarget(P, d, target, targetR, maxT);
+			if (th) {
+				pts.push(th);
+				hit = true;
+				break;
+			}
+		}
+		if (!bestMirror) {
+			pts.push({
+				x: P.x + d.x * far,
+				y: P.y + d.y * far
+			});
+			break;
+		}
+		const hp = {
+			x: P.x + d.x * bestT,
+			y: P.y + d.y * bestT
+		};
+		pts.push(hp);
+		const along = vec.normalize(vec.sub(bestMirror.b, bestMirror.a));
+		const nrm = {
+			x: -along.y,
+			y: along.x
+		};
+		d = vec.normalize(vec.sub(d, vec.scale(nrm, 2 * vec.dot(d, nrm))));
+		P = {
+			x: hp.x + d.x * 1e-4,
+			y: hp.y + d.y * 1e-4
+		};
+		bounces++;
+	}
+	return {
+		kind: "asset-geom",
+		parts: {
+			ray: pts,
+			sourceAt: source,
+			...target ? { targetAt: target } : {}
+		},
+		meta: {
+			hit,
+			bounces,
+			dir0,
+			mirrors: mirrors.map((m) => ({
+				a: m.a,
+				b: m.b
+			}))
+		}
+	};
+}
+function Component({ geom }) {
+	const c = useCoords();
+	const P = (v) => c.toPx(v.x, v.y);
+	const ray = geom.parts.ray ?? [];
+	const sourceAt = geom.parts.sourceAt;
+	const targetAt = geom.parts.targetAt;
+	const meta = geom.meta ?? {};
+	const hit = meta.hit === true;
+	const rayPx = ray.map(P);
+	const rayStr = rayPx.map((p) => p.join(",")).join(" ");
+	return /* @__PURE__ */ jsxs("g", {
+		style: { pointerEvents: "none" },
+		children: [
+			(meta.mirrors ?? []).map((m, i) => {
+				const a = P(m.a), b = P(m.b);
+				const dx = b[0] - a[0], dy = b[1] - a[1], len = Math.hypot(dx, dy) || 1;
+				const nx = -dy / len, ny = dx / len;
+				const ticks = Math.max(3, Math.floor(len / 16));
+				const HL = 9;
+				return /* @__PURE__ */ jsxs("g", { children: [Array.from({ length: ticks }, (_, k) => {
+					const s = (k + .5) / ticks;
+					const px = a[0] + dx * s, py = a[1] + dy * s;
+					return /* @__PURE__ */ jsx("line", {
+						x1: px,
+						y1: py,
+						x2: px + nx * HL,
+						y2: py + ny * HL,
+						stroke: "var(--stage-metal)",
+						strokeWidth: 1.5,
+						opacity: .7
+					}, k);
+				}), /* @__PURE__ */ jsx("line", {
+					x1: a[0],
+					y1: a[1],
+					x2: b[0],
+					y2: b[1],
+					stroke: "var(--stage-sheen)",
+					strokeWidth: 3,
+					strokeLinecap: "round",
+					opacity: .92
+				})] }, i);
+			}),
+			rayPx.length > 1 && /* @__PURE__ */ jsx("polyline", {
+				points: rayStr,
+				fill: "none",
+				stroke: "var(--stage-warn)",
+				strokeWidth: 7,
+				opacity: .18,
+				strokeLinejoin: "round",
+				strokeLinecap: "round"
+			}),
+			rayPx.length > 1 && /* @__PURE__ */ jsx("polyline", {
+				points: rayStr,
+				fill: "none",
+				stroke: "var(--stage-warn)",
+				strokeWidth: 2.5,
+				strokeLinejoin: "round",
+				strokeLinecap: "round"
+			}),
+			targetAt && (() => {
+				const [tx, ty] = P(targetAt);
+				const R = c.sx(.6);
+				return /* @__PURE__ */ jsxs("g", { children: [
+					hit && /* @__PURE__ */ jsx("circle", {
+						cx: tx,
+						cy: ty,
+						r: R * 1.8,
+						fill: "var(--stage-good)",
+						opacity: .25
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						cx: tx,
+						cy: ty,
+						r: R,
+						fill: "none",
+						stroke: hit ? "var(--stage-good)" : "var(--stage-metal)",
+						strokeWidth: 2
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						cx: tx,
+						cy: ty,
+						r: R * .45,
+						fill: hit ? "var(--stage-good)" : "var(--stage-metal)",
+						opacity: hit ? 1 : .55
+					})
+				] });
+			})(),
+			sourceAt && (() => {
+				const [sx, sy] = P(sourceAt);
+				const r = c.sx(.34);
+				return /* @__PURE__ */ jsxs("g", { children: [
+					/* @__PURE__ */ jsx("circle", {
+						cx: sx,
+						cy: sy,
+						r: r * 2.4,
+						fill: "var(--stage-warn)",
+						opacity: .2
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						cx: sx,
+						cy: sy,
+						r,
+						fill: "var(--stage-warn)",
+						stroke: "var(--stage-metal)",
+						strokeWidth: 1.5
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						cx: sx,
+						cy: sy,
+						r: r * .45,
+						fill: "var(--stage-sheen)",
+						opacity: .95
+					})
+				] });
+			})()
+		]
+	});
+}
+const OPTICS_RAY_ASSET = {
+	resolver,
+	Component
+};
+registerAsset("optics-ray", OPTICS_RAY_ASSET);
+
+//#endregion
+export { OPTICS_RAY_ASSET };

package/dist/physics/optics/index.d.mts

@@ -0,0 +1,2 @@
+import { OPTICS_RAY_ASSET } from "./asset.mjs";
+import { OpticsLab, OpticsProps, opticsDoc } from "./preset.mjs";

package/dist/physics/optics/preset.d.mts

@@ -0,0 +1,14 @@
+import { OPTICS_RAY_ASSET } from "./asset.mjs";
+import { ReactNode } from "react";
+import { SceneDoc } from "@classytic/stage";
+
+//#region src/physics/optics/preset.d.ts
+declare function opticsDoc(): SceneDoc;
+interface OpticsProps {
+  height?: number;
+}
+declare function OpticsLab({
+  height
+}: OpticsProps): ReactNode;
+//#endregion
+export { OpticsLab, OpticsProps, opticsDoc };