rift-ds 1.0.0

package/components/Chart/Treemap.js

@@ -0,0 +1,95 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { ResponsiveContainer, Treemap as Treemap$1, Tooltip } from "recharts";
+import { getChartSeriesColors } from "./palette.js";
+import "./Chart.css";
+function getCSSVar(name, fallback) {
+  return `var(${name}, ${fallback})`;
+}
+function TreemapContent(props) {
+  const { x, y, width, height, name, index, color } = props;
+  if (width < 4 || height < 4) return null;
+  const seriesColors = getChartSeriesColors();
+  const fill = color || seriesColors[index % seriesColors.length];
+  const textColor = getCSSVar("--color-text-primary", "#050505");
+  const showLabel = width > 50 && height > 28;
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x,
+        y,
+        width,
+        height,
+        rx: 4,
+        ry: 4,
+        style: { fill, stroke: getCSSVar("--color-bg-container-primary", "#FFFFFF"), strokeWidth: 2 }
+      }
+    ),
+    showLabel && /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: x + width / 2,
+        y: y + height / 2,
+        textAnchor: "middle",
+        dominantBaseline: "central",
+        style: { fill: textColor, fontSize: 12, fontWeight: 600 },
+        children: name
+      }
+    )
+  ] });
+}
+function TreemapTooltip({ active, payload }) {
+  if (!active || !payload?.length) return null;
+  const entry = payload[0];
+  return /* @__PURE__ */ jsxs("div", { className: "ds-chart__tooltip", children: [
+    /* @__PURE__ */ jsx("div", { className: "ds-chart__tooltip-label", children: entry.name }),
+    /* @__PURE__ */ jsxs("div", { className: "ds-chart__tooltip-row", children: [
+      /* @__PURE__ */ jsx("span", { className: "ds-chart__tooltip-name", children: "Size" }),
+      /* @__PURE__ */ jsx("span", { className: "ds-chart__tooltip-value", children: entry.value?.toLocaleString() })
+    ] })
+  ] });
+}
+const Treemap = ({
+  data,
+  dataKey = "size",
+  title,
+  subtitle,
+  summaryItems,
+  height = 350,
+  bare = false,
+  className = ""
+}) => {
+  const baseClass = "ds-chart";
+  const classes = [baseClass, bare ? `${baseClass}--bare` : "", className].filter(Boolean).join(" ");
+  const renderTooltip = useCallback(
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    (props) => /* @__PURE__ */ jsx(TreemapTooltip, { ...props }),
+    []
+  );
+  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+    (title || subtitle || summaryItems) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header-text`, children: [
+        title && /* @__PURE__ */ jsx("h3", { className: `${baseClass}__title`, children: title }),
+        subtitle && /* @__PURE__ */ jsx("p", { className: `${baseClass}__subtitle`, children: subtitle })
+      ] }),
+      summaryItems && summaryItems.length > 0 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__summary`, children: summaryItems.map((item, i) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__summary-item`, children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-label`, children: item.label }),
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-value`, children: typeof item.value === "number" ? item.value.toLocaleString() : item.value })
+      ] }, i)) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsx(
+      Treemap$1,
+      {
+        data,
+        dataKey,
+        aspectRatio: 4 / 3,
+        content: /* @__PURE__ */ jsx(TreemapContent, {}),
+        children: /* @__PURE__ */ jsx(Tooltip, { content: renderTooltip })
+      }
+    ) }) })
+  ] });
+};
+export {
+  Treemap
+};

package/components/Chart/palette.d.ts

@@ -0,0 +1 @@
+export declare function getChartSeriesColors(): string[];

package/components/Chart/palette.js

@@ -0,0 +1,17 @@
+const SERIES_FALLBACKS = [
+  "#0E6E8F",
+  "#06D6A0",
+  "#FFD166",
+  "#EF476F",
+  "#9E47EF",
+  "#EF8247",
+  "#1E47B0"
+];
+function getChartSeriesColors() {
+  return SERIES_FALLBACKS.map(
+    (fallback, i) => `var(--color-chart-series-${i + 1}, ${fallback})`
+  );
+}
+export {
+  getChartSeriesColors
+};

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-400);
+  padding: var(--padding-150) var(--padding-400);
+}
+
+/* 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-100);
+  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,61 @@
+/* ============================================
+   CHAT MARKER COMPONENT
+   Inline conversation separator for dates and system notes
+   ============================================ */
+
+.ds-chat-marker {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-300);
+  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-025);
+  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-100);
+  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-500);
+}
+
+/* Icons take the colour of the text around them. Explicit, not just
+   inherited by default: a consumer stylesheet that sets a colour on
+   .material-symbols-rounded itself (a common global default) would
+   otherwise override inheritance and detach the icon from the state
+   colours this component sets on its parents. */
+.ds-chat-marker .material-symbols-rounded {
+  color: inherit;
+}

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,326 @@
+/* ============================================
+   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-800);
+
+  display: flex;
+  align-items: flex-start;
+  gap: var(--gap-300);
+  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-100);
+}
+
+.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-200);
+}
+
+.ds-chat-message__author {
+  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);
+  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);
+}
+
+/* Card furniture inside a turn steps clear of the content around it — at
+   the body's default rhythm an adjacent text line sits close enough to read
+   as a caption rather than a neighbouring block. Margins, not gap, so a
+   card standing alone adds nothing. */
+.ds-chat-message__content > .ds-message-card:not(:first-child),
+.ds-chat-message__content > .ds-interrupt-card:not(:first-child),
+.ds-chat-message__content > .ds-tool-call:not(:first-child) {
+  margin-top: var(--gap-300);
+}
+
+.ds-chat-message__content > .ds-message-card:not(:last-child),
+.ds-chat-message__content > .ds-interrupt-card:not(:last-child),
+.ds-chat-message__content > .ds-tool-call:not(:last-child) {
+  margin-bottom: var(--gap-300);
+}
+
+/* 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-300) var(--padding-500);
+  border-radius: var(--radius-600);
+}
+
+/* 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-100);
+}
+
+.ds-chat-message--tail.ds-chat-message--bubble.ds-chat-message--assistant
+  .ds-chat-message__content {
+  border-bottom-left-radius: var(--radius-100);
+}
+
+/* ============================================
+   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-200));
+}
+
+/* ============================================
+   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-150) var(--padding-300);
+}
+
+/* ============================================
+   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-100);
+}
+
+.ds-chat-message__dot {
+  width: var(--gap-200);
+  height: var(--gap-200);
+  border-radius: var(--radius-pill);
+  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-100);
+  /* 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-400 off the content without loosening the meta stack above. */
+  margin-top: var(--gap-300);
+  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;
+}
+
+/* showActions pins the row on: the actions are part of the response, not a
+   secondary affordance to discover. */
+.ds-chat-message--show-actions .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-100);
+}
+
+/* ============================================
+   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;
+  }
+}