@mcp-b/react-components 0.11.0 → 0.13.0

package/dist/styles/mcp-server-picker.css

@@ -4,7 +4,7 @@
 
 .mcp-server-picker__trigger {
   flex-shrink: 0;
-  color: var(--sigvelo-color-text);
+  color: var(--sigvelo-color-text-muted);
   background: none;
 }
 
@@ -14,6 +14,11 @@
   background: none;
 }
 
+.mcp-server-picker__trigger > svg {
+  inline-size: 1rem;
+  block-size: 1rem;
+}
+
 .mcp-server-picker__popup {
   inline-size: min(32rem, calc(100dvw - 1rem));
   max-block-size: min(28rem, calc(100dvh - 2rem));
@@ -22,8 +27,10 @@
   overscroll-behavior: contain;
 }
 
-.mcp-server-picker__group + .mcp-server-picker__group {
-  margin-block-start: 0.25rem;
+.mcp-server-picker__row-shell {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
 }
 
 .mcp-server-picker__row {
@@ -34,6 +41,18 @@
   overflow: hidden;
 }
 
+.mcp-server-picker__row-shell[data-connection="connected"] .mcp-server-picker__row {
+  opacity: 1;
+}
+
+.mcp-server-picker__row-shell[data-connection="disconnected"] .mcp-server-picker__row {
+  opacity: 0.68;
+}
+
+.mcp-server-picker__row-shell[data-connection="disconnected"] .mcp-server-picker__description {
+  color: var(--sigvelo-color-text);
+}
+
 .mcp-server-picker__icon {
   display: inline-flex;
   flex: 0 0 auto;
@@ -61,7 +80,7 @@
   border-radius: var(--sigvelo-radius-sm);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   color: var(--sigvelo-color-neutral-text-on-subtle);
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   font-weight: var(--sigvelo-font-weight-bold);
   line-height: 1;
   text-transform: uppercase;
@@ -70,7 +89,7 @@
 .mcp-server-picker__copy {
   display: flex;
   align-items: baseline;
-  gap: 0.625rem;
+  gap: var(--sigvelo-spacing-2-5);
   min-inline-size: 0;
 }
 
@@ -83,17 +102,9 @@
   min-inline-size: 0;
   max-inline-size: 20rem;
   overflow: hidden;
-  color: var(--sigvelo-color-text-muted);
   text-overflow: ellipsis;
   white-space: nowrap;
-}
-
-.mcp-server-picker__meta {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: 1rem;
-  min-inline-size: max-content;
+  color: var(--sigvelo-color-text-muted);
 }
 
 .mcp-server-picker__status-label {
@@ -108,15 +119,47 @@
   border: 0;
 }
 
-.mcp-server-picker__row[data-status="ready"] .mcp-server-picker__meta {
+.mcp-server-picker__row-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-0-5);
+  padding-inline-end: 0.5rem;
+}
+
+.mcp-server-picker__row-status {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.mcp-server-picker__action {
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  min-block-size: 1.5rem;
+  justify-content: center;
+  padding: 0;
+}
+
+.mcp-server-picker__row-status > svg,
+.mcp-server-picker__action > svg {
+  inline-size: 0.875rem;
+  block-size: 0.875rem;
+}
+
+.mcp-server-picker__row-shell[data-status="ready"] .mcp-server-picker__row-status,
+.mcp-server-picker__row-shell[data-status="connected"] .mcp-server-picker__row-status {
   color: var(--sigvelo-color-success-text-on-subtle);
 }
 
-.mcp-server-picker__row[data-status="needs-auth"] .mcp-server-picker__meta {
+.mcp-server-picker__row-shell[data-status="needs-auth"] .mcp-server-picker__row-status,
+.mcp-server-picker__row-shell[data-status="authenticating"] .mcp-server-picker__row-status {
   color: var(--sigvelo-color-warning-text-on-subtle);
 }
 
-.mcp-server-picker__row[data-status="failed"] .mcp-server-picker__meta {
+.mcp-server-picker__row-shell[data-status="failed"] .mcp-server-picker__row-status {
   color: var(--sigvelo-color-danger-text-on-subtle);
 }
 
@@ -132,9 +175,9 @@
 
 .mcp-server-picker__empty {
   padding-block: 0.5rem;
-  padding-inline: 0.75rem;
+  padding-inline: var(--sigvelo-spacing-3);
   color: var(--sigvelo-color-text-muted);
-  font-size: 0.875rem;
+  font-size: var(--sigvelo-text-sm);
 }
 
 @media (width < 30rem) {
@@ -142,6 +185,10 @@
     flex-direction: column;
     gap: 0;
   }
+
+  .mcp-server-picker__row-shell {
+    grid-template-columns: minmax(0, 1fr);
+  }
 }
 
 @media (forced-colors: active) {

package/dist/styles/menu.css

@@ -1,84 +1,10 @@
-.menu__trigger {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  padding-block: 0.5rem;
-  padding-inline: 1rem;
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.875rem;
-  font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: 1.25;
-  color: var(--sigvelo-color-text);
-  background-color: var(--sigvelo-color-canvas);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-muted);
-  border-radius: var(--sigvelo-radius-md);
-  cursor: pointer;
-  transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.menu__trigger:hover {
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
-  color: var(--sigvelo-color-neutral-text-on-subtle);
-}
-
-.menu__trigger:focus-visible {
-  outline: none;
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px var(--sigvelo-color-focus);
-}
-
-.menu__trigger[data-popup-open] {
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
-}
-
 .menu__positioner {
-  z-index: 50;
   outline: none;
 }
 
 .menu__popup {
   min-width: 10rem;
-  padding: 0.25rem;
-  font-family: var(--sigvelo-font-sans);
-  background-color: var(--sigvelo-color-canvas);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-muted);
-  border-radius: var(--sigvelo-radius-md);
-  box-shadow:
-    0 10px 15px -3px color-mix(in oklab, var(--sigvelo-color-text), transparent 90%),
-    0 4px 6px -4px color-mix(in oklab, var(--sigvelo-color-text), transparent 90%);
-  outline: none;
-  transform-origin: var(--transform-origin);
-  transition:
-    opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    transform var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.menu__popup[data-starting-style],
-.menu__popup[data-ending-style] {
-  opacity: 0;
-  transform: scale(0.95);
-}
-
-.menu__item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding-block: 0.5rem;
-  padding-inline: 0.75rem;
-  font-size: 0.875rem;
-  line-height: 1.25;
-  color: var(--sigvelo-color-text);
-  border-radius: var(--sigvelo-radius-sm);
-  cursor: pointer;
-  user-select: none;
-  outline: none;
-  transition: background-color 100ms ease;
+  overflow-y: auto;
 }
 
 .menu__item--inset,
@@ -86,11 +12,6 @@
   padding-inline-start: 2rem;
 }
 
-.menu__item[data-highlighted] {
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
-  color: var(--sigvelo-color-neutral-text-on-subtle);
-}
-
 .menu__item[data-variant="destructive"] {
   color: var(--sigvelo-color-danger-text);
 }
@@ -100,27 +21,18 @@
   color: var(--sigvelo-color-danger-text-on-subtle);
 }
 
