@cplieger/web-terminal-ui 4.5.1 → 4.5.2

package/README.md

@@ -140,15 +140,15 @@ are importable from `…/features/<name>` (`clipboard`, `context-menu`,
 
 ### Options
 
-| Option         | Default                    | Purpose                                                                                                                                                                                                                                                                                                                                                  |
-| -------------- | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `features`     | _(none — bare kernel)_     | The feature list. Omitted or empty builds only the terminal (no chrome). Use a preset from `./presets` or a hand-picked array.                                                                                                                                                                                                                           |
-| `layout`       | `"viewport"`               | How the terminal claims space. `"viewport"`: the root becomes a fixed full-viewport box (the full-page product). `"container"`: the root fills your container element, which becomes the styling and positioning boundary (the embedded case).                                                                                                           |
-| `wsPath`       | `"/ws"`                    | WebSocket endpoint path the engine connects to.                                                                                                                                                                                                                                                                                                          |
-| `fontReady`    | `'14px "MonaspiceNe NFM"'` | CSS font shorthand awaited before the first resize, so the server is sized against the real web font's cell metrics rather than a fallback.                                                                                                                                                                                                              |
-| `loading`      | _(none)_                   | A pre-JS loading overlay element (kept in your served HTML so it paints before this module loads); it is faded out and removed once the first frame renders.                                                                                                                                                                                             |
-| `onFatalError` | _(built-in recovery)_      | Called after a fatal feature setup failure has stopped the connection, released the terminal runtime, and cleared the root. It receives `{ phase, feature, cause }`. Return `true` only after rendering replacement recovery UI into the root; otherwise the kernel shows its Reload page surface.                                                       |
-| `theme`        | _(none)_                   | Theme overrides (CSS custom properties on the terminal root): `--accent`, `--tab-bg`, `--tab-hover-bg`, `--tab-active-bg`, `--tab-active-fg`, `--tab-active-border`, plus the activity-dot palette `--status-working`, `--status-done`, `--status-input` (the working and input rings derive from their own tokens). The library ships neutral defaults. |
+| Option         | Default                    | Purpose                                                                                                                                                                                                                                                                                                                                                            |
+| -------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `features`     | _(none — bare kernel)_     | The feature list. Omitted or empty builds only the terminal (no chrome). Use a preset from `./presets` or a hand-picked array.                                                                                                                                                                                                                                     |
+| `layout`       | `"viewport"`               | How the terminal claims space. `"viewport"`: the root becomes a fixed full-viewport box (the full-page product). `"container"`: the root fills your container element, which becomes the styling and positioning boundary (the embedded case).                                                                                                                     |
+| `wsPath`       | `"/ws"`                    | WebSocket endpoint path the engine connects to.                                                                                                                                                                                                                                                                                                                    |
+| `fontReady`    | `'14px "MonaspiceNe NFM"'` | CSS font shorthand awaited before the first resize, so the server is sized against the real web font's cell metrics rather than a fallback.                                                                                                                                                                                                                        |
+| `loading`      | _(none)_                   | A pre-JS loading overlay element (kept in your served HTML so it paints before this module loads); it is faded out and removed once the first frame renders.                                                                                                                                                                                                       |
+| `onFatalError` | _(built-in recovery)_      | Called after a fatal feature setup failure has stopped the connection, released the terminal runtime, and cleared the root. It receives `{ phase, feature, cause }`. Return `true` only after rendering replacement recovery UI into the root; otherwise the kernel shows its Reload page surface.                                                                 |
+| `theme`        | _(none)_                   | Theme overrides (CSS custom properties on the terminal root): `--accent`, `--tab-bg`, `--tab-hover-bg`, `--tab-active-bg`, `--tab-active-fg`, `--tab-active-border`, plus the activity-dot palette `--status-working`, `--status-done`, `--status-input` (the working ripple and the input ring derive from their own tokens). The library ships neutral defaults. |
 
 `createTerminal()` returns a handle: `focus()` re-focuses the terminal input
 (and opens the soft keyboard on touch); `send(bytes)` sends bytes to the active
@@ -190,6 +190,11 @@ Consumers that ship this UI:
 - [`vibekit`](https://github.com/cplieger/vibekit)
 - [`web-terminal-kiro`](https://github.com/cplieger/web-terminal-kiro)
 
+## Contributing
+
+Issues and PRs are welcome. See [CONTRIBUTING.md](CONTRIBUTING.md) for the
+conventions and how to run the checks locally.
+
 ## Disclaimer
 
 This project is built with care and follows security best practices, but it is intended for personal / self-hosted use. No guarantees of fitness for production environments. Use at your own risk.
@@ -198,4 +203,4 @@ This project was built with AI-assisted tooling using [Claude](https://claude.co
 
 ## License
 
-GPL-3.0-or-later. See `LICENSE`.
+GPL-3.0-or-later. See [LICENSE](LICENSE).

package/css/30-tabs.css

@@ -121,6 +121,17 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  /* Center the INK, not the line box: UI fonts carry more ascent than descent
+     (Noto Sans at 13px: 14px over / 4px under the baseline), so the flex-
+     centered line box leaves the visible text ~1.5px low — reading as
+     baseline-aligned with the activity dot's bottom instead of its center.
+     Trimming the box to the cap-height/alphabetic band makes flexbox center
+     the glyphs themselves, on every platform font. Descender ink still paints
+     (verified: ink overflow survives the overflow: hidden ellipsis clip).
+     Non-supporting browsers simply keep the untrimmed box. Shared by all
+     three chip labels (this one + the two switcher labels in
+     31-switcher.css). */
+  text-box: trim-both cap alphabetic;
 }
 
 /* A little breathing room after the activity dot, before the label. */
@@ -401,15 +412,14 @@
   border: 1.5px solid color-mix(in oklch, var(--text) 45%, transparent);
 }
 
-/* Agent working: two INDEPENDENTLY animated layers on one element make the
-   "alive" read (the status-badge "processing" idiom — Ant Design's processing
-   badge, the classic CSS live-indicator ripple): the solid disc keeps full
-   opacity and gently GLOWS (its colors brighten mid-beat), while a ::after
-   ring — born exactly on the static 2px ring — RIPPLES outward and dissolves,
-   re-emitted each cycle. The static ring itself never moves, so working keeps
-   input's exact rest silhouette (a live turn ripples; a turn blocked on the
-   user is that same silhouette frozen — see input below). Motion separates
-   working from input; the ring separates both from done's bare disc. The old
+/* Agent working: a solid disc with two animated cues (the status-badge
+   "processing" idiom — Ant Design's processing badge, the classic CSS
+   live-indicator ripple): the disc keeps full opacity and gently GLOWS (its
+   colors brighten mid-beat), while a ::after ring RIPPLES outward off the
+   disc's edge and dissolves, re-emitted each cycle. No static ring at rest —
+   the disc + live ripple ARE the working read; input freezes that exact ping
+   at its birth frame (see input below), so motion separates working from
+   input, and the ring separates both from done's bare disc. The old
    single-layer pulse faded disc + ring together (opacity on the element),
    which read as a blink and coupled the layers — an element's opacity always
    multiplies onto its pseudos, so true independence requires animating disc
@@ -420,16 +430,15 @@
   position: relative;
   background: var(--status-working);
   border-color: var(--status-working);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--status-working) 40%, transparent);
   animation: wt-working-glow 1.2s ease-in-out infinite;
 }
 
-/* The ripple layer: at scale(1) its 2px border overlays the static ring's
-   9->13px band exactly (inset -2px), then the wave detaches, expanding and
-   fading. transform + opacity only, so it composites without repaints. It
-   exists only in the working state — no stale layer to pin when a dot changes
-   status. (The switcher notification dot never shows working — input/done
-   only — so its position: absolute placement never meets this rule's
+/* The ripple layer: at scale(1) its 2px border hugs the disc's edge (inset
+   -2px, the 9->13px band), then the wave detaches, expanding and fading.
+   transform + opacity only, so it composites without repaints. It exists only
+   in the working state — no stale layer to pin when a dot changes status.
+   (The switcher notification dot never shows working — input/done only — so
+   its position: absolute placement never meets this rule's
    position: relative.) */
 :where(.wt-root) .wt-status-dot[data-status="working"]::after {
   content: "";
@@ -449,18 +458,19 @@
   border-color: var(--status-done);
 }
 
-/* User action required (permission / approval): working's exact silhouette —
-   solid dot + 2px ring — frozen and recolored (--status-input; the default
-   orange is shifted away from the old amber so it separates from both
-   default-lime working and green done). The stillness is the message: the
-   agent's turn is mid-flight but blocked on you. The ring keeps it distinct
-   from done's bare disc without leaning on hue; it derives from the same token
-   at 40% alpha, so a theme override recolors dot + ring together. It persists
-   until you act on or switch into the tab. */
+/* User action required (permission / approval): the working ping frozen at
+   its birth frame — solid dot + the same 2px ring at the ripple's 30% birth
+   opacity, motionless (--status-input; the default orange is shifted away
+   from the old amber so it separates from both default-lime working and green
+   done). The stillness is the message: the agent's turn is mid-flight but
+   blocked on you. The ring keeps it distinct from done's bare disc without
+   leaning on hue; it derives from the same token, so a theme override
+   recolors dot + ring together. It persists until you act on or switch into
+   the tab. */
 :where(.wt-root) .wt-status-dot[data-status="input"] {
   background: var(--status-input);
   border-color: var(--status-input);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--status-input) 40%, transparent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--status-input) 30%, transparent);
 }
 
 /* Exited: a dim hollow dot, static; distinct from idle by its lower opacity. */
