@cplieger/web-terminal-ui 1.0.0

package/css/02-app.css

@@ -0,0 +1,730 @@
+/* ===== Terminal ===== */
+.term {
+  position: fixed;
+  inset: 0;
+  overflow: hidden auto;
+  /* The scroll controller (vterm scroll.ts) is the single owner of
+     scrollTop: it pins to the bottom only while the user is following,
+     and does nothing while they are scrolled up reading. New output
+     always appends at the tail (the absolute-index model never inserts
+     above the viewport), so native scroll anchoring is safe to leave on
+     and keeps the read position steady on the rare insert-above. */
+  overflow-anchor: auto;
+  font-family: var(--font-mono);
+  font-size: 14px;
+  line-height: 17px;
+  padding: 4px;
+  background: var(--bg);
+  color: var(--text);
+}
+
+.term-row {
+  white-space: pre;
+  min-height: 17px;
+  font-variant-ligatures: none;
+  font-feature-settings:
+    "liga" 0,
+    "calt" 0;
+  font-kerning: none;
+
+  /* Note: do NOT use `contain: layout style` here. iOS Safari has
+     paint-suppression bugs in WebKit where layout-contained elements
+     receiving frequent replaceChildren() updates can drop paint
+     invalidations for inline children whose styling-only changes
+     don't trigger layout — most visibly the inverse-styled "cursor"
+     span Ink draws inside our rows, which would visually stick at
+     its old column on space/arrow key presses until a content-
+     changing keystroke forced a repaint. Without `contain`, every
+     row update participates in normal paint flow and the cursor
+     cell tracks the column on every flush. */
+}
+
+.term-row:empty::after {
+  content: "\00a0";
+}
+
+/* "earlier output trimmed" marker (vterm renderer inserts .term-trim-marker
+   as the first row when history older than the buffer holds was evicted —
+   client-side cap or a server-reported resume gap). A quiet, centered,
+   non-selectable divider so the user knows scrollback doesn't go further up. */
+.term-trim-marker {
+  color: color-mix(in oklch, var(--text) 45%, transparent);
+  font-size: 0.6875rem;
+  text-align: center;
+  padding: 2px 0;
+  opacity: 0.7;
+  user-select: none;
+  font-family: var(--font-ui);
+}
+
+.term-input {
+  /* Keep the input INSIDE the viewport (not at left:-9999px) — iOS
+   * Safari is increasingly strict about not opening the virtual
+   * keyboard for off-screen inputs, especially during heavy DOM
+   * mutations like a streaming agent turn. A 1×1 fully-transparent
+   * pinned-bottom input is "visible enough" for iOS without being
+   * tappable or perceptible to the user. opacity:0 + size:1px hides
+   * it visually; pointer-events:none makes sure stray taps don't
+   * land on it (programmatic focus() still works). */
+  position: fixed;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+  border: 0;
+  resize: none;
+  outline: none;
+  /* iOS auto-zooms on input focus when the input's font-size < 16px.
+   * Lock to 16px so the keyboard pop doesn't trigger a viewport zoom
+   * (which would also defer the keyboard show animation). */
+  font-size: 16px;
+}
+
+.term-output {
+  position: relative;
+  outline: none;
+
+  /* Display-only surface: native text selection works (the hterm
+     pattern), but it is NOT contenteditable and is never focused — the
+     textarea owns input, the keyboard, and IME. Keeping the editable
+     element off the scroll content is what lets the first touch-drag
+     scroll instead of placing a caret (bug 6), and not re-rendering it
+     as an editable keeps a selection alive across redraws (bug 1). */
+  user-select: text;
+}
+
+/* IME composition view: floating overlay positioned at the cursor
+   while the user is composing via an IME / autocorrect / dictation.
+   composition.ts mirrors the in-progress text here. CSS direction:rtl
+   keeps the visual focus on the trailing edge for long compositions
+   so the candidate popup tracks what the user is typing.
+   Visibility is gated by the `.active` class so empty state doesn't
+   render a phantom box on top of the cursor. */
+.composition-view {
+  position: absolute;
+  pointer-events: none;
+  background: var(--surface);
+  color: var(--text);
+  border: 1px solid var(--border);
+  font-family: var(--font-mono);
+  font-size: 14px;
+  padding: 0 2px;
+  white-space: nowrap;
+  direction: rtl;
+  z-index: 5;
+  display: none;
+}
+
+.composition-view.active {
+  display: block;
+}
+
+/* Predicted-cursor overlay (INPUT-01): rendered at the location the
+   cursor will be after the in-flight keystrokes are echoed back by
+   the server. Hidden when the prediction matches the server's actual
+   cursor (predict.ts deactivates on bail and the renderer hides on
+   coincidence). Dashed outline + reduced opacity reads as "tentative"
+   — distinct from the solid block of the real cursor. */
+.pred-cursor {
+  position: absolute;
+  pointer-events: none;
+  border: 1px dashed var(--text);
+  opacity: 0.55;
+  display: none;
+  z-index: 4;
+  box-sizing: border-box;
+}
+
+.pred-cursor.visible {
+  display: block;
+}
+
+/* Connection-state banner: floats top-center with a subtle backdrop
+   blur. Hidden until status.ts sets `.visible`. Distinct from the
+   `.pill` family because it wants to span across the full top center
+   visually rather than dock to a corner. */
+.conn-banner {
+  position: fixed;
+  bottom: var(--sp-3);
+  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;
+  pointer-events: auto;
+  opacity: 0;
+  transition:
+    opacity var(--dur-standard) var(--ease-standard),
+    display var(--dur-standard) allow-discrete;
+}
+
+.conn-banner.visible {
+  display: block;
+  opacity: 1;
+
+  @starting-style {
+    opacity: 0;
+  }
+}
+
+/* Color coding by notification type */
+.conn-banner[data-state="reconnecting"] {
+  border-color: oklch(70% 0.15 60deg / 40%);
+}
+
+.conn-banner[data-state="offline"] {
+  color: #f55;
+  border-color: oklch(60% 0.2 25deg / 50%);
+}
+
+.conn-banner[data-state="restarted"] {
+  color: #fa5;
+  border-color: oklch(70% 0.15 60deg / 40%);
+}
+
+.conn-banner[data-state="toast"] {
+  border-color: oklch(70% 0.1 160deg / 30%);
+}
+
+/* Virtual keyboard awareness: when the keyboard is open the
+   visualViewport height shrinks. viewport.ts sets --kb-inset on
+   termWrap; we use it here to lift the banner above the keyboard.
+   Falls back to 0px when the variable isn't set (desktop). */
+@media (pointer: coarse) {
+  .conn-banner {
+    bottom: calc(var(--sp-3) + var(--kb-inset, 0px));
+  }
+}
+
+/* Clickable URLs */
+.term-link {
+  color: inherit;
+  text-decoration: underline dotted;
+  cursor: pointer;
+}
+
+.term-link:hover {
+  text-decoration: underline solid;
+}
+
+/* Inline cursor cell (xterm.js convention): the character at the cursor
+   position gets the .term-cursor class. CSS gives it inverted colors;
+   the blink is driven by a JS interval that toggles .cursor-blink-off on
+   the viewport. JS-driven instead of CSS animation because the cursor
+   span is recreated every row update — a CSS animation would restart on
+   each recreation and never reach the "off" frame during streaming. */
+.term-cursor,
+.term-cursor-underline,
+.term-cursor-bar {
+  box-sizing: border-box;
+  display: inline-block;
+  height: 17px;
+  line-height: 17px;
+  vertical-align: top;
+}
+
+.term-cursor {
+  background: var(--text);
+  color: var(--bg);
+}
+
+/* Underline cursor (DECSCUSR 3/4) */
+.term-cursor-underline {
+  background: transparent;
+  color: var(--text);
+  border-bottom: 2px solid var(--text);
+}
+
+/* Bar cursor (DECSCUSR 5/6) */
+.term-cursor-bar {
+  background: transparent;
+  color: var(--text);
+  border-left: 2px solid var(--text);
+}
+
+.cursor-blink-off .term-cursor {
+  background: transparent;
+  color: var(--text);
+}
+
+.term-blink {
+  animation: term-blink-anim 1s step-end infinite;
+}
+
+@keyframes term-blink-anim {
+  50% {
+    opacity: 0;
+  }
+}
+
+/* When the terminal isn't focused, render the cursor as an outline
+   rather than a filled block (xterm.js convention). */
+.term:not(.focus) .term-cursor,
+.term:not(.focus) .term-cursor-underline,
+.term:not(.focus) .term-cursor-bar {
+  background: transparent;
+  color: var(--text);
+  border: none;
+
+  /* Inset box-shadow stays strictly inside the cell box without
+     affecting layout or clipping at the row boundary. */
+  box-shadow: inset 0 0 0 1px var(--text);
+  animation: none;
+}
+
+/* ===== Terminal color classes (basic 16 — themeable) ===== */
+.term-fg-0 {
+  color: #000;
+}
+.term-fg-1 {
+  color: #a00;
+}
+.term-fg-2 {
+  color: #0a0;
+}
+.term-fg-3 {
+  color: #a50;
+}
+.term-fg-4 {
+  color: #00a;
+}
+.term-fg-5 {
+  color: #a0a;
+}
+.term-fg-6 {
+  color: #0aa;
+}
+.term-fg-7 {
+  color: #aaa;
+}
+.term-fg-8 {
+  color: #555;
+}
+.term-fg-9 {
+  color: #f55;
+}
+.term-fg-10 {
+  color: #5f5;
+}
+.term-fg-11 {
+  color: #ff5;
+}
+.term-fg-12 {
+  color: #55f;
+}
+.term-fg-13 {
+  color: #f5f;
+}
+.term-fg-14 {
+  color: #5ff;
+}
+.term-fg-15 {
+  color: #fff;
+}
+
+.term-bg-0 {
+  background: #000;
+}
+.term-bg-1 {
+  background: #a00;
+}
+.term-bg-2 {
+  background: #0a0;
+}
+.term-bg-3 {
+  background: #a50;
+}
+.term-bg-4 {
+  background: #00a;
+}
+.term-bg-5 {
+  background: #a0a;
+}
+.term-bg-6 {
+  background: #0aa;
+}
+.term-bg-7 {
+  background: #aaa;
+}
+.term-bg-8 {
+  background: #555;
+}
+.term-bg-9 {
+  background: #f55;
+}
+.term-bg-10 {
+  background: #5f5;
+}
+.term-bg-11 {
+  background: #ff5;
+}
+.term-bg-12 {
+  background: #55f;
+}
+.term-bg-13 {
+  background: #f5f;
+}
+.term-bg-14 {
+  background: #5ff;
+}
+.term-bg-15 {
+  background: #fff;
+}
+
+/* ===== Key toolbar (touch devices only) =====
+   Uses interpolate-size: allow-keywords (on :root) to animate
+   width/height between a fixed collapsed size and auto (intrinsic).
+   Toggle is first in DOM so it's at top-left of the grid — visible
+   when the container clips to 1-cell size. Container is right-anchored
+   so it grows leftward on open. */
+.key-toolbar {
+  display: contents;
+}
+
+/* Touch-only toolbar children: the on-screen Esc/Tab/arrows/hamburger
+   are useless on desktop where the user has a real keyboard. Hidden by
+   default; the @media (pointer: coarse) block below restores them. */
+.kb-key,
+.kb-toggle {
+  display: none;
+}
+
+/* Desktop: scroll-to-bottom is still genuinely useful for jumping back
+   after scrolling up to read history, so it surfaces here as a
+   bottom-center pill with a label. .key-toolbar.scrolled-up is
+   toggled by app.ts, same as on touch. The display+opacity transition
+   uses allow-discrete so the fade-out plays cleanly when the user
+   clicks (scroll-to-bottom clears .scrolled-up, reverting display:none
+   after the opacity has gone to 0). */
+.kb-scroll-bottom {
+  position: fixed;
+  left: 50%;
+  bottom: calc(var(--safe-bottom, 0px) + var(--sp-3));
+  transform: translateX(-50%);
+  display: none;
+  opacity: 0;
+  align-items: center;
+  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);
+  color: var(--text);
+  font: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  z-index: 10;
+  transition:
+    opacity var(--dur-standard) var(--ease-standard),
+    background-color 150ms var(--ease-standard),
+    display var(--dur-standard) allow-discrete;
+}
+
+.kb-scroll-bottom::after {
+  content: "Scroll to bottom";
+}
+
+.kb-scroll-bottom svg {
+  width: var(--icon);
+  height: var(--icon);
+  stroke: currentcolor;
+  fill: none;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.kb-scroll-bottom:hover {
+  background: color-mix(in oklch, var(--text) 8%, var(--surface));
+}
+
+.kb-scroll-bottom:active {
+  background: var(--text-active);
+}
+
+.key-toolbar.scrolled-up .kb-scroll-bottom {
+  display: inline-flex;
+  opacity: 1;
+
+  @starting-style {
+    opacity: 0;
+  }
+}
+
+@media (pointer: coarse) {
+  .key-toolbar {
+    position: fixed;
+    top: calc(var(--safe-top) + var(--sp-2) + var(--vv-top, 0px));
+    right: var(--sp-2);
+    z-index: 10;
+    display: grid;
+    grid-template-columns: repeat(4, var(--touch-target)) var(--touch-target);
+    grid-template-rows: var(--touch-target) var(--touch-target);
+    place-content: start end;
+    gap: var(--sp-1);
+    padding: var(--sp-1);
+    background: var(--surface);
+    backdrop-filter: var(--blur);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    overflow: hidden;
+    width: auto;
+    height: auto;
+    transition:
+      width var(--dur-enter) var(--ease-standard),
+      height var(--dur-enter) var(--ease-standard);
+  }
+
+  /* Collapsed: fixed size = 1 button + padding + border. Content is
+     right-aligned (justify-content:end) so the toggle (col 5) stays at
+     the right edge, visible within the clipped area. --pill-outer
+     includes the 2px border (box-sizing:border-box); omitting it left
+     the content box 2px short, pinning the button top-right with
+     unequal bottom/left gaps. */
+  .key-toolbar.collapsed {
+    width: var(--pill-outer);
+    height: var(--pill-outer);
+  }
+
+  /* Collapsed + scrolled up: 2 buttons tall (+2px border). */
+  .key-toolbar.collapsed.scrolled-up {
+    height: calc(2 * var(--touch-target) + var(--sp-1) + 2 * var(--sp-1) + 2px);
+  }
+
+  /* Grid placement: toggle at col 5 row 1 (top-right). */
+  .kb-toggle {
+    grid-area: 1 / 5;
+    position: relative;
+  }
+  .kb-r1c1 {
+    grid-area: 1 / 1;
+  }
+  .kb-r1c2 {
+    grid-area: 1 / 2;
+  }
+  .kb-r1c3 {
+    grid-area: 1 / 3;
+  }
+  .kb-r1c4 {
+    grid-area: 1 / 4;
+  }
+  .kb-r2c1 {
+    grid-area: 2 / 1;
+  }
+  .kb-r2c2 {
+    grid-area: 2 / 2;
+  }
+  .kb-r2c3 {
+    grid-area: 2 / 3;
+  }
+  .kb-r2c4 {
+    grid-area: 2 / 4;
+  }
+
+  /* Scroll-bottom: col 5 row 2 (below toggle). Resets the desktop
+     FAB-specific properties (fixed position, pill padding, surface
+     background, label) so the button collapses back to a grid-area
+     icon-only key. */
+  .key-toolbar .kb-scroll-bottom {
+    position: static;
+    transform: none;
+    bottom: auto;
+    left: auto;
+    grid-area: 2 / 5;
+    display: none;
+    opacity: 0;
+    padding: 0;
+    background: transparent;
+    backdrop-filter: none;
+    border: none;
+    border-radius: var(--radius-inner);
+    font-size: inherit;
+    /* Touch override drops the desktop label (::after content: "")
+       so only the SVG remains. The base rule sets align-items:center
+       but inherits justify-content:flex-start, which would push the
+       lone icon to the left edge of the touch-target-sized cell —
+       same unequal-padding issue as the toolbar toggle. Center it. */
+    justify-content: center;
+    transition:
+      opacity var(--dur-standard) var(--ease-standard),
+      display var(--dur-standard) allow-discrete;
+  }
+
+  .kb-scroll-bottom::after {
+    /* No label on touch. Remove the box entirely (not just its text) so
+       it isn't an empty flex item — combined with the base rule's
+       gap:var(--sp-1) it would shove the lone icon half a gap off-centre. */
+    content: "";
+    display: none;
+  }
+  .kb-scroll-bottom:hover {
+    background: transparent;
+  }
+
+  .key-toolbar.scrolled-up .kb-scroll-bottom {
+    display: flex;
+    opacity: 1;
+
+    @starting-style {
+      opacity: 0;
+    }
+  }
+
+  /* Keys fade in/out during open/close. The container's width/height
+     transition handles the background slide; opacity handles the
+     individual button appearance. Stagger the fade slightly after
+     the container starts growing (delay on open) and before it
+     finishes shrinking (no delay on close). */
+  .kb-key {
+    opacity: 1;
+    transition: opacity var(--dur-standard) var(--ease-enter) 0.05s;
+  }
+
+  .key-toolbar.collapsed .kb-key {
+    opacity: 0;
+    transition: opacity var(--dur-exit) var(--ease-exit);
+  }
+
+  /* Shared button */
+  .key-toolbar button {
+    width: var(--touch-target);
+    height: var(--touch-target);
+    background: transparent;
+    color: var(--text);
+    border: none;
+    border-radius: var(--radius-inner);
+    font-size: 0.9375rem;
+    font-family: var(--font-ui);
+    font-weight: 500;
+    cursor: pointer;
+    touch-action: manipulation;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .key-toolbar button:active {
+    background: var(--text-active);
+  }
+
+  /* Sticky Ctrl, armed: inverted fill so the toggle state reads clearly
+     in the monochrome palette (stays filled while pressed). */
+  .kb-key.armed,
+  .kb-key.armed:active {
+    background: var(--text);
+    color: var(--bg);
+  }
+
+  .key-toolbar button svg {
+    width: var(--icon);
+    height: var(--icon);
+    stroke: currentcolor;
+    fill: none;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  /* Toggle icon crossfade. Both icons are stacked absolute so they
+     can independently fade + rotate during the open<->close
+     transition. inset:0 + margin:auto centers them within the
+     button (works because the SVGs carry explicit width/height); a
+     bare `position: absolute` would pin them at the top-left, giving
+     the toggle visibly unequal left/right padding when collapsed. */
+  .kb-toggle .icon-hamburger,
+  .kb-toggle .icon-close {
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    transition:
+      opacity var(--dur-standard) linear,
+      transform var(--dur-standard) linear;
+  }
+
+  .kb-toggle .icon-close {
+    opacity: 1;
+    transform: rotate(0deg);
+  }
+  .kb-toggle .icon-hamburger {
+    opacity: 0;
+    transform: rotate(-90deg);
+  }
+  .key-toolbar.collapsed .kb-toggle .icon-close {
+    opacity: 0;
+    transform: rotate(90deg);
+  }
+  .key-toolbar.collapsed .kb-toggle .icon-hamburger {
+    opacity: 1;
+    transform: rotate(0deg);
+  }
+
+  /* No-transition on first render */
+  .key-toolbar.no-transition,
+  .key-toolbar.no-transition .kb-scroll-bottom,
+  .key-toolbar.no-transition .kb-toggle .icon-hamburger,
+  .key-toolbar.no-transition .kb-toggle .icon-close {
+    transition: none;
+  }
+}
+
+/* ===== Context menu ===== */
+.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;
+  opacity: 0;
+  scale: 0.95;
+  transition:
+    opacity 0.15s ease,
+    scale 0.15s ease,
+    display 0.15s allow-discrete;
+}
+
+.ctx-menu.visible {
+  display: flex;
+  opacity: 1;
+  scale: 1;
+
+  @starting-style {
+    opacity: 0;
+    scale: 0.95;
+  }
+}
+
+.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;
+}
+
+.ctx-menu button:active {
+  background: var(--text-active);
+}