@classytic/labs 0.1.0

package/dist/kit/cycle.d.mts

@@ -0,0 +1,44 @@
+import { ReactNode } from "react";
+
+//#region src/kit/cycle.d.ts
+interface CycleNode {
+  id: string;
+  label: string;
+  tone?: string;
+}
+interface CycleEdge {
+  from: string;
+  to: string;
+  label?: string;
+}
+declare const edgeKey: (e: {
+  from: string;
+  to: string;
+}) => string;
+interface CycleDiagramProps {
+  nodes: CycleNode[];
+  edges: CycleEdge[];
+  size?: number;
+  activeId?: string | null;
+  /** edge keys to render highlighted; defaults to the active node's outgoing edges. */
+  litEdges?: ReadonlySet<string> | null;
+  /** render this in place of each edge's default process-label pill (challenge slots). */
+  edgeSlot?: (edge: CycleEdge, key: string, mid: {
+    x: number;
+    y: number;
+  }) => ReactNode;
+  onNodeClick?: (id: string) => void;
+  ariaLabel?: string;
+}
+declare function CycleDiagram({
+  nodes,
+  edges,
+  size,
+  activeId,
+  litEdges,
+  edgeSlot,
+  onNodeClick,
+  ariaLabel
+}: CycleDiagramProps): ReactNode;
+//#endregion
+export { CycleDiagram, CycleEdge, CycleNode, edgeKey };

package/dist/kit/cycle.mjs

