@mcp-b/react-components 0.17.0 → 0.18.0

package/dist/styles/button.css

@@ -2,6 +2,7 @@
   --sigvelo-recipe-button-height: var(--sigvelo-control-height-md);
   --sigvelo-recipe-button-padding-inline: var(--sigvelo-spacing-3);
   --sigvelo-recipe-button-font-size: var(--sigvelo-control-text-md);
+  --sigvelo-recipe-button-icon-size: var(--sigvelo-control-icon-size-md);
   --sigvelo-recipe-button-radius: var(--sigvelo-radius-md);
 
   display: inline-flex;
@@ -20,17 +21,26 @@
   line-height: 1.25;
   text-decoration: none;
   border-radius: var(--sigvelo-recipe-button-radius);
+  translate: 0;
   transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    box-shadow var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    border-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    box-shadow var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    translate var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
+}
+
+.button svg {
+  inline-size: var(--sigvelo-recipe-button-icon-size);
+  block-size: var(--sigvelo-recipe-button-icon-size);
+  flex: none;
 }
 
 /* ponytail: one brightness rule covers press feedback for every variant;
    upgrade to per-variant color-mix rules if filter side effects ever bite */
 .button:active:not([data-disabled]) {
   filter: brightness(0.94);
+  translate: 0 var(--sigvelo-motion-distance-xs);
 }
 
 .button:focus-visible {
@@ -131,63 +141,46 @@
 
 .button--xs {
   --sigvelo-recipe-button-height: var(--sigvelo-control-height-xs);
-  --sigvelo-recipe-button-padding-inline: var(--sigvelo-spacing-2);
+  --sigvelo-recipe-button-padding-inline: var(--sigvelo-control-padding-inline-xs);
   --sigvelo-recipe-button-font-size: var(--sigvelo-control-text-xs);
+  --sigvelo-recipe-button-icon-size: var(--sigvelo-control-icon-size-xs);
   --sigvelo-recipe-button-radius: var(--sigvelo-radius-sm);
 }
 
 .button--sm {
   --sigvelo-recipe-button-height: var(--sigvelo-control-height-sm);
-  --sigvelo-recipe-button-padding-inline: var(--sigvelo-spacing-2-5);
+  --sigvelo-recipe-button-padding-inline: var(--sigvelo-control-padding-inline-sm);
   --sigvelo-recipe-button-font-size: var(--sigvelo-control-text-sm);
+  --sigvelo-recipe-button-icon-size: var(--sigvelo-control-icon-size-sm);
   --sigvelo-recipe-button-radius: var(--sigvelo-radius-sm);
 }
 
 .button--md {
   --sigvelo-recipe-button-height: var(--sigvelo-control-height-md);
-  --sigvelo-recipe-button-padding-inline: var(--sigvelo-spacing-3);
+  --sigvelo-recipe-button-padding-inline: var(--sigvelo-control-padding-inline-md);
   --sigvelo-recipe-button-font-size: var(--sigvelo-control-text-md);
+  --sigvelo-recipe-button-icon-size: var(--sigvelo-control-icon-size-md);
 }
 
 .button--lg {
   --sigvelo-recipe-button-height: var(--sigvelo-control-height-lg);
-  --sigvelo-recipe-button-padding-inline: var(--sigvelo-spacing-4);
+  --sigvelo-recipe-button-padding-inline: var(--sigvelo-control-padding-inline-lg);
   --sigvelo-recipe-button-font-size: var(--sigvelo-control-text-lg);
+  --sigvelo-recipe-button-icon-size: var(--sigvelo-control-icon-size-lg);
 }
 
 .button--xl {
   --sigvelo-recipe-button-height: var(--sigvelo-control-height-xl);
-  --sigvelo-recipe-button-padding-inline: 1.25rem;
+  --sigvelo-recipe-button-padding-inline: var(--sigvelo-control-padding-inline-xl);
   --sigvelo-recipe-button-font-size: var(--sigvelo-control-text-xl);
+  --sigvelo-recipe-button-icon-size: var(--sigvelo-control-icon-size-xl);
 }
 
-.button--icon {
-  --sigvelo-recipe-button-padding-inline: 0;
-
-  inline-size: var(--sigvelo-recipe-button-height);
-}
-
-.button--icon-xs {
-  --sigvelo-recipe-button-height: var(--sigvelo-control-height-xs);
-  --sigvelo-recipe-button-padding-inline: 0;
-  --sigvelo-recipe-button-radius: var(--sigvelo-radius-sm);
-
-  inline-size: var(--sigvelo-recipe-button-height);
-}
-
-.button--icon-sm {
-  --sigvelo-recipe-button-height: var(--sigvelo-control-height-sm);
-  --sigvelo-recipe-button-padding-inline: 0;
-  --sigvelo-recipe-button-radius: var(--sigvelo-radius-sm);
-
-  inline-size: var(--sigvelo-recipe-button-height);
-}
-
-.button--icon-lg {
-  --sigvelo-recipe-button-height: var(--sigvelo-control-height-lg);
+.button[data-icon-only] {
   --sigvelo-recipe-button-padding-inline: 0;
 
   inline-size: var(--sigvelo-recipe-button-height);
+  flex: none;
 }
 
 @media (forced-colors: active) {
@@ -206,3 +199,13 @@
     opacity: 1;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .button {
+    translate: none;
+  }
+}
+
+:root[data-motion="reduce"] .button {
+  translate: none;
+}

package/dist/styles/card.css

@@ -4,11 +4,9 @@
   /* Shadow-led elevation: no perimeter border */
   border-radius: var(--sigvelo-radius-lg);
   padding: var(--sigvelo-spacing-4);
-  container-type: inline-size;
   box-shadow: var(--sigvelo-shadow-sm);
-  transition:
-    box-shadow var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    transform var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+  transition: box-shadow var(--sigvelo-motion-duration-interaction)
+    var(--sigvelo-motion-ease-change);
 }
 
 .card[data-size="sm"] {
@@ -58,12 +56,14 @@
 }
 
 .card__title {
+  min-inline-size: 0;
   font-size: var(--sigvelo-text-base);
   font-weight: var(--sigvelo-font-weight-semibold);
   line-height: var(--sigvelo-leading-tight);
 }
 
 .card__description {
+  min-inline-size: 0;
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-compact);
 }
