@classytic/labs 0.1.0

package/dist/kit/frame.mjs

@@ -0,0 +1,205 @@
+'use client';
+
+import { createContext, useContext } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/kit/frame.tsx
+/**
+* LabFrame — the shared layout shell every lab composes into, so labs stop being
+* hand-rolled inline-styled one-offs and read as ONE product. Structure:
+*
+*   title + one-line prompt           (header — no walls of text)
+*   [▸ goals]                         (collapsed disclosure, reveal-on-action)
+*   ┌─ figure (dominant) ─┬─ aside ─┐ (one grid; aside optional + narrow)
+*   └─────────────────────┴─────────┘
+*   [ one controls bar ]             (ALL knobs in one place, never scattered)
+*   feedback / hints / reveal        (quiet footer)
+*
+* Everything styles off `.lab-*` in @classytic/labs/styles.css — no inline layout.
+* Pair with the existing pedagogy kit (HintLadder, RevealSolution, Feedback).
+*
+* CREATOR CONTROL — `controlConfig` lets the author decide, per knob, what a learner
+* may touch: `{ hide: ['mass'], lock: ['angle'] }`. Hidden knobs vanish; locked knobs
+* stay visible but read-only (their value is whatever the creator set as the initial
+* prop). LabFrame provides this as context; `Field` (keyed by its `name ?? label`) and
+* the `Control` wrapper consume it — so a lab opts in with ~2 lines and every knob,
+* existing or new, honours it. The mechanism is uniform: no per-knob boolean props.
+*/
+const ControlCtx = createContext(void 0);
+/** Resolve a single control's state from the surrounding `controlConfig`. */
+function useControlOverride(name) {
+	const cfg = useContext(ControlCtx);
+	return {
+		hide: !!cfg?.hide?.includes(name),
+		lock: !!cfg?.lock?.includes(name)
+	};
+}
+const INERT = { inert: true };
+function LabFrame({ title, prompt, objectives, children, aside, controls, footer, rootRef, controlConfig }) {
+	return /* @__PURE__ */ jsx(ControlCtx.Provider, {
+		value: controlConfig,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: rootRef,
+			className: "not-prose lab-frame",
+			children: [
+				(title || prompt) && /* @__PURE__ */ jsxs("div", {
+					className: "lab-frame-head",
+					children: [title && /* @__PURE__ */ jsx("p", {
+						className: "lab-title",
+						children: title
+					}), prompt && /* @__PURE__ */ jsx("p", {
+						className: "lab-prompt",
+						children: prompt
+					})]
+				}),
+				objectives && objectives.length > 0 && /* @__PURE__ */ jsxs("details", {
+					className: "lab-goals",
+					children: [/* @__PURE__ */ jsx("summary", { children: "What you'll learn" }), /* @__PURE__ */ jsx("ul", { children: objectives.map((o, i) => /* @__PURE__ */ jsx("li", { children: o }, i)) })]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "lab-body",
+					"data-aside": aside ? "true" : "false",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "lab-figure",
+						children
+					}), aside && /* @__PURE__ */ jsx("div", {
+						className: "lab-aside",
+						children: aside
+					})]
+				}),
+				controls && /* @__PURE__ */ jsx("div", {
+					className: "lab-controls",
+					children: controls
+				}),
+				footer && /* @__PURE__ */ jsx("div", {
+					className: "lab-foot",
+					children: footer
+				})
+			]
+		})
+	});
+}
+/** The single controls bar. Put `Field`s (or any control) inside. */
+function ControlBar({ children }) {
+	return /* @__PURE__ */ jsx(Fragment$1, { children });
+}
+const LockMark = () => /* @__PURE__ */ jsxs("svg", {
+	className: "lab-field-lock",
+	viewBox: "0 0 24 24",
+	"aria-hidden": "true",
+	focusable: "false",
+	children: [/* @__PURE__ */ jsx("rect", {
+		x: "5",
+		y: "11",
+		width: "14",
+		height: "9",
+		rx: "2",
+		fill: "currentColor"
+	}), /* @__PURE__ */ jsx("path", {
+		d: "M8 11V8a4 4 0 0 1 8 0v3",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2"
+	})]
+});
+/**
+* A labelled control: small-caps label + (control + value) on one row.
+* Participates in creator `controlConfig` via `name ?? label`.
+*/
+function Field({ label, name, value, children }) {
+	const { hide, lock } = useControlOverride(name ?? label);
+	if (hide) return null;
+	return /* @__PURE__ */ jsxs("span", {
+		className: "lab-field",
+		"data-locked": lock ? "true" : void 0,
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "lab-field-label",
+			children: [label, lock && /* @__PURE__ */ jsx(LockMark, {})]
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "lab-field-row",
+			children: [lock ? /* @__PURE__ */ jsx("span", {
+				className: "lab-locked-wrap",
+				...INERT,
+				children
+			}) : children, value != null && /* @__PURE__ */ jsx("span", {
+				className: "lab-field-val",
+				children: value
+			})]
+		})]
+	});
+}
+/**
+* Wrap any non-Field control (a toggle, an action button) so it honours the creator's
+* hide/lock policy too: `<Control name="components"><Chip…/></Control>`.
+*/
+function Control({ name, children }) {
+	const { hide, lock } = useControlOverride(name);
+	if (hide) return null;
+	if (!lock) return /* @__PURE__ */ jsx(Fragment$1, { children });
+	return /* @__PURE__ */ jsx("span", {
+		className: "lab-locked-wrap",
+		...INERT,
+		children
+	});
+}
+/** A highlighted readout box. `tone="result"` for the headline answer. */
+function Callout({ tone, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "lab-callout",
+		"data-tone": tone ?? "info",
+		children
+	});
+}
+const SR_ONLY = {
+	position: "absolute",
+	width: 1,
+	height: 1,
+	overflow: "hidden",
+	clipPath: "inset(50%)"
+};
+/** Visually-hidden polite live region for screen-reader narration of a changing value. */
+function LiveRegion({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		"aria-live": "polite",
+		style: SR_ONLY,
+		children
+	});
+}
+/**
+* A labelled progress/energy bar: `frac` (0–1) fills it, `value` is the right-hand
+* readout. Replaces the hand-rolled bars in collision/energy/impulse/etc.
+*/
+function MeterBar({ label, frac, color, value }) {
+	const pct = Math.max(0, Math.min(1, frac)) * 100;
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			justifyContent: "space-between",
+			fontSize: 11,
+			fontWeight: 700,
+			color: "var(--stage-muted)"
+		},
+		children: [/* @__PURE__ */ jsx("span", { children: label }), value != null && /* @__PURE__ */ jsx("span", {
+			style: { fontVariantNumeric: "tabular-nums" },
+			children: value
+		})]
+	}), /* @__PURE__ */ jsx("div", {
+		style: {
+			height: 12,
+			borderRadius: 6,
+			background: "color-mix(in oklab, var(--stage-muted) 18%, transparent)",
+			overflow: "hidden",
+			marginTop: 3
+		},
+		children: /* @__PURE__ */ jsx("div", { style: {
+			width: `${pct}%`,
+			height: "100%",
+			background: color,
+			borderRadius: 6,
+			transition: "width 0.1s"
+		} })
+	})] });
+}
+
+//#endregion
+export { Callout, Control, ControlBar, Field, LabFrame, LiveRegion, MeterBar };

