@mcp-b/react-components 0.16.1 → 0.17.0

package/dist/styles/model-selector.css

@@ -14,18 +14,6 @@
   color: var(--sigvelo-color-text-muted);
 }
 
-.model-selector__title {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  white-space: nowrap;
-  border: 0;
-  clip: rect(0 0 0 0);
-}
-
 .model-selector__dialog {
   display: flex;
   flex-direction: column;
@@ -176,14 +164,6 @@
   gap: 0.25rem;
 }
 
-.model-selector__name {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .model-selector__shortcut {
   padding-block: 0.0625rem;
   padding-inline: var(--sigvelo-spacing-1-5);

package/dist/styles/plan.css

@@ -0,0 +1,127 @@
+.plan__header {
+  display: grid;
+  gap: var(--sigvelo-spacing-0-5);
+  min-inline-size: 0;
+  padding-block: var(--sigvelo-spacing-2-5);
+  padding-inline: var(--sigvelo-spacing-3);
+  border-block-end: var(--sigvelo-border-width) var(--sigvelo-border-style)
+    var(--sigvelo-color-neutral-border-subtle);
+}
+
+.plan__title,
+.plan__description,
+.plan__step-title,
+.plan__step-description {
+  min-inline-size: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.plan__title {
+  color: var(--sigvelo-color-text);
+  font-size: var(--sigvelo-text-compact);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: var(--sigvelo-leading-tight);
+}
+
+.plan__description {
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  line-height: 1.5;
+}
+
+.plan__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sigvelo-spacing-3);
+  margin: 0;
+  padding-block: var(--sigvelo-spacing-3);
+  padding-inline: var(--sigvelo-spacing-3);
+  list-style: none;
+}
+
+.plan__step {
+  position: relative;
+  display: grid;
+  grid-template-columns: var(--sigvelo-spacing-4) minmax(0, 1fr);
+  column-gap: var(--sigvelo-spacing-2);
+  row-gap: var(--sigvelo-spacing-0-5);
+  min-inline-size: 0;
+}
+
+.plan__step > :not(.plan__step-indicator) {
+  grid-column: 2;
+}
+
+.plan__step:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  inset-block-start: calc(var(--sigvelo-spacing-4) + var(--sigvelo-spacing-1));
+  inset-block-end: calc(-1 * var(--sigvelo-spacing-2));
+  inset-inline-start: calc(var(--sigvelo-spacing-2) - var(--sigvelo-border-width));
+  inline-size: var(--sigvelo-border-width);
+  background-color: var(--sigvelo-color-neutral-border-subtle);
+}
+
+.plan__step-indicator {
+  z-index: 1;
+  grid-row: 1 / span 2;
+  grid-column: 1;
+  display: inline-flex;
+  inline-size: var(--sigvelo-spacing-4);
+  block-size: var(--sigvelo-spacing-4);
+  align-items: center;
+  justify-content: center;
+  color: var(--sigvelo-color-text-muted);
+  background-color: var(--sigvelo-color-surface);
+  border: var(--sigvelo-border-width) var(--sigvelo-border-style)
+    var(--sigvelo-color-neutral-border-muted);
+  border-radius: var(--sigvelo-radius-full);
+}
+
+.plan__step-indicator-visual,
+.plan__step-indicator-visual svg {
+  display: block;
+  inline-size: var(--sigvelo-spacing-3);
+  block-size: var(--sigvelo-spacing-3);
+}
+
+.plan__step[data-status="complete"] .plan__step-indicator {
+  color: var(--sigvelo-color-success-text-on-bg);
+  background-color: var(--sigvelo-color-success-bg);
+  border-color: var(--sigvelo-color-success-bg);
+}
+
+.plan__step[data-status="active"] .plan__step-indicator {
+  color: var(--sigvelo-color-primary-text-on-subtle);
+  background-color: var(--sigvelo-color-primary-bg-subtle);
+  border-color: var(--sigvelo-color-primary-border-muted);
+}
+
+.plan__step-title {
+  color: var(--sigvelo-color-text);
+  font-size: var(--sigvelo-text-compact);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: var(--sigvelo-leading-tight);
+}
+
+.plan__step[data-status="pending"] .plan__step-title {
+  color: var(--sigvelo-color-text-muted);
+}
+
+.plan__step-description {
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  line-height: 1.5;
+}
+
+@media (forced-colors: active) {
+  .plan__step-indicator {
+    border: 1px solid CanvasText;
+  }
+
+  .plan__step[data-status="active"] .plan__step-indicator {
+    color: HighlightText;
+    background-color: Highlight;
+  }
+}

