# thandonma/padloop-studio architecture

> Architecture diagram of the GitHub repository thandonma/padloop-studio, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/thandonma/padloop-studio
- Repository: https://github.com/thandonma/padloop-studio
- Video tour (about a minute): https://gitdiagram.com/thandonma/padloop-studio/video

## Overview

PadLoop Studio is a browser-based ambient-pad sampler. Users load WAVs onto twelve pitch pads, adjust and key-lock layers, then play sustained loops through a session transport; kits and samples persist locally and can be exported or imported. The graph follows the documented UI → store → library/worker and store → audio-engine paths. Audio helpers and SQLite behavior are supported by sampled source; some feature wiring and UI details come from the README, since their full implementations were not sampled.

Main entry points: [`src/app/audio/audio-engine.service.ts`](https://github.com/thandonma/padloop-studio/blob/main/src/app/audio/audio-engine.service.ts) (Audio engine), [`src/app/storage/library.service.ts`](https://github.com/thandonma/padloop-studio/blob/main/src/app/storage/library.service.ts) (Library service), [`src/app/state/studio.store.ts`](https://github.com/thandonma/padloop-studio/blob/main/src/app/state/studio.store.ts) (Studio store), [`src/app/app.ts`](https://github.com/thandonma/padloop-studio/blob/main/src/app/app.ts) (App shell)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["User interface"]
  node_app["App shell<br/>[app.ts]"]
  node_pads["Pad grid<br/>[pad-grid.ts]"]
  node_inspector["Layer inspector<br/>[pad-inspector.ts]"]
  node_transport["Transport controls<br/>[transport-bar.ts]"]
end

subgraph group_state["Studio state"]
  node_store["Studio store<br/>[studio.store.ts]"]
end

subgraph group_audio["Audio engine"]
  node_keydetect["Key detection<br/>[key-detect.ts]"]
  node_engine["Audio engine"]
  node_loop["Loop processing<br/>[loop.ts]"]
  node_pitch["Pitch calculations<br/>[music.ts]"]
  node_phase["Loop phase<br/>[phase.ts]"]
end

subgraph group_storage["Kit storage"]
  node_library["Library service<br/>[library.service.ts]"]
  node_formats["Audio validation<br/>[audio-formats.ts]"]
  node_wav["WAV inspection<br/>[wav.ts]"]
  node_kitfile["Kit file codec<br/>[kit-file.ts]"]
  node_worker["SQLite worker<br/>[db.worker.ts]"]
  node_schema["Database schema<br/>[schema.ts]"]
end

node_user(("Musician"))
node_browserdb[("Browser database")]
node_speakers(("Audio output"))
node_samplefiles(("Sample and kit files"))

node_user -->|"uses"| node_app
node_app -->|"initializes"| node_store
node_pads -->|"selects and loads"| node_store
node_pads -->|"triggers pads"| node_engine
node_inspector -->|"edits layers"| node_store
node_transport -->|"controls playback"| node_engine
node_app -->|"manages kits"| node_store
node_store -->|"estimates key"| node_keydetect
node_store -->|"reads and saves"| node_library
node_store -->|"syncs layers"| node_engine
node_engine -->|"loads audio"| node_library
node_engine -->|"prepares loops"| node_loop
node_engine -->|"calculates rate"| node_pitch
node_engine -->|"tracks loop phase"| node_phase
node_engine -->|"plays audio"| node_speakers
node_library -->|"checks formats"| node_formats
node_library -->|"inspects WAV"| node_wav
node_library -->|"encodes and decodes"| node_kitfile
node_library -->|"posts requests"| node_worker
node_worker -->|"applies migrations"| node_schema
node_worker -->|"reads and writes"| node_browserdb
node_user -->|"selects files"| node_samplefiles
node_samplefiles -->|"provides sample or kit"| node_library
node_library -->|"downloads kit"| node_samplefiles

click node_app "https://github.com/thandonma/padloop-studio/blob/main/src/app/app.ts"
click node_pads "https://github.com/thandonma/padloop-studio/blob/main/src/app/ui/pad-grid.ts"
click node_inspector "https://github.com/thandonma/padloop-studio/blob/main/src/app/ui/pad-inspector.ts"
click node_transport "https://github.com/thandonma/padloop-studio/blob/main/src/app/ui/transport-bar.ts"
click node_store "https://github.com/thandonma/padloop-studio/blob/main/src/app/state/studio.store.ts"
click node_keydetect "https://github.com/thandonma/padloop-studio/blob/main/src/app/audio/key-detect.ts"
click node_engine "https://github.com/thandonma/padloop-studio/blob/main/src/app/audio/audio-engine.service.ts"
click node_loop "https://github.com/thandonma/padloop-studio/blob/main/src/app/audio/loop.ts"
click node_pitch "https://github.com/thandonma/padloop-studio/blob/main/src/app/audio/music.ts"
click node_phase "https://github.com/thandonma/padloop-studio/blob/main/src/app/audio/phase.ts"
click node_library "https://github.com/thandonma/padloop-studio/blob/main/src/app/storage/library.service.ts"
click node_formats "https://github.com/thandonma/padloop-studio/blob/main/src/app/storage/audio-formats.ts"
click node_wav "https://github.com/thandonma/padloop-studio/blob/main/src/app/storage/wav.ts"
click node_kitfile "https://github.com/thandonma/padloop-studio/blob/main/src/app/storage/kit-file.ts"
click node_worker "https://github.com/thandonma/padloop-studio/blob/main/src/app/storage/db.worker.ts"
click node_schema "https://github.com/thandonma/padloop-studio/blob/main/src/app/storage/schema.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_pads,node_inspector,node_transport toneBlue
class node_store,node_browserdb toneAmber
class node_keydetect,node_engine,node_loop,node_pitch,node_phase toneMint
class node_library,node_formats,node_wav,node_kitfile,node_worker,node_schema toneRose
class node_user,node_speakers,node_samplefiles toneIndigo
```

## Components

### User interface

- [App shell](https://github.com/thandonma/padloop-studio/blob/main/src/app/app.ts): `src/app/app.ts`
- [Pad grid](https://github.com/thandonma/padloop-studio/blob/main/src/app/ui/pad-grid.ts): `src/app/ui/pad-grid.ts`
- [Layer inspector](https://github.com/thandonma/padloop-studio/blob/main/src/app/ui/pad-inspector.ts): `src/app/ui/pad-inspector.ts`
- [Transport controls](https://github.com/thandonma/padloop-studio/blob/main/src/app/ui/transport-bar.ts): `src/app/ui/transport-bar.ts`

### Studio state

- [Studio store](https://github.com/thandonma/padloop-studio/blob/main/src/app/state/studio.store.ts): `src/app/state/studio.store.ts`

### Audio engine

- [Key detection](https://github.com/thandonma/padloop-studio/blob/main/src/app/audio/key-detect.ts): `src/app/audio/key-detect.ts`
- [Audio engine](https://github.com/thandonma/padloop-studio/blob/main/src/app/audio/audio-engine.service.ts): `src/app/audio/audio-engine.service.ts`
- [Loop processing](https://github.com/thandonma/padloop-studio/blob/main/src/app/audio/loop.ts): `src/app/audio/loop.ts`
- [Pitch calculations](https://github.com/thandonma/padloop-studio/blob/main/src/app/audio/music.ts): `src/app/audio/music.ts`
- [Loop phase](https://github.com/thandonma/padloop-studio/blob/main/src/app/audio/phase.ts): `src/app/audio/phase.ts`

### Kit storage

- [Library service](https://github.com/thandonma/padloop-studio/blob/main/src/app/storage/library.service.ts): `src/app/storage/library.service.ts`
- [Audio validation](https://github.com/thandonma/padloop-studio/blob/main/src/app/storage/audio-formats.ts): `src/app/storage/audio-formats.ts`
- [WAV inspection](https://github.com/thandonma/padloop-studio/blob/main/src/app/storage/wav.ts): `src/app/storage/wav.ts`
- [Kit file codec](https://github.com/thandonma/padloop-studio/blob/main/src/app/storage/kit-file.ts): `src/app/storage/kit-file.ts`
- [SQLite worker](https://github.com/thandonma/padloop-studio/blob/main/src/app/storage/db.worker.ts): `src/app/storage/db.worker.ts`
- [Database schema](https://github.com/thandonma/padloop-studio/blob/main/src/app/storage/schema.ts): `src/app/storage/schema.ts`

### Other components

- **Musician**
- **Browser database**
- **Audio output**
- **Sample and kit files**

## Connections

- Musician → App shell: uses
- App shell → Studio store: initializes
- Pad grid → Studio store: selects and loads
- Pad grid → Audio engine: triggers pads
- Layer inspector → Studio store: edits layers
- Transport controls → Audio engine: controls playback
- App shell → Studio store: manages kits
- Studio store → Key detection: estimates key
- Studio store → Library service: reads and saves
- Studio store → Audio engine: syncs layers
- Audio engine → Library service: loads audio
- Audio engine → Loop processing: prepares loops
- Audio engine → Pitch calculations: calculates rate
- Audio engine → Loop phase: tracks loop phase
- Audio engine → Audio output: plays audio
- Library service → Audio validation: checks formats
- Library service → WAV inspection: inspects WAV
- Library service → Kit file codec: encodes and decodes
- Library service → SQLite worker: posts requests
- SQLite worker → Database schema: applies migrations
- SQLite worker → Browser database: reads and writes
- Musician → Sample and kit files: selects files
- Sample and kit files → Library service: provides sample or kit
- Library service → Sample and kit files: downloads kit