@cplieger/web-terminal-ui 8.1.0 → 8.1.2

package/README.md

@@ -164,7 +164,7 @@ are importable from `…/features/<name>` (`clipboard`, `context-menu`,
   background activity that outlives a turn (a workflow run, in the
   `web-terminal-kiro` case). It is a rounded-square ring rather than a disc, so
   it does not read as another status dot, and band width carries its three
-  states: a 2px band with a breathing glow while a background task is running, a
+  states: a 2px band whose centre closes and reopens while a background task is running, a
   1px band with a halo while one is paused and resumable, and a 2px band with
   that same halo while one is blocked on the user. The state and the count are
   announced in the tab's accessible name and repeated as the mark's hover
@@ -488,15 +488,17 @@ Three ways in, all in the tab chrome, none a key chord:
   Shift+F10 on the focused tab, where the browser raises the menu event; Safari
   binds no key to it, so a keyboard-only person there reaches the menu through
   an assistive technology's own command). A snapped tab shows on the named side
-  and its pane is selected. A tab the other pane shows trades places with the
-  tab on the named side, so both stay on screen (into an empty pane it simply
-  moves); any other tab there becomes an ordinary tab. Snapping a tab onto the
-  side that already shows it changes nothing.
+  and its pane is selected. When the snap opens the split, the other pane keeps
+  the tab the single view showed (or, when that is the tab being moved, its
+  split partner), so neither pane opens empty. A tab the other pane shows trades
+  places with the tab on the named side, so both stay on screen (into an empty
+  pane it simply moves); any other tab there becomes an ordinary tab. Snapping a
+  tab onto the side that already shows it changes nothing.
 - **Dragging a tab** out of the row onto either pane of the terminal area,
   following the same rule. While the drag lasts the pane under the pointer is
-  highlighted; the two highlights match the panes' widths at the divider's
-  position (the two halves while the split is closed), and a release decides
-  by the divider's centre.
+  highlighted; each highlight covers that pane's terminal area at the divider's
+  position (the two halves while the split is closed), inset a little with the
+  tab chips' rounded border, and a release decides by the divider's centre.
 
 A tab click follows one rule: an empty pane fills first, otherwise the selected
 pane's tab is replaced. A new tab ("+") also fills an empty pane first, but with

package/css/00-tokens.css

@@ -178,7 +178,7 @@
      with nothing enforcing it.
      Shared with marotte's `--dot-beat-dur` (01-tokens.css) for the reason the
      --status-* inks are: one signal across the two apps, beat included. */
-  --dot-beat-dur: 1.2s;
+  --dot-beat-dur: 1.6s;
   --dur-standard: 0.2s;
   --dur-enter: 0.25s;
   --dur-exit: 0.15s;

package/css/30-tabs.css

@@ -993,7 +993,8 @@
    three states the channel is BAND WIDTH, in a deliberate 2:1 ratio, because
    waiting and input share one ink.
 
-   A literal 3px radius, not --radius-sm: the smallest token rung is 4px, which on
+   A 3px radius of its own (--wt-mark-radius, which the working state's clip reads
+   too), not --radius-sm: the smallest token rung is 4px, which on
    a 9px box reads as a circle and defeats the silhouette.
 
    It costs ZERO layout while no state is set. The footprint cancel is a negative
@@ -1010,12 +1011,13 @@
   /* waiting and input both speak through this ink and separate by band alone;
      working overrides it. */
   --wt-mark-ink: var(--status-input);
+  --wt-mark-radius: 3px;
 
   width: var(--wt-mark-size);
   height: var(--wt-mark-size);
   flex: none;
   position: relative;
-  border-radius: 3px;
+  border-radius: var(--wt-mark-radius);
   /* Zero-width at rest, so the ring is drawn entirely by a state's band. The
      colour rides --wt-mark-ink here rather than in each state, so a state sets
      one variable and one width. */
@@ -1051,86 +1053,64 @@
     opacity var(--dur-enter) var(--ease-enter) var(--dur-standard);
 }
 
