@mcp-b/react-components 0.16.1 → 0.17.0

package/dist/styles/approval.css

@@ -0,0 +1,172 @@
+.approval {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sigvelo-spacing-2);
+  contain: inline-size;
+  color: var(--sigvelo-color-text);
+  font-family: inherit;
+  font-size: var(--sigvelo-text-compact);
+}
+
+.approval__header {
+  display: flex;
+  align-items: baseline;
+  gap: var(--sigvelo-spacing-2);
+  line-height: 1.4;
+}
+
+.approval__question {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.approval__question code {
+  font-family: var(--sigvelo-font-mono);
+  font-size: 0.8125em;
+}
+
+.approval__count {
+  margin-inline-start: auto;
+  flex-shrink: 0;
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+}
+
+.approval__preview {
+  max-block-size: 6rem;
+  padding-block: var(--sigvelo-spacing-1-5);
+  padding-inline: var(--sigvelo-spacing-2-5);
+  overflow: auto;
+  overflow-wrap: anywhere;
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-md);
+  color: var(--sigvelo-color-text-muted);
+  font-family: var(--sigvelo-font-mono);
+  font-size: var(--sigvelo-text-xs);
+  line-height: 1.5;
+}
+
+.approval__preview-key {
+  color: var(--sigvelo-color-text);
+}
+
+.approval__preview-key::after {
+  content: ":";
+}
+
+.approval__options {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sigvelo-spacing-0-5);
+}
+
+.approval__option {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--sigvelo-spacing-2);
+  inline-size: 100%;
+  min-block-size: var(--sigvelo-control-height-sm);
+  padding-block: var(--sigvelo-spacing-1);
+  padding-inline: var(--sigvelo-spacing-2);
+  border: none;
+  border-radius: var(--sigvelo-radius-md);
+  background: transparent;
+  color: var(--sigvelo-color-text);
+  font: inherit;
+  text-align: start;
+}
+
+.approval__option.button {
+  white-space: normal;
+}
+
+.approval__option[data-selected] {
+  background-color: color-mix(in oklab, var(--sigvelo-color-text), transparent 92%);
+}
+
+.approval__key {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  inline-size: 1.125rem;
+  block-size: 1.125rem;
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-full);
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-2xs);
+}
+
+.approval__option[data-selected] .approval__key {
+  border-color: var(--sigvelo-color-text);
+  background-color: var(--sigvelo-color-text);
+  color: var(--sigvelo-color-surface);
+}
+
+.approval__arrows {
+  margin-inline-start: auto;
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  visibility: hidden;
+}
+
+.approval__option[data-selected] .approval__arrows {
+  visibility: visible;
+}
+
+.approval__deny {
+  cursor: text;
+}
+
+.approval__deny:has(.approval__reason:focus-visible) {
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
+}
+
+.approval__deny-label {
+  flex-shrink: 0;
+}
+
+.approval__reason {
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--sigvelo-color-text);
+  font: inherit;
+}
+
+.approval__reason::placeholder {
+  color: var(--sigvelo-color-text-muted);
+}
+
+.approval__skip {
+  flex-shrink: 0;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.approval__submit {
+  flex-shrink: 0;
+  gap: var(--sigvelo-spacing-1-5);
+}
+
+.approval__kbd {
+  font-family: inherit;
+  font-size: 0.75em;
+  opacity: 0.75;
+}
+
+.approval__status:not(.sigvelo-visually-hidden) {
+  color: var(--sigvelo-color-danger-text);
+  font-size: var(--sigvelo-text-xs);
+}
+
+@media (pointer: coarse) {
+  .approval__option {
+    min-block-size: var(--sigvelo-control-height-lg);
+  }
+}

package/dist/styles/artifact.css

@@ -58,18 +58,6 @@
   /* Inherits from Button variant=ghost size=icon; overrides only when needed */
 }
 
-.artifact__action .sr-only {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  white-space: nowrap;
-  border: 0;
-  clip: rect(0 0 0 0);
-}
-
 .artifact__content {
   padding-block: 1rem;
   padding-inline: 1rem;

package/dist/styles/browser-run-panel.css

@@ -18,6 +18,9 @@
   flex: 1;
   min-inline-size: 0;
   flex-wrap: nowrap;
+  gap: 0;
+  padding-inline: 0;
+  border-block-end: 0;
   overflow-x: auto;
   scrollbar-width: none;
 }
@@ -38,7 +41,7 @@
   white-space: nowrap;
 }
 
-.browser-run-panel__tab[aria-selected="true"] {
+.browser-run-panel__tab[data-active] {
   background: var(--sigvelo-color-surface);
   color: var(--sigvelo-color-text);
 }
@@ -118,7 +121,7 @@
 }
 
 @media (forced-colors: active) {
-  .browser-run-panel__tab[aria-selected="true"] {
+  .browser-run-panel__tab[data-active] {
     outline: 2px solid Highlight;
     outline-offset: -2px;
   }

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

@@ -1,11 +1,3 @@
-.chain-of-thought {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  font-family: inherit;
-  color: var(--sigvelo-color-text);
-}
-
 .chain-of-thought__steps {
   display: flex;
   flex-direction: column;

package/dist/styles/checkpoint.css

@@ -0,0 +1,58 @@
+.checkpoint {
+  max-inline-size: 100%;
+  gap: var(--sigvelo-spacing-1);
+  font-size: var(--sigvelo-text-xs);
+}
+
+.checkpoint__icon {
+  color: var(--sigvelo-color-text-muted);
+}
+
+.checkpoint__content {
+  display: flex;
+  flex: 0 1 auto;
+  flex-wrap: wrap;
+  gap: var(--sigvelo-spacing-0-5) var(--sigvelo-spacing-1);
+  align-items: baseline;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  overflow-wrap: anywhere;
+}
+
+.checkpoint__title {
+  min-inline-size: 0;
+  color: var(--sigvelo-color-text);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  overflow-wrap: anywhere;
+}
+
+.checkpoint__description {
+  min-inline-size: 0;
+  color: var(--sigvelo-color-text-muted);
+  overflow-wrap: anywhere;
+}
+
+.checkpoint__title + .checkpoint__description::before {
+  content: "\00b7";
+  margin-inline-end: var(--sigvelo-spacing-1);
+}
+
+.checkpoint__actions {
+  display: inline-flex;
+  flex: 0 1 auto;
+  gap: var(--sigvelo-spacing-1);
+  align-items: center;
+  min-inline-size: 0;
+}
+
+.checkpoint__actions > * {
+  min-inline-size: 0;
+  max-inline-size: 100%;
+}
+
+@media (forced-colors: active) {
+  .checkpoint.marker--separator::before,
+  .checkpoint.marker--separator::after {
+    background-color: CanvasText;
+  }
+}

package/dist/styles/combobox.css

@@ -7,7 +7,7 @@
 }
 
 .combobox__popup {
-  --sigvelo-recipe-surface-padding: 0;
+  --sigvelo-recipe-surface-padding: var(--sigvelo-combobox-popup-padding, 0);
 
   inline-size: var(--anchor-width);
   min-inline-size: 12.5rem;

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

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/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-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);
 }
@@ -140,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;
@@ -200,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

@@ -30,35 +30,6 @@
   padding-block: var(--sigvelo-spacing-1-5) var(--sigvelo-spacing-0-5);
 }
 
-.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;
-}
-
 .menu__radio-group {
   display: flex;
   flex-direction: column;

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