@classytic/labs 0.2.0 → 0.3.0

package/dist/kit/logic-gates/_shared.mjs

@@ -0,0 +1,11 @@
+//#region src/kit/logic-gates/_shared.ts
+/** Shared colour tokens for the logic-gate glyph kit (pure --stage-* references). */
+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)";
+
+//#endregion
+export { BG, FG, LIVE, METAL, SHEEN, WIRE };

package/dist/kit/{logic-gates.mjs → logic-gates/display.mjs}

@@ -1,137 +1,9 @@
 'use client';
 
+import { BG, FG, LIVE, METAL, SHEEN } from "./_shared.mjs";
 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
-		}
-	};
-}
-/** Where a small TYPE label (AND/OR/…) sits INSIDE the gate body: resolved per shape so it lands
-*  on the visual centroid (the D-body of AND, the right-shifted bulge of OR/XOR, the triangle of
-*  NOT) instead of overlapping an edge. */
-function gateLabelPos(type, x, y, s) {
-	const base = baseOf(type);
-	const cy = y + s / 2;
-	if (base === "OR" || base === "XOR") return {
-		x: x + .46 * s,
-		y: cy
-	};
-	if (base === "NOT") return {
-		x: x + .3 * s,
-		y: cy
-	};
-	return {
-		x: x + .38 * s,
-		y: cy
-	};
-}
-/** A logic gate glyph. `live` = its OUTPUT is high. */
-function GateGlyph({ x, y, size: s, type, live, label }) {
-	const base = baseOf(type);
-	const stroke = live ? LIVE : METAL;
-	const fill = live ? "color-mix(in oklab, var(--stage-live) 14%, var(--stage-bg))" : BG;
-	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,
-		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,
-			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,
-		stroke,
-		strokeWidth: 2,
-		strokeLinejoin: "round"
-	});
-	return /* @__PURE__ */ jsxs("g", { children: [
-		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 && (() => {
-			const lp = gateLabelPos(type, x, y, s);
-			return /* @__PURE__ */ jsx("text", {
-				x: lp.x,
-				y: lp.y,
-				fill: FG,
-				fontSize: Math.max(7, s * .17),
-				fontWeight: 700,
-				textAnchor: "middle",
-				dominantBaseline: "central",
-				style: { pointerEvents: "none" },
-				children: label
-			});
-		})()
-	] });
-}
+//#region src/kit/logic-gates/display.tsx
 /** An output LED: a clean filled disc (lit = `color`, idle = a faint outlined disc). No glow. */
 function Lamp({ cx, cy, r, on, color = LIVE, label }) {
 	return /* @__PURE__ */ jsxs("g", { children: [
@@ -153,7 +25,7 @@ function Lamp({ cx, cy, r, on, color = LIVE, label }) {
 		label && /* @__PURE__ */ jsx("text", {
 			x: cx,
 			y: cy + r + 5,
-			fill: FG,
+			fill: "var(--stage-fg)",
 			fontSize: Math.max(8, r * .85),
 			fontWeight: 700,
 			textAnchor: "middle",
@@ -394,7 +266,7 @@ function ToggleSwitch({ x, y, w, h, on, label }) {
 		label && /* @__PURE__ */ jsx("text", {
 			x: x + w / 2,
 			y: y - 4,
-			fill: FG,
+			fill: "var(--stage-fg)",
 			fontSize: Math.max(9, h * .7),
 			fontWeight: 700,
 			textAnchor: "middle",
@@ -406,4 +278,4 @@ function ToggleSwitch({ x, y, w, h, on, label }) {
 }
 
 //#endregion
-export { GateGlyph, Lamp, SevenSegment, ToggleSwitch, gatePorts };
+export { Lamp, SevenSegment, ToggleSwitch };

package/dist/kit/{logic-gates.d.mts → logic-gates/gate.d.mts}

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 
-//#region src/kit/logic-gates.d.ts
+//#region src/kit/logic-gates/gate.d.ts
 type GateType = 'AND' | 'OR' | 'NOT' | 'NAND' | 'NOR' | 'XOR' | 'XNOR';
 //#endregion
 export { GateType };

package/dist/kit/logic-gates/gate.mjs

@@ -0,0 +1,132 @@
+'use client';
+
+import { BG, FG, LIVE, METAL, SHEEN, WIRE } from "./_shared.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/kit/logic-gates/gate.tsx
+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
+		}
+	};
+}
+/** Where a small TYPE label (AND/OR/…) sits INSIDE the gate body: resolved per shape so it lands
+*  on the visual centroid (the D-body of AND, the right-shifted bulge of OR/XOR, the triangle of
+*  NOT) instead of overlapping an edge. */
+function gateLabelPos(type, x, y, s) {
+	const base = baseOf(type);
+	const cy = y + s / 2;
+	if (base === "OR" || base === "XOR") return {
+		x: x + .46 * s,
+		y: cy
+	};
+	if (base === "NOT") return {
+		x: x + .3 * s,
+		y: cy
+	};
+	return {
+		x: x + .38 * s,
+		y: cy
+	};
+}
+/** A logic gate glyph. `live` = its OUTPUT is high. */
+function GateGlyph({ x, y, size: s, type, live, label }) {
+	const base = baseOf(type);
+	const stroke = live ? LIVE : METAL;
+	const fill = live ? "color-mix(in oklab, var(--stage-live) 14%, var(--stage-bg))" : BG;
+	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,
+		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,
+			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,
+		stroke,
+		strokeWidth: 2,
+		strokeLinejoin: "round"
+	});
+	return /* @__PURE__ */ jsxs("g", { children: [
+		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: "var(--stage-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 + .12 * s},${y + .14 * s} H${x + .4 * s}` : base === "NOT" ? `M${x + .14 * s},${y + .19 * s} L${x + .36 * s},${y + .36 * s}` : `M${x + .28 * s},${y + .14 * s} q${.14 * s},${.03 * s} ${.28 * s},${.13 * s}`,
+			fill: "none",
+			stroke: SHEEN,
+			strokeWidth: 1.4,
+			strokeLinecap: "round"
+		}),
+		label && (() => {
+			const lp = gateLabelPos(type, x, y, s);
+			return /* @__PURE__ */ jsx("text", {
+				x: lp.x,
+				y: lp.y,
+				fill: "var(--stage-fg)",
+				fontSize: Math.max(7, s * .17),
+				fontWeight: 700,
+				textAnchor: "middle",
+				dominantBaseline: "central",
+				style: { pointerEvents: "none" },
+				children: label
+			});
+		})()
+	] });
+}
+
+//#endregion
+export { GateGlyph, gatePorts };

package/dist/kit/networking/glyphs.mjs

@@ -0,0 +1,157 @@
+'use client';
+
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/kit/networking/glyphs.tsx
+function DeviceSymbol({ kind }) {
+	switch (kind) {
+		case "client": return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("rect", {
+			x: "11",
+			y: "10",
+			width: "26",
+			height: "18",
+			rx: "2"
+		}), /* @__PURE__ */ jsx("path", { d: "M8 34h32M17 28l-2 6m16-6 2 6" })] });
+		case "server": return /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("rect", {
+				x: "12",
+				y: "7",
+				width: "24",
+				height: "34",
+				rx: "3"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "M16 17h16M16 27h16" }),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "18",
+				cy: "12",
+				r: "1.5"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "18",
+				cy: "22",
+				r: "1.5"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "18",
+				cy: "32",
+				r: "1.5"
+			})
+		] });
+		case "switch": return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("rect", {
+			x: "7",
+			y: "15",
+			width: "34",
+			height: "19",
+			rx: "4"
+		}), /* @__PURE__ */ jsx("path", { d: "M13 22h7m-3-3 3 3-3 3m18 2h-7m3-3-3 3 3 3" })] });
+		case "router": return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("ellipse", {
+			cx: "24",
+			cy: "24",
+			rx: "18",
+			ry: "12"
+		}), /* @__PURE__ */ jsx("path", { d: "M13 24h22m-4-4 4 4-4 4m-14-8-4 4 4 4" })] });
+		case "access-point": return /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("path", { d: "M11 37h26M24 37V25" }),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "24",
+				cy: "21",
+				r: "3"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "M17 16a10 10 0 0 1 14 0M12 11a17 17 0 0 1 24 0" })
+		] });
+		case "firewall": return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("path", { d: "M8 12h32v25H8zM8 20h32M8 29h32M18 12v8m12 0v9m-12 0v8" }) });
+		case "load-balancer": return /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "24",
+				r: "4"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "36",
+				cy: "13",
+				r: "4"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "36",
+				cy: "35",
+				r: "4"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "M16 24h7m0 0 9-11m-9 11 9 11" })
+		] });
+		case "cloud": return /* @__PURE__ */ jsx("path", { d: "M14 36h22a8 8 0 0 0 1-16 13 13 0 0 0-25-2 9 9 0 0 0 2 18Z" });
+		case "dns": return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("circle", {
+			cx: "24",
+			cy: "24",
+			r: "17"
+		}), /* @__PURE__ */ jsx("path", { d: "M7 24h34M24 7c6 6 6 28 0 34M24 7c-6 6-6 28 0 34" })] });
+		case "broker": return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("rect", {
+			x: "8",
+			y: "9",
+			width: "32",
+			height: "30",
+			rx: "4"
+		}), /* @__PURE__ */ jsx("path", { d: "M14 17h20M14 24h20M14 31h12m5-3 4 3-4 3" })] });
+		default: return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("rect", {
+			x: "9",
+			y: "9",
+			width: "30",
+			height: "30",
+			rx: "6"
+		}), /* @__PURE__ */ jsx("circle", {
+			cx: "24",
+			cy: "24",
+			r: "6"
+		})] });
+	}
+}
+/** Vendor-neutral, currentColor network device glyph with a generous focus target. */
+function NetworkDeviceGlyph({ device, active, selected, onSelect }) {
+	const interactive = !!onSelect;
+	return /* @__PURE__ */ jsxs("g", {
+		transform: `translate(${device.at.x - 30} ${device.at.y - 34})`,
+		className: "network-device",
+		"data-active": active || void 0,
+		"data-selected": selected || void 0,
+		role: interactive ? "button" : "group",
+		tabIndex: interactive ? 0 : void 0,
+		"aria-label": `${device.kind} ${device.label}${active ? ", current packet location" : ""}`,
+		onClick: onSelect,
+		onKeyDown: interactive ? (event) => {
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				onSelect();
+			}
+		} : void 0,
+		style: { cursor: interactive ? "pointer" : void 0 },
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				className: "network-device-surface",
+				x: "0",
+				y: "0",
+				width: "60",
+				height: "68",
+				rx: "12"
+			}),
+			/* @__PURE__ */ jsx("g", {
+				className: "network-device-symbol",
+				transform: "translate(6 4)",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				children: /* @__PURE__ */ jsx(DeviceSymbol, { kind: device.kind })
+			}),
+			/* @__PURE__ */ jsx("text", {
+				className: "network-device-label",
+				x: "30",
+				y: "60",
+				textAnchor: "middle",
+				children: device.label
+			})
+		]
+	});
+}
+
+//#endregion
+export { NetworkDeviceGlyph };

