@classytic/labs 0.1.0

package/dist/physics/kepler/preset.mjs

@@ -0,0 +1,257 @@
+'use client';
+
+import { clamp } from "../../core/util.mjs";
+import { Chip, Slider } from "../../kit/controls.mjs";
+import { Callout, Control, ControlBar, Field, LabFrame, LiveRegion } from "../../kit/frame.mjs";
+import { useFrameTick } from "../../kit/anim.mjs";
+import { PlayWrap, usePlayGate } from "../../kit/play.mjs";
+import { EarthGlyph, SunGlyph } from "../../kit/space.mjs";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dot, Label, Polygon, Polyline, Segment, Stage } from "@classytic/stage";
+
+//#region src/physics/kepler/preset.tsx
+/**
+* KeplerLab — "Equal areas, equal time", the shape and rhythm of orbits.
+*
+* A planet on a true ellipse with the star at one FOCUS (Kepler 1). It moves by
+* solving Kepler's equation M = E − e·sinE, so it genuinely speeds up at
+* perihelion and dawdles at aphelion — and the wedges swept in equal time slices
+* (shaded alternately) come out EQUAL in area (Kepler 2): fat-and-short near the
+* star, thin-and-long far away. The period follows T² ∝ a³ (Kepler 3), so a wider
+* orbit takes disproportionately longer.
+*
+* Drag eccentricity from a circle to a stretched ellipse; drag the semi-major
+* axis and watch the period balloon. Ambient PlayWrap. Tokenized SVG.
+*/
+const N_WEDGE = 12;
+/** Solve Kepler's equation M = E − e·sinE for the eccentric anomaly E. */
+function solveE(M, e) {
+	let E = M;
+	for (let i = 0; i < 6; i++) E = E - (E - e * Math.sin(E) - M) / (1 - e * Math.cos(E));
+	return E;
+}
+function KeplerLab({ semiMajor = 4, eccentricity = .5, wedges = true, title = "Kepler — equal areas in equal time", prompt = "The planet rides a true ellipse with the star at a focus. It speeds up near the star and slows far away, yet the wedge it sweeps in each equal time-slice has the SAME area (Kepler’s 2nd law). Stretch the orbit, and the period grows as T² ∝ a³.", objectives, controlConfig }) {
+	const [a, setA] = useState(semiMajor);
+	const [e, setE] = useState(eccentricity);
+	const [showWedge, setShowWedge] = useState(wedges);
+	const gate = usePlayGate();
+	const tRef = useRef(0);
+	const c = a * e;
+	const b = a * Math.sqrt(1 - e * e);
+	const T = Math.pow(a, 1.5) * 1.6;
+	useFrameTick(gate.running, (f) => {
+		tRef.current += Math.min(.05, f.dtMs / 1e3);
+	});
+	const pos = (M) => {
+		const E = solveE(M, e);
+		return {
+			x: -c + a * Math.cos(E),
+			y: b * Math.sin(E)
+		};
+	};
+	const planet = pos(2 * Math.PI * (tRef.current / T) % (2 * Math.PI));
+	const outline = [];
+	for (let i = 0; i <= 96; i++) {
+		const E = i / 96 * 2 * Math.PI;
+		outline.push({
+			x: -c + a * Math.cos(E),
+			y: b * Math.sin(E)
+		});
+	}
+	const wedgePts = [];
+	for (let i = 0; i <= N_WEDGE; i++) wedgePts.push(pos(2 * Math.PI * i / N_WEDGE));
+	const peri = a * (1 - e), apo = a * (1 + e);
+	const figure = /* @__PURE__ */ jsx(PlayWrap, {
+		gate,
+		children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Stage, {
+			view: {
+				xMin: -(a + c) - 1,
+				xMax: a - c + 1,
+				yMin: -b - 1,
+				yMax: b + 1
+			},
+			height: 300,
+			preserveAspect: true,
+			ariaLabel: `Elliptical orbit, eccentricity ${e.toFixed(2)}, star at a focus`,
+			children: [
+				showWedge && wedgePts.slice(0, N_WEDGE).map((p, i) => /* @__PURE__ */ jsx(Polygon, {
+					points: [
+						{
+							x: 0,
+							y: 0
+						},
+						p,
+						wedgePts[i + 1]
+					],
+					color: "none",
+					fill: i % 2 === 0 ? "var(--stage-accent)" : "var(--stage-accent-2)",
+					fillOpacity: .22,
+					weight: 0
+				}, i)),
+				/* @__PURE__ */ jsx(Polyline, {
+					points: outline,
+					color: "var(--stage-fg)",
+					opacity: .45,
+					weight: 1.5
+				}),
+				/* @__PURE__ */ jsx(Segment, {
+					from: {
+						x: -(a + c),
+						y: 0
+					},
+					to: {
+						x: a - c,
+						y: 0
+					},
+					color: "var(--stage-fg)",
+					opacity: .25,
+					weight: 1,
+					dashed: true
+				}),
+				/* @__PURE__ */ jsx(Dot, {
+					x: -2 * c,
+					y: 0,
+					r: 3,
+					color: "var(--stage-muted)"
+				}),
+				/* @__PURE__ */ jsx(SunGlyph, {
+					center: {
+						x: 0,
+						y: 0
+					},
+					r: .5
+				}),
+				/* @__PURE__ */ jsx(Label, {
+					x: a - c,
+					y: 0,
+					text: "perihelion",
+					color: "var(--stage-muted)",
+					size: 9,
+					dy: -6,
+					anchor: "end"
+				}),
+				/* @__PURE__ */ jsx(Label, {
+					x: -(a + c),
+					y: 0,
+					text: "aphelion",
+					color: "var(--stage-muted)",
+					size: 9,
+					dy: -6,
+					anchor: "start"
+				}),
+				/* @__PURE__ */ jsx(Segment, {
+					from: {
+						x: 0,
+						y: 0
+					},
+					to: planet,
+					color: "var(--stage-accent)",
+					opacity: .7,
+					weight: 1.2
+				}),
+				/* @__PURE__ */ jsx(EarthGlyph, {
+					center: planet,
+					r: .34,
+					atmosphere: false
+				})
+			]
+		}) })
+	});
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt,
+		objectives,
+		aside: /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 10
+			},
+			children: [
+				/* @__PURE__ */ jsx(Callout, {
+					tone: "result",
+					children: /* @__PURE__ */ jsxs("span", {
+						style: {
+							display: "grid",
+							gap: 4,
+							fontVariantNumeric: "tabular-nums"
+						},
+						children: [
+							/* @__PURE__ */ jsxs("span", { children: [
+								"eccentricity e = ",
+								/* @__PURE__ */ jsx("strong", { children: e.toFixed(2) }),
+								" ",
+								e < .02 ? "(circle)" : ""
+							] }),
+							/* @__PURE__ */ jsxs("span", { children: [
+								"perihelion ",
+								peri.toFixed(1),
+								" · aphelion ",
+								apo.toFixed(1)
+							] }),
+							/* @__PURE__ */ jsxs("span", { children: [
+								"period T ∝ a^1.5 = ",
+								/* @__PURE__ */ jsx("strong", { children: T.toFixed(1) }),
+								" · T²/a³ = ",
+								/* @__PURE__ */ jsx("strong", { children: (T * T / (a * a * a)).toFixed(2) })
+							] })
+						]
+					})
+				}),
+				/* @__PURE__ */ jsxs("p", {
+					style: {
+						fontSize: 12,
+						opacity: .75,
+						margin: 0
+					},
+					children: [
+						"Each shaded wedge is one equal time-slice — they look different but enclose the ",
+						/* @__PURE__ */ jsx("strong", { children: "same area" }),
+						"(Kepler’s 2nd law), so the planet must move fastest at perihelion. T²/a³ stays constant as you widen the orbit (Kepler’s 3rd law)."
+					]
+				}),
+				/* @__PURE__ */ jsx(LiveRegion, { children: `Eccentricity ${e.toFixed(2)}, period ${T.toFixed(1)}. Equal-time wedges have equal area.` })
+			]
+		}),
+		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [
+			/* @__PURE__ */ jsx(Control, {
+				name: "equal-area wedges",
+				children: /* @__PURE__ */ jsx(Chip, {
+					selected: showWedge,
+					onClick: () => setShowWedge((w) => !w),
+					children: "equal-area wedges"
+				})
+			}),
+			/* @__PURE__ */ jsx(Field, {
+				label: "eccentricity",
+				value: e.toFixed(2),
+				children: /* @__PURE__ */ jsx(Slider, {
+					value: e,
+					min: 0,
+					max: .7,
+					step: .05,
+					onChange: setE,
+					ariaLabel: "eccentricity"
+				})
+			}),
+			/* @__PURE__ */ jsx(Field, {
+				label: "semi-major a",
+				value: a.toFixed(1),
+				children: /* @__PURE__ */ jsx(Slider, {
+					value: a,
+					min: 2.5,
+					max: 5,
+					step: .5,
+					onChange: (n) => setA(clamp(n, 2.5, 5)),
+					ariaLabel: "semi-major axis"
+				})
+			})
+		] }),
+		controlConfig,
+		children: figure
+	});
+}
+
+//#endregion
+export { KeplerLab };

