@classytic/stage 0.2.0 → 0.3.0

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

package/dist/scene/Scene.d.mts

@@ -15,6 +15,9 @@ interface SceneProps {
   /** Author opt-in: start a sim running immediately (ambient motion) instead of
    *  the default "press Play". A SceneDoc with no `meta.sims` is always static. */
   autoPlay?: boolean;
+  /** Optional controlled playback for hosts that provide their own transport. */
+  playing?: boolean;
+  onPlayingChange?: (playing: boolean) => void;
 }
 declare function Scene({
   doc,
@@ -25,7 +28,9 @@ declare function Scene({
   height,
   view,
   ariaLabel,
-  autoPlay
+  autoPlay,
+  playing: playingProp,
+  onPlayingChange
 }: SceneProps): ReactNode;
 //#endregion
 export { Scene, SceneProps };

package/dist/scene/Scene.mjs

@@ -45,7 +45,7 @@ function autoView(resolved) {
 		yMax: Math.max(...ys) + pad
 	};
 }
-function Scene({ doc, onChange, interactive = true, showGrid = true, showAxes = true, height, view, ariaLabel = "Interactive figure", autoPlay = false }) {
+function Scene({ doc, onChange, interactive = true, showGrid = true, showAxes = true, height, view, ariaLabel = "Interactive figure", autoPlay = false, playing: playingProp, onPlayingChange }) {
 	const [overlay, setOverlay] = useState(/* @__PURE__ */ new Map());
 	const prevRef = useRef(void 0);
 	const sims = doc.meta?.sims;
@@ -55,14 +55,22 @@ function Scene({ doc, onChange, interactive = true, showGrid = true, showAxes =
 	const [frame, setFrame] = useState(0);
 	const { ref: rootRef, inView } = useInView();
 	const [done, setDone] = useState(false);
-	const [playing, setPlaying] = useState(autoPlay);
+	const [internalPlaying, setInternalPlaying] = useState(autoPlay);
+	const playing = playingProp ?? internalPlaying;
+	const setPlaying = (next) => {
+		if (playingProp === void 0) setInternalPlaying(next);
+		onPlayingChange?.(next);
+	};
 	useFrameLoop((f) => {
 		if (!sims?.length || !simStates.current) return;
 		const next = stepSims(sims, simStates.current, Math.min(.05, f.dtMs / 1e3));
 		simStates.current = next.states;
 		simScalars.current = next.scalars;
 		setFrame((n) => (n + 1) % 1e6);
-		if (next.done) setDone(true);
+		if (next.done) {
+			setDone(true);
+			setPlaying(false);
+		}
 	}, { running: !!sims?.length && inView && playing && !done });
 	const merged = useMemo(() => {
 		const scalars = simScalars.current;
@@ -95,7 +103,7 @@ function Scene({ doc, onChange, interactive = true, showGrid = true, showAxes =
 	const hasSims = !!sims?.length;
 	return /* @__PURE__ */ jsxs("div", {
 		ref: rootRef,
-		style: { position: "relative" },
+		className: "stage-scene",
 		children: [
 			/* @__PURE__ */ jsxs(Stage, {
 				view: v,
@@ -114,30 +122,9 @@ function Scene({ doc, onChange, interactive = true, showGrid = true, showAxes =
 				type: "button",
 				onClick: () => setPlaying(true),
 				"aria-label": "Play simulation",
-				style: {
-					position: "absolute",
-					inset: 0,
-					display: "flex",
-					alignItems: "center",
-					justifyContent: "center",
-					background: "color-mix(in oklab, var(--stage-bg) 38%, transparent)",
-					border: "none",
-					borderRadius: 12,
-					cursor: "pointer"
-				},
+				className: "stage-scene__play-overlay",
 				children: /* @__PURE__ */ jsx("span", {
-					style: {
-						display: "inline-flex",
-						alignItems: "center",
-						gap: 8,
-						padding: "11px 26px",
-						borderRadius: 999,
-						background: "var(--stage-accent)",
-						color: "#fff",
-						fontWeight: 800,
-						fontSize: 16,
-						boxShadow: "0 6px 18px rgba(0,0,0,.28)"
-					},
+					className: "stage-scene__play-label",
 					children: "▶ Play"
 				})
 			}),
@@ -145,19 +132,7 @@ function Scene({ doc, onChange, interactive = true, showGrid = true, showAxes =
 				type: "button",
 				onClick: () => setPlaying(false),
 				"aria-label": "Pause simulation",
-				style: {
-					position: "absolute",
-					top: 10,
-					right: 10,
-					width: 34,
-					height: 34,
-					borderRadius: 999,
-					border: "1px solid var(--stage-grid)",
-					background: "color-mix(in oklab, var(--stage-bg) 80%, transparent)",
-					color: "var(--stage-fg)",
-					cursor: "pointer",
-					fontSize: 13
-				},
+				className: "stage-scene__pause",
 				children: "⏸"
 			})
 		]

package/dist/view/Stage.mjs

@@ -31,7 +31,7 @@ function Stage({ view = DEFAULT_VIEW, width, height, aspectRatio, pad = 12, pres
 	}), [
 		w,
 		h,
-		view,
+		`${view.xMin} ${view.xMax} ${view.yMin} ${view.yMax}`,
 		pad,
 		preserveAspect
 	]);
@@ -43,8 +43,7 @@ function Stage({ view = DEFAULT_VIEW, width, height, aspectRatio, pad = 12, pres
 	} : void 0;
 	return /* @__PURE__ */ jsx("div", {
 		ref: wrapRef,
-		className,
-		style: { width: "100%" },
+		className: ["stage-root", className].filter(Boolean).join(" "),
 		children: /* @__PURE__ */ jsxs("svg", {
 			ref: svgRef,
 			width: w,
@@ -53,14 +52,8 @@ function Stage({ view = DEFAULT_VIEW, width, height, aspectRatio, pad = 12, pres
 			role: "group",
 			"aria-label": ariaLabel,
 			onPointerDown: handlePointer,
-			style: {
-				display: "block",
-				background,
-				borderRadius: 12,
-				border: "1px solid var(--stage-grid)",
-				userSelect: "none",
-				touchAction: "none"
-			},
+			className: "stage-canvas",
+			style: { background },
 			children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", {
 				id: "stage-arrow",
 				viewBox: "0 0 10 10",

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@classytic/stage",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Domain-neutral visual primitive engine for the web. Declarative SVG diagram/math primitives, draggable handles, a math↔pixel coordinate system, a motion core + energy effect defs, theming, pure sim cores, and a small kit of neutral glyph primitives. Reactive, web-native, agent-drivable. The render foundation under @classytic/labs (subject-matter glyphs live there); canvas + 3D subpaths later.",
   "author": "Classytic",
   "license": "MIT",
   "type": "module",
   "sideEffects": [
-    "**/*.css",
-    "**/assets/**"
+    "**/*.css"
   ],
   "engines": {
     "node": ">=22"
@@ -52,6 +51,10 @@
       "types": "./dist/math/index.d.mts",
       "default": "./dist/math/index.mjs"
     },
+    "./logic": {
+      "types": "./dist/logic/index.d.mts",
+      "default": "./dist/logic/index.mjs"
+    },
     "./sim": {
       "types": "./dist/sim/index.d.mts",
       "default": "./dist/sim/index.mjs"
@@ -72,6 +75,10 @@
       "types": "./dist/chem/index.d.mts",
       "default": "./dist/chem/index.mjs"
     },
+    "./finance": {
+      "types": "./dist/finance/index.d.mts",
+      "default": "./dist/finance/index.mjs"
+    },
     "./steps": {
       "types": "./dist/steps/index.d.mts",
       "default": "./dist/steps/index.mjs"
@@ -88,21 +95,6 @@
     "LICENSE",
     "README.md"
   ],
-  "scripts": {
-    "build": "tsdown",
-    "dev": "tsdown --watch",
-    "typecheck": "tsc --noEmit",
-    "sync": "node scripts/sync-stage.mjs",
-    "pretest": "npm run build",
-    "test": "vitest run",
-    "verify": "npm run typecheck && npm test",
-    "push": "classytic-push",
-    "changeset": "changeset",
-    "version-packages": "changeset version",
-    "release": "npm run build && changeset publish",
-    "prepublishOnly": "npm run typecheck && npm run build && npm test",
-    "clean": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\""
-  },
   "peerDependencies": {
     "katex": ">=0.16",
     "react": ">=19",
@@ -117,12 +109,11 @@
     "@changesets/cli": "^2.27.9",
     "@classytic/dev-tools": "^0.2.0",
     "@testing-library/react": "^16.3.2",
-    "@types/katex": "^0.16.7",
     "@types/node": "^22.0.0",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
     "happy-dom": "^20.0.0",
-    "katex": "^0.16.11",
+    "katex": "^0.18.7",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "tsdown": "^0.22.0",
@@ -141,5 +132,22 @@
     "math",
     "engine",
     "primitives"
-  ]
-}
+  ],
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "typecheck": "tsc --noEmit",
+    "sync": "node scripts/sync-stage.mjs",
+    "pretest": "npm run build",
+    "test": "vitest run",
+    "verify": "npm run typecheck && npm test",
+    "package:check": "node scripts/package-check.mjs",
+    "package:consumer": "node scripts/packed-consumer-check.mjs",
+    "verify:release": "npm run typecheck && npm test && npm run package:check && npm run package:consumer",
+    "push": "classytic-push",
+    "changeset": "changeset",
+    "version-packages": "changeset version",
+    "release": "npm run build && changeset publish",
+    "clean": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\""
+  }
+}