@cplieger/web-terminal-ui 6.1.1 → 6.1.3

package/css/page.css

@@ -73,10 +73,15 @@ body {
   --wt-loading-bg: #000;
   --wt-loading-bar-inline-size: min(220px, 62vw);
   --wt-loading-bar-block-size: 5px;
-  /* Symmetric ease-in-out-cubic, deliberately NOT one of the component easing
-     tokens: those are all asymmetric (they settle at one end), which reads as a
-     stutter on a looping indeterminate sweep. */
-  --wt-loading-sweep-easing: cubic-bezier(0.65, 0, 0.35, 1);
+  /* Symmetric, deliberately NOT one of the component easing tokens: those are all
+     asymmetric (they settle at one end), which reads as a stutter on a looping
+     indeterminate sweep. It is also deliberately NOT an ease-in-out-cubic
+     (`cubic-bezier(0.65, 0, 0.35, 1)`, what this was): a curve with zero velocity
+     at both ends spends its two slow phases exactly where the sweep is clipped
+     off-screen, which measured as 315 ms of blank track at each end of every
+     1.5 s lap. Non-zero end velocity keeps the symmetry and cuts that to 90 ms,
+     below the point where the loop reads as a stall. */
+  --wt-loading-sweep-easing: cubic-bezier(0.3, 0.25, 0.7, 0.75);
   --wt-loading-sweep-duration: 1.5s;
 
   position: fixed;
@@ -129,6 +134,15 @@ body {
   content: "";
   position: absolute;
   inset-block: 0;
+  /* Load-bearing, and the whole reason the sweep used to enter mid-track: with
+     both inline offsets `auto` an absolutely positioned box falls back to its
+     STATIC position, and .wt-loading sets `text-align: center`, which centres
+     that static position inside the 220px track. The keyframes below are written
+     against the track's left edge, so every offset was silently shifted right by
+     (220 - 92.4) / 2 = 64px: the sweep was already visible at t=0 near the left
+     of centre, and it left the track at ~73% of the cycle. Pinning the origin is
+     what makes translateX(-100%) mean "one full sweep-width off the left edge". */
+  inset-inline-start: 0;
   inline-size: 42%;
   border-radius: inherit;
   background: linear-gradient(
@@ -167,12 +181,17 @@ body {
   opacity: 0;
 }
 
+/* Offsets are percentages of the SWEEP (42% of the track), not of the track, so
+   -100% is exactly one sweep-width left of the origin (fully clipped, flush with
+   the left edge) and 100% / 0.42 = 238% puts its left edge flush with the right
+   edge. Flush at both ends rather than over-travelled: every pixel of travel
+   outside the track is dead time on a screen whose only job is to look alive. */
 @keyframes wt-loading-slide {
   0% {
-    transform: translateX(-110%);
+    transform: translateX(-100%);
   }
   100% {
-    transform: translateX(250%);
+    transform: translateX(238%);
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cplieger/web-terminal-ui",
-  "version": "6.1.1",
+  "version": "6.1.3",
   "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",
@@ -56,7 +56,7 @@
     "eslint": "10.8.1",
     "fast-check": "4.9.0",
     "happy-dom": "20.11.2",
-    "html-validate": "11.6.2",
+    "html-validate": "11.7.0",
     "knip": "6.32.2",
     "prettier": "3.9.6",
     "stylelint": "17.14.1",

package/src/features/tabs/index.ts

@@ -152,7 +152,13 @@ export interface TabsOptions {
    *
    *  Not every platform honours it: Safari caches the first icon it fetched and
    *  ignores later changes, and an installed app has no tab icon at all. The
-   *  title count is not gated on this, so those cases lose nothing. */
+   *  title count is not gated on this, so those cases lose nothing.
+   *
+   *  The links are restored on `pagehide` as well as on teardown, because a
+   *  browser remembers one icon per URL and renders it for the bookmark, the
+   *  history row and the new-tab tile. Best-effort there, since the write races
+   *  the unload. Deliberately not on `freeze`: a frozen background tab is still in
+   *  the strip rendering its icon, which is the case this exists for. */
   attentionIcons?: boolean;
 }
 
@@ -601,6 +607,39 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
       }
       document.addEventListener("visibilitychange", onPageVisible);
 
+      // onPageGone hands the page's own icon back before the page GOES AWAY,
+      // which is a different question from the page being hidden and needs a
+      // different event. A browser remembers ONE icon per URL and renders it for
+      // the bookmark, the history row and the new-tab tile, so a tab closed while
+      // a cue was lit leaves a status variant standing in for the app until the
+      // page is next loaded.
+      //
+      // `pagehide`, and deliberately NOT `freeze`. freeze fires for a background
+      // tab the browser is conserving resources on (Android after five minutes in
+      // the background; desktop for a collapsed tab group and, since Chrome 133, a
+      // CPU-heavy tab under Energy Saver), and that tab is STILL in the strip
+      // rendering its icon — restoring there would blank the cue in exactly the
+      // case the cue exists for. pagehide fires on unload, tab close and bfcache
+      // entry, where no strip entry is left to render.
+      //
+      // Through apply() rather than the icon sink directly, because the sinks are
+      // change-gated on the last applied value: writing behind that memo would
+      // leave it believing the variant is still up, and a page restored from the
+      // bfcache would then never repaint it. Which is what onPageBack is for — a
+      // bfcache restore re-runs the fold, so the cue returns for a page that did
+      // not actually go away. Best-effort on a real unload, where the icon write
+      // races the teardown, and a no-op when nothing was lit.
+      function onPageGone(): void {
+        attention.apply(NO_ATTENTION);
+      }
+      function onPageBack(event: PageTransitionEvent): void {
+        if (event.persisted) {
+          paintAttention();
+        }
+      }
+      window.addEventListener("pagehide", onPageGone);
+      window.addEventListener("pageshow", onPageBack);
+
       // paintAttention re-derives the whole attention state from the tab list and
       // this viewer's acknowledgements, and hands it to the surfaces.
       //
@@ -4115,6 +4154,8 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
           offMenuKey();
           document.removeEventListener("click", onDocClickMenu);
           document.removeEventListener("visibilitychange", onPageVisible);
+          window.removeEventListener("pagehide", onPageGone);
+          window.removeEventListener("pageshow", onPageBack);
           document.removeEventListener("contextmenu", onDocContextMenu);
           document.removeEventListener("pointerup", onDocTapDismiss, true);
           document.removeEventListener("dragover", onDocTabDrop);