@cplieger/web-terminal-ui 4.7.0 → 4.7.1

package/css/30-tabs.css

@@ -137,17 +137,37 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  /* Center the INK, not the line box: UI fonts carry more ascent than descent
-     (Noto Sans at 13px: 14px over / 4px under the baseline), so the flex-
-     centered line box leaves the visible text ~1.5px low — reading as
-     baseline-aligned with the activity dot's bottom instead of its center.
-     Trimming the box to the cap-height/alphabetic band makes flexbox center
-     the glyphs themselves, on every platform font. Descender ink still paints
-     (verified: ink overflow survives the overflow: hidden ellipsis clip).
-     Non-supporting browsers simply keep the untrimmed box. Shared by all
-     three chip labels (this one + the two switcher labels in
+  /* Center the INK, not the line box: UI fonts carry far more ascent than
+     descent (the -apple-system/Noto Sans stack at 13px: 14px over / 4px under
+     the baseline), so the flex-centered line box leaves the visible text ~1.5px
+     low — reading as baseline-aligned with the activity dot's bottom instead of
+     its center. Trimming the box makes flexbox center the glyph band instead of
+     the font's metrics box.
+
+     `ex`, not `cap`, is the over edge, because a tab title is sentence case and
+     lowercase-dominant ("workspace", "refactor the auth module"). Centering the
+     x-height/baseline band centers the total ink of such a string, since a
+     Latin font's ascender overshoot above x-height is about its descender depth
+     below the baseline (measured on this stack at 13px: 3.0px over vs 3.0px
+     under, ink center 0.02px off the chip's center). `cap alphabetic` — the
+     right choice for an ALL-CAPS label — leaves lowercase text 1.14px low,
+     which is the original complaint barely moved.
+
+     padding-block is LOAD-BEARING, not spacing: trimming puts the box's under
+     edge ON the baseline, and `overflow: hidden` clips at the padding edge, so
+     with no padding every descender and every tall diacritic is cut off (
+     measured: 3.3px of p/y/g/j tail and 2.3px of an acute accent, i.e. "pygmy
+     jaguar Ápple" rendered as "pyqmy iaquar Apple"). 0.5em restores the ink
+     overhang the trim removes from the box; being symmetric it does not move
+     the centered band, and being em-relative it tracks the font size. The
+     grown box (~20px) still sits inside the close button's 1.5rem, so the tab
+     height is unchanged. A browser without text-box support keeps the untrimmed
+     box, where the padding is harmless slack.
+
+     Shared by all three chip labels (this one + the two switcher labels in
      31-switcher.css). */
-  text-box: trim-both cap alphabetic;
+  text-box: trim-both ex alphabetic;
+  padding-block: 0.5em;
 }
 
 /* A little breathing room after the activity dot, before the label. */

package/css/31-switcher.css

@@ -178,8 +178,11 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   text-align: left;
-  /* Ink-centering trim, same as .wt-tab-label (see 30-tabs.css). */
-  text-box: trim-both cap alphabetic;
+  /* Ink-centering trim + its mandatory descender allowance, same as
+     .wt-tab-label (see 30-tabs.css for why `ex` and why the padding is not
+     optional). */
+  text-box: trim-both ex alphabetic;
+  padding-block: 0.5em;
 }
 
 /* Keyboard button: hidden until a keyboardToggle is wired; filled while the key
@@ -429,8 +432,11 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  /* Ink-centering trim, same as .wt-tab-label (see 30-tabs.css). */
-  text-box: trim-both cap alphabetic;
+  /* Ink-centering trim + its mandatory descender allowance, same as
+     .wt-tab-label (see 30-tabs.css for why `ex` and why the padding is not
+     optional). */
+  text-box: trim-both ex alphabetic;
+  padding-block: 0.5em;
 }
 
 /* The close sits flush at the row's right edge (no gap), vertically centered. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cplieger/web-terminal-ui",
-  "version": "4.7.0",
+  "version": "4.7.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",

package/src/features/context-menu.ts

@@ -38,19 +38,16 @@
 
 import type { TerminalFeature } from "../kernel/types.js";
 import type { ClipboardApi } from "./clipboard.js";
-import { placeMenuAt } from "./menu-position.js";
+import { createClickSwallow, placeMenuAt } from "./menu-position.js";
 
 // Slightly longer than the browser's ~500ms native long-press so a native word
 // selection (which we defer to) has registered — and fired selectionchange —
 // before this fires.
 const LONG_PRESS_MS = 550;
 const LONG_PRESS_MOVE_PX = 10;
-// Viewport clamping + the flip-above-the-fingertip gap live in the shared
-// point-anchored positioner (menu-position.ts), shared with the tab menu.
-// After a touch long-press opens the menu, swallow the trailing click/tap that
-// the same gesture emits on finger-release for this window, so the menu does not
-// immediately dismiss itself (the classic contextmenu-then-touchend race).
-const SWALLOW_MS = 350;
+// Viewport clamping, the flip-above-the-fingertip gap, and the trailing-click
+// swallow all live in the shared point-anchored menu module (menu-position.ts),
+// shared with the tab menu.
 
 export interface ContextMenuOptions {
   /** The clipboard feature value, so the menu can offer Copy/Paste through its
@@ -98,8 +95,8 @@ export function contextMenu(opts: ContextMenuOptions = {}): TerminalFeature {
       // Computed once: on an Apple touch device, defer a touch contextmenu to
       // native text selection (see isAppleTouchDevice).
       const appleTouch = isAppleTouchDevice();
-      // Timestamp until which a document click is swallowed (see SWALLOW_MS).
-      let swallowUntil = 0;
+      // Swallows the trailing click a touch long-press emits on release.
+      const swallow = createClickSwallow();
       // A native selection was made during the current touch press (tracked via
       // selectionchange). Gates the touch menu: a selected long-press belongs to
       // the native callout, an empty one to us (Paste).
@@ -212,9 +209,9 @@ export function contextMenu(opts: ContextMenuOptions = {}): TerminalFeature {
         menu.classList.add("visible");
         placeMenuAt(menu, x, y);
         // A touch long-press is immediately followed by a synthetic click on
-        // release; swallow it so the menu stays open (see SWALLOW_MS).
+        // release; swallow it so the menu stays open.
         if (touch) {
-          swallowUntil = performance.now() + SWALLOW_MS;
+          swallow.arm();
         }
       }
 
@@ -295,7 +292,7 @@ export function contextMenu(opts: ContextMenuOptions = {}): TerminalFeature {
 
       const onDocClick = (): void => {
         // Swallow the release click of the long-press that just opened the menu.
-        if (performance.now() < swallowUntil) {
+        if (swallow.swallowing()) {
           return;
         }
         hide();

package/src/features/menu-position.ts

@@ -13,6 +13,35 @@ const EDGE_MARGIN = 8;
  *  hidden under the fingertip that long-pressed near the bottom edge. */
 const FLIP_GAP = 16;
 
