@cplieger/web-terminal-ui 3.0.4 → 3.1.0

package/css/05-tabs.css

@@ -0,0 +1,310 @@
+/* ===== Tabs: desktop strip + activity vocabulary (tabs feature) =====
+   The desktop top-bar tab strip, its per-tab chrome (label, close, add, the
+   right-click menu), the surface offset that clears the fixed strip, and the
+   shared activity-dot status vocabulary. The mobile tab chrome (switcher bar,
+   overview sheet, external key grid) lives in 06-mobile.css; all motion lives in
+   07-animations.css. */
+
+.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;
+  bottom: var(--safe-bottom);
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--sp-1);
+  /* Breathing room around the tab area (a roomier bottom bar). */
+  padding: var(--sp-2);
+  background: var(--surface);
+  backdrop-filter: var(--blur);
+  border-top: 1px solid var(--border);
+  overflow-x: auto;
+  z-index: 15;
+}
+
+.wt-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sp-1);
+  /* Browser-style tabs: 140px when there is room, shrinking toward a 90px floor
+     as the strip fills; past the floor the bar scrolls horizontally
+     (.wt-tab-bar has overflow-x: auto). box-sizing keeps the basis a true total. */
+  box-sizing: border-box;
+  flex: 0 1 140px;
+  min-width: 90px;
+  padding: var(--sp-2) var(--sp-2);
+  /* A transparent border is reserved on every tab so toggling the inactive
+     outline (below) never shifts the strip's layout. */
+  border: 1px solid transparent;
+  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;
+}
+
+/* Inactive tabs read as outlined chips (so adjacent tabs stay visually
+   separated) and take a subtle fill on hover. */
+.wt-tab:not(.wt-tab-active) {
+  border-color: var(--border);
+}
+
+.wt-tab:not(.wt-tab-active):hover {
+  background: var(--tab-hover-bg);
+  color: var(--tab-active-fg);
+}
+
+/* The active tab reads clearly above the inactive chips: a stronger fill.
+   Themeable (vibecli tints these purple). */
+.wt-tab-active {
+  background: var(--tab-active-bg);
+  color: var(--tab-active-fg);
+}
+
+/* The label flexes to fill the fixed-width tab and truncates with an ellipsis
+   (min-width: 0 lets a flex item shrink below its content width). */
+.wt-tab-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* A little breathing room after the activity dot, before the label. */
+.wt-tab-dot {
+  margin-right: 2px;
+}
+
+/* The tab close (x): a centered, muted square icon button with a box on hover.
+   Its glyph is an inline SVG (styled below), so flex-centering the button
+   centers it exactly. */
+.wt-tab-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 1.375rem;
+  height: 1.375rem;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-inner);
+  color: color-mix(in oklch, var(--text) 60%, transparent);
+  cursor: pointer;
+}
+
+.wt-tab-close:hover {
+  background: var(--text-active);
+  color: var(--text);
+}
+
+/* On an inactive tab the close appears only on hover, kept in the layout via
+   visibility so the tab width never jumps; on the active tab it is always shown. */
+.wt-tab:not(.wt-tab-active) .wt-tab-close {
+  visibility: hidden;
+}
+
+.wt-tab:not(.wt-tab-active):hover .wt-tab-close {
+  visibility: visible;
+}
+
+/* The add-tab (+) button: its hover box matches an active tab's fill and
+   stretches to the strip height; the 2px strip gap (not a custom margin) spaces
+   it from the last tab. Its glyph is an inline SVG. */
+.wt-tab-new {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  /* Square box that matches the tab height (a stretched flex item ignores
+     aspect-ratio against its SVG's intrinsic width, so size it explicitly). The
+     tab height is the close-button (1.375rem) + vertical padding (2×sp-2) +
+     border. */
+  width: calc(1.375rem + 2 * var(--sp-2) + 2px);
+  height: calc(1.375rem + 2 * var(--sp-2) + 2px);
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-inner);
+  color: color-mix(in oklch, var(--text) 60%, transparent);
+  cursor: pointer;
+}
+
+.wt-tab-new:hover {
+  background: var(--tab-active-bg);
+  color: var(--tab-active-fg);
+}
+
+/* The +/x icons are inline SVG so they center exactly in their flex-centered
+   button and stay symmetric regardless of the UI font (fixes the off-center
+   glyph and the lopsided "+"). The + is a touch larger and bolder than the x. */
+.wt-tab-close svg,
+.wt-tab-new svg {
+  stroke: currentcolor;
+  fill: none;
+  stroke-width: 2.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.wt-tab-close svg {
+  width: 13px;
+  height: 13px;
+}
+
+.wt-tab-new svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* The tab being dragged (reorder) dims while it moves. */
+.wt-tab-dragging {
+  opacity: 0.5;
+}
+
+/* Tab context menu (tabs feature, desktop right-click): Close / Close others /
+   Close to the right / Close to the left / Close all. Replaces the old bar
+   "Close all" button. Mirrors .wt-ctx-menu (a fixed surface popover, clamped
+   into the viewport by the feature); disabled items are dimmed and inert. */
+.wt-tab-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-tab-menu.visible {
+  display: flex;
+}
+
+.wt-tab-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;
+  white-space: nowrap;
+}
+
+.wt-tab-menu button:not(:disabled):hover {
+  background: var(--text-active);
+}
+
+.wt-tab-menu button:disabled {
+  color: color-mix(in oklch, var(--text) 35%, transparent);
+  cursor: default;
+}
+
+/* Pull the terminal surface up off the fixed 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 position:fixed inset:0, so a bottom offset
+   clears it. Desktop only: on a coarse pointer the strip is hidden and the
+   mobile switcher's inset is applied through viewport.ts (--wt-reserve-bottom)
+   instead. */
+@media (pointer: fine) {
+  .term.wt-with-tabbar {
+    bottom: var(--wt-tabbar-h, 44px);
+  }
+}
+
+/* ===== 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.
+
+   Opt-in: the dot is hidden unless its container carries .wt-status, which the
+   tabs feature adds only when a status source (activityMonitor) is wired. A
+   generic bash/sh terminal has no activity concept, so its tabs read as clean
+   labels; the agent consumer (vibecli) supplies the monitor and gets the dots.
+   The element stays in the DOM either way (JS sets data-status regardless), so
+   revealing it is a pure CSS switch. */
+.wt-status-dot {
+  display: none;
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  flex: none;
+  /* Default / idle (a new session with no turn yet): a hollow grey dot, so
+     "nothing has happened" reads as an outline rather than a filled state.
+     The fill (solid vs hollow) is the non-hue cue that separates the idle state
+     from the filled done/working/input states (WCAG 1.4.1). */
+  background: transparent;
+  border: 1.5px solid color-mix(in oklch, var(--text) 45%, transparent);
+}
+
+/* A status source is wired (the tabs feature marked the chrome .wt-status): show
+   the dots. Without this class the whole activity vocabulary stays invisible. */
+.wt-status .wt-status-dot {
+  display: block;
+}
+
+.wt-status-dot[data-status="idle"] {
+  background: transparent;
+  border: 1.5px solid color-mix(in oklch, var(--text) 45%, transparent);
+}
+
+/* Agent working: solid pulsing white. (Was purple to match Kiro IDE's thinking
+   colour, but that collides with the purple active-tab fill; white reads clearly
+   on every tab state.) 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. */
+.wt-status-dot[data-status="working"] {
+  background: #fff;
+  border-color: #fff;
+  animation: wt-pulse 1.2s ease-in-out infinite;
+}
+
+/* Agent done / ready: solid green, matching Kiro IDE's "Ready" (#22c55e), no
+   motion. The filled dot distinguishes it from the hollow idle without hue. */
+.wt-status-dot[data-status="done"] {
+  background: #22c55e;
+  border-color: #22c55e;
+}
+
+/* User action required (permission / approval): solid amber matching Kiro IDE's
+   "waiting-approval" (#fbbf24), plus a ring so it reads as "needs you" via shape
+   as well as hue. It persists until you act on or switch into the tab. */
+.wt-status-dot[data-status="input"] {
+  background: #fbbf24;
+  border-color: #fbbf24;
+  box-shadow: 0 0 0 2px oklch(85% 0.16 85deg / 40%);
+}
+
+/* Exited: a dim hollow dot, static; distinct from idle by its lower opacity. */
+.wt-status-dot[data-status="exited"] {
+  background: transparent;
+  border: 1.5px solid color-mix(in oklch, var(--text) 30%, transparent);
+  opacity: 0.5;
+}
+
+@keyframes wt-pulse {
+  50% {
+    opacity: 0.4;
+  }
+}
+
+/* Reduced-motion (or the animations feature off): drop the pulse, keep color. */
+@media (prefers-reduced-motion: reduce) {
+  .wt-status-dot[data-status="working"] {
+    animation: none;
+  }
+}

