@cplieger/web-terminal-ui 3.5.0 → 4.0.0

package/css/{03-primitives.css → 10-primitives.css}

@@ -1,26 +1,27 @@
 /* ===== web-terminal-ui design system: primitives =====
-   The v3 kernel builds named layout regions (wt-region-*) as siblings of the
-   terminal surface (.term, styled in 02-app.css); features mount chrome into
-   region slots. The regions are transparent groupings (display: contents) so
-   each feature's element floats over the fixed-inset terminal, and an absent
-   feature contributes nothing.
+   The kernel builds named layout regions (wt-region-*) as siblings of the
+   terminal surface (.term, styled in 02-terminal.css); features mount chrome
+   into region slots. The regions are transparent groupings (display: contents)
+   so each feature's element floats over the root-filling terminal, and an
+   absent feature contributes nothing.
 
-   The stylesheet is layered by concern and concatenated in css/MANIFEST order:
-   tokens (00) -> reset (01) -> terminal core + legacy key toolbar (02) -> these
-   shared primitives (03) -> per-feature chrome (04 feedback, 05 tabs, 06 mobile)
-   -> animations (07, where every .wt-animate-gated transition/keyframe lives, so
-   motion is opt-in from one place). Cascade order is the file order here.
+   The stylesheet is layered by concern and concatenated in manifest order:
+   tokens (00) -> scope + layout modes (01) -> terminal core (02) -> these
+   shared primitives (10) -> per-feature chrome (20-23, 30-31, one file per
+   feature so a per-preset manifest ships only what its composition mounts) ->
+   animations (40, where every .wt-animate-gated transition/keyframe lives, so
+   motion is opt-in from one place). Cascade order is the manifest file order.
 
    Primitives are the building blocks every feature reuses: the transparent
    layout regions, the 44px touch button, and the toast surface. */
 
