How studiosonetto/quartz works
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: useDeckStore.ts Deck state · atelier Atelier controls · useHistoryStore.ts Undo redo · useAssetDrag.ts Asset placement
Components 22
Product entry
- Atelier page
web/app/pages/atelier/[id].vue - Deck dashboard
web/app/pages/atelier/index.vue
Atelier editor
- Atelier controls
web/app/components/atelier - Canvas renderer
web/app/components/atelier/render/index.vue - Inspector panels
web/app/components/atelier/inspector - Editor commands
web/app/modules/core/commands
Slide authoring
- Node registry
web/app/modules/registry.ts - Node components
web/app/modules/core/components - Deck state
web/app/stores/useDeckStore.ts - Undo redo
web/app/stores/useHistoryStore.ts - Animation timeline
web/app/components/atelier/timeline/index.vue - Asset placement
web/app/composables/useAssetDrag.ts
Persistence
- Asset state
web/app/stores/useAssetsStore.ts - Deck sync
web/app/stores/useDeckSync.ts - Deck and slide API
web/server/api - Application database
web/server/db/schema.ts - Signed asset URLs
web/app/utils/signStorage.ts
Identity
- Auth pages
web/app/pages/auth/index.vue - Auth store
web/app/stores/useAuthStore.ts
Other components
- Presenter
- Supabase Auth
- Supabase Storage
Connections 27
- 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