This Site Is A Composition Of State Machines📋

Every interaction on this site — the scroll spy, the headings panel, the sidebar resize, the version-news tooltip, the copy-feedback flash, the keyboard navigation, the mermaid pan/zoom — is driven by one of ~40 pure state machines living under src/lib/ and wired to the DOM through adapters in src/app-shared.ts.

The diagram below proves it. It is generated at build time by walking the TypeScript source with the compiler API, laying the result out with elkjs, and inlining the resulting SVG straight into this page. No JavaScript is required to see it: crawlers, RSS readers, the Firefox reader view, and visitors with scripts disabled all see the same diagram, with every machine name, adapter name and import edge readable as plain text.

When JavaScript is enabled, a tiny hydration adapter attaches click, hover and filter behaviour on top of the same SVG — selection, filtering and the detail panel are themselves driven by four new pure machines: explorer-selection-state, explorer-filter-state, explorer-detail-state and fsm-simulator-state. The explorer is, recursively, a composition of state machines.

Try it live. Double-click any machine node to open its own state diagram in a popover, then click the green event buttons on the right to step through the machine: the active state lights up, fireable transitions turn green, history accumulates at the bottom. Reset replays from the initial state. Drag to pan, scroll to zoom, Esc closes the popover.

How it works📋

1. scripts/extract-state-machines.ts walks src/lib/*.ts with the TypeScript Compiler API and extracts every exported state machine, its state union, and its public methods. It also walks src/app-shared.ts to find every adapter (IIFE module) and which machine factories it references, producing the directed import graph.

2. scripts/render-state-machine-svg.ts loads the JSON, hands it to elkjs for layered layout, then walks the result and emits a self-contained SVG fragment with data-node-id / data-node-kind / data-edge-from attributes on every element.

3. scripts/lib/page-renderer.ts sees include: data/state-machines.svg.html in this page's frontmatter and substitutes the file's contents for the literal token above. The SVG ships inside the static HTML.

4. src/state-machines-explorer.ts runs in the browser, finds the inlined SVG, and attaches interactivity using four pure machines (explorer-selection-state, explorer-filter-state, explorer-detail-state, fsm-simulator-state) plus the existing pan/zoom logic from svg-viewport-state.ts and the modal primitives from machine-popover-state.ts and panel-events.ts. No third-party runtime libraries are loaded — every line of interactivity flows through the same compositional pattern as the rest of the site.

5. src/lib/fsm-simulator-state.ts is the meta cherry: a state machine that replays other state machines. When you double-click a node, attachSimulator reads the per-node data-node-transitions attribute, hands the transition table to a fresh FsmSimulatorMachine, and on every onStateChange tick toggles .msd-state--active on the current state bubble, .msd-transition-group--available on the green arcs, and rebuilds the event button list. The same machine powers the unit tests under test/unit/fsm-simulator-state.test.ts — there is no DOM code in the machine itself.