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/Editor/WordCard.tsx

@@ -0,0 +1,116 @@
+import type { WordInfo } from '../../api/client'
+
+// WordCard is the right-click popover for any word: its dictionary definition(s)
+// on top and tappable synonym pills below. Clicking a synonym replaces the word
+// in place. Both datasets are offline, so this opens instantly and fills in as
+// the (local) lookup returns. Labels are bilingual (zh-first, en subtitle) to
+// match the rest of Petal's chrome — the writer uses Mandarin and English.
+
+interface Props {
+  word: string
+  info: WordInfo | null
+  loading: boolean
+  style: React.CSSProperties
+  onReplace: (synonym: string) => void
+}
+
+export function WordCard({ word, info, loading, style, onReplace }: Props) {
+  const definitions = info?.definitions ?? []
+  const synonyms = info?.synonyms ?? []
+  const empty = !loading && definitions.length === 0 && synonyms.length === 0
+
+  return (
+    <div
+      role="dialog"
+      aria-label={`Definition and synonyms for ${word}`}
+      className="petal-word-card absolute z-20 p-3.5 text-sm"
+      style={{
+        width: 300,
+        maxHeight: 340,
+        overflowY: 'auto',
+        background: 'var(--color-surface)',
+        border: '1px solid var(--color-border)',
+        borderRadius: 'var(--radius-card)',
+        boxShadow: 'var(--shadow-soft)',
+        ...style,
+      }}
+    >
+      <div className="flex items-center gap-1.5">
+        <span
+          className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-bold"
+          style={{ background: 'var(--color-lavender)', color: 'var(--color-plum)' }}
+        >
+          词语 · Word
+        </span>
+        <span className="font-bold" style={{ color: 'var(--color-plum)' }}>
+          {word}
+        </span>
+      </div>
+
+      {loading && (
+        <div className="mt-3 inline-flex items-center gap-1.5" style={{ color: 'var(--color-muted)' }}>
+          <span
+            className="petal-checkpoint-dot inline-block h-2 w-2 rounded-full"
+            style={{ background: 'var(--color-accent)' }}
+            aria-hidden
+          />
+          查找中… · Looking up…
+        </div>
+      )}
+
+      {definitions.length > 0 && (
+        <div className="mt-3 space-y-2">
+          <p className="text-xs font-bold" style={{ color: 'var(--color-muted)' }}>
+            释义 · Definition
+          </p>
+          <ol className="space-y-1.5">
+            {definitions.map((m, i) => (
+              <li key={i} className="leading-snug" style={{ color: 'var(--color-plum)' }}>
+                {m.part_of_speech && (
+                  <span className="mr-1 italic" style={{ color: 'var(--color-accent-hover)' }}>
+                    {m.part_of_speech}
+                  </span>
+                )}
+                {m.definition}
+                {m.example && (
+                  <span className="mt-0.5 block italic" style={{ color: 'var(--color-muted)' }}>
+                    “{m.example}”
+                  </span>
+                )}
+              </li>
+            ))}
+          </ol>
+        </div>
+      )}
+
+      {synonyms.length > 0 && (
+        <div className="mt-3">
+          <p className="mb-1.5 text-xs font-bold" style={{ color: 'var(--color-muted)' }}>
+            近义词 · Synonyms <span className="font-normal">(点击替换 · tap to swap)</span>
+          </p>
+          <div className="flex flex-wrap gap-1.5">
+            {synonyms.map((s) => (
+              <button
+                key={s}
+                type="button"
+                onClick={() => onReplace(s)}
+                className="rounded-full px-3 py-1 text-xs font-semibold"
+                style={{ background: 'var(--color-surface-alt)', color: 'var(--color-plum)' }}
+                onMouseEnter={(e) => (e.currentTarget.style.background = 'var(--color-accent)')}
+                onMouseLeave={(e) => (e.currentTarget.style.background = 'var(--color-surface-alt)')}
+              >
+                {s}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {empty && (
+        <p className="mt-3 leading-snug" style={{ color: 'var(--color-muted)' }}>
+          没有找到这个词 · Nothing found for this word
+        </p>
+      )}
+    </div>
+  )
+}