@robr0/design-system 0.4.0 → 0.6.0

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.
+
+   ToolCall's pending language promoted to a
+   card — the warning pair on icon and border
+   while a decision is owed, routed through a
+   local custom-property pair so the answered
+   state repoints two variables and the whole
+   card drops to monochrome.
+   ============================================ */
+
+.ds-interrupt-card {
+  --ds-interrupt-card-color: var(--color-status-warning-text);
+  --ds-interrupt-card-border: var(--color-status-warning-border);
+
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background-color: var(--color-bg-container-primary);
+  border: var(--border-xs) solid var(--ds-interrupt-card-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+/* Decision made — no signal needed */
+.ds-interrupt-card--answered {
+  --ds-interrupt-card-color: var(--color-text-secondary);
+  --ds-interrupt-card-border: var(--color-bg-container-border);
+}
+
+/* ============================================
+   HEADER
+   ============================================ */
+
+.ds-interrupt-card__header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--gap-sm);
+  padding: var(--padding-sm) var(--padding-sm-md);
+}
+
+.ds-interrupt-card__icon {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  color: var(--ds-interrupt-card-color);
+}
+
+.ds-interrupt-card__icon .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+}
+
+.ds-interrupt-card__heading {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xxs);
+  min-width: 0;
+}
+
+/* The question is the card's one heading, so it takes the title tier
+   rather than an emphasised paragraph */
+.ds-interrupt-card__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);
+  letter-spacing: var(--font-title-body-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-sm-md) var(--padding-sm);
+}
+
+.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-end;
+  gap: var(--gap-sm);
+  padding: var(--padding-sm) var(--padding-sm-md);
+  border-top: var(--border-xs) solid var(--color-divider);
+  background-color: var(--color-bg-container-secondary);
+}
+
+/* ============================================
+   ANSWERED ECHO
+   Same footer geometry, quiet text where the
+   buttons were.
+   ============================================ */
+
+.ds-interrupt-card__answer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--gap-xs);
+  padding: var(--padding-sm) var(--padding-sm-md);
+  border-top: var(--border-xs) solid var(--color-divider);
+  background-color: var(--color-bg-container-secondary);
+  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-sm);
+
+  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;
+}

package/components/InterruptCard/InterruptCard.d.ts

@@ -0,0 +1,55 @@
+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. */
+    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 warning signal drops to monochrome and the options are replaced by an
+     * 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.
+ *
+ * Unanswered it wears ToolCall's pending language promoted to a card: the
+ * warning pair on icon and border, options in a footer outside the content.
+ * Once `value` is set the decision is made, so the signal drops to monochrome
+ * and the footer echoes the chosen label.
+ *
+ * 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 = "pause_circle",
+    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/MessageActions/MessageActions.css

@@ -0,0 +1,76 @@
+/* ============================================
+   MESSAGE ACTIONS COMPONENT
+   The icon-button row under a chat message:
+   copy, retry, feedback. Ghost buttons — no
+   border, no resting background — so the row
+   stays quiet until pointed at.
+
+   Stateless beyond hover: copy feedback is the
+   consumer swapping an item's icon, never a
+   timer inside the row.
+   ============================================ */
+
+.ds-message-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xxs);
+}
+
+/* ============================================
+   BUTTON
+   Ghost: transparent at rest, the passive
+   action ramp on hover and for the active item.
+   ============================================ */
+
+.ds-message-actions__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--padding-xxs);
+  border: none;
+  border-radius: var(--radius-sm);
+  background-color: transparent;
+  color: var(--color-icon-primary);
+  cursor: pointer;
+  transition:
+    background-color var(--motion-duration-fast) var(--motion-ease-standard),
+    color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-message-actions__button .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+}
+
+.ds-message-actions__button:hover:not(:disabled) {
+  background-color: var(--color-action-passive-bg-hover);
+  color: var(--color-text-primary);
+}
+
+/* ============================================
+   ACTIVE
+   The selected item, e.g. the chosen feedback
+   thumb — held on the pressed step of the ramp.
+   ============================================ */
+
+.ds-message-actions__button--active {
+  background-color: var(--color-action-passive-bg-active);
+  color: var(--color-text-primary);
+}
+
+/* ============================================
+   FOCUS
+   ============================================ */
+
+.ds-message-actions__button:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+}
+
+/* ============================================
+   DISABLED
+   ============================================ */
+
+.ds-message-actions__button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}

