@mcp-b/react-components 0.17.0 → 0.18.0

package/dist/styles/context.css

@@ -8,7 +8,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0.25rem;
+  padding: var(--sigvelo-spacing-1);
   background: none;
   border: none;
   border-radius: var(--sigvelo-radius-sm);
@@ -19,7 +19,7 @@
 }
 
 .context__content {
-  width: 20rem;
+  inline-size: 20rem;
   padding: 0;
   font-family: inherit;
   color: var(--sigvelo-color-text);
@@ -28,9 +28,9 @@
 .context__header {
   display: flex;
   align-items: center;
-  gap: 0.875rem;
+  gap: var(--sigvelo-spacing-3);
   padding-block: var(--sigvelo-spacing-3);
-  padding-inline: 0.875rem;
+  padding-inline: var(--sigvelo-spacing-3);
 }
 
 .context__ring {
@@ -38,8 +38,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 3rem;
-  height: 3rem;
+  inline-size: var(--sigvelo-spacing-12);
+  block-size: var(--sigvelo-spacing-12);
   flex-shrink: 0;
 }
 
@@ -59,7 +59,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--sigvelo-spacing-0-5);
-  min-width: 0;
+  min-inline-size: 0;
   flex: 1;
 }
 
@@ -90,7 +90,8 @@
   display: flex;
   flex-direction: column;
   margin: 0;
-  padding: 0.5rem 0.875rem;
+  padding-block: var(--sigvelo-spacing-2);
+  padding-inline: var(--sigvelo-spacing-3);
   list-style: none;
   gap: var(--sigvelo-spacing-1-5);
 }
@@ -121,8 +122,8 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding-block: 0.5rem;
-  padding-inline: 0.875rem;
+  padding-block: var(--sigvelo-spacing-2);
+  padding-inline: var(--sigvelo-spacing-3);
   font-size: var(--sigvelo-text-xs);
   font-weight: var(--sigvelo-font-weight-semibold);
 }

package/dist/styles/conversation.css

@@ -1,7 +1,7 @@
 .conversation {
   position: relative;
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
   font-family: inherit;
   color: var(--sigvelo-color-text);
 }
@@ -9,10 +9,10 @@
 /* Deliberately unpositioned so the floating buttons anchor to .conversation
    and stay pinned while this element scrolls. */
 .conversation__viewport {
-  width: 100%;
-  height: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
+  inline-size: 100%;
+  block-size: 100%;
+  overflow-block: auto;
+  overflow-inline: hidden;
   /* Zero intrinsic inline size: wide message content (nowrap activity rows,
      code) must never resize the chat column — overflow clips it instead. */
   contain: inline-size;
@@ -21,10 +21,9 @@
 .conversation__content {
   display: flex;
   flex-direction: column;
-  gap: 0.875rem;
-  padding-block: 1rem;
-  padding-inline: 1rem;
-  min-height: 100%;
+  gap: var(--sigvelo-spacing-3);
+  padding: var(--sigvelo-spacing-4);
+  min-block-size: 100%;
 }
 
 .conversation__empty-row {
@@ -33,19 +32,15 @@
   min-block-size: 0;
 }
 
-.conversation__empty-row > .conversation__empty {
-  flex: 1;
-}
-
 .conversation__empty {
   display: flex;
   flex: 1;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 0.5rem;
-  padding-block: 3rem;
-  padding-inline: 1.5rem;
+  gap: var(--sigvelo-spacing-2);
+  padding-block: var(--sigvelo-spacing-12);
+  padding-inline: var(--sigvelo-spacing-6);
   text-align: center;
   color: var(--sigvelo-color-text-muted);
 }
@@ -54,12 +49,12 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 3rem;
-  height: 3rem;
+  inline-size: var(--sigvelo-spacing-12);
+  block-size: var(--sigvelo-spacing-12);
   border-radius: var(--sigvelo-radius-full);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   color: var(--sigvelo-color-text-muted);
-  margin-block-end: 0.25rem;
+  margin-block-end: var(--sigvelo-spacing-1);
 }
 
 .conversation__empty-title {
@@ -69,9 +64,9 @@
 }
 
 .conversation__empty-description {
-  max-width: 32ch;
+  max-inline-size: 32ch;
   font-size: var(--sigvelo-text-sm);
-  line-height: 1.5;
+  line-height: var(--sigvelo-leading-normal);
   color: var(--sigvelo-color-text-muted);
 }
 
