@cplieger/web-terminal-ui 5.0.0 → 5.0.2

package/css/10-primitives.css

@@ -42,6 +42,33 @@
   background: var(--text-active);
 }
 
+/* ===== Hover gating: any-hover, never hover =====
+   Every gated hover rule in this package uses @media (any-hover: hover). Do not
+   write @media (hover: hover) here.
+
+   What the gate is for: a bare touchscreen fires no pointer-leave, so a tapped
+   control keeps its :hover wash until the next tap somewhere else. What went
+   wrong: `hover` and `pointer` describe only the PRIMARY input, and iPadOS
+   reports hover: none / pointer: coarse whether or not a Magic Keyboard trackpad
+   is attached. So (hover: hover) is false on every touch-primary device,
+   INCLUDING the ones driving a real pointer.
+
+   For the coarse-only controls that made the gate not a tradeoff but a deletion,
+   and it shipped that way: .wt-tab-kb renders only under @media (pointer: coarse)
+   (30-tabs.css) and the whole .wt-switcher subtree only under (pointer: coarse)
+   plus .wt-narrow (31-switcher.css). Pairing either with (hover: hover) makes the
+   two conditions complementary, so the hover rule was unreachable on every device
+   that exists. Measured against the deployed bundle at iPad width: the keyboard
+   button is a visible 44x44 while a forced :hover leaves its background at
+   rgba(0, 0, 0, 0), where the ungated .wt-tab-new beside it resolves to
+   --tab-active-bg.
+
+   `any-hover` asks the question the gate meant to ask — can ANY attached device
+   hover — so a bare iPhone/iPad still answers none (no wash, nothing to stick)
+   while a trackpad or Pencil answers hover and brings a real pointer-leave with
+   it. Same defect class as Tailwind's hoverOnlyWhenSupported
+   (tailwindlabs/tailwindcss#11109). */
+
 /* Keyboard-focus ring for every chrome control (all interactive chrome is a
    real <button>: tabs, +, keyboard, switcher rows, menu items, the FAB).
    :focus-visible only — a tap/click never shows the ring (the UA heuristic),
@@ -147,7 +174,7 @@
   font-weight: 600;
 }
 
-@media (hover: hover) {
+@media (any-hover: hover) {
   :where(.wt-root) .wt-fatal-reload:hover {
     background: color-mix(in oklch, var(--accent), var(--text) 12%);
   }

package/css/30-tabs.css

@@ -75,6 +75,22 @@
   width: 300px;
   flex: 0 1 auto;
   min-width: 100px;
+  /* ONE height for every control in the strip: the chip, the "+" and the
+     keyboard button all resolve to --touch-target, so a chip and a button can
+     never disagree about how tall the row is. Before this the chip's height was
+     whatever its tallest child happened to be, and the "+" hard-coded a COPY of
+     that arithmetic (close button + padding + border) — two sources of truth
+     for one row, which drifted the moment a child's box grew: a browser without
+     text-box support kept the label's untrimmed line box (31px, past the 24px
+     close button), so the chip rendered 49px tall next to a 42px "+" and a 44px
+     keyboard button. --touch-target is also the tap-target floor the rest of
+     the chrome already respects, including this chip's mobile counterpart
+     (.wt-switcher-current in 31-switcher.css, same declaration).
+
+     min-height, not height: the floor governs today (the tallest child is the
+     1.5rem close button, which fits with room to spare), and taller future
+     content grows the row rather than overflowing a fixed box. */
+  min-height: var(--touch-target);
   padding: var(--sp-2);
   /* A transparent border is reserved on every tab so toggling the inactive
      outline (below) never shifts the strip's layout. */
@@ -112,9 +128,8 @@
 
 /* Press (mousedown / touch-hold): one rung past the hover lift — same recipe,
    deeper mix — so hover -> press reads as a single dimension. After the hover
-   rule so it wins while both apply. Scoped like hover: clicking the active tab
-   selects nothing (it is already active), so it presses like the static surface
-   it is. */
+   rule so it wins while both apply. The active chip has its own pair (above),
+   mixed against the active fill instead of the inactive one. */
 :where(.wt-root) .wt-tab:not(.wt-tab-active):active {
   background: color-mix(in oklch, var(--tab-bg), var(--text) 25%);
   color: var(--tab-active-fg);
@@ -129,6 +144,35 @@
   color: var(--tab-active-fg);
 }
 
