initial commit

features.md

@@ -0,0 +1,48 @@
+# 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