@mcp-b/react-components 0.11.0 → 0.13.0

package/dist/styles/sources.css

@@ -2,73 +2,19 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  font-family: var(--sigvelo-font-sans);
-  color: var(--sigvelo-color-text);
-}
-
-.sources__trigger {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding-block: 0.5rem;
-  padding-inline: 0.75rem;
-  background-color: transparent;
-  border: none;
-  border-radius: var(--sigvelo-radius-sm);
-  color: var(--sigvelo-color-text-muted);
   font-family: inherit;
-  font-size: 0.8125rem;
-  font-weight: var(--sigvelo-font-weight-semibold);
-  cursor: pointer;
-  transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.sources__trigger:hover:not([data-disabled]) {
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
   color: var(--sigvelo-color-text);
 }
 
-.sources__trigger:focus-visible {
-  outline: none;
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px var(--sigvelo-color-focus);
-}
-
-.sources__trigger-icon {
-  display: inline-flex;
-  transition: transform 200ms ease;
-}
-
-.sources__trigger[data-panel-open] .sources__trigger-icon {
-  transform: rotate(90deg);
-}
-
 .sources__trigger-label {
   display: inline-flex;
   align-items: center;
 }
 
-.sources__content {
-  height: var(--collapsible-panel-height);
-  overflow: hidden;
-  transition:
-    height 200ms ease,
-    opacity 200ms ease;
-}
-
-.sources__content[data-starting-style],
-.sources__content[data-ending-style] {
-  height: 0;
-  opacity: 0;
-}
-
 .sources__list {
   display: flex;
   flex-direction: column;
-  gap: 0.375rem;
+  gap: var(--sigvelo-spacing-1-5);
   margin: 0;
   padding-block: 0.5rem;
   padding-inline: 0;
@@ -82,9 +28,9 @@
 .sources__link {
   display: flex;
   align-items: flex-start;
-  gap: 0.625rem;
+  gap: var(--sigvelo-spacing-2-5);
   padding-block: 0.5rem;
-  padding-inline: 0.75rem;
+  padding-inline: var(--sigvelo-spacing-3);
   color: var(--sigvelo-color-text);
   background-color: var(--sigvelo-color-surface);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -103,27 +49,25 @@
 
 .sources__link: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);
 }
 
 .sources__link-icon {
   display: inline-flex;
   flex-shrink: 0;
-  margin-block-start: 0.125rem;
+  margin-block-start: var(--sigvelo-spacing-0-5);
   color: var(--sigvelo-color-text-muted);
 }
 
 .sources__link-body {
   display: flex;
   flex-direction: column;
-  gap: 0.125rem;
+  gap: var(--sigvelo-spacing-0-5);
   min-width: 0;
 }
 
 .sources__link-title {
-  font-size: 0.875rem;
+  font-size: var(--sigvelo-text-sm);
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text);
   overflow: hidden;
@@ -132,7 +76,7 @@
 }
 
 .sources__link-description {
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
   line-height: 1.4;
   overflow: hidden;
@@ -143,7 +87,7 @@
 }
 
 .sources__link-host {
-  font-size: 0.6875rem;
+  font-size: var(--sigvelo-text-2xs);
   color: var(--sigvelo-color-text-muted);
   font-variant-numeric: tabular-nums;
 }
@@ -153,7 +97,6 @@
     border: 1px solid CanvasText;
   }
 
