@classytic/stage 0.2.0 → 0.3.0

package/dist/math/calculus.mjs

@@ -1,5 +1,5 @@
 import { FN1, FN2 } from "./defs.mjs";
-import { add, call, div, mul, neg, num, pow, sub } from "./ast.mjs";
+import { add, call, div, evaluate, mul, neg, num, pow, sub, variable } from "./ast.mjs";
 
 //#region src/math/calculus.ts
 /**
@@ -70,6 +70,134 @@ function differentiate(node, x) {
 		default: return null;
 	}
 }
+/**
+* Outer antiderivative of a 1-arg function, given its argument node `u`.
+*
+* Mirrors DERIV above. Only the functions whose antiderivative is itself elementary appear:
+* `ln` and the inverse trig functions integrate by parts into forms this table cannot express,
+* so they are absent and `integrate` returns null for them rather than guessing.
+*/
+const INTEG = {
+	sin: (u) => neg(call("cos", u)),
+	cos: (u) => call("sin", u),
+	exp: (u) => call("exp", u),
+	sinh: (u) => call("cosh", u),
+	cosh: (u) => call("sinh", u)
+};
+/** `true` when `node` holds no occurrence of `x`, so it is a constant for this integral. */
+function isConstantIn(node, x) {
+	return !freeVarsHas(node, x);
+}
+function freeVarsHas(node, x) {
+	switch (node.type) {
+		case "num": return false;
+		case "var": return node.name === x;
+		case "neg": return freeVarsHas(node.arg, x);
+		case "binary": return freeVarsHas(node.left, x) || freeVarsHas(node.right, x);
+		case "call": return node.args.some((a) => freeVarsHas(a, x));
+		default: return true;
+	}
+}
+/**
+* The constant `a` when `u` is linear in `x` (that is, `u = a·x + b`), else null.
+*
+* This is what makes the whole linear-substitution family work with one rule instead of a pattern
+* per case: if `du/dx` simplifies to a non-zero NUMBER, then `∫f(u) dx = F(u)/a`. Deriving it from
+* `differentiate` rather than matching `a*x+b` by shape means `(3-2x)^5` and `(-2x+3)^5` and
+* `3-2*x` all work without three separate matchers.
+*/
+function linearFactor(u, x) {
+	const d = differentiate(u, x);
+	if (!d) return null;
+	const s = simplify(d);
+	return s.type === "num" && s.value !== 0 ? s.value : null;
+}
+/** Divide by a constant, without emitting the noise of `expr / 1`. */
+const overConst = (node, a) => a === 1 ? node : div(node, num(a));
+/**
+* Exact symbolic antiderivative with respect to `x`, or `null` when this engine cannot do it.
+*
+* The constant of integration is NOT included. That is deliberate: `+ c` is the single most
+* commonly dropped mark in the topic, so it belongs in the lesson's own working where a learner
+* has to write it, not silently bolted on by the engine.
+*
+* Covers the Cambridge P1/P3 toolkit: linearity, the power rule including the `1/x → ln|x|`
+* exception, and any of the above composed with a LINEAR inner function. Returns null for
+* integration by parts, by non-linear substitution, and partial fractions, so a caller can fall
+* back to the numerical `integrate` in `core/numeric` and show area rather than a wrong formula.
+*/
+function integrate(node, x) {
+	if (isConstantIn(node, x)) return mul(node, variable(x));
+	switch (node.type) {
+		case "var": return div(pow(variable(x), num(2)), num(2));
+		case "neg": {
+			const inner = integrate(node.arg, x);
+			return inner && neg(inner);
+		}
+		case "binary": {
+			const { op, left, right } = node;
+			if (op === "+" || op === "-") {
+				const l = integrate(left, x);
+				const r = integrate(right, x);
+				return l && r && (op === "+" ? add(l, r) : sub(l, r));
+			}
+			if (op === "*") {
+				if (isConstantIn(left, x)) {
+					const r = integrate(right, x);
+					return r && mul(left, r);
+				}
+				if (isConstantIn(right, x)) {
+					const l = integrate(left, x);
+					return l && mul(right, l);
+				}
+				return null;
+			}
+			if (op === "/") {
+				if (isConstantIn(right, x)) {
+					const l = integrate(left, x);
+					return l && div(l, right);
+				}
+				if (isConstantIn(left, x)) {
+					const a = linearFactor(right, x);
+					return a === null ? null : overConst(mul(left, call("ln", call("abs", right))), a);
+				}
+				return null;
+			}
+			if (op === "^") {
+				const exponent = simplify(right);
+				if (exponent.type !== "num") return null;
+				const n = exponent.value;
+				const a = linearFactor(left, x);
+				if (a === null) return null;
+				if (n === -1) return overConst(call("ln", call("abs", left)), a);
+				return overConst(div(pow(left, num(n + 1)), num(n + 1)), a);
+			}
+			return null;
+		}
+		case "call": {
+			const u = node.args[0];
+			const rule = INTEG[node.fn];
+			if (!rule || !u || node.args.length !== 1) return null;
+			const a = linearFactor(u, x);
+			return a === null ? null : overConst(rule(u), a);
+		}
+		default: return null;
+	}
+}
+/**
+* A definite integral evaluated exactly: `F(b) - F(a)`.
+*
+* Returned as a NUMBER rather than a node, because that is what a lesson compares a learner's
+* answer against. Null when the antiderivative is not elementary, or when either limit lands
+* somewhere the expression is not defined.
+*/
+function definiteIntegral(node, x, lower, upper) {
+	const F = integrate(node, x);
+	if (!F) return null;
+	const at = (v) => evaluate(F, { [x]: v });
+	const result = at(upper) - at(lower);
+	return Number.isFinite(result) ? result : null;
+}
 const isNum = (n, v) => n.type === "num" && (v === void 0 || n.value === v);
 /** A stable structural key, so identical cores group (x and x; x² and x²). */
 function nodeKey(n) {
@@ -192,10 +320,36 @@ function simplify(node) {
 							right: l.left
 						};
 					}
