rift-ds 1.0.0

package/components/Instructions/Instructions.css

@@ -0,0 +1,216 @@
+/* ============================================
+   INSTRUCTIONS COMPONENT
+   Step-by-step guidance with numbered steps
+   ============================================ */
+
+.ds-instructions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-400); /* 16px */
+  width: 100%;
+}
+
+/* ============================================
+   TITLE
+   ============================================ */
+
+.ds-instructions__title {
+  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);
+  color: var(--color-text-primary);
+  margin: 0;
+}
+
+/* ============================================
+   LIST
+   ============================================ */
+
+.ds-instructions__list {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* ============================================
+   STEP
+   ============================================ */
+
+.ds-instructions__step {
+  display: flex;
+  gap: var(--gap-200); /* 8px */
+}
+
+/* ============================================
+   INDICATOR (badge + connector)
+   ============================================ */
+
+.ds-instructions__indicator {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.ds-instructions__badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-pill);
+  border: var(--border-025) solid var(--color-action-primary-border);
+  background-color: transparent;
+  flex-shrink: 0;
+}
+
+.ds-instructions__badge .material-symbols-rounded {
+  --icon-size: var(--icon-size-600);
+  color: var(--color-action-primary-bg);
+}
+
+.ds-instructions__number {
+  font-family: var(--font-title-body-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-title-body-weight);
+  line-height: 1;
+  color: var(--color-action-primary-bg);
+}
+
+.ds-instructions__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-pill);
+  background-color: var(--color-action-primary-bg);
+}
+
+.ds-instructions__connector {
+  width: var(--border-025); /* 1px */
+  flex: 1;
+  min-height: var(--padding-400); /* 16px */
+  background-color: var(--color-bg-container-border);
+}
+
+/* ============================================
+   CONTENT
+   ============================================ */
+
+.ds-instructions__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-050); /* 2px */
+  padding-top: var(--padding-100); /* 4px — align text with badge center */
+  padding-bottom: var(--padding-400); /* 16px — space before next step */
+  min-width: 0;
+}
+
+.ds-instructions__step:last-child .ds-instructions__content {
+  padding-bottom: 0;
+}
+
+.ds-instructions__label {
+  font-family: var(--font-paragraph-emphasis-family);
+  font-size: var(--font-paragraph-emphasis-size);
+  font-weight: var(--font-paragraph-emphasis-weight);
+  line-height: var(--font-paragraph-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-emphasis-letter-spacing);
+  color: var(--color-text-primary);
+  margin: 0;
+}
+
+.ds-instructions__description {
+  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-secondary);
+  margin: 0;
+}
+
+/* ============================================
+   HORIZONTAL LAYOUT
+   ============================================ */
+
+.ds-instructions--horizontal .ds-instructions__list {
+  flex-direction: row;
+}
+
+.ds-instructions--horizontal .ds-instructions__step {
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  flex: 1;
+}
+
+.ds-instructions--horizontal .ds-instructions__indicator {
+  flex-direction: row;
+  width: 100%;
+}
+
+.ds-instructions--horizontal .ds-instructions__connector {
+  width: auto;
+  height: var(--border-025); /* 1px */
+  min-height: 0;
+  min-width: 0;
+  flex: 1;
+  align-self: center;
+}
+
+.ds-instructions--horizontal .ds-instructions__content {
+  padding-top: var(--padding-200); /* 8px */
+  padding-bottom: 0;
+}
+
+/* ============================================
+   SIZE — COMPACT
+   ============================================ */
+
+.ds-instructions--compact .ds-instructions__title {
+  font-size: var(--font-title-body-size);
+  line-height: var(--font-title-body-line-height);
+}
+
+.ds-instructions--compact .ds-instructions__badge {
+  width: 24px;
+  height: 24px;
+}
+
+.ds-instructions--compact .ds-instructions__badge .material-symbols-rounded {
+  --icon-size: var(--icon-size-500);
+}
+
+.ds-instructions--compact .ds-instructions__number {
+  font-size: 12px;
+}
+
+.ds-instructions--compact .ds-instructions__dot {
+  width: 6px;
+  height: 6px;
+}
+
+.ds-instructions--compact .ds-instructions__label {
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+}
+
+.ds-instructions--compact .ds-instructions__description {
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+}
+
+.ds-instructions--compact .ds-instructions__content {
+  padding-top: var(--padding-050); /* 2px */
+  padding-bottom: var(--padding-200); /* 8px */
+}
+
+.ds-instructions--compact .ds-instructions__step:last-child .ds-instructions__content {
+  padding-bottom: 0;
+}

