diff --git a/ATTRIBUTION.md b/ATTRIBUTION.md
index 1273dfea1..1b4f22ba5 100644
--- a/ATTRIBUTION.md
+++ b/ATTRIBUTION.md
@@ -54,6 +54,8 @@ procedural demo footage (`crates/media/src/generators.rs`); no external media. R
 | `crates/golden/goldens/crop.png` | FilmCraft contributors | Original work: golden reference rendered by FilmCraft (crates/golden/tests/golden.rs, scene `crop`) from procedurally generated media | MIT OR Apache-2.0 |
 | `crates/golden/goldens/gaussian_blur.png` | FilmCraft contributors | Original work: golden reference rendered by FilmCraft (crates/golden/tests/golden.rs, scene `gaussian_blur`) from procedurally generated media | MIT OR Apache-2.0 |
 | `crates/golden/goldens/graphic_shapes.png` | FilmCraft contributors | Original work: golden reference rendered by FilmCraft (crates/golden/tests/golden.rs, scene `graphic_shapes`) from procedurally generated media and bundled OFL fonts | MIT OR Apache-2.0 |
+| `crates/golden/goldens/graphic_template.png` | FilmCraft contributors | Original work: golden reference rendered by FilmCraft (crates/golden/tests/golden.rs, scene `graphic_template`; a built-in FilmCraft graphics template) from procedurally generated media and bundled OFL fonts | MIT OR Apache-2.0 |
+| `crates/golden/goldens/graphic_rich_text.png` | FilmCraft contributors | Original work: golden reference rendered by FilmCraft (crates/golden/tests/golden.rs, scene `graphic_rich_text`) from procedurally generated media and bundled OFL fonts | MIT OR Apache-2.0 |
 | `crates/golden/goldens/log_to_rec709.png` | FilmCraft contributors | Original work: golden reference rendered by FilmCraft (crates/golden/tests/golden.rs, scene `log_to_rec709`) from procedurally generated media re-encoded as S-Log3 | MIT OR Apache-2.0 |
 | `crates/golden/goldens/hdr_tone_map.png` | FilmCraft contributors | Original work: golden reference rendered by FilmCraft (crates/golden/tests/golden.rs, scene `hdr_tone_map`) from procedurally generated media re-encoded as Rec. 2100 PQ | MIT OR Apache-2.0 |
 | `crates/golden/goldens/graphic_title.png` | FilmCraft contributors | Original work: golden reference rendered by FilmCraft (crates/golden/tests/golden.rs, scene `graphic_title`) from procedurally generated media and bundled OFL fonts | MIT OR Apache-2.0 |
