@cplieger/web-terminal-ui 2.1.4 → 3.0.1

package/css/03-v3.css

@@ -0,0 +1,590 @@
+/* ===== v3 kernel + feature styles =====
+   The v3 kernel builds named layout regions (wt-region-*) as siblings of the
+   terminal surface (.term, styled in 02-app.css), and features mount chrome into
+   region slots. The regions are transparent groupings (display: contents) so
+   each feature's element floats over the fixed-inset terminal exactly as the
+   pre-v3 chrome did; the terminal-core, key-toolbar (.key-toolbar/.kb-*), and
+   cursor/color styles in 02-app.css are reused unchanged.
+
+   Note: this is the pragmatic first-cut v3 stylesheet. The design's section 22.8
+   per-feature CSS split (core.css + mobile-toolbar.css/context-menu.css/tabs.css/
+   activity.css/animations.css + a css-manifest.mjs assembler) is a tracked
+   follow-up; the classes below are the seams that split will carve along. */
+
+/* Regions + slots are transparent: they group a feature's DOM without imposing
+   layout, so a feature element inside them positions itself (fixed) over the
+   terminal, and an absent feature contributes nothing. */
+.wt-region,
+.wt-slot {
+  display: contents;
+}
+
+/* ===== Shared button primitive (44px touch target) ===== */
+.wt-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--touch-target);
+  min-height: var(--touch-target);
+  background: transparent;
+  color: var(--text);
+  border: none;
+  border-radius: var(--radius-inner);
+  font: inherit;
+  cursor: pointer;
+  touch-action: manipulation;
+  user-select: none;
+}
+
+.wt-btn:active {
+  background: var(--text-active);
+}
+
+.wt-btn svg {
+  width: var(--icon);
+  height: var(--icon);
+  stroke: currentcolor;
+  fill: none;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* ===== Toast (kernel shared primitive) ===== */
+.wt-toast {
+  position: fixed;
+  bottom: calc(var(--sp-3) + var(--kb-inset, 0px));
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: calc(100% - 2 * var(--sp-3));
+  padding: var(--sp-1) var(--sp-3);
+  background: var(--surface);
+  backdrop-filter: var(--blur);
+  border: 1px solid oklch(70% 0.1 160deg / 30%);
+  border-radius: var(--radius);
+  color: var(--text);
+  font-family: var(--font-ui);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  text-align: center;
+  z-index: 40;
+  display: none;
+  opacity: 0;
+}
+
+.wt-toast.visible {
+  display: block;
+  opacity: 1;
+}
+
+/* ===== Connection banner (connectionBanner feature) ===== */
+.wt-conn-banner {
+  position: fixed;
+  bottom: calc(var(--sp-3) + var(--kb-inset, 0px));
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: calc(100% - 2 * var(--sp-3));
+  padding: var(--sp-1) var(--sp-3);
+  background: var(--surface);
+  backdrop-filter: var(--blur);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text);
+  font-family: var(--font-ui);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  text-align: center;
+  z-index: 20;
+  display: none;
+}
+
+.wt-conn-banner.visible {
+  display: block;
+}
+
+.wt-conn-banner[data-state="reconnecting"] {
+  border-color: oklch(70% 0.15 60deg / 40%);
+}
+
+.wt-conn-banner[data-state="offline"] {
+  color: #f55;
+  border-color: oklch(60% 0.2 25deg / 50%);
+}
+
+.wt-conn-banner[data-state="restarted"] {
+  color: #fa5;
+  border-color: oklch(70% 0.15 60deg / 40%);
+}
+
+/* Desktop: move both the banner and toast to top-center so they don't collide
+   with the bottom-anchored scroll-to-bottom control. */
+@media (pointer: fine) {
+  .wt-conn-banner,
+  .wt-toast {
+    top: var(--sp-3);
+    bottom: auto;
+  }
+}
+
+/* ===== Scroll-to-bottom (scrollToBottom feature) ===== */
+.wt-scroll-bottom {
+  position: fixed;
+  left: 50%;
+  bottom: calc(var(--safe-bottom, 0px) + var(--sp-3) + var(--kb-inset, 0px));
+  transform: translateX(-50%);
+  gap: var(--sp-1);
+  padding: var(--sp-2) var(--sp-3);
+  background: var(--surface);
+  backdrop-filter: var(--blur);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  font-size: 0.875rem;
+  font-weight: 500;
+  z-index: 10;
+  display: none;
+}
+
+/* The scroll slot gets .scrolled-up toggled by the feature; show the button. */
+.wt-slot-scroll.scrolled-up .wt-scroll-bottom {
+  display: inline-flex;
+}
+
+/* ===== Context menu (contextMenu feature) ===== */
+.wt-ctx-menu {
+  position: fixed;
+  display: none;
+  flex-direction: column;
+  background: var(--surface);
+  backdrop-filter: var(--blur);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: var(--sp-1);
+  z-index: 30;
+}
+
+.wt-ctx-menu.visible {
+  display: flex;
+}
+
+.wt-ctx-menu button {
+  background: transparent;
+  color: var(--text);
+  border: none;
+  border-radius: var(--radius-inner);
+  font-family: var(--font-ui);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  padding: var(--sp-1) var(--sp-3);
+  cursor: pointer;
+  text-align: left;
+}
+
+.wt-ctx-menu button:active {
+  background: var(--text-active);
+}
+
+@media (pointer: coarse) {
+  .wt-ctx-menu button {
+    min-height: var(--touch-target);
+    padding-block: var(--sp-2);
+    touch-action: manipulation;
+  }
+}
+
+/* ===== Tab bar (tabs feature) ===== */
+.wt-region-top-bar {
+  /* On desktop the tab strip docks to the top; the region is transparent, so
+     the bar element below owns its own fixed placement. */
+  display: contents;
+}
+
+.wt-tab-bar {
+  position: fixed;
+  top: calc(var(--safe-top, 0px) + var(--vv-top, 0px));
+  left: 0;
+  right: 0;
+  display: flex;
+  gap: 2px;
+  padding: var(--sp-1);
+  background: var(--surface);
+  backdrop-filter: var(--blur);
+  border-bottom: 1px solid var(--border);
+  overflow-x: auto;
+  z-index: 15;
+}
+
+.wt-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sp-1);
+  padding: var(--sp-1) var(--sp-2);
+  border-radius: var(--radius-inner);
+  color: color-mix(in oklch, var(--text) 70%, transparent);
+  font-family: var(--font-ui);
+  font-size: 0.8125rem;
+  cursor: pointer;
+  white-space: nowrap;
+  user-select: none;
+}
+
+.wt-tab-active {
+  background: color-mix(in oklch, var(--text) 10%, var(--surface));
+  color: var(--text);
+}
+
+.wt-tab-label {
+  max-width: 14ch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.wt-tab-close {
+  background: transparent;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  padding: 0 var(--sp-1);
+  border-radius: var(--radius-inner);
+  opacity: 0.6;
+}
+
+.wt-tab-close:hover {
+  opacity: 1;
+}
+
+.wt-tab-new {
+  background: transparent;
+  border: none;
+  color: var(--text);
+  cursor: pointer;
+  font-size: 1.1rem;
+  padding: 0 var(--sp-2);
+  border-radius: var(--radius-inner);
+}
+
+/* Shift the terminal down so the fixed tab bar does not overlap the first
+   rows. The tab bar is ~36px tall; the terminal padding-top absorbs it. */
+.wt-tab-bar ~ .term,
+:has(> .wt-tab-bar) .term {
+  padding-top: 40px;
+}
+
+/* ===== Activity dots (activityMonitor via tabs) =====
+   Four-state, distinguishable without color (shape + motion, not hue alone),
+   per section 12 / WCAG 1.4.1. The one .wt-status-dot vocabulary is shared by
+   the desktop strip, the mobile switcher, and the overview sheet rows. */
+.wt-status-dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  flex: none;
+  background: color-mix(in oklch, var(--text) 40%, transparent);
+}
+
+.wt-status-dot[data-status="working"] {
+  background: oklch(75% 0.15 90deg);
+  animation: wt-pulse 1.2s ease-in-out infinite;
+}
+
+.wt-status-dot[data-status="idle"] {
+  background: color-mix(in oklch, var(--text) 40%, transparent);
+}
+
+.wt-status-dot[data-status="input"] {
+  background: oklch(70% 0.18 25deg);
+  /* A ring so needs-input reads distinctly without relying on hue alone. */
+  box-shadow: 0 0 0 2px oklch(70% 0.18 25deg / 40%);
+}
+
+.wt-status-dot[data-status="exited"] {
+  background: transparent;
+  border: 1px solid color-mix(in oklch, var(--text) 40%, transparent);
+}
+
+/* Reduced-motion (or animations feature off): drop the pulse, keep the color. */
+@keyframes wt-pulse {
+  50% {
+    opacity: 0.4;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wt-status-dot[data-status="working"] {
+    animation: none;
+  }
+}
+
+/* ===== Animations feature =====
+   Motion is off unless the animations feature marks the root .wt-animate (and
+   the OS is not in reduced-motion). Transitions are declared here, gated on it. */
+.wt-animate .wt-toast,
+.wt-animate .wt-conn-banner,
+.wt-animate .wt-scroll-bottom,
+.wt-animate .wt-ctx-menu {
+  transition:
+    opacity var(--dur-standard) var(--ease-standard),
+    display var(--dur-standard) allow-discrete;
+}
+
+.wt-animate .wt-tab {
+  transition: background-color var(--dur-micro) var(--ease-standard);
+}
+
+/* ===== Mobile bottom-switcher (tabs feature, section 12) =====
+   The switcher is the mobile tab surface: it shows the active tab and a
+   position indicator as a tap/swipe target, plus a >=44px overview control that
+   carries the aggregate needs-input badge. Hidden on a fine pointer, where the
+   top strip is used instead; the top strip is correspondingly hidden on a
+   coarse pointer so tabs live in the thumb zone. */
+.wt-switcher {
+  display: none;
+}
+
+@media (pointer: coarse) {
+  .wt-tab-bar,
+  .wt-tab-new {
+    display: none;
+  }
+
+  .wt-switcher {
+    position: fixed;
+    left: 0;
+    right: 0;
+    /* Lift above the soft keyboard rather than hiding, so the switch surface
+       stays reachable in the terminal's primary working state (section 12). */
+    bottom: calc(var(--safe-bottom, 0px) + var(--kb-inset, 0px));
+    display: flex;
+    align-items: stretch;
+    gap: var(--sp-1);
+    padding: var(--sp-1);
+    background: var(--surface);
+    backdrop-filter: var(--blur);
+    border-top: 1px solid var(--border);
+    z-index: 25;
+  }
+}
+
+.wt-switcher-current {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  min-height: var(--touch-target);
+  padding: 0 var(--sp-2);
+  background: transparent;
+  color: var(--text);
+  border: none;
+  border-radius: var(--radius-inner);
+  font-family: var(--font-ui);
+  font-size: 0.875rem;
+  cursor: pointer;
+  overflow: hidden;
+  /* Read horizontal swipe here; let vertical scrolling pass through. */
+  touch-action: pan-y;
+}
+
+.wt-switcher-current:active {
+  background: var(--text-active);
+}
+
+.wt-switcher-label {
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+}
+
+.wt-switcher-pos {
+  flex: none;
+  color: color-mix(in oklch, var(--text) 60%, transparent);
+  font-variant-numeric: tabular-nums;
+  font-size: 0.8125rem;
+}
+
+.wt-switcher-overview {
+  position: relative;
+  flex: none;
+  padding: 0 var(--sp-3);
+  font-family: var(--font-ui);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  border: 1px solid var(--border);
+}
+
+.wt-switcher-count {
+  font-variant-numeric: tabular-nums;
+}
+
+/* Aggregate needs-input attention: a background tab is blocked on you. Shape +
+   color (a ring plus a corner glyph), never hue alone (WCAG 1.4.1). */
+.wt-switcher-overview[data-attention="input"] {
+  border-color: oklch(70% 0.18 25deg);
+  box-shadow: 0 0 0 2px oklch(70% 0.18 25deg / 35%);
+}
+
+.wt-switcher-overview[data-attention="input"]::after {
+  content: "";
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: oklch(70% 0.18 25deg);
+}
+
+/* ===== Overview sheet (tabs feature, section 12) =====
+   A modal, focus-trapped bottom sheet listing every tab; distinct from the
+   non-modal overlay (context menu). Opened from the switcher; mobile-only in
+   practice (the switcher that opens it is hidden on a fine pointer). */
+.wt-sheet-scrim {
+  position: fixed;
+  inset: 0;
+  background: oklch(0% 0 0deg / 50%);
+  z-index: 45;
+  display: none;
+}
+
+.wt-sheet-scrim.visible {
+  display: block;
+}
+
+.wt-sheet {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-2);
+  padding: var(--sp-3);
+  padding-bottom: calc(var(--sp-3) + var(--safe-bottom, 0px));
+  background: var(--surface);
+  backdrop-filter: var(--blur);
+  border-top: 1px solid var(--border);
+  border-radius: var(--radius) var(--radius) 0 0;
+  z-index: 46;
+  overflow-y: auto;
+}
+
+.wt-sheet[hidden] {
+  display: none;
+}
+
+.wt-sheet-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sp-2);
+}
+
+.wt-sheet-title {
+  font-family: var(--font-ui);
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.wt-sheet-new {
+  flex: none;
+  padding: 0 var(--sp-3);
+  font-family: var(--font-ui);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  border: 1px solid var(--border);
+}
+
+.wt-sheet-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.wt-sheet-row {
+  display: flex;
+  align-items: stretch;
+  gap: var(--sp-1);
+}
+
+.wt-sheet-select {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  min-height: var(--touch-target);
+  padding: 0 var(--sp-2);
+  background: transparent;
+  color: var(--text);
+  border: none;
+  border-radius: var(--radius-inner);
+  font-family: var(--font-ui);
+  font-size: 0.875rem;
+  text-align: left;
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.wt-sheet-row-active .wt-sheet-select {
+  background: color-mix(in oklch, var(--text) 10%, var(--surface));
+}
+
+.wt-sheet-select:active {
+  background: var(--text-active);
+}
+
+.wt-sheet-row-label {
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wt-sheet-close {
+  flex: none;
+  border: 1px solid var(--border);
+  font-size: 1rem;
+}
+
+/* ===== Catching-up cue (tabs feature, sections 12/13) =====
+   A switched-into tab's cached screen is stale until its resume delta lands, so
+   it must not read as live. This unobtrusive cue shows only if the delta has not
+   arrived shortly after the switch, and clears on the first screen frame. */
+.wt-catchup {
+  position: fixed;
+  top: calc(var(--safe-top, 0px) + var(--vv-top, 0px) + 44px);
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 2px var(--sp-2);
+  background: var(--surface);
+  backdrop-filter: var(--blur);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: color-mix(in oklch, var(--text) 75%, transparent);
+  font-family: var(--font-ui);
+  font-size: 0.75rem;
+  z-index: 24;
+  display: none;
+}
+
+.wt-catchup.visible {
+  display: block;
+}
+
+/* ===== Switch motion (animations feature) =====
+   A subtle content fade on switch, so the cache-first repaint reads as a change
+   rather than a flicker. Gated on .wt-animate (and prefers-reduced-motion is
+   respected because the animations feature does not set .wt-animate then). */
+.wt-animate .term.wt-switching .term-output {
+  animation: wt-switch-in var(--dur-standard) var(--ease-standard);
+}
+
+@keyframes wt-switch-in {
+  from {
+    opacity: 0.55;
+  }
+}

package/css/MANIFEST

@@ -3,3 +3,4 @@
 00-tokens.css
 01-reset.css
 02-app.css
+03-v3.css

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@cplieger/web-terminal-ui",
-  "version": "2.1.4",
+  "version": "3.0.1",
   "type": "module",
-  "description": "Reference touch-first browser UI for @cplieger/web-terminal-engine: textarea input model, mobile key toolbar, context menu, IME, predictive echo, viewport/keyboard-inset handling, and CSS. One mount() call.",
+  "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",
   "exports": {
-    ".": "./src/index.ts"
+    ".": "./src/index.ts",
+    "./presets": "./src/presets.ts"
   },
+  "sideEffects": [
+    "**/*.css"
+  ],
   "types": "./src/index.ts",
   "scripts": {
     "typecheck": "tsgo -p tsconfig.json",
@@ -21,7 +25,7 @@
     "verify": "bash scripts/verify.sh"
   },
   "peerDependencies": {
-    "@cplieger/web-terminal-engine": ">=1.4.0"
+    "@cplieger/web-terminal-engine": ">=2.0.0"
   },
   "devDependencies": {
     "@eslint/js": "10.0.1",
@@ -32,7 +36,7 @@
     "happy-dom": "20.10.6",
     "html-validate": "11.5.3",
     "knip": "6.23.0",
-    "prettier": "3.9.3",
+    "prettier": "3.9.4",
     "stylelint": "17.14.0",
     "stylelint-config-standard": "40.0.0",
     "typescript": "6.0.3",

package/scaffold/index.html

@@ -16,9 +16,9 @@
 </style>
 </head>
 <body>
-<!-- mount() builds the entire terminal UI inside this single root element.
-     The loading overlay is a sibling (not a child of the root) so mount never
-     clears it; mount fades it out once the first frame renders. -->
+<!-- createTerminal() builds the entire terminal UI inside this single root
+     element. The loading overlay is a sibling (not a child of the root) so it is
+     never cleared; it is faded out once the first frame renders. -->
 <div id="terminal"></div>
 <div id="loading"><div class="spin"></div>Loading…</div>
 <!-- Deployment-specific: the importmap resolves the bare package specifiers to
@@ -27,13 +27,15 @@
 {
   "imports": {
     "@cplieger/web-terminal-engine": "/vendor/cplieger-web-terminal-engine/index.js",
-    "@cplieger/web-terminal-ui": "/vendor/cplieger-web-terminal-ui/index.js"
+    "@cplieger/web-terminal-ui": "/vendor/cplieger-web-terminal-ui/index.js",
+    "@cplieger/web-terminal-ui/presets": "/vendor/cplieger-web-terminal-ui/presets.js"
   }
 }
 </script>
 <script type="module">
-  import { mount } from "@cplieger/web-terminal-ui";
-  mount(document.getElementById("terminal"), { loading: document.getElementById("loading") });
+  import { createTerminal } from "@cplieger/web-terminal-ui";
+  import { presetTabbed } from "@cplieger/web-terminal-ui/presets";
+  createTerminal(document.getElementById("terminal"), { features: presetTabbed(), loading: document.getElementById("loading") });
 </script>
 </body>
 </html>

package/src/composition.ts

@@ -64,6 +64,21 @@ export function isComposing(): boolean {
   return composing || sendingComposition;
 }
 
+/** Abort any in-flight composition without sending, and clear the textarea.
+ *  The kernel calls this on a tab switch (detach): committing half-composed IME
+ *  text to either the outgoing or the incoming session is wrong, so we discard
+ *  it (design 5.1, "end any composition ... or cancel"). Clearing
+ *  sendingComposition also neutralizes a just-fired compositionend whose
+ *  deferred send is still pending on the microtask/timeout queue, so it cannot
+ *  land on whoever is active after the switch. */
+export function cancelComposition(): void {
+  composing = false;
+  sendingComposition = false;
+  compositionView.textContent = "";
+  compositionView.classList.remove("active");
+  resetToPlaceholder(textarea);
+}
+
 function onStart(): void {
   composing = true;
   const start = textarea.selectionStart;