package/dist/styles/popover.css

@@ -21,35 +21,6 @@
   overflow-y: auto;
 }
 
-.popover__arrow {
-  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);
-  transform: rotate(45deg);
-}
-
-.popover__arrow[data-side="top"] {
-  border-top: none;
-  border-left: none;
-}
-
-.popover__arrow[data-side="bottom"] {
-  border-bottom: none;
-  border-right: none;
-}
-
-.popover__arrow[data-side="left"] {
-  border-bottom: none;
-  border-left: none;
-}
-
-.popover__arrow[data-side="right"] {
-  border-top: none;
-  border-right: none;
-}
-
 .popover__title {
   margin-block-end: var(--sigvelo-spacing-1);
   font-size: var(--sigvelo-text-compact);
@@ -58,13 +29,6 @@
   color: var(--sigvelo-color-text);
 }
 
-.popover__description {
-  margin: 0;
-  font-size: var(--sigvelo-text-xs);
-  line-height: var(--sigvelo-leading-normal);
-  color: var(--sigvelo-color-text-muted);
-}
-
 .popover__header {
   display: grid;
   gap: var(--sigvelo-spacing-1);

package/dist/styles/prompt-input.css

@@ -1,3 +1,5 @@
+@import "./approval.css";
+
 .prompt-input {
   --prompt-input-secondary-text: var(--sigvelo-color-text-muted);
 
@@ -282,18 +284,6 @@
   animation: prompt-input-spin 900ms linear infinite;
 }
 
-.prompt-input__dictation-status {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-  border: 0;
-}
-
 @media (prefers-reduced-motion: reduce) {
   .prompt-input__dictation[data-listening] .prompt-input__dictation-icon::before {
     transition: none;
@@ -517,39 +507,16 @@
 
 .prompt-input__command-popup {
   --prompt-input-secondary-text: var(--sigvelo-color-text-muted);
-  --sigvelo-recipe-surface-radius: var(--sigvelo-radius-xl);
-  --sigvelo-recipe-surface-shadow: var(--sigvelo-shadow-xl);
-  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-1);
-  --sigvelo-recipe-row-min-height: var(--sigvelo-control-height-sm);
-  --sigvelo-recipe-row-padding-block: var(--sigvelo-spacing-1);
-  --sigvelo-recipe-row-padding-inline: var(--sigvelo-spacing-2);
-  --sigvelo-recipe-row-gap: var(--sigvelo-spacing-2-5);
-  --sigvelo-recipe-row-font-size: var(--sigvelo-text-sm);
-  --sigvelo-recipe-row-radius: var(--sigvelo-radius-md);
 
   width: 100%;
   max-height: min(24rem, var(--available-height));
   overflow: hidden auto;
 }
 
-.prompt-input__command-popup [data-slot="combobox-group-label"] {
-  padding-block: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-2);
-  color: var(--prompt-input-secondary-text);
-  font-size: var(--sigvelo-text-sm);
-  font-weight: var(--sigvelo-font-weight-normal);
-}
-
 .prompt-input__command-popup [data-slot="combobox-empty"]:empty {
   display: none;
 }
 
-@media (any-pointer: coarse) {
-  .prompt-input__command-popup {
-    --sigvelo-recipe-row-min-height: var(--sigvelo-control-height-xl);
-  }
-}
-
 .prompt-input__command-item {
   align-items: center;
   min-width: 0;
@@ -689,166 +656,6 @@
   margin-inline-start: auto;
 }
 
-/* Approval state: the composer becomes the confirmation */
-.prompt-input__approval {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  font-size: var(--sigvelo-text-compact);
-  /* Zero intrinsic inline size: long tool names, paths, and one-line JSON in
-     the confirmation must never widen the composer or the chat column around
-     it — same containment trick as the conversation viewport. */
-  contain: inline-size;
-}
-
-.prompt-input__approval-question {
-  display: flex;
-  align-items: baseline;
-  gap: 0.5rem;
-  line-height: 1.4;
-}
-
-.prompt-input__approval-question > span:first-child {
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-.prompt-input__approval-question code {
-  font-family: var(--sigvelo-font-mono);
-  font-size: 0.8125em;
-}
-
-.prompt-input__approval-count {
-  margin-inline-start: auto;
-  flex-shrink: 0;
-  color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-xs);
-}
-
-.prompt-input__approval-preview {
-  max-height: 6rem;
-  padding-block: var(--sigvelo-spacing-1-5);
-  padding-inline: var(--sigvelo-spacing-2-5);
-  overflow: auto;
-  /* Long values wrap and scroll vertically within the cap — never sideways. */
-  overflow-wrap: anywhere;
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-  border-radius: var(--sigvelo-radius-md);
-  color: var(--sigvelo-color-text-muted);
-  font-family: var(--sigvelo-font-mono);
-  font-size: var(--sigvelo-text-xs);
-  line-height: 1.5;
-}
-
-.prompt-input__approval-preview-key {
-  color: var(--sigvelo-color-text);
-}
-
-.prompt-input__approval-preview-key::after {
-  content: ":";
-}
-
-.prompt-input__approval-options {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sigvelo-spacing-0-5);
-}
-
-.prompt-input__approval-option {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  width: 100%;
-  padding-block: 0.3125rem;
-  padding-inline: 0.5rem;
-  border: none;
-  border-radius: var(--sigvelo-radius-md);
-  background: transparent;
-  color: var(--sigvelo-color-text);
-  font: inherit;
-  text-align: start;
-  cursor: pointer;
-}
-
-.prompt-input__approval-option[data-selected] {
-  background-color: color-mix(in oklab, var(--sigvelo-color-text), transparent 92%);
-}
-
-.prompt-input__approval-option:disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.prompt-input__approval-key {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  inline-size: 1.125rem;
-  block-size: 1.125rem;
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-  border-radius: var(--sigvelo-radius-full);
-  color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-2xs);
-}
-
-.prompt-input__approval-option[data-selected] .prompt-input__approval-key {
-  border-color: var(--sigvelo-color-text);
-  background-color: var(--sigvelo-color-text);
-  color: var(--sigvelo-color-surface);
-}
-
-.prompt-input__approval-arrows {
-  margin-inline-start: auto;
-  color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-xs);
-  visibility: hidden;
-}
-
-.prompt-input__approval-option[data-selected] .prompt-input__approval-arrows {
-  visibility: visible;
-}
-
-.prompt-input__approval-deny {
-  cursor: text;
-}
-
-.prompt-input__approval-reason {
-  flex: 1;
-  min-width: 0;
-  padding: 0;
-  border: none;
-  background: transparent;
-  color: var(--sigvelo-color-text);
-  font: inherit;
-}
-
-.prompt-input__approval-reason::placeholder {
-  color: var(--sigvelo-color-text-muted);
-}
-
-.prompt-input__approval-reason:focus {
-  outline: none;
-}
-
-.prompt-input__approval-skip {
-  flex-shrink: 0;
-  color: var(--sigvelo-color-text-muted);
-}
-
-.prompt-input__approval-submit {
-  flex-shrink: 0;
-  gap: var(--sigvelo-spacing-1-5);
-}
-
-.prompt-input__approval-kbd {
-  font-family: inherit;
-  font-size: 0.75em;
-  opacity: 0.75;
-}
-
 @keyframes prompt-input-spin {
   from {
     transform: rotate(0deg);

package/dist/styles/recipes.css

@@ -31,6 +31,66 @@
   --sigvelo-recipe-row-gap: var(--sigvelo-spacing-1-5);
   --sigvelo-recipe-row-font-size: var(--sigvelo-text-compact);
   --sigvelo-recipe-row-radius: var(--sigvelo-radius-sm);
+  --sigvelo-recipe-group-label-padding-block: var(--sigvelo-spacing-1-5);
+  --sigvelo-recipe-group-label-padding-inline: var(--sigvelo-recipe-row-padding-inline);
+  --sigvelo-recipe-group-label-color: var(--sigvelo-color-text-muted);
+  --sigvelo-recipe-group-label-font-size: var(--sigvelo-text-xs);
+  --sigvelo-recipe-group-label-font-weight: var(--sigvelo-font-weight-semibold);
+  --sigvelo-recipe-group-label-line-height: inherit;
+}
+
+/*
+ * Composer add and command pickers share a slightly roomier hierarchy than
+ * general-purpose menus while continuing to inherit the surface and row
+ * recipes for their actual anatomy and interaction states.
+ */
+:where([data-recipe~="composer-command-surface"]) {
+  --sigvelo-recipe-surface-radius: var(--sigvelo-radius-xl);
+  --sigvelo-recipe-surface-shadow: var(--sigvelo-shadow-xl);
+  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-1);
+  --sigvelo-recipe-row-min-height: var(--sigvelo-control-height-sm);
+  --sigvelo-recipe-row-padding-block: var(--sigvelo-spacing-1);
+  --sigvelo-recipe-row-padding-inline: var(--sigvelo-spacing-2);
+  --sigvelo-recipe-row-gap: var(--sigvelo-spacing-2-5);
+  --sigvelo-recipe-row-font-size: var(--sigvelo-text-sm);
+  --sigvelo-recipe-row-radius: var(--sigvelo-radius-md);
+  --sigvelo-recipe-group-label-padding-block: var(--sigvelo-spacing-2);
+  --sigvelo-recipe-group-label-padding-inline: var(--sigvelo-spacing-2);
+  --sigvelo-recipe-group-label-font-size: var(--sigvelo-text-sm);
+  --sigvelo-recipe-group-label-font-weight: var(--sigvelo-font-weight-normal);
+  --sigvelo-recipe-group-label-line-height: var(--sigvelo-leading-tight);
+  --sigvelo-combobox-popup-padding: var(--sigvelo-spacing-1);
+}
+
+/* Shared application compositions opt in explicitly; component CSS continues
+   to own their headers, rows, controls, and semantic states. */
+:where([data-recipe~="wide-scroll-picker"]) {
+  inline-size: min(46rem, calc(100dvw - 1rem));
+  max-block-size: min(28rem, calc(100dvh - 2rem));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+}
+
+:where([data-recipe~="framed-panel"]) {
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  overflow: hidden;
+  font-family: inherit;
+  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-subtle);
+  border-radius: var(--sigvelo-radius-md);
+}
+
+:where([data-recipe~="disclosure-stack"]) {
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  font-family: inherit;
+  color: var(--sigvelo-color-text);
 }
 
 @media (any-pointer: coarse) {
@@ -49,6 +109,10 @@
   ) {
     block-size: var(--sigvelo-control-height-xl);
   }
