@cplieger/web-terminal-ui 3.5.0 → 4.1.0

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;
+  }
+}