rift-ds 1.0.0

package/components/SourceTrail/SourceTrail.css

@@ -0,0 +1,209 @@
+/* ============================================
+   SOURCE TRAIL COMPONENT
+   The research trail under an agent's answer:
+   a count header with a disclosure over the
+   sources it opened, in order.
+
+   Shares the chat furniture's 24px shell with
+   ToolCall — a collapsed trail reads as one
+   more row in the run, not a different species.
+   ============================================ */
+
+.ds-source-trail {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background-color: var(--color-bg-container-primary);
+  border: var(--border-025) solid var(--color-bg-container-border);
+  border-radius: var(--radius-600);
+  overflow: hidden;
+}
+
+/* ============================================
+   HEADER
+   ============================================ */
+
+.ds-source-trail__header {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-200);
+  width: 100%;
+  padding: var(--padding-200) var(--padding-500);
+  background: none;
+  border: none;
+  /* Buttons default to the UA's buttontext, not the inherited colour, so
+     anything in the header that inherits would read black in both themes. */
+  color: var(--color-text-primary);
+  text-align: left;
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-source-trail__header:hover {
+  background-color: var(--color-bg-container-secondary);
+}
+
+.ds-source-trail__header:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+}
+
+.ds-source-trail__indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  color: var(--color-text-secondary);
+}
+
+.ds-source-trail__indicator .material-symbols-rounded {
+  --icon-size: var(--icon-size-500);
+}
+
+.ds-source-trail__heading {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-text-primary);
+  font-family: var(--font-paragraph-sm-emphasis-family);
+  font-size: var(--font-paragraph-sm-emphasis-size);
+  font-weight: var(--font-paragraph-sm-emphasis-weight);
+  line-height: var(--font-paragraph-sm-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-sm-emphasis-letter-spacing);
+}
+
+.ds-source-trail__chevron {
+  --icon-size: var(--icon-size-500);
+
+  flex: none;
+  color: var(--color-icon-secondary);
+  transition: transform var(--motion-duration-slow) var(--motion-ease-standard);
+}
+
+.ds-source-trail--open .ds-source-trail__chevron {
+  transform: rotate(180deg);
+}
+
+/* ============================================
+   PANEL
+   ============================================ */
+
+.ds-source-trail__panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  visibility: hidden;
+  transition:
+    grid-template-rows var(--motion-duration-slow) var(--motion-ease-standard),
+    visibility var(--motion-duration-slow) var(--motion-ease-standard);
+}
+
+.ds-source-trail--open .ds-source-trail__panel {
+  grid-template-rows: 1fr;
+  visibility: visible;
+}
+
+.ds-source-trail__list {
+  overflow: hidden;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+}
+
+.ds-source-trail--open .ds-source-trail__list {
+  padding: var(--padding-200) var(--padding-500) var(--padding-400);
+  border-top: var(--border-025) solid var(--color-divider);
+  gap: var(--gap-200);
+}
+
+/* ============================================
+   ROWS
+   ============================================ */
+
+.ds-source-trail__row {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-200);
+  min-width: 0;
+}
+
+/* Streaming: an appended row eases in. Pure CSS, so the global
+   reduced-motion guard collapses the duration tokens. */
+.ds-source-trail--streaming .ds-source-trail__row {
+  animation: ds-source-trail-enter var(--motion-duration-slow) var(--motion-ease-standard);
+}
+
+@keyframes ds-source-trail-enter {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+}
+
+.ds-source-trail__row-indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  color: var(--color-text-secondary);
+}
+
+.ds-source-trail__row-indicator .material-symbols-rounded {
+  --icon-size: var(--icon-size-500);
+}
+
+.ds-source-trail__row--pending .ds-source-trail__row-indicator {
+  color: var(--color-text-tertiary);
+}
+
+.ds-source-trail__row--active .ds-source-trail__row-indicator {
+  color: var(--color-status-info-icon);
+}
+
+.ds-source-trail__row--done .ds-source-trail__row-indicator {
+  color: var(--color-status-positive-icon);
+}
+
+/* A pending source has not been opened yet, so its chip sits quieter */
+.ds-source-trail__row--pending {
+  opacity: 0.6;
+}
+
+.ds-source-trail__detail {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-text-tertiary);
+  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);
+}
+
+/* Screen-reader-only status text, matching AgentPlan's row announcement */
+.ds-source-trail__sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Icons follow the state colour set on their parents, even against a
+   consumer stylesheet that colours .material-symbols-rounded globally.
+   The chevron is excluded — it carries its own colour rule, which this
+   higher-specificity rule would otherwise silently override. */
+.ds-source-trail .material-symbols-rounded:not(.ds-source-trail__chevron) {
+  color: inherit;
+}

