@classytic/stage 0.1.0

package/dist/sim/wave.d.mts

@@ -0,0 +1,34 @@
+import { WaveShape } from "../core/motion.mjs";
+import { SimCore } from "./types.mjs";
+
+//#region src/sim/wave.d.ts
+type WaveMode = 'ac' | 'dc';
+interface WaveParams {
+  mode?: WaveMode;
+  /** Peak voltage (V). Default 9. */
+  volts?: number;
+  /** AC frequency (Hz). Ignored for DC. Default 1. */
+  freqHz?: number;
+  shape?: WaveShape;
+  /** Trace ring-buffer capacity (samples). Default 240 (~4s @ 60fps). */
+  trace?: number;
+}
+interface WaveState {
+  mode: WaveMode;
+  volts: number;
+  freqHz: number;
+  shape: WaveShape;
+  /** Seconds elapsed on this core's timeline. */
+  tSec: number;
+  /** Instantaneous signed voltage; sign = current direction. */
+  v: number;
+  /** ∫v·dt — accumulated charge displacement; what flow position (electrons / water) reads. */
+  charge: number;
+  /** Rolling history of `v`, oldest-first, length ≤ `cap` — for the live trace. */
+  samples: number[];
+  /** Fixed capacity of `samples`. */
+  cap: number;
+}
+declare const WaveCore: SimCore<WaveState, WaveParams>;
+//#endregion
+export { WaveCore, WaveMode, WaveParams, WaveState };

package/dist/sim/wave.mjs

@@ -0,0 +1,61 @@
+import { oscillate } from "../core/motion.mjs";
+
+//#region src/sim/wave.ts
+/**
+* `wave` — the AC/DC signal source. One core drives a whole scene: a DC source
+* holds a steady voltage; an AC source oscillates. Either way it exposes the
+* instantaneous voltage `v` (signed — sign IS current direction) plus a rolling
+* `samples` buffer for a live scrolling trace. The SAME `v` can skin many ways at
+* once (a lamp's brightness, electrons in a wire, water sloshing in a pipe), which
+* is the point: sim ≠ render, so one signal feeds every visual metaphor in sync.
+*
+* `mode` / `volts` / `freqHz` live in state (not just params) so a control can
+* write them between steps and a binding can read them by name.
+*/
+function signal(s) {
+	if (s.mode === "dc") return s.volts;
+	return oscillate(s.tSec, {
+		amp: s.volts,
+		freq: s.freqHz,
+		shape: s.shape
+	});
+}
+const WaveCore = {
+	reset(params = {}) {
+		const cap = Math.max(2, Math.round(params.trace ?? 240));
+		const base = {
+			mode: params.mode ?? "dc",
+			volts: params.volts ?? 9,
+			freqHz: params.freqHz ?? 1,
+			shape: params.shape ?? "sine",
+			tSec: 0
+		};
+		return {
+			...base,
+			v: signal(base),
+			charge: 0,
+			samples: [signal(base)],
+			cap
+		};
+	},
+	step(state, dtSec) {
+		const dt = Math.max(0, dtSec);
+		const tSec = state.tSec + dt;
+		const v = signal({
+			...state,
+			tSec
+		});
+		const charge = state.charge + v * dt;
+		const samples = state.samples.length >= state.cap ? [...state.samples.slice(state.samples.length - state.cap + 1), v] : [...state.samples, v];
+		return {
+			...state,
+			tSec,
+			v,
+			charge,
+			samples
+		};
+	}
+};
+
+//#endregion
+export { WaveCore };

package/dist/steps/index.d.mts