package/components/Instructions/Instructions.d.ts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+export interface InstructionStep {
+    /** Step label/title */
+    label: string;
+    /** Optional step description */
+    description?: string;
+    /** Optional custom icon — Material Symbol name (string) or custom element (ReactNode); defaults to step number */
+    icon?: string | React.ReactNode;
+}
+export interface InstructionsProps {
+    /** Instructions title */
+    title?: string;
+    /** Array of instruction steps */
+    steps: InstructionStep[];
+    /** Component size */
+    size?: 'default' | 'compact';
+    /** Layout direction */
+    direction?: 'vertical' | 'horizontal';
+    /** Whether to show step numbers instead of icons */
+    numbered?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Instructions component for step-by-step guidance.
+ * Displays an ordered list of steps with optional icons,
+ * descriptions, and connecting lines.
+ */
+export declare const Instructions: ({ title, steps, size, direction, numbered, className, }: InstructionsProps) => React.JSX.Element;

package/components/Instructions/Instructions.js

@@ -0,0 +1,32 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "./Instructions.css";
+import "../../fonts/material-symbols.css";
+const Instructions = ({
+  title,
+  steps,
+  size = "default",
+  direction = "vertical",
+  numbered = true,
+  className = ""
+}) => {
+  const baseClass = "ds-instructions";
+  const sizeClass = `${baseClass}--${size}`;
+  const dirClass = `${baseClass}--${direction}`;
+  const classes = [baseClass, sizeClass, dirClass, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+    title && /* @__PURE__ */ jsx("h3", { className: `${baseClass}__title`, children: title }),
+    /* @__PURE__ */ jsx("ol", { className: `${baseClass}__list`, children: steps.map((step, idx) => /* @__PURE__ */ jsxs("li", { className: `${baseClass}__step`, children: [
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__indicator`, children: [
+        /* @__PURE__ */ jsx("div", { className: `${baseClass}__badge`, children: step.icon ? typeof step.icon === "string" ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: step.icon }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: step.icon }) : numbered ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__number`, children: idx + 1 }) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__dot` }) }),
+        idx < steps.length - 1 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__connector` })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__content`, children: [
+        /* @__PURE__ */ jsx("p", { className: `${baseClass}__label`, children: step.label }),
+        step.description && /* @__PURE__ */ jsx("p", { className: `${baseClass}__description`, children: step.description })
+      ] })
+    ] }, idx)) })
+  ] });
+};
+export {
+  Instructions
+};

package/components/InterruptCard/InterruptCard.css

@@ -0,0 +1,164 @@
+/* ============================================
+   INTERRUPT CARD COMPONENT
+   A human-in-the-loop checkpoint: a question
+   from the agent, a detail slot, and option
+   buttons in a footer.
+
+   The card is deliberately quiet — one tone,
+   the standard container border, no status
+   colour. The question and its buttons are
+   the signal; the visually hidden status
+   announcement carries the waiting state.
+   ============================================ */
+
+.ds-interrupt-card {
+  --ds-interrupt-card-color: var(--color-icon-secondary);
+
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background-color: var(--color-bg-container-primary);
+  border: var(--border-025) solid var(--color-bg-container-border);
+  /* The chat furniture's shared 24px shell — see ToolCall. */
+  border-radius: var(--radius-600);
+  overflow: hidden;
+}
+
+/* ============================================
+   HEADER
+   ============================================ */
+
+.ds-interrupt-card__header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--gap-200);
+  padding: var(--padding-400) var(--padding-500);
+}
+
+.ds-interrupt-card__icon {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  /* Centre the icon on the title's first line. */
+  margin-top: calc((var(--font-heading-3-line-height) - var(--icon-size-500)) / 2);
+  color: var(--ds-interrupt-card-color);
+}
+
+.ds-interrupt-card__icon .material-symbols-rounded {
+  --icon-size: var(--icon-size-500);
+}
+
+.ds-interrupt-card__heading {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-100);
+  min-width: 0;
+}
+
+/* The question is the card's one heading, so it takes the same heading
+   tier as MessageCard's title — the chat cards share one title scale. */
+.ds-interrupt-card__title {
+  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);
+  color: var(--color-text-primary);
+}
+
+.ds-interrupt-card__description {
+  margin: 0;
+  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-secondary);
+}
+
+/* ============================================
+   DETAIL SLOT
+   Typically a pending ToolCall showing what
+   wants to run.
+   ============================================ */
+
+.ds-interrupt-card__detail {
+  padding: 0 var(--padding-500) var(--padding-400);
+}
+
+.ds-interrupt-card__detail > :first-child {
+  margin-top: 0;
+}
+
+.ds-interrupt-card__detail > :last-child {
+  margin-bottom: 0;
+}
+
+/* ============================================
+   OPTIONS
+   Mirrors ToolCall's actions footer exactly, so
+   a decision on a card and an approval on a
+   call read as the same row.
+   ============================================ */
+
+.ds-interrupt-card__options {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-200);
+  padding: var(--padding-200) var(--padding-500) var(--padding-400);
+}
+
+/* ============================================
+   ANSWERED ECHO
+   Same footer geometry, quiet text where the
+   buttons were.
+   ============================================ */
+
+.ds-interrupt-card__answer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-100);
+  padding: var(--padding-200) var(--padding-500) var(--padding-400);
+  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-secondary);
+}
+
+.ds-interrupt-card__answer-icon {
+  --icon-size: var(--icon-size-500);
+
+  flex: none;
+  color: var(--ds-interrupt-card-color);
+}
+
+/* ============================================
+   VISUALLY HIDDEN
+   The waiting announcement is for screen
+   readers only.
+   ============================================ */
+
+.ds-interrupt-card__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;
+}
+
+/* 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-interrupt-card .material-symbols-rounded {
+  color: inherit;
+}

package/components/InterruptCard/InterruptCard.d.ts

@@ -0,0 +1,54 @@
+import { default as React } from 'react';
+/** One choice the card offers, rendered as a Button in the options footer. */
+export interface InterruptCardOption {
+    /** Value passed to `onValueChange` when this option is chosen. */
+    value: string;
+    /** Button text, e.g. "Allow once". */
+    label: string;
+    /** Visual weight. `primary` for the recommended choice, `danger` for destructive approvals. */
+    variant?: 'primary' | 'secondary' | 'danger';
+}
+/** Props owned by InterruptCard itself — everything else falls through to the root element. */
+type InterruptCardOwnProps = {
+    /** The question, e.g. "Allow file edit?". */
+    title: string;
+    /** One line of context under the title. */
+    description?: string;
+    /** Leading Material Symbol name, or any custom element. No icon by default. */
+    icon?: string | React.ReactNode;
+    /** The choices, rendered as buttons left to right. */
+    options?: InterruptCardOption[];
+    /** Fires with the chosen option's value. */
+    onValueChange?: (value: string) => void;
+    /**
+     * The already-chosen value. When set, the card renders its answered state:
+     * the options are replaced by a quiet echo of the chosen label.
+     */
+    value?: string;
+    /** Override the echoed text in the answered state (default: the chosen option's label). */
+    answeredLabel?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * Detail slot between the description and the options — typically a
+     * `<ToolCall status="pending">` showing what wants to run.
+     */
+    children?: React.ReactNode;
+};
+export interface InterruptCardProps extends InterruptCardOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof InterruptCardOwnProps> {
+}
+/**
+ * InterruptCard is a human-in-the-loop checkpoint: a question from the agent
+ * with option buttons for the person to decide. "Allow this file edit?" —
+ * allow once, always allow, deny.
+ *
+ * The card stays quiet in both states: one tone, the standard container
+ * border, options in a footer outside the content. Once `value` is set the
+ * decision is made and the footer echoes the chosen label; a visually hidden
+ * status announcement carries the waiting state for screen readers.
+ *
+ * Fully controlled: the card never stores the answer itself — `onValueChange`
+ * reports the choice and `value` renders it.
+ */
+export declare const InterruptCard: React.ForwardRefExoticComponent<InterruptCardProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/InterruptCard/InterruptCard.js

@@ -0,0 +1,57 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import { Button } from "../Button/Button.js";
+import "./InterruptCard.css";
+import "../../fonts/material-symbols.css";
+const OPTION_VARIANTS = {
+  primary: "primary",
+  secondary: "secondary",
+  danger: "destructive"
+};
+const InterruptCard = React.forwardRef(
+  ({
+    title,
+    description,
+    icon,
+    options,
+    onValueChange,
+    value,
+    answeredLabel,
+    className = "",
+    children,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-interrupt-card";
+    const answered = value !== void 0;
+    const classes = [baseClass, answered ? `${baseClass}--answered` : "", className].filter(Boolean).join(" ");
+    const echoedLabel = answeredLabel ?? options?.find((option) => option.value === value)?.label ?? value;
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, role: "group", "aria-label": title, className: classes, children: [
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, 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 }),
+        /* @__PURE__ */ jsxs("div", { className: `${baseClass}__heading`, children: [
+          /* @__PURE__ */ jsx("span", { className: `${baseClass}__title`, children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: `${baseClass}__description`, children: description })
+        ] }),
+        !answered && /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr-only`, role: "status", children: "Waiting for your decision" })
+      ] }),
+      children && /* @__PURE__ */ jsx("div", { className: `${baseClass}__detail`, children }),
+      answered ? /* @__PURE__ */ jsxs("div", { className: `${baseClass}__answer`, children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__answer-icon material-symbols-rounded`, "aria-hidden": "true", children: "check" }),
+        echoedLabel
+      ] }) : options && options.length > 0 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__options`, children: options.map((option) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: OPTION_VARIANTS[option.variant ?? "secondary"],
+          size: "compact",
+          label: option.label,
+          onClick: () => onValueChange?.(option.value)
+        },
+        option.value
+      )) })
+    ] });
+  }
+);
+InterruptCard.displayName = "InterruptCard";
+export {
+  InterruptCard
+};

