@mcp-b/react-components 0.6.5 → 0.7.1

package/dist/components/icons.js

@@ -1,2 +1,2 @@
-import { A as SpinnerIcon, C as PaperclipIcon, D as PlusIcon, E as PlayIcon, F as XIcon, M as TerminalIcon, N as WarningIcon, O as RefreshIcon, P as WrenchIcon, S as MonitorIcon, T as PencilIcon, _ as ImageIcon, a as CheckIcon, b as MaximizeIcon, c as ChevronRightIcon, d as DownloadIcon, f as EyeIcon, g as FolderOpenIcon, h as FolderIcon, i as ArrowUpIcon, j as SquareIcon, k as SearchIcon, l as CopyIcon, m as FileIcon, n as ArrowLeftIcon, o as ChevronDownIcon, p as EyeOffIcon, r as ArrowRightIcon, s as ChevronLeftIcon, t as ArrowDownIcon, u as DotIcon, v as InfoIcon, w as PauseIcon, x as MinusIcon, y as LinkIcon } from "../icons-BCNawx-T.js";
-export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DotIcon, DownloadIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, MinusIcon, MonitorIcon, PaperclipIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, RefreshIcon, SearchIcon, SpinnerIcon, SquareIcon, TerminalIcon, WarningIcon, WrenchIcon, XIcon };
+import { A as SearchIcon, C as MonitorIcon, D as PlayIcon, E as PencilIcon, F as WrenchIcon, I as XIcon, M as SquareIcon, N as TerminalIcon, O as PlusIcon, P as WarningIcon, S as MinusIcon, T as PauseIcon, _ as FolderOpenIcon, a as CheckIcon, b as LinkIcon, c as ChevronRightIcon, d as DownloadIcon, f as EllipsisIcon, g as FolderIcon, h as FileIcon, i as ArrowUpIcon, j as SpinnerIcon, k as RefreshIcon, l as CopyIcon, m as EyeOffIcon, n as ArrowLeftIcon, o as ChevronDownIcon, p as EyeIcon, r as ArrowRightIcon, s as ChevronLeftIcon, t as ArrowDownIcon, u as DotIcon, v as ImageIcon, w as PaperclipIcon, x as MaximizeIcon, y as InfoIcon } from "../icons-BAlTbWWP.js";
+export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DotIcon, DownloadIcon, EllipsisIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, MinusIcon, MonitorIcon, PaperclipIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, RefreshIcon, SearchIcon, SpinnerIcon, SquareIcon, TerminalIcon, WarningIcon, WrenchIcon, XIcon };

package/dist/components/useStickToBottom.d.ts

@@ -22,8 +22,11 @@ interface UseStickToBottomResult {
 }
 /**
  * Pin a scrollable viewport to the bottom as its content grows, unless the
- * user has scrolled up. Used by the conversation log and the workspace code
- * inspector to keep streaming output in view without fighting user intent.
+ * user has scrolled up.
+ *
+ * @deprecated Use MessageScroller for chat transcripts. Keep this only for
+ * standalone streaming panes that do not need transcript row anchoring,
+ * history prepending, visibility tracking, or jump-to-message behavior.
  */
 declare function useStickToBottom(options?: UseStickToBottomOptions): UseStickToBottomResult;
 //#endregion

package/dist/components/useStickToBottom.js

@@ -3,8 +3,11 @@ import * as React from "react";
 const DEFAULT_STICK_SLACK_PX = 160;
 /**
 * Pin a scrollable viewport to the bottom as its content grows, unless the
-* user has scrolled up. Used by the conversation log and the workspace code
-* inspector to keep streaming output in view without fighting user intent.
+* user has scrolled up.
+*
+* @deprecated Use MessageScroller for chat transcripts. Keep this only for
+* standalone streaming panes that do not need transcript row anchoring,
+* history prepending, visibility tracking, or jump-to-message behavior.
 */
 function useStickToBottom(options = {}) {
 	const slackPx = options.slackPx ?? DEFAULT_STICK_SLACK_PX;

package/dist/{copy-button-CB2MWcau.js → copy-button-TVhDAroI.js}

@@ -1,4 +1,4 @@
-import { a as CheckIcon, l as CopyIcon } from "./icons-BCNawx-T.js";
+import { a as CheckIcon, l as CopyIcon } from "./icons-BAlTbWWP.js";
 import { Button } from "./components/Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./components/Tooltip.js";
 import * as React from "react";

package/dist/{icons-BCNawx-T.js → icons-BAlTbWWP.js}

@@ -152,6 +152,32 @@ const DotIcon = (props) => /* @__PURE__ */ jsx(Icon, {
 		stroke: "none"
 	})
 });
