@mcp-b/react-components 0.1.5 → 0.2.0

package/dist/styles/activity.css

@@ -0,0 +1,386 @@
+/* Claude/Codex-style: no box — the collapsed state is a plain muted text
+   line whose label shimmers while streaming; expanding reveals rows beneath. */
+.activity {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  /* Hard cap, Codex-style, on the WHOLE unit — collapsed line and expanded
+     log alike — so toggling never reflows the conversation width. */
+  max-width: min(100%, 36rem);
+  /* Whitespace separates the work log from message prose around it */
+  margin-block: 0.5rem;
+  font-family: var(--sigvelo-font-sans);
+  color: var(--sigvelo-color-text);
+}
+
+.activity__trigger {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding-block: 0.375rem;
+  /* The fill bleeds past the text edge via the negative margin, so the label
+     stays flush with the rows below instead of indenting on hover */
+  padding-inline: 0.5rem;
+  margin-inline: -0.5rem;
+  background-color: transparent;
+  border: none;
+  border-radius: var(--sigvelo-radius-sm);
+  /* A step dimmer than message prose (Codex-style) so the line reads as
+     status, not content */
+  color: color-mix(in oklab, var(--sigvelo-color-text-muted), transparent 20%);
+  font-family: inherit;
+  font-size: 0.8125rem;
+  font-weight: var(--sigvelo-font-weight-semibold);
+  text-align: start;
+  cursor: pointer;
+  transition:
+    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+}
+
+.activity__trigger:hover:not([data-disabled]) {
+  color: var(--sigvelo-color-text);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+}
+
+.activity__trigger:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--sigvelo-color-canvas),
+    0 0 0 4px var(--sigvelo-color-focus);
+}
+
+/* Basis 0 keeps the long nowrap label from inflating the message width
+   (it truncates instead); max-content caps growth so the chevron hugs the
+   text, Codex-style. */
+.activity__trigger-label {
+  flex: 1 1 0;
+  min-width: 0;
+  max-width: max-content;
+  color: var(--sigvelo-color-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Streaming shimmer: a highlight sweeps the label left-to-right, then rests
+   muted for the back half of the loop (the gradient tiles seamlessly). */
+.activity[data-streaming] .activity__trigger-label {
+  /* Resting shade matches the trigger's dimmed color; the sweep brightens */
+  --activity-shimmer-base: color-mix(in oklab, var(--sigvelo-color-text-muted), transparent 20%);
+  background: linear-gradient(
+    90deg,
+    var(--activity-shimmer-base) 0%,
+    var(--activity-shimmer-base) 40%,
+    var(--sigvelo-color-text) 50%,
+    var(--activity-shimmer-base) 60%,
+    var(--activity-shimmer-base) 100%
+  );
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: activity-shimmer 2.4s linear infinite;
+}
+
+.activity__trigger-icon {
+  display: inline-flex;
+  color: var(--sigvelo-color-text-muted);
+  transition: transform var(--sigvelo-duration-medium) var(--sigvelo-ease-emphasized);
+}
+
+.activity__trigger[data-panel-open] .activity__trigger-icon {
+  transform: rotate(90deg);
+}
+
+/* The measured height lives on the base class, NOT gated 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.) */
+.activity__content {
+  height: var(--collapsible-panel-height);
+  overflow: hidden;
+  /* The panel clips (overflow: hidden), so it must own the gutter the row
+     hover fills bleed into — the list padding puts the text back in line */
+  margin-inline: -0.5rem;
+  /* Standard easing, not emphasized: the expo-out curve front-loads ~60% of
+     the motion into the first frames, which makes collapsing read as content
+     snapping upward instead of folding. */
+  transition:
+    height var(--sigvelo-duration-medium) var(--sigvelo-ease-standard),
+    opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+}
+
+.activity__content[data-starting-style],
+.activity__content[data-ending-style] {
+  height: 0;
+  opacity: 0;
+}
+
+.activity__list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  /* Bounded so expanding never blows out the conversation scroll position */
+  max-height: 20rem;
+  overflow-y: auto;
+  padding-block: 0.125rem 0.5rem;
+  padding-inline: 0.5rem;
+}
+
+.activity__item {
+  display: flex;
+  align-items: baseline;
+  gap: 0.375rem;
+  font-size: 0.8125rem;
+  color: var(--sigvelo-color-text);
+  line-height: 1.6;
+}
+
+/* Second collapse level: the trigger reads as a plain item row; the panel is
+   chrome-free — no inner box inside the outlined Activity box. */
+.activity__group {
+  display: flex;
+  flex-direction: column;
+}
+
+.activity__group-trigger {
+  display: flex;
+  align-items: baseline;
+  gap: 0.375rem;
+  /* Negative margins cancel the padding, so the hover fill gets breathing
+     room while the row text stays aligned with its plain siblings */
+  padding-block: 0.125rem;
+  padding-inline: 0.5rem;
+  margin-block: -0.125rem;
+  margin-inline: -0.5rem;
+  background: none;
+  border: none;
+  border-radius: var(--sigvelo-radius-sm);
+  font-family: inherit;
+  font-size: 0.8125rem;
+  font-weight: inherit;
+  color: var(--sigvelo-color-text);
+  line-height: 1.6;
+  text-align: start;
+  cursor: pointer;
+  transition: background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+}
+
+.activity__group-trigger:hover:not([data-disabled]) {
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+}
+
+/* The chevron is an affordance, not furniture — appears on hover/focus/open */
+.activity__group-icon {
+  display: inline-flex;
+  align-self: center;
+  color: var(--sigvelo-color-text-muted);
+  opacity: 0;
+  transition:
+    opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    transform var(--sigvelo-duration-medium) var(--sigvelo-ease-emphasized);
+}
+
+.activity__group-trigger:hover .activity__group-icon,
+.activity__group-trigger:focus-visible .activity__group-icon,
+.activity__group-trigger[data-panel-open] .activity__group-icon {
+  opacity: 1;
+}
+
+.activity__group-trigger[data-panel-open] .activity__group-icon {
+  transform: rotate(90deg);
+}
+
+.activity__group-trigger:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--sigvelo-color-canvas),
+    0 0 0 4px var(--sigvelo-color-focus);
+  border-radius: var(--sigvelo-radius-sm);
+}
+
+.activity__group-panel {
+  height: var(--collapsible-panel-height);
+  overflow: hidden;
+  transition:
+    height var(--sigvelo-duration-medium) var(--sigvelo-ease-standard),
+    opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+}
+
+.activity__group-panel[data-starting-style],
+.activity__group-panel[data-ending-style] {
+  height: 0;
+  opacity: 0;
+}
+
+.activity__group-panel-inner {
+  padding-block: 0.375rem 0.5rem;
+}
+
+/* Prose panels (thought traces): quiet text, bounded like everything else */
+.activity__group-text {
+  margin: 0;
+  font-size: 0.8125rem;
+  line-height: 1.6;
+  color: var(--sigvelo-color-text-muted);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  max-height: 12rem;
+  overflow-y: auto;
+}
+
+.activity__group-text:focus-visible,
+.activity__shell-output:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--sigvelo-color-canvas),
+    0 0 0 4px var(--sigvelo-color-focus);
+  border-radius: var(--sigvelo-radius-sm);
+  scroll-margin-block: 1rem;
+}
+
+/* Codex-style shell panel: a quiet fill, not a terminal component — no
+   header bar, no chips, no chrome inside the outlined Activity box. */
+.activity__shell {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding-block: 0.5rem;
+  padding-inline: 0.75rem;
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  border-radius: var(--sigvelo-radius-md);
+}
+
+.activity__shell-label {
+  font-size: 0.6875rem;
+  font-weight: var(--sigvelo-font-weight-semibold);
+  color: var(--sigvelo-color-text-muted);
+}
+
+.activity__shell-output {
+  margin: 0;
+  font-family: var(--sigvelo-font-mono);
+  font-size: 0.75rem;
+  line-height: 1.6;
+  color: var(--sigvelo-color-text);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  /* Bounded so one long log can't swallow the activity list */
+  max-height: 12rem;
+  overflow-y: auto;
+}
+
+.activity__shell-status {
+  align-self: flex-end;
+  font-size: 0.6875rem;
+  color: var(--sigvelo-color-success-text-on-subtle);
+}
+
+.activity__shell-status[data-error] {
+  color: var(--sigvelo-color-danger-text-on-subtle);
+}
+
+/* Browser panels: screenshots and live views sit inside the quiet fill */
+.activity__shell .browser-live-view {
+  width: 100%;
+}
+
+/* browser_execute splits into small tabs: the web view and the code that
+   drove it. Compact underline tabs — chrome stays quiet inside the shell. */
+.activity__browser-tabs .tabs__tab {
+  padding-block: 0.25rem;
+  padding-inline: 0.125rem;
+  font-size: 0.75rem;
+}
+
+.activity__browser-tabs .tabs__panel {
+  padding-block: 0.5rem 0;
+}
+
+/* Blend nested code into the quiet shell fill — no panel-in-panel */
+.activity__shell .code-block {
+  background-color: transparent;
+}
+
+/* Bounded and wrapping, like every other panel body */
+.activity__code-block {
+  max-height: 12rem;
+  overflow-y: auto;
+}
+
+.activity__code-block .code-block__content,
+.activity__code-block .code-block__content--highlighted pre.shiki,
+.activity__code-block .code-block__content--highlighted pre.shiki code {
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
+
+.activity__browser-screenshot {
+  display: block;
+  width: 100%;
+  max-height: 16rem;
+  object-fit: contain;
+  border-radius: var(--sigvelo-radius-md);
+  background-color: var(--sigvelo-color-surface);
+}
+
+/* Mini diff inside an edit panel */
+.activity__diff-del {
+  color: var(--sigvelo-color-danger-text-on-subtle);
+}
+
+.activity__diff-add {
+  color: var(--sigvelo-color-success-text-on-subtle);
+}
+
+.activity__item-icon {
+  display: inline-flex;
+  align-self: center;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.activity__item-text {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+/* Row labels always clamp to one line, Codex-style — the expanded panel
+   carries the full `$ command`, the row stays a trimmed summary. */
+.activity__group-trigger .activity__item-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@keyframes activity-shimmer {
+  from {
+    background-position: 100% 0;
+  }
+  to {
+    background-position: -100% 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .activity[data-streaming] .activity__trigger-label {
+    animation: none;
+    background: none;
+    color: inherit;
+  }
+}
+
+@media (forced-colors: active) {
+  /* background-clip: text has no forced-colors story — plain text instead */
+  .activity[data-streaming] .activity__trigger-label {
+    animation: none;
+    background: none;
+    color: inherit;
+  }
+
+  .activity__trigger:focus-visible {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+  }
+}

package/dist/styles/agent-chat.css

@@ -0,0 +1,21 @@
+.agent-chat {
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) auto;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  background-color: var(--sigvelo-color-surface);
+  color: var(--sigvelo-color-text);
+  font-family: var(--sigvelo-font-sans);
+}
+
+.agent-chat__conversation {
+  min-height: 0;
+}
+
+.agent-chat__composer {
+  border-block-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  padding: 0.75rem;
+  background-color: var(--sigvelo-color-surface);
+}

package/dist/styles/agent-connection.css

@@ -41,10 +41,12 @@
 }
 
 .agent-connect__title-group p {
+  max-inline-size: 62ch;
   margin: 0;
   color: var(--sigvelo-color-text-muted);
   font-size: 0.78rem;
   line-height: 1.35;
+  text-wrap: pretty;
 }
 
 .agent-connect__targets {
@@ -88,9 +90,19 @@
   font-size: 0.72rem;
   font-weight: var(--sigvelo-font-weight-semibold);
   line-height: 1.15;
+  overflow-wrap: anywhere;
   text-align: center;
 }
 
+.agent-connect .agent-connect__target {
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width) transparent;
+  transition:
+    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    box-shadow var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+}
+
 @media (pointer: coarse) {
   .agent-connect__target {
     min-block-size: 2.5rem;
@@ -104,14 +116,19 @@
 }
 
 .agent-connect__target:focus-visible {
-  outline: var(--sigvelo-focus-ring);
-  outline-offset: var(--sigvelo-focus-offset);
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--sigvelo-color-canvas),
+    0 0 0 4px var(--sigvelo-color-focus);
 }
 
 .agent-connect__target[data-selected="true"] {
+  border-color: var(--sigvelo-color-primary-border-muted);
   background: var(--sigvelo-color-surface);
   color: var(--sigvelo-color-text);
-  box-shadow: var(--sigvelo-shadow-xs);
+  box-shadow:
+    var(--sigvelo-shadow-xs),
+    inset 0 0 0 1px var(--sigvelo-color-primary-border-subtle);
 }
 
 .agent-connect .code-block {

package/dist/styles/alert-dialog.css

@@ -11,11 +11,20 @@
   color: inherit;
 }
 
+.alert-dialog__trigger:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--sigvelo-color-canvas),
+    0 0 0 4px var(--sigvelo-color-focus);
+}
+
 .alert-dialog__backdrop {
   position: fixed;
   inset: 0;
-  background-color: rgb(0 0 0 / 0.5);
+  background-color: var(--sigvelo-color-backdrop);
+  opacity: 1;
   z-index: 50;
+  transition: opacity var(--sigvelo-duration-medium) var(--sigvelo-ease-standard);
 }
 
 .alert-dialog__backdrop[data-starting-style],
