@cplieger/web-terminal-ui 3.4.0 → 3.4.2

package/css/00-tokens.css

@@ -15,9 +15,19 @@
   --accent: oklch(72% 0.15 250deg); /* light blue; themed per consumer */
   --tab-bg: oklch(30% 0 0deg / 90%); /* inactive-tab chip (translucent) */
   --tab-hover-bg: var(--text-active); /* pressed controls / mobile switcher hovers */
-  --tab-active-bg: color-mix(in oklch, var(--text) 22%, var(--surface)); /* active tab fill */
+  --tab-active-bg: color-mix(
+    in oklch,
+    var(--accent) 30%,
+    var(--surface)
+  ); /* active tab fill: accent-derived (a blue by default; themed per consumer), so the active tab reads blue with a subtle lighter edge below */
+
   --tab-active-fg: var(--text); /* active tab text */
-  --tab-active-border: color-mix(in oklch, var(--accent) 90%, transparent); /* accent edge */
+  --tab-active-border: color-mix(
+    in oklch,
+    var(--tab-active-bg),
+    var(--text) 25%
+  ); /* subtle edge: the fill lightened + slightly desaturated, matching the inactive chip's faint border rather than a vivid accent outline */
+
   --radius: 0.75rem;
   --radius-inner: 0.5rem;
   /* Small square icon buttons (e.g. the 24px tab-close x): at that size the

package/css/06-mobile.css

@@ -77,7 +77,7 @@
   /* Cap against the DYNAMIC viewport so a shown mobile browser toolbar can't push the list
      (and the bar above it) off the top; the switcher's own bottom: kb-inset already lifts it
      clear of the soft keyboard. */
-  max-height: 50dvh;
+  max-height: var(--wt-list-h, 50dvh);
   overflow-y: auto;
   /* No top padding: the bar's --sp-2 bottom padding already sits between the
      active tab and the first row, so the seam equals the --sp-2 inter-row gap. */
@@ -227,11 +227,31 @@
 
 /* Tab-switcher button: toggles the list open/closed, sitting between the
    keyboard and "+" buttons. position: relative anchors its notification dot,
-   absolutely placed in the top-right corner. Unlike the keyboard button it
-   stays visible while the list is expanded — it is the close control. */
+   absolutely placed in the top-right corner. It only earns its place with ≥2
+   tabs (a single tab has nothing to switch to), so it is COLLAPSED to zero width
+   by default and revealed by .wt-switcher-multi (the tabs feature sets it on tab
+   count); the appear/collapse is animated in 07-animations.css and the active
+   chip shrinks/grows to fill the freed space in lockstep (flex layout). */
 .wt-switcher-switch {
   position: relative;
   flex: none;
+  width: 0;
+  min-width: 0;
+  padding: 0;
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+  /* Absorb the flex gap the zero-width button would otherwise leave between the
+     active row and the "+". */
+  margin-inline-start: calc(-1 * var(--sp-1));
+}
+
+/* Revealed once a second tab exists: full 44px box, interactive, no gap eat. */
+.wt-switcher-multi .wt-switcher-switch {
+  width: var(--touch-target);
+  opacity: 1;
+  pointer-events: auto;
+  margin-inline-start: 0;
 }
 
 @media (hover: hover) {

package/css/07-animations.css

@@ -74,6 +74,17 @@
     opacity var(--dur-standard) var(--ease-standard);
 }
 