-.menu__item[data-disabled] {
-  opacity: 0.5;
-  pointer-events: none;
-}
-
 .menu__group {
   display: flex;
   flex-direction: column;
 }
 
 .menu__group-label {
-  padding-block: 0.5rem;
-  padding-inline: 0.75rem;
-  font-size: 0.75rem;
-  font-weight: var(--sigvelo-font-weight-semibold);
-  color: var(--sigvelo-color-text-muted);
+  padding-block: var(--sigvelo-spacing-2);
 }
 
 .menu__arrow {
-  width: 0.75rem;
-  height: 0.75rem;
+  width: var(--sigvelo-spacing-3);
+  height: var(--sigvelo-spacing-3);
   background-color: var(--sigvelo-color-canvas);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-muted);
@@ -147,46 +59,11 @@
   border-right: none;
 }
 
-.menu__separator {
-  height: 1px;
-  margin: 0.25rem 0;
-  background-color: var(--sigvelo-color-neutral-border-muted);
-}
-
 .menu__radio-group {
   display: flex;
   flex-direction: column;
 }
 
-.menu__radio-item,
-.menu__checkbox-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding-block: 0.5rem;
-  padding-inline: 0.75rem;
-  font-size: 0.875rem;
-  line-height: 1.25;
-  color: var(--sigvelo-color-text);
-  border-radius: var(--sigvelo-radius-sm);
-  cursor: pointer;
-  user-select: none;
-  outline: none;
-  transition: background-color 100ms ease;
-}
-
-.menu__radio-item[data-highlighted],
-.menu__checkbox-item[data-highlighted] {
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
-  color: var(--sigvelo-color-neutral-text-on-subtle);
-}
-
-.menu__radio-item[data-disabled],
-.menu__checkbox-item[data-disabled] {
-  opacity: 0.5;
-  pointer-events: none;
-}
-
 .menu__radio-indicator,
 .menu__checkbox-indicator {
   display: flex;
@@ -206,39 +83,15 @@
 
 .menu__checkbox-indicator::before {
   content: "";
-  width: 0.625rem;
-  height: 0.375rem;
+  width: var(--sigvelo-spacing-2-5);
+  height: var(--sigvelo-spacing-1-5);
   border-inline-start: 2px solid currentColor;
   border-block-end: 2px solid currentColor;
   transform: rotate(-45deg) translateY(-1px);
 }
 
-.menu__shortcut {
-  margin-inline-start: auto;
-  color: var(--sigvelo-color-text-muted);
-  font-size: 0.75rem;
-}
-
 .menu__submenu-trigger {
-  display: flex;
-  align-items: center;
   justify-content: space-between;
-  gap: 0.5rem;
-  padding-block: 0.5rem;
-  padding-inline: 0.75rem;
-  font-size: 0.875rem;
-  line-height: 1.25;
-  color: var(--sigvelo-color-text);
-  border-radius: var(--sigvelo-radius-sm);
-  cursor: pointer;
-  user-select: none;
-  outline: none;
-  transition: background-color 100ms ease;
-}
-
-.menu__submenu-trigger[data-highlighted] {
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
-  color: var(--sigvelo-color-neutral-text-on-subtle);
 }
 
 .menu__submenu-trigger::after {

package/dist/styles/menubar.css

@@ -13,10 +13,10 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding-block: 0.375rem;
-  padding-inline: 0.75rem;
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.875rem;
+  padding-block: var(--sigvelo-spacing-1-5);
+  padding-inline: var(--sigvelo-spacing-3);
+  font-family: inherit;
+  font-size: var(--sigvelo-text-sm);
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text);
   background-color: transparent;
@@ -35,9 +35,7 @@
 
 .menubar__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);
 }
 
 .menubar__trigger[data-popup-open] {
@@ -45,69 +43,17 @@
   color: var(--sigvelo-color-neutral-text-on-subtle);
 }
 