package/dist/physics/lever/asset.d.mts

@@ -0,0 +1,6 @@
+import { AssetSpec } from "@classytic/stage";
+
+//#region src/physics/lever/asset.d.ts
+declare const BALANCE_LEVER_ASSET: AssetSpec;
+//#endregion
+export { BALANCE_LEVER_ASSET };

package/dist/physics/lever/asset.mjs

@@ -0,0 +1,220 @@
+'use client';
+
+import { num, toRad } from "../../core/util.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { HangerHook, StageAssetDefs, WeightGlyph, XBlockGlyph, registerAsset, useCoords, vec } from "@classytic/stage";
+
+//#region src/physics/lever/asset.tsx
+const asVec = (v, d) => v && typeof v === "object" && "x" in v ? v : d;
+const numOr = (v, d) => typeof v === "number" && Number.isFinite(v) ? v : typeof v === "boolean" ? v ? 1 : 0 : d;
+function resolver({ params, bound }) {
+	const pivot = asVec(params.pivot, {
+		x: 0,
+		y: 1.2
+	});
+	const arm = num(params.arm, 3.6);
+	const unitGap = num(params.unitGap, .9);
+	const count = Math.max(0, Math.round(num(params.count, 0)));
+	const tiltDeg = num(bound.tilt, 0);
+	const balanced = bound.balanced === true || bound.balanced === 1;
+	const drop = .95;
+	const rad = toRad(tiltDeg);
+	const beamA = vec.rotateAbout({
+		x: pivot.x - arm,
+		y: pivot.y
+	}, pivot, rad);
+	const beamB = vec.rotateAbout({
+		x: pivot.x + arm,
+		y: pivot.y
+	}, pivot, rad);
+	const baseY = pivot.y - 1.3;
+	const pedestal = [
+		{
+			x: pivot.x - .14,
+			y: pivot.y - .05
+		},
+		{
+			x: pivot.x + .14,
+			y: pivot.y - .05
+		},
+		{
+			x: pivot.x + .34,
+			y: baseY
+		},
+		{
+			x: pivot.x - .34,
+			y: baseY
+		}
+	];
+	const foot = [{
+		x: pivot.x - .62,
+		y: baseY
+	}, {
+		x: pivot.x + .62,
+		y: baseY
+	}];
+	const ticks = [];
+	const maxSlots = Math.round(arm / unitGap);
+	for (let k = 1; k <= maxSlots; k++) for (const sgn of [-1, 1]) {
+		const a = vec.rotateAbout({
+			x: pivot.x + sgn * k * unitGap,
+			y: pivot.y
+		}, pivot, rad);
+		ticks.push([a, {
+			x: a.x,
+			y: a.y - .16
+		}]);
+	}
+	const items = [];
+	for (let i = 0; i < count; i++) {
+		const side = num(params[`s${i}`], 1);
+		const dist = num(params[`d${i}`], 1);
+		const kind = num(params[`k${i}`], 0) === 1 ? "x" : "const";
+		const wv = numOr(bound[`w${i}`], 0);
+		const anchor = vec.rotateAbout({
+			x: pivot.x + side * dist * unitGap,
+			y: pivot.y
+		}, pivot, rad);
+		items.push({
+			anchor,
+			cx: anchor.x,
+			cy: anchor.y - drop,
+			w: kind === "x" ? .6 : .72,
+			h: kind === "x" ? .66 : .78,
+			kind,
+			label: kind === "x" ? "x" : String(Math.round(wv))
+		});
+	}
+	return {
+		kind: "asset-geom",
+		parts: {
+			pivot,
+			beamA,
+			beamB,
+			pedestal,
+			foot
+		},
+		meta: {
+			items,
+			ticks,
+			balanced
+		}
+	};
+}
+function Component({ geom }) {
+	const c = useCoords();
+	const p = geom.parts;
+	const m = geom.meta ?? {};
+	const P = (v) => c.toPx(v.x, v.y);
+	const [bax, bay] = P(p.beamA);
+	const [bbx, bby] = P(p.beamB);
+	const ped = p.pedestal.map(P);
+	const [ft0x, ft0y] = P(p.foot[0]);
+	const [ft1x] = P(p.foot[1]);
+	const [pivx, pivy] = P(p.pivot);
+	const metal = "var(--stage-metal)";
+	const edge = "color-mix(in oklab, var(--stage-metal) 72%, black)";
+	const beamColor = m.balanced ? "var(--stage-good)" : metal;
+	const renderItem = (it, i) => {
+		const [ax, ay] = P(it.anchor);
+		const [cx, cy] = P({
+			x: it.cx,
+			y: it.cy
+		});
+		const wpx = c.sx(it.w);
+		const hpx = c.sy(it.h);
+		const top = cy - hpx / 2;
+		const box = {
+			cx,
+			top,
+			wpx,
+			hpx,
+			label: it.label
+		};
+		return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx(HangerHook, {
+			topX: ax,
+			topY: ay,
+			botX: cx,
+			botY: top
+		}), it.kind === "x" ? /* @__PURE__ */ jsx(XBlockGlyph, { ...box }) : /* @__PURE__ */ jsx(WeightGlyph, { ...box })] }, i);
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(StageAssetDefs, {}),
+		/* @__PURE__ */ jsx("rect", {
+			x: Math.min(ft0x, ft1x),
+			y: ft0y - 2.5,
+			width: Math.abs(ft1x - ft0x),
+			height: 6,
+			rx: 3,
+			fill: metal,
+			stroke: edge,
+			strokeWidth: .75
+		}),
+		/* @__PURE__ */ jsx("polygon", {
+			points: ped.map((q) => q.join(",")).join(" "),
+			fill: "url(#stage-grad-metal)",
+			stroke: edge,
+			strokeWidth: .75,
+			strokeLinejoin: "round"
+		}),
+		(m.ticks ?? []).map(([t0, t1], i) => {
+			const [x1, y1] = P(t0);
+			const [x2, y2] = P(t1);
+			return /* @__PURE__ */ jsx("line", {
+				x1,
+				y1,
+				x2,
+				y2,
+				stroke: metal,
+				strokeWidth: 1.5,
+				opacity: .3
+			}, `t${i}`);
+		}),
+		m.balanced && /* @__PURE__ */ jsx("line", {
+			x1: bax,
+			y1: bay,
+			x2: bbx,
+			y2: bby,
+			stroke: "var(--stage-good)",
+			strokeWidth: 12,
+			strokeLinecap: "round",
+			opacity: .18
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: bax,
+			y1: bay,
+			x2: bbx,
+			y2: bby,
+			stroke: beamColor,
+			strokeWidth: 4,
+			strokeLinecap: "round"
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: bax,
+			y1: bay,
+			x2: bbx,
+			y2: bby,
+			stroke: "color-mix(in oklab, var(--stage-sheen) 40%, transparent)",
+			strokeWidth: 1,
+			strokeLinecap: "round",
+			transform: "translate(0,-1)"
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: pivx,
+			cy: pivy,
+			r: 4,
+			fill: metal,
+			stroke: edge,
+			strokeWidth: .75
+		}),
+		(m.items ?? []).map(renderItem)
+	] });
+}
+const BALANCE_LEVER_ASSET = {
+	resolver,
+	Component
+};
+registerAsset("balance-lever", BALANCE_LEVER_ASSET);
+
+//#endregion
+export { BALANCE_LEVER_ASSET };

