@mcp-b/react-components 0.12.0 → 0.14.0

package/dist/styles/prompt-input.css

@@ -1,22 +1,73 @@
 .prompt-input {
+  container: prompt-input / inline-size;
+  position: relative;
   display: flex;
   flex-direction: column;
-  gap: 0.375rem;
-  padding-block: 0.625rem;
-  padding-inline: 0.75rem;
+  gap: var(--sigvelo-spacing-1-5);
+  padding-block: var(--sigvelo-spacing-2-5);
+  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);
   box-shadow: var(--sigvelo-shadow-sm);
-  font-family: var(--sigvelo-font-sans);
+  font-family: inherit;
   color: var(--sigvelo-color-text);
   transition:
     border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
     box-shadow var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
+.prompt-input__recording {
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-2);
+  flex: 1;
+  min-width: 0;
+}
+
+.prompt-input__recording-add {
+  flex: 0 0 auto;
+}
+
+.prompt-input__recording-waveform {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  block-size: var(--sigvelo-spacing-4);
+  color: var(--sigvelo-color-text);
+}
+
+.prompt-input__recording-waveform canvas {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.prompt-input__recording-time {
+  min-inline-size: 2.5rem;
+  color: var(--sigvelo-color-text-muted);
+  font-variant-numeric: tabular-nums;
+  font-size: var(--sigvelo-text-sm);
+  text-align: end;
+}
+
+.prompt-input__recording-button {
+  flex: 0 0 auto;
+  border-radius: var(--sigvelo-radius-full);
+}
+
+.prompt-input__tools: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) {
+  display: none;
+}
+
 .prompt-input__file-input {
   position: fixed;
   inline-size: 1px;
@@ -39,7 +90,7 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.375rem;
+  gap: var(--sigvelo-spacing-1-5);
   min-height: 1.5rem;
 }
 
@@ -47,7 +98,7 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.375rem;
+  gap: var(--sigvelo-spacing-1-5);
 }
 
 /* Hairline chip, borderless-direction: no fill, just the outline. */
@@ -55,13 +106,13 @@
   position: relative;
   display: inline-flex;
   align-items: center;
-  gap: 0.375rem;
+  gap: var(--sigvelo-spacing-1-5);
   max-width: 14rem;
   padding: 0.25rem 0.5rem;
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
   border-radius: var(--sigvelo-radius-md);
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text);
 }
 
@@ -100,7 +151,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0.125rem;
+  padding: var(--sigvelo-spacing-0-5);
   border: none;
   border-radius: var(--sigvelo-radius-sm);
   background: none;
@@ -110,8 +161,8 @@
 
 .prompt-input__attachment[data-image] .prompt-input__attachment-remove {
   position: absolute;
-  inset-block-start: 0.125rem;
-  inset-inline-end: 0.125rem;
+  inset-block-start: var(--sigvelo-spacing-0-5);
+  inset-inline-end: var(--sigvelo-spacing-0-5);
   background-color: color-mix(in oklab, var(--sigvelo-color-surface), transparent 20%);
 }
 
@@ -134,7 +185,7 @@
   background-color: transparent;
   color: var(--sigvelo-color-text);
   font-family: inherit;
-  font-size: 0.875rem;
+  font-size: var(--sigvelo-text-sm);
   line-height: 1.5;
   resize: none;
   overflow-y: hidden;
@@ -176,7 +227,7 @@
 }
 
 .prompt-input__button {
-  gap: 0.375rem;
+  gap: var(--sigvelo-spacing-1-5);
   color: var(--sigvelo-color-text-muted);
 }
 
@@ -184,6 +235,65 @@
   color: var(--sigvelo-color-text);
 }
 
