@mcp-b/react-components 0.14.2 → 0.16.1

package/dist/styles/responsive-sidebar-shell.css

@@ -0,0 +1,169 @@
+.responsive-sidebar-shell {
+  container: responsive-sidebar-shell / inline-size;
+  block-size: 100%;
+  min-inline-size: 0;
+  min-block-size: 0;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+}
+
+.responsive-sidebar-shell__frame {
+  --responsive-sidebar-mobile-w: min(80cqi, 22rem);
+  --responsive-sidebar-closed-translate: -100%;
+  --responsive-sidebar-main-translate: var(--responsive-sidebar-mobile-w);
+
+  position: relative;
+  isolation: isolate;
+  block-size: 100%;
+  min-inline-size: 0;
+  min-block-size: 0;
+  display: grid;
+  grid-template-columns: var(--resizable-side-panel-size, 16rem) minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr);
+  overflow: hidden;
+  background: var(--sigvelo-color-canvas);
+  color: var(--sigvelo-color-text);
+  font-family: inherit;
+  transition: grid-template-columns var(--sigvelo-duration-medium) var(--sigvelo-ease-standard);
+}
+
+.responsive-sidebar-shell__frame:dir(rtl) {
+  --responsive-sidebar-closed-translate: 100%;
+  --responsive-sidebar-main-translate: calc(var(--responsive-sidebar-mobile-w) * -1);
+}
+
+.responsive-sidebar-shell__sidebar,
+.responsive-sidebar-shell__main {
+  min-inline-size: 0;
+  min-block-size: 0;
+  overflow: hidden;
+}
+
+.responsive-sidebar-shell__sidebar {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.responsive-sidebar-shell__main {
+  grid-column: 2;
+  grid-row: 1;
+  display: grid;
+  grid-template-rows: minmax(0, 1fr);
+}
+
+.responsive-sidebar-shell__peek {
+  display: none;
+}
+
+.responsive-sidebar-shell__resizer {
+  z-index: 25;
+}
+
+.responsive-sidebar-shell__frame[data-sidebar-open="false"] {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.responsive-sidebar-shell__frame[data-sidebar-open="false"] .responsive-sidebar-shell__sidebar {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  visibility: hidden;
+  transform: translateX(var(--responsive-sidebar-closed-translate));
+  pointer-events: none;
+}
+
+.responsive-sidebar-shell__frame[data-sidebar-open="false"] .responsive-sidebar-shell__main {
+  grid-column: 1;
+}
+
+@container responsive-sidebar-shell (inline-size <= 56rem) {
+  .responsive-sidebar-shell__frame {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .responsive-sidebar-shell__sidebar,
+  .responsive-sidebar-shell__main {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  .responsive-sidebar-shell__sidebar {
+    position: relative;
+    z-index: 23;
+    inset-inline-start: 50%;
+    inline-size: min(calc(100cqi - var(--sigvelo-spacing-4)), 32rem);
+    max-inline-size: none;
+    block-size: auto;
+    max-block-size: min(30rem, calc(100% - var(--sigvelo-spacing-4)));
+    align-self: start;
+    margin-block-start: var(--sigvelo-spacing-1);
+    overflow: hidden;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+      var(--sigvelo-color-neutral-border-subtle);
+    border-radius: var(--sigvelo-radius-lg);
+    box-shadow: var(--sigvelo-shadow-lg);
+    opacity: 1;
+    transform: translateX(-50%);
+    transform-origin: top center;
+    transition:
+      opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+      transform var(--sigvelo-duration-medium) var(--sigvelo-ease-emphasized);
+  }
+
+  .responsive-sidebar-shell__sidebar > .think-thread-picker {
+    block-size: auto;
+    max-block-size: inherit;
+    grid-template-rows: auto auto auto;
+  }
+
+  .responsive-sidebar-shell__sidebar .think-thread-picker__nav,
+  .responsive-sidebar-shell__sidebar .think-thread-picker__scroll,
+  .responsive-sidebar-shell__sidebar .think-thread-picker__viewport {
+    block-size: auto;
+    max-block-size: 20rem;
+  }
+
+  .responsive-sidebar-shell__resizer {
+    display: none;
+  }
+
+  .responsive-sidebar-shell__frame[data-sidebar-open="false"] .responsive-sidebar-shell__sidebar {
+    visibility: hidden;
+    opacity: 0;
+    transform: translate(-50%, calc(var(--sigvelo-spacing-2) * -1)) scale(0.98);
+  }
+
+  .responsive-sidebar-shell__main {
+    transition: none;
+  }
+
+  .responsive-sidebar-shell__frame[data-sidebar-open="true"] .responsive-sidebar-shell__main {
+    pointer-events: none;
+  }
+
+  .responsive-sidebar-shell__frame[data-sidebar-open="true"] .responsive-sidebar-shell__peek {
+    position: absolute;
+    inset-block: 0;
+    inset-inline: 0;
+    z-index: 22;
+    display: block;
+    min-inline-size: 100%;
+    padding: 0;
+    background: transparent;
+  }
+
+  .responsive-sidebar-shell__peek:hover {
+    background: transparent;
+  }
+
+  .responsive-sidebar-shell__peek:focus-visible {
+    outline: 2px solid var(--sigvelo-color-focus);
+    outline-offset: -0.25rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .responsive-sidebar-shell__sidebar {
+    transition: none;
+  }
+}

package/dist/styles/select.css

@@ -1,3 +1,13 @@
+.select__label {
+  display: flex;
+  inline-size: fit-content;
+  color: var(--sigvelo-color-text);
+  font-family: inherit;
+  font-size: var(--sigvelo-text-sm);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: 1;
+}
+
 .select__trigger {
   display: inline-flex;
   align-items: center;
@@ -48,8 +58,8 @@
 }
 
 .select__option[data-selected] {
-  background-color: var(--sigvelo-color-primary-bg);
-  color: var(--sigvelo-color-primary-text-on-bg);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  color: var(--sigvelo-color-neutral-text-on-subtle);
 }
 
 .select__item-indicator {
@@ -67,7 +77,7 @@
 }
 
 .select__group-label {
-  padding-block: 0.5rem 0.25rem;
+  padding-block: var(--sigvelo-spacing-1-5) var(--sigvelo-spacing-0-5);
 }
 
 .select__scroll-button {

package/dist/styles/sources.css

@@ -14,9 +14,9 @@
 .sources__list {
   display: flex;
   flex-direction: column;
-  gap: var(--sigvelo-spacing-1-5);
+  gap: var(--sigvelo-spacing-1);
   margin: 0;
-  padding-block: 0.5rem;
+  padding-block: var(--sigvelo-spacing-1-5);
   padding-inline: 0;
   list-style: none;
 }
@@ -28,9 +28,9 @@
 .sources__link {
   display: flex;
   align-items: flex-start;
-  gap: var(--sigvelo-spacing-2-5);
-  padding-block: 0.5rem;
-  padding-inline: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-spacing-1-5);
+  padding-block: var(--sigvelo-spacing-1-5);
+  padding-inline: var(--sigvelo-spacing-2);
   color: var(--sigvelo-color-text);
   background-color: var(--sigvelo-color-surface);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -67,7 +67,7 @@
 }
 
 .sources__link-title {
-  font-size: var(--sigvelo-text-sm);
+  font-size: var(--sigvelo-text-compact);
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text);
   overflow: hidden;

package/dist/styles/stepper.css

@@ -177,6 +177,19 @@
   min-width: 0;
 }
 
+.stepper__content[data-spacing="compact"],
+.stepper__content[data-spacing="default"] {
+  display: grid;
+}
+
+.stepper__content[data-spacing="compact"] {
+  gap: var(--sigvelo-spacing-4);
+}
+
+.stepper__content[data-spacing="default"] {
+  gap: var(--sigvelo-spacing-6);
+}
+
 .stepper__content:focus-visible {
   outline: none;
   box-shadow: var(--sigvelo-recipe-focus-shadow);

package/dist/styles/streamdown.css

@@ -21,10 +21,6 @@
   overflow-wrap: anywhere;
 }
 
-.message[data-from="user"] [data-streamdown="link"] {
-  color: var(--sigvelo-color-primary-text-on-bg);
-}
-
 [data-streamdown="link"]:focus-visible {
   outline: var(--sigvelo-focus-width) solid currentColor;
   outline-offset: var(--sigvelo-focus-offset);

package/dist/styles/subagent-run.css

@@ -7,58 +7,52 @@
 }
 
 .subagent-run__trigger {
-  display: flex;
   align-items: safe center;
-  gap: var(--sigvelo-spacing-1-5);
-  min-block-size: var(--sigvelo-control-height-md);
+  justify-content: flex-start;
   max-inline-size: 18rem;
-  padding-block: var(--sigvelo-spacing-1);
-  padding-inline: var(--sigvelo-spacing-2-5);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
   border-radius: var(--sigvelo-radius-full);
-  background-color: var(--sigvelo-color-surface);
-  color: var(--sigvelo-color-text);
-  font: inherit;
   text-align: start;
-  cursor: pointer;
-  transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
-.subagent-run__trigger:hover:not([data-disabled]) {
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
+.subagent-run__trigger[data-panel-open] {
   border-color: var(--sigvelo-color-neutral-border-muted);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+}
+
+.subagent-run__trigger-content {
+  display: flex;
+  align-items: stretch;
+  flex: 1 1 0;
+  flex-direction: column;
+  gap: 0;
+  min-inline-size: 0;
 }
 
-.subagent-run__trigger:focus-visible {
-  outline: none;
-  box-shadow: var(--sigvelo-recipe-focus-shadow);
+.subagent-run__selector {
+  max-inline-size: 14rem;
+  justify-content: flex-start;
+  border-radius: var(--sigvelo-radius-full);
+  text-align: start;
 }
 
-.subagent-run__trigger[data-panel-open],
-.subagent-run__trigger[aria-pressed="true"] {
+.subagent-run__selector[aria-pressed="true"] {
   border-color: var(--sigvelo-color-neutral-border-muted);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
-}
-
-.subagent-run__trigger[aria-pressed="true"] {
   box-shadow: inset 0 0 0 var(--sigvelo-border-width) var(--sigvelo-color-neutral-border-subtle);
 }
 
-.subagent-run__trigger-content {
+.subagent-run__list {
   display: flex;
   align-items: safe center;
-  flex: 1 1 0;
+  flex-wrap: wrap;
   gap: var(--sigvelo-spacing-1-5);
-  min-inline-size: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
-.subagent-run__trigger[data-slot="subagent-run-trigger"] .subagent-run__trigger-content {
-  align-items: stretch;
-  flex-direction: column;
-  gap: 0;
+.subagent-run__list-item {
+  min-inline-size: 0;
 }
 
 .subagent-run__heading {
@@ -79,6 +73,32 @@
   white-space: nowrap;
 }
 
+.subagent-run__selector .subagent-run__title {
+  font-size: var(--sigvelo-text-compact);
+}
+
+.subagent-run__indicator {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1rem;
+  block-size: 1rem;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.subagent-run__indicator[data-status="completed"] {
+  color: var(--sigvelo-color-success-text);
+}
+
+.subagent-run__indicator[data-status="error"] {
+  color: var(--sigvelo-color-danger-text);
+}
+
+.subagent-run__indicator:is([data-status="aborted"], [data-status="interrupted"]) {
+  color: var(--sigvelo-color-warning-text);
+}
+
 .subagent-run__description {
   display: block;
   overflow: hidden;
@@ -100,14 +120,14 @@
 .subagent-run__content-inner {
   display: flex;
   flex-direction: column;
-  gap: var(--sigvelo-spacing-3);
-  padding-block: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-spacing-2);
+  padding-block: var(--sigvelo-spacing-2);
   min-inline-size: min(30rem, calc(100vw - var(--sigvelo-spacing-8)));
   margin-block-start: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-3);
+  padding-inline: var(--sigvelo-spacing-2);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
-  border-radius: var(--sigvelo-radius-lg);
+  border-radius: var(--sigvelo-radius-md);
   background-color: var(--sigvelo-color-surface);
 }
 
@@ -171,18 +191,15 @@
 }
 
 @media (forced-colors: active) {
-  .subagent-run__trigger,
   .subagent-run__content-inner {
     border-color: CanvasText;
   }
 
-  .subagent-run__trigger:focus-visible {
-    outline: 2px solid Highlight;
-    outline-offset: 2px;
-    box-shadow: none;
-  }
-
   .subagent-run__milestone::before {
     border-color: CanvasText;
   }
+
+  .subagent-run__indicator {
+    color: CanvasText;
+  }
 }

package/dist/styles/task.css

@@ -9,18 +9,19 @@
 .task__trigger {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-1-5);
   width: 100%;
-  padding-block: var(--sigvelo-spacing-2-5);
-  padding-inline: 0.875rem;
+  min-block-size: var(--sigvelo-control-height-xs);
+  padding-block: var(--sigvelo-spacing-0-5);
+  padding-inline: var(--sigvelo-spacing-2);
   /* Ploy-style: hairline outline on the canvas, plain content inside */
   background-color: transparent;
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
-  border-radius: var(--sigvelo-radius-lg);
+  border-radius: var(--sigvelo-radius-md);
   color: var(--sigvelo-color-text-muted);
   font-family: inherit;
-  font-size: var(--sigvelo-text-sm);
+  font-size: var(--sigvelo-text-compact);
   font-weight: var(--sigvelo-font-weight-semibold);
   text-align: start;
   cursor: pointer;
@@ -65,8 +66,8 @@
   flex-direction: column;
   gap: var(--sigvelo-spacing-1-5);
   margin: 0;
-  padding-block: var(--sigvelo-spacing-3);
-  padding-inline: 1.5rem;
+  padding-block: var(--sigvelo-spacing-2);
+  padding-inline: var(--sigvelo-spacing-3);
   list-style: none;
   /* Bounded so expanding never blows out the conversation scroll position */
   max-height: 20rem;
@@ -75,8 +76,8 @@
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
   border-block-start: none;
-  border-end-start-radius: var(--sigvelo-radius-lg);
-  border-end-end-radius: var(--sigvelo-radius-lg);
+  border-end-start-radius: var(--sigvelo-radius-md);
+  border-end-end-radius: var(--sigvelo-radius-md);
 }
 
 .task__item {
@@ -89,7 +90,7 @@
 .task__item::before {
   content: "";
   position: absolute;
-  inset-inline-start: -0.875rem;
+  inset-inline-start: calc(-1 * var(--sigvelo-spacing-2));
   inset-block-start: var(--sigvelo-spacing-2-5);
   width: 0.3125rem;
   height: 0.3125rem;
@@ -97,6 +98,12 @@
   background-color: var(--sigvelo-color-neutral-border-muted);
 }
 
+@media (any-pointer: coarse) {
+  .task__trigger {
+    min-block-size: var(--sigvelo-control-height-xl);
+  }
+}
+
 .task__file {
   display: inline-flex;
   align-items: center;

package/dist/styles/test-results.css

@@ -14,9 +14,9 @@
 .test-results__header {
   display: flex;
   flex-direction: column;
-  gap: var(--sigvelo-spacing-2-5);
-  padding-block: var(--sigvelo-spacing-3);
-  padding-inline: 0.875rem;
+  gap: var(--sigvelo-spacing-2);
+  padding-block: var(--sigvelo-spacing-2);
+  padding-inline: var(--sigvelo-spacing-3);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
 }
@@ -106,10 +106,11 @@
 .test-results__suite-trigger {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-1-5);
   width: 100%;
-  padding-block: 0.5rem;
-  padding-inline: 0.875rem;
+  min-block-size: var(--sigvelo-control-height-xs);
+  padding-block: var(--sigvelo-spacing-0-5);
+  padding-inline: var(--sigvelo-spacing-2);
   background-color: transparent;
   border: none;
   color: var(--sigvelo-color-text);
@@ -174,9 +175,9 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.5rem;
-  padding-block: 0.4375rem;
-  padding-inline: 1.5rem;
+  gap: var(--sigvelo-spacing-1-5);
+  padding-block: var(--sigvelo-spacing-1-5);
+  padding-inline: var(--sigvelo-spacing-4);
   font-size: var(--sigvelo-text-compact);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
@@ -236,7 +237,13 @@
 
 .test-results__error {
   margin-block-start: var(--sigvelo-spacing-1-5);
-  margin-inline-start: 1.5rem;
+  margin-inline-start: var(--sigvelo-spacing-4);
+}
+
+@media (any-pointer: coarse) {
+  .test-results__suite-trigger {
+    min-block-size: var(--sigvelo-control-height-xl);
+  }
 }
 
 .test-results__error-text {

package/dist/styles/textarea.css

@@ -0,0 +1,20 @@
+.textarea {
+  inline-size: 100%;
+  block-size: auto;
+  min-block-size: 5rem;
+  padding-block: var(--sigvelo-spacing-2);
+  line-height: var(--sigvelo-leading-relaxed);
+}
+
+.textarea[data-resize="vertical"] {
+  resize: vertical;
+}
+
+.textarea[data-resize="none"] {
+  resize: none;
+}
+
+.textarea::selection {
+  color: var(--sigvelo-color-selection-text);
+  background-color: var(--sigvelo-color-selection-bg);
+}

package/dist/styles/theme-mode-control.css

@@ -0,0 +1,72 @@
+.theme-mode-control.radio-group {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-0-5);
+  padding: var(--sigvelo-spacing-0-5);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-lg);
+}
+
+.theme-mode-control__item.radio {
+  display: inline-flex;
+  inline-size: auto;
+  min-inline-size: 2.75rem;
+  block-size: 2.75rem;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sigvelo-spacing-1-5);
+  padding-inline: var(--sigvelo-spacing-3);
+  color: var(--sigvelo-color-text);
+  background-color: transparent;
+  border: 0;
+  border-radius: calc(var(--sigvelo-radius-lg) - var(--sigvelo-spacing-0-5));
+  font-family: inherit;
+  font-size: var(--sigvelo-text-sm);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: 1;
+  transition:
+    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+}
+
+.theme-mode-control__item.radio:hover:not([data-disabled]) {
+  color: var(--sigvelo-color-text);
+}
+
+.theme-mode-control__item.radio[data-checked] {
+  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);
+}
+
+.theme-mode-control__item.radio:focus-visible {
+  z-index: 1;
+  outline: var(--sigvelo-focus-ring);
+  outline-offset: var(--sigvelo-focus-offset);
+  box-shadow: none;
+}
+
+.theme-mode-control__item.radio[data-disabled] {
+  color: var(--sigvelo-color-text-muted);
+  opacity: var(--sigvelo-recipe-disabled-opacity);
+}
+
+.theme-mode-control--icons-only .theme-mode-control__item.radio {
+  padding-inline: 0;
+}
+
+@media (forced-colors: active) {
+  .theme-mode-control__item.radio[data-checked] {
+    color: HighlightText;
+    background-color: Highlight;
+    border-color: Highlight;
+  }
+
+  .theme-mode-control__item.radio:focus-visible {
+    outline: 2px solid Highlight;
+  }
+}

package/dist/styles/think-execution-status.css

@@ -0,0 +1,49 @@
+.think-execution-status {
+  color: var(--sigvelo-color-text-muted);
+}
+
+.think-execution-status[data-tone="success"] {
+  color: var(--sigvelo-color-success-text);
+}
+
+.think-execution-status[data-tone="danger"] {
+  color: var(--sigvelo-color-danger-text);
+}
+
+.think-execution-status[data-tone="warning"] {
+  color: var(--sigvelo-color-warning-text);
+}
+
+.think-execution-status[data-tone="primary"] {
+  color: var(--sigvelo-color-primary-text);
+}
+
+.think-execution-status:is(
+    [data-status="running"],
+    [data-status="pending"],
+    [data-status="queued"],
+    [data-status="waitingForPause"],
+    [data-status="rollingBack"]
+  )
+  svg {
+  animation: think-execution-status-spin 0.8s linear infinite;
+}
+
+@keyframes think-execution-status-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .think-execution-status:is(
+      [data-status="running"],
+      [data-status="pending"],
+      [data-status="queued"],
+      [data-status="waitingForPause"],
+      [data-status="rollingBack"]
+    )
+    svg {
+    animation: none;
+  }
+}