@classytic/labs 0.1.0 → 0.2.0

package/dist/statistics/sampling/preset.mjs

@@ -13,13 +13,13 @@ import { CanvasLayer, useControlSurface, useFrameLoop, useInView } from "@classy
 
 //#region src/statistics/sampling/preset.tsx
 /**
-* SamplingDistributionLab — the two ideas that turn a sample into an inference.
+* SamplingDistributionLab, the two ideas that turn a sample into an inference.
 *
-*  • sampling mode — draw sample after sample (size n) from the population and pile
+*  • sampling mode, draw sample after sample (size n) from the population and pile
 *    up their MEANS. The pile is far tighter than the population and matches
 *    Normal(μ, σ/√n): the Central Limit Theorem, and why bigger n ⇒ smaller error.
-*  • CI mode — from each sample build a confidence interval x̄ ± z*·(σ/√n) and stack
-*    them; colour green if it captures μ, red if it misses. About C% are green —
+*  • CI mode, from each sample build a confidence interval x̄ ± z*·(σ/√n) and stack
+*    them; colour green if it captures μ, red if it misses. About C% are green , 
 *    making concrete what "95% confident" actually means (it's the PROCEDURE, not
 *    one interval). Running coverage converges to the chosen level.
 *

package/dist/statistics/sequence/preset.mjs

@@ -3,7 +3,7 @@
 import { Tex as Tex$1 } from "../../core/tex.mjs";
 import { Chip, Slider } from "../../kit/controls.mjs";
 import { ControlBar, Field, LabFrame } from "../../kit/frame.mjs";
-import { HintLadder, useHints } from "../../kit/pedagogy.mjs";
+import { ChallengeCard, HintLadder, useChallenge, useCheckpoint, useHints } from "../../kit/pedagogy.mjs";
 import { infiniteSum, nthTerm, partialSum, partialSums, terms } from "../core/sequences.mjs";
 import { useMemo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -11,11 +11,11 @@ import { useControlSurface } from "@classytic/stage";
 
 //#region src/statistics/sequence/preset.tsx
 /**
-* SequenceLab — arithmetic & geometric sequences you can watch grow. Each term is
+* SequenceLab, arithmetic & geometric sequences you can watch grow. Each term is
 * a bar (the pattern: a steady ladder for arithmetic, an explosion or a fading
 * tail for geometric); a line traces the RUNNING TOTAL across them. The magic
 * moment is geometric convergence: when |r|<1 the running-total line flattens onto
-* a dashed S∞ guide — an infinite sum with a finite answer, seen, not just stated.
+* a dashed S∞ guide, an infinite sum with a finite answer, seen, not just stated.
 *
 * Closed forms come from the sequences kernel and are shown (KaTeX) beside the
 * brute running total, so formula and picture are provably the same thing.
@@ -30,6 +30,41 @@ function SequenceLab({ kind = "geometric", first = 1, step = .5, count = 8, titl
 	const [d, setD] = useState(step);
 	const [n, setN] = useState(count);
 	const hints = useHints(hintList);
+	const defaultConverges = kind === "geometric" && Math.abs(step) < 1;
+	const predictQ = useMemo(() => [{
+		id: "sequence-converge",
+		prompt: kind === "geometric" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			"This geometric series has ratio ",
+			/* @__PURE__ */ jsx(Tex$1, { tex: `r = ${fnum(step)}` }),
+			". It adds infinitely many terms, does the total settle on a finite number, or grow without bound?"
+		] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			"This is an arithmetic series (each term adds a fixed ",
+			/* @__PURE__ */ jsx(Tex$1, { tex: `d = ${fnum(step)}` }),
+			"). Summed over infinitely many terms, does the total settle on a finite number, or grow without bound?"
+		] }),
+		choices: [{
+			value: "converges",
+			label: "settles on a finite sum"
+		}, {
+			value: "diverges",
+			label: "grows forever"
+		}],
+		answer: defaultConverges ? "converges" : "diverges",
+		explain: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			"A geometric series converges only when ",
+			/* @__PURE__ */ jsx(Tex$1, { tex: "|r| < 1" }),
+			" (the terms shrink to nothing); an arithmetic series always grows without bound. Here ",
+			/* @__PURE__ */ jsx(Tex$1, { tex: kind === "geometric" ? `|r| ${defaultConverges ? "<" : "\\ge"} 1` : "d \\ne 0" }),
+			", so it ",
+			defaultConverges ? "converges" : "diverges",
+			"."
+		] })
+	}], []);
+	const ch = useChallenge(predictQ);
+	useCheckpoint({
+		solved: ch.allCorrect,
+		activity: "sequence:predict"
+	});
 	const spec = {
 		kind: k,
 		first: a1,
@@ -282,18 +317,26 @@ function SequenceLab({ kind = "geometric", first = 1, step = .5, count = 8, titl
 				})
 			})
 		] }),