package/dist/kit/palette.mjs

@@ -13,14 +13,12 @@
 * cat-1/2/3 align with --stage-accent / --stage-accent-2 / --stage-good.
 */
 const N = 8;
-/** `var(--stage-cat-N)` strings — drop straight into SVG fill/stroke or CSS. */
+/** `var(--stage-cat-N)` strings, drop straight into SVG fill/stroke or CSS. */
 const CATEGORICAL = Array.from({ length: N }, (_, i) => `var(--stage-cat-${i + 1})`);
-/** Bare custom-property names — for canvas labs that resolve via getPropertyValue. */
+/** Bare custom-property names, for canvas labs that resolve via getPropertyValue. */
 const CATEGORICAL_TOKENS = Array.from({ length: N }, (_, i) => `--stage-cat-${i + 1}`);
-/** The i-th categorical colour (var string), wrapping. */
-const catColor = (i) => CATEGORICAL[(i % N + N) % N];
 /** The i-th categorical token name (for canvas getPropertyValue), wrapping. */
 const catToken = (i) => CATEGORICAL_TOKENS[(i % N + N) % N];
 
 //#endregion
-export { CATEGORICAL, catColor, catToken };
+export { CATEGORICAL, catToken };

package/dist/kit/pedagogy.d.mts

@@ -16,6 +16,8 @@ interface CheckpointArgs {
   hintPenalty?: number;
   /** The learner's answer to pass through to the report (e.g. the value they entered). */
   response?: string;
+  /** Change this to begin a deliberately new attempt. Ordinary solved/unsolved motion does not report twice. */
+  attemptKey?: string | number;
 }
 /** Report completion once, the first time `solved` becomes true. */
 declare function useCheckpoint({
@@ -24,7 +26,8 @@ declare function useCheckpoint({
   score,
   hintsUsed,
   hintPenalty,
-  response
+  response,
+  attemptKey
 }: CheckpointArgs): {
   solved: boolean;
   reported: boolean;
@@ -53,6 +56,8 @@ declare function HintLadder({
 interface ChallengeChoice {
   value: string;
   label: ReactNode;
+  /** Misconception-specific coaching shown when this wrong choice is selected. */
+  feedback?: ReactNode;
 }
 interface ChallengeQuestion {
   id: string;
@@ -63,9 +68,12 @@ interface ChallengeQuestion {
   answer: string;
   /** the "why", revealed once this question is answered correctly. */
   explain?: ReactNode;
+  /** Fallback coaching for a wrong choice without its own feedback. */
+  tryAgain?: ReactNode;
 }
 interface ChallengeState {
   picks: Record<string, string | undefined>;
+  attempts: Record<string, number>;
   pick: (id: string, value: string) => void;
   /** all questions answered correctly → the lab is solved. */
   allCorrect: boolean;