@mcp-b/react-components 0.12.0 → 0.14.0

package/dist/icons-CUCz_Sft.d.ts

@@ -0,0 +1,210 @@
+import { LucideProps } from "lucide-react";
+
+//#region src/components/_internal/icons.d.ts
+/**
+ * The design system's single icon adapter.
+ *
+ * Lucide supplies the artwork while this adapter owns the library-wide optical
+ * defaults and decorative semantics. Keeping the existing names here lets
+ * components share one icon language without coupling their public APIs to an
+ * icon vendor.
+ */
+type IconProps = Omit<LucideProps, "ref">;
+declare const ChevronRightIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const ChevronDownIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const ChevronLeftIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const CheckIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const XIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const PencilIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const CopyIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const EyeIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const EyeOffIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const FolderIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const FolderOpenIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const FileIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const PaperclipIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const MicrophoneIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const StopIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const PlusIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const MinusIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const PlayIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const PauseIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const SquareIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const ArrowLeftIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const ArrowRightIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const ArrowDownIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const ArrowUpIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const DownloadIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const RefreshIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const DotIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const EllipsisIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare function SpinnerIcon({
+  className,
+  size,
+  strokeWidth,
+  ...props
+}: IconProps): import("react").JSX.Element;
+declare const SearchIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const SidebarIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const TerminalIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const LinkIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const WarningIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const WrenchIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const InfoIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const ImageIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const MonitorIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const MaximizeIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+//#endregion
+export { PlusIcon as A, XIcon as B, MicrophoneIcon as C, PauseIcon as D, PaperclipIcon as E, SquareIcon as F, StopIcon as I, TerminalIcon as L, SearchIcon as M, SidebarIcon as N, PencilIcon as O, SpinnerIcon as P, WarningIcon as R, MaximizeIcon as S, MonitorIcon as T, FolderOpenIcon as _, CheckIcon as a, InfoIcon as b, ChevronRightIcon as c, DownloadIcon as d, EllipsisIcon as f, FolderIcon as g, FileIcon as h, ArrowUpIcon as i, RefreshIcon as j, PlayIcon as k, CopyIcon as l, EyeOffIcon as m, ArrowLeftIcon as n, ChevronDownIcon as o, EyeIcon as p, ArrowRightIcon as r, ChevronLeftIcon as s, ArrowDownIcon as t, DotIcon as u, IconProps as v, MinusIcon as w, LinkIcon as x, ImageIcon as y, WrenchIcon as z };

package/dist/styles/accessibility.css

@@ -0,0 +1,14 @@
+/* Accessibility overrides intentionally come after component styles so system
+ * colors and keyboard focus remain visible even when a component customizes
+ * its normal-mode outline or box shadow. */
+@media (forced-colors: active) {
+  :where(:focus-visible) {
+    outline: var(--sigvelo-focus-width) solid Highlight;
+    outline-offset: var(--sigvelo-focus-offset);
+  }
+
+  :where([data-disabled], :disabled) {
+    border-color: GrayText;
+    color: GrayText;
+  }
+}

package/dist/styles/accordion.css

@@ -18,13 +18,13 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 0.75rem;
+  gap: var(--sigvelo-recipe-control-gap);
   inline-size: 100%;
-  min-block-size: var(--sigvelo-control-height-md);
-  padding-block: 1rem;
-  padding-inline: 0.5rem;
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.9375rem;
+  min-block-size: var(--sigvelo-recipe-control-height);
+  padding-block: var(--sigvelo-spacing-2);
+  padding-inline: var(--sigvelo-recipe-control-padding-inline);
+  font-family: inherit;
+  font-size: var(--sigvelo-recipe-control-font-size);
   font-weight: var(--sigvelo-font-weight-semibold);
   text-align: start;
   color: var(--sigvelo-color-text);
@@ -43,9 +43,7 @@
 
 .accordion__trigger:focus-visible {
   outline: none;
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px var(--sigvelo-color-focus);
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
 }
 
 .accordion__trigger:is(:disabled, [data-disabled]) {
@@ -53,69 +51,31 @@
   cursor: not-allowed;
 }
 