package/components/SourceTrail/SourceTrail.d.ts

@@ -0,0 +1,49 @@
+import { default as React } from 'react';
+export type SourceTrailStatus = 'pending' | 'active' | 'done';
+/** One source the agent opened while answering. */
+export interface SourceTrailItem {
+    /** The source name, passed through to the row's SourceChip. */
+    title: string;
+    /** Optional link to the source — the chip renders as an anchor. */
+    href?: string;
+    /** Leading icon for the chip — a Material Symbol name (string) or custom element (ReactNode). */
+    icon?: string | React.ReactNode;
+    /** Where the visit has got to. Drives the row's indicator; defaults to done. */
+    status?: SourceTrailStatus;
+    /** Supporting line, e.g. what the source contributed to the answer. */
+    detail?: string;
+}
+/** Props owned by SourceTrail itself — everything else falls through to the root element. */
+type SourceTrailOwnProps = {
+    /** The sources, in the order the agent opened them. */
+    items: SourceTrailItem[];
+    /**
+     * Header text. Left unset, it is computed from the items —
+     * "Reading 3 sources" while any is still pending or active,
+     * "Read 3 sources" once every visit has settled.
+     */
+    title?: string;
+    /** Still researching: newly appended rows animate in. */
+    streaming?: boolean;
+    /** Open state for controlled use. Pair with `onOpenChange`. */
+    open?: boolean;
+    /** Open state for uncontrolled use. */
+    defaultOpen?: boolean;
+    /** Fires whenever the panel opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface SourceTrailProps extends SourceTrailOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof SourceTrailOwnProps> {
+}
+/**
+ * SourceTrail is the research trail under an agent's answer: the sources it
+ * opened, in order, each with a status and an optional note on what it
+ * contributed. SourceChip is the atom; this is the list — a count header
+ * with a disclosure, so a long trail collapses to one line.
+ *
+ * While `streaming`, appended rows animate in (pure CSS, so the global
+ * reduced-motion guard covers it) and the active row carries a spinner.
+ */
+export declare const SourceTrail: React.ForwardRefExoticComponent<SourceTrailProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/SourceTrail/SourceTrail.js

@@ -0,0 +1,108 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useId, useState, useCallback } from "react";
+import { SourceChip } from "../SourceChip/SourceChip.js";
+import { Spinner } from "../Spinner/Spinner.js";
+import "./SourceTrail.css";
+import "../../fonts/material-symbols.css";
+const STATUS_ICONS = {
+  pending: "circle",
+  done: "check_circle"
+};
+const STATUS_TEXT = {
+  pending: "Not opened yet",
+  active: "Reading now",
+  done: "Read"
+};
+const SourceTrail = React.forwardRef(
+  ({
+    items,
+    title,
+    streaming = false,
+    open,
+    defaultOpen = true,
+    onOpenChange,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-source-trail";
+    const id = useId();
+    const panelId = `${id}-panel`;
+    const triggerId = `${id}-trigger`;
+    const isControlled = open !== void 0;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const isOpen = isControlled ? open : uncontrolledOpen;
+    const toggle = useCallback(() => {
+      const next = !isOpen;
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    }, [isOpen, isControlled, onOpenChange]);
+    const unsettled = items.some(
+      (item) => item.status === "pending" || item.status === "active"
+    );
+    const count = items.length;
+    const heading = title ?? (unsettled || streaming ? `Reading ${count} source${count === 1 ? "" : "s"}` : `Read ${count} source${count === 1 ? "" : "s"}`);
+    const classes = [
+      baseClass,
+      isOpen ? `${baseClass}--open` : "",
+      streaming ? `${baseClass}--streaming` : "",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          id: triggerId,
+          className: `${baseClass}__header`,
+          "aria-expanded": isOpen,
+          "aria-controls": panelId,
+          onClick: toggle,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__indicator`, "aria-hidden": "true", children: unsettled || streaming ? /* @__PURE__ */ jsx(Spinner, { size: "sm", variant: "inherit" }) : /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: "travel_explore" }) }),
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__heading`, children: heading }),
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__chevron material-symbols-rounded`, "aria-hidden": "true", children: "expand_more" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${baseClass}__panel`,
+          id: panelId,
+          role: "region",
+          "aria-labelledby": triggerId,
+          children: /* @__PURE__ */ jsx("ol", { className: `${baseClass}__list`, children: items.map((item, index) => {
+            const status = item.status ?? "done";
+            return /* @__PURE__ */ jsxs(
+              "li",
+              {
+                className: `${baseClass}__row ${baseClass}__row--${status}`,
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: `${baseClass}__row-indicator`, "aria-hidden": "true", children: status === "active" ? /* @__PURE__ */ jsx(Spinner, { size: "sm", variant: "inherit" }) : /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: STATUS_ICONS[status] }) }),
+                  /* @__PURE__ */ jsx(
+                    SourceChip,
+                    {
+                      title: item.title,
+                      href: item.href,
+                      icon: item.icon,
+                      target: item.href ? "_blank" : void 0,
+                      rel: item.href ? "noopener noreferrer" : void 0
+                    }
+                  ),
+                  item.detail && /* @__PURE__ */ jsx("span", { className: `${baseClass}__detail`, children: item.detail }),
+                  /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr`, children: STATUS_TEXT[status] })
+                ]
+              },
+              `${item.title}-${index}`
+            );
+          }) })
+        }
+      )
+    ] });
+  }
+);
+SourceTrail.displayName = "SourceTrail";
+export {
+  SourceTrail
+};

package/components/SpacingSwatch/SpacingSwatch.css

@@ -0,0 +1,108 @@
+/* ============================================
+   SPACING SWATCH COMPONENT
+   Card that displays a spatial token with a
+   visual preview, size label, and pixel value.
+   ============================================ */
+
+.ds-spacing-swatch {
+  /* Layout */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--gap-500); /* 20px */
+
+  /* Sizing */
+  flex: 1 1 0;
+  min-width: 140px;
+
+  /* Appearance */
+  background: var(--color-bg-container-primary-semi);
+  border: var(--border-025) solid var(--color-bg-container-border);
+  border-radius: var(--radius-600); /* 24px */
+  padding: var(--padding-500); /* 20px */
+}
+
+/* ============================================
+   PREVIEW AREA
+   Centred container for the visual element
+   ============================================ */
+
+.ds-spacing-swatch__preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 60px;
+}
+
+/* ============================================
+   BORDER VARIANT
+   Vertical coloured bar showing border width
+   ============================================ */
+
+.ds-spacing-swatch__border-bar {
+  height: 50px;
+  background: var(--color-core-accent-violet);
+}
+
+/* ============================================
+   RADIUS VARIANT
+   Square with visible border-radius
+   ============================================ */
+
+.ds-spacing-swatch__radius-box {
+  width: 50px;
+  height: 50px;
+  background: transparent;
+  border: 1px solid var(--color-status-positive-border);
+}
+
+/* ============================================
+   GAP VARIANT
+   Two vertical lines separated by the gap width
+   ============================================ */
+
+.ds-spacing-swatch__gap-bar {
+  height: 50px;
+  border-left: 1px solid var(--color-core-accent-coral);
+  border-right: 1px solid var(--color-core-accent-coral);
+}
+
+/* ============================================
+   PADDING VARIANT
+   Outer box with inner box showing the padding
+   ============================================ */
+
+.ds-spacing-swatch__padding-outer {
+  border: 1px solid var(--color-core-ui-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ds-spacing-swatch__padding-inner {
+  width: 10px;
+  height: 10px;
+  border: 1px solid var(--color-status-neutral-border);
+  border-radius: 1px;
+}
+
+/* ============================================
+   LABEL & VALUE
+   ============================================ */
+
+.ds-spacing-swatch__label {
+  font-family: var(--font-paragraph-family);
+  font-size: var(--font-paragraph-size);
+  font-weight: var(--font-heading-3-weight);
+  line-height: var(--font-paragraph-line-height);
+  color: var(--color-text-primary);
+  text-align: center;
+}
+
+.ds-spacing-swatch__value {
+  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);
+  color: var(--color-text-tertiary);
+}

package/components/SpacingSwatch/SpacingSwatch.d.ts

@@ -0,0 +1,20 @@
+export type SpacingSwatchVariant = 'border' | 'radius' | 'gap' | 'padding';
+export interface SpacingSwatchProps {
+    /** Size label (e.g. "XS", "MD", "Full") */
+    label: string;
+    /** Pixel value to display (e.g. "1px", "24px", "999px") */
+    value: string;
+    /** Numeric pixel amount used to size the preview element */
+    px: number;
+    /** Which type of spatial preview to render */
+    variant: SpacingSwatchVariant;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * SpacingSwatch component from Figma design system.
+ * Displays a spatial token card with a visual preview,
+ * size label, and pixel value. Four variants cover
+ * border width, radius, gap, and padding tokens.
+ */
+export declare const SpacingSwatch: ({ label, value, px, variant, className, }: SpacingSwatchProps) => import("react").JSX.Element;

package/components/SpacingSwatch/SpacingSwatch.js

@@ -0,0 +1,50 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "./SpacingSwatch.css";
+const SpacingSwatch = ({
+  label,
+  value,
+  px,
+  variant,
+  className = ""
+}) => {
+  const baseClass = "ds-spacing-swatch";
+  const classes = [baseClass, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+    /* @__PURE__ */ jsxs("div", { className: `${baseClass}__preview`, children: [
+      variant === "border" && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${baseClass}__border-bar`,
+          style: { width: `${px}px` }
+        }
+      ),
+      variant === "radius" && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${baseClass}__radius-box`,
+          style: { borderRadius: px >= 999 ? "50%" : `${px}px` }
+        }
+      ),
+      variant === "gap" && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${baseClass}__gap-bar`,
+          style: { width: `${px}px` }
+        }
+      ),
+      variant === "padding" && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${baseClass}__padding-outer`,
+          style: { padding: `${px}px` },
+          children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__padding-inner` })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label }),
+    /* @__PURE__ */ jsx("span", { className: `${baseClass}__value`, children: value })
+  ] });
+};
+export {
+  SpacingSwatch
+};

