# Editor previews: colors, external links, fenced diagrams and trees

## Problem
Colors written as hex or rgba in notes show only as text, so the user cannot see what they mean. External links look the same as internal links, so it is unclear which ones leave the app. A fenced diagram (Mermaid) or a folder structure (a tree drawn with line characters) shows as plain text although the app already has a diagram engine. Evidence: owner testing on real notes.

## Goal
The editor shows what colors, links, diagrams and folder trees mean without changing the note text.

## Non-Goals
- Editing colors with a picker.
- Rendering diagram types the diagram engine cannot parse; those stay as source.
- Changing how links resolve or open.
- Previews outside the editor (graph, search results, exports).

## User Stories
- As a writer, I want a color swatch next to color values, so that I can see the color.
- As a writer, I want to turn color previews on or off with a right click, so that I control the noise.
- As a writer, I want named colors such as red or gray to preview only when I enable it, so that ordinary words are not decorated.
- As a reader, I want a small arrow on external links, so that I know they leave the app.
- As a writer, I want a Mermaid fence drawn as a diagram with a Source and Diagram toggle, so that I can read and edit it.
- As a writer, I want a folder-structure block drawn with aligned guides and icons, so that it reads as a tree.

## Acceptance Criteria
Design: PaperCraft page "Large vaults and code", artboard "Editor / Code blocks and previews" (swatches, context menu, link arrow, tree and diagram cards).
- [ ] Given text in inline code or plain text that is a 3, 4, 6 or 8 digit hex color, when it is drawn, then a 12 pt rounded swatch with the color appears before it.
- [ ] Given a value written as rgb, rgba, hsl or hsla with valid arguments, when it is drawn, then it gets a swatch with the same color including alpha.
- [ ] Given an invalid value such as a hex with the wrong length or an out-of-range argument, when it is drawn, then no swatch appears and no error is shown.
- [ ] Given the user right-clicks a detected color, when the menu opens, then it shows the color, Copy color, Copy as rgb, a Color previews switch and a Named colors switch.
- [ ] Given the user turns Color previews off, when the note is drawn, then no swatches appear in any note, and the setting survives a restart.
- [ ] Given Named colors is off (default), when the text says red or gray, then no swatch appears; given it is on, then swatches appear only for standard color names written as whole words in inline code.
- [ ] Given a color inside a fenced code block, when it is drawn, then the swatch appears only if the block is a stylesheet, markup, JSON or settings language.
- [ ] Given an external link (a web address), when it is drawn, then a small up-right arrow follows it; given a wikilink or a link inside the vault, then no arrow appears.
- [ ] Given the user clicks an external link, when it opens, then it opens in the system browser exactly as before.
- [ ] Given a fence labeled mermaid whose content the diagram engine can parse, when it is drawn, then it shows as a diagram with a Source and Diagram toggle, defaulting to Diagram.
- [ ] Given the user selects Source, when the card changes, then the original text is shown and editable, and the choice is remembered per block while the note is open.
- [ ] Given a Mermaid fence that cannot be parsed, when it is drawn, then it stays as source with a short unsupported or error chip and nothing is lost.
- [ ] Given a diagram over the engine's size limits, when it is drawn, then it stays as source with a message instead of freezing the UI.
- [ ] Given a fence whose lines use tree characters (branch, corner and vertical bars), when it is drawn, then it is labeled TREE, uses aligned guides and folder or file icons, and the Copy action copies the original text unchanged.
- [ ] Given any preview, when the note is saved, then the file content is byte-for-byte the text the user wrote.
- [ ] Given hostile input (very long lines, thousands of colors in one note), when drawn, then the work is bounded and the UI does not freeze or panic.

## Constraints
- Stack: Rust only, egui and eframe. Detection lives below the UI layer; drawing lives in the UI layer.
- Performance: detection is linear in text size; a note with 1,000 colors adds under 10 ms per frame or is cached by text hash.
- Security: no network access for previews; link opening goes through the existing opener only.
- Compat: macOS, Windows and Linux; light and dark themes with contrast of at least 3:1 for swatch borders.
- Dependencies: none new.
- Strings: all labels and menu text go through the translation tables.
- Design: swatch 12 pt, radius 3, one border; inline code chip radius 6; link arrow 16 pt in the link color.

## Open Questions
- Which color name list counts as standard (the basic web names only, or the full set)?
- Should swatches appear in plain text outside code, or only in inline code and fences?
- Should the Mermaid default be Diagram or Source for notes the user is actively editing?
- Does a tree block need a language label to be recognized, or only the line characters?
- Should the up-right arrow also show on bare web addresses that are not written as links?