# abraham-ny/quartz architecture

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

- Interactive diagram: https://gitdiagram.com/abraham-ny/quartz
- Repository: https://github.com/abraham-ny/quartz

## Overview

Origin is a modular rendering engine whose documented workflow is to parse a document, apply CSS styles, calculate layout, and paint a frame; its engine also coordinates networking and JavaScript execution. The graph preserves the separate script parsing, compilation, and runtime layers, plus standalone downloads. The rendering and engine excerpts show the principal calls, but some components have conflicting or incomplete implementations, so uncertain wiring is omitted.

Main entry points: [`Origin.Core/Engine_Final.cs`](https://github.com/abraham-ny/quartz/blob/main/Origin.Core/Engine_Final.cs) (Origin engine), [`Origin.Styling/StyleContext.cs`](https://github.com/abraham-ny/quartz/blob/main/Origin.Styling/StyleContext.cs) (Style context), [`Origin.Rendering/RenderPipeline.cs`](https://github.com/abraham-ny/quartz/blob/main/Origin.Rendering/RenderPipeline.cs) (Render pipeline), [`Origin.Vostro/VostroEngine.cs`](https://github.com/abraham-ny/quartz/blob/main/Origin.Vostro/VostroEngine.cs) (JavaScript engine)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_engine["Engine orchestration"]
  node_origin["Origin engine<br/>[Engine_Final.cs]"]
end

subgraph group_document["Document model"]
  node_dom_parser["HTML parser<br/>[HTMLParser.cs]"]
  node_document_model["Document<br/>[Document.cs]"]
  node_element["Element tree<br/>[Element.cs]"]
end

subgraph group_styling["CSS styling"]
  node_style_context["Style context<br/>[StyleContext.cs]"]
  node_css_parser["CSS parser<br/>[CssParser.cs]"]
  node_css_rule_parser["CSS rule parser<br/>[CssRuleParser.cs]"]
  node_selector_matcher["Selector matcher<br/>[SelectorMatcher.cs]"]
  node_media_query["Media queries<br/>[MediaQuery.cs]"]
end

subgraph group_rendering["Rendering"]
  node_render_pipeline["Render pipeline<br/>[RenderPipeline.cs]"]
  node_layout_engine["Layout engine<br/>[LayoutEngine.cs]"]
  node_flex_layout["Flex layout"]
  node_paint_engine["Paint engine<br/>[PaintEngine.cs]"]
end

subgraph group_integrations["Script and network"]
  node_vostro_engine["JavaScript engine<br/>[VostroEngine.cs]"]
  node_js_parser["JavaScript parser"]
  node_ast_nodes["Syntax tree<br/>[Nodes.cs]"]
  node_jit_compiler["JIT compiler<br/>[JITCompiler.cs]"]
  node_v8_context["V8 context<br/>[V8Context.cs]"]
  node_network_manager["Network manager<br/>[NetworkManager.cs]"]
  node_download_manager["Download manager<br/>[DownloadManager.cs]"]
end

node_user(("Application user"))
node_http_service(("HTTP service"))

node_user -->|"starts"| node_origin
node_origin -->|"processes requests"| node_network_manager
node_origin -->|"runs tasks"| node_vostro_engine
node_origin -->|"renders frame"| node_render_pipeline
node_dom_parser -->|"builds document"| node_document_model
node_document_model -->|"contains tree"| node_element
node_render_pipeline -->|"recalculates styles"| node_style_context
node_style_context -->|"styles elements"| node_element
node_render_pipeline -->|"calculates layout"| node_layout_engine
node_layout_engine -->|"delegates flex"| node_flex_layout
node_render_pipeline -->|"paints layout"| node_paint_engine
node_vostro_engine -->|"compiles script"| node_jit_compiler
node_jit_compiler -.->|"parses script"| node_js_parser
node_js_parser -.->|"builds syntax tree"| node_ast_nodes
node_vostro_engine -->|"executes code"| node_v8_context
node_network_manager -->|"sends requests"| node_http_service
node_download_manager -.->|"downloads content"| node_http_service
node_css_parser -.->|"parses rules"| node_css_rule_parser
node_style_context -.->|"matches selectors"| node_selector_matcher
node_style_context -.->|"checks conditions"| node_media_query

click node_origin "https://github.com/abraham-ny/quartz/blob/main/Origin.Core/Engine_Final.cs"
click node_dom_parser "https://github.com/abraham-ny/quartz/blob/main/Origin.DOM/HTMLParser.cs"
click node_document_model "https://github.com/abraham-ny/quartz/blob/main/Origin.DOM/Document.cs"
click node_element "https://github.com/abraham-ny/quartz/blob/main/Origin.DOM/Element.cs"
click node_style_context "https://github.com/abraham-ny/quartz/blob/main/Origin.Styling/StyleContext.cs"
click node_css_parser "https://github.com/abraham-ny/quartz/blob/main/Origin.Styling/CssParser.cs"
click node_css_rule_parser "https://github.com/abraham-ny/quartz/blob/main/Origin.Styling/CssRuleParser.cs"
click node_selector_matcher "https://github.com/abraham-ny/quartz/blob/main/Origin.Styling/SelectorMatcher.cs"
click node_media_query "https://github.com/abraham-ny/quartz/blob/main/Origin.Styling/MediaQuery.cs"
click node_render_pipeline "https://github.com/abraham-ny/quartz/blob/main/Origin.Rendering/RenderPipeline.cs"
click node_layout_engine "https://github.com/abraham-ny/quartz/blob/main/Origin.Rendering/LayoutEngine.cs"
click node_flex_layout "https://github.com/abraham-ny/quartz/blob/main/Origin.Rendering/FlexLayoutEngine.cs"
click node_paint_engine "https://github.com/abraham-ny/quartz/blob/main/Origin.Rendering/PaintEngine.cs"
click node_vostro_engine "https://github.com/abraham-ny/quartz/blob/main/Origin.Vostro/VostroEngine.cs"
click node_js_parser "https://github.com/abraham-ny/quartz/blob/main/Origin.Vostro/Parser/JavaScriptParser.cs"
click node_ast_nodes "https://github.com/abraham-ny/quartz/blob/main/Origin.Vostro/Parser/AST/Nodes.cs"
click node_jit_compiler "https://github.com/abraham-ny/quartz/blob/main/Origin.Vostro/Compiler/JITCompiler.cs"
click node_v8_context "https://github.com/abraham-ny/quartz/blob/main/Origin.Vostro/Runtime/V8Context.cs"
click node_network_manager "https://github.com/abraham-ny/quartz/blob/main/Origin.Networking/NetworkManager.cs"
click node_download_manager "https://github.com/abraham-ny/quartz/blob/main/Origin.Networking/DownloadManager.cs"

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_origin,node_user toneBlue
class node_dom_parser,node_document_model,node_element toneAmber
class node_style_context,node_css_parser,node_css_rule_parser,node_selector_matcher,node_media_query toneMint
class node_render_pipeline,node_layout_engine,node_flex_layout,node_paint_engine toneRose
class node_vostro_engine,node_js_parser,node_ast_nodes,node_jit_compiler,node_v8_context,node_network_manager,node_download_manager,node_http_service toneIndigo
```

## Components

### Engine orchestration

- [Origin engine](https://github.com/abraham-ny/quartz/blob/main/Origin.Core/Engine_Final.cs): `Origin.Core/Engine_Final.cs`

### Document model

- [HTML parser](https://github.com/abraham-ny/quartz/blob/main/Origin.DOM/HTMLParser.cs): `Origin.DOM/HTMLParser.cs`
- [Document](https://github.com/abraham-ny/quartz/blob/main/Origin.DOM/Document.cs): `Origin.DOM/Document.cs`
- [Element tree](https://github.com/abraham-ny/quartz/blob/main/Origin.DOM/Element.cs): `Origin.DOM/Element.cs`

### CSS styling

- [Style context](https://github.com/abraham-ny/quartz/blob/main/Origin.Styling/StyleContext.cs): `Origin.Styling/StyleContext.cs`
- [CSS parser](https://github.com/abraham-ny/quartz/blob/main/Origin.Styling/CssParser.cs): `Origin.Styling/CssParser.cs`
- [CSS rule parser](https://github.com/abraham-ny/quartz/blob/main/Origin.Styling/CssRuleParser.cs): `Origin.Styling/CssRuleParser.cs`
- [Selector matcher](https://github.com/abraham-ny/quartz/blob/main/Origin.Styling/SelectorMatcher.cs): `Origin.Styling/SelectorMatcher.cs`
- [Media queries](https://github.com/abraham-ny/quartz/blob/main/Origin.Styling/MediaQuery.cs): `Origin.Styling/MediaQuery.cs`

### Rendering

- [Render pipeline](https://github.com/abraham-ny/quartz/blob/main/Origin.Rendering/RenderPipeline.cs): `Origin.Rendering/RenderPipeline.cs`
- [Layout engine](https://github.com/abraham-ny/quartz/blob/main/Origin.Rendering/LayoutEngine.cs): `Origin.Rendering/LayoutEngine.cs`
- [Flex layout](https://github.com/abraham-ny/quartz/blob/main/Origin.Rendering/FlexLayoutEngine.cs): `Origin.Rendering/FlexLayoutEngine.cs`
- [Paint engine](https://github.com/abraham-ny/quartz/blob/main/Origin.Rendering/PaintEngine.cs): `Origin.Rendering/PaintEngine.cs`

### Script and network

- [JavaScript engine](https://github.com/abraham-ny/quartz/blob/main/Origin.Vostro/VostroEngine.cs): `Origin.Vostro/VostroEngine.cs`
- [JavaScript parser](https://github.com/abraham-ny/quartz/blob/main/Origin.Vostro/Parser/JavaScriptParser.cs): `Origin.Vostro/Parser/JavaScriptParser.cs`
- [Syntax tree](https://github.com/abraham-ny/quartz/blob/main/Origin.Vostro/Parser/AST/Nodes.cs): `Origin.Vostro/Parser/AST/Nodes.cs`
- [JIT compiler](https://github.com/abraham-ny/quartz/blob/main/Origin.Vostro/Compiler/JITCompiler.cs): `Origin.Vostro/Compiler/JITCompiler.cs`
- [V8 context](https://github.com/abraham-ny/quartz/blob/main/Origin.Vostro/Runtime/V8Context.cs): `Origin.Vostro/Runtime/V8Context.cs`
- [Network manager](https://github.com/abraham-ny/quartz/blob/main/Origin.Networking/NetworkManager.cs): `Origin.Networking/NetworkManager.cs`
- [Download manager](https://github.com/abraham-ny/quartz/blob/main/Origin.Networking/DownloadManager.cs): `Origin.Networking/DownloadManager.cs`

### Other components

- **Application user**
- **HTTP service**

## Connections

- Application user → Origin engine: starts
- Origin engine → Network manager: processes requests
- Origin engine → JavaScript engine: runs tasks
- Origin engine → Render pipeline: renders frame
- HTML parser → Document: builds document
- Document → Element tree: contains tree
- Render pipeline → Style context: recalculates styles
- Style context → Element tree: styles elements
- Render pipeline → Layout engine: calculates layout
- Layout engine → Flex layout: delegates flex
- Render pipeline → Paint engine: paints layout
- JavaScript engine → JIT compiler: compiles script
- JIT compiler → JavaScript parser: parses script
- JavaScript parser → Syntax tree: builds syntax tree
- JavaScript engine → V8 context: executes code
- Network manager → HTTP service: sends requests
- Download manager → HTTP service: downloads content
- CSS parser → CSS rule parser: parses rules
- Style context → Selector matcher: matches selectors
- Style context → Media queries: checks conditions