@@ -0,0 +1,62 @@
+import { ReactNode } from "react";
+
+//#region src/steps/index.d.ts
+/** One step in the sequence — identity + gating only. Its TITLE, PROSE, and the
+ *  interactive itself live in the authored Section block, not here. */
+interface StepSpec {
+  id: string;
+  /** Unlock when ALL these step ids are completed. Default: the previous step
+   *  (linear). Empty array → always unlocked. */
+  gate?: {
+    after: string[];
+  };
+  /** If false, the step never blocks downstream gating (informational/explainer). */
+  required?: boolean;
+}
+interface StepProgress {
+  completed: boolean;
+  score?: {
+    raw: number;
+    max: number;
+  };
+  attempts: number;
+}
+interface StepState {
+  spec: StepSpec;
+  index: number;
+  completed: boolean;
+  unlocked: boolean;
+  /** The first unlocked-and-unfinished step (where the learner "is"). */
+  current: boolean;
+  progress: StepProgress;
+}
+/** Owns the progress store for one stepped lesson/unit. Wrap its steps in this.
+ *  `id` namespaces the forwarded xAPI activity (e.g. the lesson id). */
+declare function StepProgressProvider({
+  id,
+  children
+}: {
+  id?: string;
+  children: ReactNode;
+}): ReactNode;
+/**
+ * Scope a step's interactive so its `useLearner().report(...)` routes into the
+ * step progress store (keyed by step id) AND forwards to the host's learner
+ * (namespaced) for xAPI. Wrap each step's interactive content with this.
+ */
+declare function StepScope({
+  id,
+  children
+}: {
+  id: string;
+  children: ReactNode;
+}): ReactNode;
+/** Reactive step state for an ordered sequence: per-step completion + gating +
+ *  the current step. Pass the `StepSpec[]` derived from the authored sections. */
+declare function useStepProgress(steps: StepSpec[]): {
+  steps: StepState[];
+  allComplete: boolean;
+  reset: () => void;
+};
+//#endregion
+export { StepProgress, StepProgressProvider, StepScope, StepSpec, StepState, useStepProgress };

package/dist/steps/index.mjs

@@ -0,0 +1,133 @@
+'use client';
+
+import { LearnerProvider, useLearner } from "../core/learner.mjs";
+import { createContext, createElement, useContext, useMemo, useRef, useSyncExternalStore } from "react";
+
+//#region src/steps/index.ts
+/**
+* Step progress + gating — the runtime that turns an ordered sequence of lesson
+* STEPS into "unlock the next when this one is solved" + aggregated completion.
+*
+* ONE SOURCE OF TRUTH for the step sequence is the authored content itself — the
+* @classytic/cms-ui `Section`/`Step` blocks a creator orders in the editor
+* (serialized in the MDX). This engine deliberately does NOT model an authored
+* "LessonDoc": that would be a SECOND, competing definition of the same steps
+* (and creators never hand-write one — they build Section blocks). The host's
+* Section player derives a `StepSpec[]` from the section order, wraps each
+* section's interactive in `<StepScope id>`, and reads `useStepProgress` to gate
+* reveal. Each lab's `useLearner().report` flows into step completion AND
+* forwards (namespaced) to the host's xAPI learner.
+*
+* Headless on purpose: progress is one external store read via
+* `useSyncExternalStore` (one store, many subscribers, no concurrent-React
+* tearing). The host renders the prose + resolves each step's interactive.
+*/
+const EMPTY = {};
+const NOOP_SUBSCRIBE = () => () => {};
+var StepStore = class {
+	map = /* @__PURE__ */ new Map();
+	snap = EMPTY;
+	listeners = /* @__PURE__ */ new Set();
+	subscribe = (l) => {
+		this.listeners.add(l);
+		return () => {
+			this.listeners.delete(l);
+		};
+	};
+	getSnapshot = () => this.snap;
+	report(stepId, r) {
+		const prev = this.map.get(stepId) ?? {
+			completed: false,
+			attempts: 0
+		};
+		this.map.set(stepId, {
+			completed: prev.completed || r.completion === true,
+			score: r.score ?? prev.score,
+			attempts: prev.attempts + 1
+		});
+		this.snap = Object.fromEntries(this.map);
+		this.listeners.forEach((l) => l());
+	}
+	reset() {
+		this.map.clear();
+		this.snap = EMPTY;
+		this.listeners.forEach((l) => l());
+	}
+};
+const StepCtx = createContext(null);
+/** Owns the progress store for one stepped lesson/unit. Wrap its steps in this.
+*  `id` namespaces the forwarded xAPI activity (e.g. the lesson id). */
+function StepProgressProvider({ id, children }) {
+	const ref = useRef(null);
+	if (!ref.current || ref.current.groupId !== id) ref.current = {
+		store: ref.current?.store ?? new StepStore(),
+		groupId: id
+	};
+	return createElement(StepCtx.Provider, { value: ref.current }, children);
+}
+/**
+* Scope a step's interactive so its `useLearner().report(...)` routes into the
+* step progress store (keyed by step id) AND forwards to the host's learner
+* (namespaced) for xAPI. Wrap each step's interactive content with this.
+*/
+function StepScope({ id, children }) {
+	const ctx = useContext(StepCtx);
+	const host = useLearner();
+	return createElement(LearnerProvider, {
+		learner: useMemo(() => ({
+			report: (r) => {
+				ctx?.store.report(id, r);
+				host?.report({
+					...r,
+					activity: ctx?.groupId ? `${ctx.groupId}.${id}.${r.activity}` : `${id}.${r.activity}`
+				});
+			},
+			...host?.getPrior ? { getPrior: (a) => host.getPrior(a) } : {}
+		}), [
+			ctx,
+			host,
+			id
+		]),
+		children
+	});
+}
+/** Reactive step state for an ordered sequence: per-step completion + gating +
+*  the current step. Pass the `StepSpec[]` derived from the authored sections. */
+function useStepProgress(steps) {
+	const ctx = useContext(StepCtx);
+	const subscribe = ctx?.store.subscribe ?? NOOP_SUBSCRIBE;
+	const getSnapshot = ctx?.store.getSnapshot ?? (() => EMPTY);
+	const snap = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+	return useMemo(() => {
+		const out = steps.map((spec, i) => {
+			const progress = snap[spec.id] ?? {
+				completed: false,
+				attempts: 0
+			};
+			const prev = steps[i - 1];
+			const unlocked = (spec.gate?.after ?? (prev ? [prev.id] : [])).every((gid) => snap[gid]?.completed === true);
+			return {
+				spec,
+				index: i,
+				completed: progress.completed,
+				unlocked,
+				current: false,
+				progress
+			};
+		});
+		const cur = out.find((s) => s.unlocked && !s.completed) ?? out[out.length - 1];
+		if (cur) cur.current = true;
+		return {
+			steps: out,
+			allComplete: out.every((s) => s.completed || s.spec.required === false),
+			reset: () => ctx?.store.reset()
+		};
+	}, [
+		steps,
+		snap,
+		ctx
+	]);
+}
+
+//#endregion
+export { StepProgressProvider, StepScope, useStepProgress };

