@mcp-b/react-components 0.14.2 → 0.16.0

package/dist/styles/prompt-input.css

@@ -1,16 +1,18 @@
 .prompt-input {
+  --prompt-input-secondary-text: var(--sigvelo-color-text-muted);
+
   container: prompt-input / inline-size;
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: var(--sigvelo-spacing-1-5);
-  padding-block: var(--sigvelo-spacing-2-5);
+  gap: var(--sigvelo-spacing-3);
+  padding-block: var(--sigvelo-spacing-3) var(--sigvelo-spacing-2);
   padding-inline: var(--sigvelo-spacing-3);
   background-color: var(--sigvelo-color-surface);
   /* Fields keep their border; hairline + soft shadow for the floating-composer look */
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
-  border-radius: var(--sigvelo-radius-xl);
+  border-radius: calc(var(--sigvelo-radius-xl) + var(--sigvelo-spacing-1));
   box-shadow: var(--sigvelo-shadow-sm);
   font-family: inherit;
   color: var(--sigvelo-color-text);
@@ -57,14 +59,14 @@
   border-radius: var(--sigvelo-radius-full);
 }
 
-.prompt-input__tools:has(.prompt-input__recording) {
+.prompt-input__footer-end:has(.prompt-input__recording) {
   flex: 1;
   flex-wrap: nowrap;
   width: 100%;
 }
 
-.prompt-input__tools:has(.prompt-input__recording) > :not(.prompt-input__recording),
-.prompt-input__footer:has(.prompt-input__recording) > :not(.prompt-input__tools) {
+.prompt-input__footer-end:has(.prompt-input__recording) > :not(.prompt-input__recording),
+.prompt-input__footer:has(.prompt-input__recording) > :not(.prompt-input__footer-end) {
   display: none;
 }
 
@@ -78,12 +80,10 @@
   pointer-events: none;
 }
 
-/* Match the Input focus idiom: focus-color border + soft outer ring */
+/* Keep keyboard focus visible around the complete composer surface. */
 .prompt-input:focus-within {
   border-color: var(--sigvelo-color-focus);
-  box-shadow:
-    var(--sigvelo-shadow-sm),
-    0 0 0 4px color-mix(in oklab, var(--sigvelo-color-focus), transparent 80%);
+  box-shadow: var(--sigvelo-recipe-focus-shadow-subtle);
 }
 
 .prompt-input__header {
@@ -174,11 +174,14 @@
 .prompt-input__body {
   display: flex;
   align-items: stretch;
+  flex-wrap: wrap;
+  gap: var(--sigvelo-spacing-1);
   width: 100%;
 }
 
 .prompt-input__textarea {
   flex: 1;
+  min-width: 8rem;
   width: 100%;
   padding: 0;
   border: none;
@@ -192,11 +195,14 @@
 }
 
 .prompt-input__textarea::placeholder {
-  color: var(--sigvelo-color-text-muted);
+  color: var(--sigvelo-control-placeholder-color);
 }
 
-.prompt-input__textarea:focus {
+.prompt-input__textarea:focus,
+.prompt-input__textarea:focus-visible {
+  border: none;
   outline: none;
+  box-shadow: none;
 }
 
 .prompt-input__textarea:disabled {
@@ -208,22 +214,22 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 0.5rem;
-  padding-block-start: 0.25rem;
+  gap: var(--sigvelo-spacing-2);
+  padding-block-start: var(--sigvelo-spacing-1);
 }
 
 .prompt-input__footer-end {
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
+  gap: var(--sigvelo-spacing-1);
 }
 
 .prompt-input__tools {
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
+  gap: var(--sigvelo-spacing-1-5);
   flex-wrap: wrap;
-  min-height: 1.75rem;
+  min-height: var(--sigvelo-control-height-xs);
 }
 
 .prompt-input__button {
@@ -236,8 +242,8 @@
 }
 
 .prompt-input__dictation {
-  min-inline-size: 2.75rem;
-  min-block-size: 2.75rem;
+  min-inline-size: var(--sigvelo-control-height-xs);
+  min-block-size: var(--sigvelo-control-height-xs);
 }
 
 .prompt-input__dictation[data-listening] {
@@ -323,6 +329,12 @@
   border-radius: 999rem;
 }
 
+.prompt-input__stop {
+  flex-shrink: 0;
+  border-radius: var(--sigvelo-radius-full);
+  color: var(--sigvelo-color-text);
+}
+
 .prompt-input__submit-spinner {
   animation: prompt-input-spin 900ms linear infinite;
 }
@@ -336,7 +348,7 @@
 }
 
 .prompt-input__permissions-trigger {
-  gap: 0.25rem;
+  gap: var(--sigvelo-spacing-1);
 }
 
 .prompt-input__permissions-icon {
@@ -367,7 +379,7 @@
   grid-area: 1 / 1;
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
+  gap: var(--sigvelo-spacing-1);
   justify-self: start;
   white-space: nowrap;
 }
@@ -383,8 +395,8 @@
   }
 
   .prompt-input__button[data-responsive-label] {
-    inline-size: 2.75rem;
-    min-block-size: 2.75rem;
+    inline-size: var(--sigvelo-control-height-xs);
+    min-block-size: var(--sigvelo-control-height-xs);
     padding-inline: 0;
     border-radius: var(--sigvelo-radius-full);
   }
@@ -396,12 +408,21 @@
   }
 
   .prompt-input__permissions-trigger {
-    inline-size: 2.75rem;
-    min-block-size: 2.75rem;
+    inline-size: var(--sigvelo-control-height-xs);
+    min-block-size: var(--sigvelo-control-height-xs);
     padding-inline: 0;
     justify-content: center;
     border-radius: var(--sigvelo-radius-full);
   }
