# Image Studio

Image Studio is a Bun + React image editor prototype. It uses a command-driven architecture for document and editor state, a canvas/WebGL renderer layer, and a lightweight React UI for tools, layers, imports, exports, and shortcuts.

## Features

- Import images into an artboard
- Save and open versioned project files with embedded, project-owned assets
- Automatic local recovery snapshots after document changes
- Export the active artboard as PNG
- Layer selection and layer sheet
- Select, transform, pan, brush, eraser, chroma key, and magic wand tools
- Mask-edit workflow support
- Undo/redo through command history
- Keyboard shortcuts and pointer/wheel canvas input

## Tech stack

- [Bun](https://bun.sh/) for runtime, package management, tests, and builds
- React 19
- Tailwind CSS 4
- shadcn/ui-style component utilities
- TypeScript

## Getting started

Install dependencies:

```bash
bun install
```

Start the development server:

```bash
bun dev
```

Build for production:

```bash
bun run build
```

Run the production server:

```bash
bun start
```

## Scripts

| Command | Description |
| --- | --- |
| `bun dev` | Start the app with Bun hot reload |
| `bun run build` | Build the production bundle |
| `bun start` | Run the production server |
| `bun test` | Run tests |
| `bun run lint` | Run ESLint |

## Keyboard shortcuts

| Shortcut | Action |
| --- | --- |
| `S` | Select tool |
| `B` | Brush tool |
| `E` | Eraser tool |
| `K` | Chroma key tool |
| `W` | Magic wand tool |
| `Shift` + click | Add to magic wand selection |
| `Alt` + click | Subtract from magic wand selection |
| `P` | Pan tool |
| `Space` | Hold to pan |
| `L` | Toggle layers |
| `Cmd/Ctrl` + `O` | Open image |
| `Shift` + `Cmd/Ctrl` + `O` | Open project |
| `Cmd/Ctrl` + `S` | Save project |
| `Cmd/Ctrl` + `Z` | Undo |
| `Shift` + `Cmd/Ctrl` + `Z` | Redo |
| `Delete` / `Backspace` | Delete selection |

## Project structure

```text
app/       Composition root for app wiring
commands/  Deterministic state changes and command history
core/      Pure document/domain models
editor/    Transient editor state, tools, viewport, selection, store
input/     Keyboard, pointer, wheel, and canvas input resolution
renderer/  Canvas/WebGL rendering and overlays
view/      React UI shell and controls
```

## Architecture notes

State changes flow through commands. React components present state and dispatch user intent, while document/editor mutations are handled by command modules. The renderer consumes document and editor snapshots to draw the canvas and overlays without owning application state.