@mcp-b/react-components 0.3.0 → 0.4.0

package/dist/styles/context.css

@@ -3,20 +3,19 @@
   font-family: var(--sigvelo-font-sans);
 }
 
+/* Bare ring icon — undo the popover__trigger pill chrome. */
 .context__trigger {
   display: inline-flex;
   align-items: center;
-  gap: 0.375rem;
-  font-variant-numeric: tabular-nums;
-}
-
-.context__trigger-ring {
-  display: inline-flex;
+  justify-content: center;
+  padding: 0.25rem;
+  background: none;
+  border: none;
+  border-radius: var(--sigvelo-radius-sm);
 }
 
-.context__trigger-label {
-  font-size: 0.75rem;
-  color: var(--sigvelo-color-text-muted);
+.context__trigger:hover {
+  background-color: color-mix(in oklab, transparent, var(--sigvelo-color-text) 5%);
 }
 
 .context__content {
@@ -98,7 +97,7 @@
 
 .context__row {
   display: grid;
-  grid-template-columns: 1fr auto auto;
+  grid-template-columns: 1fr auto;
   gap: 0.75rem;
   font-size: 0.75rem;
   align-items: baseline;
@@ -113,13 +112,6 @@
   font-variant-numeric: tabular-nums;
 }
 
-.context__row-cost {
-  color: var(--sigvelo-color-text-muted);
-  font-family: var(--sigvelo-font-mono);
-  font-size: 0.6875rem;
-  font-variant-numeric: tabular-nums;
-}
-
 .context__footer {
   display: flex;
   flex-direction: column;

package/dist/styles/index.css

@@ -12,6 +12,7 @@
 @import "./agent-connection.css" layer(components);
 @import "./agent-chat.css" layer(components);
 @import "./alert-dialog.css" layer(components);
+@import "./attachment-preview.css" layer(components);
 @import "./autocomplete.css" layer(components);
 @import "./avatar.css" layer(components);
 @import "./badge.css" layer(components);
@@ -45,6 +46,7 @@
 @import "./separator.css" layer(components);
 @import "./slider.css" layer(components);
 @import "./stepper.css" layer(components);
+@import "./suggestions.css" layer(components);
 @import "./switch.css" layer(components);
 @import "./tabs.css" layer(components);
 @import "./toast.css" layer(components);

package/dist/styles/message.css

@@ -57,6 +57,54 @@
   overflow: auto;
 }
 
+.message__attachment {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  max-width: 100%;
+  font-size: 0.8125rem;
+  color: inherit;
+  text-decoration: none;
+}
+
+.message__attachment:hover .message__attachment-name {
+  text-decoration: underline;
+}
+
+.message__attachment-icon {
+  flex-shrink: 0;
+}
+
+.message__attachment-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.message__attachment-zoom {
+  display: block;
+  max-width: 100%;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: zoom-in;
+}
+
+.message__attachment-image {
+  display: block;
+  max-width: 16rem;
+  max-height: 16rem;
+  border-radius: var(--sigvelo-radius-md);
+}
+
+/* Quiet annotation under a part whose stored content was compacted. */
+.message__compacted {
+  margin-block-start: 0.25rem;
+  font-size: var(--sigvelo-text-xs);
+  font-style: italic;
+  color: var(--sigvelo-color-text-muted);
+}
+
 .message__actions {
   display: inline-flex;
   align-items: center;

package/dist/styles/prompt-input.css

@@ -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;
@@ -84,6 +161,12 @@
   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;
@@ -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;

package/dist/styles/suggestions.css

@@ -0,0 +1,21 @@
+.suggestions {
+  width: 100%;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.suggestions::-webkit-scrollbar {
+  display: none;
+}
+
+.suggestions__row {
+  display: flex;
+  width: max-content;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.suggestions__chip {
+  border-radius: var(--sigvelo-radius-full);
+  white-space: nowrap;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.3.0",
+  "version": "0.4.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.4.0"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.194",