editor: Support mirrored gutters for side-by-side diffs

[glani]

Description

Builds on #3416 (ScrollbarPlacement, merged into next) and #3359's gutter markers.

In a side-by-side diff, both gutters can face the center, so the line numbers of corresponding lines sit next to each other across the divider and can be compared directly. The editor's gutter is always on the left of the text today, so the left pane cannot do that.

This adds gutter_side(Side) / set_gutter_side to the editor state for the left pane of such a diff, default Side::Left (unchanged). On the right the gutter is mirrored: the same columns, in the same order counted from the text, with the line numbers aligned toward it. The text and gutter x offsets are computed once per layout and used for painting, hit testing, IME bounds and scroll-into-view. A scrollbar on the gutter's side stays outermost. With the gutter on the right and the scrollbar on the left — the left pane's outer edge — the text keeps clear of the scrollbar's whole track: its effective width, the active thumb included, less the editor's left padding, at least the usual 10 px margin; that one reservation sets the text origin, width, wrap width and scroll size.

Line numbers are placed by their shaped width rather than padded with spaces: in a proportional font a space is about a third of a digit, so the default left gutter left right-aligned numbers ragged and 6–11 px short of the text; they now line up against it on either side. Editor puts its narrow padding on the gutter's side.

gutter_order([GutterColumn]) orders the gutter's columns from the text outward, on either side: the default is [FoldIcons, LineNumbers, Markers] (unchanged); [FoldIcons, Markers, LineNumbers] puts a diff's change markers between the text and the line numbers, as IntelliJ's diff does. A column left out follows the listed ones in its default order.

The Editor Diff story (70b271ad, @huacnlee) shows original and modified source with change markers; its Options menu switches between both gutters on the left and center-facing gutters, and optionally puts the markers before the line numbers. The two panes scroll together, by wheel and by dragging either scrollbar. The ordinary Editor story is unchanged.

Screenshot

Before	After

A side-by-side diff with changed lines marked; the left pane uses .scrollbar_placement(ScrollbarPlacement::BottomLeft).gutter_side(Side::Right), mirrored:

Both gutters on the left	Mirrored

The columns in IntelliJ's order, .gutter_order([GutterColumn::FoldIcons, GutterColumn::Markers, GutterColumn::LineNumbers]) on both panes — without and with folding (an empty fold column here):

IntelliJ's order	With folding

Public API

gpui_base (re-exported by gpui_component):

• InputBaseState::gutter_side(mut self, side: Side) -> Self — builder: which side of the text the gutter is drawn on; default Side::Left, Side::Right for the left pane of a side-by-side diff.
• InputBaseState::set_gutter_side(&mut self, side: Side, cx: &mut Context<Self>) — the same, at runtime.
• InputPresentation::gutter_side(&self) -> Side — the side the editor's gutter sits on.
• GutterColumn { FoldIcons, LineNumbers, Markers } — a column of the gutter.
• InputBaseState::gutter_order(mut self, columns: impl IntoIterator<Item = GutterColumn>) -> Self / set_gutter_order(&mut self, columns, cx: &mut Context<Self>) — the columns from the text outward; default [FoldIcons, LineNumbers, Markers]; a column left out follows in its default order, a repeat is ignored.

How to Test

• cargo test -p gpui-base --lib: new tests for the text and gutter origins with an unchanged wrap width, the mirrored fold icons and columns, the scrollbar staying outermost (left/left, right/left, right/right), clicks in the text and in the gutter on both sides, caret / IME / range_to_bounds / selection-path x including a long line scrolled clear of the gutter, a right-side case in the existing gutter-bounds test, every gutter column — markers included — mirrored to 0.01 px for all six orders with folding on and off, the order normalised and counted from the text on both sides, clicks on the fold icon and the line number in every side/order combination, Editor keeping its gutter-side padding, and the text clear of the whole track of a left scrollbar with zero padding and with a wider themed track. Each fails with its code reverted.
• cargo test -p gpui-component-story --lib editor_diff: layout switching keeps both sources, and the panes stay aligned on wheel input and while either scrollbar is dragged.
• cargo run -p gpui-component-story -- 'Editor Diff', then Options.

Checklist

• I have read the CONTRIBUTING document and followed the guidelines.
• Reviewed the changes in this PR and confirmed AI generated code (If any) is accurate.
• Passed cargo run for story tests related to the changes.
• Tested macOS, Windows and Linux platforms performance (if the change is platform-specific)

[huacnlee]

This PR adds right-side editor gutters and configurable column ordering for mirrored diff panes. The requirement and shared-geometry approach are reasonable. I reviewed only the three commits after #3416's 14ef7932c, at head a38e74079.

Please address the following before merging:

