@mcp-b/react-components 0.16.1 → 0.18.0

package/dist/styles/prompt-input.css

@@ -5,9 +5,9 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: var(--sigvelo-spacing-3);
-  padding-block: var(--sigvelo-spacing-3) var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-density-compact-control-gap);
+  padding-block: var(--sigvelo-spacing-2);
+  padding-inline: var(--sigvelo-density-compact-control-padding-inline);
   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)
@@ -17,8 +17,8 @@
   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);
+    border-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    box-shadow var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .prompt-input__recording {
@@ -26,7 +26,7 @@
   align-items: center;
   gap: var(--sigvelo-spacing-2);
   flex: 1;
-  min-width: 0;
+  min-inline-size: 0;
 }
 
 .prompt-input__recording-add {
@@ -47,10 +47,10 @@
 }
 
 .prompt-input__recording-time {
-  min-inline-size: 2.5rem;
+  min-inline-size: var(--sigvelo-control-height-lg);
   color: var(--sigvelo-color-text-muted);
   font-variant-numeric: tabular-nums;
-  font-size: var(--sigvelo-text-sm);
+  font-size: var(--sigvelo-density-compact-control-font-size);
   text-align: end;
 }
 
@@ -62,7 +62,7 @@
 .prompt-input__footer-end:has(.prompt-input__recording) {
   flex: 1;
   flex-wrap: nowrap;
-  width: 100%;
+  inline-size: 100%;
 }
 
 .prompt-input__footer-end:has(.prompt-input__recording) > :not(.prompt-input__recording),
@@ -91,7 +91,7 @@
   flex-wrap: wrap;
   align-items: center;
   gap: var(--sigvelo-spacing-1-5);
-  min-height: 1.5rem;
+  min-block-size: var(--sigvelo-spacing-6);
 }
 
 .prompt-input__attachments {
@@ -107,12 +107,12 @@
   display: inline-flex;
   align-items: center;
   gap: var(--sigvelo-spacing-1-5);
-  max-width: 14rem;
-  padding: 0.25rem 0.5rem;
+  max-inline-size: 14rem;
+  padding: var(--sigvelo-spacing-1) var(--sigvelo-spacing-2);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
   border-radius: var(--sigvelo-radius-md);
-  font-size: var(--sigvelo-text-xs);
+  font-size: var(--sigvelo-density-compact-control-font-size);
   color: var(--sigvelo-color-text);
 }
 
@@ -131,8 +131,8 @@
 
 .prompt-input__attachment-thumb {
   display: block;
-  width: 3rem;
-  height: 3rem;
+  inline-size: var(--sigvelo-spacing-12);
+  block-size: var(--sigvelo-spacing-12);
   object-fit: cover;
 }
 
@@ -176,22 +176,22 @@
   align-items: stretch;
   flex-wrap: wrap;
   gap: var(--sigvelo-spacing-1);
-  width: 100%;
+  inline-size: 100%;
 }
 
 .prompt-input__textarea {
   flex: 1;
-  min-width: 8rem;
-  width: 100%;
+  min-inline-size: 8rem;
+  inline-size: 100%;
   padding: 0;
   border: none;
   background-color: transparent;
   color: var(--sigvelo-color-text);
   font-family: inherit;
-  font-size: var(--sigvelo-text-sm);
+  font-size: var(--sigvelo-density-compact-control-font-size);
   line-height: 1.5;
   resize: none;
-  overflow-y: hidden;
+  overflow-block: hidden;
 }
 
 .prompt-input__textarea::placeholder {
@@ -214,7 +214,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--sigvelo-spacing-2);
+  gap: var(--sigvelo-density-compact-control-gap);
   padding-block-start: var(--sigvelo-spacing-1);
 }
 
@@ -229,7 +229,7 @@
   align-items: center;
   gap: var(--sigvelo-spacing-1-5);
   flex-wrap: wrap;
