# abel0x/toolkit architecture

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

- Interactive diagram: https://gitdiagram.com/abel0x/toolkit
- Repository: https://github.com/abel0x/toolkit

## Overview

Toolkit is a static, browser-only collection of developer utilities. Users find a tool in the catalogue, provide input, and get results processed locally; other major capabilities include bilingual pages, offline caching, and themed typing-practice word lists. The graph reflects README-documented relationships and the sampled service-worker behavior; individual tool implementations were not sampled, so their internal calls are not expanded.

Main entry points: [`tools`](https://github.com/abel0x/toolkit/tree/main/tools) (Tool pages), [`assets/js/pages/home.js`](https://github.com/abel0x/toolkit/blob/main/assets/js/pages/home.js) (Tool catalogue), [`assets/js/core/command-palette.js`](https://github.com/abel0x/toolkit/blob/main/assets/js/core/command-palette.js) (Command search), [`assets/js/tools`](https://github.com/abel0x/toolkit/tree/main/assets/js/tools) (Security tools)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Site experience"]
  node_catalogue["Tool catalogue<br/>[home.js]"]
  node_tool_pages["Tool pages"]
  node_finder["Command search<br/>[command-palette.js]"]
end

subgraph group_tools["Utility tools"]
  node_security["Security tools"]
  node_encoding["Encoding tools"]
  node_developer["Developer tools"]
  node_text["Text tools"]
  node_generators["Generators"]
  node_converters["Converters"]
  node_web_media["Web and media"]
end

subgraph group_language["Language and practice"]
  node_language_choice["Language selection"]
  node_translations["Translation runtime<br/>[i18n.js]"]
  node_typing["Typing practice<br/>[typing-test.js]"]
  node_word_lists["Bilingual word lists<br/>[manifest.json]"]
end

subgraph group_offline["Offline delivery"]
  node_service_worker["Offline service worker<br/>[sw.js]"]
  node_cache_storage[("Cache Storage")]
end

node_visitor(("Visitor"))
node_browser_apis["Browser APIs"]

node_visitor -->|"browses"| node_catalogue
node_visitor -->|"searches"| node_finder
node_catalogue -->|"opens tool"| node_tool_pages
node_finder -->|"finds tool"| node_tool_pages
node_visitor -->|"provides input"| node_tool_pages
node_tool_pages -.->|"runs locally"| node_security
node_tool_pages -.->|"runs locally"| node_encoding
node_tool_pages -.->|"runs locally"| node_developer
node_tool_pages -.->|"runs locally"| node_text
node_tool_pages -.->|"runs locally"| node_generators
node_tool_pages -.->|"runs locally"| node_converters
node_tool_pages -.->|"runs locally"| node_web_media
node_security -->|"uses capabilities"| node_browser_apis
node_encoding -->|"uses capabilities"| node_browser_apis
node_developer -.->|"uses capabilities"| node_browser_apis
node_web_media -->|"uses file and canvas APIs"| node_browser_apis
node_visitor -->|"chooses language"| node_language_choice
node_language_choice -.->|"selects translation"| node_translations
node_visitor -->|"practices typing"| node_typing
node_typing -->|"loads selected list"| node_word_lists
node_service_worker -->|"caches site"| node_cache_storage
node_visitor -->|"uses offline site"| node_service_worker

click node_catalogue "https://github.com/abel0x/toolkit/blob/main/assets/js/pages/home.js"
click node_tool_pages "https://github.com/abel0x/toolkit/tree/main/tools"
click node_finder "https://github.com/abel0x/toolkit/blob/main/assets/js/core/command-palette.js"
click node_security "https://github.com/abel0x/toolkit/tree/main/assets/js/tools"
click node_encoding "https://github.com/abel0x/toolkit/tree/main/assets/js/tools"
click node_developer "https://github.com/abel0x/toolkit/tree/main/assets/js/tools"
click node_text "https://github.com/abel0x/toolkit/tree/main/assets/js/tools"
click node_generators "https://github.com/abel0x/toolkit/tree/main/assets/js/tools"
click node_converters "https://github.com/abel0x/toolkit/tree/main/assets/js/tools"
click node_web_media "https://github.com/abel0x/toolkit/tree/main/assets/js/tools"
click node_language_choice "https://github.com/abel0x/toolkit/blob/main/assets/js/core/language-redirect.js"
click node_translations "https://github.com/abel0x/toolkit/blob/main/assets/js/core/i18n.js"
click node_typing "https://github.com/abel0x/toolkit/blob/main/assets/js/tools/typing-test.js"
click node_word_lists "https://github.com/abel0x/toolkit/blob/main/words/manifest.json"
click node_service_worker "https://github.com/abel0x/toolkit/blob/main/sw.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_catalogue,node_tool_pages,node_finder,node_browser_apis toneBlue
class node_security,node_encoding,node_developer,node_text,node_generators,node_converters,node_web_media toneAmber
class node_language_choice,node_translations,node_typing,node_word_lists toneMint
class node_service_worker,node_cache_storage toneRose
class node_visitor toneIndigo
```

## Components

### Site experience

- [Tool catalogue](https://github.com/abel0x/toolkit/blob/main/assets/js/pages/home.js): `assets/js/pages/home.js`
- [Tool pages](https://github.com/abel0x/toolkit/tree/main/tools): `tools`
- [Command search](https://github.com/abel0x/toolkit/blob/main/assets/js/core/command-palette.js): `assets/js/core/command-palette.js`

### Utility tools

- [Security tools](https://github.com/abel0x/toolkit/tree/main/assets/js/tools): `assets/js/tools`
- [Encoding tools](https://github.com/abel0x/toolkit/tree/main/assets/js/tools): `assets/js/tools`
- [Developer tools](https://github.com/abel0x/toolkit/tree/main/assets/js/tools): `assets/js/tools`
- [Text tools](https://github.com/abel0x/toolkit/tree/main/assets/js/tools): `assets/js/tools`
- [Generators](https://github.com/abel0x/toolkit/tree/main/assets/js/tools): `assets/js/tools`
- [Converters](https://github.com/abel0x/toolkit/tree/main/assets/js/tools): `assets/js/tools`
- [Web and media](https://github.com/abel0x/toolkit/tree/main/assets/js/tools): `assets/js/tools`

### Language and practice

- [Language selection](https://github.com/abel0x/toolkit/blob/main/assets/js/core/language-redirect.js): `assets/js/core/language-redirect.js`
- [Translation runtime](https://github.com/abel0x/toolkit/blob/main/assets/js/core/i18n.js): `assets/js/core/i18n.js`
- [Typing practice](https://github.com/abel0x/toolkit/blob/main/assets/js/tools/typing-test.js): `assets/js/tools/typing-test.js`
- [Bilingual word lists](https://github.com/abel0x/toolkit/blob/main/words/manifest.json): `words/manifest.json`

### Offline delivery

- [Offline service worker](https://github.com/abel0x/toolkit/blob/main/sw.js): `sw.js`
- **Cache Storage**

### Other components

- **Visitor**
- **Browser APIs**

## Connections

- Visitor → Tool catalogue: browses (evidence: `README.md`)
- Visitor → Command search: searches (evidence: `README.md`)
- Tool catalogue → Tool pages: opens tool (evidence: `README.md`)
- Command search → Tool pages: finds tool (evidence: `README.md`)
- Visitor → Tool pages: provides input (evidence: `README.md`)
- Tool pages → Security tools: runs locally
- Tool pages → Encoding tools: runs locally
- Tool pages → Developer tools: runs locally
- Tool pages → Text tools: runs locally
- Tool pages → Generators: runs locally
- Tool pages → Converters: runs locally
- Tool pages → Web and media: runs locally
- Security tools → Browser APIs: uses capabilities (evidence: `README.md`)
- Encoding tools → Browser APIs: uses capabilities (evidence: `README.md`)
- Developer tools → Browser APIs: uses capabilities
- Web and media → Browser APIs: uses file and canvas APIs (evidence: `README.md`)
- Visitor → Language selection: chooses language (evidence: `README.md`)
- Language selection → Translation runtime: selects translation
- Visitor → Typing practice: practices typing (evidence: `README.md`)
- Typing practice → Bilingual word lists: loads selected list (evidence: `README.md`)
- Offline service worker → Cache Storage: caches site (evidence: `sw.js`)
- Visitor → Offline service worker: uses offline site (evidence: `README.md`)