-		footer: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("p", {
-			style: {
-				fontSize: 12.5,
-				color: "var(--stage-muted)",
-				marginTop: 4
-			},
-			children: [/* @__PURE__ */ jsx(Tex$1, { tex: sumTex }), !isArith && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-				" — with ",
-				/* @__PURE__ */ jsx(Tex$1, { tex: "|r| < 1" }),
-				" the tail shrinks to nothing, so the total converges."
-			] })]
-		}), /* @__PURE__ */ jsx(HintLadder, { hints })] }),
+		footer: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(ChallengeCard, {
+				questions: predictQ,
+				state: ch,
+				title: "Predict first"
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				style: {
+					fontSize: 12.5,
+					color: "var(--stage-muted)",
+					marginTop: 4
+				},
+				children: [/* @__PURE__ */ jsx(Tex$1, { tex: sumTex }), !isArith && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					", with ",
+					/* @__PURE__ */ jsx(Tex$1, { tex: "|r| < 1" }),
+					" the tail shrinks to nothing, so the total converges."
+				] })]
+			}),
+			/* @__PURE__ */ jsx(HintLadder, { hints })
+		] }),
 		children: figure
 	});
 }

package/dist/statistics/z-table/preset.mjs

@@ -3,7 +3,7 @@
 import { Tex as Tex$1 } from "../../core/tex.mjs";
 import { Chip } from "../../kit/controls.mjs";
 import { ControlBar, LabFrame } from "../../kit/frame.mjs";
-import { HintLadder, useHints } from "../../kit/pedagogy.mjs";
+import { HintLadder, useCheckpoint, useHints } from "../../kit/pedagogy.mjs";
 import { normalCdf, normalPdf, zScore } from "../core/normal.mjs";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -11,7 +11,7 @@ import { useControlSurface } from "@classytic/stage";
 
 //#region src/statistics/z-table/preset.tsx
 /**
-* ZTableLab — read a z-table like the exam expects, and see what each lookup MEANS.
+* ZTableLab, read a z-table like the exam expects, and see what each lookup MEANS.
 * Standardize a raw value (x → z = (x−μ)/σ), then the classic Φ(z) table lights up
 * the row/column and cell for that z, while a mini standard-normal curve shades the
 * matching tail and shows the probability. Click any cell to jump there (and the
@@ -19,7 +19,7 @@ import { useControlSurface } from "@classytic/stage";
 * Φ(−z) = 1 − Φ(z), spelled out rather than hidden.
 *
 * Φ comes from the normal kernel (`normalCdf`); the table is just that function laid
-* out as the familiar grid — one source of truth, no transcribed magic numbers.
+* out as the familiar grid, one source of truth, no transcribed magic numbers.
 */
 const CW = 230, CH = 116, CPAD = 6;
 const ROWS = Array.from({ length: 35 }, (_, i) => i / 10);
@@ -66,6 +66,19 @@ function ZTableLab({ x = 650, mu = 500, sigma = 100, tail = "left", title = "The
 		const br = box.getBoundingClientRect(), rr = row.getBoundingClientRect();
 		box.scrollTop += rr.top - br.top - box.clientHeight / 2 + rr.height / 2;
 	}, [zLook]);
