Interaction · Keys, scroll and focus: roving focus, scroll sync, type-ahead

RovingFocus keeps a row or column of items behind one Tab stop: the
arrows walk focus, Home and End reach the ends, Enter or Space presses,
and a press moves the stop without taking focus. ScrollSync keeps boxes
at one place along an axis: the pane a wheel turned leads, and a canvas
ahead of the panes copies its place before they draw. SelectableList
moves its cursor to the row that starts with the letters typed, the
letters joining within a pause and a Command letter left to the app.
forms::History becomes public as the undo manager. The gallery shows
gpui's own key bindings, a two-stroke chord waiting on its first
stroke, uniform_list, autofocus and the focus ring.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

examples/gallery/pages/interaction/mod.rs

@@ -1,7 +1,10 @@
 use gpui::{AnyElement, App, Window, div, prelude::*};
 
+mod keys;
 mod pointer;
 
+pub use keys::bind_keys;
+
 use super::Page;
 use crate::script::Step;
 
@@ -9,7 +12,7 @@ pub const PAGE: Page = Page {
     number: 38,
     slug: "interaction",
     title: "Interaction",
-    summary: "Drag and drop, resizing and turning, band selection, presses and gestures.",
+    summary: "Drag and drop, resizing and turning, band selection, presses and gestures, keys, scrolling and focus.",
     render,
     script: SCRIPT,
 };
@@ -25,11 +28,28 @@ const SCRIPT: &[Step] = &[
     Step::UpAt("interaction-rotatable", 116.0, 70.0),
     Step::Wait(100),
     Step::Shot("turned"),
+    Step::DownAt("interaction-keys", 12.0, 12.0),
+    Step::UpAt("interaction-keys", 12.0, 12.0),
+    Step::Key("cmd-k"),
+    Step::Wait(100),
+    Step::Shot("chord-waiting"),
+    Step::Key("cmd-s"),
+    Step::Wait(100),
+    Step::Shot("chord-done"),
+    Step::DownAt("interaction-fruit", 40.0, 16.0),
+    Step::UpAt("interaction-fruit", 40.0, 16.0),
+    Step::Type("bl"),
+    Step::Wait(100),
+    Step::Shot("type-ahead"),
 ];
 
 fn render(window: &mut Window, cx: &mut App) -> AnyElement {
     div()
         .child(pointer::drag_and_drop(window, cx))
         .child(pointer::shapes(window, cx))
+        .child(keys::keys(window, cx))
+        .child(keys::undo(window, cx))
+        .child(keys::scrolling(cx))
+        .child(keys::focus(window, cx))
         .into_any_element()
 }