-.wt-region,
-.wt-slot {
+:where(.wt-root) .wt-region,
+:where(.wt-root) .wt-slot {
   display: contents;
 }
 
 /* ===== Shared button primitive (44px touch target) ===== */
-.wt-btn {
+:where(.wt-root) .wt-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -36,11 +37,11 @@
   user-select: none;
 }
 
-.wt-btn:active {
+:where(.wt-root) .wt-btn:active {
   background: var(--text-active);
 }
 
-.wt-btn svg {
+:where(.wt-root) .wt-btn svg {
   width: var(--icon);
   height: var(--icon);
   stroke: currentcolor;
@@ -54,9 +55,10 @@
    Top-centre on every form factor (both desktop and the tabbed mobile UI dock a
    bar at the bottom, so a bottom toast would collide with it; top-centre is
    clear and the same everywhere). The vv-top/safe-top offset keeps it below the
-   notch and follows iOS's visual-viewport shift. */
-.wt-toast {
-  position: fixed;
+   notch and follows iOS's visual-viewport shift. Absolute against .wt-root,
+   like all chrome (identical geometry in wt-viewport mode; see 01-scope.css). */
+:where(.wt-root) .wt-toast {
+  position: absolute;
   top: calc(var(--safe-top, 0px) + var(--vv-top, 0px) + var(--sp-3));
   left: 50%;
   transform: translateX(-50%);
@@ -77,7 +79,7 @@
   opacity: 0;
 }
 
-.wt-toast.visible {
+:where(.wt-root) .wt-toast.visible {
   display: block;
   opacity: 1;
 }

package/css/20-connection-banner.css

@@ -0,0 +1,42 @@
+/* ===== Connection banner (connectionBanner feature) =====
+   Top-centre on every form factor (same rationale as the toast: a bottom bar is
+   always docked now). Absolute against .wt-root, like all chrome (identical
+   geometry in wt-viewport mode; see 01-scope.css). */
+:where(.wt-root) .wt-conn-banner {
+  position: absolute;
+  top: calc(var(--safe-top, 0px) + var(--vv-top, 0px) + 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;
+  pointer-events: none; /* passive status surface: never steal taps from the terminal beneath */
+  display: none;
+}
+
+:where(.wt-root) .wt-conn-banner.visible {
+  display: block;
+}
+
+:where(.wt-root) .wt-conn-banner[data-state="reconnecting"] {
+  border-color: oklch(70% 0.15 60deg / 40%);
+}
+
+:where(.wt-root) .wt-conn-banner[data-state="offline"] {
+  color: #f55;
+  border-color: oklch(60% 0.2 25deg / 50%);
+}
+
+:where(.wt-root) .wt-conn-banner[data-state="restarted"] {
+  color: #fa5;
+  border-color: oklch(70% 0.15 60deg / 40%);
+}

package/css/21-scroll-to-bottom.css

@@ -0,0 +1,65 @@
+/* ===== Scroll-to-bottom (scrollToBottom feature) =====
+   A compact floating icon button docked in the bottom-right corner, shown only
+   while the user has scrolled up. Same button on both form factors (the old
+   desktop bottom-centre text pill was dropped in the design-system switch);
+   each form factor just lifts it above its own bottom bar. Size + icon
+   centering come from the .wt-btn primitive (a 44px icon button); this rule
+   adds only the floating chrome and placement. Absolute against .wt-root, like
+   all chrome (identical geometry in wt-viewport mode; see 01-scope.css). */
+:where(.wt-root) .wt-scroll-bottom {
+  position: absolute;
+  right: var(--sp-3);
+  bottom: calc(var(--safe-bottom, 0px) + var(--sp-3) + var(--kb-inset, 0px));
+  background: var(--surface);
+  backdrop-filter: var(--blur);
+  border: 1px solid var(--border);
+  /* Match the tab "+" buttons (and every other .wt-btn), which round to
+     --radius-inner. Both are 44px boxes, so matching the corner radius makes
+     the FAB read as the same-sized button as the new-tab "+" beside/above it
+     rather than a rounder, different-looking control. */
+  border-radius: var(--radius-inner);
+  /* Full --text icon, matching the switcher's keyboard/switch/"+" icons (which
+     use .wt-btn's default color). Was a muted 70% mix that read as grey next to
+     those white bar icons. */
+  color: var(--text);
+  z-index: 10;
+  display: none;
+}
+
+/* The scroll slot gets .scrolled-up toggled by the feature; show the button. */
+:where(.wt-root) .wt-slot-scroll.scrolled-up .wt-scroll-bottom {
+  display: inline-flex;
+}
+
+/* Hover brightens the border; press fills the background (the .wt-btn :active
+   fill would otherwise be masked by this button's own surface fill). The icon
+   is already full --text, so hover no longer needs to change it. */
+:where(.wt-root) .wt-scroll-bottom:hover {
+  border-color: color-mix(in oklch, var(--text) 35%, transparent);
+}
+
+:where(.wt-root) .wt-scroll-bottom:active {
+  background: var(--text-active);
+}
+
+/* Mobile + tabbed: lift above the switcher bar and the keyboard (WS3), and pull
+   the right edge in to --sp-2 so the button sits directly above the switcher's
+   "+" (whose right edge is inset by the bar's --sp-2 padding). Both are 44px
+   border-box boxes, so matching the right inset lines them up in one vertical
+   column (they were 4px out: the FAB's base --sp-3 vs the "+"'s --sp-2). */
+@media (pointer: coarse) {
+  :where(.wt-root.wt-tabbed) .wt-scroll-bottom {
+    right: var(--sp-2);
+    bottom: calc(
+      var(--wt-switcher-h) + var(--safe-bottom, 0px) + var(--kb-inset, 0px) + var(--sp-2)
+    );
+  }
+}
+
+/* Desktop + tabbed: the tab strip docks at the bottom, so lift the button above
+   it with a clear gap. */
+@media (pointer: fine) {
+  :where(.wt-root.wt-tabbed) .wt-scroll-bottom {
+    bottom: calc(var(--wt-tabbar-h, 44px) + var(--sp-3));
+  }
+}

package/css/22-context-menu.css

@@ -0,0 +1,45 @@
+/* ===== Context menu (contextMenu feature) =====
+   Absolute against .wt-root, like all chrome; the shared point-anchored
+   positioner (src/features/menu-position.ts) converts its viewport-clamped
+   coordinates into root-relative offsets, so placement is identical in both
+   layout modes. */
+:where(.wt-root) .wt-ctx-menu {
+  position: absolute;
+  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;
+}
+
+:where(.wt-root) .wt-ctx-menu.visible {
+  display: flex;
+}
+
+:where(.wt-root) .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;
+}
+
+:where(.wt-root) .wt-ctx-menu button:active {
+  background: var(--text-active);
+}
+
+@media (pointer: coarse) {
+  :where(.wt-root) .wt-ctx-menu button {
+    min-height: var(--touch-target);
+    padding-block: var(--sp-2);
+    touch-action: manipulation;
+  }
+}

package/css/23-toolbar.css

@@ -0,0 +1,181 @@
+/* ===== Key toolbar (mobileToolbar feature; touch devices only) =====
+   Uses interpolate-size: allow-keywords (on .wt-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. */
+:where(.wt-root) .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. */
+:where(.wt-root) .kb-key,
+:where(.wt-root) .kb-toggle {
+  display: none;
+}
+
+@media (pointer: coarse) {
+  :where(.wt-root) .key-toolbar {
+    /* Absolute against .wt-root (identical geometry in wt-viewport mode; see
+       01-scope.css). --vv-top keeps it following iOS's visual-viewport shift. */
+    position: absolute;
+    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. */
+  :where(.wt-root) .key-toolbar.collapsed {
+    width: var(--pill-outer);
+    height: var(--pill-outer);
+  }
+
+  /* Grid placement: toggle at col 5 row 1 (top-right). */
+  :where(.wt-root) .kb-toggle {
+    grid-area: 1 / 5;
+    position: relative;
+  }
+  :where(.wt-root) .kb-r1c1 {
+    grid-area: 1 / 1;
+  }
+  :where(.wt-root) .kb-r1c2 {
+    grid-area: 1 / 2;
+  }
+  :where(.wt-root) .kb-r1c3 {
+    grid-area: 1 / 3;
+  }
+  :where(.wt-root) .kb-r1c4 {
+    grid-area: 1 / 4;
+  }
+  :where(.wt-root) .kb-r2c1 {
+    grid-area: 2 / 1;
+  }
+  :where(.wt-root) .kb-r2c2 {
+    grid-area: 2 / 2;
+  }
+  :where(.wt-root) .kb-r2c3 {
+    grid-area: 2 / 3;
+  }
+  :where(.wt-root) .kb-r2c4 {
+    grid-area: 2 / 4;
+  }
+
+  /* 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). */
+  :where(.wt-root) .kb-key {
+    opacity: 1;
+    transition: opacity var(--dur-standard) var(--ease-enter) 0.05s;
+  }
+
+  :where(.wt-root) .key-toolbar.collapsed .kb-key {
+    opacity: 0;
+    transition: opacity var(--dur-exit) var(--ease-exit);
+  }
+
+  /* Shared button */
+  :where(.wt-root) .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;
+  }
+
+  :where(.wt-root) .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). */
+  :where(.wt-root) .kb-key.armed,
+  :where(.wt-root) .kb-key.armed:active {
+    background: var(--text);
+    color: var(--bg);
+  }
+
+  :where(.wt-root) .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. */
+  :where(.wt-root) .kb-toggle .icon-hamburger,
+  :where(.wt-root) .kb-toggle .icon-close {
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    transition:
+      opacity var(--dur-standard) linear,
+      transform var(--dur-standard) linear;
+  }
+
+  :where(.wt-root) .kb-toggle .icon-close {
+    opacity: 1;
+    transform: rotate(0deg);
+  }
+  :where(.wt-root) .kb-toggle .icon-hamburger {
+    opacity: 0;
+    transform: rotate(-90deg);
+  }
+  :where(.wt-root) .key-toolbar.collapsed .kb-toggle .icon-close {
+    opacity: 0;
+    transform: rotate(90deg);
+  }
+  :where(.wt-root) .key-toolbar.collapsed .kb-toggle .icon-hamburger {
+    opacity: 1;
+    transform: rotate(0deg);
+  }
+
+  /* No-transition on first render */
+  :where(.wt-root) .key-toolbar.no-transition,
+  :where(.wt-root) .key-toolbar.no-transition .kb-toggle .icon-hamburger,
+  :where(.wt-root) .key-toolbar.no-transition .kb-toggle .icon-close {
+    transition: none;
+  }
+}