@robr0/design-system 0.4.0 → 0.5.0

package/README.md

@@ -18,7 +18,7 @@ The **live site** is the portfolio built on the design system. **Storybook** is
 | Part | Description |
 |---|---|
 | **Portfolio website** (`/website`) | Next.js app with case studies, work history, writing, and about pages, all built exclusively with the design system components below. **[Live site →](https://robertritacca.com/)** |
-| **Design system** (`/src`) | <!-- component-count -->64<!-- /component-count --> React components, a three-tier token architecture, dark mode, and a full documentation site. Built to production standards. **[Storybook →](https://design-system-iota-one.vercel.app/?path=/docs/robr0-ds--docs)** |
+| **Design system** (`/src`) | <!-- component-count -->78<!-- /component-count --> React components, a three-tier token architecture, dark mode, and a full documentation site. Built to production standards. **[Storybook →](https://design-system-iota-one.vercel.app/?path=/docs/robr0-ds--docs)** |
 
 ---
 
@@ -27,7 +27,7 @@ The **live site** is the portfolio built on the design system. **Storybook** is
 ### Components
 
 <!-- component-list:start -->
-Accordion · Agent status · Alert · Alert dialog · App layout · App sidebar · Avatar · Badge · Breadcrumb · Button · Button group · Card · Carousel · Chart · Checkbox · Chip · Circular button · Code block · Colour picker · Combobox · Command palette · Contact card · Context menu · Contribution graph · Date input · Date picker · Dialog · Divider · Drawer · Dropdown · Dropdown menu · Empty state · Entity card · Field · Figure · File input · Input · Instructions · Kbd · Link list · Navigation · Pagination · Popover · Progress bar · Quote · Radio button · Reasoning · Section title · Segmented control · Selection card · Skeleton · Slider · Spinner · Stat · Swatch · Table · Tabs · Textarea · Timeline · Toast · Toggle group · Toggle switch · Tool call · Tooltip
+Accordion · Agent status · AI button · Alert · Alert dialog · App layout · App sidebar · Avatar · Badge · Breadcrumb · Button · Button group · Card · Carousel · Chart · Chat header · Chat marker · Chat message · Chat thread · Checkbox · Chip · Circular button · Code block · Colour picker · Combobox · Command palette · Composer · Contact card · Context menu · Contribution graph · Date input · Date picker · Dialog · Divider · Document chip · Drawer · Dropdown · Dropdown menu · Empty state · Entity card · Field · Figure · File input · Input · Instructions · Interrupt card · Kbd · Link list · Message actions · Message card · Navigation · Nav list · Pagination · Popover · Progress bar · Prompt suggestions · Prose · Quote · Radio button · Reasoning · Section title · Segmented control · Selection card · Skeleton · Slider · Source chip · Spinner · Stat · Swatch · Table · Tabs · Textarea · Timeline · Toast · Toggle group · Toggle switch · Tool call · Tooltip
 <!-- component-list:end -->
 
 ### Using the package

package/components/AgentStatus/AgentStatus.css

@@ -22,20 +22,22 @@
 .ds-agent-status {
   --ds-agent-color: var(--color-text-secondary);
   --ds-agent-label-color: var(--color-text-secondary);
+  --ds-agent-shimmer-base: var(--color-text-primary);
+  --ds-agent-shimmer-sweep: var(--color-text-tertiary);
   --ds-agent-dot-dim: 0.2;
   --ds-agent-dot-rest: 0.82;
   --ds-agent-cycle: var(--motion-duration-loop-matrix);
   --ds-agent-slot: calc(var(--ds-agent-cycle) / 12);
-  --ds-agent-matrix-size: var(--icon-size-sm);
+  --ds-agent-matrix-size: var(--icon-size-md);
 
   display: inline-flex;
   align-items: center;
-  gap: var(--gap-sm);
-  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);
+  gap: var(--gap-sm-md);
+  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);
 }
 
 /* ============================================
@@ -63,20 +65,60 @@
    ============================================ */
 
 .ds-agent-status__label {
+  position: relative;
   color: var(--ds-agent-label-color);
   min-width: 0;
 }
 
-/* A gradient between the secondary text colour the label already sits at and
-   the primary text colour, sweeping left to right: with an oversized
-   background image, background-position 100% shows its right edge, 0% its
-   left, so counting down walks the bright band across the text. */
+/* Label crossfade: when the label string changes, the outgoing copy sits
+   absolutely over the incoming one and fades up and out while the new one
+   fades up and in — one continuous upward motion. */
+.ds-agent-status__label-text {
+  display: inline-block;
+}
+
+/* The animations live only on the modifier classes, and the modifiers come
+   off once the swap settles: a filled animation can pin the span to its
+   own compositor layer, which would escape the shimmer's text clip and
+   leave the label invisible for good. */
+.ds-agent-status__label-text--in {
+  animation: ds-agent-label-in var(--motion-duration-slow) var(--motion-ease-entrance) both;
+  animation-delay: calc(var(--motion-duration-slow) / 2);
+}
+
+.ds-agent-status__label-text--out {
+  position: absolute;
+  left: 0;
+  top: 0;
+  white-space: nowrap;
+  animation: ds-agent-label-out var(--motion-duration-slow) var(--motion-ease-standard) both;
+  animation-delay: 0s;
+}
+
+@keyframes ds-agent-label-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+}
+
+@keyframes ds-agent-label-out {
+  to {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+}
+
+/* A gradient between the shimmer base and sweep colours, moving left to
+   right: with an oversized background image, background-position 100% shows
+   its right edge, 0% its left, so counting down walks the sweep band across
+   the text. */
 .ds-agent-status__label--shimmer {
   background-image: linear-gradient(
     100deg,
-    var(--ds-agent-label-color) 35%,
-    var(--color-text-primary) 50%,
-    var(--ds-agent-label-color) 65%
+    var(--ds-agent-shimmer-base) 35%,
+    var(--ds-agent-shimmer-sweep) 50%,
+    var(--ds-agent-shimmer-base) 65%
   );
   background-size: 250% 100%;
   background-clip: text;
@@ -86,6 +128,16 @@
     var(--motion-ease-linear) infinite;
 }
 
+/* While a label crossfade runs, the shimmer's text clip stands down: an
+   animated descendant composites on its own layer, which escapes
+   background-clip: text and renders the text invisible. The swap motion
+   covers the pause; the sweep resumes on the settled text. */
+.ds-agent-status__label--shimmer.ds-agent-status__label--swapping {
+  background-image: none;
+  animation: none;
+  color: var(--ds-agent-label-color);
+}
+
 /* ============================================
    STATES
    The three working states are deliberately
@@ -102,6 +154,11 @@
 .ds-agent-status--waiting {
   --ds-agent-color: var(--color-status-warning-text);
   --ds-agent-label-color: var(--color-status-warning-text);
+
+  /* Waiting keeps its warning colour through the shimmer — colour is the
+     signal, so the sweep only brightens it rather than going monochrome. */
+  --ds-agent-shimmer-base: var(--color-status-warning-text);
+  --ds-agent-shimmer-sweep: var(--color-text-primary);
 }
 
 .ds-agent-status--done {
@@ -123,17 +180,20 @@
 
 /* ============================================
    SIZES
+   The scale pairs with ChatMessage: default
+   matches default message text, compact
+   matches compact message text.
    ============================================ */
 
-.ds-agent-status--md {
-  --ds-agent-matrix-size: var(--icon-size-md);
+.ds-agent-status--compact {
+  --ds-agent-matrix-size: var(--icon-size-sm);
 
-  gap: var(--gap-sm-md);
-  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);
+  gap: var(--gap-sm);
+  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);
 }
 
 /* ============================================

package/components/AgentStatus/AgentStatus.d.ts

@@ -13,8 +13,12 @@ type AgentStatusOwnProps = {
      * on for `thinking`, `working` and `waiting`, off for the resting states.
      */
     shimmer?: boolean;
