# gsnlog/irhcd2 architecture

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

- Interactive diagram: https://gitdiagram.com/gsnlog/irhcd2
- Repository: https://github.com/gsnlog/irhcd2

## Overview

#### Purpose and Entry Point
IRHCD2 is a static, browser-based calculator/reporting application. `index.html` is the application entry point, loading the UI structure, stylesheets, and JavaScript modules; no server-side runtime or build system is present.

#### Presentation Layer
The interface is defined in `index.html` and styled through shared and feature-specific CSS:
- `css/styles.css`
- `css/sidebar.css`
- `css/ribbon.css`
- `css/theme.css`

These files establish the main application layout, navigation/sidebar behavior, ribbon-style controls, and visual theme boundary.

#### Application Bootstrap and Control Flow
`js/app.js` is the likely browser bootstrap/orchestration layer. It connects page lifecycle events and user actions to the UI, calculator, data, and export components. The primary control flow is browser interaction → application coordination → calculation/data processing → UI update or export.

Grounding paths:
- `js/app.js`
- `index.html`

#### UI State and Interaction Management
`js/ui-manager.js` owns presentation-oriented behavior: reading user inputs, updating visible outputs, and managing UI state or navigation. It separates DOM-facing work from computational logic, keeping calculator code independent of page structure.

Grounding paths:
- `js/ui-manager.js`
- `index.html`
- `css/sidebar.css`

#### Calculation Domain
`js/calculator.js` is the core computation boundary. It should receive normalized inputs from the application/UI layer and return calculated results rather than directly owning rendering. This is the primary domain-logic stage and likely feeds both displayed values and generated reports.

Grounding paths:
- `js/calculator.js`
- `js/app.js`

#### Data and Shared Utilities
`js/data.js` provides application data, constants, lookup tables, or default values consumed by calculations and UI initialization. `js/utils.js` contains cross-cutting reusable helpers, reducing duplication across the orchestration, calculation, and reporting modules.

Grounding paths:
- `js/data.js`
- `js/utils.js`
- `js/calculator.js`

#### Reporting and Export Boundary
`js/report-exporter.js` converts calculated/application state into an exportable report. It is downstream of calculation and should remain distinct from interactive UI rendering, allowing the same result data to support both on-screen display and document/report output.

Grounding paths:
- `js/report-exporter.js`
- `js/calculator.js`
- `js/ui-manager.js`

#### Runtime and External Dependencies
The repository is client-side only: HTML, CSS, and JavaScript execute in a web browser. No backend services, database, deployment infrastructure, package manifest, or explicit third-party dependencies are represented in the supplied tree. Export behavior, if it creates files or print output, runs through browser capabilities.

