@classytic/stage 0.2.0 → 0.4.0

package/dist/physics/rotation/torque.mjs

@@ -0,0 +1,134 @@
+import { calc, texSigFigs } from "../../core/worked.mjs";
+import { toRadians } from "../vectors.mjs";
+
+//#region src/physics/rotation/torque.ts
+/**
+* Torque: the rotational analogue of force, and the couple.
+*
+* THE ANALOGY IS THE POINT, and it is worth stating once rather than rediscovering per topic. Every
+* equation of rotation is a linear one with the quantities swapped:
+*
+*     s → θ      v → ω      a → α      m → I      F → τ      p → L
+*
+* so `F = ma` becomes `τ = Iα`, `p = mv` becomes `L = Iω`, and `½mv²` becomes `½Iω²`. A student who
+* has that mapping has the whole chapter and does not need to memorise a second set of formulas;
+* one who does not has to learn everything twice. {@link ROTATIONAL_ANALOGUE} exists so a lesson
+* can print it as a table.
+*
+* A COUPLE is the case worth separating out: two equal and opposite forces that do not share a line
+* of action. Their resultant FORCE is exactly zero, so the body does not accelerate anywhere, and
+* yet it turns. That is the thing a learner needs to see, because it contradicts the reasonable
+* belief that zero net force means nothing happens. A couple's moment is also the same about EVERY
+* point, which is why a steering wheel turns the same whichever part of it you hold.
+*
+* Pure: no React, no pixels.
+*/
+/** The linear quantity and its rotational counterpart, for a lesson that prints the mapping. */
+const ROTATIONAL_ANALOGUE = [
+	{
+		linear: "displacement s",
+		rotational: "angle θ",
+		relation: "s = rθ"
+	},
+	{
+		linear: "velocity v",
+		rotational: "angular velocity ω",
+		relation: "v = rω"
+	},
+	{
+		linear: "acceleration a",
+		rotational: "angular acceleration α",
+		relation: "a = rα"
+	},
+	{
+		linear: "mass m",
+		rotational: "moment of inertia I",
+		relation: "I = Σmr²"
+	},
+	{
+		linear: "force F",
+		rotational: "torque τ",
+		relation: "τ = Iα"
+	},
+	{
+		linear: "momentum p = mv",
+		rotational: "angular momentum L = Iω",
+		relation: "L = mvr"
+	},
+	{
+		linear: "kinetic energy ½mv²",
+		rotational: "rotational KE ½Iω²",
+		relation: ""
+	}
+];
+/**
+* The turning effect of one force: `τ = F r sin θ`.
+*
+* `θ` is between the force and the line from the axis to where it acts. Only the PERPENDICULAR
+* component turns anything; a force aimed straight at the hinge has no effect however large it is,
+* which is why you push a door at its edge and at right angles.
+*/
+function torque(force, distance, angleDeg = 90, sf = 3) {
+	const value = force * distance * Math.sin(toRadians(angleDeg));
+	return {
+		value,
+		worked: calc().step("\\tau = F r \\sin\\theta", "only the component at right angles to the arm turns anything").step(`\\tau = ${texSigFigs(force, sf)} \\times ${texSigFigs(distance, sf)} \\times \\sin ${texSigFigs(angleDeg, sf)}^\\circ = ${texSigFigs(value, sf)}\\ \\mathrm{N\\,m}`, angleDeg % 180 === 0 ? "aimed straight along the arm, so it turns nothing at all however hard you push" : void 0).done(value)
+	};
+}
+/**
+* The moment of a couple: `M = F d`, with `d` the perpendicular distance BETWEEN the two forces.
+*
+* Not `F × distance from some axis`, because there is no axis in it. The moment of a couple is the
+* same about every point in the plane, which is the property that makes it a couple rather than two
+* separate moments, and it is why the answer never asks you where the pivot is.
+*/
+function couple(force, separation, sf = 3) {
+	const value = force * separation;
+	return {
+		value,
+		worked: calc().step("M = F d", "d is the perpendicular distance between the two forces, and the moment is the same about EVERY point").step(`M = ${texSigFigs(force, sf)} \\times ${texSigFigs(separation, sf)} = ${texSigFigs(value, sf)}\\ \\mathrm{N\\,m}`, "the resultant force is zero, so it does not go anywhere. It only turns").done(value)
+	};
+}
+/**
+* The force a second couple needs to balance the first.
+*
+* Two couples balance when their moments are equal and opposite, so a wide couple can be held by a
+* small force and a narrow one needs a large force. That is the whole of the rectangular-plate
+* question these chapters set.
+*/
+function balancingCouple(known, separation, sf = 3) {
+	if (separation <= 0) throw new Error("The second couple needs a positive separation.");
+	const force = known.force * known.separation / separation;
+	return {
+		force,
+		worked: calc().step("M_1 = M_2", "in balance the two moments are equal in size and opposite in sense").step(`${texSigFigs(known.force, sf)} \\times ${texSigFigs(known.separation, sf)} = P \\times ${texSigFigs(separation, sf)}`).step(`P = ${texSigFigs(force, sf)}\\ \\mathrm{N}`, "a couple acting over a shorter distance needs a proportionally bigger force").done(force)
+	};
+}
+/**
+* `τ = Iα`: Newton's second law, rotated.
+*
+* Give any two and it returns the third. The same torque produces very different accelerations on
+* bodies of the same mass shaped differently, which is the thing moment of inertia is FOR.
+*/
+function angularAcceleration(torqueValue, inertia, sf = 3) {
+	if (inertia <= 0) throw new Error("Moment of inertia must be positive.");
+	const alpha = torqueValue / inertia;
+	return {
+		alpha,
+		worked: calc().step("\\tau = I\\alpha", "F = ma with every quantity replaced by its rotational counterpart").step(`\\alpha = \\frac{${texSigFigs(torqueValue, sf)}}{${texSigFigs(inertia, sf)}} = ${texSigFigs(alpha, sf)}\\ \\mathrm{rad\\,s^{-2}}`, "the same torque spins a hoop far more slowly than a disc of equal mass").done(alpha)
+	};
+}
+/**
+* The torque needed to change angular momentum at a given rate: `τ = dL/dt`.
+*
+* The more fundamental statement, and the one that survives when the moment of inertia itself is
+* changing, which `τ = Iα` does not. Supplied as a rate rather than as a derivative because that is
+* how the question arrives: "the angular momentum changes by this much in this time".
+*/
+const torqueFromRate = (deltaL, deltaT) => {
+	if (deltaT <= 0) throw new Error("The interval must be positive.");
+	return deltaL / deltaT;
+};
+
+//#endregion
+export { ROTATIONAL_ANALOGUE, angularAcceleration, balancingCouple, couple, torque, torqueFromRate };

