@classytic/labs 0.1.0 → 0.3.0

package/dist/math/sequence-predict/preset.mjs

@@ -0,0 +1,132 @@
+'use client';
+
+import { Activity } from "../../kit/activity.mjs";
+import { getScene } from "../../kit/scenes.mjs";
+import { SlotFill } from "../../kit/slot-fill.mjs";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/math/sequence-predict/preset.tsx
+/**
+* SequencePredict, the flagship "watch it grow, then predict the next term" lab, the
+* joke-that-doubles lesson. A sequence is shown as a row of <DotCluster> dishes (you
+* SEE 3 → 6 → 12 get denser, the new dots lit up), and the learner fills the hidden
+* terms by tapping number tiles (<SlotFill>) instead of typing. It's the exponential/
+* geometric counterpart to <LinearModelLab>: discover the multiplicative (or additive)
+* rule from the picture, not from a formula handed to you.
+*
+* Authorable as one config: the start value, ×ratio or +difference, how many terms are
+* shown vs predicted, the story sentence, and the distractor tiles. Same engine covers
+* "doubles each day", "halves each hour", "+3 each step", compound interest, half-life.
+*/
+function buildTerms(start, rule, factor, n, integer) {
+	const out = [start];
+	for (let i = 1; i < n; i++) {
+		const v = rule === "geometric" ? out[i - 1] * factor : out[i - 1] + factor;
+		out.push(integer ? Math.round(v) : v);
+	}
+	return out;
+}
+/** Plausible wrong tiles, the classic "added instead of multiplied" near-misses. */
+function autoDistractors(answers, terms, factor) {
+	const real = new Set(terms);
+	const cand = /* @__PURE__ */ new Set();
+	for (const a of answers) {
+		cand.add(a + factor);
+		cand.add(a - factor);
+		cand.add(Math.round(a * 1.5));
+	}
+	return [...cand].filter((v) => v > 0 && !real.has(v)).sort((x, y) => x - y).slice(0, 3);
+}
+function SequencePredict(props = {}) {
+	const { start = 3, rule = "geometric", factor = 2, shown = 1, predict = 2, stepLabel = "Day", distractors = [], highlightNew = true, scene = "cluster", color, integer = true, height, title = "How does it grow?", prompt = rule === "geometric" ? `Each ${stepLabel.toLowerCase()} it multiplies by ${factor}. Fill in the hidden counts.` : `Each ${stepLabel.toLowerCase()} it changes by ${factor}. Fill in the hidden counts.`, activity = "sequence-predict" } = props;
+	const nTerms = shown + predict;
+	const terms = buildTerms(start, rule, factor, nTerms, integer);
+	const [revealed, setRevealed] = useState(false);
+	const dish = Math.max(96, Math.min(140, (height ?? 150) - (nTerms > 4 ? (nTerms - 4) * 8 : 0)));
+	const slots = [];
+	for (let i = shown; i < nTerms; i++) slots.push({
+		id: `t${i}`,
+		answer: terms[i],
+		label: `${stepLabel} ${i}`
+	});
+	const answers = slots.map((s) => Number(s.answer));
+	const extras = distractors.length ? distractors : autoDistractors(answers, terms, factor);
+	const tilePool = Array.from(new Set([...answers, ...extras])).sort((a, b) => a - b);
+	const sceneMeta = getScene(scene) ?? getScene("cluster");
+	const figure = /* @__PURE__ */ jsx("div", {
+		className: "lab-sequence-row",
+		children: terms.map((v, i) => {
+			const isPredicted = i >= shown;
+			const show = !isPredicted || revealed;
+			const added = i === 0 ? 0 : Math.max(0, terms[i] - terms[i - 1]);
+			return /* @__PURE__ */ jsxs("div", {
+				className: "lab-sequence-step",
+				"data-current": isPredicted && i === nTerms - 1 || void 0,
+				children: [
+					/* @__PURE__ */ jsxs("span", {
+						className: "lab-sequence-label",
+						children: [
+							stepLabel,
+							" ",
+							i
+						]
+					}),
+					sceneMeta.render({
+						count: v,
+						highlight: highlightNew ? added : 0,
+						width: dish,
+						height: dish,
+						color
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "lab-sequence-value",
+						children: show ? v : "?"
+					})
+				]
+			}, i);
+		})
+	});
+	const challenge = /* @__PURE__ */ jsx(SlotFill, {
+		slots,
+		tiles: tilePool,
+		activity,
+		onSolved: () => setRevealed(true)
+	});
+	return /* @__PURE__ */ jsxs(Activity.Root, {
+		className: "math-sequence-predict-activity",
+		focusLayout: "compact",
+		children: [
+			/* @__PURE__ */ jsxs(Activity.Header, { children: [/* @__PURE__ */ jsx(Activity.Heading, {
+				eyebrow: "Sequences",
+				title,
+				description: prompt
+			}), /* @__PURE__ */ jsx(Activity.FocusButton, {})] }),
+			/* @__PURE__ */ jsxs(Activity.Status, { children: [
+				/* @__PURE__ */ jsx("strong", { children: revealed ? "Sequence complete" : "Predict the hidden terms" }),
+				/* @__PURE__ */ jsx("span", { children: rule === "geometric" ? `× ${factor}` : `${factor >= 0 ? "+" : "−"} ${Math.abs(factor)}` }),
+				/* @__PURE__ */ jsxs("span", { children: [nTerms, " terms"] })
+			] }),
+			/* @__PURE__ */ jsxs(Activity.Workspace, { children: [/* @__PURE__ */ jsx(Activity.Canvas, {
+				label: "Visual sequence",
+				children: figure
+			}), /* @__PURE__ */ jsx(Activity.Inspector, {
+				label: "Prediction tiles",
+				children: challenge
+			})] }),
+			/* @__PURE__ */ jsxs(Activity.Feedback, { children: [/* @__PURE__ */ jsx("span", { children: "Notice" }), /* @__PURE__ */ jsx("div", { children: "Compare each term with the one immediately before it, then apply that same change to the hidden positions." })] }),
+			/* @__PURE__ */ jsx(Activity.LiveRegion, { children: revealed ? `Sequence completed: ${terms.join(", ")}.` : `${shown} terms are shown and ${predict} must be predicted.` }),
+			/* @__PURE__ */ jsx(Activity.Transport, { children: /* @__PURE__ */ jsxs("div", {
+				className: "lab-transport-state",
+				children: [/* @__PURE__ */ jsx("strong", { children: revealed ? "Pattern found" : "Fill the open slots" }), /* @__PURE__ */ jsxs("span", { children: [
+					stepLabel,
+					" ",
+					nTerms - 1
+				] })]
+			}) })
+		]
+	});
+}
+
+//#endregion
+export { SequencePredict };

