@classytic/labs 0.1.0 → 0.2.0

package/dist/kit/clue-scene.mjs

@@ -0,0 +1,424 @@
+'use client';
+
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/kit/clue-scene.tsx
+/** Total a clue evaluates to, given the unknowns' answers (kept consistent by construction). */
+function clueTotal(clue, unknowns) {
+	return clue.coeffs.reduce((s, c, i) => s + c * (unknowns[i]?.answer ?? 0), 0);
+}
+const chipColor = (u) => u.color ?? "var(--stage-accent)";
+/** A coloured token for an unknown (the reusable atom of every scene). */
+function UnknownChip({ u, size = 30, withLabel = false }) {
+	return /* @__PURE__ */ jsxs("span", {
+		style: {
+			display: "inline-grid",
+			justifyItems: "center",
+			gap: 2,
+			verticalAlign: "middle"
+		},
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-label": u.label ?? u.sym,
+			style: {
+				width: size,
+				height: size,
+				borderRadius: 8,
+				display: "grid",
+				placeItems: "center",
+				fontSize: size * .6,
+				lineHeight: 1,
+				background: `color-mix(in oklab, ${chipColor(u)} 22%, transparent)`,
+				border: `2px solid ${chipColor(u)}`
+			},
+			children: u.sym
+		}), withLabel && u.label && /* @__PURE__ */ jsx("span", {
+			style: {
+				fontSize: 10,
+				color: "var(--stage-muted)"
+			},
+			children: u.label
+		})]
+	});
+}
+const fmtTotal = (n, currency = "", unit = "") => `${currency}${Math.round(n * 100) / 100}${unit ? " " + unit : ""}`;
+/** Tiles: "2▲ + 1● = 12". Universal, reads as the equation it is. */
+function ClueTiles({ clue, unknowns, currency, unit }) {
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: 8,
+			flexWrap: "wrap",
+			fontSize: 18,
+			fontWeight: 700,
+			padding: "8px 12px",
+			borderRadius: 12,
+			background: "color-mix(in oklab, var(--stage-fg) 5%, transparent)"
+		},
+		children: [
+			clue.coeffs.map((c, i) => ({
+				c,
+				u: unknowns[i]
+			})).filter((t) => t.c !== 0).map((t, i) => /* @__PURE__ */ jsxs("span", {
+				style: {
+					display: "inline-flex",
+					alignItems: "center",
+					gap: 4
+				},
+				children: [
+					i > 0 && /* @__PURE__ */ jsx("span", {
+						style: {
+							color: "var(--stage-muted)",
+							margin: "0 2px"
+						},
+						children: "+"
+					}),
+					t.c,
+					/* @__PURE__ */ jsx(UnknownChip, {
+						u: t.u,
+						size: 28
+					})
+				]
+			}, i)),
+			/* @__PURE__ */ jsx("span", {
+				style: { color: "var(--stage-muted)" },
+				children: "="
+			}),
+			/* @__PURE__ */ jsx("strong", { children: fmtTotal(clueTotal(clue, unknowns), currency, unit) })
+		]
+	});
+}
+/** Receipt: a shop bill listing quantities and the total (unit prices unknown). */
+function ClueReceipt({ clue, unknowns, currency = "$", store = "Receipt" }) {
+	const lines = clue.coeffs.map((c, i) => ({
+		c,
+		u: unknowns[i]
+	})).filter((t) => t.c !== 0);
+	const row = {
+		display: "flex",
+		justifyContent: "space-between",
+		gap: 16,
+		alignItems: "center"
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			width: 210,
+			padding: 14,
+			borderRadius: 12,
+			border: "2px solid color-mix(in oklab, var(--stage-fg) 18%, transparent)",
+			background: "color-mix(in oklab, var(--stage-fg) 4%, var(--stage-bg))",
+			display: "grid",
+			gap: 8,
+			fontVariantNumeric: "tabular-nums"
+		},
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				style: { fontWeight: 800 },
+				children: store
+			}),
+			lines.map((t, i) => /* @__PURE__ */ jsx("div", {
+				style: {
+					...row,
+					color: "var(--stage-muted)"
+				},
+				children: /* @__PURE__ */ jsxs("span", {
+					style: {
+						display: "inline-flex",
+						alignItems: "center",
+						gap: 6
+					},
+					children: [
+						t.c,
+						" ",
+						/* @__PURE__ */ jsx(UnknownChip, {
+							u: t.u,
+							size: 22
+						}),
+						" ",
+						t.u.label
+					]
+				})
+			}, i)),
+			/* @__PURE__ */ jsx("div", { style: { borderTop: "1px dashed color-mix(in oklab, var(--stage-fg) 30%, transparent)" } }),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					...row,
+					fontWeight: 800
+				},
+				children: [/* @__PURE__ */ jsx("span", { children: "Total" }), /* @__PURE__ */ jsx("span", {
+					style: { color: "var(--stage-good)" },
+					children: fmtTotal(clueTotal(clue, unknowns), currency)
+				})]
+			})
+		]
+	});
+}
+/** Balance: buckets (one per coeff, coloured by type) on the left pan vs a weight on the right. */
+function ClueBalance({ clue, unknowns, unit = "kg" }) {
+	const W = 240, H = 132;
+	const beamY = 34, pivX = W / 2, panY = 70;
+	const lpx = pivX - 70, rpx = 190;
+	const buckets = [];
+	clue.coeffs.forEach((c, i) => {
+		for (let k = 0; k < c; k++) buckets.push({
+			color: unknowns[i]?.color ?? "var(--stage-accent)",
+			sym: unknowns[i]?.sym ?? ""
+		});
+	});
+	const bw = Math.min(26, 110 / Math.max(1, buckets.length));
+	const Bucket = ({ x, color, sym }) => {
+		const w = bw * .86, h = bw * 1.1, topY = panY - h;
+		return /* @__PURE__ */ jsxs("g", { children: [
+			/* @__PURE__ */ jsx("path", {
+				d: `M ${x - w / 2} ${topY} L ${x - w / 2 + 2} ${panY - 2} L ${x + w / 2 - 2} ${panY - 2} L ${x + w / 2} ${topY} Z`,
+				fill: `color-mix(in oklab, ${color} 30%, var(--stage-bg))`,
+				stroke: color,
+				strokeWidth: 1.6,
+				strokeLinejoin: "round"
+			}),
+			/* @__PURE__ */ jsx("ellipse", {
+				cx: x,
+				cy: topY,
+				rx: w / 2,
+				ry: 2.4,
+				fill: color,
+				fillOpacity: .5
+			}),
+			/* @__PURE__ */ jsx("text", {
+				x,
+				y: topY + h * .62,
+				fontSize: bw * .5,
+				textAnchor: "middle",
+				dominantBaseline: "middle",
+				children: sym
+			})
+		] });
+	};
+	const total = clueTotal(clue, unknowns);
+	const bx0 = lpx - (buckets.length - 1) * bw / 2;
+	return /* @__PURE__ */ jsxs("svg", {
+		width: W,
+		height: H,
+		viewBox: `0 0 ${W} ${H}`,
+		role: "img",
+		"aria-label": `balance: ${buckets.length} buckets weigh ${total} ${unit}`,
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: `M ${pivX - 12} ${H - 10} L 132 ${H - 10} L ${pivX} 40 Z`,
+				fill: "var(--stage-metal, #8a8a8a)"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: pivX - 78,
+				y: beamY - 3,
+				width: 156,
+				height: 6,
+				rx: 3,
+				fill: "var(--stage-metal, #8a8a8a)"
+			}),
+			[lpx, rpx].map((px, i) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+				x1: px,
+				y1: beamY,
+				x2: px,
+				y2: panY,
+				stroke: "color-mix(in oklab, var(--stage-fg) 40%, transparent)",
+				strokeWidth: 1.5
+			}), /* @__PURE__ */ jsx("path", {
+				d: `M ${px - 34} ${panY} Q ${px} 84 ${px + 34} ${panY}`,
+				fill: "none",
+				stroke: "var(--stage-metal, #8a8a8a)",
+				strokeWidth: 2.5,
+				strokeLinecap: "round"
+			})] }, i)),
+			buckets.map((b, i) => /* @__PURE__ */ jsx(Bucket, {
+				x: bx0 + i * bw,
+				color: b.color,
+				sym: b.sym
+			}, i)),
+			/* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
+				x: rpx - 26,
+				y: panY - 34,
+				width: 52,
+				height: 30,
+				rx: 6,
+				fill: "var(--stage-bg)",
+				stroke: "color-mix(in oklab, var(--stage-fg) 35%, transparent)",
+				strokeWidth: 1.5
+			}), /* @__PURE__ */ jsxs("text", {
+				x: rpx,
+				y: panY - 18,
+				fontSize: 14,
+				fontWeight: 800,
+				textAnchor: "middle",
+				dominantBaseline: "middle",
+				fill: "var(--stage-fg)",
+				children: [total, unit ? " " + unit : ""]
+			})] })
+		]
+	});
+}
+/** Bar model (tape diagram): each clue is one bar of unit cells grouped by unknown = total. */
+function ClueBar({ clue, unknowns, currency, unit }) {
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: 8,
+			padding: "8px 12px",
+			borderRadius: 12,
+			background: "color-mix(in oklab, var(--stage-fg) 5%, transparent)"
+		},
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					display: "flex",
+					gap: 5
+				},
+				children: clue.coeffs.map((c, i) => ({
+					c,
+					u: unknowns[i]
+				})).filter((t) => t.c !== 0).map((t, ti) => /* @__PURE__ */ jsx("div", {
+					style: { display: "flex" },
+					children: Array.from({ length: t.c }).map((_, k) => /* @__PURE__ */ jsx("div", {
+						style: {
+							width: 30,
+							height: 34,
+							display: "grid",
+							placeItems: "center",
+							fontSize: 14,
+							background: `color-mix(in oklab, ${chipColor(t.u)} 28%, transparent)`,
+							border: `1.5px solid ${chipColor(t.u)}`,
+							borderRadius: t.c === 1 ? 8 : k === 0 ? "8px 0 0 8px" : k === t.c - 1 ? "0 8px 8px 0" : 0,
+							marginLeft: k > 0 ? -1.5 : 0
+						},
+						children: t.u.sym
+					}, k))
+				}, ti))
+			}),
+			/* @__PURE__ */ jsx("span", {
+				style: {
+					color: "var(--stage-muted)",
+					fontWeight: 700
+				},
+				children: "="
+			}),
+			/* @__PURE__ */ jsx("strong", {
+				style: {
+					fontSize: 16,
+					fontVariantNumeric: "tabular-nums"
+				},
+				children: fmtTotal(clueTotal(clue, unknowns), currency, unit)
+			})
+		]
+	});
+}
+/** Coin piles: each unknown is a stack of coins (coloured by type) = a money total. */
+function ClueCoins({ clue, unknowns, currency = "$" }) {
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: 8,
+			padding: "8px 12px",
+			borderRadius: 12,
+			background: "color-mix(in oklab, var(--stage-fg) 5%, transparent)"
+		},
+		children: [
+			clue.coeffs.map((c, i) => ({
+				c,
+				u: unknowns[i]
+			})).filter((t) => t.c !== 0).map((t, ti) => /* @__PURE__ */ jsxs("span", {
+				style: {
+					display: "inline-flex",
+					alignItems: "flex-end",
+					gap: 6
+				},
+				children: [ti > 0 && /* @__PURE__ */ jsx("span", {
+					style: {
+						color: "var(--stage-muted)",
+						fontWeight: 700,
+						marginBottom: 8
+					},
+					children: "+"
+				}), /* @__PURE__ */ jsx("span", {
+					style: {
+						position: "relative",
+						width: 30,
+						height: 16 + t.c * 7
+					},
+					children: Array.from({ length: t.c }).map((_, k) => /* @__PURE__ */ jsx("span", {
+						style: {
+							position: "absolute",
+							bottom: k * 7,
+							left: 0,
+							width: 30,
+							height: 16,
+							borderRadius: "50%",
+							border: `1.5px solid color-mix(in oklab, ${chipColor(t.u)} 65%, black)`,
+							background: `radial-gradient(circle at 40% 35%, color-mix(in oklab, ${chipColor(t.u)} 70%, white), ${chipColor(t.u)})`,
+							display: "grid",
+							placeItems: "center",
+							fontSize: 9
+						},
+						children: t.u.sym
+					}, k))
+				})]
+			}, ti)),
+			/* @__PURE__ */ jsx("span", {
+				style: {
+					color: "var(--stage-muted)",
+					fontWeight: 700
+				},
+				children: "="
+			}),
+			/* @__PURE__ */ jsx("strong", {
+				style: {
+					fontSize: 16,
+					fontVariantNumeric: "tabular-nums"
+				},
+				children: fmtTotal(clueTotal(clue, unknowns), currency)
+			})
+		]
+	});
+}
+const CLUE_REGISTRY = /* @__PURE__ */ new Map();
+function registerClueScene(meta) {
+	CLUE_REGISTRY.set(meta.name, meta);
+}
+function getClueScene(name) {
+	return CLUE_REGISTRY.get(name);
+}
+function listClueScenes() {
+	return [...CLUE_REGISTRY.values()];
+}
+registerClueScene({
+	name: "tiles",
+	label: "Algebra tiles",
+	render: (q) => /* @__PURE__ */ jsx(ClueTiles, { ...q })
+});
+registerClueScene({
+	name: "receipt",
+	label: "Shop receipt",
+	render: (q) => /* @__PURE__ */ jsx(ClueReceipt, { ...q })
+});
+registerClueScene({
+	name: "balance",
+	label: "Bucket balance",
+	render: (q) => /* @__PURE__ */ jsx(ClueBalance, { ...q })
+});
+registerClueScene({
+	name: "bar",
+	label: "Bar model",
+	render: (q) => /* @__PURE__ */ jsx(ClueBar, { ...q })
+});
+registerClueScene({
+	name: "coins",
+	label: "Coin piles",
+	render: (q) => /* @__PURE__ */ jsx(ClueCoins, { ...q })
+});
+/** Render one clue in the chosen scene (registry name). Creators extend via registerClueScene. */
+function ClueScene({ kind, ...rest }) {
+	return getClueScene(kind)?.render(rest) ?? /* @__PURE__ */ jsx(ClueTiles, { ...rest });
+}
+
+//#endregion
+export { ClueBalance, ClueBar, ClueCoins, ClueReceipt, ClueScene, ClueTiles, UnknownChip, clueTotal, getClueScene, listClueScenes, registerClueScene };

