@classytic/labs 0.1.0

package/dist/kit/reaction.mjs

@@ -0,0 +1,102 @@
+'use client';
+
+import { MoleculeGlyph } from "./molecules.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/kit/reaction.tsx
+function ReactionFlow({ reactants, products, arrow = "right", height = 88, molSize = 30, ariaLabel }) {
+	const GAP = 10, PLUS = 22, ARROW = 58, PAD = 14, COEF = 14;
+	const cy = height / 2 - 6;
+	const nodes = [];
+	let x = PAD;
+	const place = (terms, key) => {
+		terms.forEach((t, i) => {
+			const coef = t.coef ?? 1;
+			if (coef > 1) {
+				nodes.push(/* @__PURE__ */ jsx("text", {
+					x,
+					y: cy,
+					fill: "var(--stage-fg)",
+					fontSize: 14,
+					fontWeight: 700,
+					textAnchor: "middle",
+					dominantBaseline: "central",
+					children: coef
+				}, `${key}c${i}`));
+				x += COEF;
+			}
+			nodes.push(/* @__PURE__ */ jsx(MoleculeGlyph, {
+				kind: t.kind,
+				x: x + molSize / 2,
+				y: cy,
+				size: molSize,
+				showLabel: true
+			}, `${key}m${i}`));
+			x += molSize + GAP;
+			if (i < terms.length - 1) {
+				nodes.push(/* @__PURE__ */ jsx("text", {
+					x,
+					y: cy,
+					fill: "var(--stage-muted)",
+					fontSize: 18,
+					fontWeight: 700,
+					textAnchor: "middle",
+					dominantBaseline: "central",
+					children: "+"
+				}, `${key}p${i}`));
+				x += PLUS;
+			}
+		});
+	};
+	place(reactants, "r");
+	const ax = x + 6;
+	if (arrow === "right") nodes.push(/* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+		x1: ax,
+		y1: cy,
+		x2: ax + ARROW - 12,
+		y2: cy,
+		stroke: "var(--stage-fg)",
+		strokeWidth: 2.5
+	}), /* @__PURE__ */ jsx("polygon", {
+		points: `${ax + ARROW - 4},${cy} ${ax + ARROW - 14},${cy - 5} ${ax + ARROW - 14},${cy + 5}`,
+		fill: "var(--stage-fg)"
+	})] }, "arr"));
+	else nodes.push(/* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+		x1: ax + 12,
+		y1: cy,
+		x2: ax + ARROW,
+		y2: cy,
+		stroke: "var(--stage-fg)",
+		strokeWidth: 2.5
+	}), /* @__PURE__ */ jsx("polygon", {
+		points: `${ax + 4},${cy} ${ax + 14},${cy - 5} ${ax + 14},${cy + 5}`,
+		fill: "var(--stage-fg)"
+	})] }, "arr"));
+	x += 62;
+	place(products, "p");
+	const W = x + PAD;
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			overflowX: "auto",
+			maxWidth: "100%"
+		},
+		children: /* @__PURE__ */ jsx("svg", {
+			viewBox: `0 0 ${W} ${height}`,
+			width: "100%",
+			role: "img",
+			"aria-label": ariaLabel,
+			preserveAspectRatio: "xMidYMid meet",
+			style: {
+				display: "block",
+				height: "auto",
+				maxWidth: W,
+				minWidth: Math.min(W, 300),
+				margin: "0 auto"
+			},
+			children: nodes
+		})
+	});
+}
+
+//#endregion
+export { ReactionFlow };

package/dist/kit/rich.d.mts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+
+//#region src/kit/rich.d.ts
+declare function RichText({
+  children
+}: {
+  children: string;
+}): ReactNode;
+//#endregion
+export { RichText };

package/dist/kit/rich.mjs