package/components/Sparkline/Sparkline.css

@@ -0,0 +1,76 @@
+/* ============================================
+   SPARKLINE COMPONENT
+   Inline trend line for stats and table cells.
+   Colour flows through `color` — the line, fill
+   and dot all draw with currentColor, so a tone
+   is one custom property swap.
+   ============================================ */
+
+/* Base */
+
+.ds-sparkline {
+  display: inline-block;
+  vertical-align: middle;
+  flex-shrink: 0;
+  color: var(--color-action-primary-bg);
+}
+
+/* Parts */
+
+/* The line draws itself on mount, the way the recharts lines do: the path is
+   normalised to 100 dash units (pathLength on the SVG side), and the offset
+   retreats from fully hidden to zero. The fill and end dot fade in behind
+   and after it. All durations are tokens, so reduced motion collapses the
+   whole sequence to the finished state for free. */
+
+.ds-sparkline__line {
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-dasharray: 100;
+  animation: ds-sparkline-draw var(--motion-duration-slower) var(--motion-ease-emphasized);
+}
+
+.ds-sparkline__fill {
+  fill: currentColor;
+  opacity: 0.15;
+  animation: ds-sparkline-fade var(--motion-duration-slower) var(--motion-ease-standard);
+}
+
+.ds-sparkline__dot {
+  fill: currentColor;
+  /* Waits out the draw, then pops in where the line ends. */
+  animation: ds-sparkline-fade var(--motion-duration-slow) var(--motion-ease-standard)
+    var(--motion-duration-slower) backwards;
+}
+
+@keyframes ds-sparkline-draw {
+  from {
+    stroke-dashoffset: 100;
+  }
+}
+
+@keyframes ds-sparkline-fade {
+  from {
+    opacity: 0;
+  }
+}
+
+/* Tones */
+
+.ds-sparkline--accent {
+  color: var(--color-action-primary-bg);
+}
+
+.ds-sparkline--positive {
+  color: var(--color-trend-up);
+}
+
+.ds-sparkline--negative {
+  color: var(--color-trend-down);
+}
+
+.ds-sparkline--neutral {
+  color: var(--color-text-secondary);
+}

