@artooi/agents-web-components 0.0.0-stage → 0.1.1

package/src/ui/transcript/transcript_styles.ts

@@ -0,0 +1,153 @@
+// The scrolling message list and what is positioned against it: jump to
+// latest, the quote-selection offer, the live region and the inset probe.
+export const TRANSCRIPT_STYLES: string = `
+/* Jump-to-latest: shown only once the reader has scrolled away *and* missed
+   something. Anchored to the panel rather than the list so it does not scroll
+   with the content it is offering to scroll to. */
+/* The transcript's own box, and the only one whose foot is the transcript's
+   foot. The panel's foot is below the composer, the chips and the footer. */
+.messages-wrap {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.jump-latest {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: var(--_pad);
+  z-index: 2;
+  display: none;
+  align-items: center;
+  gap: 0.35em;
+  padding: 0.4em 0.9em;
+  border: 1px solid var(--_border);
+  border-radius: 999px;
+  /* A raised surface, not the panel's own background. Reusing --_bg made the
+     pill the same colour as everything behind it, leaving a 1px border and a
+     shadow to carry the whole affordance -- and a dark-on-dark shadow carries
+     nothing. --_hover is the token that already means "lifted off the panel",
+     and it separates in both themes without competing with the accent the send
+     button owns. */
+  background: var(--_hover);
+  color: var(--_text);
+  font: inherit;
+  font-size: 0.85em;
+  cursor: pointer;
+  box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
+}
+
+.jump-latest[data-missed="true"] {
+  display: flex;
+}
+
+.jump-latest:hover {
+  border-color: var(--_accent);
+}
+
+/* The offer to quote a selection. Positioned in script against the transcript
+   box, which is the only ancestor whose top and foot are the transcript's --
+   the same reason .jump-latest lives here. The translate is the half the
+   script does not do: script sets the point the offer hangs from, CSS decides
+   which corner of the offer that point is. */
+.quote-selection {
+  position: absolute;
+  z-index: 2;
+  transform: translate(-50%, -100%);
+  padding: 0.25em 0.7em;
+  border: 1px solid var(--_border);
+  border-radius: 999px;
+  background: var(--_hover);
+  color: var(--_text);
+  font: inherit;
+  font-size: 0.8em;
+  line-height: 1.6;
+  white-space: nowrap;
+  cursor: pointer;
+  box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
+}
+
+/* Flipped under the selection when there was no room above it. Only the
+   vertical half of the translate changes: it still hangs from its own centre
+   horizontally. */
+.quote-selection[data-below="true"] {
+  transform: translate(-50%, 0);
+}
+
+.quote-selection:hover {
+  border-color: var(--_accent);
+}
+
+/* Screen-reader-only status region. Off-screen rather than display:none or
+   visibility:hidden, both of which take the element out of the accessibility
+   tree entirely -- a hidden live region announces nothing at all, which is the
+   classic way this pattern is written wrong.
+
+   The 1px box with clip-path, rather than width/height 0, is the shape that
+   survives: a zero-sized element is dropped from the tree by some engines. */
+/* A used-value reader for the four viewport-inset tokens, and the only
+   reliable one. getComputedStyle().getPropertyValue() on an unregistered
+   custom property hands back the substituted token stream, not a length: it
+   returns "4rem" verbatim, and "calc(56px + env(safe-area-inset-top))" as
+   "calc(56px + 0px)" -- which parses as NaN and takes the whole inset with it.
+   Padding is a real property, so the same tokens come back resolved to px.
+
+   visibility rather than display: none, because a box that generates no
+   layout has no used values to read. Zero-sized, absolutely positioned and
+   inert, so it costs nothing but the read.
+
+   The padding gives that box the size of the tokens, which a card narrower than
+   one of them would scroll to reach. Scrollable overflow counts a box as its
+   transform draws it, so a scale of nothing takes it out of that count on every
+   side and in either direction, and leaves what is read: the padding's used values,
+   and the containing block a percentage resolves against. Position fixed would add
+   no scroll either, and would change that block.
+
+   From its own corner, which is inside whatever holds it where the centre of the
+   padding need not be: kept for an engine that counts a point with no area. Chromium
+   does not, so the suite cannot pin the origin. */
+.viewport-probe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transform: scale(0);
+  transform-origin: 0 0;
+  padding: var(--_viewport-inset-top) var(--_viewport-inset-right)
+    var(--_viewport-inset-bottom) var(--_viewport-inset-left);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  clip-path: inset(50%);
+}
+
+.messages {
+  flex: 1;
+  overflow-y: auto;
+  /* Scrolling past the end of this must not scroll the page behind it. */
+  overscroll-behavior: contain;
+  /* The browser's own scroll anchoring competes with the scroller for the same
+     job and wins unpredictably -- it can hold the view still exactly when we
+     want to follow. Turned off so following is decided in one place. Safari
+     does not implement it, which is itself a reason not to depend on it. */
+  overflow-anchor: none;
+  padding: var(--_pad);
+  display: flex;
+  flex-direction: column;
+  gap: var(--_space);
+}
+`;