+.prompt-input__dictation {
+  min-inline-size: 2.75rem;
+  min-block-size: 2.75rem;
+}
+
+.prompt-input__dictation[data-listening] {
+  color: var(--sigvelo-color-primary-bg);
+  background-color: var(--sigvelo-color-primary-bg-subtle);
+}
+
+.prompt-input__dictation[data-error] {
+  color: var(--sigvelo-color-danger-text);
+}
+
+.prompt-input__dictation-icon {
+  --prompt-input-dictation-level: 0;
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.prompt-input__dictation[data-listening] .prompt-input__dictation-icon::before {
+  position: absolute;
+  inline-size: 1.75rem;
+  block-size: 1.75rem;
+  border: var(--sigvelo-border-width) solid currentColor;
+  border-radius: 999rem;
+  opacity: calc(0.2 + var(--prompt-input-dictation-level) * 0.6);
+  transform: scale(calc(0.8 + var(--prompt-input-dictation-level) * 0.25));
+  transition:
+    opacity 75ms linear,
+    transform 75ms linear;
+  content: "";
+}
+
+.prompt-input__dictation[data-starting] .prompt-input__dictation-icon {
+  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;
+  }
+}
+
 .prompt-input__tools .prompt-input__action-menu-trigger[data-popup-open] {
   color: var(--sigvelo-color-text);
   background-color: color-mix(in oklab, transparent, var(--sigvelo-color-text) 5%);
@@ -225,16 +335,15 @@
   margin-inline-end: 0.5rem;
 }
 
-/* Undo .menu__trigger's boxed chrome — this trigger is a ghost footer button
-   like its neighbors: transparent at rest, background only on hover/open. */
 .prompt-input__permissions-trigger {
   gap: 0.25rem;
-  padding-block: 0.25rem;
-  padding-inline: 0.5rem;
-  font-size: 0.75rem;
-  font-weight: inherit;
-  background: none;
-  border: none;
+}
+
+.prompt-input__permissions-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
 }
 
 .prompt-input__permissions-trigger:hover,
@@ -263,6 +372,38 @@
   white-space: nowrap;
 }
 
+@container prompt-input (max-width: 36rem) {
+  .prompt-input__footer {
+    gap: var(--sigvelo-spacing-1);
+  }
+
+  .prompt-input__tools {
+    min-width: 0;
+    flex-wrap: nowrap;
+  }
+
+  .prompt-input__button[data-responsive-label] {
+    inline-size: 2.75rem;
+    min-block-size: 2.75rem;
+    padding-inline: 0;
+    border-radius: var(--sigvelo-radius-full);
+  }
+
+  .prompt-input__button[data-responsive-label] > span,
+  .prompt-input__permissions-current,
+  .prompt-input__permissions-chevron {
+    display: none;
+  }
+
+  .prompt-input__permissions-trigger {
+    inline-size: 2.75rem;
+    min-block-size: 2.75rem;
+    padding-inline: 0;
+    justify-content: center;
+    border-radius: var(--sigvelo-radius-full);
+  }
+}
+
 .prompt-input__permissions-current-option:not([data-active]) {
   visibility: hidden;
 }
@@ -272,9 +413,9 @@
 }
 
 .prompt-input__permissions-question {
-  padding-block: 0.375rem;
-  padding-inline: 0.75rem;
-  font-size: 0.75rem;
+  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);
 }
 
@@ -285,16 +426,16 @@
 .prompt-input__permissions-option-text {
   display: flex;
   flex-direction: column;
-  gap: 0.125rem;
+  gap: var(--sigvelo-spacing-0-5);
   min-width: 0;
 }
 
 .prompt-input__permissions-option-label {
-  font-size: 0.8125rem;
+  font-size: var(--sigvelo-text-compact);
 }
 
 .prompt-input__permissions-option-description {
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
 }
 
