@mcp-b/react-components 0.1.5 → 0.2.0

package/dist/styles/commit.css

@@ -25,7 +25,7 @@
   font-size: 0.8125rem;
   text-align: start;
   cursor: pointer;
-  transition: background-color 150ms ease;
+  transition: background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .commit__header:hover:not([data-disabled]) {
@@ -123,20 +123,13 @@
 }
 
 .commit__content {
+  height: var(--collapsible-panel-height);
   overflow: hidden;
   transition:
     height 200ms ease,
     opacity 200ms ease;
 }
 
-.commit__content[data-closed] {
-  height: 0;
-}
-
-.commit__content[data-open] {
-  height: var(--collapsible-panel-height);
-}
-
 .commit__content[data-starting-style],
 .commit__content[data-ending-style] {
   height: 0;

package/dist/styles/context-menu.css

@@ -21,8 +21,8 @@
   outline: none;
   transform-origin: var(--transform-origin);
   transition:
-    opacity 150ms ease,
-    transform 150ms ease;
+    opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    transform var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .context-menu__popup[data-starting-style],

package/dist/styles/conversation.css

@@ -2,18 +2,25 @@
   position: relative;
   width: 100%;
   height: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
   font-family: var(--sigvelo-font-sans);
   color: var(--sigvelo-color-text);
 }
 
