`, so `tsc` fails until every one exists.
+
+| Skin | Character | Stage (screen-only) | Motion |
+| --- | --- | --- | --- |
+| `handwritten` | The default hand — casual, college-ruled | **Desk** — warm wood ground, soft lamp pool, pen shadow at the edge | `type` |
+| `journal-hand` | Personal diary, aged paper, sepia ink | **Nightstand** — dim ground, warm lamp vignette | `bloom` |
+| `field-notes` | Pocket notebook, small, dense, graph | **Field** — canvas texture, notebook elastic band | `snap` |
+| `chalkboard` | Chalk on slate, white/pastel ink | **Classroom** — dark slate ground, chalk dust bloom | `draw` |
+| `letter-hand` | Personal correspondence, fountain ink | **Writing desk** — linen ground, envelope shadow behind the sheet | `wipe` |
+| `worksheet` | Practice lines, teaching material | **Schoolroom** — pale ground, pencil-tray edge | `cascade` |
+
+⚠️ Name it `journal-hand`, not `journal` — an academic `journal` skin already exists.
+
+Reuse existing `StageFrame` values where they fit; add new ones only where genuinely needed, and
+keep them in `stage.css` — **never on the sheet.**
+
+### 10.2 Templates
+
+Seven, each declaring its hand in front-matter: **Handwritten letter**, **Journal entry**,
+**Lecture notes** (Cornell), **Recipe card** (index card), **Handwriting worksheet** (practice
+lines — for teachers), **Handwriting capture sheet** (§7.1), and an **Arabic handwritten letter**
+using `ruqaa`. Add `nameKey`/`descKey` to `EN_STRINGS` **and** `STRINGS.ar`.
+
+### 10.3 Presets
+
+Add hand-aware entries to `DOCUMENT_PRESETS`, and confirm the `ExportPreset` flow round-trips a
+`hand` block through save → JSON export → import.
+
+---
+
+## 11. The UI
+
+A **Handwriting** section in `ConfigPanel`, collapsed by default, opening with a single `Switch`.
+When off, everything below is hidden and nothing loads.
+
+- **Hand** — a visual picker rendering the sample phrase *in each hand*, not a text dropdown.
+ Grouped by script; Arabic hands only shown for RTL/auto documents.
+- **Ink** — colour swatches with the pen name.
+- **Paper** — thumbnail grid of the stationeries.
+- **Neatness**, **Slant** — `Slider`s updating a CSS variable live (§3.2). Slant hidden for Arabic.
+- **Aging** — `Slider`.
+- **Hand-drawn elements** — `Switch` (lazy-loads `roughjs`).
+- **Two hands** — heading hand selector.
+- **My handwriting** — §7 upload / draw flow.
+
+Plus a `⌘K` command, hand-affinity badges in the skin picker and Skin Rail (§8.1), and hover-preview
+in the rail for the six new skins.
+
+---
+
+## 12. Guardrails — handwriting, signatures and authenticity
+
+Handwriting plus aging plus signatures is, taken together, a document-forgery kit. This feature is
+legitimate and creative and should ship — but keep these boundaries:
+
+- **Do not build handwriting replication from a photo or writing sample.** §7 is the user's *own*
+ hand, produced by their own deliberate effort. Never "match this handwriting" from an image.
+- **Signature blocks are signature *lines*** — a labelled ruled space to sign, not a rendered
+ imitation of a real person's signature.
+- **Do not ship preset combinations framed as making a document look like a genuine aged or official
+ record.** Aging is a stylistic control, not an authenticity simulator.
+- Leave the "Made with Scripto" attribution default **on**.
+- Keep the framing creative — notes, letters, journals, worksheets, cards.
+
+---
+
+## 13. Verification
+
+```bash
+npx tsc -b --force && npm run lint && npm run build && npm run test
+SCRIPTO_VISUAL=1 npm run test
+```
+
+**New tests (required):**
+- **Determinism** — the PRNG yields byte-identical bucket sequences across two runs for one seed.
+- **Skip list** — the plugin leaves `pre`, `code`, `.katex` and `svg` subtrees untouched (assert node
+ counts unchanged).
+- **Arabic integrity** — an Arabic paragraph splits only at spaces; no word contains a nested `.hw`.
+- **Rule snapping** — `snapMarginsToRule` returns an exact multiple of the pitch.
+- **Affinity exhaustiveness** — every one of the 29 skins declares a `handAffinity`.
+- **Visual fixture** — `tests/visual/fixtures/handwriting.md` (ruled + drawn elements + a code block
+ + a table) in the Paged.js harness.
+
+**Manual:**
+- [ ] **`hand: 'none'` is a total no-op** — PDF byte-identical to `main`, and **zero** handwriting
+ font / `roughjs` / `opentype.js` requests in the network tab.
+- [ ] A 5-page ruled document: text sits on the rules on **every** page (§4.2).
+- [ ] Code, math and Mermaid stay legible in a handwriting document.
+- [ ] Arabic Ruqʿah exports correctly RTL with connected letterforms intact.
+- [ ] Exported PDF text is still **selectable and searchable** — nothing rasterised.
+- [ ] The hand-matrix contact sheet (§8.3): no template is visibly broken.
+- [ ] Neatness slider on a 20-page document: instant, no re-pagination.
+- [ ] Toggling a hand on/off: no fallback flash, no metric jump (§8.4).
+- [ ] 20k-word document degrades gracefully with the toast.
+- [ ] Offline: a used hand works; a new one fails with an honest message.
+- [ ] Reduced motion, LTR + RTL, light + dark, 375 px.
+
+---
+
+## 14. Out of scope
+
+Anything needing a server. Also explicitly **not** now: rasterising SVG-filter ink texture into the
+PDF (it destroys the text layer — prototype it screen-only and opt-in if at all), scan/photocopy
+simulation, glyph-level DOM splitting (§3.3), and Arabic in the §7.2 draw-your-own flow.
+
+---
+
+## 15. Suggested order
+
+**Release 1 — "Handwriting"**
+1. §2 data model + prove `hand: 'none'` is a no-op
+2. §6 font registry + on-demand loading (nothing works without it)
+3. §5.2 sketchy Mermaid — ten lines, biggest demo payoff, do it early
+4. §3 variation engine + determinism tests
+5. §4 stationery, then **§4.2 rule-pitch locking — budget real time for this**
+6. §5 hand-drawn elements via `roughjs`
+7. §8 the 29-skin affinity + yield audit, §8.4 smooth application
+8. §10 skins/stages/templates, §11 UI
+
+**Release 2 — "Your own hand"**
+9. §7.1 font import
+10. §7.2 draw-your-alphabet (`perfect-freehand` + `opentype.js`)
+11. §9 viral mechanics + content
+
+Ship the two releases separately. Do not batch.
+
+---
+
+## 16. Final report
+
+What shipped; screenshots of the 6 new skins, the stationery grid, and the §8.3 hand matrix; the
+`hand: 'none'` PDF diff result; the §3.5 wrap-time measurement; PDF size delta with a hand active;
+bundle delta with `drawnElements` off vs on; and anything deferred, with the reason.
diff --git a/docs/V4_VISUAL_EDITOR_PROMPT.md b/docs/V4_VISUAL_EDITOR_PROMPT.md
new file mode 100644
index 0000000..9729bfa
--- /dev/null
+++ b/docs/V4_VISUAL_EDITOR_PROMPT.md
@@ -0,0 +1,485 @@
+# Scripto — The Visual Document Editor
+
+> **The third brief.** `V2_FRONTEND_PROMPT.md` (Stage system, page-break editor, export presets,
+> `App.tsx` decomposition) is delivered. `V3_HANDWRITING_PROMPT.md` is the handwriting engine.
+> **This one is the largest and the most dangerous** — it changes what Scripto *is*.
+>
+> **Goal:** *"A professional visual document editor powered by Markdown"* — not *"a Markdown editor
+> with a PDF preview."* Click anything in the preview, edit it, and the Markdown updates.
+>
+> **Still frontend-only. No backend.**
+>
+> §1 contains five architectural decisions. **Four of them contradict the obvious approach, and
+> getting any one wrong makes the feature unshippable.** Read §1 before anything else.
+
+---
+
+## 0. What already exists — do not rebuild it
+
+A generic version of this brief would say "create a document AST", "build a theme system", "add
+source mapping". **All three already exist here.** Building parallel versions is the main way this
+project can fail.
+
+| The generic instruction | The reality in this repo |
+| --- | --- |
+| "Create a document AST" | **mdast already is it.** react-markdown parses to mdast → hast. `mdast-util-*`, `remark-parse`, `remark-stringify` and `mdast-util-to-markdown` are **already in `node_modules`** (transitively — declare them directly if you import them). |
+| "Add source position mapping" | **`src/markdown/plugins/rehypeSourceLine.ts`** already stamps `data-source-line` on every block element, and `useScrollSync` already consumes it. It needs *extending* (§2.1), not writing. |
+| "Build a theme system" | `src/pdf/documentStyle.ts` maps `PdfConfig` → CSS custom properties + `data-*`; `document.css` reads them. It needs *widening* from 4 tokens to a full set (§6). |
+| "Templates all look the same" | **Audit before rebuilding.** Commit `e96999e` ("give every skin its own component language") and `42cb1e3` ("pair every template with a skin") landed recently. There are now **29 skins in 6 groups**. Screenshot all 29 first and find what is *actually* still undifferentiated. |
+| "Add a directive system" | `remark-directive` is already a dependency and already powers callouts (`:::tip`) and page directives (`::page-break`, `:::keep-together`, `:::landscape`). |
+| "Add undo/redo" | CodeMirror 6 already owns a full history. §1.4 explains why you must not build a second one. |
+
+**Also still true — the five invariants from `V2_FRONTEND_PROMPT.md` §0.** Re-read them. The one
+this brief stresses hardest: **`.scripto-doc` is cloned verbatim into the PDF, HTML and Word
+exports.** Every decision in §1 follows from it.
+
+---
+
+## 1. The five decisions
+
+### 1.1 mdast is the document model
+
+Do not invent a new AST. mdast is a mature, positioned, spec'd document model with a complete
+utility ecosystem, and it is already what the renderer consumes. A parallel model would need to stay
+in sync with it forever — a permanent bug source for zero benefit.
+
+**The document model is: the Markdown string + its mdast parse.** Nothing else is authoritative.
+
+### 1.2 ⭐ Positional splicing — never whole-document re-serialization
+
+**This is the decision that determines whether the feature ships.**
+
+The obvious design is `edit → mutate AST → remark-stringify → new Markdown`. **Do not do this.**
+`remark-stringify` normalises the *entire* document on every write:
+
+| The user wrote | It comes back as |
+| --- | --- |
+| `* item` | `- item` (bullet marker normalised) |
+| `_emphasis_` | `*emphasis*` |
+| `Setext heading\n===` | `# Setext heading` |
+| A hand-aligned table | Re-aligned to its own convention |
+| Their line wrapping | Re-wrapped |
+| Their raw HTML | Reformatted |
+
+So the first click on a checkbox silently rewrites the user's whole file. Their diff explodes. Their
+git history is noise. **This is the single most common reason bidirectional Markdown editors fail**,
+and the brief you are replacing asks for exactly this ("Do NOT introduce ugly, unreadable generated
+Markdown" — while specifying the architecture that guarantees it).
+
+**Do this instead.** Every mdast node carries
+`position: { start: { line, column, offset }, end: { … } }`. An edit is therefore a **byte-range
+splice on the Markdown string**:
+
+```ts
+const next = markdown.slice(0, node.position.start.offset)
+ + replacement
+ + markdown.slice(node.position.end.offset)
+```
+
+Everything outside that range stays **byte-identical**. The user's formatting, spacing and style are
+untouched. The diff is one line.
+
+**The rule, stated once:** *serialize only what is new; never re-serialize what already exists.*
+When inserting a genuinely new node, use `mdast-util-to-markdown` on **that node alone** and splice
+the result. Never stringify the root.
+
+### 1.3 Overlay editing — not `contenteditable`
+
+Making `.scripto-doc` editable is tempting and wrong, for three reasons:
+
+1. It is **cloned into the PDF/HTML/Word export**. `cleanClone()` in `src/io/exporters.ts` already
+ strips `contenteditable` — someone has already been bitten by this. Do not add more of it.
+2. `contenteditable` + React + a Markdown round-trip is a well-known disaster: the browser injects
+ `
`, ``, `` and pasted formatting that has no Markdown representation.
+3. React will fight the browser over DOM ownership on every re-render.
+
+**Instead:** clicking a text node opens a **positioned overlay** — a plain `