@robr0/design-system 0.7.0 → 0.8.0

package/README.md

@@ -18,7 +18,7 @@ The **live site** is the portfolio built on the design system. **Storybook** is
 | Part | Description |
 |---|---|
 | **Portfolio website** (`/website`) | Next.js app with case studies, work history, writing, and about pages, all built exclusively with the design system components below. **[Live site →](https://robertritacca.com/)** |
-| **Design system** (`/src`) | <!-- component-count -->79<!-- /component-count --> React components, a three-tier token architecture, dark mode, a WebGL2 ambient background that themes itself from your tokens, and a full documentation site. Built to production standards. **[Storybook →](https://design-system-iota-one.vercel.app/?path=/docs/robr0-ds--docs)** |
+| **Design system** (`/src`) | <!-- component-count -->84<!-- /component-count --> React components, a three-tier token architecture, dark mode, a WebGL2 ambient background that themes itself from your tokens, and a full documentation site. Built to production standards. **[Storybook →](https://design-system-iota-one.vercel.app/?path=/docs/robr0-ds--docs)** |
 | **AI layer** (`ai` components in `/src`, chat in `/website`, `/evals`) | A site-wide chat that answers questions about the work: built from the library's own `ai` components, grounded in a corpus generated from the site's published content, and scored by a golden-set eval. |
 
 ---
@@ -28,7 +28,7 @@ The **live site** is the portfolio built on the design system. **Storybook** is
 ### Components
 
 <!-- component-list:start -->
-Accordion · Agent status · AI button · Alert · Alert dialog · App layout · App sidebar · Avatar · Badge · Breadcrumb · Button · Button group · Card · Carousel · Chart · Chat header · Chat marker · Chat message · Chat thread · Checkbox · Chip · Circular button · Code block · Colour picker · Combobox · Command palette · Composer · Contact card · Context menu · Contribution graph · Date input · Date picker · Dialog · Divider · Document chip · Drawer · Dropdown · Dropdown menu · Empty state · Entity card · Field · Figure · File input · Input · Instructions · Interrupt card · Kbd · Link list · Message actions · Message card · Navigation · Nav list · Pagination · Popover · Progress bar · Prompt suggestions · Prose · Quote · Radio button · Reasoning · Section title · Segmented control · Selection card · Shader field · Skeleton · Slider · Source chip · Spinner · Stat · Swatch · Table · Tabs · Textarea · Timeline · Toast · Toggle group · Toggle switch · Tool call · Tooltip
+Accordion · Agent plan · Agent status · AI button · Alert · Alert dialog · App layout · App sidebar · Avatar · Badge · Breadcrumb · Button · Button group · Card · Carousel · Chart · Chat header · Chat marker · Chat message · Chat thread · Checkbox · Chip · Circular button · Code block · Colour picker · Combobox · Command palette · Composer · Contact card · Context menu · Contribution graph · Data table · Date input · Date picker · Dialog · Divider · Document chip · Drawer · Dropdown · Dropdown menu · Empty state · Entity card · Event calendar · Field · Figure · File input · Input · Instructions · Interrupt card · Kbd · Link list · Message actions · Message card · Model picker · Navigation · Nav list · Notification centre · Pagination · Popover · Progress bar · Prompt suggestions · Prose · Quote · Radio button · Reasoning · Section title · Segmented control · Selection card · Shader field · Skeleton · Slider · Source chip · Spinner · Stat · Swatch · Table · Tabs · Textarea · Timeline · Toast · Toggle group · Toggle switch · Tool call · Tooltip
 <!-- component-list:end -->
 
 ### Ambient background
@@ -46,7 +46,7 @@ const [status, setStatus] = useState<ShaderFieldStatus>('pending');
 </div>
 ```
 
-Seven parameters describe the look, and a composition is a table of token names with positions and drift periods, so a negative weight cuts a shadow through the field instead of adding light to it.
+Eight parameters describe the look, and a composition is a table of token names with positions and drift periods, so a negative weight cuts a shadow through the field instead of adding light to it.
 
 It asks two things of you, both deliberate. It fills a positioned ancestor you provide, because where a background sits is a layout decision rather than a rendering one. And it never decides what to paint instead of itself: it reports `pending`, `active` or `unavailable`, and one fallback covers every way it can fail (no WebGL2, a blocked or lost GPU context, a renderer that stalls before its first frame, or `enabled={false}` as a kill switch). `pending` is the state worth handling. Paint neither layer while the context comes up, or the swap a frame later reads as two backgrounds loading in sequence.
 

package/components/AgentPlan/AgentPlan.css

@@ -0,0 +1,231 @@
+/* ============================================
+   AGENT PLAN COMPONENT
+   A collapsible checklist of an agent's task:
+   a progress header and one row per step.
+
+   The container stays neutral, like ToolCall —
+   colour lives in each step's indicator, so a
+   long plan reads as a list rather than a wall
+   of tinted rows. A thin connector ties the
+   indicators into one path through the task.
+   ============================================ */
+
+.ds-agent-plan {
+  display: flex;
+  flex-direction: column;
+  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;
+}
+
+/* ============================================
+   HEADER
+   ============================================ */
+
+.ds-agent-plan__header {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
+  width: 100%;
+  padding: var(--padding-xs) var(--padding-sm-md);
+  background: none;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-agent-plan__header:hover {
+  background-color: var(--color-bg-container-secondary);
+}
+
+.ds-agent-plan__header:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+}
+
+.ds-agent-plan__title {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-text-primary);
+  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);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+}
+
+.ds-agent-plan__count {
+  flex: none;
+  color: var(--color-text-tertiary);
+  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;
+  white-space: nowrap;
+}
+
+.ds-agent-plan__chevron {
+  --icon-size: var(--icon-size-sm);
+
+  flex: none;
+  color: var(--color-icon-secondary);
+  transition: transform var(--motion-duration-slow) var(--motion-ease-standard);
+}
+
+.ds-agent-plan--open .ds-agent-plan__chevron {
+  transform: rotate(180deg);
+}
+
+/* ============================================
+   PANEL
+   Same grid-rows collapse as ToolCall, so the
+   list opens and closes without measuring.
+   ============================================ */
+
+.ds-agent-plan__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-agent-plan--open .ds-agent-plan__panel {
+  grid-template-rows: 1fr;
+  visibility: visible;
+}
+
+.ds-agent-plan__content {
+  overflow: hidden;
+  min-height: 0;
+}
+
+.ds-agent-plan--open .ds-agent-plan__content {
+  border-top: var(--border-xs) solid var(--color-divider);
+}
+
+/* ============================================
+   STEPS
+   ============================================ */
+
+.ds-agent-plan__steps {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: var(--padding-sm) var(--padding-sm-md);
+  list-style: none;
+}
+
+.ds-agent-plan__step {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--gap-sm);
+  padding: var(--padding-xxs) 0;
+}
+
+/* Connector — a thin line linking each indicator to the next */
+.ds-agent-plan__step:not(:last-child)::before {
+  content: '';
+  position: absolute;
+  top: calc(var(--padding-xxs) + var(--icon-size-sm));
+  bottom: calc(-1 * var(--padding-xxs));
+  left: calc(var(--icon-size-sm) / 2);
+  width: var(--border-xs);
+  background-color: var(--color-divider);
+}
+
+.ds-agent-plan__indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  color: var(--color-icon-secondary);
+}
+
+.ds-agent-plan__indicator .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+}
+
+.ds-agent-plan__step-body {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  /* Align the first text line with the indicator's optical centre */
+  padding-top: calc((var(--icon-size-sm) - var(--font-paragraph-sm-line-height)) / 2);
+}
+
+.ds-agent-plan__label {
+  color: var(--color-text-primary);
+  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-agent-plan__detail {
+  color: var(--color-text-tertiary);
+  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);
+}
+
+/* ============================================
+   STEP STATES
+   ============================================ */
+
+.ds-agent-plan__step--completed .ds-agent-plan__indicator {
+  color: var(--color-status-positive-text);
+}
+
+.ds-agent-plan__step--completed .ds-agent-plan__label {
+  color: var(--color-text-tertiary);
+}
+
+.ds-agent-plan__step--active .ds-agent-plan__indicator {
+  color: var(--color-status-info-text);
+}
+
+.ds-agent-plan__step--active .ds-agent-plan__label {
+  font-family: var(--font-paragraph-sm-em-family);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+}
+
+.ds-agent-plan__step--failed .ds-agent-plan__indicator {
+  color: var(--color-status-error-text);
+}
+
+.ds-agent-plan__step--failed .ds-agent-plan__label {
+  color: var(--color-status-error-text);
+}
+
+/* ============================================
+   SCREEN READER TEXT
+   Status is colour + glyph for sighted users;
+   this span announces it.
+   ============================================ */
+
+.ds-agent-plan__sr {
+  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/AgentPlan/AgentPlan.d.ts

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+export type AgentPlanStepStatus = 'pending' | 'active' | 'completed' | 'failed';
+export interface AgentPlanStep {
+    /** What this step does, in one line. */
+    label: string;
+    /** Where the step has got to. Defaults to `pending`. */
+    status?: AgentPlanStepStatus;
+    /** Optional supporting line under the label, e.g. the file it touched. */
+    detail?: string;
+}
+/** Props owned by AgentPlan itself — everything else falls through to the root element. */
+type AgentPlanOwnProps = {
+    /** The plan, in order. Step status drives each row's indicator and colour. */
+    steps: AgentPlanStep[];
+    /**
+     * Header text. Left unset, it is computed from the steps —
+     * "3 steps left", or "All steps complete" once everything is done.
+     */
+    title?: string;
+    /** Open state for controlled use. Pair with `onOpenChange`. */
+    open?: boolean;
+    /** Open state for uncontrolled use. */
+    defaultOpen?: boolean;
+    /** Fires whenever the step list opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface AgentPlanProps extends AgentPlanOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof AgentPlanOwnProps> {
+}
+/**
+ * AgentPlan shows the steps an agent intends to take and where it has got to:
+ * a collapsible checklist with one row per step, a live progress readout in
+ * the header, and completed work ticked off as the run advances.
+ *
+ * It complements the other agent primitives — AgentStatus says what is
+ * happening right now, ToolCall records one action, AgentPlan holds the
+ * whole task.
+ */
+export declare const AgentPlan: React.ForwardRefExoticComponent<AgentPlanProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/AgentPlan/AgentPlan.js

@@ -0,0 +1,99 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useId, useState, useCallback } from "react";
+import { Spinner } from "../Spinner/Spinner.js";
+import "./AgentPlan.css";
+import "../../fonts/material-symbols.css";
+const STEP_ICONS = {
+  pending: "circle",
+  completed: "check_circle",
+  failed: "error"
+};
+const STEP_STATUS_TEXT = {
+  pending: "Not started",
+  active: "In progress",
+  completed: "Completed",
+  failed: "Failed"
+};
+const AgentPlan = React.forwardRef(
+  ({
+    steps,
+    title,
+    open,
+    defaultOpen = true,
+    onOpenChange,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-agent-plan";
+    const id = useId();
+    const panelId = `${id}-panel`;
+    const triggerId = `${id}-trigger`;
+    const isControlled = open !== void 0;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const isOpen = isControlled ? open : uncontrolledOpen;
+    const toggle = useCallback(() => {
+      const next = !isOpen;
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    }, [isOpen, isControlled, onOpenChange]);
+    const total = steps.length;
+    const completed = steps.filter((step) => step.status === "completed").length;
+    const remaining = total - completed;
+    const resolvedTitle = title ?? (total > 0 && remaining === 0 ? "All steps complete" : `${remaining} step${remaining === 1 ? "" : "s"} left`);
+    const classes = [baseClass, isOpen ? `${baseClass}--open` : "", className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          id: triggerId,
+          className: `${baseClass}__header`,
+          "aria-expanded": isOpen,
+          "aria-controls": panelId,
+          onClick: toggle,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__title`, children: resolvedTitle }),
+            total > 0 && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__count`, children: [
+              completed,
+              "/",
+              total
+            ] }),
+            /* @__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: /* @__PURE__ */ jsx("ol", { className: `${baseClass}__steps`, children: steps.map((step, index) => {
+            const status = step.status ?? "pending";
+            return /* @__PURE__ */ jsxs(
+              "li",
+              {
+                className: `${baseClass}__step ${baseClass}__step--${status}`,
+                "aria-current": status === "active" ? "step" : void 0,
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: `${baseClass}__indicator`, "aria-hidden": "true", children: status === "active" ? /* @__PURE__ */ jsx(Spinner, { size: "sm", variant: "inherit" }) : /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: STEP_ICONS[status] }) }),
+                  /* @__PURE__ */ jsxs("span", { className: `${baseClass}__step-body`, children: [
+                    /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: step.label }),
+                    step.detail && /* @__PURE__ */ jsx("span", { className: `${baseClass}__detail`, children: step.detail })
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr`, children: STEP_STATUS_TEXT[status] })
+                ]
+              },
+              index
+            );
+          }) }) })
+        }
+      )
+    ] });
+  }
+);
+AgentPlan.displayName = "AgentPlan";
+export {
+  AgentPlan
+};

