@mcp-b/react-components 0.14.2 → 0.16.0

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;

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:focus-visible {
-  outline: none;
-  box-shadow: var(--sigvelo-recipe-focus-shadow);
+.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[data-panel-open],
-.subagent-run__trigger[aria-pressed="true"] {
-  border-color: var(--sigvelo-color-neutral-border-muted);
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
+.subagent-run__selector {
+  max-inline-size: 14rem;
+  justify-content: flex-start;
+  border-radius: var(--sigvelo-radius-full);
+  text-align: start;
 }
 
-.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);
   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;
@@ -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/textarea.css

@@ -0,0 +1,20 @@
+.textarea {
+  inline-size: 100%;
+  block-size: auto;
+  min-block-size: 5rem;
+  padding-block: var(--sigvelo-spacing-2-5);
+  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;
+  }
+}

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

@@ -15,35 +15,12 @@
 }
 
 .think-execution-workbench__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--sigvelo-spacing-3);
   flex: 0 0 auto;
-  min-block-size: 2.75rem;
-  padding-block: var(--sigvelo-spacing-1-5);
-  padding-inline: var(--sigvelo-spacing-3) var(--sigvelo-spacing-2-5);
-  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-}
-
-.think-execution-workbench__heading {
-  display: inline-flex;
-  align-items: center;
-  min-inline-size: 0;
-  gap: var(--sigvelo-spacing-1-5);
 }
 
 .think-execution-workbench__title {
-  min-inline-size: 0;
   margin: 0;
-  font-size: var(--sigvelo-text-sm);
-  font-weight: 650;
-  line-height: 1;
-}
-
-.think-execution-workbench__refresh {
-  flex: 0 0 auto;
+  font: inherit;
 }
 
 .think-execution-workbench__error {
@@ -72,6 +49,13 @@
   overflow: auto;
 }
 
+.think-execution-detail {
+  display: grid;
+  align-content: start;
+  gap: var(--sigvelo-spacing-4);
+  min-inline-size: 0;
+}
+
 .think-execution-workbench__run-list {
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
@@ -139,23 +123,7 @@
   padding-block: var(--sigvelo-spacing-2-5);
   padding-inline: 0.25rem;
   border-radius: inherit;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  font: inherit;
   text-align: start;
-  cursor: pointer;
-}
-
-.think-execution-workbench__run:hover:not(:disabled),
-.think-execution-workbench__run:focus-visible {
-  background: var(--sigvelo-color-neutral-bg-subtle);
-}
-
-.think-execution-workbench__run:focus-visible,
-.think-execution-workbench__run-actions:focus-visible {
-  outline: 2px solid var(--sigvelo-color-focus);
-  outline-offset: -2px;
 }
 
 .think-execution-workbench__run-copy {
@@ -216,26 +184,6 @@
   block-size: 1rem;
 }
 
-.think-execution-workbench__status[data-tone="success"] {
-  color: var(--sigvelo-color-success-text);
-}
-
-.think-execution-workbench__status[data-tone="danger"] {
-  color: var(--sigvelo-color-danger-text);
-}
-
-.think-execution-workbench__status[data-tone="warning"] {
-  color: var(--sigvelo-color-warning-text);
-}
-
-.think-execution-workbench__status[data-tone="primary"] {
-  color: var(--sigvelo-color-primary-text);
-}
-
-.think-execution-workbench__status[data-status="running"] svg {
-  animation: think-execution-workbench-spin 0.8s linear infinite;
-}
-
 .think-execution-workbench__run-actions {
   inline-size: 2rem;
   min-block-size: 2rem;
@@ -302,12 +250,6 @@
   margin: 0;
 }
 
-@keyframes think-execution-workbench-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 @container (width >= 44rem) {
   .think-execution-workbench__content {
     grid-template-rows: minmax(0, 1fr);
@@ -321,12 +263,6 @@
   }
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .think-execution-workbench__status[data-status="running"] svg {
-    animation: none;
-  }
-}
-
 @media (forced-colors: active) {
   .think-execution-workbench {
     border: 1px solid canvastext;