package/components/Kbd/Kbd.css

@@ -0,0 +1,28 @@
+/* ============================================
+   KBD COMPONENT
+   A single keyboard key rendered as a keycap
+   ============================================ */
+
+/* Base */
+.ds-kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  padding: var(--padding-050) var(--padding-150);
+  border: var(--border-025) solid var(--color-bg-container-border);
+  border-radius: var(--radius-100);
+  background-color: var(--color-bg-container-primary);
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-emphasis-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  color: var(--color-text-tertiary);
+  white-space: nowrap;
+}
+
+/* Sizes */
+.ds-kbd--compact {
+  min-width: 20px;
+  padding: var(--padding-050) var(--padding-100);
+}

package/components/Kbd/Kbd.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+/** Props owned by Kbd itself — everything else falls through to the <kbd> element. */
+type KbdOwnProps = {
+    /** Key size */
+    size?: 'default' | 'compact';
+    /** Additional CSS classes */
+    className?: string;
+    /** The key legend — e.g. ⌘, K, Esc, Shift */
+    children?: React.ReactNode;
+};
+export interface KbdProps extends KbdOwnProps, Omit<React.ComponentPropsWithoutRef<'kbd'>, keyof KbdOwnProps> {
+}
+/**
+ * Kbd renders a single keyboard key as a keycap, for shortcut hints in
+ * menus and docs prose. Compose several for a chord: `<Kbd>⌘</Kbd><Kbd>K</Kbd>`.
+ * Purely presentational — safe to render from a Server Component.
+ */
+export declare const Kbd: React.ForwardRefExoticComponent<KbdProps & React.RefAttributes<HTMLElement>>;
+export {};

