@mcp-b/react-components 0.12.0 → 0.14.0

package/dist/styles/codex-model-selector.css

@@ -9,9 +9,9 @@
   z-index: 0;
   display: inline-flex;
   align-items: center;
-  gap: var(--sigvelo-spacing-2);
+  gap: var(--sigvelo-spacing-1);
   max-inline-size: calc(100vi - var(--sigvelo-spacing-8));
-  min-block-size: var(--sigvelo-control-height-md);
+  min-block-size: var(--sigvelo-control-height-sm);
   padding: 0;
   color: var(--sigvelo-color-text);
   appearance: none;
@@ -19,8 +19,8 @@
   border: 0;
   border-radius: var(--sigvelo-radius-md);
   cursor: pointer;
-  font-family: var(--sigvelo-font-sans);
-  font-size: var(--sigvelo-control-text-lg);
+  font-family: inherit;
+  font-size: var(--sigvelo-control-text-md);
   font-weight: var(--sigvelo-font-weight-normal);
   line-height: 1.25;
   isolation: isolate;
@@ -49,21 +49,19 @@
 
 .codex-model-selector__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);
 }
 
 .codex-model-selector__trigger:disabled {
   cursor: not-allowed;
-  opacity: 0.5;
+  opacity: var(--sigvelo-recipe-disabled-opacity);
 }
 
 .codex-model-selector__summary {
   display: flex;
   flex: 0 1 auto;
   justify-content: center;
-  gap: var(--sigvelo-spacing-2);
+  gap: var(--sigvelo-spacing-1);
   min-inline-size: 0;
   overflow: hidden;
   text-align: center;
@@ -90,47 +88,45 @@
   flex: 0 0 auto;
 }
 
+.codex-model-selector__trigger-icon {
+  inline-size: 0.875rem;
+  block-size: 0.875rem;
+}
+
 .codex-model-selector__menu {
-  inline-size: min(28rem, calc(100vi - var(--sigvelo-spacing-8)));
-  padding: var(--sigvelo-spacing-2);
+  --sigvelo-recipe-row-padding-inline: var(--sigvelo-spacing-2);
+  --sigvelo-recipe-row-font-size: var(--sigvelo-control-text-md);
+  --sigvelo-recipe-row-radius: var(--sigvelo-radius-md);
+
+  inline-size: min(18rem, calc(100vi - var(--sigvelo-spacing-8)));
+  padding: var(--sigvelo-spacing-1);
 }
 
 .codex-model-selector__submenu {
-  inline-size: min(25.5rem, calc(100vi - var(--sigvelo-spacing-8)));
-  padding: var(--sigvelo-spacing-4) var(--sigvelo-spacing-6);
+  --sigvelo-recipe-row-padding-inline: var(--sigvelo-spacing-2);
+  --sigvelo-recipe-row-font-size: var(--sigvelo-control-text-md);
+
+  inline-size: min(18rem, calc(100vi - var(--sigvelo-spacing-8)));
+  padding: var(--sigvelo-spacing-2);
 }
 
 .codex-model-selector__submenu--model {
-  inline-size: min(35rem, calc(100vi - var(--sigvelo-spacing-8)));
+  inline-size: min(20rem, calc(100vi - var(--sigvelo-spacing-8)));
 }
 
 .codex-model-selector__submenu--speed {
-  inline-size: min(29rem, calc(100vi - var(--sigvelo-spacing-8)));
+  inline-size: min(18rem, calc(100vi - var(--sigvelo-spacing-8)));
 }
 
-.codex-model-selector__submenu-title.menu__group-label {
+.codex-model-selector__submenu-title {
   padding: 0;
-  margin-block-end: var(--sigvelo-spacing-2);
+  margin-block-end: var(--sigvelo-spacing-1);
   color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-control-text-lg);
+  font-size: var(--sigvelo-control-text-sm);
   font-weight: var(--sigvelo-font-weight-normal);
   line-height: 1.25;
 }
 
-.codex-model-selector__submenu-trigger,
-.codex-model-selector__option,
-.codex-model-selector__reset {
-  min-block-size: var(--sigvelo-control-height-lg);
-  font-size: var(--sigvelo-control-text-lg);
-}
-
-.codex-model-selector__submenu-trigger {
-  padding-block: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-4);
-  color: var(--sigvelo-color-text);
-  border-radius: var(--sigvelo-radius-md);
-}
-
 .codex-model-selector__submenu-trigger::after {
   content: none;
 }