-  .sources__trigger:focus-visible,
   .sources__link:focus-visible {
     outline: 2px solid Highlight;
     outline-offset: 2px;

package/dist/styles/stepper.css

@@ -3,7 +3,7 @@
   width: 100%;
   gap: 1rem;
   color: var(--sigvelo-color-text);
-  font-family: var(--sigvelo-font-sans);
+  font-family: inherit;
 }
 
 .stepper__nav {
@@ -19,7 +19,7 @@
 .stepper__nav[data-orientation="vertical"] {
   flex-direction: column;
   align-items: stretch;
-  gap: 0.125rem;
+  gap: var(--sigvelo-spacing-0-5);
 }
 
 .stepper__item {
@@ -48,7 +48,7 @@
   display: inline-flex;
   min-width: 0;
   align-items: center;
-  gap: 0.625rem;
+  gap: var(--sigvelo-spacing-2-5);
   padding: 0;
   color: inherit;
   font: inherit;
@@ -62,9 +62,7 @@
 
 .stepper__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);
 }
 
 .stepper__trigger:disabled {
@@ -80,7 +78,7 @@
   justify-content: center;
   overflow: hidden;
   color: var(--sigvelo-color-text-muted);
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   font-weight: var(--sigvelo-font-weight-bold);
   line-height: 1;
   font-variant-numeric: tabular-nums;
@@ -121,7 +119,7 @@
 
 .stepper__separator {
   display: block;
-  block-size: 0.125rem;
+  block-size: var(--sigvelo-spacing-0-5);
   min-inline-size: 2rem;
   flex: 1 1 auto;
   margin-block: 0.8125rem;
@@ -141,7 +139,7 @@
 }
 
 .stepper__nav[data-orientation="vertical"] .stepper__separator {
-  inline-size: 0.125rem;
+  inline-size: var(--sigvelo-spacing-0-5);
   min-inline-size: 0;
   block-size: 2.25rem;
   flex: 0 0 auto;
@@ -153,7 +151,7 @@
 .stepper__title {
   margin: 0;
   color: var(--sigvelo-color-text);
-  font-size: 0.875rem;
+  font-size: var(--sigvelo-text-sm);
   font-weight: var(--sigvelo-font-weight-semibold);
   line-height: 1.2;
 }
@@ -165,7 +163,7 @@
 .stepper__description {
   margin-block-start: 0.1875rem;
   color: var(--sigvelo-color-text-muted);
-  font-size: 0.8125rem;
+  font-size: var(--sigvelo-text-compact);
   line-height: 1.35;
 }
 
@@ -181,9 +179,7 @@
 
 .stepper__content: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-md);
 }
 
