@mcp-b/react-components 0.11.0 → 0.13.0

package/dist/styles/base.css

@@ -14,8 +14,9 @@
 }
 
 body {
+  position: relative;
   font-family: var(--sigvelo-font-sans);
-  font-size: 1rem;
+  font-size: var(--sigvelo-text-base);
   line-height: 1.5;
   color: var(--sigvelo-color-text);
   background-color: var(--sigvelo-color-canvas);
@@ -23,6 +24,23 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+.sigvelo-icon--spinner {
+  animation: sigvelo-icon-spin var(--sigvelo-duration-slow) linear infinite;
+  transform-origin: center;
+}
+
+@keyframes sigvelo-icon-spin {
+  to {
+    rotate: 1turn;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sigvelo-icon--spinner {
+    animation: none;
+  }
+}
+
 code,
 kbd,
 samp,
@@ -48,17 +66,6 @@ a {
   font-variant-numeric: tabular-nums;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
-}
-
 @media (prefers-contrast: more) {
   :root {
     --sigvelo-color-neutral-border-muted: var(--sigvelo-color-neutral-600);
@@ -66,16 +73,3 @@ a {
     --sigvelo-color-neutral-bg-subtle: var(--sigvelo-color-neutral-200);
   }
 }
-
-@media (forced-colors: active) {
-  :focus-visible {
-    outline: 2px solid Highlight;
-    outline-offset: 2px;
-  }
-
-  [data-disabled],
-  :disabled {
-    border-color: GrayText;
-    color: GrayText;
-  }
-}

package/dist/styles/browser-live-view.css

@@ -7,7 +7,7 @@
   display: flex;
   width: 100%;
   aspect-ratio: 16 / 10;
-  font-family: var(--sigvelo-font-sans);
+  font-family: inherit;
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
   border-radius: var(--sigvelo-radius-lg);
@@ -33,8 +33,8 @@
 }
 
 .browser-live-view__badge-dot {
-  width: 0.375rem;
-  height: 0.375rem;
+  width: var(--sigvelo-spacing-1-5);
+  height: var(--sigvelo-spacing-1-5);
   border-radius: 50%;
   background-color: currentColor;
   animation: browser-live-view-pulse 1.4s ease-in-out infinite;
@@ -51,13 +51,13 @@
 }
 
 .browser-live-view__ended-title {
-  font-size: 0.8125rem;
+  font-size: var(--sigvelo-text-compact);
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text-muted);
 }
 
 .browser-live-view__ended-detail {
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
   max-width: 80%;
   overflow: hidden;
@@ -84,7 +84,7 @@
   gap: 0.5rem;
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   color: var(--sigvelo-color-text-muted);
-  font-size: 0.8125rem;
+  font-size: var(--sigvelo-text-compact);
 }
 
 .browser-live-view__state-spinner {
@@ -115,7 +115,7 @@
 .browser-live-view__dialog {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: var(--sigvelo-spacing-3);
 }
 
 .browser-live-view__dialog-body {

package/dist/styles/browser-replay.css

@@ -5,7 +5,7 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  font-family: var(--sigvelo-font-sans);
+  font-family: inherit;
   color: var(--sigvelo-color-text);
   background-color: var(--sigvelo-color-surface);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -41,16 +41,16 @@
   place-content: center;
   padding: 1rem;
   color: var(--sigvelo-color-text-muted);
-  font-size: 0.8125rem;
+  font-size: var(--sigvelo-text-compact);
   text-align: center;
 }
 
 .browser-replay__controls {
   display: flex;
   align-items: center;
-  gap: 0.625rem;
+  gap: var(--sigvelo-spacing-2-5);
   padding-block: 0.5rem;
-  padding-inline: 0.75rem;
+  padding-inline: var(--sigvelo-spacing-3);
   border-block-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
   background-color: var(--sigvelo-color-surface);
@@ -70,7 +70,7 @@
 .browser-replay__time {
   color: var(--sigvelo-color-text-muted);
   font-family: var(--sigvelo-font-mono);
-  font-size: 0.6875rem;
+  font-size: var(--sigvelo-text-2xs);
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
 }

package/dist/styles/browser-run-panel.css

@@ -1,132 +1,83 @@
 .browser-run-panel {
   min-inline-size: 0;
   min-block-size: 0;
-  display: flex;
-  flex-direction: column;
-  background: var(--sigvelo-color-canvas);
-  color: var(--sigvelo-color-text);
-  font-family: var(--sigvelo-font-sans);
+  height: 100%;
 }
 
-.browser-run-panel__header {
+.browser-run-panel .web-preview__nav:has(.browser-run-panel__tabs) {
   min-block-size: 3rem;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-  padding: 0.5rem 0.625rem;
-  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    color-mix(in srgb, var(--sigvelo-color-neutral-border-subtle) 62%, transparent);
-  background: var(--sigvelo-color-surface);
-}
-
-.browser-run-panel__identity {
-  min-inline-size: 0;
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-}
-
-.browser-run-panel__icon {
-  flex: none;
-  color: var(--sigvelo-color-text-muted);
+  gap: 0;
+  padding-block: 0;
+  padding-inline: var(--sigvelo-spacing-1-5);
+  border-block-end: 0;
+  background: var(--sigvelo-color-canvas);
 }
 
-.browser-run-panel__title-block {
-  min-inline-size: 0;
+.browser-run-panel__tabs {
   display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-}
-
-.browser-run-panel__title {
-  font-size: 0.8125rem;
-  font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: 1.2;
-}
-
-.browser-run-panel__url,
-.browser-run-panel__target-url {
+  flex: 1;
   min-inline-size: 0;
-  overflow: hidden;
-  color: var(--sigvelo-color-text-muted);
-  font-size: 0.75rem;
-  line-height: 1.2;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.browser-run-panel__actions {
-  flex: none;
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.browser-run-panel__actions svg {
-  width: 1rem;
-  height: 1rem;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  scrollbar-width: none;
 }
 
-.browser-run-panel__targets {
-  display: flex;
-  gap: 0.375rem;
-  padding: 0.5rem 0.625rem;
-  overflow-x: auto;
-  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    color-mix(in srgb, var(--sigvelo-color-neutral-border-subtle) 50%, transparent);
-  background: color-mix(in oklab, var(--sigvelo-color-canvas), var(--sigvelo-color-surface) 58%);
+.browser-run-panel__tabs::-webkit-scrollbar {
+  display: none;
 }
 
-.browser-run-panel__target {
-  min-inline-size: 8rem;
+.browser-run-panel__tab.button {
+  min-inline-size: min(11rem, 45vw);
+  min-block-size: 2.75rem;
   max-inline-size: 13rem;
-  display: flex;
   flex: 0 0 auto;
-  flex-direction: column;
-  gap: 0.125rem;
-  padding: 0.375rem 0.5rem;
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    color-mix(in srgb, var(--sigvelo-color-neutral-border-subtle) 68%, transparent);
-  border-radius: var(--sigvelo-radius-md);
-  background: var(--sigvelo-color-surface);
-  color: inherit;
-  font: inherit;
+  gap: 0.5rem;
+  padding-inline: var(--sigvelo-spacing-3);
+  border-radius: var(--sigvelo-radius-md) var(--sigvelo-radius-md) 0 0;
   text-align: start;
-  cursor: pointer;
-}
-
-.browser-run-panel__target:hover {
-  border-color: var(--sigvelo-color-neutral-border);
+  white-space: nowrap;
 }
 
-.browser-run-panel__target:focus-visible {
-  outline: 2px solid var(--sigvelo-color-focus);
-  outline-offset: 2px;
+.browser-run-panel__tab[aria-selected="true"] {
+  background: var(--sigvelo-color-surface);
+  color: var(--sigvelo-color-text);
 }
 
-.browser-run-panel__target[aria-pressed="true"] {
-  border-color: color-mix(in srgb, var(--sigvelo-color-primary-border) 82%, transparent);
+.browser-run-panel__tab-glyph {
+  display: grid;
+  flex: none;
+  inline-size: 1.125rem;
+  block-size: 1.125rem;
+  place-items: center;
+  border-radius: 50%;
   background: var(--sigvelo-color-primary-bg-subtle);
+  color: var(--sigvelo-color-primary-text);
+  font-size: var(--sigvelo-text-3xs);
+  font-weight: var(--sigvelo-font-weight-bold);
+  line-height: 1;
 }
 
-.browser-run-panel__target-title {
+.browser-run-panel__tab-title {
   overflow: hidden;
-  font-size: 0.75rem;
-  font-weight: var(--sigvelo-font-weight-semibold);
+  max-inline-size: 100%;
+  font-size: var(--sigvelo-text-xs);
   line-height: 1.2;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.browser-run-panel__body {
+.browser-run-panel__address-bar {
+  min-block-size: 3rem;
+  background: var(--sigvelo-color-surface);
+}
+
+.browser-run-panel .browser-run-panel__body {
   min-block-size: 0;
   display: flex;
-  flex: 1;
-  padding: 0.625rem;
+  padding: var(--sigvelo-spacing-2-5);
 }
 
-.browser-run-panel__body > .browser-live-view {
+.browser-run-panel__live-view {
   flex: 1;
   min-block-size: 16rem;
   aspect-ratio: auto;
@@ -134,27 +85,17 @@
 }
 
 .browser-run-panel__state {
-  min-block-size: 14rem;
-  display: flex;
   flex: 1;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  padding: 1rem;
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-  border-radius: var(--sigvelo-radius-md);
-  background: var(--sigvelo-color-neutral-bg-subtle);
-  color: var(--sigvelo-color-text-muted);
-  font-size: 0.8125rem;
-  text-align: center;
+  min-block-size: 14rem;
 }
 
 .browser-run-panel__state[data-tone="danger"] {
   min-block-size: auto;
   flex: none;
-  margin: 0.625rem 0.625rem 0;
+  margin: 0;
+  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-danger-border-subtle);
+  border-radius: 0;
   border-color: var(--sigvelo-color-danger-border-subtle);
   background: var(--sigvelo-color-danger-bg-subtle);
   color: var(--sigvelo-color-danger-text);
@@ -171,8 +112,14 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .browser-run-panel__spinner,
-  .browser-run-panel__actions .button svg {
+  .browser-run-panel__spinner {
     animation: none;
   }
 }
+
+@media (forced-colors: active) {
+  .browser-run-panel__tab[aria-selected="true"] {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+}

package/dist/styles/button.css

@@ -1,16 +1,25 @@
 .button {
+  --sigvelo-recipe-button-height: var(--sigvelo-control-height-md);
+  --sigvelo-recipe-button-padding-inline: var(--sigvelo-spacing-3);
+  --sigvelo-recipe-button-font-size: var(--sigvelo-control-text-md);
+  --sigvelo-recipe-button-radius: var(--sigvelo-radius-md);
+
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 0.5rem;
+  gap: var(--sigvelo-recipe-control-gap);
+  min-block-size: var(--sigvelo-recipe-button-height);
+  padding-block: 0;
+  padding-inline: var(--sigvelo-recipe-button-padding-inline);
   white-space: nowrap;
   border: none;
   cursor: pointer;
-  font-family: var(--sigvelo-font-sans);
+  font-family: inherit;
+  font-size: var(--sigvelo-recipe-button-font-size);
   font-weight: var(--sigvelo-font-weight-semibold);
   line-height: 1.25;
   text-decoration: none;
-  border-radius: var(--sigvelo-radius-md);
+  border-radius: var(--sigvelo-recipe-button-radius);
   transition:
     background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
     color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
@@ -26,14 +35,12 @@
 
 .button:focus-visible {
   outline: none;
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px var(--sigvelo-color-focus);
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
 }
 
 .button[data-disabled] {
   pointer-events: none;
-  opacity: 0.5;
+  opacity: var(--sigvelo-recipe-disabled-opacity);
 }
 
 /* Normal appearance */
@@ -123,66 +130,64 @@
 /* Sizes */
 
 .button--xs {
-  min-height: var(--sigvelo-control-height-xs);
-  padding-block: 0;
-  padding-inline: 0.65rem;
-  font-size: var(--sigvelo-control-text-xs);
-  border-radius: var(--sigvelo-radius-sm);
+  --sigvelo-recipe-button-height: var(--sigvelo-control-height-xs);
+  --sigvelo-recipe-button-padding-inline: var(--sigvelo-spacing-2);
+  --sigvelo-recipe-button-font-size: var(--sigvelo-control-text-xs);
+  --sigvelo-recipe-button-radius: var(--sigvelo-radius-sm);
 }
 
 .button--sm {
-  min-height: var(--sigvelo-control-height-sm);
-  padding-block: 0;
-  padding-inline: 0.85rem;
-  font-size: var(--sigvelo-control-text-sm);
-  border-radius: var(--sigvelo-radius-sm);
+  --sigvelo-recipe-button-height: var(--sigvelo-control-height-sm);
+  --sigvelo-recipe-button-padding-inline: var(--sigvelo-spacing-2-5);
+  --sigvelo-recipe-button-font-size: var(--sigvelo-control-text-sm);
+  --sigvelo-recipe-button-radius: var(--sigvelo-radius-sm);
 }
 
 .button--md {
-  min-height: var(--sigvelo-control-height-md);
-  padding-block: 0;
-  padding-inline: 1.25rem;
-  font-size: var(--sigvelo-control-text-md);
+  --sigvelo-recipe-button-height: var(--sigvelo-control-height-md);
+  --sigvelo-recipe-button-padding-inline: var(--sigvelo-spacing-3);
+  --sigvelo-recipe-button-font-size: var(--sigvelo-control-text-md);
 }
 
 .button--lg {
-  min-height: var(--sigvelo-control-height-lg);
-  padding-block: 0;
-  padding-inline: 1.5rem;
-  font-size: var(--sigvelo-control-text-lg);
+  --sigvelo-recipe-button-height: var(--sigvelo-control-height-lg);
+  --sigvelo-recipe-button-padding-inline: var(--sigvelo-spacing-4);
+  --sigvelo-recipe-button-font-size: var(--sigvelo-control-text-lg);
 }
 
 .button--xl {
-  min-height: var(--sigvelo-control-height-xl);
-  padding-block: 0;
-  padding-inline: 1.75rem;
-  font-size: var(--sigvelo-control-text-xl);
+  --sigvelo-recipe-button-height: var(--sigvelo-control-height-xl);
+  --sigvelo-recipe-button-padding-inline: 1.25rem;
+  --sigvelo-recipe-button-font-size: var(--sigvelo-control-text-xl);
 }
 
 .button--icon {
-  min-height: var(--sigvelo-control-height-md);
-  width: var(--sigvelo-control-height-md);
-  padding: 0;
+  --sigvelo-recipe-button-padding-inline: 0;
+
+  inline-size: var(--sigvelo-recipe-button-height);
 }
 
 .button--icon-xs {
-  min-height: var(--sigvelo-control-height-xs);
-  width: var(--sigvelo-control-height-xs);
-  padding: 0;
-  border-radius: var(--sigvelo-radius-sm);
+  --sigvelo-recipe-button-height: var(--sigvelo-control-height-xs);
+  --sigvelo-recipe-button-padding-inline: 0;
+  --sigvelo-recipe-button-radius: var(--sigvelo-radius-sm);
+
+  inline-size: var(--sigvelo-recipe-button-height);
 }
 
 .button--icon-sm {
-  min-height: var(--sigvelo-control-height-sm);
-  width: var(--sigvelo-control-height-sm);
-  padding: 0;
-  border-radius: var(--sigvelo-radius-sm);
+  --sigvelo-recipe-button-height: var(--sigvelo-control-height-sm);
+  --sigvelo-recipe-button-padding-inline: 0;
+  --sigvelo-recipe-button-radius: var(--sigvelo-radius-sm);
+
+  inline-size: var(--sigvelo-recipe-button-height);
 }
 
 .button--icon-lg {
-  min-height: var(--sigvelo-control-height-lg);
-  width: var(--sigvelo-control-height-lg);
-  padding: 0;
+  --sigvelo-recipe-button-height: var(--sigvelo-control-height-lg);
+  --sigvelo-recipe-button-padding-inline: 0;
+
+  inline-size: var(--sigvelo-recipe-button-height);
 }
 
 @media (forced-colors: active) {

package/dist/styles/card.css

@@ -3,7 +3,7 @@
   color: var(--sigvelo-color-text);
   /* Shadow-led elevation: no perimeter border */
   border-radius: var(--sigvelo-radius-lg);
-  padding: 1.5rem;
+  padding: var(--sigvelo-spacing-6);
   container-type: inline-size;
   box-shadow: var(--sigvelo-shadow-sm);
   transition:
@@ -14,7 +14,7 @@
 .card__header,
 .card__footer {
   align-items: center;
-  gap: 0.75rem;
+  gap: var(--sigvelo-recipe-row-padding-inline);
 }
 
 .card__header {
@@ -68,7 +68,5 @@
 
 .card--hover:focus-visible {
   outline: none;
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px var(--sigvelo-color-focus);
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
 }