@robr0/design-system 0.4.0 → 0.5.0

package/components/ChatMarker/ChatMarker.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+/** Props owned by ChatMarker itself — everything else falls through to the root element. */
+type ChatMarkerOwnProps = {
+    /** Leading icon — a Material Symbol name, or any custom element. */
+    icon?: string | React.ReactNode;
+    /** Draw the flanking divider lines. Turn off for a bare centred note. */
+    line?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** The marker text, e.g. "Today" or "Chat renamed". */
+    children?: React.ReactNode;
+};
+export interface ChatMarkerProps extends ChatMarkerOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof ChatMarkerOwnProps> {
+}
+/**
+ * ChatMarker is the inline separator a conversation uses for anything that
+ * is not a turn: date breaks, joins, mode changes, system notes. It reads
+ * as furniture rather than as a message — quiet tertiary text between two
+ * divider lines, so the eye skips it while scanning turns.
+ */
+export declare const ChatMarker: React.ForwardRefExoticComponent<ChatMarkerProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/ChatMarker/ChatMarker.js

@@ -0,0 +1,18 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import "./ChatMarker.css";
+import "../../fonts/material-symbols.css";
+const ChatMarker = React.forwardRef(
+  ({ icon, line = true, className = "", children, ...rest }, ref) => {
+    const baseClass = "ds-chat-marker";
+    const classes = [baseClass, line ? "" : `${baseClass}--bare`, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx("div", { ...rest, ref, className: classes, role: "separator", children: /* @__PURE__ */ jsxs("span", { className: `${baseClass}__label`, children: [
+      icon && /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: typeof icon === "string" ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: icon }) : icon }),
+      children
+    ] }) });
+  }
+);
+ChatMarker.displayName = "ChatMarker";
+export {
+  ChatMarker
+};

package/components/ChatMessage/ChatMessage.css