+/* The dedicated switch button appears when a second tab opens and collapses back
+   at one tab (.wt-switcher-multi, tabs feature). Animate its width + margin +
+   opacity so it slides in from zero width — the active-tab chip shrinks to make
+   room in lockstep (flex) — rather than popping. Mirrors the keyboard button. */
+.wt-animate .wt-switcher-switch {
+  transition:
+    width var(--dur-enter) var(--ease-standard),
+    margin var(--dur-enter) var(--ease-standard),
+    opacity var(--dur-standard) var(--ease-standard);
+}
+
 /* Switch motion: a subtle content fade on switch, so the cache-first repaint
    reads as a change rather than a flicker. A swipe additionally slides the
    content in from the swipe's direction (next from the right, prev from the

package/package.json

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

@@ -755,7 +755,11 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
         if (!t) {
           return; // no active tab
         }
-        for (const b of bytes) {
+        for (let i = 0; i < bytes.length; i++) {
+          const b = bytes[i];
+          if (b === undefined) {
+            continue;
+          }
           if (escState === 1) {
             escState = b === 0x5b ? 2 : b === 0x4f ? 3 : 0; // ESC [ = CSI, ESC O = SS3
             continue;
@@ -786,11 +790,32 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
           if (b === 0x1b) {
             escState = 1; // ESC: start of an escape sequence
           } else if (b === 0x0d || b === 0x0a) {
-            if (inPaste) {
-              // A newline INSIDE a bracketed paste is pasted content, not a
-              // submit: fold it to a single space so the whole paste stays one
-              // logical line and the title reflects its START (a multi-line
-              // paste previously left only its LAST line as the title).
+            // A newline is a line SUBMIT only when it terminates the input. It is
+            // folded to a single space (keeping the current line going) when it is
+            // instead a paste-internal break, so a multi-line message becomes one
+            // logical line whose title reflects its START rather than only its
+            // LAST line. Two cases fold:
+            //   - inside a bracketed paste (ESC[200~ … ESC[201~), and
+            //   - a newline FOLLOWED by more printable input in this SAME chunk:
+            //     a human pressing Enter sends the newline as the end of its own
+            //     input event, whereas a paste (even one sent WITHOUT bracketed-
+            //     paste guards — e.g. an agent shell like kiro-cli that keeps a
+            //     pasted multi-line message as one prompt) delivers
+            //     text + newline + text together, so trailing content marks the
+            //     newline as a soft break, not a submit. Without this, such a
+            //     paste left only its last line as the title (the reported
+            //     "the title cut off the start of my message").
+            let softBreak = inPaste;
+            if (!softBreak) {
+              for (let j = i + 1; j < bytes.length; j++) {
+                const nb = bytes[j];
+                if (nb !== undefined && nb >= 0x20) {
+                  softBreak = true;
+                  break;
+                }
+              }
+            }
+            if (softBreak) {
               if (lineBytes.length > 0 && lineBytes[lineBytes.length - 1] !== 0x20) {
                 lineBytes.push(0x20);
               }
@@ -972,6 +997,22 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
             animateRowIn(row); // grow + fade in (the tray height follows)
           }
         }
+        // Publish the measured content height so the expanded list animates its
+        // max-height between 0 and the REAL content height (--wt-list-h in
+        // 06-mobile.css), not a fixed 50dvh far larger than the content — which
+        // made the open finish early and the close start late (box height =
+        // min(content, max-height), so the transition's stretch past the content
+        // moved nothing: the asymmetric, choppy toggle). scrollHeight is the full
+        // content height regardless of the collapsed max-height:0 clip, so this
+        // is valid whether measured while collapsed (on open, before the expanded
+        // class) or already open (a tab added/closed). Capped at 50dvh (then
+        // overflow-y:auto scrolls). This works without interpolate-size (iOS
+        // Safari lacks it), unlike a height:auto transition.
+        const visH = window.visualViewport?.height ?? window.innerHeight;
+        switcher.style.setProperty(
+          "--wt-list-h",
+          `${String(Math.min(swList.scrollHeight, Math.round(visH * 0.5)))}px`,
+        );
       }
 
       // clearRows empties the list and drops the reused-row cache (after a
@@ -1065,7 +1106,17 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
           }
           const exit = dir === "next" ? -pitch : pitch; // leaving row off the leading edge
           requestAnimationFrame(() => {
-            const trans = "transform 0.25s cubic-bezier(0.2, 0, 0, 1), opacity 0.2s ease-out";
+            // Couple opacity to the SAME easing + duration as the transform so a
+            // row's fade tracks its DISTANCE from its target slot (every reel row
+            // travels one pitch): opacity is a linear function of remaining
+            // distance, so a row is transparent a pitch away (at the clipped
+            // edge) and only fully opaque once it settles. Entering rows fade IN
+            // as they rotate in and the leaving row fades OUT as it exits — no
+            // hard black cutoff at the list edges, and no permanent edge fade.
+            // (Was opacity 0.2s ease-out, decoupled from the motion, so a row hit
+            // full opacity while still at the edge — the reported hard cut.)
+            const trans =
+              "transform 0.25s cubic-bezier(0.2, 0, 0, 1), opacity 0.25s cubic-bezier(0.2, 0, 0, 1)";
             for (const el of rowEls.values()) {
               el.style.transition = trans;
               el.style.transform = "translateY(0)";
@@ -1084,6 +1135,16 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
         relabelAll();
         paintActive();
         syncMobile();
+        // The dedicated switch button only earns its place once there are ≥2
+        // tabs (a single tab has nothing to switch to; expandSwitcher no-ops
+        // there). .wt-switcher-multi drives its collapse-when-single / animate-in
+        // -when-a-second-opens motion in CSS (the active chip shrinks to make
+        // room in lockstep, via the flex layout); aria-hidden + tabindex keep the
+        // collapsed button out of the a11y tree and tab order.
+        const multiTab = tabList.length >= 2;
+        switcher.classList.toggle("wt-switcher-multi", multiTab);
+        swSwitch.setAttribute("aria-hidden", multiTab ? "false" : "true");
+        swSwitch.tabIndex = multiTab ? 0 : -1;
         if (expanded) {
           renderSwitcherList();
         }