@mcp-b/react-components 0.14.2 → 0.16.0

package/dist/styles/agent-chat.css

@@ -55,31 +55,58 @@
 /* Floating over the transcript: solid behind the controls, fading out
    through the top padding so content slides under instead of hitting a bar. */
 .agent-chat__composer {
+  isolation: isolate;
   position: absolute;
   inset-inline: 0;
   inset-block-end: 0;
-  padding: var(--sigvelo-spacing-2-5);
-  padding-block-start: 1.5rem;
+  padding: var(--sigvelo-spacing-2);
+  padding-block-start: var(--sigvelo-spacing-4);
   background: linear-gradient(
     to top,
-    var(--sigvelo-color-surface) calc(100% - 1.5rem),
+    var(--sigvelo-color-surface) calc(100% - var(--sigvelo-spacing-4)),
     transparent
   );
 }
 
 .agent-chat__composer > .prompt-input {
+  z-index: 1;
   inline-size: min(100%, var(--agent-chat-content-max-inline-size));
   margin-inline: auto;
 }
 
 .agent-chat__add-menu {
-  inline-size: min(32rem, calc(100dvw - 1rem));
+  --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);
+
+  inline-size: min(46rem, calc(100dvw - 1rem));
   max-block-size: min(28rem, calc(100dvh - 2rem));
   overflow-y: auto;
   overscroll-behavior: contain;
   scrollbar-gutter: stable;
 }
 
+.agent-chat__add-menu-group-label {
+  padding-block: var(--sigvelo-spacing-2);
+  padding-inline: var(--sigvelo-spacing-2);
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-sm);
+  font-weight: var(--sigvelo-font-weight-normal);
+  line-height: var(--sigvelo-leading-tight);
+}
+
+@media (any-pointer: coarse) {
+  .agent-chat__add-menu {
+    --sigvelo-recipe-row-min-height: var(--sigvelo-control-height-xl);
+  }
+}
+
 /* Transient status pill between transcript and composer (recovery, errors). */
 .agent-chat__notice {
   display: flex;
@@ -94,6 +121,108 @@
   margin-block-end: 0;
 }
 
