@mcp-b/react-components 0.16.1 → 0.18.0

package/dist/styles/combobox.css

@@ -7,10 +7,11 @@
 }
 
 .combobox__popup {
-  --sigvelo-recipe-surface-padding: 0;
+  --sigvelo-recipe-surface-padding: var(--sigvelo-combobox-popup-padding, 0);
+  --sigvelo-recipe-popup-min-inline-size: 12.5rem;
 
   inline-size: var(--anchor-width);
-  min-inline-size: 12.5rem;
+  min-inline-size: var(--sigvelo-recipe-popup-min-inline-size);
 }
 
 .combobox__item[data-selected] {
@@ -22,6 +23,6 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 1rem;
+  inline-size: var(--sigvelo-recipe-control-icon-size);
   color: var(--sigvelo-color-primary-bg);
 }

package/dist/styles/commit.css

@@ -1,21 +1,8 @@
-.commit {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  font-family: inherit;
-  color: var(--sigvelo-color-text);
-  background-color: var(--sigvelo-color-surface);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-  border-radius: var(--sigvelo-radius-md);
-  overflow: hidden;
-}
-
 .commit__header {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  width: 100%;
+  gap: var(--sigvelo-spacing-2);
+  inline-size: 100%;
   padding-block: var(--sigvelo-spacing-2-5);
   padding-inline: var(--sigvelo-spacing-3);
   background-color: transparent;
@@ -25,7 +12,8 @@
   font-size: var(--sigvelo-text-compact);
   text-align: start;
   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);
 }
 
 .commit__header:hover:not([data-disabled]) {
@@ -41,11 +29,11 @@
   display: inline-flex;
   flex-shrink: 0;
   color: var(--sigvelo-color-text-muted);
-  transition: transform var(--sigvelo-duration-medium) var(--sigvelo-ease-standard);
+  transition: rotate var(--sigvelo-motion-duration-disclosure) var(--sigvelo-motion-ease-change);
 }
 
 .commit__header[data-panel-open] .commit__header-icon {
-  transform: rotate(90deg);
+  rotate: 90deg;
 }
 
 .commit__header-body {
@@ -53,32 +41,32 @@
   align-items: center;
   gap: var(--sigvelo-spacing-3);
   flex: 1;
-  min-width: 0;
+  min-inline-size: 0;
 }
 
 .commit__author {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
   flex-shrink: 0;
 }
 
 .commit__author-avatar {
-  width: 1.5rem;
-  height: 1.5rem;
+  inline-size: var(--sigvelo-spacing-6);
+  block-size: var(--sigvelo-spacing-6);
   font-size: var(--sigvelo-text-3xs);
 }
 
 .commit__info {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
-  min-width: 0;
+  gap: var(--sigvelo-spacing-2);
+  min-inline-size: 0;
   flex: 1;
 }
 
 .commit__message {
-  min-width: 0;
+  min-inline-size: 0;
   overflow: hidden;
   font-weight: var(--sigvelo-font-weight-semibold);
   text-overflow: ellipsis;
@@ -101,7 +89,7 @@
   font-family: var(--sigvelo-font-mono);
   font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
-  padding-block: 0.0625rem;
+  padding-block: var(--sigvelo-spacing-0-5);
   padding-inline: var(--sigvelo-spacing-1-5);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   border-radius: var(--sigvelo-radius-sm);
@@ -116,7 +104,7 @@
 .commit__actions {
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
+  gap: var(--sigvelo-spacing-1);
   flex-shrink: 0;
 }
 
@@ -125,19 +113,11 @@
     var(--sigvelo-color-neutral-border-subtle);
 }
 
-.commit__files {
-  display: flex;
-  flex-direction: column;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
 .commit__file {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  padding-block: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
+  padding-block: var(--sigvelo-spacing-2);
   padding-inline: var(--sigvelo-spacing-3);
   font-size: var(--sigvelo-text-compact);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -150,7 +130,7 @@
 
 .commit__file-status {
   flex-shrink: 0;
-  min-width: 1.25rem;
+  min-inline-size: var(--sigvelo-spacing-5);
   justify-content: center;
 }
 
@@ -165,7 +145,7 @@
   font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text);
   flex: 1;
-  min-width: 0;
+  min-inline-size: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

package/dist/styles/composition-motion.css

@@ -0,0 +1,83 @@
+/*
+ * Block-level presence for transcript and structured-agent units. These rules
+ * run only when a complete block is inserted; streaming text updates do not
+ * retrigger them or disturb transcript scrolling.
+ */
+:where(
+  .message,
+  .queue,
+  .queue__item,
+  .agent-chat__queued-message,
+  .reasoning,
+  .sources,
+  .sources__item,
+  .context,
+  .chain-of-thought__step,
+  .approval,
+  .checkpoint,
+  .plan,
+  .activity,
+  .task,
+  .commit,
+  .test-results
+) {
+  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);
+}
+
+@starting-style {
+  :where(
+    .message,
+    .queue,
+    .queue__item,
+    .agent-chat__queued-message,
+    .reasoning,
+    .sources,
+    .sources__item,
+    .context,
+    .chain-of-thought__step,
+    .approval,
+    .checkpoint,
+    .plan,
+    .activity,
+    .task,
+    .commit,
+    .test-results
+  ) {
+    opacity: 0;
+    translate: 0 var(--sigvelo-motion-distance-sm);
+  }
+}
+
+/*
+ * Native snapshot motion uses the major-layout rhythm instead of Chrome's UA
+ * default. Element-scoped pseudo-trees attach to their transition root, while
+ * the :root selector also covers the document fallback.
+ */
+:where(
+  :root,
+  .workspace-explorer,
+  .responsive-sidebar-shell__frame,
+  .think-execution-workbench,
+  .think-routine-library,
+  .think-full-app__view-scope,
+  .think-full-app__workbench-panel
+)::view-transition {
+  pointer-events: none;
+}
+
+:where(
+  :root,
+  .workspace-explorer,
+  .responsive-sidebar-shell__frame,
+  .think-execution-workbench,
+  .think-routine-library,
+  .think-full-app__view-scope,
+  .think-full-app__workbench-panel
+)::view-transition-group(*) {
+  animation-duration: var(--sigvelo-motion-duration-layout);
+  animation-timing-function: var(--sigvelo-motion-ease-change);
+}

package/dist/styles/context-menu.css

@@ -7,21 +7,13 @@
 }
 
 .context-menu__popup {
-  min-width: 10rem;
-  overflow-y: auto;
+  min-inline-size: var(--sigvelo-recipe-popup-min-inline-size);
+  overflow-block: auto;
 }
 
 .context-menu__item--inset,
 .context-menu__label--inset {
-  padding-inline-start: 2rem;
-}
-
-.context-menu__indicator {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: 1rem;
-  flex: 0 0 1rem;
+  padding-inline-start: var(--sigvelo-control-height-sm);
 }
 
 .context-menu__item[data-variant="destructive"] {

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/environment-variables.css

@@ -1,16 +1,3 @@
-.environment-variables {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  font-family: inherit;
-  color: var(--sigvelo-color-text);
-  background-color: var(--sigvelo-color-surface);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-  border-radius: var(--sigvelo-radius-md);
-  overflow: hidden;
-}
-
 .environment-variables__header {
   display: flex;
   align-items: center;

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);
 }