package/dist/kit/freq-tree.mjs

@@ -0,0 +1,99 @@
+'use client';
+
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/kit/freq-tree.tsx
+function countLeaves(n) {
+	return n.children?.length ? n.children.reduce((s, c) => s + countLeaves(c), 0) : 1;
+}
+function depth(n) {
+	return n.children?.length ? 1 + Math.max(...n.children.map(depth)) : 0;
+}
+function FrequencyTree({ root, width = 360, ariaLabel = "Natural-frequency tree" }) {
+	const NODE_W = 88, NODE_H = 34, ROW = 46, PADY = 8, PADX = 4;
+	const leaves = countLeaves(root);
+	const levels = depth(root);
+	const H = PADY * 2 + leaves * ROW;
+	const colGap = levels > 0 ? (width - 2 * PADX - NODE_W) / levels : 0;
+	const placed = [];
+	let cursor = 0;
+	const walk = (node, level, parent) => {
+		const idx = placed.length;
+		placed.push({
+			node,
+			x: PADX + level * colGap,
+			y: 0,
+			parent
+		});
+		let y;
+		if (!node.children?.length) {
+			y = PADY + (cursor + .5) * ROW;
+			cursor++;
+		} else {
+			const ys = node.children.map((ch) => walk(ch, level + 1, idx));
+			y = (Math.min(...ys) + Math.max(...ys)) / 2;
+		}
+		placed[idx].y = y;
+		return y;
+	};
+	walk(root, 0, -1);
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: `0 0 ${width} ${H}`,
+		style: {
+			width: "100%",
+			maxWidth: width,
+			height: "auto"
+		},
+		role: "img",
+		"aria-label": ariaLabel,
+		children: [placed.map((p, i) => {
+			if (p.parent < 0) return null;
+			const par = placed[p.parent];
+			const x1 = par.x + NODE_W;
+			const x2 = p.x;
+			const mx = (x1 + x2) / 2;
+			return /* @__PURE__ */ jsx("path", {
+				d: `M ${x1} ${par.y} C ${mx} ${par.y}, ${mx} ${p.y}, ${x2} ${p.y}`,
+				fill: "none",
+				stroke: p.node.color ?? "var(--stage-grid)",
+				strokeWidth: 1.5,
+				opacity: .55
+			}, `e${i}`);
+		}), placed.map((p, i) => {
+			const accent = p.node.color ?? "var(--stage-fg)";
+			const fill = p.node.lit ? `color-mix(in oklab, ${accent} 26%, var(--stage-bg))` : "color-mix(in oklab, var(--stage-fg) 5%, var(--stage-bg))";
+			const stroke = p.node.color ?? "var(--stage-grid)";
+			return /* @__PURE__ */ jsxs("g", { children: [
+				/* @__PURE__ */ jsx("rect", {
+					x: p.x,
+					y: p.y - NODE_H / 2,
+					width: NODE_W,
+					height: NODE_H,
+					rx: 8,
+					fill,
+					stroke,
+					strokeWidth: p.node.lit ? 1.75 : 1
+				}),
+				/* @__PURE__ */ jsx("text", {
+					x: p.x + 9,
+					y: p.y - 2,
+					fontSize: 13,
+					fontWeight: 800,
+					fill: accent,
+					style: { fontVariantNumeric: "tabular-nums" },
+					children: Math.round(p.node.count).toLocaleString()
+				}),
+				/* @__PURE__ */ jsx("text", {
+					x: p.x + 9,
+					y: p.y + 11,
+					fontSize: 9.5,
+					fill: "var(--stage-muted)",
+					children: p.node.label
+				})
+			] }, `n${i}`);
+		})]
+	});
+}
+
+//#endregion
+export { FrequencyTree };