@@ -0,0 +1,304 @@
+/* ============================================
+   CHAT MESSAGE COMPONENT
+   A single chat turn: avatar, author, timestamp,
+   and bubble or plain content aligned by role.
+
+   Bubble surfaces come only from the four
+   --color-chat-bubble-* tokens — never the
+   container ramp directly — so re-theming a chat
+   means repointing those four and nothing else.
+   ============================================ */
+
+.ds-chat-message {
+  /* Gutter width matches the Avatar sm footprint, so a run of turns keeps
+     its left edge whether or not each row shows its avatar. Consumers can
+     repoint it for a larger avatar. */
+  --ds-chat-message-gutter: var(--icon-size-lg);
+
+  display: flex;
+  align-items: flex-start;
+  gap: var(--gap-sm-md);
+  width: 100%;
+}
+
+.ds-chat-message--user {
+  flex-direction: row-reverse;
+}
+
+/* ============================================
+   GUTTER
+   ============================================ */
+
+.ds-chat-message__gutter {
+  flex: none;
+  display: flex;
+  justify-content: center;
+  width: var(--ds-chat-message-gutter);
+}
+
+/* Hidden, not removed — the reserved width is what keeps a run aligned */
+.ds-chat-message__gutter--hidden {
+  visibility: hidden;
+}
+
+/* ============================================
+   BODY
+   ============================================ */
+
+.ds-chat-message__body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--gap-xs);
+}
+
+.ds-chat-message--user .ds-chat-message__body {
+  align-items: flex-end;
+}
+
+/* ============================================
+   META ROW
+   ============================================ */
+
+.ds-chat-message__meta {
+  display: flex;
+  align-items: baseline;
+  gap: var(--gap-sm);
+}
+
+.ds-chat-message__author {
+  font-family: var(--font-paragraph-sm-em-family);
+  font-size: var(--font-paragraph-sm-em-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+  color: var(--color-text-secondary);
+}
+
+.ds-chat-message__timestamp {
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-tertiary);
+}
+
+/* ============================================
+   CONTENT
+   ============================================ */
+
+.ds-chat-message__content {
+  font-family: var(--font-paragraph-family);
+  font-size: var(--font-paragraph-size);
+  font-weight: var(--font-paragraph-weight);
+  line-height: var(--font-paragraph-line-height);
+  letter-spacing: var(--font-paragraph-letter-spacing);
+  /* Content never pushes the turn wider than its container — an unbroken
+     run (a URL, a token) wraps inside the bubble or column instead. */
+  min-width: 0;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+}
+
+/* Plain — the assistant default: no surface, full width, primary text */
+.ds-chat-message--plain .ds-chat-message__content {
+  width: 100%;
+  color: var(--color-text-primary);
+}
+
+/* Bubble — capped width so a short line never drags a surface across the
+   whole row; the fallback is the sanctioned consumer-override hook */
+.ds-chat-message--bubble .ds-chat-message__content {
+  max-width: var(--ds-chat-message-max-width, 75%);
+  padding: var(--padding-sm-md) var(--padding-lg);
+  border-radius: var(--radius-xl);
+}
+
+/* Sent — the user's own turns */
+.ds-chat-message--bubble.ds-chat-message--user .ds-chat-message__content {
+  background-color: var(--color-chat-bubble-sent-bg);
+  color: var(--color-chat-bubble-sent-text);
+}
+
+/* Received — an assistant turn opted into a bubble */
+.ds-chat-message--bubble.ds-chat-message--assistant .ds-chat-message__content {
+  background-color: var(--color-chat-bubble-received-bg);
+  color: var(--color-chat-bubble-received-text);
+}
+
+/* Tail — the speaker-side bottom corner squares off to point at them */
+.ds-chat-message--tail.ds-chat-message--bubble.ds-chat-message--user
+  .ds-chat-message__content {
+  border-bottom-right-radius: var(--radius-xs);
+}
+
+.ds-chat-message--tail.ds-chat-message--bubble.ds-chat-message--assistant
+  .ds-chat-message__content {
+  border-bottom-left-radius: var(--radius-xs);
+}
+
+/* ============================================
+   GROUPED
+   A follow-on row in the same speaker's run:
+   no meta, avatar hidden but gutter kept, and
+   the row pulls up towards the one above so the
+   run reads as one utterance. The negative
+   margin offsets part of the container's gap.
+   ============================================ */
+
+.ds-chat-message--grouped {
+  margin-top: calc(-1 * var(--gap-sm));
+}
+
+/* ============================================
+   COMPACT
+   ============================================ */
+
+.ds-chat-message--compact .ds-chat-message__content {
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+}
+
+.ds-chat-message--compact.ds-chat-message--bubble .ds-chat-message__content {
+  padding: var(--padding-xs) var(--padding-sm-md);
+}
+
+/* ============================================
+   PENDING
+   Three dots pulsing in sequence while the
+   first content is still on its way.
+   ============================================ */
+
+.ds-chat-message__pending {
+  --ds-chat-message-pending-cycle: var(--motion-duration-loop-matrix);
+
+  display: inline-flex;
+  align-items: center;
+}
+
+.ds-chat-message__dots {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-xs);
+}
+
+.ds-chat-message__dot {
+  width: var(--gap-sm);
+  height: var(--gap-sm);
+  border-radius: var(--radius-full);
+  background-color: var(--color-text-tertiary);
+  opacity: 0.25;
+  animation: ds-chat-message-dot var(--ds-chat-message-pending-cycle)
+    var(--motion-ease-linear) infinite;
+}
+
+.ds-chat-message__dot:nth-child(2) {
+  animation-delay: calc(var(--ds-chat-message-pending-cycle) / 6);
+}
+
+.ds-chat-message__dot:nth-child(3) {
+  animation-delay: calc(var(--ds-chat-message-pending-cycle) / 3);
+}
+
+/* Each dot brightens and falls back within the first half of the cycle, so
+   the stagger reads as a wave rather than three independent blinkers */
+@keyframes ds-chat-message-dot {
+  0%,
+  60%,
+  100% {
+    opacity: 0.25;
+  }
+
+  30% {
+    opacity: 1;
+  }
+}
+
+/* ============================================
+   ACTIONS
+   Hidden until the row is hovered or holds
+   keyboard focus; touch has no hover, so there
+   they stay visible.
+
+   Opacity only, never visibility: hidden would
+   drop the buttons from the tab order, so a
+   message with no other focusable child could
+   never match :focus-within and keyboard users
+   could never reach the actions. Invisible-but-
+   tabbable is the point — the first Tab into a
+   button reveals the row.
+   ============================================ */
+
+.ds-chat-message__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xs);
+  /* The row hides with opacity, not display, so this offset is always
+     reserved — the body's own gap plus this margin sets the row a full
+     --gap-md off the content without loosening the meta stack above. */
+  margin-top: var(--gap-sm-md);
+  opacity: 0;
+  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-chat-message:hover .ds-chat-message__actions,
+.ds-chat-message:focus-within .ds-chat-message__actions {
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .ds-chat-message__actions {
+    opacity: 1;
+  }
+}
+
+/* ============================================
+   FOOTER
+   ============================================ */
+
+.ds-chat-message__footer {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--gap-xs);
+}
+
+/* ============================================
+   VISUALLY HIDDEN
+   The pending label is for screen readers only.
+   ============================================ */
+
+.ds-chat-message__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ============================================
+   REDUCED MOTION
+   The global guard collapses the loop to its
+   final frame, which is the dim phase — three
+   near-invisible dots. Park them at a legible
+   static opacity instead; the visually hidden
+   label still says what is happening.
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-chat-message__dot {
+    animation: none;
+    opacity: 0.55;
+  }
+}

