@mcp-b/react-components 0.16.0 → 0.17.0

package/dist/styles/model-selector.css

@@ -14,18 +14,6 @@
   color: var(--sigvelo-color-text-muted);
 }
 
-.model-selector__title {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  white-space: nowrap;
-  border: 0;
-  clip: rect(0 0 0 0);
-}
-
 .model-selector__dialog {
   display: flex;
   flex-direction: column;
@@ -41,8 +29,8 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding-block: var(--sigvelo-spacing-3);
-  padding-inline: 1rem;
+  padding-block: var(--sigvelo-spacing-2);
+  padding-inline: var(--sigvelo-spacing-3);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
 }
@@ -90,7 +78,7 @@
 
 .model-selector__group-label {
   padding-block: var(--sigvelo-spacing-1-5);
-  padding-inline: 1rem;
+  padding-inline: var(--sigvelo-spacing-3);
   font-size: var(--sigvelo-text-2xs);
   font-weight: var(--sigvelo-font-weight-bold);
   text-transform: uppercase;
@@ -102,14 +90,15 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  gap: var(--sigvelo-spacing-2-5);
+  gap: var(--sigvelo-spacing-1-5);
   width: 100%;
-  padding-block: 0.5rem;
-  padding-inline: 1rem;
+  min-block-size: var(--sigvelo-control-height-xs);
+  padding-block: var(--sigvelo-spacing-0-5);
+  padding-inline: var(--sigvelo-spacing-3);
   border-radius: 0;
   color: var(--sigvelo-color-text);
   font-family: inherit;
-  font-size: var(--sigvelo-text-sm);
+  font-size: var(--sigvelo-text-compact);
   font-weight: var(--sigvelo-font-weight-normal);
   text-align: start;
   transition: background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
@@ -126,9 +115,8 @@
 }
 
 .model-selector__item[data-selected] {
-  background-color: var(--sigvelo-color-primary-bg-subtle);
-  color: var(--sigvelo-color-primary-text);
-  font-weight: var(--sigvelo-font-weight-semibold);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  color: var(--sigvelo-color-neutral-text-on-subtle);
 }
 
 .model-selector__item:is(:disabled, [data-disabled]) {
@@ -137,13 +125,19 @@
 }
 
 .model-selector__empty {
-  padding-block: 1.5rem;
-  padding-inline: 1rem;
+  padding-block: var(--sigvelo-spacing-4);
+  padding-inline: var(--sigvelo-spacing-3);
   text-align: center;
   font-size: var(--sigvelo-text-compact);
   color: var(--sigvelo-color-text-muted);
 }
 
+@media (any-pointer: coarse) {
+  .model-selector__item {
+    min-block-size: var(--sigvelo-control-height-xl);
+  }
+}
+
 /* Hide empty state when any group sibling has visible items. */
 .model-selector__list:has(.model-selector__group) .model-selector__empty {
   display: none;
@@ -170,14 +164,6 @@
   gap: 0.25rem;
 }
 
-.model-selector__name {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .model-selector__shortcut {
   padding-block: 0.0625rem;
   padding-inline: var(--sigvelo-spacing-1-5);

package/dist/styles/plan.css

@@ -0,0 +1,127 @@
+.plan__header {
+  display: grid;
+  gap: var(--sigvelo-spacing-0-5);
+  min-inline-size: 0;
+  padding-block: var(--sigvelo-spacing-2-5);
+  padding-inline: var(--sigvelo-spacing-3);
+  border-block-end: var(--sigvelo-border-width) var(--sigvelo-border-style)
+    var(--sigvelo-color-neutral-border-subtle);
+}
+
+.plan__title,
+.plan__description,
+.plan__step-title,
+.plan__step-description {
+  min-inline-size: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.plan__title {
+  color: var(--sigvelo-color-text);
+  font-size: var(--sigvelo-text-compact);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: var(--sigvelo-leading-tight);
+}
+
+.plan__description {
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  line-height: 1.5;
+}
+
+.plan__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sigvelo-spacing-3);
+  margin: 0;
+  padding-block: var(--sigvelo-spacing-3);
+  padding-inline: var(--sigvelo-spacing-3);
+  list-style: none;
+}
+
+.plan__step {
+  position: relative;
+  display: grid;
+  grid-template-columns: var(--sigvelo-spacing-4) minmax(0, 1fr);
+  column-gap: var(--sigvelo-spacing-2);
+  row-gap: var(--sigvelo-spacing-0-5);
+  min-inline-size: 0;
+}
+
+.plan__step > :not(.plan__step-indicator) {
+  grid-column: 2;
+}
+
+.plan__step:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  inset-block-start: calc(var(--sigvelo-spacing-4) + var(--sigvelo-spacing-1));
+  inset-block-end: calc(-1 * var(--sigvelo-spacing-2));
+  inset-inline-start: calc(var(--sigvelo-spacing-2) - var(--sigvelo-border-width));
+  inline-size: var(--sigvelo-border-width);
+  background-color: var(--sigvelo-color-neutral-border-subtle);
+}
+
+.plan__step-indicator {
+  z-index: 1;
+  grid-row: 1 / span 2;
+  grid-column: 1;
+  display: inline-flex;
+  inline-size: var(--sigvelo-spacing-4);
+  block-size: var(--sigvelo-spacing-4);
+  align-items: center;
+  justify-content: center;
+  color: var(--sigvelo-color-text-muted);
+  background-color: var(--sigvelo-color-surface);
+  border: var(--sigvelo-border-width) var(--sigvelo-border-style)
+    var(--sigvelo-color-neutral-border-muted);
+  border-radius: var(--sigvelo-radius-full);
+}
+
+.plan__step-indicator-visual,
+.plan__step-indicator-visual svg {
+  display: block;
+  inline-size: var(--sigvelo-spacing-3);
+  block-size: var(--sigvelo-spacing-3);
+}
+
+.plan__step[data-status="complete"] .plan__step-indicator {
+  color: var(--sigvelo-color-success-text-on-bg);
+  background-color: var(--sigvelo-color-success-bg);
+  border-color: var(--sigvelo-color-success-bg);
+}
+
+.plan__step[data-status="active"] .plan__step-indicator {
+  color: var(--sigvelo-color-primary-text-on-subtle);
+  background-color: var(--sigvelo-color-primary-bg-subtle);
+  border-color: var(--sigvelo-color-primary-border-muted);
+}
+
+.plan__step-title {
+  color: var(--sigvelo-color-text);
+  font-size: var(--sigvelo-text-compact);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: var(--sigvelo-leading-tight);
+}
+
+.plan__step[data-status="pending"] .plan__step-title {
+  color: var(--sigvelo-color-text-muted);
+}
+
+.plan__step-description {
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  line-height: 1.5;
+}
+
+@media (forced-colors: active) {
+  .plan__step-indicator {
+    border: 1px solid CanvasText;
+  }
+
+  .plan__step[data-status="active"] .plan__step-indicator {
+    color: HighlightText;
+    background-color: Highlight;
+  }
+}