1. P2 — Reserve the effective scrollbar width when keeping text clear. In crates/base/src/input/base/element.rs:2779–2782, clearance is fixed at RIGHT_MARGIN (10 px), while the default scrollbar track is 16 px wide and theme configuration can make it wider. A Base editor with zero padding, a right gutter, and a left scrollbar starts text at x = 10: the track intercepts clicks over the first 6 px of text, and the active thumb overlaps the first 2 px. The current test supplies 6 px of left padding, masking this case. Compute clearance from the effective scrollbar geometry and editor padding, and apply it consistently to text origin, width, wrapping, and scrolling. Please cover zero padding and a wider themed track.

2. Qualify the marker placement documentation. website/component/editor.md:389 and crates/base/src/input/editor/line_decorations.rs:212 describe markers as always outside the line numbers. That is only the default order; gutter_order can move them inward. Update the Rust documentation and both website locales accordingly.

I also found that the Public API inventory omitted InputPresentation::gutter_side(&self) -> Side; I have included it while updating the English title and description.

Validation: source/diff review and git diff --check passed. Tests and real-window validation were not run. No other concrete regressions were identified in mirrored columns, hit testing, or IME coordinate handling.

[glani]

Thanks, both addressed (rebased onto #3416's d8057f92):

1. The clearance is now the scrollbar's effective width — Scrollbar::full_width, the track width the scrollbar paints with or the active thumb's inset + width when that reaches further — less the editor's left padding, at least RIGHT_MARGIN; it is one reservation that sets the text origin, width, wrap width and scroll size. New test the_text_keeps_clear_of_the_whole_track_of_a_scrollbar_on_the_left: zero padding, with the default track and with a 24 px themed track; it asserts the text origin and that a click 1 px into the text lands in the text. Squashed into editor: Keep the text clear of a scrollbar on the left.
2. The marker docs (line_decorations.rs and both website locales) now say markers sit outside the line numbers in the default order and that gutter_order can put them by the text.

InputPresentation::gutter_side is in the Public API list now. Each commit's tests also compile on their own.

[glani]

Rebased onto next now that #3416 is merged — the three commits only, the tree is the same as before (f617384d), so both review points are in 576cd2f4 and 36d1e432.

[huacnlee]

Please cherry-pick this follow-up commit into the PR:

70b271ad

git fetch https://github.com/longbridge/gpui-kit.git pr-3417-diff-story
git cherry-pick 70b271ad

The useful case here is a side-by-side diff with both gutters facing the center, where corresponding line numbers can be compared directly. Please frame the feature around that use case rather than presenting right-side line numbers as a general Editor preference or RTL support.

This commit adds an Editor Diff story showing original and modified source with change markers. Its Options menu switches between both gutters on the left and center-facing gutters, and optionally places markers before line numbers. The ordinary Editor story remains unchanged.

It also synchronizes vertical scrolling before either pane is laid out. The initial observer-only approach missed scrollbar-thumb dragging; the regression test now checks real wheel input and dragging either scrollbar, including corresponding row positions on the same frame, as well as source preservation when switching layouts.

Validation: the targeted Story regression test, build, formatting, and diff checks passed. Launch with:

cargo run -p gpui-component-story -- 'Editor Diff'

This follow-up was implemented with AI assistance and tested locally.

[glani]

Thanks — cherry-picked as d9c5f2f5, and cargo test -p gpui-component-story --lib editor_diff passes here.

Reframed around that case in 073cbaf0: the editor docs (en and zh-CN) now lead with a side-by-side diff whose gutters face the center so corresponding line numbers sit side by side, then the API, then the Editor Diff story; gutter_side's doc says Side::Right is for the left pane of such a diff. The description is updated the same way.

[glani]

CI failed on every_public_component_and_story_is_accounted_for: the editor_diff story had no entry in component-inventory.json. Added in 260dee0a as infrastructure — two Editors, registered by the Editor story, laid out as a diff, no new constructor — and the inventory test passes locally.

[glani]

One more: verify-coverage.mjs then wanted a JavaScript gallery route for every inventoried Story. 2de94fff lists editor_diff in its NOT_MIRRORED with the reason (two Editors as a diff; the editor route already mirrors the component). If you would rather mirror it as a route, I can add the record, the order entry and the coveredBy line instead.

[huacnlee]

Please cherry-pick this additional fix from pr-3417-diff-story:

git fetch https://github.com/longbridge/gpui-kit.git pr-3417-diff-story
git cherry-pick e30f26152f31f91cbdefdadc42810a4baf997bdb

If the previous diff story commit (70b271ad) has not been applied yet, please cherry-pick it first.

The horizontal scrollbar now excludes the center-facing gutter in the original pane, mirroring the modified pane. The vertical scrollbars remain on the outer edges, and horizontal scrolling remains independent. This also prevents the horizontal scrollbar from intercepting clicks in the right gutter. No public API changes.

Validation: horizontal scrollbar, scrollbar, editor element, and diff scrolling regression tests passed; formatting and Base Clippy checks passed.

Attached screenshot of the side-by-side diff (the two panes have independent horizontal scroll offsets):

[glani]

Cherry-picked as 4a70f007. Here cargo test -p gpui-base --lib passes the scrollbar and editor tests and the editor_diff story test passes; rustfmt is clean.