package/components/Kbd/Kbd.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import "./Kbd.css";
+const Kbd = React.forwardRef(
+  ({ size = "default", className = "", children, ...rest }, ref) => {
+    const baseClass = "ds-kbd";
+    const classes = [baseClass, `${baseClass}--${size}`, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx("kbd", { ...rest, ref, className: classes, children });
+  }
+);
+Kbd.displayName = "Kbd";
+export {
+  Kbd
+};

package/components/LegendTile/LegendTile.css

@@ -0,0 +1,60 @@
+/* ============================================
+   LEGEND TILE COMPONENT
+   The labelled value tile under a chart: an
+   inset surface one step below its panel, a
+   caption label with an optional series dot,
+   and the value beneath. The dot's colour
+   arrives per instance via the
+   --legend-tile-swatch custom property, set
+   inline by the component, so this file stays
+   token-only.
+   ============================================ */
+
+/* Base */
+
+.ds-legend-tile {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-050);
+  min-width: 0;
+  background-color: var(--color-bg-page-primary);
+  border-radius: var(--radius-300);
+  padding: var(--padding-200) var(--padding-300);
+}
+
+/* Parts */
+
+.ds-legend-tile__label {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-100);
+  min-width: 0;
+  font-family: var(--font-caption-family);
+  font-size: var(--font-caption-size);
+  font-weight: var(--font-caption-weight);
+  line-height: var(--font-caption-line-height);
+  letter-spacing: var(--font-caption-letter-spacing);
+  color: var(--color-text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Fixed 8px series dot — same literal as the chart tooltip's dot in
+   Chart.css, which is the reference for this element. */
+.ds-legend-tile__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-pill);
+  flex-shrink: 0;
+  background-color: var(--legend-tile-swatch, var(--color-text-secondary));
+}
+
+.ds-legend-tile__value {
+  font-family: var(--font-paragraph-sm-emphasis-family);
+  font-size: var(--font-paragraph-sm-emphasis-size);
+  font-weight: var(--font-title-body-weight);
+  line-height: var(--font-paragraph-sm-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-sm-emphasis-letter-spacing);
+  color: var(--color-text-primary);
+}