-/* Working: the heavier bare band, plus a breathing glow. Its own compositing
-   layer for the reason the status dot's rule records — a nested overlay layer
-   snaps to device pixels independently of a fractional parent position, which at
-   this size reads as an off-centre pulse. */
+/* Working: the heavier bare band, plus a hole that closes on the beat. Its own
+   compositing layer so the overlay layers snap against the ring rather than the
+   page: their offset from it is whole pixels (the rounded inset below), so the
+   closing circle stays centred however the chip centres a 9px mark (17.5px down). */
 :where(.wt-root) .wt-activity-mark[data-activity="working"] {
   --wt-mark-ink: var(--status-working);
-  /* The band, named because the MASK below has to know it: the overlay's hole is
-     the mark's inradius less this. Paired with the declaration it describes so the
-     two cannot drift apart on width. */
+  /* The band, named because the closing overlay below derives the hole from it. */
   --wt-mark-band: 2px;
 
   border-width: var(--wt-mark-band);
   transform: translateZ(0);
+  /* The overlays' clip. `overflow` clips at the padding box, which under border-box
+     sizing IS the hole; where supported the clip is the mark's own outline instead,
+     because the hole's rounded inner corners as a clip edge leave an anti-aliased
+     seam against the band's own (measured at dpr 2: four pixels 15% dark at the
+     peak). Over the band the ink paints the band's own colour. */
+  overflow: hidden;
 }
 
