feat: add magic wand tool with settings and controls, including UI integration and functionality

README.md

@@ -1,22 +1,92 @@
 # Image Studio
 
-Minimal Bun + React starter with Tailwind CSS and shadcn/ui configured.
+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.
 
-## Install
+## Features
+
+- Import images into an artboard
+- 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
 ```
 
-## Development
+Start the development server:
 
 ```bash
 bun dev
 ```
 
-## Production
+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 |
+| `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.