# zettca/pacex architecture

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

- Interactive diagram: https://gitdiagram.com/zettca/pacex
- Repository: https://github.com/zettca/pacex

## Overview

PaceX is a browser-based running pace calculator. Users adjust time, distance, or speed with sliders and preset buttons; the selected value is locked while the calculator derives the other values. The route initializes and commits calculator state through URL search parameters. The sampled source supports the main interaction and calculation links; route layout and i18n wiring are represented only where the tree or README supports them.

Main entry points: [`src/components/Main.tsx`](https://github.com/zettca/pacex/blob/master/src/components/Main.tsx) (Calculator controls), [`src/routes/index.tsx`](https://github.com/zettca/pacex/blob/master/src/routes/index.tsx) (Calculator route), [`src/App.tsx`](https://github.com/zettca/pacex/blob/master/src/App.tsx) (App and router), [`src/components/SliderPicker.tsx`](https://github.com/zettca/pacex/blob/master/src/components/SliderPicker.tsx) (Slider picker)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Application shell"]
  node_entry["React entry<br/>[main.tsx]"]
  node_app["App and router<br/>[App.tsx]"]
  node_layout["Route layout<br/>[layout.tsx]"]
end

subgraph group_calculator["Pace calculator"]
  node_route["Calculator route<br/>[index.tsx]"]
  node_main["Calculator controls<br/>[Main.tsx]"]
  node_picker["Slider picker<br/>[SliderPicker.tsx]"]
  node_split["Preset buttons<br/>[SplitButton.tsx]"]
  node_calc["Pace calculations<br/>[useCalc.ts]"]
  node_settings["Slider settings<br/>[useSettings.ts]"]
  node_expand["Slider range<br/>[useSliderExpand.ts]"]
  node_params["URL parameter hook<br/>[useSetParams.ts]"]
  node_formats["Display formatting<br/>[formats.ts]"]
end

subgraph group_localization["Localization"]
  node_i18n["Translation setup<br/>[config.ts]"]
  node_english["English translations<br/>[en.json]"]
  node_portuguese["Portuguese translations<br/>[pt.json]"]
end

node_runner(("Runner"))
node_url["Search parameters"]

node_runner -->|"opens app"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"initializes"| node_i18n
node_app -->|"routes to"| node_layout
node_layout -->|"renders route"| node_route
node_url -->|"provides query"| node_route
node_route -->|"renders with state"| node_main
node_main -->|"renders controls"| node_picker
node_picker -->|"renders presets"| node_split
node_picker -->|"manages range"| node_expand
node_main -->|"calculates values"| node_calc
node_main -->|"gets settings"| node_settings
node_main -->|"formats labels"| node_formats
node_main -->|"commits values"| node_route
node_route -->|"updates query"| node_params
node_params -->|"writes parameters"| node_url
node_i18n -.->|"loads translations"| node_english
node_i18n -.->|"loads translations"| node_portuguese

click node_entry "https://github.com/zettca/pacex/blob/master/src/main.tsx"
click node_app "https://github.com/zettca/pacex/blob/master/src/App.tsx"
click node_layout "https://github.com/zettca/pacex/blob/master/src/routes/layout.tsx"
click node_route "https://github.com/zettca/pacex/blob/master/src/routes/index.tsx"
click node_main "https://github.com/zettca/pacex/blob/master/src/components/Main.tsx"
click node_picker "https://github.com/zettca/pacex/blob/master/src/components/SliderPicker.tsx"
click node_split "https://github.com/zettca/pacex/blob/master/src/components/SplitButton.tsx"
click node_calc "https://github.com/zettca/pacex/blob/master/src/hooks/useCalc.ts"
click node_settings "https://github.com/zettca/pacex/blob/master/src/hooks/useSettings.ts"
click node_expand "https://github.com/zettca/pacex/blob/master/src/hooks/useSliderExpand.ts"
click node_params "https://github.com/zettca/pacex/blob/master/src/hooks/useSetParams.ts"
click node_formats "https://github.com/zettca/pacex/blob/master/src/utils/formats.ts"
click node_i18n "https://github.com/zettca/pacex/blob/master/src/i18n/config.ts"
click node_english "https://github.com/zettca/pacex/blob/master/public/locales/en.json"
click node_portuguese "https://github.com/zettca/pacex/blob/master/public/locales/pt.json"

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_app,node_layout toneBlue
class node_route,node_main,node_picker,node_split,node_calc,node_settings,node_expand,node_params,node_formats toneAmber
class node_i18n,node_english,node_portuguese toneMint
class node_runner,node_url toneIndigo
```

## Components

### Application shell

- [React entry](https://github.com/zettca/pacex/blob/master/src/main.tsx): `src/main.tsx`
- [App and router](https://github.com/zettca/pacex/blob/master/src/App.tsx): `src/App.tsx`
- [Route layout](https://github.com/zettca/pacex/blob/master/src/routes/layout.tsx): `src/routes/layout.tsx`

### Pace calculator

- [Calculator route](https://github.com/zettca/pacex/blob/master/src/routes/index.tsx): `src/routes/index.tsx`
- [Calculator controls](https://github.com/zettca/pacex/blob/master/src/components/Main.tsx): `src/components/Main.tsx`
- [Slider picker](https://github.com/zettca/pacex/blob/master/src/components/SliderPicker.tsx): `src/components/SliderPicker.tsx`
- [Preset buttons](https://github.com/zettca/pacex/blob/master/src/components/SplitButton.tsx): `src/components/SplitButton.tsx`
- [Pace calculations](https://github.com/zettca/pacex/blob/master/src/hooks/useCalc.ts): `src/hooks/useCalc.ts`
- [Slider settings](https://github.com/zettca/pacex/blob/master/src/hooks/useSettings.ts): `src/hooks/useSettings.ts`
- [Slider range](https://github.com/zettca/pacex/blob/master/src/hooks/useSliderExpand.ts): `src/hooks/useSliderExpand.ts`
- [URL parameter hook](https://github.com/zettca/pacex/blob/master/src/hooks/useSetParams.ts): `src/hooks/useSetParams.ts`
- [Display formatting](https://github.com/zettca/pacex/blob/master/src/utils/formats.ts): `src/utils/formats.ts`

### Localization

- [Translation setup](https://github.com/zettca/pacex/blob/master/src/i18n/config.ts): `src/i18n/config.ts`
- [English translations](https://github.com/zettca/pacex/blob/master/public/locales/en.json): `public/locales/en.json`
- [Portuguese translations](https://github.com/zettca/pacex/blob/master/public/locales/pt.json): `public/locales/pt.json`

### Other components

- **Runner**
- **Search parameters**

## Connections

- Runner → React entry: opens app
- React entry → App and router: renders
- App and router → Translation setup: initializes
- App and router → Route layout: routes to
- Route layout → Calculator route: renders route
- Search parameters → Calculator route: provides query
- Calculator route → Calculator controls: renders with state
- Calculator controls → Slider picker: renders controls
- Slider picker → Preset buttons: renders presets
- Slider picker → Slider range: manages range
- Calculator controls → Pace calculations: calculates values
- Calculator controls → Slider settings: gets settings
- Calculator controls → Display formatting: formats labels
- Calculator controls → Calculator route: commits values
- Calculator route → URL parameter hook: updates query
- URL parameter hook → Search parameters: writes parameters
- Translation setup → English translations: loads translations
- Translation setup → Portuguese translations: loads translations