+/* The active tab answers a press too. Clicking it selects nothing, which is why
+   it was originally left inert — but selection is not the only thing a chip does:
+   it is a drag handle for reordering, a right-click target for the tab menu, a
+   double-tap target for rename, and it carries a close button. A control with
+   four affordances and no pointer feedback reads as decoration, and it was the
+   only chip in the strip that gave none (the same gap that got the keyboard
+   button its hover wash).
+
+   The lift is mixed with --tab-active-fg rather than --text: this is a lighter
+   press over an already-filled control (the .wt-switcher-current / .wt-tab-new
+   recipe), not a wash over a transparent one, so it follows the filled-surface
+   vocabulary and stays themeable through one token. It is a rung subtler than the
+   inactive chip's 15%/25% because it starts from an already-lifted fill.
+
+   Hover is gated (see the any-hover note in 10-primitives.css). Tapping an
+   INACTIVE chip makes it active, so a touchscreen's sticky :hover leaves with the
+   class; tapping the ACTIVE chip changes nothing, so an ungated hover would stay
+   lit until the next tap somewhere else. Touch feedback there is :active, which is
+   correct. */
+@media (any-hover: hover) {
+  :where(.wt-root) .wt-tab-active:hover {
+    background: color-mix(in oklch, var(--tab-active-bg), var(--tab-active-fg) 12%);
+  }
+}
+
+:where(.wt-root) .wt-tab-active:active {
+  background: color-mix(in oklch, var(--tab-active-bg), var(--tab-active-fg) 22%);
+}
+
 /* The label flexes to fill the fixed-width tab and truncates with an ellipsis
    (min-width: 0 lets a flex item shrink below its content width). */
 :where(.wt-root) .wt-tab-label {
@@ -137,7 +181,9 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  /* Center the INK, not the line box: UI fonts carry far more ascent than
+}
+
+/* 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
@@ -159,15 +205,26 @@
      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.
+     the centered band, and being em-relative it tracks the font size.
+
+     The pair is @supports-GATED because the padding is the trim's allowance and
+     nothing else: an untrimmed line box already contains that overhang, so
+     adding the padding there is not "harmless slack" (this comment used to
+     claim it was) — it grew the label's box to 31px, past the 24px close button,
+     and a browser without text-box support rendered 49px tab chips beside a
+     42px "+" and a 44px keyboard button. The chip's own --touch-target floor
+     pins the row height either way; the gate is what keeps the label from
+     pushing PAST it. Gating the shorthand (not the longhands) is deliberate: an
+     engine that ships text-box-trim without the shorthand does not apply the
+     declaration we actually write, so it must take the untrimmed branch too.
 
      Shared by all three chip labels (this one + the two switcher labels in
      31-switcher.css). */
-  text-box: trim-both ex alphabetic;
-  padding-block: 0.5em;
+@supports (text-box: trim-both ex alphabetic) {
+  :where(.wt-root) .wt-tab-label {
+    text-box: trim-both ex alphabetic;
+    padding-block: 0.5em;
+  }
 }
 
 /* A little breathing room after the activity dot, before the label. */
@@ -241,12 +298,16 @@
   align-items: center;
   justify-content: center;
   flex: none;
-  /* Square box that matches the tab height (a stretched flex item ignores
-     aspect-ratio against its SVG's intrinsic width, so size it explicitly). The
-     tab height is the close-button (1.5rem) + vertical padding (2×sp-2) +
-     border. */
-  width: calc(1.5rem + 2 * var(--sp-2) + 2px);
-  height: calc(1.5rem + 2 * var(--sp-2) + 2px);
+  /* A SQUARE box of exactly the strip's control height, so it lines up with the
+     tab chips beside it and with the keyboard button after it (the .wt-btn
+     primitive's 44px box, same token). Sized explicitly on both axes rather
+     than by aspect-ratio: a stretched flex item ignores aspect-ratio against
+     its SVG's intrinsic width. It used to restate the chip's height arithmetic
+     (close button + padding + border) as a calc(), which is how it ended up
+     7px short of a chip whose content grew — see the min-height note on
+     .wt-tab. */
+  width: var(--touch-target);
+  height: var(--touch-target);
   padding: 0;
   background: transparent;
   border: none;
@@ -322,13 +383,15 @@
 
 /* Hover wash, matching every other bar control (.wt-tab-new, the switcher's
    buttons) — without it this was the one control in the chrome that gave no
-   pointer feedback at all. Gated to real hover pointers because the button only
-   SHOWS on a coarse pointer (the iPad strip): a plain touchscreen has no
-   pointer-leave, so :hover would stick after a tap and the wash would linger;
-   the feedback there is :active, from .wt-btn. Before .wt-active / .wt-armed so
-   those toggled fills win on a hovered button (equal specificity, source order
-   decides). */
-@media (hover: hover) {
+   pointer feedback at all. Gated on any-hover, NOT hover: this button renders only
+   under (pointer: coarse) below, and a touch-primary device reports hover: none
+   even with a trackpad attached, so a (hover: hover) gate here made the wash
+   unreachable on every device rather than restricting it to hovering ones (the
+   note in 10-primitives.css has the measurement). On a bare touchscreen any-hover
+   is none, so the feedback there is still :active, from .wt-btn. Before
+   .wt-active / .wt-armed so those toggled fills win on a hovered button (equal
+   specificity, source order decides). */
+@media (any-hover: hover) {
   :where(.wt-root) .wt-tab-kb:hover {
     background: var(--tab-hover-bg);
   }

package/css/31-switcher.css

@@ -148,7 +148,7 @@
   color: color-mix(in oklch, var(--text) 55%, transparent);
 }
 
-@media (hover: hover) {
+@media (any-hover: hover) {
   :where(.wt-root) .wt-switcher-current-close:hover {
     color: var(--text);
   }
@@ -178,11 +178,16 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   text-align: left;
-  /* 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;
+}
+
+/* Ink-centering trim + its mandatory descender allowance, same as .wt-tab-label
+   (see 30-tabs.css for why `ex`, why the padding is not optional, and why the
+   pair is @supports-gated rather than left to fall back). */
+@supports (text-box: trim-both ex alphabetic) {
+  :where(.wt-root) .wt-switcher-label {
+    text-box: trim-both ex alphabetic;
+    padding-block: 0.5em;
+  }
 }
 
 /* Keyboard button: hidden until a keyboardToggle is wired; filled while the key
@@ -211,10 +216,11 @@
   overflow: hidden;
 }
 
-/* Hover wash like the switch and "+" buttons beside it; gated to real hover
-   pointers for the same reason they are (a sticky :hover after a tap). Before
-   .wt-active / .wt-armed so those fills win on a hovered button. */
-@media (hover: hover) {
+/* Hover wash like the switch and "+" buttons beside it; gated on any-hover for
+   the same reason they are (see the note in 10-primitives.css — this whole
+   subtree renders only on a coarse pointer, where hover: hover is always false).
+   Before .wt-active / .wt-armed so those fills win on a hovered button. */
+@media (any-hover: hover) {
   :where(.wt-root) .wt-switcher-kb:hover {
     background: var(--tab-hover-bg);
   }
@@ -287,7 +293,7 @@
   pointer-events: none;
 }
 
-@media (hover: hover) {
+@media (any-hover: hover) {
   :where(.wt-root) .wt-switcher-switch:hover {
     background: var(--tab-hover-bg);
   }
@@ -315,15 +321,17 @@
 }
 
 /* Mobile "+": the primary action, carried in the accent colour so it reads as
-   permanent and prominent. Hover fill is gated to real hover pointers: on touch,
-   :hover sticks after a tap (no pointer-leave), so the purple would linger — the
-   press feedback there comes from :active, which clears on release. */
+   permanent and prominent. Hover fill is gated on any-hover (see the note in
+   10-primitives.css): on a bare touchscreen any-hover is none, so the purple
+   cannot linger after a tap and the press feedback comes from :active; a trackpad
+   or Pencil reports hover and gets the wash, which a (hover: hover) gate denied it.
+   */
 :where(.wt-root) .wt-switcher-new {
   flex: none;
   color: var(--accent);
 }
 
-@media (hover: hover) {
+@media (any-hover: hover) {
   :where(.wt-root) .wt-switcher-new:hover {
     background: var(--tab-hover-bg);
   }
@@ -413,7 +421,7 @@
   overflow: hidden;
 }
 
-@media (hover: hover) {
+@media (any-hover: hover) {
   :where(.wt-root) .wt-switcher-row-select:hover {
     background: color-mix(in oklch, var(--tab-bg), var(--text) 15%);
   }
@@ -432,11 +440,16 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  /* 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;
+}
+
+/* Ink-centering trim + its mandatory descender allowance, same as .wt-tab-label
+   (see 30-tabs.css for why `ex`, why the padding is not optional, and why the
+   pair is @supports-gated rather than left to fall back). */
+@supports (text-box: trim-both ex alphabetic) {
+  :where(.wt-root) .wt-switcher-row-label {
+    text-box: trim-both ex alphabetic;
+    padding-block: 0.5em;
+  }
 }
 
 /* The close sits flush at the row's right edge (no gap), vertically centered. */
@@ -448,10 +461,13 @@
   color: color-mix(in oklch, var(--text) 55%, transparent);
 }
 
-/* Hover only on real hover pointers: on touch, :hover sticks after a tap, so
-   when closing a tab shifts the list under the finger the newly-under close
-   would latch white. Touch feedback comes from the surrounding row's :active. */
-@media (hover: hover) {
+/* Hover gated on any-hover (see the note in 10-primitives.css): on a bare
+   touchscreen any-hover is none, so when closing a tab shifts the list under the
+   finger the newly-under close cannot latch white, and the feedback comes from the
+   surrounding row's :active. A trackpad or Pencil reports hover and gets the
+   brighten, which a (hover: hover) gate denied it — this subtree only ever renders
+   on a coarse-primary device. */
+@media (any-hover: hover) {
   :where(.wt-root) .wt-switcher-row-close:hover {
     color: var(--text);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cplieger/web-terminal-ui",
-  "version": "5.0.0",
+  "version": "5.0.2",
   "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/tabs/index.ts

@@ -2445,8 +2445,8 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
           void close_(activeId);
         }
       });
-      // 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).
+      // Dismiss the tab context menu on an outside click, on Escape, and on a
+      // scroll of the strip itself (which moves the chip the menu is anchored to).
       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.
@@ -2466,8 +2466,23 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
         }
       };
       document.addEventListener("contextmenu", onDocContextMenu);
-      const onScrollMenu = (): void => {
-        hideTabMenu();
+      // Only a scroll that moves the menu's ANCHOR dismisses it, which is the
+      // strip's own horizontal scroller and nothing else: the menu is placed
+      // root-relative (menu-position.ts rebases onto the offsetParent), so any
+      // scroll that moves .wt-root moves the menu with it, and the terminal's
+      // scroller does not move the chip at all.
+      //
+      // The target check is load-bearing, not a micro-optimization. This listener
+      // is capture-phase on window, so it sees EVERY scroll in the document —
+      // including the terminal surface auto-scrolling to the bottom on each chunk
+      // of output. Without the check, an agent printing into the TUI closed the
+      // tab menu within a frame of it opening, which is unusable on exactly the
+      // screen the menu exists for (a busy multi-agent strip).
+      const onScrollMenu = (e: Event): void => {
+        const target = e.target;
+        if (target instanceof Element && target.closest(".wt-tab-scroll")) {
+          hideTabMenu();
+        }
       };
       window.addEventListener("scroll", onScrollMenu, true);
       const offMenuKey = ctx.registerKeydown((ev) => {