Fix #423 : Movable dialogs and Offset Path's Joins dropdown

The modal dialogs were anchored to the window's centre, so none of them could be moved. They now share one modal frame (dialogs/modal.rs): the band from the window's top edge down to its heading moves it, as a title bar would, with a grab cursor; it stays on screen and keeps where it was moved (per dialog, for the session). The shared dialog frame, New Document (and More Settings), Preferences, Keyboard Shortcuts, Workspaces and Find Font all use it; About moves by its title bar. The form dialogs drew every string field as a text box, so Offset Path's Joins had to be typed. Their choice fields are now dropdowns (Joins: Miter, Round, Bevel; Average's axis; Shear's and Reflect's axis), the fields follow the dialog's order (Offset, Joins, Miter Limit; Rows, Columns, Gutter) instead of alphabetical, and Offset Path has a Preview that Cancel rolls back. The axis labels are translated in a new "axis" catalog context: the plain Horizontal and Vertical rows mean writing direction in Japanese. ja, es, zh-hans and zh-hant get the axis rows (Horizontal, Vertical, Both) and Joins, Miter, Bevel, Offset and Axis. Headless tests drag the heading of four dialog windows (moves, a drag below the heading doesn't, kept on screen, reopens where it was left), open the Joins dropdown and choose Round (same result as the command with round joins), and check the axis dropdowns and the preview. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Merge pull request #428 from storytold/fix/issue-421
2026-10-08 10:52:05 +07:00 · 2026-10-08 10:38:20 +07:00 · 2026-10-08 10:38:02 +07:00 · 2026-10-08 10:37:45 +07:00
20 changed files with 794 additions and 461 deletions
@@ -4,7 +4,7 @@ VectorCraft is a clean-room, open-source, pure-Rust reimplementation of the Adob

 This file tracks **how far we are and what's left**. Time estimates are wall-clock hours of continuous Claude Opus 5.5 agent work (including builds and the CI gate), given both for **one agent** and for **4–6 parallel agents** on disjoint crates. They are counted from the remaining work (see [Parity estimate](#parity-estimate)), calibrated against measured throughput, and updated as work lands.