@@ -83,8 +83,7 @@
 }
 
 .card--hover:hover {
-  box-shadow: var(--sigvelo-shadow-sm);
-  transform: translateY(-1px);
+  box-shadow: var(--sigvelo-shadow-md);
 }
 
 .card--hover:focus-visible {

package/dist/styles/chain-of-thought.css

@@ -5,8 +5,9 @@
   margin: 0;
   padding-block: var(--sigvelo-spacing-2);
   padding-inline: var(--sigvelo-spacing-2);
-  margin-inline-start: 1rem;
-  border-inline-start: var(--sigvelo-border-style) 2px var(--sigvelo-color-neutral-border-subtle);
+  margin-inline-start: var(--sigvelo-spacing-4);
+  border-inline-start: var(--sigvelo-border-style) calc(var(--sigvelo-border-width) * 2)
+    var(--sigvelo-color-neutral-border-subtle);
   list-style: none;
 }
 
@@ -22,9 +23,9 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 1.25rem;
-  height: 1.25rem;
-  margin-inline-start: -1.625rem;
+  inline-size: var(--sigvelo-spacing-5);
+  block-size: var(--sigvelo-spacing-5);
+  margin-inline-start: calc((var(--sigvelo-spacing-6) + var(--sigvelo-spacing-0-5)) * -1);
   border-radius: var(--sigvelo-radius-full);
   background-color: var(--sigvelo-color-surface);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -50,7 +51,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--sigvelo-spacing-1-5);
-  min-width: 0;
+  min-inline-size: 0;
   flex: 1;
 }
 
@@ -93,8 +94,9 @@
 .chain-of-thought__search-result {
   display: inline-flex;
   align-items: center;
-  padding-block: 0.25rem;
-  padding-inline: 0.5rem;
+  min-block-size: var(--sigvelo-control-height-xs);
+  padding-block: 0;
+  padding-inline: var(--sigvelo-spacing-2);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
@@ -102,13 +104,13 @@
   font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text);
   text-decoration: none;
-  max-width: 18rem;
+  max-inline-size: 18rem;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    border-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .chain-of-thought__search-result:hover {
@@ -125,13 +127,13 @@
   margin: 0;
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
-  max-width: 18rem;
+  gap: var(--sigvelo-spacing-1);
+  max-inline-size: 18rem;
 }
 
 .chain-of-thought__image-img {
-  width: 100%;
-  height: auto;
+  inline-size: 100%;
+  block-size: auto;
   border-radius: var(--sigvelo-radius-sm);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
@@ -139,7 +141,7 @@
 
 .chain-of-thought__image-frame {
   display: flex;
-  max-height: 22rem;
+  max-block-size: 22rem;
   align-items: center;
   justify-content: center;
   overflow: hidden;
@@ -170,6 +172,10 @@
   }
 }
 