package/dist/physics/vectors.d.mts

@@ -0,0 +1,64 @@
+import { Worked } from "../core/worked.mjs";
+
+//#region src/physics/vectors.d.ts
+declare const DEG: number;
+declare const toRadians: (deg: number) => number;
+declare const toDegrees: (rad: number) => number;
+/** A vector as a pair of perpendicular components, in whatever unit the magnitude was in. */
+interface Components {
+  /** Along the horizontal. */
+  readonly x: number;
+  /** Along the vertical, positive UPWARDS. See {@link SignConvention} to reinterpret. */
+  readonly y: number;
+}
+/** A vector as a size and a direction. */
+interface Polar {
+  readonly magnitude: number;
+  /** Above the horizontal, in degrees. Negative points below it. */
+  readonly angleDeg: number;
+}
+/**
+ * Split a magnitude at an angle above the horizontal into horizontal and vertical parts.
+ *
+ * Rounding matters here in a way it does not elsewhere: `Math.cos(Math.PI / 2)` is 6.1e-17, not 0,
+ * and a horizontal component of 6.1e-17 propagates into a range of 1.2e-16 m, which prints as
+ * `1.22 × 10^-16 m` in a derivation a student is reading. A vertical launch has zero range and the
+ * working should say zero.
+ */
+declare function resolve(magnitude: number, angleDeg: number): Components;
+/** Components back to a magnitude and a direction: the reverse of {@link resolve}. */
+declare function compose(x: number, y: number): Polar;
+/**
+ * The working for a resolution, for a lesson that wants to show it rather than assert it.
+ *
+ * The first line is the definition, not the substitution, because the point being taught is that
+ * the components come from a right-angled triangle whose hypotenuse is the vector.
+ */
+declare function resolveSteps(magnitude: number, angleDeg: number, unit: string, sf?: number): Worked;
+/** Which vertical direction the numbers in an equation are measured as positive. */
+type Positive = 'up' | 'down';
+/**
+ * A declared choice of positive direction, and the signed values that follow from it.
+ *
+ * Everything a vertical-motion question gives you arrives as a magnitude plus a direction in words
+ * ("thrown upwards at 20 m/s from 10 m up, gravity 9.8 downwards"). This turns those words into
+ * the signed numbers SUVAT needs, once, in a way that can be shown and flipped.
+ */
+declare class SignConvention {
+  readonly positive: Positive;
+  constructor(positive: Positive);
+  /** `+1` when the given direction is the positive one, `−1` when it opposes it. */
+  sign(direction: Positive): 1 | -1;
+  /** A magnitude, signed for the direction it acts in. */
+  signed(magnitude: number, direction: Positive): number;
+  /** Gravity's acceleration under this convention: negative if up is positive. */
+  gravity(g?: number): number;
+  /** The other choice, for a lab that lets a learner flip it. */
+  flipped(): SignConvention;
+  /** A sentence a lesson can print: "Taking up as positive, g = −9.8 m/s²." */
+  describe(g?: number): string;
+}
+declare const upPositive: () => SignConvention;
+declare const downPositive: () => SignConvention;
+//#endregion
+export { Components, DEG, Polar, Positive, SignConvention, compose, downPositive, resolve, resolveSteps, toDegrees, toRadians, upPositive };

