@classytic/labs 0.1.0

package/dist/kit/logic-gates.mjs

@@ -0,0 +1,210 @@
+'use client';
+
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/kit/logic-gates.tsx
+const WIRE = "var(--stage-wire)";
+const LIVE = "var(--stage-live)";
+const METAL = "var(--stage-metal)";
+const BG = "var(--stage-bg)";
+const FG = "var(--stage-fg)";
+const SHEEN = "color-mix(in oklab, var(--stage-sheen) 50%, transparent)";
+const isNeg = (t) => t === "NAND" || t === "NOR" || t === "XNOR" || t === "NOT";
+const baseOf = (t) => t === "NAND" ? "AND" : t === "NOR" ? "OR" : t === "XNOR" ? "XOR" : t === "NOT" ? "NOT" : t;
+/** Wire-attach ports for a gate in box (x,y,size). 1 input for NOT, else 2. */
+function gatePorts(type, x, y, s) {
+	const single = type === "NOT";
+	const bub = isNeg(type) ? .16 * s : 0;
+	const bodyRight = baseOf(type) === "NOT" ? x + .7 * s : x + .86 * s;
+	return {
+		inputs: single ? [{
+			x,
+			y: y + s / 2
+		}] : [{
+			x,
+			y: y + .28 * s
+		}, {
+			x,
+			y: y + .72 * s
+		}],
+		output: {
+			x: bodyRight + bub,
+			y: y + s / 2
+		}
+	};
+}
+/** A logic gate glyph. `live` = its OUTPUT is high. */
+function GateGlyph({ x, y, size: s, type, live, label }) {
+	const base = baseOf(type);
+	const stroke = METAL;
+	const ports = gatePorts(type, x, y, s);
+	const cy = y + s / 2;
+	let body;
+	if (base === "AND") body = /* @__PURE__ */ jsx("path", {
+		d: `M${x},${y} H${x + .36 * s} A${.5 * s},${.5 * s} 0 0 1 ${x + .36 * s},${y + s} H${x} Z`,
+		fill: BG,
+		stroke,
+		strokeWidth: 2,
+		strokeLinejoin: "round"
+	});
+	else if (base === "OR" || base === "XOR") {
+		const ox = base === "XOR" ? x + .08 * s : x;
+		body = /* @__PURE__ */ jsx("path", {
+			d: `M${ox},${y} C${ox + .22 * s},${y + .16 * s} ${ox + .22 * s},${y + .84 * s} ${ox},${y + s} C${ox + .45 * s},${y + s} ${ox + .72 * s},${y + .82 * s} ${x + .86 * s},${cy} C${ox + .72 * s},${y + .18 * s} ${ox + .45 * s},${y} ${ox},${y} Z`,
+			fill: BG,
+			stroke,
+			strokeWidth: 2,
+			strokeLinejoin: "round"
+		});
+	} else body = /* @__PURE__ */ jsx("path", {
+		d: `M${x + .06 * s},${y} L${x + .7 * s},${cy} L${x + .06 * s},${y + s} Z`,
+		fill: BG,
+		stroke,
+		strokeWidth: 2,
+		strokeLinejoin: "round"
+	});
+	return /* @__PURE__ */ jsxs("g", { children: [
+		live && /* @__PURE__ */ jsx("circle", {
+			cx: x + .46 * s,
+			cy,
+			r: s * .62,
+			fill: LIVE,
+			opacity: .12
+		}),
+		base === "XOR" && /* @__PURE__ */ jsx("path", {
+			d: `M${x - .02 * s},${y} C${x + .2 * s},${y + .16 * s} ${x + .2 * s},${y + .84 * s} ${x - .02 * s},${y + s}`,
+			fill: "none",
+			stroke,
+			strokeWidth: 2,
+			strokeLinecap: "round"
+		}),
+		body,
+		isNeg(type) && /* @__PURE__ */ jsx("circle", {
+			cx: ports.output.x - .08 * s,
+			cy,
+			r: .08 * s,
+			fill: BG,
+			stroke,
+			strokeWidth: 2
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: ports.output.x,
+			y1: cy,
+			x2: ports.output.x + .14 * s,
+			y2: cy,
+			stroke: live ? LIVE : WIRE,
+			strokeWidth: 2.5,
+			strokeLinecap: "round"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: base === "AND" ? `M${x + .04 * s},${y + .12 * s} H${x + .4 * s}` : `M${x + .1 * s},${y + .16 * s} q${.2 * s},${.04 * s} ${.32 * s},${.14 * s}`,
+			fill: "none",
+			stroke: SHEEN,
+			strokeWidth: 1.4,
+			strokeLinecap: "round"
+		}),
+		label && /* @__PURE__ */ jsx("text", {
+			x: ports.output.x - (base === "NOT" ? .42 : .5) * s,
+			y: cy,
+			fill: FG,
+			fontSize: Math.max(8, s * .22),
+			fontWeight: 700,
+			textAnchor: "middle",
+			dominantBaseline: "central",
+			style: { pointerEvents: "none" },
+			children: label
+		})
+	] });
+}
+/** An output LED — glows `color` when on, with a soft halo + sheen; dim ring off. */
+function Lamp({ cx, cy, r, on, color = LIVE, label }) {
+	const lit = color;
+	return /* @__PURE__ */ jsxs("g", { children: [
+		on && /* @__PURE__ */ jsx("circle", {
+			cx,
+			cy,
+			r: r * 2.1,
+			fill: lit,
+			opacity: .18
+		}),
+		on && /* @__PURE__ */ jsx("circle", {
+			cx,
+			cy,
+			r: r * 1.45,
+			fill: lit,
+			opacity: .28
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx,
+			cy,
+			r,
+			fill: on ? lit : "color-mix(in oklab, var(--stage-metal) 22%, transparent)",
+			stroke: on ? lit : METAL,
+			strokeWidth: 1.5
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: cx - r * .3,
+			cy: cy - r * .32,
+			r: r * .34,
+			fill: SHEEN,
+			opacity: on ? .8 : .3
+		}),
+		label && /* @__PURE__ */ jsx("text", {
+			x: cx,
+			y: cy + r + 4,
+			fill: FG,
+			fontSize: Math.max(8, r * .9),
+			fontWeight: 700,
+			textAnchor: "middle",
+			dominantBaseline: "hanging",
+			style: { pointerEvents: "none" },
+			children: label
+		})
+	] });
+}
+/** An input switch (toggle). Render inside a `<g onClick>` in the lab for taps. */
+function ToggleSwitch({ x, y, w, h, on, label }) {
+	const r = h / 2;
+	const knobX = on ? x + w - r : x + r;
+	return /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx("rect", {
+			x,
+			y,
+			width: w,
+			height: h,
+			rx: r,
+			fill: on ? "color-mix(in oklab, var(--stage-live) 35%, transparent)" : "color-mix(in oklab, var(--stage-metal) 18%, transparent)",
+			stroke: on ? LIVE : METAL,
+			strokeWidth: 1.5
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: knobX,
+			cy: y + r,
+			r: r - 2.5,
+			fill: BG,
+			stroke: on ? LIVE : METAL,
+			strokeWidth: 1.5
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: knobX - (r - 2.5) * .3,
+			cy: y + r - (r - 2.5) * .3,
+			r: (r - 2.5) * .34,
+			fill: SHEEN,
+			opacity: .6
+		}),
+		label && /* @__PURE__ */ jsx("text", {
+			x: x + w / 2,
+			y: y - 4,
+			fill: FG,
+			fontSize: Math.max(9, h * .7),
+			fontWeight: 700,
+			textAnchor: "middle",
+			dominantBaseline: "auto",
+			style: { pointerEvents: "none" },
+			children: label
+		})
+	] });
+}
+
+//#endregion
+export { GateGlyph, Lamp, ToggleSwitch, gatePorts };