package/components/Sparkline/Sparkline.d.ts

@@ -0,0 +1,51 @@
+import { default as React } from 'react';
+/** Props owned by Sparkline itself — everything else falls through to the SVG node. */
+type SparklineOwnProps = {
+    /** The series to plot, in order. Values are normalised into the viewBox. */
+    data: number[];
+    /** Rendering treatment — a bare line, or a line with a soft fill underneath. */
+    variant?: 'line' | 'area';
+    /**
+     * Colour role for the line and end dot. `accent` follows the chart palette's
+     * lead colour; `positive`/`negative` map to the status text tokens; `neutral`
+     * recedes to secondary text.
+     */
+    tone?: 'accent' | 'positive' | 'negative' | 'neutral';
+    /** Marks the final point with a small dot. */
+    showDot?: boolean;
+    /** Line thickness in viewBox units — an SVG geometry attribute, not a token. */
+    strokeWidth?: number;
+    /**
+     * ViewBox width. Also the default rendered width; the SVG scales to its
+     * container when sized externally via CSS. Intentionally shadows the native
+     * SVG `width` attribute, which it sets.
+     */
+    width?: number;
+    /**
+     * ViewBox height. Also the default rendered height; the SVG scales to its
+     * container when sized externally via CSS. Intentionally shadows the native
+     * SVG `height` attribute, which it sets.
+     */
+    height?: number;
+    /**
+     * Accessible description of the trend, e.g. "Revenue, trending up". When
+     * omitted the SVG is decorative and hidden from assistive technology.
+     */
+    label?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface SparklineProps extends SparklineOwnProps, Omit<React.ComponentPropsWithoutRef<'svg'>, keyof SparklineOwnProps | 'children'> {
+}
+/**
+ * Sparkline — an inline trend line for stats and table cells, drawn without
+ * axes or chrome. Pure SVG computed from props: no charting library, no hooks,
+ * no dependencies, so it renders from a Server Component and costs nothing in
+ * a dense table. The line bends through a monotone curve, the same family as
+ * the recharts charts' `monotone`, so it reads as a miniature LineChart
+ * rather than a jagged polyline. Degenerate data never breaks the path: an
+ * all-equal series renders a horizontal midline, and fewer than two points
+ * render just the end dot, or nothing.
+ */
+export declare const Sparkline: React.ForwardRefExoticComponent<SparklineProps & React.RefAttributes<SVGSVGElement>>;
+export {};