+
+  :where([data-recipe~="composer-command-surface"]) {
+    --sigvelo-recipe-row-min-height: var(--sigvelo-control-height-xl);
+  }
 }
 
 :where(
@@ -251,6 +315,50 @@
   opacity: var(--sigvelo-recipe-disabled-opacity);
 }
 
+:where([data-slot="dropdown-menu-arrow"], [data-slot="popover-arrow"]) {
+  inline-size: var(--sigvelo-spacing-3);
+  block-size: 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);
+  transform: rotate(45deg);
+}
+
+:where([data-slot="dropdown-menu-arrow"], [data-slot="popover-arrow"])[data-side="top"] {
+  border-block-start: none;
+  border-inline-start: none;
+}
+
+:where([data-slot="dropdown-menu-arrow"], [data-slot="popover-arrow"])[data-side="bottom"] {
+  border-block-end: none;
+  border-inline-end: none;
+}
+
+:where([data-slot="dropdown-menu-arrow"], [data-slot="popover-arrow"])[data-side="left"] {
+  border-block-end: none;
+  border-inline-start: none;
+}
+
+:where([data-slot="dropdown-menu-arrow"], [data-slot="popover-arrow"])[data-side="right"] {
+  border-block-start: none;
+  border-inline-end: none;
+}
+
+:where([data-slot="context-menu-item-indicator"], [data-slot="menubar-item-indicator"]) {
+  display: inline-flex;
+  flex: 0 0 1rem;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1rem;
+}
+
+:where([data-slot="popover-description"], [data-slot="toast-description"]) {
+  margin: 0;
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  line-height: var(--sigvelo-leading-normal);
+}
+
 :where([data-slot="dropdown-menu-trigger"]:not([data-unstyled]), [data-slot="popover-trigger"]) {
   display: inline-flex;
   align-items: center;
@@ -446,11 +554,12 @@
   [data-slot="combobox-group-label"],
   [data-slot="autocomplete-group-label"]
 ) {
-  padding-block: var(--sigvelo-spacing-1-5);
-  padding-inline: var(--sigvelo-recipe-row-padding-inline);
-  color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-xs);
-  font-weight: var(--sigvelo-font-weight-semibold);
+  padding-block: var(--sigvelo-recipe-group-label-padding-block);
+  padding-inline: var(--sigvelo-recipe-group-label-padding-inline);
+  color: var(--sigvelo-recipe-group-label-color);
+  font-size: var(--sigvelo-recipe-group-label-font-size);
+  font-weight: var(--sigvelo-recipe-group-label-font-weight);
+  line-height: var(--sigvelo-recipe-group-label-line-height);
 }
 
 :where(

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

@@ -59,11 +59,13 @@
   z-index: 25;
 }
 
