@cplieger/web-terminal-ui 8.6.0-dev.2 → 8.6.0-dev.4

package/css/30-tabs.css

@@ -474,55 +474,6 @@
   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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cplieger/web-terminal-ui",
-  "version": "8.6.0-dev.2",
+  "version": "8.6.0-dev.4",
   "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",
@@ -44,7 +44,7 @@
     "verify": "bash scripts/verify.sh"
   },
   "peerDependencies": {
-    "@cplieger/web-terminal-engine": "^6.0.0 || ^6.2.0-dev"
+    "@cplieger/web-terminal-engine": "^6.0.0 || ^6.2.0-dev || ^6.4.0-dev"
   },
   "overrides": {
     "qs": "^6.15.2"
@@ -54,7 +54,7 @@
     "@stryker-mutator/core": "10.0.0",
     "@stryker-mutator/typescript-checker": "10.0.0",
     "@stryker-mutator/vitest-runner": "10.0.0",
-    "@types/node": "26.6.4",
+    "@types/node": "26.6.5",
     "@typescript/native": "npm:typescript@7.0.2",
     "@vitest/browser": "5.0.4",
     "@vitest/browser-playwright": "5.0.4",

package/src/features/tabs/index.ts

@@ -16,7 +16,6 @@ import type { ActivityMonitorApi } from "../activity-monitor.js";
 import type { MobileToolbarApi } from "../mobile-toolbar.js";
 import { fromHTML, holdFocusOnPress } from "../dom.js";
 import { createClickSwallow, placeMenuAt } from "../menu-position.js";
-import { snapToDevicePixels } from "./device-snap.js";
 import { centreChipLabels } from "./ink-centre.js";
 import { SWITCH_ANIMATIONS, SWITCH_CLASSES } from "./switch-anim.js";
 import { createAddressBar, type AddressBar, type RouteOrigin } from "./address-bar.js";
@@ -833,12 +832,6 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
       // engine produced for THIS font at THIS size, rather than the em constant
       // in 00-tokens.css that can only be right at one size (see ink-centre.ts).
       ctx.defer(centreChipLabels(varRoot, { strip: bar, switcher }));
-      for (const b of splitButtons) {
-        const icon = b.querySelector("svg");
-        if (icon) {
-          ctx.defer(snapToDevicePixels(icon, ctx.shell.root));
-        }
-      }
 
       // Mark the root so the CSS lifts the bottom-anchored chrome (banner, toast,
       // scroll-to-bottom, key grid) above the switcher bar on a coarse pointer.

package/src/features/tabs/strip.ts

@@ -149,14 +149,10 @@ const KB_SVG = `<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="4" wi
 // background-tab notification dot rides on it (see switchButtonHTML). Same
 // viewBox + stroke=currentcolor treatment as the others.
 const SWITCH_SVG = `<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="8" width="13" height="13" rx="2"/><path d="M8 8V6a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-3"/></svg>`;
-// The state is the button's aria-expanded, not its icon. The viewBox equals the
-// 20px box 30-tabs.css draws it in, one unit per CSS px: that stylesheet's
-// per-DPR geometry is written in those units.
-const SPLIT_SVG =
-  `<svg class="wt-split-icon" viewBox="0 0 20 20" aria-hidden="true">` +
-  `<rect class="wt-split-icon-left" x="1" y="4" width="6" height="12" rx="1.5"/>` +
-  `<rect class="wt-split-icon-divider" x="9" y="2" width="2" height="16" rx="1"/>` +
-  `<rect class="wt-split-icon-right" x="13" y="4" width="6" height="12" rx="1.5"/></svg>`;
+// The keyboard glyph's rounded square split down the middle, so the two buttons
+// beside each other read as one size and weight. The state is the button's
+// aria-expanded, not its icon.
+const SPLIT_SVG = `<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="4" width="16" height="16" rx="3.5"/><path d="M12 4v16"/></svg>`;
 
 /** The ONE builder for a tab chip's content (status dot, label, progress bar,
  *  close), shared by the strip chip, the mobile active row and each mobile list

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

@@ -1,56 +0,0 @@
-// 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);
-  };
-}