-.menubar__positioner {
-  z-index: 50;
-}
-
 .menubar__popup {
   min-width: 180px;
-  padding: 0.25rem;
-  background-color: var(--sigvelo-color-surface);
-  color: var(--sigvelo-color-text);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-muted);
-  border-radius: var(--sigvelo-radius-md);
-  box-shadow:
-    0 10px 15px -3px color-mix(in oklab, var(--sigvelo-color-text), transparent 90%),
-    0 4px 6px -4px color-mix(in oklab, var(--sigvelo-color-text), transparent 90%);
-  animation: menubar-popup-enter var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.menubar__popup[data-ending-style] {
-  animation: menubar-popup-exit 100ms ease;
-}
-
-@keyframes menubar-popup-enter {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes menubar-popup-exit {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
+  overflow-y: auto;
 }
 
 .menubar__item,
 .menubar__checkbox-item,
 .menubar__radio-item,
 .menubar__submenu-trigger {
-  display: flex;
-  align-items: center;
   justify-content: space-between;
   gap: 2rem;
-  padding-block: 0.375rem;
-  padding-inline: 0.5rem;
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.875rem;
-  color: var(--sigvelo-color-text);
-  border-radius: var(--sigvelo-radius-sm);
-  cursor: pointer;
-  outline: none;
-  transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .menubar__item--inset,
@@ -134,56 +80,11 @@
   flex: 0 0 1rem;
 }
 
-.menubar__submenu-icon {
-  margin-inline-start: auto;
-  flex: 0 0 auto;
-}
-
-.menubar__item:hover,
-.menubar__item:focus,
-.menubar__item[data-highlighted],
-.menubar__checkbox-item:hover,
-.menubar__checkbox-item:focus,
-.menubar__checkbox-item[data-highlighted],
-.menubar__radio-item:hover,
-.menubar__radio-item:focus,
-.menubar__radio-item[data-highlighted],
-.menubar__submenu-trigger:hover,
-.menubar__submenu-trigger:focus,
-.menubar__submenu-trigger[data-highlighted] {
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
-  color: var(--sigvelo-color-neutral-text-on-subtle);
-}
-
-.menubar__item[data-disabled],
-.menubar__checkbox-item[data-disabled],
-.menubar__radio-item[data-disabled],
-.menubar__submenu-trigger[data-disabled] {
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-.menubar__separator {
-  height: 1px;
-  margin: 0.25rem 0;
-  background-color: var(--sigvelo-color-neutral-border-muted);
-}
-
 .menubar__group {
   display: flex;
   flex-direction: column;
 }
 
 .menubar__group-label {
-  padding-block: 0.375rem;
   padding-inline: 0.5rem;
-  font-size: 0.75rem;
-  font-weight: var(--sigvelo-font-weight-semibold);
-  color: var(--sigvelo-color-text-muted);
-}
-
-.menubar__shortcut {
-  margin-inline-start: auto;
-  color: var(--sigvelo-color-text-muted);
-  font-size: 0.75rem;
 }

package/dist/styles/message-scroller.css

@@ -6,7 +6,7 @@
   height: 100%;
   min-height: 0;
   overflow: hidden;
-  font-family: var(--sigvelo-font-sans);
+  font-family: inherit;
   color: var(--sigvelo-color-text);
 }
 

package/dist/styles/message.css

@@ -3,7 +3,7 @@
   flex-direction: column;
   gap: 0.25rem;
   width: 100%;
-  font-family: var(--sigvelo-font-sans);
+  font-family: inherit;
   color: var(--sigvelo-color-text);
 }
 