+					/**
+					* Cancel a constant against a fraction's denominator: c·(a/b) → (c/b)·a.
+					*
+					* `∫3x² dx` is the plainest case. The constant comes out of the integral and the power
+					* rule divides by 3, so the honest answer is `3·(x³/3)`. A learner expects `x³`, and
+					* only the fully cancelled form is worth showing as the ANSWER.
+					*/
+					if (l.type === "num" && r.type === "binary" && r.op === "/" && r.right.type === "num") {
+						const k = l.value / r.right.value;
+						if (Number.isInteger(k)) return k === 1 ? r.left : simplify(mul(num(k), r.left));
+					}
+					if (r.type === "num" && l.type === "binary" && l.op === "/" && l.right.type === "num") {
+						const k = r.value / l.right.value;
+						if (Number.isInteger(k)) return k === 1 ? l.left : simplify(mul(num(k), l.left));
+					}
 					break;
 				case "/":
 					if (isNum(r, 1)) return l;
 					if (isNum(l, 0)) return num(0);
+					/**
+					* Collapse a nested fraction: (a/b)/c → a/(bc).
+					*
+					* Integration produces these constantly, because the power rule divides by n+1 and the
+					* linear-substitution rule then divides by a. Left alone, ∫(2x+1)³dx renders as a
+					* fraction inside a fraction, which is correct and unreadable, and unreadable is the
+					* complaint this engine exists to answer.
+					*/
+					if (r.type === "num" && l.type === "binary" && l.op === "/" && l.right.type === "num") return simplify(div(l.left, num(l.right.value * r.value)));
+					if (r.type === "num" && r.value < 0) return simplify(neg(div(l, num(-r.value))));
+					if (l.type === "neg") return neg(simplify(div(l.arg, r)));
 					break;
 				case "^":
 					if (isNum(r, 1)) return l;
@@ -244,4 +398,4 @@ function fold(op, a, b) {
 }
 
 //#endregion
-export { differentiate, simplify };
+export { definiteIntegral, differentiate, integrate, simplify };