diff --git a/crates/golden/goldens/graphic_rich_text.png b/crates/golden/goldens/graphic_rich_text.png
new file mode 100644
index 000000000..34ef3494a
Binary files /dev/null and b/crates/golden/goldens/graphic_rich_text.png differ
diff --git a/crates/golden/goldens/graphic_rich_text.png.attribution b/crates/golden/goldens/graphic_rich_text.png.attribution
new file mode 100644
index 000000000..8d08d3ac4
--- /dev/null
+++ b/crates/golden/goldens/graphic_rich_text.png.attribution
@@ -0,0 +1,8 @@
+asset:        graphic_rich_text.png
+title:        Per-character text styles and a box pinned around the text
+author:       FilmCraft contributors
+source:       original work (rendered by FilmCraft's own renderer from a procedurally generated project; no external media)
+license:      MIT OR Apache-2.0
+license-file:
+added:        2026-10-03 by FilmCraft contributors (FILMCRAFT_BLESS=1)
+notes:        Golden reference image generated by crates/golden/tests/golden.rs (graphic_rich_text). Regenerate with FILMCRAFT_BLESS=1. Contains no Adobe artwork.
diff --git a/crates/golden/goldens/graphic_template.png b/crates/golden/goldens/graphic_template.png
new file mode 100644
index 000000000..75ec9efff
Binary files /dev/null and b/crates/golden/goldens/graphic_template.png differ
diff --git a/crates/golden/goldens/graphic_template.png.attribution b/crates/golden/goldens/graphic_template.png.attribution
new file mode 100644
index 000000000..4e1add78f
--- /dev/null
+++ b/crates/golden/goldens/graphic_template.png.attribution
@@ -0,0 +1,8 @@
+asset:        graphic_template.png
+title:        Graphics template (Lower Third – Slab) with overridden properties
+author:       FilmCraft contributors
+source:       original work (rendered by FilmCraft's own renderer from a procedurally generated project; no external media)
+license:      MIT OR Apache-2.0
+license-file:
+added:        2026-10-03 by FilmCraft contributors (FILMCRAFT_BLESS=1)
+notes:        Golden reference image generated by crates/golden/tests/golden.rs (graphic_template). Regenerate with FILMCRAFT_BLESS=1. Contains no Adobe artwork.
diff --git a/crates/golden/tests/golden.rs b/crates/golden/tests/golden.rs
index fbbc74db8..3a95baf8a 100644
--- a/crates/golden/tests/golden.rs
+++ b/crates/golden/tests/golden.rs
@@ -309,6 +309,55 @@ fn graphic_scene(bg: DemoScene, layers: Vec<EffectInstance>) -> Scene {
     b.at(12)
 }
 
+/// A built-in graphics template (Lower Third – Slab) placed on a 320×180 sequence with its
+/// editable properties overridden (name, slab and accent colours, hidden role line): checks the
+/// template's scaling, pins (the slab widens with the longer name) and the overrides.
+fn graphic_template() -> Scene {
+    use filmcraft_project::gtemplate::{builtin_templates, layer_uid};
+    let t = builtin_templates().into_iter().find(|t| t.id == "builtin:lower-third-slab").unwrap();
+    let (mut layers, meta) = t.instantiate((W, H));
+    let mut over = |control: &str, v: ParamValue| {
+        let c = t.controls.iter().find(|c| c.id == control).unwrap();
+        let l = layers.iter_mut().find(|l| layer_uid(l) == c.layer).unwrap();
+        if c.param == "enabled" {
+            l.enabled = v.as_bool().unwrap();
+        } else {
+            l.params.get_mut(&c.param).unwrap().value = v;
+        }
+    };
+    over("name", ParamValue::Text("Golden Overrides".into()));
+    over("slab_color", ParamValue::Color([0.75, 0.15, 0.18, 1.0]));
+    over("accent_color", ParamValue::Color([0.2, 0.85, 0.4, 1.0]));
+    over("show_role", ParamValue::Bool(false));
+    let mut s = graphic_scene(DemoScene::Forest, layers);
+    let seq = s.seq;
+    let q = s.project.sequence_mut(seq).unwrap();
+    q.video_tracks[1].items[0].graphic = Some(Box::new(meta));
+    s
+}
+
+/// Per-character styles (a bold, bigger, coloured word and an underlined one) and a rounded box
+/// pinned around the text on all four edges.
+fn graphic_rich_text() -> Scene {
+    use filmcraft_project::graphic::{new_shape_layer, new_text_layer};
+    use filmcraft_project::graphic_design::{CharStyle, LayerExtra, Pin, PinTarget, StyleRun};
+    let mut text = new_text_layer("Mixed STYLES in one layer", Vec2::new(28.0, 100.0), 16.0);
+    let runs = vec![
+        StyleRun { start: 6, end: 12, style: CharStyle { size: Some(26.0), faux_bold: Some(true), fill: Some([1.0, 0.8, 0.1, 1.0]), ..Default::default() } },
+        StyleRun {
+            start: 16,
+            end: 19,
+            style: CharStyle { underline: Some(true), font: Some("Noto Serif".into()), faux_italic: Some(true), ..Default::default() },
+        },
+    ];
+    text.layer = Some(Box::new(LayerExtra { uid: 1, runs, ..Default::default() }));
+    let mut bx = new_shape_layer(0, Vec2::new(150.0, 90.0), Vec2::new(10.0, 10.0), vec![]);
+    set(&mut bx, &[("corner_radius", fl(6.0)), ("fill_color", ParamValue::Color([0.1, 0.12, 0.3, 1.0])), ("opacity", fl(80.0))]);
+    let pin = Pin { to: PinTarget::Layer(1), left: true, top: true, right: true, bottom: true, offsets: [-10.0, -8.0, 10.0, 8.0] };
+    bx.layer = Some(Box::new(LayerExtra { uid: 2, pin: Some(pin), ..Default::default() }));
+    graphic_scene(DemoScene::Dunes, vec![bx, text])
+}
+
 /// A title: bold centred text with an outer stroke and a soft drop shadow, a lower-third bar with
 /// rounded corners and a background-boxed caption line.
 fn graphic_title() -> Scene {
@@ -555,6 +604,8 @@ fn scenes() -> Vec<(&'static str, &'static str, fn() -> Scene)> {
         ("text_burnin", "Timecode and Clip Name burn-in text", text_burnin),
         ("graphic_title", "Graphic clip: title text with stroke and shadow, lower-third bar", graphic_title),
         ("graphic_shapes", "Graphic clip: ellipse, polygon, path and rotated text with background", graphic_shapes),
+        ("graphic_template", "Graphics template (Lower Third – Slab) with overridden properties", graphic_template),
+        ("graphic_rich_text", "Per-character text styles and a box pinned around the text", graphic_rich_text),
         ("log_to_rec709", "Colour management: S-Log3/S-Gamut3.Cine footage to Rec. 709 (tone mapped)", log_to_rec709),
         ("hdr_tone_map", "Colour management: Rec. 2100 PQ footage tone mapped into a Rec. 709 sequence", hdr_tone_map),
         ("mask_blur", "Masks: Gaussian Blur inside a feathered ellipse mask", mask_blur),
@@ -620,6 +671,8 @@ goldens!(
     text_burnin,
     graphic_title,
     graphic_shapes,
+    graphic_template,
+    graphic_rich_text,
     log_to_rec709,
     hdr_tone_map,
     mask_blur,
diff --git a/crates/ui-egui/src/control.rs b/crates/ui-egui/src/control.rs
index 0cdfe3428..668de4321 100644
--- a/crates/ui-egui/src/control.rs
+++ b/crates/ui-egui/src/control.rs
@@ -208,6 +208,22 @@ pub fn handle(app: &mut FilmcraftApp, ctx: &egui::Context, req: &ControlRequest)
                     Err(e) => return err(format!("`panels`: {e}")),
                 }
             }
+            // Essential Graphics ▸ Browse and the template / font dialogs (`panels::graphics_templates`), merged
+            if let Some(patch) = p.get("gfxTemplates") {
+                let mut cur = serde_json::to_value(&app.ui.gfx_templates).unwrap_or_default();
+                merge(&mut cur, patch);
+                match serde_json::from_value(cur) {
+                    Ok(v) => app.ui.gfx_templates = v,
+                    Err(e) => return err(format!("`gfxTemplates`: {e}")),
+                }
+            }
+            // the Type tool's text editing state: {"clip", "layer", "caret", "anchor"} (byte offsets) or null
+            if let Some(v) = p.get("gfxEdit") {
+                match serde_json::from_value(v.clone()) {
+                    Ok(e) => app.ui.gfx_edit = e,
+                    Err(e) => return err(format!("`gfxEdit`: {e}")),
+                }
+            }
             // fields of the open Edit / Clip / File dialog (`panels::clip_dialogs`)
             if let Some(m) = p.get("clipDialog").and_then(Value::as_object) {
                 let Some(d) = app.ui.clip_dialog.as_mut() else { return err("no clip dialog is open") };
diff --git a/crates/ui-egui/src/lib.rs b/crates/ui-egui/src/lib.rs
index 3c05e27c2..405c9e341 100644
--- a/crates/ui-egui/src/lib.rs
+++ b/crates/ui-egui/src/lib.rs
@@ -684,14 +684,18 @@ impl FilmcraftApp {
                 self.session.execute("graphics.newFromFile", json!({"path": path})).map_err(|e| e.to_string())
             }
             "captions.import" => {
-                let paths = self.hooks.pick_files.as_mut().map(|f| f(&["srt", "vtt", "scc"])).unwrap_or_default();
+                let paths = self.hooks.pick_files.as_mut().map(|f| f(&["srt", "vtt", "scc", "mcc", "stl", "ttml", "dfxp", "xml"])).unwrap_or_default();
                 let Some(path) = paths.into_iter().next() else { return Ok(Value::Null) };
                 self.session.execute("captions.import", json!({"path": path})).map_err(|e| e.to_string())
             }
             "captions.export" => {
                 let name = self.session.state.active_sequence.and_then(|s| self.session.project.item(s)).map(|i| i.name.clone()).unwrap_or_default();
                 let suggested = format!("{}.srt", name.replace(' ', "_"));
-                let Some(path) = self.hooks.pick_save_as.as_mut().and_then(|f| f("Captions (SRT, WebVTT, SCC)", &["srt", "vtt", "scc"], &suggested)) else {
+                let Some(path) =
+                    self.hooks.pick_save_as.as_mut().and_then(|f| {
+                        f("Captions (SRT, WebVTT, SCC, MCC, EBU STL, TTML, DFXP)", &["srt", "vtt", "scc", "mcc", "stl", "ttml", "dfxp"], &suggested)
+                    })
+                else {
                     return Ok(Value::Null);
                 };
                 let mut p = params.clone();
diff --git a/crates/ui-egui/src/menus.rs b/crates/ui-egui/src/menus.rs
index cc3ccb2a9..619f9f50b 100644
--- a/crates/ui-egui/src/menus.rs
+++ b/crates/ui-egui/src/menus.rs
@@ -179,6 +179,12 @@ pub fn invoke(app: &mut FilmcraftApp, ctx: &egui::Context, id: &str, params: Val
     if let Some(r) = crate::panels::settings::route(app, id) {
         return r;
     }
+    if let Some(r) = crate::panels::graphics_templates::route(app, ctx, id, &params) {
+        if let Err(e) = &r {
+            app.ui.status = e.clone();
+        }
+        return r;
+    }
     if let Some(r) = crate::panels::menu_dialogs::route(app, ctx, id, &params) {
         if let Err(e) = &r {
             app.ui.status = e.clone();
diff --git a/crates/ui-egui/src/panels/dialogs.rs b/crates/ui-egui/src/panels/dialogs.rs
index bac1ade8f..8a54c2a8f 100644
--- a/crates/ui-egui/src/panels/dialogs.rs
+++ b/crates/ui-egui/src/panels/dialogs.rs
@@ -8,6 +8,7 @@ pub fn show(app: &mut FilmcraftApp, ctx: &egui::Context) {
     crate::panels::color_dialogs::show(app, ctx);
     crate::panels::clip_dialogs::show(app, ctx);
     crate::panels::menu_dialogs::show(app, ctx);
+    crate::panels::graphics_templates::show(app, ctx);
     crate::panels::presets::save_dialog(app, ctx);
     crate::panels::audio_fx_editor::show(app, ctx);
     crate::panels::multicam::show_dialog(app, ctx);
diff --git a/crates/ui-egui/src/panels/graphics.rs b/crates/ui-egui/src/panels/graphics.rs
index 464a9914b..d2e7f4e3b 100644
--- a/crates/ui-egui/src/panels/graphics.rs
+++ b/crates/ui-egui/src/panels/graphics.rs
@@ -739,10 +739,33 @@ struct Ctx<'a> {
     t: Tokens,
     actions: Vec<(String, Value)>,
     autos: Vec<(String, Rect, String)>,
+    /// Characters selected with the Type tool in this layer: character properties apply to them.
+    range: Option<(usize, usize)>,
+}
+
+/// Character properties a Type-tool selection can carry, with their `graphics.setCharStyle` names.
+fn char_style_key(id: &str) -> Option<&'static str> {
+    Some(match id {
+        "font" => "font",
+        "font_style" => "fontStyle",
+        "size" => "size",
+        "fill_color" => "color",
+        "faux_bold" => "bold",
+        "faux_italic" => "italic",
+        "underline" => "underline",
+        "tracking" => "tracking",
+        "baseline_shift" => "baselineShift",
+        "caps" => "caps",
+        _ => return None,
+    })
 }
 
 impl Ctx<'_> {
     fn set(&mut self, id: &str, v: Value) {
+        if let (Some((a, b)), Some(k)) = (self.range, char_style_key(id)) {
+            self.actions.push(("graphics.setCharStyle".into(), json!({"clip": self.clip.0, "layer": self.layer, "start": a, "end": b, "style": {k: v}})));
+            return;
+        }
         self.actions.push(("graphics.set".into(), json!({"clip": self.clip.0, "layer": self.layer, "props": {id: v}})));
     }
     fn auto(&mut self, id: &str, r: Rect, label: &str) {
@@ -1051,13 +1074,32 @@ pub fn properties(app: &mut FilmcraftApp, ui: &mut egui::Ui, rect: Rect) {
                 }
             }
         }
+        // ---- template properties (a graphic made from a graphics template)
+        if it.graphic.as_ref().is_some_and(|m| m.template.is_some()) && section(ui, app, "Template Properties", &t) {
+            crate::panels::graphics_templates::template_controls(app, ui, clip, &it, mt, &mut autos, &mut actions);
+        }
         let Some(l) = sel else {
+            if section(ui, app, "Responsive Design - Time", &t) {
+                crate::panels::graphics_templates::responsive_time(app, ui, clip, &it, &mut autos, &mut actions);
+            }
             ui.add_space(12.0);
             ui.label(egui::RichText::new("Select a layer to edit its properties.").color(t.text_faint));
             return;
         };
         let e = &it.effects[idx[l]];
-        let mut cx = Ctx { clip, layer: l, e, mt, t, actions: Vec::new(), autos: Vec::new() };
+        // a Type-tool selection in this layer: character properties apply to the selected characters
+        let range = app.ui.gfx_edit.as_ref().filter(|ed| ed.clip == clip.0 && ed.layer == l && ed.caret != ed.anchor).and_then(|ed| {
+            let text = match pv(e, "text", mt) {
+                ParamValue::Text(s) => s,
+                _ => return None,
+            };
+            let ch = |b: usize| text.get(..b.min(text.len())).map_or(0, |s| s.chars().count());
+            Some((ch(ed.caret.min(ed.anchor)), ch(ed.caret.max(ed.anchor))))
+        });
+        let mut cx = Ctx { clip, layer: l, e, mt, t, actions: Vec::new(), autos: Vec::new(), range };
+        if section(ui, app, "Responsive Design - Position", &t) {
+            crate::panels::graphics_templates::responsive_position(app, ui, clip, &it, l, &mut cx.autos, &mut cx.actions);
+        }
         // ---- align and transform
         if section(ui, app, "Align and Transform", &t) {
             ui.horizontal(|ui| {
diff --git a/crates/ui-egui/src/panels/graphics_templates.rs b/crates/ui-egui/src/panels/graphics_templates.rs
new file mode 100644
index 000000000..eb402ee8c
--- /dev/null
+++ b/crates/ui-egui/src/panels/graphics_templates.rs
@@ -0,0 +1,784 @@
+//! Essential Graphics ▸ Browse (the Graphics Templates library), the template / responsive-design
+//! sections of the Edit tab, and the Export As Motion Graphics Template, Install Motion Graphics
+//! Template and Replace Fonts in Projects dialogs (M10.7).
+//!
+//! The library lists the built-in templates (original FilmCraft designs) and the user's
+//! `.fcgt` templates with thumbnails rendered by the engine, a search field and a category
+//! filter. Click selects, double-click (or Apply) places the template at the playhead, dragging a
+//! card onto the timeline places it there. Everything runs engine commands
+//! (`graphics.template.*`, `graphics.setRoll`, `graphics.setResponsiveTime`, `graphics.pin`,
+//! `file.replaceFonts`).
+//!
+//! Automation ids: `essentialGraphics.tab.browse|edit`, `gfxTemplates.search`,
+//! `gfxTemplates.category`, `gfxTemplates.item.<template id>`, `gfxTemplates.apply`,
+//! `gfxTemplates.install`, `gfxTemplates.remove`; Edit tab: `gfxTemplates.control.<control id>`,
+//! `graphics.roll.mode`, `graphics.roll.<startOffScreen|endOffScreen|preroll|easeIn|easeOut|postroll>`,
+//! `graphics.time.intro|outro`, `graphics.pin.to`, `graphics.pin.<left|top|right|bottom>`;
+//! dialogs: `exportTemplate.name|category|control.<n>|ok|cancel`, `replaceFonts.from|to|ok|cancel`.
+//! The UI state (`UiState::gfx_templates`) is serde, so agents can read and set it.
+
+use std::sync::Arc;
+
+use egui::{Align2, Color32, Rect, Sense, Stroke, StrokeKind, pos2, vec2};
+use filmcraft_engine::graphic_templates::{LibraryEntry, library, thumbnail_cached};
+use filmcraft_project::graphic::{self, layer_display_name, layer_indices};
+use filmcraft_project::gtemplate::ControlKind;
+use filmcraft_project::{ClipId, ParamValue, RollMode, TrackItem};
+use filmcraft_time::Tick;
+use serde::{Deserialize, Serialize};
+use serde_json::{Value, json};
+
+use crate::FilmcraftApp;
+use crate::theme::Tokens;
+
+/// One candidate property in the Export As Motion Graphics Template dialog.
+#[derive(Clone, Debug, Default, PartialEq, Serialize, Deserialize)]
+#[serde(default)]
+pub struct ExportControl {
+    pub layer: usize,
+    pub param: String,
+    pub name: String,
+    pub on: bool,
+}
+
+#[derive(Clone, Debug, Default, PartialEq, Serialize, Deserialize)]
+#[serde(default)]
+pub struct ExportDraft {
+    pub clip: u64,
+    pub name: String,
+    pub category: String,
+    pub description: String,
+    pub controls: Vec<ExportControl>,
+    pub error: String,
+}
+
+#[derive(Clone, Debug, Default, PartialEq, Serialize, Deserialize)]
+#[serde(default)]
+pub struct ReplaceDraft {
+    pub from: String,
+    pub to: String,
+    pub error: String,
+}
+
+/// Frontend state (`UiState::gfx_templates`).
+#[derive(Clone, Debug, Default, PartialEq, Serialize, Deserialize)]
+#[serde(default)]
+pub struct GfxTemplatesState {
+    /// Essential Graphics tab: "browse", "edit", or "" (Edit when a graphic is selected).
+    pub tab: String,
+    pub query: String,
+    /// Category filter ("" = all).
+    pub category: String,
+    pub selected: Option<String>,
+    pub export: Option<ExportDraft>,
+    pub replace: Option<ReplaceDraft>,
+}
+
+type Elems = Vec<(String, Rect, String)>;
+
+// ------------------------------------------------------------------------------------------------
+// Library cache and thumbnails
+// ------------------------------------------------------------------------------------------------
+
+#[derive(Clone)]
+struct Lib(Arc<(f64, Vec<LibraryEntry>)>);
+
+fn lib_id() -> egui::Id {
+    egui::Id::new("gfx-template-library")
+}
+
+/// The template library, re-read at most every two seconds (or after [`invalidate`]).
+fn cached_library(app: &FilmcraftApp, ctx: &egui::Context) -> Vec<LibraryEntry> {
+    let now = ctx.input(|i| i.time);
+    if let Some(Lib(l)) = ctx.data(|d| d.get_temp::<Lib>(lib_id()))
+        && now - l.0 < 2.0
+    {
+        return l.1.clone();
+    }
+    let v = library(&app.session);
+    ctx.data_mut(|d| d.insert_temp(lib_id(), Lib(Arc::new((now, v.clone())))));
+    v
+}
+
+fn invalidate(ctx: &egui::Context) {
+    ctx.data_mut(|d| d.remove::<Lib>(lib_id()));
+}
+
+const THUMB_W: u32 = 192;
+
+fn thumb_texture(ctx: &egui::Context, e: &LibraryEntry) -> egui::TextureHandle {
+    let px = thumbnail_cached(&e.template, THUMB_W);
+    let key = egui::Id::new(("gfx-thumb", e.template.id.as_str(), Arc::as_ptr(&px) as usize));
+    if let Some(t) = ctx.data(|d| d.get_temp::<egui::TextureHandle>(key)) {
+        return t;
+    }
+    let img = egui::ColorImage::from_rgba_unmultiplied([px.0 as usize, px.1 as usize], &px.2);
+    let t = ctx.load_texture(format!("gfx-thumb-{}", e.template.id), img, egui::TextureOptions::LINEAR);
+    ctx.data_mut(|d| d.insert_temp(key, t.clone()));
+    t
+}
+
+// ------------------------------------------------------------------------------------------------
+// Essential Graphics panel
+// ------------------------------------------------------------------------------------------------
+
+fn tab_button(ui: &mut egui::Ui, r: Rect, label: &str, on: bool, t: &Tokens) -> egui::Response {
+    let resp = ui.interact(r, egui::Id::new(("eg-tab", label)), Sense::click());
+    if on {
+        ui.painter().line_segment([pos2(r.min.x + 6.0, r.max.y - 1.5), pos2(r.max.x - 6.0, r.max.y - 1.5)], Stroke::new(2.0, t.accent));
+    }
+    ui.painter().text(r.center(), Align2::CENTER_CENTER, label, Tokens::semibold(12.0), if on { t.text } else { t.text_dim });
+    resp
+}
+
+/// The Essential Graphics panel: Browse and Edit tabs.
+pub fn essential_graphics(app: &mut FilmcraftApp, ui: &mut egui::Ui, rect: Rect) {
+    let t = app.tokens;
+    let tab = match app.ui.gfx_templates.tab.as_str() {
+        "browse" => "browse",
+        "edit" => "edit",
+        _ if crate::panels::graphics::graphic_selected(app) => "edit",
+        _ => "browse",
+    };
+    let head = Rect::from_min_size(rect.min, vec2(rect.width(), 30.0));
+    ui.painter().line_segment([head.left_bottom(), head.right_bottom()], Stroke::new(1.0, t.separator));
+    let mut elems: Elems = Vec::new();
+    for (i, (id, label)) in [("browse", "Browse"), ("edit", "Edit")].into_iter().enumerate() {
+        let r = Rect::from_min_size(pos2(head.min.x + 8.0 + i as f32 * 80.0, head.min.y), vec2(76.0, 30.0));
+        if tab_button(ui, r, label, tab == id, &t).clicked() {
+            app.ui.gfx_templates.tab = id.into();
+        }
+        elems.push((format!("essentialGraphics.tab.{id}"), r, label.into()));
+    }
+    for (id, r, l) in elems {
+        app.auto.add(&id, r, &l);
+    }
+    let body = Rect::from_min_max(pos2(rect.min.x, head.max.y + 1.0), rect.max);
+    if tab == "edit" {
+        crate::panels::graphics::properties(app, ui, body);
+    } else {
+        browse(app, ui, body);
+    }
+}
+
+fn browse(app: &mut FilmcraftApp, ui: &mut egui::Ui, rect: Rect) {
+    let t = app.tokens;
+    let ctx = ui.ctx().clone();
+    let lib = cached_library(app, &ctx);
+    let mut elems: Elems = Vec::new();
+    let mut actions: Vec<(String, Value)> = Vec::new();
+    let mut install = false;
+    let mut cats: Vec<String> = lib.iter().map(|e| e.template.category.clone()).collect();
+    cats.sort();
+    cats.dedup();
+    let mut b = ui.new_child(egui::UiBuilder::new().max_rect(rect.shrink2(vec2(10.0, 6.0))).id_salt("gfx-browse"));
+    b.set_clip_rect(rect);
+    let st = &mut app.ui.gfx_templates;
+    b.horizontal(|ui| {
+        let r = ui.add(egui::TextEdit::singleline(&mut st.query).hint_text("Search templates").desired_width((ui.available_width() - 230.0).max(110.0)));
+        elems.push(("gfxTemplates.search".into(), r.rect, "Search".into()));
+        let cur = if st.category.is_empty() { "All Categories".to_string() } else { st.category.clone() };
+        let r = egui::ComboBox::from_id_salt("gfx-cat").selected_text(cur).width(130.0).show_ui(ui, |ui| {
+            ui.selectable_value(&mut st.category, String::new(), "All Categories");
+            for c in &cats {
+                ui.selectable_value(&mut st.category, c.clone(), c);
+            }
+        });
+        elems.push(("gfxTemplates.category".into(), r.response.rect, "Category".into()));
+        let r = ui.button("Install…").on_hover_text("Install Motion Graphics Template (.fcgt)");
+        elems.push(("gfxTemplates.install".into(), r.rect, "Install".into()));
+        install = r.clicked();
+    });
+    b.add_space(6.0);
+    let q = st.query.to_ascii_lowercase();
+    let shown: Vec<&LibraryEntry> = lib
+        .iter()
+        .filter(|e| {
+            let tt = &e.template;
+            (st.category.is_empty() || tt.category == st.category)
+                && (q.is_empty()
+                    || tt.name.to_ascii_lowercase().contains(&q)
+                    || tt.category.to_ascii_lowercase().contains(&q)
+                    || tt.description.to_ascii_lowercase().contains(&q)
+                    || tt.tags.iter().any(|x| x.to_ascii_lowercase().contains(&q)))
+        })
+        .collect();
+    let selected = st.selected.clone();
+    let card = vec2(160.0, 90.0 + 34.0);
+    let avail = (b.available_width()).max(card.x);
+    let cols = ((avail + 8.0) / (card.x + 8.0)).floor().max(1.0) as usize;
+    let mut new_sel: Option<String> = None;
+    let mut apply: Option<String> = None;
+    egui::ScrollArea::vertical().id_salt("gfx-browse-scroll").max_height((rect.max.y - b.cursor().min.y - 40.0).max(60.0)).auto_shrink([false, false]).show(
+        &mut b,
+        |ui| {
+            if shown.is_empty() {
+                ui.label(egui::RichText::new("No templates match.").color(t.text_faint));
+            }
+            for row in shown.chunks(cols) {
+                ui.horizontal(|ui| {
+                    for e in row {
+                        let (r, resp) = ui.allocate_exact_size(card, Sense::click_and_drag());
+                        let on = selected.as_deref() == Some(e.template.id.as_str());
+                        ui.painter().rect_filled(
+                            r,
+                            4.0,
+                            if on {
+                                t.row_selected
+                            } else if resp.hovered() {
+                                t.hover
+                            } else {
+                                t.field_bg
+                            },
+                        );
+                        let ir = Rect::from_min_size(r.min + vec2(5.0, 5.0), vec2(card.x - 10.0, 84.0));
+                        // dark checker-free backdrop so white titles read
+                        ui.painter().rect_filled(ir, 2.0, Color32::from_rgb(0x2a, 0x30, 0x3a));
+                        let tex = thumb_texture(ui.ctx(), e);
+                        let sz = tex.size_vec2();
+                        let k = (ir.width() / sz.x).min(ir.height() / sz.y);
+                        let tr = Rect::from_center_size(ir.center(), sz * k);
+                        ui.painter().image(tex.id(), tr, Rect::from_min_max(pos2(0.0, 0.0), pos2(1.0, 1.0)), Color32::WHITE);
+                        ui.painter().text(pos2(r.min.x + 6.0, ir.max.y + 6.0), Align2::LEFT_TOP, &e.template.name, Tokens::ui(11.5), t.text);
+                        let sub = if e.path.is_some() { format!("{} · My Template", e.template.category) } else { e.template.category.clone() };
+                        ui.painter().text(pos2(r.min.x + 6.0, ir.max.y + 20.0), Align2::LEFT_TOP, sub, Tokens::ui(10.0), t.text_faint);
+                        if on {
+                            ui.painter().rect_stroke(r, 4.0, Stroke::new(1.5, t.accent), StrokeKind::Inside);
+                        }
+                        elems.push((format!("gfxTemplates.item.{}", e.template.id), r, e.template.name.clone()));
+                        let resp = resp.on_hover_text(&e.template.description);
+                        if resp.drag_started() {
+                            crate::panels::start_drag_template(ui, &e.template.id, &e.template.name);
+                        }
+                        if resp.double_clicked() {
+                            apply = Some(e.template.id.clone());
+                        } else if resp.clicked() {
+                            new_sel = Some(e.template.id.clone());
+                        }
+                    }
+                });
+                ui.add_space(6.0);
+            }
+        },
+    );
+    b.add_space(4.0);
+    let sel_entry = selected.as_ref().and_then(|s| lib.iter().find(|e| &e.template.id == s));
+    b.horizontal(|ui| {
+        let r = ui.add_enabled(sel_entry.is_some(), egui::Button::new("Apply"));
+        elems.push(("gfxTemplates.apply".into(), r.rect, "Apply".into()));
+        if r.clicked() {
+            apply = selected.clone();
+        }
+        let user = sel_entry.is_some_and(|e| e.path.is_some());
+        let r = ui.add_enabled(user, egui::Button::new("Remove"));
+        elems.push(("gfxTemplates.remove".into(), r.rect, "Remove".into()));
+        if r.clicked()
+            && let Some(id) = &selected
+        {
+            actions.push(("graphics.template.remove".into(), json!({"template": id})));
+        }
+        if let Some(e) = sel_entry {
+            ui.label(egui::RichText::new(format!("{} editable properties", e.template.controls.len())).color(t.text_faint));
+        }
+    });
+    if let Some(s) = new_sel {
+        app.ui.gfx_templates.selected = Some(s);
+    }
+    if let Some(id) = apply {
+        app.ui.gfx_templates.selected = Some(id.clone());
+        actions.push(("graphics.template.apply".into(), json!({"template": id})));
+    }
+    for (id, r, l) in elems {
+        app.auto.add(&id, r, &l);
+    }
+    if install {
+        let _ = route(app, &ctx, "graphics.template.install", &json!({}));
+    }
+    for (cmd, p) in actions {
+        match app.session.execute(&cmd, p) {
+            Ok(v) => {
+                if cmd == "graphics.template.apply" {
+                    // edit the new graphic's properties
+                    app.ui.gfx_templates.tab = "edit".into();
+                    let _ = v;
+                }
+                invalidate(&ctx);
+            }
+            Err(e) => app.ui.status = e.to_string(),
+        }
+    }
+}
+
+// ------------------------------------------------------------------------------------------------
+// Edit tab sections (called from `graphics::properties`)
+// ------------------------------------------------------------------------------------------------
+
+fn hex(c: [f32; 4]) -> String {
+    let q = |v: f32| (v.clamp(0.0, 1.0) * 255.0).round() as u8;
+    format!("#{:02x}{:02x}{:02x}", q(c[0]), q(c[1]), q(c[2]))
+}
+
+fn row_label(ui: &mut egui::Ui, label: &str, t: &Tokens) -> egui::Ui {
+    let (r, _) = ui.allocate_exact_size(vec2(ui.available_width(), 28.0), Sense::hover());
+    ui.painter().text(pos2(r.min.x + 18.0, r.center().y), Align2::LEFT_CENTER, label, Tokens::ui(12.0), t.text_dim);
+    ui.new_child(
+        egui::UiBuilder::new()
+            .max_rect(Rect::from_min_max(pos2(r.min.x + 130.0, r.min.y + 3.0), pos2(r.max.x - 6.0, r.max.y - 3.0)))
+            .layout(egui::Layout::left_to_right(egui::Align::Center)),
+    )
+}
+
+/// The template's editable properties (Essential Graphics ▸ Edit for a graphic made from a
+/// template). Returns false when the graphic has no template.
+pub fn template_controls(
+    app: &FilmcraftApp,
+    ui: &mut egui::Ui,
+    clip: ClipId,
+    it: &TrackItem,
+    mt: Tick,
+    autos: &mut Elems,
+    actions: &mut Vec<(String, Value)>,
+) -> bool {
+    let t = app.tokens;
+    let Some(link) = it.graphic.as_ref().and_then(|m| m.template.as_ref()) else { return false };
+    ui.label(egui::RichText::new(format!("   Template: {}", link.name)).color(t.text_faint).size(11.0));
+    for c in &link.controls {
+        let Some(e) = it.effects.iter().find(|e| graphic::is_layer(e) && filmcraft_project::gtemplate::layer_uid(e) == c.layer) else { continue };
+        let id = format!("gfxTemplates.control.{}", c.id);
+        let pv = e.params.get(&c.param).map(|p| p.value_at(mt));
+        // multi-line text: the label on its own row, the field full width below it
+        if c.kind == ControlKind::Text
+            && c.param != "enabled"
+            && let Some(ParamValue::Text(s0)) = &pv
+            && s0.contains('\n')
+        {
+            ui.label(egui::RichText::new(format!("    {}", c.name)).color(t.text_dim).size(12.0));
+            let mut s = s0.clone();
+            let rows = s.lines().count().clamp(2, 8);
+            let r = ui
+                .horizontal(|ui| {
+                    ui.add_space(14.0);
+                    ui.add(egui::TextEdit::multiline(&mut s).desired_rows(rows).desired_width(ui.available_width() - 8.0))
+                })
+                .inner;
+            autos.push((id, r.rect, c.name.clone()));
+            if s != *s0 {
+                actions.push(("graphics.template.set".into(), json!({"clip": clip.0, "control": c.id, "value": s})));
+            }
+            continue;
+        }
+        let mut vui = row_label(ui, &c.name, &t);
+        let set =
+            |v: Value, actions: &mut Vec<(String, Value)>| actions.push(("graphics.template.set".into(), json!({"clip": clip.0, "control": c.id, "value": v})));
+        match c.kind {
+            _ if c.param == "enabled" => {
+                let mut b = e.enabled;
+                let r = vui.checkbox(&mut b, "");
+                autos.push((id, r.rect, c.name.clone()));
+                if r.changed() {
+                    set(json!(b), actions);
+                }
+            }
+            ControlKind::Text => {
+                let mut s = match pv {
+                    Some(ParamValue::Text(s)) => s,
+                    _ => String::new(),
+                };
+                let before = s.clone();
+                let r = vui.add(egui::TextEdit::singleline(&mut s).desired_width(vui.available_width() - 4.0));
+                autos.push((id, r.rect, c.name.clone()));
+                if s != before {
+                    set(json!(s), actions);
+                }
+            }
+            ControlKind::Color => {
+                let col = pv.and_then(|v| v.as_color()).unwrap_or([1.0; 4]);
+                let q = |v: f32| (v.clamp(0.0, 1.0) * 255.0).round() as u8;
+                let mut c32 = Color32::from_rgb(q(col[0]), q(col[1]), q(col[2]));
+                let r = egui::color_picker::color_edit_button_srgba(&mut vui, &mut c32, egui::color_picker::Alpha::Opaque);
+                autos.push((id, r.rect, c.name.clone()));
+                if r.changed() {
+                    let [a, b2, cc, _] = c32.to_srgba_unmultiplied();
+                    set(json!(hex([a as f32 / 255.0, b2 as f32 / 255.0, cc as f32 / 255.0, 1.0])), actions);
+                }
+            }
+            ControlKind::Slider => {
+                let mut v = pv.and_then(|v| v.as_f64()).unwrap_or(0.0);
+                let (lo, hi) = (c.min.unwrap_or(0.0), c.max.unwrap_or(100.0));
+                let r = vui.add(egui::Slider::new(&mut v, lo..=hi));
+                autos.push((id, r.rect, c.name.clone()));
+                if r.changed() {
+                    set(json!(v), actions);
+                }
+            }
+            ControlKind::Checkbox => {
+                let mut b = pv.and_then(|v| v.as_bool()).unwrap_or(false);
+                let r = vui.checkbox(&mut b, "");
+                autos.push((id, r.rect, c.name.clone()));
+                if r.changed() {
+                    set(json!(b), actions);
+                }
+            }
+            ControlKind::Font => {
+                let fam = match pv {
+                    Some(ParamValue::Text(s)) => s,
+                    _ => String::new(),
+                };
+                let r = egui::ComboBox::from_id_salt(("gfx-tpl-font", clip.0, c.id.as_str())).selected_text(&fam).width(170.0).height(360.0).show_ui(
+                    &mut vui,
+                    |ui| {
+                        for (f, _) in filmcraft_text::families() {
+                            if ui.selectable_label(f == fam, &f).clicked() {
+                                set(json!(f), actions);
+                            }
+                        }
+                    },
+                );
+                autos.push((id, r.response.rect, c.name.clone()));
+            }
+            ControlKind::Position => {
+                let v = pv.and_then(|v| v.as_vec2()).unwrap_or_default();
+                let (mut x, mut y) = (v.x, v.y);
+                let rx = vui.add(egui::DragValue::new(&mut x).speed(1.0).prefix("X "));
+                let ry = vui.add(egui::DragValue::new(&mut y).speed(1.0).prefix("Y "));
+                autos.push((format!("{id}.x"), rx.rect, c.name.clone()));
+                autos.push((format!("{id}.y"), ry.rect, c.name.clone()));
+                if rx.changed() || ry.changed() {
+                    set(json!([x, y]), actions);
+                }
+            }
+        }
+    }
+    true
+}
+
+/// Responsive Design – Time (intro / outro and roll / crawl), shown with no layer selected.
+pub fn responsive_time(app: &FilmcraftApp, ui: &mut egui::Ui, clip: ClipId, it: &TrackItem, autos: &mut Elems, actions: &mut Vec<(String, Value)>) {
+    let t = app.tokens;
+    let rate = app.session.sequence_rate();
+    let m = it.graphic.as_deref().cloned().unwrap_or_default();
+    let frames = |x: Tick| rate.frame_at(rate.snap_nearest(x)) as f64;
+    for (key, label, v) in [("intro", "Intro Duration", m.intro), ("outro", "Outro Duration", m.outro)] {
+        let mut vui = row_label(ui, label, &t);
+        let mut f = frames(v);
+        let r = vui.add(egui::DragValue::new(&mut f).speed(0.2).range(0.0..=100_000.0).suffix(" fr"));
+        autos.push((format!("graphics.time.{key}"), r.rect, label.into()));
+        if r.changed() {
+            actions.push(("graphics.setResponsiveTime".into(), json!({"clip": clip.0, format!("{key}Frames"): f.round()})));
+        }
+    }
+    let mut vui = row_label(ui, "Roll", &t);
+    let mut mode = m.roll.mode;
+    let r = egui::ComboBox::from_id_salt(("gfx-roll", clip.0)).selected_text(mode.label()).width(120.0).show_ui(&mut vui, |ui| {
+        for x in RollMode::ALL {
+            ui.selectable_value(&mut mode, x, x.label());
+        }
+    });
+    autos.push(("graphics.roll.mode".into(), r.response.rect, "Roll".into()));
+    if mode != m.roll.mode {
+        let name = match mode {
+            RollMode::Off => "off",
+            RollMode::Roll => "roll",
+            RollMode::CrawlLeft => "crawlLeft",
+            RollMode::CrawlRight => "crawlRight",
+        };
+        actions.push(("graphics.setRoll".into(), json!({"clip": clip.0, "mode": name})));
+    }
+    if m.roll.mode == RollMode::Off {
+        return;
+    }
+    let mut vui = row_label(ui, "", &t);
+    for (key, label, v) in [("startOffScreen", "Start Off Screen", m.roll.start_off_screen), ("endOffScreen", "End Off Screen", m.roll.end_off_screen)] {
+        let mut b = v;
+        let r = vui.checkbox(&mut b, label);
+        autos.push((format!("graphics.roll.{key}"), r.rect, label.into()));
+        if r.changed() {
+            actions.push(("graphics.setRoll".into(), json!({"clip": clip.0, key: b})));
+        }
+    }
+    for (key, label, v) in [
+        ("preroll", "Preroll", m.roll.preroll),
+        ("easeIn", "Ease In", m.roll.ease_in),
+        ("easeOut", "Ease Out", m.roll.ease_out),
+        ("postroll", "Postroll", m.roll.postroll),
+    ] {
+        let mut vui = row_label(ui, label, &t);
+        let mut f = frames(v);
+        let r = vui.add(egui::DragValue::new(&mut f).speed(0.2).range(0.0..=100_000.0).suffix(" fr"));
+        autos.push((format!("graphics.roll.{key}"), r.rect, label.into()));
+        if r.changed() {
+            actions.push(("graphics.setRoll".into(), json!({"clip": clip.0, format!("{key}Frames"): f.round()})));
+        }
+    }
+}
+
+/// Responsive Design – Position for the selected layer: Pin To and the pinned edges.
+pub fn responsive_position(
+    app: &FilmcraftApp,
+    ui: &mut egui::Ui,
+    clip: ClipId,
+    it: &TrackItem,
+    layer: usize,
+    autos: &mut Elems,
+    actions: &mut Vec<(String, Value)>,
+) {
+    let t = app.tokens;
+    let idx = layer_indices(&it.effects);
+    let Some(&ei) = idx.get(layer) else { return };
+    let pin = it.effects[ei].layer.as_ref().and_then(|x| x.pin.clone());
+    let target_name = match pin.as_ref().map(|p| p.to) {
+        None => "None".to_string(),
+        Some(filmcraft_project::PinTarget::Frame) => "Video Frame".to_string(),
+        Some(filmcraft_project::PinTarget::Layer(uid)) => (0..idx.len())
+            .find(|&i| filmcraft_project::gtemplate::layer_uid(&it.effects[idx[i]]) == uid)
+            .map(|i| layer_display_name(&it.effects[idx[i]], i))
+            .unwrap_or_default(),
+    };
+    let mut vui = row_label(ui, "Pin To", &t);
+    let r = egui::ComboBox::from_id_salt(("gfx-pin", clip.0, layer)).selected_text(&target_name).width(150.0).show_ui(&mut vui, |ui| {
+        if ui.selectable_label(pin.is_none(), "None").clicked() {
+            actions.push(("graphics.pin".into(), json!({"clip": clip.0, "layer": layer, "to": "none"})));
+        }
+        if ui.selectable_label(target_name == "Video Frame", "Video Frame").clicked() {
+            actions.push(("graphics.pin".into(), json!({"clip": clip.0, "layer": layer, "to": "frame"})));
+        }
+        for (i, &e) in idx.iter().enumerate() {
+            if i != layer {
+                let n = layer_display_name(&it.effects[e], i);
+                if ui.selectable_label(n == target_name, &n).clicked() {
+                    actions.push(("graphics.pin".into(), json!({"clip": clip.0, "layer": layer, "to": i})));
+                }
+            }
+        }
+    });
+    autos.push(("graphics.pin.to".into(), r.response.rect, "Pin To".into()));
+    let Some(p) = pin else { return };
+    let mut vui = row_label(ui, "Pinned Edges", &t);
+    let mut edges = [p.left, p.top, p.right, p.bottom];
+    let to = match p.to {
+        filmcraft_project::PinTarget::Frame => json!("frame"),
+        filmcraft_project::PinTarget::Layer(uid) => {
+            json!((0..idx.len()).find(|&i| filmcraft_project::gtemplate::layer_uid(&it.effects[idx[i]]) == uid).unwrap_or(0))
+        }
+    };
+    let mut changed = false;
+    for (k, name) in ["left", "top", "right", "bottom"].iter().enumerate() {
+        let r = vui.toggle_value(&mut edges[k], name[..1].to_ascii_uppercase());
+        autos.push((format!("graphics.pin.{name}"), r.rect, format!("Pin {name} edge")));
+        changed |= r.changed();
+    }
+    if changed {
+        let list: Vec<&str> = ["left", "top", "right", "bottom"].iter().zip(edges).filter(|(_, on)| *on).map(|(n, _)| *n).collect();
+        if list.is_empty() {
+            actions.push(("graphics.pin".into(), json!({"clip": clip.0, "layer": layer, "to": "none"})));
+        } else {
+            actions.push(("graphics.pin".into(), json!({"clip": clip.0, "layer": layer, "to": to, "edges": list})));
+        }
+    }
+}
+
+// ------------------------------------------------------------------------------------------------
+// Menu routing and dialogs
+// ------------------------------------------------------------------------------------------------
+
+/// Menu / shortcut entry points of this module (None for other ids).
+pub fn route(app: &mut FilmcraftApp, ctx: &egui::Context, id: &str, params: &Value) -> Option<Result<Value, String>> {
+    let empty = params.as_object().is_none_or(|m| m.is_empty());
+    match id {
+        "graphics.template.install" if params.get("path").is_none() => {
+            let path = app.hooks.pick_open_file.as_mut().and_then(|f| f("FilmCraft Graphics Template", &["fcgt"]))?;
+            let r = app.session.execute(id, json!({"path": path})).map_err(|e| e.to_string());
+            invalidate(ctx);
+            Some(r)
+        }
+        "graphics.template.export" | "file.exportGraphicsTemplate" if empty => {
+            let clip = filmcraft_engine::graphics::target_clip(&app.session, &Value::Null);
+            let Some(clip) = clip else { return Some(Err("select a graphic clip".into())) };
+            let it = app.session.active_sequence().and_then(|q| q.find_item(clip)).map(|(_, i)| i.clone())?;
+            let idx = layer_indices(&it.effects);
+            let mut controls = Vec::new();
+            for (i, &ei) in idx.iter().enumerate() {
+                let e = &it.effects[ei];
+                let n = layer_display_name(e, i);
+                if e.effect == graphic::TEXT_LAYER {
+                    controls.push(ExportControl { layer: i, param: "text".into(), name: n.clone(), on: true });
+                    controls.push(ExportControl { layer: i, param: "font".into(), name: format!("{n} Font"), on: false });
+                    controls.push(ExportControl { layer: i, param: "size".into(), name: format!("{n} Size"), on: false });
+                }
+                controls.push(ExportControl { layer: i, param: "fill_color".into(), name: format!("{n} Color"), on: false });
+                controls.push(ExportControl { layer: i, param: "position".into(), name: format!("{n} Position"), on: false });
+                controls.push(ExportControl { layer: i, param: "enabled".into(), name: format!("Show {n}"), on: false });
+            }
+            app.ui.gfx_templates.export =
+                Some(ExportDraft { clip: clip.0, name: it.name.clone(), category: "My Templates".into(), controls, ..Default::default() });
+            Some(Ok(json!({"dialog": "exportTemplate"})))
+        }
+        "file.replaceFonts" if empty => {
+            let used = filmcraft_engine::graphic_templates::fonts_used(&app.session);
+            let from = used.first().map(|f| f.0.clone()).unwrap_or_default();
+            app.ui.gfx_templates.replace = Some(ReplaceDraft { from, to: filmcraft_text::fonts::DEFAULT_FAMILY.into(), error: String::new() });
+            Some(Ok(json!({"dialog": "replaceFonts"})))
+        }
+        _ => None,
+    }
+}
+
+/// Draw this module's dialogs.
+pub fn show(app: &mut FilmcraftApp, ctx: &egui::Context) {
+    export_dialog(app, ctx);
+    replace_dialog(app, ctx);
+}
+
+fn export_dialog(app: &mut FilmcraftApp, ctx: &egui::Context) {
+    let Some(mut d) = app.ui.gfx_templates.export.clone() else { return };
+    let mut elems: Elems = Vec::new();
+    let mut action: Option<bool> = None;
+    egui::Window::new("Export As Motion Graphics Template")
+        .collapsible(false)
+        .resizable(false)
+        .default_width(420.0)
+        .anchor(Align2::CENTER_CENTER, [0.0, 0.0])
+        .show(ctx, |ui| {
+            egui::Grid::new("gfx-export-grid").num_columns(2).show(ui, |ui| {
+                ui.label("Name:");
+                let r = ui.add(egui::TextEdit::singleline(&mut d.name).desired_width(260.0));
+                elems.push(("exportTemplate.name".into(), r.rect, "Name".into()));
+                ui.end_row();
+                ui.label("Category:");
+                let r = ui.add(egui::TextEdit::singleline(&mut d.category).desired_width(260.0));
+                elems.push(("exportTemplate.category".into(), r.rect, "Category".into()));
+                ui.end_row();
+                ui.label("Description:");
+                let r = ui.add(egui::TextEdit::singleline(&mut d.description).desired_width(260.0));
+                elems.push(("exportTemplate.description".into(), r.rect, "Description".into()));
+                ui.end_row();
+            });
+            ui.separator();
+            ui.label("Editable properties:");
+            egui::ScrollArea::vertical().max_height(220.0).show(ui, |ui| {
+                for (n, c) in d.controls.iter_mut().enumerate() {
+                    ui.horizontal(|ui| {
+                        let r = ui.checkbox(&mut c.on, "");
+                        elems.push((format!("exportTemplate.control.{n}"), r.rect, c.name.clone()));
+                        ui.add(egui::TextEdit::singleline(&mut c.name).desired_width(220.0));
+                        ui.label(egui::RichText::new(c.param.replace('_', " ")).weak());
+                    });
+                }
+            });
+            ui.label(egui::RichText::new("Saved as a FilmCraft graphics template (.fcgt) in your templates folder.").weak().size(11.0));
+            if !d.error.is_empty() {
+                ui.colored_label(Color32::from_rgb(0xff, 0x80, 0x80), &d.error);
+            }
+            ui.horizontal(|ui| {
+                let ok = ui.button("Export");
+                elems.push(("exportTemplate.ok".into(), ok.rect, "Export".into()));
+                let cancel = ui.button("Cancel");
+                elems.push(("exportTemplate.cancel".into(), cancel.rect, "Cancel".into()));
+                if ok.clicked() {
+                    action = Some(true);
+                }
+                if cancel.clicked() {
+                    action = Some(false);
+                }
+            });
+        });
+    for (id, r, l) in elems {
+        app.auto.add(&id, r, &l);
+    }
+    match action {
+        Some(true) => {
+            let controls: Vec<Value> = d.controls.iter().filter(|c| c.on).map(|c| json!({"layer": c.layer, "param": c.param, "name": c.name})).collect();
+            let p = json!({"clip": d.clip, "name": d.name, "category": d.category, "description": d.description, "controls": controls});
+            match app.session.execute("graphics.template.export", p) {
+                Ok(v) => {
+                    app.ui.gfx_templates.export = None;
+                    app.ui.status = format!("Exported graphics template to {}", v["path"].as_str().unwrap_or_default());
+                    invalidate(ctx);
+                }
+                Err(e) => {
+                    d.error = e.to_string();
+                    app.ui.gfx_templates.export = Some(d);
+                }
+            }
+        }
+        Some(false) => app.ui.gfx_templates.export = None,
+        None => app.ui.gfx_templates.export = Some(d),
+    }
+}
+
+fn replace_dialog(app: &mut FilmcraftApp, ctx: &egui::Context) {
+    let Some(mut d) = app.ui.gfx_templates.replace.clone() else { return };
+    let used = filmcraft_engine::graphic_templates::fonts_used(&app.session);
+    let mut elems: Elems = Vec::new();
+    let mut action: Option<bool> = None;
+    egui::Window::new("Replace Fonts in Projects").collapsible(false).resizable(false).default_width(440.0).anchor(Align2::CENTER_CENTER, [0.0, 0.0]).show(
+        ctx,
+        |ui| {
+            ui.label("Fonts used in the project:");
+            egui::Grid::new("gfx-fonts-used").striped(true).num_columns(3).show(ui, |ui| {
+                for (f, st, n) in &used {
+                    let missing = filmcraft_text::resolve(f, st).missing;
+                    ui.label(if missing {
+                        egui::RichText::new(format!("{f} (missing)")).color(Color32::from_rgb(0xff, 0xa0, 0x60))
+                    } else {
+                        egui::RichText::new(f)
+                    });
+                    ui.label(st);
+                    ui.label(format!("{n}"));
+                    ui.end_row();
+                }
+            });
+            ui.separator();
+            let mut fams: Vec<String> = used.iter().map(|u| u.0.clone()).collect();
+            fams.dedup();
+            ui.horizontal(|ui| {
+                ui.label("Replace:");
+                let r = egui::ComboBox::from_id_salt("gfx-rf-from").selected_text(&d.from).width(160.0).show_ui(ui, |ui| {
+                    for f in &fams {
+                        ui.selectable_value(&mut d.from, f.clone(), f);
+                    }
+                });
+                elems.push(("replaceFonts.from".into(), r.response.rect, "Replace".into()));
+                ui.label("with:");
+                let r = egui::ComboBox::from_id_salt("gfx-rf-to").selected_text(&d.to).width(160.0).height(360.0).show_ui(ui, |ui| {
+                    for (f, _) in filmcraft_text::families() {
+                        ui.selectable_value(&mut d.to, f.clone(), &f);
+                    }
+                });
+                elems.push(("replaceFonts.to".into(), r.response.rect, "With".into()));
+            });
+            if !d.error.is_empty() {
+                ui.colored_label(Color32::from_rgb(0xff, 0x80, 0x80), &d.error);
+            }
+            ui.horizontal(|ui| {
+                let ok = ui.button("OK");
+                elems.push(("replaceFonts.ok".into(), ok.rect, "OK".into()));
+                let cancel = ui.button("Cancel");
+                elems.push(("replaceFonts.cancel".into(), cancel.rect, "Cancel".into()));
+                if ok.clicked() {
+                    action = Some(true);
+                }
+                if cancel.clicked() {
+                    action = Some(false);
+                }
+            });
+        },
+    );
+    for (id, r, l) in elems {
+        app.auto.add(&id, r, &l);
+    }
+    match action {
+        Some(true) => match app.session.execute("file.replaceFonts", json!({"from": d.from, "to": d.to})) {
+            Ok(v) => {
+                app.ui.gfx_templates.replace = None;
+                app.ui.status = format!("Replaced {} font uses", v["replaced"]);
+            }
+            Err(e) => {
+                d.error = e.to_string();
+                app.ui.gfx_templates.replace = Some(d);
+            }
+        },
+        Some(false) => app.ui.gfx_templates.replace = None,
+        None => app.ui.gfx_templates.replace = Some(d),
+    }
+}
diff --git a/crates/ui-egui/src/panels/mod.rs b/crates/ui-egui/src/panels/mod.rs
index 436948440..fc6ab91c4 100644
--- a/crates/ui-egui/src/panels/mod.rs
+++ b/crates/ui-egui/src/panels/mod.rs
@@ -12,6 +12,7 @@ pub mod events;
 pub mod export_mode;
 pub mod file_dialogs;
 pub mod graphics;
+pub mod graphics_templates;
 pub mod import_mode;
 pub mod lumetri;
 pub mod masks;
@@ -60,7 +61,7 @@ pub fn show(app: &mut FilmcraftApp, ui: &mut egui::Ui, p: PanelKind, rect: Rect)
         PanelKind::LumetriColor => lumetri::show(app, ui, rect),
         PanelKind::Properties if graphics::graphic_selected(app) => graphics::properties(app, ui, rect),
         PanelKind::Properties => effect_controls::properties_panel(app, ui, rect),
-        PanelKind::EssentialGraphics => graphics::properties(app, ui, rect),
+        PanelKind::EssentialGraphics => graphics_templates::essential_graphics(app, ui, rect),
         PanelKind::History => misc::history(app, ui, rect),
         PanelKind::Markers => misc::markers(app, ui, rect),
         PanelKind::Info => misc::info(app, ui, rect),
@@ -83,6 +84,8 @@ pub fn show(app: &mut FilmcraftApp, ui: &mut egui::Ui, p: PanelKind, rect: Rect)
 enum DragPayload {
     Item(ItemId),
     Effect(String),
+    /// A graphics template (id, name) from Essential Graphics ▸ Browse.
+    Template(String, String),
 }
 
 fn payload_id() -> egui::Id {
@@ -92,6 +95,15 @@ fn payload_id() -> egui::Id {
 pub fn start_drag_item(ui: &egui::Ui, item: ItemId) {
     ui.ctx().data_mut(|d| d.insert_temp(payload_id(), Some(DragPayloadBox(DragPayload::Item(item)))));
 }
+pub fn start_drag_template(ui: &egui::Ui, id: &str, name: &str) {
+    ui.ctx().data_mut(|d| d.insert_temp(payload_id(), Some(DragPayloadBox(DragPayload::Template(id.to_string(), name.to_string())))));
+}
+pub fn dragged_template(ui: &egui::Ui) -> Option<String> {
+    match payload(ui) {
+        Some(DragPayload::Template(id, _)) => Some(id),
+        _ => None,
+    }
+}
 pub fn start_drag_effect(ui: &egui::Ui, id: &str) {
     ui.ctx().data_mut(|d| d.insert_temp(payload_id(), Some(DragPayloadBox(DragPayload::Effect(id.to_string())))));
 }
@@ -124,6 +136,7 @@ pub fn drag_ghost(app: &FilmcraftApp, ui: &egui::Ui) {
     if let Some(p) = ctx.pointer_hover_pos() {
         let label = match &pl {
             DragPayload::Item(i) => app.session.project.item(*i).map(|x| x.name.clone()).unwrap_or_default(),
+            DragPayload::Template(_, name) => name.clone(),
             DragPayload::Effect(e) => match e.strip_prefix("preset:") {
                 Some(name) => name.to_string(),
                 None => filmcraft_project::find_effect(e).map(|d| d.name.to_string()).unwrap_or_default(),
diff --git a/crates/ui-egui/src/panels/project.rs b/crates/ui-egui/src/panels/project.rs
index 884992db0..01f4d1a39 100644
--- a/crates/ui-egui/src/panels/project.rs
+++ b/crates/ui-egui/src/panels/project.rs
@@ -219,8 +219,9 @@ fn columns(r: Rect) -> [f32; 4] {
 }
 
 fn matches(app: &FilmcraftApp, id: ItemId, filter: &str) -> bool {
-    // graphic clip sources are internal (Premiere doesn't list graphics in the Project panel)
-    app.session.project.item(id).is_some_and(|i| !matches!(i.kind, ItemKind::Graphic { .. }))
+    // graphic clip sources are internal (Premiere doesn't list graphics in the Project panel),
+    // except source graphics (Upgrade to Source Graphic)
+    app.session.project.item(id).is_some_and(|i| !matches!(i.kind, ItemKind::Graphic { .. }) || app.session.project.source_graphics.contains_key(&id))
         && (filter.is_empty() || app.session.project.item(id).is_some_and(|i| i.name.to_ascii_lowercase().contains(filter)))
 }
 
diff --git a/crates/ui-egui/src/panels/timeline.rs b/crates/ui-egui/src/panels/timeline.rs
index 232403f7f..a4fb59b35 100644
--- a/crates/ui-egui/src/panels/timeline.rs
+++ b/crates/ui-egui/src/panels/timeline.rs
@@ -1720,6 +1720,28 @@ fn interact(app: &mut FilmcraftApp, ui: &mut egui::Ui, seq: &Sequence, layout: &
             crate::panels::clear_drag(ui);
         }
     }
+    // graphics templates from Essential Graphics ▸ Browse: placed on the video track under the pointer
+    if let Some(template) = crate::panels::dragged_template(ui)
+        && let Some(p) = ctx.pointer_hover_pos()
+        && layout.content.contains(p)
+    {
+        let t = snap(app, seq, layout, rate.snap_nearest(layout.tick_at(p.x).max(Tick::ZERO)), &[]);
+        let row = layout.row_at(p.y).cloned().filter(|r| r.kind == TrackKind::Video);
+        if let Some(row) = &row {
+            let r = Rect::from_min_max(pos2(layout.x_of(t), row.rect.min.y + 1.0), pos2(layout.x_of(t) + 60.0, row.rect.max.y - 1.0));
+            ui.painter().rect_stroke(r, 3.0, Stroke::new(1.5, Color32::WHITE), StrokeKind::Inside);
+        }
+        if ctx.input(|i| i.pointer.any_released()) {
+            let mut q = json!({"template": template, "time": t.0});
+            if let Some(row) = row {
+                q["track"] = json!(row.index);
+            }
+            if let Err(e) = app.session.execute("graphics.template.apply", q) {
+                app.ui.status = e.to_string();
+            }
+            crate::panels::clear_drag(ui);
+        }
+    }
     if let Some(effect) = crate::panels::dragged_effect(ui)
         && let Some(p) = ctx.pointer_hover_pos()
         && layout.content.contains(p)
diff --git a/crates/ui-egui/src/state.rs b/crates/ui-egui/src/state.rs
index 74cd20c19..2fc40c529 100644
--- a/crates/ui-egui/src/state.rs
+++ b/crates/ui-egui/src/state.rs
@@ -441,6 +441,10 @@ pub struct UiState {
     /// `panels::menu_dialogs`.
     #[serde(default)]
     pub extras: crate::panels::menu_dialogs::Extras,
+    /// Essential Graphics ▸ Browse and the graphics template / Replace Fonts dialogs. See
+    /// `panels::graphics_templates`.
+    #[serde(default)]
+    pub gfx_templates: crate::panels::graphics_templates::GfxTemplatesState,
     /// Lumetri Scopes, Timecode, Events, Progress and Reference Monitor settings. See
     /// `panels::panel_state`.
     #[serde(default)]
@@ -723,6 +727,7 @@ impl Default for UiState {
             guide_dialog: None,
             clip_dialog: None,
             extras: Default::default(),
+            gfx_templates: Default::default(),
             panels: Default::default(),
         }
     }
diff --git a/crates/ui-egui/tests/graphics_templates_ui.rs b/crates/ui-egui/tests/graphics_templates_ui.rs
new file mode 100644
index 000000000..57ffea712
--- /dev/null
+++ b/crates/ui-egui/tests/graphics_templates_ui.rs
@@ -0,0 +1,205 @@
+//! Essential Graphics ▸ Browse (Graphics Templates), the template properties in the Edit tab and
+//! the Export As Motion Graphics Template / Replace Fonts dialogs, driven headless through the
+//! control channel (like `graphics_ui.rs`). With `FILMCRAFT_UI_SHOTS=<dir>` it also renders the
+//! UI with wgpu and writes PNGs there for review.
+
+use std::sync::mpsc::{Sender, channel};
+
+use egui_kittest::Harness;
+use filmcraft_engine::Session;
+use filmcraft_ui_egui::FilmcraftApp;
+use filmcraft_ui_egui::control::ControlRequest;
+use serde_json::{Value, json};
+
+struct Driver {
+    harness: Harness<'static, FilmcraftApp>,
+    tx: Sender<ControlRequest>,
+    shots: Option<std::path::PathBuf>,
+}
+
+impl Driver {
+    fn demo(data: &str) -> Self {
+        let mut session = Session::default();
+        session.execute("file.openDemoProject", json!({})).expect("demo project");
+        let dir = std::env::temp_dir().join(format!("filmcraft-gfx-ui-{data}-{}", std::process::id()));
+        std::fs::create_dir_all(&dir).unwrap();
+        session.prefs_path = Some(dir.join("prefs.json"));
+        let (tx, rx) = channel();
+        let app = FilmcraftApp::new(session).with_control(rx);
+        let shots = std::env::var_os("FILMCRAFT_UI_SHOTS").map(std::path::PathBuf::from);
+        let mut b = Harness::builder().with_size(egui::vec2(1600.0, 980.0)).with_max_steps(10_000);
+        if shots.is_some() {
+            b = b.wgpu().with_pixels_per_point(1.0);
+        }
+        let harness = b.build_eframe(move |_cc| app);
+        let mut d = Driver { harness, tx, shots };
+        d.frames(4);
+        d
+    }
+    fn frames(&mut self, n: usize) {
+        for _ in 0..n {
+            let ctx = self.harness.ctx.clone();
+            let mut raw = std::mem::take(self.harness.input_mut());
+            eframe::App::raw_input_hook(self.harness.state_mut(), &ctx, &mut raw);
+            *self.harness.input_mut() = raw;
+            self.harness.step();
+        }
+    }
+    fn call(&mut self, method: &str, params: Value) -> Value {
+        let (req, reply) = ControlRequest::new(method, params.clone());
+        self.tx.send(req).unwrap();
+        for _ in 0..600 {
+            self.frames(1);
+            if let Ok(v) = reply.try_recv() {
+                return v;
+            }
+        }
+        panic!("no reply to {method} {params}");
+    }
+    fn ok(&mut self, method: &str, params: Value) -> Value {
+        let r = self.call(method, params.clone());
+        assert_eq!(r["ok"], true, "{method} {params}: {r}");
+        r["result"].clone()
+    }
+    fn exec(&mut self, command: &str, params: Value) -> Value {
+        self.ok("engine.execute", json!({"command": command, "params": params}))
+    }
+    fn shot(&mut self, name: &str) {
+        let Some(dir) = self.shots.clone() else { return };
+        self.frames(8);
+        let img = self.harness.render().expect("wgpu render");
+        std::fs::create_dir_all(&dir).unwrap();
+        img.save(dir.join(format!("{name}.png"))).unwrap();
+    }
+    fn ids(&mut self, prefix: &str) -> Vec<String> {
+        let v = self.ok("ui.elements", json!({"prefix": prefix}));
+        v.as_array().unwrap().iter().filter_map(|e| e["id"].as_str().map(str::to_string)).collect()
+    }
+    fn clips_named(&mut self, name: &str) -> Vec<u64> {
+        let q = self.exec("sequence.inspect", json!({}));
+        let mut out = Vec::new();
+        for t in q["video"].as_array().cloned().unwrap_or_default() {
+            for c in t["items"].as_array().cloned().unwrap_or_default() {
+                if c["name"] == name {
+                    out.push(c["clip"].as_u64().unwrap());
+                }
+            }
+        }
+        out
+    }
+}
+
+#[test]
+fn browse_search_apply_and_edit_template_properties() {
+    let mut d = Driver::demo("browse");
+    d.ok("ui.set", json!({"workspace": "Captions and Graphics"}));
+    d.ok("ui.menu.invoke", json!({"id": "window.panel.EssentialGraphics"}));
+    d.ok("ui.set", json!({"gfxTemplates": {"tab": "browse"}}));
+    d.frames(4);
+    let items = d.ids("gfxTemplates.item.");
+    assert!(items.len() >= 8, "built-in templates listed: {items:?}");
+    assert!(items.contains(&"gfxTemplates.item.builtin:end-credits-roll".to_string()));
+    d.shot("templates-browse");
+    // search narrows the list
+    d.ok("ui.click", json!({"id": "gfxTemplates.search"}));
+    d.ok("ui.type", json!({"text": "credits"}));
+    d.frames(3);
+    assert_eq!(d.ids("gfxTemplates.item."), vec!["gfxTemplates.item.builtin:end-credits-roll"]);
+    // select and apply
+    d.exec("playhead.set", json!({"seconds": 300}));
+    d.ok("ui.click", json!({"id": "gfxTemplates.item.builtin:end-credits-roll"}));
+    d.ok("ui.click", json!({"id": "gfxTemplates.apply"}));
+    d.frames(3);
+    let clips = d.clips_named("End Credits – Roll");
+    assert_eq!(clips.len(), 1, "applied once");
+    // the Edit tab shows the template's properties; editing one runs graphics.template.set
+    d.ok("ui.set", json!({"gfxTemplates": {"tab": "edit", "query": ""}}));
+    d.frames(3);
+    let ctl = d.ids("gfxTemplates.control.");
+    assert!(ctl.contains(&"gfxTemplates.control.heading".to_string()), "{ctl:?}");
+    d.shot("templates-edit");
+    d.ok("ui.click", json!({"id": "gfxTemplates.control.heading"}));
+    d.ok("ui.key", json!({"key": "Cmd+A"}));
+    d.ok("ui.type", json!({"text": "THANKS"}));
+    d.frames(2);
+    let c = d.exec("graphics.template.controls", json!({"clip": clips[0]}));
+    assert_eq!(c["controls"][0]["value"], "THANKS", "{c}");
+    // the roll options are in Responsive Design - Time (no layer selected)
+    d.exec("graphics.selectLayer", json!({"clip": clips[0], "layers": []}));
+    d.frames(3);
+    assert!(d.ids("graphics.roll.").contains(&"graphics.roll.startOffScreen".to_string()));
+    assert!(d.ids("graphics.time.").contains(&"graphics.time.intro".to_string()));
+}
+
+#[test]
+fn drag_template_onto_the_timeline() {
+    let mut d = Driver::demo("drag");
+    d.ok("ui.set", json!({"workspace": "Captions and Graphics"}));
+    d.ok("ui.menu.invoke", json!({"id": "window.panel.EssentialGraphics"}));
+    d.ok("ui.set", json!({"gfxTemplates": {"tab": "browse", "query": "tag"}}));
+    d.frames(4);
+    let before = d.clips_named("Callout – Tag").len();
+    d.ok("ui.drag", json!({"from": {"id": "gfxTemplates.item.builtin:callout-tag"}, "to": {"id": "timeline.tracks", "fx": 0.85, "fy": 0.08}, "steps": 16}));
+    d.frames(4);
+    assert_eq!(d.clips_named("Callout – Tag").len(), before + 1, "dropped on the timeline");
+}
+
+#[test]
+fn export_dialog_and_install_round_trip() {
+    let mut d = Driver::demo("export");
+    d.exec("playhead.set", json!({"seconds": 300}));
+    let r = d.exec("graphics.newText", json!({"text": "Exported Title"}));
+    let clip = r["clip"].as_u64().unwrap();
+    // the menu item opens the dialog
+    let v = d.exec("graphics.template.export", json!({}));
+    assert_eq!(v["dialog"], "exportTemplate");
+    d.frames(3);
+    assert!(d.ids("exportTemplate.").contains(&"exportTemplate.ok".to_string()));
+    let st = d.ok("ui.inspect", json!({}));
+    let draft = st["ui"]["gfx_templates"]["export"].clone();
+    assert_eq!(draft["clip"], clip, "{draft}");
+    d.ok("ui.click", json!({"id": "exportTemplate.name"}));
+    d.ok("ui.key", json!({"key": "Cmd+A"}));
+    d.ok("ui.type", json!({"text": "UI Title"}));
+    d.ok("ui.click", json!({"id": "exportTemplate.ok"}));
+    d.frames(3);
+    let list = d.exec("graphics.template.list", json!({"source": "user"}));
+    assert_eq!(list[0]["name"], "UI Title", "{list}");
+    assert_eq!(list[0]["controls"][0]["kind"], "text");
+    // the new template shows in Browse
+    d.ok("ui.set", json!({"workspace": "Captions and Graphics"}));
+    d.ok("ui.menu.invoke", json!({"id": "window.panel.EssentialGraphics"}));
+    d.ok("ui.set", json!({"gfxTemplates": {"tab": "browse", "query": ""}}));
+    d.frames(130);
+    assert!(d.ids("gfxTemplates.item.").contains(&"gfxTemplates.item.user:ui-title".to_string()));
+    // Replace Fonts dialog
+    let v = d.exec("file.replaceFonts", json!({}));
+    assert_eq!(v["dialog"], "replaceFonts");
+    d.frames(3);
+    assert!(d.ids("replaceFonts.").contains(&"replaceFonts.ok".to_string()));
+    d.ok("ui.set", json!({"gfxTemplates": {"replace": {"from": "Inter", "to": "Noto Serif"}}}));
+    d.frames(2);
+    d.ok("ui.click", json!({"id": "replaceFonts.ok"}));
+    d.frames(2);
+    let used = d.exec("graphics.fonts.used", json!({}));
+    assert!(used.as_array().unwrap().iter().any(|f| f["family"] == "Noto Serif"), "{used}");
+}
+
+#[test]
+fn type_tool_selection_styles_characters() {
+    let mut d = Driver::demo("chars");
+    d.exec("playhead.set", json!({"seconds": 300}));
+    let r = d.exec("graphics.newText", json!({"text": "Hello World"}));
+    let clip = r["clip"].as_u64().unwrap();
+    d.ok("ui.set", json!({"workspace": "Captions and Graphics"}));
+    d.exec("graphics.selectLayer", json!({"clip": clip, "layers": [0]}));
+    // a Type-tool selection of "World" (bytes 6..11)
+    d.ok("ui.set", json!({"tool": "Type", "gfxEdit": {"clip": clip, "layer": 0, "caret": 11, "anchor": 6}}));
+    d.frames(3);
+    d.ok("ui.click", json!({"id": "graphics.prop.faux_bold"}));
+    d.frames(2);
+    let l = d.exec("graphics.list", json!({"clip": clip}));
+    assert_eq!(l["layers"][0]["styles"], json!([{"start": 6, "end": 11, "fauxBold": true}]), "{l}");
+    let hist = d.exec("history.list", json!({}));
+    assert_eq!(hist["undo"].as_array().unwrap().last().unwrap(), "Character Style");
+}
diff --git a/docs/graphics.md b/docs/graphics.md
index 2038d4415..5b988bcc4 100644
--- a/docs/graphics.md
+++ b/docs/graphics.md
@@ -180,6 +180,22 @@ engine at runtime.
 
 User templates live in `<data dir>/Graphics Templates/`.
 
+**Essential Graphics panel.** *Browse* lists the built-in and user templates as cards with
+engine-rendered thumbnails, a search field and a category filter; click selects, double-click or
+Apply places the template at the playhead, dragging a card onto a video track places it there,
+Install… picks a `.fcgt`, Remove deletes a user template. *Edit* is the graphic editor; for a graphic
+made from a template it starts with **Template Properties** (one editor per control). With no layer
+selected it shows **Responsive Design – Time** (intro / outro, Roll with its options); with a layer
+selected, **Responsive Design – Position** (Pin To and the pinned edges). With characters selected
+by the Type tool, the Text section's controls style just those characters. Export As Motion
+Graphics Template… opens a dialog (name, category, description and a checklist of properties to
+expose); Replace Fonts in Projects… lists the fonts in use (missing ones flagged) and replaces one.
+Automation ids: `essentialGraphics.tab.browse|edit`, `gfxTemplates.search`, `gfxTemplates.category`,
+`gfxTemplates.item.<id>`, `gfxTemplates.apply|install|remove`, `gfxTemplates.control.<control id>`,
+`graphics.roll.*`, `graphics.time.intro|outro`, `graphics.pin.to|left|top|right|bottom`,
+`exportTemplate.*`, `replaceFonts.*`; `ui.set {"gfxTemplates": {...}, "gfxEdit": {...}}` sets the
+panel state and the Type-tool selection.
+
 ## Captions, source graphics and fonts
 
 | Command | Menu | Params |
diff --git a/docs/testing.md b/docs/testing.md
index 710684a1e..21d5d56ef 100644
--- a/docs/testing.md
+++ b/docs/testing.md
@@ -102,7 +102,8 @@ Each codec README has the full fixture matrix and the measured results.
   projects (demo-generator footage, bars, no media files) at 320×180 and renders one frame of each
   through the CPU compositor: Motion transform + opacity, four blend modes (Multiply, Screen,
   Overlay, Difference), Gaussian Blur, Lumetri basic correction, Crop, Cross Dissolve at 50 %, Dip
-  to Black at 25 %, Wipe at 50 %, Timecode / Clip Name burn-in text, graphic clips, and colour
+  to Black at 25 %, Wipe at 50 %, Timecode / Clip Name burn-in text, graphic clips (also a built-in
+  graphics template with overridden properties and per-character styles with a pinned box), and colour
   management: S-Log3/S-Gamut3.Cine footage interpreted into Rec. 709 (`log_to_rec709`) and
   Rec. 2100 PQ footage tone mapped into Rec. 709 (`hdr_tone_map`; the footage is demo frames
   re-encoded by the test's `Encoded` source). Each frame is compared