@cplieger/web-terminal-ui 8.2.1 → 8.3.1

package/src/kernel/shell.ts

@@ -6,11 +6,11 @@ import {
 import {
   applyTheme,
   buildPane,
-  hasFinePointer,
   type PaneKernel,
   type PaneServices,
   type StoreRegistry,
 } from "./pane.js";
+import { createKeyboardPresence } from "./keyboard-presence.js";
 import { createStatusShare } from "./status-share.js";
 import { browserNotifierEnv, createNotifier } from "./notify.js";
 import { attachLoadingStatus, DEFAULT_LOADING_MESSAGES } from "./loading-status.js";
@@ -269,17 +269,54 @@ function createShellInto(
     });
   }
   const paneOpts: CreateTerminalOptions = splitEnabled ? { ...opts, layout: "container" } : opts;
+  // Called only from a keydown, so keyboardInsets below exists by then.
+  const keyboardPresence = createKeyboardPresence({
+    win,
+    softKeyboardHeight: () => keyboardInsets.softKeyboardHeight(),
+  });
+  const paneInputFocused = (): boolean => {
+    const active = doc.activeElement;
+    return (
+      active instanceof win.HTMLTextAreaElement &&
+      active.classList.contains("term-input") &&
+      shellRoot.contains(active)
+    );
+  };
   // The visual viewport is the document's, so its geometry is read once and
   // published on the outermost root, which the shell's chrome and every pane
   // inherit; published on a pane root it would never reach the chrome beside
   // the panes.
   const keyboardInsets = createKeyboardInsets({
     root: shellRoot,
-    suppressKeyboardInset: () => hasFinePointer(win),
+    suppressKeyboardInset: () => keyboardPresence.insetSuppressed(),
+    onSoftKeyboard(heightPx) {
+      keyboardPresence.noteSoftKeyboard(heightPx, paneInputFocused());
+    },
   });
   held.push(() => {
     keyboardInsets.teardown();
   });
+  const docListeners = new AbortController();
+  held.push(() => {
+    docListeners.abort();
+  });
+  doc.addEventListener(
+    "keydown",
+    (ev) => {
+      keyboardPresence.noteKeydown(ev);
+    },
+    { capture: true, signal: docListeners.signal },
+  );
+  // A press in the host page leaves the keys with the host, so the panes' body
+  // keydown path arms only after a press inside the terminal.
+  let pressedInsideShell = false;
+  doc.addEventListener(
+    "pointerdown",
+    (ev) => {
+      pressedInsideShell = ev.target instanceof win.Node && shellRoot.contains(ev.target);
+    },
+    { capture: true, passive: true, signal: docListeners.signal },
+  );
 
   const loadingStatus = attachLoadingStatus(opts.loading, {
     ...DEFAULT_LOADING_MESSAGES,
@@ -785,6 +822,10 @@ function createShellInto(
     : disabledSplit();
   const shellContext: ShellContext = {
     root: shellRoot,
+    keyboard: {
+      hardwareSeen: () => keyboardPresence.hardwareSeen(),
+      likely: () => keyboardPresence.likely(),
+    },
     pane: (side) => paneAt(side) ?? null,
     panes: builtPanes,
     selected: () => selectedSide,
@@ -841,6 +882,8 @@ function createShellInto(
       scrollbackLines,
       narrowProbe: () => isNarrow(shellRoot.clientWidth, slot.root.clientHeight),
       keyboardInsets,
+      keyboard: shellContext.keyboard,
+      pressedInsideShell: () => pressedInsideShell,
       titleBase(text) {
         slot.baseTitle = text;
         paintTitle();

package/src/kernel/types.ts

@@ -280,11 +280,20 @@ export interface Notifier {
   forget(id: string): void;
 }
 
+/** Whether the page has a hardware keyboard, as far as its key events tell. */
+export interface KeyboardPresence {
+  /** A key no on-screen keyboard produces is the latest keyboard evidence seen. */
+  hardwareSeen(): boolean;
+  /** `hardwareSeen()`, or the primary pointer is fine. */
+  likely(): boolean;
+}
+
 /** The shell a feature reaches through `ctx.shell`: the pane kernels and the
  *  facts shared between them. */
 export interface ShellContext {
   /** The shell root; the pane root in the direct-root topology. */
   readonly root: HTMLElement;
+  readonly keyboard: KeyboardPresence;
   /** Null while that side has no built kernel. */
   pane(side: PaneSide): PaneHandle | null;
   /** Built panes, left first. */

package/src/viewport.ts

@@ -27,12 +27,17 @@ export interface KeyboardInsetsOptions {
   /** Ignore the visualViewport keyboard geometry (a hardware-keyboard device
    *  has no soft keyboard to accommodate). */
   suppressKeyboardInset?: () => boolean;
+  /** Called with `softKeyboardHeight()` at every reading, before
+   *  `suppressKeyboardInset` is consulted for it. */
+  onSoftKeyboard?: (heightPx: number) => void;
 }
 
 /** The document's one reading of its visual viewport. */
 export interface KeyboardInsets {
   /** The latest geometry; zero where the window has no visual viewport. */
   current(): KeyboardGeometry;
+  /** The visual-viewport keyboard inset now in CSS px, never suppressed. */
+  softKeyboardHeight(): number;
   /** Call `fn` with the geometry on every visual-viewport resize and scroll, on
    *  every window focus and bfcache restore, and on every `refresh()`; returns
    *  the release. */
@@ -110,16 +115,21 @@ export function createKeyboardInsets(opts: KeyboardInsetsOptions): KeyboardInset
     root.style.removeProperty("--vv-top");
   }
 
+  function readVisual(): KeyboardGeometry {
+    return vv
+      ? {
+          top: Math.max(0, Math.round(vv.offsetTop)),
+          bottom: Math.max(0, Math.round(win.innerHeight - vv.offsetTop - vv.height)),
+        }
+      : { top: 0, bottom: 0 };
+  }
+
   function update(): void {
+    const raw = readVisual();
+    opts.onSoftKeyboard?.(raw.bottom);
     // iPadOS has been seen to report a keyboard-sized shrink with no keyboard
     // shown and pin it, which is what suppressKeyboardInset defends against.
-    geometry =
-      !vv || suppressKeyboardInset()
-        ? { top: 0, bottom: 0 }
-        : {
-            top: Math.max(0, Math.round(vv.offsetTop)),
-            bottom: Math.max(0, Math.round(win.innerHeight - vv.offsetTop - vv.height)),
-          };
+    geometry = suppressKeyboardInset() ? { top: 0, bottom: 0 } : raw;
     root.style.setProperty("--kb-inset", `${geometry.bottom}px`);
     root.style.setProperty("--vv-top", `${geometry.top}px`);
     for (const fn of [...subscribers]) {
@@ -144,6 +154,7 @@ export function createKeyboardInsets(opts: KeyboardInsetsOptions): KeyboardInset
 
   return {
     current: () => geometry,
+    softKeyboardHeight: () => readVisual().bottom,
     onChange(fn) {
       subscribers.add(fn);
       return () => {