@mcp-b/react-components 0.16.1 → 0.18.0

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,12 +11,16 @@
   overflow: auto;
 }
 
-.file-tree__list {
-  display: flex;
-  flex-direction: column;
-  margin: 0;
+.file-tree[data-appearance="plain"] {
+  overflow: visible;
   padding: 0;
-  list-style: none;
+  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,
@@ -24,13 +29,39 @@
   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);
@@ -39,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]) {
@@ -67,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 {
@@ -82,16 +128,14 @@
   color: var(--sigvelo-color-text-muted);
 }
 
-.file-tree__node--folder .file-tree__icon {
-  color: var(--sigvelo-color-primary-text);
+.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__name {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.file-tree__node--folder .file-tree__icon {
+  color: var(--sigvelo-color-primary-text);
 }
 
 .file-tree__actions {
@@ -100,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);
@@ -18,6 +19,8 @@
 @import "./agent-attention.css" layer(components);
 @import "./agent-connection.css" layer(components);
 @import "./agent-chat.css" layer(components);
+@import "./agent-tool-detail.css" layer(components);
+@import "./approval.css" layer(components);
 @import "./alert-dialog.css" layer(components);
 @import "./attachment-preview.css" layer(components);
 @import "./autocomplete.css" layer(components);
@@ -38,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);
@@ -53,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);
@@ -66,7 +71,6 @@
 @import "./toggle-group.css" layer(components);
 @import "./toolbar.css" layer(components);
 @import "./app-top-bar.css" layer(components);
-@import "./app-frame.css" layer(components);
 @import "./description-list.css" layer(components);
 @import "./tooltip.css" layer(components);
 
@@ -79,6 +83,7 @@
 @import "./browser-run-panel.css" layer(components);
 @import "./browser-replay.css" layer(components);
 @import "./chain-of-thought.css" layer(components);
+@import "./checkpoint.css" layer(components);
 @import "./code-block.css" layer(components);
 @import "./commit.css" layer(components);
 @import "./context.css" layer(components);
@@ -86,9 +91,11 @@
 @import "./codex-model-selector.css" layer(components);
 @import "./environment-variables.css" layer(components);
 @import "./file-tree.css" layer(components);
+@import "./inline-citation.css" layer(components);
 @import "./message.css" layer(components);
 @import "./model-selector.css" layer(components);
 @import "./chatgpt-sign-in-screen.css" layer(components);
+@import "./plan.css" layer(components);
 @import "./prompt-input.css" layer(components);
 @import "./queue.css" layer(components);
 @import "./reasoning.css" layer(components);
@@ -106,12 +113,14 @@
 @import "./think-thread-picker.css" layer(components);
 @import "./web-preview.css" layer(components);
 @import "./workspace-explorer.css" layer(components);
-
-/* Layout Components */
-@import "./shell.css" layer(components);
+@import "./composition-motion.css" layer(components);
 
 /* Page Components */
 @import "./pricing-page.css" layer(components);
 
+/* Intentional composition helpers */
+@import "./utilities.css" layer(utilities);
+
 /* Accessibility system overrides */
 @import "./accessibility.css" layer(overrides);
+@import "./motion-reduction.css" layer(overrides);

package/dist/styles/inline-citation.css

@@ -0,0 +1,107 @@
+.inline-citation {
+  display: inline;
+}
+
+.inline-citation__text {
+  transition: background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+}
+
+.inline-citation:has(.inline-citation__trigger:hover) .inline-citation__text,
+.inline-citation:has(.inline-citation__trigger:focus-visible) .inline-citation__text {
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+}
+
+.inline-citation__source {
+  display: inline;
+  margin-inline-start: var(--sigvelo-spacing-1);
+}
+
+.inline-citation__trigger {
+  display: inline-flex;
+  min-inline-size: var(--sigvelo-spacing-6);
+  min-block-size: var(--sigvelo-spacing-6);
+  align-items: center;
+  justify-content: center;
+  padding-inline: var(--sigvelo-spacing-1-5);
+  color: var(--sigvelo-color-text-muted);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  border: var(--sigvelo-border-width) var(--sigvelo-border-style)
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-full);
+  font: inherit;
+  font-size: var(--sigvelo-text-2xs);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  text-decoration: none;
+  cursor: pointer;
+  vertical-align: baseline;
+  transition:
+    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+}
+
+.inline-citation__trigger:hover,
+.inline-citation__trigger[data-popup-open] {
+  color: var(--sigvelo-color-text);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  border-color: var(--sigvelo-color-neutral-border-muted);
+}
+
+.inline-citation__trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
+}
+
+.inline-citation__popup {
+  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-3);
+
+  min-inline-size: min(14rem, var(--available-width));
+  max-inline-size: min(20rem, var(--available-width));
+}
+
+.inline-citation__card {
+  display: flex;
+  min-inline-size: 0;
+  flex-direction: column;
+  gap: var(--sigvelo-spacing-1);
+}
+
+.inline-citation__title {
+  overflow: hidden;
+  color: var(--sigvelo-color-text);
+  font-size: var(--sigvelo-text-compact);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.inline-citation__location,
+.inline-citation__id,
+.inline-citation__metadata {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  line-height: 1.4;
+}
+
+.inline-citation__metadata {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sigvelo-spacing-1);
+}
+
+.inline-citation__metadata > :not(:last-child)::after {
+  margin-inline-start: var(--sigvelo-spacing-1);
+  content: "·";
+}
+
+@media (forced-colors: active) {
+  .inline-citation__trigger:focus-visible {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+    box-shadow: none;
+  }
+}

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

@@ -1,17 +1,3 @@
-.mcp-server-picker__popup {
-  --sigvelo-recipe-row-min-height: var(--sigvelo-control-height-xs);
-  --sigvelo-recipe-row-padding-block: var(--sigvelo-spacing-0-5);
-  --sigvelo-recipe-row-padding-inline: var(--sigvelo-spacing-2);
-  --sigvelo-recipe-row-gap: var(--sigvelo-spacing-1-5);
-  --sigvelo-recipe-row-font-size: var(--sigvelo-text-compact);
-
-  inline-size: min(46rem, calc(100dvw - 1rem));
-  max-block-size: min(28rem, calc(100dvh - 2rem));
-  overflow-y: auto;
-  scrollbar-gutter: stable;
-  overscroll-behavior: contain;
-}
-
 .mcp-server-picker__group + .mcp-server-picker__group {
   margin-block-start: var(--sigvelo-spacing-0-5);
 }
@@ -50,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 {
@@ -74,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);
 }
@@ -136,50 +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;
-}
-
-.mcp-server-picker__status-label {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-  border: 0;
+  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 {
@@ -200,10 +177,6 @@
 }
 
 @media (any-pointer: coarse) {
-  .mcp-server-picker__popup {
-    --sigvelo-recipe-row-min-height: var(--sigvelo-control-height-xl);
-  }
-
   .mcp-server-picker__action {
     inline-size: var(--sigvelo-control-height-xl);
     block-size: var(--sigvelo-control-height-xl);
@@ -212,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);