@@ -21,7 +21,7 @@
   display: inline-block;
   max-width: min(42rem, 85%);
   padding-block: 0.5rem;
-  padding-inline: 0.75rem;
+  padding-inline: var(--sigvelo-spacing-3);
   border-radius: var(--sigvelo-radius-lg);
   font-size: var(--sigvelo-text-sm);
   line-height: 1.55;
@@ -66,9 +66,9 @@
 .message__attachment {
   display: inline-flex;
   align-items: center;
-  gap: 0.375rem;
+  gap: var(--sigvelo-spacing-1-5);
   max-width: 100%;
-  font-size: 0.8125rem;
+  font-size: var(--sigvelo-text-compact);
   color: inherit;
   text-decoration: none;
 }
@@ -89,9 +89,9 @@
 
 .message__attachment-zoom {
   display: block;
+  min-block-size: 0;
   max-width: 100%;
   padding: 0;
-  border: none;
   background: none;
   cursor: zoom-in;
 }
@@ -114,7 +114,7 @@
 .message__actions {
   display: inline-flex;
   align-items: center;
-  gap: 0.125rem;
+  gap: var(--sigvelo-spacing-0-5);
   padding: 0;
   color: var(--sigvelo-color-text-muted);
 }
@@ -131,6 +131,82 @@
   color: var(--sigvelo-color-text);
 }
 
+.message__copy-status {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  white-space: nowrap;
+  border: 0;
+  clip-path: inset(50%);
+}
+
+.message__edit-form {
+  display: grid;
+  gap: var(--sigvelo-spacing-3);
+  width: min(42rem, 85%);
+  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)
+    var(--sigvelo-color-neutral-border-muted);
+  border-radius: var(--sigvelo-radius-lg);
+  box-shadow: var(--sigvelo-shadow-sm);
+}
+
+.message__edit-label {
+  font-size: var(--sigvelo-text-sm);
+  font-weight: var(--sigvelo-font-weight-semibold);
+}
+
+.message__edit-textarea {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 6rem;
+  max-height: 18rem;
+  padding-block: var(--sigvelo-spacing-2-5);
+  padding-inline: var(--sigvelo-spacing-3);
+  resize: vertical;
+  font: inherit;
+  font-size: var(--sigvelo-text-sm);
+  line-height: 1.55;
+  color: var(--sigvelo-color-text);
+  background-color: var(--sigvelo-color-canvas);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-muted);
+  border-radius: var(--sigvelo-radius-md);
+}
+
+.message__edit-textarea:focus-visible {
+  outline: none;
+  border-color: var(--sigvelo-color-focus);
+  box-shadow: var(--sigvelo-recipe-focus-shadow-subtle);
+}
+
+.message__edit-textarea[aria-invalid="true"] {
+  border-color: var(--sigvelo-color-danger-border);
+}
+
+.message__edit-textarea:disabled {
+  cursor: wait;
+  opacity: 0.65;
+}
+
+.message__edit-error {
+  margin: 0;
+  font-size: var(--sigvelo-text-sm);
+  color: var(--sigvelo-color-danger-text);
+}
+
+.message__edit-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+
 .message__toolbar {
   display: flex;
   align-items: center;
@@ -163,7 +239,7 @@
 .message__branch-selector {
   display: inline-flex;
   align-items: center;
-  gap: 0.125rem;
+  gap: var(--sigvelo-spacing-0-5);
   color: var(--sigvelo-color-text-muted);
 }
 
@@ -171,12 +247,14 @@
   font-size: var(--sigvelo-text-xs);
   font-variant-numeric: tabular-nums;
   color: var(--sigvelo-color-text-muted);
-  padding-inline: 0.375rem;
+  padding-inline: var(--sigvelo-spacing-1-5);
   user-select: none;
 }
 
 @media (forced-colors: active) {
-  .message__content {
+  .message__content,
+  .message__edit-form,
+  .message__edit-textarea {
     border: 1px solid CanvasText;
   }
 }