refboard-ayon/CHANGELOG.md

# RefBoard Changelog

Collaborative reference image board for game dev teams (PureRef-style, web-based).

---

## v0.4.0 — Layers, Groups & UI Overhaul (2026-03-09)

### Added
- **Layer panel** — collapsible sidebar showing all canvas objects with visibility toggle, lock toggle, drag-to-reorder, and delete
- **Grouping** — Ctrl+G to group selected objects, Ctrl+Shift+G to ungroup; also available in right-click context menu
- **Arrangement tools** — right-click to auto-arrange selected objects in Grid, Row, or Column layout
- **Number shortcuts** — keys 1-5 select tools (1=Select, 2=Pan, 3=Draw, 4=Text, 5=Eraser)
- **Shortcut labels on toolbar** — each tool button shows its name and number key badge
- **Layers toggle** in toolbar — click to show/hide the layer panel

### Changed
- **All pages redesigned** — Login, CollectionList, CollectionDetail, and Editor all share a cohesive dark theme with refined spacing, gradients, subtle shadows, and premium typography
- **Background**: deeper `#0d0d0d` base with subtle radial gradient accents
- **Cards**: refined borders, hover lift animations, gradient thumbnails
- **Modals**: backdrop blur, deeper shadows, better spacing
- **Buttons**: gradient fills with glow shadows, smooth transitions
- **Toolbar**: taller (44px), tool buttons show name + number key, gradient active state, stacked user avatars
- **Toast notifications**: frosted glass effect with backdrop blur

### Fixed
- **Copy/paste creating empty outlines** — images now properly cloned using `FabricImage.fromURL` instead of generic `fromObject` which didn't reload image data
- **Copy includes `src`** — serialization now includes `['id', 'src']` so image URLs survive clipboard operations

---

## v0.3.0 — UX Polish & Clipboard (2026-03-09)

### Added
- **Right-click context menu** — Copy, Paste, Duplicate, Copy as Image, Layer ordering, Select All, Fit All, Delete
- **Copy to system clipboard** — Ctrl+Shift+C copies selected objects as PNG image (paste in Paint, Photoshop, etc.)
- **Layer ordering** — `]` bring forward, `[` send backward
- **Zoom +/- buttons** in toolbar with Ctrl+=/Ctrl+- keyboard shortcuts
- **Toast notifications** — user join/leave alerts, copy confirmation
- **Empty canvas guide** — shows instructions when canvas is blank (drop, paste, draw, text)

### Fixed
- Fixed `FabricObj` undefined error in paste handler
- Fixed all Fabric.js TypeScript type mismatches (`toJSON`, `fromObject`, `bringObjectForward`)
- Zero TypeScript errors across the project

---

## v0.2.0 — Real-time Collaboration Rewrite (2026-03-09)

### Added
- **Full-scene sync (Excalidraw approach)** — broadcast entire `canvas.toJSON()` on every change, `loadFromJSON` on receive
- **Lightweight transform events** — 50ms throttled position/scale/angle during drag for smooth real-time
- **Interaction deferral** — remote scene updates queued during active mouse interaction to prevent conflicts
- **Suppress/resume broadcasts** — prevents flooding during initial load and remote scene application
- **User search autocomplete** in ShareDialog — searches by name/email via `/api/users/search`
- **Copy/Paste/Duplicate** — Ctrl+C/V for canvas objects, Ctrl+D for duplicate with offset
- **Breadcrumb navigation** — Username / Collection / Board with clickable links
- **User cursors** — real-time cursor position display with colored name labels

### Changed
- Save debounce reduced from 5s to 2s
- Remote changes no longer reset save timer (checks `isRemoteUpdate()`)
- Scene sync throttle: 300ms for full scene, 50ms for transforms

### Fixed
- Images now served through backend proxy (`/api/images/*`) instead of internal Docker URLs
- Canvas height not filling viewport
- `cursor:move` vs `cursor:moved` event name mismatch
- User joined/left field name mismatches (`userId`/`id`, `displayName`/`display_name`)
- "Unsaved" status stuck due to remote changes triggering save debounce