package/dist/thermo/index.d.mts

@@ -0,0 +1,82 @@
+//#region src/thermo/index.d.ts
+/**
+ * `thermo` — ideal-gas thermodynamic processes, as a PURE kernel (like `field`:
+ * no React, no pixels, no time-stepping). A lab drives it with a slider/progress
+ * fraction; the kernel returns the full P–V path of a quasi-static process plus the
+ * first-law bookkeeping along it (work, heat, internal energy, entropy).
+ *
+ * Everything is one ideal gas, PV = nRT, with a degrees-of-freedom ratio γ = Cp/Cv
+ * (monatomic 5/3, diatomic 7/5). The four canonical processes and the Carnot cycle
+ * all compose from `runProcess`:
+ *
+ *   isothermal  T const   PV = const        W = nRT·ln(V₂/V₁),  Q = W,  ΔU = 0
+ *   adiabatic   Q = 0     PVᵞ = const        W = (P₁V₁−P₂V₂)/(γ−1) = −ΔU,  ΔS = 0
+ *   isobaric    P const   V/T = const        W = PΔV,  Q = nCpΔT,  ΔU = nCvΔT
+ *   isochoric   V const   P/T = const        W = 0,    Q = ΔU = nCvΔT
+ *
+ * SI units throughout: P in pascals, V in m³, T in kelvin, energy in joules,
+ * entropy in J/K. (Labs convert to kPa / litres for display.)
+ */
+/** Universal gas constant, J/(mol·K). */
+declare const R = 8.314462618;
+type ProcessKind = 'isothermal' | 'adiabatic' | 'isobaric' | 'isochoric';
+interface GasState {
+  /** Pressure, Pa. */
+  P: number;
+  /** Volume, m³. */
+  V: number;
+  /** Temperature, K. */
+  T: number;
+  /** Amount, mol. */
+  n: number;
+}
+interface ProcessResult {
+  kind: ProcessKind;
+  start: GasState;
+  end: GasState;
+  /** Sampled states from start→end (for drawing the P–V curve). */
+  path: GasState[];
+  /** Work done BY the gas, J ( = ∫P dV, the area under the P–V curve). */
+  W: number;
+  /** Heat added TO the gas, J. */
+  Q: number;
+  /** Change in internal energy, J ( = nCvΔT). */
+  dU: number;
+  /** Change in entropy, J/K. */
+  dS: number;
+}
+/**
+ * Run one quasi-static process from `start` to a target. Give exactly one target
+ * coordinate that the process can reach (e.g. a target volume for an isothermal or
+ * adiabatic expansion, a target temperature for isobaric/isochoric heating).
+ */
+declare function runProcess(start: GasState, kind: ProcessKind, target: {
+  V?: number;
+  P?: number;
+  T?: number;
+}, gamma?: number, samples?: number): ProcessResult;
+interface CarnotResult {
+  /** The four legs in order: hot isothermal expansion, adiabatic expansion,
+   *  cold isothermal compression, adiabatic compression (back to start). */
+  legs: ProcessResult[];
+  Th: number;
+  Tc: number;
+  /** Heat absorbed from the hot reservoir, J (>0). */
+  Qh: number;
+  /** Heat rejected to the cold reservoir, J (>0). */
+  Qc: number;
+  /** Net work done by the engine over the cycle, J ( = Qh − Qc = enclosed P–V area). */
+  Wnet: number;
+  /** Thermal efficiency = 1 − Tc/Th = Wnet/Qh. */
+  efficiency: number;
+}
+/**
+ * A Carnot cycle starting at `(V1, Th)`: isothermal expansion V1→V2 at Th, then
+ * adiabatic expansion to Tc, isothermal compression at Tc, and adiabatic
+ * compression back to the start. V3/V4 are fixed by the closure condition.
+ */
+declare function carnotCycle(n: number, Th: number, Tc: number, V1: number, V2: number, gamma?: number): CarnotResult;
+declare const gammaMonatomic: number;
+declare const gammaDiatomic: number;
+//#endregion
+export { CarnotResult, GasState, ProcessKind, ProcessResult, R, carnotCycle, gammaDiatomic, gammaMonatomic, runProcess };

