rift-ds 1.0.0

package/components/Rating/Rating.js

@@ -0,0 +1,124 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import React, { useState } from "react";
+import "./Rating.css";
+import "../../fonts/material-symbols.css";
+const Rating = React.forwardRef(
+  ({
+    value,
+    defaultValue = 0,
+    max = 5,
+    onValueChange,
+    readOnly = false,
+    disabled = false,
+    allowClear = false,
+    icon = "star",
+    size = "default",
+    label = "Rating",
+    className = "",
+    ...rest
+  }, ref) => {
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const [hoverValue, setHoverValue] = useState(0);
+    const baseClass = "ds-rating";
+    const currentValue = value ?? internalValue;
+    const displayValue = !readOnly && !disabled && hoverValue > 0 ? hoverValue : currentValue;
+    const classes = [
+      baseClass,
+      `${baseClass}--${size}`,
+      readOnly ? `${baseClass}--read-only` : "",
+      disabled ? `${baseClass}--disabled` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const setValue = (next) => {
+      const resolved = allowClear && next === currentValue ? 0 : next;
+      if (value === void 0) setInternalValue(resolved);
+      onValueChange?.(resolved);
+    };
+    const handleKeyDown = (event) => {
+      let next = null;
+      switch (event.key) {
+        case "ArrowRight":
+        case "ArrowUp":
+          next = Math.min(max, currentValue + 1);
+          break;
+        case "ArrowLeft":
+        case "ArrowDown":
+          next = Math.max(1, currentValue - 1);
+          break;
+        case "Home":
+          next = 1;
+          break;
+        case "End":
+          next = max;
+          break;
+      }
+      if (next !== null) {
+        event.preventDefault();
+        if (value === void 0) setInternalValue(next);
+        onValueChange?.(next);
+        const steps2 = event.currentTarget.querySelectorAll('[role="radio"]');
+        steps2[next - 1]?.focus();
+      }
+    };
+    const steps = Array.from({ length: max }, (_, i) => i + 1);
+    if (readOnly) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...rest,
+          ref,
+          className: classes,
+          role: "img",
+          "aria-label": rest["aria-label"] ?? `${label}: ${currentValue} out of ${max}`,
+          children: steps.map((step) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `${baseClass}__step ${step <= displayValue ? `${baseClass}__step--filled` : ""}`,
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon${typeof icon === "string" ? " material-symbols-rounded" : ""}`, children: icon })
+            },
+            step
+          ))
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...rest,
+        ref,
+        className: classes,
+        role: "radiogroup",
+        "aria-label": rest["aria-label"] ?? label,
+        "aria-disabled": disabled || void 0,
+        onKeyDown: disabled ? void 0 : handleKeyDown,
+        onMouseLeave: () => setHoverValue(0),
+        children: steps.map((step) => {
+          const checked = step === currentValue;
+          const tabStop = checked || currentValue === 0 && step === 1;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-checked": checked,
+              "aria-label": label ? `${label}: ${step} out of ${max}` : `${step} out of ${max}`,
+              tabIndex: tabStop ? 0 : -1,
+              disabled,
+              className: `${baseClass}__step ${step <= displayValue ? `${baseClass}__step--filled` : ""}`,
+              onClick: () => setValue(step),
+              onMouseEnter: () => setHoverValue(step),
+              children: /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon${typeof icon === "string" ? " material-symbols-rounded" : ""}`, "aria-hidden": "true", children: icon })
+            },
+            step
+          );
+        })
+      }
+    );
+  }
+);
+Rating.displayName = "Rating";
+export {
+  Rating
+};

package/components/Reasoning/Reasoning.css