+const EllipsisIcon = (props) => /* @__PURE__ */ jsxs(Icon, {
+	...props,
+	children: [
+		/* @__PURE__ */ jsx("circle", {
+			cx: "3.5",
+			cy: "8",
+			r: "0.75",
+			fill: "currentColor",
+			stroke: "none"
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: "8",
+			cy: "8",
+			r: "0.75",
+			fill: "currentColor",
+			stroke: "none"
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: "12.5",
+			cy: "8",
+			r: "0.75",
+			fill: "currentColor",
+			stroke: "none"
+		})
+	]
+});
 const SpinnerIcon = (props) => /* @__PURE__ */ jsx(Icon, {
 	...props,
 	children: /* @__PURE__ */ jsx("path", { d: "M8 1.5A6.5 6.5 0 1 1 1.5 8" })
@@ -252,4 +278,4 @@ const MaximizeIcon = (props) => /* @__PURE__ */ jsxs(Icon, {
 	]
 });
 //#endregion
-export { SpinnerIcon as A, PaperclipIcon as C, PlusIcon as D, PlayIcon as E, XIcon as F, TerminalIcon as M, WarningIcon as N, RefreshIcon as O, WrenchIcon as P, MonitorIcon as S, PencilIcon as T, ImageIcon as _, CheckIcon as a, MaximizeIcon as b, ChevronRightIcon as c, DownloadIcon as d, EyeIcon as f, FolderOpenIcon as g, FolderIcon as h, ArrowUpIcon as i, SquareIcon as j, SearchIcon as k, CopyIcon as l, FileIcon as m, ArrowLeftIcon as n, ChevronDownIcon as o, EyeOffIcon as p, ArrowRightIcon as r, ChevronLeftIcon as s, ArrowDownIcon as t, DotIcon as u, InfoIcon as v, PauseIcon as w, MinusIcon as x, LinkIcon as y };
+export { SearchIcon as A, MonitorIcon as C, PlayIcon as D, PencilIcon as E, WrenchIcon as F, XIcon as I, SquareIcon as M, TerminalIcon as N, PlusIcon as O, WarningIcon as P, MinusIcon as S, PauseIcon as T, FolderOpenIcon as _, CheckIcon as a, LinkIcon as b, ChevronRightIcon as c, DownloadIcon as d, EllipsisIcon as f, FolderIcon as g, FileIcon as h, ArrowUpIcon as i, SpinnerIcon as j, RefreshIcon as k, CopyIcon as l, EyeOffIcon as m, ArrowLeftIcon as n, ChevronDownIcon as o, EyeIcon as p, ArrowRightIcon as r, ChevronLeftIcon as s, ArrowDownIcon as t, DotIcon as u, ImageIcon as v, PaperclipIcon as w, MaximizeIcon as x, InfoIcon as y };

package/dist/{icons-BYpJY6L2.d.ts → icons-BRI54ATJ.d.ts}

@@ -35,6 +35,7 @@ declare const ArrowUpIcon: (props: IconProps) => React.JSX.Element;
 declare const DownloadIcon: (props: IconProps) => React.JSX.Element;
 declare const RefreshIcon: (props: IconProps) => React.JSX.Element;
 declare const DotIcon: (props: IconProps) => React.JSX.Element;
+declare const EllipsisIcon: (props: IconProps) => React.JSX.Element;
 declare const SpinnerIcon: (props: IconProps) => React.JSX.Element;
 declare const SearchIcon: (props: IconProps) => React.JSX.Element;
 declare const TerminalIcon: (props: IconProps) => React.JSX.Element;
@@ -46,4 +47,4 @@ declare const ImageIcon: (props: IconProps) => React.JSX.Element;
 declare const MonitorIcon: (props: IconProps) => React.JSX.Element;
 declare const MaximizeIcon: (props: IconProps) => React.JSX.Element;
 //#endregion
-export { SearchIcon as A, MonitorIcon as C, PlayIcon as D, PencilIcon as E, WrenchIcon as F, XIcon as I, SquareIcon as M, TerminalIcon as N, PlusIcon as O, WarningIcon as P, MinusIcon as S, PauseIcon as T, IconProps as _, CheckIcon as a, LinkIcon as b, ChevronRightIcon as c, DownloadIcon as d, EyeIcon as f, FolderOpenIcon as g, FolderIcon as h, ArrowUpIcon as i, SpinnerIcon as j, RefreshIcon as k, CopyIcon as l, FileIcon as m, ArrowLeftIcon as n, ChevronDownIcon as o, EyeOffIcon as p, ArrowRightIcon as r, ChevronLeftIcon as s, ArrowDownIcon as t, DotIcon as u, ImageIcon as v, PaperclipIcon as w, MaximizeIcon as x, InfoIcon as y };
+export { RefreshIcon as A, MinusIcon as C, PencilIcon as D, PauseIcon as E, WarningIcon as F, WrenchIcon as I, XIcon as L, SpinnerIcon as M, SquareIcon as N, PlayIcon as O, TerminalIcon as P, MaximizeIcon as S, PaperclipIcon as T, FolderOpenIcon as _, CheckIcon as a, InfoIcon as b, ChevronRightIcon as c, DownloadIcon as d, EllipsisIcon as f, FolderIcon as g, FileIcon as h, ArrowUpIcon as i, SearchIcon as j, PlusIcon as k, CopyIcon as l, EyeOffIcon as m, ArrowLeftIcon as n, ChevronDownIcon as o, EyeIcon as p, ArrowRightIcon as r, ChevronLeftIcon as s, ArrowDownIcon as t, DotIcon as u, IconProps as v, MonitorIcon as w, LinkIcon as x, ImageIcon as y };

package/dist/styles/agent-chat.css

@@ -15,11 +15,23 @@
 
 /* Room for the last message to scroll clear of the floating composer.
    --agent-chat-composer-size is set from a ResizeObserver in AgentChat. */
-.agent-chat .conversation__content {
-  padding-block-end: calc(var(--agent-chat-composer-size, 5rem) + 0.5rem);
+.agent-chat__transcript-content {
+  gap: 0.875rem;
+  padding-block: 1rem calc(var(--agent-chat-composer-size, 5rem) + 0.5rem);
+  padding-inline: 1rem;
 }
 
-.agent-chat .conversation__scroll-button {
+.agent-chat__empty-row {
+  display: flex;
+  flex: 1;
+  min-block-size: 0;
+}
+
+.agent-chat__empty-row > .conversation__empty {
+  flex: 1;
+}
+
+.agent-chat__scroll-button {
   inset-block-end: calc(var(--agent-chat-composer-size, 5rem) + 0.5rem);
 }
 

package/dist/styles/agent-connection.css

@@ -131,10 +131,6 @@
     inset 0 0 0 1px var(--sigvelo-color-primary-border-subtle);
 }
 
-.agent-connect .code-block {
-  min-inline-size: 0;
-}
-
 .agent-connect .code-block__container {
   max-block-size: 13.5rem;
 }
@@ -296,6 +292,39 @@
   outline-offset: 2px;
 }
 
+.agent-connect__mcp-form {
+  display: grid;
+  gap: 0.75rem;
+  min-inline-size: 0;
+}
+
+.agent-connect__mcp-form--row {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
+  align-items: end;
+  padding: 0.75rem;
+  background: var(--sigvelo-color-surface);
+}
+
+.agent-connect__mcp-form-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.agent-connect__mcp-form--row .agent-connect__mcp-form-actions {
+  align-self: end;
+}
+
+.agent-connect__mcp-form-status {
+  align-self: end;
+  min-inline-size: 0;
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: 1.25;
+  overflow-wrap: anywhere;
+}
+
 .agent-connect-trigger {
   inline-size: 100%;
 }

package/dist/styles/chatgpt-sign-in-screen.css

@@ -0,0 +1,224 @@
+.chatgpt-sign-in {
+  --chatgpt-sign-in-pointer-x: 50%;
+  --chatgpt-sign-in-pointer-y: 58%;
+
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  block-size: 100%;
+  min-inline-size: 17.5rem;
+  display: grid;
+  place-items: center;
+  padding: clamp(1.25rem, 5vw, 3rem);
+  background-color: var(--sigvelo-color-canvas);
+  background-image:
+    linear-gradient(
+      color-mix(in oklab, var(--sigvelo-color-neutral-border-subtle), transparent 42%) 1px,
+      transparent 1px
+    ),
+    linear-gradient(
+      90deg,
+      color-mix(in oklab, var(--sigvelo-color-neutral-border-subtle), transparent 42%) 1px,
+      transparent 1px
+    );
+  background-size: 2rem 2rem;
+  color: var(--sigvelo-color-text);
+  font-family: var(--sigvelo-font-sans);
+}
+
+.chatgpt-sign-in::before {
+  content: "";
+  position: absolute;
+  z-index: 0;
+  inset: 0;
+  background:
+    radial-gradient(
+      circle at var(--chatgpt-sign-in-pointer-x) var(--chatgpt-sign-in-pointer-y),
+      color-mix(in oklab, var(--sigvelo-color-primary-bg), transparent 72%),
+      transparent 12rem
+    ),
+    radial-gradient(
+      circle at var(--chatgpt-sign-in-pointer-x) var(--chatgpt-sign-in-pointer-y),
+      color-mix(in oklab, var(--sigvelo-color-primary-bg-muted), transparent 86%),
+      transparent 18rem
+    );
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--sigvelo-duration-medium) var(--sigvelo-ease-standard);
+}
+
+.chatgpt-sign-in[data-pointer-active="true"]::before {
+  opacity: 1;
+}
+
+.chatgpt-sign-in__panel {
+  position: relative;
+  z-index: 1;
+  isolation: isolate;
+  display: grid;
+  gap: 1.25rem;
+  justify-items: center;
+  text-align: center;
+}
+
+.chatgpt-sign-in__brand {
+  display: grid;
+  gap: 0.375rem;
+  justify-items: center;
+}
+
+.chatgpt-sign-in__brand h1 {
+  margin: 0;
+  color: var(--sigvelo-color-text);
+  font-size: var(--sigvelo-text-2xl);
+  font-weight: var(--sigvelo-font-weight-bold);
+  letter-spacing: 0;
+  line-height: 1.1;
+}
+
+.chatgpt-sign-in__brand p {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin: 0;
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-sm);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: 1.25;
+}
+
+.chatgpt-sign-in__brand-mark,
+.chatgpt-sign-in__logo {
+  display: inline-flex;
+}
+
+.chatgpt-sign-in__brand-mark :where(img, svg) {
+  inline-size: 1.35rem;
+  block-size: 1.35rem;
+  filter: drop-shadow(
+    0 0.25rem 0.5rem color-mix(in oklab, var(--sigvelo-color-primary-bg), transparent 72%)
+  );
+}
+
+.chatgpt-sign-in__button {
+  --chatgpt-sign-in-button-x: 50%;
+  --chatgpt-sign-in-button-y: 50%;
+
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  min-inline-size: min(100%, 16.75rem);
+  box-shadow:
+    inset 0 0 0 1px color-mix(in oklab, var(--sigvelo-color-primary-text-on-bg), transparent 84%),
+    0 0.75rem 1.5rem color-mix(in oklab, var(--sigvelo-color-primary-bg), transparent 78%);
+  translate: 0;
+  scale: 1;
+  transition:
+    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    box-shadow var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    filter var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    scale var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    translate var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+}
+
+.chatgpt-sign-in__button::before {
+  content: "";
+  position: absolute;
+  z-index: 0;
+  inset: 0;
+  background: radial-gradient(
+    circle at var(--chatgpt-sign-in-button-x) var(--chatgpt-sign-in-button-y),
+    color-mix(in oklab, var(--sigvelo-color-primary-text-on-bg), transparent 70%),
+    transparent 42%
+  );
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+}
+
+.chatgpt-sign-in__button::after {
+  content: "";
+  position: absolute;
+  z-index: 0;
+  inset: 1px;
+  border-radius: inherit;
+  background: radial-gradient(
+    circle at var(--chatgpt-sign-in-button-x) var(--chatgpt-sign-in-button-y),
+    color-mix(in oklab, var(--sigvelo-color-primary-text-on-bg), transparent 88%),
+    transparent 55%
+  );
+  opacity: 0.45;
+  pointer-events: none;
+}
+
+.chatgpt-sign-in__button:hover:not([data-disabled]) {
+  box-shadow:
+    inset 0 0 0 1px color-mix(in oklab, var(--sigvelo-color-primary-text-on-bg), transparent 76%),
+    0 0.9rem 1.9rem color-mix(in oklab, var(--sigvelo-color-primary-bg), transparent 72%);
+  translate: 0 -0.0625rem;
+}
+
+.chatgpt-sign-in__button:hover:not([data-disabled])::before {
+  opacity: 1;
+}
+
+.chatgpt-sign-in__button:active:not([data-disabled]) {
+  translate: 0 0.0625rem;
+  scale: 0.99;
+}
+
+.chatgpt-sign-in__button-icon,
+.chatgpt-sign-in__button-label {
+  position: relative;
+  z-index: 1;
+}
+
+.chatgpt-sign-in__button-icon {
+  display: inline-flex;
+  rotate: 0deg;
+  scale: 1;
+  transition:
+    rotate var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    scale var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+}
+
+.chatgpt-sign-in__button:hover:not([data-disabled]) .chatgpt-sign-in__button-icon {
+  rotate: -4deg;
+  scale: 1.06;
+}
+
+.chatgpt-sign-in__logo {
+  color: inherit;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chatgpt-sign-in::before,
+  .chatgpt-sign-in__button,
+  .chatgpt-sign-in__button::before,
+  .chatgpt-sign-in__button-icon {
+    transition: none;
+  }
+}
+
+@media (hover: none), (pointer: coarse) {
+  .chatgpt-sign-in::before,
+  .chatgpt-sign-in__button::before,
+  .chatgpt-sign-in__button::after {
+    display: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .chatgpt-sign-in::before,
+  .chatgpt-sign-in__button::before,
+  .chatgpt-sign-in__button::after {
+    display: none;
+  }
+
+  .chatgpt-sign-in__button {
+    background-image: none;
+    box-shadow: none;
+    outline: 1px solid ButtonText;
+    outline-offset: 2px;
+  }
+}

package/dist/styles/code-block.css

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   width: 100%;
+  min-inline-size: 0;
   font-family: var(--sigvelo-font-sans);
   /* Fill-based containment: no perimeter border */
   background-color: var(--sigvelo-color-neutral-bg-subtle);
@@ -47,8 +48,9 @@
 
 .code-block__container {
   position: relative;
-  overflow: auto;
-  max-height: 30rem;
+  min-inline-size: 0;
+  overflow-x: auto;
+  overflow-y: auto;
 }
 
 .code-block__content {
@@ -59,7 +61,7 @@
   font-size: 0.8125rem;
   line-height: 1.55;
   color: var(--sigvelo-color-text);
-  overflow-x: auto;
+  overflow: visible;
 }
 
 .code-block__content--highlighted {
@@ -74,7 +76,7 @@
   font-family: var(--sigvelo-font-mono);
   font-size: 0.8125rem;
   line-height: 1.55;
-  overflow-x: auto;
+  overflow: visible;
 }
 
 .code-block__content--numbered:is(pre) > code,

package/dist/styles/conversation.css

@@ -27,6 +27,16 @@
   min-height: 100%;
 }
 