@@ -25,12 +34,14 @@
 
 .alert-dialog__popup {
   position: fixed;
-  top: 50%;
-  left: 50%;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
   transform: translate(-50%, -50%);
   z-index: 50;
-  width: calc(100% - 2rem);
-  max-width: 28rem;
+  inline-size: calc(100% - 2rem);
+  max-inline-size: 28rem;
+  max-block-size: calc(100dvb - 2rem);
+  overflow: auto;
   background-color: var(--sigvelo-color-canvas);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-muted);
@@ -39,6 +50,9 @@
   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%);
+  transition:
+    opacity var(--sigvelo-duration-medium) var(--sigvelo-ease-standard),
+    transform var(--sigvelo-duration-medium) var(--sigvelo-ease-emphasized);
 }
 
 .alert-dialog__popup[data-starting-style],
@@ -48,11 +62,11 @@
 }
 
 .alert-dialog__popup--sm {
-  max-width: 20rem;
+  max-inline-size: 20rem;
 }
 
 .alert-dialog__popup--lg {
-  max-width: 36rem;
+  max-inline-size: 36rem;
 }
 
 .alert-dialog__title {
@@ -62,6 +76,7 @@
   line-height: 1.25;
   color: var(--sigvelo-color-text);
   margin: 0 0 0.5rem;
+  text-wrap: balance;
 }
 
 .alert-dialog__description {
@@ -70,6 +85,7 @@
   line-height: 1.5;
   color: var(--sigvelo-color-text-muted);
   margin: 0 0 1.5rem;
+  text-wrap: pretty;
 }
 
 .alert-dialog__header {
@@ -93,7 +109,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
+  min-block-size: 2.5rem;
   padding: 0 1rem;
   font-family: var(--sigvelo-font-sans);
   font-size: 0.875rem;
@@ -102,8 +118,9 @@
   border-radius: var(--sigvelo-radius-md);
   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),