package/components/DataTable/DataTable.css

@@ -0,0 +1,105 @@
+/* ============================================
+   DATA TABLE COMPONENT
+   The wired table block: toolbar with search
+   and filter slot, sortable headers, selection,
+   pagination footer. Row and cell styling all
+   comes from the underlying Table — this file
+   only styles the chrome around it.
+   ============================================ */
+
+.ds-data-table {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
+  width: 100%;
+}
+
+/* ============================================
+   TOOLBAR
+   ============================================ */
+
+.ds-data-table__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-sm);
+  flex-wrap: wrap;
+}
+
+.ds-data-table__filters {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
+  flex-wrap: wrap;
+}
+
+/* The search field sits at the end of the toolbar even with no filters */
+.ds-data-table__search {
+  margin-left: auto;
+  max-width: 240px;
+}
+
+/* ============================================
+   SORTABLE HEADERS
+   The button fills the header cell so the whole
+   label is the click target.
+   ============================================ */
+
+.ds-data-table__sort {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-xxs);
+  padding: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+}
+
+.ds-data-table__sort:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+  border-radius: var(--radius-xxs);
+}
+
+.ds-data-table__sort-icon {
+  --icon-size: var(--icon-size-sm);
+
+  color: var(--color-icon-secondary);
+  opacity: 0;
+  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-data-table__sort:hover .ds-data-table__sort-icon,
+.ds-data-table__sort:focus-visible .ds-data-table__sort-icon,
+.ds-data-table__sort-icon--active {
+  opacity: 1;
+}
+
+.ds-data-table__sort-icon--active {
+  color: var(--color-text-primary);
+}
+
+/* ============================================
+   FOOTER
+   ============================================ */
+
+.ds-data-table__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-sm);
+  flex-wrap: wrap;
+}
+
+.ds-data-table__count {
+  color: var(--color-text-tertiary);
+  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;
+}

