rift-ds 1.0.0

package/components/PromptSuggestions/PromptSuggestions.css

@@ -0,0 +1,264 @@
+/* ============================================
+   PROMPT SUGGESTIONS COMPONENT
+   Horizontal row of tappable prompt chips.
+   Scrolls with pure-CSS edge fades by default;
+   wraps for empty-state hero placements.
+   ============================================ */
+
+.ds-prompt-suggestions {
+  display: flex;
+  gap: var(--gap-200);
+  /* Breathing room so chip focus rings aren't clipped by the scroll box */
+  padding-block: var(--padding-050);
+}
+
+/* ============================================
+   SIZE
+   The pill scale itself is Chip's — the row only
+   picks which size to ask for. What belongs here
+   is the gutter between pills, which opens up a
+   step at the larger size.
+   ============================================ */
+
+.ds-prompt-suggestions--default {
+  gap: var(--gap-300);
+}
+
+.ds-prompt-suggestions--compact {
+  /* Base gap applies. */
+}
+
+/* ============================================
+   SCROLL — one line, overflow hinted by fades
+   ============================================ */
+
+/* Edge fades — scroll layout only, which is why the layout is named on the
+   element rather than inferred: content near either edge fades out, hinting
+   there is more to scroll. A CSS mask, not a scroll listener.
+   ds-allow(color): mask alpha keywords (black/transparent), not palette colours */
+.ds-prompt-suggestions--scroll {
+  overflow-x: auto;
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent,
+    black var(--gap-500),
+    black calc(100% - var(--gap-500)),
+    transparent
+  );
+  mask-image: linear-gradient(
+    to right,
+    transparent,
+    black var(--gap-500),
+    black calc(100% - var(--gap-500)),
+    transparent
+  );
+}
+
+/* ============================================
+   WRAP — multi-line hero variant, no fades
+   ============================================ */
+
+.ds-prompt-suggestions--wrap {
+  flex-wrap: wrap;
+}
+
+/* ============================================
+   STACK — one suggestion per line
+   For narrow columns, where a wrapped row breaks
+   wherever the labels happen to run out of room
+   and the ragged right edge reads as an accident.
+   Pills still hug their labels: stretching them
+   to a shared width would make a set of prompts
+   look like a set of buttons.
+   ============================================ */
+
+.ds-prompt-suggestions--stack {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+/* ============================================
+   ITEMS
+   ============================================ */
+
+.ds-prompt-suggestions__item {
+  display: flex;
+  flex-shrink: 0;
+  /* Pills pop in one after another — a small rise-and-settle with the
+     spring's overshoot, quiet enough to read as arrival rather than
+     performance. `backwards` keeps a delayed pill invisible until its
+     turn. The pending placeholders and the chips that replace them are
+     both items, so each set lands one-two-three. */
+  animation: ds-prompt-suggestions-pop var(--motion-duration-slow) var(--motion-ease-spring)
+    backwards;
+}
+
+/* A set that has already landed stands still: the host turns the entrance
+   off (`entrance={false}`) when it re-shows suggestions the visitor has
+   already watched arrive, so a reopened panel does not replay them. */
+.ds-prompt-suggestions--still .ds-prompt-suggestions__item {
+  animation: none;
+}
+
+/* The stagger: one instant per pill, capped at the fifth so a long
+   scrolling row does not keep the far end waiting. */
+.ds-prompt-suggestions__item:nth-child(2) {
+  animation-delay: var(--motion-duration-instant);
+}
+
+.ds-prompt-suggestions__item:nth-child(3) {
+  animation-delay: calc(var(--motion-duration-instant) * 2);
+}
+
+.ds-prompt-suggestions__item:nth-child(4) {
+  animation-delay: calc(var(--motion-duration-instant) * 3);
+}
+
+.ds-prompt-suggestions__item:nth-child(n + 5) {
+  animation-delay: calc(var(--motion-duration-instant) * 4);
+}
+
+@keyframes ds-prompt-suggestions-pop {
+  from {
+    opacity: 0;
+    transform: translateY(6px) scale(0.97);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+/* ============================================
+   CHOSEN — the tap acknowledgment
+   The picked chip presses in and springs back
+   (the spring's overshoot is the tiny bounce)
+   while its siblings dim, so the choice pops
+   for the beat before the host acts on it.
+   ============================================ */
+
+.ds-prompt-suggestions__item {
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-prompt-suggestions--choosing
+  .ds-prompt-suggestions__item:not(.ds-prompt-suggestions__item--chosen) {
+  /* The system's dimmed convention, shared with disabled states. */
+  opacity: 0.4;
+}
+
+.ds-prompt-suggestions__item--chosen .ds-chip {
+  animation: ds-prompt-suggestions-choose var(--motion-duration-slow) var(--motion-ease-spring);
+}
+
+@keyframes ds-prompt-suggestions-choose {
+  0% {
+    transform: scale(1);
+  }
+
+  35% {
+    transform: scale(0.94);
+  }
+
+  /* The spring overshoots past 1 on the way back, then settles. */
+  100% {
+    transform: scale(1);
+  }
+}
+
+/* ============================================
+   PENDING — placeholder pills
+   Each placeholder is the chip's real shell —
+   its surface, border, padding and height for
+   the row's size — holding a text-height shimmer
+   bar where the label is "generating" (Skeleton's
+   sweep on ThreadPanel's 0.75em bar geometry).
+   The shell is what keeps the row's height and
+   rhythm exactly what the loaded chips will be.
+   ============================================ */
+
+.ds-prompt-suggestions__skeleton {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  border-radius: var(--radius-pill);
+  /* Chip's own surface, so only the label reads as loading. */
+  background-color: var(--color-bg-page-primary);
+  border: var(--border-025) solid var(--color-bg-container-border);
+
+  /* Chip's default (32px) geometry — the row's compact size. The height is
+     the chip's line box plus its padding and border, stated rather than
+     grown from text, since the shell holds a bar instead of a label. */
+  padding: var(--padding-150) var(--padding-300);
+  height: calc(
+    var(--font-paragraph-sm-emphasis-line-height) + 2 * var(--padding-150) + 2 * var(--border-025)
+  );
+  font-size: var(--font-paragraph-sm-emphasis-size);
+
+  /* Widths are em-cycled below so the set reads as questions of different
+     lengths rather than three identical pills — a drawing choice scaled by
+     the font, like ThreadPanel's 0.75em shimmer bar, not a spacing token. */
+  width: 13em;
+  max-width: 100%;
+}
+
+/* Chip's large geometry — the row's default size. */
+.ds-prompt-suggestions--default .ds-prompt-suggestions__skeleton {
+  padding: var(--padding-200) var(--padding-500);
+  height: calc(
+    var(--font-paragraph-emphasis-line-height) + 2 * var(--padding-200) + 2 * var(--border-025)
+  );
+  font-size: var(--font-paragraph-emphasis-size);
+}
+
+.ds-prompt-suggestions__item:nth-child(3n + 2) .ds-prompt-suggestions__skeleton {
+  width: 16em;
+}
+
+.ds-prompt-suggestions__item:nth-child(3n) .ds-prompt-suggestions__skeleton {
+  width: 11em;
+}
+
+/* The generating "label": a text-height bar filling the shell's content
+   box, swept by the shimmer. */
+.ds-prompt-suggestions__skeleton-bar {
+  display: block;
+  width: 100%;
+  height: 0.75em;
+  border-radius: var(--radius-pill);
+  background-color: var(--color-bg-container-secondary);
+  position: relative;
+  overflow: hidden;
+  /* The trailing end dissolves, as ThreadPanel's naming bar does under its
+     title mask — a label mid-write, not a finished block.
+     ds-allow(color): mask alpha keywords (black/transparent), not palette colours */
+  -webkit-mask-image: linear-gradient(to right, black calc(100% - var(--gap-1000)), transparent);
+  mask-image: linear-gradient(to right, black calc(100% - var(--gap-1000)), transparent);
+}
+
+.ds-prompt-suggestions__skeleton-bar::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    var(--color-bg-container-primary) 50%,
+    transparent 100%
+  );
+  /* ds-allow(motion): Skeleton's shimmer — the sweep needs a symmetric
+     in-out curve no --motion-ease-* token provides; the duration is
+     tokenized. */
+  animation: ds-prompt-suggestions-shimmer var(--motion-duration-loop-shimmer)
+    ease-in-out infinite;
+}
+
+@keyframes ds-prompt-suggestions-shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}

package/components/PromptSuggestions/PromptSuggestions.d.ts

@@ -0,0 +1,68 @@
+import { default as React } from 'react';
+/** One tappable suggestion in the row. */
+export interface PromptSuggestion {
+    /** Stable identifier passed to `onValueChange`. */
+    id: string;
+    /** The suggestion text shown in the chip. */
+    label: string;
+    /** Optional leading icon — Material Symbol name (string) or custom element (ReactNode). */
+    icon?: string | React.ReactNode;
+}
+/** Props owned by PromptSuggestions itself — everything else falls through to the root element. */
+type PromptSuggestionsOwnProps = {
+    /** The suggestions to render, in order. */
+    suggestions: PromptSuggestion[];
+    /** Fires with the tapped suggestion's `id`, one acknowledgment beat after the tap — the chosen chip pulses and its siblings dim first, so the choice is seen even when selection unmounts the row. */
+    onValueChange?: (id: string) => void;
+    /**
+     * How the suggestions are arranged. `scroll` is one line that scrolls
+     * sideways behind edge fades. `wrap` runs them across as many lines as
+     * they need, for empty-state hero placements. `stack` gives each one its
+     * own line, for narrow columns where a wrapped row breaks unevenly and
+     * the ragged right edge reads as an accident.
+     */
+    layout?: 'scroll' | 'wrap' | 'stack';
+    /**
+     * Legacy alias for `layout="wrap"`; ignored when `layout` is set.
+     * @deprecated Use `layout` instead, which also covers `stack`.
+     */
+    wrap?: boolean;
+    /**
+     * The suggestions are still being generated: shimmer placeholder pills
+     * hold their place, matching the current size's chip geometry so nothing
+     * shifts when the real chips land. While pending the given `suggestions`
+     * are not rendered, the placeholders are hidden from assistive technology,
+     * and the row reports `aria-busy` instead.
+     */
+    pending?: boolean;
+    /** How many placeholder pills the pending state holds space with. */
+    pendingCount?: number;
+    /**
+     * Play the staggered pop-in when the items mount. On by default; a host
+     * re-showing a set that has already landed (reopening a panel over the
+     * same suggestions) turns it off, so the chips stand where they were
+     * instead of arriving twice.
+     */
+    entrance?: boolean;
+    /**
+     * Row scale. `default` sits at the body-paragraph scale, so a suggestion
+     * reads at the same weight as the messages it will become; `compact` is
+     * the quieter row for placements alongside a live conversation.
+     */
+    size?: 'default' | 'compact';
+    /** Accessible name for the list. */
+    ariaLabel?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface PromptSuggestionsProps extends PromptSuggestionsOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof PromptSuggestionsOwnProps> {
+}
+/**
+ * PromptSuggestions is a horizontal row of tappable prompts for starting or
+ * steering a conversation. Each suggestion renders as a clickable Chip, so
+ * one component owns the pill look; the row scrolls horizontally with pure
+ * CSS edge fades — no scroll listeners, no measurement — or wraps for
+ * empty-state hero placements.
+ */
+export declare const PromptSuggestions: React.ForwardRefExoticComponent<PromptSuggestionsProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/PromptSuggestions/PromptSuggestions.js

@@ -0,0 +1,87 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { Chip } from "../Chip/Chip.js";
+import { MOTION_EXIT_SYNC_MS } from "../../tokens/motion.js";
+import "./PromptSuggestions.css";
+const PromptSuggestions = React.forwardRef(
+  ({
+    suggestions,
+    onValueChange,
+    layout,
+    wrap = false,
+    pending = false,
+    pendingCount = 3,
+    entrance = true,
+    size = "default",
+    ariaLabel = "Suggested prompts",
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-prompt-suggestions";
+    const [chosenId, setChosenId] = React.useState(null);
+    const chooseTimer = React.useRef(null);
+    React.useEffect(
+      () => () => {
+        if (chooseTimer.current) window.clearTimeout(chooseTimer.current);
+      },
+      []
+    );
+    const choose = (id) => {
+      if (chosenId || chooseTimer.current) return;
+      setChosenId(id);
+      chooseTimer.current = window.setTimeout(() => {
+        chooseTimer.current = null;
+        onValueChange?.(id);
+      }, MOTION_EXIT_SYNC_MS);
+    };
+    const arrangement = layout ?? (wrap ? "wrap" : "scroll");
+    const chipSize = size === "compact" ? "default" : "large";
+    const classes = [
+      baseClass,
+      `${baseClass}--${size}`,
+      `${baseClass}--${arrangement}`,
+      chosenId ? `${baseClass}--choosing` : "",
+      entrance ? "" : `${baseClass}--still`,
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...rest,
+        ref,
+        className: classes,
+        role: "list",
+        "aria-label": ariaLabel,
+        "aria-busy": pending || void 0,
+        "data-pending": pending || void 0,
+        children: pending ? Array.from({ length: pendingCount }, (_, index) => /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: `${baseClass}__item`, children: /* @__PURE__ */ jsx("span", { className: `${baseClass}__skeleton`, children: /* @__PURE__ */ jsx("span", { className: `${baseClass}__skeleton-bar` }) }) }, index)) : suggestions.map((suggestion) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "listitem",
+            className: `${baseClass}__item${chosenId === suggestion.id ? ` ${baseClass}__item--chosen` : ""}`,
+            onAnimationEnd: (event) => {
+              if (event.animationName === "ds-prompt-suggestions-choose") {
+                setChosenId(null);
+              }
+            },
+            children: /* @__PURE__ */ jsx(
+              Chip,
+              {
+                label: suggestion.label,
+                icon: suggestion.icon,
+                size: chipSize,
+                onClick: () => choose(suggestion.id)
+              }
+            )
+          },
+          suggestion.id
+        ))
+      }
+    );
+  }
+);
+PromptSuggestions.displayName = "PromptSuggestions";
+export {
+  PromptSuggestions
+};