package/css/06-mobile.css

@@ -0,0 +1,335 @@
+/* ===== Mobile tab chrome (tabs feature, section 12) =====
+   The bottom bar (switcher) is the mobile tab surface, the externally-driven key
+   grid docks above it, and the overview sheet lists every tab. The desktop strip
+   is hidden on a coarse pointer and these appear instead; all motion (bar number
+   fade, sheet slide) lives in 07-animations.css. */
+
+/* The switcher is 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;
+    flex-direction: column; /* bar on top; the tab list expands below it as the bar slides up */
+    background: var(--surface);
+    backdrop-filter: var(--blur);
+    border-top: 1px solid var(--border);
+    z-index: 25;
+  }
+}
+
+/* The always-visible bar row: active tab + keyboard + "+". The padding gives the
+   active-tab chip breathing room above/below within the bar, matching the
+   desktop strip (both use --sp-2). */
+.wt-switcher-bar {
+  display: flex;
+  align-items: stretch;
+  gap: var(--sp-1);
+  padding: var(--sp-2);
+}
+
+/* The other tabs, revealed below the bar row on expand (the bar slides up).
+   Collapsed to zero height; expanded caps the height and scrolls. The max-height
+   transition lives in 07-animations.css. */
+.wt-switcher-list {
+  list-style: none;
+  margin: 0;
+  /* Match the bar's horizontal padding (--sp-2) so a listed row lines up with
+     the bar: its dot/label left-aligns with the active tab's, and its right edge
+     aligns with the "+" button's right edge (both inset --sp-2 from the switcher
+     edges). No separator border between the bar and the list — the active tab's
+     fill already sets it apart. */
+  padding: 0 var(--sp-2);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-height: 0;
+  overflow: hidden;
+  /* max-height caps the whole box (incl. the expanded padding) so an interactive
+     pull from collapsed starts at a true zero height rather than a padding-tall
+     sliver. */
+  box-sizing: border-box;
+}
+
+.wt-switcher-expanded .wt-switcher-list {
+  max-height: 50vh;
+  overflow-y: auto;
+  padding-top: var(--sp-1);
+  padding-bottom: var(--sp-1);
+}
+
+/* The active-tab row: a select/swipe surface plus a close (x) overlaid at the
+   right, mirroring the listed rows (two buttons can't nest, so the close is a
+   sibling over the surface's reserved right padding). The wrap is the flex item
+   that grows in the bar (and fills the space when the keyboard button collapses
+   on expand). */
+.wt-switcher-current-wrap {
+  position: relative;
+  flex: 1 1 auto;
+  display: flex;
+  min-width: 0;
+  /* Clip the swiping content (dot + label + close all translate on a swipe) at
+     the tab's edges, so the close slides off/in cleanly rather than spilling
+     over the "+" button. */
+  overflow: hidden;
+}
+
+.wt-switcher-current {
+  position: relative;
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  min-height: var(--touch-target);
+  /* Right padding reserves room for the close (x) overlaid inside the row. */
+  padding: 0 var(--touch-target) 0 var(--sp-2);
+  /* The bar row always represents the active tab, so it wears the active-tab
+     fill/foreground the desktop strip uses (themeable; purple in vibecli). */
+  background: var(--tab-active-bg);
+  color: var(--tab-active-fg);
+  border: none;
+  border-radius: var(--radius-inner);
+  font-family: var(--font-ui);
+  font-size: 0.875rem;
+  cursor: pointer;
+  overflow: hidden;
+  /* Own both horizontal (switch) and vertical (swipe-up = overview) gestures.
+     The bar is fixed with nothing to scroll, so claiming the gesture is safe and
+     makes swipe detection reliable under passive listeners. */
+  touch-action: none;
+}
+
+/* The active row's close (x): overlaid at the right over the row's reserved
+   padding, mirroring the listed rows' close. Hover fill only on real hover
+   pointers so it never sticks white after a touch (a removed tab shifts the
+   list under the finger otherwise). */
+.wt-switcher-current-close {
+  position: absolute;
+  /* Centre vertically via top/bottom (not a translateY transform), so transform
+     is free for the swipe translate — the close moves with the dot + label. And
+     no right offset, so it sits flush at the tab's right edge (no gap). */
+  top: 0;
+  bottom: 0;
+  right: 0;
+  color: color-mix(in oklch, var(--text) 55%, transparent);
+}
+
+@media (hover: hover) {
+  .wt-switcher-current-close:hover {
+    color: var(--text);
+  }
+}
+
+/* Press feedback: brighten the active fill slightly (a lighter press over an
+   already-filled row). */
+.wt-switcher-current:active {
+  background: color-mix(in oklch, var(--tab-active-bg), var(--tab-active-fg) 12%);
+}
+
+/* The row's content (dot + label + position). It fills the row and lays its
+   parts out; a horizontal swipe translates it (clipped by the row's
+   overflow: hidden) so the active tab area physically slides with the finger,
+   and the incoming tab's label slides in from the swipe direction on commit. */
+.wt-switcher-current-inner {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.wt-switcher-label {
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+}
+
+/* Keyboard button: hidden until a keyboardToggle is wired; filled while the key
+   grid is open so its toggled state reads at a glance. An explicit width (not
+   just the wt-btn min-width) makes it animatable: when the tab list expands the
+   button collapses to zero width and fades out (the key grid is closed too, in
+   JS), and the active row flex-grows to fill the freed space. */
+.wt-switcher-kb {
+  width: var(--touch-target);
+  /* Override .wt-btn's min-width (the 44px tap floor). min-width is NOT
+     transitioned, so on collapse it would revert to 44px instantly and clamp the
+     animating width back to full — the button snapped to size on close while
+     animating smoothly on open. The 44px open size still holds via `width`. */
+  min-width: 0;
+  /* Drop the user-agent button padding: with border-box it would floor the
+     collapsed width at the padding (≈12px) instead of a clean 0. The icon
+     centres via wt-btn. */
+  padding: 0;
+  overflow: hidden;
+}
+
+.wt-switcher-kb[hidden] {
+  display: none;
+}
+
+.wt-switcher-kb.wt-active {
+  background: var(--tab-hover-bg);
+  color: var(--tab-active-fg);
+}
+
+/* Sticky-Ctrl armed: invert the keyboard button (the same solid fill the armed
+   Ctrl key uses) while a Ctrl press is pending, so the modifier stays visible
+   even with the key grid — and its own Ctrl button — closed. After .wt-active so
+   the armed fill wins when the grid is also open. */
+.wt-switcher-kb.wt-armed {
+  background: var(--text);
+  color: var(--bg);
+}
+
+.wt-switcher-expanded .wt-switcher-kb {
+  width: 0;
+  /* Absorb the flex gap the collapsed button would otherwise leave behind. */
+  margin-inline-start: calc(-1 * var(--sp-1));
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* Mobile "+": the primary action, carried in the accent colour so it reads as
+   permanent and prominent. Hover fill is gated to real hover pointers: on touch,
+   :hover sticks after a tap (no pointer-leave), so the purple would linger — the
+   press feedback there comes from :active, which clears on release. */
+.wt-switcher-new {
+  flex: none;
+  color: var(--accent);
+}
+
+@media (hover: hover) {
+  .wt-switcher-new:hover {
+    background: var(--tab-hover-bg);
+  }
+}
+
+.wt-switcher-new:active {
+  background: var(--tab-hover-bg);
+}
+
+/* Aggregate needs-input attention now rides the active surface (the separate
+   overview button is gone): a background tab is blocked on you, and a tap /
+   swipe-up here opens the overview to resolve it. Shape + color (an inset ring
+   plus a corner glyph), never hue alone (WCAG 1.4.1). */
+.wt-switcher-current[data-attention="input"] {
+  box-shadow: inset 0 0 0 2px oklch(70% 0.18 25deg / 45%);
+}
+
+.wt-switcher-current[data-attention="input"]::after {
+  content: "";
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: oklch(70% 0.18 25deg);
+}
+
+/* ===== Externally-driven key grid (tabbed presets, WS3) =====
+   In the tabbed presets the mobile toolbar hides its own toggle (the tab bar's
+   keyboard button drives it) and the grid docks above the bar on the right, to
+   the left of where scroll-to-bottom sits. It collapses to fully hidden, since
+   there is no in-grid toggle to keep visible. */
+@media (pointer: coarse) {
+  .wt-toolbar-external .kb-toggle {
+    display: none;
+  }
+
+  .key-toolbar.wt-toolbar-external {
+    top: auto;
+    right: calc(var(--sp-3) + var(--touch-target) + var(--sp-2));
+    bottom: calc(
+      var(--wt-switcher-h) + var(--safe-bottom, 0px) + var(--kb-inset, 0px) + var(--sp-2)
+    );
+    grid-template-columns: repeat(4, var(--touch-target));
+  }
+
+  .key-toolbar.wt-toolbar-external.collapsed {
+    display: none;
+  }
+}
+
+/* ===== Expanded tab-list rows (tabs feature) =====
+   One row per OTHER tab in the expanded list: a stretched select target (dot +
+   label) with the close (x) laid inside at the right, mirroring the desktop
+   tab's merged chrome. */
+.wt-switcher-row {
+  position: relative;
+  display: flex;
+}
+
+.wt-switcher-row-select {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  min-height: var(--touch-target);
+  /* Right padding reserves room for the close (x) overlaid inside the box. */
+  padding: 0 var(--touch-target) 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;
+}
+
+@media (hover: hover) {
+  .wt-switcher-row-select:hover {
+    background: var(--tab-hover-bg);
+  }
+}
+
+/* Press / touch-hold feedback on a listed (inactive) tab: the same subtle fill
+   the "+" button uses (--tab-hover-bg), NOT the stronger active-tab fill, so an
+   inactive row never looks like the active one. */
+.wt-switcher-row-select:active {
+  background: var(--tab-hover-bg);
+}
+
+.wt-switcher-row-label {
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The close sits flush at the row's right edge (no gap), vertically centered. */
+.wt-switcher-row-close {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  color: color-mix(in oklch, var(--text) 55%, transparent);
+}
+
+/* Hover only on real hover pointers: on touch, :hover sticks after a tap, so
+   when closing a tab shifts the list under the finger the newly-under close
+   would latch white. Touch feedback comes from the surrounding row's :active. */
+@media (hover: hover) {
+  .wt-switcher-row-close:hover {
+    color: var(--text);
+  }
+}