@@ -96,6 +91,6 @@
 @media (forced-colors: active) {
   .conversation__scroll-button,
   .conversation__download-button {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-width) solid CanvasText;
   }
 }

package/dist/styles/dialog.css

@@ -1,12 +1,6 @@
 .dialog__backdrop {
   background-color: var(--sigvelo-color-backdrop);
   z-index: 50;
-  transition: opacity var(--sigvelo-duration-medium) var(--sigvelo-ease-standard);
-}
-
-.dialog__backdrop[data-starting-style],
-.dialog__backdrop[data-ending-style] {
-  opacity: 0;
 }
 
 .dialog__popup {
@@ -15,22 +9,27 @@
   position: fixed;
   inset-block-start: 50%;
   inset-inline-start: 50%;
-  transform: translate(-50%, -50%);
+  translate: -50% -50%;
+  scale: 1;
   z-index: 50;
-  inline-size: calc(100% - 2rem);
+  inline-size: calc(100% - var(--sigvelo-control-height-sm));
   max-inline-size: 32rem;
-  max-block-size: calc(100dvb - 4rem);
-  overflow-y: auto;
+  max-block-size: calc(100dvb - var(--sigvelo-spacing-8));
+  overflow-block: auto;
   overscroll-behavior: contain;
   transition:
-    opacity var(--sigvelo-duration-medium) var(--sigvelo-ease-standard),
-    transform var(--sigvelo-duration-medium) var(--sigvelo-ease-emphasized);
+    opacity var(--sigvelo-motion-duration-presence) var(--sigvelo-motion-ease-change),
+    scale var(--sigvelo-motion-duration-presence) var(--sigvelo-motion-ease-enter);
 }
 
 .dialog__popup[data-starting-style],
 .dialog__popup[data-ending-style] {
   opacity: 0;
-  transform: translate(-50%, -50%) scale(0.95);
+  scale: var(--sigvelo-motion-presence-scale);
+}
+
+:root[data-motion="reduce"] .dialog__popup:is([data-starting-style], [data-ending-style]) {
+  scale: 1;
 }
 
 .dialog__popup--sm {
@@ -52,7 +51,7 @@
 @media (prefers-reduced-motion: reduce) {
   .dialog__popup[data-starting-style],
   .dialog__popup[data-ending-style] {
-    transform: translate(-50%, -50%);
+    scale: 1;
   }
 }
 
@@ -100,7 +99,8 @@
   border: none;
   border-radius: var(--sigvelo-radius-md);
   cursor: pointer;
-  transition: background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+  transition: background-color var(--sigvelo-motion-duration-interaction)
+    var(--sigvelo-motion-ease-change);
 }
 
 .dialog__close:hover {

package/dist/styles/field.css

@@ -1,6 +1,7 @@
 .field {
   display: flex;
-  width: 100%;
+  inline-size: 100%;
+  min-inline-size: 0;
   flex-direction: column;
   gap: var(--sigvelo-spacing-1-5);
 }
@@ -52,7 +53,7 @@
 
 .field__label {
   display: flex;
-  width: fit-content;
+  inline-size: fit-content;
   gap: var(--sigvelo-spacing-1-5);
   font-family: inherit;
   font-size: var(--sigvelo-text-compact);
@@ -62,7 +63,7 @@
 }
 
 .field__label:has(> [data-slot="field"]) {
-  width: 100%;
+  inline-size: 100%;
   flex-direction: column;
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-muted);
@@ -87,7 +88,7 @@
 
 .field__control {
   display: flex;
-  width: 100%;
+  inline-size: 100%;
 }
 
 .field__description {
@@ -104,11 +105,30 @@
   line-height: 1.4;
   color: var(--sigvelo-color-danger-bg);
   margin: 0;
+  opacity: 1;
+  translate: 0;
+  transition:
+    opacity var(--sigvelo-motion-duration-presence) var(--sigvelo-motion-ease-enter),
+    translate var(--sigvelo-motion-duration-presence) var(--sigvelo-motion-ease-enter);
+  transition-behavior: allow-discrete;
+}
+
+.field__error[data-starting-style],
+.field__error[data-ending-style] {
+  opacity: 0;
+  translate: 0 calc(var(--sigvelo-motion-distance-xs) * -1);
+}
+
+@starting-style {
+  .field__error {
+    opacity: 0;
+    translate: 0 calc(var(--sigvelo-motion-distance-xs) * -1);
+  }
 }
 
 .field__error-list {
   margin: 0;
-  padding-inline-start: 1rem;
+  padding-inline-start: var(--sigvelo-spacing-4);
 }
 
 .field-set,
@@ -132,7 +152,7 @@
 
 .field-group {
   container-type: inline-size;
-  width: 100%;
+  inline-size: 100%;
   gap: var(--sigvelo-spacing-4);
 }
 
@@ -168,7 +188,7 @@
 
 .field-title {
   display: flex;
-  width: fit-content;
+  inline-size: fit-content;
   align-items: center;
   gap: var(--sigvelo-spacing-1-5);
   font-size: var(--sigvelo-text-compact);
@@ -179,7 +199,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: 1.25rem;
+  min-block-size: var(--sigvelo-spacing-5);
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-sm);
 }
