@cplieger/web-terminal-ui 7.3.1 → 8.0.0

package/src/features/dom.ts

@@ -4,12 +4,14 @@
 // share. No interpolation ever passes through here, so it carries no injection
 // surface.
 
-/** Parse a static HTML string and return its first element. */
-export function fromHTML(html: string): HTMLElement {
-  const tpl = document.createElement("template");
+import { windowOf } from "../kernel/realm.js";
+
+/** Parse a static HTML string in `doc` and return its first element. */
+export function fromHTML(doc: Document, html: string): HTMLElement {
+  const tpl = doc.createElement("template");
   tpl.innerHTML = html.trim();
   const el = tpl.content.firstElementChild;
-  if (!(el instanceof HTMLElement)) {
+  if (!(el instanceof windowOf(doc).HTMLElement)) {
     throw new Error("web-terminal-ui: fromHTML produced no element");
   }
   return el;
@@ -21,55 +23,43 @@ export function fromHTML(html: string): HTMLElement {
  *  Firefox. */
 export const PRESSED_CLASS = "wt-pressed";
 
-/** holdFocusOnPress wires a chrome button that must NOT take the keyboard off
- *  the terminal, and paints its own press state because of it.
- *
- *  Focus: the hidden terminal textarea stays focused. A bar button needs no
- *  focus of its own, and letting the press shift focus makes iOS/iPadOS consume
- *  the FIRST tap to blur the input (so "+" only fired on the second tap — the
- *  reported double-tap), while on a desktop it parks the keyboard on the button,
- *  where the strip's own keydown handling eats arrows as "switch tab" and Delete
- *  as "close tab". Cancelling pointerdown's default prevents both.
- *
- *  Press feedback: cancelling that default is also what suppresses the browser's
- *  OWN activation state — Firefox ties `:active` to the mousedown default action,
- *  and preventDefault on pointerdown suppresses the compatibility mousedown
- *  entirely (measured on Firefox 140: no mousedown event, `matches(":active")`
- *  false, background unchanged for as long as the button is held; Chromium and
- *  WebKit still apply it). So these buttons — and ONLY these — carry the press
- *  class, and their CSS press rules match either. That is why the two jobs live
- *  in one helper: a caller that cancels the default without painting the class
- *  ships a control with no press feedback in one engine, which is exactly the
- *  defect this replaced.
- *
- *  The class is dropped on release, on cancel, and when the pointer leaves while
- *  held (a press dragged off the button is not an activation), mirroring what
- *  `:active` does on its own. A non-primary button press paints nothing, also
- *  matching it. The release listeners live on `window` for the life of the press
- *  (an `AbortController`, the pattern the switcher gesture uses) rather than on
- *  the button: `.wt-scroll-bottom` acts on the press and hides itself, so by the
- *  time the release lands the button is `display: none` and receives no
- *  `pointerup` at all — bound to the button, the class would stay painted and the
- *  control would come back already lit. */
-export function holdFocusOnPress(btn: HTMLElement): void {
+/** Wire a chrome button that must NOT take the keyboard off the terminal, and
+ *  paint its own press state because of it: cancelling pointerdown's default
+ *  keeps the hidden textarea focused (iOS otherwise spends the first tap on a
+ *  blur; a desktop parks the arrows on the button) and suppresses Firefox's
+ *  `:active` (tied to the mousedown default, measured on Firefox 140), so the
+ *  press class replaces it. The release listeners live on the window because
+ *  `.wt-scroll-bottom` hides itself on press and never sees its own `pointerup`.
+ *  Returns the release that unwires the button and ends a held press. */
+export function holdFocusOnPress(btn: HTMLElement): () => void {
+  const wired = new AbortController();
   let release: (() => void) | null = null;
-  btn.addEventListener("pointerdown", (e) => {
-    e.preventDefault();
-    if (e.button !== 0 || release !== null) {
-      return;
-    }
-    btn.classList.add(PRESSED_CLASS);
-    const held = new AbortController();
-    release = () => {
-      held.abort();
-      release = null;
-      btn.classList.remove(PRESSED_CLASS);
-    };
-    const end = (): void => {
-      release?.();
-    };
-    window.addEventListener("pointerup", end, { signal: held.signal });
-    window.addEventListener("pointercancel", end, { signal: held.signal });
-    btn.addEventListener("pointerleave", end, { signal: held.signal });
-  });
+  btn.addEventListener(
+    "pointerdown",
+    (e) => {
+      e.preventDefault();
+      if (e.button !== 0 || release !== null) {
+        return;
+      }
+      btn.classList.add(PRESSED_CLASS);
+      const held = new AbortController();
+      release = () => {
+        held.abort();
+        release = null;
+        btn.classList.remove(PRESSED_CLASS);
+      };
+      const end = (): void => {
+        release?.();
+      };
+      const win = windowOf(btn.ownerDocument);
+      win.addEventListener("pointerup", end, { signal: held.signal });
+      win.addEventListener("pointercancel", end, { signal: held.signal });
+      btn.addEventListener("pointerleave", end, { signal: held.signal });
+    },
+    { signal: wired.signal },
+  );
+  return () => {
+    wired.abort();
+    release?.();
+  };
 }

package/src/features/menu-position.ts

@@ -1,11 +1,9 @@
-// menu-position.ts — shared point-anchored placement for the fixed-position
-// menus (the terminal context menu and the tab-strip menu), which previously
-// carried two hand-synced copies of this exact clamp/flip math.
-//
 // position:fixed means x/y are viewport coordinates; the VISUAL viewport
 // (when present) is the area above the on-screen keyboard, so clamping to it
 // keeps a menu off the keyboard too.
 
+import { windowOf } from "../kernel/realm.js";
+
 /** Clamp margin from the visible viewport edges (px). */
 const EDGE_MARGIN = 8;
 
@@ -20,31 +18,28 @@ const FLIP_GAP = 16;
  *  the release without eating a deliberate follow-up tap. */
 const SWALLOW_MS = 350;
 
-/** createClickSwallow returns the two halves a point-anchored menu needs to
- *  survive the contextmenu-then-touchend race: `arm()` and `swallowing()` as the
- *  first guard in the outside-click dismiss.
- *
- *  **Arm on the RELEASE edge, not when the menu opens.** The window is a fixed
- *  350ms from `arm()`, so arming it while the finger is still down only covers
- *  the release if the user lifts within 350ms. Both menus shipped that way and
- *  both dismissed themselves on release whenever the press was held a beat
- *  longer: the terminal menu opened from a 550ms hold timer, so anything past
- *  ~900ms of hold lost its guard, and the tab menu armed from a mid-press
- *  `contextmenu`. The terminal menu now opens from `touchend` itself, so its
- *  arm() is on the release by construction; the tab menu opens mid-press and
- *  re-arms when the opening gesture's pointer goes up.
- *
- *  It lives here, beside the shared placement math, because both point-anchored
- *  menus need it and a hand-synced second copy is what this module was extracted
- *  to stop. Arm it only for touch: a mouse right-click emits no trailing click,
- *  and swallowing there would eat a genuine dismiss. */
-export function createClickSwallow(): { arm: () => void; swallowing: () => boolean } {
+/** The two halves a point-anchored menu needs to survive the
+ *  contextmenu-then-touchend race. */
+interface ClickSwallow {
+  /** Start the swallow window. Call on the RELEASE edge of the opening touch,
+   *  not when the menu opens: the window is a fixed 350 ms from here, so armed
+   *  mid-press it only covers a release that comes within 350 ms. Touch only: a
+   *  mouse right-click emits no trailing click, and swallowing there would eat a
+   *  genuine dismiss. */
+  arm: () => void;
+  /** Whether a click arriving now is the opening gesture's own release; the
+   *  first guard in the outside-click dismiss. */
+  swallowing: () => boolean;
+}
+
+/** Build a swallow on `win`'s clock, the clock the menu's document runs on. */
+export function createClickSwallow(win: Pick<Window, "performance">): ClickSwallow {
   let until = 0;
   return {
     arm: (): void => {
-      until = performance.now() + SWALLOW_MS;
+      until = win.performance.now() + SWALLOW_MS;
     },
-    swallowing: (): boolean => performance.now() < until,
+    swallowing: (): boolean => win.performance.now() < until,
   };
 }
 
@@ -57,11 +52,12 @@ export function createClickSwallow(): { arm: () => void; swallowing: () => boole
  *  (wt-container). The menu must be measurable (rendered, not display:none)
  *  when called. */
 export function placeMenuAt(menu: HTMLElement, x: number, y: number): void {
-  const vv = window.visualViewport;
+  const win = windowOf(menu.ownerDocument);
+  const vv = win.visualViewport;
   const viewLeft = vv ? vv.offsetLeft : 0;
   const viewTop = vv ? vv.offsetTop : 0;
-  const viewWidth = vv ? vv.width : window.innerWidth;
-  const viewHeight = vv ? vv.height : window.innerHeight;
+  const viewWidth = vv ? vv.width : win.innerWidth;
+  const viewHeight = vv ? vv.height : win.innerHeight;
   const menuW = menu.offsetWidth;
   const menuH = menu.offsetHeight;
   const left = Math.max(

package/src/features/mobile-toolbar.ts

@@ -1,48 +1,30 @@
-/**
- * mobileToolbar feature: the on-screen key toolbar (Tab/Esc/arrows/Enter + a
- * collapse toggle and sticky-Ctrl) in the thumb-zone region.
- * The engine's toolbar.bindMobileToolbar wires the buttons (DECCKM-aware
- * arrows, sticky-Ctrl state; engine >= v3, where the widget moved out of the
- * keyboard module); this feature builds the toolbar chrome, routes its
- * output through the kernel funnel, and registers sticky-Ctrl as an input
- * transform so a typed character is rewritten to its Ctrl byte when armed.
- *
- * @module
- */
-
 import { toolbar } from "@cplieger/web-terminal-engine";
+import { windowOf } from "../kernel/realm.js";
 import type { TerminalFeature } from "../kernel/types.js";
 import { fromHTML } from "./dom.js";
 
 const { bindMobileToolbar } = toolbar;
 
-/** mobileToolbar's public API, so a peer feature (tabs) can drive the key grid
- *  from a button it owns instead of the toolbar's own toggle. */
+/** mobileToolbar's API, so a peer feature (tabs) can drive the key grid from a
+ *  button it owns instead of the toolbar's own toggle. */
 export interface MobileToolbarApi {
-  /** Show/hide the key grid (flips the toolbar's collapsed state). */
+  /** Show/hide the key grid. */
   toggle(): void;
-  /** Whether the key grid is currently open. */
   isOpen(): boolean;
-  /** Whether sticky-Ctrl is currently armed (a pending Ctrl press). */
+  /** Whether sticky-Ctrl is armed (a pending Ctrl press). */
   isCtrlArmed(): boolean;
-  /** Subscribe to sticky-Ctrl arm/disarm; returns an unsubscribe. Lets a peer
-   *  (the tab bar's keyboard button) surface the pending modifier even while the
-   *  key grid — and its own Ctrl button — is closed. */
+  /** Sticky-Ctrl arm/disarm, so a peer can show the pending modifier while the
+   *  key grid and its own Ctrl button are closed. */
   onCtrlArmedChange(fn: (armed: boolean) => void): () => void;
 }
 
 /** Options for the mobileToolbar feature. */
 export interface MobileToolbarOptions {
-  /** When true, the toolbar hides its own top-right toggle button and positions
-   *  the key grid to open above the mobile tab bar. The grid is then driven
-   *  externally through the returned API (tabs renders a keyboard button in the
-   *  switcher bar and calls toggle()). The tabbed presets set this; presetTouch
-   *  leaves it off and keeps the self-contained top-right toggle. */
+  /** Hide the toolbar's own toggle and open the grid above the mobile tab bar;
+   *  the grid is then driven through the returned API. The tabbed presets set it. */
   externalToggle?: boolean;
 }
 
-// The key grid, without the scroll-to-bottom button (that is the scrollToBottom
-// feature, composed into the same region's "scroll" slot).
 const TOOLBAR_HTML = `
 <div class="key-toolbar collapsed no-transition" aria-label="Navigation keys" role="toolbar">
   <button type="button" id="kb-toggle" class="kb-toggle" aria-label="Toggle key toolbar"><svg class="icon-hamburger" viewBox="0 0 24 24"><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/></svg><svg class="icon-close" viewBox="0 0 24 24"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg></button>
@@ -56,53 +38,46 @@ const TOOLBAR_HTML = `
   <button type="button" id="kb-right" class="kb-key kb-r2c4" aria-label="Right"><svg viewBox="0 0 24 24"><polyline points="9 6 15 12 9 18"/></svg></button>
 </div>`;
 
-/** Build the mobileToolbar feature.
- *
- *  The chrome is always built; whether it is VISIBLE is a CSS decision — the keys
- *  and the toggle are `display: none` and only a coarse pointer restores them
- *  (`css/23-toolbar.css`) — so a desktop consumer including this feature pays the
- *  DOM and sees nothing. Order it before `tabs` when `externalToggle` is set, since
- *  tabs reads the returned API through `ctx.use` to drive the grid from the tab
- *  bar's keyboard button.
- *
- *  Sticky-Ctrl is registered as a kernel INPUT TRANSFORM rather than handled in
- *  the toolbar's own click path, so it rewrites a character typed on the soft
- *  keyboard as well as one produced by these buttons. Teardown removes the
- *  toolbar, drops the transform, and clears every subscriber. */
+/** Build the mobileToolbar feature. The chrome is always built; only a coarse
+ *  pointer makes it visible (`css/23-toolbar.css`). Order it before `tabs` when
+ *  `externalToggle` is set, since tabs reads the API through `ctx.use`.
+ *  Sticky-Ctrl is a kernel INPUT TRANSFORM rather than a toolbar click path, so
+ *  it rewrites a character typed on the soft keyboard as well as one from these
+ *  buttons. */
 export function mobileToolbar(opts: MobileToolbarOptions = {}): TerminalFeature<MobileToolbarApi> {
   return {
     name: "mobileToolbar",
+    scope: "shell",
     setup(ctx) {
       const encoder = new TextEncoder();
       const decoder = new TextDecoder();
-      const toolbar = fromHTML(TOOLBAR_HTML);
-      // Externally-driven mode (the tabbed presets): the toolbar hides its own
-      // toggle and opens the grid above the mobile tab bar; tabs drives it via
-      // the returned API. The class gates both behaviors in CSS.
+      const win = windowOf(ctx.shell.root.ownerDocument);
+      const toolbar = fromHTML(ctx.shell.root.ownerDocument, TOOLBAR_HTML);
       if (opts.externalToggle) {
         toolbar.classList.add("wt-toolbar-external");
       }
       ctx.region("bottom-inset-end", "keys").appendChild(toolbar);
 
-      // Fan sticky-Ctrl arm/disarm out to subscribers (the tab bar's keyboard
-      // button mirrors it, so a pending Ctrl is visible with the grid closed).
       const armedListeners = new Set<(armed: boolean) => void>();
       const ctrl = bindMobileToolbar({
         toolbar,
         send: (bytes) => {
           ctx.send(encoder.encode(bytes));
         },
+        modes: ctx.modes,
         onCtrlChange: (armed) => {
           for (const fn of [...armedListeners]) {
             fn(armed);
           }
         },
       });
+      ctx.defer(() => {
+        ctrl.dispose();
+      });
 
-      // Sticky-Ctrl as an outbound-byte transform: when armed, a single typed
-      // character is rewritten to its Ctrl byte (and disarms). The toolbar's own
-      // arrow/Tab/Enter/Esc sends disarm before sending, so they pass through.
-      const offTransform = ctx.registerInputTransform((bytes) => {
+      // The toolbar's own arrow/Tab/Enter/Esc sends disarm before sending, so
+      // they pass through untouched.
+      ctx.registerInputTransform((bytes) => {
         if (!ctrl.isCtrlArmed()) {
           return bytes;
         }
@@ -111,18 +86,17 @@ export function mobileToolbar(opts: MobileToolbarOptions = {}): TerminalFeature<
         return mapped === text ? bytes : encoder.encode(mapped);
       });
 
-      // Prime the slide transition off for the first paint (no initial flash),
-      // then enable it after two frames.
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
+      // Two frames without the slide transition, so the first paint cannot flash.
+      let settleFrame = win.requestAnimationFrame(() => {
+        settleFrame = win.requestAnimationFrame(() => {
           toolbar.classList.remove("no-transition");
         });
       });
+      ctx.defer(() => {
+        win.cancelAnimationFrame(settleFrame);
+      });
 
       return {
-        // Expose grid open/close so a peer (tabs) can drive it from the tab bar.
-        // Toggling the same `.collapsed` class the engine's own kb-toggle flips
-        // keeps a single source of truth for the grid's visibility.
         api: {
           toggle() {
             toolbar.classList.toggle("collapsed");
@@ -139,17 +113,13 @@ export function mobileToolbar(opts: MobileToolbarOptions = {}): TerminalFeature<
           },
         },
         onDetach() {
-          // A tab switch disarms a latched sticky-Ctrl so a pending Ctrl does
-          // not fire against the incoming session (e.g. an accidental Ctrl+C to
-          // the wrong agent, design 5.1 / ui-ux review D).
+          // A pending Ctrl must not fire against the incoming session.
           if (ctrl.isCtrlArmed()) {
             ctrl.setCtrlArmed(false);
           }
         },
         teardown() {
-          offTransform();
           armedListeners.clear();
-          ctrl.dispose();
           toolbar.remove();
         },
       };

package/src/features/predictive-echo.ts

@@ -1,88 +1,54 @@
-/**
- * predictiveEcho feature: Mosh-style local echo. Wires the
- * predict.ts mini-VT to the kernel input funnel: it advances a predicted cursor
- * on accepted input (an input observer) and owns the col-0 backspace brake (an
- * input transform that drops a lone DEL at the true origin, since the predicted
- * cursor is the authoritative position for that decision). It re-pushes the
- * predicted-cursor overlay on prediction changes and after each render flush.
- *
- * @module
- */
-
-import * as predict from "../predict.js";
+import { createPredictor } from "../predict.js";
 import type { TerminalFeature } from "../kernel/types.js";
 
-/** Build the predictiveEcho feature. Exposes no API — its output is the engine
- *  renderer's predicted-cursor overlay.
- *
- *  The prediction state is MODULE-scoped (`../predict.js`), not per instance, so two
- *  terminals in one page that both include this feature would drive one predicted
- *  cursor between them. That is within the kernel's existing "call createTerminal
- *  exactly once" contract, but it is the reason this feature cannot be made
- *  per-instance by composing it twice.
- *
- *  Predictions are advisory: `predict` suspends itself on any byte it cannot
- *  model, because a wrong prediction is worse than a missing one. The feature
- *  resets it on a server restart and on a tab switch (`onDetach`), so the outgoing
- *  session's ghost cursor never paints over the incoming session's screen; the
- *  next server frame re-arms it. Teardown drops every listener, hides the overlay,
- *  and clears the prediction. */
+/** Build the predictiveEcho feature: Mosh-style local echo through one predictor
+ *  per pane, drawn as the renderer's predicted-cursor overlay. The predictor
+ *  suspends itself on any byte it cannot model, because a wrong prediction is
+ *  worse than a missing one; a server restart and a tab switch reset it so the
+ *  outgoing session's ghost cursor never paints over the incoming screen. */
 export function predictiveEcho(): TerminalFeature {
   return {
     name: "predictiveEcho",
     setup(ctx) {
+      const predict = createPredictor();
+      ctx.defer(() => {
+        predict.dispose();
+      });
       function push(): void {
         const p = predict.get();
         ctx.render.setPredictedCursor(p.row, p.col, p.active);
       }
       predict.subscribe(push);
 
-      // Col-0 backspace brake: suppress a lone DEL at the true origin (row 0,
-      // col 0) so held-Backspace on an empty line does not flood the server.
-      // Owned here because the predicted cursor is the position it keys off.
-      const offTransform = ctx.registerInputTransform((bytes) => {
+      ctx.registerInputTransform((bytes) => {
         const p = predict.get();
         if (bytes.length === 1 && bytes[0] === 0x7f && p.active && p.row === 0 && p.col === 0) {
           return new Uint8Array(0);
         }
         return bytes;
       });
-      const offObserver = ctx.registerInputObserver((bytes) => {
+      ctx.registerInputObserver((bytes) => {
         predict.applyInput(bytes);
       });
-
-      const offCursor = ctx.on("render:cursor", () => {
+      ctx.on("render:cursor", () => {
         push();
       });
-      const offScreen = ctx.on("wire:screen", (msg) => {
+      ctx.on("wire:screen", (msg) => {
         const sz = ctx.session.size();
         predict.setDimensions(sz.cols, sz.rows);
         predict.onScreenFrame(msg.cursor[0], msg.cursor[1], msg.cursorHidden);
       });
-      const offState = ctx.on("connection:state", (s) => {
+      ctx.on("connection:state", (s) => {
         if (s === "restarted") {
           predict.reset();
         }
       });
 
       return {
-        // A tab switch (kernel notifySwitch -> onDetach) must drop the predicted
-        // cursor, so the outgoing session's ghost cursor does not paint on the
-        // incoming session's freshly-bound screen until its first server frame
-        // re-arms prediction. Mirrors composition.cancelComposition on the same
-        // detach: both local-echo paths reset on switch. predict.reset() hides the
-        // overlay (its onChange -> push -> setPredictedCursor(0,0,false)); the next
-        // wire:screen re-arms via onScreenFrame.
         onDetach() {
           predict.reset();
         },
         teardown() {
-          offTransform();
-          offObserver();
-          offCursor();
-          offScreen();
-          offState();
-          // Hide the overlay and drop stale prediction state.
           predict.reset();
           ctx.render.setPredictedCursor(0, 0, false);
         },

package/src/features/scroll-to-bottom.ts

@@ -1,13 +1,4 @@
-/**
- * scrollToBottom feature: a scroll-to-bottom control in the thumb-zone region,
- * shown only while the user has scrolled up. The
- * scroll-state signal comes from the kernel's scroll:state event (the kernel
- * owns scroll.init); this feature just renders the affordance and drives
- * scroll.scrollToBottom.
- *
- * @module
- */
-
+import { windowOf } from "../kernel/realm.js";
 import type { TerminalFeature } from "../kernel/types.js";
 import { fromHTML, holdFocusOnPress } from "./dom.js";
 
@@ -16,22 +7,19 @@ const BUTTON_HTML = `
   <svg viewBox="0 0 24 24" aria-hidden="true"><path fill="none" d="M7 13l5 5 5-5M7 6l5 5 5-5"/></svg>
 </button>`;
 
-/** Build the scrollToBottom feature. Exposes no API — the button is the whole
- *  surface, and a peer that wants the same effect calls `ctx.scroll.scrollToBottom`
- *  directly.
- *
- *  Its job is resuming FOLLOW, not just moving the viewport, which is why it also
- *  acts when the reader is already at the bottom but holding (an ED3 clamp leaves
- *  exactly that state). The jump is smooth unless the user asked for reduced
- *  motion, and it is idempotent, so binding both `pointerdown` (touch presses feel
- *  immediate) and `click` (keyboard activation) is safe. Teardown unsubscribes and
- *  removes the button. */
+/** Build the scrollToBottom feature. Exposes no API: the button is the whole
+ *  surface, and a peer that wants the effect calls `ctx.scroll.scrollToBottom`.
+ *  Its job is resuming FOLLOW, not just moving the viewport, so it also acts
+ *  when the reader is at the bottom but holding (an ED3 clamp leaves that
+ *  state). The jump is idempotent, so `pointerdown` (touch feels immediate) and
+ *  `click` (keyboard) are both bound. Teardown unsubscribes and removes it. */
 export function scrollToBottom(): TerminalFeature {
   return {
     name: "scrollToBottom",
     setup(ctx) {
+      const win = windowOf(ctx.shell.root.ownerDocument);
       const slot = ctx.region("bottom-inset-end", "scroll");
-      const btn = fromHTML(BUTTON_HTML);
+      const btn = fromHTML(ctx.shell.root.ownerDocument, BUTTON_HTML);
       slot.appendChild(btn);
 
       // Jump to the bottom. With motion allowed, smooth-scroll the surface so
@@ -43,8 +31,8 @@ export function scrollToBottom(): TerminalFeature {
       // scrollToBottom (which re-engages following synchronously).
       const jump = (): void => {
         const reduce =
-          typeof window.matchMedia === "function" &&
-          window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+          typeof win.matchMedia === "function" &&
+          win.matchMedia("(prefers-reduced-motion: reduce)").matches;
         if (reduce) {
           ctx.scroll.scrollToBottom();
           return;
@@ -78,7 +66,7 @@ export function scrollToBottom(): TerminalFeature {
       // jump is idempotent, so the pair is safe. holdFocusOnPress keeps the
       // keyboard on the terminal across the press and paints the press class the
       // cancelled default costs this button.
-      holdFocusOnPress(btn);
+      ctx.defer(holdFocusOnPress(btn));
       btn.addEventListener("pointerdown", jump);
       btn.addEventListener("click", jump);