@@ -0,0 +1,188 @@
+'use client';
+
+import { toRad } from "../core/util.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/kit/cycle.tsx
+const edgeKey = (e) => `${e.from}->${e.to}`;
+const TONES = [
+	"var(--stage-accent)",
+	"var(--stage-accent-2)",
+	"var(--stage-good)",
+	"var(--stage-warn)",
+	"var(--stage-danger)",
+	"var(--stage-muted)"
+];
+const r2 = (n) => Math.round(n * 100) / 100;
+function CycleDiagram({ nodes, edges, size = 340, activeId = null, litEdges = null, edgeSlot, onNodeClick, ariaLabel }) {
+	const c = size / 2;
+	const R = size * .33;
+	const nodeR = Math.max(16, Math.min(26, size * .075));
+	const PAD = 46;
+	const n = nodes.length || 1;
+	const pos = /* @__PURE__ */ new Map();
+	nodes.forEach((nd, i) => {
+		const a = toRad(-90 + 360 * i / n);
+		pos.set(nd.id, {
+			x: r2(c + R * Math.cos(a)),
+			y: r2(c + R * Math.sin(a)),
+			tone: nd.tone ?? TONES[i % TONES.length],
+			label: nd.label
+		});
+	});
+	const idx = new Map(nodes.map((nd, i) => [nd.id, i]));
+	const interactive = !!onNodeClick;
+	const lit = litEdges ?? (activeId ? new Set(edges.filter((e) => e.from === activeId).map(edgeKey)) : null);
+	const edgePaths = [];
+	const slots = [];
+	edges.forEach((e) => {
+		const A = pos.get(e.from), B = pos.get(e.to);
+		if (!A || !B) return;
+		const key = edgeKey(e);
+		const dx = B.x - A.x, dy = B.y - A.y;
+		const L = Math.hypot(dx, dy) || 1;
+		const ux = dx / L, uy = dy / L;
+		const start = {
+			x: r2(A.x + ux * nodeR),
+			y: r2(A.y + uy * nodeR)
+		};
+		const end = {
+			x: r2(B.x - ux * (nodeR + 7)),
+			y: r2(B.y - uy * (nodeR + 7))
+		};
+		const mx = (A.x + B.x) / 2, my = (A.y + B.y) / 2;
+		const ai = idx.get(e.from), bi = idx.get(e.to);
+		const adjacent = (ai + 1) % n === bi || (bi + 1) % n === ai;
+		let ctrl;
+		if (adjacent) {
+			const ox = mx - c, oy = my - c, ol = Math.hypot(ox, oy) || 1;
+			const bow = R * .18;
+			ctrl = {
+				x: r2(mx + ox / ol * bow),
+				y: r2(my + oy / ol * bow)
+			};
+		} else {
+			const bow = L * .18;
+			ctrl = {
+				x: r2(mx - uy * bow),
+				y: r2(my + ux * bow)
+			};
+		}
+		const on = lit ? lit.has(key) : true;
+		const dim = lit ? !on : false;
+		const hot = on && !!lit;
+		const col = hot ? "var(--stage-accent)" : "var(--stage-fg)";
+		const adx = end.x - ctrl.x, ady = end.y - ctrl.y, al = Math.hypot(adx, ady) || 1;
+		const hx = adx / al, hy = ady / al, px = -hy, py = hx, ah = 7;
+		const b1 = {
+			x: r2(end.x - hx * ah + px * ah * .6),
+			y: r2(end.y - hy * ah + py * ah * .6)
+		};
+		const b2 = {
+			x: r2(end.x - hx * ah - px * ah * .6),
+			y: r2(end.y - hy * ah - py * ah * .6)
+		};
+		edgePaths.push(/* @__PURE__ */ jsxs("g", {
+			opacity: dim ? .16 : .9,
+			children: [/* @__PURE__ */ jsx("path", {
+				d: `M ${start.x} ${start.y} Q ${ctrl.x} ${ctrl.y} ${end.x} ${end.y}`,
+				fill: "none",
+				stroke: col,
+				strokeWidth: hot ? 2.6 : 1.8
+			}), /* @__PURE__ */ jsx("polygon", {
+				points: `${end.x},${end.y} ${b1.x},${b1.y} ${b2.x},${b2.y}`,
+				fill: col
+			})]
+		}, key));
+		const bm = {
+			x: r2(.25 * start.x + .5 * ctrl.x + .25 * end.x),
+			y: r2(.25 * start.y + .5 * ctrl.y + .25 * end.y)
+		};
+		if (edgeSlot) slots.push(/* @__PURE__ */ jsx("g", {
+			opacity: dim ? .25 : 1,
+			children: edgeSlot(e, key, bm)
+		}, `s-${key}`));
+		else if (e.label) {
+			const w = e.label.length * 5.7 + 14;
+			slots.push(/* @__PURE__ */ jsxs("g", {
+				opacity: dim ? .3 : 1,
+				children: [/* @__PURE__ */ jsx("rect", {
+					x: r2(bm.x - w / 2),
+					y: bm.y - 9,
+					width: r2(w),
+					height: 18,
+					rx: 9,
+					fill: "var(--stage-bg)",
+					stroke: hot ? "var(--stage-accent)" : "var(--stage-grid)",
+					strokeWidth: 1
+				}), /* @__PURE__ */ jsx("text", {
+					x: bm.x,
+					y: bm.y,
+					fill: hot ? "var(--stage-accent)" : "var(--stage-muted)",
+					fontSize: 10.5,
+					fontWeight: 600,
+					textAnchor: "middle",
+					dominantBaseline: "central",
+					children: e.label
+				})]
+			}, `l-${key}`));
+		}
+	});
+	const nodeEls = nodes.map((nd) => {
+		const p = pos.get(nd.id);
+		const active = nd.id === activeId;
+		return /* @__PURE__ */ jsxs("g", {
+			opacity: (activeId ? !active : false) ? .45 : 1,
+			style: { cursor: interactive ? "pointer" : "default" },
+			onClick: interactive ? () => onNodeClick(nd.id) : void 0,
+			role: interactive ? "button" : void 0,
+			"aria-label": interactive ? nd.label : void 0,
+			children: [
+				active && /* @__PURE__ */ jsx("circle", {
+					cx: p.x,
+					cy: p.y,
+					r: nodeR + 5,
+					fill: "none",
+					stroke: p.tone,
+					strokeWidth: 2,
+					opacity: .5
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: p.x,
+					cy: p.y,
+					r: nodeR,
+					fill: p.tone,
+					stroke: "var(--stage-bg)",
+					strokeWidth: 2
+				}),
+				/* @__PURE__ */ jsx("text", {
+					x: p.x,
+					y: r2(p.y + nodeR + 12),
+					fill: "var(--stage-fg)",
+					fontSize: 11,
+					fontWeight: 700,
+					textAnchor: "middle",
+					children: p.label
+				})
+			]
+		}, nd.id);
+	});
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: `-46 -46 ${size + 2 * PAD} ${size + 2 * PAD}`,
+		width: "100%",
+		role: "img",
+		"aria-label": ariaLabel,
+		style: {
+			display: "block",
+			maxHeight: size + 2 * PAD
+		},
+		children: [
+			edgePaths,
+			nodeEls,
+			slots
+		]
+	});
+}
+
+//#endregion
+export { CycleDiagram, edgeKey };

package/dist/kit/diagram.mjs

