@cplieger/web-terminal-ui 2.1.2 → 2.1.4

package/css/02-app.css

@@ -57,15 +57,19 @@
 }
 
 .term-input {
-  /* Keep the input INSIDE the viewport (not at left:-9999px) — iOS
-   * Safari is increasingly strict about not opening the virtual
-   * keyboard for off-screen inputs, especially during heavy DOM
-   * mutations like a streaming agent turn. A 1×1 fully-transparent
-   * pinned-bottom input is "visible enough" for iOS without being
-   * tappable or perceptible to the user. opacity:0 + size:1px hides
-   * it visually; pointer-events:none makes sure stray taps don't
-   * land on it (programmatic focus() still works). */
-  position: fixed;
+  /* The hidden keyboard target. position:absolute (NOT fixed) so it lives in
+     the terminal's scroll/content coordinate space alongside .composition-view
+     and .pred-cursor: composition.positionCompositionView() moves it to the
+     cursor row, and because .term is pinned to the visual viewport (viewport.ts)
+     the textarea always sits at the VISIBLE cursor, above the keyboard, which is
+     where iOS wants the focused input so it does not scroll the page. As
+     position:fixed it was placed at the cursor's content offset in viewport
+     space, so once output had scrolled it landed off-screen / behind the
+     keyboard, and focusing it made iOS scroll the page up to reveal it (the
+     content jump). Kept on-screen and 1x1 / opacity:0 so iOS still opens the
+     keyboard for it; pointer-events:none so taps fall through to the scroll
+     surface (programmatic focus() still works). */
+  position: absolute;
   inset-block-end: 0;
   inset-inline-start: 0;
   width: 1px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cplieger/web-terminal-ui",
-  "version": "2.1.2",
+  "version": "2.1.4",
   "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",
@@ -21,7 +21,7 @@
     "verify": "bash scripts/verify.sh"
   },
   "peerDependencies": {
-    "@cplieger/web-terminal-engine": ">=1.2.0"
+    "@cplieger/web-terminal-engine": ">=1.4.0"
   },
   "devDependencies": {
     "@eslint/js": "10.0.1",
@@ -32,11 +32,11 @@
     "happy-dom": "20.10.6",
     "html-validate": "11.5.3",
     "knip": "6.23.0",
-    "prettier": "3.9.1",
+    "prettier": "3.9.3",
     "stylelint": "17.14.0",
     "stylelint-config-standard": "40.0.0",
     "typescript": "6.0.3",
-    "typescript-eslint": "8.62.0",
+    "typescript-eslint": "8.62.1",
     "vitest": "4.1.9"
   },
   "publishConfig": {

package/scaffold/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover,interactive-widget=resizes-content">
+<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover,interactive-widget=resizes-content">
 <meta name="color-scheme" content="dark">
 <title>Web Terminal</title>
 <!-- App icons and web-app manifest are deployment-specific; add your own. -->

package/src/composition.ts

@@ -32,7 +32,6 @@ 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;
 
@@ -44,13 +43,11 @@ 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;
 
@@ -140,25 +137,17 @@ 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`;
-  // 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`;
+  // The textarea is position:absolute in the same scroll/content space as the
+  // composition view (see the .term-input CSS note), so the cursor's content
+  // coordinates place it at the cursor row directly. Because .term is pinned to
+  // the visual viewport (viewport.ts), that keeps the textarea at the VISIBLE
+  // cursor, above the keyboard — where iOS wants the focused input so it doesn't
+  // scroll the page to reveal it.
+  textarea.style.left = `${left}px`;
+  textarea.style.top = `${top}px`;
   textarea.style.height = `${cellH}px`;
 }

package/src/mount.ts

@@ -437,7 +437,6 @@ export function mount(root: HTMLElement, opts: MountOptions = {}): TerminalUI {
   composition.init({
     textarea: input,
     compositionView: compositionViewEl,
-    scrollEl: termWrap,
     getCursorPx: render.getCursorPx,
     send,
   });
@@ -470,6 +469,11 @@ export function mount(root: HTMLElement, opts: MountOptions = {}): TerminalUI {
         document.title = msg.title;
       } else if (msg.type === "modes") {
         render.updateReverseVideo();
+      } else if (msg.type === "clipboard") {
+        // An app copied via OSC 52; mirror it to the system clipboard. This is
+        // an async push (not a user gesture), so Safari/Firefox may reject
+        // writeText — copyToClipboard surfaces that as a "Copy failed" toast.
+        copyToClipboard(msg.text);
       }
     },
     onOpen() {

package/src/viewport.ts

@@ -61,15 +61,28 @@ export function init(opts: {
   if (window.visualViewport) {
     const vv = window.visualViewport;
     const onChange = (): void => {
-      const inset = Math.max(0, Math.round(window.innerHeight - vv.height));
-      termWrap.style.bottom = inset > 0 ? `${inset}px` : "";
-      // Expose viewport geometry as CSS vars so fixed chrome stays in view:
-      // --kb-inset lifts the bottom banner above the keyboard; --vv-top lets
-      // the top toolbar counter iOS shifting content up to reveal the
-      // bottom-pinned input (otherwise the toolbar scrolls off the top).
+      // Pin the terminal's fixed box to the exact region the VISUAL viewport
+      // occupies inside the layout viewport. On iOS the soft keyboard shrinks
+      // (and can offset) the visual viewport WITHOUT resizing the layout
+      // viewport — interactive-widget=resizes-content is not honored on iOS
+      // Safari — so a `position: fixed; inset: 0` terminal keeps the full-screen
+      // height (keyboard overlaying the bottom) while iOS scrolls the focused
+      // input into view and shifts the fixed box up, sliding the output and
+      // prompt behind the keyboard (the "content jumps up, hidden until I
+      // scroll" symptom). Driving top AND bottom from visualViewport keeps the
+      // terminal exactly over the visible area in every browser, so nothing is
+      // left behind the keyboard for iOS to scroll to.
+      const offsetTop = Math.max(0, Math.round(vv.offsetTop));
+      const bottomInset = Math.max(0, Math.round(window.innerHeight - vv.offsetTop - vv.height));
+      termWrap.style.top = offsetTop > 0 ? `${offsetTop}px` : "";
+      termWrap.style.bottom = bottomInset > 0 ? `${bottomInset}px` : "";
+      // Expose the same geometry as CSS vars for the sibling fixed chrome:
+      // --kb-inset lifts the bottom banner above the keyboard; --vv-top lets the
+      // top key toolbar follow the visual viewport's offset (otherwise it
+      // scrolls off the top when iOS shifts the layout up).
       const root = document.documentElement.style;
-      root.setProperty("--kb-inset", `${inset}px`);
-      root.setProperty("--vv-top", `${Math.max(0, Math.round(vv.offsetTop))}px`);
+      root.setProperty("--kb-inset", `${bottomInset}px`);
+      root.setProperty("--vv-top", `${offsetTop}px`);
       startTransition();
     };
     vv.addEventListener("resize", onChange);