-.accordion__trigger-text {
-  flex: 1;
-  min-inline-size: 0;
-  overflow-wrap: break-word;
-}
-
-.accordion__icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 auto;
-  inline-size: 1.25rem;
-  block-size: 1.25rem;
-  color: var(--sigvelo-color-text-muted);
-  transition:
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    transform var(--sigvelo-duration-medium) var(--sigvelo-ease-emphasized);
-}
-
-.accordion__item[data-open] .accordion__icon {
-  color: var(--sigvelo-color-text);
-  transform: rotate(180deg);
-}
-
 .accordion__panel {
+  block-size: var(--accordion-panel-height);
   overflow: hidden;
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.875rem;
+  font-family: inherit;
+  font-size: var(--sigvelo-text-sm);
   line-height: 1.625;
   color: var(--sigvelo-color-text-muted);
+  transition:
+    block-size var(--sigvelo-duration-medium) var(--sigvelo-ease-emphasized),
+    opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
-.accordion__panel[data-open] {
-  animation: accordion-expand var(--sigvelo-duration-medium) var(--sigvelo-ease-emphasized);
-}
-
+.accordion__panel[data-starting-style],
 .accordion__panel[data-ending-style] {
-  animation: accordion-collapse var(--sigvelo-duration-medium) var(--sigvelo-ease-accelerate);
+  block-size: 0;
+  opacity: 0;
 }
 
 .accordion__panel > * {
-  padding-block-end: 1rem;
-  padding-inline: 0.5rem;
+  padding-block-end: var(--sigvelo-spacing-4);
+  padding-inline: var(--sigvelo-recipe-control-padding-inline);
 }
 
-@keyframes accordion-expand {
-  from {
-    block-size: 0;
-    opacity: 0;
-  }
-  to {
-    block-size: var(--accordion-panel-height);
-    opacity: 1;
-  }
-}
-
-@keyframes accordion-collapse {
-  from {
-    block-size: var(--accordion-panel-height);
-    opacity: 1;
-  }
-  to {
-    block-size: 0;
-    opacity: 0;
+@media (prefers-reduced-motion: reduce) {
+  .accordion__panel {
+    transition-duration: var(--sigvelo-duration-reduced);
   }
 }

package/dist/styles/activity.css

@@ -11,15 +11,15 @@
   max-width: 36rem;
   /* Whitespace separates the work log from message prose around it */
   margin-block: 0.5rem;
-  font-family: var(--sigvelo-font-sans);
+  font-family: inherit;
   color: var(--sigvelo-color-text);
 }
 
 .activity__trigger {
   display: flex;
   align-items: center;
-  gap: 0.375rem;
-  padding-block: 0.375rem;
+  gap: var(--sigvelo-spacing-1-5);
+  padding-block: var(--sigvelo-spacing-1-5);
   /* The fill bleeds past the text edge via the negative margin, so the label
      stays flush with the rows below instead of indenting on hover */
   padding-inline: 0.5rem;
@@ -31,7 +31,7 @@
      status, not content */
   color: color-mix(in oklab, var(--sigvelo-color-text-muted), transparent 20%);
   font-family: inherit;
-  font-size: 0.8125rem;
+  font-size: var(--sigvelo-text-compact);
   font-weight: var(--sigvelo-font-weight-semibold);
   text-align: start;
   cursor: pointer;
@@ -47,9 +47,7 @@
 
 .activity__trigger:focus-visible {
   outline: none;
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px var(--sigvelo-color-focus);
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
 }
 
 /* Basis 0 keeps the long nowrap label from inflating the message width
@@ -95,45 +93,30 @@
   transform: rotate(90deg);
 }
 
-/* The measured height lives on the base class, NOT gated behind [data-open]:
-   during close the open rule stops matching before the ending style lands,
-   height computes to `auto`, and `auto → 0` can't transition — the panel
-   snaps shut instead of folding. (Base UI's documented panel pattern.) */
 .activity__content {
-  height: var(--collapsible-panel-height);
-  overflow: hidden;
   /* The panel clips (overflow: hidden), so it must own the gutter the row
      hover fills bleed into — the list padding puts the text back in line */
   margin-inline: -0.5rem;
   /* Standard easing, not emphasized: the expo-out curve front-loads ~60% of
      the motion into the first frames, which makes collapsing read as content
      snapping upward instead of folding. */
-  transition:
-    height var(--sigvelo-duration-medium) var(--sigvelo-ease-standard),
-    opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.activity__content[data-starting-style],
-.activity__content[data-ending-style] {
-  height: 0;
-  opacity: 0;
 }
 
 .activity__list {
   display: flex;
   flex-direction: column;
-  gap: 0.375rem;
+  gap: var(--sigvelo-spacing-1-5);
   /* Unbounded on purpose: the expanded log flows in the conversation scroll;
      only subsection panels (group text, shell output, code) are height-capped. */
-  padding-block: 0.125rem 0.5rem;
+  padding-block: var(--sigvelo-spacing-0-5) 0.5rem;
   padding-inline: 0.5rem;
 }
 
 .activity__item {
   display: flex;
   align-items: baseline;
-  gap: 0.375rem;
-  font-size: 0.8125rem;
+  gap: var(--sigvelo-spacing-1-5);
+  font-size: var(--sigvelo-text-compact);
   color: var(--sigvelo-color-text);
   line-height: 1.6;
 }
@@ -148,18 +131,18 @@
 .activity__group-trigger {
   display: flex;
   align-items: baseline;
-  gap: 0.375rem;
+  gap: var(--sigvelo-spacing-1-5);
   /* Negative margins cancel the padding, so the hover fill gets breathing
      room while the row text stays aligned with its plain siblings */
-  padding-block: 0.125rem;
+  padding-block: var(--sigvelo-spacing-0-5);
   padding-inline: 0.5rem;
-  margin-block: -0.125rem;
+  margin-block: -var(--sigvelo-spacing-0-5);
   margin-inline: -0.5rem;
   background: none;
   border: none;
   border-radius: var(--sigvelo-radius-sm);
   font-family: inherit;
-  font-size: 0.8125rem;
+  font-size: var(--sigvelo-text-compact);
   font-weight: inherit;
   color: var(--sigvelo-color-text);
   line-height: 1.6;
@@ -195,34 +178,18 @@
 
 .activity__group-trigger:focus-visible {
   outline: none;
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px var(--sigvelo-color-focus);
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
   border-radius: var(--sigvelo-radius-sm);
 }
 
-.activity__group-panel {
-  height: var(--collapsible-panel-height);
-  overflow: hidden;
-  transition:
-    height var(--sigvelo-duration-medium) var(--sigvelo-ease-standard),
-    opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.activity__group-panel[data-starting-style],
-.activity__group-panel[data-ending-style] {
-  height: 0;
-  opacity: 0;
-}
-
 .activity__group-panel-inner {
-  padding-block: 0.375rem 0.5rem;
+  padding-block: var(--sigvelo-spacing-1-5) 0.5rem;
 }
 
 /* Prose panels (thought traces): quiet text, bounded like everything else */
 .activity__group-text {
   margin: 0;
-  font-size: 0.8125rem;
+  font-size: var(--sigvelo-text-compact);
   line-height: 1.6;
   color: var(--sigvelo-color-text-muted);
   white-space: pre-wrap;
@@ -234,9 +201,7 @@
 .activity__group-text:focus-visible,
 .activity__shell-output:focus-visible {
   outline: none;
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px var(--sigvelo-color-focus);
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
   border-radius: var(--sigvelo-radius-sm);
   scroll-margin-block: 1rem;
 }
@@ -248,13 +213,13 @@
   flex-direction: column;
   gap: 0.25rem;
   padding-block: 0.5rem;
-  padding-inline: 0.75rem;
+  padding-inline: var(--sigvelo-spacing-3);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   border-radius: var(--sigvelo-radius-md);
 }
 
 .activity__shell-label {
-  font-size: 0.6875rem;
+  font-size: var(--sigvelo-text-2xs);
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text-muted);
 }
@@ -262,7 +227,7 @@
 .activity__shell-output {
   margin: 0;
   font-family: var(--sigvelo-font-mono);
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   line-height: 1.6;
   color: var(--sigvelo-color-text);
   white-space: pre-wrap;
@@ -274,7 +239,7 @@
 
 .activity__shell-status {
   align-self: flex-end;
-  font-size: 0.6875rem;
+  font-size: var(--sigvelo-text-2xs);
   color: var(--sigvelo-color-success-text-on-subtle);
 }
 
@@ -291,8 +256,8 @@
    drove it. Compact underline tabs — chrome stays quiet inside the shell. */
 .activity__browser-tabs .tabs__tab {
   padding-block: 0.25rem;
-  padding-inline: 0.125rem;
-  font-size: 0.75rem;
+  padding-inline: var(--sigvelo-spacing-0-5);
+  font-size: var(--sigvelo-text-xs);
 }
 
 .activity__browser-tabs .tabs__panel {

package/dist/styles/agent-chat.css

@@ -6,7 +6,7 @@
   min-height: 0;
   background-color: var(--sigvelo-color-surface);
   color: var(--sigvelo-color-text);
-  font-family: var(--sigvelo-font-sans);
+  font-family: inherit;
 }
 
 .agent-chat__conversation {
@@ -44,7 +44,7 @@
   position: absolute;
   inset-inline: 0;
   inset-block-end: 0;
-  padding: 0.625rem;
+  padding: var(--sigvelo-spacing-2-5);
   padding-block-start: 1.5rem;
   background: linear-gradient(
     to top,
@@ -70,13 +70,54 @@
 .agent-chat__notice {
   display: flex;
   align-items: center;
-  gap: 0.375rem;
+  gap: var(--sigvelo-spacing-1-5);
   margin-block-end: 0.5rem;
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
 }
 
+.agent-chat__notice:empty {
+  margin-block-end: 0;
+}
+
 .agent-chat__notice[data-tone="danger"],
 .agent-chat__notice [data-tone="danger"] {
   color: var(--sigvelo-color-danger-text);
 }
+
+.agent-chat__turn-error {
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sigvelo-spacing-3);
+  padding: var(--sigvelo-spacing-3);
+  color: var(--sigvelo-color-danger-text-on-subtle);
+  background-color: var(--sigvelo-color-danger-bg-subtle);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-danger-border-muted);
+  border-radius: var(--sigvelo-radius-lg);
+}
+
+.agent-chat__turn-error-message {
+  min-inline-size: min(100%, 16rem);
+  flex: 1;
+  margin: 0;
+  overflow-wrap: anywhere;
+  font-size: var(--sigvelo-text-sm);
+  line-height: 1.5;
+}
+
+.agent-chat__turn-error-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-inline-start: auto;
+}
+
+@media (forced-colors: active) {
+  .agent-chat__turn-error {
+    border: var(--sigvelo-focus-width) solid CanvasText;
+  }
+}

package/dist/styles/agent-connection.css

@@ -1,6 +1,6 @@
 .agent-connect {
   display: grid;
-  gap: 0.75rem;
+  gap: var(--sigvelo-spacing-3);
   min-inline-size: 0;
   color: var(--sigvelo-color-text);
 }
@@ -34,7 +34,7 @@
 .agent-connect__title-group :where(h2, h3) {
   margin: 0;
   color: var(--sigvelo-color-text);
-  font-size: 0.95rem;
+  font-size: var(--sigvelo-text-base);
   font-weight: var(--sigvelo-font-weight-bold);
   line-height: 1.2;
   letter-spacing: 0;
@@ -44,7 +44,7 @@
   max-inline-size: 62ch;
   margin: 0;
   color: var(--sigvelo-color-text-muted);
-  font-size: 0.78rem;
+  font-size: var(--sigvelo-text-compact);
   line-height: 1.35;
   text-wrap: pretty;
 }
@@ -87,7 +87,7 @@
   color: var(--sigvelo-color-text-muted);
   cursor: pointer;
   font: inherit;
-  font-size: 0.72rem;
+  font-size: var(--sigvelo-text-xs);
   font-weight: var(--sigvelo-font-weight-semibold);
   line-height: 1.15;
   overflow-wrap: anywhere;
@@ -106,7 +106,7 @@
 @media (pointer: coarse) {
   .agent-connect__target {
     min-block-size: 2.5rem;
-    padding-inline: 0.75rem;
+    padding-inline: var(--sigvelo-spacing-3);
   }
 }
 
@@ -117,9 +117,7 @@
 
 .agent-connect__target:focus-visible {
   outline: none;
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px var(--sigvelo-color-focus);
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
 }
 
 .agent-connect__target[data-selected="true"] {
@@ -137,13 +135,13 @@
 
 .agent-connect .code-block__content,
 .agent-connect .code-block__content--highlighted pre.shiki {
-  font-size: 0.74rem;
+  font-size: var(--sigvelo-text-xs);
   line-height: 1.5;
 }
 
 .agent-connect__mcp-form {
   display: grid;
-  gap: 0.75rem;
+  gap: var(--sigvelo-spacing-3);
   min-inline-size: 0;
 }