# aki-008/svelte-study architecture

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

- Interactive diagram: https://gitdiagram.com/aki-008/svelte-study
- Repository: https://github.com/aki-008/svelte-study

## Overview

This repository appears to be a desktop word-processing editor with a local workspace, DOCX import/export, and an optional AI editing sidecar. The likely user flow is editing paginated documents, saving them locally, and importing or exporting DOCX; the sidecar can read/write documents and run agent edits. The README provides no product overview, so capabilities are inferred from the source index and excerpts. Several UI and workspace connections are unsampled; uncertain links are omitted rather than inferred.

Main entry points: [`editor/src/lib/import/index.ts`](https://github.com/aki-008/svelte-study/blob/main/editor/src/lib/import/index.ts) (DOCX Importer), [`editor/src/lib/agent/run.ts`](https://github.com/aki-008/svelte-study/blob/main/editor/src/lib/agent/run.ts) (Agent Run Loop), [`editor/src/lib/pageSpecs.ts`](https://github.com/aki-008/svelte-study/blob/main/editor/src/lib/pageSpecs.ts) (Page Geometry), [`editor/server/main.ts`](https://github.com/aki-008/svelte-study/blob/main/editor/server/main.ts) (Sidecar Entry Point)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_editing["Document Editing"]
  node_editor["Rich Text Editor<br/>[Tiptap.svelte]"]
  node_commands["Editing Commands<br/>[commands.ts]"]
  node_ribbon["Ribbon Controls"]
  node_paragraph["Paragraph Dialog"]
  node_page_specs["Page Geometry<br/>[pageSpecs.ts]"]
  node_header_footer["Headers and Footers<br/>[headerFooter.ts]"]
  node_editor_state["Editor State"]
end

subgraph group_formats["Document Formats"]
  node_importer["DOCX Importer<br/>[index.ts]"]
  node_ooxml["OOXML Parsing<br/>[ooxml.ts]"]
  node_styles["Style Parsing<br/>[styles.ts]"]
  node_tables["Table Parsing<br/>[tables.ts]"]
  node_exporter["DOCX Exporter<br/>[exportDocx.ts]"]
end

subgraph group_workspace["Workspace Storage"]
  node_doc_envelope["Document Contract<br/>[docEnvelope.ts]"]
  node_local_store["Browser Document Store<br/>[documentStore.ts]"]
  node_workspace_local["Workspace Persistence"]
end

subgraph group_agent["AI Sidecar"]
  node_sidecar_entry["Sidecar Entry Point<br/>[main.ts]"]
  node_http_api["Sidecar HTTP API<br/>[app.ts]"]
  node_file_store[("File Document Store<br/>[store.ts]")]
  node_agent_loop["Agent Run Loop<br/>[run.ts]"]
  node_agent_tools["Document Edit Tools<br/>[tools.ts]"]
  node_model_config["Model Configuration<br/>[fromEnv.ts]"]
  node_openai_adapter["OpenAI Adapter<br/>[openai.ts]"]
end

node_user(("Editor User"))
node_model_service{{"Configured Model"}}

node_user -.->|"edits in"| node_editor
node_ribbon -->|"invokes"| node_commands
node_paragraph -->|"invokes"| node_commands
node_paragraph -->|"converts units"| node_page_specs
node_editor -->|"uses"| node_editor_state
node_editor -->|"uses"| node_page_specs
node_importer -->|"parses XML with"| node_ooxml
node_importer -->|"reads styles with"| node_styles
node_importer -->|"reads tables with"| node_tables
node_importer -->|"uses"| node_page_specs
node_importer -->|"uses"| node_header_footer
node_importer -->|"references"| node_exporter
node_exporter -->|"uses"| node_page_specs
node_exporter -->|"uses"| node_header_footer
node_workspace_local -->|"uses"| node_local_store
node_local_store -->|"validates envelope"| node_doc_envelope
node_sidecar_entry -->|"starts server"| node_http_api
node_sidecar_entry -->|"configures store"| node_file_store
node_sidecar_entry -->|"loads model config"| node_model_config
node_http_api -->|"reads and writes"| node_file_store
node_http_api -->|"runs agent"| node_agent_loop
node_file_store -->|"migrates and validates"| node_doc_envelope
node_agent_loop -->|"dispatches tools"| node_agent_tools
node_agent_loop -->|"uses document contract"| node_doc_envelope
node_agent_tools -->|"returns tool results"| node_agent_loop
node_model_config -->|"configures adapter"| node_openai_adapter
node_openai_adapter -.->|"calls model"| node_model_service

click node_editor "https://github.com/aki-008/svelte-study/blob/main/editor/src/lib/Tiptap.svelte"
click node_commands "https://github.com/aki-008/svelte-study/blob/main/editor/src/lib/commands.ts"
click node_ribbon "https://github.com/aki-008/svelte-study/blob/main/editor/src/lib/ribbon/groups/HomeParagraphGroup.svelte"
click node_paragraph "https://github.com/aki-008/svelte-study/blob/main/editor/src/lib/ribbon/dialogs/ParagraphDialog.svelte"
click node_page_specs "https://github.com/aki-008/svelte-study/blob/main/editor/src/lib/pageSpecs.ts"
click node_header_footer "https://github.com/aki-008/svelte-study/blob/main/editor/src/lib/headerFooter.ts"
click node_editor_state "https://github.com/aki-008/svelte-study/blob/main/editor/src/lib/editorStore.svelte.ts"
click node_importer "https://github.com/aki-008/svelte-study/blob/main/editor/src/lib/import/index.ts"
click node_ooxml "https://github.com/aki-008/svelte-study/blob/main/editor/src/lib/import/ooxml.ts"
click node_styles "https://github.com/aki-008/svelte-study/blob/main/editor/src/lib/import/styles.ts"
click node_tables "https://github.com/aki-008/svelte-study/blob/main/editor/src/lib/import/tables.ts"
click node_exporter "https://github.com/aki-008/svelte-study/blob/main/editor/src/lib/exportDocx.ts"
click node_doc_envelope "https://github.com/aki-008/svelte-study/blob/main/editor/src/lib/docEnvelope.ts"
click node_local_store "https://github.com/aki-008/svelte-study/blob/main/editor/src/lib/stores/documentStore.ts"
click node_workspace_local "https://github.com/aki-008/svelte-study/blob/main/editor/src/lib/stores/workspaceLocal.svelte.ts"
click node_sidecar_entry "https://github.com/aki-008/svelte-study/blob/main/editor/server/main.ts"
click node_http_api "https://github.com/aki-008/svelte-study/blob/main/editor/server/app.ts"
click node_file_store "https://github.com/aki-008/svelte-study/blob/main/editor/server/store.ts"
click node_agent_loop "https://github.com/aki-008/svelte-study/blob/main/editor/src/lib/agent/run.ts"
click node_agent_tools "https://github.com/aki-008/svelte-study/blob/main/editor/src/lib/agent/tools.ts"
click node_model_config "https://github.com/aki-008/svelte-study/blob/main/editor/server/agent/fromEnv.ts"
click node_openai_adapter "https://github.com/aki-008/svelte-study/blob/main/editor/server/agent/openai.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_editor,node_commands,node_ribbon,node_paragraph,node_page_specs,node_header_footer,node_editor_state,node_user toneBlue
class node_importer,node_ooxml,node_styles,node_tables,node_exporter toneAmber
class node_doc_envelope,node_local_store,node_workspace_local toneMint
class node_sidecar_entry,node_http_api,node_file_store,node_agent_loop,node_agent_tools,node_model_config,node_openai_adapter toneRose
class node_model_service toneIndigo
```

## Components

### Document Editing

- [Rich Text Editor](https://github.com/aki-008/svelte-study/blob/main/editor/src/lib/Tiptap.svelte): `editor/src/lib/Tiptap.svelte`
- [Editing Commands](https://github.com/aki-008/svelte-study/blob/main/editor/src/lib/commands.ts): `editor/src/lib/commands.ts`
- [Ribbon Controls](https://github.com/aki-008/svelte-study/blob/main/editor/src/lib/ribbon/groups/HomeParagraphGroup.svelte): `editor/src/lib/ribbon/groups/HomeParagraphGroup.svelte`
- [Paragraph Dialog](https://github.com/aki-008/svelte-study/blob/main/editor/src/lib/ribbon/dialogs/ParagraphDialog.svelte): `editor/src/lib/ribbon/dialogs/ParagraphDialog.svelte`
- [Page Geometry](https://github.com/aki-008/svelte-study/blob/main/editor/src/lib/pageSpecs.ts): `editor/src/lib/pageSpecs.ts`
- [Headers and Footers](https://github.com/aki-008/svelte-study/blob/main/editor/src/lib/headerFooter.ts): `editor/src/lib/headerFooter.ts`
- [Editor State](https://github.com/aki-008/svelte-study/blob/main/editor/src/lib/editorStore.svelte.ts): `editor/src/lib/editorStore.svelte.ts`

### Document Formats

- [DOCX Importer](https://github.com/aki-008/svelte-study/blob/main/editor/src/lib/import/index.ts): `editor/src/lib/import/index.ts`
- [OOXML Parsing](https://github.com/aki-008/svelte-study/blob/main/editor/src/lib/import/ooxml.ts): `editor/src/lib/import/ooxml.ts`
- [Style Parsing](https://github.com/aki-008/svelte-study/blob/main/editor/src/lib/import/styles.ts): `editor/src/lib/import/styles.ts`
- [Table Parsing](https://github.com/aki-008/svelte-study/blob/main/editor/src/lib/import/tables.ts): `editor/src/lib/import/tables.ts`
- [DOCX Exporter](https://github.com/aki-008/svelte-study/blob/main/editor/src/lib/exportDocx.ts): `editor/src/lib/exportDocx.ts`

### Workspace Storage

- [Document Contract](https://github.com/aki-008/svelte-study/blob/main/editor/src/lib/docEnvelope.ts): `editor/src/lib/docEnvelope.ts`
- [Browser Document Store](https://github.com/aki-008/svelte-study/blob/main/editor/src/lib/stores/documentStore.ts): `editor/src/lib/stores/documentStore.ts`
- [Workspace Persistence](https://github.com/aki-008/svelte-study/blob/main/editor/src/lib/stores/workspaceLocal.svelte.ts): `editor/src/lib/stores/workspaceLocal.svelte.ts`

### AI Sidecar

- [Sidecar Entry Point](https://github.com/aki-008/svelte-study/blob/main/editor/server/main.ts): `editor/server/main.ts`
- [Sidecar HTTP API](https://github.com/aki-008/svelte-study/blob/main/editor/server/app.ts): `editor/server/app.ts`
- [File Document Store](https://github.com/aki-008/svelte-study/blob/main/editor/server/store.ts): `editor/server/store.ts`
- [Agent Run Loop](https://github.com/aki-008/svelte-study/blob/main/editor/src/lib/agent/run.ts): `editor/src/lib/agent/run.ts`
- [Document Edit Tools](https://github.com/aki-008/svelte-study/blob/main/editor/src/lib/agent/tools.ts): `editor/src/lib/agent/tools.ts`
- [Model Configuration](https://github.com/aki-008/svelte-study/blob/main/editor/server/agent/fromEnv.ts): `editor/server/agent/fromEnv.ts`
- [OpenAI Adapter](https://github.com/aki-008/svelte-study/blob/main/editor/server/agent/openai.ts): `editor/server/agent/openai.ts`

### Other components

- **Editor User**
- **Configured Model**

## Connections

- Editor User → Rich Text Editor: edits in
- Ribbon Controls → Editing Commands: invokes (evidence: `editor/src/lib/ribbon/groups/HomeParagraphGroup.svelte`)
- Paragraph Dialog → Editing Commands: invokes (evidence: `editor/src/lib/ribbon/dialogs/ParagraphDialog.svelte`)
- Paragraph Dialog → Page Geometry: converts units (evidence: `editor/src/lib/ribbon/dialogs/ParagraphDialog.svelte`)
- Rich Text Editor → Editor State: uses
- Rich Text Editor → Page Geometry: uses
- DOCX Importer → OOXML Parsing: parses XML with (evidence: `editor/src/lib/import/index.ts`)
- DOCX Importer → Style Parsing: reads styles with (evidence: `editor/src/lib/import/index.ts`)
- DOCX Importer → Table Parsing: reads tables with (evidence: `editor/src/lib/import/index.ts`)
- DOCX Importer → Page Geometry: uses (evidence: `editor/src/lib/import/index.ts`)
- DOCX Importer → Headers and Footers: uses (evidence: `editor/src/lib/import/index.ts`)
- DOCX Importer → DOCX Exporter: references (evidence: `editor/src/lib/import/index.ts`)
- DOCX Exporter → Page Geometry: uses (evidence: `editor/src/lib/exportDocx.ts`)
- DOCX Exporter → Headers and Footers: uses (evidence: `editor/src/lib/exportDocx.ts`)
- Workspace Persistence → Browser Document Store: uses (evidence: `editor/src/lib/stores/workspaceLocal.svelte.ts`)
- Browser Document Store → Document Contract: validates envelope (evidence: `editor/src/lib/stores/documentStore.ts`)
- Sidecar Entry Point → Sidecar HTTP API: starts server (evidence: `editor/server/main.ts`)
- Sidecar Entry Point → File Document Store: configures store (evidence: `editor/server/main.ts`)
- Sidecar Entry Point → Model Configuration: loads model config (evidence: `editor/server/main.ts`)
- Sidecar HTTP API → File Document Store: reads and writes (evidence: `editor/server/app.ts`)
- Sidecar HTTP API → Agent Run Loop: runs agent (evidence: `editor/server/app.ts`)
- File Document Store → Document Contract: migrates and validates (evidence: `editor/server/store.ts`)
- Agent Run Loop → Document Edit Tools: dispatches tools (evidence: `editor/src/lib/agent/run.ts`)
- Agent Run Loop → Document Contract: uses document contract (evidence: `editor/src/lib/agent/run.ts`)
- Document Edit Tools → Agent Run Loop: returns tool results (evidence: `editor/src/lib/agent/run.ts`)
- Model Configuration → OpenAI Adapter: configures adapter (evidence: `editor/server/agent/fromEnv.ts`)
- OpenAI Adapter → Configured Model: calls model