# OMR Metadata Creator — Features

## Core
- **Load template image** (JPG/PNG) via dialog, drag-and-drop, or click placeholder
- **Load existing metadata.json** to edit previous work
- **Manual ROI (Section) drawing** via click-and-drag on canvas with live preview grid
- **Multiple blocks**, each with multiple sections
- **Section move** — drag any section on canvas (manual stage-level interaction, no Konva artifacts)
- **Section resize** — 8 circular handles (4 corners + 4 edge midpoints) with directional cursors
- **Default rows/cols** — set before drawing so the preview grid appears during draw
- **Live grid preview** (dashed red) inside section boxes during draw and resize
- **Grid lines** (dashed red) shown inside sections based on rows×columns
- **Zoom**: 15%–500% via toolbar buttons, Ctrl+scroll, or 1:1 reset
- **Scroll/pan**: scroll wheel (vertical), Shift+scroll (horizontal), middle-mouse drag (any tool mode), Pan tool (left-click drag)
- **Undo** (Ctrl+Z) — full state snapshots up to 50 deep
- **Quick range generation** for Options/QCount using `parseRangeInput`: `1-9`, `A-D`, comma-separated like `1-5,8,10-12`
- **Keyboard shortcuts**: S/D/P (tools), Del/Backspace (delete section), Ctrl+O (load template), Ctrl+S (export), Ctrl+Z (undo)
- **Clear workspace** with undo support

## Validation & Export
- **Validation**: checks template dimensions, block/section existence, coordinate validity, row/col/align consistency, matrix options shape
- **Export metadata.json** — valid JSON for the OMR pipeline (Electron native dialog or browser download)
- **Web-compatible** — export works in both Electron mode (native dialog) and browser dev mode (Blob download)

## UI / Layout (React/Electron — Stitch design system dark theme)
- **Dark theme** with full Material 3 Stitch token palette (surface, primary, secondary, error, outline variants)
- **Toolbar** (56px): tool buttons (Select/Draw/Pan) with active highlight, centered zoom slider in pill container, Load Template/Load metadata/Export, +Block, Undo, Clear
- **Left sidebar** (280px): blocks listed with 3px active left border, block delete on hover, sections indented with radio icons, stats footer
- **Properties panel** (320px): live-editable fields with commit-on-blur for coords, block type selector, rows/cols, align type, Options/QCount with Generate buttons, MC Limit, Advanced Config (fill threshold, whitepatch, padding, shape)
- **Canvas**: Konva-based with template image, section overlays (per-block colors), grid preview, 8 circular resize handles, dynamic cursors, middle-mouse pan, scroll-to-pan
- **Status bar** (32px): green status dot, system message, zoom percentage, block/section indicator
- **Selection sync** between sidebar ↔ canvas (click block → highlight; click section → select)
- **File drop overlay** — drag-and-drop files onto canvas area (image→template, JSON→metadata)

## Range Parser
- Supports ranges: `A-D`, `1-10`, `-1--9` (negative numbers)
- Comma-separated mixed: `A-D, E, F-H`
- JSON array: `["A","B","C"]`
- Used by both Options and Question Count Generate buttons

## Architecture
- **Electron** main process with IPC handlers for file dialogs, read/write, image base64
- **React 18** + **TypeScript** — strict typing, no `any`
- **Zustand** for state management with undo stack
- **react-konva** for canvas interactions
- **Tailwind CSS v4** with 40+ Stitch design tokens
- **vite-plugin-electron** for dev hot-reload
- **Web-compatible** — most features work in browser mode (`pnpm dev:web`) via `<input>` fallbacks and Blob download