package/dist/thermo/index.mjs

@@ -0,0 +1,133 @@
+//#region src/thermo/index.ts
+/**
+* `thermo` — ideal-gas thermodynamic processes, as a PURE kernel (like `field`:
+* no React, no pixels, no time-stepping). A lab drives it with a slider/progress
+* fraction; the kernel returns the full P–V path of a quasi-static process plus the
+* first-law bookkeeping along it (work, heat, internal energy, entropy).
+*
+* Everything is one ideal gas, PV = nRT, with a degrees-of-freedom ratio γ = Cp/Cv
+* (monatomic 5/3, diatomic 7/5). The four canonical processes and the Carnot cycle
+* all compose from `runProcess`:
+*
+*   isothermal  T const   PV = const        W = nRT·ln(V₂/V₁),  Q = W,  ΔU = 0
+*   adiabatic   Q = 0     PVᵞ = const        W = (P₁V₁−P₂V₂)/(γ−1) = −ΔU,  ΔS = 0
+*   isobaric    P const   V/T = const        W = PΔV,  Q = nCpΔT,  ΔU = nCvΔT
+*   isochoric   V const   P/T = const        W = 0,    Q = ΔU = nCvΔT
+*
+* SI units throughout: P in pascals, V in m³, T in kelvin, energy in joules,
+* entropy in J/K. (Labs convert to kPa / litres for display.)
+*/
+/** Universal gas constant, J/(mol·K). */
+const R = 8.314462618;
+const cv = (gamma) => R / (gamma - 1);
+const cp = (gamma) => gamma * R / (gamma - 1);
+/** State completed from any two of (P,V,T) via PV = nRT. */
+const fromPV = (P, V, n) => ({
+	P,
+	V,
+	n,
+	T: P * V / (n * R)
+});
+/**
+* Run one quasi-static process from `start` to a target. Give exactly one target
+* coordinate that the process can reach (e.g. a target volume for an isothermal or
+* adiabatic expansion, a target temperature for isobaric/isochoric heating).
+*/
+function runProcess(start, kind, target, gamma = 5 / 3, samples = 64) {
+	const { n } = start;
+	const Cv = cv(gamma), Cp = cp(gamma);
+	let end;
+	if (kind === "isothermal") {
+		const T = start.T;
+		const V2 = target.V ?? (target.P != null ? n * 8.314462618 * T / target.P : start.V);
+		end = fromPV(n * R * T / V2, V2, n);
+	} else if (kind === "adiabatic") {
+		const K = start.P * start.V ** gamma;
+		const V2 = target.V ?? (target.T != null ? start.V * (start.T / target.T) ** (1 / (gamma - 1)) : start.V);
+		end = fromPV(K / V2 ** gamma, V2, n);
+	} else if (kind === "isobaric") {
+		const P = start.P;
+		end = fromPV(P, target.V ?? (target.T != null ? n * 8.314462618 * target.T / P : start.V), n);
+	} else {
+		const V = start.V;
+		end = fromPV(target.P ?? (target.T != null ? n * 8.314462618 * target.T / V : start.P), V, n);
+	}
+	const path = [];
+	for (let i = 0; i <= samples; i++) {
+		const u = i / samples;
+		let s;
+		if (kind === "isochoric") s = fromPV(start.P + (end.P - start.P) * u, start.V, n);
+		else {
+			const V = start.V + (end.V - start.V) * u;
+			if (kind === "isothermal") s = fromPV(n * R * start.T / V, V, n);
+			else if (kind === "adiabatic") s = fromPV(start.P * start.V ** gamma / V ** gamma, V, n);
+			else s = fromPV(start.P, V, n);
+		}
+		path.push(s);
+	}
+	const dU = n * Cv * (end.T - start.T);
+	let W, Q, dS;
+	if (kind === "isothermal") {
+		W = n * R * start.T * Math.log(end.V / start.V);
+		Q = W;
+		dS = n * R * Math.log(end.V / start.V);
+	} else if (kind === "adiabatic") {
+		W = (start.P * start.V - end.P * end.V) / (gamma - 1);
+		Q = 0;
+		dS = 0;
+	} else if (kind === "isobaric") {
+		W = start.P * (end.V - start.V);
+		Q = n * Cp * (end.T - start.T);
+		dS = n * Cp * Math.log(end.T / start.T);
+	} else {
+		W = 0;
+		Q = dU;
+		dS = n * Cv * Math.log(end.T / start.T);
+	}
+	return {
+		kind,
+		start,
+		end,
+		path,
+		W,
+		Q,
+		dU,
+		dS
+	};
+}
+/**
+* A Carnot cycle starting at `(V1, Th)`: isothermal expansion V1→V2 at Th, then
+* adiabatic expansion to Tc, isothermal compression at Tc, and adiabatic
+* compression back to the start. V3/V4 are fixed by the closure condition.
+*/
+function carnotCycle(n, Th, Tc, V1, V2, gamma = 5 / 3) {
+	const ratio = (Th / Tc) ** (1 / (gamma - 1));
+	const V3 = V2 * ratio;
+	const V4 = V1 * ratio;
+	const legHot = runProcess(fromPV(n * R * Th / V1, V1, n), "isothermal", { V: V2 }, gamma);
+	const legExp = runProcess(legHot.end, "adiabatic", { V: V3 }, gamma);
+	const legCold = runProcess(legExp.end, "isothermal", { V: V4 }, gamma);
+	const legComp = runProcess(legCold.end, "adiabatic", { V: V1 }, gamma);
+	const Qh = legHot.Q;
+	const Qc = -legCold.Q;
+	const Wnet = Qh - Qc;
+	return {
+		legs: [
+			legHot,
+			legExp,
+			legCold,
+			legComp
+		],
+		Th,
+		Tc,
+		Qh,
+		Qc,
+		Wnet,
+		efficiency: 1 - Tc / Th
+	};
+}
+const gammaMonatomic = 5 / 3;
+const gammaDiatomic = 7 / 5;
+
+//#endregion
+export { R, carnotCycle, gammaDiatomic, gammaMonatomic, runProcess };