+:root[data-motion="reduce"] .chain-of-thought__step--active .chain-of-thought__step-indicator {
+  animation: none;
+}
+
 @media (forced-colors: active) {
   .chain-of-thought__step-indicator,
   .chain-of-thought__search-result {

package/dist/styles/checkbox.css

@@ -1,9 +1,11 @@
 .checkbox {
+  --sigvelo-recipe-checkbox-size: var(--sigvelo-control-icon-size-md);
+
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 1rem;
-  height: 1rem;
+  inline-size: var(--sigvelo-recipe-checkbox-size);
+  block-size: var(--sigvelo-recipe-checkbox-size);
   flex-shrink: 0;
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-muted);
@@ -12,9 +14,9 @@
   outline: none;
   cursor: pointer;
   transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    box-shadow var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    border-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    box-shadow var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .checkbox:hover:not([data-disabled]) {
@@ -49,4 +51,15 @@
   align-items: center;
   justify-content: center;
   color: var(--sigvelo-color-primary-text-on-bg);
+  opacity: 1;
+  scale: 1;
+  transition:
+    opacity var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    scale var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-enter);
+}
+
+.checkbox__indicator[data-starting-style],
+.checkbox__indicator[data-ending-style] {
+  opacity: 0;
+  scale: var(--sigvelo-motion-presence-scale);
 }

package/dist/styles/codex-model-selector.css

@@ -36,15 +36,11 @@
   background-color: var(--sigvelo-color-neutral-bg-muted);
   border-radius: var(--sigvelo-radius-full);
   opacity: 0;
-  transform: scale(0.96);
-  transition:
-    opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    transform var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+  transition: opacity var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .codex-model-selector__trigger:is(:hover, :focus-visible, [data-popup-open])::before {
   opacity: 1;
-  transform: scale(1);
 }
 
 .codex-model-selector__trigger:focus-visible {
@@ -89,8 +85,8 @@
 }
 
 .codex-model-selector__trigger-icon {
-  inline-size: 0.875rem;
-  block-size: 0.875rem;
+  inline-size: var(--sigvelo-control-icon-size-sm);
+  block-size: var(--sigvelo-control-icon-size-sm);
 }
 
 .codex-model-selector__menu {

package/dist/styles/collapsible.css

@@ -1,7 +1,7 @@
 .collapsible {
   display: flex;
   flex-direction: column;
-  width: 100%;
+  inline-size: 100%;
 }
 
 .collapsible__trigger {
@@ -9,7 +9,7 @@
   align-items: center;
   justify-content: space-between;
   gap: var(--sigvelo-recipe-control-gap);
-  width: 100%;
+  inline-size: 100%;
   min-block-size: var(--sigvelo-recipe-control-height);
   padding-block: 0;
   padding-inline: var(--sigvelo-recipe-control-padding-inline);
@@ -24,8 +24,8 @@
   border-radius: var(--sigvelo-radius-md);
   cursor: pointer;
   transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    border-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .collapsible__trigger:hover {
@@ -44,16 +44,16 @@
 
 .collapsible__trigger::after {
   content: "";
-  width: 0;
-  height: 0;
+  inline-size: 0;
+  block-size: 0;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   border-top: 5px solid currentColor;
-  transition: transform var(--sigvelo-duration-medium) var(--sigvelo-ease-standard);
+  transition: rotate var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .collapsible__trigger[data-panel-open]::after {
-  transform: rotate(180deg);
+  rotate: 180deg;
 }
 
 .collapsible__trigger[data-panel-open] {
@@ -69,10 +69,10 @@
 }
 
 .collapsible__panel > * {
-  padding: 1rem;
+  padding: var(--sigvelo-spacing-4);
   background-color: var(--sigvelo-color-surface);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-muted);
-  border-top: none;
+  border-block-start: none;
   border-radius: 0 0 var(--sigvelo-radius-md) var(--sigvelo-radius-md);
 }

package/dist/styles/combobox.css

@@ -8,9 +8,10 @@
 
 .combobox__popup {
   --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,8 +1,8 @@
 .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;
@@ -12,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]) {
@@ -28,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 {
@@ -40,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;
@@ -88,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);
@@ -103,7 +104,7 @@
 .commit__actions {
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
+  gap: var(--sigvelo-spacing-1);
   flex-shrink: 0;
 }
 
@@ -115,8 +116,8 @@
 .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)
@@ -129,7 +130,7 @@
 
 .commit__file-status {
   flex-shrink: 0;
-  min-width: 1.25rem;
+  min-inline-size: var(--sigvelo-spacing-5);
   justify-content: center;
 }
 
@@ -144,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,13 +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;
+  padding-inline-start: var(--sigvelo-control-height-sm);
 }
 
 .context-menu__item[data-variant="destructive"] {