Editor: document tone, right-click word lookup, expanded stats

Four enhancements to make the editor fit real school usage:

- Per-document tone (academic/professional/casual/humorous/creative/
  persuasive/general): new documents.tone column (migration 0002), threaded
  through the docs API, a bilingual ToneSelect dropdown on the title row, and
  injected into the grammar-checkpoint LLM prompt so advice fits the register.
  The voice pass stays tone-agnostic.

- Right-click word lookup: a new offline `lexicon` package serves definitions
  (Wordset, modern ESL-friendly glosses) and synonyms (WordNet synsets first,
  then frequency+stopword-ranked Moby for breadth) from gzipped embedded data,
  behind /api/word/{word} with light morphology. The WordCard popover shows the
  definition and tappable synonym pills that swap the word in place.

- Expanded writing stats: clicking the word count opens a StatsPanel with page
  count, sentences, paragraphs, reading time, average word length, word variety,
  and Flesch-Kincaid reading level — all computed client-side.

Claude-Session: https://claude.ai/code/session_016Yr6jELuRc7hyzYLccQKZd

web/src/components/StatusBar/StatusBar.tsx

@@ -1,7 +1,11 @@
+import { useEffect, useRef, useState } from 'react'
 import type { SaveStatus } from '../../hooks/useAutoSave'
+import { StatsPanel } from './StatsPanel'
 
 interface Props {
   wordCount: number
+  // Live plain text of the document, for the expanded stats panel.
+  text: string
   saveStatus: SaveStatus
   // True while a grammar checkpoint is in flight — shows the breathing rose dot.
   checking: boolean
@@ -20,16 +24,44 @@ const SAVE_LABEL: Record<SaveStatus, string> = {
 // StatusBar is the slim footer: word count on the left, save state and the
 // grammar-checkpoint indicator on the right. The checkpoint dot is a soft rose
 // circle that breathes while a check is in flight (spec → Signature animations).
-export function StatusBar({ wordCount, saveStatus, checking, voicing }: Props) {
+export function StatusBar({ wordCount, text, saveStatus, checking, voicing }: Props) {
   const label = SAVE_LABEL[saveStatus]
+  // The expanded stats panel toggles open when the word count is clicked.
+  const [statsOpen, setStatsOpen] = useState(false)
+  const statsRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!statsOpen) return
+    const onDown = (e: MouseEvent) => {
+      if (!statsRef.current?.contains(e.target as Node)) setStatsOpen(false)
+    }
+    document.addEventListener('mousedown', onDown)
+    return () => document.removeEventListener('mousedown', onDown)
+  }, [statsOpen])
+
   return (
     <footer
       className="flex h-9 shrink-0 items-center gap-3 px-6 text-xs"
       style={{ borderTop: '1px solid var(--color-border)', color: 'var(--color-muted)' }}
     >
-      <span>
-        {wordCount} {wordCount === 1 ? 'word' : 'words'}
-      </span>
+      <div className="relative" ref={statsRef}>
+        <button
+          type="button"
+          onClick={() => setStatsOpen((o) => !o)}
+          aria-haspopup="dialog"
+          aria-expanded={statsOpen}
+          className="rounded-full px-1.5 py-0.5 font-semibold transition-colors"
+          style={{ color: statsOpen ? 'var(--color-accent-hover)' : 'inherit' }}
+          onMouseEnter={(e) => (e.currentTarget.style.color = 'var(--color-accent-hover)')}
+          onMouseLeave={(e) =>
+            (e.currentTarget.style.color = statsOpen ? 'var(--color-accent-hover)' : 'inherit')
+          }
+          title="Writing stats"
+        >
+          {wordCount} {wordCount === 1 ? 'word' : 'words'}
+        </button>
+        {statsOpen && <StatsPanel text={text} wordCount={wordCount} />}
+      </div>
       {checking && (
         <>
           <span aria-hidden>·</span>