# kleberholtz/object-builder architecture

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

- Interactive diagram: https://gitdiagram.com/kleberholtz/object-builder
- Repository: https://github.com/kleberholtz/object-builder

## Overview

Object Builder is a native OTClient object editor. Users open or configure a client or project, browse and edit objects and sprites, then save or export the result. The graph separates the React workspace and editing features from the Tauri command boundary and Rust domain, codec, rendering, and persistence layers. README statements support the documented save, import/export, optimization, and sprite-management branches; some internal call paths are not shown in the excerpts, so those links are omitted.

Main entry points: [`src-tauri/src/commands/mod.rs`](https://github.com/kleberholtz/object-builder/blob/main/src-tauri/src/commands/mod.rs) (Tauri commands), [`src/App.tsx`](https://github.com/kleberholtz/object-builder/blob/main/src/App.tsx) (Main workspace), [`src/features/objects/Inspector.tsx`](https://github.com/kleberholtz/object-builder/blob/main/src/features/objects/Inspector.tsx) (Object inspector), [`src/stores/history-store.ts`](https://github.com/kleberholtz/object-builder/blob/main/src/stores/history-store.ts) (Undo history)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_workspace["Workspace UI"]
  node_app["Main workspace<br/>[App.tsx]"]
  node_launcher["Project launcher"]
  node_log_panel["Event log<br/>[LogPanel.tsx]"]
end

subgraph group_editing["Object Editing"]
  node_browser["Object browser<br/>[ObjectBrowser.tsx]"]
  node_inspector["Object inspector<br/>[Inspector.tsx]"]
  node_canvas["Sprite canvas<br/>[SpriteCanvas.tsx]"]
  node_filmroll["Animation film roll<br/>[FilmRoll.tsx]"]
  node_sprite_manager["Sprite manager"]
  node_sprite_preview["Sprite preview<br/>[SpritePreview.tsx]"]
  node_optimize["Optimization UI<br/>[OptimizeDialog.tsx]"]
  node_export_ui["Export dialogs"]
  node_web_export["Web export UI"]
end

subgraph group_backend["Rust Core"]
  node_commands["Tauri commands<br/>[mod.rs]"]
  node_models["Object domain model<br/>[models.rs]"]
  node_formats["DAT SPR OTFI codecs"]
  node_renderer["Sprite rendering<br/>[mod.rs]"]
  node_project_persistence["Project persistence<br/>[mod.rs]"]
  node_history_core["Core history<br/>[mod.rs]"]
end

subgraph group_state["Application State"]
  node_project_store["Project state<br/>[project-store.ts]"]
  node_editor_store["Editor state<br/>[editor-store.ts]"]
  node_history_store["Undo history<br/>[history-store.ts]"]
  node_log_store["Log state<br/>[log-store.ts]"]
end

node_user(("Editor user"))

node_user -->|"opens project"| node_launcher
node_user -->|"edits objects"| node_app
node_launcher -.->|"loads project"| node_commands
node_app -->|"shows objects"| node_browser
node_app -->|"shows canvas"| node_canvas
node_app -->|"shows inspector"| node_inspector
node_app -->|"shows animation"| node_filmroll
node_app -->|"shows logs"| node_log_panel
node_inspector -->|"records edits"| node_history_store
node_canvas -.->|"records edits"| node_history_store
node_filmroll -.->|"supports undo"| node_history_store
node_sprite_manager -->|"queries usage"| node_commands
node_sprite_manager -->|"previews sprites"| node_sprite_preview
node_sprite_preview -->|"requests renders"| node_renderer
node_canvas -->|"requests renders"| node_renderer
node_commands -->|"reads and writes"| node_formats
node_commands -->|"operates on"| node_models
node_commands -->|"renders images"| node_renderer
node_commands -->|"persists projects"| node_project_persistence
node_commands -.->|"supports mutations"| node_history_core
node_formats -->|"decodes records"| node_models
node_optimize -->|"analyzes candidates"| node_commands
node_export_ui -.->|"exports objects"| node_commands
node_web_export -.->|"publishes sprites"| node_commands
node_app -.->|"uses project state"| node_project_store
node_inspector -->|"reads project"| node_project_store
node_inspector -->|"reads editor state"| node_editor_store
node_history_store -->|"updates objects"| node_project_store
node_log_panel -->|"reads events"| node_log_store
node_commands -.->|"streams events"| node_log_panel

click node_app "https://github.com/kleberholtz/object-builder/blob/main/src/App.tsx"
click node_launcher "https://github.com/kleberholtz/object-builder/blob/main/src/features/project/ProjectLauncher.tsx"
click node_browser "https://github.com/kleberholtz/object-builder/blob/main/src/features/objects/ObjectBrowser.tsx"
click node_inspector "https://github.com/kleberholtz/object-builder/blob/main/src/features/objects/Inspector.tsx"
click node_canvas "https://github.com/kleberholtz/object-builder/blob/main/src/features/sprites/SpriteCanvas.tsx"
click node_filmroll "https://github.com/kleberholtz/object-builder/blob/main/src/features/film-roll/FilmRoll.tsx"
click node_sprite_manager "https://github.com/kleberholtz/object-builder/blob/main/src/features/sprites/SpriteManagerDialog.tsx"
click node_sprite_preview "https://github.com/kleberholtz/object-builder/blob/main/src/features/sprites/SpritePreview.tsx"
click node_optimize "https://github.com/kleberholtz/object-builder/blob/main/src/features/project/OptimizeDialog.tsx"
click node_export_ui "https://github.com/kleberholtz/object-builder/blob/main/src/features/objects/ExportObjectDialog.tsx"
click node_web_export "https://github.com/kleberholtz/object-builder/blob/main/src/features/project/WebExportDialog.tsx"
click node_project_store "https://github.com/kleberholtz/object-builder/blob/main/src/stores/project-store.ts"
click node_editor_store "https://github.com/kleberholtz/object-builder/blob/main/src/stores/editor-store.ts"
click node_history_store "https://github.com/kleberholtz/object-builder/blob/main/src/stores/history-store.ts"
click node_log_panel "https://github.com/kleberholtz/object-builder/blob/main/src/components/layout/LogPanel.tsx"
click node_log_store "https://github.com/kleberholtz/object-builder/blob/main/src/stores/log-store.ts"
click node_commands "https://github.com/kleberholtz/object-builder/blob/main/src-tauri/src/commands/mod.rs"
click node_models "https://github.com/kleberholtz/object-builder/blob/main/src-tauri/src/core/models.rs"
click node_formats "https://github.com/kleberholtz/object-builder/tree/main/src-tauri/src/formats"
click node_renderer "https://github.com/kleberholtz/object-builder/blob/main/src-tauri/src/sprites/mod.rs"
click node_project_persistence "https://github.com/kleberholtz/object-builder/blob/main/src-tauri/src/project/mod.rs"
click node_history_core "https://github.com/kleberholtz/object-builder/blob/main/src-tauri/src/history/mod.rs"

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_launcher,node_log_panel,node_user toneBlue
class node_browser,node_inspector,node_canvas,node_filmroll,node_sprite_manager,node_sprite_preview,node_optimize,node_export_ui,node_web_export toneAmber
class node_commands,node_models,node_formats,node_renderer,node_project_persistence,node_history_core toneMint
class node_project_store,node_editor_store,node_history_store,node_log_store toneRose
```

## Components

### Workspace UI

- [Main workspace](https://github.com/kleberholtz/object-builder/blob/main/src/App.tsx): `src/App.tsx`
- [Project launcher](https://github.com/kleberholtz/object-builder/blob/main/src/features/project/ProjectLauncher.tsx): `src/features/project/ProjectLauncher.tsx`
- [Event log](https://github.com/kleberholtz/object-builder/blob/main/src/components/layout/LogPanel.tsx): `src/components/layout/LogPanel.tsx`

### Object Editing

- [Object browser](https://github.com/kleberholtz/object-builder/blob/main/src/features/objects/ObjectBrowser.tsx): `src/features/objects/ObjectBrowser.tsx`
- [Object inspector](https://github.com/kleberholtz/object-builder/blob/main/src/features/objects/Inspector.tsx): `src/features/objects/Inspector.tsx`
- [Sprite canvas](https://github.com/kleberholtz/object-builder/blob/main/src/features/sprites/SpriteCanvas.tsx): `src/features/sprites/SpriteCanvas.tsx`
- [Animation film roll](https://github.com/kleberholtz/object-builder/blob/main/src/features/film-roll/FilmRoll.tsx): `src/features/film-roll/FilmRoll.tsx`
- [Sprite manager](https://github.com/kleberholtz/object-builder/blob/main/src/features/sprites/SpriteManagerDialog.tsx): `src/features/sprites/SpriteManagerDialog.tsx`
- [Sprite preview](https://github.com/kleberholtz/object-builder/blob/main/src/features/sprites/SpritePreview.tsx): `src/features/sprites/SpritePreview.tsx`
- [Optimization UI](https://github.com/kleberholtz/object-builder/blob/main/src/features/project/OptimizeDialog.tsx): `src/features/project/OptimizeDialog.tsx`
- [Export dialogs](https://github.com/kleberholtz/object-builder/blob/main/src/features/objects/ExportObjectDialog.tsx): `src/features/objects/ExportObjectDialog.tsx`
- [Web export UI](https://github.com/kleberholtz/object-builder/blob/main/src/features/project/WebExportDialog.tsx): `src/features/project/WebExportDialog.tsx`

### Rust Core

- [Tauri commands](https://github.com/kleberholtz/object-builder/blob/main/src-tauri/src/commands/mod.rs): `src-tauri/src/commands/mod.rs`
- [Object domain model](https://github.com/kleberholtz/object-builder/blob/main/src-tauri/src/core/models.rs): `src-tauri/src/core/models.rs`
- [DAT SPR OTFI codecs](https://github.com/kleberholtz/object-builder/tree/main/src-tauri/src/formats): `src-tauri/src/formats`
- [Sprite rendering](https://github.com/kleberholtz/object-builder/blob/main/src-tauri/src/sprites/mod.rs): `src-tauri/src/sprites/mod.rs`
- [Project persistence](https://github.com/kleberholtz/object-builder/blob/main/src-tauri/src/project/mod.rs): `src-tauri/src/project/mod.rs`
- [Core history](https://github.com/kleberholtz/object-builder/blob/main/src-tauri/src/history/mod.rs): `src-tauri/src/history/mod.rs`

### Application State

- [Project state](https://github.com/kleberholtz/object-builder/blob/main/src/stores/project-store.ts): `src/stores/project-store.ts`
- [Editor state](https://github.com/kleberholtz/object-builder/blob/main/src/stores/editor-store.ts): `src/stores/editor-store.ts`
- [Undo history](https://github.com/kleberholtz/object-builder/blob/main/src/stores/history-store.ts): `src/stores/history-store.ts`
- [Log state](https://github.com/kleberholtz/object-builder/blob/main/src/stores/log-store.ts): `src/stores/log-store.ts`

### Other components

- **Editor user**

## Connections

- Editor user → Project launcher: opens project
- Editor user → Main workspace: edits objects
- Project launcher → Tauri commands: loads project
- Main workspace → Object browser: shows objects (evidence: `src/App.tsx`)
- Main workspace → Sprite canvas: shows canvas (evidence: `src/App.tsx`)
- Main workspace → Object inspector: shows inspector (evidence: `src/App.tsx`)
- Main workspace → Animation film roll: shows animation (evidence: `src/App.tsx`)
- Main workspace → Event log: shows logs (evidence: `src/App.tsx`)
- Object inspector → Undo history: records edits (evidence: `src/features/objects/Inspector.tsx`)
- Sprite canvas → Undo history: records edits
- Animation film roll → Undo history: supports undo
- Sprite manager → Tauri commands: queries usage (evidence: `src/features/sprites/SpriteManagerDialog.tsx`)
- Sprite manager → Sprite preview: previews sprites (evidence: `src/features/sprites/SpriteManagerDialog.tsx`)
- Sprite preview → Sprite rendering: requests renders
- Sprite canvas → Sprite rendering: requests renders
- Tauri commands → DAT SPR OTFI codecs: reads and writes
- Tauri commands → Object domain model: operates on (evidence: `src-tauri/src/commands/mod.rs`)
- Tauri commands → Sprite rendering: renders images
- Tauri commands → Project persistence: persists projects
- Tauri commands → Core history: supports mutations
- DAT SPR OTFI codecs → Object domain model: decodes records (evidence: `src-tauri/src/formats/dat/mod.rs`)
- Optimization UI → Tauri commands: analyzes candidates
- Export dialogs → Tauri commands: exports objects
- Web export UI → Tauri commands: publishes sprites
- Main workspace → Project state: uses project state (evidence: `src/App.tsx`)
- Object inspector → Project state: reads project (evidence: `src/features/objects/Inspector.tsx`)
- Object inspector → Editor state: reads editor state (evidence: `src/features/objects/Inspector.tsx`)
- Undo history → Project state: updates objects (evidence: `src/stores/history-store.ts`)
- Event log → Log state: reads events (evidence: `src/components/layout/LogPanel.tsx`)
- Tauri commands → Event log: streams events