package/dist/kit/cluster.d.mts

@@ -0,0 +1,30 @@
+import { ReactNode } from "react";
+
+//#region src/kit/cluster.d.ts
+interface DotClusterProps {
+  count: number;
+  /** Highlight the last `highlight` items (e.g. the ones added this step). */
+  highlight?: number;
+  /** Diameter of the dish (px). */
+  size?: number;
+  color?: string;
+  highlightColor?: string;
+  /** Dish ring tint; set `emphasis` to draw the bold "current" ring. */
+  emphasis?: boolean;
+  /** Caption above (e.g. "Day 2"). */
+  label?: string;
+  /** Chip below (the value, or "?" while hidden). */
+  value?: ReactNode;
+}
+declare function DotCluster({
+  count,
+  highlight,
+  size,
+  color,
+  highlightColor,
+  emphasis,
+  label,
+  value
+}: DotClusterProps): ReactNode;
+//#endregion
+export { DotCluster, DotClusterProps };

package/dist/kit/cluster.mjs

@@ -0,0 +1,81 @@
+'use client';
+
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/kit/cluster.tsx
+const GOLDEN = Math.PI * (3 - Math.sqrt(5));
+function DotCluster({ count, highlight = 0, size = 120, color = "color-mix(in oklab, var(--stage-fg) 55%, transparent)", highlightColor = "var(--stage-accent)", emphasis = false, label, value }) {
+	const capH = label ? 24 : 6;
+	const capB = value != null ? 30 : 6;
+	const dishR = size / 2;
+	const cx = dishR;
+	const cy = capH + dishR;
+	const total = capH + size + capB;
+	const n = Math.max(0, Math.round(count));
+	const dotR = Math.max(2.2, Math.min(7, dishR * .78 / Math.sqrt(Math.max(1, n))));
+	const fitR = dishR - dotR - 3;
+	const dots = [];
+	for (let i = 0; i < n; i++) {
+		const r = Math.sqrt((i + .5) / n) * fitR;
+		const th = i * GOLDEN;
+		const x = cx + r * Math.cos(th);
+		const y = cy + r * Math.sin(th);
+		const isNew = i >= n - highlight;
+		dots.push(/* @__PURE__ */ jsx("circle", {
+			cx: x,
+			cy: y,
+			r: dotR,
+			fill: isNew ? highlightColor : color,
+			opacity: isNew ? .95 : .8
+		}, i));
+	}
+	return /* @__PURE__ */ jsxs("svg", {
+		width: size,
+		height: total,
+		viewBox: `0 0 ${size} ${total}`,
+		role: "img",
+		"aria-label": `${label ? label + ": " : ""}${value != null && value !== "?" ? value : count} items`,
+		children: [
+			label && /* @__PURE__ */ jsx("text", {
+				x: cx,
+				y: 14,
+				fontSize: 13,
+				fontWeight: 700,
+				fill: "var(--stage-fg)",
+				textAnchor: "middle",
+				children: label
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx,
+				cy,
+				r: dishR - 1,
+				fill: "color-mix(in oklab, var(--stage-fg) 7%, transparent)",
+				stroke: emphasis ? highlightColor : "color-mix(in oklab, var(--stage-fg) 22%, transparent)",
+				strokeWidth: emphasis ? 2.5 : 1.5
+			}),
+			dots,
+			value != null && /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
+				x: cx - 16,
+				y: capH + size - 8,
+				width: 32,
+				height: 24,
+				rx: 5,
+				fill: "var(--stage-bg)",
+				stroke: "color-mix(in oklab, var(--stage-fg) 30%, transparent)",
+				strokeWidth: 1.5
+			}), /* @__PURE__ */ jsx("text", {
+				x: cx,
+				y: capH + size + 4,
+				fontSize: 14,
+				fontWeight: 800,
+				fill: "var(--stage-fg)",
+				textAnchor: "middle",
+				dominantBaseline: "middle",
+				children: value
+			})] })
+		]
+	});
+}
+
+//#endregion
+export { DotCluster };