package/components/ChatMessage/ChatMessage.d.ts

@@ -0,0 +1,68 @@
+import { default as React } from 'react';
+/** Props owned by ChatMessage itself — everything else falls through to the root element. */
+type ChatMessageOwnProps = {
+    /**
+     * Which side of the conversation this turn belongs to. Drives alignment
+     * and the default surface: user turns are right-aligned bubbles,
+     * assistant turns are surface-less full-width text. Shadows the ARIA
+     * role attribute; the root renders no ARIA role.
+     */
+    role?: 'user' | 'assistant';
+    /** Avatar slot, e.g. an `<Avatar>`. Omit for no gutter at all. */
+    avatar?: React.ReactNode;
+    /**
+     * Show the passed avatar. When false the avatar is hidden but its gutter
+     * space is kept, so consecutive rows in a run stay aligned.
+     */
+    showAvatar?: boolean;
+    /** Display name shown above the content. */
+    author?: string;
+    /** Time shown beside the author, e.g. "2:41 PM". Free text, so callers keep their own formatting. */
+    timestamp?: string;
+    /**
+     * Consecutive-message mode: hides the avatar (keeping its gutter), drops
+     * the author and timestamp, and tightens the spacing to the row above.
+     */
+    grouped?: boolean;
+    /**
+     * Override the role's default surface. Explicit true on an assistant turn
+     * renders a received bubble; explicit false on a user turn renders plain text.
+     */
+    bubble?: boolean;
+    /**
+     * Square the speaker-side bottom corner of the bubble — bottom-right on a
+     * sent bubble, bottom-left on a received one. Only meaningful when a
+     * bubble renders.
+     */
+    tail?: boolean;
+    /** Compact drops the type one size step and tightens the bubble padding. */
+    size?: 'default' | 'compact';
+    /** Waiting for the first content: renders a three-dot pulse in place of children. */
+    pending?: boolean;
+    /** Accessible text announced for the pending state. */
+    pendingLabel?: string;
+    /** Action row under the content, revealed on hover and keyboard focus (always visible on touch). */
+    actions?: React.ReactNode;
+    /** Footer slot under the content — a sources row, an edited note. */
+    footer?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * The message content. The package ships no markdown renderer; render
+     * markdown yourself, ideally wrapped in Prose, and pass the result.
+     */
+    children?: React.ReactNode;
+};
+export interface ChatMessageProps extends ChatMessageOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof ChatMessageOwnProps> {
+}
+/**
+ * ChatMessage is a single chat turn: avatar, author, timestamp, and the
+ * content itself, aligned by role. User turns read as right-aligned bubbles;
+ * assistant turns read as plain full-width text, so a transcript keeps the
+ * question-and-answer rhythm without every row wearing a surface.
+ *
+ * The bubble colours come exclusively from the four `--color-chat-bubble-*`
+ * tokens, so re-theming a chat means repointing those and nothing else.
+ */
+export declare const ChatMessage: React.ForwardRefExoticComponent<ChatMessageProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/ChatMessage/ChatMessage.js