@@ -305,8 +446,8 @@
 }
 
 .prompt-input__permissions-check::before {
-  width: 0.625rem;
-  height: 0.375rem;
+  width: var(--sigvelo-spacing-2-5);
+  height: var(--sigvelo-spacing-1-5);
   background-color: transparent;
   border-radius: 0;
   border-inline-start: 2px solid currentColor;
@@ -322,10 +463,10 @@
 .prompt-input__hover-card-content {
   position: absolute;
   z-index: 20;
-  inset-block-start: calc(100% + 0.375rem);
+  inset-block-start: calc(100% + var(--sigvelo-spacing-1-5));
   inset-inline-start: 0;
   min-width: 14rem;
-  padding: 0.75rem;
+  padding: var(--sigvelo-spacing-3);
   color: var(--sigvelo-color-text);
   background-color: var(--sigvelo-color-surface);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -337,7 +478,7 @@
 .prompt-input__tab-label {
   margin: 0;
   color: var(--sigvelo-color-text-muted);
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   font-weight: var(--sigvelo-font-weight-semibold);
 }
 
@@ -346,8 +487,8 @@
   align-items: center;
   gap: 0.5rem;
   padding-block: 0.5rem;
-  padding-inline: 0.75rem;
-  font-size: 0.75rem;
+  padding-inline: var(--sigvelo-spacing-3);
+  font-size: var(--sigvelo-text-xs);
 }
 
 .prompt-input__command-list {
@@ -360,7 +501,7 @@
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  font-size: 0.8125rem;
+  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. */
@@ -388,13 +529,13 @@
   margin-inline-start: auto;
   flex-shrink: 0;
   color: var(--sigvelo-color-text-muted);
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
 }
 
 .prompt-input__approval-preview {
   max-height: 6rem;
-  padding-block: 0.375rem;
-  padding-inline: 0.625rem;
+  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;
@@ -403,7 +544,7 @@
   border-radius: var(--sigvelo-radius-md);
   color: var(--sigvelo-color-text-muted);
   font-family: var(--sigvelo-font-mono);
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   line-height: 1.5;
 }
 
@@ -418,7 +559,7 @@
 .prompt-input__approval-options {
   display: flex;
   flex-direction: column;
-  gap: 0.125rem;
+  gap: var(--sigvelo-spacing-0-5);
 }
 
 .prompt-input__approval-option {
@@ -457,7 +598,7 @@
     var(--sigvelo-color-neutral-border-subtle);
   border-radius: var(--sigvelo-radius-full);
   color: var(--sigvelo-color-text-muted);
-  font-size: 0.6875rem;
+  font-size: var(--sigvelo-text-2xs);
 }
 
 .prompt-input__approval-option[data-selected] .prompt-input__approval-key {
@@ -469,7 +610,7 @@
 .prompt-input__approval-arrows {
   margin-inline-start: auto;
   color: var(--sigvelo-color-text-muted);
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   visibility: hidden;
 }
 
@@ -506,7 +647,7 @@
 
 .prompt-input__approval-submit {
   flex-shrink: 0;
-  gap: 0.375rem;
+  gap: var(--sigvelo-spacing-1-5);
 }
 
 .prompt-input__approval-kbd {
@@ -526,7 +667,7 @@
 
 @media (prefers-reduced-motion: reduce) {
   .prompt-input__submit-spinner {
-    animation-duration: 3s;
+    animation: none;
   }
 }
 

package/dist/styles/queue.css

@@ -3,7 +3,7 @@
   flex-direction: column;
   gap: 0.5rem;
   width: 100%;
-  font-family: var(--sigvelo-font-sans);
+  font-family: inherit;
   color: var(--sigvelo-color-text);
 }
 
@@ -22,7 +22,7 @@
   border: none;
   border-radius: var(--sigvelo-radius-sm);
   font-family: inherit;
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   font-weight: var(--sigvelo-font-weight-bold);
   text-transform: uppercase;
   letter-spacing: 0.05em;
@@ -41,14 +41,12 @@
 
 .queue__section-trigger:focus-visible {
   outline: none;
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px var(--sigvelo-color-focus);
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
 }
 
 .queue__section-icon {
   display: inline-flex;
-  transition: transform 200ms ease;
+  transition: transform var(--sigvelo-duration-medium) var(--sigvelo-ease-standard);
 }
 
 .queue__section-trigger[data-panel-open] .queue__section-icon {
@@ -65,20 +63,6 @@
   /* Badge sm already sized appropriately */
 }
 
-.queue__section-content {
-  height: var(--collapsible-panel-height);
-  overflow: hidden;
-  transition:
-    height 200ms ease,
-    opacity 200ms ease;
-}
-
-.queue__section-content[data-starting-style],
-.queue__section-content[data-ending-style] {
-  height: 0;
-  opacity: 0;
-}
-
 .queue__list {
   margin-block: 0.5rem 0.25rem;
 }
@@ -94,7 +78,7 @@
 .queue__list-inner {
   display: flex;
   flex-direction: column;
-  gap: 0.125rem;
+  gap: var(--sigvelo-spacing-0-5);
   margin: 0;
   padding: 0;
   list-style: none;
@@ -103,7 +87,7 @@
 .queue__item {
   display: flex;
   align-items: flex-start;
-  gap: 0.625rem;
+  gap: var(--sigvelo-spacing-2-5);
   padding-block: 0.5rem;
   padding-inline: 0.5rem;
   border-radius: var(--sigvelo-radius-sm);
@@ -134,7 +118,7 @@
   justify-content: center;
   width: 1rem;
   height: 1rem;
-  margin-block-start: 0.125rem;
+  margin-block-start: var(--sigvelo-spacing-0-5);
   border-radius: var(--sigvelo-radius-full);
   color: var(--sigvelo-color-text-muted);
   flex-shrink: 0;
@@ -155,14 +139,14 @@
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
-  font-size: 0.875rem;
+  font-size: var(--sigvelo-text-sm);
   color: var(--sigvelo-color-text);
   line-height: 1.4;
 }
 
 .queue__item-description {
   margin: 0;
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
   line-height: 1.4;
 }
@@ -192,7 +176,7 @@
 .queue__item-attachment {
   display: flex;
   align-items: center;
-  gap: 0.375rem;
+  gap: var(--sigvelo-spacing-1-5);
   margin-block-start: 0.25rem;
 }
 
@@ -208,12 +192,12 @@
 .queue__item-file {
   display: inline-flex;
   align-items: center;
-  gap: 0.375rem;
+  gap: var(--sigvelo-spacing-1-5);
   padding-block: 0.3125rem;
   padding-inline: 0.5rem;
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   border-radius: var(--sigvelo-radius-sm);
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text);
 }
 

package/dist/styles/radio.css

@@ -1,6 +1,6 @@
 .radio-group {
   display: flex;
-  gap: 0.75rem;
+  gap: var(--sigvelo-spacing-3);
 }
 
 .radio-group--vertical {
@@ -39,9 +39,7 @@
 
 .radio:focus-visible {
   outline: none;
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px var(--sigvelo-color-focus);
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
 }
 
 .radio[data-checked] {
@@ -54,13 +52,11 @@
 }
 
 .radio:is([aria-invalid="true"], [data-invalid="true"], [data-invalid=""]):focus-visible {
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px color-mix(in oklab, var(--sigvelo-color-danger-bg), transparent 80%);
+  box-shadow: var(--sigvelo-recipe-invalid-focus-shadow);
 }
 
 .radio[data-disabled] {
-  opacity: 0.5;
+  opacity: var(--sigvelo-recipe-disabled-opacity);
   cursor: not-allowed;
 }
 

package/dist/styles/reasoning.css

@@ -2,41 +2,10 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  font-family: var(--sigvelo-font-sans);
-  color: var(--sigvelo-color-text);
-}
-
-.reasoning__trigger {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding-block: 0.5rem;
-  padding-inline: 0.75rem;
-  background-color: transparent;
-  border: none;
-  border-radius: var(--sigvelo-radius-sm);
-  color: var(--sigvelo-color-text-muted);
   font-family: inherit;
-  font-size: 0.8125rem;
-  font-weight: var(--sigvelo-font-weight-semibold);
-  cursor: pointer;
-  transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.reasoning__trigger:hover:not([data-disabled]) {
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
   color: var(--sigvelo-color-text);
 }
 
-.reasoning__trigger:focus-visible {
-  outline: none;
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px var(--sigvelo-color-focus);
-}
-
 .reasoning__trigger[data-streaming] .reasoning__trigger-label {
   animation: reasoning-pulse 1400ms ease-in-out infinite;
 }
@@ -52,42 +21,19 @@
 }
 
 .reasoning__trigger-icon {
-  display: inline-flex;
   color: var(--sigvelo-color-text-muted);
 }
 
-.reasoning__trigger-icon {
-  transition: transform 200ms ease;
-}
-
-.reasoning__trigger[data-panel-open] .reasoning__trigger-icon {
-  transform: rotate(90deg);
-}
-
-.reasoning__content {
-  height: var(--collapsible-panel-height);
-  overflow: hidden;
-  transition:
-    height 200ms ease,
-    opacity 200ms ease;
-}
-
-.reasoning__content[data-starting-style],
-.reasoning__content[data-ending-style] {
-  height: 0;
-  opacity: 0;
-}
-
 .reasoning__text {
   /* Bounded so expanding never blows out the conversation scroll position */
   max-height: 20rem;
   overflow-y: auto;
   padding-block: 0.5rem;
-  padding-inline: 0.75rem;
-  margin-inline-start: 0.75rem;
+  padding-inline: var(--sigvelo-spacing-3);
+  margin-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: 0.8125rem;
+  font-size: var(--sigvelo-text-compact);
   line-height: 1.6;
 }
 
@@ -115,9 +61,4 @@
   .reasoning__text {
     border-inline-start: 2px solid CanvasText;
   }
-
-  .reasoning__trigger:focus-visible {
-    outline: 2px solid Highlight;
-    outline-offset: 2px;
-  }
 }