@cplieger/web-terminal-ui 4.1.1 → 4.3.0

package/README.md

@@ -137,14 +137,14 @@ 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.                                                                                   |
-| `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`. 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.                                                                                                                                                                                             |
+| `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. |
 
 `createTerminal()` returns a handle: `focus()` re-focuses the terminal input
 (and opens the soft keyboard on touch); `send(bytes)` sends bytes to the active

package/css/00-tokens.css

@@ -44,6 +44,13 @@
     var(--text) 25%
   ); /* subtle edge: the fill lightened + slightly desaturated, matching the inactive chip's faint border rather than a vivid accent outline */
 
+  /* Status-dot palette (the activity vocabulary painted in 30-tabs.css; the
+     switcher notification dot reuses the same rules). The working and input
+     rings each derive from their own token in 30-tabs.css, so one override
+     recolors dot + ring together. */
+  --status-working: #d9f99d; /* agent working (pulses): pale lime */
+  --status-done: #22c55e; /* turn finished: solid green */
+  --status-input: #fb923c; /* action required: solid orange + ring */
   --radius: 0.75rem;
   --radius-inner: 0.5rem;
   /* Small square icon buttons (e.g. the 24px tab-close x): at that size the

package/css/30-tabs.css

@@ -376,33 +376,42 @@
   border: 1.5px solid color-mix(in oklch, var(--text) 45%, transparent);
 }
 
-/* Agent working: solid pulsing pale lime. Its high lightness keeps it clear on
-   every tab state, while its yellow-green hue complements the Kiro purple active
-   tab. Motion is the primary non-hue cue. Server-side this is driven by the OSC
-   9;4 progress signal, so it tracks agent activity, not the user typing at the
-   prompt. */
+/* Agent working: solid pulsing dot (--status-working; pale lime by default —
+   its high lightness keeps it clear on every tab state) wearing the same 2px
+   ring as input, so the two agent-turn states share one silhouette: a live
+   turn pulses (dot + ring together), a turn blocked on the user is that same
+   silhouette frozen and recolored (input, below). Motion separates working
+   from input; the ring separates both from done's bare disc. Server-side this
+   is driven by the OSC 9;4 progress signal, so it tracks agent activity, not
+   the user typing at the prompt. */
 :where(.wt-root) .wt-status-dot[data-status="working"] {
-  background: #d9f99d;
-  border-color: #d9f99d;
+  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-pulse 1.2s ease-in-out infinite;
 }
 
-/* Agent done / ready: solid saturated green, matching Kiro IDE's "Ready"
-   (#22c55e), no motion. Keeping it darker and more saturated than working's
-   pale lime makes the two states distinct by lightness as well as motion. */
+/* Agent done / ready: solid disc (--status-done), no motion. The default green
+   matches Kiro IDE's "Ready" (#22c55e), darker and more saturated than
+   working's default pale lime so the two states differ by lightness as well as
+   motion. */
 :where(.wt-root) .wt-status-dot[data-status="done"] {
-  background: #22c55e;
-  border-color: #22c55e;
-}
-
-/* User action required (permission / approval): solid orange (#fb923c), shifted
-   away from the old amber so it is clearly separated from both pale-lime working
-   and green done, plus a matching ring so it reads as "needs you" via shape as
-   well as hue. It persists until you act on or switch into the tab. */
+  background: var(--status-done);
+  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. */
 :where(.wt-root) .wt-status-dot[data-status="input"] {
-  background: #fb923c;
-  border-color: #fb923c;
-  box-shadow: 0 0 0 2px rgb(251 146 60 / 40%);
+  background: var(--status-input);
+  border-color: var(--status-input);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--status-input) 40%, transparent);
 }
 
 /* Exited: a dim hollow dot, static; distinct from idle by its lower opacity. */
@@ -417,15 +426,18 @@
   100% {
     /* Pin the animated layer's paint as well as its opacity. When working begins
        in the same frame that input/done ends, an opacity-only animation can
-       pulse the previously rasterized orange/green dot. */
-    background-color: #d9f99d;
-    border-color: #d9f99d;
+       pulse the previously rasterized input/done paint (the input ring
+       included, hence the box-shadow pin). */
+    background-color: var(--status-working);
+    border-color: var(--status-working);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--status-working) 40%, transparent);
     opacity: 1;
   }
 
   50% {
-    background-color: #d9f99d;
-    border-color: #d9f99d;
+    background-color: var(--status-working);
+    border-color: var(--status-working);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--status-working) 40%, transparent);
     opacity: 0.4;
   }
 }
@@ -434,10 +446,13 @@
 @media (prefers-reduced-motion: reduce) {
   :where(.wt-root) .wt-status-dot[data-status="working"] {
     animation: none;
-    /* The pulse is working's ONLY non-hue cue; with motion removed,
-       add a static shape cue (an inner hole -> a ring) so working differs
-       from done (a solid green disc) by shape, not hue alone (WCAG 1.4.1). */
-    box-shadow: inset 0 0 0 2px var(--bg);
+    /* The pulse is what separates working from input's frozen silhouette; with
+       motion 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. */
+    box-shadow:
+      inset 0 0 0 2px var(--bg),
+      0 0 0 2px color-mix(in srgb, var(--status-working) 40%, transparent);
   }
 }
 

package/css/31-switcher.css

@@ -280,10 +280,11 @@
 }
 
 /* Latest-wins background-tab notification dot on the switch button — the moved
-   attention cue. Amber = a background terminal needs input, green = a background
-   turn finished. Reuses the exact .wt-status-dot colours (30-tabs.css) so it
-   matches the per-tab dots. Hidden until the tabs feature sets data-status;
-   cleared when the list opens (expandSwitcher). */
+   attention cue: the input colour when a background terminal needs input, the
+   done colour when a background turn finished. Reuses the exact .wt-status-dot
+   rules (30-tabs.css, --status-* tokens) so it matches the per-tab dots. Hidden
+   until the tabs feature sets data-status; cleared when the list opens
+   (expandSwitcher). */
 :where(.wt-root) .wt-switcher-switch-dot {
   position: absolute;
   top: 6px;

package/package.json

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

package/src/features/tabs/index.ts

@@ -908,6 +908,48 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
           }
           switchTo(tab.id);
         });
+        // Keyboard interaction for the ARIA tabs pattern (WCAG 2.1.1): arrows
+        // move selection (wrapping), Home/End jump to the boundaries, Delete
+        // closes the focused tab. Pairs with the roving tabindex the kernel's
+        // registerTab manages (selected tab is tabIndex 0, others -1).
+        el.addEventListener("keydown", (e) => {
+          const current = tabList.indexOf(tab);
+          if (current < 0) {
+            return;
+          }
+
+          if (e.key === "Delete") {
+            e.preventDefault();
+            void close_(tab.id);
+            return;
+          }
+
+          let targetIndex: number;
+          switch (e.key) {
+            case "ArrowLeft":
+              targetIndex = (current - 1 + tabList.length) % tabList.length;
+              break;
+            case "ArrowRight":
+              targetIndex = (current + 1) % tabList.length;
+              break;
+            case "Home":
+              targetIndex = 0;
+              break;
+            case "End":
+              targetIndex = tabList.length - 1;
+              break;
+            default:
+              return;
+          }
+
+          e.preventDefault();
+          const target = tabList[targetIndex];
+          if (!target) {
+            return;
+          }
+          switchTo(target.id);
+          target.el.focus();
+        });
         close.addEventListener("click", (e) => {
           e.stopPropagation();
           void close_(tab.id);
@@ -1169,6 +1211,29 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
         }
       }
 
+      // moveTab shifts a tab one slot left or right in tabList and re-inserts
+      // every tab element in list order (before the "+") so the DOM matches.
+      // It is the single-pointer / non-drag alternative to the drag-and-drop
+      // reorder (WCAG 2.5.7), surfaced as Move left / Move right in the tab
+      // context menu.
+      function moveTab(id: string, delta: -1 | 1): void {
+        const from = tabList.findIndex((t) => t.id === id);
+        const to = from + delta;
+        if (from < 0 || to < 0 || to >= tabList.length) {
+          return;
+        }
+        const [tab] = tabList.splice(from, 1);
+        if (!tab) {
+          return;
+        }
+        tabList.splice(to, 0, tab);
+        for (const item of tabList) {
+          scroller.insertBefore(item.el, newBtn);
+        }
+        syncChrome();
+        ctx.announce(`Moved ${tab.display} to position ${String(to + 1)}`);
+      }
+
       // adoptSession adds a tab for a session that exists server-side but has no
       // local tab yet, e.g. one created in another browser (the server pushes it
       // over the status SSE, and the poll fallback lists it). This keeps every
@@ -1410,6 +1475,12 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
           return;
         }
         const n = tabList.length;
+        tabMenuItem("Move left", idx <= 0, () => {
+          moveTab(id, -1);
+        });
+        tabMenuItem("Move right", idx >= n - 1, () => {
+          moveTab(id, 1);
+        });
         tabMenuItem("Close", false, () => {
           void close_(id);
         });

package/src/kernel/a11y.ts

@@ -97,10 +97,14 @@ export function createTablist(panel: HTMLElement): TablistController {
     tab.setAttribute("role", "tab");
     tab.setAttribute("aria-controls", panelId);
     tab.setAttribute("aria-selected", "false");
+    // Roving tabindex (WAI-ARIA APG Tabs pattern): only the selected tab is in
+    // the Tab sequence; the others are focusable programmatically (arrow keys).
+    tab.tabIndex = -1;
 
     return {
       setSelected(selected: boolean): void {
         tab.setAttribute("aria-selected", selected ? "true" : "false");
+        tab.tabIndex = selected ? 0 : -1;
         if (selected) {
           // The panel is labelled by whichever tab is currently selected.
           panel.setAttribute("aria-labelledby", tabId);
@@ -113,6 +117,7 @@ export function createTablist(panel: HTMLElement): TablistController {
         tab.removeAttribute("role");
         tab.removeAttribute("aria-controls");
         tab.removeAttribute("aria-selected");
+        tab.removeAttribute("tabindex");
         if (panel.getAttribute("aria-labelledby") === tabId) {
           panel.removeAttribute("aria-labelledby");
         }