2026-06-08 12:31:04 +00:00
27 changed files with 3959 additions and 548 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -8,13 +8,24 @@ and the project aims to follow [Semantic Versioning](https://semver.org/).
 ## [Unreleased]
 ### Added
- **Source-code slides** — a dark "code sheet" with per-language syntax
+- **Source-code slides** — a "code sheet" with per-language syntax highlighting,
-  highlighting, stored as a fenced code block.
+  stored as a fenced code block. Background, text colour and monospace font are
- **Charts** — bar, line, and pie chart slides. Data is entered in an in-app grid
+  part of the style profile, with a syntax-colouring toggle; turning it off renders
-  or imported from CSV; the spec is stored as JSON in a ```chart block. Data can
+  the block in a single colour (e.g. green on black for a CRT-terminal look). The
-  stay inline or be linked to a CSV in a separate `data/` directory. Rendered
+  code is sized to fill the panel — larger when there's room, smaller for long
-  natively in-app (preview, presenter, PDF, PPTX) and as self-contained SVG in
+  fragments.
-  the HTML export.
+- **Charts** — bar, line, pie, and **spider/radar** chart slides. Data is entered
  in an in-app grid or imported from CSV; the spec is stored as JSON in a ```chart
  block. Data can stay inline or be linked to a CSV in a separate `data/`
  directory. Rendered natively in-app (preview, presenter, PDF, PPTX) and as
  self-contained SVG in the HTML export.
  - Optional **min/max**: horizontal reference lines on bar/line charts, or a
    fixed scale on spider/radar charts shown as a small legend beside the figure.
  - **Legend hover** highlights the matching series (or pie slice). Line-chart
    tooltips attach to the dot under the cursor (showing every overlapping dot),
    and spider/radar points show a tooltip on hover too.
 - **Custom theme colours** — every style-profile colour can be entered as a custom
  hex value in addition to the presets.
 - **Per-slide TLP classification** — each slide can carry its own Traffic Light
  Protocol level; slides classified stricter than the level the deck is shown at
  are withheld when presenting and exporting.
--- a/README.md
+++ b/README.md
@ -9,8 +9,8 @@ Built with Flutter for macOS, Windows, and Linux.
 ## Features
 - **Structured slide editors** — dedicated editors per slide type: title, bullets, two-column bullets, bullets + image, single/two images, quote, table, section divider, image-only, video, audio, source code, charts, and free-form Markdown.
- **Source-code slides** — a dark "code sheet" with syntax highlighting per language, stored as a fenced code block.
+- **Source-code slides** — a "code sheet" with per-language syntax highlighting, stored as a fenced code block. Background, text colour and monospace font come from the style profile, with an optional syntax-colouring toggle (turn it off for a single-colour, CRT-terminal look). The code auto-sizes to fill the panel.
- **Charts** — bar, line, and pie charts rendered natively (preview, presenter, PDF, PPTX) and as self-contained SVG in the HTML export. Data is entered in an in-app grid or imported from CSV; the spec is stored as JSON in the Markdown, with optional linking to a CSV kept in a tidy `data/` directory.
+- **Charts** — bar, line, pie, and spider/radar charts rendered natively (preview, presenter, PDF, PPTX) and as self-contained SVG in the HTML export. Data is entered in an in-app grid or imported from CSV; the spec is stored as JSON in the Markdown, with optional linking to a CSV kept in a tidy `data/` directory. Optional min/max draw reference lines (bar/line) or fix the scale (radar); legend hover highlights a series, and line tooltips pick the dot under the cursor.
 - **Live preview** — see each slide rendered as you edit, with inline Markdown, footers, and TLP (Traffic Light Protocol) marking. Free-Markdown slides render fenced code with syntax highlighting and `$…$` / `$$…$$` LaTeX math.
 - **Traffic Light Protocol** — a deck-wide classification plus an optional **per-slide TLP level**; slides classified stricter than the level the deck is shown at are automatically withheld, both when presenting and exporting.
 - **Fullscreen presenter** — keyboard-driven navigation, presenter view, blank screen, auto-advance, and a slide-grid overview.
@ -20,7 +20,7 @@ Built with Flutter for macOS, Windows, and Linux.
 - **Import / export** — round-trips Marp Markdown, imports existing slides, and exports to PDF, PPTX (with speaker notes), and a self-contained offline HTML deck (code highlighting, math, charts, and mermaid diagrams render in the browser). Decks are saved as a self-contained package with copied assets.
 - **Productivity** — find & replace, slide finder, undo/redo, skip-slide state, multi-select with bulk copy-to-another-deck / delete / skip, and tabbed multi-deck editing. `Ctrl/Cmd+O` opens, `Ctrl/Cmd+S` saves.
 - **Crash recovery** — automatic snapshots so work survives an unexpected exit.
- **Theming** — customizable deck style profiles and app appearance (including a dark interface), a bundled Marp CSS theme (`assets/themes/ocideck.css`), and a bundled EB Garamond font (no network fetch).
+- **Theming** — customizable deck style profiles (deck and source-code colours via presets or custom hex, fonts, logo, footer) and app appearance (including a dark interface), a bundled Marp CSS theme (`assets/themes/ocideck.css`), and a bundled EB Garamond font (no network fetch).
 - **Localized** — Dutch, English, Italian, German, French, Spanish, Frisian, and Papiamento.
 ## Requirements
--- a/docs/FILE_FORMAT.md
+++ b/docs/FILE_FORMAT.md
@ -135,6 +135,10 @@ JSON heeft deze velden (met standaardwaarden):
 | `titleBackgroundColor` | `#1C2B47` | Achtergrond titelslide. |
 | `titleTextColor` | `#FFFFFF` | Tekst op titel-/sectieslide. |
 | `sectionBackgroundColor` | `#2E7D64` | Achtergrond sectieslide. |
 | `codeBackgroundColor` | `#282C34` | Achtergrond van broncode-slides. |
 | `codeTextColor` | `#ABB2BF` | Tekstkleur van broncode-slides. |
 | `codeHighlightSyntax` | `true` | Syntaxkleuring aan/uit. Uit = alles in één kleur (bijv. groen op zwart voor een CRT-look). |
 | `codeFontFamily` | `monospace` | Lettertype van broncode-slides (bijv. `Courier New`). |
 | `logoPath` | `null` | Pad naar logo (relatief in `logos/`). |
 | `logoPosition` | `bottom-right` | `top-left`/`top-right`/`bottom-left`/`bottom-right`. |
 | `logoSize` | `96` | Logogrootte in px. |
@ -314,15 +318,31 @@ openen wordt die weer ingelezen.
 ````markdown
 ```chart
 {
-  "type": "bar",            // bar | line | pie
+  "type": "bar",            // bar | line | pie | radar
  "title": "Omzet",
  "source": "data/omzet.csv",  // optioneel; anders inline x/series
  "x": ["Q1", "Q2"],
-  "series": [ { "name": "2025", "data": [10, 14] } ]
+  "rowColors": ["#003399", "#FFCC00"],  // optioneel; kleur per label (cirkel/radar)
  "minBound": 0,            // optioneel; niet bij pie
  "maxBound": 20,           // optioneel; niet bij pie
  "series": [ { "name": "2025", "data": [10, 14], "color": "#2563EB" } ]
 }
 ```
 ````
 Velden:
 - `type` — `bar`, `line`, `pie` of `radar` (spider). Standaard `bar`.
 - `x` — labels; bij `pie`/`radar` zijn dit de segmenten/assen (radar heeft er
  minstens drie nodig).
 - `series` — genoemde reeksen met `data` (uitgelijnd op `x`) en optioneel een
  `color` (hex). `pie` toont maximaal de eerste twee reeksen.
 - `rowColors` — optionele kleur per label (gebruikt door `pie`/`radar`).
 - `minBound` / `maxBound` — optioneel en alleen voor niet-`pie`. Bij `bar`/`line`
  zijn het horizontale **referentielijnen**; bij `radar` bepalen ze de **schaal**
  (binnenste/buitenste ring) met een gelijkmatige verdeling. Worden weggelaten
  bij `pie`.
 ### Afbeeldingsgrootte (`imageSize`)
 Eén integer-veld met typeafhankelijke betekenis: bij `image`/`title`/`quote` het
 achtergrond-percentage (`![bg N%]`), bij `split` de paneelbreedte (geklemd
--- a/docs/USER_GUIDE.md
+++ b/docs/USER_GUIDE.md
@ -20,8 +20,9 @@ Marp tools.
 Add a slide and pick a type: **title**, **section** divider, **bullets**, **two
 bullet columns**, **bullets + image**, **two images**, **large image**, **video**,
-**audio**, **quote**, **table**, **source code**, **chart**, and **free Markdown**.
+**audio**, **quote**, **table**, **source code**, **chart** (bar, line, pie, or
-Each type has a dedicated editor on the left and a live preview on the right.
+spider/radar), and **free Markdown**. Each type has a dedicated editor on the left
 and a live preview on the right.
 Text fields support inline Markdown (`**bold**`, `*italic*`, `` `code` ``,
 `[links](…)`). Free-Markdown slides also render fenced code with syntax
@ -30,19 +31,32 @@ highlighting and `$…$` / `$$…$$` LaTeX math.
 ### Source-code slides
 Choose a programming language for syntax highlighting (or "plain text") and paste
-your code. It renders as a dark "code sheet". Stored as a fenced code block in the
+your code. It renders as a "code sheet" whose background, text colour and
-Markdown.
+**monospace font** come from the active **style profile** (e.g. Courier). Turn
 **syntax colouring** off to show the whole block in a single colour — e.g. bright
 green on black for a classic CRT-terminal look. The text is sized to fill the
 panel — larger when there's room, smaller for long fragments. Stored as a fenced
 code block in the Markdown.
 ### Charts
-Pick a type (**bar**, **line**, **pie**) and a title, then enter data in the grid:
+Pick a type (**bar**, **line**, **pie**, or **spider/radar**) and a title, then
-the first column is the labels, each further column is a named series. Use **Row**
+enter data in the grid: the first column is the labels, each further column is a
-and **Series** to add data; the small ✕ removes a row/column.
+named series. Use **Row** and **Series** to add data; the small ✕ removes a
 row/column. Each series and (for pie/radar) each label can be given its own colour.
 - **CSV import** — click **CSV importeren**. You can either keep the data **in the
  slide** (inline) or store it **as a CSV file**. A linked CSV lives in the deck's
  `data/` directory and stays the source of truth (edit it in a spreadsheet); the
  grid then shows it read-only until you **Ontkoppelen** (unlink).
 - **Min/max** (optional, bar/line/radar) — on bar and line charts these draw
  horizontal **reference lines**; on a spider/radar chart they fix the **scale**
  (centre to outer ring), shown as evenly spaced values in a small legend beside
  the chart. Leave them empty to scale automatically.
 - **Reading values** — hovering a legend entry highlights its series (or pie
  slice). On a line chart the tooltip belongs to the dot under the cursor and
  shows every overlapping dot at once; on a spider/radar chart hovering a point
  shows its value in a tooltip too.
 - Charts render in the preview, presenter, PDF, and PPTX, and as inline SVG in the
  HTML export.
@ -100,8 +114,11 @@ Export to:
 ## Theming and language
- **Style profiles** control deck colours, fonts, logo, and footer. The bundled
+- **Style profiles** control deck colours (including the source-code background,
-  Marp theme is `assets/themes/ocideck.css`.
+  text, font and an optional syntax-colouring toggle), fonts, logo, and footer.
  Every colour can be picked from the presets or entered as a custom hex value. The
  Colours and Logo tabs show which profile you're editing. The bundled Marp theme
  is `assets/themes/ocideck.css`.
 - **App appearance** (including a dark interface) is configurable in settings.
 - The interface is available in Dutch, English, Italian, German, French, Spanish,
  Frisian, and Papiamento.
--- a/ios/Runner.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved
+++ b/ios/Runner.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved
@ -1,59 +0,0 @@
 {
  "pins" : [
    {
      "identity" : "dkcamera",
      "kind" : "remoteSourceControl",
      "location" : "https://github.com/zhangao0086/DKCamera",
      "state" : {
        "branch" : "master",
        "revision" : "5c691d11014b910aff69f960475d70e65d9dcc96"
      }
    },
    {
      "identity" : "dkimagepickercontroller",
      "kind" : "remoteSourceControl",
      "location" : "https://github.com/zhangao0086/DKImagePickerController",
      "state" : {
        "branch" : "4.3.9",
        "revision" : "0bdfeacefa308545adde07bef86e349186335915"
      }
    },
    {
      "identity" : "dkphotogallery",
      "kind" : "remoteSourceControl",
      "location" : "https://github.com/zhangao0086/DKPhotoGallery",
      "state" : {
        "branch" : "master",
        "revision" : "311c1bc7a94f1538f82773a79c84374b12a2ef3d"
      }
    },
    {
      "identity" : "sdwebimage",
      "kind" : "remoteSourceControl",
      "location" : "https://github.com/SDWebImage/SDWebImage",
      "state" : {
        "revision" : "2de3a496eaf6df9a1312862adcfd54acd73c39c0",
        "version" : "5.21.7"
      }
    },
    {
      "identity" : "swiftygif",
      "kind" : "remoteSourceControl",
      "location" : "https://github.com/kirualex/SwiftyGif.git",
      "state" : {
        "revision" : "4430cbc148baa3907651d40562d96325426f409a",
        "version" : "5.4.5"
      }
    },
    {
      "identity" : "tocropviewcontroller",
      "kind" : "remoteSourceControl",
      "location" : "https://github.com/TimOliver/TOCropViewController",
      "state" : {
        "revision" : "d4a6d8100f4b886fdbc8ae399bf144ff3e9afb7e",
        "version" : "2.8.0"
      }
    }
  ],
  "version" : 2
 }
--- a/ios/Runner.xcworkspace/xcshareddata/swiftpm/Package.resolved
+++ b/ios/Runner.xcworkspace/xcshareddata/swiftpm/Package.resolved
@ -1,59 +0,0 @@
 {
  "pins" : [
    {
      "identity" : "dkcamera",
      "kind" : "remoteSourceControl",
      "location" : "https://github.com/zhangao0086/DKCamera",
      "state" : {
        "branch" : "master",
        "revision" : "5c691d11014b910aff69f960475d70e65d9dcc96"
      }
    },
    {
      "identity" : "dkimagepickercontroller",
      "kind" : "remoteSourceControl",
      "location" : "https://github.com/zhangao0086/DKImagePickerController",
      "state" : {
        "branch" : "4.3.9",
        "revision" : "0bdfeacefa308545adde07bef86e349186335915"
      }
    },
    {
      "identity" : "dkphotogallery",
      "kind" : "remoteSourceControl",
      "location" : "https://github.com/zhangao0086/DKPhotoGallery",
      "state" : {
        "branch" : "master",
        "revision" : "311c1bc7a94f1538f82773a79c84374b12a2ef3d"
      }
    },
    {
      "identity" : "sdwebimage",
      "kind" : "remoteSourceControl",
      "location" : "https://github.com/SDWebImage/SDWebImage",
      "state" : {
        "revision" : "2de3a496eaf6df9a1312862adcfd54acd73c39c0",
        "version" : "5.21.7"
      }
    },
    {
      "identity" : "swiftygif",
      "kind" : "remoteSourceControl",
      "location" : "https://github.com/kirualex/SwiftyGif.git",
      "state" : {
        "revision" : "4430cbc148baa3907651d40562d96325426f409a",
        "version" : "5.4.5"
      }
    },
    {
      "identity" : "tocropviewcontroller",
      "kind" : "remoteSourceControl",
      "location" : "https://github.com/TimOliver/TOCropViewController",
      "state" : {
        "revision" : "d4a6d8100f4b886fdbc8ae399bf144ff3e9afb7e",
        "version" : "2.8.0"
      }
    }
  ],
  "version" : 2
 }
--- a/lib/l10n/app_localizations.dart
+++ b/lib/l10n/app_localizations.dart
@ -2326,6 +2326,7 @@ const _dutchSourceStrings = {
 const _dutchSourceStringAdditions = {
  'en': {
    'Annuleren': 'Cancel',
    'Afbeelding': 'Image',
    'Broncode': 'Source code',
    'Bullet': 'Bullet',
@ -2341,6 +2342,7 @@ const _dutchSourceStringAdditions = {
    'Staaf': 'Bar',
    'Lijn': 'Line',
    'Cirkel': 'Pie',
    'Spider': 'Spider',
    'CSV importeren': 'Import CSV',
    'Data (CSV: eerste rij = reeksnamen, eerste kolom = labels)':
        'Data (CSV: first row = series names, first column = labels)',
@ -2354,6 +2356,35 @@ const _dutchSourceStringAdditions = {
    'Label': 'Label',
    'Rij': 'Row',
    'Reeks': 'Series',
    'Kleur van reeks': 'Series color',
    'Kleur van rij': 'Row color',
    'Hexkleur': 'Hex color',
    'Sorteren': 'Sort',
    'Oplopend sorteren': 'Sort ascending',
    'Aflopend sorteren': 'Sort descending',
    'Toepassen': 'Apply',
    'Bij een cirkel worden maximaal de eerste twee reeksen getoond; de labels vormen de segmenten.':
        'Pie charts show at most the first two series; the labels form the slices.',
    'Een spider-diagram heeft minstens drie labels (assen) nodig; elke reeks vormt een vlak.':
        'A spider chart needs at least three labels (axes); each series forms a shape.',
    'Een spider-diagram heeft minstens drie labels nodig':
        'A spider chart needs at least three labels',
    'Minimumlijn (optioneel)': 'Minimum line (optional)',
    'Maximumlijn (optioneel)': 'Maximum line (optional)',
    'Schaalminimum (optioneel)': 'Scale minimum (optional)',
    'Schaalmaximum (optioneel)': 'Scale maximum (optional)',
    'geen': 'none',
    'Broncode achtergrond': 'Code background',
    'Broncode tekst': 'Code text',
    'Syntaxkleuring': 'Syntax colouring',
    'Uit = alles in één kleur (bijv. groen op zwart voor een CRT-scherm).':
        'Off = everything in one colour (e.g. green on black for a CRT screen).',
    'Eigen kleur (hex)': 'Custom colour (hex)',
    'Bijvoorbeeld #33FF33 voor een CRT-groen scherm.':
        'For example #33FF33 for a CRT-green screen.',
    'Onderdeel van stijlprofiel ': 'Part of style profile ',
    'Broncode lettertype': 'Code font',
    'Systeem (monospace)': 'System (monospace)',
    'Platte tekst': 'Plain text',
    'Titel (optioneel)': 'Title (optional)',
    'HTML opent in elke browser zonder internet en rendert codeblokken, wiskunde en mermaid-diagrammen.':
@ -2371,6 +2402,36 @@ const _dutchSourceStringAdditions = {
    'voorbereiden…': 'preparing…',
  },
  'it': {
    'Annuleren': 'Annulla',
    'Spider': 'Radar',
    'Een spider-diagram heeft minstens drie labels (assen) nodig; elke reeks vormt een vlak.':
        'Un grafico radar richiede almeno tre etichette (assi); ogni serie forma una superficie.',
    'Een spider-diagram heeft minstens drie labels nodig':
        'Un grafico radar richiede almeno tre etichette',
    'Minimumlijn (optioneel)': 'Linea minima (facoltativa)',
    'Maximumlijn (optioneel)': 'Linea massima (facoltativa)',
    'Schaalminimum (optioneel)': 'Scala minima (facoltativa)',
    'Schaalmaximum (optioneel)': 'Scala massima (facoltativa)',
    'geen': 'nessuno',
    'Broncode achtergrond': 'Sfondo del codice',
    'Broncode tekst': 'Testo del codice',
    'Syntaxkleuring': 'Colorazione della sintassi',
    'Uit = alles in één kleur (bijv. groen op zwart voor een CRT-scherm).':
        'Off = tutto in un solo colore (es. verde su nero per uno schermo CRT).',
    'Eigen kleur (hex)': 'Colore personalizzato (hex)',
    'Bijvoorbeeld #33FF33 voor een CRT-groen scherm.':
        'Ad esempio #33FF33 per uno schermo verde CRT.',
    'Onderdeel van stijlprofiel ': 'Parte del profilo di stile ',
    'Broncode lettertype': 'Font del codice',
    'Systeem (monospace)': 'Sistema (monospace)',
    'Kleur van reeks': 'Colore della serie',
    'Kleur van rij': 'Colore della riga',
    'Hexkleur': 'Colore esadecimale',
    'Sorteren': 'Ordina',
    'Oplopend sorteren': 'Ordina in modo crescente',
    'Aflopend sorteren': 'Ordina in modo decrescente',
    'Bij een cirkel worden maximaal de eerste twee reeksen getoond; de labels vormen de segmenten.':
        'I grafici a torta mostrano al massimo le prime due serie; le etichette formano i segmenti.',
    '# Slide\n\nInhoud hier...': '# Slide\n\nContent here...',
    '1 slide geïmporteerd.': '1 slide imported.',
    '1 slide kopiëren naar…': 'Copy 1 slide to…',
@ -2570,6 +2631,36 @@ const _dutchSourceStringAdditions = {
        '↑↓←→ navigate  ·  Enter chooses  ·  Double-click selects',
  },
  'de': {
    'Annuleren': 'Abbrechen',
    'Spider': 'Netz',
    'Een spider-diagram heeft minstens drie labels (assen) nodig; elke reeks vormt een vlak.':
        'Ein Netzdiagramm braucht mindestens drei Beschriftungen (Achsen); jede Reihe bildet eine Fläche.',
    'Een spider-diagram heeft minstens drie labels nodig':
        'Ein Netzdiagramm braucht mindestens drei Beschriftungen',
    'Minimumlijn (optioneel)': 'Minimumlinie (optional)',
    'Maximumlijn (optioneel)': 'Maximumlinie (optional)',
    'Schaalminimum (optioneel)': 'Skalenminimum (optional)',
    'Schaalmaximum (optioneel)': 'Skalenmaximum (optional)',
    'geen': 'keine',
    'Broncode achtergrond': 'Code-Hintergrund',
    'Broncode tekst': 'Code-Text',
    'Syntaxkleuring': 'Syntaxfärbung',
    'Uit = alles in één kleur (bijv. groen op zwart voor een CRT-scherm).':
        'Aus = alles in einer Farbe (z. B. Grün auf Schwarz für einen CRT-Bildschirm).',
    'Eigen kleur (hex)': 'Eigene Farbe (Hex)',
    'Bijvoorbeeld #33FF33 voor een CRT-groen scherm.':
        'Zum Beispiel #33FF33 für einen CRT-grünen Bildschirm.',
    'Onderdeel van stijlprofiel ': 'Teil des Stilprofils ',
    'Broncode lettertype': 'Code-Schriftart',
    'Systeem (monospace)': 'System (monospace)',
    'Kleur van reeks': 'Reihenfarbe',
    'Kleur van rij': 'Zeilenfarbe',
    'Hexkleur': 'Hex-Farbe',
    'Sorteren': 'Sortieren',
    'Oplopend sorteren': 'Aufsteigend sortieren',
    'Aflopend sorteren': 'Absteigend sortieren',
    'Bij een cirkel worden maximaal de eerste twee reeksen getoond; de labels vormen de segmenten.':
        'Kreisdiagramme zeigen höchstens die ersten zwei Reihen; die Beschriftungen bilden die Segmente.',
    '# Slide\n\nInhoud hier...': '# Slide\n\nContent here...',
    '1 slide geïmporteerd.': '1 slide imported.',
    '1 slide kopiëren naar…': 'Copy 1 slide to…',
@ -2770,6 +2861,36 @@ const _dutchSourceStringAdditions = {
        '↑↓←→ navigate  ·  Enter chooses  ·  Double-click selects',
  },
  'fr': {
    'Annuleren': 'Annuler',
    'Spider': 'Radar',
    'Een spider-diagram heeft minstens drie labels (assen) nodig; elke reeks vormt een vlak.':
        'Un graphique radar nécessite au moins trois étiquettes (axes); chaque série forme une surface.',
    'Een spider-diagram heeft minstens drie labels nodig':
        'Un graphique radar nécessite au moins trois étiquettes',
    'Minimumlijn (optioneel)': 'Ligne minimale (facultatif)',
    'Maximumlijn (optioneel)': 'Ligne maximale (facultatif)',
    'Schaalminimum (optioneel)': 'Échelle minimale (facultatif)',
    'Schaalmaximum (optioneel)': 'Échelle maximale (facultatif)',
    'geen': 'aucune',
    'Broncode achtergrond': 'Fond du code',
    'Broncode tekst': 'Texte du code',
    'Syntaxkleuring': 'Coloration syntaxique',
    'Uit = alles in één kleur (bijv. groen op zwart voor een CRT-scherm).':
        'Désactivé = tout en une seule couleur (p. ex. vert sur noir pour un écran CRT).',
    'Eigen kleur (hex)': 'Couleur personnalisée (hex)',
    'Bijvoorbeeld #33FF33 voor een CRT-groen scherm.':
        'Par exemple #33FF33 pour un écran vert CRT.',
    'Onderdeel van stijlprofiel ': 'Fait partie du profil de style ',
    'Broncode lettertype': 'Police du code',
    'Systeem (monospace)': 'Système (monospace)',
    'Kleur van reeks': 'Couleur de la série',
    'Kleur van rij': 'Couleur de la ligne',
    'Hexkleur': 'Couleur hexadécimale',
    'Sorteren': 'Trier',
    'Oplopend sorteren': 'Trier par ordre croissant',
    'Aflopend sorteren': 'Trier par ordre décroissant',
    'Bij een cirkel worden maximaal de eerste twee reeksen getoond; de labels vormen de segmenten.':
        'Les graphiques en secteurs affichent au maximum les deux premières séries ; les libellés forment les segments.',
    '# Slide\n\nInhoud hier...': '# Slide\n\nContent here...',
    '1 slide geïmporteerd.': '1 slide imported.',
    '1 slide kopiëren naar…': 'Copy 1 slide to…',
@ -2970,6 +3091,36 @@ const _dutchSourceStringAdditions = {
        '↑↓←→ navigate  ·  Enter chooses  ·  Double-click selects',
  },
  'es': {
    'Annuleren': 'Cancelar',
    'Spider': 'Radar',
    'Een spider-diagram heeft minstens drie labels (assen) nodig; elke reeks vormt een vlak.':
        'Un gráfico radar necesita al menos tres etiquetas (ejes); cada serie forma una superficie.',
    'Een spider-diagram heeft minstens drie labels nodig':
        'Un gráfico radar necesita al menos tres etiquetas',
    'Minimumlijn (optioneel)': 'Línea mínima (opcional)',
    'Maximumlijn (optioneel)': 'Línea máxima (opcional)',
    'Schaalminimum (optioneel)': 'Escala mínima (opcional)',
    'Schaalmaximum (optioneel)': 'Escala máxima (opcional)',
    'geen': 'ninguno',
    'Broncode achtergrond': 'Fondo del código',
    'Broncode tekst': 'Texto del código',
    'Syntaxkleuring': 'Coloreado de sintaxis',
    'Uit = alles in één kleur (bijv. groen op zwart voor een CRT-scherm).':
        'Desactivado = todo en un solo color (p. ej. verde sobre negro para una pantalla CRT).',
    'Eigen kleur (hex)': 'Color personalizado (hex)',
    'Bijvoorbeeld #33FF33 voor een CRT-groen scherm.':
        'Por ejemplo #33FF33 para una pantalla verde CRT.',
    'Onderdeel van stijlprofiel ': 'Parte del perfil de estilo ',
    'Broncode lettertype': 'Fuente del código',
    'Systeem (monospace)': 'Sistema (monospace)',
    'Kleur van reeks': 'Color de la serie',
    'Kleur van rij': 'Color de la fila',
    'Hexkleur': 'Color hexadecimal',
    'Sorteren': 'Ordenar',
    'Oplopend sorteren': 'Ordenar ascendente',
    'Aflopend sorteren': 'Ordenar descendente',
    'Bij een cirkel worden maximaal de eerste twee reeksen getoond; de labels vormen de segmenten.':
        'Los gráficos circulares muestran como máximo las dos primeras series; las etiquetas forman los segmentos.',
    '# Slide\n\nInhoud hier...': '# Slide\n\nContent here...',
    '1 slide geïmporteerd.': '1 slide imported.',
    '1 slide kopiëren naar…': 'Copy 1 slide to…',
@ -3170,6 +3321,36 @@ const _dutchSourceStringAdditions = {
        '↑↓←→ navigate  ·  Enter chooses  ·  Double-click selects',
  },
  'fy': {
    'Annuleren': 'Annulearje',
    'Spider': 'Spider',
    'Een spider-diagram heeft minstens drie labels (assen) nodig; elke reeks vormt een vlak.':
        'In spiderdiagram hat op syn minst trije labels (assen) nedich; eltse rige foarmet in flak.',
    'Een spider-diagram heeft minstens drie labels nodig':
        'In spiderdiagram hat op syn minst trije labels nedich',
    'Minimumlijn (optioneel)': 'Minimumline (opsjoneel)',
    'Maximumlijn (optioneel)': 'Maksimumline (opsjoneel)',
    'Schaalminimum (optioneel)': 'Skaalminimum (opsjoneel)',
    'Schaalmaximum (optioneel)': 'Skaalmaksimum (opsjoneel)',
    'geen': 'gjin',
    'Broncode achtergrond': 'Boarnekoade eftergrûn',
    'Broncode tekst': 'Boarnekoade tekst',
    'Syntaxkleuring': 'Syntakskleuring',
    'Uit = alles in één kleur (bijv. groen op zwart voor een CRT-scherm).':
        'Ut = alles yn ien kleur (bgl. grien op swart foar in CRT-skerm).',
    'Eigen kleur (hex)': 'Eigen kleur (hex)',
    'Bijvoorbeeld #33FF33 voor een CRT-groen scherm.':
        'Bygelyks #33FF33 foar in CRT-grien skerm.',
    'Onderdeel van stijlprofiel ': 'Underdiel fan stylprofyl ',
    'Broncode lettertype': 'Boarnekoade lettertype',
    'Systeem (monospace)': 'Systeem (monospace)',
    'Kleur van reeks': 'Rigekleur',
    'Kleur van rij': 'Rijekleur',
    'Hexkleur': 'Hekskleur',
    'Sorteren': 'Sortearje',
    'Oplopend sorteren': 'Oprinnend sortearje',
    'Aflopend sorteren': 'Ôfrinnend sortearje',
    'Bij een cirkel worden maximaal de eerste twee reeksen getoond; de labels vormen de segmenten.':
        'Sirkeldiagrammen litte maksimaal de earste twa rigen sjen; de labels foarmje de segminten.',
    '# Slide\n\nInhoud hier...': '# Slide\n\nContent here...',
    '1 slide geïmporteerd.': '1 slide imported.',
    '1 slide kopiëren naar…': 'Copy 1 slide to…',
@ -3367,6 +3548,36 @@ const _dutchSourceStringAdditions = {
        '↑↓←→ navigate  ·  Enter chooses  ·  Double-click selects',
  },
  'pap': {
    'Annuleren': 'Kanselá',
    'Spider': 'Radar',
    'Een spider-diagram heeft minstens drie labels (assen) nodig; elke reeks vormt een vlak.':
        'Un grafiko radar mester di por lo ménos tres etiketa (ehe); kada serie ta forma un superfisie.',
    'Een spider-diagram heeft minstens drie labels nodig':
        'Un grafiko radar mester di por lo ménos tres etiketa',
    'Minimumlijn (optioneel)': 'Liña mínimo (opshonal)',
    'Maximumlijn (optioneel)': 'Liña máksimo (opshonal)',
    'Schaalminimum (optioneel)': 'Eskala mínimo (opshonal)',
    'Schaalmaximum (optioneel)': 'Eskala máksimo (opshonal)',
    'geen': 'niun',
    'Broncode achtergrond': 'Fondo di kódigo',
    'Broncode tekst': 'Teksto di kódigo',
    'Syntaxkleuring': 'Koloreashon di sintaksis',
    'Uit = alles in één kleur (bijv. groen op zwart voor een CRT-scherm).':
        'Apagá = tur kos den un solo koló (p.e. berde riba pretu pa un pantaya CRT).',
    'Eigen kleur (hex)': 'Koló propio (hex)',
    'Bijvoorbeeld #33FF33 voor een CRT-groen scherm.':
        'Por ehèmpel #33FF33 pa un pantaya berde CRT.',
    'Onderdeel van stijlprofiel ': 'Parti di e perfil di estilo ',
    'Broncode lettertype': 'Tipo di lèter di kódigo',
    'Systeem (monospace)': 'Sistema (monospace)',
    'Kleur van reeks': 'Koló di serie',
    'Kleur van rij': 'Koló di liña',
    'Hexkleur': 'Koló hexadecimal',
    'Sorteren': 'Ordená',
    'Oplopend sorteren': 'Ordená subiendu',
    'Aflopend sorteren': 'Ordená bahando',
    'Bij een cirkel worden maximaal de eerste twee reeksen getoond; de labels vormen de segmenten.':
        'Gráfikonan circular ta mustra máximo e promé dos serienan; e labelnan ta forma e segmentonan.',
    '# Slide\n\nInhoud hier...': '# Slide\n\nContent here...',
    '1 slide geïmporteerd.': '1 slide imported.',
    '1 slide kopiëren naar…': 'Copy 1 slide to…',
--- a/lib/models/chart.dart
+++ b/lib/models/chart.dart
@ -4,8 +4,21 @@ import 'dart:convert';
 /// data files stay tidily in one place — separate from images/media.
 const String chartDataDirName = 'data';
 const List<String> chartColorPalette = [
  '#003399',
  '#FFCC00',
  '#2563EB',
  '#F59E0B',
  '#10B981',
  '#EF4444',
  '#8B5CF6',
  '#06B6D4',
  '#EC4899',
  '#84CC16',
 ];
 /// Supported chart kinds for a chart slide.
-enum ChartType { bar, line, pie }
+enum ChartType { bar, line, pie, radar }
 ChartType _chartTypeFromName(String? name) => ChartType.values.firstWhere(
  (t) => t.name == name,
@ -16,19 +29,44 @@ ChartType _chartTypeFromName(String? name) => ChartType.values.firstWhere(
 class ChartSeries {
  final String name;
  final List<double> data;
-  const ChartSeries({required this.name, required this.data});
+  final String? color;
  const ChartSeries({required this.name, required this.data, this.color});
-  Map<String, dynamic> toJson() => {'name': name, 'data': data};
+  Map<String, dynamic> toJson({bool includeData = true}) => {
    'name': name,
    if (includeData) 'data': data,
    if (color != null) 'color': color,
  };
-  factory ChartSeries.fromJson(Map<String, dynamic> json) => ChartSeries(
+  factory ChartSeries.fromJson(Map<String, dynamic> json) {
-    name: (json['name'] ?? '').toString(),
+    final color = normalizeChartColor(json['color']?.toString());
-    data: [
+    return ChartSeries(
-      for (final v in (json['data'] as List? ?? const []))
+      name: (json['name'] ?? '').toString(),
-        (v as num?)?.toDouble() ?? 0,
+      color: color,
-    ],
+      data: [
-  );
+        for (final v in (json['data'] as List? ?? const []))
          (v as num?)?.toDouble() ?? 0,
      ],
    );
  }
 }
 String? normalizeChartColor(String? value) {
  if (value == null) return null;
  final raw = value.trim().toUpperCase();
  final normalized = raw.startsWith('#') ? raw : '#$raw';
  return RegExp(r'^#[0-9A-F]{6}$').hasMatch(normalized) ? normalized : null;
 }
 String chartSeriesColor(ChartSeries series, int index) =>
    normalizeChartColor(series.color) ??
    chartColorPalette[index % chartColorPalette.length];
 String chartRowColor(ChartSpec spec, int index) => index < spec.rowColors.length
    ? normalizeChartColor(spec.rowColors[index]) ??
          chartColorPalette[index % chartColorPalette.length]
    : chartColorPalette[index % chartColorPalette.length];
 /// The full chart specification, stored as JSON inside a ```chart fenced block.
 ///
 /// Small charts keep their data inline; data-driven charts instead point at an
@ -40,31 +78,58 @@ class ChartSpec {
  final String title;
  final String? source;
  final List<String> x;
  final List<String?> rowColors;
  final List<ChartSeries> series;
  /// Optional horizontal reference lines drawn across the plot so it is clear
  /// where a data point sits relative to a threshold. Only meaningful for bar
  /// and line charts (ignored for pie); either may be left null.
  final double? minBound;
  final double? maxBound;
  const ChartSpec({
    this.type = ChartType.bar,
    this.title = '',
    this.source,
    this.x = const [],
    this.rowColors = const [],
    this.series = const [],
    this.minBound,
    this.maxBound,
  });
  bool get hasInlineData => x.isNotEmpty && series.isNotEmpty;
  /// Whether the optional [minBound]/[maxBound] apply. On bar/line they are
  /// horizontal threshold lines; on radar they fix the scale (centre/outer
  /// ring). Pie charts have no axis, so they never use bounds.
  bool get supportsBounds => type != ChartType.pie;
  /// True only where bounds render as horizontal threshold *lines*.
  bool get supportsBoundLines =>
      type == ChartType.bar || type == ChartType.line;
  ChartSpec copyWith({
    ChartType? type,
    String? title,
    String? source,
    bool clearSource = false,
    List<String>? x,
    List<String?>? rowColors,
    List<ChartSeries>? series,
    double? minBound,
    bool clearMinBound = false,
    double? maxBound,
    bool clearMaxBound = false,
  }) => ChartSpec(
    type: type ?? this.type,
    title: title ?? this.title,
    source: clearSource ? null : (source ?? this.source),
    x: x ?? this.x,
    rowColors: rowColors ?? this.rowColors,
    series: series ?? this.series,
    minBound: clearMinBound ? null : (minBound ?? this.minBound),
    maxBound: clearMaxBound ? null : (maxBound ?? this.maxBound),
  );
  /// Parse the JSON content of a ```chart block. Tolerant: returns a default
@ -78,7 +143,13 @@ class ChartSpec {
        type: _chartTypeFromName(data['type'] as String?),
        title: (data['title'] ?? '').toString(),
        source: (src == null || src.isEmpty) ? null : src,
        minBound: (data['minBound'] as num?)?.toDouble(),
        maxBound: (data['maxBound'] as num?)?.toDouble(),
        x: [for (final v in (data['x'] as List? ?? const [])) v.toString()],
        rowColors: [
          for (final value in (data['rowColors'] as List? ?? const []))
            normalizeChartColor(value?.toString()),
        ],
        series: [
          for (final s in (data['series'] as List? ?? const []))
            ChartSeries.fromJson(Map<String, dynamic>.from(s as Map)),
@ -96,12 +167,23 @@ class ChartSpec {
    final map = <String, dynamic>{'type': type.name};
    if (title.isNotEmpty) map['title'] = title;
    if (source != null) map['source'] = source;
    if (supportsBounds) {
      if (minBound != null) map['minBound'] = minBound;
      if (maxBound != null) map['maxBound'] = maxBound;
    }
    final dropData = forStorage && source != null;
    if (rowColors.any((color) => color != null)) {
      map['rowColors'] = rowColors;
    }
    if (!dropData) {
      if (x.isNotEmpty) map['x'] = x;
      if (series.isNotEmpty) {
        map['series'] = [for (final s in series) s.toJson()];
      }
    } else if (series.any((series) => series.color != null)) {
      map['series'] = [
        for (final series in series) series.toJson(includeData: false),
      ];
    }
    return const JsonEncoder.withIndent('  ').convert(map);
  }
@ -109,7 +191,28 @@ class ChartSpec {
  /// Return a copy with x/series taken from [csv]; keeps [source].
  ChartSpec withCsv(String csv) {
    final parsed = parseCsv(csv);
-    return copyWith(x: parsed.$1, series: parsed.$2);
+    final colorsByLabel = x.isEmpty
        ? const <String, String?>{}
        : <String, String?>{
            for (var i = 0; i < x.length; i++)
              x[i]: i < rowColors.length ? rowColors[i] : null,
          };
    return copyWith(
      x: parsed.$1,
      rowColors: [
        for (var i = 0; i < parsed.$1.length; i++)
          colorsByLabel[parsed.$1[i]] ??
              (i < rowColors.length ? rowColors[i] : null),
      ],
      series: [
        for (var i = 0; i < parsed.$2.length; i++)
          ChartSeries(
            name: parsed.$2[i].name,
            data: parsed.$2[i].data,
            color: i < series.length ? series[i].color : null,
          ),
      ],
    );
  }
 }
--- a/lib/models/settings.dart
+++ b/lib/models/settings.dart
@ -8,6 +8,21 @@ class ThemeProfile {
  final String titleBackgroundColor;
  final String titleTextColor;
  final String sectionBackgroundColor;
  /// Colours for code (broncode) slides. Defaults mirror the atom-one-dark
  /// editor look. Set e.g. black background + bright green text with
  /// [codeHighlightSyntax] off for a classic CRT terminal feel.
  final String codeBackgroundColor;
  final String codeTextColor;
  /// When false, code is shown monochrome in [codeTextColor] (no per-token
  /// syntax colours) — required for a believable single-colour CRT screen.
  final bool codeHighlightSyntax;
  /// Monospace font family for code slides. `monospace` uses the system default;
  /// e.g. `Courier New` for a typewriter look.
  final String codeFontFamily;
  final String? logoPath;
  final String logoPosition;
  final int logoSize;
@ -40,6 +55,10 @@ class ThemeProfile {
    this.titleBackgroundColor = '#1C2B47',
    this.titleTextColor = '#FFFFFF',
    this.sectionBackgroundColor = '#2E7D64',
    this.codeBackgroundColor = '#282C34',
    this.codeTextColor = '#ABB2BF',
    this.codeHighlightSyntax = true,
    this.codeFontFamily = 'monospace',
    this.logoPath,
    this.logoPosition = 'bottom-right',
    this.logoSize = 96,
@ -70,6 +89,10 @@ class ThemeProfile {
    String? titleBackgroundColor,
    String? titleTextColor,
    String? sectionBackgroundColor,
    String? codeBackgroundColor,
    String? codeTextColor,
    bool? codeHighlightSyntax,
    String? codeFontFamily,
    String? logoPath,
    String? logoPosition,
    int? logoSize,
@ -92,6 +115,10 @@ class ThemeProfile {
      titleTextColor: titleTextColor ?? this.titleTextColor,
      sectionBackgroundColor:
          sectionBackgroundColor ?? this.sectionBackgroundColor,
      codeBackgroundColor: codeBackgroundColor ?? this.codeBackgroundColor,
      codeTextColor: codeTextColor ?? this.codeTextColor,
      codeHighlightSyntax: codeHighlightSyntax ?? this.codeHighlightSyntax,
      codeFontFamily: codeFontFamily ?? this.codeFontFamily,
      logoPath: clearLogo ? null : (logoPath ?? this.logoPath),
      logoPosition: logoPosition ?? this.logoPosition,
      logoSize: logoSize ?? this.logoSize,
@ -116,6 +143,10 @@ class ThemeProfile {
      'titleBackgroundColor': titleBackgroundColor,
      'titleTextColor': titleTextColor,
      'sectionBackgroundColor': sectionBackgroundColor,
      'codeBackgroundColor': codeBackgroundColor,
      'codeTextColor': codeTextColor,
      'codeHighlightSyntax': codeHighlightSyntax,
      'codeFontFamily': codeFontFamily,
      'logoPath': logoPath,
      'logoPosition': logoPosition,
      'logoSize': logoSize,
@ -146,6 +177,11 @@ class ThemeProfile {
      titleTextColor: json['titleTextColor'] as String? ?? '#FFFFFF',
      sectionBackgroundColor:
          json['sectionBackgroundColor'] as String? ?? '#2E7D64',
      codeBackgroundColor:
          json['codeBackgroundColor'] as String? ?? '#282C34',
      codeTextColor: json['codeTextColor'] as String? ?? '#ABB2BF',
      codeHighlightSyntax: json['codeHighlightSyntax'] as bool? ?? true,
      codeFontFamily: json['codeFontFamily'] as String? ?? 'monospace',
      logoPath: json['logoPath'] as String?,
      logoPosition: json['logoPosition'] as String? ?? 'bottom-right',
      logoSize: (json['logoSize'] as num?)?.round() ?? 96,
@ -343,6 +379,17 @@ class AppSettings {
    'Courier New',
  ];
  /// Monospace families offered for code slides. `monospace` is the system
  /// default; the rest are common typewriter/coding faces.
  static const codeFonts = [
    'monospace',
    'Courier New',
    'Menlo',
    'Consolas',
    'Roboto Mono',
    'Cascadia Code',
  ];
  AppSettings copyWith({
    String? languageCode,
    String? homeDirectory,
--- a/lib/services/file_service.dart
+++ b/lib/services/file_service.dart
@ -44,6 +44,7 @@ class FileService {
  final ImageService _img;
  final ThemeProfile Function() _themeProfile;
  final String Function() _languageCode;
  final String? Function() _homeDirectory;
  final CaptionService _captions = CaptionService();
  FileService(
@ -51,9 +52,30 @@ class FileService {
    this._img,
    this._themeProfile, {
    String Function()? languageCode,
-  }) : _languageCode = languageCode ?? (() => 'nl');
+    String? Function()? homeDirectory,
  }) : _languageCode = languageCode ?? (() => 'nl'),
       _homeDirectory = homeDirectory ?? (() => null);
-  ThemeProfile get currentThemeProfile => _themeProfile();
+  ThemeProfile get currentThemeProfile => resolveThemeProfile(_themeProfile());
  ThemeProfile resolveThemeProfile(
    ThemeProfile profile, {
    String? projectPath,
  }) {
    final logoPath = profile.logoPath;
    if (logoPath == null || logoPath.trim().isEmpty || p.isAbsolute(logoPath)) {
      return profile;
    }
    final bases = [?projectPath, ?_homeDirectory()];
    for (final base in bases) {
      final candidate = p.normalize(p.join(base, logoPath));
      if (File(candidate).existsSync()) {
        return profile.copyWith(logoPath: candidate);
      }
    }
    return profile;
  }
  String _d(String text) => AppLocalizations.sourceFor(_languageCode(), text);
--- a/lib/services/marp_html_service.dart
+++ b/lib/services/marp_html_service.dart
@ -48,7 +48,7 @@ class MarpHtmlService {
    for (final slide in marpSlides(deckMarkdown)) {
      sections
        ..write('<section class="slide"><script type="text/markdown">')
-        ..write(_guard(renderChartBlocks(slide)))
+        ..write(_guard(renderChartBlocks(slide, theme: theme)))
        ..write('</script></section>');
    }
@ -110,23 +110,12 @@ class MarpHtmlService {
    multiLine: true,
  );
  static const List<String> _chartPalette = [
    '#2563EB',
    '#F59E0B',
    '#10B981',
    '#EF4444',
    '#8B5CF6',
    '#06B6D4',
    '#EC4899',
    '#84CC16',
  ];
  /// Replace ```chart fenced blocks with a self-contained inline SVG, so the
  /// exported HTML renders charts without any JS chart library.
-  static String renderChartBlocks(String slideMarkdown) {
+  static String renderChartBlocks(String slideMarkdown, {ThemeProfile? theme}) {
    return slideMarkdown.replaceAllMapped(_chartFence, (m) {
      final spec = ChartSpec.parse(m.group(1)!);
-      return '\n<div class="chart">${_chartSvg(spec)}</div>\n';
+      return '\n<div class="chart">${_chartSvg(spec, theme)}</div>\n';
    });
  }
@ -135,52 +124,128 @@ class MarpHtmlService {
      .replaceAll('<', '&lt;')
      .replaceAll('>', '&gt;');
-  static String _color(int i) => _chartPalette[i % _chartPalette.length];
+  static String _color(ChartSpec spec, int i, ThemeProfile? theme) {
    final series = spec.series[i];
    if (series.color == null && i == 0 && theme != null) {
      return theme.accentColor;
    }
    return chartSeriesColor(series, i);
  }
-  static String _chartSvg(ChartSpec spec) {
+  static String _chartSvg(ChartSpec spec, ThemeProfile? theme) {
    if (!spec.hasInlineData) {
      return '<svg viewBox="0 0 800 450" xmlns="http://www.w3.org/2000/svg"></svg>';
    }
    final textColor = theme?.textColor ?? '#111827';
    final titleBackground = theme?.titleBackgroundColor ?? '#F8FAFC';
    final titleColor = theme?.titleTextColor ?? textColor;
    final accent = theme?.accentColor ?? '#2563EB';
    final b = StringBuffer()
      ..write(
        '<svg viewBox="0 0 800 450" xmlns="http://www.w3.org/2000/svg" '
        'font-family="inherit" width="100%">',
      );
    if (spec.title.isNotEmpty) {
-      b.write(
+      final title = spec.title.length > 52
-        '<text x="400" y="34" text-anchor="middle" font-size="26" '
+          ? '${spec.title.substring(0, 51)}…'
-        'font-weight="bold" fill="#111">${_esc(spec.title)}</text>',
+          : spec.title;
-      );
+      b
-    }
+        ..write(
-    // Legend (multi-series, non-pie).
+          '<rect x="38" y="12" width="724" height="44" rx="9" '
-    final top = spec.title.isNotEmpty ? 56.0 : 24.0;
+          'fill="$titleBackground"/>',
-    var plotTop = top;
+        )
-    if (spec.type != ChartType.pie && spec.series.length > 1) {
+        ..write(
-      var lx = 60.0;
+          '<rect x="38" y="12" width="7" height="44" rx="3" fill="$accent"/>',
-      for (var i = 0; i < spec.series.length; i++) {
+        )
-        b
+        ..write(
-          ..write(
+          '<text x="62" y="41" font-size="23" font-weight="bold" '
-            '<rect x="$lx" y="${top + 2}" width="14" height="14" rx="3" fill="${_color(i)}"/>',
+          'fill="$titleColor">${_esc(title)}</text>',
-          )
+        );
          ..write(
            '<text x="${lx + 20}" y="${top + 14}" font-size="16" fill="#333">${_esc(spec.series[i].name)}</text>',
          );
        lx += 30 + spec.series[i].name.length * 9 + 24;
      }
      plotTop = top + 28;
    }
    final plotTop = spec.title.isNotEmpty ? 68.0 : 20.0;
    switch (spec.type) {
      case ChartType.bar:
-        _barSvg(b, spec, plotTop);
+        _barSvg(b, spec, plotTop, theme);
      case ChartType.line:
-        _lineSvg(b, spec, plotTop);
+        _lineSvg(b, spec, plotTop, theme);
      case ChartType.pie:
-        _pieSvg(b, spec, plotTop);
+        final legendRows = (spec.x.length / 6).ceil().clamp(1, 3);
        _pieSvg(b, spec, plotTop, theme, bottom: 398 - (legendRows - 1) * 28);
      case ChartType.radar:
        _radarSvg(b, spec, plotTop, theme, textColor);
    }
    if (spec.type == ChartType.pie) {
      _pieLegendSvg(b, spec, textColor);
    } else {
      _legendSvg(b, spec, theme, textColor);
    }
    b.write('</svg>');
    return b.toString();
  }
  static void _legendSvg(
    StringBuffer b,
    ChartSpec spec,
    ThemeProfile? theme,
    String textColor,
  ) {
    final count = math.min(spec.series.length, 6);
    final cellWidth = 720.0 / count;
    for (var i = 0; i < count; i++) {
      final rawName = spec.series[i].name.isEmpty
          ? 'Reeks ${i + 1}'
          : spec.series[i].name;
      final name = rawName.length > 12
          ? '${rawName.substring(0, 11)}…'
          : rawName;
      final x = 40 + i * cellWidth;
      b
        ..write(
          '<rect x="$x" y="414" width="${cellWidth - 8}" height="24" rx="12" '
          'fill="$textColor" fill-opacity=".05"/>',
        )
        ..write(
          '<circle cx="${x + 13}" cy="426" r="5" '
          'fill="${_color(spec, i, theme)}"/>',
        )
        ..write(
          '<text x="${x + 24}" y="431" font-size="13" font-weight="600" '
          'fill="$textColor">${_esc(name)}</text>',
        );
    }
  }
  static void _pieLegendSvg(StringBuffer b, ChartSpec spec, String textColor) {
    const maxColumns = 6;
    final columns = math.min(spec.x.length, maxColumns);
    final rows = (spec.x.length / maxColumns).ceil().clamp(1, 3);
    final cellWidth = 720.0 / columns;
    final startY = 414.0 - (rows - 1) * 28;
    for (var i = 0; i < spec.x.length; i++) {
      final row = i ~/ maxColumns;
      if (row >= rows) break;
      final column = i % maxColumns;
      final x = 40 + column * cellWidth;
      final y = startY + row * 28;
      final label = spec.x[i].length > 12
          ? '${spec.x[i].substring(0, 11)}…'
          : spec.x[i];
      b
        ..write(
          '<rect x="$x" y="$y" width="${cellWidth - 8}" height="24" rx="12" '
          'fill="$textColor" fill-opacity=".05"/>',
        )
        ..write(
          '<circle cx="${x + 13}" cy="${y + 12}" r="5" '
          'fill="${chartRowColor(spec, i)}"/>',
        )
        ..write(
          '<text x="${x + 24}" y="${y + 17}" font-size="13" font-weight="600" '
          'fill="$textColor">${_esc(label)}</text>',
        );
    }
  }
  static double _maxY(ChartSpec spec) {
    var m = 0.0;
    for (final s in spec.series) {
@ -188,9 +253,44 @@ class MarpHtmlService {
        if (v > m) m = v;
      }
    }
    if (spec.supportsBounds) {
      for (final b in [spec.minBound, spec.maxBound]) {
        if (b != null && b > m) m = b;
      }
    }
    return m <= 0 ? 1 : m * 1.15;
  }
  /// Draw the optional min/max threshold lines (bar/line only) as dashed rules.
  static void _boundLinesSvg(
    StringBuffer b,
    ChartSpec spec,
    double left,
    double top,
    double right,
    double bottom,
    double maxY,
  ) {
    if (!spec.supportsBoundLines) return;
    void draw(double? value, String color, String prefix) {
      if (value == null || value < 0 || value > maxY) return;
      final y = bottom - (bottom - top) * (value / maxY);
      b
        ..write(
          '<line x1="$left" y1="$y" x2="$right" y2="$y" stroke="$color" '
          'stroke-width="2.5" stroke-dasharray="8 5"/>',
        )
        ..write(
          '<text x="${right - 4}" y="${y - 5}" text-anchor="end" '
          'font-size="14" font-weight="700" fill="$color">'
          '$prefix ${_num(value)}</text>',
        );
    }
    draw(spec.minBound, '#F59E0B', 'min');
    draw(spec.maxBound, '#EF4444', 'max');
  }
  static String _num(double v) =>
      v == v.roundToDouble() ? v.toInt().toString() : v.toStringAsFixed(1);
@ -217,16 +317,27 @@ class MarpHtmlService {
    }
    // X labels.
    final n = spec.x.length;
    final step = math.max(1, (n / 8).ceil());
    for (var i = 0; i < n; i++) {
      if (i != n - 1 && i % step != 0) continue;
      final x = left + (right - left) * (i + 0.5) / n;
      final label = spec.x[i].length > 10
          ? '${spec.x[i].substring(0, 9)}…'
          : spec.x[i];
      b.write(
-        '<text x="$x" y="${bottom + 22}" text-anchor="middle" font-size="14" fill="#334155">${_esc(spec.x[i])}</text>',
+        '<text x="$x" y="${bottom + 20}" text-anchor="middle" '
        'font-size="13" fill="#334155">${_esc(label)}</text>',
      );
    }
  }
-  static void _barSvg(StringBuffer b, ChartSpec spec, double top) {
+  static void _barSvg(
-    const left = 60.0, right = 770.0, bottom = 400.0;
+    StringBuffer b,
    ChartSpec spec,
    double top,
    ThemeProfile? theme,
  ) {
    const left = 60.0, right = 770.0, bottom = 382.0;
    final maxY = _maxY(spec);
    _axes(b, spec, left, top, right, bottom, maxY);
    final n = spec.x.length;
@ -241,14 +352,21 @@ class MarpHtmlService {
        final h = (bottom - top) * (v / maxY);
        final x = gx + barW * si;
        b.write(
-          '<rect x="$x" y="${bottom - h}" width="${barW * 0.92}" height="$h" rx="2" fill="${_color(si)}"/>',
+          '<rect x="$x" y="${bottom - h}" width="${barW * 0.86}" height="$h" '
          'rx="5" fill="${_color(spec, si, theme)}"/>',
        );
      }
    }
    _boundLinesSvg(b, spec, left, top, right, bottom, maxY);
  }
-  static void _lineSvg(StringBuffer b, ChartSpec spec, double top) {
+  static void _lineSvg(
-    const left = 60.0, right = 770.0, bottom = 400.0;
+    StringBuffer b,
    ChartSpec spec,
    double top,
    ThemeProfile? theme,
  ) {
    const left = 60.0, right = 770.0, bottom = 382.0;
    final maxY = _maxY(spec);
    _axes(b, spec, left, top, right, bottom, maxY);
    final n = spec.x.length;
@ -260,54 +378,222 @@ class MarpHtmlService {
        for (var i = 0; i < data.length; i++) '${px(i)},${py(data[i])}',
      ].join(' ');
      b.write(
-        '<polyline points="$pts" fill="none" stroke="${_color(si)}" stroke-width="3"/>',
+        '<polyline points="$pts" fill="none" '
        'stroke="${_color(spec, si, theme)}" stroke-width="4" '
        'stroke-linecap="round" stroke-linejoin="round"/>',
      );
      for (var i = 0; i < data.length; i++) {
        b.write(
-          '<circle cx="${px(i)}" cy="${py(data[i])}" r="4" fill="${_color(si)}"/>',
+          '<circle cx="${px(i)}" cy="${py(data[i])}" r="5" '
          'fill="${_color(spec, si, theme)}" stroke="white" stroke-width="2"/>',
        );
      }
    }
    _boundLinesSvg(b, spec, left, top, right, bottom, maxY);
  }
-  static void _pieSvg(StringBuffer b, ChartSpec spec, double top) {
+  static void _pieSvg(
-    final series = spec.series.first;
+    StringBuffer b,
-    final total = series.data.fold<double>(0, (a, v) => a + v);
+    ChartSpec spec,
-    const cx = 250.0, cy = 240.0, r = 150.0;
+    double top,
-    var angle = -90.0; // start at top
+    ThemeProfile? theme, {
-    for (var i = 0; i < series.data.length; i++) {
+    required double bottom,
-      final frac = total > 0 ? series.data[i] / total : 0;
+  }) {
-      final sweep = frac * 360;
+    final count = math.min(spec.series.length, 2);
-      final a0 = angle * math.pi / 180;
+    final columns = count;
-      final a1 = (angle + sweep) * math.pi / 180;
+    final rows = (count / columns).ceil();
-      final x0 = cx + r * math.cos(a0), y0 = cy + r * math.sin(a0);
+    final cellWidth = 720.0 / columns;
-      final x1 = cx + r * math.cos(a1), y1 = cy + r * math.sin(a1);
+    final cellHeight = (bottom - top) / rows;
-      final large = sweep > 180 ? 1 : 0;
+    final radius = math.min(cellWidth * 0.25, cellHeight * 0.42);
-      b.write(
+    for (var xi = 0; xi < count; xi++) {
-        '<path d="M$cx,$cy L$x0,$y0 A$r,$r 0 $large,1 $x1,$y1 Z" fill="${_color(i)}"/>',
+      final col = xi % columns;
-      );
+      final row = xi ~/ columns;
-      angle += sweep;
+      final cellLeft = 40 + cellWidth * col;
-    }
+      final cx = cellLeft + cellWidth * 0.36;
-    // Legend on the right.
+      final cy = top + cellHeight * (row + 0.5);
-    var ly = 120.0;
+      final series = spec.series[xi];
-    for (var i = 0; i < spec.x.length && i < series.data.length; i++) {
+      final values = [
-      b
+        for (var labelIndex = 0; labelIndex < spec.x.length; labelIndex++)
-        ..write(
+          labelIndex < series.data.length && series.data[labelIndex] > 0
-          '<rect x="520" y="$ly" width="16" height="16" rx="3" fill="${_color(i)}"/>',
+              ? series.data[labelIndex]
-        )
+              : 0.0,
-        ..write(
+      ];
-          '<text x="544" y="${ly + 13}" font-size="16" fill="#333">${_esc(spec.x[i])}</text>',
+      final total = values.fold<double>(0, (a, v) => a + v);
      var angle = -90.0;
      for (var labelIndex = 0; labelIndex < values.length; labelIndex++) {
        final frac = total > 0 ? values[labelIndex] / total : 0;
        final sweep = frac * 360;
        if (sweep <= 0) continue;
        final a0 = angle * math.pi / 180;
        final a1 = (angle + sweep) * math.pi / 180;
        final x0 = cx + radius * math.cos(a0);
        final y0 = cy + radius * math.sin(a0);
        final x1 = cx + radius * math.cos(a1);
        final y1 = cy + radius * math.sin(a1);
        final large = sweep > 180 ? 1 : 0;
        b.write(
          '<path d="M$cx,$cy L$x0,$y0 A$radius,$radius 0 $large,1 '
          '$x1,$y1 Z" '
          'fill="${chartRowColor(spec, labelIndex)}" '
          'stroke="white" '
          'stroke-width="2"/>',
        );
        angle += sweep;
      }
      b
        ..write('<circle cx="$cx" cy="$cy" r="${radius * 0.43}" fill="white"/>')
        ..write(
          '<text x="${cellLeft + cellWidth * 0.66}" y="${cy + 5}" '
          'font-size="14" font-weight="700">'
          '${_esc(_shortChartLabel(series.name.isEmpty ? 'Reeks ${xi + 1}' : series.name))}</text>',
        );
      ly += 28;
    }
  }
  static void _radarSvg(
    StringBuffer b,
    ChartSpec spec,
    double top,
    ThemeProfile? theme,
    String textColor,
  ) {
    final n = spec.x.length;
    if (n < 3 || spec.series.isEmpty) return;
    const bottom = 382.0;
    const cx = 400.0;
    final cy = (top + bottom) / 2;
    final radius = math.min(170.0, (bottom - top) / 2 - 34);
    final (lo, hi, ticks) = _radarScale(spec);
    final span = (hi - lo) == 0 ? 1.0 : (hi - lo);
    double angle(int i) => -math.pi / 2 + 2 * math.pi * i / n;
    // Concentric grid rings, evenly spaced across the [lo, hi] scale.
    for (var ring = 1; ring <= ticks; ring++) {
      final rr = radius * ring / ticks;
      final pts = [
        for (var i = 0; i < n; i++)
          '${cx + rr * math.cos(angle(i))},${cy + rr * math.sin(angle(i))}',
      ].join(' ');
      b.write(
        '<polygon points="$pts" fill="none" stroke="#e2e8f0" '
        'stroke-width="1"/>',
      );
    }
    // Scale legend on the right: hi at the top down to lo at the bottom, so the
    // figure itself stays clean.
    final legendX = cx + radius + 30;
    for (var k = ticks; k >= 0; k--) {
      final value = lo + span * k / ticks;
      final y = (cy - radius) + (2 * radius) * (ticks - k) / ticks;
      b
        ..write(
          '<line x1="$legendX" y1="$y" x2="${legendX + 8}" y2="$y" '
          'stroke="#cbd5e1" stroke-width="1"/>',
        )
        ..write(
          '<text x="${legendX + 12}" y="${y + 4}" font-size="12" '
          'fill="#94a3b8">${_num(value)}</text>',
        );
    }
    // Spokes and axis labels.
    for (var i = 0; i < n; i++) {
      final c = math.cos(angle(i));
      final s = math.sin(angle(i));
      b.write(
        '<line x1="$cx" y1="$cy" x2="${cx + radius * c}" '
        'y2="${cy + radius * s}" stroke="#e2e8f0" stroke-width="1"/>',
      );
      final anchor = c > 0.3 ? 'start' : (c < -0.3 ? 'end' : 'middle');
      final label = spec.x[i].length > 12
          ? '${spec.x[i].substring(0, 11)}…'
          : spec.x[i];
      b.write(
        '<text x="${cx + (radius + 18) * c}" y="${cy + (radius + 18) * s + 4}" '
        'text-anchor="$anchor" font-size="13" fill="$textColor">'
        '${_esc(label)}</text>',
      );
    }
    // One filled polygon per series.
    for (var si = 0; si < spec.series.length; si++) {
      final data = spec.series[si].data;
      final pts = [
        for (var i = 0; i < n; i++)
          () {
            final v = i < data.length ? data[i] : 0.0;
            final rr = radius * ((v - lo) / span).clamp(0.0, 1.0);
            return '${cx + rr * math.cos(angle(i))},'
                '${cy + rr * math.sin(angle(i))}';
          }(),
      ].join(' ');
      final color = _color(spec, si, theme);
      b.write(
        '<polygon points="$pts" fill="$color" fill-opacity="0.16" '
        'stroke="$color" stroke-width="3" stroke-linejoin="round"/>',
      );
    }
  }
  /// Radar scale shared with the live preview: honour optional min/max bounds,
  /// otherwise round the data range to a tidy scale with an even tick count.
  static (double, double, int) _radarScale(ChartSpec spec) {
    var dataMin = 0.0;
    var dataMax = 0.0;
    var seen = false;
    for (final s in spec.series) {
      for (final v in s.data) {
        if (!seen) {
          dataMin = v;
          dataMax = v;
          seen = true;
        } else {
          if (v < dataMin) dataMin = v;
          if (v > dataMax) dataMax = v;
        }
      }
    }
    if (!seen) {
      dataMin = 0;
      dataMax = 1;
    }
    final rawLo = spec.minBound ?? (dataMin < 0 ? dataMin : 0);
    final rawHi = spec.maxBound ?? dataMax;
    final range = (rawHi - rawLo).abs();
    final r = range <= 0 ? 1.0 : range;
    final rawStep = r / 4;
    final mag = math.pow(10, (math.log(rawStep) / math.ln10).floor()).toDouble();
    final norm = rawStep / mag;
    final niceNorm = norm < 1.5
        ? 1.0
        : norm < 3
        ? 2.0
        : norm < 7
        ? 5.0
        : 10.0;
    final step = niceNorm * mag;
    final lo = spec.minBound ?? (rawLo / step).floorToDouble() * step;
    var hi = spec.maxBound ?? (rawHi / step).ceilToDouble() * step;
    if (hi <= lo) hi = lo + step;
    final ticks = math.max(2, ((hi - lo) / step).round());
    return (lo, hi, ticks);
  }
  static String _shortChartLabel(String value) =>
      value.length > 13 ? '${value.substring(0, 12)}…' : value;
  /// CSS that mirrors the deck's [ThemeProfile]: slide background, text and
  /// accent colours, table colours and font. The EB Garamond font is embedded
  /// (base64) so it renders offline; other fonts resolve to system families.
  Future<String> _themedCss(ThemeProfile t) async {
    final fontFace = await _ebGaramondFontFace(t.fontFamily);
    final family = _cssFontStack(t.fontFamily);
    final codePrefix = t.codeFontFamily == 'monospace'
        ? ''
        : "'${t.codeFontFamily}',";
    final codeFamily =
        '${codePrefix}SFMono-Regular,Consolas,"Liberation Mono",monospace';
    return '$fontFace\n'
        '*{box-sizing:border-box}'
        'html,body{margin:0;padding:0}'
@ -320,9 +606,11 @@ class MarpHtmlService {
        '.slide h2{font-size:34px;margin:.15em 0;color:${t.accentColor}}'
        '.slide a{color:${t.accentColor}}'
        '.slide p,.slide li{font-size:24px;line-height:1.45}'
-        '.slide pre{background:#f6f8fa;border:1px solid #e1e4e8;border-radius:6px;'
+        '.slide pre{background:${t.codeBackgroundColor};color:${t.codeTextColor};'
-        'padding:16px;overflow:auto;font-size:18px}'
+        'border:1px solid ${t.codeTextColor}38;border-radius:6px;'
-        '.slide code{font-family:SFMono-Regular,Consolas,"Liberation Mono",monospace}'
+        'padding:16px;overflow:auto;font-size:18px;font-family:$codeFamily}'
        '.slide pre code{color:${t.codeTextColor};background:transparent}'
        '.slide code{font-family:$codeFamily}'
        '.slide pre.mermaid{background:transparent;border:0;text-align:center}'
        '.slide img{max-width:100%}'
        '.slide blockquote{border-left:4px solid ${t.accentColor};margin:.5em 0;'
--- a/lib/state/deck_provider.dart
+++ b/lib/state/deck_provider.dart
@ -25,6 +25,7 @@ final fileServiceProvider = Provider<FileService>((ref) {
    ref.read(imageServiceProvider),
    () => ref.read(settingsProvider).themeProfile,
    languageCode: () => ref.read(settingsProvider).languageCode,
    homeDirectory: () => ref.read(settingsProvider).homeDirectory,
  );
 });
@ -128,8 +129,14 @@ class DeckNotifier extends StateNotifier<DeckState> {
  /// Load a deck that was already parsed (used by the tab manager).
  void loadDeck(Deck deck, {String? filePath}) {
    final resolvedDeck = deck.copyWith(
      themeProfile: _file.resolveThemeProfile(
        deck.themeProfile,
        projectPath: deck.projectPath,
      ),
    );
    _clearHistory();
-    state = DeckState(deck: deck, filePath: filePath, isDirty: false);
+    state = DeckState(deck: resolvedDeck, filePath: filePath, isDirty: false);
  }
  Future<void> openDeck({String? initialDirectory}) async {
@ -414,7 +421,14 @@ class DeckNotifier extends StateNotifier<DeckState> {
  void updateThemeProfile(ThemeProfile profile) {
    final deck = state.deck;
    if (deck == null) return;
-    _mutate(deck.copyWith(themeProfile: profile));
+    _mutate(
      deck.copyWith(
        themeProfile: _file.resolveThemeProfile(
          profile,
          projectPath: deck.projectPath,
        ),
      ),
    );
  }
  /// Update the (separate) annotation layer. Kept out of the undo/redo history
--- a/lib/widgets/dialogs/settings_dialog.dart
+++ b/lib/widgets/dialogs/settings_dialog.dart
@ -882,11 +882,47 @@ class _SettingsDialogState extends ConsumerState<SettingsDialog> {
    );
  }
  /// A banner shown on tabs that edit the active style profile, so it is clear
  /// these settings belong to the loaded profile (and which one).
  Widget _profileScopeBanner() {
    final name = _themeProfile.name;
    return Container(
      margin: const EdgeInsets.only(bottom: 16),
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
      decoration: BoxDecoration(
        color: AppTheme.accent.withValues(alpha: 0.08),
        borderRadius: BorderRadius.circular(8),
        border: Border(left: BorderSide(color: AppTheme.accent, width: 3)),
      ),
      child: Row(
        children: [
          Icon(Icons.style_outlined, size: 16, color: AppTheme.accent),
          const SizedBox(width: 8),
          Expanded(
            child: Text.rich(
              TextSpan(
                children: [
                  TextSpan(text: context.l10n.d('Onderdeel van stijlprofiel ')),
                  TextSpan(
                    text: '“$name”',
                    style: const TextStyle(fontWeight: FontWeight.w700),
                  ),
                ],
              ),
              style: const TextStyle(fontSize: 12, color: Color(0xFF334155)),
            ),
          ),
        ],
      ),
    );
  }
  Widget _colorsTab() {
    final l10n = context.l10n;
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        _profileScopeBanner(),
        _sectionTitle(l10n.d('Kleuren')),
        _colorSetting(
          l10n.d('Achtergrond slides'),
@ -939,6 +975,68 @@ class _SettingsDialogState extends ConsumerState<SettingsDialog> {
          (v) =>
              _themeProfile = _themeProfile.copyWith(sectionBackgroundColor: v),
        ),
        const SizedBox(height: 24),
        _sectionTitle(l10n.d('Broncode')),
        _colorSetting(
          l10n.d('Broncode achtergrond'),
          _themeProfile.codeBackgroundColor,
          (v) =>
              _themeProfile = _themeProfile.copyWith(codeBackgroundColor: v),
        ),
        const SizedBox(height: 12),
        _colorSetting(
          l10n.d('Broncode tekst'),
          _themeProfile.codeTextColor,
          (v) => _themeProfile = _themeProfile.copyWith(codeTextColor: v),
        ),
        const SizedBox(height: 6),
        SwitchListTile(
          value: _themeProfile.codeHighlightSyntax,
          onChanged: (v) => setState(() {
            _themeProfile = _themeProfile.copyWith(codeHighlightSyntax: v);
            _profileTouched = true;
          }),
          title: Text(
            l10n.d('Syntaxkleuring'),
            style: const TextStyle(fontSize: 13),
          ),
          subtitle: Text(
            l10n.d(
              'Uit = alles in één kleur (bijv. groen op zwart voor een CRT-scherm).',
            ),
            style: const TextStyle(fontSize: 11, color: Color(0xFF94A3B8)),
          ),
          controlAffinity: ListTileControlAffinity.leading,
          contentPadding: EdgeInsets.zero,
          dense: true,
        ),
        const SizedBox(height: 10),
        DropdownButtonFormField<String>(
          initialValue: AppSettings.codeFonts.contains(_themeProfile.codeFontFamily)
              ? _themeProfile.codeFontFamily
              : 'monospace',
          decoration: InputDecoration(
            labelText: l10n.d('Broncode lettertype'),
            isDense: true,
          ),
          items: [
            for (final f in AppSettings.codeFonts)
              DropdownMenuItem(
                value: f,
                child: Text(
                  f == 'monospace' ? l10n.d('Systeem (monospace)') : f,
                  style: TextStyle(fontFamily: f),
                ),
              ),
          ],
          onChanged: (v) {
            if (v == null) return;
            setState(() {
              _themeProfile = _themeProfile.copyWith(codeFontFamily: v);
              _profileTouched = true;
            });
          },
        ),
        const SizedBox(height: 18),
        _stylePreview(),
      ],
@ -950,6 +1048,7 @@ class _SettingsDialogState extends ConsumerState<SettingsDialog> {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        _profileScopeBanner(),
        _sectionTitle(l10n.d('Logo')),
        Row(
          children: [
@ -1149,18 +1248,143 @@ class _SettingsDialogState extends ConsumerState<SettingsDialog> {
            for (final color in _colorPresets)
              _colorSwatch(
                color,
-                selected: value == color,
+                selected: value.toUpperCase() == color,
                onTap: () => setState(() {
                  onChanged(color);
                  _profileTouched = true;
                }),
              ),
            // Show the current value as a selected swatch when it isn't one of
            // the presets (e.g. a hand-entered CRT green).
            if (!_colorPresets.contains(value.toUpperCase()))
              _colorSwatch(
                value,
                selected: true,
                onTap: () => _editCustomColor(value, onChanged),
              ),
            _customColorButton(value, onChanged),
          ],
        ),
      ],
    );
  }
  Widget _customColorButton(String value, ValueChanged<String> onChanged) {
    return Tooltip(
      message: context.l10n.d('Eigen kleur (hex)'),
      child: InkWell(
        onTap: () => _editCustomColor(value, onChanged),
        borderRadius: BorderRadius.circular(8),
        child: Container(
          width: 34,
          height: 34,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            border: Border.all(color: const Color(0xFFCBD5E1)),
          ),
          child: const Icon(
            Icons.tune,
            size: 18,
            color: Color(0xFF64748B),
          ),
        ),
      ),
    );
  }
  Future<void> _editCustomColor(
    String initial,
    ValueChanged<String> onChanged,
  ) async {
    final picked = await _pickHexColor(initial);
    if (picked == null || !mounted) return;
    setState(() {
      onChanged(picked);
      _profileTouched = true;
    });
  }
  Future<String?> _pickHexColor(String initial) {
    final controller = TextEditingController(text: initial);
    String? normalize(String raw) {
      final up = raw.trim().toUpperCase();
      final hex = up.startsWith('#') ? up : '#$up';
      return RegExp(r'^#[0-9A-F]{6}$').hasMatch(hex) ? hex : null;
    }
    final l10n = context.l10n;
    return showDialog<String>(
      context: context,
      builder: (context) => StatefulBuilder(
        builder: (context, setDialogState) {
          final normalized = normalize(controller.text);
          return AlertDialog(
            title: Text(l10n.d('Eigen kleur (hex)')),
            content: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Row(
                  children: [
                    Container(
                      width: 40,
                      height: 40,
                      decoration: BoxDecoration(
                        color: _parseColor(normalized ?? '#FFFFFF'),
                        borderRadius: BorderRadius.circular(8),
                        border: Border.all(color: const Color(0xFFCBD5E1)),
                      ),
                    ),
                    const SizedBox(width: 12),
                    Expanded(
                      child: TextField(
                        controller: controller,
                        autofocus: true,
                        decoration: InputDecoration(
                          labelText: l10n.d('Hexkleur'),
                          hintText: '#33FF33',
                          isDense: true,
                          border: const OutlineInputBorder(),
                        ),
                        inputFormatters: [
                          FilteringTextInputFormatter.allow(
                            RegExp(r'[#0-9a-fA-F]'),
                          ),
                          LengthLimitingTextInputFormatter(7),
                        ],
                        onChanged: (_) => setDialogState(() {}),
                        onSubmitted: (_) {
                          final ok = normalize(controller.text);
                          if (ok != null) Navigator.pop(context, ok);
                        },
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 8),
                Text(
                  l10n.d('Bijvoorbeeld #33FF33 voor een CRT-groen scherm.'),
                  style: const TextStyle(fontSize: 11, color: Color(0xFF94A3B8)),
                ),
              ],
            ),
            actions: [
              TextButton(
                onPressed: () => Navigator.pop(context),
                child: Text(l10n.d('Annuleren')),
              ),
              FilledButton(
                onPressed: normalized == null
                    ? null
                    : () => Navigator.pop(context, normalized),
                child: Text(l10n.d('Toepassen')),
              ),
            ],
          );
        },
      ),
    ).whenComplete(controller.dispose);
  }
  Widget _colorSwatch(
    String color, {
    required bool selected,
--- a/lib/widgets/editors/chart_editor.dart
+++ b/lib/widgets/editors/chart_editor.dart
@ -1,5 +1,6 @@
 import 'dart:convert';
 import 'dart:io';
 import 'dart:math' as math;
 import 'package:file_picker/file_picker.dart';
 import 'package:flutter/material.dart';
@ -31,19 +32,23 @@ class ChartEditor extends StatefulWidget {
 class _ChartEditorState extends State<ChartEditor> {
  late final TextEditingController _title;
  late final TextEditingController _minBound;
  late final TextEditingController _maxBound;
  late ChartType _type;
  String? _source;
  // Editable grid model (strings while editing).
  List<String> _xLabels = [];
  List<String?> _rowColors = [];
  List<String> _seriesNames = [];
  List<String?> _seriesColors = [];
  List<List<String>> _values = []; // [row][col]
  // Bumped on structural changes so cell fields rebuild with fresh values.
  int _rev = 0;
-  static const _labelW = 130.0;
+  static const _minLabelW = 238.0;
-  static const _cellW = 96.0;
+  static const _minCellW = 150.0;
  @override
  void initState() {
@ -53,13 +58,31 @@ class _ChartEditorState extends State<ChartEditor> {
    _source = spec.source;
    _title = TextEditingController(text: spec.title);
    _title.addListener(_emit);
    _minBound = TextEditingController(text: _fmtBound(spec.minBound));
    _maxBound = TextEditingController(text: _fmtBound(spec.maxBound));
    _minBound.addListener(_emit);
    _maxBound.addListener(_emit);
    _loadFromSpec(spec);
  }
  bool get _supportsBounds => _type != ChartType.pie;
  static String _fmtBound(double? v) => v == null ? '' : _fmt(v);
  static double? _parseBound(String raw) {
    final text = raw.trim().replaceAll(',', '.');
    return text.isEmpty ? null : double.tryParse(text);
  }
  void _loadFromSpec(ChartSpec spec) {
    if (spec.hasInlineData) {
      _seriesNames = [for (final s in spec.series) s.name];
      _seriesColors = [for (final s in spec.series) s.color];
      _xLabels = List<String>.from(spec.x);
      _rowColors = [
        for (var i = 0; i < spec.x.length; i++)
          i < spec.rowColors.length ? spec.rowColors[i] : null,
      ];
      _values = [
        for (var r = 0; r < spec.x.length; r++)
          [
@ -70,7 +93,9 @@ class _ChartEditorState extends State<ChartEditor> {
    } else {
      // Sensible empty starting grid.
      _seriesNames = ['Reeks 1'];
      _seriesColors = [null];
      _xLabels = ['', '', ''];
      _rowColors = [null, null, null];
      _values = List.generate(3, (_) => ['']);
    }
  }
@ -81,6 +106,8 @@ class _ChartEditorState extends State<ChartEditor> {
  @override
  void dispose() {
    _title.dispose();
    _minBound.dispose();
    _maxBound.dispose();
    super.dispose();
  }
@ -89,6 +116,7 @@ class _ChartEditorState extends State<ChartEditor> {
      for (var c = 0; c < _seriesNames.length; c++)
        ChartSeries(
          name: _seriesNames[c],
          color: _seriesColors[c],
          data: [
            for (var r = 0; r < _values.length; r++)
              double.tryParse(
@ -105,7 +133,10 @@ class _ChartEditorState extends State<ChartEditor> {
      title: _title.text,
      source: _source,
      x: List<String>.from(_xLabels),
      rowColors: List<String?>.from(_rowColors),
      series: series,
      minBound: _supportsBounds ? _parseBound(_minBound.text) : null,
      maxBound: _supportsBounds ? _parseBound(_maxBound.text) : null,
    );
    widget.onUpdate(widget.slide.copyWith(customMarkdown: spec.toBlock()));
  }
@ -114,6 +145,7 @@ class _ChartEditorState extends State<ChartEditor> {
  void _addColumn() {
    _seriesNames.add('Reeks ${_seriesNames.length + 1}');
    _seriesColors.add(null);
    for (final row in _values) {
      row.add('');
    }
@ -124,6 +156,7 @@ class _ChartEditorState extends State<ChartEditor> {
  void _removeColumn(int c) {
    if (_seriesNames.length <= 1) return;
    _seriesNames.removeAt(c);
    _seriesColors.removeAt(c);
    for (final row in _values) {
      if (c < row.length) row.removeAt(c);
    }
@ -133,6 +166,7 @@ class _ChartEditorState extends State<ChartEditor> {
  void _addRow() {
    _xLabels.add('');
    _rowColors.add(null);
    _values.add(List<String>.filled(_seriesNames.length, '', growable: true));
    _bump();
    _emit();
@ -141,6 +175,7 @@ class _ChartEditorState extends State<ChartEditor> {
  void _removeRow(int r) {
    if (_xLabels.length <= 1) return;
    _xLabels.removeAt(r);
    _rowColors.removeAt(r);
    _values.removeAt(r);
    _bump();
    _emit();
@ -199,12 +234,26 @@ class _ChartEditorState extends State<ChartEditor> {
    setState(() {
      _source = source;
      _xLabels = parsed.$1.isEmpty ? [''] : parsed.$1;
      _rowColors = [
        for (var i = 0; i < _xLabels.length; i++)
          i < _rowColors.length ? _rowColors[i] : null,
      ];
      _seriesNames = parsed.$2.isEmpty
          ? ['Reeks 1']
          : [for (final s in parsed.$2) s.name];
      _seriesColors = [
        for (var i = 0; i < _seriesNames.length; i++)
          i < _seriesColors.length ? _seriesColors[i] : null,
      ];
      _values = [
        for (var r = 0; r < _xLabels.length; r++)
-          [for (final s in parsed.$2) r < s.data.length ? _fmt(s.data[r]) : ''],
+          if (parsed.$2.isEmpty)
            ['']
          else
            [
              for (final s in parsed.$2)
                r < s.data.length ? _fmt(s.data[r]) : '',
            ],
      ];
      _rev++;
    });
@ -216,6 +265,170 @@ class _ChartEditorState extends State<ChartEditor> {
    _emit();
  }
  void _moveRow(int from, int to) {
    if (to < 0 || to >= _xLabels.length || from == to) return;
    setState(() {
      final label = _xLabels.removeAt(from);
      final color = _rowColors.removeAt(from);
      final values = _values.removeAt(from);
      _xLabels.insert(to, label);
      _rowColors.insert(to, color);
      _values.insert(to, values);
      _rev++;
    });
    _emit();
  }
  void _sortRows({int? column, required bool ascending}) {
    final indices = List<int>.generate(_xLabels.length, (i) => i);
    indices.sort((a, b) {
      int result;
      if (column == null) {
        result = _xLabels[a].toLowerCase().compareTo(_xLabels[b].toLowerCase());
      } else {
        final av =
            double.tryParse(_values[a][column].replaceAll(',', '.')) ?? 0;
        final bv =
            double.tryParse(_values[b][column].replaceAll(',', '.')) ?? 0;
        result = av.compareTo(bv);
      }
      return ascending ? result : -result;
    });
    setState(() {
      final labels = [for (final i in indices) _xLabels[i]];
      final colors = [for (final i in indices) _rowColors[i]];
      final values = [for (final i in indices) _values[i]];
      _xLabels = labels;
      _rowColors = colors;
      _values = values;
      _rev++;
    });
    _emit();
  }
  Future<void> _pickSeriesColor(int index) async {
    final selected = await _pickColor(
      initial:
          _seriesColors[index] ??
          chartSeriesColor(ChartSeries(name: '', data: const []), index),
      title: context.l10n.d('Kleur van reeks'),
    );
    if (selected == null || !mounted) return;
    setState(() => _seriesColors[index] = selected);
    _emit();
  }
  Future<void> _pickRowColor(int index) async {
    final selected = await _pickColor(
      initial:
          _rowColors[index] ??
          chartColorPalette[index % chartColorPalette.length],
      title: context.l10n.d('Kleur van rij'),
    );
    if (selected == null || !mounted) return;
    setState(() => _rowColors[index] = selected);
    _emit();
  }
  Future<String?> _pickColor({
    required String initial,
    required String title,
  }) async {
    final controller = TextEditingController(text: initial);
    final selected = await showDialog<String>(
      context: context,
      builder: (context) => AlertDialog(
        title: Text(title),
        content: StatefulBuilder(
          builder: (context, setDialogState) => SizedBox(
            width: 320,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Wrap(
                  spacing: 10,
                  runSpacing: 10,
                  children: [
                    for (final hex in chartColorPalette)
                      _colorChoice(
                        hex,
                        selected: normalizeChartColor(controller.text) == hex,
                        onTap: () {
                          controller.text = hex;
                          setDialogState(() {});
                        },
                      ),
                  ],
                ),
                const SizedBox(height: 18),
                TextField(
                  controller: controller,
                  decoration: InputDecoration(
                    labelText: context.l10n.d('Hexkleur'),
                    hintText: '#2563EB',
                    border: const OutlineInputBorder(),
                    isDense: true,
                  ),
                  inputFormatters: [
                    FilteringTextInputFormatter.allow(RegExp(r'[#0-9a-fA-F]')),
                    LengthLimitingTextInputFormatter(7),
                  ],
                  onChanged: (_) => setDialogState(() {}),
                ),
              ],
            ),
          ),
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: Text(context.l10n.d('Annuleren')),
          ),
          FilledButton(
            onPressed: normalizeChartColor(controller.text) == null
                ? null
                : () => Navigator.pop(
                    context,
                    normalizeChartColor(controller.text),
                  ),
            child: Text(context.l10n.d('Toepassen')),
          ),
        ],
      ),
    );
    controller.dispose();
    return selected;
  }
  Widget _colorChoice(
    String hex, {
    required bool selected,
    required VoidCallback onTap,
  }) {
    final color = Color(int.parse(hex.substring(1), radix: 16) | 0xFF000000);
    return InkWell(
      onTap: onTap,
      borderRadius: BorderRadius.circular(18),
      child: Container(
        width: 34,
        height: 34,
        decoration: BoxDecoration(
          color: color,
          shape: BoxShape.circle,
          border: Border.all(
            color: selected ? const Color(0xFF0F172A) : Colors.white,
            width: selected ? 3 : 2,
          ),
          boxShadow: const [BoxShadow(color: Color(0x330F172A), blurRadius: 3)],
        ),
        child: selected
            ? const Icon(Icons.check, size: 18, color: Colors.white)
            : null,
      ),
    );
  }
  @override
  Widget build(BuildContext context) {
    final l10n = context.l10n;
@ -256,6 +469,10 @@ class _ChartEditorState extends State<ChartEditor> {
                    value: ChartType.pie,
                    child: Text(l10n.d('Cirkel')),
                  ),
                  DropdownMenuItem(
                    value: ChartType.radar,
                    child: Text(l10n.d('Spider')),
                  ),
                ],
                onChanged: (v) {
                  if (v == null) return;
@ -271,6 +488,54 @@ class _ChartEditorState extends State<ChartEditor> {
              ),
            ],
          ),
          if (_type == ChartType.pie)
            Padding(
              padding: const EdgeInsets.only(top: 8),
              child: Text(
                l10n.d(
                  'Bij een cirkel worden maximaal de eerste twee reeksen getoond; de labels vormen de segmenten.',
                ),
                style: const TextStyle(fontSize: 11, color: Color(0xFF64748B)),
              ),
            ),
          if (_type == ChartType.radar)
            Padding(
              padding: const EdgeInsets.only(top: 8),
              child: Text(
                l10n.d(
                  'Een spider-diagram heeft minstens drie labels (assen) nodig; elke reeks vormt een vlak.',
                ),
                style: const TextStyle(fontSize: 11, color: Color(0xFF64748B)),
              ),
            ),
          if (_supportsBounds)
            Padding(
              padding: const EdgeInsets.only(top: 12),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Expanded(
                    child: _boundField(
                      key: const ValueKey('chart-min-bound'),
                      controller: _minBound,
                      label: _type == ChartType.radar
                          ? l10n.d('Schaalminimum (optioneel)')
                          : l10n.d('Minimumlijn (optioneel)'),
                    ),
                  ),
                  const SizedBox(width: 12),
                  Expanded(
                    child: _boundField(
                      key: const ValueKey('chart-max-bound'),
                      controller: _maxBound,
                      label: _type == ChartType.radar
                          ? l10n.d('Schaalmaximum (optioneel)')
                          : l10n.d('Maximumlijn (optioneel)'),
                    ),
                  ),
                ],
              ),
            ),
          if (linked)
            Padding(
              padding: const EdgeInsets.only(top: 8),
@ -297,11 +562,19 @@ class _ChartEditorState extends State<ChartEditor> {
            ),
          const SizedBox(height: 12),
          Expanded(
-            child: SingleChildScrollView(
+            child: LayoutBuilder(
-              child: SingleChildScrollView(
+              builder: (context, constraints) {
-                scrollDirection: Axis.horizontal,
+                final availableWidth = constraints.maxWidth;
-                child: _grid(enabled: !linked),
+                return SingleChildScrollView(
-              ),
+                  child: SingleChildScrollView(
                    scrollDirection: Axis.horizontal,
                    child: _grid(
                      enabled: !linked,
                      availableWidth: availableWidth,
                    ),
                  ),
                );
              },
            ),
          ),
          if (!linked) ...[
@ -327,80 +600,207 @@ class _ChartEditorState extends State<ChartEditor> {
    );
  }
-  Widget _grid({required bool enabled}) {
+  Widget _grid({required bool enabled, required double availableWidth}) {
    final cols = _seriesNames.length;
-    return Column(
+    const trailingWidth = 40.0;
-      crossAxisAlignment: CrossAxisAlignment.start,
+    final labelWidth = math.max(_minLabelW, availableWidth * 0.28);
-      children: [
+    final remaining = availableWidth - labelWidth - trailingWidth;
-        // Header row: empty label cell + series name fields.
+    final cellWidth = math.max(_minCellW, remaining / cols);
-        Row(
+    final gridWidth = math.max(
-          children: [
+      availableWidth,
-            SizedBox(
+      labelWidth + cellWidth * cols + trailingWidth,
-              width: _labelW,
+    );
-              child: _headerHint(context.l10n.d('Label')),
+    return SizedBox(
-            ),
+      key: const ValueKey('chart-grid'),
-            for (var c = 0; c < cols; c++)
+      width: gridWidth,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Header row: empty label cell + series name fields.
          Row(
            children: [
              SizedBox(
-                width: _cellW,
+                width: labelWidth,
                child: Row(
                  children: [
-                    Expanded(
+                    Expanded(child: _headerHint(context.l10n.d('Label'))),
-                      child: _cell(
+                    _sortButton(column: null, enabled: enabled),
                        key: ValueKey('s-$_rev-$c'),
                        value: _seriesNames[c],
                        enabled: enabled,
                        onChanged: (v) => _seriesNames[c] = v,
                        bold: true,
                      ),
                    ),
                    if (enabled && cols > 1)
                      _iconBtn(Icons.close, () => _removeColumn(c)),
                  ],
                ),
              ),
-          ],
+              for (var c = 0; c < cols; c++)
-        ),
+                Container(
-        const SizedBox(height: 4),
+                  key: ValueKey('chart-series-column-$c'),
-        // Data rows.
+                  width: cellWidth,
-        for (var r = 0; r < _xLabels.length; r++)
+                  color: _type == ChartType.pie && c >= 2
-          Padding(
+                      ? const Color(0xFFE2E8F0)
-            padding: const EdgeInsets.only(bottom: 4),
+                      : null,
-            child: Row(
+                  child: Row(
-              children: [
+                    children: [
-                SizedBox(
+                      IconButton(
-                  width: _labelW,
+                        onPressed: enabled ? () => _pickSeriesColor(c) : null,
-                  child: _cell(
+                        tooltip: context.l10n.d('Kleur van reeks'),
-                    key: ValueKey('x-$_rev-$r'),
+                        icon: Container(
-                    value: _xLabels[r],
+                          width: 16,
-                    enabled: enabled,
+                          height: 16,
-                    onChanged: (v) => _xLabels[r] = v,
+                          decoration: BoxDecoration(
                            color: Color(
                              _type == ChartType.pie && c >= 2
                                  ? 0xFF94A3B8
                                  : int.parse(
                                          chartSeriesColor(
                                            ChartSeries(
                                              name: '',
                                              data: const [],
                                              color: _seriesColors[c],
                                            ),
                                            c,
                                          ).substring(1),
                                          radix: 16,
                                        ) |
                                        0xFF000000,
                            ),
                            shape: BoxShape.circle,
                            border: Border.all(color: Colors.white, width: 1.5),
                            boxShadow: const [
                              BoxShadow(
                                color: Color(0x330F172A),
                                blurRadius: 2,
                              ),
                            ],
                          ),
                        ),
                        visualDensity: VisualDensity.compact,
                        padding: EdgeInsets.zero,
                        constraints: const BoxConstraints(
                          minWidth: 24,
                          minHeight: 32,
                        ),
                      ),
                      Expanded(
                        child: _cell(
                          key: ValueKey('s-$_rev-$c'),
                          value: _seriesNames[c],
                          enabled: enabled,
                          onChanged: (v) => _seriesNames[c] = v,
                          bold: true,
                          muted: _type == ChartType.pie && c >= 2,
                        ),
                      ),
                      _sortButton(column: c, enabled: enabled),
                      if (enabled && cols > 1)
                        _iconBtn(Icons.close, () => _removeColumn(c)),
                    ],
                  ),
                ),
-                for (var c = 0; c < cols; c++)
+            ],
          ),
          const SizedBox(height: 4),
          // Data rows.
          for (var r = 0; r < _xLabels.length; r++)
            Padding(
              padding: const EdgeInsets.only(bottom: 4),
              child: Row(
                children: [
                  SizedBox(
-                    width: _cellW,
+                    width: labelWidth,
-                    child: _cell(
+                    child: Row(
-                      key: ValueKey('v-$_rev-$r-$c'),
+                      children: [
-                      value: c < _values[r].length ? _values[r][c] : '',
+                        IconButton(
-                      enabled: enabled,
+                          key: ValueKey('chart-row-color-$r'),
-                      number: true,
+                          onPressed: enabled ? () => _pickRowColor(r) : null,
-                      onChanged: (v) {
+                          tooltip: context.l10n.d('Kleur van rij'),
-                        while (_values[r].length <= c) {
+                          icon: _colorDot(
-                          _values[r].add('');
+                            _rowColors[r] ??
-                        }
+                                chartColorPalette[r % chartColorPalette.length],
-                        _values[r][c] = v;
+                          ),
-                      },
+                          visualDensity: VisualDensity.compact,
                          padding: EdgeInsets.zero,
                          constraints: const BoxConstraints(
                            minWidth: 26,
                            minHeight: 32,
                          ),
                        ),
                        Expanded(
                          child: _cell(
                            key: ValueKey('x-$_rev-$r'),
                            value: _xLabels[r],
                            enabled: enabled,
                            onChanged: (v) => _xLabels[r] = v,
                          ),
                        ),
                        if (enabled) ...[
                          _iconBtn(
                            Icons.keyboard_arrow_up,
                            r == 0 ? null : () => _moveRow(r, r - 1),
                            key: ValueKey('chart-row-up-$r'),
                          ),
                          _iconBtn(
                            Icons.keyboard_arrow_down,
                            r == _xLabels.length - 1
                                ? null
                                : () => _moveRow(r, r + 1),
                            key: ValueKey('chart-row-down-$r'),
                          ),
                        ],
                      ],
                    ),
                  ),
-                if (enabled && _xLabels.length > 1)
+                  for (var c = 0; c < cols; c++)
-                  _iconBtn(Icons.close, () => _removeRow(r)),
+                    Container(
-              ],
+                      width: cellWidth,
                      color: _type == ChartType.pie && c >= 2
                          ? const Color(0xFFE2E8F0)
                          : null,
                      child: _cell(
                        key: ValueKey('v-$_rev-$r-$c'),
                        value: c < _values[r].length ? _values[r][c] : '',
                        enabled: enabled,
                        number: true,
                        muted: _type == ChartType.pie && c >= 2,
                        onChanged: (v) {
                          while (_values[r].length <= c) {
                            _values[r].add('');
                          }
                          _values[r][c] = v;
                        },
                      ),
                    ),
                  if (enabled && _xLabels.length > 1)
                    _iconBtn(Icons.close, () => _removeRow(r)),
                ],
              ),
            ),
-          ),
+        ],
-      ],
+      ),
    );
  }
  Widget _boundField({
    required Key key,
    required TextEditingController controller,
    required String label,
  }) => TextField(
    key: key,
    controller: controller,
    keyboardType: const TextInputType.numberWithOptions(
      decimal: true,
      signed: true,
    ),
    inputFormatters: [
      FilteringTextInputFormatter.allow(RegExp(r'[0-9.,\-]')),
    ],
    style: const TextStyle(fontSize: 12),
    decoration: InputDecoration(
      labelText: label,
      labelStyle: const TextStyle(fontSize: 12, color: Color(0xFF64748B)),
      hintText: context.l10n.d('geen'),
      isDense: true,
      contentPadding: const EdgeInsets.symmetric(horizontal: 8, vertical: 10),
      border: const OutlineInputBorder(),
    ),
  );
  Widget _headerHint(String text) => Padding(
    padding: const EdgeInsets.only(left: 4, bottom: 4),
    child: Text(
@ -413,6 +813,40 @@ class _ChartEditorState extends State<ChartEditor> {
    ),
  );
  Widget _sortButton({required int? column, required bool enabled}) {
    return PopupMenuButton<bool>(
      key: ValueKey('chart-sort-${column ?? 'label'}'),
      enabled: enabled,
      tooltip: context.l10n.d('Sorteren'),
      icon: const Icon(Icons.sort, size: 15, color: Color(0xFF64748B)),
      padding: EdgeInsets.zero,
      constraints: const BoxConstraints(minWidth: 24, minHeight: 28),
      itemBuilder: (context) => [
        PopupMenuItem(
          value: true,
          child: Text(context.l10n.d('Oplopend sorteren')),
        ),
        PopupMenuItem(
          value: false,
          child: Text(context.l10n.d('Aflopend sorteren')),
        ),
      ],
      onSelected: (ascending) =>
          _sortRows(column: column, ascending: ascending),
    );
  }
  Widget _colorDot(String hex) => Container(
    width: 16,
    height: 16,
    decoration: BoxDecoration(
      color: Color(int.parse(hex.substring(1), radix: 16) | 0xFF000000),
      shape: BoxShape.circle,
      border: Border.all(color: Colors.white, width: 1.5),
      boxShadow: const [BoxShadow(color: Color(0x330F172A), blurRadius: 2)],
    ),
  );
  Widget _cell({
    required Key key,
    required String value,
@ -420,6 +854,7 @@ class _ChartEditorState extends State<ChartEditor> {
    required ValueChanged<String> onChanged,
    bool number = false,
    bool bold = false,
    bool muted = false,
  }) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 2),
@ -440,17 +875,24 @@ class _ChartEditorState extends State<ChartEditor> {
        style: TextStyle(
          fontSize: 12,
          fontWeight: bold ? FontWeight.w600 : FontWeight.normal,
          color: muted ? const Color(0xFF64748B) : null,
        ),
-        decoration: const InputDecoration(
+        decoration: InputDecoration(
          isDense: true,
-          contentPadding: EdgeInsets.symmetric(horizontal: 8, vertical: 8),
+          filled: muted,
-          border: OutlineInputBorder(),
+          fillColor: muted ? const Color(0xFFF1F5F9) : null,
          contentPadding: const EdgeInsets.symmetric(
            horizontal: 8,
            vertical: 8,
          ),
          border: const OutlineInputBorder(),
        ),
      ),
    );
  }
-  Widget _iconBtn(IconData icon, VoidCallback onTap) => IconButton(
+  Widget _iconBtn(IconData icon, VoidCallback? onTap, {Key? key}) => IconButton(
    key: key,
    onPressed: onTap,
    icon: Icon(icon, size: 14),
    color: const Color(0xFF94A3B8),
--- a/lib/widgets/presentation/audience_window.dart
+++ b/lib/widgets/presentation/audience_window.dart
@ -168,6 +168,7 @@ class _AudienceWindowAppState extends State<AudienceWindowApp> {
                  slideNumber: _index + 1,
                  slideCount: _slides.length,
                  tlp: _tlp,
                  presentationMode: true,
                  enableMedia: true,
                  autoplayMedia: true,
                  // Audio finishing on the beamer drives the presenter's
--- a/lib/widgets/presentation/fullscreen_presenter.dart
+++ b/lib/widgets/presentation/fullscreen_presenter.dart
@ -1288,6 +1288,7 @@ class _FullscreenPresenterState extends State<FullscreenPresenter> {
                  slideNumber: _index + 1,
                  slideCount: widget.slides.length,
                  tlp: widget.tlp,
                  presentationMode: true,
                  // Tijdens het presenteren speelt media en starten audio/video
                  // vanzelf; het audio-einde stuurt de auto-advance aan. In dual-
                  // schermmodus speelt de media op het beamervenster, niet hier,
@ -1411,6 +1412,7 @@ class _FullscreenPresenterState extends State<FullscreenPresenter> {
                              slide: nextSlide,
                              projectPath: widget.projectPath,
                              themeProfile: widget.themeProfile,
                              presentationMode: true,
                            ),
                          )
                        : Container(
--- a/lib/widgets/slides/slide_preview.dart
+++ b/lib/widgets/slides/slide_preview.dart
--- a/test/app_localizations_test.dart
+++ b/test/app_localizations_test.dart
@ -50,6 +50,7 @@ void main() {
      'SLIDES',
      'Slide',
      'slide',
      'Spider',
    };
    final expression = RegExp(r'''\.d\(\s*('(?:\\.|[^'])*'|"(?:\\.|[^"])*")''');
    final files = Directory('lib')
--- a/test/chart_editor_test.dart
+++ b/test/chart_editor_test.dart
@ -0,0 +1,166 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:ocideck/models/chart.dart';
 import 'package:ocideck/models/slide.dart';
 import 'package:ocideck/widgets/editors/chart_editor.dart';
 Widget _host(Slide slide, ValueChanged<Slide> onUpdate) {
  return MaterialApp(
    home: Scaffold(
      body: SizedBox(
        width: 900,
        height: 650,
        child: ChartEditor(slide: slide, onUpdate: onUpdate),
      ),
    ),
  );
 }
 void main() {
  testWidgets('chart grid fills the available editor width', (tester) async {
    const spec = ChartSpec(
      x: ['A', 'B'],
      series: [
        ChartSeries(name: 'Waarde', data: [10, 20]),
      ],
    );
    final slide = Slide.create(
      SlideType.chart,
    ).copyWith(customMarkdown: spec.toBlock());
    await tester.pumpWidget(_host(slide, (_) {}));
    await tester.pump();
    final gridWidth = tester
        .getSize(find.byKey(const ValueKey('chart-grid')))
        .width;
    expect(gridWidth, greaterThanOrEqualTo(760));
    expect(tester.takeException(), isNull);
  });
  testWidgets('moving a row keeps its values and color together', (
    tester,
  ) async {
    const spec = ChartSpec(
      x: ['B', 'A'],
      rowColors: ['#EF4444', '#10B981'],
      series: [
        ChartSeries(name: 'Waarde', data: [20, 10]),
      ],
    );
    var updated = Slide.create(
      SlideType.chart,
    ).copyWith(customMarkdown: spec.toBlock());
    await tester.pumpWidget(_host(updated, (slide) => updated = slide));
    await tester.tap(find.byKey(const ValueKey('chart-row-up-1')));
    await tester.pump();
    final result = ChartSpec.parse(updated.customMarkdown);
    expect(result.x, ['A', 'B']);
    expect(result.rowColors, ['#10B981', '#EF4444']);
    expect(result.series.single.data, [10, 20]);
  });
  testWidgets('sorting a value column moves complete rows', (tester) async {
    const spec = ChartSpec(
      x: ['A', 'B', 'C'],
      rowColors: ['#003399', '#FFCC00', '#EF4444'],
      series: [
        ChartSeries(name: 'Waarde', data: [30, 10, 20]),
      ],
    );
    var updated = Slide.create(
      SlideType.chart,
    ).copyWith(customMarkdown: spec.toBlock());
    await tester.pumpWidget(_host(updated, (slide) => updated = slide));
    await tester.tap(find.byKey(const ValueKey('chart-sort-0')));
    await tester.pumpAndSettle();
    await tester.tap(find.text('Oplopend sorteren'));
    await tester.pump();
    final result = ChartSpec.parse(updated.customMarkdown);
    expect(result.x, ['B', 'C', 'A']);
    expect(result.rowColors, ['#FFCC00', '#EF4444', '#003399']);
    expect(result.series.single.data, [10, 20, 30]);
  });
  testWidgets('pie dims the third series without disabling its input', (
    tester,
  ) async {
    const spec = ChartSpec(
      type: ChartType.pie,
      x: ['A'],
      series: [
        ChartSeries(name: 'Een', data: [1]),
        ChartSeries(name: 'Twee', data: [2]),
        ChartSeries(name: 'Drie', data: [3]),
      ],
    );
    final slide = Slide.create(
      SlideType.chart,
    ).copyWith(customMarkdown: spec.toBlock());
    await tester.pumpWidget(_host(slide, (_) {}));
    await tester.pump();
    final column = tester.widget<Container>(
      find.byKey(const ValueKey('chart-series-column-2')),
    );
    expect(column.color, const Color(0xFFE2E8F0));
    final input = tester.widget<TextFormField>(
      find.byKey(const ValueKey('v-0-0-2')),
    );
    expect(input.enabled, isTrue);
    expect(tester.takeException(), isNull);
  });
  testWidgets('bound fields are offered for bar/line and emit min/max', (
    tester,
  ) async {
    const spec = ChartSpec(
      type: ChartType.bar,
      x: ['A'],
      series: [
        ChartSeries(name: 'Waarde', data: [10]),
      ],
    );
    var updated = Slide.create(
      SlideType.chart,
    ).copyWith(customMarkdown: spec.toBlock());
    await tester.pumpWidget(_host(updated, (slide) => updated = slide));
    await tester.pump();
    expect(find.byKey(const ValueKey('chart-min-bound')), findsOneWidget);
    expect(find.byKey(const ValueKey('chart-max-bound')), findsOneWidget);
    await tester.enterText(
      find.byKey(const ValueKey('chart-max-bound')),
      '20',
    );
    await tester.pump();
    expect(ChartSpec.parse(updated.customMarkdown).maxBound, 20);
  });
  testWidgets('bound fields are hidden for a pie chart', (tester) async {
    const spec = ChartSpec(
      type: ChartType.pie,
      x: ['A'],
      series: [
        ChartSeries(name: 'Een', data: [1]),
      ],
    );
    final slide = Slide.create(
      SlideType.chart,
    ).copyWith(customMarkdown: spec.toBlock());
    await tester.pumpWidget(_host(slide, (_) {}));
    await tester.pump();
    expect(find.byKey(const ValueKey('chart-min-bound')), findsNothing);
    expect(find.byKey(const ValueKey('chart-max-bound')), findsNothing);
  });
 }
--- a/test/chart_preview_test.dart
+++ b/test/chart_preview_test.dart
@ -0,0 +1,539 @@
 import 'package:fl_chart/fl_chart.dart';
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:ocideck/models/chart.dart';
 import 'package:ocideck/models/slide.dart';
 import 'package:ocideck/widgets/slides/slide_preview.dart';
 Widget _host(ChartSpec spec, {bool presentationMode = false}) {
  return MaterialApp(
    home: Scaffold(
      body: Center(
        child: SizedBox(
          width: 800,
          height: 450,
          child: SlidePreviewWidget(
            slide: Slide.create(
              SlideType.chart,
            ).copyWith(customMarkdown: spec.toBlock()),
            presentationMode: presentationMode,
          ),
        ),
      ),
    ),
  );
 }
 void main() {
  testWidgets('chart title stays above the plot area', (tester) async {
    const spec = ChartSpec(
      type: ChartType.bar,
      title: 'Omzet per kwartaal',
      x: ['Q1', 'Q2'],
      series: [
        ChartSeries(name: '2026', data: [10, 14]),
      ],
    );
    await tester.pumpWidget(_host(spec));
    await tester.pump();
    final titleBottom = tester.getBottomLeft(find.text(spec.title)).dy;
    final plotTop = tester.getTopLeft(find.byType(BarChart)).dy;
    expect(titleBottom, lessThan(plotTop));
    expect(tester.takeException(), isNull);
  });
  testWidgets('pie renders one chart per series with labels as slices', (
    tester,
  ) async {
    const spec = ChartSpec(
      type: ChartType.pie,
      title: 'Verdeling',
      x: ['Team A', 'Team B'],
      series: [
        ChartSeries(name: 'Gereed', data: [70, 40], color: '#10B981'),
        ChartSeries(name: 'Open', data: [30, 60], color: '#EF4444'),
      ],
    );
    await tester.pumpWidget(_host(spec));
    await tester.pump();
    expect(find.byType(PieChart), findsNWidgets(2));
    expect(find.text('Team A'), findsOneWidget);
    expect(find.text('Team B'), findsOneWidget);
    expect(find.text('Gereed'), findsOneWidget);
    expect(find.text('Open'), findsOneWidget);
    final pieRect = tester.getRect(find.byType(PieChart).first);
    final titleRect = tester.getRect(find.text('Gereed'));
    expect(titleRect.left, greaterThan(pieRect.center.dx));
    expect(tester.takeException(), isNull);
  });
  testWidgets('bar chart uses most of the available vertical plot area', (
    tester,
  ) async {
    const spec = ChartSpec(
      type: ChartType.bar,
      title: 'Compacte titel',
      x: ['A', 'B', 'C'],
      series: [
        ChartSeries(name: 'Waarde', data: [10, 20, 15]),
      ],
    );
    await tester.pumpWidget(_host(spec));
    await tester.pump();
    expect(tester.getSize(find.byType(BarChart)).height, greaterThan(260));
    expect(tester.takeException(), isNull);
  });
  testWidgets('chart surface fills the remaining slide height', (tester) async {
    const spec = ChartSpec(
      type: ChartType.bar,
      title: 'Titel',
      x: ['A', 'B'],
      series: [
        ChartSeries(name: 'Waarde', data: [10, 20]),
      ],
    );
    await tester.pumpWidget(_host(spec));
    await tester.pump();
    final slide = tester.getRect(find.byType(SlidePreviewWidget));
    final surface = tester.getRect(find.byKey(const ValueKey('chart-surface')));
    expect(surface.height, greaterThan(slide.height * 0.72));
    expect(slide.bottom - surface.bottom, lessThan(slide.height * 0.04));
    expect(tester.takeException(), isNull);
  });
  testWidgets('bar and line hover tooltips show labels and values', (
    tester,
  ) async {
    const barSpec = ChartSpec(
      type: ChartType.bar,
      x: ['Januari'],
      series: [
        ChartSeries(name: 'Omzet', data: [42]),
      ],
    );
    await tester.pumpWidget(_host(barSpec));
    final bar = tester.widget<BarChart>(find.byType(BarChart));
    final barItem = bar.data.barTouchData.touchTooltipData.getTooltipItem(
      bar.data.barGroups.single,
      0,
      bar.data.barGroups.single.barRods.single,
      0,
    );
    expect(barItem?.text, 'Januari\nOmzet: 42');
    const lineSpec = ChartSpec(
      type: ChartType.line,
      x: ['Februari'],
      series: [
        ChartSeries(name: 'Bezoekers', data: [17.5]),
      ],
    );
    await tester.pumpWidget(_host(lineSpec));
    final line = tester.widget<LineChart>(find.byType(LineChart));
    final spot = LineBarSpot(
      line.data.lineBarsData.single,
      0,
      line.data.lineBarsData.single.spots.single,
    );
    final lineItems = line.data.lineTouchData.touchTooltipData.getTooltipItems([
      spot,
    ]);
    expect(lineItems.single?.text, 'Februari\nBezoekers: 17.5');
  });
  testWidgets('line tooltip uses true distance and shows every nearby dot', (
    tester,
  ) async {
    const spec = ChartSpec(
      type: ChartType.line,
      x: ['Q1'],
      series: [
        ChartSeries(name: 'Alpha', data: [10], color: '#2563EB'),
        ChartSeries(name: 'Beta', data: [10], color: '#EF4444'),
        ChartSeries(name: 'Gamma', data: [10], color: '#10B981'),
      ],
    );
    await tester.pumpWidget(_host(spec));
    final line = tester.widget<LineChart>(find.byType(LineChart));
    final touch = line.data.lineTouchData;
    // Proximity is Euclidean (x AND y), not the x-only default.
    expect(touch.distanceCalculator(Offset.zero, const Offset(3, 4)), 5);
    expect(touch.touchSpotThreshold, greaterThan(0));
    final spots = [
      for (var i = 0; i < 3; i++)
        LineBarSpot(
          line.data.lineBarsData[i],
          i,
          line.data.lineBarsData[i].spots.single,
        ),
    ];
    final items = touch.touchTooltipData.getTooltipItems(spots);
    // All overlapping dots are shown (none filtered out).
    expect(items.length, 3);
    expect(items.whereType<LineTooltipItem>().length, 3);
    expect(items[0]?.text, 'Q1\nAlpha: 10');
    expect(items[2]?.text, 'Q1\nGamma: 10');
    // A crowded stack uses a smaller font than a single tooltip.
    final single = touch.touchTooltipData.getTooltipItems([spots.first]);
    expect(
      items[0]!.textStyle.fontSize!,
      lessThan(single.single!.textStyle.fontSize!),
    );
  });
  testWidgets('pie hover shows the underlying category value', (tester) async {
    const spec = ChartSpec(
      type: ChartType.pie,
      x: ['Gereed', 'Open'],
      series: [
        ChartSeries(name: 'Status', data: [70, 30]),
      ],
    );
    await tester.pumpWidget(_host(spec));
    await tester.pump();
    final pie = tester.widget<PieChart>(find.byType(PieChart));
    final section = pie.data.sections.first;
    pie.data.pieTouchData.touchCallback!(
      const FlPointerHoverEvent(PointerHoverEvent()),
      PieTouchResponse(
        touchLocation: Offset.zero,
        touchedSection: PieTouchedSection(section, 0, 0, section.radius),
      ),
    );
    await tester.pump();
    expect(find.byKey(const ValueKey('pie-hover-tooltip')), findsOneWidget);
    expect(find.text('Gereed: 70'), findsOneWidget);
  });
  testWidgets('bar chart draws the configured min/max bound lines', (
    tester,
  ) async {
    const spec = ChartSpec(
      type: ChartType.bar,
      x: ['Q1'],
      series: [
        ChartSeries(name: 'Omzet', data: [10]),
      ],
      minBound: 5,
      maxBound: 20,
    );
    await tester.pumpWidget(_host(spec));
    await tester.pump();
    final bar = tester.widget<BarChart>(find.byType(BarChart));
    final ys = bar.data.extraLinesData.horizontalLines.map((l) => l.y).toList();
    expect(ys, containsAll(<double>[5, 20]));
    // The max bound widens the axis so the line stays inside the plot.
    expect(bar.data.maxY, greaterThanOrEqualTo(20));
    expect(tester.takeException(), isNull);
  });
  testWidgets('hovering a legend entry fades the other series', (tester) async {
    const spec = ChartSpec(
      type: ChartType.line,
      x: ['Q1', 'Q2'],
      series: [
        ChartSeries(name: 'Alpha', data: [10, 12], color: '#2563EB'),
        ChartSeries(name: 'Beta', data: [8, 9], color: '#EF4444'),
      ],
    );
    await tester.pumpWidget(_host(spec));
    await tester.pump();
    var line = tester.widget<LineChart>(find.byType(LineChart));
    expect(line.data.lineBarsData[0].color!.a, 1.0);
    expect(line.data.lineBarsData[1].color!.a, 1.0);
    final gesture = await tester.createGesture(kind: PointerDeviceKind.mouse);
    await gesture.addPointer(location: Offset.zero);
    addTearDown(gesture.removePointer);
    await gesture.moveTo(tester.getCenter(find.text('Alpha')));
    await tester.pumpAndSettle();
    line = tester.widget<LineChart>(find.byType(LineChart));
    expect(line.data.lineBarsData[0].color!.a, 1.0); // hovered stays solid
    expect(line.data.lineBarsData[1].color!.a, lessThan(1.0)); // other fades
    expect(tester.takeException(), isNull);
  });
  testWidgets('radar chart renders a polygon per series with axis labels', (
    tester,
  ) async {
    const spec = ChartSpec(
      type: ChartType.radar,
      x: ['Snelheid', 'Kracht', 'Uithouding'],
      series: [
        ChartSeries(name: 'Alpha', data: [3, 4, 5], color: '#2563EB'),
        ChartSeries(name: 'Beta', data: [5, 2, 3], color: '#EF4444'),
      ],
    );
    await tester.pumpWidget(_host(spec));
    await tester.pump();
    final radar = tester.widget<RadarChart>(find.byType(RadarChart));
    // Two visible series plus one invisible scale anchor.
    expect(radar.data.dataSets.length, 3);
    expect(radar.data.dataSets.first.dataEntries.map((e) => e.value), [3, 4, 5]);
    expect(radar.data.dataSets.last.fillColor, Colors.transparent);
    // The spoke labels are supplied through getTitle (canvas-painted).
    expect(radar.data.getTitle!(0, 0).text, 'Snelheid');
    expect(radar.data.getTitle!(2, 0).text, 'Uithouding');
    // The series legend is shown as real text widgets.
    expect(find.text('Alpha'), findsOneWidget);
    expect(find.text('Beta'), findsOneWidget);
    expect(tester.takeException(), isNull);
  });
  testWidgets('radar honours an explicit min/max scale with even ticks', (
    tester,
  ) async {
    const spec = ChartSpec(
      type: ChartType.radar,
      x: ['A', 'B', 'C', 'D'],
      series: [
        ChartSeries(name: 'Score', data: [2, 4, 3, 5]),
      ],
      minBound: 0,
      maxBound: 10,
    );
    await tester.pumpWidget(_host(spec));
    await tester.pump();
    final radar = tester.widget<RadarChart>(find.byType(RadarChart));
    expect(radar.data.isMinValueAtCenter, isTrue);
    // The hidden anchor pins the scale to [0, 10].
    final anchor = radar.data.dataSets.last.dataEntries.map((e) => e.value);
    expect(anchor.reduce((a, b) => a < b ? a : b), 0);
    expect(anchor.reduce((a, b) => a > b ? a : b), 10);
    // The scale is shown in the side legend (0..10), not painted in the chart.
    expect(radar.data.ticksTextStyle?.color, Colors.transparent);
    expect(find.text('0'), findsWidgets);
    expect(find.text('10'), findsOneWidget);
    expect(tester.takeException(), isNull);
  });
  testWidgets('radar shows a tooltip for the hovered point', (tester) async {
    const spec = ChartSpec(
      type: ChartType.radar,
      x: ['Snelheid', 'Kracht', 'Uithouding'],
      series: [
        ChartSeries(name: 'Alpha', data: [3, 4, 5]),
        ChartSeries(name: 'Beta', data: [5, 2, 3]),
      ],
    );
    await tester.pumpWidget(_host(spec));
    await tester.pump();
    final radar = tester.widget<RadarChart>(find.byType(RadarChart));
    final touch = radar.data.radarTouchData;
    expect(touch.enabled, isTrue);
    // Simulate hovering the second axis of the Beta series.
    final dataSet = radar.data.dataSets[1];
    final entry = dataSet.dataEntries[1];
    touch.touchCallback!(
      const FlPointerHoverEvent(PointerHoverEvent()),
      RadarTouchResponse(
        touchLocation: const Offset(20, 20),
        touchedSpot: RadarTouchedSpot(
          dataSet,
          1,
          entry,
          1,
          const FlSpot(1, 2),
          const Offset(20, 20),
        ),
      ),
    );
    await tester.pump();
    expect(find.text('Kracht\nBeta: 2'), findsOneWidget);
    expect(tester.takeException(), isNull);
  });
  testWidgets('radar ignores touches on the invisible scale anchor', (
    tester,
  ) async {
    const spec = ChartSpec(
      type: ChartType.radar,
      x: ['A', 'B', 'C'],
      series: [
        ChartSeries(name: 'Alpha', data: [3, 4, 5]),
      ],
    );
    await tester.pumpWidget(_host(spec));
    await tester.pump();
    final radar = tester.widget<RadarChart>(find.byType(RadarChart));
    final anchorIndex = radar.data.dataSets.length - 1; // the anchor dataset
    final anchor = radar.data.dataSets[anchorIndex];
    radar.data.radarTouchData.touchCallback!(
      const FlPointerHoverEvent(PointerHoverEvent()),
      RadarTouchResponse(
        touchLocation: Offset.zero,
        touchedSpot: RadarTouchedSpot(
          anchor,
          anchorIndex,
          anchor.dataEntries.first,
          0,
          const FlSpot(0, 0),
          Offset.zero,
        ),
      ),
    );
    await tester.pump();
    // No tooltip for the anchor: only the legend value "5" exists.
    expect(find.textContaining(': '), findsNothing);
    expect(tester.takeException(), isNull);
  });
  testWidgets('radar chart asks for at least three labels', (tester) async {
    const spec = ChartSpec(
      type: ChartType.radar,
      x: ['Een', 'Twee'],
      series: [
        ChartSeries(name: 'Alpha', data: [3, 4]),
      ],
    );
    await tester.pumpWidget(_host(spec));
    await tester.pump();
    expect(find.byType(RadarChart), findsNothing);
    expect(
      find.text('Een spider-diagram heeft minstens drie labels nodig'),
      findsOneWidget,
    );
    expect(tester.takeException(), isNull);
  });
  testWidgets('presentation mode enlarges chart labels', (tester) async {
    const spec = ChartSpec(
      type: ChartType.bar,
      x: ['Categorie'],
      series: [
        ChartSeries(name: 'Waarde', data: [10]),
      ],
    );
    await tester.pumpWidget(_host(spec));
    final normal = tester.widget<Text>(find.text('Categorie').first);
    final normalSize = normal.style!.fontSize!;
    expect(normalSize, lessThanOrEqualTo(12));
    await tester.pumpWidget(_host(spec, presentationMode: true));
    final presented = tester.widget<Text>(find.text('Categorie').first);
    expect(presented.style!.fontSize!, greaterThan(normalSize));
  });
  testWidgets('dense axis labels are thinned and stay inside the slide', (
    tester,
  ) async {
    const labels = [
      'Januari bijzonder lang',
      'Februari bijzonder lang',
      'Maart bijzonder lang',
      'April bijzonder lang',
      'Mei bijzonder lang',
      'Juni bijzonder lang',
      'Juli bijzonder lang',
      'Augustus bijzonder lang',
      'September bijzonder lang',
      'Oktober bijzonder lang',
      'November bijzonder lang',
      'December bijzonder lang',
    ];
    const spec = ChartSpec(
      type: ChartType.line,
      x: labels,
      series: [
        ChartSeries(
          name: 'Waarde',
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        ),
      ],
    );
    await tester.pumpWidget(_host(spec));
    await tester.pump();
    final visibleLabels = [
      for (final label in labels)
        if (find.text(label).evaluate().isNotEmpty) label,
    ];
    expect(visibleLabels.length, lessThanOrEqualTo(8));
    final slideRect = tester.getRect(find.byType(SlidePreviewWidget));
    for (final label in visibleLabels) {
      final rect = tester.getRect(find.text(label).first);
      expect(slideRect.contains(rect.topLeft), isTrue);
      expect(slideRect.contains(rect.bottomRight), isTrue);
    }
    expect(tester.takeException(), isNull);
  });
  testWidgets(
    'pie shows at most two series and keeps labels inside the slide',
    (tester) async {
      const spec = ChartSpec(
        type: ChartType.pie,
        title: 'Veel gegevens',
        x: [
          'Een uitzonderlijk lang eerste label',
          'Een uitzonderlijk lang tweede label',
          'Een uitzonderlijk lang derde label',
          'Een uitzonderlijk lang vierde label',
          'Een uitzonderlijk lang vijfde label',
          'Een uitzonderlijk lang zesde label',
        ],
        series: [
          ChartSeries(name: 'Een', data: [1, 2, 3, 4, 5, 6]),
          ChartSeries(name: 'Twee', data: [2, 3, 4, 5, 6, 7]),
          ChartSeries(name: 'Drie', data: [3, 4, 5, 6, 7, 8]),
          ChartSeries(name: 'Vier', data: [4, 5, 6, 7, 8, 9]),
          ChartSeries(name: 'Vijf', data: [5, 6, 7, 8, 9, 10]),
          ChartSeries(name: 'Zes', data: [6, 7, 8, 9, 10, 11]),
        ],
      );
      await tester.pumpWidget(_host(spec));
      await tester.pump();
      expect(find.byType(PieChart), findsNWidgets(2));
      expect(find.text('Drie'), findsNothing);
      final legendTop = tester.getTopLeft(find.text(spec.x.first)).dy;
      for (final chart in tester.widgetList<PieChart>(find.byType(PieChart))) {
        final box = tester.renderObject<RenderBox>(find.byWidget(chart));
        final bottom = box.localToGlobal(Offset(0, box.size.height)).dy;
        expect(bottom, lessThanOrEqualTo(legendTop));
      }
      final slideRect = tester.getRect(find.byType(SlidePreviewWidget));
      for (final label in spec.x) {
        final rect = tester.getRect(find.text(label));
        expect(slideRect.contains(rect.topLeft), isTrue);
        expect(slideRect.contains(rect.bottomRight), isTrue);
      }
      expect(tester.takeException(), isNull);
    },
  );
 }
--- a/test/chart_test.dart
+++ b/test/chart_test.dart
@ -2,6 +2,10 @@ import 'package:flutter_test/flutter_test.dart';
 import 'package:ocideck/models/chart.dart';
 void main() {
  test('chart palette starts with the EU flag colors', () {
    expect(chartColorPalette.take(2), ['#003399', '#FFCC00']);
  });
  group('parseCsv', () {
    test('reads header series names and labelled rows', () {
      final (x, series) = parseCsv('\n, 2025, 2026\nQ1, 10, 12\nQ2, 14, 9\n');
@ -24,16 +28,19 @@ void main() {
        type: ChartType.line,
        title: 'Omzet',
        x: ['Q1', 'Q2'],
        rowColors: ['#003399', '#FFCC00'],
        series: [
-          ChartSeries(name: '2025', data: [10, 14]),
+          ChartSeries(name: '2025', data: [10, 14], color: '#EF4444'),
        ],
      );
      final back = ChartSpec.parse(spec.toBlock());
      expect(back.type, ChartType.line);
      expect(back.title, 'Omzet');
      expect(back.x, ['Q1', 'Q2']);
      expect(back.rowColors, ['#003399', '#FFCC00']);
      expect(back.series.single.name, '2025');
      expect(back.series.single.data, [10, 14]);
      expect(back.series.single.color, '#EF4444');
      expect(back.hasInlineData, isTrue);
    });
@ -43,13 +50,16 @@ void main() {
        title: 'Omzet',
        source: 'data/omzet.csv',
        x: ['Q1', 'Q2'],
        rowColors: ['#003399', '#FFCC00'],
        series: [
-          ChartSeries(name: '2025', data: [10, 14]),
+          ChartSeries(name: '2025', data: [10, 14], color: '#10B981'),
        ],
      );
      final stored = ChartSpec.parse(spec.toBlock(forStorage: true));
      expect(stored.source, 'data/omzet.csv');
      expect(stored.hasInlineData, isFalse);
      expect(stored.rowColors, ['#003399', '#FFCC00']);
      expect(stored.series.single.color, '#10B981');
      // The in-app/full form keeps the data.
      final full = ChartSpec.parse(spec.toBlock());
@ -57,12 +67,35 @@ void main() {
    });
    test('withCsv fills x/series and keeps the source', () {
-      const spec = ChartSpec(type: ChartType.bar, source: 'data/o.csv');
+      const spec = ChartSpec(
        type: ChartType.bar,
        source: 'data/o.csv',
        rowColors: ['#003399', '#FFCC00'],
        series: [ChartSeries(name: 'oud', data: [], color: '#10B981')],
      );
      final filled = spec.withCsv(',A,B\nJan,1,2\nFeb,3,4');
      expect(filled.source, 'data/o.csv');
      expect(filled.x, ['Jan', 'Feb']);
      expect(filled.series.map((s) => s.name), ['A', 'B']);
      expect(filled.series[1].data, [2, 4]);
      expect(filled.series[0].color, '#10B981');
      expect(filled.series[1].color, isNull);
      expect(filled.rowColors, ['#003399', '#FFCC00']);
    });
    test('invalid colors are ignored while valid colors are normalized', () {
      final valid = ChartSeries.fromJson({
        'name': 'A',
        'data': [1],
        'color': 'ef4444',
      });
      final invalid = ChartSeries.fromJson({
        'name': 'B',
        'data': [2],
        'color': 'red',
      });
      expect(valid.color, '#EF4444');
      expect(invalid.color, isNull);
    });
    test('parse is tolerant of malformed JSON', () {
@ -70,5 +103,71 @@ void main() {
      expect(spec.type, ChartType.bar);
      expect(spec.hasInlineData, isFalse);
    });
    test('round-trips optional min/max bound lines for bar/line', () {
      const spec = ChartSpec(
        type: ChartType.line,
        x: ['Q1'],
        series: [ChartSeries(name: 'A', data: [10])],
        minBound: 5,
        maxBound: 20,
      );
      final back = ChartSpec.parse(spec.toBlock());
      expect(back.minBound, 5);
      expect(back.maxBound, 20);
    });
    test('bounds are dropped from a pie chart', () {
      const spec = ChartSpec(
        type: ChartType.pie,
        x: ['Q1'],
        series: [ChartSeries(name: 'A', data: [10])],
        minBound: 5,
        maxBound: 20,
      );
      expect(spec.supportsBounds, isFalse);
      final back = ChartSpec.parse(spec.toBlock());
      expect(back.minBound, isNull);
      expect(back.maxBound, isNull);
    });
    test('round-trips a spider/radar chart type', () {
      const spec = ChartSpec(
        type: ChartType.radar,
        x: ['Snelheid', 'Kracht', 'Uithouding'],
        series: [
          ChartSeries(name: 'A', data: [3, 4, 5]),
        ],
      );
      final back = ChartSpec.parse(spec.toBlock());
      expect(back.type, ChartType.radar);
      expect(back.x, ['Snelheid', 'Kracht', 'Uithouding']);
      expect(back.series.single.data, [3, 4, 5]);
    });
    test('radar keeps bounds as a scale but never draws bound lines', () {
      const spec = ChartSpec(
        type: ChartType.radar,
        x: ['A', 'B', 'C'],
        series: [ChartSeries(name: 'A', data: [1, 2, 3])],
        minBound: 1,
        maxBound: 5,
      );
      expect(spec.supportsBounds, isTrue);
      expect(spec.supportsBoundLines, isFalse);
      final back = ChartSpec.parse(spec.toBlock());
      expect(back.minBound, 1);
      expect(back.maxBound, 5);
    });
    test('bar/line draw bound lines but pie does not', () {
      const bar = ChartSpec(type: ChartType.bar);
      const line = ChartSpec(type: ChartType.line);
      const pie = ChartSpec(type: ChartType.pie);
      expect(bar.supportsBoundLines, isTrue);
      expect(line.supportsBoundLines, isTrue);
      expect(pie.supportsBoundLines, isFalse);
      expect(pie.supportsBounds, isFalse);
    });
  });
 }
--- a/test/code_preview_test.dart
+++ b/test/code_preview_test.dart
@ -0,0 +1,157 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_highlight/flutter_highlight.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:ocideck/models/settings.dart';
 import 'package:ocideck/models/slide.dart';
 import 'package:ocideck/widgets/slides/slide_preview.dart';
 Widget _host(Slide slide, ThemeProfile profile) {
  return Directionality(
    textDirection: TextDirection.ltr,
    child: Center(
      child: SizedBox(
        width: 800,
        height: 450,
        child: SlidePreviewWidget(slide: slide, themeProfile: profile),
      ),
    ),
  );
 }
 Color _hex(String hex) =>
    Color(int.parse(hex.substring(1), radix: 16) | 0xFF000000);
 void main() {
  testWidgets('code slide paints the themed background colour', (tester) async {
    final slide = Slide.create(
      SlideType.code,
    ).copyWith(codeLanguage: 'dart', customMarkdown: 'void main() {}');
    const profile = ThemeProfile(
      codeBackgroundColor: '#000000',
      codeTextColor: '#33FF33',
    );
    await tester.pumpWidget(_host(slide, profile));
    await tester.pump();
    // The code panel uses the themed background somewhere in its decoration.
    final painted = tester.widgetList<Container>(find.byType(Container)).where((
      c,
    ) {
      final d = c.decoration;
      return d is BoxDecoration && d.color == _hex('#000000');
    });
    expect(painted, isNotEmpty);
    expect(tester.takeException(), isNull);
  });
  testWidgets('syntax highlighting on uses HighlightView for a known language', (
    tester,
  ) async {
    final slide = Slide.create(
      SlideType.code,
    ).copyWith(codeLanguage: 'dart', customMarkdown: 'void main() {}');
    const profile = ThemeProfile(codeHighlightSyntax: true);
    await tester.pumpWidget(_host(slide, profile));
    await tester.pump();
    expect(find.byType(HighlightView), findsOneWidget);
  });
  testWidgets('syntax highlighting off renders monochrome (CRT) text', (
    tester,
  ) async {
    final slide = Slide.create(
      SlideType.code,
    ).copyWith(codeLanguage: 'dart', customMarkdown: 'void main() {}');
    const profile = ThemeProfile(
      codeBackgroundColor: '#000000',
      codeTextColor: '#33FF33',
      codeHighlightSyntax: false,
    );
    await tester.pumpWidget(_host(slide, profile));
    await tester.pump();
    // No per-token highlighting; the code is one flat colour.
    expect(find.byType(HighlightView), findsNothing);
    final codeText = tester.widget<Text>(find.text('void main() {}'));
    expect(codeText.style?.color, _hex('#33FF33'));
    expect(tester.takeException(), isNull);
  });
  testWidgets('short code is enlarged to use the space; long code shrinks', (
    tester,
  ) async {
    const profile = ThemeProfile(codeHighlightSyntax: false);
    const short = 'x';
    await tester.pumpWidget(
      _host(
        Slide.create(SlideType.code).copyWith(customMarkdown: short),
        profile,
      ),
    );
    await tester.pump();
    final shortSize = tester.widget<Text>(find.text(short)).style!.fontSize!;
    final long = List.generate(
      40,
      (i) => 'final someRatherLongVariableName$i = compute($i);',
    ).join('\n');
    await tester.pumpWidget(
      _host(
        Slide.create(SlideType.code).copyWith(customMarkdown: long),
        profile,
      ),
    );
    await tester.pump();
    final longSize = tester.widget<Text>(find.text(long)).style!.fontSize!;
    // A tiny snippet is scaled up to fill; a big one is scaled down to fit.
    expect(longSize, lessThan(shortSize));
    expect(tester.takeException(), isNull);
  });
  testWidgets('the slide title sits above the code panel, not inside it', (
    tester,
  ) async {
    final slide = Slide.create(
      SlideType.code,
    ).copyWith(title: 'Voorbeeld', customMarkdown: 'print("hi")');
    const profile = ThemeProfile(
      titleTextColor: '#FFFFFF',
      titleBackgroundColor: '#1C2B47',
      codeBackgroundColor: '#000000',
      codeTextColor: '#33FF33',
      codeHighlightSyntax: false,
    );
    await tester.pumpWidget(_host(slide, profile));
    await tester.pump();
    // The title is rendered above the code panel rather than inside it.
    final titleBottom = tester.getBottomLeft(find.text('Voorbeeld')).dy;
    final codeTop = tester.getTopLeft(find.text('print("hi")')).dy;
    expect(titleBottom, lessThanOrEqualTo(codeTop));
    expect(tester.takeException(), isNull);
  });
  testWidgets('code uses the chosen monospace font family', (tester) async {
    final slide = Slide.create(
      SlideType.code,
    ).copyWith(customMarkdown: 'void main() {}');
    const profile = ThemeProfile(
      codeFontFamily: 'Courier New',
      codeHighlightSyntax: false,
    );
    await tester.pumpWidget(_host(slide, profile));
    await tester.pump();
    final codeText = tester.widget<Text>(find.text('void main() {}'));
    expect(codeText.style?.fontFamily, 'Courier New');
    expect(tester.takeException(), isNull);
  });
 }
--- a/test/deck_provider_test.dart
+++ b/test/deck_provider_test.dart
@ -1,4 +1,7 @@
 import 'dart:io';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:ocideck/models/deck.dart';
 import 'package:ocideck/models/settings.dart';
 import 'package:ocideck/models/slide.dart';
 import 'package:ocideck/services/file_service.dart';
@ -23,6 +26,36 @@ void main() {
    expect(n.state.isDirty, isTrue);
  });
  test('loadDeck resolves a relative logo for an unsaved recovered deck', () {
    final temp = Directory.systemTemp.createTempSync(
      'ocideck_recovered_logo_test_',
    );
    addTearDown(() => temp.deleteSync(recursive: true));
    final logo = File('${temp.path}/logos/client.png')
      ..createSync(recursive: true)
      ..writeAsBytesSync([1, 2, 3]);
    final md = MarkdownService();
    final file = FileService(
      md,
      ImageService(),
      () => const ThemeProfile(),
      homeDirectory: () => temp.path,
    );
    final notifier = DeckNotifier(md, file);
    notifier.loadDeck(
      Deck(
        title: 'Hersteld',
        themeProfile: const ThemeProfile(logoPath: 'logos/client.png'),
        slides: [Slide.create(SlideType.title)],
      ),
    );
    expect(notifier.state.filePath, isNull);
    expect(notifier.state.deck!.projectPath, isNull);
    expect(notifier.state.deck!.themeProfile.logoPath, logo.path);
  });
  test('addSlide inserts right after the given index', () {
    final n = _notifier()..newDeck('D');
    n.addSlide(SlideType.bullets); // appended -> index 1
--- a/test/file_service_test.dart
+++ b/test/file_service_test.dart
@ -37,4 +37,29 @@ void main() {
    expect(saved.themeProfile.logoPath, 'logos/client.png');
    expect(await File(p.join(temp.path, 'logos', 'client.png')).exists(), true);
  });
  test(
    'current theme resolves a relative logo from the home directory',
    () async {
      final temp = await Directory.systemTemp.createTemp(
        'ocideck_theme_logo_test_',
      );
      addTearDown(() async {
        if (await temp.exists()) await temp.delete(recursive: true);
      });
      final logo = File(p.join(temp.path, 'logos', 'client.png'));
      await logo.parent.create(recursive: true);
      await logo.writeAsBytes([1, 2, 3]);
      final service = FileService(
        MarkdownService(),
        ImageService(),
        () => const ThemeProfile(logoPath: 'logos/client.png'),
        homeDirectory: () => temp.path,
      );
      expect(service.currentThemeProfile.logoPath, logo.path);
    },
  );
 }
--- a/test/image_slides_preview_test.dart
+++ b/test/image_slides_preview_test.dart
@ -5,6 +5,7 @@ import 'dart:ui' as ui;
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:ocideck/models/settings.dart';
 import 'package:ocideck/models/slide.dart';
 import 'package:ocideck/widgets/slides/slide_preview.dart';
@ -51,6 +52,30 @@ Future<({int width, int height, Uint8List bytes})> _capture(
 }
 void main() {
  testWidgets('a missing small logo does not overflow its bounds', (
    tester,
  ) async {
    await tester.pumpWidget(
      MaterialApp(
        home: Scaffold(
          body: SizedBox(
            width: 800,
            child: SlidePreviewWidget(
              slide: Slide.create(SlideType.bullets),
              themeProfile: const ThemeProfile(
                logoPath: '/path/that/does/not/exist.png',
                logoSize: 36,
              ),
            ),
          ),
        ),
      ),
    );
    await tester.pumpAndSettle();
    expect(tester.takeException(), isNull);
  });
  testWidgets('twoImages paints both the left and right images', (
    tester,
  ) async {
--- a/test/marp_html_service_test.dart
+++ b/test/marp_html_service_test.dart
@ -98,6 +98,24 @@ void main() {}
    expect(html, isNot(contains('data:font/ttf;base64,')));
  });
  test('code blocks use the themed code colours in the export CSS', () async {
    final service = MarpHtmlService(
      loadAsset: _diskLoader,
      loadBytes: _diskBytes,
    );
    const theme = ThemeProfile(
      codeBackgroundColor: '#000000',
      codeTextColor: '#33FF33',
      codeFontFamily: 'Courier New',
    );
    final html = await service.build('```dart\nvoid main() {}\n```', theme: theme);
    expect(html, contains('.slide pre{background:#000000;color:#33FF33'));
    expect(html, contains('.slide pre code{color:#33FF33'));
    // The chosen code font is used (with a monospace fallback chain).
    expect(html, contains("font-family:'Courier New',"));
  });
  test('EB Garamond theme embeds the font for offline rendering', () async {
    final service = MarpHtmlService(
      loadAsset: _diskLoader,
@ -110,4 +128,117 @@ void main() {}
    expect(html, contains('data:font/ttf;base64,'));
    expect(html, contains("'EB Garamond'"));
  });
  test('pie chart SVG renders every series and label', () {
    const slide = '''
 ```chart
 {
  "type": "pie",
  "x": ["Team A", "Team B"],
  "series": [
    {"name": "Gereed", "color": "#10B981", "data": [70, 40]},
    {"name": "Open", "color": "#EF4444", "data": [30, 60]}
  ]
 }
 ```
 ''';
    final html = MarpHtmlService.renderChartBlocks(slide);
    expect(html, contains('Team A'));
    expect(html, contains('Team B'));
    expect(html, contains('Gereed'));
    expect(html, contains('Open'));
    expect(html, contains('#003399'));
    expect(html, contains('#FFCC00'));
  });
  test('pie chart SVG renders at most two series', () {
    const slide = '''
 ```chart
 {
  "type": "pie",
  "x": ["A", "B"],
  "series": [
    {"name": "Een", "data": [1, 2]},
    {"name": "Twee", "data": [2, 3]},
    {"name": "Drie", "data": [3, 4]}
  ]
 }
 ```
 ''';
    final html = MarpHtmlService.renderChartBlocks(slide);
    expect(html, contains('Een'));
    expect(html, contains('Twee'));
    expect(html, isNot(contains('Drie')));
  });
  test('bar chart SVG draws optional min/max bound lines with labels', () {
    const slide = '''
 ```chart
 {
  "type": "bar",
  "x": ["Q1", "Q2"],
  "series": [{"name": "Omzet", "data": [10, 14]}],
  "minBound": 5,
  "maxBound": 20
 }
 ```
 ''';
    final html = MarpHtmlService.renderChartBlocks(slide);
    expect(html, contains('stroke-dasharray'));
    expect(html, contains('min 5'));
    expect(html, contains('max 20'));
  });
  test('pie chart SVG never draws bound lines', () {
    const slide = '''
 ```chart
 {
  "type": "pie",
  "x": ["A", "B"],
  "series": [{"name": "Een", "data": [1, 2]}],
  "minBound": 5,
  "maxBound": 20
 }
 ```
 ''';
    final html = MarpHtmlService.renderChartBlocks(slide);
    expect(html, isNot(contains('stroke-dasharray')));
    expect(html, isNot(contains('min 5')));
  });
  test('radar chart SVG draws a polygon per series with axis labels', () {
    const slide = '''
 ```chart
 {
  "type": "radar",
  "x": ["Snelheid", "Kracht", "Uithouding"],
  "series": [
    {"name": "A", "color": "#2563EB", "data": [3, 4, 5]},
    {"name": "B", "color": "#EF4444", "data": [5, 2, 3]}
  ]
 }
 ```
 ''';
    final html = MarpHtmlService.renderChartBlocks(slide);
    expect(html, contains('<polygon'));
    expect(html, contains('Snelheid'));
    expect(html, contains('Kracht'));
    expect(html, contains('Uithouding'));
    // Both series are drawn with their colours.
    expect(html, contains('fill="#2563EB"'));
    expect(html, contains('fill="#EF4444"'));
    // The series legend is shown (not a pie legend).
    expect(html, contains('A'));
    expect(html, contains('B'));
  });
 }
--- a/test/settings_provider_test.dart
+++ b/test/settings_provider_test.dart
@ -15,6 +15,29 @@ Future<SettingsNotifier> _loadedNotifier() async {
 void main() {
  TestWidgetsFlutterBinding.ensureInitialized();
  test('ThemeProfile round-trips the code styling through JSON', () {
    const profile = ThemeProfile(
      codeBackgroundColor: '#000000',
      codeTextColor: '#33FF33',
      codeHighlightSyntax: false,
      codeFontFamily: 'Courier New',
    );
    final back = ThemeProfile.fromJson(profile.toJson());
    expect(back.codeBackgroundColor, '#000000');
    expect(back.codeTextColor, '#33FF33');
    expect(back.codeHighlightSyntax, isFalse);
    expect(back.codeFontFamily, 'Courier New');
  });
  test('ThemeProfile code styling defaults to the atom-one-dark look', () {
    // Older decks without the fields fall back to the dark editor defaults.
    final back = ThemeProfile.fromJson(const {'name': 'Legacy'});
    expect(back.codeBackgroundColor, '#282C34');
    expect(back.codeTextColor, '#ABB2BF');
    expect(back.codeHighlightSyntax, isTrue);
    expect(back.codeFontFamily, 'monospace');
  });
  test('starts with a single default profile', () async {
    final notifier = await _loadedNotifier();
    expect(notifier.state.themeProfiles, hasLength(1));