@cplieger/web-terminal-ui 5.3.1 → 5.4.0

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,81 @@
   }
 }
 
-/* The tab being dragged (reorder) dims while it moves. */
-:where(.wt-root) .wt-tab-dragging {
-  opacity: 0.5;
+/* ===== Pending drop edge (tabs feature, desktop drag) =====
+   The exact boundary the dragged tab will be inserted at, marked while the hold runs
+   and filling from nothing to full over the hold's own duration (the tabs feature
+   sets the duration inline from REORDER_DWELL_MS, so the bar and the timer cannot
+   drift apart).
+
+   It rides the neighbouring chip: the leading edge of the chip being pushed aside,
+   or the trailing edge of the last chip when the tab is heading past the end of the
+   strip (.wt-tab-dwell-end). The chip is already position: relative for its progress
+   bar, and its overflow clip keeps the rail inside the same rounded padding box.
+
+   3px of solid accent rather than a dashed treatment: the dashed vocabulary belongs
+   to the SLOT, which is a destination that has been decided. This is a boundary
+   still being chosen, so it reads as a caret. inset-block keeps it clear of the
+   chip's rounded corners without needing its own radius arithmetic. */
+:where(.wt-root) .wt-tab-dwell {
+  position: absolute;
+  inset-block: var(--sp-1);
+  inset-inline-start: 0;
+  width: 3px;
+  border-radius: var(--radius-sm);
+  background: var(--accent);
+  /* Grows upward like a gauge. The feature writes scaleY inline; a transform on this
+     element cannot collide with the chip's own animations because it is a separate
+     element, which is the whole reason the rail is not a pseudo-element on the chip. */
+  transform-origin: bottom;
+  pointer-events: none;
+}
+
+:where(.wt-root) .wt-tab-dwell-end {
+  inset-inline: auto 0;
+}
+
+/* ===== 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.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": "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"