@@ -0,0 +1,69 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import "./ChatMessage.css";
+const ChatMessage = React.forwardRef(
+  ({
+    role = "assistant",
+    avatar,
+    showAvatar = true,
+    author,
+    timestamp,
+    grouped = false,
+    bubble,
+    tail = false,
+    size = "default",
+    pending = false,
+    pendingLabel = "Waiting for a reply",
+    actions,
+    footer,
+    className = "",
+    children,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-chat-message";
+    const hasBubble = bubble ?? role === "user";
+    const hideAvatar = grouped || !showAvatar;
+    const classes = [
+      baseClass,
+      `${baseClass}--${role}`,
+      hasBubble ? `${baseClass}--bubble` : `${baseClass}--plain`,
+      tail ? `${baseClass}--tail` : "",
+      grouped ? `${baseClass}--grouped` : "",
+      size === "compact" ? `${baseClass}--compact` : "",
+      pending ? `${baseClass}--pending` : "",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      avatar !== void 0 && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: [
+            `${baseClass}__gutter`,
+            hideAvatar ? `${baseClass}__gutter--hidden` : ""
+          ].filter(Boolean).join(" "),
+          children: avatar
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__body`, children: [
+        !grouped && (author || timestamp) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__meta`, children: [
+          author && /* @__PURE__ */ jsx("span", { className: `${baseClass}__author`, children: author }),
+          timestamp && /* @__PURE__ */ jsx("span", { className: `${baseClass}__timestamp`, children: timestamp })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: `${baseClass}__content`, children: pending ? /* @__PURE__ */ jsxs("span", { className: `${baseClass}__pending`, role: "status", children: [
+          /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr-only`, children: pendingLabel }),
+          /* @__PURE__ */ jsxs("span", { className: `${baseClass}__dots`, "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__dot` }),
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__dot` }),
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__dot` })
+          ] })
+        ] }) : children }),
+        actions && /* @__PURE__ */ jsx("div", { className: `${baseClass}__actions`, children: actions }),
+        footer && /* @__PURE__ */ jsx("div", { className: `${baseClass}__footer`, children: footer })
+      ] })
+    ] });
+  }
+);
+ChatMessage.displayName = "ChatMessage";
+export {
+  ChatMessage
+};

package/components/ChatThread/ChatThread.css