package/dist/math/index.d.mts

@@ -1,6 +1,6 @@
 import { BinOp, Node, compileNode, evaluate, freeVars } from "./ast.mjs";
 import { parse } from "./parse.mjs";
-import { differentiate, simplify } from "./calculus.mjs";
+import { definiteIntegral, differentiate, integrate, simplify } from "./calculus.mjs";
 import { CompiledFn, compile } from "./compile.mjs";
 import { toLatex } from "./latex.mjs";
 
@@ -24,4 +24,4 @@ type ExprResult = CompiledExpr | ExprError;
 /** Compile a formula string. Returns `{ fn, vars, ast }` or `{ error }`, never throws. */
 declare function compileExpr(src: string): ExprResult;
 //#endregion
-export { type BinOp, CompiledExpr, type CompiledFn, ExprError, ExprResult, type Node, compile, compileExpr, compileNode, differentiate, evaluate, freeVars, parse, simplify, toLatex };
+export { type BinOp, CompiledExpr, type CompiledFn, ExprError, ExprResult, type Node, compile, compileExpr, compileNode, definiteIntegral, differentiate, evaluate, freeVars, integrate, parse, simplify, toLatex };

package/dist/math/index.mjs

@@ -1,6 +1,6 @@
 import { compileNode, evaluate, freeVars } from "./ast.mjs";
 import { parse } from "./parse.mjs";
-import { differentiate, simplify } from "./calculus.mjs";
+import { definiteIntegral, differentiate, integrate, simplify } from "./calculus.mjs";
 import { compile } from "./compile.mjs";
 import { toLatex } from "./latex.mjs";
 
@@ -40,4 +40,4 @@ function compileExpr(src) {
 }
 
 //#endregion
-export { compile, compileExpr, compileNode, differentiate, evaluate, freeVars, parse, simplify, toLatex };
+export { compile, compileExpr, compileNode, definiteIntegral, differentiate, evaluate, freeVars, integrate, parse, simplify, toLatex };

package/dist/math/latex.mjs

@@ -103,6 +103,14 @@ function texCall(node) {
 	if (node.fn === "cbrt") return `\\sqrt[3]{${wrap(a0, 0)}}`;
 	if (node.fn === "abs") return `\\left|${wrap(a0, 0)}\\right|`;
 	if (node.fn === "exp") return `e^{${wrap(a0, 0)}}`;
+	/**
+	* `ln|x|`, not `ln(|x|)`.
+	*
+	* The modulus bars already delimit the argument, so the usual parentheses double up. Every
+	* textbook and mark scheme writes the integral of 1/x as ln|x|, and that is the form a learner
+	* has to reproduce, so it is the form to show.
+	*/
+	if ((node.fn === "ln" || node.fn === "log") && a0.type === "call" && a0.fn === "abs" && a0.args[0]) return `\\${node.fn}\\left|${wrap(a0.args[0], 0)}\\right|`;
 	const args = node.args.map((a) => wrap(a, 0)).join(", ");
 	return `${NAMED_FN.has(node.fn) ? `\\${node.fn}` : `\\operatorname{${node.fn}}`}\\left(${args}\\right)`;
 }

package/dist/primitives/Dot.d.mts

@@ -1,5 +1,4 @@
 import { StyleProps } from "./props.mjs";
