@cplieger/web-terminal-ui 8.3.3 → 8.3.5-dev.1

package/css/23-toolbar.css

@@ -1,182 +1,195 @@
-/* ===== Key toolbar (mobileToolbar feature; touch devices only) =====
+/* ===== Key toolbar (mobileToolbar feature) =====
    Uses interpolate-size: allow-keywords (on .wt-root) to animate
    width/height between a fixed collapsed size and auto (intrinsic).
-   Toggle is first in DOM so it's at top-left of the grid — visible
-   when the container clips to 1-cell size. Container is right-anchored
+   The toggle sits top-right (col 5, row 1), so it stays visible when the
+   container clips to 1-cell size. Container is right-anchored
    so it grows leftward on open. */
-:where(.wt-root) .key-toolbar {
-  display: contents;
+
+/* A self-toggled toolbar shows only under a coarse primary pointer. An
+   externally toggled one (`externalToggle`) exists whenever its host opens it,
+   because the host owns the trigger and may offer it on a touch-capable device
+   whose primary pointer reports fine. */
+@media not (pointer: coarse) {
+  :where(.wt-root) .key-toolbar:not(.wt-toolbar-external) {
+    display: none;
+  }
 }
 
-/* Touch-only toolbar children: the on-screen Esc/Tab/arrows/hamburger
-   are useless on desktop where the user has a real keyboard. Hidden by
-   default; the @media (pointer: coarse) block below restores them. */
-:where(.wt-root) .kb-key,
-:where(.wt-root) .kb-toggle {
+/* Externally toggled: the host's trigger replaces the in-grid toggle, so its
+   column goes, and collapsed means gone — with no toggle left to keep in view,
+   a collapsed pill is just a box parked over the terminal. (0,2,0) beats the
+   shared button rule's (0,1,1). */
+:where(.wt-root) .wt-toolbar-external .kb-toggle {
   display: none;
 }
 
-@media (pointer: coarse) {
-  :where(.wt-root) .key-toolbar {
-    /* Absolute against .wt-root (identical geometry in wt-viewport mode; see
-       01-scope.css). --vv-top keeps it following iOS's visual-viewport shift. */
-    position: absolute;
-    top: calc(var(--safe-top) + var(--sp-2) + var(--vv-top, 0px));
-    right: var(--sp-2);
-    z-index: 10;
-    display: grid;
-    grid-template-columns: repeat(4, var(--touch-target)) var(--touch-target);
-    grid-template-rows: var(--touch-target) var(--touch-target);
-    place-content: start end;
-    gap: var(--sp-1);
-    padding: var(--sp-1);
-    background: var(--surface);
-    backdrop-filter: var(--blur);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    overflow: hidden;
-    width: auto;
-    height: auto;
-    transition:
-      width var(--dur-enter) var(--ease-standard),
-      height var(--dur-enter) var(--ease-standard);
-  }
+:where(.wt-root) .key-toolbar.wt-toolbar-external {
+  grid-template-columns: repeat(4, var(--touch-target));
+}
 
-  /* Collapsed: fixed size = 1 button + padding + border. Content is
-     right-aligned (justify-content:end) so the toggle (col 5) stays at
-     the right edge, visible within the clipped area. --pill-outer
-     includes the 2px border (box-sizing:border-box); omitting it left
-     the content box 2px short, pinning the button top-right with
-     unequal bottom/left gaps. */
-  :where(.wt-root) .key-toolbar.collapsed {
-    width: var(--pill-outer);
-    height: var(--pill-outer);
-  }
+:where(.wt-root) .key-toolbar.wt-toolbar-external.collapsed {
+  display: none;
+}
 
-  /* Grid placement: toggle at col 5 row 1 (top-right). */
-  :where(.wt-root) .kb-toggle {
-    grid-area: 1 / 5;
-    position: relative;
-  }
-  :where(.wt-root) .kb-r1c1 {
-    grid-area: 1 / 1;
-  }
-  :where(.wt-root) .kb-r1c2 {
-    grid-area: 1 / 2;
-  }
-  :where(.wt-root) .kb-r1c3 {
-    grid-area: 1 / 3;
-  }
-  :where(.wt-root) .kb-r1c4 {
-    grid-area: 1 / 4;
-  }
-  :where(.wt-root) .kb-r2c1 {
-    grid-area: 2 / 1;
-  }
-  :where(.wt-root) .kb-r2c2 {
-    grid-area: 2 / 2;
-  }
-  :where(.wt-root) .kb-r2c3 {
-    grid-area: 2 / 3;
-  }
-  :where(.wt-root) .kb-r2c4 {
-    grid-area: 2 / 4;
-  }
+:where(.wt-root) .key-toolbar {
+  /* Absolute against .wt-root (identical geometry in wt-viewport mode; see
+     01-scope.css). --vv-top keeps it following iOS's visual-viewport shift. */
+  position: absolute;
+  top: calc(var(--safe-top) + var(--sp-2) + var(--vv-top, 0px));
+  right: var(--sp-2);
+  z-index: 10;
+  display: grid;
+  grid-template-columns: repeat(4, var(--touch-target)) var(--touch-target);
+  grid-template-rows: var(--touch-target) var(--touch-target);
+  place-content: start end;
+  gap: var(--sp-1);
+  padding: var(--sp-1);
+  background: var(--surface);
+  backdrop-filter: var(--blur);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  width: auto;
+  height: auto;
+  transition:
+    width var(--dur-enter) var(--ease-standard),
+    height var(--dur-enter) var(--ease-standard);
+}
 
-  /* Keys fade in/out during open/close. The container's width/height
-     transition handles the background slide; opacity handles the
-     individual button appearance. Stagger the fade slightly after
-     the container starts growing (delay on open) and before it
-     finishes shrinking (no delay on close). */
-  :where(.wt-root) .kb-key {
-    opacity: 1;
-    transition: opacity var(--dur-standard) var(--ease-enter) 0.05s;
-  }
+/* Collapsed: fixed size = 1 button + padding + border. Content is
+   right-aligned (justify-content:end) so the toggle (col 5) stays at
+   the right edge, visible within the clipped area. --pill-outer
+   includes the 2px border (box-sizing:border-box); omitting it left
+   the content box 2px short, pinning the button top-right with
+   unequal bottom/left gaps. */
+:where(.wt-root) .key-toolbar.collapsed {
+  width: var(--pill-outer);
+  height: var(--pill-outer);
+}
 
-  :where(.wt-root) .key-toolbar.collapsed .kb-key {
-    opacity: 0;
-    transition: opacity var(--dur-exit) var(--ease-exit);
-  }
+/* Grid placement: toggle at col 5 row 1 (top-right). */
+:where(.wt-root) .kb-toggle {
+  grid-area: 1 / 5;
+  position: relative;
+}
+:where(.wt-root) .kb-r1c1 {
+  grid-area: 1 / 1;
+}
+:where(.wt-root) .kb-r1c2 {
+  grid-area: 1 / 2;
+}
+:where(.wt-root) .kb-r1c3 {
+  grid-area: 1 / 3;
+}
+:where(.wt-root) .kb-r1c4 {
+  grid-area: 1 / 4;
+}
+:where(.wt-root) .kb-r2c1 {
+  grid-area: 2 / 1;
+}
+:where(.wt-root) .kb-r2c2 {
+  grid-area: 2 / 2;
+}
+:where(.wt-root) .kb-r2c3 {
+  grid-area: 2 / 3;
+}
+:where(.wt-root) .kb-r2c4 {
+  grid-area: 2 / 4;
+}
 
-  /* Shared button */
-  :where(.wt-root) .key-toolbar button {
-    width: var(--touch-target);
-    height: var(--touch-target);
-    background: transparent;
-    color: var(--text);
-    border: none;
-    border-radius: var(--radius-inner);
-    font-size: 0.9375rem;
-    font-family: var(--font-ui);
-    font-weight: 500;
-    cursor: pointer;
-    touch-action: manipulation;
-    -webkit-user-select: none;
-    user-select: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
+/* Keys fade in/out during open/close. The container's width/height
+   transition handles the background slide; opacity handles the
+   individual button appearance. Stagger the fade slightly after
+   the container starts growing (delay on open) and before it
+   finishes shrinking (no delay on close). */
+:where(.wt-root) .kb-key {
+  opacity: 1;
+  transition: opacity var(--dur-standard) var(--ease-enter) 0.05s;
+}
 
-  :where(.wt-root) .key-toolbar button:active {
-    background: var(--text-active);
-  }
+:where(.wt-root) .key-toolbar.collapsed .kb-key {
+  opacity: 0;
+  transition: opacity var(--dur-exit) var(--ease-exit);
+}
 
-  /* Sticky Ctrl, armed: inverted fill so the toggle state reads clearly
-     in the monochrome palette (stays filled while pressed). */
-  :where(.wt-root) .kb-key.armed,
-  :where(.wt-root) .kb-key.armed:active {
-    background: var(--text);
-    color: var(--bg);
-  }
+/* Shared button */
+:where(.wt-root) .key-toolbar button {
+  width: var(--touch-target);
+  height: var(--touch-target);
+  background: transparent;
+  color: var(--text);
+  border: none;
+  border-radius: var(--radius-inner);
+  font-size: 0.9375rem;
+  font-family: var(--font-ui);
+  font-weight: 500;
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-user-select: none;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 
-  :where(.wt-root) .key-toolbar button svg {
-    width: var(--icon);
-    height: var(--icon);
-    stroke: currentcolor;
-    fill: none;
-    stroke-width: 2;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-  }
+:where(.wt-root) .key-toolbar button:active {
+  background: var(--text-active);
+}
 
-  /* Toggle icon crossfade. Both icons are stacked absolute so they
-     can independently fade + rotate during the open<->close
-     transition. inset:0 + margin:auto centers them within the
-     button (works because the SVGs carry explicit width/height); a
-     bare `position: absolute` would pin them at the top-left, giving
-     the toggle visibly unequal left/right padding when collapsed. */
-  :where(.wt-root) .kb-toggle .icon-hamburger,
-  :where(.wt-root) .kb-toggle .icon-close {
-    position: absolute;
-    inset: 0;
-    margin: auto;
-    transition:
-      opacity var(--dur-standard) linear,
-      transform var(--dur-standard) linear;
-  }
+/* Sticky Ctrl, armed: inverted fill so the toggle state reads clearly
+   in the monochrome palette (stays filled while pressed). */
+:where(.wt-root) .kb-key.armed,
+:where(.wt-root) .kb-key.armed:active {
+  background: var(--text);
+  color: var(--bg);
+}
 
-  :where(.wt-root) .kb-toggle .icon-close {
-    opacity: 1;
-    transform: rotate(0deg);
-  }
-  :where(.wt-root) .kb-toggle .icon-hamburger {
-    opacity: 0;
-    transform: rotate(-90deg);
-  }
-  :where(.wt-root) .key-toolbar.collapsed .kb-toggle .icon-close {
-    opacity: 0;
-    transform: rotate(90deg);
-  }
-  :where(.wt-root) .key-toolbar.collapsed .kb-toggle .icon-hamburger {
-    opacity: 1;
-    transform: rotate(0deg);
-  }
+:where(.wt-root) .key-toolbar button svg {
+  width: var(--icon);
+  height: var(--icon);
+  stroke: currentcolor;
+  fill: none;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
 
-  /* No-transition on first render */
-  :where(.wt-root) .key-toolbar.no-transition,
-  :where(.wt-root) .key-toolbar.no-transition .kb-toggle .icon-hamburger,
-  :where(.wt-root) .key-toolbar.no-transition .kb-toggle .icon-close {
-    transition: none;
-  }
+/* Toggle icon crossfade. Both icons are stacked absolute so they
+   can independently fade + rotate during the open<->close
+   transition. inset:0 + margin:auto centers them within the
+   button (works because the SVGs carry explicit width/height); a
+   bare `position: absolute` would pin them at the top-left, giving
+   the toggle visibly unequal left/right padding when collapsed. */
+:where(.wt-root) .kb-toggle .icon-hamburger,
+:where(.wt-root) .kb-toggle .icon-close {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  transition:
+    opacity var(--dur-standard) linear,
+    transform var(--dur-standard) linear;
+}
+
+:where(.wt-root) .kb-toggle .icon-close {
+  opacity: 1;
+  transform: rotate(0deg);
+}
+:where(.wt-root) .kb-toggle .icon-hamburger {
+  opacity: 0;
+  transform: rotate(-90deg);
+}
+:where(.wt-root) .key-toolbar.collapsed .kb-toggle .icon-close {
+  opacity: 0;
+  transform: rotate(90deg);
+}
+:where(.wt-root) .key-toolbar.collapsed .kb-toggle .icon-hamburger {
+  opacity: 1;
+  transform: rotate(0deg);
+}
+
+/* No-transition on first render */
+:where(.wt-root) .key-toolbar.no-transition,
+:where(.wt-root) .key-toolbar.no-transition .kb-toggle .icon-hamburger,
+:where(.wt-root) .key-toolbar.no-transition .kb-toggle .icon-close {
+  transition: none;
 }

package/css/31-switcher.css

@@ -432,39 +432,21 @@
   background: var(--tab-hover-bg);
 }
 
-/* ===== Externally-driven key grid (tabbed presets, WS3) =====
-   In the tabbed presets the mobile toolbar hides its own toggle (a tab-chrome
-   keyboard button drives it — the switcher's on a narrow phone, the strip's
-   .wt-tab-kb on a wide touchscreen) and the grid docks bottom-right above the
-   tab chrome, its RIGHT edge aligned with the keyboard button that opened it,
-   so the popup visually hangs off its toggle in every mode (it may overlap the
-   scroll-to-bottom button — deliberate: the grid is transient and on top). It
-   collapses to fully hidden, since there is no in-grid toggle to keep visible.
-   The BASE rules here are the wide-touchscreen (strip) placement — above
-   --wt-tabbar-h, right-aligned to the strip's .wt-tab-kb (the bar's last flex
-   item, inset --sp-2 by the bar padding); the .wt-narrow overrides below
-   re-anchor above the switcher bar (--wt-switcher-h) and shift left past the
-   bar controls sitting right of the switcher's kb button: the "+" (always)
-   and, once a second tab reveals it, the switch button (.wt-switcher-multi
-   from the tabs feature, read here via :has() since the grid is a sibling
-   region of the switcher). Everything else (toggle hidden, grid columns,
-   collapsed fully hidden) is identical in all modes. */
+/* ===== Externally-driven key grid: tab-chrome docking (tabbed presets) =====
+   A tab-chrome keyboard button drives the grid (the switcher's on a narrow
+   phone, the strip's .wt-tab-kb on a wide touchscreen; both exist only under
+   a coarse pointer), so the grid docks bottom-right above the tab chrome with
+   its RIGHT edge on that button. The mode's own rules (no in-grid toggle, four
+   columns, collapsed means gone) are 23-toolbar.css's. The .wt-narrow
+   overrides re-anchor above the switcher bar and shift left past the "+" and,
+   once a second tab reveals it, the switch button. */
 @media (pointer: coarse) {
-  :where(.wt-root) .wt-toolbar-external .kb-toggle {
-    display: none;
-  }
-
   :where(.wt-root) .key-toolbar.wt-toolbar-external {
     top: auto;
     right: var(--sp-2);
     bottom: calc(
       var(--wt-tabbar-h, 44px) + var(--safe-bottom, 0px) + var(--kb-inset, 0px) + var(--sp-2)
     );
-    grid-template-columns: repeat(4, var(--touch-target));
-  }
-
-  :where(.wt-root) .key-toolbar.wt-toolbar-external.collapsed {
-    display: none;
   }
 
   /* Narrow phone (mobile switcher mode): dock above the switcher bar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cplieger/web-terminal-ui",
-  "version": "8.3.3",
+  "version": "8.3.5-dev.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": "MPL-2.0",
@@ -57,7 +57,7 @@
     "@vitest/coverage-v8": "5.0.3",
     "eslint": "10.12.0",
     "fast-check": "4.10.2",
-    "html-validate": "11.16.1",
+    "html-validate": "11.16.2",
     "knip": "6.39.0",
     "playwright": "1.63.0",
     "prettier": "3.9.9",

package/src/features/mobile-toolbar.ts

@@ -20,8 +20,9 @@ export interface MobileToolbarApi {
 
 /** Options for the mobileToolbar feature. */
 export interface MobileToolbarOptions {
-  /** Hide the toolbar's own toggle and open the grid above the mobile tab bar;
-   *  the grid is then driven through the returned API. The tabbed presets set it. */
+  /** Hide the toolbar's own toggle; the grid is then driven through the returned
+   *  API and renders whenever it is open, whatever the primary pointer, so the
+   *  host's trigger decides where a grid exists. The tabbed presets set it. */
   externalToggle?: boolean;
 }
 
@@ -38,12 +39,12 @@ const TOOLBAR_HTML = `
   <button type="button" id="kb-right" class="kb-key kb-r2c4" aria-label="Right"><svg viewBox="0 0 24 24"><polyline points="9 6 15 12 9 18"/></svg></button>
 </div>`;
 
-/** Build the mobileToolbar feature. The chrome is always built; only a coarse
- *  pointer makes it visible (`css/23-toolbar.css`). Order it before `tabs` when
- *  `externalToggle` is set, since tabs reads the API through `ctx.use`.
- *  Sticky-Ctrl is a kernel INPUT TRANSFORM rather than a toolbar click path, so
- *  it rewrites a character typed on the soft keyboard as well as one from these
- *  buttons. */
+/** Build the mobileToolbar feature. The chrome is always built; a self-toggled
+ *  toolbar is visible only under a coarse pointer (`css/23-toolbar.css`). Order
+ *  it before `tabs` when `externalToggle` is set, since tabs reads the API
+ *  through `ctx.use`. Sticky-Ctrl is a kernel INPUT TRANSFORM rather than a
+ *  toolbar click path, so it rewrites a character typed on the soft keyboard as
+ *  well as one from these buttons. */
 export function mobileToolbar(opts: MobileToolbarOptions = {}): TerminalFeature<MobileToolbarApi> {
   return {
     name: "mobileToolbar",

package/src/features/tabs/index.ts

@@ -639,6 +639,18 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
           };
           reflectArmed(kbApi.isCtrlArmed());
           ctx.defer(kbApi.onCtrlArmedChange(reflectArmed));
+          // The keyboard buttons render only under a coarse pointer, so a grid
+          // still open when the primary pointer turns fine would have no closer.
+          const coarse = win.matchMedia("(pointer: coarse)");
+          const onPointerChange = (): void => {
+            if (!coarse.matches) {
+              closeKeyGrid();
+            }
+          };
+          coarse.addEventListener("change", onPointerChange);
+          ctx.defer(() => {
+            coarse.removeEventListener("change", onPointerChange);
+          });
         }
       }
       // Measured optical centring for every chip label in both layouts: writes