+/* Deliberately unpositioned so the floating buttons anchor to .conversation
+   and stay pinned while this element scrolls. */
+.conversation__viewport {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
 .conversation__content {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
-  padding-block: 1rem;
-  padding-inline: 1rem;
+  gap: 1rem;
+  padding-block: 1.25rem;
+  padding-inline: 1.25rem;
   min-height: 100%;
 }
 

package/dist/styles/dialog.css

@@ -98,7 +98,7 @@
   border: none;
   border-radius: var(--sigvelo-radius-md);
   cursor: pointer;
-  transition: background-color 150ms ease;
+  transition: background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .dialog__close:hover {

package/dist/styles/field.css

@@ -100,8 +100,8 @@
     var(--sigvelo-color-neutral-border-muted);
   border-radius: var(--sigvelo-radius-md);
   transition:
-    border-color 150ms ease,
-    box-shadow 150ms ease;
+    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    box-shadow var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .field__control::placeholder {

package/dist/styles/file-tree.css

@@ -69,7 +69,7 @@
   display: inline-flex;
   flex-shrink: 0;
   color: var(--sigvelo-color-text-muted);
-  transition: transform 150ms ease;
+  transition: transform var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
   width: 1rem;
   justify-content: center;
 }
@@ -102,7 +102,7 @@
   gap: 0.125rem;
   flex-shrink: 0;
   opacity: 0;
-  transition: opacity 150ms ease;
+  transition: opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .file-tree__node:hover .file-tree__actions,

package/dist/styles/index.css

@@ -8,7 +8,9 @@
 
 /* Components */
 @import "./accordion.css" layer(components);
+@import "./activity.css" layer(components);
 @import "./agent-connection.css" layer(components);
+@import "./agent-chat.css" layer(components);
 @import "./alert-dialog.css" layer(components);
 @import "./autocomplete.css" layer(components);
 @import "./avatar.css" layer(components);
@@ -53,6 +55,8 @@
 
 /* AI Chat & Code Components */
 @import "./artifact.css" layer(components);
+@import "./browser-live-view.css" layer(components);
+@import "./browser-replay.css" layer(components);
 @import "./chain-of-thought.css" layer(components);
 @import "./code-block.css" layer(components);
 @import "./commit.css" layer(components);
@@ -71,6 +75,7 @@
 @import "./test-results.css" layer(components);
 @import "./tool.css" layer(components);
 @import "./web-preview.css" layer(components);
+@import "./workspace-explorer.css" layer(components);
 
 /* Layout Components */
 @import "./shell.css" layer(components);

package/dist/styles/input.css

@@ -14,9 +14,14 @@
     var(--sigvelo-color-neutral-border-muted);
   border-radius: var(--sigvelo-radius-md);
   transition:
-    color 150ms ease,
-    border-color 150ms ease,
-    box-shadow 150ms ease;
+    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    box-shadow var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+}
+
+/* :where keeps specificity below the invalid rules so danger borders win on hover */
+.input:where(:hover:not(:disabled)) {
+  border-color: var(--sigvelo-color-focus);
 }
 
 .input::selection {

package/dist/styles/menu.css

@@ -16,8 +16,8 @@
   border-radius: var(--sigvelo-radius-md);
   cursor: pointer;
   transition:
-    background-color 150ms ease,
-    border-color 150ms ease;
+    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .menu__trigger:hover {
@@ -55,8 +55,8 @@
   outline: none;
   transform-origin: var(--transform-origin);
   transition:
-    opacity 150ms ease,
-    transform 150ms ease;
+    opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    transform var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .menu__popup[data-starting-style],

package/dist/styles/menubar.css

@@ -24,8 +24,8 @@
   border-radius: var(--sigvelo-radius-sm);
   cursor: pointer;
   transition:
-    background-color 150ms ease,
-    color 150ms ease;
+    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .menubar__trigger:hover {
@@ -60,7 +60,7 @@
   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 150ms ease;
+  animation: menubar-popup-enter var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .menubar__popup[data-ending-style] {
@@ -106,8 +106,8 @@
   cursor: pointer;
   outline: none;
   transition:
-    background-color 150ms ease,
-    color 150ms ease;
+    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .menubar__item--inset,

package/dist/styles/message.css

@@ -22,12 +22,11 @@
   max-width: min(42rem, 85%);
   padding-block: 0.625rem;
   padding-inline: 0.875rem;
-  border-radius: var(--sigvelo-radius-md);
-  font-size: 0.875rem;
+  border-radius: var(--sigvelo-radius-lg);
+  font-size: var(--sigvelo-text-sm);
   line-height: 1.55;
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   color: var(--sigvelo-color-text);
-  word-wrap: break-word;
   overflow-wrap: anywhere;
 }
 
@@ -115,7 +114,7 @@
 }
 
 .message__branch-page {
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   font-variant-numeric: tabular-nums;
   color: var(--sigvelo-color-text-muted);
   padding-inline: 0.375rem;

package/dist/styles/navigation-menu.css

@@ -31,8 +31,8 @@
   border-radius: var(--sigvelo-radius-sm);
   cursor: pointer;
   transition:
-    background-color 150ms ease,
-    color 150ms ease;
+    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .navigation-menu__trigger:hover {
@@ -53,7 +53,7 @@
 
 .navigation-menu__icon {
   display: inline-flex;
-  transition: transform 150ms ease;
+  transition: transform var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .navigation-menu__trigger[data-popup-open] .navigation-menu__icon {
@@ -76,8 +76,8 @@
   text-decoration: none;
   border-radius: var(--sigvelo-radius-sm);
   transition:
-    background-color 150ms ease,
-    color 150ms ease;
+    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .navigation-menu__link:hover {
@@ -111,7 +111,7 @@
   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: navigation-menu-enter 150ms ease;
+  animation: navigation-menu-enter var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
   overflow: hidden;
 }
 

package/dist/styles/number-field.css

@@ -25,8 +25,8 @@
     var(--sigvelo-color-neutral-border-muted);
   border-inline: none;
   transition:
-    border-color 150ms ease,
-    box-shadow 150ms ease;
+    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    box-shadow var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .number-field__input:focus-visible {
@@ -61,8 +61,8 @@
   cursor: pointer;
   user-select: none;
   transition:
-    background-color 150ms ease,
-    border-color 150ms ease;
+    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .number-field__decrement {

package/dist/styles/popover.css

@@ -15,8 +15,8 @@
   border-radius: var(--sigvelo-radius-md);
   cursor: pointer;
   transition:
-    background-color 150ms ease,
-    border-color 150ms ease;
+    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .popover__trigger:hover {
@@ -36,7 +36,7 @@
   inset: 0;
   z-index: 50;
   background-color: color-mix(in oklab, var(--sigvelo-color-text), transparent 50%);
-  transition: opacity 150ms ease;
+  transition: opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .popover__backdrop[data-starting-style],
@@ -64,8 +64,8 @@
   outline: none;
   transform-origin: var(--transform-origin);
   transition:
-    opacity 150ms ease,
-    transform 150ms ease;
+    opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    transform var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .popover__popup[data-starting-style],
@@ -141,8 +141,8 @@
   border-radius: var(--sigvelo-radius-sm);
   cursor: pointer;
   transition:
-    background-color 150ms ease,
-    color 150ms ease;
+    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .popover__close:hover {

package/dist/styles/preview-card.css

@@ -3,7 +3,7 @@
   text-decoration: underline;
   text-underline-offset: 2px;
   cursor: pointer;
-  transition: color 150ms ease;
+  transition: color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .preview-card__trigger:hover {
@@ -40,7 +40,7 @@
   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: preview-card-enter 150ms ease;
+  animation: preview-card-enter var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .preview-card__popup[data-ending-style] {

package/dist/styles/pricing-page.css

@@ -51,7 +51,7 @@
   font-family: var(--sigvelo-font-sans);
   font-size: 0.875rem;
   color: var(--sigvelo-color-text-muted);
-  transition: color 150ms ease;
+  transition: color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .pricing-page__period-label--active {
@@ -198,7 +198,7 @@
   border: none;
   color: var(--sigvelo-color-text-muted);
   cursor: pointer;
-  transition: color 150ms ease;
+  transition: color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .pricing-page__feature-info:hover {

package/dist/styles/prompt-input.css

@@ -2,18 +2,19 @@
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  padding-block: 0.75rem;
-  padding-inline: 0.75rem;
+  padding-block: 0.875rem;
+  padding-inline: 1rem;
   background-color: var(--sigvelo-color-surface);
+  /* Fields keep their border; hairline + soft shadow for the floating-composer look */
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
-  border-radius: var(--sigvelo-radius-md);
-  box-shadow: var(--sigvelo-shadow-xs);
+  border-radius: var(--sigvelo-radius-xl);
+  box-shadow: var(--sigvelo-shadow-sm);
   font-family: var(--sigvelo-font-sans);
   color: var(--sigvelo-color-text);
   transition:
-    border-color 150ms ease,
-    box-shadow 150ms ease;
+    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    box-shadow var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .prompt-input__file-input {
@@ -26,11 +27,12 @@
   pointer-events: none;
 }
 
+/* Match the Input focus idiom: focus-color border + soft outer ring */
 .prompt-input:focus-within {
-  border-color: var(--sigvelo-color-neutral-border-muted);
+  border-color: var(--sigvelo-color-focus);
   box-shadow:
-    var(--sigvelo-shadow-xs),
-    0 0 0 3px var(--sigvelo-color-focus);
+    var(--sigvelo-shadow-sm),
+    0 0 0 4px color-mix(in oklab, var(--sigvelo-color-focus), transparent 80%);
 }
 
 .prompt-input__header {

package/dist/styles/queue.css

@@ -30,8 +30,8 @@
   cursor: pointer;
   text-align: start;
   transition:
-    background-color 150ms ease,
-    color 150ms ease;
+    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .queue__section-trigger:hover:not([data-disabled]) {
@@ -66,20 +66,13 @@
 }
 
 .queue__section-content {
+  height: var(--collapsible-panel-height);
   overflow: hidden;
   transition:
     height 200ms ease,
     opacity 200ms ease;
 }
 
-.queue__section-content[data-closed] {
-  height: 0;
-}
-
-.queue__section-content[data-open] {
-  height: var(--collapsible-panel-height);
-}
-
 .queue__section-content[data-starting-style],
 .queue__section-content[data-ending-style] {
   height: 0;
@@ -114,7 +107,7 @@
   padding-block: 0.5rem;
   padding-inline: 0.5rem;
   border-radius: var(--sigvelo-radius-sm);
-  transition: background-color 150ms ease;
+  transition: background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .queue__item:hover {
@@ -185,7 +178,7 @@
   gap: 0.25rem;
   flex-shrink: 0;
   opacity: 0;
-  transition: opacity 150ms ease;
+  transition: opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .queue__item-actions:focus-within {
@@ -218,9 +211,7 @@
   gap: 0.375rem;
   padding-block: 0.3125rem;
   padding-inline: 0.5rem;
-  background-color: var(--sigvelo-color-surface);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
   border-radius: var(--sigvelo-radius-sm);
   font-size: 0.75rem;
   color: var(--sigvelo-color-text);

package/dist/styles/radio.css

@@ -27,10 +27,10 @@
   outline: none;
   cursor: pointer;
   transition:
-    color 150ms ease,
-    border-color 150ms ease,
-    background-color 150ms ease,
-    box-shadow 150ms ease;
+    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    box-shadow var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .radio:hover:not([data-disabled]) {
@@ -71,7 +71,7 @@
   background-color: var(--sigvelo-color-primary-text-on-bg);
   border-radius: var(--sigvelo-radius-full);
   transform: scale(0);
-  transition: transform 150ms ease;
+  transition: transform var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .radio[data-checked] .radio__indicator {

package/dist/styles/reasoning.css

@@ -21,8 +21,8 @@
   font-weight: var(--sigvelo-font-weight-semibold);
   cursor: pointer;
   transition:
-    background-color 150ms ease,
-    color 150ms ease;
+    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .reasoning__trigger:hover:not([data-disabled]) {
@@ -66,20 +66,13 @@
 }
 
 .reasoning__content {
+  height: var(--collapsible-panel-height);
   overflow: hidden;
   transition:
     height 200ms ease,
     opacity 200ms ease;
 }
 
-.reasoning__content[data-closed] {
-  height: 0;
-}
-
-.reasoning__content[data-open] {
-  height: var(--collapsible-panel-height);
-}
-
 .reasoning__content[data-starting-style],
 .reasoning__content[data-ending-style] {
   height: 0;
@@ -87,6 +80,9 @@
 }
 
 .reasoning__text {
+  /* Bounded so expanding never blows out the conversation scroll position */
+  max-height: 20rem;
+  overflow-y: auto;
   padding-block: 0.5rem;
   padding-inline: 0.75rem;
   margin-inline-start: 0.75rem;

package/dist/styles/scroll-area.css

@@ -19,7 +19,7 @@
   display: flex;
   padding: 2px;
   background-color: transparent;
-  transition: background-color 150ms ease;
+  transition: background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
   user-select: none;
   touch-action: none;
 }
@@ -48,7 +48,7 @@
   flex: 1;
   background-color: color-mix(in oklab, var(--sigvelo-color-text-muted), transparent 70%);
   border-radius: var(--sigvelo-radius-full);
-  transition: background-color 150ms ease;
+  transition: background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .scroll-area__thumb:hover {

package/dist/styles/select.css

@@ -16,9 +16,9 @@
   border-radius: var(--sigvelo-radius-md);
   cursor: pointer;
   transition:
-    color 150ms ease,
-    border-color 150ms ease,
-    box-shadow 150ms ease;
+    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    box-shadow var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .select__trigger > [data-slot="select-value"] {

package/dist/styles/slider.css

@@ -83,8 +83,8 @@
   border-radius: var(--sigvelo-radius-full);
   cursor: grab;
   transition:
-    box-shadow 150ms ease,
-    transform 150ms ease;
+    box-shadow var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    transform var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .slider__thumb:hover {

package/dist/styles/sources.css

@@ -21,8 +21,8 @@
   font-weight: var(--sigvelo-font-weight-semibold);
   cursor: pointer;
   transition:
-    background-color 150ms ease,
-    color 150ms ease;
+    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .sources__trigger:hover:not([data-disabled]) {
@@ -52,20 +52,13 @@
 }
 
 .sources__content {
+  height: var(--collapsible-panel-height);
   overflow: hidden;
   transition:
     height 200ms ease,
     opacity 200ms ease;
 }
 
-.sources__content[data-closed] {
-  height: 0;
-}
-
-.sources__content[data-open] {
-  height: var(--collapsible-panel-height);
-}
-
 .sources__content[data-starting-style],
 .sources__content[data-ending-style] {
   height: 0;
@@ -99,8 +92,8 @@
   border-radius: var(--sigvelo-radius-sm);
   text-decoration: none;
   transition:
-    background-color 150ms ease,
-    border-color 150ms ease;
+    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .sources__link:hover {