package/dist/math/slide-rule/core.d.mts

@@ -0,0 +1,39 @@
+//#region src/math/slide-rule/core.d.ts
+/**
+ * Distance from the scale's 1 to `value`, along a scale whose full decade spans
+ * `span` units. This IS the logarithm, drawn as a length.
+ */
+declare function logOffset(value: number, span: number): number;
+/** The value standing `offset` units along the scale. The inverse of `logOffset`. */
+declare function valueAt(offset: number, span: number): number;
+/** How far the sliding scale must travel so its 1 sits directly over `a`. */
+declare function alignFor(a: number, span: number): number;
+/**
+ * The value on the fixed scale underneath the sliding scale's `b`, when the
+ * slide has travelled `slide` units. With the slide set by `alignFor(a)` this
+ * returns a × b, because the two lengths have been added.
+ */
+declare function readingAt(slide: number, b: number, span: number): number;
+interface Product {
+  /** The true product, which may be larger than the scale can show. */
+  product: number;
+  /** The digits the rule reads off, always inside one decade. */
+  mantissa: number;
+  /** Powers of ten the reader supplies themselves. */
+  decades: number;
+  /** True when a × b ran past the end of the fixed scale. */
+  offScale: boolean;
+}
+/**
+ * A slide rule gives you the DIGITS and leaves the decimal point to you: the
+ * scale only spans one decade, so 4 × 5 runs off the end and is read as 2.0 with
+ * one decade added. That split is exactly "a logarithm is a whole part plus a
+ * fraction", which is why log tables print only the fractional part.
+ */
+declare function productOf(a: number, b: number): Product;
+/** Snap a dragged offset to the nearest tick, so a learner can land exactly on a value. */
+declare function snapOffset(offset: number, span: number): number;
+/** True when the slide is close enough to `a` to count as lined up. */
+declare function isAligned(slide: number, a: number, span: number, tolerance?: number): boolean;
+//#endregion
+export { Product, alignFor, isAligned, logOffset, productOf, readingAt, snapOffset, valueAt };