-_Last updated: 2026-10-08 (after M4.14–M4.98, M8.1–M8.20, M14.4–M14.7, the MCP prompts, resource templates, completions and logging, the 2026-10-07 issue fixes, the Layers panel rework and the 2026-10-08 community contributions: Pen and shape-tool modifiers, path editing, Layers, Artboards, Swatches/Brushes and dialogs, Japanese composition and PDF text, Hebrew/Arabic type, interface languages (Spanish among them), the font menu, saved selections, MCP and EPS, the missing-font export warning (#319), open paths in the Shape Builder (#374), PDF/`.ai` import keeping strokes live and hidden and nested layers (#372), per-corner Live Corners (#381), SVG type opening at the size it draws at (#396), the Wayland clipboard with copied-file paste (#398), ruler guides that can be selected, moved and deleted (#414), two batches of Preferences options that were stored but unused (#394), skeleton reads with `document.find` for large documents over MCP (#416) and anchors dragged with Direct Selection snapping to points, segments and smart guides, clipped SVG layers opening as clipping layers (#420), PDF/`.ai` layers read on pages of tens of millions of operators (#419) and Document Color Mode putting RGB greys on the black plate on request and converting pattern tiles (#421); see [Honest assessment](#honest-assessment-2026-10-05))._
+_Last updated: 2026-10-08 (after M4.14–M4.98, M8.1–M8.20, M14.4–M14.7, the MCP prompts, resource templates, completions and logging, the 2026-10-07 issue fixes, the Layers panel rework and the 2026-10-08 community contributions: Pen and shape-tool modifiers, path editing, Layers, Artboards, Swatches/Brushes and dialogs, Japanese composition and PDF text, Hebrew/Arabic type, interface languages (Spanish among them), the font menu, saved selections, MCP and EPS, the missing-font export warning (#319), open paths in the Shape Builder (#374), PDF/`.ai` import keeping strokes live and hidden and nested layers (#372), per-corner Live Corners (#381), SVG type opening at the size it draws at (#396), the Wayland clipboard with copied-file paste (#398), ruler guides that can be selected, moved and deleted (#414), two batches of Preferences options that were stored but unused (#394), skeleton reads with `document.find` for large documents over MCP (#416) and anchors dragged with Direct Selection snapping to points, segments and smart guides, clipped SVG layers opening as clipping layers (#420), PDF/`.ai` layers read on pages of tens of millions of operators (#419), Document Color Mode putting RGB greys on the black plate on request and converting pattern tiles (#421) and movable dialogs with Offset Path's Joins dropdown (#423); see [Honest assessment](#honest-assessment-2026-10-05))._

 ## Where we are

@@ -104,6 +104,7 @@ grade by behaviour against `plan/illustrator/`, not by whether a menu item exist
  - Save / Don't Save / Cancel before closing or quitting with unsaved documents (tabs, Close, Close All, Quit, window close).
  - Four brightness themes, persistent preferences.
  - Preferences that act (#394, in part): Show Tool Tips, Double Click To Isolate, Zoom with Mouse Wheel (the wheel zooms about the pointer, Shift-wheel scrolls up and down, Cmd/Ctrl-wheel sideways), Use Precise Cursors; Selection & Anchor Display › Tolerance (objects, anchors and handles), Object Selection by Path Only, Command Click to Select Objects Behind (cycling down the stack), Zoom to Selection, anchor Size, Highlight anchors on mouse over; Type › Number of Recent Fonts (up to 15); Guides & Grid › guide and grid Color and Style (lines or dots) and Grids In Back. Then Snap to Point (its distance, for moves, drawn points and reference points), Move Locked and Hidden Artwork with Artboard, Enable Rubber Band for the Pen and Curvature tools, Handles style, Show handles when multiple anchors are selected, Hide Corner Widget for angles greater than; General › Transform Pattern Tiles (the transforms' and dialogs' Transform Patterns) and Select Same Tint %; Type › Size/Leading, Tracking and Baseline Shift increments (`type.step`, Cmd+Shift+. and Cmd+Shift+, for the size, the Type tool's Alt+arrows), Enable Missing Glyph Protection and Fill New Type Objects With Placeholder Text. They reach agents too (`prefs.set`, then `pointer_gesture` or `press_key`; `ui.wheel` on the control channel). About 45 stored options still do nothing yet (the rest of #394: Auto Size New Area Type, Show Font Names in English, Highlight Alternate Glyphs, the smart guide display options, performance, devices…).
+  - Dialogs move by dragging their heading (the band down from the top edge, as a title bar), stay on screen and keep where they were moved for the session; the form dialogs' choices are dropdowns (Offset Path's Joins, Average's and Shear's and Reflect's axis), and Offset Path lists Offset, Joins, Miter Limit and previews (#423).
  - Dialogs open with their first field focused and its value selected: type a value and press Enter (Move, Rotate, Scale…). Number fields in panels and dialogs step with Up/Down (Shift: ten, Ctrl/Cmd: a tenth of their unit), applied at once.
  - Tab shows and hides the panels (in the Type tool it types a tab) without moving the keyboard focus onto a field, so the next shortcut or letter still works; in dialogs and panel fields it moves between fields.
  - Cmd/Ctrl+A follows the keyboard: in a panel, dialog or search field it selects the field's text, while the Type tool edits it selects all of that text (also `select.all` over MCP), and only otherwise every object. On macOS the menu bar's Select All, Cut, Copy and Paste (keys or clicks) act on a focused field too. Not yet: Select All across threaded frames (one frame's text is selected).
@@ -13,7 +13,8 @@ pub(super) fn show(app: &mut VectorcraftApp, ctx: &egui::Context) {
        .collapsible(false)
        .resizable(false)
        .open(&mut open)
-        .anchor(egui::Align2::CENTER_CENTER, [0.0, 0.0])
+        .pivot(egui::Align2::CENTER_CENTER)
+        .default_pos(ctx.content_rect().center())
        .frame(egui::Frame::window(&ctx.global_style()).inner_margin(egui::Margin::same(18)))
        .show(ctx, |ui| {
            // Tabs: About · Contributors · Models (the credits are compiled in, see `credits`).
@@ -17,16 +17,20 @@ pub(super) fn field(ui: &mut egui::Ui, d: &mut Dialog, key: &str, label: &str) {

 /// [`field`] `width` points wide.
 pub(super) fn field_w(ui: &mut egui::Ui, d: &mut Dialog, key: &str, label: &str, width: f32) {
-    let t = Tokens::get(ui.ctx());
-    ui.label(egui::RichText::new(tl!(label)).color(t.text_dim));
+    row_label(ui, label);
    text(ui, d, key, width);
    ui.end_row();
 }

-/// A labelled [`length`] field (one grid row).
-pub(super) fn length_field(ui: &mut egui::Ui, d: &mut Dialog, key: &str, label: &str, unit: Unit) {
+/// The label cell of a grid row.
+fn row_label(ui: &mut egui::Ui, label: &str) {
    let t = Tokens::get(ui.ctx());
    ui.label(egui::RichText::new(tl!(label)).color(t.text_dim));
+}
+
+/// A labelled [`length`] field (one grid row).
+pub(super) fn length_field(ui: &mut egui::Ui, d: &mut Dialog, key: &str, label: &str, unit: Unit) {
+    row_label(ui, label);
    length(ui, d, key, unit, FIELD_W);
    ui.end_row();
 }
@@ -57,6 +61,30 @@ fn lengths(kind: &str) -> &'static [&'static str] {
    }
 }

+/// The fields of the form dialogs ([`grid`]) that come first, in this order (the others follow by
+/// name).
+fn order(kind: &str) -> &'static [&'static str] {
+    match kind {
+        "offsetPath" => &["offset", "joins", "miterLimit"],
+        "splitIntoGrid" => &["rows", "columns", "gutter"],
+        _ => &[],
+    }
+}
+
+/// The choices of a form dialog's ([`grid`]) dropdown field, as (value, label in the UI
+/// language); empty for a field typed as text.
+fn choices(kind: &str, key: &str) -> Vec<(&'static str, &'static str)> {
+    // The axes in the "axis" context: some languages read the plain Horizontal and Vertical as
+    // type orientations.
+    let axis = |value, label| (value, crate::i18n::tr_ctx(crate::i18n::current(), "axis", label));
+    match (kind, key) {
+        ("offsetPath", "joins") => vec![("miter", tl!("Miter")), ("round", tl!("Round")), ("bevel", tl!("Bevel"))],
+        ("average", "axis") => vec![axis("horizontal", "Horizontal"), axis("vertical", "Vertical"), axis("both", "Both")],
+        ("reflect" | "shear", "axis") => vec![axis("horizontal", "Horizontal"), axis("vertical", "Vertical")],
+        _ => vec![],
+    }
+}
+
 /// A text field `width` wide bound to `d.fields[key]`. Returns true when it changed.
 pub(super) fn text(ui: &mut egui::Ui, d: &mut Dialog, key: &str, width: f32) -> bool {
    text_edit(ui, d, key, width).changed()
@@ -111,30 +139,49 @@ pub(super) fn check(ui: &mut egui::Ui, d: &mut Dialog, key: &str, label: &str) {
 /// A dropdown row bound to the string `d.fields[key]`: `label` in a column `widths.0` wide, the
 /// dropdown `widths.1` wide; `options` are (value, label).
 pub(super) fn choice(ui: &mut egui::Ui, d: &mut Dialog, key: &str, label: &str, widths: (f32, f32), options: &[(&str, &str)]) {
+    crate::widgets::label_row(ui, label, widths.0, |ui| dropdown(ui, d, key, widths.1, options, false));
+}
+
+/// A dropdown `width` wide bound to the string `d.fields[key]`; `options` are (value, label), the
+/// labels shown as they are when `translated` (else the dropdown translates them). A value that
+/// isn't among them shows as it is.
+fn dropdown(ui: &mut egui::Ui, d: &mut Dialog, key: &str, width: f32, options: &[(&str, &str)], translated: bool) {
    let cur = d.str(key);
    let shown = options.iter().find(|(v, _)| v.eq_ignore_ascii_case(&cur)).map_or(cur.as_str(), |(_, l)| l);
    let labels: Vec<&str> = options.iter().map(|(_, l)| *l).collect();
-    crate::widgets::label_row(ui, label, widths.0, |ui| {
-        if let Some((value, _)) = crate::widgets::dropdown(ui, key, shown, &labels, widths.1).and_then(|i| options.get(i)) {
-            d.fields.insert(key.into(), json!(value));
-        }
-    });
+    let chosen = if translated {
+        crate::widgets::dropdown_names(ui, key, shown, &labels, width)
+    } else {
+        crate::widgets::dropdown(ui, key, shown, &labels, width)
+    };
+    if let Some((value, _)) = chosen.and_then(|i| options.get(i)) {
+        d.fields.insert(key.into(), json!(value));
+    }
 }

-/// The generic dialog body: a field per non-boolean value (positions and indices hidden), the
-/// distances in `unit`.
+/// The generic dialog body: a field per non-boolean value (positions, indices and UI-only keys
+/// hidden) in the kind's [`order`], the distances in `unit`, the [`choices`] as dropdowns.
 pub(super) fn grid(ui: &mut egui::Ui, d: &mut Dialog, unit: Unit) {
-    let lengths = lengths(&d.kind);
+    let (lengths, first) = (lengths(&d.kind), order(&d.kind));
+    let mut keys: Vec<String> = d
+        .fields
+        .iter()
+        .filter(|(k, v)| !matches!(k.as_str(), "x" | "y" | "origin" | "index") && !k.starts_with("__") && !v.is_boolean())
+        .map(|(k, _)| k.clone())
+        .collect();
+    // Stable: the fields `order` doesn't name keep their order after the ones it does.
+    keys.sort_by_key(|k| first.iter().position(|f| f == k).unwrap_or(first.len()));
    egui::Grid::new("dlg").num_columns(2).spacing([10.0, 8.0]).show(ui, |ui| {
-        let keys: Vec<(String, Value)> = d.fields.iter().map(|(k, v)| (k.clone(), v.clone())).collect();
-        for (k, v) in keys {
-            if k == "x" || k == "y" || k == "origin" || k == "index" || v.is_boolean() {
-                continue;
-            }
+        for k in keys {
+            let options = choices(&d.kind, &k);
            if lengths.contains(&k.as_str()) {
                length_field(ui, d, &k, &humanized(&k), unit);
-            } else {
+            } else if options.is_empty() {
                field(ui, d, &k, &humanized(&k));
+            } else {
+                row_label(ui, &humanized(&k));
+                dropdown(ui, d, &k, FIELD_W, &options, true);
+                ui.end_row();
            }
        }
    });
@@ -40,6 +40,7 @@ pub mod layer_options;
 pub mod layers_panel_options;
 pub mod liquify;
 pub mod missing_links;
+pub(crate) mod modal;
 pub mod new_color_group;
 mod new_document;
 pub mod new_swatch;
@@ -99,7 +100,6 @@ pub use save_pdf::{open as open_save_pdf, open_preset as open_pdf_preset};
 pub use tools::open_tool_dialog;

 use crate::state::Dialog;
-use crate::theme::{self, Tokens};
 use crate::{VectorcraftApp, widgets};

 type DialogResult = Result<Value, String>;
@@ -342,62 +342,48 @@ pub fn show(app: &mut VectorcraftApp, ctx: &egui::Context) {
    if let Some(window) = spec.window {
        return window(app, ctx);
    }
-    let t = Tokens::get(ctx);
    let mut ok = false;
    let mut cancel = false;
    let mut discard = false;
-    egui::Area::new(egui::Id::new("modal-dim")).order(egui::Order::Middle).fixed_pos(egui::pos2(0.0, 0.0)).show(ctx, |ui| {
-        // Modal, but the canvas isn't dimmed so previews stay readable (as in the reference app).
-        ui.allocate_rect(ctx.content_rect(), egui::Sense::click());
-    });
    let heading = (spec.heading)(&d);
-    egui::Window::new(heading.as_str())
-        // One window per kind, so a dialog never inherits another dialog's size.
-        .id(egui::Id::new(("dialog", d.kind.as_str())))
-        .order(egui::Order::Foreground)
-        .collapsible(false)
-        .resizable(false)
-        .title_bar(false)
-        .anchor(egui::Align2::CENTER_CENTER, [0.0, -40.0])
-        .frame(egui::Frame::window(&ctx.global_style()).fill(t.panel).inner_margin(egui::Margin::same(MARGIN)))
-        .show(ctx, |ui| {
-            // Never wider than the window (a large UI scale in a small window): the text wraps.
-            let room = (ctx.content_rect().width() - 2.0 * (f32::from(MARGIN) + EDGE_GAP)).max(EDGE_GAP);
-            ui.set_min_width(spec.min_width.min(room));
-            ui.set_max_width(spec.max_width.map_or(room, |w| w.min(room)));
-            ui.label(egui::RichText::new(heading.as_str()).font(theme::semibold(16.0)).color(t.text));
-            ui.add_space(12.0);
-            // Just opened: its first field takes the keyboard focus, as in the reference app (type a
-            // value, press Enter). Only the body's fields can take it.
-            if focus_first {
-                ui.data_mut(|m| m.insert_temp(widgets::dialog_focus_flag(), true));
+    modal::show(ctx, &heading, egui::Id::new(("dialog", d.kind.as_str())), -40.0, MARGIN, |ui| {
+        // Never wider than the window (a large UI scale in a small window): the text wraps.
+        let room = (ctx.content_rect().width() - 2.0 * (f32::from(MARGIN) + EDGE_GAP)).max(EDGE_GAP);
+        ui.set_min_width(spec.min_width.min(room));
+        ui.set_max_width(spec.max_width.map_or(room, |w| w.min(room)));
+        modal::heading(ui, &heading);
+        ui.add_space(12.0);
+        // Just opened: its first field takes the keyboard focus, as in the reference app (type a
+        // value, press Enter). Only the body's fields can take it.
+        if focus_first {
+            ui.data_mut(|m| m.insert_temp(widgets::dialog_focus_flag(), true));
+        }
+        cancel = (spec.body)(app, ui, &mut d);
+        // Taken (the flag is gone): done. Still there (the window's measuring frame): next frame.
+        if focus_first && ui.data_mut(|m| m.remove_temp::<bool>(widgets::dialog_focus_flag())).is_none() {
+            ui.data_mut(|m| m.remove::<bool>(focus_id));
+        }
+        ui.add_space(16.0);
+        // The button row is as wide as the fields above it and as tall as the buttons: a
+        // right-to-left layout would otherwise take all the room left in the window, so the
+        // window could never shrink to its content.
+        let row = egui::vec2(ui.min_rect().width(), ui.spacing().interact_size.y);
+        ui.allocate_ui_with_layout(row, egui::Layout::right_to_left(egui::Align::Center), |ui| {
+            if let Some(label) = spec.ok.map(|ok| spec.ok_label.map_or(ok, |f| f(app)))
+                && widgets::primary_button(ui, label).clicked()
+            {
+                ok = true;
            }
-            cancel = (spec.body)(app, ui, &mut d);
-            // Taken (the flag is gone): done. Still there (the window's measuring frame): next frame.
-            if focus_first && ui.data_mut(|m| m.remove_temp::<bool>(widgets::dialog_focus_flag())).is_none() {
-                ui.data_mut(|m| m.remove::<bool>(focus_id));
+            ui.add_space(8.0);
+            if widgets::secondary_button(ui, if spec.ok.is_some() { "Cancel" } else { "Close" }).clicked() {
+                cancel = true;
+            }
+            if let Some(label) = spec.discard {
+                ui.add_space(28.0);
+                discard = widgets::secondary_button(ui, label).clicked();
            }
-            ui.add_space(16.0);
-            // The button row is as wide as the fields above it and as tall as the buttons: a
-            // right-to-left layout would otherwise take all the room left in the window, so the
-            // window could never shrink to its content.
-            let row = egui::vec2(ui.min_rect().width(), ui.spacing().interact_size.y);
-            ui.allocate_ui_with_layout(row, egui::Layout::right_to_left(egui::Align::Center), |ui| {
-                if let Some(label) = spec.ok.map(|ok| spec.ok_label.map_or(ok, |f| f(app)))
-                    && widgets::primary_button(ui, label).clicked()
-                {
-                    ok = true;
-                }
-                ui.add_space(8.0);
-                if widgets::secondary_button(ui, if spec.ok.is_some() { "Cancel" } else { "Close" }).clicked() {
-                    cancel = true;
-                }
-                if let Some(label) = spec.discard {
-                    ui.add_space(28.0);
-                    discard = widgets::secondary_button(ui, label).clicked();
-                }
-            });
        });
+    });
    if spec.ok.is_some() && ctx.input(|i| i.key_pressed(egui::Key::Enter)) {
        ok = true;
    }
@@ -482,3 +468,6 @@ mod tests_scale;

 #[cfg(test)]
 mod tests_perspective;
+
+#[cfg(test)]
+mod tests_modal;
@@ -0,0 +1,100 @@
+//! The modal dialog window: a backdrop that keeps the rest of the app from taking clicks, and a
+//! window with no title bar that opens centred and moves by dragging its heading (the band from its
+//! top edge down to the heading), as a title bar would. Where it was moved to stays, per window, for
+//! the session, and the window never leaves the screen.
+
+use egui::{Id, Rect, Vec2};
+
+use crate::theme::{self, Tokens};
+
+/// Show the modal dialog window `id` (`title` is its accessible name), `nudge` points below the
+/// screen's centre until it is moved, with `margin` inside its frame. `add` draws the contents and
+/// should start with [`heading`] (or [`drag_band`]) so the window can be moved.
+pub(crate) fn show<R>(ctx: &egui::Context, title: &str, id: Id, nudge: f32, margin: i8, add: impl FnOnce(&mut egui::Ui) -> R) -> Option<R> {
+    let t = Tokens::get(ctx);
+    egui::Area::new(Id::new("modal-dim")).order(egui::Order::Middle).fixed_pos(egui::Pos2::ZERO).show(ctx, |ui| {
+        // Modal, but the canvas isn't dimmed so previews stay readable (as in the reference app).
+        ui.allocate_rect(ctx.content_rect(), egui::Sense::click());
+    });
+    egui::Window::new(title)
+        .id(id)
+        .order(egui::Order::Foreground)
+        .collapsible(false)
+        .resizable(false)
+        .title_bar(false)
+        .anchor(egui::Align2::CENTER_CENTER, offset(ctx, id, nudge))
+        .frame(egui::Frame::window(&ctx.global_style()).fill(t.panel).inner_margin(egui::Margin::same(margin)))
+        .show(ctx, add)
+        .and_then(|r| r.inner)
+}
+
+/// The dialog's heading, which also moves the window ([`drag_band`]).
+pub(crate) fn heading(ui: &mut egui::Ui, text: &str) {
+    let t = Tokens::get(ui.ctx());
+    // Not selectable: a drag on it moves the window instead of selecting its text.
+    let r = ui.add(egui::Label::new(egui::RichText::new(text).font(theme::semibold(16.0)).color(t.text)).selectable(false));
+    drag_band(ui, r.rect.bottom());
+}
+
+/// Make the band of the dialog window [`show`] draws `ui` in, from its top edge down to `bottom`, a
+/// handle that moves the window. Widgets added later on the band stay clickable (they sit above it).
+pub(crate) fn drag_band(ui: &mut egui::Ui, bottom: f32) {
+    let id = ui.layer_id().id;
+    // Last frame's rectangle: none while the window measures itself the first time it shows.
+    let Some(outer) = ui.ctx().memory(|m| m.area_rect(id)) else { return };
+    let band = Rect::from_x_y_ranges(outer.x_range(), outer.top()..=bottom.max(outer.top()));
+    let r = ui.interact(band, handle(id), egui::Sense::drag());
+    if r.dragged() {
+        ui.ctx().set_cursor_icon(egui::CursorIcon::Grabbing);
+    } else if r.hovered() {
+        ui.ctx().set_cursor_icon(egui::CursorIcon::Grab);
+    }
+}
+
+/// The drag handle of window `id`.
+fn handle(id: Id) -> Id {
+    id.with("modal-drag")
+}
+
+/// Where window `id` sits, from the screen's centre: `nudge` down until it is first moved. While
+/// its [`drag_band`] is dragged, where it sat when the drag began plus how far the pointer has moved
+/// since the press, kept on screen (applied before the window places itself, so it follows the
+/// pointer without a frame's lag).
+fn offset(ctx: &egui::Context, id: Id, nudge: f32) -> Vec2 {
+    let (key, start_key) = (id.with("modal-offset"), id.with("modal-drag-start"));
+    let offset = ctx.data(|m| m.get_temp::<Vec2>(key)).unwrap_or(egui::vec2(0.0, nudge));
+    let dragged = ctx.read_response(handle(id)).is_some_and(|r| r.dragged());
+    let moved = ctx.input(|i| Some(i.pointer.latest_pos()? - i.pointer.press_origin()?));
+    let (true, Some(moved), Some(rect)) = (dragged, moved, ctx.memory(|m| m.area_rect(id))) else {
+        ctx.data_mut(|m| m.remove::<Vec2>(start_key));
+        return offset;
+    };
+    let start = ctx.data_mut(|m| *m.get_temp_mut_or(start_key, offset));
+    let screen = ctx.content_rect();
+    let to = on_screen(Rect::from_center_size(screen.center() + start + moved, rect.size()), screen).center() - screen.center();
+    ctx.data_mut(|m| m.insert_temp(key, to));
+    to
+}
+
+/// `r` moved the least to lie inside `screen` (its top left inside when it is larger).
+fn on_screen(r: Rect, screen: Rect) -> Rect {
+    let x = r.left().min(screen.right() - r.width()).max(screen.left());
+    let y = r.top().min(screen.bottom() - r.height()).max(screen.top());
+    Rect::from_min_size(egui::pos2(x, y), r.size())
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn a_moved_window_stays_on_screen() {
+        let screen = Rect::from_min_size(egui::Pos2::ZERO, egui::vec2(800.0, 600.0));
+        let r = |x: f32, y: f32, w: f32, h: f32| Rect::from_min_size(egui::pos2(x, y), egui::vec2(w, h));
+        assert_eq!(on_screen(r(100.0, 100.0, 200.0, 100.0), screen), r(100.0, 100.0, 200.0, 100.0));
+        assert_eq!(on_screen(r(-50.0, 550.0, 200.0, 100.0), screen), r(0.0, 500.0, 200.0, 100.0));
+        assert_eq!(on_screen(r(700.0, -20.0, 200.0, 100.0), screen), r(600.0, 0.0, 200.0, 100.0));
+        // Larger than the screen: its top left stays in view.
+        assert_eq!(on_screen(r(-10.0, -10.0, 900.0, 700.0), screen), r(0.0, 0.0, 900.0, 700.0));
+    }
+}
@@ -151,21 +151,9 @@ fn set_layout(d: &mut Dialog, key: &str, v: Value) {
    d.fields.insert("artboardLayout".into(), l);
 }

-/// The dimmed backdrop and a centred dialog window in the shared dialog style.
+/// The New Document dialog window `id` in the shared modal frame.
 fn window(ctx: &egui::Context, id: &str, margin: i8, add: impl FnOnce(&mut egui::Ui)) {
-    let t = Tokens::get(ctx);
-    egui::Area::new(egui::Id::new("modal-dim")).order(egui::Order::Middle).fixed_pos(egui::pos2(0.0, 0.0)).show(ctx, |ui| {
-        ui.allocate_rect(ctx.content_rect(), egui::Sense::click());
-    });
-    egui::Window::new(id)
-        .id(egui::Id::new(("dialog", id)))
-        .order(egui::Order::Foreground)
-        .collapsible(false)
-        .resizable(false)
-        .title_bar(false)
-        .anchor(egui::Align2::CENTER_CENTER, [0.0, -20.0])
-        .frame(egui::Frame::window(&ctx.global_style()).fill(t.panel).inner_margin(egui::Margin::same(margin)))
-        .show(ctx, add);
+    super::modal::show(ctx, id, egui::Id::new(("dialog", id)), -20.0, margin, add);
 }

 /// What the buttons of a window asked for.
@@ -194,6 +182,9 @@ fn show(app: &mut VectorcraftApp, ctx: &egui::Context) {
    let t = Tokens::get(ctx);
    let mut b = Buttons::default();
    window(ctx, KIND, 0, |ui| {
+        // No heading: the top margin (14) and the empty part of the category tabs' row (30) move the
+        // window.
+        super::modal::drag_band(ui, ui.max_rect().top() + 44.0);
        ui.horizontal_top(|ui| {
            egui::Frame::NONE.inner_margin(egui::Margin { left: 22, right: 14, top: 14, bottom: 18 }).show(ui, |ui| {
                ui.vertical(|ui| {
@@ -489,7 +480,7 @@ fn show_more(app: &mut VectorcraftApp, ctx: &egui::Context) {
    const L: f32 = 150.0;
    window(ctx, MORE, 22, |ui| {
        ui.set_width(560.0);
-        ui.label(egui::RichText::new(tl!("More Settings")).font(theme::semibold(16.0)).color(t.text));
+        super::modal::heading(ui, tl!("More Settings"));
        ui.add_space(12.0);
        widgets::label_row(ui, tl!("Name:"), L, |ui| {
            form::text(ui, &mut d, "name", 300.0);
@@ -1,12 +1,12 @@
-//! Path dialogs: Average, Offset Path, Simplify and Split Into Grid.
+//! Path dialogs: Average, Offset Path (with Preview), Simplify and Split Into Grid.

 use serde_json::{Value, json};

-use super::{DialogSpec, run_and_close};
+use super::{DialogSpec, form, run_and_close};
 use crate::VectorcraftApp;
 use crate::state::Dialog;

-pub(super) const SPEC: DialogSpec = DialogSpec { heading: |d| title(&d.kind).into(), confirm, ..DialogSpec::FORM };
+pub(super) const SPEC: DialogSpec = DialogSpec { heading: |d| title(&d.kind).into(), body, confirm, preview: true, ..DialogSpec::FORM };

 fn title(kind: &str) -> &'static str {
    match kind {
@@ -17,14 +17,28 @@ fn title(kind: &str) -> &'static str {
    }
 }

-fn confirm(app: &mut VectorcraftApp, d: &Dialog) -> Result<Value, String> {
-    let (id, params) = match d.kind.as_str() {
+/// The command the dialog runs and its parameters.
+fn command(d: &Dialog) -> (&'static str, Value) {
+    match d.kind.as_str() {
        "average" => ("path.average", json!({"axis": d.str("axis")})),
        "offsetPath" => {
            ("object.path.offsetPath", json!({"offset": d.f64("offset", 10.0), "joins": d.str("joins"), "miterLimit": d.f64("miterLimit", 4.0)}))
        }
        "simplify" => ("object.path.simplify", json!({"tolerance": d.f64("tolerance", 1.0)})),
        _ => ("object.path.splitIntoGrid", json!({"rows": d.f64("rows", 2.0), "columns": d.f64("columns", 2.0), "gutter": d.f64("gutter", 12.0)})),
-    };
-    run_and_close(app, id, params)
+    }
+}
+
+fn body(app: &mut VectorcraftApp, ui: &mut egui::Ui, d: &mut Dialog) -> bool {
+    form::grid(ui, d, app.session.general_unit());
+    if d.kind == "offsetPath" {
+        let (id, params) = command(d);
+        form::preview(app, ui, d, "Offset Path", id, params);
+    }
+    false
+}
+
+fn confirm(app: &mut VectorcraftApp, d: &Dialog) -> Result<Value, String> {
+    let (id, params) = command(d);
+    if d.kind == "offsetPath" { form::commit_preview(app, id, params) } else { run_and_close(app, id, params) }
 }
@@ -4,6 +4,7 @@ use serde_json::json;
 use vectorcraft_engine::Session;

 use super::*;
+use crate::theme;

 fn app() -> VectorcraftApp {
    let mut app = VectorcraftApp::new(Session::new(), Default::default());
@@ -9,6 +9,7 @@ use vectorcraft_engine::cmd::fileio;

 use super::*;
 use crate::Services;
+use crate::theme;

 pub(super) type Written = Rc<RefCell<Vec<(String, Vec<u8>)>>>;

@@ -7,6 +7,7 @@ use vectorcraft_testkit::pdf::{PdfPage, pdf};

 use super::*;
 use crate::io;
+use crate::theme;

 fn app() -> VectorcraftApp {
    let mut app = VectorcraftApp::new(Session::new(), Default::default());
@@ -0,0 +1,203 @@
+//! #423: modal dialogs move by their heading (and stay on screen and where they were moved), and
+//! the form dialogs' choice fields are dropdowns (Offset Path's Joins).
+
+use egui::{Event, Pos2, Rect, Vec2, vec2};
+use serde_json::json;
+use vectorcraft_engine::Session;
+
+use super::*;
+use crate::theme;
+
+const SCREEN: Vec2 = vec2(1280.0, 900.0);
+
+/// A context drawing the dialog layer in a 1280 × 900 window.
+fn ctx() -> egui::Context {
+    let ctx = egui::Context::default();
+    theme::install_fonts(&ctx);
+    theme::apply(&ctx, Default::default());
+    ctx
+}
+
+/// One frame of the dialog layer with `events`: every text drawn, with its screen rect.
+fn frame(ctx: &egui::Context, app: &mut VectorcraftApp, events: Vec<Event>) -> Vec<(String, Rect)> {
+    let input = egui::RawInput { screen_rect: Some(Rect::from_min_size(Pos2::ZERO, SCREEN)), events, ..Default::default() };
+    let mut out = ctx.run_ui(input, |ui| show(app, ui.ctx()));
+    out.textures_delta.clear();
+    fn collect(s: &egui::Shape, out: &mut Vec<(String, Rect)>) {
+        match s {
+            egui::Shape::Text(t) => out.push((t.galley.text().to_string(), t.visual_bounding_rect())),
+            egui::Shape::Vec(v) => v.iter().for_each(|s| collect(s, out)),
+            _ => {}
+        }
+    }
+    let mut texts = vec![];
+    out.shapes.iter().for_each(|c| collect(&c.shape, &mut texts));
+    texts
+}
+
+fn button(pos: Pos2, pressed: bool) -> Event {
+    Event::PointerButton { pos, button: egui::PointerButton::Primary, pressed, modifiers: Default::default() }
+}
+
+/// Drag with the mouse from `from` by `by`, in steps, then let go.
+fn drag(ctx: &egui::Context, app: &mut VectorcraftApp, from: Pos2, by: Vec2) {
+    frame(ctx, app, vec![Event::PointerMoved(from), button(from, true)]);
+    for i in 1..=6 {
+        frame(ctx, app, vec![Event::PointerMoved(from + by * (i as f32 / 6.0))]);
+    }
+    frame(ctx, app, vec![button(from + by, false)]);
+    frame(ctx, app, vec![]);
+}
+
+fn click(ctx: &egui::Context, app: &mut VectorcraftApp, pos: Pos2) -> Vec<(String, Rect)> {
+    frame(ctx, app, vec![Event::PointerMoved(pos), button(pos, true)]);
+    frame(ctx, app, vec![button(pos, false)]);
+    frame(ctx, app, vec![])
+}
+
+/// Frames until a window that just opened has measured and placed itself.
+fn settle(ctx: &egui::Context, app: &mut VectorcraftApp) {
+    for _ in 0..6 {
+        frame(ctx, app, vec![]);
+    }
+}
+
+fn rect_of(ctx: &egui::Context, id: egui::Id) -> Rect {
+    ctx.memory(|m| m.area_rect(id)).expect("the dialog window was shown")
+}
+
+fn app_with_selection() -> VectorcraftApp {
+    let mut app = VectorcraftApp::new(Session::new(), Default::default());
+    app.run("file.new", json!({"width": 400, "height": 400})).unwrap();
+    app.run("shape.rectangle", json!({"x": 100, "y": 100, "width": 80, "height": 60})).unwrap();
+    app
+}
+
+fn close_to(a: Vec2, b: Vec2) -> bool {
+    (a - b).length() < 1.5
+}
+
+/// Opens a dialog.
+type Open = fn(&mut VectorcraftApp);
+
+/// Every kind of modal window: the shared frame (Offset Path), and the ones drawing their own
+/// window (New Document without a heading, Preferences, Keyboard Shortcuts).
+#[test]
+fn dialogs_move_by_their_heading_stay_on_screen_and_where_they_were_moved() {
+    let screen = Rect::from_min_size(Pos2::ZERO, SCREEN);
+    let opens: [(&str, Open, egui::Id); 4] = [
+        ("Offset Path", |app| crate::menus::invoke(app, "object.path.offsetPath", json!({})), egui::Id::new(("dialog", "offsetPath"))),
+        ("New Document", open_new_document, egui::Id::new(("dialog", "newDocument"))),
+        ("Preferences", |app| crate::prefs_dialog::open(app, None), egui::Id::new("dialog-preferences")),
+        ("Keyboard Shortcuts", crate::shortcut_editor::open, egui::Id::new("dialog-shortcuts")),
+    ];
+    for (name, open, id) in opens {
+        let (ctx, mut app) = (ctx(), app_with_selection());
+        open(&mut app);
+        settle(&ctx, &mut app);
+        let start = rect_of(&ctx, id);
+        // Dragging the heading (the band from the top edge down to it) moves the window.
+        drag(&ctx, &mut app, start.left_top() + vec2(40.0, 10.0), vec2(-90.0, 50.0));
+        let moved = rect_of(&ctx, id);
+        assert!(close_to(moved.min - start.min, vec2(-90.0, 50.0)), "{name}: {start:?} → {moved:?}");
+        // A drag that starts below the heading (in the bottom margin) doesn't.
+        drag(&ctx, &mut app, moved.left_bottom() + vec2(6.0, -4.0), vec2(80.0, -80.0));
+        assert_eq!(rect_of(&ctx, id), moved, "{name}: dragging the body moved it");
+        // Dragged far past the window's edge, it stops at the edge.
+        drag(&ctx, &mut app, moved.left_top() + vec2(40.0, 10.0), vec2(5000.0, 5000.0));
+        let edge = rect_of(&ctx, id);
+        assert!(screen.contains_rect(edge.shrink(0.5)), "{name}: off screen at {edge:?}");
+        assert!((edge.right() - screen.right()).abs() < 1.5 && (edge.bottom() - screen.bottom()).abs() < 1.5, "{name}: {edge:?}");
+        // Closed and opened again (this session): where it was left.
+        app.ui.dialog = None;
+        frame(&ctx, &mut app, vec![]);
+        open(&mut app);
+        settle(&ctx, &mut app);
+        assert!(close_to(rect_of(&ctx, id).min - edge.min, Vec2::ZERO), "{name}: reopened at {:?}, left at {edge:?}", rect_of(&ctx, id));
+    }
+}
+
+/// Offset Path's Joins is a dropdown of Miter, Round and Bevel (it was a text field), listed after
+/// Offset; choosing Round runs the command with round joins.
+#[test]
+fn offset_path_joins_is_a_dropdown() {
+    let (ctx, mut app) = (ctx(), app_with_selection());
+    app.run("select.all", json!({})).unwrap();
+    crate::menus::invoke(&mut app, "object.path.offsetPath", json!({}));
+    frame(&ctx, &mut app, vec![]);
+    let texts = frame(&ctx, &mut app, vec![]);
+    let at = |texts: &[(String, Rect)], s: &str| texts.iter().find(|(t, _)| t == s).map(|(_, r)| *r);
+    let (offset, joins, miter) = (at(&texts, "Offset:").unwrap(), at(&texts, "Joins:").unwrap(), at(&texts, "Miter Limit:").unwrap());
+    assert!(offset.top() < joins.top() && joins.top() < miter.top(), "Offset, Joins, Miter Limit: {texts:?}");
+    let current = at(&texts, "Miter").expect("Joins shows its choice");
+    assert!(at(&texts, "miter").is_none(), "Joins is a text field: {texts:?}");
+    // The list: Miter, Round, Bevel.
+    let open = click(&ctx, &mut app, current.center());
+    for choice in ["Round", "Bevel"] {
+        assert!(at(&open, choice).is_some(), "{choice} isn't listed: {open:?}");
+    }
+    let round = at(&open, "Round").unwrap();
+    click(&ctx, &mut app, round.center());
+    assert_eq!(app.ui.dialog.as_ref().unwrap().fields["joins"], json!("round"));
+    // OK: the same result as the command with round joins (not miter).
+    confirm(&mut app).unwrap();
+    assert!(app.ui.dialog.is_none());
+    let made = |app: &VectorcraftApp| {
+        let st = app.session.doc().unwrap();
+        format!("{:?}", st.doc.node(st.selection.objects[0]).unwrap().kind)
+    };
+    let direct = |joins: &str| {
+        let mut app = app_with_selection();
+        app.run("select.all", json!({})).unwrap();
+        app.run("object.path.offsetPath", json!({"offset": 10, "joins": joins, "miterLimit": 4})).unwrap();
+        made(&app)
+    };
+    assert_eq!(made(&app), direct("round"));
+    assert_ne!(made(&app), direct("miter"));
+}
+
+/// The other form dialogs' choices are dropdowns too: Average's and Shear's axis.
+#[test]
+fn form_dialog_axes_are_dropdowns() {
+    for (id, shown) in [("path.average", "Both"), ("object.shear", "Horizontal"), ("object.reflect", "Vertical")] {
+        let (ctx, mut app) = (ctx(), app_with_selection());
+        app.run("select.all", json!({})).unwrap();
+        crate::menus::invoke(&mut app, id, json!({}));
+        frame(&ctx, &mut app, vec![]);
+        let texts = frame(&ctx, &mut app, vec![]);
+        assert!(texts.iter().any(|(t, _)| t == shown), "{id}: {texts:?}");
+        assert!(!texts.iter().any(|(t, _)| *t == shown.to_lowercase()), "{id} has a text field: {texts:?}");
+    }
+}
+
+/// The axis choices are translated in the "axis" context: in Japanese the plain Horizontal and
+/// Vertical are the type orientations (horizontal and vertical writing).
+#[test]
+fn axis_choices_read_as_axes_in_every_complete_language() {
+    use crate::i18n::{LANGUAGES, Lang, tr, tr_ctx};
+    let ja = Lang::from_code("ja").unwrap();
+    assert_eq!(tr_ctx(ja, "axis", "Horizontal"), "水平方向");
+    assert_ne!(tr_ctx(ja, "axis", "Horizontal"), tr(ja, "Horizontal"));
+    for l in LANGUAGES.iter().filter(|l| l.complete_menus) {
+        for s in ["Horizontal", "Vertical", "Both"] {
+            assert!(l.source.lines().any(|line| line.starts_with(&format!("axis\t{s}\t"))), "{}: no axis row for {s}", l.code);
+        }
+    }
+}
+
+/// Offset Path previews on the canvas; Cancel rolls the preview back.
+#[test]
+fn offset_path_previews() {
+    let (ctx, mut app) = (ctx(), app_with_selection());
+    app.run("select.all", json!({})).unwrap();
+    let count = |app: &VectorcraftApp| app.session.doc().unwrap().doc.layers.iter().map(|l| l.children().map_or(0, |c| c.len())).sum::<usize>();
+    crate::menus::invoke(&mut app, "object.path.offsetPath", json!({}));
+    let texts = frame(&ctx, &mut app, vec![]);
+    let texts = if texts.is_empty() { frame(&ctx, &mut app, vec![]) } else { texts };
+    let preview = texts.iter().find(|(t, _)| t == "Preview").map(|(_, r)| *r).expect("a Preview checkbox");
+    click(&ctx, &mut app, preview.center());
+    frame(&ctx, &mut app, vec![]);
+    assert_eq!(count(&app), 2, "previewed");
+    cancel(&mut app);
+    assert_eq!(count(&app), 1, "rolled back");
+}
@@ -5,6 +5,7 @@ use serde_json::json;
 use vectorcraft_engine::Session;

 use super::*;
+use crate::theme;

 /// The save prompt's rect after a few frames in a window of `physical` pixels at UI scale `zoom`.
 fn prompt(app: &mut VectorcraftApp, ctx: &egui::Context, physical: egui::Vec2, zoom: f32) -> (egui::Rect, egui::Rect) {
@@ -5,7 +5,7 @@ use egui::Ui;
 use serde_json::{Value, json};

 use crate::state::Dialog;
-use crate::theme::{self, Tokens};
+use crate::theme::Tokens;
 use crate::widgets;
 use crate::{VectorcraftApp, font_menu};

@@ -37,77 +37,66 @@ pub fn show(app: &mut VectorcraftApp, ctx: &egui::Context) {
    let sample = font_menu::sample_text(app);
    let mut close = false;
    let mut act: Option<&str> = None;
-    egui::Area::new(egui::Id::new("modal-dim")).order(egui::Order::Middle).fixed_pos(egui::pos2(0.0, 0.0)).show(ctx, |ui| {
-        ui.allocate_rect(ctx.content_rect(), egui::Sense::click());
-    });
-    egui::Window::new(tl!("Find Font"))
-        .id(egui::Id::new("dialog-find-font"))
-        .order(egui::Order::Foreground)
-        .collapsible(false)
-        .resizable(false)
-        .title_bar(false)
-        .anchor(egui::Align2::CENTER_CENTER, [0.0, -40.0])
-        .frame(egui::Frame::window(&ctx.global_style()).fill(t.panel).inner_margin(egui::Margin::same(22)))
-        .show(ctx, |ui: &mut Ui| {
-            ui.set_width(380.0);
-            ui.label(egui::RichText::new(tl!("Find Font")).font(theme::semibold(16.0)).color(t.text));
-            ui.add_space(10.0);
-            widgets::subheader(ui, &crate::i18n::fmt(tl!("Fonts in Document: {count}"), &[("count", &list.len().to_string())]));
-            let sel = d.fields.get("selected").and_then(Value::as_u64).unwrap_or(0) as usize;
-            egui::Frame::NONE.fill(t.input).stroke(egui::Stroke::new(1.0, t.input_border)).inner_margin(egui::Margin::same(4)).show(ui, |ui| {
-                ui.set_min_height(120.0);
-                ui.set_width(ui.available_width());
-                egui::ScrollArea::vertical().max_height(160.0).show(ui, |ui| {
-                    for (i, f) in list.iter().enumerate() {
-                        let (note, color) = font_note(f);
-                        let label = format!("{} {}{note}  ({})", f["family"].as_str().unwrap_or(""), f["style"].as_str().unwrap_or(""), f["runs"]);
-                        let text = egui::RichText::new(label).color(color.unwrap_or(t.text));
-                        if ui.selectable_label(i == sel, text).clicked() {
-                            d.fields.insert("selected".into(), json!(i));
-                        }
+    crate::dialogs::modal::show(ctx, tl!("Find Font"), egui::Id::new("dialog-find-font"), -40.0, 22, |ui: &mut Ui| {
+        ui.set_width(380.0);
+        crate::dialogs::modal::heading(ui, tl!("Find Font"));
+        ui.add_space(10.0);
+        widgets::subheader(ui, &crate::i18n::fmt(tl!("Fonts in Document: {count}"), &[("count", &list.len().to_string())]));
+        let sel = d.fields.get("selected").and_then(Value::as_u64).unwrap_or(0) as usize;
+        egui::Frame::NONE.fill(t.input).stroke(egui::Stroke::new(1.0, t.input_border)).inner_margin(egui::Margin::same(4)).show(ui, |ui| {
+            ui.set_min_height(120.0);
+            ui.set_width(ui.available_width());
+            egui::ScrollArea::vertical().max_height(160.0).show(ui, |ui| {
+                for (i, f) in list.iter().enumerate() {
+                    let (note, color) = font_note(f);
+                    let label = format!("{} {}{note}  ({})", f["family"].as_str().unwrap_or(""), f["style"].as_str().unwrap_or(""), f["runs"]);
+                    let text = egui::RichText::new(label).color(color.unwrap_or(t.text));
+                    if ui.selectable_label(i == sel, text).clicked() {
+                        d.fields.insert("selected".into(), json!(i));
                    }
-                });
-            });
-            ui.add_space(10.0);
-            widgets::subheader(ui, tl!("Replace With Font"));
-            let fam = d.str("family");
-            ui.horizontal(|ui| {
-                // Picks the font only: nothing is previewed on the document.
-                let pick = font_menu::font_menu(ui, "ff-family", &fam, 220.0, sample.as_deref(), font_menu::MenuLook::of(app));
-                if let Some((f, style)) = font_menu::picked(app, pick) {
-                    d.fields.insert("family".into(), json!(f));
-                    d.fields.insert("style".into(), json!(style.unwrap_or_default()));
                }
-                let styles = vectorcraft_text::FontDb::global().styles(&d.str("family"));
-                // "(closest)" is ours; the font's style names are shown as they are.
-                let closest = tl!("(closest)");
-                let mut opts: Vec<&str> = vec![closest];
-                opts.extend(styles.iter().map(String::as_str));
-                let style = d.str("style");
-                let cur = if style.is_empty() { closest } else { style.as_str() };
-                if let Some(i) = widgets::dropdown_names(ui, "ff-style", cur, &opts, 120.0) {
-                    d.fields.insert("style".into(), json!(if i == 0 { String::new() } else { styles[i - 1].clone() }));
-                }
-            });
-            ui.add_space(14.0);
-            ui.horizontal(|ui| {
-                let has = sel < list.len();
-                if ui.add_enabled(has, egui::Button::new(tl!("Find"))).clicked() {
-                    act = Some("find");
-                }
-                if ui.add_enabled(has, egui::Button::new(tl!("Change"))).on_hover_text(tl!("In the selected objects")).clicked() {
-                    act = Some("change");
-                }
-                if ui.add_enabled(has, egui::Button::new(tl!("Change All"))).clicked() {
-                    act = Some("changeAll");
-                }
-                ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
-                    if widgets::primary_button(ui, tl!("Done")).clicked() {
-                        close = true;
-                    }
-                });
            });
        });
+        ui.add_space(10.0);
+        widgets::subheader(ui, tl!("Replace With Font"));
+        let fam = d.str("family");
+        ui.horizontal(|ui| {
+            // Picks the font only: nothing is previewed on the document.
+            let pick = font_menu::font_menu(ui, "ff-family", &fam, 220.0, sample.as_deref(), font_menu::MenuLook::of(app));
+            if let Some((f, style)) = font_menu::picked(app, pick) {
+                d.fields.insert("family".into(), json!(f));
+                d.fields.insert("style".into(), json!(style.unwrap_or_default()));
+            }
+            let styles = vectorcraft_text::FontDb::global().styles(&d.str("family"));
+            // "(closest)" is ours; the font's style names are shown as they are.
+            let closest = tl!("(closest)");
+            let mut opts: Vec<&str> = vec![closest];
+            opts.extend(styles.iter().map(String::as_str));
+            let style = d.str("style");
+            let cur = if style.is_empty() { closest } else { style.as_str() };
+            if let Some(i) = widgets::dropdown_names(ui, "ff-style", cur, &opts, 120.0) {
+                d.fields.insert("style".into(), json!(if i == 0 { String::new() } else { styles[i - 1].clone() }));
+            }
+        });
+        ui.add_space(14.0);
+        ui.horizontal(|ui| {
+            let has = sel < list.len();
+            if ui.add_enabled(has, egui::Button::new(tl!("Find"))).clicked() {
+                act = Some("find");
+            }
+            if ui.add_enabled(has, egui::Button::new(tl!("Change"))).on_hover_text(tl!("In the selected objects")).clicked() {
+                act = Some("change");
+            }
+            if ui.add_enabled(has, egui::Button::new(tl!("Change All"))).clicked() {
+                act = Some("changeAll");
+            }
+            ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
+                if widgets::primary_button(ui, tl!("Done")).clicked() {
+                    close = true;
+                }
+            });
+        });
+    });
    let sel = d.fields.get("selected").and_then(Value::as_u64).unwrap_or(0) as usize;
    if let (Some(a), Some(from)) = (act, list.get(sel)) {
        let r = match a {
@@ -157,7 +146,7 @@ mod tests {
        app.session.execute("text.create", &json!({"x": 10, "y": 40, "text": "Hi", "font": "Missing Family"})).unwrap();
        open(&mut app);
        let ctx = egui::Context::default();
-        theme::install_fonts(&ctx);
+        crate::theme::install_fonts(&ctx);
        let mut out = ctx.run_ui(egui::RawInput::default(), |ui| show(&mut app, ui.ctx()));
        out.textures_delta.clear();
        let d = app.ui.dialog.clone().unwrap();
@@ -3013,3 +3013,11 @@
 	Version	Versión
 	% of all commits	% de todos los commits
 	Lines +/−	Líneas +/−
+	Joins	Uniones
+	Miter	Inglete
+	Bevel	Bisel
+	Offset	Desplazamiento
+	Axis	Eje
+axis	Horizontal	Horizontal
+axis	Vertical	Vertical
+axis	Both	Ambos
@@ -3002,3 +3002,11 @@
 	Version	バージョン
 	% of all commits	全コミットに占める割合
 	Lines +/−	行数 +/−
+	Joins	角の形状
+	Miter	マイター
+	Bevel	ベベル
+	Offset	オフセット
+	Axis	軸
+axis	Horizontal	水平方向
+axis	Vertical	垂直方向
+axis	Both	両方
@@ -3260,3 +3260,11 @@
 	Version	版本
 	% of all commits	占全部提交的百分比
 	Lines +/−	行数 +/−
+	Joins	连接
+	Miter	斜接
+	Bevel	斜角
+	Offset	偏移
+	Axis	轴
+axis	Horizontal	水平
+axis	Vertical	垂直
+axis	Both	两者
@@ -3033,3 +3033,11 @@
 	Version	版本
 	% of all commits	佔全部提交的比例
 	Lines +/−	行數 +/−
+	Joins	轉角
+	Miter	尖角
+	Bevel	斜角
+	Offset	位移
+	Axis	軸
+axis	Horizontal	水平
+axis	Vertical	垂直
+axis	Both	兩者
@@ -122,81 +122,67 @@ pub fn show(app: &mut VectorcraftApp, ctx: &egui::Context) {
    let Some(mut d) = app.ui.dialog.clone() else { return };
    let t = Tokens::get(ctx);
    let (mut ok, mut cancel, mut reset) = (false, false, false);
-    egui::Area::new(egui::Id::new("modal-dim")).order(egui::Order::Middle).fixed_pos(egui::pos2(0.0, 0.0)).show(ctx, |ui| {
-        ui.allocate_rect(ctx.content_rect(), egui::Sense::click());
-    });
    let cat = d.str("__category");
    let cat = PREF_CATEGORIES.iter().find(|c| **c == cat).copied().unwrap_or(PREF_CATEGORIES[0]);
-    egui::Window::new(tl!("Preferences"))
-        .id(egui::Id::new("dialog-preferences"))
-        .order(egui::Order::Foreground)
-        .collapsible(false)
-        .resizable(false)
-        .title_bar(false)
-        .anchor(egui::Align2::CENTER_CENTER, [0.0, -20.0])
-        .frame(egui::Frame::window(&ctx.global_style()).fill(t.panel).inner_margin(egui::Margin::same(20)))
-        .show(ctx, |ui| {
-            ui.set_width(760.0);
-            ui.label(egui::RichText::new(tl!("Preferences")).font(theme::semibold(16.0)).color(t.text));
-            ui.add_space(12.0);
-            ui.horizontal_top(|ui| {
-                // Category list.
-                egui::Frame::NONE.fill(t.panel_darker).corner_radius(egui::CornerRadius::same(4)).inner_margin(egui::Margin::same(6)).show(
-                    ui,
-                    |ui| {
-                        ui.set_width(196.0);
-                        ui.set_min_height(430.0);
-                        ui.vertical(|ui| {
-                            ui.spacing_mut().item_spacing.y = 1.0;
-                            for c in PREF_CATEGORIES {
-                                let sel = *c == cat;
-                                let text = egui::RichText::new(tl!(*c)).size(12.5).color(if sel { t.text_strong } else { t.text });
-                                let b = egui::Button::selectable(sel, text).frame_when_inactive(false).min_size(egui::vec2(184.0, 24.0));
-                                if ui.add(b).clicked() {
-                                    d.fields.insert("__category".into(), json!(c));
-                                }
-                            }
-                        });
-                    },
-                );
-                ui.add_space(14.0);
-                // Fields.
+    crate::dialogs::modal::show(ctx, tl!("Preferences"), egui::Id::new("dialog-preferences"), -20.0, 20, |ui| {
+        ui.set_width(760.0);
+        crate::dialogs::modal::heading(ui, tl!("Preferences"));
+        ui.add_space(12.0);
+        ui.horizontal_top(|ui| {
+            // Category list.
+            egui::Frame::NONE.fill(t.panel_darker).corner_radius(egui::CornerRadius::same(4)).inner_margin(egui::Margin::same(6)).show(ui, |ui| {
+                ui.set_width(196.0);
+                ui.set_min_height(430.0);
                ui.vertical(|ui| {
-                    ui.set_width(530.0);
-                    ui.label(egui::RichText::new(tl!(cat)).font(theme::semibold(14.0)).color(t.text_strong));
-                    ui.add_space(8.0);
-                    egui::ScrollArea::vertical().id_salt(("prefs", cat)).max_height(400.0).auto_shrink([false, false]).show(ui, |ui| {
-                        category_fields(ui, &mut d, cat);
-                    });
+                    ui.spacing_mut().item_spacing.y = 1.0;
+                    for c in PREF_CATEGORIES {
+                        let sel = *c == cat;
+                        let text = egui::RichText::new(tl!(*c)).size(12.5).color(if sel { t.text_strong } else { t.text });
+                        let b = egui::Button::selectable(sel, text).frame_when_inactive(false).min_size(egui::vec2(184.0, 24.0));
+                        if ui.add(b).clicked() {
+                            d.fields.insert("__category".into(), json!(c));
+                        }
+                    }
                });
            });
            ui.add_space(14.0);
-            ui.horizontal(|ui| {
-                if widgets::secondary_button(ui, tl!("Reset Preferences"))
-                    .on_hover_text(tl!("Restore every preference to its default (applied on OK)"))
-                    .clicked()
-                {
-                    reset = true;
-                }
-                ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
-                    if widgets::primary_button(ui, tl!("OK")).clicked() {
-                        ok = true;
-                    }
-                    ui.add_space(8.0);
-                    if widgets::secondary_button(ui, tl!("Cancel")).clicked() {
-                        cancel = true;
-                    }
-                    ui.add_space(16.0);
-                    let i = PREF_CATEGORIES.iter().position(|c| *c == cat).unwrap_or(0);
-                    if ui.add_enabled(i + 1 < PREF_CATEGORIES.len(), egui::Button::new(tl!("Next"))).clicked() {
-                        d.fields.insert("__category".into(), json!(PREF_CATEGORIES[i + 1]));
-                    }
-                    if ui.add_enabled(i > 0, egui::Button::new(tl!("Previous"))).clicked() {
-                        d.fields.insert("__category".into(), json!(PREF_CATEGORIES[i - 1]));
-                    }
+            // Fields.
+            ui.vertical(|ui| {
+                ui.set_width(530.0);
+                ui.label(egui::RichText::new(tl!(cat)).font(theme::semibold(14.0)).color(t.text_strong));
+                ui.add_space(8.0);
+                egui::ScrollArea::vertical().id_salt(("prefs", cat)).max_height(400.0).auto_shrink([false, false]).show(ui, |ui| {
+                    category_fields(ui, &mut d, cat);
                });
            });
        });
+        ui.add_space(14.0);
+        ui.horizontal(|ui| {
+            if widgets::secondary_button(ui, tl!("Reset Preferences"))
+                .on_hover_text(tl!("Restore every preference to its default (applied on OK)"))
+                .clicked()
+            {
+                reset = true;
+            }
+            ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
+                if widgets::primary_button(ui, tl!("OK")).clicked() {
+                    ok = true;
+                }
+                ui.add_space(8.0);
+                if widgets::secondary_button(ui, tl!("Cancel")).clicked() {
+                    cancel = true;
+                }
+                ui.add_space(16.0);
+                let i = PREF_CATEGORIES.iter().position(|c| *c == cat).unwrap_or(0);
+                if ui.add_enabled(i + 1 < PREF_CATEGORIES.len(), egui::Button::new(tl!("Next"))).clicked() {
+                    d.fields.insert("__category".into(), json!(PREF_CATEGORIES[i + 1]));
+                }
+                if ui.add_enabled(i > 0, egui::Button::new(tl!("Previous"))).clicked() {
+                    d.fields.insert("__category".into(), json!(PREF_CATEGORIES[i - 1]));
+                }
+            });
+        });
+    });
    if reset {
        for (k, v) in Prefs::default().to_json().as_object().cloned().unwrap_or_default() {
            d.fields.insert(k, v);
@@ -521,178 +521,167 @@ pub fn show(app: &mut VectorcraftApp, ctx: &egui::Context) {
            }
        }
    }
-    egui::Area::new(egui::Id::new("modal-dim")).order(egui::Order::Middle).fixed_pos(egui::pos2(0.0, 0.0)).show(ctx, |ui| {
-        ui.allocate_rect(ctx.content_rect(), egui::Sense::click());
-    });
-    egui::Window::new(tl!("Keyboard Shortcuts"))
-        .id(egui::Id::new("dialog-shortcuts"))
-        .order(egui::Order::Foreground)
-        .collapsible(false)
-        .resizable(false)
-        .title_bar(false)
-        .anchor(egui::Align2::CENTER_CENTER, [0.0, -20.0])
-        .frame(egui::Frame::window(&ctx.global_style()).fill(t.panel).inner_margin(egui::Margin::same(20)))
-        .show(ctx, |ui| {
-            ui.set_width(640.0);
-            ui.label(egui::RichText::new(tl!("Keyboard Shortcuts")).font(theme::semibold(16.0)).color(t.text));
-            ui.add_space(10.0);
-            // Set row.
-            ui.horizontal(|ui| {
-                ui.label(egui::RichText::new(tl!("Set:")).color(t.text_dim));
-                let cur = d.str("set");
-                let mut opts: Vec<&str> = PRESETS.to_vec();
-                if !PRESETS.contains(&cur.as_str()) {
-                    opts.push(CUSTOM);
-                }
-                // The sets listed are ours (translated); a set read from an imported file shows
-                // its name as it is.
-                if let Some(&name) = crate::dialogs::mixed_dropdown(ui, "kbset", &cur, &opts, 200.0, |_| true).and_then(|i| opts.get(i))
-                    && let Some(p) = preset(name)
-                {
-                    ov = p;
-                    d.fields.insert("set".into(), json!(name));
-                    d.fields.insert("__message".into(), json!(""));
-                }
-                ui.add_space(12.0);
-                if ui.button(tl!("Import…")).clicked() {
-                    d.fields.insert("__import".into(), json!(true));
-                }
-                if ui.button(tl!("Export…")).clicked() {
-                    d.fields.insert("__export".into(), json!(true));
-                }
-                if ui.button(tl!("Reset to Defaults")).clicked() {
-                    ov.clear();
-                    d.fields.insert("set".into(), json!(PRESETS[0]));
-                    d.fields.insert("__message".into(), json!(tl!("All shortcuts reset to defaults.")));
-                }
-            });
-            ui.add_space(8.0);
-            // Tabs + search.
-            ui.horizontal(|ui| {
-                let tab = d.str("tab");
-                for (id, label) in [("tools", "Tools"), ("menu", "Menu Commands")] {
-                    if ui.selectable_label(tab == id, egui::RichText::new(tl!(label)).font(theme::semibold(12.5))).clicked() {
-                        d.fields.insert("tab".into(), json!(id));
-                    }
-                }
-                ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
-                    let mut q = d.str("query");
-                    if ui.add(egui::TextEdit::singleline(&mut q).hint_text(tl!("Search")).desired_width(200.0)).changed() {
-                        d.fields.insert("query".into(), json!(q));
-                    }
-                });
-            });
-            ui.add_space(6.0);
-            let tools = d.str("tab") != "menu";
-            let q = d.str("query").to_lowercase();
-            let selected = d.str("__selected");
-            let rec = d.str("__recording");
-            let scroll_to = d.fields.remove("__scrollTo").and_then(|v| v.as_str().map(str::to_string));
-            egui::Frame::NONE.fill(t.input).stroke(egui::Stroke::new(1.0, t.input_border)).inner_margin(egui::Margin::same(4)).show(ui, |ui| {
-                ui.horizontal(|ui| {
-                    ui.allocate_ui_with_layout(egui::vec2(360.0, 16.0), egui::Layout::left_to_right(egui::Align::Center), |ui| {
-                        ui.set_min_width(360.0);
-                        ui.label(egui::RichText::new(if tools { tl!("Tool") } else { tl!("Command") }).color(t.text_dim).size(11.0));
-                    });
-                    ui.label(egui::RichText::new(tl!("Shortcut")).color(t.text_dim).size(11.0));
-                });
-                egui::ScrollArea::vertical().max_height(360.0).auto_shrink([false, false]).show(ui, |ui| {
-                    for e in entries().iter().filter(|e| e.is_tool == tools) {
-                        let sc = effective_in(&ov, &e.key);
-                        let matches = e.label.to_lowercase().contains(&q)
-                            || tl!(&e.label).to_lowercase().contains(&q)
-                            || e.group.to_lowercase().contains(&q)
-                            || tl!(&e.group).to_lowercase().contains(&q)
-                            || sc.as_deref().is_some_and(|s| s.to_lowercase().contains(&q));
-                        if !q.is_empty() && !matches {
-                            continue;
-                        }
-                        let row = ui.horizontal(|ui| {
-                            let name = if e.is_tool || e.group.is_empty() {
-                                tl!(&e.label).to_string()
-                            } else {
-                                format!("{} › {}", tl!(&e.group), tl!(&e.label))
-                            };
-                            let r = ui
-                                .allocate_ui_with_layout(egui::vec2(360.0, 20.0), egui::Layout::left_to_right(egui::Align::Center), |ui| {
-                                    ui.set_min_width(360.0);
-                                    ui.add(egui::Button::selectable(selected == e.key, egui::RichText::new(name).color(t.text)).truncate())
-                                })
-                                .inner;
-                            if r.clicked() {
-                                d.fields.insert("__selected".into(), json!(e.key));
-                            }
-                            let label = if rec == e.key {
-                                tl!("Press keys…").to_string()
-                            } else {
-                                sc.as_deref().map(menus::pretty_shortcut).unwrap_or_else(|| "—".into())
-                            };
-                            let changed = ov.contains_key(&e.key);
-                            let txt = egui::RichText::new(label).color(if changed { t.accent } else { t.text });
-                            let b = ui
-                                .add_sized([150.0, 20.0], egui::Button::new(txt).selected(rec == e.key))
-                                .on_hover_text(tl!("Click, then press the new shortcut (Esc cancels)"));
-                            if b.clicked() {
-                                d.fields.insert("__recording".into(), json!(e.key));
-                                d.fields.insert("__selected".into(), json!(e.key));
-                            }
-                        });
-                        if scroll_to.as_deref() == Some(e.key.as_str()) {
-                            row.response.scroll_to_me(Some(egui::Align::Center));
-                        }
-                    }
-                });
-            });
-            ui.add_space(6.0);
-            // Selected-row actions + message.
-            ui.horizontal(|ui| {
-                let sel = d.str("__selected");
-                ui.add_enabled_ui(!sel.is_empty(), |ui| {
-                    if ui.button(tl!("Clear")).on_hover_text(tl!("Remove the shortcut")).clicked() {
-                        let _ = assign(&mut ov, &sel, None, true);
-                        d.fields.insert("set".into(), json!(CUSTOM));
-                    }
-                    if ui.button(tl!("Use Default")).clicked() {
-                        reset_one(&mut ov, &sel);
-                    }
-                });
-                let conflict = d.str("__conflict");
-                if !conflict.is_empty() && ui.button(tl!("Go to Conflict")).clicked() {
-                    let tab = if conflict.starts_with("tool:") { "tools" } else { "menu" };
-                    d.fields.insert("tab".into(), json!(tab));
-                    d.fields.insert("query".into(), json!(""));
-                    d.fields.insert("__selected".into(), json!(conflict));
-                    d.fields.insert("__scrollTo".into(), json!(conflict));
-                    d.fields.insert("__conflict".into(), json!(""));
-                }
-            });
-            let msg = d.str("__message");
-            if !msg.is_empty() {
-                ui.label(egui::RichText::new(msg).color(t.accent_strong).size(11.5));
+    crate::dialogs::modal::show(ctx, tl!("Keyboard Shortcuts"), egui::Id::new("dialog-shortcuts"), -20.0, 20, |ui| {
+        ui.set_width(640.0);
+        crate::dialogs::modal::heading(ui, tl!("Keyboard Shortcuts"));
+        ui.add_space(10.0);
+        // Set row.
+        ui.horizontal(|ui| {
+            ui.label(egui::RichText::new(tl!("Set:")).color(t.text_dim));
+            let cur = d.str("set");
+            let mut opts: Vec<&str> = PRESETS.to_vec();
+            if !PRESETS.contains(&cur.as_str()) {
+                opts.push(CUSTOM);
            }
-            let n = all_conflicts(&ov).len();
-            if n > 0 {
-                ui.label(
-                    egui::RichText::new(crate::i18n::tn(
-                        n as u64,
-                        "{n} shortcut is assigned more than once",
-                        "{n} shortcuts are assigned more than once",
-                    ))
-                    .color(t.text_dim)
-                    .size(11.0),
-                );
+            // The sets listed are ours (translated); a set read from an imported file shows
+            // its name as it is.
+            if let Some(&name) = crate::dialogs::mixed_dropdown(ui, "kbset", &cur, &opts, 200.0, |_| true).and_then(|i| opts.get(i))
+                && let Some(p) = preset(name)
+            {
+                ov = p;
+                d.fields.insert("set".into(), json!(name));
+                d.fields.insert("__message".into(), json!(""));
            }
            ui.add_space(12.0);
-            ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
-                if widgets::primary_button(ui, tl!("OK")).clicked() {
-                    ok = true;
+            if ui.button(tl!("Import…")).clicked() {
+                d.fields.insert("__import".into(), json!(true));
+            }
+            if ui.button(tl!("Export…")).clicked() {
+                d.fields.insert("__export".into(), json!(true));
+            }
+            if ui.button(tl!("Reset to Defaults")).clicked() {
+                ov.clear();
+                d.fields.insert("set".into(), json!(PRESETS[0]));
+                d.fields.insert("__message".into(), json!(tl!("All shortcuts reset to defaults.")));
+            }
+        });
+        ui.add_space(8.0);
+        // Tabs + search.
+        ui.horizontal(|ui| {
+            let tab = d.str("tab");
+            for (id, label) in [("tools", "Tools"), ("menu", "Menu Commands")] {
+                if ui.selectable_label(tab == id, egui::RichText::new(tl!(label)).font(theme::semibold(12.5))).clicked() {
+                    d.fields.insert("tab".into(), json!(id));
                }
-                ui.add_space(8.0);
-                if widgets::secondary_button(ui, tl!("Cancel")).clicked() {
-                    cancel = true;
+            }
+            ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
+                let mut q = d.str("query");
+                if ui.add(egui::TextEdit::singleline(&mut q).hint_text(tl!("Search")).desired_width(200.0)).changed() {
+                    d.fields.insert("query".into(), json!(q));
                }
            });
        });
+        ui.add_space(6.0);
+        let tools = d.str("tab") != "menu";
+        let q = d.str("query").to_lowercase();
+        let selected = d.str("__selected");
+        let rec = d.str("__recording");
+        let scroll_to = d.fields.remove("__scrollTo").and_then(|v| v.as_str().map(str::to_string));
+        egui::Frame::NONE.fill(t.input).stroke(egui::Stroke::new(1.0, t.input_border)).inner_margin(egui::Margin::same(4)).show(ui, |ui| {
+            ui.horizontal(|ui| {
+                ui.allocate_ui_with_layout(egui::vec2(360.0, 16.0), egui::Layout::left_to_right(egui::Align::Center), |ui| {
+                    ui.set_min_width(360.0);
+                    ui.label(egui::RichText::new(if tools { tl!("Tool") } else { tl!("Command") }).color(t.text_dim).size(11.0));
+                });
+                ui.label(egui::RichText::new(tl!("Shortcut")).color(t.text_dim).size(11.0));
+            });
+            egui::ScrollArea::vertical().max_height(360.0).auto_shrink([false, false]).show(ui, |ui| {
+                for e in entries().iter().filter(|e| e.is_tool == tools) {
+                    let sc = effective_in(&ov, &e.key);
+                    let matches = e.label.to_lowercase().contains(&q)
+                        || tl!(&e.label).to_lowercase().contains(&q)
+                        || e.group.to_lowercase().contains(&q)
+                        || tl!(&e.group).to_lowercase().contains(&q)
+                        || sc.as_deref().is_some_and(|s| s.to_lowercase().contains(&q));
+                    if !q.is_empty() && !matches {
+                        continue;
+                    }
+                    let row = ui.horizontal(|ui| {
+                        let name = if e.is_tool || e.group.is_empty() {
+                            tl!(&e.label).to_string()
+                        } else {
+                            format!("{} › {}", tl!(&e.group), tl!(&e.label))
+                        };
+                        let r = ui
+                            .allocate_ui_with_layout(egui::vec2(360.0, 20.0), egui::Layout::left_to_right(egui::Align::Center), |ui| {
+                                ui.set_min_width(360.0);
+                                ui.add(egui::Button::selectable(selected == e.key, egui::RichText::new(name).color(t.text)).truncate())
+                            })
+                            .inner;
+                        if r.clicked() {
+                            d.fields.insert("__selected".into(), json!(e.key));
+                        }
+                        let label = if rec == e.key {
+                            tl!("Press keys…").to_string()
+                        } else {
+                            sc.as_deref().map(menus::pretty_shortcut).unwrap_or_else(|| "—".into())
+                        };
+                        let changed = ov.contains_key(&e.key);
+                        let txt = egui::RichText::new(label).color(if changed { t.accent } else { t.text });
+                        let b = ui
+                            .add_sized([150.0, 20.0], egui::Button::new(txt).selected(rec == e.key))
+                            .on_hover_text(tl!("Click, then press the new shortcut (Esc cancels)"));
+                        if b.clicked() {
+                            d.fields.insert("__recording".into(), json!(e.key));
+                            d.fields.insert("__selected".into(), json!(e.key));
+                        }
+                    });
+                    if scroll_to.as_deref() == Some(e.key.as_str()) {
+                        row.response.scroll_to_me(Some(egui::Align::Center));
+                    }
+                }
+            });
+        });
+        ui.add_space(6.0);
+        // Selected-row actions + message.
+        ui.horizontal(|ui| {
+            let sel = d.str("__selected");
+            ui.add_enabled_ui(!sel.is_empty(), |ui| {
+                if ui.button(tl!("Clear")).on_hover_text(tl!("Remove the shortcut")).clicked() {
+                    let _ = assign(&mut ov, &sel, None, true);
+                    d.fields.insert("set".into(), json!(CUSTOM));
+                }
+                if ui.button(tl!("Use Default")).clicked() {
+                    reset_one(&mut ov, &sel);
+                }
+            });
+            let conflict = d.str("__conflict");
+            if !conflict.is_empty() && ui.button(tl!("Go to Conflict")).clicked() {
+                let tab = if conflict.starts_with("tool:") { "tools" } else { "menu" };
+                d.fields.insert("tab".into(), json!(tab));
+                d.fields.insert("query".into(), json!(""));
+                d.fields.insert("__selected".into(), json!(conflict));
+                d.fields.insert("__scrollTo".into(), json!(conflict));
+                d.fields.insert("__conflict".into(), json!(""));
+            }
+        });
+        let msg = d.str("__message");
+        if !msg.is_empty() {
+            ui.label(egui::RichText::new(msg).color(t.accent_strong).size(11.5));
+        }
+        let n = all_conflicts(&ov).len();
+        if n > 0 {
+            ui.label(
+                egui::RichText::new(crate::i18n::tn(
+                    n as u64,
+                    "{n} shortcut is assigned more than once",
+                    "{n} shortcuts are assigned more than once",
+                ))
+                .color(t.text_dim)
+                .size(11.0),
+            );
+        }
+        ui.add_space(12.0);
+        ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
+            if widgets::primary_button(ui, tl!("OK")).clicked() {
+                ok = true;
+            }
+            ui.add_space(8.0);
+            if widgets::secondary_button(ui, tl!("Cancel")).clicked() {
+                cancel = true;
+            }
+        });
+    });
    d.fields.insert("overrides".into(), serde_json::to_value(&ov).unwrap_or(json!({})));
    let import = d.fields.remove("__import").is_some();
    let export = d.fields.remove("__export").is_some();
@@ -8,7 +8,7 @@ use serde::{Deserialize, Serialize};
 use serde_json::{Value, json};

 use crate::state::{Dialog, DockTab, UiState};
-use crate::theme::{self, Tokens};
+use crate::theme::Tokens;
 use crate::{VectorcraftApp, widgets};

 #[derive(Clone, Debug, PartialEq, Serialize, Deserialize)]
@@ -318,79 +318,66 @@ pub fn show(app: &mut VectorcraftApp, ctx: &egui::Context) {
    let t = Tokens::get(ctx);
    let (mut ok, mut cancel) = (false, false);
    let mut action: Option<(&str, Value)> = None;
-    egui::Area::new(egui::Id::new("modal-dim")).order(egui::Order::Middle).fixed_pos(egui::pos2(0.0, 0.0)).show(ctx, |ui| {
-        ui.allocate_rect(ctx.content_rect(), egui::Sense::click());
-    });
    let manage = d.kind == "manageWorkspaces";
-    egui::Window::new("Workspace")
-        .id(egui::Id::new("dialog-workspace"))
-        .order(egui::Order::Foreground)
-        .collapsible(false)
-        .resizable(false)
-        .title_bar(false)
-        .anchor(egui::Align2::CENTER_CENTER, [0.0, -40.0])
-        .frame(egui::Frame::window(&ctx.global_style()).fill(t.panel).inner_margin(egui::Margin::same(22)))
-        .show(ctx, |ui| {
-            ui.set_width(340.0);
-            ui.label(
-                egui::RichText::new(if manage { tl!("Manage Workspaces") } else { tl!("New Workspace") }).font(theme::semibold(16.0)).color(t.text),
-            );
-            ui.add_space(12.0);
-            if manage {
-                egui::Frame::NONE.fill(t.input).stroke(egui::Stroke::new(1.0, t.input_border)).inner_margin(egui::Margin::same(4)).show(ui, |ui| {
-                    ui.set_min_height(140.0);
-                    ui.set_width(ui.available_width());
-                    for n in names(&app.ui) {
-                        let builtin = is_builtin(&n);
-                        let shown = crate::panels::label_or_name(&n, builtin);
-                        let text = if builtin { egui::RichText::new(shown).color(t.text_dim) } else { egui::RichText::new(shown).color(t.text) };
-                        if ui.selectable_label(d.str("selected") == n, text).clicked() && !builtin {
-                            d.fields.insert("selected".into(), json!(n));
-                            d.fields.insert("name".into(), json!(n));
-                        }
+    crate::dialogs::modal::show(ctx, "Workspace", egui::Id::new("dialog-workspace"), -40.0, 22, |ui| {
+        ui.set_width(340.0);
+        crate::dialogs::modal::heading(ui, if manage { tl!("Manage Workspaces") } else { tl!("New Workspace") });
+        ui.add_space(12.0);
+        if manage {
+            egui::Frame::NONE.fill(t.input).stroke(egui::Stroke::new(1.0, t.input_border)).inner_margin(egui::Margin::same(4)).show(ui, |ui| {
+                ui.set_min_height(140.0);
+                ui.set_width(ui.available_width());
+                for n in names(&app.ui) {
+                    let builtin = is_builtin(&n);
+                    let shown = crate::panels::label_or_name(&n, builtin);
+                    let text = if builtin { egui::RichText::new(shown).color(t.text_dim) } else { egui::RichText::new(shown).color(t.text) };
+                    if ui.selectable_label(d.str("selected") == n, text).clicked() && !builtin {
+                        d.fields.insert("selected".into(), json!(n));
+                        d.fields.insert("name".into(), json!(n));
                    }
-                });
-                ui.add_space(8.0);
-                let sel = d.str("selected");
-                ui.horizontal(|ui| {
-                    let mut name = d.str("name");
-                    if ui.add(egui::TextEdit::singleline(&mut name).desired_width(180.0)).changed() {
-                        d.fields.insert("name".into(), json!(name));
-                    }
-                    if ui.button(tl!("New")).on_hover_text(tl!("Save the current layout under this name")).clicked() {
-                        action = Some(("window.workspace.new", json!({"name": d.str("name")})));
-                    }
-                    ui.add_enabled_ui(!sel.is_empty(), |ui| {
-                        if ui.button(tl!("Rename")).clicked() {
-                            action = Some(("window.workspace.rename", json!({"name": sel, "to": d.str("name")})));
-                        }
-                        if ui.button(tl!("Delete")).clicked() {
-                            action = Some(("window.workspace.delete", json!({"name": sel})));
-                        }
-                    });
-                });
-            } else {
-                ui.horizontal(|ui| {
-                    ui.label(egui::RichText::new(tl!("Name:")).color(t.text_dim));
-                    let mut name = d.str("name");
-                    let r = ui.add(egui::TextEdit::singleline(&mut name).desired_width(240.0));
-                    if r.changed() {
-                        d.fields.insert("name".into(), json!(name));
-                    }
-                });
-                ui.label(egui::RichText::new(tl!("Saves the current bars, toolbar and panel layout.")).color(t.text_dim).size(11.0));
-            }
-            ui.add_space(16.0);
-            ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
-                if widgets::primary_button(ui, tl!("OK")).clicked() {
-                    ok = true;
-                }
-                ui.add_space(8.0);
-                if !manage && widgets::secondary_button(ui, tl!("Cancel")).clicked() {
-                    cancel = true;
                }
            });
+            ui.add_space(8.0);
+            let sel = d.str("selected");
+            ui.horizontal(|ui| {
+                let mut name = d.str("name");
+                if ui.add(egui::TextEdit::singleline(&mut name).desired_width(180.0)).changed() {
+                    d.fields.insert("name".into(), json!(name));
+                }
+                if ui.button(tl!("New")).on_hover_text(tl!("Save the current layout under this name")).clicked() {
+                    action = Some(("window.workspace.new", json!({"name": d.str("name")})));
+                }
+                ui.add_enabled_ui(!sel.is_empty(), |ui| {
+                    if ui.button(tl!("Rename")).clicked() {
+                        action = Some(("window.workspace.rename", json!({"name": sel, "to": d.str("name")})));
+                    }
+                    if ui.button(tl!("Delete")).clicked() {
+                        action = Some(("window.workspace.delete", json!({"name": sel})));
+                    }
+                });
+            });
+        } else {
+            ui.horizontal(|ui| {
+                ui.label(egui::RichText::new(tl!("Name:")).color(t.text_dim));
+                let mut name = d.str("name");
+                let r = ui.add(egui::TextEdit::singleline(&mut name).desired_width(240.0));
+                if r.changed() {
+                    d.fields.insert("name".into(), json!(name));
+                }
+            });
+            ui.label(egui::RichText::new(tl!("Saves the current bars, toolbar and panel layout.")).color(t.text_dim).size(11.0));
+        }
+        ui.add_space(16.0);
+        ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
+            if widgets::primary_button(ui, tl!("OK")).clicked() {
+                ok = true;
+            }
+            ui.add_space(8.0);
+            if !manage && widgets::secondary_button(ui, tl!("Cancel")).clicked() {
+                cancel = true;
+            }
        });
+    });
    if !manage && ctx.input(|i| i.key_pressed(egui::Key::Enter)) {
        ok = true;
    }
Author	SHA1	Message	Date
bflatasticandClaude Opus 5.5	e04385e950	Fix #423 : Movable dialogs and Offset Path's Joins dropdown The modal dialogs were anchored to the window's centre, so none of them could be moved. They now share one modal frame (dialogs/modal.rs): the band from the window's top edge down to its heading moves it, as a title bar would, with a grab cursor; it stays on screen and keeps where it was moved (per dialog, for the session). The shared dialog frame, New Document (and More Settings), Preferences, Keyboard Shortcuts, Workspaces and Find Font all use it; About moves by its title bar. The form dialogs drew every string field as a text box, so Offset Path's Joins had to be typed. Their choice fields are now dropdowns (Joins: Miter, Round, Bevel; Average's axis; Shear's and Reflect's axis), the fields follow the dialog's order (Offset, Joins, Miter Limit; Rows, Columns, Gutter) instead of alphabetical, and Offset Path has a Preview that Cancel rolls back. The axis labels are translated in a new "axis" catalog context: the plain Horizontal and Vertical rows mean writing direction in Japanese. ja, es, zh-hans and zh-hant get the axis rows (Horizontal, Vertical, Both) and Joins, Miter, Bevel, Offset and Axis. Headless tests drag the heading of four dialog windows (moves, a drag below the heading doesn't, kept on screen, reopens where it was left), open the Joins dropdown and choose Round (same result as the command with round joins), and check the axis dropdowns and the preview. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>	2026-10-08 10:52:05 +07:00
BFlat	4c9d27b4f5	Merge pull request #428 from storytold/fix/issue-421 Fix #421: Document Color Mode can put RGB greys on the black plate	2026-10-08 10:38:20 +07:00
BFlat	45f0dcc397	Merge pull request #425 from storytold/fix/issue-419 Fix #419: PDF/.ai art past the layer scan's limit never shows a hidden layer	2026-10-08 10:38:02 +07:00
BFlat	ad28cf4793	Merge pull request #424 from storytold/fix/issue-420 Fix #420: SVG import keeps clipped layers as layers with a clipping mask	2026-10-08 10:37:45 +07:00