@robr0/design-system 0.8.0 → 0.10.0

package/components/CodeDiff/CodeDiff.css

@@ -0,0 +1,175 @@
+/* ============================================
+   CODE DIFF COMPONENT
+   Unified diff view: added, removed, and context
+   lines with old/new line number gutters.
+   Note: the system typeface is Nunito Sans;
+   code is the one sanctioned monospace context.
+   ============================================ */
+
+.ds-codediff {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  border-radius: var(--radius-md);
+  background-color: var(--color-bg-container-primary);
+  overflow: hidden;
+}
+
+/* ============================================
+   HEADER — filename + additions/deletions stats
+   ============================================ */
+
+.ds-codediff__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-sm);
+  padding: var(--padding-xs) var(--padding-md);
+  border-bottom: var(--border-xs) solid var(--color-bg-container-border);
+  flex-shrink: 0;
+}
+
+.ds-codediff__filename {
+  font-family: var(--font-family-code);
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+  color: var(--color-text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-codediff__stats {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-xs);
+  flex-shrink: 0;
+  font-family: var(--font-paragraph-sm-em-family);
+  font-size: var(--font-paragraph-sm-em-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  line-height: var(--font-paragraph-sm-em-line-height);
+}
+
+.ds-codediff__stat--add {
+  color: var(--color-status-positive-text);
+}
+
+.ds-codediff__stat--remove {
+  color: var(--color-status-error-text);
+}
+
+/* ============================================
+   SCROLL CONTAINER
+   Long lines scroll horizontally inside the
+   component; the tab stop makes that scroll
+   keyboard-reachable.
+   ============================================ */
+
+.ds-codediff__scroll {
+  overflow-x: auto;
+}
+
+.ds-codediff__scroll:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+}
+
+/* ============================================
+   LINES
+   ============================================ */
+
+/* width: max-content + min-width: 100% so row tints
+   span the full width of the longest line, not just
+   the visible scrollport */
+.ds-codediff__lines {
+  list-style: none;
+  margin: 0;
+  padding: var(--padding-xs) 0;
+  width: max-content;
+  min-width: 100%;
+  font-family: var(--font-family-code);
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+  color: var(--color-text-primary);
+}
+
+.ds-codediff__line {
+  display: flex;
+  align-items: baseline;
+  /* keeps blank diff lines from collapsing to zero height */
+  min-height: var(--font-paragraph-sm-line-height);
+}
+
+/* ============================================
+   GUTTERS & MARKER
+   Fixed-width columns in the monospace metric so
+   rows align; excluded from text selection so a
+   copied diff carries only the code.
+   ============================================ */
+
+.ds-codediff__gutter {
+  flex-shrink: 0;
+  min-width: 4ch;
+  padding: 0 var(--padding-xxs);
+  text-align: right;
+  color: var(--color-text-tertiary);
+  user-select: none;
+}
+
+.ds-codediff__marker {
+  flex-shrink: 0;
+  width: 2ch;
+  text-align: center;
+  user-select: none;
+}
+
+.ds-codediff__content {
+  white-space: pre;
+  padding-right: var(--padding-md);
+}
+
+/* ============================================
+   LINE VARIANTS
+   Added rows tint with the positive status
+   background, removed with the error one.
+   ============================================ */
+
+.ds-codediff__line--add {
+  background-color: var(--color-status-positive-bg);
+}
+
+.ds-codediff__line--add .ds-codediff__marker {
+  color: var(--color-status-positive-text);
+}
+
+.ds-codediff__line--remove {
+  background-color: var(--color-status-error-bg);
+}
+
+.ds-codediff__line--remove .ds-codediff__marker {
+  color: var(--color-status-error-text);
+}
+
+.ds-codediff__line--hunk {
+  background-color: var(--color-bg-container-secondary);
+  color: var(--color-text-tertiary);
+}
+
+/* ============================================
+   SCREEN-READER-ONLY TEXT
+   Announces the change type; the marker column
+   itself is decorative (aria-hidden).
+   ============================================ */
+
+.ds-codediff__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/CodeDiff/CodeDiff.d.ts

@@ -0,0 +1,58 @@
+import { default as React } from 'react';
+/** The kind of line a parsed diff row represents. */
+export type CodeDiffLineType = 'add' | 'remove' | 'context' | 'hunk';
+export interface CodeDiffLine {
+    /** Whether the line is an addition, a removal, unchanged context, or a hunk header */
+    type: CodeDiffLineType;
+    /** The line's text with its diff marker stripped (hunk headers keep the full `@@` line) */
+    content: string;
+    /** Line number in the old file, or null for additions and hunk headers */
+    oldLine: number | null;
+    /** Line number in the new file, or null for removals and hunk headers */
+    newLine: number | null;
+}
+export interface ParsedCodeDiff {
+    /** The diff's rows in order, with per-side line numbers computed */
+    lines: CodeDiffLine[];
+    /** Count of added lines */
+    additions: number;
+    /** Count of removed lines */
+    deletions: number;
+}
+/**
+ * Parse a unified-format diff body into typed lines with old/new line
+ * numbers. Lines starting with `+` are additions, `-` removals, `@@ … @@`
+ * hunk headers, and everything else context. File header lines (`+++`,
+ * `---`) and no-newline markers (``) carry no
+ * content and are skipped. A diff with no hunk headers is treated as one
+ * hunk starting at line 1.
+ */
+export declare function parseUnifiedDiff(diff: string): ParsedCodeDiff;
+/** Props owned by CodeDiff itself — everything else falls through to the root div. */
+type CodeDiffOwnProps = {
+    /**
+     * A unified-format diff body. Lines starting with `+` render as additions,
+     * `-` as removals, `@@ … @@` as hunk headers, everything else as context;
+     * `+++`/`---` file header lines are ignored. Without hunk headers the
+     * whole string is treated as one hunk starting at line 1.
+     */
+    diff: string;
+    /** Filename shown in a header bar above the diff, with an additions/deletions summary */
+    filename?: string;
+    /** Show the old and new line number gutters */
+    showLineNumbers?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface CodeDiffProps extends CodeDiffOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof CodeDiffOwnProps> {
+}
+/**
+ * CodeDiff component — unified diff view for code changes. Added lines tint
+ * with the positive status background, removed lines with the error one, and
+ * two gutters track old and new line numbers. Purely presentational: parsing
+ * happens in the exported `parseUnifiedDiff`, long lines scroll horizontally
+ * inside the block, and the change type is announced through visually hidden
+ * text while the marker column stays decorative.
+ */
+export declare const CodeDiff: React.ForwardRefExoticComponent<CodeDiffProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/CodeDiff/CodeDiff.js

@@ -0,0 +1,114 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React from "react";
+import "./CodeDiff.css";
+const HUNK_HEADER = /^@@\s+-(\d+)(?:,\d+)?\s+\+(\d+)(?:,\d+)?\s+@@/;
+function parseUnifiedDiff(diff) {
+  const rawLines = diff.replace(/\n$/, "").split("\n");
+  const lines = [];
+  let additions = 0;
+  let deletions = 0;
+  let oldLine = 1;
+  let newLine = 1;
+  for (const raw of rawLines) {
+    if (raw.startsWith("+++") || raw.startsWith("---") || raw.startsWith("\\")) {
+      continue;
+    }
+    const hunk = raw.match(HUNK_HEADER);
+    if (hunk) {
+      oldLine = parseInt(hunk[1], 10);
+      newLine = parseInt(hunk[2], 10);
+      lines.push({ type: "hunk", content: raw, oldLine: null, newLine: null });
+      continue;
+    }
+    if (raw.startsWith("+")) {
+      additions += 1;
+      lines.push({ type: "add", content: raw.slice(1), oldLine: null, newLine });
+      newLine += 1;
+      continue;
+    }
+    if (raw.startsWith("-")) {
+      deletions += 1;
+      lines.push({ type: "remove", content: raw.slice(1), oldLine, newLine: null });
+      oldLine += 1;
+      continue;
+    }
+    lines.push({
+      type: "context",
+      content: raw.startsWith(" ") ? raw.slice(1) : raw,
+      oldLine,
+      newLine
+    });
+    oldLine += 1;
+    newLine += 1;
+  }
+  return { lines, additions, deletions };
+}
+const CHANGE_LABELS = {
+  add: "Added line:",
+  remove: "Removed line:"
+};
+const CodeDiff = React.forwardRef(
+  ({ diff, filename, showLineNumbers = true, className = "", ...rest }, ref) => {
+    const baseClass = "ds-codediff";
+    const { lines, additions, deletions } = parseUnifiedDiff(diff);
+    const classes = [baseClass, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      filename && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
+        /* @__PURE__ */ jsx("code", { className: `${baseClass}__filename`, children: filename }),
+        /* @__PURE__ */ jsxs("span", { className: `${baseClass}__stats`, children: [
+          /* @__PURE__ */ jsxs("span", { className: `${baseClass}__stat ${baseClass}__stat--add`, children: [
+            "+",
+            additions,
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr-only`, children: " added" })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: `${baseClass}__stat ${baseClass}__stat--remove`, children: [
+            "-",
+            deletions,
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr-only`, children: " removed" })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${baseClass}__scroll`,
+          tabIndex: 0,
+          role: "region",
+          "aria-label": filename ? `Code diff: ${filename}` : "Code diff",
+          children: /* @__PURE__ */ jsx("ol", { className: `${baseClass}__lines`, children: lines.map((line, index) => {
+            const changeLabel = CHANGE_LABELS[line.type];
+            return /* @__PURE__ */ jsxs(
+              "li",
+              {
+                className: [
+                  `${baseClass}__line`,
+                  line.type === "add" ? `${baseClass}__line--add` : "",
+                  line.type === "remove" ? `${baseClass}__line--remove` : "",
+                  line.type === "hunk" ? `${baseClass}__line--hunk` : ""
+                ].filter(Boolean).join(" "),
+                children: [
+                  showLineNumbers && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("span", { className: `${baseClass}__gutter`, "aria-hidden": "true", children: line.oldLine ?? "" }),
+                    /* @__PURE__ */ jsx("span", { className: `${baseClass}__gutter`, "aria-hidden": "true", children: line.newLine ?? "" })
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: `${baseClass}__marker`, "aria-hidden": "true", children: line.type === "add" ? "+" : line.type === "remove" ? "-" : "" }),
+                  changeLabel && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__sr-only`, children: [
+                    changeLabel,
+                    " "
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: `${baseClass}__content`, children: line.content })
+                ]
+              },
+              index
+            );
+          }) })
+        }
+      )
+    ] });
+  }
+);
+CodeDiff.displayName = "CodeDiff";
+export {
+  CodeDiff,
+  parseUnifiedDiff
+};