package/dist/kit/gameshow.mjs

@@ -0,0 +1,315 @@
+'use client';
+
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/kit/gameshow.tsx
+const FG = "var(--stage-fg)";
+const METAL = "var(--stage-metal)";
+const GOLD = "var(--stage-warn)";
+const GOOD = "var(--stage-good)";
+const SHEEN = "color-mix(in oklab, var(--stage-sheen, white) 55%, transparent)";
+const LEAF = "color-mix(in oklab, var(--stage-accent) 92%, black)";
+const RECESS = "color-mix(in oklab, var(--stage-fg) 88%, var(--stage-bg))";
+/** A game-show door in box (x,y,w,h). `open` 0→1 swings the leaf aside to reveal
+*  `children` (the prize/goat drawn behind). `picked` rings it; `dim` greys it. */
+function DoorGlyph({ x, y, w, h, label, open = 0, picked = false, dim = false, children }) {
+	const r = Math.min(12, w * .12);
+	const inset = Math.max(4, w * .06);
+	const ix = x + inset, iy = y + inset, iw = w - inset * 2, ih = h - inset * 2;
+	return /* @__PURE__ */ jsxs("g", {
+		opacity: dim ? .45 : 1,
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				x,
+				y,
+				width: w,
+				height: h,
+				rx: r,
+				fill: METAL
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: x + 1.5,
+				y: y + 1.5,
+				width: w - 3,
+				height: h - 3,
+				rx: r - 1,
+				fill: "none",
+				stroke: SHEEN,
+				strokeWidth: 1,
+				opacity: .4
+			}),
+			/* @__PURE__ */ jsx("clipPath", {
+				id: `door-clip-${label ?? ""}-${x}-${y}`,
+				children: /* @__PURE__ */ jsx("rect", {
+					x: ix,
+					y: iy,
+					width: iw,
+					height: ih,
+					rx: r * .6
+				})
+			}),
+			/* @__PURE__ */ jsxs("g", {
+				clipPath: `url(#door-clip-${label ?? ""}-${x}-${y})`,
+				children: [
+					/* @__PURE__ */ jsx("rect", {
+						x: ix,
+						y: iy,
+						width: iw,
+						height: ih,
+						rx: r * .6,
+						fill: RECESS
+					}),
+					/* @__PURE__ */ jsx("rect", {
+						x: ix,
+						y: iy,
+						width: iw,
+						height: ih * .5,
+						fill: "color-mix(in oklab, black 16%, transparent)"
+					}),
+					children
+				]
+			}),
+			/* @__PURE__ */ jsxs("g", {
+				style: {
+					transform: `scaleX(${Math.max(.04, 1 - open)})`,
+					transformOrigin: `${ix}px ${iy + ih / 2}px`,
+					transition: "transform 0.5s cubic-bezier(.4,0,.2,1)"
+				},
+				children: [
+					/* @__PURE__ */ jsx("rect", {
+						x: ix,
+						y: iy,
+						width: iw,
+						height: ih,
+						rx: r * .6,
+						fill: LEAF
+					}),
+					/* @__PURE__ */ jsx("rect", {
+						x: ix + iw * .16,
+						y: iy + ih * .08,
+						width: iw * .68,
+						height: ih * .42,
+						rx: 4,
+						fill: "none",
+						stroke: "color-mix(in oklab, black 22%, transparent)",
+						strokeWidth: 2
+					}),
+					/* @__PURE__ */ jsx("rect", {
+						x: ix + iw * .16,
+						y: iy + ih * .54,
+						width: iw * .68,
+						height: ih * .36,
+						rx: 4,
+						fill: "none",
+						stroke: "color-mix(in oklab, black 22%, transparent)",
+						strokeWidth: 2
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: `M${ix + iw * .5},${iy + 2} V${iy + ih - 2}`,
+						stroke: SHEEN,
+						strokeWidth: 1,
+						opacity: .3
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						cx: ix + iw * .84,
+						cy: iy + ih * .52,
+						r: Math.max(3, w * .05),
+						fill: GOLD,
+						stroke: "color-mix(in oklab, black 25%, transparent)",
+						strokeWidth: 1
+					}),
+					label != null && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("circle", {
+						cx: ix + iw * .5,
+						cy: iy + ih * .3,
+						r: Math.max(11, w * .16),
+						fill: GOLD
+					}), /* @__PURE__ */ jsx("text", {
+						x: ix + iw * .5,
+						y: iy + ih * .3,
+						textAnchor: "middle",
+						dominantBaseline: "central",
+						fontSize: Math.max(13, w * .2),
+						fontWeight: 800,
+						fill: "color-mix(in oklab, black 70%, var(--stage-warn))",
+						children: label
+					})] })
+				]
+			}),
+			picked && /* @__PURE__ */ jsx("rect", {
+				x: x - 3,
+				y: y - 3,
+				width: w + 6,
+				height: h + 6,
+				rx: r + 3,
+				fill: "none",
+				stroke: GOOD,
+				strokeWidth: 3.5
+			})
+		]
+	});
+}
+/** The prize — a shiny car (side view) in box (x,y,w,h). */
+function CarGlyph({ x, y, w, h }) {
+	const X = (f) => x + w * f, Y = (f) => y + h * f;
+	const edge = "color-mix(in oklab, var(--stage-warn) 55%, black)";
+	const wheelR = h * .15, wy = Y(.8);
+	return /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx("path", {
+			d: `M${X(.06)},${Y(.66)}
+        Q${X(.06)},${Y(.5)} ${X(.16)},${Y(.48)}
+        L${X(.3)},${Y(.46)}
+        Q${X(.36)},${Y(.26)} ${X(.5)},${Y(.26)}
+        L${X(.64)},${Y(.27)}
+        Q${X(.72)},${Y(.3)} ${X(.78)},${Y(.47)}
+        L${X(.9)},${Y(.5)}
+        Q${X(.96)},${Y(.52)} ${X(.96)},${Y(.66)}
+        L${X(.94)},${Y(.72)} L${X(.06)},${Y(.72)} Z`,
+			fill: GOLD,
+			stroke: edge,
+			strokeWidth: Math.max(1.5, w * .018),
+			strokeLinejoin: "round"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: `M${X(.34)},${Y(.45)} Q${X(.39)},${Y(.31)} ${X(.49)},${Y(.31)} L${X(.49)},${Y(.45)} Z`,
+			fill: "color-mix(in oklab, var(--stage-bg) 70%, var(--stage-fg))",
+			opacity: .85
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: `M${X(.52)},${Y(.31)} L${X(.62)},${Y(.32)} Q${X(.67)},${Y(.34)} ${X(.71)},${Y(.45)} L${X(.52)},${Y(.45)} Z`,
+			fill: "color-mix(in oklab, var(--stage-bg) 70%, var(--stage-fg))",
+			opacity: .85
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: `M${X(.14)},${Y(.56)} L${X(.86)},${Y(.56)}`,
+			stroke: SHEEN,
+			strokeWidth: h * .03,
+			strokeLinecap: "round",
+			opacity: .55
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: X(.92),
+			cy: Y(.6),
+			r: h * .035,
+			fill: "white"
+		}),
+		[.28, .72].map((f) => /* @__PURE__ */ jsxs("g", { children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: X(f),
+				cy: wy,
+				r: wheelR,
+				fill: "color-mix(in oklab, var(--stage-fg) 88%, black)"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: X(f),
+				cy: wy,
+				r: wheelR * .5,
+				fill: METAL
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: X(f),
+				cy: wy,
+				r: wheelR * .16,
+				fill: FG
+			})
+		] }, f))
+	] });
+}
+/** The booby prize — a goat head in box (x,y,w,h). Big swept horns + beard so it
+*  reads as a goat, not a mouse. */
+function GoatGlyph({ x, y, w, h }) {
+	const X = (f) => x + w * f, Y = (f) => y + h * f;
+	const fur = "color-mix(in oklab, var(--stage-muted) 80%, var(--stage-bg))";
+	const dark = "color-mix(in oklab, var(--stage-muted) 45%, black)";
+	const horn = "color-mix(in oklab, var(--stage-muted) 30%, black)";
+	const hw = Math.max(4, w * .07);
+	return /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx("path", {
+			d: `M${X(.4)},${Y(.28)} C${X(.3)},${Y(.16)} ${X(.18)},${Y(.1)} ${X(.1)},${Y(.16)}`,
+			fill: "none",
+			stroke: horn,
+			strokeWidth: hw,
+			strokeLinecap: "round"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: `M${X(.6)},${Y(.28)} C${X(.7)},${Y(.16)} ${X(.82)},${Y(.1)} ${X(.9)},${Y(.16)}`,
+			fill: "none",
+			stroke: horn,
+			strokeWidth: hw,
+			strokeLinecap: "round"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: `M${X(.3)},${Y(.4)} Q${X(.12)},${Y(.46)} ${X(.16)},${Y(.6)} Q${X(.28)},${Y(.56)} ${X(.34)},${Y(.48)} Z`,
+			fill: dark
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: `M${X(.7)},${Y(.4)} Q${X(.88)},${Y(.46)} ${X(.84)},${Y(.6)} Q${X(.72)},${Y(.56)} ${X(.66)},${Y(.48)} Z`,
+			fill: dark
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: `M${X(.36)},${Y(.34)} Q${X(.5)},${Y(.28)} ${X(.64)},${Y(.34)} L${X(.6)},${Y(.74)} Q${X(.5)},${Y(.86)} ${X(.4)},${Y(.74)} Z`,
+			fill: fur,
+			stroke: dark,
+			strokeWidth: 1.5,
+			strokeLinejoin: "round"
+		}),
+		/* @__PURE__ */ jsx("ellipse", {
+			cx: X(.5),
+			cy: Y(.7),
+			rx: w * .1,
+			ry: h * .08,
+			fill: dark,
+			opacity: .35
+		}),
+		/* @__PURE__ */ jsx("ellipse", {
+			cx: X(.43),
+			cy: Y(.48),
+			rx: w * .045,
+			ry: h * .035,
+			fill: "white"
+		}),
+		/* @__PURE__ */ jsx("ellipse", {
+			cx: X(.57),
+			cy: Y(.48),
+			rx: w * .045,
+			ry: h * .035,
+			fill: "white"
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			x: X(.43) - w * .03,
+			y: Y(.48) - h * .008,
+			width: w * .06,
+			height: h * .016,
+			rx: 1,
+			fill: FG
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			x: X(.57) - w * .03,
+			y: Y(.48) - h * .008,
+			width: w * .06,
+			height: h * .016,
+			rx: 1,
+			fill: FG
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: X(.46),
+			cy: Y(.71),
+			r: Math.max(1.2, w * .018),
+			fill: dark
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: X(.54),
+			cy: Y(.71),
+			r: Math.max(1.2, w * .018),
+			fill: dark
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: `M${X(.42)},${Y(.8)} Q${X(.5)},${Y(1.02)} ${X(.58)},${Y(.8)} Q${X(.5)},${Y(.88)} ${X(.42)},${Y(.8)} Z`,
+			fill: fur,
+			stroke: dark,
+			strokeWidth: 1
+		})
+	] });
+}
+
+//#endregion
+export { CarGlyph, DoorGlyph, GoatGlyph };

