@cplieger/web-terminal-ui 5.2.0 → 5.2.1

package/css/10-primitives.css

@@ -38,7 +38,11 @@
   user-select: none;
 }
 
-:where(.wt-root) .wt-btn:active {
+/* Press. The pointerdown-cancelling bar buttons (holdFocusOnPress in
+   features/dom.ts) never enter :active in Firefox, so they paint .wt-pressed on
+   themselves and every press rule in this package matches either. */
+:where(.wt-root) .wt-btn:active,
+:where(.wt-root) .wt-btn.wt-pressed {
   background: var(--text-active);
 }
 

package/css/21-scroll-to-bottom.css

@@ -38,7 +38,11 @@
   border-color: color-mix(in oklch, var(--text) 35%, transparent);
 }
 
-:where(.wt-root) .wt-scroll-bottom:active {
+/* Press fills the background. .wt-pressed rides along: this button cancels its
+   pointerdown default and so never enters :active in Firefox (holdFocusOnPress
+   in features/dom.ts). */
+:where(.wt-root) .wt-scroll-bottom:active,
+:where(.wt-root) .wt-scroll-bottom.wt-pressed {
   background: var(--text-active);
 }
 

package/css/30-tabs.css

@@ -347,8 +347,11 @@
 
 /* Press: brighten the hover fill with the active-tab fg (the
    .wt-switcher-current press recipe — a lighter press over an already-filled
-   control), keeping the accent glyph. */
-:where(.wt-root) .wt-tab-new:active {
+   control), keeping the accent glyph. .wt-pressed rides along because this
+   button cancels its pointerdown default and so never enters :active in Firefox
+   (holdFocusOnPress in features/dom.ts). */
+:where(.wt-root) .wt-tab-new:active,
+:where(.wt-root) .wt-tab-new.wt-pressed {
   background: color-mix(in oklch, var(--tab-active-bg), var(--tab-active-fg) 12%);
 }
 

package/css/31-switcher.css

@@ -339,7 +339,10 @@
   }
 }
 