@@ -0,0 +1,21 @@
+'use client';
+
+import { Fragment } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+import { parseRichText } from "@classytic/stage";
+
+//#region src/kit/rich.tsx
+/**
+* RichText — render `_`/`^` notation as real HTML <sub>/<sup> in lab readouts /
+* control bars (the DOM counterpart of stage's SVG `<Label>`). Both share the
+* ONE grammar, `parseRichText` from @classytic/stage — so "V_C" never reads as a
+* dirty underscore and the parsing rule lives in a single source of truth.
+*/
+function RichText({ children }) {
+	const spans = parseRichText(children);
+	if (spans.length === 1 && spans[0].script === "base") return children;
+	return /* @__PURE__ */ jsx(Fragment$1, { children: spans.map((sp, i) => sp.script === "sub" ? /* @__PURE__ */ jsx("sub", { children: sp.text }, i) : sp.script === "sup" ? /* @__PURE__ */ jsx("sup", { children: sp.text }, i) : /* @__PURE__ */ jsx(Fragment, { children: sp.text }, i)) });
+}
+
+//#endregion
+export { RichText };

package/dist/kit/scale.mjs

@@ -0,0 +1,230 @@
+'use client';
+
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCoords } from "@classytic/stage";
+
+//#region src/kit/scale.tsx
+const GRAD = "url(#stage-grad-metal)";
+const EDGE = "color-mix(in oklab, var(--stage-metal) 60%, black)";
+const SHEEN = "color-mix(in oklab, var(--stage-sheen) 70%, transparent)";
+const SHADE = "color-mix(in oklab, var(--stage-metal) 62%, black)";
+const GOOD = "var(--stage-good)";
+/** A solid rectangular bar (metal rod) between two points — reads as a rigid
+*  strut, not a string. Returns an SVG path for a filled quad of width `w`. */
+function barPath(x1, y1, x2, y2, w) {
+	const dx = x2 - x1, dy = y2 - y1;
+	const len = Math.hypot(dx, dy) || 1;
+	const nx = -dy / len * (w / 2);
+	const ny = dx / len * (w / 2);
+	return `M ${x1 + nx} ${y1 + ny} L ${x2 + nx} ${y2 + ny} L ${x2 - nx} ${y2 - ny} L ${x1 - nx} ${y1 - ny} Z`;
+}
+function ScaleFrame({ pivot, beamA, beamB, trayLC, trayRC, baseY, panR, balanced }) {
+	const c = useCoords();
+	const P = (v) => c.toPx(v.x, v.y);
+	const [pivx, pivy] = P(pivot);
+	const [bax, bay] = P(beamA);
+	const [bbx, bby] = P(beamB);
+	const [, basey] = P({
+		x: pivot.x,
+		y: baseY
+	});
+	const beamAngle = Math.atan2(bby - bay, bbx - bax) * 180 / Math.PI;
+	const beamLen = Math.hypot(bbx - bax, bby - bay);
+	const rxPan = c.sx(panR);
+	const beamH = 13;
+	const halfW = beamLen / 2 + 7;
+	const colTopHalf = 7;
+	const colBotHalf = 12;
+	const baseRx = Math.max(30, colBotHalf * 2.6);
+	const Pan = ({ cx, cy, ex, ey, k }) => {
+		const ry = rxPan * .24;
+		const depth = rxPan * .5;
+		const rimL = cx - rxPan * .66;
+		const rimR = cx + rxPan * .66;
+		const body = `M ${cx - rxPan} ${cy} C ${cx - rxPan} ${cy + depth * .95} ${cx - rxPan * .5} ${cy + depth} ${cx} ${cy + depth} C ${cx + rxPan * .5} ${cy + depth} ${cx + rxPan} ${cy + depth * .95} ${cx + rxPan} ${cy} Z`;
+		return /* @__PURE__ */ jsxs("g", { children: [
+			/* @__PURE__ */ jsx("path", {
+				d: barPath(ex, ey, rimL, cy, 3.6),
+				fill: GRAD,
+				stroke: EDGE,
+				strokeWidth: .6,
+				strokeLinejoin: "round"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: barPath(ex, ey, rimR, cy, 3.6),
+				fill: GRAD,
+				stroke: EDGE,
+				strokeWidth: .6,
+				strokeLinejoin: "round"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: body,
+				fill: GRAD,
+				stroke: EDGE,
+				strokeWidth: .9,
+				strokeLinejoin: "round"
+			}),
+			/* @__PURE__ */ jsx("ellipse", {
+				cx,
+				cy,
+				rx: rxPan,
+				ry,
+				fill: SHADE,
+				stroke: EDGE,
+				strokeWidth: .75
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: `M ${cx - rxPan} ${cy} A ${rxPan} ${ry} 0 0 0 ${cx + rxPan} ${cy}`,
+				fill: "none",
+				stroke: SHEEN,
+				strokeWidth: 1.4,
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: rimL,
+				cy,
+				r: 2.7,
+				fill: GRAD,
+				stroke: EDGE,
+				strokeWidth: .7
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: rimR,
+				cy,
+				r: 2.7,
+				fill: GRAD,
+				stroke: EDGE,
+				strokeWidth: .7
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: ex,
+				cy: ey,
+				r: 3.8,
+				fill: GRAD,
+				stroke: EDGE,
+				strokeWidth: .9
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: ex - 1.2,
+				cy: ey - 1.3,
+				r: 1.3,
+				fill: SHEEN
+			})
+		] }, k);
+	};
+	return /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx("ellipse", {
+			cx: pivx,
+			cy: basey,
+			rx: baseRx,
+			ry: 9,
+			fill: GRAD,
+			stroke: EDGE,
+			strokeWidth: .9
+		}),
+		/* @__PURE__ */ jsx("ellipse", {
+			cx: pivx,
+			cy: basey - 4,
+			rx: baseRx * .62,
+			ry: 6,
+			fill: GRAD,
+			stroke: EDGE,
+			strokeWidth: .75
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: `M ${pivx - colTopHalf} ${pivy} L ${pivx + colTopHalf} ${pivy} L ${pivx + colBotHalf} ${basey - 3} Q ${pivx + colBotHalf} ${basey} ${pivx + colBotHalf - 3} ${basey} L ${pivx - colBotHalf + 3} ${basey} Q ${pivx - colBotHalf} ${basey} ${pivx - colBotHalf} ${basey - 3} Z`,
+			fill: GRAD,
+			stroke: EDGE,
+			strokeWidth: .9,
+			strokeLinejoin: "round"
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: pivx - colTopHalf + 2,
+			y1: pivy + 2,
+			x2: pivx - colBotHalf + 3,
+			y2: basey - 3,
+			stroke: SHEEN,
+			strokeWidth: 1.3,
+			strokeLinecap: "round"
+		}),
+		/* @__PURE__ */ jsx(Pan, {
+			cx: P(trayLC)[0],
+			cy: P(trayLC)[1],
+			ex: bax,
+			ey: bay,
+			k: "L"
+		}),
+		/* @__PURE__ */ jsx(Pan, {
+			cx: P(trayRC)[0],
+			cy: P(trayRC)[1],
+			ex: bbx,
+			ey: bby,
+			k: "R"
+		}),
+		/* @__PURE__ */ jsxs("g", {
+			transform: `rotate(${beamAngle} ${pivx} ${pivy})`,
+			children: [
+				balanced && /* @__PURE__ */ jsx("rect", {
+					x: pivx - halfW - 3,
+					y: pivy - beamH / 2 - 3,
+					width: halfW * 2 + 6,
+					height: 19,
+					rx: 19 / 2,
+					fill: GOOD,
+					opacity: .18
+				}),
+				/* @__PURE__ */ jsx("rect", {
+					x: pivx - halfW,
+					y: pivy - beamH / 2,
+					width: halfW * 2,
+					height: beamH,
+					rx: beamH / 2,
+					fill: balanced ? GOOD : GRAD,
+					stroke: EDGE,
+					strokeWidth: .9
+				}),
+				/* @__PURE__ */ jsx("rect", {
+					x: pivx - halfW + 4,
+					y: pivy - beamH / 2 + 1.5,
+					width: halfW * 2 - 8,
+					height: 2.4,
+					rx: 1.2,
+					fill: SHEEN
+				})
+			]
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: bax,
+			cy: bay,
+			r: 4,
+			fill: balanced ? GOOD : GRAD,
+			stroke: EDGE,
+			strokeWidth: .9
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: bbx,
+			cy: bby,
+			r: 4,
+			fill: balanced ? GOOD : GRAD,
+			stroke: EDGE,
+			strokeWidth: .9
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: pivx,
+			cy: pivy,
+			r: 7.5,
+			fill: GRAD,
+			stroke: EDGE,
+			strokeWidth: 1
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: pivx - 2.2,
+			cy: pivy - 2.4,
+			r: 2,
+			fill: SHEEN
+		})
+	] });
+}
+
+//#endregion
+export { ScaleFrame };

