@classytic/labs 0.2.0 → 0.3.0

package/dist/kit/controls.mjs

@@ -1,16 +1,55 @@
 'use client';
 
+import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Slider } from "@/components/ui/slider";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 
 //#region src/kit/controls.tsx
 /**
-* The `.lab-*` control CSS now SHIPS in `@classytic/labs/styles.css` (imported by
-* the host), instead of being injected at runtime. `LabStyles` is a no-op kept
-* for back-compat with presets that still render `<LabStyles/>`.
-* @deprecated import `@classytic/labs/styles.css` once in your global CSS instead.
+* Learning-control adapters backed by the host application's shadcn components.
+* Labs owns the learning semantics and composition; the host owns generic UI.
 */
-function LabStyles() {
-	return null;
+function IconButton({ label, onClick, children, disabled, title = label, className }) {
+	return /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "outline",
+		size: "icon-sm",
+		className: ["lab-icon-button", className].filter(Boolean).join(" "),
+		onClick,
+		disabled,
+		"aria-label": label,
+		title,
+		children
+	});
+}
+function ActionButton({ onClick, children, disabled, pressed, className, ...a11y }) {
+	const ghost = className?.split(/\s+/).includes("lab-btn-ghost");
+	return /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: ghost ? "outline" : pressed ? "secondary" : "default",
+		className: ["lab-btn", className].filter(Boolean).join(" "),
+		onClick,
+		disabled,
+		"aria-pressed": pressed,
+		...a11y,
+		children
+	});
+}
+function TextInput({ value, onChange, label, placeholder, mono }) {
+	return /* @__PURE__ */ jsx(Input, {
+		className: ["lab-input", mono ? "lab-input-mono" : ""].filter(Boolean).join(" "),
+		value,
+		onChange: (event) => onChange(event.currentTarget.value),
+		"aria-label": label,
+		placeholder,
+		spellCheck: !mono
+	});
 }
 function Stepper({ value, onChange, min = 0, max = 99, step = 1, label }) {
 	return /* @__PURE__ */ jsxs("span", {
@@ -18,15 +57,19 @@ function Stepper({ value, onChange, min = 0, max = 99, step = 1, label }) {
 		role: "group",
 		"aria-label": label,
 		children: [
-			/* @__PURE__ */ jsx("button", {
+			/* @__PURE__ */ jsx(Button, {
 				type: "button",
+				variant: "ghost",
+				size: "icon-sm",
 				"aria-label": `decrease${label ? " " + label : ""}`,
 				onClick: () => onChange(Math.max(min, value - step)),
 				children: "−"
 			}),
 			/* @__PURE__ */ jsx("b", { children: value }),
-			/* @__PURE__ */ jsx("button", {
+			/* @__PURE__ */ jsx(Button, {
 				type: "button",
+				variant: "ghost",
+				size: "icon-sm",
 				"aria-label": `increase${label ? " " + label : ""}`,
 				onClick: () => onChange(Math.min(max, value + step)),
 				children: "+"
@@ -35,7 +78,7 @@ function Stepper({ value, onChange, min = 0, max = 99, step = 1, label }) {
 	});
 }
 function CheckButton({ onClick, disabled, children = "Check" }) {
-	return /* @__PURE__ */ jsx("button", {
+	return /* @__PURE__ */ jsx(Button, {
 		type: "button",
 		className: "lab-btn",
 		onClick,
@@ -43,41 +86,162 @@ function CheckButton({ onClick, disabled, children = "Check" }) {
 		children
 	});
 }
-function StatusPill({ ok, children }) {
-	return /* @__PURE__ */ jsx("span", {
-		className: "lab-pill",
+function StatusPill({ ok, children, className, role }) {
+	return /* @__PURE__ */ jsx(Badge, {
+		variant: ok ? "secondary" : "outline",
+		className: ["lab-pill", className].filter(Boolean).join(" "),
 		"data-state": ok ? "ok" : "no",
+		role,
 		children
 	});
 }
-function Chip({ selected, onClick, children, ...a11y }) {
-	return /* @__PURE__ */ jsx("button", {
+/**
+* A compact activity picker for sets that no longer fit as one visible choice row.
+*
+* Keep `Segmented` for two or three concise, frequently compared states. Use this picker
+* for four or more modes, contextual presets, or long labels so the learning canvas never gains a horizontal
+* scrollbar. The host's shadcn Select owns keyboard, focus, portal, and collision behavior.
+*/
+function ActivitySelect({ value, onChange, options, ariaLabel, className }) {
+	return /* @__PURE__ */ jsxs(Select, {
+		items: options.map(({ value: optionValue, label }) => ({
+			value: optionValue,
+			label
+		})),
+		value,
+		onValueChange: (next) => {
+			if (typeof next === "string" && next !== value) onChange(next);
+		},
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			size: "sm",
+			"aria-label": ariaLabel,
+			className: ["lab-activity-select", className].filter(Boolean).join(" "),
+			children: /* @__PURE__ */ jsx(SelectValue, {})
+		}), /* @__PURE__ */ jsx(SelectContent, {
+			align: "start",
+			alignItemWithTrigger: false,
+			children: /* @__PURE__ */ jsx(SelectGroup, { children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+				value: option.value,
+				disabled: option.disabled,
+				children: option.label
+			}, option.value)) })
+		})]
+	});
+}
+/** Chooses presentation density from authored copy, never from a per-lab CSS override. */
+function choiceResponseLayout(options) {
+	return options.every((option) => typeof option.label === "string" && option.label.length <= 30) ? "compact" : "prose";
+}
+/** A single-choice answer set backed by the host RadioGroup. */
+function AssessedChoiceGroup({ value, onChange, options, ariaLabel, className }) {
+	const groupId = useId();
+	return /* @__PURE__ */ jsx(RadioGroup, {
+		className: ["lab-choices", className].filter(Boolean).join(" "),
+		"aria-label": ariaLabel,
+		value: value ?? "",
+		onValueChange: (next) => {
+			const picked = next;
+			if (picked != null) onChange(picked);
+		},
+		children: options.map((option) => {
+			const selected = option.value === value;
+			const controlId = `${groupId}-${option.value}`;
+			return /* @__PURE__ */ jsxs("label", {
+				htmlFor: controlId,
+				className: "lab-choice",
+				"data-picked": selected || void 0,
+				"data-tone": option.tone,
+				"data-disabled": option.disabled || void 0,
+				children: [/* @__PURE__ */ jsx(RadioGroupItem, {
+					id: controlId,
+					value: option.value,
+					disabled: option.disabled,
+					className: "lab-choice-control"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "lab-choice-label",
+					children: option.label
+				})]
+			}, option.value);
+		})
+	});
+}
+/**
+* A mutually-exclusive mode switcher, on the HOST's shadcn `ToggleGroup`.
+*
+* This replaces a hand-rolled pattern: a row of `Chip` buttons that a `:has()` rule in
+* core.css reshaped into a segmented track. That imitation carried none of the real
+* semantics — no roving focus, no arrow-key traversal, no group role — and its layout
+* needed repeated fixing because the kit was maintaining behaviour a component already owns.
+*
+* Use it for two or three concise states that benefit from side-by-side comparison. A `Chip` is still the right thing
+* for an ACTION (Play, Reset, Refill) and for multi-select filters, which are not one choice.
+*/
+/**
+* A mode switcher: every option visible, one of them on.
+*
+* It WRAPS rather than scrolls, deliberately, because a scrolling track left the last
+* mode off-screen with nothing saying it existed and a learner cannot choose what they
+* cannot see. In the 19rem Dock (two columns, so ~140px each) three word-length options
+* wrap every time, so wrapping is the normal case here, not the exception.
+*
+* Making this degrade to a dropdown automatically was tried and REJECTED. It hides the
+* options the wrap exists to keep visible, and it trades this group's arrow-key
+* navigation for a combobox across all 87 labs that use it, breaking the tests that
+* assert that keyboard contract.
+*
+* Where a wrapped track genuinely reads badly, switch THAT LAB to `ActivitySelect`,
+* which is a per-lab judgement about whether the options are worth keeping on screen.
+* heat-transfer did exactly that for its mechanism and material pickers.
+*/
+function Segmented({ value, onChange, options, ariaLabel, size = "sm", className }) {
+	return /* @__PURE__ */ jsx(ToggleGroup, {
+		className: ["lab-segmented", className].filter(Boolean).join(" "),
+		"aria-label": ariaLabel,
+		value: [value],
+		onValueChange: (next) => {
+			const picked = Array.isArray(next) ? next.find((candidate) => candidate !== value) : next;
+			if (picked != null && picked !== value) onChange(picked);
+		},
+		spacing: 0,
+		size,
+		children: options.map((option) => /* @__PURE__ */ jsx(ToggleGroupItem, {
+			value: option.value,
+			disabled: option.disabled,
+			className: "lab-segment",
+			"data-sel": option.value === value,
+			children: option.label
+		}, option.value))
+	});
+}
+function Chip({ selected, onClick, children, className, "aria-pressed": ariaPressed, ...a11y }) {
+	return /* @__PURE__ */ jsx(Button, {
 		type: "button",
-		className: "lab-chip",
+		size: "sm",
+		variant: selected ? "secondary" : "outline",
+		className: ["lab-chip", className].filter(Boolean).join(" "),
 		"data-sel": selected,
 		onClick,
+		"aria-pressed": ariaPressed ?? selected,
 		...a11y,
 		children
 	});
 }
-function Slider(props) {
-	const pct = props.max > props.min ? Math.max(0, Math.min(100, (props.value - props.min) / (props.max - props.min) * 100)) : 0;
-	const fill = `linear-gradient(to right, var(--primary, oklch(0.59 0.22 261)) 0 ${pct}%, color-mix(in oklab, currentColor 20%, transparent) ${pct}% 100%)`;
-	return /* @__PURE__ */ jsx("input", {
-		type: "range",
-		className: "lab-slider",
-		value: props.value,
+function Slider$1(props) {
+	const first = (value) => typeof value === "number" ? value : value[0] ?? props.value;
+	return /* @__PURE__ */ jsx(Slider, {
+		className: ["lab-slider", props.className].filter(Boolean).join(" "),
+		value: [props.value],
 		min: props.min,
 		max: props.max,
 		step: props.step,
 		"aria-label": props.ariaLabel,
-		onChange: (e) => props.onChange(Number(e.currentTarget.value)),
-		style: {
-			background: fill,
-			...props.style
-		}
+		"aria-valuetext": props.valueText,
+		onValueChange: (values) => props.onChange(first(values)),
+		onValueCommitted: (values) => props.onCommit?.(first(values)),
+		onKeyUp: () => props.onCommit?.(props.value),
+		style: props.style
 	});
 }
 
 //#endregion
-export { CheckButton, Chip, LabStyles, Slider, StatusPill, Stepper };
+export { ActionButton, ActivitySelect, AssessedChoiceGroup, CheckButton, Chip, IconButton, Segmented, Slider$1 as Slider, StatusPill, Stepper, TextInput, choiceResponseLayout };

package/dist/kit/coords.d.mts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { Vec2 } from "@classytic/stage";
+import { Axes, Vec2 } from "@classytic/stage";
 
 //#region src/kit/coords.d.ts
 /** A straight line: either oblique/horizontal y = m·x + c, or vertical x = `vertical`. */
@@ -34,6 +34,28 @@ declare function circleExpandedTex(a: number, b: number, r: number, dp?: number)
 /** Snap a value to the nearest `step` (0 → no snap). */
 declare function snapTo(v: number, step?: number): number;
 declare function snapPoint(p: Vec2, step?: number): Vec2;
+/**
+ * ── keeping the axis numbers off the figure ──────────────────────────────────
+ *
+ * A dot drawn ON an axis lands exactly where that axis prints its numbers (an intercept on the y
+ * axis, a focus on the x axis), and the number comes out half-covered. The stage places its numbers
+ * around a list of zones for that reason, and these build the list.
+ *
+ * The type and the helper are declared HERE rather than imported from the stage on purpose: a
+ * consumer may still be on a stage that predates the feature, and importing a name a module does
+ * not export fails at load. Handed over as a prop it is simply ignored there, and the numbers print
+ * as they always did. `PlaneAxes` is the one place that hands it over.
+ */
+interface ClearZone {
+  x: number;
+  y: number;
+  /** Half-width in px (default 10, a dot plus a margin). */
+  rx?: number;
+  /** Half-height in px (default 10). */
+  ry?: number;
+  dx?: number;
+  dy?: number;
+}
 interface CoordPlaneProps {
   view: {
     xMin: number;
@@ -52,6 +74,12 @@ interface CoordPlaneProps {
   pad?: number;
   /** Show numeric labels on the axes (default true). */
   labels?: boolean;
+  /**
+   * Places the axis numbers must leave clear: the dots and labels this figure draws ON an axis
+   * (an intercept, a focus, a directrix name). Points get a dot-sized zone; use `clearOfLabel`
+   * from the stage for a label.
+   */
+  keepClear?: readonly ClearZone[];
   /**
    * Equal x/y scaling. ON by default, geometry (circles, perpendiculars, angles)
    * needs it. Function plots that want a stretched y pass false.
@@ -70,6 +98,7 @@ declare function CoordPlane({
   pad,
   labels,
   preserveAspect,
+  keepClear,
   children
 }: CoordPlaneProps): ReactNode;
 /** The rise/run right-triangle under a line segment, makes "gradient = Δy/Δx" visible. */

package/dist/kit/coords.mjs

@@ -121,8 +121,34 @@ function snapPoint(p, step = 0) {
 		y: snapTo(p.y, step)
 	};
 }
+/** The zone a `<Label>` covers, from the same props the label is given. */
+function clearOfLabel(x, y, text, { size = 14, anchor = "middle", dx = 0, dy = 0 } = {}) {
+	const w = text.length * size * .58;
+	return {
+		x,
+		y,
+		dx: dx + (anchor === "start" ? w / 2 : anchor === "end" ? -w / 2 : 0),
+		dy,
+		rx: w / 2 + 3,
+		ry: size * .5 + 2
+	};
+}
+/** The zone a dot (or a draggable handle, at the default size) covers. */
+const dotZone = (p, r = 13) => ({
+	x: p.x,
+	y: p.y,
+	rx: r,
+	ry: r
+});
+/** Stage axes whose numbers keep off the given zones. Use wherever a figure draws ON an axis. */
+function PlaneAxes({ keepClear, ...rest }) {
+	return /* @__PURE__ */ jsx(Axes, {
+		...rest,
+		keepClear
+	});
+}
 /** The framed coordinate plane every coord-geometry lab draws on. */
-function CoordPlane({ view, height = 360, ariaLabel, step, stepX, stepY, pad, labels = true, preserveAspect = true, children }) {
+function CoordPlane({ view, height = 360, ariaLabel, step, stepX, stepY, pad, labels = true, preserveAspect = true, keepClear, children }) {
 	return /* @__PURE__ */ jsxs(Stage, {
 		view,
 		height,
@@ -135,12 +161,13 @@ function CoordPlane({ view, height = 360, ariaLabel, step, stepX, stepY, pad, la
 				stepX,
 				stepY
 			}),
-			/* @__PURE__ */ jsx(Axes, {
+			/* @__PURE__ */ jsx(PlaneAxes, {
 				ticks: true,
 				step,
 				stepX,
 				stepY,
-				labels
+				labels,
+				keepClear
 			}),
 			children
 		]
@@ -189,4 +216,4 @@ function GradientTriangle({ a, b, color = "var(--stage-muted)", showLabels = tru
 }
 
 //#endregion
-export { CoordPlane, GradientTriangle, circleExpandedTex, circleTex, distance, interceptTex, intersectLines, lineFrom, lineTex, lineThrough, midpoint, num, parallelThrough, perpThrough, snapPoint, snapTo };
+export { CoordPlane, GradientTriangle, PlaneAxes, circleExpandedTex, circleTex, clearOfLabel, distance, dotZone, interceptTex, intersectLines, lineFrom, lineTex, lineThrough, midpoint, num, parallelThrough, perpThrough, snapPoint, snapTo };

package/dist/kit/cycle.mjs

@@ -14,6 +14,7 @@ const TONES = [
 	"var(--stage-muted)"
 ];
 const r2 = (n) => Math.round(n * 100) / 100;
+const hits = (a, b) => a.l < b.r && b.l < a.r && a.t < b.b && b.t < a.b;
 function CycleDiagram({ nodes, edges, size = 340, activeId = null, litEdges = null, edgeSlot, onNodeClick, ariaLabel }) {
 	const c = size / 2;
 	const R = size * .33;
@@ -33,6 +34,75 @@ function CycleDiagram({ nodes, edges, size = 340, activeId = null, litEdges = nu
 	const idx = new Map(nodes.map((nd, i) => [nd.id, i]));
 	const interactive = !!onNodeClick;
 	const lit = litEdges ?? (activeId ? new Set(edges.filter((e) => e.from === activeId).map(edgeKey)) : null);
+	/**
+	* Where each process pill goes.
+	*
+	* The middle of the curve is the natural spot, and on a busy cycle it is also where a chord
+	* passes a node, or where a reciprocal pair crosses (photosynthesis printed over respiration).
+	* So a pill is tried at the middle first and then further along the curve either way, and it
+	* takes the first spot clear of the nodes, their names, and the pills already placed. A cycle
+	* with room ends up exactly where it was before.
+	*/
+	const boxAt = (p, w, h) => ({
+		l: p.x - w / 2,
+		r: p.x + w / 2,
+		t: p.y - h / 2,
+		b: p.y + h / 2
+	});
+	const taken = [];
+	nodes.forEach((nd) => {
+		const p = pos.get(nd.id);
+		taken.push({
+			l: p.x - nodeR,
+			r: p.x + nodeR,
+			t: p.y - nodeR,
+			b: p.y + nodeR
+		});
+		taken.push(boxAt({
+			x: p.x,
+			y: p.y + nodeR + 12
+		}, nd.label.length * 5.8 + 4, 13));
+	});
+	const spotOn = (start, ctrl, end, w) => {
+		const at = (t, off = 0) => {
+			const x = (1 - t) * (1 - t) * start.x + 2 * t * (1 - t) * ctrl.x + t * t * end.x;
+			const y = (1 - t) * (1 - t) * start.y + 2 * t * (1 - t) * ctrl.y + t * t * end.y;
+			if (!off) return {
+				x: r2(x),
+				y: r2(y)
+			};
+			const tx = 2 * (1 - t) * (ctrl.x - start.x) + 2 * t * (end.x - ctrl.x);
+			const ty = 2 * (1 - t) * (ctrl.y - start.y) + 2 * t * (end.y - ctrl.y);
+			const tl = Math.hypot(tx, ty) || 1;
+			return {
+				x: r2(x - ty / tl * off),
+				y: r2(y + tx / tl * off)
+			};
+		};
+		for (const off of [
+			0,
+			15,
+			-15,
+			30,
+			-30
+		]) for (const t of [
+			.5,
+			.36,
+			.64,
+			.26,
+			.74
+		]) {
+			const p = at(t, off);
+			const box = boxAt(p, w, 18);
+			if (!taken.some((o) => hits(box, o))) {
+				taken.push(box);
+				return p;
+			}
+		}
+		const p = at(.5);
+		taken.push(boxAt(p, w, 18));
+		return p;
+	};
 	const edgePaths = [];
 	const slots = [];
 	edges.forEach((e) => {
@@ -94,16 +164,14 @@ function CycleDiagram({ nodes, edges, size = 340, activeId = null, litEdges = nu
 				fill: col
 			})]
 		}, key));
-		const bm = {
-			x: r2(.25 * start.x + .5 * ctrl.x + .25 * end.x),
-			y: r2(.25 * start.y + .5 * ctrl.y + .25 * end.y)
-		};
+		const pillW = e.label ? e.label.length * 5.7 + 14 : 96;
+		const bm = spotOn(start, ctrl, end, pillW);
 		if (edgeSlot) slots.push(/* @__PURE__ */ jsx("g", {
 			opacity: dim ? .25 : 1,
 			children: edgeSlot(e, key, bm)
 		}, `s-${key}`));
 		else if (e.label) {
-			const w = e.label.length * 5.7 + 14;
+			const w = pillW;
 			slots.push(/* @__PURE__ */ jsxs("g", {
 				opacity: dim ? .3 : 1,
 				children: [/* @__PURE__ */ jsx("rect", {
@@ -135,7 +203,14 @@ function CycleDiagram({ nodes, edges, size = 340, activeId = null, litEdges = nu
 			opacity: (activeId ? !active : false) ? .45 : 1,
 			style: { cursor: interactive ? "pointer" : "default" },
 			onClick: interactive ? () => onNodeClick(nd.id) : void 0,
+			onKeyDown: interactive ? (event) => {
+				if (event.key === "Enter" || event.key === " ") {
+					event.preventDefault();
+					onNodeClick(nd.id);
+				}
+			} : void 0,
 			role: interactive ? "button" : void 0,
+			tabIndex: interactive ? 0 : void 0,
 			"aria-label": interactive ? nd.label : void 0,
 			children: [
 				active && /* @__PURE__ */ jsx("circle", {
@@ -162,6 +237,12 @@ function CycleDiagram({ nodes, edges, size = 340, activeId = null, litEdges = nu
 					fontSize: 11,
 					fontWeight: 700,
 					textAnchor: "middle",
+					style: {
+						paintOrder: "stroke",
+						stroke: "var(--stage-bg)",
+						strokeWidth: 3.5,
+						strokeLinejoin: "round"
+					},
 					children: p.label
 				})
 			]