package/dist/physics/vectors.mjs

@@ -0,0 +1,114 @@
+import { calc, texSigFigs } from "../core/worked.mjs";
+
+//#region src/physics/vectors.ts
+/**
+* Resolving a vector into components, and the sign convention that decides what the components
+* mean.
+*
+* Two separate ideas live here and they are usually taught as one, which is why they confuse
+* people.
+*
+* The first is geometry and has no physics in it: a magnitude at an angle is the same thing as a
+* pair of perpendicular components, `u cos θ` along and `u sin θ` across. That is true of a
+* velocity, a force, a displacement, or a ladder against a wall.
+*
+* The second is bookkeeping: before any of those components can go into an equation, somebody has
+* to say which direction counts as positive. Nothing in the world decides this. A ball thrown
+* upwards has `u = +20, a = −9.8` if up is positive and `u = −20, a = +9.8` if down is positive,
+* and BOTH give the same height at the same time, because the answer is a physical fact and the
+* sign is a choice of description. Textbook chapters that print one worked solution per convention
+* (up-positive here, down-positive there) leave students believing there are two physics.
+*
+* So {@link SignConvention} is a first-class object. A lab can let a learner flip it and watch the
+* numbers in the equation change while the trajectory does not move, which is the moment the idea
+* lands.
+*
+* Pure: no React, no pixels.
+*/
+const DEG = Math.PI / 180;
+const toRadians = (deg) => deg * DEG;
+const toDegrees = (rad) => rad / DEG;
+/**
+* Split a magnitude at an angle above the horizontal into horizontal and vertical parts.
+*
+* Rounding matters here in a way it does not elsewhere: `Math.cos(Math.PI / 2)` is 6.1e-17, not 0,
+* and a horizontal component of 6.1e-17 propagates into a range of 1.2e-16 m, which prints as
+* `1.22 × 10^-16 m` in a derivation a student is reading. A vertical launch has zero range and the
+* working should say zero.
+*/
+function resolve(magnitude, angleDeg) {
+	const a = toRadians(angleDeg);
+	return {
+		x: snap(magnitude * Math.cos(a), magnitude),
+		y: snap(magnitude * Math.sin(a), magnitude)
+	};
+}
+/** Components back to a magnitude and a direction: the reverse of {@link resolve}. */
+function compose(x, y) {
+	return {
+		magnitude: Math.hypot(x, y),
+		angleDeg: toDegrees(Math.atan2(y, x))
+	};
+}
+/**
+* Kill the floating-point dust that trigonometry leaves at the quarter turns.
+*
+* The threshold is RELATIVE to the magnitude being resolved, and that is not a refinement. A fixed
+* 1e-12 works for a vector of size 1 and quietly stops working as the numbers grow: `cos(pi/2)` is
+* 6.1e-17, so a force of 1e6 N at 90 degrees leaves a horizontal component of 6.1e-11, which sails
+* past an absolute cut-off and goes on to report that a perpendicular force did POSITIVE work. That
+* is a visible wrong answer rather than an ugly printout, which is what the absolute version was
+* guarding against. Scaling the threshold makes the guard hold at every size.
+*/
+function snap(value, scale = 1) {
+	return Math.abs(value) < Math.abs(scale) * 1e-12 ? 0 : value;
+}
+/**
+* The working for a resolution, for a lesson that wants to show it rather than assert it.
+*
+* The first line is the definition, not the substitution, because the point being taught is that
+* the components come from a right-angled triangle whose hypotenuse is the vector.
+*/
+function resolveSteps(magnitude, angleDeg, unit, sf = 3) {
+	const { x, y } = resolve(magnitude, angleDeg);
+	const u = `\\ \\mathrm{${unit}}`;
+	return calc().step(`u_x = u\\cos\\theta, \\quad u_y = u\\sin\\theta`, "the vector is the hypotenuse of a right-angled triangle").step(`u = ${texSigFigs(magnitude, sf)}${u}, \\quad \\theta = ${texSigFigs(angleDeg, sf)}^\\circ`).step(`u_x = ${texSigFigs(magnitude, sf)}\\cos ${texSigFigs(angleDeg, sf)}^\\circ = ${texSigFigs(x, sf)}${u}`).step(`u_y = ${texSigFigs(magnitude, sf)}\\sin ${texSigFigs(angleDeg, sf)}^\\circ = ${texSigFigs(y, sf)}${u}`).done(Math.hypot(x, y));
+}
+/**
+* A declared choice of positive direction, and the signed values that follow from it.
+*
+* Everything a vertical-motion question gives you arrives as a magnitude plus a direction in words
+* ("thrown upwards at 20 m/s from 10 m up, gravity 9.8 downwards"). This turns those words into
+* the signed numbers SUVAT needs, once, in a way that can be shown and flipped.
+*/
+var SignConvention = class SignConvention {
+	positive;
+	constructor(positive) {
+		this.positive = positive;
+	}
+	/** `+1` when the given direction is the positive one, `−1` when it opposes it. */
+	sign(direction) {
+		return direction === this.positive ? 1 : -1;
+	}
+	/** A magnitude, signed for the direction it acts in. */
+	signed(magnitude, direction) {
+		return this.sign(direction) * Math.abs(magnitude);
+	}
+	/** Gravity's acceleration under this convention: negative if up is positive. */
+	gravity(g = 9.8) {
+		return this.signed(g, "down");
+	}
+	/** The other choice, for a lab that lets a learner flip it. */
+	flipped() {
+		return new SignConvention(this.positive === "up" ? "down" : "up");
+	}
+	/** A sentence a lesson can print: "Taking up as positive, g = −9.8 m/s²." */
+	describe(g = 9.8) {
+		return `Taking ${this.positive} as positive, g = ${this.gravity(g)} m/s².`;
+	}
+};
+const upPositive = () => new SignConvention("up");
+const downPositive = () => new SignConvention("down");
+
+//#endregion
+export { DEG, SignConvention, compose, downPositive, resolve, resolveSteps, toDegrees, toRadians, upPositive };

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 };