# waridosann/pomodorobleach architecture

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

- Interactive diagram: https://gitdiagram.com/waridosann/pomodorobleach
- Repository: https://github.com/waridosann/pomodorobleach

## Overview

Zangetsu is a French, browser-only Pomodoro app. The user configures focus and break intervals, starts a session with an optional intention, and the app records completed focus sessions for the journal and seven-day progress view. Settings and timer history persist locally; personal sword models use separate IndexedDB storage and are rendered in an interactive Three.js scene. The graph covers documented journal, export, audio, accessibility and model-import capabilities; unsampled UI details are linked only where README or indexed references support them.

Main entry points: [`src/App.tsx`](https://github.com/waridosann/pomodorobleach/blob/main/src/App.tsx) (App and Settings UI), [`src/model-store.ts`](https://github.com/waridosann/pomodorobleach/blob/main/src/model-store.ts) (Model Store), [`src/SwordView.tsx`](https://github.com/waridosann/pomodorobleach/blob/main/src/SwordView.tsx) (Sword View), [`src/sword-scene.ts`](https://github.com/waridosann/pomodorobleach/blob/main/src/sword-scene.ts) (3D Sword Scene)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Pomodoro Experience"]
  node_entry["React App Entry<br/>[main.tsx]"]
  node_appui["App and Settings UI<br/>[App.tsx]"]
  node_timer["Timer State Logic<br/>[timer.ts]"]
end

subgraph group_history["Journal and Progress"]
  node_journal["Session Journal<br/>[App.tsx]"]
  node_progress["Progress and Goals<br/>[App.tsx]"]
  node_csv["CSV Export<br/>[App.tsx]"]
end

subgraph group_sword["Interactive Sword"]
  node_swordview["Sword View<br/>[SwordView.tsx]"]
  node_scene["3D Sword Scene<br/>[sword-scene.ts]"]
  node_import["Model Import and Validation<br/>[sword-scene.ts]"]
end

subgraph group_persistence["Local Persistence"]
  node_localmodel[("Model Store<br/>[model-store.ts]")]
  node_localdata[("App Data Storage<br/>[App.tsx]")]
end

subgraph group_media["Sound and Feedback"]
  node_sound["Synthesized Audio<br/>[audio.ts]"]
end

node_user(("User"))
node_browseraudio["Web Audio API"]
node_browserstore["Browser Storage APIs"]
node_browser3d["WebGL and Three.js Runtime"]

node_user -->|"opens app"| node_entry
node_entry -->|"renders"| node_appui
node_appui -->|"updates timer"| node_timer
node_appui -->|"reads and writes"| node_localdata
node_localdata -->|"uses localStorage"| node_browserstore
node_appui -->|"renders"| node_journal
node_appui -->|"renders"| node_progress
node_appui -->|"exports"| node_csv
node_timer -->|"records sessions"| node_journal
node_appui -->|"loads lazily"| node_swordview
node_swordview -->|"creates and updates"| node_scene
node_swordview -->|"reads model"| node_localmodel
node_appui -->|"validates model"| node_import
node_import -->|"saves model"| node_localmodel
node_scene -->|"loads saved model"| node_localmodel
node_localmodel -->|"uses IndexedDB"| node_browserstore
node_scene -->|"renders scene"| node_browser3d
node_appui -->|"controls audio"| node_sound
node_sound -->|"generates tones"| node_browseraudio

click node_entry "https://github.com/waridosann/pomodorobleach/blob/main/src/main.tsx"
click node_appui "https://github.com/waridosann/pomodorobleach/blob/main/src/App.tsx"
click node_timer "https://github.com/waridosann/pomodorobleach/blob/main/src/timer.ts"
click node_journal "https://github.com/waridosann/pomodorobleach/blob/main/src/App.tsx"
click node_progress "https://github.com/waridosann/pomodorobleach/blob/main/src/App.tsx"
click node_csv "https://github.com/waridosann/pomodorobleach/blob/main/src/App.tsx"
click node_swordview "https://github.com/waridosann/pomodorobleach/blob/main/src/SwordView.tsx"
click node_scene "https://github.com/waridosann/pomodorobleach/blob/main/src/sword-scene.ts"
click node_import "https://github.com/waridosann/pomodorobleach/blob/main/src/sword-scene.ts"
click node_localmodel "https://github.com/waridosann/pomodorobleach/blob/main/src/model-store.ts"
click node_localdata "https://github.com/waridosann/pomodorobleach/blob/main/src/App.tsx"
click node_sound "https://github.com/waridosann/pomodorobleach/blob/main/src/audio.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_entry,node_appui,node_timer,node_user toneBlue
class node_journal,node_progress,node_csv,node_browserstore toneAmber
class node_swordview,node_scene,node_import,node_browseraudio toneMint
class node_localmodel,node_localdata toneRose
class node_sound,node_browser3d toneIndigo
```

## Components

### Pomodoro Experience

- [React App Entry](https://github.com/waridosann/pomodorobleach/blob/main/src/main.tsx): `src/main.tsx`
- [App and Settings UI](https://github.com/waridosann/pomodorobleach/blob/main/src/App.tsx): `src/App.tsx`
- [Timer State Logic](https://github.com/waridosann/pomodorobleach/blob/main/src/timer.ts): `src/timer.ts`

### Journal and Progress

- [Session Journal](https://github.com/waridosann/pomodorobleach/blob/main/src/App.tsx): `src/App.tsx`
- [Progress and Goals](https://github.com/waridosann/pomodorobleach/blob/main/src/App.tsx): `src/App.tsx`
- [CSV Export](https://github.com/waridosann/pomodorobleach/blob/main/src/App.tsx): `src/App.tsx`

### Interactive Sword

- [Sword View](https://github.com/waridosann/pomodorobleach/blob/main/src/SwordView.tsx): `src/SwordView.tsx`
- [3D Sword Scene](https://github.com/waridosann/pomodorobleach/blob/main/src/sword-scene.ts): `src/sword-scene.ts`
- [Model Import and Validation](https://github.com/waridosann/pomodorobleach/blob/main/src/sword-scene.ts): `src/sword-scene.ts`

### Local Persistence

- [Model Store](https://github.com/waridosann/pomodorobleach/blob/main/src/model-store.ts): `src/model-store.ts`
- [App Data Storage](https://github.com/waridosann/pomodorobleach/blob/main/src/App.tsx): `src/App.tsx`

### Sound and Feedback

- [Synthesized Audio](https://github.com/waridosann/pomodorobleach/blob/main/src/audio.ts): `src/audio.ts`

### Other components

- **User**
- **Web Audio API**
- **Browser Storage APIs**
- **WebGL and Three.js Runtime**

## Connections

- User → React App Entry: opens app (evidence: `src/main.tsx`)
- React App Entry → App and Settings UI: renders (evidence: `src/main.tsx`)
- App and Settings UI → Timer State Logic: updates timer (evidence: `src/App.tsx`)
- App and Settings UI → App Data Storage: reads and writes (evidence: `README.md`)
- App Data Storage → Browser Storage APIs: uses localStorage (evidence: `README.md`)
- App and Settings UI → Session Journal: renders (evidence: `src/App.tsx`)
- App and Settings UI → Progress and Goals: renders (evidence: `src/App.tsx`)
- App and Settings UI → CSV Export: exports (evidence: `src/App.tsx`)
- Timer State Logic → Session Journal: records sessions (evidence: `src/timer.ts`)
- App and Settings UI → Sword View: loads lazily (evidence: `src/App.tsx`)
- Sword View → 3D Sword Scene: creates and updates (evidence: `src/SwordView.tsx`)
- Sword View → Model Store: reads model (evidence: `src/SwordView.tsx`)
- App and Settings UI → Model Import and Validation: validates model (evidence: `src/App.tsx`)
- Model Import and Validation → Model Store: saves model (evidence: `src/App.tsx`)
- 3D Sword Scene → Model Store: loads saved model (evidence: `src/sword-scene.ts`)
- Model Store → Browser Storage APIs: uses IndexedDB (evidence: `README.md`)
- 3D Sword Scene → WebGL and Three.js Runtime: renders scene (evidence: `src/sword-scene.ts`)
- App and Settings UI → Synthesized Audio: controls audio (evidence: `src/App.tsx`)
- Synthesized Audio → Web Audio API: generates tones (evidence: `README.md`)