# bombshell-dev/ui architecture

> Architecture diagram of the GitHub repository bombshell-dev/ui, 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/bombshell-dev/ui
- Repository: https://github.com/bombshell-dev/ui

## Overview

This workspace centers on `@clack/ui`, a web-based TUI engine whose DOM implementation, layout, and rendering are coordinated by its UI layer. The README describes framework-facing web bindings and an underlying terminal renderer, but the sampled source does not show those external integrations, so they are not drawn as runtime edges. The separate Web Platform Tests package is compatibility-test infrastructure rather than a documented product capability and is omitted. Relationships shown below are supported by the source index; unsampled behavior is not inferred.

Main entry points: [`packages/ui/src/dom.ts`](https://github.com/bombshell-dev/ui/blob/main/packages/ui/src/dom.ts) (DOM Model), [`packages/ui/src/ui.ts`](https://github.com/bombshell-dev/ui/blob/main/packages/ui/src/ui.ts) (UI Coordinator), [`packages/ui/src/named-node-map.ts`](https://github.com/bombshell-dev/ui/blob/main/packages/ui/src/named-node-map.ts) (Named Attributes), [`packages/ui/src/layout.ts`](https://github.com/bombshell-dev/ui/blob/main/packages/ui/src/layout.ts) (Layout)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_engine["UI Engine"]
  node_ui["UI Coordinator<br/>[ui.ts]"]
  node_layout["Layout<br/>[layout.ts]"]
  node_render["Terminal Rendering<br/>[render.ts]"]
end

subgraph group_dom["DOM Runtime"]
  node_dommodel["DOM Model<br/>[dom.ts]"]
  node_attributes["Named Attributes<br/>[named-node-map.ts]"]
end

subgraph group_support["DOM Support"]
  node_validation["Name Validation<br/>[validation.ts]"]
  node_ascii["ASCII Case<br/>[ascii.ts]"]
end

node_app(("Application"))

node_app -.->|"uses"| node_ui
node_ui -->|"coordinates"| node_dommodel
node_ui -->|"requests layout"| node_layout
node_ui -->|"requests rendering"| node_render
node_layout -->|"reads DOM"| node_dommodel
node_dommodel -->|"creates map"| node_attributes
node_dommodel -->|"normalizes case"| node_ascii
node_dommodel -->|"validates names"| node_validation
node_attributes -->|"validates attributes"| node_validation
node_attributes -->|"normalizes case"| node_ascii

click node_ui "https://github.com/bombshell-dev/ui/blob/main/packages/ui/src/ui.ts"
click node_layout "https://github.com/bombshell-dev/ui/blob/main/packages/ui/src/layout.ts"
click node_render "https://github.com/bombshell-dev/ui/blob/main/packages/ui/src/render.ts"
click node_dommodel "https://github.com/bombshell-dev/ui/blob/main/packages/ui/src/dom.ts"
click node_attributes "https://github.com/bombshell-dev/ui/blob/main/packages/ui/src/named-node-map.ts"
click node_validation "https://github.com/bombshell-dev/ui/blob/main/packages/ui/src/validation.ts"
click node_ascii "https://github.com/bombshell-dev/ui/blob/main/packages/ui/src/ascii.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_ui,node_layout,node_render toneBlue
class node_dommodel,node_attributes toneAmber
class node_validation,node_ascii toneMint
class node_app toneIndigo
```

## Components

### UI Engine

- [UI Coordinator](https://github.com/bombshell-dev/ui/blob/main/packages/ui/src/ui.ts): `packages/ui/src/ui.ts`
- [Layout](https://github.com/bombshell-dev/ui/blob/main/packages/ui/src/layout.ts): `packages/ui/src/layout.ts`
- [Terminal Rendering](https://github.com/bombshell-dev/ui/blob/main/packages/ui/src/render.ts): `packages/ui/src/render.ts`

### DOM Runtime

- [DOM Model](https://github.com/bombshell-dev/ui/blob/main/packages/ui/src/dom.ts): `packages/ui/src/dom.ts`
- [Named Attributes](https://github.com/bombshell-dev/ui/blob/main/packages/ui/src/named-node-map.ts): `packages/ui/src/named-node-map.ts`

### DOM Support

- [Name Validation](https://github.com/bombshell-dev/ui/blob/main/packages/ui/src/validation.ts): `packages/ui/src/validation.ts`
- [ASCII Case](https://github.com/bombshell-dev/ui/blob/main/packages/ui/src/ascii.ts): `packages/ui/src/ascii.ts`

### Other components

- **Application**

## Connections

- Application → UI Coordinator: uses
- UI Coordinator → DOM Model: coordinates (evidence: `packages/ui/src/ui.ts`)
- UI Coordinator → Layout: requests layout (evidence: `packages/ui/src/ui.ts`)
- UI Coordinator → Terminal Rendering: requests rendering (evidence: `packages/ui/src/ui.ts`)
- Layout → DOM Model: reads DOM (evidence: `packages/ui/src/layout.ts`)
- DOM Model → Named Attributes: creates map (evidence: `packages/ui/src/dom.ts`)
- DOM Model → ASCII Case: normalizes case (evidence: `packages/ui/src/dom.ts`)
- DOM Model → Name Validation: validates names (evidence: `packages/ui/src/dom.ts`)
- Named Attributes → Name Validation: validates attributes (evidence: `packages/ui/src/named-node-map.ts`)
- Named Attributes → ASCII Case: normalizes case (evidence: `packages/ui/src/named-node-map.ts`)