package/dist/physics/lever/index.d.mts

@@ -0,0 +1,2 @@
+import { BALANCE_LEVER_ASSET } from "./asset.mjs";
+import { LeverBalanceLab, LeverBalanceProps, LeverItemSpec, leverBalanceDoc } from "./preset.mjs";

package/dist/physics/lever/preset.d.mts

@@ -0,0 +1,31 @@
+import { BALANCE_LEVER_ASSET } from "./asset.mjs";
+import { ReactNode } from "react";
+import { SceneDoc } from "@classytic/stage";
+
+//#region src/physics/lever/preset.d.ts
+interface LeverItemSpec {
+  side: 'L' | 'R';
+  dist: number;
+  weight: number | 'unknown';
+}
+interface LeverBalanceProps {
+  items?: LeverItemSpec[];
+  start?: number;
+  maxWeight?: number;
+  controlId?: string;
+  height?: number;
+}
+declare function leverBalanceDoc({
+  items,
+  start,
+  maxWeight
+}: LeverBalanceProps): SceneDoc;
+declare function LeverBalanceLab({
+  items,
+  start,
+  maxWeight,
+  controlId,
+  height
+}: LeverBalanceProps): ReactNode;
+//#endregion
+export { LeverBalanceLab, LeverBalanceProps, LeverItemSpec, leverBalanceDoc };