-  min-height: var(--sigvelo-control-height-xs);
+  min-block-size: var(--sigvelo-density-compact-control-height);
 }
 
 .prompt-input__button {
@@ -242,8 +242,8 @@
 }
 
 .prompt-input__dictation {
-  min-inline-size: var(--sigvelo-control-height-xs);
-  min-block-size: var(--sigvelo-control-height-xs);
+  min-inline-size: var(--sigvelo-density-compact-control-height);
+  min-block-size: var(--sigvelo-density-compact-control-height);
 }
 
 .prompt-input__dictation[data-listening] {
@@ -266,15 +266,15 @@
 
 .prompt-input__dictation[data-listening] .prompt-input__dictation-icon::before {
   position: absolute;
-  inline-size: 1.75rem;
-  block-size: 1.75rem;
+  inline-size: var(--sigvelo-density-compact-control-height);
+  block-size: var(--sigvelo-density-compact-control-height);
   border: var(--sigvelo-border-width) solid currentColor;
-  border-radius: 999rem;
+  border-radius: var(--sigvelo-radius-full);
   opacity: calc(0.2 + var(--prompt-input-dictation-level) * 0.6);
-  transform: scale(calc(0.8 + var(--prompt-input-dictation-level) * 0.25));
+  scale: calc(0.8 + var(--prompt-input-dictation-level) * 0.25);
   transition:
     opacity 75ms linear,
-    transform 75ms linear;
+    scale 75ms linear;
   content: "";
 }
 
@@ -282,18 +282,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;
@@ -313,10 +301,10 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  margin-inline-start: 0.5rem;
+  margin-inline-start: var(--sigvelo-spacing-2);
   padding-block: 0.0625rem;
-  padding-inline: 0.25rem;
-  border: 1px solid color-mix(in oklab, currentColor, transparent 75%);
+  padding-inline: var(--sigvelo-spacing-1);
+  border: var(--sigvelo-border-width) solid color-mix(in oklab, currentColor, transparent 75%);
   border-radius: var(--sigvelo-radius-sm);
   font-family: var(--sigvelo-font-mono);
   font-size: 0.75em;
@@ -326,7 +314,7 @@
 
 .prompt-input__submit {
   flex-shrink: 0;
-  border-radius: 999rem;
+  border-radius: var(--sigvelo-radius-full);
 }
 
 .prompt-input__stop {
@@ -340,11 +328,11 @@
 }
 
 .prompt-input__action-menu {
-  min-width: 12rem;
+  min-inline-size: 12rem;
 }
 
 .prompt-input__action-menu-icon {
-  margin-inline-end: 0.5rem;
+  margin-inline-end: var(--sigvelo-spacing-2);
 }
 
 .prompt-input__permissions-trigger {
@@ -384,19 +372,19 @@
   white-space: nowrap;
 }
 
-@container prompt-input (max-width: 36rem) {
+@container prompt-input (inline-size <= 36rem) {
   .prompt-input__footer {
     gap: var(--sigvelo-spacing-1);
   }
 
   .prompt-input__tools {
-    min-width: 0;
+    min-inline-size: 0;
     flex-wrap: nowrap;
   }
 
   .prompt-input__button[data-responsive-label] {
-    inline-size: var(--sigvelo-control-height-xs);
-    min-block-size: var(--sigvelo-control-height-xs);
+    inline-size: var(--sigvelo-density-compact-control-height);
+    min-block-size: var(--sigvelo-density-compact-control-height);
     padding-inline: 0;
     border-radius: var(--sigvelo-radius-full);
   }
@@ -408,15 +396,15 @@
   }
 
   .prompt-input__permissions-trigger {
-    inline-size: var(--sigvelo-control-height-xs);
-    min-block-size: var(--sigvelo-control-height-xs);
+    inline-size: var(--sigvelo-density-compact-control-height);
+    min-block-size: var(--sigvelo-density-compact-control-height);
     padding-inline: 0;
     justify-content: center;
     border-radius: var(--sigvelo-radius-full);
   }
 
   .prompt-input__context-trigger {
-    max-width: 11rem;
+    max-inline-size: 11rem;
   }
 
   .prompt-input__context-category,
@@ -430,7 +418,7 @@
 }
 
 .prompt-input__permissions-menu {
-  min-width: 17rem;
+  min-inline-size: 17rem;
 }
 
 .prompt-input__permissions-option {
@@ -441,15 +429,15 @@
   display: flex;
   flex-direction: column;
   gap: var(--sigvelo-spacing-0-5);
-  min-width: 0;
+  min-inline-size: 0;
 }
 
 .prompt-input__permissions-option-label {
-  font-size: var(--sigvelo-text-compact);
+  font-size: var(--sigvelo-density-compact-control-font-size);
 }
 
 .prompt-input__permissions-option-description {
-  font-size: var(--sigvelo-text-xs);
+  font-size: var(--sigvelo-density-compact-control-font-size);
   color: var(--sigvelo-color-text-muted);
 }
 
@@ -460,8 +448,8 @@
 }
 
 .prompt-input__permissions-check::before {
-  width: var(--sigvelo-spacing-2-5);
-  height: var(--sigvelo-spacing-1-5);
+  inline-size: var(--sigvelo-spacing-2-5);
+  block-size: var(--sigvelo-spacing-1-5);
   background-color: transparent;
   border-radius: 0;
   border-inline-start: 2px solid currentColor;
@@ -479,7 +467,7 @@
   z-index: 20;
   inset-block-start: calc(100% + var(--sigvelo-spacing-1-5));
   inset-inline-start: 0;
-  min-width: 14rem;
+  min-inline-size: 14rem;
   padding: var(--sigvelo-spacing-3);
   color: var(--sigvelo-color-text);
   background-color: var(--sigvelo-color-surface);
@@ -492,17 +480,18 @@
 .prompt-input__tab-label {
   margin: 0;
   color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-xs);
+  font-size: var(--sigvelo-density-compact-control-font-size);
   font-weight: var(--sigvelo-font-weight-semibold);
 }
 
 .prompt-input__tab-item {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  padding-block: 0.5rem;
-  padding-inline: var(--sigvelo-spacing-3);
-  font-size: var(--sigvelo-text-xs);
+  gap: var(--sigvelo-density-compact-control-gap);
+  min-block-size: var(--sigvelo-density-compact-control-height);
+  padding-block: var(--sigvelo-spacing-1);
+  padding-inline: var(--sigvelo-density-compact-control-padding-inline);
+  font-size: var(--sigvelo-density-compact-control-font-size);
 }
 
 .prompt-input__command-list {
@@ -511,48 +500,26 @@
 }
 
 .prompt-input__command-positioner {
-  width: min(var(--anchor-width), calc(100vw - var(--sigvelo-spacing-4)));
-  max-height: min(24rem, var(--available-height));
+  inline-size: min(var(--anchor-width), calc(100dvi - var(--sigvelo-spacing-4)));
+  max-block-size: 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);
+
+  inline-size: 100%;
+  max-block-size: min(24rem, var(--available-height));
+  overflow-inline: hidden;
+  overflow-block: auto;
 }
 
 .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;