package/components/ColorPicker/ColorPicker.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useState, useRef, useEffect, useCallback } from "react";
 import { Field } from "../Field/Field.js";

package/components/Combobox/Combobox.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useState, useRef, useId, useMemo, useCallback, useEffect } from "react";
 import { Field } from "../Field/Field.js";

package/components/CommandPalette/CommandPalette.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useRef, useId, useSyncExternalStore, useCallback, useMemo, useEffect } from "react";
 import ReactDOM from "react-dom";

package/components/Composer/Composer.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useRef, useState, useLayoutEffect } from "react";
 import { CircularButton } from "../CircularButton/CircularButton.js";

package/components/ContactCard/ContactCard.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import "./ContactCard.css";
 import "../../fonts/material-symbols.css";

package/components/ContextMenu/ContextMenu.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useState, useRef, useCallback, useEffect, useLayoutEffect } from "react";
 import "./ContextMenu.css";

package/components/DataTable/DataTable.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React, { useState, useMemo } from "react";
 import { Table } from "../Table/Table.js";

package/components/DateInput/DateInput.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Field } from "../Field/Field.js";

package/components/DatePicker/DatePicker.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useMemo, useState } from "react";
 import "./DatePicker.css";

package/components/Dialog/Dialog.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useRef, useId, useSyncExternalStore, useEffect } from "react";
 import ReactDOM from "react-dom";

