@mcp-b/react-components 0.16.0 → 0.17.0

package/dist/styles/commit.css

@@ -1,16 +1,3 @@
-.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;
@@ -125,14 +112,6 @@
     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;

package/dist/styles/context-menu.css

@@ -16,14 +16,6 @@
   padding-inline-start: 2rem;
 }
 
-.context-menu__indicator {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: 1rem;
-  flex: 0 0 1rem;
-}
-
 .context-menu__item[data-variant="destructive"] {
   color: var(--sigvelo-color-danger-text);
 }
@@ -42,5 +34,5 @@
 }
 
 .context-menu__label {
-  padding-block: 0.5rem 0.25rem;
+  padding-block: var(--sigvelo-spacing-1-5) var(--sigvelo-spacing-0-5);
 }

package/dist/styles/dialog.css

@@ -10,7 +10,7 @@
 }
 
 .dialog__popup {
-  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-6);
+  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-4);
 
   position: fixed;
   inset-block-start: 50%;
@@ -57,32 +57,32 @@
 }
 
 .dialog__title {
-  font-size: var(--sigvelo-text-lg);
-  font-weight: var(--sigvelo-font-weight-bold);
+  font-size: var(--sigvelo-text-base);
+  font-weight: var(--sigvelo-font-weight-semibold);
   line-height: 1.25;
   color: var(--sigvelo-color-text);
-  margin-block-end: 0.5rem;
+  margin-block-end: var(--sigvelo-spacing-1);
 }
 
 .dialog__description {
-  font-size: var(--sigvelo-text-sm);
-  line-height: 1.5;
+  font-size: var(--sigvelo-text-compact);
+  line-height: var(--sigvelo-leading-normal);
   color: var(--sigvelo-color-text-muted);
-  margin-block-end: 1rem;
+  margin-block-end: var(--sigvelo-spacing-3);
 }
 
 .dialog__header {
   display: grid;
-  gap: 0.5rem;
-  margin-block-end: 1rem;
+  gap: var(--sigvelo-spacing-1);
+  margin-block-end: var(--sigvelo-spacing-3);
 }
 
 .dialog__footer {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
-  gap: var(--sigvelo-spacing-3);
-  margin-block-start: 1.5rem;
+  gap: var(--sigvelo-spacing-2);
+  margin-block-start: var(--sigvelo-spacing-4);
 }
 
 .dialog__close {

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

@@ -2,7 +2,7 @@
   display: flex;
   width: 100%;
   flex-direction: column;
-  gap: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-spacing-1-5);
 }
 
 .field:is([data-invalid="true"], [data-invalid=""]) .field__label,
@@ -53,9 +53,9 @@
 .field__label {
   display: flex;
   width: fit-content;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-1-5);
   font-family: inherit;
-  font-size: var(--sigvelo-text-sm);
+  font-size: var(--sigvelo-text-compact);
   font-weight: var(--sigvelo-font-weight-semibold);
   line-height: 1;
   color: var(--sigvelo-color-text);
@@ -70,7 +70,7 @@
 }
 
 .field__label:has(> [data-slot="field"]) > [data-slot="field"] {
-  padding: 1rem;
+  padding: var(--sigvelo-spacing-3);
 }
 
 .field__label:has(> [data-slot="field"]):has([data-state="checked"], [data-checked]) {
@@ -119,7 +119,7 @@
 }
 
 .field-set {
-  gap: 1.5rem;
+  gap: var(--sigvelo-spacing-4);
   min-inline-size: 0;
   margin: 0;
   padding: 0;
@@ -127,21 +127,21 @@
 }
 
 .field-set:has(> [data-slot="checkbox-group"], > [data-slot="radio-group"]) {
-  gap: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-spacing-2);
 }
 
 .field-group {
   container-type: inline-size;
   width: 100%;
-  gap: 1.75rem;
+  gap: var(--sigvelo-spacing-4);
 }
 
 .field-group > .field-group {
-  gap: 1rem;
+  gap: var(--sigvelo-spacing-3);
 }
 
 .field-group:is([data-slot="checkbox-group"], [data-slot="radio-group"]) {
-  gap: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-spacing-2);
 }
 
 .field-content {
@@ -158,20 +158,20 @@
 }
 
 .field-legend {
-  margin-block-end: var(--sigvelo-spacing-3);
-  font-size: var(--sigvelo-text-base);
+  margin-block-end: var(--sigvelo-spacing-2);
+  font-size: var(--sigvelo-text-sm);
 }
 
 .field-legend[data-variant="label"] {
-  font-size: var(--sigvelo-text-sm);
+  font-size: var(--sigvelo-text-compact);
 }
 
 .field-title {
   display: flex;
   width: fit-content;
   align-items: center;
-  gap: 0.5rem;
-  font-size: var(--sigvelo-text-sm);
+  gap: var(--sigvelo-spacing-1-5);
+  font-size: var(--sigvelo-text-compact);
 }
 
 .field-separator {

package/dist/styles/fieldset.css

@@ -1,8 +1,8 @@
 .fieldset {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
-  padding: 1.5rem;
+  gap: var(--sigvelo-spacing-3);
+  padding: var(--sigvelo-spacing-4);
   margin: 0;
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-muted);
@@ -18,13 +18,13 @@
   padding: 0 0.5rem;
   margin: 0 -0.5rem;
   font-family: inherit;
-  font-size: var(--sigvelo-text-sm);
-  font-weight: var(--sigvelo-font-weight-bold);
+  font-size: var(--sigvelo-text-compact);
+  font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text);
 }
 
 .fieldset__description {
   margin: 0;
   color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-sm);
