# vsprabhu369/blink-20 architecture

> Architecture diagram of the GitHub repository vsprabhu369/blink-20, 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/vsprabhu369/blink-20
- Repository: https://github.com/vsprabhu369/blink-20

## Overview

This is a client-side work/rest interval timer with scheduling, session summaries and history, configurable audio/voice/vibration cues, themes, and PWA installation support. The main workflow is user interaction with the App, which owns timer state and coordinates the timer display, interval controls, session summary, and history. Settings panels expose configuration for scheduling, themes, and alerts. Edges are limited to relationships shown by the source index or excerpts; several App internals and unsampled panel interactions are not mapped in detail.

Main entry points: [`src/App.tsx`](https://github.com/vsprabhu369/blink-20/blob/main/src/App.tsx) (App coordinator), [`src/themes.ts`](https://github.com/vsprabhu369/blink-20/blob/main/src/themes.ts) (Theme definitions), [`src/utils/formatTime.ts`](https://github.com/vsprabhu369/blink-20/blob/main/src/utils/formatTime.ts) (Time formatting), [`src/components/TimerRing.tsx`](https://github.com/vsprabhu369/blink-20/blob/main/src/components/TimerRing.tsx) (Timer display)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Timer experience"]
  node_app["App coordinator<br/>[App.tsx]"]
  node_timer["Timer display<br/>[TimerRing.tsx]"]
  node_interval["Interval controls"]
  node_history["Session history<br/>[HistoryPanel.tsx]"]
  node_summary["Session summary"]
end

subgraph group_settings["Configuration"]
  node_schedule["Schedule and theme"]
  node_audio_panel["Audio and voice settings"]
  node_pwa_button["Install control"]
  node_pwa_hook["Install state<br/>[usePWAInstall.ts]"]
end

subgraph group_feedback["Session and alerts"]
  node_sound["Sound and speech engine<br/>[soundEngine.ts]"]
end

subgraph group_shared["Shared logic"]
  node_themes["Theme definitions<br/>[themes.ts]"]
  node_format["Time formatting<br/>[formatTime.ts]"]
  node_types["Timer data types<br/>[types.ts]"]
end

node_user(("Timer user"))

node_user -.->|"controls"| node_app
node_app -->|"renders"| node_timer
node_app -->|"renders"| node_interval
node_app -->|"renders"| node_history
node_app -->|"renders"| node_summary
node_app -->|"renders"| node_schedule
node_app -->|"renders"| node_audio_panel
node_app -->|"renders"| node_pwa_button
node_pwa_button -->|"uses install state"| node_pwa_hook
node_audio_panel -->|"tests cues"| node_sound
node_app -->|"parses schedule time"| node_format
node_timer -->|"formats countdown"| node_format
node_interval -->|"formats intervals"| node_format
node_history -->|"formats session times"| node_format
node_summary -->|"formats summary"| node_format
node_app -->|"uses themes"| node_themes
node_timer -->|"uses theme styles"| node_themes
node_interval -->|"uses theme styles"| node_themes
node_history -->|"uses theme styles"| node_themes
node_summary -->|"uses theme styles"| node_themes
node_schedule -->|"selects themes"| node_themes
node_audio_panel -->|"uses theme styles"| node_themes
node_app -->|"uses settings types"| node_types
node_sound -->|"uses cue identifiers"| node_types

click node_app "https://github.com/vsprabhu369/blink-20/blob/main/src/App.tsx"
click node_timer "https://github.com/vsprabhu369/blink-20/blob/main/src/components/TimerRing.tsx"
click node_interval "https://github.com/vsprabhu369/blink-20/blob/main/src/components/IntervalCustomizer.tsx"
click node_history "https://github.com/vsprabhu369/blink-20/blob/main/src/components/HistoryPanel.tsx"
click node_summary "https://github.com/vsprabhu369/blink-20/blob/main/src/components/SessionSummaryModal.tsx"
click node_schedule "https://github.com/vsprabhu369/blink-20/blob/main/src/components/ScheduleThemePanel.tsx"
click node_audio_panel "https://github.com/vsprabhu369/blink-20/blob/main/src/components/AudioVoicePanel.tsx"
click node_pwa_button "https://github.com/vsprabhu369/blink-20/blob/main/src/components/PWAInstallButton.tsx"
click node_pwa_hook "https://github.com/vsprabhu369/blink-20/blob/main/src/hooks/usePWAInstall.ts"
click node_sound "https://github.com/vsprabhu369/blink-20/blob/main/src/audio/soundEngine.ts"
click node_themes "https://github.com/vsprabhu369/blink-20/blob/main/src/themes.ts"
click node_format "https://github.com/vsprabhu369/blink-20/blob/main/src/utils/formatTime.ts"
click node_types "https://github.com/vsprabhu369/blink-20/blob/main/src/types.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_timer,node_interval,node_history,node_summary,node_user toneBlue
class node_schedule,node_audio_panel,node_pwa_button,node_pwa_hook toneAmber
class node_sound toneMint
class node_themes,node_format,node_types toneRose
```

## Components

### Timer experience

- [App coordinator](https://github.com/vsprabhu369/blink-20/blob/main/src/App.tsx): `src/App.tsx`
- [Timer display](https://github.com/vsprabhu369/blink-20/blob/main/src/components/TimerRing.tsx): `src/components/TimerRing.tsx`
- [Interval controls](https://github.com/vsprabhu369/blink-20/blob/main/src/components/IntervalCustomizer.tsx): `src/components/IntervalCustomizer.tsx`
- [Session history](https://github.com/vsprabhu369/blink-20/blob/main/src/components/HistoryPanel.tsx): `src/components/HistoryPanel.tsx`
- [Session summary](https://github.com/vsprabhu369/blink-20/blob/main/src/components/SessionSummaryModal.tsx): `src/components/SessionSummaryModal.tsx`

### Configuration

- [Schedule and theme](https://github.com/vsprabhu369/blink-20/blob/main/src/components/ScheduleThemePanel.tsx): `src/components/ScheduleThemePanel.tsx`
- [Audio and voice settings](https://github.com/vsprabhu369/blink-20/blob/main/src/components/AudioVoicePanel.tsx): `src/components/AudioVoicePanel.tsx`
- [Install control](https://github.com/vsprabhu369/blink-20/blob/main/src/components/PWAInstallButton.tsx): `src/components/PWAInstallButton.tsx`
- [Install state](https://github.com/vsprabhu369/blink-20/blob/main/src/hooks/usePWAInstall.ts): `src/hooks/usePWAInstall.ts`

### Session and alerts

- [Sound and speech engine](https://github.com/vsprabhu369/blink-20/blob/main/src/audio/soundEngine.ts): `src/audio/soundEngine.ts`

### Shared logic

- [Theme definitions](https://github.com/vsprabhu369/blink-20/blob/main/src/themes.ts): `src/themes.ts`
- [Time formatting](https://github.com/vsprabhu369/blink-20/blob/main/src/utils/formatTime.ts): `src/utils/formatTime.ts`
- [Timer data types](https://github.com/vsprabhu369/blink-20/blob/main/src/types.ts): `src/types.ts`

### Other components

- **Timer user**

## Connections

- Timer user → App coordinator: controls
- App coordinator → Timer display: renders (evidence: `src/App.tsx`)
- App coordinator → Interval controls: renders (evidence: `src/App.tsx`)
- App coordinator → Session history: renders (evidence: `src/App.tsx`)
- App coordinator → Session summary: renders (evidence: `src/App.tsx`)
- App coordinator → Schedule and theme: renders (evidence: `src/App.tsx`)
- App coordinator → Audio and voice settings: renders (evidence: `src/App.tsx`)
- App coordinator → Install control: renders (evidence: `src/App.tsx`)
- Install control → Install state: uses install state (evidence: `src/components/PWAInstallButton.tsx`)
- Audio and voice settings → Sound and speech engine: tests cues (evidence: `src/components/AudioVoicePanel.tsx`)
- App coordinator → Time formatting: parses schedule time (evidence: `src/App.tsx`)
- Timer display → Time formatting: formats countdown (evidence: `src/components/TimerRing.tsx`)
- Interval controls → Time formatting: formats intervals (evidence: `src/components/IntervalCustomizer.tsx`)
- Session history → Time formatting: formats session times (evidence: `src/components/HistoryPanel.tsx`)
- Session summary → Time formatting: formats summary (evidence: `src/components/SessionSummaryModal.tsx`)
- App coordinator → Theme definitions: uses themes (evidence: `src/App.tsx`)
- Timer display → Theme definitions: uses theme styles (evidence: `src/components/TimerRing.tsx`)
- Interval controls → Theme definitions: uses theme styles (evidence: `src/components/IntervalCustomizer.tsx`)
- Session history → Theme definitions: uses theme styles (evidence: `src/components/HistoryPanel.tsx`)
- Session summary → Theme definitions: uses theme styles (evidence: `src/components/SessionSummaryModal.tsx`)
- Schedule and theme → Theme definitions: selects themes (evidence: `src/components/ScheduleThemePanel.tsx`)
- Audio and voice settings → Theme definitions: uses theme styles (evidence: `src/components/AudioVoicePanel.tsx`)
- App coordinator → Timer data types: uses settings types (evidence: `src/App.tsx`)
- Sound and speech engine → Timer data types: uses cue identifiers (evidence: `src/audio/soundEngine.ts`)