package/components/Drawer/Drawer.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useRef, useId, useSyncExternalStore, useEffect } from "react";
 import ReactDOM from "react-dom";

package/components/Dropdown/Dropdown.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useState, useRef, useCallback, useEffect } from "react";
 import { Field } from "../Field/Field.js";

package/components/DropdownMenu/DropdownMenu.css

@@ -37,7 +37,7 @@
   left: 0;
   z-index: 50;
   min-width: 200px;
-  margin-top: var(--gap-xxs); /* 4px offset from trigger */
+  margin-top: var(--gap-xxs); /* 2px offset from trigger */
 
   /* Appearance — Figma: page/primary bg, input/border/primary, radius/md */
   background: var(--color-bg-page-primary);

package/components/DropdownMenu/DropdownMenu.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useState, useRef, useCallback, useEffect } from "react";
 import "./DropdownMenu.css";

package/components/EventCalendar/EventCalendar.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import React, { useMemo, useState } from "react";
 import "./EventCalendar.css";

package/components/Field/Field.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React, { useId } from "react";
 import { FieldContext } from "./FieldContext.js";

package/components/Field/FieldContext.js

@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 const FieldContext = React.createContext(null);
 const useField = () => React.useContext(FieldContext);

package/components/FileInput/FileInput.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useState, useRef, useId } from "react";
 import { Field } from "../Field/Field.js";