+    opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .alert-dialog__action:focus-visible {
@@ -113,12 +130,17 @@
     0 0 0 4px var(--sigvelo-color-focus);
 }
 
+.alert-dialog__action:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
 .alert-dialog__action--primary {
   background-color: var(--sigvelo-color-primary-bg);
   color: var(--sigvelo-color-primary-text-on-bg);
 }
 
-.alert-dialog__action--primary:hover {
+.alert-dialog__action--primary:hover:not(:disabled) {
   background-color: color-mix(in oklab, var(--sigvelo-color-primary-bg), transparent 10%);
 }
 
@@ -127,7 +149,7 @@
   color: var(--sigvelo-color-neutral-text-on-subtle);
 }
 
-.alert-dialog__action--secondary:hover {
+.alert-dialog__action--secondary:hover:not(:disabled) {
   background-color: color-mix(in oklab, var(--sigvelo-color-neutral-bg-subtle), transparent 20%);
 }
 
@@ -136,7 +158,7 @@
   color: var(--sigvelo-color-danger-text-on-bg);
 }
 
-.alert-dialog__action--destructive:hover {
+.alert-dialog__action--destructive:hover:not(:disabled) {
   background-color: color-mix(in oklab, var(--sigvelo-color-danger-bg), transparent 10%);
 }
 
@@ -147,7 +169,7 @@
     var(--sigvelo-color-neutral-border-muted);
 }
 