@@ -187,14 +207,14 @@
 .field-separator__line {
   position: absolute;
   inset-inline: 0;
-  top: 50%;
-  width: 100%;
-  height: 1px;
+  inset-block-start: 50%;
+  inline-size: 100%;
+  block-size: 1px;
   background-color: var(--sigvelo-color-neutral-border-muted);
 }
 
 .field-separator__content {
   position: relative;
-  padding-inline: 0.5rem;
+  padding-inline: var(--sigvelo-spacing-2);
   background-color: var(--sigvelo-color-canvas);
 }

package/dist/styles/file-tree.css

@@ -1,5 +1,6 @@
 .file-tree {
-  width: 100%;
+  interpolate-size: allow-keywords;
+  inline-size: 100%;
   font-family: inherit;
   color: var(--sigvelo-color-text);
   background-color: var(--sigvelo-color-surface);
@@ -10,19 +11,57 @@
   overflow: auto;
 }
 
+.file-tree[data-appearance="plain"] {
+  overflow: visible;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+}
+
+.file-tree[data-appearance="plain"] .file-tree__node[data-focused]:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .file-tree__folder,
 .file-tree__file {
   display: flex;
   flex-direction: column;
 }
 
+.file-tree__group {
+  display: flex;
+  flex-direction: column;
+  min-block-size: 0;
+  block-size: auto;
+  margin: 0;
+  padding: 0;
+  overflow: clip;
+  list-style: none;
+  transition:
+    block-size var(--sigvelo-motion-duration-disclosure) var(--sigvelo-motion-ease-change),
+    visibility 0s linear;
+  transition-behavior: allow-discrete;
+}
+
+.file-tree__group[data-collapsed] {
+  block-size: 0;
+  visibility: hidden;
+  transition-delay: 0s, var(--sigvelo-motion-duration-disclosure);
+}
+
 .file-tree__node {
+  --file-tree-node-offset: var(--sigvelo-spacing-2);
+
   display: flex;
   align-items: center;
   gap: var(--sigvelo-spacing-1-5);
-  width: 100%;
-  padding-block: 0.25rem;
-  padding-inline-end: 0.5rem;
+  inline-size: 100%;
+  padding-block: var(--sigvelo-spacing-1);
+  padding-inline-start: calc(
+    var(--file-tree-level, 0) * var(--sigvelo-control-icon-size-lg) + var(--file-tree-node-offset)
+  );
+  padding-inline-end: var(--sigvelo-spacing-2);
   background-color: transparent;
   border: none;
   color: var(--sigvelo-color-text);
@@ -31,7 +70,12 @@
   text-align: start;
   cursor: pointer;
   border-radius: var(--sigvelo-radius-sm);
-  transition: background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+  transition: background-color var(--sigvelo-motion-duration-interaction)
+    var(--sigvelo-motion-ease-change);
+}
+
+.file-tree__node--file {
+  --file-tree-node-offset: var(--sigvelo-spacing-6);
 }
 
 .file-tree__node:hover:not([data-disabled]) {
@@ -59,13 +103,23 @@
   display: inline-flex;
   flex-shrink: 0;
   color: var(--sigvelo-color-text-muted);
-  transition: transform var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-  width: 1rem;
+  inline-size: var(--sigvelo-recipe-control-icon-size);
   justify-content: center;
+  transition: rotate var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .file-tree__chevron--expanded {
-  transform: rotate(90deg);
+  rotate: 90deg;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .file-tree__group {
+    transition: none;
+  }
+}
+
+:root[data-motion="reduce"] .file-tree__group {
+  transition: none;
 }
 
 .file-tree__icon {
@@ -74,6 +128,12 @@
   color: var(--sigvelo-color-text-muted);
 }
 
+.file-tree__icon > svg,
+.file-tree__chevron > svg {
+  inline-size: var(--sigvelo-recipe-control-icon-size);
+  block-size: var(--sigvelo-recipe-control-icon-size);
+}
+
 .file-tree__node--folder .file-tree__icon {
   color: var(--sigvelo-color-primary-text);
 }
@@ -84,7 +144,7 @@
   gap: var(--sigvelo-spacing-0-5);
   flex-shrink: 0;
   opacity: 0;
-  transition: opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+  transition: opacity var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .file-tree__node:hover .file-tree__actions,

package/dist/styles/form.css

@@ -1,5 +1,5 @@
 .form {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: var(--sigvelo-spacing-4);
 }

package/dist/styles/index.css

@@ -6,6 +6,7 @@
 /* Base Styles */
 @import "./base.css" layer(base);
 @import "./base-ui-motion.css" layer(base);
+@import "./transition-surface.css" layer(base);
 
 /* Shared visual contracts */
 @import "./recipes.css" layer(recipes);
@@ -40,6 +41,7 @@
 @import "./input.css" layer(components);
 @import "./label.css" layer(components);
 @import "./marker.css" layer(components);
+@import "./media-preview-card.css" layer(components);
 @import "./menu.css" layer(components);
 @import "./menubar.css" layer(components);
 @import "./message-scroller.css" layer(components);
@@ -55,6 +57,7 @@
 @import "./radio.css" layer(components);
 @import "./scroll-area.css" layer(components);
 @import "./scrollbars.css" layer(components);
+@import "./search-field.css" layer(components);
 @import "./select.css" layer(components);
 @import "./separator.css" layer(components);
 @import "./slider.css" layer(components);
@@ -110,6 +113,7 @@
 @import "./think-thread-picker.css" layer(components);
 @import "./web-preview.css" layer(components);
 @import "./workspace-explorer.css" layer(components);
+@import "./composition-motion.css" layer(components);
 
 /* Page Components */
 @import "./pricing-page.css" layer(components);
@@ -119,3 +123,4 @@
 
 /* Accessibility system overrides */
 @import "./accessibility.css" layer(overrides);
+@import "./motion-reduction.css" layer(overrides);

package/dist/styles/input.css

@@ -1,6 +1,6 @@
 .input {
   display: flex;
-  width: 100%;
+  inline-size: 100%;
 }
 
 .input::selection {
@@ -11,7 +11,7 @@
 .input::file-selector-button {
   display: inline-flex;
   align-items: center;
-  height: 1.75rem;
+  block-size: var(--sigvelo-control-height-xs);
   margin-inline-end: var(--sigvelo-spacing-3);
   padding: 0;
   font: inherit;

package/dist/styles/marker.css

@@ -2,9 +2,9 @@
   position: relative;
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  width: 100%;
-  min-height: 1rem;
+  gap: var(--sigvelo-spacing-2);
+  inline-size: 100%;
+  min-block-size: var(--sigvelo-spacing-4);
   font-family: inherit;
   font-size: var(--sigvelo-text-sm);
   line-height: 1.5;
@@ -19,6 +19,7 @@
   text-decoration: none;
   background: transparent;
   border: 0;
+  transition: color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .marker:where(button) {
@@ -39,21 +40,21 @@
 .marker--separator::after {
   content: "";
   flex: 1 1 0;
-  min-width: 0;
-  height: var(--sigvelo-border-width);
+  min-inline-size: 0;
+  block-size: var(--sigvelo-border-width);
   background-color: var(--sigvelo-color-neutral-border-subtle);
 }
 
 .marker--separator::before {
-  margin-inline-end: 0.25rem;
+  margin-inline-end: var(--sigvelo-spacing-1);
 }
 
 .marker--separator::after {
-  margin-inline-start: 0.25rem;
+  margin-inline-start: var(--sigvelo-spacing-1);
 }
 
 .marker--border {
-  padding-block-end: 0.5rem;
+  padding-block-end: var(--sigvelo-spacing-2);
   border-block-end: var(--sigvelo-border-width) var(--sigvelo-border-style)
     var(--sigvelo-color-neutral-border-subtle);
 }
@@ -61,19 +62,19 @@
 .marker__icon {
   display: inline-flex;
   flex-shrink: 0;
-  width: 1rem;
-  height: 1rem;
+  inline-size: var(--sigvelo-control-icon-size-md);
+  block-size: var(--sigvelo-control-icon-size-md);
   align-items: center;
   justify-content: center;
 }
 
 .marker__icon svg {
-  width: 1rem;
-  height: 1rem;
+  inline-size: var(--sigvelo-control-icon-size-md);
+  block-size: var(--sigvelo-control-icon-size-md);
 }
 
 .marker__content {
-  min-width: 0;
+  min-inline-size: 0;
   overflow-wrap: anywhere;
 }
 

package/dist/styles/mcp-server-picker.css

@@ -36,6 +36,8 @@
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
+  transition: background-color var(--sigvelo-motion-duration-interaction)
+    var(--sigvelo-motion-ease-change);
 }
 
 .mcp-server-picker__row {
@@ -60,21 +62,21 @@
   flex: 0 0 auto;
   align-items: center;
   justify-content: center;
-  inline-size: 1.125rem;
-  block-size: 1.125rem;
+  inline-size: var(--sigvelo-control-icon-size-lg);
+  block-size: var(--sigvelo-control-icon-size-lg);
   color: var(--sigvelo-color-text-muted);
 }
 
 .mcp-server-picker__icon > svg {
   display: block;
-  inline-size: 0.875rem;
-  block-size: 0.875rem;
+  inline-size: var(--sigvelo-control-icon-size-sm);
+  block-size: var(--sigvelo-control-icon-size-sm);
   object-fit: contain;
 }
 
 .mcp-server-picker__avatar {
-  inline-size: 1.125rem;
-  block-size: 1.125rem;
+  inline-size: var(--sigvelo-control-icon-size-lg);
+  block-size: var(--sigvelo-control-icon-size-lg);
   background-color: transparent;
   border-radius: var(--sigvelo-radius-sm);
 }
@@ -122,38 +124,39 @@
 
 .mcp-server-picker__custom-action > svg,
 .mcp-server-picker__custom-action .mcp-server-picker__icon > svg {
-  inline-size: 0.875rem;
-  block-size: 0.875rem;
+  inline-size: var(--sigvelo-control-icon-size-sm);
+  block-size: var(--sigvelo-control-icon-size-sm);
 }
 
 .mcp-server-picker__row-actions {
   display: inline-flex;
   align-items: center;
   gap: var(--sigvelo-spacing-0-5);
-  padding-inline-end: 0.5rem;
+  padding-inline-end: var(--sigvelo-spacing-2);
 }
 
 .mcp-server-picker__row-status {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  inline-size: 1.5rem;
-  block-size: 1.5rem;
+  inline-size: var(--sigvelo-spacing-6);
+  block-size: var(--sigvelo-spacing-6);
   color: var(--sigvelo-color-text-muted);
+  transition: color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .mcp-server-picker__action {
-  inline-size: 1.5rem;
-  block-size: 1.5rem;
-  min-block-size: 1.5rem;
+  inline-size: var(--sigvelo-spacing-6);
+  block-size: var(--sigvelo-spacing-6);
+  min-block-size: var(--sigvelo-spacing-6);
   justify-content: center;
   padding: 0;
 }
 
 .mcp-server-picker__row-status > svg,
 .mcp-server-picker__action > svg {
-  inline-size: 0.875rem;
-  block-size: 0.875rem;
+  inline-size: var(--sigvelo-control-icon-size-sm);
+  block-size: var(--sigvelo-control-icon-size-sm);
 }
 
 .mcp-server-picker__row-shell[data-status="ready"] .mcp-server-picker__row-status {
@@ -182,7 +185,7 @@
 }
 
 .mcp-server-picker__empty {
-  padding-block: 0.5rem;
+  padding-block: var(--sigvelo-spacing-2);
   padding-inline: var(--sigvelo-spacing-3);
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-sm);