-    /** Indicator and text scale. */
-    size?: 'sm' | 'md';
+    /**
+     * Indicator and text scale, paired with ChatMessage's sizes: `default`
+     * matches default message text, `compact` matches compact message text.
+     * `sm` and `md` are legacy aliases for `compact` and `default`.
+     */
+    size?: 'default' | 'compact' | 'sm' | 'md';
     /** `inline` sits in a line of content; `bar` is a full-width row for the top of a panel. */
     variant?: 'inline' | 'bar';
     /** Additional CSS classes */

package/components/AgentStatus/AgentStatus.js

@@ -1,5 +1,5 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import React from "react";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React, { useState, useRef, useEffect } from "react";
 import "./AgentStatus.css";
 const DOT_COUNT = 12;
 const DEFAULT_LABELS = {
@@ -17,7 +17,7 @@ const AgentStatus = React.forwardRef(
     label,
     pattern = "orbit",
     shimmer,
-    size = "sm",
+    size = "default",
     variant = "inline",
     className = "",
     children,
@@ -26,11 +26,23 @@ const AgentStatus = React.forwardRef(
     const baseClass = "ds-agent-status";
     const isActive = ACTIVE_STATES.includes(state);
     const isShimmering = shimmer ?? isActive;
+    const resolvedSize = size === "sm" ? "compact" : size === "md" ? "default" : size;
+    const resolvedLabel = label ?? DEFAULT_LABELS[state];
+    const [outgoing, setOutgoing] = useState(null);
+    const lastLabel = useRef(resolvedLabel);
+    useEffect(() => {
+      if (children != null) return;
+      if (lastLabel.current !== resolvedLabel) {
+        setOutgoing(lastLabel.current);
+        lastLabel.current = resolvedLabel;
+      }
+    }, [resolvedLabel, children]);
+    const isSwapping = outgoing !== null;
     const classes = [
       baseClass,
       `${baseClass}--${state}`,
       `${baseClass}--${pattern}`,
-      `${baseClass}--${size}`,
+      `${baseClass}--${resolvedSize}`,
       `${baseClass}--${variant}`,
       isActive ? `${baseClass}--animated` : "",
       className
@@ -40,8 +52,28 @@ const AgentStatus = React.forwardRef(
       /* @__PURE__ */ jsx(
         "span",
         {
-          className: `${baseClass}__label${isShimmering ? ` ${baseClass}__label--shimmer` : ""}`,
-          children: children ?? label ?? DEFAULT_LABELS[state]
+          className: `${baseClass}__label${isShimmering ? ` ${baseClass}__label--shimmer` : ""}${isSwapping ? ` ${baseClass}__label--swapping` : ""}`,
+          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+            isSwapping && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `${baseClass}__label-text ${baseClass}__label-text--out`,
+                "aria-hidden": "true",
+                children: outgoing
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `${baseClass}__label-text${isSwapping ? ` ${baseClass}__label-text--in` : ""}`,
+                onAnimationEnd: (e) => {
+                  if (e.target === e.currentTarget) setOutgoing(null);
+                },
+                children: resolvedLabel
+              },
+              resolvedLabel
+            )
+          ] })
         }
       )
     ] });