-.alert-dialog__action--outline:hover {
+.alert-dialog__action--outline:hover:not(:disabled) {
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   color: var(--sigvelo-color-neutral-text-on-subtle);
 }
@@ -157,7 +179,7 @@
   color: var(--sigvelo-color-text);
 }
 
-.alert-dialog__action--ghost:hover {
+.alert-dialog__action--ghost:hover:not(:disabled) {
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   color: var(--sigvelo-color-neutral-text-on-subtle);
 }

package/dist/styles/artifact.css

@@ -1,14 +1,13 @@
 .artifact {
   display: flex;
   flex-direction: column;
-  width: 100%;
+  inline-size: 100%;
   font-family: var(--sigvelo-font-sans);
   color: var(--sigvelo-color-text);
+  /* Shadow-led elevation: no perimeter border */
   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-lg, var(--sigvelo-radius-md));
-  box-shadow: var(--sigvelo-shadow-xs);
+  box-shadow: var(--sigvelo-shadow-sm);
   overflow: hidden;
 }
 
@@ -19,11 +18,13 @@
   gap: 0.75rem;
   padding-block: 0.75rem;
   padding-inline: 1rem;
-  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
   background-color: var(--sigvelo-color-surface);
 }
 
+.artifact__header > :not(.artifact__actions) {
+  min-inline-size: 0;
+}
+
 .artifact__title {
   margin: 0;
   font-family: inherit;
@@ -31,6 +32,8 @@
   font-weight: var(--sigvelo-font-weight-bold);
   color: var(--sigvelo-color-text);
   line-height: 1.3;
+  overflow-wrap: anywhere;
+  text-wrap: balance;
 }
 
 .artifact__description {
@@ -39,6 +42,8 @@
   font-size: 0.8125rem;
   color: var(--sigvelo-color-text-muted);
   line-height: 1.4;
+  overflow-wrap: anywhere;
+  text-wrap: pretty;
 }
 
 .artifact__actions {
@@ -53,11 +58,24 @@
   /* Inherits from Button variant=ghost size=icon; overrides only when needed */
 }
 
+.artifact__action .sr-only {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  white-space: nowrap;
+  border: 0;
+  clip: rect(0 0 0 0);
+}
+
 .artifact__content {
   padding-block: 1rem;
   padding-inline: 1rem;
   font-size: 0.875rem;
   line-height: 1.5;
+  overflow-wrap: anywhere;
 }
 
 @media (forced-colors: active) {