@@ -145,11 +141,6 @@
 
 .codex-model-selector__option {
   align-items: flex-start;
-  gap: var(--sigvelo-spacing-2);
-  padding-block: var(--sigvelo-spacing-2);
-  padding-inline: 0;
-  color: var(--sigvelo-color-text);
-  border-radius: 0;
 }
 
 .codex-model-selector__option > span:first-child {
@@ -163,8 +154,8 @@
 }
 
 .codex-model-selector__option-description {
-  margin-block-start: var(--sigvelo-spacing-1);
-  font-size: var(--sigvelo-control-text-md);
+  margin-block-start: var(--sigvelo-spacing-0-5);
+  font-size: var(--sigvelo-control-text-sm);
   line-height: 1.25;
 }
 
@@ -179,14 +170,12 @@
 }
 
 .codex-model-selector__reset {
-  padding-block: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-4);
-  border-radius: var(--sigvelo-radius-md);
+  justify-content: space-between;
 }
 
 .codex-model-selector__reset-icon {
-  inline-size: var(--sigvelo-spacing-6);
-  block-size: var(--sigvelo-spacing-6);
+  inline-size: var(--sigvelo-spacing-4);
+  block-size: var(--sigvelo-spacing-4);
   margin-inline-start: auto;
 }
 

package/dist/styles/collapsible.css

@@ -8,12 +8,13 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 0.5rem;
+  gap: var(--sigvelo-recipe-control-gap);
   width: 100%;
-  padding-block: 0.75rem;
-  padding-inline: 1rem;
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.875rem;
+  min-block-size: var(--sigvelo-recipe-control-height);
+  padding-block: 0;
+  padding-inline: var(--sigvelo-recipe-control-padding-inline);
+  font-family: inherit;
+  font-size: var(--sigvelo-recipe-control-font-size);
   font-weight: var(--sigvelo-font-weight-semibold);
   text-align: start;
   color: var(--sigvelo-color-text);
@@ -33,13 +34,11 @@
 
 .collapsible__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);
 }
 
 .collapsible__trigger[data-disabled] {
-  opacity: 0.5;
+  opacity: var(--sigvelo-recipe-disabled-opacity);
   cursor: not-allowed;
 }
 
@@ -50,7 +49,7 @@
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   border-top: 5px solid currentColor;
-  transition: transform 200ms ease;
+  transition: transform var(--sigvelo-duration-medium) var(--sigvelo-ease-standard);
 }
 
 .collapsible__trigger[data-panel-open]::after {
@@ -63,25 +62,10 @@
   border-block-end-color: transparent;
 }
 
