kornelszyszka/synesterra

How kornelszyszka/synesterra works

Synesterra is a browser-based rhythm and harmony instrument. A user edits a serializable session in the UI, starts transport explicitly, and hears scheduled rhythm clicks alongside an optional tonal drone; the same clock drives circle, timeline, and polygon visuals. The UI also manages validated local session and appearance preferences, language, and themes. The README documents an installable offline PWA. The graph reflects the README and shown import/call evidence; several runtime details, especially PWA wiring and UI actions in omitted excerpts, were not inspected.

Main entry points: app.ts Instrument controls · engine.ts Audio engine · views.ts SVG views · harmonic-performance.ts Harmonic performance

Components 21

Instrument UI

Instrument controls src/ui/app.ts
Browser entry point src/main.ts

Music Domain

Session model src/domain/session.ts
Rhythm events src/domain/rhythm.ts
Harmony rules src/domain/harmony.ts
Harmonic performance src/domain/harmonic-performance.ts
Note colors src/domain/note-colors.ts

Audio Runtime

Audio engine src/audio/engine.ts
Transport clock src/transport/clock.ts
Look-ahead scheduler src/audio/scheduler.ts
Click voices src/audio/voices.ts
Drone engine src/audio/drone.ts

Visual Preferences

SVG views src/visual/views.ts
Theme palettes src/theme/palette.ts
Base note palette src/theme/note-palette.ts
Translations src/i18n/index.ts

Local Platform

Appearance preferences src/persistence/preferences.ts
Session persistence src/persistence/storage.ts
Offline PWA support src/pwa.ts

Other components

Instrument user
Browser localStorage

Connections 37

Instrument user → Instrument controls: edits and starts README.md
Instrument controls → Session model: updates session src/ui/app.ts
Instrument controls → Audio engine: controls playback src/ui/app.ts
Instrument controls → Session persistence: loads and saves src/ui/app.ts
Instrument controls → Appearance preferences: loads and saves src/ui/app.ts
Instrument controls → SVG views: renders views src/ui/app.ts
Instrument controls → Theme palettes: applies palette src/ui/app.ts
Instrument controls → Translations: translates interface src/ui/app.ts
Session model → Rhythm events: uses cycle math src/domain/session.ts
Session model → Harmony rules: uses chord rules src/domain/session.ts
Session model → Note colors: uses note palette src/domain/session.ts
Harmonic performance → Harmony rules: builds voicings src/domain/harmonic-performance.ts
Harmonic performance → Note colors: colors notes src/domain/harmonic-performance.ts
Harmonic performance → Rhythm events: finds rhythm events src/domain/harmonic-performance.ts
Harmonic performance → Session model: reads progression src/domain/harmonic-performance.ts
Audio engine → Transport clock: configures transport src/audio/engine.ts
Audio engine → Look-ahead scheduler: starts scheduler src/audio/engine.ts
Audio engine → Click voices: creates voices src/audio/engine.ts
Audio engine → Drone engine: updates drone src/audio/engine.ts
Look-ahead scheduler → Transport clock: maps audio time src/audio/scheduler.ts
Look-ahead scheduler → Rhythm events: schedules events src/audio/scheduler.ts
Look-ahead scheduler → Click voices: triggers voices src/audio/scheduler.ts
Drone engine → Harmony rules: uses chord rules src/audio/drone.ts
Drone engine → Note colors: uses note timbres src/audio/drone.ts
SVG views → Rhythm events: draws rhythm src/visual/views.ts
SVG views → Harmonic performance: draws harmonic focus src/visual/views.ts
SVG views → Translations: translates labels src/visual/views.ts
SVG views → Theme palettes: uses visual theme src/visual/views.ts
Theme palettes → Base note palette: uses note colors src/theme/palette.ts
Note colors → Base note palette: uses base colors src/domain/note-colors.ts
Appearance preferences → Theme palettes: uses palettes src/persistence/preferences.ts
Appearance preferences → Translations: uses languages src/persistence/preferences.ts
Session persistence → Browser localStorage: reads and writes src/persistence/storage.ts
Appearance preferences → Browser localStorage: persists preferences
Browser entry point → Instrument controls: starts interface src/main.ts
Browser entry point → Offline PWA support: initializes support src/main.ts
Offline PWA support → Browser localStorage: caches offline shell

More TypeScript diagrams: peakflo/20x · rivet-dev/open-orange · seanghay/sone · steveyout/freebies · superjack2050/1688-cli

Drawn by GitDiagram on September 30, 2026 from the repository's file tree, README and source files. Read as Markdown ·