@@ -0,0 +1,171 @@
+/* ============================================
+   CHAT THREAD COMPONENT
+   Scrollable conversation column: edge fades,
+   send-to-top anchoring, subtle scrollbar.
+   ============================================ */
+
+/* Base — the root is the scroll container. Inline gutters live on
+   __content, so the scrollbar rides the component's far edge. */
+.ds-chat-thread {
+  position: relative;
+  overflow-y: auto;
+  min-height: 0;
+  /* The component owns anchoring; the browser's native scroll anchoring
+     otherwise latches onto the trailing spacer and drags the viewport
+     down while a response streams in. */
+  overflow-anchor: none;
+  /* Anchoring scrolls glide; the reduced-motion guard in tokens-motion.css
+     forces scroll-behavior back to auto. */
+  scroll-behavior: smooth;
+
+  /* Subtle scrollbar — invisible until the thread is actually scrolling.
+     The gutter is reserved permanently: on classic-scrollbar platforms a
+     scrollbar popping in (the first overflowing turn, or a rounding
+     flicker mid-animation) would otherwise reflow the content sideways. */
+  scrollbar-width: thin;
+  scrollbar-gutter: stable;
+  scrollbar-color: transparent transparent;
+  transition: scrollbar-color var(--motion-duration-base) var(--motion-ease-standard);
+
+  /* Edge fades — a CSS mask, not a scroll listener: content scrolling out
+     at either end passes through the fade.
+     ds-allow(color): mask alpha keywords (black/transparent), not palette colours */
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent,
+    black var(--gap-lg),
+    black calc(100% - var(--gap-lg)),
+    transparent
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    transparent,
+    black var(--gap-lg),
+    black calc(100% - var(--gap-lg)),
+    transparent
+  );
+}
+
+/* States */
+.ds-chat-thread--scrolling {
+  scrollbar-color: var(--color-divider) transparent;
+}
+
+.ds-chat-thread:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+}
+
+/* Content — the turns. Consumers override the inline gutters (mobile
+   densities) through --ds-chat-thread-padding-inline, and can cap the
+   conversation column through --ds-chat-thread-content-max-width: the
+   column centres itself while the scroll container, its fades, and the
+   scrollbar keep spanning the full component width. */
+.ds-chat-thread__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xl);
+  max-width: var(--ds-chat-thread-content-max-width, none);
+  margin-inline: auto;
+  /* Roomy bottom padding: the end of a long response rests 40px clear of
+     the composer, so the last lines stay readable. The right padding
+     subtracts the measured scrollbar gutter (--ds-chat-thread-gutter, set
+     by the component) so the column stays symmetric and aligned with its
+     surroundings on classic-scrollbar platforms. */
+  padding: var(--padding-lg)
+    max(0px, calc(var(--ds-chat-thread-padding-inline, var(--padding-lg)) - var(--ds-chat-thread-gutter, 0px)))
+    var(--padding-xl) var(--ds-chat-thread-padding-inline, var(--padding-lg));
+  /* The first send into an empty thread floats up from composer level —
+     a transform glide, since no scroll distance exists yet. Later sends
+     glide via scroll instead; this transition only ever sees the
+     component-driven translateY. */
+  transition: transform var(--motion-duration-slower) var(--motion-ease-entrance);
+}
+
+/* The list scrolls; entries never shrink. Without this, children that clip
+   their own overflow collapse when the column overflows. */
+.ds-chat-thread__content > * {
+  flex-shrink: 0;
+}
+
+/* Trailing spacer — sized by the component so the newest turn can always
+   reach the top of the viewport, and holds no more room than that: it
+   shrinks away as a response grows into the space it was reserving. */
+.ds-chat-thread__spacer {
+  height: 0;
+}
+
+/* Scroll-to-bottom — a sticky, zero-height slot pinned just above the
+   bottom fade, so the control floats centred over the transcript right
+   on top of the composer. */
+.ds-chat-thread__jump-slot {
+  position: sticky;
+  bottom: var(--gap-lg);
+  height: 0;
+  display: flex;
+  justify-content: center;
+  /* Bottom-align against the zero-height line — the default stretch
+     would squash the circle flat. */
+  align-items: flex-end;
+  /* The slot spans the content box, which excludes the gutter; this
+     re-centres the control on the full component width. */
+  padding-left: var(--ds-chat-thread-gutter, 0px);
+  z-index: 1;
+}
+
+/* The passive ramp is a ghost family meant to paint over a surface, so
+   the floating pill supplies its own: container surface + border below,
+   the passive layer above stepping through rest, hover, and active. */
+.ds-chat-thread__jump {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* The send button's exact footprint — CircularButton's default size,
+     a raw value there too (icon-button sizes are not on a token scale). */
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  border-radius: var(--radius-full);
+  background-color: var(--color-bg-container-primary);
+  background-image: linear-gradient(
+    var(--color-action-passive-bg),
+    var(--color-action-passive-bg)
+  );
+  color: var(--color-action-passive-text);
+  box-shadow: var(--shadow-floating);
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-chat-thread__jump--visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.ds-chat-thread__jump:hover {
+  background-image: linear-gradient(
+    var(--color-action-passive-bg-hover),
+    var(--color-action-passive-bg-hover)
+  );
+}
+
+.ds-chat-thread__jump:active {
+  background-image: linear-gradient(
+    var(--color-action-passive-bg-active),
+    var(--color-action-passive-bg-active)
+  );
+}
+
+.ds-chat-thread__jump:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+/* The glyph matches the send button's: --icon-size-md in a 40px circle
+   (icon plus the padding ring), pointing the other way. */
+.ds-chat-thread__jump-icon {
+  --icon-size: var(--icon-size-md);
+}

package/components/ChatThread/ChatThread.d.ts

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+/** Props owned by ChatThread itself — everything else falls through to the root element. */
+type ChatThreadOwnProps = {
+    /**
+     * Scroll a newly appended turn to the top of the viewport, pushing the
+     * prior conversation upward. When a user turn and the agent's pending
+     * turn are appended in the same update, the first new child is the one
+     * anchored — the response streams in below it. Detection diffs the DOM
+     * child count, so replacing turns in place (a future regenerate or
+     * edit-last-turn) neither re-anchors nor resizes the spacer.
+     */
+    anchor?: boolean;
+    /** Accessible name for the scrollable conversation region. */
+    ariaLabel?: string;
+    /** Accessible name for the scroll-to-bottom control. */
+    jumpLabel?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** The conversation, in order: ChatMessages, ChatMarkers. */
+    children?: React.ReactNode;
+};
+export interface ChatThreadProps extends ChatThreadOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof ChatThreadOwnProps> {
+}
+/**
+ * ChatThread is the scrollable conversation column: consistent gutters, a
+ * pure-CSS fade at either end so content scrolling out passes through it,
+ * and the send choreography — a newly appended turn floats to the top of
+ * the viewport while the prior conversation is pushed upward, leaving the
+ * response room to stream in below.
+ *
+ * A trailing spacer grows just enough that even a short newest exchange can
+ * reach the top, so the anchor position never depends on how much has been
+ * said. The scrollbar stays hidden until the thread is actually scrolling,
+ * and rides the component's far edge — the content gutters live on an inner
+ * wrapper, overridable via `--ds-chat-thread-padding-inline`.
+ *
+ * The smooth scroll respects reduced motion (the motion tokens' guard forces
+ * instant scrolling). Forwards a ref to the scrollable root element.
+ */
+export declare const ChatThread: React.ForwardRefExoticComponent<ChatThreadProps & React.RefAttributes<HTMLDivElement>>;
+export {};