-/* The breath: a pre-painted radial animating OPACITY only, never colours, so the
-   beat costs compositing rather than a repaint per frame for as long as a
-   background task runs (the battery reason the dot's glow overlay records).
-
-   PLUS A MASK, which is the one thing a ring needs and a disc does not, and whose
-   absence was a real defect rather than a missing nicety. Over a solid disc the
-   overlay's bright core has almost no headroom above its own backdrop; over a
-   ring's transparent HOLE it has all of it, so an unmasked core FILLED the hole at
-   the peak and the mark rendered as a solid rounded square. That is the one thing
-   this element may never be: the mark and the activity dot 8px away share their ink
-   at zero hue distance, so the ring-against-disc silhouette is the entire WCAG
-   1.4.1 channel between them, and a fill collapses it for the brightest third of
-   every cycle. Masked, the beat lights the BAND and the hole's four corners, so
-   what a reader sees is the hole morphing between a square and the circle inscribed
-   in it — the ring survives the peak.
-
-   EVERY NUMBER HERE IS A RELATION, and the port that copied marotte's LITERALS is
-   what left this rule running with nothing visible to show. Two of them were
-   arithmetic for an 8px mark with a 2px band: `inset: -1px` put the overlay on that
-   mark's own border box, and the core stop `70%` is where the core reaches the
-   hole's CORNER there — sqrt(2) * (size / 2 - band) / (size / 2) = 70.71%. At 9px
-   and 2px the same relation is 78.57%, so the copied 70% ended the solid core at
-   2.45px while the mask opens only at 2.5px: core and visible mask did not
-   intersect at all, the beat lit nothing the mask kept, and 4 pixels of a 9x9 mark
-   moved between trough and peak against marotte's 20 (measured at dpr 1, both
-   marks, sRGB). Written as relations they survive any size: the inset IS the band,
-   the core stop IS the hole's corner radius, the mask's hole IS its inradius. So
-   port marotte's `.tab-run-dot` (`12-tabs.css`, "THE GLOW BEAT") — the same mark
-   solving the same problem, with the mask from the start — by its relations, never
-   by its numbers. sqrt(2) is spelled to four decimals because the synced stylelint
-   sets `number-max-precision: 4` outside colour functions.
-
-   NOTHING HERE EXTENDS PAST THE MARK. `box-sizing: border-box` (01-scope.css) puts
-   the padding box — an absolutely positioned child's containing block — INSIDE the
-   band, so `inset: calc(-1 * var(--wt-mark-band))` grows the overlay back out to
-   exactly the mark's own border box and no further. Read it as "fill the mark", not
-   as "overhang it": a larger inset would reach outside, where a feathered edge's
-   visible radius moves with the beat and renders differently at every pixel
-   density. `border-radius: 50%` is the same discipline on the last literal, and it
-   is inert BY CONSTRUCTION rather than by measurement, which is why no assertion
-   pins it: for side S and radius r the clip's 45° boundary is (S/2 - r) * sqrt(2) + r,
-   monotonically decreasing in r, so the inscribed circle is the WORST case for
-   reaching the hole's corners — and it still clears them for any band at or above
-   S/2 * (1 - 1/sqrt(2)), 1.32px here against 2px. Do not assert it, and do not drop
-   it either: it is what keeps a literal radius out of a rule whose whole defect was
-   literals. */
+@supports (clip-path: inset(0 round 1px)) {
+  :where(.wt-root) .wt-activity-mark[data-activity="working"] {
+    overflow: visible;
+    clip-path: inset(0 round var(--wt-mark-radius));
+  }
+}
+
+/* The close: the square hole fills from its corners, passes through its inscribed
+   circle and shrinks to nothing, then reopens. Compositor-only: ::before is ink
+   around a transparent circle of the hole's corner radius sqrt(2) * h, scaled down
+   to --wt-mark-close and clipped by the parent; half-size (h + 1px) /
+   --wt-mark-close keeps its edge under the band at the peak (a 71px layer, ~20 KB
+   at dpr 1). Scaling leaves a 0.35px pinhole that reads as a dark pixel, so ::after
+   fades a fill over the hole as the scale bottoms out. Every length is a relation to
+   --wt-mark-size and --wt-mark-band (sqrt(2) to the stylelint's 4 decimals). */
 :where(.wt-root) .wt-activity-mark[data-activity="working"]::before {
+  --wt-mark-hole: calc(var(--wt-mark-size) / 2 - var(--wt-mark-band));
+  --wt-mark-close: 0.1;
+
   content: "";
   position: absolute;
-  inset: calc(-1 * var(--wt-mark-band));
-  border-radius: 50%;
+  inset: round(down, var(--wt-mark-hole) - (var(--wt-mark-hole) + 1px) / var(--wt-mark-close), 1px);
   background: radial-gradient(
-    closest-side,
-    color-mix(in oklch, var(--wt-mark-ink) 78%, #fff) 0
-      calc(1.4142 * (var(--wt-mark-size) / 2 - var(--wt-mark-band))),
-    transparent 92%
+    circle,
+    transparent 0 calc(1.4142 * var(--wt-mark-hole)),
+    var(--wt-mark-ink) calc(1.4142 * var(--wt-mark-hole) + 0.5px)
   );
-  opacity: 0;
   animation: wt-activity-breath var(--dot-beat-dur) ease-in-out infinite;
+  will-change: transform;
+}
+
+:where(.wt-root) .wt-activity-mark[data-activity="working"]::after {
+  content: "";
+  position: absolute;
+  inset: -1px;
+  background: var(--wt-mark-ink);
+  opacity: 0;
+  animation: wt-activity-seal var(--dot-beat-dur) ease-in-out infinite;
   will-change: opacity;
-  mask: radial-gradient(
-    closest-side,
-    transparent 0 calc(var(--wt-mark-size) / 2 - var(--wt-mark-band)),
-    #000 calc(var(--wt-mark-size) / 2 - var(--wt-mark-band))
-  );
 }
 
 /* Waiting: the thin band plus a static halo. Stopped and resumable, nobody being
@@ -1205,25 +1185,30 @@
   }
 }
 
-/* The activity mark's breath: rest, one swell, rest. Opacity only — a colour
-   keyframe here would reintroduce the per-frame repaint this shape exists to avoid.
-
-   The dot's glow ENVELOPE, at a lower CEILING, and the ceiling is where the two
-   deliberately part. 0.55 rather than 1 is marotte's number for the same mark
-   (`12-tabs.css`), and it is what keeps a strip of busy tabs reading as one pulse
-   instead of a row of flashes — the dot can afford 1 because its overlay lifts a
-   solid disc of its own hue and has almost no headroom above its own backdrop,
-   while this one is masked onto a 2px band over the page and has all of it. Used by
-   the mark alone, so the value moves nothing else. */
+/* The activity mark's close: open, shut, open, on the dot glow's envelope so the
+   hole shuts as the disc beside it peaks. Transform only, so it never repaints. */
 @keyframes wt-activity-breath {
   0%,
   70%,
+  100% {
+    transform: scale(1);
+  }
+
+  35% {
+    transform: scale(var(--wt-mark-close));
+  }
+}
+
+@keyframes wt-activity-seal {
+  0%,
+  20%,
+  50%,
   100% {
     opacity: 0;
   }
 
   35% {
-    opacity: 0.55;
+    opacity: 1;
   }
 }
 
@@ -1270,13 +1255,14 @@
      by band alone (3px bare / 1px halo / 2px halo).
 
      Re-pointing --wt-mark-band rather than declaring `border-width` keeps the number
-     in the one place the state's own rule reads it from, the mask's divisor included
+     in the one place the state's own rule reads it from, the overlay's hole included
      — which is moot here only because the overlay is gone one rule below. */
   :where(.wt-root) .wt-activity-mark[data-activity="working"] {
     --wt-mark-band: 3px;
   }
 
-  :where(.wt-root) .wt-activity-mark[data-activity="working"]::before {
+  :where(.wt-root) .wt-activity-mark[data-activity="working"]::before,
+  :where(.wt-root) .wt-activity-mark[data-activity="working"]::after {
     content: none;
   }
 }

package/css/32-split.css

@@ -11,6 +11,12 @@
     calc((100% - var(--wt-split-gutter)) * var(--wt-split-ratio)),
     1px
   );