@@ -0,0 +1,291 @@
+/* ============================================
+   REASONING COMPONENT
+   A model's thinking, disclosed behind a
+   one-line summary. Quiet by construction: the
+   trace is secondary text on a rail, never
+   competing with the answer beside it.
+   ============================================ */
+
+.ds-reasoning {
+  /* Where an AgentStatus summary's label starts: matrix plus its gap.
+     The rail geometry and the handoff slide both derive from it. */
+  --ds-reasoning-align: calc(var(--icon-size-600) + var(--gap-300));
+
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+/* ============================================
+   TRIGGER
+   ============================================ */
+
+.ds-reasoning__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-200);
+  align-self: flex-start;
+  padding: var(--padding-100) var(--padding-150);
+  margin-left: calc(var(--padding-150) * -1);
+  background: none;
+  border: none;
+  border-radius: var(--radius-200);
+  color: var(--color-text-secondary);
+  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);
+  cursor: pointer;
+  transition: color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-reasoning__trigger:hover {
+  color: var(--color-text-primary);
+}
+
+/* Summary-only: the same line, minus every affordance that would promise a
+   panel behind it. Not a button, so there is nothing to focus or press. */
+.ds-reasoning__trigger--static {
+  cursor: default;
+}
+
+.ds-reasoning__trigger--static:hover {
+  color: var(--color-text-secondary);
+}
+
+.ds-reasoning__trigger:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+}
+
+/* Closed the chevron points at the collapsed trace; open it points down the
+   way the panel expands. The glyph itself points down, so closed is the
+   rotated state — and the quarter turn to open runs clockwise, following
+   the panel as it opens. */
+.ds-reasoning__chevron {
+  --icon-size: var(--icon-size-500);
+
+  flex: none;
+  transform: rotate(-90deg);
+  transition: transform var(--motion-duration-slow) var(--motion-ease-standard);
+}
+
+.ds-reasoning--open .ds-reasoning__chevron {
+  transform: rotate(0deg);
+}
+
+/* ============================================
+   SUMMARY
+   While the trace streams, a sweep walks the
+   summary left to right — the same gradient
+   AgentStatus uses (primary base, tertiary
+   band, same stops), so "the model is working"
+   looks the same wherever it appears.
+   ============================================ */
+
+.ds-reasoning__summary {
+  position: relative;
+  white-space: nowrap;
+}
+
+/* The live→done handoff. The departing node summary (an AgentStatus)
+   overlays the incoming text, fading out in place, while the text summary
+   slides left from where its label sat into the flush position. The
+   modifier comes off once the animation ends, so nothing stays composited. */
+.ds-reasoning__summary--entering {
+  animation: ds-reasoning-summary-in var(--motion-duration-slow) var(--motion-ease-entrance) both;
+}
+
+.ds-reasoning__summary-leaving {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  white-space: nowrap;
+  animation: ds-reasoning-summary-out var(--motion-duration-slow) var(--motion-ease-standard) both;
+}
+
+@keyframes ds-reasoning-summary-in {
+  from {
+    opacity: 0;
+    transform: translateX(var(--ds-reasoning-align));
+  }
+}
+
+@keyframes ds-reasoning-summary-out {
+  to {
+    opacity: 0;
+  }
+}
+
+/* A node summary (an AgentStatus) owns its own appearance — the text
+   shimmer below never applies to it. Inline-flex keeps the span exactly
+   the node's height: left inline, the node sits on the text baseline and
+   the leftover descender space pushes it off the chevron's centreline. */
+.ds-reasoning__summary--node {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* The band travels dim → bright → dim, and stays narrow, matching
+   AgentStatus's sweep stop for stop: the two sit in the same conversation,
+   so a shimmer that read differently here would look like a second effect
+   rather than the same one. */
+.ds-reasoning--streaming .ds-reasoning__summary:not(.ds-reasoning__summary--node) {
+  background-image: linear-gradient(
+    100deg,
+    var(--color-text-tertiary) 44%,
+    var(--color-text-primary) 50%,
+    var(--color-text-tertiary) 56%
+  );
+  background-size: 250% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  animation: ds-reasoning-shimmer var(--motion-duration-loop-shimmer)
+    var(--motion-ease-linear) infinite;
+}
+
+@keyframes ds-reasoning-shimmer {
+  from {
+    background-position-x: 100%;
+  }
+
+  to {
+    background-position-x: 0%;
+  }
+}
+
+/* ============================================
+   PANEL
+   ============================================ */
+
+.ds-reasoning__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-reasoning--open .ds-reasoning__panel {
+  grid-template-rows: 1fr;
+  visibility: visible;
+}
+
+.ds-reasoning__content {
+  overflow: hidden;
+  min-height: 0;
+  transition: padding-block var(--motion-duration-slow) var(--motion-ease-standard);
+  /* The rail and trace align to an AgentStatus summary's geometry: the
+     rail runs down the centre of the matrix (half an icon step, corrected
+     by half the rail's own width) and the trace text starts exactly where
+     the status label's first letter starts (matrix + its gap). A plain
+     text summary shares the same geometry, so swapping a live status for
+     the thought-for line never shifts the trace. */
+  margin-left: calc(var(--icon-size-600) / 2 - var(--border-050) / 2);
+  padding-left: calc(var(--icon-size-600) / 2 + var(--gap-300) - var(--border-050) / 2);
+  /* The rail dissolves at its foot — the Timeline's end-of-line treatment.
+     A border can't carry a gradient, so the border only reserves the
+     geometry (transparent, same width) and the stripe is painted under it:
+     a border-box background sized to the border's own column. */
+  border-left: var(--border-050) solid transparent;
+  background:
+    linear-gradient(
+        to bottom,
+        var(--color-divider) calc(100% - var(--gap-500) * 2),
+        var(--color-bg-container-primary-transparent)
+      )
+      left top / var(--border-050) 100% no-repeat border-box;
+  color: var(--color-text-secondary);
+  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);
+}
+
+/* With the trigger's own bottom padding, the panel opens one --gap-500
+   below the summary row — the same step a --gap-500 trace list uses
+   between nodes, so the first node isn't tighter than the rest. */
+.ds-reasoning--open .ds-reasoning__content {
+  padding-block: var(--padding-400);
+}
+
+.ds-reasoning__content > :first-child {
+  margin-top: 0;
+}
+
+.ds-reasoning__content > :last-child {
+  margin-bottom: 0;
+}
+
+/* ============================================
+   TRACE NODES
+   Inside Reasoning, a list is the trace's node
+   list: one thinking step per item, no bullets
+   (the rail is the marker), on the same
+   --gap-500 beat the panel opens with. New
+   nodes rise in as the trace builds.
+   ============================================ */
+
+.ds-reasoning__content ul,
+.ds-reasoning__content ol {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-500);
+}
+
+.ds-reasoning__content li {
+  animation: ds-reasoning-node-in var(--motion-duration-slow) var(--motion-ease-entrance);
+}
+
+@keyframes ds-reasoning-node-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+}
+
+/* ============================================
+   SIZES
+   The scale pairs with ChatMessage: default
+   matches default message text, compact
+   matches compact message text.
+   ============================================ */
+
+.ds-reasoning--compact .ds-reasoning__trigger,
+.ds-reasoning--compact .ds-reasoning__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);
+}
+
+/* Compact pairs with a compact AgentStatus: sm matrix, sm gap. */
+.ds-reasoning--compact {
+  --ds-reasoning-align: calc(var(--icon-size-500) + var(--gap-200));
+}
+
+.ds-reasoning--compact .ds-reasoning__content {
+  margin-left: calc(var(--icon-size-500) / 2 - var(--border-050) / 2);
+  padding-left: calc(var(--icon-size-500) / 2 + var(--gap-200) - var(--border-050) / 2);
+}
+
+/* ============================================
+   REDUCED MOTION
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-reasoning--streaming .ds-reasoning__summary:not(.ds-reasoning__summary--node) {
+    background-image: none;
+    color: var(--color-text-tertiary);
+    animation: none;
+  }
+}

package/components/Reasoning/Reasoning.d.ts

@@ -0,0 +1,55 @@
+import { default as React } from 'react';
+/** Props owned by Reasoning itself — everything else falls through to the root element. */
+type ReasoningOwnProps = {
+    /** The model is still producing the trace. Opens the panel and shimmers the summary. */
+    streaming?: boolean;
+    /** Seconds spent reasoning, shown in the summary once complete. */
+    duration?: number;
+    /** Override the summary line. By default it reports the streaming state and the duration. */
+    label?: string;
+    /**
+     * Replace the summary text with custom content — typically an AgentStatus,
+     * pairing the live indicator with the trace disclosure. The node owns its
+     * own appearance and announcement, so Reasoning's shimmer and live region
+     * stand down.
+     */
+    summary?: React.ReactNode;
+    /**
+     * Render the summary line alone, with no chevron, no trigger, and no
+     * panel — for a model that reports what it is doing but produces no trace
+     * to read. A disclosure that opens onto nothing is a promise the component
+     * cannot keep, so it stops being one.
+     */
+    summaryOnly?: boolean;
+    /**
+     * Text scale, paired with ChatMessage's sizes: `default` matches default
+     * message text, `compact` matches compact message text.
+     */
+    size?: 'default' | 'compact';
+    /** Open state for controlled use. Pair with `onOpenChange`. */
+    open?: boolean;
+    /** Open state for uncontrolled use. Defaults to open while `streaming`. */
+    defaultOpen?: boolean;
+    /** Fires whenever the panel opens or closes, from a click or from the stream ending. */
+    onOpenChange?: (open: boolean) => void;
+    /** Additional CSS classes */
+    className?: string;
+    /** The reasoning trace. */
+    children?: React.ReactNode;
+};
+export interface ReasoningProps extends ReasoningOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof ReasoningOwnProps> {
+}
+/**
+ * Reasoning discloses a model's thinking without letting it dominate the
+ * response: open while the trace streams in, collapsed to a one-line summary
+ * once it finishes.
+ *
+ * The auto-collapse yields to the reader — once someone has toggled the panel
+ * themselves, the stream ending no longer closes it.
+ *
+ * Only the summary line is a live region. A trace announced token by token
+ * floods a screen reader, so the body is ordinary expandable content and the
+ * announcement covers the boundaries: thinking, then thought for so long.
+ */
+export declare const Reasoning: React.ForwardRefExoticComponent<ReasoningProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/Reasoning/Reasoning.js

