# studiosonetto/quartz architecture

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

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

## Overview

Quartz is a browser-based slides engine for creating and editing presentation decks. The main workflow is: a user opens a deck in Atelier, edits slide content and structure on the canvas, adds assets or animation, then saves and synchronizes the deck. Separate capabilities include account access, deck and slide management, component-based node editing, and asset storage. The sampled store code confirms deck loading, node mutations, synchronization, and history behavior; most server routes and editor components were not sampled, so their internal call wiring is shown only where supported.

Main entry points: [`web/app/stores/useDeckStore.ts`](https://github.com/studiosonetto/quartz/blob/main/web/app/stores/useDeckStore.ts) (Deck state), [`web/app/components/atelier`](https://github.com/studiosonetto/quartz/tree/main/web/app/components/atelier) (Atelier controls), [`web/app/stores/useHistoryStore.ts`](https://github.com/studiosonetto/quartz/blob/main/web/app/stores/useHistoryStore.ts) (Undo redo), [`web/app/composables/useAssetDrag.ts`](https://github.com/studiosonetto/quartz/blob/main/web/app/composables/useAssetDrag.ts) (Asset placement)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_product["Product entry"]
  node_atelier_page["Atelier page<br/>[&#91;id&#93;.vue]"]
  node_dashboard["Deck dashboard<br/>[index.vue]"]
end

subgraph group_editor["Atelier editor"]
  node_editor_shell["Atelier controls"]
  node_canvas["Canvas renderer<br/>[index.vue]"]
  node_inspector["Inspector panels"]
  node_commands["Editor commands"]
end

subgraph group_domain["Slide authoring"]
  node_node_registry["Node registry<br/>[registry.ts]"]
  node_component_panels["Node components"]
  node_deck_store["Deck state<br/>[useDeckStore.ts]"]
  node_history["Undo redo<br/>[useHistoryStore.ts]"]
  node_animation["Animation timeline<br/>[index.vue]"]
  node_asset_drag["Asset placement<br/>[useAssetDrag.ts]"]
end

subgraph group_persistence["Persistence"]
  node_assets_store["Asset state<br/>[useAssetsStore.ts]"]
  node_deck_sync["Deck sync<br/>[useDeckSync.ts]"]
  node_api["Deck and slide API"]
  node_database[("Application database<br/>[schema.ts]")]
  node_storage_signing["Signed asset URLs<br/>[signStorage.ts]"]
end

subgraph group_identity["Identity"]
  node_auth_pages["Auth pages<br/>[index.vue]"]
  node_auth_store["Auth store<br/>[useAuthStore.ts]"]
end

node_user(("Presenter"))
node_supabase_auth{{"Supabase Auth"}}
node_supabase_storage{{"Supabase Storage"}}

node_user -->|"opens deck"| node_atelier_page
node_user -->|"manages decks"| node_dashboard
node_user -->|"signs in"| node_auth_pages
node_auth_pages -->|"submits credentials"| node_auth_store
node_auth_store -->|"authenticates"| node_supabase_auth
node_atelier_page -->|"loads deck"| node_deck_store
node_atelier_page -->|"presents editor"| node_editor_shell
node_editor_shell -->|"shows slides"| node_canvas
node_editor_shell -->|"edits selection"| node_inspector
node_editor_shell -->|"dispatches commands"| node_commands
node_canvas -->|"reads slide state"| node_deck_store
node_inspector -->|"edits components"| node_component_panels
node_component_panels -->|"uses node definitions"| node_node_registry
node_commands -->|"mutates deck"| node_deck_store
node_animation -->|"edits animation"| node_deck_store
node_asset_drag -->|"creates nodes"| node_deck_store
node_asset_drag -->|"uploads assets"| node_assets_store
node_asset_drag -->|"records edit"| node_history
node_deck_store -->|"captures edits"| node_history
node_history -->|"replays slide state"| node_deck_store
node_deck_store -->|"queues changes"| node_deck_sync
node_history -->|"queues replay changes"| node_deck_sync
node_deck_store -->|"loads deck and slides"| node_api
node_deck_sync -->|"sends changes"| node_api
node_api -->|"persists records"| node_database
node_assets_store -.->|"requests signed URLs"| node_storage_signing
node_storage_signing -->|"signs asset paths"| node_supabase_storage

click node_atelier_page "https://github.com/studiosonetto/quartz/blob/main/web/app/pages/atelier/%5Bid%5D.vue"
click node_dashboard "https://github.com/studiosonetto/quartz/blob/main/web/app/pages/atelier/index.vue"
click node_auth_pages "https://github.com/studiosonetto/quartz/blob/main/web/app/pages/auth/index.vue"
click node_auth_store "https://github.com/studiosonetto/quartz/blob/main/web/app/stores/useAuthStore.ts"
click node_editor_shell "https://github.com/studiosonetto/quartz/tree/main/web/app/components/atelier"
click node_canvas "https://github.com/studiosonetto/quartz/blob/main/web/app/components/atelier/render/index.vue"
click node_inspector "https://github.com/studiosonetto/quartz/tree/main/web/app/components/atelier/inspector"
click node_commands "https://github.com/studiosonetto/quartz/tree/main/web/app/modules/core/commands"
click node_node_registry "https://github.com/studiosonetto/quartz/blob/main/web/app/modules/registry.ts"
click node_component_panels "https://github.com/studiosonetto/quartz/tree/main/web/app/modules/core/components"
click node_deck_store "https://github.com/studiosonetto/quartz/blob/main/web/app/stores/useDeckStore.ts"
click node_history "https://github.com/studiosonetto/quartz/blob/main/web/app/stores/useHistoryStore.ts"
click node_animation "https://github.com/studiosonetto/quartz/blob/main/web/app/components/atelier/timeline/index.vue"
click node_asset_drag "https://github.com/studiosonetto/quartz/blob/main/web/app/composables/useAssetDrag.ts"
click node_assets_store "https://github.com/studiosonetto/quartz/blob/main/web/app/stores/useAssetsStore.ts"
click node_deck_sync "https://github.com/studiosonetto/quartz/blob/main/web/app/stores/useDeckSync.ts"
click node_api "https://github.com/studiosonetto/quartz/tree/main/web/server/api"
click node_database "https://github.com/studiosonetto/quartz/blob/main/web/server/db/schema.ts"
click node_storage_signing "https://github.com/studiosonetto/quartz/blob/main/web/app/utils/signStorage.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_atelier_page,node_dashboard toneBlue
class node_editor_shell,node_canvas,node_inspector,node_commands,node_supabase_storage toneAmber
class node_node_registry,node_component_panels,node_deck_store,node_history,node_animation,node_asset_drag toneMint
class node_assets_store,node_deck_sync,node_api,node_database,node_storage_signing toneRose
class node_auth_pages,node_auth_store,node_user,node_supabase_auth toneIndigo
```

## Components

### Product entry

- [Atelier page](https://github.com/studiosonetto/quartz/blob/main/web/app/pages/atelier/%5Bid%5D.vue): `web/app/pages/atelier/[id].vue`
- [Deck dashboard](https://github.com/studiosonetto/quartz/blob/main/web/app/pages/atelier/index.vue): `web/app/pages/atelier/index.vue`

### Atelier editor

- [Atelier controls](https://github.com/studiosonetto/quartz/tree/main/web/app/components/atelier): `web/app/components/atelier`
- [Canvas renderer](https://github.com/studiosonetto/quartz/blob/main/web/app/components/atelier/render/index.vue): `web/app/components/atelier/render/index.vue`
- [Inspector panels](https://github.com/studiosonetto/quartz/tree/main/web/app/components/atelier/inspector): `web/app/components/atelier/inspector`
- [Editor commands](https://github.com/studiosonetto/quartz/tree/main/web/app/modules/core/commands): `web/app/modules/core/commands`

### Slide authoring

- [Node registry](https://github.com/studiosonetto/quartz/blob/main/web/app/modules/registry.ts): `web/app/modules/registry.ts`
- [Node components](https://github.com/studiosonetto/quartz/tree/main/web/app/modules/core/components): `web/app/modules/core/components`
- [Deck state](https://github.com/studiosonetto/quartz/blob/main/web/app/stores/useDeckStore.ts): `web/app/stores/useDeckStore.ts`
- [Undo redo](https://github.com/studiosonetto/quartz/blob/main/web/app/stores/useHistoryStore.ts): `web/app/stores/useHistoryStore.ts`
- [Animation timeline](https://github.com/studiosonetto/quartz/blob/main/web/app/components/atelier/timeline/index.vue): `web/app/components/atelier/timeline/index.vue`
- [Asset placement](https://github.com/studiosonetto/quartz/blob/main/web/app/composables/useAssetDrag.ts): `web/app/composables/useAssetDrag.ts`

### Persistence

- [Asset state](https://github.com/studiosonetto/quartz/blob/main/web/app/stores/useAssetsStore.ts): `web/app/stores/useAssetsStore.ts`
- [Deck sync](https://github.com/studiosonetto/quartz/blob/main/web/app/stores/useDeckSync.ts): `web/app/stores/useDeckSync.ts`
- [Deck and slide API](https://github.com/studiosonetto/quartz/tree/main/web/server/api): `web/server/api`
- [Application database](https://github.com/studiosonetto/quartz/blob/main/web/server/db/schema.ts): `web/server/db/schema.ts`
- [Signed asset URLs](https://github.com/studiosonetto/quartz/blob/main/web/app/utils/signStorage.ts): `web/app/utils/signStorage.ts`

### Identity

- [Auth pages](https://github.com/studiosonetto/quartz/blob/main/web/app/pages/auth/index.vue): `web/app/pages/auth/index.vue`
- [Auth store](https://github.com/studiosonetto/quartz/blob/main/web/app/stores/useAuthStore.ts): `web/app/stores/useAuthStore.ts`

### Other components

- **Presenter**
- **Supabase Auth**
- **Supabase Storage**

## Connections

- Presenter → Atelier page: opens deck
- Presenter → Deck dashboard: manages decks
- Presenter → Auth pages: signs in
- Auth pages → Auth store: submits credentials
- Auth store → Supabase Auth: authenticates
- Atelier page → Deck state: loads deck
- Atelier page → Atelier controls: presents editor
- Atelier controls → Canvas renderer: shows slides
- Atelier controls → Inspector panels: edits selection
- Atelier controls → Editor commands: dispatches commands
- Canvas renderer → Deck state: reads slide state
- Inspector panels → Node components: edits components
- Node components → Node registry: uses node definitions
- Editor commands → Deck state: mutates deck
- Animation timeline → Deck state: edits animation
- Asset placement → Deck state: creates nodes
- Asset placement → Asset state: uploads assets
- Asset placement → Undo redo: records edit
- Deck state → Undo redo: captures edits
- Undo redo → Deck state: replays slide state
- Deck state → Deck sync: queues changes
- Undo redo → Deck sync: queues replay changes
- Deck state → Deck and slide API: loads deck and slides
- Deck sync → Deck and slide API: sends changes
- Deck and slide API → Application database: persists records
- Asset state → Signed asset URLs: requests signed URLs
- Signed asset URLs → Supabase Storage: signs asset paths