+.conversation__empty-row {
+  display: flex;
+  flex: 1;
+  min-block-size: 0;
+}
+
+.conversation__empty-row > .conversation__empty {
+  flex: 1;
+}
+
 .conversation__empty {
   display: flex;
   flex: 1;

package/dist/styles/index.css

@@ -30,8 +30,10 @@
 @import "./github-motion-mark.css" layer(components);
 @import "./input.css" layer(components);
 @import "./label.css" layer(components);
+@import "./marker.css" layer(components);
 @import "./menu.css" layer(components);
 @import "./menubar.css" layer(components);
+@import "./message-scroller.css" layer(components);
 @import "./meter.css" layer(components);
 @import "./navigation-menu.css" layer(components);
 @import "./nanite-scene.css" layer(components);
@@ -70,6 +72,7 @@
 @import "./file-tree.css" layer(components);
 @import "./message.css" layer(components);
 @import "./model-selector.css" layer(components);
+@import "./chatgpt-sign-in-screen.css" layer(components);
 @import "./prompt-input.css" layer(components);
 @import "./queue.css" layer(components);
 @import "./reasoning.css" layer(components);
@@ -77,6 +80,7 @@
 @import "./task.css" layer(components);
 @import "./terminal.css" layer(components);
 @import "./test-results.css" layer(components);
+@import "./think-full-app.css" layer(components);
 @import "./web-preview.css" layer(components);
 @import "./workspace-explorer.css" layer(components);
 

package/dist/styles/marker.css

@@ -0,0 +1,95 @@
+.marker {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  min-height: 1rem;
+  font-family: var(--sigvelo-font-sans);
+  font-size: var(--sigvelo-text-sm);
+  line-height: 1.5;
+  color: var(--sigvelo-color-text-muted);
+  text-align: start;
+}
+
+.marker:where(a, button) {
+  padding: 0;
+  font: inherit;
+  color: var(--sigvelo-color-text-muted);
+  text-decoration: none;
+  background: transparent;
+  border: 0;
+}
+
+.marker:where(button) {
+  cursor: pointer;
+}
+
+.marker:where(a, button):hover {
+  color: var(--sigvelo-color-text);
+}
+
+.marker:where(a, button):focus-visible {
+  outline: none;
+  border-radius: var(--sigvelo-radius-sm);
+  box-shadow:
+    0 0 0 2px var(--sigvelo-color-canvas),
+    0 0 0 4px var(--sigvelo-color-focus);
+}
+
+.marker--separator::before,
+.marker--separator::after {
+  content: "";
+  flex: 1 1 0;
+  min-width: 0;
+  height: var(--sigvelo-border-width);
+  background-color: var(--sigvelo-color-neutral-border-subtle);
+}
+
+.marker--separator::before {
+  margin-inline-end: 0.25rem;
+}
+
+.marker--separator::after {
+  margin-inline-start: 0.25rem;
+}
+
+.marker--border {
+  padding-block-end: 0.5rem;
+  border-block-end: var(--sigvelo-border-width) var(--sigvelo-border-style)
+    var(--sigvelo-color-neutral-border-subtle);
+}
+
+.marker__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+  align-items: center;
+  justify-content: center;
+}
+
+.marker__icon svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.marker__content {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.marker--separator .marker__content {
+  flex: 0 1 auto;
+  text-align: center;
+}
+
+.marker a {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 0.1875rem;
+}
+
+.marker a:hover {
+  color: var(--sigvelo-color-text);
+}

package/dist/styles/message-scroller.css

@@ -0,0 +1,113 @@
+.message-scroller {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  font-family: var(--sigvelo-font-sans);
+  color: var(--sigvelo-color-text);
+}
+
+.message-scroller__viewport {
+  --message-scroller-fade-size: min(12%, 2.5rem);
+  --message-scroller-fade-t: 0px;
+  --message-scroller-fade-b: 0px;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+  contain: content;
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 var(--message-scroller-fade-t),
+    #000 calc(100% - var(--message-scroller-fade-b)),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 var(--message-scroller-fade-t),
+    #000 calc(100% - var(--message-scroller-fade-b)),
+    transparent 100%
+  );
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+}
+
+.message-scroller__viewport[data-scrollable~="end"] {
+  --message-scroller-fade-b: var(--message-scroller-fade-b-size, var(--message-scroller-fade-size));
+}
+
+.message-scroller__content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  min-height: 100%;
+}
+
+.message-scroller__item {
+  min-width: 0;
+  flex-shrink: 0;
+}
+
+.message-scroller__button {
+  position: absolute;
+  inset-inline-start: 50%;
+  inset-block-end: 1rem;
+  z-index: 1;
+  translate: -50% 0;
+  border-radius: 999rem;
+  box-shadow: var(--sigvelo-shadow-sm);
+  transition:
+    opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    scale var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    translate var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+}
+
+.message-scroller__button[data-direction="start"] {
+  inset-block-start: 1rem;
+  inset-block-end: auto;
+}
+
+.message-scroller__button[data-active="false"] {
+  pointer-events: none;
+  opacity: 0;
+  scale: 0.95;
+}
+
+.message-scroller__button[data-direction="end"][data-active="false"] {
+  translate: -50% 0.5rem;
+}
+
+.message-scroller__button[data-direction="start"][data-active="false"] {
+  translate: -50% -0.5rem;
+}
+
+.message-scroller__button[data-direction="start"] svg {
+  rotate: 180deg;
+}
+
+.message-scroller__button-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (forced-colors: active) {
+  .message-scroller__button {
+    border: 1px solid CanvasText;
+  }
+}