@cplieger/web-terminal-ui 8.4.0 → 8.5.0

package/package.json

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

package/src/kernel/pane.ts

@@ -219,9 +219,10 @@ export interface PaneKernel extends PaneHandle {
    *  gets when the closing transition ends. */
   setHidden(value: boolean): void;
   /** The shell is about to slide this pane's box: nothing it measures from now
-   *  until its viewport settles is final, and the settle sends the size. Live
-   *  panes only: a failed pane is torn down before the split next opens. */
-  holdGeometry(): void;
+   *  until its viewport settles after the returned release is final, and the
+   *  settle sends the size. Live panes only: a failed pane is torn down before
+   *  the split next opens. */
+  holdGeometry(): () => void;
   /** Whether this pane's input is a stop in the document's Tab order. On while
    *  the split is open and the pane shows a tab, so Tab runs left input, divider,
    *  right input, chrome; off otherwise, where typing or a click enters the one
@@ -1508,7 +1509,7 @@ function buildPaneInto(
       hidden = value;
     },
     holdGeometry() {
-      viewport.beginTransition();
+      return viewport.hold();
     },
     setTabStop(value) {
       input.tabIndex = value ? 0 : -1;

package/src/kernel/shell.ts

@@ -508,7 +508,9 @@ function createShellInto(
     return cssTimeMs(win.getComputedStyle(shellRoot).getPropertyValue("--dur-standard"));
   }
   function slideFor(durationMs: number, tail: () => void): Slide {
+    let live = true;
     const stop = (): void => {
+      live = false;
       win.clearTimeout(timer);
       shellRoot.removeEventListener("transitionend", onEnd);
     };
@@ -518,12 +520,39 @@ function createShellInto(
     };
     const onEnd = (ev: TransitionEvent): void => {
       if (ev.target === shellRoot && ev.propertyName === "grid-template-columns") {
+        settleWhenStill();
+      }
+    };
+    // Removing the slide class does not stop a running transition (the fallback
+    // `transition-property: all` still matches it), so a slide whose first frame
+    // came late would finish while its columns still move, announcing mid-slide
+    // sizes. Nor is every transitionend this slide's: the previous slide's can
+    // land after its finish. So the timer and transitionend settle only once no
+    // columns transition runs; a direct `settle()` still ends the slide at once.
+    const settleWhenStill = (): void => {
+      if (!live) {
+        return;
+      }
+      // A completed transition can stay listed until the next style change event
+      // (https://www.w3.org/TR/css-transitions-1/#complete); waiting on its settled
+      // `finished` would rerun this check in microtasks forever.
+      const running = shellRoot
+        .getAnimations()
+        .filter(
+          (a) =>
+            a.playState === "running" &&
+            "transitionProperty" in a &&
+            a.transitionProperty === "grid-template-columns",
+        );
+      if (running.length === 0) {
         settle();
+        return;
       }
+      void Promise.allSettled(running.map((a) => a.finished)).then(settleWhenStill);
     };
     shellRoot.addEventListener("transitionend", onEnd);
     // An engine that applies a track-list change at once fires no transitionend.
-    const timer = win.setTimeout(settle, durationMs);
+    const timer = win.setTimeout(settleWhenStill, durationMs);
     return { settle, abort: stop };
   }
   function beginClosing(toward: 0 | 1, durationMs: number, tail: () => void): void {
@@ -546,9 +575,12 @@ function createShellInto(
    *  start shows the new pane 0 px wide, so the panes hold their geometry until
    *  it is over, or a socket opening meanwhile would size its PTY to that. */
   function beginOpening(durationMs: number): void {
-    for (const p of builtPanes()) {
-      p.holdGeometry();
-    }
+    const holds = builtPanes().map((p) => p.holdGeometry());
+    const release = (): void => {
+      for (const r of holds) {
+        r();
+      }
+    };
     shellRoot.style.setProperty("--wt-split-ratio", "1");
     // The read commits the start as a style of its own; without it the slide
     // would start from the closed view's single column.
@@ -560,6 +592,7 @@ function createShellInto(
       for (const p of builtPanes()) {
         p.announceSize();
       }
+      release();
     });
     opening = {
       settle: slide.settle,
@@ -567,6 +600,7 @@ function createShellInto(
         slide.abort();
         opening = null;
         shellRoot.classList.remove("wt-split-opening");
+        release();
       },
     };
     applyRatioVar();

package/src/viewport.ts

@@ -79,8 +79,11 @@ export interface Viewport {
   /** Whether a transition is in flight, so geometry measured now is provisional. */
   isInTransition(): boolean;
   /** Start a transition as a resize would, for a box about to move that has not
-   *  moved yet; it settles SETTLE_MS after the last resize, as any other does. */
-  beginTransition(): void;
+   *  moved yet, and keep it from settling until the returned release runs (which
+   *  is idempotent). It settles SETTLE_MS after the last hold or resize, as any
+   *  transition does; a settle that came due while held runs SETTLE_MS after the
+   *  last release instead. */
+  hold(): () => void;
   /** Release every listener and observer and stop the settle timer. */
   teardown(): void;
 }
@@ -185,6 +188,7 @@ export function createViewport(opts: ViewportOptions): Viewport {
   // page's.
   const win = windowOf(termWrap.ownerDocument);
   let inTransition = false;
+  let holds = 0;
   let settleTimer: number | null = null;
   const cleanup: (() => void)[] = [];
   function release(): void {
@@ -203,6 +207,9 @@ export function createViewport(opts: ViewportOptions): Viewport {
     }
     settleTimer = win.setTimeout(() => {
       settleTimer = null;
+      if (holds > 0) {
+        return;
+      }
       inTransition = false;
       // Read at SETTLE, not at the start of the burst: every further event
       // re-arms the timer without re-reading, and on iOS a wake emits a stream
@@ -215,6 +222,22 @@ export function createViewport(opts: ViewportOptions): Viewport {
       opts.onSettled(stillFollowing);
     }, SETTLE_MS);
   }
+  function hold(): () => void {
+    holds++;
+    startTransition();
+    let held = true;
+    return () => {
+      if (!held) {
+        return;
+      }
+      held = false;
+      holds--;
+      // A settle that came due while held was dropped: start it again.
+      if (holds === 0 && inTransition && settleTimer === null) {
+        startTransition();
+      }
+    };
+  }
 
   // iOS shrinks (and can offset) the visual viewport without resizing the layout
   // viewport, so a `position: fixed; inset: 0` box keeps the full-screen height
@@ -267,7 +290,7 @@ export function createViewport(opts: ViewportOptions): Viewport {
 
   return {
     isInTransition: () => inTransition,
-    beginTransition: startTransition,
+    hold,
     teardown: release,
   };
 }