package/dist/kit/controls.mjs

@@ -12,7 +12,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function LabStyles() {
 	return null;
 }
-function Stepper({ value, onChange, min = 0, max = 99, label }) {
+function Stepper({ value, onChange, min = 0, max = 99, step = 1, label }) {
 	return /* @__PURE__ */ jsxs("span", {
 		className: "lab-stepper",
 		role: "group",
@@ -21,14 +21,14 @@ function Stepper({ value, onChange, min = 0, max = 99, label }) {
 			/* @__PURE__ */ jsx("button", {
 				type: "button",
 				"aria-label": `decrease${label ? " " + label : ""}`,
-				onClick: () => onChange(Math.max(min, value - 1)),
+				onClick: () => onChange(Math.max(min, value - step)),
 				children: "−"
 			}),
 			/* @__PURE__ */ jsx("b", { children: value }),
 			/* @__PURE__ */ jsx("button", {
 				type: "button",
 				"aria-label": `increase${label ? " " + label : ""}`,
-				onClick: () => onChange(Math.min(max, value + 1)),
+				onClick: () => onChange(Math.min(max, value + step)),
 				children: "+"
 			})
 		]
@@ -50,16 +50,19 @@ function StatusPill({ ok, children }) {
 		children
 	});
 }
-function Chip({ selected, onClick, children }) {
+function Chip({ selected, onClick, children, ...a11y }) {
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
 		className: "lab-chip",
 		"data-sel": selected,
 		onClick,
+		...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",
@@ -69,7 +72,10 @@ function Slider(props) {
 		step: props.step,
 		"aria-label": props.ariaLabel,
 		onChange: (e) => props.onChange(Number(e.currentTarget.value)),
-		style: props.style
+		style: {
+			background: fill,
+			...props.style
+		}
 	});
 }
 

package/dist/kit/coords.d.mts

@@ -0,0 +1,88 @@
+import { ReactNode } from "react";
+import { Vec2 } from "@classytic/stage";
+
+//#region src/kit/coords.d.ts
+/** A straight line: either oblique/horizontal y = m·x + c, or vertical x = `vertical`. */
+interface Lin {
+  m: number;
+  c: number;
+  /** Set for a vertical line x = value (m is then ±∞). */
+  vertical?: number;
+}
+/** The line through two points (vertical-safe). */
+declare function lineThrough(a: Vec2, b: Vec2): Lin;
+/** The line of gradient m through point p. */
+declare function lineFrom(m: number, p: Vec2): Lin;
+/** The line parallel to `l` through p (same gradient). */
+declare function parallelThrough(l: Lin, p: Vec2): Lin;
+/** The line perpendicular to `l` through p (gradient −1/m; verticals ↔ horizontals). */
+declare function perpThrough(l: Lin, p: Vec2): Lin;
+/** Where two lines cross (null if parallel). Vertical-safe. */
+declare function intersectLines(l1: Lin, l2: Lin): Vec2 | null;
+declare function distance(a: Vec2, b: Vec2): number;
+declare function midpoint(a: Vec2, b: Vec2): Vec2;
+/** Round to a clean string, trims trailing zeros; up to `dp` decimals. */
+declare function num(n: number, dp?: number): string;
+/** Human-readable equation of a line: "y = 2x − 3", "x = 4", "y = 5". */
+declare function lineTex(l: Lin, dp?: number): string;
+/** Intercept form "x/a + y/b = 1" for a line cutting the axes at (a,0),(0,b). */
+declare function interceptTex(a: number, b: number, dp?: number): string;
+/** Circle "(x − a)² + (y − b)² = r²" with centre (a,b). */
+declare function circleTex(a: number, b: number, r: number, dp?: number): string;
+/** Expanded circle x² + y² + Dx + Ey + F = 0 (the completing-the-square form). */
+declare function circleExpandedTex(a: number, b: number, r: number, dp?: number): string;
+/** 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;
+interface CoordPlaneProps {
+  view: {
+    xMin: number;
+    xMax: number;
+    yMin: number;
+    yMax: number;
+  };
+  height?: number;
+  ariaLabel?: string;
+  /** Grid/axis tick spacing in math units (default: auto via niceStep). */
+  step?: number;
+  /** Per-axis tick spacing overrides (for tall-thin / short-wide plots). */
+  stepX?: number;
+  stepY?: number;
+  /** Inner padding in px, room for axis labels so they are not clipped at the edge. */
+  pad?: number;
+  /** Show numeric labels on the axes (default true). */
+  labels?: boolean;
+  /**
+   * Equal x/y scaling. ON by default, geometry (circles, perpendiculars, angles)
+   * needs it. Function plots that want a stretched y pass false.
+   */
+  preserveAspect?: boolean;
+  children?: ReactNode;
+}
+/** The framed coordinate plane every coord-geometry lab draws on. */
+declare function CoordPlane({
+  view,
+  height,
+  ariaLabel,
+  step,
+  stepX,
+  stepY,
+  pad,
+  labels,
+  preserveAspect,
+  children
+}: CoordPlaneProps): ReactNode;
+/** The rise/run right-triangle under a line segment, makes "gradient = Δy/Δx" visible. */
+declare function GradientTriangle({
+  a,
+  b,
+  color,
+  showLabels
+}: {
+  a: Vec2;
+  b: Vec2;
+  color?: string;
+  showLabels?: boolean;
+}): ReactNode;
+//#endregion
+export { CoordPlane, CoordPlaneProps, GradientTriangle, Lin, circleExpandedTex, circleTex, distance, interceptTex, intersectLines, lineFrom, lineTex, lineThrough, midpoint, num, parallelThrough, perpThrough, snapPoint, snapTo };