package/components/MessageActions/MessageActions.d.ts

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+/** One action in the row: a stable id, a glyph, and an accessible name. */
+export interface MessageAction {
+    /** Stable identifier passed to `onActionClick`. */
+    id: string;
+    /** Material Symbol name for the button glyph. */
+    icon: string;
+    /** Accessible name, also shown as the tooltip. */
+    label: string;
+    /** Marks the action as selected, e.g. the chosen feedback thumb. */
+    active?: boolean;
+    /** Disables just this action. */
+    disabled?: boolean;
+}
+/** Props owned by MessageActions itself — everything else falls through to the root element. */
+type MessageActionsOwnProps = {
+    /** The actions, rendered left to right. */
+    items: MessageAction[];
+    /** Fires with the pressed action's id. */
+    onActionClick?: (id: string) => void;
+    /** Wrap each button in a Tooltip showing its label. The label stays as `aria-label` either way. */
+    showTooltips?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface MessageActionsProps extends MessageActionsOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof MessageActionsOwnProps> {
+}
+/**
+ * MessageActions is the icon-button row for message-level actions: copy,
+ * retry, feedback. It slots into ChatMessage's `actions` prop, which reveals
+ * it on hover and keyboard focus.
+ *
+ * The row is stateless beyond hover — copy feedback is the consumer swapping
+ * an item's `icon` (content_copy → check) and flipping it back, so the row
+ * never owns a timer or a clipboard call.
+ */
+export declare const MessageActions: React.ForwardRefExoticComponent<MessageActionsProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/MessageActions/MessageActions.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { Tooltip } from "../Tooltip/Tooltip.js";
+import "./MessageActions.css";
+import "../../fonts/material-symbols.css";
+const MessageActions = React.forwardRef(
+  ({ items, onActionClick, showTooltips = true, className = "", ...rest }, ref) => {
+    const baseClass = "ds-message-actions";
+    const classes = [baseClass, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx("div", { ...rest, ref, className: classes, children: items.map((item) => {
+      const button = /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: [
+            `${baseClass}__button`,
+            item.active ? `${baseClass}__button--active` : ""
+          ].filter(Boolean).join(" "),
+          "aria-label": item.label,
+          "aria-pressed": item.active !== void 0 ? item.active : void 0,
+          disabled: item.disabled,
+          onClick: () => onActionClick?.(item.id),
+          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: item.icon })
+        }
+      );
+      return showTooltips ? /* @__PURE__ */ jsx(Tooltip, { content: item.label, children: button }, item.id) : /* @__PURE__ */ jsx(React.Fragment, { children: button }, item.id);
+    }) });
+  }
+);
+MessageActions.displayName = "MessageActions";
+export {
+  MessageActions
+};

package/components/MessageCard/MessageCard.css

