Phase 6: Floating Writer — markdown editor with focus modes

[sonnes]

Goal

A markdown-aware text editor that floats over other apps, with focus modes for distraction-free writing and built-in writing analysis tools.

Note: This phase can run in parallel with Phases 4-5 since it has no dependencies on them.

Design Reference

Write — Floating Panel

Deliverables

Floating Editor Window

• NSPanel (960×720 with dim overlay #00000033):
  • Writer panel: 720×640, offset 120/40 from overlay origin
  • Corner radius 10, shadow (blur 48, y 12, spread 2, #00000018)
  • This panel SHOULD activate (unlike the keyboard) since the user types into it

Title Bar (38px, fill #F6F6F6)

• Traffic-light dots (close/minimize/zoom)
• Navigation arrows (back/forward through documents)
• Breadcrumb showing filename (e.g., "Meeting Notes.md")
• View/sort/search icons on the right

Menu Bar (28px, fill #F6F6F6)

• File — New, Open, Save, Save As, Export
• Edit — Undo, Redo, Cut, Copy, Paste, Select All
• Format — Bold, Italic, Underline, Heading levels, Lists, Quote, Code
• View — Toggle sidebar, zoom controls
• Focus — blue pill toggle (#3478F6). Opens the Focus dropdown

Writing Area

• Font: JetBrains Mono 16px, line height 2×
• Padding: 40px top/bottom, 72px left/right
• Markdown rendering — syntax highlighting for headings, bold, italic, code, links
• Block types: paragraphs, headings (H1-H6), bullet lists, numbered lists, blockquotes, code blocks, checkboxes

Format Bar (36px, fill #FAFAFA)

• Block type selector dropdown ("Paragraph")
• H (heading toggle)
• Bullet list, numbered list
• Blockquote, code block, checkbox
• Bold (B), Italic (I), Underline (U)
• Link, image insertion

Focus Modes (via Focus dropdown, 220px, corner radius 8)

• Disable Focus Mode (⌘D)
• Sentence — dims all text except the current sentence
• Paragraph — dims all text except the current paragraph (shown selected in design, blue highlight)
• Typewriter — keeps current line vertically centered in the view
• Dimmed text uses #C8C8C8, active text uses #1A1A1A

Show Syntax (submenu in Focus dropdown)

• Color-coded parts of speech using NLTagger with .lexicalClass:
  • Adjectives — blue
  • Nouns — pink/red
  • Adverbs — green
  • Verbs — orange
  • Conjunctions — purple
• Toggle via ⇧⌘D shortcut

Style Check (submenu: "Disable Style Check" ⌥⇧⌘D)

• Fillers — highlight filler words ("basically", "actually", "just", "really")
• Cliches — highlight cliche phrases
• Redundancies — highlight redundant expressions
• Custom — user-defined patterns
• Each category is independently togglable (checkmark when enabled)

Footer (30px, fill #F6F6F6)

• Left: word count, character count, estimated read time (e.g., "312 words 1,847 characters 2 min read")
• Right: current focus mode indicator + blue dot (e.g., "Paragraph Focus ●")

Document Persistence

• SwiftData Document model — id, name, content (markdown string), createdAt, updatedAt
• Document list with search (accessible from File menu or sidebar)

Acceptance Criteria

• Editor opens as a floating panel with dim overlay
• Can type and format markdown text with JetBrains Mono
• Format bar toggles bold/italic/underline/headings/lists correctly
• Paragraph Focus mode dims all text except the current paragraph
• Sentence and Typewriter focus modes work correctly
• Show Syntax colors parts of speech in real-time
• Style Check highlights filler words
• Footer shows accurate word/character count and read time
• Documents persist and can be reopened

Dependencies

• Phase 0 (SwiftData models, design tokens, NSPanel infrastructure)
• Independent of Phases 4-5 (can be built in parallel)