---

## v0.1.0 — Initial Scaffold (2026-03-08)

### Architecture
- **Frontend**: React + Vite + TypeScript + Fabric.js v6
- **Backend**: Express + SQLite (WAL mode) + Socket.IO
- **Storage**: MinIO (S3-compatible) for images
- **Auth**: JWT-based with login/register
- **Deployment**: Docker single-container (multi-stage build)

### Features
- Collections with boards hierarchy
- Board editor with Fabric.js canvas
- Tools: Select, Pan, Draw (PencilBrush), Text (IText), Eraser
- Image upload via drag & drop and clipboard paste
- URL drag support (drag image URL from browser)
- Auto-save with debounce
- Canvas state persistence (JSON in SQLite)
- Collection sharing with role-based access (owner, editor, viewer)
- Undo/Redo history
- Scroll-to-zoom, middle-mouse pan, space+drag pan
- Fit All (Ctrl+0)
- Select All (Ctrl+A)
- Delete selected (Del/Backspace)
- Dark theme UI
- Compact toolbar with SVG icons
- Status bar with save indicator
- Color picker for draw/text tools
- Stroke width slider (draw mode)
- Font size slider (text mode)
- Online user avatars in toolbar

### Backend Endpoints
- `POST /api/auth/register` — create account
- `POST /api/auth/login` — JWT login
- `GET /api/collections` — list user's collections
- `POST /api/collections` — create collection
- `GET /api/boards/:id` — get board with canvas state
- `POST /api/boards/:id/save` — save canvas state
- `POST /api/boards/:id/images` — upload image to MinIO
- `POST /api/boards/:id/images/from-url` — upload from URL
- `GET /api/images/*` — image proxy (MinIO → browser)
- `GET /api/users/search` — user search for sharing

### Socket.IO Events
- `board:join` / `board:leave` — room management
- `scene:update` — full canvas JSON broadcast
- `object:transform` — lightweight transform during drag
- `cursor:move` / `cursor:moved` — real-time cursor positions
- `user:joined` / `user:left` — presence notifications

### File Structure (38 files)
```
refboard/
├── backend/
│   ├── server.js          # Express + Socket.IO setup
│   ├── db.js              # SQLite with WAL mode
│   ├── auth.js            # JWT auth middleware
│   ├── minio.js           # MinIO client + image proxy URLs
│   ├── routes/
│   │   ├── auth.js        # Login/register
│   │   ├── boards.js      # Board CRUD + image upload
│   │   └── collections.js # Collection CRUD + sharing
│   └── socket/
│       ├── index.js        # Socket.IO auth + setup
│       └── board-room.js   # Room management + sync relay
├── frontend/
│   ├── src/
│   │   ├── canvas/
│   │   │   ├── FabricCanvas.tsx  # Fabric.js canvas wrapper
│   │   │   ├── image-drop.ts    # Drag/drop + paste handlers
│   │   │   ├── sync.ts          # Full-scene sync engine
│   │   │   ├── history.ts       # Undo/redo manager
│   │   │   └── tools.ts         # Tool activation logic
│   │   ├── components/
│   │   │   ├── Toolbar.tsx       # Tool bar with SVG icons
│   │   │   ├── StatusBar.tsx     # Bottom status bar
│   │   │   ├── UserCursors.tsx   # Remote cursor display
│   │   │   ├── ContextMenu.tsx   # Right-click menu
│   │   │   ├── ShareDialog.tsx   # Collection sharing
│   │   │   └── ColorPicker.tsx   # Color selection
│   │   ├── pages/
│   │   │   ├── Editor.tsx        # Main board editor
│   │   │   ├── Dashboard.tsx     # Collections list
│   │   │   └── Login.tsx         # Auth page
│   │   ├── api.ts               # HTTP API client
│   │   ├── auth.ts              # Auth context
│   │   └── socket.ts            # Socket.IO client
│   └── vite.config.ts
├── Dockerfile
└── docker-compose.yml
```