@mcp-b/react-components 0.39.0 → 0.41.0

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

@@ -1,169 +0,0 @@
-/*
- * Standalone closed-shadow styles for AgentActivityPreview. The extension host
- * owns placement, top-layer behavior, containment, and pointer-event policy.
- */
-@import "./activity-header.css";
-@import "./app-icon.css";
-@import "./agent-activity-preview.css";
-
-:host {
-  all: initial;
-  color-scheme: light dark;
-  display: block;
-  color: CanvasText;
-  font-family: system-ui, sans-serif;
-
-  /*
-   * `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-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-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;
-}
-
-:host *,
-:host *::before,
-:host *::after {
-  box-sizing: border-box;
-}
-
-.agent-activity-preview {
-  width: min(448px, 100%);
-}
-
-.agent-activity-preview__dismiss {
-  display: grid;
-  width: 32px;
-  min-width: 32px;
-  height: 32px;
-  min-height: 32px;
-  place-items: center;
-  padding: 0;
-  border: 0;
-  font: inherit;
-  appearance: none;
-  cursor: pointer;
-}
-
-.agent-activity-preview__dismiss > svg {
-  width: 14px;
-  height: 14px;
-}
-
-.agent-activity-preview__dismiss:focus-visible {
-  outline: none;
-  box-shadow:
-    0 0 0 2px Canvas,
-    0 0 0 4px Highlight;
-}
-
-.agent-activity-preview__list {
-  max-height: min(288px, 60dvh);
-}
-
-.agent-activity-preview__trailing {
-  min-width: 16px;
-}
-
-.activity__favicon {
-  display: block;
-  width: 16px;
-  height: 16px;
-  border-radius: 3px;
-  background-color: Canvas;
-  object-fit: contain;
-}
-
-.sigvelo-icon--spinner {
-  animation: agent-activity-preview-spin 900ms linear infinite;
-  transform-origin: center;
-}
-
-@keyframes agent-activity-preview-spin {
-  to {
-    rotate: 1turn;
-  }
-}
-
-/* Shadow-local copy of base.css's sigvelo-text-shimmer — keyframes do not cross
-   shadow roots, so the imported activity header shimmer needs it defined here.
-   --sigvelo-motion-duration-shimmer inherits across the boundary. */
-@keyframes sigvelo-text-shimmer {
-  from {
-    background-position: 100% 0;
-  }
-  to {
-    background-position: -100% 0;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  :host {
-    --sigvelo-color-warning-text: #f0aa45;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .sigvelo-icon--spinner {
-    animation: none;
-  }
-}
-
-@media (forced-colors: active) {
-  :host {
-    --sigvelo-color-warning-text: MarkText;
-  }
-}

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

@@ -1,209 +0,0 @@
-.agent-activity-preview {
-  position: relative;
-  width: min(28rem, 100%);
-  min-width: 0;
-  padding: var(--sigvelo-spacing-2);
-  border-radius: var(--sigvelo-radius-lg);
-  color: var(--sigvelo-color-text);
-  background: var(--sigvelo-color-surface-raised);
-  box-shadow: var(--sigvelo-elevation-raised);
-}
-
-.agent-activity-preview__badge {
-  position: absolute;
-  inset-block-start: calc(-1 * var(--sigvelo-spacing-2));
-  inset-inline-end: var(--sigvelo-spacing-1);
-  display: grid;
-  place-items: center;
-  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-raised);
-  box-shadow: var(--sigvelo-elevation-raised);
-}
-
-.agent-activity-preview__badge > svg {
-  width: var(--sigvelo-control-icon-size-md);
-  height: var(--sigvelo-control-icon-size-md);
-}
-
-.agent-activity-preview__dismiss {
-  position: absolute;
-  z-index: 1;
-  inset-block-start: calc(-1 * var(--sigvelo-spacing-2));
-  inset-inline-end: var(--sigvelo-spacing-1);
-  border-radius: var(--sigvelo-radius-full);
-  color: var(--sigvelo-color-text-muted);
-  background: var(--sigvelo-color-surface-raised);
-  box-shadow: var(--sigvelo-elevation-raised);
-  opacity: 0;
-  scale: 0.92;
-  transition:
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    scale var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.agent-activity-preview:hover .agent-activity-preview__dismiss,
-.agent-activity-preview:focus-within .agent-activity-preview__dismiss,
-.agent-activity-preview__dismiss:focus-visible {
-  opacity: 1;
-  scale: 1;
-}
-
-.agent-activity-preview__dismiss:hover:not([data-disabled]) {
-  color: var(--sigvelo-color-text);
-  background: var(--sigvelo-color-surface-raised);
-}
-
-.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__list {
-  display: grid;
-  gap: var(--sigvelo-spacing-0-5);
-  max-height: min(18rem, 60dvh);
-  padding: 0;
-  margin: 0;
-  overflow-y: auto;
-  list-style: none;
-}
-
-.agent-activity-preview__item {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: stretch;
-  gap: var(--sigvelo-spacing-0-5);
-  min-width: 0;
-}
-
-.agent-activity-preview__item:first-child {
-  padding-inline-end: calc(var(--sigvelo-spacing-8) + var(--sigvelo-spacing-0-5));
-}
-
-.agent-activity-preview__row {
-  display: block;
-  width: 100%;
-  min-width: 0;
-  min-height: var(--sigvelo-control-height-sm);
-  padding: var(--sigvelo-spacing-1-5);
-  border: 0;
-  border-radius: var(--sigvelo-radius-md);
-  color: inherit;
-  background: transparent;
-  font: inherit;
-  text-decoration: none;
-  cursor: pointer;
-  transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    transform var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.agent-activity-preview__row:hover {
-  background: var(--sigvelo-color-neutral-bg-subtle);
-  transform: translateY(-1px);
-}
-
-.agent-activity-preview__file-action {
-  display: grid;
-  place-items: center;
-  min-width: var(--sigvelo-control-height-sm);
-  min-height: var(--sigvelo-control-height-sm);
-  padding: var(--sigvelo-spacing-1-5);
-  border: 0;
-  border-radius: var(--sigvelo-radius-md);
-  color: var(--sigvelo-color-text-muted);
-  background: transparent;
-  text-decoration: none;
-  cursor: pointer;
-  transition:
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.agent-activity-preview__file-action:hover {
-  color: var(--sigvelo-color-text);
-  background: var(--sigvelo-color-neutral-bg-subtle);
-}
-
-.agent-activity-preview__file-action > svg {
-  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-action {
-  max-width: none;
-}
-
-.agent-activity-preview__trailing {
-  display: flex;
-  flex: none;
-  align-items: center;
-  gap: var(--sigvelo-spacing-2);
-  min-width: 1rem;
-}
-
-.agent-activity-preview__trailing > svg {
-  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,
-.agent-activity-preview__row[data-status="unviewed"] .agent-activity-preview__trailing {
-  color: var(--sigvelo-color-primary-text);
-}
-
-.agent-activity-preview__row[data-status="input-required"] .agent-activity-preview__trailing > svg {
-  color: var(--sigvelo-color-warning-text);
-}
-
-.agent-activity-preview__unviewed-dot {
-  width: var(--sigvelo-spacing-2);
-  height: var(--sigvelo-spacing-2);
-  border-radius: var(--sigvelo-radius-full);
-  background: currentColor;
-}
-
-@media (pointer: coarse) {
-  .agent-activity-preview__dismiss {
-    opacity: 1;
-    scale: 1;
-  }
-
-  .agent-activity-preview__row,
-  .agent-activity-preview__file-action {
-    min-height: var(--sigvelo-control-height-xl);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .agent-activity-preview__dismiss,
-  .agent-activity-preview__row,
-  .agent-activity-preview__file-action {
-    transition: none;
-  }
-
-  .agent-activity-preview__row:hover {
-    transform: none;
-  }
-}
-
-@media (forced-colors: active) {
-  .agent-activity-preview {
-    outline: 1px solid CanvasText;
-  }
-
-  .agent-activity-preview__badge,
-  .agent-activity-preview__dismiss,
-  .agent-activity-preview__file-action {
-    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
-  }
-}

package/dist/styles/badge.css

@@ -1,120 +0,0 @@
-.badge {
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  gap: var(--sigvelo-spacing-1);
-  inline-size: fit-content;
-  overflow: hidden;
-  padding-block: var(--sigvelo-spacing-0-5);
-  padding-inline: var(--sigvelo-spacing-2);
-  font-family: inherit;
-  font-size: var(--sigvelo-text-xs);
-  font-weight: var(--sigvelo-font-weight-bold);
-  line-height: var(--sigvelo-leading-compact);
-  text-transform: uppercase;
-  letter-spacing: 0.025em;
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width) transparent;
-  border-radius: var(--sigvelo-radius-full);
-  white-space: nowrap;
-  transition:
-    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
-    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
-    border-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
-    box-shadow var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
-}
-
-.badge:where(a, button) {
-  text-decoration: none;
-}
-
-.badge:focus-visible {
-  outline: none;
-  box-shadow: var(--sigvelo-recipe-focus-shadow);
-}
-
-.badge:is([aria-invalid="true"], [data-invalid]) {
-  border-color: var(--sigvelo-color-danger-bg);
-}
-
-.badge > svg {
-  flex-shrink: 0;
-  inline-size: var(--sigvelo-spacing-3);
-  block-size: var(--sigvelo-spacing-3);
-  pointer-events: none;
-}
-
-.badge--sm {
-  padding-block: calc(var(--sigvelo-spacing-0-5) / 2);
-  padding-inline: var(--sigvelo-spacing-1-5);
-  font-size: var(--sigvelo-text-3xs);
-}
-
-/* Normal appearance */
-
-.badge--normal.badge--primary {
-  background-color: var(--sigvelo-color-primary-bg);
-  color: var(--sigvelo-color-primary-text-on-bg);
-}
-
-.badge--normal.badge--neutral {
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
-  color: var(--sigvelo-color-neutral-text-on-subtle);
-}
-
-.badge--normal.badge--success {
-  background-color: var(--sigvelo-color-success-bg);
-  color: var(--sigvelo-color-success-text-on-bg);
-}
-
-.badge--normal.badge--warning {
-  background-color: var(--sigvelo-color-warning-bg);
-  color: var(--sigvelo-color-warning-text-on-bg);
-}
-
-.badge--normal.badge--destructive {
-  background-color: var(--sigvelo-color-danger-bg);
-  color: var(--sigvelo-color-danger-text-on-bg);
-}
-
-/* Outline appearance */
-
-.badge--outline {
-  background-color: transparent;
-  color: var(--sigvelo-color-text);
-  border-color: var(--sigvelo-color-neutral-border-muted);
-}
-
-/* Ghost appearance */
-
-.badge--ghost {
-  background-color: transparent;
-  color: var(--sigvelo-color-neutral-text-on-subtle);
-}
-
-.badge--ghost:where(a, button):hover {
-  background-color: color-mix(in oklab, transparent, var(--sigvelo-color-text) 5%);
-}
-
-/* Link appearance */
-
-.badge--link {
-  background-color: transparent;
-  color: var(--sigvelo-color-primary-text);
-  text-underline-offset: 4px;
-}
-
-.badge--link:where(a, button):hover {
-  text-decoration: underline;
-}
-
-@media (forced-colors: active) {
-  .badge {
-    border: var(--sigvelo-border-style) var(--sigvelo-border-width) ButtonText;
-  }
-
-  .badge--ghost,
-  .badge--link {
-    border-color: transparent;
-  }
-}

package/dist/styles/shell.css

@@ -1,122 +0,0 @@
-/* Shell Component */
-.shell {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  min-height: 25rem;
-  border-radius: var(--sigvelo-radius-md);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-  background: var(--sigvelo-color-surface-raised);
-  overflow: hidden;
-}
-
-.shell__header {
-  display: flex;
-  align-items: center;
-  padding: var(--sigvelo-spacing-3) var(--sigvelo-spacing-4);
-  background: var(--sigvelo-color-surface-sunken);
-  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-}
-
-.shell__heading {
-  margin: 0;
-  font-size: var(--sigvelo-text-sm);
-  font-weight: var(--sigvelo-font-weight-semibold);
-  color: var(--sigvelo-color-text);
-}
-
-.shell__body {
-  display: flex;
-  flex: 1;
-  min-height: 0;
-  position: relative;
-}
-
-/* Action Bar */
-.shell__action-bar {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sigvelo-spacing-1);
-  padding: var(--sigvelo-spacing-2);
-  background: var(--sigvelo-color-surface-sunken);
-  border-inline-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-}
-
-.shell__action {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--sigvelo-spacing-10);
-  height: var(--sigvelo-spacing-10);
-  padding: 0;
-  border: none;
-  border-radius: var(--sigvelo-radius-md);
-  background: transparent;
-  color: var(--sigvelo-color-text-muted);
-  cursor: pointer;
-  transition:
-    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
-    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
-}
-
-.shell__action:hover {
-  background: var(--sigvelo-color-surface-sunken);
-  color: var(--sigvelo-color-text);
-}
-
-.shell__action--active {
-  background: var(--sigvelo-color-primary-bg);
-  color: var(--sigvelo-color-primary-text-on-bg);
-}
-
-.shell__action--active:hover {
-  background: color-mix(in oklab, var(--sigvelo-color-primary-bg), black 5%);
-  color: var(--sigvelo-color-primary-text-on-bg);
-}
-
-.shell__action svg {
-  width: var(--sigvelo-spacing-5);
-  height: var(--sigvelo-spacing-5);
-}
-
-/* Panel */
-.shell__panel {
-  display: flex;
-  flex-direction: column;
-  width: 16.25rem;
-  max-width: 100%;
-  background: var(--sigvelo-color-surface-raised);
-  border-inline-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-  overflow: hidden;
-}
-
-.shell__panel[hidden] {
-  display: none;
-}
-
-.shell__panel-heading {
-  padding: var(--sigvelo-spacing-3) var(--sigvelo-spacing-4);
-  font-size: var(--sigvelo-text-sm);
-  font-weight: var(--sigvelo-font-weight-bold);
-  color: var(--sigvelo-color-text);
-  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-}
-
-.shell__panel-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--sigvelo-spacing-4);
-}
-
-/* Content */
-.shell__content {
-  flex: 1;
-  min-width: 0;
-  position: relative;
-  overflow: hidden;
-}

package/dist/styles/status-pill.css

@@ -1,39 +0,0 @@
-/*
- * The chip itself is `.badge`. Only the indicator lives here.
- */
-.status-pill__dot {
-  inline-size: var(--sigvelo-spacing-1-5);
-  block-size: var(--sigvelo-spacing-1-5);
-  flex-shrink: 0;
-  border-radius: var(--sigvelo-radius-circle);
-  /* currentColor, so the dot follows whichever badge color it was given rather
-     than needing a matching set of its own. */
-  background-color: currentColor;
-}
-
-.status-pill[data-busy] .status-pill__dot {
-  animation: sigvelo-status-pulse var(--sigvelo-motion-duration-pulse) ease-in-out infinite;
-}
-
-@keyframes sigvelo-status-pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: 0.4;
-  }
-}
-
-/* The dot stays; only its breathing stops. A still dot still reads as a state
-   indicator, which is the part carrying meaning. */
-@media (prefers-reduced-motion: reduce) {
-  .status-pill[data-busy] .status-pill__dot {
-    animation: none;
-  }
-}
-
-:root[data-motion="reduce"] .status-pill[data-busy] .status-pill__dot {
-  animation: none;
-}