-.responsive-sidebar-shell__frame[data-sidebar-open="false"] {
+.responsive-sidebar-shell[data-sidebar-open="false"] > .responsive-sidebar-shell__frame {
   grid-template-columns: minmax(0, 1fr);
 }
 
-.responsive-sidebar-shell__frame[data-sidebar-open="false"] .responsive-sidebar-shell__sidebar {
+.responsive-sidebar-shell[data-sidebar-open="false"]
+  > .responsive-sidebar-shell__frame
+  > .responsive-sidebar-shell__sidebar {
   position: absolute;
   inset-block: 0;
   inset-inline-start: 0;
@@ -72,7 +74,9 @@
   pointer-events: none;
 }
 
-.responsive-sidebar-shell__frame[data-sidebar-open="false"] .responsive-sidebar-shell__main {
+.responsive-sidebar-shell[data-sidebar-open="false"]
+  > .responsive-sidebar-shell__frame
+  > .responsive-sidebar-shell__main {
   grid-column: 1;
 }
 
@@ -110,24 +114,13 @@
       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 {
+  .responsive-sidebar-shell[data-sidebar-open="false"]
+    > .responsive-sidebar-shell__frame
+    > .responsive-sidebar-shell__sidebar {
     visibility: hidden;
     opacity: 0;
     transform: translate(-50%, calc(var(--sigvelo-spacing-2) * -1)) scale(0.98);
@@ -137,11 +130,15 @@
     transition: none;
   }
 
-  .responsive-sidebar-shell__frame[data-sidebar-open="true"] .responsive-sidebar-shell__main {
+  .responsive-sidebar-shell[data-sidebar-open="true"]
+    > .responsive-sidebar-shell__frame
+    > .responsive-sidebar-shell__main {
     pointer-events: none;
   }
 
-  .responsive-sidebar-shell__frame[data-sidebar-open="true"] .responsive-sidebar-shell__peek {
+  .responsive-sidebar-shell[data-sidebar-open="true"]
+    > .responsive-sidebar-shell__frame
+    > .responsive-sidebar-shell__peek {
     position: absolute;
     inset-block: 0;
     inset-inline: 0;

package/dist/styles/sources.css

@@ -1,11 +1,3 @@
-.sources {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  font-family: inherit;
-  color: var(--sigvelo-color-text);
-}
-
 .sources__trigger-label {
   display: inline-flex;
   align-items: center;