package/dist/view/Stage.d.mts

@@ -0,0 +1,39 @@
+import { ViewBox } from "../core/coords.mjs";
+import { PointerEvent, ReactNode } from "react";
+
+//#region src/view/Stage.d.ts
+interface StageProps {
+  /** Visible math range. Defaults to [-8,8]×[-5,5]. */
+  view?: ViewBox;
+  /** Fixed pixel width (otherwise fills container + measures). */
+  width?: number;
+  /** Fixed pixel height (otherwise derived from aspectRatio or width). */
+  height?: number;
+  /** width / height, used to derive the missing dimension. */
+  aspectRatio?: number;
+  /** Inner padding in px. */
+  pad?: number;
+  /** Preserve aspect ratio (uniform scale). Default true. */
+  preserveAspect?: boolean;
+  ariaLabel?: string;
+  className?: string;
+  background?: string;
+  /** Pointer → math coordinate callback (tools/builder use this). */
+  onPointerMath?: (p: [number, number], e: PointerEvent<SVGSVGElement>) => void;
+  children?: ReactNode;
+}
+declare function Stage({
+  view,
+  width,
+  height,
+  aspectRatio,
+  pad,
+  preserveAspect,
+  ariaLabel,
+  className,
+  background,
+  onPointerMath,
+  children
+}: StageProps): ReactNode;
+//#endregion
+export { Stage, StageProps };