@@ -0,0 +1,112 @@
+/* ============================================
+   MESSAGE CARD COMPONENT
+   Structured rich content inside a chat turn:
+   media on top, a title/meta/description body,
+   and an actions footer.
+
+   Not the navigation Card — this is content
+   furniture inside a conversation, --radius-md
+   like the other chat primitives, sized by the
+   bubble or turn that holds it.
+   ============================================ */
+
+.ds-message-card {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: var(--ds-message-card-max-width, 100%);
+  background-color: var(--color-bg-container-primary);
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+/* ============================================
+   MEDIA
+   Full bleed — the card's overflow clip rounds
+   the corners, so the slot carries no padding.
+   ============================================ */
+
+.ds-message-card__media {
+  display: block;
+}
+
+.ds-message-card__media img {
+  display: block;
+  width: 100%;
+}
+
+/* ============================================
+   BODY
+   ============================================ */
+
+.ds-message-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xs);
+  padding: var(--padding-sm-md) var(--padding-md);
+}
+
+.ds-message-card__title-row {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xs);
+  min-width: 0;
+}
+
+.ds-message-card__icon {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  color: var(--color-icon-primary);
+}
+
+.ds-message-card__icon .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+}
+
+.ds-message-card__title {
+  min-width: 0;
+  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);
+  color: var(--color-text-primary);
+}
+
+.ds-message-card__meta {
+  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-message-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);
+}
+
+/* ============================================
+   ACTIONS
+   Mirrors ToolCall's actions footer exactly, so
+   approvals on a tool call and link actions on
+   a card read as the same row.
+   ============================================ */
+
+.ds-message-card__actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--gap-sm);
+  padding: var(--padding-sm) var(--padding-sm-md);
+  border-top: var(--border-xs) solid var(--color-divider);
+  background-color: var(--color-bg-container-secondary);
+}

package/components/MessageCard/MessageCard.d.ts

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+/** Props owned by MessageCard itself — everything else falls through to the root element. */
+type MessageCardOwnProps = {
+    /** Card heading. */
+    title?: string;
+    /** One or two lines under the title. */
+    description?: string;
+    /** Top media slot — an image or chart, rendered flush to the card edges (the card clips it). */
+    media?: React.ReactNode;
+    /** Small leading icon beside the title — a Material Symbol name, or any custom element. */
+    icon?: string | React.ReactNode;
+    /** Free-text metadata line, e.g. a domain or date, so callers keep their own formatting. */
+    meta?: string;
+    /**
+     * Action row rendered in a footer outside the body — small secondary or
+     * tertiary Buttons, mirroring ToolCall's actions footer.
+     */
+    actions?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Body content between the description and the footer — rich content, a Prose block, a DocumentChip row. */
+    children?: React.ReactNode;
+};
+export interface MessageCardProps extends MessageCardOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof MessageCardOwnProps> {
+}
+/**
+ * MessageCard is a structured rich-content card embedded in a chat message:
+ * media, title, body, and an actions row, for link previews, search results,
+ * and booking-style rich responses inside an assistant turn or bubble.
+ *
+ * It is not the navigation Card — this is content furniture inside a
+ * conversation, sized by the bubble or turn that holds it.
+ */
+export declare const MessageCard: React.ForwardRefExoticComponent<MessageCardProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/MessageCard/MessageCard.js

@@ -0,0 +1,28 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import "./MessageCard.css";
+import "../../fonts/material-symbols.css";
+const MessageCard = React.forwardRef(
+  ({ title, description, media, icon, meta, actions, className = "", children, ...rest }, ref) => {
+    const baseClass = "ds-message-card";
+    const classes = [baseClass, className].filter(Boolean).join(" ");
+    const hasBody = Boolean(title || icon || meta || description || children);
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      media && /* @__PURE__ */ jsx("div", { className: `${baseClass}__media`, children: media }),
+      hasBody && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__body`, children: [
+        (title || icon) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__title-row`, 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 }),
+          title && /* @__PURE__ */ jsx("span", { className: `${baseClass}__title`, children: title })
+        ] }),
+        meta && /* @__PURE__ */ jsx("span", { className: `${baseClass}__meta`, children: meta }),
+        description && /* @__PURE__ */ jsx("p", { className: `${baseClass}__description`, children: description }),
+        children
+      ] }),
+      actions && /* @__PURE__ */ jsx("div", { className: `${baseClass}__actions`, children: actions })
+    ] });
+  }
+);
+MessageCard.displayName = "MessageCard";
+export {
+  MessageCard
+};