@mcp-b/react-components 0.3.0 → 0.5.0

package/dist/styles/prompt-input.css

@@ -1,9 +1,9 @@
 .prompt-input {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
-  padding-block: 0.875rem;
-  padding-inline: 1rem;
+  gap: 0.375rem;
+  padding-block: 0.625rem;
+  padding-inline: 0.75rem;
   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)
@@ -43,6 +43,83 @@
   min-height: 1.5rem;
 }
 
+.prompt-input__attachments {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+/* Hairline chip, borderless-direction: no fill, just the outline. */
+.prompt-input__attachment {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  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;
+  color: var(--sigvelo-color-text);
+}
+
+.prompt-input__attachment[data-image] {
+  padding: 0;
+  overflow: hidden;
+}
+
+.prompt-input__attachment-zoom {
+  display: block;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: zoom-in;
+}
+
+.prompt-input__attachment-thumb {
+  display: block;
+  width: 3rem;
+  height: 3rem;
+  object-fit: cover;
+}
+
+.prompt-input__attachment-icon {
+  flex-shrink: 0;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.prompt-input__attachment-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.prompt-input__attachment-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.125rem;
+  border: none;
+  border-radius: var(--sigvelo-radius-sm);
+  background: none;
+  color: var(--sigvelo-color-text-muted);
+  cursor: pointer;
+}
+
+.prompt-input__attachment[data-image] .prompt-input__attachment-remove {
+  position: absolute;
+  inset-block-start: 0.125rem;
+  inset-inline-end: 0.125rem;
+  background-color: color-mix(in oklab, var(--sigvelo-color-surface), transparent 20%);
+}
+
+.prompt-input__attachment-remove:hover {
+  color: var(--sigvelo-color-text);
+  background-color: color-mix(in oklab, transparent, var(--sigvelo-color-text) 8%);
+}
+
 .prompt-input__body {
   display: flex;
   align-items: stretch;
@@ -57,7 +134,7 @@
   background-color: transparent;
   color: var(--sigvelo-color-text);
   font-family: inherit;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   line-height: 1.5;
   resize: none;
   overflow-y: hidden;
@@ -84,12 +161,18 @@
   padding-block-start: 0.25rem;
 }
 
+.prompt-input__footer-end {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
 .prompt-input__tools {
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
   flex-wrap: wrap;
-  min-height: 2rem;
+  min-height: 1.75rem;
 }
 
 .prompt-input__button {
@@ -136,6 +219,95 @@
   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-trigger:hover,
+.prompt-input__permissions-trigger[data-popup-open] {
+  background-color: color-mix(in oklab, transparent, var(--sigvelo-color-text) 5%);
+}
+
+/* Bypass is the loud one — Codex-style warning tint so it can't be missed. */
+.prompt-input__permissions-trigger[data-mode="bypass"],
+.prompt-input__permissions-trigger[data-mode="bypass"]:hover:not([data-disabled]) {
+  color: var(--sigvelo-color-warning-text);
+}
+
+/* Both modes stacked in one cell; the trigger is always as wide as the
+   widest, so toggling can't shift the footer. */
+.prompt-input__permissions-current {
+  display: inline-grid;
+}
+
+.prompt-input__permissions-current-option {
+  grid-area: 1 / 1;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  justify-self: start;
+  white-space: nowrap;
+}
+
+.prompt-input__permissions-current-option:not([data-active]) {
+  visibility: hidden;
+}
+
+.prompt-input__permissions-menu {
+  min-width: 17rem;
+}
+
+.prompt-input__permissions-question {
+  padding-block: 0.375rem;
+  padding-inline: 0.75rem;
+  font-size: 0.75rem;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.prompt-input__permissions-option {
+  align-items: flex-start;
+}
+
+.prompt-input__permissions-option-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 0;
+}
+
+.prompt-input__permissions-option-label {
+  font-size: 0.8125rem;
+}
+
+.prompt-input__permissions-option-description {
+  font-size: 0.75rem;
+  color: var(--sigvelo-color-text-muted);
+}
+
+/* Check on the right, drawn like the checkbox indicator instead of the dot. */
+.prompt-input__permissions-check {
+  margin-inline-start: auto;
+  align-self: center;
+}
+
+.prompt-input__permissions-check::before {
+  width: 0.625rem;
+  height: 0.375rem;
+  background-color: transparent;
+  border-radius: 0;
+  border-inline-start: 2px solid currentColor;
+  border-block-end: 2px solid currentColor;
+  transform: rotate(-45deg) translateY(-1px);
+}
+
 .prompt-input__hover-card {
   position: relative;
   display: inline-block;
@@ -182,7 +354,11 @@
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
+  /* 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 {
@@ -192,6 +368,11 @@
   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;
@@ -209,6 +390,8 @@
   padding-block: 0.375rem;
   padding-inline: 0.625rem;
   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);

package/dist/styles/reasoning.css

@@ -51,7 +51,6 @@
   margin: 0;
 }
 
-.reasoning__trigger-leading-icon,
 .reasoning__trigger-icon {
   display: inline-flex;
   color: var(--sigvelo-color-text-muted);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "MCP-B React components built on Base UI and shared design tokens, including Cloudflare Think chat primitives.",
   "homepage": "https://design-system.sigvelo.com",
   "bugs": {
@@ -49,7 +49,7 @@
     "anser": "^2.3.5",
     "shiki": "^3.23.0",
     "streamdown": "^2.5.0",
-    "@mcp-b/design-tokens": "0.3.0"
+    "@mcp-b/design-tokens": "0.5.0"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.194",