+
+  .prompt-input__context-trigger {
+    max-width: 11rem;
+  }
+
+  .prompt-input__context-category,
+  .prompt-input__context-chevron {
+    display: none;
+  }
 }
 
 .prompt-input__permissions-current-option:not([data-active]) {
@@ -412,13 +433,6 @@
   min-width: 17rem;
 }
 
-.prompt-input__permissions-question {
-  padding-block: var(--sigvelo-spacing-1-5);
-  padding-inline: var(--sigvelo-spacing-3);
-  font-size: var(--sigvelo-text-xs);
-  color: var(--sigvelo-color-text-muted);
-}
-
 .prompt-input__permissions-option {
   align-items: flex-start;
 }
@@ -496,6 +510,185 @@
   flex-direction: column;
 }
 
+.prompt-input__command-positioner {
+  width: min(var(--anchor-width), calc(100vw - var(--sigvelo-spacing-4)));
+  max-height: min(24rem, var(--available-height));
+}
+
+.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;
+}
+
+.prompt-input__command-icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+}
+
+.prompt-input__command-icon > svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.prompt-input__command-copy {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: baseline;
+  column-gap: var(--sigvelo-spacing-2);
+  min-width: 0;
+}
+
+.prompt-input__context-option-copy {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.prompt-input__command-description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.prompt-input__command-meta {
+  color: var(--prompt-input-secondary-text);
+  font-size: var(--sigvelo-text-compact);
+  white-space: nowrap;
+}
+
+.prompt-input__command-label,
+.prompt-input__command-description,
+.prompt-input__context-description {
+  overflow-wrap: anywhere;
+}
+
+.prompt-input__references {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sigvelo-spacing-1);
+}
+
+.prompt-input__reference {
+  position: relative;
+  gap: var(--sigvelo-spacing-1);
+  padding-inline: var(--sigvelo-spacing-1);
+  color: var(--sigvelo-color-primary-text);
+  font-weight: inherit;
+  font-size: var(--sigvelo-text-base);
+}
+
+.prompt-input__reference-icon,
+.prompt-input__reference-remove {
+  display: inline-flex;
+  flex: 0 0 auto;
+}
+
+.prompt-input__reference-label {
+  overflow: hidden;
+  max-width: 18rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.prompt-input__reference-remove {
+  position: absolute;
+  inset-inline-end: calc(-1 * var(--sigvelo-spacing-3));
+  color: var(--sigvelo-color-text-muted);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.prompt-input__reference:hover .prompt-input__reference-remove,
+.prompt-input__reference:focus-visible .prompt-input__reference-remove {
+  opacity: 1;
+}
+
+@container prompt-input (width < 28rem) {
+  .prompt-input__reference-label {
+    max-width: 12rem;
+  }
+}
+
+.prompt-input__command-description,
+.prompt-input__context-description {
+  color: var(--prompt-input-secondary-text);
+  font-size: var(--sigvelo-text-compact);
+}
+
+.prompt-input__context-trigger {
+  max-width: min(20rem, 45cqi);
+}
+
+.prompt-input__context-category,
+.prompt-input__context-value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.prompt-input__context-category {
+  flex: 0 0 auto;
+  color: var(--sigvelo-color-text);
+}
+
+.prompt-input__context-value {
+  color: var(--sigvelo-color-text-muted);
+}
+
+.prompt-input__context-trigger[data-unavailable] {
+  color: var(--sigvelo-color-warning-text);
+}
+
+.prompt-input__context-menu {
+  --prompt-input-secondary-text: var(--sigvelo-color-text-muted);
+
+  min-width: min(22rem, calc(100vw - var(--sigvelo-spacing-4)));
+  max-width: min(28rem, calc(100vw - var(--sigvelo-spacing-4)));
+}
+
+.prompt-input__context-option {
+  align-items: flex-start;
+}
+
+.prompt-input__context-check {
+  margin-inline-start: auto;
+}
+
 /* Approval state: the composer becomes the confirmation */
 .prompt-input__approval {
   display: flex;

package/dist/styles/reasoning.css

@@ -1,60 +1,6 @@
-.reasoning {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  font-family: inherit;
-  color: var(--sigvelo-color-text);
-}
-
-.reasoning__trigger[data-streaming] .reasoning__trigger-label {
-  animation: reasoning-pulse 1400ms ease-in-out infinite;
-}
-
-.reasoning__trigger-label {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.reasoning__trigger-label > * {
-  margin: 0;
-}
-
-.reasoning__trigger-icon {
-  color: var(--sigvelo-color-text-muted);
-}
-
 .reasoning__text {
-  /* Bounded so expanding never blows out the conversation scroll position */
-  max-height: 20rem;
-  overflow-y: auto;
-  padding-block: 0.5rem;
-  padding-inline: var(--sigvelo-spacing-3);
-  margin-inline-start: var(--sigvelo-spacing-3);
+  padding-inline-start: var(--sigvelo-spacing-3);
   border-inline-start: var(--sigvelo-border-style) 2px var(--sigvelo-color-neutral-border-subtle);
-  color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-compact);
-  line-height: 1.6;
-}
-
-.reasoning__text > * + * {
-  margin-block-start: 0.5rem;
-}
-
-@keyframes reasoning-pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .reasoning__trigger[data-streaming] .reasoning__trigger-label {
-    animation: none;
-  }
 }
 
 @media (forced-colors: active) {

package/dist/styles/recipes.css

@@ -3,7 +3,7 @@
  * Components own anatomy and set recipe variables only when they need a
  * supported variation. Consumers can override these variables by inheritance.
  */
-:where(:root, .sigvelo-light, .sigvelo-dark, [data-theme="light"], [data-theme="dark"]) {
+:where(:root, [data-theme="light"], [data-theme="dark"]) {
   --sigvelo-recipe-control-height: var(--sigvelo-control-height-md);
   --sigvelo-recipe-control-padding-inline: var(--sigvelo-spacing-3);
   --sigvelo-recipe-control-gap: var(--sigvelo-spacing-2);
@@ -35,6 +35,7 @@
 
 :where(
   [data-slot="input"],
+  [data-slot="textarea"],
   [data-slot="select-trigger"],
   [data-slot="combobox-input"],
   [data-slot="autocomplete-input"],
@@ -59,15 +60,18 @@
     box-shadow var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
-:where([data-slot="input"], [data-slot="select-trigger"], [data-slot="field-control"]):hover:not(
-  :disabled,
-  [data-disabled]
-) {
+:where(
+  [data-slot="input"],
+  [data-slot="textarea"],
+  [data-slot="select-trigger"],
+  [data-slot="field-control"]
+):hover:not(:disabled, [data-disabled]) {
   border-color: var(--sigvelo-color-focus);
 }
 
 :where(
   [data-slot="input"],
+  [data-slot="textarea"],
   [data-slot="select-trigger"],
   [data-slot="combobox-input"],
   [data-slot="autocomplete-input"],
@@ -82,6 +86,7 @@
 
 :where(
   [data-slot="input"],
+  [data-slot="textarea"],
   [data-slot="select-trigger"],
   [data-slot="combobox-input"],
   [data-slot="autocomplete-input"],
@@ -92,24 +97,27 @@
   color: var(--sigvelo-control-placeholder-color);
 }
 
-:where([data-slot="input"], [data-slot="select-trigger"], [data-slot="field-control"]):is(
-  [aria-invalid="true"],
-  [data-invalid="true"],
-  [data-invalid=""]
-) {
+:where(
+  [data-slot="input"],
+  [data-slot="textarea"],
+  [data-slot="select-trigger"],
+  [data-slot="field-control"]
+):is([aria-invalid="true"], [data-invalid="true"], [data-invalid=""]) {
   border-color: var(--sigvelo-color-danger-bg);
 }
 
-:where([data-slot="input"], [data-slot="select-trigger"], [data-slot="field-control"]):is(
-  [aria-invalid="true"],
-  [data-invalid="true"],
-  [data-invalid=""]
-):focus-visible {
+:where(
+  [data-slot="input"],
+  [data-slot="textarea"],
+  [data-slot="select-trigger"],
+  [data-slot="field-control"]
+):is([aria-invalid="true"], [data-invalid="true"], [data-invalid=""]):focus-visible {
   box-shadow: var(--sigvelo-recipe-invalid-focus-shadow);
 }
 
 :where(
   [data-slot="input"]:disabled,
+  [data-slot="textarea"]:disabled,
   [data-slot="select-trigger"][data-disabled],
   [data-slot="field-control"]:disabled,
   [data-slot="number-field-input"]:disabled,

package/dist/styles/resizable-side-panel.css

@@ -0,0 +1,66 @@
+.resizable-side-panel {
+  position: relative;
+  min-inline-size: 0;
+  min-block-size: 0;
+}
+
+.resizable-side-panel__handle {
+  position: absolute;
+  inset-block: 0;
+  z-index: 25;
+  inline-size: var(--sigvelo-spacing-6);
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: col-resize;
+  touch-action: pan-y;
+  appearance: none;
+}
+
+.resizable-side-panel__handle::before {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 50%;
+  inline-size: 1px;
+  transform: translateX(-50%);
+  background: transparent;
+  transition: background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+}
+
+.resizable-side-panel__handle:hover::before,
+.resizable-side-panel__handle:focus-visible::before,
+body.is-resizing-side-panel .resizable-side-panel__handle::before {
+  background: color-mix(in srgb, var(--sigvelo-color-primary-text) 38%, transparent);
+}
+
+.resizable-side-panel__handle:focus-visible {
+  outline: 2px solid var(--sigvelo-color-focus);
+  outline-offset: -2px;
+}
+
+.resizable-side-panel[data-panel-side="start"] > .resizable-side-panel__handle {
+  inset-inline-start: var(--resizable-side-panel-size);
+  margin-inline-start: calc(var(--sigvelo-spacing-6) / -2);
+}
+
+.resizable-side-panel[data-panel-side="end"] > .resizable-side-panel__handle {
+  inset-inline-end: var(--resizable-side-panel-size);
+  margin-inline-end: calc(var(--sigvelo-spacing-6) / -2);
+}
+
+body.is-resizing-side-panel {
+  cursor: col-resize;
+  user-select: none;
+}
+
+body.is-resizing-side-panel .resizable-side-panel {
+  transition: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .resizable-side-panel,
+  .resizable-side-panel__handle::before {
+    transition: none;
+  }
+}