package/dist/kit/index.d.mts

@@ -0,0 +1,5 @@
+import { Callout, ControlBar, ControlConfig, Field, LabFrame } from "./frame.mjs";
+import { ChallengeCard, ChallengeChoice, ChallengeQuestion, ChallengeState, CheckpointArgs, Feedback, HintLadder, Hints, Objectives, RevealSolution, RevealSolutionProps, useChallenge, useCheckpoint, useHints } from "./pedagogy.mjs";
+import { StepNav, Steps, useSteps } from "./steps.mjs";
+import { PlayGate, PlayWrap, usePlayGate } from "./play.mjs";
+export { Callout, ChallengeCard, type ChallengeChoice, type ChallengeQuestion, type ChallengeState, type CheckpointArgs, ControlBar, type ControlConfig, Feedback, Field, HintLadder, type Hints, LabFrame, Objectives, type PlayGate, PlayWrap, RevealSolution, type RevealSolutionProps, StepNav, type Steps, useChallenge, useCheckpoint, useHints, usePlayGate, useSteps };

package/dist/kit/index.mjs

@@ -0,0 +1,6 @@
+import { Callout, ControlBar, Field, LabFrame } from "./frame.mjs";
+import { ChallengeCard, Feedback, HintLadder, Objectives, RevealSolution, useChallenge, useCheckpoint, useHints } from "./pedagogy.mjs";
+import { PlayWrap, usePlayGate } from "./play.mjs";
+import { StepNav, useSteps } from "./steps.mjs";
+
+export { Callout, ChallengeCard, ControlBar, Feedback, Field, HintLadder, LabFrame, Objectives, PlayWrap, RevealSolution, StepNav, useChallenge, useCheckpoint, useHints, usePlayGate, useSteps };

package/dist/kit/logic-gates.d.mts

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