package/dist/styles/popover.css

@@ -14,61 +14,25 @@
 }
 
 .popover__popup {
-  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-4);
+  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-3);
 
   min-width: 12rem;
   max-inline-size: min(20rem, var(--available-width));
   overflow-y: auto;
 }
 
-.popover__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);
-}
-
-.popover__arrow[data-side="top"] {
-  border-top: none;
-  border-left: none;
-}
-
-.popover__arrow[data-side="bottom"] {
-  border-bottom: none;
-  border-right: none;
-}
-
-.popover__arrow[data-side="left"] {
-  border-bottom: none;
-  border-left: none;
-}
-
-.popover__arrow[data-side="right"] {
-  border-top: none;
-  border-right: none;
-}
-
 .popover__title {
-  margin-block-end: 0.5rem;
-  font-size: var(--sigvelo-text-sm);
-  font-weight: var(--sigvelo-font-weight-bold);
+  margin-block-end: var(--sigvelo-spacing-1);
+  font-size: var(--sigvelo-text-compact);
+  font-weight: var(--sigvelo-font-weight-semibold);
   line-height: 1.25;
   color: var(--sigvelo-color-text);
 }
 
-.popover__description {
-  margin: 0;
-  font-size: var(--sigvelo-text-sm);
-  line-height: 1.5;
-  color: var(--sigvelo-color-text-muted);
-}
-
 .popover__header {
   display: grid;
-  gap: 0.5rem;
-  margin-block-end: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-spacing-1);
+  margin-block-end: var(--sigvelo-spacing-2);
 }
 
 .popover__close {
@@ -77,7 +41,7 @@
   justify-content: center;
   padding-block: 0.25rem;
   padding-inline: 0.5rem;
-  margin-block-start: var(--sigvelo-spacing-3);
+  margin-block-start: var(--sigvelo-spacing-2);
   font-family: inherit;
   font-size: var(--sigvelo-text-xs);
   font-weight: var(--sigvelo-font-weight-semibold);

package/dist/styles/preview-card.css

@@ -21,7 +21,7 @@
 }
 
 .preview-card__popup {
-  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-4);
+  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-3);
 
   min-inline-size: 12.5rem;
   max-inline-size: min(20rem, var(--available-width));

package/dist/styles/prompt-input.css

@@ -1,3 +1,5 @@
+@import "./approval.css";
+
 .prompt-input {
   --prompt-input-secondary-text: var(--sigvelo-color-text-muted);
 
@@ -282,18 +284,6 @@
   animation: prompt-input-spin 900ms linear infinite;
 }
 