package/components/DataTable/DataTable.d.ts

@@ -0,0 +1,81 @@
+import { default as React } from 'react';
+export interface DataTableColumn {
+    /** Unique column identifier, used as the key into each row's values. */
+    key: string;
+    /** Header label displayed in the column header. */
+    header: React.ReactNode;
+    /** Whether clicking this header sorts by the column. */
+    sortable?: boolean;
+    /** Optional column width (CSS value like '200px', '30%', 'auto'). */
+    width?: string;
+    /** Text alignment for cells in this column. */
+    align?: 'left' | 'center' | 'right';
+    /** Render the cell for a row; defaults to the row's raw value for this key. */
+    render?: (row: DataTableRow) => React.ReactNode;
+}
+export interface DataTableRow {
+    /** Unique row identifier. */
+    id: string;
+    /** Raw values keyed by column key — used for sorting, searching, and default rendering. */
+    values: Record<string, string | number | null | undefined>;
+}
+export interface DataTableSort {
+    /** The column being sorted. */
+    key: string;
+    /** Sort direction. */
+    direction: 'asc' | 'desc';
+}
+/** Props owned by DataTable itself — everything else falls through to the root element. */
+type DataTableOwnProps = {
+    /** Column definitions. */
+    columns: DataTableColumn[];
+    /** Row data, as raw values the table can sort and search. */
+    rows: DataTableRow[];
+    /** Rows per page. Setting this turns on the built-in pagination. */
+    pageSize?: number;
+    /** Adds a checkbox column with a select-all header. */
+    selectable?: boolean;
+    /** Selected row ids for controlled use. Pair with `onSelectionChange`. */
+    selectedIds?: string[];
+    /** Initially selected row ids for uncontrolled use. */
+    defaultSelectedIds?: string[];
+    /** Fires with the full list of selected row ids after every change. */
+    onSelectionChange?: (ids: string[]) => void;
+    /** Sort state for controlled use. Pair with `onSortChange`; `null` means unsorted. */
+    sort?: DataTableSort | null;
+    /** Initial sort state for uncontrolled use. */
+    defaultSort?: DataTableSort;
+    /** Fires with the new sort state — `null` when a third click clears the sort. */
+    onSortChange?: (sort: DataTableSort | null) => void;
+    /** Shows the built-in search field, matching against every column's raw value. */
+    searchable?: boolean;
+    /** Placeholder for the search field. */
+    searchPlaceholder?: string;
+    /** Slot beside the search field for consumer-owned filter controls. */
+    toolbar?: React.ReactNode;
+    /** Visual size, passed through to the underlying Table. */
+    size?: 'default' | 'compact';
+    /** Alternating row backgrounds, passed through to the underlying Table. */
+    striped?: boolean;
+    /** Accessible caption for the underlying table (visually hidden). */
+    caption?: string;
+    /** What to render when no rows match — defaults to a built-in empty state. */
+    emptyState?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface DataTableProps extends DataTableOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof DataTableOwnProps> {
+}
+/**
+ * DataTable is the wired version of Table: sorting on header click, a search
+ * field, row selection with a select-all header, client-side pagination, and
+ * an empty state — assembled from Table, Pagination, Checkbox, Input and
+ * EmptyState so a working data view is one component, not an afternoon of
+ * plumbing.
+ *
+ * Rows carry raw values rather than rendered nodes; a column's `render`
+ * turns them into cells when text isn't enough. For server-driven data,
+ * control `sort` and slot your own filters into `toolbar`.
+ */
+export declare const DataTable: React.ForwardRefExoticComponent<DataTableProps & React.RefAttributes<HTMLDivElement>>;
+export {};