Main entry points: [`index.html`](https://github.com/gsnlog/irhcd2/blob/main/index.html) (Application Page), [`js/ui-manager.js`](https://github.com/gsnlog/irhcd2/blob/main/js/ui-manager.js) (UI Manager), [`js/calculator.js`](https://github.com/gsnlog/irhcd2/blob/main/js/calculator.js) (Calculator), [`js/app.js`](https://github.com/gsnlog/irhcd2/blob/main/js/app.js) (App Coordinator)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_presentation["Presentation"]
  node_entry["Application Page<br/>HTML entry point<br/>[index.html]"]
  node_styles["Shared Layout Styles<br/>CSS<br/>[styles.css]"]
  node_sidebar_styles["Sidebar Styles<br/>CSS<br/>[sidebar.css]"]
  node_ribbon_styles["Ribbon Styles<br/>CSS<br/>[ribbon.css]"]
  node_theme["Theme Styles<br/>CSS<br/>[theme.css]"]
end

subgraph group_application["Application Logic"]
  node_app["App Coordinator<br/>browser bootstrap<br/>[app.js]"]
  node_ui["UI Manager<br/>DOM state manager<br/>[ui-manager.js]"]
  node_exporter["Report Exporter<br/>report generator<br/>[report-exporter.js]"]
end

subgraph group_domain["Calculation &amp; Data"]
  node_calculator{{"Calculator<br/>domain logic<br/>[calculator.js]"}}
  node_data[("Application Data<br/>constants and lookups<br/>[data.js]")]
  node_utils["Shared Utilities<br/>utility module<br/>[utils.js]"]
end

node_browser(("Web Browser<br/>runtime"))

node_browser -->|"loads"| node_entry
node_entry -->|"applies"| node_styles
node_entry -->|"applies"| node_sidebar_styles
node_entry -->|"applies"| node_ribbon_styles
node_entry -->|"applies"| node_theme
node_entry -->|"loads"| node_app
node_entry -->|"loads"| node_ui
node_app -->|"coordinates interaction"| node_ui
node_ui -->|"normalized inputs"| node_calculator
node_calculator -->|"calculated results"| node_ui
node_data -->|"lookups and defaults"| node_calculator
node_utils -.->|"shared helpers"| node_app
node_utils -.->|"shared helpers"| node_calculator
node_app -->|"export request"| node_exporter
node_calculator -->|"results"| node_exporter
node_ui -->|"report state"| node_exporter
node_exporter -->|"file or print output"| node_browser

click node_entry "https://github.com/gsnlog/irhcd2/blob/main/index.html"
click node_styles "https://github.com/gsnlog/irhcd2/blob/main/css/styles.css"
click node_sidebar_styles "https://github.com/gsnlog/irhcd2/blob/main/css/sidebar.css"
click node_ribbon_styles "https://github.com/gsnlog/irhcd2/blob/main/css/ribbon.css"
click node_theme "https://github.com/gsnlog/irhcd2/blob/main/css/theme.css"
click node_app "https://github.com/gsnlog/irhcd2/blob/main/js/app.js"
click node_ui "https://github.com/gsnlog/irhcd2/blob/main/js/ui-manager.js"
click node_calculator "https://github.com/gsnlog/irhcd2/blob/main/js/calculator.js"
click node_data "https://github.com/gsnlog/irhcd2/blob/main/js/data.js"
click node_utils "https://github.com/gsnlog/irhcd2/blob/main/js/utils.js"
click node_exporter "https://github.com/gsnlog/irhcd2/blob/main/js/report-exporter.js"

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_styles,node_sidebar_styles,node_ribbon_styles,node_theme toneBlue
class node_app,node_ui,node_exporter toneAmber
class node_calculator,node_data,node_utils toneMint
class node_browser toneNeutral
```

## Components

### Presentation

- [Application Page](https://github.com/gsnlog/irhcd2/blob/main/index.html): HTML entry point · Loads the static interface, styles, and scripts. · `index.html`
- [Shared Layout Styles](https://github.com/gsnlog/irhcd2/blob/main/css/styles.css): CSS · `css/styles.css`
- [Sidebar Styles](https://github.com/gsnlog/irhcd2/blob/main/css/sidebar.css): CSS · `css/sidebar.css`
- [Ribbon Styles](https://github.com/gsnlog/irhcd2/blob/main/css/ribbon.css): CSS · `css/ribbon.css`
- [Theme Styles](https://github.com/gsnlog/irhcd2/blob/main/css/theme.css): CSS · `css/theme.css`

### Application Logic

- [App Coordinator](https://github.com/gsnlog/irhcd2/blob/main/js/app.js): browser bootstrap · Routes lifecycle events and user actions across components. · `js/app.js`
- [UI Manager](https://github.com/gsnlog/irhcd2/blob/main/js/ui-manager.js): DOM state manager · Reads inputs and updates visible state and results. · `js/ui-manager.js`
- [Report Exporter](https://github.com/gsnlog/irhcd2/blob/main/js/report-exporter.js): report generator · Creates exportable reports from calculated application state. · `js/report-exporter.js`

### Calculation & Data

- [Calculator](https://github.com/gsnlog/irhcd2/blob/main/js/calculator.js): domain logic · Transforms normalized inputs into calculated results. · `js/calculator.js`
- [Application Data](https://github.com/gsnlog/irhcd2/blob/main/js/data.js): constants and lookups · `js/data.js`
- [Shared Utilities](https://github.com/gsnlog/irhcd2/blob/main/js/utils.js): utility module · `js/utils.js`

### Other components

- **Web Browser**: runtime · Client-side runtime and export capabilities.

## Connections

- Web Browser → Application Page: loads
- Application Page → Shared Layout Styles: applies
- Application Page → Sidebar Styles: applies
- Application Page → Ribbon Styles: applies
- Application Page → Theme Styles: applies
- Application Page → App Coordinator: loads
- Application Page → UI Manager: loads
- App Coordinator → UI Manager: coordinates interaction
- UI Manager → Calculator: normalized inputs
- Calculator → UI Manager: calculated results
- Application Data → Calculator: lookups and defaults
- Shared Utilities → App Coordinator: shared helpers
- Shared Utilities → Calculator: shared helpers
- App Coordinator → Report Exporter: export request
- Calculator → Report Exporter: results
- UI Manager → Report Exporter: report state
- Report Exporter → Web Browser: file or print output