+  /* Content's bottom edge: tab bar plus safe area, or switcher reserve plus
+     keyboard, whichever is lower. Shared by the divider and the drop halves. */
+  --wt-split-bottom: max(
+    calc(var(--wt-tabbar-h, 0px) + var(--safe-bottom, 0px)),
+    calc(var(--wt-reserve-bottom, 0px) + var(--kb-inset, 0px))
+  );
 
   display: grid;
   grid-template-columns: minmax(0, 1fr);
@@ -107,10 +113,7 @@
   justify-self: center;
   inline-size: 24px;
   margin-inline: -7px;
-  margin-block-end: max(
-    calc(var(--wt-tabbar-h, 0px) + var(--safe-bottom, 0px)),
-    calc(var(--wt-reserve-bottom, 0px) + var(--kb-inset, 0px))
-  );
+  margin-block-end: var(--wt-split-bottom);
   cursor: col-resize;
   touch-action: none;
   z-index: 4;
@@ -193,23 +196,30 @@
   pointer-events: none;
 }
 
+/* Confined to each pane's terminal box (--vv-top to --wt-split-bottom) so
+   neither half runs under the translucent strip. The --sp-2 inset is the
+   strip's own chip padding; the border reuses the active chip's tokens because
+   a half means "this pane will show the tab". */
 :where(.wt-root.wt-split.wt-drop-left)::before,
 :where(.wt-root.wt-split.wt-drop-right)::after {
   content: "";
   position: absolute;
-  inset-block: 0 var(--wt-tabbar-h, 0);
+  box-sizing: border-box;
+  inset-block: calc(var(--vv-top, 0px) + var(--sp-2)) calc(var(--wt-split-bottom) + var(--sp-2));
   background: color-mix(in oklch, var(--accent) 12%, transparent);
+  border: 1px solid var(--tab-active-border);
+  border-radius: var(--radius-inner);
   pointer-events: none;
   z-index: 5;
 }
 
 :where(.wt-root.wt-split.wt-drop-left)::before {
-  inset-inline-start: 0;
-  inline-size: var(--wt-split-left);
+  inset-inline-start: var(--sp-2);
+  inline-size: calc(var(--wt-split-left) - 2 * var(--sp-2));
 }
 
 :where(.wt-root.wt-split.wt-drop-right)::after {
-  inset-inline: calc(var(--wt-split-left) + var(--wt-split-gutter)) 0;
+  inset-inline: calc(var(--wt-split-left) + var(--wt-split-gutter) + var(--sp-2)) var(--sp-2);
 }
 
 :where(.wt-root.wt-split.wt-animate.wt-split-opening),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cplieger/web-terminal-ui",