package/dist/math/slide-rule/core.mjs

@@ -0,0 +1,104 @@
+//#region src/math/slide-rule/core.ts
+/**
+* Slide-rule core: the arithmetic of a logarithmic scale.
+*
+* A slide rule multiplies by ADDING LENGTHS. Each value sits at a distance
+* proportional to its logarithm, so laying the length of `a` end to end with the
+* length of `b` lands at the length of `a × b`. That is log(ab) = log a + log b
+* made physical, and it is the whole reason logarithms were invented: before
+* calculators, turning a multiplication into an addition was the difference
+* between minutes and seconds of work.
+*
+* Pure functions only, no React, so the geometry can be tested as numbers.
+*/
+/** A single decade, 1 to 10, which is all one slide-rule scale carries. */
+const SCALE_MIN = 1;
+const SCALE_MAX = 10;
+/** Hold a value inside the one decade the scale can show. */
+function clampValue(value) {
+	if (!Number.isFinite(value)) return 1;
+	return Math.min(10, Math.max(1, value));
+}
+/**
+* Distance from the scale's 1 to `value`, along a scale whose full decade spans
+* `span` units. This IS the logarithm, drawn as a length.
+*/
+function logOffset(value, span) {
+	return span * Math.log10(clampValue(value));
+}
+/** The value standing `offset` units along the scale. The inverse of `logOffset`. */
+function valueAt(offset, span) {
+	return 10 ** (offset / span);
+}
+/** The labelled values on one decade. Every real slide rule numbers these. */
+function majorTicks() {
+	return [
+		1,
+		2,
+		3,
+		4,
+		5,
+		6,
+		7,
+		8,
+		9,
+		10
+	];
+}
+/**
+* Unlabelled subdivisions. They crowd towards the right because the scale is
+* logarithmic, which is the visual fact the lab wants a learner to notice.
+*/
+function minorTicks() {
+	const out = [];
+	for (let v = 1.1; v < 2; v += .1) out.push(round2(v));
+	for (let v = 2.2; v < 5; v += .2) out.push(round2(v));
+	for (let v = 5.5; v < 10; v += .5) out.push(round2(v));
+	return out;
+}
+function round2(v) {
+	return Math.round(v * 100) / 100;
+}
+/** How far the sliding scale must travel so its 1 sits directly over `a`. */
+function alignFor(a, span) {
+	return logOffset(a, span);
+}
+/**
+* The value on the fixed scale underneath the sliding scale's `b`, when the
+* slide has travelled `slide` units. With the slide set by `alignFor(a)` this
+* returns a × b, because the two lengths have been added.
+*/
+function readingAt(slide, b, span) {
+	return valueAt(slide + logOffset(b, span), span);
+}
+/**
+* A slide rule gives you the DIGITS and leaves the decimal point to you: the
+* scale only spans one decade, so 4 × 5 runs off the end and is read as 2.0 with
+* one decade added. That split is exactly "a logarithm is a whole part plus a
+* fraction", which is why log tables print only the fractional part.
+*/
+function productOf(a, b) {
+	const product = clampValue(a) * clampValue(b);
+	const decades = product >= 10 ? Math.floor(Math.log10(product)) : 0;
+	return {
+		product,
+		mantissa: product / 10 ** decades,
+		decades,
+		offScale: product > 10
+	};
+}
+/** Snap a dragged offset to the nearest tick, so a learner can land exactly on a value. */
+function snapOffset(offset, span) {
+	const value = valueAt(offset, span);
+	const ticks = [...majorTicks(), ...minorTicks()];
+	let best = 1;
+	for (const tick of ticks) if (Math.abs(tick - value) < Math.abs(best - value)) best = tick;
+	return logOffset(best, span);
+}
+/** True when the slide is close enough to `a` to count as lined up. */
+function isAligned(slide, a, span, tolerance = 4) {
+	return Math.abs(slide - alignFor(a, span)) <= tolerance;
+}
+
+//#endregion
+export { alignFor, clampValue, isAligned, logOffset, majorTicks, minorTicks, productOf, readingAt, snapOffset, valueAt };

