initial commit

_bmad-output/implementation-artifacts/9-2-codemirror-6-editor.md

@@ -0,0 +1,37 @@
+---
+epic: 9
+story: 9.2
+title: "CodeMirror 6 Editor"
+status: draft
+---
+
+## Epic 9 — Web App (React + WASM)
+**Goal:** Zero-install web experience with real-time collaboration.
+
+### Story 9.2: CodeMirror 6 Editor
+
+As a web user,
+I want a rich text editor with CalcPad syntax highlighting and inline answers,
+So that I have a polished, responsive editing experience in the browser.
+
+**Acceptance Criteria:**
+
+**Given** the CodeMirror 6 editor is loaded
+**When** a user types CalcPad syntax (numbers, units, operators, variables, functions, comments, headers)
+**Then** each token type is highlighted with distinct, theme-appropriate colors
+**And** the highlighting is provided by a custom CodeMirror 6 language extension
+
+**Given** the editor is displaying a CalcPad sheet
+**When** a line produces a computed result
+**Then** the answer is displayed in a custom gutter or right-aligned overlay column
+**And** the answer column is visually distinct from the input column
+
+**Given** a user is typing in the editor
+**When** they pause or a keystroke occurs
+**Then** the sheet is re-evaluated after a 50ms debounce period
+**And** the answer column updates in place without full page re-render
+
+**Given** a line contains a syntax error or invalid expression
+**When** the evaluation runs
+**Then** the error is indicated inline (e.g., red underline or gutter marker)
+**And** the answer column shows an error indicator or remains blank for that line