-  "version": "8.1.0",
+  "version": "8.1.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": "MPL-2.0",

package/src/features/tabs/index.ts

@@ -106,10 +106,12 @@ export interface TabsApi {
    *  pane already shows has that pane selected instead. */
   switchTo(id: string): void;
   /** Show a tab on one side of the split, opening it when closed, and select its
-   *  pane. A tab the other pane shows trades places with the tab on that side
-   *  (or leaves its pane empty when the side showed none); any other tab there
-   *  becomes ordinary. A tab already shown on that side changes nothing. False
-   *  when refused: an unknown id, an invalid side, or a split the pane row is too
+   *  pane. Opening the split keeps the single view's tab on the other side — or,
+   *  when the moved tab IS it, its split partner — so neither pane opens empty. A
+   *  tab the other pane shows trades places with the tab on that side (or leaves
+   *  its pane empty when the side showed none); any other tab there becomes
+   *  ordinary. A tab already shown on that side changes nothing. False when
+   *  refused: an unknown id, an invalid side, or a split the pane row is too
    *  narrow to open. */
   snap(id: string, side: PaneSide): boolean;
   /** The current tabs, first-to-last by creation; `active` marks a tab a pane
@@ -1678,17 +1680,27 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
           return true;
         }
         const split = ctx.shell.split;
-        if (!split.isOpen() && (!split.canOpen() || !split.open())) {
+        const opening = !split.isOpen();
+        if (opening && (!split.canOpen() || !split.open())) {
           return false;
         }
         // Emptying the tab's old pane drops a keyboard its input held to the body.
         const typing = keyboardInPaneInput();
-        const displaced = from === null ? null : shownIn(side);
+        const displaced = shownIn(side);
         if (!showIn(side, id)) {
           return false;
         }
-        if (from !== null && displaced !== null) {
-          showIn(from, displaced, { keepSelection: true });
+        // Opening pairs the moved tab with the single view's tab, or its partner
+        // when they are one, so no pane opens empty; an open split only re-homes
+        // the displaced tab, into a pane the move emptied.
+        const back = displaced ?? (opening ? splitPartner(id) : null);
+        if (
+          (from !== null || opening) &&
+          back !== null &&
+          back !== id &&
+          shownIn(otherSide(side)) === null
+        ) {
+          showIn(otherSide(side), back, { keepSelection: true });
         }
         if (typing) {
           focusInput();
@@ -1702,20 +1714,19 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
           split.close();
           return;
         }
-        const partner = splitPartner();
+        const partner = splitPartner(selectedId());
         if (partner === null) {
           void create(true);
         } else if (split.open()) {
           showIn("right", partner, { keepSelection: true });
         }
       }
-      function splitPartner(): string | null {
-        const current = selectedId();
-        const used = recent.find((id) => id !== current && tabList.some((t) => t.id === id));
+      function splitPartner(of: string | null): string | null {
+        const used = recent.find((id) => id !== of && tabList.some((t) => t.id === id));
         if (used !== undefined) {
           return used;
         }
-        const at = tabList.findIndex((t) => t.id === current);
+        const at = tabList.findIndex((t) => t.id === of);
         return (tabList[at + 1] ?? tabList[at - 1])?.id ?? null;
       }