@cplieger/web-terminal-ui 8.0.1 → 8.1.1

package/README.md

@@ -254,7 +254,7 @@ createTerminal("#terminal", {
 });
 ```
 
-All three reference apps (web-terminal-kiro, web-terminal-server, vibekit's shell
+All three reference apps (web-terminal-kiro, web-terminal-server, marotte's shell
 panel) enable it that way; web-terminal-server additionally exposes an operator
 opt-out, because it runs a command its operator chooses.
 
@@ -466,37 +466,57 @@ feature, because everything that drives it lives there: the shared tab row, the
 split button, the snap items and the layout record. Your root becomes the shell
 root holding one root per pane and the shared chrome; each pane is a complete
 terminal with its own engine, so an open split holds up to two WebSocket
-connections, one per shown pane. Opening, closing and resizing the split
-is a display re-arrangement only: no tab or session is ever created or closed by
-it, and a tab that leaves a pane stays in the row as an ordinary tab.
+connections, one per shown pane. Closing and resizing the split is a display
+re-arrangement only: no tab or session is ever created or closed by it, and a tab
+that leaves a pane stays in the row as an ordinary tab. Opening it is one too,
+except from the split button with a single tab, which creates the second tab.
 
 Three ways in, all in the tab chrome, none a key chord:
 
 - **The split button** at the right edge of the tab row (and in the mobile
-  switcher bar on a touchscreen) toggles the split. Opening puts the shown tab in
-  the left pane with the right pane empty; the next tab clicked, or the next "+",
-  fills the empty pane. Closing keeps the SELECTED pane's tab and hides the
-  other pane. It is an ordinary button: Tab reaches it, Enter or Space toggles
-  it, `aria-expanded` is its state.
+  switcher bar on a touchscreen) toggles the split, and never opens an empty
+  pane. The current tab stays in the left pane and selected, and the right pane
+  shows the tab used before it, or with no such tab the next one in the row, else
+  the previous one. With a single tab it creates a new tab and shows it on the
+  right, selected; the split opens once the new tab exists. Closing keeps the
+  SELECTED pane's tab and hides the other pane. Opening slides the divider in
+  from the right edge and closing slides it toward the hidden side, both instant
+  under reduced motion. It is an ordinary button: Tab
+  reaches it, Enter or Space toggles it, `aria-expanded` is its state.
 - **"Snap to left" and "Snap to right"** in a tab's context menu, on a
   right-click, a touch long-press, or the keyboard (the context-menu key or
   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,
-  whatever was there becomes an ordinary tab, and the tab's old side is left
-  empty.
-- **Dragging a tab** out of the row onto the left or right half of the terminal
-  area, which highlights the half under the pointer while the drag lasts.
+  an assistive technology's own command). A snapped tab shows on the named side
+  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; 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. The selected pane is the one that receives typing, the
-last one clicked, touched or typed in. The grip handle between the panes shows
-it: a 6 px pill in the 10 px gutter whose accent edge faces the selected pane,
-and the selected pane keeps the filled blinking cursor while the other pane's is
-hollow and steady. The tab row does not change for selection; both shown tabs
-render identically active. A screen reader hears "Left terminal selected" or
-"Right terminal selected" as a polite announcement, and each pane's tabpanel is
-described by its side and whether it is selected.
+pane's tab is replaced. A new tab ("+") also fills an empty pane first, but with
+both panes showing a tab it replaces the UNSELECTED pane's tab and its pane
+becomes the selected one, so the tab typed in before stays on screen. A session
+created in another browser lands the same way while the split is open; with the
+split closed it joins the row as an ordinary tab. Closing a
+shown tab closes the split: the other pane's tab fills the view and is selected,
+or, when the other pane was empty, the neighbouring tab is shown as it is with
+one pane. The selected pane is the one that receives typing, the
+last one clicked, touched or typed in. The divider between the panes shows it:
+an 8 px bar in the 10 px gutter holding a short accent pill that sits against
+the selected pane's side and slides across when the selection changes (it jumps
+under reduced motion). The selected pane keeps the filled blinking cursor while
+the other pane's is hollow and steady, and in the tab row both shown tabs render
+active, the selected pane's a step brighter. A screen reader hears "Left
+terminal selected" or "Right terminal selected" as a polite announcement, and
+each pane's tabpanel is described by its side and whether it is selected.
 
 While the split is open each shown pane's input is a stop in the Tab order, so
 Tab runs left pane, divider, right pane, then the tab row; an empty pane adds no
@@ -505,10 +525,14 @@ from outside the terminal lands on the tab row.
 
 The handle is a focusable `role="separator"` with `aria-valuenow`, `aria-valuemin`
 and `aria-valuemax` as percentages of the left share. Dragging it (mouse or
-touch, a 24 px hit area) resizes both panes as the pointer moves; the shells are
-told their new size at most every 100 ms and once on release. A pane squeezed
-under 360 px dims, and releasing there closes that pane; releasing above 360 px
-after such a dip snaps the handle back to where the drag started. From the
+touch; the hit area is 24 px wide for a fine pointer and 44 px for a coarse one,
+overlapping the pane edges) resizes both panes as the pointer moves; the shells
+are told their new size at most every 100 ms and once on release. Past the
+360 px minimum the pane holds at exactly 360 px for 120 px of further pointer
+travel, and a release there leaves it at 360 px. Beyond that the pane follows
+the pointer again and dims, and releasing there closes it; coming back above
+360 px after such a trip and releasing snaps the handle back to where the drag
+started. From the
 keyboard ArrowLeft and ArrowRight nudge the divider by 16 px and Home and End take
 it to the bounds, and every key stops AT the 360 px minimum rather than closing a
 pane; the record is written when the key is released. The default is 50/50.
@@ -604,7 +628,7 @@ The web-terminal family:
 
 Consumers that ship this UI:
 
-- [`vibekit`](https://github.com/cplieger/vibekit)
+- [`marotte`](https://github.com/cplieger/marotte)
 - [`web-terminal-kiro`](https://github.com/cplieger/web-terminal-kiro)
 
 ## Contributing
@@ -627,3 +651,5 @@ Apache-2.0 work, and its licence travels with the FONT FILE — which this packa
 does not ship, it only names the URL. So no new obligation lands on an npm or JSR
 consumer; the obligation is the serving host's, which is why the full-page host
 notes above ask for the font's `LICENSE` and `NOTICE` beside the `.woff2`.
+
+Third-party attributions are in [THIRD_PARTY_NOTICES.md](THIRD_PARTY_NOTICES.md).

package/css/00-tokens.css

@@ -176,7 +176,7 @@
      retuning one alone desynchronises cues a reader sees side by side. It was a
      comment saying "change both or neither" until 2026-09, which is the same rule
      with nothing enforcing it.
-     Shared with vibekit's `--dot-beat-dur` (01-tokens.css) for the reason the
+     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;
   --dur-standard: 0.2s;

package/css/01-scope.css

@@ -50,7 +50,7 @@
   color-scheme: dark;
   /* Design-system scrollbar COLOR on every scroller in the subtree (the
      terminal, the tab scroller, the expanded switcher list): border-grey
-     thumb, no track — the vibekit/subflux treatment. scrollbar-color
+     thumb, no track — the marotte/subflux treatment. scrollbar-color
      INHERITS, so the boundary is the one place to set it. Where it is not
      supported the color-scheme above still renders the UA fallback dark.
      Overlay-scrollbar platforms are unaffected. */

package/css/10-primitives.css

@@ -78,7 +78,7 @@
    real <button>: tabs, +, keyboard, switcher rows, menu items, the FAB).
    :focus-visible only — a tap/click never shows the ring (the UA heuristic),
    so the touch-first surfaces stay clean while Tab-key navigation gets the
-   family's accent ring (the vibekit/subflux convention: 2px accent, 2px out).
+   family's accent ring (the marotte/subflux convention: 2px accent, 2px out).
    Follows each control's border-radius; themeable via --accent like the "+"
    glyphs. The terminal's own hidden textarea is not a button and keeps its
    outline: none (02-terminal.css). */

package/css/21-scroll-to-bottom.css

@@ -60,9 +60,9 @@
   }
 }
 
-/* Desktop + tabbed: the tab strip docks at the bottom, so lift the button above
-   it with a clear gap. */
-@media (pointer: fine) {
+/* Above the docked strip, which shows under every pointer but a coarse one, no
+   pointer at all included: the gate is not `(pointer: fine)`. */
+@media not (pointer: coarse) {
   :where(.wt-root.wt-tabbed) .wt-scroll-bottom {
     bottom: calc(var(--wt-tabbar-h, 44px) + var(--sp-3));
   }

package/css/30-tabs.css

@@ -225,6 +225,22 @@
   background: color-mix(in oklch, var(--tab-active-bg), var(--tab-active-fg) 22%);
 }
 
+/* This rest rule outranks the plain active hover, so it carries its own hover and
+   press rungs. */
+:where(.wt-root) .wt-tab-active.wt-tab-selected {
+  background: color-mix(in oklch, var(--tab-active-bg), var(--tab-active-fg) 10%);
+}
+
+@media (any-hover: hover) {
+  :where(.wt-root) .wt-tab-active.wt-tab-selected:hover {
+    background: color-mix(in oklch, var(--tab-active-bg), var(--tab-active-fg) 20%);
+  }
+}
+
+:where(.wt-root) .wt-tab-active.wt-tab-selected:active {
+  background: color-mix(in oklch, var(--tab-active-bg), var(--tab-active-fg) 30%);
+}
+
 /* Centres the label's INK (cap top to baseline), not its line box; the shift is
    measured per site by features/tabs/ink-centre.ts, which owns why. Not
    `text-box: trim-both` (Firefox lacks it; a gate is two geometries, one
@@ -454,6 +470,60 @@
   }
 }
 
+:where(.wt-root) .wt-tab-split[aria-expanded="true"] {
+  background: var(--tab-hover-bg);
+  color: var(--tab-active-fg);
+}
+
+/* The split glyph (both split buttons) is filled, never stroked: a stroke is
+   centred on its outline, so its edges sit half a stroke off the shape's.
+   20px is a whole number of device px at 1, 1.25, 1.5 and 2 dppx, and at 1.25
+   and 1.5 the shapes move to that DPR's device grid, written as device px over
+   the ratio (25 and 30 across, both mirrored about the centre). */
+:where(.wt-root) .wt-btn > .wt-split-icon {
+  width: 20px;
+  height: 20px;
+  fill: currentcolor;
+  stroke: none;
+}
+
+@media (resolution: 1.25dppx) {
+  :where(.wt-root) .wt-split-icon-left {
+    x: calc(1px / 1.25);
+    width: calc(8px / 1.25);
+  }
+
+  :where(.wt-root) .wt-split-icon-divider {
+    x: calc(11px / 1.25);
+    y: calc(2px / 1.25);
+    width: calc(3px / 1.25);
+    height: calc(21px / 1.25);
+    rx: calc(1.5px / 1.25);
+  }
+
+  :where(.wt-root) .wt-split-icon-right {
+    x: calc(16px / 1.25);
+    width: calc(8px / 1.25);
+  }
+}
+
+@media (resolution: 1.5dppx) {
+  :where(.wt-root) .wt-split-icon-left {
+    x: calc(2px / 1.5);
+    width: calc(9px / 1.5);
+  }
+
+  :where(.wt-root) .wt-split-icon-divider {
+    x: calc(14px / 1.5);
+    width: calc(2px / 1.5);
+  }
+
+  :where(.wt-root) .wt-split-icon-right {
+    x: calc(19px / 1.5);
+    width: calc(9px / 1.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
@@ -624,31 +694,14 @@
   background: var(--border);
 }
 
-/* Pull the terminal surface up off the docked BOTTOM tab strip so it does not
-   overlap the last rows (a mirror of the old top offset). The tabs feature
-   marks the surface (.wt-with-tabbar) and keeps the measured strip height in
-   --wt-tabbar-h; the surface is absolute inset:0, so a bottom offset clears it.
-   Applies whenever the desktop strip is shown — a fine pointer OR a root that
-   is not narrow (an iPad) — the complement of the narrow-coarse switcher gate
-   in css/31-switcher.css. On the narrow-coarse phone the strip is hidden and
-   the mobile switcher's inset is applied through viewport.ts
-   (--wt-reserve-bottom) instead. Two rules because the class half cannot mix
-   into a media condition; they set the same declaration.
-
-   The clearance is the strip's height PLUS --safe-bottom, because that is where
-   the strip is: .wt-tab-bar sits at `bottom: var(--safe-bottom)`, so the band it
-   occupies runs from --safe-bottom to --safe-bottom + --wt-tabbar-h. Clearing
-   the height alone left the surface reaching exactly env(safe-area-inset-bottom)
-   past the strip's top edge — 0 on a desktop, 20px in iPad Safari (viewport-fit
-   is cover, so the insets are live), where the terminal grew one extra row that
-   rendered behind the strip. --wt-tabbar-h is the bar's OWN height and must stay
-   that: the wide-touchscreen key grid (31-switcher.css) already adds the inset to
-   it itself, and folding the inset into the variable would double-count there.
-   The mobile switcher reaches the same total from the other direction, measuring
-   `innerHeight - rect.top` so the inset rides along inside --wt-reserve-bottom.
-   --kb-inset is deliberately absent: viewport.ts owns the keyboard case by
-   writing an inline bottom on the surface, which outranks this rule entirely. */
-@media (pointer: fine) {
+/* The surface clears the docked strip wherever the strip shows: any pointer but
+   a coarse one, or a root that is not narrow, the exact complement of the
+   switcher's gate in 31-switcher.css (two rules, since a class cannot join a
+   media condition). The strip sits at `bottom: var(--safe-bottom)`, hence the
+   added inset; --wt-tabbar-h stays the bar's own height, because the key grid
+   in 31-switcher.css adds the inset to it too. An inline bottom written by
+   viewport.ts (keyboard, switcher reserve) outranks both rules. */
+@media not (pointer: coarse) {
   :where(.wt-root) .term.wt-with-tabbar {
     bottom: calc(var(--wt-tabbar-h, 44px) + var(--safe-bottom, 0px));
   }
@@ -1029,7 +1082,7 @@
    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 vibekit's LITERALS is
+   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
@@ -1037,10 +1090,10 @@
    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 vibekit's 20 (measured at dpr 1, both
+   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 vibekit's `.tab-run-dot` (`12-tabs.css`, "THE GLOW BEAT") — the same mark
+   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.
@@ -1156,7 +1209,7 @@
    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 vibekit's number for the same mark
+   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,

package/css/31-switcher.css

@@ -302,6 +302,11 @@
   display: none;
 }
 
+:where(.wt-root) .wt-switcher-split[aria-expanded="true"] {
+  background: var(--tab-hover-bg);
+  color: var(--tab-active-fg);
+}
+
 /* Tab-switcher button: toggles the list open/closed, sitting between the
    keyboard and "+" buttons. position: relative anchors its notification dot,
    absolutely placed in the top-right corner. It only earns its place with ≥2

package/css/32-split.css

@@ -1,15 +1,29 @@
 :where(.wt-root.wt-split) {
   --wt-split-gutter: 10px;
   --wt-split-ratio: 0.5;
+  /* The left pane's width. Its 100% resolves where it is used, against the shell
+     root in both the grid track and the drop highlights. Rounded because Blink
+     scales the percentage in single precision and truncates a length to 1/64 px
+     (LayoutUnit, https://chromium.googlesource.com/chromium/src/+/main/third_party/blink/renderer/platform/geometry/layout_unit.h):
+     the share of a 360 px pane on a 1280 px row drew 359.98 px, a column short. */
+  --wt-split-left: round(
+    nearest,
+    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);
 }
 
 :where(.wt-root.wt-split.wt-split-open) {
-  grid-template-columns:
-    calc((100% - var(--wt-split-gutter)) * var(--wt-split-ratio)) var(--wt-split-gutter)
-    minmax(0, 1fr);
+  grid-template-columns: var(--wt-split-left) var(--wt-split-gutter) minmax(0, 1fr);
 }
 
 /* Two panes given the same column (the collapse) would otherwise be auto-placed
@@ -83,6 +97,14 @@
   display: none;
 }
 
+/* The handle ends where the panes' content does: above the tab bar, or above
+   the switcher bar and the soft keyboard, the two values viewport.ts insets the
+   panes by. Its box is composited, and Blink promotes a bar overlapping it to a
+   layer of its own (kOverlap,
+   https://chromium.googlesource.com/chromium/src/+/main/third_party/blink/renderer/platform/graphics/compositing_reasons.cc),
+   whose origin is off the device grid wherever the bar's height times the DPR
+   is fractional (61px at 1.5 dppx), so everything in the bar draws half a
+   device pixel off. */
 :where(.wt-root.wt-split.wt-split-open) > .wt-split-handle {
   display: block;
   grid-column: 2;
@@ -91,28 +113,50 @@
   justify-self: center;
   inline-size: 24px;
   margin-inline: -7px;
+  margin-block-end: var(--wt-split-bottom);
   cursor: col-resize;
   touch-action: none;
   z-index: 4;
 }
 
+@media (pointer: coarse) {
+  :where(.wt-root.wt-split.wt-split-open) > .wt-split-handle {
+    inline-size: 44px;
+    margin-inline: -17px;
+  }
+}
+
 :where(.wt-root.wt-split) .wt-split-handle::before {
   content: "";
   position: absolute;
-  inset-inline-start: 9px;
-  inline-size: 6px;
-  inset-block: 12px calc(var(--wt-tabbar-h, 0px) + 12px);
-  border-radius: 3px;
+  inset-inline: 0;
+  margin-inline: auto;
+  inline-size: 8px;
+  inset-block: 12px;
+  border-radius: 4px;
   background: var(--tab-bg);
   border-inline: 1px solid var(--border);
 }
 
-:where(.wt-root.wt-split) .wt-split-handle[data-faces="left"]::before {
-  border-inline-start: 2px solid var(--accent);
+/* The pill's 3px is half the 8px bar less its 1px edge, and its 4px of travel
+   reaches the other inner edge: change the bar and these follow. */
+:where(.wt-root.wt-split) .wt-split-handle::after {
+  content: "";
+  position: absolute;
+  inset-inline-start: calc(50% - 3px);
+  inline-size: 2px;
+  block-size: 48px;
+  inset-block-start: calc((100% - 48px) / 2);
+  border-radius: 1px;
+  background: var(--accent);
+}
+
+:where(.wt-root.wt-split) .wt-split-handle[data-faces="right"]::after {
+  translate: 4px 0;
 }
 
-:where(.wt-root.wt-split) .wt-split-handle[data-faces="right"]::before {
-  border-inline-end: 2px solid var(--accent);
+:where(.wt-root.wt-split.wt-animate) .wt-split-handle::after {
+  transition: translate var(--dur-standard) var(--ease-standard);
 }
 
 :where(.wt-root.wt-split) .wt-split-handle.wt-handle-held::before {
@@ -152,25 +196,33 @@
   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);
-  inline-size: 50%;
+  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;
+  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-start: 50%;
+  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),
 :where(.wt-root.wt-split.wt-animate.wt-split-closing) {
   transition: grid-template-columns var(--dur-standard) var(--ease-standard);
 }

package/css/MANIFEST.touch

@@ -1,6 +1,6 @@
 # Component bundle for presetTouch() compositions (single + the mobile key
 # toolbar). Library styles only — root-scoped, no page-level rules; the host
-# page owns its own reset/fonts (vibekit's embedded panel serves exactly this).
+# page owns its own reset/fonts (marotte's embedded panel serves exactly this).
 # Files concatenate in declared order; the order IS the cascade.
 00-tokens.css
 01-scope.css

package/css/page.css

@@ -3,7 +3,7 @@
    owns when the terminal IS the page (web-terminal-server, web-terminal-kiro,
    scaffold/index.html). The component bundle (00-10) never touches the host
    document; everything here is deliberately page-scoped. An embedding consumer
-   (vibekit) serves a per-preset manifest instead and owns its own page.
+   (marotte) serves a per-preset manifest instead and owns its own page.
    Concatenated FIRST by the reference MANIFEST. */
 
 *,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cplieger/web-terminal-ui",
-  "version": "8.0.1",
+  "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",
@@ -50,22 +50,22 @@
     "@stryker-mutator/core": "10.0.0",
     "@stryker-mutator/typescript-checker": "10.0.0",
     "@stryker-mutator/vitest-runner": "10.0.0",
-    "@types/node": "26.6.1",
+    "@types/node": "26.6.3",
     "@typescript/native": "npm:typescript@7.0.2",
-    "@vitest/browser": "5.0.1",
-    "@vitest/browser-playwright": "5.0.1",
-    "@vitest/coverage-v8": "5.0.1",
-    "eslint": "10.10.0",
-    "fast-check": "4.10.1",
-    "html-validate": "11.16.0",
-    "knip": "6.36.0",
+    "@vitest/browser": "5.0.2",
+    "@vitest/browser-playwright": "5.0.2",
+    "@vitest/coverage-v8": "5.0.2",
+    "eslint": "10.11.0",
+    "fast-check": "4.10.2",
+    "html-validate": "11.16.1",
+    "knip": "6.38.0",
     "playwright": "1.63.0",
-    "prettier": "3.9.7",
+    "prettier": "3.9.9",
     "stylelint": "17.15.0",
     "stylelint-config-standard": "40.0.0",
     "typescript": "npm:@typescript/typescript6@6.0.2",
-    "typescript-eslint": "8.70.0",
-    "vitest": "5.0.1"
+    "typescript-eslint": "8.71.0",
+    "vitest": "5.0.2"
   },
   "publishConfig": {
     "access": "public"

package/src/features/tabs/device-snap.ts

@@ -0,0 +1,56 @@
+// A box that starts between device pixels draws every edge of a filled shape
+// as a partial pixel. Layout decides where the box starts, and CSS cannot round
+// a position to the device grid, so the correction is measured and written.
+
+import { windowOf } from "../../kernel/realm.js";
+
+/** CSS px that move `v` onto the nearest whole device pixel. `v` is read to
+ *  1/1000 of a device pixel first: subtracting an applied offset leaves float
+ *  residue, which would tip a half-pixel position either way. */
+function toWholeDevicePx(v: number, dpr: number): number {
+  const device = Math.round(v * dpr * 1000) / 1000;
+  return (Math.round(device) - device) / dpr;
+}
+
+/** Keeps `el`'s box on whole device pixels, moved by at most half of one
+ *  through its `translate`, which it owns from then on. Re-measured when `el`
+ *  or an ancestor up to `root` changes size and when the device pixel ratio
+ *  changes; a move that resizes nothing on that chain is not followed.
+ *  @returns the release, which stops following and keeps the last offset. */
+export function snapToDevicePixels(el: SVGElement, root: HTMLElement): () => void {
+  const win = windowOf(el.ownerDocument);
+  let applied = { x: 0, y: 0 };
+  const snap = (): void => {
+    const box = el.getBoundingClientRect();
+    const dpr = win.devicePixelRatio;
+    const x = toWholeDevicePx(box.left - applied.x, dpr);
+    const y = toWholeDevicePx(box.top - applied.y, dpr);
+    applied = { x, y };
+    el.style.translate = x === 0 && y === 0 ? "" : `${String(x)}px ${String(y)}px`;
+  };
+
+  const resize = new win.ResizeObserver(snap);
+  for (let node: Element | null = el; node !== null; node = node.parentElement) {
+    resize.observe(node);
+    if (node === root) {
+      break;
+    }
+  }
+  // A ratio change resizes nothing in CSS px, and each query matches one ratio.
+  let ratio: MediaQueryList | undefined;
+  const onRatio = (): void => {
+    watchRatio();
+    snap();
+  };
+  function watchRatio(): void {
+    ratio?.removeEventListener("change", onRatio);
+    ratio = win.matchMedia(`(resolution: ${String(win.devicePixelRatio)}dppx)`);
+    ratio.addEventListener("change", onRatio);
+  }
+  watchRatio();
+
+  return () => {
+    resize.disconnect();
+    ratio?.removeEventListener("change", onRatio);
+  };
+}