package/dist/kit/molecules.mjs

@@ -0,0 +1,178 @@
+'use client';
+
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/kit/molecules.tsx
+const O = "var(--stage-danger)";
+const C = "color-mix(in oklab, var(--stage-fg) 44%, var(--stage-bg))";
+const H = "color-mix(in oklab, var(--stage-fg) 84%, var(--stage-bg))";
+const BOND = "color-mix(in oklab, var(--stage-fg) 52%, transparent)";
+const LIGHT = "var(--stage-fg)";
+const DARK = "var(--stage-bg)";
+const HALO = "var(--stage-bg)";
+function atom(cx, cy, r, fill, sym, symColor = LIGHT) {
+	return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("circle", {
+		cx,
+		cy,
+		r,
+		fill,
+		stroke: HALO,
+		strokeWidth: 1.6,
+		vectorEffect: "non-scaling-stroke"
+	}), sym && /* @__PURE__ */ jsx("text", {
+		x: cx,
+		y: cy,
+		fill: symColor,
+		fontSize: r * 1.15,
+		fontWeight: 800,
+		textAnchor: "middle",
+		dominantBaseline: "central",
+		style: { pointerEvents: "none" },
+		children: sym
+	})] }, `${cx},${cy}`);
+}
+const bond = (x1, y1, x2, y2) => /* @__PURE__ */ jsx("line", {
+	x1,
+	y1,
+	x2,
+	y2,
+	stroke: BOND,
+	strokeWidth: 2.4,
+	strokeLinecap: "round",
+	vectorEffect: "non-scaling-stroke"
+}, `b${x1},${y1},${x2},${y2}`);
+/** Each molecule draws into a unit box [-1,1]² (scaled by size/2); has a label. */
+const MOLECULES = {
+	co2: {
+		label: "CO₂",
+		draw: () => /* @__PURE__ */ jsxs("g", { children: [
+			bond(-.62, 0, 0, 0),
+			bond(0, 0, .62, 0),
+			atom(-.66, 0, .34, O, "O"),
+			atom(0, 0, .42, C, "C"),
+			atom(.66, 0, .34, O, "O")
+		] })
+	},
+	o2: {
+		label: "O₂",
+		draw: () => /* @__PURE__ */ jsxs("g", { children: [
+			bond(-.42, 0, .42, 0),
+			atom(-.42, 0, .42, O, "O"),
+			atom(.42, 0, .42, O, "O")
+		] })
+	},
+	h2o: {
+		label: "H₂O",
+		draw: () => /* @__PURE__ */ jsxs("g", { children: [
+			bond(0, .12, -.58, -.42),
+			bond(0, .12, .58, -.42),
+			atom(0, .12, .44, O, "O"),
+			atom(-.58, -.42, .28, H, "H", DARK),
+			atom(.58, -.42, .28, H, "H", DARK)
+		] })
+	},
+	glucose: {
+		label: "glucose",
+		draw: () => {
+			const pts = Array.from({ length: 6 }, (_, i) => {
+				const a = Math.PI / 3 * i - Math.PI / 2;
+				return [Math.cos(a) * .66, Math.sin(a) * .66];
+			});
+			return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("polygon", {
+				points: pts.map((p) => p.join(",")).join(" "),
+				fill: `color-mix(in oklab, ${C} 22%, var(--stage-bg))`,
+				stroke: BOND,
+				strokeWidth: 2.4,
+				strokeLinejoin: "round",
+				vectorEffect: "non-scaling-stroke"
+			}), pts.map((p) => atom(p[0], p[1], .13, C))] });
+		}
+	},
+	atp: {
+		label: "ATP",
+		draw: () => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
+			x: -.74,
+			y: -.4,
+			width: 1.48,
+			height: .8,
+			rx: .4,
+			fill: "var(--stage-good)",
+			stroke: HALO,
+			strokeWidth: 1.4,
+			vectorEffect: "non-scaling-stroke"
+		}), /* @__PURE__ */ jsx("text", {
+			x: 0,
+			y: .02,
+			fill: DARK,
+			fontSize: .46,
+			fontWeight: 800,
+			textAnchor: "middle",
+			dominantBaseline: "central",
+			children: "ATP"
+		})] })
+	},
+	light: {
+		label: "light",
+		draw: () => /* @__PURE__ */ jsxs("g", { children: [Array.from({ length: 8 }, (_, i) => {
+			const a = Math.PI / 4 * i;
+			return /* @__PURE__ */ jsx("line", {
+				x1: Math.cos(a) * .56,
+				y1: Math.sin(a) * .56,
+				x2: Math.cos(a) * .92,
+				y2: Math.sin(a) * .92,
+				stroke: "var(--stage-warn)",
+				strokeWidth: 2.2,
+				strokeLinecap: "round",
+				vectorEffect: "non-scaling-stroke"
+			}, i);
+		}), /* @__PURE__ */ jsx("circle", {
+			cx: 0,
+			cy: 0,
+			r: .42,
+			fill: "var(--stage-warn)",
+			stroke: HALO,
+			strokeWidth: 1.4,
+			vectorEffect: "non-scaling-stroke"
+		})] })
+	},
+	A: {
+		label: "A",
+		draw: () => atom(0, 0, .66, "var(--stage-accent)", "A")
+	},
+	B: {
+		label: "B",
+		draw: () => atom(0, 0, .66, "var(--stage-accent-2)", "B")
+	},
+	AB: {
+		label: "AB",
+		draw: () => /* @__PURE__ */ jsxs("g", { children: [
+			bond(-.4, 0, .4, 0),
+			atom(-.44, 0, .46, "var(--stage-accent)", "A"),
+			atom(.44, 0, .46, "var(--stage-accent-2)", "B")
+		] })
+	}
+};
+/** A molecule icon as an SVG <g>, centred at (x,y), fitting a `size`-px box. */
+function MoleculeGlyph({ kind, x = 0, y = 0, size = 30, showLabel = false }) {
+	const m = MOLECULES[kind];
+	const s = size / 2;
+	return /* @__PURE__ */ jsxs("g", {
+		transform: `translate(${x} ${y})`,
+		children: [/* @__PURE__ */ jsx("g", {
+			transform: `scale(${s})`,
+			strokeLinecap: "round",
+			children: m.draw()
+		}), showLabel && /* @__PURE__ */ jsx("text", {
+			x: 0,
+			y: s + 12,
+			fill: "var(--stage-fg)",
+			fontSize: 11,
+			fontWeight: 600,
+			textAnchor: "middle",
+			children: m.label
+		})]
+	});
+}
+
+//#endregion
+export { MoleculeGlyph };

