state-charts

XState v5 statecharts + WebGL visualizer for complex system modeling.

What's here

Path	Contents
src/charts/business.ts	Business cybernetic control system — XState v5 machine
src/visualizer/renderer.ts	Three.js WebGL renderer
src/visualizer/layout.ts	Dagre graph layout
src/visualizer/types.ts	Shared types
src/main.ts	App entry point
docs/business.md	Deep documentation of the business model

Running the visualizer

npm install
npm run dev

Open http://localhost:5173 to see the interactive WebGL visualizer.

The Business Statechart

The business.ts statechart models a business as a cybernetic control system — a self-regulating, goal-seeking entity that maintains structural coupling with its environment through continuous feedback.

7 lifecycle states:

• formation → Pre-revenue, hypothesis testing
• growth → PMF found, scaling
• maturity → Stable, optimizing, defending
• decline → Structural erosion
• transformation → Deliberate reinvention (second-order cybernetics)
• crisis → Existential threat, survival mode
• acquired / public / wind_down → Terminal states

Theoretical foundations: Stafford Beer's VSM, Norbert Wiener's cybernetics, Ashby's Law of Requisite Variety.

See docs/business.md for the full conceptual model.

Adding charts

Drop a new *.ts file in src/charts/ following the pattern in business.ts. Each chart exports a createMachine(...) call and optional stateMetadata.