masi/notescraft

Fork 0

Files

T

Marcos Paulo 5e8020aa38

ci / ci (macos-latest) (push) Has been cancelled

Details

ci / ci (ubuntu-latest) (push) Has been cancelled

Details

ci / ci (windows-latest) (push) Has been cancelled

Details

feat: Obsidian basics, editor previews, graph rework, query blocks, stacked tabs, pop-out windows

Editor previews (colour swatches, arrows, embeds), the 18 obsidian-basics tasks (find and replace
with regex, back/forward, auto-pair, footnotes, folding, search operators, split view, PDF/audio/
video embeds, spelling, drag and drop, pinned tabs, settings) and round 2: ```query blocks, stacked
tabs, pop-out windows, tasks ticked inside embeds, text around an embed, embeds that follow edits,
block menu shortcut. New crates: notescraft-regex (linear-time engine) and notescraft-syntax.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

2026-10-19 11:21:19 -03:00

126 KiB

Raw Permalink Blame History

AI UI Implementation Spec: Editor / Code blocks and previews (egui)

1. Mandatory Enforcement Rules

MUST NOT use position: absolute (or Tailwind absolute) on in-flow children (179 flow nodes under root)
MUST use token --canvas (or tokens::CANVAS) instead of hardcoded hex #11111b on Editor / Code blocks and previews (#247)
MUST use row auto-layout on Editor / Code blocks and previews (#247) with gap 8px and padding [8px, 8px, 8px, 8px]
MUST use token --bg (or tokens::BG) instead of hardcoded hex #1e1e2e on Note Card (#248)
MUST use column auto-layout on Note Card (#248) with gap 24px and padding [32px, 48px, 32px, 48px]
MUST use row auto-layout on Paragraph (#249) with gap 8px and padding [0px, 0px, 0px, 0px]
MUST use token --text (or tokens::TEXT) instead of hardcoded hex #cdd6f4 on Set the accent to (#250)
MUST include exact text string "Set the accent to" for Set the accent to (#250)
MUST use token --surface-2 (or tokens::SURFACE_2) instead of hardcoded hex #313244 on Inline Code / Color (#251)
MUST use row auto-layout on Inline Code / Color (#251) with gap 4px and padding [0px, 8px, 0px, 8px]
MUST use column auto-layout on Swatch (#252) with gap 0px and padding [0px, 0px, 0px, 0px]
MUST use token --syn-number (or tokens::SYN_NUMBER) instead of hardcoded hex #fab387 on #cba6f7 (#253)
MUST include exact text string "#cba6f7" for #cba6f7 (#253)
MUST use token --text (or tokens::TEXT) instead of hardcoded hex #cdd6f4 on or (#254)
MUST include exact text string "or" for or (#254)
MUST use token --surface-2 (or tokens::SURFACE_2) instead of hardcoded hex #313244 on Inline Code / Color rgba (#255)
MUST use row auto-layout on Inline Code / Color rgba (#255) with gap 4px and padding [0px, 8px, 0px, 8px]
MUST use column auto-layout on Swatch (#256) with gap 0px and padding [0px, 0px, 0px, 0px]
MUST use token --syn-number (or tokens::SYN_NUMBER) instead of hardcoded hex #fab387 on rgba(137, 180, 250, 0.8) (#257)
MUST include exact text string "rgba(137, 180, 250, 0.8)" for rgba(137, 180, 250, 0.8) (#257)
MUST use token --text (or tokens::TEXT) instead of hardcoded hex #cdd6f4 on and read the (#258)
MUST include exact text string "and read the" for and read the (#258)
MUST use token --surface-2 (or tokens::SURFACE_2) instead of hardcoded hex #313244 on Inline Code (#259)
MUST use column auto-layout on Inline Code (#259) with gap 0px and padding [0px, 8px, 0px, 8px]
MUST use token --syn-string (or tokens::SYN_STRING) instead of hardcoded hex #a6e3a1 on theme.toml (#260)
MUST include exact text string "theme.toml" for theme.toml (#260)
MUST use token --text (or tokens::TEXT) instead of hardcoded hex #cdd6f4 on file, or the (#261)
MUST include exact text string "file, or the" for file, or the (#261)
MUST use row auto-layout on External Link (#262) with gap 4px and padding [0px, 0px, 0px, 0px]
MUST use token --link (or tokens::LINK) instead of hardcoded hex #89b4fa on egui docs (#263)
MUST include exact text string "egui docs" for egui docs (#263)
MUST use token --canvas (or tokens::CANVAS) instead of hardcoded hex #11111b on Code Card / Rust (#267)
MUST use column auto-layout on Code Card / Rust (#267) with gap 0px and padding [0px, 0px, 0px, 0px]
MUST use row auto-layout on Code Header (#268) with gap 8px and padding [8px, 8px, 0px, 16px]
MUST use token --text-muted (or tokens::TEXT_MUTED) instead of hardcoded hex #a6adc8 on Language Label (#269)
MUST include exact text string "RUST" for Language Label (#269)
MUST use column auto-layout on Frame (#270) with gap 0px and padding [0px, 0px, 0px, 0px]
MUST use row auto-layout on Toolbar (#271) with gap 4px and padding [0px, 0px, 0px, 0px]
MUST use row auto-layout on Action / Wrap (#272) with gap 0px and padding [0px, 0px, 0px, 0px]
MUST use token --surface-2 (or tokens::SURFACE_2) instead of hardcoded hex #313244 on Action / Copy (#278)
MUST use row auto-layout on Action / Copy (#278) with gap 4px and padding [0px, 8px, 0px, 8px]
MUST use token --text (or tokens::TEXT) instead of hardcoded hex #cdd6f4 on Copy (#282)
MUST include exact text string "Copy" for Copy (#282)
MUST use column auto-layout on Code Lines (#283) with gap 4px and padding [8px, 16px, 16px, 16px]
MUST use row auto-layout on Code Line 1 (#284) with gap 8px and padding [0px, 0px, 0px, 0px]
MUST use token --syn-keyword (or tokens::SYN_KEYWORD) instead of hardcoded hex #cba6f7 on fn (#285)
MUST include exact text string "fn" for fn (#285)
MUST use token --syn-function (or tokens::SYN_FUNCTION) instead of hardcoded hex #89b4fa on next_due (#286)
MUST include exact text string "next_due" for next_due (#286)
MUST use token --syn-punct (or tokens::SYN_PUNCT) instead of hardcoded hex #9399b2 on ( (#287)
MUST include exact text string "(" for ( (#287)
MUST use token --text (or tokens::TEXT) instead of hardcoded hex #cdd6f4 on now (#288)
MUST include exact text string "now" for now (#288)
MUST use token --syn-punct (or tokens::SYN_PUNCT) instead of hardcoded hex #9399b2 on : (#289)
MUST include exact text string ":" for : (#289)
MUST use token --syn-type (or tokens::SYN_TYPE) instead of hardcoded hex #f9e2af on Date (#290)
MUST include exact text string "Date" for Date (#290)
MUST use token --syn-punct (or tokens::SYN_PUNCT) instead of hardcoded hex #9399b2 on ) -> (#291)
MUST include exact text string ") ->" for ) -> (#291)
MUST use token --syn-type (or tokens::SYN_TYPE) instead of hardcoded hex #f9e2af on Option<Task> (#292)
MUST include exact text string "Option" for Option<Task> (#292)
MUST use token --syn-punct (or tokens::SYN_PUNCT) instead of hardcoded hex #9399b2 on { (#293)
MUST include exact text string "{" for { (#293)
MUST use row auto-layout on Code Line 2 (#294) with gap 8px and padding [0px, 0px, 0px, 16px]
MUST use token --syn-comment (or tokens::SYN_COMMENT) instead of hardcoded hex #8a8fa8 on // first task that is not done (#295)
MUST include exact text string "// first task that is not done yet" for // first task that is not done (#295)
MUST use row auto-layout on Code Line 3 (#296) with gap 8px and padding [0px, 0px, 0px, 16px]
MUST use token --syn-keyword (or tokens::SYN_KEYWORD) instead of hardcoded hex #cba6f7 on let (#297)
MUST include exact text string "let" for let (#297)
MUST use token --text (or tokens::TEXT) instead of hardcoded hex #cdd6f4 on limit (#298)
MUST include exact text string "limit" for limit (#298)
MUST use token --syn-punct (or tokens::SYN_PUNCT) instead of hardcoded hex #9399b2 on = (#299)
MUST include exact text string "=" for = (#299)
MUST use token --syn-number (or tokens::SYN_NUMBER) instead of hardcoded hex #fab387 on 42 (#300)
MUST include exact text string "42" for 42 (#300)
MUST use token --syn-punct (or tokens::SYN_PUNCT) instead of hardcoded hex #9399b2 on ; (#301)
MUST include exact text string ";" for ; (#301)
MUST use token --syn-string (or tokens::SYN_STRING) instead of hardcoded hex #a6e3a1 on "agenda" (#302)
MUST include exact text string ""agenda"" for "agenda" (#302)
MUST use row auto-layout on Code Line 4 (#303) with gap 8px and padding [0px, 0px, 0px, 0px]
MUST use token --syn-punct (or tokens::SYN_PUNCT) instead of hardcoded hex #9399b2 on } (#304)
MUST include exact text string "}" for } (#304)
MUST use token --canvas (or tokens::CANVAS) instead of hardcoded hex #11111b on Code Card / JSON (#305)
MUST use column auto-layout on Code Card / JSON (#305) with gap 0px and padding [0px, 0px, 0px, 0px]
MUST use row auto-layout on Code Header (#306) with gap 8px and padding [8px, 8px, 0px, 16px]
MUST use token --text-muted (or tokens::TEXT_MUTED) instead of hardcoded hex #a6adc8 on Language Label (#307)
MUST include exact text string "JSON" for Language Label (#307)
MUST use token --surface (or tokens::SURFACE) instead of hardcoded hex #181825 on Chip / Valid (#308)
MUST use row auto-layout on Chip / Valid (#308) with gap 4px and padding [0px, 8px, 0px, 8px]
MUST use token --success (or tokens::SUCCESS) instead of hardcoded hex #a6e3a1 on Valid (#311)
MUST include exact text string "Valid" for Valid (#311)
MUST use column auto-layout on Frame (#312) with gap 0px and padding [0px, 0px, 0px, 0px]
MUST use row auto-layout on Toolbar (#313) with gap 4px and padding [0px, 0px, 0px, 0px]
MUST use token --accent (or tokens::ACCENT) instead of hardcoded hex #cba6f7 on Action / Format (#314)
MUST use row auto-layout on Action / Format (#314) with gap 4px and padding [0px, 8px, 0px, 8px]
MUST use token --on-accent (or tokens::ON_ACCENT) instead of hardcoded hex #11111b on Format (#324)
MUST include exact text string "Format" for Format (#324)
MUST use row auto-layout on Action / Minify (#325) with gap 4px and padding [0px, 8px, 0px, 8px]
MUST use token --text-muted (or tokens::TEXT_MUTED) instead of hardcoded hex #a6adc8 on Minify (#331)
MUST include exact text string "Minify" for Minify (#331)
MUST use row auto-layout on Action / Copy (#332) with gap 4px and padding [0px, 8px, 0px, 8px]
MUST use token --text-muted (or tokens::TEXT_MUTED) instead of hardcoded hex #a6adc8 on Copy (#336)
MUST include exact text string "Copy" for Copy (#336)
MUST use column auto-layout on Code Lines (#337) with gap 4px and padding [8px, 16px, 16px, 16px]
MUST use row auto-layout on Code Line 1 (#338) with gap 8px and padding [0px, 0px, 0px, 0px]
MUST use token --syn-punct (or tokens::SYN_PUNCT) instead of hardcoded hex #9399b2 on { (#339)
MUST include exact text string "{" for { (#339)
MUST use row auto-layout on Code Line 2 (#340) with gap 8px and padding [0px, 0px, 0px, 16px]
MUST use token --syn-key (or tokens::SYN_KEY) instead of hardcoded hex #74c7ec on "theme" (#341)
MUST include exact text string ""theme"" for "theme" (#341)
MUST use token --syn-punct (or tokens::SYN_PUNCT) instead of hardcoded hex #9399b2 on : (#342)
MUST include exact text string ":" for : (#342)
MUST use token --syn-string (or tokens::SYN_STRING) instead of hardcoded hex #a6e3a1 on "catppuccin-mocha" (#343)
MUST include exact text string ""catppuccin-mocha"" for "catppuccin-mocha" (#343)
MUST use token --syn-punct (or tokens::SYN_PUNCT) instead of hardcoded hex #9399b2 on , (#344)
MUST include exact text string "," for , (#344)
MUST use row auto-layout on Code Line 3 (#345) with gap 8px and padding [0px, 0px, 0px, 16px]
MUST use token --syn-key (or tokens::SYN_KEY) instead of hardcoded hex #74c7ec on "padding" (#346)
MUST include exact text string ""padding"" for "padding" (#346)
MUST use token --syn-punct (or tokens::SYN_PUNCT) instead of hardcoded hex #9399b2 on : (#347)
MUST include exact text string ":" for : (#347)
MUST use token --syn-number (or tokens::SYN_NUMBER) instead of hardcoded hex #fab387 on 24 (#348)
MUST include exact text string "24" for 24 (#348)
MUST use row auto-layout on Code Line 4 (#349) with gap 8px and padding [0px, 0px, 0px, 0px]
MUST use token --syn-punct (or tokens::SYN_PUNCT) instead of hardcoded hex #9399b2 on } (#350)
MUST include exact text string "}" for } (#350)
MUST use column auto-layout on Block Group (#351) with gap 24px and padding [0px, 0px, 0px, 0px]
MUST use token --canvas (or tokens::CANVAS) instead of hardcoded hex #11111b on Code Card / JSON invalid (#352)
MUST use column auto-layout on Code Card / JSON invalid (#352) with gap 0px and padding [0px, 0px, 0px, 0px]
MUST use row auto-layout on Code Header (#353) with gap 8px and padding [8px, 8px, 0px, 16px]
MUST use token --text-muted (or tokens::TEXT_MUTED) instead of hardcoded hex #a6adc8 on Language Label (#354)
MUST include exact text string "JSON" for Language Label (#354)
MUST use token --surface (or tokens::SURFACE) instead of hardcoded hex #181825 on Chip / Error (#355)
MUST use row auto-layout on Chip / Error (#355) with gap 4px and padding [0px, 8px, 0px, 8px]
MUST use token --danger (or tokens::DANGER) instead of hardcoded hex #f38ba8 on Line 3: expected , or } (#360)
MUST include exact text string "Line 3: expected , or }" for Line 3: expected , or } (#360)
MUST use column auto-layout on Frame (#361) with gap 0px and padding [0px, 0px, 0px, 0px]
MUST use row auto-layout on Action / Copy (#362) with gap 4px and padding [0px, 8px, 0px, 8px]
MUST use token --text-muted (or tokens::TEXT_MUTED) instead of hardcoded hex #a6adc8 on Copy (#366)
MUST include exact text string "Copy" for Copy (#366)
MUST use column auto-layout on Code Lines (#367) with gap 4px and padding [8px, 16px, 16px, 16px]
MUST use row auto-layout on Code Line 1 (#368) with gap 8px and padding [0px, 0px, 0px, 0px]
MUST use token --syn-punct (or tokens::SYN_PUNCT) instead of hardcoded hex #9399b2 on { (#369)
MUST include exact text string "{" for { (#369)
MUST use row auto-layout on Code Line 2 (#370) with gap 8px and padding [0px, 0px, 0px, 16px]
MUST use token --syn-key (or tokens::SYN_KEY) instead of hardcoded hex #74c7ec on "padding" (#371)
MUST include exact text string ""padding"" for "padding" (#371)
MUST use token --syn-punct (or tokens::SYN_PUNCT) instead of hardcoded hex #9399b2 on : (#372)
MUST include exact text string ":" for : (#372)
MUST use token --syn-number (or tokens::SYN_NUMBER) instead of hardcoded hex #fab387 on 24 (#373)
MUST include exact text string "24" for 24 (#373)
MUST use token --surface (or tokens::SURFACE) instead of hardcoded hex #181825 on Line 3 (error) (#374)
MUST use row auto-layout on Line 3 (error) (#374) with gap 8px and padding [0px, 8px, 0px, 8px]
MUST use token --syn-key (or tokens::SYN_KEY) instead of hardcoded hex #74c7ec on "theme" (#375)
MUST include exact text string ""theme"" for "theme" (#375)
MUST use token --syn-punct (or tokens::SYN_PUNCT) instead of hardcoded hex #9399b2 on : (#376)
MUST include exact text string ":" for : (#376)
MUST use token --syn-string (or tokens::SYN_STRING) instead of hardcoded hex #a6e3a1 on "mocha" (#377)
MUST include exact text string ""mocha"" for "mocha" (#377)
MUST use row auto-layout on Code Line 4 (#378) with gap 8px and padding [0px, 0px, 0px, 0px]
MUST use token --syn-punct (or tokens::SYN_PUNCT) instead of hardcoded hex #9399b2 on } (#379)
MUST include exact text string "}" for } (#379)
MUST use token --surface (or tokens::SURFACE) instead of hardcoded hex #181825 on Offer / Format template string (#380)
MUST use column auto-layout on Offer / Format template string (#380) with gap 8px and padding [16px, 16px, 16px, 16px]
MUST use row auto-layout on Tree Block (#381) with gap 8px and padding [0px, 0px, 0px, 0px]
MUST use token --text (or tokens::TEXT) instead of hardcoded hex #cdd6f4 on This block looks like JSON (#387)
MUST include exact text string "This block looks like JSON" for This block looks like JSON (#387)
MUST use token --text-muted (or tokens::TEXT_MUTED) instead of hardcoded hex #a6adc8 on Offer Body (#388)
MUST include exact text string "A single string without a language label parses as JSON. Format it? Nothing changes until you accept." for Offer Body (#388)
MUST use row auto-layout on Offer Actions (#389) with gap 8px and padding [0px, 0px, 0px, 0px]
MUST preserve component instance Button / Primary (#390) referencing Button / Primary
MUST use token --accent (or tokens::ACCENT) instead of hardcoded hex #cba6f7 on Button / Primary (#390)
MUST use row auto-layout on Button / Primary (#390) with gap 8px and padding [12px, 16px, 12px, 16px]
MUST use token --on-accent (or tokens::ON_ACCENT) instead of hardcoded hex #11111b on Primary action (#391)
MUST include exact text string "Format" for Primary action (#391)
MUST preserve component instance Button / Secondary (#392) referencing Button / Secondary
MUST use token --surface-2 (or tokens::SURFACE_2) instead of hardcoded hex #313244 on Button / Secondary (#392)
MUST use row auto-layout on Button / Secondary (#392) with gap 8px and padding [12px, 16px, 12px, 16px]
MUST use token --text (or tokens::TEXT) instead of hardcoded hex #cdd6f4 on Secondary (#393)
MUST include exact text string "Not now" for Secondary (#393)
MUST use token --canvas (or tokens::CANVAS) instead of hardcoded hex #11111b on Code Card / Folder tree (#394)
MUST use column auto-layout on Code Card / Folder tree (#394) with gap 0px and padding [0px, 0px, 0px, 0px]
MUST use row auto-layout on Code Header (#395) with gap 8px and padding [8px, 8px, 0px, 16px]
MUST use token --text-muted (or tokens::TEXT_MUTED) instead of hardcoded hex #a6adc8 on Language Label (#396)
MUST include exact text string "TREE" for Language Label (#396)
MUST use column auto-layout on Frame (#397) with gap 0px and padding [0px, 0px, 0px, 0px]
MUST use row auto-layout on Action / Copy (#398) with gap 4px and padding [0px, 8px, 0px, 8px]
MUST use token --text-muted (or tokens::TEXT_MUTED) instead of hardcoded hex #a6adc8 on Copy (#402)
MUST include exact text string "Copy" for Copy (#402)
MUST use column auto-layout on Tree Lines (#403) with gap 4px and padding [8px, 16px, 16px, 16px]
MUST use row auto-layout on T1 (#404) with gap 8px and padding [0px, 0px, 0px, 0px]
MUST use token --text (or tokens::TEXT) instead of hardcoded hex #cdd6f4 on crates/ (#407)
MUST include exact text string "crates/" for crates/ (#407)
MUST use row auto-layout on T2 (#408) with gap 8px and padding [0px, 0px, 0px, 8px]
MUST use token --syn-punct (or tokens::SYN_PUNCT) instead of hardcoded hex #9399b2 on ├── (#409)
MUST include exact text string "|--" for ├── (#409)
MUST use token --text (or tokens::TEXT) instead of hardcoded hex #cdd6f4 on editor/ (#412)
MUST include exact text string "editor/" for editor/ (#412)
MUST use row auto-layout on T3 (#413) with gap 8px and padding [0px, 0px, 0px, 8px]
MUST use token --syn-punct (or tokens::SYN_PUNCT) instead of hardcoded hex #9399b2 on └── (#414)
MUST include exact text string "'--" for └── (#414)
MUST use token --text (or tokens::TEXT) instead of hardcoded hex #cdd6f4 on lib.rs (#420)
MUST include exact text string "lib.rs" for lib.rs (#420)
MUST use token --syn-comment (or tokens::SYN_COMMENT) instead of hardcoded hex #8a8fa8 on # entry (#421)
MUST include exact text string "# entry" for # entry (#421)
MUST use token --canvas (or tokens::CANVAS) instead of hardcoded hex #11111b on Diagram Card / Mermaid (#422)
MUST use column auto-layout on Diagram Card / Mermaid (#422) with gap 0px and padding [0px, 0px, 0px, 0px]
MUST use row auto-layout on Code Header (#423) with gap 8px and padding [8px, 8px, 0px, 16px]
MUST use token --text-muted (or tokens::TEXT_MUTED) instead of hardcoded hex #a6adc8 on Language Label (#424)
MUST include exact text string "MERMAID" for Language Label (#424)
MUST use column auto-layout on Frame (#425) with gap 0px and padding [0px, 0px, 0px, 0px]
MUST use token --surface (or tokens::SURFACE) instead of hardcoded hex #181825 on Segmented / Source Diagram (#426)
MUST use row auto-layout on Segmented / Source Diagram (#426) with gap 4px and padding [4px, 4px, 4px, 4px]
MUST use column auto-layout on Segment / Source (#427) with gap 0px and padding [4px, 12px, 4px, 12px]
MUST use token --text-muted (or tokens::TEXT_MUTED) instead of hardcoded hex #a6adc8 on Source (#428)
MUST include exact text string "Source" for Source (#428)
MUST use token --surface-2 (or tokens::SURFACE_2) instead of hardcoded hex #313244 on Segment / Diagram (active) (#429)
MUST use column auto-layout on Segment / Diagram (active) (#429) with gap 0px and padding [4px, 12px, 4px, 12px]
MUST use token --text (or tokens::TEXT) instead of hardcoded hex #cdd6f4 on Diagram (#430)
MUST include exact text string "Diagram" for Diagram (#430)
MUST use row auto-layout on Action / Copy (#431) with gap 4px and padding [0px, 8px, 0px, 8px]
MUST use token --text-muted (or tokens::TEXT_MUTED) instead of hardcoded hex #a6adc8 on Copy (#435)
MUST include exact text string "Copy" for Copy (#435)
MUST use row auto-layout on Diagram Body (#436) with gap 24px and padding [24px, 24px, 24px, 24px]
MUST use token --surface-2 (or tokens::SURFACE_2) instead of hardcoded hex #313244 on Node / Start (#437)
MUST use column auto-layout on Node / Start (#437) with gap 0px and padding [8px, 16px, 8px, 16px]
MUST use token --text (or tokens::TEXT) instead of hardcoded hex #cdd6f4 on Open vault (#438)
MUST include exact text string "Open vault" for Open vault (#438)
MUST use token --surface-2 (or tokens::SURFACE_2) instead of hardcoded hex #313244 on Node / Step (#442)
MUST use column auto-layout on Node / Step (#442) with gap 0px and padding [8px, 16px, 8px, 16px]
MUST use token --text (or tokens::TEXT) instead of hardcoded hex #cdd6f4 on List files (#443)
MUST include exact text string "List files" for List files (#443)
MUST use token --surface-2 (or tokens::SURFACE_2) instead of hardcoded hex #313244 on Node / End (#447)
MUST use column auto-layout on Node / End (#447) with gap 0px and padding [8px, 16px, 8px, 16px]
MUST use token --text (or tokens::TEXT) instead of hardcoded hex #cdd6f4 on Index in background (#448)
MUST include exact text string "Index in background" for Index in background (#448)
MUST use token --bg (or tokens::BG) instead of hardcoded hex #1e1e2e on Right Column (#449)
MUST use column auto-layout on Right Column (#449) with gap 16px and padding [16px, 16px, 16px, 16px]
MUST use token --text-muted (or tokens::TEXT_MUTED) instead of hardcoded hex #a6adc8 on Section Label (#450)
MUST include exact text string "RIGHT-CLICK A COLOR" for Section Label (#450)
MUST use token --surface (or tokens::SURFACE) instead of hardcoded hex #181825 on Context Menu / Color (#451)
MUST use column auto-layout on Context Menu / Color (#451) with gap 4px and padding [8px, 8px, 8px, 8px]
MUST use row auto-layout on Menu Preview (#452) with gap 8px and padding [8px, 8px, 8px, 8px]
MUST use column auto-layout on Swatch (#453) with gap 0px and padding [0px, 0px, 0px, 0px]
MUST use token --text (or tokens::TEXT) instead of hardcoded hex #cdd6f4 on #cba6f7 (#454)
MUST include exact text string "#cba6f7" for #cba6f7 (#454)
MUST use row auto-layout on Menu Item / Copy color (#455) with gap 8px and padding [8px, 8px, 8px, 8px]
MUST use token --text (or tokens::TEXT) instead of hardcoded hex #cdd6f4 on Copy color (#459)
MUST include exact text string "Copy color" for Copy color (#459)
MUST use row auto-layout on Menu Item / Copy as rgb (#460) with gap 8px and padding [8px, 8px, 8px, 8px]
MUST use token --text (or tokens::TEXT) instead of hardcoded hex #cdd6f4 on Copy as rgb() (#465)
MUST include exact text string "Copy as rgb()" for Copy as rgb() (#465)
MUST use token --surface-2 (or tokens::SURFACE_2) instead of hardcoded hex #313244 on Menu Item / Color previews (#466)
MUST use row auto-layout on Menu Item / Color previews (#466) with gap 8px and padding [8px, 8px, 8px, 8px]
MUST use token --text (or tokens::TEXT) instead of hardcoded hex #cdd6f4 on Color previews (#470)
MUST include exact text string "Color previews" for Color previews (#470)
MUST preserve component instance Toggle / On (#471) referencing Toggle / On
MUST use token --accent (or tokens::ACCENT) instead of hardcoded hex #cba6f7 on Toggle / On (#471)
MUST use row auto-layout on Toggle / On (#471) with gap 0px and padding [4px, 4px, 4px, 4px]
MUST use token --on-accent (or tokens::ON_ACCENT) instead of hardcoded hex #11111b on Frame (#472)
MUST use column auto-layout on Frame (#472) with gap 0px and padding [0px, 0px, 0px, 0px]
MUST use row auto-layout on Menu Item / Named colors (#473) with gap 8px and padding [8px, 8px, 8px, 8px]
MUST use token --text (or tokens::TEXT) instead of hardcoded hex #cdd6f4 on Named colors (red, gray) (#478)
MUST include exact text string "Named colors (red, gray)" for Named colors (red, gray) (#478)
MUST preserve component instance Toggle / Off (#479) referencing Toggle / Off
MUST use token --border (or tokens::BORDER) instead of hardcoded hex #45475a on Toggle / Off (#479)
MUST use row auto-layout on Toggle / Off (#479) with gap 0px and padding [4px, 4px, 4px, 4px]
MUST use token --on-accent (or tokens::ON_ACCENT) instead of hardcoded hex #11111b on Frame (#480)
MUST use column auto-layout on Frame (#480) with gap 0px and padding [0px, 0px, 0px, 0px]
MUST use token --text-muted (or tokens::TEXT_MUTED) instead of hardcoded hex #a6adc8 on Section Label (#481)
MUST include exact text string "RULES" for Section Label (#481)
MUST use token --text-muted (or tokens::TEXT_MUTED) instead of hardcoded hex #a6adc8 on Rules Text (#482)
MUST include exact text string "Swatch is 12 pt, rounded 3, one border. Hex, rgb, rgba, hsl and hsla always preview. Raw names such as red or gray preview only when enabled. External links show an up-right arrow; wikilinks never do. Inline code chip: radius 6, surface-2 background." for Rules Text (#482)

2. Design Tokens & Variables

--accent: #cba6f7
--bg: #1e1e2e
--border: #45475a
--callout-abstract: #94e2d5
--callout-bug: #f38ba8
--callout-danger: #f38ba8
--callout-example: #cba6f7
--callout-failure: #f38ba8
--callout-info: #74c7ec
--callout-note: #89b4fa
--callout-question: #f9e2af
--callout-quote: #a6adc8
--callout-success: #a6e3a1
--callout-tip: #94e2d5
--callout-todo: #89b4fa
--callout-warning: #fab387
--canvas: #11111b
--danger: #f38ba8
--heat-1: #232336
--heat-2: #2d2d47
--heat-3: #3d3d63
--highlight: #4a4a45
--link: #89b4fa
--link-unresolved: #f38ba8
--on-accent: #11111b
--success: #a6e3a1
--surface: #181825
--surface-2: #313244
--syn-comment: #8a8fa8
--syn-function: #89b4fa
--syn-key: #74c7ec
--syn-keyword: #cba6f7
--syn-number: #fab387
--syn-punct: #9399b2
--syn-string: #a6e3a1
--syn-type: #f9e2af
--text: #cdd6f4
--text-muted: #a6adc8
--warning: #f9e2af
--radius-lg: 16px
--radius-md: 12px
--radius-pill: 999px
--radius-sm: 8px
--radius-xl: 24px
--space-1: 4px
--space-12: 48px
--space-16: 64px
--space-2: 8px
--space-3: 12px
--space-4: 16px
--space-6: 24px
--space-8: 32px
--target-row: 40px
--target-touch: 44px
--text-2xl: 32px
--text-lg: 20px
--text-md: 16px
--text-sm: 14px
--text-xl: 24px
--text-xs: 12px
--width-phone: 390px
--width-right-card: 420px
--width-sidebar: 240px
Modes: Dark, Light

3. Structured Layout Hierarchy

Editor / Code blocks and previews (#247, frame): size=1440x1077.88 (h:fixed, v:hug, in-flow) | flex=row gap=8px pad=[8,8,8,8] | fill=var(--canvas)
- Note Card (#248, frame): size=1096x1061.88 (h:fill, v:hug, in-flow) | flex=column gap=24px pad=[32,48,32,48] | fill=var(--bg)
  - Paragraph (#249, frame): size=1000x24 (h:fill, v:hug, in-flow) | flex=row gap=8px pad=[0,0,0,0]
    - Set the accent to (#250, text): size=128.46x24 (h:fixed, v:fixed, in-flow) | fill=var(--text) | text="Set the accent to"
    - Inline Code / Color (#251, frame): size=87.08x24 (h:hug, v:fixed, in-flow) | flex=row gap=4px pad=[0,8,0,8] | fill=var(--surface-2)
      - Swatch (#252, frame): size=12x12 (h:fixed, v:fixed, in-flow) | flex=column gap=0px pad=[0,0,0,0] | fill=#cba6f7
      - #cba6f7 (#253, text): size=55.08x20 (h:fixed, v:fixed, in-flow) | fill=var(--syn-number) | text="#cba6f7"
    - or (#254, text): size=15.62x24 (h:fixed, v:fixed, in-flow) | fill=var(--text) | text="or"
    - Inline Code / Color rgba (#255, frame): size=189.07x24 (h:hug, v:fixed, in-flow) | flex=row gap=4px pad=[0,8,0,8] | fill=var(--surface-2)
      - Swatch (#256, frame): size=12x12 (h:fixed, v:fixed, in-flow) | flex=column gap=0px pad=[0,0,0,0] | fill=#89b4fa
      - rgba(137, 180, 250, 0.8) (#257, text): size=157.07x20 (h:fixed, v:fixed, in-flow) | fill=var(--syn-number) | text="rgba(137, 180, 250, 0.8)"
    - and read the (#258, text): size=95.39x24 (h:fixed, v:fixed, in-flow) | fill=var(--text) | text="and read the"
    - Inline Code (#259, frame): size=90.11x24 (h:hug, v:fixed, in-flow) | flex=column gap=0px pad=[0,8,0,8] | fill=var(--surface-2)
      - theme.toml (#260, text): size=74.11x20 (h:fixed, v:fixed, in-flow) | fill=var(--syn-string) | text="theme.toml"
    - file, or the (#261, text): size=76.25x24 (h:fixed, v:fixed, in-flow) | fill=var(--text) | text="file, or the"
    - External Link (#262, frame): size=93.95x24 (h:hug, v:hug, in-flow) | flex=row gap=4px pad=[0,0,0,0]
      - egui docs (#263, text): size=73.95x24 (h:fixed, v:fixed, in-flow) | fill=var(--link) | text="egui docs"
      - Icon / lucide:arrow-up-right (#264, frame): size=16x16 (h:fixed, v:fixed, in-flow)
        
        Path (#265, vector): size=6.67x6.67 (h:fixed, v:fixed, absolute)
        
        Path (#266, vector): size=6.67x6.67 (h:fixed, v:fixed, absolute)
  - Code Card / Rust (#267, frame): size=1000x152 (h:fill, v:hug, in-flow) | flex=column gap=0px pad=[0,0,0,0] | fill=var(--canvas)
    - Code Header (#268, frame): size=1000x36 (h:fill, v:fixed, in-flow) | flex=row gap=8px pad=[8,8,0,16]
      - Language Label (#269, text): size=36.53x14.52 (h:fixed, v:fixed, in-flow) | fill=var(--text-muted) | text="RUST"
      - Frame (#270, frame): size=824.44x0 (h:fill, v:hug, in-flow) | flex=column gap=0px pad=[0,0,0,0]
      - Toolbar (#271, frame): size=99.03x28 (h:hug, v:hug, in-flow) | flex=row gap=4px pad=[0,0,0,0]
        
        Action / Wrap (#272, frame): size=28x28 (h:fixed, v:fixed, in-flow) | flex=row gap=0px pad=[0,0,0,0]
        
        Icon / lucide:wrap-text (#273, frame): size=16x16 (h:fixed, v:fixed, in-flow)
        
        Path (#274, vector): size=2x4 (h:fixed, v:fixed, absolute)
        
        Path (#275, vector): size=12x4.67 (h:fixed, v:fixed, absolute)
        
        Path (#276, vector): size=4x0 (h:fixed, v:fixed, absolute)
        
        Path (#277, vector): size=12x0 (h:fixed, v:fixed, absolute)
        
        Action / Copy (#278, frame): size=67.03x28 (h:hug, v:fixed, in-flow) | flex=row gap=4px pad=[0,8,0,8] | fill=var(--surface-2)
        
        Icon / lucide:copy (#279, frame): size=16x16 (h:fixed, v:fixed, in-flow)
        
        Path (#280, vector): size=9.33x9.33 (h:fixed, v:fixed, absolute)
        
        Path (#281, vector): size=9.33x9.33 (h:fixed, v:fixed, absolute)
        
        Copy (#282, text): size=31.03x14.52 (h:fixed, v:fixed, in-flow) | fill=var(--text) | text="Copy"
    - Code Lines (#283, frame): size=1000x116 (h:fill, v:hug, in-flow) | flex=column gap=4px pad=[8,16,16,16]
      - Code Line 1 (#284, frame): size=968x20 (h:fill, v:hug, in-flow) | flex=row gap=8px pad=[0,0,0,0]
        
        fn (#285, text): size=13.45x20 (h:fixed, v:fixed, in-flow) | fill=var(--syn-keyword) | text="fn"
        
        next_due (#286, text): size=60.05x20 (h:fixed, v:fixed, in-flow) | fill=var(--syn-function) | text="next_due"
        
        ( (#287, text): size=5.11x20 (h:fixed, v:fixed, in-flow) | fill=var(--syn-punct) | text="("
        
        now (#288, text): size=28.12x20 (h:fixed, v:fixed, in-flow) | fill=var(--text) | text="now"
        
        : (#289, text): size=4.03x20 (h:fixed, v:fixed, in-flow) | fill=var(--syn-punct) | text=":"
        
        Date (#290, text): size=30.71x20 (h:fixed, v:fixed, in-flow) | fill=var(--syn-type) | text="Date"
        
        ) -> (#291, text): size=24.75x20 (h:fixed, v:fixed, in-flow) | fill=var(--syn-punct) | text=") ->"
        
        Option<Task> (#292, text): size=94.41x20 (h:fixed, v:fixed, in-flow) | fill=var(--syn-type) | text="Option"
        
        { (#293, text): size=5.97x20 (h:fixed, v:fixed, in-flow) | fill=var(--syn-punct) | text="{"
      - Code Line 2 (#294, frame): size=968x20 (h:fill, v:hug, in-flow) | flex=row gap=8px pad=[0,0,0,16]
        
        // first task that is not done (#295, text): size=202.32x20 (h:fixed, v:fixed, in-flow) | fill=var(--syn-comment) | text="// first task that is not done yet"
      - Code Line 3 (#296, frame): size=968x20 (h:fill, v:hug, in-flow) | flex=row gap=8px pad=[0,0,0,16]
        
        let (#297, text): size=16.13x20 (h:fixed, v:fixed, in-flow) | fill=var(--syn-keyword) | text="let"
        
        limit (#298, text): size=27.02x20 (h:fixed, v:fixed, in-flow) | fill=var(--text) | text="limit"
        
        = (#299, text): size=9.26x20 (h:fixed, v:fixed, in-flow) | fill=var(--syn-punct) | text="="
        
        42 (#300, text): size=17.58x20 (h:fixed, v:fixed, in-flow) | fill=var(--syn-number) | text="42"
        
        ; (#301, text): size=4.22x20 (h:fixed, v:fixed, in-flow) | fill=var(--syn-punct) | text=";"
        
        "agenda" (#302, text): size=62.36x20 (h:fixed, v:fixed, in-flow) | fill=var(--syn-string) | text=""agenda""
      - Code Line 4 (#303, frame): size=968x20 (h:fill, v:hug, in-flow) | flex=row gap=8px pad=[0,0,0,0]
        
        } (#304, text): size=5.97x20 (h:fixed, v:fixed, in-flow) | fill=var(--syn-punct) | text="}"
  - Code Card / JSON (#305, frame): size=1000x152 (h:fill, v:hug, in-flow) | flex=column gap=0px pad=[0,0,0,0] | fill=var(--canvas)
    - Code Header (#306, frame): size=1000x36 (h:fill, v:fixed, in-flow) | flex=row gap=8px pad=[8,8,0,16]
      - Language Label (#307, text): size=37.26x14.52 (h:fixed, v:fixed, in-flow) | fill=var(--text-muted) | text="JSON"
      - Chip / Valid (#308, frame): size=65.99x24 (h:hug, v:fixed, in-flow) | flex=row gap=4px pad=[0,8,0,8] | fill=var(--surface)
        
        Icon / lucide:check (#309, frame): size=16x16 (h:fixed, v:fixed, in-flow)
        
        Path (#310, vector): size=10.67x7.33 (h:fixed, v:fixed, absolute)
        
        Valid (#311, text): size=29.99x14.52 (h:fixed, v:fixed, in-flow) | fill=var(--success) | text="Valid"
      - Frame (#312, frame): size=622.96x0 (h:fill, v:hug, in-flow) | flex=column gap=0px pad=[0,0,0,0]
      - Toolbar (#313, frame): size=225.78x28 (h:hug, v:hug, in-flow) | flex=row gap=4px pad=[0,0,0,0]
        
        Action / Format (#314, frame): size=77.6x28 (h:hug, v:fixed, in-flow) | flex=row gap=4px pad=[0,8,0,8] | fill=var(--accent)
        
        Icon / lucide:wand-sparkles (#315, frame): size=16x16 (h:fixed, v:fixed, in-flow)
        
        Path (#316, vector): size=13.33x13.33 (h:fixed, v:fixed, absolute)
        
        Path (#317, vector): size=2x2 (h:fixed, v:fixed, absolute)
        
        Path (#318, vector): size=0x2.67 (h:fixed, v:fixed, absolute)
        
        Path (#319, vector): size=0x2.67 (h:fixed, v:fixed, absolute)
        
        Path (#320, vector): size=0x1.33 (h:fixed, v:fixed, absolute)
        
        Path (#321, vector): size=2.67x0 (h:fixed, v:fixed, absolute)
        
        Path (#322, vector): size=2.67x0 (h:fixed, v:fixed, absolute)
        
        Path (#323, vector): size=1.33x0 (h:fixed, v:fixed, absolute)
        
        Format (#324, text): size=41.6x14.52 (h:fixed, v:fixed, in-flow) | fill=var(--on-accent) | text="Format"
        
        Action / Minify (#325, frame): size=73.15x28 (h:hug, v:fixed, in-flow) | flex=row gap=4px pad=[0,8,0,8]
        
        Icon / lucide:minimize-2 (#326, frame): size=16x16 (h:fixed, v:fixed, in-flow)
        
        Path (#327, vector): size=4.67x4.67 (h:fixed, v:fixed, absolute)
        
        Path (#328, vector): size=4x4 (h:fixed, v:fixed, absolute)
        
        Path (#329, vector): size=4.67x4.67 (h:fixed, v:fixed, absolute)
        
        Path (#330, vector): size=4x4 (h:fixed, v:fixed, absolute)
        
        Minify (#331, text): size=37.15x14.52 (h:fixed, v:fixed, in-flow) | fill=var(--text-muted) | text="Minify"
        
        Action / Copy (#332, frame): size=67.03x28 (h:hug, v:fixed, in-flow) | flex=row gap=4px pad=[0,8,0,8]
        
        Icon / lucide:copy (#333, frame): size=16x16 (h:fixed, v:fixed, in-flow)
        
        Path (#334, vector): size=9.33x9.33 (h:fixed, v:fixed, absolute)
        
        Path (#335, vector): size=9.33x9.33 (h:fixed, v:fixed, absolute)
        
        Copy (#336, text): size=31.03x14.52 (h:fixed, v:fixed, in-flow) | fill=var(--text-muted) | text="Copy"
    - Code Lines (#337, frame): size=1000x116 (h:fill, v:hug, in-flow) | flex=column gap=4px pad=[8,16,16,16]
      - Code Line 1 (#338, frame): size=968x20 (h:fill, v:hug, in-flow) | flex=row gap=8px pad=[0,0,0,0]
        
        { (#339, text): size=5.97x20 (h:fixed, v:fixed, in-flow) | fill=var(--syn-punct) | text="{"
      - Code Line 2 (#340, frame): size=968x20 (h:fill, v:hug, in-flow) | flex=row gap=8px pad=[0,0,0,16]
        
        "theme" (#341, text): size=54.49x20 (h:fixed, v:fixed, in-flow) | fill=var(--syn-key) | text=""theme""
        
        : (#342, text): size=4.03x20 (h:fixed, v:fixed, in-flow) | fill=var(--syn-punct) | text=":"
        
        "catppuccin-mocha" (#343, text): size=137.8x20 (h:fixed, v:fixed, in-flow) | fill=var(--syn-string) | text=""catppuccin-mocha""
        
        , (#344, text): size=4.03x20 (h:fixed, v:fixed, in-flow) | fill=var(--syn-punct) | text=","
      - Code Line 3 (#345, frame): size=968x20 (h:fill, v:hug, in-flow) | flex=row gap=8px pad=[0,0,0,16]
        
        "padding" (#346, text): size=66.87x20 (h:fixed, v:fixed, in-flow) | fill=var(--syn-key) | text=""padding""
        
        : (#347, text): size=4.03x20 (h:fixed, v:fixed, in-flow) | fill=var(--syn-punct) | text=":"
        
        24 (#348, text): size=17.58x20 (h:fixed, v:fixed, in-flow) | fill=var(--syn-number) | text="24"
      - Code Line 4 (#349, frame): size=968x20 (h:fill, v:hug, in-flow) | flex=row gap=8px pad=[0,0,0,0]
        
        } (#350, text): size=5.97x20 (h:fixed, v:fixed, in-flow) | fill=var(--syn-punct) | text="}"
  - Block Group (#351, frame): size=1000x597.88 (h:fill, v:hug, in-flow) | flex=column gap=24px pad=[0,0,0,0]
    - Code Card / JSON invalid (#352, frame): size=1000x152 (h:fill, v:hug, in-flow) | flex=column gap=0px pad=[0,0,0,0] | fill=var(--canvas)
      - Code Header (#353, frame): size=1000x36 (h:fill, v:fixed, in-flow) | flex=row gap=8px pad=[8,8,0,16]
        
        Language Label (#354, text): size=37.26x14.52 (h:fixed, v:fixed, in-flow) | fill=var(--text-muted) | text="JSON"
        
        Chip / Error (#355, frame): size=163.49x24 (h:hug, v:fixed, in-flow) | flex=row gap=4px pad=[0,8,0,8] | fill=var(--surface)
        
        Icon / lucide:circle-alert (#356, frame): size=16x16 (h:fixed, v:fixed, in-flow)
        
        Path (#357, vector): size=13.33x13.33 (h:fixed, v:fixed, absolute)
        
        Path (#358, vector): size=0x2.67 (h:fixed, v:fixed, absolute)
        
        Path (#359, vector): size=0.01x0 (h:fixed, v:fixed, absolute)
        
        Line 3: expected , or } (#360, text): size=127.49x14.52 (h:fixed, v:fixed, in-flow) | fill=var(--danger) | text="Line 3: expected , or }"
        
        Frame (#361, frame): size=684.22x0 (h:fill, v:hug, in-flow) | flex=column gap=0px pad=[0,0,0,0]
        
        Action / Copy (#362, frame): size=67.03x28 (h:hug, v:fixed, in-flow) | flex=row gap=4px pad=[0,8,0,8]
        
        Icon / lucide:copy (#363, frame): size=16x16 (h:fixed, v:fixed, in-flow)
        
        Path (#364, vector): size=9.33x9.33 (h:fixed, v:fixed, absolute)
        
        Path (#365, vector): size=9.33x9.33 (h:fixed, v:fixed, absolute)
        
        Copy (#366, text): size=31.03x14.52 (h:fixed, v:fixed, in-flow) | fill=var(--text-muted) | text="Copy"
      - Code Lines (#367, frame): size=1000x116 (h:fill, v:hug, in-flow) | flex=column gap=4px pad=[8,16,16,16]
        
        Code Line 1 (#368, frame): size=968x20 (h:fill, v:hug, in-flow) | flex=row gap=8px pad=[0,0,0,0]
        
        { (#369, text): size=5.97x20 (h:fixed, v:fixed, in-flow) | fill=var(--syn-punct) | text="{"
        
        Code Line 2 (#370, frame): size=968x20 (h:fill, v:hug, in-flow) | flex=row gap=8px pad=[0,0,0,16]
        
        "padding" (#371, text): size=66.87x20 (h:fixed, v:fixed, in-flow) | fill=var(--syn-key) | text=""padding""
        
        : (#372, text): size=4.03x20 (h:fixed, v:fixed, in-flow) | fill=var(--syn-punct) | text=":"
        
        24 (#373, text): size=17.58x20 (h:fixed, v:fixed, in-flow) | fill=var(--syn-number) | text="24"
        
        Line 3 (error) (#374, frame): size=968x20 (h:fill, v:hug, in-flow) | flex=row gap=8px pad=[0,8,0,8] | fill=var(--surface)
        
        "theme" (#375, text): size=54.49x20 (h:fixed, v:fixed, in-flow) | fill=var(--syn-key) | text=""theme""
        
        : (#376, text): size=4.03x20 (h:fixed, v:fixed, in-flow) | fill=var(--syn-punct) | text=":"
        
        "mocha" (#377, text): size=57.84x20 (h:fixed, v:fixed, in-flow) | fill=var(--syn-string) | text=""mocha""
        
        Code Line 4 (#378, frame): size=968x20 (h:fill, v:hug, in-flow) | flex=row gap=8px pad=[0,0,0,0]
        
        } (#379, text): size=5.97x20 (h:fixed, v:fixed, in-flow) | fill=var(--syn-punct) | text="}"
    - Offer / Format template string (#380, frame): size=1000x128.94 (h:fill, v:hug, in-flow) | flex=column gap=8px pad=[16,16,16,16] | fill=var(--surface)
      - Tree Block (#381, frame): size=968x16.94 (h:fill, v:hug, in-flow) | flex=row gap=8px pad=[0,0,0,0]
        
        Icon / lucide:sparkles (#382, frame): size=16x16 (h:fixed, v:fixed, in-flow)
        
        Path (#383, vector): size=13.34x13.34 (h:fixed, v:fixed, absolute)
        
        Path (#384, vector): size=0x2.67 (h:fixed, v:fixed, absolute)
        
        Path (#385, vector): size=2.67x0 (h:fixed, v:fixed, absolute)
        
        Path (#386, vector): size=2.67x2.67 (h:fixed, v:fixed, absolute)
        
        This block looks like JSON (#387, text): size=944x16.94 (h:fill, v:fixed, in-flow) | fill=var(--text) | text="This block looks like JSON"
      - Offer Body (#388, text): size=968x20 (h:fill, v:fixed, in-flow) | fill=var(--text-muted) | text="A single string without a language label parses as JSON. Format it? Nothing changes until you accept."
      - Offer Actions (#389, frame): size=968x44 (h:fill, v:hug, in-flow) | flex=row gap=8px pad=[0,0,0,0]
        
        Button / Primary (#390, frame): size=80.54x44 (h:hug, v:hug, in-flow) | flex=row gap=8px pad=[12,16,12,16] | fill=var(--accent)
        
        Primary action (#391, text): size=48.54x20 (h:fixed, v:fixed, in-flow) | fill=var(--on-accent) | text="Format"
        
        Button / Secondary (#392, frame): size=88.9x44 (h:hug, v:hug, in-flow) | flex=row gap=8px pad=[12,16,12,16] | fill=var(--surface-2)
        
        Secondary (#393, text): size=56.9x20 (h:fixed, v:fixed, in-flow) | fill=var(--text) | text="Not now"
    - Code Card / Folder tree (#394, frame): size=1000x128 (h:fill, v:hug, in-flow) | flex=column gap=0px pad=[0,0,0,0] | fill=var(--canvas)
      - Code Header (#395, frame): size=1000x36 (h:fill, v:fixed, in-flow) | flex=row gap=8px pad=[8,8,0,16]
        
        Language Label (#396, text): size=34.47x14.52 (h:fixed, v:fixed, in-flow) | fill=var(--text-muted) | text="TREE"
        
        Frame (#397, frame): size=858.51x0 (h:fill, v:hug, in-flow) | flex=column gap=0px pad=[0,0,0,0]
        
        Action / Copy (#398, frame): size=67.03x28 (h:hug, v:fixed, in-flow) | flex=row gap=4px pad=[0,8,0,8]
        
        Icon / lucide:copy (#399, frame): size=16x16 (h:fixed, v:fixed, in-flow)
        
        Path (#400, vector): size=9.33x9.33 (h:fixed, v:fixed, absolute)
        
        Path (#401, vector): size=9.33x9.33 (h:fixed, v:fixed, absolute)
        
        Copy (#402, text): size=31.03x14.52 (h:fixed, v:fixed, in-flow) | fill=var(--text-muted) | text="Copy"
      - Tree Lines (#403, frame): size=1000x92 (h:fill, v:hug, in-flow) | flex=column gap=4px pad=[8,16,16,16]
        
        T1 (#404, frame): size=968x20 (h:fill, v:hug, in-flow) | flex=row gap=8px pad=[0,0,0,0]
        
        Icon / lucide:folder (#405, frame): size=16x16 (h:fixed, v:fixed, in-flow)
        
        Path (#406, vector): size=13.33x11.33 (h:fixed, v:fixed, absolute)
        
        crates/ (#407, text): size=46.31x20 (h:fixed, v:fixed, in-flow) | fill=var(--text) | text="crates/"
        
        T2 (#408, frame): size=968x20 (h:fill, v:hug, in-flow) | flex=row gap=8px pad=[0,0,0,8]
        
        ├── (#409, text): size=17.53x20 (h:fixed, v:fixed, in-flow) | fill=var(--syn-punct) | text="|--"
        
        Icon / lucide:folder (#410, frame): size=16x16 (h:fixed, v:fixed, in-flow)
        
        Path (#411, vector): size=13.33x11.33 (h:fixed, v:fixed, absolute)
        
        editor/ (#412, text): size=43.42x20 (h:fixed, v:fixed, in-flow) | fill=var(--text) | text="editor/"
        
        T3 (#413, frame): size=968x20 (h:fill, v:hug, in-flow) | flex=row gap=8px pad=[0,0,0,8]
        
        └── (#414, text): size=17.08x20 (h:fixed, v:fixed, in-flow) | fill=var(--syn-punct) | text="'--"
        
        Icon / lucide:file-code (#415, frame): size=16x16 (h:fixed, v:fixed, in-flow)
        
        Path (#416, vector): size=10.67x13.33 (h:fixed, v:fixed, absolute)
        
        Path (#417, vector): size=4x4 (h:fixed, v:fixed, absolute)
        
        Path (#418, vector): size=1.33x3.33 (h:fixed, v:fixed, absolute)
        
        Path (#419, vector): size=1.33x3.33 (h:fixed, v:fixed, absolute)
        
        lib.rs (#420, text): size=32.05x20 (h:fixed, v:fixed, in-flow) | fill=var(--text) | text="lib.rs"
        
        # entry (#421, text): size=46.96x20 (h:fixed, v:fixed, in-flow) | fill=var(--syn-comment) | text="# entry"
    - Diagram Card / Mermaid (#422, frame): size=1000x116.94 (h:fill, v:hug, in-flow) | flex=column gap=0px pad=[0,0,0,0] | fill=var(--canvas)
      - Code Header (#423, frame): size=1000x36 (h:fill, v:fixed, in-flow) | flex=row gap=8px pad=[8,8,0,16]
        
        Language Label (#424, text): size=65.52x14.52 (h:fixed, v:fixed, in-flow) | fill=var(--text-muted) | text="MERMAID"
        
        Frame (#425, frame): size=668.4x0 (h:fill, v:hug, in-flow) | flex=column gap=0px pad=[0,0,0,0]
        
        Segmented / Source Diagram (#426, frame): size=151.05x30.52 (h:hug, v:hug, in-flow) | flex=row gap=4px pad=[4,4,4,4] | fill=var(--surface)
        
        Segment / Source (#427, frame): size=65.78x22.52 (h:hug, v:hug, in-flow) | flex=column gap=0px pad=[4,12,4,12]
        
        Source (#428, text): size=41.78x14.52 (h:fixed, v:fixed, in-flow) | fill=var(--text-muted) | text="Source"
        
        Segment / Diagram (active) (#429, frame): size=73.27x22.52 (h:hug, v:hug, in-flow) | flex=column gap=0px pad=[4,12,4,12] | fill=var(--surface-2)
        
        Diagram (#430, text): size=49.27x14.52 (h:fixed, v:fixed, in-flow) | fill=var(--text) | text="Diagram"
        
        Action / Copy (#431, frame): size=67.03x28 (h:hug, v:fixed, in-flow) | flex=row gap=4px pad=[0,8,0,8]
        
        Icon / lucide:copy (#432, frame): size=16x16 (h:fixed, v:fixed, in-flow)
        
        Path (#433, vector): size=9.33x9.33 (h:fixed, v:fixed, absolute)
        
        Path (#434, vector): size=9.33x9.33 (h:fixed, v:fixed, absolute)
        
        Copy (#435, text): size=31.03x14.52 (h:fixed, v:fixed, in-flow) | fill=var(--text-muted) | text="Copy"
      - Diagram Body (#436, frame): size=1000x80.94 (h:fill, v:hug, in-flow) | flex=row gap=24px pad=[24,24,24,24]
        
        Node / Start (#437, frame): size=103.63x32.94 (h:hug, v:hug, in-flow) | flex=column gap=0px pad=[8,16,8,16] | fill=var(--surface-2)
        
        Open vault (#438, text): size=71.63x16.94 (h:fixed, v:fixed, in-flow) | fill=var(--text) | text="Open vault"
        
        Icon / lucide:arrow-right (#439, frame): size=16x16 (h:fixed, v:fixed, in-flow)
        
        Path (#440, vector): size=9.33x0 (h:fixed, v:fixed, absolute)
        
        Path (#441, vector): size=4.67x9.33 (h:fixed, v:fixed, absolute)
        
        Node / Step (#442, frame): size=86.73x32.94 (h:hug, v:hug, in-flow) | flex=column gap=0px pad=[8,16,8,16] | fill=var(--surface-2)
        
        List files (#443, text): size=54.73x16.94 (h:fixed, v:fixed, in-flow) | fill=var(--text) | text="List files"
        
        Icon / lucide:arrow-right (#444, frame): size=16x16 (h:fixed, v:fixed, in-flow)
        
        Path (#445, vector): size=9.33x0 (h:fixed, v:fixed, absolute)
        
        Path (#446, vector): size=4.67x9.33 (h:fixed, v:fixed, absolute)
        
        Node / End (#447, frame): size=167.43x32.94 (h:hug, v:hug, in-flow) | flex=column gap=0px pad=[8,16,8,16] | fill=var(--surface-2)
        
        Index in background (#448, text): size=135.43x16.94 (h:fixed, v:fixed, in-flow) | fill=var(--text) | text="Index in background"
- Right Column (#449, frame): size=320x421.04 (h:fixed, v:hug, in-flow) | flex=column gap=16px pad=[16,16,16,16] | fill=var(--bg)
  - Section Label (#450, text): size=288x14.52 (h:fill, v:fixed, in-flow) | fill=var(--text-muted) | text="RIGHT-CLICK A COLOR"
  - Context Menu / Color (#451, frame): size=288x216 (h:fill, v:hug, in-flow) | flex=column gap=4px pad=[8,8,8,8] | fill=var(--surface)
    - Menu Preview (#452, frame): size=272x40 (h:fill, v:hug, in-flow) | flex=row gap=8px pad=[8,8,8,8]
      - Swatch (#453, frame): size=24x24 (h:fixed, v:fixed, in-flow) | flex=column gap=0px pad=[0,0,0,0] | fill=#cba6f7
      - #cba6f7 (#454, text): size=57.08x16.94 (h:fixed, v:fixed, in-flow) | fill=var(--text) | text="#cba6f7"
    - Menu Item / Copy color (#455, frame): size=272x36 (h:fill, v:fixed, in-flow) | flex=row gap=8px pad=[8,8,8,8]
      - Icon / lucide:copy (#456, frame): size=16x16 (h:fixed, v:fixed, in-flow)
        
        Path (#457, vector): size=9.33x9.33 (h:fixed, v:fixed, absolute)
        
        Path (#458, vector): size=9.33x9.33 (h:fixed, v:fixed, absolute)
      - Copy color (#459, text): size=72.45x16.94 (h:fixed, v:fixed, in-flow) | fill=var(--text) | text="Copy color"
    - Menu Item / Copy as rgb (#460, frame): size=272x36 (h:fill, v:fixed, in-flow) | flex=row gap=8px pad=[8,8,8,8]
      - Icon / lucide:pipette (#461, frame): size=16x16 (h:fixed, v:fixed, in-flow)
        
        Path (#462, vector): size=8.39x8.39 (h:fixed, v:fixed, absolute)
        
        Path (#463, vector): size=7.36x7.36 (h:fixed, v:fixed, absolute)
        
        Path (#464, vector): size=0.28x0.28 (h:fixed, v:fixed, absolute)
      - Copy as rgb() (#465, text): size=90.83x16.94 (h:fixed, v:fixed, in-flow) | fill=var(--text) | text="Copy as rgb()"
    - Menu Item / Color previews (#466, frame): size=272x36 (h:fill, v:fixed, in-flow) | flex=row gap=8px pad=[8,8,8,8] | fill=var(--surface-2)
      - Icon / lucide:eye (#467, frame): size=16x16 (h:fixed, v:fixed, in-flow)
        
        Path (#468, vector): size=13.25x9.33 (h:fixed, v:fixed, absolute)
        
        Path (#469, vector): size=4x4 (h:fixed, v:fixed, absolute)
      - Color previews (#470, text): size=184x16.94 (h:fill, v:fixed, in-flow) | fill=var(--text) | text="Color previews"
      - Toggle / On (#471, frame): size=40x24 (h:fixed, v:fixed, in-flow) | flex=row gap=0px pad=[4,4,4,4] | fill=var(--accent)
        
        Frame (#472, frame): size=16x16 (h:fixed, v:fixed, in-flow) | flex=column gap=0px pad=[0,0,0,0] | fill=var(--on-accent)
    - Menu Item / Named colors (#473, frame): size=272x36 (h:fill, v:fixed, in-flow) | flex=row gap=8px pad=[8,8,8,8]
      - Icon / lucide:type (#474, frame): size=16x16 (h:fixed, v:fixed, in-flow)
        
        Path (#475, vector): size=0x10.67 (h:fixed, v:fixed, absolute)
        
        Path (#476, vector): size=10.67x2 (h:fixed, v:fixed, absolute)
        
        Path (#477, vector): size=4x0 (h:fixed, v:fixed, absolute)
      - Named colors (red, gray) (#478, text): size=184x16.94 (h:fill, v:fixed, in-flow) | fill=var(--text) | text="Named colors (red, gray)"
      - Toggle / Off (#479, frame): size=40x24 (h:fixed, v:fixed, in-flow) | flex=row gap=0px pad=[4,4,4,4] | fill=var(--border)
        
        Frame (#480, frame): size=16x16 (h:fixed, v:fixed, in-flow) | flex=column gap=0px pad=[0,0,0,0] | fill=var(--on-accent)
  - Section Label (#481, text): size=288x14.52 (h:fill, v:fixed, in-flow) | fill=var(--text-muted) | text="RULES"
  - Rules Text (#482, text): size=288x96 (h:fixed, v:fixed, in-flow) | fill=var(--text-muted) | text="Swatch is 12 pt, rounded 3, one border. Hex, rgb, rgba, hsl and hsla always preview. Raw names such as red or gray preview only when enabled. External links show an up-right arrow; wikilinks never do. Inline code chip: radius 6, surface-2 background."

4. Reference Implementation (egui)

pub mod tokens {
    pub const ACCENT: egui::Color32 = egui::Color32::from_rgba_unmultiplied(203, 166, 247, 255);
    pub const BG: egui::Color32 = egui::Color32::from_rgba_unmultiplied(30, 30, 46, 255);
    pub const BORDER: egui::Color32 = egui::Color32::from_rgba_unmultiplied(69, 71, 90, 255);
    pub const CALLOUT_ABSTRACT: egui::Color32 = egui::Color32::from_rgba_unmultiplied(148, 226, 213, 255);
    pub const CALLOUT_BUG: egui::Color32 = egui::Color32::from_rgba_unmultiplied(243, 139, 168, 255);
    pub const CALLOUT_DANGER: egui::Color32 = egui::Color32::from_rgba_unmultiplied(243, 139, 168, 255);
    pub const CALLOUT_EXAMPLE: egui::Color32 = egui::Color32::from_rgba_unmultiplied(203, 166, 247, 255);
    pub const CALLOUT_FAILURE: egui::Color32 = egui::Color32::from_rgba_unmultiplied(243, 139, 168, 255);
    pub const CALLOUT_INFO: egui::Color32 = egui::Color32::from_rgba_unmultiplied(116, 199, 236, 255);
    pub const CALLOUT_NOTE: egui::Color32 = egui::Color32::from_rgba_unmultiplied(137, 180, 250, 255);
    pub const CALLOUT_QUESTION: egui::Color32 = egui::Color32::from_rgba_unmultiplied(249, 226, 175, 255);
    pub const CALLOUT_QUOTE: egui::Color32 = egui::Color32::from_rgba_unmultiplied(166, 173, 200, 255);
    pub const CALLOUT_SUCCESS: egui::Color32 = egui::Color32::from_rgba_unmultiplied(166, 227, 161, 255);
    pub const CALLOUT_TIP: egui::Color32 = egui::Color32::from_rgba_unmultiplied(148, 226, 213, 255);
    pub const CALLOUT_TODO: egui::Color32 = egui::Color32::from_rgba_unmultiplied(137, 180, 250, 255);
    pub const CALLOUT_WARNING: egui::Color32 = egui::Color32::from_rgba_unmultiplied(250, 179, 135, 255);
    pub const CANVAS: egui::Color32 = egui::Color32::from_rgba_unmultiplied(17, 17, 27, 255);
    pub const DANGER: egui::Color32 = egui::Color32::from_rgba_unmultiplied(243, 139, 168, 255);
    pub const HEAT_1: egui::Color32 = egui::Color32::from_rgba_unmultiplied(35, 35, 54, 255);
    pub const HEAT_2: egui::Color32 = egui::Color32::from_rgba_unmultiplied(45, 45, 71, 255);
    pub const HEAT_3: egui::Color32 = egui::Color32::from_rgba_unmultiplied(61, 61, 99, 255);
    pub const HIGHLIGHT: egui::Color32 = egui::Color32::from_rgba_unmultiplied(74, 74, 69, 255);
    pub const LINK: egui::Color32 = egui::Color32::from_rgba_unmultiplied(137, 180, 250, 255);
    pub const LINK_UNRESOLVED: egui::Color32 = egui::Color32::from_rgba_unmultiplied(243, 139, 168, 255);
    pub const ON_ACCENT: egui::Color32 = egui::Color32::from_rgba_unmultiplied(17, 17, 27, 255);
    pub const SUCCESS: egui::Color32 = egui::Color32::from_rgba_unmultiplied(166, 227, 161, 255);
    pub const SURFACE: egui::Color32 = egui::Color32::from_rgba_unmultiplied(24, 24, 37, 255);
    pub const SURFACE_2: egui::Color32 = egui::Color32::from_rgba_unmultiplied(49, 50, 68, 255);
    pub const SYN_COMMENT: egui::Color32 = egui::Color32::from_rgba_unmultiplied(138, 143, 168, 255);
    pub const SYN_FUNCTION: egui::Color32 = egui::Color32::from_rgba_unmultiplied(137, 180, 250, 255);
    pub const SYN_KEY: egui::Color32 = egui::Color32::from_rgba_unmultiplied(116, 199, 236, 255);
    pub const SYN_KEYWORD: egui::Color32 = egui::Color32::from_rgba_unmultiplied(203, 166, 247, 255);
    pub const SYN_NUMBER: egui::Color32 = egui::Color32::from_rgba_unmultiplied(250, 179, 135, 255);
    pub const SYN_PUNCT: egui::Color32 = egui::Color32::from_rgba_unmultiplied(147, 153, 178, 255);
    pub const SYN_STRING: egui::Color32 = egui::Color32::from_rgba_unmultiplied(166, 227, 161, 255);
    pub const SYN_TYPE: egui::Color32 = egui::Color32::from_rgba_unmultiplied(249, 226, 175, 255);
    pub const TEXT: egui::Color32 = egui::Color32::from_rgba_unmultiplied(205, 214, 244, 255);
    pub const TEXT_MUTED: egui::Color32 = egui::Color32::from_rgba_unmultiplied(166, 173, 200, 255);
    pub const WARNING: egui::Color32 = egui::Color32::from_rgba_unmultiplied(249, 226, 175, 255);
    pub const RADIUS_LG: f32 = 16.0;
    pub const RADIUS_MD: f32 = 12.0;
    pub const RADIUS_PILL: f32 = 999.0;
    pub const RADIUS_SM: f32 = 8.0;
    pub const RADIUS_XL: f32 = 24.0;
    pub const SPACE_1: f32 = 4.0;
    pub const SPACE_12: f32 = 48.0;
    pub const SPACE_16: f32 = 64.0;
    pub const SPACE_2: f32 = 8.0;
    pub const SPACE_3: f32 = 12.0;
    pub const SPACE_4: f32 = 16.0;
    pub const SPACE_6: f32 = 24.0;
    pub const SPACE_8: f32 = 32.0;
    pub const TARGET_ROW: f32 = 40.0;
    pub const TARGET_TOUCH: f32 = 44.0;
    pub const TEXT_2XL: f32 = 32.0;
    pub const TEXT_LG: f32 = 20.0;
    pub const TEXT_MD: f32 = 16.0;
    pub const TEXT_SM: f32 = 14.0;
    pub const TEXT_XL: f32 = 24.0;
    pub const TEXT_XS: f32 = 12.0;
    pub const WIDTH_PHONE: f32 = 390.0;
    pub const WIDTH_RIGHT_CARD: f32 = 420.0;
    pub const WIDTH_SIDEBAR: f32 = 240.0;
}

pub fn render(ui: &mut egui::Ui) {
    egui::Frame::new().fill(tokens::CANVAS).inner_margin(egui::Margin { top: 8, right: 8, bottom: 8, left: 8 }).show(ui, |ui| {
        ui.set_min_width(1440.0 as f32);
        ui.set_min_height(1077.88 as f32);
        ui.spacing_mut().item_spacing = egui::vec2(8.0 as f32, 8.0 as f32);
        ui.horizontal(|ui| {
            egui::Frame::new().fill(tokens::BG).corner_radius(16.0 as f32).inner_margin(egui::Margin { top: 32, right: 48, bottom: 32, left: 48 }).show(ui, |ui| {
                ui.spacing_mut().item_spacing = egui::vec2(24.0 as f32, 24.0 as f32);
                ui.vertical(|ui| {
                    egui::Frame::new().show(ui, |ui| {
                        ui.spacing_mut().item_spacing = egui::vec2(8.0 as f32, 8.0 as f32);
                        ui.horizontal_wrapped(|ui| {
                            ui.label(egui::RichText::new("Set the accent to").size(16.0 as f32).color(tokens::TEXT));
                            egui::Frame::new().fill(tokens::SURFACE_2).corner_radius(6.0 as f32).inner_margin(egui::Margin { top: 0, right: 8, bottom: 0, left: 8 }).show(ui, |ui| {
                                ui.set_min_height(24.0 as f32);
                                ui.spacing_mut().item_spacing = egui::vec2(4.0 as f32, 4.0 as f32);
                                ui.horizontal(|ui| {
                                    egui::Frame::new().fill(egui::Color32::from_rgba_unmultiplied(203, 166, 247, 255)).corner_radius(3.0 as f32).stroke(egui::Stroke::new(1.0 as f32, egui::Color32::from_rgba_unmultiplied(69, 71, 90, 255))).show(ui, |ui| {
                                        ui.set_min_width(12.0 as f32);
                                        ui.set_min_height(12.0 as f32);
                                        ui.spacing_mut().item_spacing = egui::vec2(0.0 as f32, 0.0 as f32);
                                        ui.vertical(|ui| {
                                        });
                                    });
                                    ui.label(egui::RichText::new("#cba6f7").size(14.0 as f32).color(tokens::SYN_NUMBER));
                                });
                            });
                            ui.label(egui::RichText::new("or").size(16.0 as f32).color(tokens::TEXT));
                            egui::Frame::new().fill(tokens::SURFACE_2).corner_radius(6.0 as f32).inner_margin(egui::Margin { top: 0, right: 8, bottom: 0, left: 8 }).show(ui, |ui| {
                                ui.set_min_height(24.0 as f32);
                                ui.spacing_mut().item_spacing = egui::vec2(4.0 as f32, 4.0 as f32);
                                ui.horizontal(|ui| {
                                    egui::Frame::new().fill(egui::Color32::from_rgba_unmultiplied(137, 180, 250, 255)).corner_radius(3.0 as f32).stroke(egui::Stroke::new(1.0 as f32, egui::Color32::from_rgba_unmultiplied(69, 71, 90, 255))).show(ui, |ui| {
                                        ui.set_min_width(12.0 as f32);
                                        ui.set_min_height(12.0 as f32);
                                        ui.spacing_mut().item_spacing = egui::vec2(0.0 as f32, 0.0 as f32);
                                        ui.vertical(|ui| {
                                        });
                                    });
                                    ui.label(egui::RichText::new("rgba(137, 180, 250, 0.8)").size(14.0 as f32).color(tokens::SYN_NUMBER));
                                });
                            });
                            ui.label(egui::RichText::new("and read the").size(16.0 as f32).color(tokens::TEXT));
                            egui::Frame::new().fill(tokens::SURFACE_2).corner_radius(6.0 as f32).inner_margin(egui::Margin { top: 0, right: 8, bottom: 0, left: 8 }).show(ui, |ui| {
                                ui.set_min_height(24.0 as f32);
                                ui.spacing_mut().item_spacing = egui::vec2(0.0 as f32, 0.0 as f32);
                                ui.vertical(|ui| {
                                    ui.label(egui::RichText::new("theme.toml").size(14.0 as f32).color(tokens::SYN_STRING));
                                });
                            });
                            ui.label(egui::RichText::new("file, or the").size(16.0 as f32).color(tokens::TEXT));
                            egui::Frame::new().show(ui, |ui| {
                                ui.spacing_mut().item_spacing = egui::vec2(4.0 as f32, 4.0 as f32);
                                ui.horizontal(|ui| {
                                    ui.label(egui::RichText::new("egui docs").size(16.0 as f32).color(tokens::LINK));
                                    egui::Frame::new().show(ui, |ui| {
                                        ui.set_min_width(16.0 as f32);
                                        ui.set_min_height(16.0 as f32);
                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(6.67 as f32, 6.67 as f32), egui::Sense::hover());
                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(6.67 as f32, 6.67 as f32), egui::Sense::hover());
                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                    });
                                });
                            });
                        });
                    });
                    egui::Frame::new().fill(tokens::CANVAS).corner_radius(12.0 as f32).show(ui, |ui| {
                        ui.spacing_mut().item_spacing = egui::vec2(0.0 as f32, 0.0 as f32);
                        ui.vertical(|ui| {
                            egui::Frame::new().inner_margin(egui::Margin { top: 8, right: 8, bottom: 0, left: 16 }).show(ui, |ui| {
                                ui.set_min_height(36.0 as f32);
                                ui.spacing_mut().item_spacing = egui::vec2(8.0 as f32, 8.0 as f32);
                                ui.horizontal(|ui| {
                                    ui.label(egui::RichText::new("RUST").size(12.0 as f32).color(tokens::TEXT_MUTED).strong());
                                    egui::Frame::new().show(ui, |ui| {
                                        ui.spacing_mut().item_spacing = egui::vec2(0.0 as f32, 0.0 as f32);
                                        ui.vertical(|ui| {
                                        });
                                    });
                                    egui::Frame::new().show(ui, |ui| {
                                        ui.spacing_mut().item_spacing = egui::vec2(4.0 as f32, 4.0 as f32);
                                        ui.horizontal(|ui| {
                                            egui::Frame::new().corner_radius(6.0 as f32).show(ui, |ui| {
                                                ui.set_min_width(28.0 as f32);
                                                ui.set_min_height(28.0 as f32);
                                                ui.spacing_mut().item_spacing = egui::vec2(0.0 as f32, 0.0 as f32);
                                                ui.horizontal(|ui| {
                                                    egui::Frame::new().show(ui, |ui| {
                                                        ui.set_min_width(16.0 as f32);
                                                        ui.set_min_height(16.0 as f32);
                                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(2.0 as f32, 4.0 as f32), egui::Sense::hover());
                                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(12.0 as f32, 4.67 as f32), egui::Sense::hover());
                                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(4.0 as f32, 0.0 as f32), egui::Sense::hover());
                                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(12.0 as f32, 0.0 as f32), egui::Sense::hover());
                                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                    });
                                                });
                                            });
                                            egui::Frame::new().fill(tokens::SURFACE_2).corner_radius(6.0 as f32).inner_margin(egui::Margin { top: 0, right: 8, bottom: 0, left: 8 }).show(ui, |ui| {
                                                ui.set_min_height(28.0 as f32);
                                                ui.spacing_mut().item_spacing = egui::vec2(4.0 as f32, 4.0 as f32);
                                                ui.horizontal(|ui| {
                                                    egui::Frame::new().show(ui, |ui| {
                                                        ui.set_min_width(16.0 as f32);
                                                        ui.set_min_height(16.0 as f32);
                                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(9.33 as f32, 9.33 as f32), egui::Sense::hover());
                                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(9.33 as f32, 9.33 as f32), egui::Sense::hover());
                                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                    });
                                                    ui.label(egui::RichText::new("Copy").size(12.0 as f32).color(tokens::TEXT).strong());
                                                });
                                            });
                                        });
                                    });
                                });
                            });
                            egui::Frame::new().inner_margin(egui::Margin { top: 8, right: 16, bottom: 16, left: 16 }).show(ui, |ui| {
                                ui.spacing_mut().item_spacing = egui::vec2(4.0 as f32, 4.0 as f32);
                                ui.vertical(|ui| {
                                    egui::Frame::new().show(ui, |ui| {
                                        ui.spacing_mut().item_spacing = egui::vec2(8.0 as f32, 8.0 as f32);
                                        ui.horizontal(|ui| {
                                            ui.label(egui::RichText::new("fn").size(14.0 as f32).color(tokens::SYN_KEYWORD));
                                            ui.label(egui::RichText::new("next_due").size(14.0 as f32).color(tokens::SYN_FUNCTION));
                                            ui.label(egui::RichText::new("(").size(14.0 as f32).color(tokens::SYN_PUNCT));
                                            ui.label(egui::RichText::new("now").size(14.0 as f32).color(tokens::TEXT));
                                            ui.label(egui::RichText::new(":").size(14.0 as f32).color(tokens::SYN_PUNCT));
                                            ui.label(egui::RichText::new("Date").size(14.0 as f32).color(tokens::SYN_TYPE));
                                            ui.label(egui::RichText::new(") ->").size(14.0 as f32).color(tokens::SYN_PUNCT));
                                            ui.label(egui::RichText::new("Option<Task>").size(14.0 as f32).color(tokens::SYN_TYPE));
                                            ui.label(egui::RichText::new("{").size(14.0 as f32).color(tokens::SYN_PUNCT));
                                        });
                                    });
                                    egui::Frame::new().inner_margin(egui::Margin { top: 0, right: 0, bottom: 0, left: 16 }).show(ui, |ui| {
                                        ui.spacing_mut().item_spacing = egui::vec2(8.0 as f32, 8.0 as f32);
                                        ui.horizontal(|ui| {
                                            ui.label(egui::RichText::new("// first task that is not done yet").size(14.0 as f32).color(tokens::SYN_COMMENT));
                                        });
                                    });
                                    egui::Frame::new().inner_margin(egui::Margin { top: 0, right: 0, bottom: 0, left: 16 }).show(ui, |ui| {
                                        ui.spacing_mut().item_spacing = egui::vec2(8.0 as f32, 8.0 as f32);
                                        ui.horizontal(|ui| {
                                            ui.label(egui::RichText::new("let").size(14.0 as f32).color(tokens::SYN_KEYWORD));
                                            ui.label(egui::RichText::new("limit").size(14.0 as f32).color(tokens::TEXT));
                                            ui.label(egui::RichText::new("=").size(14.0 as f32).color(tokens::SYN_PUNCT));
                                            ui.label(egui::RichText::new("42").size(14.0 as f32).color(tokens::SYN_NUMBER));
                                            ui.label(egui::RichText::new(";").size(14.0 as f32).color(tokens::SYN_PUNCT));
                                            ui.label(egui::RichText::new("\"agenda\"").size(14.0 as f32).color(tokens::SYN_STRING));
                                        });
                                    });
                                    egui::Frame::new().show(ui, |ui| {
                                        ui.spacing_mut().item_spacing = egui::vec2(8.0 as f32, 8.0 as f32);
                                        ui.horizontal(|ui| {
                                            ui.label(egui::RichText::new("}").size(14.0 as f32).color(tokens::SYN_PUNCT));
                                        });
                                    });
                                });
                            });
                        });
                    });
                    egui::Frame::new().fill(tokens::CANVAS).corner_radius(12.0 as f32).show(ui, |ui| {
                        ui.spacing_mut().item_spacing = egui::vec2(0.0 as f32, 0.0 as f32);
                        ui.vertical(|ui| {
                            egui::Frame::new().inner_margin(egui::Margin { top: 8, right: 8, bottom: 0, left: 16 }).show(ui, |ui| {
                                ui.set_min_height(36.0 as f32);
                                ui.spacing_mut().item_spacing = egui::vec2(8.0 as f32, 8.0 as f32);
                                ui.horizontal(|ui| {
                                    ui.label(egui::RichText::new("JSON").size(12.0 as f32).color(tokens::TEXT_MUTED).strong());
                                    egui::Frame::new().fill(tokens::SURFACE).corner_radius(999.0 as f32).inner_margin(egui::Margin { top: 0, right: 8, bottom: 0, left: 8 }).show(ui, |ui| {
                                        ui.set_min_height(24.0 as f32);
                                        ui.spacing_mut().item_spacing = egui::vec2(4.0 as f32, 4.0 as f32);
                                        ui.horizontal(|ui| {
                                            egui::Frame::new().show(ui, |ui| {
                                                ui.set_min_width(16.0 as f32);
                                                ui.set_min_height(16.0 as f32);
                                                let (rect, _) = ui.allocate_exact_size(egui::vec2(10.67 as f32, 7.33 as f32), egui::Sense::hover());
                                                ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                            });
                                            ui.label(egui::RichText::new("Valid").size(12.0 as f32).color(tokens::SUCCESS).strong());
                                        });
                                    });
                                    egui::Frame::new().show(ui, |ui| {
                                        ui.spacing_mut().item_spacing = egui::vec2(0.0 as f32, 0.0 as f32);
                                        ui.vertical(|ui| {
                                        });
                                    });
                                    egui::Frame::new().show(ui, |ui| {
                                        ui.spacing_mut().item_spacing = egui::vec2(4.0 as f32, 4.0 as f32);
                                        ui.horizontal(|ui| {
                                            egui::Frame::new().fill(tokens::ACCENT).corner_radius(6.0 as f32).inner_margin(egui::Margin { top: 0, right: 8, bottom: 0, left: 8 }).show(ui, |ui| {
                                                ui.set_min_height(28.0 as f32);
                                                ui.spacing_mut().item_spacing = egui::vec2(4.0 as f32, 4.0 as f32);
                                                ui.horizontal(|ui| {
                                                    egui::Frame::new().show(ui, |ui| {
                                                        ui.set_min_width(16.0 as f32);
                                                        ui.set_min_height(16.0 as f32);
                                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(13.33 as f32, 13.33 as f32), egui::Sense::hover());
                                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(2.0 as f32, 2.0 as f32), egui::Sense::hover());
                                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(0.0 as f32, 2.67 as f32), egui::Sense::hover());
                                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(0.0 as f32, 2.67 as f32), egui::Sense::hover());
                                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(0.0 as f32, 1.33 as f32), egui::Sense::hover());
                                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(2.67 as f32, 0.0 as f32), egui::Sense::hover());
                                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(2.67 as f32, 0.0 as f32), egui::Sense::hover());
                                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(1.33 as f32, 0.0 as f32), egui::Sense::hover());
                                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                    });
                                                    ui.label(egui::RichText::new("Format").size(12.0 as f32).color(tokens::ON_ACCENT).strong());
                                                });
                                            });
                                            egui::Frame::new().corner_radius(6.0 as f32).inner_margin(egui::Margin { top: 0, right: 8, bottom: 0, left: 8 }).show(ui, |ui| {
                                                ui.set_min_height(28.0 as f32);
                                                ui.spacing_mut().item_spacing = egui::vec2(4.0 as f32, 4.0 as f32);
                                                ui.horizontal(|ui| {
                                                    egui::Frame::new().show(ui, |ui| {
                                                        ui.set_min_width(16.0 as f32);
                                                        ui.set_min_height(16.0 as f32);
                                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(4.67 as f32, 4.67 as f32), egui::Sense::hover());
                                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(4.0 as f32, 4.0 as f32), egui::Sense::hover());
                                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(4.67 as f32, 4.67 as f32), egui::Sense::hover());
                                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(4.0 as f32, 4.0 as f32), egui::Sense::hover());
                                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                    });
                                                    ui.label(egui::RichText::new("Minify").size(12.0 as f32).color(tokens::TEXT_MUTED).strong());
                                                });
                                            });
                                            egui::Frame::new().corner_radius(6.0 as f32).inner_margin(egui::Margin { top: 0, right: 8, bottom: 0, left: 8 }).show(ui, |ui| {
                                                ui.set_min_height(28.0 as f32);
                                                ui.spacing_mut().item_spacing = egui::vec2(4.0 as f32, 4.0 as f32);
                                                ui.horizontal(|ui| {
                                                    egui::Frame::new().show(ui, |ui| {
                                                        ui.set_min_width(16.0 as f32);
                                                        ui.set_min_height(16.0 as f32);
                                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(9.33 as f32, 9.33 as f32), egui::Sense::hover());
                                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(9.33 as f32, 9.33 as f32), egui::Sense::hover());
                                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                    });
                                                    ui.label(egui::RichText::new("Copy").size(12.0 as f32).color(tokens::TEXT_MUTED).strong());
                                                });
                                            });
                                        });
                                    });
                                });
                            });
                            egui::Frame::new().inner_margin(egui::Margin { top: 8, right: 16, bottom: 16, left: 16 }).show(ui, |ui| {
                                ui.spacing_mut().item_spacing = egui::vec2(4.0 as f32, 4.0 as f32);
                                ui.vertical(|ui| {
                                    egui::Frame::new().show(ui, |ui| {
                                        ui.spacing_mut().item_spacing = egui::vec2(8.0 as f32, 8.0 as f32);
                                        ui.horizontal(|ui| {
                                            ui.label(egui::RichText::new("{").size(14.0 as f32).color(tokens::SYN_PUNCT));
                                        });
                                    });
                                    egui::Frame::new().inner_margin(egui::Margin { top: 0, right: 0, bottom: 0, left: 16 }).show(ui, |ui| {
                                        ui.spacing_mut().item_spacing = egui::vec2(8.0 as f32, 8.0 as f32);
                                        ui.horizontal(|ui| {
                                            ui.label(egui::RichText::new("\"theme\"").size(14.0 as f32).color(tokens::SYN_KEY));
                                            ui.label(egui::RichText::new(":").size(14.0 as f32).color(tokens::SYN_PUNCT));
                                            ui.label(egui::RichText::new("\"catppuccin-mocha\"").size(14.0 as f32).color(tokens::SYN_STRING));
                                            ui.label(egui::RichText::new(",").size(14.0 as f32).color(tokens::SYN_PUNCT));
                                        });
                                    });
                                    egui::Frame::new().inner_margin(egui::Margin { top: 0, right: 0, bottom: 0, left: 16 }).show(ui, |ui| {
                                        ui.spacing_mut().item_spacing = egui::vec2(8.0 as f32, 8.0 as f32);
                                        ui.horizontal(|ui| {
                                            ui.label(egui::RichText::new("\"padding\"").size(14.0 as f32).color(tokens::SYN_KEY));
                                            ui.label(egui::RichText::new(":").size(14.0 as f32).color(tokens::SYN_PUNCT));
                                            ui.label(egui::RichText::new("24").size(14.0 as f32).color(tokens::SYN_NUMBER));
                                        });
                                    });
                                    egui::Frame::new().show(ui, |ui| {
                                        ui.spacing_mut().item_spacing = egui::vec2(8.0 as f32, 8.0 as f32);
                                        ui.horizontal(|ui| {
                                            ui.label(egui::RichText::new("}").size(14.0 as f32).color(tokens::SYN_PUNCT));
                                        });
                                    });
                                });
                            });
                        });
                    });
                    egui::Frame::new().show(ui, |ui| {
                        ui.spacing_mut().item_spacing = egui::vec2(24.0 as f32, 24.0 as f32);
                        ui.vertical(|ui| {
                            egui::Frame::new().fill(tokens::CANVAS).corner_radius(12.0 as f32).show(ui, |ui| {
                                ui.spacing_mut().item_spacing = egui::vec2(0.0 as f32, 0.0 as f32);
                                ui.vertical(|ui| {
                                    egui::Frame::new().inner_margin(egui::Margin { top: 8, right: 8, bottom: 0, left: 16 }).show(ui, |ui| {
                                        ui.set_min_height(36.0 as f32);
                                        ui.spacing_mut().item_spacing = egui::vec2(8.0 as f32, 8.0 as f32);
                                        ui.horizontal(|ui| {
                                            ui.label(egui::RichText::new("JSON").size(12.0 as f32).color(tokens::TEXT_MUTED).strong());
                                            egui::Frame::new().fill(tokens::SURFACE).corner_radius(999.0 as f32).inner_margin(egui::Margin { top: 0, right: 8, bottom: 0, left: 8 }).show(ui, |ui| {
                                                ui.set_min_height(24.0 as f32);
                                                ui.spacing_mut().item_spacing = egui::vec2(4.0 as f32, 4.0 as f32);
                                                ui.horizontal(|ui| {
                                                    egui::Frame::new().show(ui, |ui| {
                                                        ui.set_min_width(16.0 as f32);
                                                        ui.set_min_height(16.0 as f32);
                                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(13.33 as f32, 13.33 as f32), egui::Sense::hover());
                                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(0.0 as f32, 2.67 as f32), egui::Sense::hover());
                                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(0.01 as f32, 0.0 as f32), egui::Sense::hover());
                                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                    });
                                                    ui.label(egui::RichText::new("Line 3: expected , or }").size(12.0 as f32).color(tokens::DANGER).strong());
                                                });
                                            });
                                            egui::Frame::new().show(ui, |ui| {
                                                ui.spacing_mut().item_spacing = egui::vec2(0.0 as f32, 0.0 as f32);
                                                ui.vertical(|ui| {
                                                });
                                            });
                                            egui::Frame::new().corner_radius(6.0 as f32).inner_margin(egui::Margin { top: 0, right: 8, bottom: 0, left: 8 }).show(ui, |ui| {
                                                ui.set_min_height(28.0 as f32);
                                                ui.spacing_mut().item_spacing = egui::vec2(4.0 as f32, 4.0 as f32);
                                                ui.horizontal(|ui| {
                                                    egui::Frame::new().show(ui, |ui| {
                                                        ui.set_min_width(16.0 as f32);
                                                        ui.set_min_height(16.0 as f32);
                                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(9.33 as f32, 9.33 as f32), egui::Sense::hover());
                                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(9.33 as f32, 9.33 as f32), egui::Sense::hover());
                                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                    });
                                                    ui.label(egui::RichText::new("Copy").size(12.0 as f32).color(tokens::TEXT_MUTED).strong());
                                                });
                                            });
                                        });
                                    });
                                    egui::Frame::new().inner_margin(egui::Margin { top: 8, right: 16, bottom: 16, left: 16 }).show(ui, |ui| {
                                        ui.spacing_mut().item_spacing = egui::vec2(4.0 as f32, 4.0 as f32);
                                        ui.vertical(|ui| {
                                            egui::Frame::new().show(ui, |ui| {
                                                ui.spacing_mut().item_spacing = egui::vec2(8.0 as f32, 8.0 as f32);
                                                ui.horizontal(|ui| {
                                                    ui.label(egui::RichText::new("{").size(14.0 as f32).color(tokens::SYN_PUNCT));
                                                });
                                            });
                                            egui::Frame::new().inner_margin(egui::Margin { top: 0, right: 0, bottom: 0, left: 16 }).show(ui, |ui| {
                                                ui.spacing_mut().item_spacing = egui::vec2(8.0 as f32, 8.0 as f32);
                                                ui.horizontal(|ui| {
                                                    ui.label(egui::RichText::new("\"padding\"").size(14.0 as f32).color(tokens::SYN_KEY));
                                                    ui.label(egui::RichText::new(":").size(14.0 as f32).color(tokens::SYN_PUNCT));
                                                    ui.label(egui::RichText::new("24").size(14.0 as f32).color(tokens::SYN_NUMBER));
                                                });
                                            });
                                            egui::Frame::new().fill(tokens::SURFACE).corner_radius(4.0 as f32).stroke(egui::Stroke::new(1.0 as f32, egui::Color32::from_rgba_unmultiplied(243, 139, 168, 255))).inner_margin(egui::Margin { top: 0, right: 8, bottom: 0, left: 8 }).show(ui, |ui| {
                                                ui.spacing_mut().item_spacing = egui::vec2(8.0 as f32, 8.0 as f32);
                                                ui.horizontal(|ui| {
                                                    ui.label(egui::RichText::new("\"theme\"").size(14.0 as f32).color(tokens::SYN_KEY));
                                                    ui.label(egui::RichText::new(":").size(14.0 as f32).color(tokens::SYN_PUNCT));
                                                    ui.label(egui::RichText::new("\"mocha\"").size(14.0 as f32).color(tokens::SYN_STRING));
                                                });
                                            });
                                            egui::Frame::new().show(ui, |ui| {
                                                ui.spacing_mut().item_spacing = egui::vec2(8.0 as f32, 8.0 as f32);
                                                ui.horizontal(|ui| {
                                                    ui.label(egui::RichText::new("}").size(14.0 as f32).color(tokens::SYN_PUNCT));
                                                });
                                            });
                                        });
                                    });
                                });
                            });
                            egui::Frame::new().fill(tokens::SURFACE).corner_radius(12.0 as f32).stroke(egui::Stroke::new(1.0 as f32, egui::Color32::from_rgba_unmultiplied(203, 166, 247, 255))).inner_margin(egui::Margin { top: 16, right: 16, bottom: 16, left: 16 }).show(ui, |ui| {
                                ui.spacing_mut().item_spacing = egui::vec2(8.0 as f32, 8.0 as f32);
                                ui.vertical(|ui| {
                                    egui::Frame::new().show(ui, |ui| {
                                        ui.spacing_mut().item_spacing = egui::vec2(8.0 as f32, 8.0 as f32);
                                        ui.horizontal(|ui| {
                                            egui::Frame::new().show(ui, |ui| {
                                                ui.set_min_width(16.0 as f32);
                                                ui.set_min_height(16.0 as f32);
                                                let (rect, _) = ui.allocate_exact_size(egui::vec2(13.34 as f32, 13.34 as f32), egui::Sense::hover());
                                                ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                let (rect, _) = ui.allocate_exact_size(egui::vec2(0.0 as f32, 2.67 as f32), egui::Sense::hover());
                                                ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                let (rect, _) = ui.allocate_exact_size(egui::vec2(2.67 as f32, 0.0 as f32), egui::Sense::hover());
                                                ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                let (rect, _) = ui.allocate_exact_size(egui::vec2(2.67 as f32, 2.67 as f32), egui::Sense::hover());
                                                ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                            });
                                            ui.label(egui::RichText::new("This block looks like JSON").size(14.0 as f32).color(tokens::TEXT).strong());
                                        });
                                    });
                                    ui.label(egui::RichText::new("A single string without a language label parses as JSON. Format it? Nothing changes until you accept.").size(14.0 as f32).color(tokens::TEXT_MUTED));
                                    egui::Frame::new().show(ui, |ui| {
                                        ui.spacing_mut().item_spacing = egui::vec2(8.0 as f32, 8.0 as f32);
                                        ui.horizontal(|ui| {
                                            egui::Frame::new().fill(tokens::ACCENT).corner_radius(12.0 as f32).inner_margin(egui::Margin { top: 12, right: 16, bottom: 12, left: 16 }).show(ui, |ui| {
                                                ui.spacing_mut().item_spacing = egui::vec2(8.0 as f32, 8.0 as f32);
                                                ui.horizontal(|ui| {
                                                    ui.label(egui::RichText::new("Format").size(14.0 as f32).color(tokens::ON_ACCENT).strong());
                                                });
                                            });
                                            egui::Frame::new().fill(tokens::SURFACE_2).corner_radius(12.0 as f32).inner_margin(egui::Margin { top: 12, right: 16, bottom: 12, left: 16 }).show(ui, |ui| {
                                                ui.spacing_mut().item_spacing = egui::vec2(8.0 as f32, 8.0 as f32);
                                                ui.horizontal(|ui| {
                                                    ui.label(egui::RichText::new("Not now").size(14.0 as f32).color(tokens::TEXT).strong());
                                                });
                                            });
                                        });
                                    });
                                });
                            });
                            egui::Frame::new().fill(tokens::CANVAS).corner_radius(12.0 as f32).show(ui, |ui| {
                                ui.spacing_mut().item_spacing = egui::vec2(0.0 as f32, 0.0 as f32);
                                ui.vertical(|ui| {
                                    egui::Frame::new().inner_margin(egui::Margin { top: 8, right: 8, bottom: 0, left: 16 }).show(ui, |ui| {
                                        ui.set_min_height(36.0 as f32);
                                        ui.spacing_mut().item_spacing = egui::vec2(8.0 as f32, 8.0 as f32);
                                        ui.horizontal(|ui| {
                                            ui.label(egui::RichText::new("TREE").size(12.0 as f32).color(tokens::TEXT_MUTED).strong());
                                            egui::Frame::new().show(ui, |ui| {
                                                ui.spacing_mut().item_spacing = egui::vec2(0.0 as f32, 0.0 as f32);
                                                ui.vertical(|ui| {
                                                });
                                            });
                                            egui::Frame::new().corner_radius(6.0 as f32).inner_margin(egui::Margin { top: 0, right: 8, bottom: 0, left: 8 }).show(ui, |ui| {
                                                ui.set_min_height(28.0 as f32);
                                                ui.spacing_mut().item_spacing = egui::vec2(4.0 as f32, 4.0 as f32);
                                                ui.horizontal(|ui| {
                                                    egui::Frame::new().show(ui, |ui| {
                                                        ui.set_min_width(16.0 as f32);
                                                        ui.set_min_height(16.0 as f32);
                                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(9.33 as f32, 9.33 as f32), egui::Sense::hover());
                                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(9.33 as f32, 9.33 as f32), egui::Sense::hover());
                                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                    });
                                                    ui.label(egui::RichText::new("Copy").size(12.0 as f32).color(tokens::TEXT_MUTED).strong());
                                                });
                                            });
                                        });
                                    });
                                    egui::Frame::new().inner_margin(egui::Margin { top: 8, right: 16, bottom: 16, left: 16 }).show(ui, |ui| {
                                        ui.spacing_mut().item_spacing = egui::vec2(4.0 as f32, 4.0 as f32);
                                        ui.vertical(|ui| {
                                            egui::Frame::new().show(ui, |ui| {
                                                ui.spacing_mut().item_spacing = egui::vec2(8.0 as f32, 8.0 as f32);
                                                ui.horizontal(|ui| {
                                                    egui::Frame::new().show(ui, |ui| {
                                                        ui.set_min_width(16.0 as f32);
                                                        ui.set_min_height(16.0 as f32);
                                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(13.33 as f32, 11.33 as f32), egui::Sense::hover());
                                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                    });
                                                    ui.label(egui::RichText::new("crates/").size(14.0 as f32).color(tokens::TEXT));
                                                });
                                            });
                                            egui::Frame::new().inner_margin(egui::Margin { top: 0, right: 0, bottom: 0, left: 8 }).show(ui, |ui| {
                                                ui.spacing_mut().item_spacing = egui::vec2(8.0 as f32, 8.0 as f32);
                                                ui.horizontal(|ui| {
                                                    ui.label(egui::RichText::new("|--").size(14.0 as f32).color(tokens::SYN_PUNCT));
                                                    egui::Frame::new().show(ui, |ui| {
                                                        ui.set_min_width(16.0 as f32);
                                                        ui.set_min_height(16.0 as f32);
                                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(13.33 as f32, 11.33 as f32), egui::Sense::hover());
                                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                    });
                                                    ui.label(egui::RichText::new("editor/").size(14.0 as f32).color(tokens::TEXT));
                                                });
                                            });
                                            egui::Frame::new().inner_margin(egui::Margin { top: 0, right: 0, bottom: 0, left: 8 }).show(ui, |ui| {
                                                ui.spacing_mut().item_spacing = egui::vec2(8.0 as f32, 8.0 as f32);
                                                ui.horizontal(|ui| {
                                                    ui.label(egui::RichText::new("'--").size(14.0 as f32).color(tokens::SYN_PUNCT));
                                                    egui::Frame::new().show(ui, |ui| {
                                                        ui.set_min_width(16.0 as f32);
                                                        ui.set_min_height(16.0 as f32);
                                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(10.67 as f32, 13.33 as f32), egui::Sense::hover());
                                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(4.0 as f32, 4.0 as f32), egui::Sense::hover());
                                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(1.33 as f32, 3.33 as f32), egui::Sense::hover());
                                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(1.33 as f32, 3.33 as f32), egui::Sense::hover());
                                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                    });
                                                    ui.label(egui::RichText::new("lib.rs").size(14.0 as f32).color(tokens::TEXT));
                                                    ui.label(egui::RichText::new("# entry").size(14.0 as f32).color(tokens::SYN_COMMENT));
                                                });
                                            });
                                        });
                                    });
                                });
                            });
                            egui::Frame::new().fill(tokens::CANVAS).corner_radius(12.0 as f32).show(ui, |ui| {
                                ui.spacing_mut().item_spacing = egui::vec2(0.0 as f32, 0.0 as f32);
                                ui.vertical(|ui| {
                                    egui::Frame::new().inner_margin(egui::Margin { top: 8, right: 8, bottom: 0, left: 16 }).show(ui, |ui| {
                                        ui.set_min_height(36.0 as f32);
                                        ui.spacing_mut().item_spacing = egui::vec2(8.0 as f32, 8.0 as f32);
                                        ui.horizontal(|ui| {
                                            ui.label(egui::RichText::new("MERMAID").size(12.0 as f32).color(tokens::TEXT_MUTED).strong());
                                            egui::Frame::new().show(ui, |ui| {
                                                ui.spacing_mut().item_spacing = egui::vec2(0.0 as f32, 0.0 as f32);
                                                ui.vertical(|ui| {
                                                });
                                            });
                                            egui::Frame::new().fill(tokens::SURFACE).corner_radius(8.0 as f32).inner_margin(egui::Margin { top: 4, right: 4, bottom: 4, left: 4 }).show(ui, |ui| {
                                                ui.spacing_mut().item_spacing = egui::vec2(4.0 as f32, 4.0 as f32);
                                                ui.horizontal(|ui| {
                                                    egui::Frame::new().corner_radius(6.0 as f32).inner_margin(egui::Margin { top: 4, right: 12, bottom: 4, left: 12 }).show(ui, |ui| {
                                                        ui.spacing_mut().item_spacing = egui::vec2(0.0 as f32, 0.0 as f32);
                                                        ui.vertical(|ui| {
                                                            ui.label(egui::RichText::new("Source").size(12.0 as f32).color(tokens::TEXT_MUTED).strong());
                                                        });
                                                    });
                                                    egui::Frame::new().fill(tokens::SURFACE_2).corner_radius(6.0 as f32).inner_margin(egui::Margin { top: 4, right: 12, bottom: 4, left: 12 }).show(ui, |ui| {
                                                        ui.spacing_mut().item_spacing = egui::vec2(0.0 as f32, 0.0 as f32);
                                                        ui.vertical(|ui| {
                                                            ui.label(egui::RichText::new("Diagram").size(12.0 as f32).color(tokens::TEXT).strong());
                                                        });
                                                    });
                                                });
                                            });
                                            egui::Frame::new().corner_radius(6.0 as f32).inner_margin(egui::Margin { top: 0, right: 8, bottom: 0, left: 8 }).show(ui, |ui| {
                                                ui.set_min_height(28.0 as f32);
                                                ui.spacing_mut().item_spacing = egui::vec2(4.0 as f32, 4.0 as f32);
                                                ui.horizontal(|ui| {
                                                    egui::Frame::new().show(ui, |ui| {
                                                        ui.set_min_width(16.0 as f32);
                                                        ui.set_min_height(16.0 as f32);
                                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(9.33 as f32, 9.33 as f32), egui::Sense::hover());
                                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(9.33 as f32, 9.33 as f32), egui::Sense::hover());
                                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                    });
                                                    ui.label(egui::RichText::new("Copy").size(12.0 as f32).color(tokens::TEXT_MUTED).strong());
                                                });
                                            });
                                        });
                                    });
                                    egui::Frame::new().inner_margin(egui::Margin { top: 24, right: 24, bottom: 24, left: 24 }).show(ui, |ui| {
                                        ui.spacing_mut().item_spacing = egui::vec2(24.0 as f32, 24.0 as f32);
                                        ui.horizontal(|ui| {
                                            egui::Frame::new().fill(tokens::SURFACE_2).corner_radius(8.0 as f32).stroke(egui::Stroke::new(1.0 as f32, egui::Color32::from_rgba_unmultiplied(203, 166, 247, 255))).inner_margin(egui::Margin { top: 8, right: 16, bottom: 8, left: 16 }).show(ui, |ui| {
                                                ui.spacing_mut().item_spacing = egui::vec2(0.0 as f32, 0.0 as f32);
                                                ui.vertical(|ui| {
                                                    ui.label(egui::RichText::new("Open vault").size(14.0 as f32).color(tokens::TEXT));
                                                });
                                            });
                                            egui::Frame::new().show(ui, |ui| {
                                                ui.set_min_width(16.0 as f32);
                                                ui.set_min_height(16.0 as f32);
                                                let (rect, _) = ui.allocate_exact_size(egui::vec2(9.33 as f32, 0.0 as f32), egui::Sense::hover());
                                                ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                let (rect, _) = ui.allocate_exact_size(egui::vec2(4.67 as f32, 9.33 as f32), egui::Sense::hover());
                                                ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                            });
                                            egui::Frame::new().fill(tokens::SURFACE_2).corner_radius(8.0 as f32).stroke(egui::Stroke::new(1.0 as f32, egui::Color32::from_rgba_unmultiplied(69, 71, 90, 255))).inner_margin(egui::Margin { top: 8, right: 16, bottom: 8, left: 16 }).show(ui, |ui| {
                                                ui.spacing_mut().item_spacing = egui::vec2(0.0 as f32, 0.0 as f32);
                                                ui.vertical(|ui| {
                                                    ui.label(egui::RichText::new("List files").size(14.0 as f32).color(tokens::TEXT));
                                                });
                                            });
                                            egui::Frame::new().show(ui, |ui| {
                                                ui.set_min_width(16.0 as f32);
                                                ui.set_min_height(16.0 as f32);
                                                let (rect, _) = ui.allocate_exact_size(egui::vec2(9.33 as f32, 0.0 as f32), egui::Sense::hover());
                                                ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                                let (rect, _) = ui.allocate_exact_size(egui::vec2(4.67 as f32, 9.33 as f32), egui::Sense::hover());
                                                ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                            });
                                            egui::Frame::new().fill(tokens::SURFACE_2).corner_radius(8.0 as f32).stroke(egui::Stroke::new(1.0 as f32, egui::Color32::from_rgba_unmultiplied(69, 71, 90, 255))).inner_margin(egui::Margin { top: 8, right: 16, bottom: 8, left: 16 }).show(ui, |ui| {
                                                ui.spacing_mut().item_spacing = egui::vec2(0.0 as f32, 0.0 as f32);
                                                ui.vertical(|ui| {
                                                    ui.label(egui::RichText::new("Index in background").size(14.0 as f32).color(tokens::TEXT));
                                                });
                                            });
                                        });
                                    });
                                });
                            });
                        });
                    });
                });
            });
            egui::Frame::new().fill(tokens::BG).corner_radius(16.0 as f32).inner_margin(egui::Margin { top: 16, right: 16, bottom: 16, left: 16 }).show(ui, |ui| {
                ui.set_min_width(320.0 as f32);
                ui.spacing_mut().item_spacing = egui::vec2(16.0 as f32, 16.0 as f32);
                ui.vertical(|ui| {
                    ui.label(egui::RichText::new("RIGHT-CLICK A COLOR").size(12.0 as f32).color(tokens::TEXT_MUTED).strong());
                    egui::Frame::new().fill(tokens::SURFACE).corner_radius(12.0 as f32).stroke(egui::Stroke::new(1.0 as f32, egui::Color32::from_rgba_unmultiplied(69, 71, 90, 255))).inner_margin(egui::Margin { top: 8, right: 8, bottom: 8, left: 8 }).show(ui, |ui| {
                        ui.spacing_mut().item_spacing = egui::vec2(4.0 as f32, 4.0 as f32);
                        ui.vertical(|ui| {
                            egui::Frame::new().inner_margin(egui::Margin { top: 8, right: 8, bottom: 8, left: 8 }).show(ui, |ui| {
                                ui.spacing_mut().item_spacing = egui::vec2(8.0 as f32, 8.0 as f32);
                                ui.horizontal(|ui| {
                                    egui::Frame::new().fill(egui::Color32::from_rgba_unmultiplied(203, 166, 247, 255)).corner_radius(6.0 as f32).stroke(egui::Stroke::new(1.0 as f32, egui::Color32::from_rgba_unmultiplied(69, 71, 90, 255))).show(ui, |ui| {
                                        ui.set_min_width(24.0 as f32);
                                        ui.set_min_height(24.0 as f32);
                                        ui.spacing_mut().item_spacing = egui::vec2(0.0 as f32, 0.0 as f32);
                                        ui.vertical(|ui| {
                                        });
                                    });
                                    ui.label(egui::RichText::new("#cba6f7").size(14.0 as f32).color(tokens::TEXT).strong());
                                });
                            });
                            egui::Frame::new().corner_radius(8.0 as f32).inner_margin(egui::Margin { top: 8, right: 8, bottom: 8, left: 8 }).show(ui, |ui| {
                                ui.set_min_height(36.0 as f32);
                                ui.spacing_mut().item_spacing = egui::vec2(8.0 as f32, 8.0 as f32);
                                ui.horizontal(|ui| {
                                    egui::Frame::new().show(ui, |ui| {
                                        ui.set_min_width(16.0 as f32);
                                        ui.set_min_height(16.0 as f32);
                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(9.33 as f32, 9.33 as f32), egui::Sense::hover());
                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(9.33 as f32, 9.33 as f32), egui::Sense::hover());
                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                    });
                                    ui.label(egui::RichText::new("Copy color").size(14.0 as f32).color(tokens::TEXT));
                                });
                            });
                            egui::Frame::new().corner_radius(8.0 as f32).inner_margin(egui::Margin { top: 8, right: 8, bottom: 8, left: 8 }).show(ui, |ui| {
                                ui.set_min_height(36.0 as f32);
                                ui.spacing_mut().item_spacing = egui::vec2(8.0 as f32, 8.0 as f32);
                                ui.horizontal(|ui| {
                                    egui::Frame::new().show(ui, |ui| {
                                        ui.set_min_width(16.0 as f32);
                                        ui.set_min_height(16.0 as f32);
                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(8.39 as f32, 8.39 as f32), egui::Sense::hover());
                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(7.36 as f32, 7.36 as f32), egui::Sense::hover());
                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(0.28 as f32, 0.28 as f32), egui::Sense::hover());
                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                    });
                                    ui.label(egui::RichText::new("Copy as rgb()").size(14.0 as f32).color(tokens::TEXT));
                                });
                            });
                            egui::Frame::new().fill(tokens::SURFACE_2).corner_radius(8.0 as f32).inner_margin(egui::Margin { top: 8, right: 8, bottom: 8, left: 8 }).show(ui, |ui| {
                                ui.set_min_height(36.0 as f32);
                                ui.spacing_mut().item_spacing = egui::vec2(8.0 as f32, 8.0 as f32);
                                ui.horizontal(|ui| {
                                    egui::Frame::new().show(ui, |ui| {
                                        ui.set_min_width(16.0 as f32);
                                        ui.set_min_height(16.0 as f32);
                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(13.25 as f32, 9.33 as f32), egui::Sense::hover());
                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(4.0 as f32, 4.0 as f32), egui::Sense::hover());
                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                    });
                                    ui.label(egui::RichText::new("Color previews").size(14.0 as f32).color(tokens::TEXT));
                                    egui::Frame::new().fill(tokens::ACCENT).corner_radius(999.0 as f32).inner_margin(egui::Margin { top: 4, right: 4, bottom: 4, left: 4 }).show(ui, |ui| {
                                        ui.set_min_width(40.0 as f32);
                                        ui.set_min_height(24.0 as f32);
                                        ui.spacing_mut().item_spacing = egui::vec2(0.0 as f32, 0.0 as f32);
                                        ui.horizontal(|ui| {
                                            egui::Frame::new().fill(tokens::ON_ACCENT).corner_radius(999.0 as f32).show(ui, |ui| {
                                                ui.set_min_width(16.0 as f32);
                                                ui.set_min_height(16.0 as f32);
                                                ui.spacing_mut().item_spacing = egui::vec2(0.0 as f32, 0.0 as f32);
                                                ui.vertical(|ui| {
                                                });
                                            });
                                        });
                                    });
                                });
                            });
                            egui::Frame::new().corner_radius(8.0 as f32).inner_margin(egui::Margin { top: 8, right: 8, bottom: 8, left: 8 }).show(ui, |ui| {
                                ui.set_min_height(36.0 as f32);
                                ui.spacing_mut().item_spacing = egui::vec2(8.0 as f32, 8.0 as f32);
                                ui.horizontal(|ui| {
                                    egui::Frame::new().show(ui, |ui| {
                                        ui.set_min_width(16.0 as f32);
                                        ui.set_min_height(16.0 as f32);
                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(0.0 as f32, 10.67 as f32), egui::Sense::hover());
                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(10.67 as f32, 2.0 as f32), egui::Sense::hover());
                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                        let (rect, _) = ui.allocate_exact_size(egui::vec2(4.0 as f32, 0.0 as f32), egui::Sense::hover());
                                        ui.painter().rect_filled(rect, 0.0 as f32, egui::Color32::TRANSPARENT);
                                    });
                                    ui.label(egui::RichText::new("Named colors (red, gray)").size(14.0 as f32).color(tokens::TEXT));
                                    egui::Frame::new().fill(tokens::BORDER).corner_radius(999.0 as f32).inner_margin(egui::Margin { top: 4, right: 4, bottom: 4, left: 4 }).show(ui, |ui| {
                                        ui.set_min_width(40.0 as f32);
                                        ui.set_min_height(24.0 as f32);
                                        ui.spacing_mut().item_spacing = egui::vec2(0.0 as f32, 0.0 as f32);
                                        ui.horizontal(|ui| {
                                            egui::Frame::new().fill(tokens::ON_ACCENT).corner_radius(999.0 as f32).show(ui, |ui| {
                                                ui.set_min_width(16.0 as f32);
                                                ui.set_min_height(16.0 as f32);
                                                ui.spacing_mut().item_spacing = egui::vec2(0.0 as f32, 0.0 as f32);
                                                ui.vertical(|ui| {
                                                });
                                            });
                                        });
                                    });
                                });
                            });
                        });
                    });
                    ui.label(egui::RichText::new("RULES").size(12.0 as f32).color(tokens::TEXT_MUTED).strong());
                    ui.label(egui::RichText::new("Swatch is 12 pt, rounded 3, one border. Hex, rgb, rgba, hsl and hsla always preview. Raw names such as red or gray preview only when enabled. External links show an up-right arrow; wikilinks never do. Inline code chip: radius 6, surface-2 background.").size(12.0 as f32).color(tokens::TEXT_MUTED));
                });
            });
        });
    });
}

126 KiB Raw Permalink Blame History

AI UI Implementation Spec: Editor / Code blocks and previews (egui)

1. Mandatory Enforcement Rules

2. Design Tokens & Variables

3. Structured Layout Hierarchy

4. Reference Implementation (egui)

126 KiB

Raw Permalink Blame History