package/components/Prose/Prose.css

@@ -0,0 +1,269 @@
+/* ============================================
+   PROSE COMPONENT
+   Token-styled typography for rendered markdown
+   ============================================ */
+
+.ds-prose {
+  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);
+  color: var(--color-text-primary);
+}
+
+/* Block rhythm — every block owns its bottom margin; the edges are
+   trimmed so Prose slots into bubbles and cards cleanly */
+.ds-prose p,
+.ds-prose ul,
+.ds-prose ol,
+.ds-prose pre,
+.ds-prose blockquote,
+.ds-prose table,
+.ds-prose hr,
+.ds-prose img {
+  margin: 0;
+  margin-block-end: var(--gap-400);
+}
+
+.ds-prose > :first-child {
+  margin-block-start: 0;
+}
+
+.ds-prose > :last-child {
+  margin-block-end: 0;
+}
+
+/* ============================================
+   PARAGRAPHS
+   ============================================ */
+
+.ds-prose p {
+  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);
+  color: var(--color-text-primary);
+}
+
+/* ============================================
+   HEADINGS
+   Hierarchy carried by the token scale; the
+   weight contrast is encoded in the tokens
+   ============================================ */
+
+.ds-prose h1,
+.ds-prose h2,
+.ds-prose h3,
+.ds-prose h4 {
+  margin: 0;
+  margin-block-start: var(--gap-500);
+  margin-block-end: var(--gap-300);
+  color: var(--color-text-primary);
+}
+
+.ds-prose h1 {
+  font-family: var(--font-heading-1-family);
+  font-size: var(--font-heading-1-size);
+  font-weight: var(--font-heading-1-weight);
+  line-height: var(--font-heading-1-line-height);
+  letter-spacing: var(--font-heading-1-letter-spacing);
+}
+
+.ds-prose h2 {
+  font-family: var(--font-heading-2-family);
+  font-size: var(--font-heading-2-size);
+  font-weight: var(--font-heading-2-weight);
+  line-height: var(--font-heading-2-line-height);
+  letter-spacing: var(--font-heading-2-letter-spacing);
+}
+
+.ds-prose h3 {
+  font-family: var(--font-heading-3-family);
+  font-size: var(--font-heading-3-size);
+  font-weight: var(--font-heading-3-weight);
+  line-height: var(--font-heading-3-line-height);
+  letter-spacing: var(--font-heading-3-letter-spacing);
+}
+
+.ds-prose h4 {
+  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);
+  letter-spacing: var(--font-title-body-letter-spacing);
+}
+
+/* ============================================
+   LISTS
+   ============================================ */
+
+.ds-prose ul,
+.ds-prose ol {
+  padding-inline-start: var(--padding-400);
+}
+
+.ds-prose li {
+  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);
+  color: var(--color-text-primary);
+}
+
+.ds-prose li + li {
+  margin-block-start: var(--gap-100);
+}
+
+/* Nested lists sit tight under their parent item */
+.ds-prose li > ul,
+.ds-prose li > ol {
+  margin-block-start: var(--gap-100);
+  margin-block-end: 0;
+}
+
+/* ============================================
+   INLINE ELEMENTS
+   ============================================ */
+
+.ds-prose a {
+  color: var(--color-action-primary-text-tertiary);
+  text-decoration: underline;
+}
+
+.ds-prose strong {
+  font-weight: var(--font-paragraph-emphasis-weight);
+}
+
+.ds-prose em {
+  font-style: italic;
+}
+
+.ds-prose code {
+  font-family: var(--font-family-code);
+  font-size: var(--font-paragraph-sm-size);
+  background-color: var(--color-bg-container-secondary);
+  border-radius: var(--radius-050);
+  padding-inline: var(--padding-050);
+}
+
+/* ============================================
+   CODE BLOCKS
+   The plain fallback — CodeBlock is the richer
+   choice for standalone code
+   ============================================ */
+
+.ds-prose pre {
+  font-family: var(--font-family-code);
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+  background-color: var(--color-bg-container-primary);
+  border: var(--border-025) solid var(--color-bg-container-border);
+  border-radius: var(--radius-300);
+  padding: var(--padding-400);
+  overflow-x: auto;
+}
+
+.ds-prose pre code {
+  background-color: transparent;
+  border-radius: 0;
+  padding-inline: 0;
+  font-size: inherit;
+}
+
+/* ============================================
+   BLOCKQUOTES
+   Mirrors Reasoning's trace rail
+   ============================================ */
+
+.ds-prose blockquote {
+  border-inline-start: var(--border-050) solid var(--color-divider);
+  padding-inline-start: var(--padding-400);
+  color: var(--color-text-secondary);
+}
+
+.ds-prose blockquote p {
+  color: var(--color-text-secondary);
+}
+
+/* ============================================
+   TABLES
+   ============================================ */
+
+/* The table is its own scroll container. Prose styles markup it does not
+   render, so it cannot wrap the table in a scrolling div — `display: block`
+   makes the table element itself the scroller. The cost is deliberate: the
+   table sizes to its content instead of filling the container, because the
+   inner anonymous table box a block table generates cannot be stretched.
+   A clipped or shattered table is the worse failure. */
+.ds-prose table {
+  display: block;
+  width: max-content;
+  max-width: 100%;
+  overflow-x: auto;
+  border-collapse: collapse;
+}
+
+.ds-prose th {
+  font-family: var(--font-title-body-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-title-body-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-title-body-letter-spacing);
+  background-color: var(--color-bg-container-secondary);
+  text-align: start;
+}
+
+/* Cells never break words, whatever the surrounding context does. An
+   ancestor that sets `overflow-wrap: anywhere` (ChatMessage does, so a long
+   URL cannot widen a bubble) otherwise inherits in and collapses every
+   column's minimum width to one character, which lets auto table layout
+   squeeze a heading into "Co / m / pa / ny" rather than let the table reach
+   its natural width. Holding the floor is what gives the scroll above
+   something to scroll. */
+.ds-prose th,
+.ds-prose td {
+  padding: var(--padding-150) var(--padding-300);
+  border-block-end: var(--border-025) solid var(--color-divider);
+  overflow-wrap: normal;
+}
+
+/* ============================================
+   RULES AND MEDIA
+   ============================================ */
+
+.ds-prose hr {
+  border: none;
+  border-block-start: var(--border-025) solid var(--color-divider);
+}
+
+.ds-prose img {
+  max-width: 100%;
+  border-radius: var(--radius-300);
+}
+
+/* ============================================
+   SMALL SIZE
+   Dense chat contexts — body scale drops to the
+   small paragraph tokens; headings keep their tiers
+   ============================================ */
+
+.ds-prose--sm,
+.ds-prose--sm p,
+.ds-prose--sm li {
+  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-prose--sm strong {
+  font-weight: var(--font-paragraph-sm-emphasis-weight);
+}
+
+.ds-prose--sm code {
+  font-size: var(--font-paragraph-sm-size);
+}