package/components/Input/Input.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Field } from "../Field/Field.js";

package/components/InterruptCard/InterruptCard.css

@@ -4,33 +4,25 @@
    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.
+   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-status-warning-text);
-  --ds-interrupt-card-border: var(--color-status-warning-border);
+  --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-xs) solid var(--ds-interrupt-card-border);
+  border: var(--border-xs) solid var(--color-bg-container-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
    ============================================ */
@@ -39,7 +31,7 @@
   display: flex;
   align-items: flex-start;
   gap: var(--gap-sm);
-  padding: var(--padding-sm) var(--padding-sm-md);
+  padding: var(--padding-sm-md) var(--padding-md);
 }
 
 .ds-interrupt-card__icon {
@@ -88,7 +80,7 @@
    ============================================ */
 
 .ds-interrupt-card__detail {
-  padding: 0 var(--padding-sm-md) var(--padding-sm);
+  padding: 0 var(--padding-md) var(--padding-sm-md);
 }
 
 .ds-interrupt-card__detail > :first-child {
@@ -111,9 +103,8 @@
   align-items: center;
   justify-content: flex-end;
   gap: var(--gap-sm);
-  padding: var(--padding-sm) var(--padding-sm-md);
+  padding: var(--padding-sm-md) var(--padding-md);
   border-top: var(--border-xs) solid var(--color-divider);
-  background-color: var(--color-bg-container-secondary);
 }
 
 /* ============================================
@@ -127,9 +118,8 @@
   align-items: center;
   justify-content: flex-end;
   gap: var(--gap-xs);
-  padding: var(--padding-sm) var(--padding-sm-md);
+  padding: var(--padding-sm-md) var(--padding-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);

package/components/InterruptCard/InterruptCard.d.ts

@@ -22,8 +22,7 @@ type InterruptCardOwnProps = {
     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.
+     * 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). */
@@ -43,10 +42,10 @@ export interface InterruptCardProps extends InterruptCardOwnProps, Omit<React.Co
  * 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.
+ * 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.

package/components/MessageCard/MessageCard.css

@@ -106,7 +106,6 @@
   align-items: center;
   justify-content: flex-end;
   gap: var(--gap-sm);
-  padding: var(--padding-sm) var(--padding-sm-md);
+  padding: var(--padding-sm-md) var(--padding-md);
   border-top: var(--border-xs) solid var(--color-divider);
-  background-color: var(--color-bg-container-secondary);
 }

package/components/ModelPicker/ModelPicker.css

@@ -76,7 +76,9 @@
   min-width: 260px;
   display: flex;
   flex-direction: column;
-  background-color: var(--color-bg-container-primary);
+  /* Page background, not container: the container fill is semi-transparent
+     in dark mode, and a floating panel must not show text through itself */
+  background-color: var(--color-bg-page-primary);
   border: var(--border-xs) solid var(--color-bg-container-border);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-floating);

package/components/ModelPicker/ModelPicker.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useId, useRef, useState, useCallback, useEffect } from "react";
 import "./ModelPicker.css";

package/components/NavList/NavList.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React, { useId, useState } from "react";
 import { Button } from "../Button/Button.js";

package/components/NotificationCenter/NotificationCenter.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useState } from "react";
 import { EmptyState } from "../EmptyState/EmptyState.js";