@cplieger/web-terminal-ui 2.1.0 → 2.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cplieger/web-terminal-ui",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "type": "module",
   "description": "Reference touch-first browser UI for @cplieger/web-terminal-engine: textarea input model, mobile key toolbar, context menu, IME, predictive echo, viewport/keyboard-inset handling, and CSS. One mount() call.",
   "license": "GPL-3.0-or-later",
@@ -31,8 +31,8 @@
     "fast-check": "4.8.0",
     "happy-dom": "20.10.6",
     "html-validate": "11.5.3",
-    "knip": "6.22.0",
-    "prettier": "3.9.0",
+    "knip": "6.23.0",
+    "prettier": "3.9.1",
     "stylelint": "17.14.0",
     "stylelint-config-standard": "40.0.0",
     "typescript": "6.0.3",

package/src/composition.ts

@@ -32,6 +32,7 @@ const { bracketTextForPaste, prepareTextForTerminal } = keyboard;
 
 let textarea: HTMLTextAreaElement;
 let compositionView: HTMLElement;
+let scrollEl: HTMLElement;
 let getCursorPx: () => { left: number; top: number; cellH: number };
 let send: (bytes: string) => void;
 
@@ -43,11 +44,13 @@ let compositionSuffix = "";
 export function init(opts: {
   textarea: HTMLTextAreaElement;
   compositionView: HTMLElement;
+  scrollEl: HTMLElement;
   getCursorPx: () => { left: number; top: number; cellH: number };
   send: (bytes: string) => void;
 }): void {
   textarea = opts.textarea;
   compositionView = opts.compositionView;
+  scrollEl = opts.scrollEl;
   getCursorPx = opts.getCursorPx;
   send = opts.send;
 
@@ -137,13 +140,25 @@ function onPaste(ev: ClipboardEvent): void {
  *  the focused textarea is on screen at a sane location. */
 export function positionCompositionView(): void {
   const { left, top, cellH } = getCursorPx();
+  // getCursorPx() returns the cursor position in the scroll container's CONTENT
+  // coordinate space (measured from the top of all rows, scrollback included).
+  // The composition view is position:absolute inside that scroll container, so
+  // it scrolls with the content — content coordinates place it at the visible
+  // cursor directly.
   compositionView.style.left = `${left}px`;
   compositionView.style.top = `${top}px`;
   compositionView.style.height = `${cellH}px`;
   compositionView.style.lineHeight = `${cellH}px`;
-  // Textarea piggy-backs on the cursor position so iOS scroll-into-
-  // view targets the cursor area instead of jumping to top-left.
-  textarea.style.left = `${left}px`;
-  textarea.style.top = `${top}px`;
+  // The textarea is position:fixed (viewport space) so iOS reliably opens the
+  // soft keyboard for it. A fixed element does NOT scroll with the content, so
+  // the content-space cursor offset must be converted to viewport space by
+  // subtracting the scroll offset. Without this, once a screenful of output has
+  // scrolled the cursor's content offset well below the viewport, the fixed
+  // textarea lands far off-screen; focusing it makes iOS scroll the page up to
+  // pull the focused input into view, pushing the terminal output and prompt
+  // behind the keyboard until the user scrolls back. Anchoring the textarea at
+  // the VISIBLE cursor keeps it on-screen so iOS has no reason to scroll.
+  textarea.style.left = `${left - scrollEl.scrollLeft}px`;
+  textarea.style.top = `${top - scrollEl.scrollTop}px`;
   textarea.style.height = `${cellH}px`;
 }

package/src/mount.ts

@@ -437,6 +437,7 @@ export function mount(root: HTMLElement, opts: MountOptions = {}): TerminalUI {
   composition.init({
     textarea: input,
     compositionView: compositionViewEl,
+    scrollEl: termWrap,
     getCursorPx: render.getCursorPx,
     send,
   });
@@ -645,6 +646,25 @@ export function mount(root: HTMLElement, opts: MountOptions = {}): TerminalUI {
     },
     { passive: true },
   );
+  // After a touch tap, iOS/WebKit dispatches a synthetic `mousedown` (following
+  // the `pointerup` above). Its default action moves focus to the nearest
+  // focusable ancestor of the tap point — but the input-model contract keeps
+  // `.term-output` and `.term` deliberately non-focusable (display-only) and the
+  // hidden textarea is `pointer-events: none`, so the tap never lands on a
+  // focusable node. With nothing focusable under the tap, that default blurs the
+  // textarea we just focused in `pointerup`, so iOS immediately dismisses the
+  // soft keyboard the tap had only just opened — the "keyboard flashes open then
+  // instantly closes" symptom on touch. Cancelling the synthetic mousedown's
+  // default keeps focus on the textarea, so the keyboard stays up. This is the
+  // xterm.js focus-preservation pattern, scoped to touch: a real mouse mousedown
+  // must keep its default so desktop drag-to-select text still works, and iOS
+  // text selection is long-press-driven (not this tap mousedown), so it is
+  // unaffected. Not passive — preventDefault must take effect.
+  termWrap.addEventListener("mousedown", (e) => {
+    if (lastPointerType === "touch") {
+      e.preventDefault();
+    }
+  });
   termWrap.addEventListener("click", (e) => {
     // Terminal links: URLs rendered by the engine are wrapped in
     // <a class="term-link" target="_blank" rel="noopener noreferrer">. The