@cplieger/web-terminal-ui 5.3.1 → 5.4.1

package/README.md

@@ -425,4 +425,4 @@ This project was built with AI-assisted tooling using [Claude](https://claude.co
 
 ## License
 
-GPL-3.0-or-later. See [LICENSE](LICENSE).
+MPL-2.0. See [LICENSE](LICENSE).

package/css/01-scope.css

@@ -15,6 +15,16 @@
 .wt-root.wt-viewport {
   position: fixed;
   inset: 0;
+  /* Clip like the container mode below, so the two layout modes agree. Inert
+     today: the root's box IS the viewport here and page.css already hides
+     document overflow, so nothing can currently paint outside it, and
+     position:fixed descendants escape a clip regardless. It exists so the
+     asymmetry cannot be mistaken for a deliberate difference, and so a future
+     transform on .term (see docs/tab-switch-repaint.md) is bounded by a
+     declaration rather than by the viewport happening to coincide with the box.
+     overflow:clip specifically, not hidden: no scroll container, no block
+     formatting context, nothing programmatically scrollable. */
+  overflow: clip;
 }
 
 .wt-root.wt-container {

package/css/30-tabs.css

@@ -495,9 +495,48 @@
   }
 }
 
-/* The tab being dragged (reorder) dims while it moves. */
-:where(.wt-root) .wt-tab-dragging {
-  opacity: 0.5;
+/* ===== Reorder drop slot (tabs feature, desktop drag) =====
+   The dragged chip stays in the strip's flow for the whole gesture and renders as
+   the SLOT it will land in: an empty dashed outline in the accent over a faint
+   accent wash. It used to be a dimmed copy of the tab, and with a solid drag
+   image already following the pointer that put three tab-shaped things on screen
+   at once — the slot it left, the chip it hovered, and the copy under the
+   pointer — none of which read as the answer to "where will this land". One
+   solid thing under the pointer, one hollow thing where it will land.
+
+   Staying in the flow is what keeps the geometry honest: the slot IS the gap,
+   exactly one chip wide, so nothing has to synthesise a placeholder box or agree
+   with the chip about how wide a tab is. It is also what lets the reorder animate
+   at all — the strip's other chips slide around a real box (index.ts, commitSlot).
+
+   The outline is the chip's OWN reserved border switched to `dashed`: every tab
+   carries a transparent 1px border for exactly this kind of toggle (see .wt-tab),
+   so the treatment costs no layout and lands on the same --radius-inner corners
+   as every other chip state.
+
+   Scoped through .wt-tab-scroll on purpose, and it is not decoration. A drag
+   reorder exists only inside the desktop scroller, and the extra compound is what
+   carries the rule past the two rungs it has to out-rank without any of the usual
+   tricks: the press rung (.wt-tab:not(.wt-tab-active):active, which a mousedown
+   that starts a drag leaves applied for the whole gesture in Blink, so the slot
+   would otherwise paint as a pressed tab under the dashes), and the per-status
+   dot rules far below, which would otherwise keep the status dot lit inside an
+   outline that is meant to be empty. */
+:where(.wt-root) .wt-tab-scroll .wt-tab.wt-tab-dragging {
+  background: color-mix(in oklch, var(--accent) 12%, transparent);
+  border-color: color-mix(in oklch, var(--accent) 60%, transparent);
+  border-style: dashed;
+}
+
+/* Nothing inside the slot: the outline is the whole message, and the tab's
+   identity is already in the drag image under the pointer. Fading the CONTENT
+   rather than the chip is what keeps the dashes at full strength — an opacity on
+   the chip dimmed the outline along with everything else, which is exactly how
+   the old treatment ended up reading as a faded tab rather than as a gap. The dot
+   is included by inheritance: opacity multiplies onto its glow and ripple
+   pseudo-elements, so one declaration silences the whole dot. */
+:where(.wt-root) .wt-tab-scroll .wt-tab.wt-tab-dragging > * {
+  opacity: 0;
 }
 
 /* ===== Inline rename (tabs feature) =====

package/css/40-animations.css

@@ -27,15 +27,48 @@
     display var(--dur-standard) allow-discrete;
 }
 
-/* Tab chrome micro-transitions (hover/active color shifts). */
+/* Tab chrome micro-transitions (hover/active colour shifts, and a chip's hand-off
+   into the reorder drop slot). border-color rides along because the slot IS a
+   border-colour change plus a dashed style (30-tabs.css): without it the chip
+   snapped from tab to outline in a single frame, which is the same instant
+   rearrangement the reorder preview exists to remove. The dash pattern itself still
+   appears at once — border-style does not interpolate — so the slot reads as an
+   outline drawing itself in rather than as a tab bleaching out. */
 :where(.wt-root.wt-animate) .wt-tab,
 :where(.wt-root.wt-animate) .wt-tab-close,
 :where(.wt-root.wt-animate) .wt-tab-new {
   transition:
     background-color var(--dur-micro) var(--ease-standard),
+    border-color var(--dur-micro) var(--ease-standard),
     color var(--dur-micro) var(--ease-standard);
 }
 
+/* The chip's content dissolves as it becomes the drop slot, and comes back when the
+   drag ends (30-tabs.css fades every child to nothing). One rule on the children,
+   not four per-part rules: the label, the status dot, the progress bar and the close
+   all leave together, because they leave for one reason. */
+:where(.wt-root.wt-animate) .wt-tab > * {
+  transition: opacity var(--dur-micro) var(--ease-standard);
+}
+
+/* The drop slot fades in at each position the reorder preview commits it to
+   (index.ts, flashSlot). The chips it displaces SLIDE there — a JS FLIP, because the
+   distance is only known at commit time — while the slot itself deliberately does
+   not travel: a hole crossing the strip alongside the solid drag image the pointer
+   is already carrying is two things moving at once, which is what made the old
+   instant reorder unreadable. It appears where the strip has just opened, which is
+   the frame that says the reorder took. */
+:where(.wt-root.wt-animate) .wt-tab-slotted {
+  animation: wt-slot-in var(--dur-enter) var(--ease-enter);
+}
+
+@keyframes wt-slot-in {
+  from {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+}
+
 /* New tab enters with a fade + scale-in. Only runtime-added tabs get
    .wt-tab-enter (the tabs feature's `started` gate). A closing tab is removed
    immediately with no exit animation, so the strip reflows in one frame (a

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@cplieger/web-terminal-ui",
-  "version": "5.3.1",
+  "version": "5.4.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": "GPL-3.0-or-later",
+  "license": "MPL-2.0",
   "exports": {
     ".": "./src/index.ts",
     "./startup-copy": "./src/kernel/startup-copy.ts",
@@ -40,7 +40,7 @@
     "verify": "bash scripts/verify.sh"
   },
   "peerDependencies": {
-    "@cplieger/web-terminal-engine": "^3.7.0"
+    "@cplieger/web-terminal-engine": "^3.10.0"
   },
   "overrides": {
     "qs": "^6.15.2"
@@ -50,19 +50,19 @@
     "@stryker-mutator/core": "9.6.1",
     "@stryker-mutator/typescript-checker": "9.6.1",
     "@stryker-mutator/vitest-runner": "9.6.1",
-    "@types/node": "25.9.5",
+    "@types/node": "26.2.0",
     "@typescript/native": "npm:typescript@7.0.2",
     "@vitest/coverage-v8": "4.1.10",
     "eslint": "10.8.1",
     "fast-check": "4.9.0",
     "happy-dom": "20.11.2",
     "html-validate": "11.6.2",
-    "knip": "6.32.0",
+    "knip": "6.32.1",
     "prettier": "3.9.6",
     "stylelint": "17.14.1",
     "stylelint-config-standard": "40.0.0",
     "typescript": "npm:@typescript/typescript6@6.0.2",
-    "typescript-eslint": "8.66.0",
+    "typescript-eslint": "8.67.0",
     "vitest": "4.1.10"
   },
   "publishConfig": {