+  min-inline-size: 0;
 }
 
 .prompt-input__command-icon {
@@ -561,8 +528,8 @@
 }
 
 .prompt-input__command-icon > svg {
-  width: 1rem;
-  height: 1rem;
+  inline-size: var(--sigvelo-density-compact-control-icon-size);
+  block-size: var(--sigvelo-density-compact-control-icon-size);
 }
 
 .prompt-input__command-copy {
@@ -570,13 +537,13 @@
   grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: baseline;
   column-gap: var(--sigvelo-spacing-2);
-  min-width: 0;
+  min-inline-size: 0;
 }
 
 .prompt-input__context-option-copy {
   display: flex;
   flex-direction: column;
-  min-width: 0;
+  min-inline-size: 0;
 }
 
 .prompt-input__command-description {
@@ -587,7 +554,7 @@
 
 .prompt-input__command-meta {
   color: var(--prompt-input-secondary-text);
-  font-size: var(--sigvelo-text-compact);
+  font-size: var(--sigvelo-density-compact-control-font-size);
   white-space: nowrap;
 }
 
@@ -609,7 +576,7 @@
   padding-inline: var(--sigvelo-spacing-1);
   color: var(--sigvelo-color-primary-text);
   font-weight: inherit;
-  font-size: var(--sigvelo-text-base);
+  font-size: var(--sigvelo-density-compact-control-font-size);
 }
 
 .prompt-input__reference-icon,
@@ -620,7 +587,7 @@
 
 .prompt-input__reference-label {
   overflow: hidden;
-  max-width: 18rem;
+  max-inline-size: 18rem;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -638,20 +605,20 @@
   opacity: 1;
 }
 
-@container prompt-input (width < 28rem) {
+@container prompt-input (inline-size < 28rem) {
   .prompt-input__reference-label {
-    max-width: 12rem;
+    max-inline-size: 12rem;
   }
 }
 
 .prompt-input__command-description,
 .prompt-input__context-description {
   color: var(--prompt-input-secondary-text);
-  font-size: var(--sigvelo-text-compact);
+  font-size: var(--sigvelo-density-compact-control-font-size);
 }
 
 .prompt-input__context-trigger {
-  max-width: min(20rem, 45cqi);
+  max-inline-size: min(20rem, 45cqi);
 }
 
 .prompt-input__context-category,
@@ -677,8 +644,8 @@
 .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)));
+  min-inline-size: min(22rem, calc(100dvi - var(--sigvelo-spacing-4)));
+  max-inline-size: min(28rem, calc(100dvi - var(--sigvelo-spacing-4)));
 }
 
 .prompt-input__context-option {
@@ -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);