package/dist/kit/space.mjs

@@ -0,0 +1,326 @@
+'use client';
+
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { fmt, useCoords } from "@classytic/stage";
+
+//#region src/kit/space.tsx
+/**
+* Space glyph kit — Earth, Sun and a satellite, drawn in the stage's pixel frame
+* (project the world centre, then size everything off the px radius so the glyph
+* is crisp at any zoom). Kurzgesagt-style: radial body gradient + a rim shadow
+* for spherical depth + a top-left specular highlight, the technique borrowed from
+* my-video's EarthIcon. Gradient ids are made unique per instance so multiple
+* glyphs on one Stage don't collide.
+*
+* These are decorative (pointer-events:none) — drop a draggable MovableDot on top
+* if the body needs to be grabbed.
+*/
+/** Earth — blue oceans, a few green landmasses, ice caps, rim + shine + atmosphere. */
+function EarthGlyph({ center, r, atmosphere = true }) {
+	const c = useCoords();
+	const [cx, cy] = c.toPx(center.x, center.y);
+	const R = c.sx(r);
+	const uid = useId().replace(/:/g, "");
+	const land = `url(#${uid}-land)`;
+	return /* @__PURE__ */ jsxs("g", {
+		style: { pointerEvents: "none" },
+		children: [
+			/* @__PURE__ */ jsxs("defs", { children: [
+				/* @__PURE__ */ jsxs("radialGradient", {
+					id: `${uid}-ocean`,
+					cx: "40%",
+					cy: "35%",
+					r: "65%",
+					children: [
+						/* @__PURE__ */ jsx("stop", {
+							offset: "0%",
+							stopColor: "#60A5FA"
+						}),
+						/* @__PURE__ */ jsx("stop", {
+							offset: "40%",
+							stopColor: "#3B82F6"
+						}),
+						/* @__PURE__ */ jsx("stop", {
+							offset: "100%",
+							stopColor: "#1E3A5F"
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("linearGradient", {
+					id: `${uid}-land`,
+					x1: "0",
+					y1: "0",
+					x2: "0",
+					y2: "1",
+					children: [/* @__PURE__ */ jsx("stop", {
+						offset: "0%",
+						stopColor: "#4ADE80"
+					}), /* @__PURE__ */ jsx("stop", {
+						offset: "100%",
+						stopColor: "#15803D"
+					})]
+				}),
+				/* @__PURE__ */ jsxs("radialGradient", {
+					id: `${uid}-rim`,
+					cx: "50%",
+					cy: "50%",
+					r: "50%",
+					children: [/* @__PURE__ */ jsx("stop", {
+						offset: "68%",
+						stopColor: "rgba(0,0,0,0)"
+					}), /* @__PURE__ */ jsx("stop", {
+						offset: "100%",
+						stopColor: "rgba(0,0,0,0.4)"
+					})]
+				}),
+				/* @__PURE__ */ jsxs("radialGradient", {
+					id: `${uid}-shine`,
+					cx: "32%",
+					cy: "28%",
+					r: "42%",
+					children: [/* @__PURE__ */ jsx("stop", {
+						offset: "0%",
+						stopColor: "rgba(255,255,255,0.4)"
+					}), /* @__PURE__ */ jsx("stop", {
+						offset: "100%",
+						stopColor: "rgba(255,255,255,0)"
+					})]
+				}),
+				/* @__PURE__ */ jsx("clipPath", {
+					id: `${uid}-clip`,
+					children: /* @__PURE__ */ jsx("circle", {
+						cx: fmt(cx),
+						cy: fmt(cy),
+						r: fmt(R)
+					})
+				})
+			] }),
+			atmosphere && /* @__PURE__ */ jsx("circle", {
+				cx: fmt(cx),
+				cy: fmt(cy),
+				r: fmt(R + R * .1),
+				fill: "none",
+				stroke: "#93C5FD",
+				strokeWidth: fmt(R * .06),
+				opacity: .25
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: fmt(cx),
+				cy: fmt(cy),
+				r: fmt(R),
+				fill: `url(#${uid}-ocean)`
+			}),
+			/* @__PURE__ */ jsxs("g", {
+				clipPath: `url(#${uid}-clip)`,
+				children: [
+					/* @__PURE__ */ jsx("path", {
+						d: `M ${fmt(cx - R * .5)} ${fmt(cy - R * .45)} q ${fmt(R * .3)} ${fmt(-R * .15)} ${fmt(R * .5)} ${fmt(R * .1)} q ${fmt(R * .1)} ${fmt(R * .3)} ${fmt(-R * .15)} ${fmt(R * .4)} q ${fmt(-R * .35)} ${fmt(R * .1)} ${fmt(-R * .45)} ${fmt(-R * .2)} Z`,
+						fill: land,
+						opacity: .88
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: `M ${fmt(cx + R * .05)} ${fmt(cy - R * .1)} q ${fmt(R * .3)} ${fmt(-R * .05)} ${fmt(R * .4)} ${fmt(R * .25)} q ${fmt(-R * .05)} ${fmt(R * .45)} ${fmt(-R * .3)} ${fmt(R * .5)} q ${fmt(-R * .25)} ${fmt(-R * .1)} ${fmt(-R * .1)} ${fmt(-R * .7)} Z`,
+						fill: land,
+						opacity: .82
+					}),
+					/* @__PURE__ */ jsx("ellipse", {
+						cx: fmt(cx),
+						cy: fmt(cy - R * .92),
+						rx: fmt(R * .6),
+						ry: fmt(R * .16),
+						fill: "#E2E8F0",
+						opacity: .35
+					}),
+					/* @__PURE__ */ jsx("ellipse", {
+						cx: fmt(cx),
+						cy: fmt(cy + R * .92),
+						rx: fmt(R * .66),
+						ry: fmt(R * .18),
+						fill: "#F1F5F9",
+						opacity: .4
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: fmt(cx),
+				cy: fmt(cy),
+				r: fmt(R),
+				fill: `url(#${uid}-rim)`
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: fmt(cx),
+				cy: fmt(cy),
+				r: fmt(R),
+				fill: `url(#${uid}-shine)`
+			})
+		]
+	});
+}
+/** Sun — glowing core with a corona of rays. */
+function SunGlyph({ center, r }) {
+	const c = useCoords();
+	const [cx, cy] = c.toPx(center.x, center.y);
+	const R = c.sx(r);
+	const uid = useId().replace(/:/g, "");
+	const rays = Array.from({ length: 12 }, (_, i) => {
+		const a = i * Math.PI / 6;
+		return {
+			x1: fmt(cx + Math.cos(a) * R * 1.15),
+			y1: fmt(cy + Math.sin(a) * R * 1.15),
+			x2: fmt(cx + Math.cos(a) * R * 1.5),
+			y2: fmt(cy + Math.sin(a) * R * 1.5)
+		};
+	});
+	return /* @__PURE__ */ jsxs("g", {
+		style: { pointerEvents: "none" },
+		children: [
+			/* @__PURE__ */ jsxs("defs", { children: [/* @__PURE__ */ jsxs("radialGradient", {
+				id: `${uid}-core`,
+				cx: "42%",
+				cy: "38%",
+				r: "60%",
+				children: [
+					/* @__PURE__ */ jsx("stop", {
+						offset: "0%",
+						stopColor: "#FEF9C3"
+					}),
+					/* @__PURE__ */ jsx("stop", {
+						offset: "45%",
+						stopColor: "#FDB813"
+					}),
+					/* @__PURE__ */ jsx("stop", {
+						offset: "100%",
+						stopColor: "#F97316"
+					})
+				]
+			}), /* @__PURE__ */ jsxs("radialGradient", {
+				id: `${uid}-glow`,
+				cx: "50%",
+				cy: "50%",
+				r: "50%",
+				children: [
+					/* @__PURE__ */ jsx("stop", {
+						offset: "55%",
+						stopColor: "rgba(253,184,19,0)"
+					}),
+					/* @__PURE__ */ jsx("stop", {
+						offset: "80%",
+						stopColor: "rgba(253,184,19,0.25)"
+					}),
+					/* @__PURE__ */ jsx("stop", {
+						offset: "100%",
+						stopColor: "rgba(253,184,19,0)"
+					})
+				]
+			})] }),
+			/* @__PURE__ */ jsx("circle", {
+				cx: fmt(cx),
+				cy: fmt(cy),
+				r: fmt(R * 1.8),
+				fill: `url(#${uid}-glow)`
+			}),
+			rays.map((p, i) => /* @__PURE__ */ jsx("line", {
+				x1: p.x1,
+				y1: p.y1,
+				x2: p.x2,
+				y2: p.y2,
+				stroke: "#FDB813",
+				strokeWidth: fmt(R * .14),
+				strokeLinecap: "round",
+				opacity: .75
+			}, i)),
+			/* @__PURE__ */ jsx("circle", {
+				cx: fmt(cx),
+				cy: fmt(cy),
+				r: fmt(R),
+				fill: `url(#${uid}-core)`
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: fmt(cx - R * .3),
+				cy: fmt(cy - R * .32),
+				r: fmt(R * .32),
+				fill: "rgba(255,255,255,0.45)"
+			})
+		]
+	});
+}
+/** Satellite — a body with two solar-panel wings and a dish. */
+function SatelliteGlyph({ center, size, tilt = -.4 }) {
+	const c = useCoords();
+	const [cx, cy] = c.toPx(center.x, center.y);
+	const s = c.sx(size);
+	const deg = tilt * 180 / Math.PI;
+	return /* @__PURE__ */ jsxs("g", {
+		style: { pointerEvents: "none" },
+		transform: `translate(${fmt(cx)},${fmt(cy)}) rotate(${fmt(deg)})`,
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				x: fmt(-s * 2.1),
+				y: fmt(-s * .55),
+				width: fmt(s * 1.3),
+				height: fmt(s * 1.1),
+				rx: fmt(s * .1),
+				fill: "#2563EB",
+				stroke: "#1E3A8A",
+				strokeWidth: fmt(s * .08)
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: fmt(s * .8),
+				y: fmt(-s * .55),
+				width: fmt(s * 1.3),
+				height: fmt(s * 1.1),
+				rx: fmt(s * .1),
+				fill: "#2563EB",
+				stroke: "#1E3A8A",
+				strokeWidth: fmt(s * .08)
+			}),
+			/* @__PURE__ */ jsx("line", {
+				x1: fmt(-s * .8),
+				y1: 0,
+				x2: fmt(-s * .45),
+				y2: 0,
+				stroke: "#94A3B8",
+				strokeWidth: fmt(s * .1)
+			}),
+			/* @__PURE__ */ jsx("line", {
+				x1: fmt(s * .45),
+				y1: 0,
+				x2: fmt(s * .8),
+				y2: 0,
+				stroke: "#94A3B8",
+				strokeWidth: fmt(s * .1)
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: fmt(-s * .5),
+				y: fmt(-s * .6),
+				width: fmt(s),
+				height: fmt(s * 1.2),
+				rx: fmt(s * .14),
+				fill: "#E5E7EB",
+				stroke: "#9CA3AF",
+				strokeWidth: fmt(s * .08)
+			}),
+			/* @__PURE__ */ jsx("ellipse", {
+				cx: 0,
+				cy: fmt(-s * .8),
+				rx: fmt(s * .42),
+				ry: fmt(s * .18),
+				fill: "#F8FAFC",
+				stroke: "#9CA3AF",
+				strokeWidth: fmt(s * .06)
+			}),
+			/* @__PURE__ */ jsx("line", {
+				x1: 0,
+				y1: fmt(-s * .6),
+				x2: 0,
+				y2: fmt(-s * .82),
+				stroke: "#9CA3AF",
+				strokeWidth: fmt(s * .06)
+			})
+		]
+	});
+}
+
+//#endregion
+export { EarthGlyph, SatelliteGlyph, SunGlyph };

package/dist/kit/steps.d.mts

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+
+//#region src/kit/steps.d.ts
+interface Steps {
+  step: number;
+  total: number;
+  atStart: boolean;
+  atEnd: boolean;
+  next: () => void;
+  prev: () => void;
+  setStep: (n: number) => void;
+}
+declare function useSteps(total: number): Steps;
+declare function StepNav({
+  steps,
+  nextLabel,
+  doneLabel
+}: {
+  steps: Steps;
+  nextLabel?: string;
+  doneLabel?: string;
+}): ReactNode;
+//#endregion
+export { StepNav, Steps, useSteps };