feat: port preview panel + bundle design-system fonts

Finishes the variant 02 design port:
- Preview panel: panel_header w/ extension pill, frost-variant meta_row
  (rune-blue keys, primary mono values), section_label mastheads in
  place of nine bare ui.separator() calls.
- Bundle Cinzel Decorative (display), Inter (body), JetBrains Mono
  (mono), OpenDyslexic Regular+Bold (a11y) — all OFL, baked via
  include_bytes!. engraved() and section_label() now render in Cinzel.
- View → Dyslexia-friendly type swaps Proportional+Monospace to
  OpenDyslexic at runtime per the design system's a11y opt-in.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: jabberwock

rustydemon/assets/fonts/CinzelDecorative-Bold.ttf

@@ -175,6 +175,11 @@ pub struct CascExplorerApp {
     // ── 3D viewport spike ─────────────────────────────────────────────────────
     pub viewport3d_open: bool,
 
+    // ── Accessibility ─────────────────────────────────────────────────────────
+    /// Swap Inter / JetBrains Mono for OpenDyslexic per the design
+    /// system's a11y opt-in. Toggled from View → Dyslexia-friendly type.
+    pub dyslexia_friendly: bool,
+
     // ── Deferred actions ──────────────────────────────────────────────────────
     /// A viewer-override change requested on the previous frame.  Applied
     /// at the top of the next `update` so the old `PreviewOutput`'s GPU
@@ -237,6 +242,7 @@ impl CascExplorerApp {
             cancel: Arc::new(AtomicBool::new(false)),
             loading: false,
             viewport3d_open: false,
+            dyslexia_friendly: false,
             pending_preview_override: None,
             audio_player: None,
             pending_audio_action: None,

rustydemon/assets/fonts/Inter-Regular.ttf

@@ -128,6 +128,11 @@ pub fn draw_menu(ctx: &Context, app: &mut CascExplorerApp) {
                     }
                     ui.separator();
                     ui.checkbox(&mut app.viewport3d_open, "3D Test Viewport");
+                    let mut dys = app.dyslexia_friendly;
+                    if ui.checkbox(&mut dys, "Dyslexia-friendly type").changed() {
+                        app.dyslexia_friendly = dys;
+                        crate::ui::theme::set_fonts(ctx, dys);
+                    }
                 });
 
                 // ── Tools ─────────────────────────────────────────────────────────

rustydemon/assets/fonts/JetBrainsMono-Regular.ttf

@@ -3,12 +3,17 @@ use crate::ui::theme::{self, rd};
 
 /// Draw the right-panel details/preview area.
 pub fn draw_preview(ui: &mut egui::Ui, app: &mut CascExplorerApp) {
-    ui.add_space(2.0);
-    ui.label(theme::engraved("Details / Preview"));
-    ui.separator();
+    let pill = app
+        .selected
+        .as_ref()
+        .and_then(|s| s.result.filename.as_deref())
+        .and_then(|n| n.rsplit('.').next())
+        .map(str::to_uppercase);
+    theme::panel_header(ui, "Details / Preview", pill.as_deref());
 
     if app.selected.is_none() {
-        ui.label("Select a file to preview it.");
+        ui.add_space(8.0);
+        ui.label(egui::RichText::new("Select a file to preview it.").color(rd::FG_MUTED));
         return;
     }
 
@@ -53,18 +58,20 @@ fn draw_preview_body(ui: &mut egui::Ui, app: &mut CascExplorerApp) {
             }
         });
 
-    ui.separator();
-
     // ── Error ──────────────────────────────────────────────────────────────────
     if let Some(err) = &sel.load_error {
+        theme::section_label(ui, "Error");
         ui.colored_label(rd::DANGER, format!("⚠ {err}"));
         return;
     }
 
     // ── Loading spinner while the background task is running ──────────────────
     if sel.data.is_none() && sel.load_error.is_none() && app.loading {
-        ui.spinner();
-        ui.label("Loading file data…");
+        ui.add_space(8.0);
+        ui.horizontal(|ui| {
+            ui.spinner();
+            ui.label(egui::RichText::new("Loading file data…").color(rd::FG_MUTED));
+        });
         return;
     }
 
@@ -81,8 +88,8 @@ fn draw_preview_body(ui: &mut egui::Ui, app: &mut CascExplorerApp) {
             None => "Auto".to_string(),
             Some(i) => names.get(i).cloned().unwrap_or_else(|| format!("#{i}")),
         };