-/* The measured height sits on the base class, not behind [data-open]: during
-   close the open rule stops matching before the ending style lands, height
-   computes to `auto`, and `auto → 0` can't transition — the panel snaps shut
-   instead of folding. (Base UI's documented panel pattern.) */
 .collapsible__panel {
-  height: var(--collapsible-panel-height);
-  overflow: hidden;
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.875rem;
+  font-family: inherit;
+  font-size: var(--sigvelo-text-sm);
   color: var(--sigvelo-color-text);
-  transition:
-    height 200ms ease,
-    opacity 200ms ease;
-}
-
-.collapsible__panel[data-starting-style],
-.collapsible__panel[data-ending-style] {
-  height: 0;
-  opacity: 0;
 }
 
 .collapsible__panel > * {

package/dist/styles/combobox.css

@@ -1,145 +1,22 @@
 .combobox__input {
   flex: 1;
-  min-width: 0;
-  padding-block: 0.5rem;
-  padding-inline: 0.75rem;
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.875rem;
-  color: var(--sigvelo-color-text);
-  background-color: transparent;
-  border: none;
-  outline: none;
-}
-
-.combobox__input::placeholder {
-  color: var(--sigvelo-color-text-muted);
-}
-
-.combobox__trigger {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.5rem;
-  color: var(--sigvelo-color-text-muted);
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
-  transition: color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.combobox__trigger:hover {
-  color: var(--sigvelo-color-text);
-}
-
-.combobox__trigger:focus-visible {
-  outline: none;
 }
 
 .combobox__trigger[data-popup-open] {
   color: var(--sigvelo-color-text);
 }
 
-.combobox__clear {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.25rem;
-  color: var(--sigvelo-color-text-muted);
-  background-color: transparent;
-  border: none;
-  border-radius: var(--sigvelo-radius-sm);
-  cursor: pointer;
-  transition:
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.combobox__clear:hover {
-  color: var(--sigvelo-color-text);
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
-}
-
-.combobox__positioner {
-  z-index: 50;
-}
-
 .combobox__popup {
-  min-width: 200px;
-  max-height: 300px;
-  overflow: auto;
-  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: combobox-popup-enter var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.combobox__popup[data-ending-style] {
-  animation: combobox-popup-exit 100ms ease;
-}
-
-@keyframes combobox-popup-enter {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes combobox-popup-exit {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-}
-
-.combobox__list {
-  padding: 0.25rem;
-}
-
-.combobox__item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding-block: 0.5rem;
-  padding-inline: 0.75rem;
-  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);
-}
+  --sigvelo-recipe-surface-padding: 0;
 
-.combobox__item:hover,
-.combobox__item[data-highlighted] {
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
-  color: var(--sigvelo-color-neutral-text-on-subtle);
+  inline-size: var(--anchor-width);
+  min-inline-size: 12.5rem;
 }
 
 .combobox__item[data-selected] {
   font-weight: var(--sigvelo-font-weight-semibold);
 }
 
-.combobox__item[data-disabled] {
-  opacity: 0.5;
-  pointer-events: none;
-}
-
 .combobox__item-indicator {
   display: inline-flex;
   align-items: center;
@@ -147,26 +24,3 @@
   width: 1rem;
   color: var(--sigvelo-color-primary-bg);
 }
-
-.combobox__empty {
-  padding: 1rem;
-  text-align: center;
-  font-size: 0.875rem;
-  color: var(--sigvelo-color-text-muted);
-}
-
-.combobox__group {
-  padding-block: 0.25rem;
-}
-
-.combobox__group + .combobox__group {
-  border-block-start: 1px solid var(--sigvelo-color-neutral-border-muted);
-}
-
-.combobox__group-label {
-  padding-block: 0.375rem;
-  padding-inline: 0.75rem;
-  font-size: 0.75rem;
-  font-weight: var(--sigvelo-font-weight-semibold);
-  color: var(--sigvelo-color-text-muted);
-}

package/dist/styles/commit.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  font-family: var(--sigvelo-font-sans);
+  font-family: inherit;
   color: var(--sigvelo-color-text);
   background-color: var(--sigvelo-color-surface);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -16,13 +16,13 @@
   align-items: center;
   gap: 0.5rem;
   width: 100%;
-  padding-block: 0.625rem;
-  padding-inline: 0.75rem;
+  padding-block: var(--sigvelo-spacing-2-5);
+  padding-inline: var(--sigvelo-spacing-3);
   background-color: transparent;
   border: none;
   color: var(--sigvelo-color-text);
   font-family: inherit;
-  font-size: 0.8125rem;
+  font-size: var(--sigvelo-text-compact);
   text-align: start;
   cursor: pointer;
   transition: background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
@@ -34,16 +34,14 @@
 
 .commit__header: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);
 }
 
 .commit__header-icon {
   display: inline-flex;
   flex-shrink: 0;
   color: var(--sigvelo-color-text-muted);
-  transition: transform 200ms ease;
+  transition: transform var(--sigvelo-duration-medium) var(--sigvelo-ease-standard);
 }
 
 .commit__header[data-panel-open] .commit__header-icon {
@@ -53,7 +51,7 @@
 .commit__header-body {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: var(--sigvelo-spacing-3);
   flex: 1;
   min-width: 0;
 }
@@ -68,7 +66,7 @@
 .commit__author-avatar {
   width: 1.5rem;
   height: 1.5rem;
-  font-size: 0.625rem;
+  font-size: var(--sigvelo-text-3xs);
 }
 
 .commit__info {
@@ -90,9 +88,9 @@
 .commit__metadata {
   display: inline-flex;
   align-items: center;
-  gap: 0.375rem;
+  gap: var(--sigvelo-spacing-1-5);
   color: var(--sigvelo-color-text-muted);
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
 }
 
 .commit__separator {
@@ -101,16 +99,16 @@
 
 .commit__hash {
   font-family: var(--sigvelo-font-mono);
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
   padding-block: 0.0625rem;
-  padding-inline: 0.375rem;
+  padding-inline: var(--sigvelo-spacing-1-5);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   border-radius: var(--sigvelo-radius-sm);
 }
 
 .commit__timestamp {
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
   font-variant-numeric: tabular-nums;
 }
@@ -122,20 +120,6 @@
   flex-shrink: 0;
 }
 
-.commit__content {
-  height: var(--collapsible-panel-height);
-  overflow: hidden;
-  transition:
-    height 200ms ease,
-    opacity 200ms ease;
-}
-
-.commit__content[data-starting-style],
-.commit__content[data-ending-style] {
-  height: 0;
-  opacity: 0;
-}
-
 .commit__content-inner {
   border-block-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
@@ -154,8 +138,8 @@
   align-items: center;
   gap: 0.5rem;
   padding-block: 0.5rem;
-  padding-inline: 0.75rem;
-  font-size: 0.8125rem;
+  padding-inline: var(--sigvelo-spacing-3);
+  font-size: var(--sigvelo-text-compact);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
 }
@@ -178,7 +162,7 @@
 
 .commit__file-path {
   font-family: var(--sigvelo-font-mono);
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text);
   flex: 1;
   min-width: 0;
@@ -189,21 +173,21 @@
 
 .commit__file-additions {
   font-family: var(--sigvelo-font-mono);
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-success-text);
   font-variant-numeric: tabular-nums;
 }
 
 .commit__file-deletions {
   font-family: var(--sigvelo-font-mono);
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-danger-text);
   font-variant-numeric: tabular-nums;
 }
 
 .commit__file-changes {
   display: inline-flex;
-  gap: 0.375rem;
+  gap: var(--sigvelo-spacing-1-5);
 }
 
 @media (forced-colors: active) {

package/dist/styles/context-menu.css

@@ -3,51 +3,12 @@
 }
 
 .context-menu__positioner {
-  z-index: 50;
   outline: none;
 }
 
 .context-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);