+.agent-chat__queued {
+  --agent-chat-queued-underlap: var(--sigvelo-spacing-3);
+
+  position: relative;
+  z-index: 0;
+  inline-size: calc(
+    min(100%, var(--agent-chat-content-max-inline-size)) - var(--sigvelo-spacing-8) -
+      var(--sigvelo-spacing-2)
+  );
+  margin-inline: auto;
+  margin-block-end: calc(-1 * var(--agent-chat-queued-underlap));
+  overflow: hidden;
+  border: var(--sigvelo-border-width) var(--sigvelo-border-style)
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-xl);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+}
+
+.agent-chat__queued-list {
+  display: grid;
+  gap: var(--sigvelo-border-width);
+  margin: 0;
+  padding-block-start: calc(var(--sigvelo-spacing-0-5) + var(--sigvelo-border-width));
+  padding-block-end: calc(var(--sigvelo-spacing-0-5) + var(--agent-chat-queued-underlap));
+  padding-inline: 0;
+  list-style: none;
+}
+
+.agent-chat__queued-message {
+  display: flex;
+  align-items: center;
+  min-inline-size: 0;
+  min-block-size: var(--sigvelo-spacing-6);
+  gap: var(--sigvelo-spacing-1-5);
+  padding-block: 0;
+  padding-inline: var(--sigvelo-spacing-2-5);
+  color: var(--sigvelo-color-text);
+  font-size: var(--sigvelo-text-compact);
+  line-height: var(--sigvelo-leading-snug);
+}
+
+.agent-chat__queued-indicator {
+  display: inline-flex;
+  flex: none;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.agent-chat__queued-indicator svg,
+.agent-chat__queued-action svg {
+  inline-size: var(--sigvelo-text-sm);
+  block-size: var(--sigvelo-text-sm);
+}
+
+.agent-chat__queued-text {
+  min-inline-size: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agent-chat__queued-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sigvelo-spacing-1-5);
+  min-block-size: var(--sigvelo-spacing-6);
+  padding-inline: var(--sigvelo-spacing-2);
+  border: 0;
+  border-radius: var(--sigvelo-radius-md);
+  background: transparent;
+  color: color-mix(in oklab, var(--sigvelo-color-text-muted), var(--sigvelo-color-text) 12%);
+  font: inherit;
+  cursor: pointer;
+}
+
+.agent-chat__queued-action:hover {
+  color: var(--sigvelo-color-text);
+  background-color: color-mix(in oklab, transparent, var(--sigvelo-color-text) 5%);
+}
+
+.agent-chat__queued-action:focus-visible {
+  outline: none;
+  box-shadow: var(--sigvelo-recipe-focus-shadow-subtle);
+}
+
+.agent-chat__queued-remove {
+  min-inline-size: var(--sigvelo-spacing-6);
+  padding-inline: 0;
+}
+
+@media (any-pointer: coarse) {
+  .agent-chat__queued-message,
+  .agent-chat__queued-action {
+    min-block-size: var(--sigvelo-control-height-xl);
+  }
+
+  .agent-chat__queued-remove {
+    min-inline-size: var(--sigvelo-control-height-xl);
+  }
+}
+
 .agent-chat__notice[data-tone="danger"],
 .agent-chat__notice [data-tone="danger"] {
   color: var(--sigvelo-color-danger-text);

package/dist/styles/app-frame.css

@@ -0,0 +1,15 @@
+.app-frame {
+  block-size: 100%;
+  min-block-size: 0;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  overflow: hidden;
+  color: var(--sigvelo-color-text);
+  background: var(--sigvelo-color-canvas);
+  container-type: inline-size;
+}
+
+.app-frame__body {
+  min-block-size: 0;
+  overflow: hidden;
+}

package/dist/styles/app-top-bar.css

@@ -0,0 +1,100 @@
+.app-top-bar {
+  box-sizing: border-box;
+  inline-size: 100%;
+  min-inline-size: 0;
+  min-block-size: calc(2.75rem + env(safe-area-inset-top, 0px));
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  align-items: center;
+  gap: var(--sigvelo-spacing-2);
+  padding-block: calc(var(--sigvelo-spacing-1) + env(safe-area-inset-top, 0px))
+    var(--sigvelo-spacing-1);
+  padding-inline: calc(var(--sigvelo-spacing-2) + env(safe-area-inset-left, 0px))
+    calc(var(--sigvelo-spacing-2) + env(safe-area-inset-right, 0px));
+  border: 0;
+  border-block-end: 0;
+  border-radius: 0;
+  background: var(--sigvelo-color-surface);
+}
+
+.app-top-bar__leading,
+.app-top-bar__trailing {
+  min-inline-size: 0;
+  gap: var(--sigvelo-spacing-0-5);
+}
+
+.app-top-bar__leading {
+  grid-column: 1;
+  justify-self: start;
+}
+
+.app-top-bar__title {
+  grid-column: 2;
+  min-inline-size: 0;
+  max-inline-size: min(20rem, 45vw);
+  align-self: center;
+  justify-self: center;
+  overflow: hidden;
+  color: var(--sigvelo-color-text);
+  font-size: var(--sigvelo-text-compact);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: var(--sigvelo-leading-tight);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.app-top-bar__trailing {
+  grid-column: 3;
+  justify-self: end;
+}
+
+.app-top-bar__button {
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  inline-size: 2rem;
+  min-inline-size: 2rem;
+  block-size: 2rem;
+  min-block-size: 2rem;
+  padding: var(--sigvelo-spacing-1);
+  color: var(--sigvelo-color-text-muted);
+  line-height: 0;
+}
+
+.app-top-bar__button svg {
+  display: block;
+  inline-size: 1rem;
+  block-size: 1rem;
+}
+
+.app-top-bar__button:hover:not([data-disabled]),
+.app-top-bar__button:is([aria-expanded="true"], [data-popup-open], [data-pressed]) {
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  color: var(--sigvelo-color-text);
+}
+
+@media (any-pointer: coarse) {
+  .app-top-bar__button {
+    inline-size: 2.75rem;
+    min-inline-size: 2.75rem;
+    block-size: 2.75rem;
+    min-block-size: 2.75rem;
+  }
+}
+
+@media (forced-colors: active) {
+  .app-top-bar {
+    border-block-end-color: canvastext;
+    background: canvas;
+  }
+
+  .app-top-bar__button:focus-visible {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+    box-shadow: none;
+  }
+
+  .app-top-bar__button:is([aria-expanded="true"], [data-popup-open], [data-pressed]) {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+}

package/dist/styles/avatar.css

@@ -51,7 +51,6 @@
 .avatar-group {
   display: flex;
   align-items: center;
-  margin-inline-start: 0.5rem;
 }
 
 .avatar-group .avatar {

package/dist/styles/browser-control-overlay.css

@@ -0,0 +1,184 @@
+/*
+ * Standalone stylesheet for browser-control chrome mounted in a closed shadow
+ * root. It intentionally uses system colors so it remains legible on arbitrary
+ * pages without leaking the full document-level token sheet into the host.
+ */
+
+:host {
+  --browser-control-accent: Highlight;
+  --browser-control-accent-text: HighlightText;
+  --browser-control-warning: Mark;
+  --browser-control-warning-text: MarkText;
+  --browser-control-shadow: color-mix(in srgb, CanvasText 28%, transparent);
+  all: initial;
+  border: 0;
+  contain: layout style paint;
+  inset: 0;
+  margin: 0;
+  padding: 0;
+  pointer-events: none;
+  position: fixed;
+  z-index: 2147483647;
+}
+
+:host .frame {
+  background: color-mix(in srgb, var(--browser-control-accent) 5%, transparent);
+  border: 3px solid color-mix(in srgb, var(--browser-control-accent) 88%, transparent);
+  box-shadow: inset 0 0 18px color-mix(in srgb, var(--browser-control-accent) 28%, transparent);
+  box-sizing: border-box;
+  inset: 0;
+  pointer-events: none;
+  position: fixed;
+}
+
+:host .frame.waiting {
+  background: color-mix(in srgb, var(--browser-control-warning) 12%, transparent);
+  border-color: var(--browser-control-warning);
+  box-shadow: inset 0 0 18px color-mix(in srgb, var(--browser-control-warning) 32%, transparent);
+}
+
+:host .cursor {
+  filter: drop-shadow(0 2px 4px var(--browser-control-shadow));
+  height: 28px;
+  left: 0;
+  opacity: 0;
+  pointer-events: none;
+  position: fixed;
+  top: 0;
+  transform: translate3d(var(--think-cursor-x, 16px), var(--think-cursor-y, 16px), 0);
+  transition:
+    transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1),
+    opacity 80ms linear;
+  width: 28px;
+  will-change: transform;
+}
+
+:host .cursor.visible {
+  opacity: 1;
+}
+
+:host .cursor path {
+  fill: var(--browser-control-accent);
+  stroke: var(--browser-control-accent-text);
+}
+
+:host button {
+  appearance: none;
+  border-radius: 999px;
+  box-shadow: 0 2px 10px var(--browser-control-shadow);
+  cursor: pointer;
+  font:
+    600 12px/1.2 system-ui,
+    sans-serif;
+  padding: 7px 12px;
+}
+
+:host button:focus-visible {
+  outline: 3px solid var(--browser-control-accent);
+  outline-offset: 2px;
+}
+
+:host button:disabled {
+  cursor: wait;
+  opacity: 0.72;
+}
+
+:host .takeover,
+:host .owner {
+  background: var(--browser-control-accent);
+  border: 1px solid var(--browser-control-accent-text);
+  box-shadow: 0 2px 10px var(--browser-control-shadow);
+  color: var(--browser-control-accent-text);
+}
+
+:host .takeover {
+  pointer-events: none;
+  position: fixed;
+  right: 10px;
+  top: 10px;
+}
+
+:host .takeover.takeover-armed {
+  pointer-events: auto;
+}
+
+:host .owner {
+  border-radius: 999px;
+  font:
+    600 12px/1.2 system-ui,
+    sans-serif;
+  left: 10px;
+  max-width: min(360px, 60vw);
+  overflow: hidden;
+  padding: 7px 12px;
+  pointer-events: none;
+  position: fixed;
+  text-overflow: ellipsis;
+  top: 10px;
+  white-space: nowrap;
+}
+
+:host .banner {
+  align-items: center;
+  background: var(--browser-control-warning);
+  border: 1px solid var(--browser-control-warning-text);
+  border-radius: 14px;
+  box-shadow: 0 4px 18px var(--browser-control-shadow);
+  color: var(--browser-control-warning-text);
+  display: flex;
+  font:
+    500 13px/1.35 system-ui,
+    sans-serif;
+  gap: 10px;
+  left: 50%;
+  max-width: min(720px, calc(100vw - 32px));
+  padding: 9px 10px 9px 16px;
+  pointer-events: auto;
+  position: fixed;
+  top: 12px;
+  transform: translateX(-50%);
+}
+
+:host .banner .text {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+:host .banner .done,
+:host .banner .cannot {
+  border: 1px solid currentcolor;
+  color: inherit;
+  flex-shrink: 0;
+}
+
+:host .banner .done {
+  background: color-mix(in srgb, var(--browser-control-warning-text) 16%, transparent);
+}
+
+:host .banner .cannot {
+  background: transparent;
+  box-shadow: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host .cursor {
+    transition: none;
+  }
+}
+
+@media print {
+  :host {
+    display: none !important;
+  }
+}
+
+@media (forced-colors: active) {
+  :host .frame,
+  :host .takeover,
+  :host .owner,
+  :host .banner {
+    forced-color-adjust: none;
+  }
+}

package/dist/styles/card.css

@@ -11,6 +11,27 @@
     transform var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
+.card[data-size="sm"] {
+  padding: var(--sigvelo-spacing-3);
+  border-radius: var(--sigvelo-radius-md);
+}
+
+.card[data-size="sm"] .card__header {
+  margin-block-end: var(--sigvelo-spacing-2);
+}
+
+.card[data-size="sm"] .card__title {
+  font-size: var(--sigvelo-text-sm);
+}
+
+.card[data-size="sm"] .card__content {
+  gap: var(--sigvelo-spacing-2);
+}
+
+.card[data-size="sm"] .card__footer {
+  margin-block-start: var(--sigvelo-spacing-2);
+}
+
 .card__header,
 .card__footer {
   align-items: center;

package/dist/styles/checkbox-group.css

@@ -4,6 +4,75 @@
   gap: 0.5rem;
 }
 
+.checkbox-group[data-layout="grid"] {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
+  align-items: stretch;
+  gap: var(--sigvelo-spacing-3);
+}
+
+.checkbox-group__item {
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-2);
+  min-block-size: 2.75rem;
+  padding-inline: var(--sigvelo-spacing-3);
+  border-radius: var(--sigvelo-radius-md);
+  color: var(--sigvelo-color-text);
+  font-size: var(--sigvelo-text-sm);
+  cursor: pointer;
+}
+
+.checkbox-group__item:hover,
+.checkbox-group__item:has(.checkbox[data-checked]) {
+  background: var(--sigvelo-color-neutral-bg-subtle);
+}
+
+.checkbox-group__item:has(.checkbox:focus-visible) {
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
+}
+
+.checkbox-group__icon {
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.checkbox-group__icon svg {
+  inline-size: 1rem;
+  block-size: 1rem;
+}
+
+.checkbox-group__content {
+  min-inline-size: 0;
+  flex: 1 1 auto;
+  display: grid;
+  gap: var(--sigvelo-spacing-0-5);
+}
+
+.checkbox-group__title,
+.checkbox-group__description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.checkbox-group__title {
+  font-weight: var(--sigvelo-font-weight-semibold);
+}
+
+.checkbox-group__description {
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+}
+
+.checkbox-group__trailing {
+  min-inline-size: 0;
+  flex: 0 0 auto;
+  color: var(--sigvelo-color-text-muted);
+}
+
 .checkbox-group[data-disabled] {
   opacity: var(--sigvelo-recipe-disabled-opacity);
   pointer-events: none;

package/dist/styles/description-list.css

@@ -0,0 +1,50 @@
+.description-list {
+  display: grid;
+  gap: var(--sigvelo-spacing-2);
+  margin: 0;
+}
+
+.description-list__item {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--sigvelo-spacing-3);
+}
+
+.description-list__term {
+  color: var(--sigvelo-color-text-muted);
+}
+
+.description-list__details {
+  margin: 0;
+  overflow-wrap: anywhere;
+  font-family: var(--sigvelo-font-mono);
+  font-size: var(--sigvelo-text-xs);
+  text-align: end;
+}
+
+.description-list[data-variant="divided"] {
+  gap: 0;
+  border-block: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+}
+
+.description-list[data-variant="divided"] .description-list__item {
+  padding-block: var(--sigvelo-spacing-2-5);
+}
+
+.description-list[data-variant="divided"] .description-list__item:not(:last-child) {
+  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+}
+
+.description-list[data-variant="divided"] .description-list__term {
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-2);
+}
+
+.description-list[data-variant="divided"] .description-list__term svg {
+  inline-size: 1rem;
+  block-size: 1rem;
+  flex: 0 0 auto;
+}

package/dist/styles/fieldset.css

@@ -9,6 +9,11 @@
   border-radius: var(--sigvelo-radius-md);
 }
 
+.fieldset[data-variant="plain"] {
+  padding: 0;
+  border: 0;
+}
+
 .fieldset__legend {
   padding: 0 0.5rem;
   margin: 0 -0.5rem;
@@ -17,3 +22,9 @@
   font-weight: var(--sigvelo-font-weight-bold);
   color: var(--sigvelo-color-text);
 }
+
+.fieldset__description {
+  margin: 0;
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-sm);
+}