+  font-size: var(--sigvelo-text-compact);
 }

package/dist/styles/file-tree.css

@@ -10,14 +10,6 @@
   overflow: auto;
 }
 
-.file-tree__list {
-  display: flex;
-  flex-direction: column;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
 .file-tree__folder,
 .file-tree__file {
   display: flex;
@@ -86,14 +78,6 @@
   color: var(--sigvelo-color-primary-text);
 }
 
-.file-tree__name {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .file-tree__actions {
   display: inline-flex;
   align-items: center;

package/dist/styles/index.css

@@ -18,6 +18,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);
@@ -66,7 +68,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 +80,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 +88,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);
@@ -107,11 +111,11 @@
 @import "./web-preview.css" layer(components);
 @import "./workspace-explorer.css" layer(components);
 
-/* Layout Components */
-@import "./shell.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);

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/mcp-connection-request.css

@@ -1,6 +1,6 @@
 .mcp-connection-request {
   inline-size: min(28rem, 100%);
-  margin-block: var(--sigvelo-spacing-2);
+  margin-block: var(--sigvelo-spacing-1);
 }
 
 .mcp-connection-request--settled {
@@ -9,7 +9,7 @@
 
 .mcp-connection-request__body {
   display: grid;
-  gap: var(--sigvelo-spacing-2);
+  gap: var(--sigvelo-spacing-1-5);
 }
 
 .mcp-connection-request__reason {
@@ -21,7 +21,7 @@
 
 .mcp-connection-request__endpoint {
   min-inline-size: 0;
-  padding: var(--sigvelo-spacing-2);
+  padding: var(--sigvelo-spacing-1-5);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-muted);
   border-radius: var(--sigvelo-radius-sm);

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);
 }
@@ -89,6 +75,7 @@
 .mcp-server-picker__avatar {
   inline-size: 1.125rem;
   block-size: 1.125rem;
+  background-color: transparent;
   border-radius: var(--sigvelo-radius-sm);
 }
 
@@ -139,18 +126,6 @@
   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;
-}
-
 .mcp-server-picker__row-actions {
   display: inline-flex;
   align-items: center;
@@ -199,10 +174,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);

package/dist/styles/menu.css

@@ -27,36 +27,7 @@
 }
 
 .menu__group-label {
-  padding-block: var(--sigvelo-spacing-2);
-}
-
-.menu__arrow {
-  width: var(--sigvelo-spacing-3);
-  height: var(--sigvelo-spacing-3);
-  background-color: var(--sigvelo-color-canvas);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-muted);
-  transform: rotate(45deg);
-}
-
-.menu__arrow[data-side="top"] {
-  border-top: none;
-  border-left: none;
-}
-
-.menu__arrow[data-side="bottom"] {
-  border-bottom: none;
-  border-right: none;
-}
-
-.menu__arrow[data-side="left"] {
-  border-bottom: none;
-  border-left: none;
-}
-
-.menu__arrow[data-side="right"] {
-  border-top: none;
-  border-right: none;
+  padding-block: var(--sigvelo-spacing-1-5) var(--sigvelo-spacing-0-5);
 }
 
 .menu__radio-group {

package/dist/styles/menubar.css

@@ -72,14 +72,6 @@
   color: var(--sigvelo-color-danger-text-on-subtle);
 }
 
-.menubar__indicator {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: 1rem;
-  flex: 0 0 1rem;
-}
-
 .menubar__group {
   display: flex;
   flex-direction: column;

package/dist/styles/message-scroller.css

@@ -94,18 +94,6 @@
   rotate: 180deg;
 }
 
-.message-scroller__button-label {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-  border: 0;
-}
-
 @media (forced-colors: active) {
   .message-scroller__button {
     border: 1px solid CanvasText;

package/dist/styles/message.css

@@ -133,18 +133,6 @@
   color: var(--sigvelo-color-text);
 }
 
-.message__copy-status {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  white-space: nowrap;
-  border: 0;
-  clip-path: inset(50%);
-}
-
 .message__edit-form {
   display: grid;
   gap: var(--sigvelo-spacing-3);