@workerdeck/ui 2.10.0 → 2.12.0

package/src/styles/terminal.css

@@ -79,11 +79,24 @@
   --term-faint: #6a6a6a;
 
   --term-mark: #d97757;
+  /* The working mark in motion. Five stops travelling violet to cyan and back,
+     lifted from box's `paint()` so an in-progress line reads the same here as
+     it does in the terminal. Deliberately not the clay accent: the mark states
+     whose turn it is, the shimmer states that something is still moving. */
+  --term-shimmer-1: #c5a3e8;
+  --term-shimmer-2: #a3a4e8;
+  --term-shimmer-3: #7b7ef5;
+  --term-shimmer-4: #8aaeea;
+  --term-shimmer-5: #a8e5ed;
   --term-blue: #afb9fe;
   --term-green: #4ec9a0;
   --term-red: #f14c4c;
   --term-yellow: #d7ba7d;
   --term-magenta: #c586c0;
+  /* Peer traffic - a message from or to another session. Cyan is the one ANSI slot
+     the theme had left, and peer rows must not be confusable with a tool call
+     (blue), a success (green) or a wait (yellow). */
+  --term-peer: #56d4dd;
 
   /* Diff bands. Full-bleed backgrounds, so they are tuned to sit under body
      text rather than to be looked at: the CLI's added block is a dark green
@@ -118,11 +131,19 @@
   --term-faint: #8d8d8d;
 
   --term-mark: #bf5b3d;
+  /* Same five stops walked down for a light ground; the dark set's cyan is
+     invisible on white. */
+  --term-shimmer-1: #7a4fb0;
+  --term-shimmer-2: #5457b8;
+  --term-shimmer-3: #4347c9;
+  --term-shimmer-4: #3f6fb5;
+  --term-shimmer-5: #1f7d8c;
   --term-blue: #0a66c2;
   --term-green: #16794a;
   --term-red: #c62828;
   --term-yellow: #8a6d00;
   --term-magenta: #8b3a8b;
+  --term-peer: #0e7490;
 
   --term-add-fg: #12492a;
   --term-add-bg: #e2f6e5;
@@ -262,6 +283,63 @@
 [data-terminal] [data-tone='magenta'] {
   color: var(--term-magenta);
 }
+[data-terminal] [data-tone='peer'] {
+  color: var(--term-peer);
+}
+
+/* Work in progress. One element, never a span per character: the transcript
+   measures its own rows and supports text selection, and both break the moment
+   a line is shredded into glyphs. The tile is periodic (it ends on the colour
+   it starts on) and the animation travels exactly one tile width, so the loop
+   has no seam. Scoped under `[data-terminal]` to outrank the tone rules, which
+   would otherwise repaint the clipped text opaque. */
+[data-terminal] .term-shimmer {
+  background-image: linear-gradient(
+    90deg,
+    var(--term-shimmer-1),
+    var(--term-shimmer-2),
+    var(--term-shimmer-3),
+    var(--term-shimmer-4),
+    var(--term-shimmer-5),
+    var(--term-shimmer-4),
+    var(--term-shimmer-3),
+    var(--term-shimmer-2),
+    var(--term-shimmer-1)
+  );
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  animation: term-shimmer 3s linear infinite;
+}
+
+@keyframes term-shimmer {
+  from {
+    background-position: 0% 0;
+  }
+  to {
+    background-position: 200% 0;
+  }
+}
+
+/* Clipped text with a transparent fill selects invisibly - the highlight paints
+   under glyphs that have no colour of their own. */
+[data-terminal] .term-shimmer::selection {
+  color: var(--term-bright);
+  -webkit-text-fill-color: var(--term-bright);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-terminal] .term-shimmer {
+    animation: none;
+    background-image: none;
+    -webkit-background-clip: border-box;
+    background-clip: border-box;
+    -webkit-text-fill-color: var(--term-shimmer-3);
+    color: var(--term-shimmer-3);
+  }
+}
 
 /* Weight is the only other axis. A terminal has one type size, so emphasis has
    to be carried by weight and colour - never by a larger glyph. */
@@ -411,6 +489,12 @@
   cursor: text;
 }
 
+/* A peer's message is not what you typed, so it drops the prompt band: the peer
+   tone and the arrow carry it, and the band is reserved for the human's turn. */
+[data-terminal] .term-user[data-peer] {
+  background: none;
+}
+
 [data-terminal] .term-link {
   text-decoration: underline;
   text-underline-offset: 2px;
@@ -615,10 +699,18 @@ button.term-link {
 /* The head's own strip: the full lane, out of flow, so the head needs no
    footprint-cancelling margin - sticky confinement clamps the margin box, and
    a negative margin shrinks it to nothing, letting the head overshoot the
-   lane's end by its own height (two pinned prompts on screen at once). */
+   lane's end by its own height (two pinned prompts on screen at once).
+
+   The z-index is what makes the head's ground actually cover: the row it
+   overlays is a later sibling and carries `term-hoverable`, which is
+   `position: relative` for the row actions, so at `z-index: auto` the row's
+   text painted OVER the pinned head and the two read as one line of overlap.
+   Raising the strip - inside the lane's own stacking context, so it still
+   sits under nothing else - puts it back above the row it is there to hide. */
 [data-terminal] [data-sticky-lane] > [data-sticky-headlane] {
   position: absolute;
   inset: 0;
+  z-index: 1;
   pointer-events: none;
 }
 
@@ -1130,6 +1222,15 @@ button.term-link {
   overflow: hidden;
 }
 
+/* A closed peer send: one row, ellipsised. The row must stay exactly one line
+   tall or the virtualizer's estimate for it is wrong. */
+.term-clip-1 {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 .term-scrubber .term-scrub-ex {
   display: -webkit-box;
   -webkit-line-clamp: 4;

package/src/styles/theme.css

@@ -271,7 +271,7 @@
   --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
 
   --cw-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-  --cw-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
+  --cw-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
 
   --motion-fast: 120ms;
   --motion-base: 150ms;