@@ -197,6 +193,12 @@
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .stepper__indicator[data-loading] .stepper__indicator-content {
+    animation: none;
+  }
+}
+
 @media (forced-colors: active) {
   .stepper__indicator {
     border-color: ButtonText;

package/dist/styles/streamdown.css

@@ -55,7 +55,7 @@ button[data-streamdown="link"] {
 [data-streamdown="heading-4"],
 [data-streamdown="heading-5"],
 [data-streamdown="heading-6"] {
-  margin-block: 0.75rem 0.375rem;
+  margin-block: var(--sigvelo-spacing-3) var(--sigvelo-spacing-1-5);
   font-size: 1.125em;
   font-weight: var(--sigvelo-font-weight-semibold);
   line-height: 1.25;
@@ -68,7 +68,7 @@ button[data-streamdown="link"] {
 
 [data-streamdown="blockquote"] {
   margin-block: 0.5rem;
-  padding-inline-start: 0.75rem;
+  padding-inline-start: var(--sigvelo-spacing-3);
   border-inline-start: 2px solid var(--sigvelo-color-neutral-border-subtle);
   color: var(--sigvelo-color-text-muted);
 }
@@ -88,7 +88,7 @@ button[data-streamdown="link"] {
 }
 
 [data-streamdown="list-item"] {
-  padding-block: 0.125rem;
+  padding-block: var(--sigvelo-spacing-0-5);
 }
 
 [data-streamdown="list-item"] > p {
@@ -101,59 +101,13 @@ button[data-streamdown="link"] {
   border-block-start: 1px solid var(--sigvelo-color-neutral-border-subtle);
 }
 
-[data-streamdown="image-wrapper"] {
-  position: relative;
+.message__response img {
   display: inline-block;
-  margin-block: 0.5rem;
-}
-
-/* The hover scrim and download button carry no data attributes, only
-   Tailwind classes we don't compile. The scrim adds nothing here; the
-   button becomes a hover-revealed overlay in the image corner. */
-[data-streamdown="image-wrapper"] > div {
-  display: none;
-}
-
-[data-streamdown="image-wrapper"] > button {
-  position: absolute;
-  inset-block-end: 0.375rem;
-  inset-inline-end: 0.375rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.25rem;
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-  border-radius: var(--sigvelo-radius-sm);
-  background-color: var(--sigvelo-color-surface);
-  color: var(--sigvelo-color-text-muted);
-  cursor: pointer;
-  opacity: 0;
-  transition:
-    opacity 120ms ease,
-    color 120ms ease;
-}
-
-[data-streamdown="image-wrapper"]:hover > button,
-[data-streamdown="image-wrapper"] > button:focus-visible {
-  opacity: 1;
-}
-
-[data-streamdown="image-wrapper"] > button:hover {
-  color: var(--sigvelo-color-text);
-}
-
-[data-streamdown="image"] {
   max-width: 100%;
+  margin-block: 0.5rem;
   border-radius: var(--sigvelo-radius-md);
 }
 
-[data-streamdown="image-fallback"] {
-  font-size: var(--sigvelo-text-xs);
-  font-style: italic;
-  color: var(--sigvelo-color-text-muted);
-}
-
 /* ---- Shared chrome: action buttons ---- */
 
 :is(
@@ -173,7 +127,7 @@ button[data-streamdown="link"] {
   background: transparent;
   color: var(--sigvelo-color-text-muted);
   cursor: pointer;
-  transition: color 120ms ease;
+  transition: color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 :is(
@@ -206,7 +160,7 @@ button[data-streamdown="link"] {
   gap: 0.25rem;
   width: 100%;
   margin-block: 0.5rem;
-  padding: 0.375rem;
+  padding: var(--sigvelo-spacing-1-5);
   border-radius: var(--sigvelo-radius-lg);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
 }
@@ -260,7 +214,7 @@ button[data-streamdown="link"] {
   padding-inline: 0.5rem;
   background-color: transparent;
   font-family: var(--sigvelo-font-mono);
-  font-size: 0.8125rem;
+  font-size: var(--sigvelo-text-compact);
   line-height: 1.55;
   overflow: visible;
 }
@@ -341,7 +295,7 @@ button[data-streamdown="link"] {
   align-items: center;
   justify-content: flex-end;
   gap: 0.25rem;
-  padding: 0.75rem;
+  padding: var(--sigvelo-spacing-3);
 }
 
 [data-streamdown="table-fullscreen"] > div > div:last-child {
@@ -402,8 +356,8 @@ button[data-streamdown="link"] {
   > button {
   justify-content: flex-start;
   width: 100%;
-  padding-block: 0.375rem;
-  padding-inline: 0.75rem;
+  padding-block: var(--sigvelo-spacing-1-5);
+  padding-inline: var(--sigvelo-spacing-3);
   border-radius: 0;
   font-size: var(--sigvelo-text-sm);
   color: var(--sigvelo-color-text);

package/dist/styles/switch.css

@@ -5,7 +5,7 @@
   width: 2.75rem;
   height: 1.5rem;
   flex-shrink: 0;
-  padding: 0.125rem;
+  padding: var(--sigvelo-spacing-0-5);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width) transparent;
   border-radius: var(--sigvelo-radius-full);
@@ -23,9 +23,7 @@
 
 .switch: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);
 }
 
 .switch[data-checked] {
@@ -43,12 +41,11 @@
 .switch:is([aria-invalid="true"], [data-invalid="true"], [data-invalid=""]):focus-visible {
   box-shadow:
     inset 0 0 0 var(--sigvelo-border-width) var(--sigvelo-color-danger-bg),
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px color-mix(in oklab, var(--sigvelo-color-danger-bg), transparent 80%);
+    var(--sigvelo-recipe-invalid-focus-shadow);
 }
 
 .switch[data-disabled] {
-  opacity: 0.5;
+  opacity: var(--sigvelo-recipe-disabled-opacity);
   cursor: not-allowed;
 }
 

package/dist/styles/tabs.css

@@ -34,10 +34,11 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding-block: 0.5rem;
-  padding-inline: 1rem;
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.875rem;
+  min-block-size: var(--sigvelo-recipe-control-height);
+  padding-block: 0;
+  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);
   color: var(--sigvelo-color-text-muted);
   background-color: transparent;
@@ -57,9 +58,7 @@
 
 .tabs__tab: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);
 }
 
 .tabs__tab[data-selected] {
@@ -68,7 +67,7 @@
 }
 
 .tabs__tab[data-disabled] {
-  opacity: 0.5;
+  opacity: var(--sigvelo-recipe-disabled-opacity);
   cursor: not-allowed;
 }
 

package/dist/styles/task.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  font-family: var(--sigvelo-font-sans);
+  font-family: inherit;
   color: var(--sigvelo-color-text);
 }
 
@@ -11,7 +11,7 @@
   align-items: center;
   gap: 0.5rem;
   width: 100%;
-  padding-block: 0.625rem;
+  padding-block: var(--sigvelo-spacing-2-5);
   padding-inline: 0.875rem;
   /* Ploy-style: hairline outline on the canvas, plain content inside */
   background-color: transparent;
@@ -20,7 +20,7 @@
   border-radius: var(--sigvelo-radius-lg);
   color: var(--sigvelo-color-text-muted);
   font-family: inherit;
-  font-size: 0.875rem;
+  font-size: var(--sigvelo-text-sm);
   font-weight: var(--sigvelo-font-weight-semibold);
   text-align: start;
   cursor: pointer;
@@ -35,9 +35,7 @@
 
 .task__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);
 }
 
 .task__trigger[data-panel-open] {
@@ -47,16 +45,11 @@
 
 .task__trigger-leading-icon,
 .task__trigger-icon {
-  display: inline-flex;
   color: var(--sigvelo-color-text-muted);
 }
 
-.task__trigger-icon {
-  transition: transform 200ms ease;
-}
-
-.task__trigger[data-panel-open] .task__trigger-icon {
-  transform: rotate(90deg);
+.task__trigger-leading-icon {
+  display: inline-flex;
 }
 
 .task__trigger-title {
@@ -67,34 +60,12 @@
   white-space: nowrap;
 }
 
-.task__trigger-extras {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.375rem;
-  color: var(--sigvelo-color-text-muted);
-  font-weight: var(--sigvelo-font-weight-normal);
-}
-
-.task__content {
-  height: var(--collapsible-panel-height);
-  overflow: hidden;
-  transition:
-    height 200ms ease,
-    opacity 200ms ease;
-}
-
-.task__content[data-starting-style],
-.task__content[data-ending-style] {
-  height: 0;
-  opacity: 0;
-}
-
 .task__list {
   display: flex;
   flex-direction: column;
-  gap: 0.375rem;
+  gap: var(--sigvelo-spacing-1-5);
   margin: 0;
-  padding-block: 0.75rem;
+  padding-block: var(--sigvelo-spacing-3);
   padding-inline: 1.5rem;
   list-style: none;
   /* Bounded so expanding never blows out the conversation scroll position */
@@ -110,7 +81,7 @@
 
 .task__item {
   position: relative;
-  font-size: 0.8125rem;
+  font-size: var(--sigvelo-text-compact);
   color: var(--sigvelo-color-text);
   line-height: 1.6;
 }
@@ -119,7 +90,7 @@
   content: "";
   position: absolute;
   inset-inline-start: -0.875rem;
-  inset-block-start: 0.625rem;
+  inset-block-start: var(--sigvelo-spacing-2-5);
   width: 0.3125rem;
   height: 0.3125rem;
   border-radius: var(--sigvelo-radius-full);
@@ -131,12 +102,12 @@
   align-items: center;
   gap: 0.25rem;
   padding-block: 0.0625rem;
-  padding-inline: 0.375rem;
-  margin-inline: 0.125rem;
+  padding-inline: var(--sigvelo-spacing-1-5);
+  margin-inline: var(--sigvelo-spacing-0-5);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   border-radius: var(--sigvelo-radius-sm);
   font-family: var(--sigvelo-font-mono);
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text);
   vertical-align: baseline;
 }

package/dist/styles/terminal.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  font-family: var(--sigvelo-font-sans);
+  font-family: inherit;
   background-color: var(--sigvelo-color-neutral-950, var(--sigvelo-color-neutral-900));
   color: var(--sigvelo-color-neutral-100);
   border-radius: var(--sigvelo-radius-lg);
@@ -14,7 +14,7 @@
   align-items: center;
   gap: 0.5rem;
   padding-block: 0.5rem;
-  padding-inline: 0.75rem;
+  padding-inline: var(--sigvelo-spacing-3);
   background-color: color-mix(in oklab, var(--sigvelo-color-neutral-950) 80%, white 20%);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     color-mix(in oklab, var(--sigvelo-color-neutral-700) 40%, transparent);
@@ -23,9 +23,9 @@
 .terminal__title {
   display: inline-flex;
   align-items: center;
-  gap: 0.375rem;
+  gap: var(--sigvelo-spacing-1-5);
   font-family: var(--sigvelo-font-mono);
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-neutral-300);
 }
 
@@ -54,7 +54,7 @@
 .terminal__content-viewport {
   width: 100%;
   height: 100%;
-  padding-block: 0.625rem;
+  padding-block: var(--sigvelo-spacing-2-5);
   padding-inline: 0.875rem;
   overflow: auto;
 }
@@ -62,7 +62,7 @@
 .terminal__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-neutral-100);
   white-space: pre-wrap;
@@ -75,7 +75,7 @@
   height: 1em;
   vertical-align: text-bottom;
   background-color: var(--sigvelo-color-neutral-100);
-  margin-inline-start: 0.125rem;
+  margin-inline-start: var(--sigvelo-spacing-0-5);
   animation: terminal-blink 1s step-end infinite;
 }