@@ -490,13 +500,14 @@
   }
 }
 
-/* The ripple wave: one emission per cycle, launching off the static ring and
-   dissolving by ~2.1x. Opacity starts at the static ring's own 40% weight so
-   the wave reads as the ring letting go of a copy, not a new brighter object. */
+/* The ripple wave: one emission per cycle, launching off the disc's edge and
+   dissolving by ~2.1x. The 0.3 birth opacity matches the input ring's frozen
+   weight, so a live ping and a stuck one read as the same object — subtle
+   against the bar now that no static ring doubles it at birth. */
 @keyframes wt-working-ripple {
   0% {
     transform: scale(1);
-    opacity: 0.4;
+    opacity: 0.3;
   }
 
   100% {
@@ -509,13 +520,14 @@
 @media (prefers-reduced-motion: reduce) {
   :where(.wt-root) .wt-status-dot[data-status="working"] {
     animation: none;
-    /* Motion is what separates working from input's frozen silhouette; with
-       it removed, punch an inner hole (dot -> donut) so working differs from
-       input (solid ringed disc) and done (bare disc) by shape, not hue alone
-       (WCAG 1.4.1). The outer ring stays. */
+    /* Motion is what separates working from input's frozen ping; with it
+       removed, punch an inner hole (dot -> donut) and add a static ring so
+       working differs from input (solid ringed disc) and done (bare disc) by
+       shape, not hue alone (WCAG 1.4.1). The ring carries the same 30%
+       weight as input's. */
     box-shadow:
       inset 0 0 0 2px var(--bg),
-      0 0 0 2px color-mix(in srgb, var(--status-working) 40%, transparent);
+      0 0 0 2px color-mix(in srgb, var(--status-working) 30%, transparent);
   }
 
   /* The ripple layer disappears entirely (not just paused mid-wave). */

package/css/31-switcher.css

@@ -178,6 +178,8 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   text-align: left;
+  /* Ink-centering trim, same as .wt-tab-label (see 30-tabs.css). */
+  text-box: trim-both cap alphabetic;
 }
 
 /* Keyboard button: hidden until a keyboardToggle is wired; filled while the key
@@ -418,6 +420,8 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  /* Ink-centering trim, same as .wt-tab-label (see 30-tabs.css). */
+  text-box: trim-both cap alphabetic;
 }
 
 /* The close sits flush at the row's right edge (no gap), vertically centered. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cplieger/web-terminal-ui",
-  "version": "4.5.1",
+  "version": "4.5.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": "GPL-3.0-or-later",
@@ -53,7 +53,7 @@
     "happy-dom": "20.11.0",
     "html-validate": "11.5.6",
     "knip": "6.27.0",
-    "prettier": "3.9.5",
+    "prettier": "3.9.6",
     "stylelint": "17.14.1",
     "stylelint-config-standard": "40.0.0",
     "typescript": "npm:@typescript/typescript6@6.0.2",