-.prompt-input__dictation-status {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-  border: 0;
-}
-
 @media (prefers-reduced-motion: reduce) {
   .prompt-input__dictation[data-listening] .prompt-input__dictation-icon::before {
     transition: none;
@@ -517,39 +507,16 @@
 
 .prompt-input__command-popup {
   --prompt-input-secondary-text: var(--sigvelo-color-text-muted);
-  --sigvelo-recipe-surface-radius: var(--sigvelo-radius-xl);
-  --sigvelo-recipe-surface-shadow: var(--sigvelo-shadow-xl);
-  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-1);
-  --sigvelo-recipe-row-min-height: var(--sigvelo-control-height-sm);
-  --sigvelo-recipe-row-padding-block: var(--sigvelo-spacing-1);
-  --sigvelo-recipe-row-padding-inline: var(--sigvelo-spacing-2);
-  --sigvelo-recipe-row-gap: var(--sigvelo-spacing-2-5);
-  --sigvelo-recipe-row-font-size: var(--sigvelo-text-sm);
-  --sigvelo-recipe-row-radius: var(--sigvelo-radius-md);
 
   width: 100%;
   max-height: min(24rem, var(--available-height));
   overflow: hidden auto;
 }
 
-.prompt-input__command-popup [data-slot="combobox-group-label"] {
-  padding-block: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-2);
-  color: var(--prompt-input-secondary-text);
-  font-size: var(--sigvelo-text-sm);
-  font-weight: var(--sigvelo-font-weight-normal);
-}
-
 .prompt-input__command-popup [data-slot="combobox-empty"]:empty {
   display: none;
 }
 
-@media (any-pointer: coarse) {
-  .prompt-input__command-popup {
-    --sigvelo-recipe-row-min-height: var(--sigvelo-control-height-xl);
-  }
-}
-
 .prompt-input__command-item {
   align-items: center;
   min-width: 0;
@@ -689,166 +656,6 @@
   margin-inline-start: auto;
 }
 
-/* Approval state: the composer becomes the confirmation */
-.prompt-input__approval {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  font-size: var(--sigvelo-text-compact);
-  /* Zero intrinsic inline size: long tool names, paths, and one-line JSON in
-     the confirmation must never widen the composer or the chat column around
-     it — same containment trick as the conversation viewport. */
-  contain: inline-size;
-}
-
-.prompt-input__approval-question {
-  display: flex;
-  align-items: baseline;
-  gap: 0.5rem;
-  line-height: 1.4;
-}
-
-.prompt-input__approval-question > span:first-child {
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-.prompt-input__approval-question code {
-  font-family: var(--sigvelo-font-mono);
-  font-size: 0.8125em;
-}
-
-.prompt-input__approval-count {
-  margin-inline-start: auto;
-  flex-shrink: 0;
-  color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-xs);
-}
-
-.prompt-input__approval-preview {
-  max-height: 6rem;
-  padding-block: var(--sigvelo-spacing-1-5);
-  padding-inline: var(--sigvelo-spacing-2-5);
-  overflow: auto;
-  /* Long values wrap and scroll vertically within the cap — never sideways. */
-  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;
-}
-
-.prompt-input__approval-preview-key {
-  color: var(--sigvelo-color-text);
-}
-
-.prompt-input__approval-preview-key::after {
-  content: ":";
-}
-
-.prompt-input__approval-options {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sigvelo-spacing-0-5);
-}
-
-.prompt-input__approval-option {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  width: 100%;
-  padding-block: 0.3125rem;
-  padding-inline: 0.5rem;
-  border: none;
-  border-radius: var(--sigvelo-radius-md);
-  background: transparent;
-  color: var(--sigvelo-color-text);
-  font: inherit;
-  text-align: start;
-  cursor: pointer;
-}
-
-.prompt-input__approval-option[data-selected] {
-  background-color: color-mix(in oklab, var(--sigvelo-color-text), transparent 92%);
-}
-
-.prompt-input__approval-option:disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.prompt-input__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);
-}
-
-.prompt-input__approval-option[data-selected] .prompt-input__approval-key {
-  border-color: var(--sigvelo-color-text);
-  background-color: var(--sigvelo-color-text);
-  color: var(--sigvelo-color-surface);
-}
-
-.prompt-input__approval-arrows {
-  margin-inline-start: auto;
-  color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-xs);
-  visibility: hidden;
-}
-
-.prompt-input__approval-option[data-selected] .prompt-input__approval-arrows {
-  visibility: visible;
-}
-
-.prompt-input__approval-deny {
-  cursor: text;
-}
-
-.prompt-input__approval-reason {
-  flex: 1;
-  min-width: 0;
-  padding: 0;
-  border: none;
-  background: transparent;
-  color: var(--sigvelo-color-text);
-  font: inherit;
-}
-
-.prompt-input__approval-reason::placeholder {
-  color: var(--sigvelo-color-text-muted);
-}
-
-.prompt-input__approval-reason:focus {
-  outline: none;
-}
-
-.prompt-input__approval-skip {
-  flex-shrink: 0;
-  color: var(--sigvelo-color-text-muted);
-}
-
-.prompt-input__approval-submit {
-  flex-shrink: 0;
-  gap: var(--sigvelo-spacing-1-5);
-}
-
-.prompt-input__approval-kbd {
-  font-family: inherit;
-  font-size: 0.75em;
-  opacity: 0.75;
-}
-
 @keyframes prompt-input-spin {
   from {
     transform: rotate(0deg);