+/** After a touch long-press opens a menu, the SAME gesture emits a click on
+ *  finger-release, and an outside-click dismiss reads that click as "the user
+ *  clicked away" — the classic contextmenu-then-touchend race. Swallow document
+ *  clicks for this window after a touch-opened menu. 350ms comfortably covers
+ *  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()` right after a TOUCH-opened
+ *  menu becomes visible, and `swallowing()` as the first guard in the
+ *  outside-click dismiss.
+ *
+ *  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. The tab menu shipped without the guard entirely, so on iPadOS Safari
+ *  — which fires `contextmenu` on a long-press, and where the desktop tab strip
+ *  is the chrome that shows — a long-pressed tab menu dismissed itself on
+ *  release. 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 } {
+  let until = 0;
+  return {
+    arm: (): void => {
+      until = performance.now() + SWALLOW_MS;
+    },
+    swallowing: (): boolean => performance.now() < until,
+  };
+}
+
 /** Place an already-visible `menu` at viewport point (x, y): open just below
  *  the point, flip above it when that would overflow the visible bottom, and
  *  clamp into the visual viewport on both axes. The menu is absolute-positioned

package/src/features/tabs/index.ts

@@ -13,7 +13,7 @@ import type { SessionRef, TerminalContext, TerminalFeature } from "../../kernel/
 import type { ActivityMonitorApi } from "../activity-monitor.js";
 import type { MobileToolbarApi } from "../mobile-toolbar.js";
 import { fromHTML } from "../dom.js";
-import { placeMenuAt } from "../menu-position.js";
+import { createClickSwallow, placeMenuAt } from "../menu-position.js";
 import type { SessionInfo, Tab } from "./model.js";
 import {
   ACTIVE_TAB_KEY,
@@ -2029,6 +2029,27 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
       // the items for the target tab (disabled states reflect its position) and
       // clamps into the visible viewport, flipping above the pointer near the
       // bottom edge (mirrors context-menu.ts).
+      //
+      // menuSwallow covers the contextmenu-then-touchend race: iPadOS Safari
+      // raises a context menu from a LONG-PRESS, and the same gesture emits a
+      // click on release which onDocClickMenu would read as a click-away. The
+      // terminal menu has guarded this since it shipped; this one did not, so a
+      // long-pressed tab menu closed itself on release — on the one platform
+      // where the desktop strip is the chrome you touch. menuTouch records
+      // whether the press that raised the menu was a finger, since only touch
+      // emits that trailing click.
+      const menuSwallow = createClickSwallow();
+      let menuTouch = false;
+      // One listener on the bar rather than one per chip: chips are created and
+      // destroyed as sessions come and go, and the pointer type belongs to the
+      // gesture, not to a chip.
+      bar.addEventListener(
+        "pointerdown",
+        (e) => {
+          menuTouch = e.pointerType === "touch";
+        },
+        { passive: true },
+      );
       function hideTabMenu(): void {
         tabMenu.classList.remove("visible");
         tabMenu.replaceChildren();
@@ -2102,6 +2123,9 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
         // the visual viewport; flip above the pointer near the bottom edge).
         tabMenu.classList.add("visible");
         placeMenuAt(tabMenu, x, y);
+        if (menuTouch) {
+          menuSwallow.arm();
+        }
       }
 
       // One-time "swipe to switch" hint on first multi-tab state, mobile only.
@@ -2336,6 +2360,11 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
       // Dismiss the tab context menu on an outside click, on Escape, and on
       // scroll (it is anchored to a viewport point, so a scroll would detach it).
       const onDocClickMenu = (): void => {
+        // The trailing click of the long-press that just opened the menu is that
+        // gesture's own release, not a click-away.
+        if (menuSwallow.swallowing()) {
+          return;
+        }
         hideTabMenu();
       };
       document.addEventListener("click", onDocClickMenu);