@sphynxoid/stepwise 0.2.0 → 0.3.0

package/README.md

@@ -1,6 +1,10 @@
 # @sphynxoid/stepwise
 
-A kit for interactive, narrated, step-driven visualizations — one primitive (`useSteps`) at every scale.
+**Interactive explainers for React: step-through players, guided tours, scroll-driven lessons and glossary tooltips, all on one cursor.**
+
+**[Live demos](https://stepwise.thesphynx.net)** · [API reference](https://stepwise.thesphynx.net/docs) · [StackBlitz starter](https://stackblitz.com/github/TheSphynxoid/stepwise/tree/master/examples/vite-starter) · [GitHub](https://github.com/TheSphynxoid/stepwise)
+
+<img src="https://raw.githubusercontent.com/TheSphynxoid/stepwise/master/docs/assets/hero.gif" alt="A quicksort trace playing in a stepwise PlayerBar" width="516">
 
 Frames in a trace, chapters in a lesson, lessons in a notebook, and tour steps are the same thing at the core: a clamped cursor over an ordered sequence. Timers, tour effects, scroll tracking, and third-party presenters are policies and adapters layered on top.
 
@@ -45,7 +49,7 @@ Tokens: `--stepwise-background`, `-foreground`, `-card`, `-popover`, `-primary`,
 **2. Tailwind + shadcn/ui — copy the components in with the shadcn CLI:**
 
 ```bash
-npx shadcn@latest add https://stepwise-demo.vercel.app/r/player-bar.json
+npx shadcn@latest add https://stepwise.thesphynx.net/r/player-bar.json
 ```
 
 Items: `player-bar`, `code-block`, `tour`, `glossary`, `chapter-nav`, `lesson-pager`, `shortcuts-dialog` — or `stepwise` for all of them. The presentation source lands in `components/stepwise/` (plus `lib/stepwise-theme.ts`), where Tailwind scans it automatically; hooks and types stay imported from this package. Colors come from your shadcn tokens.
@@ -86,6 +90,66 @@ export function Demo() {
 
 `useTrace` binds a player to a typed trace: `step` is the frame to render (frame 0 before playback starts), and `toneAt` / `titleAt` feed the scrubber. Under it, `useStepPlayer` gives you a timer-driven playhead with play/pause/seek, speed control, and optional `#frame=2` deep links — or hand it an `engine` to drive the playhead from GSAP or scroll instead. Two end-state flavors: `atEnd` (cursor parked on the last frame, seeks included) and `ended` (playback ran to the finish, via the `onEnd` callback option) — clearing on any cursor movement, so a completion summary knows the demo actually finished. `autoPlay` respects `prefers-reduced-motion` (lands on frame 0, paused; opt out with `respectReducedMotion: false`), and `syncHash` writes only its own key, so it coexists with anchors and other players' keys.
 
+## Live simulations
+
+A trace doesn't have to be recorded by hand. Write the algorithm as a generator, give each step a `key` naming its moment, and `useSimulation` reruns it whenever the input changes, keeping the playhead on the same moment (mid-playback too):
+
+```tsx
+import { useSimulation, type Simulation, type StepwiseStep } from "@sphynxoid/stepwise";
+
+type Frame = StepwiseStep<{ arr: number[] }>;
+
+const shuffleThenSort: Simulation<number[], Frame> = function* (input, { rng }) {
+  const a = rng.shuffle(input);             // seeded: same input + seed → same trace
+  yield { key: "shuffled", tone: "neutral", label: "shuffled", arr: a };
+  for (let i = 1; i < a.length; i++) {
+    for (let j = i; j > 0 && a[j - 1] > a[j]; j--) {
+      [a[j - 1], a[j]] = [a[j], a[j - 1]];
+      yield { key: `swap ${i}.${j}`, tone: "write", label: `swap at ${j}`, arr: [...a] };
+    }
+  }
+};
+
+const sim = useSimulation(shuffleThenSort, input, { seed: 7, autoPlay: true, syncHash: "frame" });
+// sim.step, sim.player, sim.toneAt, sim.titleAt: like useTrace, plus sim.steps / truncated / error
+```
+
+How re-anchoring decides: walk back from the old position to the latest step whose key exists in the new trace, and land there (`reanchor` is exported for custom players). `runSimulation` is the pure, server-safe runner, with a `maxSteps` cap so a runaway generator can't hang the page.
+
+## Following a live timeline
+
+When frames arrive while the reader watches (a log, a stream, an agent's steps, a game's moves), add `follow`: a reader at the edge keeps playing into new frames at the normal pace, and one who scrubbed back to inspect something stays there until they choose to return.
+
+```tsx
+const trace = useTrace(events, { autoPlay: true, follow: true }); // events grows over time
+// trace.player.live: at the edge?  trace.player.goLive(): back to it
+<PlayerBar player={trace.player} toneAt={trace.toneAt} titleAt={trace.titleAt} live />
+```
+
+`PlayerBar live` shows "Live" at the edge and "Go live +N" when the reader is behind. Checkpoints still hold, and with reduced motion nothing starts on its own.
+
+## Checkpoints and evaluators
+
+Pause autoplay where the reader should think, then grade their answer:
+
+```tsx
+const sim = useSimulation(sort, input, {
+  autoPlay: true,
+  holdAt: (_, step) => step?.kind === "compare",   // autoplay stops here; player.held is set
+});
+
+const answer = useEvaluator(
+  (guess: "swap" | "keep" | null) =>
+    guess === truth ? pass("Right!") : fail("Compare the two highlighted bars."),
+  guess,
+  { mode: "manual" }                                // judge on check(); "auto" judges every change
+);
+// <button onClick={answer.check}>Check</button> {answer.feedback}
+// {answer.passed && <button onClick={sim.player.release}>Continue</button>}
+```
+
+An `Evaluator` returns a boolean, a `Verdict` (`pass(feedback)`, `fail(feedback)`, `pending()`), or a promise of either; async checks report `pending`, and stale results are dropped. Tour gates accept verdicts too: anything but pass blocks Next, and `tour.feedback` (→ `TourCard feedback`) tells the reader what's missing.
+
 ## The three scales
 
 | Scale | Hook | Presentation |

package/dist/adapters/driver-js.d.ts

@@ -1,4 +1,4 @@
-import { T as TourDriver } from '../types-IT_9L8On.js';
+import { T as TourDriver } from '../types-CNMxISXe.js';
 import 'react';
 
 interface DriverJsTourOptions {

package/dist/adapters/gsap.d.ts

@@ -1,4 +1,4 @@
-import { P as PlayerEngine } from '../types-IT_9L8On.js';
+import { P as PlayerEngine } from '../types-CNMxISXe.js';
 import 'react';
 
 interface GsapEngineOptions {

package/dist/adapters/scroll.d.ts

@@ -1,4 +1,4 @@
-import { P as PlayerEngine } from '../types-IT_9L8On.js';
+import { P as PlayerEngine } from '../types-CNMxISXe.js';
 import 'react';
 
 interface ScrollEngineOptions {

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { P as PlayerEngine, S as StepwiseStep, a as StepTone, b as TourStepInput, T as TourDriver, C as Chapter, c as ShortcutItem } from './types-IT_9L8On.js';
-export { d as PlayerEngineApi, e as PlayerEngineHandle, f as TourContext } from './types-IT_9L8On.js';
+import { P as PlayerEngine, S as StepwiseStep, a as StepTone, V as VerdictStatus, b as Verdict, E as Evaluator, c as TourStepInput, T as TourDriver, C as Chapter, d as ShortcutItem } from './types-CNMxISXe.js';
+export { e as EvaluatorResult, f as PlayerEngineApi, g as PlayerEngineHandle, h as TourContext, i as fail, p as pass, j as pending, t as toVerdict } from './types-CNMxISXe.js';
 import * as react from 'react';
 import { ReactNode } from 'react';
 
@@ -69,6 +69,24 @@ interface StepPlayerOptions {
      * user presses play. Default true.
      */
     respectReducedMotion?: boolean;
+    /**
+     * Checkpoints: when it returns true for the frame playback just reached,
+     * the built-in timer pauses there and reports `held` until `release()` —
+     * "stop and predict what happens next". Manual stepping and seeks are never
+     * held (the reader keeps control). Ignored when a custom `engine` drives
+     * playback. Each checkpoint holds once per playthrough.
+     */
+    holdAt?: (frame: number) => boolean;
+    /**
+     * Follow the live edge of a growing timeline (a stream, a log, a game's
+     * move history). When frames are appended while the reader is live
+     * (playing, or parked on the last frame), playback continues through them
+     * at the normal pace. A reader who scrubbed back or paused mid-trace stays
+     * put — `live` turns false and `goLive()` returns them. With `autoPlay`, a
+     * player that mounts empty starts on the first frames. Checkpoints still
+     * hold; a custom `engine` owns its own timing and ignores this.
+     */
+    follow?: boolean;
 }
 interface StepPlayer {
     /** Total frames in the current timeline. */
@@ -87,6 +105,28 @@ interface StepPlayer {
      * not set it — `toggle()` at `ended` replays from frame 0.
      */
     ended: boolean;
+    /**
+     * The checkpoint frame playback is paused on (see `holdAt`), or null.
+     * Cleared by `release()` or any cursor movement.
+     */
+    held: number | null;
+    /** Release the current checkpoint and resume playing. No-op when not held. */
+    release: () => void;
+    /**
+     * Move the cursor without touching playback state: playing stays playing,
+     * completion and checkpoints are kept. For re-anchoring after the timeline
+     * changes underneath (`useTrace` with keyed steps) — user-facing moves
+     * should use `seek`.
+     */
+    jump: (frame: number) => void;
+    /**
+     * With `follow`: the reader is at the live edge (playing toward it, parked
+     * on the last frame, or waiting to start), so appended frames will play.
+     * Always false without `follow`.
+     */
+    live: boolean;
+    /** Move to the last frame (paused, so new frames play from there with `follow`). */
+    goLive: () => void;
     /** Jump to frame 0 and play. */
     start: () => void;
     /** Clear the player (frame = -1, paused). */
@@ -101,8 +141,26 @@ interface StepPlayer {
     setPlaying: (playing: boolean) => void;
     setSpeed: (speed: number) => void;
 }
-declare function useStepPlayer({ total, baseDelayMs, autoPlay, engine, syncHash, onEnd, respectReducedMotion, }: StepPlayerOptions): StepPlayer;
+declare function useStepPlayer({ total, baseDelayMs, autoPlay, engine, syncHash, onEnd, respectReducedMotion, holdAt, follow, }: StepPlayerOptions): StepPlayer;
+/** Value of `key` in the hash, or null when absent. */
+declare function readHashParam(hash: string, key: string): string | null;
+/** The hash with `key` set to `value` — replaced in place, else appended. */
+declare function writeHashParam(hash: string, key: string, value: string): string;
 
+interface TraceOptions<S extends StepwiseStep> extends Omit<StepPlayerOptions, "total" | "holdAt"> {
+    /**
+     * Checkpoints (see `StepPlayerOptions.holdAt`), with the step at hand:
+     * `holdAt: (_, step) => step?.kind === "compare"`. Always sees the current
+     * trace, also after it's recomputed.
+     */
+    holdAt?: (frame: number, step: S | undefined) => boolean;
+    /**
+     * Step identity used to keep the playhead in place when `steps` changes
+     * (see `reanchor`). Defaults to each step's `key` field. Traces without
+     * keys keep the old behavior: the same index, clamped.
+     */
+    keyOf?: (step: S, index: number) => string | undefined;
+}
 interface TracePlayer<S extends StepwiseStep> {
     /** The underlying player — pass it to PlayerBar. */
     player: StepPlayer;
@@ -128,8 +186,110 @@ interface TracePlayer<S extends StepwiseStep> {
  *   const trace = useTrace(STEPS, { autoPlay: true });
  *   <Viz arr={trace.step.arr} />
  *   <PlayerBar player={trace.player} toneAt={trace.toneAt} titleAt={trace.titleAt} />
+ *
+ * `steps` may change (new input, new seed — see `useSimulation`). Keyed
+ * steps re-anchor: the playhead stays on the same logical step, and playback
+ * state is untouched.
  */
-declare function useTrace<S extends StepwiseStep>(steps: readonly S[], opts?: Omit<StepPlayerOptions, "total">): TracePlayer<S>;
+declare function useTrace<S extends StepwiseStep>(steps: readonly S[], opts?: TraceOptions<S>): TracePlayer<S>;
+
+/**
+ * Where should the playhead go when the trace changes underneath it?
+ *
+ * Walk back from the old position to the most recent step whose key still
+ * exists in the new trace, and land on that step there. So editing an input
+ * keeps you on "the same moment" of the algorithm when it still happens, and
+ * otherwise on the last moment both runs share — never somewhere unrelated.
+ * With no shared key at all, the playhead returns to frame 0.
+ *
+ * Pure: `useTrace` calls it during render, and it's exported for custom
+ * players. Keys come from `keyOf`, by default each step's `key` field; a
+ * step without a key never matches.
+ */
+declare function reanchor<A, B>(oldSteps: readonly A[], oldIndex: number, newSteps: readonly B[], keyOf: (step: A | B, index: number) => string | undefined): number;
+
+/** Deterministic pseudo-random source (mulberry32). */
+interface Rng {
+    /** The seed this generator was created from (numbers pass through; strings are hashed). */
+    readonly seed: number;
+    /** Uniform float in [0, 1). */
+    next(): number;
+    /** Uniform integer in [min, max], both inclusive. */
+    int(min: number, max: number): number;
+    /** A uniformly chosen element. Throws on an empty array. */
+    pick<T>(items: readonly T[]): T;
+    /** A shuffled copy (Fisher-Yates); the input is not modified. */
+    shuffle<T>(items: readonly T[]): T[];
+}
+declare function createRng(seed?: number | string): Rng;
+interface SimulationContext {
+    /** Seeded randomness. Use it instead of Math.random to keep runs replayable. */
+    rng: Rng;
+}
+/**
+ * A simulation turns an input into a trace. Write it as a generator that
+ * yields one step per moment worth showing (or return an array):
+ *
+ *   function* bubble(input: number[]): Generator<SortStep> {
+ *     const arr = [...input];
+ *     for (let pass = 0; …) {
+ *       yield { key: `p${pass}:j${j}`, tone: "neutral", label: "compare", arr: [...arr] };
+ *     }
+ *   }
+ *
+ * Yield snapshots (copies), not live references: every step is kept.
+ * Give steps a `key` so the playhead stays put when the input changes.
+ */
+type Simulation<Input, S extends StepwiseStep> = (input: Input, ctx: SimulationContext) => Iterable<S>;
+interface SimulationRunOptions {
+    /** Seed for `ctx.rng`. Default 0. */
+    seed?: number | string;
+    /**
+     * Safety cap: stop collecting after this many steps and report
+     * `truncated` (a non-terminating simulation shouldn't hang the page).
+     * Default 10 000.
+     */
+    maxSteps?: number;
+}
+interface SimulationResult<S> {
+    steps: S[];
+    /** True when `maxSteps` cut the run short. */
+    truncated: boolean;
+    /** What the simulation threw, if it did; `steps` holds what it yielded before. */
+    error: unknown;
+    /** The numeric seed actually used (strings are hashed). */
+    seed: number;
+}
+/** Run a simulation to completion (or the cap). Pure; safe at module scope and on the server. */
+declare function runSimulation<Input, S extends StepwiseStep>(simulation: Simulation<Input, S>, input: Input, opts?: SimulationRunOptions): SimulationResult<S>;
+
+interface SimulationOptions<S extends StepwiseStep> extends TraceOptions<S>, SimulationRunOptions {
+}
+interface SimulationPlayer<S extends StepwiseStep> extends TracePlayer<S> {
+    /** The computed trace. */
+    steps: readonly S[];
+    /** True when `maxSteps` cut the run short. */
+    truncated: boolean;
+    /** What the simulation threw, if anything (the trace holds the steps before it). */
+    error: unknown;
+    /** The numeric seed used for this run. */
+    seed: number;
+}
+/**
+ * A live trace: run `simulation` on `input` and play the result. Change the
+ * input (or the seed) and the trace is recomputed; keyed steps keep the
+ * playhead on the same logical moment, and a playing player keeps playing.
+ *
+ *   const [input, setInput] = useState([5, 2, 8, 1]);
+ *   const sim = useSimulation(bubbleSort, input, { autoPlay: true, syncHash: "frame" });
+ *   <Bars arr={sim.step!.arr} />
+ *   <PlayerBar player={sim.player} toneAt={sim.toneAt} titleAt={sim.titleAt} />
+ *
+ * The trace is recomputed when `simulation`, `input`, `seed` or `maxSteps`
+ * change identity: define the simulation at module scope, and keep object
+ * inputs in state (or memoize them) rather than rebuilding them per render.
+ */
+declare function useSimulation<Input, S extends StepwiseStep>(simulation: Simulation<Input, S>, input: Input, opts?: SimulationOptions<S>): SimulationPlayer<S>;
 
 interface TraceBuilder<Data extends object> {
     /** Append one frame. Returns the builder, so calls chain. */
@@ -295,6 +455,45 @@ declare function useLessonStream(count: number, opts?: LessonStreamOptions): Les
  */
 declare function useFadeIn(initiallyVisible?: boolean): boolean;
 
+interface EvaluatorOptions {
+    /**
+     * "auto" (default) re-judges whenever `ctx` changes: a gate that opens the
+     * moment the reader does the thing. "manual" judges only on `check()`: a
+     * quiz with a Check button; changing `ctx` afterwards clears the verdict.
+     */
+    mode?: "auto" | "manual";
+}
+interface EvaluatorState {
+    /** "idle" until the first verdict (manual mode, or after `reset`). */
+    status: VerdictStatus | "idle";
+    feedback: ReactNode;
+    /** status === "pass". */
+    passed: boolean;
+    /** How many times `check()` ran, for "show a hint after two tries". */
+    attempts: number;
+    /** What the evaluator threw (the verdict is then "fail"). */
+    error: unknown;
+    /** Judge the current context now. Resolves with the verdict, or null if superseded. */
+    check: () => Promise<Verdict | null>;
+    /** Back to "idle", attempts to 0, any running check abandoned. */
+    reset: () => void;
+}
+/**
+ * Run an evaluator against a context and keep its verdict as state. Async
+ * evaluators report "pending" while they run; a newer check (or a context
+ * change) aborts the older one and drops its late result, so the verdict
+ * always describes the latest context. `check` and `reset` are
+ * referentially stable.
+ *
+ *   const answer = useEvaluator(
+ *     (guess: string | null) => (guess === truth ? pass("Right!") : fail("Look at the pivot again.")),
+ *     guess,
+ *     { mode: "manual" }
+ *   );
+ *   <button onClick={answer.check}>Check</button> {answer.feedback}
+ */
+declare function useEvaluator<Ctx>(evaluator: Evaluator<Ctx>, ctx: Ctx, opts?: EvaluatorOptions): EvaluatorState;
+
 interface GuidedTour {
     /** Active step index, or null when the tour is not running. */
     index: number | null;
@@ -306,6 +505,11 @@ interface GuidedTour {
      * the waitHint) so the user knows what is being waited on.
      */
     blocked: boolean;
+    /**
+     * The active step's gate feedback, when its gate returns a `Verdict` with
+     * one ("Stage at least one file"). Pass it to `TourCard`'s `feedback`.
+     */
+    feedback: ReactNode;
     start: () => void;
     end: () => void;
     next: () => void;
@@ -323,19 +527,6 @@ interface GuidedTourOptions {
      */
     driver?: TourDriver;
 }
-/**
- * Tour state whose steps are effects over app state: `onEnter` fires whenever
- * the active step changes, reading the latest `steps` via ref so closures stay
- * fresh without re-triggering the effect on every render. Composed on
- * useSteps — a tour is a step sequence whose `next` past the end exits.
- *
- * On top of the linear cursor, steps may declare `when` (skip on arrival),
- * `gate` (block `next` until true), and `next` (edge override by step id) —
- * a small state machine where states are steps, edges are `next` functions,
- * and guards are gates. The cursor itself stays a cursor: skipped steps are
- * never landed on, and skipped/gated behavior is evaluated at transition
- * time, not on every render.
- */
 declare function useGuidedTour(steps: TourStepInput[], opts?: GuidedTourOptions): GuidedTour;
 
 interface FlatChapter {
@@ -549,7 +740,7 @@ declare function StepScrubber({ count, index, toneAt, titleAt, onSeek, emptyHint
      */
     groupOf?: (i: number) => number;
 }): react.JSX.Element;
-declare function PlayerBar({ player, toneAt, titleAt, leading, onEmpty, emptyHint, className, theme, groupOf, labels, }: {
+declare function PlayerBar({ player, toneAt, titleAt, leading, onEmpty, emptyHint, className, theme, groupOf, labels, live, }: {
     player: {
         total: number;
         index: number;
@@ -559,10 +750,18 @@ declare function PlayerBar({ player, toneAt, titleAt, leading, onEmpty, emptyHin
         prev: () => void;
         toggle: (onEmpty?: () => void) => void;
         seek: (frame: number) => void;
+        live?: boolean;
+        goLive?: () => void;
     };
     toneAt?: (i: number) => StepTone;
     titleAt?: (i: number) => string;
     leading?: ReactNode;
+    /**
+     * Show the live-edge badge for a following player (`follow` option):
+     * "Live" at the edge, "Go live" with the frame count when the reader is
+     * behind.
+     */
+    live?: boolean;
     /** Fired when the user plays/steps with no timeline loaded. */
     onEmpty?: () => void;
     emptyHint?: string;
@@ -579,6 +778,8 @@ declare function PlayerBar({ player, toneAt, titleAt, leading, onEmpty, emptyHin
         pause?: string;
         replay?: string;
         next?: string;
+        live?: string;
+        goLive?: string;
     };
 }): react.JSX.Element;
 declare function ChapterNav({ chapters, active, onNavigate, hint, className, theme, }: {
@@ -609,7 +810,7 @@ declare function TourSpotlight({ target, theme, }: {
     target: string | null;
     theme?: StepwiseTheme;
 }): react.JSX.Element | null;
-declare function TourCard({ step, index, total, onNext, onBack, onEnd, labels, className, theme, nextDisabled, }: {
+declare function TourCard({ step, index, total, onNext, onBack, onEnd, labels, className, theme, nextDisabled, feedback, }: {
     step: TourStepInput;
     index: number;
     total: number;
@@ -627,6 +828,8 @@ declare function TourCard({ step, index, total, onNext, onBack, onEnd, labels, c
     theme?: StepwiseTheme;
     /** Disable the primary (Next/Finish) button — pair with tour.blocked. */
     nextDisabled?: boolean;
+    /** Gate feedback ("Stage a file first") — pair with tour.feedback. Announced politely. */
+    feedback?: ReactNode;
 }): react.JSX.Element;
 declare function ShortcutsDialog({ open, onClose, items, title, className, theme, }: {
     open: boolean;
@@ -637,4 +840,4 @@ declare function ShortcutsDialog({ open, onClose, items, title, className, theme
     theme?: StepwiseTheme;
 }): react.ReactPortal | null;
 
-export { type AlignedCell, type AlignedRow, Chapter, ChapterNav, type ChaptersApi, CodeBlock, type Discoveries, type DiscoveriesOptions, type DiscoveryStore, type FlatChapter, type GlobalKeysOptions, GlossaryAppendix, type GlossaryEntry, GlossaryProvider, type GuidedTour, type GuidedTourOptions, type KeyMap, LessonPager, type LessonStream, type LessonStreamOptions, PlayerBar, PlayerEngine, ShortcutItem, ShortcutsDialog, type StepPlayer, type StepPlayerOptions, StepScrubber, StepTone, type StepsCore, StepwiseStep, type StepwiseTheme, type SyncedTracks, type SyncedTracksOptions, TONE_CHIP_CLASS, TONE_SEGMENT_CLASS, Term, TourCard, TourDriver, TourSpotlight, TourStepInput, type TraceBuilder, type TracePlayer, type TrackKeyFn, type TrackView, type Tracks, type UseStepsOptions, alignTracks, cookieStore, createTrace, defaultTheme, flattenChapters, localStorageStore, memoryStore, useChapters, useDiscoveries, useFadeIn, useFocusTrap, useGlobalKeys, useGuidedTour, useLessonStream, usePrefersReducedMotion, useStepPlayer, useSteps, useSyncedTracks, useTrace };
+export { type AlignedCell, type AlignedRow, Chapter, ChapterNav, type ChaptersApi, CodeBlock, type Discoveries, type DiscoveriesOptions, type DiscoveryStore, Evaluator, type EvaluatorOptions, type EvaluatorState, type FlatChapter, type GlobalKeysOptions, GlossaryAppendix, type GlossaryEntry, GlossaryProvider, type GuidedTour, type GuidedTourOptions, type KeyMap, LessonPager, type LessonStream, type LessonStreamOptions, PlayerBar, PlayerEngine, type Rng, ShortcutItem, ShortcutsDialog, type Simulation, type SimulationContext, type SimulationOptions, type SimulationPlayer, type SimulationResult, type SimulationRunOptions, type StepPlayer, type StepPlayerOptions, StepScrubber, StepTone, type StepsCore, StepwiseStep, type StepwiseTheme, type SyncedTracks, type SyncedTracksOptions, TONE_CHIP_CLASS, TONE_SEGMENT_CLASS, Term, TourCard, TourDriver, TourSpotlight, TourStepInput, type TraceBuilder, type TraceOptions, type TracePlayer, type TrackKeyFn, type TrackView, type Tracks, type UseStepsOptions, Verdict, VerdictStatus, alignTracks, cookieStore, createRng, createTrace, defaultTheme, flattenChapters, localStorageStore, memoryStore, readHashParam, reanchor, runSimulation, useChapters, useDiscoveries, useEvaluator, useFadeIn, useFocusTrap, useGlobalKeys, useGuidedTour, useLessonStream, usePrefersReducedMotion, useSimulation, useStepPlayer, useSteps, useSyncedTracks, useTrace, writeHashParam };