@cplieger/web-terminal-ui 3.0.4 → 3.1.0

package/css/03-v3.css

@@ -1,705 +0,0 @@
-/* ===== 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;
-  align-items: center;
-  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);
-  /* 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(--text-active);
-  color: var(--text);
-}
-
-.wt-tab-active {
-  background: color-mix(in oklch, var(--text) 10%, var(--surface));
-  color: var(--text);
-}
-
-.wt-tab-label {
-  max-width: 20ch;
-  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 (×): a centered, muted square glyph button with a box on hover.
-   font: inherit so the glyph uses the UI font and centers cleanly in its box. */
-.wt-tab-close {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  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);
-  font: inherit;
-  font-size: 1rem;
-  line-height: 1;
-  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 box (it
-   stretches to the strip height and uses the same active-tab fill), it centers
-   its glyph, and a left margin keeps its hover box clear of the last tab's. */
-.wt-tab-new {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  align-self: stretch;
-  min-width: 1.875rem;
-  margin-left: var(--sp-2);
-  padding: 0 var(--sp-1);
-  background: transparent;
-  border: none;
-  border-radius: var(--radius-inner);
-  color: color-mix(in oklch, var(--text) 60%, transparent);
-  font: inherit;
-  font-size: 1.1rem;
-  line-height: 1;
-  cursor: pointer;
-}
-
-.wt-tab-new:hover {
-  background: color-mix(in oklch, var(--text) 10%, var(--surface));
-  color: var(--text);
-}
-
-/* Close-all: a right-anchored text button (pushed to the far end of the strip). */
-.wt-tab-closeall {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  align-self: stretch;
-  margin-left: auto;
-  padding: 0 var(--sp-2);
-  background: transparent;
-  border: none;
-  border-radius: var(--radius-inner);
-  color: color-mix(in oklch, var(--text) 60%, transparent);
-  font-family: var(--font-ui);
-  font-size: 0.75rem;
-  white-space: nowrap;
-  cursor: pointer;
-}
-
-.wt-tab-closeall:hover {
-  background: var(--text-active);
-  color: var(--text);
-}
-
-/* Push the terminal surface below the fixed tab strip so it does not overlap
-   the first rows. The tabs feature marks the surface (.wt-with-topbar) and keeps
-   the measured strip height in --wt-tabbar-h. The surface is position:fixed
-   inset:0, so a top offset is what clears it. Desktop only: the strip is hidden
-   on a coarse pointer, where the switcher docks to the bottom instead, so the
-   surface stays full-height there. (The prior `.wt-tab-bar ~ .term` /
-   `:has(> .wt-tab-bar) .term` rule never matched: the bar lives inside a
-   display:contents region, so it is neither a DOM sibling nor an ancestor of
-   .term.) */
-@media (pointer: fine) {
-  .term.wt-with-topbar {
-    top: var(--wt-tabbar-h, 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;
-  /* 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);
-}
-
-.wt-status-dot[data-status="idle"] {
-  background: transparent;
-  border: 1.5px solid color-mix(in oklch, var(--text) 45%, transparent);
-}
-
-/* Agent working: solid pulsing purple, matching Kiro IDE's "thinking" color
-   (#a78bfa). 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: #a78bfa;
-  border-color: #a78bfa;
-  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;
-  }
-}
-
-/* ===== 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,
-.wt-animate .wt-tab-close,
-.wt-animate .wt-tab-new,
-.wt-animate .wt-tab-closeall {
-  transition:
-    background-color var(--dur-micro) var(--ease-standard),
-    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;
-  }
-}