@cplieger/web-terminal-ui 5.4.0 → 5.4.2

package/css/30-tabs.css

@@ -495,39 +495,6 @@
   }
 }
 
-/* ===== 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

package/package.json

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

package/src/features/tabs/index.ts

@@ -43,8 +43,8 @@ import {
 } from "./model.js";
 import { browserNotifierEnv, createNotifier } from "./notify.js";
 import {
-  REORDER_DWELL_MS,
-  REORDER_LEAN_PX,
+  REORDER_MOVE_EPS_PX,
+  REORDER_REST_MS,
   REORDER_SETTLE_MS,
   REORDER_SHIFT_TRANS,
   REORDER_SLOT_FADE_MS,
@@ -666,27 +666,24 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
       let activeId: string | null = null;
       let draggingEl: HTMLElement | null = null;
       // --- Desktop reorder preview state (mechanism below, near dragTargetBefore) ---
-      // The chips currently carrying an inline transform: the lean during a hold,
-      // or the slide that commits it. One set, because both stages write the same
-      // two properties on the same elements and one settle function has to be able
-      // to hand every one of them back to the stylesheet.
+      // The chips currently carrying an inline displacement from the commit slide.
+      // A set plus one settle function, so whatever a slide wrote can always be handed
+      // back to the stylesheet — including when a second drag interrupts the first.
       const shifted = new Set<HTMLElement>();
       let shiftTimer: ReturnType<typeof setTimeout> | null = null;
-      // The pending slot and its hold. `dwellTimer !== null` is the only "a slot is
-      // pending" flag — `dwellBefore` cannot be one, because null is a legitimate
-      // value there meaning "past the last chip".
-      let dwellTimer: ReturnType<typeof setTimeout> | null = null;
-      let dwellBefore: HTMLElement | null = null;
+      // The slot waiting to open and the rest window that will open it.
+      // `restTimer !== null` is the only "a slot is pending" flag — `restBefore` cannot
+      // be one, because null is a legitimate value there meaning "past the last chip".
+      // restX is the last pointer position seen, which is how movement is told from
+      // stillness (see trackRest).
+      let restTimer: ReturnType<typeof setTimeout> | null = null;
+      let restBefore: HTMLElement | null = null;
+      let restX: number | null = null;
       // Whether a `drop` fired for the drag in flight. It is the exact signal for
       // "the user released deliberately" as opposed to "the drag was abandoned":
       // Escape and a refused release fire dragend with no drop at all. dragend
       // without it reverts the preview, which is the cancel this reorder never had.
       let dropped = false;
-      // The pending-drop rail: ONE element, moved to whichever edge the current hold
-      // is counting down on (see showDwellRail).
-      const dwellRail = document.createElement("span");
-      dwellRail.className = "wt-tab-dwell";
-      dwellRail.setAttribute("aria-hidden", "true");
       // The chip mid slot-fade, and the timer that ends it.
       let slotFadeEl: HTMLElement | null = null;
       let slotFadeTimer: ReturnType<typeof setTimeout> | null = null;
@@ -1826,7 +1823,7 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
         }
       }
 
-      // --- Desktop reorder preview: hold, lean, slide -------------------------
+      // --- Desktop reorder preview: sweep, rest, slide ------------------------
       //
       // The old reorder moved the dragged chip on EVERY dragover, so the strip
       // rearranged itself continuously under the pointer and — every chip being
@@ -1834,22 +1831,30 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
       // in. The chip you were dragging looked like the slot it left, the slot it
       // was over, and the slot it would end up in.
       //
-      // The reorder now runs in three stages, and the dragged chip stays in the
-      // flow throughout as the slot it will land in (`.wt-tab-dragging`, which
-      // 30-tabs.css renders as an empty dashed outline rather than a dimmed copy
-      // of the tab — the solid copy is the drag image under the pointer, and one
-      // of the two had to stop pretending to be the tab):
+      // The preview answers a MOVING pointer and a STOPPED one differently, and the
+      // dragged chip stays in the flow throughout as the slot it will land in
+      // (`.wt-tab-dragging`, which 30-tabs.css renders as an empty dashed outline
+      // rather than a dimmed copy of the tab — the solid copy is the drag image
+      // under the pointer, and one of the two had to stop pretending to be the tab):
       //
-      //  1. dragover picks a candidate slot and ARMS a hold. Nothing reorders.
-      //  2. Every chip the commit would displace LEANS a few px toward where it
-      //     is going, at once, so the hold reads as "held here, opening that way"
-      //     instead of as a second of nothing.
-      //  3. After REORDER_DWELL_MS on the same candidate the slot COMMITS: one
-      //     DOM move, the displaced chips slide from their old positions to their
-      //     new ones, and the slot fades in at its new home.
+      //  - SWEEPING across the strip rearranges NOTHING. Crossing five tabs used to
+      //    move all five, which is the whole complaint.
+      //  - COMING TO REST opens the slot (trackRest -> commitSlot): one DOM move,
+      //    the displaced chips slide from their old positions to their new ones, and
+      //    the slot fades in at its new home.
       //
-      // A release never waits for the hold: `drop` commits whatever slot is
-      // pending (flushDwell), so a fast drag-and-drop reorders exactly as before.
+      // Rest is DETECTED, not waited out: REORDER_REST_MS is re-armed by movement, so
+      // it expires a rest window after the last MOVEMENT rather than a fixed time
+      // after a decision. Two shapes were tried and removed before this one, and both
+      // failures are worth keeping: a fixed one-second HOLD (wrong shape for a direct
+      // manipulation — it delayed the one case that should be instant, and grew a
+      // progress bar to explain the wait, which is the tell that the wait should not
+      // have been there), and a sweep-time LEAN of the chips a commit would displace
+      // (it read as a second, competing preview and its distance from the real move
+      // was too small to tell them apart).
+      //
+      // A release never waits either: `drop` commits whatever slot is pending
+      // (flushRest), so dropping mid-sweep still lands the tab where it was headed.
       //
       // dropTargetBefore returns the first tab whose horizontal midpoint is past
       // x (the element the dragged tab should sit before), or null to drop at the
@@ -1859,8 +1864,8 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
       //
       // It hit-tests LAYOUT geometry (offsetLeft/offsetWidth), never
       // getBoundingClientRect. That is not an optimisation, it is what makes an
-      // animated reorder hit-testable at all: a rect read while a chip is mid-lean or
-      // mid-slide returns the INTERPOLATED position, so the preview's own motion feeds
+      // animated reorder hit-testable at all: a rect read while a chip is mid-slide
+      // returns the INTERPOLATED position, so the preview's own motion feeds
       // back into the decision that produced it and the strip oscillates between two
       // slots for as long as the pointer sits near a boundary. Layout offsets are the
       // chip's position in the FLOW, which a transform does not affect at all.
@@ -1932,163 +1937,70 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
         shifted.clear();
       }
 
-      // leanToward tips the chips a commit would displace a few px toward their
-      // destination, for as long as the hold lasts. No settle timer: the lean is a
-      // held state, not an animation with an end, and a timer that expired mid-hold
-      // would snap it away while the user is still waiting on it.
+      // trackRest is the whole gate, called on every dragover over the strip.
       //
-      // Chips that were leaning and no longer would be are written back to zero in
-      // the SAME pass, so a changed candidate eases from one lean into the other
-      // rather than snapping through rest first.
-      function leanToward(before: HTMLElement | null): void {
-        if (!draggingEl) {
-          return;
-        }
-        // The preference is read live, so it can flip mid-gesture. Clearing here rather
-        // than returning bare is what honours a mid-hold opt-in: a bare return would
-        // leave the lean already applied under the previous preference sitting there.
-        if (prefersReduce()) {
-          endShift();
+      // Sweeping and settling are DIFFERENT actions and get different answers. A
+      // travelling pointer rearranges nothing at all; the moment it comes to REST the
+      // slot opens.
+      //
+      // Rest is detected, not waited out: the timer is re-armed by MOVEMENT, so it
+      // expires a rest window after the last movement rather than a fixed time after a
+      // decision. The window has a hard FLOOR set by the platform rather than by taste —
+      // HTML5 drag-and-drop only guarantees a `dragover` every 350ms, so a window at or
+      // below that cadence expires between two events of a fast sweep and commits every
+      // slot the pointer crosses (see REORDER_REST_MS).
+      function trackRest(clientX: number): void {
+        const dragged = draggingEl;
+        if (!dragged) {
           return;
         }
-        const chips = [...scroller.querySelectorAll<HTMLElement>(".wt-tab")];
-        const from = chips.indexOf(draggingEl);
-        const to = before === null ? chips.length : chips.indexOf(before);
-        if (from < 0 || to < 0) {
+        const moved = restX === null || Math.abs(clientX - restX) > REORDER_MOVE_EPS_PX;
+        restX = clientX;
+        const before = dropTargetBefore(clientX);
+        // Already the slot the tab holds, so there is nothing to preview or commit.
+        // Withdraw anything pending: the pointer came back.
+        if (before === dragged || before === dragged.nextElementSibling) {
+          cancelRest();
           return;
         }
-        // Moving right past the chips in between shifts them LEFT, and moving left
-        // shifts the chips it displaces RIGHT — the direction the user reads as
-        // "that tab is getting out of the way".
-        const movers = from < to ? chips.slice(from + 1, to) : chips.slice(to, from);
-        const dx = from < to ? -REORDER_LEAN_PX : REORDER_LEAN_PX;
-        const next = new Map<HTMLElement, number>();
-        for (const el of movers) {
-          next.set(el, dx);
-        }
-        for (const el of shifted) {
-          if (!next.has(el)) {
-            next.set(el, 0);
+        restBefore = before;
+        // Movement pushes the commit out; stillness lets the armed timer run down to it.
+        // A stationary pointer that has nothing armed still needs one — a browser may
+        // deliver dragover repeatedly at an unchanged position, and the first of those is
+        // the only signal that the pointer arrived and stopped.
+        if (moved || restTimer === null) {
+          if (restTimer !== null) {
+            clearTimeout(restTimer);
           }
+          restTimer = setTimeout(() => {
+            restTimer = null;
+            const target = restBefore;
+            restBefore = null;
+            commitSlot(target);
+          }, REORDER_REST_MS);
         }
-        applyShift(next, REORDER_SHIFT_TRANS);
-      }
-      // releaseLean eases every leaning chip back to rest and settles it, for when
-      // a candidate is withdrawn (the pointer came back to the committed slot, or
-      // left the strip). endShift would be wrong here: it strips the transition in
-      // the same write, so the lean would snap home.
-      function releaseLean(): void {
-        if (shifted.size === 0) {
-          return;
-        }
-        // ...except under reduced motion, where snapping IS the requested behaviour and
-        // easing back would animate the very motion the preference opted out of.
-        if (prefersReduce()) {
-          endShift();
-          return;
-        }
-        const rest = new Map<HTMLElement, number>();
-        for (const el of shifted) {
-          rest.set(el, 0);
-        }
-        applyShift(rest, REORDER_SHIFT_TRANS);
-        shiftTimer = setTimeout(endShift, REORDER_SETTLE_MS);
       }
-      // showDwellRail marks the exact boundary the tab will be inserted at, on the edge
-      // of the chip beside it, and fills that mark over the hold's own duration.
-      //
-      // Without it the hold was a second of near-silence, and the silence was worse than
-      // it sounds: the most authoritative thing on screen is the dashed slot, and the
-      // slot sits at the tab's CURRENT position, so the strongest cue was describing the
-      // state being left rather than the one being chosen. The 7px lean says which
-      // DIRECTION the strip will open without saying which boundary, and nothing at all
-      // said how much longer. The rail answers both of those, which makes the gesture
-      // read as three ordered states: the tab under the pointer, the edge about to open,
-      // then the gap that opened.
-      //
-      // The fill duration comes from REORDER_DWELL_MS, so the bar and the timer it
-      // depicts cannot drift apart. That is also why the rail is a real element rather
-      // than a pseudo-element on the chip: a pseudo-element's duration would have to
-      // travel through a custom property, which is a second place to keep in step.
-      function showDwellRail(before: HTMLElement | null): void {
-        // 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.
-        const host = before ?? scroller.querySelector<HTMLElement>(".wt-tab:last-of-type");
-        if (host === null || host === draggingEl) {
-          hideDwellRail();
+      function cancelRest(): void {
+        if (restTimer === null) {
           return;
         }
-        dwellRail.classList.toggle("wt-tab-dwell-end", before === null);
-        host.appendChild(dwellRail);
-        if (prefersReduce()) {
-          // No countdown, but the boundary still has to be legible, so show it filled.
-          dwellRail.style.transition = "none";
-          dwellRail.style.transform = "scaleY(1)";
-          return;
-        }
-        dwellRail.style.transition = "none";
-        dwellRail.style.transform = "scaleY(0)";
-        dwellRail.getBoundingClientRect(); // commit the from-state before the fill
-        dwellRail.style.transition = `transform ${String(REORDER_DWELL_MS)}ms linear`;
-        dwellRail.style.transform = "scaleY(1)";
+        clearTimeout(restTimer);
+        restTimer = null;
+        restBefore = null;
       }
-      function hideDwellRail(): void {
-        dwellRail.remove(); // idempotent: removing a detached node does nothing
-      }
-
-      // armDwell registers the slot a release would land in and starts (or keeps)
-      // the hold that commits it. Called on every dragover, so it must be cheap
-      // and idempotent for an unchanged candidate: restarting the timer on each
-      // event would mean a hand that never holds perfectly still could never
-      // commit anything, which is the bug a naive dwell always ships with.
-      function armDwell(before: HTMLElement | null): void {
-        if (!draggingEl) {
-          return;
-        }
-        // Already the committed slot, so there is nothing to preview. Withdraw any
-        // pending commitment — the pointer came back.
-        if (before === draggingEl || before === draggingEl.nextElementSibling) {
-          cancelDwell();
-          return;
-        }
-        if (dwellTimer !== null && before === dwellBefore) {
-          return; // same candidate, still holding
-        }
-        if (dwellTimer !== null) {
-          clearTimeout(dwellTimer);
-        }
-        dwellBefore = before;
-        leanToward(before);
-        showDwellRail(before);
-        dwellTimer = setTimeout(() => {
-          dwellTimer = null;
-          commitSlot(before);
-        }, REORDER_DWELL_MS);
-      }
-      function cancelDwell(): void {
-        hideDwellRail();
-        if (dwellTimer === null) {
-          return;
-        }
-        clearTimeout(dwellTimer);
-        dwellTimer = null;
-        dwellBefore = null;
-        releaseLean();
-      }
-      // flushDwell commits a pending slot at once. A release is a decision, so a
-      // drop does not have to wait out a hold it interrupted: this is what keeps a
-      // quick drag-and-drop reordering exactly as it did before the preview
-      // existed, and it is why the hold can afford to be a full second. Only a
-      // `drop` calls it; an abandoned drag reaches dragend without one and reverts.
-      function flushDwell(): void {
-        if (dwellTimer === null) {
+      // flushRest commits a pending slot at once, because a release is a decision. It is
+      // what stops the rest window from ever being felt as a floor on the gesture: drop
+      // mid-sweep and the tab still lands where it was headed. Only a `drop` calls it;
+      // an abandoned drag reaches dragend without one and reverts.
+      function flushRest(): void {
+        if (restTimer === null) {
           return;
         }
-        const before = dwellBefore;
-        clearTimeout(dwellTimer);
-        dwellTimer = null;
-        dwellBefore = null;
-        commitSlot(before);
+        const target = restBefore;
+        clearTimeout(restTimer);
+        restTimer = null;
+        restBefore = null;
+        commitSlot(target);
       }
 
       // flipTo runs a rearranging mutation and animates its result: every chip that
@@ -2108,18 +2020,18 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
         // belongs HERE and not only in the CSS, because these transitions are written
         // inline and no stylesheet gate can reach them; the switcher's release reel
         // guards its own call site the same way. Read live, so toggling the OS setting
-        // mid-drag takes effect on the next commit and strips any existing lean.
+        // mid-drag takes effect on the very next commit.
         if (prefersReduce()) {
           endShift();
           mutate();
           return;
         }
-        // FIRST — where each chip is right now, LEAN INCLUDED, so a slide continues
-        // out of the lean instead of jumping back through rest first. The switcher's
-        // release reel captures its live swipe preview the same way, and for the
-        // same reason. Rects, not layout offsets: this is VISUAL position, which is
-        // what the animation interpolates (hit-testing wants the opposite, see
-        // dropTargetBefore).
+        // FIRST — where each chip is right now, MID-SLIDE INCLUDED, so a second commit
+        // continues from wherever the first one got to instead of jumping back through
+        // rest first. The switcher's release reel captures its live swipe preview the
+        // same way, and for the same reason. Rects, not layout offsets: this is VISUAL
+        // position, which is what the animation interpolates (hit-testing wants the
+        // opposite, see dropTargetBefore).
         const first = new Map<HTMLElement, number>();
         for (const el of scroller.querySelectorAll<HTMLElement>(".wt-tab")) {
           if (el !== hold) {
@@ -2164,31 +2076,26 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
       // an OSC title) renders the committed order rather than flickering through
       // whatever the pointer is hovering.
       //
-      // Every early return releases the lean, and that is not belt-and-braces. The
-      // caller nulls `dwellTimer` BEFORE calling in (both the timer callback and
-      // flushDwell do), so by the time control arrives here `cancelDwell` has already
-      // become a no-op and nothing else would ever hand those chips back.
+      // The caller nulls `restTimer` BEFORE calling in (both the rest timer and
+      // flushRest do), so `cancelRest` is already a no-op by the time control arrives
+      // here: an early return must leave nothing behind that only cancelRest would
+      // Nothing exists pre-commit for it to have cleared, and a slide already in flight
+      // is owned by its own settle timer.
       function commitSlot(before: HTMLElement | null): void {
-        // The countdown is over however this call ends: the rail's whole job was to
-        // depict a hold that has now expired.
-        hideDwellRail();
         const dragged = draggingEl;
         if (!dragged?.isConnected) {
-          releaseLean();
-          return; // the dragged session was closed elsewhere mid-hold
+          return; // the dragged session was closed elsewhere mid-gesture
         }
-        // The hold captured a live DOM node a whole second ago. A session closed in
-        // another window (an SSE push, or the poll reconcile) removes chips through
-        // dropTab while this gesture is still open, so the reference node may be gone
-        // — and insertBefore throws NotFoundError on a reference that is no longer a
+        // The pending slot was chosen a rest window ago, and a session closed in another
+        // window (an SSE push, or the poll reconcile) removes chips through dropTab while
+        // this gesture is still open — so the reference node may be gone by now, and
+        // insertBefore throws NotFoundError on a reference that is no longer a
         // child, which would abandon the drop mid-way and leave DOM order and tabList
         // disagreeing. null stays legal: it means "past the last chip".
         if (before !== null && before.parentNode !== scroller) {
-          releaseLean();
           return;
         }
         if (before === dragged || before === dragged.nextElementSibling) {
-          releaseLean();
           return; // already in that slot
         }
         flipTo(() => {
@@ -2278,8 +2185,8 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
         }
       }
 
-      // endReorderPreview ends the GESTURE's state: the pending hold (easing any
-      // lean home as it goes) and the slot's fade.
+      // endReorderPreview ends the GESTURE's state: the pending rest and the slot's
+      // fade.
       //
       // It deliberately does NOT stop a slide that is already playing. A slide is an
       // animation with its own settle timer, and cutting it here is exactly what
@@ -2289,8 +2196,8 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
       // start from rest, and a torn-down feature may leave no inline style on an
       // element it no longer owns.
       function endReorderPreview(): void {
-        cancelDwell();
-        hideDwellRail(); // cancelDwell returns early when no hold was pending
+        cancelRest();
+        restX = null;
         endSlotFade();
       }
 
@@ -2299,9 +2206,9 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
       // sweep). Two removals matter, for different reasons:
       //
       //  - the pending reference chip: commitSlot would hand a detached node to
-      //    insertBefore. It guards that too, but standing the hold down here means the
-      //    user's lean comes off at the moment the target vanishes rather than a second
-      //    later, and a fresh dragover can arm a slot that still exists.
+      //    insertBefore. It guards that too, but withdrawing the pending slot here means
+      //    a fresh dragover arms against a chip that still exists rather than waiting out
+      //    a rest window against one that does not.
       //  - the DRAGGED chip: the gesture is over and there is no source left to deliver
       //    a dragend. A browser is not obliged to fire one for a removed source, and
       //    without this the feature would keep `draggingEl` set to a detached node for
@@ -2309,8 +2216,8 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
       //    in progress" and so would preventDefault every unrelated file or text drop on
       //    the page from then on.
       function abortReorderFor(removed: HTMLElement): void {
-        if (removed === dwellBefore) {
-          cancelDwell();
+        if (removed === restBefore) {
+          cancelRest();
         }
         if (removed !== draggingEl) {
           return;
@@ -3360,9 +3267,8 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
         }
         return false;
       });
-      // Arm the reorder preview while dragging a tab over the strip. This no longer
-      // reorders anything: it picks the slot a release would land in and starts the
-      // hold that commits it (see the reorder-preview block above).
+      // Drive the reorder preview while dragging a tab over the strip. A sweep only
+      // rearranges nothing; the slot opens when the pointer comes to rest (trackRest).
       bar.addEventListener("dragover", (e) => {
         if (!draggingEl) {
           return;
@@ -3371,7 +3277,7 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
         if (e.dataTransfer) {
           e.dataTransfer.dropEffect = "move";
         }
-        armDwell(dropTargetBefore(e.clientX));
+        trackRest(e.clientX);
       });
       // Commit on drop — and, load-bearing, CANCEL the drop's default action. An
       // uncancelled drop leaves the browser free to act on the drag payload
@@ -3386,16 +3292,17 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
         }
         e.preventDefault();
         dropped = true;
-        flushDwell(); // a release decides: do not make a fast drag wait out the hold
+        flushRest(); // a release decides: never make a drop wait on the rest window
         syncOrderFromDom();
         announceMoved(moved); // the ONE completed-move announcement per gesture
       });
-      // Leaving the strip stands a pending hold down. The document dragover below
-      // does this too and covers more ground, but it cannot cover the case that
-      // matters most here: the strip is docked at the viewport EDGE, so a pointer can
-      // leave it by leaving the window entirely, and then no other element in the
-      // document receives a dragover to notice with. Without this listener the hold
-      // would run to completion and commit a slot the pointer had already abandoned.
+      // Leaving the strip withdraws a pending slot. The document dragover below does
+      // this too and covers more ground, but it cannot cover the case that matters most
+      // here: the strip is docked at the viewport EDGE, so a pointer can leave it by
+      // leaving the window entirely, and then no other element in the document receives a
+      // dragover to notice with. A pointer that leaves the window is also, by definition,
+      // one that has stopped moving over the strip — so without this the rest window
+      // would run down and open a slot the pointer had already abandoned.
       //
       // relatedTarget is what makes dragleave usable at all: it fires on every
       // child-to-child transition inside the bar (chip to label, label to close), and
@@ -3408,7 +3315,7 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
         }
         const next = e.relatedTarget;
         if (next === null || !bar.contains(next as Node)) {
-          cancelDwell();
+          cancelRest();
         }
       });
       // A tab released anywhere OTHER than the strip — over the terminal, over
@@ -3435,17 +3342,17 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
           // refused release fell through to dragend and reverted. That distinction is
           // invisible to the person doing the dragging.
           //
-          // So: leave `dropped` false, stand the hold down, and let dragend run the
+          // So: leave `dropped` false, withdraw anything pending, and let dragend run the
           // revert. Nothing is lost silently — the revert animates and announces, so a
           // mis-release reads as "that did not take" rather than as a mystery.
-          cancelDwell();
+          cancelRest();
           return;
         }
-        // dragover, off the strip: no candidate slot exists out here, so stand a
-        // pending hold down rather than let it open a gap for a target the pointer
-        // has already left. A slot already COMMITTED stays put; the pointer may yet
-        // come back onto the strip and release there.
-        cancelDwell();
+        // dragover, off the strip: no candidate slot exists out here, so withdraw a
+        // pending one rather than let the rest window open a gap for a target the pointer
+        // has already left. A slot already COMMITTED stays put; the pointer may yet come
+        // back onto the strip and release there.
+        cancelRest();
       };
       document.addEventListener("dragover", onDocTabDrop);
       document.addEventListener("drop", onDocTabDrop);

package/src/features/tabs/strip.ts

@@ -21,29 +21,29 @@ import { statusPhrase, statusRevealsDot } from "./model.js";
 // motion is spelled in — index.ts owns the mechanism, strip.ts owns the values,
 // the same split switcher.ts keeps for the mobile swipe.
 
-/** How long (ms) the pointer holds over one candidate slot before the strip
- *  opens it.
+/** The quiet window (ms) that means the pointer has STOPPED. When it elapses with no
+ *  movement, the strip opens the slot the pointer is over.
  *
- *  Long on purpose. A sweep across a six-tab strip crosses five slots, and
- *  committing each one in passing is what made the old reorder unreadable: the
- *  strip rearranged itself continuously and the user chose a slot by stopping the
- *  mouse at the right millisecond. A hold is a deliberate act, so the strip only
- *  rearranges where the pointer actually rests.
+ *  This is a rest detector, not a hold: it is re-armed by MOVEMENT, so it expires a
+ *  rest window after the last movement rather than a fixed time after a decision.
+ *  Sweeping the strip rearranges nothing; stopping is what commits.
  *
- *  It costs a fast drag nothing, because a release COMMITS the pending slot
- *  (flushDwell) instead of discarding it: drop early and the reorder lands
- *  immediately, exactly as it did before the preview existed. The hold is what
- *  buys the animation, not a floor on the gesture. */
-export const REORDER_DWELL_MS = 1000;
-
-/** How far (px) each chip a commit would displace leans toward its destination
- *  while the hold runs.
+ *  **The floor is set by the drag loop, not by taste.** HTML5 drag-and-drop only
+ *  guarantees a `dragover` every 350ms — the processing model runs on that cadence,
+ *  not per mouse movement — so any window at or below it expires BETWEEN two events
+ *  of a fast sweep, and the strip commits every slot the pointer crosses. That is
+ *  exactly what 120ms did in production: a quick pass over five tabs moved all five.
+ *  500ms clears the cadence with margin and is the reason this number is not smaller.
  *
- *  Small enough to read as a lean rather than a move, and large enough to be
- *  unambiguous at a glance — it answers "the strip heard me, and it is about to
- *  open THAT way" during a wait that is otherwise a second of nothing. The same
- *  purpose the mobile switcher's PREVIEW_PEEK_MAX serves for its live swipe. */
-export const REORDER_LEAN_PX = 7;
+ *  It costs a decisive user nothing, which is what makes the margin affordable: a
+ *  release commits whatever slot is pending at once (flushRest), so the window is only
+ *  ever felt by a pointer that has stopped and is waiting to see the gap open. */
+export const REORDER_REST_MS = 500;
+
+/** Movement (px) between two dragover events below which the pointer counts as still.
+ *  A hand resting on a mouse is never perfectly still, and treating a 1px tremor as a
+ *  sweep would keep pushing the commit out for as long as someone held the tab. */
+export const REORDER_MOVE_EPS_PX = 3;
 
 /** The one transition both preview stages use (the lean, and the slide that
  *  commits it).