# oceanosdev/gregorian-chant-editor architecture

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

- Interactive diagram: https://gitdiagram.com/oceanosdev/gregorian-chant-editor
- Repository: https://github.com/oceanosdev/gregorian-chant-editor

## Overview

Gregorian Chant Editor is a browser-based editor for semantic lyrics and square-notation neumes. A musician edits syllables and notes through the editor UI; commands transform the semantic document, history supports atomic undo/redo, and layout derives wrapped systems and placement previews before SVG rendering. The graph preserves editing, selection, graphical placement, layout, and accessible rendering capabilities documented in the README. Some subsystem links use exact enclosing directories because individual files were not sampled; those links reflect documented capabilities rather than inspected call sites.

Main entry points: [`src/editor/components/ChantEditor.tsx`](https://github.com/oceanosdev/gregorian-chant-editor/blob/master/src/editor/components/ChantEditor.tsx) (Chant editor), [`src/editor/commands`](https://github.com/oceanosdev/gregorian-chant-editor/tree/master/src/editor/commands) (Semantic commands), [`src/editor/layout/layout-chant.ts`](https://github.com/oceanosdev/gregorian-chant-editor/blob/master/src/editor/layout/layout-chant.ts) (Score layout), [`src/App.tsx`](https://github.com/oceanosdev/gregorian-chant-editor/blob/master/src/App.tsx) (App)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application"]
  node_app["App<br/>[App.tsx]"]
  node_editor["Chant editor<br/>[ChantEditor.tsx]"]
end

subgraph group_editing["Editing"]
  node_document["Chant document<br/>[chant-document.ts]"]
  node_neume_rules["Neume invariants<br/>[neume.ts]"]
  node_commands["Semantic commands"]
  node_insertion_rules["Insertion resolvers"]
  node_history["Edit history"]
  node_selection["Selection state<br/>[selection.ts]"]
  node_tools["Editor tools<br/>[editor-tool.ts]"]
end

subgraph group_layout["Layout"]
  node_placement["Placement resolver"]
  node_interaction["Interaction helpers"]
  node_layout_engine["Score layout<br/>[layout-chant.ts]"]
end

subgraph group_rendering["Rendering"]
  node_svg["SVG score<br/>[ScoreSvg.tsx]"]
  node_accessibility["Accessible descriptions"]
end

node_musician(("Musician"))

node_musician -->|"opens editor"| node_app
node_app -->|"renders"| node_editor
node_app -->|"supplies example"| node_document
node_editor -->|"applies edits"| node_commands
node_editor -->|"records edits"| node_history
node_editor -->|"updates selection"| node_selection
node_editor -->|"selects tools"| node_tools
node_editor -->|"resolves placement"| node_placement
node_editor -->|"derives layout"| node_layout_engine
node_editor -->|"renders score"| node_svg
node_commands -->|"transforms"| node_document
node_commands -->|"validates neumes"| node_neume_rules
node_commands -->|"resolves insertion"| node_insertion_rules
node_placement -->|"clamps insertion"| node_insertion_rules
node_placement -->|"computes preview"| node_layout_engine
node_interaction -->|"uses system geometry"| node_layout_engine
node_layout_engine -->|"reads semantics"| node_document
node_svg -->|"describes score"| node_accessibility
node_svg -->|"resolves neume kind"| node_interaction

click node_app "https://github.com/oceanosdev/gregorian-chant-editor/blob/master/src/App.tsx"
click node_editor "https://github.com/oceanosdev/gregorian-chant-editor/blob/master/src/editor/components/ChantEditor.tsx"
click node_document "https://github.com/oceanosdev/gregorian-chant-editor/blob/master/src/editor/domain/chant-document.ts"
click node_neume_rules "https://github.com/oceanosdev/gregorian-chant-editor/blob/master/src/editor/domain/neume.ts"
click node_commands "https://github.com/oceanosdev/gregorian-chant-editor/tree/master/src/editor/commands"
click node_insertion_rules "https://github.com/oceanosdev/gregorian-chant-editor/blob/master/src/editor/commands/resolve-syllable-neume-insertion.ts"
click node_history "https://github.com/oceanosdev/gregorian-chant-editor/blob/master/src/editor/state/document-history.ts"
click node_selection "https://github.com/oceanosdev/gregorian-chant-editor/blob/master/src/editor/state/selection.ts"
click node_tools "https://github.com/oceanosdev/gregorian-chant-editor/blob/master/src/editor/state/editor-tool.ts"
click node_placement "https://github.com/oceanosdev/gregorian-chant-editor/blob/master/src/editor/interaction/resolve-graphical-neume-placement.ts"
click node_interaction "https://github.com/oceanosdev/gregorian-chant-editor/tree/master/src/editor/interaction"
click node_layout_engine "https://github.com/oceanosdev/gregorian-chant-editor/blob/master/src/editor/layout/layout-chant.ts"
click node_svg "https://github.com/oceanosdev/gregorian-chant-editor/blob/master/src/editor/rendering/ScoreSvg.tsx"
click node_accessibility "https://github.com/oceanosdev/gregorian-chant-editor/blob/master/src/editor/rendering/score-accessible-description.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_app,node_editor toneBlue
class node_document,node_neume_rules,node_commands,node_insertion_rules,node_history,node_selection,node_tools toneAmber
class node_placement,node_interaction,node_layout_engine toneMint
class node_svg,node_accessibility toneRose
class node_musician toneIndigo
```

## Components

### Application

- [App](https://github.com/oceanosdev/gregorian-chant-editor/blob/master/src/App.tsx): `src/App.tsx`
- [Chant editor](https://github.com/oceanosdev/gregorian-chant-editor/blob/master/src/editor/components/ChantEditor.tsx): `src/editor/components/ChantEditor.tsx`

### Editing

- [Chant document](https://github.com/oceanosdev/gregorian-chant-editor/blob/master/src/editor/domain/chant-document.ts): `src/editor/domain/chant-document.ts`
- [Neume invariants](https://github.com/oceanosdev/gregorian-chant-editor/blob/master/src/editor/domain/neume.ts): `src/editor/domain/neume.ts`
- [Semantic commands](https://github.com/oceanosdev/gregorian-chant-editor/tree/master/src/editor/commands): `src/editor/commands`
- [Insertion resolvers](https://github.com/oceanosdev/gregorian-chant-editor/blob/master/src/editor/commands/resolve-syllable-neume-insertion.ts): `src/editor/commands/resolve-syllable-neume-insertion.ts`
- [Edit history](https://github.com/oceanosdev/gregorian-chant-editor/blob/master/src/editor/state/document-history.ts): `src/editor/state/document-history.ts`
- [Selection state](https://github.com/oceanosdev/gregorian-chant-editor/blob/master/src/editor/state/selection.ts): `src/editor/state/selection.ts`
- [Editor tools](https://github.com/oceanosdev/gregorian-chant-editor/blob/master/src/editor/state/editor-tool.ts): `src/editor/state/editor-tool.ts`

### Layout

- [Placement resolver](https://github.com/oceanosdev/gregorian-chant-editor/blob/master/src/editor/interaction/resolve-graphical-neume-placement.ts): `src/editor/interaction/resolve-graphical-neume-placement.ts`
- [Interaction helpers](https://github.com/oceanosdev/gregorian-chant-editor/tree/master/src/editor/interaction): `src/editor/interaction`
- [Score layout](https://github.com/oceanosdev/gregorian-chant-editor/blob/master/src/editor/layout/layout-chant.ts): `src/editor/layout/layout-chant.ts`

### Rendering

- [SVG score](https://github.com/oceanosdev/gregorian-chant-editor/blob/master/src/editor/rendering/ScoreSvg.tsx): `src/editor/rendering/ScoreSvg.tsx`
- [Accessible descriptions](https://github.com/oceanosdev/gregorian-chant-editor/blob/master/src/editor/rendering/score-accessible-description.ts): `src/editor/rendering/score-accessible-description.ts`

### Other components

- **Musician**

## Connections

- Musician → App: opens editor
- App → Chant editor: renders
- App → Chant document: supplies example
- Chant editor → Semantic commands: applies edits
- Chant editor → Edit history: records edits
- Chant editor → Selection state: updates selection
- Chant editor → Editor tools: selects tools
- Chant editor → Placement resolver: resolves placement
- Chant editor → Score layout: derives layout
- Chant editor → SVG score: renders score
- Semantic commands → Chant document: transforms
- Semantic commands → Neume invariants: validates neumes
- Semantic commands → Insertion resolvers: resolves insertion
- Placement resolver → Insertion resolvers: clamps insertion
- Placement resolver → Score layout: computes preview
- Interaction helpers → Score layout: uses system geometry
- Score layout → Chant document: reads semantics
- SVG score → Accessible descriptions: describes score
- SVG score → Interaction helpers: resolves neume kind