+        theme::section_label(ui, "Viewer");
         ui.horizontal(|ui| {
-            ui.label("Viewer:");
             egui::ComboBox::from_id_salt("preview_override")
                 .selected_text(current_label)
                 .show_ui(ui, |ui| {
@@ -102,41 +109,48 @@ fn draw_preview_body(ui: &mut egui::Ui, app: &mut CascExplorerApp) {
                     }
                 });
         });
-        ui.separator();
     }
 
     // ── Plugin-provided preview ───────────────────────────────────────────────
     if let Some(preview) = &sel.preview {
         // Texture (inline image).
         if let Some(tex) = &preview.texture {
             let tex_size = tex.size_vec2();
+            theme::section_label(
+                ui,
+                &format!(
+                    "Texture · {}×{}",
+                    tex_size.x.round() as u32,
+                    tex_size.y.round() as u32
+                ),
+            );
             let max_w = ui.available_width();
             let scale = (max_w / tex_size.x).min(1.0);
             let display_size = tex_size * scale;
             ui.image((tex.id(), display_size));
-            ui.separator();
         }
 
         // 3D mesh viewport (currently only WMO group geometry).
         if let Some(mesh) = preview.mesh3d.clone() {
+            theme::section_label(ui, "Mesh");
             crate::viewport3d::paint_mesh(ui, mesh);
-            ui.separator();
         }
 
         // Text block (formatted summary or full text file). The outer
         // ScrollArea handles overflow; this widget just lays out as tall
         // as its contents.
         if let Some(text) = &preview.text {
+            theme::section_label(ui, "Text");
             ui.add(
                 egui::TextEdit::multiline(&mut text.as_str())
                     .font(egui::TextStyle::Monospace)
                     .desired_width(f32::INFINITY),
             );
-            ui.separator();
         }
     } else if let Some(data) = &sel.data {
         // ── Hex-dump fallback (no plugin claimed this file) ───────────────────
         let preview_len = data.len().min(256);
+        theme::section_label(ui, &format!("Hex · first {preview_len} bytes"));
         let hex: String = data[..preview_len]
             .chunks(16)
             .enumerate()
@@ -166,22 +180,20 @@ fn draw_preview_body(ui: &mut egui::Ui, app: &mut CascExplorerApp) {
 
     // ── Deep-search content matches ────────────────────────────────────────────
     if !sel.content_matches.is_empty() {
-        ui.separator();
-        ui.label(format!(
-            "Deep search: {} entries",
-            sel.content_matches.len()
-        ));
+        theme::section_label(
+            ui,
+            &format!("Deep search · {} entries", sel.content_matches.len()),
+        );
         for m in &sel.content_matches {
             ui.label(
                 egui::RichText::new(format!("[{}] {}", m.kind, m.inner_path))
                     .small()
-                    .monospace(),
+                    .monospace()
+                    .color(rd::FG_PRIMARY),
             );
         }
     }
 
-    ui.separator();
-
     // ── PCX palette picker (for SC1 assets with external palettes) ───────────
     let is_pcx = sel
         .result
@@ -199,6 +211,7 @@ fn draw_preview_body(ui: &mut egui::Ui, app: &mut CascExplorerApp) {
     let mut audio_action: Option<crate::app::AudioAction> = None;
 
     if is_pcx {
+        theme::section_label(ui, "PCX palette");
         ui.horizontal(|ui| {
             if ui
                 .button("Load Palette…")
@@ -218,7 +231,6 @@ fn draw_preview_body(ui: &mut egui::Ui, app: &mut CascExplorerApp) {
                 );
             }
         });
-        ui.separator();
     }
 
     // ── Audio playback controls ───────────────────────────────────────────────
@@ -234,6 +246,7 @@ fn draw_preview_body(ui: &mut egui::Ui, app: &mut CascExplorerApp) {
         .map(crate::audio::is_audio_filename)
         .unwrap_or(false);
     if is_audio && sel.data.is_some() {
+        theme::section_label(ui, "Audio");
         // Look at the live player (if any) to decide button states.
         // We can't borrow `app` mutably here, but the immutable peek
         // at `audio_player` is fine because we only read is_playing /
@@ -320,12 +333,11 @@ fn draw_preview_body(ui: &mut egui::Ui, app: &mut CascExplorerApp) {
             ui.ctx()
                 .request_repaint_after(std::time::Duration::from_millis(200));
         }
-
-        ui.separator();
     }
 
     // ── Export buttons ─────────────────────────────────────────────────────────
     if sel.data.is_some() {
+        theme::section_label(ui, "Export");
         ui.horizontal(|ui| {
             // Plugin-provided exports (e.g. "Export As PNG", "Export As BK2").
             if let Some(preview) = &sel.preview {
@@ -548,25 +560,20 @@ fn export_raw(app: &CascExplorerApp) {
 }
 
 fn meta_row(ui: &mut egui::Ui, label: &str, value: &str) {
-    // Muted key, primary/rune value — technical data (FDID, Hash, CKey,
-    // Size) gets monospace + rune-blue per the design system; display
-    // fields (Name, Type, Locale) stay in the primary body color.
-    ui.label(
-        egui::RichText::new(label)
-            .small()
-            .color(rd::FG_MUTED)
-            .strong(),
-    );
+    // Frost-variant `.v-meta`: rune-blue bold keys, primary values.
+    // Technical fields (FDID, Hash, CKey, Size) render mono; display
+    // fields (Name, Type, Locale) stay proportional.
+    ui.label(egui::RichText::new(label).strong().color(rd::RUNE_400));
     let is_technical = matches!(label, "FDID:" | "Hash:" | "CKey:" | "Size:");
     let max_chars = 24;
     let (display, tip): (String, Option<&str>) = if value.chars().count() > max_chars {
         (format!("{}…", &value[..max_chars]), Some(value))
     } else {
         (value.to_string(), None)
     };
-    let mut rt = egui::RichText::new(&display);
+    let mut rt = egui::RichText::new(&display).color(rd::FG_PRIMARY);
     if is_technical {
-        rt = rt.monospace().color(rd::RUNE_400);
+        rt = rt.monospace();
     }
     let resp = ui.label(rt);
     if let Some(full) = tip {

rustydemon/assets/fonts/OpenDyslexic-Bold.otf

@@ -4,15 +4,31 @@
 //! into a single `apply(ctx)` call.  Cold gunmetal surfaces, rune-blue for
 //! technical data, ember fills for selection / focus / active state.
 //!
-//! Fonts: the design system names Cinzel Decorative / Inter / JetBrains
-//! Mono as the display/body/mono faces, but none of those are shipped
-//! locally (only OpenDyslexic, an a11y alternate, is on disk).  We keep
-//! eframe's `default_fonts` for now and only reshape colors, strokes,
-//! radii, and the type scale.  Dropping the three Google Fonts TTFs into
-//! `assets/fonts/` and wiring them through `FontDefinitions` is a clean
-//! follow-up — no other theme code needs to change.
+//! Fonts: bundled OFL faces baked into the binary via `include_bytes!` —
+//! Cinzel Decorative for engraved mastheads, Inter for body/UI, JetBrains
+//! Mono for hashes/hex. OpenDyslexic Regular/Bold ship as the a11y
+//! alternate the design system explicitly calls for; toggle via
+//! View → Dyslexia-friendly type, which calls `set_fonts(ctx, true)`.
 
-use egui::{Color32, Context, FontId, Rounding, Stroke, Style, TextStyle, Visuals};
+use egui::{
+    Color32, Context, FontData, FontDefinitions, FontFamily, FontId, Rounding, Stroke, Style,
+    TextStyle, Visuals,
+};
+use std::sync::Arc;
+
+// ── Bundled font data (baked into the binary) ──────────────────────────────
+// All four faces are OFL-licensed; safe to ship with this AGPL/FOSS tool.
+const FONT_INTER: &[u8] = include_bytes!("../../assets/fonts/Inter-Regular.ttf");
+const FONT_JETBRAINS: &[u8] = include_bytes!("../../assets/fonts/JetBrainsMono-Regular.ttf");
+const FONT_CINZEL: &[u8] = include_bytes!("../../assets/fonts/CinzelDecorative-Bold.ttf");
+const FONT_DYSLEXIA_REG: &[u8] = include_bytes!("../../assets/fonts/OpenDyslexic-Regular.otf");
+const FONT_DYSLEXIA_BOLD: &[u8] = include_bytes!("../../assets/fonts/OpenDyslexic-Bold.otf");
+
+/// Custom font family used by `engraved()` / `section_label()` — Cinzel
+/// Decorative, the medieval-Roman display face from the design system.
+fn display_family() -> FontFamily {
+    FontFamily::Name(Arc::from("display"))
+}
 
 /// RustyDemon design tokens, transcribed from
 /// `RustyDemon Design System/colors_and_type.css`.  Keep in sync if the
@@ -68,9 +84,64 @@ pub mod rd {
     pub const SUCCESS: Color32 = Color32::from_rgb(0x4a, 0xa5, 0x64);
 }
 
+/// Install the bundled design-system fonts on `ctx`.
+///
+/// `dyslexia_friendly = false` (default): Inter for body/UI, JetBrains
+/// Mono for hashes/hex, Cinzel Decorative as a custom `display` family
+/// for engraved mastheads.
+///
+/// `dyslexia_friendly = true`: swaps Inter and JetBrains Mono out for
+/// OpenDyslexic Regular / Bold — the a11y alternate the design system
+/// ships specifically for this toggle. Cinzel stays put (the engraved
+/// look is brand identity, not body type).
+///
+/// Safe to call any time; egui re-shapes affected text on the next frame.
+pub fn set_fonts(ctx: &Context, dyslexia_friendly: bool) {
+    let mut fonts = FontDefinitions::default();
+
+    fonts
+        .font_data
+        .insert("rd_cinzel".into(), FontData::from_static(FONT_CINZEL));
+
+    if dyslexia_friendly {
+        fonts.font_data.insert(
+            "rd_proportional".into(),
+            FontData::from_static(FONT_DYSLEXIA_REG),
+        );
+        fonts.font_data.insert(
+            "rd_monospace".into(),
+            FontData::from_static(FONT_DYSLEXIA_BOLD),
+        );
+    } else {
+        fonts
+            .font_data
+            .insert("rd_proportional".into(), FontData::from_static(FONT_INTER));
+        fonts
+            .font_data
+            .insert("rd_monospace".into(), FontData::from_static(FONT_JETBRAINS));
+    }
+
+    fonts
+        .families
+        .entry(FontFamily::Proportional)
+        .or_default()
+        .insert(0, "rd_proportional".into());
+    fonts
+        .families
+        .entry(FontFamily::Monospace)
+        .or_default()
+        .insert(0, "rd_monospace".into());
+    fonts
+        .families
+        .insert(display_family(), vec!["rd_cinzel".into()]);
+
+    ctx.set_fonts(fonts);
+}
+
 /// Install the RustyDemon visual theme on `ctx`.  Safe to call once at
 /// startup — takes immediate effect and persists across frames.
 pub fn apply(ctx: &Context) {
+    set_fonts(ctx, false);
     let mut visuals = Visuals::dark();
 
     visuals.dark_mode = true;
@@ -188,8 +259,7 @@ pub fn engraved(text: &str) -> egui::RichText {
         .join("\u{2009}");
     egui::RichText::new(spaced)
         .color(rd::FROST_700)
-        .size(13.0)
-        .strong()
+        .font(FontId::new(13.0, display_family()))
 }
 
 // ── v2 additions: panel chrome, row frames, meta grid helpers ────────────
@@ -252,3 +322,31 @@ pub fn filepath_line(text: &str) -> egui::RichText {
         .size(10.5)
         .color(rd::FG_MUTED)
 }
+
+/// Engraved section label inside a panel — the `.v-sectlabel` from the
+/// frost variant (10.5px, uppercase, wide tracking, rune-blue, hairline
+/// underneath). Use to introduce sub-sections of the preview panel
+/// (`Hex · first 256 bytes`, `Export`, `Audio`, etc.) instead of a bare
+/// `ui.separator()`.
+pub fn section_label(ui: &mut egui::Ui, text: &str) {
+    ui.add_space(8.0);
+    let spaced: String = text
+        .to_uppercase()
+        .chars()
+        .map(|c| c.to_string())
+        .collect::<Vec<_>>()
+        .join("\u{2009}");
+    ui.label(
+        egui::RichText::new(spaced)
+            .font(FontId::new(10.5, display_family()))
+            .color(rd::RUNE_400),
+    );
+    let avail = ui.available_width();
+    let (rect, _) = ui.allocate_exact_size(egui::vec2(avail, 1.0), egui::Sense::hover());
+    ui.painter().hline(
+        rect.x_range(),
+        rect.center().y,
+        egui::Stroke::new(1.0, egui::Color32::from_rgba_premultiplied(29, 50, 71, 153)),
+    );
+    ui.add_space(4.0);
+}