@classytic/stage 0.1.0 → 0.3.0

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,30 +1,57 @@
-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;
 interface GridProps {
   step?: number;
+  /** Per-axis overrides (win over `step`); keeps a tall-thin or short-wide plot
+   *  from inheriting the other axis's spacing. */
+  stepX?: number;
+  stepY?: number;
   color?: string;
 }
-declare function Grid({
-  step,
-  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;
   step?: number;
+  /** Per-axis tick spacing overrides (win over `step`). */
+  stepX?: number;
+  stepY?: number;
   /** Show the numeric value at each tick (and a "0" at the origin) so learners
-   *  can READ coordinates off the grid — needed for graphs where the answer is a
+   *  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,
-  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,11 +18,12 @@ 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, color = "var(--stage-grid)" }) {
+const Grid = memo(function Grid({ step, stepX, stepY, color = "var(--stage-grid)" }) {
 	const c = useCoords();
-	const s = step ?? niceStep(c.view.xMax - c.view.xMin);
+	const sx = stepX ?? step ?? niceStep(c.view.xMax - c.view.xMin);
+	const sy = stepY ?? step ?? niceStep(c.view.yMax - c.view.yMin);
 	const lines = [];
-	for (const x of tickValues(c.view.xMin, c.view.xMax, s)) {
+	for (const x of tickValues(c.view.xMin, c.view.xMax, sx)) {
 		const a = c.toPx(x, c.view.yMin);
 		const b = c.toPx(x, c.view.yMax);
 		lines.push(/* @__PURE__ */ jsx("line", {
@@ -33,7 +35,7 @@ function Grid({ step, color = "var(--stage-grid)" }) {
 			strokeWidth: 1
 		}, `gx${x}`));
 	}
-	for (const y of tickValues(c.view.yMin, c.view.yMax, s)) {
+	for (const y of tickValues(c.view.yMin, c.view.yMax, sy)) {
 		const a = c.toPx(c.view.xMin, y);
 		const b = c.toPx(c.view.xMax, y);
 		lines.push(/* @__PURE__ */ jsx("line", {
@@ -46,15 +48,49 @@ function Grid({ step, 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) => Number.isInteger(v) ? String(v) : v.toFixed(1);
-function Axes({ color = "var(--stage-axis)", ticks = true, step, labels = false }) {
+const fmtTick = (v) => {
+	if (Number.isInteger(v)) return String(v);
+	const r = Math.round(v * 100) / 100;
+	return String(r);
+};
+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 s = step ?? niceStep(c.view.xMax - c.view.xMin);
-	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);
+	const sx = stepX ?? step ?? niceStep(c.view.xMax - c.view.xMin);
+	const sy = stepY ?? step ?? niceStep(c.view.yMax - c.view.yMin);
+	/**
+	* 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)",
@@ -87,9 +123,52 @@ function Axes({ color = "var(--stage-axis)", ticks = true, step, labels = false
 		strokeWidth: 1.5
 	}, "ay")];
 	if (ticks) {
-		for (const x of tickValues(c.view.xMin, c.view.xMax, s)) {
-			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,
@@ -98,11 +177,10 @@ function Axes({ color = "var(--stage-axis)", ticks = true, step, labels = false
 				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, s)) {
-			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],
@@ -111,12 +189,12 @@ function Axes({ color = "var(--stage-axis)", ticks = true, step, labels = false
 				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;
@@ -16,18 +14,7 @@ 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;
+ *  grammar (the same one labs' HTML `<RichText>` uses, one source of truth). */
+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 }) {
+*  grammar (the same one labs' HTML `<RichText>` uses, one source of truth). */
+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 };

package/dist/primitives/Lines.mjs

@@ -2,6 +2,8 @@
 
 import { fmt } from "../core/coords.mjs";
 import { useCoords } from "../core/context.mjs";
+import { geomPropsEqual } from "./props.mjs";
+import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/primitives/Lines.tsx
@@ -14,7 +16,7 @@ const extend = (c, a, b, back) => {
 	const big = Math.hypot(c.width, c.height) * 2;
 	return [back ? [a[0] - ux * big, a[1] - uy * big] : a, [a[0] + ux * big, a[1] + uy * big]];
 };
-function Segment({ from, to, color = "var(--stage-fg)", weight = 2, opacity = 1, dashed }) {
+const Segment = memo(function Segment({ from, to, color = "var(--stage-fg)", weight = 2, opacity = 1, dashed }) {
 	const c = useCoords();
 	const a = c.toPx(from.x, from.y);
 	const b = c.toPx(to.x, to.y);
@@ -29,8 +31,8 @@ function Segment({ from, to, color = "var(--stage-fg)", weight = 2, opacity = 1,
 		strokeLinecap: "round",
 		strokeDasharray: dashed ? "6 6" : void 0
 	});
-}
-function Line({ from, to, color = "var(--stage-axis)", weight = 2, opacity = 1, dashed }) {
+}, geomPropsEqual);
+const Line = memo(function Line({ from, to, color = "var(--stage-axis)", weight = 2, opacity = 1, dashed }) {
 	const c = useCoords();
 	const [p1, p2] = extend(c, c.toPx(from.x, from.y), c.toPx(to.x, to.y), true);
 	return /* @__PURE__ */ jsx("line", {
@@ -43,8 +45,8 @@ function Line({ from, to, color = "var(--stage-axis)", weight = 2, opacity = 1,
 		opacity,
 		strokeDasharray: dashed ? "6 6" : void 0
 	});
-}
-function Ray({ from, to, color = "var(--stage-axis)", weight = 2, opacity = 1, dashed }) {
+}, geomPropsEqual);
+const Ray = memo(function Ray({ from, to, color = "var(--stage-axis)", weight = 2, opacity = 1, dashed }) {
 	const c = useCoords();
 	const [p1, p2] = extend(c, c.toPx(from.x, from.y), c.toPx(to.x, to.y), false);
 	return /* @__PURE__ */ jsx("line", {
@@ -57,8 +59,8 @@ function Ray({ from, to, color = "var(--stage-axis)", weight = 2, opacity = 1, d
 		opacity,
 		strokeDasharray: dashed ? "6 6" : void 0
 	});
-}
-function Vector({ tail = {
+}, geomPropsEqual);
+const Vector = memo(function Vector({ tail = {
 	x: 0,
 	y: 0
 }, tip, color = "var(--stage-accent-2)", weight = 2.5, opacity = 1 }) {
@@ -76,7 +78,7 @@ function Vector({ tail = {
 		strokeLinecap: "round",
 		markerEnd: "url(#stage-arrow)"
 	});
-}
+}, geomPropsEqual);
 
 //#endregion
 export { Line, Ray, Segment, Vector };

package/dist/primitives/Shapes.d.mts

@@ -1,6 +1,5 @@
 import { Vec2 } from "../core/vec.mjs";
 import { StyleProps } from "./props.mjs";
-import { ReactNode } from "react";
 
 //#region src/primitives/Shapes.d.ts
 interface CircleProps extends StyleProps {
@@ -9,15 +8,7 @@ interface CircleProps extends StyleProps {
   fill?: string;
   fillOpacity?: number;
 }
-declare function Circle({
-  center,
-  r,
-  color,
-  fill,
-  fillOpacity,
-  weight,
-  opacity
-}: CircleProps): ReactNode;
+declare const Circle: import("react").NamedExoticComponent<CircleProps>;
 interface EllipseProps extends StyleProps {
   center: Vec2;
   rx: number;
@@ -25,52 +16,23 @@ interface EllipseProps extends StyleProps {
   fill?: string;
   fillOpacity?: number;
 }
-declare function Ellipse({
-  center,
-  rx,
-  ry,
-  color,
-  fill,
-  fillOpacity,
-  weight,
-  opacity
-}: EllipseProps): ReactNode;
+declare const Ellipse: import("react").NamedExoticComponent<EllipseProps>;
 interface PolygonProps extends StyleProps {
   points: Vec2[];
   fill?: string;
   fillOpacity?: number;
 }
-declare function Polygon({
-  points,
-  color,
-  fill,
-  fillOpacity,
-  weight,
-  opacity
-}: PolygonProps): ReactNode;
+declare const Polygon: import("react").NamedExoticComponent<PolygonProps>;
 interface PolylineProps extends StyleProps {
   points: Vec2[];
 }
-declare function Polyline({
-  points,
-  color,
-  weight,
-  opacity,
-  dashed
-}: PolylineProps): ReactNode;
+declare const Polyline: import("react").NamedExoticComponent<PolylineProps>;
 /** Low-level pixel-space path (d is already in pixels). */
 interface PathProps extends StyleProps {
   d: string;
   fill?: string;
   fillOpacity?: number;
 }
-declare function Path({
-  d,
-  color,
-  fill,
-  fillOpacity,
-  weight,
-  opacity
-}: PathProps): ReactNode;
+declare const Path: import("react").NamedExoticComponent<PathProps>;
 //#endregion
 export { Circle, CircleProps, Ellipse, EllipseProps, Path, PathProps, Polygon, PolygonProps, Polyline, PolylineProps };

package/dist/primitives/Shapes.mjs

@@ -2,6 +2,8 @@
 
 import { fmt } from "../core/coords.mjs";
 import { useCoords } from "../core/context.mjs";
+import { geomPropsEqual } from "./props.mjs";
+import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/primitives/Shapes.tsx
@@ -9,7 +11,7 @@ const toPoints = (c, points) => points.map((p) => {
 	const [x, y] = c.toPx(p.x, p.y);
 	return `${fmt(x)},${fmt(y)}`;
 }).join(" ");
-function Circle({ center, r, color = "var(--stage-accent)", fill = "none", fillOpacity = .12, weight = 2, opacity = 1 }) {
+const Circle = memo(function Circle({ center, r, color = "var(--stage-accent)", fill = "none", fillOpacity = .12, weight = 2, opacity = 1 }) {
 	const c = useCoords();
 	const [cx, cy] = c.toPx(center.x, center.y);
 	return /* @__PURE__ */ jsx("ellipse", {
@@ -23,8 +25,8 @@ function Circle({ center, r, color = "var(--stage-accent)", fill = "none", fillO
 		fillOpacity: fill === "none" ? void 0 : fillOpacity,
 		opacity
 	});
-}
-function Ellipse({ center, rx, ry, color = "var(--stage-accent)", fill = "none", fillOpacity = .12, weight = 2, opacity = 1 }) {
+}, geomPropsEqual);
+const Ellipse = memo(function Ellipse({ center, rx, ry, color = "var(--stage-accent)", fill = "none", fillOpacity = .12, weight = 2, opacity = 1 }) {
 	const c = useCoords();
 	const [cx, cy] = c.toPx(center.x, center.y);
 	return /* @__PURE__ */ jsx("ellipse", {
@@ -38,8 +40,8 @@ function Ellipse({ center, rx, ry, color = "var(--stage-accent)", fill = "none",
 		fillOpacity: fill === "none" ? void 0 : fillOpacity,
 		opacity
 	});
-}
-function Polygon({ points, color = "var(--stage-accent)", fill = "var(--stage-accent)", fillOpacity = .12, weight = 2, opacity = 1 }) {
+}, geomPropsEqual);
+const Polygon = memo(function Polygon({ points, color = "var(--stage-accent)", fill = "var(--stage-accent)", fillOpacity = .12, weight = 2, opacity = 1 }) {
 	return /* @__PURE__ */ jsx("polygon", {
 		points: toPoints(useCoords(), points),
 		stroke: color,
@@ -49,8 +51,8 @@ function Polygon({ points, color = "var(--stage-accent)", fill = "var(--stage-ac
 		opacity,
 		strokeLinejoin: "round"
 	});
-}
-function Polyline({ points, color = "var(--stage-fg)", weight = 2, opacity = 1, dashed }) {
+}, geomPropsEqual);
+const Polyline = memo(function Polyline({ points, color = "var(--stage-fg)", weight = 2, opacity = 1, dashed }) {
 	return /* @__PURE__ */ jsx("polyline", {
 		points: toPoints(useCoords(), points),
 		fill: "none",
@@ -61,8 +63,8 @@ function Polyline({ points, color = "var(--stage-fg)", weight = 2, opacity = 1,
 		strokeLinecap: "round",
 		strokeDasharray: dashed ? "6 6" : void 0
 	});
-}
-function Path({ d, color = "var(--stage-fg)", fill = "none", fillOpacity = 1, weight = 2, opacity = 1 }) {
+}, geomPropsEqual);
+const Path = memo(function Path({ d, color = "var(--stage-fg)", fill = "none", fillOpacity = 1, weight = 2, opacity = 1 }) {
 	return /* @__PURE__ */ jsx("path", {
 		d,
 		stroke: color,
@@ -73,7 +75,7 @@ function Path({ d, color = "var(--stage-fg)", fill = "none", fillOpacity = 1, we
 		strokeLinejoin: "round",
 		strokeLinecap: "round"
 	});
-}
+}, geomPropsEqual);
 
 //#endregion
 export { Circle, Ellipse, Path, Polygon, Polyline };

package/dist/primitives/Tex.mjs

@@ -8,11 +8,11 @@ import katex from "katex";
 
 //#region src/primitives/Tex.tsx
 /**
-* Tex — KaTeX maths in a <foreignObject>, rendered AT RENDER TIME (not in an
+* Tex, KaTeX maths in a <foreignObject>, rendered AT RENDER TIME (not in an
 * effect) so the markup is identical on the server and the client: SSR/static
 * exports show real maths (not raw `\left…\right`), there's no raw-then-hydrate
 * flash, and hydration matches. KaTeX is a static import kept in its OWN module so
-* only Tex's importers pull it (stage's neverBundle leaves `katex` external — the
+* only Tex's importers pull it (stage's neverBundle leaves `katex` external, the
 * consumer resolves the peer; non-Tex consumers never bundle it).
 *
 * Needs the consumer to load `katex/dist/katex.min.css` for proper glyphs.

package/dist/primitives/index.d.mts

@@ -4,7 +4,7 @@ import { Line, LineProps, Ray, Segment, SegmentProps, Vector, VectorProps } from
 import { Circle, CircleProps, Ellipse, EllipseProps, Path, PathProps, Polygon, PolygonProps, Polyline, PolylineProps } from "./Shapes.mjs";
 import { Label, LabelProps } from "./Label.mjs";
 import { Tex, TexProps } from "./Tex.mjs";
-import { Axes, AxesProps, Grid, GridProps, niceStep } from "./Grid.mjs";
+import { Axes, AxesProps, ClearZone, Grid, GridProps, clearOfLabel, niceStep } from "./Grid.mjs";
 import { OfXProps, OfYProps, ParametricProps, Plot } from "./Plot.mjs";
 import { CanvasLayer, CanvasLayerProps } from "./CanvasLayer.mjs";
-export { type A11yProps, Axes, type AxesProps, CanvasLayer, type CanvasLayerProps, Circle, type CircleProps, Dot, type DotProps, Ellipse, type EllipseProps, Grid, type GridProps, Label, type LabelProps, Line, type LineProps, type OfXProps, type OfYProps, type ParametricProps, Path, type PathProps, Plot, Point, Polygon, type PolygonProps, Polyline, type PolylineProps, Ray, Segment, type SegmentProps, type StyleProps, Tex, type TexProps, Vector, type VectorProps, niceStep };
+export { type A11yProps, Axes, type AxesProps, CanvasLayer, type CanvasLayerProps, Circle, type CircleProps, type ClearZone, Dot, type DotProps, Ellipse, type EllipseProps, Grid, type GridProps, Label, type LabelProps, Line, type LineProps, type OfXProps, type OfYProps, type ParametricProps, Path, type PathProps, Plot, Point, Polygon, type PolygonProps, Polyline, type PolylineProps, Ray, Segment, type SegmentProps, type StyleProps, Tex, type TexProps, Vector, type VectorProps, clearOfLabel, niceStep };

package/dist/primitives/index.mjs

@@ -3,8 +3,8 @@ import { Line, Ray, Segment, Vector } from "./Lines.mjs";
 import { Circle, Ellipse, Path, Polygon, Polyline } from "./Shapes.mjs";
 import { Label } from "./Label.mjs";
 import { Tex } from "./Tex.mjs";
-import { Axes, Grid, niceStep } from "./Grid.mjs";
+import { Axes, Grid, clearOfLabel, niceStep } from "./Grid.mjs";
 import { Plot } from "./Plot.mjs";
 import { CanvasLayer } from "./CanvasLayer.mjs";
 
-export { Axes, CanvasLayer, Circle, Dot, Ellipse, Grid, Label, Line, Path, Plot, Point, Polygon, Polyline, Ray, Segment, Tex, Vector, niceStep };
+export { Axes, CanvasLayer, Circle, Dot, Ellipse, Grid, Label, Line, Path, Plot, Point, Polygon, Polyline, Ray, Segment, Tex, Vector, clearOfLabel, niceStep };

package/dist/primitives/props.mjs

@@ -0,0 +1,31 @@
+//#region src/primitives/props.ts
+const MAX_DEPTH = 4;
+const valEq = (a, b, depth) => {
+	if (Object.is(a, b)) return true;
+	if (depth <= 0) return false;
+	if (typeof a !== "object" || typeof b !== "object" || a === null || b === null) return false;
+	if ("$$typeof" in a || "$$typeof" in b) return false;
+	if (Array.isArray(a) || Array.isArray(b)) {
+		if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length) return false;
+		for (let i = 0; i < a.length; i++) if (!valEq(a[i], b[i], depth - 1)) return false;
+		return true;
+	}
+	const ka = Object.keys(a);
+	if (ka.length !== Object.keys(b).length) return false;
+	for (const k of ka) {
+		if (!(k in b)) return false;
+		if (!valEq(a[k], b[k], depth - 1)) return false;
+	}
+	return true;
+};
+/**
+* Value-based props comparator for `React.memo` on geometry primitives.
+* Labs recreate `Vec2`/`points` objects every render (often 60×/s under a frame
+* tick), so identity-based memo never hits; comparing coordinate VALUES lets
+* static shapes skip reconciliation while anything that actually moved still
+* re-renders. Functions and React elements compare by reference (safe fallback).
+*/
+const geomPropsEqual = (prev, next) => valEq(prev, next, MAX_DEPTH);
+
+//#endregion
+export { geomPropsEqual };