package/dist/math/slide-rule/index.d.mts

@@ -0,0 +1,2 @@
+import { SlideRuleLab, SlideRuleProps } from "./preset.mjs";
+import { Product, alignFor, isAligned, logOffset, productOf, readingAt, snapOffset, valueAt } from "./core.mjs";

package/dist/math/slide-rule/preset.d.mts

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+
+//#region src/math/slide-rule/preset.d.ts
+interface SlideRuleProps {
+  /** The value the sliding scale's 1 should be set over. */
+  a?: number;
+  /** The value read on the sliding scale once it is set. */
+  b?: number;
+  /** Start with the rule already lined up, for a lesson that only wants the picture. */
+  aligned?: boolean;
+  title?: string;
+  prompt?: string;
+  activity?: string;
+}
+declare function SlideRuleLab({
+  a: aProp,
+  b: bProp,
+  aligned: startAligned,
+  title,
+  prompt,
+  activity
+}: SlideRuleProps): ReactNode;
+//#endregion
+export { SlideRuleLab, SlideRuleProps };

package/dist/math/slide-rule/preset.mjs

@@ -0,0 +1,330 @@
+'use client';
+
+import { Slider } from "../../kit/controls.mjs";
+import { Activity } from "../../kit/activity.mjs";
+import { Field, LiveRegion, Readout } from "../../kit/frame.mjs";
+import { ChallengeCard, useChallenge, useCheckpoint } from "../../kit/pedagogy.mjs";
+import { Figure, HUE, STROKE } from "../../kit/figure/figure.mjs";
+import { FigText } from "../../kit/figure/text.mjs";
+import { alignFor, clampValue, isAligned, logOffset, majorTicks, minorTicks, productOf, readingAt, snapOffset } from "./core.mjs";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/math/slide-rule/preset.tsx
+/**
+* The slide rule: why a logarithm turns multiplication into addition.
+*
+* A static derivation can show that log(ab) = log a + log b. It cannot show the
+* ADDITION happening, which is the step a learner actually needs. Here the two
+* lengths are physical: slide the top scale so its 1 sits over 2, look under its
+* 3, and 6 is waiting, because the length for 2 and the length for 3 were laid
+* end to end. The learner predicts the landing point BEFORE sliding, so the
+* "surely it is 5" instinct gets tested rather than skipped.
+*/
+const W = 440;
+const H = 206;
+const X0 = 35;
+const SPAN = 260;
+const C_TOP = 24;
+const C_BOT = 68;
+const D_TOP = 74;
+const D_BOT = 118;
+const BAR_Y = 168;
+/** Numbered ticks. 7 and 9 stay unnumbered: at this width their numerals would
+*  touch their neighbours, which is exactly what a pocket slide rule does too. */
+const NUMBERED = [
+	1,
+	2,
+	3,
+	4,
+	5,
+	6,
+	8,
+	10
+];
+const fmt = (v) => Math.abs(v - Math.round(v)) < .05 ? String(Math.round(v)) : v.toFixed(2);
+function SlideRuleLab({ a: aProp = 2, b: bProp = 3, aligned: startAligned = false, title, prompt, activity = "slide-rule" }) {
+	const a = clampValue(aProp);
+	const b = clampValue(bProp);
+	const [slide, setSlide] = useState(() => startAligned ? alignFor(a, SPAN) : 0);
+	const drag = useRef(null);
+	const lined = isAligned(slide, a, SPAN);
+	const reading = readingAt(slide, b, SPAN);
+	const { product, offScale, mantissa } = productOf(a, b);
+	const wrongs = [
+		{
+			value: "sum",
+			n: a + b,
+			feedback: `That is ${fmt(a)} + ${fmt(b)}. The two LENGTHS add, but each length stands for a logarithm, so the values they mark multiply.`
+		},
+		{
+			value: "power",
+			n: a ** b,
+			feedback: `That is ${fmt(a)} multiplied by itself ${fmt(b)} times. The rule lays two different lengths end to end, it does not repeat one of them.`
+		},
+		{
+			value: "near",
+			n: product + 1,
+			feedback: "The rule is exact. The answer sits wherever the second length ends, not near it."
+		}
+	].filter((c) => Math.abs(c.n - product) > .001);
+	const questions = [{
+		id: "landing",
+		prompt: `Set the sliding scale's 1 over ${fmt(a)}, then look under its ${fmt(b)}. What will be underneath?`,
+		choices: [
+			{
+				value: wrongs[0].value,
+				label: fmt(wrongs[0].n),
+				feedback: wrongs[0].feedback
+			},
+			{
+				value: "product",
+				label: fmt(product)
+			},
+			{
+				value: wrongs[1].value,
+				label: fmt(wrongs[1].n),
+				feedback: wrongs[1].feedback
+			}
+		],
+		answer: "product",
+		explain: `${fmt(product)}. The length for ${fmt(a)} plus the length for ${fmt(b)} is the length for ${fmt(product)}, because log ${fmt(a)} + log ${fmt(b)} = log ${fmt(product)}.`
+	}];
+	const challenge = useChallenge(questions);
+	useCheckpoint({
+		solved: challenge.allCorrect && lined,
+		activity,
+		response: challenge.picks.landing
+	});
+	const clampSlide = (v) => Math.min(SPAN, Math.max(0, v));
+	const onDown = (event) => {
+		drag.current = event.clientX;
+		event.currentTarget.setPointerCapture(event.pointerId);
+	};
+	const onMove = (event) => {
+		if (drag.current === null) return;
+		const box = event.currentTarget.getBoundingClientRect();
+		const dx = (event.clientX - drag.current) * W / (box.width || W);
+		drag.current = event.clientX;
+		setSlide((v) => clampSlide(v + dx));
+	};
+	const onUp = () => {
+		if (drag.current === null) return;
+		drag.current = null;
+		setSlide((v) => clampSlide(snapOffset(v, SPAN)));
+	};
+	const onKey = (event) => {
+		const step = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
+		if (!step) return;
+		event.preventDefault();
+		setSlide((v) => clampSlide(v + step * 6));
+	};
+	const ticks = (shift, pointsDown, key) => {
+		const edge = pointsDown ? C_BOT : D_TOP;
+		const dir = pointsDown ? -1 : 1;
+		const out = [];
+		for (const v of minorTicks()) {
+			const x = X0 + shift + logOffset(v, SPAN);
+			out.push(/* @__PURE__ */ jsx("line", {
+				x1: x,
+				y1: edge,
+				x2: x,
+				y2: edge + dir * 5,
+				stroke: HUE.soft,
+				strokeWidth: STROKE.hair
+			}, `${key}-m-${v}`));
+		}
+		for (const v of majorTicks()) {
+			const x = X0 + shift + logOffset(v, SPAN);
+			out.push(/* @__PURE__ */ jsx("line", {
+				x1: x,
+				y1: edge,
+				x2: x,
+				y2: edge + dir * 11,
+				stroke: HUE.ink,
+				strokeWidth: STROKE.line
+			}, `${key}-t-${v}`));
+		}
+		return out;
+	};
+	const numerals = (shift, y, key) => NUMBERED.map((v) => /* @__PURE__ */ jsx(FigText, {
+		x: X0 + shift + logOffset(v, SPAN),
+		y,
+		anchor: "middle",
+		baseline: "middle",
+		tone: v === 1 || v === b || v === a ? "ink" : "soft",
+		size: "label",
+		halo: false,
+		children: v
+	}, `${key}-n-${v}`));
+	const readingX = X0 + slide + logOffset(b, SPAN);
+	const aX = X0 + logOffset(a, SPAN);
+	const endX = aX + logOffset(b, SPAN);
+	const figure = /* @__PURE__ */ jsxs(Figure, {
+		viewBox: [W, H],
+		domain: "math",
+		label: `A slide rule. The sliding scale is offset by ${Math.round(slide)} units, so its ${fmt(b)} stands over ${fmt(reading)} on the fixed scale.`,
+		children: [
+			/* @__PURE__ */ jsx(FigText, {
+				x: X0 + slide,
+				y: 14,
+				anchor: "start",
+				tone: "soft",
+				size: "label",
+				children: "slides"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: X0 + slide - 16,
+				y: C_TOP,
+				width: 292,
+				height: C_BOT - C_TOP,
+				rx: 6,
+				fill: "var(--fig-surface-strong)",
+				stroke: HUE[1],
+				strokeWidth: STROKE.line,
+				role: "slider",
+				tabIndex: 0,
+				"aria-label": "Upper scale position",
+				"aria-valuemin": 0,
+				"aria-valuemax": SPAN,
+				"aria-valuenow": Math.round(slide),
+				"aria-valuetext": `sliding 1 over ${fmt(readingAt(slide, 1, SPAN))}`,
+				onKeyDown: onKey,
+				className: "math-slide-rule-body"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: X0 - 16,
+				y: D_TOP,
+				width: 292,
+				height: D_BOT - D_TOP,
+				rx: 6,
+				fill: "var(--fig-surface)",
+				stroke: HUE.soft,
+				strokeWidth: STROKE.line
+			}),
+			/* @__PURE__ */ jsx("line", {
+				x1: readingX,
+				y1: C_TOP - 4,
+				x2: readingX,
+				y2: 176,
+				stroke: HUE.warn,
+				strokeWidth: STROKE.line
+			}),
+			ticks(slide, true, "c"),
+			numerals(slide, 48, "c"),
+			ticks(0, false, "d"),
+			numerals(0, 104, "d"),
+			/* @__PURE__ */ jsx(FigText, {
+				x: X0,
+				y: 136,
+				anchor: "start",
+				tone: "soft",
+				size: "label",
+				children: "fixed"
+			}),
+			/* @__PURE__ */ jsx("line", {
+				x1: X0,
+				y1: BAR_Y,
+				x2: aX,
+				y2: BAR_Y,
+				stroke: HUE[1],
+				strokeWidth: STROKE.bold,
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ jsx("line", {
+				x1: aX,
+				y1: BAR_Y,
+				x2: endX,
+				y2: BAR_Y,
+				stroke: HUE[2],
+				strokeWidth: STROKE.bold,
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ jsxs(FigText, {
+				x: (X0 + aX) / 2,
+				y: BAR_Y - 14,
+				anchor: "middle",
+				tone: "hue-1",
+				size: "label",
+				children: ["log ", fmt(a)]
+			}),
+			/* @__PURE__ */ jsxs(FigText, {
+				x: (aX + endX) / 2,
+				y: BAR_Y - 14,
+				anchor: "middle",
+				tone: "hue-2",
+				size: "label",
+				children: ["log ", fmt(b)]
+			}),
+			/* @__PURE__ */ jsxs(FigText, {
+				x: endX,
+				y: 190,
+				anchor: "middle",
+				tone: "ink",
+				size: "label",
+				children: ["= log ", fmt(product)]
+			}),
+			/* @__PURE__ */ jsx(FigText, {
+				x: X0,
+				y: 190,
+				anchor: "start",
+				tone: "soft",
+				size: "label",
+				children: "end to end"
+			})
+		]
+	});
+	const narration = lined ? `The sliding 1 is over ${fmt(a)}, so its ${fmt(b)} stands over ${fmt(reading)}.` : `Slide the upper scale until its 1 sits over ${fmt(a)}.`;
+	return /* @__PURE__ */ jsxs(Activity.Root, {
+		className: "math-slide-rule",
+		children: [
+			/* @__PURE__ */ jsxs(Activity.Header, { children: [/* @__PURE__ */ jsx(Activity.Heading, {
+				eyebrow: "Logarithms",
+				title: title ?? "Multiply by adding lengths",
+				description: prompt ?? "A slide rule has no gears. Each number sits at a distance equal to its logarithm, so sliding one scale along the other adds two lengths and multiplies two values."
+			}), /* @__PURE__ */ jsx(Activity.FocusButton, {})] }),
+			/* @__PURE__ */ jsxs(Activity.Status, { children: [/* @__PURE__ */ jsxs("span", { children: [
+				"slide ",
+				Math.round(slide),
+				" units"
+			] }), /* @__PURE__ */ jsxs("span", { children: ["sliding 1 over ", fmt(readingAt(slide, 1, SPAN))] })] }),
+			/* @__PURE__ */ jsxs(Activity.Workspace, { children: [/* @__PURE__ */ jsx(Activity.Canvas, {
+				label: "Slide rule",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "math-slide-rule-surface",
+					onPointerDown: onDown,
+					onPointerMove: onMove,
+					onPointerUp: onUp,
+					onPointerCancel: onUp,
+					children: figure
+				})
+			}), /* @__PURE__ */ jsxs(Activity.Dock, { children: [/* @__PURE__ */ jsx(Readout, {
+				label: "the rule reads",
+				value: fmt(reading),
+				sub: lined ? `the sliding ${fmt(b)} sits over it` : "line up the sliding 1 first"
+			}), /* @__PURE__ */ jsx(Field, {
+				label: "slide",
+				value: `${Math.round(slide)}`,
+				children: /* @__PURE__ */ jsx(Slider, {
+					value: Math.round(slide),
+					min: 0,
+					max: SPAN,
+					step: 1,
+					onChange: (v) => setSlide(v),
+					onCommit: (v) => setSlide(snapOffset(v, SPAN)),
+					ariaLabel: "slide the upper scale",
+					valueText: `${Math.round(slide)} units`
+				})
+			})] })] }),
+			/* @__PURE__ */ jsx(ChallengeCard, {
+				questions,
+				state: challenge
+			}),
+			/* @__PURE__ */ jsxs(Activity.Feedback, { children: [/* @__PURE__ */ jsx("span", { children: "What to notice" }), /* @__PURE__ */ jsx("div", { children: offScale ? `The answer ran past the end of the scale, so the rule shows ${fmt(mantissa)} and you supply the decade: ${fmt(product)}. That split is a logarithm's whole part and fractional part, which is why log tables print only the fraction.` : "Neither scale moved its numbers. Only the distance between them changed, and distance on these scales is logarithm." })] }),
+			/* @__PURE__ */ jsx(LiveRegion, { children: narration })
+		]
+	});
+}
+
+//#endregion
+export { SlideRuleLab };

package/dist/math/solid-net/core.d.mts

@@ -0,0 +1,48 @@
+//#region src/math/solid-net/core.d.ts
+/**
+ * Solids, without pretending a flat screen is three-dimensional.
+ *
+ * The four ideas this covers are all taught badly by a drawing of a box in
+ * perspective, because the faces you most need to count are the ones hidden round
+ * the back. Each mode here is a FLAT view that shows every part at once:
+ *
+ *   layers   a front elevation of the stack, so volume is "one layer, h times"
+ *            and the cubed unit is something you count rather than memorise
+ *   net      the solid opened out, so every face is visible and addable
+ *   sphere   a side view with r marked, the only honest flat view of a ball
+ *   compound two solids joined, with the faces that vanish at the join marked
+ *
+ * Pure geometry, no React: each mode returns rectangles, circles and labels in
+ * one coordinate space, and the component scales them to fit.
+ */
+type SolidMode = 'layers' | 'net' | 'sphere' | 'compound';
+interface Box {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  /** 'face' is a surface you count, 'body' is the solid, 'lost' vanishes at a join. */
+  tone: 'face' | 'body' | 'lost';
+  label?: string;
+  /** Matching-face family in an opened cuboid net. */
+  pair?: 0 | 1 | 2;
+}
+interface Dims {
+  length: number;
+  width: number;
+  height: number;
+  /** Second solid's height, compound mode. */
+  topHeight: number;
+  radius: number;
+}
+interface SolidReadout {
+  volume: number;
+  surface: number;
+  /** What the mode is asking the learner to notice. */
+  note: string;
+}
+declare function readout(mode: SolidMode, d: Dims): SolidReadout;
+/** The pieces to draw for `mode`. Sphere is drawn by the component as a circle. */
+declare function solidPieces(mode: SolidMode, d?: Dims): Box[];
+//#endregion
+export { Box, Dims, SolidMode, readout, solidPieces };