-:where(.wt-root) .wt-switcher-new:active {
+/* Press. .wt-pressed rides along: this button cancels its pointerdown default
+   and so never enters :active in Firefox (holdFocusOnPress in features/dom.ts). */
+:where(.wt-root) .wt-switcher-new:active,
+:where(.wt-root) .wt-switcher-new.wt-pressed {
   background: var(--tab-hover-bg);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cplieger/web-terminal-ui",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "type": "module",
   "description": "Reference touch-first browser UI for @cplieger/web-terminal-engine: a composable kernel + feature modules (tabs, activity monitor, mobile toolbar, context menu, IME, predictive echo, viewport handling) and CSS. One createTerminal() call.",
   "license": "GPL-3.0-or-later",
@@ -57,7 +57,7 @@
     "fast-check": "4.9.0",
     "happy-dom": "20.11.1",
     "html-validate": "11.6.0",
-    "knip": "6.29.0",
+    "knip": "6.30.0",
     "prettier": "3.9.6",
     "stylelint": "17.14.1",
     "stylelint-config-standard": "40.0.0",

package/src/features/dom.ts

@@ -1,7 +1,8 @@
-// Small shared helper for features: build a chrome element from a static,
+// Small shared helpers for features: building a chrome element from a static,
 // trusted HTML string (icons, buttons) via a <template> clone, the same pattern
-// the kernel uses for its core subtree. No interpolation ever passes through
-// here, so it carries no injection surface.
+// the kernel uses for its core subtree, and the press wiring the bar buttons
+// 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 {
@@ -13,3 +14,62 @@ export function fromHTML(html: string): HTMLElement {
   }
   return el;
 }
+
+/** The press class the chrome buttons wired by holdFocusOnPress paint on
+ *  themselves. Every `:active` press rule for such a button pairs with it (see
+ *  the CSS contract test), because those buttons never enter `:active` in
+ *  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 {
+  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 });
+  });
+}

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

@@ -5,7 +5,7 @@
 // scroll.scrollToBottom.
 
 import type { TerminalFeature } from "../kernel/types.js";
-import { fromHTML } from "./dom.js";
+import { fromHTML, holdFocusOnPress } from "./dom.js";
 
 const BUTTON_HTML = `
 <button type="button" class="wt-btn wt-scroll-bottom" aria-label="Scroll to bottom">
@@ -39,14 +39,13 @@ export function scrollToBottom(): TerminalFeature {
         surface.scrollTo({ top: surface.scrollHeight, behavior: "smooth" });
       };
 
-      // pointerdown (like the toolbar keys) so touch devices show press
-      // feedback; preventDefault keeps focus on the terminal. click is kept for
-      // keyboard activation. jump is idempotent, so the pair is safe.
-      const onDown = (e: PointerEvent): void => {
-        e.preventDefault();
-        jump();
-      };
-      btn.addEventListener("pointerdown", onDown);
+      // pointerdown (like the toolbar keys) so touch devices get the jump on the
+      // press rather than the release; click is kept for keyboard activation.
+      // 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);
+      btn.addEventListener("pointerdown", jump);
       btn.addEventListener("click", jump);
 
       // Visible only while scrolled up; the region reflects it via a class.

package/src/features/tabs/index.ts

@@ -12,7 +12,7 @@ import { LineStore, modes } from "@cplieger/web-terminal-engine";
 import type { SessionRef, TerminalContext, TerminalFeature } from "../../kernel/types.js";
 import type { ActivityMonitorApi } from "../activity-monitor.js";
 import type { MobileToolbarApi } from "../mobile-toolbar.js";
-import { fromHTML } from "../dom.js";
+import { fromHTML, holdFocusOnPress } from "../dom.js";
 import { createClickSwallow, placeMenuAt } from "../menu-position.js";
 import type { CueStatus, SessionInfo, StatusRecord, Tab } from "./model.js";
 import {
@@ -336,16 +336,11 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
       // and reflects its open state on every keyboard button.
       function makeNewButton(cls: string): HTMLElement {
         const btn = fromHTML(newButtonHTML(cls));
-        // Keep the hidden terminal textarea focused: a bar button needs no focus
-        // of its own, and letting the tap shift focus makes iOS/iPadOS consume
-        // the FIRST tap to blur the input (so "+" only fired create on the second
-        // tap — the reported double-tap). preventDefault on pointerdown fires the
-        // action on the first tap; switchTo then re-focuses the input for the new
-        // tab (see focusAfterSwitch). It does NOT make one press one activation —
-        // that is create()'s in-flight coalescing, for the opposite failure.
-        btn.addEventListener("pointerdown", (e) => {
-          e.preventDefault();
-        });
+        // Keeps the keyboard on the terminal and paints its own press state;
+        // holdFocusOnPress explains why those two are one job. It does NOT make
+        // one press one activation — that is create()'s in-flight coalescing,
+        // for the opposite failure.
+        holdFocusOnPress(btn);
         btn.addEventListener("click", () => {
           void create();
         });
@@ -353,11 +348,7 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
       }
       function makeKbButton(cls: string): HTMLElement {
         const btn = fromHTML(kbButtonHTML(cls));
-        // First-tap focus retention (see makeNewButton): keep the terminal
-        // textarea focused so the toggle fires on the first tap on iOS/iPadOS.
-        btn.addEventListener("pointerdown", (e) => {
-          e.preventDefault();
-        });
+        holdFocusOnPress(btn);
         btn.addEventListener("click", () => {
           const kb = opts.keyboardToggle ? ctx.use(opts.keyboardToggle) : undefined;
           if (!kb) {
@@ -375,15 +366,11 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
       }
       // makeSwitchButton builds the mobile switcher's dedicated open/close
       // button (its notification dot is painted by paintSwitchDot). Like the
-      // other bar buttons it preventDefaults pointerdown for first-tap focus
-      // retention (keeps the terminal textarea focused so it fires on the first
-      // tap on iOS/iPadOS); its click toggles the list (toggleSwitcher opens when
-      // collapsed, closes when expanded).
+      // other bar buttons it goes through holdFocusOnPress; its click toggles the
+      // list (toggleSwitcher opens when collapsed, closes when expanded).
       function makeSwitchButton(): HTMLElement {
         const btn = fromHTML(switchButtonHTML("wt-switcher-switch wt-btn"));
-        btn.addEventListener("pointerdown", (e) => {
-          e.preventDefault();
-        });
+        holdFocusOnPress(btn);
         btn.addEventListener("click", () => {
           toggleSwitcher();
         });