-}
-
-.context-menu__popup[data-starting-style],
-.context-menu__popup[data-ending-style] {
-  opacity: 0;
-  transform: scale(0.95);
-}
-
-.context-menu__item,
-.context-menu__checkbox-item,
-.context-menu__radio-item,
-.context-menu__submenu-trigger {
-  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;
 }
 
 .context-menu__item--inset,
@@ -63,19 +24,6 @@
   flex: 0 0 1rem;
 }
 
-.context-menu__submenu-icon {
-  margin-inline-start: auto;
-  flex: 0 0 auto;
-}
-
-.context-menu__item[data-highlighted],
-.context-menu__checkbox-item[data-highlighted],
-.context-menu__radio-item[data-highlighted],
-.context-menu__submenu-trigger[data-highlighted] {
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
-  color: var(--sigvelo-color-neutral-text-on-subtle);
-}
-
 .context-menu__item[data-variant="destructive"] {
   color: var(--sigvelo-color-danger-text);
 }
@@ -93,30 +41,6 @@
   box-shadow: inset 0 0 0 var(--sigvelo-focus-width) var(--sigvelo-color-focus);
 }
 
-.context-menu__item[data-disabled],
-.context-menu__checkbox-item[data-disabled],
-.context-menu__radio-item[data-disabled],
-.context-menu__submenu-trigger[data-disabled] {
-  opacity: 0.5;
-  pointer-events: none;
-}
-
 .context-menu__label {
   padding-block: 0.5rem 0.25rem;
-  padding-inline: 0.75rem;
-  color: var(--sigvelo-color-text-muted);
-  font-size: 0.75rem;
-  font-weight: var(--sigvelo-font-weight-semibold);
-}
-
-.context-menu__shortcut {
-  margin-inline-start: auto;
-  color: var(--sigvelo-color-text-muted);
-  font-size: 0.75rem;
-}
-
-.context-menu__separator {
-  height: 1px;
-  margin: 0.25rem 0;
-  background-color: var(--sigvelo-color-neutral-border-muted);
 }