package/dist/view/Stage.mjs

@@ -0,0 +1,91 @@
+'use client';
+
+import { createCoords } from "../core/coords.mjs";
+import { CoordsContext, StageRefContext } from "../core/context.mjs";
+import { useElementSize } from "./useElementSize.mjs";
+import { useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/view/Stage.tsx
+/**
+* <Stage> — the SVG root. SSR-safe: builds a CoordinateSystem from explicit
+* width/height/aspectRatio (or a default) so children render on first paint;
+* after mount a ResizeObserver swaps in the measured width. There is ONE content
+* group with no transform — every primitive self-positions via coords.toPx().
+* A pixel-space overlay group hosts selection halos/handles (builder phase).
+*/
+const DEFAULT_VIEW = {
+	xMin: -8,
+	xMax: 8,
+	yMin: -5,
+	yMax: 5
+};
+function Stage({ view = DEFAULT_VIEW, width, height, aspectRatio, pad = 12, preserveAspect = true, ariaLabel = "Interactive figure", className, background = "var(--stage-bg)", onPointerMath, children }) {
+	const svgRef = useRef(null);
+	const { ref: wrapRef, size } = useElementSize();
+	const w = Math.max(1, Math.round(size?.width ?? width ?? 640));
+	const h = Math.max(1, Math.round(height ?? (aspectRatio ? w / aspectRatio : Math.max(160, w * .6))));
+	const coords = useMemo(() => createCoords(w, h, view, {
+		pad,
+		preserveAspect
+	}), [
+		w,
+		h,
+		view,
+		pad,
+		preserveAspect
+	]);
+	const handlePointer = onPointerMath ? (e) => {
+		const ctm = svgRef.current?.getScreenCTM();
+		if (!ctm) return;
+		const pt = new DOMPoint(e.clientX, e.clientY).matrixTransform(ctm.inverse());
+		onPointerMath(coords.toMath(pt.x, pt.y), e);
+	} : void 0;
+	return /* @__PURE__ */ jsx("div", {
+		ref: wrapRef,
+		className,
+		style: { width: "100%" },
+		children: /* @__PURE__ */ jsxs("svg", {
+			ref: svgRef,
+			width: w,
+			height: h,
+			viewBox: `0 0 ${w} ${h}`,
+			role: "group",
+			"aria-label": ariaLabel,
+			onPointerDown: handlePointer,
+			style: {
+				display: "block",
+				background,
+				borderRadius: 12,
+				border: "1px solid var(--stage-grid)",
+				userSelect: "none",
+				touchAction: "none"
+			},
+			children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", {
+				id: "stage-arrow",
+				viewBox: "0 0 10 10",
+				refX: "8",
+				refY: "5",
+				markerWidth: "7",
+				markerHeight: "7",
+				orient: "auto-start-reverse",
+				children: /* @__PURE__ */ jsx("path", {
+					d: "M0,0 L10,5 L0,10 z",
+					fill: "context-stroke"
+				})
+			}) }), /* @__PURE__ */ jsx(CoordsContext.Provider, {
+				value: coords,
+				children: /* @__PURE__ */ jsxs(StageRefContext.Provider, {
+					value: svgRef,
+					children: [/* @__PURE__ */ jsx("g", {
+						"data-stage-content": true,
+						children
+					}), /* @__PURE__ */ jsx("g", { "data-stage-overlay": true })]
+				})
+			})]
+		})
+	});
+}
+
+//#endregion
+export { Stage };

package/dist/view/index.d.mts

@@ -0,0 +1,4 @@
+import { Stage, StageProps } from "./Stage.mjs";
+import { Size, useElementSize } from "./useElementSize.mjs";
+import { useInView } from "./useInView.mjs";
+export { type Size, Stage, type StageProps, useElementSize, useInView };

package/dist/view/index.mjs

@@ -0,0 +1,5 @@
+import { useElementSize } from "./useElementSize.mjs";
+import { Stage } from "./Stage.mjs";
+import { useInView } from "./useInView.mjs";
+
+export { Stage, useElementSize, useInView };

package/dist/view/useElementSize.d.mts

@@ -0,0 +1,13 @@
+import { RefObject } from "react";
+
+//#region src/view/useElementSize.d.ts
+interface Size {
+  width: number;
+  height: number;
+}
+declare function useElementSize<T extends HTMLElement>(): {
+  ref: RefObject<T | null>;
+  size: Size | null;
+};
+//#endregion
+export { Size, useElementSize };