@@ -0,0 +1,176 @@
+'use client';
+
+import { Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Label, Polygon, Segment, Vector, useCoords } from "@classytic/stage";
+
+//#region src/kit/diagram.tsx
+/**
+* Small composite helpers built on @classytic/stage primitives, shared by the
+* physics/vector labs. Render these INSIDE a `<Stage>` (they use the coordinate
+* context via the underlying primitives).
+*/
+function AngleArc({ at, from, to, rPx = 26, color = "var(--stage-fg)", label }) {
+	const c = useCoords();
+	const o = c.toPx(at.x, at.y);
+	const p1 = c.toPx(at.x + from.x, at.y + from.y);
+	const p2 = c.toPx(at.x + to.x, at.y + to.y);
+	const a1 = Math.atan2(p1[1] - o[1], p1[0] - o[0]);
+	const a2 = Math.atan2(p2[1] - o[1], p2[0] - o[0]);
+	let da = a2 - a1;
+	while (da <= -Math.PI) da += 2 * Math.PI;
+	while (da > Math.PI) da -= 2 * Math.PI;
+	const sweep = da > 0 ? 1 : 0;
+	const sx = o[0] + rPx * Math.cos(a1), sy = o[1] + rPx * Math.sin(a1);
+	const ex = o[0] + rPx * Math.cos(a2), ey = o[1] + rPx * Math.sin(a2);
+	const am = a1 + da / 2;
+	const lx = o[0] + (rPx + 13) * Math.cos(am), ly = o[1] + (rPx + 13) * Math.sin(am);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", {
+		d: `M ${sx} ${sy} A ${rPx} ${rPx} 0 0 ${sweep} ${ex} ${ey}`,
+		fill: "none",
+		stroke: color,
+		strokeWidth: 1.6,
+		opacity: .85
+	}), label && /* @__PURE__ */ jsx("text", {
+		x: lx,
+		y: ly,
+		fill: color,
+		fontSize: 13,
+		fontWeight: 600,
+		textAnchor: "middle",
+		dominantBaseline: "middle",
+		children: label
+	})] });
+}
+/** A small right-angle square at `at`, between unit-ish directions `u` and `v`. */
+function RightAngleMark({ at, u, v, sizePx = 12, color = "var(--stage-muted)" }) {
+	const c = useCoords();
+	const o = c.toPx(at.x, at.y);
+	const dir = (d) => {
+		const p = c.toPx(at.x + d.x, at.y + d.y);
+		const dx = p[0] - o[0], dy = p[1] - o[1];
+		const m = Math.hypot(dx, dy) || 1;
+		return [dx / m, dy / m];
+	};
+	const [ux, uy] = dir(u);
+	const [vx, vy] = dir(v);
+	const a = [o[0] + ux * sizePx, o[1] + uy * sizePx];
+	const b = [o[0] + (ux + vx) * sizePx, o[1] + (uy + vy) * sizePx];
+	const d = [o[0] + vx * sizePx, o[1] + vy * sizePx];
+	return /* @__PURE__ */ jsx("path", {
+		d: `M ${a[0]} ${a[1]} L ${b[0]} ${b[1]} L ${d[0]} ${d[1]}`,
+		fill: "none",
+		stroke: color,
+		strokeWidth: 1.4,
+		opacity: .8
+	});
+}
+/**
+* An arrow (tail → tail+comp) with an optional tip label and optional dashed
+* x/y component decomposition — the SVG equivalent of the old canvas
+* `drawVector(..., { label, components })`.
+*/
+function LabeledVector({ tail = {
+	x: 0,
+	y: 0
+}, comp, color = "var(--stage-accent)", weight = 2.5, label, components = false }) {
+	const tip = {
+		x: tail.x + comp.x,
+		y: tail.y + comp.y
+	};
+	const corner = {
+		x: tip.x,
+		y: tail.y
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		components && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Segment, {
+			from: tail,
+			to: corner,
+			color,
+			opacity: .4,
+			weight: 1,
+			dashed: true
+		}), /* @__PURE__ */ jsx(Segment, {
+			from: corner,
+			to: tip,
+			color,
+			opacity: .4,
+			weight: 1,
+			dashed: true
+		})] }),
+		/* @__PURE__ */ jsx(Vector, {
+			tail,
+			tip,
+			color,
+			weight
+		}),
+		label && (() => {
+			const len = Math.hypot(comp.x, comp.y) || 1;
+			const ux = comp.x / len, uy = -comp.y / len;
+			const off = 15;
+			const anchor = ux < -.35 ? "end" : ux > .35 ? "start" : "middle";
+			return /* @__PURE__ */ jsx(Label, {
+				x: tip.x,
+				y: tip.y,
+				text: label,
+				color,
+				dx: ux * off,
+				dy: uy * off,
+				size: 13,
+				anchor
+			});
+		})()
+	] });
+}
+/** A schematic resistor: an outlined box (filled with the canvas bg) + a label
+*  above and an optional reading below. The SVG equivalent of the old canvas
+*  `drawResistor`. */
+function ResistorBox({ center, w, h, color = "var(--stage-accent)", label, reading }) {
+	const x0 = center.x - w / 2, x1 = center.x + w / 2;
+	const y0 = center.y - h / 2, y1 = center.y + h / 2;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Polygon, {
+			points: [
+				{
+					x: x0,
+					y: y0
+				},
+				{
+					x: x1,
+					y: y0
+				},
+				{
+					x: x1,
+					y: y1
+				},
+				{
+					x: x0,
+					y: y1
+				}
+			],
+			color,
+			fill: "var(--stage-bg)",
+			fillOpacity: 1,
+			weight: 2
+		}),
+		label && /* @__PURE__ */ jsx(Label, {
+			x: center.x,
+			y: y1,
+			text: label,
+			color: "var(--stage-fg)",
+			size: 11,
+			dy: -12
+		}),
+		reading && /* @__PURE__ */ jsx(Label, {
+			x: center.x,
+			y: y0,
+			text: reading,
+			color,
+			size: 11,
+			dy: 16
+		})
+	] });
+}
+
+//#endregion
+export { AngleArc, LabeledVector, ResistorBox, RightAngleMark };