@@ -0,0 +1,99 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useId, useState, useRef, useEffect, useCallback } from "react";
+import "./Reasoning.css";
+import "../../fonts/material-symbols.css";
+const Reasoning = React.forwardRef(
+  ({
+    streaming = false,
+    duration,
+    label,
+    summary,
+    summaryOnly = false,
+    size = "default",
+    open,
+    defaultOpen,
+    onOpenChange,
+    className = "",
+    children,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-reasoning";
+    const id = useId();
+    const panelId = `${id}-panel`;
+    const triggerId = `${id}-trigger`;
+    const isControlled = open !== void 0;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen ?? streaming);
+    const isOpen = isControlled ? open : uncontrolledOpen;
+    const [leaving, setLeaving] = useState(null);
+    const prevSummary = useRef(summary);
+    useEffect(() => {
+      if (prevSummary.current != null && summary == null) {
+        setLeaving(prevSummary.current);
+      }
+      prevSummary.current = summary;
+    }, [summary]);
+    const readerDecided = useRef(false);
+    const wasStreaming = useRef(streaming);
+    useEffect(() => {
+      if (streaming === wasStreaming.current) return;
+      wasStreaming.current = streaming;
+      if (readerDecided.current) return;
+      if (!isControlled) setUncontrolledOpen(streaming);
+      onOpenChange?.(streaming);
+    }, [streaming, isControlled, onOpenChange]);
+    const toggle = useCallback(() => {
+      readerDecided.current = true;
+      const next = !isOpen;
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    }, [isOpen, isControlled, onOpenChange]);
+    const summaryText = label ?? (streaming ? "Thinking" : duration !== void 0 ? `Thought for ${duration}s` : "Thought process");
+    const classes = [
+      baseClass,
+      `${baseClass}--${size}`,
+      isOpen ? `${baseClass}--open` : "",
+      streaming ? `${baseClass}--streaming` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const summaryLine = /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: `${baseClass}__summary${summary ? ` ${baseClass}__summary--node` : ""}${leaving != null && summary == null ? ` ${baseClass}__summary--entering` : ""}`,
+        role: summary ? void 0 : "status",
+        onAnimationEnd: (e) => {
+          if (e.target === e.currentTarget) setLeaving(null);
+        },
+        children: [
+          leaving != null && summary == null && /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-leaving`, "aria-hidden": "true", children: leaving }),
+          summary ?? summaryText
+        ]
+      }
+    );
+    if (summaryOnly) {
+      return /* @__PURE__ */ jsx("div", { ...rest, ref, className: classes, children: /* @__PURE__ */ jsx("span", { className: `${baseClass}__trigger ${baseClass}__trigger--static`, children: summaryLine }) });
+    }
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          id: triggerId,
+          className: `${baseClass}__trigger`,
+          "aria-expanded": isOpen,
+          "aria-controls": panelId,
+          onClick: toggle,
+          children: [
+            summaryLine,
+            /* @__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("div", { className: `${baseClass}__content`, children }) })
+    ] });
+  }
+);
+Reasoning.displayName = "Reasoning";
+export {
+  Reasoning
+};