-import { ReactNode } from "react";
 
 //#region src/primitives/Dot.d.ts
 interface DotProps extends StyleProps {
@@ -8,20 +7,8 @@ interface DotProps extends StyleProps {
   /** Pixel radius (never scaled). */
   r?: number;
 }
-declare function Dot({
-  x,
-  y,
-  r,
-  color,
-  opacity
-}: DotProps): ReactNode;
+declare const Dot: import("react").NamedExoticComponent<DotProps>;
 /** A point with a contrast ring (reads clearly over any background). */
-declare function Point({
-  x,
-  y,
-  r,
-  color,
-  opacity
-}: DotProps): ReactNode;
+declare const Point: import("react").NamedExoticComponent<DotProps>;
 //#endregion
 export { Dot, DotProps, Point };

package/dist/primitives/Dot.mjs

@@ -2,10 +2,12 @@
 
 import { fmt } from "../core/coords.mjs";
 import { useCoords } from "../core/context.mjs";
+import { geomPropsEqual } from "./props.mjs";
+import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/primitives/Dot.tsx
-function Dot({ x, y, r = 5, color = "var(--stage-accent)", opacity = 1 }) {
+const Dot = memo(function Dot({ x, y, r = 5, color = "var(--stage-accent)", opacity = 1 }) {
 	const [px, py] = useCoords().toPx(x, y);
 	return /* @__PURE__ */ jsx("circle", {
 		cx: fmt(px),
@@ -14,9 +16,9 @@ function Dot({ x, y, r = 5, color = "var(--stage-accent)", opacity = 1 }) {
 		fill: color,
 		opacity
 	});
-}
+}, geomPropsEqual);
 /** A point with a contrast ring (reads clearly over any background). */
-function Point({ x, y, r = 6, color = "var(--stage-accent)", opacity = 1 }) {
+const Point = memo(function Point({ x, y, r = 6, color = "var(--stage-accent)", opacity = 1 }) {
 	const [px, py] = useCoords().toPx(x, y);
 	return /* @__PURE__ */ jsxs("g", {
 		opacity,
@@ -34,7 +36,7 @@ function Point({ x, y, r = 6, color = "var(--stage-accent)", opacity = 1 }) {
 			strokeWidth: 1.5
 		})]
 	});
-}
+}, geomPropsEqual);
 
 //#endregion
 export { Dot, Point };

package/dist/primitives/Grid.d.mts

@@ -1,5 +1,3 @@
-import { ReactNode } from "react";
-
 //#region src/primitives/Grid.d.ts
 /** A "nice" step (1,2,5 × 10ⁿ) so ~`target` gridlines span the range. */
 declare function niceStep(span: number, target?: number): number;
@@ -11,12 +9,35 @@ interface GridProps {
   stepY?: number;
   color?: string;
 }
-declare function Grid({
-  step,
-  stepX,
-  stepY,
-  color
-}: GridProps): ReactNode;
+declare const Grid: import("react").NamedExoticComponent<GridProps>;
+/**
+ * A spot the axis numbers must leave clear: a point in math coordinates, widened by a half-size and
+ * shifted by an offset, both in px. A dot drawn on an axis sits exactly where that axis prints its
+ * numbers (an intercept on the y-axis lands on the y tick labels, a focus on the x-axis on the x
+ * ones), so without this the number is half-covered by the dot and both read badly.
+ */
+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;
+}
+/** The zone a `<Label>` occupies, from the same props, so a figure can keep the axis numbers off it. */
+declare function clearOfLabel(x: number, y: number, text: string, {
+  size,
+  anchor,
+  dx,
+  dy
+}?: {
+  size?: number;
+  anchor?: 'start' | 'middle' | 'end';
+  dx?: number;
+  dy?: number;
+}): ClearZone;
 interface AxesProps {
   color?: string;
   ticks?: boolean;
@@ -28,14 +49,9 @@ interface AxesProps {
    *  can READ coordinates off the grid, needed for graphs where the answer is a
    *  point (systems, plotting). Default off (most figures want a clean axis). */
   labels?: boolean;
+  /** Places the numbers must leave clear, such as the dots and labels the figure draws on an axis. */
+  keepClear?: readonly ClearZone[];
 }
-declare function Axes({
-  color,
-  ticks,
-  step,
-  stepX,
-  stepY,
-  labels
-}: AxesProps): ReactNode;
+declare const Axes: import("react").NamedExoticComponent<AxesProps>;
 //#endregion
-export { Axes, AxesProps, Grid, GridProps, niceStep };
+export { Axes, AxesProps, ClearZone, Grid, GridProps, clearOfLabel, niceStep };

package/dist/primitives/Grid.mjs

@@ -1,6 +1,7 @@
 'use client';
 
 import { useCoords } from "../core/context.mjs";
+import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/primitives/Grid.tsx
@@ -17,7 +18,7 @@ function tickValues(min, max, step) {
 	for (let v = start; v <= max + step * 1e-6; v += step) out.push(Math.round(v / step) * step);
 	return out;
 }
-function Grid({ step, stepX, stepY, color = "var(--stage-grid)" }) {
+const Grid = memo(function Grid({ step, stepX, stepY, color = "var(--stage-grid)" }) {
 	const c = useCoords();
 	const sx = stepX ?? step ?? niceStep(c.view.xMax - c.view.xMin);
 	const sy = stepY ?? step ?? niceStep(c.view.yMax - c.view.yMin);
@@ -47,20 +48,49 @@ function Grid({ step, stepX, stepY, color = "var(--stage-grid)" }) {
 		}, `gy${y}`));
 	}
 	return /* @__PURE__ */ jsx("g", { children: lines });
+});
+/** Roughly how wide a label renders, in px: digits and letters average a little over half an em. */
+const textWidth = (text, size) => text.length * size * .58;
+/** The zone a `<Label>` occupies, from the same props, so a figure can keep the axis numbers off it. */
+function clearOfLabel(x, y, text, { size = 14, anchor = "middle", dx = 0, dy = 0 } = {}) {
+	const w = textWidth(text, size);
+	return {
+		x,
+		y,
+		dx: dx + (anchor === "start" ? w / 2 : anchor === "end" ? -w / 2 : 0),
+		dy,
+		rx: w / 2 + 3,
+		ry: size * .5 + 2
+	};
 }
 const fmtTick = (v) => {
 	if (Number.isInteger(v)) return String(v);
 	const r = Math.round(v * 100) / 100;
 	return String(r);
 };