+	const lookedUp = useRef(/* @__PURE__ */ new Set());
+	const [lookupCount, setLookupCount] = useState(0);
+	useEffect(() => {
+		if (Number.isFinite(zLook) && !lookedUp.current.has(zLook)) {
+			lookedUp.current.add(zLook);
+			setLookupCount(lookedUp.current.size);
+		}
+	}, [zLook]);
+	useCheckpoint({
+		solved: lookupCount >= 3,
+		activity: `z-table:${title}`,
+		hintsUsed: hints?.count ?? 0
+	});
 	useControlSurface(controlId, {
 		x: {
 			type: "number",
@@ -236,7 +249,7 @@ function ZTableLab({ x = 650, mu = 500, sigma = 100, tail = "left", title = "The
 			className: "lab-prompt",
 			style: { marginTop: 6 },
 			children: [
-				"z is negative — the table lists |z|; use symmetry ",
+				"z is negative, the table lists |z|; use symmetry ",
 				/* @__PURE__ */ jsx("b", { children: /* @__PURE__ */ jsx(Tex$1, { tex: `\\Phi(${f2(z)}) = 1 - \\Phi(${f2(-z)}) = ${f4(phi)}` }) }),
 				"."
 			]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classytic/labs",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Interactive learning lab — authorable, domain-organized interactive lessons (math, physics, chemistry, circuits, geometry…) built on the @classytic/stage engine. Per-domain subpaths; lesson blocks + presets creators compose and sell.",
   "author": "Classytic",
   "license": "MIT",
@@ -83,6 +83,14 @@
       "types": "./dist/kit/index.d.mts",
       "default": "./dist/kit/index.mjs"
     },
+    "./build": {
+      "types": "./dist/build/index.d.mts",
+      "default": "./dist/build/index.mjs"
+    },
+    "./logic": {
+      "types": "./dist/logic/index.d.mts",
+      "default": "./dist/logic/index.mjs"
+    },
     "./blocks": {
       "types": "./dist/blocks/index.d.mts",
       "default": "./dist/blocks/index.mjs"
@@ -191,7 +199,7 @@
   "peerDependencies": {
     "@classytic/cms": ">=0.2.1",
     "@classytic/cms-ui": ">=0.3.1",
-    "@classytic/stage": ">=0.1.0",
+    "@classytic/stage": ">=0.2.0",
     "clsx": ">=2",
     "katex": ">=0.16",
     "lucide-react": ">=0.4",
@@ -221,7 +229,7 @@
     "@changesets/cli": "^2.27.9",
     "@classytic/cms-ui": "^0.3.1",
     "@classytic/dev-tools": "^0.2.0",
-    "@classytic/stage": "^0.1.0",
+    "@classytic/stage": "^0.2.0",
     "@testing-library/react": "^16.3.2",
     "@types/node": "^22.0.0",
     "@types/react": "^19.2.0",

package/styles.css

@@ -77,7 +77,10 @@
 .lab-challenge-h { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-foreground, color-mix(in oklab, currentColor 60%, transparent)); }
 .lab-challenge-count { font-variant-numeric: tabular-nums; }
 .lab-challenge-q { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
-.lab-challenge-prompt { font-size: 14px; font-weight: 600; color: var(--foreground, currentColor); }
+/* separate each question from the previous so prompt+choices read as one group */
+.lab-challenge-q + .lab-challenge-q { padding-top: 12px; border-top: 1px solid var(--border, color-mix(in oklab, currentColor 12%, transparent)); }
+.lab-challenge-prompt { display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 600; color: var(--foreground, currentColor); }
+.lab-challenge-num { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--primary-foreground, #fff); background: var(--primary, oklch(0.59 0.22 261)); transform: translateY(1px); }
 .lab-choices { display: flex; flex-wrap: wrap; gap: 8px; }
 .lab-choice { padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--border, color-mix(in oklab, currentColor 22%, transparent)); background: var(--card, transparent); color: var(--foreground, currentColor); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: border-color .12s, background .12s, color .12s; }
 .lab-choice:hover { border-color: var(--primary, oklch(0.59 0.22 261)); }