@cplieger/web-terminal-ui 8.1.0 → 8.1.1

package/README.md

@@ -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/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.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",

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;
       }