-function Axes({ color = "var(--stage-axis)", ticks = true, step, stepX, stepY, labels = false }) {
+const hits = (a, b) => a.l < b.r && b.l < a.r && a.t < b.b && b.t < a.b;
+const Axes = memo(function Axes({ color = "var(--stage-axis)", ticks = true, step, stepX, stepY, labels = false, keepClear }) {
 	const c = useCoords();
 	const sx = stepX ?? step ?? niceStep(c.view.xMax - c.view.xMin);
 	const sy = stepY ?? step ?? niceStep(c.view.yMax - c.view.yMin);
-	const xAxisA = c.toPx(c.view.xMin, 0);
-	const xAxisB = c.toPx(c.view.xMax, 0);
-	const yAxisA = c.toPx(0, c.view.yMin);
-	const yAxisB = c.toPx(0, c.view.yMax);
+	/**
+	* Where the axes sit when the origin is off-screen.
+	*
+	* Drawing them at coordinate 0 unconditionally means that a view which does not contain 0 puts
+	* the axis line, every tick and every number outside the canvas, so the reader loses the scale
+	* entirely and cannot tell what they are looking at. Pin each axis to the nearest edge instead,
+	* which is what a plotting library does: the ticks and numbers stay readable, and the axis is
+	* still in the right place whenever the origin IS in view.
+	*/
+	const axisY = Math.min(c.view.yMax, Math.max(c.view.yMin, 0));
+	const axisX = Math.min(c.view.xMax, Math.max(c.view.xMin, 0));
+	const originInView = axisX === 0 && axisY === 0;
+	const yLabelsRight = axisX <= c.view.xMin;
+	const xLabelsAbove = axisY <= c.view.yMin;
+	const xAxisA = c.toPx(c.view.xMin, axisY);
+	const xAxisB = c.toPx(c.view.xMax, axisY);
+	const yAxisA = c.toPx(axisX, c.view.yMin);
+	const yAxisB = c.toPx(axisX, c.view.yMax);
 	const labelStyle = {
 		paintOrder: "stroke",
 		stroke: "var(--stage-bg)",
@@ -93,9 +123,52 @@ function Axes({ color = "var(--stage-axis)", ticks = true, step, stepX, stepY, l
 		strokeWidth: 1.5
 	}, "ay")];
 	if (ticks) {
-		for (const x of tickValues(c.view.xMin, c.view.xMax, sx)) {
-			if (Math.abs(x) < 1e-9) continue;
-			const p = c.toPx(x, 0);
+		const xs = tickValues(c.view.xMin, c.view.xMax, sx).filter((x) => !(originInView && Math.abs(x) < 1e-9));
+		const ys = tickValues(c.view.yMin, c.view.yMax, sy).filter((y) => !(originInView && Math.abs(y) < 1e-9));
+		const origin = c.toPx(0, 0);
+		const xLabelAt = (x) => {
+			const p = c.toPx(x, axisY);
+			return [p[0], p[1] + (xLabelsAbove ? -12 : 14)];
+		};
+		const yLabelAt = (y) => {
+			const p = c.toPx(axisX, y);
+			return [p[0] + (yLabelsRight ? 8 : -8), p[1]];
+		};
+		const yAnchor = yLabelsRight ? "start" : "end";
+		const shown = /* @__PURE__ */ new Set();
+		if (labels) {
+			const taken = (keepClear ?? []).map((z) => {
+				const [zx, zy] = c.toPx(z.x, z.y);
+				const px = zx + (z.dx ?? 0);
+				const py = zy + (z.dy ?? 0);
+				const rx = z.rx ?? 10;
+				const ry = z.ry ?? 10;
+				return {
+					l: px - rx,
+					r: px + rx,
+					t: py - ry,
+					b: py + ry
+				};
+			});
+			const place = (key, [px, py], text, anchor) => {
+				const w = textWidth(text, 11);
+				const l = anchor === "middle" ? px - w / 2 : anchor === "end" ? px - w : px;
+				const box = {
+					l,
+					r: l + w,
+					t: py - 5,
+					b: py + 5
+				};
+				if (taken.some((t) => hits(box, t))) return;
+				taken.push(box);
+				shown.add(key);
+			};
+			if (originInView) place("l0", [origin[0] - 8, origin[1] + 12], "0", "end");
+			for (const x of xs) place(`lx${x}`, xLabelAt(x), fmtTick(x), "middle");
+			for (const y of ys) place(`ly${y}`, yLabelAt(y), fmtTick(y), yAnchor);
+		}
+		for (const x of xs) {
+			const p = c.toPx(x, axisY);
 			nodes.push(/* @__PURE__ */ jsx("line", {
 				x1: p[0],
 				y1: p[1] - 4,
@@ -104,11 +177,10 @@ function Axes({ color = "var(--stage-axis)", ticks = true, step, stepX, stepY, l
 				stroke: color,
 				strokeWidth: 1.5
 			}, `tx${x}`));
-			if (labels) nodes.push(num(`lx${x}`, p[0], p[1] + 14, fmtTick(x), "middle"));
+			if (shown.has(`lx${x}`)) nodes.push(num(`lx${x}`, ...xLabelAt(x), fmtTick(x), "middle"));
 		}
-		for (const y of tickValues(c.view.yMin, c.view.yMax, sy)) {
-			if (Math.abs(y) < 1e-9) continue;
-			const p = c.toPx(0, y);
+		for (const y of ys) {
+			const p = c.toPx(axisX, y);
 			nodes.push(/* @__PURE__ */ jsx("line", {
 				x1: p[0] - 4,
 				y1: p[1],
@@ -117,12 +189,12 @@ function Axes({ color = "var(--stage-axis)", ticks = true, step, stepX, stepY, l
 				stroke: color,
 				strokeWidth: 1.5
 			}, `ty${y}`));
-			if (labels) nodes.push(num(`ly${y}`, p[0] - 8, p[1], fmtTick(y), "end"));
+			if (shown.has(`ly${y}`)) nodes.push(num(`ly${y}`, ...yLabelAt(y), fmtTick(y), yAnchor));
 		}
-		if (labels) nodes.push(num("l0", c.toPx(0, 0)[0] - 8, c.toPx(0, 0)[1] + 12, "0", "end"));
+		if (shown.has("l0")) nodes.push(num("l0", origin[0] - 8, origin[1] + 12, "0", "end"));
 	}
 	return /* @__PURE__ */ jsx("g", { children: nodes });
-}
+});
 
 //#endregion
-export { Axes, Grid, niceStep };
+export { Axes, Grid, clearOfLabel, niceStep };

package/dist/primitives/Label.d.mts

@@ -1,5 +1,3 @@
-import { ReactNode } from "react";
-
 //#region src/primitives/Label.d.ts
 interface LabelProps {
   x: number;
@@ -17,17 +15,6 @@ interface LabelProps {
 /** Upright pixel-space text with a background-colored outline for legibility.
  *  Renders `_`/`^` as real SVG sub/superscripts via the shared `parseRichText`
  *  grammar (the same one labs' HTML `<RichText>` uses, one source of truth). */
-declare function Label({
-  x,
-  y,
-  text,
-  color,
-  size,
-  dx,
-  dy,
-  anchor,
-  baseline,
-  weight
-}: LabelProps): ReactNode;
+declare const Label: import("react").NamedExoticComponent<LabelProps>;
 //#endregion
 export { Label, LabelProps };

package/dist/primitives/Label.mjs

@@ -3,13 +3,14 @@
 import { fmt } from "../core/coords.mjs";
 import { parseRichText } from "../core/richText.mjs";
 import { useCoords } from "../core/context.mjs";
+import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/primitives/Label.tsx
 /** Upright pixel-space text with a background-colored outline for legibility.
 *  Renders `_`/`^` as real SVG sub/superscripts via the shared `parseRichText`
 *  grammar (the same one labs' HTML `<RichText>` uses, one source of truth). */
-function Label({ x, y, text, color = "var(--stage-fg)", size = 14, dx = 0, dy = 0, anchor = "middle", baseline = "middle", weight = 600 }) {
+const Label = memo(function Label({ x, y, text, color = "var(--stage-fg)", size = 14, dx = 0, dy = 0, anchor = "middle", baseline = "middle", weight = 600 }) {
 	const [px, py] = useCoords().toPx(x, y);
 	const spans = parseRichText(text);
 	const shift = size * .32;
@@ -39,7 +40,7 @@ function Label({ x, y, text, color = "var(--stage-fg)", size = 14, dx = 0, dy =
 			}, i);
 		})
 	});
-}
+});
 
 //#endregion
 export { Label };

package/dist/primitives/Lines.d.mts

@@ -1,50 +1,22 @@
 import { Vec2 } from "../core/vec.mjs";
 import { StyleProps } from "./props.mjs";
-import { ReactNode } from "react";
 
 //#region src/primitives/Lines.d.ts
 interface SegmentProps extends StyleProps {
   from: Vec2;
   to: Vec2;
 }
-declare function Segment({
-  from,
-  to,
-  color,
-  weight,
-  opacity,
-  dashed
-}: SegmentProps): ReactNode;
+declare const Segment: import("react").NamedExoticComponent<SegmentProps>;
 interface LineProps extends StyleProps {
   from: Vec2;
   to: Vec2;
 }
-declare function Line({
-  from,
-  to,
-  color,
-  weight,
-  opacity,
-  dashed
-}: LineProps): ReactNode;
-declare function Ray({
-  from,
-  to,
-  color,
-  weight,
-  opacity,
-  dashed
-}: LineProps): ReactNode;
+declare const Line: import("react").NamedExoticComponent<LineProps>;
+declare const Ray: import("react").NamedExoticComponent<LineProps>;
 interface VectorProps extends StyleProps {
   tail?: Vec2;
   tip: Vec2;
 }
-declare function Vector({
-  tail,
-  tip,
-  color,
-  weight,
-  opacity
-}: VectorProps): ReactNode;
+declare const Vector: import("react").NamedExoticComponent<VectorProps>;
 //#endregion
 export { Line, LineProps, Ray, Segment, SegmentProps, Vector, VectorProps };