package/dist/kit/pedagogy.d.mts

@@ -0,0 +1,126 @@
+import { ReactNode } from "react";
+
+//#region src/kit/pedagogy.d.ts
+interface CheckpointArgs {
+  /** The lab's correctness predicate over its resolved state. */
+  solved: boolean;
+  activity: string;
+  /** Full-credit score; defaults to {raw:1,max:1}. Penalised by hints. */
+  score?: {
+    raw: number;
+    max: number;
+  };
+  /** Hints revealed so far (from useHints().count). */
+  hintsUsed?: number;
+  /** Score multiplier docked per hint (default 0.1, floored at 0.1). */
+  hintPenalty?: number;
+  /** The learner's answer to pass through to the report (e.g. the value they entered). */
+  response?: string;
+}
+/** Report completion once, the first time `solved` becomes true. */
+declare function useCheckpoint({
+  solved,
+  activity,
+  score,
+  hintsUsed,
+  hintPenalty,
+  response
+}: CheckpointArgs): {
+  solved: boolean;
+  reported: boolean;
+};
+interface Hints {
+  revealed: string[];
+  count: number;
+  hasMore: boolean;
+  reveal: () => void;
+  reset: () => void;
+}
+/** Progressive hint state — reveal one at a time. */
+declare function useHints(hints?: string[]): Hints;
+/** Learner-visible goal banner ("You'll be able to …"). */
+declare function Objectives({
+  items
+}: {
+  items?: string[];
+}): ReactNode;
+/** The hint ladder — revealed hints + a "need a hint?" button while more remain. */
+declare function HintLadder({
+  hints
+}: {
+  hints: Hints;
+}): ReactNode;
+interface ChallengeChoice {
+  value: string;
+  label: ReactNode;
+}
+interface ChallengeQuestion {
+  id: string;
+  /** predict / classify / explain prompt. */
+  prompt: ReactNode;
+  choices: ChallengeChoice[];
+  /** the `value` of the correct choice. */
+  answer: string;
+  /** the "why", revealed once this question is answered correctly. */
+  explain?: ReactNode;
+}
+interface ChallengeState {
+  picks: Record<string, string | undefined>;
+  pick: (id: string, value: string) => void;
+  /** all questions answered correctly → the lab is solved. */
+  allCorrect: boolean;
+  /** every question has a pick (right or wrong). */
+  answeredAll: boolean;
+  solvedCount: number;
+  total: number;
+  reset: () => void;
+}
+/** State for a small set of predict/classify questions. */
+declare function useChallenge(questions: ChallengeQuestion[]): ChallengeState;
+/** Renders the challenge questions as choice chips with per-question feedback. */
+declare function ChallengeCard({
+  questions,
+  state,
+  title
+}: {
+  questions: ChallengeQuestion[];
+  state: ChallengeState;
+  title?: ReactNode;
+}): ReactNode;
+/** Unified success / misconception / try-again feedback. */
+declare function Feedback({
+  ok,
+  misconception,
+  okText,
+  tryText
+}: {
+  ok: boolean;
+  misconception?: string;
+  okText?: string;
+  tryText?: string;
+}): ReactNode;
+interface RevealSolutionProps {
+  /** The answer to show when revealed (text or rich content). */
+  solution: ReactNode;
+  /** Gate the button (e.g. only after a wrong attempt). Default: always shown. */
+  available?: boolean;
+  /** Fired ONCE when the learner reveals — let the lab dock the score (peek ≠ solve). */
+  onReveal?: () => void;
+  buttonLabel?: string;
+  /** The warning shown with the solution. */
+  note?: string;
+}
+/**
+ * The shared "Show answer" escape hatch — so no lab is a dead-end "wrong/right".
+ * Manages its own shown/hidden; `key` it (e.g. per step/event) to reset between
+ * questions. Revealing is a deliberate peek: it warns and reports via `onReveal`.
+ */
+declare function RevealSolution({
+  solution,
+  available,
+  onReveal,
+  buttonLabel,
+  note
+}: RevealSolutionProps): ReactNode;
+//#endregion
+export { ChallengeCard, ChallengeChoice, ChallengeQuestion, ChallengeState, CheckpointArgs, Feedback, HintLadder, Hints, Objectives, RevealSolution, RevealSolutionProps, useChallenge, useCheckpoint, useHints };