feat: add Monaco markdown editor with live preview and auto-save

[rjwalters]

Summary

• Integrate Monaco editor as the primary document editing surface with markdown syntax highlighting, live preview, and debounced auto-save
• Add split/edit/preview view modes with react-markdown rendering
• Lazy-load Monaco (~2MB) to avoid blocking initial page load

Changes

• src/components/MarkdownEditor.tsx — Lazy-loaded Monaco wrapper with theme sync and markdown config
• src/components/MarkdownPreview.tsx — Markdown renderer using react-markdown with Tailwind typography
• src/hooks/use-auto-save.ts — Debounced auto-save hook (2s delay) with unmount flush
• src/pages/DocumentEditPage.tsx — Full editor page with toolbar, save status, and split/edit/preview modes
• src/App.tsx — Add document edit route at /projects/:projectId/documents/:documentId/edit
• src/styles/globals.css — Add @tailwindcss/typography plugin for prose styles
• package.json — Add @monaco-editor/react, react-markdown, @tailwindcss/typography dependencies

Acceptance Criteria Verification

Criterion	Status	Verification
Install and render @monaco-editor/react in document editing view	✅	MarkdownEditor.tsx renders Monaco via lazy import
Configure markdown language support (syntax highlighting)	✅	language="markdown" set on editor
Editor loads document content from the API on mount	✅	useEffect fetches /api/projects/:id/documents/:id on mount
Auto-save that persists content back to the API	✅	useAutoSave hook with 2s debounce calls PUT endpoint
Editor fills available space responsively	✅	flex layout with h-[calc(100vh-3.5rem)] and automaticLayout: true
Basic editor settings: word wrap on, minimap off, reasonable font size	✅	wordWrap: "on", minimap: { enabled: false }, fontSize: 14
Add a live markdown preview pane (side-by-side or togglable)	✅	Split/edit/preview toggle with react-markdown rendering

Test Plan

• All 52 existing tests pass (pnpm test)
• TypeScript compiles clean (tsc --noEmit)
• Biome lint passes (pnpm lint)
• Manual verification needed: Monaco renders with markdown highlighting, auto-save persists, preview renders correctly, theme switching works, responsive layout fills space

Closes #14

[rjwalters]

✅ Approved!

Solid implementation of the Monaco editor integration with well-separated concerns.

Code Quality

MarkdownEditor.tsx — Clean lazy-loading with Suspense, proper theme sync via useTheme(), sensible editor defaults.

MarkdownPreview.tsx — Minimal, focused component. Good use of Tailwind typography plugin for prose rendering.

use-auto-save.ts — Well-designed hook with debouncing, ref-based memoization to avoid stale closures, unmount flush for data safety, and save-in-progress guard to prevent concurrent writes.

DocumentEditPage.tsx — Clean page component with loading/error states, toolbar with view mode toggles (edit/split/preview), and proper credential handling on fetch calls. Route correctly added in App.tsx with ProtectedRoute wrapper.

globals.css — Typography plugin integration via @plugin "@tailwindcss/typography" is the correct Tailwind v4 approach.

Test Execution

Test plan from PR description:

1. pnpm test — ✅ All 52 tests pass (3 pre-existing suite discovery errors in styleguide/review-panel packages, unrelated to this PR)
2. tsc --noEmit — ✅ Clean compilation
3. pnpm lint — ✅ Biome check passes (46 files, no issues)
4. Manual verification (Monaco rendering, auto-save, preview, theme switching) — ⚠️ Skipped: requires browser interaction

Test Scoping

Strategy: Full suite (config files changed — package.json, pnpm-lock.yaml)
Result: 52 tests passed