@mcp-b/react-components 0.20.5 → 0.22.0

package/dist/styles/action-guide.css

@@ -0,0 +1,128 @@
+.action-guide {
+  container: action-guide / inline-size;
+  display: grid;
+  gap: var(--sigvelo-spacing-8);
+  inline-size: 100%;
+  padding: var(--sigvelo-spacing-2) var(--sigvelo-spacing-2) var(--sigvelo-spacing-8);
+  color: var(--sigvelo-color-text);
+}
+
+.action-guide__header {
+  display: grid;
+  gap: var(--sigvelo-spacing-4);
+}
+
+.action-guide__title,
+.action-guide__description,
+.action-guide__section-title {
+  margin: 0;
+  font-size: var(--sigvelo-text-base);
+}
+
+.action-guide__title,
+.action-guide__section-title {
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: var(--sigvelo-text-lg-leading);
+}
+
+.action-guide__description {
+  max-inline-size: var(--sigvelo-measure-prose);
+  line-height: var(--sigvelo-text-lg-leading);
+}
+
+.action-guide__section {
+  display: grid;
+  gap: var(--sigvelo-spacing-4);
+}
+
+.action-guide__list {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--sigvelo-spacing-3);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.action-guide__list[data-layout="compact"] {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.action-guide__list[data-layout="list"] {
+  gap: 0;
+}
+
+.action-guide__item,
+.action-guide__action {
+  min-inline-size: 0;
+}
+
+.action-guide__action {
+  inline-size: 100%;
+  justify-content: flex-start;
+  color: var(--sigvelo-color-text);
+  font-size: var(--sigvelo-text-base);
+  font-weight: var(--sigvelo-font-weight-normal);
+  letter-spacing: var(--sigvelo-tracking-tight);
+  line-height: var(--sigvelo-text-base-leading);
+  white-space: normal;
+  text-align: start;
+}
+
+.action-guide__action-icon {
+  display: inline-flex;
+  flex: none;
+  color: var(--sigvelo-color-primary-text);
+}
+
+.action-guide__action-icon svg {
+  inline-size: var(--sigvelo-control-icon-size-md);
+  block-size: var(--sigvelo-control-icon-size-md);
+}
+
+.action-guide__action-label {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+.action-guide__list[data-layout="compact"] .action-guide__action {
+  inline-size: auto;
+  max-inline-size: 100%;
+  min-block-size: var(--sigvelo-spacing-12);
+  gap: var(--sigvelo-spacing-3);
+  padding-inline: var(--sigvelo-spacing-4);
+  border-radius: var(--sigvelo-radius-lg);
+}
+
+.action-guide__list[data-layout="cards"] .action-guide__action {
+  flex-direction: column;
+  align-items: flex-start;
+  min-block-size: calc(var(--sigvelo-spacing-24) + var(--sigvelo-spacing-2));
+  gap: var(--sigvelo-spacing-4);
+  padding: var(--sigvelo-spacing-4);
+  border-radius: var(--sigvelo-radius-lg);
+}
+
+.action-guide__list[data-layout="cards"] .action-guide__action-label {
+  margin-block-start: auto;
+}
+
+.action-guide__list[data-layout="list"] .action-guide__action {
+  min-block-size: calc(var(--sigvelo-control-height-xl) + var(--sigvelo-spacing-2));
+  gap: var(--sigvelo-spacing-3);
+  padding-inline: var(--sigvelo-spacing-2-5);
+  border-radius: var(--sigvelo-radius-lg);
+}
+
+@container action-guide (width > 30rem) {
+  .action-guide__list[data-layout="cards"] {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (forced-colors: active) {
+  .action-guide__action-icon {
+    color: ButtonText;
+  }
+}

package/dist/styles/activity-header.css

@@ -11,13 +11,44 @@
   text-align: start;
 }
 
-/* Basis 0 keeps a long label from inflating its owner; the trailing
-   affordance stays adjacent until the available width is exhausted. */
-.activity__header-label {
-  flex: 1 1 0;
+/*
+ * The action holds its content width and the detail absorbs whatever is left,
+ * so the two shrink in the right order: a long path loses its tail while
+ * "Reading" stays legible. Basis 0 on the detail is what makes it the flexible
+ * one; the trailing affordance stays adjacent until the width is exhausted.
+ *
+ * With no detail present the action is the only flexible item, so a settled
+ * summary sentence still truncates rather than inflating its owner.
+ */
+.activity__header-action {
+  flex: 0 1 auto;
   min-width: 0;
   max-width: max-content;
+  overflow: hidden;
   color: var(--sigvelo-color-text);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/*
+ * The target of the action — a path, a command, a query. Muted, because in a
+ * column of activity lines the verb is what the reader scans for.
+ *
+ * Faded rather than ellipsed: this is data, and a trailing "…" reads as part of
+ * the value it is truncating.
+ *
+ * The fade is unconditional because it does not need a condition. Growing to
+ * fill the free space means the box is wider than short text, so the gradient
+ * lands on empty space and only bites once the text actually reaches the edge.
+ */
+.activity__header-detail {
+  flex: 1 1 0;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--sigvelo-color-text-muted);
+  font-weight: var(--sigvelo-font-weight-normal);
+  white-space: nowrap;
+  mask-image: linear-gradient(to right, #000 calc(100% - 1rem), transparent 100%);
 }
 
 .activity__item-icon {
@@ -26,8 +57,8 @@
   color: var(--sigvelo-color-text-muted);
 }
 
-.activity[data-streaming] .activity__header-label,
-.activity__header[data-streaming] .activity__header-label {
+.activity[data-streaming] .activity__header-action,
+.activity__header[data-streaming] .activity__header-action {
   --sigvelo-shimmer-base: color-mix(in oklab, var(--sigvelo-color-text-muted), transparent 20%);
   background: linear-gradient(
     90deg,
@@ -43,8 +74,8 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .activity[data-streaming] .activity__header-label,
-  .activity__header[data-streaming] .activity__header-label {
+  .activity[data-streaming] .activity__header-action,
+  .activity__header[data-streaming] .activity__header-action {
     animation: none;
     background: none;
     color: inherit;
@@ -52,8 +83,8 @@
 }
 
 @media (forced-colors: active) {
-  .activity[data-streaming] .activity__header-label,
-  .activity__header[data-streaming] .activity__header-label {
+  .activity[data-streaming] .activity__header-action,
+  .activity__header[data-streaming] .activity__header-action {
     animation: none;
     background: none;
     color: inherit;

package/dist/styles/activity.css

@@ -91,7 +91,7 @@
   gap: var(--sigvelo-spacing-1-5);
   font-size: var(--sigvelo-text-compact);
   color: var(--sigvelo-color-text);
-  line-height: var(--sigvelo-leading-body);
+  line-height: var(--sigvelo-leading-relaxed);
 }
 
 /* Second collapse level: the trigger reads as a plain item row; the panel is
@@ -118,7 +118,7 @@
   font-size: var(--sigvelo-text-compact);
   font-weight: inherit;
   color: var(--sigvelo-color-text);
-  line-height: var(--sigvelo-leading-body);
+  line-height: var(--sigvelo-leading-relaxed);
   text-align: start;
   cursor: pointer;
   transition: background-color var(--sigvelo-motion-duration-interaction)
@@ -164,7 +164,7 @@
 .activity__group-text {
   margin: 0;
   font-size: var(--sigvelo-text-compact);
-  line-height: var(--sigvelo-leading-body);
+  line-height: var(--sigvelo-leading-relaxed);
   color: var(--sigvelo-color-text-muted);
   white-space: pre-wrap;
   overflow-wrap: anywhere;
@@ -200,7 +200,7 @@
   margin: 0;
   font-family: var(--sigvelo-font-mono);
   font-size: var(--sigvelo-text-xs);
-  line-height: var(--sigvelo-leading-body);
+  line-height: var(--sigvelo-leading-relaxed);
   color: var(--sigvelo-color-text);
   white-space: pre-wrap;
   overflow-wrap: anywhere;
@@ -323,6 +323,28 @@
   overflow-wrap: anywhere;
 }
 
+/*
+ * The target of a row's action. Muted and shrink-first, so a column of rows
+ * reads down its verbs — "Read / Edited / Ran" — with the paths and commands
+ * present but out of the way.
+ */
+.activity__item-detail {
+  flex: 1 1 0;
+  min-inline-size: 0;
+  overflow: hidden;
+  color: var(--sigvelo-color-text-muted);
+  white-space: nowrap;
+  mask-image: linear-gradient(to right, #000 calc(100% - 1rem), transparent 100%);
+}
+
+/* The action keeps its content width once a detail is beside it to shrink. */
+.activity__item:has(.activity__item-detail) .activity__item-text,
+.activity__group-trigger:has(.activity__item-detail) .activity__item-text {
+  flex: 0 1 auto;
+  overflow-wrap: normal;
+  white-space: nowrap;
+}
+
 @media (hover: none) {
   .activity__group-icon {
     opacity: 1;

package/dist/styles/agent-activity-preview-overlay.css

@@ -3,6 +3,7 @@
  * owns placement, top-layer behavior, containment, and pointer-event policy.
  */
 @import "./activity-header.css";
+@import "./app-icon.css";
 @import "./agent-activity-preview.css";
 
 :host {
@@ -12,26 +13,64 @@
   color: CanvasText;
   font-family: system-ui, sans-serif;
 
-  --sigvelo-spacing-0-5: 0.125rem;
-  --sigvelo-spacing-1: 0.25rem;
-  --sigvelo-spacing-1-5: 0.375rem;
-  --sigvelo-spacing-2: 0.5rem;
-  --sigvelo-spacing-3: 0.75rem;
-  --sigvelo-radius-md: 0.5rem;
-  --sigvelo-radius-lg: 0.75rem;
-  --sigvelo-radius-xs: 0.1875rem;
-  --sigvelo-text-compact: 0.8125rem;
+  /*
+   * `all: initial` plus a closed shadow root means nothing inherits, so every
+   * token the imported stylesheets read has to be restated here. A token that
+   * is missing does not fall back to the page value — it resolves to nothing
+   * and the declaration is dropped, which is silent. Keep this list in step
+   * with what the imported component stylesheets actually use.
+   *
+   * These are px, not rem, and that is the point. This bundle renders in an
+   * active-tab content script, and `rem` resolves against the host page's root
+   * element — a page setting `html { font-size: 10px }` would shrink the whole
+   * preview by a third. `all: initial` does not isolate that; nothing does.
+   * A surface drawn on a page we do not control has to carry its own units.
+   */
+  --sigvelo-spacing-0-5: 2px;
+  --sigvelo-spacing-1: 4px;
+  --sigvelo-spacing-1-5: 6px;
+  --sigvelo-spacing-2: 8px;
+  --sigvelo-spacing-3: 12px;
+  --sigvelo-spacing-4: 16px;
+  --sigvelo-spacing-5: 20px;
+  --sigvelo-spacing-6: 24px;
+  --sigvelo-spacing-8: 32px;
+  --sigvelo-spacing-10: 40px;
+  --sigvelo-spacing-12: 48px;
+  --sigvelo-spacing-14: 56px;
+  --sigvelo-radius-md: 8px;
+  --sigvelo-radius-lg: 12px;
+  --sigvelo-radius-xs: 3px;
+  --sigvelo-radius-full: 9999px;
+  --sigvelo-border-style: solid;
+  --sigvelo-border-width-hairline: 0.5px;
+  --sigvelo-border-width: 1px;
+  --sigvelo-text-compact: 13px;
+  --sigvelo-text-xs: 12px;
+  --sigvelo-font-weight-normal: 400;
   --sigvelo-font-weight-semibold: 500;
+  --sigvelo-control-height-sm: 32px;
+  --sigvelo-control-height-xl: 44px;
+  --sigvelo-control-icon-size-sm: 14px;
+  --sigvelo-control-icon-size-md: 16px;
+  --sigvelo-control-icon-size-lg: 18px;
   --sigvelo-duration-fast: 150ms;
-  --sigvelo-duration-slow: 360ms;
+  --sigvelo-motion-duration-shimmer: 2400ms;
+  --sigvelo-motion-duration-spin: 900ms;
   --sigvelo-ease-standard: cubic-bezier(0.2, 0, 0, 1);
   --sigvelo-color-surface: Canvas;
+  --sigvelo-color-surface-raised: Canvas;
+  --sigvelo-color-shadow: black;
   --sigvelo-color-text: CanvasText;
   --sigvelo-color-text-muted: GrayText;
   --sigvelo-color-primary-text: LinkText;
+  --sigvelo-color-primary-bg: CanvasText;
+  --sigvelo-color-primary-text-on-bg: Canvas;
   --sigvelo-color-warning-text: #8a4b00;
   --sigvelo-color-neutral-bg-subtle: color-mix(in oklab, CanvasText 7%, Canvas);
-  --sigvelo-shadow-sm: 0 0.125rem 0.1875rem color-mix(in oklab, CanvasText 8%, transparent);
+  --sigvelo-elevation-raised:
+    0 0 0 0.5px color-mix(in oklab, CanvasText 8%, transparent),
+    0 1px 2px -1px color-mix(in oklab, CanvasText 8%, transparent);
   --sigvelo-recipe-focus-shadow: 0 0 0 2px Canvas, 0 0 0 4px Highlight;
 }
 
@@ -51,7 +90,7 @@
 }
 
 .sigvelo-icon--spinner {
-  animation: agent-activity-preview-spin var(--sigvelo-duration-slow) linear infinite;
+  animation: agent-activity-preview-spin var(--sigvelo-motion-duration-spin) linear infinite;
   transform-origin: center;
 }
 

package/dist/styles/agent-activity-preview.css

@@ -5,8 +5,8 @@
   padding: var(--sigvelo-spacing-2);
   border-radius: var(--sigvelo-radius-lg);
   color: var(--sigvelo-color-text);
-  background: color-mix(in oklab, var(--sigvelo-color-surface), transparent 3%);
-  box-shadow: var(--sigvelo-shadow-xs);
+  background: var(--sigvelo-color-surface-raised);
+  box-shadow: var(--sigvelo-elevation-raised);
 }
 
 .agent-activity-preview__badge {
@@ -15,17 +15,17 @@
   inset-inline-end: var(--sigvelo-spacing-1);
   display: grid;
   place-items: center;
-  width: 2rem;
-  height: 2rem;
-  border-radius: 999px;
+  width: var(--sigvelo-control-height-sm);
+  height: var(--sigvelo-control-height-sm);
+  border-radius: var(--sigvelo-radius-full);
   color: var(--sigvelo-color-primary-text);
-  background: var(--sigvelo-color-surface);
-  box-shadow: var(--sigvelo-shadow-sm);
+  background: var(--sigvelo-color-surface-raised);
+  box-shadow: var(--sigvelo-elevation-raised);
 }
 
 .agent-activity-preview__badge > svg {
-  width: 1rem;
-  height: 1rem;
+  width: var(--sigvelo-control-icon-size-md);
+  height: var(--sigvelo-control-icon-size-md);
 }
 
 .agent-activity-preview__dismiss {
@@ -33,17 +33,10 @@
   z-index: 1;
   inset-block-start: calc(-1 * var(--sigvelo-spacing-2));
   inset-inline-end: var(--sigvelo-spacing-1);
-  display: grid;
-  place-items: center;
-  width: 2rem;
-  height: 2rem;
-  padding: 0;
-  border: 0;
-  border-radius: 999px;
+  border-radius: var(--sigvelo-radius-full);
   color: var(--sigvelo-color-text-muted);
-  background: var(--sigvelo-color-surface);
-  box-shadow: var(--sigvelo-shadow-sm);
-  cursor: pointer;
+  background: var(--sigvelo-color-surface-raised);
+  box-shadow: var(--sigvelo-elevation-raised);
   opacity: 0;
   scale: 0.92;
   transition:
@@ -59,22 +52,17 @@
   scale: 1;
 }
 
-.agent-activity-preview__dismiss:hover {
+.agent-activity-preview__dismiss:hover:not([data-disabled]) {
   color: var(--sigvelo-color-text);
+  background: var(--sigvelo-color-surface-raised);
 }
 
-.agent-activity-preview__dismiss:focus-visible,
 .agent-activity-preview__row:focus-visible,
 .agent-activity-preview__file-action:focus-visible {
   outline: none;
   box-shadow: var(--sigvelo-recipe-focus-shadow);
 }
 
-.agent-activity-preview__dismiss > svg {
-  width: 0.875rem;
-  height: 0.875rem;
-}
-
 .agent-activity-preview__list {
   display: grid;
   gap: var(--sigvelo-spacing-0-5);
@@ -143,15 +131,15 @@
 }
 
 .agent-activity-preview__file-action > svg {
-  width: 1rem;
-  height: 1rem;
+  width: var(--sigvelo-control-icon-size-md);
+  height: var(--sigvelo-control-icon-size-md);
 }
 
 .agent-activity-preview__row .activity__header {
   gap: var(--sigvelo-spacing-2);
 }
 
-.agent-activity-preview__row .activity__header-label {
+.agent-activity-preview__row .activity__header-action {
   max-width: none;
 }
 
@@ -163,26 +151,9 @@
   min-width: 1rem;
 }
 
-.agent-activity-preview__favicons {
-  display: flex;
-  align-items: center;
-  padding-inline-start: var(--sigvelo-spacing-1);
-}
-
-.agent-activity-preview__favicons img {
-  display: block;
-  width: 1.125rem;
-  height: 1.125rem;
-  margin-inline-start: -0.25rem;
-  border: 2px solid var(--sigvelo-color-surface);
-  border-radius: 999px;
-  background: var(--sigvelo-color-surface);
-  object-fit: contain;
-}
-
 .agent-activity-preview__trailing > svg {
-  width: 1rem;
-  height: 1rem;
+  width: var(--sigvelo-control-icon-size-md);
+  height: var(--sigvelo-control-icon-size-md);
 }
 
 .agent-activity-preview__row[data-status="running"] .agent-activity-preview__trailing > svg,
@@ -195,9 +166,9 @@
 }
 
 .agent-activity-preview__unviewed-dot {
-  width: 0.5rem;
-  height: 0.5rem;
-  border-radius: 999px;
+  width: var(--sigvelo-spacing-2);
+  height: var(--sigvelo-spacing-2);
+  border-radius: var(--sigvelo-radius-full);
   background: currentColor;
 }
 
@@ -232,8 +203,7 @@
 
   .agent-activity-preview__badge,
   .agent-activity-preview__dismiss,
-  .agent-activity-preview__file-action,
-  .agent-activity-preview__favicons img {
+  .agent-activity-preview__file-action {
     border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 }

package/dist/styles/agent-attention.css

@@ -9,7 +9,7 @@
   border-radius: var(--sigvelo-radius-md);
   color: var(--sigvelo-color-text);
   background: var(--sigvelo-color-surface);
-  box-shadow: var(--sigvelo-shadow-xs);
+  box-shadow: var(--sigvelo-elevation-raised);
 }
 
 .agent-attention[data-tone="warning"] {
@@ -58,7 +58,7 @@
 .agent-attention__text {
   display: grid;
   min-width: 0;
-  line-height: 1.35;
+  line-height: var(--sigvelo-leading-snug);
 }
 
 .agent-attention__title {