@classytic/stage

Domain‑neutral visual primitive engine for the web. Declarative SVG diagram/math primitives, draggable handles, a math↔pixel coordinate system, theming, a parametric asset/glyph kit, a serializable SceneDoc graph (resolver + command/undo), and a stepped‑lesson sequence engine (StepSpec). Reactive, web‑native, SSR‑safe, and agent‑drivable — the render foundation under @classytic/labs.

Stage exposes deterministic engines and structured results. AI providers, MCP servers, course orchestration, and persistence are host responsibilities; see the concise architecture boundary.

npm i @classytic/stage react react-dom

Import deliberately (subpaths)

Everything is also re‑exported from the root for convenience, but prefer subpaths so your bundle pulls only what it uses (ESM, per‑file emit; sideEffects are scoped to **/*.css, so JavaScript tree-shakes while the shared stylesheet is preserved):

| Subpath | What's in it | |---|---| | @classytic/stage | the curated root barrel (everything) | | @classytic/stage/view | <Stage> SVG root, useElementSize | | @classytic/stage/primitives | Dot Segment Line Ray Vector Circle Polygon Path Label Tex Grid Axes Plot CanvasLayer | | @classytic/stage/interaction | MovableDot, useDraggable, useScreenToMath, hitTest | | @classytic/stage/core | createCoords/fmt, vec/mat, contexts, useFrameLoop clock, control surface, useLearner | | @classytic/stage/scene | SceneDoc types, resolve, applyCommand/inverse, parse/serialize/migrate, SceneStore, Scene, the asset registry | | @classytic/stage/builder | Editor, SceneBuilder, Palette, construction *_TOOLS | | @classytic/stage/assets | StageAssetDefs + the glyph kit (XBlockGlyph, WeightGlyph, BucketGlyph, HangerHook) | | @classytic/stage/math | dependency‑free expression engine (compileExpr, differentiate, toLatex…) | | @classytic/stage/rng | the one seeded generator (mulberry32, mixSeed, hashUniform, categorical…) | | @classytic/stage/ml | shared ML numerics, data tools, and classical learning kernels | | @classytic/stage/ml/deep-learning | tensors, layers, autograd, attention, tokenisation, models, and replayable training-run worlds | | @classytic/stage/ml/rl | reward, policy, GRPO, and reinforcement-learning event detectors | | @classytic/stage/steps | StepProgressProvider, useStepProgress, StepScope (step sequence + gating + progress) | | @classytic/stage/styles.css | theme tokens + control‑kit CSS (import once in global CSS) |

Quick start

import { Stage } from '@classytic/stage/view';
import { Axes, Vector } from '@classytic/stage/primitives';
import { MovableDot } from '@classytic/stage/interaction';

export function Demo() {
  const [tip, setTip] = useState({ x: 3, y: 2 });
  return (
    <Stage view={{ xMin: -1, xMax: 6, yMin: -1, yMax: 5 }} height={320}>
      <Axes labels />
      <Vector tail={{ x: 0, y: 0 }} tip={tip} />
      <MovableDot value={tip} onMove={setTip} />
    </Stage>
  );
}

Design principles

• SVG‑first for crisp, accessible, themeable teaching figures; CanvasLayer (zero‑dep Canvas2D) only for particle‑density (rain, heatmaps). No WebGL/Pixi dependency until a lab measurably needs shaders.
• fmt() rounds emitted coordinates for SSR determinism (server and client agree).
• Theming via --stage-* tokens that bind to host shadcn tokens, with a deliberate dark canvas surface.
• Composable engine — Stage owns calculation, semantic worlds, and neutral primitives. Labs owns recognizable apparatus, learner missions, and course UI.

License

MIT

Trademark

MIT-licensed code. "Classytic"/"arc" names + logos are trademarks of Classytic LLC — see TRADEMARK.md.