package/components/AiButton/AiButton.css

@@ -0,0 +1,163 @@
+/* ============================================
+   AI BUTTON
+   The AI entry point: transparent field, slowly
+   rotating gradient ring, soft glow of the same
+   gradient. The ring is the system's "a model
+   answers here" signal — ordinary actions keep
+   the flat action teal.
+   ============================================ */
+
+/* The rotation animates a registered custom property: a conic gradient's
+   angle cannot tween otherwise. Browsers without @property render the ring
+   at its initial angle, static — a correct, quieter fallback. */
+@property --ds-ai-button-angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: false;
+}
+
+/* Base */
+.ds-ai-button {
+  /* Layout */
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gap-sm);
+
+  /* Spacing — matches Button so the two sit on one control scale */
+  padding: var(--padding-sm) var(--padding-lg);
+
+  /* Buttons are always pill-shaped (design.md invariant) */
+  border-radius: var(--radius-full);
+
+  /* Typography — the clickable-control face, same as Button */
+  font-family: var(--font-paragraph-em-family);
+  font-weight: var(--font-paragraph-em-weight);
+  font-size: var(--font-paragraph-em-size);
+  line-height: var(--font-paragraph-em-line-height);
+  letter-spacing: var(--font-paragraph-em-letter-spacing);
+  text-align: center;
+
+  /* The field is transparent by design: the ring and glow are the button */
+  background: transparent;
+  color: var(--color-text-primary);
+
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+
+  /* Reset */
+  cursor: pointer;
+  border: none;
+  text-decoration: none;
+}
+
+/* The gradient ring: a conic gradient painted across the whole button, then
+   masked to the border band (two fills, exclude-composited, inset by the
+   border width). The gradient repeats back to its start colour so the seam
+   at 360° is invisible while it turns. */
+.ds-ai-button::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: var(--border-xs);
+  background: conic-gradient(
+    from var(--ds-ai-button-angle),
+    var(--color-ai-gradient-start),
+    var(--color-ai-gradient-mid),
+    var(--color-ai-gradient-end),
+    var(--color-ai-gradient-mid),
+    var(--color-ai-gradient-start)
+  );
+  /* Standard properties only — the build pipeline prefixes per its browser
+     targets, and hand-written -webkit- duplicates confuse its merging. */
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+  /* ds-allow(motion): ambient signature rotation, tuned by eye — deliberately
+     far slower than the interaction-scale motion tokens */
+  animation: ds-ai-button-turn 7s linear infinite;
+}
+
+/* The glow: the same gradient, blurred behind the button at low opacity.
+   A colour effect, not an elevation shadow — depth stays token-owned. */
+.ds-ai-button::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: conic-gradient(
+    from var(--ds-ai-button-angle),
+    var(--color-ai-gradient-start),
+    var(--color-ai-gradient-mid),
+    var(--color-ai-gradient-end),
+    var(--color-ai-gradient-mid),
+    var(--color-ai-gradient-start)
+  );
+  /* The glow's spread; a length with no token family, chosen by eye. */
+  --ds-ai-button-glow: 14px;
+  filter: blur(var(--ds-ai-button-glow));
+  opacity: 0.3;
+  z-index: -1;
+  pointer-events: none;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+  /* ds-allow(motion): same ambient rotation as the ring, kept in phase */
+  animation: ds-ai-button-turn 7s linear infinite;
+}
+
+@keyframes ds-ai-button-turn {
+  to {
+    --ds-ai-button-angle: 360deg;
+  }
+}
+
+/* Icon rides the icon-size scale */
+.ds-ai-button__icon {
+  --icon-size: var(--icon-size-md);
+  line-height: 1;
+}
+
+/* States */
+.ds-ai-button:hover::after {
+  opacity: 0.55;
+}
+
+.ds-ai-button:focus-visible {
+  outline: var(--border-md) solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+.ds-ai-button--disabled,
+.ds-ai-button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ds-ai-button--disabled::before,
+.ds-ai-button--disabled::after,
+.ds-ai-button:disabled::before,
+.ds-ai-button:disabled::after {
+  animation-play-state: paused;
+}
+
+/* Sizes */
+.ds-ai-button--compact {
+  padding: var(--padding-xs) var(--padding-sm-md);
+  font-size: var(--font-paragraph-sm-em-size);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+}
+
+.ds-ai-button--compact .ds-ai-button__icon {
+  --icon-size: var(--icon-size-sm);
+}
+
+/* Reduced motion: the ring and glow stay, the turning stops. */
+@media (prefers-reduced-motion: reduce) {
+  .ds-ai-button::before,
+  .ds-ai-button::after {
+    animation: none;
+  }
+}

package/components/AiButton/AiButton.d.ts

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+/** Props owned by AiButton itself — everything else falls through to the DOM node. */
+type AiButtonOwnProps = {
+    /** Button text content */
+    label?: string;
+    /** Leading icon — Material Symbol name (string) or custom element (ReactNode) */
+    icon?: string | React.ReactNode;
+    /** Button size */
+    size?: 'default' | 'compact';
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** Optional href — renders as <a> instead of <button> */
+    href?: string;
+    /** Optional target attribute for links */
+    target?: string;
+    /** Optional rel attribute for links */
+    rel?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface AiButtonProps extends AiButtonOwnProps, Omit<React.ComponentPropsWithoutRef<'button'>, keyof AiButtonOwnProps | 'type'> {
+}
+/**
+ * The AI entry point. Icon and label on a transparent field, ringed by the
+ * AI gradient (`--color-ai-gradient-*`) rotating slowly, with a soft glow of
+ * the same gradient behind it. The treatment is the design system's signal
+ * for "a model answers here": ordinary actions keep the flat action teal,
+ * and this ring is reserved for AI surfaces so neither affordance dilutes
+ * the other.
+ *
+ * Renders a `<button>`, or an `<a>` when `href` is supplied. Forwards a ref
+ * to whichever element it renders, and spreads unrecognised props onto it.
+ * The rotation pauses under `prefers-reduced-motion`; the ring and glow stay.
+ */
+export declare const AiButton: React.ForwardRefExoticComponent<AiButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+export {};

package/components/AiButton/AiButton.js

@@ -0,0 +1,58 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React from "react";
+import "./AiButton.css";
+import "../../fonts/material-symbols.css";
+const AiButton = React.forwardRef(
+  ({
+    label = "Ask AI",
+    icon = "auto_awesome",
+    size = "default",
+    disabled,
+    href,
+    target,
+    rel,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-ai-button";
+    const classes = [
+      baseClass,
+      `${baseClass}--${size}`,
+      disabled && `${baseClass}--disabled`,
+      className
+    ].filter(Boolean).join(" ");
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      icon && (typeof icon === "string" ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon material-symbols-rounded`, "aria-hidden": "true", children: icon }) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: icon })),
+      /* @__PURE__ */ jsx("span", { className: `${baseClass}__text`, children: label })
+    ] });
+    if (href && !disabled) {
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          ...rest,
+          ref,
+          className: classes,
+          href,
+          target,
+          rel,
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ...rest,
+        ref,
+        type: "button",
+        className: classes,
+        disabled,
+        children: content
+      }
+    );
+  }
+);
+AiButton.displayName = "AiButton";
+export {
+  AiButton
+};

package/components/ChatHeader/ChatHeader.css

@@ -0,0 +1,35 @@
+/* ============================================
+   CHAT HEADER COMPONENT
+   Top row of a chat surface: title on the
+   left, controls on the right. No divider —
+   it floats free of the transcript.
+   ============================================ */
+
+/* Base */
+.ds-chat-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-md);
+  padding: var(--padding-xs) var(--padding-md);
+}
+
+/* Title */
+.ds-chat-header__title {
+  font-family: var(--font-title-body-family);
+  font-size: var(--font-title-body-size);
+  font-weight: var(--font-title-body-weight);
+  line-height: var(--font-title-body-line-height);
+  color: var(--color-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Actions */
+.ds-chat-header__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xs);
+  flex-shrink: 0;
+}

package/components/ChatHeader/ChatHeader.d.ts

@@ -0,0 +1,30 @@
+import { default as React } from 'react';
+/** Props owned by ChatHeader itself — everything else falls through to the root element. */
+type ChatHeaderOwnProps = {
+    /**
+     * The chat or assistant name. Deliberately shadows the native `title`
+     * tooltip attribute — a header's title is content, not a tooltip. Pass a
+     * string for the default treatment, or your own heading element.
+     */
+    title?: React.ReactNode;
+    /**
+     * Trailing controls: a new-chat CircularButton, a view switcher, a close
+     * button. The slot only lays them out — each control owns its behaviour.
+     */
+    actions?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface ChatHeaderProps extends ChatHeaderOwnProps, Omit<React.ComponentPropsWithoutRef<'header'>, keyof ChatHeaderOwnProps> {
+}
+/**
+ * ChatHeader is the top row of a chat surface: the conversation's name on the
+ * left, its controls on the right. It draws no bottom border — like the
+ * composer below, it floats free of the transcript, and the thread's own
+ * padding provides the separation.
+ *
+ * Purely presentational, so it renders from a Server Component; the controls
+ * passed into `actions` bring their own interactivity.
+ */
+export declare const ChatHeader: React.ForwardRefExoticComponent<ChatHeaderProps & React.RefAttributes<HTMLElement>>;
+export {};

package/components/ChatHeader/ChatHeader.js

@@ -0,0 +1,17 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import "./ChatHeader.css";
+const ChatHeader = React.forwardRef(
+  ({ title, actions, className = "", ...rest }, ref) => {
+    const baseClass = "ds-chat-header";
+    const classes = [baseClass, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("header", { ...rest, ref, className: classes, children: [
+      typeof title === "string" ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__title`, children: title }) : title,
+      actions && /* @__PURE__ */ jsx("div", { className: `${baseClass}__actions`, children: actions })
+    ] });
+  }
+);
+ChatHeader.displayName = "ChatHeader";
+export {
+  ChatHeader
+};

package/components/ChatMarker/ChatMarker.css

@@ -0,0 +1,52 @@
+/* ============================================
+   CHAT MARKER COMPONENT
+   Inline conversation separator for dates and system notes
+   ============================================ */
+
+.ds-chat-marker {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm-md);
+  width: 100%;
+}
+
+/* Flanking lines — kept as flex spacers when bare, so the label
+   stays centred either way */
+.ds-chat-marker::before,
+.ds-chat-marker::after {
+  content: '';
+  flex: 1;
+  height: var(--border-xs);
+  background-color: var(--color-divider);
+}
+
+.ds-chat-marker--bare::before,
+.ds-chat-marker--bare::after {
+  background-color: transparent;
+}
+
+/* ============================================
+   LABEL
+   ============================================ */
+
+.ds-chat-marker__label {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-xs);
+  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);
+  color: var(--color-text-tertiary);
+}
+
+.ds-chat-marker__icon {
+  display: inline-flex;
+  align-items: center;
+}
+
+.ds-chat-marker__icon .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+}